feat: tighten auth guard in sidebar shell

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>

web/src/components/app-sidebar.tsx

@@ -21,19 +21,21 @@ import { usePathname } from "next/navigation"
 
 import { SearchForm } from "@/components/search-form"
 import { VersionSwitcher } from "@/components/version-switcher"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarRail,
-} from "@/components/ui/sidebar"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@/components/ui/sidebar"
 import { Skeleton } from "@/components/ui/skeleton"
+import { NavUser } from "@/components/nav-user"
 import { useAuth } from "@/lib/auth-client"
 
 import type { LucideIcon } from "lucide-react"
@@ -103,7 +105,7 @@ const navigation: { versions: string[]; navMain: NavigationGroup[] } = {
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const pathname = usePathname()
-  const { isAdmin, isStaff, isCustomer } = useAuth()
+  const { session, isLoading, isAdmin, isStaff, isCustomer } = useAuth()
   const [isHydrated, setIsHydrated] = React.useState(false)
 
   React.useEffect(() => {
@@ -194,6 +196,25 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           )
         })}
       </SidebarContent>
+      <SidebarFooter>
+        {isLoading ? (
+          <div className="flex items-center gap-3 rounded-lg border border-border/70 bg-sidebar p-3 shadow-sm">
+            <Skeleton className="h-9 w-9 rounded-lg" />
+            <div className="flex-1 space-y-1">
+              <Skeleton className="h-3.5 w-24 rounded" />
+              <Skeleton className="h-3 w-32 rounded" />
+            </div>
+          </div>
+        ) : (
+          <NavUser
+            user={{
+              name: session?.user?.name,
+              email: session?.user?.email,
+              avatarUrl: session?.user?.avatarUrl ?? undefined,
+            }}
+          />
+        )}
+      </SidebarFooter>
       <SidebarRail />
     </Sidebar>
   )