Skip to content

refactor(web): share a page's status line in one global class - #187

Merged
Bakhomious merged 6 commits into
mainfrom
step/shared-page-status
Oct 30, 2026
Merged

Bakhomious merged 6 commits into
mainfrom
step/shared-page-status

Conversation

@Bakhomious

Copy link
Copy Markdown
Contributor

Brief

Goal: the line that takes a page's sections' place, such as "Bitbucket isn't set up.", comes from one global class, so the GitHub page's "GitHub isn't set up." doesn't make a fifth copy of its rules (decision 206, as decisions 112 and 205 did for the form styles and the polled sections).

Scope

  • apps/web/src/styles/page.css: .page-status, loaded by main.ts after the other global stylesheets.
  • The PRs, Time, Nudge and Todos pages draw their status lines with it and drop their copies.
  • Plan: the §0 row, §7's status line, §8.2, decision 206.

Out of scope: the GitHub page (github-page); the polled sections' muted lines and the Notes pages' failure lines, which sit in a block that gives them their space; the Time page's own smaller space under its failure line when its sections follow.

Acceptance criteria

  • No page keeps a copy of the status line's rules; each uses .page-status.
  • The pages render the same DOM, styles and boxes as on main, but for the class names, overflow-wrap: anywhere on the lines that lacked it, and the Nudge page's line on phones, which now leaves a section's 48 px below it rather than 64 px.
  • The Time page's failure line over its sections keeps its 30 px below it (24 on phones).
  • mise run check is green.

What changed

  • .page-status: no margin, the page's padding at the sides, --ink-muted, 64 px below (48 on phones), and long words break rather than widen the page. Before, only the Time page's copy broke long words, and the Nudge page's copy had no phone rule.
  • The Time page's failure line is page-status plus its own failure class when the sections follow, whose scoped rule keeps the smaller space below it.
  • TimePage.test.ts checks the new class names.
  • github-widgets now has nine steps; this is the seventh.

QA

  • Same DOM, styles and boxes as on the base, but for the intended changes: a throwaway Playwright spec saved main's HTML and every element's tag, box and computed styles for 7 scenarios: the PRs page not set up; the Time page not set up, failed, with a failure before any search succeeded and with a failure over its sections, both with long unbroken texts; the Nudge page failed; the Todos page failed. It ran in desktop Chromium and phone WebKit, light and dark: 28 captures on b7f499c and on this branch. With the class names mapped, the HTML is the same in all 28. The Time page's 16 captures differ in nothing else, the failure line's 30 px and 24 px included. The only other differences: overflow-wrap turns anywhere on the PRs, Nudge and Todos lines, with no box moving, and on phones the Nudge line's padding goes from 64 px to 48 px, which shortens main by 16 px.
  • Missing test added: e2e/page-status.spec.ts checks each page's line is muted, with 64 px below it, or 48 px on phones. On the base it fails for the Nudge page on phones alone (64 px); with the class taken off the PRs page's line, it fails on both projects. The Home's spec shares its --ink-muted probe with it through e2e/ink.ts. The Time page's existing "a long failure wraps on a narrow screen" now guards the shared overflow-wrap.
  • TimePage.svelte's one uncovered branch is the compiler's failure ?? '' inside {#if failure}, as on main.

Review

No blocking findings. Non-blocking:

  • The Time page's failure line gets its smaller space because its scoped .failure outranks the global class, as Svelte's scoped styles always do; the QA captures confirm 30 px and 24 px.
  • The end-to-end test checks one line per page; the Time page's other lines share its class, and the unit tests check them.

Gates

mise run check, green locally with BAKHYARD_E2E_PORT=8280: Go fmt, gen, lint, actions and compose lint, tests, coverage, govulncheck; web install, Biome, svelte-check and tsc, Vitest with coverage, knip, pnpm audit, Playwright end-to-end tests in both browsers (394 passed, 8 skipped).

The PRs, Time, Nudge and Todos pages each drew the line that takes
their sections' place from a copy of the same rules, and the GitHub
page would have made a fifth. They now use .page-status from
styles/page.css. On phones, the Nudge page's line leaves a section's
48 px below it, since its copy lacked the phone rule (decision 206).
Each page that draws the shared status line shows it muted, with a
section's 64 px below it, or 48 px on phones. The Home's spec shares
its --ink-muted probe through e2e/ink.ts.
@Bakhomious
Bakhomious merged commit 392af0e into main Oct 30, 2026
2 checks passed
@Bakhomious
Bakhomious deleted the step/shared-page-status branch October 30, 2026 03:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant