fix(bulk-edit): pluralization, edit-mode CTA, error UI, real loading state

Elicit C1+C3 — bulk-selection count uses ICU-style plural keys
(bulk_edit_n_selected_one / _other) so n=1 reads as "1 Dokument" instead
of "1 Dokumente". Save CTA in edit mode reads "Anwenden" via the existing
bulk_edit_save_button key; UploadSaveBar grew an editMode prop. Multi-
chunk progress text is now visible (not aria-only).

Felix C2 — bulk-edit page wires the backend error code through
parseBackendError + getErrorMessage instead of falling back to a generic
internal_error.

Felix C5 — editAllMatching no longer swallows fetch failures: the button
shows an inline error with the backend-mapped message (e.g. when the
filter cap is exceeded).

Leonie C8 — replace the literal "…" loading glyph on /documents/bulk-edit
with a spinner + role=status + aria-live=polite + visible "Loading
documents…" text.

Leonie C9 — partial-failure card and bulk-edit page error card now use
the design-system `text-danger` / `bg-danger/10` / `border-danger/40`
tokens (dark-mode safe) instead of raw red palette values.

Leonie C10 + C13 — German plural fixed; EN badges retensed
("+ added" → "+ will be added", "replaced" → "will replace") to match
the future-tense intent of DE/ES.

Refs #225, PR #331

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-25 16:46:58 +02:00
parent 92d623e298
commit 7df00859c6
8 changed files with 94 additions and 22 deletions

View File

@@ -8,6 +8,7 @@ import DocumentList from '../DocumentList.svelte';
import Pagination from '$lib/components/Pagination.svelte';
import BulkSelectionBar from '$lib/components/document/BulkSelectionBar.svelte';
import { bulkSelectionStore } from '$lib/stores/bulkSelection.svelte';
import { getErrorMessage, parseBackendError } from '$lib/errors';
import * as m from '$lib/paraglide/messages.js';
let { data } = $props();
@@ -141,16 +142,18 @@ $effect(() => {
});
let editingAll = $state(false);
let editAllError = $state<string | null>(null);
/**
* Fast path: replace the current selection with every document matching the
* active filter (across all pages) and jump to the bulk-edit screen. The
* /api/documents/ids endpoint is uncapped — chunking happens at PATCH time
* inside the bulk-edit page's save handler.
* /api/documents/ids endpoint is hard-capped (5000 results); on cap overflow
* the backend returns BULK_EDIT_TOO_MANY_IDS, which we surface inline.
*/
async function editAllMatching() {
if (editingAll) return;
editingAll = true;
editAllError = null;
try {
const params = buildSearchParams({
q: data.q || '',
@@ -168,12 +171,15 @@ async function editAllMatching() {
params.delete('dir');
const res = await fetch(`/api/documents/ids?${params.toString()}`);
if (!res.ok) {
editingAll = false;
const backend = await parseBackendError(res);
editAllError = getErrorMessage(backend?.code);
return;
}
const ids: string[] = await res.json();
bulkSelectionStore.setAll(ids);
await goto('/documents/bulk-edit');
} catch {
editAllError = m.bulk_edit_all_x_failed();
} finally {
editingAll = false;
}
@@ -229,7 +235,7 @@ $effect(() => {
/>
{#if data.canWrite && data.totalElements > 0}
<div class="mb-2 flex justify-end">
<div class="mb-2 flex flex-col items-end gap-1">
<button
type="button"
onclick={editAllMatching}
@@ -239,6 +245,11 @@ $effect(() => {
>
{m.bulk_edit_all_x({ count: data.totalElements })}
</button>
{#if editAllError}
<p role="alert" class="text-xs text-danger" data-testid="bulk-edit-all-x-error">
{editAllError}
</p>
{/if}
</div>
{/if}

View File

@@ -5,6 +5,7 @@ import { bulkSelectionStore } from '$lib/stores/bulkSelection.svelte';
import BulkDocumentEditLayout, {
type BulkEditEntry
} from '$lib/components/document/BulkDocumentEditLayout.svelte';
import { getErrorMessage, parseBackendError } from '$lib/errors';
import { m } from '$lib/paraglide/messages.js';
let entries = $state<BulkEditEntry[]>([]);
@@ -14,6 +15,9 @@ let error = $state<string | null>(null);
onMount(async () => {
const ids = Array.from(bulkSelectionStore.ids);
if (ids.length === 0) {
// Skip the loading flash on the empty-store redirect path — the user
// is bouncing back to /documents in the next tick.
loading = false;
await goto('/documents');
return;
}
@@ -24,14 +28,15 @@ onMount(async () => {
body: JSON.stringify({ ids })
});
if (!res.ok) {
error = m.error_internal_error();
const backend = await parseBackendError(res);
error = getErrorMessage(backend?.code);
loading = false;
return;
}
const summaries = (await res.json()) as BulkEditEntry[];
entries = summaries;
} catch {
error = m.error_internal_error();
error = getErrorMessage(undefined);
} finally {
loading = false;
}
@@ -43,9 +48,35 @@ onMount(async () => {
</svelte:head>
{#if loading}
<div class="flex h-full items-center justify-center p-12 text-sm text-ink-2"></div>
<div
class="flex h-full items-center justify-center gap-3 p-12 text-sm text-ink-2"
role="status"
aria-live="polite"
data-testid="bulk-edit-loading"
>
<svg
class="h-5 w-5 animate-spin text-ink-3"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
aria-hidden="true"
>
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
></circle>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
<span>{m.bulk_edit_loading()}</span>
</div>
{:else if error}
<div class="m-6 rounded-sm border border-red-300 bg-red-50 p-4 text-sm text-red-700">
<div
role="alert"
class="m-6 rounded-sm border border-danger/40 bg-danger/10 p-4 text-sm text-danger"
data-testid="bulk-edit-page-error"
>
{error}
</div>
{:else if entries.length > 0}