feat(status_bar/language): display icon

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

@@ -10,6 +10,26 @@
         flex-grow: 1;
     }
 
+    > .actions-row {
+        padding: 0.1em;
+
+        .status-bar-dropdown-button {
+            background: transparent;
+            padding: 0 0.5em !important;
+            display: flex;
+            align-items: center;
+
+            &:after {
+                content: unset;
+            }
+
+            &:focus,
+            &:hover {
+                background: var(--input-background-color);
+            }
+        }
+    }
+
     .dropdown {
         font-size: 0.85em;
 

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

@@ -10,8 +10,10 @@ import Breadcrumb from "./Breadcrumb";
 import { useState } from "preact/hooks";
 import { createPortal } from "preact/compat";
 import { useProcessedLocales } from "../type_widgets/options/components/LocaleSelector";
-import Dropdown from "../react/Dropdown";
+import Dropdown, { DropdownProps } from "../react/Dropdown";
 import { Locale } from "@triliumnext/commons";
+import clsx from "clsx";
+import Icon from "../react/Icon";
 
 interface StatusBarContext {
     note: FNote;
@@ -36,6 +38,23 @@ export default function StatusBar() {
     );
 }
 
+function StatusBarDropdown({ children, icon, text, buttonClassName, ...dropdownProps }: Omit<DropdownProps, "hideToggleArrow"> & {
+    icon?: string;
+}) {
+    return (
+        <Dropdown
+            buttonClassName={clsx("status-bar-dropdown-button", buttonClassName)}
+            text={<>
+                {icon && (<><Icon icon={icon} />&nbsp;</>)}
+                {text}
+            </>}
+            {...dropdownProps}
+        >
+            {children}
+        </Dropdown>
+    );
+}
+
 function LanguageSwitcher({ note }: StatusBarContext) {
     const [ modalShown, setModalShown ] = useState(false);
     const { locales, DEFAULT_LOCALE, currentNoteLanguage, setCurrentNoteLanguage } = useLanguageSwitcher(note);
@@ -43,7 +62,7 @@ function LanguageSwitcher({ note }: StatusBarContext) {
 
     return (
         <>
-            <Dropdown text={getLocaleName(activeLocale)}>
+            <StatusBarDropdown icon="bx bx-globe" text={getLocaleName(activeLocale)}>
                 {processedLocales.map(locale => {
                     if (typeof locale === "object") {
                         return <FormListItem
@@ -64,7 +83,7 @@ function LanguageSwitcher({ note }: StatusBarContext) {
                     onClick={() => setModalShown(true)}
                     icon="bx bx-cog"
                 >{t("note_language.configure-languages")}</FormListItem>
-            </Dropdown>
+            </StatusBarDropdown>
             {createPortal(
                 <ContentLanguagesModal modalShown={modalShown} setModalShown={setModalShown} />,
                 document.body