feat(dashboard): add UploadSuccessBanner component

Transient post-upload banner for issue #296: singular/plural German copy,
aria-live=polite for screen readers, manual X dismiss, 8s auto-dismiss.
"Jetzt ergänzen →" CTA links directly to /enrich so seniors can continue
straight into the enrichment flow after a batch upload.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-20 21:53:28 +02:00
parent 01e72611f0
commit b29125615f
2 changed files with 119 additions and 0 deletions

View File

@@ -0,0 +1,62 @@
<script lang="ts">
import * as m from '$lib/paraglide/messages.js';
interface Props {
count: number;
onClose: () => void;
}
let { count, onClose }: Props = $props();
const message = $derived(
count === 1 ? m.upload_banner_singular() : m.upload_banner_plural({ count })
);
$effect(() => {
const timer = setTimeout(onClose, 8000);
return () => clearTimeout(timer);
});
</script>
<div
role="status"
aria-live="polite"
class="flex items-center gap-3 rounded-sm border border-line bg-accent-bg/60 px-4 py-3 text-ink"
>
<svg
class="h-5 w-5 shrink-0 text-primary"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
<p class="flex-1 font-sans text-sm">
<span>{message}</span>
<a href="/enrich" class="ml-1 font-medium text-primary hover:underline">
{m.upload_banner_cta()}
</a>
</p>
<button
type="button"
data-testid="upload-banner-close"
aria-label={m.upload_banner_close()}
onclick={onClose}
class="inline-flex h-6 w-6 items-center justify-center rounded-sm text-ink-3 hover:bg-ink/10 hover:text-ink"
>
<svg
class="h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>