From f84c864dd4763dacd6f0ea18957160215b0fd2fc Mon Sep 17 00:00:00 2001
From: Stan Runge <stan@stanrunge.dev>
Date: Fri, 24 Jan 2025 12:24:44 +0100
Subject: [PATCH] feat: remove topics

---
 .../src/routes/progress/[id]/+page.server.ts  | 17 +++++++++++++++++
 .../web/src/routes/progress/[id]/+page.svelte | 19 ++++++++++++++++---
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/routes/progress/[id]/+page.server.ts b/packages/web/src/routes/progress/[id]/+page.server.ts
index e22802f..81d5971 100755
--- a/packages/web/src/routes/progress/[id]/+page.server.ts
+++ b/packages/web/src/routes/progress/[id]/+page.server.ts
@@ -58,5 +58,22 @@ export const actions = {
 				.values({ taskId: Number(params.id), topicId })
 				.returning();
 		}
+	},
+	removeTopic: async ({ request, params }) => {
+		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))
+				);
+		}
 	}
 };
diff --git a/packages/web/src/routes/progress/[id]/+page.svelte b/packages/web/src/routes/progress/[id]/+page.svelte
index d0a3586..4f62a92 100755
--- a/packages/web/src/routes/progress/[id]/+page.svelte
+++ b/packages/web/src/routes/progress/[id]/+page.svelte
@@ -79,15 +79,28 @@
 			</Popover.Content>
 		</Popover.Root>
 	</div>
-
-	<div class="flex justify-center flex-wrap gap-2 my-1">
+	<div class="flex justify-center flex-wrap gap-2 my-1 relative">
 		{#if data.task?.tasksToTopics}
 			{#each data.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"
+					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"
+							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>
 			{/each}
 		{/if}