From 2cb4a41e643d75caf22c3bc0aeda3eee8655f90f Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Wed, 16 Oct 2024 21:23:04 +0900
Subject: [PATCH] [Update] Config Page: Move section Send Message Button Type
 where others tab to appearance tab.

---
 .../setting_box/appearance/Appearance.jsx     | 21 +++++++++++++++++++
 .../setting_box/others/Others.jsx             | 21 -------------------
 src-ui/logics/configs/index.js                |  2 +-
 src-ui/logics/useReceiveRoutes.js             |  8 +++----
 src-ui/store.js                               |  3 +--
 5 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
index 0bcab768..c838bc81 100644
--- a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
@@ -7,6 +7,7 @@ import {
     useUiLanguage,
     useUiScaling,
     useMessageLogUiScaling,
+    useSendMessageButtonType,
     useSelectedFontFamily,
     useTransparency,
 } from "@logics_configs";
@@ -18,6 +19,7 @@ import {
 import {
     SliderContainer,
     DropdownMenuContainer,
+    RadioButtonContainer,
 } from "../_templates/Templates";
 
 export const Appearance = () => {
@@ -26,6 +28,7 @@ export const Appearance = () => {
             <UiLanguageContainer />
             <UiScalingContainer />
             <MessageLogUiScalingContainer />
+            <SendMessageButtonTypeContainer />
             <FontFamilyContainer />
             <TransparencyContainer />
         </>
@@ -157,6 +160,24 @@ const MessageLogUiScalingContainer = () => {
     );
 };
 
+const SendMessageButtonTypeContainer = () => {
+    const { t } = useTranslation();
+    const { currentSendMessageButtonType, setSendMessageButtonType } = useSendMessageButtonType();
+
+    return (
+        <RadioButtonContainer
+            label={t("config_page.send_message_button_type.label")}
+            selectFunction={setSendMessageButtonType}
+            options={[
+                { radio_button_id: "hide", label: t("config_page.send_message_button_type.hide") },
+                { radio_button_id: "show", label: t("config_page.send_message_button_type.show") },
+                { radio_button_id: "show_and_disable_enter_key", label: t("config_page.send_message_button_type.show_and_disable_enter_key") },
+            ]}
+            checked_variable={currentSendMessageButtonType}
+        />
+    );
+};
+
 const FontFamilyContainer = () => {
     const { t } = useTranslation();
     const { currentSelectedFontFamily, setSelectedFontFamily } = useSelectedFontFamily();
diff --git a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
index 01eb050c..b8de0d9c 100644
--- a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
@@ -2,12 +2,10 @@ import { useTranslation } from "react-i18next";
 
 import {
     useEnableAutoClearMessageInputBox,
-    useSendMessageButtonType,
 } from "@logics_configs";
 
 import {
     CheckboxContainer,
-    RadioButtonContainer,
 } from "../_templates/Templates";
 
 
@@ -15,7 +13,6 @@ export const Others = () => {
     return (
         <>
             <AutoClearMessageInputBoxContainer />
-            <SendMessageButtonTypeContainer />
         </>
     );
 };
@@ -31,22 +28,4 @@ const AutoClearMessageInputBoxContainer = () => {
             toggleFunction={toggleEnableAutoClearMessageInputBox}
         />
     );
-};
-
-const SendMessageButtonTypeContainer = () => {
-    const { t } = useTranslation();
-    const { currentSendMessageButtonType, setSendMessageButtonType } = useSendMessageButtonType();
-
-    return (
-        <RadioButtonContainer
-            label={t("config_page.send_message_button_type.label")}
-            selectFunction={setSendMessageButtonType}
-            options={[
-                { radio_button_id: "hide", label: t("config_page.send_message_button_type.hide") },
-                { radio_button_id: "show", label: t("config_page.send_message_button_type.show") },
-                { radio_button_id: "show_and_disable_enter_key", label: t("config_page.send_message_button_type.show_and_disable_enter_key") },
-            ]}
-            checked_variable={currentSendMessageButtonType}
-        />
-    );
 };
\ No newline at end of file
diff --git a/src-ui/logics/configs/index.js b/src-ui/logics/configs/index.js
index 158f6052..6d30baec 100644
--- a/src-ui/logics/configs/index.js
+++ b/src-ui/logics/configs/index.js
@@ -12,11 +12,11 @@ export { useSpeakerThreshold } from "./device/useSpeakerThreshold";
 export { useMessageLogUiScaling } from "./appearance/useMessageLogUiScaling";
 export { useSelectedFontFamily } from "./appearance/useSelectedFontFamily";
 export { useTransparency } from "./appearance/useTransparency";
+export { useSendMessageButtonType } from "./others/useSendMessageButtonType";
 export { useUiLanguage } from "./appearance/useUiLanguage";
 export { useUiScaling } from "./appearance/useUiScaling";
 
 export { useEnableAutoClearMessageInputBox } from "./others/useEnableAutoClearMessageInputBox";
-export { useSendMessageButtonType } from "./others/useSendMessageButtonType";
 
 export { useMicRecordTimeout } from "./transcription/useMicRecordTimeout";
 export { useMicPhraseTimeout } from "./transcription/useMicPhraseTimeout";
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index 7d69ca19..1bad2043 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -28,11 +28,11 @@ import {
     useMicThreshold,
     useSpeakerThreshold,
     useEnableAutoClearMessageInputBox,
-    useSendMessageButtonType,
     useSelectedFontFamily,
     useUiLanguage,
     useUiScaling,
     useMessageLogUiScaling,
+    useSendMessageButtonType,
     useTransparency,
     useMicRecordTimeout,
     useMicPhraseTimeout,
@@ -237,6 +237,9 @@ export const useReceiveRoutes = () => {
         "/get/data/textbox_ui_scaling": updateMessageLogUiScaling,
         "/set/data/textbox_ui_scaling": updateMessageLogUiScaling,
 
+        "/get/data/send_message_button_type": updateSendMessageButtonType,
+        "/set/data/send_message_button_type": updateSendMessageButtonType,
+
         "/get/data/font_family": updateSelectedFontFamily,
         "/set/data/font_family": updateSelectedFontFamily,
 
@@ -295,9 +298,6 @@ export const useReceiveRoutes = () => {
         "/get/data/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
         "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
         "/set/disable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
-
-        "/get/data/send_message_button_type": updateSendMessageButtonType,
-        "/set/data/send_message_button_type": updateSendMessageButtonType,
     };
 
     const error_routes = {
diff --git a/src-ui/store.js b/src-ui/store.js
index 9cbf6987..c5b8114f 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -171,6 +171,7 @@ export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useS
 export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook("en", "UiLanguage");
 export const { atomInstance: Atom_UiScaling, useHook: useStore_UiScaling } = createAtomWithHook(100, "UiScaling");
 export const { atomInstance: Atom_MessageLogUiScaling, useHook: useStore_MessageLogUiScaling } = createAtomWithHook(100, "MessageLogUiScaling");
+export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAtomWithHook("show", "SendMessageButtonType");
 export const { atomInstance: Atom_SelectedFontFamily, useHook: useStore_SelectedFontFamily } = createAtomWithHook("Yu Gothic UI", "SelectedFontFamily");
 export const { atomInstance: Atom_SelectableFontFamilyList, useHook: useStore_SelectableFontFamilyList } = createAtomWithHook({}, "SelectableFontFamilyList");
 export const { atomInstance: Atom_Transparency, useHook: useStore_Transparency } = createAtomWithHook(100, "Transparency");
@@ -190,8 +191,6 @@ export const { atomInstance: Atom_SpeakerMaxWords, useHook: useStore_SpeakerMaxW
 
 // Others
 export const { atomInstance: Atom_EnableAutoClearMessageInputBox, useHook: useStore_EnableAutoClearMessageInputBox } = createAtomWithHook(true, "EnableAutoClearMessageInputBox");
-export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAtomWithHook("show", "SendMessageButtonType");
-
 
 export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");