feat(topbar): add divider between sender/receiver block and action buttons

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/messages/de.json

@@ -223,6 +223,12 @@
 	"admin_label_initial_password": "Passwort",
 	"doc_file_error_preview": "Vorschau konnte nicht geladen werden.",
 	"doc_download_title": "Herunterladen",
+	"topbar_back_label": "Zurück zur Dokumentenliste",
+	"topbar_more_actions": "Weitere Aktionen",
+	"topbar_overflow_more": "+{count} weitere",
+	"topbar_overflow_suffix": "weitere",
+	"topbar_overflow_heading": "Weitere Empfänger",
+	"topbar_overflow_show": "{count} weitere Empfänger anzeigen",
 	"doc_tag_filter_title": "Nach {name} filtern",
 	"doc_conversation_title": "Konversation anzeigen",
 	"doc_preview_iframe_title": "Dokumentvorschau",

frontend/messages/en.json

@@ -223,6 +223,12 @@
 	"admin_label_initial_password": "Password",
 	"doc_file_error_preview": "Could not load preview.",
 	"doc_download_title": "Download",
+	"topbar_back_label": "Back to document list",
+	"topbar_more_actions": "More actions",
+	"topbar_overflow_more": "+{count} more",
+	"topbar_overflow_suffix": "more",
+	"topbar_overflow_heading": "More receivers",
+	"topbar_overflow_show": "Show {count} more receivers",
 	"doc_tag_filter_title": "Filter by {name}",
 	"doc_conversation_title": "Show conversation",
 	"doc_preview_iframe_title": "Document Preview",

frontend/messages/es.json

@@ -223,6 +223,12 @@
 	"admin_label_initial_password": "Contraseña",
 	"doc_file_error_preview": "No se pudo cargar la vista previa.",
 	"doc_download_title": "Descargar",
+	"topbar_back_label": "Volver a la lista de documentos",
+	"topbar_more_actions": "Más acciones",
+	"topbar_overflow_more": "+{count} más",
+	"topbar_overflow_suffix": "más",
+	"topbar_overflow_heading": "Más destinatarios",
+	"topbar_overflow_show": "Mostrar {count} destinatarios más",
 	"doc_tag_filter_title": "Filtrar por {name}",
 	"doc_conversation_title": "Ver conversación",
 	"doc_preview_iframe_title": "Vista previa del documento",

frontend/src/lib/components/DocumentTopBar.svelte

@@ -3,11 +3,9 @@ import { m } from '$lib/paraglide/messages.js';
 import { formatDate } from '$lib/utils/personFormat';
 import { clickOutside } from '$lib/actions/clickOutside';
 import PersonChipRow from './PersonChipRow.svelte';
-import DocumentStatusChip from './DocumentStatusChip.svelte';
 import AnnotateHintStrip from './AnnotateHintStrip.svelte';
 import OverflowPillButton from './OverflowPillButton.svelte';
 
-type DocumentStatus = 'PLACEHOLDER' | 'UPLOADED' | 'TRANSCRIBED' | 'REVIEWED' | 'ARCHIVED';
 type Person = { id: string; firstName: string; lastName: string };
 
 type Doc = {
@@ -15,7 +13,6 @@ type Doc = {
 	title?: string | null;
 	originalFilename?: string | null;
 	documentDate?: string | null;
-	status: DocumentStatus;
 	sender?: Person | null;
 	receivers?: Person[] | null;
 	filePath?: string | null;
@@ -109,16 +106,16 @@ let mobileMenuOpen = $state(false);
 	</a>
 {/snippet}
 
-<div data-topbar class="border-b border-line bg-surface shadow-sm">
+<div data-topbar class="relative z-10 border-b border-line bg-surface shadow-sm">
 	<!-- Main row -->
-	<div class="flex h-[75px] shrink-0 items-center overflow-hidden xs:h-[88px]">
+	<div class="flex h-[75px] shrink-0 items-center xs:h-[88px]">
 		<!-- Accent bar -->
 		<div class="h-full w-[3px] shrink-0 bg-primary"></div>
 
 		<!-- Back link — 44×44px touch target -->
 		<a
 			href="/"
-			aria-label="Zurück zur Dokumentenliste"
+			aria-label={m.topbar_back_label()}
 			class="group -ml-0.5 flex h-11 w-11 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary"
 		>
 			<img
@@ -150,12 +147,7 @@ let mobileMenuOpen = $state(false);
 
 		<!-- 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">
-			<PersonChipRow
+			<PersonChipRow sender={doc.sender} receivers={receivers} abbreviated={true} extraCount={0} />
-				sender={doc.sender}
-				receivers={receivers}
-				abbreviated={true}
-				extraCount={extraCount}
-			/>
 		</div>
 
 		<!-- Overflow pill button (desktop) + status dot -->
@@ -163,10 +155,11 @@ let mobileMenuOpen = $state(false);
 			<OverflowPillButton extraCount={extraCount} persons={overflowPersons} />
 		{/if}
 
-		<DocumentStatusChip status={doc.status} />
+		<!-- Divider between metadata and actions -->
+		<div class="mx-3 hidden h-6 w-px shrink-0 bg-line md:block"></div>
 
 		<!-- Action buttons -->
-		<div class="ml-2 flex shrink-0 items-center gap-1.5 pr-3 font-sans">
+		<div class="flex shrink-0 items-center gap-1.5 pr-3 font-sans">
 			{#if canAnnotate && isPdf && !annotateMode}
 				{@render annotateBtn(false)}
 			{/if}
@@ -206,7 +199,7 @@ let mobileMenuOpen = $state(false);
 					<button
 						type="button"
 						onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
-						aria-label="Weitere Aktionen"
+						aria-label={m.topbar_more_actions()}
 						aria-haspopup="true"
 						aria-expanded={mobileMenuOpen}
 						class="flex h-9 w-9 items-center justify-center rounded border border-line bg-muted transition hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary"

frontend/src/lib/components/OverflowPillButton.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { tick } from 'svelte';
+import { m } from '$lib/paraglide/messages.js';
 import { clickOutside } from '$lib/actions/clickOutside';
 
 type Person = { id: string; firstName: string; lastName: string };
@@ -44,12 +45,12 @@ function handleKeydown(e: KeyboardEvent) {
 		type="button"
 		aria-haspopup="true"
 		aria-expanded={open}
-		aria-label="{extraCount} weitere Empfänger anzeigen"
+		aria-label={m.topbar_overflow_show({ count: extraCount })}
 		onclick={toggle}
 		onkeydown={handleKeydown}
 		class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[14px] font-bold text-ink-2 hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary"
 	>
-		+{extraCount} weitere
+		+{extraCount}<span class="hidden lg:inline">&nbsp;{m.topbar_overflow_suffix()}</span>
 	</button>
 
 	{#if open}
@@ -57,7 +58,9 @@ function handleKeydown(e: KeyboardEvent) {
 			role="list"
 			class="absolute top-full left-0 z-50 mt-1 min-w-[160px] rounded-md border border-line bg-surface p-3 shadow-lg"
 		>
-			<p class="mb-2 text-[14px] font-bold tracking-wide text-ink-2 uppercase">Weitere Empfänger</p>
+			<p class="mb-2 text-[14px] font-bold tracking-wide text-ink-2 uppercase">
+				{m.topbar_overflow_heading()}
+			</p>
 			{#each persons as person (person.id)}
 				<div role="listitem">
 					<a

frontend/src/lib/components/PersonChip.svelte

@@ -19,8 +19,9 @@ const initials = $derived(
 );
 </script>
 
-<span
+<a
-	class="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-line bg-muted px-2 py-0.5"
+	href="/persons/{person.id}"
+	class="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-line bg-muted px-2 py-0.5 hover:border-primary hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary"
 >
 	<span
 		class="flex h-[25px] w-[25px] shrink-0 items-center justify-center rounded-full text-[13px] font-bold text-white"
@@ -30,4 +31,4 @@ const initials = $derived(
 		{initials}
 	</span>
 	<span class="text-[14px] font-semibold text-ink">{displayName}</span>
-</span>
+</a>