From 1317a73e9a727e6fb2d1547542fb976142da1646 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Fri, 17 Jul 2026 23:56:35 +0700
Subject: [PATCH] refactor: update AppShell and sidebar components for improved
 design consistency

Removed unused utility functions from the AppShell component and updated the sidebar width to a fixed value for better layout control. Revised the UI design documentation to clarify the shared App Shell chrome specifications and ensure alignment with design standards. Enhanced the sidebar configuration to reflect the new width and styling guidelines.
---
 apps/web/src/components/app-switcher.tsx     |  2 +-
 apps/web/src/components/layout/app-shell.tsx |  9 +--------
 docs/ui-design-contract.md                   | 18 +++++++++++-------
 packages/ui/src/components/sidebar.tsx       |  2 +-
 4 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/components/app-switcher.tsx b/apps/web/src/components/app-switcher.tsx
index d11a94e..e346139 100644
--- a/apps/web/src/components/app-switcher.tsx
+++ b/apps/web/src/components/app-switcher.tsx
@@ -20,7 +20,7 @@ import {
 } from '@/lib/app-switcher-config'
 import { useAppSwitcherConfig } from '@/hooks/use-app-switcher'
 
-/** Sidebar app switcher — same chrome as CFDM / vps-tracker. @see https://reui.io/preview/base/app-shell-12 */
+/** Sidebar app switcher — shared chrome etalon EvoBGP. @see https://reui.io/preview/base/app-shell-12 */
 export function AppSwitcher() {
   const { isMobile } = useSidebar()
   const { config, isLoading } = useAppSwitcherConfig()
diff --git a/apps/web/src/components/layout/app-shell.tsx b/apps/web/src/components/layout/app-shell.tsx
index bb4a1d2..0726cd3 100644
--- a/apps/web/src/components/layout/app-shell.tsx
+++ b/apps/web/src/components/layout/app-shell.tsx
@@ -38,7 +38,6 @@ import {
 } from '@evobgp/ui/components/breadcrumb'
 import { Separator } from '@evobgp/ui/components/separator'
 import { TooltipProvider } from '@evobgp/ui/components/tooltip'
-import { cn } from '@evobgp/ui/lib/utils'
 
 import { Link, useRouterState } from '@tanstack/react-router'
 import type { ComponentType, CSSProperties, ReactNode } from 'react'
@@ -122,7 +121,7 @@ const COMMAND_ITEMS: CommandPaletteItem[] = ALL_NAV_ITEMS.map((item) => ({
 }))
 
 /**
- * Shared ops chrome — tokens match CFDM / vps-tracker.
+ * Shared ops chrome etalon for CFDM / vps-tracker.
  * @see https://reui.io/preview/base/app-shell-12
  * @see docs/ui-design-contract.md — Shared App Shell chrome
  */
@@ -142,12 +141,6 @@ export function AppShell({ children }: { children: ReactNode }) {
   return (
     <TooltipProvider delay={0}>
       <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',
diff --git a/docs/ui-design-contract.md b/docs/ui-design-contract.md
index c936f72..e6fd9ba 100644
--- a/docs/ui-design-contract.md
+++ b/docs/ui-design-contract.md
@@ -50,18 +50,22 @@ Gating: KV `ui_show_quick_actions` in `global_settings` via `PATCH /v1/settings`
 
 ## 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).
+Эталон: **EvoBGP** production [`apps/web/src/components/layout/app-shell.tsx`](../apps/web/src/components/layout/app-shell.tsx) + ReUI [app-shell-12](https://reui.io/preview/base/app-shell-12).
 
-При переключении между vps-tracker / CFDM / EvoBGP меняются **только** sidebar nav и `main` content. ClassNames chrome идентичны.
+При переключении между vps-tracker / CFDM / EvoBGP меняются **только** sidebar nav labels/hrefs и `main` content. Разметка, ширина, фон и hover 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** |
+| `SIDEBAR_WIDTH` / `--sidebar-width` | `240px` (в `packages/ui` sidebar + Provider style) |
+| Sidebar / hover colors | theme `--sidebar` / `--sidebar-accent` из `globals.css` — **без** AppShell `color-mix` override |
+| Header | `h-12`, `sticky`, `border-b`, `px-4 md:px-6` |
+| Header left | `SidebarTrigger` + `Separator` + Breadcrumb |
+| Header right | **AppsMenu** → **SystemMonitorPopover** → **ModeToggle** (без Search в chrome) |
+| Sidebar | AppSwitcher → groups (`SidebarGroupContent`) → icons `size-4` → **пустой** `SidebarFooter` |
 | `main` | `gap-4 md:gap-6`, `px-4 py-4 md:px-6 md:py-5` |
-| Sidebar header | `AppSwitcher` (не static brand) |
+| Search | hotkey ⌘K / Ctrl+K only (не кнопка в header) |
+
+Запрещено в chrome: `SidebarRail`, `NavUser` footer, sync-row footer, Search/Ctrl+K pill в header, issues Badge в header, muted/hover cascade на right-cluster, Provider `color-mix` для `--sidebar*`.
 
 App Switcher ids: `vps-tracker` · `cfdm` · `evobgp`. Override: `VITE_APP_SWITCHER` JSON.
 
diff --git a/packages/ui/src/components/sidebar.tsx b/packages/ui/src/components/sidebar.tsx
index e27fdb0..c044115 100644
--- a/packages/ui/src/components/sidebar.tsx
+++ b/packages/ui/src/components/sidebar.tsx
@@ -25,7 +25,7 @@ import { PanelLeftIcon } from "lucide-react"
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH = "240px"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
 const SIDEBAR_WIDTH_ICON = "3rem"
 const SIDEBAR_KEYBOARD_SHORTCUT = "b"