every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'ui' into for_webui

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-12-06 13:08:36 +09:00
parent cae9589427 043208f58f
commit 2a9a905794
21 changed files with 283 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
locales/en.json
View File

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

9
src-ui/app/App.jsx
View File

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

2
src-ui/app/_index_css/variables.css
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

9
src-ui/app/modal_controller/update_modal/UpdateModal.jsx
View File

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

22
src-ui/app/updating_component/UpdatingComponent.jsx Normal file
View File

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

52
src-ui/app/updating_component/UpdatingComponent.module.scss Normal file
View File

@@ -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);
}
}

1
src-ui/logics/common/index.js
View File

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

10
src-ui/logics/common/useIsSoftwareUpdating.js Normal file
View File

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

21
src-ui/logics/common/useWindow.js
View File

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

1
src-ui/logics/configs/index.js
View File

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

28
src-ui/logics/configs/vr/useOverlayShowOnlyTranslatedMessages.js Normal file
View File

@@ -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,
};
};

6
src-ui/logics/useReceiveRoutes.js
View File

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

3
src-ui/store.js
View File

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