feat(web): обновить AppShell и добавить новый элемент EvoBGP в App Switcher

- Обновлены стили компонента AppShell для улучшения макета и адаптивности.
- Добавлен новый элемент EvoBGP в конфигурацию App Switcher с соответствующими параметрами.
- Обновлена документация интерфейса для отражения изменений в AppShell и новых элементах навигации.

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

@@ -42,15 +42,17 @@ import { Badge } from '@cfdm/ui/components/badge'
 
 import { Link, useRouterState } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import { useState, type ReactNode } from 'react'
+import { useState, type CSSProperties, type ReactNode } from 'react'
 
 import { ModeToggle } from '@/components/mode-toggle'
 import { SystemMonitorPopover } from '@/components/layout/system-monitor-popover'
+import { AppsMenu } from '@/components/layout/apps-menu'
 import { AppSwitcher } from '@/components/app-switcher'
 import { GlobalSearch, GlobalSearchTrigger, useGlobalSearchHotkey } from '@/components/global-search'
 import { dashboardStatsQueryOptions } from '@/queries/dashboard'
 import { formatRelativeSyncTime } from '@/lib/sync-format'
 import { TruncatedText } from '@/components/truncated-text'
+import { cn } from '@cfdm/ui/lib/utils'
 
 interface NavItem {
   to: string
@@ -146,7 +148,19 @@ export function AppShell({ children }: { children: ReactNode }) {
   }))
 
   return (
-    <SidebarProvider>
+    <SidebarProvider
+      className={cn(
+        '[--sidebar:color-mix(in_oklab,var(--color-sidebar)_60%,transparent)]',
+        '[--sidebar-border:transparent]',
+        '[--sidebar-accent:color-mix(in_oklab,var(--color-primary)_14%,transparent)]',
+        '[--sidebar-accent-foreground:var(--color-primary)]',
+      )}
+      style={
+        {
+          '--sidebar-width': '240px',
+        } as CSSProperties
+      }
+    >
       <Sidebar collapsible="icon">
         <SidebarHeader>
           <AppSwitcher />
@@ -206,8 +220,8 @@ export function AppShell({ children }: { children: ReactNode }) {
         </SidebarFooter>
       </Sidebar>
       <SidebarInset>
-        <header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/80">
-          <SidebarTrigger />
+        <header className="bg-background sticky top-0 z-10 flex h-12 shrink-0 items-center gap-2 border-b px-4 md:px-6">
+          <SidebarTrigger className="-ml-1" />
           <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
           <Breadcrumb>
             <BreadcrumbList>
@@ -231,11 +245,12 @@ export function AppShell({ children }: { children: ReactNode }) {
                 {stats.issuesCount} проблем
               </Badge>
             ) : null}
+            <AppsMenu />
             <SystemMonitorPopover />
             <ModeToggle />
           </div>
         </header>
-        <main className="flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6">{children}</main>
+        <main className="flex flex-1 flex-col gap-4 px-4 py-4 md:gap-6 md:px-6 md:py-5">{children}</main>
       </SidebarInset>
       <GlobalSearch open={searchOpen} onOpenChange={setSearchOpen} />
     </SidebarProvider>

apps/web/src/components/layout/apps-menu.tsx

@@ -0,0 +1,93 @@
+import { Link } from '@tanstack/react-router'
+import { LayoutGridIcon } from 'lucide-react'
+import { Button } from '@cfdm/ui/components/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@cfdm/ui/components/dropdown-menu'
+import {
+  APP_SWITCHER_ICONS,
+  CURRENT_APP_ID,
+} from '@/lib/app-switcher-config'
+import { useAppSwitcherConfig } from '@/hooks/use-app-switcher'
+
+/** Header apps grid — app-shell-12 AppsMenu. @see https://reui.io/preview/base/app-shell-12 */
+export function AppsMenu() {
+  const { config, isLoading } = useAppSwitcherConfig()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button variant="ghost" size="icon" aria-label="Приложения" />
+        }
+      >
+        <LayoutGridIcon
+          className="size-4.5 transition-colors"
+          aria-hidden="true"
+        />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        side="bottom"
+        align="end"
+        sideOffset={8}
+        className="w-72"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>
+            {isLoading ? 'Загрузка…' : config.menuLabel}
+          </DropdownMenuLabel>
+          <div className="grid grid-cols-3 gap-1 p-1">
+            {config.apps.map((app) => {
+              const Icon = APP_SWITCHER_ICONS[app.icon]
+              const isCurrent = app.id === CURRENT_APP_ID
+
+              if (isCurrent) {
+                return (
+                  <DropdownMenuItem
+                    key={app.id}
+                    disabled
+                    className="h-auto flex-col gap-1.5 py-3 text-center [&_svg]:size-5"
+                  >
+                    <span className="text-muted-foreground">
+                      <Icon aria-hidden="true" />
+                    </span>
+                    <span className="text-xs font-medium">{app.name}</span>
+                  </DropdownMenuItem>
+                )
+              }
+
+              return (
+                <DropdownMenuItem
+                  key={app.id}
+                  nativeButton={false}
+                  render={<a href={app.url} />}
+                  className="h-auto flex-col gap-1.5 py-3 text-center [&_svg]:size-5"
+                >
+                  <span className="text-muted-foreground">
+                    <Icon aria-hidden="true" />
+                  </span>
+                  <span className="text-xs font-medium">{app.name}</span>
+                </DropdownMenuItem>
+              )
+            })}
+          </div>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            nativeButton={false}
+            render={<Link to="/settings/integrations" />}
+            className="justify-center text-sm font-medium"
+          >
+            Настроить приложения
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

apps/web/src/lib/app-switcher-config.ts

@@ -58,6 +58,14 @@ export const DEFAULT_APP_SWITCHER_CONFIG: AppSwitcherConfig = {
       icon: 'cloud',
       shortcut: '⌘2',
     },
+    {
+      id: 'evobgp',
+      name: 'EvoBGP',
+      subtitle: 'BGP маршрутизация',
+      url: 'http://192.168.100.67:3000',
+      icon: 'globe',
+      shortcut: '⌘3',
+    },
   ],
 }
 

docs/ui-design-contract.md

@@ -17,7 +17,7 @@ Ops / list / dashboard / detail / settings — только **Frame**, не shad
 
 | Зона | Block | Preview |
 |------|-------|---------|
-| Shell | `app-shell-12` (+ cmdk/monitor где нужно) | https://reui.io/preview/base/app-shell-12 |
+| Shell | `app-shell-12` (+ cmdk/monitor где нужно) | https://reui.io/preview/base/app-shell-12 · https://reui.io/preview/base/app-shell-7 |
 | KPI | horizontal compact hybrid (icon left + label/Badge + value ± variant; EvoBGP visual) | https://reui.io/preview/base/stats-12 |
 | Dashboard | `dashboard-1` | https://reui.io/preview/base/dashboard-1 |
 | Lists | `data-grid-filtering-2` | https://reui.io/preview/base/data-grid-filtering-2 |
@@ -47,9 +47,28 @@ Ops / list / dashboard / detail / settings — только **Frame**, не shad
 
 Gating: DB preference `showQuickActions` / `show_quick_actions` / `ui_show_quick_actions` (default `true`).
 
+## Shared App Shell chrome
+
+Эталон: CFDM + ReUI [app-shell-12](https://reui.io/preview/base/app-shell-12) · monitor/switchers [app-shell-7](https://reui.io/preview/base/app-shell-7).
+
+При переключении между vps-tracker / CFDM / EvoBGP меняются **только** sidebar nav и `main` content. ClassNames chrome идентичны.
+
+| Токен / зона | Значение |
+|--------------|----------|
+| `--sidebar-width` | `240px` |
+| Sidebar accent | primary **14%** mix + transparent border |
+| Header | `h-12`, `sticky`, `border-b`, `px-4 md:px-6` (без blur / без `h-16`) |
+| Header right | **AppsMenu** → **SystemMonitorPopover** → **ModeToggle** |
+| `main` | `gap-4 md:gap-6`, `px-4 py-4 md:px-6 md:py-5` |
+| Sidebar header | `AppSwitcher` (не static brand) |
+
+App Switcher ids: `vps-tracker` · `cfdm` · `evobgp`. Override: `VITE_APP_SWITCHER` JSON.
+
+QuickActionGrid icons: только semantic **text** (`text-info` / `text-primary` / …) на kit `bg-muted` — без solid `bg-primary` fills. Preview: [stats-12](https://reui.io/preview/base/stats-12).
+
 ## System monitor
 
-`SystemMonitorPopover` in app header next to `ModeToggle` (EvoBGP pattern: pill «Система» + Норма/Внимание). Preview shell: https://reui.io/preview/base/app-shell-12
+`SystemMonitorPopover` in app header next to `ModeToggle` (после AppsMenu). Preview: https://reui.io/preview/base/app-shell-12 · https://reui.io/preview/base/app-shell-7
 
 ## MCP workflow
 
@@ -63,7 +82,7 @@ Primitives: MCP `plugin-shadcn-shadcn` + `@cfdm/ui` / `@evobgp/ui`.
 
 ## Spacing
 
-- Main: `gap-4 md:gap-6`, `px-4 md:px-6`
+- AppShell main: `gap-4 md:gap-6`, `px-4 py-4 md:px-6 md:py-5` (shared chrome)
 - No `space-y-*` / `space-x-*` — use `flex` + `gap-*`
 - Max 1 primary CTA per screen
 - Semantic tokens only (`variant="success"|"info"|"warning"`) — no raw `bg-emerald-*`

packages/db/src/repositories/settings.ts

@@ -26,6 +26,14 @@ const DEFAULT_APP_SWITCHER: AppSwitcherConfig = {
       icon: 'cloud',
       shortcut: '⌘2',
     },
+    {
+      id: 'evobgp',
+      name: 'EvoBGP',
+      subtitle: 'BGP маршрутизация',
+      url: 'http://192.168.100.67:3000',
+      icon: 'globe',
+      shortcut: '⌘3',
+    },
   ],
 }