From 51c752602a20c0779837762d56162acd49df2280 Mon Sep 17 00:00:00 2001
From: nmemmert <67961292+nmemmert@users.noreply.github.com>
Date: Tue, 18 Aug 2026 15:02:52 -0400
Subject: [PATCH] feat: Albums view, auto albums, EXIF details, download, bulk
 select
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Albums tab with manual album CRUD (create/delete, cover photo grid)
and Smart Albums auto-generated by year, city, and camera model using
SQLite window functions — no extra storage, computed from existing data.

Lightbox gets a download-original button (streams raw file with
Content-Disposition: attachment).

DetailPanel Camera section expands to show ISO, aperture, shutter speed,
focal length, and lens model extracted at ingest time; five new DB columns
added via safe ALTER TABLE migration.

Bulk selection: hover a photo to reveal a circle checkbox; selecting
any photo activates a floating action bar for star/unstar and add-to-album
across the whole selection. PhotoCard wrapped in React.memo to limit
re-renders to only affected cards.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 client/src/App.jsx                    | 114 ++++++++++-
 client/src/api/photos.js              |  22 +++
 client/src/components/AlbumsView.jsx  | 261 ++++++++++++++++++++++++++
 client/src/components/DetailPanel.jsx |  10 +-
 client/src/components/Lightbox.jsx    |  15 ++
 client/src/components/MonthGroup.jsx  |   5 +-
 client/src/components/PhotoCard.jsx   |  60 ++++--
 client/src/components/Timeline.jsx    |   5 +-
 server/index.js                       | 104 +++++++++-
 worker/db.js                          |  11 +-
 worker/ingest.js                      |  22 ++-
 11 files changed, 598 insertions(+), 31 deletions(-)
 create mode 100644 client/src/components/AlbumsView.jsx

diff --git a/client/src/App.jsx b/client/src/App.jsx
index e2c6f32..41bc190 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
-import { fetchPhotos, fetchLibraryStats, fetchVideoStats } from './api/photos.js';
+import { fetchPhotos, fetchLibraryStats, fetchVideoStats, bulkStar, bulkAddToCollection } from './api/photos.js';
 import Timeline from './components/Timeline.jsx';
 import Lightbox from './components/Lightbox.jsx';
 import FilterSidebar from './components/FilterSidebar.jsx';
@@ -11,6 +11,7 @@ import { lazy, Suspense } from 'react';
 const MapView      = lazy(() => import('./components/MapView.jsx'));
 const MemoriesView = lazy(() => import('./components/MemoriesView.jsx'));
 const VideosView   = lazy(() => import('./components/VideosView.jsx'));
+const AlbumsView   = lazy(() => import('./components/AlbumsView.jsx'));
 
 const EMPTY_FILTERS       = { q: '', from: '', to: '', tagId: '', collectionId: '', starred: '', city: '' };
 const EMPTY_VIDEO_FILTERS = { q: '', from: '', to: '', tagId: '', collectionId: '', starred: '', city: '' };
@@ -30,9 +31,10 @@ export default function App() {
   const [videoFilters, setVideoFilters] = useState(EMPTY_VIDEO_FILTERS);
   const [videoStats, setVideoStats]   = useState(null);
 
-  const [lbPhotos, setLbPhotos]       = useState(null);
-  const [lbIndex, setLbIndex]         = useState(null);
+  const [lbPhotos, setLbPhotos]         = useState(null);
+  const [lbIndex, setLbIndex]           = useState(null);
   const [showSettings, setShowSettings] = useState(false);
+  const [selected, setSelected]         = useState(new Set());
 
   const loadingRef  = useRef(false);
   const sentinelRef = useRef(null);
@@ -90,6 +92,46 @@ export default function App() {
     return () => obs.disconnect();
   }, [nextCursor, view, filters]);
 
+  function toggleSelect(photoId) {
+    setSelected(prev => {
+      const next = new Set(prev);
+      next.has(photoId) ? next.delete(photoId) : next.add(photoId);
+      return next;
+    });
+  }
+
+  function clearSelection() { setSelected(new Set()); }
+
+  async function handleBulkStar(starred) {
+    const ids = [...selected];
+    try {
+      await bulkStar(ids, starred);
+      const idSet = new Set(ids);
+      setPhotos(prev => prev.map(p => idSet.has(p.id) ? { ...p, starred } : p));
+      clearSelection();
+      loadStats();
+    } catch {}
+  }
+
+  async function handleBulkAddToCollection(collectionId) {
+    if (!collectionId) return;
+    try {
+      await bulkAddToCollection([...selected], Number(collectionId));
+      clearSelection();
+    } catch {}
+  }
+
+  function handleSelectAlbum({ type, collectionId, year, city, camera }) {
+    const f = { q: '', from: '', to: '', tagId: '', collectionId: '', starred: '', city: '' };
+    if (type === 'collection') f.collectionId = String(collectionId);
+    else if (type === 'year')  { f.from = `${year}-01-01`; f.to = `${year}-12-31`; }
+    else if (type === 'city')  f.city = city;
+    else if (type === 'camera') f.q = camera;
+    setFilters(f);
+    setView('library');
+    clearSelection();
+  }
+
   function openLightbox(photosArr, idx) {
     setLbPhotos(photosArr);
     setLbIndex(idx);
@@ -128,7 +170,7 @@ export default function App() {
         </span>
 
         <nav style={{ display: 'flex', gap: 2 }}>
-          <Tab active={view === 'library'}    onClick={() => setView('library')}>
+          <Tab active={view === 'library'}    onClick={() => { setView('library'); clearSelection(); }}>
             Library
             {total !== null && (
               <span style={{ marginLeft: 6, fontSize: 12, color: view === 'library' ? '#777' : '#666' }}>
@@ -136,10 +178,11 @@ export default function App() {
               </span>
             )}
           </Tab>
-          <Tab active={view === 'videos'}     onClick={() => setView('videos')}>Videos</Tab>
-          <Tab active={view === 'memories'}   onClick={() => setView('memories')}>Memories</Tab>
-          <Tab active={view === 'map'}        onClick={() => setView('map')}>Map</Tab>
-          <Tab active={view === 'duplicates'} onClick={() => setView('duplicates')}>
+          <Tab active={view === 'albums'}     onClick={() => { setView('albums'); clearSelection(); }}>Albums</Tab>
+          <Tab active={view === 'videos'}     onClick={() => { setView('videos'); clearSelection(); }}>Videos</Tab>
+          <Tab active={view === 'memories'}   onClick={() => { setView('memories'); clearSelection(); }}>Memories</Tab>
+          <Tab active={view === 'map'}        onClick={() => { setView('map'); clearSelection(); }}>Map</Tab>
+          <Tab active={view === 'duplicates'} onClick={() => { setView('duplicates'); clearSelection(); }}>
             Duplicates
             {dupeCount > 0 && (
               <span style={{
@@ -227,7 +270,13 @@ export default function App() {
                   )}
                 </div>
               )}
-              <Timeline photos={photos} onSelect={(idx) => openLightbox(photos, idx)} />
+              <Timeline
+                photos={photos}
+                onSelect={(idx) => openLightbox(photos, idx)}
+                selected={selected}
+                onToggle={toggleSelect}
+                selectionActive={selected.size > 0}
+              />
               <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 && (
@@ -238,6 +287,13 @@ export default function App() {
             </>
           )}
 
+          {/* Albums */}
+          {view === 'albums' && (
+            <Suspense fallback={<p style={{ padding: 24, color: '#777', fontSize: 13 }}>Loading…</p>}>
+              <AlbumsView onSelectAlbum={handleSelectAlbum} />
+            </Suspense>
+          )}
+
           {/* Videos */}
           {view === 'videos' && (
             <Suspense fallback={<p style={{ padding: 24, color: '#777', fontSize: 13 }}>Loading…</p>}>
@@ -271,6 +327,41 @@ export default function App() {
         </div>
       </div>
 
+      {/* Bulk action bar */}
+      {selected.size > 0 && view === 'library' && (
+        <div style={{
+          position: 'fixed', bottom: 20, left: '50%', transform: 'translateX(-50%)',
+          background: '#1c1c1c', border: '1px solid #2e2e2e', borderRadius: 12,
+          padding: '9px 16px', display: 'flex', alignItems: 'center', gap: 10,
+          boxShadow: '0 8px 32px rgba(0,0,0,0.7)',
+          zIndex: 500, whiteSpace: 'nowrap',
+        }}>
+          <span style={{ fontSize: 13, color: '#ccc', fontWeight: 600 }}>
+            {selected.size} selected
+          </span>
+          <div style={{ width: 1, height: 18, background: '#333', flexShrink: 0 }} />
+          <button onClick={() => handleBulkStar(true)}  style={bulkBtn}>★ Star</button>
+          <button onClick={() => handleBulkStar(false)} style={bulkBtn}>☆ Unstar</button>
+          {stats?.collections?.length > 0 && (
+            <select
+              defaultValue=""
+              onChange={e => { handleBulkAddToCollection(e.target.value); e.target.value = ''; }}
+              style={{
+                background: '#111', border: '1px solid #333', borderRadius: 6,
+                color: '#ccc', cursor: 'pointer', fontSize: 12, padding: '5px 8px',
+              }}
+            >
+              <option value="">Add to album…</option>
+              {stats.collections.map(c => (
+                <option key={c.id} value={c.id}>{c.name}</option>
+              ))}
+            </select>
+          )}
+          <div style={{ width: 1, height: 18, background: '#333', flexShrink: 0 }} />
+          <button onClick={clearSelection} style={{ ...bulkBtn, color: '#666' }}>✕ Clear</button>
+        </div>
+      )}
+
       {/* Settings panel */}
       {showSettings && <SettingsPanel onClose={() => setShowSettings(false)} />}
 
@@ -288,6 +379,11 @@ export default function App() {
   );
 }
 
+const bulkBtn = {
+  background: 'transparent', border: '1px solid #333', borderRadius: 6,
+  color: '#ccc', cursor: 'pointer', fontSize: 12, padding: '5px 11px',
+};
+
 function Tab({ active, onClick, children }) {
   return (
     <button
diff --git a/client/src/api/photos.js b/client/src/api/photos.js
index 0cbbf13..03fa471 100644
--- a/client/src/api/photos.js
+++ b/client/src/api/photos.js
@@ -130,6 +130,28 @@ export function fetchMemories() {
   return api(`/api/memories/today?date=${date}`);
 }
 
+// Albums
+export function fetchAlbums() {
+  return api('/api/albums');
+}
+
+export function renameCollection(id, name) {
+  return api(`/api/collections/${id}`, { method: 'PATCH', ...json({ name }) });
+}
+
+export function deleteCollection(id) {
+  return api(`/api/collections/${id}`, { method: 'DELETE' });
+}
+
+// Bulk operations
+export function bulkStar(ids, starred) {
+  return api('/api/photos/bulk', { method: 'PATCH', ...json({ ids, starred }) });
+}
+
+export function bulkAddToCollection(ids, collectionId) {
+  return api('/api/photos/bulk/collections', { method: 'POST', ...json({ ids, collectionId }) });
+}
+
 // Duplicates
 export function fetchDuplicates() {
   return api('/api/duplicates');
diff --git a/client/src/components/AlbumsView.jsx b/client/src/components/AlbumsView.jsx
new file mode 100644
index 0000000..3eb7ec7
--- /dev/null
+++ b/client/src/components/AlbumsView.jsx
@@ -0,0 +1,261 @@
+import { useState, useEffect } from 'react';
+import { fetchAlbums, createCollection, deleteCollection } from '../api/photos.js';
+
+export default function AlbumsView({ onSelectAlbum }) {
+  const [albums,   setAlbums]   = useState(null);
+  const [creating, setCreating] = useState(false);
+  const [newName,  setNewName]  = useState('');
+  const [busy,     setBusy]     = useState(false);
+
+  useEffect(() => { load(); }, []);
+
+  async function load() {
+    try { setAlbums(await fetchAlbums()); } catch {}
+  }
+
+  async function handleCreate(e) {
+    e.preventDefault();
+    const name = newName.trim();
+    if (!name || busy) return;
+    setBusy(true);
+    try {
+      await createCollection(name);
+      setNewName('');
+      setCreating(false);
+      await load();
+    } catch {}
+    setBusy(false);
+  }
+
+  async function handleDelete(id, name) {
+    if (!confirm(`Delete "${name}"? Photos won't be deleted.`)) return;
+    try { await deleteCollection(id); await load(); } catch {}
+  }
+
+  if (!albums) return <p style={{ padding: 24, color: '#777', fontSize: 13 }}>Loading…</p>;
+
+  const { manual, auto } = albums;
+  const hasAuto = auto.years.length > 0 || auto.cities.length > 0 || auto.cameras.length > 0;
+
+  return (
+    <div style={{ padding: '28px 24px', maxWidth: 1100, margin: '0 auto' }}>
+
+      {/* My Albums */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
+        <h2 style={{ fontSize: 18, fontWeight: 700, color: '#ddd', margin: 0 }}>My Albums</h2>
+        <button
+          onClick={() => { setCreating(c => !c); setNewName(''); }}
+          style={newAlbumBtn}
+        >
+          {creating ? 'Cancel' : '+ New Album'}
+        </button>
+      </div>
+
+      {creating && (
+        <form onSubmit={handleCreate} style={{ marginBottom: 20, display: 'flex', gap: 8, maxWidth: 380 }}>
+          <input
+            autoFocus
+            value={newName}
+            onChange={e => setNewName(e.target.value)}
+            placeholder="Album name…"
+            maxLength={200}
+            style={inputSt}
+          />
+          <button type="submit" disabled={!newName.trim() || busy} style={submitSt}>
+            Create
+          </button>
+        </form>
+      )}
+
+      {manual.length === 0 && !creating && (
+        <p style={{ color: '#555', fontSize: 13, marginBottom: 32 }}>
+          No albums yet — create one to start organizing your photos.
+        </p>
+      )}
+
+      {manual.length > 0 && (
+        <AlbumGrid>
+          {manual.map(col => (
+            <AlbumCard
+              key={col.id}
+              cover={col.cover_url}
+              title={col.name}
+              count={col.photo_count}
+              onClick={() => onSelectAlbum({ type: 'collection', collectionId: col.id, name: col.name })}
+              onDelete={() => handleDelete(col.id, col.name)}
+            />
+          ))}
+        </AlbumGrid>
+      )}
+
+      {/* Smart Albums */}
+      {hasAuto && (
+        <>
+          <div style={{ marginTop: 48, marginBottom: 16 }}>
+            <h2 style={{ fontSize: 18, fontWeight: 700, color: '#ddd', margin: 0 }}>Smart Albums</h2>
+            <p style={{ fontSize: 12, color: '#555', marginTop: 4 }}>
+              Auto-generated from your library
+            </p>
+          </div>
+
+          {auto.years.length > 0 && (
+            <>
+              <SubHeader>Years</SubHeader>
+              <AlbumGrid>
+                {auto.years.map(r => (
+                  <AlbumCard
+                    key={r.year}
+                    cover={r.cover_url}
+                    title={r.year}
+                    count={r.count}
+                    onClick={() => onSelectAlbum({ type: 'year', year: r.year, name: r.year })}
+                  />
+                ))}
+              </AlbumGrid>
+            </>
+          )}
+
+          {auto.cities.length > 0 && (
+            <>
+              <SubHeader>Places</SubHeader>
+              <AlbumGrid>
+                {auto.cities.map(r => (
+                  <AlbumCard
+                    key={r.city}
+                    cover={r.cover_url}
+                    title={r.city}
+                    subtitle={r.country}
+                    count={r.count}
+                    onClick={() => onSelectAlbum({ type: 'city', city: r.city, name: r.city })}
+                  />
+                ))}
+              </AlbumGrid>
+            </>
+          )}
+
+          {auto.cameras.length > 0 && (
+            <>
+              <SubHeader>Cameras</SubHeader>
+              <AlbumGrid>
+                {auto.cameras.map(r => (
+                  <AlbumCard
+                    key={r.camera}
+                    cover={r.cover_url}
+                    title={r.camera}
+                    count={r.count}
+                    onClick={() => onSelectAlbum({ type: 'camera', camera: r.camera, name: r.camera })}
+                  />
+                ))}
+              </AlbumGrid>
+            </>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+function SubHeader({ children }) {
+  return (
+    <div style={{
+      fontSize: 11, fontWeight: 700, color: '#555',
+      textTransform: 'uppercase', letterSpacing: '0.08em',
+      marginTop: 28, marginBottom: 12,
+    }}>
+      {children}
+    </div>
+  );
+}
+
+function AlbumGrid({ children }) {
+  return (
+    <div style={{
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fill, minmax(175px, 1fr))',
+      gap: 18,
+      marginBottom: 8,
+    }}>
+      {children}
+    </div>
+  );
+}
+
+function AlbumCard({ cover, title, subtitle, count, onClick, onDelete }) {
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <div
+      onClick={onClick}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{ cursor: 'pointer', userSelect: 'none' }}
+    >
+      <div style={{
+        aspectRatio: '1',
+        borderRadius: 10,
+        overflow: 'hidden',
+        background: '#1a1a1a',
+        position: 'relative',
+        marginBottom: 9,
+        boxShadow: hovered ? '0 6px 24px rgba(0,0,0,0.55)' : '0 2px 10px rgba(0,0,0,0.35)',
+        transform: hovered ? 'scale(1.025)' : 'scale(1)',
+        transition: 'box-shadow 0.18s, transform 0.18s',
+      }}>
+        {cover ? (
+          <img
+            src={cover}
+            alt=""
+            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+          />
+        ) : (
+          <div style={{
+            width: '100%', height: '100%',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            fontSize: 36, color: '#252525',
+          }}>
+            ▪
+          </div>
+        )}
+
+        {onDelete && hovered && (
+          <button
+            onClick={e => { e.stopPropagation(); onDelete(); }}
+            title="Delete album"
+            style={{
+              position: 'absolute', top: 7, right: 7,
+              background: 'rgba(0,0,0,0.72)', border: 'none',
+              borderRadius: 5, color: '#bbb', cursor: 'pointer',
+              width: 26, height: 26, fontSize: 13,
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+            }}
+          >
+            ✕
+          </button>
+        )}
+      </div>
+
+      <div style={{ fontSize: 13, fontWeight: 600, color: '#ccc', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+        {title}
+      </div>
+      {subtitle && (
+        <div style={{ fontSize: 11, color: '#555', marginTop: 1 }}>{subtitle}</div>
+      )}
+      <div style={{ fontSize: 12, color: '#444', marginTop: 2 }}>
+        {(count ?? 0).toLocaleString()} photo{count === 1 ? '' : 's'}
+      </div>
+    </div>
+  );
+}
+
+const newAlbumBtn = {
+  background: 'transparent', border: '1px solid #2a2a2a', borderRadius: 7,
+  color: '#7ab8f5', cursor: 'pointer', fontSize: 12, padding: '6px 14px',
+};
+const inputSt = {
+  flex: 1, background: '#1a1a1a', border: '1px solid #272727',
+  borderRadius: 7, color: '#ccc', fontSize: 13, padding: '7px 12px', outline: 'none',
+};
+const submitSt = {
+  background: '#4d9eff', border: 'none', borderRadius: 7,
+  color: '#fff', cursor: 'pointer', fontSize: 13, padding: '7px 16px', fontWeight: 600,
+};
diff --git a/client/src/components/DetailPanel.jsx b/client/src/components/DetailPanel.jsx
index 840815e..438a5ee 100644
--- a/client/src/components/DetailPanel.jsx
+++ b/client/src/components/DetailPanel.jsx
@@ -42,9 +42,15 @@ export default function DetailPanel({ photoId }) {
         )}
       </Section>
 
-      {photo.camera_model && (
+      {(photo.camera_model || photo.lens_model || photo.focal_length != null ||
+        photo.aperture != null || photo.shutter_speed || photo.iso != null) && (
         <Section label="Camera">
-          <Row k="Model" v={photo.camera_model} />
+          {photo.camera_model  && <Row k="Model"    v={photo.camera_model} />}
+          {photo.lens_model    && <Row k="Lens"     v={photo.lens_model} />}
+          {photo.focal_length  != null && <Row k="Focal"    v={`${photo.focal_length}mm`} />}
+          {photo.aperture      != null && <Row k="Aperture" v={`ƒ/${photo.aperture}`} />}
+          {photo.shutter_speed && <Row k="Shutter"  v={photo.shutter_speed} />}
+          {photo.iso           != null && <Row k="ISO"      v={`ISO ${photo.iso}`} />}
         </Section>
       )}
 
diff --git a/client/src/components/Lightbox.jsx b/client/src/components/Lightbox.jsx
index 7e3f4b0..e79e6bc 100644
--- a/client/src/components/Lightbox.jsx
+++ b/client/src/components/Lightbox.jsx
@@ -57,6 +57,21 @@ export default function Lightbox({ photos, index, onClose, onChange, onStarChang
           >
             ★
           </IconBtn>
+          <a
+            href={`/api/photos/${photo.id}/download`}
+            download
+            title="Download original"
+            style={{
+              background: 'rgba(255,255,255,0.06)',
+              border: '1px solid rgba(255,255,255,0.1)',
+              borderRadius: 6, color: '#888', cursor: 'pointer',
+              width: 32, height: 32,
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              fontSize: 15, textDecoration: 'none', flexShrink: 0,
+            }}
+          >
+            ↓
+          </a>
           <IconBtn
             onClick={() => setShowInfo(s => !s)}
             active={showInfo}
diff --git a/client/src/components/MonthGroup.jsx b/client/src/components/MonthGroup.jsx
index ba8220d..86543f3 100644
--- a/client/src/components/MonthGroup.jsx
+++ b/client/src/components/MonthGroup.jsx
@@ -1,6 +1,6 @@
 import PhotoCard from './PhotoCard.jsx';
 
-export default function MonthGroup({ label, photos, startIdx, onSelect }) {
+export default function MonthGroup({ label, photos, startIdx, onSelect, selected, onToggle, selectionActive }) {
   return (
     <section style={{ marginBottom: 8 }}>
       <h2 style={{
@@ -28,6 +28,9 @@ export default function MonthGroup({ label, photos, startIdx, onSelect }) {
             key={photo.id}
             photo={photo}
             onClick={() => onSelect(startIdx + i)}
+            isSelected={selected?.has(photo.id) ?? false}
+            onToggle={onToggle}
+            selectionActive={selectionActive}
           />
         ))}
       </div>
diff --git a/client/src/components/PhotoCard.jsx b/client/src/components/PhotoCard.jsx
index e19d36c..59c241d 100644
--- a/client/src/components/PhotoCard.jsx
+++ b/client/src/components/PhotoCard.jsx
@@ -1,23 +1,61 @@
-import { useState } from 'react';
+import { useState, memo } from 'react';
 
-export default function PhotoCard({ photo, onClick }) {
-  const [loaded, setLoaded] = useState(false);
-  const [error,  setError]  = useState(false);
+function PhotoCard({ photo, onClick, isSelected, onToggle, selectionActive }) {
+  const [loaded,  setLoaded]  = useState(false);
+  const [error,   setError]   = useState(false);
+  const [hovered, setHovered] = useState(false);
+
+  function handleClick() {
+    if (selectionActive) {
+      onToggle?.(photo.id);
+    } else {
+      onClick();
+    }
+  }
+
+  const showCheck = (hovered || isSelected || selectionActive) && onToggle;
 
   return (
     <div
       role="button"
       tabIndex={0}
-      onClick={onClick}
-      onKeyDown={e => e.key === 'Enter' && onClick()}
+      onClick={handleClick}
+      onKeyDown={e => e.key === 'Enter' && handleClick()}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
       style={{
         aspectRatio: '1',
         background: '#181818',
         cursor: 'pointer',
         overflow: 'hidden',
         position: 'relative',
+        outline: isSelected ? '2px solid #4d9eff' : 'none',
+        outlineOffset: '-2px',
       }}
     >
+      {/* Checkbox */}
+      {showCheck && (
+        <div
+          onClick={e => { e.stopPropagation(); onToggle(photo.id); }}
+          style={{
+            position: 'absolute', top: 6, left: 6, zIndex: 2,
+            width: 20, height: 20, borderRadius: '50%',
+            background: isSelected ? '#4d9eff' : 'rgba(0,0,0,0.55)',
+            border: isSelected ? 'none' : '1.5px solid rgba(255,255,255,0.75)',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            fontSize: 11, color: '#fff',
+            transition: 'background 0.12s',
+          }}
+        >
+          {isSelected && '✓'}
+        </div>
+      )}
+
+      {/* Selection tint */}
+      {isSelected && (
+        <div style={{ position: 'absolute', inset: 0, background: 'rgba(77,158,255,0.18)', zIndex: 1 }} />
+      )}
+
       {photo.thumb_url && !error ? (
         <img
           src={photo.thumb_url}
@@ -27,12 +65,8 @@ export default function PhotoCard({ photo, onClick }) {
           onLoad={() => setLoaded(true)}
           onError={() => setError(true)}
           style={{
-            width: '100%',
-            height: '100%',
-            objectFit: 'cover',
-            display: 'block',
-            opacity: loaded ? 1 : 0,
-            transition: 'opacity 0.15s ease',
+            width: '100%', height: '100%', objectFit: 'cover', display: 'block',
+            opacity: loaded ? 1 : 0, transition: 'opacity 0.15s ease',
           }}
         />
       ) : (
@@ -47,3 +81,5 @@ export default function PhotoCard({ photo, onClick }) {
     </div>
   );
 }
+
+export default memo(PhotoCard);
diff --git a/client/src/components/Timeline.jsx b/client/src/components/Timeline.jsx
index 658b277..292ff0b 100644
--- a/client/src/components/Timeline.jsx
+++ b/client/src/components/Timeline.jsx
@@ -22,7 +22,7 @@ function monthLabel(dateTaken) {
   return new Date(dateTaken).toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
 }
 
-export default function Timeline({ photos, onSelect }) {
+export default function Timeline({ photos, onSelect, selected, onToggle, selectionActive }) {
   if (!photos.length) return null;
 
   const groups = groupByMonth(photos);
@@ -40,6 +40,9 @@ export default function Timeline({ photos, onSelect }) {
             photos={group.photos}
             startIdx={startIdx}
             onSelect={onSelect}
+            selected={selected}
+            onToggle={onToggle}
+            selectionActive={selectionActive}
           />
         );
       })}
diff --git a/server/index.js b/server/index.js
index 11d02e5..b737bcf 100644
--- a/server/index.js
+++ b/server/index.js
@@ -156,6 +156,11 @@ function mapPhoto(p) {
     preview_url:   posterUrl(p.preview_path),
     media_type:    p.media_type    ?? 'photo',
     duration:      p.duration      ?? null,
+    iso:           p.iso           ?? null,
+    aperture:      p.aperture      ?? null,
+    shutter_speed: p.shutter_speed ?? null,
+    focal_length:  p.focal_length  ?? null,
+    lens_model:    p.lens_model    ?? null,
   };
 }
 
@@ -251,7 +256,8 @@ app.get('/api/health', (_req, res) => res.json({ ok: true, photos: db.count() })
 const SELECT_COLS = `
   p.id, p.thumb_path, p.preview_path, p.date_taken, p.date_imported,
   p.camera_model, p.gps_lat, p.gps_lon, p.width, p.height, p.filesize,
-  p.starred, p.place_city, p.place_country, p.media_type, p.duration
+  p.starred, p.place_city, p.place_country, p.media_type, p.duration,
+  p.iso, p.aperture, p.shutter_speed, p.focal_length, p.lens_model
 `;
 
 app.get('/api/photos', (req, res) => {
@@ -311,6 +317,14 @@ app.get('/api/photos/map', (_req, res) => {
   })));
 });
 
+app.get('/api/photos/:id/download', (req, res) => {
+  const row = db.raw.prepare('SELECT filepath FROM photos WHERE id = ?').get(req.params.id);
+  if (!row) return notFound(res);
+  if (!fs.existsSync(row.filepath)) return notFound(res);
+  res.setHeader('Content-Disposition', `attachment; filename="${path.basename(row.filepath)}"`);
+  fs.createReadStream(row.filepath).pipe(res);
+});
+
 app.get('/api/photos/:id', (req, res) => {
   const row = db.raw.prepare('SELECT * FROM photos WHERE id = ?').get(req.params.id);
   if (!row) return notFound(res);
@@ -323,6 +337,16 @@ app.get('/api/photos/:id', (req, res) => {
   });
 });
 
+app.patch('/api/photos/bulk', (req, res) => {
+  const ids = Array.isArray(req.body.ids) ? req.body.ids.map(Number).filter(Boolean) : [];
+  if (!ids.length) return badRequest(res, 'ids required');
+  if ('starred' in req.body) {
+    const ph = ids.map(() => '?').join(',');
+    db.raw.prepare(`UPDATE photos SET starred = ? WHERE id IN (${ph})`).run(req.body.starred ? 1 : 0, ...ids);
+  }
+  res.sendStatus(204);
+});
+
 app.patch('/api/photos/:id', (req, res) => {
   const id = parseInt(req.params.id, 10);
   if ('starred' in req.body) {
@@ -364,6 +388,84 @@ app.post('/api/collections', (req, res) => {
   }
 });
 
+app.patch('/api/collections/:id', (req, res) => {
+  const name = (req.body.name ?? '').trim().slice(0, 200);
+  if (!name) return badRequest(res, 'name required');
+  try {
+    db.raw.prepare('UPDATE collections SET name = ? WHERE id = ?').run(name, parseInt(req.params.id, 10));
+    res.sendStatus(204);
+  } catch (e) {
+    if (e.message.includes('UNIQUE')) return badRequest(res, 'collection already exists');
+    throw e;
+  }
+});
+
+app.delete('/api/collections/:id', (req, res) => {
+  db.raw.prepare('DELETE FROM collections WHERE id = ?').run(parseInt(req.params.id, 10));
+  res.sendStatus(204);
+});
+
+// ── Albums (manual + smart auto-albums) ───────────────────────────────────────
+
+app.get('/api/albums', (_req, res) => {
+  const manual = db.raw.prepare(`
+    SELECT c.id, c.name, c.description, c.created_at,
+      COUNT(pc.photo_id) AS photo_count,
+      (SELECT p.thumb_path FROM photo_collections pc2 JOIN photos p ON p.id = pc2.photo_id
+       WHERE pc2.collection_id = c.id ORDER BY p.date_taken DESC, p.id DESC LIMIT 1) AS cover_path
+    FROM collections c LEFT JOIN photo_collections pc ON pc.collection_id = c.id
+    GROUP BY c.id ORDER BY c.name
+  `).all();
+
+  const years = db.raw.prepare(`
+    SELECT year, count, cover_path FROM (
+      SELECT strftime('%Y', date_taken) AS year,
+        COUNT(*) OVER (PARTITION BY strftime('%Y', date_taken)) AS count,
+        thumb_path AS cover_path,
+        ROW_NUMBER() OVER (PARTITION BY strftime('%Y', date_taken) ORDER BY date_taken DESC, id DESC) AS rn
+      FROM photos WHERE date_taken IS NOT NULL AND (media_type IS NULL OR media_type = 'photo')
+    ) WHERE rn = 1 ORDER BY year DESC
+  `).all();
+
+  const cities = db.raw.prepare(`
+    SELECT city, country, count, cover_path FROM (
+      SELECT place_city AS city, place_country AS country,
+        COUNT(*) OVER (PARTITION BY place_city) AS count,
+        thumb_path AS cover_path,
+        ROW_NUMBER() OVER (PARTITION BY place_city ORDER BY date_taken DESC, id DESC) AS rn
+      FROM photos WHERE place_city IS NOT NULL AND (media_type IS NULL OR media_type = 'photo')
+    ) WHERE rn = 1 ORDER BY count DESC LIMIT 50
+  `).all();
+
+  const cameras = db.raw.prepare(`
+    SELECT camera, count, cover_path FROM (
+      SELECT camera_model AS camera,
+        COUNT(*) OVER (PARTITION BY camera_model) AS count,
+        thumb_path AS cover_path,
+        ROW_NUMBER() OVER (PARTITION BY camera_model ORDER BY date_taken DESC, id DESC) AS rn
+      FROM photos WHERE camera_model IS NOT NULL AND (media_type IS NULL OR media_type = 'photo')
+    ) WHERE rn = 1 ORDER BY count DESC
+  `).all();
+
+  res.json({
+    manual:  manual.map(c => ({ ...c, cover_url: posterUrl(c.cover_path), cover_path: undefined })),
+    auto: {
+      years:   years.map(r   => ({ year:   r.year,   count: r.count,   cover_url: posterUrl(r.cover_path) })),
+      cities:  cities.map(r  => ({ city:   r.city,   country: r.country, count: r.count,  cover_url: posterUrl(r.cover_path) })),
+      cameras: cameras.map(r => ({ camera: r.camera, count: r.count,   cover_url: posterUrl(r.cover_path) })),
+    },
+  });
+});
+
+app.post('/api/photos/bulk/collections', (req, res) => {
+  const ids   = Array.isArray(req.body.ids) ? req.body.ids.map(Number).filter(Boolean) : [];
+  const colId = parseInt(req.body.collectionId, 10);
+  if (!ids.length || !colId) return badRequest(res, 'ids and collectionId required');
+  const stmt = db.raw.prepare('INSERT OR IGNORE INTO photo_collections (photo_id, collection_id) VALUES (?, ?)');
+  db.raw.transaction(() => { for (const id of ids) stmt.run(id, colId); })();
+  res.sendStatus(204);
+});
+
 app.post('/api/photos/:id/collections', (req, res) => {
   const colId = parseInt(req.body.collectionId, 10);
   if (!colId) return badRequest(res, 'collectionId required');
diff --git a/worker/db.js b/worker/db.js
index eb13bb0..5567a9f 100644
--- a/worker/db.js
+++ b/worker/db.js
@@ -115,6 +115,11 @@ export function openDb(dbPath) {
   try { db.exec('ALTER TABLE photos ADD COLUMN place_country TEXT'); } catch {}
   try { db.exec("ALTER TABLE photos ADD COLUMN media_type TEXT NOT NULL DEFAULT 'photo'"); } catch {}
   try { db.exec('ALTER TABLE photos ADD COLUMN duration REAL'); } catch {}
+  try { db.exec('ALTER TABLE photos ADD COLUMN iso INTEGER'); } catch {}
+  try { db.exec('ALTER TABLE photos ADD COLUMN aperture REAL'); } catch {}
+  try { db.exec('ALTER TABLE photos ADD COLUMN shutter_speed TEXT'); } catch {}
+  try { db.exec('ALTER TABLE photos ADD COLUMN focal_length REAL'); } catch {}
+  try { db.exec('ALTER TABLE photos ADD COLUMN lens_model TEXT'); } catch {}
   db.exec('CREATE INDEX IF NOT EXISTS idx_photos_starred     ON photos(starred)');
   db.exec('CREATE INDEX IF NOT EXISTS idx_photos_place_city  ON photos(place_city)');
   db.exec('CREATE INDEX IF NOT EXISTS idx_photos_media_type  ON photos(media_type)');
@@ -128,11 +133,13 @@ export function openDb(dbPath) {
       INSERT OR IGNORE INTO photos
         (filepath, thumb_path, preview_path, date_taken, date_imported,
          camera_model, gps_lat, gps_lon, phash, width, height, filesize,
-         place_city, place_country, media_type, duration)
+         place_city, place_country, media_type, duration,
+         iso, aperture, shutter_speed, focal_length, lens_model)
       VALUES
         (@filepath, @thumb_path, @preview_path, @date_taken, @date_imported,
          @camera_model, @gps_lat, @gps_lon, @phash, @width, @height, @filesize,
-         @place_city, @place_country, @media_type, @duration)
+         @place_city, @place_country, @media_type, @duration,
+         @iso, @aperture, @shutter_speed, @focal_length, @lens_model)
     `),
     exists:   db.prepare('SELECT 1 FROM photos WHERE filepath = ? LIMIT 1'),
     remove:   db.prepare('DELETE FROM photos WHERE filepath = ?'),
diff --git a/worker/ingest.js b/worker/ingest.js
index 6c24d08..092d7e4 100644
--- a/worker/ingest.js
+++ b/worker/ingest.js
@@ -28,6 +28,11 @@ export async function ingestFile(filepath, db, posterDir, settings = {}) {
   return ingestPhoto(filepath, db, posterDir, settings);
 }
 
+function fmtShutter(t) {
+  if (t >= 1) return `${t}s`;
+  return `1/${Math.round(1 / t)}s`;
+}
+
 // ── Photo ingest ───────────────────────────────────────────────────────────────
 
 async function ingestPhoto(filepath, db, posterDir, settings) {
@@ -43,12 +48,18 @@ async function ingestPhoto(filepath, db, posterDir, settings) {
   let exif = {};
   try {
     exif = await exifr.parse(filepath, {
-      pick: ['DateTimeOriginal', 'Make', 'Model', 'Orientation'],
+      pick: ['DateTimeOriginal', 'Make', 'Model', 'Orientation',
+             'ISO', 'FNumber', 'ExposureTime', 'FocalLength', 'LensModel'],
     }) ?? {};
   } catch {}
 
-  const dateTaken   = exif.DateTimeOriginal ?? null;
-  const cameraModel = [exif.Make, exif.Model].filter(Boolean).join(' ') || null;
+  const dateTaken    = exif.DateTimeOriginal ?? null;
+  const cameraModel  = [exif.Make, exif.Model].filter(Boolean).join(' ') || null;
+  const iso          = exif.ISO          ?? null;
+  const aperture     = exif.FNumber      != null ? Math.round(exif.FNumber * 10) / 10 : null;
+  const focalLength  = exif.FocalLength  != null ? Math.round(exif.FocalLength)       : null;
+  const lensModel    = exif.LensModel    ?? null;
+  const shutterSpeed = exif.ExposureTime != null ? fmtShutter(exif.ExposureTime)      : null;
 
   let gpsLat = null, gpsLon = null;
   try {
@@ -109,6 +120,11 @@ async function ingestPhoto(filepath, db, posterDir, settings) {
     place_country: placeCountry,
     media_type:    'photo',
     duration:      null,
+    iso,
+    aperture,
+    shutter_speed: shutterSpeed,
+    focal_length:  focalLength,
+    lens_model:    lensModel,
   });
 
   console.log(`[ingest] ${path.basename(filepath)}`);