63abfdaadc
First step of the Phase 5 split plan from issue #496. The 14-line title + date block becomes its own component named after the visual region. TDD red/green: DocumentTopBarTitle.svelte.test.ts written first (7 tests covering title, originalFilename fallback, empty-string fallback, short-date rendering, no-date branch, title attribute sourcing). After the test was red the component was created. DocumentTopBar.svelte updated to use it; the existing 18-test suite still passes. Refs #496. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
31 lines
854 B
Svelte
31 lines
854 B
Svelte
<script lang="ts">
|
|
import { formatDate } from '$lib/shared/utils/date';
|
|
|
|
type Props = {
|
|
title?: string | null;
|
|
originalFilename?: string | null;
|
|
documentDate?: string | null;
|
|
};
|
|
|
|
let { title, originalFilename, documentDate }: Props = $props();
|
|
|
|
const displayTitle = $derived(title || originalFilename || '');
|
|
const shortDate = $derived(documentDate ? formatDate(documentDate, 'short') : null);
|
|
const longDate = $derived(documentDate ? formatDate(documentDate, 'long') : null);
|
|
</script>
|
|
|
|
<div class="min-w-0 flex-1 overflow-hidden">
|
|
<h1
|
|
class="truncate font-serif text-[18px] leading-tight text-ink lg:text-[20px]"
|
|
title={displayTitle}
|
|
>
|
|
{displayTitle}
|
|
</h1>
|
|
{#if shortDate}
|
|
<p class="font-sans text-[16px] text-ink-2">
|
|
<span class="lg:hidden">{shortDate}</span>
|
|
<span class="hidden lg:inline">{longDate}</span>
|
|
</p>
|
|
{/if}
|
|
</div>
|