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

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

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

app/(main)/gre/page.tsx

@@ -13,7 +13,9 @@ import { useDataSource } from "@/lib/data-source"
 import { requestJson } from "@/shared/api/http-client"
 import { cn } from "@/lib/utils"
 import { toast } from "sonner"
-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 { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import {
@@ -430,15 +432,17 @@ export default function GrePage() {
               { label: "Защищены IPsec",  value: ipsecCount,          icon: <LockIcon        className="size-4 text-violet-400" />      },
               { label: "IP-пулов",        value: displayPools.length, icon: <NetworkIcon     className="size-4 text-sky-400" />         },
             ].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>
 
@@ -519,9 +523,7 @@ export default function GrePage() {
           )}
 
           {/* RouterOS reference */}
-          <Card>
-            <CardContent className="px-5 py-4">
-              <p className="text-xs font-medium text-muted-foreground mb-3">RouterOS 7.20+ — параметры GRE-интерфейса</p>
+          <OpsPanel title="RouterOS 7.20+ — параметры GRE-интерфейса" contentClassName="px-5 py-4">
               <div className="grid grid-cols-2 gap-x-8 gap-y-1 text-xs font-mono">
                 {[
                   ["/interface gre add", ""],
@@ -544,8 +546,7 @@ export default function GrePage() {
                   </div>
                 ))}
               </div>
-            </CardContent>
-          </Card>
+          </OpsPanel>
         </div>
       </div>