fix(ui): add hydration guards to settings and grid pages to fix error #418

src/app/(dashboard)/settings/page.tsx

@@ -59,6 +59,8 @@ export default function SettingsPage() {
     const [selectedModel, setSelectedModel] = useState("google/gemini-flash-1.5");
     const [modelsStatus, setModelsStatus] = useState<"idle" | "loading" | "ok" | "error">("idle");
 
+    const [isMounted, setIsMounted] = useState(false);
+
     const {
         host, setHost,
         port, setPort,
@@ -70,10 +72,27 @@ export default function SettingsPage() {
     } = useDbSettingsStore();
 
     useEffect(() => {
-        // Optionnel : On pourrait charger la config serveur au montage si on veut écraser le localStorage
-        // Pour l'instant on laisse le localStorage faire son travail, mais on offre une fonction de reset
+        setIsMounted(true);
     }, []);
 
+    const fetchModels = useCallback(async (key: string) => {
+        if (!key.trim()) return;
+        setModelsStatus("loading");
+        try {
+            const res = await fetch("/api/openrouter/models", { headers: { "x-openrouter-key": key } });
+            if (!res.ok) throw new Error();
+            const data = await res.json();
+            setModels(data.models ?? []);
+            setModelsStatus("ok");
+        } catch {
+            setModelsStatus("error");
+        }
+    }, []);
+
+    if (!isMounted) {
+        return null;
+    }
+
     const reloadFromServer = async () => {
         const config = await getSavedDatabaseConfig();
         if (config && config.url) {
@@ -92,20 +111,6 @@ export default function SettingsPage() {
         }
     };
 
-    const fetchModels = useCallback(async (key: string) => {
-        if (!key.trim()) return;
-        setModelsStatus("loading");
-        try {
-            const res = await fetch("/api/openrouter/models", { headers: { "x-openrouter-key": key } });
-            if (!res.ok) throw new Error();
-            const data = await res.json();
-            setModels(data.models ?? []);
-            setModelsStatus("ok");
-        } catch {
-            setModelsStatus("error");
-        }
-    }, []);
-
     const testDb = async () => {
         setDbStatus("testing");
         setDbError(null);