Skip to content

refactor(ui): promote the three surfaces features kept redrawing by hand - #69

Merged
axelhamil merged 1 commit into
mainfrom
dev
Sep 1, 2026
Merged

refactor(ui): promote the three surfaces features kept redrawing by hand#69
axelhamil merged 1 commit into
mainfrom
dev

Conversation

@axelhamil

Copy link
Copy Markdown
Owner

One commit: the style debt the release review of #67 surfaced and left open.

Each of the three flagged call sites turned out to be the visible end of a duplicated primitive, not a one-off cosmetic slip:

  • CopyableValuecopy-row.tsx and secret-reveal-dialog.tsx held the same box byte for byte. The primitive owns the surface and the clipboard write; the toast and the translated labels stay in the app.
  • Panelrounded-md border p-3 on a <details>, an <li>, a second <details> and a <div>, so it takes asChild. Deliberately not Card, which is rounded-xl with shadow-sm and hover-lift — reusing it would have made every nested box lift on hover.
  • CodeBlock — the same class string on seven <pre> tags, three at p-3 and four at p-2; the padding became the size variant.

Also: three page titles moved to TypographyH1 variant="page", matching every other in-app page (the raw text-2xl was a different size from the dashboard beside it), the webhooks catalog link dropped four cosmetic classes for NavLink variant="plain", and features/legal/policies/index.ts became policies/bodies.ts.

Gates green locally: Biome, type-check, knip, jscpd 1.19%, 871 api tests, 328 app tests, 28 a11y tests.

refactor → patch. Merge commit, not squash.

The release review left three call sites carrying look in `className`. Each
turned out to be the visible end of a duplicated primitive, not a one-off.

`CopyableValue` — `copy-row.tsx` and `secret-reveal-dialog.tsx` held the
same box byte for byte: identical wrapper classes, identical `<span
className="flex-1">`, identical ghost icon button. Two copies of a component,
not two copies of a class string. The primitive owns the surface and the
clipboard write; the toast and the translated labels stay in the app, where
they belong.

`Panel` — `rounded-md border p-3` appeared on a `<details>`, an `<li>`, a
second `<details>` and a `<div>`. Four elements, one surface, so the
primitive takes `asChild` rather than forcing everyone into a `<div>`. It is
deliberately not `Card`: `Card` is `rounded-xl`, carries `shadow-sm`,
`bg-card` and `hover-lift`, and is the page-level container — reusing it
here would have made every nested box lift on hover.

`CodeBlock` — `overflow-x-auto rounded bg-muted text-xs` on seven `<pre>`
tags, three at `p-3` and four at `p-2`; the padding is the `size` variant.

Three page titles moved from `<h1 className="text-2xl font-semibold">` to
`TypographyH1 variant="page"`, which is what every other in-app page already
uses — the raw class was not just off-system, it was a different size from
the dashboard and the admin screens next to it. The webhooks catalog link
drops its four cosmetic classes for `NavLink variant="plain"`, whose tone it
was reproducing by hand.

`features/legal/policies/index.ts` becomes `policies/bodies.ts`. It never was
a re-export barrel — it resolves a locale to a policy body — but the filename
made it read as one, and the rule is about the name as much as the content.
@axelhamil
axelhamil merged commit da96f7b into main Sep 1, 2026
1 check passed
@github-actions

github-actions Bot commented Sep 1, 2026

Copy link
Copy Markdown

🎉 This PR is included in version 1.24.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant