Prune files not in the deploy set (stale build context)

web/src/customer-grid/FieldBatchAccessDialog.tsx

@@ -1,233 +0,0 @@
-// ---------------------------------------------------------------------------
-// customer-grid / FieldBatchAccessDialog.tsx
-//
-// One small access editor for the Field manager's plural Share and Reassign
-// actions.  It deliberately uses the existing field-share routes rather than
-// inventing a second permissions model: every selected field keeps its own
-// grants, and the server remains the authority for each individual refusal.
-// ---------------------------------------------------------------------------
-
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { API_V1, CREDENTIALS } from "../apiContract";
-
-export type FieldBatchAccessAction = "share" | "reassign";
-
-interface Person {
-  user: string;
-  name: string;
-}
-
-interface Entry {
-  user: string;
-  role: "view" | "edit";
-}
-
-function asPeople(raw: unknown): Person[] {
-  if (!Array.isArray(raw)) return [];
-  const seen = new Set<string>();
-  const people: Person[] = [];
-  for (const item of raw) {
-    if (!item || typeof item !== "object") continue;
-    const candidate = item as Record<string, unknown>;
-    const user = typeof candidate.username === "string" ? candidate.username.trim().toLowerCase() : "";
-    const name = typeof candidate.name === "string" ? candidate.name.trim() : "";
-    if (!user || seen.has(user)) continue;
-    seen.add(user);
-    people.push({ user, name: name || user });
-  }
-  return people;
-}
-
-function asEntries(raw: unknown): Entry[] {
-  if (!Array.isArray(raw)) return [];
-  const seen = new Set<string>();
-  const entries: Entry[] = [];
-  for (const item of raw) {
-    if (!item || typeof item !== "object") continue;
-    const candidate = item as Record<string, unknown>;
-    const user = typeof candidate.user === "string" ? candidate.user.trim().toLowerCase() : "";
-    const role = candidate.role === "view" || candidate.role === "edit" ? candidate.role : null;
-    if (!user || !role || seen.has(user)) continue;
-    seen.add(user);
-    entries.push({ user, role });
-  }
-  return entries;
-}
-
-async function replyMessage(res: Response): Promise<string> {
-  const body = (await res.json().catch(() => null)) as { error?: { message?: unknown } } | null;
-  const message = body?.error?.message;
-  return typeof message === "string" && message.trim() ? message.trim() : `The server answered ${res.status}.`;
-}
-
-export default function FieldBatchAccessDialog({
-  action,
-  tableKey,
-  fields,
-  onClose,
-  onComplete,
-}: {
-  action: FieldBatchAccessAction;
-  tableKey: string;
-  fields: readonly { key: string; label: string }[];
-  onClose: () => void;
-  onComplete: (message: string) => void;
-}) {
-  const [people, setPeople] = useState<Person[]>([]);
-  const [person, setPerson] = useState("");
-  const [role, setRole] = useState<Entry["role"]>("view");
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState("");
-  const [result, setResult] = useState("");
-  const first = fields[0];
-  const title = action === "share" ? "Share fields" : "Reassign fields";
-  const subject = fields.length === 1 ? `“${first?.label ?? "field"}”` : `${fields.length} fields`;
-
-  const pathFor = useCallback(
-    (key: string) => `${API_V1}/share/field/${encodeURIComponent(`${tableKey}:${key}`)}`,
-    [tableKey]
-  );
-
-  useEffect(() => {
-    let alive = true;
-    if (!first) return () => { alive = false; };
-    void (async () => {
-      const res = await fetch(pathFor(first.key), { credentials: CREDENTIALS }).catch(() => null);
-      if (!alive) return;
-      if (!res) {
-        setError("Cannot reach the server.");
-        return;
-      }
-      if (!res.ok) {
-        setError(await replyMessage(res));
-        return;
-      }
-      const body = (await res.json().catch(() => null)) as Record<string, unknown> | null;
-      const offered = asPeople(body?.people);
-      setPeople(offered);
-      if (offered.length === 0) setError("No eligible people were returned for this workspace.");
-    })();
-    return () => { alive = false; };
-  }, [first, pathFor]);
-
-  useEffect(() => {
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key === "Escape" && !busy) onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [busy, onClose]);
-
-  const canApply = !!person && !busy && !result;
-  const buttonText = action === "share" ? "Share" : "Reassign";
-  const personLabel = useMemo(
-    () => people.find((item) => item.user === person)?.name ?? person,
-    [people, person]
-  );
-
-  const apply = useCallback(() => {
-    if (!canApply) return;
-    void (async () => {
-      setBusy(true);
-      setError("");
-      let changed = 0;
-      const refused: string[] = [];
-      for (const field of fields) {
-        const path = pathFor(field.key);
-        const read = await fetch(path, { credentials: CREDENTIALS }).catch(() => null);
-        if (!read) {
-          refused.push(`${field.label}: Cannot reach the server.`);
-          continue;
-        }
-        if (!read.ok) {
-          refused.push(`${field.label}: ${await replyMessage(read)}`);
-          continue;
-        }
-        const current = (await read.json().catch(() => null)) as Record<string, unknown> | null;
-        const response = action === "share"
-          ? await fetch(path, {
-              method: "PUT",
-              credentials: CREDENTIALS,
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({
-                entries: [
-                  ...asEntries(current?.entries).filter((entry) => entry.user !== person),
-                  { user: person, role },
-                ],
-              }),
-            }).catch(() => null)
-          : await fetch(`${path}/owner`, {
-              method: "PUT",
-              credentials: CREDENTIALS,
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({ owner: person }),
-            }).catch(() => null);
-        if (!response) {
-          refused.push(`${field.label}: Cannot reach the server.`);
-        } else if (!response.ok) {
-          refused.push(`${field.label}: ${await replyMessage(response)}`);
-        } else {
-          changed += 1;
-        }
-      }
-      const noun = changed === 1 ? "field" : "fields";
-      const verb = action === "share" ? "shared with" : "reassigned to";
-      const message = changed > 0
-        ? `${changed} ${noun} ${verb} ${personLabel}.`
-        : "No selected fields were changed.";
-      setResult(message);
-      if (refused.length > 0) setError(refused.join(" "));
-      if (changed > 0) onComplete(message);
-      setBusy(false);
-    })();
-  }, [action, canApply, fields, onComplete, pathFor, person, personLabel, role]);
-
-  return (
-    <div className="shell-newdb-scrim cg-field-access-scrim" onClick={() => (busy ? null : onClose())}>
-      <section
-        className="shell-newdb shell-share"
-        role="dialog"
-        aria-modal="true"
-        aria-label={`${title} ${subject}`}
-        onClick={(event) => event.stopPropagation()}
-      >
-        <h2>{title}</h2>
-        <p className="shell-newdb-sub">
-          {action === "share"
-            ? `Give ${personLabel || "someone"} access to ${subject}. Existing access on each field stays in place.`
-            : `Make ${personLabel || "someone"} the owner of ${subject}. A field must already be shared before it can be reassigned.`}
-        </p>
-        <div className="shell-share-add">
-          <select
-            className="shell-share-select"
-            aria-label="Person"
-            value={person}
-            disabled={busy || !!result}
-            onChange={(event) => setPerson(event.target.value)}
-          >
-            <option value="">Choose a person</option>
-            {people.map((item) => <option key={item.user} value={item.user}>{item.name}</option>)}
-          </select>
-          {action === "share" ? (
-            <select
-              className="shell-share-select"
-              aria-label="Access level"
-              value={role}
-              disabled={busy || !!result}
-              onChange={(event) => setRole(event.target.value === "edit" ? "edit" : "view")}
-            >
-              <option value="view">Can view</option>
-              <option value="edit">Can edit</option>
-            </select>
-          ) : null}
-        </div>
-        {result ? <p className="shell-share-summary">{result}</p> : null}
-        {error ? <p className="shell-newdb-err">{error}</p> : null}
-        <div className="shell-newdb-actions">
-          <button type="button" disabled={busy} onClick={onClose}>{result ? "Done" : "Cancel"}</button>
-          {!result ? <button type="button" className="login-submit" disabled={!canApply} onClick={apply}>{busy ? "Applying..." : buttonText}</button> : null}
-        </div>
-      </section>
-    </div>
-  );
-}

web/src/customer-grid/RouteNav.tsx

@@ -1,773 +0,0 @@
-// ---------------------------------------------------------------------------
-// customer-grid / RouteNav.tsx
-// W42-T24 (owner instruction 10, contract C6) - THE ROUTE NAVIGATION.
-//
-// Before this file, the Route button opened a bare planner whose only listing was a plain
-// `<select>`. A route could not be renamed, duplicated, deleted, shared or filed from the place
-// it was listed, and a route somebody shared with you wore no mark at all.
-//
-// THIS IS `ViewSidebar.tsx`'s VOCABULARY, NOT A SECOND IMPLEMENTATION. Same row shape, the same
-// `cg-view-row` / `cg-view-main` / `cg-view-more` class names, the same trigger in the same
-// position, the same `AnchoredOverlay` menu surface, the same folder drag behaviour and the same
-// empty-state voice. Interaction parity is the point of the ticket; resemblance is not enough.
-//
-// HOST NEUTRAL. Nothing under `customer-grid/**` may import `shell/**`, so the share dialog is
-// reached the way `ColumnMenu.tsx` reaches it: a `window` CustomEvent named "aios:share-open",
-// whose literal is deliberately re-spelled at each call site rather than imported across the
-// boundary. This file raises no such event itself; it hands the decision up through
-// `onShareRoute`, so the one dispatch lives beside the rest of the route doors in `MapView.tsx`.
-//
-// NO EXPAND / COLLAPSE MACHINERY. The views rail's disclosure chevron is being deleted (R12), so
-// copying it here would ship a control on its way out. A folder shows its routes.
-// ---------------------------------------------------------------------------
-
-import { useCallback, useMemo, useState } from "react";
-import type { DragEvent, ReactNode } from "react";
-import { AnchoredOverlay } from "./OverlaySurface";
-import type { AnchorRect } from "./OverlaySurface";
-import { FolderMark, MenuLabel } from "./icons";
-import { SHARE_SHAPE } from "./iconShapes";
-import type { GridFolder } from "./types";
-import {
-  ROOT_FOLDER_ID, folderNesting, groupByFolder, isSyntheticFolderId, mayNestFolder,
-  reorderFolderIds,
-} from "./folders";
-
-/**
- * One route as `GET /customers/route-order` serves it (W42-T22 and W42-T23 grew every key below
- * the first three).
- *
- * `shared` IS THE CLIENT'S MEANING ALREADY, AND IT MUST NOT BE RE-DERIVED.
- * `_merge_shared_fields` stamps `shared: True` on every tenant-wide column, and every route is
- * one of those, always. The route-order door answers the question `viewShareMark` asks instead,
- * which is *granted to me*; re-computing it here from the field definition would put the mark on
- * every route in the list.
- */
-export interface RouteNavRoute {
-  key: string;
-  label: string;
-  inputsHash?: string;
-  stops?: number;
-  solvedBy?: string | null;
-  mine: boolean;
-  owner?: string | null;
-  shared?: boolean;
-  sharedOut?: boolean;
-  hasShares?: boolean;
-  sharedRole?: string | null;
-  folderId?: string | null;
-}
-
-export interface RouteShareMark {
-  title: string;
-  ariaLabel: string;
-}
-
-/**
- * CONTRACT C6 - DOES THIS ROUTE WEAR THE SHARE MARK, AND WHAT DOES IT SAY?
- *
- * A LINE-FOR-LINE MIRROR of `ViewSidebar.tsx::viewShareMark`, reading the same five keys in the
- * same order: `hasShares`/`shared` (its line 198), `shared` + `owner` (199), `sharedRole` (203)
- * and `sharedOut` (209). The route-order door spells them that way on purpose; a key spelled one
- * letter differently is a navigation that lists routes, opens the share dialog, passes every gate
- * and never draws the icon.
- *
- * THE COPY IS REWRITTEN, THE READING IS NOT. `viewShareMark` is exported and could have been
- * called directly, but every sentence it returns says "view", so a route would have told its
- * reader it was a view. The rule is shared; the noun is not.
- */
-export function routeShareMark(
-  route: Pick<
-    RouteNavRoute,
-    "shared" | "owner" | "sharedRole" | "label" | "hasShares" | "sharedOut"
-  >
-): RouteShareMark | null {
-  if (!route.hasShares && !route.shared) return null;
-  if (route.shared && route.owner) {
-    return {
-      title:
-        `Shared with you by ${route.owner}.` +
-        (route.sharedRole === "edit"
-          ? " You can edit it."
-          : " You can open it, not change it."),
-      ariaLabel: `${route.label}, shared with you by ${route.owner}`,
-    };
-  }
-  if (route.sharedOut) {
-    return {
-      title: "You shared this route. Anyone you gave access to can open it.",
-      ariaLabel: `${route.label}, shared by you`,
-    };
-  }
-  // `hasShares` and nothing beside it: this route has grants and the payload does not say whose
-  // or on what terms. Say only what is known.
-  return { title: "This route is shared.", ariaLabel: `${route.label}, shared` };
-}
-
-/**
- * The share glyph, drawn from `SHARE_SHAPE` so a shared route, a shared view and a shared field
- * are ONE mark. `ViewSidebar.tsx`'s own `ShareMark` is not exported and that file is not this
- * ticket's to edit, so the geometry is taken from the module both of them already read rather
- * than hand-copied.
- */
-function ShareMark({ size = 13 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 16 16" aria-hidden>
-      {SHARE_SHAPE.map((s) =>
-        s.fill ? (
-          <path key={s.d} d={s.d} fill="currentColor" />
-        ) : (
-          <path
-            key={s.d}
-            d={s.d}
-            fill="none"
-            stroke="currentColor"
-            strokeWidth={1.35}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        )
-      )}
-    </svg>
-  );
-}
-
-const ROUTE_DRAG_TYPE = "application/x-loopable-route";
-const RFOLD_DRAG_TYPE = "application/x-loopable-routefolder";
-const DOTS = "···";
-
-export interface RouteNavProps {
-  /** Every route this account may see, `mine` or not, exactly as the door served them. */
-  routes: RouteNavRoute[];
-  /** This reader's own route folders, as the same listing carries them. */
-  folders: GridFolder[];
-  /** The route currently drawn on the map, so the rail can mark it active. */
-  openKey: string;
-  /** Which route the rail is waiting on a server answer for, or "" for none. */
-  busyKey: string;
-  /**
-   * A sentence the rail owes the reader, or "" for none.
-   *
-   * ⛔ IT RENDERS UNCONDITIONALLY, AND THAT IS THE WHOLE REASON IT EXISTS RATHER THAN REUSING THE
-   * PLANNER'S `saveErr`. Every message slot inside the planner below sits behind `plan &&`, so a
-   * refusal raised while there is no plan yet, which is exactly when Create is refused, would be
-   * written to a slot that is not on screen. A control whose refusal is invisible is a dead menu
-   * row (standing rule 1's second sentence: reported, never silent).
-   */
-  notice: string;
-  /** A failed listing is distinct from the honest empty state and offers an immediate retry. */
-  listError: string | null;
-  onListRetry: () => void;
-  /** ONE CLICK OPENS A ROUTE. There is no second gesture and no confirm step. */
-  onOpenRoute: (key: string) => void;
-  /** CREATING IS A SEPARATE AFFORDANCE, never a row in the list of what exists. */
-  onCreateRoute: () => void;
-  onRenameRoute: (key: string, label: string) => void;
-  onDuplicateRoute: (key: string) => void;
-  onDeleteRoute: (key: string) => void;
-  /** Opens the SAME dialog a view or a field opens. The host owns the dispatch. */
-  onShareRoute: (key: string, label: string) => void;
-  /**
-   * REQUIRED, NOT OPTIONAL, AND THAT IS THE TICKET'S OWN INSTRUCTION. `ViewSidebar` learned this
-   * the expensive way: an optional reorder prop lets a caller mount the rail with dragging
-   * silently switched off, and every gate stays green because the component is correct and the
-   * handler simply never arrives. `onViewReorder` was made required in wave 27 for exactly this;
-   * its sibling `onFolderReorder?` is still optional there and is the shape being avoided here.
-   * Both reorder props below are required, so a mount that forgets one does not compile.
-   */
-  onRouteReorder: (order: string[]) => void;
-  onFolderReorder: (order: string[]) => void;
-  /** Drag a route into a folder, or out to the top level. */
-  onRouteMove: (key: string, folderId: string | null) => void;
-  onFolderCreate: (name: string, parent: string | null) => void;
-  onFolderRename: (folderId: string, name: string) => void;
-  onFolderDelete: (folderId: string) => void;
-  /**
-   * THE ROUTE THAT WAS JUST CREATED, so the rail can ASK whether to share it.
-   *
-   * A PROMPT, NOT A DEFAULT. The done-when is "prompts to share it or keep it private", and a
-   * route that opened the share dialog unasked would have made the choice for the person. Null
-   * whenever nothing was just made, which is almost always.
-   */
-  created: { key: string; label: string } | null;
-  onCreatedDismiss: () => void;
-}
-
-export function RouteNav({
-  routes,
-  folders,
-  openKey,
-  busyKey,
-  notice,
-  listError,
-  onListRetry,
-  onOpenRoute,
-  onCreateRoute,
-  onRenameRoute,
-  onDuplicateRoute,
-  onDeleteRoute,
-  onShareRoute,
-  onRouteReorder,
-  onFolderReorder,
-  onRouteMove,
-  onFolderCreate,
-  onFolderRename,
-  onFolderDelete,
-  created,
-  onCreatedDismiss,
-}: RouteNavProps) {
-  const [menu, setMenu] = useState<{ key: string; anchor: AnchorRect } | null>(null);
-  const [folderMenu, setFolderMenu] = useState<{ id: string; anchor: AnchorRect } | null>(null);
-  const [createMenu, setCreateMenu] = useState<AnchorRect | null>(null);
-  const [renamingKey, setRenamingKey] = useState("");
-  const [renamingFolder, setRenamingFolder] = useState("");
-  const [draft, setDraft] = useState("");
-  const [armedDelete, setArmedDelete] = useState("");
-  const [routeDrag, setRouteDrag] = useState("");
-  const [routeOver, setRouteOver] = useState("");
-  const [foldDrag, setFoldDrag] = useState("");
-  const [foldOver, setFoldOver] = useState("");
-
-  const nesting = useMemo(() => folderNesting(folders), [folders]);
-  const nestedFolders = nesting.ordered;
-
-  /**
-   * The rail's groups, depth first.
-   *
-   * `nesting.ordered` rather than `folders`, because `groupByFolder` emits one group per folder
-   * IN THE ORDER IT IS HANDED THEM. Passing the raw list would draw a child folder above its
-   * parent whenever the store happened to hold it that way.
-   * `folderIdOf` returns the payload value UNTOUCHED, including the difference between absent
-   * (never filed) and the reserved root id (deliberately dragged to the top level). Collapsing
-   * the two would send a route somebody shared with you out of the Shared group the first time
-   * you dragged it anywhere.
-   */
-  const groups = useMemo(
-    () =>
-      groupByFolder<RouteNavRoute>(
-        routes,
-        nestedFolders,
-        (r) => r.folderId ?? null,
-        (r) => !!r.shared && !!r.owner
-      ),
-    [routes, nestedFolders]
-  );
-
-  const closeMenus = useCallback(() => {
-    setMenu(null);
-    setFolderMenu(null);
-    setArmedDelete("");
-  }, []);
-
-  const reorderRoutes = useCallback(
-    (draggedKey: string, beforeKey: string | null) => {
-      const next = reorderFolderIds(routes.map((r) => r.key), draggedKey, beforeKey);
-      if (next) onRouteReorder(next);
-    },
-    [routes, onRouteReorder]
-  );
-
-  const reorderFolders = useCallback(
-    (draggedId: string, beforeId: string | null) => {
-      const next = reorderFolderIds(folders.map((f) => f.id), draggedId, beforeId);
-      if (next) onFolderReorder(next);
-    },
-    [folders, onFolderReorder]
-  );
-
-  const commitRename = useCallback(() => {
-    const name = draft.trim();
-    if (renamingKey && name) onRenameRoute(renamingKey, name);
-    setRenamingKey("");
-    setDraft("");
-  }, [draft, renamingKey, onRenameRoute]);
-
-  const commitFolderRename = useCallback(() => {
-    const name = draft.trim();
-    if (renamingFolder && name) onFolderRename(renamingFolder, name);
-    setRenamingFolder("");
-    setDraft("");
-  }, [draft, renamingFolder, onFolderRename]);
-
-  /**
-   * Drop handlers for one route row.
-   *
-   * `stopPropagation` IS LOAD-BEARING, and it is `ViewSidebar`'s reason verbatim: a route drag
-   * carries TWO payloads at once, the reorder channel and the plain-text filing channel, so a
-   * drop on a row inside a folder would otherwise reorder AND re-file in one gesture.
-   */
-  const rowDrop = (key: string) => ({
-    onDragOver: (e: DragEvent) => {
-      if (!e.dataTransfer.types.includes(ROUTE_DRAG_TYPE)) return;
-      e.preventDefault();
-      e.stopPropagation();
-      setRouteOver(key);
-    },
-    onDragLeave: () => setRouteOver(""),
-    onDrop: (e: DragEvent) => {
-      if (!e.dataTransfer.types.includes(ROUTE_DRAG_TYPE)) return;
-      e.preventDefault();
-      e.stopPropagation();
-      const dragged = e.dataTransfer.getData(ROUTE_DRAG_TYPE);
-      setRouteOver("");
-      setRouteDrag("");
-      if (dragged && dragged !== key) reorderRoutes(dragged, key);
-    },
-  });
-
-  const sectionDrop = (target: string | null) => ({
-    onDragOver: (e: DragEvent) => {
-      if (!e.dataTransfer.types.includes("text/plain")) return;
-      e.preventDefault();
-      setFoldOver(target ?? ROOT_FOLDER_ID);
-    },
-    onDragLeave: () => setFoldOver(""),
-    onDrop: (e: DragEvent) => {
-      e.preventDefault();
-      setFoldOver("");
-      const folded = e.dataTransfer.getData(RFOLD_DRAG_TYPE);
-      if (folded) {
-        setFoldDrag("");
-        if (target && folded !== target) reorderFolders(folded, target);
-        return;
-      }
-      const dragged = e.dataTransfer.getData("text/plain");
-      setRouteDrag("");
-      if (dragged) onRouteMove(dragged, target);
-    },
-  });
-
-  const menuRoute = menu ? routes.find((r) => r.key === menu.key) || null : null;
-  const folderRow = folderMenu ? folders.find((f) => f.id === folderMenu.id) || null : null;
-  const nestHere = folderRow
-    ? mayNestFolder(nesting, folderRow.id)
-    : { ok: true, reason: undefined as string | undefined };
-
-  const renderRoute = (route: RouteNavRoute): ReactNode => {
-    const mark = routeShareMark(route);
-    const active = route.key === openKey;
-    const renaming = renamingKey === route.key;
-    const stops = typeof route.stops === "number" ? route.stops : null;
-    const desc = [
-      stops === null ? "" : `${stops.toLocaleString()} ${stops === 1 ? "stop" : "stops"}`,
-      route.mine ? "" : route.solvedBy ? `planned by ${route.solvedBy}` : "planned by a colleague",
-    ]
-      .filter(Boolean)
-      .join(" · ");
-    return (
-      <div
-        key={route.key}
-        className={
-          "cg-view-row cg-route-row" +
-          (active ? " is-active" : "") +
-          (routeDrag === route.key ? " is-viewdrag" : "") +
-          (routeOver === route.key && routeDrag ? " is-drop-above" : "")
-        }
-        draggable={!renaming}
-        onDragStart={(e) => {
-          e.dataTransfer.setData(ROUTE_DRAG_TYPE, route.key);
-          e.dataTransfer.setData("text/plain", route.key);
-          e.dataTransfer.effectAllowed = "move";
-          setRouteDrag(route.key);
-        }}
-        onDragEnd={() => {
-          setRouteDrag("");
-          setRouteOver("");
-        }}
-        {...rowDrop(route.key)}
-      >
-        {renaming ? (
-          <input
-            className="cg-input cg-route-rename"
-            value={draft}
-            autoFocus
-            aria-label={`Rename ${route.label}`}
-            onChange={(e) => setDraft(e.target.value)}
-            onBlur={commitRename}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-                commitRename();
-              }
-              if (e.key === "Escape") {
-                e.preventDefault();
-                setRenamingKey("");
-              }
-            }}
-          />
-        ) : (
-          <button
-            type="button"
-            className="cg-view-main"
-            title={route.label}
-            disabled={busyKey === route.key}
-            onClick={() => onOpenRoute(route.key)}
-          >
-            <span className="cg-view-text">
-              <span className="cg-view-name">{route.label}</span>
-              {desc ? <span className="cg-view-desc">{desc}</span> : null}
-            </span>
-            {mark ? (
-              <span
-                className="cg-view-shared"
-                role="img"
-                aria-label={mark.ariaLabel}
-                title={mark.title}
-              >
-                <ShareMark />
-              </span>
-            ) : null}
-          </button>
-        )}
-        <button
-          type="button"
-          className="cg-view-more"
-          aria-label={`Actions for ${route.label}`}
-          aria-haspopup="menu"
-          aria-expanded={menu?.key === route.key}
-          onClick={(e) => {
-            // THE ANCHOR IS HOISTED BEFORE THE UPDATER. `currentTarget` is null by the time a
-            // state updater runs, and reading it inside one is the white screen this rail's
-            // sibling already shipped once.
-            const anchor = e.currentTarget.getBoundingClientRect();
-            setFolderMenu(null);
-            setArmedDelete("");
-            setMenu((cur) => (cur && cur.key === route.key ? null : { key: route.key, anchor }));
-          }}
-        >
-          {DOTS}
-        </button>
-      </div>
-    );
-  };
-
-  return (
-    <nav className="cg-route-nav" aria-label="Route navigation">
-      <div className="cg-route-nav-head">
-        <span className="cg-views-title">Routes</span>
-        <button
-          type="button"
-          className="cg-link-btn cg-create-btn"
-          aria-haspopup="menu"
-          aria-expanded={!!createMenu}
-          onClick={(e) => {
-            const anchor = e.currentTarget.getBoundingClientRect();
-            closeMenus();
-            setCreateMenu((cur) => (cur ? null : anchor));
-          }}
-        >
-          <span className="cg-create-icon">+</span>
-          <span className="cg-create-label">{"Create new…"}</span>
-        </button>
-      </div>
-
-      {notice ? <span className="cg-route-nav-notice">{notice}</span> : null}
-
-      {/* CREATING PROMPTS TO SHARE, and the prompt is the whole of the done-when's third clause.
-          It offers the same two answers a new view is offered and routes the first one into the
-          SAME dialog a view or a field opens. */}
-      {created ? (
-        <div className="cg-route-share-prompt" role="status">
-          <span className="cg-route-share-line">
-            {`Saved ${created.label}. Only you can see it for now.`}
-          </span>
-          <span className="cg-form-actions">
-            <button
-              type="button"
-              className="cg-btn cg-btn-primary"
-              onClick={() => onShareRoute(created.key, created.label)}
-            >
-              Share route
-            </button>
-            <button type="button" className="cg-btn" onClick={() => onCreatedDismiss()}>
-              Keep private
-            </button>
-          </span>
-        </div>
-      ) : null}
-
-      <div className="cg-route-nav-list" {...sectionDrop(ROOT_FOLDER_ID)}>
-        {listError ? (
-          <div className="cg-route-nav-notice" role="alert">
-            <span>{listError}</span>
-            <button type="button" className="cg-link-btn" onClick={onListRetry}>Retry</button>
-          </div>
-        ) : routes.length === 0 ? (
-          <div className="cg-fold-empty">
-            No routes yet. Plan one on the map, then save it to keep it here.
-          </div>
-        ) : null}
-        {groups.map((group) => {
-          if (!group.folder) {
-            return (
-              <div key={group.pinned ? "pinned" : "root"} className="cg-route-nav-root">
-                {group.items.map(renderRoute)}
-              </div>
-            );
-          }
-          const f = group.folder;
-          const synthetic = isSyntheticFolderId(f.id);
-          const depth = nesting.depth[f.id] || 1;
-          return (
-            <div key={f.id} className="cg-route-nav-group">
-              <div
-                className={
-                  "cg-fold-head" +
-                  (foldDrag === f.id ? " is-viewdrag" : "") +
-                  (foldOver === f.id ? " is-drop-above" : "")
-                }
-                style={{ paddingLeft: 6 + (depth - 1) * 12 }}
-                draggable={!synthetic && renamingFolder !== f.id}
-                onDragStart={(e) => {
-                  e.dataTransfer.setData(RFOLD_DRAG_TYPE, f.id);
-                  e.dataTransfer.effectAllowed = "move";
-                  setFoldDrag(f.id);
-                }}
-                onDragEnd={() => {
-                  setFoldDrag("");
-                  setFoldOver("");
-                }}
-                {...(synthetic ? {} : sectionDrop(f.id))}
-              >
-                <FolderMark icon={f.icon} size={16} />
-                {renamingFolder === f.id ? (
-                  <input
-                    className="cg-input cg-fold-rename"
-                    value={draft}
-                    autoFocus
-                    aria-label={`Rename folder ${f.name}`}
-                    onChange={(e) => setDraft(e.target.value)}
-                    onBlur={commitFolderRename}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter") {
-                        e.preventDefault();
-                        commitFolderRename();
-                      }
-                      if (e.key === "Escape") {
-                        e.preventDefault();
-                        setRenamingFolder("");
-                      }
-                    }}
-                  />
-                ) : (
-                  <span className="cg-fold-name" title={f.name}>
-                    {f.name}
-                  </span>
-                )}
-                {synthetic ? null : (
-                  <button
-                    type="button"
-                    className="cg-view-more"
-                    aria-label={`Actions for folder ${f.name}`}
-                    aria-haspopup="menu"
-                    aria-expanded={folderMenu?.id === f.id}
-                    onClick={(e) => {
-                      const anchor = e.currentTarget.getBoundingClientRect();
-                      setMenu(null);
-                      setArmedDelete("");
-                      setFolderMenu((cur) =>
-                        cur && cur.id === f.id ? null : { id: f.id, anchor }
-                      );
-                    }}
-                  >
-                    {DOTS}
-                  </button>
-                )}
-              </div>
-              {group.items.length === 0 ? (
-                <div className="cg-fold-empty">Empty. Drag a route here.</div>
-              ) : (
-                group.items.map(renderRoute)
-              )}
-            </div>
-          );
-        })}
-      </div>
-
-      {menu && menuRoute ? (
-        <AnchoredOverlay
-          anchor={menu.anchor}
-          className="cg-view-menu cg-route-menu"
-          placement="bottom-end"
-          role="menu"
-          ariaLabel={`Actions for ${menuRoute.label}`}
-          onDismiss={closeMenus}
-          dataKind="route-menu"
-        >
-          <button
-            type="button"
-            role="menuitem"
-            className="cg-menu-item"
-            disabled={!menuRoute.mine}
-            title={
-              menuRoute.mine ? undefined : "Only the person who planned this route can rename it."
-            }
-            onClick={() => {
-              setDraft(menuRoute.label);
-              setRenamingKey(menuRoute.key);
-              closeMenus();
-            }}
-          >
-            <MenuLabel icon="rename" text="Rename" />
-          </button>
-          <button
-            type="button"
-            role="menuitem"
-            className="cg-menu-item"
-            onClick={() => {
-              onDuplicateRoute(menuRoute.key);
-              closeMenus();
-            }}
-          >
-            <MenuLabel icon="duplicate" text="Duplicate" />
-          </button>
-          <button
-            type="button"
-            role="menuitem"
-            className="cg-menu-item"
-            onClick={() => {
-              onShareRoute(menuRoute.key, menuRoute.label);
-              closeMenus();
-            }}
-          >
-            <MenuLabel icon={<ShareMark size={16} />} text="Share route" />
-          </button>
-          <div className="cg-menu-sep" />
-          <button
-            type="button"
-            role="menuitem"
-            className={
-              "cg-menu-item cg-menu-item--danger is-danger" +
-              (armedDelete === menuRoute.key ? " is-armed" : "")
-            }
-            disabled={!menuRoute.mine}
-            title={
-              menuRoute.mine ? undefined : "Only the person who planned this route can delete it."
-            }
-            onClick={() => {
-              if (armedDelete !== menuRoute.key) {
-                setArmedDelete(menuRoute.key);
-                return;
-              }
-              onDeleteRoute(menuRoute.key);
-              closeMenus();
-            }}
-          >
-            <MenuLabel
-              icon="trash"
-              text={
-                armedDelete === menuRoute.key
-                  ? "Delete route? The visit numbers go with it."
-                  : "Delete route"
-              }
-            />
-          </button>
-        </AnchoredOverlay>
-      ) : null}
-
-      {folderMenu && folderRow ? (
-        <AnchoredOverlay
-          anchor={folderMenu.anchor}
-          className="cg-view-menu cg-route-menu"
-          placement="bottom-end"
-          role="menu"
-          ariaLabel={`Actions for folder ${folderRow.name}`}
-          onDismiss={closeMenus}
-          dataKind="route-folder-menu"
-        >
-          <button
-            type="button"
-            role="menuitem"
-            className="cg-menu-item"
-            disabled={!nestHere.ok}
-            title={nestHere.ok ? undefined : nestHere.reason}
-            onClick={() => {
-              onFolderCreate("New folder", folderRow.id);
-              closeMenus();
-            }}
-          >
-            <MenuLabel icon={<FolderMark size={16} />} text="New folder inside" />
-          </button>
-          <button
-            type="button"
-            role="menuitem"
-            className="cg-menu-item"
-            onClick={() => {
-              setDraft(folderRow.name);
-              setRenamingFolder(folderRow.id);
-              closeMenus();
-            }}
-          >
-            <MenuLabel icon="rename" text="Rename" />
-          </button>
-          <div className="cg-menu-sep" />
-          <button
-            type="button"
-            role="menuitem"
-            className={
-              "cg-menu-item cg-menu-item--danger is-danger" +
-              (armedDelete === folderRow.id ? " is-armed" : "")
-            }
-            onClick={() => {
-              if (armedDelete !== folderRow.id) {
-                setArmedDelete(folderRow.id);
-                return;
-              }
-              onFolderDelete(folderRow.id);
-              closeMenus();
-            }}
-          >
-            <MenuLabel
-              icon="trash"
-              text={
-                armedDelete === folderRow.id
-                  ? "Delete folder? Its routes move to the top level."
-                  : "Delete folder"
-              }
-            />
-          </button>
-        </AnchoredOverlay>
-      ) : null}
-
-      {createMenu ? (
-        <AnchoredOverlay
-          anchor={createMenu}
-          className="cg-view-menu cg-create-flyout cg-route-create"
-          placement="bottom-start"
-          role="menu"
-          ariaLabel="Create"
-          onDismiss={() => setCreateMenu(null)}
-          dataKind="route-create-new"
-        >
-          <button
-            type="button"
-            role="menuitem"
-            className="cg-menu-item cg-create-row"
-            onClick={() => {
-              onFolderCreate("New folder", null);
-              setCreateMenu(null);
-            }}
-          >
-            <MenuLabel icon={<FolderMark size={16} />} text="Folder" />
-          </button>
-          <div className="cg-menu-sep" />
-          <button
-            type="button"
-            role="menuitem"
-            className="cg-menu-item cg-create-row"
-            onClick={() => {
-              onCreateRoute();
-              setCreateMenu(null);
-            }}
-          >
-            <MenuLabel icon="addEnd" text="Route" />
-          </button>
-          <p className="cg-create-note">
-            A route starts private. After you save it you are asked whether to share it, and you
-            can change that later from Share route.
-          </p>
-        </AnchoredOverlay>
-      ) : null}
-    </nav>
-  );
-}