chore(react/ribbon): change note type

apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "preact/hooks";
+import { useCallback, useMemo } from "preact/hooks";
 import Dropdown from "../react/Dropdown";
 import { NOTE_TYPES } from "../../services/note_types";
 import { FormDivider, FormListBadge, FormListItem } from "../react/FormList";
@@ -6,6 +6,8 @@ import { t } from "../../services/i18n";
 import { useNoteContext, useNoteProperty, useTriliumOption } from "../react/hooks";
 import mime_types from "../../services/mime_types";
 import { NoteType } from "@triliumnext/commons";
+import server from "../../services/server";
+import dialog from "../../services/dialog";
 
 export default function BasicPropertiesTab() {
     return (
@@ -21,53 +23,79 @@ function NoteTypeWidget() {
     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");
+    const currentNoteType = useNoteProperty(note, "type") ?? undefined;
+    const currentNoteMime = useNoteProperty(note, "mime");
+
+    const changeNoteType = useCallback(async (type: NoteType, mime?: string) => {
+        if (!note || (type === currentNoteType && mime === currentNoteMime)) {
+            return;
+        }
+
+        // Confirm change if the note already has a content.
+        if (type !== currentNoteType) {
+            const blob = await note.getBlob();
+
+            if (blob?.content && blob.content.trim().length &&
+                !await (dialog.confirm(t("note_types.confirm-change")))) {
+                return;
+            }
+        }
+
+        await server.put(`notes/${note.noteId}/type`, { type, mime });
+    }, [ note, currentNoteType, currentNoteMime ]);
 
     return (
-        <>
+        <div className="note-type-container">
             <span>{t("basic_properties.note_type")}:</span> &nbsp;
             <Dropdown
                 dropdownContainerClassName="note-type-dropdown"
-                text={<span className="note-type-desc">{findTypeTitle(type, mime)}</span>}
+                text={<span className="note-type-desc">{findTypeTitle(currentNoteType, currentNoteMime)}</span>}
             >
-                {noteTypes.map(noteType => {
+                {noteTypes.map(({ isNew, isBeta, type, mime, title }) => {
                     const badges: FormListBadge[] = [];
-                    if (noteType.isNew) {
+                    if (isNew) {
                         badges.push({
                             className: "new-note-type-badge",
                             text: t("note_types.new-feature")
                         });
                     }
-                    if (noteType.isBeta) {
+                    if (isBeta) {
                         badges.push({
                             text: t("note_types.beta-feature")
                         });
                     }
 
-                    if (noteType.type !== "code") {
+                    const checked = (type === currentNoteType);
+                    if (type !== "code") {
                         return (
                             <FormListItem
+                                checked={checked}
                                 badges={badges}
-                            >{noteType.title}</FormListItem>    
+                                onClick={() => changeNoteType(type, mime)}
+                            >{title}</FormListItem>    
                         );
                     } else {
                         return (
                             <>
                                 <FormDivider />
-                                <FormListItem disabled>
-                                    <strong>{noteType.title}</strong>
+                                <FormListItem
+                                    checked={checked}
+                                    disabled                                    
+                                >
+                                    <strong>{title}</strong>
                                 </FormListItem>
                             </>
                         )
                     }
                 })}
 
-                {mimeTypes.map(mimeType => (
-                    <FormListItem>{mimeType.title}</FormListItem>
+                {mimeTypes.map(({ title, mime }) => (
+                    <FormListItem onClick={() => changeNoteType("code", mime)}>
+                        {title}
+                    </FormListItem>
                 ))}
             </Dropdown>
-        </>
+        </div>
     )   
 }