From 71a44b084cdce5893ae24baf4e83e1b911340850 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sat, 9 May 2026 20:40:26 +0200
Subject: [PATCH] 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>
---
 .../src/lib/document/DocumentTopBar.svelte    | 24 ++-----
 .../lib/document/DocumentTopBarTitle.svelte   | 30 +++++++++
 .../DocumentTopBarTitle.svelte.test.ts        | 64 +++++++++++++++++++
 3 files changed, 100 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/lib/document/DocumentTopBarTitle.svelte
 create mode 100644 frontend/src/lib/document/DocumentTopBarTitle.svelte.test.ts

diff --git a/frontend/src/lib/document/DocumentTopBar.svelte b/frontend/src/lib/document/DocumentTopBar.svelte
index 96381a69..bc3e90d5 100644
--- a/frontend/src/lib/document/DocumentTopBar.svelte
+++ b/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">
diff --git a/frontend/src/lib/document/DocumentTopBarTitle.svelte b/frontend/src/lib/document/DocumentTopBarTitle.svelte
new file mode 100644
index 00000000..4643a398
--- /dev/null
+++ b/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>
diff --git a/frontend/src/lib/document/DocumentTopBarTitle.svelte.test.ts b/frontend/src/lib/document/DocumentTopBarTitle.svelte.test.ts
new file mode 100644
index 00000000..5780590a
--- /dev/null
+++ b/frontend/src/lib/document/DocumentTopBarTitle.svelte.test.ts
@@ -0,0 +1,64 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import DocumentTopBarTitle from './DocumentTopBarTitle.svelte';
+
+afterEach(cleanup);
+
+const baseProps = {
+	title: 'Brief an Helene' as string | null,
+	originalFilename: 'brief.pdf' as string | null,
+	documentDate: '1923-04-15' as string | null
+};
+
+describe('DocumentTopBarTitle', () => {
+	it('renders the title as a level-1 heading', async () => {
+		render(DocumentTopBarTitle, { props: baseProps });
+
+		await expect
+			.element(page.getByRole('heading', { level: 1, name: 'Brief an Helene' }))
+			.toBeVisible();
+	});
+
+	it('falls back to originalFilename when title is null', async () => {
+		render(DocumentTopBarTitle, { props: { ...baseProps, title: null } });
+
+		await expect.element(page.getByRole('heading', { name: 'brief.pdf' })).toBeVisible();
+	});
+
+	it('falls back to originalFilename when title is an empty string', async () => {
+		render(DocumentTopBarTitle, { props: { ...baseProps, title: '' } });
+
+		await expect.element(page.getByRole('heading', { name: 'brief.pdf' })).toBeVisible();
+	});
+
+	it('renders the short date format when a documentDate is supplied', async () => {
+		render(DocumentTopBarTitle, { props: baseProps });
+
+		await expect.element(page.getByText('15.04.1923')).toBeVisible();
+	});
+
+	it('omits the date paragraph entirely when documentDate is null', async () => {
+		render(DocumentTopBarTitle, { props: { ...baseProps, documentDate: null } });
+
+		expect(document.querySelector('p')).toBeNull();
+	});
+
+	it('uses the title (not the originalFilename) for the title attribute when title is set', async () => {
+		render(DocumentTopBarTitle, { props: baseProps });
+
+		const heading = (await page
+			.getByRole('heading', { name: 'Brief an Helene' })
+			.element()) as HTMLElement;
+		expect(heading.getAttribute('title')).toBe('Brief an Helene');
+	});
+
+	it('uses the originalFilename for the title attribute when title is null', async () => {
+		render(DocumentTopBarTitle, { props: { ...baseProps, title: null } });
+
+		const heading = (await page
+			.getByRole('heading', { name: 'brief.pdf' })
+			.element()) as HTMLElement;
+		expect(heading.getAttribute('title')).toBe('brief.pdf');
+	});
+});