feature: Add an 'All Lists' page

7 files changed, 101 insertions, 14 deletions

diff --git a/packages/web/app/dashboard/components/AllLists.tsx b/packages/web/app/dashboard/components/AllLists.tsx
index 5dc36043..e2a6b777 100644
--- a/packages/web/app/dashboard/components/AllLists.tsx
+++ b/packages/web/app/dashboard/components/AllLists.tsx
@@ -26,6 +26,12 @@ export default function AllLists() {
         </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`}
diff --git a/packages/web/app/dashboard/components/ModileSidebar.tsx b/packages/web/app/dashboard/components/ModileSidebar.tsx
index c9a933fa..4bd6a347 100644
--- a/packages/web/app/dashboard/components/ModileSidebar.tsx
+++ b/packages/web/app/dashboard/components/ModileSidebar.tsx
@@ -1,5 +1,11 @@
 import MobileSidebarItem from "./ModileSidebarItem";
-import { Tag, PackageOpen, Settings, Search } from "lucide-react";
+import {
+  Tag,
+  PackageOpen,
+  Settings,
+  Search,
+  ClipboardList,
+} from "lucide-react";
 import SidebarProfileOptions from "./SidebarProfileOptions";
 
 export default async function MobileSidebar() {
@@ -8,6 +14,7 @@ export default async function MobileSidebar() {
       <ul className="flex justify-between space-x-2 border-b-black bg-gray-100 px-5 py-2 pt-5">
         <MobileSidebarItem logo={<PackageOpen />} path="/dashboard/bookmarks" />
         <MobileSidebarItem logo={<Search />} path="/dashboard/search" />
+        <MobileSidebarItem logo={<ClipboardList />} path="/dashboard/lists" />
         <MobileSidebarItem logo={<Tag />} path="/dashboard/tags" />
         <MobileSidebarItem logo={<Settings />} path="/dashboard/settings" />
         <SidebarProfileOptions />
diff --git a/packages/web/app/dashboard/lists/[listId]/components/DeleteListButton.tsx b/packages/web/app/dashboard/lists/[listId]/components/DeleteListButton.tsx
index 8961b2d0..32a7facf 100644
--- a/packages/web/app/dashboard/lists/[listId]/components/DeleteListButton.tsx
+++ b/packages/web/app/dashboard/lists/[listId]/components/DeleteListButton.tsx
@@ -1,9 +1,10 @@
+"use client";
+
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogClose,
   DialogContent,
-  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
diff --git a/packages/web/app/dashboard/lists/[listId]/components/ListView.tsx b/packages/web/app/dashboard/lists/[listId]/components/ListView.tsx
index c3d49b6a..6489e9f0 100644
--- a/packages/web/app/dashboard/lists/[listId]/components/ListView.tsx
+++ b/packages/web/app/dashboard/lists/[listId]/components/ListView.tsx
@@ -4,7 +4,6 @@ import BookmarksGrid from "@/app/dashboard/bookmarks/components/BookmarksGrid";
 import { ZBookmark } from "@/lib/types/api/bookmarks";
 import { ZBookmarkListWithBookmarks } from "@/lib/types/api/lists";
 import { api } from "@/lib/trpc";
-import DeleteListButton from "./DeleteListButton";
 
 export default function ListView({
   bookmarks,
@@ -21,15 +20,6 @@ export default function ListView({
   );
 
   return (
-    <div className="container flex flex-col gap-3">
-      <div className="flex justify-between">
-        <span className="pt-4 text-2xl">
-          {data.icon} {data.name}
-        </span>
-        <DeleteListButton list={data} />
-      </div>
-      <hr />
-      <BookmarksGrid query={{ ids: data.bookmarks }} bookmarks={bookmarks} />
-    </div>
+    <BookmarksGrid query={{ ids: data.bookmarks }} bookmarks={bookmarks} />
   );
 }
diff --git a/packages/web/app/dashboard/lists/[listId]/page.tsx b/packages/web/app/dashboard/lists/[listId]/page.tsx
index b8ca79c3..397a0f1e 100644
--- a/packages/web/app/dashboard/lists/[listId]/page.tsx
+++ b/packages/web/app/dashboard/lists/[listId]/page.tsx
@@ -3,6 +3,7 @@ import { getServerAuthSession } from "@/server/auth";
 import { TRPCError } from "@trpc/server";
 import { notFound, redirect } from "next/navigation";
 import ListView from "./components/ListView";
+import DeleteListButton from "./components/DeleteListButton";
 
 export default async function ListPage({
   params,
@@ -28,5 +29,16 @@ export default async function ListPage({
 
   const bookmarks = await api.bookmarks.getBookmarks({ ids: list.bookmarks });
 
-  return <ListView list={list} bookmarks={bookmarks.bookmarks} />;
+  return (
+    <div className="container flex flex-col gap-3">
+      <div className="flex justify-between">
+        <span className="pt-4 text-2xl">
+          {list.icon} {list.name}
+        </span>
+        <DeleteListButton list={list} />
+      </div>
+      <hr />
+      <ListView list={list} bookmarks={bookmarks.bookmarks} />
+    </div>
+  );
 }
diff --git a/packages/web/app/dashboard/lists/components/AllListsView.tsx b/packages/web/app/dashboard/lists/components/AllListsView.tsx
new file mode 100644
index 00000000..7c8a9e56
--- /dev/null
+++ b/packages/web/app/dashboard/lists/components/AllListsView.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import LoadingSpinner from "@/components/ui/spinner";
+import { api } from "@/lib/trpc";
+import { ZBookmarkList } from "@/lib/types/api/lists";
+import { keepPreviousData } from "@tanstack/react-query";
+import Link from "next/link";
+
+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 { data: lists } = api.lists.list.useQuery(undefined, {
+    initialData: { lists: initialData },
+    placeholderData: keepPreviousData,
+  });
+
+  if (!lists) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <div className="flex flex-col gap-2 md:flex-row">
+      <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>
+  );
+}
diff --git a/packages/web/app/dashboard/lists/page.tsx b/packages/web/app/dashboard/lists/page.tsx
new file mode 100644
index 00000000..62e328b0
--- /dev/null
+++ b/packages/web/app/dashboard/lists/page.tsx
@@ -0,0 +1,14 @@
+import { api } from "@/server/api/client";
+import AllListsView from "./components/AllListsView";
+
+export default async function ListsPage() {
+  const lists = await api.lists.list();
+
+  return (
+    <div className="container mt-4 flex flex-col gap-3">
+      <p className="text-2xl">📋 All Lists</p>
+      <hr />
+      <AllListsView initialData={lists.lists} />
+    </div>
+  );
+}