@arcforgelabs/flow 2026.10.43 → 2026.10.45

package/server/ui/app.js

@@ -14,33 +14,19 @@ import { automationSection, renderAutomations } from '/assets/ui/automations.js'
 import { renderInvoicingSettings, sendModeSection } from '/assets/ui/invoicing-settings.js';
 import { renderPriceList } from '/assets/ui/price-list.js';
 import { renderPriceReconcile } from '/assets/ui/price-reconcile.js';
-import { lucide, renderCustomFields } from '/assets/ui/custom-fields.js';
+import { renderCustomFields } from '/assets/ui/custom-fields.js';
 import { renderJobs } from '/assets/ui/jobs.js';
 import { renderReconcile } from '/assets/ui/reconcile.js';
 import { renderXeroImport } from '/assets/ui/xero-import.js';
 import { startMonitoring } from '/assets/ui/monitoring.js';
-import { openSearch } from '/assets/ui/search.js';
+import { isSearchKey, openSearch } from '/assets/ui/search.js';
 import { alertStrip } from '/assets/ui/alerts.js';
-import { named, startTips } from '/assets/ui/tip.js';
+import { initialsOf, personLabel } from '/assets/ui/person.js';
+import { startTips } from '/assets/ui/tip.js';
+import { crumbs, dialog, edgeFade, fieldError, h, holdButton, linksOpenWith, listFrame, listHead, notice, pageHeader, rowMenu, sectionTitle, settingRow, tileCard, tileSection, toast } from '/assets/ui/kit.js';
 
 const $ = (id) => document.getElementById(id);
 
-// h('p', { class: 'x', onclick }, 'text', child) — children are text or nodes.
-function h(tag, attrs = {}, ...children) {
-  const node = document.createElement(tag);
-  for (const [key, value] of Object.entries(attrs ?? {})) {
-    if (value == null || value === false) continue;
-    if (key.startsWith('on')) node.addEventListener(key.slice(2), value);
-    else if (key === 'style' && typeof value === 'object') Object.assign(node.style, value);
-    else node.setAttribute(key, value === true ? '' : String(value));
-  }
-  for (const child of children.flat()) {
-    if (child == null || child === false) continue;
-    node.append(child instanceof Node ? child : document.createTextNode(String(child)));
-  }
-  return node;
-}
-
 const ROLE_LABEL = { owner: 'Owner', admin: 'Admin', staff: 'Staff' };
 const ROLE_HINT = {
   owner: 'Manages people, connections and every record.',
@@ -137,97 +123,8 @@ async function flow(path, options = {}) {
   return body;
 }
 
-// Keeps a button off for `ms`, with the time left on it, then puts it back.
-function holdButton(button, ms) {
-  if (!button || !(ms > 0)) return;
-  clearInterval(button.fxHold);
-  const label = button.dataset.label ?? button.textContent;
-  button.dataset.label = label;
-  const until = Date.now() + ms;
-  const draw = () => {
-    const left = Math.ceil((until - Date.now()) / 1000);
-    if (left <= 0) {
-      clearInterval(button.fxHold);
-      button.textContent = label;
-      delete button.dataset.label;
-      button.removeAttribute('title');
-      button.disabled = false;
-      return;
-    }
-    const time = left < 60 ? `${left}s` : `${Math.floor(left / 60)}:${String(left % 60).padStart(2, '0')}`;
-    button.disabled = true;
-    button.textContent = `${label} · ${time}`;
-    button.title = `Flow waits before it asks again, to protect the connected system's limits. Ready in ${time}.`;
-  };
-  draw();
-  button.fxHold = setInterval(draw, 1000);
-}
-
 // ── Shared pieces ──────────────────────────────────────────────────────────
 
-// The page's name and nothing under it: the page shows what it is for.
-// `count` is a live number beside the name (2 to check); `help` is a docs
-// link, an icon with its name as a tip.
-function pageHeader(title, { count = null, help = null, actions = [] } = {}) {
-  return h('header', { class: 'fx-ph' },
-    h('div', { class: 'fx-ph__text' },
-      h('h1', { class: 'fx-title' }, title),
-      count != null ? h('span', { class: 'fx-ph__count' }, count) : null,
-      help ? helpLink(help) : null),
-    actions.length ? h('div', { class: 'fx-ph__actions' }, actions) : null);
-}
-
-// A docs link as a small "?" icon whose tip names it (How sending works).
-function helpLink({ href, label }) {
-  return named(h('a', { class: 'fx-help', href, target: '_blank', rel: 'noopener' }, lucide(h, 'circle-help')), label);
-}
-
-// A settings section's heading, with its docs link beside it.
-function sectionTitle(text, help = null) {
-  return h('h2', { class: 'fx-set__title' }, text, help ? helpLink(help) : null);
-}
-
-function notice(text, tone = 'info', title = null) {
-  return h('div', { class: 'fx-notice', 'data-tone': tone, role: tone === 'danger' ? 'alert' : 'status' },
-    title ? h('strong', {}, title) : null,
-    h('span', {}, text));
-}
-
-function toast(text, tone = 'info') {
-  const region = $('toasts');
-  const item = h('div', { class: 'fx-toast', 'data-tone': tone, role: 'status' }, text);
-  region.append(item);
-  setTimeout(() => item.remove(), 4200);
-}
-
-// A modal built on <dialog>: resolves with the button's value, or null.
-function dialog({ title, body, confirm, tone = 'primary' }) {
-  return new Promise((resolve) => {
-    const form = h('form', { method: 'dialog', class: 'fx-dialog__form' },
-      h('h2', { class: 'fx-dialog__title' }, title),
-      body,
-      h('div', { class: 'fx-dialog__actions' },
-        h('button', { class: 'fx-btn fx-btn--ghost', value: 'cancel', type: 'submit', formnovalidate: true }, 'Cancel'),
-        h('button', { class: `fx-btn fx-btn--${tone}`, value: 'ok', type: 'submit' }, confirm)));
-    const element = h('dialog', { class: 'fx-dialog' }, form);
-    element.addEventListener('close', () => {
-      const ok = element.returnValue === 'ok';
-      const data = ok ? new FormData(form) : null;
-      element.remove();
-      resolve(ok ? data : null);
-    });
-    document.body.append(element);
-    element.showModal();
-    element.querySelector('input, select, button[value="ok"]')?.focus();
-  });
-}
-
-function initials(person) {
-  const source = (person.name || person.email || '?').replace(/@.*/, '');
-  const parts = source.split(/[\s._-]+/).filter(Boolean);
-  return ((parts[0]?.[0] ?? '?') + (parts[1]?.[0] ?? '')).toUpperCase();
-}
-
 function statusPill(person) {
   if (person.status === 'pending') return h('span', { class: 'fx-status', 'data-tone': 'warn' }, 'Waiting for approval');
   if (person.status === 'disabled') return h('span', { class: 'fx-status', 'data-tone': 'mute' }, 'Turned off');
@@ -245,30 +142,32 @@ function roleSelect(value, attrs = {}) {
 
 let me = null;
 
-// The sidebar lists the views in this order, under their group's heading.
+// Where each view sits: the sidebar, in this order, daily work first (no
+// `place`); the sidebar's More menu (`place: 'more'`, `more` names its Lucide
+// icon); the account menu (`place: 'account'`). `sidebar: false` views open
+// by link and Search only.
 const VIEWS = {
-  jobs: { label: 'Jobs', icon: 'jobs', group: 'Work', render: (main) => renderJobs(main, ui()) },
-  invoices: { label: 'Invoices', icon: 'invoices', group: 'Work', render: (main, id) => (id ? renderInvoice(main, ui(), id) : renderInvoiceList(main, ui())) },
-  reconcile: { label: 'Reconcile', icon: 'reconcile', group: 'Work', render: (main, id) => renderReconcile(main, ui(), id) },
-  'invoicing-settings': { label: 'Rules', icon: 'rules', group: 'Settings', render: (main, id) => renderInvoicingSettings(main, ui(), id) },
-  automations: { label: 'Automations', icon: 'bolt', group: 'Settings', render: (main) => renderAutomations(main, ui()) },
-  'price-list': { label: 'Price list', icon: 'tag', group: 'Settings', render: (main, id) => (id === 'reconcile' ? renderPriceReconcile(main, ui()) : renderPriceList(main, ui())) },
-  'custom-fields': { label: 'Custom fields', icon: 'fields', group: 'Settings', render: (main) => renderCustomFields(main, ui()) },
-  people: { label: 'People', icon: 'people', group: 'Settings', ownerOnly: true, render: renderPeople },
-  integrations: { label: 'Integrations', icon: 'plug', group: 'Settings', ownerOnly: true, render: (main, id) => (id ? renderIntegration(main, id) : renderIntegrations(main)) },
+  jobs: { label: 'Jobs', icon: 'jobs', render: (main) => renderJobs(main, ui()) },
+  invoices: { label: 'Invoices', icon: 'invoices', render: (main, id) => (id ? renderInvoice(main, ui(), id) : renderInvoiceList(main, ui())) },
+  reconcile: { label: 'Reconcile', icon: 'reconcile', render: (main, id) => renderReconcile(main, ui(), id) },
+  'price-list': { label: 'Price list', icon: 'tag', render: (main, id) => (id === 'reconcile' ? renderPriceReconcile(main, ui()) : renderPriceList(main, ui())) },
+  'invoicing-settings': { label: 'Rules', icon: 'rules', render: (main, id) => renderInvoicingSettings(main, ui(), id) },
+  automations: { label: 'Automations', icon: 'bolt', place: 'more', more: 'zap', render: (main) => renderAutomations(main, ui()) },
+  'custom-fields': { label: 'Custom fields', icon: 'fields', place: 'more', more: 'form-input', render: (main) => renderCustomFields(main, ui()) },
+  integrations: { label: 'Integrations', icon: 'plug', place: 'more', more: 'plug', ownerOnly: true, render: (main, id) => (id ? renderIntegration(main, id) : renderIntegrations(main)) },
+  people: { label: 'People', icon: 'people', place: 'account', ownerOnly: true, render: renderPeople },
   // Not in the sidebar: "Manage account" in the account menu opens the same
   // Clerk profile. The page stays for links and Search.
   // Opened from the Xero integration page: Xero invoices against Flow's own.
-  'xero-import': { label: 'Xero import', icon: 'plug', group: 'Settings', sidebar: false, render: (main) => renderXeroImport(main, ui()) },
-  account: { label: 'Account', icon: 'person', group: 'Settings', sidebar: false, render: renderAccount },
-  appearance: { label: 'Appearance', icon: 'palette', group: 'Settings', render: renderAppearance },
+  'xero-import': { label: 'Xero import', icon: 'plug', sidebar: false, render: (main) => renderXeroImport(main, ui()) },
+  account: { label: 'Account', icon: 'person', sidebar: false, render: renderAccount },
+  appearance: { label: 'Appearance', icon: 'palette', place: 'account', render: renderAppearance },
 };
 
 // Line icons for the sidebar, drawn on a 24-unit grid in the text colour.
 const ICON_PATHS = {
   jobs: '<rect x="3" y="4" width="5" height="16" rx="1"/><rect x="10" y="4" width="5" height="11" rx="1"/><rect x="17" y="4" width="4" height="14" rx="1"/>',
   invoices: '<path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/>',
-  draft: '<path d="M14 3H6v18h5M14 3l4 4v3M14 3v4h4"/><path d="M13 21v-2.5l6-6 2.5 2.5-6 6z"/>',
   bolt: '<path d="M13 3L5 13h6l-1 8 8-10h-6z"/>',
   rules: '<path d="M3 6l2 2 4-4M3 16l2 2 4-4M13 6h8M13 12h8M13 18h8"/>',
   reconcile: '<path d="M4 8h13M13 4l4 4-4 4M20 16H7M11 12l-4 4 4 4"/>',
@@ -280,6 +179,7 @@ const ICON_PATHS = {
   flag: '<path d="M5 21V4M5 4h11l-2 4 2 4H5"/>',
   search: '<circle cx="11" cy="11" r="6.5"/><path d="M16 16l4.5 4.5"/>',
   sidebar: '<rect x="3" y="4" width="18" height="16" rx="2.5"/><path d="M9.5 4v16"/>',
+  more: '<circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/>',
   palette: '<path d="M12 3a9 9 0 100 18c1.1 0 1.5-.8 1.5-1.6 0-1-.8-1.4-.8-2.4 0-.9.7-1.5 1.6-1.5H17a4 4 0 004-4c0-4.7-4-8.5-9-8.5z"/><circle cx="7.5" cy="11" r="1"/><circle cx="10" cy="7" r="1"/><circle cx="15" cy="7" r="1"/>',
 };
 
@@ -342,7 +242,7 @@ document.addEventListener('keydown', (event) => {
   }
 });
 document.addEventListener('click', (event) => {
-  if (!event.target.closest?.('.fx-side') || event.target.closest?.('[data-nav]')) closeMenu();
+  if (!event.target.closest?.('.fx-side') || event.target.closest?.('[data-nav]:not([data-nav="more"])')) closeMenu();
 });
 // Folded, a click on the sidebar's empty space opens it out again, as in
 // Claude. A click on a page, the account photo or Search still does its job.
@@ -362,7 +262,7 @@ function search() {
 }
 
 document.addEventListener('keydown', (event) => {
-  if (event.key.toLowerCase() !== 'k' || !(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return;
+  if (!isSearchKey(event)) return;
   if (document.body.dataset.state !== 'signed-in') return;
   event.preventDefault();
   search();
@@ -370,15 +270,19 @@ document.addEventListener('keydown', (event) => {
 
 // "Report a problem" in Clerk's account menu, between "Manage account" and
 // "Sign out". Clerk mounts and unmounts the icon itself.
-function reportMenuItem(openReport) {
+function accountMenuItem(label, iconName, onClick) {
   return {
-    label: 'Report a problem',
-    onClick: () => { openReport().catch((error) => toast(error.message, 'danger')); },
-    mountIcon: (element) => element.replaceChildren(icon('flag')),
+    label,
+    onClick,
+    mountIcon: (element) => element.replaceChildren(icon(iconName)),
     unmountIcon: (element) => element.replaceChildren(),
   };
 }
 
+function reportMenuItem(openReport) {
+  return accountMenuItem('Report a problem', 'flag', () => { openReport().catch((error) => toast(error.message, 'danger')); });
+}
+
 // The page a person lands on after sign-in, and for / or an unknown path.
 // Invoices opens on its Ready tab. A home page can take this over later.
 const START_VIEW = 'invoices';
@@ -399,6 +303,8 @@ async function route() {
   for (const link of document.querySelectorAll('a[data-nav]')) {
     link.setAttribute('aria-current', link.dataset.nav === view ? 'page' : 'false');
   }
+  // More shows as current while one of its pages is open.
+  document.querySelector('[data-nav="more"]')?.setAttribute('aria-current', VIEWS[view].place === 'more' ? 'page' : 'false');
   main.replaceChildren();
   main.className = 'fx-main';
   document.title = `${VIEWS[view].label} · Flow`;
@@ -407,6 +313,8 @@ async function route() {
 }
 
 // Opens a path in place; the address changes, the page stays.
+linksOpenWith((path) => go(path));
+
 function go(path, { replace = false } = {}) {
   if (path !== location.pathname + location.search) history[replace ? 'replaceState' : 'pushState'](null, '', path);
   route();
@@ -422,7 +330,7 @@ function navigate(event) {
 // The shared pieces a view module (invoicing.js) builds with. Its `go`
 // takes a path, or a link's click event.
 const ui = () => ({
-  h, flow, toast, notice, pageHeader, sectionTitle, dialog, me, holdButton, tileCard, crumbs,
+  h, flow, toast, notice, fieldError, pageHeader, listHead, listFrame, edgeFade, sectionTitle, dialog, me, holdButton, tileCard, tileSection, crumbs,
   go: (target, options) => (typeof target === 'string' ? go(target, options) : navigate(target)),
 });
 
@@ -454,14 +362,17 @@ function renderShell() {
   document.body.dataset.state = 'signed-in';
   const nav = $('nav');
   const items = [];
-  let group = null;
+  const more = [];
   for (const [name, view] of Object.entries(VIEWS)) {
     if (view.ownerOnly && me?.person.role !== 'owner') continue;
-    if (view.sidebar === false) continue;
-    if (view.group && view.group !== group) items.push(h('span', { class: 'fx-nav__group' }, view.group));
-    group = view.group;
-    items.push(h('a', { href: `/${name}`, 'data-nav': name, 'data-label': view.label, onclick: navigate }, icon(view.icon), h('span', { class: 'fx-nav__label' }, view.label)));
+    if (view.sidebar === false || view.place === 'account') continue;
+    if (view.place === 'more') more.push({ icon: view.more, text: view.label, run: () => { closeMenu(); go(`/${name}`); } });
+    else items.push(h('a', { href: `/${name}`, 'data-nav': name, 'data-label': view.label, onclick: navigate }, icon(view.icon), h('span', { class: 'fx-nav__label' }, view.label)));
   }
+  // The rest of the setup pages, behind More (the shared ⋯ menu).
+  const [moreButton, morePanel] = rowMenu('More', more, { trigger: [icon('more'), h('span', { class: 'fx-nav__label' }, 'More')], className: 'fx-nav__more', align: 'start' });
+  Object.assign(moreButton.dataset, { nav: 'more', label: 'More' });
+  items.push(moreButton, morePanel);
   // "Report a problem" sits at the foot of the menu, above the account chip,
   // while Sentry and its report form are on (monitoring.js).
   const report = h('button', { type: 'button', class: 'fx-nav__report', 'data-nav': 'report', 'data-label': 'Report a problem', hidden: true },
@@ -478,7 +389,11 @@ function renderShell() {
   drawMenu();
   // The sidebar foot shows who is signed in: photo or initial, then the name
   // (the email when the account has no name). It opens the account menu.
-  const userButton = { afterSignOutUrl: '/sign-in', showName: true };
+  // People (owners) and Appearance live in the account menu.
+  const accountItems = Object.entries(VIEWS)
+    .filter(([, view]) => view.place === 'account' && (!view.ownerOnly || me?.person.role === 'owner'))
+    .map(([name, view]) => accountMenuItem(view.label, view.icon, () => go(`/${name}`)));
+  const userButton = { afterSignOutUrl: '/sign-in', showName: true, customMenuItems: accountItems };
   $('search').replaceChildren(icon('search'));
   $('search').onclick = search;
   mountClerk('userButton', $('user-button'), userButton);
@@ -491,7 +406,7 @@ function renderShell() {
       report.hidden = false;
       report.onclick = () => { openReport().catch((error) => toast(error.message, 'danger')); };
       unmountClerk($('user-button'));
-      mountClerk('userButton', $('user-button'), { ...userButton, customMenuItems: [reportMenuItem(openReport)] });
+      mountClerk('userButton', $('user-button'), { ...userButton, customMenuItems: [...accountItems, reportMenuItem(openReport)] });
     })
     .catch((error) => console.warn(`[monitoring] ${error.message}`));
   window.addEventListener('popstate', route);
@@ -548,28 +463,6 @@ async function refreshPeople(host) {
   ].filter(Boolean));
 }
 
-let peopleMenus = 0;
-
-// A row's ⋯ menu, as on the Custom fields page.
-function rowMenu(label, items) {
-  const id = `fx-people-menu-${++peopleMenus}`;
-  const button = h('button', { class: 'fx-cfm__more', type: 'button', 'aria-label': label, popovertarget: id, 'aria-haspopup': 'menu', 'aria-expanded': 'false' }, lucide(h, 'ellipsis'));
-  const panel = h('div', { class: 'fx-pop', id, popover: 'auto', role: 'menu' });
-  panel.addEventListener('toggle', (event) => {
-    button.setAttribute('aria-expanded', String(event.newState === 'open'));
-    if (event.newState !== 'open') return;
-    const close = () => panel.hidePopover();
-    panel.replaceChildren(...items.map((entry) => (entry === '-'
-      ? h('div', { class: 'fx-pop__sep' })
-      : h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitem', 'data-tone': entry.tone, onclick: () => { close(); entry.run(); } },
-        h('span', { class: 'fx-pop__tick' }, lucide(h, entry.icon)), h('span', {}, entry.text)))));
-    const at = button.getBoundingClientRect();
-    panel.style.top = `${Math.round(at.bottom + 6)}px`;
-    panel.style.left = `${Math.round(Math.max(8, Math.min(at.right - panel.offsetWidth, innerWidth - panel.offsetWidth - 8)))}px`;
-  });
-  return [button, panel];
-}
-
 function personRow(person, host) {
   const self = person.id === me.person.id;
   const act = async (fn, done) => {
@@ -583,9 +476,9 @@ function personRow(person, host) {
   };
   const patch = (body) => flow(`/api/people/${person.id}`, { method: 'PATCH', body: JSON.stringify(body) });
   const who = h('div', { class: 'fx-person' },
-    h('span', { class: 'fx-avatar', 'aria-hidden': 'true' }, initials(person)),
+    h('span', { class: 'fx-avatar', 'aria-hidden': 'true' }, initialsOf(person)),
     h('span', { class: 'fx-person__text' },
-      h('span', { class: 'fx-person__name' }, person.name || person.email, self ? h('span', { class: 'fx-tag' }, 'You') : null),
+      h('span', { class: 'fx-person__name' }, personLabel(person), self ? h('span', { class: 'fx-tag' }, 'You') : null),
       person.name ? h('span', { class: 'fx-person__email' }, person.email) : null));
   const role = self
     ? h('span', { title: ROLE_HINT[person.role] }, ROLE_LABEL[person.role])
@@ -728,27 +621,6 @@ function integrationTile(integration) {
   });
 }
 
-// One card in a grid of choices (Integrations, Rules): its mark (a node, or
-// an ICON_PATHS name), the name, a status pill, two lines at most (only when
-// they help), and the action. The whole card is the link.
-function tileCard({ href, mark, title, status, blurb, action = 'Manage' }) {
-  const logo = typeof mark === 'string' ? h('span', { class: 'fx-logo fx-logo--icon', 'aria-hidden': 'true' }, icon(mark)) : mark;
-  return h('a', { class: `fx-int-card${blurb ? '' : ' fx-int-card--bare'}`, href, onclick: navigate },
-    h('header', { class: 'fx-int-card__head' },
-      logo,
-      h('h3', {}, title),
-      status ? h('span', { class: 'fx-status', 'data-tone': status.tone ?? 'mute' }, status.label) : null),
-    blurb ? h('p', { class: 'fx-int-card__blurb' }, blurb) : null,
-    h('span', { class: 'fx-int-card__btn' }, action));
-}
-
-// The trail above a page one level down: crumbs(['/integrations', 'Integrations'], 'Xero').
-function crumbs(...trail) {
-  const here = trail.pop();
-  return h('nav', { class: 'fx-crumbs', 'aria-label': 'Breadcrumb' },
-    ...trail.flatMap(([href, label]) => [h('a', { href, onclick: navigate }, label), h('span', { 'aria-hidden': 'true' }, '›')]),
-    h('span', {}, here));
-}
 
 // One integration's page (/integrations/<id>): its logo and maker, Connect
 // with each step shown as it happens, the setup steps, its settings, and the
@@ -959,22 +831,6 @@ function personSettingsSection(integration) {
   return section;
 }
 
-// One setting, laid out the same on every settings screen: a short name, one
-// line of smaller text under it, and the control on the right. Longer help
-// lives behind a link, not here. A wide control (a grid of choices) sits on
-// its own line under the name. `tone: 'danger'` marks a row that needs a person.
-function settingRow({ label, hint, control, wide = false, tone = null }) {
-  const target = control?.matches?.('input, select, textarea') ? control : control?.querySelector?.('input:not([type=color]), select, textarea');
-  const id = target ? (target.id ||= `fx-set-${++settingRow.next}`) : null;
-  return h('div', { class: `fx-setting${wide ? ' fx-setting--wide' : ''}`, 'data-tone': tone },
-    h('div', { class: 'fx-setting__text' },
-      id ? h('label', { class: 'fx-setting__name', for: id }, label) : h('span', { class: 'fx-setting__name' }, label),
-      hint ? h('p', { class: 'fx-setting__hint' }, hint) : null),
-    h('div', { class: 'fx-setting__control' }, control));
-}
-settingRow.next = 0;
-
-// The steps of a Connect, each ticked, running or crossed, with the time taken.
 function connectProgress({ steps, started }) {
   const seconds = Math.max(0, Math.round((Date.now() - started) / 1000));
   return h('div', { class: 'fx-progress', role: 'status' },