[Update] Combine in one window. Rename Main/Config Window to Main/Config Page accordingly.

For now, I put Config Page to below the main page temporary. Open Config Button does not work.

src-ui/app/App.jsx

@@ -0,0 +1,35 @@
+import { getCurrent } from "@tauri-apps/api/window";
+import { useEffect, useRef } from "react";
+import { useStartPython } from "@logics/useStartPython";
+import { useConfig } from "@logics/useConfig";
+
+import { MainPage } from "./main_page/MainPage";
+import { ConfigPage } from "./config_page/ConfigPage";
+
+
+export const App = () => {
+    const { asyncStartPython } = useStartPython();
+    const hasRunRef = useRef(false);
+    const main_page = getCurrent();
+
+    const { getSoftwareVersion } = useConfig();
+
+    useEffect(() => {
+        main_page.setDecorations(true);
+        if (!hasRunRef.current) {
+            asyncStartPython().then((result) => {
+                getSoftwareVersion();
+            }).catch((err) => {
+
+            });
+        }
+        return () => hasRunRef.current = true;
+    }, []);
+
+    return (
+        <>
+            <MainPage/>
+            <ConfigPage/>
+        </>
+    );
+};

src-ui/app/config_page/ConfigPage.jsx

@@ -1,14 +1,14 @@
-import styles from "./ConfigWindow.module.scss";
+import styles from "./ConfigPage.module.scss";
 
-import { Topbar } from "./topbar/Topbar";
-import { SidebarSection } from "./sidebar_section/SidebarSection";
+import { Topbar } from "./topbar/Topbar.jsx";
+import { SidebarSection } from "./sidebar_section/SidebarSection.jsx";
 import { SettingSection } from "./setting_section/SettingSection.jsx";
 
 import { useSoftwareVersion  } from "@store";
 import { useTranslation } from "react-i18next";
 
 // import { useConfig } from "@logics/useConfig";
-export const ConfigWindow = () => {
+export const ConfigPage = () => {
     const { currentSoftwareVersion, updateSoftwareVersion } = useSoftwareVersion();
     const { t } = useTranslation();
 
@@ -21,7 +21,7 @@ export const ConfigWindow = () => {
             </div>
             <p className={styles.software_version}>
                 {
-                    t("config_window.version", {version: currentSoftwareVersion})
+                    t("config_page.version", {version: currentSoftwareVersion})
                 }
             </p>
         </div>

src-ui/app/config_page/ConfigPage.module.scss

@@ -13,7 +13,7 @@
     width: 100%;
     height: 100%;
     display: flex;
-    padding-top: var(--config_window_topbar_height);
+    padding-top: var(--config_page_topbar_height);
 }
 
 .software_version {

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

@@ -47,21 +47,21 @@ export const Appearance = () => {
 
             <ThresholdContainer label="Transparent" desc="description" id="mic_threshold"  min="0" max="3000"/>
 
-            <DeeplAuthKeyContainer label={t(`config_window.deepl_auth_key.label`)} desc={t(`config_window.deepl_auth_key.desc`)}/>
+            <DeeplAuthKeyContainer label={t(`config_page.deepl_auth_key.label`)} desc={t(`config_page.deepl_auth_key.desc`)}/>
 
 
-            <MessageFormatContainer label={t(`config_window.send_message_format.label`)} desc={t(`config_window.send_message_format.desc`)} id="send"/>
+            <MessageFormatContainer label={t(`config_page.send_message_format.label`)} desc={t(`config_page.send_message_format.desc`)} id="send"/>
 
-            <MessageFormatContainer label={t(`config_window.send_message_format_with_t.label`)} desc={t(`config_window.send_message_format_with_t.desc`)} id="send_with_t"/>
+            <MessageFormatContainer label={t(`config_page.send_message_format_with_t.label`)} desc={t(`config_page.send_message_format_with_t.desc`)} id="send_with_t"/>
 
 
-            <MessageFormatContainer label={t(`config_window.send_message_format.label`)} desc={t(`config_window.send_message_format.desc`)} id="received"/>
+            <MessageFormatContainer label={t(`config_page.send_message_format.label`)} desc={t(`config_page.send_message_format.desc`)} id="received"/>
 
-            <MessageFormatContainer label={t(`config_window.send_message_format_with_t.label`)} desc={t(`config_window.send_message_format_with_t.desc`)} id="received_with_t"/>
+            <MessageFormatContainer label={t(`config_page.send_message_format_with_t.label`)} desc={t(`config_page.send_message_format_with_t.desc`)} id="received_with_t"/>
 
-            <WordFilterContainer label={t(`config_window.mic_word_filter.label`)} desc={t(`config_window.mic_word_filter.desc`)}/>
+            <WordFilterContainer label={t(`config_page.mic_word_filter.label`)} desc={t(`config_page.mic_word_filter.desc`)}/>
 
-            <ActionButtonContainer label={t(`config_window.open_config_filepath.label`)} IconComponent={FolderOpenSvg} OnclickFunction={()=>{}}/>
+            <ActionButtonContainer label={t(`config_page.open_config_filepath.label`)} IconComponent={FolderOpenSvg} OnclickFunction={()=>{}}/>
 
         </>
     );

src-ui/app/config_page/setting_section/setting_box/components/message_format/MessageFormat.jsx

@@ -52,12 +52,12 @@ const ExampleComponent = ({ id, current_format }) => {
     const { currentUiLanguageStatus } = useUiLanguageStatus();
 
     const createExampleMessage = () => {
-        const originalLangMessage = t("config_window.send_message_format.example_text");
+        const originalLangMessage = t("config_page.send_message_format.example_text");
         let format = current_format;
 
         if (["send_with_t", "received_with_t"].includes(id)) {
             const translationLocale = currentUiLanguageStatus === "en" ? "ja" : "en";
-            const translatedLangMessage = t("config_window.send_message_format.example_text", { lng: translationLocale });
+            const translatedLangMessage = t("config_page.send_message_format.example_text", { lng: translationLocale });
 
             return format.is_message_first
                 ? `${format.before}${originalLangMessage}${format.between}${translatedLangMessage}${format.after}`

src-ui/app/config_page/setting_section/setting_box/components/word_filter/WordFilter.jsx

@@ -130,7 +130,7 @@ export const WordFilterListToggleComponent = (props) => {
 
     return (
         <div className={styles.toggle_button_container}>
-            <p className={styles.words_count_text}>{t("config_window.mic_word_filter.count_desc", {count: word_filter_list_length} )}</p>
+            <p className={styles.words_count_text}>{t("config_page.mic_word_filter.count_desc", {count: word_filter_list_length} )}</p>
             <button className={styles.toggle_button_wrapper} onClick={OnclickFunction}>
                 <ArrowLeftSvg className={svg_class_names}/>
             </button>

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

@@ -39,7 +39,7 @@ const Tab = (props) => {
 
     return (
         <div className={tab_container_class_names} onClick={onclickFunction}>
-            <p className={styles.tab_text}>{t(`config_window.side_menu_labels.${props.tab_id}`)}</p>
+            <p className={styles.tab_text}>{t(`config_page.side_menu_labels.${props.tab_id}`)}</p>
             <div className={switch_indicator_class_names}></div>
         </div>
     );

src-ui/app/config_page/sidebar_section/SidebarSection.module.scss

@@ -1,5 +1,5 @@
 .container {
-    width: var(--config_window_sidebar_width);
+    width: var(--config_page_sidebar_width);
     flex-shrink: 0;
     display: flex;
     flex-direction: column;

src-ui/app/config_page/topbar/Topbar.module.scss

@@ -4,7 +4,7 @@
 }
 
 .wrapper {
-    height: var(--config_window_topbar_height);
+    height: var(--config_page_topbar_height);
     background-color: var(--dark_850_color);
     display: flex;
     justify-content: space-between;

src-ui/app/config_page/topbar/compact_switch_box/CompactSwitchBox.jsx

@@ -6,7 +6,7 @@ export const CompactSwitchBox = () => {
     const { t } = useTranslation();
     return (
         <div className={styles.container}>
-            <p>{t("config_window.compact_mode")}</p>
+            <p>{t("config_page.compact_mode")}</p>
         </div>
     );
 };

src-ui/app/config_page/topbar/section_title_box/SectionTitleBox.jsx

@@ -7,7 +7,7 @@ export const SectionTitleBox = () => {
     const { currentSelectedConfigTabId } = useSelectedConfigTabId();
     return (
         <div className={styles.container}>
-            <p className={styles.title}>{t(`config_window.side_menu_labels.${currentSelectedConfigTabId}`)}</p>
+            <p className={styles.title}>{t(`config_page.side_menu_labels.${currentSelectedConfigTabId}`)}</p>
         </div>
     );
 };

src-ui/app/config_page/topbar/title_box/TitleBox.jsx

@@ -8,7 +8,7 @@ export const TitleBox = () => {
     return (
         <div className={styles.container}>
             <img src={chato_img} className={styles.logo_chato} alt="VRCT logo chato" />
-            <p className={styles.title}>{t("config_window.config_title")}</p>
+            <p className={styles.title}>{t("config_page.config_title")}</p>
         </div>
     );
 };

src-ui/app/config_page/topbar/title_box/TitleBox.module.scss

@@ -1,6 +1,6 @@
 .container {
     // flex: 0;
-    width: var(--config_window_sidebar_width);
+    width: var(--config_page_sidebar_width);
     height: 100%;
     display: flex;
     justify-content: left;

src-ui/app/index.jsx

@@ -3,10 +3,10 @@ import ReactDOM from "react-dom/client";
 import "@root/locales/config.js";
 import "@utils/root.css";
 
-import { MainWindow } from "./MainWindow";
+import { App } from "./App";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
     <React.StrictMode>
-        <MainWindow />
+        <App />
     </React.StrictMode>,
 );

src-ui/app/main_page/MainPage.jsx

@@ -0,0 +1,39 @@
+import styles from "./MainPage.module.scss";
+import { SidebarSection } from "./sidebar_section/SidebarSection";
+import { MainSection } from "./main_section/MainSection";
+
+export const MainPage = () => {
+    return (
+        <div className={styles.container}>
+            <SidebarSection />
+            <MainSection />
+            {/* <MainPageCover /> */}
+        </div>
+    );
+};
+
+
+// import { useTranslation } from "react-i18next";
+// import { useIsOpenedConfigPage } from "@store";
+// import { useWindow } from "@logics/useWindow";
+
+// export const MainPageCover = () => {
+//     const { t } = useTranslation();
+//     const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
+//     const { closeConfigPage } = useWindow();
+//     if ( currentIsOpenedConfigPage === false) return null;
+
+//     const closeSettingsWindow = () => closeConfigPage();
+
+//     return (
+//         <div className={styles.main_page_cover}>
+//             <p className={styles.cover_message}>{t("main_page.cover_message")}</p>
+//             <button
+//             className={styles.close_settings_window_button}
+//             onClick={closeSettingsWindow}
+//             >
+//                 {t("main_page.close_settings_window")}
+//             </button>
+//         </div>
+//     );
+// };

src-ui/app/main_page/MainPage.module.scss

@@ -8,7 +8,7 @@
     position: relative;
 }
 
-.main_window_cover {
+.main_page_cover {
     position: absolute;
     top: 0;
     right: 0;

src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.module.scss

@@ -1,5 +1,5 @@
 .container {
-    height: var(--main_window_topbar_height);
+    height: var(--main_page_topbar_height);
     background-color: var(--dark_850_color);
     display: flex;
     justify-content: center;

src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx

@@ -8,7 +8,7 @@ export const MessageContainer = ({ messages, status, category, created_at }) =>
     const is_translated_exist = messages.translated.length >= 1;
     const is_pending = status === "pending";
     const is_sent_message = category === "sent";
-    const category_text = is_sent_message ? t("main_window.textbox_tab_sent") : t("main_window.textbox_tab_received");
+    const category_text = is_sent_message ? t("main_page.textbox_tab_sent") : t("main_page.textbox_tab_received");
 
     const message_type_class_name = clsx({
         [styles.sent_message]: is_sent_message,

src-ui/app/main_page/main_section/top_bar/TopBar.module.scss

@@ -1,5 +1,5 @@
 .container {
-    height: var(--main_window_topbar_height);
+    height: var(--main_page_topbar_height);
     display: flex;
     justify-content: space-between;
     align-items: center;

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

@@ -1,18 +1,18 @@
 import clsx from "clsx";
 import styles from "./SidebarCompactModeButton.module.scss";
 
-import { useMainWindowCompactModeStatus } from "@store";
+import { useMainPageCompactModeStatus } from "@store";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 
 export const SidebarCompactModeButton = () => {
-    const { updateMainWindowCompactModeStatus, currentMainWindowCompactModeStatus } = useMainWindowCompactModeStatus();
+    const { updateMainPageCompactModeStatus, currentMainPageCompactModeStatus } = useMainPageCompactModeStatus();
 
     const toggleCompactMode = () => {
-        updateMainWindowCompactModeStatus(!currentMainWindowCompactModeStatus);
+        updateMainPageCompactModeStatus(!currentMainPageCompactModeStatus);
     };
 
     const class_names = clsx(styles["arrow_left_svg"], {
-        [styles["reverse"]]: currentMainWindowCompactModeStatus
+        [styles["reverse"]]: currentMainPageCompactModeStatus
     });
 
     return (

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

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 
 import styles from "./SidebarSection.module.scss";
-import { useMainWindowCompactModeStatus } from "@store";
+import { useMainPageCompactModeStatus } from "@store";
 
 import { Logo } from "./logo/Logo";
 import { MainFunctionSwitch } from "./main_function_switch/MainFunctionSwitch";
@@ -9,16 +9,16 @@ import { LanguageSettings } from "./language_settings/LanguageSettings";
 import { OpenSettings } from "./open_settings/OpenSettings";
 
 export const SidebarSection = () => {
-    const { currentMainWindowCompactModeStatus } = useMainWindowCompactModeStatus();
+    const { currentMainPageCompactModeStatus } = useMainPageCompactModeStatus();
     const container_class_name = clsx(styles["container"], {
-        [styles["is_compact_mode"]]: currentMainWindowCompactModeStatus
+        [styles["is_compact_mode"]]: currentMainPageCompactModeStatus
     });
 
     return (
         <div className={container_class_name}>
             <Logo />
             <MainFunctionSwitch />
-            {!currentMainWindowCompactModeStatus && <LanguageSettings />}
+            {!currentMainPageCompactModeStatus && <LanguageSettings />}
             <OpenSettings />
         </div>
     );

src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx

@@ -75,7 +75,7 @@ const PresetContainer = () => {
     };
 
     const your_language_settings = {
-        title: t("main_window.your_language"),
+        title: t("main_page.your_language"),
         is_opened: currentIsOpenedLanguageSelector.your_language,
         onClickFunction: () => handleLanguageSelectorClick("your_language"),
         TurnedOnSvgComponent: <MicSvg />,
@@ -83,7 +83,7 @@ const PresetContainer = () => {
     };
 
     const target_language_settings = {
-        title: t("main_window.target_language"),
+        title: t("main_page.target_language"),
         is_opened: currentIsOpenedLanguageSelector.target_language,
         onClickFunction: () => handleLanguageSelectorClick("target_language"),
         TurnedOnSvgComponent: <HeadphonesSvg />,

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

@@ -11,8 +11,8 @@ export const LanguageSwapButton = () => {
     const { t } = useTranslation();
 
     const label = isHovered
-        ? t("main_window.swap_button_label")
-        : t("main_window.translate_each_other_label");
+        ? t("main_page.swap_button_label")
+        : t("main_page.translate_each_other_label");
 
     const labelClassName = clsx(styles["label"], {
         [styles["is_hovered"]]: isHovered

src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx

@@ -19,7 +19,7 @@ export const TranslatorSelectorOpenButton = () => {
     return (
         <div className={styles.container}>
             <div className={styles.translator_selector_button} onClick={openTranslatorSelector}>
-                <p className={styles.label}>{t("main_window.translator")}</p>
+                <p className={styles.label}>{t("main_page.translator")}</p>
                 <p className={styles.label}>{currentTranslator?.translator_name}</p>
             </div>
             {currentIsOpenedTranslatorSelector && <TranslatorSelector />}

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

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

src-ui/app/main_page/sidebar_section/logo/Logo.module.scss

@@ -1,5 +1,5 @@
 .container {
-    height: var(--main_window_topbar_height);
+    height: var(--main_page_topbar_height);
     display: flex;
     justify-content: center;
     align-items: center;

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 { useMainWindowCompactModeStatus } from "@store";
+import { useMainPageCompactModeStatus } from "@store";
 
 import { useMainFunction } from "@logics/useMainFunction";
 
@@ -23,28 +23,28 @@ export const MainFunctionSwitch = () => {
     const switch_items = [
         {
             switch_id: "translation",
-            label: t("main_window.translation"),
+            label: t("main_page.translation"),
             SvgComponent: TranslationSvg,
             currentState: currentTranslationStatus,
             toggleFunction: toggleTranslation,
         },
         {
             switch_id: "transcription_send",
-            label: t("main_window.transcription_send"),
+            label: t("main_page.transcription_send"),
             SvgComponent: MicSvg,
             currentState: currentTranscriptionSendStatus,
             toggleFunction: toggleTranscriptionSend,
         },
         {
             switch_id: "transcription_receive",
-            label: t("main_window.transcription_receive"),
+            label: t("main_page.transcription_receive"),
             SvgComponent: HeadphonesSvg,
             currentState: currentTranscriptionReceiveStatus,
             toggleFunction: toggleTranscriptionReceive,
         },
         {
             switch_id: "foreground",
-            label: t("main_window.foreground"),
+            label: t("main_page.foreground"),
             SvgComponent: ForegroundSvg,
             currentState: currentForegroundStatus,
             toggleFunction: toggleForeground,
@@ -74,10 +74,10 @@ export const SwitchContainer = ({ switchLabel, switch_id, children, currentState
     const [is_hovered, setIsHovered] = useState(false);
     const [is_mouse_down, setIsMouseDown] = useState(false);
 
-    const { currentMainWindowCompactModeStatus } = useMainWindowCompactModeStatus();
+    const { currentMainPageCompactModeStatus } = useMainPageCompactModeStatus();
 
     const getClassNames = (baseClass) => clsx(baseClass, {
-        [styles.is_compact_mode]: currentMainWindowCompactModeStatus,
+        [styles.is_compact_mode]: currentMainPageCompactModeStatus,
         [styles.is_active]: (currentState.data === true),
         [styles.is_loading]: (currentState.state === "loading"),
         [styles.is_hovered]: is_hovered,