PlexPlaylist_UI subtree merge

feat: Implement schedule settings and basic UI
feat: Display next sync schedule information

Merge commit '06e49be1f9c587f66cca97de97cf449b33b04a4b'

sample-front-end/App.tsx

@@ -1,5 +1,7 @@
+
+
 import React, { useEffect, useState, useCallback, useRef } from 'react';
-import { Playlist, ServerType, SyncStrategy, PlexServerConnection, RegexReplacement, SyncState } from './types';
+import { Playlist, ServerType, SyncStrategy, PlexServerConnection, RegexReplacement, SyncState, ScheduleSettings, ScheduleMode } from './types';
 import { apiService } from './services/api';
 import { 
   STRIPE_BASE_SPEED,
@@ -15,7 +17,7 @@ import { SYNC_BANNER_PADDING_X, SYNC_BANNER_PADDING_Y, SYNC_BANNER_MIN_WIDTH } f
 import ServerPanel from './components/ServerPanel';
 import StrategySelector from './components/StrategySelector';
 import ConnectionModal from './components/ConnectionModal';
-import { ArrowLeftRight, ShieldCheck, X, Server, ServerOff } from 'lucide-react';
+import { ArrowLeftRight, ShieldCheck, X, Server, ServerOff, Clock } from 'lucide-react';
 
 interface Toast {
   id: number;
@@ -31,7 +33,7 @@ const useStripeAnimation = (syncState: SyncState) => {
   const rightYellowRef = useRef<HTMLDivElement>(null);
   const rightGreenRef = useRef<HTMLDivElement>(null);
 
-  const requestRef = useRef<number>();
+  const requestRef = useRef<number | undefined>(undefined);
   const lastTimeRef = useRef<number>(0);
   const offsetRef = useRef<number>(0);
   
@@ -138,6 +140,16 @@ const App: React.FC = () => {
   // Regex State
   const [regexReplacements, setRegexReplacements] = useState<RegexReplacement[]>([]);
 
+  // Schedule State
+  const [scheduleSettings, setScheduleSettings] = useState<ScheduleSettings>({
+    mode: ScheduleMode.DISABLED,
+    cronExpression: '',
+    dailyTime: '02:00',
+    weeklyDays: [0], // Sunday
+    weeklyTime: '03:00',
+    autoWatch: false
+  });
+
   // Toast Notification System
   const [toasts, setToasts] = useState<Toast[]>([]);
   const timeoutsRef = useRef<{[key: number]: ReturnType<typeof setTimeout>}>({});
@@ -286,6 +298,29 @@ const App: React.FC = () => {
     addToast('Regex preprocessing rules have been saved.');
   };
 
+  // Handle Schedule Save
+  const handleSaveSchedule = async (settings: ScheduleSettings): Promise<boolean> => {
+    // Call API (validation happens in Mock)
+    const result = await apiService.saveScheduleSettings(settings);
+    
+    if (result.status === 'success') {
+       // Only update local state if successful
+       setScheduleSettings(settings);
+
+       if (settings.mode === ScheduleMode.DISABLED) {
+          addToast("Scheduled tasks disabled.");
+       } else if (settings.mode === ScheduleMode.CRON && settings.cronExpression.trim() === '') {
+          addToast("Scheduled tasks disabled (Empty Cron).");
+       } else {
+          addToast("Scheduled task started successfully.");
+       }
+       return true;
+    } else {
+       addToast(result.message || "Failed to update schedule.");
+       return false;
+    }
+  };
+
   // Handle Sync Trigger
   const handleSyncTrigger = async () => {
     if (syncState !== SyncState.IDLE) return;
@@ -346,6 +381,84 @@ const App: React.FC = () => {
 
   const isConnected = cloudServerInfo?.isConnected;
 
+  // Helper: Calculate Next Run Info
+  const getScheduleDisplayInfo = (settings: ScheduleSettings) => {
+    if (settings.mode === ScheduleMode.DISABLED) {
+      return { label: 'Auto-Sync', value: 'Disabled', active: false };
+    }
+
+    if (settings.mode === ScheduleMode.CRON) {
+      return { label: 'Cron Schedule', value: settings.cronExpression || 'Pending...', active: true };
+    }
+
+    const now = new Date();
+    const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    let nextRun: Date | null = null;
+    let timeStr = '';
+
+    if (settings.mode === ScheduleMode.DAILY) {
+       const [h, m] = settings.dailyTime.split(':').map(Number);
+       const target = new Date();
+       target.setHours(h, m, 0, 0);
+       timeStr = settings.dailyTime;
+       
+       if (now < target) {
+         nextRun = target;
+       } else {
+         const tomorrow = new Date();
+         tomorrow.setDate(tomorrow.getDate() + 1);
+         tomorrow.setHours(h, m, 0, 0);
+         nextRun = tomorrow;
+       }
+    } else if (settings.mode === ScheduleMode.WEEKLY) {
+       timeStr = settings.weeklyTime;
+       const [h, m] = settings.weeklyTime.split(':').map(Number);
+       const activeDays = [...settings.weeklyDays].sort();
+       
+       if (activeDays.length === 0) return { label: 'Weekly Schedule', value: 'No days selected', active: false };
+
+       // Check rest of today
+       if (activeDays.includes(now.getDay())) {
+          const todayTarget = new Date();
+          todayTarget.setHours(h, m, 0, 0);
+          if (todayTarget > now) {
+            nextRun = todayTarget;
+          }
+       }
+
+       // Check future days
+       if (!nextRun) {
+         for (let i = 1; i <= 7; i++) {
+           const nextDayIndex = (now.getDay() + i) % 7;
+           if (activeDays.includes(nextDayIndex)) {
+             const d = new Date();
+             d.setDate(now.getDate() + i);
+             d.setHours(h, m, 0, 0);
+             nextRun = d;
+             break;
+           }
+         }
+       }
+    }
+
+    if (nextRun) {
+       // Format logic
+       const isToday = nextRun.getDate() === now.getDate() && nextRun.getMonth() === now.getMonth();
+       const isTomorrow = new Date(now.getTime() + 86400000).getDate() === nextRun.getDate();
+       
+       let dateStr = '';
+       if (isToday) dateStr = 'Today';
+       else if (isTomorrow) dateStr = 'Tomorrow';
+       else dateStr = days[nextRun.getDay()];
+
+       return { label: `${settings.mode === ScheduleMode.DAILY ? 'Daily' : 'Weekly'} Schedule`, value: `${dateStr} at ${timeStr}`, active: true };
+    }
+
+    return { label: 'Schedule', value: 'Not configured', active: false };
+  };
+
+  const scheduleInfo = getScheduleDisplayInfo(scheduleSettings);
+
   return (
     <div className="min-h-screen flex flex-col bg-gray-900 text-gray-100 font-sans overflow-hidden bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-gray-800 via-gray-900 to-black">
       
@@ -411,7 +524,7 @@ const App: React.FC = () => {
           
           {syncState === SyncState.IDLE ? (
             <>
-              {/* Normal Toolbar */}
+              {/* Normal Toolbar Left */}
               <div className="flex items-center space-x-3">
                 <div className="p-1.5 rounded-lg shadow-lg bg-gradient-to-br from-plex-orange to-yellow-600 text-gray-900 shadow-plex-orange/20">
                    <ArrowLeftRight size={24} strokeWidth={2.5} />
@@ -421,18 +534,32 @@ const App: React.FC = () => {
                 </h1>
               </div>
               
-              {/* Connection Status Button */}
+              {/* Normal Toolbar Right */}
-              <button 
+              <div className="flex items-center gap-4">
-                onClick={() => setIsConnectionModalOpen(true)}
+                  {/* Schedule Info */}
-                className={`flex items-center justify-center w-9 h-9 rounded-full border transition-all duration-300 hover:scale-105 active:scale-95 shadow-md 
+                  <div className="flex flex-col items-end mr-2 md:mr-0 hidden md:flex">
-                  ${isConnected 
+                     <span className="text-[10px] uppercase font-bold text-gray-500 tracking-wider">
-                    ? "bg-green-500/10 border-green-500/50 text-green-400 hover:bg-green-500/20 hover:shadow-green-500/20"
+                       {scheduleInfo.label}
-                    : "bg-red-500/10 border-red-500/50 text-red-400 hover:bg-red-500/20 hover:shadow-red-500/20"
+                     </span>
-                  }`}
+                     <div className={`text-xs font-mono flex items-center gap-1.5 ${scheduleInfo.active ? 'text-plex-orange' : 'text-gray-600'}`}>
-                title={isConnected ? "Connected to Plex" : "Disconnected"}
+                       {scheduleInfo.active && <Clock size={12} />}
-              >
+                       <span>{scheduleInfo.value}</span>
-                {isConnected ? <Server size={18} /> : <ServerOff size={18} />}
+                     </div>
-              </button>
+                  </div>
+
+                  {/* Connection Status Button */}
+                  <button 
+                    onClick={() => setIsConnectionModalOpen(true)}
+                    className={`flex items-center justify-center w-9 h-9 rounded-full border transition-all duration-300 hover:scale-105 active:scale-95 shadow-md 
+                      ${isConnected 
+                        ? "bg-green-500/10 border-green-500/50 text-green-400 hover:bg-green-500/20 hover:shadow-green-500/20"
+                        : "bg-red-500/10 border-red-500/50 text-red-400 hover:bg-red-500/20 hover:shadow-red-500/20"
+                      }`}
+                    title={isConnected ? "Connected to Plex" : "Disconnected"}
+                  >
+                    {isConnected ? <Server size={18} /> : <ServerOff size={18} />}
+                  </button>
+              </div>
             </>
           ) : (
             /* Syncing / Success Text Banner */
@@ -504,6 +631,8 @@ const App: React.FC = () => {
                 onSelect={handleStrategyChange}
                 savedRegexReplacements={regexReplacements}
                 onSaveRegex={handleSaveRegex}
+                savedSchedule={scheduleSettings}
+                onSaveSchedule={handleSaveSchedule}
                 syncState={syncState}
                 onSync={handleSyncTrigger}
               />
@@ -540,4 +669,4 @@ const App: React.FC = () => {
   );
 };
 
-export default App;
+export default App;

sample-front-end/components/StrategySelector.tsx

@@ -1,6 +1,5 @@
-
 import React, { useState, useRef, useEffect } from 'react';
-import { SyncStrategy, RegexReplacement, SyncState } from '../types';
+import { SyncStrategy, RegexReplacement, SyncState, ScheduleSettings, ScheduleMode } from '../types';
 import { 
   ArrowRightCircle, 
   ArrowLeftCircle, 
@@ -13,7 +12,12 @@ import {
   Save,
   RotateCcw,
   Zap,
-  Loader2
+  Loader2,
+  Calendar,
+  Clock,
+  Repeat,
+  CheckSquare,
+  Square
 } from 'lucide-react';
 
 interface StrategyOption {
@@ -55,11 +59,15 @@ const STRATEGIES: StrategyOption[] = [
   }
 ];
 
+const WEEK_DAYS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+
 interface StrategySelectorProps {
   currentStrategy: SyncStrategy;
   onSelect: (strategy: SyncStrategy, label: string) => void;
   savedRegexReplacements: RegexReplacement[];
   onSaveRegex: (replacements: RegexReplacement[]) => void;
+  savedSchedule: ScheduleSettings;
+  onSaveSchedule: (settings: ScheduleSettings) => Promise<boolean>;
   syncState: SyncState;
   onSync: () => void;
 }
@@ -69,6 +77,8 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
   onSelect, 
   savedRegexReplacements, 
   onSaveRegex,
+  savedSchedule,
+  onSaveSchedule,
   syncState,
   onSync
 }) => {
@@ -77,23 +87,47 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
 
   // Local state for regex editing
   const [localReplacements, setLocalReplacements] = useState<RegexReplacement[]>([]);
-  const [isDirty, setIsDirty] = useState(false);
+  const [isRegexDirty, setIsRegexDirty] = useState(false);
+
+  // Local state for Schedule editing
+  const [localSchedule, setLocalSchedule] = useState<ScheduleSettings>(savedSchedule);
+  const [isScheduleDirty, setIsScheduleDirty] = useState(false);
+  
+  // UI State for Schedule Tabs
+  // We initialize active tab based on the saved mode. If DISABLED, default to CRON.
+  const [activeTab, setActiveTab] = useState<ScheduleMode>(
+    savedSchedule.mode === ScheduleMode.DISABLED ? ScheduleMode.CRON : savedSchedule.mode
+  );
 
   const isSyncing = syncState === SyncState.SYNCING;
   const isLocked = isSyncing || syncState === SyncState.SUCCESS;
 
-  // Initialize local state when prop updates (only if not dirty, or initially)
+  // Initialize local state when prop updates
   useEffect(() => {
     setLocalReplacements(JSON.parse(JSON.stringify(savedRegexReplacements)));
-    setIsDirty(false);
+    setIsRegexDirty(false);
   }, [savedRegexReplacements]);
 
+  useEffect(() => {
+    setLocalSchedule(JSON.parse(JSON.stringify(savedSchedule)));
+    // If the saved mode is not disabled, ensure we show that tab.
+    if (savedSchedule.mode !== ScheduleMode.DISABLED) {
+      setActiveTab(savedSchedule.mode);
+    }
+    setIsScheduleDirty(false);
+  }, [savedSchedule]);
+
   // Check dirty state whenever local changes
   useEffect(() => {
     const isDifferent = JSON.stringify(localReplacements) !== JSON.stringify(savedRegexReplacements);
-    setIsDirty(isDifferent);
+    setIsRegexDirty(isDifferent);
   }, [localReplacements, savedRegexReplacements]);
 
+  useEffect(() => {
+    const isDifferent = JSON.stringify(localSchedule) !== JSON.stringify(savedSchedule);
+    setIsScheduleDirty(isDifferent);
+  }, [localSchedule, savedSchedule]);
+
   const selectedOption = STRATEGIES.find(s => s.value === currentStrategy) || STRATEGIES[0];
 
   useEffect(() => {
@@ -111,7 +145,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
     onSelect(strategy.value, strategy.label);
   };
 
-  // Regex Handlers
+  // --- Regex Handlers ---
   const handleAddRegex = () => {
     if (isLocked) return;
     const newId = Date.now().toString();
@@ -130,29 +164,93 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
     ));
   };
 
-  const handleReset = () => {
+  const handleResetRegex = () => {
     if (isLocked) return;
     setLocalReplacements(JSON.parse(JSON.stringify(savedRegexReplacements)));
   };
 
-  const handleSave = () => {
+  const handleSaveRegex = () => {
     if (isLocked) return;
     const validReplacements = localReplacements.filter(r => r.pattern.trim() !== '');
     setLocalReplacements(validReplacements);
     onSaveRegex(validReplacements);
   };
 
+  // --- Schedule Handlers ---
+  const handleUpdateSchedule = (field: keyof ScheduleSettings, value: any) => {
+    if (isLocked) return;
+    setLocalSchedule(prev => ({ ...prev, [field]: value }));
+  };
+
+  const toggleWeekDay = (dayIndex: number) => {
+    if (isLocked) return;
+    const currentDays = localSchedule.weeklyDays;
+    const newDays = currentDays.includes(dayIndex)
+      ? currentDays.filter(d => d !== dayIndex)
+      : [...currentDays, dayIndex].sort();
+    handleUpdateSchedule('weeklyDays', newDays);
+  };
+
+  const handleResetSchedule = () => {
+    if (isLocked) return;
+    setLocalSchedule(JSON.parse(JSON.stringify(savedSchedule)));
+    if (savedSchedule.mode !== ScheduleMode.DISABLED) {
+      setActiveTab(savedSchedule.mode);
+    }
+  };
+
+  const handleSaveScheduleClick = async () => {
+    if (isLocked) return;
+    
+    let settingsToSave = { ...localSchedule };
+
+    // Logic to determine mode based on active Tab and checkbox state
+    if (activeTab === ScheduleMode.CRON) {
+        if (settingsToSave.cronExpression.trim() !== '') {
+            settingsToSave.mode = ScheduleMode.CRON;
+        } else {
+            // Empty cron -> disabled
+            settingsToSave.mode = ScheduleMode.DISABLED;
+        }
+    } 
+    
+    // For Daily/Weekly, enforce: Save commits what is seen in the active tab.
+    if (activeTab !== ScheduleMode.CRON) {
+       // If the mode matches the active tab, it's enabled. Otherwise disabled.
+       if (localSchedule.mode !== activeTab) {
+           settingsToSave.mode = ScheduleMode.DISABLED;
+       }
+    }
+    
+    // Call API
+    const success = await onSaveSchedule(settingsToSave);
+    if (success) {
+      setLocalSchedule(settingsToSave);
+      setIsScheduleDirty(false);
+    }
+  };
+
   const handleSyncClick = () => {
     if (isLocked) return;
     onSync();
   };
 
+  // Helper to toggle enable/disable for current active tab (Daily/Weekly)
+  const toggleScheduleEnable = (targetMode: ScheduleMode) => {
+      if (isLocked) return;
+      if (localSchedule.mode === targetMode) {
+          handleUpdateSchedule('mode', ScheduleMode.DISABLED);
+      } else {
+          handleUpdateSchedule('mode', targetMode);
+      }
+  };
+
   // If syncing or locked, apply grayscale filter to content sections
   const contentClass = isLocked ? "opacity-50 pointer-events-none grayscale transition-all" : "transition-all";
 
   return (
     <div className="relative group" ref={dropdownRef}>
-      {/* Trigger Button - Added Ring to create visual 'cutout' over panels */}
+      {/* Trigger Button */}
       <button
         onClick={() => setIsOpen(!isOpen)}
         className="flex items-center justify-center w-12 h-12 rounded-full bg-gray-800/90 border border-gray-600 hover:border-plex-orange text-gray-300 hover:text-white hover:bg-gray-700/80 transition-all shadow-2xl hover:shadow-plex-orange/30 ring-[6px] md:ring-8 ring-gray-900 backdrop-blur-sm active:scale-95"
@@ -164,7 +262,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
         </div>
       </button>
 
-      {/* Dropdown Menu - Persistent Mount for State Preservation */}
+      {/* Dropdown Menu */}
       <div 
         className={`absolute 
           top-14 
@@ -173,13 +271,14 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
           /* Desktop: Center alignment */
           md:left-1/2 md:right-auto md:origin-top md:-translate-x-1/2 
           
-          w-80 md:w-[30rem] bg-gray-800/95 border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden backdrop-blur-xl
+          w-80 md:w-[32rem] bg-gray-800/95 border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden backdrop-blur-xl
           transition-all duration-200 ease-out
           ${isOpen ? 'opacity-100 scale-100 visible translate-y-0' : 'opacity-0 scale-95 invisible pointer-events-none -translate-y-2'}`}
       >
-        <div className={contentClass}>
+        <div className={`flex flex-col max-h-[75vh] md:max-h-[85vh] overflow-y-auto custom-scrollbar ${contentClass}`}>
+            
             {/* Section 1: Sync Strategy */}
-            <div className="px-4 py-3 bg-black/20 border-b border-white/5">
+            <div className="px-4 py-3 bg-black/20 border-b border-white/5 flex-none">
             <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-2">Sync Strategy</h3>
             <div className="space-y-1">
                 {STRATEGIES.map((strategy) => (
@@ -217,23 +316,23 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
             </div>
 
             {/* Section 2: Regex Preprocessing */}
-            <div className="p-4 bg-gray-900/40">
+            <div className="p-4 bg-gray-900/40 border-b border-white/5 flex-none">
                 <div className="flex items-center justify-between mb-3">
-                <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Regex Rules</h3>
+                    <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Regex Rules</h3>
-                {localReplacements.length === 0 && (
+                    {localReplacements.length === 0 && (
-                    <button 
+                        <button 
-                    onClick={handleAddRegex}
+                        onClick={handleAddRegex}
-                    className="p-1 rounded bg-gray-700/50 hover:bg-gray-600 text-gray-400 hover:text-white transition-colors"
+                        className="p-1 rounded bg-gray-700/50 hover:bg-gray-600 text-gray-400 hover:text-white transition-colors"
-                    title="Add Rule"
+                        title="Add Rule"
-                    >
+                        >
-                    <Plus size={14} />
+                        <Plus size={14} />
-                    </button>
+                        </button>
-                )}
+                    )}
                 </div>
 
-                <div className="space-y-2 mb-4 max-h-52 overflow-y-auto pr-1 custom-scrollbar">
+                <div className="space-y-2 mb-4 max-h-40 overflow-y-auto pr-1 custom-scrollbar">
                 {localReplacements.length === 0 ? (
-                    <div className="text-xs text-gray-600 italic text-center py-4 border border-dashed border-gray-700/50 rounded-lg">
+                    <div className="text-xs text-gray-600 italic text-center py-2 border border-dashed border-gray-700/50 rounded-lg">
                         No regex replacements configured.
                     </div>
                 ) : (
@@ -242,11 +341,11 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                         <div className="flex-1 min-w-0">
                             <input 
                                 type="text" 
-                                placeholder="Regex Pattern" 
+                                placeholder="Pattern" 
                                 value={regex.pattern}
                                 onChange={(e) => handleUpdateRegex(regex.id, 'pattern', e.target.value)}
-                                className={`w-full bg-gray-900/80 border rounded-md px-2.5 py-1.5 text-xs text-gray-200 focus:outline-none focus:ring-1 transition-all placeholder-gray-600
+                                className={`w-full bg-gray-900/80 border rounded-md px-2 py-1.5 text-xs text-gray-200 focus:outline-none focus:ring-1 transition-all placeholder-gray-600
-                                ${!regex.pattern && isDirty ? 'border-red-500/30 focus:border-red-500' : 'border-gray-700 focus:border-plex-orange'}`}
+                                ${!regex.pattern && isRegexDirty ? 'border-red-500/30 focus:border-red-500' : 'border-gray-700 focus:border-plex-orange'}`}
                             />
                         </div>
                         <div className="flex-none text-gray-600">
@@ -258,7 +357,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                                 placeholder="Replacement" 
                                 value={regex.replacement}
                                 onChange={(e) => handleUpdateRegex(regex.id, 'replacement', e.target.value)}
-                                className="w-full bg-gray-900/80 border border-gray-700 rounded-md px-2.5 py-1.5 text-xs text-gray-200 focus:outline-none focus:border-plex-orange focus:ring-1 focus:ring-plex-orange transition-all placeholder-gray-600"
+                                className="w-full bg-gray-900/80 border border-gray-700 rounded-md px-2 py-1.5 text-xs text-gray-200 focus:outline-none focus:border-plex-orange focus:ring-1 focus:ring-plex-orange transition-all placeholder-gray-600"
                             />
                         </div>
                         <button 
@@ -273,58 +372,222 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                 )}
                 </div>
 
-                {/* Actions */}
+                <div className="flex justify-between items-center gap-2">
-                <div className="space-y-3 pt-3 border-t border-white/5">
+                     <button 
-                {localReplacements.length > 0 && (
-                    <div className="flex justify-center">
-                        <button 
                             onClick={handleAddRegex}
-                            className="flex items-center space-x-1.5 text-xs text-plex-orange hover:text-yellow-400 transition-colors opacity-80 hover:opacity-100"
+                            className={`flex items-center space-x-1 px-2 py-1 rounded text-[10px] font-bold uppercase tracking-wide transition-colors ${localReplacements.length > 0 ? 'text-plex-orange hover:bg-plex-orange/10' : 'hidden'}`}
                         >
-                            <Plus size={12} />
+                            <Plus size={10} />
-                            <span className="font-medium">Add Rule</span>
+                            <span>Add</span>
+                    </button>
+
+                    <div className="flex items-center gap-2 ml-auto">
+                        <button
+                            onClick={handleResetRegex}
+                            disabled={!isRegexDirty}
+                            className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-medium border transition-all
+                            ${isRegexDirty 
+                                ? 'bg-gray-800 border-gray-600 text-gray-300 hover:bg-gray-700 hover:text-white' 
+                                : 'bg-transparent border-transparent text-gray-700 cursor-not-allowed'}`}
+                        >
+                            <RotateCcw size={12} />
+                            <span>Revert</span>
+                        </button>
+                        <button
+                            onClick={handleSaveRegex}
+                            disabled={!isRegexDirty}
+                            className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-bold border transition-all
+                            ${isRegexDirty 
+                                ? 'bg-plex-orange border-plex-orange text-gray-900 hover:bg-yellow-500 shadow-lg shadow-plex-orange/10' 
+                                : 'bg-gray-800/30 border-gray-800/50 text-gray-600 cursor-not-allowed'}`}
+                        >
+                            <Save size={12} />
+                            <span>Save</span>
                         </button>
                     </div>
-                )}
+                </div>
+            </div>
 
-                <div className="grid grid-cols-2 gap-3">
+            {/* Section 3: Scheduled Tasks */}
-                    <button
+            <div className="p-4 bg-gray-900/40 border-b border-white/5 flex-none">
-                        onClick={handleReset}
+                 <div className="flex items-center justify-between mb-3">
-                        disabled={!isDirty}
+                    <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Scheduled Tasks</h3>
-                        className={`flex items-center justify-center space-x-2 py-1.5 rounded-lg text-xs font-medium border transition-all
+                 </div>
-                        ${isDirty 
+
-                            ? 'bg-gray-800 border-gray-600 text-gray-300 hover:bg-gray-700 hover:text-white' 
+                 {/* Tabs */}
-                            : 'bg-transparent border-gray-800 text-gray-600 cursor-not-allowed'}`}
+                 <div className="flex space-x-1 bg-black/30 p-1 rounded-lg mb-4">
+                    {[
+                      { id: ScheduleMode.CRON, label: 'Cron', icon: Repeat },
+                      { id: ScheduleMode.DAILY, label: 'Daily', icon: Clock },
+                      { id: ScheduleMode.WEEKLY, label: 'Weekly', icon: Calendar },
+                    ].map((tab) => (
+                      <button
+                        key={tab.id}
+                        onClick={() => setActiveTab(tab.id)}
+                        className={`flex-1 flex items-center justify-center space-x-2 py-1.5 rounded-md text-xs font-medium transition-all
+                          ${activeTab === tab.id 
+                            ? 'bg-gray-700 text-plex-orange shadow-sm' 
+                            : 'text-gray-400 hover:text-gray-200 hover:bg-white/5'
+                          }`}
+                      >
+                         <tab.icon size={12} />
+                         <span>{tab.label}</span>
+                      </button>
+                    ))}
+                 </div>
+
+                 {/* Tab Content */}
+                 <div className="mb-4 min-h-[50px]">
+                    {activeTab === ScheduleMode.CRON && (
+                      <div className="space-y-2 animate-in fade-in duration-200">
+                         <div className="flex items-center space-x-2">
+                           <span className="text-gray-500 font-mono text-xs">Cron:</span>
+                           <input 
+                             type="text" 
+                             value={localSchedule.cronExpression}
+                             onChange={(e) => handleUpdateSchedule('cronExpression', e.target.value)}
+                             placeholder="0 0 * * *"
+                             className="flex-1 bg-gray-800 border border-gray-700 rounded-md px-2.5 py-1.5 text-xs text-gray-200 font-mono focus:border-plex-orange focus:outline-none focus:ring-1 focus:ring-plex-orange placeholder-gray-600"
+                           />
+                         </div>
+                         <p className="text-[10px] text-gray-500">
+                           Unix-cron format. Leave empty to disable schedule.
+                         </p>
+                      </div>
+                    )}
+
+                    {activeTab === ScheduleMode.DAILY && (
+                       <div className="flex flex-col animate-in fade-in duration-200">
+                          {/* Top Row: Checkbox + Label */}
+                          <div className="flex items-center justify-start space-x-2 mb-2">
+                            <button 
+                                onClick={() => toggleScheduleEnable(ScheduleMode.DAILY)}
+                                className={`transition-colors flex-none ${localSchedule.mode === ScheduleMode.DAILY ? 'text-plex-orange' : 'text-gray-500 hover:text-gray-400'}`}
+                                title={localSchedule.mode === ScheduleMode.DAILY ? "Schedule Enabled" : "Schedule Disabled"}
+                            >
+                                {localSchedule.mode === ScheduleMode.DAILY ? <CheckSquare size={16} /> : <Square size={16} />}
+                            </button>
+                            <label className="text-xs text-gray-400 font-medium">Run daily at:</label>
+                          </div>
+                          
+                          {/* Bottom Row: Centered Native Time Input */}
+                          <div className="flex justify-center mt-2">
+                            <input
+                              type="time"
+                              value={localSchedule.dailyTime}
+                              onChange={(e) => handleUpdateSchedule('dailyTime', e.target.value)}
+                              disabled={localSchedule.mode !== ScheduleMode.DAILY}
+                              className={`bg-gray-800 border border-gray-700 text-white rounded-md px-4 py-2 text-xl font-mono focus:border-plex-orange focus:ring-1 focus:ring-plex-orange focus:outline-none transition-all ${localSchedule.mode !== ScheduleMode.DAILY ? 'opacity-50 cursor-not-allowed' : ''}`}
+                            />
+                          </div>
+                       </div>
+                    )}
+
+                    {activeTab === ScheduleMode.WEEKLY && (
+                       <div className="flex flex-col animate-in fade-in duration-200">
+                          {/* Top Row: Checkbox + Label */}
+                          <div className="flex items-center justify-start space-x-2 mb-2">
+                              <button 
+                                onClick={() => toggleScheduleEnable(ScheduleMode.WEEKLY)}
+                                className={`transition-colors flex-none ${localSchedule.mode === ScheduleMode.WEEKLY ? 'text-plex-orange' : 'text-gray-500 hover:text-gray-400'}`}
+                                title={localSchedule.mode === ScheduleMode.WEEKLY ? "Schedule Enabled" : "Schedule Disabled"}
+                              >
+                                  {localSchedule.mode === ScheduleMode.WEEKLY ? <CheckSquare size={16} /> : <Square size={16} />}
+                              </button>
+                              <label className="text-xs text-gray-400 font-medium">Run on days:</label>
+                          </div>
+
+                          {/* Middle Row: Full Width Capsules */}
+                          <div className={`grid grid-cols-7 w-full transition-opacity duration-200 mb-3 ${localSchedule.mode !== ScheduleMode.WEEKLY ? 'opacity-50 pointer-events-none' : ''}`}>
+                             {WEEK_DAYS.map((day, index) => {
+                               const isSelected = localSchedule.weeklyDays.includes(index);
+                               return (
+                                 <button
+                                   key={index}
+                                   onClick={() => toggleWeekDay(index)}
+                                   className={`h-9 text-xs font-bold border-y border-l last:border-r border-gray-600/50 transition-colors
+                                     first:rounded-l-lg last:rounded-r-lg
+                                     ${isSelected 
+                                       ? 'bg-plex-orange text-gray-900 border-plex-orange z-10' 
+                                       : 'bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-gray-200'
+                                     }
+                                   `}
+                                 >
+                                   {day}
+                                 </button>
+                               )
+                             })}
+                          </div>
+                          
+                          {/* Bottom Row: Centered Native Time Input */}
+                          <div className="flex justify-center mt-1">
+                             <input
+                              type="time"
+                              value={localSchedule.weeklyTime}
+                              onChange={(e) => handleUpdateSchedule('weeklyTime', e.target.value)}
+                              disabled={localSchedule.mode !== ScheduleMode.WEEKLY}
+                              className={`bg-gray-800 border border-gray-700 text-white rounded-md px-4 py-2 text-xl font-mono focus:border-plex-orange focus:ring-1 focus:ring-plex-orange focus:outline-none transition-all ${localSchedule.mode !== ScheduleMode.WEEKLY ? 'opacity-50 cursor-not-allowed' : ''}`}
+                            />
+                          </div>
+                       </div>
+                    )}
+                 </div>
+
+                 {/* Auto Watch Checkbox */}
+                 <div className="flex items-center mb-4 px-1">
+                    <button 
+                      onClick={() => handleUpdateSchedule('autoWatch', !localSchedule.autoWatch)}
+                      className="flex items-center space-x-2 group"
                     >
-                        <RotateCcw size={14} />
+                       {localSchedule.autoWatch ? (
-                        <span>Revert</span>
+                         <CheckSquare size={16} className="text-plex-orange" />
+                       ) : (
+                         <Square size={16} className="text-gray-600 group-hover:text-gray-400" />
+                       )}
+                       <span className={`text-xs ${localSchedule.autoWatch ? 'text-gray-200' : 'text-gray-500 group-hover:text-gray-400'}`}>
+                         Watch for local playlist changes
+                       </span>
                     </button>
-                    <button
+                 </div>
-                        onClick={handleSave}
+
-                        disabled={!isDirty}
+                 {/* Action Buttons (Mirrored from Regex) */}
-                        className={`flex items-center justify-center space-x-2 py-1.5 rounded-lg text-xs font-bold border transition-all
+                 <div className="flex items-center gap-2 justify-end pt-3 border-t border-white/5">
-                        ${isDirty 
+                        <button
-                            ? 'bg-plex-orange border-plex-orange text-gray-900 hover:bg-yellow-500 shadow-lg shadow-plex-orange/10' 
+                            onClick={handleResetSchedule}
-                            : 'bg-gray-800/50 border-gray-800 text-gray-600 cursor-not-allowed'}`}
+                            disabled={!isScheduleDirty}
-                    >
+                            className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-medium border transition-all
-                        <Save size={14} />
+                            ${isScheduleDirty 
-                        <span>Save Changes</span>
+                                ? 'bg-gray-800 border-gray-600 text-gray-300 hover:bg-gray-700 hover:text-white' 
-                    </button>
+                                : 'bg-transparent border-transparent text-gray-700 cursor-not-allowed'}`}
-                </div>
+                        >
-                </div>
+                            <RotateCcw size={12} />
+                            <span>Revert</span>
+                        </button>
+                        <button
+                            onClick={handleSaveScheduleClick}
+                            disabled={!isScheduleDirty}
+                            className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-bold border transition-all
+                            ${isScheduleDirty 
+                                ? 'bg-plex-orange border-plex-orange text-gray-900 hover:bg-yellow-500 shadow-lg shadow-plex-orange/10' 
+                                : 'bg-gray-800/30 border-gray-800/50 text-gray-600 cursor-not-allowed'}`}
+                        >
+                            <Save size={12} />
+                            <span>Save</span>
+                        </button>
+                    </div>
             </div>
         </div>
 
-        {/* Section 3: Sync Now Button */}
+        {/* Section 4: Sync Now Button */}
-        <div className="p-4 bg-gray-950/50 border-t border-white/5">
+        <div className="p-4 bg-gray-950/50 border-t border-white/5 flex-none">
             <button
                 onClick={handleSyncClick}
-                disabled={isLocked || isDirty} // Disable if syncing OR if there are unsaved regex changes
+                disabled={isLocked}
                 className={`w-full py-3 rounded-lg text-sm font-bold flex items-center justify-center gap-2 transition-all shadow-lg
                 ${isLocked 
                     ? 'bg-gray-700/30 text-gray-500 cursor-not-allowed border border-gray-700/50' 
-                    : isDirty 
+                    : isRegexDirty
-                        ? 'bg-gray-800 text-gray-500 cursor-not-allowed border border-gray-700' // Must save rules first
+                        ? 'bg-gray-800 text-gray-500 cursor-not-allowed border border-gray-700'
                         : 'bg-green-600 hover:bg-green-500 text-white border border-green-500 shadow-green-900/20 active:scale-[0.98]'
                 }`}
             >
@@ -340,9 +603,9 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                     </>
                 )}
             </button>
-            {isDirty && (
+            {(isRegexDirty) && (
                 <p className="text-[10px] text-plex-orange text-center mt-2">
-                    Please save or revert regex rules changes before syncing.
+                    Please save regex changes before syncing.
                 </p>
             )}
         </div>
@@ -351,4 +614,4 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
   );
 };
 
-export default StrategySelector;
+export default StrategySelector;

sample-front-end/index.html

@@ -41,13 +41,13 @@
         background: #6b7280; 
       }
 
+      /* Force native date/time pickers to use dark mode scheme */
+      input[type="time"] {
+        color-scheme: dark;
+      }
+      
       /* 
          Symmetrical Diagonal Scroll Animations
-         Pattern width: 40px (20px color + 20px transparent).
-         Diagonal length: 40 * sqrt(2) ≈ 56.57px.
-         
-         Left Side: Anchored to Right (Center). Moves Left (increases right offset).
-         Right Side: Anchored to Left (Center). Moves Right (increases left offset).
       */
       @keyframes scroll-out-left {
         0% { background-position: right 0 top 0; }
@@ -64,7 +64,8 @@
     "lucide-react": "https://aistudiocdn.com/lucide-react@^0.555.0",
     "react/": "https://aistudiocdn.com/react@^19.2.0/",
     "react": "https://aistudiocdn.com/react@^19.2.0",
-    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/"
+    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
+    "react-dom": "https://aistudiocdn.com/react-dom@^19.2.0"
   }
 }
 </script>

sample-front-end/services/api.ts

@@ -1,5 +1,6 @@
 
-import { Playlist, ServerType, ApiResponse, PlexServerConnection, PlexConnectionSettings, PlexLibrary, SyncStrategy, RegexReplacement } from '../types';
+
+import { Playlist, ServerType, ApiResponse, PlexServerConnection, PlexConnectionSettings, PlexLibrary, SyncStrategy, RegexReplacement, ScheduleSettings, ScheduleMode } from '../types';
 import { MOCK_LOCAL_PLAYLISTS, MOCK_CLOUD_PLAYLISTS } from './mockData';
 
 const SIMULATE_DELAY_MS = 800;
@@ -135,6 +136,14 @@ const triggerSync = async (strategy: SyncStrategy, regexRules: RegexReplacement[
   });
 };
 
+// Basic Cron validation helper
+const validateCron = (expression: string): boolean => {
+  const parts = expression.trim().split(/\s+/);
+  if (parts.length !== 5) return false;
+  // A very naive check, real validation is more complex but this fits the mock requirement
+  return true;
+};
+
 export const apiService = {
   getPlaylists: async (serverType: ServerType, signal?: AbortSignal): Promise<ApiResponse<Playlist[]>> => {
     try {
@@ -191,5 +200,22 @@ export const apiService = {
     } catch (error) {
       return { data: null, status: 'error', message: 'Sync failed' };
     }
+  },
+
+  saveScheduleSettings: async (settings: ScheduleSettings): Promise<ApiResponse<null>> => {
+    // Simulate API call
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        // Validation only applies if the mode is CRON and user provided input
+        if (settings.mode === ScheduleMode.CRON && settings.cronExpression.trim() !== '') {
+          if (!validateCron(settings.cronExpression)) {
+            resolve({ data: null, status: 'error', message: 'Invalid Cron expression format' });
+            return;
+          }
+        }
+        
+        resolve({ data: null, status: 'success', message: 'Schedule updated successfully' });
+      }, 500);
+    });
   }
-};
+};

sample-front-end/types.ts

@@ -1,4 +1,5 @@
 
+
 export interface Track {
   id: string;
   title: string;
@@ -40,6 +41,22 @@ export interface RegexReplacement {
   replacement: string;
 }
 
+export enum ScheduleMode {
+  DISABLED = 'DISABLED',
+  CRON = 'CRON',
+  DAILY = 'DAILY',
+  WEEKLY = 'WEEKLY'
+}
+
+export interface ScheduleSettings {
+  mode: ScheduleMode;
+  cronExpression: string;
+  dailyTime: string;
+  weeklyDays: number[]; // 0 = Sunday, 1 = Monday, etc.
+  weeklyTime: string;
+  autoWatch: boolean;
+}
+
 export interface PlexLibrary {
   id: string;
   title: string;
@@ -69,4 +86,4 @@ export interface ApiResponse<T> {
   data: T;
   status: 'success' | 'error';
   message?: string;
-}
+}