@arcforgelabs/flow 2026.10.44 → 2026.10.46

package/server/ui/app.js

@@ -18,6 +18,7 @@ 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';
@@ -142,23 +143,26 @@ 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.
@@ -176,6 +180,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"/>',
 };
 
@@ -238,7 +243,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.
@@ -266,15 +271,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';
@@ -295,6 +304,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`;
@@ -352,14 +363,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 },
@@ -376,7 +390,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);
@@ -389,7 +407,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);
@@ -873,10 +891,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;
@@ -884,6 +903,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/columns.js

@@ -1,8 +1,9 @@
 // A list's columns, as ClickUp's: drag a head's right edge to make the
 // column wider or narrower (never under its kind's minimum), drag a head
 // to move the column, and click or right-click a head for its menu (Move to
-// start, Move to end, Hide; + shows a hidden column again). Jobs, Invoices
-// and Reconcile build their tables here, so every list works the same.
+// start, Move to end, Hide; + shows a hidden column again). Jobs, Invoices,
+// Reconcile and the Price list build their tables here, so every list works
+// the same.
 //
 // The view a person keeps for a list (with their account, PUT
 // /api/me/views/:page) holds two keys from here:
@@ -24,12 +25,58 @@
 //            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 { MAX_WIDTH, minWidth, moveColumn, widthOf } from '/assets/ui/job-view.js';
+import { endWidth, LEAD_WIDTH, MAX_WIDTH, minWidth, moveColumn, TAIL_WIDTH, tableWidth, widthOf } from '/assets/ui/job-view.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 };
+}
 
-// The tick column at the start and the + column at the end.
-const LEAD_WIDTH = 44;
-const TAIL_WIDTH = 40;
 
 // 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.
@@ -110,23 +157,42 @@ export function columnTable(h, config) {
 
   function table({ columns, rows, lead = [], className = '' }) {
     const saved = widths();
-    // Each column keeps its own width: the table is as wide as its columns,
-    // never stretched to the page. Space left over stays empty at the right.
-    // A resize changes the table only; the tools stay put.
+    // Each column keeps its own width: never stretched to the page. As
+    // HubSpot's, the head and every row still run to the right edge: the
+    // end column (+ at its right) takes the space after the last column, so
+    // a row looks whole, not cut off. A resize changes the table only; the
+    // tools stay put.
     const cols = columns.map((c) => h('col', { style: { width: `${widthOf(c, saved)}px` } }));
     const leadCols = lead.map(() => h('col', { style: { width: `${LEAD_WIDTH}px` } }));
+    const endCol = h('col', { style: { width: `${TAIL_WIDTH}px` } });
     const tail = config.hidden ? h('th', { class: 'fx-th-add' }, h('button', {
       type: 'button', class: 'fx-th fx-th--add', 'aria-label': 'Show a column', title: 'Show a column', onclick: (event) => openMenu(null, event),
     }, '+')) : h('th', { class: 'fx-th-end', 'aria-hidden': 'true' });
     const heads = columns.map((c, n) => head(c, n));
     const node = h('table', { class: `fx-table fx-table--sized ${className}`.trim() },
-      h('colgroup', {}, leadCols, cols, h('col', { style: { width: `${TAIL_WIDTH}px` } })),
+      h('colgroup', {}, leadCols, cols, endCol),
       h('thead', {}, h('tr', {}, lead, heads, tail)),
       rows);
-    // The table is as wide as its columns; past the page it scrolls sideways.
-    const fit = () => { node.style.width = `${columns.reduce((sum, c) => sum + widthOf(c, widths()), 0) + lead.length * LEAD_WIDTH + TAIL_WIDTH}px`; };
+    const box = h('div', { class: 'fx-table-scroll' }, node);
+    // 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.
+    let need = tableWidth(columns, saved, lead.length);
+    const fit = () => {
+      const end = endWidth(need, box.getBoundingClientRect?.().width ?? 0);
+      endCol.style.width = `${end}px`;
+      node.style.width = `${need - TAIL_WIDTH + end}px`;
+    };
     fit();
-    return h('div', { class: 'fx-table-scroll' }, node);
+    if (typeof ResizeObserver === 'function') {
+      // Once the table has left the page (a redraw), stop watching.
+      let shown = false;
+      const watch = new ResizeObserver(() => {
+        if (box.isConnected) { shown = true; fit(); } else if (shown) watch.disconnect();
+      });
+      watch.observe(box);
+    }
+    return box;
 
     function head(c, n) {
       const button = h('button', {
@@ -167,12 +233,13 @@ export function columnTable(h, config) {
         grip.setPointerCapture(event.pointerId);
         const from = event.clientX;
         const start = col.getBoundingClientRect().width || widthOf(c, widths());
-        const base = node.getBoundingClientRect().width;
+        const base = need;
         let w = start;
         node.dataset.resizing = '';
         const move = (e) => {
           w = set(start + e.clientX - from);
-          node.style.width = `${base + w - start}px`;
+          need = base + w - start;
+          fit();
         };
         const up = () => {
           grip.removeEventListener('pointermove', move);