Skip to content

refactor(ui): replace remaining inline icons with the shared icon module - #276

Open
truongthinh1412 wants to merge 3 commits into
johannesjo:mainfrom
truongthinh1412:refactor/208-shared-icon-module
Open

truongthinh1412 wants to merge 3 commits into
johannesjo:mainfrom
truongthinh1412:refactor/208-shared-icon-module

Conversation

@truongthinh1412

Copy link
Copy Markdown

Description

Completes the shared icon module migration requested in #208 (tranche 1: #220 created src/components/icons.tsx with 11 icons; #265 migrated one more glyph).

  • Extends the shared icon module from 11 to 59 exports: adds an internal StrokeSvgIcon base for stroke-drawn glyphs (per-glyph stroke-width, viewBox, round caps/joins) plus 47 new components copied from the real pasted paths (22 fill, 25 stroke).
  • Replaces all remaining 74 inline <svg> icon blocks across 33 non-test source files, preserving each call site's size, class, style, reactivity, and accessibility semantics — zero intended visual change.
  • Replaces remaining text-glyph icon substitutes (✓/× status symbols in MergeReadinessPanel, 3 standalone × close glyphs) with CheckIcon/CloseIcon at size 12.
  • Folds the single-glyph src/documents/DocumentIcon.tsx into the shared module; importers updated with explicit sizes matching its previous defaults (14/12/18/18).
  • Adds src/components/icons.client.test.tsx rendering all 59 exports: default size 16, custom size, currentColor inheritance, aria-hidden/<title> behavior.
  • All 59 exports are consumed by non-test code, so knip (lint:dead) stays green; depcruise reports no violations.

Deliberately deferred (happy to follow up in this PR if preferred):

  • The disclosure glyph in ConnectPhoneModal — no byte-faithful filled-triangle component exists in the module; substituting a visibly different glyph would change rendering.
  • The svg-string constants in src/lib/mermaid-lightbox.ts — plain .ts building HTML strings, outside the module's .tsx scope.

If one 39-file PR is too large, I'm happy to split it into smaller tranches on request.

Issues Resolved

Fixes #208

Check List

  • New functionality includes testing.
  • New functionality has been documented in the README if applicable. (Not applicable — refactor only, no user-facing feature or configuration change.)

@truongthinh1412
truongthinh1412 force-pushed the refactor/208-shared-icon-module branch from 0407725 to ca0a48b Compare September 15, 2026 17:52
@truongthinh1412

Copy link
Copy Markdown
Author

Rebased onto current main (78a65db) to resolve the merge conflicts — no review action needed, this just keeps the PR mergeable.

What the rebase involved, in case it's useful context:

  • Upstream's document-workspace rewrite (DocumentWorkspaceOverlayDocumentWorkspacePanel) was merged with the icon migration intact (including the 18px default-size restoration).
  • Icons introduced upstream in the meantime were migrated to the shared module as well, so the PR still holds its "no inline icon SVGs" claim: the new focus-mode toggle (added as EnterFocusIcon/ExitFocusIcon), the full-width toggle (FullWidthIcon), the branch chip (GitBranchAltIcon), the "Advanced options" disclosure chevron in NewTaskPanel (ChevronRightThinIcon), and the tour-ready ✓ in ChangeTourButton (CheckIcon). Module now exports 65 icons, all covered by the client test.
  • All local gates re-run green after the rebase (npm run check, npm run check:static, full client suite, zero src/ unit failures).

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.

Add a shared icon module (75 inline SVGs across 31 files, close icon pasted 10x)

1 participant