fix(web): replace emoji sidebar icons with consistent inline SVGs#436
Conversation
- Replace ICON_MAP emoji strings with ReactNode inline SVG elements - Add folder, link/chain, trash, and gear SVG icons using currentColor - Update .nav-item-icon CSS from text styling to flex SVG container - Icons now inherit color from parent for hover/active state transitions
Entire-Checkpoint: a75fe9ed7b18
WalkthroughReplaced emoji sidebar icons with inline SVG React nodes, updated CSS for SVG sizing/layout, added planning/summary docs for quick task 260401-kyv, and recorded the task completion in project state. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
Replaces platform-dependent emoji/sidebar symbols in the web app navigation with consistent inline SVG icons that inherit color via currentColor, ensuring uniform rendering and hover/active color behavior across platforms.
Changes:
- Swapped
ICON_MAPvalues from Unicode strings to inline SVGReactNodes (folder/shared/bin/settings) inNavItem. - Updated
.nav-item-iconCSS from font-based sizing to a fixed 16×16 flex container suitable for SVGs. - Added planning/state bookkeeping for quick task
260401-kyv.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| apps/web/src/styles/layout.css | Updates .nav-item-icon to a fixed-size flex container for SVG alignment/sizing. |
| apps/web/src/components/layout/NavItem.tsx | Replaces emoji icon mapping with inline stroke-based SVGs using currentColor. |
| .planning/STATE.md | Records completion of quick task 260401-kyv. |
| .planning/quick/260401-kyv-fix-sidebar-icons-to-be-consistent/260401-kyv-SUMMARY.md | Adds quick-task execution summary and decisions. |
| .planning/quick/260401-kyv-fix-sidebar-icons-to-be-consistent/260401-kyv-PLAN.md | Adds quick-task plan detailing implementation and verification steps. |
Release Preview
|
There was a problem hiding this comment.
🧹 Nitpick comments (1)
release-please-config.json (1)
74-75: Treatrelease-asas temporary config.The
release-as: 0.37.0override is valid for forcing the next web release (currently at 0.36.0), but should be removed after that release completes to avoid stale pinning on subsequent runs.Reference: https://github.com/googleapis/release-please/blob/main/docs/manifest-releaser.md
♻️ Proposed change
- "bump-minor-pre-major": true, - "release-as": "0.37.0" + "bump-minor-pre-major": true🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@release-please-config.json` around lines 74 - 75, Remove the temporary "release-as": "0.37.0" override from the release-please config after the 0.37.0 web release completes; locate the "release-as" key in the release-please-config.json alongside "bump-minor-pre-major" and delete that property so future runs aren't pinned to 0.37.0, leaving other configuration intact.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@release-please-config.json`:
- Around line 74-75: Remove the temporary "release-as": "0.37.0" override from
the release-please config after the 0.37.0 web release completes; locate the
"release-as" key in the release-please-config.json alongside
"bump-minor-pre-major" and delete that property so future runs aren't pinned to
0.37.0, leaving other configuration intact.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 61c31a75-5bbe-4831-8826-37f7b2fcb9f8
📒 Files selected for processing (1)
release-please-config.json
Summary
currentColorand consistentstrokeWidth="1.2".nav-item-iconCSS from font-based text styling to flex container for SVG containmentTest plan
🤖 Generated with Claude Code
Summary by CodeRabbit