feat: Let them start by setting up shortcuts in the settings layer

ronparkdev · Jul 9, 2024 · efa5699 · efa5699
1 parent c50752d
commit efa5699
Showing 1 changed file with 26 additions and 22 deletions.
diff --git 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>
   )