feat: add loacal file watcher statement

frontend/App.tsx

@@ -18,7 +18,7 @@ import {
 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;
@@ -487,8 +487,17 @@ const App: React.FC = () => {
   const isConnected = cloudServerInfo?.isConnected;
 
   const getScheduleDisplayInfo = () => {
+    const result = { 
+        label: 'Schedule', 
+        value: 'Not configured', 
+        active: false,
+        autoWatch: scheduleSettings.autoWatch 
+    };
+
     if (scheduleSettings.mode === ScheduleMode.DISABLED) {
-      return { label: 'Auto-Sync', value: 'Disabled', active: false };
+      result.label = 'Auto-Sync';
+      result.value = 'Disabled';
+      return result;
     }
     
     let label = 'Schedule';
@@ -496,11 +505,10 @@ const App: React.FC = () => {
     else if (scheduleSettings.mode === ScheduleMode.DAILY) label = 'Daily Schedule';
     else if (scheduleSettings.mode === ScheduleMode.WEEKLY) label = 'Weekly Schedule';
 
-    return { 
+    result.label = label;
-      label, 
+    result.value = nextRunTime ? `Next: ${nextRunTime}` : 'Calculating...';
-      value: nextRunTime ? `Next: ${nextRunTime}` : 'Calculating...', 
+    result.active = true;
-      active: true 
+    return result;
-    };
   };
 
   const scheduleInfo = getScheduleDisplayInfo();
@@ -583,9 +591,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>