feat: add filtering support for @ command selector in goto-anything (#23763)

web/app/components/goto-anything/command-selector.tsx

@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { useEffect } from 'react'
 import { Command } from 'cmdk'
 import { useTranslation } from 'react-i18next'
 import type { ActionItem } from './actions/types'
@@ -6,18 +7,54 @@ import type { ActionItem } from './actions/types'
 type Props = {
   actions: Record<string, ActionItem>
   onCommandSelect: (commandKey: string) => void
+  searchFilter?: string
+  commandValue?: string
+  onCommandValueChange?: (value: string) => void
 }
 
-const CommandSelector: FC<Props> = ({ actions, onCommandSelect }) => {
+const CommandSelector: FC<Props> = ({ actions, onCommandSelect, searchFilter, commandValue, onCommandValueChange }) => {
   const { t } = useTranslation()
 
+  const filteredActions = Object.values(actions).filter((action) => {
+    if (!searchFilter)
+      return true
+    const filterLower = searchFilter.toLowerCase()
+    return action.shortcut.toLowerCase().includes(filterLower)
+      || action.key.toLowerCase().includes(filterLower)
+  })
+
+  useEffect(() => {
+    if (filteredActions.length > 0 && onCommandValueChange) {
+      const currentValueExists = filteredActions.some(action => action.shortcut === commandValue)
+      if (!currentValueExists)
+        onCommandValueChange(filteredActions[0].shortcut)
+    }
+  }, [searchFilter, filteredActions.length])
+
+  if (filteredActions.length === 0) {
+    return (
+      <div className="p-4">
+        <div className="flex items-center justify-center py-8 text-center text-text-tertiary">
+          <div>
+            <div className="text-sm font-medium text-text-tertiary">
+              {t('app.gotoAnything.noMatchingCommands')}
+            </div>
+            <div className="mt-1 text-xs text-text-quaternary">
+              {t('app.gotoAnything.tryDifferentSearch')}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="p-4">
       <div className="mb-3 text-left text-sm font-medium text-text-secondary">
         {t('app.gotoAnything.selectSearchType')}
       </div>
       <Command.Group className="space-y-1">
-        {Object.values(actions).map(action => (
+        {filteredActions.map(action => (
           <Command.Item
             key={action.key}
             value={action.shortcut}

web/app/components/goto-anything/index.tsx

@@ -82,7 +82,7 @@ const GotoAnything: FC<Props> = ({
     wait: 300,
   })
 
-  const isCommandsMode = searchQuery.trim() === '@'
+  const isCommandsMode = searchQuery.trim() === '@' || (searchQuery.trim().startsWith('@') && !matchAction(searchQuery.trim(), Actions))
 
   const searchMode = useMemo(() => {
     if (isCommandsMode) return 'commands'
@@ -253,8 +253,9 @@ const GotoAnything: FC<Props> = ({
                   value={searchQuery}
                   placeholder={t('app.gotoAnything.searchPlaceholder')}
                   onChange={(e) => {
-                    setCmdVal('')
                     setSearchQuery(e.target.value)
+                    if (!e.target.value.startsWith('@'))
+                      setCmdVal('')
                   }}
                   className='flex-1 !border-0 !bg-transparent !shadow-none'
                   wrapperClassName='flex-1 !border-0 !bg-transparent'
@@ -301,6 +302,9 @@ const GotoAnything: FC<Props> = ({
                     <CommandSelector
                       actions={Actions}
                       onCommandSelect={handleCommandSelect}
+                      searchFilter={searchQuery.trim().substring(1)}
+                      commandValue={cmdVal}
+                      onCommandValueChange={setCmdVal}
                     />
                   ) : (
                     Object.entries(groupedResults).map(([type, results], groupIndex) => (