add: template editor label

addon/chrome/content/templateEditor.xhtml

@@ -97,7 +97,7 @@
         padding: 5px;
       }
       .list-viewport {
-        width: calc(20% - 10px);
+        width: calc(30% - 10px);
         height: 100%;
         overflow: hidden;
       }
@@ -118,7 +118,7 @@
       .preview-viewport {
         display: flex;
         flex-direction: column;
-        width: calc(40% - 10px);
+        width: calc(30% - 10px);
         padding: 5px;
       }
       .markdown-body {

addon/locale/en-US/addon.ftl

@@ -18,7 +18,22 @@ menuEditor-resizeImage = Resize Image
 
 menuHelp-openUserGuide = Open Better Notes User Guide
 
-templateEditor-templateName = Template Name
+templateEditor-templateType = Type
+templateEditor-templateName = Name
+
+templateEditor-templateDisplayName =
+    .QuickInsertV2 = Quick Insert (Link)
+    .QuickImportV2 = Quick Import (Embed)
+    .QuickNoteV5 = Quick Note (From Annotation)
+    .ExportMDFileNameV2 = Export MD File Name
+    .ExportMDFileHeaderV2 = Export MD File Header
+    .ExportMDFileContent = Export MD File Content
+
+templateEditor-templateDisplayType =
+    .system = Builtin
+    .item = Item
+    .text = Text
+    .unknown = ?
 
 editor-resizeImage-title = Resize Image
 editor-resizeImage-prompt = Resize image width to:

addon/locale/it-IT/addon.ftl

@@ -18,7 +18,22 @@ menuEditor-resizeImage = Ridimensiona immagine
 
 menuHelp-openUserGuide = Open Better Notes User Guide
 
-templateEditor-templateName = Template Name
+templateEditor-templateType = Type
+templateEditor-templateName = Name
+
+templateEditor-templateDisplayName =
+    .QuickInsertV2 = Quick Insert (Link)
+    .QuickImportV2 = Quick Import (Embed)
+    .QuickNoteV5 = Quick Note (From Annotation)
+    .ExportMDFileNameV2 = Export MD File Name
+    .ExportMDFileHeaderV2 = Export MD File Header
+    .ExportMDFileContent = Export MD File Content
+
+templateEditor-templateDisplayType =
+    .system = Builtin
+    .item = Item
+    .text = Text
+    .unknown = ?
 
 syncManager-noteName = Nome nota
 syncManager-lastSync = Ultima sincronizzazione

addon/locale/ru-RU/addon.ftl

@@ -18,7 +18,22 @@ menuEditor-resizeImage=Изменить размер изображения
 
 menuHelp-openUserGuide = Open Better Notes User Guide
 
-templateEditor-templateName = Template Name
+templateEditor-templateType = Type
+templateEditor-templateName = Name
+
+templateEditor-templateDisplayName =
+    .QuickInsertV2 = Quick Insert (Link)
+    .QuickImportV2 = Quick Import (Embed)
+    .QuickNoteV5 = Quick Note (From Annotation)
+    .ExportMDFileNameV2 = Export MD File Name
+    .ExportMDFileHeaderV2 = Export MD File Header
+    .ExportMDFileContent = Export MD File Content
+
+templateEditor-templateDisplayType =
+    .system = Builtin
+    .item = Item
+    .text = Text
+    .unknown = ?
 
 editor-resizeImage-title = Resize Image
 editor-resizeImage-prompt = Resize image width to:

addon/locale/tr-TR/addon.ftl

@@ -18,7 +18,22 @@ menuEditor-resizeImage = Resmi Boyutlandır
 
 menuHelp-openUserGuide = Better Notes Kullanıcı Rehberini Aç
 
-templateEditor-templateName = Şablon Adı
+templateEditor-templateType = Type
+templateEditor-templateName = Name
+
+templateEditor-templateDisplayName =
+    .QuickInsertV2 = Quick Insert (Link)
+    .QuickImportV2 = Quick Import (Embed)
+    .QuickNoteV5 = Quick Note (From Annotation)
+    .ExportMDFileNameV2 = Export MD File Name
+    .ExportMDFileHeaderV2 = Export MD File Header
+    .ExportMDFileContent = Export MD File Content
+
+templateEditor-templateDisplayType =
+    .system = Builtin
+    .item = Item
+    .text = Text
+    .unknown = ?
 
 editor-resizeImage-title = Resmi Boyutlandır
 editor-resizeImage-prompt = Resmi Şuna Boyutlandır:

addon/locale/zh-CN/addon.ftl

@@ -18,7 +18,22 @@ menuEditor-resizeImage=缩放图片
 
 menuHelp-openUserGuide = 打开Better Notes用户指南
 
-templateEditor-templateName = 模板名称
+templateEditor-templateType = 类型
+templateEditor-templateName = 名称
+
+templateEditor-templateDisplayName =
+    .QuickInsertV2 = Quick Insert (插入链接)
+    .QuickImportV2 = Quick Import (嵌入链接笔记)
+    .QuickNoteV5 = Quick Note (从批注创建笔记)
+    .ExportMDFileNameV2 = Export MD File Name (导出MD文件名)
+    .ExportMDFileHeaderV2 = Export MD File Header (导出MD头)
+    .ExportMDFileContent = Export MD File Content (导出MD正文)
+
+templateEditor-templateDisplayType =
+    .system = Builtin
+    .item = Item
+    .text = Text
+    .unknown = ?
 
 editor-resizeImage-title = 缩放图片
 editor-resizeImage-prompt = 缩放图片宽度为：

src/modules/template/data.ts

@@ -3,7 +3,6 @@ export { SYSTEM_TEMPLATE_NAMES, DEFAULT_TEMPLATES };
 
 const SYSTEM_TEMPLATE_NAMES = [
   "[QuickInsertV2]",
-  "[QuickBackLinkV2]",
   "[QuickImportV2]",
   "[QuickNoteV5]",
   "[ExportMDFileNameV2]",
@@ -19,15 +18,6 @@ const DEFAULT_TEMPLATES = <NoteTemplate[]>[
   <a href="\${link}">
     \${linkText}
   </a>
-</p>`,
-  },
-  {
-    name: "[QuickBackLinkV2]",
-    text: `<p>
-  Referred in
-  <a href="\${link}">
-    \${linkText}
-  </a>
 </p>`,
   },
   {

src/modules/template/editorWindow.ts

@@ -32,6 +32,12 @@ export async function showTemplateEditor() {
         // Do not use setLocale, as it modifies the Zotero.Intl.strings
         // Set locales directly to columns
         columns: [
+          {
+            dataKey: "type",
+            label: "templateEditor-templateType",
+            width: 60,
+            fixedWidth: true,
+          },
           {
             dataKey: "name",
             label: "templateEditor-templateName",
@@ -48,9 +54,7 @@ export async function showTemplateEditor() {
         disableFontSizeScaling: true,
       })
       .setProp("getRowCount", () => addon.data.template.editor.templates.length)
-      .setProp("getRowData", (index) => ({
-        name: addon.data.template.editor.templates[index] || "no data",
-      }))
+      .setProp("getRowData", getRowData)
       .setProp("onSelectionChange", (selection) => {
         updateEditor();
         updatePreview();
@@ -70,6 +74,40 @@ export async function showTemplateEditor() {
         "getRowString",
         (index) => addon.data.template.editor.templates[index] || "",
       )
+      .setProp("renderItem", (index, selection, oldElem, columns) => {
+        let div;
+        if (oldElem) {
+          div = oldElem;
+          div.innerHTML = "";
+        } else {
+          div = document.createElement("div");
+          div.className = "row";
+        }
+
+        div.classList.toggle("selected", selection.isSelected(index));
+        div.classList.toggle("focused", selection.focused == index);
+        const rowData = getRowData(index);
+
+        for (const column of columns) {
+          const span = document.createElement("span");
+          // @ts-ignore
+          span.className = `cell ${column?.className}`;
+          const cellData = rowData[column.dataKey as keyof typeof rowData];
+          span.textContent = cellData;
+          if (column.dataKey === "type") {
+            span.style.backgroundColor = getRowLabelColor(cellData);
+            span.style.borderRadius = "4px";
+            span.style.paddingInline = "4px";
+            span.style.textAlign = "center";
+            span.textContent = getString(
+              "templateEditor-templateDisplayType",
+              cellData,
+            );
+          }
+          div.append(span);
+        }
+        return div;
+      })
       .render();
     _window.document
       .querySelector("#create")
@@ -145,6 +183,43 @@ async function refresh() {
   await updatePreview();
 }
 
+function getRowData(index: number) {
+  const rowData = addon.data.template.editor.templates[index];
+  let templateType = "unknown";
+  let templateDisplayName = rowData;
+  if (addon.api.template.SYSTEM_TEMPLATE_NAMES.includes(rowData)) {
+    templateType = "system";
+    templateDisplayName = getString(
+      "templateEditor-templateDisplayName",
+      // Exclude the first and last character, which are '[' and ']'
+      rowData.slice(1, -1),
+    );
+  } else if (rowData.toLowerCase().startsWith("[item]")) {
+    templateType = "item";
+    templateDisplayName = rowData.slice(6);
+  } else if (rowData.toLowerCase().startsWith("[text]")) {
+    templateType = "text";
+    templateDisplayName = rowData.slice(6);
+  }
+  return {
+    name: templateDisplayName,
+    type: templateType,
+  };
+}
+
+function getRowLabelColor(type: string) {
+  switch (type) {
+    case "system":
+      return "var(--accent-yellow)";
+    case "item":
+      return "var(--accent-green)";
+    case "text":
+      return "var(--accent-azure)";
+    default:
+      return "var(--accent-red)";
+  }
+}
+
 function updateData() {
   addon.data.template.editor.templates = addon.api.template.getTemplateKeys();
 }

src/utils/locale.ts

@@ -83,7 +83,13 @@ function _getString(
     return localStringWithPrefix;
   }
   if (branch && pattern.attributes) {
-    return pattern.attributes[branch] || localStringWithPrefix;
+    return (
+      pattern.attributes[branch] ||
+      pattern.attributes.find(
+        (attr: { name: string; value: string }) => attr.name === branch,
+      )?.value ||
+      localStringWithPrefix
+    );
   } else {
     return pattern.value || localStringWithPrefix;
   }