From 06bfb0073aaa6f5c420d78f7dae2e9bc7ecf9120 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 19 Sep 2025 17:31:10 +0300
Subject: [PATCH] chore(react/type_widget): determine note type

---
 apps/client/src/widgets/NoteDetail.tsx | 65 +++++++++++++++++++++++++-
 apps/client/src/widgets/note_detail.ts | 48 -------------------
 2 files changed, 63 insertions(+), 50 deletions(-)

diff --git a/apps/client/src/widgets/NoteDetail.tsx b/apps/client/src/widgets/NoteDetail.tsx
index d989d7602..c45a11fa7 100644
--- a/apps/client/src/widgets/NoteDetail.tsx
+++ b/apps/client/src/widgets/NoteDetail.tsx
@@ -1,6 +1,67 @@
+import { NoteType } from "@triliumnext/commons";
 import { useNoteContext } from "./react/hooks"
+import FNote from "../entities/fnote";
+import protected_session_holder from "../services/protected_session_holder";
+import { useEffect, useState } from "preact/hooks";
+import NoteContext from "../components/note_context";
+
+/**
+ * A `NoteType` altered by the note detail widget, taking into consideration whether the note is editable or not and adding special note types such as an empty one,
+ * for protected session or attachment information.
+ */
+type ExtendedNoteType = Exclude<NoteType, "launcher" | "text" | "code"> | "empty" | "readOnlyCode" | "readOnlyText" | "editableText" | "editableCode" | "attachmentDetail" | "attachmentList" |  "protectedSession" | "aiChat";
 
 export default function NoteDetail() {
-    const { note } = useNoteContext();
-    return <p>Note detail goes here! {note?.noteId}</p>
+    const { note, type } = useNoteInfo();
+
+    return <p>Note detail goes here! {note?.title} of {type}</p>
+}
+
+/** Manages both note changes and changes to the widget type, which are asynchronous. */
+function useNoteInfo() {
+    const { note: actualNote, noteContext } = useNoteContext();
+    const [ note, setNote ] = useState<FNote | null | undefined>();
+    const [ type, setType ] = useState<ExtendedNoteType>();
+
+    useEffect(() => {
+        getWidgetType(actualNote, noteContext).then(type => {
+            setNote(actualNote);
+            setType(type);
+        });
+    }, [ actualNote, noteContext ]);
+
+    return { note, type };
+}
+
+async function getWidgetType(note: FNote | null | undefined, noteContext: NoteContext | undefined): Promise<ExtendedNoteType> {
+    if (!note) {
+        return "empty";
+    }
+
+    const type = note.type;
+    let resultingType: ExtendedNoteType;
+
+    if (noteContext?.viewScope?.viewMode === "source") {
+        resultingType = "readOnlyCode";
+    } else if (noteContext?.viewScope && noteContext.viewScope.viewMode === "attachments") {
+        resultingType = noteContext.viewScope.attachmentId ? "attachmentDetail" : "attachmentList";
+    } else if (type === "text" && (await noteContext?.isReadOnly())) {
+        resultingType = "readOnlyText";
+    } else if ((type === "code" || type === "mermaid") && (await noteContext?.isReadOnly())) {
+        resultingType = "readOnlyCode";
+    } else if (type === "text") {
+        resultingType = "editableText";
+    } else if (type === "code") {
+        resultingType = "editableCode";
+    } else if (type === "launcher") {
+        resultingType = "doc";
+    } else {
+        resultingType = type;
+    }
+
+    if (note.isProtected && !protected_session_holder.isProtectedSessionAvailable()) {
+        resultingType = "protectedSession";
+    }
+
+    return resultingType;
 }
diff --git a/apps/client/src/widgets/note_detail.ts b/apps/client/src/widgets/note_detail.ts
index bf06e30ab..46372c587 100644
--- a/apps/client/src/widgets/note_detail.ts
+++ b/apps/client/src/widgets/note_detail.ts
@@ -76,21 +76,6 @@ const typeWidgetClasses = {
     mermaid: MermaidTypeWidget
 };
 
-/**
- * A `NoteType` altered by the note detail widget, taking into consideration whether the note is editable or not and adding special note types such as an empty one,
- * for protected session or attachment information.
- */
-type ExtendedNoteType =
-    | Exclude<NoteType, "launcher" | "text" | "code">
-    | "empty"
-    | "readOnlyCode"
-    | "readOnlyText"
-    | "editableText"
-    | "editableCode"
-    | "attachmentDetail"
-    | "attachmentList"
-    | "protectedSession"
-    | "aiChat";
 
 export default class NoteDetailWidget extends NoteContextAwareWidget {
 
@@ -211,40 +196,7 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
         return this.typeWidgets[this.type];
     }
 
-    async getWidgetType(): Promise<ExtendedNoteType> {
-        const note = this.note;
-        if (!note) {
-            return "empty";
-        }
 
-        const type = note.type;
-        let resultingType: ExtendedNoteType;
-        const viewScope = this.noteContext?.viewScope;
-
-        if (viewScope?.viewMode === "source") {
-            resultingType = "readOnlyCode";
-        } else if (viewScope && viewScope.viewMode === "attachments") {
-            resultingType = viewScope.attachmentId ? "attachmentDetail" : "attachmentList";
-        } else if (type === "text" && (await this.noteContext?.isReadOnly())) {
-            resultingType = "readOnlyText";
-        } else if ((type === "code" || type === "mermaid") && (await this.noteContext?.isReadOnly())) {
-            resultingType = "readOnlyCode";
-        } else if (type === "text") {
-            resultingType = "editableText";
-        } else if (type === "code") {
-            resultingType = "editableCode";
-        } else if (type === "launcher") {
-            resultingType = "doc";
-        } else {
-            resultingType = type;
-        }
-
-        if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) {
-            resultingType = "protectedSession";
-        }
-
-        return resultingType;
-    }
 
     async focusOnDetailEvent({ ntxId }: EventData<"focusOnDetail">) {
         if (this.noteContext?.ntxId !== ntxId) {