[Update] Save and register -able.

src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx

@@ -28,10 +28,16 @@ const _Entry = forwardRef((props, ref) => {
             >
                 <input
                     ref={inputRef}
+                    text={props.text ? props.text : "text"}
+                    placeholder={props.placeholder ? props.placeholder : ""}
                     className={input_class_names}
                     value={props.ui_variable === null ? "" : props.ui_variable}
-                    onChange={(e) => props.onChange(e)}
-                    {...props}
+                    onChange={(e) => props.onChange?.(e)}
+                    onFocus={(e) => props.onFocus?.(e)}
+                    onBlur={(e) => props.onBlur?.(e)}
+                    onKeyDown={(e) => props.onKeyDown?.(e)}
+                    onKeyUp={(e) => props.onKeyUp?.(e)}
+                    readOnly={props.readOnly === true ? true : false}
                 />
             </div>
         </div>

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

@@ -1,16 +1,25 @@
 import styles from "./HotkeysEntry.module.scss";
 import { _Entry } from "../_atoms/_entry/_Entry";
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
+import DeleteSvg from "@images/cancel.svg?react";
+import { clsx } from "clsx";
 
 export const HotkeysEntry = (props) => {
     const [isAcceptingInput, setIsAcceptingInput] = useState(false);
-    const [displayValue, setDisplayValue] = useState(props.value[props.hotkey_id]);
+    const [displayValue, setDisplayValue] = useState("");
     const lastKeyRef = useRef(null);
     const isModifierOnlyRef = useRef(false);
     const entryRef = useRef(null);
     const pressedKeys = useRef(new Set());
     const keysRef = useRef([]);
 
+    useEffect(() => {
+        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();
         props.setHotkeys({ [props.hotkey_id]: keys });
@@ -85,23 +94,25 @@ export const HotkeysEntry = (props) => {
         setDisplayValue("");
     };
 
+    const is_pending = props.state === "pending";
     return (
         <div className={styles.container}>
+            {is_pending && <span className={styles.loader}></span>}
             <_Entry
                 ref={entryRef}
                 type="text"
-                placeholder="Press hotkeys keys"
                 onFocus={() => setIsAcceptingInput(true)}
                 onBlur={handleBlur}
                 onKeyDown={handleKeyDown}
                 onKeyUp={handleKeyUp}
-                value={displayValue}
+                ui_variable={displayValue}
                 width="20rem"
                 is_activated={isAcceptingInput}
+                is_disabled={is_pending}
                 readOnly
             />
-            <button className={styles.delete_button} onClick={handleDelete}>
-                Delete
+            <button className={clsx(styles.delete_button, { [styles.is_pending]: is_pending })} onClick={handleDelete}>
+                <DeleteSvg className={styles.delete_svg}/>
             </button>
         </div>
     );

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

@@ -1,13 +1,41 @@
+@import "@scss_mixins";
+
 .container {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 1rem;
+    position: relative;
 }
 
 .delete_button {
-    padding: 0.8rem;
+    padding: 0.4rem;
     font-size: 1.4rem;
-    background-color: var(--dark_800_color);
+    // background-color: var(--dark_800_color);
     flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0.2rem;
+    &:hover {
+        background-color: var(--dark_850_color);
+    }
+    &:active {
+        background-color: var(--dark_900_color);
+    }
+    &.is_pending {
+        pointer-events: none;
+        & .delete_svg {
+            color: var(--dark_600_color);
+        }
+    }
+}
+
+.delete_svg {
+    width: 2.2rem;
+    color: var(--error_bc_color);
+}
+
+.loader {
+    @include loader(2rem, 0.2rem, left, -2.2rem);
 }

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

@@ -19,6 +19,7 @@ const HotkeysBoxContainer = () => {
                 label="Toggle active input box"
                 hotkey_id="toggle_active_vrct"
                 value={currentHotkeys.data}
+                state={currentHotkeys.state}
                 setHotkeys={setHotkeys}
             />
         </div>

src-ui/logics/configs/hotkeys/useHotkeys.js

@@ -1,24 +1,23 @@
 import { useStore_Hotkeys } from "@store";
-// import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useHotkeys = () => {
-    // const { asyncStdoutToPython } = useStdoutToPython();
+    const { asyncStdoutToPython } = useStdoutToPython();
     const { currentHotkeys, updateHotkeys, pendingHotkeys } = useStore_Hotkeys();
 
     const getHotkeys = () => {
-        // pendingHotkeys();
-        // asyncStdoutToPython("/get/data/osc_ip_address");
+        pendingHotkeys();
+        asyncStdoutToPython("/get/data/hotkeys");
     };
 
     const setHotkeys = (hotkeys) => {
-        updateHotkeys(hotkeys);
-        // pendingHotkeys();
-        // asyncStdoutToPython("/set/data/osc_ip_address", osc_ip_address);
+        pendingHotkeys();
+        asyncStdoutToPython("/set/data/hotkeys", hotkeys);
     };
 
     return {
         currentHotkeys,
-        // getHotkeys,
+        getHotkeys,
         updateHotkeys,
         setHotkeys,
     };

src-ui/logics/useReceiveRoutes.js

@@ -68,6 +68,7 @@ import {
     useIsEnabledOverlayLargeLog,
     useOverlayLargeLogSettings,
     useOverlayShowOnlyTranslatedMessages,
+    useHotkeys,
     useOscIpAddress,
     useOscPort,
 } from "@logics_configs";
@@ -168,6 +169,8 @@ export const useReceiveRoutes = () => {
     const { updateIsEnabledOverlayLargeLog } = useIsEnabledOverlayLargeLog();
     const { updateOverlayShowOnlyTranslatedMessages } = useOverlayShowOnlyTranslatedMessages();
 
+    const { updateHotkeys } = useHotkeys();
+
     const { updateOscIpAddress } = useOscIpAddress();
     const { updateOscPort } = useOscPort();
 
@@ -458,6 +461,10 @@ export const useReceiveRoutes = () => {
         "/set/enable/send_received_message_to_vrc": updateEnableSendReceivedMessageToVrc,
         "/set/disable/send_received_message_to_vrc": updateEnableSendReceivedMessageToVrc,
 
+        // Hotkeys
+        "/get/data/hotkeys": updateHotkeys,
+        "/set/data/hotkeys": updateHotkeys,
+
         // Advanced Settings
         "/get/data/osc_ip_address": updateOscIpAddress,
         "/set/data/osc_ip_address": updateOscIpAddress,