Files
oikos/web/src/lib/components/StatusBadge.svelte
dtoro 50aed11cc4 feat(web): adopt @vincjo/datatables for all tables, standardize shared components
- Add DataTable.svelte: declarative columns, built-in sorting, sticky headers,
  text truncation, column alignment, configurable widths, optional pagination/search
- 12 built-in renderers: BadgeRenderer, StatusBadgeRenderer (unified risk/severity/
  execution/state/type variant mapping), HealthDotRenderer, RelativeTimeRenderer,
  DateRenderer, DurationRenderer, StatusDotRenderer, SignalActions, ApprovalActions,
  ActivityAction, ActivityCancel
- Migrate Overview (task board), Signals, Ops (3 tables) to DataTable
- Refactor EntityTable treegrid to use shared SortHeader, EmptyState, HealthDotRenderer
- Create shared components: EmptyState, StatusBadge, FilterTabs
- Clean up Knowledge.svelte: replace inline relTime() and typeVariant() with shared utils
- Add width, align, truncate column props; table-fixed layout; rounded-xl borders
- Bump version to 0.11.0
2026-07-21 13:19:03 +02:00

48 lines
1.1 KiB
Svelte

<script lang="ts">
import { Badge } from '$lib/components/ui/badge'
type StatusKind = 'risk' | 'severity' | 'execution' | 'type' | 'default'
let {
value,
kind = 'default',
class: className
}: {
value: string
kind?: StatusKind
class?: string
} = $props()
const variantMap: Record<StatusKind, Record<string, 'default' | 'secondary' | 'destructive' | 'outline'>> = {
risk: {
destructive: 'destructive',
config_mutation: 'secondary',
},
severity: {
critical: 'destructive',
warning: 'secondary',
info: 'default',
},
execution: {
failed: 'destructive',
denied: 'destructive',
revoked: 'destructive',
cancelled: 'destructive',
completed: 'default',
running: 'secondary',
approved: 'secondary',
},
type: {
runbook: 'secondary',
investigation: 'default',
},
default: {},
}
function variant(): 'default' | 'secondary' | 'destructive' | 'outline' {
return variantMap[kind]?.[value] ?? (kind === 'default' ? 'default' : 'outline')
}
</script>
<Badge variant={variant()} class={className}>{value}</Badge>