refactor(examples): 04_pwa — single toggle button instead of Start/Pause pair

The label flips reactively (Start ↔ Pause) via a new `toggle_label` field
on PomodoroState, so the current state is always visible in the button
itself. Reset stays as a separate secondary button. Smoke + e2e tests
updated to assert the toggle's bound label.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: apiad

examples/04_pwa.py

@@ -52,6 +52,7 @@ class PomodoroState:
     running: bool = False
     sessions: int = 0
     time_display: str = "25:00"
+    toggle_label: str = "Start"
 
 
 # ---------------------------------------------------------------------------
@@ -110,6 +111,7 @@ async def tick():
             PomodoroState.mode = next_mode
             PomodoroState.seconds_left = durations[next_mode]
             PomodoroState.running = False
+            PomodoroState.toggle_label = "Start"
             await render_time()
             await save_state()
             return
@@ -119,24 +121,27 @@ async def tick():
 
 
 @app.client.callback
-async def start(event: Event):
+async def toggle(event: Event):
+    # Single Start/Pause button. The label flips so the user can always see
+    # whether the timer is running. When starting, await tick() — the loop
+    # owns the running coroutine until it sees running=False (set here on
+    # the next click) or seconds_left hits zero.
     if bool(PomodoroState.running):
+        PomodoroState.running = False
+        PomodoroState.toggle_label = "Start"
+        await save_state()
         return
     PomodoroState.running = True
+    PomodoroState.toggle_label = "Pause"
     await tick()
 
 
-@app.client.callback
-async def pause(event: Event):
-    PomodoroState.running = False
-    await save_state()
-
-
 @app.client.callback
 async def reset(event: Event):
     # Reset to the full duration of the current mode. Stops the timer.
     durations = {"work": 1500, "short": 300, "long": 900}
     PomodoroState.running = False
+    PomodoroState.toggle_label = "Start"
     PomodoroState.seconds_left = durations[str(PomodoroState.mode)]
     await render_time()
     await save_state()
@@ -151,6 +156,7 @@ async def switch_mode(event: Event):
     if new_mode not in durations:
         return
     PomodoroState.running = False
+    PomodoroState.toggle_label = "Start"
     PomodoroState.mode = new_mode
     PomodoroState.seconds_left = durations[new_mode]
     await render_time()
@@ -170,6 +176,7 @@ async def restore():
         PomodoroState.sessions = int(saved.sessions)
     # Always restore paused — user clicks start to resume.
     PomodoroState.running = False
+    PomodoroState.toggle_label = "Start"
     await render_time()
 
 
@@ -288,14 +295,11 @@ def index():
             # Current mode label below the time.
             page.div(classes="mode-label").text(PomodoroState.mode)
 
-            # Primary controls.
+            # Primary controls — toggle (Start/Pause flips reactively) + Reset.
             with page.div(classes="controls") as controls:
-                controls.button(text="Start", classes="control-primary").attrs(
-                    type="button"
-                ).on("click", start)
-                controls.button(text="Pause", classes="control-secondary").attrs(
-                    type="button"
-                ).on("click", pause)
+                controls.button(classes="control-primary").attrs(type="button").text(
+                    PomodoroState.toggle_label
+                ).on("click", toggle)
                 controls.button(text="Reset", classes="control-secondary").attrs(
                     type="button"
                 ).on("click", reset)

tests/test_examples_canonical.py

@@ -176,8 +176,9 @@ def test_04_pwa_manifest_serviceworker_and_bundle():
     assert 'data-bind-text="PomodoroState.time_display"' in html
     assert 'data-bind-text="PomodoroState.mode"' in html
     assert 'data-bind-text="PomodoroState.sessions"' in html
-    assert 'data-on-click="start"' in html
-    assert 'data-on-click="pause"' in html
+    # The toggle button label flips between Start and Pause reactively.
+    assert 'data-bind-text="PomodoroState.toggle_label"' in html
+    assert 'data-on-click="toggle"' in html
     assert 'data-on-click="reset"' in html
     assert 'data-on-click="switch_mode"' in html
     assert 'data-mode="work"' in html

tests/test_examples_e2e.py

@@ -172,8 +172,18 @@ def test_04_pwa_tick_loop_decrements_seconds(example_server, page):
     time_el = page.locator('[data-bind-text="PomodoroState.time_display"]')
     assert time_el.inner_text().strip() == "25:00"
 
-    # Click Start. The tick loop runs in the background while we wait.
-    page.locator('button[data-on-click="start"]').click()
+    # The toggle button starts labeled "Start" and flips to "Pause" once running.
+    toggle_btn = page.locator('button[data-on-click="toggle"]')
+    assert toggle_btn.inner_text().strip() == "Start"
+
+    # Click to start. The tick loop runs in the background while we wait.
+    toggle_btn.click()
+
+    # The button text should flip to "Pause" reactively once running=True.
+    page.wait_for_function(
+        "() => document.querySelector('button[data-on-click=\"toggle\"]').textContent.trim() === 'Pause'",
+        timeout=3_000,
+    )
 
     # Within 3 seconds the time should have decremented by at least 1s
     # (i.e. shown anything other than "25:00"). Tolerant of timing jitter
@@ -183,8 +193,12 @@ def test_04_pwa_tick_loop_decrements_seconds(example_server, page):
         timeout=3_000,
     )
 
-    # Pause so the loop stops and we don't churn for the rest of the suite.
-    page.locator('button[data-on-click="pause"]').click()
+    # Click again to pause — the loop stops and the label flips back.
+    toggle_btn.click()
+    page.wait_for_function(
+        "() => document.querySelector('button[data-on-click=\"toggle\"]').textContent.trim() === 'Start'",
+        timeout=3_000,
+    )
 
     assert errors == [], "Browser errors during pomodoro tick:\n  " + "\n  ".join(
         errors