From e0f6ba808c1d9644446cc4bbb7bf7d80b6f40eb7 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 13 Dec 2025 13:24:32 +0200
Subject: [PATCH] feat(layout/inline-title): template switcher

---
 .../src/translations/en/translation.json      |  3 +-
 .../client/src/widgets/layout/InlineTitle.tsx | 63 +++++++++++++++----
 2 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index f2cceb725..822e7ef92 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1755,7 +1755,8 @@
     "created_on": "Created on <Value />",
     "last_modified": "Last modified on <Value />",
     "note_type_switcher_label": "Switch from {{type}} to:",
-    "note_type_switcher_others": "More note types"
+    "note_type_switcher_others": "More note types",
+    "note_type_switcher_templates": "Templates"
   },
   "search_result": {
     "no_notes_found": "No notes have been found for given search parameters.",
diff --git a/apps/client/src/widgets/layout/InlineTitle.tsx b/apps/client/src/widgets/layout/InlineTitle.tsx
index 0d12e384f..5029a5ebd 100644
--- a/apps/client/src/widgets/layout/InlineTitle.tsx
+++ b/apps/client/src/widgets/layout/InlineTitle.tsx
@@ -6,6 +6,9 @@ import { ComponentChild } from "preact";
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { Trans } from "react-i18next";
 
+import FNote from "../../entities/fnote";
+import attributes from "../../services/attributes";
+import froca from "../../services/froca";
 import { t } from "../../services/i18n";
 import { ViewScope } from "../../services/link";
 import { NOTE_TYPES, NoteTypeMapping } from "../../services/note_types";
@@ -168,24 +171,60 @@ function NoteTypeSwitcher() {
                             onClick={() => switchNoteType(note.noteId, noteType)}
                         />
                     ))}
-                    <BadgeWithDropdown
-                        text={t("note_title.note_type_switcher_others")}
-                        icon="bx bx-dots-vertical-rounded"
-                    >
-                        {restNoteTypes.map(noteType => (
-                            <FormListItem
-                                key={noteType.type}
-                                icon={`bx ${noteType.icon}`}
-                                onClick={() => switchNoteType(note.noteId, noteType)}
-                            >{noteType.title}</FormListItem>
-                        ))}
-                    </BadgeWithDropdown>
+                    <MoreNoteTypes noteId={note.noteId} restNoteTypes={restNoteTypes} />
+                    <TemplateNoteTypes noteId={note.noteId} />
                 </>
             )}
         </div>
     );
 }
 
+function MoreNoteTypes({ noteId, restNoteTypes }: { noteId: string, restNoteTypes: NoteTypeMapping[] }) {
+    return (
+        <BadgeWithDropdown
+            text={t("note_title.note_type_switcher_others")}
+            icon="bx bx-dots-vertical-rounded"
+        >
+            {restNoteTypes.map(noteType => (
+                <FormListItem
+                    key={noteType.type}
+                    icon={`bx ${noteType.icon}`}
+                    onClick={() => switchNoteType(noteId, noteType)}
+                >{noteType.title}</FormListItem>
+            ))}
+        </BadgeWithDropdown>
+    );
+}
+
+function TemplateNoteTypes({ noteId }: { noteId: string }) {
+    const [ templates, setTemplates ] = useState<FNote[]>([]);
+
+    async function refreshTemplates() {
+        const templateNoteIds = await server.get<string[]>("search-templates");
+        const templateNotes = await froca.getNotes(templateNoteIds);
+        setTemplates(templateNotes);
+    }
+
+    useEffect(() => {
+        refreshTemplates();
+    }, []);
+
+    return (
+        <BadgeWithDropdown
+            text={t("note_title.note_type_switcher_templates")}
+            icon="bx bx-copy-alt"
+        >
+            {templates.map(template => (
+                <FormListItem
+                    key={template.noteId}
+                    icon={template.getIcon()}
+                    onClick={() => attributes.setRelation(noteId, "template", template.noteId)}
+                >{template.title}</FormListItem>
+            ))}
+        </BadgeWithDropdown>
+    );
+}
+
 function switchNoteType(noteId: string, { type, mime }: NoteTypeMapping) {
     return server.put(`notes/${noteId}/type`, { type, mime });
 }