feat(FN-4829): merge fusion/fn-4829

2026-05-16 22:26:42 -07:00
parent 8ae7f3d97f
commit df998cb54f
20 changed files with 1085 additions and 33 deletions
--- a/packages/dashboard/app/components/DuplicateWarningModal.tsx
+++ b/packages/dashboard/app/components/DuplicateWarningModal.tsx
@@ -0,0 +1,69 @@
+import "./DuplicateWarningModal.css";
+import { useEffect, useRef } from "react";
+import type { DuplicateMatch } from "../api";
+
+interface DuplicateWarningModalProps {
+  matches: DuplicateMatch[];
+  onOpen: (id: string) => void;
+  onProceed: () => void;
+  onCancel: () => void;
+}
+
+function toStatusClass(column: string): string {
+  return `card-status-badge--${column}`;
+}
+
+export function DuplicateWarningModal({ matches, onOpen, onProceed, onCancel }: DuplicateWarningModalProps) {
+  const cancelButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    cancelButtonRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onCancel();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [onCancel]);
+
+  return (
+    <div className="modal-overlay open" role="presentation">
+      <div className="modal duplicate-warning-modal" role="dialog" aria-modal="true" aria-labelledby="duplicate-warning-modal-title">
+        <div className="modal-header">
+          <h3 id="duplicate-warning-modal-title">Possible duplicates</h3>
+        </div>
+        <div className="duplicate-warning-modal-body">
+          <p className="duplicate-warning-modal-copy">We found similar active tasks. Open an existing task or create this one anyway.</p>
+          <div className="duplicate-warning-modal-list">
+            {matches.map((match) => (
+              <article className="card duplicate-warning-modal-item" key={match.id}>
+                <div className="duplicate-warning-modal-item-header">
+                  <span className="card-id">{match.id}</span>
+                  <span className={`card-status-badge ${toStatusClass(match.column)}`}>{match.column}</span>
+                  <span className="duplicate-warning-modal-score">{Math.round(match.score * 100)}%</span>
+                </div>
+                <div className="card-title duplicate-warning-modal-title">{match.title || "Untitled task"}</div>
+                <div className="duplicate-warning-modal-actions">
+                  <button className="btn btn-sm" type="button" onClick={() => onOpen(match.id)}>Open</button>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+        <div className="modal-actions">
+          <div className="modal-actions-left">
+            <button className="btn" type="button" ref={cancelButtonRef} onClick={onCancel}>Cancel</button>
+          </div>
+          <div className="modal-actions-right">
+            <button className="btn btn-primary" type="button" onClick={onProceed}>Create anyway</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}