From 0ab2a41ccc13b2020e8754f8175470ab2567ff68 Mon Sep 17 00:00:00 2001
From: Herculino Trotta <hello@herculino.com>
Date: Sat, 12 Sep 2026 12:06:55 -0300
Subject: [PATCH] feat(ui:filter): add quick clear button to filter button

---
 .../monthly_overview/pages/overview.html      | 20 ++++++++++---------
 .../fragments/filter_active_indicator.html    | 11 ++++++++++
 .../transactions/fragments/filter_form.html   |  4 +---
 .../transactions/pages/transactions.html      | 20 ++++++++++---------
 4 files changed, 34 insertions(+), 21 deletions(-)
 create mode 100644 app/templates/transactions/fragments/filter_active_indicator.html

diff --git a/app/templates/monthly_overview/pages/overview.html b/app/templates/monthly_overview/pages/overview.html
index 77d782dd..bc6d12b7 100644
--- a/app/templates/monthly_overview/pages/overview.html
+++ b/app/templates/monthly_overview/pages/overview.html
@@ -103,11 +103,12 @@
           {# Main control bar with filter, search, and ordering #}
           <div class="join w-full">
 
-            <button class="btn btn-secondary join-item relative z-1" type="button"
-                    @click="filterOpen = !filterOpen"
-                    :aria-expanded="filterOpen" id="filter-button"
-                    title="{% translate 'Filter transactions' %}"
-                    _="on change from #filter-container
+            <div class="relative join-item z-10">
+              <button class="btn btn-secondary join-item relative z-1" type="button"
+                      @click="filterOpen = !filterOpen"
+                      :aria-expanded="filterOpen" id="filter-button"
+                      title="{% translate 'Filter transactions' %}"
+                      _="on change from #filter-container
                          -- Check if any filter has a non-default value
                          set hasActiveFilter to false
 
@@ -207,9 +208,10 @@
                          else
                            add .hidden to #filter-active-indicator
                          end">
-              <i class="fa-solid fa-filter fa-fw"></i>
-              <span id="filter-active-indicator" class="absolute -top-1 -right-1 w-3 h-3 bg-error rounded-full {% if not filter_is_active %}hidden {% endif %}z-10"></span>
-            </button>
+                <i class="fa-solid fa-filter fa-fw"></i>
+              </button>
+              {% include "transactions/fragments/filter_active_indicator.html" %}
+            </div>
 
             {# Search box #}
             <label for="quick-search" class="hidden">
@@ -277,7 +279,7 @@
               {% include "transactions/fragments/filter_form.html" %}
 
               <div class="text-right">
-                <a class="btn btn-outline btn-error btn-sm w-fit"
+                <a id="filter-clear" class="btn btn-outline btn-error btn-sm w-fit"
                    href="{{ request.path }}"
                    hx-get="{% url 'transaction_filter_clear' %}"
                    hx-target="#filter"
diff --git a/app/templates/transactions/fragments/filter_active_indicator.html b/app/templates/transactions/fragments/filter_active_indicator.html
new file mode 100644
index 00000000..f47f2184
--- /dev/null
+++ b/app/templates/transactions/fragments/filter_active_indicator.html
@@ -0,0 +1,11 @@
+{% load i18n %}
+
+<button id="filter-active-indicator"
+        type="button"
+        class="group absolute -top-1 -right-1 z-10 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full bg-error text-error-content transition-transform duration-150 motion-reduce:transition-none hover:scale-125 focus-visible:scale-125 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-error {% if not filter_is_active %}hidden{% endif %}"
+        aria-label="{% translate 'Clear filters' %}"
+        title="{% translate 'Clear filters' %}"
+        {% if swap_filter_indicator %}hx-swap-oob="outerHTML"{% endif %}
+        _="on click halt the event then trigger click on #filter-clear">
+  <i class="fa-solid fa-xmark hidden text-[0.625rem] leading-none group-hover:inline-block group-focus-visible:inline-block" aria-hidden="true"></i>
+</button>
diff --git a/app/templates/transactions/fragments/filter_form.html b/app/templates/transactions/fragments/filter_form.html
index be1bc17a..b1179877 100644
--- a/app/templates/transactions/fragments/filter_form.html
+++ b/app/templates/transactions/fragments/filter_form.html
@@ -12,7 +12,5 @@
   {% crispy filter.form %}
 </form>
 {% if swap_filter_indicator %}
-  <span id="filter-active-indicator"
-        class="absolute -top-1 -right-1 w-3 h-3 bg-error rounded-full {% if not filter_is_active %}hidden {% endif %}z-10"
-        hx-swap-oob="outerHTML"></span>
+  {% include "transactions/fragments/filter_active_indicator.html" %}
 {% endif %}
diff --git a/app/templates/transactions/pages/transactions.html b/app/templates/transactions/pages/transactions.html
index 282a8f88..4cd4cef0 100644
--- a/app/templates/transactions/pages/transactions.html
+++ b/app/templates/transactions/pages/transactions.html
@@ -52,11 +52,12 @@
           {# Main control bar with filter, search, and ordering #}
           <div class="join w-full">
 
-            <button class="btn btn-secondary join-item relative z-1" type="button"
-                    @click="filterOpen = !filterOpen"
-                    :aria-expanded="filterOpen" id="filter-button"
-                    title="{% translate 'Filter transactions' %}"
-                    _="on change from #filter-container
+            <div class="relative join-item z-10">
+              <button class="btn btn-secondary join-item relative z-1" type="button"
+                      @click="filterOpen = !filterOpen"
+                      :aria-expanded="filterOpen" id="filter-button"
+                      title="{% translate 'Filter transactions' %}"
+                      _="on change from #filter-container
                          -- Check if any filter has a non-default value
                          set hasActiveFilter to false
 
@@ -156,9 +157,10 @@
                          else
                            add .hidden to #filter-active-indicator
                          end">
-              <i class="fa-solid fa-filter fa-fw"></i>
-              <span id="filter-active-indicator" class="absolute -top-1 -right-1 w-3 h-3 bg-error rounded-full {% if not filter_is_active %}hidden {% endif %}z-10"></span>
-            </button>
+                <i class="fa-solid fa-filter fa-fw"></i>
+              </button>
+              {% include "transactions/fragments/filter_active_indicator.html" %}
+            </div>
 
             {# Search box #}
             <label for="quick-search" class="hidden">
@@ -226,7 +228,7 @@
               {% include "transactions/fragments/filter_form.html" %}
 
               <div class="text-right">
-                <a class="btn btn-outline btn-error btn-sm w-fit"
+                <a id="filter-clear" class="btn btn-outline btn-error btn-sm w-fit"
                    href="{{ request.path }}"
                    hx-get="{% url 'transaction_filter_clear' %}"
                    hx-target="#filter"