Step 4: Sessions

Track focus and break sessions with auto-switching.

Where We Are

You have a working countdown timer. Now let's make it a proper Pomodoro — alternating between focus and break periods.

Define Session Types

Create a model to represent session types:
- Focus session (default: 25 minutes)
- Short break (default: 5 minutes)
- Long break (default: 15 minutes, every 4 focus sessions)

Track which session type is currently active.
Change the ring color based on session type:
- Focus = orange or red
- Break = green or teal

Auto-Switch Sessions

When a timer finishes:
- If it was a focus session, switch to a break
- If it was a break, switch to the next focus session
- Every 4 focus sessions, use a long break instead of a short one
- Automatically start the next session's timer

Show the current session type as a label above the ring
(e.g., "Focus" or "Break").

Track Completed Sessions

Keep a count of completed focus sessions.
Display it below the timer controls, like:
- "Sessions: 3 / 4" (where 4 means a long break is coming)
- Or show small dots/circles that fill in as sessions complete

Reset the count when the user wants to start fresh.

Settings Screen

Make the gear button open a settings sheet where users can adjust:
- Focus duration (slider or picker, 1-60 minutes)
- Short break duration (1-15 minutes)
- Long break duration (5-30 minutes)
- Sessions before long break (2-8)

Save these settings with @AppStorage so they persist.
When settings change, reset the current timer.

Test It

1. Set focus to 1 minute and break to 30 seconds (for testing)
2. Start the timer
3. Let focus complete — it should switch to a break automatically
4. Let the break complete — it should switch back to focus
5. Watch the session counter increase
6. After 4 focus sessions, the break should be longer

Checkpoint

By now you should have:

• Focus and break sessions alternate automatically
• Ring color changes per session type
• Session counter tracks progress
• Settings let you customize durations
• Long break triggers after 4 focus sessions

What You Learned

• Enums for session state management
• @AppStorage for simple persistence
• Building a settings screen with sheets
• State machines (focus → break → focus)

Exercises

1. Add the session model and auto-switching, then set focus to 1 minute and break to 30 seconds and watch a full focus → break → focus cycle run on its own.
2. Build the settings sheet, change the "sessions before long break" value, and confirm the long break triggers at the right count.
3. Decide between the "Sessions: 3 / 4" text label and the filling-dots option, then prompt Claude to implement your choice and note why it fits the app's feel.