refactor(web): route-driven modal hook and CRUD conventions

Extract useRouteDrivenModal for the five list editors, move AddTriggerDialog into its own file, and document modal vs full-page CRUD patterns in CONTRIBUTING.md. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-22 00:48:44 +07:00
parent 3d25d8a614
commit 96c4cc7b47
10 changed files with 375 additions and 306 deletions
@@ -0,0 +1,68 @@
+import { useState } from "react";
+
+export function AddTriggerDialog({ open, onClose, onPick }) {
+  const [kind, setKind] = useState("HTTP");
+  if (!open) return null;
+
+  return (
+    <dialog className="modal modal-open">
+      <div className="modal-box">
+        <h3 className="font-bold text-lg">Add trigger</h3>
+        <div className="form-control mt-3">
+          <label className="label cursor-pointer justify-start gap-3">
+            <input
+              type="radio"
+              name="trig-kind"
+              className="radio radio-sm"
+              checked={kind === "HTTP"}
+              onChange={() => setKind("HTTP")}
+            />
+            <span>
+              HTTP — webhook at <span className="font-mono">/u/owner/path</span>
+            </span>
+          </label>
+          <label className="label cursor-pointer justify-start gap-3">
+            <input
+              type="radio"
+              name="trig-kind"
+              className="radio radio-sm"
+              checked={kind === "cron"}
+              onChange={() => setKind("cron")}
+            />
+            <span>Cron — run on a schedule</span>
+          </label>
+          <label className="label cursor-pointer justify-start gap-3">
+            <input
+              type="radio"
+              name="trig-kind"
+              className="radio radio-sm"
+              checked={kind === "workflow"}
+              onChange={() => setKind("workflow")}
+            />
+            <span>Workflow — callable by other workflows</span>
+          </label>
+        </div>
+        <div className="modal-action">
+          <button type="button" className="btn" onClick={onClose}>
+            Cancel
+          </button>
+          <button
+            type="button"
+            className="btn btn-primary"
+            onClick={() => {
+              onPick(kind);
+              setKind("HTTP");
+            }}
+          >
+            Add
+          </button>
+        </div>
+      </div>
+      <form method="dialog" className="modal-backdrop">
+        <button type="button" onClick={onClose}>
+          close
+        </button>
+      </form>
+    </dialog>
+  );
+}