feat(react/note_title): bring back navigation title

apps/client/src/services/utils.ts

@@ -740,7 +740,7 @@ function isUpdateAvailable(latestVersion: string | null | undefined, currentVers
     return compareVersions(latestVersion, currentVersion) > 0;
 }
 
-function isLaunchBarConfig(noteId: string) {
+export function isLaunchBarConfig(noteId: string) {
     return ["_lbRoot", "_lbAvailableLaunchers", "_lbVisibleLaunchers", "_lbMobileRoot", "_lbMobileAvailableLaunchers", "_lbMobileVisibleLaunchers"].includes(noteId);
 }
 

apps/client/src/widgets/note_title.bak

@@ -46,18 +46,6 @@ export default class NoteTitleWidget extends NoteContextAwareWidget {
         });
     }
 
-    async refreshWithNote(note: FNote) {
-        const isReadOnly =
-            (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable())
-            || utils.isLaunchBarConfig(note.noteId)
-            || this.noteContext?.viewScope?.viewMode !== "default";
-
-        this.$noteTitle.val(isReadOnly ? (await this.noteContext?.getNavigationTitle()) || "" : note.title);
-        this.$noteTitle.prop("readonly", isReadOnly);
-
-        this.setProtectedStatus(note);
-    }
-
     async beforeNoteSwitchEvent({ noteContext }: EventData<"beforeNoteSwitch">) {
         if (this.isNoteContext(noteContext.ntxId)) {
             await this.spacedUpdate.updateNowIfNecessary();

apps/client/src/widgets/note_title.tsx

@@ -1,17 +1,36 @@
-import { useRef } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { t } from "../services/i18n";
 import FormTextBox from "./react/FormTextBox";
 import { useNoteContext, useNoteProperty, useSpacedUpdate } from "./react/hooks";
 import protected_session_holder from "../services/protected_session_holder";
 import server from "../services/server";
 import "./note_title.css";
+import { isLaunchBarConfig } from "../services/utils";
 
 export default function NoteTitleWidget() {
-    const { note, noteId, componentId } = useNoteContext();
+    const { note, noteId, componentId, viewScope, noteContext } = useNoteContext();    
     const title = useNoteProperty(note, "title", componentId);    
     const isProtected = useNoteProperty(note, "isProtected");
     const newTitle = useRef("");
 
+    const [ isReadOnly, setReadOnly ] = useState<boolean>(false);
+    const [ navigationTitle, setNavigationTitle ] = useState<string | null>(null);    
+
+    useEffect(() => {
+        const isReadOnly = note === null
+            || note === undefined
+            || (note.isProtected && !protected_session_holder.isProtectedSessionAvailable())
+            || isLaunchBarConfig(note.noteId)
+            || viewScope?.viewMode !== "default";
+        setReadOnly(isReadOnly);
+    }, [ note?.noteId, note?.isProtected, viewScope?.viewMode ]);
+
+    useEffect(() => {
+        if (isReadOnly) {
+            noteContext?.getNavigationTitle().then(setNavigationTitle);
+        }
+    }, [isReadOnly]);
+
     const spacedUpdate = useSpacedUpdate(async () => {
         if (!note) {
             return;
@@ -24,10 +43,11 @@ export default function NoteTitleWidget() {
         <div className="note-title-widget">
             <FormTextBox
                 autocomplete="off"
-                currentValue={title ?? ""}
+                currentValue={(!isReadOnly ? title : navigationTitle) ?? ""}
                 placeholder={t("note_title.placeholder")}
                 className={`note-title ${isProtected ? "protected" : ""}`}
                 tabIndex={100}
+                readOnly={isReadOnly}
                 onChange={(newValue) => {
                     newTitle.current = newValue;
                     spacedUpdate.scheduleUpdate();

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

@@ -259,7 +259,9 @@ export function useNoteContext() {
         notePath: noteContext?.notePath,
         hoistedNoteId: noteContext?.hoistedNoteId,
         ntxId: noteContext?.ntxId,
-        componentId: parentComponent.componentId
+        viewScope: noteContext?.viewScope,
+        componentId: parentComponent.componentId,
+        noteContext: noteContext
     };
 
 }