swarm-ui: rewire a notification flow by drag or keyboard

The flow editor can now change a flow's shape on the canvas, not only
through the inspector's fields:

- drag a box onto another to move it and its branch there; a drop the
  save would refuse shows the target dashed red and gives the reason;
- a palette of node kinds adds a node below the picked box on click, or
  below any box it is dragged onto; it offers what the controller lists;
- arrow keys walk the tree, M picks a box up and Enter drops it under
  the focused one, Alt+Up/Down reorder a node among its siblings, Delete
  removes a branch; focus follows the edit;
- each box with siblings says when it runs, and the inspector can move
  it earlier or later, since the router runs children in edge order;
- request_reviewer is a second leaf kind beside todo, with a reviewer
  field;
- leaving with unsaved edits asks first, also for in-app links and the
  back button (a router hook runs navigation past a page's guard).

frontend/packages/swarm-ui/src/pages/notifications/FlowLayout.ts

@@ -35,6 +35,38 @@ export interface Layout {
   height: number;
 }
 
+// The node whose box holds the point (`x`, `y`) in canvas coordinates, if any.
+export function nodeAt(
+  layout: Layout,
+  x: number,
+  y: number,
+): string | undefined {
+  return layout.nodes.find(
+    (n) =>
+      x >= n.x && x <= n.x + NODE_WIDTH && y >= n.y && y <= n.y + NODE_HEIGHT,
+  )?.id;
+}
+
+// The node next to `id` in direction `dir` on the canvas: left is its parent,
+// right its first child, up and down the nearest box above or below it in the
+// same column. Undefined at an edge, so a key press there does nothing.
+export function neighbour(
+  layout: Layout,
+  flow: Flow,
+  id: string,
+  dir: "up" | "down" | "left" | "right",
+): string | undefined {
+  const me = layout.nodes.find((n) => n.id === id);
+  if (!me) return undefined;
+  if (dir === "left") return flow.edges.find((e) => e.to === id)?.from;
+  if (dir === "right") return flow.edges.find((e) => e.from === id)?.to;
+  const column = layout.nodes
+    .filter((n) => n.depth === me.depth && n.id !== id)
+    .filter((n) => (dir === "up" ? n.y < me.y : n.y > me.y))
+    .sort((a, b) => (dir === "up" ? b.y - a.y : a.y - b.y));
+  return column[0]?.id;
+}
+
 export function layoutFlow(flow: Flow): Layout {
   const children = new Map<string, string[]>();
   for (const e of flow.edges) {