Onboarding sections use Settings' pills

Before: main at ac047c62e17 (hub at /settings/onboarding, before parts 1, 2a, 2b). After: this PR (head cad5795ad99) on main with #16526, #16544, #16536 and #16219 merged, hub at /onboarding-hub: no explainer box, and the section pills are Settings' own, in the shared header row

5 Oct 2026 · branch feat/onboarding-section-pills-p2b-v2 · captured against propflow-stage · at cad5795ad99+local

PR #16616

Data note. Every name and balance below comes from propflow-stage, which is anonymized by construction (ADR-0097/0110 — phones in the impossible +1000 NPA, emails @example.test). The identical capture against prod would carry real tenants' names and balances and is not safe to attach anywhere, which is why the generator refuses to run against one.

1 · Leasing onboarding, Fees: before (desktop, light)

Before: the "What Clara does here" box and the old round section buttons, wrapping.

Asserted in the captured DOM — Fees & deposits · Hours & contact

Before: Leasing onboarding sections, desktop, light
Provenance. Captured from commit ac047c62e17, read from the worktree the server was started from (/Users/miniclaw/code/PropFlow/wt-onb-before) — the server could not report its own commit, so this is the weaker of the two sources. That commit is already merged into origin/main.
Sections 2–16 and notes

2 · Leasing onboarding, Fees: after (desktop, light)

After: no explainer box. The sections are Settings' pills, drawn in the settings header row itself, exactly where Settings' scope tabs sit: one row, one divider, one sliding brand bar under the current section, and the red "still open" dot inside each pill. The module's "N of 27 answered" stays above the questions.

Asserted in the captured DOM — Fees & deposits · Hours & contact · People

After: Leasing onboarding sections, desktop, light

3 · Leasing onboarding, Fees: before (desktop, dark)

Before: the "What Clara does here" box and the old round section buttons, wrapping.

Asserted in the captured DOM — Fees & deposits · Hours & contact

Before: Leasing onboarding sections, desktop, dark
Provenance. Captured from commit ac047c62e17, read from the worktree the server was started from (/Users/miniclaw/code/PropFlow/wt-onb-before) — the server could not report its own commit, so this is the weaker of the two sources. That commit is already merged into origin/main.

4 · Leasing onboarding, Fees: after (desktop, dark)

After: no explainer box. The sections are Settings' pills, drawn in the settings header row itself, exactly where Settings' scope tabs sit: one row, one divider, one sliding brand bar under the current section, and the red "still open" dot inside each pill. The module's "N of 27 answered" stays above the questions.

Asserted in the captured DOM — Fees & deposits · Hours & contact · People

After: Leasing onboarding sections, desktop, dark

5 · Leasing onboarding, Fees: before (phone, light)

Before: the "What Clara does here" box and the old round section buttons, wrapping.

Asserted in the captured DOM — Fees & deposits · Hours & contact

Before: Leasing onboarding sections, phone, light
Provenance. Captured from commit ac047c62e17, read from the worktree the server was started from (/Users/miniclaw/code/PropFlow/wt-onb-before) — the server could not report its own commit, so this is the weaker of the two sources. That commit is already merged into origin/main.

6 · Leasing onboarding, Fees: after (phone, light)

After: no explainer box. The sections are Settings' pills, drawn in the settings header row itself, exactly where Settings' scope tabs sit: one row, one divider, one sliding brand bar under the current section, and the red "still open" dot inside each pill. The module's "N of 27 answered" stays above the questions.

Asserted in the captured DOM — Fees & deposits · Hours & contact

After: Leasing onboarding sections, phone, light

7 · Leasing onboarding, Fees: before (phone, dark)

Before: the "What Clara does here" box and the old round section buttons, wrapping.

Asserted in the captured DOM — Fees & deposits · Hours & contact

Before: Leasing onboarding sections, phone, dark
Provenance. Captured from commit ac047c62e17, read from the worktree the server was started from (/Users/miniclaw/code/PropFlow/wt-onb-before) — the server could not report its own commit, so this is the weaker of the two sources. That commit is already merged into origin/main.

8 · Leasing onboarding, Fees: after (phone, dark)

After: no explainer box. The sections are Settings' pills, drawn in the settings header row itself, exactly where Settings' scope tabs sit: one row, one divider, one sliding brand bar under the current section, and the red "still open" dot inside each pill. The module's "N of 27 answered" stays above the questions.

Asserted in the captured DOM — Fees & deposits · Hours & contact

After: Leasing onboarding sections, phone, dark

9 · Settings, General: before (desktop, light)

The Settings scope strip with buildings on the page, on main.

Asserted in the captured DOM — General

Before: Settings scope strip, desktop, light
Provenance. Captured from commit ac047c62e17, read from the worktree the server was started from (/Users/miniclaw/code/PropFlow/wt-onb-before) — the server could not report its own commit, so this is the weaker of the two sources. That commit is already merged into origin/main.

10 · Settings, General: after (desktop, light)

The same strip, now drawn by the shared PillNav. Its DOM is byte-identical to main's (see part 2a), and it matches the onboarding pills above.

Asserted in the captured DOM — General

After: Settings scope strip, desktop, light

11 · Settings, General: before (desktop, dark)

The Settings scope strip with buildings on the page, on main.

Asserted in the captured DOM — General

Before: Settings scope strip, desktop, dark
Provenance. Captured from commit ac047c62e17, read from the worktree the server was started from (/Users/miniclaw/code/PropFlow/wt-onb-before) — the server could not report its own commit, so this is the weaker of the two sources. That commit is already merged into origin/main.

12 · Settings, General: after (desktop, dark)

The same strip, now drawn by the shared PillNav. Its DOM is byte-identical to main's (see part 2a), and it matches the onboarding pills above.

Asserted in the captured DOM — General

After: Settings scope strip, desktop, dark

13 · Settings, General: before (phone, light)

The Settings scope strip with buildings on the page, on main.

Asserted in the captured DOM — General

Before: Settings scope strip, phone, light
Provenance. Captured from commit ac047c62e17, read from the worktree the server was started from (/Users/miniclaw/code/PropFlow/wt-onb-before) — the server could not report its own commit, so this is the weaker of the two sources. That commit is already merged into origin/main.

14 · Settings, General: after (phone, light)

The same strip, now drawn by the shared PillNav. Its DOM is byte-identical to main's (see part 2a), and it matches the onboarding pills above.

Asserted in the captured DOM — General

After: Settings scope strip, phone, light

15 · Settings, General: before (phone, dark)

The Settings scope strip with buildings on the page, on main.

Asserted in the captured DOM — General

Before: Settings scope strip, phone, dark
Provenance. Captured from commit ac047c62e17, read from the worktree the server was started from (/Users/miniclaw/code/PropFlow/wt-onb-before) — the server could not report its own commit, so this is the weaker of the two sources. That commit is already merged into origin/main.

16 · Settings, General: after (phone, dark)

The same strip, now drawn by the shared PillNav. Its DOM is byte-identical to main's (see part 2a), and it matches the onboarding pills above.

Asserted in the captured DOM — General

After: Settings scope strip, phone, dark

What to look at

Each pair shows main first, then the change. On the Leasing onboarding page, the "What Clara does here" box is gone and the section switcher is now Settings' own pill strip (the shared PillNav). It sits in the settings header row exactly where Settings' Company and building tabs sit, so there is one row and one divider. The bar slides under the current section. Each pill is the section's name and its red "still open" dot. The step number stays on the section heading, and the module's "N of 27 answered" stays above the questions. On a phone the strip scrolls sideways like Settings'.

The Settings pages are byte-identical before and after (part 2a's DOM diff). They are here to show the two strips match.

The after captures run this PR's own branch (#16616) on current main, which already contains #16526 (part 1), #16544 (part 2a) and #16536.

PropFlow Docs