From ea3c8b149eefdf542181ccef8c583d0869303b7b Mon Sep 17 00:00:00 2001
From: SocioWire <admin@sociowire.com>
Date: Sat, 10 Jan 2026 03:39:38 +0000
Subject: [PATCH] Fix gallery remove button and update floating UI styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix removeMediaFromGallery -> removeMediaUrlAtIndex function reference
- Update create post floating UI styling

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/Map/MapView.jsx | 58 ++++++++++++++++++++++++------
 src/styles/map.css             | 64 ++++++++++++++++++++++++++++++++++
 2 files changed, 111 insertions(+), 11 deletions(-)

diff --git a/src/components/Map/MapView.jsx b/src/components/Map/MapView.jsx
index 0028f62..5d5d418 100644
--- a/src/components/Map/MapView.jsx
+++ b/src/components/Map/MapView.jsx
@@ -1895,6 +1895,10 @@ export default function MapView({
                 <input
                   placeholder={currentFlow.placeholder}
                   value={draftTitle}
+                  autoComplete="off"
+                  autoCorrect="off"
+                  autoCapitalize="off"
+                  spellCheck="false"
                   onChange={(e) => {
                     const v = e.target.value;
                     if (isLikelyUrl(v)) {
@@ -1905,6 +1909,16 @@ export default function MapView({
                       setDraftTitle(v); setTitleTouched(true);
                     }
                   }}
+                  onPaste={(e) => {
+                    const pasted = e.clipboardData?.getData('text') || '';
+                    if (pasted && isLikelyUrl(pasted.trim())) {
+                      e.preventDefault();
+                      const v = pasted.trim();
+                      setDraftTitle(v); setTitleTouched(false); setDraftUrl(v);
+                      setUrlPreviewError(""); setDraftSource(""); setDraftPublishedAt("");
+                      handleUrlPreview(v);
+                    }
+                  }}
                 />
                 {draftUrl && !draftSource && <span className="cfloat-meta">Fetching preview...</span>}
                 {draftSource && <span className="cfloat-meta">{draftSource}</span>}
@@ -1945,21 +1959,43 @@ export default function MapView({
                   </button>
                 </div>
                 {useCustomImage && (
-                  <div className="cfloat-img-upload">
-                    <label>
-                      <i className="fa-solid fa-upload" /> Upload
-                      <input type="file" accept="image/*" multiple onChange={handleImageFileChange} disabled={uploadingImage} hidden />
-                    </label>
-                    <label>
-                      <i className="fa-solid fa-camera" /> Camera
-                      <input type="file" accept="image/*" capture="environment" onChange={handleImageFileChange} disabled={uploadingImage} hidden />
-                    </label>
-                    {uploadingImage && <span>Uploading...</span>}
-                  </div>
+                  <>
+                    <div className="cfloat-img-upload">
+                      <label>
+                        <i className="fa-solid fa-upload" /> Upload
+                        <input type="file" accept="image/*" multiple onChange={handleImageFileChange} disabled={uploadingImage} hidden />
+                      </label>
+                      <label>
+                        <i className="fa-solid fa-camera" /> Camera
+                        <input type="file" accept="image/*" capture="environment" onChange={handleImageFileChange} disabled={uploadingImage} hidden />
+                      </label>
+                      {uploadingImage && <span>Uploading...</span>}
+                    </div>
+                    {galleryItems.length > 0 && (
+                      <div className="cfloat-gallery">
+                        {galleryItems.map((url, idx) => (
+                          <div key={idx} className="cfloat-gallery-item">
+                            <img src={url} alt={`Upload ${idx + 1}`} />
+                            <button onClick={() => removeMediaUrlAtIndex(idx)} title="Remove">
+                              <i className="fa-solid fa-xmark" />
+                            </button>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </>
                 )}
               </div>
             )}
 
+            {/* Error display */}
+            {saveError && (
+              <div className="cfloat-box cfloat-error-box">
+                <i className="fa-solid fa-exclamation-triangle" />
+                <span>{saveError}</span>
+              </div>
+            )}
+
             {/* Navigation buttons */}
             <div className="cfloat-box cfloat-nav">
               <button className="cfloat-btn" onClick={handlePrevStep} disabled={createStep === 0}>
diff --git a/src/styles/map.css b/src/styles/map.css
index ba7d972..5990444 100644
--- a/src/styles/map.css
+++ b/src/styles/map.css
@@ -1656,6 +1656,70 @@ body[data-theme="blue"] .create-floating-ui{
   margin-bottom:2px;
 }
 
+/* Gallery thumbnails */
+.cfloat-gallery{
+  display:flex;
+  flex-wrap:wrap;
+  gap:6px;
+  margin-top:8px;
+}
+
+.cfloat-gallery-item{
+  position:relative;
+  width:60px;
+  height:60px;
+  border-radius:8px;
+  overflow:hidden;
+  border:1px solid var(--cf-border);
+}
+
+.cfloat-gallery-item img{
+  width:100%;
+  height:100%;
+  object-fit:cover;
+}
+
+.cfloat-gallery-item button{
+  position:absolute;
+  top:2px;
+  right:2px;
+  width:20px;
+  height:20px;
+  border-radius:50%;
+  border:none;
+  background:rgba(0,0,0,0.6);
+  color:#fff;
+  font-size:0.65rem;
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.cfloat-gallery-item button:hover{
+  background:rgba(239,68,68,0.8);
+}
+
+/* Error box */
+.cfloat-error-box{
+  display:flex;
+  align-items:center;
+  gap:8px;
+  background:rgba(239,68,68,0.15);
+  border-color:rgba(239,68,68,0.4);
+  color:#fca5a5;
+}
+
+.cfloat-error-box i{
+  color:#ef4444;
+  font-size:0.9rem;
+}
+
+.cfloat-error-box span{
+  font-size:0.8rem;
+  line-height:1.3;
+}
+
 /* Navigation */
 .cfloat-nav{
   display:flex;