Skip to content

Commit a98537c

Browse files
j15zj15z
committed
feat(search): sharpen command palette discovery
Unify command surfaces, flatten ranked results, and remove favorites so the palette stays focused on fast discovery. Add Tab result cycling and workspace identity icons for quicker keyboard navigation.
1 parent c5369b2 commit a98537c

17 files changed

Lines changed: 794 additions & 475 deletions

File tree

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ import { useParams } from 'next/navigation'
99
import { usePostHog } from 'posthog-js/react'
1010
import { Handle, type NodeProps, Position } from 'reactflow'
1111
import { captureEvent } from '@/lib/posthog/client'
12+
import {
13+
CommandFadedList,
14+
CommandSearch,
15+
} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-chrome'
1216
import { MemoizedCommandItem } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items'
1317
import {
1418
BlocksGroup,
@@ -403,10 +407,11 @@ export function ConnectionBlockSelector({ id, data }: NodeProps<ConnectionBlockS
403407
className='relative z-20 flex h-full flex-col overflow-hidden rounded-2xl [clip-path:inset(0_round_16px)]'
404408
>
405409
<div className='relative min-h-0 flex-1'>
406-
<Command.List
410+
<CommandFadedList
407411
ref={listRef}
412+
fade='canvas'
408413
className={cn(
409-
"nodrag nopan nowheel allow-scroll scrollbar-none [&_[cmdk-item][aria-selected='true']]:!border-transparent [&_[cmdk-item][aria-selected='true']]:!bg-[var(--surface-hover)] [&_[cmdk-item]_svg]:!scale-100 [&_[cmdk-item]_svg]:!transition-none h-full overflow-y-auto overflow-x-hidden px-1.5 pt-12 pb-1.5 [-webkit-mask-image:linear-gradient(to_bottom,transparent_0%,transparent_8%,black_18%,black_94%,transparent_100%)] [clip-path:inset(3px_round_13px)] [mask-image:linear-gradient(to_bottom,transparent_0%,transparent_8%,black_18%,black_94%,transparent_100%)] [&_[cmdk-group-items]]:flex [&_[cmdk-group-items]]:flex-col",
414+
"nodrag nopan nowheel allow-scroll scrollbar-none [&_[cmdk-item][aria-selected='true']]:!border-transparent [&_[cmdk-item][aria-selected='true']]:!bg-[var(--surface-hover)] [&_[cmdk-item]_svg]:!scale-100 [&_[cmdk-item]_svg]:!transition-none h-full [clip-path:inset(3px_round_13px)]",
410415
CMDK_ITEM_GAP_CLASS,
411416
CMDK_SECTION_GAP_CLASS
412417
)}
@@ -482,19 +487,16 @@ export function ConnectionBlockSelector({ id, data }: NodeProps<ConnectionBlockS
482487
<ToolsGroup items={browseTools} onSelect={handleToolSelect} />
483488
</>
484489
)}
485-
</Command.List>
486-
<div className='nodrag nopan absolute inset-x-[3px] top-[3px] z-20 flex h-12 cursor-text items-center gap-2 rounded-t-[13px] bg-[linear-gradient(to_bottom,var(--surface-2)_0%,color-mix(in_srgb,var(--surface-2)_88%,transparent)_68%,transparent_100%)] px-2.5 pb-2'>
487-
<Search className='size-[14px] flex-shrink-0 text-[var(--text-muted)]' />
488-
<Command.Input
489-
ref={inputRef}
490-
autoFocus
491-
aria-label='Search blocks'
492-
value={search}
493-
onValueChange={handleSearchChange}
494-
placeholder='Search blocks...'
495-
className='h-8 min-w-0 flex-1 cursor-text bg-transparent text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)] focus:outline-none'
496-
/>
497-
</div>
490+
</CommandFadedList>
491+
<CommandSearch
492+
ref={inputRef}
493+
surface='canvas'
494+
autoFocus
495+
aria-label='Search blocks'
496+
value={search}
497+
onValueChange={handleSearchChange}
498+
placeholder='Search blocks...'
499+
/>
498500
</div>
499501
</Command>
500502
</div>

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

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
/**
2+
* @vitest-environment jsdom
3+
*/
4+
import { act } from 'react'
5+
import { Command } from 'cmdk'
6+
import { createRoot, type Root } from 'react-dom/client'
7+
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
8+
import {
9+
CommandFadedList,
10+
CommandSearch,
11+
} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-chrome'
12+
13+
describe('CommandFadedList', () => {
14+
let container: HTMLDivElement
15+
let root: Root
16+
let originalScrollIntoView: typeof HTMLElement.prototype.scrollIntoView
17+
18+
beforeEach(() => {
19+
;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
20+
vi.stubGlobal(
21+
'ResizeObserver',
22+
class {
23+
observe() {}
24+
unobserve() {}
25+
disconnect() {}
26+
}
27+
)
28+
originalScrollIntoView = HTMLElement.prototype.scrollIntoView
29+
Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
30+
configurable: true,
31+
value: vi.fn(),
32+
})
33+
container = document.createElement('div')
34+
document.body.appendChild(container)
35+
root = createRoot(container)
36+
})
37+
38+
afterEach(() => {
39+
act(() => root.unmount())
40+
container.remove()
41+
if (originalScrollIntoView) {
42+
HTMLElement.prototype.scrollIntoView = originalScrollIntoView
43+
} else {
44+
Reflect.deleteProperty(HTMLElement.prototype, 'scrollIntoView')
45+
}
46+
vi.unstubAllGlobals()
47+
})
48+
49+
it('insets the palette scrollbar track below the search field', () => {
50+
act(() => {
51+
root.render(
52+
<Command>
53+
<CommandFadedList fade='palette' />
54+
</Command>
55+
)
56+
})
57+
58+
const list = container.querySelector('[cmdk-list]')
59+
expect(list?.className).toContain('[&::-webkit-scrollbar-track]:mt-12')
60+
expect(list?.className).toContain('[&::-webkit-scrollbar-track]:mb-1.5')
61+
})
62+
63+
it('uses the canvas search surface and content fade in the palette', () => {
64+
act(() => {
65+
root.render(
66+
<Command>
67+
<CommandFadedList fade='palette' />
68+
<CommandSearch surface='palette' aria-label='Search' />
69+
</Command>
70+
)
71+
})
72+
73+
const list = container.querySelector('[cmdk-list]')
74+
const search = container.querySelector('[cmdk-input]')?.parentElement
75+
expect(list?.className).toContain('transparent_8%,black_18%,black_94%')
76+
expect(search?.className).toContain('var(--surface-2)')
77+
})
78+
79+
it('cycles through palette results with Tab and Shift+Tab', () => {
80+
act(() => {
81+
root.render(
82+
<Command loop>
83+
<CommandSearch surface='palette' aria-label='Search' cycleResultsOnTab />
84+
<CommandFadedList fade='palette'>
85+
<Command.Item value='first'>First</Command.Item>
86+
<Command.Item value='second'>Second</Command.Item>
87+
</CommandFadedList>
88+
</Command>
89+
)
90+
})
91+
92+
const input = container.querySelector<HTMLInputElement>('[cmdk-input]')
93+
const selectedResult = () =>
94+
container.querySelector('[cmdk-item][aria-selected="true"]')?.textContent
95+
96+
expect(input).not.toBeNull()
97+
expect(selectedResult()).toBe('First')
98+
99+
const firstTabEvent = new KeyboardEvent('keydown', {
100+
key: 'Tab',
101+
bubbles: true,
102+
cancelable: true,
103+
})
104+
act(() => {
105+
input?.focus()
106+
input?.dispatchEvent(firstTabEvent)
107+
})
108+
expect(selectedResult()).toBe('Second')
109+
expect(firstTabEvent.defaultPrevented).toBe(true)
110+
expect(document.activeElement).toBe(input)
111+
112+
act(() => {
113+
input?.dispatchEvent(
114+
new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true })
115+
)
116+
})
117+
expect(selectedResult()).toBe('First')
118+
119+
act(() => {
120+
input?.dispatchEvent(
121+
new KeyboardEvent('keydown', {
122+
key: 'Tab',
123+
shiftKey: true,
124+
bubbles: true,
125+
cancelable: true,
126+
})
127+
)
128+
})
129+
expect(selectedResult()).toBe('Second')
130+
})
131+
})

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
'use client'
2+
3+
import { type ComponentPropsWithoutRef, forwardRef, type KeyboardEvent } from 'react'
4+
import { cn } from '@sim/emcn'
5+
import { Command } from 'cmdk'
6+
import { Search } from 'lucide-react'
7+
8+
type CommandInputProps = ComponentPropsWithoutRef<typeof Command.Input>
9+
type CommandListProps = ComponentPropsWithoutRef<typeof Command.List>
10+
11+
interface CommandSearchProps extends Omit<CommandInputProps, 'className'> {
12+
surface: 'canvas' | 'palette'
13+
cycleResultsOnTab?: boolean
14+
}
15+
16+
interface CommandFadedListProps extends CommandListProps {
17+
fade: 'canvas' | 'palette'
18+
}
19+
20+
const SEARCH_SURFACE_CLASSNAME = {
21+
canvas:
22+
'bg-[linear-gradient(to_bottom,var(--surface-2)_0%,color-mix(in_srgb,var(--surface-2)_88%,transparent)_68%,transparent_100%)]',
23+
palette:
24+
'bg-[linear-gradient(to_bottom,var(--surface-2)_0%,color-mix(in_srgb,var(--surface-2)_88%,transparent)_68%,transparent_100%)]',
25+
} as const
26+
27+
const LIST_FADE_CLASSNAME = {
28+
canvas:
29+
'[-webkit-mask-image:linear-gradient(to_bottom,transparent_0%,transparent_8%,black_18%,black_94%,transparent_100%)] [mask-image:linear-gradient(to_bottom,transparent_0%,transparent_8%,black_18%,black_94%,transparent_100%)]',
30+
palette:
31+
'[&::-webkit-scrollbar-track]:mt-12 [&::-webkit-scrollbar-track]:mb-1.5 [-webkit-mask-composite:source-over] [-webkit-mask-image:linear-gradient(to_bottom,transparent_0%,transparent_8%,black_18%,black_94%,transparent_100%),linear-gradient(black,black)] [-webkit-mask-position:left_top,right_top] [-webkit-mask-repeat:no-repeat,no-repeat] [-webkit-mask-size:calc(100%_-_8px)_100%,8px_100%] [mask-composite:add] [mask-image:linear-gradient(to_bottom,transparent_0%,transparent_8%,black_18%,black_94%,transparent_100%),linear-gradient(black,black)] [mask-position:left_top,right_top] [mask-repeat:no-repeat,no-repeat] [mask-size:calc(100%_-_8px)_100%,8px_100%]',
32+
} as const
33+
34+
/** Borderless search field layered over a fading command-result list. */
35+
export const CommandSearch = forwardRef<HTMLInputElement, CommandSearchProps>(
36+
function CommandSearch({ surface, cycleResultsOnTab = false, onKeyDown, ...props }, ref) {
37+
const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
38+
onKeyDown?.(event)
39+
if (!cycleResultsOnTab || event.defaultPrevented || event.key !== 'Tab') return
40+
41+
event.preventDefault()
42+
event.currentTarget.dispatchEvent(
43+
new window.KeyboardEvent('keydown', {
44+
key: event.shiftKey ? 'ArrowUp' : 'ArrowDown',
45+
bubbles: true,
46+
cancelable: true,
47+
})
48+
)
49+
}
50+
51+
return (
52+
<div
53+
className={cn(
54+
'nodrag nopan absolute inset-x-[3px] top-[3px] z-20 flex h-12 cursor-text items-center gap-2 rounded-t-[13px] px-2.5 pb-2',
55+
SEARCH_SURFACE_CLASSNAME[surface]
56+
)}
57+
>
58+
<Search className='size-[14px] flex-shrink-0 text-[var(--text-muted)]' />
59+
<Command.Input
60+
ref={ref}
61+
className='h-8 min-w-0 flex-1 cursor-text bg-transparent text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)] focus:outline-none'
62+
onKeyDown={handleKeyDown}
63+
{...props}
64+
/>
65+
</div>
66+
)
67+
}
68+
)
69+
70+
CommandSearch.displayName = 'CommandSearch'
71+
72+
/** Scrollable command list with soft edge fades tuned for each command surface. */
73+
export const CommandFadedList = forwardRef<HTMLDivElement, CommandFadedListProps>(
74+
function CommandFadedList({ className, fade, ...props }, ref) {
75+
return (
76+
<Command.List
77+
ref={ref}
78+
className={cn(
79+
'overflow-y-auto overflow-x-hidden px-1.5 pt-12 pb-1.5 [&_[cmdk-group-items]]:flex [&_[cmdk-group-items]]:flex-col',
80+
LIST_FADE_CLASSNAME[fade],
81+
className
82+
)}
83+
{...props}
84+
/>
85+
)
86+
}
87+
)
88+
89+
CommandFadedList.displayName = 'CommandFadedList'

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { CommandFadedList, CommandSearch } from './command-chrome'

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

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -51,34 +51,29 @@ describe('MemoizedActionItem', () => {
5151
}
5252
})
5353

54-
it('toggles its pin without selecting the enclosing command row', () => {
55-
const onSelect = vi.fn()
56-
const onTogglePin = vi.fn()
57-
54+
it('centers the command glyph in a fixed three-slot shortcut hint', () => {
5855
act(() => {
5956
root.render(
6057
<Command>
6158
<Command.List>
6259
<MemoizedActionItem
63-
value='open-settings'
64-
onSelect={onSelect}
60+
value='run-workflow'
61+
onSelect={vi.fn()}
6562
icon={TestIcon}
66-
name='Open settings'
67-
onTogglePin={onTogglePin}
63+
name='Run workflow'
64+
shortcut='⌘↵'
6865
/>
6966
</Command.List>
7067
</Command>
7168
)
7269
})
7370

74-
const pinButton = container.querySelector<HTMLButtonElement>(
75-
'button[aria-label="Add to favorites"]'
76-
)
77-
expect(pinButton).not.toBeNull()
78-
79-
act(() => pinButton?.click())
80-
81-
expect(onTogglePin).toHaveBeenCalledTimes(1)
82-
expect(onSelect).not.toHaveBeenCalled()
71+
const shortcut = container.querySelector('[aria-label="Keyboard shortcut ⌘↵"]')
72+
expect(Array.from(shortcut?.children ?? []).map((slot) => slot.textContent)).toEqual([
73+
'',
74+
'⌘',
75+
'↵',
76+
])
77+
expect(container.querySelector('button[aria-label*="favorites"]')).toBeNull()
8378
})
8479
})

0 commit comments

Comments
 (0)