fix(ui): выровнять chrome Frame и убрать Card-оболочки

Подключить App Switcher, NavUser, OpsPanel и AlertDialog вместо Card-shell.

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

components/app-sidebar.tsx

@@ -1,18 +1,16 @@
 "use client"
 
 import * as React from "react"
-import { useTheme } from "@/components/theme-provider"
 import { NavMain, type NavGroup } from "@/components/nav-main"
-import { SearchIcon } from "lucide-react"
+import { AppSwitcher } from "@/components/app-switcher"
+import { NavUser } from "@/components/nav-user"
 import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
-  SidebarRail,
 } from "@/components/ui/sidebar"
 import {
-  RouterIcon,
   LayoutDashboardIcon,
   ActivityIcon,
   MapIcon,
@@ -34,8 +32,6 @@ import {
   CableIcon,
   ScanLineIcon,
   BellIcon,
-  SunIcon,
-  MoonIcon,
   ShieldCheckIcon,
   BoxIcon,
   BadgeCheckIcon,
@@ -47,25 +43,6 @@ import {
   mockSidebarBadgesByUrl,
   type SidebarCountsDto,
 } from "@/lib/sidebar-badges"
-import { formatAppVersionLabel, getAppVersion } from "@/lib/app-version"
-
-// ─── Command palette trigger button ──────────────────────────────────────────
-
-function CommandPaletteButton() {
-  function trigger() {
-    window.dispatchEvent(new KeyboardEvent("keydown", { key: "k", ctrlKey: true, bubbles: true }))
-  }
-  return (
-    <button
-      onClick={trigger}
-      className="group-data-[collapsible=icon]:hidden mx-2 mb-1 flex items-center gap-2 px-2.5 py-1.5 rounded-md border border-sidebar-border/60 bg-sidebar-accent/30 hover:bg-sidebar-accent text-sidebar-foreground/50 hover:text-sidebar-foreground text-xs transition-colors w-[calc(100%-1rem)]"
-    >
-      <SearchIcon className="size-3 shrink-0" />
-      <span className="flex-1 text-left">Поиск…</span>
-      <span className="font-mono text-[10px] border border-sidebar-border/60 rounded px-1 py-0.5">⌘K</span>
-    </button>
-  )
-}
 
 type NavItemBase = { title: string; url: string; icon: React.ReactNode }
 
@@ -127,7 +104,6 @@ const navStructure: { label: string; items: NavItemBase[] }[] = [
 type LiveSidebarCounts = SidebarCountsDto & { greTunnels?: number; certificates?: number }
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-  const { resolvedTheme, setTheme } = useTheme()
   const { mode, backendUrl } = useDataSource()
   const evo = useEvoBGP()
   const [mounted, setMounted] = React.useState(false)
@@ -216,55 +192,17 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
     }))
   }, [mounted, mode, liveCounts, mockBadges, evo.enabled, evo.snapshot])
 
-  const isDark = (resolvedTheme ?? "dark") === "dark"
-  const appVersionLabel = formatAppVersionLabel(getAppVersion())
-
   return (
     <Sidebar collapsible="icon" {...props}>
       <SidebarHeader>
-        <div className="flex items-center gap-2.5 px-2 py-1.5 overflow-hidden">
-          <div className="flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-            <RouterIcon className="size-4" />
-          </div>
-          <div className="flex flex-col leading-tight group-data-[collapsible=icon]:hidden">
-            <span className="font-semibold text-sidebar-foreground text-sm tracking-tight">MikrotikManager</span>
-            <span className="text-[10px] font-mono text-sidebar-foreground/40">{appVersionLabel}</span>
-          </div>
-        </div>
-        <CommandPaletteButton />
+        <AppSwitcher />
       </SidebarHeader>
       <SidebarContent>
         <NavMain groups={navGroups} />
       </SidebarContent>
       <SidebarFooter>
-        <div className="flex items-center gap-2 px-2 py-2 group-data-[collapsible=icon]:justify-center">
-          <div className="size-7 rounded-full bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center text-white text-[10px] font-semibold shrink-0">
-            АК
-          </div>
-          <div className="flex flex-col leading-tight min-w-0 flex-1 group-data-[collapsible=icon]:hidden">
-            <span className="text-[13px] font-medium text-sidebar-foreground truncate">а.коротаев</span>
-            <span className="text-[11px] text-sidebar-foreground/50 truncate">admin@routerlists.io</span>
-          </div>
-          {mounted ? (
-            <button
-              type="button"
-              onClick={() => setTheme(isDark ? "light" : "dark")}
-              title={isDark ? "Светлая тема" : "Тёмная тема"}
-              className="shrink-0 size-6 flex items-center justify-center rounded-md text-sidebar-foreground/50 hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors group-data-[collapsible=icon]:hidden"
-            >
-              {isDark
-                ? <SunIcon className="size-3.5" />
-                : <MoonIcon className="size-3.5" />}
-            </button>
-          ) : (
-            <span
-              className="shrink-0 size-6 group-data-[collapsible=icon]:hidden"
-              aria-hidden
-            />
-          )}
-        </div>
+        <NavUser />
       </SidebarFooter>
-      <SidebarRail />
     </Sidebar>
   )
 }