feat(sidebar): search the workspace switcher when a user has many workspaces

Shows a search input in the workspace dropdown once the list exceeds
WORKSPACE_SEARCH_THRESHOLD (3). ArrowUp/Down move through results, Enter
switches, and the query resets on close. The highlight/reset/scroll
machinery is gated on showSearch so users with few workspaces get no extra
re-renders. The input reuses the emcn ChipInput chrome (icon prop) rather
than hand-rolling the field.

The highlighted index is clamped against the current results on read, so a
live workspace-list change while the menu is open can't leave keyboard
selection pointing at a stale or out-of-range row. Search and highlight
reset via an effect keyed on the menu-open state, so closing by any path
(selecting a workspace, Escape, click-away) clears them — not only the
Radix-driven close that routes through onOpenChange.

Author: waleedlatif1

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

@@ -5,6 +5,7 @@ import {
   ChevronDown,
   Chip,
   ChipConfirmModal,
+  ChipInput,
   chipGeometryClass,
   chipVariants,
   cn,
@@ -19,7 +20,7 @@ import {
 } from '@sim/emcn'
 import { ManageWorkspace, PanelLeft } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
-import { MoreHorizontal } from 'lucide-react'
+import { MoreHorizontal, Search } from 'lucide-react'
 import { useActiveOrganization } from '@/lib/auth/auth-client'
 import { isBillingEnabled } from '@/lib/core/config/env-flags'
 import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
@@ -35,6 +36,9 @@ import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
 
 const logger = createLogger('WorkspaceHeader')
 
+/** Show the search input once the workspace list exceeds this count. */
+const WORKSPACE_SEARCH_THRESHOLD = 3
+
 /**
  * Derives the single-letter avatar initial for a workspace, ignoring the word
  * "workspace" in the name (e.g. "Acme Workspace" → "A").
@@ -150,6 +154,49 @@ function WorkspaceHeaderImpl({
   const contextMenuClosedRef = useRef(true)
   const hasInputFocusedRef = useRef(false)
   const renameInputRef = useRef<HTMLInputElement | null>(null)
+  const searchInputRef = useRef<HTMLInputElement>(null)
+  const workspaceListRef = useRef<HTMLDivElement>(null)
+
+  const [workspaceSearch, setWorkspaceSearch] = useState('')
+  const [highlightedIndex, setHighlightedIndex] = useState(0)
+
+  const showSearch = workspaces.length > WORKSPACE_SEARCH_THRESHOLD
+  const searchQuery = workspaceSearch.trim().toLowerCase()
+  const filteredWorkspaces =
+    showSearch && searchQuery
+      ? workspaces.filter((w) => w.name.toLowerCase().includes(searchQuery))
+      : workspaces
+
+  /**
+   * The highlighted row reconciled against the current results. The stored
+   * index can go stale if the workspace list mutates while the menu is open
+   * (a live membership change, a background refetch), so clamp it on read —
+   * keyboard selection and the visual highlight always point at a real row.
+   */
+  const activeIndex = highlightedIndex < filteredWorkspaces.length ? highlightedIndex : 0
+
+  useEffect(() => {
+    if (!showSearch || !isWorkspaceMenuOpen) return
+    const el = workspaceListRef.current?.querySelector<HTMLElement>(
+      `[data-workspace-row-idx="${activeIndex}"]`
+    )
+    el?.scrollIntoView({ block: 'nearest' })
+  }, [activeIndex, showSearch, isWorkspaceMenuOpen])
+
+  /**
+   * Clear the query and highlight whenever the menu closes, by any path —
+   * selecting a workspace closes it via `setIsWorkspaceMenuOpen(false)` without
+   * routing through `onOpenChange`, so resetting here (not in the open handler)
+   * keeps a stale search from persisting into the next open. Not gated on
+   * `showSearch`: if the list drops to the threshold while a query is active the
+   * search input unmounts, and this still clears the now-invisible filter. For
+   * users who never search, both setters no-op (same value) so there is no cost.
+   */
+  useEffect(() => {
+    if (isWorkspaceMenuOpen) return
+    setWorkspaceSearch('')
+    setHighlightedIndex(0)
+  }, [isWorkspaceMenuOpen])
 
   const [isMounted, setIsMounted] = useState(false)
   useEffect(() => {
@@ -361,6 +408,9 @@ function WorkspaceHeaderImpl({
               return
             }
             setIsWorkspaceMenuOpen(open)
+            if (open && showSearch) {
+              requestAnimationFrame(() => searchInputRef.current?.focus())
+            }
           }}
         >
           <DropdownMenuTrigger asChild>
@@ -422,14 +472,57 @@ function WorkspaceHeaderImpl({
               </div>
             ) : (
               <>
-                <div className='-mx-1.5 flex max-h-[94px] flex-col gap-0.5 overflow-y-auto px-1.5'>
-                  {workspaces.map((workspace) => {
+                {showSearch && (
+                  <ChipInput
+                    ref={searchInputRef}
+                    icon={Search}
+                    placeholder='Search workspaces...'
+                    value={workspaceSearch}
+                    onChange={(e) => {
+                      setWorkspaceSearch(e.target.value)
+                      setHighlightedIndex(0)
+                    }}
+                    onKeyDown={(e) => {
+                      e.stopPropagation()
+                      if (filteredWorkspaces.length === 0) return
+                      if (e.key === 'ArrowDown') {
+                        e.preventDefault()
+                        setHighlightedIndex((activeIndex + 1) % filteredWorkspaces.length)
+                      } else if (e.key === 'ArrowUp') {
+                        e.preventDefault()
+                        setHighlightedIndex(
+                          (activeIndex - 1 + filteredWorkspaces.length) % filteredWorkspaces.length
+                        )
+                      } else if (e.key === 'Enter') {
+                        e.preventDefault()
+                        const target = filteredWorkspaces[activeIndex]
+                        if (target) onWorkspaceSwitch(target)
+                      }
+                    }}
+                    className='mb-1.5'
+                  />
+                )}
+                <div
+                  ref={workspaceListRef}
+                  className='-mx-1.5 flex max-h-[94px] flex-col gap-0.5 overflow-y-auto px-1.5'
+                >
+                  {filteredWorkspaces.length === 0 && workspaceSearch && (
+                    <div className='px-2 py-[5px] text-[var(--text-muted)] text-caption'>
+                      No results for "{workspaceSearch}"
+                    </div>
+                  )}
+                  {filteredWorkspaces.map((workspace, idx) => {
                     const initial = getWorkspaceInitial(workspace.name)
                     const isActive = workspace.id === workspaceId
                     const isMenuOpen = menuOpenWorkspaceId === workspace.id
+                    const isKeyboardHighlighted = showSearch && idx === activeIndex
 
                     return (
-                      <div key={workspace.id}>
+                      <div
+                        key={workspace.id}
+                        data-workspace-row-idx={showSearch ? idx : undefined}
+                        onMouseEnter={showSearch ? () => setHighlightedIndex(idx) : undefined}
+                      >
                         {editingWorkspaceId === workspace.id ? (
                           <div
                             className={chipVariants({ active: true, fullWidth: true, flush: true })}
@@ -506,7 +599,7 @@ function WorkspaceHeaderImpl({
                           <div
                             className={cn(
                               chipVariants({
-                                active: isActive || isMenuOpen,
+                                active: isActive || isMenuOpen || isKeyboardHighlighted,
                                 fullWidth: true,
                                 flush: true,
                               }),