Skip to content

fix(web): use Lucide search icon in sidebar search - #763

Merged
elie222 merged 1 commit into
elie222:mainfrom
RA-h:fix/sidebar-search-icon
Sep 7, 2026
Merged

elie222 merged 1 commit into
elie222:mainfrom
RA-h:fix/sidebar-search-icon

Conversation

@RA-h

@RA-h RA-h commented Sep 7, 2026 •

Copy link
Copy Markdown
Contributor

Why

The sidebar search field rendered its magnifier as a raw Unicode glyph (⌕) in a plain span, which came out tiny and off-baseline compared to every other stroke icon in the sidebar.

What

  • Replaced the text glyph in the sidebar-search InputGroupAddon with Lucide's Search icon (size 16, strokeWidth 1.8), matching neighboring icon sizing.
  • Added Search to the existing lucide-react import in Shell.tsx.

How tested

  • Biome check on Shell.tsx: clean.
  • tsc --noEmit (web): clean.
  • Web unit tests: 38 files / 207 tests pass.
  • CI: all checks green (Lint, Typecheck, Unit tests, Postgres journeys, Web E2E, Greptile 5/5 with no actionable findings, CodeRabbit with no actionable comments).
  • E2E screenshots: Playwright gallery for this PR (sidebar search is covered by ui-appearance.spec.ts).

@vercel

vercel Bot commented Sep 7, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated
rakazo-www Skipped Skipped Sep 7, 2026 6:00am UTC

Request Review

@coderabbitai

coderabbitai Bot commented Sep 7, 2026 •

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Team

Run ID: 22f4926d-d36a-46e4-a7ae-dc5eeb8084e0

📥 Commits

Reviewing files that changed from the base of the PR and between 8bd5e34 and bf31ca0.

📒 Files selected for processing (1)
  • apps/web/src/pages/Shell.tsx

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.


📝 Walkthrough

Walkthrough

The sidebar search input now renders the lucide-react Search icon with explicit size, stroke width, and hidden accessibility semantics.

Changes

Sidebar search icon

Layer / File(s) Summary
Render the Search icon
apps/web/src/pages/Shell.tsx
Imports Search from lucide-react and replaces the ⌕ text glyph with the configured icon component.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Merge Risk: ⚪ Minimal · up to bf31c

The sidebar search field now displays a consistent Lucide search icon without changing search behavior or accessibility exposure. No current merge-blocking risk remains.

Suggested reviewers: elie222, davidrobertson, fetw882

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely describes the main change: replacing the sidebar search glyph with the Lucide search icon.
  • Fix all pre-merge checks with AI

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.

@greptile-apps

greptile-apps Bot commented Sep 7, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

Replaces the sidebar search field’s Unicode magnifier glyph with a consistently sized Lucide Search icon.

  • Adds Search to the existing lucide-react import.
  • Renders the icon at 16px with a 1.8 stroke width while preserving its decorative accessibility treatment.

Confidence Score: 5/5

The PR appears safe to merge with no actionable defects identified.

The imported icon and supplied props are supported by the installed Lucide package, match existing project patterns, preserve aria-hidden behavior, and satisfy the InputGroupAddon sizing contract.

Important Files Changed

Filename Overview
apps/web/src/pages/Shell.tsx The Lucide icon replacement follows existing Shell icon conventions and introduces no identified build, behavioral, or accessibility regression.

Reviews (1): Last reviewed commit: "fix(web): use Lucide search icon in side..." | Re-trigger Greptile

@github-actions

github-actions Bot commented Sep 7, 2026

Copy link
Copy Markdown
Contributor

Playwright screenshots

No new feature frames; gallery is suite-vs-main drift.

Open screenshot gallery · Dashboard · CI run

Updated for commit bf31ca0.

@elie222
elie222 merged commit c5dfd54 into elie222:main Sep 7, 2026
18 checks passed
@RA-h
RA-h deleted the fix/sidebar-search-icon branch September 7, 2026 19:38

This branch was previously deployed

1 inactive deployment
Preview — bf31ca01 Deployed Sep 7, 2026 by vercel[bot]
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.

2 participants