[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.

index.html

@@ -9,6 +9,6 @@
 
     <body>
         <div id="root"></div>
-        <script type="module" src="./src-ui/windows/main_window/index.jsx"></script>
+        <script type="module" src="./src-ui/app/index.jsx"></script>
     </body>
 </html>

locales/en.json

@@ -1,5 +1,5 @@
 {
-    "main_window": {
+    "main_page": {
         "translation": "Translation",
         "transcription_send": "Voice2Chatbox",
         "transcription_receive": "Speaker2Log",
@@ -71,7 +71,7 @@
         "display_duration": "Display duration",
         "fadeout_duration": "Fadeout duration"
     },
-    "config_window": {
+    "config_page": {
         "config_title": "Settings",
         "compact_mode": "Compact Mode",
         "version": "version {{version}}",
@@ -119,7 +119,7 @@
         "ui_language": {
             "label": "UI Language"
         },
-        "to_restore_main_window_geometry": {
+        "to_restore_main_page_geometry": {
             "label": "Remember The Main Window Position",
             "desc": "Restore the position and size of the previous window upon startup."
         },

locales/ja.json

@@ -1,5 +1,5 @@
 {
-    "main_window": {
+    "main_page": {
         "translation": "翻訳",
         "transcription_send": "音声認識（マイク）",
         "transcription_receive": "音声認識（スピーカー）",
@@ -69,7 +69,7 @@
         "display_duration": "表示時間",
         "fadeout_duration": "フェードアウト時間"
     },
-    "config_window": {
+    "config_page": {
         "config_title": "設定",
         "compact_mode": "コンパクトモード",
         "version": "バージョン {{version}}",
@@ -114,7 +114,7 @@
         "ui_language": {
             "label": "UIの言語 / UI Language"
         },
-        "to_restore_main_window_geometry": {
+        "to_restore_main_page_geometry": {
             "label": "メイン画面の位置を記憶する",
             "desc": "起動時、前回の画面の位置とサイズを復元します。"
         },

locales/ko.json

@@ -1,5 +1,5 @@
 {
-    "main_window": {
+    "main_page": {
         "translation": "번역",
         "transcription_send": "음성인식 (마이크)",
         "transcription_receive": "음성인식 (스피커)",
@@ -54,7 +54,7 @@
         "title_target_language": "상대방의 언어",
         "go_back_button": "돌아가기"
     },
-    "config_window": {
+    "config_page": {
         "config_title": "설정",
         "compact_mode": "컴팩트 모드",
         "version": "버전 {{version}}",
@@ -100,7 +100,7 @@
         "ui_language": {
             "label": "UI 언어 / UI Language"
         },
-        "to_restore_main_window_geometry": {
+        "to_restore_main_page_geometry": {
             "label": "메인 화면 위치 기억",
             "desc": "시작 시 이전 화면의 위치와 크기를 복원합니다."
         },

locales/zh-Hant.json

@@ -1,5 +1,5 @@
 {
-    "main_window": {
+    "main_page": {
         "translation": "翻譯",
         "transcription_send": "麥克風轉文字",
         "transcription_receive": "喇叭轉文字",
@@ -70,7 +70,7 @@
         "display_duration": "顯示持續時間",
         "fadeout_duration": "淡出持續時間"
     },
-    "config_window": {
+    "config_page": {
         "config_title": "設定",
         "compact_mode": "精簡模式",
         "version": "版本 {{version}}",
@@ -117,7 +117,7 @@
         "ui_language": {
             "label": "介面語言"
         },
-        "to_restore_main_window_geometry": {
+        "to_restore_main_page_geometry": {
             "label": "記住主視窗位置",
             "desc": "啟動時恢復上次視窗的位置和大小。"
         },

src-tauri/Cargo.toml

@@ -11,7 +11,7 @@ edition = "2021"
 tauri-build = { version = "1", features = [] }
 
 [dependencies]
-tauri = { version = "1", features = [ "window-set-decorations", "window-set-always-on-top", "window-create", "window-close", "shell-sidecar", "shell-open", "devtools"] }
+tauri = { version = "1", features = [ "window-set-decorations", "window-set-always-on-top", "shell-sidecar", "shell-open", "devtools"] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 

src-tauri/tauri.conf.json

@@ -13,8 +13,6 @@
     "allowlist": {
       "all": false,
       "window": {
-        "create": true,
-        "close": true,
         "setAlwaysOnTop": true,
         "setDecorations": true
     },

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