From 006d803a16f0fdd39a6a27d92ce1ed2b6a48e241 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Mon, 4 May 2026 21:29:02 +0200
Subject: [PATCH] ui: idea-status badge helper (M12 T-509)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

lib/idea-status-colors.ts: getIdeaStatusBadge(status) → { label, classes,
pulse? }. Reuses existing --status-*-tokens (in-progress / blocked / review
/ done) — no new tokens needed in theme.css.

Mapping (per docs/plans/M12-ideas.md state machine):
- DRAFT          → surface-variant (neutral)
- GRILLING       → in-progress + pulse
- GRILL_FAILED   → blocked
- GRILLED        → review (waiting for next step)
- PLANNING       → in-progress + pulse
- PLAN_FAILED    → blocked
- PLAN_READY     → review
- PLANNED        → done

CLAUDE.md hardstop respected — only MD3-tokens, no arbitrary Tailwind colors.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 lib/idea-status-colors.ts | 56 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 lib/idea-status-colors.ts

diff --git a/lib/idea-status-colors.ts b/lib/idea-status-colors.ts
new file mode 100644
index 0000000..6e947b6
--- /dev/null
+++ b/lib/idea-status-colors.ts
@@ -0,0 +1,56 @@
+// Mapping van IdeaStatus → Tailwind/MD3-classes voor badge-rendering.
+// Hergebruikt de bestaande --status-*-tokens (zie app/styles/theme.css).
+// CLAUDE.md hardstop: nooit `bg-blue-500` o.i.d.; altijd MD3-tokens.
+
+import type { IdeaStatus } from '@prisma/client'
+
+export interface IdeaStatusBadge {
+  label: string
+  classes: string
+  pulse?: boolean
+}
+
+const PILL = 'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium'
+
+// Per-status: label + Tailwind-classes + optionele pulse-indicator.
+// in-progress + status-blocked + status-review + status-done worden hergebruikt.
+const TABLE: Record<IdeaStatus, IdeaStatusBadge> = {
+  DRAFT: {
+    label: 'Concept',
+    classes: `${PILL} bg-surface-variant text-on-surface-variant border-outline-variant`,
+  },
+  GRILLING: {
+    label: 'Grillen…',
+    classes: `${PILL} bg-status-in-progress/15 text-status-in-progress border-status-in-progress/30`,
+    pulse: true,
+  },
+  GRILL_FAILED: {
+    label: 'Grill mislukt',
+    classes: `${PILL} bg-status-blocked/15 text-status-blocked border-status-blocked/30`,
+  },
+  GRILLED: {
+    label: 'Gegrilld',
+    classes: `${PILL} bg-status-review/15 text-status-review border-status-review/30`,
+  },
+  PLANNING: {
+    label: 'Plannen…',
+    classes: `${PILL} bg-status-in-progress/15 text-status-in-progress border-status-in-progress/30`,
+    pulse: true,
+  },
+  PLAN_FAILED: {
+    label: 'Plan mislukt',
+    classes: `${PILL} bg-status-blocked/15 text-status-blocked border-status-blocked/30`,
+  },
+  PLAN_READY: {
+    label: 'Plan klaar',
+    classes: `${PILL} bg-status-review/15 text-status-review border-status-review/30`,
+  },
+  PLANNED: {
+    label: 'Gepland',
+    classes: `${PILL} bg-status-done/15 text-status-done border-status-done/30`,
+  },
+}
+
+export function getIdeaStatusBadge(status: IdeaStatus): IdeaStatusBadge {
+  return TABLE[status]
+}