refactor(web): replace hand-written icons with Remix Icon - #1293
Conversation
Generate a tree-shaken Remix Icon subset at build time via @iconify/utils + @iconify-json/ri, keeping the <Icon>/iconSvg() API. Add a chat-new icon for the new-chat buttons and reveal the workspace 'new chat in group' button on hover. Unify the message copy and undo buttons (matching hover style and tooltip, drop the undo hover label, align sizes). Switch the mobile switcher kebab to the horizontal dots icon and tweak sidebar search colors. Regenerate the design-system icon catalog.
🦋 Changeset detectedLatest commit: 5d29bee The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
❌ Nix build failed Hash mismatch in
Please update |
commit: |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 18a7f1448c
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| .gh .gh-more, | ||
| .gh .gh-add { display: none; } |
There was a problem hiding this comment.
When navigating the sidebar without a mouse, the newly hidden .gh-add button is removed from layout and the tab order by display: none; the later :focus-visible reveal rule cannot fire because the button can never receive focus while hidden. This regresses the previously visible "new chat in this workspace" action for keyboard users (and desktop touch contexts without hover), so hide it with opacity/visibility while preserving focusability or reveal it on header focus-within.
Useful? React with 👍 / 👎.
| <button | ||
| class="a-cpbtn" | ||
| @click="copyAssistantRun(ti)" | ||
| > | ||
| <Icon v-if="copiedTurn !== turn.id" name="copy" size="sm" /> |
There was a problem hiding this comment.
For assistant messages with copyable text, this button now contains only decorative <Icon> children; Icon sets aria-hidden when no label is supplied, and Tooltip only renders a visual hint rather than naming the control. The removed text span used to provide the accessible name, so screen-reader users now encounter an unlabeled button here; add an aria-label or visually hidden copy text.
Useful? React with 👍 / 👎.
Restore accessible names (aria-label) on the message copy and undo buttons. Keep the workspace add button reachable for keyboard users by revealing it on header focus-within. Update the nix pnpmDeps hash for the newly added icon dependencies.
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 002e4a0ff2
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| focused). `.gh .gh-more` / `.gh .gh-add` out-specificity IconButton's display | ||
| so the hidden default wins. */ | ||
| .gh .gh-more, | ||
| .gh .gh-add { display: none; } |
There was a problem hiding this comment.
In keyboard-only or non-hover contexts, hiding .gh-add with display: none removes the “new chat in this workspace” control from the tab order, so the later .gh-add:focus-visible/.gh:focus-within reveal rules cannot fire before the button is already focusable. This regresses the previously visible per-workspace create action for users who cannot hover the desktop sidebar; consider revealing it with focusable/visible mechanics or an explicit focus path instead of display: none.
Useful? React with 👍 / 👎.
Keep the workspace add/more buttons focusable without hover by revealing them via opacity instead of display:none, so keyboard and non-hover users can reach the control. Drop explicit .ts extensions in icon imports to satisfy oxlint, and read the design-system icon catalog directly from the generated icon data.
|
@codex review |
|
Codex Review: Didn't find any major issues. More of your lovely PRs please. Reviewed commit: ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback". |
1 participant
Related Issue
No linked issue — this is a web UI polish pass discussed inline with the maintainer.
Problem
The web UI shipped a hand-written SVG icon set whose glyphs were drawn on mixed source grids (12/16/20/24) with inconsistent strokes, so aligning them required ad-hoc per-icon pixel offsets scattered through the CSS. The message-stream action buttons (copy on user/assistant messages, undo) had also drifted apart: different hover colors/backgrounds, a missing tooltip on the assistant copy button, an inline "Undo" label that only appeared on hover, and slightly different button sizes.
What changed
@iconify-json/rivia@iconify/utils(pnpm gen:icons). The<Icon>/iconSvg()API is unchanged, so the ~40 call sites are untouched.chat-newicon and used it for the new-chat buttons; the workspace "new chat in group" button now reveals on hover.Checklist
gen-changesetsskill, or this PR needs no changeset.gen-docsskill, or this PR needs no doc update.