Redesign sidebar (#1455)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

components/sidebar-user-nav.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ChevronUp } from "lucide-react";
+import { LogIn, LogOut, Moon, Sun } from "lucide-react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
@@ -15,6 +15,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
+  useSidebar,
 } from "@/components/ui/sidebar";
 import { signOut, useSession } from "@/lib/client";
 import { LoaderIcon } from "./icons";
@@ -26,6 +27,7 @@ export function SidebarUserNav({
   user: { email?: string | null; isAnonymous?: boolean | null };
 }) {
   const router = useRouter();
+  const { isMobile } = useSidebar();
   const { data, isPending } = useSession();
   const { setTheme, resolvedTheme } = useTheme();
 
@@ -37,40 +39,50 @@ export function SidebarUserNav({
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             {isPending ? (
-              <SidebarMenuButton className="h-10 justify-between bg-background data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
-                <div className="flex flex-row gap-2">
-                  <div className="size-6 animate-pulse rounded-full bg-zinc-500/30" />
-                  <span className="animate-pulse rounded-md bg-zinc-500/30 text-transparent">
-                    Loading auth status
+              <SidebarMenuButton
+                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                size="lg"
+              >
+                <div className="size-8 animate-pulse rounded-full bg-neutral-500/30" />
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="animate-pulse rounded-md bg-neutral-500/30 text-transparent">
+                    Loading
                   </span>
                 </div>
-                <div className="animate-spin text-zinc-500">
+                <div className="ml-auto animate-spin text-neutral-500">
                   <LoaderIcon />
                 </div>
               </SidebarMenuButton>
             ) : (
               <SidebarMenuButton
-                className="h-10 bg-background data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                 data-testid="user-nav-button"
+                size="lg"
               >
                 <Image
                   alt={user.email ?? "User Avatar"}
-                  className="rounded-full"
-                  height={24}
+                  className="size-8 rounded-full"
+                  height={32}
                   src={`https://avatar.vercel.sh/${user.email}`}
-                  width={24}
+                  width={32}
                 />
-                <span className="truncate" data-testid="user-email">
-                  {isGuest ? "Guest" : user?.email}
-                </span>
-                <ChevronUp className="ml-auto" />
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span
+                    className="truncate font-medium"
+                    data-testid="user-email"
+                  >
+                    {isGuest ? "Guest" : user?.email}
+                  </span>
+                </div>
               </SidebarMenuButton>
             )}
           </DropdownMenuTrigger>
           <DropdownMenuContent
-            className="w-(--radix-popper-anchor-width)"
+            align="end"
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
             data-testid="user-nav-menu"
-            side="top"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
           >
             <DropdownMenuItem
               className="cursor-pointer"
@@ -79,6 +91,7 @@ export function SidebarUserNav({
                 setTheme(resolvedTheme === "dark" ? "light" : "dark")
               }
             >
+              {resolvedTheme === "light" ? <Moon /> : <Sun />}
               {`Toggle ${resolvedTheme === "light" ? "dark" : "light"} mode`}
             </DropdownMenuItem>
             <DropdownMenuSeparator />
@@ -111,6 +124,7 @@ export function SidebarUserNav({
                 }}
                 type="button"
               >
+                {isGuest ? <LogIn /> : <LogOut />}
                 {isGuest ? "Login to your account" : "Sign out"}
               </button>
             </DropdownMenuItem>