familienarchiv/frontend/src/lib/components/DocumentBottomPanel.svelte

<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import PanelMetadata from './PanelMetadata.svelte';
import PanelTranscription from './PanelTranscription.svelte';
import PanelDiscussion from './PanelDiscussion.svelte';
import PanelHistory from './PanelHistory.svelte';
import type { Comment, DocumentPanelTab } from '$lib/types';

type Doc = {
	id: string;
	title?: string | null;
	documentDate?: string | null;
	location?: string | null;
	documentLocation?: string | null;
	tags?: { id: string; name: string }[] | null;
	sender?: { id: string; firstName: string; lastName: string; alias?: string | null } | null;
	receivers?: { id: string; firstName: string; lastName: string }[] | null;
	summary?: string | null;
	transcription?: string | null;
};

type Props = {
	doc: Doc;
	comments: Comment[];
	canComment: boolean;
	currentUserId: string | null;
	canAdmin: boolean;
	open: boolean;
	height: number;
	activeTab: DocumentPanelTab;
};

let {
	doc,
	comments,
	canComment,
	currentUserId,
	canAdmin,
	open = $bindable(),
	height = $bindable(),
	activeTab = $bindable()
}: Props = $props();

const MIN_HEIGHT = 52; // drag handle (8px) + tab bar (~44px)

let isDragging = $state(false);
let dragStartY = 0;
let dragStartHeight = 0;

function fullHeight() {
	const topbar = document.querySelector('[data-topbar]');
	return window.innerHeight - (topbar?.getBoundingClientRect().bottom ?? 0);
}

function openTab(tab: DocumentPanelTab) {
	activeTab = tab;
	if (!open) {
		open = true;
		if (height <= MIN_HEIGHT) height = fullHeight();
	}
}

function closePanel() {
	open = false;
}

function onDragStart(e: PointerEvent) {
	isDragging = true;
	dragStartY = e.clientY;
	dragStartHeight = open ? height : MIN_HEIGHT;
	(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
}

function onDragMove(e: PointerEvent) {
	if (!isDragging) return;
	const delta = dragStartY - e.clientY; // positive = dragging up = bigger panel
	const newHeight = dragStartHeight + delta;
	const maxHeight = fullHeight();

	if (newHeight <= MIN_HEIGHT + 20) {
		// collapsed past threshold → close
		open = false;
	} else {
		open = true;
		height = Math.max(80, Math.min(newHeight, maxHeight));
	}
}

function onDragEnd() {
	isDragging = false;
}

const tabs: { id: DocumentPanelTab; label: () => string }[] = [
	{ id: 'metadata', label: m.doc_panel_tab_metadata },
	{ id: 'transcription', label: m.doc_panel_tab_transcription },
	{ id: 'discussion', label: m.doc_panel_tab_discussion },
	{ id: 'history', label: m.doc_panel_tab_history }
];

const panelHeight = $derived(open ? height : MIN_HEIGHT);
</script>

<div
	class="fixed right-0 bottom-0 left-0 z-30 flex flex-col border-t border-line bg-surface shadow-[0_-4px_16px_rgba(0,0,0,0.08)]"
	style="height: {panelHeight}px"
	data-testid="bottom-panel"
>
	<!-- Drag handle -->
	<div
		class="flex h-2 shrink-0 cursor-ns-resize items-center justify-center bg-surface"
		style="touch-action: none"
		role="separator"
		aria-orientation="horizontal"
		aria-label="Panel resize"
		onpointerdown={onDragStart}
		onpointermove={onDragMove}
		onpointerup={onDragEnd}
		onpointercancel={onDragEnd}
	>
		<div class="h-1 w-12 rounded-full bg-line"></div>
	</div>

	<!-- Tab bar -->
	<div class="flex shrink-0 items-center border-b border-line bg-surface px-4">
		{#each tabs as tab (tab.id)}
			<button
				onclick={() => openTab(tab.id)}
				class="mr-1 px-3 py-2.5 font-sans text-xs font-medium transition-colors {activeTab === tab.id && open
					? 'border-b-2 border-primary text-ink'
					: 'text-ink-3 hover:text-ink'}"
				aria-pressed={activeTab === tab.id && open}
			>
				{tab.label()}
			</button>
		{/each}

		<!-- spacer -->
		<div class="flex-1"></div>

		{#if open}
			<button
				onclick={closePanel}
				data-testid="panel-close-btn"
				aria-label="Panel schließen"
				class="rounded p-1.5 text-ink-3 transition-colors hover:bg-muted hover:text-ink"
			>
				<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
				</svg>
			</button>
		{/if}
	</div>

	<!-- Tab content -->
	{#if open}
		<div class="flex-1 overflow-y-auto" data-testid="bottom-panel-content">
			{#if activeTab === 'metadata'}
				<PanelMetadata doc={doc} />
			{:else if activeTab === 'transcription'}
				<PanelTranscription doc={doc} />
			{:else if activeTab === 'discussion'}
				<PanelDiscussion
					documentId={doc.id}
					initialComments={comments}
					canComment={canComment}
					currentUserId={currentUserId}
					canAdmin={canAdmin}
				/>
			{:else if activeTab === 'history'}
				<PanelHistory documentId={doc.id} />
			{/if}
		</div>
	{/if}
</div>