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

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

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

app/(main)/wireguard/page.tsx

@@ -11,7 +11,9 @@ import {
   type WgIfaceWithServer,
 } from "@/components/data-grids/wireguard-data-grid"
 import { Button } from "@/components/ui/button"
-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 { cn } from "@/lib/utils"
 import {
   Sheet, SheetContent, SheetHeader, SheetTitle,
@@ -176,15 +178,17 @@ export default function WireGuardPage() {
               { label: "Всего пиров",   value: totalPeers,                  icon: <UsersIcon className="size-4 text-sky-400" /> },
               { label: "Пиров онлайн",  value: `${onlinePeers}/${totalPeers}`, icon: <KeyRoundIcon className="size-4 text-violet-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>
 
@@ -215,11 +219,7 @@ export default function WireGuardPage() {
           </DataPageCard>
 
           {/* RouterOS reference */}
-          <Card>
-            <CardContent className="px-5 py-4">
-              <p className="text-xs font-medium text-muted-foreground mb-3">
-                RouterOS 7 · /interface wireguard — быстрые команды
-              </p>
+          <OpsPanel title="RouterOS 7 · /interface wireguard — быстрые команды" contentClassName="px-5 py-4">
               <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs font-mono">
                 {[
                   {
@@ -262,8 +262,7 @@ export default function WireGuardPage() {
                   </div>
                 ))}
               </div>
-            </CardContent>
-          </Card>
+          </OpsPanel>
 
         </div>
       </div>