Madhura68
006d803a16
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>
56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
// 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]
|
|
}
|