From aeeb75c226a32a741dfdab03489a721fbc19f111 Mon Sep 17 00:00:00 2001
From: Joerg <joerg@dj7nt.de>
Date: Mon, 19 Jan 2026 13:47:36 +0100
Subject: [PATCH] feat: add QSO count display to filter section

- Shows count of QSOs matching current filters next to "Filters" heading
- Displays "Showing X filtered QSOs" when filters are active
- Displays "Showing X total QSOs" when no filters applied
- Uses existing pagination.totalCount from backend API

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/frontend/src/routes/qsos/+page.svelte | 38 +++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/routes/qsos/+page.svelte b/src/frontend/src/routes/qsos/+page.svelte
index 1240de5..66dc76b 100644
--- a/src/frontend/src/routes/qsos/+page.svelte
+++ b/src/frontend/src/routes/qsos/+page.svelte
@@ -278,6 +278,10 @@
     loadQSOs();
   }
 
+  function hasActiveFilters() {
+    return !!(filters.band || filters.mode || filters.search || (filters.confirmationType && filters.confirmationType !== 'all'));
+  }
+
   function openQSODetailModal(qso) {
     selectedQSO = qso;
     showQSODetailModal = true;
@@ -561,7 +565,18 @@
   {/if}
 
   <div class="filters">
-    <h3>Filters</h3>
+    <div class="filters-header">
+      <h3>Filters</h3>
+      {#if pagination && !loading}
+        <div class="filter-count">
+          {#if hasActiveFilters()}
+            Showing <strong>{pagination.totalCount}</strong> filtered QSOs
+          {:else}
+            Showing <strong>{pagination.totalCount}</strong> total QSOs
+          {/if}
+        </div>
+      {/if}
+    </div>
     <div class="filter-row">
       <input
         type="text"
@@ -982,11 +997,30 @@
   }
 
   .filters h3 {
-    margin: 0 0 1rem 0;
+    margin: 0;
     font-size: 1rem;
     color: #333;
   }
 
+  .filters-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .filter-count {
+    font-size: 0.875rem;
+    color: #666;
+  }
+
+  .filter-count strong {
+    color: #4a90e2;
+    font-weight: 600;
+  }
+
   .filter-row {
     display: flex;
     gap: 1rem;