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>

packages/web/src/components/workflow/AddTriggerDialog.jsx

@@ -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>
+  );
+}

packages/web/src/components/workflow/TriggerCard.jsx

@@ -519,68 +519,3 @@ function FailureAlertFields({ trigger, disabled, onChange, alertDestinations })
     </div>
   );
 }
-
-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>
-  );
-}

packages/web/src/components/workflow/TriggersTab.jsx

@@ -15,7 +15,8 @@ import {
 } from "@dnd-kit/sortable";
 import { LuPlus } from "react-icons/lu";
 import { newCronTrigger, newHttpTrigger, newWorkflowTrigger } from "../../lib/workflow-doc.js";
-import { AddTriggerDialog, TriggerCard } from "./TriggerCard.jsx";
+import { AddTriggerDialog } from "./AddTriggerDialog.jsx";
+import { TriggerCard } from "./TriggerCard.jsx";
 
 export function TriggersTab({
   doc,