feat(web): align NavUser chrome and ReUI PRO kit

Тема в NavUser вместо ModeToggle в header; общие kpi-cols для KPI/Quick Actions; WEB-01 → user-reui; skill 42d70dcc3d и design contract.

Co-authored-by: Cursor <[email protected]>

apps/web/src/components/layout/app-shell.tsx

@@ -46,7 +46,6 @@ import { AppsMenu } from '@/components/layout/apps-menu'
 import { CommandPalette, type CommandPaletteItem } from '@/components/layout/command-palette'
 import { NavUser } from '@/components/layout/nav-user'
 import { SystemMonitorPopover } from '@/components/layout/system-monitor-popover'
-import { ModeToggle } from '@/components/mode-toggle'
 import { can, isAuthEnabled, permissionForPath } from '@/lib/auth'
 
 interface NavItem {
@@ -219,7 +218,6 @@ export function AppShell({ children }: { children: ReactNode }) {
             <div className="ml-auto flex items-center gap-2">
               <AppsMenu />
               <SystemMonitorPopover />
-              <ModeToggle />
             </div>
           </header>
           <main className="flex flex-1 flex-col gap-4 px-4 py-4 md:gap-6 md:px-6 md:py-5">

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

@@ -1,12 +1,20 @@
 import { Link } from '@tanstack/react-router'
+import { useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
 import {
   ChevronsUpDownIcon,
   ExternalLinkIcon,
   LogOutIcon,
+  MonitorIcon,
+  MoonIcon,
+  PaletteIcon,
   SettingsIcon,
+  SunIcon,
 } from 'lucide-react'
 
+import { cn } from '@evobgp/ui/lib/utils'
 import { Avatar, AvatarFallback } from '@evobgp/ui/components/avatar'
+import { Button } from '@evobgp/ui/components/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -33,12 +41,71 @@ import {
   resetPortalHandoff,
 } from '@/lib/auth'
 
-/**
- * Sidebar footer account menu.
- * Portal mode → shows JWT email + logout via auth-portal.
- * Local mode  → shows the API-key hint + clears the local token.
- * @see https://reui.io/preview/base/app-shell-12
- */
+/** Sidebar footer account menu — ReUI app-shell-1 NavUser. @see https://reui.io/preview/base/app-shell-1 */
+
+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(source: string): string {
   const base = source.trim()
   if (!base) return '?'
@@ -56,8 +123,7 @@ export function NavUser() {
 
   const name = claims?.name?.trim() || (authOn ? 'Пользователь' : 'Гость')
   const email =
-    claims?.email?.trim() ||
-    (authOn ? '' : 'локальный API-токен')
+    claims?.email?.trim() || (authOn ? '' : 'локальный API-токен')
   const fallback = initials(name || email)
 
   function handleSignOut() {
@@ -87,9 +153,7 @@ export function NavUser() {
             }
           >
             <Avatar className="size-8 rounded-lg">
-              <AvatarFallback className="rounded-lg text-xs">
-                {fallback}
-              </AvatarFallback>
+              <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>
@@ -140,6 +204,13 @@ export function NavUser() {
                   Открыть Auth Portal
                 </DropdownMenuItem>
               ) : null}
+              <DropdownMenuItem className="cursor-default focus:bg-transparent">
+                <PaletteIcon aria-hidden />
+                Тема
+                <div className="ml-auto">
+                  <ThemeSegmentedToggle />
+                </div>
+              </DropdownMenuItem>
             </DropdownMenuGroup>
 
             <DropdownMenuSeparator />

apps/web/src/components/mode-toggle.tsx

@@ -1,29 +0,0 @@
-import { Moon, Sun } from 'lucide-react'
-import { useTheme } from 'next-themes'
-
-import { Button } from '@evobgp/ui/components/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@evobgp/ui/components/dropdown-menu'
-
-export function ModeToggle() {
-  const { setTheme } = useTheme()
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger render={<Button variant="ghost" size="icon" />}>
-        <Sun className="size-5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
-        <Moon className="absolute size-5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
-        <span className="sr-only">Сменить тему</span>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme('light')}>Светлая</DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')}>Тёмная</DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('system')}>Системная</DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}

apps/web/src/components/reui-kit/kpi-cols.ts

@@ -0,0 +1,10 @@
+/** Shared grid column classes for hybrid KPI / Quick Actions tiles. */
+export function kpiCols(count: number): string {
+  if (count <= 1) return 'grid-cols-1'
+  if (count === 2) return 'grid-cols-1 @xl:grid-cols-2'
+  if (count === 3) return 'grid-cols-1 @3xl:grid-cols-3'
+  if (count === 4) return 'grid-cols-1 @3xl:grid-cols-2 @6xl:grid-cols-4'
+  if (count === 5) return 'grid-cols-2 @3xl:grid-cols-3 xl:grid-cols-5'
+  if (count === 6) return 'grid-cols-2 sm:grid-cols-3 xl:grid-cols-6'
+  return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'
+}

apps/web/src/components/reui-kit/kpi-stat-grid.tsx

@@ -4,6 +4,7 @@ import { Link } from '@tanstack/react-router'
 import { Frame, FramePanel } from '@/components/reui/frame'
 import { Badge } from '@/components/reui/badge'
 import { cn } from '@evobgp/ui/lib/utils'
+import { kpiCols } from './kpi-cols'
 import { Item, ItemMedia } from '@evobgp/ui/components/item'
 import { Skeleton } from '@evobgp/ui/components/skeleton'
 
@@ -47,16 +48,6 @@ const VALUE_VARIANT_CLASS: Record<KpiStatVariant, string> = {
   destructive: 'text-destructive',
 }
 
-function kpiCols(count: number): string {
-  if (count <= 1) return 'grid-cols-1'
-  if (count === 2) return 'grid-cols-1 @xl:grid-cols-2'
-  if (count === 3) return 'grid-cols-1 @3xl:grid-cols-3'
-  if (count === 4) return 'grid-cols-1 @3xl:grid-cols-2 @6xl:grid-cols-4'
-  if (count === 5) return 'grid-cols-2 @3xl:grid-cols-3 xl:grid-cols-5'
-  if (count === 6) return 'grid-cols-2 sm:grid-cols-3 xl:grid-cols-6'
-  return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'
-}
-
 function handleCardKeyDown(onActivate: () => void, event: KeyboardEvent<HTMLDivElement>) {
   if (event.key === 'Enter' || event.key === ' ') {
     event.preventDefault()

apps/web/src/components/reui-kit/quick-action-grid.tsx

@@ -10,6 +10,7 @@ import {
 import { Badge } from '@/components/reui/badge'
 import { Item, ItemMedia } from '@evobgp/ui/components/item'
 import { cn } from '@evobgp/ui/lib/utils'
+import { kpiCols } from './kpi-cols'
 
 export interface QuickActionItem {
   id: string
@@ -30,16 +31,6 @@ interface QuickActionGridProps {
 
 const DEFAULT_ICON_CLASS = 'text-muted-foreground [&_svg]:text-current'
 
-function kpiCols(count: number): string {
-  if (count <= 1) return 'grid-cols-1'
-  if (count === 2) return 'grid-cols-1 @xl:grid-cols-2'
-  if (count === 3) return 'grid-cols-1 @3xl:grid-cols-3'
-  if (count === 4) return 'grid-cols-1 @3xl:grid-cols-2 @6xl:grid-cols-4'
-  if (count === 5) return 'grid-cols-2 @3xl:grid-cols-3 xl:grid-cols-5'
-  if (count === 6) return 'grid-cols-2 sm:grid-cols-3 xl:grid-cols-6'
-  return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'
-}
-
 function QuickActionBody({ action }: { action: QuickActionItem }) {
   return (
     <div className="relative z-10 flex h-full items-start gap-3">