fix(#1128): Bug 5 — toolbar group reorder (toggles before dropdowns)

Audit Section 3 Bug 5 + Section 4 step #6: swap the order of
.filter-group-dropdowns and .filter-group-toggles so the most-used
controls (time range, Group by Hash, ★ My Nodes) sit immediately
next to the search input where the eye lands first. The
Observer/Region/Type/Channel dropdowns move to Group 4. Pure
markup reorder, no CSS / no JS-handler changes.

Refs #1128
This commit is contained in:
Kpa-clawbot
2026-05-06 06:54:14 +00:00
parent 6d16e6f1af
commit 68b0426560
+19 -16
View File
@@ -999,22 +999,10 @@
<div class="node-filter-dropdown hidden" id="fNodeDropdown" role="listbox"></div>
</div>
</div>
<!-- Group 3: Dropdowns (observers, regions, types, channels) -->
<div class="filter-group filter-group-dropdowns">
<div class="multi-select-wrap" id="observerFilterWrap">
<button class="multi-select-trigger" id="observerTrigger" title="Show only packets seen by selected observer stations">All Observers ▾</button>
<div class="multi-select-menu" id="observerMenu"></div>
</div>
<div id="packetsRegionFilter" class="region-filter-container" style="display:inline-block;vertical-align:middle"></div>
<div class="multi-select-wrap" id="typeFilterWrap">
<button class="multi-select-trigger" id="typeTrigger" title="Filter by packet type">All Types ▾</button>
<div class="multi-select-menu" id="typeMenu"></div>
</div>
<select id="fChannel" class="filter-select" aria-label="Filter by channel" title="Filter Channel Messages (GRP_TXT) by channel">
<option value="">All Channels</option>
</select>
</div>
<!-- Group 4: Quick toggles (Group by Hash, My Nodes, time range) -->
<!-- Group 3: Quick toggles (time range, Group by Hash, ★ My Nodes)
— #1128 Bug 5: placed BEFORE the Observer/Region/Type/Channel
dropdowns so the most-frequently-used controls sit next to
the search input where the eye lands first. -->
<div class="filter-group filter-group-toggles">
<button class="btn ${groupByHash ? 'active' : ''}" id="fGroup" title="Collapse duplicate observations of the same packet into expandable groups">Group by Hash</button>
<button class="btn" id="fMyNodes" title="Show only packets from your favorited/claimed nodes">★ My Nodes</button>
@@ -1029,6 +1017,21 @@
${isMobile ? '' : '<option value="0">All time</option>'}
</select>
</div>
<!-- Group 4: Dropdowns (observers, regions, types, channels) -->
<div class="filter-group filter-group-dropdowns">
<div class="multi-select-wrap" id="observerFilterWrap">
<button class="multi-select-trigger" id="observerTrigger" title="Show only packets seen by selected observer stations">All Observers ▾</button>
<div class="multi-select-menu" id="observerMenu"></div>
</div>
<div id="packetsRegionFilter" class="region-filter-container" style="display:inline-block;vertical-align:middle"></div>
<div class="multi-select-wrap" id="typeFilterWrap">
<button class="multi-select-trigger" id="typeTrigger" title="Filter by packet type">All Types ▾</button>
<div class="multi-select-menu" id="typeMenu"></div>
</div>
<select id="fChannel" class="filter-select" aria-label="Filter by channel" title="Filter Channel Messages (GRP_TXT) by channel">
<option value="">All Channels</option>
</select>
</div>
<!-- Group 5: Sort + Columns -->
<div class="filter-group filter-group-sort">
<select id="fObsSort" aria-label="Observation sort order" title="Controls how observations are ordered within packet groups and which observation appears in the header row. Observer: Groups by observer station, earliest first. Path: Orders by hop count. Time: Orders by observation timestamp.">