Remove the bespoke SelectableFilter widget

FilterSelect fully replaces it: delete SelectableFilter and its _selectable_*
helpers, the now-unused _get_filter_options, selectable_filter.js, and the .sf-*
rules in input.css (rebuilt base.css). The three list views load search_select.js
instead of selectable_filter.js. Drop the SelectableFilter export and refresh
docs/comments that referenced it.

https://claude.ai/code/session_01XzhXvMvw42CQGc9kmin3GS

games/static/base.css

@@ -4429,171 +4429,6 @@ form input:disabled, select:disabled, textarea:disabled {
     padding: calc(var(--spacing) * 4);
   }
 }
-.sf-container {
-  border-radius: var(--radius-base);
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--color-default-medium);
-  background-color: var(--color-neutral-secondary-medium);
-}
-.sf-selected {
-  display: flex;
-  min-height: 2rem;
-  flex-wrap: wrap;
-  gap: calc(var(--spacing) * 1);
-  padding: calc(var(--spacing) * 2);
-}
-.sf-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: calc(var(--spacing) * 1);
-  border-radius: var(--radius);
-  background-color: color-mix(in srgb, oklch(48.8% 0.243 264.376) 15%, transparent);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--color-brand) 15%, transparent);
-  }
-  padding-inline: calc(var(--spacing) * 2);
-  padding-block: calc(var(--spacing) * 0.5);
-  font-size: var(--text-sm);
-  line-height: var(--tw-leading, var(--text-sm--line-height));
-  color: var(--color-heading);
-}
-.sf-tag.sf-excluded {
-  background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 15%, transparent);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--color-red-500) 15%, transparent);
-  }
-  color: var(--color-red-600);
-  text-decoration-line: line-through;
-  text-decoration-color: var(--color-red-400);
-}
-.sf-remove {
-  margin-left: calc(var(--spacing) * 1);
-  cursor: pointer;
-  --tw-font-weight: var(--font-weight-bold);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-body);
-  &:hover {
-    @media (hover: hover) {
-      color: var(--color-heading);
-    }
-  }
-}
-.sf-modifier-tag {
-  display: inline-flex;
-  cursor: pointer;
-  align-items: center;
-  border-radius: var(--radius);
-  background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 15%, transparent);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent);
-  }
-  padding-inline: calc(var(--spacing) * 2);
-  padding-block: calc(var(--spacing) * 0.5);
-  font-size: var(--text-sm);
-  line-height: var(--tw-leading, var(--text-sm--line-height));
-  color: var(--color-amber-600);
-}
-.sf-search {
-  display: block;
-  width: 100%;
-  border-style: var(--tw-border-style);
-  border-width: 0px;
-  border-top-style: var(--tw-border-style);
-  border-top-width: 1px;
-  border-color: var(--color-default-medium);
-  background-color: transparent;
-  padding: calc(var(--spacing) * 2);
-  font-size: var(--text-sm);
-  line-height: var(--tw-leading, var(--text-sm--line-height));
-  color: var(--color-heading);
-  &:focus {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    --tw-outline-style: none;
-    outline-style: none;
-    @media (forced-colors: active) {
-      outline: 2px solid transparent;
-      outline-offset: 2px;
-    }
-  }
-}
-.sf-options {
-  max-height: calc(var(--spacing) * 40);
-  overflow-y: auto;
-  padding: calc(var(--spacing) * 1);
-  color: var(--color-body);
-}
-.sf-option {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: var(--radius);
-  padding-inline: calc(var(--spacing) * 2);
-  padding-block: calc(var(--spacing) * 1);
-  font-size: var(--text-sm);
-  line-height: var(--tw-leading, var(--text-sm--line-height));
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--color-neutral-secondary-strong);
-    }
-  }
-}
-.sf-option-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.sf-option-buttons {
-  margin-left: calc(var(--spacing) * 2);
-  display: flex;
-  flex-shrink: 0;
-  gap: calc(var(--spacing) * 1);
-}
-.sf-btn-include, .sf-btn-exclude {
-  display: flex;
-  height: calc(var(--spacing) * 5);
-  width: calc(var(--spacing) * 5);
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius);
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--color-default-medium);
-  font-size: var(--text-xs);
-  line-height: var(--tw-leading, var(--text-xs--line-height));
-  --tw-font-weight: var(--font-weight-bold);
-  font-weight: var(--font-weight-bold);
-  &:hover {
-    @media (hover: hover) {
-      border-color: var(--color-brand);
-    }
-  }
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--color-brand);
-    }
-  }
-  &:hover {
-    @media (hover: hover) {
-      color: var(--color-white);
-    }
-  }
-}
-.sf-modifier-option {
-  cursor: pointer;
-  padding-inline: calc(var(--spacing) * 2);
-  padding-block: calc(var(--spacing) * 1);
-  font-size: var(--text-sm);
-  line-height: var(--tw-leading, var(--text-sm--line-height));
-  color: var(--color-body);
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--color-neutral-secondary-strong);
-    }
-  }
-}
 @layer base {
   input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select {
     appearance: none;

games/static/js/search_select.js

@@ -12,8 +12,8 @@
  * pills. Filter widgets have no hidden inputs; readSearchSelect serialises their
  * state into data-included / data-excluded / data-modifier for the filter bar.
  *
- * Mirrors selectable_filter.js: initAll() on DOMContentLoaded + htmx:afterSwap,
- * each widget guarded with el._ssInit.
+ * 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
@@ -496,8 +496,8 @@
 
   // Serialise each widget's current state onto data-* attributes for the caller.
   // Form widgets expose data-values (the submitted hidden-input values); filter
-  // widgets (parallel to readSelectableFilters) expose data-included /
-  // data-excluded / data-modifier for the filter bar to read.
+  // widgets expose data-included / data-excluded / data-modifier for the filter
+  // bar to read.
   window.readSearchSelect = function (form) {
     form.querySelectorAll("[data-search-select]").forEach(function (container) {
       var pills = container.querySelector("[data-ss-pills]");

games/static/js/selectable_filter.js

@@ -1,149 +0,0 @@
-/**
- * SelectableFilter widget — Stash-style choice filter with search,
- * include/exclude buttons, and modifier tags (Any / None).
- */
-(function () {
-  "use strict";
-
-  function initAll() {
-    document.querySelectorAll("[data-selectable-filter]").forEach(function (el) {
-      if (el._sfInit) return;
-      el._sfInit = true;
-      initWidget(el);
-    });
-  }
-
-  function initWidget(container) {
-    var search = container.querySelector(".sf-search");
-    var options = container.querySelector(".sf-options");
-    var selectedArea = container.querySelector(".sf-selected");
-
-    if (!search || !options || !selectedArea) return;
-
-    // ── Search ──
-    search.addEventListener("input", function () {
-      var q = search.value.toLowerCase();
-      options.querySelectorAll(".sf-option").forEach(function (item) {
-        var label = (item.getAttribute("data-label") || "").toLowerCase();
-        item.style.display = label.indexOf(q) !== -1 ? "" : "none";
-      });
-    });
-
-    // ── Include / Exclude clicks ──
-    options.addEventListener("click", function (e) {
-      var btn = e.target.closest("button");
-      if (btn) {
-        var action = btn.getAttribute("data-action");
-        var itemEl = btn.closest(".sf-option");
-        if (!itemEl) return;
-        var value = itemEl.getAttribute("data-value");
-        var label = itemEl.getAttribute("data-label");
-        if (!value) return;
-        if (action === "include") addTag(container, value, label, "include");
-        else if (action === "exclude") addTag(container, value, label, "exclude");
-        return;
-      }
-
-      // Click on modifier option (not a button)
-      var modOption = e.target.closest(".sf-modifier-option");
-      if (modOption) {
-        var modVal = modOption.getAttribute("data-modifier");
-        setModifier(container, modVal);
-      }
-    });
-
-    // ── Remove selected tag ──
-    selectedArea.addEventListener("click", function (e) {
-      var removeBtn = e.target.closest(".sf-remove");
-      if (removeBtn) {
-        removeBtn.closest(".sf-tag").remove();
-        return;
-      }
-
-      // Click on active modifier tag → deselect it
-      var modTag = e.target.closest(".sf-modifier-tag");
-      if (modTag) {
-        clearModifier(container);
-      }
-    });
-  }
-
-  /** Add a tag to the selected area and clear modifier. */
-  function addTag(container, value, label, type) {
-    clearModifier(container);
-    var selectedArea = container.querySelector(".sf-selected");
-
-    // Check if already present
-    var existing = selectedArea.querySelector('.sf-tag[data-value="' + value + '"]');
-    if (existing) {
-      if (existing.getAttribute("data-type") !== type) {
-        existing.setAttribute("data-type", type);
-        existing.classList.toggle("sf-excluded", type === "exclude");
-        var text = existing.querySelector(".sf-tag-text");
-        if (text) text.textContent = (type === "exclude" ? "✗ " : "✓ ") + label;
-      }
-      return;
-    }
-
-    var tag = document.createElement("span");
-    tag.className = "sf-tag" + (type === "exclude" ? " sf-excluded" : "");
-    tag.setAttribute("data-value", value);
-    tag.setAttribute("data-type", type);
-    tag.innerHTML =
-      '<span class="sf-tag-text">' + (type === "exclude" ? "✗ " : "✓ ") + label + "</span>" +
-      '<button type="button" class="sf-remove" aria-label="Remove">×</button>';
-    selectedArea.appendChild(tag);
-  }
-
-  /** Set a modifier (Any / None) — clears all tags. */
-  function setModifier(container, modVal) {
-    var selectedArea = container.querySelector(".sf-selected");
-
-    // Clear all tags
-    selectedArea.querySelectorAll(".sf-tag").forEach(function (t) { t.remove(); });
-
-    // Clear existing modifier tag
-    selectedArea.querySelectorAll(".sf-modifier-tag").forEach(function (t) { t.remove(); });
-
-    // Add new modifier tag
-    var label = modVal === "NOT_NULL" ? "(Any)" : "(None)";
-    var tag = document.createElement("span");
-    tag.className = "sf-modifier-tag active";
-    tag.setAttribute("data-modifier", modVal);
-    tag.textContent = label;
-    selectedArea.appendChild(tag);
-
-    container.setAttribute("data-modifier", modVal);
-  }
-
-  /** Clear any active modifier, removing the tag. */
-  function clearModifier(container) {
-    var selectedArea = container.querySelector(".sf-selected");
-    selectedArea.querySelectorAll(".sf-modifier-tag").forEach(function (t) { t.remove(); });
-    container.removeAttribute("data-modifier");
-  }
-
-  // Read selections for form submission
-  window.readSelectableFilters = function (form) {
-    form.querySelectorAll("[data-selectable-filter]").forEach(function (container) {
-      var modifier = container.getAttribute("data-modifier");
-      var modTag = container.querySelector(".sf-modifier-tag.active");
-      if (modTag) modifier = modTag.getAttribute("data-modifier");
-
-      var included = [];
-      var excluded = [];
-      container.querySelectorAll(".sf-tag").forEach(function (tag) {
-        var val = tag.getAttribute("data-value");
-        if (tag.getAttribute("data-type") === "exclude") excluded.push(val);
-        else included.push(val);
-      });
-
-      container.setAttribute("data-included", JSON.stringify(included));
-      container.setAttribute("data-excluded", JSON.stringify(excluded));
-      if (modifier) container.setAttribute("data-modifier", modifier);
-    });
-  };
-
-  document.addEventListener("DOMContentLoaded", initAll);
-  document.addEventListener("htmx:afterSwap", initAll);
-})();

games/views/game.py

@@ -149,7 +149,7 @@ def list_games(request: HttpRequest, search_string: str = "") -> HttpResponse:
         content,
         title="Manage games",
         scripts=ModuleScript("range_slider.js")
-        + ModuleScript("selectable_filter.js")
+        + ModuleScript("search_select.js")
         + ModuleScript("filter_bar.js"),
     )
 

games/views/purchase.py

@@ -142,7 +142,7 @@ def list_purchases(request: HttpRequest) -> HttpResponse:
         content,
         title="Manage purchases",
         scripts=ModuleScript("range_slider.js")
-        + ModuleScript("selectable_filter.js")
+        + ModuleScript("search_select.js")
         + ModuleScript("filter_bar.js"),
     )
 

games/views/session.py

@@ -182,7 +182,7 @@ def list_sessions(request: HttpRequest, search_string: str = "") -> HttpResponse
         content,
         title="Manage sessions",
         scripts=ModuleScript("range_slider.js")
-        + ModuleScript("selectable_filter.js")
+        + ModuleScript("search_select.js")
         + ModuleScript("filter_bar.js"),
     )