component search bar added

[afsar-dev]

Summary by CodeRabbit

Release Notes

• New Features
  • Added component search functionality with a searchable interface in the navbar
  • Search results display component titles and categories
  • Keyboard shortcuts: Cmd/Ctrl+K to open search, arrow keys to navigate results, Enter to select, Escape to close
  • Modal interface with smooth animations

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
nurui	Building	Preview	Comment	Dec 12, 2025 9:25am

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This change introduces a component-level search feature across the application. A new modal search interface (ComponentSearchbar) is added and integrated into the navigation bar, supported by a search hook for state management and utility functions for flattening the navigation structure.

Changes

Cohort / File(s)	Summary
Search Infrastructure src/hooks/useComponentSearch.ts, src/utils/search-utils.ts	New hook managing search modal state, query filtering, and global keyboard shortcuts (Cmd/Ctrl+K to toggle, ESC to close). Utility functions flatten hierarchical navigation into searchable items with categorization.
Search UI Component src/components/layout/components-layout/ComponentSearchbar.tsx	New modal component rendering portal-hosted searchable results list with keyboard navigation, focus trapping, animated transitions, and auto-scroll to active selection.
Navigation Integration src/components/layout/components-layout/ComponentsNavbar.tsx	Integrated ComponentSearchbar into navbar left group alongside sidebar toggle and drawer, hidden on smaller screens.

Sequence Diagram

sequenceDiagram
    actor User
    participant Navbar as ComponentsNavbar
    participant Searchbar as ComponentSearchbar
    participant Hook as useComponentSearch
    participant Utils as flattenNavigation
    participant Portal as DOM Portal

    User->>Hook: Press Cmd/Ctrl+K or click search
    Hook->>Hook: toggleOpen() → isOpen = true
    
    Hook->>Utils: flattenNavigation(navigation)
    Utils-->>Hook: FlattenedItem[]
    Hook->>Hook: Memoize results

    Navbar->>Searchbar: Render with open state
    Searchbar->>Portal: createPortal(modal)
    Portal-->>Portal: Render backdrop & input
    Searchbar->>Searchbar: Focus input, trap focus
    
    User->>Searchbar: Type query or navigate
    Searchbar->>Hook: Update query state
    Hook->>Hook: Filter results (title/category match)
    Hook-->>Searchbar: filteredResults
    
    Searchbar->>Searchbar: Re-render list, highlight selection
    
    User->>Searchbar: Press Enter or click item
    Searchbar->>Searchbar: Navigate to item.href
    
    Searchbar->>Hook: closeModal() → isOpen = false, query reset
    Hook->>Portal: Remove from DOM

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Areas requiring focused attention:

• Focus management and accessibility in modal (focus trap, backdrop click handling, focus restoration on close)
• Portal cleanup and potential memory leak from global keydown listener
• Memoization correctness for flattened results to prevent unnecessary re-filtering
• Edge cases in keyboard navigation (ArrowUp/Down at boundaries, interaction with filtered results)
• Body scroll locking mechanism and cleanup

Poem

🔍 A search box hops into the nav,
With Cmd+K and keyboard flair,
Results dance in a portal bright,
Filtered smooth, focused just right,
We leap through features with delight! 🐰

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch dev

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 07ac6c3 and d09a1aa.

📒 Files selected for processing (4)

• src/components/layout/components-layout/ComponentSearchbar.tsx (1 hunks)
• src/components/layout/components-layout/ComponentsNavbar.tsx (4 hunks)
• src/hooks/useComponentSearch.ts (1 hunks)
• src/utils/search-utils.ts (1 hunks)

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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