From efa569904280cfa126e4e7208825e030d70bb09c Mon Sep 17 00:00:00 2001
From: Ron Park <ronpark.dev@gmail.com>
Date: Tue, 9 Jul 2024 12:08:59 +0900
Subject: [PATCH] feat: Let them start by setting up shortcuts in the settings
 layer

---
 src/components/TargetEditLayer/index.tsx | 48 +++++++++++++-----------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/components/TargetEditLayer/index.tsx b/src/components/TargetEditLayer/index.tsx
index ab9682a..fda7a8b 100644
--- a/src/components/TargetEditLayer/index.tsx
+++ b/src/components/TargetEditLayer/index.tsx
@@ -34,6 +34,10 @@ export const TargetEditLayer: FC<Props> = ({ onChangeHighlight, onClose, default
 
   const [isHotKeyListening, setHotKeyListening] = useState(false)
 
+  useEffect(() => {
+    keyRef.current?.focus()
+  }, [])
+
   useEffect(() => {
     onChangeHighlight(selector)
   }, [selector])
@@ -80,6 +84,28 @@ export const TargetEditLayer: FC<Props> = ({ onChangeHighlight, onClose, default
       )}
       centered>
       <Form layout="vertical">
+        <Form.Item
+          label={
+            <Flex vertical>
+              <Text strong style={{ fontSize: '16px' }}>
+                Shortcut Key
+              </Text>
+              <Paragraph>Press the keys you want to set as a shortcut for this item.</Paragraph>
+            </Flex>
+          }
+          style={{ marginBottom: 12 }}>
+          <Button
+            ref={keyRef}
+            onFocus={() => setHotKeyListening(true)}
+            onBlur={() => setHotKeyListening(false)}
+            type={isHotKeyListening ? 'primary' : undefined}>
+            {hotKey
+              ? HotKeyService.getText(hotKey)
+              : isHotKeyListening
+                ? 'Press keys to record shortcut'
+                : 'Click here to record shortcut'}
+          </Button>
+        </Form.Item>
         <Form.Item
           label={
             <Flex vertical>
@@ -123,28 +149,6 @@ export const TargetEditLayer: FC<Props> = ({ onChangeHighlight, onClose, default
             tooltip={{ open: false }}
           />
         </Form.Item>
-        <Form.Item
-          label={
-            <Flex vertical>
-              <Text strong style={{ fontSize: '16px' }}>
-                Shortcut Key
-              </Text>
-              <Paragraph>Press the keys you want to set as a shortcut for this item.</Paragraph>
-            </Flex>
-          }
-          style={{ marginBottom: 12 }}>
-          <Button
-            ref={keyRef}
-            onFocus={() => setHotKeyListening(true)}
-            onBlur={() => setHotKeyListening(false)}
-            type={isHotKeyListening ? 'primary' : undefined}>
-            {hotKey
-              ? HotKeyService.getText(hotKey)
-              : isHotKeyListening
-                ? 'Press keys to record shortcut'
-                : 'Click here to record shortcut'}
-          </Button>
-        </Form.Item>
       </Form>
     </Modal>
   )