From 2e3484b1d973e2c8469a87abbe53d51c47a22805 Mon Sep 17 00:00:00 2001
From: josh <josh@thewrightserver.net>
Date: Sat, 28 Mar 2026 20:51:31 -0400
Subject: [PATCH] feat: make stats bar cells clickable to filter by state

Clicking deployed/testing/degraded sets the state filter to that
value. Clicking total clears all filters. Hover style added.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 css/app.css |  2 ++
 js/ui.js    | 13 +++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/css/app.css b/css/app.css
index afda024..829ce47 100644
--- a/css/app.css
+++ b/css/app.css
@@ -153,6 +153,8 @@ main { flex: 1; }
 }
 
 .stat-cell:last-child { border-right: none; }
+.stat-clickable { cursor: pointer; user-select: none; }
+.stat-clickable:hover { background: var(--bg2); }
 
 .stat-label {
   font-size: 10px;
diff --git a/js/ui.js b/js/ui.js
index 64930fa..7c3587d 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -71,10 +71,10 @@ async function renderDashboard() {
   all.forEach(i => { states[i.state] = (states[i.state] || 0) + 1; });
 
   document.getElementById('stats-bar').innerHTML = `
-    <div class="stat-cell"><div class="stat-label">total</div><div class="stat-value accent">${all.length}</div></div>
-    <div class="stat-cell"><div class="stat-label">deployed</div><div class="stat-value">${states['deployed'] || 0}</div></div>
-    <div class="stat-cell"><div class="stat-label">testing</div><div class="stat-value amber">${states['testing'] || 0}</div></div>
-    <div class="stat-cell"><div class="stat-label">degraded</div><div class="stat-value red">${states['degraded'] || 0}</div></div>
+    <div class="stat-cell stat-clickable" onclick="setStateFilter('')"><div class="stat-label">total</div><div class="stat-value accent">${all.length}</div></div>
+    <div class="stat-cell stat-clickable" onclick="setStateFilter('deployed')"><div class="stat-label">deployed</div><div class="stat-value">${states['deployed'] || 0}</div></div>
+    <div class="stat-cell stat-clickable" onclick="setStateFilter('testing')"><div class="stat-label">testing</div><div class="stat-value amber">${states['testing'] || 0}</div></div>
+    <div class="stat-cell stat-clickable" onclick="setStateFilter('degraded')"><div class="stat-label">degraded</div><div class="stat-value red">${states['degraded'] || 0}</div></div>
   `;
 
   await populateStackFilter();
@@ -95,6 +95,11 @@ async function populateStackFilter() {
   });
 }
 
+function setStateFilter(state) {
+  document.getElementById('filter-state').value = state;
+  filterInstances();
+}
+
 async function filterInstances() {
   const search = document.getElementById('search-input').value;
   const state  = document.getElementById('filter-state').value;