From a57af75a4eed0411faa417c20c02d2ffdd85a397 Mon Sep 17 00:00:00 2001
From: Nicolet <jmlee337@gmail.com>
Date: Tue, 16 Jul 2024 10:33:12 +0900
Subject: [PATCH] ctrl-f search

fixes #55
---
 package-lock.json            | 27 ++++++++++++++++--------
 package.json                 |  1 +
 src/main/preload.ts          |  1 +
 src/renderer/StartggView.tsx | 40 +++++++++++++++++++++++++++++++++---
 4 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5458c9d..ed6420d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "replay-manager-for-slippi",
       "version": "0.8.1",
       "hasInstallScript": true,
       "license": "MIT",
@@ -23,6 +22,7 @@
         "iconv-lite": "^0.6.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-hotkeys": "^2.0.0",
         "react-router-dom": "^6.16.0",
         "sanitize-filename": "^1.6.3",
         "slp-enforcer": "^0.4.1",
@@ -6761,9 +6761,9 @@
       }
     },
     "node_modules/builder-util-runtime": {
-      "version": "9.2.1",
-      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.1.tgz",
-      "integrity": "sha512-2rLv/uQD2x+dJ0J3xtsmI12AlRyk7p45TEbE/6o/fbb633e/S3pPgm+ct+JHsoY7r39dKHnGEFk/AASRFdnXmA==",
+      "version": "9.2.5",
+      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.5.tgz",
+      "integrity": "sha512-HjIDfhvqx/8B3TDN4GbABQcgpewTU4LMRTQPkVpKYV3lsuxEJoIfvg09GyWTNmfVNSUAYf+fbTN//JX4TH20pg==",
       "dependencies": {
         "debug": "^4.3.4",
         "sax": "^1.2.4"
@@ -9179,11 +9179,11 @@
       "dev": true
     },
     "node_modules/electron-updater": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-6.1.4.tgz",
-      "integrity": "sha512-yYAJc6RQjjV4WtInZVn+ZcLyXRhbVXoomKEfUUwDqIk5s2wxzLhWaor7lrNgxODyODhipjg4SVPMhJHi5EnsCA==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-6.3.0.tgz",
+      "integrity": "sha512-3Xlezhk+dKaSQrOnkQNqCGiuGSSUPO9BV9TQZ4Iig6AyTJ4FzJONE5gFFc382sY53Sh9dwJfzKsA3DxRHt2btw==",
       "dependencies": {
-        "builder-util-runtime": "9.2.1",
+        "builder-util-runtime": "9.2.5",
         "fs-extra": "^10.1.0",
         "js-yaml": "^4.1.0",
         "lazy-val": "^1.0.5",
@@ -16250,6 +16250,17 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hotkeys": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-hotkeys/-/react-hotkeys-2.0.0.tgz",
+      "integrity": "sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q==",
+      "dependencies": {
+        "prop-types": "^15.6.1"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index c15c6a1..1e68388 100644
--- a/package.json
+++ b/package.json
@@ -100,6 +100,7 @@
     "iconv-lite": "^0.6.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hotkeys": "^2.0.0",
     "react-router-dom": "^6.16.0",
     "sanitize-filename": "^1.6.3",
     "slp-enforcer": "^0.4.1",
diff --git a/src/main/preload.ts b/src/main/preload.ts
index 22ea545..04a5e64 100644
--- a/src/main/preload.ts
+++ b/src/main/preload.ts
@@ -131,6 +131,7 @@ const electronHandler = {
     ipcRenderer.removeAllListeners('usbstorage');
     ipcRenderer.on('usbstorage', callback);
   },
+  isMac: process.platform === 'darwin',
 };
 
 contextBridge.exposeInMainWorld('electron', electronHandler);
diff --git a/src/renderer/StartggView.tsx b/src/renderer/StartggView.tsx
index f647b50..619b1a5 100644
--- a/src/renderer/StartggView.tsx
+++ b/src/renderer/StartggView.tsx
@@ -17,7 +17,8 @@ import {
   KeyboardArrowUp,
   Refresh,
 } from '@mui/icons-material';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
+import { GlobalHotKeys } from 'react-hotkeys';
 import {
   Event,
   NameWithHighlight,
@@ -542,24 +543,42 @@ export default function StartggView({
     eventSlug: string,
   ) => void;
 }) {
+  const searchInputRef = useRef<HTMLInputElement>(null);
   const [searchSubstr, setSearchSubstr] = useState('');
+  const [showSearch, setShowSearch] = useState(false);
+  const clearSearch = () => {
+    setSearchSubstr('');
+    setShowSearch(false);
+  };
+
   return (
     <Box>
-      {vlerkMode && (
+      {(showSearch || vlerkMode) && (
         <Box style={{ padding: '8px 0' }}>
           <TextField
+            autoFocus
             fullWidth
             label="Search"
             onChange={(event) => {
               setSearchSubstr(event.target.value);
             }}
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') {
+                clearSearch();
+              }
+            }}
+            inputRef={searchInputRef}
             size="small"
             value={searchSubstr}
             InputProps={{
               endAdornment: (
                 <InputAdornment position="end">
                   <Tooltip title="Clear search">
-                    <IconButton onClick={() => setSearchSubstr('')}>
+                    <IconButton
+                      onClick={() => {
+                        clearSearch();
+                      }}
+                    >
                       <Clear />
                     </IconButton>
                   </Tooltip>
@@ -582,6 +601,21 @@ export default function StartggView({
           selectSet={selectSet}
         />
       ))}
+      <GlobalHotKeys
+        keyMap={{
+          ESC: 'escape',
+          FIND: window.electron.isMac ? 'command+f' : 'ctrl+f',
+        }}
+        handlers={{
+          ESC: () => {
+            clearSearch();
+          },
+          FIND: () => {
+            setShowSearch(true);
+            searchInputRef.current?.focus();
+          },
+        }}
+      />
     </Box>
   );
 }