// Screens - Home, Detail, Upload, Me // Category icons function CategoryIcon({ kind, color }) { const common = { stroke: color, strokeWidth: 1.5, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' }; if (kind === 'portrait') { return ( ); } if (kind === 'chat') { return ( ); } if (kind === 'story') { return ( ); } if (kind === 'fav') { return ( ); } if (kind === 'emoji') { return ( ); } if (kind === 'photo') { return ( ); } if (kind === 'pixel') { return ( ); } return null; } function IconChip({ active, onClick, icon }) { const c = active ? '#FFFFFF' : 'rgba(60,60,67,0.75)'; return (
); } // Home header with category filter function HomeHeader({ filter, setFilter }) { return (
Anomaly Gallery
{/* category filter - scrollable */}
{CATEGORIES.map(cat => ( setFilter(filter === cat.key ? null : cat.key)} icon={cat.icon} /> ))}
); } // Home / Gallery screen function HomeScreen({ onOpenItem }) { const { items, loading, fetchItems } = useGallery(); const [filter, setFilter] = React.useState(null); const [editMode, setEditMode] = React.useState(false); const [selected, setSelected] = React.useState({}); const [deleting, setDeleting] = React.useState(false); const filtered = items.filter(it => { if (!filter) return true; if (filter === 'fav') return it.fav || it.cat === 'fav'; return it.cat === filter; }); const onRandom = () => { if (items.length === 0) return; const pick = items[Math.floor(Math.random() * items.length)]; onOpenItem(pick); }; const toggleSelect = (id) => { setSelected(prev => ({ ...prev, [id]: !prev[id] })); }; const selectAll = () => { const allSelected = {}; filtered.forEach(it => { allSelected[it.id] = true; }); setSelected(allSelected); }; const deleteSelected = async () => { const ids = Object.keys(selected).filter(k => selected[k]); if (ids.length === 0) return; setDeleting(true); try { await Promise.all(ids.map(id => fetch(`/api/images/${id}`, { method: 'DELETE' }))); await fetchItems(); setSelected({}); setEditMode(false); } catch (e) { console.error('Delete failed:', e); } finally { setDeleting(false); } }; // Masonry layout const colA = [], colB = []; let hA = 0, hB = 0; filtered.forEach(it => { if (hA <= hB) { colA.push(it); hA += (it.aspect || 1.3); } else { colB.push(it); hB += (it.aspect || 1.3); } }); const renderCard = (it) => (
{editMode && (
{ e.stopPropagation(); toggleSelect(it.id); }} style={{ position: 'absolute', top: 8, left: 8, zIndex: 10, width: 24, height: 24, borderRadius: 12, background: selected[it.id] ? '#1C1C1E' : 'rgba(255,255,255,0.85)', border: selected[it.id] ? 'none' : '2px solid rgba(60,60,67,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', boxShadow: '0 2px 6px rgba(0,0,0,0.15)', }}> {selected[it.id] && }
)} editMode ? toggleSelect(it.id) : onOpenItem(it, e.currentTarget)} />
); return (
{loading && (
loading...
)} {!loading && filtered.length === 0 && (
{items.length === 0 ? '画廊还是空的，去上传第一张吧' : '这个分类下还没有图片'}
)}
{colA.map(it => renderCard(it))}
{colB.map(it => renderCard(it))}
{/* Edit mode top-right action buttons */} {editMode && (
全选
v) ? 1 : 0.4, }}>删除
)} {/* floating edit button - top left */}
{ setEditMode(!editMode); setSelected({}); }} title="编辑模式" style={{ position: 'absolute', top: 14, left: 18, width: 40, height: 40, borderRadius: 20, background: editMode ? '#1C1C1E' : 'rgba(255,255,255,0.7)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid rgba(60,60,67,0.08)', boxShadow: '0 1px 2px rgba(60,60,67,0.04), 0 8px 24px -8px rgba(60,60,67,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', zIndex: 20, transition: 'all 0.2s cubic-bezier(0.22, 1, 0.36, 1)', }}>
{/* floating wand - random pick */}
e.currentTarget.style.transform = 'scale(0.92)'} onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'} onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'} >
); } // Detail screen - real image, real comments, comment form function DetailScreen({ item, onBack }) { const { addComment, fetchItems } = useGallery(); const c = CHARACTERS[item.char] || CHARACTERS.ning; const [commentText, setCommentText] = React.useState(''); const [commentAuthor, setCommentAuthor] = React.useState('Avenil'); const [submitting, setSubmitting] = React.useState(false); const [editing, setEditing] = React.useState(false); const [editTitle, setEditTitle] = React.useState(item.title); const [editStory, setEditStory] = React.useState(item.story || ''); const [editChar, setEditChar] = React.useState(item.char); const [editCat, setEditCat] = React.useState(item.cat); const [editDate, setEditDate] = React.useState(item.date ? item.date.replace(/\./g, '-') : ''); const [saving, setSaving] = React.useState(false); const comments = item.comments || []; const catLabel = CATEGORIES.find(x => x.key === item.cat)?.label || item.cat; const handleSubmitComment = async () => { if (!commentText.trim() || submitting) return; setSubmitting(true); // Use the gallery context but pass author try { const res = await fetch(`/api/images/${item.id}/comments`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: commentText.trim(), author: commentAuthor }), }); if (res.ok) { await fetchItems(); } } catch (e) { console.error(e); } setCommentText(''); setSubmitting(false); }; const handleSaveEdit = async () => { setSaving(true); try { const res = await fetch(`/api/images/${item.id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title: editTitle, story: editStory, character: editChar, category: editCat, date: editDate, }), }); if (res.ok) { await fetchItems(); setEditing(false); } } catch (e) { console.error(e); } setSaving(false); }; const formatTimestamp = (ts) => { if (!ts) return ''; const d = new Date(ts); const pad = (n) => String(n).padStart(2, '0'); return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`; }; return (
{/* Hero image */}
{/* top gradient */}
{/* back button */}
{/* edit button */}
setEditing(!editing)} style={{ position: 'absolute', top: 16, right: 16, width: 40, height: 40, borderRadius: 20, background: editing ? '#1C1C1E' : 'rgba(255,255,255,0.72)', backdropFilter: 'blur(16px) saturate(180%)', WebkitBackdropFilter: 'blur(16px) saturate(180%)', boxShadow: '0 2px 8px rgba(60,60,67,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', }}>
{/* Meta card */}
{!editing ? ( <>
{c.en} · {item.date}
{item.title}
{item.story && (
{item.story}
)}
#{catLabel} {(item.tags || []).map(t => #{t})}
) : (
标题
setEditTitle(e.target.value)} style={inputStyle} />
故事