waybetter 0.6.0 → 0.7.0

package/dist/shell/frame/AppMenu.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// The app menu: the titlebar's "Settings and more" button, at the far end of the titlebar cluster
-// (before the caption buttons on Windows and Linux; macOS has none there). It opens on click, on
-// Alt+F and F10 (Shell.tsx; a focused tab forwards the keys), from the command palette, from the
-// last row of the account menu, and from the app's logo at the start of the titlebar (the same
-// menu, hung under the logo on its side of the window). Its rows are the app's (`ShellSite.menu`, menuModel.ts): built-in
-// ones by name, each shown only when the app serves what it needs, and the app's own.
+// The app menu ("Settings and more"). Its trigger is the app's choice (`ShellMenu.trigger`): by
+// default each pane's wayBetter button at the end of its toolbar (`PaneMenuButton`; the menu hangs
+// under the button that was clicked, so in split view each pane opens it under itself), else a
+// button at the end of the titlebar or the titlebar's logo. It also opens on Alt+F and F10
+// (Shell.tsx; a focused tab forwards the keys), from the command palette and from the last row of
+// the account menu: under the focused pane's button (the first one on screen when no pane is
+// focused). Its rows are the app's (`ShellSite.menu`, menuModel.ts): built-in ones by name, each
+// shown only when the app serves what it needs, and the app's own.
 //
 // Like every shell menu it is an overlay: while open the shell is raised above the tab webviews
 // (`setOverlay`), panes stay visible and nothing is dimmed. Keyboard: arrows, Home/End, type-ahead,
@@ -21,7 +23,7 @@ import { refreshDev } from "./devHost.js";
 import { useDev, usePaneTick, useT } from "./hooks.js";
 import { formatNumber } from "./i18n.js";
 import { Icon } from "./icons.js";
-import { DEFAULT_MENU, ZOOM_MAX, ZOOM_MIN, findSpec, joinGroups, languageChoice, languageRows, menuText, moveStop, planMenu, shortcutText, specRows, submenuKeys, submenuLeft, typeahead, updateRow, } from "./menuModel.js";
+import { DEFAULT_MENU, ZOOM_MAX, ZOOM_MIN, findSpec, joinGroups, languageChoice, languageRows, menuText, moveStop, planMenu, resolveTrigger, shortcutText, specRows, submenuKeys, submenuLeft, typeahead, updateRow, } from "./menuModel.js";
 import { ReportDialog } from "./ReportDialog.js";
 import { safe, setSafeMode } from "./safeStore.js";
 import { hasFeature, site } from "./site.js";
@@ -33,19 +35,40 @@ import { readZoom, stepZoom, zoomOf, zoomTarget } from "./zoomStore.js";
 import './appMenu.css';
 /** Opens the app menu (Alt+F / F10, the palette, the account menu's last row). */
 export const openAppMenu = (request = {}) => window.dispatchEvent(new CustomEvent('bt-app-menu', { detail: request }));
+/** Opens the "Report a problem" summary (the native menu bar's Help item). */
+export const openReport = () => window.dispatchEvent(new CustomEvent('bt-report'));
 const mac = os === 'macos';
 /** The keys that open the menu, as the button's tooltip and the account menu write them. */
 export const APP_MENU_KEYS = mac ? 'F10' : 'Alt+F';
 const getError = (error) => (error instanceof Error ? error.message : String(error)).replace(/^Error: /, '');
 const percent = (factor) => formatNumber(factor, { style: 'percent', maximumFractionDigits: 0 });
+/** One trigger, as a key: `pane:<id>` for a pane's button. */
+const triggerKey = (at, pane) => (at === 'pane' ? `pane:${pane ?? ''}` : at);
 /** Which trigger the open menu hangs from (null: closed), for the triggers' `aria-expanded`. */
 let openAt = null;
-function noteOpen(at) {
-    if (openAt === at)
+function noteOpen(key) {
+    if (openAt === key)
         return;
-    openAt = at;
+    openAt = key;
     window.dispatchEvent(new CustomEvent('bt-app-menu-state'));
 }
+/** `aria-expanded` of one trigger. */
+function useExpanded(key) {
+    const [expanded, setExpanded] = useState(openAt === key);
+    useEffect(() => {
+        const update = () => setExpanded(openAt === key);
+        update();
+        window.addEventListener('bt-app-menu-state', update);
+        return () => window.removeEventListener('bt-app-menu-state', update);
+    }, [key]);
+    return expanded;
+}
+/** Pane `id`'s menu button on screen; else the focused pane's; else the first one on screen. */
+function paneButton(id) {
+    const shown = Array.from(document.querySelectorAll('.bt-pane-menu[data-pane]')).filter(el => el.getClientRects().length > 0);
+    const find = (want) => (want ? shown.find(el => el.dataset.pane === want) : undefined);
+    return find(id) ?? find(shell.api?.activePanel?.id) ?? shown[0] ?? null;
+}
 /** The rows of one level a key can stop on: enabled items; the zoom row counts once. */
 function stopsOf(menu) {
     const all = Array.from(menu.querySelectorAll('[data-item]:not(:disabled)'));
@@ -54,7 +77,11 @@ function stopsOf(menu) {
     const keep = zoom.find(el => el === active) ?? zoom.find(el => el.getAttribute('aria-disabled') !== 'true') ?? zoom[0];
     return all.filter(el => !('zoom' in el.dataset) || el === keep);
 }
-export function AppMenu({ trigger = true } = {}) {
+/**
+ * The menu (mounted once, in the titlebar). `trigger`: where clicks and keys open it; default the
+ * app's `ShellMenu.trigger`, else `pane`. `true` / `false` are the older spellings of `button` / `logo`.
+ */
+export function AppMenu({ trigger } = {}) {
     const t = useT();
     usePaneTick();
     const dev = useDev();
@@ -93,16 +120,36 @@ export function AppMenu({ trigger = true } = {}) {
                 dispose?.();
         };
     }, []);
-    /** Where a request without an anchor opens: the button when this app shows one, else the logo. */
-    const home = () => (trigger ? 'button' : 'logo');
+    /** Where a request without an anchor opens: the app's trigger. */
+    const home = () => menuTrigger(trigger);
+    /** The element a request hangs the menu under (null: none on screen). */
+    function triggerOf(at, pane) {
+        if (at === 'pane')
+            return paneButton(pane);
+        if (at === 'logo')
+            return document.querySelector('button.bt-titlebar-logo');
+        return button.current;
+    }
     function show(request = {}) {
         const at = request.anchor ?? home();
+        const el = triggerOf(at, request.pane);
+        const pane = at === 'pane' ? el?.dataset.pane : undefined;
         diag(`menu open: anchor=${at} keyboard=${!!request.keyboard} hasFocus=${document.hasFocus()} active=${describe(document.activeElement)}`);
-        const logo = at === 'logo' ? document.querySelector('.bt-titlebar-logo') : null;
-        const rect = (logo ?? button.current)?.getBoundingClientRect();
+        const rect = el?.getBoundingClientRect();
         if (rect) {
             const top = Math.round(rect.bottom + 6);
-            setAnchor(logo ? { at: 'logo', top, left: Math.max(8, Math.round(rect.left - 3)) } : { at: 'button', top, right: Math.max(8, Math.round(window.innerWidth - rect.right)) });
+            const rtl = getComputedStyle(el).direction === 'rtl';
+            if (at === 'logo')
+                setAnchor({ at, top, left: Math.max(8, Math.round(rect.left - 3)) });
+            // The menu's end edge lines up with its button's, so it opens over the pane the button is in.
+            else if (rtl)
+                setAnchor({ at, pane, top, left: Math.max(8, Math.round(rect.left)) });
+            else
+                setAnchor({ at, pane, top, right: Math.max(8, Math.round(window.innerWidth - rect.right)) });
+        }
+        else {
+            // No trigger on screen (only the app's own tab, a deck): under the titlebar, at its end.
+            setAnchor({ at, pane, top: 50, right: 8 });
         }
         const active = document.activeElement;
         before.current = active && active !== document.body && document.hasFocus() ? active : null;
@@ -161,8 +208,10 @@ export function AppMenu({ trigger = true } = {}) {
     useEffect(() => {
         const onRequest = (event) => {
             const request = event.detail ?? {};
-            // Asked again from the other trigger, the open menu moves there instead of closing.
-            if (live.current.open && request.toggle && (request.anchor ?? home()) === (openAt ?? home()))
+            // Asked again from another trigger, the open menu moves there instead of closing.
+            const at = request.anchor ?? home();
+            const key = triggerKey(at, at === 'pane' ? request.pane ?? paneButton()?.dataset.pane : undefined);
+            if (live.current.open && request.toggle && key === openAt)
                 close('escape');
             else
                 show(request);
@@ -170,12 +219,16 @@ export function AppMenu({ trigger = true } = {}) {
         window.addEventListener('bt-app-menu', onRequest);
         return () => window.removeEventListener('bt-app-menu', onRequest);
     }, [version]);
+    useEffect(() => {
+        const show = () => setReporting(true);
+        window.addEventListener('bt-report', show);
+        return () => window.removeEventListener('bt-report', show);
+    }, []);
     useEffect(() => {
         if (!open)
             return;
         // Native tab webviews would cover the menu.
         setOverlay(1);
-        noteOpen(anchor.at);
         // The window lost the keyboard: the menu closes, unless the focus is back a moment later (taking the
         // keyboard from a tab for Alt+F / F10 can pass through a blur on its way to the shell).
         let leaving;
@@ -206,13 +259,31 @@ export function AppMenu({ trigger = true } = {}) {
         window.addEventListener('blur', away);
         window.addEventListener('resize', resized);
         window.addEventListener('keydown', onKey);
-        return () => { clearTimeout(leaving); setOverlay(-1); noteOpen(null); window.removeEventListener('blur', away); window.removeEventListener('resize', resized); window.removeEventListener('keydown', onKey); };
+        return () => { clearTimeout(leaving); setOverlay(-1); window.removeEventListener('blur', away); window.removeEventListener('resize', resized); window.removeEventListener('keydown', onKey); };
     }, [open, anchor.at]);
+    // The trigger the menu hangs from shows it is open.
+    useEffect(() => {
+        noteOpen(open ? triggerKey(anchor.at, anchor.pane) : null);
+        return () => noteOpen(null);
+    }, [open, anchor.at, anchor.pane]);
     const layer = (level) => layers.current?.querySelector(`[data-level="${level}"]`) ?? null;
     // After every render: submenus sit beside their row, inside the window; then the focus that was asked for.
     useLayoutEffect(() => {
         if (!open)
             return;
+        // The menu stays inside the window: a button near the start edge (a narrow pane in split view)
+        // would push it out, so it slides back in.
+        const root = layer(0);
+        if (root) {
+            const edge = 8;
+            root.style.left = anchor.left === undefined ? '' : `${anchor.left}px`;
+            root.style.right = anchor.right === undefined ? '' : `${anchor.right}px`;
+            const box = root.getBoundingClientRect();
+            if (box.left < edge || box.right > window.innerWidth - edge) {
+                root.style.left = `${Math.round(Math.max(edge, Math.min(box.left, window.innerWidth - edge - box.width)))}px`;
+                root.style.right = 'auto';
+            }
+        }
         for (let level = 1; level <= path.length; level += 1) {
             const el = layer(level);
             const parent = layer(level - 1);
@@ -599,7 +670,7 @@ export function AppMenu({ trigger = true } = {}) {
         return levels.map(({ rows, label }, level) => _jsx("div", { role: "menu", "aria-label": label, tabIndex: -1, "data-level": level, className: level === 0 ? `bt-menu bt-app-menu bt-pop${anchor.at === 'logo' ? '' : ' bt-pop--right'}` : 'bt-menu bt-app-menu bt-app-sub', style: level === 0 ? { top: anchor.top, left: anchor.left, right: anchor.right, maxHeight: `calc(100vh - ${anchor.top + 8}px)` } : undefined, children: rows.map((row, index) => renderRow(row, level, index)) }, level === 0 ? 'root' : `${level}:${path[level - 1]}`));
     }
     const label = menuText('label');
-    return _jsxs(_Fragment, { children: [trigger && _jsx("button", { ref: button, type: "button", className: "bt-app-button", "aria-haspopup": "menu", "aria-expanded": open && anchor.at === 'button', "aria-label": label, title: `${label} (${APP_MENU_KEYS})`, onClick: event => (open && anchor.at === 'button' ? close('escape') : show({ keyboard: event.detail === 0 })), children: _jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "5.75", r: "1.6" }), _jsx("circle", { cx: "12", cy: "12", r: "1.6" }), _jsx("circle", { cx: "12", cy: "18.25", r: "1.6" })] }) }), open && createPortal(_jsx("div", { className: "bt-menu-backdrop", onMouseDown: () => close(), onContextMenu: event => { event.preventDefault(); close(); }, children: _jsx("div", { ref: layers, className: "bt-app-layers", onMouseDown: event => event.stopPropagation(), onContextMenu: event => { event.preventDefault(); event.stopPropagation(); }, onKeyDown: onKey, children: renderMenus() }) }), document.body), reporting && _jsx(ReportDialog, { onClose: () => setReporting(false) })] });
+    return _jsxs(_Fragment, { children: [home() === 'button' && _jsx("button", { ref: button, type: "button", className: "bt-app-button", "aria-haspopup": "menu", "aria-expanded": open && anchor.at === 'button', "aria-label": label, title: `${label} (${APP_MENU_KEYS})`, onClick: event => (open && anchor.at === 'button' ? close('escape') : show({ keyboard: event.detail === 0 })), children: _jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "5.75", r: "1.6" }), _jsx("circle", { cx: "12", cy: "12", r: "1.6" }), _jsx("circle", { cx: "12", cy: "18.25", r: "1.6" })] }) }), open && createPortal(_jsx("div", { className: "bt-menu-backdrop", onMouseDown: () => close(), onContextMenu: event => { event.preventDefault(); close(); }, children: _jsx("div", { ref: layers, className: "bt-app-layers", onMouseDown: event => event.stopPropagation(), onContextMenu: event => { event.preventDefault(); event.stopPropagation(); }, onKeyDown: onKey, children: renderMenus() }) }), document.body), reporting && _jsx(ReportDialog, { onClose: () => setReporting(false) })] });
 }
 /**
  * The app's logo at the start of the titlebar: a second trigger of the same menu, hung under the
@@ -608,13 +679,8 @@ export function AppMenu({ trigger = true } = {}) {
  */
 export function AppMenuLogo() {
     useT();
-    const [expanded, setExpanded] = useState(openAt === 'logo');
+    const expanded = useExpanded('logo');
     const press = useRef(null);
-    useEffect(() => {
-        const update = () => setExpanded(openAt === 'logo');
-        window.addEventListener('bt-app-menu-state', update);
-        return () => window.removeEventListener('bt-app-menu-state', update);
-    }, []);
     const { product, logo } = site();
     const label = menuText('label');
     return _jsx("button", { type: "button", className: "bt-titlebar-logo", "aria-haspopup": "menu", "aria-expanded": expanded, "aria-label": `${product}: ${label}`, title: `${product} · ${label}`, onPointerDown: event => { if (event.button === 0)
@@ -639,4 +705,17 @@ export function AppMenuLogo() {
             systemMenu(Math.round(event.screenX * scale), Math.round(event.screenY * scale));
         }, children: _jsx("img", { src: logo, alt: "", draggable: false }) });
 }
+/** The app's menu trigger: `trigger` as `AppMenu` takes it, else `ShellMenu.trigger`, else `pane`. */
+export const menuTrigger = (trigger) => resolveTrigger(trigger, site().menu?.trigger);
+/**
+ * One pane's menu button, at the end of its toolbar (the app's mark inside): opens the app menu
+ * under itself, or closes it when it is open there. Shown when the app's trigger is `pane`.
+ */
+export function PaneMenuButton({ pane, children }) {
+    useT();
+    const expanded = useExpanded(triggerKey('pane', pane));
+    const label = menuText('label');
+    const { product } = site();
+    return _jsx("button", { type: "button", className: "bt-brand-button bt-pane-menu", "data-pane": pane, "aria-haspopup": "menu", "aria-expanded": expanded, "aria-label": `${product}: ${label}`, title: `${product} · ${label} (${APP_MENU_KEYS})`, onClick: event => openAppMenu({ anchor: 'pane', pane, toggle: true, keyboard: event.detail === 0 }), children: children });
+}
 //# sourceMappingURL=AppMenu.js.map