ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show "No results found" for empty search results in command palette (#5143)

Browse Source
This commit is contained in:
Frank Noirot
2025-01-23 18:49:50 -05:00
committed by GitHub
parent 41b97de3d1
commit 2332338ca1
1 changed files with 33 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/CommandComboBox.tsx
View File

@ -75,34 +75,40 @@ function CommandComboBox({
autoFocus autoFocus
/> />
</div> </div>
<Combobox.Options {filteredOptions?.length ? (
static <Combobox.Options
className="overflow-y-auto max-h-96 cursor-pointer" static
> className="overflow-y-auto max-h-96 cursor-pointer"
{filteredOptions?.map((option) => ( >
<Combobox.Option {filteredOptions?.map((option) => (
key={option.groupId + option.name + (option.displayName || '')} <Combobox.Option
value={option} key={option.groupId + option.name + (option.displayName || '')}
className="flex items-center gap-4 px-4 py-1.5 first:mt-2 last:mb-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90 ui-disabled:!text-chalkboard-50" value={option}
disabled={optionIsDisabled(option)} className="flex items-center gap-4 px-4 py-1.5 first:mt-2 last:mb-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90 ui-disabled:!text-chalkboard-50"
data-testid={`cmd-bar-option`} disabled={optionIsDisabled(option)}
> data-testid={`cmd-bar-option`}
{'icon' in option && option.icon && ( >
<CustomIcon name={option.icon} className="w-5 h-5" /> {'icon' in option && option.icon && (
)} <CustomIcon name={option.icon} className="w-5 h-5" />
<div className="flex-grow flex flex-col">
<p className="my-0 leading-tight">
{option.displayName || option.name}{' '}
</p>
{option.description && (
<p className="my-0 text-xs text-chalkboard-60 dark:text-chalkboard-50">
{option.description}
</p>
)} )}
</div> <div className="flex-grow flex flex-col">
</Combobox.Option> <p className="my-0 leading-tight">
))} {option.displayName || option.name}{' '}
</Combobox.Options> </p>
{option.description && (
<p className="my-0 text-xs text-chalkboard-60 dark:text-chalkboard-50">
{option.description}
</p>
)}
</div>
</Combobox.Option>
))}
</Combobox.Options>
) : (
<p className="px-4 pt-2 text-chalkboard-60 dark:text-chalkboard-50">
No results found
</p>
)}
</Combobox> </Combobox>
) )
} }