fix: resolve React hydration mismatch in ThemeToggle

The ThemeToggle component was causing hydration errors because the server
and client rendered different icons (Sun/Moon) based on the theme state.

Changes:
- Render a placeholder button until component is mounted
- Only render the actual theme icon after client-side hydration
- This ensures server and client HTML match during initial render

Fixes console error: 'Expected server HTML to contain a matching <circle> in <svg>'

frontend/components/web/ThemeToggle.tsx

@@ -11,6 +11,19 @@ export default function ThemeToggle() {
 
   useEffect(() => setMounted(true), []);
 
+  if (!mounted) {
+    return (
+      <Button
+        variant="ghost"
+        size="icon"
+        aria-label="Toggle theme"
+        disabled
+      >
+        <span className="h-5 w-5" />
+      </Button>
+    );
+  }
+
   const isDark = resolvedTheme === "dark";
   const toggle = () => setTheme(isDark ? "light" : "dark");
 
@@ -20,7 +33,6 @@ export default function ThemeToggle() {
       size="icon"
       aria-label="Toggle theme"
       onClick={toggle}
-      disabled={!mounted}
     >
       {isDark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
       <span className="sr-only">Toggle theme</span>