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
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}>

View File

@ -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;