Skip to content

Comments

feat: channel list redesign#3418

Open
khushal87 wants to merge 9 commits intodevelopfrom
feat/channel-list-redesign
Open

feat: channel list redesign#3418
khushal87 wants to merge 9 commits intodevelopfrom
feat/channel-list-redesign

Conversation

@khushal87
Copy link
Member

This pull request introduces significant improvements to the channel preview and messaging experience, focusing on richer message previews, enhanced delivery status indicators, and improved flexibility in UI customization. The changes modernize the ChannelPreview and ChannelList components to better support draft messages, typing indicators, poll previews, and message delivery statuses, while also providing more control over the layout and appearance of muted status indicators.

Enhancements to Channel Preview and Message Status:

  • The ChannelPreview and related components now support richer message previews, including draft messages, typing indicators, poll previews, and error states. Message delivery status (sent, delivered, read) is now visually indicated for the latest message sent by the current user. [1] [2] [3] [4] [5] [6] [7]

UI Customization and Layout Improvements:

  • The mutedStatusPosition prop is added throughout the channel list and preview components, allowing the muted status indicator to be positioned either inline with the title or at the bottom of the preview. This prop is now part of the ChannelListProps and is passed through context to all relevant components. [1] [2] [3] [4] [5] [6] [7] [8]

Visual and Interaction Tweaks:

  • The channel preview UI is updated to use Pressable instead of TouchableOpacity for better feedback and flexibility, and the avatar size is increased for improved visibility. Layout and styling are modernized for consistency and accessibility. [1] [2]

Minor UI Adjustments:

  • The badge size in the image overlay component is reduced from large to small for a more compact appearance.
  • The UserAdd icon in the new direct messaging screen is now explicitly sized for consistency.

@Stream-SDK-Bot
Copy link
Contributor

Stream-SDK-Bot commented Feb 23, 2026

SDK Size

title develop branch diff status
js_bundle_size 429 KB 423 KB -5953 B 🚀

@khushal87 khushal87 marked this pull request as ready for review February 23, 2026 09:05
return channel;
};

describe('useLatestMessagePreview', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we deleting a bunch of tests ? I can't see them moved elsewhere (might be wrong though)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This hook is not relevant any more so its deleted. We have to properly write tests for MessagePreview component. I have it in my todo and there are a lot of edge cases, so I will handle it later. If you want I can spend time to add now. But the reason this is deleted, is the hook is non-relevant anymore.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm okay, and is there a hook that replaces it ? Or what's the deal ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MessagePreview replaces it

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In that case instead of using a hook (which returns an atomic string) we're relying on the component itself deciding. I would definitely move this inside of a hook to make sure that updates do not happen where they should not

"{{ index }} of {{ photoLength }}": "{{ index }} sur {{ photoLength }}",
"{{ replyCount }} Replies": "{{ replyCount }} Réponses",
"{{ user }} is typing": "{{ user }} est en train d'écrire",
"You voted: {{ option }}": "Vous avez voté: {{ option }}",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we also removing the old translations which are no longer relevant ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not yet, we can do that cleanup later. Once we know what's not used finally.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can run over a check later to remove onces that are not used.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, but we're leaving a lot of stuff to do "later". It worries me a bit that we'll have too much on our plate to clean up later on and it'll introduce issues. Right now we're just bloating the SDK with redundant stuff.

return lastMessage?.type === 'deleted' ? semantics.textTertiary : semantics.textSecondary;
}, [semantics.textTertiary, semantics.textSecondary, lastMessage?.type]);

const textStyle = useMemo(() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should come from useStyles preferably, we're doing an extra useMemo for no reason here.

For iconProps it's a bit different, but we can think about fixing this later I guess.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants