@arcforgelabs/flow 2026.10.32-beta.1 → 2026.10.33

package/server/ui/flow.css

@@ -105,6 +105,15 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
   border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow);
 }
 .fx-panel { overflow: hidden; }
+/* A list that is loading: a thin moving line on top. A list from another
+   tab, shown until the new one comes, is dimmed and cannot be clicked. */
+.fx-panel[aria-busy="true"] { position: relative; }
+.fx-panel[aria-busy="true"]::before {
+  content: ""; position: absolute; inset: 0 0 auto; height: 2px; z-index: 1;
+  background: linear-gradient(90deg, transparent, var(--t-accent), transparent) 0 0 / 200% 100%;
+  animation: fx-shimmer 1s linear infinite;
+}
+.fx-panel[data-stale] { opacity: .5; pointer-events: none; transition: opacity .15s; }
 
 /* The signed-in app: a standard left sidebar, then the view. */
 .fx-shell { min-height: 100vh; }
@@ -113,10 +122,17 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
   display: flex; flex-direction: column; gap: 4px; flex: none;
   width: 232px; height: 100vh; padding: 16px 12px 12px;
   background: var(--t-s1); border-right: 1px solid var(--fx-line);
+  transition: width .18s ease;
 }
 .fx-side__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 14px 8px; }
 .fx-side__head .fx-brand { min-width: 0; font-size: 19px; }
 .fx-side__head .fx-mark { width: 26px; height: 26px; }
+/* The sidebar button. Open, it shows the sidebar icon beside the brand.
+   Folded or narrow, the brand is hidden and the button shows the logo, which
+   turns into the sidebar icon on hover or focus (and while the drawer is
+   open), so the two never sit side by side. */
+.fx-toggle__mark { display: none; }
+.fx-toggle__mark .fx-mark { display: block; }
 .fx-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
 .fx-nav__group { padding: 16px 10px 6px; color: var(--t-dim); font: var(--t-label-weight) var(--t-label-size)/1.3 var(--t-body); letter-spacing: var(--t-label-spacing); text-transform: var(--t-label-case); }
 .fx-nav__group:first-child { padding-top: 4px; }
@@ -141,7 +157,7 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 @media (min-width: 821px) {
   .fx-shell[data-folded] .fx-side { width: 64px; padding-inline: 10px; }
   .fx-shell[data-folded] .fx-side__head { flex-direction: column; gap: 10px; padding: 0 0 14px; }
-  .fx-shell[data-folded] .fx-brand span { display: none; }
+  .fx-shell[data-folded] .fx-side__head .fx-brand { display: none; }
   .fx-shell[data-folded] .fx-nav__group { height: 1px; margin: 10px 6px; padding: 0; overflow: hidden; background: var(--fx-line); color: transparent; }
   .fx-shell[data-folded] :is(.fx-nav a, .fx-nav__report) { justify-content: center; padding: 9px 0; }
   .fx-shell[data-folded] .fx-nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@@ -659,19 +675,41 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .fx-shell { flex-direction: column; }
   .fx-side { flex-direction: row; align-items: center; width: auto; height: 60px; padding: 0 12px; border-right: 0; border-bottom: 1px solid var(--fx-line); }
   .fx-side__head { flex-direction: row-reverse; gap: 6px; padding: 0; }
-  .fx-side__head .fx-brand span { display: none; }
-  /* The menu opens as a panel below the bar. */
+  .fx-side__head .fx-brand { display: none; }
+  /* The menu is a drawer: it slides in from the left, below the bar, over
+     a dimmed page. A click on the dimmed page closes it (app.js). */
   .fx-nav {
-    display: none; position: absolute; top: 60px; left: 0; right: 0;
-    max-height: calc(100vh - 60px); padding: 4px 12px 12px;
-    background: var(--t-s1); border-bottom: 1px solid var(--fx-line); box-shadow: var(--t-shadow);
+    position: fixed; top: 60px; bottom: 0; left: 0; z-index: 2;
+    width: min(280px, 85vw); padding: 8px 12px 12px;
+    background: var(--t-s1); border-right: 1px solid var(--fx-line); box-shadow: var(--t-shadow);
+    transform: translateX(-100%); visibility: hidden;
+    transition: transform .2s ease, visibility .2s;
+  }
+  .fx-shell[data-menu-open] .fx-nav { transform: none; visibility: visible; }
+  .fx-shell[data-menu-open]::after {
+    content: ""; position: fixed; inset: 60px 0 0; z-index: 9;
+    background: rgba(0, 0, 0, .32);
   }
-  .fx-shell[data-menu-open] .fx-nav { display: flex; }
   .fx-nav__report { margin-top: 8px; }
   .fx-side__end { margin-left: auto; padding: 0; border-top: 0; }
   #user-button { flex: none; }
 }
 
+/* Collapsed (folded on wide screens, or narrow): logo at rest, sidebar icon
+   on hover, focus or while open. */
+@media (min-width: 821px) {
+  .fx-shell[data-folded] .fx-toggle__mark { display: block; }
+  .fx-shell[data-folded] .fx-toggle__icon { display: none; }
+  .fx-shell[data-folded] #menu-toggle:is(:hover, :focus-visible) .fx-toggle__mark { display: none; }
+  .fx-shell[data-folded] #menu-toggle:is(:hover, :focus-visible) .fx-toggle__icon { display: inline-flex; }
+}
+@media (max-width: 820px) {
+  .fx-toggle__mark { display: block; }
+  .fx-toggle__icon { display: none; }
+  #menu-toggle:is(:hover, :focus-visible, [aria-expanded="true"]) .fx-toggle__mark { display: none; }
+  #menu-toggle:is(:hover, :focus-visible, [aria-expanded="true"]) .fx-toggle__icon { display: inline-flex; }
+}
+
 /* ── Phones ─────────────────────────────────────────────────────────────── */
 @media (max-width: 640px) {
   .fx-main { padding-top: 20px; }
@@ -778,3 +816,14 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   color-scheme: light;
 }
 [data-mode="dark"] #sentry-feedback { --interactive-filter: brightness(150%); color-scheme: dark; }
+
+/* The bar above one invoice: Back, its place in the list, previous and next.
+   Quiet: no frame, dim text, round icon buttons. */
+.fx-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; min-height: 32px; }
+.fx-pager__back { justify-self: start; background: none; border: 0; padding: 4px 0; color: var(--t-dim); font: inherit; font-size: 13.5px; cursor: pointer; transition: color 120ms var(--fx-ease); }
+.fx-pager__back:hover, .fx-pager__back:focus-visible { color: var(--t-strong); }
+.fx-pager__count { grid-column: 2; color: var(--t-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
+.fx-pager__steps { grid-column: 3; justify-self: end; display: flex; gap: 4px; }
+.fx-pager__step { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--fx-line-soft); border-radius: 999px; background: transparent; color: var(--t-text); cursor: pointer; transition: background 120ms var(--fx-ease), border-color 120ms var(--fx-ease); }
+.fx-pager__step:hover:not(:disabled) { background: var(--fx-hover); border-color: var(--fx-line); }
+.fx-pager__step:disabled { opacity: 0.35; cursor: default; }

package/server/ui/invoice-notes.js

@@ -0,0 +1,26 @@
+// The notes on the Invoices page and on one invoice (invoicing.js). One fact
+// per sentence; they follow the accounting integration's settings. Kept apart
+// so tests can load them without a browser.
+
+// What happens to a ready invoice in the accounting system, one fact per
+// sentence. It follows the integration's settings: its connection, whether it
+// takes writes, and the send mode on its page. `what` names the invoices:
+// "each invoice" on the list, "this invoice" on one invoice.
+export function sendModeNote(to, sendMode, what = 'each invoice') {
+  if (!to) return 'No accounting system is on. Flow keeps each invoice here only.';
+  if (sendMode && !sendMode.connected) return `${to} is not connected. Connect it in Integrations before you send.`;
+  if (sendMode && !sendMode.writesAllowed) return `${to} does not take invoices from Flow yet. Turn this on in Integrations, ${to}.`;
+  const text = sendMode?.mode === 'approve_and_email'
+    ? [`Flow sends ${what} to ${to} as approved.`, `${to} emails it to the customer at once.`]
+    : [`Flow sends ${what} to ${to} as a draft.`, `You approve and send it in ${to}.`];
+  const others = sendMode?.otherCustomers ?? 0;
+  if (others) text.push(`${others} ${others === 1 ? 'customer has' : 'customers have'} a different setting.`);
+  return text.join(' ');
+}
+
+// The line under a draft's title, one fact per sentence.
+export function draftNote(to, invoice, ready) {
+  if (!to) return ready ? 'A person checked it. A saved change keeps it ready.' : 'Flow gives it a number when you issue it.';
+  if (!ready) return `Mark it ready, then send it to ${to}.`;
+  return sendModeNote(to, invoice?.sendMode, 'this invoice');
+}

package/server/ui/invoicing-settings.js

@@ -66,7 +66,9 @@ export async function renderInvoicingSettings(main, ui) {
   host.replaceChildren(...[
     disabled ? notice('Only an owner or admin can change these.', 'info') : null,
     section('Drafts',
-      row('Payment terms', 'Days from invoice to due date.', days('paymentTermsDays', 'Payment terms in days'))),
+      row('Payment terms', 'Days from invoice to due date.', days('paymentTermsDays', 'Payment terms in days')),
+      row('Reference', 'The Reference on each invoice. Use {practitioner} and {patient}.',
+        box('referenceTemplate', 'Reference rule', { placeholder: '{practitioner} - {patient}' }))),
     lineMappingSection(ui),
     automationSection(ui, 'invoicing', 'Automations'),
     rulesSection(ui),