add test search page

src-tauri/src/search/deltas.rs

@@ -163,6 +163,7 @@ fn build_schema() -> schema::Schema {
 const WRITE_BUFFER_SIZE: usize = 10_000_000; // 10MB
 
 #[derive(Debug, Serialize)]
+#[serde(rename_all = "camelCase")]
 pub struct SearchResult {
     pub project_id: String,
     pub session_id: String,

src/lib/index.ts

@@ -5,3 +5,4 @@ export * as toasts from './toasts';
 export * as sessions from './sessions';
 export * as week from './week';
 export * as uisessions from './uisessions';
+export * from './search';

src/lib/search.ts

@@ -1,12 +1,12 @@
 import { invoke } from '@tauri-apps/api';
 
 export type SearchResult = {
-    project_id: string;
-    session_id: string;
-    file_id: string;
-    // index of the delta in the session.
-    index: number;
+	projectId: string;
+	sessionId: string;
+	filePath: string;
+	// index of the delta in the session.
+	index: number;
 };
 
-export const search = (params: { project_id: string; query: string }) =>
-    invoke<SearchResult>('search', params);
+export const search = (params: { projectId: string; query: string }) =>
+	invoke<SearchResult[]>('search', params);

src/routes/projects/[projectId]/+page.svelte

@@ -13,5 +13,8 @@
 		<a href="/projects/{$project?.id}/timeline" class="hover:text-zinc-200 text-orange-400"
 			>Timeline</a
 		>
+		<a href="/projects/{$project?.id}/search" class="hover:text-zinc-200 text-orange-400"
+			>search (test)</a
+		>
 	</div>
 </div>

src/routes/projects/[projectId]/search/+page.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import { search, type SearchResult } from '$lib';
+	import { writable } from 'svelte/store';
+
+	export let data: PageData;
+	const { project } = data;
+
+	let query: string;
+
+	const results = writable<SearchResult[]>([]);
+
+	const debounce = <T extends (...args: any[]) => any>(fn: T, delay: number) => {
+		let timeout: ReturnType<typeof setTimeout>;
+		return (...args: any[]) => {
+			clearTimeout(timeout);
+			timeout = setTimeout(() => fn(...args), delay);
+		};
+	};
+
+	const fetchResults = debounce(async () => {
+		if (!$project) return;
+		if (!query) return results.set([]);
+		search({ projectId: $project.id, query }).then(results.set);
+	}, 100);
+</script>
+
+<figure class="flex flex-col gap-2">
+	<figcaption>
+		<input on:input={fetchResults} type="text" name="query" bind:value={query} />
+	</figcaption>
+
+	<ul class="flex flex-col gap-q">
+		{#each $results as result}
+			<li>{JSON.stringify(result)}</li>
+		{/each}
+	</ul>
+</figure>