UX overhaul: routing, accessibility, feedback, and polish

Add react-router-dom for URL-based navigation with browser back/forward, deep links, and bookmarks. Replace window.confirm() with styled ConfirmDialog. Add toast notifications and success feedback on consume/audit/gone flows. Add escape-to-close and focus trapping on modals. Add entrance animations for drawers, modals, and toasts. Make grids responsive, add sortable inventory headers, working CSV/JSON export, time-aware greeting, focus-visible outlines, search clear button, and hover chevrons on inventory rows. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-04 18:54:49 -04:00
parent 80034b47c5
commit a82045d1bd
21 changed files with 640 additions and 145 deletions
@@ -0,0 +1,62 @@
+import { Btn } from "../primitives/index.js";
+import { ModalBackdrop, ModalFooter } from "./ModalChrome.js";
+
+export function ConfirmDialog({
+  title,
+  message,
+  confirmLabel = "Delete",
+  confirmVariant = "danger",
+  onConfirm,
+  onCancel,
+  isPending = false,
+}: {
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  confirmVariant?: "danger" | "primary";
+  onConfirm: () => void;
+  onCancel: () => void;
+  isPending?: boolean;
+}) {
+  return (
+    <ModalBackdrop onClose={onCancel}>
+      <div
+        style={{
+          width: "min(460px, 96vw)",
+          margin: "120px 20px",
+          background: "var(--bg)",
+          border: "1px solid var(--line)",
+          borderRadius: "var(--r-lg)",
+          boxShadow: "var(--shadow-lg)",
+        }}
+      >
+        <div style={{ padding: "28px 32px 8px" }}>
+          <h2
+            className="serif"
+            style={{ fontSize: 24, margin: 0, fontWeight: 500, lineHeight: 1.2 }}
+          >
+            {title}
+          </h2>
+          <p style={{ fontSize: 13, color: "var(--ink-2)", marginTop: 10, lineHeight: 1.5 }}>
+            {message}
+          </p>
+        </div>
+        <ModalFooter>
+          <div />
+          <div style={{ display: "flex", gap: 8 }}>
+            <Btn variant="ghost" onClick={onCancel}>
+              Cancel
+            </Btn>
+            <Btn
+              variant={confirmVariant}
+              disabled={isPending}
+              onClick={onConfirm}
+            >
+              {isPending ? "Deleting…" : confirmLabel}
+            </Btn>
+          </div>
+        </ModalFooter>
+      </div>
+    </ModalBackdrop>
+  );
+}