@arcforgelabs/flow 2026.10.51 → 2026.10.53-1

package/server/ui/flow.css

@@ -199,7 +199,9 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 .fx-tip {
   position: fixed; top: 0; left: 0; z-index: 1000; max-width: 260px; padding: 4px 8px;
   border: 1px solid var(--fx-line); border-radius: var(--t-radius); background: var(--t-paper); color: var(--t-strong);
-  font: 500 12px/1.3 var(--t-body); pointer-events: none; white-space: nowrap;
+  font: 500 12px/1.3 var(--t-body); pointer-events: none;
+  /* A short name keeps one line; a long help text wraps inside the box. */
+  width: max-content; overflow-wrap: anywhere;
   box-shadow: var(--t-shadow), 0 4px 12px rgba(0, 0, 0, .12);
 }
 
@@ -382,7 +384,7 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
 
 /* One integration's page: hero, then the setup beside its facts. */
 .fx-int-page { display: grid; gap: 24px; }
-.fx-int-hero { display: flex; align-items: center; gap: 14px; min-width: 0; }
+.fx-int-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; min-width: 0; }
 .fx-int-hero .fx-title { min-width: 0; font-size: 28px; overflow-wrap: anywhere; }
 .fx-int-hero__actions { position: relative; display: flex; align-items: center; gap: 10px; margin-left: auto; }
 .fx-int-hero__actions .fx-progress { left: auto; right: 0; }
@@ -399,6 +401,9 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
 .fx-int-fold > summary::after { content: ''; width: 8px; height: 8px; margin-left: 2px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform 120ms var(--fx-ease); }
 .fx-int-fold[open] > summary::after { transform: rotate(45deg) translateY(-2px); }
 .fx-int-fold:not([open]) { gap: 0; }
+/* A fold inside a section (Settings, Advanced). */
+.fx-int-fold--sub { display: grid; gap: 14px; }
+.fx-int-fold--sub > summary { color: var(--t-dim); font: 600 14.5px/1.3 var(--t-body); }
 .fx-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
 .fx-steps li { position: relative; padding-left: 38px; min-height: 26px; counter-increment: step; font-size: 14.5px; line-height: 1.55; }
 .fx-steps li::before {
@@ -561,7 +566,10 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-totals dd { margin: 0; text-align: right; font-family: var(--t-data, var(--t-body)); font-variant-numeric: tabular-nums; color: var(--t-strong); }
 .fx-totals__grand { padding-top: 8px; border-top: 1px solid var(--fx-line); font-size: 17px; font-weight: 700; color: var(--t-strong) !important; }
 .fx-doc__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 20px; border-bottom: 1px solid var(--fx-line-soft); }
-.fx-doc__meta dd { display: grid; margin: 4px 0 0; color: var(--t-strong); font-weight: 600; }
+.fx-doc__meta dd { display: grid; margin: 4px 0 0; color: var(--t-strong); font-weight: 600; overflow-wrap: anywhere; }
+/* A long value stays in its column: text wraps, an email cuts with "…" (full value on hover). */
+.fx-doc__meta > div, .fx-doc__meta dd > * { min-width: 0; }
+.fx-doc__meta dd > .fx-dim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 @media (max-width: 1320px) {
   .fx-invoice__grid { grid-template-columns: minmax(0, 1fr); }
   .fx-invoice__aside { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@@ -747,7 +755,7 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-table__group-row .fx-board__sum { margin-left: 0; }
 /* The Jobs list's group head folds its rows (jobs.js, list): a click on the
    head or its chevron. */
-.fx-table--jobs .fx-table__group { cursor: pointer; }
+.fx-table__group { cursor: pointer; }
 .fx-table--jobs .fx-table__group td.fx-tick-cell { padding-right: 0; }
 .fx-table__fold { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 4px 2px 0; border: 0; background: none; color: var(--t-dim); font: inherit; cursor: pointer; }
 .fx-table__fold > svg { flex: none; transition: transform .15s; }
@@ -1064,6 +1072,39 @@ th:hover > .fx-th-grip::after { background: var(--t-brd-hi); }
 .fx-task__activity li::after { content: ""; position: absolute; left: 5.5px; top: 16px; bottom: 0; width: 1px; background: var(--fx-line); }
 .fx-task__activity li:last-child::after { display: none; }
 .fx-task__activity time { display: block; margin-top: 1px; color: var(--t-mute); font-size: 11.5px; }
+/* Capture (server/ui/captures.js): the tray rows and the result sheet. The
+   sheet reuses the job panel (.fx-task), so a phone gets the same full page. */
+.fx-captures { margin: 0; padding: 0; list-style: none; }
+.fx-captures__row {
+  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 16px;
+  border: 0; border-bottom: 1px solid var(--fx-line-soft); background: transparent; color: var(--t-text);
+  font: inherit; text-align: left; cursor: pointer;
+}
+.fx-captures__row:hover:not(:disabled) { background: var(--t-accent-bg); }
+.fx-captures__row:focus-visible { box-shadow: var(--fx-focus); }
+.fx-captures__row:disabled { cursor: default; }
+.fx-captures__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t-strong); }
+.fx-dialog.fx-capture { width: min(720px, calc(100vw - 32px)); }
+.fx-capture .fx-task__grid { grid-template-columns: minmax(0, 1fr); }
+.fx-capture__photo { display: block; width: 100%; max-height: 32vh; object-fit: contain; border-radius: var(--t-radius); background: var(--t-bg); }
+.fx-capture__changes { display: grid; margin-top: 12px; }
+.fx-capture__change {
+  display: grid; grid-template-columns: minmax(80px, 1fr) minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px;
+  min-height: 44px; padding: 4px 8px; border-bottom: 1px solid var(--fx-line-soft);
+}
+.fx-capture__field { color: var(--t-dim); }
+.fx-capture__where { display: block; font-size: 12px; color: var(--t-dim); }
+.fx-capture__from { color: var(--t-dim); text-decoration: line-through; overflow-wrap: anywhere; }
+.fx-capture__arrow { color: var(--t-dim); }
+.fx-capture__to { color: var(--t-strong); font-weight: 600; overflow-wrap: anywhere; }
+.fx-capture__change[data-unsure="true"] { background: var(--t-warn-bg); }
+.fx-capture__change[data-unsure="true"] .fx-capture__to { color: var(--t-warn); }
+/* Phones and tablets: Capture and the sheet's controls are thumb sized. */
+@media (max-width: 1023px) {
+  .fx-dialog.fx-capture .fx-task__actions .fx-btn { min-height: 44px; }
+  .fx-dialog.fx-capture .fx-task__tools .fx-btn--icon { width: 44px; height: 44px; }
+}
+
 /* A record's phone bar and foot. Hidden above a phone, so the desk panel and
    the invoice header stay as they are. */
 .fx-record, .fx-record__foot { display: none; }
@@ -1246,6 +1287,9 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-setting__head { display: flex; align-items: center; gap: 2px; min-width: 0; }
 .fx-setting__head .fx-help { margin: -4px 0; border: 0; background: none; cursor: pointer; }
 .fx-setting__hint { margin: 0; color: var(--t-dim); font-size: 13px; line-height: 1.45; }
+.fx-history__status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.fx-history__day { width: 160px; flex: none; }
+.fx-history__bar { width: 100%; height: 8px; accent-color: var(--t-brand); }
 .fx-setting[data-tone="danger"] .fx-setting__hint { color: var(--t-danger); }
 .fx-setting__control { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
 .fx-setting__control > .fx-input, .fx-setting__control > .fx-select, .fx-setting__stack { width: 320px; max-width: 100%; }
@@ -1457,6 +1501,8 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   }
   /* Line 2 is 20px; its cells centre on it. */
   [data-phone-layout="two-line"] .fx-table td[data-phone-slot="meta"] { display: flex; align-items: center; overflow: visible; }
+  /* Plain text on line 2 ends in "…" instead of running under the next cell. */
+  [data-phone-layout="two-line"] .fx-table td[data-phone-slot="meta"]:not(:has(*)) { display: block; overflow: hidden; line-height: 20px; }
   [data-phone-layout="two-line"] td.fx-c-stage,
   [data-phone-layout="two-line"] td.fx-c-status { order: 4; color: inherit; }
   [data-phone-layout="two-line"] .fx-stage { padding-block: 0; line-height: 16px; }
@@ -1506,20 +1552,9 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-set__title { margin: 8px 0 4px; color: var(--t-strong); font: 600 15px/1.3 var(--t-body); }
 .fx-set__hint { color: var(--t-dim); font-size: 13px; line-height: 1.35; }
 .fx-set + .fx-set { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--fx-line); }
-/* Price list (price-list.js): one plain table of Flow's codes. */
-.fx-price { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
-.fx-price__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; }
-.fx-price__head .fx-search { margin: 0 0 6px; width: 260px; }
-@media (max-width: 639px) {
-  .fx-price__head .fx-search { width: 100%; }
-  .fx-price__settings .fx-select { min-height: 44px; }
-}
-.fx-price__table th { position: sticky; top: 0; z-index: 1; }
-.fx-price__table td { padding-top: 9px; padding-bottom: 9px; }
+/* Price list (price-list.js): the codes' table, in the list window. */
 .fx-price__table td.fx-num, .fx-price__table th.fx-num { text-align: right; white-space: nowrap; }
 .fx-price__code { width: 1%; white-space: nowrap; font-family: var(--t-data); font-size: 13px; font-weight: 600; color: var(--t-strong); }
-.fx-price__settings { margin-top: 12px; }
-.fx-ph__actions .fx-tabs__count[data-tone="warn"], .fx-btn .fx-tabs__count[data-tone="warn"] { margin-left: 8px; background: var(--t-warn-bg); color: var(--t-warn); }
 /* Price list › Reconcile (price-reconcile.js): Xero › Import's two views. */
 .fx-prc .fx-pager { margin-bottom: 4px; }
 .fx-prc__finder { display: flex; flex-direction: column; gap: 4px; }
@@ -1559,6 +1594,40 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-cf__choice[aria-checked="true"] { background: var(--fx-hover); color: var(--t-strong); }
 .fx-cf__choice > :first-child { justify-self: start; }
 .fx-cf__choice .fx-lucide { width: 15px; height: 15px; color: var(--t-accent); }
+/* Icon picker (kit.js iconPicker): the button shows the icon; the panel is a
+   search box over a grid of icons. A phone gets a sheet at the foot. */
+.fx-icons { display: inline-flex; }
+.fx-icons__button {
+  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px 0 10px;
+  border: 1px solid var(--t-control); border-radius: var(--t-radius); background: var(--t-paper); color: var(--t-strong); cursor: pointer;
+}
+.fx-icons__button > .fx-lucide { width: 18px; height: 18px; }
+.fx-icons__button > .fx-lucide + .fx-lucide { width: 14px; height: 14px; color: var(--t-dim); }
+.fx-icons__button:hover { background: var(--fx-hover); }
+.fx-icons__button:focus-visible { box-shadow: var(--fx-focus); outline: none; }
+.fx-pop.fx-icons__panel { width: 316px; max-width: calc(100vw - 16px); padding: 8px; overflow: hidden; }
+.fx-icons__panel:popover-open { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; }
+.fx-icons__panel .fx-input { min-height: 32px; font-size: 13px; }
+.fx-icons__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 2px; max-height: 248px; overflow-y: auto; }
+.fx-icons__grid > p { grid-column: 1 / -1; margin: 8px 4px; }
+.fx-icons__cell {
+  display: inline-grid; place-items: center; aspect-ratio: 1; min-width: 36px; border: 0; border-radius: var(--t-radius);
+  background: none; color: var(--t-text); cursor: pointer;
+}
+.fx-icons__cell .fx-lucide { width: 18px; height: 18px; }
+.fx-icons__cell:hover, .fx-icons__cell:focus-visible { background: var(--fx-hover); color: var(--t-strong); outline: none; }
+.fx-icons__cell[aria-pressed="true"] { background: var(--t-accent-bg); color: var(--t-accent); box-shadow: inset 0 0 0 1px var(--t-accent-brd, var(--t-accent)); }
+.fx-icons__foot { display: flex; justify-content: flex-end; }
+.fx-icons__foot > [hidden] { display: none; }
+.fx-pop.fx-icons__panel[data-phone-layout="sheet"] {
+  inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: min(70vh, 100%); padding: 12px 12px max(12px, env(safe-area-inset-bottom));
+  border-radius: var(--t-radius-lg) var(--t-radius-lg) 0 0;
+}
+.fx-icons__panel[data-phone-layout="sheet"] .fx-input { min-height: 44px; font-size: 16px; }
+.fx-icons__panel[data-phone-layout="sheet"] .fx-icons__grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); max-height: none; }
+.fx-icons__panel[data-phone-layout="sheet"] .fx-icons__cell { min-width: 44px; }
+.fx-icons__panel[data-phone-layout="sheet"] .fx-icons__cell .fx-lucide { width: 22px; height: 22px; }
+.fx-icons__panel[data-phone-layout="sheet"] .fx-icons__foot .fx-btn { min-height: 44px; }
 /* Custom fields manager (custom-fields.js), like ClickUp's Custom Field
    Manager: a toolbar, then one table of type groups that fold. */
 .fx-lucide { display: inline-block; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
@@ -1614,7 +1683,6 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-cfm__create .fx-lucide { width: 14px; height: 14px; }
 .fx-cfm__empty { margin: 0; padding: 20px 16px; color: var(--t-dim); }
 .fx-cfm > .fx-notice { margin: 12px 16px 0; }
-.fx-cfm__foot { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--fx-line-soft); color: var(--t-dim); font-size: 13px; }
 .fx-pop__item:disabled { opacity: .5; cursor: default; }
 .fx-pop__item[data-tone="danger"], .fx-pop__item[data-tone="danger"] .fx-pop__tick { color: var(--t-danger); }
 .fx-pop__item .fx-lucide { width: 15px; height: 15px; }
@@ -1691,6 +1759,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .fx-cfm__head, .fx-cfm__row { padding-left: 16px; }
   .fx-cfm__create { padding-left: 16px; }
   .fx-cfm__search { flex: 1 1 100%; width: auto; }
+  .fx-cfm__bar :is(.fx-cfm__search, .fx-cfm__tool, .fx-btn) { height: auto; min-height: 44px; }
   .fx-cfm__edit { display: none !important; }
   /* Custom fields uses the same phone slots as a column list: name and the
      menu on line 1, up to three facts on line 2, 56px. */
@@ -1714,6 +1783,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-rule__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
 .fx-dialog:has(.fx-rule__dialog) { width: min(680px, calc(100vw - 32px)); }
 .fx-rule__dialog .fx-btn--sm { justify-self: start; }
+.fx-rule__name { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
 .fx-rule__conditions { display: grid; gap: 8px; }
 .fx-rule__condition { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: start; }
 .fx-rule__condition + .fx-rule__condition { padding-top: 8px; border-top: 1px solid var(--fx-line); }
@@ -1830,10 +1900,13 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-listhead > .fx-toolbar > .fx-tabs button { padding-block: 9px; }
 /* Every control in the toolbar is one height (--fx-control-h). Under a
    tab line, the controls keep 8px clear of the line; only the tabs sit on it. */
+/* A finger needs 44px: on a phone or tablet every list's toolbar controls
+   are that tall (the ListHead card's touch rule). */
+@media (max-width: 1023px) { .fx-listhead { --fx-control-h: 44px; } }
 .fx-listhead .fx-toolbar :is(.fx-btn, .fx-chip, .fx-views__add, .fx-views__tab) { min-height: var(--fx-control-h); }
 .fx-listhead .fx-toolbar .fx-btn:not(.fx-btn--sm) { padding-block: 0; font-size: 14px; }
 .fx-listhead .fx-toolbar :is(.fx-btn, .fx-chip) { height: var(--fx-control-h); }
-.fx-listhead .fx-toolbar .fx-find__button { width: var(--fx-control-h); height: var(--fx-control-h); }
+.fx-listhead .fx-toolbar :is(.fx-find__button, .fx-btn--icon) { width: var(--fx-control-h); height: var(--fx-control-h); }
 .fx-listhead .fx-toolbar .fx-find__input { height: var(--fx-control-h); }
 .fx-listhead .fx-toolbar .fx-seg { padding: 2px; }
 .fx-listhead .fx-toolbar .fx-seg__item { min-height: calc(var(--fx-control-h) - 4px); }
@@ -1846,6 +1919,9 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .fx-listhead[data-sticky] { position: static; margin-top: 0; padding-top: 0; }
   .fx-listhead__edge + .fx-listhead[data-sticky] { margin-top: -8px; }
   .fx-alerts { margin-bottom: 4px; }
+  /* The tools have their own row under the tabs: no gap under them, so the
+     44px controls still leave seven rows on a small phone. */
+  .fx-listhead > .fx-toolbar:not(.fx-toolbar--plain) > :not(.fx-tabs) { margin-bottom: 0; }
 }
 
 /* The bulk action bar (bulk-bar.js): floats at the foot while rows are

package/server/ui/invoice-rules.js

@@ -18,6 +18,9 @@ const ACTION_LABELS = { wait: 'Wait for a person', skip: 'Never draft', pending:
 const NO_VALUE = ['is_empty', 'is_not_empty', 'has_number', 'number_in_words', 'one_word'];
 const MANY = ['is_one_of', 'is_not_one_of'];
 const TYPED = ['contains', 'does_not_contain', 'starts_with', 'does_not_start_with'];
+// A rule's icon: its own (rule.icon), else the mark of what it does.
+const KIND_MARKS = { pending: 'flag', wait: 'clock', skip: 'ban' };
+export const ruleMark = (rule) => rule.icon ?? KIND_MARKS[rule.action.kind] ?? 'list-checks';
 
 // A rule as one short line: "Job age (days) is more than 90 · Wait for a person".
 export function ruleSummary(rule, meta) {
@@ -42,7 +45,7 @@ export function ruleSummary(rule, meta) {
 }
 
 export function rulesSection(ui, title = 'Rules') {
-  const { h, flow, toast, notice, dialog, me, settingRow } = ui;
+  const { h, flow, toast, notice, dialog, me, settingRow, iconPicker } = ui;
   const disabled = !['owner', 'admin'].includes(me?.person.role);
   const section = h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, title), h('div', { class: 'fx-skeleton' }));
   let meta;
@@ -153,6 +156,10 @@ export function rulesSection(ui, title = 'Rules') {
     const action = h('select', { class: 'fx-select', 'aria-label': 'Then' },
       Object.entries(ACTION_LABELS).map(([value, label]) => h('option', { value }, label)));
     action.value = draft?.action.kind ?? 'wait';
+    // With no icon of its own, the rule shows the mark of its Then.
+    const kindMark = () => ruleMark({ action: { kind: action.value } });
+    const icon = iconPicker({ value: draft?.icon ?? null, fallback: kindMark(), label: 'Icon' });
+    action.addEventListener('change', () => icon.fallback(kindMark()));
     // A pending rule's note: what a person must fix. It shows on the draft.
     const note = h('input', {
       class: 'fx-input', maxlength: '200', value: draft?.action.note ?? '', 'aria-label': 'Note',
@@ -191,7 +198,7 @@ export function rulesSection(ui, title = 'Rules') {
     const data = await dialog({
       title: rule ? 'Edit rule' : 'New rule',
       body: h('div', { class: 'fx-fields fx-rule__dialog' },
-        label('Name', name),
+        h('div', { class: 'fx-rule__name' }, label('Icon', icon.element), label('Name', name)),
         label('When', h('span', { class: 'fx-dim' }, 'A job is ready to invoice. A pending rule also checks its draft and the Reference.')),
         label('If all of these match', list, more),
         label('Then', action),
@@ -207,6 +214,7 @@ export function rulesSection(ui, title = 'Rules') {
     if (!data) return null;
     const payload = {
       name: name.value,
+      icon: icon.value(),
       conditions: editors.map((e) => e.read()),
       action: action.value === 'pending' ? { kind: 'pending', note: note.value } : { kind: action.value },
     };

package/server/ui/invoicing-settings.js

@@ -10,7 +10,7 @@
 // or admin changes them. The full rules are in docs/INVOICING_RULES.md.
 // app.js passes in its shared pieces as `ui`.
 
-import { rulesSection } from '/assets/ui/invoice-rules.js';
+import { ruleMark, rulesSection } from '/assets/ui/invoice-rules.js';
 import { lineMappingSection } from '/assets/ui/line-mappings.js';
 
 const DOCS = 'https://github.com/arcforgelabs/flow/blob/main/docs/INVOICING_RULES.md';
@@ -27,12 +27,6 @@ const PARTS = [
   { key: 'price-codes', title: 'Price codes', mount: (ui) => lineMappingSection(ui) },
 ];
 
-// What a rule does, as its card's mark: Pending, Waits, Never drafted.
-const KIND = {
-  pending: { mark: 'flag' },
-  wait: { mark: 'clock' },
-  skip: { mark: 'ban' },
-};
 const SHOWN = 6;
 
 export function renderInvoicingSettings(main, ui, id) {
@@ -60,7 +54,7 @@ export function renderInvoicingSettings(main, ui, id) {
       return;
     }
     const ruleCard = (rule) => tileCard({
-      row: true, href: page('invoices'), mark: (KIND[rule.action.kind] ?? { mark: 'list-checks' }).mark, title: rule.name,
+      row: true, href: page('invoices'), mark: ruleMark(rule), title: rule.name,
       meta: rule.enabled ? 'On' : 'Off',
     });
     const waiting = labels.filter((l) => l.unmapped > 0).length;

package/server/ui/invoicing.js

@@ -641,16 +641,20 @@ export async function renderInvoiceList(main, ui) {
     };
     const href = (invoice) => `/invoices/${invoice.id}`;
     const ALL = {
-      number: numbered ? { kind: 'number', cell: (i) => link(href(i), i.number ?? 'Draft') } : null,
-      client: { kind: 'client', phone: 'title', cell: (i) => (numbered ? (i.contactName ?? '—') : link(href(i), i.contactName ?? 'No client')) },
+      // The client is the row's link: on a phone it is the title, with a 44px hit area.
+      number: numbered ? { kind: 'number', phone: 'meta', className: 'fx-strong', cell: (i) => i.number ?? 'Draft' } : null,
+      client: { kind: 'client', phone: 'title', cell: (i) => link(href(i), i.contactName ?? 'No client') },
+      // A phone row: the client (and number) and total, then the problem,
+      // the reference or the status, and the date. A tab without numbers
+      // holds one status: its tab says it.
       reference: showProblem
-        ? { label: 'Problem', kind: 'text', cell: problemCell }
-        : { kind: 'text', className: 'fx-dim', cell: (i) => i.reference ?? '—' },
-      date: { label: created ? 'Created' : 'Date', kind: 'date', className: 'fx-dim', cell: (i) => dateCell(h, i.issueDate ?? i.createdAt?.slice(0, 10)) },
+        ? { label: 'Problem', kind: 'text', phone: 'meta', cell: problemCell }
+        : { kind: 'text', className: 'fx-dim', phone: numbered ? 'hide' : 'meta', cell: (i) => i.reference ?? '—' },
+      date: { label: created ? 'Created' : 'Date', kind: 'date', className: 'fx-dim', phone: 'meta', cell: (i) => dateCell(h, i.issueDate ?? i.createdAt?.slice(0, 10)) },
       due: { kind: 'date', className: 'fx-dim', cell: (i) => dateCell(h, i.dueDate) },
       total: { kind: 'total', num: true, className: 'fx-strong', cell: (i) => formatCents(i.totalCents) },
-      status: { kind: 'status', className: 'fx-status-cell', cell: statusCell },
-      linked: linked ? { kind: 'link', cell: linkCell } : null,
+      status: { kind: 'status', className: 'fx-status-cell', ...(numbered ? {} : { phone: 'hide' }), cell: statusCell },
+      linked: linked ? { kind: 'link', phone: 'hide', cell: linkCell } : null,
       // The invoice's job (from the work system): its case, practitioner and
       // the day it shipped.
       case: { kind: 'case', className: 'fx-dim', cell: (i) => (i.job ? caseNumber(i.job) ?? '—' : '—') },
@@ -1449,7 +1453,7 @@ function issuedView(invoice, ui, context, redraw) {
       h('div', { class: 'fx-invoice__main' },
         h('section', { class: 'fx-card fx-doc' },
           h('dl', { class: 'fx-doc__meta' },
-            h('div', {}, h('dt', { class: 'fx-label' }, 'Bill to'), h('dd', {}, invoice.contact?.name ?? '—', invoice.contact?.email ? h('span', { class: 'fx-dim' }, invoice.contact.email) : null)),
+            h('div', {}, h('dt', { class: 'fx-label' }, 'Bill to'), h('dd', {}, invoice.contact?.name ?? '—', invoice.contact?.email ? h('span', { class: 'fx-dim', title: invoice.contact.email }, invoice.contact.email) : null)),
             h('div', {}, h('dt', { class: 'fx-label' }, 'Reference'), h('dd', {}, invoice.reference ?? '—')),
             h('div', {}, h('dt', { class: 'fx-label' }, 'Date'), h('dd', {}, showDate(invoice.issueDate))),
             h('div', {}, h('dt', { class: 'fx-label' }, 'Due'), h('dd', {}, showDate(invoice.dueDate)))),

package/server/ui/job-view.js

@@ -273,7 +273,10 @@ function inDateValue(day, want, today, late) {
 // person looking (for "Me" in a person filter); `today` is yyyy-mm-dd.
 export function matchesFilter(filter, value, { today, me = null, late = null, kind = null } = {}) {
   const want = filter.value;
-  const empty = value == null || value === '' || value === false;
+  // A field can hold many choices (the Price list's Linked): Is keeps a row
+  // with any of the wanted ones, Is not a row with none.
+  const empty = value == null || value === '' || value === false || (Array.isArray(value) && !value.length);
+  const holds = (w) => (Array.isArray(value) ? value.includes(w) : value === w);
   const day = typeof value === 'string' && ISO_DAY.test(value.slice(0, 10)) ? value.slice(0, 10) : null;
   if (kind === 'date' && ['is', 'not'].includes(filter.op)) {
     const inside = inDateValue(day, want, today, late);
@@ -284,8 +287,8 @@ export function matchesFilter(filter, value, { today, me = null, late = null, ki
     case 'unset': return empty;
     case 'yes': return value === true;
     case 'no': return value !== true;
-    case 'is': return Array.isArray(want) ? want.map((w) => (w === 'me' ? me : w)).includes(value) : !empty && text(value) === text(want).trim();
-    case 'not': return !want.map((w) => (w === 'me' ? me : w)).includes(value);
+    case 'is': return Array.isArray(want) ? want.map((w) => (w === 'me' ? me : w)).some(holds) : !empty && text(value) === text(want).trim();
+    case 'not': return !want.map((w) => (w === 'me' ? me : w)).some(holds);
     case 'has': return text(value).includes(text(want).trim());
     case 'hasnt': return !text(value).includes(text(want).trim());
     case 'eq': return typeof value === 'number' && value === want;

package/server/ui/jobs.js

@@ -13,7 +13,8 @@
 // long press opens Move to. With a keyboard, the job's panel has the same moves.
 
 import { bulkBar } from '/assets/ui/bulk-bar.js';
-import { columnTable, dateCell, fieldColumn, onRightButton, personCell, rowCells, viewSaver } from '/assets/ui/columns.js';
+import { captureButton } from '/assets/ui/captures.js';
+import { columnTable, dateCell, fieldColumn, groupHead, personCell, rowCells, viewSaver } from '/assets/ui/columns.js';
 import { lucide } from '/assets/ui/custom-fields.js';
 import { formatCents } from '/assets/ui/invoicing.js';
 import { jobChangeReview } from '/assets/ui/job-change.js';
@@ -92,7 +93,6 @@ function saveSide(tab) {
 
 const WARN_ICON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 15 14H1z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 6v3.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="11.6" r=".9" fill="currentColor"/></svg>';
 const PERSON_ICON = '<svg width="13" height="13" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="5.5" r="3" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M2.5 14c.6-2.8 2.8-4.3 5.5-4.3s4.9 1.5 5.5 4.3" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>';
-const CHEVRON_ICON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
 const CALENDAR_ICON = '<svg width="13" height="13" viewBox="0 0 16 16" aria-hidden="true"><rect x="2" y="3" width="12" height="11" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M2 6.5h12M5.5 1.5v3M10.5 1.5v3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>';
 
 export async function renderJobs(main, ui) {
@@ -126,7 +126,9 @@ export async function renderJobs(main, ui) {
   // In the list, ticked rows get the same floating bar as Invoices.
   const bulk = bulkBar(ui, { label: 'Ticked jobs' });
   const frame = listFrame(main, host);
-  main.append(...listHead('Jobs', { views: views.element, controls, end: [find.element, toggle] }).nodes, frame.element, bulk.element);
+  // A form photo from the Jobs page; Capture lists it with its result.
+  const shoot = captureButton(ui, { icon: true, added: () => ui.toast('Sent to Capture.', 'success') });
+  main.append(...listHead('Jobs', { views: views.element, controls, end: [find.element, toggle, ...shoot.nodes] }).nodes, frame.element, bulk.element);
 
   const drawToggle = () => toggle.replaceChildren(...[['board', 'Board'], ['list', 'List']].map(([id, label]) => h('button', {
     type: 'button', role: 'radio', class: 'fx-seg__item', 'aria-checked': String(state.view.layout === id),
@@ -170,7 +172,7 @@ export async function renderJobs(main, ui) {
   }
 
   // The chips (view-bar.js), shared with every list page.
-  const { menu, option, title, choose, bin, addButton, rowsFoot, clearAll, filterMenu: buildFilterMenu } = viewBar(h);
+  const { menu, option, groupMenu: buildGroupMenu, sortMenu: buildSortMenu, filterMenu: buildFilterMenu } = viewBar(h);
   const DATE_WORDS = ['Oldest first', 'Newest first'];
   const NUMBER_WORDS = ['Low to high', 'High to low'];
   const DIR_WORDS = { total: NUMBER_WORDS, due: DATE_WORDS, ordered: DATE_WORDS, shipped: DATE_WORDS };
@@ -178,54 +180,31 @@ export async function renderJobs(main, ui) {
   const dirWords = (by) => DIR_WORDS[by] ?? TYPE_WORDS[fieldById(fieldIdOf(by))?.type] ?? ['A to Z', 'Z to A'];
   const fieldById = (id) => state.fields.find((f) => f.id === id) ?? null;
 
-  // ── Group by ──
-  // One row: what to group by, the group order, and a bin that takes the
-  // groups away (the list only: the board always has lanes).
+  // ── Group by, Sort ── (view-bar.js). The board always has lanes, so only
+  // the list can take the groups away. In the list, a column's head sorts
+  // too.
   const groupOptions = () => [
     ...Object.entries(GROUPS).filter(([id]) => id !== 'none').map(([value, label]) => ({ value, label })),
     { group: 'Custom fields', options: groupable().map((f) => ({ value: fieldGroup(f.id), label: f.name })) },
   ];
-  const groupMenu = menu(ICONS.group, (redraw) => {
-    const list = state.view.layout === 'list';
-    const group = state.view.group === 'none' && !list ? 'status' : state.view.group;
-    const none = group === 'none';
-    return [
-      title('Group by'),
-      h('div', { class: 'fx-rows' }, h('div', { class: 'fx-rows__row fx-rows__row--group' },
-        choose('Group by', none ? '' : group, [...(none ? [{ value: '', label: 'Choose…', disabled: true }] : []), ...groupOptions()], (value) => { change({ group: value }); redraw(); }),
-        choose('Group order', state.view.groupDir, [{ value: 'asc', label: 'Ascending' }, { value: 'desc', label: 'Descending' }], (value) => { change({ groupDir: value }); redraw(); }, { disabled: none }),
-        list && !none ? bin('Remove the grouping', () => { change({ group: 'none' }); redraw(); }) : h('span', { class: 'fx-rows__gap' }))),
-    ];
-  }, { rows: true, clearLabel: 'Remove the grouping' });
-
-  // ── Sort ──
-  // Rows of sorts, each applied in turn. In the list, a column's head sorts
-  // too.
-  const sortOptions = () => [
-    ...Object.entries(SORTS).map(([value, label]) => ({ value, label })),
-    { group: 'Custom fields', options: state.fields.map((f) => ({ value: fieldGroup(f.id), label: f.name })) },
-  ];
-  const setSorts = (sorts) => change({ sorts });
-  const sortMenu = menu(ICONS.sort, (redraw) => {
-    const { sorts } = state.view;
-    const unused = sortOptions().flatMap((o) => o.options ?? [o]).filter((o) => !sorts.some((s) => s.by === o.value));
-    return [
-      title('Sort'),
-      sorts.length ? h('div', { class: 'fx-rows' }, sorts.map((s, i) => {
-        const [up, down] = dirWords(s.by);
-        const others = sorts.filter((_, n) => n !== i).map((x) => x.by);
-        const options = sortOptions().map((o) => (o.group ? { ...o, options: o.options.filter((x) => !others.includes(x.value)) } : o)).filter((o) => o.group || !others.includes(o.value));
-        return h('div', { class: 'fx-rows__row fx-rows__row--sort' },
-          h('span', { class: 'fx-rows__lead' }, i ? 'then' : 'Sort by'),
-          choose('Sort by', s.by, options, (by) => { setSorts(sorts.map((x, n) => (n === i ? { by, dir: x.dir } : x))); redraw(); }),
-          choose('Order', s.dir, [{ value: 'asc', label: up }, { value: 'desc', label: down }], (dir) => { setSorts(sorts.map((x, n) => (n === i ? { ...x, dir } : x))); redraw(); }),
-          bin('Remove this sort', () => { setSorts(sorts.filter((_, n) => n !== i)); redraw(); }));
-      })) : h('p', { class: 'fx-rows__empty' }, 'No sort. Jobs show in the lab system’s order.'),
-      rowsFoot(
-        sorts.length < 5 && unused.length ? addButton('Add sort', () => { setSorts([...sorts, { by: unused[0].value, dir: 'asc' }]); redraw(); }) : h('span'),
-        sorts.length ? clearAll(() => { setSorts([]); redraw(); }) : null),
-    ];
-  }, { rows: true, clearLabel: 'Clear the sort' });
+  const isList = () => state.view.layout === 'list';
+  const groupMenu = buildGroupMenu({
+    options: groupOptions,
+    view: () => ({ group: state.view.group === 'none' && !isList() ? 'status' : state.view.group, groupDir: state.view.groupDir }),
+    change,
+    clearable: isList,
+  });
+  const sortMenu = buildSortMenu({
+    options: () => [
+      ...Object.entries(SORTS).map(([value, label]) => ({ value, label })),
+      { group: 'Custom fields', options: state.fields.map((f) => ({ value: fieldGroup(f.id), label: f.name })) },
+    ],
+    view: () => state.view,
+    change,
+    dirWords,
+    nameOf: (by) => SORTS[by] ?? fieldById(fieldIdOf(by))?.name ?? 'Custom field',
+    empty: 'No sort. Jobs show in the lab system’s order.',
+  });
 
   // ── Filters ──
   // The shared filter panel (view-bar.js), as ClickUp's: groups of rows of
@@ -301,8 +280,6 @@ export async function renderJobs(main, ui) {
   });
   controls.append(...groupMenu.node, ...sortMenu.node, ...filterMenu.node, ...columnsMenu.node);
 
-  // A sort's name: a built-in key or a custom field.
-  const sortName = (by) => SORTS[by] ?? fieldById(fieldIdOf(by))?.name ?? 'Custom field';
   function drawControls() {
     const { group, sorts, layout } = state.view;
     const list = layout === 'list';
@@ -314,9 +291,7 @@ export async function renderJobs(main, ui) {
     groupMenu.set(label, shown !== DEFAULT_VIEW.group, grouped ? () => change({ group: list ? 'none' : 'status' }) : null);
     // In the list, the column heads sort; the Sort chip shows there only
     // while a sort is on, so it can be seen and cleared.
-    const [first] = sorts;
-    sortMenu.set(sorts.length > 1 ? `Sort · ${sorts.length}` : first ? `Sort: ${sortName(first.by)} ${first.dir === 'desc' ? '↓' : '↑'}` : 'Sort', sorts.length > 0,
-      sorts.length ? () => change({ sorts: [] }) : null);
+    sortMenu.draw();
     sortMenu.wrap.hidden = list && !sorts.length;
     filterMenu.draw();
     columnsMenu.set('Columns', false);
@@ -809,44 +784,6 @@ export async function renderJobs(main, ui) {
     if (field.type === 'checkbox') return value === true ? 1 : 0;
     return typeof value === 'string' ? value.toLowerCase() : value;
   }
-  // A column head's sort button, as ClickUp's: it shows on hover, or
-  // always while it sorts. A click sorts one way, again the other way, and
-  // a third time takes the sort off. A right-click on a sorting head opens
-  // a small menu: change the direction, or clear the sort.
-  function sortButton(columnId, label) {
-    const by = sortOf(columnId);
-    if (!by) return null;
-    const { sorts } = state.view;
-    const at = sorts.findIndex((s) => s.by === by);
-    const on = at >= 0 ? sorts[at] : null;
-    const [up, down] = dirWords(by);
-    const next = () => {
-      if (!on) change({ sorts: [{ by, dir: 'asc' }] });
-      else if (on.dir === 'asc') change({ sorts: sorts.map((s, n) => (n === at ? { ...s, dir: 'desc' } : s)) });
-      else change({ sorts: sorts.filter((_, n) => n !== at) });
-    };
-    const words = on ? `Sorted ${on.dir === 'asc' ? up : down}. Click to ${on.dir === 'asc' ? `sort ${down}` : 'clear the sort'}` : `Sort by ${label}`;
-    return h('button', {
-      type: 'button', class: `fx-th-sort${on ? ' fx-th-sort--on' : ''}`, 'aria-label': words, title: words,
-      onclick: (event) => { event.stopPropagation(); next(); },
-      oncontextmenu: (event) => {
-        if (!on) return;
-        event.preventDefault();
-        event.stopPropagation();
-        onRightButton(event, () => sortMenuAt(event, by, label, on, at));
-      },
-    }, lucide(h, on ? (on.dir === 'asc' ? 'arrow-up' : 'arrow-down') : 'chevrons-up-down'),
-    on && sorts.length > 1 ? h('span', { class: 'fx-th-sort__n' }, String(at + 1)) : null);
-  }
-  function sortMenuAt(event, by, label, on, at) {
-    const { sorts } = state.view;
-    const flip = () => change({ sorts: sorts.map((s, n) => (n === at ? { ...s, dir: s.dir === 'asc' ? 'desc' : 'asc' } : s)) });
-    heads.menu.show([
-      h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitemcheckbox', 'aria-checked': 'true', title: 'Change the direction', onclick: () => { heads.menu.close(); flip(); } },
-        h('span', { class: 'fx-pop__tick' }, lucide(h, on.dir === 'asc' ? 'arrow-up' : 'arrow-down')), h('span', {}, `Sort by ${label}`), h('span', { class: 'fx-pop__end' }, svg(ICONS.tick))),
-      heads.menu.item('ban', 'Clear sort', () => change({ sorts: sorts.filter((_, n) => n !== at) })),
-    ], event);
-  }
   // The list's heads (columns.js): drag an edge to resize, drag a head to
   // move it; a click or right-click opens its menu: sort by it, move it,
   // edit its custom field, hide it. Client always shows, first. + lists the
@@ -862,19 +799,9 @@ export async function renderJobs(main, ui) {
         ...customColumns().filter((f) => !shown.has(fieldGroup(f.id))).map((f) => ({ id: fieldGroup(f.id), label: f.name })),
       ];
     },
-    extra: (column, item) => {
-      const parts = [];
-      const sort = sortOf(column.id);
-      if (sort) {
-        const [up, down] = dirWords(sort);
-        parts.push(item('arrow-up-narrow-wide', `Sort: ${up}`, () => change({ sorts: [{ by: sort, dir: 'asc' }] })),
-          item('arrow-down-wide-narrow', `Sort: ${down}`, () => change({ sorts: [{ by: sort, dir: 'desc' }] })), h('div', { class: 'fx-pop__sep' }));
-      }
-      if (column.id.startsWith('field:') && ['owner', 'admin'].includes(ui.me?.person?.role)) {
-        parts.push(item('settings', 'Edit custom field', () => ui.go('/custom-fields')));
-      }
-      return parts;
-    },
+    sorting: { sortOf, sorts: () => state.view.sorts, change, dirWords },
+    extra: (column, item) => (column.id.startsWith('field:') && ['owner', 'admin'].includes(ui.me?.person?.role)
+      ? [item('settings', 'Edit custom field', () => ui.go('/custom-fields'))] : []),
   });
 
   // The list's columns, in the order the person chose them. One column holds
@@ -896,14 +823,14 @@ export async function renderJobs(main, ui) {
     const allowed = new Set(builtInColumns());
     // Client is always the first column: it has no drag, Move or Hide.
     const client = {
-      id: 'client', label: 'Client', kind: 'client', fixed: true, sort: () => sortButton('client', 'Client'),
+      id: 'client', label: 'Client', kind: 'client', fixed: true,
       cell: (job) => h('span', { class: 'fx-job__cell' }, h('span', { class: 'fx-strong' }, clientOf(job)), problemMark(job)),
     };
     return [client, ...state.view.columns.map((id) => {
       if (BUILT_IN[id]) return allowed.has(id) ? { id, label: id === 'assignee' ? assigneeField().name : COLUMNS[id], ...BUILT_IN[id] } : null;
       const field = customColumns().find((f) => fieldGroup(f.id) === id);
       return field ? fieldColumn(h, field, { id, valueOf: (job) => valueOf(job, field.id)?.value ?? null, people: state.people }) : null;
-    }).filter(Boolean).map((c) => ({ ...c, sort: () => sortButton(c.id, c.label) }))];
+    }).filter(Boolean)];
   }
 
   // A person custom field's value as a badge (initials), the name on hover.
@@ -953,17 +880,13 @@ export async function renderJobs(main, ui) {
       saveFolded(state.folded);
       draw();
     };
-    const head = ({ label, jobs, rank, color }) => {
-      const open = !folded.has(label);
-      const toggle = h('button', {
-        type: 'button', class: 'fx-table__fold', 'aria-expanded': String(open), 'aria-label': `${label}, ${jobs.length} ${jobs.length === 1 ? 'job' : 'jobs'}. ${open ? 'Fold' : 'Open'} the group`,
-        onclick: (event) => { event.stopPropagation(); fold(label); },
-      }, svg(CHEVRON_ICON),
-      color ? h('span', { class: 'fx-cf__opt fx-board__lane', 'data-color': color }, label, h('span', { class: 'fx-stage__count' }, String(jobs.length))) : stagePill(label, jobs.length, rank));
-      return h('tr', { class: `fx-table__group${open ? '' : ' fx-table__group--folded'}`, onclick: () => fold(label) },
-        tickCell(setBox(jobs, `Tick every job in ${label}`)),
-        h('td', { colspan: String(columns.length + 1) }, h('span', { class: 'fx-table__group-row' }, toggle, h('span', { class: 'fx-board__sum' }, formatCents(totalOf(jobs))))));
-    };
+    const head = ({ label, jobs, rank, color }) => groupHead(h, {
+      label: `${label}, ${jobs.length} ${jobs.length === 1 ? 'job' : 'jobs'}`,
+      badge: color ? h('span', { class: 'fx-cf__opt fx-board__lane', 'data-color': color }, label, h('span', { class: 'fx-stage__count' }, String(jobs.length))) : stagePill(label, jobs.length, rank),
+      open: !folded.has(label), onFold: () => fold(label),
+      lead: tickCell(setBox(jobs, `Tick every job in ${label}`)), span: columns.length + 1,
+      extra: h('span', { class: 'fx-board__sum' }, formatCents(totalOf(jobs))),
+    });
     return h('div', { class: 'fx-panel' }, heads.table({
       className: 'fx-table--jobs',
       columns,