Merge branch 'ui' into for_webui

locales/en.json

@@ -73,7 +73,10 @@
         "ui_scaling": "UI Scaling",
         "display_duration": "Display duration",
         "fadeout_duration": "Fadeout duration",
-        "tracker": "Tracker"
+        "tracker": "Tracker",
+        "overlay_show_only_translated_messages": {
+            "label": "Show Only Translated Messages"
+        }
     },
     "config_page": {
         "config_title": "Settings",

src-ui/app/App.jsx

@@ -6,9 +6,10 @@ import { WindowTitleBar } from "./window_title_bar/WindowTitleBar";
 import { MainPage } from "./main_page/MainPage";
 import { ConfigPage } from "./config_page/ConfigPage";
 import { SplashComponent } from "./splash_component/SplashComponent";
+import { UpdatingComponent } from "./updating_component/UpdatingComponent";
 import { ModalController } from "./modal_controller/ModalController";
 import styles from "./App.module.scss";
-import { useIsBackendReady } from "@logics_common";
+import { useIsBackendReady, useIsSoftwareUpdating } from "@logics_common";
 
 export const App = () => {
     const { currentIsBackendReady } = useIsBackendReady();
@@ -34,14 +35,20 @@ export const App = () => {
 };
 
 const Contents = () => {
+    const { currentIsSoftwareUpdating } = useIsSoftwareUpdating();
     return (
         <>
             <WindowTitleBar />
+            {currentIsSoftwareUpdating.data === false
+            ?
             <div className={styles.pages_wrapper}>
                 <ConfigPage />
                 <MainPage />
                 <ModalController />
             </div>
+            :
+            <UpdatingComponent />
+            }
         </>
     );
 };

src-ui/app/_index_css/variables.css

@@ -16,6 +16,8 @@
     --primary_800_color: #2c6759;
     --primary_900_color: #214b3f;
 
+    --primary_600_color_44: #36877744;
+
     --sent_400_color: #6197b4;
     --received_300_color: #a861b4;
 

src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss

@@ -5,6 +5,7 @@
     gap: 0.4rem;
     position: relative;
     flex-shrink: 0;
+    flex-wrap: wrap;
     &.column {
         flex-direction: column;
     }

src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx

@@ -1,26 +1,12 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import styles from "./Slider.module.scss";
 import MUI_Slider from "@mui/material/Slider";
 import { clsx } from "clsx";
 
 export const Slider = (props) => {
-    const [baseColor, setBaseColor] = useState("");
-    const [activeColor, setActiveColor] = useState("");
-    const [toolTipColor, setToolTipColor] = useState("");
-
-    useEffect(() => {
-        const baseColor = getComputedStyle(document.documentElement).getPropertyValue("--dark_700_color");
-        setBaseColor(baseColor.trim());
-        const activeColor = getComputedStyle(document.documentElement).getPropertyValue("--primary_600_color");
-        setActiveColor(activeColor.trim());
-        const toolTipColor = getComputedStyle(document.documentElement).getPropertyValue("--dark_800_color");
-        setToolTipColor(toolTipColor.trim());
-    }, []);
-
     return (
         <div className={clsx(styles.container, props.className)}>
             <MUI_Slider
-                className={styles.range_slider}
                 aria-label="Default"
                 valueLabelDisplay="auto"
                 value={props.variable}
@@ -34,15 +20,15 @@ export const Slider = (props) => {
                 orientation={props.orientation}
                 valueLabelFormat={`${props.valueLabelFormat ? props.valueLabelFormat : props.variable}`}
                 sx={{
-                    color: baseColor,
+                    color: "var(--dark_700_color)",
                     "& .MuiSlider-thumb": {
-                        backgroundColor: activeColor,
+                        backgroundColor: "var(--primary_600_color)",
                         "&:hover, &.Mui-focusVisible, &.Mui-active": {
-                            boxShadow: `0 0 0 0.8rem ${activeColor}44`,
+                            boxShadow: `0 0 0 0.8rem var(--primary_600_color_44)`,
                         },
                         "& .MuiSlider-valueLabel": {
                             fontSize: "1.4rem",
-                            backgroundColor: toolTipColor,
+                            backgroundColor: "var(--dark_800_color)",
                             padding: "0.6rem 1rem",
                             lineHeight: "1.15",
                             // top: "-1.4rem",
@@ -56,11 +42,11 @@ export const Slider = (props) => {
                     },
                     "& .MuiSlider-markLabel": {
                         fontSize: "1.4rem",
-                        color: "white",
+                        color: "var(--dark_550_color)",
                         whiteSpace: "nowrap",
                     },
                     "& .MuiSlider-markLabelActive": {
-                        color: activeColor,
+                        color: "var(--primary_300_color)",
                     },
                 }}
             />

src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.module.scss

@@ -1,30 +1,7 @@
 .container {
     display: flex;
     flex-direction: column;
-    align-items: center; // 中央に揃え
+    align-items: center;
     justify-content: center;
     width: 100%;
-    // padding-left: 4rem;
-}
-
-.range_slider {
-    // スライダーの幅を調整（必要に応じて調整）
-    height: 200px; // 縦スライダーの高さ
-    padding: 10px 0; // スライダーの上下のパディング
-
-    & .MuiSlider-thumb {
-        // スライダーのつまみのサイズを調整
-        height: 24px;
-        width: 24px;
-        margin-top: -12px; // つまみが中心に来るように調整
-    }
-
-    & .MuiSlider-track {
-        height: 2px; // トラックの高さを調整
-    }
-
-    & .MuiSlider-vertical {
-        // 縦スライダー用のスタイル
-        height: 100%; // コンテナの高さにフィット
-    }
 }

src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx

@@ -1,6 +1,7 @@
-import styles from "./Templates.module.scss";
+import clsx from "clsx";
-import { useStore_IsOpenedDropdownMenu } from "@store";
 
+import styles from "./Templates.module.scss";
+import { useStore_IsOpenedDropdownMenu, useStore_IsBreakPoint } from "@store";
 import {
     LabelComponent,
     DropdownMenu,
@@ -17,6 +18,13 @@ import {
     DownloadModels,
 } from "../_components/";
 
+const LabeledContainer = ({ children, label, desc, custom_class_name }) => (
+    <div className={clsx(styles.container, custom_class_name)}>
+        <LabelComponent label={label} desc={desc} />
+        {children}
+    </div>
+);
+
 export const useOnMouseLeaveDropdownMenu = () => {
     const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
 
@@ -29,7 +37,6 @@ export const useOnMouseLeaveDropdownMenu = () => {
 
 export const DropdownMenuContainer = (props) => {
     const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
-
     return (
         <div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
             <LabelComponent label={props.label} desc={props.desc} />
@@ -38,54 +45,40 @@ export const DropdownMenuContainer = (props) => {
     );
 };
 
+const CommonContainer = ({ Component, ...props }) => {
+    const { currentIsBreakPoint } = useStore_IsBreakPoint();
+
+    const container_class = clsx(styles.container, {
+        [styles.is_break_point]: props.add_break_point ?? currentIsBreakPoint.data,
+    });
 
-export const SliderContainer = (props) => {
     return (
-        <div className={styles.container}>
+        <LabeledContainer label={props.label} desc={props.desc} custom_class_name={container_class}>
-            <LabelComponent label={props.label} desc={props.desc} />
+            <Component {...props} />
-            <Slider {...props}/>
+        </LabeledContainer>
-        </div>
     );
 };
-
+export const SliderContainer = (props) => (
-export const CheckboxContainer = (props) => {
+    <CommonContainer Component={Slider} {...props} />
-    return (
-        <div className={styles.container}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <Checkbox {...props}/>
-        </div>
 );
-};
 
-export const SwitchBoxContainer = (props) => {
+export const CheckboxContainer = (props) => (
-    return (
+    <CommonContainer Component={Checkbox} {...props} add_break_point={false} />
-        <div className={styles.container}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <SwitchBox {...props}/>
-        </div>
 );
-};
 
-export const EntryContainer = (props) => {
+export const SwitchBoxContainer = (props) => (
-    return (
+    <CommonContainer Component={SwitchBox} {...props} />
-        <div className={styles.container}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <Entry {...props}/>
-        </div>
 );
-};
 
-export const RadioButtonContainer = (props) => {
+export const EntryContainer = (props) => (
-    return (
+    <CommonContainer Component={Entry} {...props} add_break_point={false} />
-        <div className={styles.container}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <RadioButton {...props}/>
-        </div>
 );
-};
 
-export const DeeplAuthKeyContainer = (props) => {
+export const RadioButtonContainer = (props) => (
-    return (
+    <CommonContainer Component={RadioButton} {...props} />
+);
+
+export const DeeplAuthKeyContainer = (props) => (
     <div className={styles.container}>
         <div className={styles.deepl_auth_key_label_section}>
             <LabelComponent label={props.label} desc={props.desc} />
@@ -94,19 +87,12 @@ export const DeeplAuthKeyContainer = (props) => {
         <DeeplAuthKey {...props} />
     </div>
 );
-};
 
-export const ActionButtonContainer = (props) => {
+export const ActionButtonContainer = (props) => (
-    return (
+    <CommonContainer Component={ActionButton} {...props} add_break_point={false}/>
-        <div className={styles.container}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <ActionButton {...props}/>
-        </div>
 );
-};
 
-export const WordFilterContainer = (props) => {
+export const WordFilterContainer = (props) => (
-    return (
     <div className={styles.word_filter_container}>
         <div className={styles.word_filter_switch_section}>
             <div className={styles.word_filter_label_wrapper}>
@@ -119,13 +105,7 @@ export const WordFilterContainer = (props) => {
         </div>
     </div>
 );
-};
 
-export const DownloadModelsContainer = (props) => {
+export const DownloadModelsContainer = (props) => (
-    return (
+    <CommonContainer Component={DownloadModels} {...props} />
-        <div className={styles.container}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <DownloadModels {...props}/>
-        </div>
 );
-};

src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss

@@ -9,6 +9,12 @@
         flex-direction: column;
     }
     border-bottom: solid 0.1rem var(--dark_800_color);
+
+    &.is_break_point {
+        flex-direction: column;
+        gap: 2rem;
+        align-items: start;
+    }
 }
 
 .label_only_section {

src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx

@@ -4,6 +4,11 @@ import { useTranslation } from "react-i18next";
 import styles from "./Appearance.module.scss";
 import { ui_configs } from "@ui_configs";
 import { useStore_SelectableFontFamilyList } from "@store";
+
+import {
+    useWindow,
+} from "@logics_common";
+
 import {
     useUiLanguage,
     useUiScaling,
@@ -52,6 +57,8 @@ const UiLanguageContainer = () => {
 const UiScalingContainer = () => {
     const { t } = useTranslation();
     const { currentUiScaling, setUiScaling } = useUiScaling();
+    const { asyncUpdateBreakPoint } = useWindow();
+
     const [ui_ui_scaling, setUiUiScaling] = useState(currentUiScaling.data);
 
     const onchangeFunction = (value) => {
@@ -62,6 +69,7 @@ const UiScalingContainer = () => {
     };
     useEffect(() => {
         setUiUiScaling(currentUiScaling.data);
+        asyncUpdateBreakPoint();
     }, [currentUiScaling.data]);
 
     const createMarks = (min, max) => {

src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx

@@ -7,12 +7,19 @@ import { Slider } from "../_components/";
 import {
     RadioButtonContainer,
     SwitchBoxContainer,
+    CheckboxContainer,
 } from "../_templates/Templates";
+
+import {
+    SectionLabelComponent,
+} from "../_components/";
+
 import {
     useIsEnabledOverlaySmallLog,
     useOverlaySmallLogSettings,
     useIsEnabledOverlayLargeLog,
     useOverlayLargeLogSettings,
+    useOverlayShowOnlyTranslatedMessages,
 } from "@logics_configs";
 
 export const Vr = () => {
@@ -56,6 +63,7 @@ export const Vr = () => {
                     />
                 )}
             </div>
+            <CommonSettingsContainer />
         </div>
     );
 };
@@ -312,3 +320,20 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
         </div>
     );
 };
+
+
+const CommonSettingsContainer = () => {
+    const { t } = useTranslation();
+    const { currentOverlayShowOnlyTranslatedMessages, toggleOverlayShowOnlyTranslatedMessages } = useOverlayShowOnlyTranslatedMessages();
+
+    return (
+        <div className={styles.common_container}>
+            <SectionLabelComponent label="Common Settings" />
+            <CheckboxContainer
+                label={t("overlay_settings.overlay_show_only_translated_messages.label")}
+                variable={currentOverlayShowOnlyTranslatedMessages}
+                toggleFunction={toggleOverlayShowOnlyTranslatedMessages}
+            />
+        </div>
+    );
+};

src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss

@@ -6,6 +6,7 @@
     position: relative;
     padding: 2rem;
     width: 100%;
+    gap: 4rem;
 }
 
 .wrapper {
@@ -188,3 +189,11 @@
     font-size: 1.6rem;
     width: 100%;
 }
+
+.common_container {
+    width: 100%;
+}
+
+.common_label {
+    font-size: 1.4rem;
+}

src-ui/app/modal_controller/update_modal/UpdateModal.jsx

@@ -2,18 +2,25 @@ import styles from "./UpdateModal.module.scss";
 import { useTranslation } from "react-i18next";
 import { useStore_OpenedQuickSetting } from "@store";
 import { useUpdateSoftware } from "@logics_common";
+import { useIsSoftwareUpdating } from "@logics_common";
 
 export const UpdateModal = () => {
     const { t } = useTranslation();
     const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
     const { updateSoftware } = useUpdateSoftware();
+    const { updateIsSoftwareUpdating } = useIsSoftwareUpdating();
+
+    const onClickUpdateSoftware = () => {
+        updateIsSoftwareUpdating(true);
+        updateSoftware();
+    };
 
     return (
         <div className={styles.container}>
             <p className={styles.label}>{t("main_page.confirmation_message.update_software")}</p>
             <div className={styles.button_wrapper}>
                 <button className={styles.deny_button} onClick={() => updateOpenedQuickSetting("")} >{t("main_page.confirmation_message.deny_update_software")}</button>
-                <button className={styles.accept_button} onClick={() => updateSoftware()}>{t("main_page.confirmation_message.accept_update_software")}</button>
+                <button className={styles.accept_button} onClick={onClickUpdateSoftware}>{t("main_page.confirmation_message.accept_update_software")}</button>
             </div>
         </div>
     );

src-ui/app/updating_component/UpdatingComponent.jsx

@@ -0,0 +1,22 @@
+import styles from "./UpdatingComponent.module.scss";
+import { useTranslation } from "react-i18next";
+import CircularProgress from "@mui/material/CircularProgress";
+import chat_white_square from "@images/chato_white_square.png";
+
+export const UpdatingComponent = () => {
+    const { t } = useTranslation();
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.chato_box}>
+                <img src={chat_white_square} className={styles.chato_img}/>
+            </div>
+            <div className={styles.circular_box}>
+                <CircularProgress size="20rem" sx={{
+                    color: "var(--primary_300_color)",
+                }}/>
+            </div>
+            <p className={styles.label}>{t("main_page.confirmation_message.updating")}</p>
+        </div>
+    );
+};

src-ui/app/updating_component/UpdatingComponent.module.scss

@@ -0,0 +1,52 @@
+.container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 4rem;
+    position: relative;
+}
+
+.label {
+    position: absolute;
+    top: 60%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 2rem;
+}
+
+.circular_box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.chato_box {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.chato_img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 4.8rem;
+    animation: infinite-rotation 20s linear infinite 0.5s;
+}
+@keyframes infinite-rotation {
+    from {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+    to {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}

src-ui/logics/common/index.js

@@ -4,6 +4,7 @@ export { useIsBackendReady } from "./useIsBackendReady";
 export { useWindow } from "./useWindow";
 export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage";
 export { useIsSoftwareUpdateAvailable } from "./useIsSoftwareUpdateAvailable";
+export { useIsSoftwareUpdating } from "./useIsSoftwareUpdating";
 export { useOpenFolder } from "./useOpenFolder";
 export { useMessage } from "./useMessage";
 export { useUpdateSoftware } from "./useUpdateSoftware";

src-ui/logics/common/useIsSoftwareUpdating.js

@@ -0,0 +1,10 @@
+import { useStore_IsSoftwareUpdating } from "@store";
+
+export const useIsSoftwareUpdating = () => {
+    const { currentIsSoftwareUpdating, updateIsSoftwareUpdating } = useStore_IsSoftwareUpdating();
+
+    return {
+        currentIsSoftwareUpdating,
+        updateIsSoftwareUpdating,
+    };
+};

src-ui/logics/common/useWindow.js

@@ -1,8 +1,14 @@
-import { useStdoutToPython } from "@logics/useStdoutToPython";
 import { useEffect } from "react";
 import { appWindow, currentMonitor, availableMonitors, LogicalPosition, LogicalSize } from "@tauri-apps/api/window";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStore_IsBreakPoint } from "@store";
+import { useUiScaling } from "@logics_configs";
+
 export const useWindow = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentUiScaling } = useUiScaling();
+    const { updateIsBreakPoint } = useStore_IsBreakPoint();
+
     const asyncGetWindowGeometry = async () => {
         try {
             const position = await appWindow.outerPosition();
@@ -82,13 +88,23 @@ export const useWindow = () => {
         }
     };
 
+    const asyncUpdateBreakPoint = async () => {
+        const size = await appWindow.innerSize();
+        const dynamicBreakPoint = 800 * (currentUiScaling.data / 100);
+        updateIsBreakPoint(size.width <= dynamicBreakPoint);
+    };
 
     const WindowGeometryController = () => {
         useEffect(() => {
             let resizeTimeout;
+            const asyncFunction = () => {
+                asyncSaveWindowGeometry();
+                asyncUpdateBreakPoint();
+            };
+
             const unlistenResize = appWindow.onResized(() => {
                 clearTimeout(resizeTimeout);
-                resizeTimeout = setTimeout(asyncSaveWindowGeometry, 200);
+                resizeTimeout = setTimeout(asyncFunction, 200);
             });
 
             return () => {
@@ -115,5 +131,6 @@ export const useWindow = () => {
         WindowGeometryController,
         asyncSaveWindowGeometry,
         restoreWindowGeometry,
+        asyncUpdateBreakPoint,
     };
 };

src-ui/logics/configs/index.js

@@ -47,6 +47,7 @@ export { useSelectedCTranslate2ComputeDevice } from "./translation/useSelectedCT
 export { useIsEnabledOverlaySmallLog } from "./vr/useIsEnabledOverlaySmallLog";
 export { useOverlaySmallLogSettings } from "./vr/useOverlaySmallLogSettings";
 export { useIsEnabledOverlayLargeLog } from "./vr/useIsEnabledOverlayLargeLog";
+export { useOverlayShowOnlyTranslatedMessages } from "./vr/useOverlayShowOnlyTranslatedMessages";
 export { useOverlayLargeLogSettings } from "./vr/useOverlayLargeLogSettings";
 
 export { useOscIpAddress } from "./advanced_settings/useOscIpAddress";

src-ui/logics/configs/vr/useOverlayShowOnlyTranslatedMessages.js

@@ -0,0 +1,28 @@
+import { useStore_OverlayShowOnlyTranslatedMessages } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useOverlayShowOnlyTranslatedMessages = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentOverlayShowOnlyTranslatedMessages, updateOverlayShowOnlyTranslatedMessages, pendingOverlayShowOnlyTranslatedMessages } = useStore_OverlayShowOnlyTranslatedMessages();
+
+    const getOverlayShowOnlyTranslatedMessages = () => {
+        pendingOverlayShowOnlyTranslatedMessages();
+        asyncStdoutToPython("/get/data/overlay_show_only_translated_messages");
+    };
+
+    const toggleOverlayShowOnlyTranslatedMessages = () => {
+        pendingOverlayShowOnlyTranslatedMessages();
+        if (currentOverlayShowOnlyTranslatedMessages.data) {
+            asyncStdoutToPython("/set/disable/overlay_show_only_translated_messages");
+        } else {
+            asyncStdoutToPython("/set/enable/overlay_show_only_translated_messages");
+        }
+    };
+
+    return {
+        currentOverlayShowOnlyTranslatedMessages,
+        getOverlayShowOnlyTranslatedMessages,
+        updateOverlayShowOnlyTranslatedMessages,
+        toggleOverlayShowOnlyTranslatedMessages,
+    };
+};

src-ui/logics/useReceiveRoutes.js

@@ -64,6 +64,7 @@ import {
     useOverlaySmallLogSettings,
     useIsEnabledOverlayLargeLog,
     useOverlayLargeLogSettings,
+    useOverlayShowOnlyTranslatedMessages,
     useOscIpAddress,
     useOscPort,
 } from "@logics_configs";
@@ -161,6 +162,7 @@ export const useReceiveRoutes = () => {
     const { updateIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
     const { updateOverlayLargeLogSettings } = useOverlayLargeLogSettings();
     const { updateIsEnabledOverlayLargeLog } = useIsEnabledOverlayLargeLog();
+    const { updateOverlayShowOnlyTranslatedMessages } = useOverlayShowOnlyTranslatedMessages();
 
     const { updateOscIpAddress } = useOscIpAddress();
     const { updateOscPort } = useOscPort();
@@ -414,6 +416,10 @@ export const useReceiveRoutes = () => {
         "/get/data/overlay_large_log_settings": updateOverlayLargeLogSettings,
         "/set/data/overlay_large_log_settings": updateOverlayLargeLogSettings,
 
+        "/get/data/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages,
+        "/set/enable/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages,
+        "/set/disable/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages,
+
         // Others Tab
         "/get/data/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
         "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,

src-ui/store.js

@@ -113,6 +113,8 @@ export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_Ma
 export const { atomInstance: Atom_OpenedQuickSetting, useHook: useStore_OpenedQuickSetting } = createAtomWithHook("", "OpenedQuickSetting");
 export const { atomInstance: Atom_IsSoftwareUpdateAvailable, useHook: useStore_IsSoftwareUpdateAvailable } = createAtomWithHook(false, "IsSoftwareUpdateAvailable");
 export const { atomInstance: Atom_InitProgress, useHook: useStore_InitProgress } = createAtomWithHook(0, "InitProgress");
+export const { atomInstance: Atom_IsBreakPoint, useHook: useStore_IsBreakPoint } = createAtomWithHook(false, "IsBreakPoint");
+export const { atomInstance: Atom_IsSoftwareUpdating, useHook: useStore_IsSoftwareUpdating } = createAtomWithHook(false, "IsSoftwareUpdating");
 
 // Main Page
 // Functions
@@ -242,6 +244,7 @@ export const { atomInstance: Atom_OverlayLargeLogSettings, useHook: useStore_Ove
     tracker: "HMD",
 }, "OverlayLargeLogSettings");
 export const { atomInstance: Atom_IsEnabledOverlayLargeLog, useHook: useStore_IsEnabledOverlayLargeLog } = createAtomWithHook(false, "IsEnabledOverlayLargeLog");
+export const { atomInstance: Atom_OverlayShowOnlyTranslatedMessages, useHook: useStore_OverlayShowOnlyTranslatedMessages } = createAtomWithHook(false, "OverlayShowOnlyTranslatedMessages");
 
 // Others
 export const { atomInstance: Atom_EnableAutoClearMessageInputBox, useHook: useStore_EnableAutoClearMessageInputBox } = createAtomWithHook(true, "EnableAutoClearMessageInputBox");