@arcforgelabs/flow 2026.10.51 → 2026.10.53

package/server/ui/kit.js

@@ -1,6 +1,6 @@
 // The shared pieces every Flow page builds with: elements (h), the page
 // header, notes, toasts, dialogs, setting rows, the ⋯ row menu, the button
-// that waits between presses, cards that open a page, and the crumbs trail. app.js hands them to each view module in ui(),
+// that waits between presses, cards that open a page, the icon picker, and the crumbs trail. app.js hands them to each view module in ui(),
 // and the design system's cards (scripts/design-system/) render these same
 // functions, so a card is the real thing. Reuse one or give it an option;
 // never copy it into a page (AGENTS.md, "UI: reuse first").
@@ -499,6 +499,91 @@ export function tileSection(title, cards, { href, more = 'Show all' } = {}) {
     h('div', { class: 'fx-tiles__grid' }, cards)), 'tileSection');
 }
 
+// The icons an icon picker shows before a search. A search finds any Lucide
+// icon by its name or its words (lucide-static's tags.json).
+export const ICON_CHOICES = Object.freeze([
+  'flag', 'clock', 'ban', 'list-checks', 'circle-alert', 'triangle-alert', 'octagon-alert', 'shield-alert', 'bell', 'bell-ring',
+  'info', 'circle-help', 'circle-check', 'circle-x', 'check', 'x', 'eye', 'eye-off', 'lock', 'unlock',
+  'star', 'heart', 'bookmark', 'tag', 'tags', 'hash', 'percent', 'dollar-sign', 'banknote', 'receipt',
+  'receipt-text', 'wallet', 'credit-card', 'coins', 'calculator', 'piggy-bank', 'hand-coins', 'file-text', 'file-check', 'file-x',
+  'file-warning', 'files', 'folder', 'clipboard-list', 'clipboard-check', 'notebook-pen', 'pencil', 'pen-line', 'stamp', 'send',
+  'mail', 'inbox', 'archive', 'calendar', 'calendar-clock', 'calendar-x', 'calendar-check', 'hourglass', 'timer', 'alarm-clock',
+  'history', 'repeat', 'refresh-cw', 'user', 'user-round', 'users', 'user-check', 'user-x', 'contact', 'building',
+  'building-2', 'hospital', 'house', 'map-pin', 'truck', 'package', 'box', 'boxes', 'shopping-cart', 'store',
+  'briefcase', 'wrench', 'hammer', 'cog', 'sliders-horizontal', 'filter', 'search', 'scan-search', 'scale', 'gavel',
+  'shield', 'shield-check', 'badge-check', 'award', 'thumbs-up', 'thumbs-down', 'smile', 'frown', 'zap', 'sparkles',
+  'flame', 'snowflake', 'sun', 'moon', 'droplet', 'leaf', 'stethoscope', 'syringe', 'pill', 'microscope',
+  'test-tube', 'flask-conical', 'activity', 'heart-pulse', 'bone', 'hand', 'camera', 'image', 'printer', 'phone',
+  'message-square', 'link', 'unlink', 'globe', 'pause', 'play', 'circle-stop', 'octagon-x', 'rocket', 'target',
+  'lightbulb', 'puzzle', 'layers', 'list', 'split', 'merge', 'git-branch', 'text-cursor-input', 'type', 'skull',
+]);
+const ICON_FOUND = 96;
+let iconWords = null;
+let pickerNext = 0;
+
+// An icon picker (IconPicker card): a button that shows the icon now chosen,
+// and a panel with a search box and a grid of icons, each named on hover. On
+// a desk the panel opens under the button; on a phone it is a sheet at the
+// foot. `value` null shows `fallback`, and "Default" goes back to it.
+// `onpick(name)` gets each choice (null for Default).
+export function iconPicker({ value = null, fallback = 'circle', label = 'Icon', onpick = () => {} }) {
+  let current = value;
+  let shown = fallback;
+  const id = `fx-icons-${++pickerNext}`;
+  const button = h('button', {
+    class: 'fx-icons__button', type: 'button', 'aria-haspopup': 'dialog', popovertarget: id,
+  });
+  const find = h('input', { class: 'fx-input', type: 'search', placeholder: 'Find', 'aria-label': 'Find an icon' });
+  const grid = h('div', { class: 'fx-icons__grid', role: 'group', 'aria-label': label });
+  const reset = h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button' }, 'Default');
+  const panel = applyPhoneRule(h('div', { class: 'fx-pop fx-icons__panel', id, popover: 'auto', role: 'dialog', 'aria-label': label },
+    find, grid, h('div', { class: 'fx-icons__foot' }, reset)), 'iconPicker');
+  const draw = () => {
+    named(button, `${label}: ${current ?? shown}`);
+    button.replaceChildren(lucide(h, current ?? shown), lucide(h, 'chevron-down'));
+  };
+  const choose = (name) => {
+    panel.hidePopover();
+    current = name;
+    draw();
+    onpick(name);
+  };
+  const cell = (name) => named(h('button', {
+    class: 'fx-icons__cell', type: 'button', 'aria-pressed': String(name === (current ?? shown)), onclick: () => choose(name),
+  }, lucide(h, name)), name);
+  const fill = () => {
+    const q = find.value.trim().toLowerCase();
+    const words = iconWords ?? Object.fromEntries(ICON_CHOICES.map((n) => [n, []]));
+    const names = q ? Object.keys(words).filter((n) => n.includes(q) || words[n].some((w) => w.includes(q))).slice(0, ICON_FOUND) : ICON_CHOICES;
+    grid.replaceChildren(...(names.length ? names.map(cell) : [h('p', { class: 'fx-dim' }, 'No icon.')]));
+  };
+  find.addEventListener('input', fill);
+  reset.addEventListener('click', () => choose(null));
+  panel.addEventListener('toggle', async (event) => {
+    button.setAttribute('aria-expanded', String(event.newState === 'open'));
+    if (event.newState !== 'open') return;
+    find.value = '';
+    reset.hidden = current === null;
+    fill();
+    if (panel.dataset.phoneLayout !== 'sheet') {
+      const at = button.getBoundingClientRect();
+      panel.style.top = `${Math.round(Math.max(8, Math.min(at.bottom + 6, innerHeight - panel.offsetHeight - 8)))}px`;
+      panel.style.left = `${Math.round(Math.max(8, Math.min(at.left, innerWidth - panel.offsetWidth - 8)))}px`;
+      find.focus();
+    }
+    // The words of every Lucide icon, once. Without them (the design system's
+    // page), a search reads the names here.
+    iconWords ??= await fetch('/assets/icons/tags.json').then((r) => (r.ok ? r.json() : null)).catch(() => null);
+    if (iconWords && find.value) fill();
+  });
+  draw();
+  return {
+    element: h('span', { class: 'fx-icons' }, button, panel),
+    value: () => current,
+    fallback: (name) => { shown = name; draw(); },
+  };
+}
+
 // A dialog that fills the screen has no pixel outside it, so an accessibility
 // check cannot tell it is modal and reads the page underneath. While one is
 // open, every other top-level node is inert. The attribute is what the check

package/server/ui/list-views.js

@@ -1,10 +1,11 @@
-// A person's saved views of a list page (Jobs, Invoices, Reconcile), as
+// A person's saved views of a list page (Jobs, Invoices, Reconcile, Price
+// list), as
 // ClickUp's view tabs: each has a name and the page's view (Group, Sort,
 // Filter, Columns), and one can be the person's default, which opens when
 // they go to the page. No DOM: the server checks a saved list with the same
 // rules the page uses (server/auth/people.js).
 import { caseNumber } from './job-board.js';
-import { cleanFilterView, fieldIdOf, filterJobs, KIND_OF_TYPE, normaliseJobsView } from './job-view.js';
+import { cleanFilterView, fieldIdOf, filterJobs, KIND_OF_TYPE, normaliseJobsView, normaliseListView, PRICE_COLUMNS } from './job-view.js';
 
 // The Invoices filter's fields (invoicing.js): the list's own columns, then
 // the job columns the Columns menu offers (Case, Practitioner, Shipped).
@@ -111,6 +112,48 @@ export const RECONCILE_FILTER_FIELDS = {
   match: { label: 'Match', kind: 'check', icon: 'link' },
 };
 
+// The Price list's fields (price-list.js): Filter, Group and Sort read
+// them. `group` marks the fields a person can group by.
+export const PRICE_FIELDS = {
+  code: { label: 'Code', kind: 'text', icon: 'hash' },
+  name: { label: 'Name', kind: 'text', icon: 'text' },
+  price: { label: 'Price', kind: 'number', icon: 'dollar-sign' },
+  tax: { label: 'Tax', kind: 'choice', icon: 'percent', group: true },
+  linked: { label: 'Linked', kind: 'choice', icon: 'link', group: true },
+  differs: { label: 'Differs', kind: 'check', icon: 'triangle-alert', group: true },
+};
+
+// A code's value for a Price list field, as Filter, Group and Sort compare
+// it. Linked is the systems the code links to (a list: a code can link to
+// Xero and Seazona both).
+export function priceValue(item, field) {
+  switch (field) {
+    case 'code': return item.code ?? null;
+    case 'name': return item.name ?? null;
+    case 'price': return item.unitAmountCents == null ? null : item.unitAmountCents / 100;
+    case 'tax': return item.taxCode ?? null;
+    case 'linked': return [...new Set((item.links ?? []).map((l) => l.system))];
+    case 'differs': return (item.findings?.length ?? 0) > 0;
+    default: return null;
+  }
+}
+
+// The Price list view: its columns (as before), Group, Sort and Filter.
+const PRICE_DIRS = ['asc', 'desc'];
+export function normalisePriceView(input) {
+  const value = input && typeof input === 'object' && !Array.isArray(input) ? input : {};
+  const seen = new Set();
+  return {
+    ...normaliseListView(value, PRICE_COLUMNS),
+    group: PRICE_FIELDS[value.group]?.group ? value.group : 'none',
+    groupDir: PRICE_DIRS.includes(value.groupDir) ? value.groupDir : 'asc',
+    sorts: (Array.isArray(value.sorts) ? value.sorts : [])
+      .filter((s) => s && Object.hasOwn(PRICE_FIELDS, s.by) && !seen.has(s.by) && seen.add(s.by))
+      .map((s) => ({ by: s.by, dir: PRICE_DIRS.includes(s.dir) ? s.dir : 'asc' })).slice(0, 5),
+    ...cleanFilterView(value, kindIn(PRICE_FIELDS, false)),
+  };
+}
+
 const CUSTOM_FIELD = /^field:[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 const kindIn = (fields, custom) => (field) => (Object.hasOwn(fields, field) ? fields[field].kind : custom && CUSTOM_FIELD.test(field) ? '*' : null);
 
@@ -120,12 +163,13 @@ export const normaliseReconcileView = (value) => cleanFilterView(value, kindIn(R
 
 // The pages with saved views. Each is named in a switch, never looked up
 // by the name a request sends, so a name such as "constructor" is refused.
-export const SAVED_VIEW_PAGES = Object.freeze(['jobs', 'invoices', 'reconcile']);
+export const SAVED_VIEW_PAGES = Object.freeze(['jobs', 'invoices', 'reconcile', 'price-list']);
 export function pageViewCheck(page) {
   switch (page) {
     case 'jobs': return normaliseJobsView;
     case 'invoices': return normaliseInvoicesView;
     case 'reconcile': return normaliseReconcileView;
+    case 'price-list': return normalisePriceView;
     default: return null;
   }
 }

package/server/ui/mobile.js

@@ -68,6 +68,24 @@ export const RULES = {
     "mark": false,
     "card": "Button"
   },
+  "captureButton": {
+    "component": "captureButton",
+    "direction": "button",
+    "phone": {
+      "layout": "camera"
+    },
+    "tablet": {
+      "layout": "camera"
+    },
+    "desk": {
+      "layout": "files"
+    },
+    "touch": 44,
+    "pageOverflow": "none",
+    "screens": [],
+    "mark": false,
+    "card": "CaptureButton"
+  },
   "cardRows": {
     "component": "cardRows",
     "direction": "card per row",
@@ -203,7 +221,8 @@ export const RULES = {
       "invoices-approved",
       "invoices-ticked",
       "invoices-filter",
-      "reconcile"
+      "reconcile",
+      "price-list"
     ],
     "card": "Filter"
   },
@@ -230,7 +249,8 @@ export const RULES = {
       "invoices-approved",
       "invoices-ticked",
       "invoices-filter",
-      "reconcile"
+      "reconcile",
+      "price-list"
     ],
     "card": "FindBox"
   },
@@ -270,6 +290,23 @@ export const RULES = {
     "mark": false,
     "card": "Icon"
   },
+  "iconPicker": {
+    "component": "iconPicker",
+    "direction": "sheet",
+    "phone": {
+      "layout": "sheet"
+    },
+    "tablet": {
+      "layout": "popover"
+    },
+    "desk": {
+      "layout": "popover"
+    },
+    "touch": 44,
+    "pageOverflow": "none",
+    "screens": [],
+    "card": "IconPicker"
+  },
   "jobChangeBanner": {
     "component": "jobChangeBanner",
     "direction": "banner",
@@ -311,7 +348,8 @@ export const RULES = {
       "invoices-approved",
       "invoices-ticked",
       "invoices-filter",
-      "reconcile"
+      "reconcile",
+      "price-list"
     ],
     "card": "ListFrame"
   },
@@ -339,7 +377,8 @@ export const RULES = {
       "invoices-approved",
       "invoices-ticked",
       "invoices-filter",
-      "reconcile"
+      "reconcile",
+      "price-list"
     ],
     "card": "ListHead"
   },
@@ -534,7 +573,8 @@ export const RULES = {
       "invoices-approved",
       "invoices-ticked",
       "invoices-filter",
-      "reconcile"
+      "reconcile",
+      "price-list"
     ],
     "card": "SavedViews"
   },

package/server/ui/nav-pins.js

@@ -5,6 +5,7 @@
 
 export const NAV_PAGES = Object.freeze([
   'jobs',
+  'captures',
   'invoices',
   'contacts',
   'reconcile',
@@ -17,11 +18,12 @@ export const NAV_PAGES = Object.freeze([
 
 export const NAV_LOCKED = Object.freeze(['jobs', 'invoices']);
 
-// Today's sidebar, before a person has chosen: daily work (Jobs, Invoices,
-// Contacts, Reconcile), Price list and Rules. Automations, Custom fields
+// Today's sidebar, before a person has chosen: daily work (Jobs, Capture,
+// Invoices, Contacts, Reconcile), Price list and Rules. Automations, Custom fields
 // and Integrations start in More.
 export const NAV_DEFAULT = Object.freeze([
   'jobs',
+  'captures',
   'invoices',
   'contacts',
   'reconcile',

package/server/ui/price-list.js

@@ -1,27 +1,34 @@
-// Settings, Price list (/price-list; server/core/price-list.js,
-// docs/PRICE_LIST.md). Flow's own codes and prices, which work with no
-// integration connected: one table row per code, with its price and tax, and
-// the line price setting below. Edit opens a dialog with the code's fields, its
-// links and, when something differs, Mark resolved. While an integration with
-// its own price list is on, Reconcile (price-reconcile.js) says how many
-// records need a person and opens the work. Everyone can read it; an owner or
-// admin changes it. The caller passes in app.js's shared pieces as `ui`.
+// Price list (/price-list; server/core/price-list.js, docs/PRICE_LIST.md).
+// Flow's own codes and prices, which work with no integration connected.
+// Laid out like Jobs and Invoices: the shared list head (Active / Archived
+// tabs, Group, Sort, Filter, saved views, Find) over the list window, one
+// row per code. A row opens a dialog with the code's fields, its links and,
+// when something differs, Mark resolved. The head's icons open Reconcile
+// (price-reconcile.js, while an integration with its own price list is on)
+// and the price list's settings. Everyone can read it; an owner or admin
+// changes it. The caller passes in app.js's shared pieces as `ui`.
 import { alertStrip } from '/assets/ui/alerts.js';
-import { columnTable, rowCells, viewSaver } from '/assets/ui/columns.js';
-import { normaliseListView, PRICE_COLUMNS } from '/assets/ui/job-view.js';
+import { columnTable, groupHead, rowCells, viewSaver } from '/assets/ui/columns.js';
+import { lucide } from '/assets/ui/custom-fields.js';
+import { filterJobs, groupJobs, PRICE_COLUMNS, sortJobs } from '/assets/ui/job-view.js';
+import { normalisePriceView, PRICE_FIELDS, priceValue } from '/assets/ui/list-views.js';
 import { reconcileRows } from '/assets/ui/price-match.js';
+import { savedViews } from '/assets/ui/saved-views.js';
+import { findBox, today, viewBar } from '/assets/ui/view-bar.js';
 
-const DOCS = 'https://github.com/arcforgelabs/flow/blob/main/docs/PRICE_LIST.md';
 const TAX_LABELS = { GST: 'GST', GST_FREE: 'GST free' };
+// Where an invoice line takes its price (the line mapping routine's
+// `linePrice`): the job's own amount, or this list's price.
 const LINE_PRICES = [
-  { value: 'work', label: 'Work system amount' },
+  { value: 'work', label: 'Job price' },
   { value: 'list', label: 'Price list' },
 ];
+const NUMBER_WORDS = ['Low to high', 'High to low'];
 
 // The list's columns (columns.js): each keeps its own width, saved with the
 // person's account; + shows a hidden one again.
 const COLUMN_DEFS = {
-  code: { kind: 'number', className: 'fx-price__code', cell: (item) => item.code },
+  code: { kind: 'number', phone: 'meta', className: 'fx-price__code', cell: (item) => item.code },
   name: { kind: 'client', phone: 'title', cell: (item) => item.name },
   price: { kind: 'total', num: true, cell: (item) => money(item.unitAmountCents) },
   tax: { kind: 'case', className: 'fx-dim', cell: (item) => TAX_LABELS[item.taxCode] ?? item.taxCode },
@@ -34,31 +41,79 @@ const toCents = (text) => {
 };
 
 export async function renderPriceList(main, ui) {
-  const { h, flow, toast, notice, dialog, pageHeader, me, settingRow } = ui;
+  const { h, flow, toast, notice, dialog, listHead, listFrame, me } = ui;
   const disabled = !['owner', 'admin'].includes(me?.person.role);
-  const host = h('div', { class: 'fx-price' }, h('div', { class: 'fx-skeleton' }));
-  let view = normaliseListView(me?.views?.['price-list'], PRICE_COLUMNS);
+  const host = h('div', { class: 'fx-panel' }, h('div', { class: 'fx-skeleton' }));
+  // The person's view (list-views.js): columns, Group, Sort and Filter,
+  // kept with their account.
+  let view = normalisePriceView(me?.views?.['price-list']);
   const saveView = viewSaver(ui, 'price-list');
+  function change(patch) {
+    view = normalisePriceView({ ...view, ...patch });
+    saveView(view);
+    views.draw();
+    if (data) draw();
+  }
+  const views = savedViews(ui, { page: 'price-list', current: () => view, apply: change });
+  const opening = views.opening();
+  if (opening) view = normalisePriceView(opening);
+  views.draw();
+
+  let data = null;
+  let query = '';
+  let tab = 'active';
+  let opened = new URLSearchParams(location.search).get('code');
+  const systemName = (id) => data?.systems.find((s) => s.id === id)?.name ?? id;
+  const taxName = (code) => TAX_LABELS[code] ?? code;
+
+  // Group, Sort and Filter: the same chips as on Jobs (view-bar.js).
+  const kindOf = (field) => PRICE_FIELDS[field]?.kind ?? null;
+  const fieldList = (keep = () => true) => Object.entries(PRICE_FIELDS).filter(([, f]) => keep(f)).map(([value, f]) => ({ value, label: f.label, icon: f.icon }));
+  const bar = viewBar(h);
+  const groupMenu = bar.groupMenu({ options: () => fieldList((f) => f.group), view: () => view, change });
+  const sortMenu = bar.sortMenu({
+    options: fieldList, view: () => view, change,
+    dirWords: (by) => (kindOf(by) === 'number' ? NUMBER_WORDS : ['A to Z', 'Z to A']),
+    nameOf: (by) => PRICE_FIELDS[by].label, empty: 'No sort. Codes show A to Z.',
+  });
+  const filterMenu = bar.filterMenu({
+    fields: fieldList, kindOf,
+    choicesOf: (field) => (field === 'tax' ? Object.entries(TAX_LABELS).map(([value, label]) => ({ value, label }))
+      : field === 'linked' ? (data?.systems ?? []).map((s) => ({ value: s.id, label: s.name })) : []),
+    view: () => view, change, first: 'tax', empty: 'No filters. Every code shows.',
+  });
+  const controls = h('div', { class: 'fx-viewbar', role: 'group', 'aria-label': 'Group, sort and filter' }, ...groupMenu.node, ...sortMenu.node, ...filterMenu.node);
+  const drawControls = () => {
+    groupMenu.set(view.group === 'none' ? 'Group' : `Group: ${PRICE_FIELDS[view.group].label}`, view.group !== 'none', view.group === 'none' ? null : () => change({ group: 'none' }));
+    sortMenu.draw();
+    filterMenu.draw();
+  };
+
+  // The list's columns (columns.js): each keeps its own width, saved with
+  // the person's account; + shows a hidden one again; a head sorts.
   const heads = columnTable(h, {
     order: () => view.columns,
     widths: () => view.widths,
-    change: (patch) => {
-      view = normaliseListView({ ...view, ...patch }, PRICE_COLUMNS);
-      saveView(view);
-      draw();
-    },
+    change,
     hidden: () => Object.keys(PRICE_COLUMNS).filter((id) => !view.columns.includes(id)).map((id) => ({ id, label: PRICE_COLUMNS[id] })),
+    sorting: { sortOf: (id) => (PRICE_FIELDS[id] ? id : null), sorts: () => view.sorts, change, dirWords: (by) => (kindOf(by) === 'number' ? NUMBER_WORDS : ['A to Z', 'Z to A']) },
   });
-  const addButton = h('button', { class: 'fx-btn fx-btn--primary', type: 'button', disabled }, 'Add code');
-  const reconcileButton = h('button', { class: 'fx-btn fx-btn--ghost', type: 'button', hidden: true, onclick: () => ui.go('/price-list/reconcile') }, 'Reconcile');
-  const alerts = alertStrip(ui, 'price-list');
-  main.append(pageHeader('Price list', { help: { href: DOCS, label: 'How the price list works' }, actions: [reconcileButton, addButton] }), alerts.element, host);
 
-  let data = null;
-  let query = '';
-  let tab = 'active';
-  let opened = new URLSearchParams(location.search).get('code');
-  const systemName = (id) => data.systems.find((s) => s.id === id)?.name ?? id;
+  const tabs = h('div', { class: 'fx-tabs', role: 'tablist' });
+  const find = findBox(h, { label: 'Find a code or name', value: query, oninput: (words) => { query = words; draw(); } });
+  const icon = (name, label, onclick) => h('button', { class: 'fx-btn fx-btn--ghost fx-btn--icon', type: 'button', 'aria-label': label, title: label, onclick }, lucide(h, name));
+  const reconcileButton = icon('git-compare-arrows', 'Reconcile', () => ui.go('/price-list/reconcile'));
+  reconcileButton.hidden = true;
+  const settingsButton = icon('settings', 'Price list settings', () => openSettings());
+  const addButton = h('button', { class: 'fx-btn fx-btn--primary', type: 'button', disabled, title: disabled ? 'Only an owner or admin can add a code' : null, onclick: () => edit(null) }, lucide(h, 'plus'), 'New');
+  const alerts = alertStrip(ui, 'price-list');
+  const listTop = listHead('Price list', {
+    actions: [reconcileButton, settingsButton, addButton],
+    views: views.element, start: tabs, controls, controlsAt: 'end', end: find.element, line: true, sticky: true,
+  });
+  const [title, ...top] = listTop.nodes;
+  const frame = listFrame(main, host);
+  main.append(title, alerts.element, ...top, frame.element);
 
   async function send(path, method, payload, done = 'Saved.') {
     try {
@@ -71,8 +126,6 @@ export async function renderPriceList(main, ui) {
     }
   }
 
-  const row = (label, hint, control) => settingRow({ label, hint, control });
-
   const findingText = (f) => {
     const name = systemName(f.system);
     if (f.kind === 'price') return `${name} price is ${money(f.other)}. Flow price is ${money(f.flow)}.`;
@@ -148,55 +201,70 @@ export async function renderPriceList(main, ui) {
     return load();
   }
 
-  async function linePriceRow() {
-    const select = h('select', { class: 'fx-select', 'aria-label': 'Line price from', disabled }, LINE_PRICES.map((p) => h('option', { value: p.value }, p.label)));
+  // The price list's settings: one dialog from the head's settings icon.
+  async function openSettings() {
+    const select = h('select', { class: 'fx-select', 'aria-label': 'Invoice line price', disabled }, LINE_PRICES.map((p) => h('option', { value: p.value }, p.label)));
+    let saved = 'work';
     try {
       const { automations } = await flow('/api/invoicing/automations');
-      select.value = automations.find((a) => a.key === 'map_lines')?.config.linePrice ?? 'work';
-    } catch {
-      select.value = 'work';
-    }
-    let saved = select.value;
-    select.addEventListener('change', async () => {
-      select.disabled = true;
-      if (await send('/api/invoicing/automations/map_lines', 'PUT', { config: { linePrice: select.value } })) saved = select.value;
-      else select.value = saved;
-      select.disabled = disabled;
+      saved = automations.find((a) => a.key === 'map_lines')?.config.linePrice ?? 'work';
+    } catch { /* the default shows */ }
+    select.value = saved;
+    const ok = await dialog({
+      title: 'Price list settings',
+      body: h('div', { class: 'fx-fields' }, h('label', { class: 'fx-field' }, h('span', { class: 'fx-label' }, 'Invoice line price'), select)),
+      confirm: 'Save',
     });
-    return row('Line price from', 'Where an invoice line takes its price.', select);
+    if (ok && select.value !== saved) await send('/api/invoicing/automations/map_lines', 'PUT', { config: { linePrice: select.value } });
   }
 
+  // A group's name: a choice's label, or Yes / No.
+  const groupLabel = (item) => {
+    const value = priceValue(item, view.group);
+    if (view.group === 'tax') return taxName(value);
+    if (view.group === 'linked') return value.length ? value.map(systemName).join(', ') : 'Not linked';
+    return value ? 'Differs' : 'Agrees';
+  };
+
   function draw() {
+    drawControls();
     const words = query.trim().toLowerCase();
     const live = data.items.filter((i) => !i.archivedAt);
     const archived = data.items.filter((i) => i.archivedAt);
-    const shown = (tab === 'archived' ? archived : live).filter((i) => !words || `${i.code} ${i.name}`.toLowerCase().includes(words));
+    const kept = filterJobs(tab === 'archived' ? archived : live, view, { valueOf: priceValue, kindOf, late: null, today: today() })
+      .filter((i) => !words || `${i.code} ${i.name}`.toLowerCase().includes(words));
+    const shown = sortJobs(kept, view, (item, by) => {
+      const value = priceValue(item, by);
+      return typeof value === 'string' ? value.toLowerCase() : value;
+    });
     const todo = data.systems.length ? reconcileRows(data).length : 0;
     reconcileButton.hidden = !data.systems.length;
-    reconcileButton.replaceChildren('Reconcile', todo ? h('span', { class: 'fx-tabs__count', 'data-tone': 'warn' }, String(todo)) : null);
-    reconcileButton.title = todo ? `${todo} records need a person` : 'Every record has a code, and every price agrees';
-
-    const search = h('input', { class: 'fx-input fx-search', type: 'search', placeholder: 'Find a code', value: query, 'aria-label': 'Find a code' });
-    search.addEventListener('input', () => { query = search.value; draw(); search.focus(); search.setSelectionRange(query.length, query.length); });
-    const tabs = h('div', { class: 'fx-tabs', role: 'tablist' }, [['active', 'Active', live.length], ['archived', 'Archived', archived.length]].map(([id, label, count]) => h('button', {
+    reconcileButton.title = todo ? `Reconcile: ${todo} to check` : 'Reconcile';
+    frame.count(`${shown.length} ${shown.length === 1 ? 'code' : 'codes'}`);
+    tabs.replaceChildren(...[['active', 'Active', live.length], ['archived', 'Archived', archived.length]].map(([id, label, count]) => h('button', {
       type: 'button', role: 'tab', 'aria-selected': String(tab === id), onclick: () => { tab = id; draw(); },
     }, label, h('span', { class: 'fx-tabs__count' }, String(count)))));
-    const columns = view.columns.map((id) => ({ id, label: PRICE_COLUMNS[id], ...COLUMN_DEFS[id] }));
-    const itemRow = (item) => h('tr', { onclick: () => edit(item), tabindex: '0', onkeydown: (event) => { if (event.key === 'Enter') edit(item); } },
-      rowCells(h, columns, item),
-      h('td', { class: 'fx-c-end' }));
-    const table = shown.length
-      ? h('div', { class: 'fx-panel' }, heads.table({ className: 'fx-table--rows fx-price__table', columns, rows: h('tbody', {}, shown.map(itemRow)) }))
-      : h('p', { class: 'fx-empty' }, words ? 'No code matches.' : tab === 'archived' ? 'No archived codes.' : 'No codes yet. Add the first one.');
-    const sections = [
-      disabled ? notice('Only an owner or admin can change these.', 'info') : null,
-      h('div', { class: 'fx-toolbar fx-price__head' }, tabs, search),
-      table,
-    ];
-    const settings = h('section', { class: 'fx-set fx-price__settings' }, h('h2', { class: 'fx-set__title' }, 'Invoice lines'), h('div', { class: 'fx-skeleton' }));
-    linePriceRow().then((r) => settings.replaceChildren(settings.firstChild, r));
-    sections.push(settings);
-    host.replaceChildren(...sections.filter(Boolean));
+
+    if (!shown.length) {
+      host.replaceChildren(h('p', { class: 'fx-empty' }, words || view.groups.length ? 'No code matches.' : tab === 'archived' ? 'No archived codes.' : 'No codes yet.'));
+    } else {
+      const columns = view.columns.map((id) => ({ id, label: PRICE_COLUMNS[id], ...COLUMN_DEFS[id] }));
+      const itemRow = (item) => h('tr', { class: 'fx-row-link', tabindex: '0', onclick: () => edit(item), onkeydown: (event) => { if (event.key === 'Enter') edit(item); } },
+        rowCells(h, columns, item),
+        h('td', { class: 'fx-c-end' }));
+      const groups = view.group === 'none' ? [{ label: null, jobs: shown }] : groupJobs(shown, [], groupLabel)
+        .sort((x, y) => x.label.localeCompare(y.label) * (view.groupDir === 'desc' ? -1 : 1));
+      const head = ({ label, jobs }) => groupHead(h, {
+        label: `${label}, ${jobs.length} ${jobs.length === 1 ? 'code' : 'codes'}`,
+        badge: h('span', { class: 'fx-strong' }, label, ' ', h('span', { class: 'fx-tabs__count' }, String(jobs.length))),
+        open: !folded.has(label), onFold: () => { if (folded.has(label)) folded.delete(label); else folded.add(label); draw(); },
+        span: columns.length + 1,
+      });
+      host.replaceChildren(heads.table({
+        className: 'fx-table--rows fx-price__table', columns,
+        rows: groups.map((g) => h('tbody', {}, g.label == null ? null : head(g), g.label != null && folded.has(g.label) ? null : g.jobs.map(itemRow))),
+      }));
+    }
     // Opened from Reconcile's "Edit code": that code's dialog, once.
     if (opened) {
       const item = data.items.find((i) => i.id === opened);
@@ -205,6 +273,8 @@ export async function renderPriceList(main, ui) {
       if (item) edit(item);
     }
   }
+  // Folded groups, for this visit.
+  const folded = new Set();
 
   async function load() {
     try {
@@ -216,6 +286,5 @@ export async function renderPriceList(main, ui) {
     draw();
   }
 
-  addButton.addEventListener('click', () => edit(null));
   await load();
 }

package/server/ui/routes.js

@@ -12,6 +12,7 @@ import { themeStylesheet } from '../theme/themes.js';
 //   /assets/ui/<file>        Flow's components (flow.css) and page scripts
 //   /assets/fonts/<pkg>/…    the families' faces (server/theme/font-families.js)
 //   /assets/icons/<name>.svg one Lucide icon (lucide-static, ISC), for any page
+//   /assets/icons/tags.json  each Lucide icon's words, for the icon picker
 // Only the files named here are served. They change only with a release, so
 // browsers may keep them for an hour.
 
@@ -21,7 +22,7 @@ const themeDir = join(here, '..', 'theme');
 const logoDir = join(here, 'logos');
 const LOGO_FILES = new Set(['xero.svg', 'seazona.svg', 'sentry.svg']);
 const THEME_FILES = new Set(['themes.js', 'color-contrast.js', 'openclaw-palettes.js', 'font-families.js']);
-export const UI_FILES = new Set(['flow.css', 'appearance.js', 'clerk-appearance.js', 'app.js', 'invoicing.js', 'invoice-notes.js', 'job-change.js', 'sidecar.js', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'line-mappings.js', 'price-list.js', 'price-match.js', 'price-reconcile.js', 'custom-fields.js', 'contacts.js', 'xero-contact.js', 'jobs.js', 'job-board.js', 'reconcile.js', 'xero-import.js', 'xero-usage.js', 'xero-usage-model.js', 'job-view.js', 'list-views.js', 'saved-views.js', 'monitoring.js', 'search.js', 'alerts.js', 'bulk-bar.js', 'view-bar.js', 'tip.js', 'kit.js', 'columns.js', 'mobile.js', 'person.js', 'pager.js', 'nav-pins.js', 'flow-mark.svg']);
+export const UI_FILES = new Set(['flow.css', 'appearance.js', 'clerk-appearance.js', 'app.js', 'invoicing.js', 'invoice-notes.js', 'job-change.js', 'sidecar.js', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'line-mappings.js', 'price-list.js', 'price-match.js', 'price-reconcile.js', 'custom-fields.js', 'contacts.js', 'xero-contact.js', 'jobs.js', 'job-board.js', 'reconcile.js', 'xero-import.js', 'xero-usage.js', 'xero-usage-model.js', 'job-view.js', 'list-views.js', 'saved-views.js', 'monitoring.js', 'search.js', 'alerts.js', 'bulk-bar.js', 'view-bar.js', 'tip.js', 'kit.js', 'columns.js', 'mobile.js', 'person.js', 'captures.js', 'capture-fields.js', 'pager.js', 'nav-pins.js', 'flow-mark.svg']);
 const iconDir = join(dirname(require.resolve('lucide-static/package.json')), 'icons');
 const ICON_FILE = /^[a-z0-9]+(?:-[a-z0-9]+)*\.svg$/;
 const MAX_AGE = '1h';
@@ -58,6 +59,8 @@ export function createUiAssetsRouter({ rateLimitPerMinute = 600 } = {}) {
     if (!ICON_FILE.test(req.params.file)) return next();
     sendNamed(res, next, iconDir, req.params.file);
   });
+  // Each icon's words, for the icon picker's search (kit.js iconPicker).
+  router.get('/assets/icons/tags.json', (_req, res, next) => sendNamed(res, next, dirname(iconDir), 'tags.json'));
 
   for (const name of FONT_PACKAGES) {
     const dir = dirname(require.resolve(`@fontsource-variable/${name}/LICENSE`));

package/server/ui/saved-views.js

@@ -116,6 +116,8 @@ export function savedViews(ui, { page, current, apply }) {
         }, isDefault ? lucide(h, 'house', 'Your default') : null, h('span', { class: 'fx-views__name' }, v.name), on && changed ? h('span', { class: 'fx-views__dot', 'aria-label': 'Changed', title: 'Changed' }) : null),
         more, menu);
     });
+    // A tab list needs tabs: with no saved view yet it is a plain group.
+    element.setAttribute('role', tabs.length ? 'tablist' : 'group');
     element.replaceChildren(...[
       ...tabs,
       saved.list.length < MAX_SAVED_VIEWS ? h('button', { type: 'button', class: 'fx-views__add', title: 'Save as a view', onclick: addView }, lucide(h, 'plus'), 'View') : null,