RocketChat / RocketChat/Rocket.Chat.ReactNative

feature request: Star Icon Display on starred measages

Open
#6,935 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

🎉 feature
Dominant language
TypeScript
Stars
2.4k
Forks
1.5k
Avg merge
1d 18h
Merged PRs (30d)
90

Description

Feature Description

Add visual star icon display on messages that have been starred by the user. Currently, when a user stars a message, there is no visual indicator (star icon) displayed on the message itself, making it difficult for users to identify which messages they have starred at a glance.

Motivation and Use Case

Why this feature is needed:

  • Users currently have no way to visually identify starred messages in the chat interface
  • Starred messages are important bookmarks that users want to quickly locate
  • Visual indicators improve user experience and make the app more intuitive
  • This feature exists in the web version and should be available in the mobile app for consistency

Use cases:

  • Users want to quickly see which messages they've starred without opening a separate starred messages view
  • Users want visual confirmation that their star action was successful
  • Users want to easily identify important/bookmarked messages in a conversation thread
Implementation Ideas
  1. Create a Starred component similar to the existing Pinned component
  2. Add the Starred component to the RightIcons component that displays message action icons
  3. Ensure the starred prop is properly passed through the component hierarchy:
    • MessageContainerMessageRightIconsStarred
  4. Handle boolean conversion for starred prop from WatermelonDB (which may return null/undefined)
  5. Ensure the star icon appears on header messages (first message in a sequence) when starred
  6. Consider implementing optimistic updates for immediate UI feedback when starring/unstarring
Is this feature available in the API or web version?

Available in API

Rocket.Chat Server Version

NA

Rocket.Chat App Version

NA

Device Name

NA

OS Version

NA

Additional Context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the existing Pinned, RightIcons, Message, and MessageContainer components, then trace how the starred prop currently flows through them. Done means starred messages show a star indicator in the mobile chat, including header messages, with starring and unstarring reflected correctly.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
frontend, mobile
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.