fix(cmd-k): z-index + reoder tools, triggers (#1970)

* fix(cmd-k): z-index + reoder tools, triggers

* fix more z-index styling
This commit is contained in:
Vikhyath Mondreti
2025-11-13 13:59:09 -08:00
committed by GitHub
parent 383b6f05a6
commit 3a8f01f3e4
2 changed files with 31 additions and 11 deletions

View File

@@ -331,16 +331,35 @@ export function SearchModal({
return items
}, [workspaces, workflows, pages, blocks, triggers, tools, docs])
// Filter items based on search query
const filteredItems = useMemo(() => {
if (!searchQuery.trim()) return allItems
const sectionOrder = useMemo<SearchItem['type'][]>(
() => ['workspace', 'workflow', 'page', 'tool', 'trigger', 'block', 'doc'],
[]
)
const query = searchQuery.toLowerCase()
return allItems.filter(
(item) =>
item.name.toLowerCase().includes(query) || item.description?.toLowerCase().includes(query)
// Filter items based on search query and enforce section ordering
const filteredItems = useMemo(() => {
const orderMap = sectionOrder.reduce<Record<SearchItem['type'], number>>(
(acc, type, index) => {
acc[type] = index
return acc
},
{} as Record<SearchItem['type'], number>
)
}, [allItems, searchQuery])
const baseItems = !searchQuery.trim()
? allItems
: allItems.filter(
(item) =>
item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
item.description?.toLowerCase().includes(searchQuery.toLowerCase())
)
return [...baseItems].sort((a, b) => {
const aOrder = orderMap[a.type] ?? Number.MAX_SAFE_INTEGER
const bOrder = orderMap[b.type] ?? Number.MAX_SAFE_INTEGER
return aOrder - bOrder
})
}, [allItems, searchQuery, sectionOrder])
// Reset selected index when filtered items change
useEffect(() => {
@@ -469,7 +488,7 @@ export function SearchModal({
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogPortal>
<DialogOverlay
className='bg-white/80 dark:bg-[#1b1b1b]/90'
className='z-40 bg-white/80 dark:bg-[#1b1b1b]/90'
style={{ backdropFilter: 'blur(4px)' }}
/>
<DialogPrimitive.Content className='fixed top-[15%] left-[50%] z-50 flex w-[500px] translate-x-[-50%] flex-col gap-[12px] p-0 focus:outline-none focus-visible:outline-none'>
@@ -493,7 +512,8 @@ export function SearchModal({
{/* Floating results container */}
{filteredItems.length > 0 ? (
<div className='scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent max-h-[400px] overflow-y-auto rounded-[10px] py-[10px] shadow-sm'>
{Object.entries(groupedItems).map(([type, items]) => {
{sectionOrder.map((type) => {
const items = groupedItems[type] || []
if (items.length === 0) return null
return (

View File

@@ -670,7 +670,7 @@ export function Subscription({ onOpenChange }: SubscriptionProps) {
<SelectTrigger className='h-8 w-[200px] justify-between text-left text-xs'>
<SelectValue placeholder='Select admin' />
</SelectTrigger>
<SelectContent align='start'>
<SelectContent align='start' className='z-50'>
<SelectGroup>
<SelectLabel className='px-3 py-1 text-[11px] text-muted-foreground uppercase'>
Workspace admins