Add filter chips

Author: john-b-yang

static/css/layout.css

@@ -485,10 +485,27 @@ nav {
     gap: 1rem;
 }
 
+.arenas-grid a {
+    transition: opacity 0.25s ease;
+}
+
 .arenas-grid a:hover {
     border-bottom-color: transparent;
 }
 
+/* Filter/preview: dim non-matching arenas on chip hover (transient) or when a
+   filter is toggled on via .filter-* on the container (persistent). Both paths
+   share this rule, so hovering and clicking produce the identical effect. The
+   dimmed cards are also disabled — pointer-events: none removes the click and
+   suppresses the hover float animation in one stroke. */
+.arenas-container.filter-test .arenas-grid a:not([data-test]),
+.arenas-container:has(.filter-chip[data-filter="test"]:hover) .arenas-grid a:not([data-test]),
+.arenas-container.filter-ladder .arenas-grid a:not([data-ladder]),
+.arenas-container:has(.filter-chip[data-filter="ladder"]:hover) .arenas-grid a:not([data-ladder]) {
+    opacity: 0.3;
+    pointer-events: none;
+}
+
 .arena-card {
     display: flex;
     flex-direction: column;
@@ -529,12 +546,48 @@ nav {
 }
 
 .arenas-legend {
-    margin: 1.25rem 0 0 0;
+    margin: -0.75rem 0 1.5rem 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
     text-align: center;
     color: var(--muted);
     font-size: var(--text-sm);
 }
 
+.filter-chip {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4em;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    padding: 0.2em 0.7em;
+    background-color: var(--bg);
+    user-select: none;
+    transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+
+.filter-chip:hover {
+    color: var(--fg);
+    border-color: var(--accent);
+    box-shadow: 0 1px 4px var(--box-shadow);
+}
+
+.filter-chip:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+}
+
+.filter-chip[aria-pressed="true"] {
+    color: var(--fg);
+    border-color: var(--accent);
+    background-color: color-mix(in srgb, var(--accent) 18%, transparent);
+    font-weight: var(--weight-semibold);
+}
+
 .arenas-legend a {
     color: inherit;
     text-decoration: underline;

templates/arenas.html

@@ -8,9 +8,27 @@ <h1>Arenas</h1>
 </div>
 
 <div class="arenas-container">
+    <p class="arenas-legend">
+        <span
+            class="filter-chip"
+            data-filter="test"
+            role="button"
+            tabindex="0"
+            aria-pressed="false"
+            title="Click to highlight test set arenas"
+        ><span class="eval-badge">✚</span> Test set arena</span>
+        <span
+            class="filter-chip"
+            data-filter="ladder"
+            role="button"
+            tabindex="0"
+            aria-pressed="false"
+            title="Click to highlight arenas with a CC:Ladder"
+        ><span class="ladder-badge">🪜</span> Has a <a href="/insights/20260115_human_ai_ladder/">CC:Ladder</a></span>
+    </p>
     <div class="arenas-grid">
         {%- for page in pages | sort(attribute='title') %}
-        <a href="{{ url_for("page", path=page.path) }}">
+        <a href="{{ url_for("page", path=page.path) }}"{% if page.split == 'test' %} data-test{% endif %}{% if page.ladder %} data-ladder{% endif %}>
             <div class="arena-card">
                 <p class="arena-title">
                     <img
@@ -25,11 +43,35 @@ <h1>Arenas</h1>
         </a>
         {%- endfor %}
     </div>
-    <p class="arenas-legend">
-        <span class="eval-badge">✚</span> = Test set arena
-        &nbsp;&bull;&nbsp;
-        <span class="ladder-badge">🪜</span> = Has a <a href="/insights/20260115_human_ai_ladder/">CC:Ladder</a>
-    </p>
 </div>
-
 {% endblock content %}
+
+{% block scripts %}
+<script>
+    // Arena filter chips: click a legend marker to highlight matching arenas.
+    // Hovering a chip previews the same dimming (see .filter-chip:hover in CSS).
+    (function () {
+        var container = document.querySelector('.arenas-container');
+        if (!container) return;
+
+        document.querySelectorAll('.arenas-legend .filter-chip').forEach(function (chip) {
+            function toggle() {
+                var name = chip.getAttribute('data-filter');
+                var active = container.classList.toggle('filter-' + name);
+                chip.setAttribute('aria-pressed', active ? 'true' : 'false');
+            }
+            chip.addEventListener('click', toggle);
+            chip.addEventListener('keydown', function (e) {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    toggle();
+                }
+            });
+            // Let the nested CC:Ladder link navigate without toggling the filter.
+            chip.querySelectorAll('a').forEach(function (link) {
+                link.addEventListener('click', function (e) { e.stopPropagation(); });
+            });
+        });
+    })();
+</script>
+{% endblock scripts %}