Skip to content

feat: enhance search with visuals and integrate into HomePage (clean)#365

Open
sumitakhuli wants to merge 1 commit intoopen-source-uom:mainfrom
sumitakhuli:feat/search-enhancements-clean
Open

feat: enhance search with visuals and integrate into HomePage (clean)#365
sumitakhuli wants to merge 1 commit intoopen-source-uom:mainfrom
sumitakhuli:feat/search-enhancements-clean

Conversation

@sumitakhuli
Copy link
Copy Markdown
Contributor

@sumitakhuli sumitakhuli commented Feb 14, 2026

Fixes #364

Screen.Recording.2026-02-14.at.6.57.59.AM.mov

This PR integrates the search functionality into the Home Page and enhances it with visual feedback mechanisms, while preserving the original grid layout.
Key changes:

  • Integrated Search Component: Added <Search /> to HomePage.jsx so it is actually visible and usable.
  • Animated Icon: The search icon now scales up with a spring animation when typing.
  • Clear Button: Added a clickable 'X' icon to clear the search input and reset results.
  • Results Count: Displays the number of found results (e.g., "Found 3 results").
  • Autocomplete Suggestions: A dropdown list appears with up to 5 matching category titles for quick selection.
  • Focus Glow: Added a subtle blue glow effect when the search input is focused.
  • Clean Implementation: This branch contains ONLY the search enhancements and does NOT include any experimental grid layout changes.

Related Issue

Fixes Issue #364: Search Functionality Lacks Visual Feedback

Motivation and Context

The search component was previously missing from the main UI, making it impossible for users to search. Additionally, the search experience lacked standard visual feedback (clearing, results count, active state), making it less intuitive. This PR solves these usability issues by adding the expected visual cues and ensuring the search bar is properly integrated into the layout.

How Has This Been Tested?

Tested locally on the development environment:

  1. Visibility: Validated that the Search bar now renders above the grid on the Home Page.
  2. Functionality: Typed various queries to verify the grid filters immediately and displays the "Found X results" text.
  3. Interaction: Confirmed the search icon animates on typing and the clear button successfully resets the search field and grid results.
  4. Layout: Verified the grid layout remains consistent with the original design (no unexpected layout shifts).

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

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.

Search Functionality Lacks Visual Feedback and Not even Visible

1 participant