Refactor: Streak Sharing Flow & Accessibility Enhancements

[chibokaxavier]

Fixes #278

This PR refactors the streak sharing experience on the /streak page to follow a clean, two-step interaction flow. It improves the UI clarity by separating the summary card from the platform selection and introduces significant accessibility and UX refinements.

🚀 Key Changes

1. Streak Sharing Flow

• Two-Step Interaction: Refactored the flow so that clicking a share icon opens the ShareStreakCard (summary modal), which then transitions to the ShareOptionsSheet (bottom selection tray) upon clicking "Share".
• Trigger Wiring: Connected all share entry points (Navbar icons and Page Header icon) to the new modal-first flow.

2. Component Refactoring (ShareStreakCard)

• Simplified UI: Removed integrated social icons from the modal to focus on the streak summary.
• Dedicated Share Button: Added a primary call-to-action button to trigger the platform sheet.
• Improved Layout: Relocated the close button to the top-right and improved secondary styling.

3. Accessibility & UX Refinements

• Focus Trapping: Implemented robust tab-key focus traps in both the Modal and the Bottom Sheet to ensure keyboard navigation stays within the active dialog.
• Dismissal Methods: Ensured both Escape key and backdrop clicks correctly dismiss all dialogs with smooth exit animations.
• Visual Feedback: Added cursor-pointer to all interactive elements (buttons, backdrops, and navigation triggers) for intuitive user feedback.

🧪 Testing

• Direct Preview: Access http://localhost:3000/streak (works with provided demo data, no login required).
• Flow: Navbar Share -> Modal -> Share Button -> Bottom Sheet -> Platform Selection.
• Accessibility: Test Tab key navigation and Esc to close.

[A6dulmalik]

@chibokaxavier Kindly revert the changes made to this file.

[drips-wave]

@chibokaxavier Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits