feat: save view + apply score color

Author: ImShyMike

frontend/src/lib/components/CardsView.svelte

@@ -6,9 +6,9 @@
 	import Code from '@lucide/svelte/icons/code';
 	import ExternalLink from '@lucide/svelte/icons/external-link';
 	import Star from '@lucide/svelte/icons/star';
-	import { imageUrl, title, truncate } from '$lib/search';
+	import { imageUrl, scoreClass, title, truncate } from '$lib/search';
 	import type { SearchResult } from '$lib/types';
-	import { formatHours, formatApproved, formatFloat } from '$lib/utils';
+	import { formatHours, formatApproved, formatFloat, cn } from '$lib/utils';
 	import { resolve } from '$app/paths';
 
 	let { results }: { results: SearchResult[] } = $props();
@@ -65,7 +65,7 @@
 							·
 						{/if}
 						{#if r.score !== null && r.score <= 1}
-							<span class="text-xs text-muted-foreground" title="Search score"
+							<span class={cn('text-xs', scoreClass(r.score))} title="Search score"
 								>Score {formatFloat(r.score * 100, 1)}%</span
 							>
 						{/if}

frontend/src/routes/+page.svelte

@@ -71,6 +71,18 @@
 		}
 	}
 
+	function changeViewMode(mode: ViewMode) {
+		viewMode = mode;
+		const params = new SvelteURLSearchParams(page.url.search);
+		if (mode === 'search') {
+			params.delete('v');
+		} else {
+			params.set('v', mode);
+		}
+		const href = resolve(`/?${params.toString()}`);
+		goto(href, { replaceState: true, keepFocus: true, noScroll: true });
+	}
+
 	function goToPage(p: number) {
 		if (p < 1 || p > totalPages || loading) return;
 		const q = query.trim();
@@ -89,6 +101,7 @@
 		}
 
 		lastSubmittedQuery = q;
+		showLowScore = false;
 		const href = resolve(q ? `/?q=${encodeURIComponent(q)}` : '/');
 
 		await goto(href, { replaceState: true, keepFocus: true, noScroll: true });
@@ -97,6 +110,11 @@
 	$effect(() => {
 		const q = page.url.searchParams.get('q') ?? '';
 		const p = Math.max(1, Number(page.url.searchParams.get('p') ?? '1'));
+		const v = page.url.searchParams.get('v') as ViewMode | null;
+
+		if (v === 'search' || v === 'cards') {
+			viewMode = v;
+		}
 
 		if (q !== untrack(() => lastSearchedQuery) || p !== untrack(() => currentPage)) {
 			query = q;
@@ -212,14 +230,14 @@
 				<Button
 					variant={viewMode === 'search' ? 'default' : 'ghost'}
 					size="sm"
-					onclick={() => (viewMode = 'search')}
+					onclick={() => changeViewMode('search')}
 				>
 					<Search class="h-4 w-4" />
 				</Button>
 				<Button
 					variant={viewMode === 'cards' ? 'default' : 'ghost'}
 					size="sm"
-					onclick={() => (viewMode = 'cards')}
+					onclick={() => changeViewMode('cards')}
 				>
 					<LayoutGrid class="h-4 w-4" />
 				</Button>
@@ -242,7 +260,7 @@
 		{@const trueHiddenCount = Math.max(0, totalResults - pageOffset - validResults.length)}
 		{@const showHiddenResultsNotice = hiddenCount > 0 && validResults.length > 0}
 		{#if showHiddenResultsNotice && !loading}
-			<p class="mt-4 text-center text-sm text-muted-foreground">
+			<p class="mt-6 text-center text-sm text-muted-foreground">
 				{trueHiddenCount} result{trueHiddenCount !== 1 ? 's' : ''} hidden...
 				<button
 					class="cursor-pointer underline hover:text-foreground"