Loading…
} + {nextCursor === null && photos.length > 0 && !loading && ( ++ — {total?.toLocaleString()} photo{total === 1 ? '' : 's'} — +
+ )} + + )} + + {/* ── Map ── */} + {view === 'map' && ( +
+ {collections.length > 0 && (
+
+ );
+}
diff --git a/client/src/components/DetailPanel.jsx b/client/src/components/DetailPanel.jsx
new file mode 100644
index 0000000..980dbc1
--- /dev/null
+++ b/client/src/components/DetailPanel.jsx
@@ -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
+ {collections.map(c => (
+ handleRemove(c.id)} />
+ ))}
+
+ )}
+
+ {mode === 'select' ? (
+
+
+ {selectedId && + }
+ setMode('create')}
+ style={{ width: 'auto', padding: '0 10px', fontSize: 11 }}
+ >
+ New
+
+
+ ) : (
+
+ setNewName(e.target.value)}
+ onKeyDown={e => { if (e.key === 'Enter') handleAdd(); if (e.key === 'Escape') setMode('select'); }}
+ placeholder="Collection name…"
+ maxLength={200}
+ style={iStyle}
+ />
+ +
+ setMode('select')}>×
+
+ )}
+ Loading…
;
+ }
+ if (!photo) return null;
+
+ const filename = photo.filepath?.split('/').pop();
+
+ return (
+
+
+
+ {filename && |
}
+ {photo.date_taken && (
+ |
+ )}
+ {photo.date_imported && (
+ |
+ )}
+ {photo.width && photo.height && (
+ |
+ )}
+ {photo.filesize && (
+ |
+ )}
+
+
+ {photo.camera_model && (
+
+ |
+
+ )}
+
+ {photo.gps_lat != null && (
+
+ |
+
+ Open in Maps ↗
+
+
+ )}
+
+
+
+
+
+
+
+
+ );
+}
+
+function Section({ label, children }) {
+ return (
+
+
+ );
+}
+
+function Row({ k, v, mono }) {
+ return (
+
+ {label}
+
+ {children}
+
+ {k}
+
+ {v}
+
+
+ );
+}
+
+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' };
diff --git a/client/src/components/DuplicateGroup.jsx b/client/src/components/DuplicateGroup.jsx
new file mode 100644
index 0000000..9977f56
--- /dev/null
+++ b/client/src/components/DuplicateGroup.jsx
@@ -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 (
+
+ {/* Photo row */}
+
+ );
+}
diff --git a/client/src/components/DuplicatesView.jsx b/client/src/components/DuplicatesView.jsx
new file mode 100644
index 0000000..7e31a71
--- /dev/null
+++ b/client/src/components/DuplicatesView.jsx
@@ -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 (
+
+ {photos.map((photo, i) => (
+
+
+ {/* Footer */}
+
+
+ ))}
+ onOpen(photo)}
+ style={{
+ aspectRatio: '4/3',
+ cursor: 'pointer',
+ background: '#0c0c0c',
+ overflow: 'hidden',
+ position: 'relative',
+ }}
+ >
+ {photo.thumb_url ? (
+ 
+ ) : (
+
+
+ {/* Meta */}
+ ▪
+ )}
+
+ {/* Index badge */}
+
+ {i + 1}
+
+
+ {fmtDate(photo.date_taken)}
+
+ {[fmtSize(photo.filesize), photo.width && `${photo.width}×${photo.height}`].filter(Boolean).join(' · ')}
+
+ {photo.camera_model && (
+
+ {photo.camera_model}
+
+ )}
+
+
+
+ {photos.length} similar photos
+
+
+
+
+ {/* Toolbar */}
+
+ );
+}
diff --git a/client/src/components/FilterBar.jsx b/client/src/components/FilterBar.jsx
new file mode 100644
index 0000000..658e3dd
--- /dev/null
+++ b/client/src/components/FilterBar.jsx
@@ -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 (
+
+
+
+ {error && (
+ Similar photos
+ + + + {scanResult && ( + + {scanResult.newPairs === 0 + ? 'No new pairs' + : `${scanResult.newPairs} new pair${scanResult.newPairs !== 1 ? 's' : ''} found`} + {' · '}{scanResult.photos.toLocaleString()} photos · {scanResult.duration}ms + + )} +{error}
+ )} + + {groups === null && ( +Loading…
+ )} + + {groups !== null && groups.length === 0 && ( +
+
+ )}
+
+ {groups !== null && groups.length > 0 && (
+ No similar photos to review.
+Click "Scan library" to compare perceptual hashes across your library.
+
+ handleDismiss(group.map(p => p.id))}
+ onOpen={(photo) => onOpenPhoto(photo, group)}
+ />
+ ))}
+
+ )}
+ + {groups.length} group{groups.length !== 1 ? 's' : ''} — click a photo to inspect it, "Not duplicates" to dismiss +
+ {groups.map((group, i) => ( +
+ onChange({ ...filters, q: e.target.value })}
+ style={{ ...s, width: 160 }}
+ />
+
+ onChange({ ...filters, from: e.target.value })}
+ style={{ ...s, colorScheme: 'dark' }}
+ title="From date"
+ />
+ –
+ onChange({ ...filters, to: e.target.value })}
+ style={{ ...s, colorScheme: 'dark' }}
+ title="To date"
+ />
+
+ {tags.length > 0 && (
+
+ )}
+
+ {collections.length > 0 && (
+
+ )}
+
+ {isActive(filters) && (
+
+ )}
+
+ );
+}
diff --git a/client/src/components/Lightbox.jsx b/client/src/components/Lightbox.jsx
new file mode 100644
index 0000000..a0e62f4
--- /dev/null
+++ b/client/src/components/Lightbox.jsx
@@ -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 (
+
+
+ {/* ── Image area ── */}
+
+ );
+}
+
+function IconBtn({ onClick, active, title, children }) {
+ return (
+
+ );
+}
+
+function NavBtn({ side, onClick, children }) {
+ return (
+
+ );
+}
+
+function InfoIcon() {
+ return (
+
+ );
+}
diff --git a/client/src/components/MapView.jsx b/client/src/components/MapView.jsx
new file mode 100644
index 0000000..54db137
--- /dev/null
+++ b/client/src/components/MapView.jsx
@@ -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: ``,
+ 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 (
+
+ {/* Toolbar */}
+ { e.stopPropagation(); onChange(index - 1); }}>‹
+ )}
+ {/* Right nav */}
+ {index < photos.length - 1 && (
+ { e.stopPropagation(); onChange(index + 1); }}>›
+ )}
+
+ 
e.stopPropagation()}
+ style={{
+ maxWidth: '100%',
+ maxHeight: 'calc(100vh - 20px)',
+ objectFit: 'contain',
+ display: 'block',
+ }}
+ />
+
+
+ {/* ── Detail panel ── */}
+ {showInfo && (
+ e.stopPropagation()}
+ style={{ position: 'absolute', top: 0, right: 0, display: 'flex', gap: 4, padding: 10, zIndex: 10 }}
+ >
+ setShowInfo(s => !s)}
+ active={showInfo}
+ title="Info [i]"
+ >
+
+ ✕
+
+
+ {/* Left nav */}
+ {index > 0 && (
+
+
+ )}
+ {error}
+ ); + + if (points === null) return ( +Loading map…
+ ); + + if (points.length === 0) return ( +
+
+ );
+
+ return (
+ No geotagged photos.
+Photos with GPS metadata will appear here once indexed.
+
+
+
+ {points.map(p => (
+
+
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/client/src/components/MonthGroup.jsx b/client/src/components/MonthGroup.jsx
new file mode 100644
index 0000000..70af5c8
--- /dev/null
+++ b/client/src/components/MonthGroup.jsx
@@ -0,0 +1,36 @@
+import PhotoCard from './PhotoCard.jsx';
+
+export default function MonthGroup({ label, photos, startIdx, onSelect }) {
+ return (
+
+ {p.thumb_url && (
+ 
onOpenPhoto(p)}
+ style={{
+ width: '100%', maxWidth: 200, display: 'block',
+ cursor: 'pointer', borderRadius: 3,
+ }}
+ />
+ )}
+ {p.date_taken && (
+
+
+ {new Date(p.date_taken).toLocaleDateString('en-US', {
+ month: 'short', day: 'numeric', year: 'numeric',
+ })}
+
+ )}
+ + {label} + + {photos.length.toLocaleString()} + +
+ +
+ {photos.map((photo, i) => (
+ onSelect(startIdx + i)}
+ />
+ ))}
+
+ e.key === 'Enter' && onClick()}
+ style={{
+ aspectRatio: '1',
+ background: '#181818',
+ cursor: 'pointer',
+ overflow: 'hidden',
+ position: 'relative',
+ }}
+ >
+ {photo.thumb_url && !error ? (
+ setLoaded(true)}
+ onError={() => setError(true)}
+ style={{
+ width: '100%',
+ height: '100%',
+ objectFit: 'cover',
+ display: 'block',
+ opacity: loaded ? 1 : 0,
+ transition: 'opacity 0.15s ease',
+ }}
+ />
+ ) : (
+
+ );
+}
diff --git a/client/src/components/TagEditor.jsx b/client/src/components/TagEditor.jsx
new file mode 100644
index 0000000..2cdbc87
--- /dev/null
+++ b/client/src/components/TagEditor.jsx
@@ -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 (
+
+ ▪
+
+ )}
+
+ {tags.length > 0 && (
+
+ );
+}
+
+// ── 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 (
+
+ {label}
+
+
+ );
+}
+
+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 (
+
+ );
+}
diff --git a/client/src/components/Timeline.jsx b/client/src/components/Timeline.jsx
new file mode 100644
index 0000000..658b277
--- /dev/null
+++ b/client/src/components/Timeline.jsx
@@ -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 (
+
+ {tags.map(t => (
+ handleRemove(t.id)} />
+ ))}
+
+ )}
+
+
+