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,19 +7,13 @@ 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 ];
-    return (
+
-        <div className={styles.languages}>
+function Entry({ entry: [ x, lang ], locale, dispatcher }: { entry: Key } & Props) {
-            <h3>
-                <Text id="app.settings.pages.language.select" />
-            </h3>
-            <div className={styles.list}>
-                {Object.keys(Langs).map(x => {
-                    const l = (Langs as any)[x] as LanguageEntry;
     return (
         <Checkbox
             key={x}
@@ -34,13 +28,36 @@ export function Component({ locale, dispatcher }: Props & WithDispatcher) {
                 }
             }}
         >
-                            <div className={styles.flag}><Emoji size={42} emoji={l.emoji} /></div>
+            <div className={styles.flag}><Emoji size={42} emoji={lang.emoji} /></div>
             <span className={styles.description}>
-                                {l.display}
+                {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}>
+                {languages
+                    .filter(([, lang]) => !lang.alt)
+                    .map(([x, lang]) => <Entry key={x} entry={[x, lang]} {...props} />)}
+            </div>
+            <h3>
+                <Text id="app.settings.pages.language.other" />
+            </h3>
+            <div className={styles.list}>
+                {languages
+                    .filter(([, lang]) => lang.alt)
+                    .map(([x, lang]) => <Entry key={x} entry={[x, lang]} {...props} />)}
             </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;