tagliatelle

commit f9f8bc30deb433521e89773655d5958e4af3cb52
parent 72a8f381e1cd72186bd9638c00ba75cc2891ba4f
Author: Peter <peter@minskio.co.uk>
Date:   Wed, 30 Sep 2026 22:58:50 +0100

Allow filter of lists over 65 entries long directly in the menu

Diffstat:
A
static/header-menu-filter.js
 | 
17
+++++++++++++++++
M
static/style.css
 | 
2
++
M
templates/_header.html
 | 
10
++++++----

3 files changed, 25 insertions(+), 4 deletions(-)
diff --git a/static/header-menu-filter.js b/static/header-menu-filter.js
@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', function () {
+  document.querySelectorAll('.tag-filter-input').forEach(function (input) {
+    var ul = input.closest('ul');
+    var items = Array.from(ul.querySelectorAll('.tag-filter-item'));
+    var more = ul.querySelector('.tag-filter-more');
+    input.addEventListener('input', function () {
+      var q = input.value.trim().toLowerCase();
+      var matches = q ? items.filter(function (li) {
+        return li.dataset.name.toLowerCase().includes(q);
+      }) : [];
+      var show = q !== '' && matches.length < 20;
+      items.forEach(function (li) { li.style.display = 'none'; });
+      if (show) matches.forEach(function (li) { li.style.display = ''; });
+      more.style.display = show ? 'none' : '';
+    });
+  });
+});
diff --git a/static/style.css b/static/style.css
@@ -33,6 +33,8 @@ nav ul.sub-menu li ul li a{min-width: 170px}
 nav ul.sub-menu li a:hover{background:#2a2a2a}
 nav ul li ul li{display:block}
 nav ul li ul li ul li a{max-width:320px;overflow:hidden;text-overflow:ellipsis}
+nav ul.sub-menu li.tag-filter{background:#1a1a1a}
+nav ul.sub-menu li.tag-filter input{width:calc(100% - 16px)}
 
 /* responsive nav bar */
 @media (max-width: 600px) {
diff --git a/templates/_header.html b/templates/_header.html
@@ -22,8 +22,10 @@
         <a href="/tags#tag-{{$cat}}">{{$cat}}</a>
         <ul>
           {{if gt (len $tags) 65}}
-            <li><a href="/tags#tag-{{$cat}}">{{len $tags}} entries...</a></li>
-          {{else}}
+            <li class="tag-filter"><input type="text" class="tag-filter-input" placeholder="Filter {{len $tags}} entries..." autocomplete="off" aria-label="Filter {{$cat}} tags"></li>
+            <li class="tag-filter-more"><a href="/tags#tag-{{$cat}}">{{len $tags}} entries...</a></li>
+            {{range $tags}}<li class="tag-filter-item" data-name="{{.Value}}" style="display:none"><a href="/tag/{{$cat}}/{{.Value}}">{{.Value}} ({{.Count}})</a></li>
+            {{end}}{{else}}
             {{range $tags}}<li><a href="/tag/{{$cat}}/{{.Value}}">{{.Value}} ({{.Count}})</a></li>
             {{end}}
           {{end}}<li><a href="/tag/{{$cat}}/previews">Previews</a></li>
@@ -53,7 +55,8 @@
   </form>
 </div>
 <script src="/static/search-box.js" defer></script>
+<script src="/static/header-menu-filter.js" defer></script>
 </nav>
 
 
-{{end}}
-\ No newline at end of file
+{{end}}