From 847d5121aaa42dbb5874c222c5497af5e48665e1 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 9 Mar 2025 02:02:29 +0800
Subject: [PATCH] show localized language name in language selection popup

---
 src/views/mobile/SignupPage.vue            | 23 +++++++++++++---------
 src/views/mobile/users/UserProfilePage.vue | 21 ++++++++++++++------
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/views/mobile/SignupPage.vue b/src/views/mobile/SignupPage.vue
index 939530f6..2a5fb05e 100644
--- a/src/views/mobile/SignupPage.vue
+++ b/src/views/mobile/SignupPage.vue
@@ -60,22 +60,27 @@
         <f7-list strong inset dividers class="margin-vertical">
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :key="currentLocale + '_lang'"
+                link="#"
                 :header="languageTitle"
                 :title="currentLanguageName"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Language'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: languageTitle, popupCloseLinkText: tt('Done') }"
+                @click="showLanguagePopup = true"
             >
-                <select v-model="currentLocale">
-                    <option :value="lang.languageTag"
-                            :key="lang.languageTag"
-                            v-for="lang in allLanguages">{{ lang.nativeDisplayName }}</option>
-                </select>
+                <list-item-selection-popup value-type="item"
+                                           key-field="languageTag" value-field="languageTag"
+                                           title-field="nativeDisplayName" after-field="displayName"
+                                           :title="languageTitle"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Language')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allLanguages"
+                                           v-model:show="showLanguagePopup"
+                                           v-model="currentLocale">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
                 link="#"
-                :key="currentLocale + '_currency'"
                 :header="tt('Default Currency')"
                 @click="showDefaultCurrencyPopup = true"
             >
@@ -100,7 +105,6 @@
 
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :key="currentLocale + '_firstDayOfWeek'"
                 :header="tt('First Day of Week')"
                 :title="currentDayOfWeekName"
                 smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('First Day of Week'), popupCloseLinkText: tt('Done') }"
@@ -223,6 +227,7 @@ const {
 const rootStore = useRootStore();
 
 const usePresetCategories = ref<boolean>(false);
+const showLanguagePopup = ref<boolean>(false);
 const showDefaultCurrencyPopup = ref<boolean>(false);
 const showPresetCategories = ref<boolean>(false);
 const showPresetCategoriesMoreActionSheet = ref<boolean>(false);
diff --git a/src/views/mobile/users/UserProfilePage.vue b/src/views/mobile/users/UserProfilePage.vue
index e3d9df9b..bdd42a35 100644
--- a/src/views/mobile/users/UserProfilePage.vue
+++ b/src/views/mobile/users/UserProfilePage.vue
@@ -129,14 +129,22 @@
         <f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
+                link="#"
                 :header="languageTitle"
                 :title="currentLanguageName"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: languageTitle, searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: languageTitle, popupCloseLinkText: tt('Done') }">
-                <select v-model="newProfile.language">
-                    <option :value="language.languageTag"
-                            :key="language.languageTag"
-                            v-for="language in allLanguages">{{ language.nativeDisplayName }}</option>
-                </select>
+                @click="showLanguagePopup = true"
+            >
+                <list-item-selection-popup value-type="item"
+                                           key-field="languageTag" value-field="languageTag"
+                                           title-field="nativeDisplayName" after-field="displayName"
+                                           :title="languageTitle"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Language')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allLanguages"
+                                           v-model:show="showLanguagePopup"
+                                           v-model="newProfile.language">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item
@@ -410,6 +418,7 @@ const currentPassword = ref<string>('');
 const loadingError = ref<unknown | null>(null);
 const showInputPasswordSheet = ref<boolean>(false);
 const showAccountSheet = ref<boolean>(false);
+const showLanguagePopup = ref<boolean>(false);
 const showDefaultCurrencyPopup = ref<boolean>(false);
 const showMoreActionSheet = ref<boolean>(false);