perf(search): rank groups by relevance, fix broken memoization, cross-review cleanup

Cmd-K performance/DX pass on top of the palette redesign:

- Fix a systemic stale-closure/broken-memoization bug: every row previously
  got a fresh inline onSelect closure per render while the memo comparators
  excluded onSelect from equality checks. Replaced with useItemDispatch, a
  stable Map-based dispatcher shared by a new createRowGroup factory that all
  groups are now built from (collapses ~15 hand-copied group shells into one).
- Rank the typed catalog groups by their best-matching item's fuzzy score
  instead of a fixed group order, so a strong Docs hit outranks a weak Blocks
  hit — the biggest DX gap vs. Linear/kbar-style palettes.
- Add a "+N more, refine your search" row when a group's cap trims real
  matches, instead of silently dropping them.
- Fix a real animation bug: the dialog panel toggled visible/invisible with
  no transition class at all, popping in/out instantly while only the
  backdrop faded. Fixed with the CSS-spec visibility-transition trick plus a
  subtle scale, animating both directions without a JS deferred-unmount hack.
- content-visibility:auto + contain-intrinsic-size on rows, deferring
  layout/paint for off-screen rows without full virtualization (which would
  require reimplementing cmdk's DOM-based keyboard nav).
- Drop a stray regenerated docx.cjs sandbox-bundle diff that had leaked into
  the branch.
- Cross-review cleanup (/simplify + /cleanup): merged a duplicate
  MemoizedCategoryItem into MemoizedIconItem, removed 3 useCallbacks with no
  observer, hoisted a duplicated FALLBACK_BG_COLOR constant, migrated
  arbitrary z-40/z-50 to the z-modal token, simplified a dead ternary and a
  4-way copy-pasted branch in the recents resolver, and split an
  over-broad-dependency memo so switching keystrokes inside a scope doesn't
  re-filter the whole tools catalog.

Added search-groups.test.tsx (dispatch correctness against a real cmdk root)
and filterAndScore tests in utils.test.ts.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/command-items.tsx

@@ -90,6 +90,7 @@ export const MemoizedCommandItem = memo(
   },
   (prev, next) =>
     prev.value === next.value &&
+    prev.onSelect === next.onSelect &&
     prev.icon === next.icon &&
     prev.bgColor === next.bgColor &&
     prev.showColoredIcon === next.showColoredIcon &&
@@ -107,7 +108,7 @@ export const MemoizedActionItem = memo(
     query,
   }: {
     value: string
-    onSelect: () => void
+    onSelect: (value: string) => void
     icon: ComponentType<{ className?: string }>
     name: string
     shortcut?: string
@@ -129,6 +130,7 @@ export const MemoizedActionItem = memo(
   },
   (prev, next) =>
     prev.value === next.value &&
+    prev.onSelect === next.onSelect &&
     prev.icon === next.icon &&
     prev.name === next.name &&
     prev.shortcut === next.shortcut &&
@@ -145,7 +147,7 @@ export const MemoizedWorkflowItem = memo(
     query,
   }: {
     value: string
-    onSelect: () => void
+    onSelect: (value: string) => void
     name: string
     folderPath?: string[]
     isCurrent?: boolean
@@ -180,6 +182,7 @@ export const MemoizedWorkflowItem = memo(
   },
   (prev, next) =>
     prev.value === next.value &&
+    prev.onSelect === next.onSelect &&
     prev.name === next.name &&
     prev.isCurrent === next.isCurrent &&
     prev.query === next.query &&
@@ -197,7 +200,7 @@ export const MemoizedFileItem = memo(
     query,
   }: {
     value: string
-    onSelect: () => void
+    onSelect: (value: string) => void
     name: string
     folderPath?: string[]
     query?: string
@@ -230,6 +233,7 @@ export const MemoizedFileItem = memo(
   },
   (prev, next) =>
     prev.value === next.value &&
+    prev.onSelect === next.onSelect &&
     prev.name === next.name &&
     prev.query === next.query &&
     (prev.folderPath === next.folderPath ||
@@ -245,7 +249,7 @@ export const MemoizedTaskItem = memo(
     query,
   }: {
     value: string
-    onSelect: () => void
+    onSelect: (value: string) => void
     name: string
     query?: string
   }) {
@@ -269,7 +273,7 @@ export const MemoizedWorkspaceItem = memo(
     query,
   }: {
     value: string
-    onSelect: () => void
+    onSelect: (value: string) => void
     name: string
     isCurrent?: boolean
     query?: string
@@ -287,6 +291,7 @@ export const MemoizedWorkspaceItem = memo(
   },
   (prev, next) =>
     prev.value === next.value &&
+    prev.onSelect === next.onSelect &&
     prev.name === next.name &&
     prev.isCurrent === next.isCurrent &&
     prev.query === next.query
@@ -302,7 +307,7 @@ export const MemoizedPageItem = memo(
     query,
   }: {
     value: string
-    onSelect: () => void
+    onSelect: (value: string) => void
     icon: ComponentType<{ className?: string }>
     name: string
     shortcut?: string
@@ -324,75 +329,54 @@ export const MemoizedPageItem = memo(
   },
   (prev, next) =>
     prev.value === next.value &&
+    prev.onSelect === next.onSelect &&
     prev.icon === next.icon &&
     prev.name === next.name &&
     prev.shortcut === next.shortcut &&
     prev.query === next.query
 )
 
-export const MemoizedCategoryItem = memo(
-  function CategoryItem({
-    value,
-    onSelect,
-    icon: Icon,
-    name,
-    count,
-    query,
-  }: {
-    value: string
-    onSelect: () => void
-    icon: ComponentType<{ className?: string }>
-    name: string
-    count: number
-    query?: string
-  }) {
-    return (
-      <Command.Item value={value} onSelect={onSelect} className={COMMAND_ITEM_CLASSNAME}>
-        <Icon className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-        <span className='truncate text-[var(--text-body)]'>
-          <HighlightedText text={name} query={query} />
-        </span>
-        <span className='ml-auto flex flex-shrink-0 items-center gap-1.5 text-[var(--text-subtle)] text-small'>
-          {count}
-          <ChevronRight className='size-[14px]' />
-        </span>
-      </Command.Item>
-    )
-  },
-  (prev, next) =>
-    prev.value === next.value &&
-    prev.icon === next.icon &&
-    prev.name === next.name &&
-    prev.count === next.count &&
-    prev.query === next.query
-)
-
+/**
+ * Also used for the browse-category rows (`count` set) — those are otherwise
+ * identical to a plain icon row, so a trailing count + chevron is a prop
+ * rather than a forked component.
+ */
 export const MemoizedIconItem = memo(
   function IconItem({
     value,
     onSelect,
     name,
     icon: Icon,
     query,
+    count,
   }: {
     value: string
-    onSelect: () => void
+    onSelect: (value: string) => void
     name: string
     icon: ComponentType<{ className?: string }>
     query?: string
+    count?: number
   }) {
     return (
       <Command.Item value={value} onSelect={onSelect} className={COMMAND_ITEM_CLASSNAME}>
         <Icon className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
         <span className='truncate text-[var(--text-body)]'>
           <HighlightedText text={name} query={query} />
         </span>
+        {count !== undefined && (
+          <span className='ml-auto flex flex-shrink-0 items-center gap-1.5 text-[var(--text-subtle)] text-small'>
+            {count}
+            <ChevronRight className='size-[14px]' />
+          </span>
+        )}
       </Command.Item>
     )
   },
   (prev, next) =>
     prev.value === next.value &&
+    prev.onSelect === next.onSelect &&
     prev.name === next.name &&
     prev.icon === next.icon &&
-    prev.query === next.query
+    prev.query === next.query &&
+    prev.count === next.count
 )

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/index.ts

@@ -1,7 +1,6 @@
 export {
   HighlightedText,
   MemoizedActionItem,
-  MemoizedCategoryItem,
   MemoizedCommandItem,
   MemoizedFileItem,
   MemoizedIconItem,

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/search-groups.test.tsx

@@ -0,0 +1,105 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { Command } from 'cmdk'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { BlocksGroup } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/search-groups'
+import type { SearchBlockItem } from '@/stores/modals/search/types'
+
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+function TestIcon() {
+  return <svg data-testid='icon' />
+}
+
+function block(id: string, name: string): SearchBlockItem {
+  return { id, name, icon: TestIcon, bgColor: '#000', type: id }
+}
+
+let container: HTMLDivElement
+let root: Root
+
+function mount(ui: ReactNode) {
+  act(() => {
+    root.render(<Command shouldFilter={false}>{ui}</Command>)
+  })
+}
+
+function selectByText(text: string) {
+  const el = Array.from(container.querySelectorAll('[cmdk-item]')).find((node) =>
+    node.textContent?.includes(text)
+  )
+  if (!el) throw new Error(`row not found: ${text}`)
+  act(() => {
+    el.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+  })
+}
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+})
+
+describe('BlocksGroup value-dispatch', () => {
+  it('routes a click on a row to onSelect with the matching item', () => {
+    const onSelect = vi.fn()
+    const items = [block('a', 'Alpha'), block('b', 'Beta')]
+    mount(<BlocksGroup items={items} onSelect={onSelect} />)
+
+    selectByText('Beta')
+
+    expect(onSelect).toHaveBeenCalledTimes(1)
+    expect(onSelect).toHaveBeenCalledWith(items[1])
+  })
+
+  it('resolves the CURRENT item after items is replaced with a new array (no stale Map lookups)', () => {
+    const onSelect = vi.fn()
+    const first = [block('a', 'Alpha'), block('b', 'Beta')]
+    mount(<BlocksGroup items={first} onSelect={onSelect} />)
+
+    const second = [block('a', 'Alpha Renamed'), block('c', 'Gamma')]
+    mount(<BlocksGroup items={second} onSelect={onSelect} />)
+
+    selectByText('Gamma')
+
+    expect(onSelect).toHaveBeenCalledTimes(1)
+    expect(onSelect).toHaveBeenCalledWith(second[1])
+  })
+
+  it('still dispatches correctly after onSelect identity changes between renders', () => {
+    const first = vi.fn()
+    const second = vi.fn()
+    const items = [block('a', 'Alpha'), block('b', 'Beta')]
+    mount(<BlocksGroup items={items} onSelect={first} />)
+    mount(<BlocksGroup items={items} onSelect={second} />)
+
+    selectByText('Alpha')
+
+    expect(first).not.toHaveBeenCalled()
+    expect(second).toHaveBeenCalledTimes(1)
+    expect(second).toHaveBeenCalledWith(items[0])
+  })
+})
+
+describe('BlocksGroup truncation affordance', () => {
+  it('renders nothing extra when nothing was truncated', () => {
+    mount(<BlocksGroup items={[block('a', 'Alpha')]} onSelect={vi.fn()} truncatedCount={0} />)
+    expect(container.textContent).not.toMatch(/more/i)
+  })
+
+  it('surfaces a non-selectable "+N more" row when the cap trimmed real matches', () => {
+    mount(<BlocksGroup items={[block('a', 'Alpha')]} onSelect={vi.fn()} truncatedCount={12} />)
+    expect(container.textContent).toContain('+12 more')
+    // Must not be a cmdk row — it should never be selectable via keyboard/click.
+    const items = container.querySelectorAll('[cmdk-item]')
+    expect(items).toHaveLength(1)
+  })
+})