From c2eebd0d04dfb0226c9250db0c0cc493ee3bc738 Mon Sep 17 00:00:00 2001
From: Stan Runge <stan@stanrunge.dev>
Date: Mon, 27 Jan 2025 00:55:44 +0100
Subject: [PATCH] fix: show points and progress bar in table

---
 packages/web/src/routes/progress/+page.svelte | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/routes/progress/+page.svelte b/packages/web/src/routes/progress/+page.svelte
index 3a75edb..f8ece26 100755
--- a/packages/web/src/routes/progress/+page.svelte
+++ b/packages/web/src/routes/progress/+page.svelte
@@ -23,7 +23,7 @@
 					<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">Progress</th>
+						<th class="px-6 py-3 text-left text-sm font-semibold min-w-[200px]">Progress</th>
 						<th class="px-6 py-3 text-left text-sm font-semibold">Actions</th>
 					</tr>
 				</thead>
@@ -48,8 +48,19 @@
 								</a>
 							</td>
 
-							<td class="px-6 py-2 border-b">
-								{((task.currentPoints / task.totalPoints) * 100).toFixed(1)}%
+							<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}%"
+									/>
+									<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>
 							<td class="px-6 py-2 border-b">
 								<button