notification working

src/pages/SettingsPage.tsx

@@ -311,7 +311,6 @@ export default function SettingsPage() {
     }
   }
 
-  // @ts-ignore — intentionally unused, reminder is disabled (coming soon)
   const handleReminderToggle = async () => {
     if (!user || !userId) return
     if (!reminderTime) {
@@ -477,8 +476,12 @@ export default function SettingsPage() {
 
               <div className="settings-divider"></div>
 
-              {/* Daily Reminder — disabled for now, logic preserved */}
-              <div className="settings-item" style={{ opacity: 0.5 }}>
+              {/* Daily Reminder */}
+              <button
+                type="button"
+                className="settings-item settings-item-button"
+                onClick={handleOpenReminderModal}
+              >
                 <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" />
@@ -487,18 +490,14 @@ export default function SettingsPage() {
                 </div>
                 <div className="settings-item-content">
                   <h4 className="settings-item-title">Daily Reminder</h4>
-                  <p className="settings-item-subtitle">Coming soon</p>
+                  <p className="settings-item-subtitle">
+                    {reminderEnabled && reminderTime ? `Set for ${reminderTime}` : 'Set a daily reminder'  }
+                  </p>
                 </div>
-                <label className="settings-toggle">
-                  <input
-                    type="checkbox"
-                    checked={false}
-                    disabled
-                    readOnly
-                  />
-                  <span className="settings-toggle-slider" style={{ cursor: 'not-allowed' }}></span>
-                </label>
-              </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" />
+                </svg>
+              </button>
             </div>
           </section>
 
@@ -999,6 +998,35 @@ export default function SettingsPage() {
                 {reminderSaving ? 'Saving…' : 'Save'}
               </button>
             </div>
+            {reminderEnabled && reminderTime && (
+              <button
+                type="button"
+                onClick={async () => {
+                  if (!user || !userId) return
+                  setReminderSaving(true)
+                  const authToken = await user.getIdToken()
+                  await disableReminder(userId, authToken)
+                  setReminderEnabled(false)
+                  setReminderSaving(false)
+                  setShowReminderModal(false)
+                  setMessage({ type: 'success', text: 'Reminder disabled' })
+                  setTimeout(() => setMessage(null), 2000)
+                }}
+                disabled={reminderSaving}
+                style={{
+                  marginTop: '0.5rem',
+                  width: '100%',
+                  background: 'none',
+                  border: 'none',
+                  color: 'var(--color-error, #ef4444)',
+                  fontSize: '0.85rem',
+                  cursor: 'pointer',
+                  padding: '0.4rem',
+                }}
+              >
+                Disable Reminder
+              </button>
+            )}
           </div>
         </div>
       )}