stream-chat-react 14.12.0 → 15.0.0-rc.1

package/dist/es/components/ChannelList/ChannelList.mjs

@@ -1,142 +1,71 @@
-import { ChannelListContextProvider } from "../../context/ChannelListContext.mjs";
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
 import { useChatContext } from "../../context/ChatContext.mjs";
 import { useComponentContext } from "../../context/ComponentContext.mjs";
-import { useStateStore } from "../../store/hooks/useStateStore.mjs";
-import { DialogManagerProvider } from "../../context/DialogManagerContext.mjs";
-import { useStableId } from "../UtilityComponents/useStableId.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { EmptyStateIndicator } from "../EmptyStateIndicator/EmptyStateIndicator.mjs";
-import { useConnectionRecoveredListener } from "./hooks/useConnectionRecoveredListener.mjs";
-import { usePaginatedChannels } from "./hooks/usePaginatedChannels.mjs";
-import { moveChannelUpwards } from "./utils.mjs";
-import { useChannelListShape, usePrepareShapeHandlers } from "./hooks/useChannelListShape.mjs";
-import { ChannelListUI } from "./ChannelListUI.mjs";
-import { Search } from "../Search/Search.mjs";
-import { LoadMorePaginator } from "../LoadMore/LoadMorePaginator.mjs";
-import { ChannelListHeader } from "./ChannelListHeader.mjs";
+import { InfiniteScrollWithComponents } from "../InfiniteScrollPaginator/InfiniteScrollWithComponents.mjs";
+import { LoadingChannels } from "../Loading/LoadingChannels.mjs";
+import { LoadingIndicator } from "../Loading/LoadingIndicator.mjs";
+import { useChannelListKeyboardNavigation } from "./hooks/useChannelListKeyboardNavigation.mjs";
 import { ChannelListItem } from "../ChannelListItem/ChannelListItem.mjs";
-import { NotificationList } from "../Notifications/NotificationList.mjs";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/ChannelList/ChannelList.tsx
-var DEFAULT_FILTERS = {};
-var DEFAULT_OPTIONS = {};
-var DEFAULT_SORT = {};
-var searchControllerStateSelector = (nextValue) => ({ searchIsActive: nextValue.isActive });
-var UnMemoizedChannelList = (props) => {
-	const { allowNewMessagesFromUnfilteredChannels = true, channelRenderFilterFn, customActiveChannel, customQueryChannels, EmptyStateIndicator: EmptyStateIndicator$1 = EmptyStateIndicator, filters = {}, getLatestMessagePreview, lockChannelOrder = false, onAddedToChannel, onChannelDeleted, onChannelHidden, onChannelTruncated, onChannelUpdated, onChannelVisible, onMessageNew, onMessageNewHandler, onRemovedFromChannel, options, Paginator = LoadMorePaginator, recoveryThrottleIntervalMs, renderChannels, sendChannelsToList = false, setActiveChannelOnMount = true, showChannelSearch = false, sort = DEFAULT_SORT, watchers = {} } = props;
-	const stableId = useStableId();
-	const { channel, channelsQueryState, client, customClasses, searchController, setActiveChannel, theme, useImageFlagEmojisOnWindows } = useChatContext("ChannelList");
-	const { ChannelListHeader: ChannelListHeader$1 = ChannelListHeader, ChannelListUI: ChannelListUI$1 = ChannelListUI, NotificationList: NotificationList$1 = NotificationList, Search: Search$1 = Search } = useComponentContext();
-	const channelListRef = useRef(null);
-	const [channelUpdateCount, setChannelUpdateCount] = useState(0);
-	const { searchIsActive } = useStateStore(searchController.state, searchControllerStateSelector);
-	/**
-	* Set a channel with id {customActiveChannel} as active and move it to the top of the list.
-	* If customActiveChannel prop is absent, then set the first channel in list as active channel.
-	*/
-	const activeChannelHandler = async (channels, setChannels, effectiveQueryParams) => {
-		if (!channels.length) return;
-		if (customActiveChannel) {
-			let customActiveChannelObject = channels.find((chan) => chan.id === customActiveChannel);
-			if (!customActiveChannelObject) [customActiveChannelObject] = await client.queryChannels({ id: customActiveChannel });
-			if (customActiveChannelObject) {
-				setActiveChannel(customActiveChannelObject, watchers);
-				setChannels(moveChannelUpwards({
-					channels,
-					channelToMove: customActiveChannelObject,
-					sort: effectiveQueryParams.sort
-				}));
-				return;
-			}
-		}
-		if (setActiveChannelOnMount) setActiveChannel(channels[0], watchers);
-	};
-	/**
-	* For some events, inner properties on the channel will update but the shallow comparison will not
-	* force a re-render. Incrementing this dummy variable ensures the channel previews update.
-	*/
-	const forceUpdate = useCallback(() => setChannelUpdateCount((count) => count + 1), []);
-	const { channels, effectiveFilters, effectiveSort, hasNextPage, loadNextPage, setChannels } = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler, recoveryThrottleIntervalMs, customQueryChannels);
-	const loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
-	const { customHandler, defaultHandler } = usePrepareShapeHandlers({
-		allowNewMessagesFromUnfilteredChannels,
-		filters: effectiveFilters,
-		lockChannelOrder,
-		onAddedToChannel,
-		onChannelDeleted,
-		onChannelHidden,
-		onChannelTruncated,
-		onChannelUpdated,
-		onChannelVisible,
-		onMessageNew,
-		onMessageNewHandler,
-		onRemovedFromChannel,
-		setChannels,
-		sort: effectiveSort
-	});
-	useChannelListShape(customHandler ?? defaultHandler);
-	useConnectionRecoveredListener(forceUpdate);
+var channelPaginatorStateSelector = (state) => ({
+	isUnloaded: state.items === void 0,
+	lastQueryError: state.lastQueryError
+});
+/**
+* Channel list driven by a single `ChannelPaginator`. The paginator is created +
+* coordinated by the `ChannelManager` on `ChatContext`; this component
+* only renders its reactive `state` and drives pagination. Selection is not this
+* component's concern — the `ChannelListItem` default `ListItem` opens the channel via
+* ChatView navigation.
+*/
+var ChannelList = ({ loadMoreDebounceMs, loadMoreThresholdPx, paginator }) => {
+	const { channelManager, client } = useChatContext();
+	const { t } = useTranslationContext();
+	const { isUnloaded, lastQueryError } = useStateStore(paginator.state, channelPaginatorStateSelector);
+	const { EmptyListIndicator = DefaultEmptyChannelList, EndReachedIndicator = DefaultEndReachedIndicator, FirstPageLoadingIndicator = LoadingChannels, ListItem = DefaultListItem, LoadingNextPageIndicator = DefaultLoadingNextPageIndicator } = useComponentContext();
+	const listboxRef = useRef(null);
+	const { onClickCapture, onKeyDown } = useChannelListKeyboardNavigation(listboxRef);
+	useEffect(() => channelManager.registerSubscriptions(), [channelManager]);
+	useEffect(() => {
+		if (!isUnloaded) return;
+		paginator.toTailDebounced();
+	}, [isUnloaded, paginator]);
 	useEffect(() => {
-		const handleEvent = (event) => {
-			if (event.cid === channel?.cid) setActiveChannel();
-		};
-		client.on("channel.deleted", handleEvent);
-		client.on("channel.hidden", handleEvent);
-		return () => {
-			client.off("channel.deleted", handleEvent);
-			client.off("channel.hidden", handleEvent);
-		};
-	}, [channel?.cid]);
-	const renderChannel = (item) => {
-		return /* @__PURE__ */ jsx(ChannelListItem, {
-			activeChannel: channel,
-			channel: item,
-			channelUpdateCount,
-			getLatestMessagePreview,
-			setActiveChannel,
-			watchers
-		}, item.cid);
-	};
-	const className = clsx(customClasses?.chat ?? "str-chat", theme, customClasses?.channelList ?? `str-chat__channel-list`, { "str-chat--windows-flags": useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/) });
-	const showChannelList = !searchIsActive;
-	return /* @__PURE__ */ jsx(ChannelListContextProvider, {
-		value: {
-			channels,
-			hasNextPage,
-			loadNextPage,
-			setChannels
-		},
-		children: /* @__PURE__ */ jsx("div", {
-			className,
-			ref: channelListRef,
-			children: /* @__PURE__ */ jsxs(DialogManagerProvider, {
-				id: `channel-list-dialog-manager-${stableId}`,
-				children: [
-					/* @__PURE__ */ jsx(ChannelListHeader$1, {}),
-					showChannelSearch && /* @__PURE__ */ jsx(Search$1, {}),
-					showChannelList && /* @__PURE__ */ jsx(ChannelListUI$1, {
-						error: channelsQueryState.error,
-						loadedChannels: sendChannelsToList ? loadedChannels : void 0,
-						loading: !!channelsQueryState.queryInProgress && ["reload", "uninitialized"].includes(channelsQueryState.queryInProgress),
-						setChannels,
-						children: !loadedChannels?.length ? /* @__PURE__ */ jsx(EmptyStateIndicator$1, { listType: "channel" }) : /* @__PURE__ */ jsx(Paginator, {
-							hasNextPage,
-							isLoading: channelsQueryState.queryInProgress === "load-more",
-							loadNextPage,
-							children: renderChannels ? renderChannels(loadedChannels, renderChannel) : loadedChannels.map((channel) => renderChannel(channel))
-						})
-					}),
-					/* @__PURE__ */ jsx(NotificationList$1, { panel: "channel-list" })
-				]
-			})
-		})
+		if (!lastQueryError) return;
+		client.notifications.addError({
+			message: lastQueryError.message,
+			origin: {
+				context: { reason: "channel query error" },
+				emitter: "ChannelList"
+			}
+		});
+	}, [client, lastQueryError]);
+	return /* @__PURE__ */ jsx(InfiniteScrollWithComponents, {
+		"aria-label": t("channelList.channelList.ariaLabel", "Channel list"),
+		contentProps: { role: "presentation" },
+		EmptyListIndicator,
+		EndReachedIndicator,
+		FirstPageLoadingIndicator,
+		ListItem,
+		LoadingNextPageIndicator,
+		loadNextDebounceMs: loadMoreDebounceMs,
+		loadNextOnScrollToBottom: paginator.next,
+		onClickCapture,
+		onKeyDown,
+		paginator,
+		ref: listboxRef,
+		role: "listbox",
+		threshold: loadMoreThresholdPx
 	});
 };
-/**
-* Renders a preview list of Channels, allowing you to select the Channel you want to open
-*/
-var ChannelList = React.memo(UnMemoizedChannelList);
+var DefaultEmptyChannelList = () => /* @__PURE__ */ jsx(EmptyStateIndicator, { listType: "channel" });
+var DefaultEndReachedIndicator = () => null;
+var DefaultListItem = ({ item }) => /* @__PURE__ */ jsx(ChannelListItem, { channel: item });
+var DefaultLoadingNextPageIndicator = ({ isLoading }) => isLoading ? /* @__PURE__ */ jsx(LoadingIndicator, {}) : null;
 //#endregion
 export { ChannelList };
 

package/dist/es/components/ChannelList/ChannelList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelList.mjs","names":[],"sources":["../../../../src/components/ChannelList/ChannelList.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport type {\n  Channel,\n  ChannelFilters,\n  ChannelOptions,\n  ChannelSort,\n  Event,\n  SearchControllerState,\n} from 'stream-chat';\n\nimport { useConnectionRecoveredListener } from './hooks/useConnectionRecoveredListener';\nimport type {\n  CustomQueryChannelsFn,\n  EffectiveQueryParams,\n} from './hooks/usePaginatedChannels';\nimport { usePaginatedChannels } from './hooks/usePaginatedChannels';\nimport {\n  useChannelListShape,\n  usePrepareShapeHandlers,\n} from './hooks/useChannelListShape';\nimport { useStateStore } from '../../store';\nimport { ChannelListUI as DefaultChannelListUI } from './ChannelListUI';\nimport { ChannelListItem } from '../ChannelListItem/ChannelListItem';\nimport { Search as DefaultSearch } from '../Search';\nimport type { EmptyStateIndicatorProps } from '../EmptyStateIndicator';\nimport { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';\nimport type { LoadMorePaginatorProps } from '../LoadMore/LoadMorePaginator';\nimport { LoadMorePaginator } from '../LoadMore/LoadMorePaginator';\nimport { NotificationList as DefaultNotificationList } from '../Notifications';\nimport type { ChatContextValue } from '../../context';\nimport {\n  ChannelListContextProvider,\n  DialogManagerProvider,\n  useChatContext,\n  useComponentContext,\n} from '../../context';\nimport { moveChannelUpwards } from './utils';\nimport type { TranslationContextValue } from '../../context/TranslationContext';\nimport type { PaginatorProps } from '../../types/types';\nimport { ChannelListHeader as DefaultChannelListHeader } from './ChannelListHeader';\nimport { useStableId } from '../UtilityComponents/useStableId';\n\nconst DEFAULT_FILTERS = {};\nconst DEFAULT_OPTIONS = {};\nconst DEFAULT_SORT = {};\n\nconst searchControllerStateSelector = (nextValue: SearchControllerState) => ({\n  searchIsActive: nextValue.isActive,\n});\n\nexport type ChannelListProps = {\n  /**\n   * When the client receives `message.new`, `notification.message_new`, and `notification.added_to_channel` events, we automatically\n   * push that channel to the top of the list. If the channel doesn't currently exist in the list, we grab the channel from\n   * `client.activeChannels` and push it to the top of the list. You can disable this behavior by setting this prop\n   * to false, which will prevent channels not in the list from incrementing the list. The default is true.\n   */\n  allowNewMessagesFromUnfilteredChannels?: boolean;\n  /** Optional function to filter channels prior to loading in the DOM. Do not use any complex or async logic that would delay the loading of the ChannelList. We recommend using a pure function with array methods like filter/sort/reduce. */\n  channelRenderFilterFn?: (channels: Array<Channel>) => Array<Channel>;\n  // FIXME: how is this even legal (WHY IS IT STRING?!)\n  /** Set a channel (with this ID) to active and manually move it to the top of the list */\n  customActiveChannel?: string;\n  /** Custom function that handles the channel pagination. Has to build query filters, sort and options and query and append channels to the current channels state and update the hasNext pagination flag after each query. */\n  customQueryChannels?: CustomQueryChannelsFn;\n  /** Custom UI component for rendering an empty list, defaults to and accepts same props as: [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx) */\n  EmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>;\n  /** An object containing channel query filters */\n  filters?: ChannelFilters;\n  /** Custom function that generates the message preview in ChannelPreview component */\n  getLatestMessagePreview?: (\n    channel: Channel,\n    t: TranslationContextValue['t'],\n    userLanguage: TranslationContextValue['userLanguage'],\n    isMessageAIGenerated?: ChatContextValue['isMessageAIGenerated'],\n  ) => ReactNode;\n  /** When true, channels won't dynamically sort by most recent message */\n  lockChannelOrder?: boolean;\n  /** Function to override the default behavior when a user is added to a channel, corresponds to [notification.added\\_to\\_channel](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) event */\n  onAddedToChannel?: (\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    event: Event,\n  ) => void;\n  /** Function to override the default behavior when a channel is deleted, corresponds to [channel.deleted](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) event */\n  onChannelDeleted?: (\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    event: Event,\n  ) => void;\n  /** Function to override the default behavior when a channel is hidden, corresponds to [channel.hidden](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) event */\n  onChannelHidden?: (\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    event: Event,\n  ) => void;\n  /** Function to override the default behavior when a channel is truncated, corresponds to [channel.truncated](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) event */\n  onChannelTruncated?: (\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    event: Event,\n  ) => void;\n  /** Function to override the default behavior when a channel is updated, corresponds to [channel.updated](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) event */\n  onChannelUpdated?: (\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    event: Event,\n  ) => void;\n  /** Function to override the default channel visible behavior, corresponds to [channel.visible](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) event */\n  onChannelVisible?: (\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    event: Event,\n  ) => void;\n  /** Function to override the default behavior when a message is received on a channel not being watched, corresponds to [notification.message\\_new](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) event */\n  onMessageNew?: (\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    event: Event,\n  ) => void;\n  /** Function to override the default behavior when a message is received on a channel being watched, handles [message.new](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) event */\n  onMessageNewHandler?: (\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    event: Event,\n  ) => void;\n  /** Function to override the default behavior when a user gets removed from a channel, corresponds to [notification.removed\\_from\\_channel](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) event */\n  onRemovedFromChannel?: (\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    event: Event,\n  ) => void;\n  /** An object containing channel query options */\n  options?: ChannelOptions;\n  /** Custom UI component to handle channel pagination logic, defaults to and accepts same props as: [LoadMorePaginator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/LoadMore/LoadMorePaginator.tsx) */\n  Paginator?: React.ComponentType<PaginatorProps | LoadMorePaginatorProps>;\n  /**\n   * Custom interval during which the recovery channel list queries will be prevented.\n   * This is to avoid firing unnecessary queries during internet connection fluctuation.\n   * Recovery channel query is triggered upon `connection.recovered` and leads to complete channel list reload with pagination offset 0.\n   * The minimum throttle interval is 2000ms. The default throttle interval is 5000ms.\n   */\n  recoveryThrottleIntervalMs?: number;\n  /** Function to override the default behavior when rendering channels, so this function is called instead of rendering the Preview directly */\n  renderChannels?: (\n    channels: Channel[],\n    channelPreview: (item: Channel) => React.ReactNode,\n  ) => React.ReactNode;\n  /** If true, sends the list's currently loaded channels to the `List` component as the `loadedChannels` prop */\n  sendChannelsToList?: boolean;\n  /** Last channel will be set as active channel if true, defaults to true */\n  setActiveChannelOnMount?: boolean;\n  /** Whether or not to load the list with a search component, defaults to false */\n  showChannelSearch?: boolean;\n  /** An object containing channel query sort parameters */\n  sort?: ChannelSort;\n  /** An object containing query parameters for fetching channel watchers */\n  watchers?: { limit?: number; offset?: number };\n};\n\nconst UnMemoizedChannelList = (props: ChannelListProps) => {\n  const {\n    allowNewMessagesFromUnfilteredChannels = true,\n    channelRenderFilterFn,\n    customActiveChannel,\n    customQueryChannels,\n    EmptyStateIndicator = DefaultEmptyStateIndicator,\n    filters = {},\n    getLatestMessagePreview,\n    lockChannelOrder = false,\n    onAddedToChannel,\n    onChannelDeleted,\n    onChannelHidden,\n    onChannelTruncated,\n    onChannelUpdated,\n    onChannelVisible,\n    onMessageNew,\n    onMessageNewHandler,\n    onRemovedFromChannel,\n    options,\n    Paginator = LoadMorePaginator,\n    recoveryThrottleIntervalMs,\n    renderChannels,\n    sendChannelsToList = false,\n    setActiveChannelOnMount = true,\n    showChannelSearch = false,\n    sort = DEFAULT_SORT,\n    watchers = {},\n  } = props;\n\n  const stableId = useStableId();\n\n  const {\n    channel,\n    channelsQueryState,\n    client,\n    customClasses,\n    searchController,\n    setActiveChannel,\n    theme,\n    useImageFlagEmojisOnWindows,\n  } = useChatContext('ChannelList');\n  const {\n    ChannelListHeader = DefaultChannelListHeader,\n    ChannelListUI = DefaultChannelListUI,\n    NotificationList = DefaultNotificationList,\n    Search = DefaultSearch,\n  } = useComponentContext();\n\n  const channelListRef = useRef<HTMLDivElement | null>(null);\n  const [channelUpdateCount, setChannelUpdateCount] = useState(0);\n\n  // Indicator relevant when Search component that relies on SearchController is used\n  const { searchIsActive } = useStateStore(\n    searchController.state,\n    searchControllerStateSelector,\n  );\n  /**\n   * Set a channel with id {customActiveChannel} as active and move it to the top of the list.\n   * If customActiveChannel prop is absent, then set the first channel in list as active channel.\n   */\n  const activeChannelHandler = async (\n    channels: Array<Channel>,\n    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,\n    effectiveQueryParams: EffectiveQueryParams,\n  ) => {\n    if (!channels.length) {\n      return;\n    }\n\n    if (customActiveChannel) {\n      // FIXME: this is wrong...\n      let customActiveChannelObject = channels.find(\n        (chan) => chan.id === customActiveChannel,\n      );\n\n      if (!customActiveChannelObject) {\n        [customActiveChannelObject] = await client.queryChannels({\n          id: customActiveChannel,\n        });\n      }\n\n      if (customActiveChannelObject) {\n        setActiveChannel(customActiveChannelObject, watchers);\n\n        const newChannels = moveChannelUpwards({\n          channels,\n          channelToMove: customActiveChannelObject,\n          sort: effectiveQueryParams.sort,\n        });\n\n        setChannels(newChannels);\n        return;\n      }\n    }\n\n    if (setActiveChannelOnMount) {\n      setActiveChannel(channels[0], watchers);\n    }\n  };\n\n  /**\n   * For some events, inner properties on the channel will update but the shallow comparison will not\n   * force a re-render. Incrementing this dummy variable ensures the channel previews update.\n   */\n  const forceUpdate = useCallback(() => setChannelUpdateCount((count) => count + 1), []);\n\n  const {\n    channels,\n    effectiveFilters,\n    effectiveSort,\n    hasNextPage,\n    loadNextPage,\n    setChannels,\n  } = usePaginatedChannels(\n    client,\n    filters || DEFAULT_FILTERS,\n    sort || DEFAULT_SORT,\n    options || DEFAULT_OPTIONS,\n    activeChannelHandler,\n    recoveryThrottleIntervalMs,\n    customQueryChannels,\n  );\n\n  const loadedChannels = channelRenderFilterFn\n    ? channelRenderFilterFn(channels)\n    : channels;\n\n  const { customHandler, defaultHandler } = usePrepareShapeHandlers({\n    allowNewMessagesFromUnfilteredChannels,\n    // `effectiveFilters`/`effectiveSort` reflect the backend-resolved\n    // `predefined_filter` metadata when `options.predefined_filter` is in use.\n    // For non-predefined queries they fall back to the caller-supplied\n    // `filters`/`sort` props so behavior is unchanged.\n    filters: effectiveFilters,\n    lockChannelOrder,\n    onAddedToChannel,\n    onChannelDeleted,\n    onChannelHidden,\n    onChannelTruncated,\n    onChannelUpdated,\n    onChannelVisible,\n    onMessageNew,\n    onMessageNewHandler,\n    onRemovedFromChannel,\n    setChannels,\n    sort: effectiveSort,\n    // TODO: implement\n    // customHandleChannelListShape\n  });\n\n  useChannelListShape(customHandler ?? defaultHandler);\n\n  // TODO: maybe move this too\n  useConnectionRecoveredListener(forceUpdate);\n\n  useEffect(() => {\n    const handleEvent = (event: Event) => {\n      if (event.cid === channel?.cid) {\n        setActiveChannel();\n      }\n    };\n\n    client.on('channel.deleted', handleEvent);\n    client.on('channel.hidden', handleEvent);\n\n    return () => {\n      client.off('channel.deleted', handleEvent);\n      client.off('channel.hidden', handleEvent);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [channel?.cid]);\n\n  const renderChannel = (item: Channel) => {\n    const previewProps = {\n      activeChannel: channel,\n      channel: item,\n      // forces the update of preview component on channel update\n      channelUpdateCount,\n      getLatestMessagePreview,\n      setActiveChannel,\n      watchers,\n    };\n\n    return <ChannelListItem key={item.cid} {...previewProps} />;\n  };\n\n  const baseClass = 'str-chat__channel-list';\n  const className = clsx(\n    customClasses?.chat ?? 'str-chat',\n    theme,\n    customClasses?.channelList ?? `${baseClass}`,\n    {\n      'str-chat--windows-flags':\n        useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/),\n    },\n  );\n\n  const showChannelList = !searchIsActive;\n  return (\n    <ChannelListContextProvider\n      value={{ channels, hasNextPage, loadNextPage, setChannels }}\n    >\n      <div className={className} ref={channelListRef}>\n        <DialogManagerProvider id={`channel-list-dialog-manager-${stableId}`}>\n          <ChannelListHeader />\n          {showChannelSearch && <Search />}\n          {showChannelList && (\n            <ChannelListUI\n              error={channelsQueryState.error}\n              loadedChannels={sendChannelsToList ? loadedChannels : undefined}\n              loading={\n                !!channelsQueryState.queryInProgress &&\n                ['reload', 'uninitialized'].includes(channelsQueryState.queryInProgress)\n              }\n              setChannels={setChannels}\n            >\n              {!loadedChannels?.length ? (\n                <EmptyStateIndicator listType='channel' />\n              ) : (\n                <Paginator\n                  hasNextPage={hasNextPage}\n                  isLoading={channelsQueryState.queryInProgress === 'load-more'}\n                  loadNextPage={loadNextPage}\n                >\n                  {renderChannels\n                    ? renderChannels(loadedChannels, renderChannel)\n                    : loadedChannels.map((channel) => renderChannel(channel))}\n                </Paginator>\n              )}\n            </ChannelListUI>\n          )}\n          <NotificationList panel='channel-list' />\n        </DialogManagerProvider>\n      </div>\n    </ChannelListContextProvider>\n  );\n};\n\n/**\n * Renders a preview list of Channels, allowing you to select the Channel you want to open\n */\nexport const ChannelList = React.memo(\n  UnMemoizedChannelList,\n) as typeof UnMemoizedChannelList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA4CA,IAAM,kBAAkB,CAAC;AACzB,IAAM,kBAAkB,CAAC;AACzB,IAAM,eAAe,CAAC;AAEtB,IAAM,iCAAiC,eAAsC,EAC3E,gBAAgB,UAAU,SAC5B;AAuGA,IAAM,yBAAyB,UAA4B;CACzD,MAAM,EACJ,yCAAyC,MACzC,uBACA,qBACA,qBACA,qBAAA,wBAAsB,qBACtB,UAAU,CAAC,GACX,yBACA,mBAAmB,OACnB,kBACA,kBACA,iBACA,oBACA,kBACA,kBACA,cACA,qBACA,sBACA,SACA,YAAY,mBACZ,4BACA,gBACA,qBAAqB,OACrB,0BAA0B,MAC1B,oBAAoB,OACpB,OAAO,cACP,WAAW,CAAC,MACV;CAEJ,MAAM,WAAW,YAAY;CAE7B,MAAM,EACJ,SACA,oBACA,QACA,eACA,kBACA,kBACA,OACA,gCACE,eAAe,aAAa;CAChC,MAAM,EACJ,mBAAA,sBAAoB,mBACpB,eAAA,kBAAgB,eAChB,kBAAA,qBAAmB,kBACnB,QAAA,WAAS,WACP,oBAAoB;CAExB,MAAM,iBAAiB,OAA8B,IAAI;CACzD,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,CAAC;CAG9D,MAAM,EAAE,mBAAmB,cACzB,iBAAiB,OACjB,6BACF;;;;;CAKA,MAAM,uBAAuB,OAC3B,UACA,aACA,yBACG;EACH,IAAI,CAAC,SAAS,QACZ;EAGF,IAAI,qBAAqB;GAEvB,IAAI,4BAA4B,SAAS,MACtC,SAAS,KAAK,OAAO,mBACxB;GAEA,IAAI,CAAC,2BACH,CAAC,6BAA6B,MAAM,OAAO,cAAc,EACvD,IAAI,oBACN,CAAC;GAGH,IAAI,2BAA2B;IAC7B,iBAAiB,2BAA2B,QAAQ;IAQpD,YANoB,mBAAmB;KACrC;KACA,eAAe;KACf,MAAM,qBAAqB;IAC7B,CAEY,CAAW;IACvB;GACF;EACF;EAEA,IAAI,yBACF,iBAAiB,SAAS,IAAI,QAAQ;CAE1C;;;;;CAMA,MAAM,cAAc,kBAAkB,uBAAuB,UAAU,QAAQ,CAAC,GAAG,CAAC,CAAC;CAErF,MAAM,EACJ,UACA,kBACA,eACA,aACA,cACA,gBACE,qBACF,QACA,WAAW,iBACX,QAAQ,cACR,WAAW,iBACX,sBACA,4BACA,mBACF;CAEA,MAAM,iBAAiB,wBACnB,sBAAsB,QAAQ,IAC9B;CAEJ,MAAM,EAAE,eAAe,mBAAmB,wBAAwB;EAChE;EAKA,SAAS;EACT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM;CAGR,CAAC;CAED,oBAAoB,iBAAiB,cAAc;CAGnD,+BAA+B,WAAW;CAE1C,gBAAgB;EACd,MAAM,eAAe,UAAiB;GACpC,IAAI,MAAM,QAAQ,SAAS,KACzB,iBAAiB;EAErB;EAEA,OAAO,GAAG,mBAAmB,WAAW;EACxC,OAAO,GAAG,kBAAkB,WAAW;EAEvC,aAAa;GACX,OAAO,IAAI,mBAAmB,WAAW;GACzC,OAAO,IAAI,kBAAkB,WAAW;EAC1C;CAEF,GAAG,CAAC,SAAS,GAAG,CAAC;CAEjB,MAAM,iBAAiB,SAAkB;EAWvC,OAAO,oBAAC,iBAAD;GATL,eAAe;GACf,SAAS;GAET;GACA;GACA;GACA;EAGwD,GAA7B,KAAK,GAAwB;CAC5D;CAGA,MAAM,YAAY,KAChB,eAAe,QAAQ,YACvB,OACA,eAAe,eAAe,0BAC9B,EACE,2BACE,+BAA+B,UAAU,UAAU,MAAM,KAAK,EAClE,CACF;CAEA,MAAM,kBAAkB,CAAC;CACzB,OACE,oBAAC,4BAAD;EACE,OAAO;GAAE;GAAU;GAAa;GAAc;EAAY;YAE1D,oBAAC,OAAD;GAAgB;GAAW,KAAK;aAC9B,qBAAC,uBAAD;IAAuB,IAAI,+BAA+B;cAA1D;KACE,oBAAC,qBAAD,CAAoB,CAAA;KACnB,qBAAqB,oBAAC,UAAD,CAAS,CAAA;KAC9B,mBACC,oBAAC,iBAAD;MACE,OAAO,mBAAmB;MAC1B,gBAAgB,qBAAqB,iBAAiB,KAAA;MACtD,SACE,CAAC,CAAC,mBAAmB,mBACrB,CAAC,UAAU,eAAe,CAAC,CAAC,SAAS,mBAAmB,eAAe;MAE5D;gBAEZ,CAAC,gBAAgB,SAChB,oBAAC,uBAAD,EAAqB,UAAS,UAAW,CAAA,IAEzC,oBAAC,WAAD;OACe;OACb,WAAW,mBAAmB,oBAAoB;OACpC;iBAEb,iBACG,eAAe,gBAAgB,aAAa,IAC5C,eAAe,KAAK,YAAY,cAAc,OAAO,CAAC;MACjD,CAAA;KAEA,CAAA;KAEjB,oBAAC,oBAAD,EAAkB,OAAM,eAAgB,CAAA;IACnB;;EACpB,CAAA;CACqB,CAAA;AAEhC;;;;AAKA,IAAa,cAAc,MAAM,KAC/B,qBACF"}
+{"version":3,"file":"ChannelList.mjs","names":[],"sources":["../../../../src/components/ChannelList/ChannelList.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\nimport React, { useEffect, useRef } from 'react';\nimport type { Channel, ChannelPaginator, ChannelPaginatorState } from 'stream-chat';\n\nimport { ChannelListItem } from '../ChannelListItem';\nimport { EmptyStateIndicator } from '../EmptyStateIndicator';\nimport { InfiniteScrollWithComponents } from '../InfiniteScrollPaginator/InfiniteScrollWithComponents';\nimport { LoadingChannels, LoadingIndicator } from '../Loading';\nimport { useChatContext } from '../../context/ChatContext';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useChannelListKeyboardNavigation } from './hooks/useChannelListKeyboardNavigation';\nimport { useStateStore } from '../../store';\n\nexport type ChannelListProps = {\n  /** The `ChannelPaginator` that supplies this list's channels (its data source). */\n  paginator: ChannelPaginator;\n  loadMoreDebounceMs?: number;\n  loadMoreThresholdPx?: number;\n};\n\nconst channelPaginatorStateSelector = (state: ChannelPaginatorState) => ({\n  // `items === undefined` means \"never queried\" — the state a paginator starts in and returns to\n  // when its data is discarded (e.g. `client.disconnectUser` resets every registered list). An\n  // empty array is a loaded empty page and must not trigger a query.\n  isUnloaded: state.items === undefined,\n  lastQueryError: state.lastQueryError,\n});\n\n/**\n * Channel list driven by a single `ChannelPaginator`. The paginator is created +\n * coordinated by the `ChannelManager` on `ChatContext`; this component\n * only renders its reactive `state` and drives pagination. Selection is not this\n * component's concern — the `ChannelListItem` default `ListItem` opens the channel via\n * ChatView navigation.\n */\nexport const ChannelList = ({\n  loadMoreDebounceMs,\n  loadMoreThresholdPx,\n  paginator,\n}: ChannelListProps) => {\n  const { channelManager, client } = useChatContext();\n  const { t } = useTranslationContext();\n  const { isUnloaded, lastQueryError } = useStateStore(\n    paginator.state,\n    channelPaginatorStateSelector,\n  );\n  const {\n    EmptyListIndicator = DefaultEmptyChannelList,\n    EndReachedIndicator = DefaultEndReachedIndicator,\n    FirstPageLoadingIndicator = LoadingChannels,\n    ListItem = DefaultListItem,\n    LoadingNextPageIndicator = DefaultLoadingNextPageIndicator,\n  } = useComponentContext();\n\n  // Keyboard roving + row-action navigation for this list. The scroll container (the\n  // `InfiniteScrollPaginator` root, reached via `listboxRef`) IS the `role=\"listbox\"` that owns this\n  // list's `role=\"option\"` rows — so no extra wrapper element is needed. The hook reads/focuses the\n  // option rows under `listboxRef`.\n  // NOTE: the hook's \"focus the first item of the next page after Load more\" branch is a no-op here —\n  // the list paginates on scroll-to-bottom (no rendered `load-more-button` for its `LOAD_MORE_SELECTOR`\n  // to match). Accepted; keyboard roving is unaffected.\n  const listboxRef = useRef<HTMLDivElement>(null);\n  const { onClickCapture, onKeyDown } = useChannelListKeyboardNavigation(listboxRef);\n\n  // Ref-counted: safe whether called here, from <ChannelLists/>, or from <Chat>.\n  useEffect(() => channelManager.registerSubscriptions(), [channelManager]);\n\n  // Loads the first page, and reloads it whenever the list is emptied back to \"never queried\" —\n  // the paginator outlives this component (it is registered on `client.channelManager`), so\n  // querying only on mount would leave a list reset after a disconnect/reconnect permanently empty.\n  useEffect(() => {\n    if (!isUnloaded) return;\n    paginator.toTailDebounced();\n  }, [isUnloaded, paginator]);\n\n  useEffect(() => {\n    if (!lastQueryError) return;\n    client.notifications.addError({\n      message: lastQueryError.message,\n      origin: { context: { reason: 'channel query error' }, emitter: 'ChannelList' },\n    });\n  }, [client, lastQueryError]);\n\n  return (\n    <InfiniteScrollWithComponents<Channel>\n      aria-label={t('channelList.channelList.ariaLabel', 'Channel list')}\n      contentProps={{ role: 'presentation' }}\n      EmptyListIndicator={EmptyListIndicator}\n      EndReachedIndicator={EndReachedIndicator}\n      FirstPageLoadingIndicator={FirstPageLoadingIndicator}\n      ListItem={ListItem as ComponentType<{ item: Channel }>}\n      LoadingNextPageIndicator={LoadingNextPageIndicator}\n      loadNextDebounceMs={loadMoreDebounceMs}\n      loadNextOnScrollToBottom={paginator.next}\n      onClickCapture={onClickCapture}\n      onKeyDown={onKeyDown}\n      paginator={paginator}\n      ref={listboxRef}\n      role='listbox'\n      threshold={loadMoreThresholdPx}\n    />\n  );\n};\n\nconst DefaultEmptyChannelList = () => <EmptyStateIndicator listType='channel' />;\n\nconst DefaultEndReachedIndicator = () => null;\n\nconst DefaultListItem = ({ item }: { item: unknown }) => (\n  <ChannelListItem channel={item as Channel} />\n);\n\nconst DefaultLoadingNextPageIndicator = ({ isLoading }: { isLoading?: boolean }) =>\n  isLoading ? <LoadingIndicator /> : null;\n"],"mappings":";;;;;;;;;;;;;AAqBA,IAAM,iCAAiC,WAAkC;CAIvE,YAAY,MAAM,UAAU,KAAA;CAC5B,gBAAgB,MAAM;AACxB;;;;;;;;AASA,IAAa,eAAe,EAC1B,oBACA,qBACA,gBACsB;CACtB,MAAM,EAAE,gBAAgB,WAAW,eAAe;CAClD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,YAAY,mBAAmB,cACrC,UAAU,OACV,6BACF;CACA,MAAM,EACJ,qBAAqB,yBACrB,sBAAsB,4BACtB,4BAA4B,iBAC5B,WAAW,iBACX,2BAA2B,oCACzB,oBAAoB;CASxB,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,EAAE,gBAAgB,cAAc,iCAAiC,UAAU;CAGjF,gBAAgB,eAAe,sBAAsB,GAAG,CAAC,cAAc,CAAC;CAKxE,gBAAgB;EACd,IAAI,CAAC,YAAY;EACjB,UAAU,gBAAgB;CAC5B,GAAG,CAAC,YAAY,SAAS,CAAC;CAE1B,gBAAgB;EACd,IAAI,CAAC,gBAAgB;EACrB,OAAO,cAAc,SAAS;GAC5B,SAAS,eAAe;GACxB,QAAQ;IAAE,SAAS,EAAE,QAAQ,sBAAsB;IAAG,SAAS;GAAc;EAC/E,CAAC;CACH,GAAG,CAAC,QAAQ,cAAc,CAAC;CAE3B,OACE,oBAAC,8BAAD;EACE,cAAY,EAAE,qCAAqC,cAAc;EACjE,cAAc,EAAE,MAAM,eAAe;EACjB;EACC;EACM;EACjB;EACgB;EAC1B,oBAAoB;EACpB,0BAA0B,UAAU;EACpB;EACL;EACA;EACX,KAAK;EACL,MAAK;EACL,WAAW;CACZ,CAAA;AAEL;AAEA,IAAM,gCAAgC,oBAAC,qBAAD,EAAqB,UAAS,UAAW,CAAA;AAE/E,IAAM,mCAAmC;AAEzC,IAAM,mBAAmB,EAAE,WACzB,oBAAC,iBAAD,EAAiB,SAAS,KAAkB,CAAA;AAG9C,IAAM,mCAAmC,EAAE,gBACzC,YAAY,oBAAC,kBAAD,CAAmB,CAAA,IAAI"}

package/dist/es/components/ChannelList/ChannelListHeader.mjs

@@ -1,19 +1,19 @@
-import { useChatContext } from "../../context/ChatContext.mjs";
 import { useComponentContext } from "../../context/ComponentContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useWorkspaceNavigation } from "../../context/WorkspaceNavigationContext.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChannelList/ChannelListHeader.tsx
 var ChannelListHeader = () => {
 	const { t } = useTranslationContext();
-	const { channel } = useChatContext();
 	const { HeaderEndContent } = useComponentContext();
+	const hasActiveChannel = useWorkspaceNavigation().openChannels.length > 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__channel-list__header",
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "str-chat__channel-list__header__title",
-			children: t("Chats")
-		}), channel && HeaderEndContent && /* @__PURE__ */ jsx(HeaderEndContent, {})]
+			children: t("channelList.header.chats.text", "Chats")
+		}), hasActiveChannel && HeaderEndContent && /* @__PURE__ */ jsx(HeaderEndContent, {})]
 	});
 };
 //#endregion

package/dist/es/components/ChannelList/ChannelListHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelListHeader.mjs","names":[],"sources":["../../../../src/components/ChannelList/ChannelListHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useChatContext,\n  useComponentContext,\n  useTranslationContext,\n} from '../../context';\n\nexport const ChannelListHeader = () => {\n  const { t } = useTranslationContext();\n  const { channel } = useChatContext();\n  const { HeaderEndContent } = useComponentContext();\n  return (\n    <div className='str-chat__channel-list__header'>\n      <div className='str-chat__channel-list__header__title'>{t('Chats')}</div>\n      {channel && HeaderEndContent && <HeaderEndContent />}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAOA,IAAa,0BAA0B;CACrC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,EAAE,qBAAqB,oBAAoB;CACjD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GAAK,WAAU;aAAyC,EAAE,OAAO;EAAO,CAAA,GACvE,WAAW,oBAAoB,oBAAC,kBAAD,CAAmB,CAAA,CAChD;;AAET"}
+{"version":3,"file":"ChannelListHeader.mjs","names":[],"sources":["../../../../src/components/ChannelList/ChannelListHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useComponentContext,\n  useTranslationContext,\n  useWorkspaceNavigation,\n} from '../../context';\n\nexport const ChannelListHeader = () => {\n  const { t } = useTranslationContext();\n  const { HeaderEndContent } = useComponentContext();\n  // A channel is \"active\" when one is open in the workspace (mirrors ThreadListHeader).\n  const hasActiveChannel = useWorkspaceNavigation().openChannels.length > 0;\n  return (\n    <div className='str-chat__channel-list__header'>\n      <div className='str-chat__channel-list__header__title'>\n        {t('channelList.header.chats.text', 'Chats')}\n      </div>\n      {hasActiveChannel && HeaderEndContent && <HeaderEndContent />}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAOA,IAAa,0BAA0B;CACrC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,qBAAqB,oBAAoB;CAEjD,MAAM,mBAAmB,uBAAuB,CAAC,CAAC,aAAa,SAAS;CACxE,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GAAK,WAAU;aACZ,EAAE,iCAAiC,OAAO;EACxC,CAAA,GACJ,oBAAoB,oBAAoB,oBAAC,kBAAD,CAAmB,CAAA,CACzD;;AAET"}

package/dist/es/components/ChannelList/ChannelLists.mjs

@@ -0,0 +1,31 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { ChannelListContextProvider } from "../../context/ChannelListContext.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { ChannelList } from "./ChannelList.mjs";
+import "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/components/ChannelList/ChannelLists.tsx
+var paginatorsSelector = (state) => ({ paginators: state.paginators });
+/**
+* Renders one `<ChannelList/>` per paginator held by the `ChannelManager` on
+* `ChatContext` — i.e. its data source is the `ChannelManager` (the whole set of lists). Each child
+* `ChannelList` registers the (ref-counted) WS subscriptions. The primary (`paginators[0]`)
+* paginator is exposed through `ChannelListContext` so descendants (search results, member
+* actions, notification targeting) can read/mutate the loaded list without knowing about the
+* channel manager.
+*/
+var ChannelLists = () => {
+	const { channelManager } = useChatContext();
+	const { paginators } = useStateStore(channelManager.state, paginatorsSelector);
+	const lists = paginators.map((paginator) => /* @__PURE__ */ jsx(ChannelList, { paginator }, paginator.id));
+	const primaryPaginator = paginators[0];
+	if (!primaryPaginator) return /* @__PURE__ */ jsx(Fragment$1, { children: lists });
+	return /* @__PURE__ */ jsx(ChannelListContextProvider, {
+		value: { paginator: primaryPaginator },
+		children: lists
+	});
+};
+//#endregion
+export { ChannelLists };
+
+//# sourceMappingURL=ChannelLists.mjs.map

package/dist/es/components/ChannelList/ChannelLists.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelLists.mjs","names":[],"sources":["../../../../src/components/ChannelList/ChannelLists.tsx"],"sourcesContent":["import React from 'react';\nimport type { ChannelManagerState } from 'stream-chat';\n\nimport { ChannelListContextProvider } from '../../context/ChannelListContext';\nimport { useChatContext } from '../../context/ChatContext';\nimport { useStateStore } from '../../store';\nimport { ChannelList } from './ChannelList';\n\nconst paginatorsSelector = (state: ChannelManagerState) => ({\n  paginators: state.paginators,\n});\n\n/**\n * Renders one `<ChannelList/>` per paginator held by the `ChannelManager` on\n * `ChatContext` — i.e. its data source is the `ChannelManager` (the whole set of lists). Each child\n * `ChannelList` registers the (ref-counted) WS subscriptions. The primary (`paginators[0]`)\n * paginator is exposed through `ChannelListContext` so descendants (search results, member\n * actions, notification targeting) can read/mutate the loaded list without knowing about the\n * channel manager.\n */\nexport const ChannelLists = () => {\n  const { channelManager } = useChatContext();\n  const { paginators } = useStateStore(channelManager.state, paginatorsSelector);\n\n  const lists = paginators.map((paginator) => (\n    <ChannelList key={paginator.id} paginator={paginator} />\n  ));\n\n  const primaryPaginator = paginators[0];\n  if (!primaryPaginator) return <>{lists}</>;\n\n  return (\n    <ChannelListContextProvider value={{ paginator: primaryPaginator }}>\n      {lists}\n    </ChannelListContextProvider>\n  );\n};\n"],"mappings":";;;;;;;AAQA,IAAM,sBAAsB,WAAgC,EAC1D,YAAY,MAAM,WACpB;;;;;;;;;AAUA,IAAa,qBAAqB;CAChC,MAAM,EAAE,mBAAmB,eAAe;CAC1C,MAAM,EAAE,eAAe,cAAc,eAAe,OAAO,kBAAkB;CAE7E,MAAM,QAAQ,WAAW,KAAK,cAC5B,oBAAC,aAAD,EAA2C,UAAY,GAArC,UAAU,EAA2B,CACxD;CAED,MAAM,mBAAmB,WAAW;CACpC,IAAI,CAAC,kBAAkB,OAAO,oBAAA,YAAA,EAAA,UAAG,MAAQ,CAAA;CAEzC,OACE,oBAAC,4BAAD;EAA4B,OAAO,EAAE,WAAW,iBAAiB;YAC9D;CACyB,CAAA;AAEhC"}

package/dist/es/components/ChannelList/ChannelNavigation.mjs

@@ -0,0 +1,36 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { NotificationList } from "../Notifications/NotificationList.mjs";
+import { ChannelLists } from "./ChannelLists.mjs";
+import { ChannelListHeader } from "./ChannelListHeader.mjs";
+import { Search } from "../Search/Search.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ChannelList/ChannelNavigation.tsx
+var searchControllerStateSelector = (state) => ({ isActive: state.isActive });
+/**
+* Channel navigation region: owns the search-results ↔ channel-list swap so the
+* list components stay pure. Renders the `ChannelListHeader`, then `Search` (bar
+* always; results while active), then the paginator-driven `ChannelLists` only while
+* search is inactive. Mapped to the channel-navigation slot; `Search` is customizable
+* via the `ComponentContext` `Search` slot.
+*/
+var ChannelNavigation = () => {
+	const { ChannelListHeader: ChannelListHeader$1 = ChannelListHeader, NotificationList: NotificationList$1 = NotificationList, Search: Search$1 = Search } = useComponentContext();
+	const { searchController } = useChatContext();
+	const { isActive } = useStateStore(searchController.state, searchControllerStateSelector);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-list",
+		children: [
+			/* @__PURE__ */ jsx(ChannelListHeader$1, {}),
+			/* @__PURE__ */ jsx(Search$1, {}),
+			!isActive && /* @__PURE__ */ jsx(ChannelLists, {}),
+			/* @__PURE__ */ jsx(NotificationList$1, { panel: "channel-list" })
+		]
+	});
+};
+//#endregion
+export { ChannelNavigation };
+
+//# sourceMappingURL=ChannelNavigation.mjs.map

package/dist/es/components/ChannelList/ChannelNavigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelNavigation.mjs","names":[],"sources":["../../../../src/components/ChannelList/ChannelNavigation.tsx"],"sourcesContent":["import React from 'react';\nimport type { SearchControllerState } from 'stream-chat';\n\nimport { ChannelListHeader as DefaultChannelListHeader } from './ChannelListHeader';\nimport { ChannelLists } from './ChannelLists';\nimport { NotificationList as DefaultNotificationList } from '../Notifications';\nimport { Search as DefaultSearch } from '../Search';\nimport { useChatContext, useComponentContext } from '../../context';\nimport { useStateStore } from '../../store';\n\nconst searchControllerStateSelector = (state: SearchControllerState) => ({\n  isActive: state.isActive,\n});\n\n/**\n * Channel navigation region: owns the search-results ↔ channel-list swap so the\n * list components stay pure. Renders the `ChannelListHeader`, then `Search` (bar\n * always; results while active), then the paginator-driven `ChannelLists` only while\n * search is inactive. Mapped to the channel-navigation slot; `Search` is customizable\n * via the `ComponentContext` `Search` slot.\n */\nexport const ChannelNavigation = () => {\n  const {\n    ChannelListHeader = DefaultChannelListHeader,\n    NotificationList = DefaultNotificationList,\n    Search = DefaultSearch,\n  } = useComponentContext();\n  const { searchController } = useChatContext();\n  const { isActive } = useStateStore(\n    searchController.state,\n    searchControllerStateSelector,\n  );\n\n  return (\n    <div className='str-chat__channel-list'>\n      <ChannelListHeader />\n      <Search />\n      {!isActive && <ChannelLists />}\n      <NotificationList panel='channel-list' />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAUA,IAAM,iCAAiC,WAAkC,EACvE,UAAU,MAAM,SAClB;;;;;;;;AASA,IAAa,0BAA0B;CACrC,MAAM,EACJ,mBAAA,sBAAoB,mBACpB,kBAAA,qBAAmB,kBACnB,QAAA,WAAS,WACP,oBAAoB;CACxB,MAAM,EAAE,qBAAqB,eAAe;CAC5C,MAAM,EAAE,aAAa,cACnB,iBAAiB,OACjB,6BACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,qBAAD,CAAoB,CAAA;GACpB,oBAAC,UAAD,CAAS,CAAA;GACR,CAAC,YAAY,oBAAC,cAAD,CAAe,CAAA;GAC7B,oBAAC,oBAAD,EAAkB,OAAM,eAAgB,CAAA;EACrC;;AAET"}

package/dist/es/components/ChannelList/hooks/useChannelMembersState.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useChannelMembersState.mjs","names":[],"sources":["../../../../../src/components/ChannelList/hooks/useChannelMembersState.ts"],"sourcesContent":["import type { Channel, ChannelMemberResponse, EventTypes } from 'stream-chat';\nimport { useSelectedChannelState } from './useSelectedChannelState';\n\nconst selector = (c: Channel) => c.state.members;\nconst keys: EventTypes[] = [\n  'member.updated',\n  'member.added',\n  'member.removed',\n  'user.banned',\n  'user.unbanned',\n  'user.deleted',\n  'user.presence.changed',\n];\n\nexport function useChannelMembersState(\n  channel: Channel,\n): Record<string, ChannelMemberResponse>;\nexport function useChannelMembersState(\n  channel?: Channel | undefined,\n): Record<string, ChannelMemberResponse> | undefined;\nexport function useChannelMembersState(channel?: Channel) {\n  return useSelectedChannelState({ channel, selector, stateChangeEventKeys: keys });\n}\n"],"mappings":";;AAGA,IAAM,YAAY,MAAe,EAAE,MAAM;AACzC,IAAM,OAAqB;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAQA,SAAgB,uBAAuB,SAAmB;CACxD,OAAO,wBAAwB;EAAE;EAAS;EAAU,sBAAsB;CAAK,CAAC;AAClF"}
+{"version":3,"file":"useChannelMembersState.mjs","names":[],"sources":["../../../../../src/components/ChannelList/hooks/useChannelMembersState.ts"],"sourcesContent":["import type { Channel, ChannelMemberResponse, EventType } from 'stream-chat';\nimport { useSelectedChannelState } from './useSelectedChannelState';\n\nconst selector = (c: Channel) => c.state.members;\nconst keys: EventType[] = [\n  'member.updated',\n  'member.added',\n  'member.removed',\n  'user.banned',\n  'user.unbanned',\n  'user.deleted',\n  'user.presence.changed',\n];\n\nexport function useChannelMembersState(\n  channel: Channel,\n): Record<string, ChannelMemberResponse>;\nexport function useChannelMembersState(\n  channel?: Channel | undefined,\n): Record<string, ChannelMemberResponse> | undefined;\nexport function useChannelMembersState(channel?: Channel) {\n  return useSelectedChannelState({ channel, selector, stateChangeEventKeys: keys });\n}\n"],"mappings":";;AAGA,IAAM,YAAY,MAAe,EAAE,MAAM;AACzC,IAAM,OAAoB;CACxB;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAQA,SAAgB,uBAAuB,SAAmB;CACxD,OAAO,wBAAwB;EAAE;EAAS;EAAU,sBAAsB;CAAK,CAAC;AAClF"}

package/dist/es/components/ChannelList/hooks/useChannelMembershipState.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useChannelMembershipState.mjs","names":[],"sources":["../../../../../src/components/ChannelList/hooks/useChannelMembershipState.ts"],"sourcesContent":["import type { Channel, ChannelMemberResponse, EventTypes } from 'stream-chat';\nimport { useSelectedChannelState } from './useSelectedChannelState';\n\nconst selector = (c: Channel) => c.state.membership;\nconst keys: EventTypes[] = ['member.updated'];\n\nexport function useChannelMembershipState(channel: Channel): ChannelMemberResponse;\nexport function useChannelMembershipState(\n  channel?: Channel | undefined,\n): ChannelMemberResponse | undefined;\nexport function useChannelMembershipState(channel?: Channel) {\n  return useSelectedChannelState({ channel, selector, stateChangeEventKeys: keys });\n}\n"],"mappings":";;AAGA,IAAM,YAAY,MAAe,EAAE,MAAM;AACzC,IAAM,OAAqB,CAAC,gBAAgB;AAM5C,SAAgB,0BAA0B,SAAmB;CAC3D,OAAO,wBAAwB;EAAE;EAAS;EAAU,sBAAsB;CAAK,CAAC;AAClF"}
+{"version":3,"file":"useChannelMembershipState.mjs","names":[],"sources":["../../../../../src/components/ChannelList/hooks/useChannelMembershipState.ts"],"sourcesContent":["import type { Channel, ChannelMemberResponse, EventType } from 'stream-chat';\nimport { useSelectedChannelState } from './useSelectedChannelState';\n\nconst selector = (c: Channel) => c.state.membership;\nconst keys: EventType[] = ['member.updated'];\n\nexport function useChannelMembershipState(channel: Channel): ChannelMemberResponse;\nexport function useChannelMembershipState(\n  channel?: Channel | undefined,\n): ChannelMemberResponse | undefined;\nexport function useChannelMembershipState(channel?: Channel) {\n  return useSelectedChannelState({ channel, selector, stateChangeEventKeys: keys });\n}\n"],"mappings":";;AAGA,IAAM,YAAY,MAAe,EAAE,MAAM;AACzC,IAAM,OAAoB,CAAC,gBAAgB;AAM3C,SAAgB,0BAA0B,SAAmB;CAC3D,OAAO,wBAAwB;EAAE;EAAS;EAAU,sBAAsB;CAAK,CAAC;AAClF"}

package/dist/es/components/ChannelList/hooks/useChannelPaginatorState.mjs

@@ -0,0 +1,21 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+//#region src/components/ChannelList/hooks/useChannelPaginatorState.ts
+var selector = (state) => ({
+	channels: state.items,
+	hasNext: state.hasMoreTail,
+	hasPrev: state.hasMoreHead,
+	isLoading: state.isLoading,
+	lastQueryError: state.lastQueryError
+});
+/**
+* Reactive view of a `ChannelPaginator`'s paginated state — the channels plus query status. This
+* is the single supported read path for the paginated list, so consumers never touch the raw
+* store shape (which lets the SDK evolve its internal storage, e.g. id-based, without breaking
+* callers). Items ingested out of pagination order are a separate concern — subscribe to the
+* paginator's `intervalViews` store (`logicalHead` / `logicalTail`) for those.
+*/
+var useChannelPaginatorState = (paginator) => useStateStore(paginator.state, selector);
+//#endregion
+export { useChannelPaginatorState };
+
+//# sourceMappingURL=useChannelPaginatorState.mjs.map

package/dist/es/components/ChannelList/hooks/useChannelPaginatorState.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelPaginatorState.mjs","names":[],"sources":["../../../../../src/components/ChannelList/hooks/useChannelPaginatorState.ts"],"sourcesContent":["import type { ChannelPaginator, ChannelPaginatorState } from 'stream-chat';\n\nimport { useStateStore } from '../../../store';\n\nexport type ChannelPaginatorView = {\n  /** The channels currently loaded by pagination, in server order. */\n  channels: ChannelPaginatorState['items'];\n  hasNext: boolean;\n  hasPrev: boolean;\n  isLoading: boolean;\n  lastQueryError?: Error;\n};\n\nconst selector = (state: ChannelPaginatorState): ChannelPaginatorView => ({\n  channels: state.items,\n  hasNext: state.hasMoreTail,\n  hasPrev: state.hasMoreHead,\n  isLoading: state.isLoading,\n  lastQueryError: state.lastQueryError,\n});\n\n/**\n * Reactive view of a `ChannelPaginator`'s paginated state — the channels plus query status. This\n * is the single supported read path for the paginated list, so consumers never touch the raw\n * store shape (which lets the SDK evolve its internal storage, e.g. id-based, without breaking\n * callers). Items ingested out of pagination order are a separate concern — subscribe to the\n * paginator's `intervalViews` store (`logicalHead` / `logicalTail`) for those.\n */\nexport const useChannelPaginatorState = (paginator: ChannelPaginator) =>\n  useStateStore(paginator.state, selector);\n"],"mappings":";;AAaA,IAAM,YAAY,WAAwD;CACxE,UAAU,MAAM;CAChB,SAAS,MAAM;CACf,SAAS,MAAM;CACf,WAAW,MAAM;CACjB,gBAAgB,MAAM;AACxB;;;;;;;;AASA,IAAa,4BAA4B,cACvC,cAAc,UAAU,OAAO,QAAQ"}

package/dist/es/components/ChannelList/hooks/useSelectedChannelState.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectedChannelState.mjs","names":[],"sources":["../../../../../src/components/ChannelList/hooks/useSelectedChannelState.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useSyncExternalStore } from 'use-sync-external-store/shim';\nimport type { Channel, EventTypes } from 'stream-chat';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nexport function useSelectedChannelState<O>(_: {\n  channel: Channel;\n  selector: (channel: Channel) => O;\n  stateChangeEventKeys?: EventTypes[];\n}): O;\nexport function useSelectedChannelState<O>(_: {\n  selector: (channel: Channel) => O;\n  channel?: Channel | undefined;\n  stateChangeEventKeys?: EventTypes[];\n}): O | undefined;\nexport function useSelectedChannelState<O>({\n  channel,\n  selector,\n  stateChangeEventKeys = ['all'],\n}: {\n  selector: (channel: Channel) => O;\n  channel?: Channel;\n  stateChangeEventKeys?: EventTypes[];\n}): O | undefined {\n  const subscribe = useCallback(\n    (onStoreChange: (value: O) => void) => {\n      if (!channel) return noop;\n\n      const subscriptions = stateChangeEventKeys.map((et) =>\n        channel.on(et, () => {\n          onStoreChange(selector(channel));\n        }),\n      );\n\n      return () => subscriptions.forEach((subscription) => subscription.unsubscribe());\n    },\n    [channel, selector, stateChangeEventKeys],\n  );\n\n  const getSnapshot = useCallback(() => {\n    if (!channel) return undefined;\n\n    return selector(channel);\n  }, [channel, selector]);\n\n  return useSyncExternalStore(subscribe, getSnapshot);\n}\n"],"mappings":";;;AAKA,IAAM,aAAa,CAAC;AAYpB,SAAgB,wBAA2B,EACzC,SACA,UACA,uBAAuB,CAAC,KAAK,KAKb;CAsBhB,OAAO,qBArBW,aACf,kBAAsC;EACrC,IAAI,CAAC,SAAS,OAAO;EAErB,MAAM,gBAAgB,qBAAqB,KAAK,OAC9C,QAAQ,GAAG,UAAU;GACnB,cAAc,SAAS,OAAO,CAAC;EACjC,CAAC,CACH;EAEA,aAAa,cAAc,SAAS,iBAAiB,aAAa,YAAY,CAAC;CACjF,GACA;EAAC;EAAS;EAAU;CAAoB,CASd,GANR,kBAAkB;EACpC,IAAI,CAAC,SAAS,OAAO,KAAA;EAErB,OAAO,SAAS,OAAO;CACzB,GAAG,CAAC,SAAS,QAAQ,CAEkB,CAAW;AACpD"}
+{"version":3,"file":"useSelectedChannelState.mjs","names":[],"sources":["../../../../../src/components/ChannelList/hooks/useSelectedChannelState.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useSyncExternalStore } from 'use-sync-external-store/shim';\nimport type { Channel, EventType } from 'stream-chat';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nexport function useSelectedChannelState<O>(_: {\n  channel: Channel;\n  selector: (channel: Channel) => O;\n  stateChangeEventKeys?: EventType[];\n}): O;\nexport function useSelectedChannelState<O>(_: {\n  selector: (channel: Channel) => O;\n  channel?: Channel | undefined;\n  stateChangeEventKeys?: EventType[];\n}): O | undefined;\nexport function useSelectedChannelState<O>({\n  channel,\n  selector,\n  stateChangeEventKeys = ['all'],\n}: {\n  selector: (channel: Channel) => O;\n  channel?: Channel;\n  stateChangeEventKeys?: EventType[];\n}): O | undefined {\n  const subscribe = useCallback(\n    (onStoreChange: (value: O) => void) => {\n      if (!channel) return noop;\n\n      const subscriptions = stateChangeEventKeys.map((et) =>\n        channel.on(et, () => {\n          onStoreChange(selector(channel));\n        }),\n      );\n\n      return () => subscriptions.forEach((subscription) => subscription.unsubscribe());\n    },\n    [channel, selector, stateChangeEventKeys],\n  );\n\n  const getSnapshot = useCallback(() => {\n    if (!channel) return undefined;\n\n    return selector(channel);\n  }, [channel, selector]);\n\n  return useSyncExternalStore(subscribe, getSnapshot);\n}\n"],"mappings":";;;AAKA,IAAM,aAAa,CAAC;AAYpB,SAAgB,wBAA2B,EACzC,SACA,UACA,uBAAuB,CAAC,KAAK,KAKb;CAsBhB,OAAO,qBArBW,aACf,kBAAsC;EACrC,IAAI,CAAC,SAAS,OAAO;EAErB,MAAM,gBAAgB,qBAAqB,KAAK,OAC9C,QAAQ,GAAG,UAAU;GACnB,cAAc,SAAS,OAAO,CAAC;EACjC,CAAC,CACH;EAEA,aAAa,cAAc,SAAS,iBAAiB,aAAa,YAAY,CAAC;CACjF,GACA;EAAC;EAAS;EAAU;CAAoB,CASd,GANR,kBAAkB;EACpC,IAAI,CAAC,SAAS,OAAO,KAAA;EAErB,OAAO,SAAS,OAAO;CACzB,GAAG,CAAC,SAAS,QAAQ,CAEkB,CAAW;AACpD"}

package/dist/es/components/ChannelListItem/ChannelListItem.mjs

@@ -1,95 +1,46 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { requireContext } from "../../context/requireContext.mjs";
 import { useChatContext } from "../../context/ChatContext.mjs";
 import { useComponentContext } from "../../context/ComponentContext.mjs";
-import { useTranslationContext } from "../../context/TranslationContext.mjs";
-import { getLatestMessagePreview } from "./utils.mjs";
-import { useChannelPreviewInfo } from "./hooks/useChannelPreviewInfo.mjs";
 import { useChannelMembershipState } from "../ChannelList/hooks/useChannelMembershipState.mjs";
 import { useIsChannelMuted } from "./hooks/useIsChannelMuted.mjs";
 import { useMessageDeliveryStatus } from "./hooks/useMessageDeliveryStatus.mjs";
 import { ChannelListItemUI } from "./ChannelListItemUI.mjs";
+import { useChannelPreviewInfo } from "./hooks/useChannelPreviewInfo.mjs";
+import { useWorkspaceNavigation } from "../../context/WorkspaceNavigationContext.mjs";
 import React, { useContext, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import throttle from "lodash.throttle";
 //#region src/components/ChannelListItem/ChannelListItem.tsx
-var ChannelListItemContext = React.createContext({ channel: null });
-var useChannelListItemContext = () => useContext(ChannelListItemContext);
+var ChannelListItemContext = React.createContext(void 0);
+var useChannelListItemContext = () => requireContext(useContext(ChannelListItemContext), "useChannelListItemContext", "ChannelListItemUI");
+var lastMessageSelector = ({ lastMessage }) => ({ lastMessage: lastMessage ?? void 0 });
 var ChannelListItem = (props) => {
-	const { active, channel, channelUpdateCount, getLatestMessagePreview: getLatestMessagePreview$1 = getLatestMessagePreview } = props;
+	const { active, channel } = props;
 	const { ChannelListItemUI: ChannelListItemUI$1 = ChannelListItemUI } = useComponentContext();
-	const { channel: activeChannel, client, isMessageAIGenerated, setActiveChannel } = useChatContext("ChannelPreview");
-	const { t, userLanguage } = useTranslationContext("ChannelPreview");
+	const { client } = useChatContext();
+	const channelOpenInSlot = useWorkspaceNavigation().isChannelActive(channel.cid ?? void 0);
 	const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({ channel });
 	const membership = useChannelMembershipState(channel);
-	const [lastMessage, setLastMessage] = useState(channel.state.messages[channel.state.messages.length - 1]);
-	const [latestMessagePreview, setLatestMessagePreview] = useState(() => getLatestMessagePreview$1(channel, t, userLanguage, isMessageAIGenerated));
-	const [unread, setUnread] = useState(0);
+	const { lastMessage: trackedLastMessage } = useStateStore(channel.messagePaginator.aggregateState, lastMessageSelector);
+	const previewedMessage = props.previewedMessage ?? trackedLastMessage;
 	const { messageDeliveryStatus } = useMessageDeliveryStatus({
 		channel,
-		lastMessage
+		lastMessage: previewedMessage
 	});
-	const isActive = typeof active === "undefined" ? activeChannel?.cid === channel.cid : active;
+	const isActive = typeof active === "undefined" ? !!channelOpenInSlot : active;
 	const { muted } = useIsChannelMuted(channel);
+	const [unreadCount, setUnreadCount] = useState(() => channel.countUnread());
 	useEffect(() => {
-		const handleChannelReadStateChange = (event) => {
-			if (channel.cid !== event.cid) return;
-			if (event.user?.id !== client.user?.id) return;
-			setUnread(channel.countUnread());
-		};
-		const handleMarkRead = (event) => {
-			if (event.thread_id) return;
-			if (event.user && client.user && event.user.id !== client.user.id) return;
-			if (!event.cid) return setUnread(0);
-			if (channel.cid !== event.cid) return;
-			setUnread(0);
-		};
-		client.on("notification.mark_read", handleMarkRead);
-		channel.on("notification.mark_unread", handleChannelReadStateChange);
-		channel.on("message.read_locally", handleChannelReadStateChange);
-		channel.on("message.read", handleChannelReadStateChange);
+		const ownUserId = client.user?.id;
+		const apply = throttle(setUnreadCount, 400);
+		const unsubscribe = channel.state.subscribeWithSelector(({ read }) => ({ unreadCount: ownUserId ? read[ownUserId]?.unread_messages ?? 0 : 0 }), ({ unreadCount }) => apply(unreadCount));
 		return () => {
-			client.off("notification.mark_read", handleMarkRead);
-			channel.off("notification.mark_unread", handleChannelReadStateChange);
-			channel.off("message.read_locally", handleChannelReadStateChange);
-			channel.off("message.read", handleChannelReadStateChange);
+			apply.cancel();
+			unsubscribe();
 		};
 	}, [channel, client]);
-	const refreshUnreadCount = useMemo(() => throttle(() => {
-		if (muted) setUnread(0);
-		else setUnread(channel.countUnread());
-	}, 400), [channel, muted]);
-	useEffect(() => {
-		refreshUnreadCount();
-		setLatestMessagePreview(getLatestMessagePreview$1(channel, t, userLanguage, isMessageAIGenerated));
-		const handleEvent = (event) => {
-			if (event.type === "user.messages.deleted" && event.cid && event.cid !== channel.cid) return;
-			setLastMessage(channel.state.latestMessages[channel.state.latestMessages.length - 1]);
-			setLatestMessagePreview(getLatestMessagePreview$1(channel, t, userLanguage, isMessageAIGenerated));
-			refreshUnreadCount();
-		};
-		channel.on("message.new", handleEvent);
-		channel.on("message.updated", handleEvent);
-		channel.on("message.deleted", handleEvent);
-		client.on("user.messages.deleted", handleEvent);
-		channel.on("message.undeleted", handleEvent);
-		channel.on("channel.truncated", handleEvent);
-		return () => {
-			channel.off("message.new", handleEvent);
-			channel.off("message.updated", handleEvent);
-			channel.off("message.deleted", handleEvent);
-			client.off("user.messages.deleted", handleEvent);
-			channel.off("message.undeleted", handleEvent);
-			channel.off("channel.truncated", handleEvent);
-		};
-	}, [
-		channel,
-		client,
-		refreshUnreadCount,
-		channelUpdateCount,
-		getLatestMessagePreview$1,
-		t,
-		userLanguage,
-		isMessageAIGenerated
-	]);
+	const unread = muted ? 0 : unreadCount;
 	const channelPreviewContextValue = useMemo(() => ({ channel }), [channel]);
 	if (!ChannelListItemUI$1) return null;
 	return /* @__PURE__ */ jsx(ChannelListItemContext.Provider, {
@@ -100,12 +51,10 @@ var ChannelListItem = (props) => {
 			displayImage,
 			displayTitle,
 			groupChannelDisplayInfo,
-			lastMessage,
-			latestMessagePreview,
 			messageDeliveryStatus,
 			muted,
-			pinned: !!membership.pinned_at,
-			setActiveChannel,
+			pinned: membership.pinned_at != null,
+			previewedMessage,
 			unread
 		})
 	});