extension/sidebar/components/TaskCategoryGroup.js

export function TaskCategoryGroup(title, items) {
  const safeItems = items.length
    ? items.map((item) => `<li><label><input type="checkbox" checked /> ${escapeHtml(item)}</label></li>`).join("")
    : `<li class="muted">No tasks in this category yet.</li>`;
  return `
    <div class="category-group">
      <p class="group-title">${escapeHtml(title)}</p>
      <ul>
        ${safeItems}
      </ul>
    </div>
  `;
}

function escapeHtml(value) {
  return String(value)
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#39;");
}