From d2761abd042f71d3dce55d4f0c1ff57b083a98af Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 29 Aug 2025 23:39:40 +0300
Subject: [PATCH 1/2] feat(text_snippets): display actual note icon

---
 apps/client/src/stylesheets/style.css                |  5 +++++
 .../src/widgets/type_widgets/ckeditor/snippets.ts    | 12 ++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index a8a130341..b2604614c 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -982,6 +982,11 @@ div[data-notify="container"] {
     font-family: var(--monospace-font-family);
 }
 
+svg.ck-icon .note-icon {
+    color: var(--main-text-color);
+    font-size: 20px;
+}
+
 .ck-content {
     --ck-content-font-family: var(--detail-font-family);
     --ck-content-font-size: 1.1em;
diff --git a/apps/client/src/widgets/type_widgets/ckeditor/snippets.ts b/apps/client/src/widgets/type_widgets/ckeditor/snippets.ts
index 7c29e58cc..86dc8b077 100644
--- a/apps/client/src/widgets/type_widgets/ckeditor/snippets.ts
+++ b/apps/client/src/widgets/type_widgets/ckeditor/snippets.ts
@@ -4,7 +4,6 @@ import type LoadResults from "../../../services/load_results.js";
 import search from "../../../services/search.js";
 import type { TemplateDefinition } from "@triliumnext/ckeditor5";
 import appContext from "../../../components/app_context.js";
-import TemplateIcon from "@ckeditor/ckeditor5-icons/theme/icons/template.svg?raw";
 import type FNote from "../../../entities/fnote.js";
 
 interface TemplateData {
@@ -31,7 +30,7 @@ export default async function getTemplates() {
         definitions.push({
             title: snippet.title,
             data: () => templateCache.get(snippet.noteId)?.content ?? "",
-            icon: TemplateIcon,
+            icon: buildIcon(snippet),
             description
         });
     }
@@ -49,6 +48,15 @@ async function invalidateCacheFor(snippet: FNote) {
     return data;
 }
 
+function buildIcon(snippet: FNote) {
+    return /*xml*/`\
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <foreignObject x="0" y="0" width="20" height="20">
+    <span class="note-icon ${snippet.getIcon()}" xmlns="http://www.w3.org/1999/xhtml"></span>
+  </foreignObject>
+</svg>`
+}
+
 function handleFullReload() {
     console.warn("Full text editor reload needed");
     appContext.triggerCommand("reloadTextEditor");

From 3f5239706f4e16fcf6c4c94b6caf85bca2d92d87 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 29 Aug 2025 23:41:46 +0300
Subject: [PATCH 2/2] feat(text_snippets): support color class as well

---
 apps/client/src/widgets/type_widgets/ckeditor/snippets.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/type_widgets/ckeditor/snippets.ts b/apps/client/src/widgets/type_widgets/ckeditor/snippets.ts
index 86dc8b077..1c282d5bf 100644
--- a/apps/client/src/widgets/type_widgets/ckeditor/snippets.ts
+++ b/apps/client/src/widgets/type_widgets/ckeditor/snippets.ts
@@ -52,7 +52,7 @@ function buildIcon(snippet: FNote) {
     return /*xml*/`\
 <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
   <foreignObject x="0" y="0" width="20" height="20">
-    <span class="note-icon ${snippet.getIcon()}" xmlns="http://www.w3.org/1999/xhtml"></span>
+    <span class="note-icon ${snippet.getIcon()} ${snippet.getColorClass()}" xmlns="http://www.w3.org/1999/xhtml"></span>
   </foreignObject>
 </svg>`
 }