Album view: filter by client feedback; mobile share-panel layout

- filter bar over verdicts and average star rating (All / thumbs /
  undecided / 3+ / 4+ / 5) with live counts; gallery, lightbox,
  selection, ZIP download and bulk delete all operate on the filtered
  view
- share rows and the create form stack vertically on small screens

Cargo.lock

@@ -2574,6 +2574,7 @@ dependencies = [
  "time",
  "tokio",
  "tokio-util",
+ "tower",
  "tower-http",
  "tracing",
  "tracing-subscriber",

Cargo.toml

@@ -37,7 +37,8 @@ tempfile = "3"
 time = "0.3"
 tokio = { version = "1", features = ["full"] }
 tokio-util = { version = "0.7", features = ["io"] }
-tower-http = { version = "0.6", features = ["fs", "trace"] }
+tower = { version = "0.5", features = ["util"] }
+tower-http = { version = "0.6", features = ["fs", "set-header", "trace"] }
 tracing = "0.1"
 tracing-subscriber = { version = "0.3", features = ["env-filter"] }
 urlencoding = "2"

README.md

@@ -5,6 +5,23 @@ share them with clients via private (optionally password-protected) links,
 collect accept/reject votes, ratings and tags, and let clients download
 originals.
 
+## Screenshots
+
+The album view — drag-and-drop upload, justified gallery, and each client's
+feedback (votes, stars, tags) overlaid on the thumbnails:
+
+![Album view with upload zone and feedback overlays](docs/screenshots/album-admin.jpg)
+
+What clients see on a share link — vote on favorites, filter by verdict,
+download selects or the whole album as a ZIP:
+
+![Client gallery with verdict filters](docs/screenshots/share-client.jpg)
+
+The lightbox — accept/reject, star rating, tags, and keyboard-driven culling
+(`P`/`X`/`U`, `1`–`5`):
+
+![Lightbox with voting and rating controls](docs/screenshots/lightbox.jpg)
+
 ## Architecture
 
 ```
@@ -40,7 +57,10 @@ originals.
 - **Frontend**: React + Vite SPA — justified gallery, lightbox with
   accept/reject thumbs, rating stars and tag chips, keyboard-driven culling
   (`P`/`X`/`U`, `1`–`5`, `?` shows all shortcuts), drag-and-drop multi-file
-  upload with progress.
+  upload with progress. Touch-first on mobile: swipe sideways to browse,
+  flick a photo up/down to accept/reject (real physics — votes commit
+  instantly, the animation is decoration), pinch to zoom, always-visible
+  selection checkmarks. Voting the last photo fades back to the gallery.
 
 ## Local development
 
@@ -88,20 +108,20 @@ All configuration is via environment variables:
 
 ## Deploying to Kubernetes
 
-Build and push the image (single image contains `server`, `worker`, and the
-built frontend):
+The prebuilt image is at `git.draic.info/nils/photos` (single image contains
+`server`, `worker`, and the built frontend). To build your own instead:
 
 ```sh
-docker build -t ghcr.io/YOU/photos:0.1.0 .
-docker push ghcr.io/YOU/photos:0.1.0
+docker build -t registry.example.com/you/photos:0.4.2 .
+docker push registry.example.com/you/photos:0.4.2
 ```
 
 Install the chart, pointing it at your existing Postgres and S3:
 
 ```sh
 helm install photos deploy/chart \
-  --set image.repository=ghcr.io/YOU/photos \
-  --set image.tag=0.1.0 \
+  --set image.repository=git.draic.info/nils/photos \
+  --set image.tag=0.4.2 \
   --set publicUrl=https://photos.example.com \
   --set ingress.host=photos.example.com \
   --set config.oidcIssuer=https://auth.example.com \
@@ -142,7 +162,8 @@ Notes:
   stored **per link**, so create one link per client to keep feedback
   separate. The album view shows all feedback grouped by link label, and
   clients can filter their gallery by verdict (e.g. review only what's still
-  undecided, or select-all + download the accepted set).
+  undecided, or select-all + download the accepted set). Culling works with
+  keyboard (`P`/`X` auto-advance) on desktop and swipe gestures on mobile.
 - Clients (and you) can multi-select photos and download them — or the whole
   album — as a ZIP. Archives are streamed (each file spools briefly through a
   temp file for its checksum, then pipelines while the next one prefetches),

frontend/src/components/Gallery.jsx

@@ -36,14 +36,13 @@ export default function Gallery({ photos, onOpen, overlay, selected, onToggleSel
   const [width, setWidth] = useState(0)
 
   useEffect(() => {
-    const el = containerRef.current
-    if (!el) return
     const observer = new ResizeObserver((entries) => setWidth(entries[0].contentRect.width))
-    observer.observe(el)
+    observer.observe(containerRef.current)
     return () => observer.disconnect()
   }, [])
 
-  if (photos.length === 0) return null
+  // The container renders even with zero photos — unmounting it would detach
+  // the observer and leave a later non-empty render stuck at width 0.
   const gap = 6
   const targetHeight = width < 700 ? 170 : 240
   const rows = width > 0 ? layoutRows(photos, width, targetHeight, gap) : []
@@ -69,7 +68,7 @@ export default function Gallery({ photos, onOpen, overlay, selected, onToggleSel
                     title={isSelected ? 'Deselect' : 'Select'}
                     onClick={(e) => {
                       e.stopPropagation()
-                      onToggleSelect(p.id)
+                      onToggleSelect(p.id, e.shiftKey)
                     }}
                   >
                     ✓

frontend/src/components/Lightbox.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { imgUrl } from '../api'
+import useSwipe from '../useSwipe'
 
 const BASE_SHORTCUTS = [
   ['← / →', 'previous / next photo'],
@@ -12,7 +13,21 @@ const BASE_SHORTCUTS = [
 // come from the same entry, so the help overlay can't drift from behavior:
 // { keys: ['p'], help: ['P', 'accept…'], run: (photo, key) => … }.
 // Keys fire only outside text inputs and while the help overlay is closed.
-export default function Lightbox({ photos, index, onClose, onNav, footer, actions }) {
+// `gestures` ({ up, down }) maps vertical touch flicks on the photo — the
+// horizontal axis always navigates, so voting and browsing never collide.
+// `closing` fades the whole modal out; `onClosed` fires when the fade ends
+// (the page then actually unmounts the lightbox).
+export default function Lightbox({
+  photos,
+  index,
+  onClose,
+  onNav,
+  footer,
+  actions,
+  gestures,
+  closing,
+  onClosed,
+}) {
   const photo = photos[index]
   const [showHelp, setShowHelp] = useState(false)
 
@@ -22,7 +37,7 @@ export default function Lightbox({ photos, index, onClose, onNav, footer, action
   // which a fast second keystroke hits a stale closure (and e.g. re-votes
   // the previous photo).
   const live = useRef({})
-  live.current = { index, count: photos.length, photo, onClose, onNav, actions, showHelp }
+  live.current = { index, count: photos.length, photo, onClose, onNav, actions, showHelp, closing }
 
   useEffect(() => {
     // Only text entry captures keys (Escape leaves the field); focus on a
@@ -33,6 +48,7 @@ export default function Lightbox({ photos, index, onClose, onNav, footer, action
       (el.tagName === 'INPUT' && !['checkbox', 'radio', 'button'].includes(el.type))
     const handler = (e) => {
       const s = live.current
+      if (s.closing) return
       if (isTyping(e.target)) {
         if (e.key === 'Escape') e.target.blur()
         return
@@ -74,10 +90,41 @@ export default function Lightbox({ photos, index, onClose, onNav, footer, action
     }
   }, [])
 
+  const preview = (p) => imgUrl(p, 'preview')
+  const prevPhoto = photos[index - 1]
+  const nextPhoto = photos[index + 1]
+
+  const swipe = useSwipe({
+    photo,
+    index,
+    count: photos.length,
+    onNav,
+    gestures,
+    hasNext: index < photos.length - 1,
+  })
+
+  // Immediate neighbors are real DOM slides (loaded by definition); warm the
+  // browser cache a few photos further out so fast swiping never hits the
+  // network.
+  useEffect(() => {
+    for (const i of [index + 2, index + 3, index - 2]) {
+      if (photos[i]) new Image().src = preview(photos[i])
+    }
+  }, [index, photos])
+
   if (!photo) return null
 
+  // Did the vote fly off the photo we're still showing (no advance target)?
+  const exitSelf = swipe.exit && swipe.exit.photo.id === photo.id
+
   return (
-    <div className="lightbox" onClick={onClose}>
+    <div
+      className={`lightbox${closing ? ' lb-closing' : ''}`}
+      onClick={onClose}
+      onAnimationEnd={(e) => {
+        if (e.animationName === 'lb-fade-out') onClosed?.()
+      }}
+    >
       <div className="lb-top" onClick={(e) => e.stopPropagation()}>
         <span className="lb-name">{photo.filename}</span>
         <span className="lb-count">
@@ -104,13 +151,59 @@ export default function Lightbox({ photos, index, onClose, onNav, footer, action
       >
         ‹
       </button>
-      <div className="lb-stage">
-        <img
-          className="lb-img"
-          src={imgUrl(photo, 'preview')}
-          alt={photo.filename}
-          onClick={(e) => e.stopPropagation()}
-        />
+      <div className="lb-stage" {...swipe.handlers}>
+        <div
+          className="lb-track"
+          ref={swipe.trackRef}
+          style={swipe.trackStyle}
+          onTransitionEnd={swipe.onTrackTransitionEnd}
+        >
+          {prevPhoto && (
+            <div key={prevPhoto.id} className="lb-slide" style={{ transform: 'translateX(-100vw)' }}>
+              <img className="lb-img" src={preview(prevPhoto)} alt="" />
+            </div>
+          )}
+          <div key={photo.id} className="lb-slide" style={{ zIndex: 1 }}>
+            <img
+              ref={swipe.imgRef}
+              className={`lb-img${swipe.exit ? (exitSelf ? ' lb-hidden' : ' lb-enter') : ''}`}
+              style={swipe.imgStyle}
+              onTransitionEnd={swipe.onImgTransitionEnd}
+              src={preview(photo)}
+              alt={photo.filename}
+              onClick={(e) => e.stopPropagation()}
+            />
+          </div>
+          {nextPhoto &&
+            (swipe.showBehind ? (
+              <div
+                key={nextPhoto.id}
+                ref={swipe.behindRef}
+                className="lb-slide lb-behind"
+                style={swipe.behindStyle}
+              >
+                <img className="lb-img" src={preview(nextPhoto)} alt="" />
+              </div>
+            ) : (
+              <div key={nextPhoto.id} className="lb-slide" style={{ transform: 'translateX(100vw)' }}>
+                <img className="lb-img" src={preview(nextPhoto)} alt="" />
+              </div>
+            ))}
+        </div>
+        {swipe.exit && (
+          <div
+            className="lb-slide lb-ghost"
+            style={{ '--dy': `${swipe.exit.dy}px`, '--rot': `${swipe.exit.dy / 40}deg` }}
+            onAnimationEnd={swipe.clearExit}
+          >
+            <img
+              className={`lb-img lb-exit-${swipe.exit.dir}`}
+              src={preview(swipe.exit.photo)}
+              alt=""
+            />
+          </div>
+        )}
+        {swipe.showBadge && <div ref={swipe.badgeRef} className="lb-flick" />}
       </div>
       <button
         className="lb-nav lb-next"

frontend/src/components/SelectionBar.jsx

@@ -15,6 +15,7 @@ export default function SelectionBar({
   onClear,
   onDownload,
   onDownloadAll,
+  onDelete,
 }) {
   if (total === 0) return null
 
@@ -47,6 +48,11 @@ export default function SelectionBar({
       <button className="btn btn-primary" onClick={onDownload}>
         Download {count} as ZIP ({fmtBytes(selectedBytes)})
       </button>
+      {onDelete && (
+        <button className="btn btn-danger" onClick={onDelete}>
+          Delete {count}
+        </button>
+      )}
     </div>
   )
 }

frontend/src/components/Thumbs.jsx

@@ -1,3 +1,6 @@
+export const ACCEPT_GLYPH = '👍'
+export const REJECT_GLYPH = '👎'
+
 // Accept/reject vote. `value` is 'accept', 'reject' or null; clicking the
 // active thumb clears it. Without onChange it renders read-only.
 export default function Thumbs({ value, onChange, small }) {
@@ -17,8 +20,8 @@ export default function Thumbs({ value, onChange, small }) {
   )
   return (
     <span className={`thumbs${small ? ' thumbs-small' : ''}`}>
-      {thumb('accept', '👍', 'Accept (P)')}
-      {thumb('reject', '👎', 'Reject (X)')}
+      {thumb('accept', ACCEPT_GLYPH, 'Accept (P)')}
+      {thumb('reject', REJECT_GLYPH, 'Reject (X)')}
     </span>
   )
 }

frontend/src/pages/AlbumPage.jsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Link, useNavigate, useParams } from 'react-router-dom'
 import { api, postDownload, sha256Hex, uploadFile } from '../api'
 import Gallery from '../components/Gallery'
@@ -18,6 +18,77 @@ function fmtEta(seconds) {
 
 const UPLOAD_CONCURRENCY = 3
 
+const FEEDBACK_FILTERS = [
+  { key: 'all', label: 'All' },
+  { key: 'accept', label: '👍' },
+  { key: 'reject', label: '👎' },
+  { key: 'undecided', label: 'Undecided' },
+  { key: 'star3', label: '★ 3+' },
+  { key: 'star4', label: '★ 4+' },
+  { key: 'star5', label: '★ 5' },
+]
+
+// Expiry convention, in one place for the create form and the row editor:
+// end of the chosen day in the photographer's local timezone — date-only
+// strings would parse as UTC midnight and expire a day early.
+const endOfDayIso = (day) => (day ? new Date(`${day}T23:59:59`).toISOString() : null)
+
+// ISO timestamp -> local yyyy-mm-dd for date inputs.
+const localDate = (iso) => {
+  const d = new Date(iso)
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+// Staged expiry editor: commits on blur/Enter, never per keystroke — typing
+// a year fires change events with bogus intermediate dates (year 0002) that
+// must not hit the live link. The ✕ clears explicitly; Safari's date input
+// has no native clear control.
+function ExpiryDate({ value, onCommit }) {
+  const current = value ? localDate(value) : ''
+  const [draft, setDraft] = useState(current)
+  useEffect(() => setDraft(current), [current])
+
+  const commit = () => {
+    if (draft === current) return
+    // A half-typed year (e.g. 0002) can survive until blur; don't persist it.
+    if (draft && draft.slice(0, 4) < '2000') {
+      setDraft(current)
+      return
+    }
+    onCommit(endOfDayIso(draft))
+  }
+
+  return (
+    <label className="row field-label" title="Expiry date — empty means the link never expires">
+      <span className="muted">expires</span>
+      <input
+        type="date"
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') e.target.blur()
+        }}
+      />
+      {draft ? (
+        <button
+          type="button"
+          className="btn btn-ghost"
+          title="Remove expiry — link never expires"
+          onClick={() => {
+            setDraft('')
+            onCommit(null)
+          }}
+        >
+          ✕
+        </button>
+      ) : (
+        <span className="muted">never</span>
+      )}
+    </label>
+  )
+}
+
 function UploadZone({ albumId, onUploaded }) {
   const [queue, setQueue] = useState([])
   const [dragging, setDragging] = useState(false)
@@ -198,11 +269,7 @@ function SharesPanel({ albumId }) {
           label: form.label,
           password: form.password || null,
           allow_download: form.allow_download,
-          // End of the chosen day in the photographer's local timezone —
-          // date-only strings would parse as UTC midnight and expire a day early.
-          expires_at: form.expires_at
-            ? new Date(`${form.expires_at}T23:59:59`).toISOString()
-            : null,
+          expires_at: endOfDayIso(form.expires_at),
         },
       })
       setForm({ label: '', password: '', allow_download: true, expires_at: '' })
@@ -219,6 +286,18 @@ function SharesPanel({ albumId }) {
     setTimeout(() => setCopied(null), 1500)
   }
 
+  const update = async (shareId, patch) => {
+    try {
+      const updated = await api(`/api/shares/${shareId}`, { method: 'PATCH', body: patch })
+      setShares((list) => list.map((s) => (s.id === shareId ? updated : s)))
+      setError(null)
+    } catch (e) {
+      setError(e.message)
+      // Re-sync the controlled inputs with what the server actually has.
+      load()
+    }
+  }
+
   return (
     <section className="panel">
       <h2>Client links</h2>
@@ -233,16 +312,20 @@ function SharesPanel({ albumId }) {
             <span className="muted">
               {s.has_password ? '🔒 password' : 'no password'}
               {' · '}
-              {s.allow_download ? 'downloads on' : 'downloads off'}
-              {s.expires_at
-                ? ` · expires ${new Date(s.expires_at).toLocaleDateString()}`
-                : ' · never expires'}
-              {' · '}
               {s.rating_count} ratings, {s.tag_count} tags, 👍 {s.accept_count} 👎{' '}
               {s.reject_count}
             </span>
           </div>
           <div className="row">
+            <label className="select-toggle" title="Allow this link to download originals/ZIPs">
+              <input
+                type="checkbox"
+                checked={s.allow_download}
+                onChange={(e) => update(s.id, { allow_download: e.target.checked })}
+              />
+              downloads
+            </label>
+            <ExpiryDate value={s.expires_at} onCommit={(iso) => update(s.id, { expires_at: iso })} />
             {s.locked && (
               <button
                 className="btn"
@@ -341,14 +424,7 @@ export default function AlbumPage() {
   }, [hasPending, load])
 
   const ready = (detail?.photos ?? []).filter((p) => p.status === 'ready')
-  const { selected, toggle, selectAll, clear, selectedBytes, totalBytes } = useSelection(ready)
-  const lightbox = useLightbox(ready)
-
-  if (error) return <p className="error">{error}</p>
-  if (!detail) return <p className="muted">Loading…</p>
-
-  const { album, photos, feedback } = detail
-  const notReady = photos.filter((p) => p.status !== 'ready')
+  const feedback = detail?.feedback ?? {}
 
   const avgRating = (photoId) => {
     const ratings = feedback[photoId]?.ratings || []
@@ -356,6 +432,45 @@ export default function AlbumPage() {
     return ratings.reduce((sum, r) => sum + r.rating, 0) / ratings.length
   }
 
+  // Filter over client feedback: verdicts, or minimum average star rating.
+  const [filter, setFilter] = useState('all')
+  const matchesFilter = (p, key) => {
+    if (key === 'all') return true
+    const verdicts = feedback[p.id]?.verdicts || []
+    if (key === 'accept') return verdicts.some((v) => v.verdict === 'accept')
+    if (key === 'reject') return verdicts.some((v) => v.verdict === 'reject')
+    if (key === 'undecided') return verdicts.length === 0
+    return (avgRating(p.id) ?? 0) >= Number(key.slice(4))
+  }
+  const shown = ready.filter((p) => matchesFilter(p, filter))
+  const filterCounts = useMemo(() => {
+    const counts = { all: ready.length, accept: 0, reject: 0, undecided: 0, star3: 0, star4: 0, star5: 0 }
+    for (const p of ready) {
+      const verdicts = feedback[p.id]?.verdicts || []
+      if (verdicts.some((v) => v.verdict === 'accept')) counts.accept += 1
+      if (verdicts.some((v) => v.verdict === 'reject')) counts.reject += 1
+      if (verdicts.length === 0) counts.undecided += 1
+      const avg = avgRating(p.id) ?? 0
+      if (avg >= 3) counts.star3 += 1
+      if (avg >= 4) counts.star4 += 1
+      if (avg >= 5) counts.star5 += 1
+    }
+    return counts
+  }, [detail])
+
+  // Selection spans all ready photos; the bar and bulk actions cover only
+  // the current view, like on the share page.
+  const { selected, toggle, selectAll, clear } = useSelection(ready)
+  const shownSelected = shown.filter((p) => selected.has(p.id))
+  const sumBytes = (list) => list.reduce((sum, p) => sum + p.size_bytes, 0)
+  const lightbox = useLightbox(shown)
+
+  if (error) return <p className="error">{error}</p>
+  if (!detail) return <p className="muted">Loading…</p>
+
+  const { album, photos } = detail
+  const notReady = photos.filter((p) => p.status !== 'ready')
+
   const rename = async () => {
     const name = prompt('Album name', album.name)
     if (name && name.trim()) {
@@ -377,6 +492,19 @@ export default function AlbumPage() {
     load()
   }
 
+  const removeSelected = async () => {
+    const ids = shownSelected.map((p) => p.id)
+    if (!confirm(`Delete ${ids.length} selected photo${ids.length === 1 ? '' : 's'}? This cannot be undone.`))
+      return
+    try {
+      await api('/api/photos/delete', { method: 'POST', body: { ids } })
+      clear()
+    } catch (e) {
+      alert(`Delete failed: ${e.message}`)
+    }
+    load()
+  }
+
   return (
     <>
       <div className="page-head">
@@ -427,11 +555,25 @@ export default function AlbumPage() {
         </section>
       )}
 
+      {ready.length > 0 && (
+        <div className="filter-bar filter-bar-admin">
+          {FEEDBACK_FILTERS.map((f) => (
+            <button
+              key={f.key}
+              className={`filter-chip${filter === f.key ? ' active' : ''}`}
+              onClick={() => setFilter(f.key)}
+            >
+              {f.label} {filterCounts[f.key]}
+            </button>
+          ))}
+        </div>
+      )}
+
       <Gallery
-        photos={ready}
+        photos={shown}
         onOpen={lightbox.openAt}
         selected={selected}
-        onToggleSelect={toggle}
+        onToggleSelect={(photoId, shift) => toggle(photoId, shift, shown)}
         overlay={(p) => {
           const avg = avgRating(p.id)
           const tagCount = feedback[p.id]?.tags.length || 0
@@ -452,21 +594,29 @@ export default function AlbumPage() {
       {ready.length === 0 && notReady.length === 0 && (
         <p className="muted">No photos yet — drop some above.</p>
       )}
+      {ready.length > 0 && shown.length === 0 && (
+        <p className="muted">No photos match this filter.</p>
+      )}
 
       <SelectionBar
-        count={selected.size}
-        total={ready.length}
-        selectedBytes={selectedBytes}
-        totalBytes={totalBytes}
-        onSelectAll={() => selectAll(ready)}
+        count={shownSelected.length}
+        total={shown.length}
+        selectedBytes={sumBytes(shownSelected)}
+        totalBytes={sumBytes(shown)}
+        onSelectAll={() => selectAll(shown)}
         onClear={clear}
-        onDownload={() => postDownload(`/api/albums/${id}/zip`, [...selected].join(','))}
-        onDownloadAll={() => postDownload(`/api/albums/${id}/zip`)}
+        onDownload={() =>
+          postDownload(`/api/albums/${id}/zip`, shownSelected.map((p) => p.id).join(','))
+        }
+        onDownloadAll={() =>
+          postDownload(`/api/albums/${id}/zip`, filter === 'all' ? '' : shown.map((p) => p.id).join(','))
+        }
+        onDelete={removeSelected}
       />
 
       {lightbox.index >= 0 && (
         <Lightbox
-          photos={ready}
+          photos={shown}
           index={lightbox.index}
           onClose={lightbox.close}
           onNav={lightbox.openAt}

frontend/src/pages/SharePage.jsx

@@ -43,6 +43,12 @@ export default function SharePage() {
   const visibleSelected = visible.filter((p) => selected.has(p.id))
   const sumBytes = (list) => list.reduce((sum, p) => sum + p.size_bytes, 0)
   const lightbox = useLightbox(visible)
+  // Voting the last photo ends the run: fade the modal out over the gallery
+  // instead of cutting hard.
+  const [lightboxFading, setLightboxFading] = useState(false)
+  useEffect(() => {
+    if (lightbox.index < 0) setLightboxFading(false)
+  }, [lightbox.index])
 
   const load = useCallback(
     () => api(`/api/share/${token}`).then(setView).catch((e) => setError(e.message)),
@@ -114,6 +120,8 @@ export default function SharePage() {
           : `↺ ${photo.filename} cleared`,
     )
     if (next) lightbox.show(next.id)
+    // Last photo voted: the run is done — fade back to the gallery.
+    else setLightboxFading(true)
   }
 
   const keyActions = [
@@ -171,8 +179,8 @@ export default function SharePage() {
         <h1>{view.album_name}</h1>
         {view.album_description && <p className="muted">{view.album_description}</p>}
         <p className="muted">
-          {photos.length} photo{photos.length === 1 ? '' : 's'} · click a photo to view, rate and
-          tag · press <kbd>?</kbd> in the viewer for shortcuts
+          {photos.length} photo{photos.length === 1 ? '' : 's'} · tap a photo to view, rate and
+          tag · swipe ↑ to accept, ↓ to reject · <kbd>?</kbd> shows keyboard shortcuts
         </p>
         {photos.length > 0 && (
           <div className="filter-bar">
@@ -193,7 +201,11 @@ export default function SharePage() {
           photos={visible}
           onOpen={lightbox.openAt}
           selected={view.allow_download ? selected : undefined}
-          onToggleSelect={view.allow_download ? toggle : undefined}
+          // Shift-ranges must walk the filtered view, not the full album —
+          // otherwise hidden photos get swept into the selection.
+          onToggleSelect={
+            view.allow_download ? (id, shift) => toggle(id, shift, visible) : undefined
+          }
           overlay={(p) =>
             p.my_verdict || p.my_rating || p.my_tags.length > 0 ? (
               <div className="g-overlay">
@@ -238,6 +250,15 @@ export default function SharePage() {
           onClose={lightbox.close}
           onNav={lightbox.openAt}
           actions={keyActions}
+          closing={lightboxFading}
+          onClosed={() => {
+            setLightboxFading(false)
+            lightbox.close()
+          }}
+          gestures={{
+            up: (p) => voteAndAdvance(p, 'accept'),
+            down: (p) => voteAndAdvance(p, 'reject'),
+          }}
           footer={(p) => (
             <div className="client-footer">
               <Thumbs value={p.my_verdict} onChange={(v) => setVerdict(p, v)} />

frontend/src/styles.css

@@ -451,6 +451,18 @@ progress {
 .lb-stage {
   flex: 1;
   min-height: 0;
+  position: relative;
+  overflow: hidden;
+  /* Swipes are handled in JS; stop the browser from panning/zooming. */
+  touch-action: none;
+}
+.lb-track {
+  position: absolute;
+  inset: 0;
+}
+.lb-slide {
+  position: absolute;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -462,6 +474,79 @@ progress {
   object-fit: contain;
   cursor: default;
 }
+.lb-flick {
+  z-index: 2;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 5rem;
+  opacity: 0;
+  pointer-events: none;
+  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
+}
+/* Next photo waiting behind a vote drag, before its zoom-in. */
+.lb-behind {
+  transform: scale(0.22);
+  opacity: 0;
+}
+/* Ghost of a just-voted photo flying off; the vote itself is already saved. */
+.lb-ghost {
+  z-index: 3;
+  pointer-events: none;
+}
+.lb-exit-up {
+  animation: lb-exit-up 0.26s ease-in forwards;
+}
+.lb-exit-down {
+  animation: lb-exit-down 0.26s ease-in forwards;
+}
+@keyframes lb-exit-up {
+  from {
+    transform: translateY(var(--dy)) rotate(var(--rot));
+  }
+  to {
+    transform: translateY(-120vh) rotate(var(--rot));
+    opacity: 0;
+  }
+}
+@keyframes lb-exit-down {
+  from {
+    transform: translateY(var(--dy)) rotate(var(--rot));
+  }
+  to {
+    transform: translateY(120vh) rotate(var(--rot));
+    opacity: 0;
+  }
+}
+.lb-hidden {
+  opacity: 0;
+}
+/* Whole-modal fade after voting the last photo — the gallery is behind it. */
+.lightbox.lb-closing {
+  animation: lb-fade-out 0.26s ease forwards;
+  pointer-events: none;
+}
+@keyframes lb-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+/* The photo taking over after a vote zooms in organically. */
+.lb-enter {
+  animation: lb-enter 0.26s ease-out;
+}
+@keyframes lb-enter {
+  from {
+    transform: scale(0.3);
+    opacity: 0.2;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
 .lb-nav {
   position: absolute;
   top: 50%;
@@ -586,6 +671,10 @@ progress {
   color: var(--text);
   border-color: var(--accent);
 }
+.filter-bar-admin {
+  justify-content: flex-start;
+  margin: 0 0 0.75rem;
+}
 
 /* transient action feedback (keyboard votes that navigate away) */
 .action-flash {
@@ -688,12 +777,68 @@ kbd {
   padding: 0;
 }
 
+/* Touch devices: no hover — selection checkmarks must always be visible,
+   and the overlay nav arrows give way to swiping. */
+@media (hover: none) {
+  .g-check {
+    opacity: 1;
+  }
+  .lb-nav {
+    display: none;
+  }
+  /* No visible arrows to keep clear of — give the photo the width. */
+  .lb-slide {
+    padding: 0 0.75rem;
+  }
+}
+
 @media (max-width: 700px) {
-  .lb-stage {
+  .lb-slide {
     padding: 0 0.5rem;
   }
   .login-card {
     padding: 2rem 1.5rem;
     margin: 0 1rem;
   }
+  .share-head {
+    padding: 1.25rem 0.75rem 0.25rem;
+  }
+  .lb-footer {
+    padding: 0.5rem 0.6rem calc(0.8rem + env(safe-area-inset-bottom));
+  }
+  .client-footer {
+    gap: 0.8rem;
+  }
+  /* Finger-sized vote and rating targets in the client lightbox. */
+  .client-footer .thumb {
+    font-size: 1.7rem;
+  }
+  .client-footer .star {
+    font-size: 1.8rem;
+  }
+  .select-bar {
+    flex-wrap: wrap;
+    justify-content: center;
+    max-width: calc(100vw - 1.5rem);
+    padding: 0.5rem 0.75rem;
+    bottom: calc(0.75rem + env(safe-area-inset-bottom));
+  }
+  /* Share rows: info and controls stack instead of fighting for one line. */
+  .share-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+    padding: 0.75rem 0;
+  }
+  .share-row .row {
+    flex-wrap: wrap;
+    row-gap: 0.5rem;
+  }
+  .share-form {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .share-form > input {
+    width: 100%;
+  }
 }

frontend/src/useLightbox.js

@@ -14,7 +14,9 @@ export default function useLightbox(photos) {
 
   return {
     index,
-    openAt: (i) => setOpenId(photos[i].id),
+    // Bounds-safe: callers may hold a stale index (the list can shrink
+    // between render and dispatch).
+    openAt: (i) => photos[i] && setOpenId(photos[i].id),
     show: (id) => setOpenId(id),
     close: () => setOpenId(null),
   }

frontend/src/useSelection.js

@@ -1,10 +1,12 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 // Multi-select over a photo list. Selection lives here (not in the gallery)
 // so it survives lightbox open/close, and is pruned automatically when
 // photos disappear from the list (deletes, polling refreshes).
 export default function useSelection(photos) {
   const [selected, setSelected] = useState(() => new Set())
+  // Anchor for shift-click range selection: the photo last toggled.
+  const lastToggled = useRef(null)
 
   useEffect(() => {
     setSelected((prev) => {
@@ -15,19 +17,43 @@ export default function useSelection(photos) {
     })
   }, [photos])
 
-  const toggle = (photoId) =>
+  // Shift-toggle selects the whole range from the previously toggled photo
+  // (both directions), so contiguous runs don't need per-photo clicks. The
+  // range walks `list` — the photo order the user is actually looking at —
+  // which callers with a filtered view must pass explicitly, so hidden
+  // photos are never swept into the selection. Anchor updates and range
+  // computation stay out of the setSelected updater: React may re-invoke
+  // updaters (StrictMode does), so they must be pure.
+  const toggle = (photoId, shift = false, list = photos) => {
+    const anchor = lastToggled.current
+    lastToggled.current = photoId
+    if (shift && anchor) {
+      const a = list.findIndex((p) => p.id === anchor)
+      const b = list.findIndex((p) => p.id === photoId)
+      if (a >= 0 && b >= 0) {
+        const range = list.slice(Math.min(a, b), Math.max(a, b) + 1).map((p) => p.id)
+        setSelected((prev) => new Set([...prev, ...range]))
+        return
+      }
+    }
     setSelected((prev) => {
       const next = new Set(prev)
       if (next.has(photoId)) next.delete(photoId)
       else next.add(photoId)
       return next
     })
+  }
 
   // Adds `list` (the caller's currently visible photos) to the selection —
   // additive, so selecting all of one filtered view keeps picks from another.
   const selectAll = (list) =>
     setSelected((prev) => new Set([...prev, ...list.map((p) => p.id)]))
-  const clear = () => setSelected(new Set())
+  const clear = () => {
+    // Reset the anchor too — a shift-click after Clear must start fresh, not
+    // extend a range from a photo selected before the wipe.
+    lastToggled.current = null
+    setSelected(new Set())
+  }
   const selectedBytes = photos.reduce((sum, p) => sum + (selected.has(p.id) ? p.size_bytes : 0), 0)
   const totalBytes = photos.reduce((sum, p) => sum + p.size_bytes, 0)
 

frontend/src/useSwipe.js

@@ -0,0 +1,230 @@
+import { useLayoutEffect, useRef, useState } from 'react'
+import { ACCEPT_GLYPH, REJECT_GLYPH } from './components/Thumbs'
+
+const COMMIT_MS = 260
+const CANCEL_MS = 180
+const DEAD_ZONE = 12 // px of travel before the axis locks
+const FLICK_MS = 250 // releases faster than this commit at the lower threshold
+const H_THRESHOLD = { slow: 70, fast: 30 }
+const V_THRESHOLD = { slow: 90, fast: 40 }
+const V_SATURATE = 160 // px of vertical drag for full badge/preview intensity
+const ZOOM_MAX = 4
+
+// Touch engine for the lightbox: horizontal swipes navigate, vertical flicks
+// dispatch gestures.up/down (when provided), two fingers pinch-zoom the
+// current photo (springs back on release, never votes).
+//
+// Navigation and votes are dispatched SYNCHRONOUSLY on release; every
+// animation afterwards is pure decoration (a ghost flying off, the track
+// settling). Closing the lightbox, key presses or list changes during an
+// animation therefore can't drop, duplicate or misdirect an action.
+//
+// Per-move motion is written straight to the DOM via refs — dragging costs
+// no React renders; state changes happen only at axis lock and release.
+export default function useSwipe({ photo, index, count, onNav, gestures, hasNext }) {
+  const [dragAxis, setDragAxis] = useState(null) // 'h' | 'v' | 'z' while a finger is down
+  const [spring, setSpring] = useState(null) // 'h' | 'v' | 'z': sub-threshold release gliding back
+  const [settleFrom, setSettleFrom] = useState(null) // px the track settles from after a nav commit
+  const [settleRun, setSettleRun] = useState(false)
+  const [exit, setExit] = useState(null) // { photo, dir, dy }: ghost flying off after a vote
+
+  const trackRef = useRef(null)
+  const imgRef = useRef(null)
+  const behindRef = useRef(null)
+  const badgeRef = useRef(null)
+  const g = useRef(null)
+
+  // FLIP: paint the track at the release offset around the NEW index first,
+  // force a style flush, then let it transition to center.
+  useLayoutEffect(() => {
+    if (settleFrom == null) {
+      setSettleRun(false)
+      return
+    }
+    trackRef.current?.getBoundingClientRect()
+    setSettleRun(true)
+  }, [settleFrom])
+
+  const clearManual = () => {
+    for (const ref of [trackRef, imgRef, behindRef, badgeRef]) {
+      if (ref.current) {
+        ref.current.style.transform = ''
+        ref.current.style.opacity = ''
+        ref.current.style.transition = ''
+        ref.current.style.transformOrigin = ''
+      }
+    }
+  }
+
+  const onTouchStart = (e) => {
+    // Fresh input takes over: decorative animations yield immediately.
+    setSpring(null)
+    setSettleFrom(null)
+    if (e.touches.length === 2 && imgRef.current) {
+      // Second finger at any point turns the gesture into a pinch — a pinch
+      // never navigates and never votes.
+      clearManual()
+      const [a, b] = e.touches
+      const rect = imgRef.current.getBoundingClientRect()
+      const cx = (a.clientX + b.clientX) / 2
+      const cy = (a.clientY + b.clientY) / 2
+      imgRef.current.style.transformOrigin = `${cx - rect.left}px ${cy - rect.top}px`
+      g.current = {
+        mode: 'pinch',
+        d0: Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY),
+        cx,
+        cy,
+      }
+      setDragAxis('z')
+      return
+    }
+    if (e.touches.length !== 1) {
+      g.current = null
+      setDragAxis(null)
+      clearManual()
+      return
+    }
+    const t = e.touches[0]
+    g.current = { mode: 'swipe', x0: t.clientX, y0: t.clientY, t0: e.timeStamp, axis: null, dx: 0, dy: 0 }
+  }
+
+  const onTouchMove = (e) => {
+    const s = g.current
+    if (!s) return
+    if (s.mode === 'pinch') {
+      if (e.touches.length < 2 || !imgRef.current) return
+      const [a, b] = e.touches
+      const scale = Math.min(
+        ZOOM_MAX,
+        Math.max(1, Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY) / s.d0),
+      )
+      const mx = (a.clientX + b.clientX) / 2 - s.cx
+      const my = (a.clientY + b.clientY) / 2 - s.cy
+      imgRef.current.style.transition = 'none'
+      imgRef.current.style.transform = `translate(${mx}px, ${my}px) scale(${scale})`
+      return
+    }
+    if (e.touches.length !== 1) return
+    const t = e.touches[0]
+    s.dx = t.clientX - s.x0
+    s.dy = t.clientY - s.y0
+    if (!s.axis) {
+      if (Math.hypot(s.dx, s.dy) < DEAD_ZONE) return
+      s.axis = Math.abs(s.dx) >= Math.abs(s.dy) || !gestures ? 'h' : 'v'
+      setDragAxis(s.axis)
+    }
+    if (s.axis === 'h') {
+      if (trackRef.current) {
+        trackRef.current.style.transition = 'none'
+        trackRef.current.style.transform = `translateX(${s.dx}px)`
+      }
+    } else {
+      if (imgRef.current) {
+        imgRef.current.style.transition = 'none'
+        imgRef.current.style.transform = `translateY(${s.dy}px) rotate(${s.dy / 40}deg)`
+      }
+      const p = Math.min(1, Math.abs(s.dy) / V_SATURATE)
+      if (behindRef.current) {
+        behindRef.current.style.transition = 'none'
+        behindRef.current.style.transform = `scale(${0.22 + 0.15 * p})`
+        behindRef.current.style.opacity = p
+      }
+      if (badgeRef.current) {
+        badgeRef.current.style.opacity = p
+        badgeRef.current.textContent = s.dy < 0 ? ACCEPT_GLYPH : REJECT_GLYPH
+      }
+    }
+  }
+
+  const onTouchEnd = (e) => {
+    const s = g.current
+    if (!s) return
+    if (s.mode === 'pinch') {
+      if (e.touches.length > 0) return
+      g.current = null
+      setDragAxis(null)
+      setSpring('z')
+      return
+    }
+    g.current = null
+    setDragAxis(null)
+    if (!s.axis) {
+      clearManual()
+      return
+    }
+    const quick = e.timeStamp - s.t0 < FLICK_MS
+    const past = (v, th) => Math.abs(v) > th.slow || (quick && Math.abs(v) > th.fast)
+    if (s.axis === 'h') {
+      if (s.dx < 0 && past(s.dx, H_THRESHOLD) && index < count - 1) {
+        onNav(index + 1)
+        setSettleFrom(s.dx + window.innerWidth)
+      } else if (s.dx > 0 && past(s.dx, H_THRESHOLD) && index > 0) {
+        onNav(index - 1)
+        setSettleFrom(s.dx - window.innerWidth)
+      } else {
+        setSpring('h')
+      }
+    } else if (past(s.dy, V_THRESHOLD)) {
+      const dir = s.dy < 0 ? 'up' : 'down'
+      gestures?.[dir]?.(photo)
+      clearManual()
+      setExit({ photo, dir, dy: s.dy })
+    } else {
+      setSpring('v')
+    }
+  }
+
+  const onTouchCancel = () => {
+    g.current = null
+    setDragAxis(null)
+    clearManual()
+  }
+
+  const trackStyle =
+    settleFrom != null
+      ? settleRun
+        ? { transform: 'translateX(0)', transition: `transform ${COMMIT_MS}ms ease-out` }
+        : { transform: `translateX(${settleFrom}px)`, transition: 'none' }
+      : spring === 'h'
+        ? { transform: 'translateX(0)', transition: `transform ${CANCEL_MS}ms ease-out` }
+        : undefined
+
+  const imgStyle =
+    spring === 'v'
+      ? { transform: 'translateY(0) rotate(0deg)', transition: `transform ${CANCEL_MS}ms ease-out` }
+      : spring === 'z'
+        ? { transform: 'none', transition: `transform ${CANCEL_MS}ms ease-out` }
+        : undefined
+
+  const behindStyle =
+    spring === 'v'
+      ? { transform: 'scale(0.22)', opacity: 0, transition: `all ${CANCEL_MS}ms ease-out` }
+      : undefined
+
+  return {
+    handlers: { onTouchStart, onTouchMove, onTouchEnd, onTouchCancel },
+    trackRef,
+    imgRef,
+    behindRef,
+    badgeRef,
+    trackStyle,
+    imgStyle,
+    behindStyle,
+    showBehind: (dragAxis === 'v' || spring === 'v') && hasNext,
+    showBadge: dragAxis === 'v',
+    exit,
+    clearExit: () => setExit(null),
+    onTrackTransitionEnd: (e) => {
+      if (e.target !== trackRef.current) return
+      setSettleFrom(null)
+      if (spring === 'h') setSpring(null)
+    },
+    onImgTransitionEnd: (e) => {
+      if (e.target !== imgRef.current) return
+      if (spring === 'v' || spring === 'z') {
+        setSpring(null)
+        clearManual()
+      }
+    },
+  }
+}

src/bin/server.rs

@@ -1,4 +1,8 @@
+use axum::http::{header, HeaderValue};
+use tower::ServiceBuilder;
+use tower_http::services::fs::ServeFileSystemResponseBody;
 use tower_http::services::{ServeDir, ServeFile};
+use tower_http::set_header::SetResponseHeaderLayer;
 use tower_http::trace::TraceLayer;
 use tracing_subscriber::EnvFilter;
 
@@ -17,11 +21,30 @@ async fn main() -> anyhow::Result<()> {
     let state = AppState::new(config).await?;
 
     let static_dir = state.config.static_dir.clone();
-    let index = std::path::Path::new(&static_dir).join("index.html");
-    // .fallback (not .not_found_service) so SPA routes get index.html with a 200
-    let spa = ServeDir::new(&static_dir).fallback(ServeFile::new(index));
+    let static_root = std::path::Path::new(&static_dir);
+    // Hashed assets cache forever — except 404s, which would outlive the next deploy.
+    let assets = ServiceBuilder::new()
+        .map_response(|mut response: axum::http::Response<ServeFileSystemResponseBody>| {
+            if response.status().is_success() {
+                response.headers_mut().insert(
+                    header::CACHE_CONTROL,
+                    HeaderValue::from_static("public, max-age=31536000, immutable"),
+                );
+            }
+            response
+        })
+        .service(ServeDir::new(static_root.join("assets")));
+    // index.html revalidates every load (it names the asset hashes);
+    // .fallback (not .not_found_service) so SPA routes get it with a 200.
+    let spa = ServiceBuilder::new()
+        .layer(SetResponseHeaderLayer::overriding(
+            header::CACHE_CONTROL,
+            HeaderValue::from_static("no-cache"),
+        ))
+        .service(ServeDir::new(static_root).fallback(ServeFile::new(static_root.join("index.html"))));
 
     let app = photos::routes::router(&state)
+        .nest_service("/assets", assets)
         .fallback_service(spa)
         .layer(TraceLayer::new_for_http())
         .with_state(state.clone());

src/routes/albums.rs

@@ -7,7 +7,7 @@ use serde::{Deserialize, Serialize};
 use uuid::Uuid;
 
 use crate::error::{ApiError, ApiResult};
-use crate::models::{Album, JobKind, Photo, PhotoStatus};
+use crate::models::{Album, Photo, PhotoStatus};
 use crate::state::AppState;
 
 #[derive(Serialize, sqlx::FromRow)]
@@ -232,17 +232,13 @@ pub async fn delete(
     if locked.is_none() {
         return Err(ApiError::not_found());
     }
-    // Delete photos and enqueue their S3 cleanup atomically, in one statement.
-    sqlx::query(
-        "with deleted as (delete from photos where album_id = $1 returning id)
-         insert into jobs (kind, payload)
-         select $2, jsonb_build_object('prefix', 'photos/' || id || '/')
-         from deleted",
-    )
-    .bind(album_id)
-    .bind(JobKind::DeleteS3Prefix.as_str())
-    .execute(&mut *tx)
-    .await?;
+    // Delete photos through the shared path so the S3 cleanup convention
+    // lives in one place; the album lock above keeps this set complete.
+    let photo_ids: Vec<Uuid> = sqlx::query_scalar("select id from photos where album_id = $1")
+        .bind(album_id)
+        .fetch_all(&mut *tx)
+        .await?;
+    super::photos::delete_with_cleanup(&mut tx, &photo_ids).await?;
     sqlx::query("delete from albums where id = $1")
         .bind(album_id)
         .execute(&mut *tx)

src/routes/mod.rs

@@ -78,9 +78,13 @@ pub fn router(state: &AppState) -> Router<AppState> {
         )
         .route("/api/albums/{id}/zip", post(zip::album_zip))
         .route("/api/albums/{id}/photos/by-hash/{sha256}", get(photos::by_hash))
+        .route("/api/photos/delete", post(photos::delete_many))
         .route("/api/photos/{id}", delete(photos::delete))
         .route("/api/photos/{id}/reprocess", post(photos::reprocess))
-        .route("/api/shares/{id}", delete(shares::delete))
+        .route(
+            "/api/shares/{id}",
+            delete(shares::delete).patch(shares::update),
+        )
         .route("/api/shares/{id}/reset-lock", post(shares::reset_lock))
         .route_layer(middleware::from_fn_with_state(
             state.clone(),

src/routes/photos.rs

@@ -189,28 +189,69 @@ pub async fn by_hash(
     photo.map(Json).ok_or_else(ApiError::not_found)
 }
 
+/// The one deletion path: delete the given photos and enqueue their S3
+/// cleanup jobs in the same transaction. Prefixes come from s3::photo_prefix
+/// so the key layout has a single source of truth. Returns how many photos
+/// were actually deleted.
+pub(super) async fn delete_with_cleanup(
+    tx: &mut sqlx::PgConnection,
+    ids: &[Uuid],
+) -> Result<u64, sqlx::Error> {
+    let deleted: Vec<Uuid> = sqlx::query_scalar("delete from photos where id = any($1) returning id")
+        .bind(ids)
+        .fetch_all(&mut *tx)
+        .await?;
+    if deleted.is_empty() {
+        return Ok(0);
+    }
+    let prefixes: Vec<String> = deleted.iter().map(|id| s3::photo_prefix(*id)).collect();
+    sqlx::query(
+        "insert into jobs (kind, payload)
+         select $1, jsonb_build_object('prefix', p)
+         from unnest($2::text[]) as p",
+    )
+    .bind(JobKind::DeleteS3Prefix.as_str())
+    .bind(&prefixes)
+    .execute(&mut *tx)
+    .await?;
+    Ok(deleted.len() as u64)
+}
+
 pub async fn delete(
     State(state): State<AppState>,
     Path(photo_id): Path<Uuid>,
 ) -> ApiResult<Json<serde_json::Value>> {
     let mut tx = state.db.begin().await?;
-    let deleted = sqlx::query("delete from photos where id = $1")
-        .bind(photo_id)
-        .execute(&mut *tx)
-        .await?;
-    if deleted.rows_affected() == 0 {
+    if delete_with_cleanup(&mut tx, &[photo_id]).await? == 0 {
         return Err(ApiError::not_found());
     }
-    jobs::enqueue(
-        &mut *tx,
-        JobKind::DeleteS3Prefix,
-        serde_json::json!({ "prefix": s3::photo_prefix(photo_id) }),
-    )
-    .await?;
     tx.commit().await?;
     Ok(Json(serde_json::json!({ "ok": true })))
 }
 
+#[derive(Deserialize)]
+pub struct DeleteManyBody {
+    ids: Vec<Uuid>,
+}
+
+pub async fn delete_many(
+    State(state): State<AppState>,
+    Json(body): Json<DeleteManyBody>,
+) -> ApiResult<Json<serde_json::Value>> {
+    if body.ids.is_empty() {
+        return Err(ApiError::bad_request("ids must not be empty"));
+    }
+    let mut tx = state.db.begin().await?;
+    let deleted = delete_with_cleanup(&mut tx, &body.ids).await?;
+    // Consistent with the single-photo route: deleting nothing is an error,
+    // not a silent success (e.g. a stale tab re-deleting already-gone photos).
+    if deleted == 0 {
+        return Err(ApiError::not_found());
+    }
+    tx.commit().await?;
+    Ok(Json(serde_json::json!({ "ok": true, "deleted": deleted })))
+}
+
 pub async fn reprocess(
     State(state): State<AppState>,
     Path(photo_id): Path<Uuid>,

src/routes/shares.rs

@@ -138,6 +138,49 @@ pub async fn create(
     Ok(Json(share_json(&state, &row)))
 }
 
+/// Distinguishes an absent JSON field (keep current value) from an explicit
+/// null (clear the expiry): absent → None, present → Some(inner).
+fn double_option<'de, D>(de: D) -> Result<Option<Option<DateTime<Utc>>>, D::Error>
+where
+    D: serde::Deserializer<'de>,
+{
+    serde::Deserialize::deserialize(de).map(Some)
+}
+
+#[derive(Deserialize)]
+pub struct UpdateShare {
+    allow_download: Option<bool>,
+    #[serde(default, deserialize_with = "double_option")]
+    expires_at: Option<Option<DateTime<Utc>>>,
+}
+
+pub async fn update(
+    State(state): State<AppState>,
+    Path(share_id): Path<Uuid>,
+    Json(body): Json<UpdateShare>,
+) -> ApiResult<Json<serde_json::Value>> {
+    let updated = sqlx::query(
+        "update shares set
+             allow_download = coalesce($2, allow_download),
+             expires_at = case when $3 then $4 else expires_at end
+         where id = $1",
+    )
+    .bind(share_id)
+    .bind(body.allow_download)
+    .bind(body.expires_at.is_some())
+    .bind(body.expires_at.flatten())
+    .execute(&state.db)
+    .await?;
+    if updated.rows_affected() == 0 {
+        return Err(ApiError::not_found());
+    }
+    let row: ShareAdminRow = sqlx::query_as(&format!("{SHARE_SELECT} where s.id = $1"))
+        .bind(share_id)
+        .fetch_one(&state.db)
+        .await?;
+    Ok(Json(share_json(&state, &row)))
+}
+
 /// Clear a share's password-lockout state (e.g. after a client fat-fingered
 /// their way into the 15-minute lock).
 pub async fn reset_lock(