image bg upload limit

src/App.css

@@ -19,7 +19,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--color-bg-soft, #eef6ee);
+    background: transparent;
 }
 
 .page-loader__tree {
@@ -2612,9 +2612,6 @@
 }
 
 /* -- Page loader -- */
-[data-theme="dark"] .page-loader {
-    background: #0f0f0f;
-}
 
 /* -- Alert messages -- */
 [data-theme="dark"] .alert-msg--error {

src/components/BgImageCropper.tsx

@@ -135,16 +135,28 @@ export function BgImageCropper({ imageSrc, aspectRatio, onCrop, onCancel }: Prop
     const srcH = cb.h / scale
 
     // Output resolution: screen size × device pixel ratio, capped at 1440px wide
+    // Then scale down resolution until the result is under 3MB (keeping quality at 0.92)
+    const MAX_BYTES = 1 * 1024 * 1024
     const dpr = Math.min(window.devicePixelRatio || 1, 2)
-    const outW = Math.min(Math.round(window.innerWidth * dpr), 1440)
-    const outH = Math.round(outW / aspectRatio)
+    let w = Math.min(Math.round(window.innerWidth * dpr), 1440)
 
     const canvas = document.createElement('canvas')
-    canvas.width = outW
-    canvas.height = outH
     const ctx = canvas.getContext('2d')!
-    ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, outW, outH)
-    onCrop(canvas.toDataURL('image/jpeg', 0.92))
+    let dataUrl: string
+
+    do {
+      const h = Math.round(w / aspectRatio)
+      canvas.width = w
+      canvas.height = h
+      ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, w, h)
+      dataUrl = canvas.toDataURL('image/jpeg', 0.92)
+      // base64 → approx byte size
+      const bytes = (dataUrl.length - dataUrl.indexOf(',') - 1) * 0.75
+      if (bytes <= MAX_BYTES) break
+      w = Math.round(w * 0.8)
+    } while (w > 200)
+
+    onCrop(dataUrl!)
   }, [aspectRatio, onCrop])
 
   return (

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>