chore(react/ribbon): display current note type

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) {

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`}

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 (
@@ -19,8 +20,17 @@ function NoteTypeWidget() {
     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">
+        <>
+            <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) {
@@ -57,5 +67,19 @@ function NoteTypeWidget() {
                     <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;
+    }
+}

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>