From 18b3ee8c92f4b1af82496c0215995c886b2141cb Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 16 Aug 2024 19:17:57 +0800
Subject: [PATCH] Standardize display of common + native languages list

---
 src/components/compose.jsx           |  8 +--
 src/components/lang-selector.jsx     | 36 ++++++++---
 src/components/translation-block.jsx | 33 ++++++----
 src/locales/en.po                    | 92 ++++++++++++++--------------
 src/pages/settings.jsx               | 15 +++--
 5 files changed, 109 insertions(+), 75 deletions(-)

diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index ba5ad7c4..17d4c43b 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -1439,10 +1439,10 @@ function Compose({
                     code,
                     fallback: common,
                   });
-                  const same = commonText === native;
+                  const showCommon = commonText !== native;
                   return (
                     <option value={code} key={code}>
-                      {same ? commonText : `${commonText} (${native})`}
+                      {showCommon ? `${native} - ${commonText}` : commonText}
                     </option>
                   );
                 })}
@@ -1452,10 +1452,10 @@ function Compose({
                     code,
                     fallback: common,
                   });
-                  const same = commonText === native;
+                  const showCommon = commonText !== native;
                   return (
                     <option value={code} key={code}>
-                      {same ? commonText : `${commonText} (${native})`}
+                      {showCommon ? `${native} - ${commonText}` : commonText}
                     </option>
                   );
                 })}
diff --git a/src/components/lang-selector.jsx b/src/components/lang-selector.jsx
index 801e4962..e0ab202a 100644
--- a/src/components/lang-selector.jsx
+++ b/src/components/lang-selector.jsx
@@ -1,4 +1,5 @@
 import { useLingui } from '@lingui/react';
+import { useMemo } from 'preact/hooks';
 
 import { DEFAULT_LANG, LOCALES } from '../locales';
 import { activateLang } from '../utils/lang';
@@ -7,6 +8,28 @@ import localeCode2Text from '../utils/localeCode2Text';
 export default function LangSelector() {
   const { i18n } = useLingui();
 
+  const populatedLocales = useMemo(() => {
+    return LOCALES.map((lang) => {
+      const native = localeCode2Text({ code: lang, locale: lang });
+      const common = localeCode2Text(lang);
+      const showCommon = !!common && common !== native;
+      return {
+        code: lang,
+        native,
+        common,
+        showCommon,
+      };
+    }).sort((a, b) => {
+      // If pseudo-LOCALE, always put it at the bottom
+      if (a.code === 'pseudo-LOCALE') return 1;
+      if (b.code === 'pseudo-LOCALE') return -1;
+      // Sort by code
+      if (a.code < b.code) return -1;
+      if (a.code > b.code) return 1;
+      return 0;
+    });
+  }, [i18n.locale]);
+
   return (
     <label class="lang-selector">
       🌐{' '}
@@ -18,23 +41,20 @@ export default function LangSelector() {
           activateLang(e.target.value);
         }}
       >
-        {LOCALES.map((lang) => {
-          if (lang === 'pseudo-LOCALE') {
+        {populatedLocales.map(({ code, native, common, showCommon }) => {
+          if (code === 'pseudo-LOCALE') {
             return (
               <>
                 <hr />
-                <option value={lang} key={lang}>
+                <option value={code} key={code}>
                   Pseudolocalization (test)
                 </option>
               </>
             );
           }
-          const native = localeCode2Text({ code: lang, locale: lang });
-          const common = localeCode2Text(lang);
-          const showCommon = !!common && common !== native;
           return (
-            <option value={lang} key={lang}>
-              {showCommon ? `${native} (${common})` : native}
+            <option value={code} key={code}>
+              {showCommon ? `${native} - ${common}` : native}
             </option>
           );
         })}
diff --git a/src/components/translation-block.jsx b/src/components/translation-block.jsx
index cd0b122f..289f689f 100644
--- a/src/components/translation-block.jsx
+++ b/src/components/translation-block.jsx
@@ -206,19 +206,26 @@ function TranslationBlock({
                 translate();
               }}
             >
-              {sourceLanguages.map((l) => (
-                <option value={l.code}>
-                  {l.code === 'auto'
-                    ? t`Auto (${detectedLang ?? '…'})`
-                    : `${localeCode2Text({
-                        code: l.code,
-                        fallback: l.name,
-                      })} (${localeCode2Text({
-                        code: l.code,
-                        locale: l.code,
-                      })})`}
-                </option>
-              ))}
+              {sourceLanguages.map((l) => {
+                const common = localeCode2Text({
+                  code: l.code,
+                  fallback: l.name,
+                });
+                const native = localeCode2Text({
+                  code: l.code,
+                  locale: l.code,
+                });
+                const showCommon = common !== native;
+                return (
+                  <option value={l.code}>
+                    {l.code === 'auto'
+                      ? t`Auto (${detectedLang ?? '…'})`
+                      : showCommon
+                      ? `${native} - ${common}`
+                      : native}
+                  </option>
+                );
+              })}
             </select>{' '}
             <span>→ {targetLangText}</span>
             <Loader abrupt hidden={uiState !== 'loading'} />
diff --git a/src/locales/en.po b/src/locales/en.po
index 5a198817..77c5c5cb 100644
--- a/src/locales/en.po
+++ b/src/locales/en.po
@@ -194,7 +194,7 @@ msgstr ""
 #: src/pages/catchup.jsx:72
 #: src/pages/catchup.jsx:1414
 #: src/pages/catchup.jsx:2035
-#: src/pages/settings.jsx:1008
+#: src/pages/settings.jsx:1015
 msgid "Boosts"
 msgstr ""
 
@@ -858,7 +858,7 @@ msgid "Error loading GIFs"
 msgstr ""
 
 #: src/components/drafts.jsx:63
-#: src/pages/settings.jsx:664
+#: src/pages/settings.jsx:671
 msgid "Unsent drafts"
 msgstr ""
 
@@ -1242,7 +1242,7 @@ msgstr ""
 #: src/pages/home.jsx:223
 #: src/pages/mentions.jsx:20
 #: src/pages/mentions.jsx:167
-#: src/pages/settings.jsx:1000
+#: src/pages/settings.jsx:1007
 #: src/pages/trending.jsx:347
 msgid "Mentions"
 msgstr ""
@@ -1297,7 +1297,7 @@ msgstr ""
 #: src/pages/catchup.jsx:2029
 #: src/pages/favourites.jsx:11
 #: src/pages/favourites.jsx:23
-#: src/pages/settings.jsx:1004
+#: src/pages/settings.jsx:1011
 msgid "Likes"
 msgstr ""
 
@@ -2284,7 +2284,7 @@ msgid "<0/> <1/> boosted"
 msgstr ""
 
 #: src/components/timeline.jsx:447
-#: src/pages/settings.jsx:1028
+#: src/pages/settings.jsx:1035
 msgid "New posts"
 msgstr ""
 
@@ -2322,11 +2322,11 @@ msgstr ""
 msgid "Translate from {sourceLangText}"
 msgstr ""
 
-#: src/components/translation-block.jsx:212
+#: src/components/translation-block.jsx:222
 msgid "Auto ({0})"
 msgstr ""
 
-#: src/components/translation-block.jsx:228
+#: src/components/translation-block.jsx:235
 msgid "Failed to translate"
 msgstr ""
 
@@ -3081,7 +3081,7 @@ msgid "{0, plural, one {Announcement} other {Announcements}}"
 msgstr ""
 
 #: src/pages/notifications.jsx:599
-#: src/pages/settings.jsx:1016
+#: src/pages/settings.jsx:1023
 msgid "Follow requests"
 msgstr ""
 
@@ -3336,152 +3336,152 @@ msgstr ""
 msgid "{0, plural, =0 {Hide \"Translate\" button for:} other {Hide \"Translate\" button for (#):}}"
 msgstr ""
 
-#: src/pages/settings.jsx:451
+#: src/pages/settings.jsx:458
 msgid "Note: This feature uses external translation services, powered by <0>Lingva API</0> & <1>Lingva Translate</1>."
 msgstr ""
 
-#: src/pages/settings.jsx:485
+#: src/pages/settings.jsx:492
 msgid "Auto inline translation"
 msgstr ""
 
-#: src/pages/settings.jsx:489
+#: src/pages/settings.jsx:496
 msgid "Automatically show translation for posts in timeline. Only works for <0>short</0> posts without content warning, media and poll."
 msgstr ""
 
-#: src/pages/settings.jsx:509
+#: src/pages/settings.jsx:516
 msgid "GIF Picker for composer"
 msgstr ""
 
-#: src/pages/settings.jsx:513
+#: src/pages/settings.jsx:520
 msgid "Note: This feature uses external GIF search service, powered by <0>GIPHY</0>. G-rated (suitable for viewing by all ages), tracking parameters are stripped, referrer information is omitted from requests, but search queries and IP address information will still reach their servers."
 msgstr ""
 
-#: src/pages/settings.jsx:542
+#: src/pages/settings.jsx:549
 msgid "Image description generator"
 msgstr ""
 
-#: src/pages/settings.jsx:547
+#: src/pages/settings.jsx:554
 msgid "Only for new images while composing new posts."
 msgstr ""
 
-#: src/pages/settings.jsx:554
+#: src/pages/settings.jsx:561
 msgid "Note: This feature uses external AI service, powered by <0>img-alt-api</0>. May not work well. Only for images and in English."
 msgstr ""
 
-#: src/pages/settings.jsx:580
+#: src/pages/settings.jsx:587
 msgid "Server-side grouped notifications"
 msgstr ""
 
-#: src/pages/settings.jsx:584
+#: src/pages/settings.jsx:591
 msgid "Alpha-stage feature. Potentially improved grouping window but basic grouping logic."
 msgstr ""
 
-#: src/pages/settings.jsx:605
+#: src/pages/settings.jsx:612
 msgid "\"Cloud\" import/export for shortcuts settings"
 msgstr ""
 
-#: src/pages/settings.jsx:610
+#: src/pages/settings.jsx:617
 msgid "⚠️⚠️⚠️ Very experimental.<0/>Stored in your own profile’s notes. Profile (private) notes are mainly used for other profiles, and hidden for own profile."
 msgstr ""
 
-#: src/pages/settings.jsx:621
+#: src/pages/settings.jsx:628
 msgid "Note: This feature uses currently-logged-in instance server API."
 msgstr ""
 
-#: src/pages/settings.jsx:638
+#: src/pages/settings.jsx:645
 msgid "Cloak mode <0>(<1>Text</1> → <2>████</2>)</0>"
 msgstr ""
 
-#: src/pages/settings.jsx:647
+#: src/pages/settings.jsx:654
 msgid "Replace text as blocks, useful when taking screenshots, for privacy reasons."
 msgstr ""
 
-#: src/pages/settings.jsx:672
+#: src/pages/settings.jsx:679
 msgid "About"
 msgstr ""
 
-#: src/pages/settings.jsx:711
+#: src/pages/settings.jsx:718
 msgid "<0>Built</0> by <1>@cheeaun</1>"
 msgstr ""
 
-#: src/pages/settings.jsx:740
+#: src/pages/settings.jsx:747
 msgid "Sponsor"
 msgstr ""
 
-#: src/pages/settings.jsx:748
+#: src/pages/settings.jsx:755
 msgid "Donate"
 msgstr ""
 
-#: src/pages/settings.jsx:756
+#: src/pages/settings.jsx:763
 msgid "Privacy Policy"
 msgstr ""
 
-#: src/pages/settings.jsx:763
+#: src/pages/settings.jsx:770
 msgid "<0>Site:</0> {0}"
 msgstr ""
 
-#: src/pages/settings.jsx:770
+#: src/pages/settings.jsx:777
 msgid "<0>Version:</0> <1/> {0}"
 msgstr ""
 
-#: src/pages/settings.jsx:785
+#: src/pages/settings.jsx:792
 msgid "Version string copied"
 msgstr ""
 
-#: src/pages/settings.jsx:788
+#: src/pages/settings.jsx:795
 msgid "Unable to copy version string"
 msgstr ""
 
-#: src/pages/settings.jsx:913
-#: src/pages/settings.jsx:918
+#: src/pages/settings.jsx:920
+#: src/pages/settings.jsx:925
 msgid "Failed to update subscription. Please try again."
 msgstr ""
 
-#: src/pages/settings.jsx:924
+#: src/pages/settings.jsx:931
 msgid "Failed to remove subscription. Please try again."
 msgstr ""
 
-#: src/pages/settings.jsx:931
+#: src/pages/settings.jsx:938
 msgid "Push Notifications (beta)"
 msgstr ""
 
-#: src/pages/settings.jsx:953
+#: src/pages/settings.jsx:960
 msgid "Push notifications are blocked. Please enable them in your browser settings."
 msgstr ""
 
-#: src/pages/settings.jsx:962
+#: src/pages/settings.jsx:969
 msgid "Allow from <0>{0}</0>"
 msgstr ""
 
-#: src/pages/settings.jsx:971
+#: src/pages/settings.jsx:978
 msgid "anyone"
 msgstr ""
 
-#: src/pages/settings.jsx:975
+#: src/pages/settings.jsx:982
 msgid "people I follow"
 msgstr ""
 
-#: src/pages/settings.jsx:979
+#: src/pages/settings.jsx:986
 msgid "followers"
 msgstr ""
 
-#: src/pages/settings.jsx:1012
+#: src/pages/settings.jsx:1019
 msgid "Follows"
 msgstr ""
 
-#: src/pages/settings.jsx:1020
+#: src/pages/settings.jsx:1027
 msgid "Polls"
 msgstr ""
 
-#: src/pages/settings.jsx:1024
+#: src/pages/settings.jsx:1031
 msgid "Post edits"
 msgstr ""
 
-#: src/pages/settings.jsx:1045
+#: src/pages/settings.jsx:1052
 msgid "Push permission was not granted since your last login. You'll need to <0><1>log in</1> again to grant push permission</0>."
 msgstr ""
 
-#: src/pages/settings.jsx:1061
+#: src/pages/settings.jsx:1068
 msgid "NOTE: Push notifications only work for <0>one account</0>."
 msgstr ""
 
diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx
index 79067cb8..9287e0d1 100644
--- a/src/pages/settings.jsx
+++ b/src/pages/settings.jsx
@@ -389,10 +389,10 @@ function Settings({ onClose }) {
                           code: lang.code,
                           locale: lang.code,
                         });
-                        const same = !native || common === native;
+                        const showCommon = common !== native;
                         return (
                           <option value={lang.code}>
-                            {same ? common : `${common} (${native})`}
+                            {showCommon ? `${native} - ${common}` : common}
                           </option>
                         );
                       })}
@@ -418,7 +418,7 @@ function Settings({ onClose }) {
                         code: lang.code,
                         locale: lang.code,
                       });
-                      const same = !native || common === native;
+                      const showCommon = common !== native;
                       return (
                         <label>
                           <input
@@ -440,7 +440,14 @@ function Settings({ onClose }) {
                               }
                             }}
                           />{' '}
-                          {same ? common : `${common} (${native})`}
+                          {showCommon ? (
+                            <span>
+                              {native}{' '}
+                              <span class="insignificant">- {common}</span>
+                            </span>
+                          ) : (
+                            common
+                          )}
                         </label>
                       );
                     })}