fix(dashboard): honor sidebar theme preference on all routes (#738)

* fix(dashboard): honor sidebar theme preference on all routes

Stop forcing light mode on public org-site pages. Use one ModeWatcher
everywhere so light/dark/system follows the sidebar footer toggle.

- Remove isPublicOrgSitePage forced-light routing (#716 behavior)
- Fix theme toggle active state (light/dark/system mutually exclusive)

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(dashboard): apply sidebar color mode instead of browser default

ModeWatcher defaulted to system, so prefers-color-scheme won unless
localStorage happened to match. AppModeWatcher now:

- Defaults new visitors to light (not system)
- Injects FOUC script with the same default
- Only tracks OS appearance when the user picks System in the sidebar
- Re-syncs explicit light/dark from mode-watcher localStorage on load

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

apps/dashboard/src/lib/utils/constants/routes.ts

@@ -20,13 +20,6 @@ export const ROUTE = {
   VERIFY_EMAIL_ERROR: '/verify-email-error'
 };
 
-export const PUBLIC_ORG_SITE_LIGHT_MODE_ROUTES = [
-  `^${ROUTE.HOME}$`,
-  `^${ROUTE.COURSES}/?$`,
-  `^${ROUTE.COURSE}/[^/]+/?$`,
-  `^${ROUTE.COURSE}/[^/]+/enroll/?$`
-] as const;
-
 export const PUBLIC_ROUTES = [
   `^${ROUTE.HOME}$`,
   ROUTE.LOGIN,

apps/dashboard/src/lib/utils/functions/color-mode.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+
+import { MODE_STORAGE_KEY, readStoredColorMode } from './color-mode';
+
+function createMemoryStorage(initial: Record<string, string> = {}): Storage {
+  const store = new Map(Object.entries(initial));
+
+  return {
+    get length() {
+      return store.size;
+    },
+    clear() {
+      store.clear();
+    },
+    getItem(key: string) {
+      return store.has(key) ? store.get(key)! : null;
+    },
+    key(index: number) {
+      return [...store.keys()][index] ?? null;
+    },
+    removeItem(key: string) {
+      store.delete(key);
+    },
+    setItem(key: string, value: string) {
+      store.set(key, value);
+    }
+  };
+}
+
+describe('readStoredColorMode', () => {
+  it('defaults to light when nothing is stored', () => {
+    expect(readStoredColorMode(createMemoryStorage())).toBe('light');
+  });
+
+  it('returns the stored sidebar preference', () => {
+    const storage = createMemoryStorage({ [MODE_STORAGE_KEY]: 'dark' });
+
+    expect(readStoredColorMode(storage)).toBe('dark');
+  });
+});

apps/dashboard/src/lib/utils/functions/color-mode.ts

@@ -0,0 +1,14 @@
+export type ColorModePreference = 'light' | 'dark' | 'system';
+
+export const MODE_STORAGE_KEY = 'mode-watcher-mode';
+
+export function isColorModePreference(value: string | null | undefined): value is ColorModePreference {
+  return value === 'light' || value === 'dark' || value === 'system';
+}
+
+/** Read the sidebar theme preference from mode-watcher storage. */
+export function readStoredColorMode(storage: Pick<Storage, 'getItem'> = localStorage): ColorModePreference {
+  const stored = storage.getItem(MODE_STORAGE_KEY);
+
+  return isColorModePreference(stored) ? stored : 'light';
+}

apps/dashboard/src/lib/utils/functions/color-scheme.test.ts

@@ -1,25 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { isPublicOrgSitePage } from './color-scheme';
-
-describe('isPublicOrgSitePage', () => {
-  it('returns false for non-org-site routes', () => {
-    expect(isPublicOrgSitePage(false, '/lms')).toBe(false);
-    expect(isPublicOrgSitePage(false, '/courses/abc')).toBe(false);
-  });
-
-  it('returns true for public org-site pages', () => {
-    expect(isPublicOrgSitePage(true, '/')).toBe(true);
-    expect(isPublicOrgSitePage(true, '/courses')).toBe(true);
-    expect(isPublicOrgSitePage(true, '/courses/')).toBe(true);
-    expect(isPublicOrgSitePage(true, '/course/my-course')).toBe(true);
-    expect(isPublicOrgSitePage(true, '/course/my-course/enroll')).toBe(true);
-  });
-
-  it('returns false for authenticated org-site app routes', () => {
-    expect(isPublicOrgSitePage(true, '/lms')).toBe(false);
-    expect(isPublicOrgSitePage(true, '/lms/settings')).toBe(false);
-    expect(isPublicOrgSitePage(true, '/courses/abc')).toBe(false);
-    expect(isPublicOrgSitePage(true, '/courses/abc/newsfeed')).toBe(false);
-    expect(isPublicOrgSitePage(true, '/course/my-course/lesson/intro')).toBe(false);
-  });
-});

apps/dashboard/src/lib/utils/functions/color-scheme.ts

@@ -1,23 +0,0 @@
-import { PUBLIC_ORG_SITE_LIGHT_MODE_ROUTES } from '$lib/utils/constants/routes';
-
-function normalizePathname(pathname: string): string {
-  const pathOnly = pathname.split('?')[0] ?? '/';
-  if (pathOnly === '/') {
-    return '/';
-  }
-
-  return pathOnly.replace(/\/+$/, '') || '/';
-}
-
-/**
- * Public org-site pages (landing, catalog, course landing, enroll) always use light mode.
- * Authenticated areas on the same tenant host (e.g. /lms, /courses/:id) keep the theme selector.
- */
-export function isPublicOrgSitePage(isOrgSite: boolean, pathname: string): boolean {
-  if (!isOrgSite) {
-    return false;
-  }
-
-  const normalizedPath = normalizePathname(pathname);
-  return PUBLIC_ORG_SITE_LIGHT_MODE_ROUTES.some((pattern) => new RegExp(pattern).test(normalizedPath));
-}