feat(streak): build streak screen, calendar component, and exclude sidenav from full-screen pages

[simplicityf]

Summary

Built and assembled the full Streak feature screen for Mind Block, including all UI components,
page assembly, and layout exclusion for the sidenav.

---

Changes

1. Streak Page (frontend/app/streak/page.tsx)

Assembled the full Streak screen using all previously created components.

Structure:

• StreakNavbar — top navbar with logo, streak count, points badge, and profile avatar
• Page header row — close (✕) button, centered "Streak" title, share icon
• StreakSummaryCard — displays streak count badge + "day streak!" label + flame icon;
  goes greyscale when streakCount === 0
• StreakCalendar — full month calendar with navigation and streak day indicators
• Continue button — navigates back to /dashboard
• ShareStreakModal — bottom sheet triggered by the share icon, includes share card
  preview and 6 share options (Contacts, Telegram, Twitter, WhatsApp, E-mail, More)

---

2. StreakCalendar (frontend/components/StreakCalendar.tsx)

Monthly calendar component that visualises streak history.

Features:

• Month navigation (previous/next) with onMonthChange callback
• Monday-first 7-column grid layout
• Weekday header labels (Mon–Sun)
• Per-day StreakDayIndicator dots with 4 states:
  • empty — no activity
  • completed — activity done, not part of a streak run
  • streak — part of a consecutive streak run (fire icon + glow + horizontal highlight bar)
  • missed — day was missed
• Today highlight with white ring
• Accepts StreakData map keyed by YYYY-MM-DD

---

3. ClientLayout (frontend/components/ClientLayout.tsx)

Updated layout to hide the sidenav on pages that render full-screen without the sidebar.

Changes:

• Added usePathname() to detect the current route
• Introduced ROUTES_WITHOUT_SIDENAV constant for easy future maintenance
• Wrapped both <SideNav> and the mobile <Menu> hamburger button in a single
  conditional block so both are hidden together

Excluded routes:

Route	Reason
/	Landing page — standalone layout
/streak	Full-screen streak view

---

Testing

• Streak count displays correctly for active and zero states
• Calendar renders correct month with accurate day offsets
• Streak run highlights (fire icon + bar) appear on consecutive days
• Month navigation moves forward and backward correctly
• Share modal opens and closes correctly
• Sidenav renders normally on all other routes
• No layout shift or hydration errors on route change

Related Issue

Closes #276

Screenrecord

default.0.mp4

[drips-wave]

@simplicityf 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