feat: topic page

packages/web/src/routes/progress/[id]/+page.svelte

@@ -80,6 +80,7 @@
 	<div class="flex justify-center flex-wrap gap-2 my-1 relative">
 		{#if data.task?.tasksToTopics}
 			{#each data.task?.tasksToTopics as topic}
+				<a href="/progress/topics/{topic.topic.id}">
 					<div
 						class="relative bg-blue-500 text-white rounded-full px-2 py-1 shadow font-medium hover:bg-blue-600 transition cursor-pointer group"
 						title="Click for more details about {topic.topic.name}"
@@ -93,6 +94,10 @@
 							<input type="hidden" name="topic-id" value={topic.topic.id} />
 							<button
 								type="submit"
+								onclick={(e) => {
+									e.preventDefault();
+									e.target.closest('form')?.submit();
+								}}
 								class="bg-white text-red-500 hover:text-red-700 hover:bg-red-50 font-bold rounded-full w-5 h-5 flex items-center justify-center shadow-sm"
 								aria-label="Remove topic"
 							>
@@ -100,6 +105,7 @@
 							</button>
 						</form>
 					</div>
+				</a>
 			{/each}
 		{/if}
 	</div>

packages/web/src/routes/progress/topics/[id]/+page.server.ts

@@ -0,0 +1,18 @@
+import { db } from '$lib/db';
+import { topics } from '$lib/db/schema';
+import { eq } from 'drizzle-orm';
+
+export const load = async ({ params }) => {
+	return {
+		topic: await db.query.topics.findFirst({
+			with: {
+				topicsToTasks: {
+					with: {
+						task: true
+					}
+				}
+			},
+			where: eq(topics.id, params.id)
+		})
+	};
+};

packages/web/src/routes/progress/topics/[id]/+page.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	let { data } = $props();
+</script>
+
+<h1 class="my-4 text-2xl font-bold text-center">{data.topic.name}</h1>
+
+<h2 class="text-xl font-bold">Tasks ({data.topic?.topicsToTasks.length})</h2>
+{#each data.topic?.topicsToTasks as task}
+	<div class="flex gap-4 items-center relative">
+		<a href="/progress/{task.task.id}" class="text-lg font-semibold hover:underline"
+			>{task.task.name}</a
+		>
+	</div>
+{/each}