refactor(ui): улучшить структуру компонентов AppSidebar и PageHeader

Обновлены компоненты AppSidebar и PageHeader для улучшения структуры и адаптивности. В AppSidebar добавлен новый элемент SidebarGroupContent для более четкой организации навигации. В PageHeader упрощена разметка и улучшены стили, включая изменения в отображении заголовка и описания. Также обновлены стили в AppShell для интеграции SearchMenu и TooltipProvider, что улучшает взаимодействие с пользователем.

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

@@ -8,18 +8,17 @@ import {
   SettingsIcon,
 } from 'lucide-react'
 import { AppSwitcher } from '@/components/app-switcher'
-import { NavUser } from '@/components/nav-user'
 import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
   SidebarGroup,
+  SidebarGroupContent,
   SidebarGroupLabel,
   SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-  SidebarRail,
 } from '@cfdm/ui/components/sidebar'
 
 const infrastructureNav = [
@@ -65,30 +64,32 @@ function NavSection({
   return (
     <SidebarGroup>
       <SidebarGroupLabel>{label}</SidebarGroupLabel>
-      <SidebarMenu>
-        {items.map((item) => (
-          <SidebarMenuItem key={item.to}>
-            <SidebarMenuButton
-              tooltip={item.label}
-              isActive={isNavActive(
-                pathname,
-                item.to,
-                item.exact,
-                item.matchPrefix,
-              )}
-              render={
-                <Link
-                  to={item.to}
-                  activeOptions={{ exact: item.exact }}
-                />
-              }
-            >
-              <item.icon />
-              <span>{item.label}</span>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        ))}
-      </SidebarMenu>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.to}>
+              <SidebarMenuButton
+                tooltip={item.label}
+                isActive={isNavActive(
+                  pathname,
+                  item.to,
+                  item.exact,
+                  item.matchPrefix,
+                )}
+                render={
+                  <Link
+                    to={item.to}
+                    activeOptions={{ exact: item.exact }}
+                  />
+                }
+              >
+                <item.icon className="size-4" />
+                <span>{item.label}</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
     </SidebarGroup>
   )
 }
@@ -105,10 +106,7 @@ export function AppSidebar() {
         <NavSection label="Инфраструктура" items={infrastructureNav} pathname={pathname} />
         <NavSection label="Операции" items={operationsNav} pathname={pathname} />
       </SidebarContent>
-      <SidebarFooter>
-        <NavUser />
-      </SidebarFooter>
-      <SidebarRail />
+      <SidebarFooter />
     </Sidebar>
   )
 }

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

@@ -1,31 +1,30 @@
 import type { CSSProperties, ReactNode } from 'react'
 import { AppSidebar } from '@/components/app-sidebar'
 import { SiteHeader } from '@/components/layout/site-header'
-import { cn } from '@cfdm/ui/lib/utils'
+import { SearchMenu } from '@/components/layout/search-menu'
+import { TooltipProvider } from '@cfdm/ui/components/tooltip'
 import { SidebarInset, SidebarProvider } from '@cfdm/ui/components/sidebar'
 
+/** Shared ops chrome — etalon EvoBGP. @see docs/ui-design-contract.md */
 export function AppShell({ children }: { children: ReactNode }) {
   return (
-    <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
-      }
-    >
-      <AppSidebar />
-      <SidebarInset>
-        <SiteHeader />
-        <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>
-    </SidebarProvider>
+    <TooltipProvider delay={0}>
+      <SidebarProvider
+        style={
+          {
+            '--sidebar-width': '240px',
+          } as CSSProperties
+        }
+      >
+        <AppSidebar />
+        <SidebarInset>
+          <SiteHeader />
+          <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>
+        <SearchMenu hotkeyOnly />
+      </SidebarProvider>
+    </TooltipProvider>
   )
 }

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

@@ -65,8 +65,8 @@ const NAV_ITEMS = [
   },
 ] as const
 
-/** Command-K search — app-shell-12 SearchMenu, routes only (no demo data). */
-export function SearchMenu() {
+/** Command-K search — hotkey dialog (no header chrome trigger). Etalon: EvoBGP CommandPalette hotkeyOnly. */
+export function SearchMenu({ hotkeyOnly = false }: { hotkeyOnly?: boolean }) {
   const [open, setOpen] = useState(false)
   const [query, setQuery] = useState('')
   const searchInputId = useId()
@@ -105,20 +105,22 @@ export function SearchMenu() {
 
   return (
     <>
-      <Button
-        type="button"
-        variant="ghost"
-        size="icon"
-        aria-label="Поиск"
-        aria-haspopup="dialog"
-        aria-expanded={open}
-        onClick={() => setOpen(true)}
-      >
-        <SearchIcon
-          className="size-4.5 transition-colors"
-          aria-hidden="true"
-        />
-      </Button>
+      {hotkeyOnly ? null : (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          aria-label="Поиск"
+          aria-haspopup="dialog"
+          aria-expanded={open}
+          onClick={() => setOpen(true)}
+        >
+          <SearchIcon
+            className="size-4.5 transition-colors"
+            aria-hidden="true"
+          />
+        </Button>
+      )}
 
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogHeader className="sr-only">

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

@@ -8,10 +8,10 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@cfdm/ui/components/breadcrumb'
+import { Separator } from '@cfdm/ui/components/separator'
 import { ModeToggle } from '@/components/mode-toggle'
 import { SystemMonitorPopover } from '@/components/layout/system-monitor-popover'
 import { AppsMenu } from '@/components/layout/apps-menu'
-import { SearchMenu } from '@/components/layout/search-menu'
 import { SidebarTrigger } from '@cfdm/ui/components/sidebar'
 
 export interface RouteBreadcrumbLoaderData {
@@ -93,6 +93,7 @@ function useDynamicBreadcrumbLabels() {
   }, [matches])
 }
 
+/** Header chrome — etalon EvoBGP (Trigger + Separator + Breadcrumb + Apps/Monitor/Mode). */
 export function SiteHeader() {
   const pathname = useRouterState({ select: (s) => s.location.pathname })
   const dynamicLabels = useDynamicBreadcrumbLabels()
@@ -100,36 +101,34 @@ export function SiteHeader() {
 
   return (
     <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">
-      <div className="flex min-w-0 items-center gap-2">
-        <SidebarTrigger className="-ml-1" />
-        <Breadcrumb>
-          <BreadcrumbList>
-            {crumbs.map((crumb, index) => {
-              const isLast = index === crumbs.length - 1
-              return (
-                <span key={crumb.href} className="contents">
-                  {index > 0 && (
-                    <BreadcrumbSeparator className="hidden md:block" />
+      <SidebarTrigger className="-ml-1" />
+      <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
+      <Breadcrumb>
+        <BreadcrumbList>
+          {crumbs.map((crumb, index) => {
+            const isLast = index === crumbs.length - 1
+            return (
+              <span key={crumb.href} className="contents">
+                {index > 0 && (
+                  <BreadcrumbSeparator className="hidden md:block" />
+                )}
+                <BreadcrumbItem
+                  className={index === 0 && !isLast ? 'hidden md:block' : undefined}
+                >
+                  {isLast ? (
+                    <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
+                  ) : (
+                    <BreadcrumbLink render={<Link to={crumb.href} />}>
+                      {crumb.label}
+                    </BreadcrumbLink>
                   )}
-                  <BreadcrumbItem
-                    className={index === 0 ? 'hidden md:block' : undefined}
-                  >
-                    {isLast ? (
-                      <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
-                    ) : (
-                      <BreadcrumbLink render={<Link to={crumb.href} />}>
-                        {crumb.label}
-                      </BreadcrumbLink>
-                    )}
-                  </BreadcrumbItem>
-                </span>
-              )
-            })}
-          </BreadcrumbList>
-        </Breadcrumb>
-      </div>
-      <div className="text-muted-foreground [&_button_svg]:text-muted-foreground [&_button:active_svg]:text-foreground! [&_button:hover>span>svg]:text-foreground! [&_button:hover>svg]:text-foreground! [&_button[aria-expanded=true]_svg]:text-foreground! [&_button[data-popup-open]_svg]:text-foreground! ml-auto flex items-center gap-2">
-        <SearchMenu />
+                </BreadcrumbItem>
+              </span>
+            )
+          })}
+        </BreadcrumbList>
+      </Breadcrumb>
+      <div className="ml-auto flex items-center gap-2">
         <AppsMenu />
         <SystemMonitorPopover />
         <ModeToggle />

apps/web/src/components/page-header.tsx

@@ -1,45 +1,22 @@
 import type { ReactNode } from 'react'
-import { cn } from '@cfdm/ui/lib/utils'
 
 interface PageHeaderProps {
   title: string
   description?: ReactNode
   actions?: ReactNode
-  className?: string
 }
 
-/**
- * Page-level section header (h1) — shared by dashboard, lists, settings.
- * Distinct from FrameTitle (text-sm inside Frame panels).
- */
-export function PageHeader({
-  title,
-  description,
-  actions,
-  className,
-}: PageHeaderProps) {
+/** Page-level section header — etalon EvoBGP. */
+export function PageHeader({ title, description, actions }: PageHeaderProps) {
   return (
-    <header
-      className={cn(
-        'flex flex-wrap items-start justify-between gap-3 px-1',
-        className,
-      )}
-    >
-      <div className="flex min-w-0 flex-1 flex-col gap-px">
-        <h1 className="text-xl font-semibold tracking-tight md:text-2xl">
-          {title}
-        </h1>
+    <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+      <div className="flex flex-col gap-1">
+        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
         {description ? (
-          <p className="text-muted-foreground max-w-2xl text-sm leading-relaxed">
-            {description}
-          </p>
+          <p className="text-muted-foreground text-sm">{description}</p>
         ) : null}
       </div>
-      {actions ? (
-        <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
-          {actions}
-        </div>
-      ) : null}
-    </header>
+      {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
+    </div>
   )
 }