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. All the search 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 highlight tracks the highlighted workspace by identity (a stored id, not a
numeric position), so a live list change while the menu is open — shrink, grow,
or reorder from a membership change or background refetch — keeps the highlight
and Enter on the same workspace; a filtered-out or absent selection falls back
to the first row. `activeIndex` derives from that id and is the single source of
truth for Enter, the visual highlight, and the scroll target.

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. Hover-highlight is wired
to mousemove rather than mouseenter so a keyboard-driven scrollIntoView can't fire
a synthetic enter that hijacks the keyboard selection.

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,57 @@ 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 [highlightedId, setHighlightedId] = useState<string | null>(null)
+
+  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 resolved from the highlighted workspace's identity, not
+   * a stored position. Tracking the id (rather than a numeric index) keeps the
+   * highlight on the same workspace when the list shrinks, grows, or reorders
+   * while the menu is open (a live membership change or background refetch);
+   * a missing id (filtered out) or no selection falls back to the first row.
+   * `activeIndex` is the single source of truth for Enter, the visual highlight,
+   * and the scroll target, so those three can never diverge.
+   */
+  const activeIndex = highlightedId
+    ? Math.max(
+        0,
+        filteredWorkspaces.findIndex((w) => w.id === highlightedId)
+      )
+    : 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('')
+    setHighlightedId(null)
+  }, [isWorkspaceMenuOpen])
 
   const [isMounted, setIsMounted] = useState(false)
   useEffect(() => {
@@ -361,6 +416,9 @@ function WorkspaceHeaderImpl({
               return
             }
             setIsWorkspaceMenuOpen(open)
+            if (open && showSearch) {
+              requestAnimationFrame(() => searchInputRef.current?.focus())
+            }
           }}
         >
           <DropdownMenuTrigger asChild>
@@ -422,14 +480,65 @@ 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)
+                      setHighlightedId(null)
+                    }}
+                    onKeyDown={(e) => {
+                      e.stopPropagation()
+                      if (filteredWorkspaces.length === 0) return
+                      if (e.key === 'ArrowDown') {
+                        e.preventDefault()
+                        const next = (activeIndex + 1) % filteredWorkspaces.length
+                        setHighlightedId(filteredWorkspaces[next].id)
+                      } else if (e.key === 'ArrowUp') {
+                        e.preventDefault()
+                        const next =
+                          (activeIndex - 1 + filteredWorkspaces.length) % filteredWorkspaces.length
+                        setHighlightedId(filteredWorkspaces[next].id)
+                      } 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
+
+                    /**
+                     * Hover-highlight is wired to `onMouseMove`, not `onMouseEnter`: a
+                     * keyboard-driven `scrollIntoView` slides rows under a stationary cursor
+                     * and fires `mouseenter`, which would hijack the keyboard selection.
+                     * `mousemove` only fires on real pointer motion, so hover follows the
+                     * mouse without fighting the arrow keys.
+                     */
                     return (
-                      <div key={workspace.id}>
+                      <div
+                        key={workspace.id}
+                        data-workspace-row-idx={showSearch ? idx : undefined}
+                        onMouseMove={showSearch ? () => setHighlightedId(workspace.id) : undefined}
+                      >
                         {editingWorkspaceId === workspace.id ? (
                           <div
                             className={chipVariants({ active: true, fullWidth: true, flush: true })}
@@ -506,7 +615,7 @@ function WorkspaceHeaderImpl({
                           <div
                             className={cn(
                               chipVariants({
-                                active: isActive || isMenuOpen,
+                                active: isActive || isMenuOpen || isKeyboardHighlighted,
                                 fullWidth: true,
                                 flush: true,
                               }),