02.08 - Add Play/Pause and Reset Buttons to Timer

[codingU4EA]

Feature Overview

Enhance the timer functionality in the Pomo-Vibes app by adding two new buttons:

• Play/Pause button: Allows users to start or pause the timer.
• Reset button: Resets the timer back to 20 minutes, regardless of its current state.

Requirements

• The timer UI should display both the play/pause and reset buttons visibly and accessibly.
• Play/Pause button toggles between starting and pausing the timer.
• Reset button instantly resets the timer to 20:00 (20 minutes).
• Both buttons' states and icons (play, pause, reset) should be visually distinct and responsive.
• Ensure buttons work correctly across all timer states (running, paused, finished).
• Buttons must not interfere with background/emotoji functions.

Acceptance Criteria

• Users can start, pause, and reset the timer reliably using the provided buttons.
• Resetting always sets timer to 20:00.
• UI/UX for button placement and icons is clear and intuitive.
• No regressions to existing timer or emotoji functionality.