Squashed 'sample-front-end/' changes from 9f02555..0e20813

0e20813 feat: Add eye icon for visibility toggles

git-subtree-dir: sample-front-end
git-subtree-split: 0e208135b924170bcd757c693265a5cc1b620ac3

App.tsx

@@ -17,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, Clock } from 'lucide-react';
+import { ArrowLeftRight, ShieldCheck, X, Server, ServerOff, Clock, Eye, EyeOff } from 'lucide-react';
 
 interface Toast {
   id: number;
@@ -383,12 +383,24 @@ const App: React.FC = () => {
 
   // Helper: Calculate Next Run Info
   const getScheduleDisplayInfo = (settings: ScheduleSettings) => {
+    const result = { 
+        label: 'Schedule', 
+        value: 'Not configured', 
+        active: false,
+        autoWatch: settings.autoWatch 
+    };
+
     if (settings.mode === ScheduleMode.DISABLED) {
-      return { label: 'Auto-Sync', value: 'Disabled', active: false };
+      result.label = 'Auto-Sync';
+      result.value = 'Disabled';
+      return result;
     }
 
     if (settings.mode === ScheduleMode.CRON) {
-      return { label: 'Cron Schedule', value: settings.cronExpression || 'Pending...', active: true };
+      result.label = 'Cron Schedule';
+      result.value = settings.cronExpression || 'Pending...';
+      result.active = true;
+      return result;
     }
 
     const now = new Date();
@@ -415,7 +427,11 @@ const App: React.FC = () => {
        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 };
+       if (activeDays.length === 0) {
+           result.label = 'Weekly Schedule';
+           result.value = 'No days selected';
+           return result;
+       }
 
        // Check rest of today
        if (activeDays.includes(now.getDay())) {
@@ -451,10 +467,13 @@ const App: React.FC = () => {
        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 };
+       result.label = `${settings.mode === ScheduleMode.DAILY ? 'Daily' : 'Weekly'} Schedule`;
+       result.value = `${dateStr} at ${timeStr}`;
+       result.active = true;
+       return result;
     }
 
-    return { label: 'Schedule', value: 'Not configured', active: false };
+    return result;
   };
 
   const scheduleInfo = getScheduleDisplayInfo(scheduleSettings);
@@ -541,9 +560,22 @@ const App: React.FC = () => {
                      <span className="text-[10px] uppercase font-bold text-gray-500 tracking-wider">
                        {scheduleInfo.label}
                      </span>
-                     <div className={`text-xs font-mono flex items-center gap-1.5 ${scheduleInfo.active ? 'text-plex-orange' : 'text-gray-600'}`}>
+                     <div className="text-xs font-mono flex items-center gap-1.5">
-                       {scheduleInfo.active && <Clock size={12} />}
+                       {/* Schedule Part */}
-                       <span>{scheduleInfo.value}</span>
+                       <div className={`flex items-center gap-1.5 ${scheduleInfo.active ? 'text-plex-orange' : 'text-gray-600'}`}>
+                          {scheduleInfo.active && <Clock size={12} />}
+                          <span>{scheduleInfo.value}</span>
+                       </div>
+
+                       {/* Watch Part */}
+                       <span className="text-gray-700 mx-0.5">|</span>
+                       <div 
+                         className={`flex items-center gap-1 ${scheduleInfo.autoWatch ? 'text-plex-orange' : 'text-gray-600'}`} 
+                         title={scheduleInfo.autoWatch ? "Local Playlist Monitoring Enabled" : "Local Playlist Monitoring Disabled"}
+                       >
+                           {scheduleInfo.autoWatch ? <Eye size={12} /> : <EyeOff size={12} />}
+                           <span className="text-[10px] font-sans font-bold">WATCH</span>
+                       </div>
                      </div>
                   </div>
 
@@ -669,4 +701,4 @@ const App: React.FC = () => {
   );
 };
 
-export default App;
+export default App;