added liquid glass theme

src/pages/SettingsPage.tsx

@@ -54,8 +54,8 @@ export default function SettingsPage() {
   const { user, userId, mongoUser, signOut, loading, refreshMongoUser } = useAuth()
   // const [passcodeEnabled, setPasscodeEnabled] = useState(false) // Passcode lock — disabled for now
   // const [faceIdEnabled, setFaceIdEnabled] = useState(false)     // Face ID — disabled for now
-  const [theme, setTheme] = useState<'light' | 'dark'>(() => {
-    return (localStorage.getItem('gj-theme') as 'light' | 'dark') || 'light'
+  const [theme, setTheme] = useState<'light' | 'dark' | 'liquid-glass'>(() => {
+    return (localStorage.getItem('gj-theme') as 'light' | 'dark' | 'liquid-glass') || 'light'
   })
   const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
 
@@ -229,7 +229,7 @@ export default function SettingsPage() {
   }
 
   // Apply theme to DOM
-  const applyTheme = useCallback((t: 'light' | 'dark') => {
+  const applyTheme = useCallback((t: 'light' | 'dark' | 'liquid-glass') => {
     document.documentElement.setAttribute('data-theme', t)
     localStorage.setItem('gj-theme', t)
   }, [])
@@ -239,10 +239,11 @@ export default function SettingsPage() {
     applyTheme(theme)
   }, [theme, applyTheme])
 
-  const handleThemeChange = (newTheme: 'light' | 'dark') => {
+  const handleThemeChange = (newTheme: 'light' | 'dark' | 'liquid-glass') => {
     setTheme(newTheme)
     applyTheme(newTheme)
-    setMessage({ type: 'success', text: `Switched to ${newTheme === 'light' ? 'Light' : 'Dark'} theme` })
+    const label = newTheme === 'light' ? 'Light' : newTheme === 'dark' ? 'Dark' : 'Liquid Glass'
+    setMessage({ type: 'success', text: `Switched to ${label} theme` })
     setTimeout(() => setMessage(null), 2000)
   }
 
@@ -560,7 +561,9 @@ export default function SettingsPage() {
               </div>
               <div className="settings-item-content">
                 <h4 className="settings-item-title">Theme</h4>
-                <p className="settings-item-subtitle">Currently: {theme === 'light' ? 'Light' : 'Dark'}</p>
+                <p className="settings-item-subtitle">
+                  Currently: {theme === 'light' ? 'Light' : theme === 'dark' ? 'Dark' : 'Liquid Glass'}
+                </p>
               </div>
               <div className="settings-theme-colors">
                 <button
@@ -575,6 +578,12 @@ export default function SettingsPage() {
                   className={`settings-theme-dot settings-theme-dot-dark${theme === 'dark' ? ' settings-theme-dot-active' : ''}`}
                   title="Dark theme"
                 ></button>
+                <button
+                  type="button"
+                  onClick={() => handleThemeChange('liquid-glass')}
+                  className={`settings-theme-dot settings-theme-dot-glass${theme === 'liquid-glass' ? ' settings-theme-dot-active' : ''}`}
+                  title="Liquid Glass theme"
+                ></button>
               </div>
             </div>
           </div>