Single-source combobox markup via <template> cloning

Eliminate the Python/JS class-string duplication: the server renders hidden
<template> prototypes (row, pill, include/exclude/modifier pills) using the same
component functions, and search_select.js clones them, filling only the
[data-ss-label] slot, value, and data-* attrs. All Tailwind class strings and DOM
structure now live solely in the Python components — the JS no longer hardcodes
any class. Pill gains an opt-in label_slot; the shell takes a templates list.

Companion issue #8 tracks the further HTMX-idiomatic step of returning rendered
row HTML from the search endpoint.

https://claude.ai/code/session_01XzhXvMvw42CQGc9kmin3GS

games/static/js/search_select.js

@@ -15,42 +15,15 @@
  * initAll() runs on DOMContentLoaded + htmx:afterSwap, each widget guarded with
  * el._ssInit.
  *
- * The pill / option class strings below are kept byte-identical to the Python
- * Pill / SearchSelect / FilterSelect components so Tailwind generates the classes
- * and server-rendered and JS-created rows/pills are indistinguishable.
+ * Dynamically-added rows and pills are cloned from hidden <template> elements
+ * the server renders with the same Python components (Pill / SearchSelect /
+ * FilterSelect). The JS only fills in the label slot ([data-ss-label]), value,
+ * and data-* attributes — so all markup and Tailwind class strings live in one
+ * place (the Python components), never duplicated here.
  */
 (function () {
   "use strict";
 
-  var PILL_CLASS =
-    "inline-flex items-center gap-1 px-2 py-0.5 text-sm rounded " +
-    "bg-brand/15 text-heading";
-  var PILL_REMOVE_CLASS =
-    "ml-1 text-body hover:text-heading font-bold cursor-pointer";
-  var OPTION_ROW_CLASS =
-    "px-3 py-2 text-sm text-heading cursor-pointer hover:bg-brand/15";
-
-  // Filter-mode class strings — byte-identical to the FilterSelect constants in
-  // common/components/search_select.py.
-  var FILTER_INCLUDE_PILL_CLASS =
-    "inline-flex items-center gap-1 px-2 py-0.5 text-sm rounded " +
-    "bg-brand/15 text-heading";
-  var FILTER_EXCLUDE_PILL_CLASS =
-    "inline-flex items-center gap-1 px-2 py-0.5 text-sm rounded " +
-    "bg-red-500/15 text-red-600 line-through decoration-red-400";
-  var FILTER_MODIFIER_PILL_CLASS =
-    "inline-flex items-center px-2 py-0.5 text-sm rounded " +
-    "bg-amber-500/15 text-amber-600 cursor-pointer";
-  var FILTER_OPTION_ROW_CLASS =
-    "flex items-center justify-between px-2 py-1 rounded text-sm " +
-    "hover:bg-neutral-secondary-strong cursor-pointer";
-  var FILTER_OPTION_LABEL_CLASS = "truncate text-body";
-  var FILTER_OPTION_BUTTONS_CLASS = "flex gap-1 ml-2 shrink-0";
-  var FILTER_ACTION_BUTTON_CLASS =
-    "w-5 h-5 flex items-center justify-center text-xs font-bold rounded text-body " +
-    "border border-brand " +
-    "hover:bg-brand hover:text-white hover:border-brand-strong";
-
   var DEBOUNCE_MS = 500;
 
   function initAll() {
@@ -103,60 +76,38 @@
       showPanel();
     }
 
+    // ── Clone a server-rendered <template> prototype by name. The server emits
+    //    the mode-appropriate prototypes, so the JS never names a class. ──
+    function cloneTemplate(name) {
+      var tpl = container.querySelector('template[data-ss-tpl="' + name + '"]');
+      return tpl ? tpl.content.firstElementChild.cloneNode(true) : null;
+    }
+
+    function setLabel(node, label) {
+      var slot = node.querySelector("[data-ss-label]");
+      if (slot) slot.textContent = label;
+    }
+
+    function applyData(node, data) {
+      data = data || {};
+      Object.keys(data).forEach(function (key) {
+        node.setAttribute("data-" + key, data[key]);
+      });
+    }
+
+    // Build an option row by cloning the "row" template (the same prototype the
+    // server renders, so fetched and pre-rendered rows are identical).
     function buildRow(option) {
-      if (isFilter) return buildFilterOptionRow(option);
-      var row = document.createElement("div");
-      row.setAttribute("data-ss-option", "");
+      var row = cloneTemplate("row");
+      if (!row) return document.createComment("ss-row");
       row.setAttribute("data-value", option.value);
       row.setAttribute("data-label", option.label);
-      row.className = OPTION_ROW_CLASS;
-      var data = option.data || {};
-      Object.keys(data).forEach(function (key) {
-        row.setAttribute("data-" + key, data[key]);
-      });
-      row.textContent = option.label;
+      applyData(row, option.data);
+      setLabel(row, option.label);
       row._ssOption = option;
       return row;
     }
 
-    // ── Filter-mode value row: label + include/exclude buttons (mirrors the
-    //    Python _filter_option_row so fetched and server-rendered rows match). ──
-    function buildFilterOptionRow(option) {
-      var row = document.createElement("div");
-      row.setAttribute("data-ss-option", "");
-      row.setAttribute("data-value", option.value);
-      row.setAttribute("data-label", option.label);
-      row.className = FILTER_OPTION_ROW_CLASS;
-      var data = option.data || {};
-      Object.keys(data).forEach(function (key) {
-        row.setAttribute("data-" + key, data[key]);
-      });
-
-      var labelSpan = document.createElement("span");
-      labelSpan.className = FILTER_OPTION_LABEL_CLASS;
-      labelSpan.textContent = option.label;
-
-      var buttons = document.createElement("span");
-      buttons.className = FILTER_OPTION_BUTTONS_CLASS;
-      buttons.appendChild(buildActionButton("include", "+", "Include"));
-      buttons.appendChild(buildActionButton("exclude", "−", "Exclude"));
-
-      row.appendChild(labelSpan);
-      row.appendChild(buttons);
-      row._ssOption = option;
-      return row;
-    }
-
-    function buildActionButton(action, symbol, title) {
-      var button = document.createElement("button");
-      button.type = "button";
-      button.setAttribute("data-ss-action", action);
-      button.className = FILTER_ACTION_BUTTON_CLASS;
-      button.title = title;
-      button.textContent = symbol;
-      return button;
-    }
-
     // ── Client-side filter of the currently loaded rows. Returns the number of
     //    visible rows so the caller decides whether to show the no-results node. ──
     function filterRows(query) {
@@ -309,32 +260,20 @@
     }
 
     function buildFilterValuePill(option, kind) {
-      var pill = document.createElement("span");
-      pill.className =
-        kind === "include" ? FILTER_INCLUDE_PILL_CLASS : FILTER_EXCLUDE_PILL_CLASS;
-      pill.setAttribute("data-pill", "");
+      var pill = cloneTemplate(kind === "include" ? "pill-include" : "pill-exclude");
       pill.setAttribute("data-value", option.value);
       pill.setAttribute("data-label", option.label);
-      pill.setAttribute("data-ss-type", kind);
-      var data = option.data || {};
-      Object.keys(data).forEach(function (key) {
-        pill.setAttribute("data-" + key, data[key]);
-      });
-      var symbol = kind === "include" ? "✓" : "✗";
-      pill.appendChild(document.createTextNode(symbol + " " + option.label));
-      pill.appendChild(buildRemoveButton());
+      applyData(pill, option.data);
+      setLabel(pill, option.label);
       return pill;
     }
 
     // Set the lone modifier pill, clearing all value pills (mutual exclusivity).
     function setModifier(modifierValue, label) {
       pills.innerHTML = "";
-      var pill = document.createElement("span");
-      pill.className = FILTER_MODIFIER_PILL_CLASS;
-      pill.setAttribute("data-pill", "");
+      var pill = cloneTemplate("pill-modifier");
       pill.setAttribute("data-ss-modifier", modifierValue);
-      pill.appendChild(document.createTextNode(label));
-      pill.appendChild(buildRemoveButton());
+      setLabel(pill, label);
       pills.appendChild(pill);
       container.setAttribute("data-modifier", modifierValue);
       hidePanel();
@@ -347,16 +286,6 @@
       container.removeAttribute("data-modifier");
     }
 
-    function buildRemoveButton() {
-      var remove = document.createElement("button");
-      remove.type = "button";
-      remove.setAttribute("data-pill-remove", "");
-      remove.className = PILL_REMOVE_CLASS;
-      remove.setAttribute("aria-label", "Remove");
-      remove.textContent = "×";
-      return remove;
-    }
-
     function optionFromRow(row) {
       if (row._ssOption) return row._ssOption;
       var data = {};
@@ -391,27 +320,17 @@
     }
 
     function addPill(option) {
-      pills.appendChild(buildPill(option));
+      var pill = buildPill(option);
+      if (pill) pills.appendChild(pill);
       pills.appendChild(buildHidden(option.value));
     }
 
     function buildPill(option) {
-      var pill = document.createElement("span");
-      pill.className = PILL_CLASS;
-      pill.setAttribute("data-pill", "");
+      var pill = cloneTemplate("pill");
+      if (!pill) return null;
       pill.setAttribute("data-value", option.value);
-      var data = option.data || {};
-      Object.keys(data).forEach(function (key) {
-        pill.setAttribute("data-" + key, data[key]);
-      });
-      pill.appendChild(document.createTextNode(option.label));
-      var remove = document.createElement("button");
-      remove.type = "button";
-      remove.setAttribute("data-pill-remove", "");
-      remove.className = PILL_REMOVE_CLASS;
-      remove.setAttribute("aria-label", "Remove");
-      remove.textContent = "×";
-      pill.appendChild(remove);
+      applyData(pill, option.data);
+      setLabel(pill, option.label);
       return pill;
     }