d4f32ed5d4
- BulkSelectionBar component: sticky bottom bar shown only when canWrite and selection is non-empty. Buttons meet WCAG 44px touch targets and iOS safe-area inset is honoured. - Bar mounted on /documents and /enrich. - Alle X editieren button on /documents replaces the selection with every UUID matching the active filter (via /api/documents/ids) and jumps to /documents/bulk-edit. Refs #225 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
47 lines
1.4 KiB
Svelte
47 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { goto } from '$app/navigation';
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import { bulkSelectionStore } from '$lib/stores/bulkSelection.svelte';
|
|
|
|
let { canWrite }: { canWrite: boolean } = $props();
|
|
|
|
const count = $derived(bulkSelectionStore.size);
|
|
|
|
function openBulkEdit() {
|
|
goto('/documents/bulk-edit');
|
|
}
|
|
|
|
function clearAll() {
|
|
bulkSelectionStore.clear();
|
|
}
|
|
</script>
|
|
|
|
{#if canWrite && count > 0}
|
|
<div
|
|
data-testid="bulk-selection-bar"
|
|
class="fixed right-0 bottom-0 left-0 z-30 flex items-center justify-between border-t border-line bg-surface px-4 py-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] shadow-[0_-2px_8px_rgba(0,0,0,0.06)] sm:px-6"
|
|
>
|
|
<span class="font-sans text-sm font-medium text-ink" data-testid="bulk-selection-count">
|
|
{m.bulk_edit_n_selected({ count })}
|
|
</span>
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onclick={clearAll}
|
|
class="inline-flex min-h-[44px] items-center px-4 py-2 font-sans text-sm font-medium text-ink-2 transition-colors hover:text-ink"
|
|
data-testid="bulk-clear-all"
|
|
>
|
|
{m.bulk_edit_clear_all()}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onclick={openBulkEdit}
|
|
class="inline-flex min-h-[44px] items-center bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
|
|
data-testid="bulk-edit-open"
|
|
>
|
|
{m.bulk_edit_button()}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/if}
|