From 25d73c4b461006dda2dea6ab1eca62b71238b5fb Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 22 Aug 2024 00:12:47 +0800
Subject: [PATCH] Show all locales, <50% complete will be called devLocales

Dev locales show on dev or based on env var PHANPY_SHOW_DEV_LOCALES
---
 lingui.config.js                 |  4 +--
 src/components/lang-selector.jsx | 46 +++++++++++++++++++-------------
 src/locales.js                   | 14 +++++++---
 src/utils/lang.js                |  4 +--
 4 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/lingui.config.js b/lingui.config.js
index 17174142..e612248d 100644
--- a/lingui.config.js
+++ b/lingui.config.js
@@ -1,7 +1,7 @@
-import { LOCALES } from './src/locales';
+import { ALL_LOCALES } from './src/locales';
 
 const config = {
-  locales: LOCALES,
+  locales: ALL_LOCALES,
   sourceLocale: 'en',
   pseudoLocale: 'pseudo-LOCALE',
   fallbackLocales: {
diff --git a/src/components/lang-selector.jsx b/src/components/lang-selector.jsx
index a5249c46..5dcdf074 100644
--- a/src/components/lang-selector.jsx
+++ b/src/components/lang-selector.jsx
@@ -1,7 +1,7 @@
 import { useLingui } from '@lingui/react';
 import { useMemo } from 'preact/hooks';
 
-import { CATALOGS, DEFAULT_LANG, LOCALES } from '../locales';
+import { CATALOGS, DEFAULT_LANG, DEV_LOCALES, LOCALES } from '../locales';
 import { activateLang } from '../utils/lang';
 import localeCode2Text from '../utils/localeCode2Text';
 
@@ -16,10 +16,6 @@ export default function LangSelector() {
   // Sorted on render, so the order won't suddenly change based on current locale
   const populatedLocales = useMemo(() => {
     return LOCALES.map((lang) => {
-      if (lang === 'pseudo-LOCALE') {
-        return { code: lang, native: 'Pseudolocalization (test)' };
-      }
-
       // Don't need regions for now, it makes text too noisy
       // Wait till there's too many languages and there are regional clashes
       const regionlessCode = regionMaps[lang] || lang.replace(/-[a-z]+$/i, '');
@@ -45,9 +41,6 @@ export default function LangSelector() {
         native,
       };
     }).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 common name
       const order = a._common.localeCompare(b._common, i18n.locale);
       if (order !== 0) return order;
@@ -70,16 +63,6 @@ export default function LangSelector() {
         }}
       >
         {populatedLocales.map(({ code, regionlessCode, native }) => {
-          if (code === 'pseudo-LOCALE') {
-            return (
-              <>
-                <hr />
-                <option value={code} key={code}>
-                  {native}
-                </option>
-              </>
-            );
-          }
           // Common name changes based on current locale
           const common = localeCode2Text({
             code: regionlessCode,
@@ -97,6 +80,33 @@ export default function LangSelector() {
             </option>
           );
         })}
+        {(import.meta.env.DEV || import.meta.env.PHANPY_SHOW_DEV_LOCALES) && (
+          <optgroup label="🚧 Development (<50% translated)">
+            {DEV_LOCALES.map((code) => {
+              if (code === 'pseudo-LOCALE') {
+                return (
+                  <>
+                    <hr />
+                    <option value={code} key={code}>
+                      Pseudolocalization (test)
+                    </option>
+                  </>
+                );
+              }
+              const nativeName = CATALOGS.find(
+                (c) => c.code === code,
+              )?.nativeName;
+              const completion = CATALOGS.find(
+                (c) => c.code === code,
+              )?.completion;
+              return (
+                <option value={code} key={code}>
+                  {nativeName || code} &lrm;[{completion}%]
+                </option>
+              );
+            })}
+          </optgroup>
+        )}
       </select>
     </label>
   );
diff --git a/src/locales.js b/src/locales.js
index ea83cd07..74bf4bd4 100644
--- a/src/locales.js
+++ b/src/locales.js
@@ -12,7 +12,15 @@ const locales = [
     .filter(({ completion }) => completion >= PERCENTAGE_THRESHOLD)
     .map(({ code }) => code),
 ];
-if (import.meta.env.DEV) {
-  locales.push('pseudo-LOCALE');
-}
 export const LOCALES = locales;
+
+let devLocales = [];
+if (import.meta.env.DEV || import.meta.env.PHANPY_SHOW_DEV_LOCALES) {
+  devLocales = catalogs
+    .filter(({ completion }) => completion < PERCENTAGE_THRESHOLD)
+    .map(({ code }) => code);
+  devLocales.push('pseudo-LOCALE');
+}
+export const DEV_LOCALES = devLocales;
+
+export const ALL_LOCALES = [...locales, ...devLocales];
diff --git a/src/utils/lang.js b/src/utils/lang.js
index 5140522b..2ef1b135 100644
--- a/src/utils/lang.js
+++ b/src/utils/lang.js
@@ -7,7 +7,7 @@ import {
 } from '@lingui/detect-locale';
 import Locale from 'intl-locale-textinfo-polyfill';
 
-import { DEFAULT_LANG, LOCALES } from '../locales';
+import { ALL_LOCALES, DEFAULT_LANG } from '../locales';
 import { messages } from '../locales/en.po';
 import localeMatch from '../utils/locale-match';
 
@@ -62,7 +62,7 @@ export function initActivateLang() {
     DEFAULT_LANG,
   );
   const matchedLang =
-    LOCALES.find((l) => l === lang) || localeMatch(lang, LOCALES);
+    ALL_LOCALES.find((l) => l === lang) || localeMatch(lang, ALL_LOCALES);
   activateLang(matchedLang);
 
   // const yes = confirm(t`Reload to apply language setting?`);