From f490cc756fa2c0e95485053cc5f25ff8efaab5b2 Mon Sep 17 00:00:00 2001
From: Jack Kingsman <jack.kingsman@gmail.com>
Date: Mon, 16 Feb 2026 23:01:04 -0800
Subject: [PATCH] Fix bug with statistics display on mobile

---
 frontend/src/components/SettingsModal.tsx | 13 +++++--
 frontend/src/test/settingsModal.test.tsx  | 41 +++++++++++++++++++++++
 2 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/SettingsModal.tsx b/frontend/src/components/SettingsModal.tsx
index acbd707..e25f707 100644
--- a/frontend/src/components/SettingsModal.tsx
+++ b/frontend/src/components/SettingsModal.tsx
@@ -102,6 +102,7 @@ export function SettingsModal(props: SettingsModalProps) {
   };
 
   const [isMobileLayout, setIsMobileLayout] = useState(getIsMobileLayout);
+  const externalDesktopSidebarMode = externalSidebarNav && !isMobileLayout;
   const [expandedSections, setExpandedSections] = useState<Record<SettingsSection, boolean>>(() => {
     const isMobile = getIsMobileLayout();
     return {
@@ -245,8 +246,16 @@ export function SettingsModal(props: SettingsModalProps) {
     setSectionError(null);
   }, [externalSidebarNav, desktopSection]);
 
+  // On mobile with external sidebar nav, auto-expand the selected section
+  useEffect(() => {
+    if (!externalSidebarNav || !isMobileLayout || !desktopSection) return;
+    setExpandedSections((prev) =>
+      prev[desktopSection] ? prev : { ...prev, [desktopSection]: true }
+    );
+  }, [externalSidebarNav, isMobileLayout, desktopSection]);
+
   // Fetch statistics when the section becomes visible
-  const statisticsVisible = externalSidebarNav
+  const statisticsVisible = externalDesktopSidebarMode
     ? desktopSection === 'statistics'
     : expandedSections.statistics;
 
@@ -596,8 +605,6 @@ export function SettingsModal(props: SettingsModalProps) {
     setSectionError(null);
   };
 
-  const externalDesktopSidebarMode = externalSidebarNav && !isMobileLayout;
-
   const isSectionVisible = (section: SettingsSection) =>
     externalDesktopSidebarMode ? desktopSection === section : expandedSections[section];
 
diff --git a/frontend/src/test/settingsModal.test.tsx b/frontend/src/test/settingsModal.test.tsx
index ba8a56c..2815201 100644
--- a/frontend/src/test/settingsModal.test.tsx
+++ b/frontend/src/test/settingsModal.test.tsx
@@ -341,4 +341,45 @@ describe('SettingsModal', () => {
     expect(screen.getByText('general')).toBeInTheDocument();
     expect(screen.getByText('42 msgs')).toBeInTheDocument();
   });
+
+  it('fetches statistics when expanded in mobile external-nav mode', async () => {
+    const mockStats: StatisticsResponse = {
+      busiest_channels_24h: [],
+      contact_count: 10,
+      repeater_count: 3,
+      channel_count: 5,
+      total_packets: 200,
+      decrypted_packets: 150,
+      undecrypted_packets: 50,
+      total_dms: 25,
+      total_channel_messages: 80,
+      total_outgoing: 30,
+      contacts_heard: { last_hour: 2, last_24_hours: 7, last_week: 10 },
+      repeaters_heard: { last_hour: 1, last_24_hours: 3, last_week: 3 },
+    };
+
+    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      new Response(JSON.stringify(mockStats), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      })
+    );
+
+    renderModal({
+      mobile: true,
+      externalSidebarNav: true,
+      desktopSection: 'radio',
+    });
+
+    expect(fetchSpy).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole('button', { name: /Statistics/i }));
+
+    await waitFor(() => {
+      expect(fetchSpy).toHaveBeenCalledWith('/api/statistics', expect.any(Object));
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Network')).toBeInTheDocument();
+    });
+  });
 });