ui(web): move layout selector to main screen (#252)

9 files changed, 99 insertions, 100 deletions

diff --git a/apps/web/app/dashboard/archive/page.tsx b/apps/web/app/dashboard/archive/page.tsx
index 26ec45e9..a5326205 100644
--- a/apps/web/app/dashboard/archive/page.tsx
+++ b/apps/web/app/dashboard/archive/page.tsx
@@ -1,17 +1,27 @@
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
+import ChangeLayout from "@/components/dashboard/ChangeLayout";
 import InfoTooltip from "@/components/ui/info-tooltip";
 
+function header() {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex gap-2">
+        <p className="text-2xl">🗄️ Archive</p>
+        <InfoTooltip size={17} className="my-auto" variant="explain">
+          <p>Archived bookmarks won&apos;t appear in the homepage</p>
+        </InfoTooltip>
+      </div>
+      <div>
+        <ChangeLayout />
+      </div>
+    </div>
+  );
+}
+
 export default async function ArchivedBookmarkPage() {
   return (
     <Bookmarks
-      header={
-        <span className="flex gap-2">
-          <p className="text-2xl">🗄️ Archive</p>
-          <InfoTooltip size={17} className="my-auto" variant="explain">
-            <p>Archived bookmarks won&apos;t appear in the homepage</p>
-          </InfoTooltip>
-        </span>
-      }
+      header={header()}
       query={{ archived: true }}
       showDivider={true}
       showEditorCard={true}
diff --git a/apps/web/app/dashboard/bookmarks/page.tsx b/apps/web/app/dashboard/bookmarks/page.tsx
index 90f4f2cb..47392ad5 100644
--- a/apps/web/app/dashboard/bookmarks/page.tsx
+++ b/apps/web/app/dashboard/bookmarks/page.tsx
@@ -1,19 +1,17 @@
 import React from "react";
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
-import TopNav from "@/components/dashboard/bookmarks/TopNav";
-import { Separator } from "@/components/ui/separator";
+import ChangeLayout from "@/components/dashboard/ChangeLayout";
+import { SearchInput } from "@/components/dashboard/search/SearchInput";
 
 export default async function BookmarksPage() {
   return (
     <div>
-      <TopNav />
-      <Separator />
+      <div className="flex gap-2">
+        <SearchInput />
+        <ChangeLayout />
+      </div>
       <div className="my-4 flex-1">
-        <Bookmarks
-          header={<p className="text-2xl">Bookmarks</p>}
-          query={{ archived: false }}
-          showEditorCard={true}
-        />
+        <Bookmarks query={{ archived: false }} showEditorCard={true} />
       </div>
     </div>
   );
diff --git a/apps/web/app/dashboard/favourites/page.tsx b/apps/web/app/dashboard/favourites/page.tsx
index 423a8e69..fd39b90a 100644
--- a/apps/web/app/dashboard/favourites/page.tsx
+++ b/apps/web/app/dashboard/favourites/page.tsx
@@ -1,9 +1,15 @@
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
+import ChangeLayout from "@/components/dashboard/ChangeLayout";
 
 export default async function FavouritesBookmarkPage() {
   return (
     <Bookmarks
-      header={<p className="text-2xl">⭐️ Favourites</p>}
+      header={
+        <div className="flex items-center justify-between">
+          <p className="text-2xl">⭐️ Favourites</p>
+          <ChangeLayout />
+        </div>
+      }
       query={{ favourited: true }}
       showDivider={true}
       showEditorCard={true}
diff --git a/apps/web/app/dashboard/search/page.tsx b/apps/web/app/dashboard/search/page.tsx
index 8454acc5..11febca6 100644
--- a/apps/web/app/dashboard/search/page.tsx
+++ b/apps/web/app/dashboard/search/page.tsx
@@ -2,9 +2,9 @@
 
 import { Suspense, useRef } from "react";
 import BookmarksGrid from "@/components/dashboard/bookmarks/BookmarksGrid";
+import ChangeLayout from "@/components/dashboard/ChangeLayout";
 import { SearchInput } from "@/components/dashboard/search/SearchInput";
 import { FullPageSpinner } from "@/components/ui/full-page-spinner";
-import { Separator } from "@/components/ui/separator";
 import { useBookmarkSearch } from "@/lib/hooks/bookmark-search";
 
 function SearchComp() {
@@ -15,8 +15,10 @@ function SearchComp() {
 
   return (
     <div className="flex flex-col gap-3">
-      <SearchInput ref={inputRef} autoFocus={true} />
-      <Separator />
+      <div className="flex gap-2">
+        <SearchInput ref={inputRef} autoFocus={true} />
+        <ChangeLayout />
+      </div>
       {data ? (
         <BookmarksGrid bookmarks={data.bookmarks} />
       ) : (
diff --git a/apps/web/components/dashboard/ChangeLayout.tsx b/apps/web/components/dashboard/ChangeLayout.tsx
new file mode 100644
index 00000000..59acb6bd
--- /dev/null
+++ b/apps/web/components/dashboard/ChangeLayout.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useBookmarkLayout } from "@/lib/userLocalSettings/bookmarksLayout";
+import { updateBookmarksLayout } from "@/lib/userLocalSettings/userLocalSettings";
+import { Check, LayoutDashboard, LayoutGrid, LayoutList } from "lucide-react";
+
+type LayoutType = "masonry" | "grid" | "list";
+
+const iconMap = {
+  masonry: LayoutDashboard,
+  grid: LayoutGrid,
+  list: LayoutList,
+};
+
+export default function SidebarProfileOptions() {
+  const layout = useBookmarkLayout();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">
+          {React.createElement(iconMap[layout], { size: 18 })}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-fit">
+        {Object.keys(iconMap).map((key) => (
+          <DropdownMenuItem
+            key={key}
+            className="cursor-pointer justify-between"
+            onClick={async () => await updateBookmarksLayout(key as LayoutType)}
+          >
+            <div className="flex items-center gap-2">
+              {React.createElement(iconMap[key as LayoutType], { size: 18 })}
+              <span className="capitalize">{key}</span>
+            </div>
+            {layout == key && <Check className="ml-2 size-4" />}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
index 6a9266b9..5729e846 100644
--- a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
+++ b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
@@ -14,7 +14,7 @@ export default async function Bookmarks({
   showEditorCard = false,
 }: {
   query: ZGetBookmarksRequest;
-  header: React.ReactNode;
+  header?: React.ReactNode;
   showDivider?: boolean;
   showEditorCard?: boolean;
 }) {
diff --git a/apps/web/components/dashboard/bookmarks/TopNav.tsx b/apps/web/components/dashboard/bookmarks/TopNav.tsx
deleted file mode 100644
index 189c9d5c..00000000
--- a/apps/web/components/dashboard/bookmarks/TopNav.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { SearchInput } from "../search/SearchInput";
-
-export default function TopNav() {
-  return <SearchInput />;
-}
diff --git a/apps/web/components/dashboard/lists/ListHeader.tsx b/apps/web/components/dashboard/lists/ListHeader.tsx
index 6796d484..2f69203e 100644
--- a/apps/web/components/dashboard/lists/ListHeader.tsx
+++ b/apps/web/components/dashboard/lists/ListHeader.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
+import ChangeLayout from "@/components/dashboard/ChangeLayout";
 import { Button } from "@/components/ui/button";
 import { MoreHorizontal } from "lucide-react";
 
@@ -32,15 +33,18 @@ export default function ListHeader({
   }
 
   return (
-    <div className="flex justify-between">
+    <div className="flex items-center justify-between">
       <span className="text-2xl">
         {list.icon} {list.name}
       </span>
-      <ListOptions list={list}>
-        <Button variant="ghost">
-          <MoreHorizontal />
-        </Button>
-      </ListOptions>
+      <div>
+        <ListOptions list={list}>
+          <Button variant="ghost">
+            <MoreHorizontal />
+          </Button>
+        </ListOptions>
+        <ChangeLayout />
+      </div>
     </div>
   );
 }
diff --git a/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx b/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx
index c2ae493a..af3f1548 100644
--- a/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx
+++ b/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx
@@ -7,69 +7,12 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { useBookmarkLayout } from "@/lib/userLocalSettings/bookmarksLayout";
-import { updateBookmarksLayout } from "@/lib/userLocalSettings/userLocalSettings";
-import {
-  Check,
-  LayoutDashboard,
-  LayoutGrid,
-  LayoutList,
-  LayoutPanelLeft,
-  LogOut,
-  Moon,
-  MoreHorizontal,
-  Paintbrush,
-  Sun,
-} from "lucide-react";
+import { LogOut, Moon, MoreHorizontal, Paintbrush, Sun } from "lucide-react";
 import { signOut } from "next-auth/react";
 import { useTheme } from "next-themes";
 
-function BookmarkLayoutSelector() {
-  const layout = useBookmarkLayout();
-
-  const checkedComp = <Check className="ml-2 size-4" />;
-
-  return (
-    <>
-      <DropdownMenuItem
-        className="justify-between"
-        onClick={async () => await updateBookmarksLayout("masonry")}
-      >
-        <div className="flex items-center gap-2">
-          <LayoutDashboard className="size-4" />
-          <span>Masonry</span>
-        </div>
-        {layout == "masonry" && checkedComp}
-      </DropdownMenuItem>
-      <DropdownMenuItem
-        className="justify-between"
-        onClick={async () => await updateBookmarksLayout("grid")}
-      >
-        <div className="flex items-center gap-2">
-          <LayoutGrid className="size-4" />
-          <span>Grid</span>
-        </div>
-        {layout == "grid" && checkedComp}
-      </DropdownMenuItem>
-      <DropdownMenuItem
-        className="justify-between"
-        onClick={async () => await updateBookmarksLayout("list")}
-      >
-        <div className="flex items-center gap-2">
-          <LayoutList className="size-4" />
-          <span>List</span>
-        </div>
-        {layout == "list" && checkedComp}
-      </DropdownMenuItem>
-    </>
-  );
-}
-
 function DarkModeToggle() {
   const { theme } = useTheme();
 
@@ -109,15 +52,6 @@ export default function SidebarProfileOptions() {
         <DropdownMenuItem onClick={toggleTheme}>
           <DarkModeToggle />
         </DropdownMenuItem>
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger>
-            <LayoutPanelLeft className="mr-2 size-4" />
-            <span>Layout</span>
-          </DropdownMenuSubTrigger>
-          <DropdownMenuSubContent>
-            <BookmarkLayoutSelector />
-          </DropdownMenuSubContent>
-        </DropdownMenuSub>
         <DropdownMenuItem
           onClick={() =>
             signOut({