diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx
index e3415bf4b..d50486750 100644
--- a/apps/client/src/layouts/desktop_layout.tsx
+++ b/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, )
+ .optChild(isNewLayout, (
+
+
+
+ ))
)
)
.child(...this.customWidgets.get("center-pane"))
diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 2298f2f2b..fa133d3df 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/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": {
diff --git a/apps/client/src/widgets/NoteStatusBar.css b/apps/client/src/widgets/NoteStatusBar.css
new file mode 100644
index 000000000..c43f13daf
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/apps/client/src/widgets/NoteStatusBar.tsx b/apps/client/src/widgets/NoteStatusBar.tsx
new file mode 100644
index 000000000..fb51587f0
--- /dev/null
+++ b/apps/client/src/widgets/NoteStatusBar.tsx
@@ -0,0 +1,11 @@
+import "./NoteStatusBar.css";
+
+import { NoteLanguageSelector } from "./ribbon/BasicPropertiesTab";
+
+export default function NoteStatusBar() {
+ return (
+
+
+
+ );
+}
diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
index 9c6f656d4..fcdd44082 100644
--- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
+++ b/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 (
+
+ {t("basic_properties.language")}:
+
+
+
+
+
+ );
+}
+
+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 (
-
- {t("basic_properties.language")}:
-
+ <>
{t("note_language.configure-languages")}
)}
- >
-
-
-
-
-
+ />
-
+ >
);
}