@songsid/agend 2.3.5-alpha.3 → 2.3.5-alpha.4

package/dist/ui/settings-web-authority.js

@@ -14,6 +14,7 @@ import { DEFAULT_SCHEMA, impactOf, sameValue } from "./settings-model.js";
 import { editsOf, keepDraft, syncStage } from "./settings-draft.js";
 import { resetWebAuthorization } from "/assets/web-authorize.js";
 import "./settings-strings.js";
+import { layoutText } from "./settings-layout.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
 
@@ -64,7 +65,7 @@ export function WebAuthorityCard({ ctx, staged, disabled = false }) {
     syncStage(ctx, "verified_authority", body ? { label: tn("vaTitle"), count: Object.keys(body).length,
       impact: impactOf(ctx.schema || DEFAULT_SCHEMA, "web.verified_authority"), request: { method: "PUT", url: "/api/settings/fleet/web", body: { verified_authority: body } } } : null);
   }, [f, original, overview]);
-  const card = (body) => html`<section class="card s-web-authority"><h3>${tn("vaTitle")}</h3><p class="note">${tn("vaHint")}</p>${body}</section>`;
+  const card = (body) => html`<section class="card s-web-authority"><h3>${tn("vaTitle")}</h3><p class="note s-authority-brief">${layoutText("revAuthorityBrief")}</p>${body}<details class="s-setting-details"><summary>${layoutText("revAuthorityDetails")}</summary><p class="note">${tn("vaHint")}</p><p class="note">${tn("vaEnabledHint")}</p><p class="note">${tn("vaLoopbackOnlyHint")}</p></details></section>`;
   if (failed) return card(html`<p class="note" role="status">${tn("vaLoadFailed")} <button type="button" class="btn btn-sm" onClick=${load}>${t("app.retry")}</button></p>`);
   if (!overview || !f) return card(html`<p class="note">${t("app.loading")}</p>`);
 
@@ -86,26 +87,28 @@ export function WebAuthorityCard({ ctx, staged, disabled = false }) {
 
   return card(html`<fieldset class="s-va-fields" disabled=${disabled}>
       ${stuckOff ? html`<p class="note s-va-warn" role="status" id="vaStuckOff">${tn("vaStuckOff")}</p>` : null}
-      <label class=${fc("check", "enabled")}><input id="vaEnabled" type="checkbox" checked=${f.enabled} onChange=${(e) => set({ enabled: e.target.checked })} /><span>${tn("vaEnabled")}</span></label>
-      <p class="note">${tn("vaEnabledHint")}</p>
-      <label class=${fc("check", "loopbackOnly")}><input id="vaLoopbackOnly" type="checkbox" checked=${f.loopbackOnly} onChange=${(e) => set({ loopbackOnly: e.target.checked })} /><span>${tn("vaLoopbackOnly")}</span></label>
-      <p class="note">${tn("vaLoopbackOnlyHint")}</p>
+      <label class=${fc("check", "enabled")}><input class="s-ui-toggle" id="vaEnabled" type="checkbox" checked=${f.enabled} onChange=${(e) => set({ enabled: e.target.checked })} /><span>${layoutText("revAuthorityEnabled")}</span></label>
+      <p class="note">${layoutText("revAuthorityEnabledHint")}</p>
+      <label class=${fc("check", "loopbackOnly")}><input class="s-ui-toggle" id="vaLoopbackOnly" type="checkbox" checked=${f.loopbackOnly} onChange=${(e) => set({ loopbackOnly: e.target.checked })} /><span>${layoutText("revAuthorityLocal")}</span></label>
+      <p class="note">${layoutText("revAuthorityLocalHint")}</p>
       ${warnHosts ? html`<p class="note s-va-warn" role="status" id="vaLanWarning">${tn("vaLanWarning", overview.lanHosts.join(", "))}</p>` : null}
-      ${overview.namedHost || original.namedLink ? html`<label class=${fc("check", "namedLink")}><input id="vaNamedLink" type="checkbox" checked=${f.namedLink} onChange=${(e) => set({ namedLink: e.target.checked })} /><span>${tn("vaNamedLink", overview.namedHost || "—")}</span></label>
-      <p class="note">${tn("vaNamedLinkHint")}</p>` : null}
-      ${/* §0.3: always shown — any fleet can open the temporary public link with /web. */ ""}
-      <label class=${fc("check", "quickLink")}><input id="vaQuickLink" type="checkbox" checked=${f.quickLink} onChange=${(e) => set({ quickLink: e.target.checked })} /><span>${tn("vaQuickLink")}</span></label>
-      <p class="note">${tn("vaQuickLinkHint")}</p>
       <div class=${fc("field", "hours")}><label for="vaHours">${tn("vaHours", overview.hours.min, overview.hours.max)}</label>
         <input id="vaHours" type="number" min=${overview.hours.min} max=${overview.hours.max} step="any"
           class=${hoursError ? "invalid" : ""} value=${hoursText} onInput=${(e) => set({ hours: onHoursText(e.target.value) })} />
         <${Feedback} error=${hoursError} />
         ${hoursText.trim() === "" ? html`<${InEffect} text=${tn("hoursValue", overview.hours.default)} />` : null}</div>
+      <p class="note s-authority-public-warning">${layoutText("revAuthorityPublicWarning")}</p>
+      <details class="s-authority-links"><summary>${layoutText("revAuthorityLinks")}</summary><div>      ${overview.namedHost || original.namedLink ? html`<label class=${fc("check", "namedLink")}><input class="s-ui-toggle" id="vaNamedLink" type="checkbox" checked=${f.namedLink} onChange=${(e) => set({ namedLink: e.target.checked })} /><span>${tn("vaNamedLink", overview.namedHost || "—")}</span></label>
+      <p class="note">${tn("vaNamedLinkHint")}</p>` : null}
+      ${/* §0.3: always shown — any fleet can open the temporary public link with /web. */ ""}
+      <label class=${fc("check", "quickLink")}><input class="s-ui-toggle" id="vaQuickLink" type="checkbox" checked=${f.quickLink} onChange=${(e) => set({ quickLink: e.target.checked })} /><span>${tn("vaQuickLink")}</span></label>
+      <p class="note">${tn("vaQuickLinkHint")}</p>
+</div></details>
       <h4>${tn("vaSessionsTitle")}</h4>
       ${overview.authorized.length
         ? html`<ul class="s-va-sessions" id="vaSessions">${overview.authorized.map((a) => html`<li key=${a.handle} data-handle=${a.handle}>
             <strong>${a.label}</strong> <span class="note">${a.account}</span>${a.named ? html` <span class="note s-va-named">${tn("vaSessionNamed")}</span>` : null}${a.quick ? html` <span class="note s-va-named s-va-quick">${tn("vaSessionQuick")}</span>` : null}<br /><span class="note">${tn("vaSessionUntil", when(a.authorizedAt), when(a.until))}</span></li>`)}</ul>`
         : html`<p class="note" id="vaSessionsNone">${tn("vaSessionsNone")}</p>`}
     </fieldset>
-    <div class="save-row"><button type="button" class="btn btn-danger" id="vaRevoke" disabled=${disabled} onClick=${revoke}>${tn("vaRevoke")}</button></div>`);
+    <div class="save-row s-authority-revoke"><button type="button" class="btn btn-danger" id="vaRevoke" disabled=${disabled} onClick=${revoke}>${tn("vaRevoke")}</button></div>`);
 }

package/dist/ui/shared/app-shell.js

@@ -21,6 +21,7 @@ import { useWebAuthorization } from "./web-authorize.js";
 import { RightRail, sidePanelStore } from "./side-panel.js";
 import { OwnerCssKeepBar } from "./owner-css.js";
 import { AgentWidget, fleetBinds, sidebarWidget, sidebarWidgetStore } from "./agent-widget.js";
+import { initSettingsContentWidth } from "./settings-width.js";
 
 /** Shell state shared with panels: the phone drawer, the collapsed sidebar, extensions a panel module adds. */
 export const shellStore = createStore({ drawer: false, collapsed: readCollapsed(), keyboard: false, dialog: null, side: null, banner: null });
@@ -127,6 +128,13 @@ export function clampSidebarWidth(w, vw) {
   return Math.round(Math.min(max, Math.max(SIDEBAR_W.min, w)));
 }
 function storedSidebarWidth() { try { const v = Number(localStorage.getItem(SIDEBAR_W_KEY)); return Number.isFinite(v) && v > 0 ? v : null; } catch { return null; } }
+
+// #2978 merge (stale tabs, quality rule 3): Settings' content width lives in its own module — a tab opened before an
+// upgrade keeps this shell module, and a lazily loaded Settings panel that imported these names from here would fail to
+// load at all. Re-exported, so the shell and its callers are unchanged.
+export { SETTINGS_CONTENT_WIDTH_KEY, SETTINGS_CONTENT_WIDTHS, DEFAULT_SETTINGS_CONTENT_WIDTH, settingsContentWidthStore,
+  initSettingsContentWidth, setSettingsContentWidth } from "./settings-width.js";
+
 /** { width: px | null } — null: the default width (tokens.css). */
 export const sidebarWidthStore = createStore({ width: null });
 /** Set the width (clamped to this viewport); `save`: this device keeps it. null: back to the default, nothing kept. */
@@ -422,23 +430,24 @@ function ViewOnlyNav({ route }) {
  * This browser's theme and language (#1604: Settings → This device; for the anonymous View reader, the footer's
  * popover). The same stores as ever: AgendTheme (theme.js) and setLang (app-i18n.js) — only where they are shown moved.
  */
-export function DevicePrefs({ labels = false } = {}) {
+export function DevicePrefs({ labels = false, fields = ["theme", "language", "names"] } = {}) {
   const [theme, setTheme] = useState(typeof AgendTheme !== "undefined" ? AgendTheme.get() : "system");
   const [l, setL] = useState(lang());
   const names = useStore(namesStore);   // #1722
   // #1665: what is in force, as it changes — another device's choice arriving while this is open is shown at once.
   useEffect(() => (typeof AgendTheme !== "undefined" && typeof AgendTheme.onChange === "function" ? AgendTheme.onChange(setTheme) : undefined), []);
   useEffect(() => onLang(setL), []);
+  const shows = (field) => fields.includes(field);
   return html`<div class=${`prefs${labels ? " labelled" : ""}`}>
-    <label class="pref"><${Icon} name="sun" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.theme")}</span>
+    ${shows("theme") ? html`<label class="pref"><${Icon} name="sun" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.theme")}</span>
       <select id=${labels ? "pref-theme" : undefined} value=${theme} aria-label=${t("app.theme")} onChange=${(e) => { setTheme(e.target.value); if (typeof AgendTheme !== "undefined") AgendTheme.set(e.target.value); savePref("theme", e.target.value); }}>
-        <option value="system">${t("app.themeSystem")}</option><option value="light">${t("app.themeLight")}</option><option value="dark">${t("app.themeDark")}</option></select></label>
-    <label class="pref"><${Icon} name="globe" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.language")}</span>
+        <option value="system">${t("app.themeSystem")}</option><option value="light">${t("app.themeLight")}</option><option value="dark">${t("app.themeDark")}</option></select></label>` : null}
+    ${shows("language") ? html`<label class="pref"><${Icon} name="globe" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.language")}</span>
       <select id=${labels ? "pref-lang" : undefined} value=${l} aria-label=${t("app.language")} onChange=${(e) => { setL(e.target.value); setLang(e.target.value); savePref("lang", e.target.value); }}>
-        <option value="en">English</option><option value="zh-TW">中文</option></select></label>
-    <label class="pref"><${Icon} name="user" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.names")}</span>
+        <option value="en">English</option><option value="zh-TW">中文</option></select></label>` : null}
+    ${shows("names") ? html`<label class="pref"><${Icon} name="user" size=${16} /><span class=${labels ? "pref-label" : "sr-only"}>${t("app.names")}</span>
       <select id=${labels ? "pref-names" : undefined} value=${names.primary} aria-label=${t("app.names")} onChange=${(e) => setNamesPrimary(e.target.value)}>
-        <option value="nickname">${t("app.namesNickname")}</option><option value="instance">${t("app.namesInstance")}</option></select></label>
+        <option value="nickname">${t("app.namesNickname")}</option><option value="instance">${t("app.namesInstance")}</option></select></label>` : null}
   </div>`;
 }
 
@@ -769,6 +778,7 @@ export function Shell({ panels, onNewInstance, viewOnly = false }) {
   const nav = useStore(navStore);
   const shell = useStore(shellStore);
   const root = useRef(null);
+  useLayoutEffect(() => { initSettingsContentWidth(); }, []);
   usePageTheme(root, nav.route);
   const [, relang] = useState(0);
   // A language switch re-renders everything and gives the panel a new lease (its key includes the language).