Koko210/immich-folio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify client downloads and add bulk selection

Browse Source
This commit is contained in:
koko210Serve
2026-10-04 17:56:45 +03:00
parent 416fae33a2
commit fe4c716aa8
3 changed files with 261 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

291
components/ProofSessionControls.tsx
View File

@@ -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',
padding: '8px 16px',
gap: '10px',
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
// autosave debounce counts, or the ZIP would hold the previous selection.
/*
* "selection" and legacy "album" are both treated simply as
* "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}>
{(count > 0 || isFilterActive) && (
<div
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"
disabled
style={{
...downloadButton,
cursor: 'not-allowed',
opacity: 0.45,
}}
title={
downloadsLeft === 0
? 'Download limit reached'
: 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={() => setIsFilterActive((prev) => !prev)}
aria-pressed={isFilterActive}
onClick={toggleSelectAll}
disabled={albumCount === 0}
style={{
background: isFilterActive ? 'var(--accent, #e60012)' : 'var(--bg-card-hover)',
color: isFilterActive ? 'var(--on-accent, #fff)' : 'var(--text-primary)',
border: 'none',
padding: '6px 14px',
borderRadius: 'var(--radius-md)',
fontSize: '0.85rem',
fontWeight: 500,
cursor: 'pointer',
...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
// white (minimal) or pale, and the dimming would halve it again.
...(session.saveState === 'error' ? { color: 'var(--error)' } : { opacity: 0.75 }),
...(session.saveState === 'error'
? { color: 'var(--error)' }
: { 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' }}>
{session.submitted ? p.submitted : count === 0 ? p.empty : p.confirmSubmit(count)}
<p
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',
opacity: count === 0 || submitting ? 0.6 : 1,
cursor:
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 && (
<a
href={downloadHref('selection')}
onClick={session.countDownload}
style={secondaryButton}
>
{p.downloadSelection}
</a>
)}
{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.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>
)}

21
components/ProofingContext.tsx
View File

@@ -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,