From b5aa672b8e8d147c6db7cea91e17628c7bd01e81 Mon Sep 17 00:00:00 2001 From: Jeet Debnath Date: Mon, 9 Mar 2026 11:34:39 +0530 Subject: [PATCH] settings page update --- src/App.css | 595 ++++++++++++++++++++++++++++++++++++- src/lib/api.ts | 10 + src/pages/HistoryPage.tsx | 4 +- src/pages/SettingsPage.tsx | 174 ++++++++--- 4 files changed, 724 insertions(+), 59 deletions(-) diff --git a/src/App.css b/src/App.css index 741214f..48bbe95 100644 --- a/src/App.css +++ b/src/App.css @@ -75,7 +75,9 @@ padding: 2rem; border-radius: 20px; border-top: 4px solid #22c55e; - box-shadow: 0 8px 32px rgba(34, 197, 94, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06); + box-shadow: + 0 8px 32px rgba(34, 197, 94, 0.12), + 0 2px 8px rgba(0, 0, 0, 0.06); width: 100%; max-width: 360px; text-align: center; @@ -202,7 +204,9 @@ background: #fff; border-radius: 20px; padding: 1.625rem 1.5rem; - box-shadow: 0 2px 16px rgba(34, 197, 94, 0.1), 0 1px 4px rgba(0, 0, 0, 0.04); + box-shadow: + 0 2px 16px rgba(34, 197, 94, 0.1), + 0 1px 4px rgba(0, 0, 0, 0.04); border: 1px solid rgba(34, 197, 94, 0.08); flex: 1; min-height: 0; @@ -248,7 +252,9 @@ border: none; border-bottom: 1px solid #d1e7d1; outline: none; - transition: border-color 0.2s, box-shadow 0.2s; + transition: + border-color 0.2s, + box-shadow 0.2s; } .journal-title-input::placeholder { @@ -465,7 +471,9 @@ background: #fff; border-radius: 18px; padding: 1.125rem 1rem; - box-shadow: 0 2px 12px rgba(34, 197, 94, 0.08), 0 1px 4px rgba(0, 0, 0, 0.03); + box-shadow: + 0 2px 12px rgba(34, 197, 94, 0.08), + 0 1px 4px rgba(0, 0, 0, 0.03); border: 1px solid rgba(34, 197, 94, 0.08); margin-bottom: 1.125rem; } @@ -599,7 +607,9 @@ padding: 1rem 1rem 1rem 0.875rem; border-radius: 14px; border-left: 4px solid #22c55e; - box-shadow: 0 2px 8px rgba(34, 197, 94, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04); + box-shadow: + 0 2px 8px rgba(34, 197, 94, 0.08), + 0 1px 3px rgba(0, 0, 0, 0.04); cursor: pointer; transition: all 0.2s ease; text-align: left; @@ -607,7 +617,9 @@ } .entry-card:hover { transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(34, 197, 94, 0.15), 0 2px 6px rgba(0, 0, 0, 0.05); + box-shadow: + 0 6px 20px rgba(34, 197, 94, 0.15), + 0 2px 6px rgba(0, 0, 0, 0.05); border-left-color: #16a34a; } @@ -701,7 +713,9 @@ background: #fff; border-radius: 18px; padding: 1rem 1.125rem; - box-shadow: 0 2px 12px rgba(34, 197, 94, 0.08), 0 1px 4px rgba(0, 0, 0, 0.03); + box-shadow: + 0 2px 12px rgba(34, 197, 94, 0.08), + 0 1px 4px rgba(0, 0, 0, 0.03); border: 1px solid rgba(34, 197, 94, 0.08); } @@ -774,7 +788,9 @@ .settings-card { background: #fff; border-radius: 18px; - box-shadow: 0 2px 12px rgba(34, 197, 94, 0.08), 0 1px 4px rgba(0, 0, 0, 0.03); + box-shadow: + 0 2px 12px rgba(34, 197, 94, 0.08), + 0 1px 4px rgba(0, 0, 0, 0.03); border: 1px solid rgba(34, 197, 94, 0.06); overflow: hidden; } @@ -923,7 +939,7 @@ } .settings-theme-dot-beige { - background: #f5f0e8; + background: #eef6ee; } .settings-theme-dot-dark { background: #1a1a1a; @@ -935,6 +951,11 @@ opacity: 0.6; cursor: not-allowed; } +.settings-theme-dot-active { + border-color: #22c55e; + box-shadow: 0 0 0 2px #22c55e; + transform: scale(1.1); +} /* Clear Data */ .settings-clear-btn { @@ -1038,7 +1059,9 @@ max-height: 85vh; overflow-y: auto; padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); - box-shadow: 0 -4px 32px rgba(34, 197, 94, 0.12), 0 -1px 8px rgba(0, 0, 0, 0.06); + box-shadow: + 0 -4px 32px rgba(34, 197, 94, 0.12), + 0 -1px 8px rgba(0, 0, 0, 0.06); border-top: 3px solid #22c55e; animation: modalSlideUp 0.25s ease; -webkit-overflow-scrolling: touch; @@ -1197,3 +1220,555 @@ font-size: 1.0625rem; } } + +/* ============================ + CONFIRM DELETE MODAL + ============================ */ +.confirm-modal-overlay { + position: fixed; + inset: 0; + z-index: 2000; + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + display: flex; + align-items: center; + justify-content: center; + padding: 1.5rem; + animation: modalFadeIn 0.2s ease; +} + +.confirm-modal { + background: #fff; + border-radius: 20px; + padding: 1.75rem 1.5rem; + width: 100%; + max-width: 340px; + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); + text-align: center; + animation: modalScaleIn 0.2s ease; +} + +.confirm-modal-icon { + font-size: 2.5rem; + margin-bottom: 0.75rem; +} + +.confirm-modal-title { + margin: 0 0 0.5rem; + font-size: 1.25rem; + font-weight: 700; + color: #dc2626; + font-family: "Sniglet", system-ui; +} + +.confirm-modal-desc { + margin: 0 0 1rem; + font-size: 0.8125rem; + line-height: 1.5; + color: #6b7280; +} + +.confirm-modal-label { + margin: 0 0 0.5rem; + font-size: 0.75rem; + font-weight: 600; + color: #374151; + text-align: left; +} + +.confirm-modal-input { + width: 100%; + padding: 0.625rem 0.75rem; + font-size: 0.875rem; + font-family: "Sniglet", system-ui; + border: 1.5px solid #e5e7eb; + border-radius: 10px; + outline: none; + transition: border-color 0.2s; + margin-bottom: 1rem; + color: #1a1a1a; + background: #f9fafb; +} + +.confirm-modal-input:focus { + border-color: #dc2626; + background: #fff; +} + +.confirm-modal-input::placeholder { + color: #c4c4c4; +} + +.confirm-modal-actions { + display: flex; + gap: 0.625rem; +} + +.confirm-modal-cancel { + flex: 1; + padding: 0.625rem; + font-size: 0.875rem; + font-weight: 600; + font-family: "Sniglet", system-ui; + color: #6b7280; + background: #f3f4f6; + border: none; + border-radius: 10px; + cursor: pointer; + transition: background 0.2s; +} + +.confirm-modal-cancel:hover:not(:disabled) { + background: #e5e7eb; +} + +.confirm-modal-delete { + flex: 1; + padding: 0.625rem; + font-size: 0.875rem; + font-weight: 600; + font-family: "Sniglet", system-ui; + color: #fff; + background: #dc2626; + border: none; + border-radius: 10px; + cursor: pointer; + transition: background 0.2s; +} + +.confirm-modal-delete:hover:not(:disabled) { + background: #b91c1c; +} + +.confirm-modal-delete:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* ============================ + DARK THEME + ============================ */ + +/* -- Page backgrounds -- */ +[data-theme="dark"] .home-page, +[data-theme="dark"] .history-page, +[data-theme="dark"] .settings-page { + background: #0f0f0f; +} + +/* -- Cards & surfaces -- */ +[data-theme="dark"] .journal-card, +[data-theme="dark"] .calendar-card, +[data-theme="dark"] .settings-card, +[data-theme="dark"] .settings-profile, +[data-theme="dark"] .entry-card { + background: #1a1a1a; + border-color: rgba(74, 222, 128, 0.12); + box-shadow: + 0 2px 16px rgba(0, 0, 0, 0.4), + 0 0 0 1px rgba(74, 222, 128, 0.06); +} + +/* -- Primary text (headings) -- */ +[data-theme="dark"] .journal-prompt, +[data-theme="dark"] .history-header-text h1, +[data-theme="dark"] .settings-header-text h1, +[data-theme="dark"] .entry-title, +[data-theme="dark"] .settings-profile-name, +[data-theme="dark"] .settings-item-title, +[data-theme="dark"] .calendar-month { + color: #e8f5e8; +} + +/* -- Input text -- */ +[data-theme="dark"] .journal-title-input, +[data-theme="dark"] .journal-entry-textarea { + color: #d1d5db; +} + +[data-theme="dark"] .journal-title-input { + border-bottom-color: #2a2a2a; +} + +[data-theme="dark"] .journal-title-input:focus { + border-bottom-color: #4ade80; + box-shadow: 0 1px 0 0 rgba(74, 222, 128, 0.4); +} + +/* -- Placeholder text -- */ +[data-theme="dark"] .journal-title-input::placeholder, +[data-theme="dark"] .journal-entry-textarea::placeholder { + color: #4a5a4a; +} + +/* -- Muted text -- */ +[data-theme="dark"] .journal-date, +[data-theme="dark"] .history-subtitle, +[data-theme="dark"] .settings-subtitle, +[data-theme="dark"] .entry-preview, +[data-theme="dark"] .entry-date, +[data-theme="dark"] .entry-time, +[data-theme="dark"] .settings-item-subtitle, +[data-theme="dark"] .settings-section-title, +[data-theme="dark"] .recent-entries-title, +[data-theme="dark"] .calendar-weekday { + color: #7a8a7a; +} + +/* -- Green accent text brighter in dark -- */ +[data-theme="dark"] .journal-date { + color: #4ade80; +} + +[data-theme="dark"] .login-card__title { + color: #4ade80; +} + +/* -- Calendar -- */ +[data-theme="dark"] .calendar-day { + color: #b0b8b0; +} + +[data-theme="dark"] .calendar-day:not(.calendar-day-empty):hover { + background: rgba(74, 222, 128, 0.12); + color: #4ade80; +} + +[data-theme="dark"] .calendar-day-has-entry { + background: rgba(74, 222, 128, 0.18); + color: #4ade80; +} + +[data-theme="dark"] .calendar-day-has-entry:hover { + background: rgba(74, 222, 128, 0.28); +} + +[data-theme="dark"] .calendar-day-today { + background: #22c55e; + color: #fff; +} + +[data-theme="dark"] .calendar-day-today:hover { + background: #16a34a; +} + +[data-theme="dark"] .calendar-day-selected { + box-shadow: inset 0 0 0 2px #4ade80; +} + +[data-theme="dark"] + .calendar-day-selected:not(.calendar-day-today):not( + .calendar-day-has-entry + ) { + background: rgba(74, 222, 128, 0.1); + color: #4ade80; +} + +[data-theme="dark"] .calendar-nav-btn:hover { + background: rgba(74, 222, 128, 0.1); + color: #4ade80; +} + +/* -- Bottom nav -- */ +[data-theme="dark"] .bottom-nav { + background: rgba(20, 20, 20, 0.97); + border-top-color: rgba(74, 222, 128, 0.1); +} + +[data-theme="dark"] .bottom-nav-btn { + color: #5a6a5a; +} + +[data-theme="dark"] .bottom-nav-btn:hover { + color: #4ade80; + background: rgba(74, 222, 128, 0.08); +} + +[data-theme="dark"] .bottom-nav-btn-active { + background: #22c55e; + color: #fff; +} + +[data-theme="dark"] .bottom-nav-btn-active:hover { + background: #16a34a; + color: #fff; +} + +/* -- Write button -- */ +[data-theme="dark"] .journal-write-btn { + background: #22c55e; + box-shadow: + 0 4px 16px rgba(74, 222, 128, 0.35), + 0 0 24px rgba(74, 222, 128, 0.1); +} + +[data-theme="dark"] .journal-write-btn:hover:not(:disabled) { + background: #16a34a; + box-shadow: + 0 6px 24px rgba(74, 222, 128, 0.45), + 0 0 32px rgba(74, 222, 128, 0.15); +} + +/* -- Home login link -- */ +[data-theme="dark"] .home-login-link { + background: #22c55e; + box-shadow: 0 2px 12px rgba(74, 222, 128, 0.25); +} + +/* -- Entry card green accents -- */ +[data-theme="dark"] .entry-card { + border-left-color: #4ade80; +} + +[data-theme="dark"] .entry-card:hover { + box-shadow: + 0 6px 24px rgba(74, 222, 128, 0.12), + 0 2px 8px rgba(0, 0, 0, 0.3); + border-left-color: #22c55e; +} + +/* -- Settings icon backgrounds -- */ +[data-theme="dark"] .settings-item-icon-green { + background: rgba(74, 222, 128, 0.12); + color: #4ade80; +} + +[data-theme="dark"] .settings-item-icon-gray { + background: rgba(156, 163, 175, 0.1); + color: #9ca3af; +} + +[data-theme="dark"] .settings-item-icon-orange { + background: rgba(251, 146, 60, 0.12); + color: #fb923c; +} + +[data-theme="dark"] .settings-item-icon-blue { + background: rgba(96, 165, 250, 0.12); + color: #60a5fa; +} + +/* -- Settings buttons -- */ +[data-theme="dark"] .settings-clear-btn { + background: #1a1a1a; + color: #f87171; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +[data-theme="dark"] .settings-clear-btn:hover { + background: rgba(239, 68, 68, 0.08); +} + +[data-theme="dark"] .settings-signout-btn { + background: #1a1a1a; + color: #9ca3af; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +[data-theme="dark"] .settings-signout-btn:hover { + background: rgba(74, 222, 128, 0.06); + color: #d1d5db; +} + +/* -- Settings profile badge -- */ +[data-theme="dark"] .settings-profile-badge { + background: #16a34a; + color: #fff; +} + +/* -- Settings divider -- */ +[data-theme="dark"] .settings-divider { + background: #2a2a2a; +} + +/* -- Settings item hover -- */ +[data-theme="dark"] .settings-item-button:hover { + background: rgba(74, 222, 128, 0.06); +} + +/* -- Settings toggle -- */ +[data-theme="dark"] .settings-toggle-slider { + background: #333; +} + +[data-theme="dark"] .settings-toggle input:checked + .settings-toggle-slider { + background: #22c55e; +} + +/* -- Settings theme dot -- */ +[data-theme="dark"] .settings-theme-dot { + border-color: rgba(255, 255, 255, 0.12); +} + +[data-theme="dark"] .settings-theme-dot-active { + border-color: #4ade80; + box-shadow: 0 0 0 2px #4ade80; +} + +/* -- Settings version -- */ +[data-theme="dark"] .settings-version { + color: #3a3a3a; +} + +/* -- History search button -- */ +[data-theme="dark"] .history-search-btn { + background: #1a1a1a; + border-color: #2a2a2a; + color: #7a8a7a; +} + +[data-theme="dark"] .history-search-btn:hover { + background: rgba(74, 222, 128, 0.08); + border-color: #4ade80; + color: #4ade80; +} + +/* -- Spinners -- */ +[data-theme="dark"] .protected-route__spinner, +[data-theme="dark"] .login-page__spinner { + border-color: #2a2a2a; + border-top-color: #4ade80; +} + +[data-theme="dark"] .protected-route__loading { + background: #0f0f0f; + color: #5a6a5a; +} + +/* -- Icon btn hover -- */ +[data-theme="dark"] .journal-icon-btn:hover { + color: #4ade80; + background: rgba(74, 222, 128, 0.1); +} + +/* -- Entry modal -- */ +[data-theme="dark"] .entry-modal { + background: #1a1a1a; + border-top-color: #4ade80; + box-shadow: + 0 -4px 32px rgba(0, 0, 0, 0.5), + 0 -1px 0 rgba(74, 222, 128, 0.2); +} + +[data-theme="dark"] .entry-modal-title { + color: #e8f5e8; +} + +[data-theme="dark"] .entry-modal-content { + color: #b0b8b0; +} + +[data-theme="dark"] .entry-modal-date { + color: #7a8a7a; +} + +[data-theme="dark"] .entry-modal-time { + color: #5a6a5a; +} + +[data-theme="dark"] .entry-modal-close { + background: #252525; + color: #7a8a7a; +} + +[data-theme="dark"] .entry-modal-close:hover { + background: rgba(74, 222, 128, 0.12); + color: #4ade80; +} + +[data-theme="dark"] .entry-modal-badge { + background: rgba(74, 222, 128, 0.12); + color: #4ade80; +} + +[data-theme="dark"] .entry-modal-error { + background: rgba(239, 68, 68, 0.1); + color: #f87171; +} + +[data-theme="dark"] .entry-modal-overlay { + background: rgba(0, 0, 0, 0.7); +} + +/* -- Confirm delete modal -- */ +[data-theme="dark"] .confirm-modal-overlay { + background: rgba(0, 0, 0, 0.7); +} + +[data-theme="dark"] .confirm-modal { + background: #1a1a1a; + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); +} + +[data-theme="dark"] .confirm-modal-title { + color: #f87171; +} + +[data-theme="dark"] .confirm-modal-desc { + color: #7a8a7a; +} + +[data-theme="dark"] .confirm-modal-label { + color: #b0b8b0; +} + +[data-theme="dark"] .confirm-modal-input { + background: #111; + border-color: #2a2a2a; + color: #d1d5db; +} + +[data-theme="dark"] .confirm-modal-input:focus { + border-color: #ef4444; + background: #151515; +} + +[data-theme="dark"] .confirm-modal-cancel { + background: #252525; + color: #9ca3af; +} + +[data-theme="dark"] .confirm-modal-cancel:hover:not(:disabled) { + background: #333; +} + +/* -- Login page -- */ +[data-theme="dark"] .login-page { + background: linear-gradient(160deg, #0f0f0f 0%, #0a2e14 50%, #0f0f0f 100%); +} + +[data-theme="dark"] .login-card { + background: #1a1a1a; + border-top-color: #4ade80; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.5), + 0 0 0 1px rgba(74, 222, 128, 0.08); +} + +[data-theme="dark"] .login-card__tagline { + color: #7a8a7a; +} + +[data-theme="dark"] .login-card__error { + background: rgba(239, 68, 68, 0.1); + color: #f87171; +} + +/* -- Google sign-in btn -- */ +[data-theme="dark"] .google-sign-in-btn { + background: #252525; + border-color: #333; + color: #d1d5db; +} + +[data-theme="dark"] .google-sign-in-btn:hover:not(:disabled) { + background: #2a2a2a; + border-color: rgba(74, 222, 128, 0.3); + box-shadow: 0 1px 8px rgba(74, 222, 128, 0.1); +} + +/* -- Success/error message inline -- */ +[data-theme="dark"] .settings-container [style*="backgroundColor"] { + /* Handled inline but these override for common patterns */ +} diff --git a/src/lib/api.ts b/src/lib/api.ts index b5f66ad..16b096a 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -80,6 +80,16 @@ export async function updateUserProfile( }) } +export async function deleteUser(userId: string, token: string) { + return apiCall<{ message: string; user_deleted: number; entries_deleted: number }>( + `/api/users/${userId}`, + { + method: 'DELETE', + token, + } + ) +} + // ============================================ // ENTRY ENDPOINTS // ============================================ diff --git a/src/pages/HistoryPage.tsx b/src/pages/HistoryPage.tsx index c9c4a55..e676ac2 100644 --- a/src/pages/HistoryPage.tsx +++ b/src/pages/HistoryPage.tsx @@ -180,12 +180,12 @@ export default function HistoryPage() {

History

Your past reflections

- + */}
diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx index a3d87cb..fff7d14 100644 --- a/src/pages/SettingsPage.tsx +++ b/src/pages/SettingsPage.tsx @@ -1,43 +1,80 @@ -import { useState } from 'react' +import { useState, useEffect, useCallback } from 'react' import { useAuth } from '../contexts/AuthContext' -import { updateUserProfile } from '../lib/api' +import { deleteUser as deleteUserApi } from '../lib/api' +import { clearDeviceKey, clearEncryptedSecretKey } from '../lib/crypto' import BottomNav from '../components/BottomNav' export default function SettingsPage() { 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 [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 [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null) + // Clear Data confirmation modal state + const [showClearModal, setShowClearModal] = useState(false) + const [confirmEmail, setConfirmEmail] = useState('') + const [deleting, setDeleting] = useState(false) + const displayName = user?.displayName || 'User' - const photoURL = user?.photoURL || '' - const handleThemeChange = async (newTheme: 'light' | 'dark') => { - if (!userId || !user) return + // Apply theme to DOM + const applyTheme = useCallback((t: 'light' | 'dark') => { + document.documentElement.setAttribute('data-theme', t) + localStorage.setItem('gj-theme', t) + }, []) - setSaving(true) + // Apply saved theme on mount + useEffect(() => { + applyTheme(theme) + }, [theme, applyTheme]) + + const handleThemeChange = (newTheme: 'light' | 'dark') => { + setTheme(newTheme) + applyTheme(newTheme) + setMessage({ type: 'success', text: `Switched to ${newTheme === 'light' ? 'Light' : 'Dark'} theme` }) + setTimeout(() => setMessage(null), 2000) + } + + const handleClearData = () => { + setConfirmEmail('') + setShowClearModal(true) + } + + const handleConfirmDelete = async () => { + if (!user || !userId) return + + const userEmail = user.email || '' + if (confirmEmail.trim().toLowerCase() !== userEmail.toLowerCase()) { + setMessage({ type: 'error', text: 'Email does not match. Please try again.' }) + return + } + + setDeleting(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 - console.log('Clearing local data...') + // Delete user and all entries from backend + await deleteUserApi(userId, token) + + // Clear all local crypto data + clearDeviceKey() + await clearEncryptedSecretKey() + localStorage.removeItem('gj-kdf-salt') + localStorage.removeItem('gj-theme') + + setShowClearModal(false) + + // Sign out (clears auth state) + await signOut() + } catch (error) { + const errorMessage = error instanceof Error ? error.message : 'Failed to delete account' + setMessage({ type: 'error', text: errorMessage }) + setDeleting(false) } } @@ -71,17 +108,13 @@ export default function SettingsPage() { {/* Profile Section */}
- {photoURL ? ( - {displayName} - ) : ( -
- {displayName.charAt(0).toUpperCase()} -
- )} +
+ 🍀 +

{displayName}

- PRO MEMBER + {/* PRO MEMBER */}
@@ -89,7 +122,8 @@ export default function SettingsPage() {

PRIVACY & SECURITY

-
+ {/* Passcode Lock — disabled for now, toggle is non-functional */} +
@@ -98,18 +132,21 @@ export default function SettingsPage() {

Passcode Lock

-

Secure your entries

+

Coming soon

+ {/* Face ID — commented out for future use */} + {/*
@@ -136,6 +173,7 @@ export default function SettingsPage() {
+ */}
@@ -143,6 +181,8 @@ export default function SettingsPage() {

DATA & LOOK

+ {/* Export Journal — commented out for future use */} + {/*
+ */}
@@ -174,24 +215,20 @@ export default function SettingsPage() {

Theme

-

Currently: {theme === 'light' ? 'Warm Beige' : 'Dark'}

+

Currently: {theme === 'light' ? 'Light' : 'Dark'}

@@ -213,8 +250,8 @@ export default function SettingsPage() { )} {/* Clear Data */} -
+ {/* Clear Data Confirmation Modal */} + {showClearModal && ( +
!deleting && setShowClearModal(false)}> +
e.stopPropagation()}> +
⚠️
+

Delete All Data?

+

+ This will permanently delete your account, all journal entries, and local encryption keys. This action cannot be undone. +

+

+ Type your email to confirm: +

+ setConfirmEmail(e.target.value)} + disabled={deleting} + autoFocus + /> +
+ + +
+
+
+ )} + )