feat: add runed-backed list search

src/routes/dashboard/invoices/+page.svelte

@@ -1,14 +1,27 @@
 <script lang="ts">
+	import { createListSearch } from '$lib/list-search.svelte';
+	import ListSearch from '$lib/components/list-search.svelte';
 	import InvoicesTable from './invoices-table.svelte';
 	import ArchiveInvoiceDialog from './archive-invoice-dialog.svelte';
 	import { toast } from 'svelte-sonner';
 	import { superForm } from 'sveltekit-superforms';
 	import { zod4Client } from 'sveltekit-superforms/adapters';
 	import { archiveSchema } from '$lib/schemas/shared.schema';
+	import {
+		formatValue,
+		formatMoney,
+		formatDate,
+		recordName as getRecordName,
+		relationLabel as getRelationLabel
+	} from '$lib/record-utils';
+	import { handleFormToast } from '$lib/form-feedback';
 	import type { PageData } from './$types';
 	type RecordRow = PageData['records'][number];
 	let { data }: { data: PageData } = $props();
 
+	const listSearch = createListSearch(() => data.records);
+	const listData = $derived({ ...data, records: listSearch.filtered });
+
 	let archivingId = $state<string | null>(null);
 
 	const archivingRecord = $derived(data.records.find((record) => record.id === archivingId));
@@ -23,53 +36,8 @@
 
 	const { form: archiveData, enhance: enhanceArchive } = archiveForm;
 
-	function handleFormToast(
-		form: { valid: boolean; message?: string; errors: Record<string, unknown> },
-		id: string,
-		onSuccess: () => void
-	) {
-		if (form.valid) {
-			if (form.message) toast.success(form.message, { id });
-			onSuccess();
-			return;
-		}
-
-		toast.error(form.message ?? firstError(form.errors), { id });
-	}
-
-	function firstError(errors: Record<string, unknown>) {
-		for (const value of Object.values(errors)) {
-			if (Array.isArray(value) && typeof value[0] === 'string') return value[0];
-		}
-
-		return 'Check the highlighted fields.';
-	}
-
-	function formatValue(value: unknown) {
-		if (value === null || value === undefined || value === '') return 'Not set';
-		return String(value);
-	}
-
 	function relationLabel(value: unknown, optionsKey: 'clients') {
-		if (typeof value !== 'string') return 'Not set';
-		return data.options[optionsKey].find((option) => option.value === value)?.label ?? value;
-	}
-
-	function formatMoney(value: unknown) {
-		const amount = typeof value === 'number' ? value : Number(value ?? 0);
-		return new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }).format(amount);
-	}
-
-	function formatDate(value: unknown, withTime = false) {
-		if (!value || typeof value !== 'string') return 'Not set';
-		const date = new Date(value);
-		if (Number.isNaN(date.getTime())) return value;
-		return new Intl.DateTimeFormat('en-GB', {
-			day: '2-digit',
-			month: 'short',
-			year: 'numeric',
-			...(withTime ? { hour: '2-digit', minute: '2-digit' } : {})
-		}).format(date);
+		return getRelationLabel(data.options, value, optionsKey);
 	}
 
 	function openArchive(record: RecordRow) {
@@ -78,15 +46,7 @@
 	}
 
 	function recordName(record: Partial<RecordRow> | undefined) {
-		const item = record as Partial<RecordRow> & {
-			name?: unknown;
-			title?: unknown;
-			invoiceNumber?: unknown;
-			label?: unknown;
-		};
-		return String(
-			item?.name ?? item?.title ?? item?.invoiceNumber ?? item?.label ?? 'this invoice'
-		);
+		return getRecordName(record, 'this invoice');
 	}
 </script>
 
@@ -102,8 +62,15 @@
 		</div>
 	</div>
 
+	<ListSearch
+		bind:value={listSearch.params.q}
+		placeholder="Search invoices..."
+		totalCount={data.records.length}
+		resultCount={listSearch.filtered.length}
+	/>
+
 	<InvoicesTable
-		{data}
+		data={listData}
 		{openArchive}
 		{formatValue}
 		{formatDate}