familienarchiv/frontend/src/lib/document/DocumentTopBar.svelte

<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import { slide } from 'svelte/transition';
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 };
type Tag = { id: string; name: string };

type Doc = {
	id: string;
	title?: string | null;
	originalFilename?: string | null;
	documentDate?: string | null;
	sender?: Person | null;
	receivers?: Person[] | null;
	filePath?: string | null;
	contentType?: string | null;
	location?: string | null;
	status?: string | null;
	tags?: Tag[] | null;
};

type GeschichteSummary = {
	id: string;
	title: string;
	publishedAt?: string;
	author?: { firstName?: string; lastName?: string; email: string };
};

type Props = {
	doc: Doc;
	canWrite: boolean;
	fileUrl: string;
	transcribeMode: boolean;
	inferredRelationship?: { labelFromA: string; labelFromB: string } | null;
	geschichten?: GeschichteSummary[];
	canBlogWrite?: boolean;
};

let {
	doc,
	canWrite,
	fileUrl,
	transcribeMode = $bindable(),
	inferredRelationship = null,
	geschichten = [],
	canBlogWrite = false
}: Props = $props();

let detailsOpen = $state(false);

const isPdf = $derived(!!doc.filePath && doc.contentType?.startsWith('application/pdf'));
const receivers = $derived(doc.receivers ?? []);
const extraCount = $derived(Math.max(0, receivers.length - 2));
const overflowPersons = $derived(receivers.slice(2));

let mobileMenuOpen = $state(false);
</script>

{#snippet transcribeBtn(mobile: boolean)}
	<button
		onclick={() => {
			transcribeMode = true;
			if (mobile) mobileMenuOpen = false;
		}}
		aria-label={m.transcription_mode_label()}
		aria-pressed={false}
		class={mobile
			? 'flex w-full items-center gap-2 rounded px-3 py-2 text-left text-[16px] text-ink transition hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary'
			: 'hidden items-center gap-1.5 rounded border border-primary px-3 py-1.5 font-sans text-[16px] font-medium text-ink transition hover:bg-primary hover:text-primary-fg focus-visible:ring-2 focus-visible:ring-primary md:flex'}
	>
		<svg
			class="h-5 w-5 shrink-0"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
			stroke-width="1.5"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
			/>
		</svg>
		{m.transcription_mode_label()}
	</button>
{/snippet}

{#snippet transcribeStopBtn(mobile: boolean)}
	<button
		onclick={() => {
			transcribeMode = false;
			if (mobile) mobileMenuOpen = false;
		}}
		aria-label={m.transcription_mode_stop()}
		aria-pressed={true}
		class={mobile
			? 'flex w-full items-center gap-2 rounded bg-primary px-3 py-2 text-left text-[16px] text-primary-fg transition focus-visible:ring-2 focus-visible:ring-primary'
			: 'flex items-center gap-1.5 rounded bg-primary px-3 py-1.5 font-sans text-[16px] font-medium text-primary-fg transition focus-visible:ring-2 focus-visible:ring-primary'}
	>
		<svg
			class="h-5 w-5 shrink-0"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
			stroke-width="1.5"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
			/>
		</svg>
		{m.transcription_mode_stop()}
	</button>
{/snippet}

{#snippet downloadLink(mobile: boolean)}
	<a
		href={fileUrl}
		download={doc.originalFilename}
		onclick={() => {
			if (mobile) mobileMenuOpen = false;
		}}
		class={mobile
			? 'flex items-center gap-2 rounded px-3 py-2 text-[16px] text-ink transition hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary'
			: 'hidden rounded border border-transparent bg-muted p-1.5 text-ink transition hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary md:block'}
		title={m.doc_download_title()}
	>
		<img
			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Download-MD.svg"
			alt=""
			aria-hidden="true"
			class="h-5 w-5 shrink-0"
		/>
		{#if mobile}{m.doc_download_title()}{/if}
	</a>
{/snippet}

<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 pr-4 xs:h-[88px]">
		<!-- Accent bar -->
		<div class="h-full w-[3px] shrink-0 bg-primary"></div>

		<!-- Back button -->
		<BackButton
			class="-ml-0.5 h-11 w-11 shrink-0 justify-center rounded-full hover:bg-muted"
			showLabel={false}
		/>

		<!-- Divider -->
		<div class="mx-2 h-6 w-px shrink-0 bg-line"></div>

		<!-- Title + meta -->
		<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">
			<PersonChipRow sender={doc.sender} receivers={receivers} abbreviated={true} extraCount={0} />
		</div>

		<!-- Overflow pill button (desktop) + status dot -->
		{#if extraCount > 0}
			<OverflowPillButton extraCount={extraCount} persons={overflowPersons} />
		{/if}

		<!-- Details toggle -->
		<button
			type="button"
			onclick={() => (detailsOpen = !detailsOpen)}
			aria-expanded={detailsOpen}
			aria-label={m.doc_details_toggle()}
			class="ml-2 inline-flex min-h-[44px] shrink-0 items-center gap-1.5 rounded border px-3 py-1 font-sans text-sm font-semibold transition-colors {detailsOpen ? 'border-primary bg-primary text-primary-fg' : 'border-line text-ink-2 hover:bg-muted hover:text-ink'}"
		>
			{m.doc_details_toggle()}
			<svg
				class="h-3.5 w-3.5 transition-transform duration-200 {detailsOpen ? 'rotate-180' : ''}"
				viewBox="0 0 24 24"
				fill="none"
				stroke="currentColor"
				stroke-width="2.5"
				aria-hidden="true"
			>
				<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
			</svg>
		</button>

		<!-- 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="flex shrink-0 items-center gap-1.5 font-sans">
			{#if canWrite && isPdf && !transcribeMode}
				{@render transcribeBtn(false)}
			{/if}

			{#if transcribeMode}
				{@render transcribeStopBtn(false)}
			{/if}

			{#if canWrite && !transcribeMode}
				<a
					href="/documents/{doc.id}/edit"
					aria-label={m.btn_edit()}
					class="flex items-center gap-1.5 rounded border border-primary bg-transparent px-3 py-1.5 text-[16px] font-medium text-ink transition hover:bg-primary hover:text-primary-fg focus-visible:ring-2 focus-visible:ring-primary"
				>
					<img
						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Edit-Content-MD.svg"
						alt=""
						aria-hidden="true"
						class="h-5 w-5"
					/>
					<span class="hidden sm:inline">{m.btn_edit()}</span>
				</a>
			{/if}

			{#if doc.filePath && !transcribeMode}
				{@render downloadLink(false)}
			{/if}

			<!-- Kebab menu — mobile only, contains actions hidden below md -->
			{#if (canWrite && isPdf) || doc.filePath}
				<div
					role="group"
					class="relative md:hidden"
					use:clickOutside
					onclickoutside={() => (mobileMenuOpen = false)}
				>
					<button
						type="button"
						onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
						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"
					>
						<img
							src="/degruyter-icons/Simple/Medium-24px/SVG/Action/View-More-MD.svg"
							alt=""
							aria-hidden="true"
							class="h-5 w-5"
						/>
					</button>

					{#if mobileMenuOpen}
						<div
							role="menu"
							class="absolute top-full right-0 z-50 mt-1 min-w-[200px] rounded-md border border-line bg-surface p-2 shadow-lg"
						>
							{#if canWrite && isPdf && !transcribeMode}
								{@render transcribeBtn(true)}
							{/if}

							{#if doc.filePath}
								{@render downloadLink(true)}
							{/if}
						</div>
					{/if}
				</div>
			{/if}
		</div>
	</div>

	<!-- Metadata drawer -->
	{#if detailsOpen}
		<div transition:slide={{ duration: 200 }}>
			<DocumentMetadataDrawer
				documentDate={doc.documentDate ?? null}
				location={doc.location ?? null}
				status={doc.status ?? 'PLACEHOLDER'}
				sender={doc.sender ?? null}
				receivers={doc.receivers ? [...doc.receivers] : []}
				tags={doc.tags ? [...doc.tags] : []}
				inferredRelationship={inferredRelationship}
				geschichten={geschichten}
				documentId={doc.id}
				canBlogWrite={canBlogWrite}
			/>
		</div>
	{/if}
</div>