feat(dashboard): add EnrichmentBlock wrapper component

Composes UploadSuccessBanner + DashboardNeedsMetadata and reserves a
360px skeleton while \$navigating re-runs the loader with a fresh
incomplete list. Prevents the layout-shift jump after a batch upload
(Leonie's resolved decision #3 on issue #296).

Renders nothing when there is nothing to show — keeps the clean empty
dashboard.

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

View File

@@ -0,0 +1,39 @@
<script lang="ts">
import { navigating } from '$app/stores';
import DashboardNeedsMetadata from './DashboardNeedsMetadata.svelte';
import UploadSuccessBanner from './UploadSuccessBanner.svelte';
type IncompleteDoc = {
id: string;
title: string;
uploadedAt: string;
};
interface Props {
topDocs: IncompleteDoc[];
totalCount: number;
bannerCount: number;
onBannerClose: () => void;
}
let { topDocs, totalCount, bannerCount, onBannerClose }: Props = $props();
const showSkeleton = $derived(!!$navigating && topDocs.length === 0);
const showBlock = $derived(topDocs.length > 0 || bannerCount > 0 || showSkeleton);
</script>
{#if showBlock}
<div data-testid="enrichment-block" class="flex flex-col gap-3">
{#if bannerCount > 0}
<UploadSuccessBanner count={bannerCount} onClose={onBannerClose} />
{/if}
{#if topDocs.length > 0}
<DashboardNeedsMetadata topDocs={topDocs} totalCount={totalCount} />
{:else if showSkeleton}
<div
class="h-[360px] animate-pulse rounded-sm border border-line bg-surface/50 motion-reduce:animate-none"
aria-hidden="true"
></div>
{/if}
</div>
{/if}