familienarchiv/frontend/src/routes/conversations/+page.svelte

<script lang="ts">
import { goto } from '$app/navigation';
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
import { untrack } from 'svelte';
import { SvelteURLSearchParams } from 'svelte/reactivity';
import { m } from '$lib/paraglide/messages.js';
import { formatDate } from '$lib/utils/date';

let { data } = $props();

let senderId = $state(untrack(() => data.filters.senderId));
let receiverId = $state(untrack(() => data.filters.receiverId));
let fromDate = $state(untrack(() => data.filters.from));
let toDate = $state(untrack(() => data.filters.to));
let sortDir = $state(untrack(() => data.filters.dir));

const documentYears = $derived(
	data.documents
		.map((doc) => (doc.documentDate ? new Date(doc.documentDate).getFullYear() : null))
		.filter((y): y is number => y !== null)
);
const yearFrom = $derived(documentYears.length > 0 ? Math.min(...documentYears) : null);
const yearTo = $derived(documentYears.length > 0 ? Math.max(...documentYears) : null);

// Sync with server data after navigation
$effect(() => {
	senderId = data.filters.senderId;
	receiverId = data.filters.receiverId;
	fromDate = data.filters.from;
	toDate = data.filters.to;
	sortDir = data.filters.dir;
});

function applyFilters() {
	const params = new SvelteURLSearchParams();
	if (senderId) params.set('senderId', senderId);
	if (receiverId) params.set('receiverId', receiverId);
	if (fromDate) params.set('from', fromDate);
	if (toDate) params.set('to', toDate);
	params.set('dir', sortDir);
	goto(`/conversations?${params.toString()}`, { keepFocus: true });
}

function toggleSort() {
	sortDir = sortDir === 'DESC' ? 'ASC' : 'DESC';
	applyFilters();
}

function swapPersons() {
	const tmp = senderId;
	senderId = receiverId;
	receiverId = tmp;
	applyFilters();
}

const enrichedDocuments = $derived(
	data.documents.map((doc, i) => {
		const year = doc.documentDate ? new Date(doc.documentDate).getFullYear() : null;
		const prevYear =
			i > 0 && data.documents[i - 1].documentDate
				? new Date(data.documents[i - 1].documentDate!).getFullYear()
				: null;
		return { doc, year, showYearDivider: year !== null && year !== prevYear };
	})
);
</script>

<div class="mx-auto max-w-5xl px-4 py-10">
	<!-- Page Header -->
	<div class="mb-8 border-b border-brand-navy/10 pb-4">
		<h1 class="font-serif text-3xl font-medium text-brand-navy">{m.conv_heading()}</h1>
		<p class="mt-2 font-sans text-sm text-brand-navy/60">
			{m.conv_subtitle()}
		</p>
	</div>

	<!-- FILTER BAR -->
	<div class="relative z-20 mb-10 border border-brand-sand bg-white p-8 shadow-sm">
		<div class="mb-6 grid grid-cols-1 gap-8 md:grid-cols-2">
			<!-- Sender -->
			<div
				class="relative z-30 [&_input]:border-gray-300 [&_input]:py-2.5 [&_input]:focus:border-brand-navy [&_input]:focus:ring-brand-navy [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:uppercase"
			>
				<PersonTypeahead
					name="senderId"
					label={m.conv_label_person_a()}
					bind:value={senderId}
					initialName={data.initialValues.senderName}
					restrictToCorrespondentsOf={receiverId || undefined}
					onchange={() => applyFilters()}
				/>
			</div>

			<!-- Receiver -->
			<div
				class="relative z-30 [&_input]:border-gray-300 [&_input]:py-2.5 [&_input]:focus:border-brand-navy [&_input]:focus:ring-brand-navy [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:uppercase"
			>
				<PersonTypeahead
					name="receiverId"
					label={m.conv_label_person_b()}
					bind:value={receiverId}
					initialName={data.initialValues.receiverName}
					restrictToCorrespondentsOf={senderId || undefined}
					onchange={() => applyFilters()}
				/>
			</div>
		</div>

		{#if senderId && receiverId}
			<div class="mb-4 flex justify-center">
				<button
					data-testid="conv-swap-btn"
					onclick={swapPersons}
					class="flex items-center gap-2 rounded-sm border border-brand-sand px-4 py-2 text-xs font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
					title={m.conv_swap_btn()}
				>
					<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4"
						></path>
					</svg>
					{m.conv_swap_btn()}
				</button>
			</div>
		{/if}

		<div class="relative z-10 grid grid-cols-1 items-end gap-6 md:grid-cols-3">
			<!-- Date From -->
			<div>
				<label
					for="dateFrom"
					class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
					>{m.conv_label_from()}</label
				>
				<input
					id="dateFrom"
					type="date"
					bind:value={fromDate}
					onchange={() => applyFilters()}
					class="block w-full border-gray-300 py-2.5 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
				/>
			</div>

			<!-- Date To -->
			<div>
				<label
					for="dateTo"
					class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
					>{m.conv_label_to()}</label
				>
				<input
					id="dateTo"
					type="date"
					bind:value={toDate}
					onchange={() => applyFilters()}
					class="block w-full border-gray-300 py-2.5 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
				/>
			</div>

			<!-- Sort Toggle -->
			<div>
				<button
					onclick={toggleSort}
					class="flex h-[42px] w-full items-center justify-center border border-brand-sand text-xs font-bold tracking-wide text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
				>
					<span class="mr-2">{m.conv_sort_label()}</span>
					<span>{sortDir === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}</span>
					<svg
						class="ml-2 h-4 w-4 transform {sortDir === 'ASC'
							? 'rotate-180'
							: ''} transition-transform"
						fill="none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"
						></path>
					</svg>
				</button>
			</div>
		</div>
	</div>

	<!-- RESULTS LIST SECTION -->
	{#if !senderId || !receiverId}
		<div
			class="flex flex-col items-center justify-center rounded-sm border border-dashed border-brand-sand bg-white py-24 text-center"
		>
			<div class="mb-4 rounded-full bg-brand-sand/30 p-4 text-brand-navy">
				<svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"
					><path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
					/></svg
				>
			</div>
			<p class="font-serif text-lg text-brand-navy">{m.conv_empty_heading()}</p>
			<p class="mt-1 font-sans text-sm text-gray-500">{m.conv_empty_text()}</p>
		</div>
	{:else if data.documents.length === 0}
		<div
			class="flex flex-col items-center justify-center rounded-sm border border-brand-sand bg-white py-24 text-center shadow-sm"
		>
			<p class="font-serif text-brand-navy">{m.conv_no_results_heading()}</p>
			<p class="mt-2 text-sm text-gray-400">{m.conv_no_results_text()}</p>
		</div>
	{:else}
		<!-- Summary bar -->
		<div class="mb-4 flex items-center justify-between">
			{#if yearFrom !== null && yearTo !== null}
				<p data-testid="conv-summary" class="font-sans text-sm font-medium text-brand-navy/70">
					{m.conv_summary({ count: data.documents.length, yearFrom, yearTo })}
				</p>
			{:else}
				<p data-testid="conv-summary" class="font-sans text-sm font-medium text-brand-navy/70">
					{data.documents.length}
				</p>
			{/if}
			<a
				data-testid="conv-new-doc-link"
				href="/documents/new?senderId={senderId}&receiverId={receiverId}"
				class="inline-flex items-center gap-1 text-sm font-medium text-brand-navy/60 transition-colors hover:text-brand-navy"
			>
				<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"
					></path>
				</svg>
				{m.conv_new_doc_link()}
			</a>
		</div>

		<!-- CHAT CONTAINER -->
		<div class="relative overflow-hidden rounded-sm border border-brand-sand bg-white shadow-sm">
			<!-- Decoration: Central Timeline Line -->
			<div
				class="absolute top-0 bottom-0 left-1/2 hidden w-px -translate-x-1/2 transform bg-brand-sand/30 md:block"
			></div>

			<div class="p-6 md:p-8">
				<div class="relative z-10 flex flex-col gap-4">
					{#each enrichedDocuments as { doc, year, showYearDivider } (doc.id)}
						{#if showYearDivider}
							<div data-testid="year-divider" class="relative flex items-center py-2 text-center">
								<div class="flex-grow border-t border-brand-sand"></div>
								<span
									class="mx-4 font-sans text-xs font-bold tracking-widest text-brand-navy/40 uppercase"
									>{year}</span
								>
								<div class="flex-grow border-t border-brand-sand"></div>
							</div>
						{/if}
						{@const isRight = doc.sender?.id === senderId}

						<!-- Message Row -->
						<div class="flex w-full {isRight ? 'justify-end' : 'justify-start'}">
							<!-- Bubble Group -->
							<div
								class="flex max-w-[90%] gap-3 md:max-w-[70%] {isRight
									? 'flex-row-reverse'
									: 'flex-row'}"
							>
								<!-- AVATAR -->
								<div class="mt-auto mb-1 hidden flex-shrink-0 sm:block">
									<div
										class="flex h-8 w-8 items-center justify-center rounded-full border font-serif text-xs shadow-sm
                                    {isRight
											? 'border-brand-navy bg-brand-navy text-white'
											: 'border-brand-sand bg-white text-brand-navy'}"
									>
										{#if doc.sender}
											{doc.sender.firstName[0]}{doc.sender.lastName[0]}
										{:else}
											?
										{/if}
									</div>
								</div>

								<!-- BUBBLE CARD -->
								<a
									href="/documents/{doc.id}"
									class="group block transform rounded border p-4 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md
                               {isRight
										? 'rounded-br-none border-brand-navy bg-brand-navy text-white'
										: 'rounded-bl-none border-brand-sand bg-brand-sand/10 text-brand-navy'}"
								>
									<!-- Header -->
									<div class="mb-2 flex items-start justify-between gap-4">
										<h3
											class="font-serif text-sm leading-snug font-medium {isRight
												? 'text-white'
												: 'text-brand-navy'}"
										>
											{doc.title || doc.originalFilename}
										</h3>

										<!-- Status Dot -->
										<span
											class="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full
                                        {doc.status === 'UPLOADED'
												? 'bg-brand-mint'
												: 'bg-yellow-400'}"
											title={doc.status}
										>
										</span>
									</div>

									<!-- Metadata -->
									<div
										class="flex flex-wrap gap-3 font-sans text-[10px] tracking-wider uppercase opacity-80 {isRight
											? 'text-blue-100'
											: 'text-gray-500'}"
									>
										<span class="flex items-center">
											{doc.documentDate ? formatDate(doc.documentDate) : '—'}
										</span>
										{#if doc.location}
											<span class="flex items-center">
												• {doc.location}
											</span>
										{/if}
									</div>
								</a>
							</div>
						</div>
					{/each}
				</div>
			</div>
		</div>
	{/if}
</div>