🎨 Palette: Add 'No results found' feedback to list views

.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-25 - [No Results Feedback in Tables]
+**Learning:** When implementing a 'No results' feedback row in a table managed by JavaScript, ensure that iterating loops (search/filter) explicitly exclude the feedback row using selectors like `tr:not(#noResultsRow)`. Additionally, use `style.display` toggling rather than Tailwind's `.hidden` class to avoid conflicts with `!important` CSS rules and ensure visibility even if parent scripts set inline styles.
+**Action:** Always verify that metadata rows are excluded from data iteration loops and use robust visibility management.

app/static/js/table-functions.js

@@ -4,7 +4,8 @@ function initializeTable(tableId, options = {}) {
 
     const searchInput = document.getElementById('searchInput');
     const tbody = table.querySelector('tbody');
-    const rows = Array.from(tbody.querySelectorAll('tr'));
+    // Nur echte Daten-Zeilen (nicht die "Keine Ergebnisse"-Zeile)
+    const rows = Array.from(tbody.querySelectorAll('tr:not(#noResultsRow)'));
     let sortDirection = {};
 
     // Filter-Funktion
@@ -40,6 +41,16 @@ function initializeTable(tableId, options = {}) {
 
             row.style.display = showRow ? '' : 'none';
         });
+        checkNoResults();
+    }
+
+    // Hilfsfunktion für "Keine Ergebnisse"
+    function checkNoResults() {
+        const noResultsRow = document.getElementById('noResultsRow');
+        if (!noResultsRow) return;
+
+        const visibleRowsCount = rows.filter(row => row.style.display !== 'none').length;
+        noResultsRow.style.display = visibleRowsCount === 0 ? '' : 'none';
     }
 
     // Sortier-Funktion

app/templates/shared/list_base.html

@@ -44,6 +44,15 @@
                     </thead>
                     <tbody>
                         {% block table_rows %}{% endblock %}
+                        <tr id="noResultsRow" style="display: none;">
+                            <td colspan="100" class="text-center py-10">
+                                <div class="flex flex-col items-center justify-center text-slate-400">
+                                    <i class="fas fa-search fa-3x mb-4 opacity-20"></i>
+                                    <p class="text-lg font-medium">Keine Ergebnisse gefunden</p>
+                                    <p class="text-sm">Versuchen Sie es mit anderen Suchbegriffen oder Filtern.</p>
+                                </div>
+                            </td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -78,13 +87,25 @@ <h3 class="card-title text-lg">
 // Basis-Suchfunktion
 document.addEventListener('DOMContentLoaded', function() {
     const searchInput = document.getElementById('searchInput');
+
+    function checkNoResults() {
+        const noResultsRow = document.getElementById('noResultsRow');
+        if (!noResultsRow) return;
+
+        const visibleRowsCount = Array.from(document.querySelectorAll('.data-row'))
+            .filter(row => row.style.display !== 'none').length;
+
+        noResultsRow.style.display = visibleRowsCount === 0 ? '' : 'none';
+    }
+
     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';
             });
+            checkNoResults();
         });
     }
 
@@ -176,6 +197,7 @@ <h3 class="card-title text-lg">
 
                 row.style.display = matchesCategory && matchesLocation && matchesStatus ? '' : 'none';
             });
+            checkNoResults();
         }
 
         categoryFilter.addEventListener('change', applyFilters);
@@ -287,6 +309,7 @@ <h3 class="card-title text-lg">
 
                 row.style.display = matchesCategory && matchesLocation && matchesStock ? '' : 'none';
             });
+            checkNoResults();
         }
 
         categoryFilter.addEventListener('change', applyFilters);