chore(react/note_title): bring back styles

apps/client/src/widgets/note_title.bak

@@ -9,36 +9,6 @@ import shortcutService from "../services/shortcuts.js";
 import utils from "../services/utils.js";
 import type FNote from "../entities/fnote.js";
 
-const TPL = /*html*/`
-<div class="note-title-widget">
-    <style>
-    .note-title-widget {
-        flex-grow: 1000;
-        height: 100%;
-    }
-
-    .note-title-widget input.note-title {
-        font-size: 110%;
-        border: 0;
-        margin: 2px 0px;
-        min-width: 5em;
-        width: 100%;
-    }
-
-    body.mobile .note-title-widget input.note-title {
-        padding: 0;
-    }
-
-    body.desktop .note-title-widget input.note-title {
-        font-size: 180%;
-    }
-
-    .note-title-widget input.note-title.protected {
-        text-shadow: 4px 4px 4px var(--muted-text-color);
-    }
-    </style>
-</div>`;
-
 export default class NoteTitleWidget extends NoteContextAwareWidget {
 
     private $noteTitle!: JQuery<HTMLElement>;
@@ -48,10 +18,6 @@ export default class NoteTitleWidget extends NoteContextAwareWidget {
     constructor() {
         super();
 
-        this.spacedUpdate = new SpacedUpdate(async () => {
-            
-        });
-
         this.deleteNoteOnEscape = false;
 
         appContext.addBeforeUnloadListener(this);
@@ -92,10 +58,6 @@ export default class NoteTitleWidget extends NoteContextAwareWidget {
         this.setProtectedStatus(note);
     }
 
-    setProtectedStatus(note: FNote) {
-        this.$noteTitle.toggleClass("protected", !!note.isProtected);
-    }
-
     async beforeNoteSwitchEvent({ noteContext }: EventData<"beforeNoteSwitch">) {
         if (this.isNoteContext(noteContext.ntxId)) {
             await this.spacedUpdate.updateNowIfNecessary();
@@ -122,17 +84,6 @@ export default class NoteTitleWidget extends NoteContextAwareWidget {
         }
     }
 
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.isNoteReloaded(this.noteId) && this.note) {
-            // not updating the title specifically since the synced title might be older than what the user is currently typing
-            this.setProtectedStatus(this.note);
-        }
-
-        if (loadResults.isNoteReloaded(this.noteId, this.componentId)) {
-            this.refresh();
-        }
-    }
-
     beforeUnloadEvent() {
         return this.spacedUpdate.isAllSavedAndTriggerUpdate();
     }

apps/client/src/widgets/note_title.css

@@ -0,0 +1,24 @@
+.note-title-widget {
+    flex-grow: 1000;
+    height: 100%;
+}
+
+.note-title-widget input.note-title {
+    font-size: 110%;
+    border: 0;
+    margin: 2px 0px;
+    min-width: 5em;
+    width: 100%;
+}
+
+.note-title-widget input.note-title.protected {
+    text-shadow: 4px 4px 4px var(--muted-text-color);
+}
+
+body.mobile .note-title-widget input.note-title {
+    padding: 0;
+}
+
+body.desktop .note-title-widget input.note-title {
+    font-size: 180%;
+}

apps/client/src/widgets/note_title.tsx

@@ -1,14 +1,17 @@
 import { useEffect, useRef, useState } from "preact/hooks";
 import { t } from "../services/i18n";
 import FormTextBox from "./react/FormTextBox";
-import { useNoteContext, useSpacedUpdate } from "./react/hooks";
+import { useNoteContext, useSpacedUpdate, useTriliumEventBeta } from "./react/hooks";
 import protected_session_holder from "../services/protected_session_holder";
 import server from "../services/server";
+import "./note_title.css";
 
 export default function NoteTitleWidget() {
     const { note, noteId, componentId } = useNoteContext();
     const [ title, setTitle ] = useState(note?.title);
-    useEffect(() => setTitle(note?.title), [ note?.title ]);
+    const [ isProtected, setProtected ] = useState(note?.isProtected);
+    useEffect(() => setTitle(note?.title), [ note?.noteId ]);
+    useEffect(() => setProtected(note?.isProtected), [ note?.isProtected ]);
 
     const spacedUpdate = useSpacedUpdate(async () => {
         if (!note) {
@@ -18,19 +21,28 @@ export default function NoteTitleWidget() {
         await server.put<void>(`notes/${noteId}/title`, { title: title }, componentId);
     });    
 
+    useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => {        
+        if (loadResults.isNoteReloaded(noteId) && note) {
+            setProtected(note.isProtected);
+        }
+        if (loadResults.isNoteReloaded(noteId, componentId)) {
+            setTitle(note?.title);
+        }
+    });
+
     return (
-        <>
+        <div className="note-title-widget">
             <FormTextBox
                 autocomplete="off"
                 currentValue={title}
                 placeholder={t("note_title.placeholder")}
-                className="note-title"
+                className={`note-title ${isProtected ? "protected" : ""}`}
                 tabIndex={100}
                 onChange={(newValue) => {
                     setTitle(newValue);
                     spacedUpdate.scheduleUpdate();
                 }}
             />
-        </>
+        </div>
     );
 }