From c0beab8a5db7574d3795adbaf565d34221308f4f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 21 Aug 2025 20:38:19 +0300
Subject: [PATCH] chore(react/ribbon): display current note type

---
 apps/client/src/widgets/note_type.ts          | 15 +--
 apps/client/src/widgets/react/Dropdown.tsx    | 10 +-
 .../src/widgets/ribbon/BasicPropertiesTab.tsx | 98 ++++++++++++-------
 .../ribbon_widgets/basic_properties.ts        |  2 +-
 4 files changed, 70 insertions(+), 55 deletions(-)

diff --git a/apps/client/src/widgets/note_type.ts b/apps/client/src/widgets/note_type.ts
index cb1d53bb3..fe45fa233 100644
--- a/apps/client/src/widgets/note_type.ts
+++ b/apps/client/src/widgets/note_type.ts
@@ -14,8 +14,7 @@ const NOT_SELECTABLE_NOTE_TYPES = NOTE_TYPES.filter((nt) => nt.reserved || nt.st
 const TPL = /*html*/`
 <div class="dropdown note-type-widget">
     <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle select-button note-type-button">
-        <span class="note-type-desc"></span>
-        <span class="caret"></span>
+        <span class=""></span>
     </button>
 </div>
 `;
@@ -36,7 +35,6 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
 
         this.$noteTypeDropdown = this.$widget.find(".note-type-dropdown");
         this.$noteTypeButton = this.$widget.find(".note-type-button");
-        this.$noteTypeDesc = this.$widget.find(".note-type-desc");
 
         this.$widget.on("click", ".dropdown-item", () => this.dropdown.toggle());
     }
@@ -105,18 +103,7 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
         }
     }
 
-    async findTypeTitle(type: NoteType, mime: string) {
-        if (type === "code") {
-            const mimeTypes = mimeTypesService.getMimeTypes();
-            const found = mimeTypes.find((mt) => mt.mime === mime);
 
-            return found ? found.title : mime;
-        } else {
-            const noteType = NOTE_TYPES.find((nt) => nt.type === type);
-
-            return noteType ? noteType.title : type;
-        }
-    }
 
     async save(type: NoteType, mime?: string) {
         if (type === this.note?.type && mime === this.note?.mime) {
diff --git a/apps/client/src/widgets/react/Dropdown.tsx b/apps/client/src/widgets/react/Dropdown.tsx
index 49a1ac228..2578aec31 100644
--- a/apps/client/src/widgets/react/Dropdown.tsx
+++ b/apps/client/src/widgets/react/Dropdown.tsx
@@ -14,9 +14,10 @@ interface DropdownProps {
     dropdownContainerClassName?: string;
     hideToggleArrow?: boolean;
     disabled?: boolean;
+    text?: ComponentChildren;
 }
 
-export default function Dropdown({ className, buttonClassName, isStatic, children, title, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, disabled }: DropdownProps) {
+export default function Dropdown({ className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, disabled }: DropdownProps) {
     const dropdownRef = useRef<HTMLDivElement | null>(null);
     const triggerRef = useRef<HTMLButtonElement | null>(null);
 
@@ -56,7 +57,7 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre
     return (
         <div ref={dropdownRef} class={`dropdown ${className ?? ""}`} style={{ display: "flex" }}>
             <button
-                className={`btn ${buttonClassName ?? ""} ${!hideToggleArrow ? "dropdown-toggle" : ""}`}
+                className={`btn select-button ${buttonClassName ?? ""} ${!hideToggleArrow ? "dropdown-toggle" : ""}`}
                 ref={triggerRef}
                 type="button"
                 data-bs-toggle="dropdown"
@@ -66,7 +67,10 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre
                 title={title}
                 id={ariaId}
                 disabled={disabled}
-            />
+            >
+                {text}
+                <span className="caret"></span>
+            </button>
 
             <div
                 class={`dropdown-menu ${isStatic ? "static" : ""} ${dropdownContainerClassName ?? ""} tn-dropdown-list`}
diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
index e24bec3a8..7e18f49ba 100644
--- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
+++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
@@ -1,10 +1,11 @@
-import { useCallback, useMemo } from "preact/hooks";
+import { useMemo } from "preact/hooks";
 import Dropdown from "../react/Dropdown";
 import { NOTE_TYPES } from "../../services/note_types";
 import { FormDivider, FormListBadge, FormListItem } from "../react/FormList";
 import { t } from "../../services/i18n";
-import { useTriliumOption } from "../react/hooks";
+import { useNoteContext, useNoteProperty, useTriliumOption } from "../react/hooks";
 import mime_types from "../../services/mime_types";
+import { NoteType } from "@triliumnext/commons";
 
 export default function BasicPropertiesTab() {
     return (
@@ -18,44 +19,67 @@ function NoteTypeWidget() {
     const noteTypes = useMemo(() => NOTE_TYPES.filter((nt) => !nt.reserved && !nt.static), []);
     const [ codeNotesMimeTypes ] = useTriliumOption("codeNotesMimeTypes");
     const mimeTypes = useMemo(() => mime_types.getMimeTypes().filter(mimeType => mimeType.enabled), [ codeNotesMimeTypes ]);
+    
+    const { note } = useNoteContext();
+    const type = useNoteProperty(note, "type") ?? undefined;
+    const mime = useNoteProperty(note, "mime");
 
     return (
-        <Dropdown dropdownContainerClassName="note-type-dropdown">
-            {noteTypes.map(noteType => {
-                const badges: FormListBadge[] = [];
-                if (noteType.isNew) {
-                    badges.push({
-                        className: "new-note-type-badge",
-                        text: t("note_types.new-feature")
-                    });
-                }
-                if (noteType.isBeta) {
-                    badges.push({
-                        text: t("note_types.beta-feature")
-                    });
-                }
+        <>
+            <span>{t("basic_properties.note_type")}:</span> &nbsp;
+            <Dropdown
+                dropdownContainerClassName="note-type-dropdown"
+                text={<span className="note-type-desc">{findTypeTitle(type, mime)}</span>}
+            >
+                {noteTypes.map(noteType => {
+                    const badges: FormListBadge[] = [];
+                    if (noteType.isNew) {
+                        badges.push({
+                            className: "new-note-type-badge",
+                            text: t("note_types.new-feature")
+                        });
+                    }
+                    if (noteType.isBeta) {
+                        badges.push({
+                            text: t("note_types.beta-feature")
+                        });
+                    }
 
-                if (noteType.type !== "code") {
-                    return (
-                        <FormListItem
-                            badges={badges}
-                        >{noteType.title}</FormListItem>    
-                    );
-                } else {
-                    return (
-                        <>
-                            <FormDivider />
-                            <FormListItem disabled>
-                                <strong>{noteType.title}</strong>
-                            </FormListItem>
-                        </>
-                    )
-                }
-            })}
+                    if (noteType.type !== "code") {
+                        return (
+                            <FormListItem
+                                badges={badges}
+                            >{noteType.title}</FormListItem>    
+                        );
+                    } else {
+                        return (
+                            <>
+                                <FormDivider />
+                                <FormListItem disabled>
+                                    <strong>{noteType.title}</strong>
+                                </FormListItem>
+                            </>
+                        )
+                    }
+                })}
 
-            {mimeTypes.map(mimeType => (
-                <FormListItem>{mimeType.title}</FormListItem>
-            ))}
-        </Dropdown>
+                {mimeTypes.map(mimeType => (
+                    <FormListItem>{mimeType.title}</FormListItem>
+                ))}
+            </Dropdown>
+        </>
     )   
+}
+
+function findTypeTitle(type?: NoteType, mime?: string) {
+    if (type === "code") {
+        const mimeTypes = mime_types.getMimeTypes();
+        const found = mimeTypes.find((mt) => mt.mime === mime);
+
+        return found ? found.title : mime;
+    } else {
+        const noteType = NOTE_TYPES.find((nt) => nt.type === type);
+
+        return noteType ? noteType.title : type;
+    }
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts
index 603dee60f..e5f2ca8a2 100644
--- a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts
+++ b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts
@@ -11,7 +11,7 @@ import NoteLanguageWidget from "../note_language.js";
 
 const TPL = /*html*/`
     <div class="note-type-container">
-        <span>${t("basic_properties.note_type")}:</span> &nbsp;
+
     </div>
 
     <div class="protected-note-switch-container"></div>