fix(search-modal): fixed search modal keyboard nav

[waleedlatif1]

Description

fixed search modal keyboard nav to include tools and blocks

Type of change

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Tested manually

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have added tests that prove my fix is effective or that my feature works
• All tests pass locally and in CI (bun run test)
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules
• I have updated version numbers as needed (if needed)
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Security Considerations:

• My changes do not introduce any new security vulnerabilities
• I have considered the security implications of my changes

Additional Information:

Screen.Recording.2025-07-29.at.11.30.38.PM.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sim	🔄 Building (Inspect)	Visit Preview	💬 Add feedback	Jul 30, 2025 6:51am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
docs	⬜️ Skipped (Inspect)			Jul 30, 2025 6:51am

[greptile-apps]

Greptile Summary

This PR refactors the search modal's keyboard navigation system to support multi-dimensional navigation across different content types. The changes extract complex navigation logic into a dedicated custom hook useSearchNavigation and restructure the UI to handle both grid-based layouts (for blocks and tools) and list-based layouts (for other items).

The core improvement enables users to navigate blocks and tools using arrow keys in a 2D grid pattern - left/right for horizontal movement and up/down for vertical movement - while maintaining traditional up/down navigation for list items like workspaces and workflows. The implementation introduces a sophisticated section-aware navigation system where each content type (blocks, tools, templates, list items) defines its own navigation behavior.

Key architectural changes include:

• Custom Hook Extraction: Navigation logic moved to useSearchNavigation hook following React best practices for complex state management
• Section-Based Navigation: Items organized into typed sections with grid vs list navigation modes
• Position Memory: The system remembers the last selected position in each section when users switch between them
• CSS Grid Layout: Simplified rendering by replacing synchronized multi-row containers with CSS grid
• Enhanced Selection State: Visual feedback now works consistently across all section types

This change integrates with the existing search modal component in the workspace marketplace, enhancing the user experience for discovering and selecting blocks and tools within workflows.

Confidence score: 3/5

• This PR has some concerning hardcoded assumptions that could cause navigation issues if the UI layout changes
• The hardcoded grid row calculations and complex mathematical positioning logic create potential brittleness
• The hook needs closer examination for edge cases around grid boundaries and section switching, particularly the handleItemClick and grid navigation calculations

_{2 files reviewed, 1 comment}

_{Edit Code Review Bot Settings | Greptile}

[greptile-apps]

style: Using any[] type reduces type safety. Consider defining specific union types for the different item types (BlockItem | ToolItem | TemplateData | etc.).

Context Used: Context - Avoid using type assertions to 'any' in TypeScript. Instead, ensure proper type definitions are used to maintain type safety. (link)