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

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

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

components/page-header.tsx

@@ -1,3 +1,6 @@
+"use client"
+
+import type { ReactNode } from "react"
 import { Separator } from "@/components/ui/separator"
 import { SidebarTrigger } from "@/components/ui/sidebar"
 import {
@@ -8,6 +11,8 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb"
+import { AppsMenu } from "@/components/apps-menu"
+import { SystemMonitorPopover } from "@/components/system-monitor-popover"
 
 interface Crumb {
   label: string
@@ -16,14 +21,15 @@ interface Crumb {
 
 interface PageHeaderProps {
   crumbs: Crumb[]
-  actions?: React.ReactNode
+  actions?: ReactNode
 }
 
+/** Header chrome — AppsMenu + SystemMonitor; theme in NavUser. @see https://reui.io/preview/base/app-shell-12 */
 export function PageHeader({ crumbs, actions }: PageHeaderProps) {
   return (
-    <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4 bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+    <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="h-4" />
+      <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
       <Breadcrumb>
         <BreadcrumbList>
           {crumbs.map((crumb, i) => (
@@ -42,7 +48,11 @@ export function PageHeader({ crumbs, actions }: PageHeaderProps) {
           ))}
         </BreadcrumbList>
       </Breadcrumb>
-      {actions && <div className="ml-auto flex items-center gap-2">{actions}</div>}
+      <div className="ml-auto flex items-center gap-2">
+        {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
+        <AppsMenu />
+        <SystemMonitorPopover />
+      </div>
     </header>
   )
 }