add basic search bar

packages/web/src/routes/progress/+page.svelte

@@ -1,5 +1,16 @@
 <script lang="ts">
 	let { data } = $props();
+
+	let searchTerm = $state('');
+	let filteredTasks = $derived(
+		data.tasks.filter(
+			(task) =>
+				task.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+				task.tasksToTopics.some((t) =>
+					t.topic.name.toLowerCase().includes(searchTerm.toLowerCase())
+				)
+		)
+	);
 </script>
 
 <div class="flex flex-col items-center p-4">
@@ -16,6 +27,15 @@
 				</a>
 			{/if}
 		</div>
+		<!-- Search Bar -->
+		<div class="w-full max-w-md">
+			<input
+				type="text"
+				bind:value={searchTerm}
+				placeholder="Search tasks or topics..."
+				class="w-full px-4 py-2 rounded bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+			/>
+		</div>
 		Total progress: {data.tasks.reduce((acc, task) => acc + task.currentPoints, 0)} / {data.tasks.reduce(
 			(acc, task) => acc + task.totalPoints,
 			0
@@ -26,9 +46,8 @@
 		).toFixed(3)}%)
 	</div>
 
-	{#if data.tasks.length > 0}
+	{#if filteredTasks.length > 0}
 		<div class="overflow-x-auto w-full">
-			{#if data.tasks.length > 0}
 			<!-- Desktop Table View -->
 			<div class="hidden md:block">
 				<table class="min-w-full">
@@ -40,7 +59,7 @@
 						</tr>
 					</thead>
 					<tbody>
-							{#each data.tasks as task, index}
+						{#each filteredTasks as task, index}
 							<tr class="{index % 2 === 0 ? 'bg-black' : 'bg-gray-950'} hover:bg-gray-800">
 								<td class="px-6 py-2 border-b">
 									<a href={`/progress/${task.id}`} class="text-blue-500 hover:underline">
@@ -81,7 +100,7 @@
 
 			<!-- Mobile Card View -->
 			<div class="md:hidden space-y-4">
-					{#each data.tasks as task}
+				{#each filteredTasks as task}
 					<div class="bg-gray-800 rounded-lg p-2 w-full">
 						<a
 							href={`/progress/${task.id}`}
@@ -118,11 +137,10 @@
 					</div>
 				{/each}
 			</div>
-			{:else}
-				<p class="text-gray-500">No tasks available. Click "Create" to add a new task.</p>
-			{/if}
 		</div>
 	{:else}
-		<p class="text-gray-500">No tasks available. Click "Create" to add a new task.</p>
+		<p class="text-gray-500">
+			No tasks found matching your search. Try a different keyword or clear the search.
+		</p>
 	{/if}
 </div>