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

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

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

app/(main)/ospf/page.tsx

@@ -6,7 +6,7 @@ import { DataPageCard } from "@/components/data-page-card"
 import { OspfNeighborsDataGrid } from "@/components/data-grids/ospf-neighbors-data-grid"
 import { OspfRoutesDataGrid, routeTypeClass } from "@/components/data-grids/ospf-routes-data-grid"
 import { OspfBfdDataGrid } from "@/components/data-grids/ospf-bfd-data-grid"
-import { Card, CardContent } from "@/components/ui/card"
+import { Frame, FramePanel } from "@/components/reui/frame"
 import { Button } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"
 import { toast } from "sonner"
@@ -809,7 +809,8 @@ function InterfacesTab({
         {grouped.map(router => {
           const totalIfaces = router.areas.reduce((s, a) => s + a.items.length, 0)
           return (
-            <Card key={router.routerKey} className="overflow-hidden gap-0 py-0">
+            <Frame key={router.routerKey} dense className="w-full overflow-hidden">
+              <FramePanel className="p-0 overflow-hidden">
               <div className="flex items-center gap-3 px-4 py-3 border-b">
                 <NetworkIcon className="size-4 text-muted-foreground shrink-0" />
                 <div className="flex-1 min-w-0">
@@ -873,7 +874,8 @@ function InterfacesTab({
                   </div>
                 </div>
               ))}
-            </Card>
+            </FramePanel>
+            </Frame>
           )
         })}
       </div>
@@ -923,12 +925,12 @@ function NeighborsTab({
           { label: "Full",          value: fullCount,                      color: "text-[var(--status-online-fg)]" },
           { label: "Не Full",       value: neighbors.length - fullCount,   color: neighbors.length - fullCount > 0 ? "text-[var(--status-degraded-fg)]" : "text-muted-foreground" },
         ].map(s => (
-          <Card key={s.label}>
-            <CardContent className="pt-4 pb-3 px-4">
-              <p className="text-xs text-muted-foreground">{s.label}</p>
-              <p className={cn("text-2xl font-semibold tabular-nums", s.color)}>{s.value}</p>
-            </CardContent>
-          </Card>
+          <Frame key={s.label} className="h-full">
+            <FramePanel className="flex flex-col gap-0.5">
+              <p className="text-muted-foreground text-sm font-medium">{s.label}</p>
+              <p className={cn("text-2xl leading-none font-bold tabular-nums", s.color)}>{s.value}</p>
+            </FramePanel>
+          </Frame>
         ))}
       </div>
 
@@ -1047,12 +1049,12 @@ function BfdTab({ sessions }: { sessions: BfdSession[] }) {
           { label: "Down / Admin",  value: downCount,        color: downCount > 0 ? "text-[var(--status-offline-fg)]" : "text-muted-foreground" },
           { label: "Init / другие", value: initCount,        color: initCount > 0 ? "text-[var(--status-degraded-fg)]" : "text-muted-foreground" },
         ].map(s => (
-          <Card key={s.label}>
-            <CardContent className="pt-4 pb-3 px-4">
-              <p className="text-xs text-muted-foreground">{s.label}</p>
-              <p className={cn("text-2xl font-semibold tabular-nums", s.color)}>{s.value}</p>
-            </CardContent>
-          </Card>
+          <Frame key={s.label} className="h-full">
+            <FramePanel className="flex flex-col gap-0.5">
+              <p className="text-muted-foreground text-sm font-medium">{s.label}</p>
+              <p className={cn("text-2xl leading-none font-bold tabular-nums", s.color)}>{s.value}</p>
+            </FramePanel>
+          </Frame>
         ))}
       </div>
 
@@ -1350,12 +1352,12 @@ export default function OspfPage() {
               { label: "Интерфейсов", value: totalInterfaces },
               { label: "Зон (Area)",  value: totalAreas      },
             ].map(s => (
-              <Card key={s.label}>
-                <CardContent className="pt-4 pb-3 px-4">
-                  <p className="text-xs text-muted-foreground">{s.label}</p>
-                  <p className="text-2xl font-semibold tabular-nums">{s.value}</p>
-                </CardContent>
-              </Card>
+              <Frame key={s.label} className="h-full">
+                <FramePanel className="flex flex-col gap-0.5">
+                  <p className="text-muted-foreground text-sm font-medium">{s.label}</p>
+                  <p className="text-2xl leading-none font-bold tabular-nums">{s.value}</p>
+                </FramePanel>
+              </Frame>
             ))}
           </div>