Add a "Focus mode" that dims sidebar and hides non-essential chrome on /events/event-page

[greatest0fallt1me]

Description

This is a UI/UX issue adding a Focus mode toggle on the Market Detail page (app/(dashboard)/events/event-page/). When enabled, the sidebar, breadcrumbs, and right rail dim to 40% opacity and a single keypress (Esc) restores chrome.

Requirements and Context

• Persist preference per session in sessionStorage
• Keyboard shortcut F to toggle, Esc to exit
• Announce mode change via aria-live
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b feature/market-focus-mode

2. Implement changes
   • Edit app/(dashboard)/layout.tsx
   • Add components/focus-mode/focus-mode-context.tsx
3. Test and commit
   • Manual test on long market pages
   • Cover edge cases (mode + modal open simultaneously)
   • Include test output and notes in the PR

Example commit message

feat: focus mode for market detail page

Acceptance Criteria

• Toggle works via F key and an on-page button
• All dimmed chrome remains focusable for screen readers
• State announced on toggle

Guidelines

• WCAG 2.1 AA, motion-safe transitions
• Clear documentation and inline comments
• Timeframe: 96 hours