fix(sidebar): update room avatar in real-time

[Kalpana-chavhan]

Proposed changes

This PR fixes an issue where updating a room/channel avatar would reflect in the Room Header and Room Info panel, but not in the Sidebar until a manual refresh.

The issue was caused by:

1. SidebarItemWithData.tsx using a memo comparison that ignored avatarETag changes, preventing re-renders.
2. RoomIcon.tsx prop types excluding avatarETag, which prevented the component from tracking avatar version updates.

Checklist

• I have reproduced the issue locally.
• I have verified that the sidebar now updates immediately after an avatar change.
• The avatarETag is correctly used to bust the browser cache for the new image.

Steps to test

1. Open any channel.
2. Go to Room Info -> Edit -> Upload Avatar.
3. Save the new avatar.
4. Observe the sidebar item icon updating immediately without page refresh.

closes #37913

Summary by CodeRabbit

• Bug Fixes
  • Sidebar items now update immediately when a room avatar changes, ensuring the latest avatar is shown.
  • Room icons consistently reflect recent avatar updates across the app so users see avatar changes in real time.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

⚠️ No Changeset found

Latest commit: b2a2d33

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

This PR updates two room-related components to propagate avatarETag in the room prop type. RoomIcon's signature now includes avatarETag in its room prop, and SidebarItemWithData's memoization logic adds an explicit re-render trigger when avatarETag changes to ensure sidebar avatars refresh.

Changes

Cohort / File(s)	Summary
Avatar ETag Propagation apps/meteor/client/components/RoomIcon/RoomIcon.tsx	Updated RoomIcon component signature to accept `room: Pick<IRoom, 't'
Sidebar memo comparator apps/meteor/client/sidebar/RoomList/SidebarItemWithData.tsx	Enhanced memo comparator to include room.avatarETag in equality checks to force re-render when a room avatar changes; preserves existing identity and room-field checks.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested labels

stat: QA assured

Suggested reviewers

• ggazzo

Poem

A rabbit nibbles on a tag so neat,
Hops to the sidebar with joyous feet,
Avatars sparkle, no stale display,
ETags updated — hip hip hooray! 🐰✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The code changes directly address the linked issue #37913 by adding avatarETag to RoomIcon's prop types and updating SidebarItemWithData's memo comparator to trigger re-renders on avatar changes.
Out of Scope Changes check	✅ Passed	All changes are tightly scoped to the avatar update issue: RoomIcon signature update and SidebarItemWithData memo comparator enhancement are both necessary to fix the reported problem.
Title check	✅ Passed	The title accurately describes the main change: adding avatarETag tracking to force sidebar re-renders when room avatars update, enabling real-time avatar updates in the sidebar.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cubic-dev-ai]

3 issues found across 2 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="apps/meteor/client/sidebar/RoomList/SidebarItemWithData.tsx">

<violation number="1" location="apps/meteor/client/sidebar/RoomList/SidebarItemWithData.tsx:178">
P2: Duplicate `avatarETag` check. This condition is already checked a few lines above and will never be reached when the values differ. Remove this duplicate block.</violation>
</file>

<file name="apps/meteor/client/components/RoomIcon/RoomIcon.tsx">

<violation number="1" location="apps/meteor/client/components/RoomIcon/RoomIcon.tsx:10">
P2: Remove commented-out code. This appears to be the old implementation left in during development - it duplicates the active code and adds maintenance burden.</violation>

<violation number="2" location="apps/meteor/client/components/RoomIcon/RoomIcon.tsx:43">
P2: Inconsistent indentation: the new code uses spaces but this codebase uses tabs. This will likely cause linting failures or merge conflicts.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (1)

apps/meteor/client/components/RoomIcon/RoomIcon.tsx (1)

48-55: Remove inline comments per coding guidelines.

As per coding guidelines for **/*.{ts,tsx,js} files, avoid code comments in the implementation. The type change is self-explanatory.

🔎 Proposed fix

 }: {
-    // Add avatarETag here so the component tracks it
     room: Pick<IRoom, 't' | 'prid' | 'teamMain' | 'uids' | 'u' | 'avatarETag'>; 
     size?: ComponentProps<typeof Icon>['size'];
     isIncomingCall?: boolean;
     placement?: 'sidebar' | 'default';
 }): ReactElement | null => {
-    // Passing the room with the avatarETag into the hook
     const iconPropsOrReactNode = useRoomIcon(room); 

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between d3511ea and c76506c.

📒 Files selected for processing (2)

• apps/meteor/client/components/RoomIcon/RoomIcon.tsx
• apps/meteor/client/sidebar/RoomList/SidebarItemWithData.tsx

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

• apps/meteor/client/components/RoomIcon/RoomIcon.tsx
• apps/meteor/client/sidebar/RoomList/SidebarItemWithData.tsx

🧠 Learnings (3)

📚 Learning: 2025-10-28T16:53:42.761Z

Learnt from: ricardogarim
Repo: RocketChat/Rocket.Chat PR: 37205
File: ee/packages/federation-matrix/src/FederationMatrix.ts:296-301
Timestamp: 2025-10-28T16:53:42.761Z
Learning: In the Rocket.Chat federation-matrix integration (ee/packages/federation-matrix/), the createRoom method from rocket.chat/federation-sdk will support a 4-argument signature (userId, roomName, visibility, displayName) in newer versions. Code using this 4-argument call is forward-compatible with planned library updates and should not be flagged as an error.

Applied to files:

• apps/meteor/client/components/RoomIcon/RoomIcon.tsx

📚 Learning: 2025-11-17T15:07:13.273Z

Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 37398
File: packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx:357-363
Timestamp: 2025-11-17T15:07:13.273Z
Learning: In packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx, IconElement is a presentational, non-actionable element that does not require wrapping in AppIdProvider, similar to plain_text and mrkdwn renderers. Only actionable elements (those with actions, actionId, or interactive behavior) should be wrapped in AppIdProvider.

Applied to files:

• apps/meteor/client/components/RoomIcon/RoomIcon.tsx

📚 Learning: 2025-12-18T15:18:31.688Z

Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 37773
File: apps/meteor/client/views/mediaCallHistory/MediaCallHistoryInternal.tsx:24-34
Timestamp: 2025-12-18T15:18:31.688Z
Learning: In apps/meteor/client/views/mediaCallHistory/MediaCallHistoryInternal.tsx, for internal call history items, the item.contactId is guaranteed to always match either the caller.id or callee.id in the call data, so the contact resolution in getContact will never result in undefined.

Applied to files:

• apps/meteor/client/sidebar/RoomList/SidebarItemWithData.tsx

🧬 Code graph analysis (2)

apps/meteor/client/components/RoomIcon/RoomIcon.tsx (2)

apps/meteor/client/hooks/useRoomIcon.tsx (1)

• useRoomIcon (8-57)

packages/core-typings/src/IRoom.ts (1)

• isOmnichannelRoom (333-333)

apps/meteor/client/sidebar/RoomList/SidebarItemWithData.tsx (1)

packages/core-typings/src/IRoom.ts (1)

• isOmnichannelRoom (333-333)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: cubic · AI code reviewer

🔇 Additional comments (1)

apps/meteor/client/sidebar/RoomList/SidebarItemWithData.tsx (1)

163-212: Approve the core fix for avatar updates.

Adding the avatarETag comparison to the memo function correctly ensures the sidebar item re-renders when the room avatar changes. This, combined with the RoomIcon prop type update, addresses the original issue where avatar changes weren't reflected in the sidebar.