From 1157694c032ae4987122a60a9941398a6eda4598 Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Mon, 17 Jul 2023 00:36:58 +0200
Subject: [PATCH] implement keyboar shortcut search #1646

---
 src/components/KeyboardShortcuts.jsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/KeyboardShortcuts.jsx b/src/components/KeyboardShortcuts.jsx
index 82dd150a..465434d6 100644
--- a/src/components/KeyboardShortcuts.jsx
+++ b/src/components/KeyboardShortcuts.jsx
@@ -1,6 +1,6 @@
 import React, { memo, Fragment, useEffect, useMemo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PlusIcon, InlineAlert, UndoIcon, Paragraph, TakeActionIcon, IconButton, Button, DeleteIcon, AddIcon, Heading, Text, Dialog } from 'evergreen-ui';
+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';
 import Mousetrap from 'mousetrap';
 import groupBy from 'lodash/groupBy';
@@ -511,8 +511,11 @@ const KeyboardShortcuts = memo(({
   }, [actionsMap, keyBindings, setKeyBindings]);
 
   const [creatingBinding, setCreatingBinding] = useState();
+  const [searchQuery, setSearchQuery] = useState('');
 
-  const categoriesWithActions = useMemo(() => Object.entries(groupBy(Object.entries(actionsMap), ([, { category }]) => category)), [actionsMap]);
+  const actionEntries = useMemo(() => Object.entries(actionsMap).filter(([, { name }]) => !searchQuery || name.toLowerCase().includes(searchQuery.toLowerCase())), [actionsMap, searchQuery]);
+
+  const categoriesWithActions = useMemo(() => Object.entries(groupBy(actionEntries, ([, { category }]) => category)), [actionEntries]);
 
   const onDeleteBindingClick = useCallback(({ action, keys }) => {
     // eslint-disable-next-line no-alert
@@ -558,6 +561,10 @@ const KeyboardShortcuts = memo(({
   return (
     <>
       <div style={{ color: 'black' }}>
+        <div>
+          <SearchInput value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder="Search" width="100%" />
+        </div>
+
         {categoriesWithActions.map(([category, actionsInCategory]) => (
           <div key={category}>
             {category !== 'undefined' && <Heading marginTop={30} marginBottom={14}>{category}</Heading>}