Add 5 new E2E tests for settings persistence

Tests added:
- notification time changes persist after page reload
- timezone changes persist after page reload
- multiple settings changes persist after page reload
- cycle length persistence verifies exact saved value
- settings form shows correct values after save without reload

Updated IMPLEMENTATION_PLAN.md with accurate E2E test counts (now 180 E2E tests).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

e2e/settings.spec.ts

@@ -414,5 +414,241 @@ test.describe("settings", () => {
       const isDisabledAfter = await saveButton.isDisabled();
       expect(isDisabledAfter).toBe(false);
     });
+
+    test("notification time changes persist after page reload", async ({
+      page,
+    }) => {
+      const notificationTimeInput = page.getByLabel(/notification time/i);
+      const isVisible = await notificationTimeInput
+        .isVisible()
+        .catch(() => false);
+
+      if (!isVisible) {
+        test.skip();
+        return;
+      }
+
+      // Get current value
+      const originalValue = await notificationTimeInput.inputValue();
+
+      // Set a different valid time (toggle between 08:00 and 09:00)
+      const newValue = originalValue === "08:00" ? "09:00" : "08:00";
+      await notificationTimeInput.fill(newValue);
+
+      // Save
+      const saveButton = page.getByRole("button", { name: /save/i });
+      await saveButton.click();
+      await page.waitForTimeout(1500);
+
+      // Reload the page
+      await page.reload();
+      await page.waitForLoadState("networkidle");
+
+      // Check the value persisted
+      const notificationTimeAfter = page.getByLabel(/notification time/i);
+      const afterValue = await notificationTimeAfter.inputValue();
+
+      expect(afterValue).toBe(newValue);
+
+      // Restore original value
+      await notificationTimeAfter.fill(originalValue);
+      await saveButton.click();
+      await page.waitForTimeout(500);
+    });
+
+    test("timezone changes persist after page reload", async ({ page }) => {
+      const timezoneInput = page.getByLabel(/timezone/i);
+      const isVisible = await timezoneInput.isVisible().catch(() => false);
+
+      if (!isVisible) {
+        test.skip();
+        return;
+      }
+
+      // Get current value
+      const originalValue = await timezoneInput.inputValue();
+
+      // Set a different timezone (toggle between two common timezones)
+      const newValue =
+        originalValue === "America/New_York"
+          ? "America/Los_Angeles"
+          : "America/New_York";
+      await timezoneInput.fill(newValue);
+
+      // Save
+      const saveButton = page.getByRole("button", { name: /save/i });
+      await saveButton.click();
+      await page.waitForTimeout(1500);
+
+      // Reload the page
+      await page.reload();
+      await page.waitForLoadState("networkidle");
+
+      // Check the value persisted
+      const timezoneAfter = page.getByLabel(/timezone/i);
+      const afterValue = await timezoneAfter.inputValue();
+
+      expect(afterValue).toBe(newValue);
+
+      // Restore original value
+      await timezoneAfter.fill(originalValue);
+      await saveButton.click();
+      await page.waitForTimeout(500);
+    });
+
+    test("multiple settings changes persist after page reload", async ({
+      page,
+    }) => {
+      const cycleLengthInput = page.getByLabel(/cycle length/i);
+      const notificationTimeInput = page.getByLabel(/notification time/i);
+      const timezoneInput = page.getByLabel(/timezone/i);
+
+      const cycleLengthVisible = await cycleLengthInput
+        .isVisible()
+        .catch(() => false);
+      const notificationTimeVisible = await notificationTimeInput
+        .isVisible()
+        .catch(() => false);
+      const timezoneVisible = await timezoneInput
+        .isVisible()
+        .catch(() => false);
+
+      if (!cycleLengthVisible || !notificationTimeVisible || !timezoneVisible) {
+        test.skip();
+        return;
+      }
+
+      // Get all original values
+      const originalCycleLength = await cycleLengthInput.inputValue();
+      const originalNotificationTime = await notificationTimeInput.inputValue();
+      const originalTimezone = await timezoneInput.inputValue();
+
+      // Set different values for all fields
+      const newCycleLength = originalCycleLength === "28" ? "30" : "28";
+      const newNotificationTime =
+        originalNotificationTime === "08:00" ? "09:00" : "08:00";
+      const newTimezone =
+        originalTimezone === "America/New_York"
+          ? "America/Los_Angeles"
+          : "America/New_York";
+
+      await cycleLengthInput.fill(newCycleLength);
+      await notificationTimeInput.fill(newNotificationTime);
+      await timezoneInput.fill(newTimezone);
+
+      // Save all changes at once
+      const saveButton = page.getByRole("button", { name: /save/i });
+      await saveButton.click();
+      await page.waitForTimeout(1500);
+
+      // Reload the page
+      await page.reload();
+      await page.waitForLoadState("networkidle");
+
+      // Verify all values persisted
+      const cycleLengthAfter = page.getByLabel(/cycle length/i);
+      const notificationTimeAfter = page.getByLabel(/notification time/i);
+      const timezoneAfter = page.getByLabel(/timezone/i);
+
+      expect(await cycleLengthAfter.inputValue()).toBe(newCycleLength);
+      expect(await notificationTimeAfter.inputValue()).toBe(
+        newNotificationTime,
+      );
+      expect(await timezoneAfter.inputValue()).toBe(newTimezone);
+
+      // Restore all original values
+      await cycleLengthAfter.fill(originalCycleLength);
+      await notificationTimeAfter.fill(originalNotificationTime);
+      await timezoneAfter.fill(originalTimezone);
+      await saveButton.click();
+      await page.waitForTimeout(500);
+    });
+
+    test("cycle length persistence verifies exact saved value", async ({
+      page,
+    }) => {
+      const cycleLengthInput = page.getByLabel(/cycle length/i);
+      const isVisible = await cycleLengthInput.isVisible().catch(() => false);
+
+      if (!isVisible) {
+        test.skip();
+        return;
+      }
+
+      // Get current value
+      const originalValue = await cycleLengthInput.inputValue();
+
+      // Set a specific different valid value
+      const newValue = originalValue === "28" ? "31" : "28";
+      await cycleLengthInput.fill(newValue);
+
+      // Save
+      const saveButton = page.getByRole("button", { name: /save/i });
+      await saveButton.click();
+      await page.waitForTimeout(1500);
+
+      // Reload the page
+      await page.reload();
+      await page.waitForLoadState("networkidle");
+
+      // Check the exact value persisted (not just range validation)
+      const cycleLengthAfter = page.getByLabel(/cycle length/i);
+      const afterValue = await cycleLengthAfter.inputValue();
+
+      expect(afterValue).toBe(newValue);
+
+      // Restore original value
+      await cycleLengthAfter.fill(originalValue);
+      await saveButton.click();
+      await page.waitForTimeout(500);
+    });
+
+    test("settings form shows correct values after save without reload", async ({
+      page,
+    }) => {
+      const cycleLengthInput = page.getByLabel(/cycle length/i);
+      const notificationTimeInput = page.getByLabel(/notification time/i);
+
+      const cycleLengthVisible = await cycleLengthInput
+        .isVisible()
+        .catch(() => false);
+      const notificationTimeVisible = await notificationTimeInput
+        .isVisible()
+        .catch(() => false);
+
+      if (!cycleLengthVisible || !notificationTimeVisible) {
+        test.skip();
+        return;
+      }
+
+      // Get original values
+      const originalCycleLength = await cycleLengthInput.inputValue();
+      const originalNotificationTime = await notificationTimeInput.inputValue();
+
+      // Change values
+      const newCycleLength = originalCycleLength === "28" ? "29" : "28";
+      const newNotificationTime =
+        originalNotificationTime === "08:00" ? "10:00" : "08:00";
+
+      await cycleLengthInput.fill(newCycleLength);
+      await notificationTimeInput.fill(newNotificationTime);
+
+      // Save
+      const saveButton = page.getByRole("button", { name: /save/i });
+      await saveButton.click();
+      await page.waitForTimeout(1500);
+
+      // Verify values are still showing the new values without reload
+      expect(await cycleLengthInput.inputValue()).toBe(newCycleLength);
+      expect(await notificationTimeInput.inputValue()).toBe(
+        newNotificationTime,
+      );
+
+      // Restore original values
+      await cycleLengthInput.fill(originalCycleLength);
+      await notificationTimeInput.fill(originalNotificationTime);
+      await saveButton.click();
+      await page.waitForTimeout(500);
+    });
   });
 });