ui: Move favourites and archive to act as a predefined list

8 files changed, 45 insertions, 47 deletions

diff --git a/packages/web/app/dashboard/archive/page.tsx b/packages/web/app/dashboard/archive/page.tsx
new file mode 100644
index 00000000..81eea57c
--- /dev/null
+++ b/packages/web/app/dashboard/archive/page.tsx
@@ -0,0 +1,9 @@
+import Bookmarks from "../bookmarks/components/Bookmarks";
+
+export default async function ArchivedBookmarkPage() {
+  return (
+    <div className="continer mt-4">
+      <Bookmarks title="🗄️ Archive" archived={true} showDivider={true} />
+    </div>
+  );
+}
diff --git a/packages/web/app/dashboard/bookmarks/archive/page.tsx b/packages/web/app/dashboard/bookmarks/archive/page.tsx
deleted file mode 100644
index 954c298c..00000000
--- a/packages/web/app/dashboard/bookmarks/archive/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import Bookmarks from "../components/Bookmarks";
-
-export default async function ArchivedBookmarkPage() {
-  return <Bookmarks title="Archive" archived={true} />;
-}
diff --git a/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx b/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx
index d704b9d6..62b93dc8 100644
--- a/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx
@@ -8,7 +8,8 @@ export default async function Bookmarks({
   favourited,
   archived,
   title,
-}: ZGetBookmarksRequest & { title: string }) {
+  showDivider,
+}: ZGetBookmarksRequest & { title: string; showDivider?: boolean }) {
   const session = await getServerAuthSession();
   if (!session) {
     redirect("/");
@@ -22,11 +23,10 @@ export default async function Bookmarks({
   const bookmarks = await api.bookmarks.getBookmarks(query);
 
   return (
-    <>
-      <div className="container pb-4 text-2xl">{title}</div>
-      <div className="container">
-        <BookmarksGrid query={query} bookmarks={bookmarks.bookmarks} />
-      </div>
-    </>
+    <div className="container flex flex-col gap-3">
+      <div className="text-2xl">{title}</div>
+      {showDivider && <hr />}
+      <BookmarksGrid query={query} bookmarks={bookmarks.bookmarks} />
+    </div>
   );
 }
diff --git a/packages/web/app/dashboard/bookmarks/favourites/page.tsx b/packages/web/app/dashboard/bookmarks/favourites/page.tsx
deleted file mode 100644
index 990b087d..00000000
--- a/packages/web/app/dashboard/bookmarks/favourites/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import Bookmarks from "../components/Bookmarks";
-
-export default async function FavouritesBookmarkPage() {
-  return <Bookmarks title="Favourites" archived={false} favourited={true} />;
-}
diff --git a/packages/web/app/dashboard/components/AllLists.tsx b/packages/web/app/dashboard/components/AllLists.tsx
index 78d88654..5dc36043 100644
--- a/packages/web/app/dashboard/components/AllLists.tsx
+++ b/packages/web/app/dashboard/components/AllLists.tsx
@@ -25,7 +25,18 @@ export default function AllLists() {
           <Plus />
         </Link>
       </li>
-      {lists.lists.length == 0 && <li>No lists</li>}
+      <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}
diff --git a/packages/web/app/dashboard/components/ModileSidebar.tsx b/packages/web/app/dashboard/components/ModileSidebar.tsx
index 74cbacba..c9a933fa 100644
--- a/packages/web/app/dashboard/components/ModileSidebar.tsx
+++ b/packages/web/app/dashboard/components/ModileSidebar.tsx
@@ -1,5 +1,5 @@
 import MobileSidebarItem from "./ModileSidebarItem";
-import { Archive, Star, Tag, PackageOpen, Settings } from "lucide-react";
+import { Tag, PackageOpen, Settings, Search } from "lucide-react";
 import SidebarProfileOptions from "./SidebarProfileOptions";
 
 export default async function MobileSidebar() {
@@ -7,14 +7,7 @@ export default async function MobileSidebar() {
     <aside className="w-full">
       <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={<Star />}
-          path="/dashboard/bookmarks/favourites"
-        />
-        <MobileSidebarItem
-          logo={<Archive />}
-          path="/dashboard/bookmarks/archive"
-        />
+        <MobileSidebarItem logo={<Search />} path="/dashboard/search" />
         <MobileSidebarItem logo={<Tag />} path="/dashboard/tags" />
         <MobileSidebarItem logo={<Settings />} path="/dashboard/settings" />
         <SidebarProfileOptions />
diff --git a/packages/web/app/dashboard/components/Sidebar.tsx b/packages/web/app/dashboard/components/Sidebar.tsx
index 29e5baed..c6282a6b 100644
--- a/packages/web/app/dashboard/components/Sidebar.tsx
+++ b/packages/web/app/dashboard/components/Sidebar.tsx
@@ -1,13 +1,4 @@
-import {
-  Archive,
-  Star,
-  Tag,
-  Home,
-  PackageOpen,
-  Settings,
-  Search,
-  Shield,
-} from "lucide-react";
+import { Tag, Home, PackageOpen, Settings, Search, Shield } from "lucide-react";
 import { redirect } from "next/navigation";
 import SidebarItem from "./SidebarItem";
 import { getServerAuthSession } from "@/server/auth";
@@ -39,11 +30,6 @@ export default async function Sidebar() {
             name="Home"
             path="/dashboard/bookmarks"
           />
-          <SidebarItem
-            logo={<Star />}
-            name="Favourites"
-            path="/dashboard/bookmarks/favourites"
-          />
           {serverConfig.meilisearch && (
             <SidebarItem
               logo={<Search />}
@@ -51,11 +37,6 @@ export default async function Sidebar() {
               path="/dashboard/search"
             />
           )}
-          <SidebarItem
-            logo={<Archive />}
-            name="Archive"
-            path="/dashboard/bookmarks/archive"
-          />
           <SidebarItem logo={<Tag />} name="Tags" path="/dashboard/tags" />
           <SidebarItem
             logo={<Settings />}
diff --git a/packages/web/app/dashboard/favourites/page.tsx b/packages/web/app/dashboard/favourites/page.tsx
new file mode 100644
index 00000000..2dc555d2
--- /dev/null
+++ b/packages/web/app/dashboard/favourites/page.tsx
@@ -0,0 +1,14 @@
+import Bookmarks from "../bookmarks/components/Bookmarks";
+
+export default async function FavouritesBookmarkPage() {
+  return (
+    <div className="continer mt-4">
+      <Bookmarks
+        title="⭐️ Favourites"
+        archived={false}
+        favourited={true}
+        showDivider={true}
+      />
+    </div>
+  );
+}