navbar update

nginx/default.conf

@@ -41,6 +41,7 @@ server {
     }
 
     location /api/ {
+        client_max_body_size 5m;
         proxy_pass http://backend:8001/api/;
         proxy_http_version 1.1;
         proxy_set_header Host $host;

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 {
@@ -426,7 +426,7 @@
     -ms-overflow-style: none; /* IE/Edge */
     display: flex;
     flex-direction: column;
-    padding: 1.5rem 1.25rem 1rem;
+    padding: 1.5rem 1.25rem calc(88px + env(safe-area-inset-bottom));
 }
 
 .journal-container::-webkit-scrollbar {
@@ -822,16 +822,21 @@
    BOTTOM NAVIGATION — Static flex item, always at bottom
    ============================ */
 .bottom-nav {
-    flex-shrink: 0;
-    position: relative; /* NOT fixed — lives in the flex column */
-    background: var(--color-surface);
-    border-top: 1px solid rgba(0, 0, 0, 0.07);
-    padding: 8px 12px 12px;
+    position: fixed;
+    bottom: calc(16px + env(safe-area-inset-bottom));
+    left: 50%;
+    transform: translateX(-50%);
+    background: #fff;
+    border-radius: 100px;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.13), 0 1px 4px rgba(0, 0, 0, 0.07);
+    padding: 6px;
     display: flex;
     align-items: center;
-    justify-content: space-around;
-    gap: 4px;
-    z-index: 10;
+    gap: 2px;
+    z-index: 100;
+    /* prevent layout from reserving space for it */
+    flex-shrink: 0;
+    width: max-content;
 }
 
 .bottom-nav-btn {
@@ -840,7 +845,7 @@
     align-items: center;
     justify-content: center;
     gap: 5px;
-    padding: 8px 14px;
+    padding: 10px 18px;
     background: transparent;
     border: none;
     border-radius: 100px;
@@ -896,11 +901,12 @@
 .bottom-nav-btn-active {
     background: #22c55e;
     color: #fff;
-    padding: 9px 18px;
+    padding: 10px 18px;
 }
 
+.bottom-nav-btn span,
 .bottom-nav-btn-active span {
-    display: inline;
+    display: none;
 }
 .bottom-nav-btn-active:hover {
     background: #16a34a;
@@ -966,7 +972,7 @@
     overflow-y: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
-    padding: 1rem 1.25rem 0.5rem;
+    padding: 1rem 1.25rem calc(88px + env(safe-area-inset-bottom));
 }
 .history-container::-webkit-scrollbar {
     display: none;
@@ -1222,7 +1228,7 @@
     overflow-y: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
-    padding: 1rem 1.25rem 0.5rem;
+    padding: 1rem 1.25rem calc(88px + env(safe-area-inset-bottom));
 }
 .settings-container::-webkit-scrollbar {
     display: none;
@@ -2125,8 +2131,12 @@
         position: fixed;
         left: 0;
         top: 0;
+        bottom: auto;
+        transform: none;
         height: 100dvh;
         width: 232px;
+        border-radius: 0;
+        box-shadow: none;
         flex-direction: column;
         justify-content: flex-start;
         align-items: stretch;
@@ -2408,8 +2418,8 @@
 
 /* -- Bottom nav -- */
 [data-theme="dark"] .bottom-nav {
-    background: var(--color-surface);
-    border-top-color: rgba(74, 222, 128, 0.1);
+    background: #1e2320;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.3);
 }
 
 [data-theme="dark"] .bottom-nav-btn {
@@ -2612,9 +2622,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>