chore: flatten repo

2026-08-26 03:57:15 +00:00
parent b02a07d3bd
commit cb5fc9d095
85 changed files with 22 additions and 23 deletions
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -0,0 +1,5 @@
+export const load = async ({ cookies }) => {
+	return {
+		editable: cookies.get('token')
+	};
+};
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { ModeWatcher } from 'mode-watcher';
+	import '../app.css';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+	const { children, data }: Props = $props();
+
+	let editModalVisible = $state(false);
+</script>
+
+<div
+	class="min-h-screen bg-black text-white bg-center bg-[url('/moon.jpg')] bg-auto bg-no-repeat flex flex-col"
+>
+	<nav class="flex justify-between bg-gray-800 items-center px-4 py-2">
+		<div class="m-2">
+			<a href="/" class="font-bold text-xl sm:text-2xl">Stan Runge</a>
+		</div>
+		<div class="m-2 flex gap-4 items-center">
+			<a href="/progress" class="hover:underline">Progress</a>
+			<span>|</span>
+			<div class="flex gap-2 items-center">
+				<a href="mailto:stan@stanrunge.dev" class="hover:text-gray-300" aria-label="Mail">
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+						<path
+							fill="currentColor"
+							d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8-7L4 8v10h16V8zm0-2l8-5H4zM4 8V6v12z"
+						/>
+					</svg>
+				</a>
+				<a href="https://github.com/stanrunge" class="hover:text-gray-300" aria-label="GitHub">
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+						<path
+							fill="currentColor"
+							d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34
+                               c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83
+                               c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64
+                               c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02
+                               c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21
+                               c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
+						/>
+					</svg>
+				</a>
+				<a href="https://x.com/stanrunge" class="hover:text-gray-300" aria-label="X">
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+						<path
+							fill="currentColor"
+							d="m17.687 3.063l-4.996 5.711l-4.32-5.711H2.112l7.477 9.776l-7.086 8.099h3.034l5.469-6.25l4.78 6.25h6.102
+                               l-7.794-10.304l6.625-7.571zm-1.064 16.06L5.654 4.782h1.803l10.846 14.34z"
+						/>
+					</svg>
+				</a>
+				<a
+					href="https://linkedin.com/in/stanrunge"
+					class="hover:text-gray-300"
+					aria-label="LinkedIn"
+				>
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+						<path
+							fill="currentColor"
+							d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3
+                               a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1
+                               1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69
+                               1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z"
+						/>
+					</svg>
+				</a>
+			</div>
+		</div>
+	</nav>
+
+	<!-- page content goes here -->
+	<main class="mx-auto py-8 px-4 max-w-5xl flex-grow">
+		<ModeWatcher />
+		{@render children?.()}
+	</main>
+
+	{#if !data.editable}
+		<div class="flex justify-end">
+			<button
+				class="p-3 rounded border border-white m-4"
+				onclick={() => (editModalVisible = !editModalVisible)}>Edit</button
+			>
+		</div>
+	{/if}
+</div>
+
+{#if editModalVisible}
+	<div
+		class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
+		onclick={() => (editModalVisible = false)}
+	>
+		<form
+			class="bg-white rounded-lg shadow-lg p-6 max-w-md w-full flex flex-col items-center"
+			onclick={(e) => e.stopPropagation()}
+			action="/?/authenticate"
+			method="post"
+		>
+			<h2 class="text-lg font-semibold m-4 text-black">WHO ARE YOU?!?!?!??!</h2>
+			<input type="text" class="border border-black text-center rounded my-4" name="token" />
+			<button class="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-700">
+				Authenticate
+			</button>
+		</form>
+	</div>
+{/if}
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -0,0 +1,31 @@
+import { env } from '$env/dynamic/private';
+
+export const actions = {
+	authenticate: async ({ request, cookies }) => {
+		const data = await request.formData();
+
+		const token = data.get('token');
+		if (!token) {
+			return {
+				status: 400,
+				body: { error: 'Missing token' }
+			};
+		}
+
+		if (token !== env.AUTH_TOKEN) {
+			return {
+				status: 401,
+				body: { error: 'Invalid token' }
+			};
+		}
+
+		cookies.set('token', token, {
+			path: '/',
+			maxAge: 60 * 60 * 24 * 7
+		});
+
+		return {
+			success: true
+		};
+	}
+};
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -0,0 +1,10 @@
+<h1 class="my-8 text-4xl font-bold text-center">Stan Runge</h1>
+<img src="/moon.jpg" alt="Moon" />
+
+<div class="flex flex-col">
+	<div>Vash Software</div>
+
+	<div>Hogeschool Inholland</div>
+
+	<div>Junior</div>
+</div>
--- a/src/routes/progress/+page.server.ts
+++ b/src/routes/progress/+page.server.ts
@@ -0,0 +1,18 @@
+import { db } from '$lib/db';
+import { tasks } from '$lib/db/schema.js';
+import { desc } from 'drizzle-orm';
+
+export const load = async () => {
+	return {
+		tasks: await db.query.tasks.findMany({
+			with: {
+				tasksToTopics: {
+					with: {
+						topic: true
+					}
+				}
+			},
+			orderBy: [desc(tasks.currentPoints)]
+		})
+	};
+};
--- a/src/routes/progress/+page.svelte
+++ b/src/routes/progress/+page.svelte
@@ -0,0 +1,153 @@
+<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">
+	<div class="w-full max-w-4xl flex flex-col gap-4 items-center mt-4 mb-8">
+		<div class="flex justify-center gap-8">
+			<h1 class="font-bold text-2xl">
+				Tasks ({data.tasks.length})
+			</h1>
+
+			<a href="/progress/topics">
+				<button class="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-600 transition">
+					Topics
+				</button>
+			</a>
+
+			{#if data.editable}
+				<a href="/progress/create">
+					<button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition">
+						Create
+					</button>
+				</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
+		)} ({(
+			(data.tasks.reduce((acc, task) => acc + task.currentPoints, 0) /
+				data.tasks.reduce((acc, task) => acc + task.totalPoints, 0)) *
+			100
+		).toFixed(3)}%)
+	</div>
+
+	{#if filteredTasks.length > 0}
+		<div class="overflow-x-auto w-full">
+			<!-- Desktop Table View -->
+			<div class="hidden md:block">
+				<table class="min-w-full">
+					<thead>
+						<tr class="border-b border-white">
+							<th class="px-6 py-3 text-left text-sm font-semibold">Name</th>
+							<th class="px-6 py-3 text-left text-sm font-semibold">Topics</th>
+							<th class="px-6 py-3 text-left text-sm font-semibold min-w-[200px]">Progress</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#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">
+										{data.tasks.indexOf(task) + 1}. {task.name}
+									</a>
+								</td>
+								<td class="px-6 py-2 border-b">
+									<a href={`/progress/${task.id}`} class="flex gap-2 flex-wrap">
+										{#each 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"
+												title="Click for more details about {topic.topic.name}"
+											>
+												{topic.topic.name}
+											</div>
+										{/each}
+									</a>
+								</td>
+								<td class="px-6 py-2 border-b min-w-[200px]">
+									<div class="relative w-full h-6 bg-gray-700 rounded-full overflow-hidden">
+										<div
+											class="absolute h-full bg-green-500"
+											style="width: {(task.currentPoints / task.totalPoints) * 100}%"
+										></div>
+										<span class="absolute inset-0 flex items-center justify-center text-sm">
+											{task.currentPoints} / {task.totalPoints} ({(
+												(task.currentPoints / task.totalPoints) *
+												100
+											).toFixed(1)}%)
+										</span>
+									</div>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+
+			<!-- Mobile Card View -->
+			<div class="md:hidden space-y-4">
+				{#each filteredTasks as task}
+					<div class="bg-gray-800 rounded-lg p-2 w-full">
+						<a
+							href={`/progress/${task.id}`}
+							class="text-blue-500 hover:underline text-lg font-bold"
+						>
+							{task.name}
+						</a>
+						<div class="mt-1">
+							<div class="mb-1"></div>
+							<span class="font-medium">Topics:</span>
+							<div class="flex flex-wrap gap-1 mt-1">
+								{#each task.tasksToTopics as topic}
+									<div
+										class="bg-blue-500 text-white rounded-full px-2 py-1 shadow font-medium hover:bg-blue-600 transition cursor-pointer"
+										title="Click for more details about {topic.topic.name}"
+									>
+										{topic.topic.name}
+									</div>
+								{/each}
+							</div>
+						</div>
+						<div class="w-full h-4 bg-gray-700 rounded-full relative overflow-hidden">
+							<div
+								class="absolute h-full bg-green-500"
+								style="width: {(task.currentPoints / task.totalPoints) * 100}%"
+							></div>
+							<span class="absolute inset-0 flex items-center justify-center text-xs">
+								{task.currentPoints} / {task.totalPoints} ({(
+									(task.currentPoints / task.totalPoints) *
+									100
+								).toFixed(1)}%)
+							</span>
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{:else}
+		<p class="text-gray-500">
+			No tasks found matching your search. Try a different keyword or clear the search.
+		</p>
+	{/if}
+</div>
--- a/src/routes/progress/[id]/+page.server.ts
+++ b/src/routes/progress/[id]/+page.server.ts
@@ -0,0 +1,128 @@
+import { db } from '$lib/db';
+import { tasks, tasksToTopics, topics } from '$lib/db/schema';
+import { eq, and } from 'drizzle-orm';
+
+export const load = async ({ cookies, params }) => {
+	return {
+		task: await db.query.tasks.findFirst({
+			with: {
+				tasksToTopics: {
+					with: {
+						topic: true
+					}
+				}
+			},
+			where: eq(tasks.id, params.id)
+		}),
+		topics: await db.query.topics.findMany(),
+		editable: cookies.get('token')
+	};
+};
+
+export const actions = {
+	createTopic: async ({ cookies, request, params }) => {
+		if (!cookies.get('token')) {
+			return { status: 401 };
+		}
+
+		const data = await request.formData();
+
+		const topic = await db
+			.insert(topics)
+			.values({ name: data.get('name') })
+			.returning();
+
+		const existing = await db.query.tasksToTopics.findFirst({
+			where: and(
+				eq(tasksToTopics.taskId, Number(params.id)),
+				eq(tasksToTopics.topicId, topic[0].id)
+			)
+		});
+
+		if (!existing) {
+			await db
+				.insert(tasksToTopics)
+				.values({ taskId: Number(params.id), topicId: topic[0].id })
+				.returning();
+		}
+	},
+	addTopic: async ({ cookies, request, params }) => {
+		if (!cookies.get('token')) {
+			return { status: 401 };
+		}
+
+		const data = await request.formData();
+
+		const topicId = Number(data.get('topic-id'));
+
+		const existing = await db.query.tasksToTopics.findFirst({
+			where: and(eq(tasksToTopics.taskId, Number(params.id)), eq(tasksToTopics.topicId, topicId))
+		});
+
+		console.log(existing);
+
+		if (!existing) {
+			await db
+				.insert(tasksToTopics)
+				.values({ taskId: Number(params.id), topicId })
+				.returning();
+		}
+	},
+	removeTopic: async ({ cookies, request, params }) => {
+		if (!cookies.get('token')) {
+			return { status: 401 };
+		}
+
+		const data = await request.formData();
+
+		const topicId = Number(data.get('topic-id'));
+
+		const existing = await db.query.tasksToTopics.findFirst({
+			where: and(eq(tasksToTopics.taskId, Number(params.id)), eq(tasksToTopics.topicId, topicId))
+		});
+
+		if (existing) {
+			await db
+				.delete(tasksToTopics)
+				.where(
+					and(eq(tasksToTopics.taskId, Number(params.id)), eq(tasksToTopics.topicId, topicId))
+				);
+		}
+	},
+	updateProgress: async ({ cookies, request, params }) => {
+		if (!cookies.get('token')) {
+			return { status: 401 };
+		}
+
+		const data = await request.formData();
+
+		const currentPoints =
+			Number(data.get('currentPoints')) <= Number(data.get('totalPoints'))
+				? Number(data.get('currentPoints'))
+				: Number(data.get('totalPoints'));
+
+		await db
+			.update(tasks)
+			.set({
+				currentPoints,
+				totalPoints: Number(data.get('totalPoints')),
+				updatedAt: new Date()
+			})
+			.where(eq(tasks.id, Number(params.id)));
+	},
+	updateNotes: async ({ cookies, request, params }) => {
+		if (!cookies.get('token')) {
+			return { status: 401 };
+		}
+
+		const data = await request.formData();
+
+		await db
+			.update(tasks)
+			.set({
+				notes: data.get('notes') as string,
+				updatedAt: new Date()
+			})
+			.where(eq(tasks.id, Number(params.id)));
+	}
+};
--- a/src/routes/progress/[id]/+page.svelte
+++ b/src/routes/progress/[id]/+page.svelte
@@ -0,0 +1,174 @@
+<script lang="ts">
+	import Check from 'lucide-svelte/icons/check';
+	import * as Command from '$lib/components/ui/command';
+	import * as Popover from '$lib/components/ui/popover';
+	import { Button } from '$lib/components/ui/button';
+	import { cn } from '$lib/utils.js';
+	import { tick } from 'svelte';
+
+	let { data } = $props();
+
+	let open = $state(false);
+	let value = $state('');
+	let search = $state('');
+	let triggerRef = $state<any>();
+	let addTopicForms = $state<HTMLFormElement[]>([]);
+
+	// We want to refocus the trigger button when the user selects
+	// an item from the list so users can continue navigating the
+	// rest of the form with the keyboard.
+	function closeAndFocusTrigger() {
+		open = false;
+		tick().then(() => {
+			triggerRef.focus();
+		});
+	}
+
+	function getProgress() {
+		return (data.task?.currentPoints / data.task?.totalPoints) * 100;
+	}
+</script>
+
+<h1 class="my-4 text-2xl font-bold text-center">{data.task?.name}</h1>
+
+<div class="my-4">
+	<div class="flex justify-center gap-4 items-center relative">
+		<h2 class="text-xl font-semibold">Topics ({data.task?.tasksToTopics.length})</h2>
+
+		<Popover.Root bind:open>
+			<Popover.Trigger bind:this={triggerRef}>
+				{#if data.editable}
+					<Button variant="outline" class="justify-between" role="combobox" aria-expanded={open}>
+						+
+					</Button>
+				{/if}
+			</Popover.Trigger>
+			<Popover.Content class="w-[200px] p-0">
+				<Command.Root>
+					<Command.Input bind:value={search} placeholder="Search topic..." />
+					<Command.List>
+						<div class="flex flex-col items-center p-2">
+							<Command.Group>
+								{#each data.topics as topic}
+									<form
+										action="?/addTopic"
+										method="post"
+										bind:this={addTopicForms[topic.id]}
+										onsubmit={() => (value = topic.id.toString())}
+									>
+										<input type="hidden" name="topic-id" value={topic.id} />
+										<Command.Item
+											value={topic.name!}
+											onSelect={() => {
+												addTopicForms[topic.id].submit();
+												closeAndFocusTrigger();
+											}}
+										>
+											<Check
+												class={cn(
+													'mr-2 size-4',
+													value !== topic.id.toString() && 'text-transparent'
+												)}
+											/>
+											{topic.name}
+										</Command.Item>
+									</form>
+								{/each}
+							</Command.Group>
+
+							<form method="post" action="?/createTopic">
+								<input type="hidden" name="name" value={search} />
+								<button class="px-4 py-2 rounded bg-secondary">Add Topic</button>
+							</form>
+						</div>
+					</Command.List>
+				</Command.Root>
+			</Popover.Content>
+		</Popover.Root>
+	</div>
+	<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}"
+					>
+						{topic.topic.name}
+						<form
+							action="?/removeTopic"
+							method="post"
+							class="absolute -top-1 -right-1 opacity-0 group-hover:opacity-100 transition"
+						>
+							<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>
+</div>
+
+<div class="my-8">
+	<h2 class="text-xl font-semibold text-center mb-4">Progress ({getProgress().toFixed(2)}%)</h2>
+
+	<div class="flex items-center gap-4 max-w-xl mx-auto">
+		<form method="POST" action="?/updateProgress" class="flex items-center gap-4 w-full">
+			<input
+				type="number"
+				name="currentPoints"
+				value={data.task?.currentPoints}
+				class="w-20 p-2 border rounded"
+				min="0"
+				readonly={!data.editable}
+				onchange={(e) => e.target.form?.submit()}
+			/>
+
+			<div class="flex-1">
+				<div class="w-full rounded-full h-4">
+					<progress max="100" value={getProgress()}>{getProgress()}%</progress>
+				</div>
+			</div>
+			<input
+				type="number"
+				name="totalPoints"
+				value={data.task?.totalPoints}
+				class="w-20 p-2 border rounded"
+				readonly={!data.editable}
+				min="1"
+				onchange={(e) => e.target.form?.submit()}
+			/>
+		</form>
+	</div>
+</div>
+
+<div class="my-8">
+	<h2 class="text-xl font-semibold text-center mb-4">Notes</h2>
+
+	<form method="POST" action="?/updateNotes" class="max-w-xl mx-auto">
+		<textarea
+			name="notes"
+			class="w-full p-3 border rounded min-h-[150px] resize-y"
+			placeholder="Add notes about this task..."
+			readonly={!data.editable}
+			onchange={(e) => data.editable && e.target.form?.submit()}>{data.task?.notes || ''}</textarea
+		>
+
+		{#if data.editable}
+			<div class="flex justify-end mt-2">
+				<Button type="submit" size="sm">Save Notes</Button>
+			</div>
+		{/if}
+	</form>
+</div>
--- a/src/routes/progress/create/+page.server.ts
+++ b/src/routes/progress/create/+page.server.ts
@@ -0,0 +1,17 @@
+import { db } from "$lib/db"
+import { tasks } from "$lib/db/schema"
+import { redirect } from "@sveltejs/kit"
+
+export const actions = {
+	default: async ({ cookies, request }) => {
+		if (!cookies.get('token')) {
+			return { status: 401 };
+		}
+
+		const data = await request.formData()
+
+		const task = await db.insert(tasks).values({ name: data.get('name') }).returning()
+
+		redirect(303, '/progress/' + task[0].id)
+	}
+}
--- a/src/routes/progress/create/+page.svelte
+++ b/src/routes/progress/create/+page.svelte
@@ -0,0 +1,10 @@
+<form method="post" class="flex flex-col items-center gap-4">
+	<h1 class="font-bold text-xl mt-8 mb-4">Create Task</h1>
+
+	<div class="flex gap-4">
+		<label for="name">Name: </label>
+		<input type="text" name="name" class="border rounded" />
+	</div>
+
+	<button class="px-4 py-2 rounded bg-green-500 m-4">Submit</button>
+</form>
--- a/src/routes/progress/topics/+page.server.ts
+++ b/src/routes/progress/topics/+page.server.ts
@@ -0,0 +1,20 @@
+import { db } from '$lib/db';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+	const topics = await db.query.topics.findMany({
+		with: {
+			topicsToTasks: {
+				with: {
+					task: true
+				}
+			}
+		}
+	});
+
+	topics.sort((a, b) => b.topicsToTasks.length - a.topicsToTasks.length);
+
+	return {
+		topics
+	};
+};
--- a/src/routes/progress/topics/+page.svelte
+++ b/src/routes/progress/topics/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import * as Table from '$lib/components/ui/table/index.js';
+
+	let { data } = $props();
+</script>
+
+<Table.Root>
+	<Table.Header>
+		<Table.Row>
+			<Table.Head class="w-[100px]">Name</Table.Head>
+			<Table.Head>Amount of Tasks</Table.Head>
+			<Table.Head class="text-right">Actions</Table.Head>
+		</Table.Row>
+	</Table.Header>
+	<Table.Body>
+		{#each data.topics as topic}
+			<Table.Row
+				onclick={() => goto(`/progress/topics/${topic.id}`)}
+				class="cursor-pointer hover:bg-muted/50"
+			>
+				<Table.Cell class="font-medium">{topic.name}</Table.Cell>
+				<Table.Cell>{topic.topicsToTasks.length}</Table.Cell>
+
+				<Table.Cell class="text-right"></Table.Cell>
+			</Table.Row>
+		{/each}
+	</Table.Body>
+</Table.Root>
--- a/src/routes/progress/topics/[id]/+page.server.ts
+++ b/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)
+		})
+	};
+};
--- a/src/routes/progress/topics/[id]/+page.svelte
+++ b/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}