simstudioai · waleedlatif1 · Mar 29, 2026 · Mar 29, 2026 · Mar 29, 2026 · Mar 29, 2026
diff --git a/...workspaceId]/components/resource/components/resource-options-bar/resource-options-bar.tsx b/...workspaceId]/components/resource/components/resource-options-bar/resource-options-bar.tsx
@@ -1,4 +1,4 @@
-import { memo, type ReactNode, useCallback, useRef, useState } from 'react'
+import { memo, type ReactNode } from 'react'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import {
   ArrowDown,
@@ -19,8 +19,6 @@ import { cn } from '@/lib/core/utils/cn'
 const SEARCH_ICON = (
   <Search className='pointer-events-none h-[14px] w-[14px] shrink-0 text-[var(--text-icon)]' />
 )
-const FILTER_ICON = <ListFilter className='mr-1.5 h-[14px] w-[14px] text-[var(--text-icon)]' />
-const SORT_ICON = <ArrowUpDown className='mr-1.5 h-[14px] w-[14px] text-[var(--text-icon)]' />
 
 type SortDirection = 'asc' | 'desc'
 
@@ -67,7 +65,12 @@ export interface SearchConfig {
 interface ResourceOptionsBarProps {
   search?: SearchConfig
   sort?: SortConfig
+  /** Popover content — renders inside a Popover (used by logs, etc.) */
   filter?: ReactNode
+  /** When provided, Filter button acts as a toggle instead of opening a Popover */
+  onFilterToggle?: () => void
+  /** Whether the filter is currently active (highlights the toggle button) */
+  filterActive?: boolean
   filterTags?: FilterTag[]
   extras?: ReactNode
 }
@@ -76,10 +79,13 @@ export const ResourceOptionsBar = memo(function ResourceOptionsBar({
   search,
   sort,
   filter,
+  onFilterToggle,
+  filterActive,
   filterTags,
   extras,
 }: ResourceOptionsBarProps) {
-  const hasContent = search || sort || filter || extras || (filterTags && filterTags.length > 0)
+  const hasContent =
+    search || sort || filter || onFilterToggle || extras || (filterTags && filterTags.length > 0)
   if (!hasContent) return null
 
   return (
@@ -88,38 +94,53 @@ export const ResourceOptionsBar = memo(function ResourceOptionsBar({
         {search && <SearchSection search={search} />}
         <div className='flex items-center gap-1.5'>
           {extras}
-          {filterTags?.map((tag) => (
+          {filterTags?.map((tag, i) => (
             <Button
-              key={tag.label}
+              key={`${tag.label}-${i}`}
               variant='subtle'
-              className='px-2 py-1 text-caption'
+              className='max-w-[200px] px-2 py-1 text-caption'
               onClick={tag.onRemove}
             >
-              {tag.label}
-              <span className='ml-1 text-[var(--text-icon)] text-micro'>✕</span>
+              <span className='truncate'>{tag.label}</span>
+              <span className='ml-1 shrink-0 text-[var(--text-icon)] text-micro'>✕</span>
             </Button>
           ))}
-          {filter && (
+          {onFilterToggle ? (
+            <Button
+              variant='subtle'
+              className={cn(
+                'px-2 py-1 text-caption',
+                filterActive && 'bg-[var(--surface-3)] text-[var(--text-primary)]'
+              )}
+              onClick={onFilterToggle}
+            >
+              <ListFilter
+                className={cn(
+                  'mr-1.5 h-[14px] w-[14px]',
+                  filterActive ? 'text-[var(--text-primary)]' : 'text-[var(--text-icon)]'
+                )}
+              />
+              Filter
+            </Button>
+          ) : filter ? (
             <PopoverPrimitive.Root>
               <PopoverPrimitive.Trigger asChild>
                 <Button variant='subtle' className='px-2 py-1 text-caption'>
-                  {FILTER_ICON}
+                  <ListFilter className='mr-1.5 h-[14px] w-[14px] text-[var(--text-icon)]' />
                   Filter
                 </Button>
               </PopoverPrimitive.Trigger>
               <PopoverPrimitive.Portal>
                 <PopoverPrimitive.Content
                   align='start'
                   sideOffset={6}
-                  className={cn(
-                    'z-50 rounded-lg border border-[var(--border)] bg-[var(--bg)] shadow-sm'
-                  )}
+                  className='z-50 rounded-lg border border-[var(--border)] bg-[var(--bg)] shadow-sm'
                 >
                   {filter}
                 </PopoverPrimitive.Content>
               </PopoverPrimitive.Portal>
             </PopoverPrimitive.Root>
-          )}
+          ) : null}
           {sort && <SortDropdown config={sort} />}
         </div>
       </div>
@@ -128,34 +149,6 @@ export const ResourceOptionsBar = memo(function ResourceOptionsBar({
 })
 
 const SearchSection = memo(function SearchSection({ search }: { search: SearchConfig }) {
-  const [localValue, setLocalValue] = useState(search.value)
-
-  const lastReportedRef = useRef(search.value)
-
-  if (search.value !== lastReportedRef.current) {
-    setLocalValue(search.value)
-    lastReportedRef.current = search.value
-  }
-
-  const handleInputChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const next = e.target.value
-      setLocalValue(next)
-      search.onChange(next)
-    },
-    [search.onChange]
-  )
-
-  const handleClearAll = useCallback(() => {
-    setLocalValue('')
-    lastReportedRef.current = ''
-    if (search.onClearAll) {
-      search.onClearAll()
-    } else {
-      search.onChange('')
-    }
-  }, [search.onClearAll, search.onChange])
-
   return (
     <div className='relative flex flex-1 items-center'>
       {SEARCH_ICON}
@@ -177,20 +170,20 @@ const SearchSection = memo(function SearchSection({ search }: { search: SearchCo
         <input
           ref={search.inputRef}
           type='text'
-          value={localValue}
-          onChange={handleInputChange}
+          value={search.value}
+          onChange={(e) => search.onChange(e.target.value)}
           onKeyDown={search.onKeyDown}
           onFocus={search.onFocus}
           onBlur={search.onBlur}
           placeholder={search.tags?.length ? '' : (search.placeholder ?? 'Search...')}
           className='min-w-[80px] flex-1 bg-transparent py-1 text-[var(--text-secondary)] text-caption outline-none placeholder:text-[var(--text-subtle)]'
         />
       </div>
-      {search.tags?.length || localValue ? (
+      {search.tags?.length || search.value ? (
         <button
           type='button'
           className='mr-0.5 flex h-[14px] w-[14px] shrink-0 items-center justify-center text-[var(--text-subtle)] transition-colors hover-hover:text-[var(--text-secondary)]'
-          onClick={handleClearAll}
+          onClick={search.onClearAll ?? (() => search.onChange(''))}
         >
           <span className='text-caption'>✕</span>
         </button>
@@ -213,8 +206,19 @@ const SortDropdown = memo(function SortDropdown({ config }: { config: SortConfig
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant='subtle' className='px-2 py-1 text-caption'>
-          {SORT_ICON}
+        <Button
+          variant='subtle'
+          className={cn(
+            'px-2 py-1 text-caption',
+            active && 'bg-[var(--surface-3)] text-[var(--text-primary)]'
+          )}
+        >
+          <ArrowUpDown
+            className={cn(
+              'mr-1.5 h-[14px] w-[14px]',
+              active ? 'text-[var(--text-primary)]' : 'text-[var(--text-icon)]'
+            )}
+          />
           Sort
         </Button>
       </DropdownMenuTrigger>

diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
@@ -813,7 +813,7 @@ export function KnowledgeBase({
   }
 
   const filterContent = (
-    <div className='w-[320px]'>
+    <div className='w-[200px]'>
       <div className='border-[var(--border-1)] border-b px-3 py-2'>
         <span className='font-medium text-[var(--text-secondary)] text-caption'>Status</span>
       </div>