mongog setup

src/pages/SettingsPage.tsx

@@ -1,15 +1,39 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { useAuth } from '../contexts/AuthContext'
+import { updateUserProfile } from '../lib/api'
 import BottomNav from '../components/BottomNav'
 
 export default function SettingsPage() {
-  const { user, signOut } = useAuth()
+  const { user, userId, signOut, loading } = useAuth()
   const [passcodeEnabled, setPasscodeEnabled] = useState(false)
   const [faceIdEnabled, setFaceIdEnabled] = useState(false)
+  const [theme, setTheme] = useState<'light' | 'dark'>('light')
+  const [saving, setSaving] = useState(false)
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
 
   const displayName = user?.displayName || 'User'
   const photoURL = user?.photoURL || ''
 
+  const handleThemeChange = async (newTheme: 'light' | 'dark') => {
+    if (!userId || !user) return
+
+    setSaving(true)
+    setMessage(null)
+
+    try {
+      const token = await user.getIdToken()
+      await updateUserProfile(userId, { theme: newTheme }, token)
+      setTheme(newTheme)
+      setMessage({ type: 'success', text: 'Theme updated successfully!' })
+      setTimeout(() => setMessage(null), 2000)
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to update theme'
+      setMessage({ type: 'error', text: errorMessage })
+    } finally {
+      setSaving(false)
+    }
+  }
+
   const handleClearData = () => {
     if (window.confirm('Are you sure you want to clear all local data? This action cannot be undone.')) {
       // TODO: Implement clear local data
@@ -17,6 +41,23 @@ export default function SettingsPage() {
     }
   }
 
+  const handleSignOut = async () => {
+    try {
+      await signOut()
+    } catch (error) {
+      console.error('Error signing out:', error)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="settings-page" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <p style={{ color: '#9ca3af' }}>Loading…</p>
+        <BottomNav />
+      </div>
+    )
+  }
+
   return (
     <div className="settings-page">
       <header className="settings-header">
@@ -121,7 +162,7 @@ export default function SettingsPage() {
 
             <div className="settings-divider"></div>
 
-            <button type="button" className="settings-item settings-item-button">
+            <div className="settings-item">
               <div className="settings-item-icon settings-item-icon-blue">
                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                   <circle cx="13.5" cy="6.5" r=".5"></circle>
@@ -133,19 +174,44 @@ export default function SettingsPage() {
               </div>
               <div className="settings-item-content">
                 <h4 className="settings-item-title">Theme</h4>
-                <p className="settings-item-subtitle">Currently: Warm Beige</p>
+                <p className="settings-item-subtitle">Currently: {theme === 'light' ? 'Warm Beige' : 'Dark'}</p>
               </div>
               <div className="settings-theme-colors">
-                <span className="settings-theme-dot settings-theme-dot-beige"></span>
-                <span className="settings-theme-dot settings-theme-dot-dark"></span>
+                <button
+                  type="button"
+                  onClick={() => handleThemeChange('light')}
+                  className="settings-theme-dot settings-theme-dot-beige"
+                  style={{ opacity: theme === 'light' ? 1 : 0.5 }}
+                  title="Light theme"
+                  disabled={saving}
+                ></button>
+                <button
+                  type="button"
+                  onClick={() => handleThemeChange('dark')}
+                  className="settings-theme-dot settings-theme-dot-dark"
+                  style={{ opacity: theme === 'dark' ? 1 : 0.5 }}
+                  title="Dark theme"
+                  disabled={saving}
+                ></button>
               </div>
-              <svg className="settings-item-arrow" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <polyline points="9 18 15 12 9 6"></polyline>
-              </svg>
-            </button>
+            </div>
           </div>
         </section>
 
+        {message && (
+          <div style={{
+            padding: '0.75rem',
+            marginBottom: '1rem',
+            borderRadius: '8px',
+            fontSize: '0.875rem',
+            backgroundColor: message.type === 'success' ? '#f0fdf4' : '#fef2f2',
+            color: message.type === 'success' ? '#15803d' : '#b91c1c',
+            textAlign: 'center',
+          }}>
+            {message.text}
+          </div>
+        )}
+
         {/* Clear Data */}
         <button type="button" className="settings-clear-btn" onClick={handleClearData}>
           <span>Clear Local Data</span>
@@ -156,7 +222,7 @@ export default function SettingsPage() {
         </button>
 
         {/* Sign Out */}
-        <button type="button" className="settings-signout-btn" onClick={() => signOut()}>
+        <button type="button" className="settings-signout-btn" onClick={handleSignOut}>
           Sign Out
         </button>