Fix gallery remove button and update floating UI styles

- 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>
This commit is contained in:
SocioWire 2026-01-10 03:39:38 +00:00
parent f8804a5b14
commit ea3c8b149e
2 changed files with 111 additions and 11 deletions

View File

@ -1895,6 +1895,10 @@ export default function MapView({
<input <input
placeholder={currentFlow.placeholder} placeholder={currentFlow.placeholder}
value={draftTitle} value={draftTitle}
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
onChange={(e) => { onChange={(e) => {
const v = e.target.value; const v = e.target.value;
if (isLikelyUrl(v)) { if (isLikelyUrl(v)) {
@ -1905,6 +1909,16 @@ export default function MapView({
setDraftTitle(v); setTitleTouched(true); 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>} {draftUrl && !draftSource && <span className="cfloat-meta">Fetching preview...</span>}
{draftSource && <span className="cfloat-meta">{draftSource}</span>} {draftSource && <span className="cfloat-meta">{draftSource}</span>}
@ -1945,6 +1959,7 @@ export default function MapView({
</button> </button>
</div> </div>
{useCustomImage && ( {useCustomImage && (
<>
<div className="cfloat-img-upload"> <div className="cfloat-img-upload">
<label> <label>
<i className="fa-solid fa-upload" /> Upload <i className="fa-solid fa-upload" /> Upload
@ -1956,7 +1971,28 @@ export default function MapView({
</label> </label>
{uploadingImage && <span>Uploading...</span>} {uploadingImage && <span>Uploading...</span>}
</div> </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> </div>
)} )}

View File

@ -1656,6 +1656,70 @@ body[data-theme="blue"] .create-floating-ui{
margin-bottom:2px; 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 */ /* Navigation */
.cfloat-nav{ .cfloat-nav{
display:flex; display:flex;