Title

Implement the UpcomingEvent React component for Now View

Description

Develop an UpcomingEvent component to creatively present information about the next event in the Now View. The component is to be used in Compass's Now View, building on the real-time event data provided by useNowData and its underlying hooks.

Scope

• Implement the UpcomingEvent React component
• Render, when the next/upcoming event exists:
  • The title of the upcoming event
  • Remaining time before the upcoming event starts (starts prop)
• If there are no more upcoming events today, display a minimal message panel: "No more events today. Lock in" as the only content.
• Style and position the component absolutely at the top right of the screen, ensuring it does not crowd or overlap with the ShortcutOverlay component (future-proof the layout).
• Make the design responsive so it is clear and attractive on both mobile and desktop screens.
• Use creative colors, icons, and Compass UI tokens/themes to differentiate urgency (time remaining) and harmonize it with the overall Now View aesthetic.
• Ensure component is accessible (readable alt text, contrast, semantic markup).
• Provide placeholder or fallback UI when props are missing or data is loading.

Acceptance criteria

• When next event exists, component displays its title and the remaining time until it starts.
• When no upcoming events, only the message "No more events today. Lock in" is displayed.
• Styling, positioning, and responsiveness align with Compass Now View and UI tokens, and leave appropriate space for ShortcutOverlay (do not obstruct top-right overlays).
• Colors, icons, and typography are consistent with Compass app themes.
• Component is covered with unit tests for rendering with/without next event, and for layout on common device widths.
• Overall DX and end-user experience is aesthetic, accessible, and intuitive.

Business use case

The UpcomingEvent component enhances the Now View by providing users with a clear glance at what's next, helping them prepare and focus for upcoming events. If there are no more events today, a motivational message helps drive focus.

Additional context

• Reference: https://lite.compasscalendar.com/now
• See EPIC #1105 for Now View requirements.
• Use heroicons, Compass theme icons, and Tailwind for creative markers of time.
• Place the component in packages/web/src/views/Now/components/UpcommingEvent.tsx and test in the Now View.