From 505e364c982ef0dbb2dbfa99b408e134c4ac4f1b Mon Sep 17 00:00:00 2001
From: JuliBot <julibot@julia-kalder.de>
Date: Mon, 18 May 2026 23:06:51 +0000
Subject: [PATCH] fix: extract shared filterTemplates() to eliminate
 duplication

Both popup.js and options.js contained identical filterTemplates()
implementations differing only in CSS selector (.template-item vs
.template-card). Extract to modules/ui-helpers.js as filterTemplateList()
with a selector parameter; each consumer becomes a one-liner wrapper.

Fixes JuliaKalder/TemplateWing#118
---
 modules/ui-helpers.js | 18 ++++++++++++++++++
 options/options.js    | 11 ++---------
 popup/popup.js        | 11 ++---------
 3 files changed, 22 insertions(+), 18 deletions(-)
 create mode 100644 modules/ui-helpers.js

diff --git a/modules/ui-helpers.js b/modules/ui-helpers.js
new file mode 100644
index 0000000..78832bd
--- /dev/null
+++ b/modules/ui-helpers.js
@@ -0,0 +1,18 @@
+/**
+ * Shared UI helpers with no messenger.* dependency.
+ */
+
+/**
+ * Filters a list of template elements by the current search input and category filter.
+ * @param {string} itemSelector - CSS selector for the template items to filter.
+ */
+export function filterTemplateList(itemSelector) {
+  const query = document.getElementById("search-input").value.toLowerCase().trim();
+  const selectedCategory = document.getElementById("category-filter").value.toLowerCase();
+  for (const item of document.querySelectorAll(itemSelector)) {
+    const matchesSearch =
+      !query || item.dataset.name.includes(query) || item.dataset.subject.includes(query);
+    const matchesCategory = !selectedCategory || item.dataset.category === selectedCategory;
+    item.hidden = !(matchesSearch && matchesCategory);
+  }
+}
diff --git a/options/options.js b/options/options.js
index bde9721..b7c3f78 100644
--- a/options/options.js
+++ b/options/options.js
@@ -15,6 +15,7 @@ import {
   ATTACHMENT_WARN_SIZE,
   ATTACHMENT_TOTAL_WARN_SIZE,
 } from "../modules/validation.js";
+import { filterTemplateList } from "../modules/ui-helpers.js";
 
 let editingId = null;
 let pendingAttachments = [];
@@ -877,15 +878,7 @@ async function handleImport(file) {
 }
 
 function filterTemplates() {
-  const query = document.getElementById("search-input").value.toLowerCase().trim();
-  const selectedCategory = document.getElementById("category-filter").value.toLowerCase();
-  const cards = document.querySelectorAll("#template-list .template-card");
-  for (const card of cards) {
-    const matchesSearch =
-      !query || card.dataset.name.includes(query) || card.dataset.subject.includes(query);
-    const matchesCategory = !selectedCategory || card.dataset.category === selectedCategory;
-    card.hidden = !(matchesSearch && matchesCategory);
-  }
+  filterTemplateList("#template-list .template-card");
 }
 
 document.getElementById("search-input").addEventListener("input", filterTemplates);
diff --git a/popup/popup.js b/popup/popup.js
index 63dc0b0..02cfb7d 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -6,6 +6,7 @@ import {
   isTemplateAllowedForIdentity,
 } from "../modules/template-store.js";
 import { insertTemplateIntoTab } from "../modules/template-insert.js";
+import { filterTemplateList } from "../modules/ui-helpers.js";
 
 async function getCurrentIdentityId() {
   try {
@@ -189,15 +190,7 @@ async function insertTemplate(id) {
 }
 
 function filterTemplates() {
-  const query = document.getElementById("search-input").value.toLowerCase().trim();
-  const selectedCategory = document.getElementById("category-filter").value.toLowerCase();
-  const items = document.querySelectorAll("#template-list .template-item");
-  for (const item of items) {
-    const matchesSearch =
-      !query || item.dataset.name.includes(query) || item.dataset.subject.includes(query);
-    const matchesCategory = !selectedCategory || item.dataset.category === selectedCategory;
-    item.hidden = !(matchesSearch && matchesCategory);
-  }
+  filterTemplateList("#template-list .template-item");
 }
 
 async function populateCategoryFilter() {