feat(ui): two render states — hero vs results — with unified padding
Hero state (no senderId): centred CorrespondenzHero with discovery headline, cross-link, large typeahead, recent persons. No person bar or filter controls shown. Results state (senderId set): full-width strips then content area with max-w-7xl responsive padding matching other overview pages. Removes focus delegation hack. Refs: #179 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
@@ -1,30 +1,26 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
import { untrack } from 'svelte';
|
||||
import { SvelteURLSearchParams } from 'svelte/reactivity';
|
||||
import CorrespondenzPersonBar from './CorrespondenzPersonBar.svelte';
|
||||
import CorrespondenzFilterControls from './CorrespondenzFilterControls.svelte';
|
||||
import SinglePersonHintBar from './SinglePersonHintBar.svelte';
|
||||
import ConversationTimeline from './ConversationTimeline.svelte';
|
||||
import CorrespondenzEmptyState from './CorrespondenzEmptyState.svelte';
|
||||
import CorrespondenzHero from './CorrespondenzHero.svelte';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
// Filter values are local $state so swapPersons/toggleSort can mutate them before goto.
|
||||
// They are initialised once from server data and never re-synced — navigation replaces
|
||||
// the page component, so each load gets a fresh init.
|
||||
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));
|
||||
|
||||
// Names are pure reads of server data — no local mutation needed.
|
||||
const senderName = $derived(data.initialValues.senderName);
|
||||
const receiverName = $derived(data.initialValues.receiverName);
|
||||
|
||||
// Side-effect only: persist the resolved sender to localStorage once the name is available.
|
||||
$effect(() => {
|
||||
if (data.filters.senderId && data.initialValues.senderName) {
|
||||
persistRecentPerson(data.filters.senderId, data.initialValues.senderName);
|
||||
@@ -36,11 +32,29 @@ const isSinglePerson = $derived(!!senderId && !receiverId);
|
||||
const RECENT_STORAGE_KEY = 'korrespondenz_recent_persons';
|
||||
const MAX_RECENT = 5;
|
||||
|
||||
interface RecentPerson {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
let recentPersons = $state<RecentPerson[]>([]);
|
||||
|
||||
onMount(() => {
|
||||
try {
|
||||
const raw = localStorage.getItem(RECENT_STORAGE_KEY);
|
||||
if (raw) {
|
||||
recentPersons = JSON.parse(raw) as RecentPerson[];
|
||||
}
|
||||
} catch {
|
||||
recentPersons = [];
|
||||
}
|
||||
});
|
||||
|
||||
function persistRecentPerson(id: string, name: string) {
|
||||
if (!id) return;
|
||||
try {
|
||||
const raw = localStorage.getItem(RECENT_STORAGE_KEY);
|
||||
const existing: { id: string; name: string }[] = raw ? JSON.parse(raw) : [];
|
||||
const existing: RecentPerson[] = raw ? JSON.parse(raw) : [];
|
||||
const filtered = existing.filter((p) => p.id !== id);
|
||||
const updated = [{ id, name }, ...filtered].slice(0, MAX_RECENT);
|
||||
localStorage.setItem(RECENT_STORAGE_KEY, JSON.stringify(updated));
|
||||
@@ -72,69 +86,66 @@ function swapPersons() {
|
||||
}
|
||||
|
||||
function selectPerson(id: string) {
|
||||
if (!id) {
|
||||
document.querySelector<HTMLInputElement>('#senderId-search')?.focus();
|
||||
return;
|
||||
}
|
||||
senderId = id;
|
||||
receiverId = '';
|
||||
applyFilters();
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Strips — pulled up to negate main's py-6 top padding so they sit flush -->
|
||||
<div class="-mt-6">
|
||||
<!-- Strip: Row 1 — full width, no container -->
|
||||
<CorrespondenzPersonBar
|
||||
bind:senderId={senderId}
|
||||
bind:receiverId={receiverId}
|
||||
initialSenderName={data.initialValues.senderName}
|
||||
initialReceiverName={data.initialValues.receiverName}
|
||||
onapplyFilters={applyFilters}
|
||||
onswapPersons={swapPersons}
|
||||
/>
|
||||
|
||||
<!-- Strip: Row 2 — full width -->
|
||||
<CorrespondenzFilterControls
|
||||
senderId={senderId}
|
||||
bind:fromDate={fromDate}
|
||||
bind:toDate={toDate}
|
||||
bind:sortDir={sortDir}
|
||||
documentCount={data.documents.length}
|
||||
onapplyFilters={applyFilters}
|
||||
ontoggleSort={toggleSort}
|
||||
/>
|
||||
|
||||
<!-- Single-person hint bar -->
|
||||
{#if isSinglePerson}
|
||||
<SinglePersonHintBar
|
||||
senderName={senderName}
|
||||
fromDate={fromDate || undefined}
|
||||
toDate={toDate || undefined}
|
||||
sortDir={sortDir}
|
||||
{#if !senderId}
|
||||
<!-- Hero state: centred discovery view -->
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<CorrespondenzHero onSelectPerson={selectPerson} recentPersons={recentPersons} />
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Results state: strips + content -->
|
||||
<div class="-mt-6">
|
||||
<CorrespondenzPersonBar
|
||||
bind:senderId={senderId}
|
||||
bind:receiverId={receiverId}
|
||||
initialSenderName={data.initialValues.senderName}
|
||||
initialReceiverName={data.initialValues.receiverName}
|
||||
onapplyFilters={applyFilters}
|
||||
onswapPersons={swapPersons}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Content area with padding -->
|
||||
<div class="px-[18px] py-[14px]">
|
||||
{#if !senderId}
|
||||
<CorrespondenzEmptyState onSelectPerson={selectPerson} />
|
||||
{:else if data.documents.length === 0}
|
||||
<div
|
||||
class="flex flex-col items-center justify-center rounded-sm border border-line bg-muted py-24 text-center shadow-sm"
|
||||
>
|
||||
<p class="font-serif text-ink">{m.conv_no_results_heading()}</p>
|
||||
<p class="mt-2 text-sm text-ink-3">{m.conv_no_results_text()}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<ConversationTimeline
|
||||
documents={data.documents}
|
||||
<CorrespondenzFilterControls
|
||||
senderId={senderId}
|
||||
receiverId={receiverId}
|
||||
canWrite={data.canWrite}
|
||||
senderName={senderName}
|
||||
receiverName={receiverName}
|
||||
bind:fromDate={fromDate}
|
||||
bind:toDate={toDate}
|
||||
bind:sortDir={sortDir}
|
||||
documentCount={data.documents.length}
|
||||
onapplyFilters={applyFilters}
|
||||
ontoggleSort={toggleSort}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if isSinglePerson}
|
||||
<SinglePersonHintBar
|
||||
senderName={senderName}
|
||||
fromDate={fromDate || undefined}
|
||||
toDate={toDate || undefined}
|
||||
sortDir={sortDir}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
|
||||
{#if data.documents.length === 0}
|
||||
<div
|
||||
class="flex flex-col items-center justify-center rounded-sm border border-line bg-muted py-24 text-center shadow-sm"
|
||||
>
|
||||
<p class="font-serif text-ink">{m.conv_no_results_heading()}</p>
|
||||
<p class="mt-2 text-sm text-ink-3">{m.conv_no_results_text()}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<ConversationTimeline
|
||||
documents={data.documents}
|
||||
senderId={senderId}
|
||||
receiverId={receiverId}
|
||||
canWrite={data.canWrite}
|
||||
senderName={senderName}
|
||||
receiverName={receiverName}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user