[Update] Add hotkeys main functions

src-ui/app/config_page/setting_section/setting_box/_components/hotkeys_entry/HotkeysEntry.jsx

@@ -17,8 +17,6 @@ export const HotkeysEntry = (props) => {
         const init_display_value = props.value[props.hotkey_id] ? props.value[props.hotkey_id].join(" + ") : "";
         setDisplayValue(init_display_value);
     }, []);
-    console.log(props.value[props.hotkey_id]);
-
 
     const updateHotkeys = (keys) => {
         entryRef.current.blur();
@@ -35,9 +33,10 @@ export const HotkeysEntry = (props) => {
         const keys = [];
         const nonModifierKeys = [];
 
-        ["Ctrl", "Shift", "Alt", "Super"].forEach((modKey) => {
+        ["Ctrl", "Shift", "Alt", "Meta"].forEach((modKey) => {
             if (event[`${modKey.toLowerCase()}Key`] && !keys.includes(modKey)) {
-                keys.push(modKey);
+                let register_mod_key =  (modKey === "Meta") ? "Super" : modKey;
+                keys.push(register_mod_key);
             }
         });
 
@@ -80,6 +79,9 @@ export const HotkeysEntry = (props) => {
             );
             if (hasNonModifierKeys) {
                 updateHotkeys(keysRef.current);
+            } else {
+                const display_value = props.value[props.hotkey_id] ? props.value[props.hotkey_id].join(" + ") : "";
+                setDisplayValue(display_value);
             }
         }
     };

src-ui/app/config_page/setting_section/setting_box/hotkeys/Hotkeys.jsx

@@ -1,7 +1,7 @@
 import { useHotkeys } from "@logics_configs";
 import styles from "./Hotkeys.module.scss";
 import { HotkeysEntryContainer } from "../_templates/Templates";
-
+import { useTranslation } from "react-i18next";
 export const Hotkeys = () => {
     return (
         <div className={styles.container}>
@@ -11,13 +11,35 @@ export const Hotkeys = () => {
 };
 
 const HotkeysBoxContainer = () => {
+    const { t } = useTranslation();
     const { currentHotkeys, setHotkeys } = useHotkeys();
+
     return (
         <div className={styles.container}>
             <HotkeysEntryContainer
-                // label={t("config_page.appearance.send_message_button_type.label")}
-                label="Toggle active input box"
-                hotkey_id="toggle_active_vrct"
+                label={t("config_page.hotkeys.toggle_vrct_visibility.label")}
+                hotkey_id="toggle_vrct_visibility"
+                value={currentHotkeys.data}
+                state={currentHotkeys.state}
+                setHotkeys={setHotkeys}
+            />
+            <HotkeysEntryContainer
+                label={t("config_page.hotkeys.toggle_translation.label")}
+                hotkey_id="toggle_translation"
+                value={currentHotkeys.data}
+                state={currentHotkeys.state}
+                setHotkeys={setHotkeys}
+            />
+            <HotkeysEntryContainer
+                label={t("config_page.hotkeys.toggle_transcription_send.label")}
+                hotkey_id="toggle_transcription_send"
+                value={currentHotkeys.data}
+                state={currentHotkeys.state}
+                setHotkeys={setHotkeys}
+            />
+            <HotkeysEntryContainer
+                label={t("config_page.hotkeys.toggle_transcription_receive.label")}
+                hotkey_id="toggle_transcription_receive"
                 value={currentHotkeys.data}
                 state={currentHotkeys.state}
                 setHotkeys={setHotkeys}

src-ui/app/config_page/setting_section/setting_box/hotkeys/Hotkeys.module.scss

@@ -1,5 +1,5 @@
 .container {
     display: flex;
-    gap: 6.4rem;
+    // gap: 6.4rem;
     flex-direction: column;
 }