From 84cdb2282479b275f18252ac3bd0be9b2d9fc3da Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Sun, 9 Aug 2026 12:16:50 -0400
Subject: [PATCH] Fix unquoted i18n attributes in template literals

---
 shaarli-pro/js/custom_views.js | 194 ++++++++++++++++-----------------
 1 file changed, 97 insertions(+), 97 deletions(-)

diff --git a/shaarli-pro/js/custom_views.js b/shaarli-pro/js/custom_views.js
index 57e25b6..5c36ddd 100644
--- a/shaarli-pro/js/custom_views.js
+++ b/shaarli-pro/js/custom_views.js
@@ -1650,21 +1650,21 @@ function renderBackgroundStudioPanel(panel) {
   panel.innerHTML = `
     <div class="bg-studio-header">
       <div class="bg-studio-title">${title}</div>
-      <button class="bg-studio-close" type="button" data-bg-studio-action="close" title=window.ShaarliProI18n.t("Close") aria-label=window.ShaarliProI18n.t("Close")><i class="mdi mdi-close" aria-hidden="true"></i></button>
+      <button class="bg-studio-close" type="button" data-bg-studio-action="close" title="${window.ShaarliProI18n.t("Close")}" aria-label="${window.ShaarliProI18n.t("Close")}"><i class="mdi mdi-close" aria-hidden="true"></i></button>
     </div>
     <div class="bg-studio-gallery" role="list">${galleryHtml}</div>
     <div class="bg-studio-rows">
       <div class="bg-studio-row">
         <div class="bg-studio-row-heading">
           <div class="bg-studio-row-label">Colors:</div>
-          <button type="button" class="bg-studio-reset" data-bg-studio-action="set-defaults" title=window.ShaarliProI18n.t("Reset") aria-label=window.ShaarliProI18n.t("Reset")><i class="mdi mdi-refresh" aria-hidden="true"></i></button>
+          <button type="button" class="bg-studio-reset" data-bg-studio-action="set-defaults" title="${window.ShaarliProI18n.t("Reset")}" aria-label="${window.ShaarliProI18n.t("Reset")}"><i class="mdi mdi-refresh" aria-hidden="true"></i></button>
         </div>
         <div class="bg-studio-swatches" role="list">${colorsRowHtml}</div>
       </div>
       <div class="bg-studio-row">
         <div class="bg-studio-row-heading">
           <div class="bg-studio-row-label">Font:</div>
-          <button type="button" class="bg-studio-reset" data-bg-studio-action="reset-font-color" title=window.ShaarliProI18n.t("Reset") aria-label=window.ShaarliProI18n.t("Reset")><i class="mdi mdi-refresh" aria-hidden="true"></i></button>
+          <button type="button" class="bg-studio-reset" data-bg-studio-action="reset-font-color" title="${window.ShaarliProI18n.t("Reset")}" aria-label="${window.ShaarliProI18n.t("Reset")}"><i class="mdi mdi-refresh" aria-hidden="true"></i></button>
         </div>
         <div class="bg-studio-swatches bg-studio-swatches-font" role="list">${fontColorsRowHtml}</div>
       </div>
@@ -1675,8 +1675,8 @@ function renderBackgroundStudioPanel(panel) {
     </div>
     <div class="bg-studio-search">
       <i class="mdi mdi-magnify" aria-hidden="true"></i>
-      <input class="bg-studio-search-input" type="search" placeholder=window.ShaarliProI18n.t("Search my images… (filter by color or filter)") value="${panel.dataset.query || ""}" />
-      <button class="bg-studio-clear" type="button" data-bg-studio-action="set-query" title=window.ShaarliProI18n.t("Clear search") aria-label=window.ShaarliProI18n.t("Clear search") style="${showClear ? "" : "display:none"}"><i class="mdi mdi-close-circle-outline" aria-hidden="true"></i></button>
+      <input class="bg-studio-search-input" type="search" placeholder="${window.ShaarliProI18n.t("Search my images… (filter by color or filter)")}" value="${panel.dataset.query || ""}" />
+      <button class="bg-studio-clear" type="button" data-bg-studio-action="set-query" title="${window.ShaarliProI18n.t("Clear search")}" aria-label="${window.ShaarliProI18n.t("Clear search")}" style="${showClear ? "" : "display:none"}"><i class="mdi mdi-close-circle-outline" aria-hidden="true"></i></button>
     </div>
   `;
 
@@ -1994,7 +1994,7 @@ function initTodoView(linkList, container) {
       <div class="note-input-collapsed">
         <span class="note-input-placeholder">${window.ShaarliProI18n.t("Create a task...")}</span>
         <div class="note-input-actions">
-          <button type="button" class="todo-open-draft-btn" title=window.ShaarliProI18n.t("Create a list")><i class="mdi mdi-check-circle-outline"></i></button>
+          <button type="button" class="todo-open-draft-btn" title="${window.ShaarliProI18n.t("Create a list")}"><i class="mdi mdi-check-circle-outline"></i></button>
         </div>
       </div>
     `;
@@ -2006,12 +2006,12 @@ function initTodoView(linkList, container) {
       inputContainer.classList.add("is-editing", "todo-draft-mode");
       inputContainer.innerHTML = `
         <div class="note-input-expanded todo-draft-expanded">
-          <input type="text" class="note-input-title todo-draft-title" placeholder=window.ShaarliProI18n.t("List title") autocomplete="off" />
+          <input type="text" class="note-input-title todo-draft-title" placeholder="${window.ShaarliProI18n.t("List title")}" autocomplete="off" />
           <div class="todo-draft-list" role="list"></div>
           <button type="button" class="todo-draft-add-btn"><i class="mdi mdi-plus"></i> ${window.ShaarliProI18n.t("Add list item")}</button>
           <div class="note-input-expanded-actions">
             <div class="note-input-actions-left">
-              <button type="button" class="note-input-palette-btn" title=window.ShaarliProI18n.t("Color")><i class="mdi mdi-palette-outline"></i></button>
+              <button type="button" class="note-input-palette-btn" title="${window.ShaarliProI18n.t("Color")}"><i class="mdi mdi-palette-outline"></i></button>
             </div>
             <button type="button" class="note-input-close-btn">Fermer</button>
           </div>
@@ -2034,12 +2034,12 @@ function initTodoView(linkList, container) {
         const row = document.createElement("div");
         row.className = "todo-draft-row";
         row.innerHTML = `
-          <label class="todo-checklist-box" title=window.ShaarliProI18n.t("Mark as completed")>
+          <label class="todo-checklist-box" title="${window.ShaarliProI18n.t("Mark as completed")}">
             <input type="checkbox" class="todo-item-checkbox" ${item.checked ? "checked" : ""} />
             <span class="todo-checklist-box-ui"></span>
           </label>
-          <input type="text" class="todo-item-text" placeholder=window.ShaarliProI18n.t("List item") value="${escapeHtml(item.text || "")}" />
-          <button type="button" class="todo-item-delete" title=window.ShaarliProI18n.t("Delete")><i class="mdi mdi-close"></i></button>
+          <input type="text" class="todo-item-text" placeholder="${window.ShaarliProI18n.t("List item")}" value="${escapeHtml(item.text || "")}" />
+          <button type="button" class="todo-item-delete" title="${window.ShaarliProI18n.t("Delete")}"><i class="mdi mdi-close"></i></button>
         `;
         listEl.appendChild(row);
 
@@ -2189,8 +2189,8 @@ function initTodoView(linkList, container) {
   const tools = document.createElement("div");
   tools.className = "notes-tools";
   tools.innerHTML = `
-        <button class="icon-btn active" id="btn-view-grid" title=window.ShaarliProI18n.t("Grid view")><i class="mdi mdi-view-dashboard-outline"></i></button>
-        <button class="icon-btn" id="btn-view-list" title=window.ShaarliProI18n.t("List view")><i class="mdi mdi-view-agenda-outline"></i></button>
+        <button class="icon-btn active" id="btn-view-grid" title="${window.ShaarliProI18n.t("Grid view")}"><i class="mdi mdi-view-dashboard-outline"></i></button>
+        <button class="icon-btn" id="btn-view-list" title="${window.ShaarliProI18n.t("List view")}"><i class="mdi mdi-view-agenda-outline"></i></button>
     `;
   topBar.appendChild(tools);
   wrapper.appendChild(topBar);
@@ -2218,7 +2218,7 @@ function initTodoView(linkList, container) {
         <div class="note-modal note-color-default todo-modal">
             <div class="note-modal-header">
                 <h2 class="note-title" id="todo-modal-title"></h2>
-                <button type="button" class="note-modal-pin-toggle" id="todo-modal-pin" title=window.ShaarliProI18n.t("Pin")>
+                <button type="button" class="note-modal-pin-toggle" id="todo-modal-pin" title="${window.ShaarliProI18n.t("Pin")}">
                     <i class="mdi mdi-pin-outline"></i>
                 </button>
             </div>
@@ -2230,11 +2230,11 @@ function initTodoView(linkList, container) {
             <div class="note-modal-actions">
                 <div class="note-modal-actions-left">
                     <div class="note-modal-color-picker">
-                        <button type="button" id="todo-modal-color-btn" title=window.ShaarliProI18n.t("Color")><i class="mdi mdi-palette-outline"></i></button>
+                        <button type="button" id="todo-modal-color-btn" title="${window.ShaarliProI18n.t("Color")}"><i class="mdi mdi-palette-outline"></i></button>
                         <div class="palette-popup note-modal-palette" id="todo-modal-color-popup"></div>
                     </div>
-                    <a href="#" id="todo-modal-edit" title=window.ShaarliProI18n.t("Edit")><i class="mdi mdi-pencil-outline"></i></a>
-                    <button type="button" id="todo-modal-delete" title=window.ShaarliProI18n.t("Delete")><i class="mdi mdi-delete-outline"></i></button>
+                    <a href="#" id="todo-modal-edit" title="${window.ShaarliProI18n.t("Edit")}"><i class="mdi mdi-pencil-outline"></i></a>
+                    <button type="button" id="todo-modal-delete" title="${window.ShaarliProI18n.t("Delete")}"><i class="mdi mdi-delete-outline"></i></button>
                 </div>
                 <button type="button" class="note-modal-close-btn" id="todo-modal-close">Fermer</button>
             </div>
@@ -2808,11 +2808,11 @@ function renderTodos(container, todos, viewMode) {
 
     actions.innerHTML = `
             <div style="position:relative;">
-                <button title=window.ShaarliProI18n.t("Color") id="${paletteBtnId}"><i class="mdi mdi-palette-outline"></i></button>
+                <button title="${window.ShaarliProI18n.t("Color")}" id="${paletteBtnId}"><i class="mdi mdi-palette-outline"></i></button>
             </div>
             <div class="spacer"></div>
-            <a href="${todo.editUrl}" title=window.ShaarliProI18n.t("Edit")><i class="mdi mdi-pencil-outline"></i></a>
-            <button title=window.ShaarliProI18n.t("Delete") class="todo-delete-btn"><i class="mdi mdi-delete-outline"></i></button>
+            <a href="${todo.editUrl}" title="${window.ShaarliProI18n.t("Edit")}"><i class="mdi mdi-pencil-outline"></i></a>
+            <button title="${window.ShaarliProI18n.t("Delete")}" class="todo-delete-btn"><i class="mdi mdi-delete-outline"></i></button>
         `;
 
     const deleteBtn = actions.querySelector(".todo-delete-btn");
@@ -2978,13 +2978,13 @@ function renderTodoModalChecklist(modal, todo) {
     row.setAttribute("draggable", "true");
     row.classList.toggle("is-checked", !!item.checked);
     row.innerHTML = `
-      <button type="button" class="todo-drag-handle" aria-label=window.ShaarliProI18n.t("Move")><i class="mdi mdi-dots-grid"></i></button>
+      <button type="button" class="todo-drag-handle" aria-label="${window.ShaarliProI18n.t("Move")}"><i class="mdi mdi-dots-grid"></i></button>
       <label class="todo-checklist-box">
         <input type="checkbox" class="todo-item-checkbox" ${item.checked ? "checked" : ""}>
         <span class="todo-checklist-box-ui"></span>
       </label>
       <input type="text" class="todo-item-text" value="${escapeHtml(item.text || "")}" placeholder="">
-      <button type="button" class="todo-item-delete" aria-label=window.ShaarliProI18n.t("Delete")><i class="mdi mdi-close"></i></button>
+      <button type="button" class="todo-item-delete" aria-label="${window.ShaarliProI18n.t("Delete")}"><i class="mdi mdi-close"></i></button>
     `;
 
     const cb = row.querySelector(".todo-item-checkbox");
@@ -3313,7 +3313,7 @@ function initNoteView(linkList, container) {
         <div class="note-input-collapsed">
             <span class="note-input-placeholder">${window.ShaarliProI18n.t("Create a note...")}</span>
             <div class="note-input-actions note-input-type-actions">
-                <button type="button" class="note-create-note-btn" title=window.ShaarliProI18n.t("Create a note")><i class="mdi mdi-note-outline"></i></button>
+                <button type="button" class="note-create-note-btn" title="${window.ShaarliProI18n.t("Create a note")}"><i class="mdi mdi-note-outline"></i></button>
             </div>
         </div>
     `;
@@ -3326,12 +3326,12 @@ function initNoteView(linkList, container) {
         inputContainer.classList.add("is-editing", "todo-draft-mode");
         inputContainer.innerHTML = `
           <div class="note-input-expanded todo-draft-expanded">
-            <input type="text" class="note-input-title todo-draft-title" placeholder=window.ShaarliProI18n.t("List title") autocomplete="off" />
+            <input type="text" class="note-input-title todo-draft-title" placeholder="${window.ShaarliProI18n.t("List title")}" autocomplete="off" />
             <div class="todo-draft-list" role="list"></div>
             <button type="button" class="todo-draft-add-btn"><i class="mdi mdi-plus"></i> ${window.ShaarliProI18n.t("Add list item")}</button>
             <div class="note-input-expanded-actions">
               <div class="note-input-actions-left">
-                <button type="button" class="note-input-palette-btn" title=window.ShaarliProI18n.t("Color")><i class="mdi mdi-palette-outline"></i></button>
+                <button type="button" class="note-input-palette-btn" title="${window.ShaarliProI18n.t("Color")}"><i class="mdi mdi-palette-outline"></i></button>
               </div>
               <button type="button" class="note-input-close-btn">Fermer</button>
             </div>
@@ -3354,12 +3354,12 @@ function initNoteView(linkList, container) {
           const row = document.createElement("div");
           row.className = "todo-draft-row";
           row.innerHTML = `
-            <label class="todo-checklist-box" title=window.ShaarliProI18n.t("Mark as completed")>
+            <label class="todo-checklist-box" title="${window.ShaarliProI18n.t("Mark as completed")}">
               <input type="checkbox" class="todo-item-checkbox" ${item.checked ? "checked" : ""} />
               <span class="todo-checklist-box-ui"></span>
             </label>
-            <input type="text" class="todo-item-text" placeholder=window.ShaarliProI18n.t("List item") value="${escapeHtml(item.text || "")}" />
-            <button type="button" class="todo-item-delete" title=window.ShaarliProI18n.t("Delete")><i class="mdi mdi-close"></i></button>
+            <input type="text" class="todo-item-text" placeholder="${window.ShaarliProI18n.t("List item")}" value="${escapeHtml(item.text || "")}" />
+            <button type="button" class="todo-item-delete" title="${window.ShaarliProI18n.t("Delete")}"><i class="mdi mdi-close"></i></button>
           `;
           listEl.appendChild(row);
 
@@ -3495,33 +3495,33 @@ function initNoteView(linkList, container) {
       inputContainer.classList.add("is-editing");
       inputContainer.innerHTML = `
         <div class="note-input-expanded">
-          <input type="text" class="note-input-title" placeholder=window.ShaarliProI18n.t("Title") />
-          <textarea class="note-input-description-source" rows="8" placeholder=window.ShaarliProI18n.t("Write your note in Markdown...")></textarea>
+          <input type="text" class="note-input-title" placeholder="${window.ShaarliProI18n.t("Title")}" />
+          <textarea class="note-input-description-source" rows="8" placeholder="${window.ShaarliProI18n.t("Write your note in Markdown...")}"></textarea>
           <div class="note-formatting-bar" aria-hidden="true">
-            <button type="button" class="note-format-btn" data-note-format="h1" title=window.ShaarliProI18n.t("Heading 1")>H1</button>
-            <button type="button" class="note-format-btn" data-note-format="h2" title=window.ShaarliProI18n.t("Heading 2")>H2</button>
-            <button type="button" class="note-format-btn" data-note-format="h3" title=window.ShaarliProI18n.t("Heading 3")>H3</button>
-            <button type="button" class="note-format-btn" data-note-format="p" title=window.ShaarliProI18n.t("Text")>Aa</button>
+            <button type="button" class="note-format-btn" data-note-format="h1" title="${window.ShaarliProI18n.t("Heading 1")}">H1</button>
+            <button type="button" class="note-format-btn" data-note-format="h2" title="${window.ShaarliProI18n.t("Heading 2")}">H2</button>
+            <button type="button" class="note-format-btn" data-note-format="h3" title="${window.ShaarliProI18n.t("Heading 3")}">H3</button>
+            <button type="button" class="note-format-btn" data-note-format="p" title="${window.ShaarliProI18n.t("Text")}">Aa</button>
             <span class="note-format-sep" aria-hidden="true"></span>
-            <button type="button" class="note-format-btn" data-note-format="bold" title=window.ShaarliProI18n.t("Bold")><b>B</b></button>
-            <button type="button" class="note-format-btn" data-note-format="italic" title=window.ShaarliProI18n.t("Italic")><i>I</i></button>
-            <button type="button" class="note-format-btn" data-note-format="underline" title=window.ShaarliProI18n.t("Underline")><u>U</u></button>
-            <button type="button" class="note-format-btn" data-note-format="strike" title=window.ShaarliProI18n.t("Strikethrough")><s>S</s></button>
-            <button type="button" class="note-format-btn" data-note-format="code" title=window.ShaarliProI18n.t("Inline code")><i class="mdi mdi-code-tags"></i></button>
+            <button type="button" class="note-format-btn" data-note-format="bold" title="${window.ShaarliProI18n.t("Bold")}"><b>B</b></button>
+            <button type="button" class="note-format-btn" data-note-format="italic" title="${window.ShaarliProI18n.t("Italic")}"><i>I</i></button>
+            <button type="button" class="note-format-btn" data-note-format="underline" title="${window.ShaarliProI18n.t("Underline")}"><u>U</u></button>
+            <button type="button" class="note-format-btn" data-note-format="strike" title="${window.ShaarliProI18n.t("Strikethrough")}"><s>S</s></button>
+            <button type="button" class="note-format-btn" data-note-format="code" title="${window.ShaarliProI18n.t("Inline code")}"><i class="mdi mdi-code-tags"></i></button>
             <span class="note-format-sep" aria-hidden="true"></span>
-            <button type="button" class="note-format-btn" data-note-format="ul" title=window.ShaarliProI18n.t("Bulleted list")><i class="mdi mdi-format-list-bulleted"></i></button>
-            <button type="button" class="note-format-btn" data-note-format="ol" title=window.ShaarliProI18n.t("Numbered list")><i class="mdi mdi-format-list-numbered"></i></button>
-            <button type="button" class="note-format-btn" data-note-format="todo" title=window.ShaarliProI18n.t("Checklist")><i class="mdi mdi-format-list-checks"></i></button>
-            <button type="button" class="note-format-btn" data-note-format="quote" title=window.ShaarliProI18n.t("Quote")><i class="mdi mdi-format-quote-open"></i></button>
-            <button type="button" class="note-format-btn" data-note-format="link" title=window.ShaarliProI18n.t("Link")><i class="mdi mdi-link-variant"></i></button>
-            <button type="button" class="note-format-btn" data-note-format="image" title=window.ShaarliProI18n.t("Image")><i class="mdi mdi-image-outline"></i></button>
-            <button type="button" class="note-format-btn" data-note-format="codeblock" title=window.ShaarliProI18n.t("Code block")><i class="mdi mdi-code-braces"></i></button>
-            <button type="button" class="note-format-btn" data-note-format="clear" title=window.ShaarliProI18n.t("Clear formatting")>X</button>
+            <button type="button" class="note-format-btn" data-note-format="ul" title="${window.ShaarliProI18n.t("Bulleted list")}"><i class="mdi mdi-format-list-bulleted"></i></button>
+            <button type="button" class="note-format-btn" data-note-format="ol" title="${window.ShaarliProI18n.t("Numbered list")}"><i class="mdi mdi-format-list-numbered"></i></button>
+            <button type="button" class="note-format-btn" data-note-format="todo" title="${window.ShaarliProI18n.t("Checklist")}"><i class="mdi mdi-format-list-checks"></i></button>
+            <button type="button" class="note-format-btn" data-note-format="quote" title="${window.ShaarliProI18n.t("Quote")}"><i class="mdi mdi-format-quote-open"></i></button>
+            <button type="button" class="note-format-btn" data-note-format="link" title="${window.ShaarliProI18n.t("Link")}"><i class="mdi mdi-link-variant"></i></button>
+            <button type="button" class="note-format-btn" data-note-format="image" title="${window.ShaarliProI18n.t("Image")}"><i class="mdi mdi-image-outline"></i></button>
+            <button type="button" class="note-format-btn" data-note-format="codeblock" title="${window.ShaarliProI18n.t("Code block")}"><i class="mdi mdi-code-braces"></i></button>
+            <button type="button" class="note-format-btn" data-note-format="clear" title="${window.ShaarliProI18n.t("Clear formatting")}">X</button>
           </div>
           <div class="note-input-expanded-actions">
             <div class="note-input-actions-left">
-              <button type="button" class="note-input-format-btn" title=window.ShaarliProI18n.t("Formatting options")><i class="mdi mdi-format-text"></i></button>
-              <button type="button" class="note-input-palette-btn" title=window.ShaarliProI18n.t("Color")><i class="mdi mdi-palette-outline"></i></button>
+              <button type="button" class="note-input-format-btn" title="${window.ShaarliProI18n.t("Formatting options")}"><i class="mdi mdi-format-text"></i></button>
+              <button type="button" class="note-input-palette-btn" title="${window.ShaarliProI18n.t("Color")}"><i class="mdi mdi-palette-outline"></i></button>
             </div>
             <button type="button" class="note-input-close-btn">Fermer</button>
           </div>
@@ -3670,8 +3670,8 @@ function initNoteView(linkList, container) {
   const tools = document.createElement("div");
   tools.className = "notes-tools";
   tools.innerHTML = `
-        <button class="icon-btn active" id="btn-view-grid" title=window.ShaarliProI18n.t("Grid view")><i class="mdi mdi-view-dashboard-outline"></i></button>
-        <button class="icon-btn" id="btn-view-list" title=window.ShaarliProI18n.t("List view")><i class="mdi mdi-view-agenda-outline"></i></button>
+        <button class="icon-btn active" id="btn-view-grid" title="${window.ShaarliProI18n.t("Grid view")}"><i class="mdi mdi-view-dashboard-outline"></i></button>
+        <button class="icon-btn" id="btn-view-list" title="${window.ShaarliProI18n.t("List view")}"><i class="mdi mdi-view-agenda-outline"></i></button>
     `;
   topBar.appendChild(tools);
 
@@ -3718,50 +3718,50 @@ function initNoteView(linkList, container) {
   modalOverlay.innerHTML = `
         <div class="note-modal" role="dialog" aria-modal="true">
             <div class="note-modal-header">
-                <input type="text" class="note-title note-modal-title-input" id="note-modal-title" placeholder=window.ShaarliProI18n.t("Title") />
-                <button type="button" class="note-modal-pin-toggle" id="note-modal-pin" title=window.ShaarliProI18n.t("Pin")>
+                <input type="text" class="note-title note-modal-title-input" id="note-modal-title" placeholder="${window.ShaarliProI18n.t("Title")}" />
+                <button type="button" class="note-modal-pin-toggle" id="note-modal-pin" title="${window.ShaarliProI18n.t("Pin")}">
                     <i class="mdi mdi-pin-outline"></i>
                 </button>
             </div>
             <div class="note-modal-content">
-                <div class="note-modal-description-preview note-body" id="note-modal-description-preview" role="button" tabindex="0" aria-label=window.ShaarliProI18n.t("Click to edit")></div>
+                <div class="note-modal-description-preview note-body" id="note-modal-description-preview" role="button" tabindex="0" aria-label="${window.ShaarliProI18n.t("Click to edit")}"></div>
                 <textarea class="note-modal-description-source" id="note-modal-description-source" rows="8"></textarea>
                 <div class="note-formatting-bar" id="note-modal-formatting" aria-hidden="true">
-                    <button type="button" class="note-format-btn" data-note-format="h1" title=window.ShaarliProI18n.t("Heading 1")>H1</button>
-                    <button type="button" class="note-format-btn" data-note-format="h2" title=window.ShaarliProI18n.t("Heading 2")>H2</button>
-                    <button type="button" class="note-format-btn" data-note-format="h3" title=window.ShaarliProI18n.t("Heading 3")>H3</button>
-                    <button type="button" class="note-format-btn" data-note-format="p" title=window.ShaarliProI18n.t("Text")>Aa</button>
+                    <button type="button" class="note-format-btn" data-note-format="h1" title="${window.ShaarliProI18n.t("Heading 1")}">H1</button>
+                    <button type="button" class="note-format-btn" data-note-format="h2" title="${window.ShaarliProI18n.t("Heading 2")}">H2</button>
+                    <button type="button" class="note-format-btn" data-note-format="h3" title="${window.ShaarliProI18n.t("Heading 3")}">H3</button>
+                    <button type="button" class="note-format-btn" data-note-format="p" title="${window.ShaarliProI18n.t("Text")}">Aa</button>
                     <span class="note-format-sep" aria-hidden="true"></span>
-                    <button type="button" class="note-format-btn" data-note-format="bold" title=window.ShaarliProI18n.t("Bold")><b>B</b></button>
-                    <button type="button" class="note-format-btn" data-note-format="italic" title=window.ShaarliProI18n.t("Italic")><i>I</i></button>
-                    <button type="button" class="note-format-btn" data-note-format="underline" title=window.ShaarliProI18n.t("Underline")><u>U</u></button>
-                    <button type="button" class="note-format-btn" data-note-format="strike" title=window.ShaarliProI18n.t("Strikethrough")><s>S</s></button>
-                    <button type="button" class="note-format-btn" data-note-format="code" title=window.ShaarliProI18n.t("Inline code")><i class="mdi mdi-code-tags"></i></button>
+                    <button type="button" class="note-format-btn" data-note-format="bold" title="${window.ShaarliProI18n.t("Bold")}"><b>B</b></button>
+                    <button type="button" class="note-format-btn" data-note-format="italic" title="${window.ShaarliProI18n.t("Italic")}"><i>I</i></button>
+                    <button type="button" class="note-format-btn" data-note-format="underline" title="${window.ShaarliProI18n.t("Underline")}"><u>U</u></button>
+                    <button type="button" class="note-format-btn" data-note-format="strike" title="${window.ShaarliProI18n.t("Strikethrough")}"><s>S</s></button>
+                    <button type="button" class="note-format-btn" data-note-format="code" title="${window.ShaarliProI18n.t("Inline code")}"><i class="mdi mdi-code-tags"></i></button>
                     <span class="note-format-sep" aria-hidden="true"></span>
-                    <button type="button" class="note-format-btn" data-note-format="ul" title=window.ShaarliProI18n.t("Bulleted list")><i class="mdi mdi-format-list-bulleted"></i></button>
-                    <button type="button" class="note-format-btn" data-note-format="ol" title=window.ShaarliProI18n.t("Numbered list")><i class="mdi mdi-format-list-numbered"></i></button>
-                    <button type="button" class="note-format-btn" data-note-format="todo" title=window.ShaarliProI18n.t("Checklist")><i class="mdi mdi-format-list-checks"></i></button>
-                    <button type="button" class="note-format-btn" data-note-format="quote" title=window.ShaarliProI18n.t("Quote")><i class="mdi mdi-format-quote-open"></i></button>
-                    <button type="button" class="note-format-btn" data-note-format="link" title=window.ShaarliProI18n.t("Link")><i class="mdi mdi-link-variant"></i></button>
-                    <button type="button" class="note-format-btn" data-note-format="image" title=window.ShaarliProI18n.t("Image")><i class="mdi mdi-image-outline"></i></button>
-                    <button type="button" class="note-format-btn" data-note-format="codeblock" title=window.ShaarliProI18n.t("Code block")><i class="mdi mdi-code-braces"></i></button>
-                    <button type="button" class="note-format-btn" data-note-format="clear" title=window.ShaarliProI18n.t("Clear formatting")>X</button>
+                    <button type="button" class="note-format-btn" data-note-format="ul" title="${window.ShaarliProI18n.t("Bulleted list")}"><i class="mdi mdi-format-list-bulleted"></i></button>
+                    <button type="button" class="note-format-btn" data-note-format="ol" title="${window.ShaarliProI18n.t("Numbered list")}"><i class="mdi mdi-format-list-numbered"></i></button>
+                    <button type="button" class="note-format-btn" data-note-format="todo" title="${window.ShaarliProI18n.t("Checklist")}"><i class="mdi mdi-format-list-checks"></i></button>
+                    <button type="button" class="note-format-btn" data-note-format="quote" title="${window.ShaarliProI18n.t("Quote")}"><i class="mdi mdi-format-quote-open"></i></button>
+                    <button type="button" class="note-format-btn" data-note-format="link" title="${window.ShaarliProI18n.t("Link")}"><i class="mdi mdi-link-variant"></i></button>
+                    <button type="button" class="note-format-btn" data-note-format="image" title="${window.ShaarliProI18n.t("Image")}"><i class="mdi mdi-image-outline"></i></button>
+                    <button type="button" class="note-format-btn" data-note-format="codeblock" title="${window.ShaarliProI18n.t("Code block")}"><i class="mdi mdi-code-braces"></i></button>
+                    <button type="button" class="note-format-btn" data-note-format="clear" title="${window.ShaarliProI18n.t("Clear formatting")}">X</button>
                 </div>
             </div>
             <div class="note-modal-tags is-empty" id="note-modal-tags"></div>
             <div class="note-modal-actions">
                 <div class="note-modal-actions-left">
                     <div class="note-modal-color-picker">
-                        <button type="button" id="note-modal-color-btn" title=window.ShaarliProI18n.t("Color")><i class="mdi mdi-palette-outline"></i></button>
+                        <button type="button" id="note-modal-color-btn" title="${window.ShaarliProI18n.t("Color")}"><i class="mdi mdi-palette-outline"></i></button>
                         <div class="palette-popup note-modal-palette" id="note-modal-color-popup"></div>
                     </div>
-                    <button type="button" id="note-modal-format-btn" title=window.ShaarliProI18n.t("Formatting options")><i class="mdi mdi-format-text"></i></button>
-                    <button type="button" title=window.ShaarliProI18n.t("Reminder")><i class="mdi mdi-bell-outline"></i></button>
-                    <button type="button" title=window.ShaarliProI18n.t("Collaborator")><i class="mdi mdi-account-plus-outline"></i></button>
-                    <button type="button" title=window.ShaarliProI18n.t("Image")><i class="mdi mdi-image-outline"></i></button>
-                    <button type="button" id="note-modal-archive" title=window.ShaarliProI18n.t("Archive")><i class="mdi mdi-archive-arrow-down-outline"></i></button>
-                    <a href="#" id="note-modal-edit" title=window.ShaarliProI18n.t("Edit")><i class="mdi mdi-pencil-outline"></i></a>
-                    <button type="button" id="note-modal-delete" title=window.ShaarliProI18n.t("Delete")><i class="mdi mdi-delete-outline"></i></button>
+                    <button type="button" id="note-modal-format-btn" title="${window.ShaarliProI18n.t("Formatting options")}"><i class="mdi mdi-format-text"></i></button>
+                    <button type="button" title="${window.ShaarliProI18n.t("Reminder")}"><i class="mdi mdi-bell-outline"></i></button>
+                    <button type="button" title="${window.ShaarliProI18n.t("Collaborator")}"><i class="mdi mdi-account-plus-outline"></i></button>
+                    <button type="button" title="${window.ShaarliProI18n.t("Image")}"><i class="mdi mdi-image-outline"></i></button>
+                    <button type="button" id="note-modal-archive" title="${window.ShaarliProI18n.t("Archive")}"><i class="mdi mdi-archive-arrow-down-outline"></i></button>
+                    <a href="#" id="note-modal-edit" title="${window.ShaarliProI18n.t("Edit")}"><i class="mdi mdi-pencil-outline"></i></a>
+                    <button type="button" id="note-modal-delete" title="${window.ShaarliProI18n.t("Delete")}"><i class="mdi mdi-delete-outline"></i></button>
                 </div>
                 <button type="button" class="note-modal-close-btn" id="note-modal-close">Fermer</button>
             </div>
@@ -3958,8 +3958,8 @@ function initArchiveView(linkList, container) {
   const tools = document.createElement("div");
   tools.className = "notes-tools";
   tools.innerHTML = `
-        <button class="icon-btn active" id="btn-view-grid" title=window.ShaarliProI18n.t("Grid view")><i class="mdi mdi-view-dashboard-outline"></i></button>
-        <button class="icon-btn" id="btn-view-list" title=window.ShaarliProI18n.t("List view")><i class="mdi mdi-view-agenda-outline"></i></button>
+        <button class="icon-btn active" id="btn-view-grid" title="${window.ShaarliProI18n.t("Grid view")}"><i class="mdi mdi-view-dashboard-outline"></i></button>
+        <button class="icon-btn" id="btn-view-list" title="${window.ShaarliProI18n.t("List view")}"><i class="mdi mdi-view-agenda-outline"></i></button>
     `;
   topBar.appendChild(tools);
 
@@ -3995,7 +3995,7 @@ function initArchiveView(linkList, container) {
         <div class="note-modal note-color-default">
             <div class="note-modal-header">
                 <h2 class="note-title" id="note-modal-title"></h2>
-                <button type="button" class="note-modal-pin-toggle" id="note-modal-pin" title=window.ShaarliProI18n.t("Pin")>
+                <button type="button" class="note-modal-pin-toggle" id="note-modal-pin" title="${window.ShaarliProI18n.t("Pin")}">
                     <i class="mdi mdi-pin-outline"></i>
                 </button>
             </div>
@@ -4004,15 +4004,15 @@ function initArchiveView(linkList, container) {
             <div class="note-modal-actions">
                 <div class="note-modal-actions-left">
                     <div class="note-modal-color-picker">
-                        <button type="button" id="note-modal-color-btn" title=window.ShaarliProI18n.t("Color")><i class="mdi mdi-palette-outline"></i></button>
+                        <button type="button" id="note-modal-color-btn" title="${window.ShaarliProI18n.t("Color")}"><i class="mdi mdi-palette-outline"></i></button>
                         <div class="palette-popup note-modal-palette" id="note-modal-color-popup"></div>
                     </div>
-                    <button type="button" title=window.ShaarliProI18n.t("Reminder")><i class="mdi mdi-bell-outline"></i></button>
-                    <button type="button" title=window.ShaarliProI18n.t("Collaborator")><i class="mdi mdi-account-plus-outline"></i></button>
-                    <button type="button" title=window.ShaarliProI18n.t("Image")><i class="mdi mdi-image-outline"></i></button>
-                    <button type="button" id="note-modal-unarchive" title=window.ShaarliProI18n.t("Unarchive")><i class="mdi mdi-archive-arrow-up-outline"></i></button>
-                    <a href="#" id="note-modal-edit" title=window.ShaarliProI18n.t("Edit")><i class="mdi mdi-pencil-outline"></i></a>
-                    <button type="button" id="note-modal-delete" title=window.ShaarliProI18n.t("Delete")><i class="mdi mdi-delete-outline"></i></button>
+                    <button type="button" title="${window.ShaarliProI18n.t("Reminder")}"><i class="mdi mdi-bell-outline"></i></button>
+                    <button type="button" title="${window.ShaarliProI18n.t("Collaborator")}"><i class="mdi mdi-account-plus-outline"></i></button>
+                    <button type="button" title="${window.ShaarliProI18n.t("Image")}"><i class="mdi mdi-image-outline"></i></button>
+                    <button type="button" id="note-modal-unarchive" title="${window.ShaarliProI18n.t("Unarchive")}"><i class="mdi mdi-archive-arrow-up-outline"></i></button>
+                    <a href="#" id="note-modal-edit" title="${window.ShaarliProI18n.t("Edit")}"><i class="mdi mdi-pencil-outline"></i></a>
+                    <button type="button" id="note-modal-delete" title="${window.ShaarliProI18n.t("Delete")}"><i class="mdi mdi-delete-outline"></i></button>
                 </div>
                 <button type="button" class="note-modal-close-btn" id="note-modal-close">Fermer</button>
             </div>
@@ -4325,17 +4325,17 @@ function renderNotes(container, notes, viewMode, isArchiveMode = false) {
     const archiveBtnId = `archive-${note.id}`;
 
     actions.innerHTML = `
-            <button title=window.ShaarliProI18n.t("Reminder")><i class="mdi mdi-bell-outline"></i></button>
-            <button title=window.ShaarliProI18n.t("Collaborator")><i class="mdi mdi-account-plus-outline"></i></button>
+            <button title="${window.ShaarliProI18n.t("Reminder")}"><i class="mdi mdi-bell-outline"></i></button>
+            <button title="${window.ShaarliProI18n.t("Collaborator")}"><i class="mdi mdi-account-plus-outline"></i></button>
             <div style="position:relative;">
-                <button title=window.ShaarliProI18n.t("Color") id="${paletteBtnId}"><i class="mdi mdi-palette-outline"></i></button>
+                <button title="${window.ShaarliProI18n.t("Color")}" id="${paletteBtnId}"><i class="mdi mdi-palette-outline"></i></button>
             </div>
-            <button title=window.ShaarliProI18n.t("Image")><i class="mdi mdi-image-outline"></i></button>
-            <button title=window.ShaarliProI18n.t("Archive") id="${archiveBtnId}"><i class="mdi mdi-archive-arrow-down-outline"></i></button>
+            <button title="${window.ShaarliProI18n.t("Image")}"><i class="mdi mdi-image-outline"></i></button>
+            <button title="${window.ShaarliProI18n.t("Archive")}" id="${archiveBtnId}"><i class="mdi mdi-archive-arrow-down-outline"></i></button>
             <div class="spacer"></div>
             <!-- Real Actions -->
-            <button type="button" class="note-open-editor-btn" title=window.ShaarliProI18n.t("Edit")><i class="mdi mdi-pencil-outline"></i></button>
-            <button title=window.ShaarliProI18n.t("Delete") class="note-delete-btn"><i class="mdi mdi-delete-outline"></i></button>
+            <button type="button" class="note-open-editor-btn" title="${window.ShaarliProI18n.t("Edit")}"><i class="mdi mdi-pencil-outline"></i></button>
+            <button title="${window.ShaarliProI18n.t("Delete")}" class="note-delete-btn"><i class="mdi mdi-delete-outline"></i></button>
         `;
 
     const deleteBtn = actions.querySelector(".note-delete-btn");
@@ -5497,7 +5497,7 @@ function openColorPickerPanel({ mode, entityId, editUrl, type }) {
   panel.innerHTML = `
     <div class="color-picker-header">
       <div class="color-picker-title">${type === "font" ? "Couleur du texte" : window.ShaarliProI18n.t("Custom color")}</div>
-      <button class="color-picker-close" type="button" data-color-picker-action="close" title=window.ShaarliProI18n.t("Close") aria-label=window.ShaarliProI18n.t("Close")><i class="mdi mdi-close" aria-hidden="true"></i></button>
+      <button class="color-picker-close" type="button" data-color-picker-action="close" title="${window.ShaarliProI18n.t("Close")}" aria-label="${window.ShaarliProI18n.t("Close")}"><i class="mdi mdi-close" aria-hidden="true"></i></button>
     </div>
     <div class="color-picker-body">
       <div class="color-picker-gradient">