feat(web): Pressing Plant component library + describeJob

design.css component classes (masthead, contents nav, tiles, dept header, job row + severity stripe, status chip, progress bar, pressed list, buttons, fields). Presentational _ui components. describeJob maps worker Job.state to literal labels + severity kind + stepped progress (unit-tested). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-12 14:09:30 +02:00
parent e1d96aa603
commit 656e755daf
9 changed files with 361 additions and 0 deletions
@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+import type { Kind } from "./status";
+import { ProgressBar } from "./progress-bar";
+import { StatusChip } from "./status-chip";
+
+// Map the severity kind to the row's visual class (stripe/bar color).
+function rowClass(kind: Kind): string {
+  if (kind === "attention") return "attention";
+  if (kind === "verify" || kind === "done") return "verify";
+  return "working";
+}
+
+export function JobRow({
+  artist,
+  album,
+  kind,
+  label,
+  step,
+  total,
+  meta,
+  note,
+  indeterminate,
+}: {
+  artist: string;
+  album: string;
+  kind: Kind;
+  label: string;
+  step: number;
+  total: number;
+  meta?: ReactNode;
+  note?: ReactNode;
+  indeterminate?: boolean;
+}) {
+  return (
+    <article className={`job ${rowClass(kind)}`}>
+      <div className="stripe" />
+      <div>
+        <h3 className="title">
+          {album} <span className="artist">· {artist}</span>
+        </h3>
+        {meta ? <div className="meta">{meta}</div> : null}
+        {note ? (
+          <div className="note">{note}</div>
+        ) : kind !== "attention" ? (
+          <ProgressBar kind={kind} step={step} total={total} indeterminate={indeterminate} />
+        ) : null}
+      </div>
+      <StatusChip kind={kind} label={label} />
+    </article>
+  );
+}