feat: add prototype of browse scores

src/lib/components/score/ScoreCard.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { Score } from '$lib/types';
+	import TagBadge from './TagBadge.svelte';
+
+	export let score: Score;
+	export let onClick: (id: string) => void;
+</script>
+
+<div
+	class="card card-hover overflow-hidden cursor-pointer"
+	on:click={() => onClick(score.id)}
+	on:keydown={(e) => e.key === 'Enter' && onClick(score.id)}
+	tabindex="0"
+	role="button"
+>
+	<img src={score.thumbnailUrl} alt={score.title} class="w-full h-48 object-cover" />
+	<div class="p-4">
+		<h3 class="h3 mb-2 truncate">{score.title}</h3>
+		<div class="flex flex-wrap gap-1 mb-2">
+			{#if score.tags && score.tags.length > 0}
+				{#each score.tags as tag}
+					<TagBadge {tag} />
+				{/each}
+			{:else}
+				<span class="text-sm text-gray-500">No tags</span>
+			{/if}
+		</div>
+		<p class="text-sm text-gray-500 mt-2">Last modified: {score.lastModified}</p>
+	</div>
+</div>

src/lib/components/score/ScoreSearch.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import IconMagnify from '~icons/mdi/magnify';
+
+	export let value = '';
+	const dispatch = createEventDispatcher();
+
+	function handleInput(event: Event) {
+		const target = event.target as HTMLInputElement;
+		dispatch('input', target.value);
+	}
+</script>
+
+<div class="relative flex-grow">
+	<input
+		type="text"
+		placeholder="Search scores..."
+		class="input pl-10 pr-4 py-2 w-full h-10"
+		{value}
+		on:input={handleInput}
+	/>
+	<IconMagnify
+		class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-surface-500"
+	/>
+</div>

src/lib/components/score/TagBadge.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { getTagColor, getContrastColor } from '$lib/utils/colorUtils';
+
+	export let tag: string;
+
+	$: bgColor = getTagColor(tag);
+	$: textColor = getContrastColor(bgColor);
+</script>
+
+<span class="badge text-xs" style="background-color: {bgColor}; color: {textColor};">
+	{tag}
+</span>

src/lib/components/score/TagFilter.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import IconFilterOutline from '~icons/mdi/filter-outline';
+	import IconChevronDown from '~icons/mdi/chevron-down';
+
+	export let tags: string[];
+	export let selectedTag = 'All';
+
+	const dispatch = createEventDispatcher();
+
+	function handleChange(event: Event) {
+		const target = event.target as HTMLSelectElement;
+		dispatch('change', target.value);
+	}
+</script>
+
+<div class="relative w-48">
+	<select
+		bind:value={selectedTag}
+		on:change={handleChange}
+		class="select pl-10 pr-8 py-2 w-full h-10 appearance-none"
+	>
+		{#each tags as tag}
+			<option value={tag}>{tag}</option>
+		{/each}
+	</select>
+	<IconFilterOutline
+		class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-surface-500"
+	/>
+	<IconChevronDown
+		class="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-surface-500"
+	/>
+</div>