Fix useLocalStorage Hook to Sync State Across Tabs

[adrish-mage]

Description

Fixes #8996

Adds a storage event listener to the useLocalStorage hook so components using it (currently GoalTracker) stay in sync across browser tabs. Previously the hook only read from localStorage once on mount, so a change made in one tab (e.g. editing a goal) wasn't reflected in another open tab without a manual reload.

This mirrors the existing cross-tab sync pattern already used in context/TranslationContext.tsx for language preference — just applied generically to the reusable hook.

Changes:

• Added a storage event listener inside the existing mount useEffect, filtered to only react to the hook's own key
• Cleanup on unmount via removeEventListener
• Added two tests: one confirming state updates on a matching-key storage event, one confirming it's ignored for a different key

Pillar

• 🎨 Pillar 1 — New Theme Design
• 📐 Pillar 2 — Geometric SVG Improvement
• 🕐 Pillar 3 — Timezone Logic Optimization
• 🛠️ Other (Bug fix, refactoring, docs)

Visual Preview

N/A — this is a hook-level logic fix with no visual/UI change. Behavior is covered by unit tests; can be manually verified by opening the dashboard in two tabs and editing a goal in one.

Checklist before requesting a review:

• I have read the CONTRIBUTING.md file.
• I have tested these changes locally (localhost:3000/api/streak?user=YOUR_USERNAME).
• I have run npm run format and npm run lint locally and resolved all errors (CI will fail otherwise).
• My commits follow the Conventional Commits format (e.g., feat(themes): ..., fix(calculate): ...).
• I have updated README.md if I added a new theme or URL parameter.
• I have started the repo.
• I have made sure that i have only one commit to merge in this PR.
• The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts).
• (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.

[vercel]

@adrish-mage is attempting to deploy a commit to the jhasourav07's projects Team on Vercel.

A member of the Team first needs to authorize it.

[retenta-bot]

This pull request addresses the issue of state synchronization across tabs by implementing a storage event listener in the useLocalStorage hook. This is similar to the previous decision made regarding syncing contribution goals with MongoDB, which aimed to enhance user experience by ensuring data persistence across devices. While this PR focuses on local storage synchronization, it’s important to consider the broader implications of state management in our application. Thank you for your contribution, and I look forward to your updates!

[github-actions]

📦 Next.js Bundle Size Report (Gzipped Sizes)

Asset	PR Size	Base Size	Difference	Status
static/chunks/app/(root)/dashboard/[username]/page-[hash].js	59.52 KB	59.46 KB	+0.06 KB (+0.09%)	🔴 Regression

📊 Summary of Totals

Category	PR Size	Base Size	Difference
Total JS	4999.01 KB	4998.89 KB	+0.12 KB (+0.00%)
Total CSS	354.18 KB	354.18 KB	0 B

[adrish-mage]

@JhaSourav07 lemme know if any changes are required !