refactor(document): extract DocumentTopBarTitle from DocumentTopBar

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>

frontend/src/lib/document/DocumentTopBarTitle.svelte

@@ -0,0 +1,30 @@
+<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>