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

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

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

app/(main)/certificates/page.tsx

@@ -7,7 +7,9 @@ import { FileImportDialog } from "@/components/file-import-dialog"
 import { routerCertificates, servers as mockServers } from "@/lib/data"
 import type { CertStatus, Server } from "@/lib/data"
 import type { CertificateDto } from "@mmapp/contracts/certificates"
-import { Card, CardContent } from "@/components/ui/card"
+import { Frame, FramePanel } from "@/components/reui/frame"
+import { IconTile } from "@/components/reui/icon-tile"
+import { OpsPanel } from "@/components/ops-panel"
 import { DataPageCard } from "@/components/data-page-card"
 import { DataPageToolbar } from "@/components/data-page-toolbar"
 import { CertificatesDataGrid } from "@/components/data-grids/certificates-data-grid"
@@ -140,15 +142,17 @@ function CertPartKpi({
           icon: <AlertCircleIcon className="size-4 text-red-500" />,
         },
       ].map((s) => (
-        <Card key={s.label}>
-          <CardContent className="px-5 py-4 flex items-start justify-between">
-            <div>
-              <p className="text-sm text-muted-foreground">{s.label}</p>
-              <p className="text-2xl font-semibold tabular-nums mt-0.5">{s.value}</p>
+        <Frame key={s.label} className="h-full">
+          <FramePanel className="relative isolate flex h-full items-start gap-3">
+            <IconTile variant="elevated" aria-hidden="true" className="size-10.5 text-muted-foreground">
+              {s.icon}
+            </IconTile>
+            <div className="flex min-w-0 flex-1 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>
             </div>
-            <div className="mt-0.5">{s.icon}</div>
-          </CardContent>
-        </Card>
+          </FramePanel>
+        </Frame>
       ))}
     </div>
   )
@@ -178,12 +182,11 @@ function CertPartAcmeSettings({
   onSave: () => void
 }) {
   return (
-    <Card>
-      <CardContent className="px-5 py-4 flex flex-col gap-3">
-        <p className="text-sm font-medium">ACME · Cloudflare DNS-01</p>
-        <p className="text-xs text-muted-foreground">
-          Публичные Let&apos;s Encrypt для зон в Cloudflare выпускаются на backend и импортируются на RouterOS 7.22+.
-        </p>
+    <OpsPanel
+      title="ACME · Cloudflare DNS-01"
+      description="Публичные Let's Encrypt для зон в Cloudflare выпускаются на backend и импортируются на RouterOS 7.22+."
+      contentClassName="px-5 py-4 flex flex-col gap-3"
+    >
         <form
           className="grid gap-3 md:grid-cols-2"
           autoComplete="off"
@@ -232,19 +235,17 @@ function CertPartAcmeSettings({
             Сохранить настройки
           </Button>
         </div>
-      </CardContent>
-    </Card>
+    </OpsPanel>
   )
 }
 
 function CertPartReference() {
   return (
-    <Card>
-      <CardContent className="px-5 py-4">
-        <p className="text-xs font-medium text-muted-foreground mb-1">
-          RouterOS 7.22+ · публичные LE для Cloudflare через backend DNS-01, не через /certificate add-acme на устройстве.
-        </p>
-        <p className="text-xs font-medium text-muted-foreground mb-3">RouterOS 7 · /certificate — справка CLI</p>
+    <OpsPanel
+      title="RouterOS 7 · /certificate — справка CLI"
+      description="RouterOS 7.22+ · публичные LE для Cloudflare через backend DNS-01, не через /certificate add-acme на устройстве."
+      contentClassName="px-5 py-4"
+    >
         <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs font-mono">
           {[
             {
@@ -284,8 +285,7 @@ function CertPartReference() {
             </div>
           ))}
         </div>
-      </CardContent>
-    </Card>
+    </OpsPanel>
   )
 }