feat: remove topics

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))
+				);
+		}
 	}
 };

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}