feat(sidebar): integrate NavUser component into SidebarFooter and clean up SiteHeader

- Added NavUser component to the SidebarFooter for user information display.
- Refactored SiteHeader by removing unused imports and components related to user account management.
- Updated breadcrumbs logic to include a new path for admin apps.
- Adjusted SidebarMenuItem formatting for improved readability.

apps/web/src/components/app-sidebar.tsx

@@ -2,6 +2,7 @@ import { Link, useRouterState } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
 import { LayoutGridIcon, UsersIcon, AppWindowIcon } from 'lucide-react'
 import { AppSwitcher } from '@/components/app-switcher'
+import { NavUser } from '@/components/nav-user'
 import { meQueryOptions } from '@/queries/auth'
 import {
   Sidebar,
@@ -57,7 +58,10 @@ export function AppSidebar() {
                 <SidebarMenuItem>
                   <SidebarMenuButton
                     tooltip="Пользователи"
-                    isActive={isActive(pathname, '/admin', false) && !pathname.startsWith('/admin/apps')}
+                    isActive={
+                      isActive(pathname, '/admin', false) &&
+                      !pathname.startsWith('/admin/apps')
+                    }
                     render={<Link to="/admin" />}
                   >
                     <UsersIcon className="size-4" />
@@ -79,7 +83,9 @@ export function AppSidebar() {
           </SidebarGroup>
         ) : null}
       </SidebarContent>
-      <SidebarFooter />
+      <SidebarFooter>
+        <NavUser />
+      </SidebarFooter>
     </Sidebar>
   )
 }

apps/web/src/components/layout/site-header.tsx

@@ -1,7 +1,5 @@
 import { Fragment, useMemo } from 'react'
 import { Link, useRouterState } from '@tanstack/react-router'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { LogOutIcon } from 'lucide-react'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -10,24 +8,14 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@authportal/ui/components/breadcrumb'
-import { Button } from '@authportal/ui/components/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@authportal/ui/components/dropdown-menu'
 import { Separator } from '@authportal/ui/components/separator'
 import { SidebarTrigger } from '@authportal/ui/components/sidebar'
-import { Avatar, AvatarFallback } from '@authportal/ui/components/avatar'
 import { AppsMenu } from '@/components/layout/apps-menu'
-import { ModeToggle } from '@/components/mode-toggle'
-import { clearToken } from '@/lib/auth'
-import { logout, meQueryOptions } from '@/queries/auth'
 
 function breadcrumbs(pathname: string) {
+  if (pathname.startsWith('/admin/apps')) {
+    return [{ label: 'Ссылки приложений', href: '/admin/apps' }]
+  }
   if (pathname.startsWith('/admin/users/')) {
     return [
       { label: 'Пользователи', href: '/admin' },
@@ -46,26 +34,6 @@ function breadcrumbs(pathname: string) {
 export function SiteHeader() {
   const pathname = useRouterState({ select: (s) => s.location.pathname })
   const crumbs = useMemo(() => breadcrumbs(pathname), [pathname])
-  const { data: me } = useQuery(meQueryOptions)
-  const queryClient = useQueryClient()
-
-  async function handleLogout() {
-    try {
-      await logout()
-    } catch {
-      /* ignore */
-    }
-    clearToken()
-    queryClient.clear()
-    window.location.href = '/'
-  }
-
-  const initials = (me?.name ?? me?.email ?? '?')
-    .split(/\s+/)
-    .map((p) => p[0])
-    .join('')
-    .slice(0, 2)
-    .toUpperCase()
 
   return (
     <header className="bg-background sticky top-0 z-20 flex h-12 shrink-0 items-center gap-2 border-b px-4 md:px-6">
@@ -95,29 +63,6 @@ export function SiteHeader() {
 
       <div className="ml-auto flex items-center gap-1">
         <AppsMenu />
-        <ModeToggle />
-        <DropdownMenu>
-          <DropdownMenuTrigger
-            render={<Button variant="ghost" size="icon" className="rounded-full" />}
-          >
-            <Avatar className="size-7">
-              <AvatarFallback className="text-xs">{initials}</AvatarFallback>
-            </Avatar>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-56">
-            <DropdownMenuLabel className="font-normal">
-              <div className="flex flex-col gap-0.5">
-                <span className="text-sm font-medium">{me?.name}</span>
-                <span className="text-muted-foreground text-xs">{me?.email}</span>
-              </div>
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={handleLogout}>
-              <LogOutIcon />
-              Выйти
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
       </div>
     </header>
   )

apps/web/src/components/nav-user.tsx

@@ -0,0 +1,200 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import {
+  ChevronsUpDownIcon,
+  LogOutIcon,
+  MonitorIcon,
+  MoonIcon,
+  PaletteIcon,
+  SunIcon,
+} from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+
+import { Avatar, AvatarFallback } from '@authportal/ui/components/avatar'
+import { Button } from '@authportal/ui/components/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@authportal/ui/components/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@authportal/ui/components/sidebar'
+import { cn } from '@authportal/ui/lib/utils'
+
+import { clearToken } from '@/lib/auth'
+import { logout, meQueryOptions } from '@/queries/auth'
+
+const THEMES = [
+  {
+    value: 'light',
+    label: 'Светлая',
+    icon: <SunIcon className="size-3.5" aria-hidden />,
+  },
+  {
+    value: 'dark',
+    label: 'Тёмная',
+    icon: <MoonIcon className="size-3.5" aria-hidden />,
+  },
+  {
+    value: 'system',
+    label: 'Системная',
+    icon: <MonitorIcon className="size-3.5" aria-hidden />,
+  },
+] as const
+
+function ThemeSegmentedToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const currentTheme = mounted ? (theme ?? 'system') : 'system'
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label="Тема"
+      className="bg-muted/60 inline-flex items-center gap-0.5 rounded-full p-0.5"
+      onClick={(e) => e.stopPropagation()}
+      onPointerDown={(e) => e.stopPropagation()}
+    >
+      {THEMES.map(({ value, label, icon }) => {
+        const isActive = currentTheme === value
+        return (
+          <Button
+            key={value}
+            type="button"
+            role="radio"
+            aria-checked={isActive}
+            aria-label={label}
+            variant="ghost"
+            size="icon-xs"
+            onClick={() => setTheme(value)}
+            className={cn(
+              'rounded-full',
+              isActive
+                ? 'bg-background text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground',
+            )}
+          >
+            {icon}
+          </Button>
+        )
+      })}
+    </div>
+  )
+}
+
+function initials(name: string, email: string): string {
+  const base = name.trim() || email.trim()
+  if (!base) return '?'
+  const parts = base.split(/\s+/).filter(Boolean)
+  if (parts.length >= 2) {
+    return `${parts[0]![0] ?? ''}${parts[1]![0] ?? ''}`.toUpperCase()
+  }
+  return base.slice(0, 2).toUpperCase()
+}
+
+export function NavUser() {
+  const { isMobile } = useSidebar()
+  const { data: me } = useQuery(meQueryOptions)
+  const queryClient = useQueryClient()
+
+  const name = me?.name?.trim() || 'Пользователь'
+  const email = me?.email?.trim() || ''
+  const fallback = initials(name, email)
+
+  async function handleSignOut() {
+    try {
+      await logout()
+    } catch {
+      /* ignore */
+    }
+    clearToken()
+    queryClient.clear()
+    window.location.href = '/'
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <SidebarMenuButton
+                size="lg"
+                className="data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground"
+              />
+            }
+          >
+            <Avatar className="size-8 rounded-lg">
+              <AvatarFallback className="rounded-lg text-xs">
+                {fallback}
+              </AvatarFallback>
+            </Avatar>
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-semibold">{name}</span>
+              <span className="truncate text-xs text-muted-foreground">
+                {email || '—'}
+              </span>
+            </div>
+            <ChevronsUpDownIcon className="ml-auto size-4" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--anchor-width) min-w-56 rounded-lg"
+            side={isMobile ? 'bottom' : 'right'}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuGroup>
+              <DropdownMenuLabel className="flex items-center gap-2 py-2 font-normal text-foreground">
+                <Avatar className="size-8 rounded-lg">
+                  <AvatarFallback className="rounded-lg text-xs">
+                    {fallback}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid min-w-0 flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {email || '—'}
+                  </span>
+                </div>
+              </DropdownMenuLabel>
+            </DropdownMenuGroup>
+
+            <DropdownMenuSeparator />
+
+            <DropdownMenuGroup>
+              <DropdownMenuItem className="cursor-default focus:bg-transparent">
+                <PaletteIcon aria-hidden />
+                Тема
+                <div className="ml-auto">
+                  <ThemeSegmentedToggle />
+                </div>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+
+            <DropdownMenuSeparator />
+
+            <DropdownMenuGroup>
+              <DropdownMenuItem onClick={() => void handleSignOut()}>
+                <LogOutIcon aria-hidden />
+                Выйти
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

docs/ui-design-contract.md

@@ -16,7 +16,8 @@ Surface lock: **`frame`** (ReUI Frame). Не смешивать shadcn Card и F
 | Sidebar / hover colors | theme `--sidebar` / `--sidebar-accent` — **без** AppShell `color-mix` override |
 | Header | `h-12`, `sticky`, `border-b`, `px-4 md:px-6` |
 | Header left | `SidebarTrigger` + `Separator` + Breadcrumb |
-| Header right | **AppsMenu** → **ModeToggle** (+ account menu; SystemMonitor — stub/нет) |
+| Header right | **AppsMenu** (аккаунт — в sidebar footer `NavUser`) |
+| Sidebar footer | **NavUser** — аватар, имя, email, тема, выход · [app-shell-12](https://reui.io/preview/base/app-shell-12) |
 | Sidebar | AppSwitcher → groups → icons `size-4` → **пустой** `SidebarFooter` |
 | `main` | `gap-4 md:gap-6`, `px-4 py-4 md:px-6 md:py-5` |