@betterportal/config-manager 10.6.31 → 10.6.33

package/lib/plugins/service-betterportal-config-manager/menuEditor.js

@@ -1,6 +1,7 @@
-import { htmlResponse, jsonResponse, uuidv7 } from "@betterportal/framework";
-import { getManifestCache } from "./syncApi.js";
+import { eventObservability, menuItemVisible, htmlResponse, jsonResponse, uuidv7 } from "@betterportal/framework";
+import { getManifestCache, injectResolvedServicePaths } from "./syncApi.js";
 import { isApiRoute, isMenuRouteExcluded } from "./routeMounts.js";
+import { editAppRows, readApp } from "./appQueries.js";
 const API_BASE = "/.well-known/bp/admin";
 // Parse-only base for relative request URLs. Never emit this origin.
 const RELATIVE_URL_PARSE_BASE = "http://betterportal.invalid";
@@ -101,7 +102,10 @@ function lookupServiceViews(serviceId) {
     }));
 }
 function rowAttrs(item, depth, editing = false) {
-    return `id="bp-menu-row-${item.id}" draggable="${editing ? "false" : "true"}" data-bp-drag-item="${item.id}" data-bp-drag-type="${item.type}" data-bp-drag-depth="${depth}"${editing ? " data-bp-menu-editing" : ""} style="padding-left: ${depth * 1.5 + 1}rem;"`;
+    return `hx-indicator:inherited="#bp-menu-loading-${item.id}" hx-sync:inherited="closest li:queue" id="bp-menu-row-${item.id}" draggable="${editing ? "false" : "true"}" data-bp-drag-item="${item.id}" data-bp-drag-type="${item.type}" data-bp-drag-depth="${depth}"${editing ? " data-bp-menu-editing" : ""} style="padding-left: ${depth * 1.5 + 1}rem;"`;
+}
+function rowLoader(item) {
+    return `<div id="bp-menu-loading-${item.id}" class="htmx-indicator bp-menu-loading" role="status"><span class="spinner-border spinner-border-sm" aria-hidden="true"></span> Updating…</div>`;
 }
 function editableTitleText(item, route) {
     if (item.type === "section")
@@ -124,12 +128,12 @@ function titleDisplayHtml(item, route, appId) {
     style="border:1px solid var(--bs-border-color); border-radius:0.375rem; padding:0.25rem 0.6rem; background:transparent; cursor:text; text-align:left; min-width:200px; font-weight:500;"
     hx-get="${API_BASE}/menu-editor/item?appId=${encodeURIComponent(appId)}&itemId=${encodeURIComponent(item.id)}&mode=edit-title"
     hx-target="#bp-menu-title-${item.id}"
-    hx-swap="outerHTML"
+    hx-swap="outerHTML settle:0"
     title="Click to rename">${escapeHtml(titleText)}</button>`;
 }
 function titleEditorHtml(item, route, appId) {
     return `<form id="bp-menu-title-${item.id}" data-bp-menu-editing
-    hx-post="${API_BASE}/menu-editor/save-title" hx-target="#bp-menu-title-${item.id}" hx-swap="outerHTML"
+    hx-post="${API_BASE}/menu-editor/save-title" hx-target="#bp-menu-row-${item.id}" hx-swap="outerHTML settle:0"
     class="d-flex align-items-center gap-1 flex-grow-1 m-0">
     <input type="hidden" name="appId" value="${escapeHtml(appId)}" />
     <input type="hidden" name="itemId" value="${escapeHtml(item.id)}" />
@@ -137,7 +141,7 @@ function titleEditorHtml(item, route, appId) {
     <button type="submit" class="btn btn-sm btn-success" title="Save">OK</button>
     <button type="button" class="btn btn-sm btn-outline-secondary" title="Cancel"
       hx-get="${API_BASE}/menu-editor/item?appId=${encodeURIComponent(appId)}&itemId=${encodeURIComponent(item.id)}&mode=display-title"
-      hx-target="#bp-menu-title-${item.id}" hx-swap="outerHTML">X</button>
+      hx-target="#bp-menu-title-${item.id}" hx-swap="outerHTML settle:0">X</button>
   </form>`;
 }
 function subLineHtml(item, route, config, appId) {
@@ -154,7 +158,7 @@ function subLineHtml(item, route, config, appId) {
       <button type="button" class="btn btn-sm btn-link p-0"
         hx-get="${API_BASE}/menu-editor/item?appId=${encodeURIComponent(appId)}&itemId=${encodeURIComponent(item.id)}&mode=edit-external"
         hx-target="#bp-menu-row-${item.id}"
-        hx-swap="outerHTML"
+        hx-swap="outerHTML settle:0"
         title="Edit URL">Edit</button>
     </div>`;
     }
@@ -173,12 +177,12 @@ function subLineHtml(item, route, config, appId) {
     <button type="button" class="btn btn-sm btn-link p-0 ms-1"
       hx-get="${API_BASE}/menu-editor/item?appId=${encodeURIComponent(appId)}&itemId=${encodeURIComponent(item.id)}&mode=edit-link"
       hx-target="#bp-menu-row-${item.id}"
-      hx-swap="outerHTML"
+      hx-swap="outerHTML settle:0"
       title="Edit URL & paths">Edit</button>
   </div>`;
 }
 function actionButtons(item, appId) {
-    const btn = (action, label, btnClass, title) => `<form hx-post="${API_BASE}/menu-editor/${action}" hx-target="#bp-menu-editor" hx-swap="outerHTML" class="d-inline m-0">
+    const btn = (action, label, btnClass, title) => `<form hx-post="${API_BASE}/menu-editor/${action}" hx-target="#bp-menu-editor" hx-swap="outerHTML settle:0" class="d-inline m-0">
       <input type="hidden" name="appId" value="${escapeHtml(appId)}" />
       <input type="hidden" name="itemId" value="${escapeHtml(item.id)}" />
       <button type="submit" class="btn btn-sm ${btnClass}" title="${escapeHtml(title)}">${label}</button>
@@ -192,13 +196,52 @@ function actionButtons(item, appId) {
     ${btn("remove", "x", "btn-outline-danger", "Remove")}
   </div>`;
 }
-function renderRow(item, depth, mode, config, appDef, appId) {
+function visibilityControls(item) {
+    const options = [["auto", "Automatic"], ["show", "Everyone"], ["hide-unauthenticated", "Signed in"],
+        ["show-unauthenticated", "Only signed out"], ["hide-unauthorized", "Has permission"]];
+    return `<fieldset class="mb-0"><legend class="small mb-1">Audience</legend>
+    <div class="d-flex flex-wrap gap-1">${options.map(([value, label]) => {
+        const id = `bp-audience-${item.id}-${value}`;
+        return `<input type="radio" class="btn-check" name="authStatus" id="${id}" value="${value}"${(item.authStatus ?? "auto") === value ? " checked" : ""} />
+        <label class="btn btn-sm btn-outline-primary" style="--bs-btn-color:var(--bs-body-color)" for="${id}">${label}</label>`;
+    }).join("")}</div>${item.type === "group" ? `<div class="small text-secondary mt-1">Saving this audience also updates all children, including nested groups.</div>` : ""}</fieldset>
+    ${item.type === "link" ? `<fieldset class="mb-0"><legend class="small mb-1">When service is unavailable</legend>
+      ${[["show", "Show warning"], ["hide", "Hide"]].map(([value, label]) => `<label class="form-check form-check-inline small mb-0">
+        <input type="radio" class="form-check-input" name="serviceStatus" value="${value}"${(item.serviceStatus ?? "show") === value ? " checked" : ""} />${label}</label>`).join("")}</fieldset>` : ""}
+    ${item.type !== "link" && item.rolesAnyOf?.length ? `<div class="small text-warning">Legacy role restriction: ${escapeHtml(item.rolesAnyOf.join(", "))}.
+      <label><input type="checkbox" name="clearRoleRestriction" value="true" /> Remove this restriction</label></div>` : ""}`;
+}
+function accessSummary(config, appDef, item, accessApp) {
+    if (item.type !== "link")
+        return item.type === "group" ? "Hidden when it has no visible children." : "Audience controls visibility; no linked route permissions.";
+    const app = accessApp ?? injectResolvedServicePaths({ tenants: config.tenants, apps: [appDef], managementOrigins: [] }).apps[0];
+    const route = app.routes.find(route => route.id === item.routeId);
+    if (!route || route.authRequired === undefined || route.menuPermissions === undefined)
+        return "Route access unknown until its service syncs. Automatic visibility stays hidden.";
+    if (!route.authRequired)
+        return "Public route. Access is derived automatically.";
+    if (!route.menuPermissions.length)
+        return "Requires sign-in. No additional route permissions.";
+    const aliases = Object.fromEntries(config.tenants.flatMap((tenant) => tenant.services.map((service) => [service.id, service.serviceId ?? service.id])));
+    for (const service of config.platformServices ?? [])
+        aliases[service.id] = service.serviceId ?? service.id;
+    for (const activation of config.sharedServiceActivations ?? []) {
+        const service = config.sharedServiceCatalog?.find((candidate) => candidate.id === activation.sharedServiceId);
+        if (service)
+            aliases[activation.id] = service.serviceId ?? service.id;
+    }
+    const roles = (app.auth?.roles ?? []).filter(role => role.id !== "*" && menuItemVisible({ authStatus: "hide-unauthorized" }, route, { status: "authenticated", permissions: role.permissions }, aliases));
+    const requirements = route.menuPermissions.map(requirement => `${requirement.viewId}: ${requirement.permissions.join(", ")}`).join("; ");
+    return `Route permissions: ${escapeHtml(requirements)}. ${roles.length ? `Roles with access: ${escapeHtml(roles.map(role => role.title).join(", "))}.` : "Access may require a combination of assigned roles."}`;
+}
+function renderRow(item, depth, mode, config, appDef, appId, accessApp) {
     const routes = getRoutes(appDef);
     const route = item.routeId ? routes.find((r) => r.id === item.routeId) ?? null : null;
     const typeBadgeClass = item.type === "group" ? "text-bg-warning" : item.type === "external" ? "text-bg-info" : item.type === "link" ? "text-bg-primary" : "text-bg-secondary";
     if (mode === "edit-external" && item.type === "external") {
-        return `<li ${rowAttrs(item, depth, true)} class="list-group-item">
-      <form hx-post="${API_BASE}/menu-editor/save-external" hx-target="#bp-menu-row-${item.id}" hx-swap="outerHTML"
+        return `<li ${rowAttrs(item, depth, true)} class="list-group-item position-relative">
+    ${rowLoader(item)}
+      <form hx-post="${API_BASE}/menu-editor/save-external" hx-target="#bp-menu-row-${item.id}" hx-swap="outerHTML settle:0"
         class="d-flex flex-column gap-2">
         <div class="d-flex align-items-center gap-2">
           <span class="badge ${typeBadgeClass}">${escapeHtml(item.type)}</span>
@@ -208,38 +251,19 @@ function renderRow(item, depth, mode, config, appDef, appId) {
         <input type="hidden" name="itemId" value="${escapeHtml(item.id)}" />
         <label class="form-label small mb-0">URL</label>
         <input type="url" name="href" class="form-control form-control-sm" value="${escapeHtml(item.href ?? "")}" placeholder="https://..." required />
-        <div class="row g-2">
-        <div class="col-md-6">
-          <label class="form-label small mb-0">Unavailable service</label>
-          <select name="serviceStatus" class="form-select form-select-sm">
-            <option value="show"${item.serviceStatus !== "hide" ? " selected" : ""}>Show with warning</option>
-            <option value="hide"${item.serviceStatus === "hide" ? " selected" : ""}>Hide</option>
-          </select>
-        </div>
-        <div class="col-md-6">
-          <label class="form-label small mb-0">Required roles (any, comma separated)</label>
-          <input name="rolesAnyOf" class="form-control form-control-sm" value="${escapeHtml((item.rolesAnyOf ?? []).join(", "))}" />
-          <label class="form-label small mb-0">Authorization</label>
-          <select name="authStatus" class="form-select form-select-sm">
-            <option value="auto"${!item.authStatus || item.authStatus === "auto" ? " selected" : ""}>Automatic (route permissions)</option>
-            <option value="show"${item.authStatus === "show" ? " selected" : ""}>Always show</option>
-            <option value="hide-unauthenticated"${item.authStatus === "hide-unauthenticated" ? " selected" : ""}>Hide when signed out</option>
-            <option value="hide-unauthorized"${item.authStatus === "hide-unauthorized" ? " selected" : ""}>Hide when unauthorized</option>
-            <option value="show-unauthenticated"${item.authStatus === "show-unauthenticated" ? " selected" : ""}>Show only when signed out</option>
-          </select>
-        </div>
-      </div>
+        ${visibilityControls(item)}
       <div class="d-flex gap-2 justify-content-end">
           <button type="submit" class="btn btn-sm btn-success">OK Save</button>
           <button type="button" class="btn btn-sm btn-outline-secondary"
             hx-get="${API_BASE}/menu-editor/item?appId=${encodeURIComponent(appId)}&itemId=${encodeURIComponent(item.id)}&mode=display"
-            hx-target="#bp-menu-row-${item.id}" hx-swap="outerHTML">X Cancel</button>
+            hx-target="#bp-menu-row-${item.id}" hx-swap="outerHTML settle:0">X Cancel</button>
         </div>
       </form>
     </li>`;
     }
     // display mode
-    return `<li ${rowAttrs(item, depth)} class="list-group-item">
+    return `<li ${rowAttrs(item, depth)} class="list-group-item position-relative">
+    ${rowLoader(item)}
     <div class="d-flex align-items-start gap-3">
       <span class="text-secondary" style="cursor:grab; padding-top:0.3rem; user-select:none; font-size:0.75rem; line-height:1;" title="Drag to reorder">drag</span>
       <div class="d-flex flex-column gap-1 flex-grow-1 min-width-0">
@@ -248,21 +272,13 @@ function renderRow(item, depth, mode, config, appDef, appId) {
           ${titleDisplayHtml(item, route, appId)}
         </div>
         ${subLineHtml(item, route, config, appId)}
-        <details><summary class="small">Visibility</summary>
-          <form hx-post="${API_BASE}/menu-editor/save-visibility" hx-target="#bp-menu-editor" hx-swap="outerHTML" class="d-flex gap-2 flex-wrap">
-            <input type="hidden" name="appId" value="${escapeHtml(appId)}" />
-            <input type="hidden" name="itemId" value="${escapeHtml(item.id)}" />
-            <label class="small">Audience
-              <select name="authStatus" class="form-select form-select-sm">
-                ${[["auto", "Automatic (route permissions)"], ["show", "Always show"], ["show-unauthenticated", "Only signed out"], ["hide-unauthenticated", "Only signed in"], ["hide-unauthorized", "Only with permission"]].map(([value, label]) => `<option value="${value}"${(item.authStatus ?? "auto") === value ? " selected" : ""}>${label}</option>`).join("")}
-              </select>
-            </label>
-            <label class="small">Required roles (any, comma separated)
-              <input name="rolesAnyOf" class="form-control form-control-sm" value="${escapeHtml((item.rolesAnyOf ?? []).join(", "))}" />
-            </label>
-            <button type="submit" class="btn btn-sm btn-primary">Save visibility</button>
-          </form>
-        </details>
+        <div class="small text-body-secondary">${accessSummary(config, appDef, item, accessApp)}</div>
+        <form hx-post="${API_BASE}/menu-editor/save-visibility" hx-target="${item.type === "group" ? "#bp-menu-editor" : `#bp-menu-row-${item.id}`}" hx-swap="outerHTML settle:0" class="d-flex flex-column gap-2 mt-2">
+          <input type="hidden" name="appId" value="${escapeHtml(appId)}" />
+          <input type="hidden" name="itemId" value="${escapeHtml(item.id)}" />
+          ${visibilityControls(item)}
+          <div><button type="submit" class="btn btn-sm btn-primary">Save visibility</button></div>
+        </form>
       </div>
       ${actionButtons(item, appId)}
     </div>
@@ -295,8 +311,9 @@ async function renderEditLink(item, route, depth, config, appDef, appId) {
         ...services.map((s) => `<option value="${escapeHtml(s.id)}"${s.id === route?.serviceId ? " selected" : ""}>${escapeHtml(s.title)}</option>`)
     ].join("");
     const viewOpts = renderViewOptions(views, route?.viewId ?? "");
-    return `<li ${rowAttrs(item, depth, true)} class="list-group-item">
-    <form hx-post="${API_BASE}/menu-editor/save-link" hx-target="#bp-menu-row-${item.id}" hx-swap="outerHTML"
+    return `<li ${rowAttrs(item, depth, true)} class="list-group-item position-relative">
+    ${rowLoader(item)}
+    <form hx-post="${API_BASE}/menu-editor/save-link" hx-target="#bp-menu-row-${item.id}" hx-swap="outerHTML settle:0"
       class="d-flex flex-column gap-2">
       <div class="d-flex align-items-center gap-2">
         <span class="badge ${typeBadgeClass}">link</span>
@@ -320,7 +337,7 @@ async function renderEditLink(item, route, depth, config, appDef, appId) {
           <select id="bp-views-${item.id}" name="viewId" class="form-select form-select-sm" required
             hx-get="${API_BASE}/menu-editor/default-target"
             hx-target="#bp-paths-${item.id}"
-            hx-swap="outerHTML"
+            hx-swap="outerHTML settle:0"
             hx-trigger="change"
             hx-include="closest form">${viewOpts}</select>
         </div>
@@ -338,42 +355,22 @@ async function renderEditLink(item, route, depth, config, appDef, appId) {
         </div>
       </div>
       ${renderPathFields(item.id, route?.path ?? "", route?.targetPath ?? "")}
-      <div class="row g-2">
-        <div class="col-md-6">
-          <label class="form-label small mb-0">Unavailable service</label>
-          <select name="serviceStatus" class="form-select form-select-sm">
-            <option value="show"${item.serviceStatus !== "hide" ? " selected" : ""}>Show with warning</option>
-            <option value="hide"${item.serviceStatus === "hide" ? " selected" : ""}>Hide</option>
-          </select>
-        </div>
-        <div class="col-md-6">
-          <label class="form-label small mb-0">Required roles (any, comma separated)</label>
-          <input name="rolesAnyOf" class="form-control form-control-sm" value="${escapeHtml((item.rolesAnyOf ?? []).join(", "))}" />
-          <label class="form-label small mb-0">Authorization</label>
-          <select name="authStatus" class="form-select form-select-sm">
-            <option value="auto"${!item.authStatus || item.authStatus === "auto" ? " selected" : ""}>Automatic (route permissions)</option>
-            <option value="show"${item.authStatus === "show" ? " selected" : ""}>Always show</option>
-            <option value="hide-unauthenticated"${item.authStatus === "hide-unauthenticated" ? " selected" : ""}>Hide when signed out</option>
-            <option value="hide-unauthorized"${item.authStatus === "hide-unauthorized" ? " selected" : ""}>Hide when unauthorized</option>
-            <option value="show-unauthenticated"${item.authStatus === "show-unauthenticated" ? " selected" : ""}>Show only when signed out</option>
-          </select>
-        </div>
-      </div>
+      ${visibilityControls(item)}
       <div class="d-flex gap-2 justify-content-end">
         <button type="submit" class="btn btn-sm btn-success">OK Save</button>
         <button type="button" class="btn btn-sm btn-outline-secondary"
           hx-get="${API_BASE}/menu-editor/item?appId=${encodeURIComponent(appId)}&itemId=${encodeURIComponent(item.id)}&mode=display"
-          hx-target="#bp-menu-row-${item.id}" hx-swap="outerHTML">X Cancel</button>
+          hx-target="#bp-menu-row-${item.id}" hx-swap="outerHTML settle:0">X Cancel</button>
       </div>
       <div class="small text-secondary">Path/target/service/view edits update the underlying route - affects any other menu items referencing it.</div>
     </form>
   </li>`;
 }
-function renderTree(items, depth, config, appDef, appId) {
+function renderTree(items, depth, config, appDef, appId, accessApp = injectResolvedServicePaths({ tenants: config.tenants, apps: [appDef], managementOrigins: [] }).apps[0]) {
     return items.map((item) => {
-        const row = renderRow(item, depth, "display", config, appDef, appId);
+        const row = renderRow(item, depth, "display", config, appDef, appId, accessApp);
         const children = item.type === "group" && item.children && item.children.length > 0
-            ? renderTree(item.children, depth + 1, config, appDef, appId)
+            ? renderTree(item.children, depth + 1, config, appDef, appId, accessApp)
             : "";
         return row + children;
     }).join("");
@@ -401,7 +398,7 @@ function renderAddForms(appId, routes, groups) {
       <div class="card">
         <div class="card-header"><strong>Add View Link</strong></div>
         <div class="card-body">
-          <form hx-post="${API_BASE}/menu-editor/add" hx-target="#bp-menu-editor" hx-swap="outerHTML">
+          <form hx-post="${API_BASE}/menu-editor/add" hx-target="#bp-menu-editor" hx-swap="outerHTML settle:0">
             <input type="hidden" name="appId" value="${escapeHtml(appId)}" />
             <input type="hidden" name="type" value="link" />
             <div class="mb-2">
@@ -428,7 +425,7 @@ function renderAddForms(appId, routes, groups) {
       <div class="card">
         <div class="card-header"><strong>Add External Link</strong></div>
         <div class="card-body">
-          <form hx-post="${API_BASE}/menu-editor/add" hx-target="#bp-menu-editor" hx-swap="outerHTML">
+          <form hx-post="${API_BASE}/menu-editor/add" hx-target="#bp-menu-editor" hx-swap="outerHTML settle:0">
             <input type="hidden" name="appId" value="${escapeHtml(appId)}" />
             <input type="hidden" name="type" value="external" />
             <div class="mb-2">
@@ -452,7 +449,7 @@ function renderAddForms(appId, routes, groups) {
       <div class="card">
         <div class="card-header"><strong>Add Group</strong></div>
         <div class="card-body">
-          <form hx-post="${API_BASE}/menu-editor/add" hx-target="#bp-menu-editor" hx-swap="outerHTML">
+          <form hx-post="${API_BASE}/menu-editor/add" hx-target="#bp-menu-editor" hx-swap="outerHTML settle:0">
             <input type="hidden" name="appId" value="${escapeHtml(appId)}" />
             <input type="hidden" name="type" value="group" />
             <div class="mb-2">
@@ -478,10 +475,14 @@ function renderEditor(config, appDef, appId) {
         : renderTree(menu, 0, config, appDef, appId);
     const groups = collectGroups(menu);
     return `<div id="bp-menu-editor" data-bp-app-id="${escapeHtml(appId)}">
+    <style>
+      .bp-menu-loading { display: none; }
+      .bp-menu-loading.htmx-request { display: flex; position: absolute; inset: 0; z-index: 5; align-items: center; justify-content: center; gap: .5rem; background: var(--bs-body-bg); opacity: .9; }
+    </style>
     <form id="bp-drag-move-form" style="display:none"
       hx-post="${API_BASE}/menu-editor/move-after"
       hx-target="#bp-menu-editor"
-      hx-swap="outerHTML">
+      hx-swap="outerHTML settle:0">
       <input type="hidden" name="appId" value="${escapeHtml(appId)}" />
       <input type="hidden" name="itemId" />
       <input type="hidden" name="anchorId" />
@@ -492,9 +493,25 @@ function renderEditor(config, appDef, appId) {
   </div>`;
 }
 // -- Endpoint registration --------------------------------------------
-export function registerMenuEditorRoutes(app, store) {
-    const respondEditor = async (appId) => {
-        const config = await store.loadConfig();
+export function registerMenuEditorRoutes(app, store, database) {
+    const read = async (appId) => {
+        if (!database)
+            return store.loadConfig();
+        return readApp(database, appId);
+    };
+    const post = (path, action) => {
+        app.post(`${API_BASE}/menu-editor/${path}`, async (event) => {
+            const form = await readFormBody(event);
+            if (database)
+                return editAppRows(database, form.appId, eventObservability(event), data => action(form, data));
+            const config = await store.loadConfig();
+            const response = await action(form, config);
+            if (response.ok)
+                await store.saveConfig(config);
+            return response;
+        });
+    };
+    const respondEditor = async (config, appId) => {
         const appDef = getApp(config, appId);
         if (!appDef)
             return htmlResponse(`<div class="alert alert-danger">App not found</div>`, 200, "text/html; mode=fragment");
@@ -502,8 +519,7 @@ export function registerMenuEditorRoutes(app, store) {
             "HX-Trigger": "bp:menu-changed"
         });
     };
-    const respondRow = async (appId, itemId, mode) => {
-        const config = await store.loadConfig();
+    const respondRow = async (config, appId, itemId, mode) => {
         const appDef = getApp(config, appId);
         if (!appDef)
             return htmlResponse("", 200, "text/html; mode=fragment");
@@ -547,18 +563,16 @@ export function registerMenuEditorRoutes(app, store) {
         const appId = url.searchParams.get("appId") ?? "";
         if (!appId)
             return htmlResponse(`<div class="alert alert-secondary">Select an app</div>`, 200, "text/html; mode=fragment");
-        return respondEditor(appId);
+        return respondEditor(await read(appId), appId);
     });
     app.get(`${API_BASE}/menu-editor/item`, async (event) => {
         const url = new URL(event.req.url ?? "", RELATIVE_URL_PARSE_BASE);
         const appId = url.searchParams.get("appId") ?? "";
         const itemId = url.searchParams.get("itemId") ?? "";
         const mode = (url.searchParams.get("mode") ?? "display");
-        return respondRow(appId, itemId, mode);
+        return respondRow(await read(appId), appId, itemId, mode);
     });
-    app.post(`${API_BASE}/menu-editor/save-visibility`, async (event) => {
-        const f = await readFormBody(event);
-        const config = await store.loadConfig();
+    post("save-visibility", async (f, config) => {
         const appDef = getApp(config, f.appId);
         if (!appDef)
             return jsonResponse({ error: "App not found" }, 404);
@@ -568,14 +582,31 @@ export function registerMenuEditorRoutes(app, store) {
         if (!["auto", "show", "show-unauthenticated", "hide-unauthenticated", "hide-unauthorized"].includes(f.authStatus)) {
             return jsonResponse({ error: "Invalid visibility" }, 400);
         }
-        found.item.authStatus = f.authStatus;
-        found.item.rolesAnyOf = [...new Set((f.rolesAnyOf ?? "").split(",").map(role => role.trim()).filter(Boolean))];
-        await store.saveConfig(config);
-        return respondEditor(f.appId);
+        const audience = f.authStatus;
+        if (found.item.type === "group") {
+            const applyAudience = (items) => {
+                for (const item of items) {
+                    item.authStatus = audience;
+                    if (item.type === "link")
+                        delete item.rolesAnyOf;
+                    if (item.type === "group")
+                        applyAudience(item.children ?? []);
+                }
+            };
+            applyAudience(found.item.children ?? []);
+        }
+        found.item.authStatus = audience;
+        if (found.item.type === "link")
+            found.item.serviceStatus = f.serviceStatus === "hide" ? "hide" : "show";
+        if (found.item.type === "link" || f.clearRoleRestriction === "true")
+            delete found.item.rolesAnyOf;
+        if (found.item.type === "group")
+            return respondEditor(config, f.appId);
+        const response = await respondRow(config, f.appId, f.itemId, "display");
+        response.headers.set("HX-Trigger", "bp:menu-changed");
+        return response;
     });
-    app.post(`${API_BASE}/menu-editor/save-title`, async (event) => {
-        const f = await readFormBody(event);
-        const config = await store.loadConfig();
+    post("save-title", async (f, config) => {
         const appDef = getApp(config, f.appId);
         if (!appDef)
             return jsonResponse({ error: "App not found" }, 404);
@@ -584,23 +615,11 @@ export function registerMenuEditorRoutes(app, store) {
         if (found)
             found.item.title = f.title || undefined;
         appDef.menu = menu;
-        await store.saveConfig(config);
-        // Return single row + HX-Trigger to refresh sidebar nav
-        const config2 = await store.loadConfig();
-        const appDef2 = getApp(config2, f.appId);
-        const found2 = appDef2 ? locate(getMenu(appDef2), f.itemId) : null;
-        if (!appDef2 || !found2)
-            return htmlResponse("", 200, "text/html; mode=fragment");
-        const route = found2.item.routeId
-            ? (appDef2.routes ?? []).find((candidate) => candidate.id === found2.item.routeId) ?? null
-            : null;
-        return htmlResponse(titleDisplayHtml(found2.item, route, f.appId), 200, "text/html; mode=fragment", {
-            "HX-Trigger": "bp:menu-changed"
-        });
+        const response = await respondRow(config, f.appId, f.itemId, "display");
+        response.headers.set("HX-Trigger", "bp:menu-changed");
+        return response;
     });
-    app.post(`${API_BASE}/menu-editor/save-link`, async (event) => {
-        const f = await readFormBody(event);
-        const config = await store.loadConfig();
+    post("save-link", async (f, config) => {
         const appDef = getApp(config, f.appId);
         if (!appDef)
             return jsonResponse({ error: "App not found" }, 404);
@@ -610,7 +629,8 @@ export function registerMenuEditorRoutes(app, store) {
             return htmlResponse(`<div class="alert alert-danger">Item not found</div>`, 200, "text/html; mode=fragment");
         }
         found.item.title = f.title || undefined;
-        found.item.rolesAnyOf = (f.rolesAnyOf ?? "").split(",").map(role => role.trim()).filter(Boolean);
+        if (found.item.type === "link" || f.clearRoleRestriction === "true")
+            delete found.item.rolesAnyOf;
         found.item.serviceStatus = f.serviceStatus === "hide" ? "hide" : "show";
         found.item.authStatus = ["auto", "show", "hide-unauthenticated", "hide-unauthorized", "show-unauthenticated"].includes(f.authStatus) ? f.authStatus : "auto";
         const route = (appDef.routes ?? []).find((r) => r.id === found.item.routeId);
@@ -628,8 +648,7 @@ export function registerMenuEditorRoutes(app, store) {
             return jsonResponse({ error: "Route cannot be added to the menu" }, 400);
         }
         appDef.menu = menu;
-        await store.saveConfig(config);
-        return respondRow(f.appId, f.itemId, "display").then((r) => {
+        return respondRow(config, f.appId, f.itemId, "display").then((r) => {
             const headers = new Headers(r.headers);
             headers.set("HX-Trigger", "bp:menu-changed");
             return new Response(r.body, { status: r.status, headers });
@@ -656,7 +675,7 @@ export function registerMenuEditorRoutes(app, store) {
         if (url.searchParams.get("autoSetPaths") === "true" && serviceId && viewId) {
             const views = lookupServiceViews(serviceId);
             targetPath = views.find((v) => v.viewId === viewId)?.path ?? "";
-            const config = await store.loadConfig();
+            const config = await read(appId);
             const appDef = getApp(config, appId);
             const assignedRoute = (appDef?.routes ?? []).find((route) => route.kind !== "api" && route.serviceId === serviceId && route.viewId === viewId);
             if (assignedRoute) {
@@ -666,16 +685,15 @@ export function registerMenuEditorRoutes(app, store) {
         }
         return htmlResponse(renderPathFields(itemId, path, targetPath), 200, "text/html; mode=fragment");
     });
-    app.post(`${API_BASE}/menu-editor/save-external`, async (event) => {
-        const f = await readFormBody(event);
-        const config = await store.loadConfig();
+    post("save-external", async (f, config) => {
         const appDef = getApp(config, f.appId);
         if (!appDef)
             return jsonResponse({ error: "App not found" }, 404);
         const menu = getMenu(appDef);
         const found = locate(menu, f.itemId);
         if (found) {
-            found.item.rolesAnyOf = (f.rolesAnyOf ?? "").split(",").map(role => role.trim()).filter(Boolean);
+            if (found.item.type === "link" || f.clearRoleRestriction === "true")
+                delete found.item.rolesAnyOf;
             found.item.authStatus = ["auto", "show", "hide-unauthenticated", "hide-unauthorized", "show-unauthenticated"].includes(f.authStatus) ? f.authStatus : "auto";
             found.item.href = f.href || "";
             if (f.title !== undefined && f.title !== "")
@@ -685,17 +703,14 @@ export function registerMenuEditorRoutes(app, store) {
             return jsonResponse({ error: "Route cannot be added to the menu" }, 400);
         }
         appDef.menu = menu;
-        await store.saveConfig(config);
-        return respondRow(f.appId, f.itemId, "display").then((r) => {
+        return respondRow(config, f.appId, f.itemId, "display").then((r) => {
             // Add HX-Trigger to existing response
             const headers = new Headers(r.headers);
             headers.set("HX-Trigger", "bp:menu-changed");
             return new Response(r.body, { status: r.status, headers });
         });
     });
-    app.post(`${API_BASE}/menu-editor/add`, async (event) => {
-        const f = await readFormBody(event);
-        const config = await store.loadConfig();
+    post("add", async (f, config) => {
         const appDef = getApp(config, f.appId);
         if (!appDef)
             return jsonResponse({ error: "App not found" }, 404);
@@ -727,12 +742,9 @@ export function registerMenuEditorRoutes(app, store) {
             menu.push(newItem);
         }
         appDef.menu = menu;
-        await store.saveConfig(config);
-        return respondEditor(f.appId);
+        return respondEditor(config, f.appId);
     });
-    app.post(`${API_BASE}/menu-editor/remove`, async (event) => {
-        const f = await readFormBody(event);
-        const config = await store.loadConfig();
+    post("remove", async (f, config) => {
         const appDef = getApp(config, f.appId);
         if (!appDef)
             return jsonResponse({ error: "App not found" }, 404);
@@ -741,12 +753,9 @@ export function registerMenuEditorRoutes(app, store) {
         if (found)
             found.parent.splice(found.index, 1);
         appDef.menu = menu;
-        await store.saveConfig(config);
-        return respondEditor(f.appId);
+        return respondEditor(config, f.appId);
     });
-    app.post(`${API_BASE}/menu-editor/toggle`, async (event) => {
-        const f = await readFormBody(event);
-        const config = await store.loadConfig();
+    post("toggle", async (f, config) => {
         const appDef = getApp(config, f.appId);
         if (!appDef)
             return jsonResponse({ error: "App not found" }, 404);
@@ -755,12 +764,9 @@ export function registerMenuEditorRoutes(app, store) {
         if (found)
             found.item.enabled = !found.item.enabled;
         appDef.menu = menu;
-        await store.saveConfig(config);
-        return respondEditor(f.appId);
+        return respondEditor(config, f.appId);
     });
-    app.post(`${API_BASE}/menu-editor/toggle-expanded`, async (event) => {
-        const f = await readFormBody(event);
-        const config = await store.loadConfig();
+    post("toggle-expanded", async (f, config) => {
         const appDef = getApp(config, f.appId);
         if (!appDef)
             return jsonResponse({ error: "App not found" }, 404);
@@ -770,12 +776,9 @@ export function registerMenuEditorRoutes(app, store) {
             found.item.defaultExpanded = !found.item.defaultExpanded;
         }
         appDef.menu = menu;
-        await store.saveConfig(config);
-        return respondEditor(f.appId);
+        return respondEditor(config, f.appId);
     });
-    app.post(`${API_BASE}/menu-editor/move-up`, async (event) => {
-        const f = await readFormBody(event);
-        const config = await store.loadConfig();
+    post("move-up", async (f, config) => {
         const appDef = getApp(config, f.appId);
         if (!appDef)
             return jsonResponse({ error: "App not found" }, 404);
@@ -786,12 +789,9 @@ export function registerMenuEditorRoutes(app, store) {
             found.parent.splice(found.index - 1, 0, it);
         }
         appDef.menu = menu;
-        await store.saveConfig(config);
-        return respondEditor(f.appId);
+        return respondEditor(config, f.appId);
     });
-    app.post(`${API_BASE}/menu-editor/move-down`, async (event) => {
-        const f = await readFormBody(event);
-        const config = await store.loadConfig();
+    post("move-down", async (f, config) => {
         const appDef = getApp(config, f.appId);
         if (!appDef)
             return jsonResponse({ error: "App not found" }, 404);
@@ -802,12 +802,9 @@ export function registerMenuEditorRoutes(app, store) {
             found.parent.splice(found.index + 1, 0, it);
         }
         appDef.menu = menu;
-        await store.saveConfig(config);
-        return respondEditor(f.appId);
+        return respondEditor(config, f.appId);
     });
-    app.post(`${API_BASE}/menu-editor/move-in`, async (event) => {
-        const f = await readFormBody(event);
-        const config = await store.loadConfig();
+    post("move-in", async (f, config) => {
         const appDef = getApp(config, f.appId);
         if (!appDef)
             return jsonResponse({ error: "App not found" }, 404);
@@ -822,12 +819,9 @@ export function registerMenuEditorRoutes(app, store) {
             }
         }
         appDef.menu = menu;
-        await store.saveConfig(config);
-        return respondEditor(f.appId);
+        return respondEditor(config, f.appId);
     });
-    app.post(`${API_BASE}/menu-editor/move-after`, async (event) => {
-        const f = await readFormBody(event);
-        const config = await store.loadConfig();
+    post("move-after", async (f, config) => {
         const appDef = getApp(config, f.appId);
         if (!appDef)
             return jsonResponse({ error: "App not found" }, 404);
@@ -836,10 +830,10 @@ export function registerMenuEditorRoutes(app, store) {
         const anchorId = f.anchorId || "";
         const targetDepth = Math.max(0, parseInt(f.targetDepth ?? "0", 10) || 0);
         if (!srcId || srcId === anchorId)
-            return respondEditor(f.appId);
+            return respondEditor(config, f.appId);
         const src = locate(menu, srcId);
         if (!src)
-            return respondEditor(f.appId);
+            return respondEditor(config, f.appId);
         // Prevent dropping into own descendant
         const isDescendant = (items, id) => {
             for (const it of items) {
@@ -851,7 +845,7 @@ export function registerMenuEditorRoutes(app, store) {
             return false;
         };
         if (anchorId && src.item.type === "group" && src.item.children && isDescendant(src.item.children, anchorId)) {
-            return respondEditor(f.appId);
+            return respondEditor(config, f.appId);
         }
         // Remove src
         const [srcItem] = src.parent.splice(src.index, 1);
@@ -859,8 +853,7 @@ export function registerMenuEditorRoutes(app, store) {
             // Insert at start of root
             menu.unshift(srcItem);
             appDef.menu = menu;
-            await store.saveConfig(config);
-            return respondEditor(f.appId);
+            return respondEditor(config, f.appId);
         }
         // Build ancestor chain to anchor
         const ancestorChain = (items, id, chain = [], depth = 0) => {
@@ -879,7 +872,7 @@ export function registerMenuEditorRoutes(app, store) {
         const chain = ancestorChain(menu, anchorId);
         if (!chain) {
             src.parent.splice(src.index, 0, srcItem);
-            return respondEditor(f.appId);
+            return respondEditor(config, f.appId);
         }
         const anchor = chain[chain.length - 1];
         const anchorDepth = anchor.depth;
@@ -904,12 +897,9 @@ export function registerMenuEditorRoutes(app, store) {
             }
         }
         appDef.menu = menu;
-        await store.saveConfig(config);
-        return respondEditor(f.appId);
+        return respondEditor(config, f.appId);
     });
-    app.post(`${API_BASE}/menu-editor/move-out`, async (event) => {
-        const f = await readFormBody(event);
-        const config = await store.loadConfig();
+    post("move-out", async (f, config) => {
         const appDef = getApp(config, f.appId);
         if (!appDef)
             return jsonResponse({ error: "App not found" }, 404);
@@ -924,8 +914,7 @@ export function registerMenuEditorRoutes(app, store) {
             }
         }
         appDef.menu = menu;
-        await store.saveConfig(config);
-        return respondEditor(f.appId);
+        return respondEditor(config, f.appId);
     });
 }
 //# sourceMappingURL=menuEditor.js.map