stream-chat-react-native-core 10.0.0-rc.1 → 10.0.0-rc.2

package/src/components/ChannelDetails/hooks/useFileAttachmentListSections.ts

@@ -13,20 +13,19 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import { getDateString } from '../../../i18n/utils';
 
 /**
- * A single file/audio attachment paired with the message it belongs to. The file attachment list
- * renders one row per attachment, so a message with multiple file attachments yields multiple rows.
+ * A file or audio attachment with its message. A message with several file attachments yields one
+ * tile per attachment.
  */
 export type FileAttachmentTile = { attachment: Attachment; message: MessageResponse };
 
 export type FileAttachmentSection = { data: FileAttachmentTile[]; title: string };
 
-/**
- * Gathers the file/audio attachments from a message, excluding scraped/OG link-preview content.
- */
+// File and audio attachments of a message, excluding scraped link previews.
 const getFileAttachments = (message: MessageResponse): Attachment[] =>
   (message.attachments ?? []).filter(
     (attachment) =>
-      // We provide mime_type here to avoid attachments with mime_type being categorized as file
+      // The attachment's own `mime_type` is passed as a supported video format so that attachments
+      // carrying one are not classified as files.
       (isFileAttachment(
         attachment,
         attachment?.custom?.mime_type ? [attachment.custom.mime_type] : [],
@@ -36,14 +35,12 @@ const getFileAttachments = (message: MessageResponse): Attachment[] =>
   );
 
 /**
- * Gathers and filters the file/audio attachments from a list of messages, then groups them into
- * newest-first month sections for the file attachment list. Each section's `data` is a flat list
- * of `{ attachment, message }` tiles; messages without renderable file attachments are skipped.
+ * Groups the file and audio attachments of the messages into month sections, in message order.
+ * Messages without file attachments are skipped. The month title follows the configured locale and
+ * can be customized through the `timestamp.FileAttachmentListSection` translation key.
  *
- * The month label is produced through the shared `getDateString` + translation-key
- * pipeline used by message timestamps (see `useUserActivityStatus`), so the format
- * follows the configured locale and can be customized via the
- * `timestamp/FileAttachmentListSection` translation key.
+ * @param messages The messages to gather attachments from.
+ * @returns The sections, each with a title and its `{ attachment, message }` tiles.
  */
 export const useFileAttachmentListSections = (
   messages?: MessageResponse[],

package/src/components/ChannelDetails/hooks/useMediaList.ts

@@ -5,18 +5,15 @@ import { type Attachment, isScrapedContent, type MessageResponse } from 'stream-
 import { FileTypes } from '../../../types/types';
 
 /**
- * A single image/video attachment paired with the message it belongs to. The media grid renders
- * one tile per attachment, so a message with multiple media attachments yields multiple tiles.
+ * An image or video attachment with its message. A message with several media attachments yields
+ * one tile per attachment.
  */
 export type MediaTile = {
   attachment: Attachment;
   message: MessageResponse;
 };
 
-/**
- * Flattens search-result messages into one tile per renderable image/video attachment, applying
- * the same attachment rules the message list uses to decide what counts as gallery media.
- */
+// One tile per image or video attachment, excluding scraped link previews.
 const getMediaTiles = (messages: MessageResponse[] | undefined): MediaTile[] => {
   if (!messages) {
     return [];
@@ -39,9 +36,11 @@ const getMediaTiles = (messages: MessageResponse[] | undefined): MediaTile[] =>
 };
 
 /**
- * Gathers and filters the image/video attachments from a list of messages into a flat list of
- * media tiles, ready to render in the media grid. Scraped/OG link-preview attachments and
- * non-media attachments are excluded.
+ * Flattens the messages into one tile per image or video attachment. Scraped link previews and
+ * other attachment types are excluded.
+ *
+ * @param messages The messages to gather attachments from.
+ * @returns The media tiles.
  */
 export const useMediaList = (messages?: MessageResponse[]): MediaTile[] =>
   useMemo(() => getMediaTiles(messages), [messages]);

package/src/components/ChannelDetails/hooks/useUserActivityStatus.ts

@@ -8,14 +8,12 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import { getDateString } from '../../../i18n/utils';
 
 /**
- * Returns the localized presence status string for a user:
- *   - `t('Online')` when `user.online === true`
- *   - `t('timestamp/UserActivityStatus')` (e.g. "Last seen 10 minutes ago") when offline
- *     with a valid `last_active`
- *   - `t('Offline')` otherwise (including `user === undefined` or an unparseable date)
+ * Returns the localized presence status of a user: "Online", a last-seen time such as "Last seen
+ * 10 minutes ago" (the `timestamp.UserActivityStatus` translation key) when offline with a known
+ * `last_active`, and "Offline" otherwise.
  *
- * The relative time is produced through the shared `getDateString` + translation-key
- * pipeline used by message timestamps, so the format follows the configured locale.
+ * @param user The user.
+ * @returns The translated status text.
  */
 export const useUserActivityStatus = (user?: UserResponse): string => {
   const { t, tDateTimeParser } = useTranslationContext();

package/src/components/ChannelList/ChannelList.tsx

@@ -36,13 +36,14 @@ export type ChannelListProps = Partial<
     | 'pinnedStatusPosition'
   >
 > & {
-  /** Optional function to filter channels prior to rendering the list. Do not use any complex logic that would delay the loading of the ChannelList. We recommend using a pure function with array methods like filter/sort/reduce. */
+  /**
+   * Filters the channels before they render. It runs on every render, so use a cheap pure function.
+   */
   channelRenderFilterFn?: (channels: Array<Channel>) => Array<Channel>;
   /**
-   * The `ChannelPaginator` this list renders. The app creates it with the list's filters, sort and
-   * request options, and registers it on `client.channelManager` with `insertPaginator` so it receives
-   * events. The list loads its first page when it has none and never disposes it, so a list that
-   * mounts again shows the channels it already has.
+   * The `ChannelPaginator` this list renders. The app creates it with the filters, sort and request
+   * options, and registers it with `client.channelManager.insertPaginator` so it receives events.
+   * The list loads the first page when there is none and never disposes the paginator.
    */
   paginator: ChannelPaginator;
   notificationHostId?: string;
@@ -51,8 +52,8 @@ export type ChannelListProps = Partial<
 const DEFAULT_ADDITIONAL_FLAT_LIST_PROPS: Partial<FlatListProps<Channel>> = {};
 
 /**
- * Renders the channels of an app-owned `ChannelPaginator` and lets the user select one to open.
- * The ChannelList renders a ChannelListView which provides the UI for the underlying React Native FlatList.
+ * Renders the channels of an app-owned `ChannelPaginator` and lets the user select one to open,
+ * through a `ChannelListView`.
  *
  * @example ./ChannelList.md
  */
@@ -80,7 +81,7 @@ export const ChannelList = (props: ChannelListProps) => {
   const channelManager = client.channelManager;
   const { NotificationList } = useComponentsContext();
 
-  // Ref-counted on the shared manager: subscriptions live only while at least one ChannelList is mounted.
+  // Ref-counted on the shared manager: subscriptions live while at least one list is mounted.
   useEffect(() => channelManager.registerSubscriptions(), [channelManager]);
 
   const {

package/src/components/ChannelList/ChannelListView.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo } from 'react';
-// RNGR's FlatList ist currently breaking the pull-to-refresh behaviour on Android
-// See https://github.com/software-mansion/react-native-gesture-handler/issues/598
+// The gesture handler's FlatList breaks pull-to-refresh on Android.
 import { FlatList, StyleSheet, View } from 'react-native';
 
 import type { Channel } from 'stream-chat';
@@ -17,38 +16,21 @@ import { ChannelPreview } from '../ChannelPreview/ChannelPreview';
 import { useNetworkConnectionState } from '../Chat/hooks/useNetworkConnectionState';
 import { useSettledWSConnectionHealth } from '../Chat/hooks/useWSConnectionState';
 
-/**
- * The list's query state, passed down by `ChannelList`.
- */
+/** The list's query state, passed down by `ChannelList`. */
 export type ChannelListState = {
-  /**
-   * A control prop used to determine whether the first query of the channel list has succeeded.
-   */
+  /** Whether the first page of channels has loaded. */
   channelListInitialized: boolean;
-  /**
-   * The channels to render.
-   */
+  /** The channels to render. */
   channels: Channel[] | null;
-  /**
-   * Whether or not the FlatList has another page to render
-   */
+  /** Whether another page of channels can be loaded. */
   hasNextPage: boolean;
-  /**
-   * Initial channels query loading state, triggers the LoadingIndicator
-   */
+  /** Whether the initial channels query is loading, which shows the loading indicator. */
   loadingChannels: boolean;
-  /**
-   * Whether or not additional channels are being loaded, triggers the
-   * ChannelListFooterLoadingIndicator
-   */
+  /** Whether the next page is loading, which shows `ChannelListFooterLoadingIndicator`. */
   loadingNextPage: boolean;
-  /**
-   * Triggered when the channel list is refreshing, displays a loading spinner at the top of the list
-   */
+  /** Whether a pull-to-refresh is in progress, shown as a spinner at the top of the list. */
   refreshing: boolean;
-  /**
-   * Error in channels query, if any
-   */
+  /** Error of the channels query, if any. */
   error?: Error;
 };
 
@@ -73,8 +55,8 @@ const StatusIndicator = ({
     return null;
   }
 
-  // `=== false` for the network (unknown must not read as offline), plain falsy for the socket
-  // (always a boolean).
+  // `=== false` for the network, as an unknown status must not read as offline. The socket status
+  // is always a boolean.
   if (isNetworkOnline === false || !isWSOnline) {
     return (
       <View style={styles.statusIndicator}>
@@ -155,7 +137,7 @@ const ChannelListViewWithContext = (props: ChannelListViewPropsWithContext) => {
         ref={setFlatListRef}
         refreshing={refreshing}
         renderItem={renderItem}
-        // Rows subscribe to their own channel, so a list update re-renders only the cells it changed.
+        // Rows subscribe to their own channel, so a list update re-renders only the changed cells.
         strictMode
         style={styles.flatList}
         testID='channel-list-view'
@@ -172,8 +154,7 @@ export type ChannelListViewProps = Partial<
   ChannelListState;
 
 /**
- * This UI component displays the preview list of channels and handles Channel navigation. It
- * receives all props from the ChannelList component.
+ * The preview list of channels, rendered by `ChannelList` with its state.
  *
  * @example ./ChannelListView.md
  */

package/src/components/ChannelList/__tests__/ChannelList.test.tsx

@@ -62,7 +62,7 @@ const ChannelPreviewComponent = ({ channel }: { channel: ChannelType }) => {
   return (
     <View accessibilityLabel='list-item' testID={channel.id}>
       <Text>{name}</Text>
-      <Text>{channel.messagePaginator.headItems[0]?.text}</Text>
+      <Text>{channel.messagePaginator.latestMessage?.text}</Text>
     </View>
   );
 };
@@ -513,7 +513,7 @@ describe('ChannelList', () => {
     describe('message.new', () => {
       // The message must carry the target channel's `cid`: v10's `MessageIntervalPaginator` filters
       // ingested messages by `cid` (`buildMatchFilters`), so a message without one is dropped and never
-      // reaches the channel's `messagePaginator.headItems` that the preview reads.
+      // reaches the channel's `messagePaginator.anchoredHeadItems` that the preview reads.
       const sendNewMessageOnChannel3 = () => {
         const newMessage = generateMessage({
           cid: testChannel3.channel.cid,

package/src/components/ChannelList/hooks/useChannelMembersState.ts

@@ -6,9 +6,7 @@ import { useStateStore } from '../../../hooks/useStateStore';
 
 type MembersState = { members: Record<string, ChannelMemberResponse> };
 
-/**
- * The fields of a member a caller reads. Define it at module scope, so it stays the same function.
- */
+/** Picks the member fields a caller reads. Define it at module scope to keep it stable. */
 export type ChannelMemberPick = (member: ChannelMemberResponse) => Record<string, unknown>;
 
 const selector = (state: MembersState) => ({
@@ -20,7 +18,7 @@ const isShallowEqual = (a: Record<string, unknown>, b: Record<string, unknown>)
   return keys.length === Object.keys(b).length && keys.every((key) => Object.is(a[key], b[key]));
 };
 
-// keeps the previous members while every member's picked fields are unchanged
+// Keeps the previous members while every member's picked fields are unchanged.
 const createPickedMembersSelector = (pick: ChannelMemberPick) => {
   let previous: { members: MembersState['members']; picked: Record<string, unknown>[] } | undefined;
   return (state: MembersState) => {
@@ -39,16 +37,27 @@ const createPickedMembersSelector = (pick: ChannelMemberPick) => {
 };
 
 /**
- * Returns the channel's members, sourced reactively from `channel.state`.
+ * Returns the channel's members from `channel.state`, updating reactively.
+ *
+ * With `pick`, the members update only when a picked field changes for some member, or when members
+ * join or leave. A presence change swaps in new member objects for that user, so a caller that does
+ * not read `online` should pick what it reads to skip those re-renders.
  *
- * With `pick`, the members update only when one of the picked fields changes for some member, or
- * when members join or leave. A presence change replaces every member object of that user, so a caller
- * that does not read `online` should pick what it reads to skip those re-renders.
+ * @param channel The channel.
+ * @param pick Picks the member fields the caller reads.
+ * @returns The members by user ID.
  */
 export function useChannelMembersState(
   channel: Channel,
   pick?: ChannelMemberPick,
 ): Record<string, ChannelMemberResponse>;
+/**
+ * Same as above for an optional channel, returning `undefined` without one.
+ *
+ * @param channel The channel.
+ * @param pick Picks the member fields the caller reads.
+ * @returns The members by user ID, or `undefined` without a channel.
+ */
 export function useChannelMembersState(
   channel?: Channel,
   pick?: ChannelMemberPick,

package/src/components/ChannelList/hooks/useChannelOnlineMemberCount.ts

@@ -5,10 +5,18 @@ import { useStateStore } from '../../../hooks/useStateStore';
 const selector = (state: { watcherCount: number }) => ({ watcherCount: state.watcherCount });
 
 /**
- * Returns the channel's online (watcher) count, sourced reactively from
- * `channel.state`.
+ * Returns the channel's online (watcher) count from `channel.state`, updating reactively.
+ *
+ * @param channel The channel.
+ * @returns The watcher count.
  */
 export function useChannelOnlineMemberCount(channel: Channel): number;
+/**
+ * Same as above for an optional channel, returning `undefined` without one.
+ *
+ * @param channel The channel.
+ * @returns The watcher count, or `undefined` without a channel.
+ */
 export function useChannelOnlineMemberCount(channel?: Channel): number | undefined;
 export function useChannelOnlineMemberCount(channel?: Channel) {
   return useStateStore(channel?.state, selector)?.watcherCount;

package/src/components/ChannelList/hooks/useMutedChannels.ts

@@ -7,7 +7,10 @@ const selector = (client: StreamChat) => client.mutedChannels;
 const keys: EventType[] = ['health.check', 'notification.channel_mutes_updated'];
 
 /**
- * Returns the current user's muted channels.
+ * Returns the current user's muted channels, updating on `health.check` and
+ * `notification.channel_mutes_updated`.
+ *
+ * @returns The channel mutes.
  */
 export const useMutedChannels = (): Array<ChannelMute> => {
   const { client } = useChatContext();

package/src/components/ChannelList/hooks/useMutedUsers.ts

@@ -6,7 +6,9 @@ import { useStateStore } from '../../../hooks/useStateStore';
 const selector = (state: { mutedUsers: UserMuteResponse[] }) => ({ mutedUsers: state.mutedUsers });
 
 /**
- * Returns the current user's muted users, sourced reactively from `client.mutedUsersStore`.
+ * Returns the current user's muted users from `client.mutedUsersStore`, updating reactively.
+ *
+ * @returns The user mutes.
  */
 export function useMutedUsers(): UserMuteResponse[] {
   const { client } = useChatContext();

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -49,10 +49,10 @@ export const usePaginatedChannels = ({ paginator }: { paginator: ChannelPaginato
 
       try {
         if (queryType === 'loadChannels') {
-          // Next page — append toward the tail, keeping the current list.
+          // Next page, appended toward the tail.
           await paginator.toTail();
         } else if (queryType === 'reload') {
-          // First page from scratch (blanks to the skeleton).
+          // First page from scratch, which blanks the list to the skeleton.
           await paginator.reload();
         } else {
           await paginator.toTail({ keepPreviousItems: true, reset: 'yes' });
@@ -70,10 +70,9 @@ export const usePaginatedChannels = ({ paginator }: { paginator: ChannelPaginato
   const refreshList = useStableCallback(
     async ({ isBackground = false }: { isBackground?: boolean } = {}) => {
       const now = Date.now();
-      // Only allow pull-to-refresh 5 seconds after the last successful refresh. This throttle is now
-      // purely about the user pulling repeatedly: reconnect refreshes no longer come through here at
-      // all — `client.connectionRecovery` owns them and re-runs each list's own query directly on the
-      // paginator, so they can never be swallowed by this window.
+      // Throttles repeated pull-to-refresh to one per interval, unless the last query failed.
+      // Reconnect refreshes do not pass through here: `client.connectionRecovery` re-runs the
+      // paginator's query itself.
       if (now - lastRefresh.current < RETRY_INTERVAL_IN_MS && error === undefined) {
         return;
       }
@@ -92,9 +91,9 @@ export const usePaginatedChannels = ({ paginator }: { paginator: ChannelPaginato
     await queryChannels('loadChannels');
   });
 
-  // Load the first page whenever the paginator has none: on the first mount, after the app swaps in a
-  // new paginator, and after `client.disconnectUser` resets it. A paginator that already has channels
-  // is shown as is, and a load already in flight is left alone.
+  // Loads the first page whenever the paginator has none: on first mount, when the app swaps in a
+  // new paginator, and after `client.disconnectUser` resets it. A paginator that already has
+  // channels is shown as is, and a load in flight is left alone.
   const userId = useClientUserId(client);
   const isUnloaded = channels === undefined;
   useEffect(() => {

package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx

@@ -16,9 +16,6 @@ import { primitives } from '../../theme';
 import { MessageStatusTypes } from '../../utils/utils';
 import { CompositeAccessibilityProbe } from '../Accessibility/CompositeAccessibilityProbe';
 
-/**
- * Module scope so the reference stays stable — an inline selector re-subscribes on every render.
- */
 const readEventsSelector = ({ readEvents }: ChannelConfig) => ({
   readEventsEnabled: readEvents.enabled,
 });
@@ -34,9 +31,8 @@ export const ChannelMessagePreviewDeliveryStatus = ({
   const { client } = useChatContext();
   const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
-  // `configState` is absent on the partial channel mocks some tests pass in; a real channel always
-  // has one. Resolved configuration, so `read_events` is already ANDed with anything registered
-  // through `client.config.set({ channel: { readEvents } })`.
+  // The resolved configuration, which combines `read_events` with anything registered through
+  // `client.config.set({ channel: { readEvents } })`. Absent on partial channel mocks.
   const configState = channel?.configState;
   const { readEventsEnabled } = useStateStore(configState, readEventsSelector) ?? {};
   const styles = useStyles();
@@ -70,8 +66,7 @@ export const ChannelMessagePreviewDeliveryStatus = ({
     return read_events;
   }, [configState, readEventsEnabled, channel]);
 
-  // `status` only exists on optimistic/local messages (`LocalMessage`); a delivered
-  // `MessageResponse` won't carry it. Read it through a guard instead of asserting the shape.
+  // `status` exists only on local messages (`LocalMessage`), so it is read through an `in` guard.
   const messageStatus = 'status' in message ? message.status : undefined;
 
   const { status } = useMessageDeliveryStatus({

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -11,9 +11,7 @@ import { useComponentsContext } from '../../contexts/componentsContext/Component
 import { useTranslatedMessage } from '../../hooks/useTranslatedMessage';
 
 export type ChannelPreviewProps = Partial<Pick<ChatContextValue, 'client'>> & {
-  /**
-   * Instance of Channel from stream-chat package.
-   */
+  /** The channel to preview. */
   channel: Channel;
 };
 

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -51,8 +51,7 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
     );
   }, [channel.state.members, client.user?.id]);
 
-  // `status` only exists on optimistic/local messages (`LocalMessage`), so read it via a
-  // guard rather than asserting `lastMessage` (a `LocalMessage | MessageResponse`) is local.
+  // `status` exists only on local messages (`LocalMessage`), so it is read through an `in` guard.
   const lastMessageStatus = lastMessage && 'status' in lastMessage ? lastMessage.status : undefined;
   const isFailedMessage =
     lastMessageStatus === MessageStatusTypes.FAILED || lastMessage?.type === 'error';
@@ -71,7 +70,6 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
     );
   }
 
-  // If there are no messages yet, show a message saying "No messages yet"
   if (!lastMessage) {
     return (
       <Text style={[styles.subtitle, { color: semantics.textTertiary }]}>

package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx

@@ -5,9 +5,7 @@ import { useComponentsContext } from '../../contexts/componentsContext/Component
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { CompositeAccessibilityProbe } from '../Accessibility/CompositeAccessibilityProbe';
 
-/**
- * This UI component displays an avatar for a particular channel.
- */
+/** The muted indicator of a channel preview. */
 export const ChannelPreviewMutedStatus = () => {
   const {
     theme: {

package/src/components/ChannelPreview/ChannelPreviewPinnedStatus.tsx

@@ -5,9 +5,7 @@ import { useComponentsContext } from '../../contexts/componentsContext/Component
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { CompositeAccessibilityProbe } from '../Accessibility/CompositeAccessibilityProbe';
 
-/**
- * This UI component displays a pinned indicator for a particular channel.
- */
+/** The pinned indicator of a channel preview. */
 export const ChannelPreviewPinnedStatus = () => {
   const {
     theme: {

package/src/components/ChannelPreview/ChannelPreviewTitle.tsx

@@ -9,9 +9,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../theme';
 
 export type ChannelPreviewTitleProps = Pick<ChannelPreviewProps, 'channel'> & {
-  /**
-   * Formatted name for the previewed channel.
-   */
+  /** Overrides the channel's display name. */
   title?: string;
 };
 

package/src/components/ChannelPreview/ChannelPreviewUnreadCount.tsx

@@ -8,9 +8,7 @@ import { BadgeNotification } from '../ui/Badge';
 
 export type ChannelPreviewUnreadCountProps = Pick<ChannelsContextValue, 'maxUnreadCount'> &
   Pick<ChannelPreviewProps, 'channel'> & {
-    /**
-     * Number of unread messages on the channel
-     */
+    /** Number of unread messages on the channel. */
     unread?: number;
   };
 

package/src/components/ChannelPreview/ChannelPreviewView.tsx

@@ -22,20 +22,18 @@ export type ChannelPreviewViewPropsWithContext = Pick<ChannelPreviewProps, 'chan
     'maxUnreadCount' | 'onSelect' | 'mutedStatusPosition' | 'pinnedStatusPosition'
   > & {
     /**
-     * Formatter function for date of latest message.
-     * @param date Message date
-     * @returns Formatted date string
+     * Formats the date of the latest message. Defaults to the `timestamp.ChannelPreviewStatus`
+     * translation: the time today, "Yesterday", the weekday within the last week, else the date.
      *
-     * By default today's date is shown in 'HH:mm A' format and other dates
-     * are displayed in 'DD/MM/YY' format. props.latestMessage.created_at is the
-     * default formatted date. This default logic is part of ChannelPreview component.
+     * @param date The date of the latest message.
+     * @returns The formatted date string.
      */
     formatLatestMessageDate?: (date: Date) => string;
     /** If the channel is muted. */
     muted?: boolean;
     /** If the channel is pinned for the current user. */
     pinned?: boolean;
-    /** Number of unread messages on the channel */
+    /** Number of unread messages on the channel. */
     unread?: number;
     lastMessage?: LastMessageType;
   };
@@ -160,10 +158,7 @@ const MemoizedChannelPreviewViewWithContext = React.memo(
   ChannelPreviewViewWithContext,
 ) as typeof ChannelPreviewViewWithContext;
 
-/**
- * This UI component displays an individual preview item for each channel in a list. It also receives all props
- * from the ChannelPreview component.
- */
+/** Displays one channel row in the channel list. */
 export const ChannelPreviewView = (props: ChannelPreviewViewProps) => {
   const { maxUnreadCount, onSelect, mutedStatusPosition, pinnedStatusPosition } =
     useChannelsContext();

package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts

@@ -15,13 +15,10 @@ import { useStateStore } from '../../../hooks';
 
 export type LastMessageType = LocalMessage | MessageResponse;
 
-// The last message is sourced reactively from the paginator's `aggregateState` — a store kept
-// separate from pagination `state` precisely so it stays reactive when a new message lands in the
-// head interval while an older window is active (a `state`-derived latest would go stale off-window).
-// The preview re-renders whenever the newest message changes (new/edited/deleted) with no manual
-// event plumbing.
+// The latest message comes from the paginator's `aggregateState`, which stays current when a new
+// message lands in the head interval while an older window is active.
 const lastMessageSelector = (state: MessagePaginatorAggregateState) => ({
-  lastMessage: state.lastMessage ?? undefined,
+  lastMessage: state.latestMessage ?? undefined,
 });
 
 export const useChannelPreviewData = (channel: Channel, client: StreamChat) => {
@@ -29,11 +26,8 @@ export const useChannelPreviewData = (channel: Channel, client: StreamChat) => {
   const { lastMessage } =
     useStateStore(channel.messagePaginator.aggregateState, lastMessageSelector) ?? {};
 
-  // One `channel.state` subscription for the whole preview row — mute status, membership (for pin)
-  // and own unread — instead of one subscription per concern. Fewer subscribers means the
-  // `channel.state` notify fan-out runs fewer selectors per publish, and fewer `useSyncExternalStore`
-  // instances per mounted row. The public `useIsChannelMuted` / `useIsChannelPinned` hooks are
-  // unchanged for every other caller; this aggregator just reads the combined slice directly.
+  // One `channel.state` subscription per row covers mute status, membership (pin) and own unread,
+  // rather than one subscription per concern.
   const previewStateSelector = useCallback(
     (state: MembershipState & MuteStatusState & ReadState) => ({
       membership: state.membership,
@@ -50,10 +44,9 @@ export const useChannelPreviewData = (channel: Channel, client: StreamChat) => {
 
   const muted = muteStatus?.muted ?? false;
   const pinned = membership?.pinned_at != null;
-  // muted channels always render a zeroed unread count
+  // Muted channels show no unread count.
   const unread = muted ? 0 : (reactiveUnread ?? 0);
 
-  // drafts
   useEffect(() => {
     const unsubscribe = channel.messageComposer.registerDraftEventSubscriptions();
     return () => unsubscribe();

package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayName.ts

@@ -26,7 +26,7 @@ export const useChannelPreviewDisplayName = (channel?: Channel) => {
     if (channelName) {
       return channelName;
     }
-    // Get first name of the members without the current user.
+    // Without a channel name, the other members' names are used.
     const membersWithoutSelf = Object.values(members || {}).filter(
       (member) => member.user?.id !== currentUserId,
     );
@@ -38,7 +38,7 @@ export const useChannelPreviewDisplayName = (channel?: Channel) => {
         .map((member) => getMemberName(member))
         .map((name) => name.split(' ')[0]);
       const sortedMembers = names.sort((a, b) => a.localeCompare(b));
-      // Now show the first 2 members and the rest as +N. Don't show the +N if the remaining members are 0.
+      // The first two names, followed by a count of the others when more remain.
       const firstTwoMembers = sortedMembers.slice(0, 2);
       const remainingMembers = sortedMembers.slice(2);
       return `${firstTwoMembers.join(', ').concat(' ')}${remainingMembers.length > 0 ? t('channelPreview.displayName.others.label', 'and {{ count }} others', { count: remainingMembers.length }) : ''}`;