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

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

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

app/(main)/dashboard/page.tsx

@@ -1,10 +1,12 @@
 "use client"
 
-import { useCallback, useEffect, useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react"
 import { usePathname } from "next/navigation"
 import Link from "next/link"
 import { PageHeader } from "@/components/page-header"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { OpsPanel } from "@/components/ops-panel"
+import { Frame, FramePanel } from "@/components/reui/frame"
+import { IconTile } from "@/components/reui/icon-tile"
 import { StatusDot } from "@/components/status-dot"
 import { StatusBadge } from "@/components/status-badge"
 import { Sparkline } from "@/components/sparkline"
@@ -22,7 +24,7 @@ import type { PingProbe, Server, ServerStatus, ServerType } from "@/lib/data"
 import type { GreTunnel } from "@/lib/data"
 import { useDataSource } from "@/lib/data-source"
 import { Flag } from "@/components/flag"
-import { AlertCircleIcon, AlertTriangleIcon, InfoIcon, DownloadIcon } from "lucide-react"
+import { AlertCircleIcon, AlertTriangleIcon, BellIcon, FilterIcon, GitMergeIcon, InfoIcon, DownloadIcon, ServerIcon } from "lucide-react"
 import { Button, buttonVariants } from "@/components/ui/button"
 import { DataPageCard } from "@/components/data-page-card"
 import { DashboardActiveProbesDataGrid } from "@/components/data-grids/dashboard-active-probes-data-grid"
@@ -46,31 +48,45 @@ function makeApiFetch(backendUrl: string) {
 }
 
 function StatCard({
-  label, value, unit, delta, deltaDir, spark, sparkColor,
+  label, value, unit, delta, deltaDir, spark, sparkColor, icon,
 }: {
   label: string; value: string; unit?: string; delta?: string
   deltaDir?: "up" | "down"; spark?: number[]; sparkColor?: string
+  icon?: ReactNode
 }) {
   return (
-    <Card className="relative overflow-hidden">
-      <CardContent className="pt-5 pb-4 px-5">
-        <p className="text-sm font-medium text-muted-foreground">{label}</p>
-        <div className="flex items-baseline gap-1.5 mt-1">
-          <span className="text-3xl font-semibold tracking-tight tabular-nums">{value}</span>
-          {unit && <span className="text-sm text-muted-foreground">{unit}</span>}
+    <Frame className="h-full">
+      <FramePanel className="relative isolate flex h-full flex-col overflow-hidden">
+        <div className="relative z-10 flex items-start gap-3">
+          {icon ? (
+            <IconTile
+              variant="elevated"
+              aria-hidden="true"
+              className="size-10.5 text-muted-foreground"
+            >
+              {icon}
+            </IconTile>
+          ) : null}
+          <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+            <p className="text-muted-foreground text-sm font-medium">{label}</p>
+            <div className="flex items-baseline gap-1.5">
+              <span className="text-2xl leading-none font-bold tabular-nums tracking-tight">{value}</span>
+              {unit ? <span className="text-muted-foreground text-sm">{unit}</span> : null}
+            </div>
+            {delta ? (
+              <p className={`text-xs mt-1 flex items-center gap-1 ${deltaDir === "up" ? "text-[var(--status-online-fg)]" : deltaDir === "down" ? "text-[var(--status-offline-fg)]" : "text-muted-foreground"}`}>
+                {delta}
+              </p>
+            ) : null}
+          </div>
         </div>
-        {delta && (
-          <p className={`text-xs mt-1 flex items-center gap-1 ${deltaDir === "up" ? "text-[var(--status-online-fg)]" : deltaDir === "down" ? "text-[var(--status-offline-fg)]" : "text-muted-foreground"}`}>
-            {delta}
-          </p>
-        )}
-        {spark && spark.length > 1 && (
+        {spark && spark.length > 1 ? (
           <div className="absolute right-4 bottom-4 opacity-60">
             <Sparkline data={spark} width={80} height={32} color={sparkColor ?? "currentColor"} filled />
           </div>
-        )}
-      </CardContent>
-    </Card>
+        ) : null}
+      </FramePanel>
+    </Frame>
   )
 }
 
@@ -719,6 +735,7 @@ export default function DashboardPage() {
               deltaDir={dashboardKpi.servers.deltaDir}
               spark={dashboardKpi.servers.spark}
               sparkColor={dashboardKpi.servers.sparkColor}
+              icon={<ServerIcon aria-hidden />}
             />
             <StatCard
               label="Активные фильтры"
@@ -728,6 +745,7 @@ export default function DashboardPage() {
               deltaDir={dashboardKpi.filters.deltaDir}
               spark={dashboardKpi.filters.spark}
               sparkColor={dashboardKpi.filters.sparkColor}
+              icon={<FilterIcon aria-hidden />}
             />
             <StatCard
               label="BGP-префиксы"
@@ -737,6 +755,7 @@ export default function DashboardPage() {
               deltaDir={dashboardKpi.bgp.deltaDir}
               spark={dashboardKpi.bgp.spark}
               sparkColor={dashboardKpi.bgp.sparkColor}
+              icon={<GitMergeIcon aria-hidden />}
             />
             <StatCard
               label="Активные алерты"
@@ -746,26 +765,23 @@ export default function DashboardPage() {
               deltaDir={dashboardKpi.alerts.deltaDir}
               spark={dashboardKpi.alerts.spark}
               sparkColor={dashboardKpi.alerts.sparkColor}
+              icon={<BellIcon aria-hidden />}
             />
           </div>
 
           {/* Latency chart + Events */}
           <div className="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-4">
-            <Card>
-              <CardHeader className="pb-2">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <CardTitle className="text-base">Задержка до серверов</CardTitle>
-                    <p className="text-sm text-muted-foreground mt-0.5">
-                      {latencyChartBlock.kind === "mock" && latencyChartBlock.subtitle}
-                      {latencyChartBlock.kind === "live" && latencyChartBlock.subtitle}
-                      {latencyChartBlock.kind === "loading" && "Загрузка…"}
-                      {latencyChartBlock.kind === "empty" && "Нет серии RTT для графика"}
-                    </p>
-                  </div>
-                </div>
-              </CardHeader>
-              <CardContent className="pt-0 px-3">
+            <OpsPanel
+              title="Задержка до серверов"
+              description={
+                latencyChartBlock.kind === "mock" || latencyChartBlock.kind === "live"
+                  ? latencyChartBlock.subtitle
+                  : latencyChartBlock.kind === "loading"
+                    ? "Загрузка…"
+                    : "Нет серии RTT для графика"
+              }
+              contentClassName="px-3 pb-3"
+            >
                 {latencyChartBlock.kind === "loading" && (
                   <div
                     className="w-full rounded-md bg-muted/50 animate-pulse"
@@ -783,23 +799,20 @@ export default function DashboardPage() {
                     labels={latencyChartBlock.labels}
                   />
                 )}
-              </CardContent>
-            </Card>
+            </OpsPanel>
 
-            <Card>
-              <CardHeader className="pb-2">
-                <div className="flex items-center justify-between">
-                  <CardTitle className="text-base">Последние события</CardTitle>
+            <OpsPanel
+              title="Последние события"
+              description="Система и BGP-активность"
+              headerRight={
                   <Link
                     href="/alerts"
                     className={cn(buttonVariants({ variant: "ghost", size: "sm" }), "text-xs h-7")}
                   >
                     Все →
                   </Link>
-                </div>
-                <p className="text-sm text-muted-foreground">Система и BGP-активность</p>
-              </CardHeader>
-              <CardContent className="pt-0 px-0">
+              }
+            >
                 <div className="divide-y divide-border">
                   {eventsLoading && recentEvents.length === 0 && (
                     <div className="px-5 py-6 text-sm text-muted-foreground">Загрузка событий...</div>
@@ -825,48 +838,41 @@ export default function DashboardPage() {
                     </div>
                   ))}
                 </div>
-              </CardContent>
-            </Card>
+            </OpsPanel>
           </div>
 
           {/* Bandwidth + Server status */}
           <div className="grid grid-cols-1 lg:grid-cols-[3fr_2fr] gap-4">
-            <Card>
-              <CardHeader className="pb-2">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <CardTitle className="text-base">Пропускная способность</CardTitle>
-                    <p className="text-sm text-muted-foreground mt-0.5">Суммарный RX / TX по всем серверам</p>
-                  </div>
+            <OpsPanel
+              title="Пропускная способность"
+              description="Суммарный RX / TX по всем серверам"
+              headerRight={
                   <div className="flex items-center gap-3 text-xs">
                     <span className="flex items-center gap-1.5"><span className="w-3 h-0.5 bg-foreground/80 rounded inline-block" />RX 318 Мбит/с</span>
                     <span className="flex items-center gap-1.5"><span className="w-3 h-0.5 bg-[var(--chart-tx)] rounded inline-block" />TX 244 Мбит/с</span>
                   </div>
-                </div>
-              </CardHeader>
-              <CardContent className="pt-0 px-3">
+              }
+              contentClassName="px-3 pb-3"
+            >
                 <BandwidthChart rx={traffic.rx} tx={traffic.tx} />
-              </CardContent>
-            </Card>
+            </OpsPanel>
 
-            <Card>
-              <CardHeader className="pb-2">
-                <div className="flex items-center justify-between gap-2">
-                  <div className="min-w-0">
-                    <CardTitle className="text-base">Состояние серверов</CardTitle>
-                    <p className="text-sm text-muted-foreground mt-0.5 truncate" title={serverStatusModel.subtitle}>
-                      {serverStatusModel.subtitle}
-                    </p>
-                  </div>
+            <OpsPanel
+              title="Состояние серверов"
+              description={
+                <span className="truncate" title={serverStatusModel.subtitle}>
+                  {serverStatusModel.subtitle}
+                </span>
+              }
+              headerRight={
                   <Link
                     href="/servers"
                     className={cn(buttonVariants({ variant: "outline", size: "sm" }), "h-7 text-xs shrink-0")}
                   >
                     Управление →
                   </Link>
-                </div>
-              </CardHeader>
-              <CardContent className="pt-0 px-0">
+              }
+            >
                 <div className="divide-y divide-border">
                   {serverStatusModel.kind === "loading" && (
                     <>
@@ -916,8 +922,7 @@ export default function DashboardPage() {
                     </div>
                   ))}
                 </div>
-              </CardContent>
-            </Card>
+            </OpsPanel>
           </div>
 
           <div className="grid grid-cols-1 gap-4">
@@ -933,28 +938,22 @@ export default function DashboardPage() {
           </div>
 
           {/* Ping probes table */}
-          <Card>
-            <CardHeader className="pb-2">
-              <div className="flex items-center justify-between">
-                <div>
-                  <CardTitle className="text-base">Активные пробы</CardTitle>
-                  <p className={cn(
-                    "text-sm mt-0.5",
-                    probesError && isLive ? "text-destructive" : "text-muted-foreground",
-                  )}
-                  >
-                    {probesSubtitle}
-                  </p>
-                </div>
+          <OpsPanel
+            title="Активные пробы"
+            description={
+              <span className={probesError && isLive ? "text-destructive" : undefined}>
+                {probesSubtitle}
+              </span>
+            }
+            headerRight={
                 <Link
                   href="/uptime"
                   className={cn(buttonVariants({ variant: "outline", size: "sm" }), "h-7 text-xs")}
                 >
                   Открыть монитор →
                 </Link>
-              </div>
-            </CardHeader>
-            <CardContent className="pt-0 px-0">
+            }
+          >
               <DataPageCard className="rounded-none border-0 shadow-none">
                 <DashboardActiveProbesDataGrid
                   probes={activeProbesTable}
@@ -967,8 +966,7 @@ export default function DashboardPage() {
                   }
                 />
               </DataPageCard>
-            </CardContent>
-          </Card>
+          </OpsPanel>
 
         </div>
       </div>