@checkmate-monitor/theme-frontend 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# @checkmate-monitor/theme-frontend
+
+## 0.1.0
+
+### Minor Changes
+
+- d673ab4: Add theme persistence for non-logged-in users via local storage
+
+  - Added `NavbarThemeToggle` component that shows a Sun/Moon button in the navbar for non-logged-in users
+  - Added `ThemeSynchronizer` component that loads theme from backend for logged-in users on page load
+  - Theme is now applied immediately on page load for logged-in users (no need to open user menu first)
+  - Non-logged-in users can now toggle theme, which persists in local storage
+  - Logged-in user's backend-saved theme takes precedence over local storage
+
+### Patch Changes
+
+- Updated dependencies [eff5b4e]
+- Updated dependencies [ffc28f6]
+- Updated dependencies [32f2535]
+- Updated dependencies [b354ab3]
+  - @checkmate-monitor/ui@0.1.0
+  - @checkmate-monitor/common@0.1.0
+  - @checkmate-monitor/auth-frontend@0.1.0
+  - @checkmate-monitor/frontend-api@0.0.2
+  - @checkmate-monitor/theme-common@0.0.2

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@checkmate-monitor/theme-frontend",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "src/index.tsx",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "bun run lint:code",
+    "lint:code": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@checkmate-monitor/theme-common": "workspace:*",
+    "@checkmate-monitor/frontend-api": "workspace:*",
+    "@checkmate-monitor/auth-frontend": "workspace:*",
+    "@checkmate-monitor/common": "workspace:*",
+    "@checkmate-monitor/ui": "workspace:*",
+    "react": "^18.2.0",
+    "lucide-react": "^0.344.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react": "^18.2.0",
+    "@checkmate-monitor/tsconfig": "workspace:*",
+    "@checkmate-monitor/scripts": "workspace:*"
+  }
+}

package/src/components/NavbarThemeToggle.tsx

@@ -0,0 +1,47 @@
+import { Moon, Sun } from "lucide-react";
+import { useApi } from "@checkmate-monitor/frontend-api";
+import { authApiRef } from "@checkmate-monitor/auth-frontend/api";
+import { Button, useTheme } from "@checkmate-monitor/ui";
+
+/**
+ * Navbar theme toggle button for non-logged-in users.
+ *
+ * Shows a Sun/Moon icon button that toggles between light and dark themes.
+ * Only renders when user is NOT logged in (logged-in users use the toggle in UserMenu).
+ *
+ * Theme changes are saved to local storage via ThemeProvider.
+ */
+export const NavbarThemeToggle = () => {
+  const { theme, setTheme } = useTheme();
+  const authApi = useApi(authApiRef);
+  const { data: session, isPending } = authApi.useSession();
+
+  // Don't render while loading session
+  if (isPending) {
+    return;
+  }
+
+  // Don't render for logged-in users (they use UserMenu toggle)
+  if (session?.user) {
+    return;
+  }
+
+  const isDark = theme === "dark";
+
+  const handleToggle = () => {
+    const newTheme = isDark ? "light" : "dark";
+    setTheme(newTheme);
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={handleToggle}
+      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+      className="rounded-full"
+    >
+      {isDark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+    </Button>
+  );
+};

package/src/components/ThemeSynchronizer.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useRef } from "react";
+import { useApi, rpcApiRef } from "@checkmate-monitor/frontend-api";
+import { authApiRef } from "@checkmate-monitor/auth-frontend/api";
+import { useTheme } from "@checkmate-monitor/ui";
+import { ThemeApi } from "@checkmate-monitor/theme-common";
+
+/**
+ * Headless component that synchronizes theme on app initialization.
+ *
+ * - For logged-in users: fetches theme from backend and applies it
+ * - For non-logged-in users: theme is already read from local storage by ThemeProvider
+ * - Also syncs backend theme to local storage for continuity when logging out
+ *
+ * Must be rendered early in the app (e.g., via NavbarSlot) to ensure theme
+ * is applied before the user sees the page.
+ */
+export const ThemeSynchronizer = () => {
+  const { setTheme } = useTheme();
+  const authApi = useApi(authApiRef);
+  const rpcApi = useApi(rpcApiRef);
+  const themeClient = rpcApi.forPlugin(ThemeApi);
+  const { data: session, isPending } = authApi.useSession();
+
+  // Track if we've already synced for this session to avoid repeated API calls
+  const hasSyncedRef = useRef(false);
+  const lastUserIdRef = useRef<string | undefined>(undefined);
+
+  useEffect(() => {
+    // Wait for session to load
+    if (isPending) {
+      return;
+    }
+
+    const currentUserId = session?.user?.id ?? undefined;
+
+    // Reset sync state when user changes (login/logout)
+    if (currentUserId !== lastUserIdRef.current) {
+      hasSyncedRef.current = false;
+      lastUserIdRef.current = currentUserId;
+    }
+
+    // Only sync once per session
+    if (hasSyncedRef.current) {
+      return;
+    }
+
+    // For logged-in users, fetch theme from backend
+    if (session?.user) {
+      themeClient
+        .getTheme()
+        .then(({ theme }) => {
+          setTheme(theme);
+          hasSyncedRef.current = true;
+        })
+        .catch((error) => {
+          console.error("Failed to sync theme from backend:", error);
+          hasSyncedRef.current = true; // Still mark as synced to prevent retry loops
+        });
+    } else {
+      // For non-logged-in users, local storage theme is already applied
+      // by ThemeProvider, so nothing to do
+      hasSyncedRef.current = true;
+    }
+  }, [session, isPending, setTheme, themeClient]);
+
+  // Headless component - renders nothing
+  return <></>;
+};

package/src/components/ThemeToggleMenuItem.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+import { Toggle, useTheme, useToast } from "@checkmate-monitor/ui";
+import { useApi, rpcApiRef } from "@checkmate-monitor/frontend-api";
+import { ThemeApi } from "@checkmate-monitor/theme-common";
+
+/**
+ * Theme toggle menu item for logged-in users (displayed in UserMenu).
+ *
+ * Saves theme to both backend (for persistence across devices) and
+ * local storage (for continuity when logging out).
+ *
+ * Theme initialization is handled by ThemeSynchronizer component.
+ */
+export const ThemeToggleMenuItem = () => {
+  const { theme, setTheme } = useTheme();
+  const rpcApi = useApi(rpcApiRef);
+  const themeClient = rpcApi.forPlugin(ThemeApi);
+
+  const [saving, setSaving] = useState(false);
+  const [isDark, setIsDark] = useState(theme === "dark");
+  const toast = useToast();
+
+  // Update local state when theme changes (e.g., from ThemeSynchronizer)
+  useEffect(() => {
+    setIsDark(theme === "dark");
+  }, [theme]);
+
+  const handleToggle = async (checked: boolean) => {
+    const newTheme = checked ? "dark" : "light";
+
+    // Update UI immediately
+    setIsDark(checked);
+    setTheme(newTheme); // Also updates local storage via ThemeProvider
+
+    // Save to backend
+    setSaving(true);
+    try {
+      await themeClient.setTheme({ theme: newTheme });
+    } catch (error) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : "Failed to save theme preference";
+      toast.error(message);
+      console.error("Failed to save theme preference:", error);
+      // Revert on error
+      setIsDark(!checked);
+      setTheme(checked ? "light" : "dark");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-between w-full px-4 py-2 text-sm text-popover-foreground">
+      <div className="flex items-center gap-2">
+        {isDark ? <Moon className="h-4 w-4" /> : <Sun className="h-4 w-4" />}
+        <span>Dark Mode</span>
+      </div>
+      <Toggle
+        checked={isDark}
+        onCheckedChange={handleToggle}
+        disabled={saving}
+        aria-label="Toggle dark mode"
+      />
+    </div>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,34 @@
+import {
+  createFrontendPlugin,
+  NavbarSlot,
+  UserMenuItemsBottomSlot,
+} from "@checkmate-monitor/frontend-api";
+import { pluginMetadata } from "@checkmate-monitor/theme-common";
+import { ThemeToggleMenuItem } from "./components/ThemeToggleMenuItem";
+import { ThemeSynchronizer } from "./components/ThemeSynchronizer";
+import { NavbarThemeToggle } from "./components/NavbarThemeToggle";
+
+export const themePlugin = createFrontendPlugin({
+  metadata: pluginMetadata,
+  routes: [],
+  extensions: [
+    // Theme toggle in user menu (for logged-in users)
+    {
+      id: "theme.user-menu.toggle",
+      slot: UserMenuItemsBottomSlot,
+      component: ThemeToggleMenuItem,
+    },
+    // Theme synchronizer - headless component that syncs theme from backend on load
+    {
+      id: "theme.navbar.synchronizer",
+      slot: NavbarSlot,
+      component: ThemeSynchronizer,
+    },
+    // Theme toggle button in navbar (for non-logged-in users)
+    {
+      id: "theme.navbar.toggle",
+      slot: NavbarSlot,
+      component: NavbarThemeToggle,
+    },
+  ],
+});

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@checkmate-monitor/tsconfig/frontend.json",
+  "include": [
+    "src"
+  ]
+}