Handle timer scheduling edge cases and offline fallbacks

public/obs-overlay.html

@@ -37,6 +37,13 @@
       }
     });
 
+    setInterval(() => {
+      if (active && typeof active.remaining === 'number') {
+        active.remaining = Math.max(0, active.remaining - 1000);
+        render();
+      }
+    }, 1000);
+
     function render() {
       const el = document.getElementById('timer');
       if (!active || active.remaining == null) {

public/service-worker.js

@@ -10,6 +10,11 @@ self.addEventListener('install', (event) => {
 self.addEventListener('fetch', (event) => {
   if (event.request.method !== 'GET') return;
   event.respondWith(
-    fetch(event.request).catch(() => caches.match(event.request).then((response) => response || caches.match(OFFLINE_URL)))
+    fetch(event.request).catch(() => {
+      if (event.request.mode === 'navigate') {
+        return caches.match(OFFLINE_URL);
+      }
+      return caches.match(event.request);
+    })
   );
 });

src/components/TimerImportExport.tsx

@@ -32,6 +32,9 @@ const TimerImportExport: React.FC = () => {
         const format = ext === 'csv' ? 'csv' : 'json';
         const timers = importTimers(text, format);
         dispatch({ type: 'setAll', timers });
+        import('../services/timerSync').then(({ saveTimer }) => {
+          timers.forEach((tmr) => saveTimer(tmr));
+        });
       } catch (err) {
         console.error(err);
         alert(t('timerList.importError'));

src/components/TimerList.tsx

@@ -13,10 +13,10 @@ const TimerList: React.FC = () => {
 
   return (
     <div>
-      {state.timers.map((t) => (
-        <div key={t.id}>
-          <Timer config={t} />
-          <button onClick={() => dispatch({ type: 'remove', id: t.id })}>
+      {state.timers.map((timer) => (
+        <div key={timer.id}>
+          <Timer config={timer} />
+          <button onClick={() => dispatch({ type: 'remove', id: timer.id })}>
             {t('timerList.remove')}
           </button>
         </div>

src/context/AuthContext.tsx

@@ -25,12 +25,18 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     const unsubscribe = auth.onAuthStateChanged(async (u) => {
       setUser(u);
       if (u) {
-        const r = await getUserRole(u);
-        setRole(r);
+        try {
+          const r = await getUserRole(u);
+          setRole(r);
+        } catch {
+          setRole(null);
+        } finally {
+          setLoading(false);
+        }
       } else {
         setRole(null);
+        setLoading(false);
       }
-      setLoading(false);
     });
     return unsubscribe;
   }, []);

src/context/MessagesContext.tsx

@@ -46,10 +46,13 @@ export const MessagesProvider: React.FC<{ children: React.ReactNode }> = ({ chil
 
   useEffect(() => {
     let unsub: (() => void) | undefined;
+    let isMounted = true;
     import('../services/messageSync').then(({ listenMessage }) => {
+      if (!isMounted) return;
       unsub = listenMessage((msg) => dispatch({ type: 'set', message: msg }));
     });
     return () => {
+      isMounted = false;
       if (unsub) unsub();
     };
   }, []);

src/context/TimersContext.tsx

@@ -86,12 +86,15 @@ export const TimersProvider: React.FC<{ children: React.ReactNode }> = ({ childr
   // Listen to remote updates
   React.useEffect(() => {
     let unsubscribe: (() => void) | undefined;
+    let isMounted = true;
     import('../services/timerSync').then(({ listenTimers }) => {
+      if (!isMounted) return;
       unsubscribe = listenTimers((timers) =>
         localDispatch({ type: 'setAll', timers })
       );
     });
     return () => {
+      isMounted = false;
       if (unsubscribe) unsubscribe();
     };
   }, []);

src/hooks/useTimer.ts

@@ -13,7 +13,8 @@ export const useTimer = (
   const storageKey = `timer-progress-${id}`;
   const [elapsed, setElapsed] = useState(0);
   const [running, setRunning] = useState(false);
-  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const autoStarted = useRef(false);
 
   // Load persisted progress
   useEffect(() => {
@@ -49,21 +50,30 @@ export const useTimer = (
     }
   }, [elapsed, running, storageKey]);
 
+  // reset auto-start flag if schedule changes
+  useEffect(() => {
+    autoStarted.current = false;
+  }, [startAt]);
+
   // start the timer at a scheduled time if provided
   useEffect(() => {
-    if (startAt === undefined || running) return;
+    if (startAt === undefined || running || autoStarted.current) return;
     const now = warpedNow();
     const startTime = startAt + getSyncDelay();
     if (startTime <= now) {
       setRunning(true);
+      autoStarted.current = true;
     } else {
-      const timeout = setTimeout(() => setRunning(true), startTime - now);
+      const timeout = setTimeout(() => {
+        setRunning(true);
+        autoStarted.current = true;
+      }, startTime - now);
       return () => clearTimeout(timeout);
     }
   }, [startAt, running]);
 
   useEffect(() => {
-    if (!running || kind === 'clock') return;
+    if (!running && kind !== 'clock') return;
     intervalRef.current = setInterval(() => {
       setElapsed((e) => e + 1000);
     }, 1000);

src/services/timerSync.ts

@@ -14,7 +14,10 @@ export function listenTimers(callback: (timers: TimerConfig[]) => void) {
 // Add or update a timer document
 export function saveTimer(timer: TimerConfig) {
   const docRef = doc(db, 'timers', timer.id);
-  return setDoc(docRef, timer);
+  const data = Object.fromEntries(
+    Object.entries(timer).filter(([, v]) => v !== undefined)
+  ) as TimerConfig;
+  return setDoc(docRef, data);
 }
 
 // Remove a timer by id