image bg upload limit

src/pages/SettingsPage.tsx

@@ -16,6 +16,14 @@ import ClockTimePicker from '../components/ClockTimePicker'
 
 const MAX_PHOTO_SIZE = 200 // px — resize to 200x200
 const MAX_BG_HISTORY = 3
+const MAX_BG_IMAGE_BYTES = 1 * 1024 * 1024        // 1 MB per image
+const MAX_BG_PAYLOAD_BYTES = MAX_BG_HISTORY * MAX_BG_IMAGE_BYTES  // 9 MB total
+
+/** Approximate decoded byte size of a base64 data URL */
+function dataUrlBytes(dataUrl: string): number {
+  const base64 = dataUrl.slice(dataUrl.indexOf(',') + 1)
+  return Math.round(base64.length * 0.75)
+}
 
 function resizeImage(file: File): Promise<string> {
   return new Promise((resolve, reject) => {
@@ -196,8 +204,22 @@ export default function SettingsPage() {
   const handleCropDone = async (dataUrl: string) => {
     if (cropperSrc) URL.revokeObjectURL(cropperSrc)
     setCropperSrc(null)
+
+    // Guard: individual image must be within limit (cropper already enforces this,
+    // but double-check in case of future code paths)
+    if (dataUrlBytes(dataUrl) > MAX_BG_IMAGE_BYTES) {
+      setMessage({ type: 'error', text: 'Image is too large. Please try a smaller photo.' })
+      return
+    }
+
     // Prepend to history, deduplicate, cap at MAX_BG_HISTORY
-    const newHistory = [dataUrl, ...bgImages.filter(i => i !== dataUrl)].slice(0, MAX_BG_HISTORY)
+    let newHistory = [dataUrl, ...bgImages.filter(i => i !== dataUrl)].slice(0, MAX_BG_HISTORY)
+
+    // Guard: total payload must stay within limit — drop oldest images until it fits
+    while (newHistory.reduce((sum, img) => sum + dataUrlBytes(img), 0) > MAX_BG_PAYLOAD_BYTES) {
+      newHistory = newHistory.slice(0, -1)
+    }
+
     await bgUpdate({ backgroundImage: dataUrl, backgroundImages: newHistory })
   }
 
@@ -453,35 +475,26 @@ export default function SettingsPage() {
 
               <div className="settings-divider"></div>
 
-              {/* Daily Reminder */}
-              <div className="settings-item">
+              {/* Daily Reminder — disabled for now, logic preserved */}
+              <div className="settings-item" style={{ opacity: 0.5 }}>
                 <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 }}
-                >
+                <div className="settings-item-content">
                   <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'}>
+                  <p className="settings-item-subtitle">Coming soon</p>
+                </div>
+                <label className="settings-toggle">
                   <input
                     type="checkbox"
-                    checked={reminderEnabled}
-                    onChange={handleReminderToggle}
-                    disabled={reminderSaving}
+                    checked={false}
+                    disabled
+                    readOnly
                   />
-                  <span className="settings-toggle-slider"></span>
+                  <span className="settings-toggle-slider" style={{ cursor: 'not-allowed' }}></span>
                 </label>
               </div>
             </div>