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/DocumentTopBar.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
 import { slide } from 'svelte/transition';
-import { formatDate } from '$lib/shared/utils/date';
 import { clickOutside } from '$lib/shared/actions/clickOutside';
 import PersonChipRow from '$lib/person/PersonChipRow.svelte';
 import OverflowPillButton from '$lib/shared/primitives/OverflowPillButton.svelte';
 import DocumentMetadataDrawer from './DocumentMetadataDrawer.svelte';
+import DocumentTopBarTitle from './DocumentTopBarTitle.svelte';
 import BackButton from '$lib/shared/primitives/BackButton.svelte';
 
 type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
@@ -59,9 +59,6 @@ const receivers = $derived(doc.receivers ?? []);
 const extraCount = $derived(Math.max(0, receivers.length - 2));
 const overflowPersons = $derived(receivers.slice(2));
 
-const shortDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'short') : null);
-const longDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'long') : null);
-
 let mobileMenuOpen = $state(false);
 </script>
 
@@ -161,20 +158,11 @@ let mobileMenuOpen = $state(false);
 		<div class="mx-2 h-6 w-px shrink-0 bg-line"></div>
 
 		<!-- Title + meta -->
-		<div class="min-w-0 flex-1 overflow-hidden">
-			<h1
-				class="truncate font-serif text-[18px] leading-tight text-ink lg:text-[20px]"
-				title={doc.title ?? doc.originalFilename ?? ''}
-			>
-				{doc.title || doc.originalFilename}
-			</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>
+		<DocumentTopBarTitle
+			title={doc.title}
+			originalFilename={doc.originalFilename}
+			documentDate={doc.documentDate}
+		/>
 
 		<!-- Chip row — desktop only, hidden on small screens to make room for buttons -->
 		<div class="mx-3 hidden min-w-0 shrink-0 md:block">