FRONTEND — Implement Share Flow Interaction

[A6dulmalik]

Description:

Wire up the share icon in the header.

Figma Access

UI Reference

Location:

frontend/app/streak/page.tsx and related components

Existing Components to Use: `

ShareStreakCard, ShareOptionsSheet` components

Navigation:

This interaction will be available when clicking the streak fire icon on the navbar, which navigates to /streak page.

Flow

1. User taps share icon
2. Share Streak Card modal opens
3. User taps share
4. Bottom sheet opens
5. User selects platform

Acceptance Criteria

• Proper state management
• Accessible focus handling
• Escape closes modal
• Backdrop click closes
• Flow matches design
• No UI flicker
• Works on mobile & desktop
• Clean state transitions