chore: hotkeys display delimiter

package.json

@@ -36,7 +36,7 @@
     "foxact": "^0.2.35",
     "i18next": "^23.11.5",
     "lodash-es": "^4.17.21",
-    "meta-json-schema": "1.18.5-alpha4",
+    "meta-json-schema": "1.18.5-alpha6",
     "monaco-editor": "^0.49.0",
     "monaco-yaml": "^5.2.0",
     "nanoid": "^5.0.7",

pnpm-lock.yaml

@@ -62,8 +62,8 @@ importers:
         specifier: ^4.17.21
         version: 4.17.21
       meta-json-schema:
-        specifier: 1.18.5-alpha4
-        version: 1.18.5-alpha4
+        specifier: 1.18.5-alpha6
+        version: 1.18.5-alpha6
       monaco-editor:
         specifier: ^0.49.0
         version: 0.49.0
@@ -3295,10 +3295,10 @@ packages:
         integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==,
       }
 
-  meta-json-schema@1.18.5-alpha4:
+  meta-json-schema@1.18.5-alpha6:
     resolution:
       {
-        integrity: sha512-q+JzaM3tMssFPtfu7nxQmILKbJwq08c+0OfRnrdyYwiBaDd0Nim3LPIkiz9vJiuF4c3o5utLU39Q3z8VoUT0qQ==,
+        integrity: sha512-Qh1NOgM8HMKLdx59NUy+Um+r2xOJptD7ge/0rnwxGS+MuEFeBCmNF1lUjW3e1Iktngd8TCopji8KdmGPCla+cw==,
       }
 
   micromark-core-commonmark@2.0.1:
@@ -6611,7 +6611,7 @@ snapshots:
 
   merge-stream@2.0.0: {}
 
-  meta-json-schema@1.18.5-alpha4: {}
+  meta-json-schema@1.18.5-alpha6: {}
 
   micromark-core-commonmark@2.0.1:
     dependencies:

src/components/setting/mods/hotkey-input.tsx

@@ -2,6 +2,7 @@ import { useRef, useState } from "react";
 import { alpha, Box, IconButton, styled } from "@mui/material";
 import { DeleteRounded } from "@mui/icons-material";
 import { parseHotkey } from "@/utils/parse-hotkey";
+import { useTranslation } from "react-i18next";
 
 const KeyWrapper = styled("div")(({ theme }) => ({
   position: "relative",
@@ -41,9 +42,12 @@ const KeyWrapper = styled("div")(({ theme }) => ({
     border: "1px solid",
     borderColor: alpha(theme.palette.text.secondary, 0.2),
     borderRadius: "2px",
-    padding: "1px 1px",
+    padding: "1px 5px",
     margin: "2px 0",
-    marginRight: 8,
+  },
+  ".delimiter": {
+    lineHeight: "25px",
+    padding: "0 2px",
   },
 }));
 
@@ -54,6 +58,7 @@ interface Props {
 
 export const HotkeyInput = (props: Props) => {
   const { value, onChange } = props;
+  const { t } = useTranslation();
 
   const changeRef = useRef<string[]>([]);
   const [keys, setKeys] = useState(value);
@@ -83,17 +88,22 @@ export const HotkeyInput = (props: Props) => {
         />
 
         <div className="list">
-          {keys.map((key) => (
-            <div key={key} className="item">
-              {key}
-            </div>
+          {keys.map((key, index) => (
+            <Box display="flex">
+              <span className="delimiter" hidden={index === 0}>
+                +
+              </span>
+              <div key={key} className="item">
+                {key}
+              </div>
+            </Box>
           ))}
         </div>
       </KeyWrapper>
 
       <IconButton
         size="small"
-        title="Delete"
+        title={t("Delete")}
         color="inherit"
         onClick={() => {
           onChange([]);