1 files changed, 66 insertions, 0 deletions
diff --git a/packages/web/components/dashboard/lists/AllListsView.tsx b/packages/web/components/dashboard/lists/AllListsView.tsx
new file mode 100644
index 00000000..81f31cde
--- /dev/null
+++ b/packages/web/components/dashboard/lists/AllListsView.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { api } from "@/lib/trpc";
+import { ZBookmarkList } from "@hoarder/trpc/types/lists";
+import { keepPreviousData } from "@tanstack/react-query";
+import { Plus } from "lucide-react";
+import Link from "next/link";
+import { useNewListModal } from "@/components/dashboard/sidebar/NewListModal";
+
+function ListItem({
+  name,
+  icon,
+  path,
+}: {
+  name: string;
+  icon: string;
+  path: string;
+}) {
+  return (
+    <Link href={path}>
+      <div className="bg-background rounded-md border border-gray-200 px-4 py-2 text-lg">
+        <p className="text-nowrap">
+          {icon} {name}
+        </p>
+      </div>
+    </Link>
+  );
+}
+
+export default function AllListsView({
+  initialData,
+}: {
+  initialData: ZBookmarkList[];
+}) {
+  const { setOpen: setIsNewListModalOpen } = useNewListModal();
+  let { data: lists } = api.lists.list.useQuery(undefined, {
+    initialData: { lists: initialData },
+    placeholderData: keepPreviousData,
+  });
+
+  // TODO: This seems to be a bug in react query
+  lists ||= { lists: initialData };
+
+  return (
+    <div className="flex flex-col flex-wrap gap-2 md:flex-row">
+      <Button
+        className="my-auto flex h-full"
+        onClick={() => setIsNewListModalOpen(true)}
+      >
+        <Plus />
+        <span className="my-auto">New List</span>
+      </Button>
+      <ListItem name="Favourites" icon="⭐️" path={`/dashboard/favourites`} />
+      <ListItem name="Archive" icon="🗄️" path={`/dashboard/archive`} />
+      {lists.lists.map((l) => (
+        <ListItem
+          key={l.id}
+          name={l.name}
+          icon={l.icon}
+          path={`/dashboard/lists/${l.id}`}
+        />
+      ))}
+    </div>
+  );
+}