Skip to content

fix(web): replace emoji sidebar icons with consistent inline SVGs#436

Merged
FSM1 merged 3 commits into
mainfrom
fix/sidebar-icons-consistent
Apr 1, 2026
Merged

fix(web): replace emoji sidebar icons with consistent inline SVGs#436
FSM1 merged 3 commits into
mainfrom
fix/sidebar-icons-consistent

Conversation

@FSM1

@FSM1 FSM1 commented Apr 1, 2026

Copy link
Copy Markdown
Owner

Summary

  • Replaced mixed Unicode emoji/symbol sidebar icons with uniform inline SVG icons
  • All 4 nav icons (Files, Shared, Bin, Settings) now use stroke-based SVGs with currentColor and consistent strokeWidth="1.2"
  • Updated .nav-item-icon CSS from font-based text styling to flex container for SVG containment

Test plan

  • Verify all 4 sidebar icons render as monochrome SVGs matching the terminal aesthetic
  • Hover over each nav item — icon color should change with the text
  • Active nav item should show icon in brighter/primary color
  • Check icons are visually consistent in size and stroke weight

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Style
    • Sidebar navigation icons replaced with consistent monochrome inline SVGs (replacing emoji) for uniform cross-platform appearance and proper sizing/alignment.
  • Documentation
    • Project planning/state updated to record the completed quick task and its verification notes.

FSM1 added 2 commits April 1, 2026 15:19
- 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
Copilot AI review requested due to automatic review settings April 1, 2026 13:23
@coderabbitai

coderabbitai Bot commented Apr 1, 2026

Copy link
Copy Markdown

Walkthrough

Replaced 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

Cohort / File(s) Summary
Planning & Documentation
\.planning/STATE.md, .planning/quick/260401-kyv-fix-sidebar-icons-to-be-consistent/260401-kyv-PLAN.md, .planning/quick/260401-kyv-fix-sidebar-icons-to-be-consistent/260401-kyv-SUMMARY.md
Added quick-task 260401-kyv plan/summary files and recorded its completion in project state.
Component Implementation
apps/web/src/components/layout/NavItem.tsx
Switched ICON_MAP values from emoji strings to ReactNode inline SVG elements and render icons directly from the map; updated component doc comment.
Layout Styling
apps/web/src/styles/layout.css
Replaced font/emoji-based .nav-item-icon rules with a fixed 16×16 flex container, centered alignment, and flex-shrink: 0 for proper SVG layout.
Release Config
release-please-config.json
Reformatted JSON entries and added release-as: "0.37.0" override for apps/web package.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested labels

render-preview

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: replacing emoji sidebar icons with inline SVGs for consistency.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/sidebar-icons-consistent

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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_MAP values from Unicode strings to inline SVG ReactNodes (folder/shared/bin/settings) in NavItem.
  • Updated .nav-item-icon CSS 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.

@github-actions github-actions Bot added the release:web:fix Patch version bump (bug fix) for web label Apr 1, 2026
@github-actions

github-actions Bot commented Apr 1, 2026

Copy link
Copy Markdown
Contributor

Release Preview

Package Bump Label Source
web minor release:web:fix Direct (fix commit)

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
release-please-config.json (1)

74-75: Treat release-as as temporary config.

The release-as: 0.37.0 override 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

📥 Commits

Reviewing files that changed from the base of the PR and between 856b62f and e71531f.

📒 Files selected for processing (1)
  • release-please-config.json

@FSM1 FSM1 closed this Apr 1, 2026
@FSM1 FSM1 reopened this Apr 1, 2026
@FSM1 FSM1 merged commit c7f72b6 into main Apr 1, 2026
26 checks passed
This was referenced Apr 1, 2026
@FSM1 FSM1 deleted the fix/sidebar-icons-consistent branch April 14, 2026 00:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

release:web:fix Patch version bump (bug fix) for web

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants