feature(web): Implement a new profile options drop menu and move user…

… and admin settings there
hoarder-app · Oct 12, 2024 · b36eea8 · b36eea8
1 parent 0d94506
commit b36eea8
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 48 deletions.
diff --git a/apps/web/components/dashboard/header/Header.tsx b/apps/web/components/dashboard/header/Header.tsx
@@ -1,45 +1,17 @@
-import React from "react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import GlobalActions from "@/components/dashboard/GlobalActions";
 import ProfileOptions from "@/components/dashboard/header/ProfileOptions";
 import { SearchInput } from "@/components/dashboard/search/SearchInput";
 import HoarderLogo from "@/components/HoarderIcon";
-import { Button } from "@/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { getServerAuthSession } from "@/server/auth";
-import { Settings, Shield } from "lucide-react";
 
 export default async function Header() {
   const session = await getServerAuthSession();
   if (!session) {
     redirect("/");
   }
 
-  const adminItem =
-    session.user.role == "admin"
-      ? [
-          {
-            name: "Admin",
-            icon: <Shield size={18} />,
-            path: "/dashboard/admin",
-          },
-        ]
-      : [];
-
-  const headerItems = [
-    ...adminItem,
-    {
-      name: "Settings",
-      icon: <Settings size={18} />,
-      path: "/dashboard/settings",
-    },
-  ];
-
   return (
     <header className="sticky left-0 right-0 top-0 z-50 flex h-16 items-center justify-between overflow-x-auto overflow-y-hidden bg-background p-4 shadow">
       <div className="hidden items-center sm:flex">
@@ -51,19 +23,7 @@ export default async function Header() {
         <SearchInput className="min-w-40 bg-muted" />
         <GlobalActions />
       </div>
-      <div className="hidden items-center sm:flex">
-        {headerItems.map((item) => (
-          <Tooltip key={item.name} delayDuration={0}>
-            <TooltipTrigger asChild>
-              <Button variant="ghost">
-                <Link href={item.path} className="flex items-center">
-                  {item.icon}
-                </Link>
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="bottom">{item.name}</TooltipContent>
-          </Tooltip>
-        ))}
+      <div className="flex items-center">
         <ProfileOptions />
       </div>
     </header>

diff --git a/apps/web/components/dashboard/header/ProfileOptions.tsx b/apps/web/components/dashboard/header/ProfileOptions.tsx
@@ -10,7 +10,8 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { LogOut, Moon, Paintbrush, Sun } from "lucide-react";
+import { Separator } from "@/components/ui/separator";
+import { LogOut, Moon, Paintbrush, Settings, Shield, Sun } from "lucide-react";
 import { signOut, useSession } from "next-auth/react";
 import { useTheme } from "next-themes";
 
@@ -49,7 +50,32 @@ export default function SidebarProfileOptions() {
           {session.user.name?.charAt(0) ?? "U"}
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-fit">
+      <DropdownMenuContent className="mr-2 min-w-64 p-2">
+        <div className="flex gap-2">
+          <div className="border-new-gray-200 flex aspect-square size-11 items-center justify-center rounded-full border-4 bg-black p-0 text-white">
+            {session.user.name?.charAt(0) ?? "U"}
+          </div>
+          <div className="flex flex-col">
+            <p>{session.user.name}</p>
+            <p className="text-sm text-gray-400">{session.user.email}</p>
+          </div>
+        </div>
+        <Separator className="my-2" />
+        <DropdownMenuItem asChild>
+          <Link href="/dashboard/settings">
+            <Settings className="mr-2 size-4" />
+            User Settings
+          </Link>
+        </DropdownMenuItem>
+        {session.user.role == "admin" && (
+          <DropdownMenuItem asChild>
+            <Link href="/dashboard/admin">
+              <Shield className="mr-2 size-4" />
+              Admin Settings
+            </Link>
+          </DropdownMenuItem>
+        )}
+        <Separator className="my-2" />
         <DropdownMenuItem asChild>
           <Link href="/dashboard/cleanups">
             <Paintbrush className="mr-2 size-4" />
@@ -59,6 +85,7 @@ export default function SidebarProfileOptions() {
         <DropdownMenuItem onClick={toggleTheme}>
           <DarkModeToggle />
         </DropdownMenuItem>
+        <Separator className="my-2" />
         <DropdownMenuItem
           onClick={() =>
             signOut({

diff --git a/apps/web/components/dashboard/sidebar/ModileSidebar.tsx b/apps/web/components/dashboard/sidebar/ModileSidebar.tsx
@@ -1,6 +1,5 @@
-import ProfileOptions from "@/components/dashboard/header/ProfileOptions";
 import HoarderLogoIcon from "@/public/icons/logo-icon.svg";
-import { ClipboardList, Search, Settings, Tag } from "lucide-react";
+import { ClipboardList, Search, Tag } from "lucide-react";
 
 import MobileSidebarItem from "./ModileSidebarItem";
 
@@ -15,8 +14,6 @@ export default async function MobileSidebar() {
         <MobileSidebarItem logo={<Search />} path="/dashboard/search" />
         <MobileSidebarItem logo={<ClipboardList />} path="/dashboard/lists" />
         <MobileSidebarItem logo={<Tag />} path="/dashboard/tags" />
-        <MobileSidebarItem logo={<Settings />} path="/dashboard/settings" />
-        <ProfileOptions />
       </ul>
     </aside>
   );

diff --git a/apps/web/components/dashboard/sidebar/Sidebar.tsx b/apps/web/components/dashboard/sidebar/Sidebar.tsx
@@ -66,7 +66,7 @@ export default async function Sidebar() {
       </div>
       <Separator />
       <AllLists initialData={lists} />
-      <div className="mt-auto flex items-center border-t pt-2">
+      <div className="mt-auto flex items-center border-t pt-2 text-sm text-gray-400">
         Hoarder v{serverConfig.serverVersion}
       </div>
     </aside>