feat(react): basic handling of note context aware

apps/client/src/layouts/desktop_layout.tsx

@@ -4,7 +4,7 @@ import TabRowWidget from "../widgets/tab_row.js";
 import TitleBarButtonsWidget from "../widgets/title_bar_buttons.js";
 import LeftPaneContainer from "../widgets/containers/left_pane_container.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
-import NoteTitleWidget from "../widgets/note_title.js";
+import NoteTitleWidget from "../widgets/note_title.jsx";
 import OwnedAttributeListWidget from "../widgets/ribbon_widgets/owned_attribute_list.js";
 import NoteActionsWidget from "../widgets/buttons/note_actions.js";
 import NoteDetailWidget from "../widgets/note_detail.js";
@@ -152,7 +152,7 @@ export default class DesktopLayout {
                                                                 .css("align-items", "center")
                                                                 .cssBlock(".title-row > * { margin: 5px; }")
                                                                 .child(new NoteIconWidget())
-                                                                .child(new NoteTitleWidget())
+                                                                .child(<NoteTitleWidget />)
                                                                 .child(new SpacerWidget(0, 1))
                                                                 .child(new MovePaneButton(true))
                                                                 .child(new MovePaneButton(false))

apps/client/src/widgets/basic_widget.ts

@@ -4,6 +4,7 @@ import froca from "../services/froca.js";
 import { t } from "../services/i18n.js";
 import toastService from "../services/toast.js";
 import { renderReactWidget } from "./react/react_utils.jsx";
+import { EventNames, EventData } from "../components/app_context.js";
 
 export class TypedBasicWidget<T extends TypedComponent<any>> extends TypedComponent<T> {
     protected attrs: Record<string, string>;
@@ -276,9 +277,10 @@ export function wrapReactWidgets<T extends TypedComponent<any>>(components: (T |
     return wrappedResult;
 }
 
-class ReactWrappedWidget extends BasicWidget {
+export class ReactWrappedWidget extends BasicWidget {
 
     private el: VNode;
+    listeners: Record<string, (data: any) => void> = {};
 
     constructor(el: VNode) {
         super();
@@ -289,4 +291,10 @@ class ReactWrappedWidget extends BasicWidget {
         this.$widget = renderReactWidget(this, this.el);
     }
 
+    handleEvent<T extends EventNames>(name: T, data: EventData<T>): Promise<unknown[] | unknown> | null | undefined {
+        const listener = this.listeners[name];
+        console.log("Handle ", name, listener);
+        listener?.(data);
+    }
+
 }

apps/client/src/widgets/note_title.tsx

@@ -1,7 +1,11 @@
+import { useNoteContext } from "./react/hooks";
+
 export default function NoteTitleWidget() {
+    const { ntxId, noteId, note } = useNoteContext();
+    
     return (
         <>
-            <p>Hi</p>
+            <p>{ ntxId }{ noteId }</p>
         </>
     );
 }

apps/client/src/widgets/react/hooks.tsx

@@ -6,7 +6,8 @@ import { OptionNames } from "@triliumnext/commons";
 import options, { type OptionValue } from "../../services/options";
 import utils, { reloadFrontendApp } from "../../services/utils";
 import Component from "../../components/component";
-import server from "../../services/server";
+import NoteContext from "../../components/note_context";
+import { ReactWrappedWidget } from "../basic_widget";
 
 type TriliumEventHandler<T extends EventNames> = (data: EventData<T>) => void;
 const registeredHandlers: Map<Component, Map<EventNames, TriliumEventHandler<any>[]>> = new Map();
@@ -83,6 +84,11 @@ export default function useTriliumEvent<T extends EventNames>(eventName: T, hand
     }, [ eventName, parentWidget, handler ]);
 }
 
+export function useTriliumEventBeta<T extends EventNames>(eventName: T, handler: TriliumEventHandler<T>) {
+    const parentComponent = useContext(ParentComponent) as ReactWrappedWidget;
+    parentComponent.listeners[eventName] = handler;
+}
+
 export function useSpacedUpdate(callback: () => Promise<void>, interval = 1000) {
     const callbackRef = useRef(callback);
     const spacedUpdateRef = useRef<SpacedUpdate>();
@@ -218,4 +224,36 @@ export function useTriliumOptions<T extends OptionNames>(...names: T[]) {
  */
 export function useUniqueName(prefix?: string) {
     return useMemo(() => (prefix ? prefix + "-" : "") + utils.randomString(10), [ prefix ]);
+}
+
+export function useNoteContext() {
+
+    const [ noteContext, setNoteContext ] = useState<NoteContext>();
+    const [ notePath, setNotePath ] = useState<string | null | undefined>();
+
+    useTriliumEvent("activeContextChanged", ({ noteContext }) => {
+        console.log("Active context changed.");
+        setNoteContext(noteContext);
+    });
+    useTriliumEventBeta("setNoteContext", ({ noteContext }) => {
+        console.log("Set note context", noteContext, noteContext.noteId);
+        setNoteContext(noteContext);
+    });
+    useTriliumEvent("noteSwitchedAndActivated", ({ noteContext }) => {
+        console.log("Note switched and activated")
+        setNoteContext(noteContext);
+    });
+    useTriliumEvent("noteSwitched", ({ noteContext, notePath }) => {
+        console.warn("Note switched", notePath);
+        setNotePath(notePath);
+    });
+
+    return {
+        note: noteContext?.note,
+        noteId: noteContext?.note?.noteId,
+        notePath: noteContext?.notePath,
+        hoistedNoteId: noteContext?.hoistedNoteId,
+        ntxId: noteContext?.ntxId
+    };
+
 }