feat(layout/status_bar): integrate language selector basically

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

@@ -1,12 +1,46 @@
-import Breadcrumb from "./Breadcrumb";
 import "./StatusBar.css";
 
+import FNote from "../../entities/fnote";
+import { t } from "../../services/i18n";
+import { openInAppHelpFromUrl } from "../../services/utils";
+import { FormListItem } from "../react/FormList";
+import { useNoteContext } from "../react/hooks";
+import { NoteLanguageSelector } from "../ribbon/BasicPropertiesTab";
+import Breadcrumb from "./Breadcrumb";
+
+interface StatusBarContext {
+    note: FNote;
+}
+
 export default function StatusBar() {
+    const { note } = useNoteContext();
+    const context = note && { note } satisfies StatusBarContext;
+
     return (
         <div className="status-bar">
-            <div className="breadcrumb-row">
-                <Breadcrumb />
-            </div>
+            {context && <>
+                <div className="breadcrumb-row">
+                    <Breadcrumb />
+                </div>
+
+                <div className="actions-row">
+                    <LanguageSwitcher {...context} />
+                </div>
+            </>}
         </div>
     );
 }
+
+function LanguageSwitcher({ note }: StatusBarContext) {
+    return (
+        <NoteLanguageSelector
+            note={note}
+            extraChildren={(
+                <FormListItem
+                    onClick={() => openInAppHelpFromUrl("veGu4faJErEM")}
+                    icon="bx bx-help-circle"
+                >{t("note_language.help-on-languages")}</FormListItem>
+            )}
+        />
+    );
+}