improvement(search): improved filters UI and search suggestions

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/logs/components/filters/filters.tsx

@@ -58,20 +58,20 @@ export function Filters() {
 
       <h2 className='mb-4 pl-2 font-medium text-sm'>Filters</h2>
 
-      {/* Timeline Filter */}
-      <FilterSection title='Timeline' content={<Timeline />} />
-
       {/* Level Filter */}
       <FilterSection title='Level' content={<Level />} />
 
-      {/* Trigger Filter */}
-      <FilterSection title='Trigger' content={<Trigger />} />
+      {/* Workflow Filter */}
+      <FilterSection title='Workflow' content={<Workflow />} />
 
       {/* Folder Filter */}
       <FilterSection title='Folder' content={<FolderFilter />} />
 
-      {/* Workflow Filter */}
-      <FilterSection title='Workflow' content={<Workflow />} />
+      {/* Trigger Filter */}
+      <FilterSection title='Trigger' content={<Trigger />} />
+
+      {/* Timeline Filter */}
+      <FilterSection title='Timeline' content={<Timeline />} />
     </div>
   )
 }

apps/sim/app/workspace/[workspaceId]/logs/components/search/search.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Loader2, Search, X } from 'lucide-react'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
@@ -89,6 +89,16 @@ export function AutocompleteSearch({
     }
   }, [state.isOpen, state.highlightedIndex])
 
+  const [showSpinner, setShowSpinner] = useState(false)
+  useEffect(() => {
+    if (!state.pendingQuery) {
+      setShowSpinner(false)
+      return
+    }
+    const t = setTimeout(() => setShowSpinner(true), 200)
+    return () => clearTimeout(t)
+  }, [state.pendingQuery])
+
   const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value
     const cursorPos = e.target.selectionStart || 0
@@ -126,7 +136,7 @@ export function AutocompleteSearch({
           state.isOpen && 'ring-1 ring-ring'
         )}
       >
-        {state.pendingQuery ? (
+        {showSpinner ? (
           <Loader2 className='h-4 w-4 flex-shrink-0 animate-spin text-muted-foreground' />
         ) : (
           <Search className='h-4 w-4 flex-shrink-0 text-muted-foreground' strokeWidth={2} />

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/logs-filters/logs-filters.tsx

@@ -10,11 +10,11 @@ import Workflow from '@/app/workspace/[workspaceId]/logs/components/filters/comp
 
 export function LogsFilters() {
   const sections = [
-    { key: 'timeline', title: 'Timeline', component: <Timeline /> },
     { key: 'level', title: 'Level', component: <Level /> },
-    { key: 'trigger', title: 'Trigger', component: <Trigger /> },
-    { key: 'folder', title: 'Folder', component: <FolderFilter /> },
     { key: 'workflow', title: 'Workflow', component: <Workflow /> },
+    { key: 'folder', title: 'Folder', component: <FolderFilter /> },
+    { key: 'trigger', title: 'Trigger', component: <Trigger /> },
+    { key: 'timeline', title: 'Timeline', component: <Timeline /> },
   ]
 
   return (

apps/sim/components/ui/command.tsx

@@ -149,7 +149,7 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+    className={cn('max-h-[260px] overflow-y-auto overflow-x-hidden', className)}
     {...props}
   />
 ))

apps/sim/components/ui/dropdown-menu.tsx

@@ -56,11 +56,13 @@ DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayNam
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+>(({ className, sideOffset = 4, avoidCollisions = false, sticky = 'always', ...props }, ref) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
+      avoidCollisions={avoidCollisions}
+      sticky={sticky as any}
       className={cn(
         'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in',
         className

apps/sim/lib/logs/search-suggestions.ts

@@ -407,7 +407,7 @@ export class SearchSuggestions {
   }
 
   /**
-   * Generate preview text for a suggestion - SIMPLE APPROACH
+   * Generate preview text for a suggestion
    * Show suggestion at the end of input, with proper spacing logic
    */
   generatePreview(suggestion: Suggestion, currentValue: string, cursorPosition: number): string {