e831de4f85
Split the 580-line home page into three focused co-located components: - SearchFilterBar: full-text search + collapsible advanced filters - DropZone: drag-and-drop / click-to-upload with progress and messages - DocumentList: document list with new-doc link and empty state Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
91 lines
2.8 KiB
Svelte
91 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import { goto } from '$app/navigation';
|
|
import { untrack } from 'svelte';
|
|
import { SvelteURLSearchParams } from 'svelte/reactivity';
|
|
import SearchFilterBar from './SearchFilterBar.svelte';
|
|
import DropZone from './DropZone.svelte';
|
|
import DocumentList from './DocumentList.svelte';
|
|
|
|
let { data } = $props();
|
|
|
|
let q = $state(untrack(() => data.filters?.q || ''));
|
|
let qFocused = $state(false);
|
|
let from = $state(untrack(() => data.filters?.from || ''));
|
|
let to = $state(untrack(() => data.filters?.to || ''));
|
|
let senderId = $state(untrack(() => data.filters?.senderId || ''));
|
|
let receiverId = $state(untrack(() => data.filters?.receiverId || ''));
|
|
let tagNames = $state<string[]>(untrack(() => data.filters?.tags || []));
|
|
|
|
const hasAdvancedFilters = (filters: typeof data.filters) =>
|
|
(filters?.tags?.length ?? 0) > 0 ||
|
|
!!filters?.senderId ||
|
|
!!filters?.receiverId ||
|
|
!!filters?.from ||
|
|
!!filters?.to;
|
|
|
|
let showAdvanced = $state(untrack(() => hasAdvancedFilters(data.filters)));
|
|
|
|
let searchTimer: ReturnType<typeof setTimeout>;
|
|
|
|
function triggerSearch() {
|
|
const params = new SvelteURLSearchParams();
|
|
if (q) params.set('q', q);
|
|
if (from) params.set('from', from);
|
|
if (to) params.set('to', to);
|
|
if (senderId) params.set('senderId', senderId);
|
|
if (receiverId) params.set('receiverId', receiverId);
|
|
if (tagNames) tagNames.forEach((tag) => params.append('tag', tag));
|
|
goto(`/?${params.toString()}`, { keepFocus: true, noScroll: true });
|
|
}
|
|
|
|
function handleTextSearch() {
|
|
clearTimeout(searchTimer);
|
|
searchTimer = setTimeout(() => triggerSearch(), 500);
|
|
}
|
|
|
|
// Trigger search when tags change
|
|
let prevTagStr = untrack(() => tagNames.join(','));
|
|
$effect(() => {
|
|
const cur = tagNames.join(',');
|
|
if (cur !== prevTagStr) {
|
|
prevTagStr = cur;
|
|
triggerSearch();
|
|
}
|
|
});
|
|
|
|
// Sync local state with server data after navigation.
|
|
// Guard q: skip overwrite while the user is actively typing in the search field.
|
|
$effect(() => {
|
|
if (!qFocused) q = data.filters?.q || '';
|
|
from = data.filters?.from || '';
|
|
to = data.filters?.to || '';
|
|
senderId = data.filters?.senderId || '';
|
|
receiverId = data.filters?.receiverId || '';
|
|
tagNames = data.filters?.tags || [];
|
|
if (hasAdvancedFilters(data.filters)) showAdvanced = true;
|
|
});
|
|
</script>
|
|
|
|
<main class="mx-auto max-w-7xl py-8 font-sans sm:px-6 lg:px-8">
|
|
<SearchFilterBar
|
|
bind:q={q}
|
|
bind:from={from}
|
|
bind:to={to}
|
|
bind:senderId={senderId}
|
|
bind:receiverId={receiverId}
|
|
bind:tagNames={tagNames}
|
|
bind:showAdvanced={showAdvanced}
|
|
initialSenderName={data.initialValues?.senderName}
|
|
initialReceiverName={data.initialValues?.receiverName}
|
|
onSearch={handleTextSearch}
|
|
onfocus={() => (qFocused = true)}
|
|
onblur={() => (qFocused = false)}
|
|
/>
|
|
|
|
{#if data.canWrite}
|
|
<DropZone />
|
|
{/if}
|
|
|
|
<DocumentList documents={data.documents ?? []} canWrite={data.canWrite} error={data.error} />
|
|
</main>
|