From 10556ef7035ce0abc588bff9ede3a66f3cfaf7f9 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 9 Apr 2024 13:22:56 +0100
Subject: [PATCH 1/2] Humanize spell check language labels

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/settings/SpellCheckSettings.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/views/settings/SpellCheckSettings.tsx b/src/components/views/settings/SpellCheckSettings.tsx
index a7c9cd9e2d2..b18f722c182 100644
--- a/src/components/views/settings/SpellCheckSettings.tsx
+++ b/src/components/views/settings/SpellCheckSettings.tsx
@@ -18,10 +18,11 @@ import React from "react";
 
 import SpellCheckLanguagesDropdown from "../../../components/views/elements/SpellCheckLanguagesDropdown";
 import AccessibleButton, { ButtonEvent } from "../../../components/views/elements/AccessibleButton";
-import { _t } from "../../../languageHandler";
+import { _t, getUserLanguage } from "../../../languageHandler";
 
 interface ExistingSpellCheckLanguageIProps {
     language: string;
+    label?: string;
     onRemoved(language: string): void;
 }
 
@@ -45,7 +46,9 @@ export class ExistingSpellCheckLanguage extends React.Component<ExistingSpellChe
     public render(): React.ReactNode {
         return (
             <div className="mx_ExistingSpellCheckLanguage">
-                <span className="mx_ExistingSpellCheckLanguage_language">{this.props.language}</span>
+                <span className="mx_ExistingSpellCheckLanguage_language">
+                    {this.props.label ?? this.props.language}
+                </span>
                 <AccessibleButton onClick={this.onRemove} kind="danger_sm">
                     {_t("action|remove")}
                 </AccessibleButton>
@@ -87,8 +90,9 @@ export default class SpellCheckLanguages extends React.Component<SpellCheckLangu
     };
 
     public render(): React.ReactNode {
+        const intl = new Intl.DisplayNames([getUserLanguage()], { type: "language", style: "short" });
         const existingSpellCheckLanguages = this.props.languages.map((e) => {
-            return <ExistingSpellCheckLanguage language={e} onRemoved={this.onRemoved} key={e} />;
+            return <ExistingSpellCheckLanguage language={e} label={intl.of(e)} onRemoved={this.onRemoved} key={e} />;
         });
 
         const addButton = (

From 3be45333ce26f53292cf7d361ca04b934b15549f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 10 Apr 2024 23:13:15 +0100
Subject: [PATCH 2/2] Comment

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/settings/SpellCheckSettings.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/views/settings/SpellCheckSettings.tsx b/src/components/views/settings/SpellCheckSettings.tsx
index b18f722c182..58737773ea3 100644
--- a/src/components/views/settings/SpellCheckSettings.tsx
+++ b/src/components/views/settings/SpellCheckSettings.tsx
@@ -22,6 +22,9 @@ import { _t, getUserLanguage } from "../../../languageHandler";
 
 interface ExistingSpellCheckLanguageIProps {
     language: string;
+    /**
+     * The label to render on the component. If not provided, the language code will be used.
+     */
     label?: string;
     onRemoved(language: string): void;
 }