feat(note_language): add in-app help

src/public/app/services/utils.ts

@@ -1,5 +1,8 @@
 import dayjs from "dayjs";
 import { Modal } from "bootstrap";
+import type { ViewScope } from "./link.js";
+import appContext from "../components/app_context.js";
+import { setLogLevel } from "mermaid/dist/logger.js";
 
 function reloadFrontendApp(reason?: string) {
     if (reason) {
@@ -388,6 +391,10 @@ function initHelpDropdown($el: JQuery<HTMLElement>) {
 const wikiBaseUrl = "https://triliumnext.github.io/Docs/Wiki/";
 
 function openHelp($button: JQuery<HTMLElement>) {
+    if ($button.length === 0) {
+        return;
+    }
+
     const helpPage = $button.attr("data-help-page");
 
     if (helpPage) {
@@ -397,12 +404,42 @@ function openHelp($button: JQuery<HTMLElement>) {
     }
 }
 
+function openInAppHelp($button: JQuery<HTMLElement>) {
+    if ($button.length === 0) {
+        return;
+    }
+
+    const inAppHelpPage = $button.attr("data-in-app-help");
+    if (inAppHelpPage) {
+        const subContexts = appContext.tabManager.getActiveContext().getSubContexts();
+        const targetNote = `_help_${inAppHelpPage}`;
+        const helpSubcontext = subContexts.find((s) => s.viewScope?.viewMode === "contextual-help");
+        const viewScope: ViewScope = {
+            viewMode: "contextual-help",
+        };
+        if (!helpSubcontext) {
+            // The help is not already open, open a new split with it.
+            const { ntxId } = subContexts[subContexts.length - 1];
+            appContext.triggerCommand("openNewNoteSplit", {
+                ntxId,
+                notePath: targetNote,
+                hoistedNoteId: "_help",
+                viewScope
+            })
+        } else {
+            // There is already a help window open, make sure it opens on the right note.
+            helpSubcontext.setNote(targetNote, { viewScope });
+        }
+        return;
+    }
+}
+
 function initHelpButtons($el: JQuery<HTMLElement> | JQuery<Window>) {
     // for some reason, the .on(event, listener, handler) does not work here (e.g. Options -> Sync -> Help button)
     // so we do it manually
     $el.on("click", (e) => {
-        const $helpButton = $(e.target).closest("[data-help-page]");
+        openHelp($(e.target).closest("[data-help-page]"));
-        openHelp($helpButton);
+        openInAppHelp($(e.target).closest("[data-in-app-help]"));
     });
 }
 

src/public/app/widgets/floating_buttons/help_button.ts

@@ -1,4 +1,5 @@
 import appContext, { type EventData } from "../../components/app_context.js";
+import type FNote from "../../entities/fnote.js";
 import type { NoteType } from "../../entities/fnote.js";
 import { t } from "../../services/i18n.js";
 import type { ViewScope } from "../../services/link.js";
@@ -39,47 +40,28 @@ const byBookType: Record<ViewTypeOptions, string | null> = {
 
 export default class ContextualHelpButton extends NoteContextAwareWidget {
 
-    private helpNoteIdToOpen?: string | null;
-
     isEnabled() {
-        this.helpNoteIdToOpen = null;
-
         if (!super.isEnabled()) {
             return false;
         }
 
-        if (this.note && this.note.type !== "book" && byNoteType[this.note.type]) {
+        return !!ContextualHelpButton.#getUrlToOpen(this.note);
-            this.helpNoteIdToOpen = byNoteType[this.note.type];
-        } else if (this.note && this.note.type === "book") {
-            this.helpNoteIdToOpen = byBookType[this.note.getAttributeValue("label", "viewType") as ViewTypeOptions ?? ""]
-        }
-
-        return !!this.helpNoteIdToOpen;
     }
 
     doRender() {
         this.$widget = $(TPL);
-        this.$widget.on("click", () => {
+    }
-            const subContexts = appContext.tabManager.getActiveContext().getSubContexts();
+
-            const targetNote = `_help_${this.helpNoteIdToOpen}`;
+    static #getUrlToOpen(note: FNote | null | undefined) {
-            const helpSubcontext = subContexts.find((s) => s.viewScope?.viewMode === "contextual-help");
+        if (note && note.type !== "book" && byNoteType[note.type]) {
-            const viewScope: ViewScope = {
+            return byNoteType[note.type];
-                viewMode: "contextual-help",
+        } else if (note && note.type === "book") {
-            };
+            return byBookType[note.getAttributeValue("label", "viewType") as ViewTypeOptions ?? ""]
-            if (!helpSubcontext) {
+        }
-                // The help is not already open, open a new split with it.
+    }
-                const { ntxId } = subContexts[subContexts.length - 1];
+
-                this.triggerCommand("openNewNoteSplit", {
+    async refreshWithNote(note: FNote | null | undefined): Promise<void> {
-                    ntxId,
+        this.$widget.attr("data-in-app-help", ContextualHelpButton.#getUrlToOpen(this.note) ?? "");
-                    notePath: targetNote,
-                    hoistedNoteId: "_help",
-                    viewScope
-                })
-            } else {
-                // There is already a help window open, make sure it opens on the right note.
-                helpSubcontext.setNote(targetNote, { viewScope });
-            }
-        });
     }
 
     entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {

src/public/app/widgets/note_language.ts

@@ -16,6 +16,7 @@ const TPL = `\
         <span class="caret"></span>
     </button>
     <div class="note-language-dropdown dropdown-menu dropdown-menu-left tn-dropdown-list"></div>
+    <button class="language-help-button icon-action bx bx-help-circle" type="button" data-in-app-help="B0lcI9xz1r8K" title="${t("open-help-page")}"></button>
 
     <style>
         .note-language-dropdown [dir=rtl] {