marcel/familienarchiv
1
0
Fork 0
Code Issues 114 Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix(bulk-upload): spec-compliant split-panel layout with local PDF preview

Browse Source 
Rewrites BulkDocumentEditLayout to match the spec exactly:
- Fixed viewport layout (same as DocumentEditLayout) filling viewport below nav
- Split panel visible in all states (N=0/1/≥2) — was fullscreen dark drop zone
- N=0: centered drop-zone-box in left panel; shared form visible but greyed out
- N≥1: real PDF preview via URL.createObjectURL (no server upload required)
- N≥2: FileSwitcherStrip at bottom of left panel; count pill + discard in topbar
- FileEntry gains previewUrl; blob URLs created on add, revoked on remove/destroy
- save() checks response.ok and marks failed files with status: 'error'
- BulkDropZone redesigned: spec-accurate box with circular mint icon, serif title
- FileSwitcherStrip: number badges, arrows, keyboard nav via data-chip-id selector
- ScopeCard, UploadSaveBar: hardcoded German replaced with Paraglide i18n keys
- +page.svelte simplified to bare component render (layout is self-contained)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-24 19:17:36 +02:00
committed by marcel
parent ef7a51fe30
commit 539842e849
8 changed files with 311 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/lib/components/document/UploadSaveBar.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import * as m from '$lib/paraglide/messages';
import { m } from '$lib/paraglide/messages.js';
let {
fileCount,
@@ -14,27 +14,26 @@ let {
} = $props();
</script>
<div
class="border-brand-sand sticky bottom-0 z-10 -mx-4 border-t bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
>
<div class="shrink-0 border-t border-line bg-surface px-4 py-3">
{#if chunkProgress}
<progress
value={chunkProgress.done}
max={chunkProgress.total}
class="[&::-webkit-progress-bar]:bg-brand-sand mb-3 h-1 w-full rounded-full [&::-webkit-progress-bar]:rounded-full [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:bg-brand-mint"
class="[&::-webkit-progress-bar]:bg-brand-sand mb-3 h-1 w-full rounded-full [&::-webkit-progress-bar]:rounded-full [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:bg-accent"
></progress>
{/if}
<div class="flex items-center justify-between">
<div class="flex items-center justify-between gap-3">
<button type="button" onclick={onDiscard} class="text-sm text-red-600/70 hover:text-red-700">
{m.bulk_discard_all()}
</button>
<button
type="button"
data-testid="bulk-save-btn"
disabled={fileCount === 0}
onclick={onSave}
class="min-h-[44px] rounded-sm bg-brand-navy px-6 text-sm font-bold tracking-widest text-white uppercase hover:bg-brand-navy/90"
class="min-h-[44px] rounded-sm bg-primary px-6 text-sm font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-90 disabled:opacity-40"
>
{fileCount === 1 ? 'Speichern →' : `${fileCount} speichern →`}
{fileCount === 1 ? m.bulk_save_cta_one() : m.bulk_save_cta({ count: fileCount })}
</button>
</div>
</div>