From 06b53f35f9568a5159049957eff904865f5e659b Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 26 Feb 2026 20:58:51 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Enhanced=20search=20e?=
 =?UTF-8?q?xperience=20in=20list=20views?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Upgraded search bar to modern DaisyUI `join` component.
- Added a "Clear Search" button for quick input reset.
- Implemented a "No results found" feedback row in tables.
- Improved accessibility with ARIA labels and title attributes.
- Ensured robust UI toggling using inline styles for JS-driven visibility.

Co-authored-by: Woschj <81321922+Woschj@users.noreply.github.com>
---
 .Jules/palette.md                   |  4 ++
 app/templates/shared/list_base.html | 67 +++++++++++++++++++++++++----
 2 files changed, 62 insertions(+), 9 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 3ce56a2..a0fa9e4 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -7,3 +7,7 @@
 ## 2026-02-15 - [Semantic Form Labels]
 **Learning:** Even with clear visual labels, missing `for` attributes on `<label>` elements prevents proper association with inputs for assistive technologies.
 **Action:** Explicitly link labels and inputs using `for` and `id` attributes in all form components.
+
+## 2026-02-26 - [Robust UI State Toggling]
+**Learning:** Programmatic visibility toggles (e.g., "Clear Search" buttons) should favor inline `style.display = 'none'/'block'` over utility classes like Tailwind's `.hidden`. This avoids specificity conflicts and ensures correct behavior in environments where CSS might not be fully loaded or processed, such as during automated UI verification.
+**Action:** Use inline styles for JavaScript-driven visibility changes on critical UI feedback elements.
diff --git a/app/templates/shared/list_base.html b/app/templates/shared/list_base.html
index c89a7b4..e3261b2 100755
--- a/app/templates/shared/list_base.html
+++ b/app/templates/shared/list_base.html
@@ -9,13 +9,23 @@
             <div class="flex flex-col md:flex-row gap-4 items-center">
                 <div class="form-control flex-1">
                     <label for="searchInput" class="sr-only">Suchen</label>
-                    <div class="input-group">
-                        <input type="text" 
-                               placeholder="Suchen..." 
-                               class="input input-bordered w-full" 
-                               id="searchInput"
-                               aria-label="Suchen">
-                        <button type="button" class="btn btn-square" aria-label="Suche ausführen">
+                    <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 focus:ring-primary/20"
+                                   id="searchInput"
+                                   aria-label="Suchen">
+                            <button type="button"
+                                    id="clearSearch"
+                                    class="absolute right-3 top-1/2 -translate-y-1/2 text-base-content/30 hover:text-base-content/70 transition-colors duration-200"
+                                    style="display: none;"
+                                    aria-label="Suche löschen"
+                                    title="Suche löschen">
+                                <i class="fas fa-times-circle"></i>
+                            </button>
+                        </div>
+                        <button type="button" class="btn btn-square join-item border-l-0" aria-label="Suche ausführen">
                             <i class="fas fa-search"></i>
                         </button>
                     </div>
@@ -44,6 +54,19 @@
                     </thead>
                     <tbody>
                         {% block table_rows %}{% endblock %}
+                        <tr id="noResultsRow" style="display: none;">
+                            <td colspan="100%" class="text-center py-12">
+                                <div class="flex flex-col items-center justify-center space-y-3 opacity-50">
+                                    <div class="bg-base-200 p-4 rounded-full">
+                                        <i class="fas fa-search fa-2x"></i>
+                                    </div>
+                                    <div class="space-y-1">
+                                        <p class="text-lg font-bold">Keine Ergebnisse gefunden</p>
+                                        <p class="text-sm">Probieren Sie es mit anderen Suchbegriffen oder setzen Sie die Filter zurück.</p>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -78,14 +101,40 @@ <h3 class="card-title text-lg">
 // Basis-Suchfunktion
 document.addEventListener('DOMContentLoaded', function() {
     const searchInput = document.getElementById('searchInput');
+    const clearSearch = document.getElementById('clearSearch');
+    const noResultsRow = document.getElementById('noResultsRow');
+
     if (searchInput) {
         searchInput.addEventListener('input', function(e) {
             const searchTerm = e.target.value.toLowerCase();
-            document.querySelectorAll('.data-row').forEach(row => {
+            const rows = document.querySelectorAll('.data-row');
+            let hasResults = false;
+
+            rows.forEach(row => {
                 const searchableContent = row.textContent.toLowerCase();
-                row.style.display = searchableContent.includes(searchTerm) ? '' : 'none';
+                const matches = searchableContent.includes(searchTerm);
+                row.style.display = matches ? '' : 'none';
+                if (matches) hasResults = true;
             });
+
+            // Toggle clear button
+            if (clearSearch) {
+                clearSearch.style.display = searchTerm.length === 0 ? 'none' : 'block';
+            }
+
+            // Toggle no results row
+            if (noResultsRow) {
+                noResultsRow.style.display = (searchTerm.length > 0 && !hasResults) ? 'table-row' : 'none';
+            }
         });
+
+        if (clearSearch) {
+            clearSearch.addEventListener('click', function() {
+                searchInput.value = '';
+                searchInput.dispatchEvent(new Event('input'));
+                searchInput.focus();
+            });
+        }
     }
 
     // Sortier-Funktionalität