From 5bf27a463c4ca9c0683a597551ceb67d51be74a5 Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Sat, 13 May 2023 22:50:14 +0200
Subject: [PATCH] fix: language list containing duplicate `en` lang (#6583)

---
 src/css/styles.scss                           |   4 +
 .../components/LanguageList.tsx               |   5 +-
 src/i18n.ts                                   | 109 +++++++++---------
 3 files changed, 60 insertions(+), 58 deletions(-)

diff --git a/src/css/styles.scss b/src/css/styles.scss
index d9d8544a..3fc2ff56 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -538,6 +538,10 @@
     height: 3px;
   }
 
+  select::-webkit-scrollbar {
+    width: 10px;
+  }
+
   ::-webkit-scrollbar-thumb {
     background: var(--scrollbar-thumb);
     border-radius: 10px;
diff --git a/src/excalidraw-app/components/LanguageList.tsx b/src/excalidraw-app/components/LanguageList.tsx
index aaa5f213..c80acc9b 100644
--- a/src/excalidraw-app/components/LanguageList.tsx
+++ b/src/excalidraw-app/components/LanguageList.tsx
@@ -1,7 +1,7 @@
 import { useSetAtom } from "jotai";
 import React from "react";
 import { appLangCodeAtom } from "..";
-import { defaultLang, useI18n } from "../../i18n";
+import { useI18n } from "../../i18n";
 import { languages } from "../../i18n";
 
 export const LanguageList = ({ style }: { style?: React.CSSProperties }) => {
@@ -16,9 +16,6 @@ export const LanguageList = ({ style }: { style?: React.CSSProperties }) => {
       aria-label={t("buttons.selectLanguage")}
       style={style}
     >
-      <option key={defaultLang.code} value={defaultLang.code}>
-        {defaultLang.label}
-      </option>
       {languages.map((lang) => (
         <option key={lang.code} value={lang.code}>
           {lang.label}
diff --git a/src/i18n.ts b/src/i18n.ts
index 7a630086..40d5884b 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -14,60 +14,61 @@ export interface Language {
 
 export const defaultLang = { code: "en", label: "English" };
 
-const allLanguages: Language[] = [
-  { code: "ar-SA", label: "العربية", rtl: true },
-  { code: "bg-BG", label: "Български" },
-  { code: "ca-ES", label: "Català" },
-  { code: "cs-CZ", label: "Česky" },
-  { code: "de-DE", label: "Deutsch" },
-  { code: "el-GR", label: "Ελληνικά" },
-  { code: "es-ES", label: "Español" },
-  { code: "eu-ES", label: "Euskara" },
-  { code: "fa-IR", label: "فارسی", rtl: true },
-  { code: "fi-FI", label: "Suomi" },
-  { code: "fr-FR", label: "Français" },
-  { code: "gl-ES", label: "Galego" },
-  { code: "he-IL", label: "עברית", rtl: true },
-  { code: "hi-IN", label: "हिन्दी" },
-  { code: "hu-HU", label: "Magyar" },
-  { code: "id-ID", label: "Bahasa Indonesia" },
-  { code: "it-IT", label: "Italiano" },
-  { code: "ja-JP", label: "日本語" },
-  { code: "kab-KAB", label: "Taqbaylit" },
-  { code: "kk-KZ", label: "Қазақ тілі" },
-  { code: "ko-KR", label: "한국어" },
-  { code: "ku-TR", label: "Kurdî" },
-  { code: "lt-LT", label: "Lietuvių" },
-  { code: "lv-LV", label: "Latviešu" },
-  { code: "my-MM", label: "Burmese" },
-  { code: "nb-NO", label: "Norsk bokmål" },
-  { code: "nl-NL", label: "Nederlands" },
-  { code: "nn-NO", label: "Norsk nynorsk" },
-  { code: "oc-FR", label: "Occitan" },
-  { code: "pa-IN", label: "ਪੰਜਾਬੀ" },
-  { code: "pl-PL", label: "Polski" },
-  { code: "pt-BR", label: "Português Brasileiro" },
-  { code: "pt-PT", label: "Português" },
-  { code: "ro-RO", label: "Română" },
-  { code: "ru-RU", label: "Русский" },
-  { code: "sk-SK", label: "Slovenčina" },
-  { code: "sv-SE", label: "Svenska" },
-  { code: "sl-SI", label: "Slovenščina" },
-  { code: "tr-TR", label: "Türkçe" },
-  { code: "uk-UA", label: "Українська" },
-  { code: "zh-CN", label: "简体中文" },
-  { code: "zh-TW", label: "繁體中文" },
-  { code: "vi-VN", label: "Tiếng Việt" },
-  { code: "mr-IN", label: "मराठी" },
-].concat([defaultLang]);
-
-export const languages: Language[] = allLanguages
-  .sort((left, right) => (left.label > right.label ? 1 : -1))
-  .filter(
-    (lang) =>
-      (percentages as Record<string, number>)[lang.code] >=
-      COMPLETION_THRESHOLD,
-  );
+export const languages: Language[] = [
+  defaultLang,
+  ...[
+    { code: "ar-SA", label: "العربية", rtl: true },
+    { code: "bg-BG", label: "Български" },
+    { code: "ca-ES", label: "Català" },
+    { code: "cs-CZ", label: "Česky" },
+    { code: "de-DE", label: "Deutsch" },
+    { code: "el-GR", label: "Ελληνικά" },
+    { code: "es-ES", label: "Español" },
+    { code: "eu-ES", label: "Euskara" },
+    { code: "fa-IR", label: "فارسی", rtl: true },
+    { code: "fi-FI", label: "Suomi" },
+    { code: "fr-FR", label: "Français" },
+    { code: "gl-ES", label: "Galego" },
+    { code: "he-IL", label: "עברית", rtl: true },
+    { code: "hi-IN", label: "हिन्दी" },
+    { code: "hu-HU", label: "Magyar" },
+    { code: "id-ID", label: "Bahasa Indonesia" },
+    { code: "it-IT", label: "Italiano" },
+    { code: "ja-JP", label: "日本語" },
+    { code: "kab-KAB", label: "Taqbaylit" },
+    { code: "kk-KZ", label: "Қазақ тілі" },
+    { code: "ko-KR", label: "한국어" },
+    { code: "ku-TR", label: "Kurdî" },
+    { code: "lt-LT", label: "Lietuvių" },
+    { code: "lv-LV", label: "Latviešu" },
+    { code: "my-MM", label: "Burmese" },
+    { code: "nb-NO", label: "Norsk bokmål" },
+    { code: "nl-NL", label: "Nederlands" },
+    { code: "nn-NO", label: "Norsk nynorsk" },
+    { code: "oc-FR", label: "Occitan" },
+    { code: "pa-IN", label: "ਪੰਜਾਬੀ" },
+    { code: "pl-PL", label: "Polski" },
+    { code: "pt-BR", label: "Português Brasileiro" },
+    { code: "pt-PT", label: "Português" },
+    { code: "ro-RO", label: "Română" },
+    { code: "ru-RU", label: "Русский" },
+    { code: "sk-SK", label: "Slovenčina" },
+    { code: "sv-SE", label: "Svenska" },
+    { code: "sl-SI", label: "Slovenščina" },
+    { code: "tr-TR", label: "Türkçe" },
+    { code: "uk-UA", label: "Українська" },
+    { code: "zh-CN", label: "简体中文" },
+    { code: "zh-TW", label: "繁體中文" },
+    { code: "vi-VN", label: "Tiếng Việt" },
+    { code: "mr-IN", label: "मराठी" },
+  ]
+    .filter(
+      (lang) =>
+        (percentages as Record<string, number>)[lang.code] >=
+        COMPLETION_THRESHOLD,
+    )
+    .sort((left, right) => (left.label > right.label ? 1 : -1)),
+];
 
 const TEST_LANG_CODE = "__test__";
 if (process.env.NODE_ENV === ENV.DEVELOPMENT) {