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

mobile/src/pages/datacards.tsx

@@ -68,6 +68,7 @@ interface ClockCard {
 interface ImageRotatorCard {
   id: string; type: "image_rotator"; name: string;
   config: { images: string[]; interval: number; fit: "cover" | "contain" };
+  disabled?: boolean;
   layout?: CardLayout;
 }
 
@@ -85,6 +86,7 @@ export type DataCard = CustomJsonCard | StaticTextCard | ClockCard | ImageRotato
 interface FormState {
   type: CardType;
   name: string;
+  disabled: boolean;
   // layout
   grid_col: number; grid_row: number; col_span: number; row_span: number;
   // display (custom_json / static_text / clock)
@@ -112,6 +114,7 @@ interface FormState {
 const EMPTY_FORM: FormState = {
   type: "custom_json",
   name: "",
+  disabled: false,
   grid_col: 1, grid_row: 1, col_span: 1, row_span: 1,
   font_size: "16",
   text_color: "#ffffff",
@@ -186,6 +189,7 @@ function cardToForm(card: DataCard): FormState {
       image_urls: card.config.images ?? [],
       image_interval: String(card.config.interval ?? 10),
       image_fit: card.config.fit ?? "cover",
+      disabled: (card as ImageRotatorCard).disabled ?? false,
     };
   }
   if (card.type === "spotify") {
@@ -246,6 +250,7 @@ function formToCard(form: FormState, id: string): DataCard {
         fit: form.image_fit,
       },
       layout,
+      disabled: form.disabled,
     };
   }
   if (form.type === "spotify") {
@@ -967,6 +972,17 @@ function FormView({ form, onChange, onBoolChange, onLayoutChange, onTypeChange,
           <FieldLabel text="Name *" />
           <TextInput style={styles.input} placeholder="My Widget" placeholderTextColor={colors.placeholderColor} value={form.name} onChangeText={(v) => onChange("name", v)} />
         </View>
+        {form.type === "image_rotator" && (
+          <View style={[styles.field, styles.row, { alignItems: "center" }] }>
+            <Text style={[styles.label, { flex: 1 }]}>Paused</Text>
+            <Switch
+              value={form.disabled}
+              onValueChange={(v) => onBoolChange("disabled", v)}
+              trackColor={{ true: colors.accent, false: colors.border }}
+              thumbColor="#fff"
+            />
+          </View>
+        )}
 
         <SectionLabel text={form.type === "custom_json" ? "Data Source" : form.type === "static_text" ? "Content" : form.type === "clock" ? "Clock Settings" : form.type === "spotify" ? "Spotify Settings" : "Images"} />
         {form.type === "custom_json" && <CustomJsonFields form={form} onChange={onChange} />}
@@ -1030,7 +1046,10 @@ function cardSubtitle(card: DataCard): string {
 
 function cardMeta(card: DataCard): string {
   if (card.type === "custom_json") return `Refresh: ${(card as CustomJsonCard).config.refresh_interval}s`;
-  if (card.type === "image_rotator") return `Fit: ${card.config.fit}`;
+  if (card.type === "image_rotator") {
+    const paused = (card as ImageRotatorCard).disabled ? "Paused · " : "";
+    return `${paused}Fit: ${card.config.fit}`;
+  }
   if (card.type === "clock") return card.config.mode === "time" ? "Mode: live time" : "Mode: countdown";
   if (card.type === "spotify") return `Refresh: ${(card as SpotifyCard).config.refresh_interval}s`;
   return "";