[Feat]: add streak milestone celebration banner (issue #225)

[ap-ananya]

Summary

Added a streak milestone celebration banner for milestone streaks.

Closes #225

Features Implemented

• Milestone detection for 7, 30, 50, 100, 200, and 365 day streaks
• Dismissible celebration banner
• localStorage persistence for dismissed milestones
• Banner only appears once per milestone
• Reusable StreakMilestoneBanner component

How to Test

1. Start the development server
2. Navigate to the dashboard page
3. Reach or simulate a milestone streak value (7, 30, 50, 100, 200, 365)
4. Verify the celebration banner appears
5. Click dismiss (✕) and confirm the banner disappears
6. Refresh the page and verify the dismissed banner does not reappear
7. Verify future milestone banners still appear correctly

Testing

• Verified banner appears on milestone streaks
• Verified dismiss functionality
• Verified localStorage persistence after refresh

UI Update (Test image)

Checklist

• Linked issue in summary
• Banner tested locally
• Dismiss functionality works
• localStorage persistence verified
• Self-reviewed the changes

[vercel]

@ap-ananya is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thanks for your first PR on DevTrack! 🎉

A maintainer will review it within 48 hours. While you wait:

• Make sure CI is passing (type-check + lint)
• Double-check the PR description is filled out and the issue is linked
• Feel free to ask questions in Discussions if you need help

[Priyanshu-byte-coder]

Milestone detection and localStorage persistence logic are correct. Three quick fixes:

1. Hardcoded color: 'white' in StreakMilestoneBanner

// Current
style={{ background: 'var(--accent)', color: 'white' }}

// Fix — accent-foreground is always readable on top of accent
style={{ background: 'var(--accent)', color: 'var(--accent-foreground)' }}

2. Missing aria-label on dismiss button

<button onClick={() => onDismiss?.()} aria-label='Dismiss milestone banner'>
  ✕
</button>

3. Unnecessary whitespace-only changes in dashboard/page.tsx and page.tsx — please revert those lines, they add noise to the diff.

Fix these three and this is ready to merge.

[Priyanshu-byte-coder]

Good milestone celebration feature — localStorage persistence, milestone array, dismiss logic. A few fixes:

1. Hardcoded color: "white" in StreakMilestoneBanner:

style={{ background: "var(--accent)", color: "var(--accent-foreground)" }}

2. Missing type="button" and aria-label on dismiss button:

<button type="button" onClick={() => onDismiss?.()} aria-label="Dismiss milestone banner">

3. Add try/catch around JSON.parse in useEffect (localStorage can contain invalid JSON):

try {
  setDismissedMilestones(JSON.parse(stored));
} catch { /* ignore */ }

Fix these three and push — will merge.

[ap-ananya]

Addressed all review feedback:

• Replaced hardcoded white color with var(--accent-foreground)
• Added type="button" and aria-label to dismiss button
• Added try/catch around JSON.parse for safer localStorage handling
• Resolved merge conflicts with latest main branch changes

Thanks for the review!!

[Priyanshu-byte-coder]

Logic and localStorage pattern are correct. Three small fixes needed:

1. Move milestones to module level
const milestones = [7, 30, 50, 100, 200, 365] is a static constant — re-created on every render inside the component. Move it outside:

// top of file, before the component
const STREAK_MILESTONES = [7, 30, 50, 100, 200, 365];

2. Dismiss button has no visible styling
The ✕ button has no className — on the var(--accent) background it looks unstyled and has a tiny click target. Add at minimum:

<button
  type="button"
  onClick={() => onDismiss?.()}
  aria-label="Dismiss milestone banner"
  className="ml-4 rounded-md p-1 opacity-70 hover:opacity-100 transition-opacity"
>
  ✕
</button>

3. Minor: extra blank line in page.tsx + missing newline at EOF in StreakMilestoneBanner.tsx
The page.tsx change adds an empty line that wasn't there. Revert that. Add a newline at the end of StreakMilestoneBanner.tsx (missing \n after the last }).

Everything else looks good — correct useEffect pattern for localStorage, CSS vars used throughout, aria-label on the dismiss button, proper fragment wrapping.

[ap-ananya]

Addressed latest review feedback:

• Moved STREAK_MILESTONES constant to module scope
• Added styling to dismiss button for better UX/accessibility
• Removed extra blank line in page.tsx
• Added newline at EOF in StreakMilestoneBanner.tsx

Thanks again for the review!