+
+ }
+
+ );
+};
+
+const Contents = () => {
+ const { currentIsSoftwareUpdating } = useIsSoftwareUpdating();
+ return (
+ <>
+
+
+ :
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/ConfigPage.module.scss b/src-ui/app/config_page/ConfigPage.module.scss
new file mode 100644
index 00000000..28d2fd0e
--- /dev/null
+++ b/src-ui/app/config_page/ConfigPage.module.scss
@@ -0,0 +1,34 @@
+.page {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ overflow: hidden;
+}
+
+.container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ background-color: var(--dark_900_color);
+ overflow: hidden;
+ position: relative;
+}
+
+.main_container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ padding-top: var(--config_page_topbar_height);
+}
+
+.software_version {
+ position: absolute;
+ bottom: 0.8rem;
+ left: 1.2rem;
+ font-size: 1.2rem;
+ color: var(--dark_400_color);
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/SettingSection.jsx b/src-ui/app/config_page/setting_section/SettingSection.jsx
new file mode 100644
index 00000000..b70b7763
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/SettingSection.jsx
@@ -0,0 +1,28 @@
+import { useRef, useLayoutEffect, useEffect } from "react";
+
+import styles from "./SettingSection.module.scss";
+import { SettingBox } from "./setting_box/SettingBox";
+import { store, useStore_SelectedConfigTabId } from "@store";
+import { useSettingBoxScrollPosition } from "@logics_configs";
+
+export const SettingSection = () => {
+ const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
+ const { resetScrollPosition } = useSettingBoxScrollPosition();
+ const scrollContainerRef = useRef(null);
+
+ useLayoutEffect(() => {
+ store.setting_box_scroll_container = scrollContainerRef;
+ }, []);
+
+ useEffect(() => {
+ resetScrollPosition();
+ }, [currentSelectedConfigTabId.data]);
+
+ return (
+
+
+
+
+ {version_label}
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/SettingSection.module.scss b/src-ui/app/config_page/setting_section/SettingSection.module.scss
new file mode 100644
index 00000000..2ed9e9e6
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/SettingSection.module.scss
@@ -0,0 +1,9 @@
+.scroll_container {
+ width: 100%;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.container {
+ margin: 0rem 4rem 16rem 0.6rem;
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
new file mode 100644
index 00000000..eba09ff7
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
@@ -0,0 +1,40 @@
+import { useStore_SelectedConfigTabId } from "@store";
+
+import {
+ Device,
+ Appearance,
+ Translation,
+ Transcription,
+ Others,
+ AdvancedSettings,
+ Vr,
+ Supporters,
+ AboutVrct,
+} from "@setting_box";
+
+export const SettingBox = () => {
+ const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
+ switch (currentSelectedConfigTabId.data) {
+ case "device":
+ return
+
+
+
+ );
+});
+
+_Entry.displayName = "_Entry";
+
+export { _Entry };
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss
new file mode 100644
index 00000000..c9744de6
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss
@@ -0,0 +1,24 @@
+.entry_container {
+ width: 100%;
+}
+
+.entry_wrapper {
+ width: 10rem;
+ height: 100%;
+ padding: 0.6rem;
+ background-color: var(--dark_875_color);
+ border: 0.1rem solid var(--dark_750_color);
+ border-radius: 0.4rem;
+}
+
+.entry_input_area {
+ width: 100%;
+ height: 100%;
+ font-size: 1.4rem;
+ resize: none;
+ color: var(--dark_basic_text_color);
+ &.is_disabled {
+ color: var(--dark_500_color);
+ pointer-events: none;
+ }
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.jsx
new file mode 100644
index 00000000..d85fce2a
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.jsx
@@ -0,0 +1,11 @@
+import styles from "./ActionButton.module.scss";
+
+export const ActionButton = ({IconComponent, onclickFunction}) => {
+ return (
+
+ props.onChange(e)}
+ />
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.module.scss
new file mode 100644
index 00000000..116feab4
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.module.scss
@@ -0,0 +1,15 @@
+.button_wrapper {
+ padding: 1.6rem;
+ border-radius: 0.4rem;
+ &:hover {
+ background-color: var(--dark_825_color);
+ }
+ &:active {
+ background-color: var(--dark_900_color);
+ }
+}
+
+.button_svg {
+ width: 2.4rem;
+ color: var(--dark_400_color);
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx
new file mode 100644
index 00000000..e462998c
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx
@@ -0,0 +1,72 @@
+import styles from "./DeeplAuthKey.module.scss";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import CircularProgress from "@mui/material/CircularProgress";
+import ExternalLink from "@images/external_link.svg?react";
+import { _Entry } from "../_atoms/_entry/_Entry";
+import { useState, useRef } from "react";
+import { useEffect } from "react";
+
+export const DeeplAuthKey = (props) => {
+ const { t } = useTranslation();
+ const [is_editable, seIsEditable] = useState(false);
+ const entryRef = useRef(null);
+
+ const revealEditAuthKey = () => {
+ seIsEditable(true);
+ entryRef.current.focus();
+ };
+
+ const onchangeEntryAuthKey = (e) => {
+ props.onChangeFunction(e.target.value);
+ };
+ const saveAuthKey = () => {
+ props.saveFunction();
+ };
+
+ useEffect(() => {
+ if (props.variable === "" || props.variable === null) {
+ seIsEditable(true);
+ }
+ }, [props.variable]);
+
+ const is_disabled = props.state === "pending";
+
+ const save_button_class_names = clsx(styles.save_button, {
+ [styles.is_disabled]: is_disabled
+ });
+
+ return (
+
+
+ );
+};
+
+
+export const OpenWebpage_DeeplAuthKey = () => {
+ const { t } = useTranslation();
+ return (
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss
new file mode 100644
index 00000000..915f300c
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss
@@ -0,0 +1,101 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+ flex-shrink: 0;
+}
+
+.entry_section_wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+ position: relative;
+}
+
+.entry_edit_cover {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ border-radius: 0.4rem;
+ background-color: (#00000044);
+ backdrop-filter: blur(4rem);
+ border: solid 0.1rem var(--dark_700_color);
+ &:hover {
+ background-color: (#00000088);
+ }
+ &:active {
+ backdrop-filter: blur(1.4rem);
+ }
+}
+
+.edit_button {
+ padding: 0.8rem 1.2rem;
+ color: var(--dark_basic_text_color);
+ height: 100%;
+ width: 100%;
+ font-size: 1.4rem;
+ text-align: center;
+}
+
+.save_button {
+ padding: 0.8rem 1.2rem;
+ background-color: var(--primary_600_color);
+ border-radius: 0.4rem;
+ text-align: center;
+ flex-shrink: 0;
+ min-width: 5.4rem;
+ &:hover {
+ background-color: var(--primary_500_color);
+ }
+ &:active {
+ background-color: var(--primary_700_color);
+ }
+ &.is_disabled {
+ pointer-events: none;
+ background-color: var(--primary_800_color);
+ }
+}
+
+.save_button_label {
+ color: var(--dark_basic_text_color);
+ font-size: 1.4rem;
+}
+
+.open_webpage_button_wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.open_webpage_button {
+ padding: 0.6rem 2.8rem;
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.4rem;
+ cursor: pointer;
+ flex-shrink: 0;
+ &:hover {
+ background-color: var(--dark_825_color);
+ }
+ &:active {
+ background-color: var(--dark_900_color);
+ }
+}
+
+.open_webpage_text {
+ font-size: 1.2rem;
+ color: var(--dark_basic_text_color);
+}
+
+.external_link_svg {
+ color: var(--dark_500_color);
+ width: 1.6rem;
+ flex-shrink: 0;
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.jsx
new file mode 100644
index 00000000..6ec51fb1
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.jsx
@@ -0,0 +1,81 @@
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import CircularProgress from "@mui/material/CircularProgress";
+import styles from "./DownloadModels.module.scss";
+import {
+ RadioButton,
+ // DownloadModels,
+} from "../index";
+export const DownloadModels = (props) => {
+ const options = props.options.map(item => ({
+ ...item,
+ disabled: !item.is_downloaded
+ }));
+
+ return (
+ <>
+
+ <_Entry ref={entryRef} width="30rem" onChange={onchangeEntryAuthKey} ui_variable={props.variable} is_disabled={is_disabled}/>
+
+ {is_editable
+ ? null
+ :
+
+
+
+
+ }
+
+ // {props.models.map((option) => (
+ //
+ );
+};
+
+const ModelSelector = ({option, ...props}) => {
+ const { t } = useTranslation();
+ const [circular_color, setCircularColor] = useState("");
+ const [circular_color_2, setCircularColor2] = useState("");
+ useEffect(() => {
+ const circular_color = getComputedStyle(document.documentElement).getPropertyValue("--dark_600_color");
+ setCircularColor(circular_color.trim());
+ const circular_color_2 = getComputedStyle(document.documentElement).getPropertyValue("--primary_300_color");
+ setCircularColor2(circular_color_2.trim());
+ }, []);
+
+
+ const renderContent = () => {
+ const circular_progress = Math.floor(option.progress / 10) * 10;
+
+ switch (true) {
+ case option.progress !== null:
+ return (
+ <>
+ {`${Math.round(option.progress)}%`}
+ + ); + case option.is_pending: + return{renderContent()}
;
+};
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.module.scss
new file mode 100644
index 00000000..aa17a737
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.module.scss
@@ -0,0 +1,32 @@
+@import "@scss_mixins";
+
+.download_container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ max-width: 8rem;
+}
+
+.download_button {
+ pointer-events: auto;
+ background-color: var(--dark_800_color);
+ padding: 0.8rem;
+ flex-shrink: 0;
+ &:hover {
+ background-color: var(--dark_750_color);
+ }
+ &:active {
+ background-color: var(--dark_800_color);
+ }
+}
+.download_button_label {
+ font-size: 1.2rem;
+ color: var(--dark_basic_text_color);
+}
+
+.progress_label {
+ position: absolute;
+ font-size: 1rem;
+ color: var(--dark_basic_text_color);
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
new file mode 100644
index 00000000..423de2ef
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
@@ -0,0 +1,76 @@
+import styles from "./DropdownMenu.module.scss";
+import clsx from "clsx";
+import ArrowLeftSvg from "@images/arrow_left.svg?react";
+import { useStore_IsOpenedDropdownMenu } from "@store";
+
+export const DropdownMenu = (props) => {
+ const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
+
+ const toggleDropdownMenu = () => {
+ if (currentIsOpenedDropdownMenu.data === props.dropdown_id) {
+ updateIsOpenedDropdownMenu("");
+ } else {
+ if (props.openListFunction !== undefined) props.openListFunction();
+ updateIsOpenedDropdownMenu(props.dropdown_id);
+ }
+ };
+
+ const selectValue = (key) => {
+ updateIsOpenedDropdownMenu("");
+ props.selectFunction({
+ dropdown_id: props.dropdown_id,
+ selected_id: key,
+ });
+ };
+
+ const dropdown_content_wrapper_class_name = clsx(styles["dropdown_content_wrapper"], {
+ [styles.is_opened]: (currentIsOpenedDropdownMenu.data === props.dropdown_id) ? true : false,
+ [styles.is_disabled]: props.is_disabled,
+ });
+
+ const dropdown_toggle_button_class_name = clsx(styles["dropdown_toggle_button"], {
+ [styles.is_pending]: (props.state === "pending") ? true : false,
+ [styles.is_disabled]: props.is_disabled,
+ });
+
+ const arrow_class_names = clsx(styles["arrow_left_svg"], {
+ [styles.is_opened]: (currentIsOpenedDropdownMenu.data === props.dropdown_id) ? true : false
+ });
+
+ const getSelectedText = () => {
+ if (props.state !== "ok") return;
+ if (props.list[props.selected_id] === undefined) return props.selected_id; // [Fix me]
+
+ return props.list[props.selected_id];
+ };
+ const list = (props.list === undefined) ? {} : props.list;
+
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.module.scss
new file mode 100644
index 00000000..386ee592
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.module.scss
@@ -0,0 +1,97 @@
+@import "@scss_mixins";
+
+.container {
+ position: relative;
+}
+
+.dropdown_toggle_button {
+ position: relative;
+ background-color: var(--dark_950_color);
+ min-width: 20rem;
+ padding: 0.8rem 1.4rem;
+ cursor: pointer;
+ border-radius: 0.4rem;
+ &:hover {
+ background-color: var(--dark_925_color);
+ }
+ &:active {
+ background-color: var(--dark_975_color);
+ }
+ &.is_pending {
+ pointer-events: none;
+ }
+ &.is_disabled {
+ pointer-events: none;
+ .dropdown_selected_text, .arrow_left_svg {
+ color: var(--dark_550_color);
+ }
+ }
+}
+
+.dropdown_selected_text {
+ font-size: 1.4rem;
+ padding-right: 2.8rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.dropdown_content_wrapper {
+ display: none;
+ position: absolute;
+ top: 100%; // Position it below the toggle button
+ right: 0;
+ min-width: 20rem;
+ z-index: 1;
+ &.is_opened {
+ display: block;
+ }
+ &.is_disabled {
+ pointer-events: none;
+ .value_text {
+ color: var(--dark_550_color);
+ }
+ }
+}
+
+.dropdown_content {
+ background-color: var(--dark_900_color);
+ border: 0.1rem solid var(--dark_600_color);
+ display: flex;
+ flex-direction: column;
+ gap: 0.1rem;
+ white-space: nowrap;
+ max-height: 20rem;
+ overflow-y: scroll;
+}
+
+.value_button {
+ background-color: var(--dark_875_color);
+ padding: 1.2rem;
+ cursor: pointer;
+ &:hover {
+ background-color: var(--dark_800_color);
+ }
+ &:active {
+ background-color: var(--dark_900_color);
+ }
+}
+
+.value_text {
+ font-size: 1.4rem;
+}
+
+.loader {
+ @include loader(2rem, 0.2rem, right, 0);
+}
+
+.arrow_left_svg {
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translate(-50%, -50%) rotate(-90deg);
+ width: 1.4rem;
+ &.is_opened {
+ transform: translate(-50%, -50%) rotate(90deg);
+ }
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/entry/Entry.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/entry/Entry.jsx
new file mode 100644
index 00000000..a9908c9d
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/entry/Entry.jsx
@@ -0,0 +1,10 @@
+import styles from "./Entry.module.scss";
+import { _Entry } from "../_atoms/_entry/_Entry";
+
+export const Entry = (props) => {
+ return (
+
+ {(props.state === "pending")
+ ?
+ Loading...
+ :{getSelectedText()}
+ } + {(props.state === "pending") + ? + :
+
+
+ {(props.state === "ok")
+ ? Object.entries(list).map(([key, value]) => {
+ return (
+
+ selectValue(key)}>
+
+ );
+ })
+ : null
+ }
+ {value}
+
+ <_Entry {...props} />
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/entry/Entry.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/entry/Entry.module.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/index.js b/src-ui/app/config_page/setting_section/setting_box/_components/index.js
new file mode 100644
index 00000000..7ead1049
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/index.js
@@ -0,0 +1,12 @@
+export { ActionButton } from "./action_button/ActionButton";
+export { DeeplAuthKey, OpenWebpage_DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
+export { DropdownMenu } from "./dropdown_menu/DropdownMenu";
+export { Entry } from "./entry/Entry";
+export { LabelComponent } from "./label_component/LabelComponent";
+export { RadioButton } from "./radio_button/RadioButton";
+export { SectionLabelComponent } from "./section_label_component/SectionLabelComponent";
+export { Slider } from "./slider/Slider";
+export { SwitchBox } from "./switch_box/SwitchBox";
+export { ThresholdComponent } from "./threshold_component/ThresholdComponent";
+export { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";
+export { DownloadModels } from "./download_models/DownloadModels";
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.jsx
new file mode 100644
index 00000000..a4a520db
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.jsx
@@ -0,0 +1,13 @@
+import styles from "./LabelComponent.module.scss";
+
+export const LabelComponent = (props) => {
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.module.scss
new file mode 100644
index 00000000..c49055a8
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.module.scss
@@ -0,0 +1,22 @@
+.label_component {
+ display: flex;
+ flex-direction: column;
+ gap: 0.4rem;
+ // flex-shrink: 0;
+}
+
+.label {
+ font-size: 1.6rem;
+ font-weight: 400;
+ color: var(--dark_basic_text_color);
+ white-space: nowrap;
+ width: max-content;
+}
+
+.desc {
+ font-size: 1.4rem;
+ font-weight: 300;
+ color: var(--dark_500_color);
+ max-width: 38rem;
+ overflow-wrap: break-word;
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx
new file mode 100644
index 00000000..c0278a07
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx
@@ -0,0 +1,42 @@
+import styles from "./RadioButton.module.scss";
+import clsx from "clsx";
+
+export const RadioButton = (props) => {
+ const containerClass = clsx(styles.container, {
+ [styles.column]: props.column === true,
+ });
+
+ return (
+ {props.label}
+ {props.desc + ?{props.desc}
+ : null + } +
+ {props.checked_variable.state === "pending" && }
+ {props.options.map((option) => {
+ const radioWrapperClass = clsx(styles.radio_button_container, {
+ [styles.is_selected]: props.checked_variable.data === option.id,
+ });
+
+ const labelClass = clsx(styles.radio_button_wrapper, {
+ [styles.is_selected]: props.checked_variable.data === option.id,
+ [styles.disabled]: option.disabled === true || props.checked_variable.state === "pending",
+ });
+
+ return (
+
+ );
+};
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss
new file mode 100644
index 00000000..b8ed8515
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss
@@ -0,0 +1,74 @@
+@import "@scss_mixins";
+
+.container {
+ display: flex;
+ gap: 0.4rem;
+ position: relative;
+ flex-shrink: 0;
+ flex-wrap: wrap;
+ max-width: 70%;
+ &.column {
+ flex-direction: column;
+ }
+}
+
+.radio_button_container {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 2rem;
+ position: relative;
+}
+
+
+.radio_button_wrapper {
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
+ cursor: pointer;
+ gap: 1rem;
+ padding: 0.6rem 0.8rem;
+ border-radius: 0.4rem;
+ &:hover {
+ background-color: var(--dark_850_color);
+ }
+ &:active {
+ background-color: var(--dark_925_color);
+ }
+ &.is_selected {
+ pointer-events: none;
+ }
+ &.disabled {
+ pointer-events: none;
+ color: var(--dark_600_color);
+ }
+}
+
+.radio_button_input {
+ appearance: none;
+ margin: 0;
+ width: 2rem;
+ height: 2rem;
+ border: 0.3rem solid var(--dark_600_color);
+ border-radius: 50%;
+ transition: border-color .1s ease, border-width .1s ease;
+ flex-shrink: 0;
+ cursor: inherit;
+ &:checked {
+ border-color: var(--primary_400_color);
+ border-width: 0.6rem;
+ }
+ &:disabled {
+ border-color: var(--dark_825_color);
+ }
+}
+
+.radio_button_label {
+ font-size: 1.4rem;
+ font-weight: 400;
+ flex-shrink: 0;
+}
+
+.loader {
+ @include loader(2rem, 0.2rem, left, -1.6rem);
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.jsx
new file mode 100644
index 00000000..7b79ebef
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.jsx
@@ -0,0 +1,11 @@
+import styles from "./SectionLabelComponent.module.scss";
+import clsx from "clsx";
+
+export const SectionLabelComponent = (props) => {
+ return (
+
+
+ {props.ChildComponent &&
+ );
+ })}
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.module.scss
new file mode 100644
index 00000000..93be3c4b
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.module.scss
@@ -0,0 +1,16 @@
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 2rem;
+ padding-bottom: 2rem;
+}
+.section_label {
+ font-size: 2rem;
+ flex-shrink: 0;
+}
+.section_line {
+ width: 100%;
+ height: 0.1rem;
+ background: linear-gradient(90deg, var(--dark_400_color) 0%, var(--dark_600_color) 35%, var(--dark_800_color) 100%);
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
new file mode 100644
index 00000000..3e896a59
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
@@ -0,0 +1,55 @@
+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) => {
+ return (
+
+ props.onchangeFunction(value)}
+ onChangeCommitted={(_e, value) => props.onchangeCommittedFunction ? props.onchangeCommittedFunction(value) : null}
+ marks={props.marks}
+ track={props.track}
+ orientation={props.orientation}
+ valueLabelFormat={`${props.valueLabelFormat ? props.valueLabelFormat : props.variable}`}
+ sx={{
+ color: "var(--dark_700_color)",
+ "& .MuiSlider-thumb": {
+ backgroundColor: "var(--primary_600_color)",
+ "&:hover, &.Mui-focusVisible, &.Mui-active": {
+ boxShadow: `0 0 0 0.8rem var(--primary_600_color_44)`,
+ },
+ "& .MuiSlider-valueLabel": {
+ fontSize: "1.4rem",
+ backgroundColor: "var(--dark_800_color)",
+ padding: "0.6rem 1rem",
+ lineHeight: "1.15",
+ // top: "-1.4rem",
+ // "&::before": {
+ // left: "30%",
+ // width: "1rem",
+ // height: "1rem",
+ // clipPath: "polygon(50% 0, 100% 100%, 0 100%)",
+ // },
+ },
+ },
+ "& .MuiSlider-markLabel": {
+ fontSize: "1.4rem",
+ color: "var(--dark_550_color)",
+ whiteSpace: "nowrap",
+ },
+ "& .MuiSlider-markLabelActive": {
+ color: "var(--primary_300_color)",
+ },
+ }}
+ />
+
+ );
+};
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.module.scss
new file mode 100644
index 00000000..79db6294
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.module.scss
@@ -0,0 +1,11 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ padding-left: 4rem;
+ &.no_padding {
+ padding-left: 0;
+ }
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.jsx
new file mode 100644
index 00000000..2d77a673
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.jsx
@@ -0,0 +1,44 @@
+import clsx from "clsx";
+import { useState } from "react";
+import styles from "./SwitchBox.module.scss";
+
+export const SwitchBox = (props) => {
+ const [is_hovered, setIsHovered] = useState(false);
+ const [is_mouse_down, setIsMouseDown] = useState(false);
+
+ const is_pending = (props.variable.state === "pending");
+
+ const getClassNames = (base_class) => clsx(base_class, {
+ [styles.is_active]: (props.variable.data === true),
+ [styles.is_pending]: is_pending,
+ [styles.is_hovered]: is_hovered,
+ [styles.is_mouse_down]: is_mouse_down,
+ });
+
+ const onMouseEnter = () => setIsHovered(true);
+ const onMouseLeave = () => setIsHovered(false);
+ const onMouseDown = () => setIsMouseDown(true);
+ const onMouseUp = () => setIsMouseDown(false);
+
+ const toggleFunction = () => {
+ props.toggleFunction();
+ };
+
+
+ return (
+
+
+ );
+};
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.module.scss
new file mode 100644
index 00000000..8f76c0b6
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.module.scss
@@ -0,0 +1,33 @@
+@import "@scss_mixins";
+
+.switchbox_container {
+ width: 100%;
+ display: flex;
+ justify-content: end;
+ align-items: center;
+ height: 2rem;
+}
+
+.switchbox_wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ padding: 2rem;
+ height: 100%;
+ flex-shrink: 0;
+ &.is_pending {
+ pointer-events: none;
+ }
+}
+
+.toggle_control {
+ @include toggle_control_styles;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.loader {
+ @include loader(2rem, 0.2rem, right, -4rem);
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/ThresholdComponent.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/ThresholdComponent.jsx
new file mode 100644
index 00000000..018f3845
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/ThresholdComponent.jsx
@@ -0,0 +1,136 @@
+import { useEffect, useState } from "react";
+import styles from "./ThresholdComponent.module.scss";
+import { SliderAndMeter } from "./slider_and_meter/SliderAndMeter";
+import { ThresholdEntry } from "./threshold_entry/ThresholdEntry";
+import { VolumeCheckButton } from "./volume_check_button/VolumeCheckButton";
+import { useVolume } from "@logics_common";
+import MicSvg from "@images/mic.svg?react";
+import HeadphonesSvg from "@images/headphones.svg?react";
+import {
+ useMicThreshold,
+ useSpeakerThreshold,
+} from "@logics_configs";
+
+export const ThresholdComponent = (props) => {
+ return (
+
+
+
+
+ {is_pending && }
+
+
+ {props.id === "mic_threshold"
+ ?
+ );
+};
+
+const MicComponent = (props) => {
+ const {
+ currentMicThreshold,
+ setMicThreshold,
+ currentEnableAutomaticMicThreshold,
+ } = useMicThreshold();
+ const [ui_threshold, setUiThreshold] = useState(currentMicThreshold.data);
+ const {
+ volumeCheckStart_Mic,
+ volumeCheckStop_Mic,
+ currentMicThresholdCheckStatus,
+ } = useVolume();
+
+
+ useEffect(() => {
+ if (currentEnableAutomaticMicThreshold.data === true) {
+ setUiThreshold("Auto");
+ } else {
+ setUiThreshold(currentMicThreshold.data);
+ }
+ }, [currentMicThreshold.data, currentEnableAutomaticMicThreshold]);
+
+ const setUiThresholdFunction = (payload_ui_threshold) => {
+ setUiThreshold(payload_ui_threshold);
+ };
+ const setThresholdFunction = (payload_threshold) => {
+ setMicThreshold(payload_threshold);
+ };
+
+ const is_disable = currentEnableAutomaticMicThreshold.data === true ? true : false;
+
+ return (
+ <>
+
+
+ );
+};
+
+const ThresholdVolumeMeter_Mic = (props) => {
+ const { currentMicVolume } = useStore_MicVolume();
+
+ const { currentEnableAutomaticMicThreshold } = useMicThreshold();
+
+ const currentVolumeVariable = Math.min(currentMicVolume.data, props.max);
+ const volume_width_percentage = (currentVolumeVariable / props.max) * 100;
+
+ return (
+ <>
+
+ {props.id === "mic_threshold"
+ ?
+
+
+ );
+};
+
+const ThresholdEntry_Mic = (props) => {
+ const onChangeFunction = (e) => {
+ if (e.currentTarget.value === "") {
+ props.setThresholdFunction("0");
+ } else {
+ props.setThresholdFunction(e.currentTarget.value);
+ }
+ };
+
+ const class_names = clsx(styles.entry_input_area, {
+ [styles.is_disable]: props.is_disable
+ });
+
+ return (
+
+ );
+};
+
+const ThresholdEntry_Speaker = (props) => {
+ const onChangeFunction = (e) => {
+ if (e.currentTarget.value === "") {
+ props.setThresholdFunction("0");
+ } else {
+ props.setThresholdFunction(e.currentTarget.value);
+ }
+ };
+
+ const class_names = clsx(styles.entry_input_area, {
+ [styles.is_disable]: props.is_disable
+ });
+
+ return (
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss
new file mode 100644
index 00000000..929f8975
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss
@@ -0,0 +1,24 @@
+.container {
+
+}
+
+.entry_wrapper {
+ width: 6rem;
+ height: 100%;
+ padding: 0.6rem;
+ background-color: var(--dark_875_color);
+ border: 0.1rem solid var(--dark_750_color);
+ border-radius: 0.4rem;
+}
+
+.entry_input_area {
+ width: 100%;
+ height: 100%;
+ font-size: 1.4rem;
+ resize: none;
+ color: var(--dark_basic_text_color);
+ &.is_disable {
+ color: var(--dark_500_color);
+ pointer-events: none;
+ }
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.jsx
new file mode 100644
index 00000000..0f733b48
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.jsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import styles from "./VolumeCheckButton.module.scss";
+
+export const VolumeCheckButton = React.memo((props) => {
+ const { t } = useTranslation();
+ const getClassNames = (baseClass) => clsx(baseClass, {
+ [styles.is_active]: (props.isChecking?.data === true),
+ [styles.is_pending]: (props.isChecking.state === "pending"),
+ });
+
+ const toggleFunction = () => {
+ if (props.isChecking?.data === true) {
+ props.stopFunction();
+ } else if (props.isChecking?.data === false) {
+ props.startFunction();
+ }
+ };
+
+
+ return (
+
+ {props.id === "mic_threshold"
+ ?
+
+
+ );
+});
+
+
+VolumeCheckButton.displayName = "VolumeCheckButton";
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.module.scss
new file mode 100644
index 00000000..302ab71e
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.module.scss
@@ -0,0 +1,45 @@
+.button {
+ width: 100%;
+ background-color: var(--dark_800_color);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0.8rem 1rem;
+ border-radius: 0.4rem;
+ gap: 0.4rem;
+ cursor: pointer;
+ &.is_active {
+ background-color: var(--primary_500_color);
+ &:hover {
+ background-color: var(--primary_450_color);
+ }
+ &:active {
+ background-color: var(--primary_550_color);
+ }
+ }
+ &.is_pending {
+ background-color: var(--dark_850_color);
+ pointer-events: none;
+ .button_svg, .button_text {
+ color: var(--dark_500_color);
+ }
+ }
+
+
+ &:hover {
+ background-color: var(--dark_775_color);
+ }
+ &:active {
+ background-color: var(--dark_850_color);
+ }
+}
+
+.button_svg {
+ width: 1.4rem;
+ color: var(--dark_350_color);
+}
+
+.button_text {
+ font-size: 1.2rem;
+ color: var(--dark_basic_text_color);
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.jsx
new file mode 100644
index 00000000..d2a4a62d
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.jsx
@@ -0,0 +1,153 @@
+import styles from "./WordFilter.module.scss";
+import { _Entry } from "../_atoms/_entry/_Entry";
+import { useState } from "react";
+import { useStore_IsOpenedMicWordFilterList } from "@store";
+import { useMicWordFilterList } from "@logics_configs";
+
+export const WordFilter = () => {
+ const [input_value, setInputValue] = useState("");
+ const { currentMicWordFilterList, updateMicWordFilterList, setMicWordFilterList } = useMicWordFilterList();
+ const { currentIsOpenedMicWordFilterList, updateIsOpenedMicWordFilterList } = useStore_IsOpenedMicWordFilterList();
+
+ const extractRedoableFalseItem = (updated_list) => {
+ return updated_list.filter(item => {
+ if (item.is_redoable === false) return true;
+ });
+ };
+
+ const onChangeEntry = (e) => {
+ setInputValue(e.target.value);
+ };
+
+ const addWords = () => {
+ if (input_value === undefined) return;
+ updateMicWordFilterList((prev_list) => {
+ const input_value_array = input_value.split(",");
+ let updated_list = [...prev_list.data];
+ for (let each_input_value of input_value_array) {
+ each_input_value = each_input_value.trim();
+ if (each_input_value) {
+ const target_item = updated_list.find((item) => item.value === each_input_value);
+ if (target_item === undefined) {
+ // Add
+ updated_list = [...updated_list, { value: each_input_value, is_redoable: false }];
+ } else {
+ // Update
+ updated_list = updated_list.map(item =>
+ item.value === each_input_value ? { ...item, is_redoable: false } : item
+ );
+ }
+ }
+ }
+ const updated_list_for_restoring = extractRedoableFalseItem(updated_list).map((d) => d.value);
+ setMicWordFilterList(updated_list_for_restoring);
+ return updated_list;
+ });
+
+ updateIsOpenedMicWordFilterList(true);
+ setInputValue("");
+ };
+
+
+ const updateRedoable = (target_item_value, is_redoable) => {
+ updateMicWordFilterList((prev_list) => {
+ const updated_list = prev_list.data.map(item =>
+ item.value === target_item_value ? { ...item, is_redoable: is_redoable } : item
+ );
+ const updated_list_for_restoring = extractRedoableFalseItem(updated_list).map((d) => d.value);
+ setMicWordFilterList(updated_list_for_restoring);
+ return updated_list;
+ });
+ };
+
+ const deleteAction = (target_item_value) => {
+ updateRedoable(target_item_value, true);
+ };
+
+ const redoAction = (target_item_value) => {
+ updateRedoable(target_item_value, false);
+ };
+
+
+ return (
+
+
+ {t("config_page.device.check_volume")}
+
+ { currentIsOpenedMicWordFilterList.data &&
+
+ );
+};
+
+import DeleteSvg from "@images/cancel.svg?react";
+import RedoSvg from "@images/redo.svg?react";
+import clsx from "clsx";
+const WordFilterItem = (props) => {
+
+
+ const item_wrapper_class_names = clsx(styles["item_wrapper"], {
+ [styles["is_redoable"]]: props.is_redoable
+ });
+
+ const item_text_class_names = clsx(styles["item_text"], {
+ [styles["is_redoable"]]: props.is_redoable
+ });
+
+ const target_item_value = props.value;
+
+ return (
+
+ {
+ currentMicWordFilterList.data.map((item, index) => {
+ return ;
+ })
+ }
+
+ }
+
+ <_Entry width="30rem" onChange={onChangeEntry} ui_variable={input_value}/>
+
+
+
+
+ );
+};
+
+import { useTranslation } from "react-i18next";
+
+import ArrowLeftSvg from "@images/arrow_left.svg?react";
+export const WordFilterListToggleComponent = (props) => {
+ const { t } = useTranslation();
+ const { currentIsOpenedMicWordFilterList, updateIsOpenedMicWordFilterList } = useStore_IsOpenedMicWordFilterList();
+ const { currentMicWordFilterList } = useMicWordFilterList();
+
+
+ const svg_class_names = clsx(styles["arrow_left_svg"], {
+ [styles.to_down]: !currentIsOpenedMicWordFilterList.data,
+ [styles.to_up]: currentIsOpenedMicWordFilterList.data
+ });
+
+ const OnclickFunction = () => {
+ updateIsOpenedMicWordFilterList(!currentIsOpenedMicWordFilterList.data);
+ };
+
+ const word_filter_list_length = currentMicWordFilterList.data.filter(item => item.is_redoable === false).length;
+
+
+ return (
+ {target_item_value}
+ {props.is_redoable + ? + + : + + } +
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss
new file mode 100644
index 00000000..74e42ef5
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss
@@ -0,0 +1,125 @@
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ gap: 2rem;
+}
+
+
+.list_section_wrapper {
+ display: flex;
+ flex-wrap: wrap;
+ width: 100%;
+ gap: 0.6rem;
+ overflow-y: auto;
+ max-height: 20rem;
+ padding-right: 2rem;
+}
+
+.item_wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 0.4rem;
+ background-color: var(--dark_800_color);
+ padding: 0.2rem 0.2rem 0.2rem 1rem;
+ border-radius: 0.4rem;
+ &.is_redoable {
+ background-color: var(--dark_850_color);
+ }
+}
+.item_text {
+ font-size: 1.4rem;
+ font-weight: 300;
+ color: var(--dark_basic_text_color);
+ &.is_redoable {
+ text-decoration: line-through;
+ }
+}
+
+.action_button {
+ border-radius: 0.4rem;
+ &:hover {
+ background-color: var(--dark_750_color);
+ }
+ &:active {
+ background-color: var(--dark_850_color);
+ }
+ &.delete {
+ padding: 0.2rem;
+ }
+ &.redo {
+ padding: 0.6rem;
+ }
+}
+
+.delete_svg {
+ width: 2.4rem;
+ color: #bb4448;
+}
+
+.redo_svg {
+ width: 1.6rem;
+ color: var(--dark_500_color);
+}
+
+
+
+
+.entry_section_wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 2rem;
+}
+
+.add_button {
+ padding: 0.8rem 1.2rem;
+ background-color: var(--primary_600_color);
+ color: var(--dark_basic_text_color);
+ font-size: 1.4rem;
+ border-radius: 0.4rem;
+ text-align: center;
+ flex-shrink: 0;
+ &:hover {
+ background-color: var(--primary_500_color);
+ }
+ &:active {
+ background-color: var(--primary_700_color);
+ }
+}
+
+
+
+.toggle_button_container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 2rem;
+}
+
+.words_count_text {
+ font-size: 1.6rem;
+}
+
+.toggle_button_wrapper {
+ padding: 1.6rem;
+ border-radius: 0.4rem;
+ &:hover {
+ background-color: var(--dark_825_color);
+ }
+ &:active {
+ background-color: var(--dark_900_color);
+ }
+}
+
+.arrow_left_svg {
+ width: 2.4rem;
+ &.to_down {
+ transform: rotate(-90deg);
+ }
+ &.to_up {
+ transform: rotate(90deg);
+ }
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
new file mode 100644
index 00000000..5f42276f
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
@@ -0,0 +1,118 @@
+import clsx from "clsx";
+
+import styles from "./Templates.module.scss";
+import { useStore_IsOpenedDropdownMenu, useStore_IsBreakPoint } from "@store";
+import {
+ LabelComponent,
+ DropdownMenu,
+ Slider,
+ SwitchBox,
+ Entry,
+ RadioButton,
+ OpenWebpage_DeeplAuthKey,
+ DeeplAuthKey,
+ ActionButton,
+ WordFilter,
+ WordFilterListToggleComponent,
+ DownloadModels,
+} from "../_components/";
+import { Checkbox } from "@common_components";
+
+const LabeledContainer = ({ children, label, desc, custom_class_name }) => (
+ {t("config_page.transcription.mic_word_filter.count_desc", {count: word_filter_list_length} )}
+ +
+
+);
+
+export const useOnMouseLeaveDropdownMenu = () => {
+ const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
+
+ const onMouseLeaveFunction = () => {
+ updateIsOpenedDropdownMenu("");
+ };
+
+ return { onMouseLeaveFunction };
+};
+
+export const DropdownMenuContainer = (props) => {
+ const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
+ return (
+
+
+ );
+};
+
+const CommonContainer = ({ Component, ...props }) => {
+ const { currentIsBreakPoint } = useStore_IsBreakPoint();
+
+ const container_class = clsx(styles.container, {
+ [styles.is_break_point]: props.add_break_point ?? currentIsBreakPoint.data,
+ });
+
+ return (
+
+
+ );
+};
+
+export const ActionButtonContainer = (props) => (
+
+
+
+
+);
+
+export const DownloadModelsContainer = (props) => (
+
+
+
+
+
+
+
+
+ );
+};
+
+import dev_x_icon from "@images/about_vrct/dev_x_icon.png";
+import dev_github_icon from "@images/about_vrct/dev_github_icon.png";
+import contributors_x_icon from "@images/about_vrct/contributors_x_icon.png";
+import contributors_github_icon from "@images/about_vrct/contributors_github_icon.png";
+
+import project_link_booth from "@images/about_vrct/project_link_booth.png";
+import project_link_documents from "@images/about_vrct/project_link_documents.png";
+import project_link_vrct_github from "@images/about_vrct/project_link_vrct_github.png";
+import project_link_contact_us from "@images/about_vrct/project_link_contact_us.png";
+
+const about_vrct_links = {
+ dev_misya_x: { img: dev_x_icon, href: "https://twitter.com/misya_ai" },
+ dev_misya_github: { img: dev_github_icon, href: "https://github.com/misyaguziya" },
+ dev_shiina_x: { img: dev_x_icon, href: "https://twitter.com/Shiina_12siy" },
+
+ project_link_booth: { img: project_link_booth, href: "https://misyaguziya.booth.pm/items/5155325" },
+ project_link_documents: { img: project_link_documents, href: "https://mzsoftware.notion.site/VRCT-Documents-be79b7a165f64442ad8f326d86c22246" },
+ project_link_vrct_github: { img: project_link_vrct_github, href: "https://github.com/misyaguziya/VRCT" },
+ project_link_contact_us: { img: project_link_contact_us, href: "https://docs.google.com/forms/d/e/1FAIpQLSei-xoydOY60ivXqhOjaTzNN8PiBQIDcNhzfy6cw2sjYkcg_g/viewform" },
+
+ contributors_done_san_x: { img: contributors_x_icon, href: "https://twitter.com/done_vrc" },
+ contributors_iya_x: { img: contributors_x_icon, href: "https://twitter.com/IYAA_HHHH" },
+ contributors_rera_x: { img: contributors_x_icon, href: "https://twitter.com/rerassi" },
+ contributors_rera_github: { img: contributors_github_icon, href: "https://github.com/soumt-r" },
+ contributors_poposuke_x: { img: contributors_x_icon, href: "https://twitter.com/sig_popo" },
+ contributors_kumaguma_x: { img: contributors_x_icon, href: "https://twitter.com/K_kumaguma_A" },
+};
+
+const OpenLinkContainer = ({className, href_id}) => {
+ const href = about_vrct_links[href_id].href;
+ const img = about_vrct_links[href_id].img;
+ return (
+
+ {/* for adjust size to their parent component's width. */}
+
+ 
+
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+ 
+
+
+ 
+ 
+
+
+
+ 
+ 
+ {
+ currentUiLanguage.data === "ja"
+ ? 
+ : 
+ }
+
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/PosterShowcaseContents.module.scss b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/PosterShowcaseContents.module.scss
new file mode 100644
index 00000000..c7b760b7
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/PosterShowcaseContents.module.scss
@@ -0,0 +1,6 @@
+.container {
+ display: flex;
+ justify-content: space-between;
+ align-items: start;
+ gap: 2rem;
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx
new file mode 100644
index 00000000..e51c8ea5
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx
@@ -0,0 +1,93 @@
+import clsx from "clsx";
+import styles from "./PosterShowcaseWorldsContents.module.scss";
+import { useStore_PosterShowcaseWorldPageIndex } from "@store";
+const images = import.meta.glob("@images/about_vrct/showcased_worlds/*.{png,jpg,jpeg,svg}", { eager: true });
+
+const getImageByFileName = (file_name) => {
+ const imagePath = Object.keys(images).find((path) => path.endsWith(file_name + ".png"));
+ return imagePath ? images[imagePath]?.default : null;
+};
+
+import poster_showcase_worlds_settings from "./poster_showcase_worlds_settings";
+import { chunkArray } from "@utils";
+
+export const PosterShowcaseWorldsContents = () => {
+ const { currentPosterShowcaseWorldPageIndex } = useStore_PosterShowcaseWorldPageIndex();
+ const poster_showcase_world_images = poster_showcase_worlds_settings.map((setting) => ({
+ img: getImageByFileName(setting.image_file_name),
+ x_post_num: setting.x_post_num
+ }));
+
+ const chunked_poster_showcase_world_images = chunkArray(poster_showcase_world_images, 8);
+ const target_poster_showcase_world_images = chunked_poster_showcase_world_images[currentPosterShowcaseWorldPageIndex.data];
+
+
+ return (
+
+
+
+ );
+};
+
+import chat_white_square from "@images/chato_white_square.png";
+import { useEffect } from "react";
+import { randomIntMinMax } from "@utils";
+const PosterShowcaseWorldsPagination = ({ page_length }) => {
+ const { currentPosterShowcaseWorldPageIndex, updatePosterShowcaseWorldPageIndex } = useStore_PosterShowcaseWorldPageIndex();
+
+ useEffect(() => {
+ updatePosterShowcaseWorldPageIndex(randomIntMinMax(page_length -1));
+ },[page_length]);
+
+ const setPage = (index) => {
+ updatePosterShowcaseWorldPageIndex(index);
+ };
+
+ const getClassNames = (index, baseClass) => clsx(baseClass, {
+ [styles.is_active]: (currentPosterShowcaseWorldPageIndex.data === index),
+ });
+
+ return (
+
+ {target_poster_showcase_world_images.map((poster, index) => {
+ const class_names = clsx(styles.poster_showcase_world_wrapper, {
+ [styles.clickable]: (poster.x_post_num !== null)
+ });
+
+ const content = (
+
+
+ 
+
+ );
+ if (poster.x_post_num !== null) {
+ return (
+
+ {content}
+
+ );
+ } else {
+ return (
+
+ {content}
+
+ );
+ }
+ })}
+
+ {[...Array(page_length).keys()].map((index) => {
+ return (
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.module.scss b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.module.scss
new file mode 100644
index 00000000..fa819d64
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.module.scss
@@ -0,0 +1,126 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ gap: 1rem;
+ justify-content: space-between;
+}
+$image_height: 2.8rem;
+$y_padding: 0.4rem;
+$image_height_gap: 0.4rem;
+.poster_showcase_world_container {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ gap: $image_height_gap;
+ height: calc( (($image_height + ($y_padding*2)) * 8) + ($image_height_gap * (8 - 1)) );
+}
+.poster_showcase_world_wrapper {
+ display: flex;
+ padding: $y_padding 0.6rem $y_padding 0.8rem;
+ border-radius: 0.4rem 0 0 0.4rem;
+ &.clickable {
+ cursor: pointer;
+ &:hover {
+ background-color: var(--dark_850_color);
+ }
+ &:active {
+ background-color: var(--dark_925_color);
+ }
+ }
+
+}
+.poster_showcase_world_img {
+ height: $image_height;
+}
+
+.pagination_container {
+ display: flex;
+ justify-content: space-between;
+ gap: 6%;
+ margin: 0 2.6rem;
+}
+
+$animation_duration: .1s;
+.pagination_box {
+ width: 100%;
+ cursor: pointer;
+ &:active .pagination_chato_img {
+ animation: tremble_animation $animation_duration ease-out;
+ }
+ &:active.is_active .pagination_chato_img {
+ transform: translate(-50%, -50%) rotate(-22deg);
+ }
+ &.is_active .pagination_chato_img {
+ top: 48%;
+ animation: rotate_animation $animation_duration ease-out;
+ }
+ &:hover {
+ & .pagination_chato_img {
+ top: 108%;
+ }
+ &.is_active .pagination_chato_img {
+ animation: tremble_animation $animation_duration ease-out;
+ }
+ & .pagination_num {
+ color: var(--dark_400_color);
+ }
+ }
+}
+
+.indicator_box {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+}
+
+.indicator {
+ width: 100%;
+ height: 0.2rem;
+ background-color: var(--dark_825_color);
+ &.is_active {
+ background-color: var(--primary_400_color);
+ }
+}
+
+.pagination_num {
+ font-size: 1.8rem;
+ padding: 1rem;
+ color: var(--dark_600_color);
+ &.is_active {
+ color: var(--primary_300_color);
+ }
+}
+
+.chato_box {
+ position: relative;
+ width: 100%;
+ height: 6rem;
+ overflow: hidden;
+}
+
+.pagination_chato_img {
+ position: absolute;
+ top: 200%;
+ left: 51%;
+ transform: translate(-50%, -50%) rotate(22deg);
+ width: 2.8rem;
+ transition: top $animation_duration ease-out;
+}
+@keyframes rotate_animation {
+ 0% {
+ transform: translate(-50%, -50%) rotate(22deg);
+ }
+ 100% {
+ transform: translate(-50%, -50%) rotate(360deg + 22deg);
+ }
+}
+
+@keyframes tremble_animation {
+ 0% { left: 51%; }
+ 25% { left: 55%; }
+ 50% { left: 45%; }
+ 75% { left: 48%; }
+ 100% { left: 51%; }
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/poster_showcase_worlds_settings.js b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/poster_showcase_worlds_settings.js
new file mode 100644
index 00000000..74e15af6
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/poster_showcase_worlds_settings.js
@@ -0,0 +1,95 @@
+const poster_showcase_worlds_settings = [
+ // トサカひよ
+ { image_file_name: "kokekkopiyopiyo", x_post_num: "1779076974369276014" },
+
+ // MiuJepang
+ { image_file_name: "ippaidou", x_post_num: "1787801976354513319" },
+ { image_file_name: "nihongokurabu", x_post_num: "1779004631936614893" },
+ { image_file_name: "language_exchange_tervern", x_post_num: "1779749425923150317" },
+ { image_file_name: "japanese_culture_osenbeito", x_post_num: "1788522972409721137" },
+ { image_file_name: "silakan_datang_ke_rumahku", x_post_num: "1788522607631056941" },
+ { image_file_name: "uj_club", x_post_num: "1780791654196388201" },
+ { image_file_name: "sushi_stand_guruguru", x_post_num: "1788523302404952218" },
+ { image_file_name: "sushi_guru_annex", x_post_num: "1825426749770932457" },
+ { image_file_name: "una_yosh", x_post_num: "1820329216598311065" },
+ { image_file_name: "cam", x_post_num: "1825427064985686138" },
+ { image_file_name: "language_exchange_park", x_post_num: "1825806455322324993" },
+
+ // poposuke_sig
+ { image_file_name: "usanezumi_shrine2", x_post_num: "1781224020383506649" },
+
+ // KUROINU_YOUHEI
+ { image_file_name: "kuroinu_work_room", x_post_num: "1779750007564112146" },
+
+ // いちや_ICHIYA
+ { image_file_name: "ehon_no_heikousekai", x_post_num: "1843891361478783425" },
+ { image_file_name: "ehon_no_heikousekai_1st_anniv", x_post_num: "1842088383746875535" },
+ { image_file_name: "ehon_no_heikousekai_jimusho", x_post_num: "1780792306976850285" },
+ { image_file_name: "ikoiba", x_post_num: "1782723006923780580" },
+ { image_file_name: "kimodameshi", x_post_num: "1781224391692714133" },
+ { image_file_name: "parallel_collar", x_post_num: "1820693442105934068" },
+ { image_file_name: "yoru_color", x_post_num: "1842088701599396075" },
+
+ // HayaTikaze
+ { image_file_name: "study_japanese_world_japanichijou", x_post_num: "1781539871829766550" },
+
+ // aji_3
+ { image_file_name: "yuttari_eikaiwa", x_post_num: "1779002892999078046" },
+
+ // 八葉そるち
+ { image_file_name: "re_yatuha_room", x_post_num: "1779830390435590196" },
+
+ // chakamoto
+ { image_file_name: "chakachaka_multipurpose_room", x_post_num: "1818107831289295065" },
+
+ // MloYolM （よるむ）
+ { image_file_name: "cafe_cian", x_post_num: "1787802552907739504" },
+
+ // ミラクル・オルカ
+ { image_file_name: "mamehinata_dogrun", x_post_num: "1782723423179100471" },
+
+ // いんく（Eenkoo）
+ { image_file_name: "tyuuniti_kouryuukai", x_post_num: "1818109101731422617" },
+
+ // 1ban_meno
+ { image_file_name: "bar_asagao", x_post_num: "1788523857642758370" },
+
+ // 沈黙静寂
+ { image_file_name: "monogatari_meetup", x_post_num: "1781538415789674976" },
+
+ // tommie_500
+ { image_file_name: "stretch_club_starting_from_minus", x_post_num: "1825048889550102597" },
+
+ // MiMi_Sorahana # VRC日韓交流会 (KRJPEX.1355)
+ { image_file_name: "kr_jp_exchange", x_post_num: "1820328755950473668" },
+
+ // Ein（アイン）
+ { image_file_name: "smokerz_guild_v2", x_post_num: "1825049450190127187" },
+
+ // KokiM1018
+ { image_file_name: "poker_room_elysion", x_post_num: "1818880695344980208" },
+
+ // NEET ENGINEER
+ { image_file_name: "japan_street", x_post_num: "1818881593114861924" },
+
+ // RIKU_VR
+ { image_file_name: "celestial_blooms", x_post_num: "1820694531568001061" },
+
+ // ღKAEDEಇ
+ { image_file_name: "omoshiro_kotoba_asobi_game", x_post_num: "1825806909343199700" },
+ { image_file_name: "chill_sleep_room_03", x_post_num: "1842741645231677506" },
+ { image_file_name: "chill_sleep_room_04", x_post_num: "1842742135042555906" },
+
+ // アスタルテア
+ { image_file_name: "oto_no_shitatei", x_post_num: "1831575615520305619" },
+
+ // Sayascape
+ { image_file_name: "sayasuke_hotel", x_post_num: "1843537673224630740" },
+
+ // ふながし
+ { image_file_name: "su", x_post_num: "1843537207401058558" },
+
+ // さや-sayasoft
+ { image_file_name: "saya_town", x_post_num: null },
+];
+export default poster_showcase_worlds_settings;
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.jsx b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.jsx
new file mode 100644
index 00000000..6cb5ffe1
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.jsx
@@ -0,0 +1,69 @@
+import clsx from "clsx";
+import styles from "./PostersContents.module.scss";
+import { useStore_UiLanguage } from "@store";
+
+import { useStore_VrctPosterIndex } from "@store";
+import ArrowLeftSvg from "@images/arrow_left.svg?react";
+
+import iya_vrct_poster_ja from "@images/about_vrct/vrct_posters/iya_vrct_poster_ja.png";
+import iya_vrct_poster_en from "@images/about_vrct/vrct_posters/iya_vrct_poster_en.png";
+import iya_vrct_poster_cn from "@images/about_vrct/vrct_posters/iya_vrct_poster_cn.png";
+import iya_vrct_poster_ko from "@images/about_vrct/vrct_posters/iya_vrct_poster_ko.png";
+import iya_vrct_manga_ja from "@images/about_vrct/vrct_posters/iya_vrct_manga_ja.png";
+import iya_vrct_manga_en from "@images/about_vrct/vrct_posters/iya_vrct_manga_en.png";
+import iya_vrct_manga_ko from "@images/about_vrct/vrct_posters/iya_vrct_manga_ko.png";
+
+const poster_images = [
+ { img: iya_vrct_poster_ja, poster_type: "poster" },
+ { img: iya_vrct_poster_en, poster_type: "poster" },
+ { img: iya_vrct_poster_cn, poster_type: "poster" },
+ { img: iya_vrct_poster_ko, poster_type: "poster" },
+ { img: iya_vrct_manga_ja, poster_type: "manga" },
+ { img: iya_vrct_manga_en, poster_type: "manga" },
+ { img: iya_vrct_manga_ko, poster_type: "manga" },
+];
+
+import poster_images_authors_ja from "@images/about_vrct/vrct_posters/authors/poster_images_authors_ja.png";
+import poster_images_authors_en from "@images/about_vrct/vrct_posters/authors/poster_images_authors_en.png";
+import poster_images_authors_m_ja from "@images/about_vrct/vrct_posters/authors/poster_images_authors_m_ja.png";
+import poster_images_authors_m_en from "@images/about_vrct/vrct_posters/authors/poster_images_authors_m_en.png";
+
+export const PostersContents = () => {
+ const { currentVrctPosterIndex, updateVrctPosterIndex } = useStore_VrctPosterIndex();
+ const { currentUiLanguage } = useStore_UiLanguage();
+
+
+ const updateIndex = (delta) => {
+ const newIndex = (currentVrctPosterIndex.data + delta + poster_images.length) % poster_images.length;
+ updateVrctPosterIndex(newIndex);
+ };
+
+ const current_poster = poster_images[currentVrctPosterIndex.data];
+ const current_poster_authors_img_ja = (current_poster.poster_type === "poster") ? poster_images_authors_ja : poster_images_authors_m_ja;
+ const current_poster_authors_img_en = (current_poster.poster_type === "poster") ? poster_images_authors_en : poster_images_authors_m_en;
+
+ return (
+ setPage(index)}>
+
+ );
+ })}
+
+ 
+
+
+
+
+ {index + 1}
+
+ 
+ : 
+ }
+
+ );
+};
diff --git a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.module.scss b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.module.scss
new file mode 100644
index 00000000..739fe78d
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.module.scss
@@ -0,0 +1,46 @@
+.poster_pagination_container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+.poster_pagination_wrapper {
+ display: flex;
+}
+
+$poster_img_width: 18rem;
+.poster_img {
+ width: $poster_img_width;
+}
+
+$poster_pagination_button_width: 4.6rem;
+.poster_pagination_button {
+ width: $poster_pagination_button_width;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: var(--dark_700_color);
+ &:hover {
+ background-color: var(--dark_900_color);
+ }
+ &:active {
+ background-color: var(--dark_925_color);
+ }
+ &.poster_prev {
+ border-radius: 0.8rem 0 0 0.8rem;
+ }
+ &.poster_next {
+ border-radius: 0 0.8rem 0.8rem 0;
+ }
+}
+
+.poster_pagination_svg {
+ width: 3.2rem;
+ &.poster_next_svg {
+ transform: rotate(180deg);
+ }
+}
+
+.poster_authors_img {
+ width: $poster_img_width + $poster_pagination_button_width;
+}
diff --git a/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx
new file mode 100644
index 00000000..9c1ab116
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx
@@ -0,0 +1,116 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styles from "./AdvancedSettings.module.scss";
+
+import { useOpenFolder } from "@logics_common";
+import {
+ useOscIpAddress,
+ useOscPort,
+} from "@logics_configs";
+
+import {
+ ActionButtonContainer,
+ EntryContainer,
+} from "../_templates/Templates";
+
+
+import OpenFolderSvg from "@images/open_folder.svg?react";
+import HelpSvg from "@images/help.svg?react";
+
+export const AdvancedSettings = () => {
+ return (
+ <>
+
+
+ 
+
+
+ {
+ currentUiLanguage.data === "ja"
+ ?
+
+ );
+};
+
+const Speaker_Container = () => {
+ const { t } = useTranslation();
+ const { currentEnableAutoSpeakerSelect, toggleEnableAutoSpeakerSelect } = useEnableAutoSpeakerSelect();
+ const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice();
+ const { currentSpeakerDeviceList } = useSpeakerDeviceList();
+ const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
+ const { currentEnableAutomaticSpeakerThreshold, toggleEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
+
+ const selectFunction = (selected_data) => {
+ setSelectedSpeakerDevice(selected_data.selected_id);
+ };
+
+ const is_disabled_selector = currentEnableAutoSpeakerSelect.data === true || currentEnableAutoSpeakerSelect.data === "pending";
+
+ const getLabels = () => {
+ if (currentEnableAutomaticSpeakerThreshold.data === true) {
+ return {
+ label: t("config_page.device.speaker_dynamic_energy_threshold.label_for_automatic"),
+ desc: t("config_page.device.speaker_dynamic_energy_threshold.desc_for_automatic"),
+ };
+ } else {
+ return {
+ label: t("config_page.device.speaker_dynamic_energy_threshold.label_for_manual"),
+ desc: t("config_page.device.speaker_dynamic_energy_threshold.desc_for_manual"),
+ };
+ }
+
+ };
+
+ const { currentIsBreakPoint } = useStore_IsBreakPoint();
+ const device_container_class = clsx(styles.device_container, {
+ [styles.is_break_point]: currentIsBreakPoint.data,
+ });
+
+ return (
+
+
+
+
+
+
+
+
+ {t("config_page.device.mic_host_device.label_auto_select")}
+
+
+
+
+
+ {t("config_page.device.mic_host_device.label_host")}
+
+
+ {t("config_page.device.mic_host_device.label_device")}
+
+
+
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss b/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
new file mode 100644
index 00000000..65fab80a
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
@@ -0,0 +1,103 @@
+.mic_container {
+ display: flex;
+ flex-direction: column;
+ border-bottom: solid 0.1rem var(--dark_800_color);
+ padding-bottom: 1rem;
+}
+
+.speaker_container {
+ padding-top: 0rem;
+}
+
+.device_container {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
+ padding: 2rem;
+ margin-bottom: 0rem;
+ &.is_break_point {
+ flex-direction: column;
+ gap: 2rem;
+ align-items: start;
+ & .device_contents {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ padding-left: 0rem;
+ }
+ }
+}
+
+.threshold_container {
+ padding: 2rem;
+}
+
+
+
+.threshold_container {
+ display: flex;
+ width: 100%;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ gap: 2rem;
+}
+
+.threshold_switch_section {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
+ flex-shrink: 0;
+}
+
+.threshold_section {
+ width: 100%;
+}
+
+
+
+
+.device_label {
+ font-size: 1.8rem;
+ color: var(--dark_basic_text_color);
+}
+
+.device_contents {
+ display: flex;
+ width: 100%;
+ justify-content: end;
+ padding-left: 2rem;
+ gap: 2rem;
+}
+
+.device_auto_select_wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 1.2rem;
+}
+
+.device_dropdown_wrapper {
+ display: flex;
+ flex-direction: row;
+ gap: 2.8rem;
+}
+
+.device_dropdown {
+ display: flex;
+ flex-direction: column;
+ gap: 0.6rem;
+ white-space: nowrap;
+ max-width: 24rem;
+ &.is_disabled {
+ pointer-events: none;
+ }
+}
+
+.device_secondary_label {
+ padding-left: 0.2rem;
+ font-size: 1.4rem;
+ color: var(--dark_500_color);
+ white-space: nowrap;
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/index.js b/src-ui/app/config_page/setting_section/setting_box/index.js
new file mode 100644
index 00000000..489f63ca
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/index.js
@@ -0,0 +1,9 @@
+export { Device } from "./device/Device";
+export { Appearance, MessageLogUiScalingContainer } from "./appearance/Appearance";
+export { Translation } from "./translation/Translation";
+export { Transcription } from "./transcription/Transcription";
+export { Others, VrcMicMuteSyncContainer } from "./others/Others";
+export { AdvancedSettings } from "./advanced_settings/AdvancedSettings";
+export { Vr } from "./vr/Vr";
+export { AboutVrct } from "./about_vrct/AboutVrct";
+export { Supporters } from "./supporters/Supporters";
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
new file mode 100644
index 00000000..f1e9a251
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
@@ -0,0 +1,133 @@
+import { useTranslation } from "react-i18next";
+import styles from "./Others.module.scss";
+
+import { useOpenFolder } from "@logics_common";
+import {
+ useEnableAutoClearMessageInputBox,
+ useEnableSendOnlyTranslatedMessages,
+ useEnableAutoExportMessageLogs,
+ useEnableVrcMicMuteSync,
+ useEnableSendMessageToVrc,
+ useEnableSendReceivedMessageToVrc,
+} from "@logics_configs";
+
+import {
+ CheckboxContainer,
+} from "../_templates/Templates";
+
+import {
+ LabelComponent,
+ ActionButton,
+ SectionLabelComponent,
+} from "../_components/";
+import { Checkbox } from "@common_components";
+
+import OpenFolderSvg from "@images/open_folder.svg?react";
+
+export const Others = () => {
+ return (
+
+
+
+
+
+
+
+
+ {t("config_page.device.speaker_device.label_auto_select")}
+
+
+ {t("config_page.device.mic_host_device.label_device")}
+
+
+
+
+
+
+
+
+ );
+};
+
+const AutoClearMessageInputBoxContainer = () => {
+ const { t } = useTranslation();
+ const { currentEnableAutoClearMessageInputBox, toggleEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
+
+ return (
+
+
+
+
+
+
+ );
+};
+export const VrcMicMuteSyncContainer = () => {
+ const { t } = useTranslation();
+ const { currentEnableVrcMicMuteSync, toggleEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
+
+ return (
+
+
+
+
+ );
+};
+
+const SupportUsContainer = () => {
+ return (
+
+ 
+
+ );
+};
+
+const getRandomImage = (images) => {
+ const random_index = Math.floor(Math.random() * images.length);
+ return images[random_index];
+};
+
+export const SupportersContainer = () => {
+
+ return (
+
+
+
+
+ 
+
+
+ 日本語 / Mainly Japanese
+
+ 
+
+ Mainly English
+
+ 
+
+ );
+};
+
+const ProgressBar = () => {
+ const [is_active, setIsActive] = useState(false);
+
+ useEffect(() => {
+ setIsActive(true);
+ const interval = setInterval(() => {
+ setIsActive(false);
+ setTimeout(() => setIsActive(true), 50);
+ }, SHUFFLE_INTERVAL_TIME);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ return (
+
+ );
+};
+
+const SupportsWrapper = () => {
+ const { saveScrollPosition, restoreScrollPosition } = useSettingBoxScrollPosition();
+ const [imagesState, setImagesState] = useState({
+ mogu_images: [],
+ mochi_images: [],
+ fuwa_images: [],
+ basic_images: [],
+ former_images: [],
+ and_you_images: [],
+ chato_images: [],
+ });
+
+ const shuffleImages = () => {
+ saveScrollPosition();
+ const getCategoryImages = (start, count) => {
+ const category_images = supporters_filenames.slice(start, start + count);
+ return shuffleArray(category_images);
+ };
+
+ const randomChatoImages = shuffleArray(
+ Array.from({ length: mogu_count + mochi_count + fuwa_count + basic_count + former_count }, () =>
+ getRandomImage(chato_expressions_filenames)
+ )
+ );
+
+ setImagesState({
+ mogu_images: getCategoryImages(0, mogu_count),
+ mochi_images: getCategoryImages(mogu_count, mochi_count),
+ fuwa_images: getCategoryImages(mogu_count + mochi_count, fuwa_count),
+ basic_images: getCategoryImages(mogu_count + mochi_count + fuwa_count, basic_count),
+ former_images: getCategoryImages(mogu_count + mochi_count + fuwa_count + basic_count, former_count),
+ and_you_images: getCategoryImages(mogu_count + mochi_count + fuwa_count + basic_count + former_count, and_you_count),
+ chato_images: randomChatoImages,
+ });
+ setTimeout(() => restoreScrollPosition(), 0);
+ };
+
+ useEffect(() => {
+ shuffleImages();
+ const interval = setInterval(() => {
+ shuffleImages();
+ }, SHUFFLE_INTERVAL_TIME);
+
+ return () => clearInterval(interval);
+ }, []);
+
+
+ const getSupportersImageByFileName = (file_name) => {
+ const image_path = Object.keys(supporter_images).find((path) => path.endsWith(file_name + ".png"));
+ return image_path ? supporter_images[image_path]?.default : null;
+ };
+
+ const getChatoImageByFileName = (file_name) => {
+ const image_path = Object.keys(chato_expression_images).find((path) => path.endsWith(file_name + ".png"));
+ return image_path ? chato_expression_images[image_path]?.default : null;
+ };
+
+ const getRandomDelay = (min, max) => {
+ const random_value = Math.random() * (max - min) + min;
+ return `${random_value.toFixed(1)}s`;
+ };
+
+
+ const renderImages = (image_list, chato_list, options = {}) => {
+ return image_list.map((file_name, index) => {
+ const img_src = getSupportersImageByFileName(file_name);
+ const is_default_icon = default_icon_numbers.some((element) => file_name.endsWith(element));
+ const chato_expression_src = is_default_icon ? getChatoImageByFileName(chato_list[index]) : null;
+ const random_delay = getRandomDelay(0.1, 6);
+
+ return img_src ? (
+ {`VRCT3.0のアップデートに向けて、めちゃ大変な開発を支えてくれた "Early Supporters" です。\nThey are the 'Early Supporters' who supported us through the incredibly challenging development toward the VRCT3.0 update.`}
+{`みなさんのおかげで、みしゃ社長は布団で寝ることを許され(in開発室) しいなは喜び庭駆け回っています！！！ふわもちもぐもぐです！ありがとうございます。これからもまだまだ進化するVRCTをどうかよろしくお願いします！\nThanks to everyone, Misha has been granted the privilege of sleeping in a proper bed (in the development room), and Shiina is so happy, running around the yard! Fuwa-mochi-mogu-mogu! Thank you so much! We hope you'll continue to support the ever-evolving VRCT!`}
+
+ 
+ {chato_expression_src && (
+ 
+ )}
+ {options.is_and_you_icon ?
+ ) : null;
+ });
+ };
+
+ return (
+
+ {renderImages(imagesState.mogu_images, imagesState.chato_images, { class_name: styles.mogu_image })}
+ {renderImages(imagesState.mochi_images, imagesState.chato_images)}
+ {renderImages(imagesState.fuwa_images, imagesState.chato_images)}
+ {renderImages(imagesState.basic_images, imagesState.chato_images)}
+ {renderImages(imagesState.former_images, imagesState.chato_images)}
+
+ {renderImages(imagesState.and_you_images, imagesState.chato_images, { is_and_you_icon: true, class_name: styles.and_you_image })}
+
+
+ );
+};
+
+const AndYouIcon = () => {
+ return (
+ <>
+
+
+
+
+
+ FANBOX
+
+
+ );
+};
+
+
+const Mic_Container = () => {
+ const { t } = useTranslation();
+ return (
+
+
+ );
+};
+
+const MicRecordTimeout_Box = () => {
+ const { t } = useTranslation();
+ const [ui_variable, setUiVariable] = useState("");
+ const { currentMicRecordTimeout, setMicRecordTimeout } = useMicRecordTimeout();
+ const onChangeFunction = (e) => {
+ const value = e.currentTarget.value;
+ if (value === "") {
+ setUiVariable("");
+ } else {
+ setUiVariable(value);
+ setMicRecordTimeout(value);
+ }
+ };
+
+ useEffect(()=> {
+ setUiVariable(currentMicRecordTimeout.data);
+ }, [currentMicRecordTimeout]);
+
+ return (
+
+
+ );
+};
+
+const SpeakerRecordTimeout_Box = () => {
+ const { t } = useTranslation();
+ const [ui_variable, setUiVariable] = useState("");
+ const { currentSpeakerRecordTimeout, setSpeakerRecordTimeout } = useSpeakerRecordTimeout();
+ const onChangeFunction = (e) => {
+ const value = e.currentTarget.value;
+ if (value === "") {
+ setUiVariable("");
+ } else {
+ setUiVariable(value);
+ setSpeakerRecordTimeout(value);
+ }
+ };
+
+ useEffect(()=> {
+ setUiVariable(currentSpeakerRecordTimeout.data);
+ }, [currentSpeakerRecordTimeout]);
+
+ return (
+
+
+ );
+};
+
+const TranscriptionEngine_Box = () => {
+ const { t } = useTranslation();
+ const { currentSelectedTranscriptionEngine, setSelectedTranscriptionEngine } = useSelectedTranscriptionEngine();
+
+ return (
+
+
+ );
+};
+
+const OverlaySettingsContainer = ({
+ current_overlay_settings,
+ set_overlay_settings,
+ current_is_enabled_overlay,
+ toggle_is_enabled_overlay,
+ ui_configs,
+ default_ui_configs,
+ id
+}) => {
+
+ const { t } = useTranslation();
+ useEffect(() => {
+ setSettings(current_overlay_settings);
+ }, [current_overlay_settings]);
+
+ const [settings, setSettings] = useState(current_overlay_settings);
+ const [timeout_id, setTimeoutId] = useState(null);
+
+ const [is_opened_position_controller, setIsOpenedPositionController] = useState(true);
+ const togglePositionRotationController = () => {
+ setIsOpenedPositionController(!is_opened_position_controller);
+ };
+
+ const onchangeFunction = (key, value) => {
+ setSettings((prev) => ({ ...prev, [key]: value }));
+
+ if (timeout_id) clearTimeout(timeout_id);
+
+ const newTimeoutId = setTimeout(() => {
+ const new_data = { ...settings, [key]: value };
+ set_overlay_settings(new_data);
+ }, 50);
+
+ setTimeoutId(newTimeoutId);
+ };
+
+ const selectFunction = (key, value) => {
+ const new_data = { ...settings, [key]: value };
+ set_overlay_settings(new_data);
+ };
+
+
+ return (
+ <>
+
+
+
+ {is_opened_position_controller ? (
+
+ ) : (
+
+ )}
+
+ props.toggleFunction()}>
+
+ );
+};
+
+const PositionControls = ({settings, onchangeFunction, selectFunction, ui_configs, default_ui_configs}) => {
+ const { t } = useTranslation();
+
+ return (
+
+
+ {props.label_1}
+
+
+ {props.label_2}
+
+
+ );
+};
+
+const RotationControls = ({settings, onchangeFunction, selectFunction, default_ui_configs}) => {
+ const { t } = useTranslation();
+
+ return (
+
+ onchangeFunction("x_pos", value)}
+ />
+
+
+ {t("config_page.vr.x_position")}
+
+ onchangeFunction("y_pos", value)}
+ orientation="vertical"
+ />
+
+
+ {t("config_page.vr.y_position")}
+
+ onchangeFunction("z_pos", value)}
+ orientation="vertical"
+ />
+
+
+ {t("config_page.vr.z_position")}
+
+
+ );
+};
+
+const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
+ const { t } = useTranslation();
+
+ const ui_variable_opacity = (settings.opacity * 100).toFixed(0);
+ const ui_variable_ui_scaling = (settings.ui_scaling * 100).toFixed(0);
+
+ return(
+
+ onchangeFunction("x_rotation", -value)}
+ orientation="vertical"
+ />
+
+
+ {t("config_page.vr.x_rotation")}
+
+ onchangeFunction("y_rotation", value)}
+ />
+
+
+ {t("config_page.vr.y_rotation")}
+
+ onchangeFunction("z_rotation", value)}
+ orientation="vertical"
+ />
+
+
+ {t("config_page.vr.z_rotation")}
+
+
+ );
+};
+
+
+const CommonSettingsContainer = () => {
+ const { t } = useTranslation();
+ const { currentOverlayShowOnlyTranslatedMessages, toggleOverlayShowOnlyTranslatedMessages } = useOverlayShowOnlyTranslatedMessages();
+
+ return (
+
+ onchangeFunction("opacity", value / 100)}
+ />
+
+ + {t("config_page.vr.opacity")} +
+
+ onchangeFunction("ui_scaling", value / 100)}
+ />
+
+ + {t("config_page.vr.ui_scaling")} +
+
+ onchangeFunction("display_duration", value)}
+ />
+
+ {t("config_page.vr.display_duration")}
+
+ onchangeFunction("fadeout_duration", value)}
+ />
+
+ {t("config_page.vr.fadeout_duration")}
+
+
+ );
+};
+
+const ResetButton = ({onClickFunction}) => {
+ return (
+
+ );
+};
+
+import SquareSvg from "@images/square.svg?react";
+import TriangleSvg from "@images/triangle.svg?react";
+import { randomIntMinMax } from "@utils";
+
+const SendSampleTextToggleButton = () => {
+ const { t } = useTranslation();
+ const { sendTextToOverlay } = useSendTextToOverlay();
+ const [is_started, setIsStarted] = useState(false);
+
+ useEffect(() => {
+ let interval_id;
+
+ if (is_started) {
+ interval_id = setInterval(() => {
+ const text_data = Array.from(
+ { length: randomIntMinMax(1, 5) },
+ () => t("config_page.vr.sample_text_button.sample_text")
+ ).join(" ");
+ sendTextToOverlay(text_data);
+ }, 1000);
+ };
+
+ return () => {
+ if (interval_id) {
+ clearInterval(interval_id);
+ }
+ };
+ }, [is_started]);
+
+ const toggleFunction = () => {
+ setIsStarted(!is_started);
+ };
+
+ const label = is_started
+ ? t("config_page.vr.sample_text_button.stop")
+ : t("config_page.vr.sample_text_button.start");
+
+ return (
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
new file mode 100644
index 00000000..83dec71d
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
@@ -0,0 +1,295 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ padding: 2rem;
+ width: 100%;
+ gap: 4rem;
+}
+
+.wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ max-width: 56rem;
+ gap: 2rem;
+}
+
+.controller_type_switch {
+ margin-top: 2rem;
+ display: flex;
+ border: 0.1rem solid var(--dark_600_color);
+ border-radius: 0.4rem;
+ width: 80%;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ color: var(--dark_600_color);
+ &:hover {
+ color: var(--dark_400_color);
+ }
+}
+.controller_type_switcher {
+ width: 100%;
+ &.is_selected {
+ background-color: var(--dark_850_color);
+ }
+ &.is_selected .controller_switcher_label {
+ color: var(--dark_basic_text_color);
+ }
+}
+.controller_switcher_label {
+ padding: 1rem;
+ font-size: 1.6rem;
+}
+
+.position_rotation_controls_box {
+ margin-top: 8rem;
+ position: relative;
+ aspect-ratio: 1 / 1;
+ width: 36%;
+ max-width: 36rem;
+ transform: translate(-10%);
+}
+
+.sample_text_button_wrapper {
+ position: absolute;
+ bottom: 0;
+ left: -74%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+.sample_text_button {
+ background-color: var(--dark_850_color);
+ padding: 1.8rem;
+ border-radius: 50%;
+ &:hover {
+ background-color: var(--dark_800_color);
+ }
+ &:active {
+ background-color: var(--dark_925_color);
+ }
+ &.is_started {
+ background-color: var(--primary_600_color);
+ &:hover {
+ background-color: var(--primary_500_color);
+ }
+ &:active {
+ background-color: var(--primary_700_color);
+ }
+ }
+}
+.sample_text_button_triangle_svg, .sample_text_button_square_svg {
+ width: 2.4rem;
+}
+.sample_text_button_triangle_svg {
+ transform: translateX(10%) rotate(90deg);
+}
+.sample_text_button_label {
+ color: var(--dark_basic_text_color);
+ position: absolute;
+ left: 50%;
+ top: 110%;
+ // bottom: -2rem;
+ transform: translateX(-50%);
+ white-space: pre-wrap;
+ font-size: 1.2rem;
+ width: max-content;
+ text-align: center;
+}
+
+// .position_controls {
+// background-color: gray;
+// }
+
+// .position_wrapper {
+// background-color: gray;
+// }
+
+.slider_label {
+ font-size: 1.4rem;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ gap: 0.6rem;
+ white-space: nowrap;
+}
+.x_position_label {
+ position: absolute;
+ bottom: -4.6rem;
+ right: -46%;
+ justify-content: end;
+}
+.y_position_label {
+ position: absolute;
+ top: -44%;
+ left: 10%;
+ justify-content: start;
+}
+.z_position_label {
+ position: absolute;
+ top: 30%;
+ left: 80%;
+}
+
+.x_position_slider {
+ position: absolute;
+ bottom: 0;
+ left: 27%;
+ width: 100%;
+ height: 0%;
+}
+
+.y_position_slider {
+ position: absolute;
+ bottom: 27%;
+ left: 0;
+ width: 0%;
+ height: 100%;
+}
+
+.z_position_slider {
+ position: absolute;
+ bottom: 61%;
+ left: 61%;
+ transform: translate(50%,50%) rotate(45deg);
+ width: 0%;
+ height: 100%;
+}
+
+
+
+
+// .rotation_controls {
+// background-color: gray;
+// }
+
+// .rotation_wrapper {
+// background-color: gray;
+// }
+
+.x_rotation_label {
+ position: absolute;
+ top: -44%;
+ left: 10%;
+}
+.y_rotation_label {
+ position: absolute;
+ bottom: -4.6rem;
+ right: -46%;
+ justify-content: end;
+}
+.z_rotation_label {
+ position: absolute;
+ top: -10%;
+ right: -110%;
+}
+
+.x_rotation_slider {
+ position: absolute;
+ bottom: 27%;
+ left: 0;
+ width: 0%;
+ height: 100%;
+}
+
+.y_rotation_slider {
+ position: absolute;
+ bottom: 0;
+ left: 27%;
+ width: 100%;
+ height: 0%;
+}
+
+.z_rotation_slider {
+ position: absolute;
+ bottom: 80%;
+ left: 100%;
+ transform: translate(50%,50%) rotate(-45deg);
+ width: 0%;
+ height: 100%;
+}
+
+
+.slider_reset_button {
+ background-color: var(--dark_875_color);
+ padding: 0.6rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.4rem;
+ flex-shrink: 0;
+ &:hover {
+ background-color: var(--dark_825_color);
+ & .slider_reset_svg {
+ color: var(--dark_200_color);
+ }
+ }
+ &:active {
+ background-color: var(--dark_925_color);
+ }
+}
+
+.slider_reset_svg {
+ width: 1.4rem;
+ color: var(--dark_550_color);
+}
+
+
+
+.other_controls {
+ margin-top: 6rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 2rem;
+ width: 100%;
+}
+
+.other_controls_wrapper {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ position: relative;
+}
+.other_controls_slider {
+ // margin-left: 18rem;
+ // width: 60%;
+}
+
+.other_controls_slider_label {
+ // position: absolute;
+ font-size: 1.6rem;
+ flex-shrink: 0;
+ width: 30%;
+}
+
+.common_container {
+ width: 100%;
+}
+
+.common_label {
+ font-size: 1.4rem;
+}
+
+.restore_default_settings_button {
+ color: var(--dark_basic_text_color);
+ font-size: 1.2rem;
+ margin-top: 6rem;
+ padding: 0.8rem;
+ border-radius: 0.4rem;
+ &:hover {
+ background-color: var(--dark_775_color);
+ }
+ &:active {
+ background-color: var(--dark_900_color);
+ }
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/sidebar_section/SidebarSection.jsx b/src-ui/app/config_page/sidebar_section/SidebarSection.jsx
new file mode 100644
index 00000000..2b109910
--- /dev/null
+++ b/src-ui/app/config_page/sidebar_section/SidebarSection.jsx
@@ -0,0 +1,48 @@
+import styles from "./SidebarSection.module.scss";
+
+export const SidebarSection = () => {
+ return (
+ {label}
+
+
+ );
+};
+
+
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { useStore_SelectedConfigTabId } from "@store";
+
+const Tab = (props) => {
+ const { t } = useTranslation();
+ const { updateSelectedConfigTabId, currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
+ const onclickFunction = () => {
+ updateSelectedConfigTabId(props.tab_id);
+ };
+
+ const tab_container_class_names = clsx(styles["tab_container"], {
+ [styles["is_selected"]]: (currentSelectedConfigTabId.data === props.tab_id) ? true : false
+ });
+ const switch_indicator_class_names = clsx(styles["switch_indicator"], {
+ [styles["is_selected"]]: (currentSelectedConfigTabId.data === props.tab_id) ? true : false
+ });
+
+ return (
+
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/sidebar_section/SidebarSection.module.scss b/src-ui/app/config_page/sidebar_section/SidebarSection.module.scss
new file mode 100644
index 00000000..6051cff6
--- /dev/null
+++ b/src-ui/app/config_page/sidebar_section/SidebarSection.module.scss
@@ -0,0 +1,63 @@
+.container {
+ width: var(--config_page_sidebar_width);
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 0rem 0rem 5.8rem 1.2rem;
+ max-height: 60rem;
+}
+
+.tabs_wrapper {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 0.1rem;
+ flex: 1;
+}
+
+.tab_container {
+ position: relative;
+ width: 100%;
+ display: flex;
+ justify-content: left;
+ align-items: center;
+ color: var(--dark_basic_text_color);
+ padding: 0.8rem 0 0.8rem 1rem;
+ cursor: pointer;
+ &:hover {
+ background-color: var(--dark_800_color);
+ }
+ &:active {
+ background-color: var(--dark_900_color);
+ }
+ &.is_selected {
+ background-color: inherit;
+ color: var(--primary_200_color);
+ cursor: default;
+ pointer-events: none;
+ }
+}
+
+.switch_indicator {
+ display: none;
+ &.is_selected {
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 0rem;
+ transform: translate(-50%, -50%);
+ width: 0.2rem;
+ height: 2.6rem;
+ border-radius: 0.1rem;
+ background-color: var(--primary_300_color);
+ }
+}
+
+.tab_text {
+ font-size: 1.6rem;
+}
+
+.separated_tabs_wrapper {
+ // padding-bottom: 1.2rem;
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/topbar/Topbar.jsx b/src-ui/app/config_page/topbar/Topbar.jsx
new file mode 100644
index 00000000..64c8f593
--- /dev/null
+++ b/src-ui/app/config_page/topbar/Topbar.jsx
@@ -0,0 +1,38 @@
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+
+import styles from "./Topbar.module.scss";
+import { useIsOpenedConfigPage } from "@logics_common";
+import ArrowLeftSvg from "@images/arrow_left.svg?react";
+
+import { TitleBox } from "./title_box/TitleBox";
+import { SectionTitleBox } from "./section_title_box/SectionTitleBox";
+import { CompactSwitchBox } from "./compact_switch_box/CompactSwitchBox";
+
+export const Topbar = () => {
+ const { t } = useTranslation();
+ const { currentIsOpenedConfigPage, setIsOpenedConfigPage } = useIsOpenedConfigPage();
+ const closeConfigPage = () => {
+ setIsOpenedConfigPage(false);
+ };
+ return (
+ {t(`config_page.side_menu_labels.${props.tab_id}`)}
+ +
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/topbar/Topbar.module.scss b/src-ui/app/config_page/topbar/Topbar.module.scss
new file mode 100644
index 00000000..331f1581
--- /dev/null
+++ b/src-ui/app/config_page/topbar/Topbar.module.scss
@@ -0,0 +1,82 @@
+.container {
+ width: 100%;
+ height: 0%;
+ transition: top 0.5s ease;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.show_config.container {
+ top: 0;
+}
+
+.show_main.container {
+ top: 100%;
+}
+
+
+.wrapper {
+ background-color: var(--dark_850_color);
+ cursor: pointer;
+ height: 1rem;
+ width: 100%;
+ position: relative;
+ transition: all 0.3s ease;
+
+ &:hover {
+ height: 2rem;
+ .go_back_button {
+ top: -12rem;
+ transform: rotate(35deg);
+ }
+ .arrow_left_svg {
+ color: var(--dark_400_color);
+ }
+ .go_back_text {
+ color: var(--dark_400_color);
+ }
+ .go_back_text_wrapper {
+ padding-top: 8.2rem;
+ }
+ }
+
+}
+
+.go_back_button {
+ height: 16rem;
+ width: 16rem;
+ border-radius: 1.2rem;
+ background-color: var(--dark_850_color);
+ position: absolute;
+ top: -13.2rem;
+ right: 10rem;
+ transform: rotate(30deg);
+ transition: all 0.3s ease;
+}
+
+.arrow_left_svg {
+ height: 2.8rem;
+ position: absolute;
+ right: 1rem;
+ bottom: 0.4rem;
+ color: var(--dark_600_color);
+ transform: rotate(-100deg);
+}
+
+.go_back_text_wrapper {
+ position: absolute;
+ top: -4.6rem;
+ right: 0rem;
+ padding-top: 7.2rem;
+ padding-bottom: 1rem;
+ width: 15.2rem;
+ transition: all 0.3s ease;
+}
+
+.go_back_text {
+ color: var(--dark_650_color);
+ font-size: 1.6rem;
+ padding-left: 4rem;
+ transition: all 0.3s ease;
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/topbar/compact_switch_box/CompactSwitchBox.jsx b/src-ui/app/config_page/topbar/compact_switch_box/CompactSwitchBox.jsx
new file mode 100644
index 00000000..4d36a1e5
--- /dev/null
+++ b/src-ui/app/config_page/topbar/compact_switch_box/CompactSwitchBox.jsx
@@ -0,0 +1,12 @@
+import { useTranslation } from "react-i18next";
+
+import styles from "./CompactSwitchBox.module.scss";
+
+export const CompactSwitchBox = () => {
+ const { t } = useTranslation();
+ return (
+ closeConfigPage()}>
+
+
+
+
+
+
+
+ {/* {t("common.go_back_button_label")}
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/topbar/compact_switch_box/CompactSwitchBox.module.scss b/src-ui/app/config_page/topbar/compact_switch_box/CompactSwitchBox.module.scss
new file mode 100644
index 00000000..f824b7d0
--- /dev/null
+++ b/src-ui/app/config_page/topbar/compact_switch_box/CompactSwitchBox.module.scss
@@ -0,0 +1,9 @@
+.container {
+ // flex: 0;
+ // width: 100%;
+ width: 14rem;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/topbar/section_title_box/SectionTitleBox.jsx b/src-ui/app/config_page/topbar/section_title_box/SectionTitleBox.jsx
new file mode 100644
index 00000000..53bb6b16
--- /dev/null
+++ b/src-ui/app/config_page/topbar/section_title_box/SectionTitleBox.jsx
@@ -0,0 +1,13 @@
+import { useTranslation } from "react-i18next";
+import styles from "./SectionTitleBox.module.scss";
+import { useStore_SelectedConfigTabId } from "@store";
+
+export const SectionTitleBox = () => {
+ const { t } = useTranslation();
+ const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
+ return (
+ {t("config_page.compact_mode")}
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/topbar/section_title_box/SectionTitleBox.module.scss b/src-ui/app/config_page/topbar/section_title_box/SectionTitleBox.module.scss
new file mode 100644
index 00000000..bb022d2e
--- /dev/null
+++ b/src-ui/app/config_page/topbar/section_title_box/SectionTitleBox.module.scss
@@ -0,0 +1,13 @@
+.container {
+ flex: 1;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: left;
+ align-items: center;
+ padding-left: 2rem;
+}
+
+.title {
+ font-size: 2.2rem;
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/topbar/title_box/TitleBox.jsx b/src-ui/app/config_page/topbar/title_box/TitleBox.jsx
new file mode 100644
index 00000000..c2bb2355
--- /dev/null
+++ b/src-ui/app/config_page/topbar/title_box/TitleBox.jsx
@@ -0,0 +1,14 @@
+import { useTranslation } from "react-i18next";
+
+import styles from "./TitleBox.module.scss";
+import chato_img from "@images/chato_white.png";
+
+export const TitleBox = () => {
+ const { t } = useTranslation();
+ return (
+ {t(`config_page.side_menu_labels.${currentSelectedConfigTabId.data}`)}
+
+ 
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/topbar/title_box/TitleBox.module.scss b/src-ui/app/config_page/topbar/title_box/TitleBox.module.scss
new file mode 100644
index 00000000..33d38361
--- /dev/null
+++ b/src-ui/app/config_page/topbar/title_box/TitleBox.module.scss
@@ -0,0 +1,19 @@
+.container {
+ // flex: 0;
+ width: var(--config_page_sidebar_width);
+ height: 100%;
+ display: flex;
+ justify-content: left;
+ align-items: center;
+ padding-left: 2.6rem;
+ gap: 1.4rem;
+}
+
+.logo_chato {
+ width: 3.2rem;
+ padding-top: 0.6rem;
+}
+
+.title {
+ font-size: 2.2rem;
+}
\ No newline at end of file
diff --git a/src-ui/app/index.jsx b/src-ui/app/index.jsx
new file mode 100644
index 00000000..03c4e13a
--- /dev/null
+++ b/src-ui/app/index.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "@root/locales/config.js";
+import "./_index_css/root.css";
+
+import { App } from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+ {t("config_page.config_title")}
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/main_page/MainPage.module.scss b/src-ui/app/main_page/MainPage.module.scss
new file mode 100644
index 00000000..50fbe594
--- /dev/null
+++ b/src-ui/app/main_page/MainPage.module.scss
@@ -0,0 +1,64 @@
+.page {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ overflow: hidden;
+ transition: transform 0.5s ease;
+}
+
+.show_config.main_page {
+ transform: translateY(-100%);
+}
+
+.show_main.main_page {
+ transform: translateY(0%);
+}
+
+
+.container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ background-color: var(--dark_888_color);
+ position: relative;
+}
+
+.main_page_cover {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: (#000000cc);
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+ justify-content: center;
+ align-items: center;
+ backdrop-filter: blur(0.8rem);
+ color: var(--dark_basic_text_color);
+}
+
+.cover_message {
+ font-size: 2rem;
+ font-weight: 300;
+}
+
+.close_settings_window_button {
+ font-size: 1.6rem;
+ font-weight: 300;
+ padding: 1rem 1.4rem;
+ border-radius: 0.4rem;
+ background-color: var(--dark_888_color);
+ cursor: pointer;
+ &:hover {
+ background-color: var(--dark_825_color);
+ }
+ &:active {
+ background-color: var(--dark_925_color);
+ }
+}
\ No newline at end of file
diff --git a/src-ui/app/main_page/main_section/MainSection.jsx b/src-ui/app/main_page/main_section/MainSection.jsx
new file mode 100644
index 00000000..faf910bd
--- /dev/null
+++ b/src-ui/app/main_page/main_section/MainSection.jsx
@@ -0,0 +1,87 @@
+import { useTranslation } from "react-i18next";
+import styles from "./MainSection.module.scss";
+
+import { TopBar } from "./top_bar/TopBar";
+import { MessageContainer } from "./message_container/MessageContainer";
+import { LanguageSelector } from "./language_selector/LanguageSelector";
+
+import { useStore_IsOpenedLanguageSelector } from "@store";
+import { useLanguageSettings } from "@logics_main";
+import { useEffect } from "react";
+
+export const MainSection = () => {
+
+ return (
+
+
+
+
+ );
+};
+
+
+const HandleLanguageSelector = () => {
+ const { t } = useTranslation();
+ const { currentIsOpenedLanguageSelector, updateIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
+ const {
+ currentSelectedPresetTabNumber,
+ currentSelectedYourLanguages,
+ setSelectedYourLanguages,
+ currentSelectedTargetLanguages,
+ setSelectedTargetLanguages,
+ } = useLanguageSettings();
+
+ useEffect(() => {
+ updateIsOpenedLanguageSelector({
+ your_language: false,
+ target_language: false,
+ target_key: "1"
+ });
+
+ }, [currentSelectedPresetTabNumber.data, currentSelectedYourLanguages.data, currentSelectedTargetLanguages.data]);
+
+ const getTitle = (target_selector_key) => {
+ if (target_selector_key === "your_language") return t("main_page.language_selector.title_your_language");
+ if (target_selector_key === "target_language") {
+ if (currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data]["2"].enable === false) return t("main_page.language_selector.title_target_language");
+ return `${t("main_page.language_selector.title_target_language")} (${currentIsOpenedLanguageSelector.data.target_key})`;
+ }
+ };
+
+
+
+ if (currentIsOpenedLanguageSelector.data.your_language === true) {
+ const onclickFunction_YourLanguage = (payload) => {
+ updateIsOpenedLanguageSelector({ your_language: false, target_language: false, target_key: currentIsOpenedLanguageSelector.data.target_key });
+ setSelectedYourLanguages({
+ ...payload,
+ target_key: currentIsOpenedLanguageSelector.data.target_key,
+ });
+ };
+ const title = getTitle("your_language");
+ return (
+
+
+
+ );
+};
+
+const LanguageGroup = ({ onClickFunction, letter, languages }) => {
+ return (
+
+
+
+ {Object.entries(groupedLanguages).map(([letter, languages]) => (
+
+
+
+ );
+};
+
+const LanguageButton = ({ onClickFunction, language_data }) => {
+
+ const adjustedOnClickFunction = () => {
+ onClickFunction({
+ language: language_data.language,
+ country: language_data.country,
+ });
+ };
+
+ return (
+ {letter}
+ {languages.map((language_data, index) => ( +
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/main_page/main_section/language_selector/LanguageSelector.module.scss b/src-ui/app/main_page/main_section/language_selector/LanguageSelector.module.scss
new file mode 100644
index 00000000..4a9fd247
--- /dev/null
+++ b/src-ui/app/main_page/main_section/language_selector/LanguageSelector.module.scss
@@ -0,0 +1,50 @@
+.container {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: var(--dark_875_color);
+ flex: 1;
+ overflow-y: hidden;
+}
+
+.language_list_scroll_wrapper {
+ height: 100%;
+ overflow-y: auto;
+ padding: 1rem 1rem 8rem 1.6rem;
+}
+
+.language_list {
+ column-count: auto;
+ column-width: 16rem;
+}
+
+.language_each_letter_box {
+ break-inside: avoid-column;
+ margin-bottom: 1.4rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.1rem;
+}
+
+.language_latter {
+ font-size: 1.4rem;
+ color: var(--dark_500_color);
+}
+
+.language_button {
+ padding: 0.8rem 0.6rem;
+ cursor: pointer;
+ &:hover{
+ background-color: var(--dark_825_color);
+ }
+ &:active{
+ background-color: var(--dark_888_color);
+ }
+}
+
+.language_label {
+ font-size: 1.4rem;
+ color: var(--dark_basic_text_color);
+}
\ No newline at end of file
diff --git a/src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.jsx b/src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.jsx
new file mode 100644
index 00000000..1ea1c832
--- /dev/null
+++ b/src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.jsx
@@ -0,0 +1,24 @@
+import { useTranslation } from "react-i18next";
+import styles from "./LanguageSelectorTopBar.module.scss";
+import { useStore_IsOpenedLanguageSelector } from "@store";
+
+export const LanguageSelectorTopBar = (props) => {
+ const { t } = useTranslation();
+ const { updateIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
+ const closeLanguageSelector = () => {
+ updateIsOpenedLanguageSelector({
+ your_language: false,
+ target_language: false,
+ target_key: "1"
+ });
+ };
+
+ return (
+ {language_data.language} ({language_data.country})
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.module.scss b/src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.module.scss
new file mode 100644
index 00000000..b2e7d219
--- /dev/null
+++ b/src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.module.scss
@@ -0,0 +1,32 @@
+.container {
+ height: var(--main_page_topbar_height);
+ background-color: var(--dark_850_color);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+}
+
+.title {
+ font-size: 2rem;
+ color: var(--dark_400_color);
+}
+
+.go_back_button_wrapper {
+ position: absolute;
+ left: 0;
+ background-color: var(--dark_800_color);
+ padding: 1.2rem;
+ cursor: pointer;
+ &:hover{
+ background-color: var(--dark_750_color);
+ }
+ &:active{
+ background-color: var(--dark_875_color);
+ }
+}
+
+.go_back_button_label {
+ font-size: 1.4rem;
+ color: var(--dark_400_color);
+}
\ No newline at end of file
diff --git a/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx b/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx
new file mode 100644
index 00000000..dbc5c100
--- /dev/null
+++ b/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx
@@ -0,0 +1,120 @@
+import { useResizable } from "react-resizable-layout";
+import { useRef, useEffect, useState } from "react";
+import styles from "./MessageContainer.module.scss";
+import { appWindow } from "@tauri-apps/api/window";
+import { LogBox } from "./log_box/LogBox";
+import { MessageLogSettingsContainer } from "./message_log_settings_container/MessageLogSettingsContainer";
+import { MessageInputBox } from "./message_input_box/MessageInputBox";
+import { useMessageInputBoxRatio } from "@logics_main";
+import { useUiScaling } from "@logics_configs";
+import { useStore_IsAppliedInitMessageBoxHeight } from "@store";
+
+export const MessageContainer = () => {
+ const { currentMessageInputBoxRatio, asyncSetMessageInputBoxRatio } = useMessageInputBoxRatio();
+ const { currentUiScaling } = useUiScaling();
+ const [is_hovered, setIsHovered] = useState(false);
+ const [message_box_height_in_rem, setMessageBoxHeightInRem] = useState(10);
+ const FONT_SIZE_STANDARD = 10 * currentUiScaling.data / 100; // 10px = 1rem
+ const { currentIsAppliedInitMessageBoxHeight, updateIsAppliedInitMessageBoxHeight } = useStore_IsAppliedInitMessageBoxHeight();
+
+ const container_ref = useRef(null);
+ const log_box_ref = useRef(null);
+ const message_box_wrapper_ref = useRef(null);
+
+ const asyncSetMessageBoxHeightInRem = async (data) => {
+ const minimized = await appWindow.isMinimized();
+ if (minimized) return; // don't save while the window is minimized.
+ setMessageBoxHeightInRem(data);
+ };
+
+ const calculateMessageBoxRatioAndHeight = () => {
+ if (!currentIsAppliedInitMessageBoxHeight.data) {
+ asyncSetMessageInputBoxRatio(currentMessageInputBoxRatio.data);
+ asyncSetMessageBoxHeightInRem(convertRatioToRem(currentMessageInputBoxRatio.data));
+ return;
+ }
+
+ if (log_box_ref.current && message_box_wrapper_ref.current && container_ref.current) {
+ const container_height = container_ref.current.offsetHeight;
+ const container_padding_bottom = parseFloat(window.getComputedStyle(container_ref.current).paddingBottom);
+ const total_height = container_height - container_padding_bottom;
+
+ const message_box_height = message_box_wrapper_ref.current.offsetHeight;
+ const message_box_ratio = (message_box_height / total_height) * 100;
+
+ asyncSetMessageInputBoxRatio(message_box_ratio);
+ asyncSetMessageBoxHeightInRem(convertRatioToRem(message_box_ratio));
+ } else {
+ console.warn("References not ready for calculation");
+ }
+ };
+
+ const { position, separatorProps } = useResizable({
+ axis: "y",
+ reverse: true,
+ onResizeEnd: calculateMessageBoxRatioAndHeight,
+ });
+
+ useEffect(() => {
+ asyncSetMessageBoxHeightInRem((position / FONT_SIZE_STANDARD) - 1.4);
+ }, [position]);
+
+ useEffect(() => {
+ asyncSetMessageBoxHeightInRem(convertRatioToRem(currentMessageInputBoxRatio.data));
+ }, [currentMessageInputBoxRatio.data]);
+
+ const convertRatioToRem = (ratio) => {
+ if (!container_ref.current) return 0;
+ const container_height = container_ref.current.offsetHeight;
+ const container_padding_bottom = parseFloat(window.getComputedStyle(container_ref.current).paddingBottom);
+ const total_height = container_height - container_padding_bottom;
+ return total_height === 0 ? 0 : ((ratio / 100) * total_height / FONT_SIZE_STANDARD);
+ };
+
+ useEffect(() => {
+ calculateMessageBoxRatioAndHeight();
+ updateIsAppliedInitMessageBoxHeight(true); // Ensure this happens after initial calculation
+ }, []);
+
+ useEffect(() => {
+ let resizeTimeout;
+
+ const unlisten = appWindow.onResized(() => {
+ clearTimeout(resizeTimeout);
+ resizeTimeout = setTimeout(() => {
+ calculateMessageBoxRatioAndHeight();
+ }, 200);
+ });
+
+ return () => {
+ unlisten.then((dispose) => dispose());
+ };
+ }, []);
+
+ return (
+
+
+ {t("common.go_back_button_label")}
+{props.title}
+
+
+ );
+};
+
+const Separator = ({ onDragStart, ...props }) => (
+ setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+
+
+
+
+
+);
diff --git a/src-ui/app/main_page/main_section/message_container/MessageContainer.module.scss b/src-ui/app/main_page/main_section/message_container/MessageContainer.module.scss
new file mode 100644
index 00000000..e1886dfe
--- /dev/null
+++ b/src-ui/app/main_page/main_section/message_container/MessageContainer.module.scss
@@ -0,0 +1,42 @@
+.container {
+ height: 0%;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ padding: 0 1.6rem 1rem 1.6rem;
+}
+
+.log_box_resize_wrapper {
+ flex: 1;
+ overflow: auto;
+ position: relative;
+}
+
+.separator {
+ position: relative;
+ width: 100%;
+ height: 0.8rem;
+ cursor: row-resize;
+ flex-shrink: 0;
+ &:hover {
+ & .separator_line {
+ background-color: var(--primary_300_color);
+ }
+ }
+}
+.separator_line {
+ position: absolute;
+ bottom: 0%;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ height: 50%;
+ width: 99%;
+ transition: background-color .15s ease-out;
+}
+
+.message_box_resize_wrapper {
+ height: 10rem;
+ min-height: 3.8rem;
+ max-height: 90%;
+}
\ No newline at end of file
diff --git a/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx b/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx
new file mode 100644
index 00000000..4f9ef5a0
--- /dev/null
+++ b/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx
@@ -0,0 +1,65 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import styles from "./LogBox.module.scss";
+import { store } from "@store";
+import { MessageContainer } from "./message_container/MessageContainer";
+import { scrollToBottom } from "@utils";
+import { useMessage } from "@logics_common";
+
+export const LogBox = () => {
+ const { currentMessageLogs } = useMessage();
+ const log_container_ref = useRef(null);
+ const [is_scrolling, setIsScrolling] = useState(false);
+
+
+ useLayoutEffect(() => {
+ store.log_box_ref = log_container_ref;
+ if (!is_scrolling) {
+ scrollToBottom(store.log_box_ref);
+ // scrollToBottom(store.log_box_ref, true); [Fix me]
+ }
+ }, [currentMessageLogs.data]);
+
+ useEffect(() => {
+ const handleScroll = () => {
+ const element = log_container_ref.current;
+ if (!element) return;
+ const currentScrollTop = element.scrollTop;
+ const at_bottom = element.scrollHeight - currentScrollTop === element.clientHeight;
+
+ if (at_bottom) {
+ setIsScrolling(false);
+ } else {
+ setIsScrolling(true);
+ }
+ };
+
+ const element = log_container_ref.current;
+ element.addEventListener("scroll", handleScroll);
+
+ return () => {
+ element.removeEventListener("scroll", handleScroll);
+ };
+ }, []);
+
+ return (
+
+
+ );
+};
+
+import { useMessageLogUiScaling } from "@logics_configs";
+const MessageLogUiSizeController = () => {
+ const { currentMessageLogUiScaling } = useMessageLogUiScaling();
+ const font_size = currentMessageLogUiScaling.data / 100;
+
+ useEffect(() => {
+ const log_container_el = document.getElementById("log_container");
+ log_container_el.style.setProperty("font-size", `${font_size}rem`);
+ }, [currentMessageLogUiScaling.data]);
+
+ return null;
+};
\ No newline at end of file
diff --git a/src-ui/app/main_page/main_section/message_container/log_box/LogBox.module.scss b/src-ui/app/main_page/main_section/message_container/log_box/LogBox.module.scss
new file mode 100644
index 00000000..35d49601
--- /dev/null
+++ b/src-ui/app/main_page/main_section/message_container/log_box/LogBox.module.scss
@@ -0,0 +1,10 @@
+.container {
+ height: 100%;
+ width: 100%;
+ flex: 1;
+ background-color: var(--dark_900_color);
+ overflow: auto;
+ border-radius: 0.8rem;
+ padding: 1rem;
+ font-size: 1rem; // This is the standard font size for message logs, and is controlled by JavaScript. All child elements this are generally expressed in "em" and are affected by the font size setting here.
+}
\ No newline at end of file
diff --git a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx
new file mode 100644
index 00000000..1298c8da
--- /dev/null
+++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx
@@ -0,0 +1,101 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import styles from "./MessageContainer.module.scss";
+import { MessageSubMenuContainer } from "./message_sub_menu_container/MessageSubMenuContainer";
+import { useMessage } from "@logics_common";
+import { useIsVisibleResendButton } from "@logics_main";
+
+export const MessageContainer = ({ messages, status, category, created_at }) => {
+ const { t } = useTranslation();
+ const {
+ sendMessage,
+ updateMessageInputValue,
+ } = useMessage();
+ const { currentIsVisibleResendButton } = useIsVisibleResendButton();
+ const [is_hovered, setIsHovered] = useState(false);
+ const [is_locked, setIsLocked] = useState(false);
+
+ const resendFunction = () => {
+ sendMessage(messages.original);
+ };
+ const editFunction = () => {
+ updateMessageInputValue(messages.original);
+ };
+
+ const handleMouseEnter = () => {
+ if (!is_locked) {
+ setIsHovered(true);
+ }
+ };
+
+ const handleMouseLeave = () => {
+ setIsHovered(false);
+ setIsLocked(false);
+ };
+
+ const lockHoverState = () => {
+ setIsHovered(false);
+ setIsLocked(true);
+ };
+
+ const is_translated_exist = messages.translated?.length >= 1;
+ const is_pending = status === "pending";
+ const is_sent_message = category === "sent";
+ const is_system_message = category === "system";
+ const category_text = is_sent_message
+ ? t("main_page.message_log.sent")
+ : is_system_message
+ ? t("main_page.message_log.system")
+ : t("main_page.message_log.received");
+
+ const message_type_class_name = clsx({
+ [styles.sent_message]: is_sent_message,
+ [styles.received_message]: !is_sent_message && !is_system_message,
+ [styles.system_message]: is_system_message,
+ });
+
+ return (
+
+
+ );
+};
+
+const WithTranslatedMessages = ({ messages }) => {
+ const translated_data = Array.isArray(messages.translated) ? messages.translated : [messages.translated];
+ return (
+ <>
+
+
+ {currentIsVisibleResendButton.data && is_sent_message && is_hovered ? (
+
+
+ {created_at}
+{category_text}
+ {is_sent_message && is_pending && } +
+ {is_system_message ? (
+
+ {messages.message}
+ ) : is_translated_exist ? ( +{messages.original}
+ )} +{messages.original}
+ {translated_data.map((message, index) => ( +{message}
+ ))} + + ); +}; diff --git a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss new file mode 100644 index 00000000..966ed455 --- /dev/null +++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss @@ -0,0 +1,111 @@ +@import "@scss_mixins"; + +// ******************* ******************* +// ******************* Express in "em" not "rem" ******************* +// ******************* ******************* +.container { + width: 100%; + display: flex; + user-select: text; + gap: 0.6rem; + &.sent_message.is_shown_resend_button:hover { + background-color: var(--dark_950_color); + } +} + +.message_wrapper { + display: flex; + width: 100%; + flex-direction: column; + justify-content: center; + align-items: end; + user-select: text; + padding: 0.6em 0; + &.sent_message { + align-items: end; + } + &.received_message { + align-items: start; + } + &.system_message { + flex-direction: row; + align-items: center; + gap: 0.6rem; + } +} + +.info_box { + position: relative; + display: flex; + gap: 0.8em; + justify-content: center; + &.sent_message { + align-items: end; + } + &.received_message { + flex-flow: row-reverse; + align-items: start; + } +} + +.loader { + @include loader(0.8em, 0.1em, left, -1em); +} + +.time { + font-size: 1em; + color: var(--dark_600_color); +} + +.category { + font-size: 1em; + &.sent_message { + color: var(--sent_400_color); + } + &.received_message { + align-items: start; + color: var(--received_300_color); + } +} + +.message_box { + display: flex; + flex-direction: column; + &.sent_message { + align-items: end; + } + &.received_message { + align-items: start; + } +} + +.message_main { + color: var(--dark_basic_text_color); + user-select: text; + font-size: 1.4em; +} + +.message_second { + color: var(--dark_450_color); + user-select: text; + font-size: 1em; +} + + +.system_message { + justify-content: center; + text-align: center; + + .category { + color: var(--primary_300_color); + } + + .message_box { + align-items: center; + } + + .message_main_system { + font-size: 1.2rem; + color: var(--dark_500_color); + } +} \ No newline at end of file diff --git a/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.jsx b/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.jsx new file mode 100644 index 00000000..6144ff37 --- /dev/null +++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.jsx @@ -0,0 +1,73 @@ +import React, { useState, useRef } from "react"; +import { useTranslation } from "react-i18next"; +import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'; +import styles from "./MessageSubMenuContainer.module.scss"; +import SendMessageSvg from "@images/send_message.svg?react"; +import RefreshSvg from "@images/refresh_2.svg?react"; + +export const MessageSubMenuContainer = (props) => { + const [is_holding, setIsHolding] = useState(false); + const progressRef = useRef(null); + const holdTimeout = useRef(null); + + const startHold = () => { + setIsHolding(true); + if (progressRef.current) { + progressRef.current.style.transition = "width 500ms linear"; + progressRef.current.style.width = "100%"; + } + holdTimeout.current = setTimeout(() => { + props.resendFunction(); + props.setIsHovered(false); + }, 500); + }; + + const cancelHold = () => { + setIsHolding(false); + if (progressRef.current) { + progressRef.current.style.transition = "none"; + progressRef.current.style.width = "0%"; + } + clearTimeout(holdTimeout.current); + }; + + const onClickFunction = () => { + props.editFunction(); + + }; + + const offset = { + popper: { + sx: { + [`&.${tooltipClasses.popper}[data-popper-placement*="top"] .${tooltipClasses.tooltip}`]: { marginBottom: "0.2em" }, + } + } + }; + + return ( +
+
+ );
+};
+
+const Title_p = () => {
+ const { t } = useTranslation();
+ return {t("main_page.message_log.resend_button_on_hover_desc")}
; +}; diff --git a/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.module.scss b/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.module.scss new file mode 100644 index 00000000..30b436b1 --- /dev/null +++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.module.scss @@ -0,0 +1,45 @@ +// ******************* ******************* +// ******************* Express in "em" not "rem" ******************* +// ******************* ******************* +.container { +} +.resend_button { + background-color: var(--dark_825_color); + position: relative; + height: 100%; + width: 3.8em; +} + +.send_message_svg { + position: absolute; + top: 58%; + left: 50%; + transform: translate(-50%, -50%); + width: 2.2em; + color: var(--dark_400_color); +} +.refresh_svg { + position: absolute; + top: 36%; + left: 42%; + transform: translate(-50%, -50%); + width: 1.8em; + color: var(--sent_400_color); + filter: drop-shadow(0.2em 0.2em 0 var(--dark_825_color)); +} + +.tooltip_title { + font-size: 1.2rem; + color: var(--dark_basic_text_color); +} + +.hold_progress_bar { + position: absolute; + top: 10%; + left: 50%; + transform: translate(-50%, -50%); + width: 0%; + height: 0.4em; + background-color: var(--sent_400_color); + transition: none; +} \ No newline at end of file diff --git a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx new file mode 100644 index 00000000..88ee0605 --- /dev/null +++ b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx @@ -0,0 +1,117 @@ +import { useState, useEffect } from "react"; +import styles from "./MessageInputBox.module.scss"; +import SendMessageSvg from "@images/send_message.svg?react"; +import { useMessage } from "@logics_common"; +import { useSendMessageButtonType, useEnableAutoClearMessageInputBox } from "@logics_configs"; +import { store } from "@store"; +import { scrollToBottom } from "@utils"; + +export const MessageInputBox = () => { + const [message_history, setMessageHistory] = useState([]); + const [history_index, setHistoryIndex] = useState(-1); + const { + sendMessage, + currentMessageLogs, + currentMessageInputValue, + updateMessageInputValue, + startTyping, + stopTyping, + } = useMessage(); + + const { currentEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox(); + const { currentSendMessageButtonType } = useSendMessageButtonType(); + + useEffect(() => { + if (currentMessageLogs.data) { + const sentMessages = currentMessageLogs.data + .filter(log => log.category === "sent") + .map(log => log.messages.original); + setMessageHistory(sentMessages); + } + }, [currentMessageLogs.data]); + + const onSubmitFunction = (e) => { + e.preventDefault(); + + if (!currentMessageInputValue.data.trim()) return updateMessageInputValue(""); + + sendMessage(currentMessageInputValue.data); + + if (currentEnableAutoClearMessageInputBox.data) updateMessageInputValue(""); + + setTimeout(() => { + scrollToBottom(store.log_box_ref); + }, 10); + + setHistoryIndex(-1); + }; + + const onChangeFunction = (e) => { + const value = e.currentTarget.value; + updateMessageInputValue(value); + value.trim() ? startTyping() : stopTyping(); + }; + + const onKeyDownFunction = (e) => { + if (e.key === "ArrowUp" && e.shiftKey) { + e.preventDefault(); + + if (history_index + 1 < message_history.length) { + const new_index = history_index + 1; + setHistoryIndex(new_index); + updateMessageInputValue(message_history[message_history.length - 1 - new_index]); + } + } + + if (e.key === "ArrowDown" && e.shiftKey) { + e.preventDefault(); + + if (history_index > -1) { + const new_index = history_index - 1; + setHistoryIndex(new_index); + setInputValue( + new_index >= 0 + ? message_history[message_history.length - 1 - new_index] + : "" + ); + } + } + + if (currentSendMessageButtonType.data === "show_and_disable_enter_key") return; + + if (e.keyCode === 13 && !e.shiftKey) { + onSubmitFunction(e); + } + + }; + + return ( +
+
+ );
+};
+
+const SendMessageButton = ({ onSubmitFunction }) => {
+ return (
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.module.scss b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.module.scss
new file mode 100644
index 00000000..bb90bb3e
--- /dev/null
+++ b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.module.scss
@@ -0,0 +1,45 @@
+.container {
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+}
+
+.message_box_wrapper {
+ width: 100%;
+ height: 100%;
+ margin-right: 1rem;
+ padding: 0.8rem;
+ background-color: var(--dark_875_color);
+ border: 0.1rem solid var(--dark_750_color);
+ border-radius: 0.4rem;
+}
+
+.message_box_input_area {
+ width: 100%;
+ height: 100%;
+ font-size: 1.6rem;
+ resize: none;
+}
+
+.message_send_button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ max-width: 10rem;
+ height: 100%;
+ font-size: 1.2rem;
+ background-color: var(--dark_850_color);
+ border-radius: 0.4rem;
+ aspect-ratio: 1 / 1;
+ &:hover {
+ background-color: var(--dark_825_color);
+ }
+ &:active {
+ background-color: var(--dark_900_color);
+ }
+}
+
+.message_send_icon {
+ width: 2rem;
+ color: var(--dark_400_color);
+}
\ No newline at end of file
diff --git a/src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.jsx b/src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.jsx
new file mode 100644
index 00000000..1d38fc28
--- /dev/null
+++ b/src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.jsx
@@ -0,0 +1,53 @@
+import { useState } from "react";
+import styles from "./MessageLogSettingsContainer.module.scss";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+
+import { useIsVisibleResendButton } from "@logics_main";
+import { MessageLogUiScalingContainer } from "@setting_box";
+import { Checkbox } from "@common_components";
+import ConfigSvg from "@images/configuration.svg?react";
+
+export const MessageLogSettingsContainer = (props) => {
+ const { t } = useTranslation();
+ const [is_opened, setIsOpened] = useState(false);
+ const [is_hovered, setIsHovered] = useState(false);
+
+ const { currentIsVisibleResendButton, toggleIsVisibleResendButton } = useIsVisibleResendButton();
+
+ const container_class_name = clsx(styles.container, {
+ [styles.to_visible_toggle_bar]: props.to_visible_toggle_bar,
+ [styles.is_hovered]: is_hovered,
+ [styles.is_opened]: is_opened
+ });
+
+ const toggleVisibleResendButton = () => {
+ toggleIsVisibleResendButton();
+ };
+
+ return (
+
+
+
+ {currentSendMessageButtonType.data !== "hide" && (
+ setIsHovered(true)}
+ onMouseLeave={() => {setIsHovered(false); setIsOpened(false);}}
+ onClick={() => setIsOpened(true)}
+ >
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.module.scss b/src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.module.scss
new file mode 100644
index 00000000..e96904d4
--- /dev/null
+++ b/src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.module.scss
@@ -0,0 +1,85 @@
+$container_height: 18rem;
+$toggle_config_size: 3rem;
+.container {
+ position: absolute;
+ top: calc(-#{$container_height} + -#{$toggle_config_size});
+ left: 0;
+ height: $container_height;
+ width: 100%;
+ background-color: var(--dark_825_color);
+ transition: top 0.3s ease;
+ padding: 0.6rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ &.to_visible_toggle_bar {
+ top: calc(-#{$container_height} + 1rem);
+ & .config_svg_wrapper {
+ transform: translate(-50%, -50%) rotate(180deg);
+ }
+
+ }
+ &.is_hovered {
+ top: calc(-#{$container_height} + 2rem);
+ }
+ &.is_opened {
+ top: 0;
+ background-color: var(--dark_825_color_cc);
+ backdrop-filter: blur(0.6rem);
+ & .config_svg_wrapper {
+ width: 0%;
+ bottom: 0;
+ }
+ }
+ &:not(.is_opened) {
+ cursor: pointer;
+ }
+}
+
+.container_relative_wrapper {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+
+.config_svg_wrapper {
+ position: absolute;
+ left: 50%;
+ bottom: -#{$toggle_config_size};
+ transform: translate(-50%, -50%) rotate(0deg);
+ background-color: var(--dark_825_color);
+ width: $toggle_config_size;
+ border-radius: 50%;
+ aspect-ratio: 1 / 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: all 0.3s ease, transform 0.6s ease;
+}
+
+.config_svg {
+ width: calc($toggle_config_size / 1.6);
+ color: var(--dark_500_color);
+}
+
+.others_wrapper {
+ width: 100%;
+ display: flex;
+}
+
+.resend_checkbox_toggle {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0.6rem 1.2rem;
+ gap: 1rem;
+ cursor: pointer;
+ &:hover {
+ background-color: var(--dark_850_color);
+ }
+}
+
+.resend_checkbox_label {
+ font-size: 1.4rem;
+}
diff --git a/src-ui/app/main_page/main_section/top_bar/TopBar.jsx b/src-ui/app/main_page/main_section/top_bar/TopBar.jsx
new file mode 100644
index 00000000..8beac986
--- /dev/null
+++ b/src-ui/app/main_page/main_section/top_bar/TopBar.jsx
@@ -0,0 +1,13 @@
+import styles from "./TopBar.module.scss";
+
+import { SidebarCompactModeButton } from "./sidebar_compact_mode_button/SidebarCompactModeButton";
+import { RightSideComponents } from "./right_side_components/RightSideComponents";
+
+export const TopBar = () => {
+ return (
+
+
+
+
+
+
+
+
+
+ {t("main_page.message_log.show_resend_button")}
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/main_page/main_section/top_bar/TopBar.module.scss b/src-ui/app/main_page/main_section/top_bar/TopBar.module.scss
new file mode 100644
index 00000000..a2196678
--- /dev/null
+++ b/src-ui/app/main_page/main_section/top_bar/TopBar.module.scss
@@ -0,0 +1,7 @@
+.container {
+ height: var(--main_page_topbar_height);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-right: 1.6rem;
+}
\ No newline at end of file
diff --git a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx
new file mode 100644
index 00000000..a992ef23
--- /dev/null
+++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx
@@ -0,0 +1,81 @@
+import { useTranslation } from "react-i18next";
+import styles from "./RightSideComponents.module.scss";
+import RefreshSvg from "@images/refresh.svg?react";
+import HelpSvg from "@images/help.svg?react";
+
+import { useStore_OpenedQuickSetting } from "@store";
+import { useIsSoftwareUpdateAvailable } from "@logics_common";
+import { useIsEnabledOverlaySmallLog, useIsEnabledOverlayLargeLog, useEnableVrcMicMuteSync } from "@logics_configs";
+import { OpenQuickSettingButton } from "./_buttons/OpenQuickSettingButton";
+
+export const RightSideComponents = () => {
+ return (
+
+ );
+};
+
+const OpenOverlayQuickSetting = () => {
+ // const { t } = useTranslation();
+ const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+ const { currentIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
+ const { currentIsEnabledOverlayLargeLog } = useIsEnabledOverlayLargeLog();
+
+ const onClickFunction = () => {
+ updateOpenedQuickSetting("overlay");
+ };
+
+ const is_enable = currentIsEnabledOverlaySmallLog.data === true || currentIsEnabledOverlayLargeLog.data === true;
+
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss b/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss
new file mode 100644
index 00000000..2b542209
--- /dev/null
+++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss
@@ -0,0 +1,34 @@
+.container {
+ // height: 100%;
+}
+
+.button_wrapper {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 0.2rem;
+ padding: 0.6rem 0.4rem;
+ border-radius: 0.2rem;
+ cursor: pointer;
+ &:hover {
+ background-color: var(--dark_800_color);
+ }
+ &:active {
+ background-color: var(--dark_900_color);
+ }
+}
+
+.button_label {
+ font-size: 1.2rem;
+}
+
+.button_indicator_label {
+ font-size: 1rem;
+ &.disabled {
+ color: var(--dark_600_color);
+ }
+ &.enabled {
+ color: var(--primary_300_color);
+ }
+}
\ No newline at end of file
diff --git a/src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx b/src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx
new file mode 100644
index 00000000..4d12d94c
--- /dev/null
+++ b/src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx
@@ -0,0 +1,19 @@
+import clsx from "clsx";
+import styles from "./SidebarCompactModeButton.module.scss";
+
+import { useIsMainPageCompactMode } from "@logics_main";
+import ArrowLeftSvg from "@images/arrow_left.svg?react";
+
+export const SidebarCompactModeButton = () => {
+ const { toggleIsMainPageCompactMode, currentIsMainPageCompactMode } = useIsMainPageCompactMode();
+
+ const class_names = clsx(styles["arrow_left_svg"], {
+ [styles["reverse"]]: currentIsMainPageCompactMode.data
+ });
+
+ return (
+
+
+ {props.label}
+ {props.variable === true + ?{t("main_page.state_text_enabled")}
+ :{t("main_page.state_text_disabled")}
+ } +
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.module.scss b/src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.module.scss
new file mode 100644
index 00000000..b9107305
--- /dev/null
+++ b/src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.module.scss
@@ -0,0 +1,22 @@
+.container {
+ height: 100%;
+ width: 2.2rem;
+ background-color: var(--dark_850_color);
+ cursor: pointer;
+ &:hover {
+ background-color: var(--dark_800_color);
+ }
+ &:active {
+ background-color: var(--dark_900_color);
+ }
+}
+
+.arrow_left_svg {
+ height: 100%;
+ width: 100%;
+ padding: 1.1rem 0rem;
+ color: var(--dark_400_color);
+ &.reverse {
+ transform: rotate(180deg);
+ }
+}
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/SidebarSection.jsx b/src-ui/app/main_page/sidebar_section/SidebarSection.jsx
new file mode 100644
index 00000000..65f154ce
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/SidebarSection.jsx
@@ -0,0 +1,33 @@
+import clsx from "clsx";
+
+import styles from "./SidebarSection.module.scss";
+import { useStore_IsOpenedLanguageSelector } from "@store";
+import { useIsMainPageCompactMode } from "@logics_main";
+
+import { Logo } from "./logo/Logo";
+import { MainFunctionSwitch } from "./main_function_switch/MainFunctionSwitch";
+import { LanguageSettings } from "./language_settings/LanguageSettings";
+import { OpenSettings } from "./open_settings/OpenSettings";
+
+export const SidebarSection = () => {
+ const { currentIsMainPageCompactMode } = useIsMainPageCompactMode();
+ const container_class_name = clsx(styles.container, {
+ [styles.is_compact_mode]: currentIsMainPageCompactMode.data
+ });
+
+ const { currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
+ const scroll_container_class_names = clsx(styles.scroll_container, {
+ [styles.is_opened]: (currentIsOpenedLanguageSelector.data.your_language === true || currentIsOpenedLanguageSelector.data.target_language === true)
+ });
+
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/SidebarSection.module.scss b/src-ui/app/main_page/sidebar_section/SidebarSection.module.scss
new file mode 100644
index 00000000..26096649
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/SidebarSection.module.scss
@@ -0,0 +1,51 @@
+.container {
+ position: relative;
+ min-width: 23rem;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ background-color: var(--dark_850_color);
+ &.is_compact_mode {
+ min-width: auto;
+ .scroll_container {
+ overflow-y: hidden;
+ width: auto;
+ }
+ }
+}
+
+.scroll_container {
+ width: calc(100% + 0.8rem);
+ overflow-y: scroll;
+ overflow-x: hidden;
+ margin-bottom: calc(2rem + 1.6rem + 2rem); // config button's sizes (svg + padding + margin).
+ pointer-events: auto;
+ z-index: 1;
+ &::-webkit-scrollbar {
+ width: 0.8rem;
+ }
+ &::-webkit-scrollbar-track {
+ background-color: var(--dark_888_color);
+ border-radius: 0.4rem;
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: var(--dark_888_color);
+ border-radius: 0.4rem;
+ }
+
+ &.is_opened {
+ &::-webkit-scrollbar-track {
+ background-color: var(--dark_875_color);
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: var(--dark_875_color);
+ }
+ }
+
+ &:hover {
+ &::-webkit-scrollbar-thumb {
+ background-color: var(--dark_800_color);
+ }
+ }
+
+}
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx b/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx
new file mode 100644
index 00000000..7d90bdf4
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx
@@ -0,0 +1,55 @@
+import { useTranslation } from "react-i18next";
+import styles from "./LanguageSettings.module.scss";
+import { PresetTabSelector } from "./preset_tab_selector/PresetTabSelector";
+import { LanguageSelectorOpenButton } from "./language_selector_open_button/LanguageSelectorOpenButton";
+import { LanguageSwapButton } from "./language_swap_button/LanguageSwapButton";
+import { TranslatorSelectorOpenButton } from "./translator_selector_open_button/TranslatorSelectorOpenButton";
+import { AddRemoveTargetLanguageButtons } from "./add_remove_target_language_buttons/AddRemoveTargetLanguageButtons";
+import { useStore_IsOpenedTranslatorSelector } from "@store";
+
+export const LanguageSettings = () => {
+ const { t } = useTranslation();
+ const { updateIsOpenedTranslatorSelector } = useStore_IsOpenedTranslatorSelector();
+ const closeTranslatorSelector = () => updateIsOpenedTranslatorSelector(false);
+
+ return (
+
+
+
+
+ );
+};
+
+import MicSvg from "@images/mic.svg?react";
+import HeadphonesSvg from "@images/headphones.svg?react";
+import { useMainFunction } from "@logics_main";
+
+const PresetContainer = () => {
+ const { t } = useTranslation();
+ const { currentTranscriptionSendStatus, currentTranscriptionReceiveStatus } = useMainFunction();
+
+ const yourLanguageSettings = {
+ TurnedOnSvgComponent: MicSvg,
+ is_turned_on: currentTranscriptionSendStatus.data,
+ };
+
+ const targetLanguageSettings = {
+ TurnedOnSvgComponent: HeadphonesSvg,
+ is_turned_on: currentTranscriptionReceiveStatus.data,
+ };
+
+ return (
+ {t("main_page.language_settings")}
+
+
+ );
+};
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.module.scss b/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.module.scss
new file mode 100644
index 00000000..b6bd3eaa
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.module.scss
@@ -0,0 +1,29 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.title {
+ font-size: 1.4rem;
+ padding-top: 1rem;
+ padding-bottom: 0.8rem;
+ color: var(--dark_400_color);
+}
+
+.preset_container {
+ width: 100%;
+ padding-top: 0.8rem;
+ background-color: var(--dark_800_color);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.target_language_containers {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.2rem;
+}
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/add_remove_target_language_buttons/AddRemoveTargetLanguageButtons.jsx b/src-ui/app/main_page/sidebar_section/language_settings/add_remove_target_language_buttons/AddRemoveTargetLanguageButtons.jsx
new file mode 100644
index 00000000..3e71373f
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/language_settings/add_remove_target_language_buttons/AddRemoveTargetLanguageButtons.jsx
@@ -0,0 +1,34 @@
+import clsx from "clsx";
+import styles from "./AddRemoveTargetLanguageButtons.module.scss";
+import RemoveSvg from "@images/remove.svg?react";
+import AddSvg from "@images/add.svg?react";
+
+import { useLanguageSettings } from "@logics_main";
+
+export const AddRemoveTargetLanguageButtons = () => {
+ const {
+ currentSelectedPresetTabNumber,
+ // currentSelectedYourLanguages,
+ currentSelectedTargetLanguages,
+ removeTargetLanguage,
+ addTargetLanguage,
+ } = useLanguageSettings();
+
+ const remove_button_class = clsx(styles.remove_target_language_button, {
+ [styles.is_disabled]: !currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data]["2"].enable,
+ });
+ const add_button_class = clsx(styles.add_target_language_button, {
+ [styles.is_disabled]: currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data]["3"].enable,
+ });
+
+ return (
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/add_remove_target_language_buttons/AddRemoveTargetLanguageButtons.module.scss b/src-ui/app/main_page/sidebar_section/language_settings/add_remove_target_language_buttons/AddRemoveTargetLanguageButtons.module.scss
new file mode 100644
index 00000000..eebdfe18
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/language_settings/add_remove_target_language_buttons/AddRemoveTargetLanguageButtons.module.scss
@@ -0,0 +1,40 @@
+.add_remove_target_language_container {
+ width: 100%;
+ display: flex;
+ justify-content: end;
+ align-items: center;
+}
+
+.remove_target_language_button, .add_target_language_button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0.6rem 1rem;
+ cursor: pointer;
+ background-color: var(--dark_825_color);
+ &:hover {
+ background-color: var(--dark_875_color);
+ }
+ &:active {
+ background-color: var(--dark_900_color);
+ }
+ &.is_disabled {
+ pointer-events: none;
+ .remove_svg, .add_svg {
+ color: var(--dark_700_color);
+ }
+ }
+}
+
+.remove_target_language_button {
+ border-radius: 0 0 0 0.4rem;
+
+}
+.add_target_language_button {
+ border-radius: 0 0 0.4rem 0;
+}
+
+.remove_svg, .add_svg {
+ width: 0.8rem;
+ color: var(--dark_200_color);
+}
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx b/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx
new file mode 100644
index 00000000..eacbf8f4
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx
@@ -0,0 +1,73 @@
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import styles from "./LanguageSelectorOpenButton.module.scss";
+import ArrowLeftSvg from "@images/arrow_left.svg?react";
+import { useStore_IsOpenedLanguageSelector } from "@store";
+import {
+ useLanguageSettings,
+} from "@logics_main";
+
+export const LanguageSelectorOpenButton = ({ TurnedOnSvgComponent, is_turned_on, selector_key, target_key }) => {
+ const { t } = useTranslation();
+ const { updateIsOpenedLanguageSelector, currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
+
+ const {
+ currentSelectedPresetTabNumber,
+ currentSelectedYourLanguages,
+ currentSelectedTargetLanguages,
+ } = useLanguageSettings();
+
+ const toggleSelector = () => {
+ if (currentIsOpenedLanguageSelector.data[selector_key] === true && currentIsOpenedLanguageSelector.data.target_key === target_key) { // Close Language Selector
+ updateIsOpenedLanguageSelector({ your_language: false, target_language: false, target_key: "1" });
+ } else { // Open Language Selector
+ updateIsOpenedLanguageSelector({
+ your_language: selector_key === "your_language",
+ target_language: selector_key === "target_language",
+ target_key: target_key,
+ });
+ }
+ };
+
+ const arrow_class_names = clsx(styles.arrow_left_svg, {
+ [styles.reverse]: (currentIsOpenedLanguageSelector.data[selector_key] === true && currentIsOpenedLanguageSelector.data.target_key === target_key),
+ });
+
+ const category_class_names = clsx(styles.category_svg, {
+ [styles.is_turned_on]: is_turned_on,
+ });
+
+ const getVariable = (target_selector_key) => {
+ if (target_selector_key === "your_language") return currentSelectedYourLanguages.data[currentSelectedPresetTabNumber.data];
+ if (target_selector_key === "target_language") return currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data];
+ };
+
+ const getTitle = (target_selector_key) => {
+ if (target_selector_key === "your_language") return t("main_page.your_language");
+ if (target_selector_key === "target_language") {
+ if (currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data]["2"].enable === false) return t("main_page.target_language");
+ return `${t("main_page.target_language")} ${target_key}`;
+ }
+ };
+
+ const title = getTitle(selector_key);
+
+ if (getVariable(selector_key)[target_key].enable === false) return null;
+
+ const language_text = getVariable(selector_key)[target_key].language ?? "Loading...";
+ const country_text = getVariable(selector_key)[target_key].country ?? "Loading...";
+
+ return (
+
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.module.scss b/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.module.scss
new file mode 100644
index 00000000..25e087f2
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.module.scss
@@ -0,0 +1,73 @@
+.container {
+ width: 100%;
+ background-color: var(--dark_825_color);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 0.8rem;
+ gap: 0.8rem;
+}
+
+.title_container {
+ position: relative;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ text-align: center;
+}
+
+.category_svg {
+ position: absolute;
+ top: 50%;
+ left: 1.2rem;
+ transform: translate(-50%, -50%);
+ width: 1.4rem;
+ color: var(--dark_400_color);
+ display: none;
+ &.is_turned_on {
+ display: block;
+ }
+}
+
+.title {
+ font-size: 1.6rem;
+ color: var(--dark_400_color);
+}
+
+.dropdown_menu_container {
+ position: relative;
+ background-color: var(--dark_888_color);
+ width: 100%;
+ padding: 0.4rem 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.4rem;
+ gap: 0.2rem;
+ cursor: pointer;
+ &:hover {
+ background-color: var(--dark_875_color);
+ }
+ &:active {
+ background-color: var(--dark_900_color);
+ }
+}
+
+.selected_language {
+ font-size: 1.2rem;
+ color: var(--dark_basic_text_color);
+}
+
+.arrow_left_svg {
+ position: absolute;
+ right: 0;
+ margin: 0 0.2rem;
+ transform: rotate(180deg);
+ width: 1.6rem;
+ color: var(--dark_basic_text_color);
+ &.reverse {
+ transform: rotate(0deg);
+ }
+}
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.jsx b/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.jsx
new file mode 100644
index 00000000..dd479a65
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.jsx
@@ -0,0 +1,40 @@
+import { useState } from "react";
+import clsx from "clsx";
+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";
+
+export const LanguageSwapButton = () => {
+ const [isHovered, setIsHovered] = useState(false);
+ const { t } = useTranslation();
+ const { runLanguageSwap } = useLanguageSettings();
+
+ const label = isHovered
+ ? t("main_page.swap_button_label")
+ : t("main_page.translate_each_other_label");
+
+ const labelClassName = clsx(styles["label"], {
+ [styles["is_hovered"]]: isHovered
+ });
+
+ const handleMouseEnter = () => setIsHovered(true);
+ const handleMouseLeave = () => setIsHovered(false);
+
+ return (
+
+
+ {title}
+
+
+ {language_text}
+({country_text})
+
+
+ );
+};
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.module.scss b/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.module.scss
new file mode 100644
index 00000000..1badfdda
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.module.scss
@@ -0,0 +1,36 @@
+.container {
+ width: 100%;
+}
+
+.swap_button_wrapper {
+ width: auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: 0.8rem 2rem;
+ padding: 0.4rem 0.8rem;
+ border-radius: 0.6rem;
+ cursor: pointer;
+ &:hover {
+ background-color: var(--dark_750_color);
+ }
+ &:active {
+ background-color: var(--dark_850_color);
+ }
+}
+
+.narrow_arrow_down_svg {
+ width: 1.6rem;
+ color: var(--dark_500_color);
+ &.reverse {
+ transform: rotate(180deg);
+ }
+}
+
+.label {
+ font-size: 1.2rem;
+ color: var(--dark_500_color);
+ &.is_hovered {
+ color: var(--dark_basic_text_color);
+ }
+}
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.jsx b/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.jsx
new file mode 100644
index 00000000..70fca67d
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.jsx
@@ -0,0 +1,32 @@
+import styles from "./PresetTabSelector.module.scss";
+
+export const PresetTabSelector = () => {
+ return (
+
+
+ {label}
+
+
+ );
+};
+
+import clsx from "clsx";
+
+import { useLanguageSettings } from "@logics_main";
+
+const Tab = (props) => {
+ const { currentSelectedPresetTabNumber, setSelectedPresetTabNumber } = useLanguageSettings();
+ const onclickFunction = () => {
+ setSelectedPresetTabNumber(props.preset_number);
+ };
+
+ const class_names = clsx(styles.tab_container, {
+ [styles.is_selected]: (currentSelectedPresetTabNumber.data === props.preset_number) ? true : false
+ });
+
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.module.scss b/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.module.scss
new file mode 100644
index 00000000..906bafd3
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.module.scss
@@ -0,0 +1,32 @@
+.container {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+}
+
+.tab_container {
+ height: 3rem;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.6rem 0.6rem 0 0;
+ color: var(--dark_600_color);
+ cursor: pointer;
+ &:hover {
+ background-color: var(--dark_825_color);
+ }
+ &:active {
+ background-color: var(--dark_875_color);
+ }
+ &.is_selected {
+ background-color: var(--dark_800_color);
+ color: var(--dark_basic_text_color);
+ cursor: default;
+ pointer-events: none;
+ }
+}
+
+.tab_number {
+ font-size: 1.6rem;
+}
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
new file mode 100644
index 00000000..e6b68cd4
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
@@ -0,0 +1,93 @@
+import { useTranslation } from "react-i18next";
+import { updateLabelsById } from "@utils";
+import styles from "./TranslatorSelectorOpenButton.module.scss";
+import { TranslatorSelector } from "./translator_selector/TranslatorSelector";
+import { useStore_IsOpenedTranslatorSelector } from "@store";
+import { useLanguageSettings } from "@logics_main";
+import WarningSvg from "@images/warning.svg?react";
+
+export const TranslatorSelectorOpenButton = () => {
+ const { t } = useTranslation();
+ const {
+ currentSelectedYourLanguages,
+ currentSelectedTargetLanguages,
+ currentSelectedPresetTabNumber,
+ currentTranslationEngines,
+ currentSelectedTranslationEngines,
+ } = useLanguageSettings();
+
+ const new_labels = [
+ {id: "CTranslate2", label: t("main_page.translator_ctranslate2")}
+ ];
+
+ const translation_engines = updateLabelsById(currentTranslationEngines.data, new_labels);
+
+ const selected_engine_id = currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data];
+
+ const checkIsSelectedSameLanguage = () => {
+ const your_language_data = currentSelectedYourLanguages.data[currentSelectedPresetTabNumber.data];
+ const target_language_data = currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data];
+
+ const yourLanguage = your_language_data["1"];
+ const yourLanguageName = yourLanguage.language;
+ const yourCountry = yourLanguage.country;
+
+ let is_selected_same_language = false;
+
+ for (const key in target_language_data) {
+ const targetLanguage = target_language_data[key];
+
+ if (targetLanguage.enable) {
+ const targetLanguageName = targetLanguage.language;
+ const targetCountry = targetLanguage.country;
+
+ if (yourLanguageName === targetLanguageName && yourCountry === targetCountry) {
+ is_selected_same_language = true;
+ break;
+ }
+ }
+ }
+
+ return is_selected_same_language;
+ };
+
+ const is_selected_same_language = checkIsSelectedSameLanguage();
+
+ const getSelectedLabel = () => {
+
+ const selected_engine = translation_engines.find(
+ d => d.id === selected_engine_id
+ );
+ return selected_engine?.label;
+ };
+
+ const is_loading = currentTranslationEngines.state === "pending";
+ const selected_label = is_loading ? "Loading..." : getSelectedLabel();
+
+
+ const { currentIsOpenedTranslatorSelector, updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
+
+ const openTranslatorSelector = () => {
+ updateIsOpenedTranslatorSelector(!currentIsOpenedTranslatorSelector.data);
+ };
+
+ return (
+ {props.preset_number}
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.module.scss b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.module.scss
new file mode 100644
index 00000000..463a9c29
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.module.scss
@@ -0,0 +1,36 @@
+.container {
+ position: relative;
+ width: 100%;
+}
+
+.translator_selector_button {
+ position: relative;
+ width: auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 0.2rem;
+ margin: 0.4rem;
+ padding: 0.6rem 0;
+ border-radius: 0.6rem;
+ cursor: pointer;
+ &:hover {
+ background-color: var(--dark_875_color);
+ }
+ &:active {
+ background-color: var(--dark_900_color);
+ }
+}
+
+.label {
+ font-size: 1.2rem;
+ color: var(--dark_basic_text_color);
+ white-space: nowrap;
+}
+
+.warning_svg {
+ margin-left: 0.2rem;
+ padding-bottom: 0.2rem;
+ width: 1.8rem;
+ color: #cb944f;
+}
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx
new file mode 100644
index 00000000..45a45fad
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx
@@ -0,0 +1,68 @@
+import clsx from "clsx";
+import styles from "./TranslatorSelector.module.scss";
+import { useTranslation } from "react-i18next";
+
+import { chunkArray } from "@utils";
+import { useStore_IsOpenedTranslatorSelector } from "@store";
+import { useLanguageSettings } from "@logics_main";
+
+export const TranslatorSelector = ({selected_id, translation_engines, is_selected_same_language}) => { const { t } = useTranslation();
+ const columns = chunkArray(translation_engines, 2);
+
+ return (
+
+
+ : null
+ }
+
+ {currentIsOpenedTranslatorSelector.data &&
+ {t("main_page.translator")}:
+{selected_label}
+ {is_selected_same_language + ?
+
+ );
+};
+
+const TranslatorBox = (props) => {
+ const { setSelectedTranslationEngines} = useLanguageSettings();
+ const { updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
+
+ const box_class_name = clsx(
+ styles.box,
+ { [styles.is_selected]: props.is_selected },
+ { [styles.is_available]: props.is_available }
+ );
+
+ const selectTranslator = () => {
+ if (props.is_selected === false) {
+ setSelectedTranslationEngines(props.id);
+ }
+ updateIsOpenedTranslatorSelector(false);
+ };
+ return (
+
+
+
+ {columns.map((column, column_index) => (
+
+ {is_selected_same_language ?
+
+ {column.map(({ id, label, is_available }) => (
+
+ ))}
+
+
+ : null
+ }
+ + {t("main_page.translator_selector.is_selected_same_language", { + your_language: t("main_page.your_language"), + target_language: t("main_page.target_language"), + translator_ctranslate2: t("main_page.translator_ctranslate2"), + })} +
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss
new file mode 100644
index 00000000..84aea69e
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss
@@ -0,0 +1,91 @@
+.container {
+ position: absolute;
+ bottom: 100%;
+ width: 100%;
+ height: 26rem;
+ background-color: (#000000dd);
+ // background-color: (var(--dark_875_color) + 80);
+ backdrop-filter: blur(0.1rem);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.relative_container {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+.wrapper {
+ // padding: 1rem;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+}
+
+.column_wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+}
+
+$box_size: 6.8rem;
+.box {
+ width: $box_size;
+ height: $box_size;
+ background-color: var(--dark_875_color);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ white-space: pre-wrap;
+ text-align: center;
+ border-radius: 0.6rem;
+ cursor: pointer;
+ &:hover {
+ background-color: var(--dark_825_color);
+ }
+ &:active {
+ background-color: var(--dark_900_color);
+ border: 0.1rem solid var(--primary_300_color);
+ }
+ &.is_selected {
+ border: 0.2rem solid var(--primary_300_color);
+ }
+ &:not(.is_available) {
+ pointer-events: none;
+ background-color: var(--dark_950_color);
+ & .translator_name {
+ color: var(--dark_600_color);
+ }
+ }
+}
+
+.translator_name {
+ font-size: 1.4rem;
+}
+
+.is_selected_same_language_wrapper {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 100%;
+ background-color: (#22222233);
+ display: flex;
+ justify-content: center;
+ align-items: start;
+ pointer-events: none;
+ padding: 4rem 1rem;
+}
+
+.is_selected_same_language_text {
+ font-size: 1.4rem;
+ text-align: center;
+ text-wrap: balance;
+ color: var(--dark_basic_text_color);
+}
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/logo/Logo.jsx b/src-ui/app/main_page/sidebar_section/logo/Logo.jsx
new file mode 100644
index 00000000..0c8ecc2e
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/logo/Logo.jsx
@@ -0,0 +1,23 @@
+import styles from "./Logo.module.scss";
+
+export const Logo = () => {
+ return (
+ {props.label}
+
+
+ );
+};
+
+
+import vrct_logo from "@images/vrct_logo_for_dark_mode.png";
+import chato_img from "@images/chato_white.png";
+import { useIsMainPageCompactMode } from "@logics_main";
+
+export const LogoBox = () => {
+ const { currentIsMainPageCompactMode } = useIsMainPageCompactMode();
+ if (currentIsMainPageCompactMode.data === true) {
+ return
+ {switch_items.map(item => (
+
+
+ ))}
+
+ );
+};
+
+import { useState } from "react";
+
+export const SwitchContainer = ({ switchLabel, switch_id, children, currentState, toggleFunction, SvgComponent }) => {
+ const [is_hovered, setIsHovered] = useState(false);
+ const [is_mouse_down, setIsMouseDown] = useState(false);
+
+ const { currentIsMainPageCompactMode } = useIsMainPageCompactMode();
+
+ const getClassNames = (baseClass) => clsx(baseClass, {
+ [styles.is_compact_mode]: currentIsMainPageCompactMode.data,
+ [styles.is_active]: (currentState.data === true),
+ [styles.is_pending]: (currentState.state === "pending"),
+ [styles.is_hovered]: is_hovered,
+ [styles.is_mouse_down]: is_mouse_down,
+ });
+
+ const onMouseEnter = () => setIsHovered(true);
+ const onMouseLeave = () => setIsHovered(false);
+ const onMouseDown = () => setIsMouseDown(true);
+ const onMouseUp = () => setIsMouseDown(false);
+
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss b/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss
new file mode 100644
index 00000000..dd0df0d8
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss
@@ -0,0 +1,90 @@
+@import "@scss_mixins";
+.container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 0.1rem;
+}
+
+.switch_container {
+ position: relative;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1.6rem 1.4rem;
+ background-color: var(--dark_825_color);
+ cursor: pointer;
+ &:hover {
+ background-color: var(--dark_800_color);
+ }
+ &:active {
+ background-color: var(--dark_875_color);
+ }
+ &.is_compact_mode {
+ padding: 1.5rem;
+ }
+ &.is_pending {
+ pointer-events: none;
+ }
+}
+
+.label_wrapper {
+ display: flex;
+ justify-content: left;
+ align-items: center;
+ gap: 0.8rem;
+}
+
+$basic_label_color: var(--dark_basic_text_color);
+$pending_label_color: var(--dark_500_color);
+.switch_label {
+ font-size: 1.4rem;
+ color: $basic_label_color;
+ &.is_compact_mode {
+ display: none;
+ }
+ &.is_pending {
+ color: $pending_label_color;
+ }
+}
+
+.switch_svg {
+ width: 1.8rem;
+ color: $basic_label_color;
+ &.is_pending {
+ color: $pending_label_color;
+ }
+ &:not(.is_compact_mode) {
+ width: 1.6rem;
+ color: var(--dark_350_color);
+ }
+}
+
+.switch_indicator {
+ position: absolute;
+ top: 50%;
+ right: 0.4rem;
+ transform: translate(-50%, -50%);
+ width: 0.2rem;
+ height: 2.6rem;
+ border-radius: 0.1rem;
+ background-color: var(--primary_300_color);
+ display: none;
+ &.is_compact_mode.is_active {
+ display: block;
+ }
+}
+
+.loader {
+ @include loader(2rem, 0.2rem, left, 50%);
+}
+
+.toggle_control {
+ @include toggle_control_styles;
+ display: flex;
+ justify-content: end;
+ align-items: center;
+ &.is_compact_mode {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/open_settings/OpenSettings.jsx b/src-ui/app/main_page/sidebar_section/open_settings/OpenSettings.jsx
new file mode 100644
index 00000000..5d9225d8
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/open_settings/OpenSettings.jsx
@@ -0,0 +1,19 @@
+import styles from "./OpenSettings.module.scss";
+import { useIsOpenedConfigPage } from "@logics_common";
+import ConfigurationSvg from "@images/configuration.svg?react";
+
+export const OpenSettings = () => {
+ const { setIsOpenedConfigPage } = useIsOpenedConfigPage();
+
+ const openConfigPage = () => {
+ setIsOpenedConfigPage(true);
+ };
+
+ return (
+
+
+
+ {switchLabel}
+ {children} +
+
+
+
+
+ {(currentState.state === "pending")
+ ?
+ : null
+ }
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/open_settings/OpenSettings.module.scss b/src-ui/app/main_page/sidebar_section/open_settings/OpenSettings.module.scss
new file mode 100644
index 00000000..28607b98
--- /dev/null
+++ b/src-ui/app/main_page/sidebar_section/open_settings/OpenSettings.module.scss
@@ -0,0 +1,28 @@
+.container {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ background-color: var(--dark_850_color);
+}
+
+.open_config_page_button {
+ width: auto;
+ margin: 1rem;
+ padding: 0.8rem 0;
+ display: flex;
+ justify-content: center;
+ border-radius: 0.6rem;
+ cursor: pointer;
+ &:hover {
+ background-color: var(--dark_800_color);
+ }
+ &:active {
+ background-color: var(--dark_875_color);
+ }
+}
+
+.configuration_svg {
+ width: 2rem;
+ color: var(--dark_500_color);
+}
\ No newline at end of file
diff --git a/src-ui/app/modal_controller/ModalController.jsx b/src-ui/app/modal_controller/ModalController.jsx
new file mode 100644
index 00000000..022d1271
--- /dev/null
+++ b/src-ui/app/modal_controller/ModalController.jsx
@@ -0,0 +1,32 @@
+import styles from "./ModalController.module.scss";
+import { useStore_OpenedQuickSetting } from "@store";
+import { Vr, VrcMicMuteSyncContainer } from "@setting_box";
+import { UpdateModal } from "./update_modal/UpdateModal";
+
+export const ModalController = () => {
+ const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+ if (currentOpenedQuickSetting.data === "") return null;
+ return (
+
+
+
+
+ );
+};
+
+const QuickSettingsController = () => {
+ const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+
+ switch (currentOpenedQuickSetting.data) {
+ case "overlay":
+ return updateOpenedQuickSetting("")}>
+
+
+
+
+ );
+};
+
+const VersionDescComponent = (props) => {
+ return (
+
+
+
+
+
+
+
+
+ {is_cpu_version ?
+
+
+
+
+
+
+
+ {!is_cpu_version ? : null}
+
+
+
+ {t("update_modal.download_latest_and_restart")}
+
+
+
+
+
+
+ );
+};
+
+const CurrentVersionLabel = (props) => {
+ const { t } = useTranslation();
+
+ if (props.is_latest_version_already) {
+ return {props.desc}
+{t("update_modal.is_latest_version_already")}
; + } + return{t("update_modal.is_current_compute_device")}
; +}; \ No newline at end of file diff --git a/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss b/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss new file mode 100644 index 00000000..085ea43c --- /dev/null +++ b/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss @@ -0,0 +1,151 @@ +.container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 2.4rem; +} + +.wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 8rem; +} + +.update_section { + border: 0.1rem solid var(--dark_600_color); + border-radius: 0.4rem; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + gap: 4rem; + padding: 6rem 2rem; + position: relative; +} +.update_desc { + position: absolute; + top: 100%; + transform: translateY(-50%); + font-size: 1.4rem; + background-color: var(--dark_900_color); + padding: 0 2.8rem; + text-align: center; + font-weight: 400; +} + + +.cpu_section, .cuda_section { + width: 100%; + display: flex; + justify-content: start; + align-items: center; + gap: 3rem; +} + +.button_wrapper { + display: flex; + width: 16rem; + justify-content: space-between; + position: relative; + flex-shrink: 0; +} + +.deny_button, .accept_button { + font-size: 1.6rem; + padding: 1rem; + min-width: 10rem; + flex: 1; + max-width: 20rem; + text-align: center; + border-radius: 0.4rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: var(--dark_basic_text_color); +} + +.accept_button { + background-color: var(--primary_700_color); + position: relative; + overflow: visible; + &:hover { + background-color: var(--primary_450_color); + } + &:active { + background-color: var(--primary_600_color); + } + &.current_compute_version { + &::after { + content: ""; + position: absolute; + top: -1rem; + right: -1rem; + bottom: -1rem; + left: -1rem; + border: 0.1rem solid var(--primary_400_color); + border-radius: 0.4rem; + } + &.is_latest_version_already { + background-color: var(--dark_800_color); + pointer-events: none; + } + } +} + +.deny_button { + background-color: var(--dark_800_color); + &:hover { + background-color: var(--dark_700_color); + } + &:active { + background-color: var(--dark_800_color); + } +} + +.current_version_label { + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + margin: 0 0 0.4rem 0; + font-size: 1.2rem; + width: max-content; + height: max-content; + background-color: var(--dark_900_color); + padding: 0 1rem; + font-weight: 300; + &.is_cuda { + top: 100%; + margin: 0.4rem 0 0 0; + } +} + +.version_desc_container { + display: flex; + flex-direction: column; + gap: 0.4rem; +} + +.version_desc_wrapper { + display: flex; + align-items: center; + gap: 0.6rem; +} +.version_desc_point { + background-color: var(--dark_basic_text_color); + width: 0.3rem; + border-radius: 50%; + aspect-ratio: 1 / 1; +} +.version_desc { + font-size: 1.4rem; + max-width: 48rem; + // text-align: center; + font-weight: 300; + color: var(--dark_basic_text_color); +} \ No newline at end of file diff --git a/src-ui/app/snackbar_controller/SnackbarController.jsx b/src-ui/app/snackbar_controller/SnackbarController.jsx new file mode 100644 index 00000000..dcc8f54a --- /dev/null +++ b/src-ui/app/snackbar_controller/SnackbarController.jsx @@ -0,0 +1,39 @@ +import { clsx } from "clsx"; +import Snackbar from "@mui/material/Snackbar"; +import Slide from "@mui/material/Slide"; + +import styles from "./SnackbarController.module.scss"; +import { useNotificationStatus } from "@logics_common"; + +export const SnackbarController = () => { + const { currentNotificationStatus, closeNotification } = useNotificationStatus(); + + const handleClose = (event, reason) => { + closeNotification(event, reason); + }; + + const snackbar_classname = clsx(styles.snackbar_content, { + [styles.is_success]: currentNotificationStatus.data.status === "success", + [styles.is_error]: currentNotificationStatus.data.status === "error", + }); + + return ( +
+
+
+
+ );
+};
+
+const SlideTransition = (props) => {
+ return
+
+ {currentNotificationStatus.data.message}
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/splash_component/SplashComponent.module.scss b/src-ui/app/splash_component/SplashComponent.module.scss
new file mode 100644
index 00000000..031853d0
--- /dev/null
+++ b/src-ui/app/splash_component/SplashComponent.module.scss
@@ -0,0 +1,8 @@
+.progress_container {
+ position: relative;
+}
+.progress_label {
+ position: absolute;
+ font-size: 1rem;
+ color: var(--dark_basic_text_color);
+}
\ No newline at end of file
diff --git a/src-ui/app/splash_component/download_models_container/DownloadModelsContainer.jsx b/src-ui/app/splash_component/download_models_container/DownloadModelsContainer.jsx
new file mode 100644
index 00000000..9e3d8e67
--- /dev/null
+++ b/src-ui/app/splash_component/download_models_container/DownloadModelsContainer.jsx
@@ -0,0 +1,69 @@
+import styles from "./DownloadModelsContainer.module.scss";
+import vrct_logo_for_dark_mode from "@images/vrct_logo_for_dark_mode.png";
+import vrct_now_downloading from "@images/VRCT_now_downloading.png";
+
+import {
+ useCTranslate2WeightTypeStatus,
+ useWhisperWeightTypeStatus,
+} from "@logics_configs";
+
+export const DownloadModelsContainer = () => {
+ const { currentCTranslate2WeightTypeStatus } = useCTranslate2WeightTypeStatus();
+ const { currentWhisperWeightTypeStatus } = useWhisperWeightTypeStatus();
+
+ const c_translate_2 = currentCTranslate2WeightTypeStatus.data.find(d => d.id === "small");
+ const whisper = currentWhisperWeightTypeStatus.data.find(d => d.id === "base");
+
+ if (c_translate_2.progress === null && whisper.progress === null) return null;
+
+ return (
+
+
+ );
+};
+
+
+const DownloadModelsProgress = (props) => {
+ if (props.progress === null) return null;
+ const circular_progress = Math.floor(props.progress / 5) * 5;
+
+ const progress_color = generateGradientColor({
+ value: circular_progress,
+ colorStart: [242, 242, 242], // #f2f2f2
+ colorEnd: [72, 164, 149], // #48a495
+ });
+
+ return(
+
+
+
+ 
+ 
+
+
+
+ );
+};
+
+
+const generateGradientColor = ({ value, colorStart, colorEnd }) => {
+ const normalizedValue = Math.max(0, Math.min(100, value)) / 100;
+ const interpolatedColor = colorStart.map((start, i) => {
+ const end = colorEnd[i];
+ return Math.round(start + (end - start) * normalizedValue);
+ });
+ const hexColor = `#${interpolatedColor.map(val => val.toString(16).padStart(2, '0')).join('')}`;
+ return hexColor;
+};
\ No newline at end of file
diff --git a/src-ui/app/splash_component/download_models_container/DownloadModelsContainer.module.scss b/src-ui/app/splash_component/download_models_container/DownloadModelsContainer.module.scss
new file mode 100644
index 00000000..0eabf677
--- /dev/null
+++ b/src-ui/app/splash_component/download_models_container/DownloadModelsContainer.module.scss
@@ -0,0 +1,63 @@
+.container {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ overflow: hidden;
+ background-color: var(--dark_888_color);
+}
+
+.progress_container {
+ position: absolute;
+ top: 77%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 90%;
+ gap: 6px;
+ display: flex;
+ flex-direction: column;
+}
+
+.labels_wrapper {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+.logo_img {
+ position: absolute;
+ top: 42%;
+ left: 50%;
+ width: 280px;
+ transform: translate(-50%, -50%);
+}
+.vrct_now_downloading_img {
+ position: absolute;
+ bottom: 2px;
+ right: 10px;
+ width: 300px;
+}
+
+.progress_bar_container {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ justify-content: center;
+}
+
+.progress_bar_wrapper {
+ background-color: var(--dark_800_color);
+}
+
+$progress_ease: cubic-bezier(0, 1, 0.75, 1);
+.progress_bar {
+ height: 8px;
+ transition: width 0.3s $progress_ease;
+}
+
+.progress_label {
+ text-align: end;
+ font-size: 12px;
+ color: var(--dark_400_color);
+}
\ No newline at end of file
diff --git a/src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.jsx b/src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.jsx
new file mode 100644
index 00000000..93843faa
--- /dev/null
+++ b/src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.jsx
@@ -0,0 +1,39 @@
+import clsx from "clsx";
+import styles from "./StartUpProgressContainer.module.scss";
+
+import { useInitProgress } from "@logics_common";
+import chat_white_square from "@images/chato_white_square.png";
+import vrct_explanation from "@images/vrchat_chatbox_trasnlator_transcription.png";
+import vrct_starting_up from "@images/vrct_starting_up.png";
+
+export const StartUpProgressContainer = () => {
+ const { currentInitProgress } = useInitProgress();
+
+ const progress = currentInitProgress.data;
+ return (
+
+
+
+ {`${props.type_label}: ${Math.round(props.progress)}%`}
+
+
+ );
+};
diff --git a/src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.module.scss b/src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.module.scss
new file mode 100644
index 00000000..23646c92
--- /dev/null
+++ b/src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.module.scss
@@ -0,0 +1,100 @@
+$progress_ease: cubic-bezier(0, 1, 0.75, 1);
+
+.container {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ overflow: hidden;
+}
+
+.progress_bar_wrapper {
+ position: absolute;
+ top: 48%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ display: flex;
+ gap: 36px;
+}
+
+.progress_bar {
+ width: 60px;
+ height: 2px;
+ position: relative;
+}
+
+.progress_bar::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 0;
+ height: 100%;
+ background-color: var(--dark_200_color);
+ transition: width 0.3s $progress_ease;
+}
+
+.progress_bar.progressed::before {
+ width: 100%;
+}
+
+.progress_bar:last-child::before {
+ background-color: var(--primary_400_color);
+}
+
+
+.chato_box {
+ position: relative;
+ top: 0;
+ transform: translateY(-100%);
+ width: 100%;
+ height: 8rem;
+ overflow: hidden;
+}
+
+.chato_img {
+ position: absolute;
+ top: 150%;
+ left: 51%;
+ transform: translate(-50%, -50%) rotate(-90deg);
+ width: 2.8rem;
+ transition: all 0.3s $progress_ease 0.2s;
+}
+
+.progress_bar.progressed .chato_img {
+ top: 50%;
+ transform: translate(-50%, -50%) rotate(30deg);
+ animation: infinite-rotation 20s linear infinite 0.5s;
+}
+
+@keyframes infinite-rotation {
+ from {
+ transform: translate(-50%, -50%) rotate(30deg);
+ }
+ to {
+ transform: translate(-50%, -50%) rotate(390deg);
+ }
+}
+
+.labels_wrapper {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+.vrct_starting_up_img {
+ position: absolute;
+ top: 68%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 100px;
+ // transform: translate(-50%, 50%);
+}
+.vrct_explanation_img {
+ position: absolute;
+ bottom: 4px;
+ right: 10px;
+ width: 280px;
+ // transform: translate(-50%, 50%);
+}
\ No newline at end of file
diff --git a/src-ui/app/updating_component/UpdatingComponent.jsx b/src-ui/app/updating_component/UpdatingComponent.jsx
new file mode 100644
index 00000000..5dce4765
--- /dev/null
+++ b/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 (
+
+ {[...Array(4)].map((_, index) => (
+
+
+ {index === 3
+ ?
+
+ ))}
+
+
+
+ : null
+ }
+
+ 
+ 
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/updating_component/UpdatingComponent.module.scss b/src-ui/app/updating_component/UpdatingComponent.module.scss
new file mode 100644
index 00000000..87d7e39f
--- /dev/null
+++ b/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);
+ }
+}
\ No newline at end of file
diff --git a/src-ui/app/window_title_bar/WindowTitleBar.jsx b/src-ui/app/window_title_bar/WindowTitleBar.jsx
new file mode 100644
index 00000000..1350ed94
--- /dev/null
+++ b/src-ui/app/window_title_bar/WindowTitleBar.jsx
@@ -0,0 +1,50 @@
+// import clsx from "clsx";
+import styles from "./WindowTitleBar.module.scss";
+import XMarkSvg from "@images/cancel.svg?react";
+import SquareSvg from "@images/square.svg?react";
+import LineSvg from "@images/line.svg?react";
+import VrctSvg from "@images/vrct.svg?react";
+
+import { appWindow } from "@tauri-apps/api/window";
+
+export const WindowTitleBar = () => {
+
+ const minimize = () => {
+ appWindow.minimize();
+ };
+
+ const maximize = async () => {
+ const maximizeState = await appWindow.isMaximized();
+ if (!maximizeState) {
+ appWindow.maximize();
+ } else {
+ appWindow.unmaximize();
+ }
+ };
+
+ const close = () => {
+ appWindow.close();
+ };
+
+ return (
+
+
+
+
+
+ {t("main_page.updating")}
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/window_title_bar/WindowTitleBar.module.scss b/src-ui/app/window_title_bar/WindowTitleBar.module.scss
new file mode 100644
index 00000000..8aa100b1
--- /dev/null
+++ b/src-ui/app/window_title_bar/WindowTitleBar.module.scss
@@ -0,0 +1,84 @@
+.container {
+ width: 100%;
+ background-color: var(--dark_900_color);
+ flex-shrink: 0;
+ display: flex;
+}
+
+.wrapper {
+ flex-shrink: 0;
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
+ height: var(--title_bar_height);
+ margin-top: 0.4rem;
+}
+
+.title_wrapper {
+ padding-left: 1rem;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.title_svg {
+ color: var(--dark_800_color);
+ width: 4rem;
+ height: 100%;
+
+}
+
+.window_control_wrapper {
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.minimize_button, .maximize_button, .close_button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ width: 2.8rem;
+ margin-bottom: 0.4rem;
+
+ cursor: pointer;
+ &:hover {
+ .x_mark_svg, .square_svg, .line_svg {
+ color: var(--dark_100_color);
+ }
+ }
+}
+.minimize_button, .maximize_button {
+ &:hover {
+ background-color: var(--dark_800_color);
+ }
+ &:active {
+ background-color: var(--dark_950_color);
+ }
+}
+.close_button {
+ &:hover {
+ background-color: #bb4448;
+ }
+ &:active {
+ background-color: #9c3938;
+ }
+}
+
+.x_mark_svg, .square_svg, .line_svg {
+ color: var(--dark_450_color);
+ height: 100%;
+}
+.x_mark_svg {
+ width: 1.8rem;
+}
+.square_svg {
+ width: 1.2rem;
+}
+.line_svg {
+ padding-top: 0.1rem;
+ width: 1.8rem;
+}
diff --git a/src-ui/assets/VRCT.svg b/src-ui/assets/VRCT.svg
new file mode 100644
index 00000000..75503182
--- /dev/null
+++ b/src-ui/assets/VRCT.svg
@@ -0,0 +1,3 @@
+
diff --git a/src-ui/assets/VRCT_now_downloading.png b/src-ui/assets/VRCT_now_downloading.png
new file mode 100644
index 00000000..1b73375a
Binary files /dev/null and b/src-ui/assets/VRCT_now_downloading.png differ
diff --git a/src-ui/assets/about_vrct/contributors_github_icon.png b/src-ui/assets/about_vrct/contributors_github_icon.png
new file mode 100644
index 00000000..7742d535
Binary files /dev/null and b/src-ui/assets/about_vrct/contributors_github_icon.png differ
diff --git a/src-ui/assets/about_vrct/contributors_members.png b/src-ui/assets/about_vrct/contributors_members.png
new file mode 100644
index 00000000..4b0cf192
Binary files /dev/null and b/src-ui/assets/about_vrct/contributors_members.png differ
diff --git a/src-ui/assets/about_vrct/contributors_section_title.png b/src-ui/assets/about_vrct/contributors_section_title.png
new file mode 100644
index 00000000..641a535a
Binary files /dev/null and b/src-ui/assets/about_vrct/contributors_section_title.png differ
diff --git a/src-ui/assets/about_vrct/contributors_x_icon.png b/src-ui/assets/about_vrct/contributors_x_icon.png
new file mode 100644
index 00000000..26f5f0c4
Binary files /dev/null and b/src-ui/assets/about_vrct/contributors_x_icon.png differ
diff --git a/src-ui/assets/about_vrct/dev_github_icon.png b/src-ui/assets/about_vrct/dev_github_icon.png
new file mode 100644
index 00000000..f6fcee5c
Binary files /dev/null and b/src-ui/assets/about_vrct/dev_github_icon.png differ
diff --git a/src-ui/assets/about_vrct/dev_misya.png b/src-ui/assets/about_vrct/dev_misya.png
new file mode 100644
index 00000000..1c70b1a7
Binary files /dev/null and b/src-ui/assets/about_vrct/dev_misya.png differ
diff --git a/src-ui/assets/about_vrct/dev_section_title.png b/src-ui/assets/about_vrct/dev_section_title.png
new file mode 100644
index 00000000..4f1da8a2
Binary files /dev/null and b/src-ui/assets/about_vrct/dev_section_title.png differ
diff --git a/src-ui/assets/about_vrct/dev_shiina.png b/src-ui/assets/about_vrct/dev_shiina.png
new file mode 100644
index 00000000..9b25ea2f
Binary files /dev/null and b/src-ui/assets/about_vrct/dev_shiina.png differ
diff --git a/src-ui/assets/about_vrct/dev_x_icon.png b/src-ui/assets/about_vrct/dev_x_icon.png
new file mode 100644
index 00000000..50534df7
Binary files /dev/null and b/src-ui/assets/about_vrct/dev_x_icon.png differ
diff --git a/src-ui/assets/about_vrct/localization_members.png b/src-ui/assets/about_vrct/localization_members.png
new file mode 100644
index 00000000..b12cd838
Binary files /dev/null and b/src-ui/assets/about_vrct/localization_members.png differ
diff --git a/src-ui/assets/about_vrct/localization_section_title.png b/src-ui/assets/about_vrct/localization_section_title.png
new file mode 100644
index 00000000..a1eaebf5
Binary files /dev/null and b/src-ui/assets/about_vrct/localization_section_title.png differ
diff --git a/src-ui/assets/about_vrct/poster_showcase_section_title.png b/src-ui/assets/about_vrct/poster_showcase_section_title.png
new file mode 100644
index 00000000..5a4b00fa
Binary files /dev/null and b/src-ui/assets/about_vrct/poster_showcase_section_title.png differ
diff --git a/src-ui/assets/about_vrct/project_link_booth.png b/src-ui/assets/about_vrct/project_link_booth.png
new file mode 100644
index 00000000..14af933a
Binary files /dev/null and b/src-ui/assets/about_vrct/project_link_booth.png differ
diff --git a/src-ui/assets/about_vrct/project_link_contact_us.png b/src-ui/assets/about_vrct/project_link_contact_us.png
new file mode 100644
index 00000000..c21bc7ef
Binary files /dev/null and b/src-ui/assets/about_vrct/project_link_contact_us.png differ
diff --git a/src-ui/assets/about_vrct/project_link_documents.png b/src-ui/assets/about_vrct/project_link_documents.png
new file mode 100644
index 00000000..cd9723e4
Binary files /dev/null and b/src-ui/assets/about_vrct/project_link_documents.png differ
diff --git a/src-ui/assets/about_vrct/project_link_vrct_github.png b/src-ui/assets/about_vrct/project_link_vrct_github.png
new file mode 100644
index 00000000..eb05f15f
Binary files /dev/null and b/src-ui/assets/about_vrct/project_link_vrct_github.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/bar_asagao.png b/src-ui/assets/about_vrct/showcased_worlds/bar_asagao.png
new file mode 100644
index 00000000..33443710
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/bar_asagao.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/cafe_cian.png b/src-ui/assets/about_vrct/showcased_worlds/cafe_cian.png
new file mode 100644
index 00000000..b0b6333d
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/cafe_cian.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/cam.png b/src-ui/assets/about_vrct/showcased_worlds/cam.png
new file mode 100644
index 00000000..f720964b
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/cam.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/celestial_blooms.png b/src-ui/assets/about_vrct/showcased_worlds/celestial_blooms.png
new file mode 100644
index 00000000..19f23031
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/celestial_blooms.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/chakachaka_multipurpose_room.png b/src-ui/assets/about_vrct/showcased_worlds/chakachaka_multipurpose_room.png
new file mode 100644
index 00000000..0ca16190
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/chakachaka_multipurpose_room.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/chill_sleep_room_03.png b/src-ui/assets/about_vrct/showcased_worlds/chill_sleep_room_03.png
new file mode 100644
index 00000000..b60d6e4b
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/chill_sleep_room_03.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/chill_sleep_room_04.png b/src-ui/assets/about_vrct/showcased_worlds/chill_sleep_room_04.png
new file mode 100644
index 00000000..cb4fddf9
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/chill_sleep_room_04.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/ehon_no_heikousekai.png b/src-ui/assets/about_vrct/showcased_worlds/ehon_no_heikousekai.png
new file mode 100644
index 00000000..5fba744a
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/ehon_no_heikousekai.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/ehon_no_heikousekai_1st_anniv.png b/src-ui/assets/about_vrct/showcased_worlds/ehon_no_heikousekai_1st_anniv.png
new file mode 100644
index 00000000..b8344aa7
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/ehon_no_heikousekai_1st_anniv.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/ehon_no_heikousekai_jimusho.png b/src-ui/assets/about_vrct/showcased_worlds/ehon_no_heikousekai_jimusho.png
new file mode 100644
index 00000000..fa9ba539
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/ehon_no_heikousekai_jimusho.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/ikoiba.png b/src-ui/assets/about_vrct/showcased_worlds/ikoiba.png
new file mode 100644
index 00000000..68ed5a0c
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/ikoiba.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/ippaidou.png b/src-ui/assets/about_vrct/showcased_worlds/ippaidou.png
new file mode 100644
index 00000000..6b3b800a
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/ippaidou.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/japan_street.png b/src-ui/assets/about_vrct/showcased_worlds/japan_street.png
new file mode 100644
index 00000000..941a4f05
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/japan_street.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/japanese_culture_osenbeito.png b/src-ui/assets/about_vrct/showcased_worlds/japanese_culture_osenbeito.png
new file mode 100644
index 00000000..cbfa4100
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/japanese_culture_osenbeito.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/kimodameshi.png b/src-ui/assets/about_vrct/showcased_worlds/kimodameshi.png
new file mode 100644
index 00000000..9d9515b4
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/kimodameshi.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/kokekkopiyopiyo.png b/src-ui/assets/about_vrct/showcased_worlds/kokekkopiyopiyo.png
new file mode 100644
index 00000000..6894b7fa
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/kokekkopiyopiyo.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/kr_jp_exchange.png b/src-ui/assets/about_vrct/showcased_worlds/kr_jp_exchange.png
new file mode 100644
index 00000000..99e46767
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/kr_jp_exchange.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/kuroinu_work_room.png b/src-ui/assets/about_vrct/showcased_worlds/kuroinu_work_room.png
new file mode 100644
index 00000000..875c72b1
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/kuroinu_work_room.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/language_exchange_park.png b/src-ui/assets/about_vrct/showcased_worlds/language_exchange_park.png
new file mode 100644
index 00000000..5e104f69
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/language_exchange_park.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/language_exchange_tervern.png b/src-ui/assets/about_vrct/showcased_worlds/language_exchange_tervern.png
new file mode 100644
index 00000000..17470129
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/language_exchange_tervern.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/mamehinata_dogrun.png b/src-ui/assets/about_vrct/showcased_worlds/mamehinata_dogrun.png
new file mode 100644
index 00000000..15718f31
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/mamehinata_dogrun.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/monogatari_meetup.png b/src-ui/assets/about_vrct/showcased_worlds/monogatari_meetup.png
new file mode 100644
index 00000000..a1591fdb
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/monogatari_meetup.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/nihongokurabu.png b/src-ui/assets/about_vrct/showcased_worlds/nihongokurabu.png
new file mode 100644
index 00000000..b02c232e
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/nihongokurabu.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/omoshiro_kotoba_asobi_game.png b/src-ui/assets/about_vrct/showcased_worlds/omoshiro_kotoba_asobi_game.png
new file mode 100644
index 00000000..b85db698
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/omoshiro_kotoba_asobi_game.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/oto_no_shitatei.png b/src-ui/assets/about_vrct/showcased_worlds/oto_no_shitatei.png
new file mode 100644
index 00000000..b88abd08
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/oto_no_shitatei.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/parallel_collar.png b/src-ui/assets/about_vrct/showcased_worlds/parallel_collar.png
new file mode 100644
index 00000000..5085ba01
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/parallel_collar.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/poker_room_elysion.png b/src-ui/assets/about_vrct/showcased_worlds/poker_room_elysion.png
new file mode 100644
index 00000000..ae1fd928
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/poker_room_elysion.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/re_yatuha_room.png b/src-ui/assets/about_vrct/showcased_worlds/re_yatuha_room.png
new file mode 100644
index 00000000..9b714da8
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/re_yatuha_room.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/saya_town.png b/src-ui/assets/about_vrct/showcased_worlds/saya_town.png
new file mode 100644
index 00000000..430e413a
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/saya_town.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/sayasuke_hotel.png b/src-ui/assets/about_vrct/showcased_worlds/sayasuke_hotel.png
new file mode 100644
index 00000000..3c6922c8
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/sayasuke_hotel.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/silakan_datang_ke_rumahku.png b/src-ui/assets/about_vrct/showcased_worlds/silakan_datang_ke_rumahku.png
new file mode 100644
index 00000000..2f9448fc
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/silakan_datang_ke_rumahku.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/smokerz_guild_v2.png b/src-ui/assets/about_vrct/showcased_worlds/smokerz_guild_v2.png
new file mode 100644
index 00000000..0f737f8b
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/smokerz_guild_v2.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/stretch_club_starting_from_minus.png b/src-ui/assets/about_vrct/showcased_worlds/stretch_club_starting_from_minus.png
new file mode 100644
index 00000000..c24580a7
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/stretch_club_starting_from_minus.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/study_japanese_world_japanichijou.png b/src-ui/assets/about_vrct/showcased_worlds/study_japanese_world_japanichijou.png
new file mode 100644
index 00000000..9e1fcfa2
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/study_japanese_world_japanichijou.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/su.png b/src-ui/assets/about_vrct/showcased_worlds/su.png
new file mode 100644
index 00000000..49cf3522
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/su.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/sushi_guru_annex.png b/src-ui/assets/about_vrct/showcased_worlds/sushi_guru_annex.png
new file mode 100644
index 00000000..14a0758e
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/sushi_guru_annex.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/sushi_stand_guruguru.png b/src-ui/assets/about_vrct/showcased_worlds/sushi_stand_guruguru.png
new file mode 100644
index 00000000..bffef7ef
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/sushi_stand_guruguru.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/tyuuniti_kouryuukai.png b/src-ui/assets/about_vrct/showcased_worlds/tyuuniti_kouryuukai.png
new file mode 100644
index 00000000..c643aae4
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/tyuuniti_kouryuukai.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/uj_club.png b/src-ui/assets/about_vrct/showcased_worlds/uj_club.png
new file mode 100644
index 00000000..d232d809
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/uj_club.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/una_yosh.png b/src-ui/assets/about_vrct/showcased_worlds/una_yosh.png
new file mode 100644
index 00000000..9b4b0709
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/una_yosh.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/usanezumi_shrine2.png b/src-ui/assets/about_vrct/showcased_worlds/usanezumi_shrine2.png
new file mode 100644
index 00000000..0a6e4a08
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/usanezumi_shrine2.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/yoru_color.png b/src-ui/assets/about_vrct/showcased_worlds/yoru_color.png
new file mode 100644
index 00000000..2e52c94d
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/yoru_color.png differ
diff --git a/src-ui/assets/about_vrct/showcased_worlds/yuttari_eikaiwa.png b/src-ui/assets/about_vrct/showcased_worlds/yuttari_eikaiwa.png
new file mode 100644
index 00000000..8135655b
Binary files /dev/null and b/src-ui/assets/about_vrct/showcased_worlds/yuttari_eikaiwa.png differ
diff --git a/src-ui/assets/about_vrct/special_thanks_members.png b/src-ui/assets/about_vrct/special_thanks_members.png
new file mode 100644
index 00000000..80be4a66
Binary files /dev/null and b/src-ui/assets/about_vrct/special_thanks_members.png differ
diff --git a/src-ui/assets/about_vrct/special_thanks_message_en.png b/src-ui/assets/about_vrct/special_thanks_message_en.png
new file mode 100644
index 00000000..58db5a87
Binary files /dev/null and b/src-ui/assets/about_vrct/special_thanks_message_en.png differ
diff --git a/src-ui/assets/about_vrct/special_thanks_message_ja.png b/src-ui/assets/about_vrct/special_thanks_message_ja.png
new file mode 100644
index 00000000..493a6bf0
Binary files /dev/null and b/src-ui/assets/about_vrct/special_thanks_message_ja.png differ
diff --git a/src-ui/assets/about_vrct/special_thanks_section_title.png b/src-ui/assets/about_vrct/special_thanks_section_title.png
new file mode 100644
index 00000000..ea64a970
Binary files /dev/null and b/src-ui/assets/about_vrct/special_thanks_section_title.png differ
diff --git a/src-ui/assets/about_vrct/vrchat_disclaimer.png b/src-ui/assets/about_vrct/vrchat_disclaimer.png
new file mode 100644
index 00000000..c6e3dbb0
Binary files /dev/null and b/src-ui/assets/about_vrct/vrchat_disclaimer.png differ
diff --git a/src-ui/assets/about_vrct/vrct_logo_for_about_vrct.png b/src-ui/assets/about_vrct/vrct_logo_for_about_vrct.png
new file mode 100644
index 00000000..4f461409
Binary files /dev/null and b/src-ui/assets/about_vrct/vrct_logo_for_about_vrct.png differ
diff --git a/src-ui/assets/about_vrct/vrct_posters/authors/poster_images_authors_en.png b/src-ui/assets/about_vrct/vrct_posters/authors/poster_images_authors_en.png
new file mode 100644
index 00000000..c3488c62
Binary files /dev/null and b/src-ui/assets/about_vrct/vrct_posters/authors/poster_images_authors_en.png differ
diff --git a/src-ui/assets/about_vrct/vrct_posters/authors/poster_images_authors_ja.png b/src-ui/assets/about_vrct/vrct_posters/authors/poster_images_authors_ja.png
new file mode 100644
index 00000000..3f2b1b00
Binary files /dev/null and b/src-ui/assets/about_vrct/vrct_posters/authors/poster_images_authors_ja.png differ
diff --git a/src-ui/assets/about_vrct/vrct_posters/authors/poster_images_authors_m_en.png b/src-ui/assets/about_vrct/vrct_posters/authors/poster_images_authors_m_en.png
new file mode 100644
index 00000000..95241ae1
Binary files /dev/null and b/src-ui/assets/about_vrct/vrct_posters/authors/poster_images_authors_m_en.png differ
diff --git a/src-ui/assets/about_vrct/vrct_posters/authors/poster_images_authors_m_ja.png b/src-ui/assets/about_vrct/vrct_posters/authors/poster_images_authors_m_ja.png
new file mode 100644
index 00000000..28df62d0
Binary files /dev/null and b/src-ui/assets/about_vrct/vrct_posters/authors/poster_images_authors_m_ja.png differ
diff --git a/src-ui/assets/about_vrct/vrct_posters/iya_vrct_manga_en.png b/src-ui/assets/about_vrct/vrct_posters/iya_vrct_manga_en.png
new file mode 100644
index 00000000..f73e762a
Binary files /dev/null and b/src-ui/assets/about_vrct/vrct_posters/iya_vrct_manga_en.png differ
diff --git a/src-ui/assets/about_vrct/vrct_posters/iya_vrct_manga_ja.png b/src-ui/assets/about_vrct/vrct_posters/iya_vrct_manga_ja.png
new file mode 100644
index 00000000..3fc0ff40
Binary files /dev/null and b/src-ui/assets/about_vrct/vrct_posters/iya_vrct_manga_ja.png differ
diff --git a/src-ui/assets/about_vrct/vrct_posters/iya_vrct_manga_ko.png b/src-ui/assets/about_vrct/vrct_posters/iya_vrct_manga_ko.png
new file mode 100644
index 00000000..e40f769c
Binary files /dev/null and b/src-ui/assets/about_vrct/vrct_posters/iya_vrct_manga_ko.png differ
diff --git a/src-ui/assets/about_vrct/vrct_posters/iya_vrct_poster_cn.png b/src-ui/assets/about_vrct/vrct_posters/iya_vrct_poster_cn.png
new file mode 100644
index 00000000..6e3a5be4
Binary files /dev/null and b/src-ui/assets/about_vrct/vrct_posters/iya_vrct_poster_cn.png differ
diff --git a/src-ui/assets/about_vrct/vrct_posters/iya_vrct_poster_en.png b/src-ui/assets/about_vrct/vrct_posters/iya_vrct_poster_en.png
new file mode 100644
index 00000000..22352320
Binary files /dev/null and b/src-ui/assets/about_vrct/vrct_posters/iya_vrct_poster_en.png differ
diff --git a/src-ui/assets/about_vrct/vrct_posters/iya_vrct_poster_ja.png b/src-ui/assets/about_vrct/vrct_posters/iya_vrct_poster_ja.png
new file mode 100644
index 00000000..041d346e
Binary files /dev/null and b/src-ui/assets/about_vrct/vrct_posters/iya_vrct_poster_ja.png differ
diff --git a/src-ui/assets/about_vrct/vrct_posters/iya_vrct_poster_ko.png b/src-ui/assets/about_vrct/vrct_posters/iya_vrct_poster_ko.png
new file mode 100644
index 00000000..268a6e24
Binary files /dev/null and b/src-ui/assets/about_vrct/vrct_posters/iya_vrct_poster_ko.png differ
diff --git a/src-ui/assets/add.svg b/src-ui/assets/add.svg
new file mode 100644
index 00000000..6bb80d3b
--- /dev/null
+++ b/src-ui/assets/add.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/arrow_left.svg b/src-ui/assets/arrow_left.svg
new file mode 100644
index 00000000..3c024b0e
--- /dev/null
+++ b/src-ui/assets/arrow_left.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/cancel.svg b/src-ui/assets/cancel.svg
new file mode 100644
index 00000000..81f096a9
--- /dev/null
+++ b/src-ui/assets/cancel.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/chato_icon_fill.png b/src-ui/assets/chato_icon_fill.png
new file mode 100644
index 00000000..4ce20133
Binary files /dev/null and b/src-ui/assets/chato_icon_fill.png differ
diff --git a/src-ui/assets/chato_white.png b/src-ui/assets/chato_white.png
new file mode 100644
index 00000000..f99621f7
Binary files /dev/null and b/src-ui/assets/chato_white.png differ
diff --git a/src-ui/assets/chato_white_square.png b/src-ui/assets/chato_white_square.png
new file mode 100644
index 00000000..bfb6f60d
Binary files /dev/null and b/src-ui/assets/chato_white_square.png differ
diff --git a/src-ui/assets/configuration.svg b/src-ui/assets/configuration.svg
new file mode 100644
index 00000000..30040dd3
--- /dev/null
+++ b/src-ui/assets/configuration.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/external_link.svg b/src-ui/assets/external_link.svg
new file mode 100644
index 00000000..70a71891
--- /dev/null
+++ b/src-ui/assets/external_link.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/foreground.svg b/src-ui/assets/foreground.svg
new file mode 100644
index 00000000..fdc2e961
--- /dev/null
+++ b/src-ui/assets/foreground.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/headphones.svg b/src-ui/assets/headphones.svg
new file mode 100644
index 00000000..f10c55ce
--- /dev/null
+++ b/src-ui/assets/headphones.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/help.svg b/src-ui/assets/help.svg
new file mode 100644
index 00000000..2f67b2ae
--- /dev/null
+++ b/src-ui/assets/help.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/line.svg b/src-ui/assets/line.svg
new file mode 100644
index 00000000..fc4d40ff
--- /dev/null
+++ b/src-ui/assets/line.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/mic.svg b/src-ui/assets/mic.svg
new file mode 100644
index 00000000..cdf9b3bd
--- /dev/null
+++ b/src-ui/assets/mic.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/narrow_arrow_down.svg b/src-ui/assets/narrow_arrow_down.svg
new file mode 100644
index 00000000..c97aef15
--- /dev/null
+++ b/src-ui/assets/narrow_arrow_down.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/open_folder.svg b/src-ui/assets/open_folder.svg
new file mode 100644
index 00000000..d1917059
--- /dev/null
+++ b/src-ui/assets/open_folder.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/redo.svg b/src-ui/assets/redo.svg
new file mode 100644
index 00000000..7a2fa599
--- /dev/null
+++ b/src-ui/assets/redo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/refresh.svg b/src-ui/assets/refresh.svg
new file mode 100644
index 00000000..42841d22
--- /dev/null
+++ b/src-ui/assets/refresh.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/refresh_2.svg b/src-ui/assets/refresh_2.svg
new file mode 100644
index 00000000..e6fb5367
--- /dev/null
+++ b/src-ui/assets/refresh_2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/remove.svg b/src-ui/assets/remove.svg
new file mode 100644
index 00000000..189ba7fe
--- /dev/null
+++ b/src-ui/assets/remove.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/send_message.svg b/src-ui/assets/send_message.svg
new file mode 100644
index 00000000..d1ed3d32
--- /dev/null
+++ b/src-ui/assets/send_message.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/square.svg b/src-ui/assets/square.svg
new file mode 100644
index 00000000..352f0923
--- /dev/null
+++ b/src-ui/assets/square.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/supporters/c_fanbox_1620x580.png b/src-ui/assets/supporters/c_fanbox_1620x580.png
new file mode 100644
index 00000000..5c677f49
Binary files /dev/null and b/src-ui/assets/supporters/c_fanbox_1620x580.png differ
diff --git a/src-ui/assets/supporters/chato_expressions/chato_expression_01.png b/src-ui/assets/supporters/chato_expressions/chato_expression_01.png
new file mode 100644
index 00000000..849ce433
Binary files /dev/null and b/src-ui/assets/supporters/chato_expressions/chato_expression_01.png differ
diff --git a/src-ui/assets/supporters/chato_expressions/chato_expression_02.png b/src-ui/assets/supporters/chato_expressions/chato_expression_02.png
new file mode 100644
index 00000000..8274f9b0
Binary files /dev/null and b/src-ui/assets/supporters/chato_expressions/chato_expression_02.png differ
diff --git a/src-ui/assets/supporters/chato_expressions/chato_expression_03.png b/src-ui/assets/supporters/chato_expressions/chato_expression_03.png
new file mode 100644
index 00000000..4cc17cf6
Binary files /dev/null and b/src-ui/assets/supporters/chato_expressions/chato_expression_03.png differ
diff --git a/src-ui/assets/supporters/chato_expressions/chato_expression_04.png b/src-ui/assets/supporters/chato_expressions/chato_expression_04.png
new file mode 100644
index 00000000..e39e830f
Binary files /dev/null and b/src-ui/assets/supporters/chato_expressions/chato_expression_04.png differ
diff --git a/src-ui/assets/supporters/chato_expressions/chato_expression_05.png b/src-ui/assets/supporters/chato_expressions/chato_expression_05.png
new file mode 100644
index 00000000..c0544641
Binary files /dev/null and b/src-ui/assets/supporters/chato_expressions/chato_expression_05.png differ
diff --git a/src-ui/assets/supporters/chato_expressions/chato_expression_06.png b/src-ui/assets/supporters/chato_expressions/chato_expression_06.png
new file mode 100644
index 00000000..21b04d09
Binary files /dev/null and b/src-ui/assets/supporters/chato_expressions/chato_expression_06.png differ
diff --git a/src-ui/assets/supporters/chato_expressions/chato_expression_07.png b/src-ui/assets/supporters/chato_expressions/chato_expression_07.png
new file mode 100644
index 00000000..e53800aa
Binary files /dev/null and b/src-ui/assets/supporters/chato_expressions/chato_expression_07.png differ
diff --git a/src-ui/assets/supporters/fanbox_button.png b/src-ui/assets/supporters/fanbox_button.png
new file mode 100644
index 00000000..7bf90626
Binary files /dev/null and b/src-ui/assets/supporters/fanbox_button.png differ
diff --git a/src-ui/assets/supporters/kofi_preparing.png b/src-ui/assets/supporters/kofi_preparing.png
new file mode 100644
index 00000000..d674b8fb
Binary files /dev/null and b/src-ui/assets/supporters/kofi_preparing.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_01.png b/src-ui/assets/supporters/supporters_images/supporter_01.png
new file mode 100644
index 00000000..d43986e8
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_01.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_02.png b/src-ui/assets/supporters/supporters_images/supporter_02.png
new file mode 100644
index 00000000..013b1f74
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_02.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_03.png b/src-ui/assets/supporters/supporters_images/supporter_03.png
new file mode 100644
index 00000000..b5f47a6d
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_03.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_04.png b/src-ui/assets/supporters/supporters_images/supporter_04.png
new file mode 100644
index 00000000..edf48965
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_04.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_05.png b/src-ui/assets/supporters/supporters_images/supporter_05.png
new file mode 100644
index 00000000..a8874947
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_05.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_06.png b/src-ui/assets/supporters/supporters_images/supporter_06.png
new file mode 100644
index 00000000..c7b10514
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_06.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_07.png b/src-ui/assets/supporters/supporters_images/supporter_07.png
new file mode 100644
index 00000000..bb86cfa0
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_07.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_08.png b/src-ui/assets/supporters/supporters_images/supporter_08.png
new file mode 100644
index 00000000..45ff7330
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_08.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_09.png b/src-ui/assets/supporters/supporters_images/supporter_09.png
new file mode 100644
index 00000000..4564b031
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_09.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_10.png b/src-ui/assets/supporters/supporters_images/supporter_10.png
new file mode 100644
index 00000000..8ce252f0
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_10.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_11.png b/src-ui/assets/supporters/supporters_images/supporter_11.png
new file mode 100644
index 00000000..cfa86fc3
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_11.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_12.png b/src-ui/assets/supporters/supporters_images/supporter_12.png
new file mode 100644
index 00000000..49f34c2d
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_12.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_13.png b/src-ui/assets/supporters/supporters_images/supporter_13.png
new file mode 100644
index 00000000..7bd136a3
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_13.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_14.png b/src-ui/assets/supporters/supporters_images/supporter_14.png
new file mode 100644
index 00000000..9e50bde8
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_14.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_15.png b/src-ui/assets/supporters/supporters_images/supporter_15.png
new file mode 100644
index 00000000..f445a329
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_15.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_16.png b/src-ui/assets/supporters/supporters_images/supporter_16.png
new file mode 100644
index 00000000..815d2f12
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_16.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_17.png b/src-ui/assets/supporters/supporters_images/supporter_17.png
new file mode 100644
index 00000000..b5ddd12e
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_17.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_18.png b/src-ui/assets/supporters/supporters_images/supporter_18.png
new file mode 100644
index 00000000..d63f2288
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_18.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_19.png b/src-ui/assets/supporters/supporters_images/supporter_19.png
new file mode 100644
index 00000000..0f89d1ef
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_19.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_20.png b/src-ui/assets/supporters/supporters_images/supporter_20.png
new file mode 100644
index 00000000..ee1fc327
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_20.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_21.png b/src-ui/assets/supporters/supporters_images/supporter_21.png
new file mode 100644
index 00000000..b76bb6c3
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_21.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_22.png b/src-ui/assets/supporters/supporters_images/supporter_22.png
new file mode 100644
index 00000000..b0006be4
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_22.png differ
diff --git a/src-ui/assets/supporters/supporters_images/supporter_23.png b/src-ui/assets/supporters/supporters_images/supporter_23.png
new file mode 100644
index 00000000..207be07e
Binary files /dev/null and b/src-ui/assets/supporters/supporters_images/supporter_23.png differ
diff --git a/src-ui/assets/supporters/vrct_supporters_title.png b/src-ui/assets/supporters/vrct_supporters_title.png
new file mode 100644
index 00000000..f606a502
Binary files /dev/null and b/src-ui/assets/supporters/vrct_supporters_title.png differ
diff --git a/src-ui/assets/swap_icon.png b/src-ui/assets/swap_icon.png
new file mode 100644
index 00000000..8fa1cf53
Binary files /dev/null and b/src-ui/assets/swap_icon.png differ
diff --git a/src-ui/assets/translation.svg b/src-ui/assets/translation.svg
new file mode 100644
index 00000000..3038de79
--- /dev/null
+++ b/src-ui/assets/translation.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/triangle.svg b/src-ui/assets/triangle.svg
new file mode 100644
index 00000000..ff16b225
--- /dev/null
+++ b/src-ui/assets/triangle.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/assets/vrchat_chatbox_trasnlator_transcription.png b/src-ui/assets/vrchat_chatbox_trasnlator_transcription.png
new file mode 100644
index 00000000..5c4304d8
Binary files /dev/null and b/src-ui/assets/vrchat_chatbox_trasnlator_transcription.png differ
diff --git a/src-ui/assets/vrct_logo_for_dark_mode.png b/src-ui/assets/vrct_logo_for_dark_mode.png
new file mode 100644
index 00000000..53add076
Binary files /dev/null and b/src-ui/assets/vrct_logo_for_dark_mode.png differ
diff --git a/src-ui/assets/vrct_starting_up.png b/src-ui/assets/vrct_starting_up.png
new file mode 100644
index 00000000..5e366749
Binary files /dev/null and b/src-ui/assets/vrct_starting_up.png differ
diff --git a/src-ui/assets/warning.svg b/src-ui/assets/warning.svg
new file mode 100644
index 00000000..72221ecf
--- /dev/null
+++ b/src-ui/assets/warning.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/common_components/checkbox/Checkbox.jsx b/src-ui/common_components/checkbox/Checkbox.jsx
new file mode 100644
index 00000000..b9cdd7d3
--- /dev/null
+++ b/src-ui/common_components/checkbox/Checkbox.jsx
@@ -0,0 +1,52 @@
+import { clsx } from "clsx";
+import styles from "./Checkbox.module.scss";
+export const Checkbox = ({
+ checkboxId,
+ variable,
+ toggleFunction,
+ size = "2.8rem",
+ color = "var(--primary_600_color)",
+ borderWidth = "0.2rem",
+ padding = "2rem",
+}) => {
+
+ const wrapper_class_names = clsx(styles.checkbox_wrapper, {
+ [styles.is_disabled]: variable.state === "pending",
+ });
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src-ui/common_components/checkbox/Checkbox.module.scss b/src-ui/common_components/checkbox/Checkbox.module.scss
new file mode 100644
index 00000000..70f47654
--- /dev/null
+++ b/src-ui/common_components/checkbox/Checkbox.module.scss
@@ -0,0 +1,66 @@
+@import "@scss_mixins";
+
+.checkbox_container {
+ height: 100%;
+ display: flex;
+ justify-content: end;
+ align-items: center;
+}
+
+.checkbox_wrapper {
+ display: inline-block;
+ cursor: pointer;
+ padding: var(--checkbox-padding, 2rem);
+ position: relative;
+
+ &:hover {
+ & .cbx {
+ border: var(--checkbox-color, var(--primary_600_color)) solid var(--checkbox-border-width, 0.2rem);
+ }
+ }
+ &.is_disabled {
+ pointer-events: none;
+ & .cbx {
+ border-color: var(--primary_800_color);
+ }
+ }
+}
+
+.checkbox_wrapper .cbx {
+ display: block;
+ width: var(--checkbox-size, 2.8rem);
+ height: var(--checkbox-size, 2.8rem);
+ border-radius: 0.4rem;
+ border: var(--dark_700_color) solid var(--checkbox-border-width, 0.2rem);
+ transition: all 0.15s ease;
+ padding: calc(var(--checkbox-size, 2.8rem) / 7);
+}
+
+.checkbox_wrapper .cbx svg {
+ fill: none;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ stroke: var(--dark_basic_text_color);
+ stroke-width: calc(var(--checkbox-border-width, 0.2rem) / 2);
+ stroke-dasharray: 1.7rem;
+ stroke-dashoffset: 1.7rem;
+}
+
+.checkbox_wrapper input[type="checkbox"] {
+ display: none;
+ visibility: hidden;
+}
+
+.checkbox_wrapper input[type="checkbox"]:checked + .cbx {
+ background-color: var(--checkbox-color, var(--primary_600_color));
+ border: none;
+}
+
+.checkbox_wrapper input[type="checkbox"]:checked + .cbx svg {
+ stroke-dashoffset: 0;
+ transition: all 0.15s ease;
+}
+
+.loader {
+ @include loader(2rem, 0.2rem, right, -2rem);
+}
diff --git a/src-ui/common_components/index.js b/src-ui/common_components/index.js
new file mode 100644
index 00000000..244dff53
--- /dev/null
+++ b/src-ui/common_components/index.js
@@ -0,0 +1 @@
+export { Checkbox } from "./checkbox/Checkbox";
\ No newline at end of file
diff --git a/src-ui/common_css/mixins.scss b/src-ui/common_css/mixins.scss
new file mode 100644
index 00000000..4e563960
--- /dev/null
+++ b/src-ui/common_css/mixins.scss
@@ -0,0 +1,101 @@
+// デフォルト変数
+$default_loader_size: 2rem !default;
+$default_loader_line_width: 0.2rem !default;
+
+// Loader Mixin
+@mixin loader($loader_size: $default_loader_size, $loader_line_width: $default_loader_line_width, $position: right, $position_amount: 0) {
+ $half_line_width: calc($loader_line_width / 2);
+ $calc_translate: calc(-50% + #{$half_line_width});
+
+ position: absolute;
+ top: calc(50% - #{$half_line_width});
+ #{$position}: $position_amount;
+ transform: translate($calc_translate, $calc_translate);
+ width: $loader_size;
+ height: $loader_size;
+ border-radius: 50%;
+ display: inline-block;
+ border-top: $loader_line_width solid var(--dark_400_color);
+ border-right: $loader_line_width solid transparent;
+ animation: rotate_animation 0.6s linear infinite;
+
+ &::after {
+ content: '';
+ position: absolute;
+ width: $loader_size;
+ height: $loader_size;
+ border-radius: 50%;
+ border-bottom: $loader_line_width solid var(--primary_400_color);
+ border-left: $loader_line_width solid transparent;
+ }
+
+ @keyframes rotate_animation {
+ 0% {
+ transform: translate($calc_translate, $calc_translate) rotate(0deg);
+ }
+ 100% {
+ transform: translate($calc_translate, $calc_translate) rotate(360deg);
+ }
+ }
+}
+
+
+
+$toggle_background_color_on: var(--primary_400_color);
+$toggle_background_color_off: var(--dark_775_color);
+$toggle_control_color: var(--dark_400_color);
+$toggle_width: 4rem;
+$toggle_height: 1.6rem;
+$toggle_gutter: 0.1rem;
+$toggle_radius: 50%;
+$toggle_control_speed: .15s;
+$toggle_control_ease: ease-out;
+
+$toggle_radius: calc($toggle_height / 2);
+$toggle_control_size: $toggle_height - calc($toggle_gutter * 2);
+
+@mixin toggle_control_styles {
+ display: block;
+ position: relative;
+ height: 100%;
+ width: auto;
+ .control {
+ position: relative;
+ height: $toggle_height;
+ width: $toggle_width;
+ border-radius: $toggle_radius;
+ background-color: $toggle_background_color_off;
+ &:after {
+ content: "";
+ position: absolute;
+ left: $toggle_gutter;
+ top: $toggle_gutter;
+ width: $toggle_control_size;
+ height: $toggle_control_size;
+ border-radius: $toggle_radius;
+ background: $toggle_control_color;
+ transition: left $toggle_control_speed $toggle_control_ease;
+ }
+ &.is_pending:after{
+ background-color: var(--dark_600_color);
+ }
+ &.is_hovered {
+ background-color: var(--dark_725_color);
+ }
+ &.is_mouse_down {
+ background-color: var(--dark_825_color);
+ }
+ &.is_active {
+ background-color: $toggle_background_color_on;
+ &.is_hovered {
+ background-color: var(--primary_350_color);
+ }
+ &.is_mouse_down {
+ background-color: var(--primary_700_color);
+ }
+ &:after {
+ left: $toggle_width - $toggle_control_size - $toggle_gutter;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src-ui/logics/common/index.js b/src-ui/logics/common/index.js
new file mode 100644
index 00000000..e63b28db
--- /dev/null
+++ b/src-ui/logics/common/index.js
@@ -0,0 +1,12 @@
+export { useComputeMode } from "./useComputeMode";
+export { useInitProgress } from "./useInitProgress";
+export { useIsBackendReady } from "./useIsBackendReady";
+export { useWindow } from "./useWindow";
+export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage";
+export { useIsSoftwareUpdateAvailable } from "./useIsSoftwareUpdateAvailable";
+export { useIsSoftwareUpdating } from "./useIsSoftwareUpdating";
+export { useNotificationStatus } from "./useNotificationStatus";
+export { useOpenFolder } from "./useOpenFolder";
+export { useMessage } from "./useMessage";
+export { useUpdateSoftware } from "./useUpdateSoftware";
+export { useVolume } from "./useVolume";
\ No newline at end of file
diff --git a/src-ui/logics/common/useComputeMode.js b/src-ui/logics/common/useComputeMode.js
new file mode 100644
index 00000000..87f39006
--- /dev/null
+++ b/src-ui/logics/common/useComputeMode.js
@@ -0,0 +1,10 @@
+import { useStore_ComputeMode } from "@store";
+
+export const useComputeMode = () => {
+ const { currentComputeMode, updateComputeMode } = useStore_ComputeMode();
+
+ return {
+ currentComputeMode,
+ updateComputeMode,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/common/useInitProgress.js b/src-ui/logics/common/useInitProgress.js
new file mode 100644
index 00000000..e0fee792
--- /dev/null
+++ b/src-ui/logics/common/useInitProgress.js
@@ -0,0 +1,10 @@
+import { useStore_InitProgress } from "@store";
+
+export const useInitProgress = () => {
+ const { currentInitProgress, updateInitProgress } = useStore_InitProgress();
+
+ return {
+ currentInitProgress,
+ updateInitProgress,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/common/useIsBackendReady.js b/src-ui/logics/common/useIsBackendReady.js
new file mode 100644
index 00000000..868028da
--- /dev/null
+++ b/src-ui/logics/common/useIsBackendReady.js
@@ -0,0 +1,15 @@
+import { useStore_IsBackendReady } from "@store";
+
+export const useIsBackendReady = () => {
+ const { currentIsBackendReady, updateIsBackendReady } = useStore_IsBackendReady();
+
+ const setIsBackendReady = (is_ready) => {
+ updateIsBackendReady(is_ready);
+ };
+
+ return {
+ currentIsBackendReady,
+ setIsBackendReady,
+ updateIsBackendReady,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/common/useIsOpenedConfigPage.js b/src-ui/logics/common/useIsOpenedConfigPage.js
new file mode 100644
index 00000000..588dcf78
--- /dev/null
+++ b/src-ui/logics/common/useIsOpenedConfigPage.js
@@ -0,0 +1,15 @@
+import { useStore_IsOpenedConfigPage } from "@store";
+
+export const useIsOpenedConfigPage = () => {
+ const { currentIsOpenedConfigPage, updateIsOpenedConfigPage } = useStore_IsOpenedConfigPage();
+
+ const setIsOpenedConfigPage = (is_opened) => {
+ updateIsOpenedConfigPage(is_opened);
+ };
+
+ return {
+ currentIsOpenedConfigPage,
+ setIsOpenedConfigPage,
+ updateIsOpenedConfigPage,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/common/useIsSoftwareUpdateAvailable.js b/src-ui/logics/common/useIsSoftwareUpdateAvailable.js
new file mode 100644
index 00000000..569a3949
--- /dev/null
+++ b/src-ui/logics/common/useIsSoftwareUpdateAvailable.js
@@ -0,0 +1,10 @@
+import { useStore_IsSoftwareUpdateAvailable } from "@store";
+
+export const useIsSoftwareUpdateAvailable = () => {
+ const { currentIsSoftwareUpdateAvailable, updateIsSoftwareUpdateAvailable } = useStore_IsSoftwareUpdateAvailable();
+
+ return {
+ currentIsSoftwareUpdateAvailable,
+ updateIsSoftwareUpdateAvailable,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/common/useIsSoftwareUpdating.js b/src-ui/logics/common/useIsSoftwareUpdating.js
new file mode 100644
index 00000000..04507514
--- /dev/null
+++ b/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,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/common/useMessage.js b/src-ui/logics/common/useMessage.js
new file mode 100644
index 00000000..416555a6
--- /dev/null
+++ b/src-ui/logics/common/useMessage.js
@@ -0,0 +1,110 @@
+import {
+ useStore_MessageLogs,
+ useStore_MessageInputValue,
+} from "@store";
+
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMessage = () => {
+ const { currentMessageLogs, addMessageLogs, updateMessageLogs } = useStore_MessageLogs();
+ const { currentMessageInputValue, updateMessageInputValue } = useStore_MessageInputValue();
+ const { asyncStdoutToPython } = useStdoutToPython();
+
+ const sendMessage = (message) => {
+ const uuid = crypto.randomUUID();
+ const send_message_object = {
+ id: uuid,
+ message: message,
+ };
+ asyncStdoutToPython("/run/send_message_box", send_message_object);
+
+ addMessageLogs({
+ id: uuid,
+ category: "sent",
+ status: "pending",
+ created_at: generateTimeData(),
+ messages: {
+ original: message,
+ translated: [],
+ },
+ });
+ };
+
+ const addSystemMessageLog = (message) => {
+ const uuid = crypto.randomUUID();
+ const date = generateTimeData();
+
+ addMessageLogs({
+ id: uuid,
+ category: "system",
+ status: "system",
+ created_at: date,
+ messages: {message: message},
+ });
+ };
+
+ const updateSentMessageLogById = (payload) => {
+ updateMessageLogs(updateItemById(payload.id, payload.translation));
+ };
+ const addSentMessageLog = (payload) => {
+ const message_object = generateMessageObject(payload, "sent");
+ addMessageLogs(message_object);
+ };
+ const addReceivedMessageLog = (payload) => {
+ const message_object = generateMessageObject(payload, "received");
+ addMessageLogs(message_object);
+ };
+
+ const startTyping = () => {
+ asyncStdoutToPython("/run/typing_message_box");
+ };
+ const stopTyping = () => {
+ asyncStdoutToPython("/run/stop_typing_message_box");
+ };
+
+ return {
+ currentMessageLogs,
+ sendMessage,
+ addSystemMessageLog,
+ updateSentMessageLogById,
+ addSentMessageLog,
+ addReceivedMessageLog,
+
+ currentMessageInputValue,
+ updateMessageInputValue,
+
+ startTyping,
+ stopTyping,
+ };
+};
+
+const generateTimeData = () => {
+ const data = new Date().toLocaleTimeString(
+ "ja-JP",
+ { hour12: false, hour: "2-digit", minute: "2-digit" },
+ );
+ return data;
+};
+
+const generateMessageObject = (data, category) => {
+ return {
+ id: crypto.randomUUID(),
+ created_at: generateTimeData(),
+ category: category,
+ status: "ok",
+ messages: {
+ original: data.message,
+ translated: data.translation,
+ },
+ };
+};
+
+const updateItemById = (id, translated_data) => (current_items) => {
+ return current_items.data.map(item => {
+ if (item.id === id) {
+ item.status = "ok";
+ item.messages.translated = translated_data;
+ }
+ return item;
+ });
+};
\ No newline at end of file
diff --git a/src-ui/logics/common/useNotificationStatus.js b/src-ui/logics/common/useNotificationStatus.js
new file mode 100644
index 00000000..f36c0c45
--- /dev/null
+++ b/src-ui/logics/common/useNotificationStatus.js
@@ -0,0 +1,42 @@
+import { useStore_NotificationStatus } from "@store";
+
+export const useNotificationStatus = () => {
+ const { currentNotificationStatus, updateNotificationStatus } = useStore_NotificationStatus();
+
+ const generateRandomKey = () => Math.random();
+
+ const showNotification_Error = (message) => {
+ updateNotificationStatus({
+ status: "error",
+ is_open: true,
+ key: generateRandomKey(),
+ message: message,
+ });
+ };
+
+ const showNotification_Success = (message) => {
+ updateNotificationStatus({
+ status: "success",
+ is_open: true,
+ key: generateRandomKey(),
+ message: message,
+ });
+ };
+
+ const closeNotification = (event, reason) => {
+ if (reason === "clickaway") return;
+ updateNotificationStatus((prev) => ({
+ ...prev.data,
+ is_open: false,
+ }));
+ };
+
+ return {
+ currentNotificationStatus,
+ updateNotificationStatus,
+
+ showNotification_Error,
+ showNotification_Success,
+ closeNotification,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/common/useOpenFolder.js b/src-ui/logics/common/useOpenFolder.js
new file mode 100644
index 00000000..202ef5ad
--- /dev/null
+++ b/src-ui/logics/common/useOpenFolder.js
@@ -0,0 +1,17 @@
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useOpenFolder = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const openFolder_MessageLogs = () => {
+ asyncStdoutToPython("/run/open_filepath_logs");
+ };
+
+ const openFolder_ConfigFile = () => {
+ asyncStdoutToPython("/run/open_filepath_config_file");
+ };
+
+ return {
+ openFolder_MessageLogs,
+ openFolder_ConfigFile,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/common/useUpdateSoftware.js b/src-ui/logics/common/useUpdateSoftware.js
new file mode 100644
index 00000000..f3d2f1cf
--- /dev/null
+++ b/src-ui/logics/common/useUpdateSoftware.js
@@ -0,0 +1,17 @@
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useUpdateSoftware = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const updateSoftware = () => {
+ asyncStdoutToPython("/run/update_software");
+ };
+
+ const updateSoftware_CUDA = () => {
+ asyncStdoutToPython("/run/update_cuda_software");
+ };
+
+ return {
+ updateSoftware,
+ updateSoftware_CUDA,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/common/useVolume.js b/src-ui/logics/common/useVolume.js
new file mode 100644
index 00000000..b3e2165b
--- /dev/null
+++ b/src-ui/logics/common/useVolume.js
@@ -0,0 +1,62 @@
+import {
+ useStore_MicVolume,
+ useStore_SpeakerVolume,
+ useStore_MicThresholdCheckStatus,
+ useStore_SpeakerThresholdCheckStatus,
+} from "@store";
+
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useVolume = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { updateMicVolume } = useStore_MicVolume();
+ const { updateSpeakerVolume } = useStore_SpeakerVolume();
+ const {
+ currentMicThresholdCheckStatus,
+ updateMicThresholdCheckStatus,
+ pendingMicThresholdCheckStatus,
+ } = useStore_MicThresholdCheckStatus();
+ const {
+ currentSpeakerThresholdCheckStatus,
+ updateSpeakerThresholdCheckStatus,
+ pendingSpeakerThresholdCheckStatus,
+ } = useStore_SpeakerThresholdCheckStatus();
+
+ return {
+ volumeCheckStart_Mic: () => {
+ pendingMicThresholdCheckStatus();
+ asyncStdoutToPython("/set/enable/check_mic_threshold");
+ },
+ volumeCheckStop_Mic: () => {
+ pendingMicThresholdCheckStatus();
+ asyncStdoutToPython("/set/disable/check_mic_threshold");
+ },
+ updateVolumeVariable_Mic: (payload) => {
+ updateMicVolume(payload);
+ },
+ currentMicThresholdCheckStatus: currentMicThresholdCheckStatus,
+ updateMicThresholdCheckStatus: (payload) => {
+ updateMicThresholdCheckStatus(payload);
+ if (payload === false) updateMicVolume("0");
+ },
+
+ volumeCheckStart_Speaker: () => {
+ updateSpeakerVolume("0");
+ pendingSpeakerThresholdCheckStatus();
+ asyncStdoutToPython("/set/enable/check_speaker_threshold");
+ },
+ volumeCheckStop_Speaker: () => {
+ pendingSpeakerThresholdCheckStatus();
+ asyncStdoutToPython("/set/disable/check_speaker_threshold");
+ },
+ updateVolumeVariable_Speaker: (payload) => {
+ updateSpeakerVolume(payload);
+ },
+ currentSpeakerThresholdCheckStatus: currentSpeakerThresholdCheckStatus,
+ updateSpeakerThresholdCheckStatus: (payload) => {
+ updateSpeakerThresholdCheckStatus(payload);
+ if (payload === false) updateSpeakerVolume("0");
+ }
+
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/common/useWindow.js b/src-ui/logics/common/useWindow.js
new file mode 100644
index 00000000..7d04fd74
--- /dev/null
+++ b/src-ui/logics/common/useWindow.js
@@ -0,0 +1,136 @@
+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();
+ const { x, y } = position;
+
+ const size = await appWindow.outerSize();
+ const { width, height } = size;
+
+ return {
+ x_pos: x,
+ y_pos: y,
+ width: width,
+ height: height
+ };
+ } catch (err) {
+ console.error("Error getting window position and size:", err);
+ }
+ };
+
+ const asyncSaveWindowGeometry = async () => {
+ const minimized = await appWindow.isMinimized();
+ if (minimized === true) return; // don't save while the window is minimized.
+ const data = await asyncGetWindowGeometry();
+ asyncStdoutToPython("/set/data/main_window_geometry", data);
+ };
+
+ const restoreWindowGeometry = async (data) => {
+ try {
+ const monitors = await availableMonitors();
+ const { x_pos, y_pos, width, height } = data;
+
+ // ウィンドウが属するモニターを特定
+ const targetMonitor = monitors.find(monitor =>
+ x_pos >= monitor.position.x &&
+ y_pos >= monitor.position.y &&
+ x_pos < monitor.position.x + monitor.size.width &&
+ y_pos < monitor.position.y + monitor.size.height
+ ) || await currentMonitor();
+
+ if (targetMonitor) {
+ const { width: monitorWidth, height: monitorHeight } = targetMonitor.size;
+ const { x: monitorX, y: monitorY } = targetMonitor.position;
+
+ // ウィンドウのサイズをモニターサイズ内に収める
+ let adjustedWidth = Math.min(parseInt(width), monitorWidth);
+ let adjustedHeight = Math.min(parseInt(height), monitorHeight);
+
+ // ウィンドウの位置をモニターの範囲内に収める
+ let adjustedX = parseInt(x_pos);
+ let adjustedY = parseInt(y_pos);
+
+ // X座標がモニター左にはみ出ている場合
+ if (adjustedX < monitorX) {
+ adjustedX = monitorX;
+ }
+ // X座標がモニター右にはみ出ている場合
+ else if (adjustedX + adjustedWidth > monitorX + monitorWidth) {
+ adjustedX = monitorX + monitorWidth - adjustedWidth;
+ }
+
+ // Y座標がモニター上にはみ出ている場合
+ if (adjustedY < monitorY) {
+ adjustedY = monitorY;
+ }
+ // Y座標がモニター下にはみ出ている場合
+ else if (adjustedY + adjustedHeight > monitorY + monitorHeight) {
+ adjustedY = monitorY + monitorHeight - adjustedHeight;
+ }
+
+ await appWindow.setPosition(new LogicalPosition(adjustedX, adjustedY));
+ await appWindow.setSize(new LogicalSize(adjustedWidth, adjustedHeight));
+ } else {
+ console.error("Monitor information could not be retrieved.");
+ }
+ } catch (err) {
+ console.error("Error setting window position and size:", err);
+ }
+ };
+
+ 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(asyncFunction, 200);
+ });
+
+ return () => {
+ unlistenResize.then((dispose) => dispose());
+ };
+ }, []);
+
+ useEffect(() => {
+ let moveTimeout;
+ const unlistenMove = appWindow.onMoved(() => {
+ clearTimeout(moveTimeout);
+ moveTimeout = setTimeout(asyncSaveWindowGeometry, 200);
+ });
+
+ return () => {
+ unlistenMove.then((dispose) => dispose());
+ };
+ }, []);
+
+ return null;
+ };
+
+ return {
+ WindowGeometryController,
+ asyncSaveWindowGeometry,
+ restoreWindowGeometry,
+ asyncUpdateBreakPoint,
+ };
+};
diff --git a/src-ui/logics/configs/advanced_settings/useOscIpAddress.js b/src-ui/logics/configs/advanced_settings/useOscIpAddress.js
new file mode 100644
index 00000000..702a6d98
--- /dev/null
+++ b/src-ui/logics/configs/advanced_settings/useOscIpAddress.js
@@ -0,0 +1,24 @@
+import { useStore_OscIpAddress } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useOscIpAddress = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentOscIpAddress, updateOscIpAddress, pendingOscIpAddress } = useStore_OscIpAddress();
+
+ const getOscIpAddress = () => {
+ pendingOscIpAddress();
+ asyncStdoutToPython("/get/data/osc_ip_address");
+ };
+
+ const setOscIpAddress = (osc_ip_address) => {
+ pendingOscIpAddress();
+ asyncStdoutToPython("/set/data/osc_ip_address", osc_ip_address);
+ };
+
+ return {
+ currentOscIpAddress,
+ getOscIpAddress,
+ updateOscIpAddress,
+ setOscIpAddress,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/advanced_settings/useOscPort.js b/src-ui/logics/configs/advanced_settings/useOscPort.js
new file mode 100644
index 00000000..947d613d
--- /dev/null
+++ b/src-ui/logics/configs/advanced_settings/useOscPort.js
@@ -0,0 +1,24 @@
+import { useStore_OscPort } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useOscPort = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentOscPort, updateOscPort, pendingOscPort } = useStore_OscPort();
+
+ const getOscPort = () => {
+ pendingOscPort();
+ asyncStdoutToPython("/get/data/osc_port");
+ };
+
+ const setOscPort = (osc_port) => {
+ pendingOscPort();
+ asyncStdoutToPython("/set/data/osc_port", osc_port);
+ };
+
+ return {
+ currentOscPort,
+ getOscPort,
+ updateOscPort,
+ setOscPort,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/appearance/useMessageLogUiScaling.js b/src-ui/logics/configs/appearance/useMessageLogUiScaling.js
new file mode 100644
index 00000000..625f6263
--- /dev/null
+++ b/src-ui/logics/configs/appearance/useMessageLogUiScaling.js
@@ -0,0 +1,24 @@
+import { useStore_MessageLogUiScaling } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMessageLogUiScaling = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentMessageLogUiScaling, updateMessageLogUiScaling, pendingMessageLogUiScaling } = useStore_MessageLogUiScaling();
+
+ const getMessageLogUiScaling = () => {
+ pendingMessageLogUiScaling();
+ asyncStdoutToPython("/get/data/textbox_ui_scaling");
+ };
+
+ const setMessageLogUiScaling = (selected_ui_scaling) => {
+ pendingMessageLogUiScaling();
+ asyncStdoutToPython("/set/data/textbox_ui_scaling", selected_ui_scaling);
+ };
+
+ return {
+ currentMessageLogUiScaling,
+ getMessageLogUiScaling,
+ updateMessageLogUiScaling,
+ setMessageLogUiScaling,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/appearance/useRestoreWindowGeometry.js b/src-ui/logics/configs/appearance/useRestoreWindowGeometry.js
new file mode 100644
index 00000000..2cc618be
--- /dev/null
+++ b/src-ui/logics/configs/appearance/useRestoreWindowGeometry.js
@@ -0,0 +1,28 @@
+// import { useStore_RestoreWindowGeometry } from "@store";
+// import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+// export const useRestoreWindowGeometry = () => {
+// const { asyncStdoutToPython } = useStdoutToPython();
+// const { currentRestoreWindowGeometry, updateRestoreWindowGeometry, pendingRestoreWindowGeometry } = useStore_RestoreWindowGeometry();
+
+// const getRestoreWindowGeometry = () => {
+// pendingRestoreWindowGeometry();
+// asyncStdoutToPython("/get/data/restore_main_window_geometry");
+// };
+
+// const toggleRestoreWindowGeometry = () => {
+// pendingRestoreWindowGeometry();
+// if (currentRestoreWindowGeometry.data) {
+// asyncStdoutToPython("/set/disable/restore_main_window_geometry");
+// } else {
+// asyncStdoutToPython("/set/enable/restore_main_window_geometry");
+// }
+// };
+
+// return {
+// currentRestoreWindowGeometry,
+// getRestoreWindowGeometry,
+// toggleRestoreWindowGeometry,
+// updateRestoreWindowGeometry,
+// };
+// };
\ No newline at end of file
diff --git a/src-ui/logics/configs/appearance/useSelectedFontFamily.js b/src-ui/logics/configs/appearance/useSelectedFontFamily.js
new file mode 100644
index 00000000..bfb43029
--- /dev/null
+++ b/src-ui/logics/configs/appearance/useSelectedFontFamily.js
@@ -0,0 +1,24 @@
+import { useStore_SelectedFontFamily } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedFontFamily = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSelectedFontFamily, updateSelectedFontFamily, pendingSelectedFontFamily } = useStore_SelectedFontFamily();
+
+ const getSelectedFontFamily = () => {
+ pendingSelectedFontFamily();
+ asyncStdoutToPython("/get/data/font_family");
+ };
+
+ const setSelectedFontFamily = (selected_font_family) => {
+ pendingSelectedFontFamily();
+ asyncStdoutToPython("/set/data/font_family", selected_font_family);
+ };
+
+ return {
+ currentSelectedFontFamily,
+ getSelectedFontFamily,
+ updateSelectedFontFamily,
+ setSelectedFontFamily,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/appearance/useSendMessageButtonType.js b/src-ui/logics/configs/appearance/useSendMessageButtonType.js
new file mode 100644
index 00000000..f69a51f2
--- /dev/null
+++ b/src-ui/logics/configs/appearance/useSendMessageButtonType.js
@@ -0,0 +1,24 @@
+import { useStore_SendMessageButtonType } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSendMessageButtonType = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSendMessageButtonType, updateSendMessageButtonType, pendingSendMessageButtonType } = useStore_SendMessageButtonType();
+
+ const getSendMessageButtonType = () => {
+ pendingSendMessageButtonType();
+ asyncStdoutToPython("/get/data/send_message_button_type");
+ };
+
+ const setSendMessageButtonType = (selected_type) => {
+ pendingSendMessageButtonType();
+ asyncStdoutToPython("/set/data/send_message_button_type", selected_type);
+ };
+
+ return {
+ currentSendMessageButtonType,
+ getSendMessageButtonType,
+ setSendMessageButtonType,
+ updateSendMessageButtonType,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/appearance/useTransparency.js b/src-ui/logics/configs/appearance/useTransparency.js
new file mode 100644
index 00000000..9ab7429f
--- /dev/null
+++ b/src-ui/logics/configs/appearance/useTransparency.js
@@ -0,0 +1,24 @@
+import { useStore_Transparency } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useTransparency = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentTransparency, updateTransparency, pendingTransparency } = useStore_Transparency();
+
+ const getTransparency = () => {
+ pendingTransparency();
+ asyncStdoutToPython("/get/data/transparency");
+ };
+
+ const setTransparency = (selected_transparency) => {
+ pendingTransparency();
+ asyncStdoutToPython("/set/data/transparency", selected_transparency);
+ };
+
+ return {
+ currentTransparency,
+ getTransparency,
+ updateTransparency,
+ setTransparency,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/appearance/useUiLanguage.js b/src-ui/logics/configs/appearance/useUiLanguage.js
new file mode 100644
index 00000000..149a8fb3
--- /dev/null
+++ b/src-ui/logics/configs/appearance/useUiLanguage.js
@@ -0,0 +1,24 @@
+import { useStore_UiLanguage } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useUiLanguage = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentUiLanguage, updateUiLanguage, pendingUiLanguage } = useStore_UiLanguage();
+
+ const getUiLanguage = () => {
+ pendingUiLanguage();
+ asyncStdoutToPython("/get/data/ui_language");
+ };
+
+ const setUiLanguage = (selected_ui_language) => {
+ pendingUiLanguage();
+ asyncStdoutToPython("/set/data/ui_language", selected_ui_language);
+ };
+
+ return {
+ currentUiLanguage,
+ getUiLanguage,
+ updateUiLanguage,
+ setUiLanguage,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/appearance/useUiScaling.js b/src-ui/logics/configs/appearance/useUiScaling.js
new file mode 100644
index 00000000..501118f1
--- /dev/null
+++ b/src-ui/logics/configs/appearance/useUiScaling.js
@@ -0,0 +1,24 @@
+import { useStore_UiScaling } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useUiScaling = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentUiScaling, updateUiScaling, pendingUiScaling } = useStore_UiScaling();
+
+ const getUiScaling = () => {
+ pendingUiScaling();
+ asyncStdoutToPython("/get/data/ui_scaling");
+ };
+
+ const setUiScaling = (selected_ui_scaling) => {
+ pendingUiScaling();
+ asyncStdoutToPython("/set/data/ui_scaling", selected_ui_scaling);
+ };
+
+ return {
+ currentUiScaling,
+ getUiScaling,
+ updateUiScaling,
+ setUiScaling,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/device/useEnableAutoMicSelect.js b/src-ui/logics/configs/device/useEnableAutoMicSelect.js
new file mode 100644
index 00000000..1370d055
--- /dev/null
+++ b/src-ui/logics/configs/device/useEnableAutoMicSelect.js
@@ -0,0 +1,28 @@
+import { useStore_EnableAutoMicSelect } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useEnableAutoMicSelect = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentEnableAutoMicSelect, updateEnableAutoMicSelect, pendingEnableAutoMicSelect } = useStore_EnableAutoMicSelect();
+
+ const getEnableAutoMicSelect = () => {
+ pendingEnableAutoMicSelect();
+ asyncStdoutToPython("/get/data/auto_mic_select");
+ };
+
+ const toggleEnableAutoMicSelect = () => {
+ pendingEnableAutoMicSelect();
+ if (currentEnableAutoMicSelect.data) {
+ asyncStdoutToPython("/set/disable/auto_mic_select");
+ } else {
+ asyncStdoutToPython("/set/enable/auto_mic_select");
+ }
+ };
+
+ return {
+ currentEnableAutoMicSelect,
+ getEnableAutoMicSelect,
+ updateEnableAutoMicSelect,
+ toggleEnableAutoMicSelect,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/device/useEnableAutoSpeakerSelect.js b/src-ui/logics/configs/device/useEnableAutoSpeakerSelect.js
new file mode 100644
index 00000000..d43184de
--- /dev/null
+++ b/src-ui/logics/configs/device/useEnableAutoSpeakerSelect.js
@@ -0,0 +1,28 @@
+import { useStore_EnableAutoSpeakerSelect } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useEnableAutoSpeakerSelect = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentEnableAutoSpeakerSelect, updateEnableAutoSpeakerSelect, pendingEnableAutoSpeakerSelect } = useStore_EnableAutoSpeakerSelect();
+
+ const getEnableAutoSpeakerSelect = () => {
+ pendingEnableAutoSpeakerSelect();
+ asyncStdoutToPython("/get/data/auto_speaker_select");
+ };
+
+ const toggleEnableAutoSpeakerSelect = () => {
+ pendingEnableAutoSpeakerSelect();
+ if (currentEnableAutoSpeakerSelect.data) {
+ asyncStdoutToPython("/set/disable/auto_speaker_select");
+ } else {
+ asyncStdoutToPython("/set/enable/auto_speaker_select");
+ }
+ };
+
+ return {
+ currentEnableAutoSpeakerSelect,
+ getEnableAutoSpeakerSelect,
+ updateEnableAutoSpeakerSelect,
+ toggleEnableAutoSpeakerSelect,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/device/useMicDeviceList.js b/src-ui/logics/configs/device/useMicDeviceList.js
new file mode 100644
index 00000000..196b32cf
--- /dev/null
+++ b/src-ui/logics/configs/device/useMicDeviceList.js
@@ -0,0 +1,18 @@
+import { useStore_MicDeviceList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicDeviceList = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentMicDeviceList, updateMicDeviceList, pendingMicDeviceList } = useStore_MicDeviceList();
+
+ const getMicDeviceList = () => {
+ pendingMicDeviceList();
+ asyncStdoutToPython("/get/data/mic_device_list");
+ };
+
+ return {
+ currentMicDeviceList,
+ getMicDeviceList,
+ updateMicDeviceList,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/device/useMicHostList.js b/src-ui/logics/configs/device/useMicHostList.js
new file mode 100644
index 00000000..ed61f80a
--- /dev/null
+++ b/src-ui/logics/configs/device/useMicHostList.js
@@ -0,0 +1,18 @@
+import { useStore_MicHostList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicHostList = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentMicHostList, updateMicHostList, pendingMicHostList } = useStore_MicHostList();
+
+ const getMicHostList = () => {
+ pendingMicHostList();
+ asyncStdoutToPython("/get/data/mic_host_list");
+ };
+
+ return {
+ currentMicHostList,
+ getMicHostList,
+ updateMicHostList,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/device/useMicThreshold.js b/src-ui/logics/configs/device/useMicThreshold.js
new file mode 100644
index 00000000..ab6bda6c
--- /dev/null
+++ b/src-ui/logics/configs/device/useMicThreshold.js
@@ -0,0 +1,42 @@
+import { useStore_MicThreshold, useStore_EnableAutomaticMicThreshold } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicThreshold = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { updateMicThreshold, currentMicThreshold } = useStore_MicThreshold();
+ const { updateEnableAutomaticMicThreshold, currentEnableAutomaticMicThreshold, pendingEnableAutomaticMicThreshold } = useStore_EnableAutomaticMicThreshold();
+
+ const getMicThreshold = () => {
+ asyncStdoutToPython("/get/data/mic_threshold");
+ };
+
+ const setMicThreshold = (mic_threshold) => {
+ asyncStdoutToPython("/set/data/mic_threshold", mic_threshold);
+ };
+
+ const getEnableAutomaticMicThreshold = () => {
+ pendingEnableAutomaticMicThreshold();
+ asyncStdoutToPython("/get/data/mic_automatic_threshold");
+ };
+
+ const toggleEnableAutomaticMicThreshold = () => {
+ pendingEnableAutomaticMicThreshold();
+ if (currentEnableAutomaticMicThreshold.data) {
+ asyncStdoutToPython("/set/disable/mic_automatic_threshold");
+ } else {
+ asyncStdoutToPython("/set/enable/mic_automatic_threshold");
+ }
+ };
+
+ return {
+ currentMicThreshold,
+ getMicThreshold,
+ setMicThreshold,
+ updateMicThreshold,
+
+ currentEnableAutomaticMicThreshold,
+ getEnableAutomaticMicThreshold,
+ toggleEnableAutomaticMicThreshold,
+ updateEnableAutomaticMicThreshold,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/device/useSelectedMicDevice.js b/src-ui/logics/configs/device/useSelectedMicDevice.js
new file mode 100644
index 00000000..798eae5a
--- /dev/null
+++ b/src-ui/logics/configs/device/useSelectedMicDevice.js
@@ -0,0 +1,24 @@
+import { useStore_SelectedMicDevice } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedMicDevice = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSelectedMicDevice, updateSelectedMicDevice, pendingSelectedMicDevice } = useStore_SelectedMicDevice();
+
+ const getSelectedMicDevice = () => {
+ pendingSelectedMicDevice();
+ asyncStdoutToPython("/get/data/selected_mic_device");
+ };
+
+ const setSelectedMicDevice = (selected_mic_device) => {
+ pendingSelectedMicDevice();
+ asyncStdoutToPython("/set/data/selected_mic_device", selected_mic_device);
+ };
+
+ return {
+ currentSelectedMicDevice,
+ getSelectedMicDevice,
+ updateSelectedMicDevice,
+ setSelectedMicDevice,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/device/useSelectedMicHost.js b/src-ui/logics/configs/device/useSelectedMicHost.js
new file mode 100644
index 00000000..0ef9c882
--- /dev/null
+++ b/src-ui/logics/configs/device/useSelectedMicHost.js
@@ -0,0 +1,24 @@
+import { useStore_SelectedMicHost } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedMicHost = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSelectedMicHost, updateSelectedMicHost, pendingSelectedMicHost } = useStore_SelectedMicHost();
+
+ const getSelectedMicHost = () => {
+ pendingSelectedMicHost();
+ asyncStdoutToPython("/get/data/selected_mic_host");
+ };
+
+ const setSelectedMicHost = (selected_mic_host) => {
+ pendingSelectedMicHost();
+ asyncStdoutToPython("/set/data/selected_mic_host", selected_mic_host);
+ };
+
+ return {
+ currentSelectedMicHost,
+ getSelectedMicHost,
+ updateSelectedMicHost,
+ setSelectedMicHost,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/device/useSelectedSpeakerDevice.js b/src-ui/logics/configs/device/useSelectedSpeakerDevice.js
new file mode 100644
index 00000000..b8d85693
--- /dev/null
+++ b/src-ui/logics/configs/device/useSelectedSpeakerDevice.js
@@ -0,0 +1,24 @@
+import { useStore_SelectedSpeakerDevice } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedSpeakerDevice = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSelectedSpeakerDevice, updateSelectedSpeakerDevice, pendingSelectedSpeakerDevice } = useStore_SelectedSpeakerDevice();
+
+ const getSelectedSpeakerDevice = () => {
+ pendingSelectedSpeakerDevice();
+ asyncStdoutToPython("/get/data/selected_speaker_device");
+ };
+
+ const setSelectedSpeakerDevice = (selected_speaker_device) => {
+ pendingSelectedSpeakerDevice();
+ asyncStdoutToPython("/set/data/selected_speaker_device", selected_speaker_device);
+ };
+
+ return {
+ currentSelectedSpeakerDevice,
+ getSelectedSpeakerDevice,
+ updateSelectedSpeakerDevice,
+ setSelectedSpeakerDevice,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/device/useSpeakerDeviceList.js b/src-ui/logics/configs/device/useSpeakerDeviceList.js
new file mode 100644
index 00000000..2848111c
--- /dev/null
+++ b/src-ui/logics/configs/device/useSpeakerDeviceList.js
@@ -0,0 +1,18 @@
+import { useStore_SpeakerDeviceList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSpeakerDeviceList = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSpeakerDeviceList, updateSpeakerDeviceList, pendingSpeakerDeviceList } = useStore_SpeakerDeviceList();
+
+ const getSpeakerDeviceList = () => {
+ pendingSpeakerDeviceList();
+ asyncStdoutToPython("/get/data/speaker_device_list");
+ };
+
+ return {
+ currentSpeakerDeviceList,
+ getSpeakerDeviceList,
+ updateSpeakerDeviceList,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/device/useSpeakerThreshold.js b/src-ui/logics/configs/device/useSpeakerThreshold.js
new file mode 100644
index 00000000..29824b01
--- /dev/null
+++ b/src-ui/logics/configs/device/useSpeakerThreshold.js
@@ -0,0 +1,42 @@
+import { useStore_SpeakerThreshold, useStore_EnableAutomaticSpeakerThreshold } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSpeakerThreshold = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { updateSpeakerThreshold, currentSpeakerThreshold } = useStore_SpeakerThreshold();
+ const { updateEnableAutomaticSpeakerThreshold, currentEnableAutomaticSpeakerThreshold, pendingEnableAutomaticSpeakerThreshold } = useStore_EnableAutomaticSpeakerThreshold();
+
+ const getSpeakerThreshold = () => {
+ asyncStdoutToPython("/get/data/speaker_threshold");
+ };
+
+ const setSpeakerThreshold = (speaker_threshold) => {
+ asyncStdoutToPython("/set/data/speaker_threshold", speaker_threshold);
+ };
+
+ const getEnableAutomaticSpeakerThreshold = () => {
+ pendingEnableAutomaticSpeakerThreshold();
+ asyncStdoutToPython("/get/data/speaker_automatic_threshold");
+ };
+
+ const toggleEnableAutomaticSpeakerThreshold = () => {
+ pendingEnableAutomaticSpeakerThreshold();
+ if (currentEnableAutomaticSpeakerThreshold.data) {
+ asyncStdoutToPython("/set/disable/speaker_automatic_threshold");
+ } else {
+ asyncStdoutToPython("/set/enable/speaker_automatic_threshold");
+ }
+ };
+
+ return {
+ currentSpeakerThreshold,
+ getSpeakerThreshold,
+ setSpeakerThreshold,
+ updateSpeakerThreshold,
+
+ currentEnableAutomaticSpeakerThreshold,
+ getEnableAutomaticSpeakerThreshold,
+ toggleEnableAutomaticSpeakerThreshold,
+ updateEnableAutomaticSpeakerThreshold,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/index.js b/src-ui/logics/configs/index.js
new file mode 100644
index 00000000..b8426255
--- /dev/null
+++ b/src-ui/logics/configs/index.js
@@ -0,0 +1,58 @@
+export { useEnableAutoMicSelect } from "./device/useEnableAutoMicSelect";
+export { useEnableAutoSpeakerSelect } from "./device/useEnableAutoSpeakerSelect";
+export { useMicDeviceList } from "./device/useMicDeviceList";
+export { useMicHostList } from "./device/useMicHostList";
+export { useMicThreshold } from "./device/useMicThreshold";
+export { useSelectedMicDevice } from "./device/useSelectedMicDevice";
+export { useSelectedMicHost } from "./device/useSelectedMicHost";
+export { useSelectedSpeakerDevice } from "./device/useSelectedSpeakerDevice";
+export { useSpeakerDeviceList } from "./device/useSpeakerDeviceList";
+export { useSpeakerThreshold } from "./device/useSpeakerThreshold";
+
+export { useMessageLogUiScaling } from "./appearance/useMessageLogUiScaling";
+export { useSelectedFontFamily } from "./appearance/useSelectedFontFamily";
+export { useTransparency } from "./appearance/useTransparency";
+export { useSendMessageButtonType } from "./others/useSendMessageButtonType";
+export { useUiLanguage } from "./appearance/useUiLanguage";
+export { useUiScaling } from "./appearance/useUiScaling";
+
+export { useEnableAutoClearMessageInputBox } from "./others/useEnableAutoClearMessageInputBox";
+export { useEnableAutoExportMessageLogs } from "./others/useEnableAutoExportMessageLogs";
+export { useEnableSendMessageToVrc } from "./others/useEnableSendMessageToVrc";
+export { useEnableSendReceivedMessageToVrc } from "./others/useEnableSendReceivedMessageToVrc";
+export { useEnableSendOnlyTranslatedMessages } from "./others/useEnableSendOnlyTranslatedMessages";
+export { useEnableVrcMicMuteSync } from "./others/useEnableVrcMicMuteSync";
+
+export { useMicRecordTimeout } from "./transcription/useMicRecordTimeout";
+export { useMicPhraseTimeout } from "./transcription/useMicPhraseTimeout";
+export { useMicMaxWords } from "./transcription/useMicMaxWords";
+export { useMicWordFilterList } from "./transcription/useMicWordFilterList";
+
+export { useSpeakerRecordTimeout } from "./transcription/useSpeakerRecordTimeout";
+export { useSpeakerPhraseTimeout } from "./transcription/useSpeakerPhraseTimeout";
+export { useSpeakerMaxWords } from "./transcription/useSpeakerMaxWords";
+
+export { useSelectedTranscriptionEngine } from "./transcription/useSelectedTranscriptionEngine";
+export { useWhisperWeightTypeStatus } from "./transcription/useWhisperWeightTypeStatus";
+export { useSelectedWhisperWeightType } from "./transcription/useSelectedWhisperWeightType";
+export { useSelectableWhisperComputeDeviceList } from "./transcription/useSelectableWhisperComputeDeviceList";
+export { useSelectedWhisperComputeDevice } from "./transcription/useSelectedWhisperComputeDevice";
+
+export { useDeepLAuthKey } from "./translation/useDeepLAuthKey";
+export { useCTranslate2WeightTypeStatus } from "./translation/useCTranslate2WeightTypeStatus";
+export { useSelectedCTranslate2WeightType } from "./translation/useSelectedCTranslate2WeightType";
+export { useSelectableCTranslate2ComputeDeviceList } from "./translation/useSelectableCTranslate2ComputeDeviceList";
+export { useSelectedCTranslate2ComputeDevice } from "./translation/useSelectedCTranslate2ComputeDevice";
+
+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 { useSendTextToOverlay } from "./vr/useSendTextToOverlay";
+
+export { useOscIpAddress } from "./advanced_settings/useOscIpAddress";
+export { useOscPort } from "./advanced_settings/useOscPort";
+
+export { useSettingBoxScrollPosition } from "./useSettingBoxScrollPosition";
+export { useSoftwareVersion } from "./useSoftwareVersion";
\ No newline at end of file
diff --git a/src-ui/logics/configs/others/useEnableAutoClearMessageInputBox.js b/src-ui/logics/configs/others/useEnableAutoClearMessageInputBox.js
new file mode 100644
index 00000000..d04c6094
--- /dev/null
+++ b/src-ui/logics/configs/others/useEnableAutoClearMessageInputBox.js
@@ -0,0 +1,28 @@
+import { useStore_EnableAutoClearMessageInputBox } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useEnableAutoClearMessageInputBox = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentEnableAutoClearMessageInputBox, updateEnableAutoClearMessageInputBox, pendingEnableAutoClearMessageInputBox } = useStore_EnableAutoClearMessageInputBox();
+
+ const getEnableAutoClearMessageInputBox = () => {
+ pendingEnableAutoClearMessageInputBox();
+ asyncStdoutToPython("/get/data/auto_clear_message_box");
+ };
+
+ const toggleEnableAutoClearMessageInputBox = () => {
+ pendingEnableAutoClearMessageInputBox();
+ if (currentEnableAutoClearMessageInputBox.data) {
+ asyncStdoutToPython("/set/disable/auto_clear_message_box");
+ } else {
+ asyncStdoutToPython("/set/enable/auto_clear_message_box");
+ }
+ };
+
+ return {
+ currentEnableAutoClearMessageInputBox,
+ getEnableAutoClearMessageInputBox,
+ toggleEnableAutoClearMessageInputBox,
+ updateEnableAutoClearMessageInputBox,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/others/useEnableAutoExportMessageLogs.js b/src-ui/logics/configs/others/useEnableAutoExportMessageLogs.js
new file mode 100644
index 00000000..8249a83a
--- /dev/null
+++ b/src-ui/logics/configs/others/useEnableAutoExportMessageLogs.js
@@ -0,0 +1,28 @@
+import { useStore_EnableAutoExportMessageLogs } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useEnableAutoExportMessageLogs = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentEnableAutoExportMessageLogs, updateEnableAutoExportMessageLogs, pendingEnableAutoExportMessageLogs } = useStore_EnableAutoExportMessageLogs();
+
+ const getEnableAutoExportMessageLogs = () => {
+ pendingEnableAutoExportMessageLogs();
+ asyncStdoutToPython("/get/data/logger_feature");
+ };
+
+ const toggleEnableAutoExportMessageLogs = () => {
+ pendingEnableAutoExportMessageLogs();
+ if (currentEnableAutoExportMessageLogs.data) {
+ asyncStdoutToPython("/set/disable/logger_feature");
+ } else {
+ asyncStdoutToPython("/set/enable/logger_feature");
+ }
+ };
+
+ return {
+ currentEnableAutoExportMessageLogs,
+ getEnableAutoExportMessageLogs,
+ toggleEnableAutoExportMessageLogs,
+ updateEnableAutoExportMessageLogs,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/others/useEnableSendMessageToVrc.js b/src-ui/logics/configs/others/useEnableSendMessageToVrc.js
new file mode 100644
index 00000000..10ef4b0c
--- /dev/null
+++ b/src-ui/logics/configs/others/useEnableSendMessageToVrc.js
@@ -0,0 +1,28 @@
+import { useStore_EnableSendMessageToVrc } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useEnableSendMessageToVrc = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentEnableSendMessageToVrc, updateEnableSendMessageToVrc, pendingEnableSendMessageToVrc } = useStore_EnableSendMessageToVrc();
+
+ const getEnableSendMessageToVrc = () => {
+ pendingEnableSendMessageToVrc();
+ asyncStdoutToPython("/get/data/send_message_to_vrc");
+ };
+
+ const toggleEnableSendMessageToVrc = () => {
+ pendingEnableSendMessageToVrc();
+ if (currentEnableSendMessageToVrc.data) {
+ asyncStdoutToPython("/set/disable/send_message_to_vrc");
+ } else {
+ asyncStdoutToPython("/set/enable/send_message_to_vrc");
+ }
+ };
+
+ return {
+ currentEnableSendMessageToVrc,
+ getEnableSendMessageToVrc,
+ toggleEnableSendMessageToVrc,
+ updateEnableSendMessageToVrc,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/others/useEnableSendOnlyTranslatedMessages.js b/src-ui/logics/configs/others/useEnableSendOnlyTranslatedMessages.js
new file mode 100644
index 00000000..7e9abefb
--- /dev/null
+++ b/src-ui/logics/configs/others/useEnableSendOnlyTranslatedMessages.js
@@ -0,0 +1,28 @@
+import { useStore_EnableSendOnlyTranslatedMessages } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useEnableSendOnlyTranslatedMessages = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentEnableSendOnlyTranslatedMessages, updateEnableSendOnlyTranslatedMessages, pendingEnableSendOnlyTranslatedMessages } = useStore_EnableSendOnlyTranslatedMessages();
+
+ const getEnableSendOnlyTranslatedMessages = () => {
+ pendingEnableSendOnlyTranslatedMessages();
+ asyncStdoutToPython("/get/data/send_only_translated_messages");
+ };
+
+ const toggleEnableSendOnlyTranslatedMessages = () => {
+ pendingEnableSendOnlyTranslatedMessages();
+ if (currentEnableSendOnlyTranslatedMessages.data) {
+ asyncStdoutToPython("/set/disable/send_only_translated_messages");
+ } else {
+ asyncStdoutToPython("/set/enable/send_only_translated_messages");
+ }
+ };
+
+ return {
+ currentEnableSendOnlyTranslatedMessages,
+ getEnableSendOnlyTranslatedMessages,
+ toggleEnableSendOnlyTranslatedMessages,
+ updateEnableSendOnlyTranslatedMessages,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/others/useEnableSendReceivedMessageToVrc.js b/src-ui/logics/configs/others/useEnableSendReceivedMessageToVrc.js
new file mode 100644
index 00000000..5eeeb102
--- /dev/null
+++ b/src-ui/logics/configs/others/useEnableSendReceivedMessageToVrc.js
@@ -0,0 +1,28 @@
+import { useStore_EnableSendReceivedMessageToVrc } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useEnableSendReceivedMessageToVrc = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentEnableSendReceivedMessageToVrc, updateEnableSendReceivedMessageToVrc, pendingEnableSendReceivedMessageToVrc } = useStore_EnableSendReceivedMessageToVrc();
+
+ const getEnableSendReceivedMessageToVrc = () => {
+ pendingEnableSendReceivedMessageToVrc();
+ asyncStdoutToPython("/get/data/send_received_message_to_vrc");
+ };
+
+ const toggleEnableSendReceivedMessageToVrc = () => {
+ pendingEnableSendReceivedMessageToVrc();
+ if (currentEnableSendReceivedMessageToVrc.data) {
+ asyncStdoutToPython("/set/disable/send_received_message_to_vrc");
+ } else {
+ asyncStdoutToPython("/set/enable/send_received_message_to_vrc");
+ }
+ };
+
+ return {
+ currentEnableSendReceivedMessageToVrc,
+ getEnableSendReceivedMessageToVrc,
+ toggleEnableSendReceivedMessageToVrc,
+ updateEnableSendReceivedMessageToVrc,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/others/useEnableVrcMicMuteSync.js b/src-ui/logics/configs/others/useEnableVrcMicMuteSync.js
new file mode 100644
index 00000000..16a853ab
--- /dev/null
+++ b/src-ui/logics/configs/others/useEnableVrcMicMuteSync.js
@@ -0,0 +1,28 @@
+import { useStore_EnableVrcMicMuteSync } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useEnableVrcMicMuteSync = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentEnableVrcMicMuteSync, updateEnableVrcMicMuteSync, pendingEnableVrcMicMuteSync } = useStore_EnableVrcMicMuteSync();
+
+ const getEnableVrcMicMuteSync = () => {
+ pendingEnableVrcMicMuteSync();
+ asyncStdoutToPython("/get/data/vrc_mic_mute_sync");
+ };
+
+ const toggleEnableVrcMicMuteSync = () => {
+ pendingEnableVrcMicMuteSync();
+ if (currentEnableVrcMicMuteSync.data) {
+ asyncStdoutToPython("/set/disable/vrc_mic_mute_sync");
+ } else {
+ asyncStdoutToPython("/set/enable/vrc_mic_mute_sync");
+ }
+ };
+
+ return {
+ currentEnableVrcMicMuteSync,
+ getEnableVrcMicMuteSync,
+ toggleEnableVrcMicMuteSync,
+ updateEnableVrcMicMuteSync,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/others/useSendMessageButtonType.js b/src-ui/logics/configs/others/useSendMessageButtonType.js
new file mode 100644
index 00000000..a6a22add
--- /dev/null
+++ b/src-ui/logics/configs/others/useSendMessageButtonType.js
@@ -0,0 +1,24 @@
+import { useStore_SendMessageButtonType } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSendMessageButtonType = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSendMessageButtonType, updateSendMessageButtonType, pendingSendMessageButtonType } = useStore_SendMessageButtonType();
+
+ const getSendMessageButtonType = () => {
+ pendingSendMessageButtonType();
+ asyncStdoutToPython("/get/data/send_message_button_type");
+ };
+
+ const setSendMessageButtonType = (send_message_button_type) => {
+ pendingSendMessageButtonType();
+ asyncStdoutToPython("/set/data/send_message_button_type", send_message_button_type);
+ };
+
+ return {
+ currentSendMessageButtonType,
+ getSendMessageButtonType,
+ setSendMessageButtonType,
+ updateSendMessageButtonType,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/transcription/useMicMaxWords.js b/src-ui/logics/configs/transcription/useMicMaxWords.js
new file mode 100644
index 00000000..7415d655
--- /dev/null
+++ b/src-ui/logics/configs/transcription/useMicMaxWords.js
@@ -0,0 +1,24 @@
+import { useStore_MicMaxWords } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicMaxWords = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentMicMaxWords, updateMicMaxWords, pendingMicMaxWords } = useStore_MicMaxWords();
+
+ const getMicMaxWords = () => {
+ pendingMicMaxWords();
+ asyncStdoutToPython("/get/data/mic_max_phrases");
+ };
+
+ const setMicMaxWords = (selected_mic_max_phrases) => {
+ pendingMicMaxWords();
+ asyncStdoutToPython("/set/data/mic_max_phrases", selected_mic_max_phrases);
+ };
+
+ return {
+ currentMicMaxWords,
+ getMicMaxWords,
+ updateMicMaxWords,
+ setMicMaxWords,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/transcription/useMicPhraseTimeout.js b/src-ui/logics/configs/transcription/useMicPhraseTimeout.js
new file mode 100644
index 00000000..02601b0c
--- /dev/null
+++ b/src-ui/logics/configs/transcription/useMicPhraseTimeout.js
@@ -0,0 +1,24 @@
+import { useStore_MicPhraseTimeout } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicPhraseTimeout = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentMicPhraseTimeout, updateMicPhraseTimeout, pendingMicPhraseTimeout } = useStore_MicPhraseTimeout();
+
+ const getMicPhraseTimeout = () => {
+ pendingMicPhraseTimeout();
+ asyncStdoutToPython("/get/data/mic_phrase_timeout");
+ };
+
+ const setMicPhraseTimeout = (selected_mic_phrase_timeout) => {
+ pendingMicPhraseTimeout();
+ asyncStdoutToPython("/set/data/mic_phrase_timeout", selected_mic_phrase_timeout);
+ };
+
+ return {
+ currentMicPhraseTimeout,
+ getMicPhraseTimeout,
+ updateMicPhraseTimeout,
+ setMicPhraseTimeout,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/transcription/useMicRecordTimeout.js b/src-ui/logics/configs/transcription/useMicRecordTimeout.js
new file mode 100644
index 00000000..27798804
--- /dev/null
+++ b/src-ui/logics/configs/transcription/useMicRecordTimeout.js
@@ -0,0 +1,24 @@
+import { useStore_MicRecordTimeout } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicRecordTimeout = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentMicRecordTimeout, updateMicRecordTimeout, pendingMicRecordTimeout } = useStore_MicRecordTimeout();
+
+ const getMicRecordTimeout = () => {
+ pendingMicRecordTimeout();
+ asyncStdoutToPython("/get/data/mic_record_timeout");
+ };
+
+ const setMicRecordTimeout = (selected_mic_record_timeout) => {
+ pendingMicRecordTimeout();
+ asyncStdoutToPython("/set/data/mic_record_timeout", selected_mic_record_timeout);
+ };
+
+ return {
+ currentMicRecordTimeout,
+ getMicRecordTimeout,
+ updateMicRecordTimeout,
+ setMicRecordTimeout,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/transcription/useMicWordFilterList.js b/src-ui/logics/configs/transcription/useMicWordFilterList.js
new file mode 100644
index 00000000..cca40b0a
--- /dev/null
+++ b/src-ui/logics/configs/transcription/useMicWordFilterList.js
@@ -0,0 +1,24 @@
+import { useStore_MicWordFilterList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicWordFilterList = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentMicWordFilterList, updateMicWordFilterList, pendingMicWordFilterList } = useStore_MicWordFilterList();
+
+ const getMicWordFilterList = () => {
+ pendingMicWordFilterList();
+ asyncStdoutToPython("/get/data/mic_word_filter");
+ };
+
+ const setMicWordFilterList = (selected_mic_word_filter) => {
+ pendingMicWordFilterList();
+ asyncStdoutToPython("/set/data/mic_word_filter", selected_mic_word_filter);
+ };
+
+ return {
+ currentMicWordFilterList,
+ getMicWordFilterList,
+ updateMicWordFilterList,
+ setMicWordFilterList,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/transcription/useSelectableWhisperComputeDeviceList.js b/src-ui/logics/configs/transcription/useSelectableWhisperComputeDeviceList.js
new file mode 100644
index 00000000..94ae24f6
--- /dev/null
+++ b/src-ui/logics/configs/transcription/useSelectableWhisperComputeDeviceList.js
@@ -0,0 +1,18 @@
+import { useStore_SelectableWhisperComputeDeviceList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectableWhisperComputeDeviceList = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSelectableWhisperComputeDeviceList, updateSelectableWhisperComputeDeviceList, pendingSelectableWhisperComputeDeviceList } = useStore_SelectableWhisperComputeDeviceList();
+
+ const getSelectableWhisperComputeDeviceList = () => {
+ pendingSelectableWhisperComputeDeviceList();
+ asyncStdoutToPython("/get/data/transcription_compute_device_list");
+ };
+
+ return {
+ currentSelectableWhisperComputeDeviceList,
+ getSelectableWhisperComputeDeviceList,
+ updateSelectableWhisperComputeDeviceList,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/transcription/useSelectedTranscriptionEngine.js b/src-ui/logics/configs/transcription/useSelectedTranscriptionEngine.js
new file mode 100644
index 00000000..43f0b6ab
--- /dev/null
+++ b/src-ui/logics/configs/transcription/useSelectedTranscriptionEngine.js
@@ -0,0 +1,24 @@
+import { useStore_SelectedTranscriptionEngine } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedTranscriptionEngine = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSelectedTranscriptionEngine, updateSelectedTranscriptionEngine, pendingSelectedTranscriptionEngine } = useStore_SelectedTranscriptionEngine();
+
+ const getSelectedTranscriptionEngine = () => {
+ pendingSelectedTranscriptionEngine();
+ asyncStdoutToPython("/get/data/selected_transcription_engine");
+ };
+
+ const setSelectedTranscriptionEngine = (selected_transcription_engine) => {
+ pendingSelectedTranscriptionEngine();
+ asyncStdoutToPython("/set/data/selected_transcription_engine", selected_transcription_engine);
+ };
+
+ return {
+ currentSelectedTranscriptionEngine,
+ getSelectedTranscriptionEngine,
+ updateSelectedTranscriptionEngine,
+ setSelectedTranscriptionEngine,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/transcription/useSelectedWhisperComputeDevice.js b/src-ui/logics/configs/transcription/useSelectedWhisperComputeDevice.js
new file mode 100644
index 00000000..f2d34af1
--- /dev/null
+++ b/src-ui/logics/configs/transcription/useSelectedWhisperComputeDevice.js
@@ -0,0 +1,24 @@
+import { useStore_SelectedWhisperComputeDevice } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedWhisperComputeDevice = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSelectedWhisperComputeDevice, updateSelectedWhisperComputeDevice, pendingSelectedWhisperComputeDevice } = useStore_SelectedWhisperComputeDevice();
+
+ const getSelectedWhisperComputeDevice = () => {
+ pendingSelectedWhisperComputeDevice();
+ asyncStdoutToPython("/get/data/selected_transcription_compute_device");
+ };
+
+ const setSelectedWhisperComputeDevice = (selected_transcription_compute_device) => {
+ pendingSelectedWhisperComputeDevice();
+ asyncStdoutToPython("/set/data/selected_transcription_compute_device", selected_transcription_compute_device);
+ };
+
+ return {
+ currentSelectedWhisperComputeDevice,
+ getSelectedWhisperComputeDevice,
+ updateSelectedWhisperComputeDevice,
+ setSelectedWhisperComputeDevice,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/transcription/useSelectedWhisperWeightType.js b/src-ui/logics/configs/transcription/useSelectedWhisperWeightType.js
new file mode 100644
index 00000000..02993646
--- /dev/null
+++ b/src-ui/logics/configs/transcription/useSelectedWhisperWeightType.js
@@ -0,0 +1,24 @@
+import { useStore_SelectedWhisperWeightType } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedWhisperWeightType = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSelectedWhisperWeightType, updateSelectedWhisperWeightType, pendingSelectedWhisperWeightType } = useStore_SelectedWhisperWeightType();
+
+ const getSelectedWhisperWeightType = () => {
+ pendingSelectedWhisperWeightType();
+ asyncStdoutToPython("/get/data/whisper_weight_type");
+ };
+
+ const setSelectedWhisperWeightType = (selected_whisper_weight_type) => {
+ pendingSelectedWhisperWeightType();
+ asyncStdoutToPython("/set/data/whisper_weight_type", selected_whisper_weight_type);
+ };
+
+ return {
+ currentSelectedWhisperWeightType,
+ getSelectedWhisperWeightType,
+ updateSelectedWhisperWeightType,
+ setSelectedWhisperWeightType,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/transcription/useSpeakerMaxWords.js b/src-ui/logics/configs/transcription/useSpeakerMaxWords.js
new file mode 100644
index 00000000..8678ceb2
--- /dev/null
+++ b/src-ui/logics/configs/transcription/useSpeakerMaxWords.js
@@ -0,0 +1,24 @@
+import { useStore_SpeakerMaxWords } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSpeakerMaxWords = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSpeakerMaxWords, updateSpeakerMaxWords, pendingSpeakerMaxWords } = useStore_SpeakerMaxWords();
+
+ const getSpeakerMaxWords = () => {
+ pendingSpeakerMaxWords();
+ asyncStdoutToPython("/get/data/speaker_max_phrases");
+ };
+
+ const setSpeakerMaxWords = (selected_speaker_max_phrases) => {
+ pendingSpeakerMaxWords();
+ asyncStdoutToPython("/set/data/speaker_max_phrases", selected_speaker_max_phrases);
+ };
+
+ return {
+ currentSpeakerMaxWords,
+ getSpeakerMaxWords,
+ updateSpeakerMaxWords,
+ setSpeakerMaxWords,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/transcription/useSpeakerPhraseTimeout.js b/src-ui/logics/configs/transcription/useSpeakerPhraseTimeout.js
new file mode 100644
index 00000000..af9e8fba
--- /dev/null
+++ b/src-ui/logics/configs/transcription/useSpeakerPhraseTimeout.js
@@ -0,0 +1,24 @@
+import { useStore_SpeakerPhraseTimeout } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSpeakerPhraseTimeout = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSpeakerPhraseTimeout, updateSpeakerPhraseTimeout, pendingSpeakerPhraseTimeout } = useStore_SpeakerPhraseTimeout();
+
+ const getSpeakerPhraseTimeout = () => {
+ pendingSpeakerPhraseTimeout();
+ asyncStdoutToPython("/get/data/speaker_phrase_timeout");
+ };
+
+ const setSpeakerPhraseTimeout = (selected_speaker_phrase_timeout) => {
+ pendingSpeakerPhraseTimeout();
+ asyncStdoutToPython("/set/data/speaker_phrase_timeout", selected_speaker_phrase_timeout);
+ };
+
+ return {
+ currentSpeakerPhraseTimeout,
+ getSpeakerPhraseTimeout,
+ updateSpeakerPhraseTimeout,
+ setSpeakerPhraseTimeout,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/transcription/useSpeakerRecordTimeout.js b/src-ui/logics/configs/transcription/useSpeakerRecordTimeout.js
new file mode 100644
index 00000000..5d17754c
--- /dev/null
+++ b/src-ui/logics/configs/transcription/useSpeakerRecordTimeout.js
@@ -0,0 +1,24 @@
+import { useStore_SpeakerRecordTimeout } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSpeakerRecordTimeout = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSpeakerRecordTimeout, updateSpeakerRecordTimeout, pendingSpeakerRecordTimeout } = useStore_SpeakerRecordTimeout();
+
+ const getSpeakerRecordTimeout = () => {
+ pendingSpeakerRecordTimeout();
+ asyncStdoutToPython("/get/data/speaker_record_timeout");
+ };
+
+ const setSpeakerRecordTimeout = (selected_speaker_record_timeout) => {
+ pendingSpeakerRecordTimeout();
+ asyncStdoutToPython("/set/data/speaker_record_timeout", selected_speaker_record_timeout);
+ };
+
+ return {
+ currentSpeakerRecordTimeout,
+ getSpeakerRecordTimeout,
+ updateSpeakerRecordTimeout,
+ setSpeakerRecordTimeout,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/transcription/useWhisperWeightTypeStatus.js b/src-ui/logics/configs/transcription/useWhisperWeightTypeStatus.js
new file mode 100644
index 00000000..482273d2
--- /dev/null
+++ b/src-ui/logics/configs/transcription/useWhisperWeightTypeStatus.js
@@ -0,0 +1,60 @@
+import { useStore_WhisperWeightTypeStatus } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useWhisperWeightTypeStatus = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentWhisperWeightTypeStatus, updateWhisperWeightTypeStatus, pendingWhisperWeightTypeStatus } = useStore_WhisperWeightTypeStatus();
+
+ const updateDownloadedWhisperWeightTypeStatus = (downloaded_weight_type_status) => {
+ updateWhisperWeightTypeStatus((old_status) =>
+ old_status.data.map((item) => ({
+ ...item,
+ is_downloaded: downloaded_weight_type_status[item.id] ?? item.is_downloaded,
+ }))
+ );
+ };
+ const updateDownloadProgressWhisperWeightTypeStatus = (payload) => {
+ if (payload === true) return console.error("fix me.");
+
+ updateWhisperWeightTypeStatus((old_status) =>
+ old_status.data.map((item) =>
+ payload.weight_type === item.id
+ ? { ...item, progress: payload.progress * 100 }
+ : item
+ )
+ );
+ };
+ const pendingWhisperWeightType = (id) => {
+ updateWhisperWeightTypeStatus((old_status) =>
+ old_status.data.map((item) =>
+ id === item.id
+ ? { ...item, is_pending: true }
+ : item
+ )
+ );
+ };
+ const downloadedWhisperWeightType = (id) => {
+ updateWhisperWeightTypeStatus((old_status) =>
+ old_status.data.map((item) =>
+ id === item.id
+ ? { ...item, is_downloaded: true, is_pending: false, progress: null }
+ : item
+ )
+ );
+ };
+
+ const downloadWhisperWeight = (weight_type) => {
+ asyncStdoutToPython("/run/download_whisper_weight", weight_type);
+ };
+
+ return {
+ currentWhisperWeightTypeStatus,
+ updateWhisperWeightTypeStatus,
+
+ updateDownloadedWhisperWeightTypeStatus,
+ updateDownloadProgressWhisperWeightTypeStatus,
+ pendingWhisperWeightType,
+ downloadedWhisperWeightType,
+ downloadWhisperWeight,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/translation/useCTranslate2WeightTypeStatus.js b/src-ui/logics/configs/translation/useCTranslate2WeightTypeStatus.js
new file mode 100644
index 00000000..4f840765
--- /dev/null
+++ b/src-ui/logics/configs/translation/useCTranslate2WeightTypeStatus.js
@@ -0,0 +1,60 @@
+import { useStore_CTranslate2WeightTypeStatus } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useCTranslate2WeightTypeStatus = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentCTranslate2WeightTypeStatus, updateCTranslate2WeightTypeStatus, pendingCTranslate2WeightTypeStatus } = useStore_CTranslate2WeightTypeStatus();
+
+ const updateDownloadedCTranslate2WeightTypeStatus = (downloaded_weight_type_status) => {
+ updateCTranslate2WeightTypeStatus((old_status) =>
+ old_status.data.map((item) => ({
+ ...item,
+ is_downloaded: downloaded_weight_type_status[item.id] ?? item.is_downloaded,
+ }))
+ );
+ };
+ const updateDownloadProgressCTranslate2WeightTypeStatus = (payload) => {
+ if (payload === true) return console.error("fix me.");
+
+ updateCTranslate2WeightTypeStatus((old_status) =>
+ old_status.data.map((item) =>
+ payload.weight_type === item.id
+ ? { ...item, progress: payload.progress * 100 }
+ : item
+ )
+ );
+ };
+ const pendingCTranslate2WeightType = (id) => {
+ updateCTranslate2WeightTypeStatus((old_status) =>
+ old_status.data.map((item) =>
+ id === item.id
+ ? { ...item, is_pending: true }
+ : item
+ )
+ );
+ };
+ const downloadedCTranslate2WeightType = (id) => {
+ updateCTranslate2WeightTypeStatus((old_status) =>
+ old_status.data.map((item) =>
+ id === item.id
+ ? { ...item, is_downloaded: true, is_pending: false, progress: null }
+ : item
+ )
+ );
+ };
+
+ const downloadCTranslate2Weight = (weight_type) => {
+ asyncStdoutToPython("/run/download_ctranslate2_weight", weight_type);
+ };
+
+ return {
+ currentCTranslate2WeightTypeStatus,
+ updateCTranslate2WeightTypeStatus,
+
+ updateDownloadedCTranslate2WeightTypeStatus,
+ updateDownloadProgressCTranslate2WeightTypeStatus,
+ pendingCTranslate2WeightType,
+ downloadedCTranslate2WeightType,
+ downloadCTranslate2Weight,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/translation/useDeepLAuthKey.js b/src-ui/logics/configs/translation/useDeepLAuthKey.js
new file mode 100644
index 00000000..e379ce0f
--- /dev/null
+++ b/src-ui/logics/configs/translation/useDeepLAuthKey.js
@@ -0,0 +1,30 @@
+import { useStore_DeepLAuthKey } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useDeepLAuthKey = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentDeepLAuthKey, updateDeepLAuthKey, pendingDeepLAuthKey } = useStore_DeepLAuthKey();
+
+ const getDeepLAuthKey = () => {
+ pendingDeepLAuthKey();
+ asyncStdoutToPython("/get/data/deepl_auth_key");
+ };
+
+ const setDeepLAuthKey = (selected_deepl_auth_key) => {
+ pendingDeepLAuthKey();
+ asyncStdoutToPython("/set/data/deepl_auth_key", selected_deepl_auth_key);
+ };
+
+ const deleteDeepLAuthKey = () => {
+ pendingDeepLAuthKey();
+ asyncStdoutToPython("/delete/data/deepl_auth_key");
+ };
+
+ return {
+ currentDeepLAuthKey,
+ getDeepLAuthKey,
+ updateDeepLAuthKey,
+ setDeepLAuthKey,
+ deleteDeepLAuthKey,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/translation/useSelectableCTranslate2ComputeDeviceList.js b/src-ui/logics/configs/translation/useSelectableCTranslate2ComputeDeviceList.js
new file mode 100644
index 00000000..e2ca89ca
--- /dev/null
+++ b/src-ui/logics/configs/translation/useSelectableCTranslate2ComputeDeviceList.js
@@ -0,0 +1,18 @@
+import { useStore_SelectableCTranslate2ComputeDeviceList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectableCTranslate2ComputeDeviceList = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSelectableCTranslate2ComputeDeviceList, updateSelectableCTranslate2ComputeDeviceList, pendingSelectableCTranslate2ComputeDeviceList } = useStore_SelectableCTranslate2ComputeDeviceList();
+
+ const getSelectableCTranslate2ComputeDeviceList = () => {
+ pendingSelectableCTranslate2ComputeDeviceList();
+ asyncStdoutToPython("/get/data/translation_compute_device_list");
+ };
+
+ return {
+ currentSelectableCTranslate2ComputeDeviceList,
+ getSelectableCTranslate2ComputeDeviceList,
+ updateSelectableCTranslate2ComputeDeviceList,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/translation/useSelectedCTranslate2ComputeDevice.js b/src-ui/logics/configs/translation/useSelectedCTranslate2ComputeDevice.js
new file mode 100644
index 00000000..37f6623d
--- /dev/null
+++ b/src-ui/logics/configs/translation/useSelectedCTranslate2ComputeDevice.js
@@ -0,0 +1,24 @@
+import { useStore_SelectedCTranslate2ComputeDevice } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedCTranslate2ComputeDevice = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSelectedCTranslate2ComputeDevice, updateSelectedCTranslate2ComputeDevice, pendingSelectedCTranslate2ComputeDevice } = useStore_SelectedCTranslate2ComputeDevice();
+
+ const getSelectedCTranslate2ComputeDevice = () => {
+ pendingSelectedCTranslate2ComputeDevice();
+ asyncStdoutToPython("/get/data/selected_translation_compute_device");
+ };
+
+ const setSelectedCTranslate2ComputeDevice = (selected_translation_compute_device) => {
+ pendingSelectedCTranslate2ComputeDevice();
+ asyncStdoutToPython("/set/data/selected_translation_compute_device", selected_translation_compute_device);
+ };
+
+ return {
+ currentSelectedCTranslate2ComputeDevice,
+ getSelectedCTranslate2ComputeDevice,
+ updateSelectedCTranslate2ComputeDevice,
+ setSelectedCTranslate2ComputeDevice,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/translation/useSelectedCTranslate2WeightType.js b/src-ui/logics/configs/translation/useSelectedCTranslate2WeightType.js
new file mode 100644
index 00000000..8641a2ac
--- /dev/null
+++ b/src-ui/logics/configs/translation/useSelectedCTranslate2WeightType.js
@@ -0,0 +1,24 @@
+import { useStore_SelectedCTranslate2WeightType } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedCTranslate2WeightType = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSelectedCTranslate2WeightType, updateSelectedCTranslate2WeightType, pendingSelectedCTranslate2WeightType } = useStore_SelectedCTranslate2WeightType();
+
+ const getSelectedCTranslate2WeightType = () => {
+ pendingSelectedCTranslate2WeightType();
+ asyncStdoutToPython("/get/data/ctranslate2_weight_type");
+ };
+
+ const setSelectedCTranslate2WeightType = (selected_ctranslate2_weight_type) => {
+ pendingSelectedCTranslate2WeightType();
+ asyncStdoutToPython("/set/data/ctranslate2_weight_type", selected_ctranslate2_weight_type);
+ };
+
+ return {
+ currentSelectedCTranslate2WeightType,
+ getSelectedCTranslate2WeightType,
+ updateSelectedCTranslate2WeightType,
+ setSelectedCTranslate2WeightType,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/useSettingBoxScrollPosition.js b/src-ui/logics/configs/useSettingBoxScrollPosition.js
new file mode 100644
index 00000000..87d8365c
--- /dev/null
+++ b/src-ui/logics/configs/useSettingBoxScrollPosition.js
@@ -0,0 +1,34 @@
+import { store, useStore_SettingBoxScrollPosition } from "@store";
+
+export const useSettingBoxScrollPosition = () => {
+ const { currentSettingBoxScrollPosition, updateSettingBoxScrollPosition, pendingSettingBoxScrollPosition } = useStore_SettingBoxScrollPosition();
+
+ const saveScrollPosition = () => {
+ if (store.setting_box_scroll_container.current) {
+ updateSettingBoxScrollPosition(store.setting_box_scroll_container.current.scrollTop);
+ }
+ };
+ const restoreScrollPosition = () => {
+ if (store.setting_box_scroll_container.current) {
+ updateSettingBoxScrollPosition((pre) => {
+ store.setting_box_scroll_container.current.scrollTop = pre.data;
+ return pre.data;
+ })
+ }
+ };
+
+ const resetScrollPosition = () => {
+ if (store.setting_box_scroll_container.current) {
+ store.setting_box_scroll_container.current.scrollTop = 0;
+ updateSettingBoxScrollPosition(0);
+ }
+ }
+
+ return {
+ saveScrollPosition,
+ restoreScrollPosition,
+ resetScrollPosition,
+ currentSettingBoxScrollPosition,
+ updateSettingBoxScrollPosition,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/useSoftwareVersion.js b/src-ui/logics/configs/useSoftwareVersion.js
new file mode 100644
index 00000000..c81b81c2
--- /dev/null
+++ b/src-ui/logics/configs/useSoftwareVersion.js
@@ -0,0 +1,18 @@
+import { useStore_SoftwareVersion } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSoftwareVersion = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSoftwareVersion, updateSoftwareVersion, pendingSoftwareVersion } = useStore_SoftwareVersion();
+
+ const getSoftwareVersion = () => {
+ pendingSoftwareVersion();
+ asyncStdoutToPython("/get/data/version");
+ };
+
+ return {
+ currentSoftwareVersion,
+ getSoftwareVersion,
+ updateSoftwareVersion,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/vr/useIsEnabledOverlayLargeLog.js b/src-ui/logics/configs/vr/useIsEnabledOverlayLargeLog.js
new file mode 100644
index 00000000..0e1f8881
--- /dev/null
+++ b/src-ui/logics/configs/vr/useIsEnabledOverlayLargeLog.js
@@ -0,0 +1,28 @@
+import { useStore_IsEnabledOverlayLargeLog } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useIsEnabledOverlayLargeLog = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentIsEnabledOverlayLargeLog, updateIsEnabledOverlayLargeLog, pendingIsEnabledOverlayLargeLog } = useStore_IsEnabledOverlayLargeLog();
+
+ const getIsEnabledOverlayLargeLog = () => {
+ pendingIsEnabledOverlayLargeLog();
+ asyncStdoutToPython("/get/data/overlay_large_log");
+ };
+
+ const toggleIsEnabledOverlayLargeLog = () => {
+ pendingIsEnabledOverlayLargeLog();
+ if (currentIsEnabledOverlayLargeLog.data) {
+ asyncStdoutToPython("/set/disable/overlay_large_log");
+ } else {
+ asyncStdoutToPython("/set/enable/overlay_large_log");
+ }
+ };
+
+ return {
+ currentIsEnabledOverlayLargeLog,
+ getIsEnabledOverlayLargeLog,
+ updateIsEnabledOverlayLargeLog,
+ toggleIsEnabledOverlayLargeLog,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js b/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js
new file mode 100644
index 00000000..e51a34c3
--- /dev/null
+++ b/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js
@@ -0,0 +1,28 @@
+import { useStore_IsEnabledOverlaySmallLog } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useIsEnabledOverlaySmallLog = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentIsEnabledOverlaySmallLog, updateIsEnabledOverlaySmallLog, pendingIsEnabledOverlaySmallLog } = useStore_IsEnabledOverlaySmallLog();
+
+ const getIsEnabledOverlaySmallLog = () => {
+ pendingIsEnabledOverlaySmallLog();
+ asyncStdoutToPython("/get/data/overlay_small_log");
+ };
+
+ const toggleIsEnabledOverlaySmallLog = () => {
+ pendingIsEnabledOverlaySmallLog();
+ if (currentIsEnabledOverlaySmallLog.data) {
+ asyncStdoutToPython("/set/disable/overlay_small_log");
+ } else {
+ asyncStdoutToPython("/set/enable/overlay_small_log");
+ }
+ };
+
+ return {
+ currentIsEnabledOverlaySmallLog,
+ getIsEnabledOverlaySmallLog,
+ updateIsEnabledOverlaySmallLog,
+ toggleIsEnabledOverlaySmallLog,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/vr/useOverlayLargeLogSettings.js b/src-ui/logics/configs/vr/useOverlayLargeLogSettings.js
new file mode 100644
index 00000000..548189e3
--- /dev/null
+++ b/src-ui/logics/configs/vr/useOverlayLargeLogSettings.js
@@ -0,0 +1,24 @@
+import { useStore_OverlayLargeLogSettings } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useOverlayLargeLogSettings = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentOverlayLargeLogSettings, updateOverlayLargeLogSettings, pendingOverlayLargeLogSettings } = useStore_OverlayLargeLogSettings();
+
+ const getOverlayLargeLogSettings = () => {
+ // pendingOverlayLargeLogSettings();
+ asyncStdoutToPython("/get/data/overlay_large_log_settings");
+ };
+
+ const setOverlayLargeLogSettings = (overlay_large_log_settings) => {
+ // pendingOverlayLargeLogSettings();
+ asyncStdoutToPython("/set/data/overlay_large_log_settings", overlay_large_log_settings);
+ };
+
+ return {
+ currentOverlayLargeLogSettings,
+ getOverlayLargeLogSettings,
+ updateOverlayLargeLogSettings,
+ setOverlayLargeLogSettings,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/vr/useOverlayShowOnlyTranslatedMessages.js b/src-ui/logics/configs/vr/useOverlayShowOnlyTranslatedMessages.js
new file mode 100644
index 00000000..895581ae
--- /dev/null
+++ b/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,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/vr/useOverlaySmallLogSettings.js b/src-ui/logics/configs/vr/useOverlaySmallLogSettings.js
new file mode 100644
index 00000000..03b61393
--- /dev/null
+++ b/src-ui/logics/configs/vr/useOverlaySmallLogSettings.js
@@ -0,0 +1,24 @@
+import { useStore_OverlaySmallLogSettings } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useOverlaySmallLogSettings = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentOverlaySmallLogSettings, updateOverlaySmallLogSettings, pendingOverlaySmallLogSettings } = useStore_OverlaySmallLogSettings();
+
+ const getOverlaySmallLogSettings = () => {
+ // pendingOverlaySmallLogSettings();
+ asyncStdoutToPython("/get/data/overlay_small_log_settings");
+ };
+
+ const setOverlaySmallLogSettings = (overlay_small_log_settings) => {
+ // pendingOverlaySmallLogSettings();
+ asyncStdoutToPython("/set/data/overlay_small_log_settings", overlay_small_log_settings);
+ };
+
+ return {
+ currentOverlaySmallLogSettings,
+ getOverlaySmallLogSettings,
+ updateOverlaySmallLogSettings,
+ setOverlaySmallLogSettings,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/vr/useSendTextToOverlay.js b/src-ui/logics/configs/vr/useSendTextToOverlay.js
new file mode 100644
index 00000000..268881ec
--- /dev/null
+++ b/src-ui/logics/configs/vr/useSendTextToOverlay.js
@@ -0,0 +1,13 @@
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSendTextToOverlay = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+
+ const sendTextToOverlay = (text) => {
+ asyncStdoutToPython("/run/send_text_overlay", text);
+ };
+
+ return {
+ sendTextToOverlay,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/main/index.js b/src-ui/logics/main/index.js
new file mode 100644
index 00000000..9d142003
--- /dev/null
+++ b/src-ui/logics/main/index.js
@@ -0,0 +1,6 @@
+export { useIsVisibleResendButton } from "./useIsVisibleResendButton";
+export { useIsMainPageCompactMode } from "./useIsMainPageCompactMode";
+export { useLanguageSettings } from "./useLanguageSettings";
+export { useMainFunction } from "./useMainFunction";
+export { useMessageInputBoxRatio } from "./useMessageInputBoxRatio";
+export { useSelectableLanguageList } from "./useSelectableLanguageList";
\ No newline at end of file
diff --git a/src-ui/logics/main/useIsMainPageCompactMode.js b/src-ui/logics/main/useIsMainPageCompactMode.js
new file mode 100644
index 00000000..9a883c51
--- /dev/null
+++ b/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/data/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,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/main/useIsVisibleResendButton.js b/src-ui/logics/main/useIsVisibleResendButton.js
new file mode 100644
index 00000000..c479af0b
--- /dev/null
+++ b/src-ui/logics/main/useIsVisibleResendButton.js
@@ -0,0 +1,15 @@
+import { useStore_IsVisibleResendButton } from "@store";
+
+export const useIsVisibleResendButton = () => {
+ const { currentIsVisibleResendButton, updateIsVisibleResendButton } = useStore_IsVisibleResendButton();
+
+ const toggleIsVisibleResendButton = () => {
+ updateIsVisibleResendButton(!currentIsVisibleResendButton.data);
+ };
+
+ return {
+ currentIsVisibleResendButton,
+ toggleIsVisibleResendButton,
+ updateIsVisibleResendButton,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/main/useLanguageSettings.js b/src-ui/logics/main/useLanguageSettings.js
new file mode 100644
index 00000000..163f9f37
--- /dev/null
+++ b/src-ui/logics/main/useLanguageSettings.js
@@ -0,0 +1,169 @@
+import { useStore_SelectedPresetTabNumber, useStore_EnableMultiTranslation, useStore_SelectedYourLanguages, useStore_SelectedTargetLanguages, useStore_TranslationEngines, useStore_SelectedTranslationEngines } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useLanguageSettings = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const {
+ currentEnableMultiTranslation,
+ updateEnableMultiTranslation,
+ pendingEnableMultiTranslation,
+ } = useStore_EnableMultiTranslation();
+ const {
+ currentSelectedYourLanguages,
+ updateSelectedYourLanguages,
+ pendingSelectedYourLanguages,
+ } = useStore_SelectedYourLanguages();
+ const {
+ currentSelectedTargetLanguages,
+ updateSelectedTargetLanguages,
+ pendingSelectedTargetLanguages,
+ } = useStore_SelectedTargetLanguages();
+ const {
+ currentSelectedPresetTabNumber,
+ updateSelectedPresetTabNumber,
+ pendingSelectedPresetTabNumber,
+ } = useStore_SelectedPresetTabNumber();
+ const {
+ currentTranslationEngines,
+ updateTranslationEngines,
+ pendingTranslationEngines,
+ } = useStore_TranslationEngines();
+ const {
+ currentSelectedTranslationEngines,
+ updateSelectedTranslationEngines,
+ pendingSelectedTranslationEngines,
+ } = useStore_SelectedTranslationEngines();
+
+ const getEnableMultiTranslation = () => {
+ pendingEnableMultiTranslation();
+ asyncStdoutToPython("/get/data/multi_language_translation");
+ };
+
+ const getSelectedPresetTabNumber = () => {
+ pendingSelectedPresetTabNumber();
+ asyncStdoutToPython("/get/data/selected_tab_no");
+ };
+
+ const setSelectedPresetTabNumber = (preset_number) => {
+ pendingSelectedPresetTabNumber();
+
+ asyncStdoutToPython("/set/data/selected_tab_no", preset_number);
+ };
+
+
+ const getSelectedYourLanguages = () => {
+ pendingSelectedPresetTabNumber();
+ asyncStdoutToPython("/get/data/selected_your_languages");
+ };
+
+ const setSelectedYourLanguages = (selected_language_data) => {
+ pendingSelectedYourLanguages();
+ const send_obj = {
+ ...currentSelectedYourLanguages.data,
+ [currentSelectedPresetTabNumber.data]: {
+ 1: { // Fixed key 1.
+ language: selected_language_data.language,
+ country: selected_language_data.country,
+ enable: true,
+ }
+ }
+ };
+ asyncStdoutToPython("/set/data/selected_your_languages", send_obj);
+ };
+
+
+ const getSelectedTargetLanguages = () => {
+ pendingSelectedTargetLanguages();
+ asyncStdoutToPython("/get/data/selected_target_languages");
+ };
+
+ const setSelectedTargetLanguages = (selected_language_data) => {
+ pendingSelectedTargetLanguages();
+ let send_obj = currentSelectedTargetLanguages.data;
+ send_obj[currentSelectedPresetTabNumber.data][selected_language_data.target_key].language = selected_language_data.language,
+ send_obj[currentSelectedPresetTabNumber.data][selected_language_data.target_key].country = selected_language_data.country,
+ asyncStdoutToPython("/set/data/selected_target_languages", send_obj);
+ };
+
+ const addTargetLanguage = () => {
+ pendingSelectedTargetLanguages();
+ let send_obj = currentSelectedTargetLanguages.data;
+ let target_key = "2";
+ if (send_obj[currentSelectedPresetTabNumber.data]["2"].enable === true) {
+ target_key = "3";
+ }
+ send_obj[currentSelectedPresetTabNumber.data][target_key].enable = true,
+ asyncStdoutToPython("/set/data/selected_target_languages", send_obj);
+ };
+ const removeTargetLanguage = () => {
+ pendingSelectedTargetLanguages();
+ let send_obj = currentSelectedTargetLanguages.data;
+ let target_key = "3";
+ if (send_obj[currentSelectedPresetTabNumber.data]["3"].enable === false) {
+ target_key = "2";
+ }
+ send_obj[currentSelectedPresetTabNumber.data][target_key].enable = false,
+ asyncStdoutToPython("/set/data/selected_target_languages", send_obj);
+ };
+
+
+ const getTranslationEngines = () => {
+ pendingTranslationEngines();
+ asyncStdoutToPython("/get/data/translation_engines");
+ };
+
+ const getSelectedTranslationEngines = () => {
+ pendingSelectedTranslationEngines();
+ asyncStdoutToPython("/get/data/selected_translation_engines");
+ };
+
+ const setSelectedTranslationEngines = (selected_translator) => {
+ pendingSelectedTranslationEngines();
+ let send_obj = currentSelectedTranslationEngines.data;
+ send_obj[currentSelectedPresetTabNumber.data] = selected_translator;
+ asyncStdoutToPython("/set/data/selected_translation_engines", send_obj);
+ };
+
+ const runLanguageSwap = () => {
+ pendingSelectedYourLanguages();
+ pendingSelectedTargetLanguages();
+ asyncStdoutToPython("/run/swap_your_language_and_target_language");
+ };
+
+
+ return {
+ currentSelectedPresetTabNumber,
+ getSelectedPresetTabNumber,
+ updateSelectedPresetTabNumber,
+ setSelectedPresetTabNumber,
+
+ currentEnableMultiTranslation,
+ getEnableMultiTranslation,
+ updateEnableMultiTranslation,
+ // setEnableMultiTranslation,
+
+ currentSelectedYourLanguages,
+ getSelectedYourLanguages,
+ updateSelectedYourLanguages,
+ setSelectedYourLanguages,
+
+ currentSelectedTargetLanguages,
+ getSelectedTargetLanguages,
+ updateSelectedTargetLanguages,
+ setSelectedTargetLanguages,
+
+ addTargetLanguage,
+ removeTargetLanguage,
+
+ currentTranslationEngines,
+ getTranslationEngines,
+ updateTranslationEngines,
+
+ currentSelectedTranslationEngines,
+ getSelectedTranslationEngines,
+ updateSelectedTranslationEngines,
+ setSelectedTranslationEngines,
+
+ runLanguageSwap,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/main/useMainFunction.js b/src-ui/logics/main/useMainFunction.js
new file mode 100644
index 00000000..14b1e923
--- /dev/null
+++ b/src-ui/logics/main/useMainFunction.js
@@ -0,0 +1,94 @@
+import { getCurrent } from "@tauri-apps/api/window";
+
+import {
+ useStore_TranslationStatus,
+ useStore_TranscriptionSendStatus,
+ useStore_TranscriptionReceiveStatus,
+ useStore_ForegroundStatus,
+} from "@store";
+
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMainFunction = () => {
+ const {
+ currentTranslationStatus,
+ updateTranslationStatus,
+ pendingTranslationStatus,
+ } = useStore_TranslationStatus();
+ const {
+ currentTranscriptionSendStatus,
+ updateTranscriptionSendStatus,
+ pendingTranscriptionSendStatus,
+ } = useStore_TranscriptionSendStatus();
+ const {
+ currentTranscriptionReceiveStatus,
+ updateTranscriptionReceiveStatus,
+ pendingTranscriptionReceiveStatus,
+ } = useStore_TranscriptionReceiveStatus();
+ const {
+ currentForegroundStatus,
+ updateForegroundStatus,
+ } = useStore_ForegroundStatus();
+
+ const { asyncStdoutToPython } = useStdoutToPython();
+
+ const setTranslation = (to_enable) => {
+ pendingTranslationStatus();
+ if (to_enable) {
+ asyncStdoutToPython("/set/enable/translation");
+ } else {
+ asyncStdoutToPython("/set/disable/translation");
+ }
+ };
+ const toggleTranslation = () => setTranslation(!currentTranslationStatus.data);
+
+ const setTranscriptionSend = (to_enable) => {
+ pendingTranscriptionSendStatus();
+ if (to_enable) {
+ asyncStdoutToPython("/set/enable/transcription_send");
+ } else {
+ asyncStdoutToPython("/set/disable/transcription_send");
+ }
+ };
+ const toggleTranscriptionSend = () => setTranscriptionSend(!currentTranscriptionSendStatus.data);
+
+ const setTranscriptionReceive = (to_enable) => {
+ pendingTranscriptionReceiveStatus();
+ if (to_enable) {
+ asyncStdoutToPython("/set/enable/transcription_receive");
+ } else {
+ asyncStdoutToPython("/set/disable/transcription_receive");
+ }
+ };
+ const toggleTranscriptionReceive = () => setTranscriptionReceive(!currentTranscriptionReceiveStatus.data);
+
+
+ const toggleForeground = () => {
+ const main_page = getCurrent();
+ const is_foreground_enabled = !currentForegroundStatus.data;
+ main_page.setAlwaysOnTop(is_foreground_enabled);
+ updateForegroundStatus(is_foreground_enabled);
+ };
+
+ return {
+ currentTranslationStatus,
+ toggleTranslation,
+ updateTranslationStatus,
+ setTranslation,
+
+ currentTranscriptionSendStatus,
+ toggleTranscriptionSend,
+ updateTranscriptionSendStatus,
+ setTranscriptionSend,
+
+ currentTranscriptionReceiveStatus,
+ toggleTranscriptionReceive,
+ updateTranscriptionReceiveStatus,
+ setTranscriptionReceive,
+
+ currentForegroundStatus,
+ toggleForeground,
+ updateForegroundStatus,
+
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/main/useMessageInputBoxRatio.js b/src-ui/logics/main/useMessageInputBoxRatio.js
new file mode 100644
index 00000000..466fc02b
--- /dev/null
+++ b/src-ui/logics/main/useMessageInputBoxRatio.js
@@ -0,0 +1,27 @@
+import { appWindow } from "@tauri-apps/api/window";
+import { useStore_MessageInputBoxRatio } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { clampMinMax } from "@utils";
+export const useMessageInputBoxRatio = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentMessageInputBoxRatio, updateMessageInputBoxRatio } = useStore_MessageInputBoxRatio();
+
+ const getMessageInputBoxRatio = () => {
+ asyncStdoutToPython("/get/data/message_box_ratio");
+ };
+
+ const asyncSetMessageInputBoxRatio = async (ratio) => {
+ const minimized = await appWindow.isMinimized();
+ if (minimized === true) return; // don't save while the window is minimized.
+ const parsed = parseFloat(ratio.toFixed(2));
+ const valid_ratio = clampMinMax(parsed, 1, 99);
+ asyncStdoutToPython("/set/data/message_box_ratio", valid_ratio);
+ };
+
+ return {
+ currentMessageInputBoxRatio,
+ getMessageInputBoxRatio,
+ updateMessageInputBoxRatio,
+ asyncSetMessageInputBoxRatio,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/main/useSelectableLanguageList.js b/src-ui/logics/main/useSelectableLanguageList.js
new file mode 100644
index 00000000..ef771d7f
--- /dev/null
+++ b/src-ui/logics/main/useSelectableLanguageList.js
@@ -0,0 +1,17 @@
+import { useStore_SelectableLanguageList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectableLanguageList = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentSelectableLanguageList, updateSelectableLanguageList } = useStore_SelectableLanguageList();
+
+ const getSelectableLanguageList = () => {
+ asyncStdoutToPython("/get/data/selectable_language_list");
+ };
+
+ return {
+ currentSelectableLanguageList,
+ getSelectableLanguageList,
+ updateSelectableLanguageList,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
new file mode 100644
index 00000000..4234fe23
--- /dev/null
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -0,0 +1,537 @@
+import { translator_status } from "@ui_configs";
+import { arrayToObject } from "@utils";
+
+import {
+ useNotificationStatus,
+
+
+ useComputeMode,
+ useInitProgress,
+ useIsBackendReady,
+ useWindow,
+ useMessage,
+ useVolume,
+ useIsSoftwareUpdateAvailable,
+} from "@logics_common";
+
+import {
+ useMainFunction,
+ useSelectableLanguageList,
+ useLanguageSettings,
+ useIsMainPageCompactMode,
+ useMessageInputBoxRatio,
+} from "@logics_main";
+
+import {
+ useSoftwareVersion,
+ useEnableAutoMicSelect,
+ useEnableAutoSpeakerSelect,
+ useMicHostList,
+ useSelectedMicHost,
+ useMicDeviceList,
+ useSelectedMicDevice,
+ useSpeakerDeviceList,
+ useSelectedSpeakerDevice,
+ useMicThreshold,
+ useSpeakerThreshold,
+ useEnableAutoClearMessageInputBox,
+ useEnableSendOnlyTranslatedMessages,
+ useEnableAutoExportMessageLogs,
+ useEnableVrcMicMuteSync,
+ useEnableSendMessageToVrc,
+ useEnableSendReceivedMessageToVrc,
+ useSelectedFontFamily,
+ useUiLanguage,
+ useUiScaling,
+ useMessageLogUiScaling,
+ useSendMessageButtonType,
+ useTransparency,
+ useMicRecordTimeout,
+ useMicPhraseTimeout,
+ useMicMaxWords,
+ useMicWordFilterList,
+ useSpeakerRecordTimeout,
+ useSpeakerPhraseTimeout,
+ useSpeakerMaxWords,
+ useDeepLAuthKey,
+ useCTranslate2WeightTypeStatus,
+ useSelectableCTranslate2ComputeDeviceList,
+ useSelectedCTranslate2ComputeDevice,
+ useSelectableWhisperComputeDeviceList,
+ useSelectedWhisperComputeDevice,
+ useSelectedCTranslate2WeightType,
+ useSelectedTranscriptionEngine,
+ useSelectedWhisperWeightType,
+ useWhisperWeightTypeStatus,
+ useIsEnabledOverlaySmallLog,
+ useOverlaySmallLogSettings,
+ useIsEnabledOverlayLargeLog,
+ useOverlayLargeLogSettings,
+ useOverlayShowOnlyTranslatedMessages,
+ useOscIpAddress,
+ useOscPort,
+} from "@logics_configs";
+
+export const useReceiveRoutes = () => {
+ const { updateComputeMode } = useComputeMode();
+ const { updateInitProgress } = useInitProgress();
+ const { updateIsBackendReady } = useIsBackendReady();
+ const { restoreWindowGeometry } = useWindow();
+ const { updateIsMainPageCompactMode } = useIsMainPageCompactMode();
+ const {
+ updateTranslationStatus,
+ updateTranscriptionSendStatus,
+ updateTranscriptionReceiveStatus,
+ } = useMainFunction();
+ const {
+ updateSelectedPresetTabNumber,
+ updateEnableMultiTranslation,
+ updateSelectedYourLanguages,
+ updateSelectedTargetLanguages,
+ updateTranslationEngines,
+ updateSelectedTranslationEngines,
+ } = useLanguageSettings();
+ const { updateSelectableLanguageList } = useSelectableLanguageList();
+ const {
+ addSystemMessageLog,
+ updateSentMessageLogById,
+ addSentMessageLog,
+ addReceivedMessageLog,
+ } = useMessage();
+ const { updateIsSoftwareUpdateAvailable } = useIsSoftwareUpdateAvailable();
+ const { updateSoftwareVersion } = useSoftwareVersion();
+ const { updateEnableAutoMicSelect } = useEnableAutoMicSelect();
+ const { updateEnableAutoSpeakerSelect } = useEnableAutoSpeakerSelect();
+ const { updateMicHostList } = useMicHostList();
+ const { updateSelectedMicHost } = useSelectedMicHost();
+ const { updateMicDeviceList } = useMicDeviceList();
+ const { updateSelectedMicDevice } = useSelectedMicDevice();
+ const { updateSpeakerDeviceList } = useSpeakerDeviceList();
+ const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
+ const { updateMicThreshold, updateEnableAutomaticMicThreshold } = useMicThreshold();
+ const { updateSpeakerThreshold, updateEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
+
+ const { updateEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
+ const { updateEnableSendOnlyTranslatedMessages } = useEnableSendOnlyTranslatedMessages();
+ const { updateEnableAutoExportMessageLogs } = useEnableAutoExportMessageLogs();
+ const { updateEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
+ const { updateEnableSendMessageToVrc } = useEnableSendMessageToVrc();
+ const { updateEnableSendReceivedMessageToVrc } = useEnableSendReceivedMessageToVrc();
+
+ const { updateSendMessageButtonType } = useSendMessageButtonType();
+ const { updateUiLanguage } = useUiLanguage();
+ const { updateUiScaling } = useUiScaling();
+ const { updateMessageLogUiScaling } = useMessageLogUiScaling();
+ const {
+ updateVolumeVariable_Mic,
+ updateVolumeVariable_Speaker,
+ updateMicThresholdCheckStatus,
+ updateSpeakerThresholdCheckStatus,
+ } = useVolume();
+
+ const { updateMessageInputBoxRatio } = useMessageInputBoxRatio();
+ const { updateSelectedFontFamily } = useSelectedFontFamily();
+ const { updateTransparency } = useTransparency();
+
+ const { updateMicRecordTimeout } = useMicRecordTimeout();
+ const { updateMicPhraseTimeout } = useMicPhraseTimeout();
+ const { updateMicMaxWords } = useMicMaxWords();
+ const { updateMicWordFilterList } = useMicWordFilterList();
+
+ const { updateSpeakerRecordTimeout } = useSpeakerRecordTimeout();
+ const { updateSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
+ const { updateSpeakerMaxWords } = useSpeakerMaxWords();
+
+ const { updateDeepLAuthKey } = useDeepLAuthKey();
+ const { updateSelectedCTranslate2WeightType } = useSelectedCTranslate2WeightType();
+ const {
+ updateDownloadedCTranslate2WeightTypeStatus,
+ updateDownloadProgressCTranslate2WeightTypeStatus,
+ downloadedCTranslate2WeightType,
+ } = useCTranslate2WeightTypeStatus();
+ const { updateSelectableCTranslate2ComputeDeviceList } = useSelectableCTranslate2ComputeDeviceList();
+ const { updateSelectedCTranslate2ComputeDevice } = useSelectedCTranslate2ComputeDevice();
+ const { updateSelectableWhisperComputeDeviceList } = useSelectableWhisperComputeDeviceList();
+ const { updateSelectedWhisperComputeDevice } = useSelectedWhisperComputeDevice();
+
+ const { updateSelectedTranscriptionEngine } = useSelectedTranscriptionEngine();
+ const { updateSelectedWhisperWeightType } = useSelectedWhisperWeightType();
+ const {
+ updateDownloadedWhisperWeightTypeStatus,
+ updateDownloadProgressWhisperWeightTypeStatus,
+ downloadedWhisperWeightType,
+ } = useWhisperWeightTypeStatus();
+
+ const { updateOverlaySmallLogSettings } = useOverlaySmallLogSettings();
+ const { updateIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
+ const { updateOverlayLargeLogSettings } = useOverlayLargeLogSettings();
+ const { updateIsEnabledOverlayLargeLog } = useIsEnabledOverlayLargeLog();
+ const { updateOverlayShowOnlyTranslatedMessages } = useOverlayShowOnlyTranslatedMessages();
+
+ const { updateOscIpAddress } = useOscIpAddress();
+ const { updateOscPort } = useOscPort();
+
+
+
+ const { showNotification_Success, showNotification_Error } = useNotificationStatus();
+
+ const routes = {
+ // Common
+ "/run/feed_watchdog": () => {},
+ "/run/initialization_progress": updateInitProgress,
+ "/get/data/compute_mode": updateComputeMode,
+ "/get/data/main_window_geometry": restoreWindowGeometry,
+ "/set/data/main_window_geometry": () => {},
+ "/run/open_filepath_logs": () => console.log("Opened Directory, Message Logs"),
+ "/run/open_filepath_config_file": () => console.log("Opened Directory, Config File"),
+ "/run/update_software_flag": updateIsSoftwareUpdateAvailable,
+
+ // Main Page
+ // Page Controls
+ "/get/data/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,
+ "/set/enable/transcription_send": updateTranscriptionSendStatus,
+ "/set/disable/transcription_send": updateTranscriptionSendStatus,
+ "/set/enable/transcription_receive": updateTranscriptionReceiveStatus,
+ "/set/disable/transcription_receive": updateTranscriptionReceiveStatus,
+
+ // Language Settings
+ "/get/data/selected_tab_no": updateSelectedPresetTabNumber,
+ "/set/data/selected_tab_no": updateSelectedPresetTabNumber,
+ "/get/data/multi_language_translation": updateEnableMultiTranslation,
+ "/get/data/selected_your_languages": updateSelectedYourLanguages,
+ "/set/data/selected_your_languages": updateSelectedYourLanguages,
+ "/get/data/selected_target_languages": updateSelectedTargetLanguages,
+ "/set/data/selected_target_languages": updateSelectedTargetLanguages,
+
+ "/get/data/translation_engines": (payload) => {
+ const updateTranslatorAvailability = (keys) => {
+ return translator_status.map(translator => ({
+ ...translator,
+ is_available: keys.includes(translator.id),
+ }));
+ };
+ const updated_list = updateTranslatorAvailability(payload);
+ updateTranslationEngines(updated_list);
+ },
+ "/run/translation_engines": (payload) => {
+ const updateTranslatorAvailability = (keys) => {
+ return translator_status.map(translator => ({
+ ...translator,
+ is_available: keys.includes(translator.id),
+ }));
+ };
+ const updated_list = updateTranslatorAvailability(payload);
+ updateTranslationEngines(updated_list);
+ },
+ "/get/data/selected_translation_engines": updateSelectedTranslationEngines,
+ "/set/data/selected_translation_engines": updateSelectedTranslationEngines,
+ "/run/selected_translation_engines": updateSelectedTranslationEngines,
+
+ "/run/swap_your_language_and_target_language": (payload) => {
+ updateSelectedYourLanguages(payload.your);
+ updateSelectedTargetLanguages(payload.target);
+ },
+
+
+ // Language Selector
+ "/get/data/selectable_language_list": updateSelectableLanguageList,
+
+ // Message
+ "/run/send_message_box": updateSentMessageLogById,
+ "/run/typing_message_box": ()=>{},
+ "/run/stop_typing_message_box": ()=>{},
+ "/run/transcription_send_mic_message": addSentMessageLog,
+ "/run/transcription_receive_speaker_message": addReceivedMessageLog,
+
+ // Message Box
+ "/get/data/message_box_ratio": updateMessageInputBoxRatio,
+ "/set/data/message_box_ratio": updateMessageInputBoxRatio,
+
+
+ // Config Page
+ // Common
+ "/get/data/version": updateSoftwareVersion,
+
+ // Device Tab
+ "/get/data/auto_mic_select": updateEnableAutoMicSelect,
+ "/set/enable/auto_mic_select": updateEnableAutoMicSelect,
+ "/set/disable/auto_mic_select": updateEnableAutoMicSelect,
+ "/get/data/auto_speaker_select": updateEnableAutoSpeakerSelect,
+ "/set/enable/auto_speaker_select": updateEnableAutoSpeakerSelect,
+ "/set/disable/auto_speaker_select": updateEnableAutoSpeakerSelect,
+
+ "/get/data/mic_host_list": (payload) => updateMicHostList(arrayToObject(payload)),
+ "/run/mic_host_list": (payload) => updateMicHostList(arrayToObject(payload)),
+ "/get/data/selected_mic_host": updateSelectedMicHost,
+ "/set/data/selected_mic_host": (payload) => {
+ updateSelectedMicHost(payload.host);
+ updateSelectedMicDevice(payload.device);
+ },
+
+ "/get/data/mic_device_list": (payload) => updateMicDeviceList(arrayToObject(payload)),
+ "/run/mic_device_list": (payload) => updateMicDeviceList(arrayToObject(payload)),
+ "/get/data/selected_mic_device": updateSelectedMicDevice,
+ "/set/data/selected_mic_device": updateSelectedMicDevice,
+
+ "/run/selected_mic_device": (payload) => {
+
+ updateSelectedMicHost(payload.host);
+ updateSelectedMicDevice(payload.device);
+ },
+
+ "/get/data/speaker_device_list": (payload) => updateSpeakerDeviceList(arrayToObject(payload)),
+ "/run/speaker_device_list": (payload) => updateSpeakerDeviceList(arrayToObject(payload)),
+ "/get/data/selected_speaker_device": updateSelectedSpeakerDevice,
+ "/set/data/selected_speaker_device": updateSelectedSpeakerDevice,
+ "/run/selected_speaker_device": updateSelectedSpeakerDevice,
+
+ "/run/check_mic_volume": updateVolumeVariable_Mic,
+ "/run/check_speaker_volume": updateVolumeVariable_Speaker,
+ "/set/enable/check_mic_threshold": updateMicThresholdCheckStatus,
+ "/set/disable/check_mic_threshold": updateMicThresholdCheckStatus,
+ "/set/enable/check_speaker_threshold": updateSpeakerThresholdCheckStatus,
+ "/set/disable/check_speaker_threshold": updateSpeakerThresholdCheckStatus,
+
+ "/get/data/mic_threshold": updateMicThreshold,
+ "/set/data/mic_threshold": updateMicThreshold,
+ "/get/data/speaker_threshold": updateSpeakerThreshold,
+ "/set/data/speaker_threshold": updateSpeakerThreshold,
+
+ "/get/data/mic_automatic_threshold": updateEnableAutomaticMicThreshold,
+ "/set/enable/mic_automatic_threshold": updateEnableAutomaticMicThreshold,
+ "/set/disable/mic_automatic_threshold": updateEnableAutomaticMicThreshold,
+ "/get/data/speaker_automatic_threshold": updateEnableAutomaticSpeakerThreshold,
+ "/set/enable/speaker_automatic_threshold": updateEnableAutomaticSpeakerThreshold,
+ "/set/disable/speaker_automatic_threshold": updateEnableAutomaticSpeakerThreshold,
+
+ // Appearance
+ "/get/data/ui_language": updateUiLanguage,
+ "/set/data/ui_language": updateUiLanguage,
+
+ "/get/data/ui_scaling": updateUiScaling,
+ "/set/data/ui_scaling": updateUiScaling,
+
+ "/get/data/textbox_ui_scaling": updateMessageLogUiScaling,
+ "/set/data/textbox_ui_scaling": updateMessageLogUiScaling,
+
+ "/get/data/send_message_button_type": updateSendMessageButtonType,
+ "/set/data/send_message_button_type": updateSendMessageButtonType,
+
+ "/get/data/font_family": updateSelectedFontFamily,
+ "/set/data/font_family": updateSelectedFontFamily,
+
+ "/get/data/transparency": updateTransparency,
+ "/set/data/transparency": updateTransparency,
+
+ // Translation
+ "/get/data/deepl_auth_key": updateDeepLAuthKey,
+ "/set/data/deepl_auth_key": updateDeepLAuthKey,
+ "/delete/data/deepl_auth_key": () => updateDeepLAuthKey(""),
+
+ "/get/data/ctranslate2_weight_type": updateSelectedCTranslate2WeightType,
+ "/set/data/ctranslate2_weight_type": updateSelectedCTranslate2WeightType,
+
+ "/get/data/selectable_ctranslate2_weight_type_dict": updateDownloadedCTranslate2WeightTypeStatus,
+
+ "/get/data/translation_compute_device_list": (payload) => updateSelectableCTranslate2ComputeDeviceList(transformToIndexedArray(payload)),
+ "/get/data/selected_translation_compute_device": updateSelectedCTranslate2ComputeDevice,
+ "/set/data/selected_translation_compute_device": updateSelectedCTranslate2ComputeDevice,
+
+ "/run/downloaded_ctranslate2_weight": downloadedCTranslate2WeightType,
+ "/run/download_ctranslate2_weight": () => {},
+ "/run/download_progress_ctranslate2_weight": updateDownloadProgressCTranslate2WeightTypeStatus,
+
+ // Transcription
+ "/get/data/mic_record_timeout": updateMicRecordTimeout,
+ "/set/data/mic_record_timeout": updateMicRecordTimeout,
+
+ "/get/data/mic_phrase_timeout": updateMicPhraseTimeout,
+ "/set/data/mic_phrase_timeout": updateMicPhraseTimeout,
+
+ "/get/data/mic_max_phrases": updateMicMaxWords,
+ "/set/data/mic_max_phrases": updateMicMaxWords,
+
+ "/get/data/mic_word_filter": (payload) => {
+ updateMicWordFilterList((prev_list) => {
+ const updated_list = [...prev_list.data];
+ for (const value of payload) {
+ const existing_item = updated_list.find(item => item.value === value);
+ if (existing_item) {
+ existing_item.is_redoable = false;
+ } else {
+ updated_list.push({ value, is_redoable: false });
+ }
+ }
+ return updated_list;
+ });
+ },
+ "/set/data/mic_word_filter": (payload) => {
+ updateMicWordFilterList((prev_list) => {
+ const updated_list = [...prev_list.data];
+ for (const value of payload) {
+ const existing_item = updated_list.find(item => item.value === value);
+ if (existing_item) {
+ existing_item.is_redoable = false;
+ } else {
+ updated_list.push({ value, is_redoable: false });
+ }
+ }
+ return updated_list;
+ });
+ },
+ "/run/word_filter": (payload) => addSystemMessageLog(payload.message),
+
+
+ "/get/data/speaker_record_timeout": updateSpeakerRecordTimeout,
+ "/set/data/speaker_record_timeout": updateSpeakerRecordTimeout,
+
+ "/get/data/speaker_phrase_timeout": updateSpeakerPhraseTimeout,
+ "/set/data/speaker_phrase_timeout": updateSpeakerPhraseTimeout,
+
+ "/get/data/speaker_max_phrases": updateSpeakerMaxWords,
+ "/set/data/speaker_max_phrases": updateSpeakerMaxWords,
+
+ "/get/data/selected_transcription_engine": updateSelectedTranscriptionEngine,
+ "/set/data/selected_transcription_engine": updateSelectedTranscriptionEngine,
+
+ "/get/data/whisper_weight_type": updateSelectedWhisperWeightType,
+ "/set/data/whisper_weight_type": updateSelectedWhisperWeightType,
+
+ "/get/data/selectable_whisper_weight_type_dict": updateDownloadedWhisperWeightTypeStatus,
+
+ "/run/downloaded_whisper_weight": downloadedWhisperWeightType,
+ "/run/download_whisper_weight": () => {},
+ "/run/download_progress_whisper_weight": updateDownloadProgressWhisperWeightTypeStatus,
+
+ "/get/data/transcription_compute_device_list": (payload) => updateSelectableWhisperComputeDeviceList(transformToIndexedArray(payload)),
+ "/get/data/selected_transcription_compute_device": updateSelectedWhisperComputeDevice,
+ "/set/data/selected_transcription_compute_device": updateSelectedWhisperComputeDevice,
+
+ // VR
+ "/get/data/overlay_small_log": updateIsEnabledOverlaySmallLog,
+ "/set/enable/overlay_small_log": updateIsEnabledOverlaySmallLog,
+ "/set/disable/overlay_small_log": updateIsEnabledOverlaySmallLog,
+
+ "/get/data/overlay_small_log_settings": updateOverlaySmallLogSettings,
+ "/set/data/overlay_small_log_settings": updateOverlaySmallLogSettings,
+
+ "/get/data/overlay_large_log": updateIsEnabledOverlayLargeLog,
+ "/set/enable/overlay_large_log": updateIsEnabledOverlayLargeLog,
+ "/set/disable/overlay_large_log": updateIsEnabledOverlayLargeLog,
+
+ "/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,
+
+ "/run/send_text_overlay": () => {},
+
+ // Others Tab
+ "/get/data/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
+ "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
+ "/set/disable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
+
+ "/get/data/send_only_translated_messages": updateEnableSendOnlyTranslatedMessages,
+ "/set/enable/send_only_translated_messages": updateEnableSendOnlyTranslatedMessages,
+ "/set/disable/send_only_translated_messages": updateEnableSendOnlyTranslatedMessages,
+
+ "/get/data/logger_feature": updateEnableAutoExportMessageLogs,
+ "/set/enable/logger_feature": updateEnableAutoExportMessageLogs,
+ "/set/disable/logger_feature": updateEnableAutoExportMessageLogs,
+
+ "/get/data/vrc_mic_mute_sync": updateEnableVrcMicMuteSync,
+ "/set/enable/vrc_mic_mute_sync": updateEnableVrcMicMuteSync,
+ "/set/disable/vrc_mic_mute_sync": updateEnableVrcMicMuteSync,
+
+ "/get/data/send_message_to_vrc": updateEnableSendMessageToVrc,
+ "/set/enable/send_message_to_vrc": updateEnableSendMessageToVrc,
+ "/set/disable/send_message_to_vrc": updateEnableSendMessageToVrc,
+
+ "/get/data/send_received_message_to_vrc": updateEnableSendReceivedMessageToVrc,
+ "/set/enable/send_received_message_to_vrc": updateEnableSendReceivedMessageToVrc,
+ "/set/disable/send_received_message_to_vrc": updateEnableSendReceivedMessageToVrc,
+
+ // Advanced Settings
+ "/get/data/osc_ip_address": updateOscIpAddress,
+ "/set/data/osc_ip_address": updateOscIpAddress,
+
+ "/get/data/osc_port": updateOscPort,
+ "/set/data/osc_port": updateOscPort,
+
+ "/get/data/mic_avg_logprob": ()=>{}, // Not implemented on UI yet
+ "/get/data/mic_no_speech_prob": ()=>{}, // Not implemented on UI yet
+ "/get/data/speaker_avg_logprob": ()=>{}, // Not implemented on UI yet
+ "/get/data/speaker_no_speech_prob": ()=>{}, // Not implemented on UI yet
+ "/get/data/convert_message_to_romaji": ()=>{}, // Not implemented on UI yet
+ "/get/data/convert_message_to_hiragana": ()=>{}, // Not implemented on UI yet
+ };
+
+ const error_routes = {
+ "/set/data/mic_record_timeout": updateMicRecordTimeout,
+ "/set/data/mic_phrase_timeout": updateMicPhraseTimeout,
+ "/set/data/mic_max_phrases": updateMicMaxWords,
+
+ "/set/data/speaker_record_timeout": updateSpeakerRecordTimeout,
+ "/set/data/speaker_phrase_timeout": updateSpeakerPhraseTimeout,
+ "/set/data/speaker_max_phrases": updateSpeakerMaxWords,
+
+ "/set/data/deepl_auth_key": updateDeepLAuthKey,
+ };
+
+
+ const receiveRoutes = (parsed_data) => {
+ const initDataSyncProcess = (payload) => {
+ for (const [endpoint, value] of Object.entries(payload)) {
+ const route = routes[endpoint];
+ (route) ? route(value) : console.error(`Invalid endpoint: ${endpoint}\nvalue: ${JSON.stringify(value)}`);
+ }
+ };
+
+ switch (parsed_data.status) {
+ case 200:
+ if (parsed_data.endpoint === "/run/initialization_complete") {
+ initDataSyncProcess(parsed_data.result);
+ updateIsBackendReady(true);
+ break;
+ };
+ const route = routes[parsed_data.endpoint];
+ (route) ? route(parsed_data.result) : console.error(`Invalid endpoint: ${parsed_data.endpoint}\nresult: ${JSON.stringify(parsed_data.result)}`);
+ break;
+
+ case 400:
+ const error_route = error_routes[parsed_data.endpoint];
+ (error_route) ? error_route(parsed_data.result.data) : console.error(`Invalid endpoint: ${parsed_data.endpoint}\nresult: ${JSON.stringify(parsed_data.result)}`);
+ console.error(`status 400: ${JSON.stringify(parsed_data.result)}`);
+ showNotification_Error(parsed_data.result.message);
+ break;
+
+ case 348:
+ // console.log(`from backend: %c ${JSON.stringify(parsed_data)}`, style_348);
+ break;
+
+ default:
+ console.log("Received data status does not match.", parsed_data);
+ break;
+ }
+
+ };
+ return { receiveRoutes };
+};
+
+const style_348 = [
+ "color: gray",
+].join(";");
+
+const transformToIndexedArray = (devices) => {
+ return devices.reduce((result, device, index) => {
+ result[index] = device;
+ return result;
+ }, {});
+};
\ No newline at end of file
diff --git a/src-ui/logics/useStartPython.js b/src-ui/logics/useStartPython.js
new file mode 100644
index 00000000..394e8cd2
--- /dev/null
+++ b/src-ui/logics/useStartPython.js
@@ -0,0 +1,25 @@
+import { Command } from "@tauri-apps/api/shell";
+import { store } from "@store";
+import { useReceiveRoutes } from "./useReceiveRoutes";
+export const useStartPython = () => {
+ const { receiveRoutes } = useReceiveRoutes();
+
+ const asyncStartPython = async () => {
+ const command = Command.sidecar("bin/VRCT-sidecar");
+ command.on("error", error => console.error(`error: "${error}"`));
+ command.stdout.on("data", (line) => {
+ let parsed_data = "";
+ try {
+ parsed_data = JSON.parse(line);
+ receiveRoutes(parsed_data);
+ } catch (error) {
+ console.log(error, line);
+ }
+ });
+ command.stderr.on("data", line => console.error("stderr:", line));
+ const backend_subprocess = await command.spawn();
+ store.backend_subprocess = backend_subprocess;
+ };
+
+ return { asyncStartPython };
+};
\ No newline at end of file
diff --git a/src-ui/logics/useStdoutToPython.js b/src-ui/logics/useStdoutToPython.js
new file mode 100644
index 00000000..fa7c0e35
--- /dev/null
+++ b/src-ui/logics/useStdoutToPython.js
@@ -0,0 +1,21 @@
+import { store } from "@store";
+import { encode } from "js-base64";
+
+export const useStdoutToPython = () => {
+ const asyncStdoutToPython = async (path, value = undefined) => {
+ let send_object = { endpoint: path };
+ if (value !== undefined) send_object.data = encode(JSON.stringify(value));
+
+ // send to python
+ const backend_subprocess = store.backend_subprocess;
+ if (backend_subprocess) {
+ await backend_subprocess.write(JSON.stringify(send_object) + "\n").then(() => {
+ }).catch((err) => {
+ console.log(err);
+ });
+ } else {
+ console.error("Backend subprocess is not found.", backend_subprocess);
+ }
+ };
+ return { asyncStdoutToPython };
+};
\ No newline at end of file
diff --git a/src-ui/store.js b/src-ui/store.js
new file mode 100644
index 00000000..19d81081
--- /dev/null
+++ b/src-ui/store.js
@@ -0,0 +1,275 @@
+import {
+ atom,
+ useAtomValue,
+ useSetAtom
+} from "jotai";
+
+import {
+ generateTestData,
+} from "@test_data";
+import {
+ translator_status,
+ ctranslate2_weight_type_status,
+ whisper_weight_type_status,
+} from "@ui_configs";
+
+export const store = {
+ backend_subprocess: null,
+ config_page: null,
+ setting_box_scroll_container: null,
+ log_box_ref: null,
+ is_applied_init_message_box_height: false,
+};
+
+const generatePropertyNames = (base_name) => ({
+ error: `error${base_name}`,
+ pending: `pending${base_name}`,
+ current: `current${base_name}`,
+ update: `update${base_name}`,
+ updatePart: `updatePart${base_name}`,
+ async_update: `asyncUpdate${base_name}`,
+ add: `add${base_name}`,
+ async_add: `asyncAdd${base_name}`,
+});
+
+
+const createAtomWithHook = (initialValue, base_name, options) => {
+ const property_names = generatePropertyNames(base_name);
+ const atomInstance = atom({
+ state: (options?.is_state_ok) ? "ok" : "pending",
+ data: initialValue,
+ });
+
+ const useHook = () => {
+ const currentAtom = useAtomValue(atomInstance);
+ const setAtom = useSetAtom(atomInstance);
+
+ const pendingAtom = () => {
+ setAtom((old_value) => {
+ let new_value = {
+ state: "pending",
+ data: old_value.data,
+ };
+ return new_value;
+ });
+ };
+
+ const updateAtom = (payload) => {
+ setAtom((currentValue) => {
+ if (typeof payload === "function") {
+ const updated_data = payload(currentValue);
+ return {
+ state: "ok",
+ data: updated_data,
+ };
+ } else {
+ return {
+ state: "ok",
+ data: payload,
+ };
+ }
+ });
+ };
+
+ const errorAtom = () => {
+ setAtom((old_value) => {
+ let new_value = {
+ state: "error",
+ data: old_value.data,
+ };
+ return new_value;
+ });
+ };
+
+ const addAtom = (value) => {
+ setAtom((old_value) => {
+ return {
+ state: "ok",
+ data: [...old_value.data, value],
+ };
+ });
+ };
+
+ return {
+ [property_names.error]: errorAtom,
+ [property_names.pending]: pendingAtom,
+ [property_names.current]: currentAtom,
+ [property_names.update]: updateAtom,
+ [property_names.add]: addAtom,
+ };
+ };
+
+ return { atomInstance, useHook };
+};
+
+
+// Common
+export const { atomInstance: Atom_IsBackendReady, useHook: useStore_IsBackendReady } = createAtomWithHook(false, "IsBackendReady");
+export const { atomInstance: Atom_ComputeMode, useHook: useStore_ComputeMode } = createAtomWithHook("", "ComputeMode");
+export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
+export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_MainFunctionsStateMemory } = createAtomWithHook({
+ transcription_send: false,
+ transcription_receive: false,
+}, "MainFunctionsStateMemory");
+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");
+export const { atomInstance: Atom_NotificationStatus, useHook: useStore_NotificationStatus } = createAtomWithHook({
+ status: "",
+ is_open: false,
+ key: 0,
+ message: "",
+}, "NotificationStatus");
+
+// Main Page
+// Functions
+export const { atomInstance: Atom_TranslationStatus, useHook: useStore_TranslationStatus } = createAtomWithHook(false, "TranslationStatus", {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(false, "TranscriptionReceiveStatus", {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([], "MessageLogs");
+// export const { atomInstance: Atom_MessageLogs, useHook: useStore_MessageLogs } = createAtomWithHook(generateTestData(20), "MessageLogs"); // For testing
+export const { atomInstance: Atom_MessageInputValue, useHook: useStore_MessageInputValue } = createAtomWithHook("", "MessageInputValue");
+export const { atomInstance: Atom_IsVisibleResendButton, useHook: useStore_IsVisibleResendButton } = createAtomWithHook(false, "IsVisibleResendButton", {is_state_ok: true});
+export const { atomInstance: Atom_IsAppliedInitMessageBoxHeight, useHook: useStore_IsAppliedInitMessageBoxHeight } = createAtomWithHook(false, "IsAppliedInitMessageBoxHeight");
+
+export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook([], "SelectableLanguageList");
+
+export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAtomWithHook("1", "SelectedPresetTabNumber");
+export const { atomInstance: Atom_EnableMultiTranslation, useHook: useStore_EnableMultiTranslation } = createAtomWithHook(false, "EnableMultiTranslation");
+export const { atomInstance: Atom_SelectedYourLanguages, useHook: useStore_SelectedYourLanguages } = createAtomWithHook({}, "SelectedYourLanguages");
+export const { atomInstance: Atom_SelectedTargetLanguages, useHook: useStore_SelectedTargetLanguages } = createAtomWithHook({}, "SelectedTargetLanguages");
+
+
+export const { atomInstance: Atom_TranslationEngines, useHook: useStore_TranslationEngines } = createAtomWithHook(translator_status, "TranslationEngines");
+export const { atomInstance: Atom_SelectedTranslationEngines, useHook: useStore_SelectedTranslationEngines } = createAtomWithHook({1:"", 2:"", 3:""}, "SelectedTranslationEngines");
+
+
+// Designs
+export const { atomInstance: Atom_IsMainPageCompactMode, useHook: useStore_IsMainPageCompactMode } = createAtomWithHook(false, "IsMainPageCompactMode");
+export const { atomInstance: Atom_MessageInputBoxRatio, useHook: useStore_MessageInputBoxRatio } = createAtomWithHook(20, "MessageInputBoxRatio");
+export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_IsOpenedLanguageSelector } = createAtomWithHook(
+ { your_language: false, target_language: false, target_key: "1" },
+ "IsOpenedLanguageSelector"
+);
+
+
+// Config Page
+// Common
+export const { atomInstance: Atom_SoftwareVersion, useHook: useStore_SoftwareVersion } = createAtomWithHook("-", "SoftwareVersion");
+export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId");
+export const { atomInstance: Atom_SettingBoxScrollPosition, useHook: useStore_SettingBoxScrollPosition } = createAtomWithHook(0, "SettingBoxScrollPosition");
+
+// Designs
+export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useStore_IsOpenedDropdownMenu } = createAtomWithHook("", "IsOpenedDropdownMenu");
+
+// Device
+export const { atomInstance: Atom_EnableAutoMicSelect, useHook: useStore_EnableAutoMicSelect } = createAtomWithHook(true, "EnableAutoMicSelect");
+export const { atomInstance: Atom_EnableAutoSpeakerSelect, useHook: useStore_EnableAutoSpeakerSelect } = createAtomWithHook(true, "EnableAutoSpeakerSelect");
+
+export const { atomInstance: Atom_MicHostList, useHook: useStore_MicHostList } = createAtomWithHook({}, "MicHostList");
+export const { atomInstance: Atom_SelectedMicHost, useHook: useStore_SelectedMicHost } = createAtomWithHook("Nothing Selected", "SelectedMicHost");
+export const { atomInstance: Atom_MicDeviceList, useHook: useStore_MicDeviceList } = createAtomWithHook({}, "MicDeviceList");
+export const { atomInstance: Atom_SelectedMicDevice, useHook: useStore_SelectedMicDevice } = createAtomWithHook("Nothing Selected", "SelectedMicDevice");
+
+export const { atomInstance: Atom_SpeakerDeviceList, useHook: useStore_SpeakerDeviceList } = createAtomWithHook({}, "SpeakerDeviceList");
+export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useStore_SelectedSpeakerDevice } = createAtomWithHook("Nothing Selected", "SelectedSpeakerDevice");
+
+export const { atomInstance: Atom_MicVolume, useHook: useStore_MicVolume } = createAtomWithHook(0, "MicVolume");
+export const { atomInstance: Atom_SpeakerVolume, useHook: useStore_SpeakerVolume } = createAtomWithHook(0, "SpeakerVolume");
+
+export const { atomInstance: Atom_MicThresholdCheckStatus, useHook: useStore_MicThresholdCheckStatus } = createAtomWithHook(false, "MicThresholdCheckStatus", {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(0, "MicThreshold");
+export const { atomInstance: Atom_SpeakerThreshold, useHook: useStore_SpeakerThreshold } = createAtomWithHook(0, "SpeakerThreshold");
+
+export const { atomInstance: Atom_EnableAutomaticMicThreshold, useHook: useStore_EnableAutomaticMicThreshold } = createAtomWithHook(false, "EnableAutomaticMicThreshold");
+export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useStore_EnableAutomaticSpeakerThreshold } = createAtomWithHook(false, "EnableAutomaticSpeakerThreshold");
+
+
+// Appearance
+export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook("en", "UiLanguage");
+export const { atomInstance: Atom_UiScaling, useHook: useStore_UiScaling } = createAtomWithHook(100, "UiScaling");
+export const { atomInstance: Atom_MessageLogUiScaling, useHook: useStore_MessageLogUiScaling } = createAtomWithHook(100, "MessageLogUiScaling");
+export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAtomWithHook("show", "SendMessageButtonType");
+export const { atomInstance: Atom_SelectedFontFamily, useHook: useStore_SelectedFontFamily } = createAtomWithHook("Yu Gothic UI", "SelectedFontFamily");
+export const { atomInstance: Atom_SelectableFontFamilyList, useHook: useStore_SelectableFontFamilyList } = createAtomWithHook({}, "SelectableFontFamilyList");
+export const { atomInstance: Atom_Transparency, useHook: useStore_Transparency } = createAtomWithHook(100, "Transparency");
+
+
+export const { atomInstance: Atom_IsOpenedMicWordFilterList, useHook: useStore_IsOpenedMicWordFilterList } = createAtomWithHook(false, "IsOpenedMicWordFilterList");
+export const { atomInstance: Atom_MicWordFilterList, useHook: useStore_MicWordFilterList } = createAtomWithHook([], "MicWordFilterList");
+
+// Translation
+export const { atomInstance: Atom_DeepLAuthKey, useHook: useStore_DeepLAuthKey } = createAtomWithHook(null, "DeepLAuthKey");
+export const { atomInstance: Atom_SelectedCTranslate2WeightType, useHook: useStore_SelectedCTranslate2WeightType } = createAtomWithHook("", "SelectedCTranslate2WeightType");
+export const { atomInstance: Atom_SelectableCTranslate2ComputeDeviceList, useHook: useStore_SelectableCTranslate2ComputeDeviceList } = createAtomWithHook({}, "SelectableCTranslate2ComputeDeviceList");
+export const { atomInstance: Atom_SelectedCTranslate2ComputeDevice, useHook: useStore_SelectedCTranslate2ComputeDevice } = createAtomWithHook("", "SelectedCTranslate2ComputeDevice");
+export const { atomInstance: Atom_CTranslate2WeightTypeStatus, useHook: useStore_CTranslate2WeightTypeStatus } = createAtomWithHook(ctranslate2_weight_type_status, "CTranslate2WeightTypeStatus");
+
+// Transcription
+export const { atomInstance: Atom_MicRecordTimeout, useHook: useStore_MicRecordTimeout } = createAtomWithHook(0, "MicRecordTimeout");
+export const { atomInstance: Atom_MicPhraseTimeout, useHook: useStore_MicPhraseTimeout } = createAtomWithHook(0, "MicPhraseTimeout");
+export const { atomInstance: Atom_MicMaxWords, useHook: useStore_MicMaxWords } = createAtomWithHook(0, "MicMaxWords");
+
+export const { atomInstance: Atom_SpeakerRecordTimeout, useHook: useStore_SpeakerRecordTimeout } = createAtomWithHook(0, "SpeakerRecordTimeout");
+export const { atomInstance: Atom_SpeakerPhraseTimeout, useHook: useStore_SpeakerPhraseTimeout } = createAtomWithHook(0, "SpeakerPhraseTimeout");
+export const { atomInstance: Atom_SpeakerMaxWords, useHook: useStore_SpeakerMaxWords } = createAtomWithHook(0, "SpeakerMaxWords");
+
+export const { atomInstance: Atom_SelectedWhisperWeightType, useHook: useStore_SelectedWhisperWeightType } = createAtomWithHook("", "SelectedWhisperWeightType");
+export const { atomInstance: Atom_WhisperWeightTypeStatus, useHook: useStore_WhisperWeightTypeStatus } = createAtomWithHook(whisper_weight_type_status, "WhisperWeightTypeStatus");
+export const { atomInstance: Atom_SelectedTranscriptionEngine, useHook: useStore_SelectedTranscriptionEngine } = createAtomWithHook(whisper_weight_type_status, "SelectedTranscriptionEngine");
+
+export const { atomInstance: Atom_SelectableWhisperComputeDeviceList, useHook: useStore_SelectableWhisperComputeDeviceList } = createAtomWithHook({}, "SelectableWhisperComputeDeviceList");
+export const { atomInstance: Atom_SelectedWhisperComputeDevice, useHook: useStore_SelectedWhisperComputeDevice } = createAtomWithHook("", "SelectedWhisperComputeDevice");
+
+
+// VR
+export const { atomInstance: Atom_OverlaySmallLogSettings, useHook: useStore_OverlaySmallLogSettings } = createAtomWithHook({
+ x_pos: 0.0,
+ y_pos: 0.0,
+ z_pos: 0.0,
+ x_rotation: 0.0,
+ y_rotation: 0.0,
+ z_rotation: 0.0,
+ display_duration: 5,
+ fadeout_duration: 2,
+ tracker: "HMD",
+}, "OverlaySmallLogSettings");
+export const { atomInstance: Atom_IsEnabledOverlaySmallLog, useHook: useStore_IsEnabledOverlaySmallLog } = createAtomWithHook(false, "IsEnabledOverlaySmallLog");
+export const { atomInstance: Atom_OverlayLargeLogSettings, useHook: useStore_OverlayLargeLogSettings } = createAtomWithHook({
+ x_pos: 0.0,
+ y_pos: 0.0,
+ z_pos: 0.0,
+ x_rotation: 0.0,
+ y_rotation: 0.0,
+ z_rotation: 0.0,
+ display_duration: 5,
+ fadeout_duration: 2,
+ 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");
+export const { atomInstance: Atom_EnableSendOnlyTranslatedMessages, useHook: useStore_EnableSendOnlyTranslatedMessages } = createAtomWithHook(false, "EnableSendOnlyTranslatedMessages");
+export const { atomInstance: Atom_EnableAutoExportMessageLogs, useHook: useStore_EnableAutoExportMessageLogs } = createAtomWithHook(false, "EnableAutoExportMessageLogs");
+export const { atomInstance: Atom_EnableVrcMicMuteSync, useHook: useStore_EnableVrcMicMuteSync } = createAtomWithHook(false, "EnableVrcMicMuteSync");
+export const { atomInstance: Atom_EnableSendMessageToVrc, useHook: useStore_EnableSendMessageToVrc } = createAtomWithHook(true, "EnableSendMessageToVrc");
+export const { atomInstance: Atom_EnableSendReceivedMessageToVrc, useHook: useStore_EnableSendReceivedMessageToVrc } = createAtomWithHook(false, "EnableSendReceivedMessageToVrc");
+
+// Advanced Settings
+export const { atomInstance: Atom_OscIpAddress, useHook: useStore_OscIpAddress } = createAtomWithHook("127.0.0.1", "OscIpAddress");
+export const { atomInstance: Atom_OscPort, useHook: useStore_OscPort } = createAtomWithHook("9000", "OscPort");
+
+
+
+export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");
+
+export const { atomInstance: Atom_VrctPosterIndex, useHook: useStore_VrctPosterIndex } = createAtomWithHook(0, "VrctPosterIndex");
+export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: useStore_PosterShowcaseWorldPageIndex } = createAtomWithHook(0, "PosterShowcaseWorldPageIndex");
\ No newline at end of file
diff --git a/src-ui/ui_configs.js b/src-ui/ui_configs.js
new file mode 100644
index 00000000..1b854015
--- /dev/null
+++ b/src-ui/ui_configs.js
@@ -0,0 +1,77 @@
+export const ui_configs = {
+ mic_threshold_min: 0,
+ mic_threshold_max: 2000,
+ speaker_threshold_min: 0,
+ speaker_threshold_max: 4000,
+ overlay_small_log: {
+ x_pos: { step: 0.05, min: -0.5, max: 0.5 },
+ y_pos: { step: 0.05, min: -0.8, max: 0.8 },
+ z_pos: { step: 0.05, min: -0.5, max: 1.5 },
+ ui_scaling: { step: 10, min: 40, max: 200 },
+ },
+ overlay_large_log: {
+ x_pos: { step: 0.05, min: -0.5, max: 0.5 },
+ y_pos: { step: 0.05, min: -0.8, max: 0.8 },
+ z_pos: { step: 0.05, min: -0.5, max: 1.5 },
+ ui_scaling: { step: 10, min: 40, max: 200 },
+ },
+
+ overlay_small_log_default_settings: {
+ x_pos: 0.0,
+ y_pos: 0.0,
+ z_pos: 0.0,
+ x_rotation: 0.0,
+ y_rotation: 0.0,
+ z_rotation: 0.0,
+ display_duration: 5,
+ fadeout_duration: 2,
+ opacity: 1.0,
+ ui_scaling: 1.0,
+ tracker: "HMD",
+ },
+ overlay_large_log_default_settings: {
+ x_pos: 0.0,
+ y_pos: 0.0,
+ z_pos: 0.0,
+ x_rotation: 0.0,
+ y_rotation: 0.0,
+ z_rotation: 0.0,
+ display_duration: 5,
+ fadeout_duration: 2,
+ opacity: 1.0,
+ ui_scaling: 1.0,
+ tracker: "LeftHand",
+ },
+
+ selectable_ui_languages: [
+ {id: "en", label: "English"},
+ {id: "ja", label: "日本語"},
+ {id: "ko", label: "한국어"},
+ {id: "zh-Hant", label: "繁體中文"},
+ {id: "zh-Hans", label: "简体中文"},
+ ]
+};
+
+export const translator_status = [
+ { id: "DeepL", label: "DeepL", is_available: false },
+ { id: "DeepL_API", label: `DeepL\nAPI`, is_available: false },
+ { id: "Google", label: "Google", is_available: false },
+ { id: "Bing", label: "Bing", is_available: false },
+ { id: "Papago", label: "Papago", is_available: false },
+ { id: "CTranslate2", label: `Internal\n(Default)`, is_available: false },
+];
+
+export const ctranslate2_weight_type_status = [
+ { id: "small", label: "small", is_downloaded: false, progress: null },
+ { id: "large", label: "large", is_downloaded: false, progress: null },
+];
+
+export const whisper_weight_type_status = [
+ { id: "tiny", label: "tiny", is_downloaded: false, progress: null },
+ { id: "base", label: "base", is_downloaded: false, progress: null },
+ { id: "small", label: "small", is_downloaded: false, progress: null },
+ { id: "medium", label: "medium", is_downloaded: false, progress: null },
+ { id: "large-v1", label: "large-v1", is_downloaded: false, progress: null },
+ { id: "large-v2", label: "large-v2", is_downloaded: false, progress: null },
+ { id: "large-v3", label: "large-v3", is_downloaded: false, progress: null },
+];
\ No newline at end of file
diff --git a/src-ui/utils.js b/src-ui/utils.js
new file mode 100644
index 00000000..a2d38fc9
--- /dev/null
+++ b/src-ui/utils.js
@@ -0,0 +1,67 @@
+export const arrayToObject = (array) => {
+ return array.reduce((obj, item) => {
+ obj[item] = item;
+ return obj;
+ }, {});
+};
+
+export const chunkArray = (array, size) => {
+ const chunked = [];
+ for (let i = 0; i < array.length; i += size) {
+ chunked.push(array.slice(i, i + size));
+ }
+ return chunked;
+};
+
+export const clampMinMax = (value, min, max) => {
+ return Math.min(Math.max(value, min), max);
+};
+// console.log(clamp(5, 1, 10)); // 5 (範囲内)
+// console.log(clamp(-3, 0, 10)); // 0 (minより小さい)
+// console.log(clamp(15, 1, 10)); // 10 (maxより大きい)
+// console.log(clamp(7.5, 1, 10)); // 7.5 (範囲内、少数)
+
+export const randomIntMinMax = (min, max) => {
+ if (min === max) return min;
+ if (max === undefined) {
+ max = min;
+ min = 0;
+ }
+ const int = Math.floor(Math.random() * (max - min + 1)) + min;
+ return int;
+};
+
+export const scrollToBottom = (ref, smooth = false) => {
+ const element = ref.current;
+ const scroll_height = element.scrollHeight - element.clientHeight;
+
+ if (smooth) {
+ const duration = 300; // スクロールにかける時間（ミリ秒）
+ const start_time = performance.now();
+ const scroll_top = element.scrollTop;
+
+ const scroll = (current_time) => {
+ const elapsed = current_time - start_time;
+ const progress = Math.min(elapsed / duration, 1);
+ const ease_in_out_quad = (t) => t < 0.5
+ ? 2 * t * t
+ : -1 + (4 - 2 * t) * t;
+ element.scrollTop = scroll_top + (scroll_height - scroll_top) * ease_in_out_quad(progress);
+
+ if (progress < 1) {
+ requestAnimationFrame(scroll);
+ }
+ };
+
+ requestAnimationFrame(scroll);
+ } else {
+ element.scrollTop = scroll_height;
+ }
+};
+
+export const updateLabelsById = (data_array, updates) => {
+ return data_array.map(item => {
+ const update = updates.find(update_item => update_item.id === item.id);
+ return update ? { ...item, label: update.label } : item;
+ });
+};
\ No newline at end of file
diff --git a/test_data.js b/test_data.js
new file mode 100644
index 00000000..ba53cb7e
--- /dev/null
+++ b/test_data.js
@@ -0,0 +1,74 @@
+export const generateTestData = (num) => {
+ const testDataArray = [];
+ const messagesJa = [
+ "今日はとてもいい天気ですね。",
+ "次の会議は何時に始まりますか？",
+ "新しいプロジェクトについて話しましょう。",
+ "お疲れ様です。今日は早く帰れますか？",
+ "この書類にサインをお願いします。",
+ "次の休暇はどこに行きますか？",
+ "先週のレポートを見ましたか？",
+ "この問題をどうやって解決しますか？",
+ "週末は何をする予定ですか？",
+ "新しいアイデアを聞かせてください。",
+ "こんにちは、調子はどうですか？",
+ "おはようございます、今日の予定は何ですか？",
+ "こんばんは、今日は楽しかったですか？",
+ "ありがとう、助かりました。",
+ "さようなら、また会いましょう。",
+ "はい、分かりました。",
+ "いいえ、ちょっと難しいです。",
+ "すみません、もう一度言ってください。",
+ "お願いします、手伝ってください。",
+ "お疲れ様です、今日も頑張りましょう。",
+ ];
+ const messagesEn = [
+ "The weather is very nice today.",
+ "What time does the next meeting start?",
+ "Let's talk about the new project.",
+ "Good job today. Can you leave early today?",
+ "Please sign this document.",
+ "Where are you going for the next vacation?",
+ "Did you see last week's report?",
+ "How do we solve this problem?",
+ "What are your plans for the weekend?",
+ "Tell me about your new idea.",
+ "Hello, how are you?",
+ "Good morning, what are your plans for today?",
+ "Good evening, did you have a good day?",
+ "Thank you, that was helpful.",
+ "Goodbye, see you again.",
+ "Yes, understood.",
+ "No, it's a bit difficult.",
+ "Sorry, could you say that again?",
+ "Please, help me out.",
+ "Good job today, let's do our best again tomorrow.",
+ ];
+ const statuses = ["sent", "received"];
+
+ for (let i = 0; i < num; i++) {
+ const uuid = crypto.randomUUID();
+ const date = new Date().toLocaleTimeString(
+ "ja-JP",
+ { hour12: false, hour: "2-digit", minute: "2-digit" }
+ );
+ const messageIndex = Math.floor(Math.random() * messagesJa.length);
+ const status = statuses[Math.floor(Math.random() * statuses.length)];
+
+ const testData = {
+ id: uuid,
+ category: status,
+ status: status,
+ created_at: date,
+ messages: {
+ original: messagesJa[messageIndex],
+ translated: [
+ messagesEn[messageIndex],
+ ],
+ },
+ };
+ testDataArray.push(testData);
+ }
+
+ return testDataArray;
+};
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 00000000..0d44e3e2
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,62 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import svgr from "vite-plugin-svgr";
+import path from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig(async () => ({
+ plugins: [react(), svgr()],
+ assetsInclude: ["**/*.yml"],
+
+ // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
+ //
+ // 1. prevent vite from obscuring rust errors
+ clearScreen: false,
+ // 2. tauri expects a fixed port, fail if that port is not available
+ server: {
+ port: 1420,
+ strictPort: true,
+ watch: {
+ // 3. tell vite to ignore watching `src-tauri`
+ ignored: ["**/src-tauri/**"],
+ },
+ },
+
+ build: {
+ outDir: path.resolve(__dirname, "dist"),
+ rollupOptions: {
+ input: {
+ main: path.resolve(__dirname, "index.html"),
+ },
+ },
+ },
+
+ resolve: {
+ alias: {
+ "@root": path.resolve(__dirname),
+ "@test_data": path.resolve(__dirname, "./test_data.js"),
+
+ "@ui_configs": path.resolve(__dirname, "src-ui/ui_configs.js"),
+ "@scss_mixins": path.resolve(__dirname, "src-ui/common_css/mixins.scss"),
+ "@store": path.resolve(__dirname, "src-ui/store.js"),
+ "@images": path.resolve(__dirname, "src-ui/assets"),
+ "@utils": path.resolve(__dirname, "src-ui/utils.js"),
+ "@logics": path.resolve(__dirname, "src-ui/logics"),
+ "@logics_common": path.resolve(__dirname, "src-ui/logics/common"),
+ "@logics_main": path.resolve(__dirname, "src-ui/logics/main"),
+ "@logics_configs": path.resolve(__dirname, "src-ui/logics/configs"),
+
+ "@setting_box": path.resolve(__dirname, "src-ui/app/config_page/setting_section/setting_box/index.js"),
+ "@common_components": path.resolve(__dirname, "src-ui/common_components/index.js"),
+ },
+ },
+
+ css: {
+ preprocessorOptions: {
+ scss: {
+ api: "modern-compiler"
+ }
+ }
+ }
+
+}));
diff --git a/zip.py b/zip.py
new file mode 100644
index 00000000..168c5c87
--- /dev/null
+++ b/zip.py
@@ -0,0 +1,37 @@
+import os
+import zipfile
+import argparse
+
+def zip_files_and_directory(zip_name, file_paths, dir_paths):
+ # ZIPファイルを作成
+ with zipfile.ZipFile(zip_name, 'w', zipfile.ZIP_DEFLATED) as zipf:
+ # ファイルを追加
+ for file_path in file_paths:
+ if os.path.isfile(file_path):
+ zipf.write(file_path, os.path.basename(file_path))
+ print(f"Add file: {file_path}")
+
+ # ディレクトリを追加
+ for dir_path in dir_paths:
+ if os.path.isdir(dir_path):
+ for foldername, subfolders, filenames in os.walk(dir_path):
+ for filename in filenames:
+ file_full_path = os.path.join(foldername, filename)
+ # ディレクトリを保持しつつ、ルートに配置
+ arcname = os.path.join(
+ os.path.basename(dir_path),
+ os.path.relpath(file_full_path, dir_path)
+ )
+ zipf.write(file_full_path, arcname)
+ print(f"Add file: {file_full_path}")
+
+
+if __name__ == "__main__":
+ parser = argparse.ArgumentParser()
+ parser.add_argument("--zip_name", type=str, default="VRCT.zip")
+ parser.add_argument("--file_paths", type=str, nargs="*", default=["src-tauri/target/release/VRCT.exe", "src-tauri/target/release/VRCT-sidecar.exe"])
+ parser.add_argument("--dir_paths", type=str, nargs="*", default=["src-tauri/target/release/_internal"])
+ args = parser.parse_args()
+
+ zip_files_and_directory(args.zip_name, args.file_paths, args.dir_paths)
+ print("Complete!")
\ No newline at end of file