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 !

[Aamod007]

Great fix! Adding a \storage\ event listener to \useLocalStorage.ts\ perfectly solves the synchronization issue across multiple tabs. It's great that you only react to the specific key matching the hook's invocation.

The tests you've added in \useLocalStorage.test.ts\ to dispatch simulated \StorageEvent\s with both matching and non-matching keys perfectly validate this behavior.

Labels applied:

• type:bug: Fixes state desynchronization across tabs.
• level:intermediate: Requires handling cross-tab \StorageEvent\ listeners within a React hook lifecycle.
• quality:clean: Simple, effective logic backed by good unit tests.

[github-actions]

🎉 Congratulations @adrish-mage! Your PR has been successfully merged. 🚀

Thank you for contributing to CommitPulse. Your work helps us build a better tool for the community.

⚠️ Important for GSSoC Contributors:
You are strictly advised to join our Discord Server as it is mandatory for all GSSoC participants. All important announcements, point claims, and community discussions happen there.

Keep building! 💻✨