From 0cf1c5353e19e66a975662e2578a0d4f9aca69e9 Mon Sep 17 00:00:00 2001
From: Daniel Volz <mail@danielvolz.org>
Date: Sat, 21 Feb 2026 17:59:50 +0100
Subject: [PATCH] fix: notification channel toggles snap back after being
 enabled (#255)

* fix: notification channel toggles snap back after being enabled

The checked props for email/push notification toggles had redundant
conditions (smtpHost/shoutrrrUrl checks) that forced them to false,
causing immediate visual snap-back. Additionally, performSave()
overwrote emailEnabled/shoutrrrEnabled in local state with effective
values, disabling toggles when no SMTP host or Shoutrrr URL was set.

Remove redundant checked prop conditions (disabled attr already handles
interaction gating) and stop overwriting enabled flags in local state
after save.

Closes #250

* fix: remove leaked useModalHistory import from SettingsPage

* fix: update useSettings tests to match new toggle behavior
---
 frontend/src/hooks/useSettings.ts           |  6 +-----
 frontend/src/pages/SettingsPage.tsx         | 22 ++++++---------------
 frontend/src/test/hooks/useSettings.test.ts |  7 ++++---
 3 files changed, 11 insertions(+), 24 deletions(-)

diff --git a/frontend/src/hooks/useSettings.ts b/frontend/src/hooks/useSettings.ts
index b63ceaa..320416c 100644
--- a/frontend/src/hooks/useSettings.ts
+++ b/frontend/src/hooks/useSettings.ts
@@ -249,11 +249,7 @@ export function useSettings(): UseSettingsReturn {
 				body: JSON.stringify(payload),
 			}).catch(() => null);
 
-			const updatedSettings = {
-				...settingsToSave,
-				emailEnabled: effectiveEmailEnabled,
-				shoutrrrEnabled: effectiveShoutrrrEnabled,
-			};
+			const updatedSettings = { ...settingsToSave };
 			setSettings(updatedSettings);
 			setSettingsSaving(false);
 			setSavedSettings(updatedSettings);
diff --git a/frontend/src/pages/SettingsPage.tsx b/frontend/src/pages/SettingsPage.tsx
index e79c661..b332d3c 100644
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -89,7 +89,7 @@ export function SettingsPage() {
 										<label className={`toggle-switch small${!settings.emailEnabled ? " disabled" : ""}`}>
 											<input
 												type="checkbox"
-												checked={settings.smtpHost && settings.emailEnabled ? settings.emailStockReminders : false}
+												checked={settings.emailStockReminders}
 												onChange={(e) => setSettings({ ...settings, emailStockReminders: e.target.checked })}
 												disabled={!settings.emailEnabled}
 											/>
@@ -100,9 +100,7 @@ export function SettingsPage() {
 										<label className={`toggle-switch small${!settings.shoutrrrEnabled ? " disabled" : ""}`}>
 											<input
 												type="checkbox"
-												checked={
-													settings.shoutrrrUrl && settings.shoutrrrEnabled ? settings.shoutrrrStockReminders : false
-												}
+												checked={settings.shoutrrrStockReminders}
 												onChange={(e) => setSettings({ ...settings, shoutrrrStockReminders: e.target.checked })}
 												disabled={!settings.shoutrrrEnabled}
 											/>
@@ -116,7 +114,7 @@ export function SettingsPage() {
 										<label className={`toggle-switch small${!settings.emailEnabled ? " disabled" : ""}`}>
 											<input
 												type="checkbox"
-												checked={settings.smtpHost && settings.emailEnabled ? settings.emailIntakeReminders : false}
+												checked={settings.emailIntakeReminders}
 												onChange={(e) => setSettings({ ...settings, emailIntakeReminders: e.target.checked })}
 												disabled={!settings.emailEnabled}
 											/>
@@ -127,9 +125,7 @@ export function SettingsPage() {
 										<label className={`toggle-switch small${!settings.shoutrrrEnabled ? " disabled" : ""}`}>
 											<input
 												type="checkbox"
-												checked={
-													settings.shoutrrrUrl && settings.shoutrrrEnabled ? settings.shoutrrrIntakeReminders : false
-												}
+												checked={settings.shoutrrrIntakeReminders}
 												onChange={(e) => setSettings({ ...settings, shoutrrrIntakeReminders: e.target.checked })}
 												disabled={!settings.shoutrrrEnabled}
 											/>
@@ -143,9 +139,7 @@ export function SettingsPage() {
 										<label className={`toggle-switch small${!settings.emailEnabled ? " disabled" : ""}`}>
 											<input
 												type="checkbox"
-												checked={
-													settings.smtpHost && settings.emailEnabled ? settings.emailPrescriptionReminders : false
-												}
+												checked={settings.emailPrescriptionReminders}
 												onChange={(e) => setSettings({ ...settings, emailPrescriptionReminders: e.target.checked })}
 												disabled={!settings.emailEnabled}
 											/>
@@ -156,11 +150,7 @@ export function SettingsPage() {
 										<label className={`toggle-switch small${!settings.shoutrrrEnabled ? " disabled" : ""}`}>
 											<input
 												type="checkbox"
-												checked={
-													settings.shoutrrrUrl && settings.shoutrrrEnabled
-														? settings.shoutrrrPrescriptionReminders
-														: false
-												}
+												checked={settings.shoutrrrPrescriptionReminders}
 												onChange={(e) => setSettings({ ...settings, shoutrrrPrescriptionReminders: e.target.checked })}
 												disabled={!settings.shoutrrrEnabled}
 											/>
diff --git a/frontend/src/test/hooks/useSettings.test.ts b/frontend/src/test/hooks/useSettings.test.ts
index a08a726..21c99d2 100644
--- a/frontend/src/test/hooks/useSettings.test.ts
+++ b/frontend/src/test/hooks/useSettings.test.ts
@@ -245,8 +245,8 @@ describe("useSettings", () => {
 			await result.current.saveSettings(mockEvent);
 		});
 
-		// emailEnabled should be false in the saved state
-		expect(result.current.settings.emailEnabled).toBe(false);
+		// Local state preserves user choice; backend receives effective value via payload
+		expect(result.current.settings.emailEnabled).toBe(true);
 	});
 
 	it("auto-disables shoutrrr when URL is empty", async () => {
@@ -274,7 +274,8 @@ describe("useSettings", () => {
 			await result.current.saveSettings(mockEvent);
 		});
 
-		expect(result.current.settings.shoutrrrEnabled).toBe(false);
+		// Local state preserves user choice; backend receives effective value via payload
+		expect(result.current.settings.shoutrrrEnabled).toBe(true);
 	});
 
 	it("refreshes reminder status on interval", async () => {