feat: panel UI'ını Tailwind v4 + shadcn/ui ile yeniden tasarla (Faz 4)

Elle yazılmış tek-dosya CSS (sabit koyu tema, ham table/button, window.confirm
ile silme onayı) yerine tutarlı bir bileşen sistemi: Card/Table/Badge/Button/
Input/Switch/AlertDialog primitifleri, Hanken Grotesk + JetBrains Mono
tipografi çifti, "broadcast/monitör" temalı özel bir renk paleti (camgöbeği
accent, ok/warn/err/live durum rengi sözlüğü). Tüm sayfalar (dashboard, kanal
detay, segmentler, ayarlar, istatistik, kullanıcılar, login) aynı oturumda
taşındı — silme onayları artık gerçek AlertDialog, native confirm() değil.

Veri akışı/server action'lar değişmedi, tamamen görsel katman.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/frontend/app/components/ConfirmButton.tsx

@@ -1,24 +1,57 @@
 "use client";
 
+import { useRef } from "react";
+
+import { Button, type buttonVariants } from "@/components/ui/button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import type { VariantProps } from "class-variance-authority";
+
+/** Submits the form this button lives in — used inside the (portaled) AlertDialogAction, which isn't a DOM descendant of that form, so `type="submit"` alone wouldn't reach it. */
 export function ConfirmButton({
   confirmText,
   label,
-  variant = "err",
+  triggerLabel,
+  variant = "destructive",
 }: {
   confirmText: string;
   label: string;
-  variant?: "err" | "warn" | "muted" | "ok";
+  triggerLabel?: string;
+  variant?: VariantProps<typeof buttonVariants>["variant"];
 }) {
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
   return (
-    <button
-      type="submit"
-      className={`badge ${variant}`}
-      style={{ border: "none", cursor: "pointer" }}
-      onClick={(e) => {
-        if (!confirm(confirmText)) e.preventDefault();
-      }}
-    >
-      {label}
-    </button>
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button ref={triggerRef} type="button" variant={variant} size="sm">
+          {triggerLabel ?? label}
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Emin misin?</AlertDialogTitle>
+          <AlertDialogDescription>{confirmText}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Vazgeç</AlertDialogCancel>
+          <AlertDialogAction
+            variant={variant}
+            onClick={() => triggerRef.current?.closest("form")?.requestSubmit()}
+          >
+            {label}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 }