Merge branch 'ui' into for_webui

src-ui/app/App.jsx

@@ -31,6 +31,7 @@ import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClear
 import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
 import { useUiLanguage } from "@logics_configs/useUiLanguage";
 
+import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
 import { useLanguageSettings } from "@logics_main/useLanguageSettings";
 import { useSelectableLanguageList } from "@logics_main/useSelectableLanguageList";
 
@@ -39,6 +40,7 @@ const StartPythonFacadeComponent = () => {
     const hasRunRef = useRef(false);
     const main_page = getCurrent();
 
+    const { getIsMainPageCompactMode } = useIsMainPageCompactMode();
     const { getSoftwareVersion } = useSoftwareVersion();
     const { getEnableAutoMicSelect } = useEnableAutoMicSelect();
     const { getEnableAutoSpeakerSelect } = useEnableAutoSpeakerSelect();
@@ -67,6 +69,7 @@ const StartPythonFacadeComponent = () => {
         if (!hasRunRef.current) {
             asyncStartPython().then((result) => {
                 getUiLanguage();
+                getIsMainPageCompactMode();
 
                 getSoftwareVersion();
 
@@ -108,7 +111,7 @@ const UiLanguageController = () => {
 
     useEffect(() => {
         i18n.changeLanguage(currentUiLanguage.data);
-    }, [currentUiLanguage]);
+    }, [currentUiLanguage.data]);
     return null;
 };
 

src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx

@@ -29,7 +29,7 @@ export const DropdownMenu = (props) => {
     });
 
     const dropdown_toggle_button_class_name = clsx(styles["dropdown_toggle_button"], {
-        [styles.is_loading]: (props.state === "pending") ? true : false,
+        [styles.is_pending]: (props.state === "pending") ? true : false,
         [styles.is_disabled]: props.is_disabled,
     });
 

src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss

@@ -17,7 +17,7 @@
     &:active {
         background-color: var(--dark_975_color);
     }
-    &.is_loading {
+    &.is_pending {
         pointer-events: none;
     }
     &.is_disabled {

src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx

@@ -6,11 +6,11 @@ export const Switchbox = (props) => {
     const [is_hovered, setIsHovered] = useState(false);
     const [is_mouse_down, setIsMouseDown] = useState(false);
 
-    const is_loading = (props.variable.state === "pending");
+    const is_pending = (props.variable.state === "pending");
 
     const getClassNames = (base_class) => clsx(base_class, {
         [styles.is_active]: (props.variable.data === true),
-        [styles.is_loading]: is_loading,
+        [styles.is_pending]: is_pending,
         [styles.is_hovered]: is_hovered,
         [styles.is_mouse_down]: is_mouse_down,
     });
@@ -36,7 +36,7 @@ export const Switchbox = (props) => {
             >
                 <div className={getClassNames(styles.toggle_control)}>
                     <span className={getClassNames(styles.control)}></span>
-                    {is_loading && <span className={styles.loader}></span>}
+                    {is_pending && <span className={styles.loader}></span>}
                 </div>
             </div>
         </div>

src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss

@@ -16,7 +16,7 @@
     padding: 2rem;
     height: 100%;
     flex-shrink: 0;
-    &.is_loading {
+    &.is_pending {
         pointer-events: none;
     }
 }

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx

@@ -5,7 +5,7 @@ import clsx from "clsx";
 export const VolumeCheckButton = React.memo((props) => {
     const getClassNames = (baseClass) => clsx(baseClass, {
         [styles.is_active]: (props.isChecking?.data === true),
-        [styles.is_loading]: (props.isChecking.state === "pending"),
+        [styles.is_pending]: (props.isChecking.state === "pending"),
     });
 
     const toggleFunction = () => {

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.module.scss

@@ -17,7 +17,7 @@
             background-color: var(--primary_550_color);
         }
     }
-    &.is_loading {
+    &.is_pending {
         background-color: var(--dark_850_color);
         pointer-events: none;
         .button_svg, .button_text {

src-ui/app/main_page/main_section/MainSection.jsx

@@ -20,7 +20,7 @@ export const MainSection = () => {
 
 import { useLanguageSettings } from "@logics_main/useLanguageSettings";
 const HandleLanguageSelector = () => {
-    const { currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
+    const { currentIsOpenedLanguageSelector, updateIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
     const {
         currentSelectedYourLanguages,
         setSelectedYourLanguages,
@@ -29,11 +29,27 @@ const HandleLanguageSelector = () => {
     } = useLanguageSettings();
 
     if (currentIsOpenedLanguageSelector.data.your_language === true) {
-        const onclickFunction_YourLanguage = (payload) => setSelectedYourLanguages(payload);
+        const onclickFunction_YourLanguage = (payload) => {
-        return <LanguageSelector id="your_language" onClickFunction={onclickFunction_YourLanguage}/>;
+            updateIsOpenedLanguageSelector({ your_language: false, target_language: false });
+            setSelectedYourLanguages(payload);
+        };
+        return (
+            <LanguageSelector
+                id="your_language"
+                onClickFunction={onclickFunction_YourLanguage}
+            />
+        );
     } else if (currentIsOpenedLanguageSelector.data.target_language === true) {
-        const onclickFunction_TargetLanguage = (payload) => setSelectedTargetLanguages(payload);
+        const onclickFunction_TargetLanguage = (payload) => {
-        return <LanguageSelector id="target_language" onClickFunction={onclickFunction_TargetLanguage}/>;
+            updateIsOpenedLanguageSelector({ your_language: false, target_language: false });
+            setSelectedTargetLanguages(payload);
+        };
+        return (
+            <LanguageSelector
+                id="target_language"
+                onClickFunction={onclickFunction_TargetLanguage}
+            />
+        );
     } else {
         return null;
     }

src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss

@@ -62,9 +62,11 @@
 .message_main {
     color: var(--dark_basic_text_color);
     font-size: 1.4rem;
+    user-select: text;
 }
 
 .message_second {
     color: var(--dark_450_color);
     font-size: 1rem;
+    user-select: text;
 }

src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx

@@ -1,22 +1,18 @@
 import clsx from "clsx";
 import styles from "./SidebarCompactModeButton.module.scss";
 
-import { useStore_IsMainPageCompactMode } from "@store";
+import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 
 export const SidebarCompactModeButton = () => {
-    const { updateIsMainPageCompactMode, currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
+    const { toggleIsMainPageCompactMode, currentIsMainPageCompactMode } = useIsMainPageCompactMode();
-
-    const toggleCompactMode = () => {
-        updateIsMainPageCompactMode(!currentIsMainPageCompactMode.data);
-    };
 
     const class_names = clsx(styles["arrow_left_svg"], {
         [styles["reverse"]]: currentIsMainPageCompactMode.data
     });
 
     return (
-        <div className={styles.container} onClick={toggleCompactMode}>
+        <div className={styles.container} onClick={toggleIsMainPageCompactMode}>
             <ArrowLeftSvg className={class_names} preserveAspectRatio="none" />
         </div>
     );

src-ui/app/main_page/sidebar_section/SidebarSection.jsx

@@ -1,7 +1,8 @@
 import clsx from "clsx";
 
 import styles from "./SidebarSection.module.scss";
-import { useStore_IsMainPageCompactMode, useStore_IsOpenedLanguageSelector } from "@store";
+import { useStore_IsOpenedLanguageSelector } from "@store";
+import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
 
 import { Logo } from "./logo/Logo";
 import { MainFunctionSwitch } from "./main_function_switch/MainFunctionSwitch";
@@ -9,7 +10,7 @@ import { LanguageSettings } from "./language_settings/LanguageSettings";
 import { OpenSettings } from "./open_settings/OpenSettings";
 
 export const SidebarSection = () => {
-    const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
+    const { currentIsMainPageCompactMode } = useIsMainPageCompactMode();
     const container_class_name = clsx(styles.container, {
         [styles.is_compact_mode]: currentIsMainPageCompactMode.data
     });

src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.jsx

@@ -5,10 +5,12 @@ import { useTranslation } from "react-i18next";
 import styles from "./LanguageSwapButton.module.scss";
 
 import NarrowArrowDownSvg from "@images/narrow_arrow_down.svg?react";
+import { useLanguageSettings } from "@logics_main/useLanguageSettings";
 
 export const LanguageSwapButton = () => {
     const [isHovered, setIsHovered] = useState(false);
     const { t } = useTranslation();
+    const { runLanguageSwap } = useLanguageSettings();
 
     const label = isHovered
         ? t("main_page.swap_button_label")
@@ -27,6 +29,7 @@ export const LanguageSwapButton = () => {
                 className={styles.swap_button_wrapper}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
+                onClick={runLanguageSwap}
             >
                 <NarrowArrowDownSvg className={clsx(styles.narrow_arrow_down_svg, styles.reverse)} />
                 <p className={labelClassName}>{label}</p>

src-ui/app/main_page/sidebar_section/logo/Logo.jsx

@@ -11,10 +11,10 @@ export const Logo = () => {
 
 import vrct_logo from "@images/vrct_logo_for_dark_mode.png";
 import chato_img from "@images/chato_white.png";
-import { useStore_IsMainPageCompactMode } from "@store";
+import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
 
 export const LogoBox = () => {
-    const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
+    const { currentIsMainPageCompactMode } = useIsMainPageCompactMode();
     if (currentIsMainPageCompactMode.data === true) {
         return <img src={chato_img} className={styles.logo_chato} alt="VRCT logo chato" />;
     } else {

src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx

@@ -5,7 +5,7 @@ import TranslationSvg from "@images/translation.svg?react";
 import MicSvg from "@images/mic.svg?react";
 import HeadphonesSvg from "@images/headphones.svg?react";
 import ForegroundSvg from "@images/foreground.svg?react";
-import { useStore_IsMainPageCompactMode } from "@store";
+import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
 
 import { useMainFunction } from "@logics_main/useMainFunction";
 
@@ -74,12 +74,12 @@ export const SwitchContainer = ({ switchLabel, switch_id, children, currentState
     const [is_hovered, setIsHovered] = useState(false);
     const [is_mouse_down, setIsMouseDown] = useState(false);
 
-    const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
+    const { currentIsMainPageCompactMode } = useIsMainPageCompactMode();
 
     const getClassNames = (baseClass) => clsx(baseClass, {
         [styles.is_compact_mode]: currentIsMainPageCompactMode.data,
         [styles.is_active]: (currentState.data === true),
-        [styles.is_loading]: (currentState.state === "pending"),
+        [styles.is_pending]: (currentState.state === "pending"),
         [styles.is_hovered]: is_hovered,
         [styles.is_mouse_down]: is_mouse_down,
     });

src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss

@@ -23,7 +23,7 @@
     &.is_compact_mode {
         padding: 1.5rem;
     }
-    &.is_loading {
+    &.is_pending {
         pointer-events: none;
     }
 }
@@ -36,23 +36,23 @@
 }
 
 $basic_label_color: var(--dark_basic_text_color);
-$loading_label_color: var(--dark_500_color);
+$pending_label_color: var(--dark_500_color);
 .switch_label {
     font-size: 1.4rem;
     color: $basic_label_color;
     &.is_compact_mode {
         display: none;
     }
-    &.is_loading {
+    &.is_pending {
-        color: $loading_label_color;
+        color: $pending_label_color;
     }
 }
 
 .switch_svg {
     width: 1.8rem;
     color: $basic_label_color;
-    &.is_loading {
+    &.is_pending {
-        color: $loading_label_color;
+        color: $pending_label_color;
     }
     &:not(.is_compact_mode) {
         width: 1.6rem;

src-ui/logics/main/useIsMainPageCompactMode.js

@@ -0,0 +1,26 @@
+import { useStore_IsMainPageCompactMode } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useIsMainPageCompactMode = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentIsMainPageCompactMode, updateIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
+
+    const getIsMainPageCompactMode = () => {
+        asyncStdoutToPython("/get/main_window_sidebar_compact_mode");
+    };
+
+    const toggleIsMainPageCompactMode = () => {
+        if (currentIsMainPageCompactMode.data) {
+            asyncStdoutToPython("/set/disable_main_window_sidebar_compact_mode");
+        } else {
+            asyncStdoutToPython("/set/enable_main_window_sidebar_compact_mode");
+        }
+    };
+
+    return {
+        currentIsMainPageCompactMode,
+        getIsMainPageCompactMode,
+        toggleIsMainPageCompactMode,
+        updateIsMainPageCompactMode,
+    };
+};

src-ui/logics/main/useLanguageSettings.js

@@ -104,6 +104,12 @@ export const useLanguageSettings = () => {
         asyncStdoutToPython("/set/data/selected_translator_engines", send_obj);
     };
 
+    const runLanguageSwap = () => {
+        pendingSelectedYourLanguages();
+        pendingSelectedTargetLanguages();
+        asyncStdoutToPython("/run/swap_your_language_and_target_language");
+    };
+
 
     return {
         currentSelectedPresetTabNumber,
@@ -134,5 +140,7 @@ export const useLanguageSettings = () => {
         getSelectedTranslationEngines,
         updateSelectedTranslationEngines,
         setSelectedTranslationEngines,
+
+        runLanguageSwap,
     };
 };

src-ui/logics/useReceiveRoutes.js

@@ -5,8 +5,10 @@ import { useMainFunction } from "@logics_main/useMainFunction";
 import { useMessage } from "@logics_common/useMessage";
 import { useSelectableLanguageList } from "@logics_main/useSelectableLanguageList";
 import { useLanguageSettings } from "@logics_main/useLanguageSettings";
+import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
 import { useVolume } from "@logics_common/useVolume";
 
+
 import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
 import { useEnableAutoMicSelect } from "@logics_configs/useEnableAutoMicSelect";
 import { useEnableAutoSpeakerSelect } from "@logics_configs/useEnableAutoSpeakerSelect";
@@ -24,6 +26,7 @@ import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonTy
 import { useUiLanguage } from "@logics_configs/useUiLanguage";
 
 export const useReceiveRoutes = () => {
+    const { updateIsMainPageCompactMode } = useIsMainPageCompactMode();
     const {
         updateTranslationStatus,
         updateTranscriptionSendStatus,
@@ -66,6 +69,10 @@ export const useReceiveRoutes = () => {
 
     const routes = {
         // Main Page
+        // Page Controls
+        "/get/main_window_sidebar_compact_mode": updateIsMainPageCompactMode,
+        "/set/enable_main_window_sidebar_compact_mode": updateIsMainPageCompactMode,
+        "/set/disable_main_window_sidebar_compact_mode": updateIsMainPageCompactMode,
         // Main Functions
         "/set/enable/translation": updateTranslationStatus,
         "/set/disable/translation": updateTranslationStatus,
@@ -97,6 +104,11 @@ export const useReceiveRoutes = () => {
         "/get/data/selected_translation_engines": updateSelectedTranslationEngines,
         "/set/data/selected_translator_engines": updateSelectedTranslationEngines,
 
+        "/run/swap_your_language_and_target_language": (payload) => {
+            updateSelectedYourLanguages(payload.your);
+            updateSelectedTargetLanguages(payload.target);
+        },
+
 
         // Language Selector
         "/get/data/selectable_language_list": updateSelectableLanguageList,

src-ui/store.js

@@ -16,20 +16,20 @@ export const store = {
     log_box_ref: null,
 };
 
-const generatePropertyNames = (base_ame) => ({
+const generatePropertyNames = (base_name) => ({
-    error: `error${base_ame}`,
+    error: `error${base_name}`,
-    pending: `pending${base_ame}`,
+    pending: `pending${base_name}`,
-    current: `current${base_ame}`,
+    current: `current${base_name}`,
-    update: `update${base_ame}`,
+    update: `update${base_name}`,
-    updatePart: `updatePart${base_ame}`,
+    updatePart: `updatePart${base_name}`,
-    async_update: `asyncUpdate${base_ame}`,
+    async_update: `asyncUpdate${base_name}`,
-    add: `add${base_ame}`,
+    add: `add${base_name}`,
-    async_add: `asyncAdd${base_ame}`,
+    async_add: `asyncAdd${base_name}`,
 });
 
 
-const createAtomWithHook_WIP = (initialValue, base_ame, options) => {
+const createAtomWithHook = (initialValue, base_name, options) => {
-    const property_names = generatePropertyNames(base_ame);
+    const property_names = generatePropertyNames(base_name);
     const atomInstance = atom({
         state: (options?.is_state_ok) ? "ok" : "pending",
         data: initialValue,
@@ -99,76 +99,76 @@ const createAtomWithHook_WIP = (initialValue, base_ame, options) => {
 
 
 
-export const { atomInstance: Atom_SoftwareVersion, useHook: useStore_SoftwareVersion } = createAtomWithHook_WIP("-", "SoftwareVersion");
+export const { atomInstance: Atom_SoftwareVersion, useHook: useStore_SoftwareVersion } = createAtomWithHook("-", "SoftwareVersion");
 
-export const { atomInstance: Atom_TranslationStatus, useHook: useStore_TranslationStatus } = createAtomWithHook_WIP(false, "TranslationStatus", {is_state_ok: true});
+export const { atomInstance: Atom_TranslationStatus, useHook: useStore_TranslationStatus } = createAtomWithHook(false, "TranslationStatus", {is_state_ok: true});
-export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useStore_TranscriptionSendStatus } = createAtomWithHook_WIP(false, "TranscriptionSendStatus", {is_state_ok: true});
+export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useStore_TranscriptionSendStatus } = createAtomWithHook(false, "TranscriptionSendStatus", {is_state_ok: true});
-export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useStore_TranscriptionReceiveStatus } = createAtomWithHook_WIP(false, "TranscriptionReceiveStatus", {is_state_ok: true});
+export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useStore_TranscriptionReceiveStatus } = createAtomWithHook(false, "TranscriptionReceiveStatus", {is_state_ok: true});
-export const { atomInstance: Atom_ForegroundStatus, useHook: useStore_ForegroundStatus } = createAtomWithHook_WIP(false, "ForegroundStatus", {is_state_ok: true});
+export const { atomInstance: Atom_ForegroundStatus, useHook: useStore_ForegroundStatus } = createAtomWithHook(false, "ForegroundStatus", {is_state_ok: true});
 
-export const { atomInstance: Atom_MessageLogs, useHook: useStore_MessageLogs } = createAtomWithHook_WIP(generateTestData(20), "MessageLogs");
+export const { atomInstance: Atom_MessageLogs, useHook: useStore_MessageLogs } = createAtomWithHook(generateTestData(20), "MessageLogs");
-export const { atomInstance: Atom_IsMainPageCompactMode, useHook: useStore_IsMainPageCompactMode } = createAtomWithHook_WIP(false, "IsMainPageCompactMode");
+export const { atomInstance: Atom_IsMainPageCompactMode, useHook: useStore_IsMainPageCompactMode } = createAtomWithHook(false, "IsMainPageCompactMode");
 
-export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_IsOpenedLanguageSelector } = createAtomWithHook_WIP(
+export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_IsOpenedLanguageSelector } = createAtomWithHook(
     { your_language: false, target_language: false },
     "IsOpenedLanguageSelector"
 );
-export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook_WIP([], "SelectableLanguageList");
+export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook([], "SelectableLanguageList");
 
-export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAtomWithHook_WIP("", "SelectedPresetTabNumber");
+export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAtomWithHook("", "SelectedPresetTabNumber");
-export const { atomInstance: Atom_EnableMultiTranslation, useHook: useStore_EnableMultiTranslation } = createAtomWithHook_WIP(false, "EnableMultiTranslation");
+export const { atomInstance: Atom_EnableMultiTranslation, useHook: useStore_EnableMultiTranslation } = createAtomWithHook(false, "EnableMultiTranslation");
-export const { atomInstance: Atom_SelectedYourLanguages, useHook: useStore_SelectedYourLanguages } = createAtomWithHook_WIP({}, "SelectedYourLanguages");
+export const { atomInstance: Atom_SelectedYourLanguages, useHook: useStore_SelectedYourLanguages } = createAtomWithHook({}, "SelectedYourLanguages");
-export const { atomInstance: Atom_SelectedTargetLanguages, useHook: useStore_SelectedTargetLanguages } = createAtomWithHook_WIP({}, "SelectedTargetLanguages");
+export const { atomInstance: Atom_SelectedTargetLanguages, useHook: useStore_SelectedTargetLanguages } = createAtomWithHook({}, "SelectedTargetLanguages");
 
 
-export const { atomInstance: Atom_TranslationEngines, useHook: useStore_TranslationEngines } = createAtomWithHook_WIP(translator_status, "TranslationEngines");
+export const { atomInstance: Atom_TranslationEngines, useHook: useStore_TranslationEngines } = createAtomWithHook(translator_status, "TranslationEngines");
-export const { atomInstance: Atom_SelectedTranslationEngines, useHook: useStore_SelectedTranslationEngines } = createAtomWithHook_WIP({}, "SelectedTranslationEngines");
+export const { atomInstance: Atom_SelectedTranslationEngines, useHook: useStore_SelectedTranslationEngines } = createAtomWithHook({}, "SelectedTranslationEngines");
 
 
-export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook_WIP(false, "IsOpenedConfigPage");
+export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
-export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook_WIP("device", "SelectedConfigTabId");
+export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId");
-export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useStore_IsOpenedDropdownMenu } = createAtomWithHook_WIP("", "IsOpenedDropdownMenu");
+export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useStore_IsOpenedDropdownMenu } = createAtomWithHook("", "IsOpenedDropdownMenu");
 
 
 // Config Page
-export const { atomInstance: Atom_EnableAutoMicSelect, useHook: useStore_EnableAutoMicSelect } = createAtomWithHook_WIP(true, "EnableAutoMicSelect");
+export const { atomInstance: Atom_EnableAutoMicSelect, useHook: useStore_EnableAutoMicSelect } = createAtomWithHook(true, "EnableAutoMicSelect");
-export const { atomInstance: Atom_EnableAutoSpeakerSelect, useHook: useStore_EnableAutoSpeakerSelect } = createAtomWithHook_WIP(true, "EnableAutoSpeakerSelect");
+export const { atomInstance: Atom_EnableAutoSpeakerSelect, useHook: useStore_EnableAutoSpeakerSelect } = createAtomWithHook(true, "EnableAutoSpeakerSelect");
 
-export const { atomInstance: Atom_MicHostList, useHook: useStore_MicHostList } = createAtomWithHook_WIP({}, "MicHostList");
+export const { atomInstance: Atom_MicHostList, useHook: useStore_MicHostList } = createAtomWithHook({}, "MicHostList");
-export const { atomInstance: Atom_SelectedMicHost, useHook: useStore_SelectedMicHost } = createAtomWithHook_WIP("Nothing Selected", "SelectedMicHost");
+export const { atomInstance: Atom_SelectedMicHost, useHook: useStore_SelectedMicHost } = createAtomWithHook("Nothing Selected", "SelectedMicHost");
-export const { atomInstance: Atom_MicDeviceList, useHook: useStore_MicDeviceList } = createAtomWithHook_WIP({}, "MicDeviceList");
+export const { atomInstance: Atom_MicDeviceList, useHook: useStore_MicDeviceList } = createAtomWithHook({}, "MicDeviceList");
-export const { atomInstance: Atom_SelectedMicDevice, useHook: useStore_SelectedMicDevice } = createAtomWithHook_WIP("Nothing Selected", "SelectedMicDevice");
+export const { atomInstance: Atom_SelectedMicDevice, useHook: useStore_SelectedMicDevice } = createAtomWithHook("Nothing Selected", "SelectedMicDevice");
 
-export const { atomInstance: Atom_SpeakerDeviceList, useHook: useStore_SpeakerDeviceList } = createAtomWithHook_WIP({}, "SpeakerDeviceList");
+export const { atomInstance: Atom_SpeakerDeviceList, useHook: useStore_SpeakerDeviceList } = createAtomWithHook({}, "SpeakerDeviceList");
-export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useStore_SelectedSpeakerDevice } = createAtomWithHook_WIP("Nothing Selected", "SelectedSpeakerDevice");
+export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useStore_SelectedSpeakerDevice } = createAtomWithHook("Nothing Selected", "SelectedSpeakerDevice");
 
-export const { atomInstance: Atom_MicVolume, useHook: useStore_MicVolume } = createAtomWithHook_WIP(0, "MicVolume");
+export const { atomInstance: Atom_MicVolume, useHook: useStore_MicVolume } = createAtomWithHook(0, "MicVolume");
-export const { atomInstance: Atom_SpeakerVolume, useHook: useStore_SpeakerVolume } = createAtomWithHook_WIP(0, "SpeakerVolume");
+export const { atomInstance: Atom_SpeakerVolume, useHook: useStore_SpeakerVolume } = createAtomWithHook(0, "SpeakerVolume");
 
-export const { atomInstance: Atom_MicThresholdCheckStatus, useHook: useStore_MicThresholdCheckStatus } = createAtomWithHook_WIP(false, "MicThresholdCheckStatus", {is_state_ok: true});
+export const { atomInstance: Atom_MicThresholdCheckStatus, useHook: useStore_MicThresholdCheckStatus } = createAtomWithHook(false, "MicThresholdCheckStatus", {is_state_ok: true});
-export const { atomInstance: Atom_SpeakerThresholdCheckStatus, useHook: useStore_SpeakerThresholdCheckStatus } = createAtomWithHook_WIP(false, "SpeakerThresholdCheckStatus", {is_state_ok: true});
+export const { atomInstance: Atom_SpeakerThresholdCheckStatus, useHook: useStore_SpeakerThresholdCheckStatus } = createAtomWithHook(false, "SpeakerThresholdCheckStatus", {is_state_ok: true});
 
-export const { atomInstance: Atom_MicThreshold, useHook: useStore_MicThreshold } = createAtomWithHook_WIP(0, "MicThreshold");
+export const { atomInstance: Atom_MicThreshold, useHook: useStore_MicThreshold } = createAtomWithHook(0, "MicThreshold");
-export const { atomInstance: Atom_SpeakerThreshold, useHook: useStore_SpeakerThreshold } = createAtomWithHook_WIP(0, "SpeakerThreshold");
+export const { atomInstance: Atom_SpeakerThreshold, useHook: useStore_SpeakerThreshold } = createAtomWithHook(0, "SpeakerThreshold");
 
-export const { atomInstance: Atom_EnableAutomaticMicThreshold, useHook: useStore_EnableAutomaticMicThreshold } = createAtomWithHook_WIP(false, "EnableAutomaticMicThreshold");
+export const { atomInstance: Atom_EnableAutomaticMicThreshold, useHook: useStore_EnableAutomaticMicThreshold } = createAtomWithHook(false, "EnableAutomaticMicThreshold");
-export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useStore_EnableAutomaticSpeakerThreshold } = createAtomWithHook_WIP(false, "EnableAutomaticSpeakerThreshold");
+export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useStore_EnableAutomaticSpeakerThreshold } = createAtomWithHook(false, "EnableAutomaticSpeakerThreshold");
 
 
 // Appearance
-export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook_WIP("en", "UiLanguage");
+export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook("en", "UiLanguage");
 
 
-export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useStore_IsOpenedWordFilterList } = createAtomWithHook_WIP(false, "IsOpenedWordFilterList");
+export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useStore_IsOpenedWordFilterList } = createAtomWithHook(false, "IsOpenedWordFilterList");
-export const { atomInstance: Atom_WordFilterList, useHook: useStore_WordFilterList } = createAtomWithHook_WIP(word_filter_list, "WordFilterList");
+export const { atomInstance: Atom_WordFilterList, useHook: useStore_WordFilterList } = createAtomWithHook(word_filter_list, "WordFilterList");
 
 
 // Others
-export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useStore_EnableAutoClearMessageBox } = createAtomWithHook_WIP(true, "EnableAutoClearMessageBox");
+export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useStore_EnableAutoClearMessageBox } = createAtomWithHook(true, "EnableAutoClearMessageBox");
-export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAtomWithHook_WIP("show", "SendMessageButtonType");
+export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAtomWithHook("show", "SendMessageButtonType");
 
 
-export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook_WIP(false, "IsOpenedTranslatorSelector");
+export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");
 
-export const { atomInstance: Atom_VrctPosterIndex, useHook: useStore_VrctPosterIndex } = createAtomWithHook_WIP(0, "VrctPosterIndex");
+export const { atomInstance: Atom_VrctPosterIndex, useHook: useStore_VrctPosterIndex } = createAtomWithHook(0, "VrctPosterIndex");
-export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: useStore_PosterShowcaseWorldPageIndex } = createAtomWithHook_WIP(0, "PosterShowcaseWorldPageIndex");
+export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: useStore_PosterShowcaseWorldPageIndex } = createAtomWithHook(0, "PosterShowcaseWorldPageIndex");

src-ui/utils/mixins.scss

@@ -76,7 +76,7 @@ $toggle_control_size: $toggle_height - calc($toggle_gutter * 2);
             background: $toggle_control_color;
             transition: left $toggle_control_speed $toggle_control_ease;
         }
-        &.is_loading:after{
+        &.is_pending:after{
             background-color: var(--dark_600_color);
         }
         &.is_hovered {