Add client-side search/filter to Glossary sidebar term list (#704)

* Initial plan

* Add quick search/filter to Glossary pages for faster navigation

Co-authored-by: LukasWallrich <60155545+LukasWallrich@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: LukasWallrich <60155545+LukasWallrich@users.noreply.github.com>
Co-authored-by: Richard Dushime <45734838+richarddushime@users.noreply.github.com>

Author: 3 people

layouts/glossary/list.html

@@ -11,13 +11,33 @@
   }
 </style>
 
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    const searchInput = document.getElementById('glossary-search');
+    if (searchInput) {
+      searchInput.addEventListener('input', function() {
+        const query = this.value.toLowerCase();
+        document.querySelectorAll('#TableOfContents .nav-item').forEach(function(item) {
+          const link = item.querySelector('.nav-link');
+          const text = link ? link.textContent.toLowerCase() : '';
+          item.style.display = text.includes(query) ? '' : 'none';
+        });
+      });
+    }
+  });
+</script>
+
 <div class="container-fluid docs">
   <div class="row flex-xl-nowrap">
     <div class="col-12 col-xl-3 docs-toc glossary-toc">
       <ul class="nav toc-top">
         <li><a href="#" id="back_to_top" class="docs-toc-title">List of terms</a></li>
       </ul>
 
+      <input type="text" id="glossary-search" class="form-control form-control-sm mb-2"
+             placeholder="Filter terms..."
+             aria-label="Filter terms">
+
       <nav id="TableOfContents" class="nav flex-column">
         <ul>
           {{ $currentSection := .File.Dir }}

layouts/glossary/single.html

@@ -4,6 +4,7 @@
 {{ $dictionary := dict
     "english" (dict
         "list_of_terms" "List of terms"
+        "filter_terms" "Filter terms..."
         "definition" "Definition"
         "alt_definition" "Alternative definition"
         "related_term" "Related term"
@@ -18,6 +19,7 @@
     )
     "german" (dict
         "list_of_terms" "Liste der Begriffe"
+        "filter_terms" "Begriffe filtern..."
         "definition" "Definition"
         "alt_definition" "Alternative Definition"
         "related_term" "Verwandter Begriff"
@@ -32,6 +34,7 @@
     )
     "arabic" (dict
         "list_of_terms" "قائمة المصطلحات"
+        "filter_terms" "تصفية المصطلحات..."
         "definition" "تعريف"
         "alt_definition" "تعريف بديل"
         "related_term" "مصطلح ذو صلة"
@@ -46,6 +49,7 @@
     )
     "turkish" (dict
         "list_of_terms" "Terimler listesi"
+        "filter_terms" "Terimleri filtrele..."
         "definition" "Tanım"
         "alt_definition" "Alternatif tanım"
         "related_term" "İlgili terim"
@@ -117,6 +121,18 @@
         }
       }
     });
+
+    const searchInput = document.getElementById('glossary-search');
+    if (searchInput) {
+      searchInput.addEventListener('input', function() {
+        const query = this.value.toLowerCase();
+        document.querySelectorAll('#TableOfContents .nav-item').forEach(function(item) {
+          const link = item.querySelector('.nav-link');
+          const text = link ? link.textContent.toLowerCase() : '';
+          item.style.display = text.includes(query) ? '' : 'none';
+        });
+      });
+    }
   });
 </script>
 
@@ -128,6 +144,10 @@
         <li><a href="#" id="back_to_top" class="docs-toc-title">{{ index (index $dictionary $lang) "list_of_terms" }}</a></li>
       </ul>
 
+      <input type="text" id="glossary-search" class="form-control form-control-sm mb-2"
+             placeholder="{{ index (index $dictionary $lang) "filter_terms" }}"
+             aria-label="{{ index (index $dictionary $lang) "filter_terms" }}">
+
       <nav id="TableOfContents" class="nav flex-column">
         <ul>
           {{ $currentSection := .File.Dir }}