Show alternative languages in own list.

external/lang

@@ -1 +1 @@
-Subproject commit a84270a2b941a51f4785e543c0882ce9f7f004a6
+Subproject commit 332cc2d7125b9cfb26ce211a9cb0fbf29301946c

src/context/Locale.tsx

@@ -51,6 +51,7 @@ export interface LanguageEntry {
     i18n: string;
     dayjs?: string;
     rtl?: boolean;
+    alt?: boolean;
 }
 
 export const Languages: { [key in Language]: LanguageEntry } = {
@@ -95,20 +96,22 @@ export const Languages: { [key in Language]: LanguageEntry } = {
         dayjs: "zh",
     },
 
-    owo: { display: "OwO", emoji: "🐱", i18n: "owo", dayjs: "en-gb" },
+    owo: { display: "OwO", emoji: "🐱", i18n: "owo", dayjs: "en-gb", alt: true },
-    pr: { display: "Pirate", emoji: "🏴‍☠️", i18n: "pr", dayjs: "en-gb" },
+    pr: { display: "Pirate", emoji: "🏴‍☠️", i18n: "pr", dayjs: "en-gb", alt: true },
-    bottom: { display: "Bottom", emoji: "🥺", i18n: "bottom", dayjs: "en-gb" },
+    bottom: { display: "Bottom", emoji: "🥺", i18n: "bottom", dayjs: "en-gb", alt: true },
     piglatin: {
         display: "Pig Latin",
         emoji: "🐖",
         i18n: "piglatin",
         dayjs: "en-gb",
+        alt: true
     },
     hardcore: {
         display: "Hardcore Mode",
         emoji: "🔥",
         i18n: "hardcore",
         dayjs: "en-gb",
+        alt: true
     },
 };
 

src/pages/settings/panes/Languages.tsx

@@ -7,40 +7,57 @@ import { connectState } from "../../../redux/connector";
 import { WithDispatcher } from "../../../redux/reducers";
 import { Language, LanguageEntry, Languages as Langs } from "../../../context/Locale";
 
-interface Props {
+type Props = WithDispatcher & {
     locale: Language;
 }
 
-export function Component({ locale, dispatcher }: Props & WithDispatcher) {
+type Key = [ string, LanguageEntry ];
+
+function Entry({ entry: [ x, lang ], locale, dispatcher }: { entry: Key } & Props) {
+    return (
+        <Checkbox
+            key={x}
+            className={styles.entry}
+            checked={locale === x}
+            onChange={v => {
+                if (v) {
+                    dispatcher({
+                        type: "SET_LOCALE",
+                        locale: x as Language
+                    });
+                }
+            }}
+        >
+            <div className={styles.flag}><Emoji size={42} emoji={lang.emoji} /></div>
+            <span className={styles.description}>
+                {lang.display}
+            </span>
+        </Checkbox>
+    );
+}
+
+export function Component(props: Props) {
+    const languages = Object
+        .keys(Langs)
+        .map(x => [ x, Langs[x as keyof typeof Langs] ]) as Key[];
+
     return (
         <div className={styles.languages}>
             <h3>
                 <Text id="app.settings.pages.language.select" />
             </h3>
             <div className={styles.list}>
-                {Object.keys(Langs).map(x => {
+                {languages
-                    const l = (Langs as any)[x] as LanguageEntry;
+                    .filter(([, lang]) => !lang.alt)
-                    return (
+                    .map(([x, lang]) => <Entry key={x} entry={[x, lang]} {...props} />)}
-                        <Checkbox
+            </div>
-                            key={x}
+            <h3>
-                            className={styles.entry}
+                <Text id="app.settings.pages.language.other" />
-                            checked={locale === x}
+            </h3>
-                            onChange={v => {
+            <div className={styles.list}>
-                                if (v) {
+                {languages
-                                    dispatcher({
+                    .filter(([, lang]) => lang.alt)
-                                        type: "SET_LOCALE",
+                    .map(([x, lang]) => <Entry key={x} entry={[x, lang]} {...props} />)}
-                                        locale: x as Language
-                                    });
-                                }
-                            }}
-                        >
-                            <div className={styles.flag}><Emoji size={42} emoji={l.emoji} /></div>
-                            <span className={styles.description}>
-                                {l.display}
-                            </span>
-                        </Checkbox>
-                    );
-                })}
             </div>
             <Tip>
                 <span>

src/pages/settings/panes/Panes.module.scss

@@ -336,6 +336,8 @@
 
 .languages {
     .list {
+        margin-bottom: 1em;
+        
         .entry {
             padding: 2px 8px;
             height: 50px;