Add bottom navigation, History and Settings pages with improved UI styling

src/pages/SettingsPage.tsx

@@ -0,0 +1,172 @@
+import { useState } from 'react'
+import { useAuth } from '../contexts/AuthContext'
+import BottomNav from '../components/BottomNav'
+
+export default function SettingsPage() {
+  const { user, signOut } = useAuth()
+  const [passcodeEnabled, setPasscodeEnabled] = useState(false)
+  const [faceIdEnabled, setFaceIdEnabled] = useState(false)
+
+  const displayName = user?.displayName || 'User'
+  const photoURL = user?.photoURL || ''
+
+  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
+      console.log('Clearing local data...')
+    }
+  }
+
+  return (
+    <div className="settings-page">
+      <div className="settings-bg-decoration">
+        <div className="bg-orb bg-orb-1"></div>
+        <div className="bg-orb bg-orb-2"></div>
+        <div className="bg-pattern"></div>
+      </div>
+
+      <header className="settings-header">
+        <div className="settings-header-text">
+          <h1>Settings</h1>
+          <p className="settings-subtitle">Manage your privacy and preferences.</p>
+        </div>
+      </header>
+
+      <main className="settings-container">
+        {/* Profile Section */}
+        <div className="settings-profile">
+          <div className="settings-avatar">
+            {photoURL ? (
+              <img src={photoURL} alt={displayName} className="settings-avatar-img" />
+            ) : (
+              <div className="settings-avatar-placeholder">
+                {displayName.charAt(0).toUpperCase()}
+              </div>
+            )}
+          </div>
+          <div className="settings-profile-info">
+            <h2 className="settings-profile-name">{displayName}</h2>
+            <span className="settings-profile-badge">PRO MEMBER</span>
+          </div>
+        </div>
+
+        {/* Privacy & Security */}
+        <section className="settings-section">
+          <h3 className="settings-section-title">PRIVACY & SECURITY</h3>
+          <div className="settings-card">
+            <div className="settings-item">
+              <div className="settings-item-icon settings-item-icon-green">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+                  <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+                </svg>
+              </div>
+              <div className="settings-item-content">
+                <h4 className="settings-item-title">Passcode Lock</h4>
+                <p className="settings-item-subtitle">Secure your entries</p>
+              </div>
+              <label className="settings-toggle">
+                <input
+                  type="checkbox"
+                  checked={passcodeEnabled}
+                  onChange={(e) => setPasscodeEnabled(e.target.checked)}
+                />
+                <span className="settings-toggle-slider"></span>
+              </label>
+            </div>
+
+            <div className="settings-divider"></div>
+
+            <div className="settings-item">
+              <div className="settings-item-icon settings-item-icon-gray">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2z"></path>
+                  <path d="M12 6v6l4 2"></path>
+                </svg>
+              </div>
+              <div className="settings-item-content">
+                <h4 className="settings-item-title">Face ID</h4>
+                <p className="settings-item-subtitle">Unlock with glance</p>
+              </div>
+              <label className="settings-toggle">
+                <input
+                  type="checkbox"
+                  checked={faceIdEnabled}
+                  onChange={(e) => setFaceIdEnabled(e.target.checked)}
+                />
+                <span className="settings-toggle-slider"></span>
+              </label>
+            </div>
+          </div>
+        </section>
+
+        {/* Data & Look */}
+        <section className="settings-section">
+          <h3 className="settings-section-title">DATA & LOOK</h3>
+          <div className="settings-card">
+            <button type="button" className="settings-item settings-item-button">
+              <div className="settings-item-icon settings-item-icon-orange">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                  <polyline points="7 10 12 15 17 10"></polyline>
+                  <line x1="12" y1="15" x2="12" y2="3"></line>
+                </svg>
+              </div>
+              <div className="settings-item-content">
+                <h4 className="settings-item-title">Export Journal</h4>
+                <p className="settings-item-subtitle">PDF or Plain Text</p>
+              </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 className="settings-divider"></div>
+
+            <button type="button" className="settings-item settings-item-button">
+              <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>
+                  <circle cx="17.5" cy="10.5" r=".5"></circle>
+                  <circle cx="8.5" cy="7.5" r=".5"></circle>
+                  <circle cx="6.5" cy="12.5" r=".5"></circle>
+                  <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path>
+                </svg>
+              </div>
+              <div className="settings-item-content">
+                <h4 className="settings-item-title">Theme</h4>
+                <p className="settings-item-subtitle">Currently: Warm Beige</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>
+              </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>
+        </section>
+
+        {/* Clear Data */}
+        <button type="button" className="settings-clear-btn" onClick={handleClearData}>
+          <span>Clear Local Data</span>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <polyline points="3 6 5 6 21 6"></polyline>
+            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+          </svg>
+        </button>
+
+        {/* Sign Out */}
+        <button type="button" className="settings-signout-btn" onClick={() => signOut()}>
+          Sign Out
+        </button>
+
+        {/* Version */}
+        <p className="settings-version">VERSION 1.0.2</p>
+      </main>
+
+      <BottomNav />
+    </div>
+  )
+}