[Bug]: Profile avatar doesn't update across tabs after changing it in settings

[Priyanka0205-CSE]

Bug Description

Hey, I noticed a small but annoying bug with profile avatars.
When I update my profile picture from the settings page, it changes on the current tab just fine. But if I have another tab open with RankerHub, it still shows my old avatar even after the update goes through. The only way to fix it is to manually refresh the other tab.
Looks like the navbar and sidebar are pulling the avatar from the initial load and not listening to changes in Firestore after that.
Steps to reproduce:

Open RankerHub in two tabs
Go to settings in one tab and update your profile picture
Switch to the second tab — old avatar still showing

Expected: Avatar updates everywhere without needing a manual refresh

Environment: Chrome, logged in with GitHub OAuth

[github-actions]

Thank you for opening this issue, @Priyanka0205-CSE! 🚀

A maintainer (@indresh404) will review this and assign it to you if the issue is valid. Please wait for assignment before you start working on it!

Happy contributing! 🌟

[Priyanka0205-CSE]

Hi @indresh404 

I would like to work on this issue as part of GSSoC'26.

Could you please assign it to me?

[saurabhhhcodes]

I've implemented a fix for this. The root cause is that Firestore's local IndexedDB cache (shared across tabs) can suppress the onSnapshot listener callback in other tabs. Instead, I'm using the window storage event: when the avatar is updated, the new URL is written to localStorage, and other tabs detect the change and update userData state immediately.

PR: #557

[Priyanka0205-CSE]

@saurabhhhcodes how were you able to start working on this before it was assigned?