feat(channel-card): add confirmation dialog for schedule regeneration

k-tv-frontend/app/(main)/dashboard/components/channel-card.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
 import {
   Pencil,
@@ -14,6 +15,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { useActiveSchedule } from "@/hooks/use-channels";
 import type { ChannelResponse } from "@/lib/types";
+import { ConfirmDialog } from "./confirm-dialog";
 
 interface ChannelCardProps {
   channel: ChannelResponse;
@@ -65,6 +67,7 @@ export function ChannelCard({
   onMoveUp,
   onMoveDown,
 }: ChannelCardProps) {
+  const [confirmOpen, setConfirmOpen] = useState(false);
   const blockCount = channel.schedule_config.blocks.length;
   const { status, label } = useScheduleStatus(channel.id);
 
@@ -155,7 +158,13 @@ export function ChannelCard({
       <div className="flex gap-2">
         <Button
           size="sm"
-          onClick={onGenerateSchedule}
+          onClick={() => {
+            if (status !== "none") {
+              setConfirmOpen(true);
+            } else {
+              onGenerateSchedule();
+            }
+          }}
           disabled={isGenerating}
           className={`flex-1 ${status === "expired" ? "border border-red-800/50 bg-red-950/30 text-red-300 hover:bg-red-900/40" : ""}`}
         >
@@ -181,6 +190,22 @@ export function ChannelCard({
           </Link>
         </Button>
       </div>
+      <ConfirmDialog
+        open={confirmOpen}
+        onOpenChange={setConfirmOpen}
+        title="Regenerate schedule?"
+        description={
+          <>
+            <span className="font-medium text-zinc-200">{channel.name}</span>
+            {" "}already has an active schedule. Generating a new one will overwrite it immediately.
+          </>
+        }
+        confirmLabel="Regenerate"
+        onConfirm={() => {
+          setConfirmOpen(false);
+          onGenerateSchedule();
+        }}
+      />
     </div>
   );
 }

k-tv-frontend/app/(main)/dashboard/components/confirm-dialog.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import React from "react";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from "@/components/ui/alert-dialog";
+
+interface ConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: React.ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm: () => void;
+  isPending?: boolean;
+  destructive?: boolean;
+}
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  isPending,
+  destructive,
+}: ConfirmDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent className="bg-zinc-900 border-zinc-800 text-zinc-100">
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription className="text-zinc-400">
+            {description}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel
+            disabled={isPending}
+            className="border-zinc-700 bg-transparent text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100"
+          >
+            {cancelLabel}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onConfirm}
+            disabled={isPending}
+            className={
+              destructive ? "bg-red-600 text-white hover:bg-red-700" : undefined
+            }
+          >
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}