[Refactor] Tidy up utils' files and functions.

src-ui/app/App.jsx

@@ -145,7 +145,7 @@ const FontFamilyController = () => {
 };
 
 import { useStore_SelectableFontFamilyList } from "@store";
-import { arrayToObject } from "@utils/arrayToObject";
+import { arrayToObject } from "@utils";
 
 import { invoke } from "@tauri-apps/api/tauri";
 const useAsyncFetchFonts = () => {

src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx

@@ -9,7 +9,7 @@ const getImageByFileName = (file_name) => {
 };
 
 import poster_showcase_worlds_settings from "./poster_showcase_worlds_settings";
-import { chunkArray } from "@utils/chunkArray";
+import { chunkArray } from "@utils";
 
 export const PosterShowcaseWorldsContents = () => {
     const { currentPosterShowcaseWorldPageIndex } = useStore_PosterShowcaseWorldPageIndex();
@@ -57,7 +57,7 @@ export const PosterShowcaseWorldsContents = () => {
 
 import chat_white_square from "@images/chato_white_square.png";
 import { useEffect } from "react";
-import { randomIntMinMax } from "@utils/randomIntMinMax";
+import { randomIntMinMax } from "@utils";
 const PosterShowcaseWorldsPagination = ({ page_length }) => {
     const { currentPosterShowcaseWorldPageIndex, updatePosterShowcaseWorldPageIndex } = useStore_PosterShowcaseWorldPageIndex();
 

src-ui/app/index.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "@root/locales/config.js";
-import "@utils/root.css";
+import "./_index_css/root.css";
 
 import { App } from "./App";
 

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

@@ -2,7 +2,7 @@ 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/scrollToBottom";
+import { scrollToBottom } from "@utils";
 import { useMessage } from "@logics_common";
 
 export const LogBox = () => {

src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx

@@ -3,7 +3,7 @@ import styles from "./MessageInputBox.module.scss";
 import SendMessageSvg from "@images/send_message.svg?react";
 import { useMessage } from "@logics_common";
 import { store } from "@store";
-import { scrollToBottom } from "@utils/scrollToBottom";
+import { scrollToBottom } from "@utils";
 import {
     useSendMessageButtonType,
     useEnableAutoClearMessageInputBox,

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

@@ -66,7 +66,7 @@ const PresetContainer = () => {
         title: t("main_page.your_language"),
         is_opened: currentIsOpenedLanguageSelector.data.your_language,
         onClickFunction: () => toggleSelector("your_language", currentIsOpenedLanguageSelector.data.your_language, updateIsOpenedLanguageSelector),
-        TurnedOnSvgComponent: <MicSvg />,
+        TurnedOnSvgComponent: MicSvg,
         is_turned_on: currentTranscriptionSendStatus.data,
         variable: your_language_data?.primary,
     };
@@ -75,7 +75,7 @@ const PresetContainer = () => {
         title: t("main_page.target_language"),
         is_opened: currentIsOpenedLanguageSelector.data.target_language,
         onClickFunction: () => toggleSelector("target_language", currentIsOpenedLanguageSelector.data.target_language, updateIsOpenedLanguageSelector),
-        TurnedOnSvgComponent: <HeadphonesSvg />,
+        TurnedOnSvgComponent: HeadphonesSvg,
         is_turned_on: currentTranscriptionReceiveStatus.data,
         variable: target_language_data?.primary,
     };

src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx

@@ -1,17 +1,14 @@
 import clsx from "clsx";
 import styles from "./LanguageSelectorOpenButton.module.scss";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
-import { useSvg } from "@utils/useSvg";
 
 export const LanguageSelectorOpenButton = ({ title, onClickFunction, is_opened, TurnedOnSvgComponent, is_turned_on, variable }) => {
-    const classNames = clsx(styles.arrow_left_svg, {
+    const arrow_class_names = clsx(styles.arrow_left_svg, {
         [styles.reverse]: is_opened,
     });
 
-    const SvgComponent = useSvg(TurnedOnSvgComponent, {
+    const category_class_names = clsx(styles.category_svg, {
-        className: clsx(styles.category_svg, {
+        [styles.is_turned_on]: is_turned_on,
-            [styles.is_turned_on]: is_turned_on,
-        }),
     });
 
     const languageText = variable?.language ?? "Loading...";
@@ -20,13 +17,13 @@ export const LanguageSelectorOpenButton = ({ title, onClickFunction, is_opened,
     return (
         <div className={styles.container}>
             <div className={styles.title_container}>
-                {SvgComponent}
+                <TurnedOnSvgComponent className={category_class_names} />
                 <p className={styles.title}>{title}</p>
             </div>
             <div className={styles.dropdown_menu_container} onClick={onClickFunction}>
                 <p className={styles.selected_language}>{languageText}</p>
                 <p className={styles.selected_language}>({countryText})</p>
-                <ArrowLeftSvg className={classNames} />
+                <ArrowLeftSvg className={arrow_class_names} />
             </div>
         </div>
     );

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

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { updateLabelsById } from "@utils/updateLabelsById";
+import { updateLabelsById } from "@utils";
 import styles from "./TranslatorSelectorOpenButton.module.scss";
 import { TranslatorSelector } from "./translator_selector/TranslatorSelector";
 import { useStore_IsOpenedTranslatorSelector } from "@store";

src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import styles from "./TranslatorSelector.module.scss";
-import { chunkArray } from "@utils/chunkArray";
+import { chunkArray } from "@utils";
 
 import { useStore_IsOpenedTranslatorSelector } from "@store";
 import { useLanguageSettings } from "@logics_main";

src-ui/logics/main/useMessageInputBoxRatio.js

@@ -1,7 +1,7 @@
 import { appWindow } from "@tauri-apps/api/window";
 import { useStore_MessageInputBoxRatio } from "@store";
 import { useStdoutToPython } from "@logics/useStdoutToPython";
-import { clampMinMax } from "@utils/clampMinMax";
+import { clampMinMax } from "@utils";
 export const useMessageInputBoxRatio = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
     const { currentMessageInputBoxRatio, updateMessageInputBoxRatio } = useStore_MessageInputBoxRatio();

src-ui/logics/useReceiveRoutes.js

@@ -1,5 +1,5 @@
 import { translator_status } from "@ui_configs";
-import { arrayToObject } from "@utils/arrayToObject";
+import { arrayToObject } from "@utils";
 
 import {
     useWindow,

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

src-ui/utils/arrayToObject.js

@@ -1,6 +0,0 @@
-export const arrayToObject = (array) => {
-    return array.reduce((obj, item) => {
-        obj[item] = item;
-        return obj;
-    }, {});
-};

src-ui/utils/chunkArray.js

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

src-ui/utils/clampMinMax.js

@@ -1,8 +0,0 @@
-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 (範囲内、少数)

src-ui/utils/randomIntMinMax.js

@@ -1,9 +0,0 @@
-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;
-};

src-ui/utils/scrollToBottom.js

@@ -1,27 +0,0 @@
-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;
-    }
-};

src-ui/utils/updateLabelsById.js

@@ -1,6 +0,0 @@
-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;
-    });
-};

src-ui/utils/useSvg.jsx

@@ -1,9 +0,0 @@
-import React from "react";
-
-export const useSvg = (svg_component, ...props) => {
-    const svgWithClass = svg_component
-        ? React.cloneElement(svg_component, ...props)
-        : null;
-
-    return svgWithClass;
-};

vite.config.js

@@ -36,10 +36,10 @@ export default defineConfig(async () => ({
             "@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/utils/mixins.scss"),
+            "@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"),
+            "@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"),