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

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

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

app/(main)/communities/page.tsx

@@ -10,9 +10,8 @@ import {
   ACTION_LABELS,
   ACTION_COLOR,
 } from "@/components/data-grids/communities-data-grid"
-import {
-  Card, CardContent, CardHeader, CardTitle, CardDescription,
-} from "@/components/ui/card"
+import { Frame, FramePanel } from "@/components/reui/frame"
+import { OpsPanel } from "@/components/ops-panel"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import {
@@ -169,12 +168,12 @@ export default function CommunitiesPage() {
               { label: "Стандартных",       value: String(listData.filter(c => c.type === "standard").length) },
               { label: "Использует фильтры",value: String(new Set(listData.flatMap(c => c.filterIds)).size) },
             ].map(({ label, value }) => (
-              <Card key={label}>
-                <CardContent className="pt-4 pb-3 px-4">
-                  <p className="text-xs text-muted-foreground">{label}</p>
-                  <p className="text-2xl font-semibold tabular-nums">{value}</p>
-                </CardContent>
-              </Card>
+              <Frame key={label} className="h-full">
+                <FramePanel className="flex flex-col gap-0.5">
+                  <p className="text-muted-foreground text-sm font-medium">{label}</p>
+                  <p className="text-2xl leading-none font-bold tabular-nums">{value}</p>
+                </FramePanel>
+              </Frame>
             ))}
           </div>
 
@@ -211,30 +210,28 @@ export default function CommunitiesPage() {
 
             {/* ── detail panel ── */}
             {selected ? (
-              <Card className="h-fit sticky top-0">
-                <CardHeader className="pb-3">
-                  <div className="flex items-start justify-between gap-2">
-                    <div>
-                      <div className="flex items-center gap-2 mb-1">
-                        <span className={cn(
-                          "inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium",
-                          selected.enabled
-                            ? "bg-emerald-500/10 text-emerald-600"
-                            : "bg-muted text-muted-foreground"
-                        )}>
-                          {selected.enabled ? "Активен" : "Выключен"}
-                        </span>
-                      </div>
-                      <CardTitle className="text-sm font-mono">{selected.value}</CardTitle>
-                      <CardDescription className="text-xs mt-0.5">{selected.name}</CardDescription>
-                    </div>
+              <OpsPanel
+                className="h-fit sticky top-0"
+                title={<span className="font-mono">{selected.value}</span>}
+                description={selected.name}
+                headerRight={
                     <div className="flex gap-1 shrink-0">
                       <Button size="sm" variant="ghost" className="size-7 p-0"><PencilIcon className="size-3.5" /></Button>
                       <Button size="sm" variant="ghost" className="size-7 p-0 text-destructive hover:text-destructive"><TrashIcon className="size-3.5" /></Button>
                     </div>
+                }
+                contentClassName="flex flex-col gap-4 text-sm px-5 pb-5"
+              >
+                  <div className="flex items-center gap-2">
+                    <span className={cn(
+                      "inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium",
+                      selected.enabled
+                        ? "bg-emerald-500/10 text-emerald-600"
+                        : "bg-muted text-muted-foreground"
+                    )}>
+                      {selected.enabled ? "Активен" : "Выключен"}
+                    </span>
                   </div>
-                </CardHeader>
-                <CardContent className="space-y-4 text-sm">
                   <p className="text-xs text-muted-foreground">{selected.description}</p>
 
                   <div className="space-y-2">
@@ -272,15 +269,14 @@ export default function CommunitiesPage() {
                       Скопировать значение
                     </Button>
                   </div>
-                </CardContent>
-              </Card>
+              </OpsPanel>
             ) : (
-              <Card className="h-fit">
-                <CardContent className="flex flex-col items-center justify-center py-12 gap-3 text-center">
+              <Frame dense className="w-full h-fit">
+                <FramePanel className="flex flex-col items-center justify-center py-12 gap-3 text-center">
                   <TagIcon className="size-8 text-muted-foreground/30" />
                   <p className="text-xs text-muted-foreground">Выберите community<br />для просмотра деталей</p>
-                </CardContent>
-              </Card>
+                </FramePanel>
+              </Frame>
             )}
           </div>
         </div>