[Refactor] Refactor the way import files.

Organize some codes.

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

@@ -2,11 +2,17 @@ import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import styles from "./Appearance.module.scss";
 import { useSettingBox } from "../components/useSettingBox";
-import { useStore_SelectedMicDevice, useStore_MicDeviceList } from "@store";
+
+import {
+    useUiLanguage,
+    useUiScaling,
+    useMessageLogUiScaling,
+    useSelectedFontFamily,
+    useTransparency,
+} from "@logics_configs";
+
 export const Appearance = () => {
     const { t } = useTranslation();
-    // const { currentSelectedMicDevice, updateSelectedMicDevice } = useStore_SelectedMicDevice();
-    // const { currentMicDeviceList } = useStore_MicDeviceList();
     const {
         DropdownMenuContainer,
         // SliderContainer,
@@ -53,7 +59,6 @@ export const Appearance = () => {
 };
 
 import { LabelComponent } from "../components/label_component/LabelComponent";
-import { useUiLanguage } from "@logics_configs/useUiLanguage";
 
 const UiLanguageContainer = () => {
     const { t } = useTranslation();
@@ -100,7 +105,6 @@ const UiLanguageContainer = () => {
 };
 
 
-import { useUiScaling } from "@logics_configs/useUiScaling";
 import { SliderContainer } from "../components/useSettingBox";
 
 import { useEffect, useState } from "react";
@@ -145,7 +149,6 @@ const UiScalingContainer = () => {
     );
 };
 
-import { useMessageLogUiScaling } from "@logics_configs/useMessageLogUiScaling";
 
 const MessageLogUiScalingContainer = () => {
     const { t } = useTranslation();
@@ -189,7 +192,6 @@ const MessageLogUiScalingContainer = () => {
 };
 import { useStore_SelectableFontFamilyList } from "@store";
 import { DropdownMenuContainer } from "../components/useSettingBox";
-import { useSelectedFontFamily } from "@logics_configs/useSelectedFontFamily";
 const FontFamilyContainer = () => {
     const { t } = useTranslation();
     const { currentSelectedFontFamily, setSelectedFontFamily } = useSelectedFontFamily();
@@ -212,7 +214,6 @@ const FontFamilyContainer = () => {
     );
 };
 
-import { useTransparency } from "@logics_configs/useTransparency";
 
 const TransparencyContainer = () => {
     const { t } = useTranslation();

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx

@@ -3,7 +3,14 @@ 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/useVolume";
+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 (
         <div className={styles.container}>
@@ -14,8 +21,7 @@ export const ThresholdComponent = (props) => {
         </div>
     );
 };
-import MicSvg from "@images/mic.svg?react";
-import { useMicThreshold } from "@logics_configs/useMicThreshold";
+
 const MicComponent = (props) => {
     const {
         currentMicThreshold,
@@ -72,8 +78,7 @@ const MicComponent = (props) => {
         </>
     );
 };
-import HeadphonesSvg from "@images/headphones.svg?react";
-import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
+
 const SpeakerComponent = (props) => {
     const {
         currentSpeakerThreshold,

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx

@@ -3,6 +3,10 @@ import {
     useStore_MicVolume,
     useStore_SpeakerVolume,
 } from "@store";
+import {
+    useMicThreshold,
+    useSpeakerThreshold,
+} from "@logics_configs";
 
 export const SliderAndMeter = (props) => {
     return (
@@ -17,7 +21,6 @@ export const SliderAndMeter = (props) => {
     );
 };
 
-import { useMicThreshold } from "@logics_configs/useMicThreshold";
 const ThresholdVolumeMeter_Mic = (props) => {
     const { currentMicVolume } = useStore_MicVolume();
 
@@ -44,7 +47,6 @@ const ThresholdVolumeMeter_Mic = (props) => {
     );
 };
 
-import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
 const ThresholdVolumeMeter_Speaker = (props) => {
     const { currentSpeakerVolume } = useStore_SpeakerVolume();
 

src-ui/app/config_page/setting_section/setting_box/device/Device.jsx

@@ -13,14 +13,18 @@ export const Device = () => {
     );
 };
 
-import { useEnableAutoMicSelect } from "@logics_configs/useEnableAutoMicSelect";
-
-import { useMicHostList } from "@logics_configs/useMicHostList";
-import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
-
-import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
-import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
-import { useMicThreshold } from "@logics_configs/useMicThreshold";
+import {
+    useEnableAutoMicSelect,
+    useMicHostList,
+    useSelectedMicHost,
+    useMicDeviceList,
+    useSelectedMicDevice,
+    useMicThreshold,
+    useEnableAutoSpeakerSelect,
+    useSpeakerDeviceList,
+    useSelectedSpeakerDevice,
+    useSpeakerThreshold,
+} from "@logics_configs";
 
 import { LabelComponent } from "../components/label_component/LabelComponent";
 import { DropdownMenu } from "../components/dropdown_menu/DropdownMenu";
@@ -126,11 +130,6 @@ const Mic_Container = () => {
         </div>
     );
 };
-import { useEnableAutoSpeakerSelect } from "@logics_configs/useEnableAutoSpeakerSelect";
-
-import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList";
-import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
-import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
 
 const Speaker_Container = () => {
     const { t } = useTranslation();