1 files changed, 46 insertions, 0 deletions
diff --git a/apps/web/components/dashboard/lists/ListHeader.tsx b/apps/web/components/dashboard/lists/ListHeader.tsx
new file mode 100644
index 00000000..6796d484
--- /dev/null
+++ b/apps/web/components/dashboard/lists/ListHeader.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { MoreHorizontal } from "lucide-react";
+
+import { api } from "@hoarder/shared-react/trpc";
+import { ZBookmarkList } from "@hoarder/shared/types/lists";
+
+import { ListOptions } from "./ListOptions";
+
+export default function ListHeader({
+  initialData,
+}: {
+  initialData: ZBookmarkList & { bookmarks: string[] };
+}) {
+  const router = useRouter();
+  const { data: list, error } = api.lists.get.useQuery(
+    {
+      listId: initialData.id,
+    },
+    {
+      initialData,
+    },
+  );
+
+  if (error) {
+    // This is usually exercised during list deletions.
+    if (error.data?.code == "NOT_FOUND") {
+      router.push("/dashboard/lists");
+    }
+  }
+
+  return (
+    <div className="flex justify-between">
+      <span className="text-2xl">
+        {list.icon} {list.name}
+      </span>
+      <ListOptions list={list}>
+        <Button variant="ghost">
+          <MoreHorizontal />
+        </Button>
+      </ListOptions>
+    </div>
+  );
+}