feat: Add star icon display for starred messages

[deepak0x]

This PR adds visual star icon display for starred messages. When a message is starred, a star icon now appears immediately in the message's right icons area, providing instant visual feedback to users.

The implementation includes:

• Starred Component: New Starred.tsx component that displays the star icon when a message is starred
• Optimistic Updates: Immediate UI feedback when starring/unstarring messages, with automatic rollback on API failure
• Server Race Condition Handling: Prevents server updates from overwriting recent user actions within a 2-second window
• Memory Leak Prevention: Automatic cleanup of stale optimistic updates after 10 seconds

This feature improves user experience by providing immediate visual confirmation when messages are starred, making it easier for users to identify starred messages at a glance.

Issue(s)

Closes #6935

How to test or reproduce

1. Open any room/channel in the app
2. Long press on any message to open the action menu
3. Tap "Star" to star the message
4. Expected: The star icon should appear immediately on the right side of the message (next to other icons like pin, encrypted, edited, etc.)
5. Long press the same message again and tap "Unstar"
6. Expected: The star icon should disappear immediately
7. Test with multiple messages to ensure icons appear correctly for each starred message
8. Test in both regular messages and header messages (messages with author name displayed)

Screenshots/video

Screen.Recording.2026-01-21.at.6.11.23.PM.mov

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• Improvement (non-breaking change which improves a current function)
• New feature (non-breaking change which adds functionality)
• Documentation update (if none of the other choices apply)

Checklist

• I have read the CONTRIBUTING doc
• I have signed the CLA
• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works (if applicable)
• I have added necessary documentation (if applicable)
• Any dependent changes have been merged and published in downstream modules

[coderabbitai]

Walkthrough

This PR implements visual star icon display for starred messages by introducing a new Starred component, propagating the starred property through the message component hierarchy, enhancing the star action handler with optimistic updates and rollback capability, and establishing in-memory tracking of optimistic UI changes.

Changes

Cohort / File(s)	Summary
Message Component UI Layer app/containers/message/Components/RightIcons/Starred.tsx, app/containers/message/Components/RightIcons/index.tsx, app/containers/message/Message.tsx, app/containers/message/User.tsx, app/containers/message/index.tsx, app/containers/message/interfaces.ts	New Starred component displays star-filled icon when starred is truthy. Prop cascading added across message hierarchy: MessageContainer destructures and passes starred to Message, which passes to RightIcons, which renders Starred component. Updated IRightIcons, IMessageUser, and IMessageContent interfaces to include optional starred property.
Star Action & Optimistic Updates app/containers/MessageActions/index.tsx	Refactored handleStar signature from (messageId, starred) to (message). Implements optimistic update: registers update before server call, rolls back on failure with STAR_F event logging. Fetches message by id, applies protected mutations, and manages update lifecycle.
Optimistic Updates Infrastructure app/lib/methods/helpers/optimisticUpdates.ts	New module providing in-memory optimistic update tracking. Exports registerOptimisticUpdate, getOptimisticUpdate, clearOptimisticUpdate, and isRecentOptimisticUpdate functions with timestamp-based cleanup (10s default threshold) to manage pinned/starred state updates.
Message Subscription Handling app/lib/methods/subscriptions/room.ts	Updated message update logic to prioritize optimistic update values for pinned and starred fields when recent optimistic updates exist, otherwise uses incoming server values.

Sequence Diagram

sequenceDiagram
    actor User as User
    participant UI as MessageActions UI
    participant Handler as handleStar Handler
    participant DB as Database
    participant Cache as Optimistic Cache
    participant Server as Server API
    
    User->>UI: Clicks star icon
    UI->>Handler: handleStar(message)
    Handler->>Cache: registerOptimisticUpdate(messageId, {starred: true})
    Handler->>DB: protectedMutation (update message.starred)
    Handler->>DB: Write to database
    activate Server
    Handler->>Server: Send star request
    Server-->>Handler: Success/Failure
    deactivate Server
    alt Server succeeds
        Handler->>Cache: Update remains (implicit via timestamp)
        Handler->>UI: Emit STAR_S event
    else Server fails
        Handler->>DB: Rollback via protectedMutation
        Handler->>Cache: clearOptimisticUpdate(messageId)
        Handler->>UI: Emit STAR_F event (log error)
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• fix: show correct toast message on star and unstar #6658: Directly modified the same handleStar method signature and its call sites; prior related changes to star handling API.

Suggested reviewers

• diegolmello

Poem

✨ A star now shines where messages gleam,
Optimistic updates fulfil the dream,
From action to cache, a rollback in sight,
Starred icons display your bookmarks bright! 🐰

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly describes the main feature added: a star icon display for starred messages, which is the primary objective of this PR.
Linked Issues check	✅ Passed	The PR implements all coding requirements from issue #6935: creates a Starred component, passes starred prop through component hierarchy, handles optimistic updates with rollback, and integrates star icon display into RightIcons.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing star icon display and optimistic update handling. The refactored handleStar method and optimisticUpdates helper module both support the starred message feature.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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.}