Skip to content

Phase 9: Map — hovering alert highlights related map region #175

@elfensky

Description

@elfensky

Description

When hovering an alert card on the desktop dashboard, highlight the corresponding sector on the galaxy map. This creates a cross-panel interaction since the map is always visible alongside the sidebar.

Context

Split from #168 (Desktop & Wide Responsive). The desktop layout pins the map while the sidebar scrolls, making hover-to-highlight a natural interaction pattern.

Requirements

  • Hovering an alert card highlights the related sector on the galaxy map
  • Highlight should be visually distinct (e.g., pulse, glow, or opacity change)
  • Desktop only (lg:+) — no effect on mobile/tablet where map and alerts aren't side-by-side
  • Should not affect map performance or cause layout shifts

Key Files

  • src/components/h1/Alerts/Alerts.jsx
  • src/components/h1/Galaxy/Map.jsx
  • src/components/h1/Dashboard/DashboardClient.jsx (state coordination)

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementUpdate to an existing featurefrontendUI/UX and frontend work

    Projects

    Status

    No status

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions