From ace705ef8e4ea0f08990b31b41f0020d07fd5afc Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Sat, 21 Mar 2026 08:22:12 +0000
Subject: [PATCH] fix: use dropdown for region filter on packets page

Pills look out of place in the dense toolbar. Added { dropdown: true }
option to RegionFilter.init() to force dropdown mode regardless of
region count.
---
 public/index.html       | 4 ++--
 public/packets.js       | 2 +-
 public/region-filter.js | 8 +++++---
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/public/index.html b/public/index.html
index 41f7e32b..b5d96501 100644
--- a/public/index.html
+++ b/public/index.html
@@ -80,10 +80,10 @@
 
   <script src="vendor/qrcode.js"></script>
   <script src="roles.js?v=1774290000"></script>
-  <script src="region-filter.js?v=1774292000"></script>
+  <script src="region-filter.js?v=1774354500"></script>
   <script src="app.js?v=1774052279"></script>
   <script src="home.js?v=1774042199"></script>
-  <script src="packets.js?v=1774080385"></script>
+  <script src="packets.js?v=1774354500"></script>
   <script src="map.js?v=1774083841" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="channels.js?v=1774075538" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="nodes.js?v=1774354200" onerror="console.error('Failed to load:', this.src)"></script>
diff --git a/public/packets.js b/public/packets.js
index 80b515c5..baec4321 100644
--- a/public/packets.js
+++ b/public/packets.js
@@ -400,7 +400,7 @@
     `;
 
     // Init shared RegionFilter component
-    RegionFilter.init(document.getElementById('packetsRegionFilter'));
+    RegionFilter.init(document.getElementById('packetsRegionFilter'), { dropdown: true });
     RegionFilter.onChange(function() { loadPackets(); });
 
     const obsSel = document.getElementById('fObserver');
diff --git a/public/region-filter.js b/public/region-filter.js
index b2c7ef98..c072240c 100644
--- a/public/region-filter.js
+++ b/public/region-filter.js
@@ -177,7 +177,7 @@
     }
     container.style.display = '';
 
-    if (codes.length > 4) {
+    if (codes.length > 4 || container._forceDropdown) {
       renderDropdown(container, codes);
     } else {
       renderPills(container, codes);
@@ -195,8 +195,10 @@
     _listeners = _listeners.filter(function (f) { return f !== fn; });
   }
 
-  /** Initialize filter in a container, fetch regions, render, return promise */
-  async function initFilter(container) {
+  /** Initialize filter in a container, fetch regions, render, return promise.
+   *  Options: { dropdown: true } to force dropdown mode regardless of region count */
+  async function initFilter(container, opts) {
+    if (opts && opts.dropdown) container._forceDropdown = true;
     await fetchRegions();
     render(container);
   }