feat(status_bar): language selector

apps/client/src/layouts/desktop_layout.tsx

@@ -52,6 +52,7 @@ import FormattingToolbar from "../widgets/ribbon/FormattingToolbar.jsx";
 import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
 import BreadcrumbBadges from "../widgets/BreadcrumbBadges.jsx";
 import NoteTitleDetails from "../widgets/NoteTitleDetails.jsx";
+import NoteStatusBar from "../widgets/NoteStatusBar.jsx";
 
 export default class DesktopLayout {
 
@@ -176,7 +177,11 @@ export default class DesktopLayout {
                                                             ...this.customWidgets.get("node-detail-pane"), // typo, let's keep it for a while as BC
                                                             ...this.customWidgets.get("note-detail-pane")
                                                         )
-                                                        .optChild(isNewLayout, <Ribbon />)
+                                                        .optChild(isNewLayout, (
+                                                            <Ribbon>
+                                                                <NoteStatusBar />
+                                                            </Ribbon>
+                                                        ))
                                                 )
                                             )
                                             .child(...this.customWidgets.get("center-pane"))

apps/client/src/translations/en/translation.json

@@ -1962,7 +1962,7 @@
     "unknown_widget": "Unknown widget for \"{{id}}\"."
   },
   "note_language": {
-    "not_set": "Not set",
+    "not_set": "No language set",
     "configure-languages": "Configure languages..."
   },
   "content_language": {

apps/client/src/widgets/NoteStatusBar.css

@@ -0,0 +1,13 @@
+.note-status-bar {
+    display: flex;
+    align-items: center;
+    padding-inline: 1em;
+
+    .dropdown {
+        font-size: 0.85em;
+
+        .dropdown-toggle {
+            padding: 0.1em 0.25em;
+        }
+    }
+}

apps/client/src/widgets/NoteStatusBar.tsx

@@ -0,0 +1,11 @@
+import "./NoteStatusBar.css";
+
+import { NoteLanguageSelector } from "./ribbon/BasicPropertiesTab";
+
+export default function NoteStatusBar() {
+    return (
+        <div className="note-status-bar">
+            <NoteLanguageSelector />
+        </div>
+    );
+}

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

@@ -310,13 +310,25 @@ export function useShareState(note: FNote | null | undefined) {
 }
 
 function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
+    return (
+        <div className="note-language-container">
+            <span>{t("basic_properties.language")}:</span>
+            &nbsp;
+
+            <NoteLanguageSelector note={note} />
+            <HelpButton helpPage="B0lcI9xz1r8K" style={{ marginInlineStart: "4px" }} />
+        </div>
+    );
+}
+
+export function NoteLanguageSelector({ note }: { note?: FNote | null }) {
+    const [ modalShown, setModalShown ] = useState(false);
     const [ languages ] = useTriliumOption("languages");
     const DEFAULT_LOCALE = {
         id: "",
         name: t("note_language.not_set")
     };
     const [ currentNoteLanguage, setCurrentNoteLanguage ] = useNoteLabel(note, "language");
-    const [ modalShown, setModalShown ] = useState(false);
     const locales = useMemo(() => {
         const enabledLanguages = JSON.parse(languages ?? "[]") as string[];
         const filteredLanguages = getAvailableLocales().filter((l) => typeof l !== "object" || enabledLanguages.includes(l.id));
@@ -324,9 +336,7 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
     }, [ languages ]);
 
     return (
-        <div className="note-language-container">
+        <>
-            <span>{t("basic_properties.language")}:</span>
-            &nbsp;
             <LocaleSelector
                 locales={locales}
                 defaultLocale={DEFAULT_LOCALE}
@@ -337,12 +347,7 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
                         icon="bx bx-cog"
                     >{t("note_language.configure-languages")}</FormListItem>
                 )}
-            >
+            />
-
-            </LocaleSelector>
-
-            <HelpButton helpPage="B0lcI9xz1r8K" style={{ marginInlineStart: "4px" }} />
-
             <Modal
                 className="content-languages-modal"
                 title={t("content_language.title")}
@@ -351,7 +356,7 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
             >
                 <ContentLanguagesList />
             </Modal>
-        </div>
+        </>
     );
 }