Implement the FocusedEvent React component for Now View #1205

Title

Implement the FocusedEvent React component for Now View

Description

Develop a FocusedEvent component to visually present details about the currently focused event in the Now View. This component will surface key event information and control actions in a creative, accessible way, leveraging the app's design system and supporting a seamless real-time interaction for users.

Scope

• Implement the FocusedEvent React component with props:

  {
    event?: Schema_WebEvent | null;
    countdown?: string;
    start?: () => void;
    end?: () => void;
    timeLeft?: string;
  }

• Props mirror data from the useNowData React hook.
• Render the following details (Group 1):
  • The event title
  • The event's start and end date
  • The event's description
• Render the following actions/state indicators (Group 2):
  • Start button, styled with appropriate color, placement, and sizing; triggers the start prop
  • Button should change to Stop when the event is running
  • Real-time countdown timer reflecting the countdown prop; style with creative but consistent colors for time urgency
  • Block showing time remaining (from timeLeft prop) until the event ends, updating in real-time
• Ensure layout, spacing, and UI tokens align with existing Compass themes (Tailwind, token colors, iconography)
• Responsive design -- visually pleasing on small and large screens, with creative placement and alignment
• Ensure the design accommodates potential placement of the ShortcutOverlay component (avoid overlay clashes or crowding)

Acceptance criteria

• Displays focused event's title, duration, and description clearly
• Start and Stop button toggles state as timer runs; triggers start/end handlers
• Countdown display and remaining time update in real time via props
• Responsive on all modern viewports, visually coherent and accessible
• All styles and icons align with Compass app design tokens/themes
• Component is tested for all key render/interaction scenarios
• Future-proof and maintains visual space for ShortcutOverlay on Now View

Business use case

The FocusedEvent component enables users to visually track their active event, monitor elapsed and remaining time, and quickly start/stop real-time focus. Its clarity and design drive user adoption of time-blocking and productivity in Compass’ Now View.

Additional context

• Reference designs and tokens from existing Compass UI components
• See EPIC #1105 for Now View specifications
• Review useNowData for how props/data flow to the component
• Place as top-level card or overlay in Now View, reserving space for other overlays/components
• Use heroicons, compass theme icons, and Tailwind colors for visual flair
• Example inspiration: Sunsama, Notion, Vimcal session/focus cards