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

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

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

app/(main)/bgp/page.tsx

@@ -9,7 +9,8 @@ import { applyReuiFilters } from "@/lib/data-filters/apply-reui-filters"
 import { BGP_FILTER_FIELDS } from "@/lib/data-filters/bgp-filter-fields"
 import type { BgpSessionRow, BgpState, BgpType } from "@/lib/bgp/types"
 import { BGP_AS_NAMES } from "@/lib/bgp/types"
-import { Card, CardContent } from "@/components/ui/card"
+import { Frame, FramePanel } from "@/components/reui/frame"
+import { OpsPanel } from "@/components/ops-panel"
 import { DataPageCard } from "@/components/data-page-card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -359,7 +360,8 @@ function RoutersTab({ sessions }: { sessions: BgpSession[] }) {
         const totalRx  = router.sessions.reduce((a, s) => a + s.prefixesRx, 0)
 
         return (
-          <Card key={router.id} className="overflow-hidden gap-0 py-0">
+          <Frame key={router.id} dense className="w-full overflow-hidden">
+            <FramePanel className="p-0 overflow-hidden">
             {/* header */}
             <div className="flex items-center gap-3 px-4 py-3 border-b">
               <ServerIcon className="size-4 text-muted-foreground shrink-0" />
@@ -424,7 +426,8 @@ function RoutersTab({ sessions }: { sessions: BgpSession[] }) {
                 </span>
               </div>
             )}
-          </Card>
+          </FramePanel>
+          </Frame>
         )
       })}
     </div>
@@ -467,20 +470,18 @@ function AnalyticsTab({ sessions }: { sessions: BgpSession[] }) {
           { label: "eBGP сессий",        value: ebgpSessions,        color: "" },
           { label: "iBGP сессий",        value: ibgpSessions,        color: "" },
         ].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 mt-0.5", 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>
 
       <div className="grid grid-cols-1 xl:grid-cols-[1fr_320px] gap-5">
         {/* prefixes by peer — horizontal bar chart */}
-        <Card>
-          <CardContent className="pt-4 pb-4 px-5">
-            <p className="text-sm font-semibold mb-4">Топ-8 пиров по полученным префиксам</p>
+        <OpsPanel title="Топ-8 пиров по полученным префиксам" contentClassName="pt-4 pb-4 px-5">
             <div className="flex flex-col gap-3">
               {topPeers.map((s, i) => {
                 const pct = (s.prefixesRx / maxRx) * 100
@@ -516,15 +517,12 @@ function AnalyticsTab({ sessions }: { sessions: BgpSession[] }) {
                 <p className="text-sm text-muted-foreground text-center py-4">Нет данных о префиксах</p>
               )}
             </div>
-          </CardContent>
-        </Card>
+        </OpsPanel>
 
         {/* right column */}
         <div className="flex flex-col gap-4">
           {/* state distribution */}
-          <Card>
-            <CardContent className="pt-4 pb-4 px-5">
-              <p className="text-sm font-semibold mb-3">Распределение состояний</p>
+          <OpsPanel title="Распределение состояний" contentClassName="pt-4 pb-4 px-5">
               {stateCounts.length === 0 ? (
                 <p className="text-xs text-muted-foreground">Нет данных</p>
               ) : (
@@ -545,13 +543,10 @@ function AnalyticsTab({ sessions }: { sessions: BgpSession[] }) {
                   })}
                 </div>
               )}
-            </CardContent>
-          </Card>
+          </OpsPanel>
 
           {/* eBGP vs iBGP */}
-          <Card>
-            <CardContent className="pt-4 pb-4 px-5">
-              <p className="text-sm font-semibold mb-3">eBGP vs iBGP</p>
+          <OpsPanel title="eBGP vs iBGP" contentClassName="pt-4 pb-4 px-5">
               {sessions.length === 0 ? (
                 <p className="text-xs text-muted-foreground">Нет данных</p>
               ) : (
@@ -592,8 +587,7 @@ function AnalyticsTab({ sessions }: { sessions: BgpSession[] }) {
                   </div>
                 </>
               )}
-            </CardContent>
-          </Card>
+          </OpsPanel>
         </div>
       </div>
     </div>
@@ -739,12 +733,12 @@ export default function BgpPage() {
               { label: "Не установлено",  value: notEstab,           color: notEstab > 0 ? "text-amber-500" : "text-muted-foreground" },
               { label: "Получено префиксов", value: fmtNum(totalRx),color: "" },
             ].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 mt-0.5", 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>