opacity change

src/pages/SettingsPage.tsx

@@ -84,6 +84,8 @@ export default function SettingsPage() {
   // Derived from mongoUser (no local state — always fresh after refreshMongoUser)
   const bgImages: string[] = (mongoUser as { backgroundImages?: string[] } | null)?.backgroundImages ?? []
   const activeImage: string | null = mongoUser?.backgroundImage ?? null
+  // Tile aspect ratio matches the actual screen so previews reflect real proportions
+  const screenAspect = `${window.innerWidth} / ${window.innerHeight}`
 
   // Continue onboarding tour if navigated here from the history page tour
   useEffect(() => {
@@ -173,6 +175,15 @@ export default function SettingsPage() {
     bgUpdate({ backgroundImage: img })
   }
 
+  const handleDeleteBgImage = (img: string, e: React.MouseEvent) => {
+    e.stopPropagation()
+    const newHistory = bgImages.filter(i => i !== img)
+    // If the deleted image was active, clear it too
+    const updates: Parameters<typeof updateUserProfile>[1] = { backgroundImages: newHistory }
+    if (img === activeImage) updates.backgroundImage = null
+    bgUpdate(updates)
+  }
+
   const handleBgFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
     if (!file) return
@@ -803,7 +814,7 @@ export default function SettingsPage() {
           <div className="bg-modal" onClick={(e) => e.stopPropagation()}>
             <h3 className="edit-modal-title" style={{ marginBottom: '0.25rem' }}>Background</h3>
             <p className="settings-item-subtitle" style={{ marginBottom: '1rem' }}>
-              Tap to apply · + to upload new
+              Add new images or select from previously used ones:
             </p>
 
             {/* Hidden file input */}
@@ -815,66 +826,85 @@ export default function SettingsPage() {
               onChange={handleBgFileSelect}
             />
 
-            {/* Gallery row */}
-            <div className="bg-gallery">
-              {/* Default color swatch — always first */}
+            {/* Fixed 4-tile grid: [+] [slot1] [slot2] [slot3] */}
+            <div className="bg-grid">
+              {/* Add new — always first tile */}
               <button
                 type="button"
-                className={`bg-gallery-swatch${!activeImage ? ' bg-gallery-item--active' : ''}`}
-                onClick={handleApplyDefault}
-                disabled={bgApplying}
-                title="Default color"
-              >
-                <div className="bg-gallery-swatch-fill" />
-                {!activeImage && (
-                  <div className="bg-gallery-badge">
-                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
-                      <polyline points="20 6 9 17 4 12" />
-                    </svg>
-                  </div>
-                )}
-                <span className="bg-gallery-label">Default</span>
-              </button>
-
-              {/* History thumbnails */}
-              {bgImages.map((img, i) => (
-                <button
-                  key={i}
-                  type="button"
-                  className={`bg-gallery-thumb${img === activeImage ? ' bg-gallery-item--active' : ''}`}
-                  onClick={() => handleApplyFromGallery(img)}
-                  disabled={bgApplying}
-                  title={`Background ${i + 1}`}
-                >
-                  <img src={img} alt="" className="bg-gallery-thumb-img" />
-                  {img === activeImage && (
-                    <div className="bg-gallery-badge">
-                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
-                        <polyline points="20 6 9 17 4 12" />
-                      </svg>
-                    </div>
-                  )}
-                </button>
-              ))}
-
-              {/* Add new */}
-              <button
-                type="button"
-                className="bg-gallery-add"
+                className="bg-grid-tile bg-grid-add"
+                style={{ aspectRatio: screenAspect }}
                 onClick={() => bgFileInputRef.current?.click()}
                 disabled={bgApplying}
                 title="Upload new image"
               >
-                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                   <line x1="12" y1="5" x2="12" y2="19" />
                   <line x1="5" y1="12" x2="19" y2="12" />
                 </svg>
-                <span className="bg-gallery-label">New</span>
               </button>
+
+              {/* 3 image slots — filled or empty placeholder */}
+              {Array.from({ length: MAX_BG_HISTORY }).map((_, i) => {
+                const img = bgImages[i]
+                if (img) {
+                  return (
+                    <div key={i} className="bg-grid-wrapper">
+                      <button
+                        type="button"
+                        className={`bg-grid-tile bg-grid-thumb${img === activeImage ? ' bg-grid-tile--active' : ''}`}
+                        style={{ aspectRatio: screenAspect }}
+                        onClick={() => handleApplyFromGallery(img)}
+                        disabled={bgApplying}
+                        title={`Background ${i + 1}`}
+                      >
+                        <img src={img} alt="" className="bg-gallery-thumb-img" />
+                        {img === activeImage && (
+                          <div className="bg-gallery-badge">
+                            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
+                              <polyline points="20 6 9 17 4 12" />
+                            </svg>
+                          </div>
+                        )}
+                      </button>
+                      <button
+                        type="button"
+                        className="bg-tile-delete"
+                        onClick={(e) => handleDeleteBgImage(img, e)}
+                        disabled={bgApplying}
+                        title="Remove"
+                      >
+                        <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round">
+                          <line x1="18" y1="6" x2="6" y2="18" />
+                          <line x1="6" y1="6" x2="18" y2="18" />
+                        </svg>
+                      </button>
+                    </div>
+                  )
+                }
+                return (
+                  <div key={i} className="bg-grid-tile bg-grid-empty" style={{ aspectRatio: screenAspect }} />
+                )
+              })}
             </div>
 
+            {/* Revert to default — only shown when a custom bg is active */}
+            {activeImage && (
+              <button
+                type="button"
+                className="bg-default-btn"
+                onClick={handleApplyDefault}
+                disabled={bgApplying}
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+                  <path d="M3 3v5h5" />
+                </svg>
+                Revert to default color
+              </button>
+            )}
+
             {bgApplying && (
-              <p className="settings-item-subtitle" style={{ textAlign: 'center', marginTop: '0.75rem' }}>
+              <p className="settings-item-subtitle" style={{ textAlign: 'center', marginTop: '0.5rem' }}>
                 Saving…
               </p>
             )}