feat: hotkey viewer

src/components/setting/setting-verge.tsx

@@ -17,8 +17,10 @@ import {
 import { ArrowForward } from "@mui/icons-material";
 import { SettingList, SettingItem } from "./setting";
 import { version } from "@root/package.json";
+import useModalHandler from "@/hooks/use-modal-handler";
 import ThemeModeSwitch from "./mods/theme-mode-switch";
 import ConfigViewer from "./mods/config-viewer";
+import HotkeyViewer from "./mods/hotkey-viewer";
 import GuardState from "./mods/guard-state";
 import SettingTheme from "./setting-theme";
 
@@ -43,8 +45,12 @@ const SettingVerge = ({ onError }: Props) => {
     mutateVerge({ ...vergeConfig, ...patch }, false);
   };
 
+  const hotkeyHandler = useModalHandler();
+
   return (
     <SettingList title={t("Verge Setting")}>
+      <HotkeyViewer handler={hotkeyHandler} />
+
       <SettingItem label={t("Language")}>
         <GuardState
           value={language ?? "en"}
@@ -108,6 +114,17 @@ const SettingVerge = ({ onError }: Props) => {
         </IconButton>
       </SettingItem>
 
+      <SettingItem label={t("Hotkey Setting")}>
+        <IconButton
+          color="inherit"
+          size="small"
+          sx={{ my: "2px" }}
+          onClick={() => hotkeyHandler.current.open()}
+        >
+          <ArrowForward />
+        </IconButton>
+      </SettingItem>
+
       <SettingItem label={t("Runtime Config")}>
         <IconButton
           color="inherit"