From d27b381250fb7ad71db7a23f47ad55ac2ee0c5c1 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 29 Apr 2026 22:08:09 -0400
Subject: [PATCH] feat(web): add StatusPill semantic-color status indicator

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.
---
 web/src/lib/components/StatusPill.svelte  | 54 +++++++++++++++++++++++
 web/src/lib/components/StatusPill.test.ts | 25 +++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 web/src/lib/components/StatusPill.svelte
 create mode 100644 web/src/lib/components/StatusPill.test.ts

diff --git a/web/src/lib/components/StatusPill.svelte b/web/src/lib/components/StatusPill.svelte
new file mode 100644
index 00000000..cc6907b8
--- /dev/null
+++ b/web/src/lib/components/StatusPill.svelte
@@ -0,0 +1,54 @@
+<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>
diff --git a/web/src/lib/components/StatusPill.test.ts b/web/src/lib/components/StatusPill.test.ts
new file mode 100644
index 00000000..6d8d1e08
--- /dev/null
+++ b/web/src/lib/components/StatusPill.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import StatusPill from './StatusPill.svelte';
+
+// Voice-rule labels and semantic tones per spec §6 / project_design_system.md.
+// Each row is the contract: input status -> rendered label + data-tone attr.
+const CASES = [
+  { status: 'pending',   label: 'Awaiting review',         tone: 'warning' },
+  { status: 'approved',  label: 'Approved · downloading',  tone: 'info'    },
+  { status: 'completed', label: 'Kept',                    tone: 'success' },
+  { status: 'rejected',  label: 'Set aside',               tone: 'error'   },
+  { status: 'failed',    label: "Couldn't add",            tone: 'error'   },
+] as const;
+
+describe('StatusPill', () => {
+  for (const { status, label, tone } of CASES) {
+    test(`${status} renders "${label}" with tone=${tone}`, () => {
+      render(StatusPill, { props: { status } });
+      const pill = screen.getByText(label);
+      expect(pill).toBeInTheDocument();
+      expect(pill.getAttribute('data-tone')).toBe(tone);
+      expect(pill.getAttribute('data-status')).toBe(status);
+    });
+  }
+});