feat(layout/status_bar): integrate language selector basically

apps/client/src/layouts/desktop_layout.tsx

@@ -44,7 +44,6 @@ import NoteDetail from "../widgets/NoteDetail.jsx";
 import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
 import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx";
 import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
-import Breadcrumb from "../widgets/layout/Breadcrumb.jsx";
 import TabHistoryNavigationButtons from "../widgets/TabHistoryNavigationButtons.jsx";
 import { isExperimentalFeatureEnabled } from "../services/experimental_features.js";
 import NoteActions from "../widgets/ribbon/NoteActions.jsx";
@@ -52,7 +51,6 @@ 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";
 import StatusBar from "../widgets/layout/StatusBar.jsx";
 
 export default class DesktopLayout {
@@ -153,11 +151,7 @@ export default class DesktopLayout {
                                                         )
                                                         .optChild(!isFloatingTitlebar, titleRow)
                                                         .optChild(!isNewLayout, <Ribbon><NoteActions /></Ribbon>)
-                                                        .optChild(isNewLayout, (
+                                                        .optChild(isNewLayout, <Ribbon />)
-                                                            <Ribbon>
-                                                                <NoteStatusBar />
-                                                            </Ribbon>
-                                                        ))
                                                         .child(new WatchedFileUpdateStatusWidget())
                                                         .child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
                                                         .child(

apps/client/src/widgets/NoteStatusBar.css

@@ -1,13 +0,0 @@
-.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

@@ -1,25 +0,0 @@
-import "./NoteStatusBar.css";
-
-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";
-
-export default function NoteStatusBar() {
-    const { note } = useNoteContext();
-
-    return (
-        <div className="note-status-bar">
-            <NoteLanguageSelector
-                note={note}
-                extraChildren={(
-                    <FormListItem
-                        onClick={() => openInAppHelpFromUrl("veGu4faJErEM")}
-                        icon="bx bx-help-circle"
-                    >{t("note_language.help-on-languages")}</FormListItem>
-                )}
-            />
-        </div>
-    );
-}

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

@@ -1,5 +1,20 @@
 .component.status-bar {
     contain: none;
     border-top: 1px solid var(--main-border-color);
-    background-color: var(--left-pane-background-color)
+    background-color: var(--left-pane-background-color);
+    display: flex;
+    align-items: center;
+    padding-inline: 0.25em;
+
+    > .breadcrumb-row {
+        flex-grow: 1;
+    }
+
+    .dropdown {
+        font-size: 0.85em;
+
+        .dropdown-toggle {
+            padding: 0.1em 0.25em;
+        }
+    }
 }

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">
+            {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>
+            )}
+        />
+    );
+}