feat: fix rerenders on search input

[adithyaakrishna]

Summary

• Refactors the SearchModal component by extracting inline group rendering to fix re-renders

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: Fix rerenders

Testing

• Go to home page and type Cmd+K and give any inputs

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[cursor]

PR Summary

Low Risk
Low risk refactor of client-side UI rendering; primary risk is subtle regressions in selection/navigation handlers or search result rendering.

Overview
Refactors SearchModal to reduce rerenders while typing by extracting each result section into memoized group components and memoized item renderers.

Moves shared types/styles and the filterAndSort scoring logic into utils.ts, and stabilizes event handlers by using refs for router/onOpenChange and shared callbacks for overlay/escape/selection behavior.

^{Written by Cursor Bugbot for commit 23f9952. This will update automatically on new commits. Configure here.}

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 26, 2026 6:44pm

[greptile-apps]

Greptile Summary

This PR refactors the SearchModal component to fix unnecessary re-renders by extracting inline group rendering into memoized sub-components (_components/search-groups.tsx) and memoized item components (_components/command-items.tsx), and moving shared interfaces/utilities to utils.ts. The onOpenChange / router closure-capture problem is resolved via the stable-ref pattern, and all handler callbacks are properly stabilized with empty useCallback deps.

Key changes:

• Extracted 9 group components (each wrapped in memo) and 5 item components (each with custom equality comparators that intentionally skip onSelect, consistent with cmdk's useAsRef internal behaviour)
• Introduced routerRef and onOpenChangeRef to break useCallback dependency on unstable props while still always calling the latest version
• Moved scoreMatch, filterAndSort, all interfaces, and Tailwind class constants to utils.ts
• Added index.ts barrel export
• All previously raised concerns (React namespace import, React.memo vs named memo, inconsistent {open && …} guards) are addressed in the current state of the PR

One P2 style issue remains: rounded-sm (2px in Tailwind v3) is used in command-items.tsx where the original code had rounded-[4px] (4px). The correct utility is rounded (0.25rem = 4px). This affects the icon container and workflow colour-dot corners.

Confidence Score: 4/5

Safe to merge after fixing the rounded-sm visual regression in command-items.tsx

All previously raised issues are resolved. The refactoring is well-structured and achieves its goal of eliminating unnecessary re-renders. The only outstanding issue is a minor visual regression (rounded-sm → 2px instead of the original 4px corner radius on icon containers), which is a targeted one-line fix per affected component.

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/_components/command-items.tsx — lines 23 and 64 (rounded-sm → rounded)

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/_components/command-items.tsx	New file extracting five memoized item components from search-modal.tsx; minor visual regression where rounded-sm (2px) replaces rounded-[4px] on icon containers
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/_components/search-groups.tsx	New file with nine memoized group components; correctly uses named memo import and consistently guards empty arrays with early null returns
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx	Refactored to use stable ref pattern for router/onOpenChange and extracted group components; callbacks are correctly stabilized with useCallback and empty deps
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts	New utility file correctly exporting interfaces, scoring helpers, and Tailwind class constants; Tailwind class normalisation is correct except for the rounded-sm issue in command-items.tsx
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/index.ts	Clean barrel file re-exporting SearchModal and all public types from utils.ts

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    SM["SearchModal\n(search-modal.tsx)"]
    SG["search-groups.tsx\n(9 memoized groups)"]
    CI["command-items.tsx\n(5 memoized items)"]
    UT["utils.ts\n(interfaces, filterAndSort, constants)"]
    IX["index.ts\n(barrel export)"]

    SM -->|"imports group components"| SG
    SM -->|"imports filterAndSort"| UT
    SG -->|"imports item components"| CI
    SG -->|"imports GROUP_HEADING_CLASSNAME"| UT
    CI -->|"imports COMMAND_ITEM_CLASSNAME\nCommandItemProps"| UT
    IX -->|"re-exports SearchModal"| SM
    IX -->|"re-exports types"| UT

    SM -->|"stable refs"| R1["routerRef\nonOpenChangeRef"]
    SM -->|"stable callbacks via useCallback empty deps"| R2["handleBlockSelect\nhandleWorkflowSelect\nhandleTaskSelect\n..."]
    R2 --> SG

Loading

_{Reviews (2): Last reviewed commit: "chore: fix review changes" | Re-trigger Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR