seo improvement and updated notifs

src/pages/SettingsPage.tsx

@@ -7,6 +7,10 @@ import BottomNav from '../components/BottomNav'
 import { useOnboardingTour, hasPendingTourStep, clearPendingTourStep } from '../hooks/useOnboardingTour'
 import { PageLoader } from '../components/PageLoader'
 import { usePWAInstall } from '../hooks/usePWAInstall'
+import {
+  getSavedReminderTime, isReminderEnabled,
+  enableReminder, disableReminder, reenableReminder,
+} from '../hooks/useReminder'
 
 const MAX_PHOTO_SIZE = 200 // px — resize to 200x200
 
@@ -55,6 +59,14 @@ export default function SettingsPage() {
   const { canInstall, isIOS, triggerInstall } = usePWAInstall()
   const [installModal, setInstallModal] = useState<'ios' | 'chrome' | null>(null)
 
+  // Reminder state
+  const [reminderTime, setReminderTime] = useState<string | null>(() => getSavedReminderTime())
+  const [reminderEnabled, setReminderEnabled] = useState(() => isReminderEnabled())
+  const [showReminderModal, setShowReminderModal] = useState(false)
+  const [reminderPickedTime, setReminderPickedTime] = useState('08:00')
+  const [reminderError, setReminderError] = useState<string | null>(null)
+  const [reminderSaving, setReminderSaving] = useState(false)
+
   // Edit profile modal state
   const [showEditModal, setShowEditModal] = useState(false)
   const [editName, setEditName] = useState('')
@@ -182,6 +194,56 @@ export default function SettingsPage() {
     }
   }
 
+  const handleOpenReminderModal = () => {
+    setReminderPickedTime(reminderTime || '08:00')
+    setReminderError(null)
+    setShowReminderModal(true)
+  }
+
+  const handleSaveReminder = async () => {
+    if (!user || !userId) return
+    setReminderSaving(true)
+    setReminderError(null)
+    const authToken = await user.getIdToken()
+    const error = await enableReminder(reminderPickedTime, userId, authToken)
+    setReminderSaving(false)
+    if (error) {
+      setReminderError(error)
+    } else {
+      setReminderTime(reminderPickedTime)
+      setReminderEnabled(true)
+      setShowReminderModal(false)
+      setMessage({ type: 'success', text: 'Reminder set!' })
+      setTimeout(() => setMessage(null), 2000)
+    }
+  }
+
+  const handleReminderToggle = async () => {
+    if (!user || !userId) return
+    if (!reminderTime) {
+      handleOpenReminderModal()
+      return
+    }
+    if (reminderEnabled) {
+      const authToken = await user.getIdToken()
+      await disableReminder(userId, authToken)
+      setReminderEnabled(false)
+    } else {
+      setReminderSaving(true)
+      const authToken = await user.getIdToken()
+      const error = await reenableReminder(userId, authToken)
+      setReminderSaving(false)
+      if (error) {
+        setReminderError(error)
+        setShowReminderModal(true)
+      } else {
+        setReminderEnabled(true)
+        setMessage({ type: 'success', text: 'Reminder enabled!' })
+        setTimeout(() => setMessage(null), 2000)
+      }
+    }
+  }
+
   const handleSignOut = async () => {
     try {
       await signOut()
@@ -318,6 +380,40 @@ export default function SettingsPage() {
                   <polyline points="9 18 15 12 9 6" />
                 </svg>
               </button>
+
+              <div className="settings-divider"></div>
+
+              {/* Daily Reminder */}
+              <div className="settings-item">
+                <div className="settings-item-icon settings-item-icon-orange">
+                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+                    <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+                  </svg>
+                </div>
+                <button
+                  type="button"
+                  className="settings-item-content"
+                  onClick={handleOpenReminderModal}
+                  style={{ background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', padding: 0 }}
+                >
+                  <h4 className="settings-item-title">Daily Reminder</h4>
+                  <p className="settings-item-subtitle">
+                    {reminderTime
+                      ? (reminderEnabled ? `Reminds you at ${reminderTime}` : `Set to ${reminderTime} — paused`)
+                      : 'Tap to set a daily reminder'}
+                  </p>
+                </button>
+                <label className="settings-toggle" title={reminderEnabled ? 'Disable reminder' : 'Enable reminder'}>
+                  <input
+                    type="checkbox"
+                    checked={reminderEnabled}
+                    onChange={handleReminderToggle}
+                    disabled={reminderSaving}
+                  />
+                  <span className="settings-toggle-slider"></span>
+                </label>
+              </div>
             </div>
           </section>
 
@@ -622,6 +718,73 @@ export default function SettingsPage() {
         </div>
       )}
 
+      {/* Daily Reminder Modal */}
+      {showReminderModal && (
+        <div className="confirm-modal-overlay" onClick={() => !reminderSaving && setShowReminderModal(false)}>
+          <div className="confirm-modal" onClick={(e) => e.stopPropagation()}>
+            <div style={{ fontSize: '2rem', textAlign: 'center', marginBottom: '0.5rem' }}>🔔</div>
+            <h3 className="confirm-modal-title">
+              {reminderTime ? 'Edit Reminder' : 'Set Daily Reminder'}
+            </h3>
+            <p className="confirm-modal-desc">
+              You'll get a notification at this time each day if you haven't written yet.
+              {' '}The reminder stays even if you log out and back in.
+            </p>
+
+            <label className="confirm-modal-label">Reminder time</label>
+            <input
+              type="time"
+              className="confirm-modal-input"
+              value={reminderPickedTime}
+              onChange={(e) => setReminderPickedTime(e.target.value)}
+              disabled={reminderSaving}
+              autoFocus
+            />
+
+            {reminderError && (
+              <p style={{
+                color: 'var(--color-error, #ef4444)',
+                fontSize: '0.8rem',
+                marginTop: '0.5rem',
+                textAlign: 'center',
+                lineHeight: 1.4,
+              }}>
+                {reminderError}
+              </p>
+            )}
+
+            <p style={{
+              fontSize: '0.75rem',
+              color: 'var(--color-text-muted)',
+              marginTop: '0.75rem',
+              textAlign: 'center',
+              lineHeight: 1.5,
+            }}>
+              Works best when the app is installed on your home screen.
+            </p>
+
+            <div className="confirm-modal-actions" style={{ marginTop: '1rem' }}>
+              <button
+                type="button"
+                className="confirm-modal-cancel"
+                onClick={() => setShowReminderModal(false)}
+                disabled={reminderSaving}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                className="edit-modal-save"
+                onClick={handleSaveReminder}
+                disabled={reminderSaving || !reminderPickedTime}
+              >
+                {reminderSaving ? 'Saving…' : 'Save'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       <BottomNav />
     </div>
   )