From db42bb603becb32d87c91c61341de75aa440d63e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 10 Dec 2025 23:04:32 +0200
Subject: [PATCH] feat(status_bar): add help item

---
 apps/client/src/translations/en/translation.json      |  3 ++-
 apps/client/src/widgets/NoteStatusBar.tsx             | 10 +++++++++-
 apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx | 10 ++++++----
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index fa133d3df..9880e99b5 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1963,7 +1963,8 @@
   },
   "note_language": {
     "not_set": "No language set",
-    "configure-languages": "Configure languages..."
+    "configure-languages": "Configure languages...",
+    "help-on-languages": "Help on content languages..."
   },
   "content_language": {
     "title": "Content languages",
diff --git a/apps/client/src/widgets/NoteStatusBar.tsx b/apps/client/src/widgets/NoteStatusBar.tsx
index fb51587f0..9255fb8fd 100644
--- a/apps/client/src/widgets/NoteStatusBar.tsx
+++ b/apps/client/src/widgets/NoteStatusBar.tsx
@@ -1,11 +1,19 @@
+import { t } from "../services/i18n";
+import { openInAppHelpFromUrl } from "../services/utils";
 import "./NoteStatusBar.css";
+import { FormListItem } from "./react/FormList";
 
 import { NoteLanguageSelector } from "./ribbon/BasicPropertiesTab";
 
 export default function NoteStatusBar() {
     return (
         <div className="note-status-bar">
-            <NoteLanguageSelector />
+            <NoteLanguageSelector extraChildren={(
+                <FormListItem
+                    onClick={() => openInAppHelpFromUrl("veGu4faJErEM")}
+                    icon="bx bx-help-circle"
+                >{t("note_language.help-on-languages")}</FormListItem>
+            )} />
         </div>
     );
 }
diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
index a7581f05a..8ea9d6f7d 100644
--- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
+++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
@@ -23,6 +23,7 @@ import { ContentLanguagesList } from "../type_widgets/options/i18n";
 import { LocaleSelector } from "../type_widgets/options/components/LocaleSelector";
 import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
 import { createPortal } from "preact/compat";
+import { ComponentChildren } from "preact";
 
 const isNewLayout = isExperimentalFeatureEnabled("new-layout");
 
@@ -326,12 +327,12 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
             &nbsp;
 
             <NoteLanguageSelector note={note} />
-            <HelpButton helpPage="B0lcI9xz1r8K" style={{ marginInlineStart: "4px" }} />
+            <HelpButton helpPage="veGu4faJErEM" style={{ marginInlineStart: "4px" }} />
         </div>
     );
 }
 
-export function NoteLanguageSelector({ note }: { note?: FNote | null }) {
+export function NoteLanguageSelector({ note, extraChildren }: { note?: FNote | null, extraChildren?: ComponentChildren }) {
     const [ modalShown, setModalShown ] = useState(false);
     const [ languages ] = useTriliumOption("languages");
     const DEFAULT_LOCALE = {
@@ -351,12 +352,13 @@ export function NoteLanguageSelector({ note }: { note?: FNote | null }) {
                 locales={locales}
                 defaultLocale={DEFAULT_LOCALE}
                 currentValue={currentNoteLanguage ?? ""} onChange={setCurrentNoteLanguage}
-                extraChildren={(
+                extraChildren={<>
+                    {extraChildren}
                     <FormListItem
                         onClick={() => setModalShown(true)}
                         icon="bx bx-cog"
                     >{t("note_language.configure-languages")}</FormListItem>
-                )}
+                </>}
             />
             {createPortal(
                 <ContentLanguagesModal modalShown={modalShown} setModalShown={setModalShown} />,