feat: add disabled state to ImageRotatorCard and handle paused state in ImageRotatorWidget

tv/src/components/DataCardWidget.tsx

@@ -242,6 +242,7 @@ function ImageRotatorWidget({ card, isNightMode, nightMessage }: { card: ImageRo
 
   useEffect(() => {
     if (isNightMode) return;
+    if (card.disabled) return;
     if (images.length <= 1) return;
     const ms = Math.max(2000, (card.config.interval ?? 10) * 1000);
     const timer = setInterval(() => {
@@ -252,7 +253,7 @@ function ImageRotatorWidget({ card, isNightMode, nightMessage }: { card: ImageRo
       }, 400);
     }, ms);
     return () => clearInterval(timer);
-  }, [images.length, card.config.interval, isNightMode]);
+  }, [images.length, card.config.interval, isNightMode, card.disabled]);
 
   // ── Night mode overlay ────────────────────────────────────────────────────
   if (isNightMode) {
@@ -292,6 +293,13 @@ function ImageRotatorWidget({ card, isNightMode, nightMessage }: { card: ImageRo
           display: "block",
         }}
       />
+      {/* Paused overlay when disabled */}
+      {card.disabled && (
+        <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/50">
+          <span className="text-5xl">⏸</span>
+          <span className="text-white text-lg font-semibold mt-2">Paused</span>
+        </div>
+      )}
       {/* Name overlay */}
       <div className="absolute bottom-0 left-0 right-0 px-4 py-2 bg-gradient-to-t from-black/70 to-transparent">
         <span className="text-white text-xs font-semibold truncate">{card.name}</span>

tv/src/types.ts

@@ -115,6 +115,8 @@ export interface ImageRotatorCard {
   name: string;
   config: ImageRotatorConfig;
   layout?: CardLayout;
+  /** When true the rotator is temporarily paused on the TV */
+  disabled?: boolean;
 }
 
 // ─── spotify ──────────────────────────────────────────────────────────────────