@arcforgelabs/flow 2026.10.45 → 2026.10.47

package/server/ui/app.js

@@ -18,12 +18,14 @@ 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 { xeroUsage } from '/assets/ui/xero-usage.js';
 import { startMonitoring } from '/assets/ui/monitoring.js';
 import { isSearchKey, openSearch } from '/assets/ui/search.js';
 import { alertStrip } from '/assets/ui/alerts.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';
+import { NAV_DEFAULT, NAV_LOCKED } from '/assets/ui/nav-pins.js';
 
 const $ = (id) => document.getElementById(id);
 
@@ -142,19 +144,20 @@ function roleSelect(value, attrs = {}) {
 
 let me = null;
 
-// 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.
+// Where each view sits, in sidebar order, daily work first. No `place`: a
+// sidebar page, pinned until the person unpins it. `place: 'more'`: a sidebar
+// page that starts in More until they pin it. `place: 'account'`: the account
+// menu. `sidebar: false`: opened by a link or Search only. Jobs and Invoices
+// cannot be unpinned (nav-pins.js).
 const VIEWS = {
   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)) },
+  automations: { label: 'Automations', icon: 'bolt', place: 'more', render: (main) => renderAutomations(main, ui()) },
+  'custom-fields': { label: 'Custom fields', icon: 'fields', place: 'more', render: (main) => renderCustomFields(main, ui()) },
+  integrations: { label: 'Integrations', icon: 'plug', place: 'more', 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.
@@ -300,11 +303,7 @@ async function route() {
   const [view, id] = currentView();
   const path = id ? `/${view}/${id}` : `/${view}`;
   if (location.pathname !== path) history.replaceState(null, '', path);
-  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');
+  markNavCurrent(view);
   main.replaceChildren();
   main.className = 'fx-main';
   document.title = `${VIEWS[view].label} · Flow`;
@@ -358,26 +357,108 @@ function renderSignedOut() {
   });
 }
 
+// Sidebar pages this person may open. Account pages stay in the account menu.
+function sidebarViews() {
+  return Object.entries(VIEWS).filter(([, view]) => view.sidebar !== false && view.place !== 'account' && (!view.ownerOnly || me?.person.role === 'owner'));
+}
+
+// Null until the shell reads the account. Jobs and Invoices are always in it.
+let pinned = null;
+let pinEpoch = 0;
+let pinWrite = Promise.resolve();
+let morePanel = null;
+
+function pinSet() {
+  if (!pinned) {
+    pinned = new Set(me?.views?.nav?.pinned ?? NAV_DEFAULT);
+    for (const name of NAV_LOCKED) pinned.add(name);
+  }
+  return pinned;
+}
+
+function navLink(name, view) {
+  return h('a', { href: `/${name}`, 'data-nav': name, 'data-label': view.label, onclick: navigate }, icon(view.icon), h('span', { class: 'fx-nav__label' }, view.label));
+}
+
+// More is the current page while the open page is a sidebar page that is
+// not pinned, so it has no row of its own.
+function markNavCurrent(view = currentView()[0]) {
+  for (const link of document.querySelectorAll('a[data-nav]')) {
+    link.setAttribute('aria-current', link.dataset.nav === view ? 'page' : 'false');
+  }
+  const shown = [...document.querySelectorAll('a[data-nav]')].some((link) => link.dataset.nav === view);
+  const inSidebar = sidebarViews().some(([name]) => name === view);
+  document.querySelector('[data-nav="more"]')?.setAttribute('aria-current', inSidebar && !shown ? 'page' : 'false');
+}
+
+function syncSidebar() {
+  const nav = $('nav');
+  const moreButton = nav?.querySelector('[data-nav="more"]');
+  if (!moreButton) return;
+  for (const link of [...nav.querySelectorAll('a[data-nav]')]) link.remove();
+  const links = sidebarViews().filter(([name]) => pinSet().has(name)).map(([name, view]) => navLink(name, view));
+  if (links.length) moreButton.before(...links);
+  morePanel?.refresh?.();
+  drawMenu();
+  markNavCurrent();
+}
+
+function moreItems() {
+  const pins = pinSet();
+  return sidebarViews().map(([name, view]) => {
+    const on = pins.has(name);
+    const locked = NAV_LOCKED.includes(name);
+    return {
+      icon: icon(view.icon),
+      text: view.label,
+      run: () => { closeMenu(); go(`/${name}`); },
+      trailing: locked
+        ? { icon: 'pin', label: 'Pinned', pressed: true, locked: true }
+        : { icon: 'pin', label: on ? 'Unpin' : 'Pin', pressed: on, run: () => togglePin(name) },
+    };
+  });
+}
+
+function togglePin(name) {
+  if (NAV_LOCKED.includes(name)) return;
+  const next = new Set(pinSet());
+  if (next.has(name)) next.delete(name);
+  else next.add(name);
+  for (const locked of NAV_LOCKED) next.add(locked);
+  const epoch = ++pinEpoch;
+  pinned = next;
+  syncSidebar();
+  const body = { pinned: [...next] };
+  pinWrite = pinWrite.then(() => savePins(body, epoch), () => savePins(body, epoch));
+}
+
+async function savePins(body, epoch) {
+  try {
+    const saved = await flow('/api/me/views/nav', { method: 'PUT', body: JSON.stringify(body) });
+    if (epoch !== pinEpoch) return;
+    pinned = new Set(saved.view.pinned);
+    me.views = { ...(me.views ?? {}), nav: saved.view };
+    syncSidebar();
+  } catch (error) {
+    if (epoch !== pinEpoch) return;
+    pinned = new Set(me?.views?.nav?.pinned ?? NAV_DEFAULT);
+    for (const locked of NAV_LOCKED) pinned.add(locked);
+    syncSidebar();
+    toast(error.message, 'danger');
+  }
+}
+
 function renderShell() {
   document.body.dataset.state = 'signed-in';
   const nav = $('nav');
-  const items = [];
-  const more = [];
-  for (const [name, view] of Object.entries(VIEWS)) {
-    if (view.ownerOnly && me?.person.role !== 'owner') continue;
-    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' });
+  const [moreButton, panel] = rowMenu('More', moreItems, { trigger: [icon('more'), h('span', { class: 'fx-nav__label' }, 'More')], className: 'fx-nav__more', align: 'start', place: 'side' });
+  morePanel = panel;
   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 },
     icon('flag'), h('span', { class: 'fx-nav__label' }, 'Report a problem'));
-  nav.replaceChildren(...items, report);
+  nav.replaceChildren(moreButton, panel, report);
   // Folded or narrow, the logo is the sidebar button: it shows the mark and
   // turns into the sidebar icon under the pointer or keyboard focus.
   const mark = h('span', { class: 'fx-toggle__mark', 'aria-hidden': 'true' });
@@ -386,7 +467,7 @@ function renderShell() {
   sidebar.classList.add('fx-toggle__icon');
   $('menu-toggle').replaceChildren(mark, sidebar);
   $('menu-toggle').onclick = toggleMenu;
-  drawMenu();
+  syncSidebar();
   // 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.
   // People (owners) and Appearance live in the account menu.
@@ -890,10 +971,11 @@ function xeroImportSection(organisations) {
 // Once Xero is on: each organisation's connection, the history copy, and
 // Connect, which goes to Xero and comes back.
 function xeroConnection(organisations, canChange) {
-  const host = h('div', { class: 'fx-settings' });
+  const host = h('div', { class: 'fx-xero-orgs' });
   for (const organisation of organisations) {
+    const usage = h('div');
     const row = settingRow({ label: organisation.name, hint: 'Checking…' });
-    host.append(row);
+    host.append(h('div', { class: 'fx-xero-org' }, usage, row));
     (async () => {
       let hint;
       let control = null;
@@ -901,6 +983,7 @@ function xeroConnection(organisations, canChange) {
       let refused = false;
       try {
         const status = await flow(`/api/xero/status?organisationId=${organisation.id}`);
+        usage.replaceChildren(xeroUsage(status) ?? '');
         if (status.connected && status.calls?.stopped) {
           // A refused connection stopped calls (the call guard): say so, and
           // make Connect again the main button, which starts them again.

package/server/ui/bulk-bar.js

@@ -9,16 +9,19 @@
 // bar for a screen reader ("Ticked invoices", "Ticked jobs"). state = { count, onClear,
 // groups: [[action]], more: [{ head, actions: [action] }] }; an action is
 // { icon, label, title?, run, primary?, iconOnly?, tone? }. title is the
-// long name, for the hover tip and the More menu. A count of 0 hides the
-// bar; Esc clears the ticks while it shows.
+// long name, for the hover tip and the More menu. run(working) may call
+// working('Sending') once the step really starts (after its dialog): the
+// pressed button then shows a spinner and that word until run ends. A count
+// of 0 hides the bar; Esc clears the ticks while it shows.
 import { lucide } from '/assets/ui/custom-fields.js';
+import { applyPhoneRule } from './mobile.js';
 
 let barCount = 0;
 
 export function bulkBar(ui, { label = 'Ticked invoices' } = {}) {
   const { h } = ui;
   const id = `fx-bulk-more-${++barCount}`;
-  const element = h('div', { class: 'fx-bulk', role: 'toolbar', 'aria-label': label, hidden: true });
+  const element = applyPhoneRule(h('div', { class: 'fx-bulk', role: 'toolbar', 'aria-label': label, hidden: true }), 'bulkBar');
   const panel = h('div', { class: 'fx-pop fx-bulk__more', id, popover: 'auto', role: 'menu' });
   let current = null;
   let busy = false;
@@ -27,14 +30,24 @@ export function bulkBar(ui, { label = 'Ticked invoices' } = {}) {
     if (busy) return;
     busy = true;
     element.setAttribute('aria-busy', 'true');
-    try { await action.run(); } finally {
+    // The step is on its way: its button (on the bar, or More's) spins.
+    const working = (word) => {
+      const pressed = [...element.querySelectorAll('.fx-bulk__act')].find((b) => b.dataset.action === action.label);
+      if (!pressed) return;
+      pressed.dataset.busy = '';
+      pressed.firstChild?.replaceWith(h('span', { class: 'fx-spinner fx-spinner--sm', 'aria-hidden': 'true' }));
+      const text = pressed.querySelector('.fx-bulk__word');
+      if (text && word) text.textContent = `${word}…`;
+    };
+    try { await action.run(working); } finally {
       busy = false;
       element.removeAttribute('aria-busy');
+      if (current) draw(current);
     }
   };
 
   const button = (action) => h('button', {
-    type: 'button',
+    type: 'button', 'data-action': action.label,
     class: `fx-bulk__act${action.primary ? ' fx-bulk__act--primary' : ''}${action.iconOnly ? ' fx-bulk__act--icon' : ''}`,
     ...(action.tone ? { 'data-tone': action.tone } : {}),
     ...(action.iconOnly ? { 'aria-label': action.title ?? action.label, 'data-tip': action.title ?? action.label } : action.title ? { title: action.title } : {}),

package/server/ui/columns.js

@@ -25,17 +25,69 @@
 //            column keeps its place: no drag, no Move, no Hide.
 //   rows     the <tbody> nodes (rowCells builds a row's cells)
 //   lead     <th> nodes before the columns (the tick column)
+//
+// Cells every list shares: dateCell (a short date), personCell (a person's
+// initials) and fieldColumn (one of the lab's custom fields as a column, on
+// Jobs and on Invoices, where it is the invoice's job's value).
 import { lucide } from '/assets/ui/custom-fields.js';
 import { endWidth, LEAD_WIDTH, MAX_WIDTH, minWidth, moveColumn, TAIL_WIDTH, tableWidth, widthOf } from '/assets/ui/job-view.js';
+import { applyPhoneRule, assignPhoneSlots, phoneSlot } from './mobile.js';
+import { initialsOf } from '/assets/ui/person.js';
+
+const fullDate = (iso) => new Date(`${iso}T00:00:00`).toLocaleDateString('en-AU', { day: 'numeric', month: 'short', year: 'numeric' });
+// A list date, short: Today, Tomorrow or Yesterday, else day/month (and
+// year when it is not this year).
+export function shortDate(iso) {
+  if (!iso) return '—';
+  const at = new Date(`${iso}T00:00:00`);
+  const now = new Date();
+  const days = Math.round((at - new Date(now.getFullYear(), now.getMonth(), now.getDate())) / 86_400_000);
+  if (days === 0) return 'Today';
+  if (days === 1) return 'Tomorrow';
+  if (days === -1) return 'Yesterday';
+  return at.toLocaleDateString('en-AU', at.getFullYear() === now.getFullYear() ? { day: '2-digit', month: '2-digit' } : { day: '2-digit', month: '2-digit', year: '2-digit' });
+}
+
+// A date cell: the short date, the whole date on hover.
+export const dateCell = (h, iso) => h('time', { datetime: iso ?? null, title: iso ? fullDate(iso) : null }, shortDate(iso));
+
+// A person as a badge (initials), the name on hover; `people` is
+// [{ id, name }] (GET /api/custom-fields).
+export function personCell(h, personId, people) {
+  if (!personId) return h('span', { class: 'fx-dim' }, '—');
+  const name = people.find((p) => p.id === personId)?.name ?? 'Former person';
+  return h('span', { class: 'fx-avatar fx-avatar--sm', role: 'img', 'aria-label': name, title: name }, initialsOf(name));
+}
+
+// A custom field's value as text.
+export function fieldText(field, value, people) {
+  if (value == null || value === false) return '—';
+  if (field.type === 'checkbox') return 'Yes';
+  if (field.type === 'person') return people.find((p) => p.id === value)?.name ?? 'Former person';
+  if (field.type === 'dropdown') return field.options?.find((o) => o.id === value)?.name ?? '—';
+  if (field.type === 'date') return shortDate(value);
+  return String(value);
+}
+
+// One custom field as a list column: `valueOf(row)` is the row's value
+// (null when it has none), `people` names a person field's value.
+export function fieldColumn(h, field, { id, valueOf, people }) {
+  const cell = field.type === 'person' ? (row) => personCell(h, valueOf(row), people)
+    : field.type === 'date' ? (row) => dateCell(h, valueOf(row)) : (row) => fieldText(field, valueOf(row), people);
+  const kind = field.type === 'date' ? 'date' : field.type === 'person' ? 'person' : field.type === 'number' ? 'total' : 'text';
+  return { id, label: field.name, kind, num: field.type === 'number', className: 'fx-dim', cell };
+}
 
 
 // A row's cells for the shown columns: a class per kind, the label for
 // the phone layout, the full text as the cell's name on hover.
 export function rowCells(h, columns, row) {
-  return columns.map((c) => {
+  return assignPhoneSlots(columns).map((c) => {
+    const slot = phoneSlot(c);
     const td = h('td', {
       class: [`fx-c-${c.kind}`, c.num ? 'fx-num' : null, c.className].filter(Boolean).join(' '),
       'data-label': c.label,
+      ...(slot ? { 'data-phone-slot': slot } : {}),
     }, c.cell(row));
     // A cell stays on one line and ends in "…" when the column is narrow
     // (flow.css, .fx-table--sized); the whole text shows on hover.
@@ -124,7 +176,7 @@ export function columnTable(h, config) {
       h('colgroup', {}, leadCols, cols, endCol),
       h('thead', {}, h('tr', {}, lead, heads, tail)),
       rows);
-    const box = h('div', { class: 'fx-table-scroll' }, node);
+    const box = applyPhoneRule(h('div', { class: 'fx-table-scroll' }, node), 'columnTable');
     // The width the columns need; past the window the table scrolls
     // sideways. A browser shares spare width among fixed columns, so the
     // end column is sized here, and again when the window changes size.

package/server/ui/custom-fields.js

@@ -15,6 +15,21 @@
 
 import { orderStatuses, statusRank } from '/assets/ui/job-board.js';
 import { sidecar } from '/assets/ui/sidecar.js';
+import { assignPhoneSlots, phoneSlot } from './mobile.js';
+
+// The manager row uses the same phone slots as a column list.
+const FIELD_SLOTS = assignPhoneSlots([
+  { id: 'name', kind: 'text' },
+  { id: 'type', kind: 'text' },
+  { id: 'by', kind: 'person' },
+  { id: 'date', kind: 'date' },
+  { id: 'where', kind: 'text' },
+  { id: 'menu', kind: 'text', phone: 'end' },
+]);
+const fieldSlot = (id) => {
+  const slot = phoneSlot(FIELD_SLOTS.find((column) => column.id === id));
+  return slot ? { 'data-phone-slot': slot } : {};
+};
 
 const DOCS = 'https://github.com/arcforgelabs/flow/blob/main/docs/CUSTOM_FIELDS.md';
 const TYPE_LABELS = {
@@ -395,12 +410,12 @@ export async function renderCustomFields(main, ui) {
       });
       input.addEventListener('blur', () => { if (view.renaming === field.id) rename(field, input.value); });
       queueMicrotask(() => { input.focus(); input.select(); });
-      return h('div', { class: 'fx-cfm__name', role: 'cell' }, input);
+      return h('div', { class: 'fx-cfm__name', role: 'cell', ...fieldSlot('name') }, input);
     }
     const editButton = field.archived || disabled || field.source ? null
       : h('button', { class: 'fx-cfm__edit', type: 'button', onclick: () => edit(field) }, 'Edit', lucide(h, 'panel-right'));
     const viewButton = field.source ? h('button', { class: 'fx-cfm__edit', type: 'button', onclick: () => edit(field) }, 'View', lucide(h, 'panel-right')) : null;
-    return h('div', { class: 'fx-cfm__name', role: 'cell' },
+    return h('div', { class: 'fx-cfm__name', role: 'cell', ...fieldSlot('name') },
       h('div', { class: 'fx-cfm__title' },
         field.source ? lucide(h, 'lock', 'Read only') : null,
         h('span', { class: 'fx-cfm__label', title: field.name }, field.name), editButton, viewButton));
@@ -418,11 +433,11 @@ export async function renderCustomFields(main, ui) {
     });
     return h('div', { class: 'fx-cfm__row', role: 'row', 'data-id': field.id, 'data-open': sideFor === field.id ? 'true' : null, 'data-archived': field.archived ? 'true' : null },
       nameCell(field),
-      h('div', { class: 'fx-cfm__type', role: 'cell' }, picker ? [picker.button, picker.panel] : h('span', { class: 'fx-cfm__icon', 'data-color': color }, icon)),
-      h('div', { class: 'fx-cfm__by', role: 'cell' }, by ? h('span', { class: 'fx-cfm__avatar', title: by }, field.source ? lucide(h, 'plug') : initials(by)) : h('span', { class: 'fx-dim' }, '—')),
-      h('div', { class: 'fx-cfm__date', role: 'cell', title: field.source ? `${field.sourceLabel} connected` : null }, field.createdAt ? createdDay(field.createdAt) : h('span', { class: 'fx-dim' }, '—')),
-      h('div', { class: 'fx-cfm__where', role: 'cell' }, field.source ? `${field.sourceLabel} jobs` : 'Jobs'),
-      h('div', { class: 'fx-cfm__end', role: 'cell' }, field.source ? null : rowMenu(field, picker)));
+      h('div', { class: 'fx-cfm__type', role: 'cell', ...fieldSlot('type') }, picker ? [picker.button, picker.panel] : h('span', { class: 'fx-cfm__icon', 'data-color': color }, icon)),
+      h('div', { class: 'fx-cfm__by', role: 'cell', ...fieldSlot('by') }, by ? h('span', { class: 'fx-cfm__avatar', title: by }, field.source ? lucide(h, 'plug') : initials(by)) : h('span', { class: 'fx-dim' }, '—')),
+      h('div', { class: 'fx-cfm__date', role: 'cell', ...fieldSlot('date'), title: field.source ? `${field.sourceLabel} connected` : null }, field.createdAt ? createdDay(field.createdAt) : h('span', { class: 'fx-dim' }, '—')),
+      h('div', { class: 'fx-cfm__where', role: 'cell', ...fieldSlot('where') }, field.source ? `${field.sourceLabel} jobs` : 'Jobs'),
+      h('div', { class: 'fx-cfm__end', role: 'cell', ...fieldSlot('menu') }, field.source ? null : rowMenu(field, picker)));
   }
 
   // One group: a header that folds it, its rows, and "Create … field". A