From 55a915b2f7c86b1735aa6524f1c39069ecc93ccb Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Sun, 17 Mar 2024 23:02:34 +0800
Subject: [PATCH] improve keyboard action search

---
 src/components/KeyboardShortcuts.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/KeyboardShortcuts.tsx b/src/components/KeyboardShortcuts.tsx
index db219b62..2f445129 100644
--- a/src/components/KeyboardShortcuts.tsx
+++ b/src/components/KeyboardShortcuts.tsx
@@ -1,4 +1,4 @@
-import { memo, Fragment, useEffect, useMemo, useCallback, useState, ReactNode, SetStateAction, Dispatch } from 'react';
+import { memo, Fragment, useEffect, useMemo, useCallback, useState, ReactNode, SetStateAction, Dispatch, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SearchInput, PlusIcon, InlineAlert, UndoIcon, Paragraph, TakeActionIcon, IconButton, Button, DeleteIcon, AddIcon, Heading, Text, Dialog } from 'evergreen-ui';
 import { FaMouse, FaPlus, FaStepForward, FaStepBackward } from 'react-icons/fa';
@@ -621,8 +621,21 @@ const KeyboardShortcuts = memo(({
   const [creatingBinding, setCreatingBinding] = useState<KeyboardAction>();
   const [searchQuery, setSearchQuery] = useState('');
 
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    searchInputRef.current?.focus();
+  }, []);
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const actionEntries = useMemo(() => (Object.entries(actionsMap) as any as [keyof typeof actionsMap, typeof actionsMap[keyof typeof actionsMap]][]).filter(([, { name }]) => !searchQuery || name.toLowerCase().includes(searchQuery.toLowerCase())), [actionsMap, searchQuery]);
+  const actionEntries = useMemo(() => (Object.entries(actionsMap) as any as [keyof typeof actionsMap, typeof actionsMap[keyof typeof actionsMap]][]).filter(([, { name, category }]) => {
+    const searchQueryTrimmed = searchQuery.toLowerCase().trim();
+    return (
+      !searchQuery
+      || name.toLowerCase().includes(searchQueryTrimmed)
+      || (category != null && category.toLowerCase().includes(searchQueryTrimmed))
+    );
+  }), [actionsMap, searchQuery]);
 
   const categoriesWithActions = useMemo(() => Object.entries(groupBy(actionEntries, ([, { category }]) => category)), [actionEntries]);
 
@@ -646,7 +659,7 @@ const KeyboardShortcuts = memo(({
     setCreatingBinding(action);
   }, []);
 
-  const stringifyKeys = (keys) => keys.join('+');
+  const stringifyKeys = (keys: string[]) => keys.join('+');
 
   const onNewKeyBindingConfirmed = useCallback((action: KeyboardAction, keys: string[]) => {
     const fixedKeys = fixKeys(keys);
@@ -672,7 +685,7 @@ const KeyboardShortcuts = memo(({
     <>
       <div style={{ color: 'black', marginBottom: '1em' }}>
         <div>
-          <SearchInput value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder="Search" width="100%" />
+          <SearchInput ref={searchInputRef} value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder="Search" width="100%" />
         </div>
 
         {categoriesWithActions.map(([category, actionsInCategory]) => (