feat: topic page

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

@@ -80,26 +80,32 @@
 	<div class="flex justify-center flex-wrap gap-2 my-1 relative">
 		{#if data.task?.tasksToTopics}
 			{#each data.task?.tasksToTopics as topic}
-				<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}"
-				>
-					{topic.topic.name}
-					<form
-						action="?/removeTopic"
-						method="post"
-						class="absolute -top-1 -right-1 opacity-0 group-hover:opacity-100 transition"
+				<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}"
 					>
-						<input type="hidden" name="topic-id" value={topic.topic.id} />
-						<button
-							type="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"
+						{topic.topic.name}
+						<form
+							action="?/removeTopic"
+							method="post"
+							class="absolute -top-1 -right-1 opacity-0 group-hover:opacity-100 transition"
 						>
-							&times;
-						</button>
-					</form>
-				</div>
+							<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"
+							>
+								&times;
+							</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}