feat: implement search result card design

src/lib/components/custom/SearchResult.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card';
 
+	import RiLockFill from '~icons/ri/lock-fill';
+	import RiLockUnlockFill from '~icons/ri/lock-unlock-fill';
+	import RiArrowDropRightLine from '~icons/ri/arrow-drop-right-line';
+
 	let {
 		result
 	}: {
@@ -14,20 +18,35 @@
 
 	import { localStorageOptions } from '@/localStorageOptions.svelte';
 	let options = localStorageOptions();
+
+	let urlSegments = $derived(result.url.replace(/.*:\/\//, '').split('/'));
+
+	// Favicons are fetched from DDG to preserve privacy.
+	// Making our own Favicon API would be possible too if we want that in the future.
+	let faviconUrl = $derived(`https://icons.duckduckgo.com/ip2/${new URL(result.url).hostname}.ico`);
 </script>
 
 <a href={result.url} class="group max-w-full" target={options.openInNewTab ? '_blank' : '_self'}>
 	<Card.Root class="flex w-full flex-col gap-2 p-4">
-		<div class="leading-snug group-hover:underline">
-			{#each result.url
-				.split('/')
-				// add slashes, but not at the end
-				.map((s, i, a) => (i < a.length - 1 ? s + '/' : s)) as urlSegment}
-				{urlSegment}<wbr />
+		<div
+			class="text-unemphasized-1 flex flex-row items-center font-medium leading-snug group-hover:underline"
+		>
+			<div class="mr-3 rounded-xl bg-secondary p-2">
+				<img src={faviconUrl} alt="" class="h-4 w-4" />
+			</div>
+			{#if result.url.startsWith('https')}
+				<RiLockFill class="mr-2 h-4" />
+			{:else if result.url.startsWith('http')}
+				<RiLockUnlockFill class="mr-2 h-4" />
+			{/if}
+			{#each urlSegments as urlSegment, index}
+				<span>{urlSegment}</span>
+				{#if index < urlSegments.length - 1}
+					<RiArrowDropRightLine class="relative top-0.5" />
+				{/if}
 			{/each}
-			<span class="italic">—found via {result.source}</span>
 		</div>
-		<Card.Title class="font-medium leading-normal">
+		<Card.Title class="text-accent-text font-medium leading-normal">
 			{#each result.title as titleSegment}
 				{#if titleSegment.is_bold}
 					<strong>{titleSegment.value}</strong>
@@ -36,7 +55,7 @@
 				{/if}
 			{/each}
 		</Card.Title>
-		<Card.Description>
+		<Card.Description class="text-unemphasized-2">
 			{#each result.extract as extractSegment}
 				{#if extractSegment.is_bold}
 					<strong>{extractSegment.value}</strong>

tailwind.config.ts

@@ -47,7 +47,12 @@ const config: Config = {
 				card: {
 					DEFAULT: 'hsl(var(--card) / <alpha-value>)',
 					foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
-				}
+				},
+				unemphasized: {
+					'1': 'hsl(220 8 50 / <alpha-value>)',
+					'2': 'hsl(220 8 35 / <alpha-value>)'
+				},
+				'accent-text': 'hsl(220 77 59 / <alpha-value>)'
 			},
 			borderRadius: {
 				lg: 'var(--radius)',