From 4298b7f5f500b485b44fb56508f6f0eaf4b3672c Mon Sep 17 00:00:00 2001
From: Matthew Knight <mattnite@proton.me>
Date: Wed, 18 Feb 2026 19:07:04 -0800
Subject: [PATCH] Use dropdowns for filters

---
 web/templates/pages/admin/tickets/list.html | 58 ++++++++++++---------
 web/templates/pages/tickets/list.html       | 44 +++++++++-------
 2 files changed, 58 insertions(+), 44 deletions(-)

diff --git a/web/templates/pages/admin/tickets/list.html b/web/templates/pages/admin/tickets/list.html
index 99ae20d..831d3f5 100644
--- a/web/templates/pages/admin/tickets/list.html
+++ b/web/templates/pages/admin/tickets/list.html
@@ -7,37 +7,45 @@
 {{$filters := dict "status" .StatusFilter "priority" .PriorityFilter "product" .ProductFilter "reporter" .ReporterFilter}}
 {{$productFilter := .ProductFilter}}
 {{$reporterFilter := .ReporterFilter}}
-<div class="mb-4 space-y-2">
-    <div class="flex items-center gap-2">
-        <span class="text-xs font-medium text-gray-500 uppercase w-16">Status</span>
-        <a href="{{filterURL "/admin/tickets" $filters "status" ""}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if not .StatusFilter}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">All</a>
-        <a href="{{filterURL "/admin/tickets" $filters "status" "open"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .StatusFilter "open"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">Open</a>
-        <a href="{{filterURL "/admin/tickets" $filters "status" "in_progress"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .StatusFilter "in_progress"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">In Progress</a>
-        <a href="{{filterURL "/admin/tickets" $filters "status" "closed"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .StatusFilter "closed"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">Closed</a>
+<div class="flex items-center gap-4 mb-4">
+    <div class="flex items-center gap-1.5">
+        <label class="text-xs font-medium text-gray-500 uppercase">Status</label>
+        <select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
+            <option value="{{filterURL "/admin/tickets" $filters "status" ""}}" {{if not .StatusFilter}}selected{{end}}>All</option>
+            <option value="{{filterURL "/admin/tickets" $filters "status" "open"}}" {{if eq .StatusFilter "open"}}selected{{end}}>Open</option>
+            <option value="{{filterURL "/admin/tickets" $filters "status" "in_progress"}}" {{if eq .StatusFilter "in_progress"}}selected{{end}}>In Progress</option>
+            <option value="{{filterURL "/admin/tickets" $filters "status" "closed"}}" {{if eq .StatusFilter "closed"}}selected{{end}}>Closed</option>
+        </select>
     </div>
-    <div class="flex items-center gap-2">
-        <span class="text-xs font-medium text-gray-500 uppercase w-16">Priority</span>
-        <a href="{{filterURL "/admin/tickets" $filters "priority" ""}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if not .PriorityFilter}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">All</a>
-        <a href="{{filterURL "/admin/tickets" $filters "priority" "high"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .PriorityFilter "high"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">High</a>
-        <a href="{{filterURL "/admin/tickets" $filters "priority" "medium"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .PriorityFilter "medium"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">Medium</a>
-        <a href="{{filterURL "/admin/tickets" $filters "priority" "low"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .PriorityFilter "low"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">Low</a>
+    <div class="flex items-center gap-1.5">
+        <label class="text-xs font-medium text-gray-500 uppercase">Priority</label>
+        <select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
+            <option value="{{filterURL "/admin/tickets" $filters "priority" ""}}" {{if not .PriorityFilter}}selected{{end}}>All</option>
+            <option value="{{filterURL "/admin/tickets" $filters "priority" "high"}}" {{if eq .PriorityFilter "high"}}selected{{end}}>High</option>
+            <option value="{{filterURL "/admin/tickets" $filters "priority" "medium"}}" {{if eq .PriorityFilter "medium"}}selected{{end}}>Medium</option>
+            <option value="{{filterURL "/admin/tickets" $filters "priority" "low"}}" {{if eq .PriorityFilter "low"}}selected{{end}}>Low</option>
+        </select>
     </div>
     {{if .Products}}
-    <div class="flex items-center gap-2">
-        <span class="text-xs font-medium text-gray-500 uppercase w-16">Product</span>
-        <a href="{{filterURL "/admin/tickets" $filters "product" ""}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if not .ProductFilter}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">All</a>
-        {{range .Products}}
-        <a href="{{filterURL "/admin/tickets" $filters "product" .}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq $productFilter .}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">{{.}}</a>
-        {{end}}
+    <div class="flex items-center gap-1.5">
+        <label class="text-xs font-medium text-gray-500 uppercase">Product</label>
+        <select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
+            <option value="{{filterURL "/admin/tickets" $filters "product" ""}}" {{if not .ProductFilter}}selected{{end}}>All</option>
+            {{range .Products}}
+            <option value="{{filterURL "/admin/tickets" $filters "product" .}}" {{if eq $productFilter .}}selected{{end}}>{{.}}</option>
+            {{end}}
+        </select>
     </div>
     {{end}}
     {{if .Reporters}}
-    <div class="flex items-center gap-2">
-        <span class="text-xs font-medium text-gray-500 uppercase w-16">Reporter</span>
-        <a href="{{filterURL "/admin/tickets" $filters "reporter" ""}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if not .ReporterFilter}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">All</a>
-        {{range .Reporters}}
-        <a href="{{filterURL "/admin/tickets" $filters "reporter" .}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq $reporterFilter .}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">{{.}}</a>
-        {{end}}
+    <div class="flex items-center gap-1.5">
+        <label class="text-xs font-medium text-gray-500 uppercase">Reporter</label>
+        <select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
+            <option value="{{filterURL "/admin/tickets" $filters "reporter" ""}}" {{if not .ReporterFilter}}selected{{end}}>All</option>
+            {{range .Reporters}}
+            <option value="{{filterURL "/admin/tickets" $filters "reporter" .}}" {{if eq $reporterFilter .}}selected{{end}}>{{.}}</option>
+            {{end}}
+        </select>
     </div>
     {{end}}
 </div>
diff --git a/web/templates/pages/tickets/list.html b/web/templates/pages/tickets/list.html
index a6fcba8..51a312c 100644
--- a/web/templates/pages/tickets/list.html
+++ b/web/templates/pages/tickets/list.html
@@ -9,28 +9,34 @@
 {{with .Data}}
     {{$filters := dict "status" .StatusFilter "priority" .PriorityFilter "product" .ProductFilter}}
     {{$productFilter := .ProductFilter}}
-    <div class="mb-4 space-y-2">
-        <div class="flex items-center gap-2">
-            <span class="text-xs font-medium text-gray-500 uppercase w-16">Status</span>
-            <a href="{{filterURL "/tickets" $filters "status" ""}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if not .StatusFilter}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">All</a>
-            <a href="{{filterURL "/tickets" $filters "status" "open"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .StatusFilter "open"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">Open</a>
-            <a href="{{filterURL "/tickets" $filters "status" "in_progress"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .StatusFilter "in_progress"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">In Progress</a>
-            <a href="{{filterURL "/tickets" $filters "status" "closed"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .StatusFilter "closed"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">Closed</a>
+    <div class="flex items-center gap-4 mb-4">
+        <div class="flex items-center gap-1.5">
+            <label class="text-xs font-medium text-gray-500 uppercase">Status</label>
+            <select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
+                <option value="{{filterURL "/tickets" $filters "status" ""}}" {{if not .StatusFilter}}selected{{end}}>All</option>
+                <option value="{{filterURL "/tickets" $filters "status" "open"}}" {{if eq .StatusFilter "open"}}selected{{end}}>Open</option>
+                <option value="{{filterURL "/tickets" $filters "status" "in_progress"}}" {{if eq .StatusFilter "in_progress"}}selected{{end}}>In Progress</option>
+                <option value="{{filterURL "/tickets" $filters "status" "closed"}}" {{if eq .StatusFilter "closed"}}selected{{end}}>Closed</option>
+            </select>
         </div>
-        <div class="flex items-center gap-2">
-            <span class="text-xs font-medium text-gray-500 uppercase w-16">Priority</span>
-            <a href="{{filterURL "/tickets" $filters "priority" ""}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if not .PriorityFilter}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">All</a>
-            <a href="{{filterURL "/tickets" $filters "priority" "high"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .PriorityFilter "high"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">High</a>
-            <a href="{{filterURL "/tickets" $filters "priority" "medium"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .PriorityFilter "medium"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">Medium</a>
-            <a href="{{filterURL "/tickets" $filters "priority" "low"}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq .PriorityFilter "low"}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">Low</a>
+        <div class="flex items-center gap-1.5">
+            <label class="text-xs font-medium text-gray-500 uppercase">Priority</label>
+            <select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
+                <option value="{{filterURL "/tickets" $filters "priority" ""}}" {{if not .PriorityFilter}}selected{{end}}>All</option>
+                <option value="{{filterURL "/tickets" $filters "priority" "high"}}" {{if eq .PriorityFilter "high"}}selected{{end}}>High</option>
+                <option value="{{filterURL "/tickets" $filters "priority" "medium"}}" {{if eq .PriorityFilter "medium"}}selected{{end}}>Medium</option>
+                <option value="{{filterURL "/tickets" $filters "priority" "low"}}" {{if eq .PriorityFilter "low"}}selected{{end}}>Low</option>
+            </select>
         </div>
         {{if .Products}}
-        <div class="flex items-center gap-2">
-            <span class="text-xs font-medium text-gray-500 uppercase w-16">Product</span>
-            <a href="{{filterURL "/tickets" $filters "product" ""}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if not .ProductFilter}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">All</a>
-            {{range .Products}}
-            <a href="{{filterURL "/tickets" $filters "product" .}}" class="rounded-md px-3 py-1.5 text-sm font-medium {{if eq $productFilter .}}bg-gray-900 text-white{{else}}bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50{{end}}">{{.}}</a>
-            {{end}}
+        <div class="flex items-center gap-1.5">
+            <label class="text-xs font-medium text-gray-500 uppercase">Product</label>
+            <select onchange="window.location.href=this.value" class="rounded-md border-gray-300 text-sm py-1.5 pr-8">
+                <option value="{{filterURL "/tickets" $filters "product" ""}}" {{if not .ProductFilter}}selected{{end}}>All</option>
+                {{range .Products}}
+                <option value="{{filterURL "/tickets" $filters "product" .}}" {{if eq $productFilter .}}selected{{end}}>{{.}}</option>
+                {{end}}
+            </select>
         </div>
         {{end}}
     </div>