fix: update ui when shortcut changed

src/views/Action/index.js

@@ -99,7 +99,7 @@ export default function Action({ translator, fab }) {
       contextMenus &&
         menuCommandIds.push(
           GM.registerMenuCommand(
-            "Toggle Translate (Alt+Q)",
+            "Toggle Translate",
             (event) => {
               translator.toggle();
               sendIframeMsg(MSG_TRANS_TOGGLE);
@@ -108,7 +108,7 @@ export default function Action({ translator, fab }) {
             "Q"
           ),
           GM.registerMenuCommand(
-            "Toggle Style (Alt+C)",
+            "Toggle Style",
             (event) => {
               translator.toggleStyle();
               sendIframeMsg(MSG_TRANS_TOGGLE_STYLE);
@@ -117,7 +117,7 @@ export default function Action({ translator, fab }) {
             "C"
           ),
           GM.registerMenuCommand(
-            "Open Menu (Alt+K)",
+            "Open Menu",
             (event) => {
               setShowPopup((pre) => !pre);
             },

src/views/Popup/index.js

@@ -18,6 +18,7 @@ import {
   MSG_TRANS_PUTRULE,
   MSG_OPEN_OPTIONS,
   MSG_SAVE_RULE,
+  MSG_COMMAND_SHORTCUTS,
   OPT_TRANS_ALL,
   OPT_LANGS_FROM,
   OPT_LANGS_TO,
@@ -30,6 +31,7 @@ import { tryClearCaches } from "../../libs";
 export default function Popup({ setShowPopup, translator: tran }) {
   const i18n = useI18n();
   const [rule, setRule] = useState(tran?.rule);
+  const [commands, setCommands] = useState({});
 
   const handleOpenSetting = () => {
     if (!tran) {
@@ -111,6 +113,32 @@ export default function Popup({ setShowPopup, translator: tran }) {
     })();
   }, [tran]);
 
+  useEffect(() => {
+    (async () => {
+      try {
+        const commands = {};
+        if (isExt) {
+          const res = await sendBgMsg(MSG_COMMAND_SHORTCUTS);
+          if (!res.error) {
+            res.data.forEach(({ name, shortcut }) => {
+              commands[name] = shortcut;
+            });
+          }
+        } else {
+          const shortcuts = tran.setting.shortcuts;
+          if (shortcuts) {
+            Object.entries(shortcuts).forEach(([key, val]) => {
+              commands[key] = val.join("+");
+            });
+          }
+        }
+        setCommands(commands);
+      } catch (err) {
+        console.log("[query cmds]", err);
+      }
+    })();
+  }, [tran]);
+
   if (!rule) {
     return (
       <Box minWidth={300}>
@@ -153,7 +181,11 @@ export default function Popup({ setShowPopup, translator: tran }) {
                 onChange={handleTransToggle}
               />
             }
-            label={i18n("translate_alt")}
+            label={
+              commands["toggleTranslate"]
+                ? `${i18n("translate_alt")}(${commands["toggleTranslate"]})`
+                : i18n("translate_alt")
+            }
           />
         </Stack>
 
@@ -211,7 +243,11 @@ export default function Popup({ setShowPopup, translator: tran }) {
           size="small"
           value={textStyle}
           name="textStyle"
-          label={i18n("text_style_alt")}
+          label={
+            commands["toggleStyle"]
+              ? `${i18n("text_style_alt")}(${commands["toggleStyle"]})`
+              : i18n("text_style_alt")
+          }
           onChange={handleChange}
         >
           {OPT_STYLE_ALL.map((item) => (

src/views/Selection/index.js

@@ -109,7 +109,7 @@ export default function Slection({ contextMenus, tranboxSetting, transApis }) {
       contextMenus &&
         menuCommandIds.push(
           GM.registerMenuCommand(
-            "Translate Selected Text (Alt+S)",
+            "Translate Selected Text",
             (event) => {
               handleTranbox();
             },