[Update] Add Font Family.

src-ui/app/App.jsx

@@ -15,6 +15,7 @@ export const App = () => {
             <ConfigPage />
             <MainPage />
             <UiSizeController />
+            <FontFamilyController />
         </div>
     );
 };
@@ -33,6 +34,7 @@ import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonTy
 import { useUiLanguage } from "@logics_configs/useUiLanguage";
 import { useUiScaling } from "@logics_configs/useUiScaling";
 import { useMessageLogUiScaling } from "@logics_configs/useMessageLogUiScaling";
+import { useSelectedFontFamily } from "@logics_configs/useSelectedFontFamily";
 
 import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
 import { useLanguageSettings } from "@logics_main/useLanguageSettings";
@@ -47,6 +49,7 @@ const StartPythonFacadeComponent = () => {
     const { asyncStartPython } = useStartPython();
     const hasRunRef = useRef(false);
     const main_page = getCurrent();
+    const { asyncFetchFonts } = useAsyncFetchFonts();
 
     const { getMicHostList } = useMicHostList();
     const { getMicDeviceList } = useMicDeviceList();
@@ -66,6 +69,7 @@ const StartPythonFacadeComponent = () => {
     const { getUiLanguage } = useUiLanguage();
     const { getUiScaling } = useUiScaling();
     const { getMessageLogUiScaling } = useMessageLogUiScaling();
+    const { getSelectedFontFamily } = useSelectedFontFamily();
 
     const {
         getSelectedPresetTabNumber,
@@ -89,6 +93,9 @@ const StartPythonFacadeComponent = () => {
                 getIsMainPageCompactMode();
                 getMessageInputBoxRatio();
 
+                asyncFetchFonts();
+                getSelectedFontFamily();
+
                 getSoftwareVersion();
 
                 getSelectedPresetTabNumber();
@@ -191,7 +198,31 @@ const UiSizeController = () => {
 
     useEffect(() => {
         document.documentElement.style.setProperty("font-size", `${font_size}%`);
+        document.documentElement.style.setProperty("font-family", `Yu Gothic UI`);
     }, [currentUiScaling.data]);
 
     return null;
+};
+
+
+const FontFamilyController = () => {
+    const { currentSelectedFontFamily } = useSelectedFontFamily();
+    useEffect(() => {
+        document.documentElement.style.setProperty("font-family", `${currentSelectedFontFamily.data}`);
+    }, [currentSelectedFontFamily.data]);
+
+    return null;
+};
+
+import { useStore_SelectableFontFamilyList } from "@store";
+import { arrayToObject } from "@utils/arrayToObject";
+
+import { invoke } from "@tauri-apps/api/tauri";
+const useAsyncFetchFonts = () => {
+    const { updateSelectableFontFamilyList } = useStore_SelectableFontFamilyList();
+    const asyncFetchFonts = async () => {
+        const fonts = await invoke("get_font_list");
+        updateSelectableFontFamilyList(arrayToObject(fonts));
+    };
+    return { asyncFetchFonts };
 };

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

@@ -25,6 +25,7 @@ export const Appearance = () => {
             <UiLanguageContainer />
             <UiScalingContainer />
             <MessageLogUiScalingContainer />
+            <FontFamilyContainer />
 
 
 
@@ -184,4 +185,28 @@ const MessageLogUiScalingContainer = () => {
             track={false}
         />
     );
+};
+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();
+
+    const selectFunction = (selected_data) => {
+        setSelectedFontFamily(selected_data.selected_id);
+    };
+    const { currentSelectableFontFamilyList } = useStore_SelectableFontFamilyList();
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="font_family"
+            label={t("config_page.font_family.label")}
+            desc={t("config_page.font_family.label")}
+            selected_id={currentSelectedFontFamily.data}
+            list={currentSelectableFontFamilyList.data}
+            selectFunction={selectFunction}
+            state={currentSelectedFontFamily.state}
+        />
+    );
 };

src-ui/logics/configs/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,
+    };
+};

src-ui/logics/useReceiveRoutes.js

@@ -25,6 +25,7 @@ import { useMicThreshold } from "@logics_configs/useMicThreshold";
 import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
 import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox";
 import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
+import { useSelectedFontFamily } from "@logics_configs/useSelectedFontFamily";
 
 import { useUiLanguage } from "@logics_configs/useUiLanguage";
 import { useUiScaling } from "@logics_configs/useUiScaling";
@@ -75,6 +76,7 @@ export const useReceiveRoutes = () => {
     } = useVolume();
 
     const { updateMessageInputBoxRatio } = useMessageInputBoxRatio();
+    const { updateSelectedFontFamily } = useSelectedFontFamily();
 
 
     const routes = {
@@ -208,6 +210,9 @@ export const useReceiveRoutes = () => {
         "/get/data/textbox_ui_scaling": updateMessageLogUiScaling,
         "/set/data/textbox_ui_scaling": updateMessageLogUiScaling,
 
+        "/get/data/font_family": updateSelectedFontFamily,
+        "/set/data/font_family": updateSelectedFontFamily,
+
         // Others Tab
         "/get/data/auto_clear_message_box": updateEnableAutoClearMessageBox,
         "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageBox,

src-ui/store.js

@@ -172,6 +172,8 @@ export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useS
 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_SelectedFontFamily, useHook: useStore_SelectedFontFamily } = createAtomWithHook("Yu Gothic UI", "SelectedFontFamily");
+export const { atomInstance: Atom_SelectableFontFamilyList, useHook: useStore_SelectableFontFamilyList } = createAtomWithHook({}, "SelectableFontFamilyList");
 
 
 export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useStore_IsOpenedWordFilterList } = createAtomWithHook(false, "IsOpenedWordFilterList");