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

src/components/StreakMilestoneBanner.tsx

@@ -0,0 +1,33 @@
+"use client";
+type Props = {
+  streak: number;
+  onDismiss?: () => void;
+};
+
+export default function StreakMilestoneBanner({
+  streak,
+  onDismiss,
+}: Props) {
+  return (
+    <div
+      className="rounded-xl p-4 mb-4 flex items-center justify-between"
+      style={{
+        background: "var(--accent)",
+        color: "var(--accent-foreground)",
+      }}
+    >
+      <div>
+        🎉 You reached a {streak}-day streak! Keep it up!
+      </div>
+
+      <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>
+    </div>
+  );
+}

src/components/StreakTracker.tsx

@@ -3,8 +3,11 @@
 import { useCallback, useEffect, useState } from "react";
 import { useAccount } from "@/components/AccountContext";
 import { useCountUp } from "@/hooks/useCountUp";
+import StreakMilestoneBanner from "@/components/StreakMilestoneBanner";
 import { useHeatmapTheme } from "@/hooks/useHeatmapTheme";
 
+const STREAK_MILESTONES = [7, 30, 50, 100, 200, 365];
+
 interface StreakData {
   current: number;
   longest: number;
@@ -27,6 +30,7 @@ export default function StreakTracker() {
   const [data, setData] = useState<StreakData | null>(null);
   const [contributionData, setContributionData] = useState<ContributionData | null>(null);
   const [loading, setLoading] = useState(true);
+  const [dismissedMilestones, setDismissedMilestones] = useState<number[]>([]);
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
   const [minutesAgo, setMinutesAgo] = useState(0);
   const [copied, setCopied] = useState(false);
@@ -91,6 +95,20 @@ export default function StreakTracker() {
     fetchFreeze();
   }, [fetchStreak]);
 
+  useEffect(() => {
+    const stored = localStorage.getItem(
+      "devtrack:dismissed-milestones"
+    );
+
+    if (stored) {
+      try {
+        setDismissedMilestones(JSON.parse(stored));
+      }catch {
+        // ignore invalid localStorage data
+      }
+    }
+  }, []);
+
   useEffect(() => {
     if (!lastUpdated) return;
     const interval = setInterval(() => {
@@ -237,7 +255,37 @@ export default function StreakTracker() {
     }).catch(() => {});
   };
 
+  const currentMilestone =
+    STREAK_MILESTONES.find(
+      (m) => m === data?.current
+    );
+  const shouldShowBanner =
+    currentMilestone &&
+    !dismissedMilestones.includes(currentMilestone);
+  const handleDismissBanner = () => {
+    if (!currentMilestone) return;
+
+    const updated = [
+      ...dismissedMilestones,
+      currentMilestone,
+    ];
+
+    setDismissedMilestones(updated);
+
+    localStorage.setItem(
+      "devtrack:dismissed-milestones",
+      JSON.stringify(updated)
+    );
+  };
+
   return (
+    <>
+      {shouldShowBanner && currentMilestone && (
+        <StreakMilestoneBanner
+          streak={currentMilestone}
+          onDismiss={handleDismissBanner}
+        />
+      )}
     <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
       <div className="mb-4 flex items-center justify-between">
         <h2 className="text-lg font-semibold text-[var(--card-foreground)]">
@@ -397,6 +445,7 @@ export default function StreakTracker() {
         />
       ) : null}
     </div>
+    </>
   );
 }