diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx
index b18db5004..2ad525dca 100644
--- a/apps/client/src/layouts/desktop_layout.tsx
+++ b/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, )
- .optChild(isNewLayout, (
-
-
-
- ))
+ .optChild(isNewLayout, )
.child(new WatchedFileUpdateStatusWidget())
.child()
.child(
diff --git a/apps/client/src/widgets/NoteStatusBar.css b/apps/client/src/widgets/NoteStatusBar.css
deleted file mode 100644
index c43f13daf..000000000
--- a/apps/client/src/widgets/NoteStatusBar.css
+++ /dev/null
@@ -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;
- }
- }
-}
diff --git a/apps/client/src/widgets/NoteStatusBar.tsx b/apps/client/src/widgets/NoteStatusBar.tsx
deleted file mode 100644
index 3b686ff84..000000000
--- a/apps/client/src/widgets/NoteStatusBar.tsx
+++ /dev/null
@@ -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 (
-
- openInAppHelpFromUrl("veGu4faJErEM")}
- icon="bx bx-help-circle"
- >{t("note_language.help-on-languages")}
- )}
- />
-
- );
-}
diff --git a/apps/client/src/widgets/layout/StatusBar.css b/apps/client/src/widgets/layout/StatusBar.css
index 8ece8cc27..ca916e1d1 100644
--- a/apps/client/src/widgets/layout/StatusBar.css
+++ b/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;
+ }
+ }
}
diff --git a/apps/client/src/widgets/layout/StatusBar.tsx b/apps/client/src/widgets/layout/StatusBar.tsx
index 987ad99ff..e017728de 100644
--- a/apps/client/src/widgets/layout/StatusBar.tsx
+++ b/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 (
-
-
-
+ {context && <>
+
+
+
+
+
+
+
+ >}
);
}
+
+function LanguageSwitcher({ note }: StatusBarContext) {
+ return (
+ openInAppHelpFromUrl("veGu4faJErEM")}
+ icon="bx bx-help-circle"
+ >{t("note_language.help-on-languages")}
+ )}
+ />
+ );
+}