1 files changed, 60 insertions, 0 deletions
diff --git a/apps/web/components/dashboard/sidebar/AllLists.tsx b/apps/web/components/dashboard/sidebar/AllLists.tsx
new file mode 100644
index 00000000..a77252d0
--- /dev/null
+++ b/apps/web/components/dashboard/sidebar/AllLists.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { api } from "@/lib/trpc";
+import SidebarItem from "./SidebarItem";
+import NewListModal, { useNewListModal } from "./NewListModal";
+import { Plus } from "lucide-react";
+import Link from "next/link";
+import { ZBookmarkList } from "@hoarder/trpc/types/lists";
+
+export default function AllLists({
+  initialData,
+}: {
+  initialData: { lists: ZBookmarkList[] };
+}) {
+  let { data: lists } = api.lists.list.useQuery(undefined, {
+    initialData,
+  });
+  // TODO: This seems to be a bug in react query
+  lists ||= initialData;
+  const { setOpen } = useNewListModal();
+
+  return (
+    <ul className="max-h-full gap-y-2 overflow-auto text-sm font-medium">
+      <NewListModal />
+      <li className="flex justify-between pb-2 font-bold">
+        <p>Lists</p>
+        <Link href="#" onClick={() => setOpen(true)}>
+          <Plus />
+        </Link>
+      </li>
+      <SidebarItem
+        logo={<span className="text-lg">📋</span>}
+        name="All Lists"
+        path={`/dashboard/lists`}
+        className="py-0.5"
+      />
+      <SidebarItem
+        logo={<span className="text-lg">⭐️</span>}
+        name="Favourties"
+        path={`/dashboard/favourites`}
+        className="py-0.5"
+      />
+      <SidebarItem
+        logo={<span className="text-lg">🗄️</span>}
+        name="Archive"
+        path={`/dashboard/archive`}
+        className="py-0.5"
+      />
+      {lists.lists.map((l) => (
+        <SidebarItem
+          key={l.id}
+          logo={<span className="text-lg"> {l.icon}</span>}
+          name={l.name}
+          path={`/dashboard/lists/${l.id}`}
+          className="py-0.5"
+        />
+      ))}
+    </ul>
+  );
+}