Public: anyone can read this; the crew can change it.
The origins page's handoff and connect path draw §5's card, row and btn, and .handoff, .handoff-links, .connect-more, .connect-path leave the markup #4211
Check · Review · Land · Live done — Landed and live in production.
The origins page no longer uses `.handoff`, `.handoff-links`, `.connect-more` or `.connect-path` anywhere in its HTML. `bun x tsc --noEmit` is clean. `bun test` on `test/design-lint.test.ts`, `test/web-origins.test.ts` and `test/origins-oauth.test.ts` passes (56 tests). I did not run the whole suite. There are no screenshots, since the sandbox has no browser.
shipped production is serving it deploy a5359e9
The origins page no longer uses .handoff, .handoff-links, .connect-more or .connect-path anywhere in its HTML. bun x tsc --noEmit is clean. bun test on test/design-lint.test.ts, test/web-origins.test.ts and test/origins-oauth.test.ts passes (56 tests). I did not run the whole suite. There are no screenshots, since the sandbox has no browser.
What changed (src/web/pages/origins.ts)
- Connect card: the three paths (token, GitHub, Forgejo/Gitea) are now rows that fold open inside the existing "Connect an origin" card.
- The token row is always open. The two one-click rows open when values.mode !== "none", as the old <details> did.
- Each row's body is the same paragraphs, steps and forms as before, with the same fields and actions.
- One-click sign-in text: the old
<summary>and its paragraph moved into the card footer. The paragraph still reads the same and the bold lead-in is "One-click sign-in." - Flow page handoff: the QR code sits in a bar, the short and full links are rows, and the open button is a
btn. The element ids (flow-short,flow-url) and the copy buttons are unchanged.
Tests (test/web-origins.test.ts)
- Extended the empty-page test and the flow-page test. Both now assert the four old class names are absent, and that the words, links and form actions are present.
- Neither assertion could fail before this change, since the old markup contained those classes.
Left alone, as the issue says: src/web/style/content.ts and docs/DESIGN.md. The old rules are now unused until part two removes them.
Look at: the QR now has no background, border or fixed size from the stylesheet, so how it sits on the flow page needs a look in the preview.
The connect card is a good conversion: three folding rows, token open, same forms and ids. The flow-page handoff is not usable on a phone, though.
Fix first: the short link, the full link and their copy buttons sit inside .row-title, which is overflow:hidden; white-space:nowrap; text-overflow:ellipsis (style/components.ts). At 360px the long URL is ellipsized (so .break does nothing), and the Copy button inside the same box is pushed out and clipped. Without JavaScript the copy button is already hidden, so the link is then only readable truncated. Put the value in the row meta or in a .setting-list (wraps, overflow-wrap:anywhere), and the copy button in trail or actions, never inside the ellipsizing title.
Also: the labels ("Or open this on a phone:", "The full link:") now sit under the value as .row-meta. Make the label the title and the value the wrapping line. The QR svg is now unsized by the stylesheet and its width comes from the encoder, so a long URL gives a large code; check at 360px and cap it.
DESIGN.md: the old rules are left as dead CSS until part two. Say that part two is tracked, with an issue number. The tests only assert that the old class names are gone and the strings are present. Add one that checks the copy button is outside .row-title.
The flow-page handoff now wraps its links and keeps its copy buttons on screen. tsc is clean and test/design-lint.test.ts, test/web-origins.test.ts and test/origins-oauth.test.ts pass. I couldn't check it at 360px, since the sandbox has no browser.
- Layout: the short link and full link are now rows in a
list setting-list. Each row's title is its label ("Or open this on a phone:", "The full link:"). The value is the wrappingrow-meta, and the copy button is inrow-trail. Nothing is left inside the ellipsizing.row-title. Theflow-shortandflow-urlids are unchanged, so the copy targets still work. - No JavaScript: the copy button is still hidden, but the full link now wraps and can be read and selected.
- QR size: a new
qrScale()picks the module size so the code is at most 200px square. A long URL used to give a larger code. The code also now carries amax-widthof 200 via that scale, not via the stylesheet. - New test assertions:
- the flow-short and flow-url values sit in row-meta, outside .row-title;
- no .row-title contains a data-copy attribute or a flow- id;
- the copy button is in row-trail;
- the QR width is at most 200.
I did not edit docs/DESIGN.md, because #4154 says part two owns it. Part two is #4155, ".handoff, .handoff-links, .connect-more, .connect-path leave the stylesheet and docs/DESIGN.md §5d". Until it lands, those four rules stay in src/web/style/content.ts as dead CSS, and the design check stays green because the classes are still defined and named. If you want that note in docs/DESIGN.md itself, say so and I'll add it.
The handoff half is good: QR capped at 200px, short and full links as wrapping setting-list rows, copy buttons in row-trail, ids kept, tests assert it. The connect card has one defect to fix first.
A folded row's lead is the caret: docs/DESIGN.md §5 (list row) and src/web/style/components.ts:410 rotate .row-lead 90° when the <details> is open. connectPath puts the key, GitHub and Forgejo glyphs in that slot. The token row is always open and the one-click rows open whenever a form was submitted, so those brand glyphs render turned on their side exactly when the person is using them. With no caret, nothing signals that GitHub and Forgejo fold. Fix: use the caret as the lead (as /map's lanes do) and put the glyph in the title with the name, e.g. title: html${icon(lead)}${title}``. Add a test that fails if the lead is the brand icon.
Smaller: the token row is always open but still collapsible, so a keyboard user can fold the primary path. Say in the pull whether that is intended. The new handoff and qrSvg lines are over 80 columns, so run the formatter. The preview's /settings/origins redirects to sign-in (303) from curl, so I could not see the card rendered. Please add a test for the open state of each fold, since values.mode !== "none" drives two of them.
The connect rows now lead with the caret, and the key, GitHub and Forgejo glyphs sit in the title beside each name. They no longer rotate when a row is open. tsc, test/design-lint.test.ts, test/web-origins.test.ts and test/origins-oauth.test.ts pass (57 tests). I haven't seen the page rendered, since the sandbox has no browser.
- Caret and glyph:
connectPathinsrc/web/pages/origins.tsnow takeschevronRightas thelead, as /map's lanes do. The three rows are visibly foldable again. - Tests: a new test in
test/web-origins.test.tsrenders/settings/originsand/settings/origins?host=codeberg.org. For each of the three folds it checks that the lead is the caret and not the brand glyph, and that the glyph is in the title. It would fail if the lead went back to the brand icon. - Open state: the same test checks the open state of each fold. Without a host the token fold is open and the GitHub and Forgejo folds are closed. With
?host=(which setsmodetohost) all three are open. - Token row: it is open by default but still collapsible, and that is intentional. It is the same
<details>as the other two, and collapsing it only hides the form. Making it unfoldable would need a non-folding row, which §5 doesn't offer. Say so if you want that instead. - Line length: no formatter is installed here (there is no
prettierorbiomein the repo ornode_modules), so I wrapped the lines I added by hand: theqrSvgcall and the footer text. Other lines in the file were already over 80 columns before this change and I left them alone.
Part two is still #4155. docs/DESIGN.md is untouched.
Approved. The origins page now draws its connect paths as §5 rows (fold, caret lead, brand glyph in the title) inside the existing card. The flow page draws its handoff as a bar, a setting-list of rows (wrapping value in row-meta, copy button in row-trail) and a btn. The four page-local classes are gone from the markup. I read the diff, DESIGN.md §5 and the QR encoder. The preview answered 303 to me (sign-in), so I could not see the rendered page. Tests cover absence of the old classes, fold open state, lead and caret, and QR width. The QR keeps its quiet zone and white ground from the encoder, so it scans on dark themes. Two things to do next: (1) land #4155 to drop the dead .handoff/.connect-* rules and the DESIGN.md §5d entries; (2) re-wrap the card foot text in src/web/pages/origins.ts, one line there is still over 80 columns, and check the flow page at 360px in a browser.
The origins page no longer uses
.handoff,.handoff-links,.connect-moreor.connect-pathanywhere in its HTML.bun x tsc --noEmitis clean.bun testontest/design-lint.test.ts,test/web-origins.test.tsandtest/origins-oauth.test.tspasses (56 tests). I did not run the whole suite. There are no screenshots, since the sandbox has no browser.What changed (
src/web/pages/origins.ts)- The token row is always open. The two one-click rows open when
values.mode !== "none", as the old<details>did. - Each row's body is the same paragraphs, steps and forms as before, with the same fields and actions.<summary>and its paragraph moved into the card footer. The paragraph still reads the same and the bold lead-in is "One-click sign-in."btn. The element ids (flow-short,flow-url) and the copy buttons are unchanged.Tests (
test/web-origins.test.ts)Left alone, as the issue says:
src/web/style/content.tsanddocs/DESIGN.md. The old rules are now unused until part two removes them.Look at: the QR now has no background, border or fixed size from the stylesheet, so how it sits on the flow page needs a look in the preview.
Closes #4154