feat: initial Luma implementation
Full self-hosted photo manager with: - Ingestion worker (chokidar + sharp + exifr, dHash perceptual hashing) - SQLite schema with WAL mode (photos, tags, collections, duplicate_pairs) - Express API with keyset pagination, tag/collection/search/date filters - React + Vite UI: timeline, lightbox, detail panel, tag/collection editors - Duplicate detection (Union-Find grouping) with review + dismiss UI - Map view (Leaflet + OpenStreetMap, marker clustering) - Docker multi-stage build + Compose with inline env config - GitHub Actions: CI build check + ghcr.io image publish on main/tags Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed
1 parent
03e6d6b628
commit
e0f4e8ff0d
32 files changed
+4845
No files matched your search
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>shpm</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,209 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { fetchPhotos, fetchTags, fetchCollections } from './api/photos.js';
|
||||
import Timeline from './components/Timeline.jsx';
|
||||
import Lightbox from './components/Lightbox.jsx';
|
||||
import FilterBar from './components/FilterBar.jsx';
|
||||
import DuplicatesView from './components/DuplicatesView.jsx';
|
||||
|
||||
// Lazy-load MapView so Leaflet CSS doesn't bloat the initial bundle
|
||||
import { lazy, Suspense } from 'react';
|
||||
const MapView = lazy(() => import('./components/MapView.jsx'));
|
||||
|
||||
const EMPTY_FILTERS = { q: '', from: '', to: '', tagId: '', collectionId: '' };
|
||||
|
||||
export default function App() {
|
||||
const [view, setView] = useState('library');
|
||||
const [photos, setPhotos] = useState([]);
|
||||
const [nextCursor, setNextCursor] = useState(undefined);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [total, setTotal] = useState(null);
|
||||
const [error, setError] = useState(null);
|
||||
const [dupeCount, setDupeCount] = useState(0);
|
||||
|
||||
// Filter state
|
||||
const [filters, setFilters] = useState(EMPTY_FILTERS);
|
||||
const [tags, setTags] = useState([]);
|
||||
const [collections, setCollections] = useState([]);
|
||||
|
||||
// Unified lightbox
|
||||
const [lbPhotos, setLbPhotos] = useState(null);
|
||||
const [lbIndex, setLbIndex] = useState(null);
|
||||
|
||||
const loadingRef = useRef(false);
|
||||
const sentinelRef = useRef(null);
|
||||
|
||||
// Fetch dropdown data once
|
||||
useEffect(() => {
|
||||
fetchTags().then(setTags).catch(() => {});
|
||||
fetchCollections().then(setCollections).catch(() => {});
|
||||
}, []);
|
||||
|
||||
// Reset + reload when filters change (debounce text search)
|
||||
useEffect(() => {
|
||||
const delay = filters.q ? 300 : 0;
|
||||
const timer = setTimeout(() => {
|
||||
setPhotos([]);
|
||||
setNextCursor(undefined);
|
||||
loadPage(undefined, filters);
|
||||
}, delay);
|
||||
return () => clearTimeout(timer);
|
||||
}, [filters]);
|
||||
|
||||
async function loadPage(cursor, activeFilters) {
|
||||
if (loadingRef.current) return;
|
||||
loadingRef.current = true;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await fetchPhotos({ cursor, ...activeFilters });
|
||||
setPhotos(prev => cursor !== undefined ? [...prev, ...data.photos] : data.photos);
|
||||
setNextCursor(data.nextCursor ?? null);
|
||||
setTotal(data.total);
|
||||
} catch (e) {
|
||||
setError(e.message);
|
||||
}
|
||||
loadingRef.current = false;
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
// Infinite scroll sentinel
|
||||
useEffect(() => {
|
||||
if (!sentinelRef.current || !nextCursor || view !== 'library') return;
|
||||
const el = sentinelRef.current;
|
||||
const cur = nextCursor;
|
||||
const obs = new IntersectionObserver(
|
||||
([entry]) => { if (entry.isIntersecting) loadPage(cur, filters); },
|
||||
{ rootMargin: '600px' }
|
||||
);
|
||||
obs.observe(el);
|
||||
return () => obs.disconnect();
|
||||
}, [nextCursor, view, filters]);
|
||||
|
||||
function openLightbox(photosArr, idx) {
|
||||
setLbPhotos(photosArr);
|
||||
setLbIndex(idx);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<header style={{
|
||||
position: 'sticky', top: 0, zIndex: 100,
|
||||
background: '#0f0f0f', borderBottom: '1px solid #1c1c1c',
|
||||
height: 52, padding: '0 20px',
|
||||
display: 'flex', alignItems: 'center', gap: 0,
|
||||
}}>
|
||||
<span style={{ fontSize: 16, fontWeight: 700, color: '#fff', marginRight: 20, letterSpacing: -0.3 }}>
|
||||
Luma
|
||||
</span>
|
||||
|
||||
<nav style={{ display: 'flex', gap: 2, flex: 1 }}>
|
||||
<Tab active={view === 'library'} onClick={() => setView('library')}>
|
||||
Library
|
||||
{total !== null && (
|
||||
<span style={{ marginLeft: 6, fontSize: 12, color: view === 'library' ? '#555' : '#3a3a3a' }}>
|
||||
{total.toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
</Tab>
|
||||
<Tab active={view === 'map'} onClick={() => setView('map')}>
|
||||
Map
|
||||
</Tab>
|
||||
<Tab active={view === 'duplicates'} onClick={() => setView('duplicates')}>
|
||||
Duplicates
|
||||
{dupeCount > 0 && (
|
||||
<span style={{
|
||||
marginLeft: 6, background: '#b8860b', color: '#fff',
|
||||
borderRadius: 10, fontSize: 10, fontWeight: 700,
|
||||
padding: '1px 6px', lineHeight: '16px',
|
||||
}}>
|
||||
{dupeCount}
|
||||
</span>
|
||||
)}
|
||||
</Tab>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{/* ── Library ── */}
|
||||
{view === 'library' && (
|
||||
<>
|
||||
<FilterBar
|
||||
filters={filters}
|
||||
onChange={setFilters}
|
||||
tags={tags}
|
||||
collections={collections}
|
||||
/>
|
||||
{error && (
|
||||
<p style={{ color: '#f87171', padding: 24, textAlign: 'center', fontSize: 14 }}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
{photos.length === 0 && !loading && !error && (
|
||||
<div style={{ textAlign: 'center', padding: '80px 24px', color: '#555' }}>
|
||||
{filters.q || filters.from || filters.to || filters.tagId || filters.collectionId ? (
|
||||
<p style={{ fontSize: 15 }}>No photos match these filters.</p>
|
||||
) : (
|
||||
<>
|
||||
<p style={{ fontSize: 15, marginBottom: 8 }}>No photos indexed yet.</p>
|
||||
<p style={{ fontSize: 13 }}>Set <code>PHOTO_DIR</code> in <code>.env</code> and run <code>npm run worker</code>.</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<Timeline photos={photos} onSelect={(idx) => openLightbox(photos, idx)} />
|
||||
<div ref={sentinelRef} style={{ height: 1 }} />
|
||||
{loading && <p style={{ textAlign: 'center', padding: 24, color: '#444', fontSize: 13 }}>Loading…</p>}
|
||||
{nextCursor === null && photos.length > 0 && !loading && (
|
||||
<p style={{ textAlign: 'center', padding: 24, color: '#2a2a2a', fontSize: 12 }}>
|
||||
— {total?.toLocaleString()} photo{total === 1 ? '' : 's'} —
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ── Map ── */}
|
||||
{view === 'map' && (
|
||||
<Suspense fallback={<p style={{ padding: 24, color: '#555', fontSize: 13 }}>Loading map…</p>}>
|
||||
<MapView onOpenPhoto={(photo) => openLightbox([photo], 0)} />
|
||||
</Suspense>
|
||||
)}
|
||||
|
||||
{/* ── Duplicates ── */}
|
||||
{view === 'duplicates' && (
|
||||
<DuplicatesView
|
||||
onGroupCountChange={setDupeCount}
|
||||
onOpenPhoto={(photo, group) =>
|
||||
openLightbox(group, group.findIndex(p => p.id === photo.id))
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* ── Lightbox (shared) ── */}
|
||||
{lbPhotos !== null && (
|
||||
<Lightbox
|
||||
photos={lbPhotos}
|
||||
index={lbIndex}
|
||||
onClose={() => { setLbPhotos(null); setLbIndex(null); }}
|
||||
onChange={setLbIndex}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Tab({ active, onClick, children }) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
style={{
|
||||
background: active ? '#1e1e1e' : 'transparent',
|
||||
border: 'none', borderRadius: 6,
|
||||
color: active ? '#e0e0e0' : '#666',
|
||||
cursor: 'pointer', padding: '5px 12px', fontSize: 13,
|
||||
fontWeight: active ? 600 : 400,
|
||||
display: 'flex', alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
async function api(path, options) {
|
||||
const res = await fetch(path, options);
|
||||
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
|
||||
return res.status === 204 ? null : res.json();
|
||||
}
|
||||
|
||||
const json = (body) => ({
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
// Library
|
||||
export function fetchPhotos({ cursor, limit = 100, q, from, to, tagId, collectionId } = {}) {
|
||||
const p = new URLSearchParams({ limit });
|
||||
if (cursor) p.set('cursor', cursor);
|
||||
if (q) p.set('q', q);
|
||||
if (from) p.set('from', from);
|
||||
if (to) p.set('to', to);
|
||||
if (tagId) p.set('tagId', tagId);
|
||||
if (collectionId) p.set('collectionId', collectionId);
|
||||
return api(`/api/photos?${p}`);
|
||||
}
|
||||
|
||||
export function fetchPhotoDetail(id) {
|
||||
return api(`/api/photos/${id}`);
|
||||
}
|
||||
|
||||
export function fetchMapPhotos() {
|
||||
return api('/api/photos/map');
|
||||
}
|
||||
|
||||
// Tags
|
||||
export function addTag(photoId, name) {
|
||||
return api(`/api/photos/${photoId}/tags`, { method: 'POST', ...json({ name }) });
|
||||
}
|
||||
|
||||
export function removeTag(photoId, tagId) {
|
||||
return api(`/api/photos/${photoId}/tags/${tagId}`, { method: 'DELETE' });
|
||||
}
|
||||
|
||||
// Collections
|
||||
export function fetchCollections() {
|
||||
return api('/api/collections');
|
||||
}
|
||||
|
||||
export function createCollection(name, description) {
|
||||
return api('/api/collections', { method: 'POST', ...json({ name, description }) });
|
||||
}
|
||||
|
||||
export function addToCollection(photoId, collectionId) {
|
||||
return api(`/api/photos/${photoId}/collections`, { method: 'POST', ...json({ collectionId }) });
|
||||
}
|
||||
|
||||
export function removeFromCollection(photoId, collectionId) {
|
||||
return api(`/api/photos/${photoId}/collections/${collectionId}`, { method: 'DELETE' });
|
||||
}
|
||||
|
||||
// Tags + collections (for filter dropdowns)
|
||||
export function fetchTags() {
|
||||
return api('/api/tags');
|
||||
}
|
||||
|
||||
// Duplicates
|
||||
export function fetchDuplicates() {
|
||||
return api('/api/duplicates');
|
||||
}
|
||||
|
||||
export function scanDuplicates() {
|
||||
return api('/api/dedupe/scan', { method: 'POST' });
|
||||
}
|
||||
|
||||
export function dismissGroup(photoIds) {
|
||||
return api('/api/duplicates/dismiss', { method: 'POST', ...json({ photoIds }) });
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { addToCollection, removeFromCollection, fetchCollections, createCollection } from '../api/photos.js';
|
||||
import { Chip, Btn, iStyle } from './TagEditor.jsx';
|
||||
|
||||
export default function CollectionEditor({ photoId, initialCollections }) {
|
||||
const [collections, setCollections] = useState(initialCollections);
|
||||
const [all, setAll] = useState([]);
|
||||
const [mode, setMode] = useState('select'); // 'select' | 'create'
|
||||
const [selectedId, setSelectedId] = useState('');
|
||||
const [newName, setNewName] = useState('');
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchCollections().then(setAll).catch(() => {});
|
||||
}, []);
|
||||
|
||||
const currentIds = new Set(collections.map(c => c.id));
|
||||
const available = all.filter(c => !currentIds.has(c.id));
|
||||
|
||||
async function handleAdd() {
|
||||
if (busy) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
if (mode === 'select') {
|
||||
if (!selectedId) return;
|
||||
const col = all.find(c => c.id === parseInt(selectedId, 10));
|
||||
await addToCollection(photoId, col.id);
|
||||
setCollections(prev => [...prev, col]);
|
||||
setSelectedId('');
|
||||
} else {
|
||||
const name = newName.trim();
|
||||
if (!name) return;
|
||||
const col = await createCollection(name);
|
||||
setAll(prev => [...prev, col].sort((a, b) => a.name.localeCompare(b.name)));
|
||||
await addToCollection(photoId, col.id);
|
||||
setCollections(prev => [...prev, col]);
|
||||
setNewName('');
|
||||
setMode('select');
|
||||
}
|
||||
} catch {}
|
||||
setBusy(false);
|
||||
}
|
||||
|
||||
async function handleRemove(colId) {
|
||||
setCollections(prev => prev.filter(c => c.id !== colId));
|
||||
try {
|
||||
await removeFromCollection(photoId, colId);
|
||||
} catch {}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{collections.length > 0 && (
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginBottom: 10 }}>
|
||||
{collections.map(c => (
|
||||
<Chip key={c.id} label={c.name} color="green" onRemove={() => handleRemove(c.id)} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mode === 'select' ? (
|
||||
<div style={{ display: 'flex', gap: 5 }}>
|
||||
<select
|
||||
value={selectedId}
|
||||
onChange={e => setSelectedId(e.target.value)}
|
||||
style={{ ...iStyle, cursor: 'pointer' }}
|
||||
>
|
||||
<option value="">Add to collection…</option>
|
||||
{available.map(c => (
|
||||
<option key={c.id} value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
{selectedId && <Btn onClick={handleAdd} disabled={busy}>+</Btn>}
|
||||
<Btn
|
||||
type="button"
|
||||
onClick={() => setMode('create')}
|
||||
style={{ width: 'auto', padding: '0 10px', fontSize: 11 }}
|
||||
>
|
||||
New
|
||||
</Btn>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', gap: 5 }}>
|
||||
<input
|
||||
autoFocus
|
||||
value={newName}
|
||||
onChange={e => setNewName(e.target.value)}
|
||||
onKeyDown={e => { if (e.key === 'Enter') handleAdd(); if (e.key === 'Escape') setMode('select'); }}
|
||||
placeholder="Collection name…"
|
||||
maxLength={200}
|
||||
style={iStyle}
|
||||
/>
|
||||
<Btn onClick={handleAdd} disabled={!newName.trim() || busy}>+</Btn>
|
||||
<Btn type="button" onClick={() => setMode('select')}>×</Btn>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { fetchPhotoDetail } from '../api/photos.js';
|
||||
import TagEditor from './TagEditor.jsx';
|
||||
import CollectionEditor from './CollectionEditor.jsx';
|
||||
|
||||
export default function DetailPanel({ photoId }) {
|
||||
const [photo, setPhoto] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setPhoto(null);
|
||||
setLoading(true);
|
||||
fetchPhotoDetail(photoId)
|
||||
.then(setPhoto)
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false));
|
||||
}, [photoId]);
|
||||
|
||||
if (loading) {
|
||||
return <div style={panelPad}><span style={{ color: '#444', fontSize: 13 }}>Loading…</span></div>;
|
||||
}
|
||||
if (!photo) return null;
|
||||
|
||||
const filename = photo.filepath?.split('/').pop();
|
||||
|
||||
return (
|
||||
<div style={{ padding: '14px 16px 32px', fontSize: 13, color: '#ccc', lineHeight: 1.5 }}>
|
||||
|
||||
<Section label="File">
|
||||
{filename && <Row k="Name" v={filename} mono />}
|
||||
{photo.date_taken && (
|
||||
<Row k="Taken" v={new Date(photo.date_taken).toLocaleDateString('en-US', { dateStyle: 'full' })} />
|
||||
)}
|
||||
{photo.date_imported && (
|
||||
<Row k="Added" v={new Date(photo.date_imported).toLocaleDateString('en-US', { dateStyle: 'medium' })} />
|
||||
)}
|
||||
{photo.width && photo.height && (
|
||||
<Row k="Pixels" v={`${photo.width.toLocaleString()} × ${photo.height.toLocaleString()}`} />
|
||||
)}
|
||||
{photo.filesize && (
|
||||
<Row k="Size" v={formatBytes(photo.filesize)} />
|
||||
)}
|
||||
</Section>
|
||||
|
||||
{photo.camera_model && (
|
||||
<Section label="Camera">
|
||||
<Row k="Model" v={photo.camera_model} />
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{photo.gps_lat != null && (
|
||||
<Section label="Location">
|
||||
<Row k="GPS" v={`${photo.gps_lat.toFixed(5)}, ${photo.gps_lon.toFixed(5)}`} />
|
||||
<a
|
||||
href={`https://maps.google.com/?q=${photo.gps_lat},${photo.gps_lon}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ fontSize: 12, color: '#5a9', marginTop: 4, display: 'inline-block' }}
|
||||
>
|
||||
Open in Maps ↗
|
||||
</a>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
<Section label="Tags">
|
||||
<TagEditor photoId={photoId} initialTags={photo.tags ?? []} />
|
||||
</Section>
|
||||
|
||||
<Section label="Collections">
|
||||
<CollectionEditor photoId={photoId} initialCollections={photo.collections ?? []} />
|
||||
</Section>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Section({ label, children }) {
|
||||
return (
|
||||
<div style={{ marginBottom: 24 }}>
|
||||
<div style={{ fontSize: 10, fontWeight: 700, color: '#3a3a3a', textTransform: 'uppercase', letterSpacing: 1, marginBottom: 10 }}>
|
||||
{label}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Row({ k, v, mono }) {
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 8, marginBottom: 5 }}>
|
||||
<span style={{ color: '#555', flexShrink: 0, width: 60, fontSize: 12 }}>{k}</span>
|
||||
<span style={{
|
||||
color: '#aaa',
|
||||
fontFamily: mono ? "'SF Mono', 'Fira Code', monospace" : undefined,
|
||||
fontSize: mono ? 11 : 13,
|
||||
wordBreak: 'break-all',
|
||||
}}>
|
||||
{v}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatBytes(b) {
|
||||
if (b < 1024) return `${b} B`;
|
||||
if (b < 1048576) return `${(b / 1024).toFixed(1)} KB`;
|
||||
return `${(b / 1048576).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
const panelPad = { padding: '14px 16px' };
|
||||
@@ -0,0 +1,100 @@
|
||||
function fmtSize(b) {
|
||||
if (!b) return null;
|
||||
if (b < 1048576) return `${(b / 1024).toFixed(0)} KB`;
|
||||
return `${(b / 1048576).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
function fmtDate(d) {
|
||||
if (!d) return 'Undated';
|
||||
return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
|
||||
}
|
||||
|
||||
export default function DuplicateGroup({ photos, onDismiss, onOpen }) {
|
||||
return (
|
||||
<div style={{
|
||||
background: '#111',
|
||||
border: '1px solid #1d1d1d',
|
||||
borderRadius: 8,
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
{/* Photo row */}
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 1, background: '#0c0c0c' }}>
|
||||
{photos.map((photo, i) => (
|
||||
<div
|
||||
key={photo.id}
|
||||
style={{ flex: '1 1 200px', minWidth: 160, maxWidth: 320, display: 'flex', flexDirection: 'column' }}
|
||||
>
|
||||
<div
|
||||
onClick={() => onOpen(photo)}
|
||||
style={{
|
||||
aspectRatio: '4/3',
|
||||
cursor: 'pointer',
|
||||
background: '#0c0c0c',
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{photo.thumb_url ? (
|
||||
<img
|
||||
src={photo.thumb_url}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
||||
/>
|
||||
) : (
|
||||
<div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#222', fontSize: 24 }}>▪</div>
|
||||
)}
|
||||
|
||||
{/* Index badge */}
|
||||
<span style={{
|
||||
position: 'absolute', top: 6, left: 6,
|
||||
background: 'rgba(0,0,0,0.6)', borderRadius: 4,
|
||||
fontSize: 10, color: '#888', padding: '2px 5px',
|
||||
}}>
|
||||
{i + 1}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Meta */}
|
||||
<div style={{ padding: '7px 10px 8px', fontSize: 12, color: '#555', display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<span style={{ color: '#888' }}>{fmtDate(photo.date_taken)}</span>
|
||||
<span>
|
||||
{[fmtSize(photo.filesize), photo.width && `${photo.width}×${photo.height}`].filter(Boolean).join(' · ')}
|
||||
</span>
|
||||
{photo.camera_model && (
|
||||
<span style={{ color: '#3a3a3a', fontSize: 11, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{photo.camera_model}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div style={{
|
||||
padding: '8px 14px',
|
||||
borderTop: '1px solid #1a1a1a',
|
||||
display: 'flex', alignItems: 'center', gap: 12,
|
||||
}}>
|
||||
<span style={{ fontSize: 12, color: '#333', flex: 1 }}>
|
||||
{photos.length} similar photos
|
||||
</span>
|
||||
<button
|
||||
onClick={onDismiss}
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: '1px solid #2a2a2a',
|
||||
borderRadius: 5,
|
||||
color: '#666',
|
||||
cursor: 'pointer',
|
||||
padding: '4px 12px',
|
||||
fontSize: 12,
|
||||
}}
|
||||
>
|
||||
Not duplicates
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { fetchDuplicates, scanDuplicates, dismissGroup } from '../api/photos.js';
|
||||
import DuplicateGroup from './DuplicateGroup.jsx';
|
||||
|
||||
export default function DuplicatesView({ onOpenPhoto, onGroupCountChange }) {
|
||||
const [groups, setGroups] = useState(null);
|
||||
const [scanning, setScanning] = useState(false);
|
||||
const [scanResult, setScanResult] = useState(null);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => { load(); }, []);
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
const data = await fetchDuplicates();
|
||||
setGroups(data.groups);
|
||||
onGroupCountChange?.(data.total);
|
||||
} catch (e) {
|
||||
setError(e.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleScan() {
|
||||
setScanning(true);
|
||||
setError(null);
|
||||
try {
|
||||
const result = await scanDuplicates();
|
||||
setScanResult(result);
|
||||
await load();
|
||||
} catch (e) {
|
||||
setError(e.message);
|
||||
}
|
||||
setScanning(false);
|
||||
}
|
||||
|
||||
async function handleDismiss(photoIds) {
|
||||
try {
|
||||
await dismissGroup(photoIds);
|
||||
setGroups(prev => {
|
||||
const next = prev.filter(g => {
|
||||
const s = new Set(g.map(p => p.id));
|
||||
return !photoIds.every(id => s.has(id));
|
||||
});
|
||||
onGroupCountChange?.(next.length);
|
||||
return next;
|
||||
});
|
||||
} catch {}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ padding: '24px 20px', maxWidth: 1100, margin: '0 auto' }}>
|
||||
{/* Toolbar */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 28, flexWrap: 'wrap' }}>
|
||||
<h1 style={{ fontSize: 15, fontWeight: 600, color: '#999', margin: 0 }}>Similar photos</h1>
|
||||
|
||||
<button
|
||||
onClick={handleScan}
|
||||
disabled={scanning}
|
||||
style={{
|
||||
background: '#1a1a1a', border: '1px solid #2a2a2a', borderRadius: 6,
|
||||
color: scanning ? '#444' : '#aaa', cursor: scanning ? 'default' : 'pointer',
|
||||
padding: '5px 14px', fontSize: 13,
|
||||
}}
|
||||
>
|
||||
{scanning ? 'Scanning…' : 'Scan library'}
|
||||
</button>
|
||||
|
||||
{scanResult && (
|
||||
<span style={{ fontSize: 12, color: '#555' }}>
|
||||
{scanResult.newPairs === 0
|
||||
? 'No new pairs'
|
||||
: `${scanResult.newPairs} new pair${scanResult.newPairs !== 1 ? 's' : ''} found`}
|
||||
{' · '}{scanResult.photos.toLocaleString()} photos · {scanResult.duration}ms
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p style={{ color: '#f87171', fontSize: 13, marginBottom: 16 }}>{error}</p>
|
||||
)}
|
||||
|
||||
{groups === null && (
|
||||
<p style={{ color: '#555', fontSize: 13 }}>Loading…</p>
|
||||
)}
|
||||
|
||||
{groups !== null && groups.length === 0 && (
|
||||
<div style={{ textAlign: 'center', paddingTop: 60, color: '#555' }}>
|
||||
<p style={{ fontSize: 15, marginBottom: 8 }}>No similar photos to review.</p>
|
||||
<p style={{ fontSize: 13 }}>Click "Scan library" to compare perceptual hashes across your library.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{groups !== null && groups.length > 0 && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
<p style={{ fontSize: 12, color: '#444', marginBottom: 4 }}>
|
||||
{groups.length} group{groups.length !== 1 ? 's' : ''} — click a photo to inspect it, "Not duplicates" to dismiss
|
||||
</p>
|
||||
{groups.map((group, i) => (
|
||||
<DuplicateGroup
|
||||
key={i}
|
||||
photos={group}
|
||||
onDismiss={() => handleDismiss(group.map(p => p.id))}
|
||||
onOpen={(photo) => onOpenPhoto(photo, group)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
const EMPTY = { q: '', from: '', to: '', tagId: '', collectionId: '' };
|
||||
|
||||
function isActive(f) {
|
||||
return f.q || f.from || f.to || f.tagId || f.collectionId;
|
||||
}
|
||||
|
||||
export default function FilterBar({ filters, onChange, tags, collections }) {
|
||||
const s = { // shared input style
|
||||
background: '#111', border: '1px solid #222', borderRadius: 5,
|
||||
color: '#ccc', fontSize: 12, padding: '4px 8px',
|
||||
outline: 'none',
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: 6,
|
||||
padding: '6px 20px', borderBottom: '1px solid #141414',
|
||||
background: '#0c0c0c', flexWrap: 'wrap',
|
||||
}}>
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Search…"
|
||||
value={filters.q}
|
||||
onChange={e => onChange({ ...filters, q: e.target.value })}
|
||||
style={{ ...s, width: 160 }}
|
||||
/>
|
||||
|
||||
<input
|
||||
type="date"
|
||||
value={filters.from}
|
||||
onChange={e => onChange({ ...filters, from: e.target.value })}
|
||||
style={{ ...s, colorScheme: 'dark' }}
|
||||
title="From date"
|
||||
/>
|
||||
<span style={{ color: '#333', fontSize: 11 }}>–</span>
|
||||
<input
|
||||
type="date"
|
||||
value={filters.to}
|
||||
onChange={e => onChange({ ...filters, to: e.target.value })}
|
||||
style={{ ...s, colorScheme: 'dark' }}
|
||||
title="To date"
|
||||
/>
|
||||
|
||||
{tags.length > 0 && (
|
||||
<select
|
||||
value={filters.tagId}
|
||||
onChange={e => onChange({ ...filters, tagId: e.target.value })}
|
||||
style={{ ...s }}
|
||||
>
|
||||
<option value="">All tags</option>
|
||||
{tags.map(t => (
|
||||
<option key={t.id} value={t.id}>{t.name}</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
|
||||
{collections.length > 0 && (
|
||||
<select
|
||||
value={filters.collectionId}
|
||||
onChange={e => onChange({ ...filters, collectionId: e.target.value })}
|
||||
style={{ ...s }}
|
||||
>
|
||||
<option value="">All collections</option>
|
||||
{collections.map(c => (
|
||||
<option key={c.id} value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
|
||||
{isActive(filters) && (
|
||||
<button
|
||||
onClick={() => onChange(EMPTY)}
|
||||
style={{
|
||||
background: 'transparent', border: '1px solid #2a2a2a',
|
||||
borderRadius: 5, color: '#555', cursor: 'pointer',
|
||||
padding: '4px 10px', fontSize: 11,
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import DetailPanel from './DetailPanel.jsx';
|
||||
|
||||
export default function Lightbox({ photos, index, onClose, onChange }) {
|
||||
const [showInfo, setShowInfo] = useState(false);
|
||||
const photo = photos[index];
|
||||
|
||||
useEffect(() => {
|
||||
function onKey(e) {
|
||||
// Don't hijack shortcuts while typing in the detail panel
|
||||
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') return;
|
||||
if (e.key === 'Escape') onClose();
|
||||
if (e.key === 'ArrowLeft' && index > 0) onChange(index - 1);
|
||||
if (e.key === 'ArrowRight' && index < photos.length - 1) onChange(index + 1);
|
||||
if (e.key === 'i') setShowInfo(s => !s);
|
||||
}
|
||||
window.addEventListener('keydown', onKey);
|
||||
return () => window.removeEventListener('keydown', onKey);
|
||||
}, [index, photos.length, onClose, onChange]);
|
||||
|
||||
useEffect(() => {
|
||||
document.body.style.overflow = 'hidden';
|
||||
return () => { document.body.style.overflow = ''; };
|
||||
}, []);
|
||||
|
||||
if (!photo) return null;
|
||||
|
||||
return (
|
||||
<div style={{ position: 'fixed', inset: 0, zIndex: 1000, display: 'flex', background: '#080808' }}>
|
||||
|
||||
{/* ── Image area ── */}
|
||||
<div
|
||||
onClick={onClose}
|
||||
style={{ flex: 1, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', minWidth: 0 }}
|
||||
>
|
||||
{/* Toolbar */}
|
||||
<div
|
||||
onClick={e => e.stopPropagation()}
|
||||
style={{ position: 'absolute', top: 0, right: 0, display: 'flex', gap: 4, padding: 10, zIndex: 10 }}
|
||||
>
|
||||
<IconBtn
|
||||
onClick={() => setShowInfo(s => !s)}
|
||||
active={showInfo}
|
||||
title="Info [i]"
|
||||
>
|
||||
<InfoIcon />
|
||||
</IconBtn>
|
||||
<IconBtn onClick={onClose} title="Close [Esc]">✕</IconBtn>
|
||||
</div>
|
||||
|
||||
{/* Left nav */}
|
||||
{index > 0 && (
|
||||
<NavBtn side="left" onClick={e => { e.stopPropagation(); onChange(index - 1); }}>‹</NavBtn>
|
||||
)}
|
||||
{/* Right nav */}
|
||||
{index < photos.length - 1 && (
|
||||
<NavBtn side="right" onClick={e => { e.stopPropagation(); onChange(index + 1); }}>›</NavBtn>
|
||||
)}
|
||||
|
||||
<img
|
||||
key={photo.id}
|
||||
src={photo.preview_url || photo.thumb_url}
|
||||
alt=""
|
||||
onClick={e => e.stopPropagation()}
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: 'calc(100vh - 20px)',
|
||||
objectFit: 'contain',
|
||||
display: 'block',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* ── Detail panel ── */}
|
||||
{showInfo && (
|
||||
<div style={{
|
||||
width: 320,
|
||||
flexShrink: 0,
|
||||
background: '#111',
|
||||
borderLeft: '1px solid #1d1d1d',
|
||||
overflowY: 'auto',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}>
|
||||
<DetailPanel photoId={photo.id} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function IconBtn({ onClick, active, title, children }) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
title={title}
|
||||
style={{
|
||||
background: active ? 'rgba(255,255,255,0.15)' : 'rgba(255,255,255,0.06)',
|
||||
border: '1px solid rgba(255,255,255,0.1)',
|
||||
borderRadius: 6,
|
||||
color: active ? '#fff' : '#888',
|
||||
cursor: 'pointer',
|
||||
width: 32, height: 32,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: 14,
|
||||
transition: 'background 0.1s',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function NavBtn({ side, onClick, children }) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
style={{
|
||||
position: 'absolute', top: '50%', transform: 'translateY(-50%)',
|
||||
[side]: 10,
|
||||
background: 'rgba(0,0,0,0.5)',
|
||||
border: '1px solid rgba(255,255,255,0.08)',
|
||||
borderRadius: '50%',
|
||||
width: 44, height: 44,
|
||||
fontSize: 24, color: '#ccc',
|
||||
cursor: 'pointer',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
lineHeight: 1,
|
||||
zIndex: 5,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function InfoIcon() {
|
||||
return (
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
|
||||
<circle cx="7" cy="7" r="6" />
|
||||
<line x1="7" y1="6" x2="7" y2="10" />
|
||||
<circle cx="7" cy="3.5" r="0.75" fill="currentColor" stroke="none" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import { useEffect, useState, useMemo } from 'react';
|
||||
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
|
||||
import MarkerClusterGroup from 'react-leaflet-cluster';
|
||||
import L from 'leaflet';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import { fetchMapPhotos } from '../api/photos.js';
|
||||
|
||||
// Custom dot icon — avoids Leaflet's broken default asset URLs in Vite
|
||||
const dotIcon = (color = '#4d9eff') =>
|
||||
L.divIcon({
|
||||
className: '',
|
||||
html: `<div style="
|
||||
width:12px;height:12px;border-radius:50%;
|
||||
background:${color};border:2px solid rgba(255,255,255,0.85);
|
||||
box-shadow:0 1px 4px rgba(0,0,0,0.5);
|
||||
"></div>`,
|
||||
iconSize: [12, 12],
|
||||
iconAnchor: [6, 6],
|
||||
popupAnchor: [0, -8],
|
||||
});
|
||||
|
||||
const ICON = dotIcon();
|
||||
|
||||
function centroid(points) {
|
||||
const lat = points.reduce((s, p) => s + p.lat, 0) / points.length;
|
||||
const lon = points.reduce((s, p) => s + p.lon, 0) / points.length;
|
||||
return [lat, lon];
|
||||
}
|
||||
|
||||
export default function MapView({ onOpenPhoto }) {
|
||||
const [points, setPoints] = useState(null);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchMapPhotos()
|
||||
.then(setPoints)
|
||||
.catch(e => setError(e.message));
|
||||
}, []);
|
||||
|
||||
const center = useMemo(() => {
|
||||
if (!points?.length) return [20, 0];
|
||||
return centroid(points);
|
||||
}, [points]);
|
||||
|
||||
if (error) return (
|
||||
<p style={{ color: '#f87171', padding: 24, fontSize: 13 }}>{error}</p>
|
||||
);
|
||||
|
||||
if (points === null) return (
|
||||
<p style={{ color: '#555', padding: 24, fontSize: 13 }}>Loading map…</p>
|
||||
);
|
||||
|
||||
if (points.length === 0) return (
|
||||
<div style={{ textAlign: 'center', paddingTop: 60, color: '#555' }}>
|
||||
<p style={{ fontSize: 15, marginBottom: 8 }}>No geotagged photos.</p>
|
||||
<p style={{ fontSize: 13 }}>Photos with GPS metadata will appear here once indexed.</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{ height: 'calc(100vh - 52px)' }}>
|
||||
<MapContainer
|
||||
center={center}
|
||||
zoom={4}
|
||||
style={{ height: '100%', width: '100%', background: '#1a1a1a' }}
|
||||
>
|
||||
<TileLayer
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>'
|
||||
maxZoom={19}
|
||||
/>
|
||||
|
||||
<MarkerClusterGroup chunkedLoading>
|
||||
{points.map(p => (
|
||||
<Marker key={p.id} position={[p.lat, p.lon]} icon={ICON}>
|
||||
<Popup maxWidth={220} className="luma-popup">
|
||||
<div style={{ margin: 0, padding: 0 }}>
|
||||
{p.thumb_url && (
|
||||
<img
|
||||
src={p.thumb_url}
|
||||
alt=""
|
||||
onClick={() => onOpenPhoto(p)}
|
||||
style={{
|
||||
width: '100%', maxWidth: 200, display: 'block',
|
||||
cursor: 'pointer', borderRadius: 3,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{p.date_taken && (
|
||||
<div style={{ fontSize: 11, color: '#888', marginTop: 4, textAlign: 'center' }}>
|
||||
{new Date(p.date_taken).toLocaleDateString('en-US', {
|
||||
month: 'short', day: 'numeric', year: 'numeric',
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Popup>
|
||||
</Marker>
|
||||
))}
|
||||
</MarkerClusterGroup>
|
||||
</MapContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import PhotoCard from './PhotoCard.jsx';
|
||||
|
||||
export default function MonthGroup({ label, photos, startIdx, onSelect }) {
|
||||
return (
|
||||
<section style={{ marginBottom: 8 }}>
|
||||
<h2 style={{
|
||||
padding: '18px 6px 8px',
|
||||
fontSize: 13,
|
||||
fontWeight: 600,
|
||||
color: '#666',
|
||||
letterSpacing: 0.4,
|
||||
textTransform: 'uppercase',
|
||||
userSelect: 'none',
|
||||
}}>
|
||||
{label}
|
||||
<span style={{ marginLeft: 8, color: '#3a3a3a', fontWeight: 400 }}>
|
||||
{photos.length.toLocaleString()}
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))',
|
||||
gap: 3,
|
||||
}}>
|
||||
{photos.map((photo, i) => (
|
||||
<PhotoCard
|
||||
key={photo.id}
|
||||
photo={photo}
|
||||
onClick={() => onSelect(startIdx + i)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function PhotoCard({ photo, onClick }) {
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [error, setError] = useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={onClick}
|
||||
onKeyDown={e => e.key === 'Enter' && onClick()}
|
||||
style={{
|
||||
aspectRatio: '1',
|
||||
background: '#181818',
|
||||
cursor: 'pointer',
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{photo.thumb_url && !error ? (
|
||||
<img
|
||||
src={photo.thumb_url}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
onLoad={() => setLoaded(true)}
|
||||
onError={() => setError(true)}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
display: 'block',
|
||||
opacity: loaded ? 1 : 0,
|
||||
transition: 'opacity 0.15s ease',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div style={{
|
||||
width: '100%', height: '100%',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
color: '#2a2a2a', fontSize: 20,
|
||||
}}>
|
||||
▪
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { useState, useRef } from 'react';
|
||||
import { addTag, removeTag } from '../api/photos.js';
|
||||
|
||||
export default function TagEditor({ photoId, initialTags }) {
|
||||
const [tags, setTags] = useState(initialTags);
|
||||
const [input, setInput] = useState('');
|
||||
const [busy, setBusy] = useState(false);
|
||||
const inputRef = useRef(null);
|
||||
|
||||
async function handleAdd(e) {
|
||||
e.preventDefault();
|
||||
const name = input.trim();
|
||||
if (!name || busy) return;
|
||||
if (tags.some(t => t.name === name)) { setInput(''); return; }
|
||||
|
||||
setBusy(true);
|
||||
try {
|
||||
const tag = await addTag(photoId, name);
|
||||
setTags(prev => [...prev, tag].sort((a, b) => a.name.localeCompare(b.name)));
|
||||
setInput('');
|
||||
} catch {}
|
||||
setBusy(false);
|
||||
inputRef.current?.focus();
|
||||
}
|
||||
|
||||
async function handleRemove(tagId) {
|
||||
setTags(prev => prev.filter(t => t.id !== tagId)); // optimistic
|
||||
try {
|
||||
await removeTag(photoId, tagId);
|
||||
} catch {
|
||||
// On failure re-fetch would be ideal; for now the optimistic update stays
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{tags.length > 0 && (
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginBottom: 10 }}>
|
||||
{tags.map(t => (
|
||||
<Chip key={t.id} label={t.name} color="neutral" onRemove={() => handleRemove(t.id)} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleAdd} style={{ display: 'flex', gap: 5 }}>
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && handleAdd(e)}
|
||||
placeholder="Add tag…"
|
||||
disabled={busy}
|
||||
maxLength={100}
|
||||
style={iStyle}
|
||||
/>
|
||||
<Btn type="submit" disabled={!input.trim() || busy}>+</Btn>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── shared with CollectionEditor ─────────────────────────────────────────────
|
||||
|
||||
export function Chip({ label, onRemove, color = 'neutral' }) {
|
||||
const colors = {
|
||||
neutral: { bg: '#222', border: '#333', text: '#ccc' },
|
||||
green: { bg: '#1a2a1a', border: '#2a3a2a', text: '#8c8' },
|
||||
};
|
||||
const c = colors[color] ?? colors.neutral;
|
||||
return (
|
||||
<span style={{
|
||||
display: 'inline-flex', alignItems: 'center', gap: 4,
|
||||
background: c.bg, border: `1px solid ${c.border}`,
|
||||
borderRadius: 4, padding: '3px 7px',
|
||||
fontSize: 12, color: c.text,
|
||||
}}>
|
||||
{label}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRemove}
|
||||
style={{ background: 'none', border: 'none', color: '#555', cursor: 'pointer', fontSize: 15, lineHeight: 1, padding: 0, marginLeft: 1 }}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export const iStyle = {
|
||||
flex: 1,
|
||||
background: '#181818', border: '1px solid #2a2a2a', borderRadius: 4,
|
||||
padding: '5px 8px', color: '#ccc', fontSize: 12, outline: 'none',
|
||||
minWidth: 0,
|
||||
};
|
||||
|
||||
export function Btn({ children, style: overrides, disabled, ...props }) {
|
||||
return (
|
||||
<button
|
||||
disabled={disabled}
|
||||
{...props}
|
||||
style={{
|
||||
background: '#222', border: '1px solid #333', borderRadius: 4,
|
||||
color: '#999', fontSize: 16, cursor: 'pointer',
|
||||
width: 30, height: 30, flexShrink: 0,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
opacity: disabled ? 0.4 : 1,
|
||||
...overrides,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import MonthGroup from './MonthGroup.jsx';
|
||||
|
||||
function groupByMonth(photos) {
|
||||
const groups = [];
|
||||
let current = null;
|
||||
|
||||
for (const photo of photos) {
|
||||
const key = photo.date_taken ? photo.date_taken.slice(0, 7) : 'undated';
|
||||
|
||||
if (!current || current.key !== key) {
|
||||
current = { key, label: monthLabel(photo.date_taken), photos: [] };
|
||||
groups.push(current);
|
||||
}
|
||||
current.photos.push(photo);
|
||||
}
|
||||
|
||||
return groups;
|
||||
}
|
||||
|
||||
function monthLabel(dateTaken) {
|
||||
if (!dateTaken) return 'Undated';
|
||||
return new Date(dateTaken).toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
|
||||
}
|
||||
|
||||
export default function Timeline({ photos, onSelect }) {
|
||||
if (!photos.length) return null;
|
||||
|
||||
const groups = groupByMonth(photos);
|
||||
let globalIdx = 0;
|
||||
|
||||
return (
|
||||
<main style={{ padding: '0 3px' }}>
|
||||
{groups.map(group => {
|
||||
const startIdx = globalIdx;
|
||||
globalIdx += group.photos.length;
|
||||
return (
|
||||
<MonthGroup
|
||||
key={group.key}
|
||||
label={group.label}
|
||||
photos={group.photos}
|
||||
startIdx={startIdx}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0f0f0f;
|
||||
color: #e0e0e0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
||||
min-height: 100dvh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
background: #1e1e1e;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App.jsx';
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>
|
||||
);
|
||||
Reference in new issue
Block a user