From 0f974701d45759b65c01d0eef9ada39dbf5a8637 Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Fri, 5 Dec 2025 00:14:55 +0000
Subject: [PATCH] feat(sw-dash): Click method tile to filter by that method

---
 ts_swdash/sw-dash-requests.ts | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/ts_swdash/sw-dash-requests.ts b/ts_swdash/sw-dash-requests.ts
index 66fd1e1..c40382c 100644
--- a/ts_swdash/sw-dash-requests.ts
+++ b/ts_swdash/sw-dash-requests.ts
@@ -237,6 +237,17 @@ export class SwDashRequests extends LitElement {
         background: var(--bg-tertiary);
         border-radius: var(--radius-sm);
         padding: var(--space-2);
+        cursor: pointer;
+        transition: background 0.15s ease;
+      }
+
+      .method-stat-card:hover {
+        background: var(--bg-secondary);
+      }
+
+      .method-stat-card.active {
+        background: rgba(99, 102, 241, 0.15);
+        border: 1px solid var(--accent-primary);
       }
 
       .method-stat-name {
@@ -504,6 +515,11 @@ export class SwDashRequests extends LitElement {
     // Local filtering - no HTTP request
   }
 
+  private setMethodFilter(method: string): void {
+    // Toggle: clicking the same method clears the filter
+    this.methodFilter = this.methodFilter === method ? '' : method;
+  }
+
   private handleSearch(e: Event): void {
     this.searchText = (e.target as HTMLInputElement).value.toLowerCase();
   }
@@ -781,7 +797,10 @@ export class SwDashRequests extends LitElement {
           <div class="method-stats-title">Methods</div>
           <div class="method-stats-grid">
             ${Object.entries(this.stats.methodCounts).slice(0, 8).map(([method, data]) => html`
-              <div class="method-stat-card">
+              <div
+                class="method-stat-card ${this.methodFilter === method ? 'active' : ''}"
+                @click="${() => this.setMethodFilter(method)}"
+              >
                 <div class="method-stat-name" title="${method}">${method}</div>
                 <div class="method-stat-details">
                   <span>${data.requests} req</span>
@@ -813,9 +832,9 @@ export class SwDashRequests extends LitElement {
           </select>
 
           <span class="filter-label">Method:</span>
-          <select class="filter-select" @change="${this.handleMethodFilterChange}">
+          <select class="filter-select" .value="${this.methodFilter}" @change="${this.handleMethodFilterChange}">
             <option value="">All Methods</option>
-            ${this.methods.map(m => html`<option value="${m}">${m}</option>`)}
+            ${this.methods.map(m => html`<option value="${m}" ?selected="${this.methodFilter === m}">${m}</option>`)}
           </select>
 
           <input