refactor: ThemeContext

Author: torfstack

frontend/src/components/StartPage.tsx

@@ -10,7 +10,7 @@ export const StartPage = () => {
                         only be
                         accessed if enough secret shares are collected.
                     </p>
-                    <img className="h-16 w-16 lg:h-32 lg:w-32" src="/favicon.svg"/>
+                    <img alt="synod logo" className="h-16 w-16 lg:h-32 lg:w-32" src="/favicon.svg"/>
                 </div>
             </div>
         </div>

frontend/src/components/ThemeSwitcher.tsx

@@ -1,28 +1,7 @@
-import {useEffect, useState} from "react";
+import {useTheme} from "../contexts/ThemeContext.tsx";
 
 export const ThemeSwitcher = () => {
-    const themes = ["corporate", "business"]
-    const [theme, setTheme] = useState(currentTheme())
-
-    function currentTheme(): string {
-        return document.documentElement.getAttribute("data-theme") ?? "corporate"
-    }
-
-    useEffect(() => {
-        const saved = localStorage.getItem("theme");
-        if (saved) {
-            setTheme(saved);
-            document.documentElement.setAttribute("data-theme", saved);
-        }
-    }, []);
-
-    const toggleTheme = () => {
-        const nextIndex = (themes.indexOf(theme) + 1) % themes.length;
-        const nextTheme = themes[nextIndex];
-        setTheme(nextTheme);
-        document.documentElement.setAttribute("data-theme", nextTheme);
-        localStorage.setItem("theme", nextTheme);
-    }
+    const {theme, switchTheme} = useTheme();
 
     return <div className="dropdown dropdown-end">
         <label className="flex cursor-pointer gap-2">
@@ -44,7 +23,7 @@ export const ThemeSwitcher = () => {
                 type="checkbox"
                 checked={theme == "business"}
                 className="toggle theme-controller"
-                onChange={toggleTheme}
+                onChange={switchTheme}
             />
             <svg
                 xmlns="http://www.w3.org/2000/svg"

frontend/src/components/secrets/SecretModal.tsx

@@ -41,6 +41,8 @@ export const SecretModal: React.FC<SecretModalProps> = ({handleSecret, existingS
         setSecret(existingSecret?.value ?? "")
         setUrl(existingSecret?.url ?? "")
         setTags(existingSecret?.tags ?? [])
+        setTag("")
+        setPasswordVisible(false)
     }, [existingSecret, isOpen]);
 
     async function onSubmit() {
@@ -116,17 +118,15 @@ export const SecretModal: React.FC<SecretModalProps> = ({handleSecret, existingS
                                            setTag(e.target.value)
                                        }}
                                        onKeyDown={(e) => {
-                                           if (e.code == "Space" || e.key == " " || e.code == "Comma" || e.key == ",") {
+                                           if (e.code == "Enter") {
                                                if (tag.length == 0) return
                                                setTags([...tags, tag])
                                                setTag("")
                                            }
                                        }}
                                        disabled={tags.length >= 3} className="grow"/>
                                 <span className="badge badge-neutral badge-xs">&lt;4</span>
-                                <kbd className="kbd kbd-sm">␣</kbd>
-                                /
-                                <kbd className="kbd kbd-sm">,</kbd>
+                                <kbd className="kbd kbd-sm">↵</kbd>
                             </label>
                             <div className="flex flex-col gap-2">
                                 {tags.map((tag) => (

frontend/src/contexts/AuthContext.tsx

@@ -15,19 +15,14 @@ const AuthContext = createContext<AuthContextType | undefined>(undefined);
 export function AuthProvider({children}: { children: React.ReactNode }) {
     const [authStatus, setAuthStatus] = useState<AuthStatus | null>(null);
 
-    const checkAuth = async () => {
-        try {
-            const authStatus = await getAuth();
-            setAuthStatus(authStatus)
-        } catch {
-            setAuthStatus(null);
-        }
+    const checkAuth = () => {
+        getAuth()
+            .then(authStatus => setAuthStatus(authStatus))
+            .catch(() => setAuthStatus(null))
     }
 
     useEffect(() => {
-        (async () => {
-            await checkAuth();
-        })();
+        checkAuth();
     }, []);
 
     useEffect(() => {
@@ -50,9 +45,7 @@ export function AuthProvider({children}: { children: React.ReactNode }) {
     };
 
     const reloadAuth = () => {
-        (async () => {
-            await checkAuth();
-        })();
+        checkAuth();
     }
 
     return (

frontend/src/contexts/ThemeContext.tsx

@@ -0,0 +1,64 @@
+import React, {createContext, useContext, useEffect, useState} from "react";
+
+type Theme = "corporate" | "business"
+
+interface ThemeContextType {
+    theme: Theme;
+    switchTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const ThemeProvider = ({children}: { children: React.ReactNode }) => {
+    const getPreferredTheme = (): Theme => {
+        const stored = localStorage.getItem("theme") as Theme | null;
+        if (stored) return stored;
+
+        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+            return "business";
+        }
+
+        return "corporate";
+    };
+
+    const [theme, setTheme] = useState<Theme>(getPreferredTheme);
+
+    useEffect(() => {
+        document.documentElement.setAttribute("data-theme", theme);
+        localStorage.setItem("theme", theme);
+    }, [theme]);
+
+    useEffect(() => {
+        const media = window.matchMedia("(prefers-color-scheme: dark)");
+        const handler = (e: MediaQueryListEvent) => {
+            if (!localStorage.getItem("theme")) {
+                setTheme(e.matches ? "business" : "corporate");
+            }
+        };
+        media.addEventListener("change", handler);
+        return () => media.removeEventListener("change", handler);
+    }, []);
+
+    const switchTheme = () => {
+        setTheme(currentTheme => {
+            switch (currentTheme) {
+                case "corporate":
+                    return "business"
+                case "business":
+                    return "corporate"
+            }
+        })
+    }
+
+    return (
+        <ThemeContext.Provider value={{theme, switchTheme}}>
+            {children}
+        </ThemeContext.Provider>
+    );
+};
+
+export const useTheme = () => {
+    const ctx = useContext(ThemeContext);
+    if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
+    return ctx;
+};

frontend/src/main.tsx

@@ -3,11 +3,14 @@ import {createRoot} from 'react-dom/client'
 import './index.css'
 import {App} from './App.tsx'
 import {AuthProvider} from "./contexts/AuthContext.tsx";
+import {ThemeProvider} from "./contexts/ThemeContext.tsx";
 
 createRoot(document.getElementById('root')!).render(
     <StrictMode>
         <AuthProvider>
-            <App/>
+            <ThemeProvider>
+                <App/>
+            </ThemeProvider>
         </AuthProvider>
     </StrictMode>
 )