bvandeusen
d27b381250
Single-prop component mapping LidarrRequestStatus to voice-rule labels and semantic tones (warning/info/success/error). Used by /requests and /admin/requests in subsequent tasks.
55 lines
1.8 KiB
Svelte
55 lines
1.8 KiB
Svelte
<script lang="ts" module>
|
|
import type { LidarrRequestStatus } from '$lib/api/types';
|
|
|
|
type Tone = 'warning' | 'info' | 'success' | 'error';
|
|
|
|
type StatusEntry = { label: string; tone: Tone };
|
|
|
|
// Voice-rule labels per spec §6 (and project_design_system.md). Pending requests
|
|
// are an "awaiting" moment, completed requests are "kept" (Minstrel-voice for
|
|
// success), rejected is "set aside", failed is the error register.
|
|
const STATUS_TABLE: Record<LidarrRequestStatus, StatusEntry> = {
|
|
pending: { label: 'Awaiting review', tone: 'warning' },
|
|
approved: { label: 'Approved · downloading', tone: 'info' },
|
|
completed: { label: 'Kept', tone: 'success' },
|
|
rejected: { label: 'Set aside', tone: 'error' },
|
|
failed: { label: "Couldn't add", tone: 'error' },
|
|
};
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
let { status }: { status: LidarrRequestStatus } = $props();
|
|
|
|
const entry = $derived(STATUS_TABLE[status]);
|
|
</script>
|
|
|
|
<span class="pill" data-tone={entry.tone} data-status={status}>{entry.label}</span>
|
|
|
|
<style>
|
|
.pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
line-height: 14px;
|
|
font-weight: 500;
|
|
}
|
|
.pill[data-tone='warning'] {
|
|
background: color-mix(in srgb, var(--fs-warning) 15%, transparent);
|
|
color: var(--fs-warning);
|
|
}
|
|
.pill[data-tone='info'] {
|
|
background: color-mix(in srgb, var(--fs-info) 15%, transparent);
|
|
color: var(--fs-info);
|
|
}
|
|
.pill[data-tone='success'] {
|
|
background: color-mix(in srgb, var(--fs-moss) 15%, transparent);
|
|
color: var(--fs-moss);
|
|
}
|
|
.pill[data-tone='error'] {
|
|
background: color-mix(in srgb, var(--fs-error) 15%, transparent);
|
|
color: var(--fs-error);
|
|
}
|
|
</style>
|