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

5 files changed, 62 insertions, 79 deletions

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({