first commit

src/components/ThemeController.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect } from "react";
+import {
+  addPreferencesListener,
+  applyTheme,
+  getStoredTheme,
+  initializeSessionTimeoutWatcher,
+} from "@/lib/preferences";
+
+export default function ThemeController() {
+  useEffect(() => {
+    const syncTheme = () => applyTheme(getStoredTheme());
+
+    syncTheme();
+
+    const media = window.matchMedia("(prefers-color-scheme: light)");
+    const onThemeMediaChange = () => {
+      if (getStoredTheme() === "system") {
+        syncTheme();
+      }
+    };
+
+    media.addEventListener("change", onThemeMediaChange);
+    window.addEventListener("pageshow", syncTheme);
+    document.addEventListener("visibilitychange", syncTheme);
+    const removePreferencesListener = addPreferencesListener(syncTheme);
+    const stopSessionWatcher = initializeSessionTimeoutWatcher();
+
+    return () => {
+      media.removeEventListener("change", onThemeMediaChange);
+      window.removeEventListener("pageshow", syncTheme);
+      document.removeEventListener("visibilitychange", syncTheme);
+      removePreferencesListener();
+      stopSessionWatcher();
+    };
+  }, []);
+
+  return null;
+}