feat(mavrochat): add model preference persistence using localStorage

Author: steliosmavro

apps/mavrochat/src/context/ModelContext.tsx

@@ -1,18 +1,44 @@
 'use client';
 
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useState, useEffect } from 'react';
 
 interface ModelContextType {
     model: string;
     setModel: (model: string) => void;
 }
 
 const DEFAULT_MODEL = 'gpt-4o';
+const MODEL_STORAGE_KEY = 'mavrochat-selected-model';
 
 const ModelContext = createContext<ModelContextType | undefined>(undefined);
 
 export function ModelProvider({ children }: { children: React.ReactNode }) {
     const [model, setModel] = useState<string>(DEFAULT_MODEL);
+    const [mounted, setMounted] = useState(false);
+
+    // Load saved model preference on mount
+    useEffect(() => {
+        setMounted(true);
+        try {
+            const savedModel = localStorage.getItem(MODEL_STORAGE_KEY);
+            if (savedModel) {
+                setModel(savedModel);
+            }
+        } catch (error) {
+            console.error('Failed to load saved model:', error);
+        }
+    }, []);
+
+    // Save model preference when it changes (only after mounted)
+    useEffect(() => {
+        if (mounted) {
+            try {
+                localStorage.setItem(MODEL_STORAGE_KEY, model);
+            } catch (error) {
+                console.error('Failed to save model preference:', error);
+            }
+        }
+    }, [model, mounted]);
 
     return (
         <ModelContext.Provider value={{ model, setModel }}>

packages/ui/src/components/navigation/LogoButton.tsx

@@ -3,6 +3,7 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { useTheme } from 'next-themes';
 import { Button } from '../form/Button';
+import { useState, useEffect } from 'react';
 
 export function LogoButton({
     className,
@@ -15,8 +16,18 @@ export function LogoButton({
     darkLogoSrc: string;
     href?: string;
 }) {
-    const { theme } = useTheme();
-    const logoSrc = theme === 'light' ? lightLogoSrc : darkLogoSrc;
+    const { theme, systemTheme } = useTheme();
+    const [mounted, setMounted] = useState(false);
+
+    // Avoid hydration mismatch by only rendering theme-specific content after mount
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    // Use dark logo as default until we know the actual theme
+    const currentTheme = theme === 'system' ? systemTheme : theme;
+    const logoSrc =
+        mounted && currentTheme === 'light' ? lightLogoSrc : darkLogoSrc;
     const isExternal = href.startsWith('http');
 
     return (