docs: label the three numbers in the QSO counter

"Showing 10000 of 23683 matches · 28648 total" was read as a filter matching more
than the log holds. The numbers were right — 23 683 matches out of 28 648 QSOs,
capped at 10 000 displayed — but the middle one belonged to "matches" while
sitting where "of N" normally means the total.

Each number is now named where it appears: shown · match the filter · in the log.
Thousands separators too, since 23683 and 28648 are hard to compare at a glance.

No counting change: both counts run over the same table, so matches can never
exceed the total.
This commit is contained in:
2026-07-29 18:10:39 +02:00
parent 284a7a18c7
commit d536c39ef5
2 changed files with 24 additions and 7 deletions
+20 -5
View File
@@ -5560,16 +5560,31 @@ export default function App() {
onClick={() => { setActiveFilter({ conditions: [], match: 'AND' }); setFilterCallsign(''); }}
>clear</button>
) : null}
{/* Three different numbers, so each one is LABELLED. "Showing
10000 of 23683 matches · 28648 total" was read as a filter
matching more than the log holds: the middle number belonged
to "matches" but sat where "of N" normally means the total.
Thousands separators for the same reason 23683 and 28648
are hard to compare at a glance. */}
{gridFilteredCount != null ? (
<span>
Showing <span className="font-semibold text-foreground">{gridFilteredCount}</span> of{' '}
<span className="font-semibold text-foreground">{qsos.length}</span> (column filter)
Showing <span className="font-semibold text-foreground">{gridFilteredCount.toLocaleString()}</span> of{' '}
<span className="font-semibold text-foreground">{qsos.length.toLocaleString()}</span> (column filter)
</span>
) : (
<span>
Showing <span className="font-semibold text-foreground">{qsos.length}</span> of{' '}
<span className="font-semibold text-foreground">{(activeFilter.conditions?.length || filterCallsign) && matchCount != null ? matchCount : total}</span>
{(activeFilter.conditions?.length || filterCallsign) ? ` matches · ${total} total` : ''}
{(activeFilter.conditions?.length || filterCallsign) ? (
<>
Showing <span className="font-semibold text-foreground">{qsos.length.toLocaleString()}</span>
{' · '}<span className="font-semibold text-foreground">{(matchCount ?? 0).toLocaleString()}</span> match the filter
{' · '}<span className="font-semibold text-foreground">{total.toLocaleString()}</span> in the log
</>
) : (
<>
Showing <span className="font-semibold text-foreground">{qsos.length.toLocaleString()}</span> of{' '}
<span className="font-semibold text-foreground">{total.toLocaleString()}</span>
</>
)}
</span>
)}
</div>