feat(status_bar/language): compact locale name

apps/client/src/widgets/layout/StatusBar.tsx

@@ -41,6 +41,7 @@ function LanguageSwitcher({ note }: StatusBarContext) {
                     icon="bx bx-help-circle"
                 >{t("note_language.help-on-languages")}</FormListItem>
             )}
+            compact
         />
     );
 }

apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx

@@ -330,7 +330,11 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
     );
 }
 
-export function NoteLanguageSelector({ note, extraChildren }: { note: FNote | null | undefined, extraChildren?: ComponentChildren }) {
+export function NoteLanguageSelector({ note, extraChildren, ...restProps }: {
+    note: FNote | null | undefined,
+    extraChildren?: ComponentChildren,
+    compact?: boolean;
+}) {
     const [ modalShown, setModalShown ] = useState(false);
     const [ languages ] = useTriliumOption("languages");
     const DEFAULT_LOCALE = {
@@ -357,6 +361,7 @@ export function NoteLanguageSelector({ note, extraChildren }: { note: FNote | nu
                         icon="bx bx-cog"
                     >{t("note_language.configure-languages")}</FormListItem>
                 </>}
+                {...restProps}
             />
             {createPortal(
                 <ContentLanguagesModal modalShown={modalShown} setModalShown={setModalShown} />,

apps/client/src/widgets/type_widgets/options/components/LocaleSelector.tsx

@@ -5,13 +5,14 @@ import { useMemo } from "preact/hooks";
 import Dropdown from "../../../react/Dropdown";
 import { FormDropdownDivider, FormListItem } from "../../../react/FormList";
 
-export function LocaleSelector({ id, locales, currentValue, onChange, defaultLocale, extraChildren }: {
+export function LocaleSelector({ id, locales, currentValue, onChange, defaultLocale, extraChildren, compact }: {
     id?: string;
     locales: Locale[],
     currentValue: string,
     onChange: (newLocale: string) => void,
     defaultLocale?: Locale,
-    extraChildren?: ComponentChildren
+    extraChildren?: ComponentChildren,
+    compact?: boolean;
 }) {
     const activeLocale = defaultLocale?.id === currentValue ? defaultLocale : locales.find(l => l.id === currentValue);
 
@@ -42,7 +43,7 @@ export function LocaleSelector({ id, locales, currentValue, onChange, defaultLoc
     }, [ locales ]);
 
     return (
-        <Dropdown id={id} text={activeLocale?.name}>
+        <Dropdown id={id} text={getLocaleName(activeLocale, compact)}>
             {processedLocales.map(locale => {
                 if (typeof locale === "object") {
                     return <FormListItem
@@ -58,5 +59,12 @@ export function LocaleSelector({ id, locales, currentValue, onChange, defaultLoc
             })}
             {extraChildren}
         </Dropdown>
-    )
+    );
+}
+
+function getLocaleName(locale: Locale | null | undefined, compact: boolean | undefined) {
+    if (!locale) return "";
+    if (!compact) return locale.name;
+    if (!locale.id) return "-";
+    return locale.id.toLocaleUpperCase();
 }