Improve name-for-locale (#8207)

Author: dem4ron

app/javascript/components/localization/glossary-entries/show/Proposed/TranslationHeader.tsx

@@ -12,7 +12,7 @@ export function TranslationHeader({ locale }: TranslationHeaderProps) {
       <div className="text-h4">
         {nameForLocale(locale)} ({locale})
       </div>
-      <div className="status">Needs Reviewing</div>
+      <div className="status">Needs Sign-off</div>
       <div className="flag">{flagForLocale(locale)}</div>
     </div>
   )

app/javascript/components/localization/glossary-entries/show/Unchecked.tsx

@@ -80,7 +80,8 @@ export function Unchecked({ translation }: { translation: GlossaryEntry }) {
       <div className="body">
         <p className="text-16 leading-140 mb-10">
           How should we translate this word in the context of Exercism? What is
-          the most natural equivelent in LANGUAGE.
+          the most natural equivelent in{' '}
+          {nameForLocale(translation.locale, { displayInEnglish: true })}?
         </p>
         <div className="flex items-center gap-8 mb-12">
           <div className="text-16 w-[105px]">Original (en):</div>

app/javascript/utils/name-for-locale.ts

@@ -1,10 +1,14 @@
 import { capitalize } from 'lodash'
 
-export function nameForLocale(locale: string) {
+export function nameForLocale(
+  locale: string,
+  options: { displayInEnglish?: boolean } = { displayInEnglish: false }
+) {
   const [language] = locale.split('-')
-  const languageName = new Intl.DisplayNames([locale], { type: 'language' }).of(
-    language
-  )
+  const displayLocale = options.displayInEnglish ? 'en' : locale
+  const languageName = new Intl.DisplayNames([displayLocale], {
+    type: 'language',
+  }).of(language)
 
   return capitalize(languageName)
 }