From 9dc35e00e21198fd055980142585c6f6c1f6a965 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 21 Feb 2026 14:00:54 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Search=20clear=20butt?=
 =?UTF-8?q?on=20micro-improvement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added a 'Clear' button to the search input in `list_base.html` for faster filter resets.
- Implemented JavaScript to toggle button visibility based on input content.
- Added accessibility improvements: `aria-label` for search and clear buttons, and automatic focus return after clearing.
- Refactored search logic into a reusable `updateSearch` function.

Co-authored-by: Woschj <81321922+Woschj@users.noreply.github.com>
---
 .Jules/palette.md                   |  5 +++
 app/templates/shared/list_base.html | 51 ++++++++++++++++++++++-------
 2 files changed, 44 insertions(+), 12 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..53c1cde
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,5 @@
+# Palette's Journal - UX & Accessibility Learnings
+
+## 2026-02-21 - Search Bar 'Clear' Button UX
+**Learning:** Search inputs in complex data lists significantly benefit from a persistent 'Clear' button that appears only when text is present. This reduces user friction during multi-step filtering workflows. Keyboard accessibility must be maintained by returning focus to the input after clearing and providing descriptive ARIA labels.
+**Action:** Implement 'Clear' buttons using absolute positioning within the input container and ensure triggering an 'input' event (or manual DOM update) to refresh filtered lists immediately.
diff --git a/app/templates/shared/list_base.html b/app/templates/shared/list_base.html
index 0bcb254..568a938 100755
--- a/app/templates/shared/list_base.html
+++ b/app/templates/shared/list_base.html
@@ -8,13 +8,22 @@
             <!-- Suchleiste und Aktionen -->
             <div class="flex flex-col md:flex-row gap-4 items-center">
                 <div class="form-control flex-1">
-                    <div class="input-group">
-                        <input type="text" 
-                               placeholder="Suchen..." 
-                               class="input input-bordered w-full" 
-                               id="searchInput">
-                        <button class="btn btn-square">
-                            <i class="fas fa-search"></i>
+                    <div class="join w-full">
+                        <div class="relative flex-1">
+                            <input type="text"
+                                   placeholder="Suchen..."
+                                   class="input input-bordered w-full join-item pr-10"
+                                   id="searchInput"
+                                   aria-label="Suchen">
+                            <button id="clearSearch"
+                                    class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 hidden"
+                                    type="button"
+                                    aria-label="Suche löschen">
+                                <i class="fas fa-times-circle"></i>
+                            </button>
+                        </div>
+                        <button class="btn btn-square join-item" aria-label="Suchen">
+                            <i class="fas fa-search" aria-hidden="true"></i>
                         </button>
                     </div>
                 </div>
@@ -76,14 +85,32 @@ <h3 class="card-title text-lg">
 // Basis-Suchfunktion
 document.addEventListener('DOMContentLoaded', function() {
     const searchInput = document.getElementById('searchInput');
+    const clearSearch = document.getElementById('clearSearch');
+
+    function updateSearch(searchTerm) {
+        searchTerm = searchTerm.toLowerCase();
+        document.querySelectorAll('.data-row').forEach(row => {
+            const searchableContent = row.textContent.toLowerCase();
+            row.style.display = searchableContent.includes(searchTerm) ? '' : 'none';
+        });
+
+        if (clearSearch) {
+            clearSearch.classList.toggle('hidden', searchTerm === '');
+        }
+    }
+
     if (searchInput) {
         searchInput.addEventListener('input', function(e) {
-            const searchTerm = e.target.value.toLowerCase();
-            document.querySelectorAll('.data-row').forEach(row => {
-                const searchableContent = row.textContent.toLowerCase();
-                row.style.display = searchableContent.includes(searchTerm) ? '' : 'none';
+            updateSearch(e.target.value);
+        });
+
+        if (clearSearch) {
+            clearSearch.addEventListener('click', function() {
+                searchInput.value = '';
+                updateSearch('');
+                searchInput.focus();
             });
-        });
+        }
     }
 
     // Sortier-Funktionalität