From 61d4c25ce6ae63a8a8a91decb45e425e0a641012 Mon Sep 17 00:00:00 2001
From: Josh Wright <josh@thewrightserver.net>
Date: Fri, 9 Oct 2026 20:03:08 -0400
Subject: [PATCH] Fix date-range filter selections (Refs #104)

---
 src/lib/ui/components/ActivityLog.svelte  |  4 ++--
 src/lib/ui/components/MatchHistory.svelte |  2 +-
 tests/unit/ui-activity.test.ts            | 21 +++++++++++++++++++++
 tests/unit/ui-match-history.test.ts       | 21 +++++++++++++++++++++
 4 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/lib/ui/components/ActivityLog.svelte b/src/lib/ui/components/ActivityLog.svelte
index 1abd2fb..ffd3022 100644
--- a/src/lib/ui/components/ActivityLog.svelte
+++ b/src/lib/ui/components/ActivityLog.svelte
@@ -241,14 +241,14 @@
             <label for={`activity-days${suffix}`}
                 >Date range<select
                     id={`activity-days${suffix}`}
-                    value={filters.days ?? 0}
+                    value={String(filters.days ?? 0)}
                     onchange={(event) => update({ days: event.currentTarget.value })}
                     ><option value="0">All retained history</option><option value="1"
                         >Last 24 hours</option
                     ><option value="7">Last 7 days</option><option value="30">Last 30 days</option
                     ><option value="90">Last 90 days</option
                     >{#if filters.days && ![1, 7, 30, 90].includes(filters.days)}<option
-                            value={filters.days}>Last {filters.days} days</option
+                            value={String(filters.days)}>Last {filters.days} days</option
                         >{/if}</select
                 ></label
             >
diff --git a/src/lib/ui/components/MatchHistory.svelte b/src/lib/ui/components/MatchHistory.svelte
index 43a09e3..bf75bf0 100644
--- a/src/lib/ui/components/MatchHistory.svelte
+++ b/src/lib/ui/components/MatchHistory.svelte
@@ -176,7 +176,7 @@
             <label for={`match-days${suffix}`}
                 >Date range<select
                     id={`match-days${suffix}`}
-                    value={filters.days}
+                    value={String(filters.days)}
                     onchange={(event) => update({ days: event.currentTarget.value })}
                     ><option value="0">All time</option><option value="7">Last 7 days</option
                     ><option value="30">Last 30 days</option><option value="90">Last 90 days</option
diff --git a/tests/unit/ui-activity.test.ts b/tests/unit/ui-activity.test.ts
index e2ef155..b9a88be 100644
--- a/tests/unit/ui-activity.test.ts
+++ b/tests/unit/ui-activity.test.ts
@@ -53,6 +53,27 @@ beforeEach(() => {
 });
 afterEach(() => vi.useRealTimers());
 
+it.each([
+    ['', '0', 'All retained history'],
+    ['0', '0', 'All retained history'],
+    ['1', '1', 'Last 24 hours'],
+    ['7', '7', 'Last 7 days'],
+    ['30', '30', 'Last 30 days'],
+    ['90', '90', 'Last 90 days'],
+    ['14', '14', 'Last 14 days']
+])('selects the current date range for days=%s on desktop and mobile', (days, value, label) => {
+    scope(days ? `/activity?days=${days}` : '/activity');
+    const body = render(ActivityLog, { props: { initial: report() } }).body;
+    for (const suffix of ['', '-mobile']) {
+        const select = body.match(
+            new RegExp(`<select\\b[^>]*id="activity-days${suffix}"[^>]*>([\\s\\S]*?)</select>`)
+        )?.[1];
+        expect(select).toBeDefined();
+        expect(select).toContain(`<option value="${value}" selected="">${label}</option>`);
+        expect(select?.match(/\bselected=""/g)).toHaveLength(1);
+    }
+});
+
 it('sends only supported normalized filters and enforces scoped identities', () => {
     const url = new URL(
         'https://example.test/servers/town?tab=history&server=wrong&source=host&state=failed&offset=50&returnTo=%2F'
diff --git a/tests/unit/ui-match-history.test.ts b/tests/unit/ui-match-history.test.ts
index 47456f4..b263a75 100644
--- a/tests/unit/ui-match-history.test.ts
+++ b/tests/unit/ui-match-history.test.ts
@@ -41,6 +41,27 @@ beforeEach(() => {
     vi.setSystemTime(new Date('2026-10-06T20:00:00Z'));
 });
 afterEach(() => vi.useRealTimers());
+it.each([
+    ['', '0', 'All time'],
+    ['0', '0', 'All time'],
+    ['7', '7', 'Last 7 days'],
+    ['30', '30', 'Last 30 days'],
+    ['90', '90', 'Last 90 days']
+])(
+    'selects the current date range for matchDays=%s on desktop and mobile',
+    (days, value, label) => {
+        scope(days ? `?matchDays=${days}` : '');
+        const body = render(MatchHistory, { props: { initial: report() } }).body;
+        for (const suffix of ['', '-mobile']) {
+            const select = body.match(
+                new RegExp(`<select\\b[^>]*id="match-days${suffix}"[^>]*>([\\s\\S]*?)</select>`)
+            )?.[1];
+            expect(select).toBeDefined();
+            expect(select).toContain(`<option value="${value}" selected="">${label}</option>`);
+            expect(select?.match(/\bselected=""/g)).toHaveLength(1);
+        }
+    }
+);
 it('renders one page heading, six columns, a combined identity, and compact dates', () => {
     const body = render(MatchHistoryPage, {
         props: { data: { history: report(), user: null, setupRequired: false } }