Implement the useNowView React hook for real-time event tracking using Timer #1200

Priority

High (would significantly improve my experience)

Feature Description

Implement the useNowView React hook to track an event's start and end time in real time by leveraging the Timer class. The hook should:

• Expose an API to track and update the remaining time for the current event.
• Internally initialize and manage the Timer class instance, which tracks event start and end, and emits updates.
• Reactively update its returned values based on Timer ticks, start, and end events.
• Integrate seamlessly into the Now Planner view described in EPIC Add the Now Planner #1105 (/now route), powering the top-right card that displays the number of minutes until the next event.
• Support starting and stopping manual timer tracking as needed for the UI/UX of the Now view.
• Avoid usage of Redux Saga as per technical direction in the Now Planner EPIC.

Reference: Add the Now Planner (#1105)

Use Case

The useNowView hook provides live countdown and event tracking, helping users to focus and know exactly how much time remains for their current event or task. The tracked time is visually surfaced in the interface, supporting the real-time needs of focus and productivity views such as Now Planner.

Additional Context

• See MVP and UI requirements in EPIC #1105
• Integrate with the Timer class (see packages/core/src/util/timer.ts)
• Avoid Redux Saga (tech debt reduction)
• Use local or React-managed state as needed
• Example inspiration: Compass prototype (https://lite.compasscalendar.com/now), Vimcal, Sunsama
• Display timer in top-right card as described
• Ensure the hook can be tested effectively with simulated event durations and timer ticks
• Reference test suite for Timer (packages/core/src/util/timer.test.ts) for possible test patterns
• Styling via Tailwind per Now Planner guidelines