Step 2: Timer UI

Build the circular timer display with a ring indicator.

Where We Are

You have a basic app shell with static text. Now let's build the signature Pomodoro look — a circular progress ring.

Draw the Ring

Create a circular timer view that shows:
- A background circle (gray, thin stroke)
- A foreground circle (colored, same stroke) that represents remaining time
- The time displayed in large text in the center (like "25:00")

Use SwiftUI's Circle shape with .trim(from:to:) for the progress arc.
The ring should start from the top (12 o'clock position).
Use a stroke width of about 12 points.

Style It

Make the timer view look clean:
- Use a dark background for the whole screen
- Make the progress ring a bright accent color (like orange or teal)
- Use a large, monospaced font for the time text so digits don't jump around
- Add some padding so the ring doesn't touch the edges
- The ring should be about 280 points wide

Add Controls

Below the timer ring, add three buttons in a row:
- "Reset" on the left (SF Symbol: "arrow.counterclockwise")
- "Start" in the center (SF Symbol: "play.fill"), larger than the others
- A placeholder button on the right for later (SF Symbol: "gear")

Style the Start button as a filled circle with the icon inside.
Make Reset and Settings buttons smaller and more subtle.

Test It

1. Run the app
2. You should see a circular ring with "25:00" in the center
3. Three buttons below the ring
4. Nothing works yet — that's next

The ring should look like a full circle for now (representing 100% time remaining).

Checkpoint

By now you should have:

• Circular progress ring displays correctly
• Time shows in the center of the ring
• Start, Reset, and Settings buttons visible
• Clean, dark-themed layout

What You Learned

• SwiftUI Circle and .trim() for progress arcs
• Overlay and ZStack for layering views
• SF Symbols for button icons
• Monospaced fonts for stable number display

Exercises

1. Paste the "Draw the Ring" and "Style It" prompts in sequence, then run the app and confirm the ring renders as a full circle with "25:00" centered.
2. Add the three controls with the "Add Controls" prompt, then check that the Start button is visually dominant and the Reset/Settings buttons read as secondary.
3. Try swapping the accent color in a follow-up prompt (e.g., teal instead of orange) and decide which feels right for a focus app — note why.