chore: build

frontend-prep/src/context/ThemeContext.tsx

@@ -1,5 +1,6 @@
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
 import type { ReactNode } from "react";
+import { getPublicSettings } from "../api/api";
 
 type Theme = "dark" | "light";
 
@@ -13,18 +14,103 @@ const ThemeContext = createContext<ThemeContextValue>({
     toggleTheme: () => {},
 });
 
+const LS_COLORS_KEY = "client_colors";
+
+function hexToRgba(hex: string, alpha: number): string {
+    const h = hex.replace("#", "");
+    const r = parseInt(h.substring(0, 2), 16);
+    const g = parseInt(h.substring(2, 4), 16);
+    const b = parseInt(h.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+type ColorSettings = {
+    client_color_primary: string;
+    client_color_secondary: string;
+    client_color_success: string;
+    client_color_danger: string;
+    client_color_warning: string;
+    client_title_gradient_from: string;
+    client_title_gradient_to: string;
+};
+
+function applyClientColors(s: ColorSettings) {
+    const root = document.documentElement;
+
+    if (s.client_color_primary) {
+        const p = s.client_color_primary;
+        root.style.setProperty("--primary", p);
+        root.style.setProperty("--primary-soft", hexToRgba(p, 0.12));
+        root.style.setProperty("--primary-glow", hexToRgba(p, 0.25));
+    }
+    if (s.client_color_secondary) {
+        root.style.setProperty("--cyan", s.client_color_secondary);
+        root.style.setProperty("--cyan-soft", hexToRgba(s.client_color_secondary, 0.1));
+    }
+    if (s.client_color_danger) {
+        root.style.setProperty("--red", s.client_color_danger);
+    }
+    if (s.client_title_gradient_from) {
+        root.style.setProperty("--title-gradient-from", s.client_title_gradient_from);
+    }
+    if (s.client_title_gradient_to) {
+        root.style.setProperty("--title-gradient-to", s.client_title_gradient_to);
+    }
+}
+
+function saveColorsToStorage(s: ColorSettings) {
+    try {
+        localStorage.setItem(LS_COLORS_KEY, JSON.stringify(s));
+    } catch { /* ignore */ }
+}
+
+function loadColorsFromStorage(): ColorSettings | null {
+    try {
+        const raw = localStorage.getItem(LS_COLORS_KEY);
+        if (raw) return JSON.parse(raw) as ColorSettings;
+    } catch { /* ignore */ }
+    return null;
+}
+
 export function ThemeProvider({ children }: { children: ReactNode }) {
     const [theme, setTheme] = useState<Theme>(() => {
         const stored = localStorage.getItem("theme");
         if (stored === "light" || stored === "dark") return stored;
         return "dark";
     });
+    const lastSettings = useRef<ColorSettings | null>(null);
+
+    // Appliquer les couleurs sauvegardées immédiatement (avant l'appel API)
+    useEffect(() => {
+        const cached = loadColorsFromStorage();
+        if (cached) {
+            lastSettings.current = cached;
+            applyClientColors(cached);
+        }
+    }, []);
 
     useEffect(() => {
         document.documentElement.setAttribute("data-theme", theme);
         localStorage.setItem("theme", theme);
     }, [theme]);
 
+    useEffect(() => {
+        const fetchColors = async () => {
+            try {
+                const settings = await getPublicSettings();
+                lastSettings.current = settings;
+                saveColorsToStorage(settings);
+                applyClientColors(settings);
+            } catch { /* ignore */ }
+        };
+        fetchColors();
+        const onVisibility = () => {
+            if (document.visibilityState === "visible") fetchColors();
+        };
+        document.addEventListener("visibilitychange", onVisibility);
+        return () => document.removeEventListener("visibilitychange", onVisibility);
+    }, []);
+
     const toggleTheme = () => {
         setTheme((prev) => (prev === "dark" ? "light" : "dark"));
     };