feat: add IPTV export functionality with M3U and XMLTV generation, including UI components for export dialog

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

@@ -1,7 +1,16 @@
 "use client";
 
 import Link from "next/link";
-import { Pencil, Trash2, RefreshCw, Tv2, CalendarDays, Download, ChevronUp, ChevronDown } from "lucide-react";
+import {
+  Pencil,
+  Trash2,
+  RefreshCw,
+  Tv2,
+  CalendarDays,
+  Download,
+  ChevronUp,
+  ChevronDown,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useActiveSchedule } from "@/hooks/use-channels";
 import type { ChannelResponse } from "@/lib/types";
@@ -34,7 +43,12 @@ function useScheduleStatus(channelId: string) {
     const h = Math.ceil(hoursLeft);
     return { status: "expiring" as const, label: `Expires in ${h}h` };
   }
-  const fmt = expiresAt.toLocaleDateString(undefined, { weekday: "short", hour: "2-digit", minute: "2-digit", hour12: false });
+  const fmt = expiresAt.toLocaleDateString(undefined, {
+    weekday: "short",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  });
   return { status: "ok" as const, label: `Until ${fmt}` };
 }
 
@@ -55,10 +69,13 @@ export function ChannelCard({
   const { status, label } = useScheduleStatus(channel.id);
 
   const scheduleColor =
-    status === "expired" ? "text-red-400" :
-    status === "expiring" ? "text-amber-400" :
-    status === "ok" ? "text-zinc-500" :
-    "text-zinc-600";
+    status === "expired"
+      ? "text-red-400"
+      : status === "expiring"
+        ? "text-amber-400"
+        : status === "ok"
+          ? "text-zinc-500"
+          : "text-zinc-600";
 
   return (
     <div className="flex flex-col gap-4 rounded-xl border border-zinc-800 bg-zinc-900 p-5 transition-colors hover:border-zinc-700">
@@ -131,9 +148,7 @@ export function ChannelCard({
         <span>
           {blockCount} {blockCount === 1 ? "block" : "blocks"}
         </span>
-        {label && (
-          <span className={scheduleColor}>{label}</span>
-        )}
+        {label && <span className={scheduleColor}>{label}</span>}
       </div>
 
       {/* Actions */}
@@ -144,11 +159,12 @@ export function ChannelCard({
           disabled={isGenerating}
           className={`flex-1 ${status === "expired" ? "border border-red-800/50 bg-red-950/30 text-red-300 hover:bg-red-900/40" : ""}`}
         >
-          <RefreshCw className={`size-3.5 ${isGenerating ? "animate-spin" : ""}`} />
+          <RefreshCw
+            className={`size-3.5 ${isGenerating ? "animate-spin" : ""}`}
+          />
           {isGenerating ? "Generating…" : "Generate schedule"}
         </Button>
         <Button
-          variant="outline"
           size="icon-sm"
           onClick={onViewSchedule}
           title="View schedule"
@@ -157,7 +173,6 @@ export function ChannelCard({
           <CalendarDays className="size-3.5" />
         </Button>
         <Button
-          variant="outline"
           size="icon-sm"
           asChild
           title="Watch on TV"