Implement the ShortcutsOverlay React component for Now View #1204

Title

Implement the ShortcutsOverlay React component for Now View

Description

Develop the ShortcutsOverlay component to display real-time keyboard shortcut hints relevant to the Now View. This overlay should present available keyboard actions for focused navigation, completion, and event/timer control in the Now context. Present the shortcut list with their keys and descriptions, using accessible markup and styling consistent with the Compass design system.

Scope

• Implement the ShortcutsOverlay React component to render applicable shortcut hints for the Now View.
• Leverage the shared shortcuts data and types (packages/web/src/views/Day/components/Shortcuts/data/shortcuts.data.ts and types/shortcut.types.ts).
• Use or extend the existing components: ShortcutHint, ShortcutList, ShortcutSection as building blocks.
• Ensure the overlay is context-aware: the shown shortcuts should update based on whether the user is in the Now View (e.g., navigation, completion, etc.).
• Use accessible ARIA roles and meaningful labels (e.g., aria-label="Shortcut overlay").
• Display the overlay in the intended top-right positioning/style for Now View, per design and EPIC #1105.
• Support keyboard and mouse dismissal as needed.
• Write unit tests for all critical rendering and interaction scenarios.

Acceptance criteria

• Overlay appears in Now View and accurately lists all relevant shortcuts for actions available in that context.
• Integrates with existing Compass shortcut data/types for maintainability.
• Uses accessible semantics (ARIA, keyboard navigation/dismiss).
• Respects design for spacing, alignment, font, and color per Now View requirements.
• Unit tested for basic rendering, presence/absence of shortcuts, correct update based on context, etc.

Business use case

The ShortcutsOverlay is essential for discoverability and efficiency in the Now View, helping users quickly learn and adopt keyboard-based workflows. Ensuring visible shortcuts increases adoption and productivity, making advanced features approachable even for new users.

Additional context

• See EPIC #1105 for Now View requirements and context.
• Reference shortcut building blocks (ShortcutHint, ShortcutList, ShortcutSection), and shared data/types.
• Coordinate with designers/product on positioning and responsive behavior.
• Style with Tailwind and Compass theme tokens as required.
• Example inspiration: Vimcal/Sunsama/Notion overlays for shortcuts.
• Component should be co-located in: packages/web/src/views/Now/components/ShortcutsOverlay.tsx.