[Update] Main Page: LanguageSelector. Fetch language list data from Python when starting up software.

src-ui/app/App.jsx

@@ -29,6 +29,8 @@ import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClear
 import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
 import { useUiLanguage } from "@logics_configs/useUiLanguage";
 
+import { useSelectableLanguageList } from "@logics/useSelectableLanguageList";
+
 const StartPythonFacadeComponent = () => {
     const { asyncStartPython } = useStartPython();
     const hasRunRef = useRef(false);
@@ -44,6 +46,8 @@ const StartPythonFacadeComponent = () => {
     const { getSendMessageButtonType } = useSendMessageButtonType();
     const { getUiLanguage } = useUiLanguage();
 
+    const { getSelectableLanguageList } = useSelectableLanguageList();
+
 
     useEffect(() => {
         main_page.setDecorations(true);
@@ -52,6 +56,9 @@ const StartPythonFacadeComponent = () => {
                 getUiLanguage();
 
                 getSoftwareVersion();
+
+                getSelectableLanguageList();
+
                 getSelectedMicHost();
                 getSelectedMicDevice();
                 getSelectedSpeakerDevice();

src-ui/app/main_page/main_section/language_selector/LanguageSelector.jsx

@@ -1,11 +1,13 @@
 import { useTranslation } from "react-i18next";
 
-import { language_list } from "@data";
+import { useSelectableLanguageList } from "@logics/useSelectableLanguageList";
 import styles from "./LanguageSelector.module.scss";
 
 import { LanguageSelectorTopBar } from "./language_selector_top_bar/LanguageSelectorTopBar";
 export const LanguageSelector = ({ id }) => {
     const { t } = useTranslation();
+    const { currentSelectableLanguageList, updateSelectableLanguageList } = useSelectableLanguageList();
+
 
     const languageTitles = {
         "your_language": t("selectable_language_window.title_your_language"),
@@ -25,7 +27,7 @@ export const LanguageSelector = ({ id }) => {
         }, {});
     };
 
-    const groupedLanguages = groupLanguagesByFirstLetter(language_list);
+    const groupedLanguages = groupLanguagesByFirstLetter(currentSelectableLanguageList);
 
     return (
         <div className={styles.container}>