From e56aeac93bfd8cc05ddf229b7e51939fde41effd Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Tue, 8 Sep 2026 10:08:39 +0200
Subject: Replace routine status text chip with fixed-width glyph chip

Status becomes a 1.5rem rounded-square chip (ok=check, due=clock,
late=!, veryLate=double !) keeping the green-to-red colors, moved to
the start of each routine row; label and overdue stay in title.
---
 src/app.css                           | 14 +++++++++-----
 src/lib/components/StatusBadge.svelte | 15 +++++++++++----
 src/routes/projects/[id]/+page.svelte |  8 ++++----
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/app.css b/src/app.css
index 1c25c93..a55fdcc 100644
--- a/src/app.css
+++ b/src/app.css
@@ -394,11 +394,15 @@ button {
 
 .status {
 	flex-shrink: 0;
-	padding: 0.25rem 0.5rem;
-	border-radius: 9999px;
-	font-size: 0.75rem;
-	font-weight: 600;
-	white-space: nowrap;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1.5rem;
+	height: 1.5rem;
+	border-radius: 0.375rem;
+	font-size: 0.875rem;
+	font-weight: 700;
+	line-height: 1;
 }
 
 /* Shared route scaffolding */
diff --git a/src/lib/components/StatusBadge.svelte b/src/lib/components/StatusBadge.svelte
index babcbfa..3747270 100644
--- a/src/lib/components/StatusBadge.svelte
+++ b/src/lib/components/StatusBadge.svelte
@@ -18,9 +18,16 @@
 					? 'status bg-accent text-white'
 					: 'status bg-danger text-white',
 	);
+
+	const icon = $derived(
+		status === 'ok' ? '✓' : status === 'due' ? '◷' : status === 'late' ? '!' : '‼',
+	);
+
+	const label = $derived(
+		overdueDays > 0
+			? `${STATUS_LABELS[status]} (${overdueDays} j)`
+			: STATUS_LABELS[status],
+	);
 </script>
 
-<span class={className}>
-	{STATUS_LABELS[status]}{#if overdueDays > 0}
-		({overdueDays} j){/if}
-</span>
+<span class={className} role="img" aria-label={label} title={label}>{icon}</span>
diff --git a/src/routes/projects/[id]/+page.svelte b/src/routes/projects/[id]/+page.svelte
index 345f35f..b67ff45 100644
--- a/src/routes/projects/[id]/+page.svelte
+++ b/src/routes/projects/[id]/+page.svelte
@@ -156,6 +156,10 @@
 						>
 					</form>
 				{:else}
+					<StatusBadge
+						status={routine.status}
+						overdueDays={routine.overdueDays}
+					/>
 					<div class="routine-info">
 						<a
 							class="routine-name"
@@ -171,10 +175,6 @@
 							{/if}
 						</span>
 					</div>
-					<StatusBadge
-						status={routine.status}
-						overdueDays={routine.overdueDays}
-					/>
 					<form method="POST" action="?/complete" use:enhance>
 						<input type="hidden" name="id" value={routine.id} />
 						<button class="btn-done" type="submit">Fait</button>
-- 
cgit v1.3