Simplify client downloads and add bulk selection

app/admin/components/ProofingView.tsx

@@ -20,20 +20,12 @@ interface AlbumOption {
   assetCount: number;
 }
 
-type Download = AdminProofSession['download'];
-
 const STATE_LABEL: Record<AdminProofSession['state'], string> = {
   open: 'Open',
   submitted: 'Submitted',
   expired: 'Expired',
 };
 
-const DOWNLOAD_LABEL: Record<Download, string> = {
-  none: 'No downloads',
-  selection: 'Selection as ZIP',
-  album: 'Whole album as ZIP',
-};
-
 function formatDate(iso: string | null): string {
   if (!iso) return '—';
   const date = iso.length === 10 ? new Date(`${iso}T12:00:00`) : new Date(iso);
@@ -54,7 +46,7 @@ function CreateForm({ onCreated }: { onCreated: () => void }) {
   const [albumId, setAlbumId] = useState('');
   const [alias, setAlias] = useState('');
   const [expiresOn, setExpiresOn] = useState('');
-  const [download, setDownload] = useState<Download>('none');
+  const [downloadsAllowed, setDownloadsAllowed] = useState(false);
   const [limit, setLimit] = useState('');
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -80,15 +72,15 @@ function CreateForm({ onCreated }: { onCreated: () => void }) {
 	  alias: alias.trim() || null,
           albumId,
           expiresOn: expiresOn || null,
-          download,
+	  download: downloadsAllowed ? 'selection' : 'none',
-          downloadLimit: download !== 'none' && limit ? Number(limit) : null,
+	  downloadLimit: downloadsAllowed && limit ? Number(limit) : null,
         }),
       });
       setClientName('');
       setAlias('');
       setAlbumId('');
       setExpiresOn('');
-      setDownload('none');
+      setDownloadsAllowed(false);
       setLimit('');
       onCreated();
     } catch (err) {
@@ -161,19 +153,19 @@ function CreateForm({ onCreated }: { onCreated: () => void }) {
         </div>
 	<div className="admin-field">
 	  <label htmlFor="proof-download">Downloads</label>
+	
 	  <select
 	    id="proof-download"
-            value={download}
+	    value={downloadsAllowed ? 'allowed' : 'none'}
-            onChange={(e) => setDownload(e.target.value as Download)}
+	    onChange={(e) =>
+	      setDownloadsAllowed(e.target.value === 'allowed')
+	    }
 	  >
-            {(Object.keys(DOWNLOAD_LABEL) as Download[]).map((key) => (
+	    <option value="none">No downloads</option>
-              <option key={key} value={key}>
+	    <option value="allowed">Downloads allowed</option>
-                {DOWNLOAD_LABEL[key]}
-              </option>
-            ))}
 	  </select>
 	</div>
-        {download !== 'none' && (
+        {downloadsAllowed && (
           <div className="admin-field">
             <label htmlFor="proof-limit">Download limit (optional)</label>
             <input
@@ -278,9 +270,11 @@ function SessionCard({
 
   const downloadsText =
   session.download === 'none'
-      ? DOWNLOAD_LABEL.none
+    ? 'Downloads disabled'
-      : `${DOWNLOAD_LABEL[session.download]} · ${session.downloadsUsed}${
+    : `Downloads allowed · ${session.downloadsUsed}${
-          session.downloadLimit !== null ? ` / ${session.downloadLimit}` : ''
+        session.downloadLimit !== null
+          ? ` / ${session.downloadLimit}`
+          : ''
       } used`;
 
   return (

components/ProofSessionControls.tsx

@@ -1,13 +1,5 @@
 'use client';
 
-/**
- * The selection bar and review dialog of a client proofing link.
- *
- * Stands in for the anonymous mode's bar and share/export modal: there is
- * nothing to share (the link already is the share), the selection saves itself,
- * and the one action that matters is submitting it to the photographer.
- */
-
 import { useCallback, useState } from 'react';
 import { useProofing } from './ProofingContext';
 import { useDictionary } from './I18nProvider';
@@ -22,8 +14,8 @@ const barStyle: React.CSSProperties = {
   display: 'flex',
   alignItems: 'center',
   flexWrap: 'wrap',
-  gap: '12px',
+  gap: '10px',
-  padding: '8px 16px',
+  padding: '8px 12px',
   borderRadius: 'var(--radius-lg)',
   background: 'var(--bg-card, #1e1e1e)',
   color: 'var(--text-primary, #ffffff)',
@@ -33,6 +25,32 @@ const barStyle: React.CSSProperties = {
   maxWidth: 'calc(100vw - 32px)',
 };
 
+const barButton: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '0.4rem',
+  padding: '7px 12px',
+  borderRadius: 'var(--radius-md)',
+  background: 'var(--bg-card-hover)',
+  color: 'var(--text-primary)',
+  border: '1px solid var(--border-subtle)',
+  fontFamily: 'inherit',
+  fontSize: '0.85rem',
+  fontWeight: 500,
+  lineHeight: 1.3,
+  cursor: 'pointer',
+  textDecoration: 'none',
+};
+
+const downloadButton: React.CSSProperties = {
+  ...barButton,
+  background: 'var(--accent, #e60012)',
+  color: 'var(--on-accent, #fff)',
+  border: 'none',
+  fontWeight: 600,
+};
+
 const primaryButton: React.CSSProperties = {
   display: 'flex',
   alignItems: 'center',
@@ -41,37 +59,39 @@ const primaryButton: React.CSSProperties = {
   padding: '0.75rem 1rem',
   borderRadius: 'var(--radius-sm, 6px)',
   background: 'var(--accent, #e60012)',
-  // Black or white, whichever the layout found to carry on this accent.
   color: 'var(--on-accent, #fff)',
   border: 'none',
   fontWeight: 500,
-  // The same for the <button>s and the download <a>s, which would otherwise
-  // take the browser's differing defaults.
   fontFamily: 'inherit',
   fontSize: '0.9rem',
   lineHeight: 1.3,
   cursor: 'pointer',
-  textDecoration: 'none',
-};
-
-const secondaryButton: React.CSSProperties = {
-  ...primaryButton,
-  background: 'var(--bg-card-hover)',
-  color: 'inherit',
-  border: '1px solid var(--border-subtle)',
 };
 
 export function ProofSessionControls() {
   const t = useDictionary();
   const proofing = useProofing();
+
   const [open, setOpen] = useState(false);
   const [submitting, setSubmitting] = useState(false);
+
   const close = useCallback(() => setOpen(false), []);
   const cardRef = useModalDialog(close, open);
 
   if (!proofing?.session) return null;
-  const { session, isFilterActive, setIsFilterActive, getSelectedTokens } = proofing;
+
+  const {
+    session,
+    isFilterActive,
+    setIsFilterActive,
+    getSelectedTokens,
+    albumCount,
+    toggleSelectAll,
+  } = proofing;
+
   const count = getSelectedTokens().length;
+  const allSelected = albumCount > 0 && count === albumCount;
+
   const p = t.proofSession;
 
   const status =
@@ -89,49 +109,135 @@ export function ProofSessionControls() {
     setSubmitting(false);
   };
 
-  const downloadHref = (scope: 'selection' | 'album') => `${session.archiveUrl}?scope=${scope}`;
   const downloadsLeft = session.downloadsRemaining;
-  const canDownload = session.download !== 'none' && (downloadsLeft === null || downloadsLeft > 0);
+
-  // The selection ZIP is built from what the server has saved, so it is only
+  /*
-  // offered once there is nothing left to save — a heart still waiting out the
+   * "selection" and legacy "album" are both treated simply as
-  // autosave debounce counts, or the ZIP would hold the previous selection.
+   * "downloads allowed" in our UI.
+   */
+  const downloadsAllowed =
+    session.download !== 'none' &&
+    (downloadsLeft === null || downloadsLeft > 0);
+
+  /*
+   * The ZIP route reads the server-side saved selection, not merely the
+   * current browser state. Do not enable the button until autosave has
+   * caught up, otherwise a very fast click could download the previous
+   * selection.
+   */
   const selectionSaved =
-    !session.unsaved && session.saveState !== 'saving' && session.saveState !== 'error';
+    !session.unsaved &&
+    session.saveState !== 'saving' &&
+    session.saveState !== 'error';
+
+  const downloadReady =
+    downloadsAllowed &&
+    count > 0 &&
+    selectionSaved;
+
+  const downloadHref =
+    `${session.archiveUrl}?scope=selection`;
 
   return (
     <>
-      <div className="proofing-sticky-bar proof-session-bar" style={barStyle}>
+      <div
-        {(count > 0 || isFilterActive) && (
+        className="proofing-sticky-bar proof-session-bar"
+        style={barStyle}
+      >
+        {/* Persistent download button */}
+        {session.download !== 'none' &&
+          (downloadReady ? (
+            <a
+              href={downloadHref}
+              onClick={session.countDownload}
+              style={downloadButton}
+              title={
+                downloadsLeft === null
+                  ? `Download ${count} selected photos as ZIP`
+                  : `Download ${count} selected photos as ZIP — ${downloadsLeft} downloads remaining`
+              }
+            >
+              ↓ Download ZIP ({count})
+            </a>
+          ) : (
             <button
               type="button"
-            onClick={() => setIsFilterActive((prev) => !prev)}
+              disabled
-            aria-pressed={isFilterActive}
               style={{
-              background: isFilterActive ? 'var(--accent, #e60012)' : 'var(--bg-card-hover)',
+                ...downloadButton,
-              color: isFilterActive ? 'var(--on-accent, #fff)' : 'var(--text-primary)',
+                cursor: 'not-allowed',
-              border: 'none',
+                opacity: 0.45,
-              padding: '6px 14px',
+              }}
-              borderRadius: 'var(--radius-md)',
+              title={
-              fontSize: '0.85rem',
+                downloadsLeft === 0
-              fontWeight: 500,
+                  ? 'Download limit reached'
-              cursor: 'pointer',
+                  : count === 0
+                    ? 'Select at least one photo'
+                    : session.saveState === 'error'
+                      ? 'Selection could not be saved'
+                      : 'Saving selection…'
+              }
+            >
+              ↓ Download ZIP ({count})
+            </button>
+          ))}
+
+        {/* Select / deselect every photo */}
+        {!session.submitted && (
+          <button
+            type="button"
+            onClick={toggleSelectAll}
+            disabled={albumCount === 0}
+            style={{
+              ...barButton,
+              opacity: albumCount === 0 ? 0.5 : 1,
+              cursor: albumCount === 0 ? 'not-allowed' : 'pointer',
             }}
           >
-            {isFilterActive ? t.proofing.showAll : t.proofing.selected(count)}
+            {allSelected ? 'Deselect all' : 'Select all'}
           </button>
         )}
+
+        {/* Selection counter / filter */}
+        <button
+          type="button"
+          onClick={() => {
+            if (count > 0 || isFilterActive) {
+              setIsFilterActive((prev) => !prev);
+            }
+          }}
+          aria-pressed={isFilterActive}
+          disabled={count === 0 && !isFilterActive}
+          style={{
+            ...barButton,
+            background: isFilterActive
+              ? 'var(--accent, #e60012)'
+              : 'var(--bg-card-hover)',
+            color: isFilterActive
+              ? 'var(--on-accent, #fff)'
+              : 'var(--text-primary)',
+            cursor:
+              count === 0 && !isFilterActive
+                ? 'default'
+                : 'pointer',
+          }}
+        >
+          {t.proofing.selected(count)}
+        </button>
+
         <span
           role="status"
           aria-live="polite"
           style={{
             fontSize: '0.8rem',
-            // A failed save is an error, not a brand mark: the accent can be
+            ...(session.saveState === 'error'
-            // white (minimal) or pale, and the dimming would halve it again.
+              ? { color: 'var(--error)' }
-            ...(session.saveState === 'error' ? { color: 'var(--error)' } : { opacity: 0.75 }),
+              : { opacity: 0.75 }),
           }}
         >
           {session.submitted ? p.locked : status}
         </span>
+
         <button
           type="button"
           onClick={() => setOpen(true)}
@@ -145,7 +251,9 @@ export function ProofSessionControls() {
             textDecoration: 'underline',
           }}
         >
-          {session.submitted ? p.modalTitle(count) : p.review}
+          {session.submitted
+            ? p.modalTitle(count)
+            : p.review}
         </button>
       </div>
 
@@ -176,7 +284,8 @@ export function ProofSessionControls() {
               background: 'var(--bg-card, #1e1e1e)',
               color: 'var(--text-primary, #ffffff)',
               borderRadius: 'var(--radius-md, 12px)',
-              border: '1px solid var(--border-subtle, rgba(255,255,255,0.1))',
+              border:
+                '1px solid var(--border-subtle, rgba(255,255,255,0.1))',
               padding: '1.5rem',
               maxWidth: '480px',
               width: '100%',
@@ -193,10 +302,15 @@ export function ProofSessionControls() {
             >
               <h3
                 id="proof-session-title"
-                style={{ margin: 0, fontSize: '1.2rem', fontWeight: 600 }}
+                style={{
+                  margin: 0,
+                  fontSize: '1.2rem',
+                  fontWeight: 600,
+                }}
               >
                 {p.modalTitle(count)}
               </h3>
+
               <button
                 type="button"
                 onClick={close}
@@ -215,11 +329,27 @@ export function ProofSessionControls() {
               </button>
             </div>
 
-            <p style={{ fontSize: '0.9rem', opacity: 0.85, marginBottom: '1rem' }}>
+            <p
-              {session.submitted ? p.submitted : count === 0 ? p.empty : p.confirmSubmit(count)}
+              style={{
+                fontSize: '0.9rem',
+                opacity: 0.85,
+                marginBottom: '1rem',
+              }}
+            >
+              {session.submitted
+                ? p.submitted
+                : count === 0
+                  ? p.empty
+                  : p.confirmSubmit(count)}
             </p>
 
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '0.75rem',
+              }}
+            >
               {!session.submitted && (
                 <button
                   type="button"
@@ -227,39 +357,46 @@ export function ProofSessionControls() {
                   disabled={count === 0 || submitting}
                   style={{
                     ...primaryButton,
-                    cursor: count === 0 || submitting ? 'not-allowed' : 'pointer',
+                    cursor:
-                    opacity: count === 0 || submitting ? 0.6 : 1,
+                      count === 0 || submitting
+                        ? 'not-allowed'
+                        : 'pointer',
+                    opacity:
+                      count === 0 || submitting
+                        ? 0.6
+                        : 1,
                   }}
                 >
-                  {submitting ? p.submitting : p.submit}
+                  {submitting
+                    ? p.submitting
+                    : p.submit}
                 </button>
               )}
 
-              {canDownload && count > 0 && selectionSaved && (
+              {session.download !== 'none' &&
-                <a
+                downloadsLeft !== null && (
-                  href={downloadHref('selection')}
+                  <p
-                  onClick={session.countDownload}
+                    style={{
-                  style={secondaryButton}
+                      fontSize: '0.8rem',
+                      opacity: 0.7,
+                      margin: 0,
+                      textAlign: 'center',
+                    }}
                   >
-                  {p.downloadSelection}
+                    {downloadsLeft > 0
-                </a>
+                      ? p.downloadsLeft(downloadsLeft)
-              )}
+                      : t.download.limitReached}
-              {canDownload && session.download === 'album' && (
-                <a
-                  href={downloadHref('album')}
-                  onClick={session.countDownload}
-                  style={secondaryButton}
-                >
-                  {p.downloadAll}
-                </a>
-              )}
-              {session.download !== 'none' && downloadsLeft !== null && (
-                <p style={{ fontSize: '0.8rem', opacity: 0.7, margin: 0, textAlign: 'center' }}>
-                  {downloadsLeft > 0 ? p.downloadsLeft(downloadsLeft) : t.download.limitReached}
                   </p>
                 )}
+
               {session.saveState === 'error' && (
-                <p role="alert" style={{ fontSize: '0.85rem', margin: 0 }}>
+                <p
+                  role="alert"
+                  style={{
+                    fontSize: '0.85rem',
+                    margin: 0,
+                  }}
+                >
                   {p.saveFailed}
                 </p>
               )}

components/ProofingContext.tsx

@@ -59,6 +59,11 @@ export interface ProofingContextType {
   getFormattedList: () => string;
   /** Selected asset tokens in album order — the payload for a ZIP download. */
   getSelectedTokens: () => string[];
+  /** Number of assets in the current album. */
+  albumCount: number;
+  
+  /** Select every asset, or clear everything when all are already selected. */
+  toggleSelectAll: () => void;
   allowMailto: boolean;
   /**
    * `encodeEmail()` of the "email to photographer" recipient, when one is
@@ -284,6 +289,20 @@ export function ProofingProvider({
     }
   };
 
+  const toggleSelectAll = () => {
+    if (!sessionInit || submitted) return;
+  
+    editSelection((prev) => {
+      const allSelected =
+        albumTokens.length > 0 &&
+        albumTokens.every((token) => prev.has(token));
+  
+      return allSelected
+        ? new Set<string>()
+        : new Set(albumTokens);
+    });
+  };
+
   const getProofingUrl = () => {
     if (albumTokens.length === 0 || favorites.size === 0) {
       return typeof window !== 'undefined' ? window.location.href : '';
@@ -335,6 +354,8 @@ export function ProofingProvider({
         getProofingUrl,
         getFormattedList,
         getSelectedTokens,
+	albumCount: albumTokens.length,
+	toggleSelectAll,
         allowMailto,
         encodedMailto,
         downloadArchiveUrl,