Show 'no results' message when filters yield empty results

Display a centered message when category + JDK filter combination
matches no patterns. Includes translations for all 13 locales.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: brunoborges

site/app.js

@@ -216,7 +216,10 @@
       '25': [22, 25]
     };
 
+    const noResultsMsg = document.getElementById('noResultsMessage');
+
     const applyFilters = () => {
+      let visibleCount = 0;
       cards.forEach(card => {
         const matchesCategory = !activeCategory || card.dataset.category === activeCategory;
         let matchesJdk = true;
@@ -225,9 +228,15 @@
           const range = LTS_RANGES[activeJdk];
           matchesJdk = range && version >= range[0] && version <= range[1];
         }
-        card.classList.toggle('filter-hidden', !(matchesCategory && matchesJdk));
+        const visible = matchesCategory && matchesJdk;
+        card.classList.toggle('filter-hidden', !visible);
+        if (visible) visibleCount++;
       });
 
+      if (noResultsMsg) {
+        noResultsMsg.style.display = visibleCount === 0 ? '' : 'none';
+      }
+
       if (window.updateViewToggleState) {
         window.updateViewToggleState();
       }

site/styles.css

@@ -415,6 +415,14 @@ nav {
   display: none;
 }
 
+.no-results-message {
+  text-align: center;
+  color: var(--text-muted);
+  padding: 3rem 1rem;
+  font-size: 1.1rem;
+  width: 100%;
+}
+
 .tip-card {
   background: var(--surface);
   border: 1px solid var(--border);

templates/index.html

@@ -275,6 +275,7 @@ <h2 class="section-title">{{site.allComparisons}}</h2>
     <div class="tips-grid" id="tipsGrid">
 {{tipCards}}
     </div>
+    <p class="no-results-message" id="noResultsMessage" style="display:none">{{filters.noResults}}</p>
   </section>
 
   <div class="stats-bar">

translations/strings/ar.yaml

@@ -31,6 +31,7 @@ sections:
 filters:
   show: "عرض:"
   all: الكل
+  noResults: لم يتم العثور على أنماط برمجية لهذا الفلتر.
 difficulty:
   beginner: مبتدئ
   intermediate: متوسط

translations/strings/bn.yaml

@@ -34,6 +34,7 @@ filters:
   all: সব
   jdk: 'JDK:'
   category: 'বিভাগ:'
+  noResults: এই ফিল্টারের জন্য কোনো কোড প্যাটার্ন পাওয়া যায়নি।
 difficulty:
   beginner: প্রাথমিক
   intermediate: মধ্যম

translations/strings/de.yaml

@@ -33,6 +33,7 @@ sections:
 filters:
   show: 'Anzeigen:'
   all: Alle
+  noResults: Keine Code-Muster für diesen Filter gefunden.
 difficulty:
   beginner: Einsteiger
   intermediate: Fortgeschritten

translations/strings/en.yaml

@@ -35,6 +35,7 @@ filters:
   all: All
   jdk: 'JDK:'
   category: 'Category:'
+  noResults: No code patterns found for this filter.
 difficulty:
   beginner: Beginner
   intermediate: Intermediate

translations/strings/es.yaml

@@ -33,6 +33,7 @@ sections:
 filters:
   show: 'Mostrar:'
   all: Todos
+  noResults: No se encontraron patrones de código para este filtro.
 difficulty:
   beginner: Principiante
   intermediate: Intermedio

translations/strings/fr.yaml

@@ -33,6 +33,7 @@ sections:
 filters:
   show: 'Afficher :'
   all: Tous
+  noResults: Aucun patron de code trouvé pour ce filtre.
 difficulty:
   beginner: Débutant
   intermediate: Intermédiaire

translations/strings/it.yaml

@@ -33,6 +33,7 @@ sections:
 filters:
   show: 'Mostra:'
   all: Tutti
+  noResults: Nessun pattern di codice trovato per questo filtro.
 difficulty:
   beginner: Principiante
   intermediate: Intermedio