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,37 @@
+import type { Kind } from "./status";
+
+/** A thin ruled progress bar. `indeterminate` for open-ended stages (searching);
+ *  otherwise a discrete step/total fill with a step readout. */
+export function ProgressBar({
+  kind,
+  step,
+  total,
+  indeterminate,
+}: {
+  kind: Kind;
+  step: number;
+  total: number;
+  indeterminate?: boolean;
+}) {
+  if (indeterminate) {
+    return (
+      <div className="prog">
+        <div className="bar indet">
+          <span />
+        </div>
+        <div className="pct muted">searching</div>
+      </div>
+    );
+  }
+  const pct = total > 0 ? Math.round((step / total) * 100) : 0;
+  return (
+    <div className="prog">
+      <div className="bar">
+        <span style={{ width: `${pct}%` }} />
+      </div>
+      <div className="pct">
+        {step}/{total}
+      </div>
+    </div>
+  );
+}