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

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

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

app/(main)/backups/page.tsx

@@ -5,10 +5,12 @@ import { PageHeader } from "@/components/page-header"
 import { DataPageToolbar } from "@/components/data-page-toolbar"
 import { BackupsDataGrid } from "@/components/data-grids/backups-data-grid"
 import { FileImportDialog } from "@/components/file-import-dialog"
-import { FormField, FormToggle, SectionTitle, SegmentedControl } from "@/components/form-kit"
+import { FormField, FormToggle, SegmentedControl } from "@/components/form-kit"
 import { StatusBadge } from "@/components/status-badge"
 import type { Backup, Server } from "@/lib/data"
-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 { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -349,15 +351,17 @@ export default function BackupsPage() {
               { label: "Вручную",          value: manualCount,       icon: <PlusIcon className="size-4" /> },
               { label: "Серверов охвачено",value: serverCount,        icon: <ServerIcon className="size-4" /> },
             ].map((s) => (
-              <Card key={s.label}>
-                <CardContent className="px-5 py-4 flex items-center 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-center 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>
-                  <span className="text-muted-foreground/40">{s.icon}</span>
-                </CardContent>
-              </Card>
+                </FramePanel>
+              </Frame>
             ))}
           </div>
 
@@ -427,9 +431,7 @@ export default function BackupsPage() {
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
 
               {/* Расписание */}
-              <Card>
-                <CardContent className="px-5 py-5 flex flex-col gap-5">
-                  <SectionTitle icon={<ClockIcon className="size-3.5" />}>Расписание</SectionTitle>
+              <OpsPanel title="Расписание" contentClassName="px-5 py-5 flex flex-col gap-5">
 
                   <div className="flex items-center justify-between">
                     <div>
@@ -520,13 +522,10 @@ export default function BackupsPage() {
                       </FormField>
                     </div>
                   </div>
-                </CardContent>
-              </Card>
+              </OpsPanel>
 
               {/* Хранилище */}
-              <Card>
-                <CardContent className="px-5 py-5 flex flex-col gap-5">
-                  <SectionTitle icon={<FolderIcon className="size-3.5" />}>Хранилище</SectionTitle>
+              <OpsPanel title="Хранилище" contentClassName="px-5 py-5 flex flex-col gap-5">
 
                   <FormField label="Тип хранилища">
                     <SegmentedControl
@@ -613,14 +612,13 @@ export default function BackupsPage() {
                       <p className="mt-1">Файлы: <span className="font-mono text-foreground">{storage.localPath || "/var/backup/mikrotik"}/{"<server-name>"}_{"{date}"}.{schedule.format}</span></p>
                     )}
                   </div>
-                </CardContent>
-              </Card>
+              </OpsPanel>
 
               {/* Серверы */}
-              <Card className="lg:col-span-2">
-                <CardContent className="px-5 py-5 flex flex-col gap-4">
-                  <div className="flex items-center justify-between">
-                    <SectionTitle icon={<ServerIcon className="size-3.5" />}>Серверы для бэкапа</SectionTitle>
+              <OpsPanel
+                className="lg:col-span-2"
+                title="Серверы для бэкапа"
+                headerRight={
                     <div className="flex items-center gap-2 shrink-0">
                       <button type="button" onClick={() => setSelectedServers(new Set(liveServers.map(s => s.id)))}
                         className="text-xs text-primary hover:underline">Выбрать все</button>
@@ -628,7 +626,9 @@ export default function BackupsPage() {
                       <button type="button" onClick={() => setSelectedServers(new Set())}
                         className="text-xs text-muted-foreground hover:text-foreground hover:underline">Сбросить</button>
                     </div>
-                  </div>
+                }
+                contentClassName="px-5 py-5 flex flex-col gap-4"
+              >
 
                   <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
                     {liveServers.map((s) => {
@@ -662,8 +662,7 @@ export default function BackupsPage() {
                   <p className="text-xs text-muted-foreground">
                     Выбрано {selectedServers.size} из {liveServers.length} серверов
                   </p>
-                </CardContent>
-              </Card>
+              </OpsPanel>
 
               {/* Save button */}
               <div className="lg:col-span-2 flex items-center gap-3">