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

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.mjs

@@ -1,10 +1,10 @@
 import { useChatContext } from "../../../../context/ChatContext.mjs";
 import { useComponentContext } from "../../../../context/ComponentContext.mjs";
-import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
 import { Avatar } from "../../../../components/Avatar/Avatar.mjs";
-import { Prompt } from "../../../../components/Dialog/components/Prompt.mjs";
 import { extractDisplayInfo } from "../../../../components/Avatar/utils.mjs";
+import { Prompt } from "../../../../components/Dialog/components/Prompt.mjs";
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
 import { ListItemLayout } from "../../../../components/ListItemLayout/ListItemLayout.mjs";
 import { ChannelDetailListLoadingIndicator } from "../../ChannelDetailListLoadingIndicator.mjs";
 import { getMemberDisplayName, getMemberUserId } from "./ChannelMembersView.utils.mjs";
@@ -13,17 +13,18 @@ import { ChannelDetailSearchInput } from "../../ChannelDetailSearchInput.mjs";
 import { ChannelDetailEmptyList } from "../../ChannelDetailEmptyList.mjs";
 import { useChannelMembersSearch } from "./useChannelMembersSearch.mjs";
 import { useCallback, useMemo } from "react";
+import { convertTimestampToDate } from "stream-chat";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx
 var getMemberRoleTranslation = (member, t) => {
-	if ([member.user?.role, member.channel_role].includes("admin")) return t("Admin");
-	if (member.channel_role === "channel_moderator" || member.channel_role === "moderator") return t("Moderator");
-	if (member.role === "owner") return t("Owner");
+	if ([member.user?.role, member.channel_role].includes("admin")) return t("channelDetail.channelMembersBrowse.admin.label", "Admin");
+	if (member.channel_role === "channel_moderator" || member.channel_role === "moderator") return t("channelDetail.channelMembersBrowse.moderator.label", "Moderator");
+	if (member.role === "owner") return t("channelDetail.channelMembersBrowse.owner.label", "Owner");
 };
 var getPresenceStatusText = (user, t) => {
-	if (user?.online) return t("Online");
-	if (user?.last_active) return t("Last seen {{ timestamp }}", { timestamp: t("timestamp/ChannelMembersLastActive", { timestamp: user.last_active }) });
-	return t("Offline");
+	if (user?.online) return t("common.online.label", "Online");
+	if (user?.last_active != null) return t("channelDetail.channelMemberDetail.lastSeen.label", "Last seen {{ timestamp }}", { timestamp: t("timestamp.ChannelMembersLastActive", { timestamp: convertTimestampToDate(user.last_active) }) });
+	return t("common.offline.label", "Offline");
 };
 var ChannelMembersBrowseViewItem = ({ isMuted, member, onMemberSelect }) => {
 	const { t } = useTranslationContext();
@@ -56,7 +57,7 @@ var ChannelMembersBrowseViewItem = ({ isMuted, member, onMemberSelect }) => {
 		LeadingSlot,
 		RootElement: "button",
 		rootProps: useMemo(() => ({
-			"aria-label": t("View member details for {{ member }}", { member: displayName }),
+			"aria-label": t("channelDetail.channelMembersBrowse.viewMemberDetails.ariaLabel", "View member details for {{ member }}", { member: displayName }),
 			className: "str-chat__channel-detail__channel-members-view__list-item",
 			onClick: () => onMemberSelect?.(member)
 		}), [
@@ -75,7 +76,7 @@ var ChannelMembersBrowseView = ({ onMemberSelect }) => {
 	const { mutes } = useChatContext();
 	const { t } = useTranslationContext();
 	const { displayedMembers, handleSearchChange, hasMembers, membersSearchSource, searchInputResetKey } = useChannelMembersSearch();
-	const mutedUserIdSet = useMemo(() => new Set(mutes.map((mute) => mute.target.id)), [mutes]);
+	const mutedUserIdSet = useMemo(() => new Set(mutes.map((mute) => mute.target?.id)), [mutes]);
 	const renderableMembers = useMemo(() => displayedMembers.filter((member) => getMemberUserId(member)), [displayedMembers]);
 	const renderItem = useCallback((_, member) => /* @__PURE__ */ jsx(ChannelMembersBrowseViewItem, {
 		isMuted: mutedUserIdSet.has(getMemberUserId(member)),
@@ -83,7 +84,7 @@ var ChannelMembersBrowseView = ({ onMemberSelect }) => {
 		onMemberSelect
 	}), [mutedUserIdSet, onMemberSelect]);
 	const EmptyPlaceholder = useMemo(() => function ChannelMembersEmptyPlaceholder() {
-		return /* @__PURE__ */ jsx(ChannelDetailEmptyList, { children: t("No member found") });
+		return /* @__PURE__ */ jsx(ChannelDetailEmptyList, { children: t("channelDetail.channelMembersBrowse.noMemberFound.text", "No member found") });
 	}, [t]);
 	const Footer = useMemo(() => function ChannelMembersListFooter() {
 		return /* @__PURE__ */ jsx(ChannelDetailListLoadingIndicator, { searchSource: membersSearchSource });

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelMembersBrowseView.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx"],"sourcesContent":["import type { ChannelMemberResponse } from 'stream-chat';\nimport React, { useCallback, useMemo } from 'react';\n\nimport {\n  useChatContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../../../context';\nimport { Avatar as DefaultAvatar } from '../../../../components/Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../../../../components/Avatar/utils';\nimport { ListItemLayout } from '../../../../components/ListItemLayout';\nimport { VirtualizedList } from '../../VirtualizedList';\nimport { Prompt } from '../../../../components/Dialog';\nimport { getMemberDisplayName, getMemberUserId } from './ChannelMembersView.utils';\nimport { ChannelDetailEmptyList } from '../../ChannelDetailEmptyList';\nimport { ChannelDetailListLoadingIndicator } from '../../ChannelDetailListLoadingIndicator';\nimport { ChannelDetailSearchInput } from '../../ChannelDetailSearchInput';\nimport { useChannelMembersSearch } from './useChannelMembersSearch';\n\nconst getMemberRoleTranslation = (\n  member: ChannelMemberResponse,\n  t: ReturnType<typeof useTranslationContext>['t'],\n) => {\n  if ([member.user?.role, member.channel_role].includes('admin')) return t('Admin');\n  if (member.channel_role === 'channel_moderator' || member.channel_role === 'moderator')\n    return t('Moderator');\n  if (member.role === 'owner') return t('Owner');\n\n  return undefined;\n};\n\nconst getPresenceStatusText = (\n  user: ChannelMemberResponse['user'],\n  t: ReturnType<typeof useTranslationContext>['t'],\n) => {\n  if (user?.online) return t('Online');\n\n  if (user?.last_active) {\n    return t('Last seen {{ timestamp }}', {\n      timestamp: t('timestamp/ChannelMembersLastActive', {\n        timestamp: user.last_active,\n      }),\n    });\n  }\n\n  return t('Offline');\n};\n\nconst ChannelMembersBrowseViewItem = ({\n  isMuted,\n  member,\n  onMemberSelect,\n}: {\n  isMuted: boolean;\n  member: ChannelMemberResponse;\n  onMemberSelect?: (member: ChannelMemberResponse) => void;\n}) => {\n  const { t } = useTranslationContext();\n  const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =\n    useComponentContext();\n  const user = member.user;\n  const displayName = getMemberDisplayName(member);\n  const roleTranslation = getMemberRoleTranslation(member, t);\n\n  const LeadingSlot = useMemo(\n    () =>\n      function MemberAvatar() {\n        const displayInfo = extractDisplayInfo({ user: user ?? undefined });\n\n        return <Avatar {...displayInfo} isOnline={user?.online} size='md' />;\n      },\n    [Avatar, extractDisplayInfo, user],\n  );\n\n  const TrailingSlot = useMemo(\n    () =>\n      function MemberTrailingSlot() {\n        const { IconMute } = useComponentContextIcons();\n        return (\n          <div className='str-chat__channel-detail__channel-members-view__list-item__trailing-slot'>\n            {roleTranslation ? (\n              <span className='str-chat__channel-detail__channel-members-view__role-label'>\n                {roleTranslation}\n              </span>\n            ) : null}\n            {isMuted ? (\n              <IconMute className='str-chat__channel-detail__channel-members-view__list-item__indicator-icon str-chat__channel-detail__channel-members-view__list-item__indicator-icon--mute' />\n            ) : null}\n          </div>\n        );\n      },\n    [isMuted, roleTranslation],\n  );\n\n  const rootProps = useMemo(\n    () => ({\n      'aria-label': t('View member details for {{ member }}', {\n        member: displayName,\n      }),\n      className: 'str-chat__channel-detail__channel-members-view__list-item',\n      onClick: () => onMemberSelect?.(member),\n    }),\n    [displayName, member, onMemberSelect, t],\n  );\n\n  return (\n    <ListItemLayout\n      LeadingSlot={LeadingSlot}\n      RootElement='button'\n      rootProps={rootProps}\n      subtitle={getPresenceStatusText(user, t)}\n      title={displayName}\n      TrailingSlot={TrailingSlot}\n    />\n  );\n};\n\nconst computeMemberItemKey = (_: number, member: ChannelMemberResponse) =>\n  getMemberUserId(member) as string;\n\nexport type ChannelMembersBrowseViewProps = {\n  onMemberSelect?: (member: ChannelMemberResponse) => void;\n};\n\nexport const ChannelMembersBrowseView = ({\n  onMemberSelect,\n}: ChannelMembersBrowseViewProps) => {\n  const { mutes } = useChatContext();\n  const { t } = useTranslationContext();\n  const {\n    displayedMembers,\n    handleSearchChange,\n    hasMembers,\n    membersSearchSource,\n    searchInputResetKey,\n  } = useChannelMembersSearch();\n  const mutedUserIdSet = useMemo(\n    () => new Set(mutes.map((mute) => mute.target.id)),\n    [mutes],\n  );\n\n  // Only members with a resolvable user id are rendered; pre-filtering keeps the\n  // virtualized item renderer total in sync with what it can actually display.\n  const renderableMembers = useMemo(\n    () => displayedMembers.filter((member) => getMemberUserId(member)),\n    [displayedMembers],\n  );\n\n  const renderItem = useCallback(\n    (_: number, member: ChannelMemberResponse) => (\n      <ChannelMembersBrowseViewItem\n        isMuted={mutedUserIdSet.has(getMemberUserId(member) as string)}\n        member={member}\n        onMemberSelect={onMemberSelect}\n      />\n    ),\n    [mutedUserIdSet, onMemberSelect],\n  );\n\n  const EmptyPlaceholder = useMemo(\n    () =>\n      function ChannelMembersEmptyPlaceholder() {\n        return <ChannelDetailEmptyList>{t('No member found')}</ChannelDetailEmptyList>;\n      },\n    [t],\n  );\n\n  const Footer = useMemo(\n    () =>\n      function ChannelMembersListFooter() {\n        return <ChannelDetailListLoadingIndicator searchSource={membersSearchSource} />;\n      },\n    [membersSearchSource],\n  );\n\n  return (\n    <Prompt.Body className='str-chat__channel-members-view__body'>\n      {hasMembers && (\n        <ChannelDetailSearchInput\n          onSearchChange={handleSearchChange}\n          resetKey={searchInputResetKey}\n        />\n      )}\n      <VirtualizedList\n        className='str-chat__channel-detail__channel-members-view__list'\n        computeItemKey={computeMemberItemKey}\n        data={renderableMembers}\n        EmptyPlaceholder={EmptyPlaceholder}\n        Footer={Footer}\n        itemContent={renderItem}\n        loadNext={hasMembers ? membersSearchSource.search : undefined}\n      />\n    </Prompt.Body>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,IAAM,4BACJ,QACA,MACG;CACH,IAAI,CAAC,OAAO,MAAM,MAAM,OAAO,YAAY,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,OAAO;CAChF,IAAI,OAAO,iBAAiB,uBAAuB,OAAO,iBAAiB,aACzE,OAAO,EAAE,WAAW;CACtB,IAAI,OAAO,SAAS,SAAS,OAAO,EAAE,OAAO;AAG/C;AAEA,IAAM,yBACJ,MACA,MACG;CACH,IAAI,MAAM,QAAQ,OAAO,EAAE,QAAQ;CAEnC,IAAI,MAAM,aACR,OAAO,EAAE,6BAA6B,EACpC,WAAW,EAAE,sCAAsC,EACjD,WAAW,KAAK,YAClB,CAAC,EACH,CAAC;CAGH,OAAO,EAAE,SAAS;AACpB;AAEA,IAAM,gCAAgC,EACpC,SACA,QACA,qBAKI;CACJ,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,QAAA,WAAS,QAAe,oBAAA,uBAAqB,uBACnD,oBAAoB;CACtB,MAAM,OAAO,OAAO;CACpB,MAAM,cAAc,qBAAqB,MAAM;CAC/C,MAAM,kBAAkB,yBAAyB,QAAQ,CAAC;CAE1D,MAAM,cAAc,cAEhB,SAAS,eAAe;EAGtB,OAAO,oBAAC,UAAD;GAAQ,GAFK,qBAAmB,EAAE,MAAM,QAAQ,KAAA,EAAU,CAE9C;GAAa,UAAU,MAAM;GAAQ,MAAK;EAAM,CAAA;CACrE,GACF;EAAC;EAAQ;EAAoB;CAAI,CACnC;CAEA,MAAM,eAAe,cAEjB,SAAS,qBAAqB;EAC5B,MAAM,EAAE,aAAa,yBAAyB;EAC9C,OACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,kBACC,oBAAC,QAAD;IAAM,WAAU;cACb;GACG,CAAA,IACJ,MACH,UACC,oBAAC,UAAD,EAAU,WAAU,4JAA6J,CAAA,IAC/K,IACD;;CAET,GACF,CAAC,SAAS,eAAe,CAC3B;CAaA,OACE,oBAAC,gBAAD;EACe;EACb,aAAY;EACD,WAfG,eACT;GACL,cAAc,EAAE,wCAAwC,EACtD,QAAQ,YACV,CAAC;GACD,WAAW;GACX,eAAe,iBAAiB,MAAM;EACxC,IACA;GAAC;GAAa;GAAQ;GAAgB;EAAC,CAO1B;EACX,UAAU,sBAAsB,MAAM,CAAC;EACvC,OAAO;EACO;CACf,CAAA;AAEL;AAEA,IAAM,wBAAwB,GAAW,WACvC,gBAAgB,MAAM;AAMxB,IAAa,4BAA4B,EACvC,qBACmC;CACnC,MAAM,EAAE,UAAU,eAAe;CACjC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EACJ,kBACA,oBACA,YACA,qBACA,wBACE,wBAAwB;CAC5B,MAAM,iBAAiB,cACf,IAAI,IAAI,MAAM,KAAK,SAAS,KAAK,OAAO,EAAE,CAAC,GACjD,CAAC,KAAK,CACR;CAIA,MAAM,oBAAoB,cAClB,iBAAiB,QAAQ,WAAW,gBAAgB,MAAM,CAAC,GACjE,CAAC,gBAAgB,CACnB;CAEA,MAAM,aAAa,aAChB,GAAW,WACV,oBAAC,8BAAD;EACE,SAAS,eAAe,IAAI,gBAAgB,MAAM,CAAW;EACrD;EACQ;CACjB,CAAA,GAEH,CAAC,gBAAgB,cAAc,CACjC;CAEA,MAAM,mBAAmB,cAErB,SAAS,iCAAiC;EACxC,OAAO,oBAAC,wBAAD,EAAA,UAAyB,EAAE,iBAAiB,EAA0B,CAAA;CAC/E,GACF,CAAC,CAAC,CACJ;CAEA,MAAM,SAAS,cAEX,SAAS,2BAA2B;EAClC,OAAO,oBAAC,mCAAD,EAAmC,cAAc,oBAAsB,CAAA;CAChF,GACF,CAAC,mBAAmB,CACtB;CAEA,OACE,qBAAC,OAAO,MAAR;EAAa,WAAU;YAAvB,CACG,cACC,oBAAC,0BAAD;GACE,gBAAgB;GAChB,UAAU;EACX,CAAA,GAEH,oBAAC,iBAAD;GACE,WAAU;GACV,gBAAgB;GAChB,MAAM;GACY;GACV;GACR,aAAa;GACb,UAAU,aAAa,oBAAoB,SAAS,KAAA;EACrD,CAAA,CACU;;AAEjB"}
+{"version":3,"file":"ChannelMembersBrowseView.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx"],"sourcesContent":["import { convertTimestampToDate } from 'stream-chat';\nimport type { ChannelMemberResponse } from 'stream-chat';\nimport React, { useCallback, useMemo } from 'react';\n\nimport {\n  useChatContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../../../context';\nimport { Avatar as DefaultAvatar } from '../../../../components/Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../../../../components/Avatar/utils';\nimport { ListItemLayout } from '../../../../components/ListItemLayout';\nimport { VirtualizedList } from '../../VirtualizedList';\nimport { Prompt } from '../../../../components/Dialog';\nimport { getMemberDisplayName, getMemberUserId } from './ChannelMembersView.utils';\nimport { ChannelDetailEmptyList } from '../../ChannelDetailEmptyList';\nimport { ChannelDetailListLoadingIndicator } from '../../ChannelDetailListLoadingIndicator';\nimport { ChannelDetailSearchInput } from '../../ChannelDetailSearchInput';\nimport { useChannelMembersSearch } from './useChannelMembersSearch';\n\nconst getMemberRoleTranslation = (\n  member: ChannelMemberResponse,\n  t: ReturnType<typeof useTranslationContext>['t'],\n) => {\n  if ([member.user?.role, member.channel_role].includes('admin'))\n    return t('channelDetail.channelMembersBrowse.admin.label', 'Admin');\n  if (member.channel_role === 'channel_moderator' || member.channel_role === 'moderator')\n    return t('channelDetail.channelMembersBrowse.moderator.label', 'Moderator');\n  if (member.role === 'owner')\n    return t('channelDetail.channelMembersBrowse.owner.label', 'Owner');\n\n  return undefined;\n};\n\nconst getPresenceStatusText = (\n  user: ChannelMemberResponse['user'],\n  t: ReturnType<typeof useTranslationContext>['t'],\n) => {\n  if (user?.online) return t('common.online.label', 'Online');\n\n  if (user?.last_active != null) {\n    return t(\n      'channelDetail.channelMemberDetail.lastSeen.label',\n      'Last seen {{ timestamp }}',\n      {\n        timestamp: t('timestamp.ChannelMembersLastActive', {\n          timestamp: convertTimestampToDate(user.last_active),\n        }),\n      },\n    );\n  }\n\n  return t('common.offline.label', 'Offline');\n};\n\nconst ChannelMembersBrowseViewItem = ({\n  isMuted,\n  member,\n  onMemberSelect,\n}: {\n  isMuted: boolean;\n  member: ChannelMemberResponse;\n  onMemberSelect?: (member: ChannelMemberResponse) => void;\n}) => {\n  const { t } = useTranslationContext();\n  const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =\n    useComponentContext();\n  const user = member.user;\n  const displayName = getMemberDisplayName(member);\n  const roleTranslation = getMemberRoleTranslation(member, t);\n\n  const LeadingSlot = useMemo(\n    () =>\n      function MemberAvatar() {\n        const displayInfo = extractDisplayInfo({ user: user ?? undefined });\n\n        return <Avatar {...displayInfo} isOnline={user?.online} size='md' />;\n      },\n    [Avatar, extractDisplayInfo, user],\n  );\n\n  const TrailingSlot = useMemo(\n    () =>\n      function MemberTrailingSlot() {\n        const { IconMute } = useComponentContextIcons();\n        return (\n          <div className='str-chat__channel-detail__channel-members-view__list-item__trailing-slot'>\n            {roleTranslation ? (\n              <span className='str-chat__channel-detail__channel-members-view__role-label'>\n                {roleTranslation}\n              </span>\n            ) : null}\n            {isMuted ? (\n              <IconMute className='str-chat__channel-detail__channel-members-view__list-item__indicator-icon str-chat__channel-detail__channel-members-view__list-item__indicator-icon--mute' />\n            ) : null}\n          </div>\n        );\n      },\n    [isMuted, roleTranslation],\n  );\n\n  const rootProps = useMemo(\n    () => ({\n      'aria-label': t(\n        'channelDetail.channelMembersBrowse.viewMemberDetails.ariaLabel',\n        'View member details for {{ member }}',\n        {\n          member: displayName,\n        },\n      ),\n      className: 'str-chat__channel-detail__channel-members-view__list-item',\n      onClick: () => onMemberSelect?.(member),\n    }),\n    [displayName, member, onMemberSelect, t],\n  );\n\n  return (\n    <ListItemLayout\n      LeadingSlot={LeadingSlot}\n      RootElement='button'\n      rootProps={rootProps}\n      subtitle={getPresenceStatusText(user, t)}\n      title={displayName}\n      TrailingSlot={TrailingSlot}\n    />\n  );\n};\n\nconst computeMemberItemKey = (_: number, member: ChannelMemberResponse) =>\n  getMemberUserId(member) as string;\n\nexport type ChannelMembersBrowseViewProps = {\n  onMemberSelect?: (member: ChannelMemberResponse) => void;\n};\n\nexport const ChannelMembersBrowseView = ({\n  onMemberSelect,\n}: ChannelMembersBrowseViewProps) => {\n  const { mutes } = useChatContext();\n  const { t } = useTranslationContext();\n  const {\n    displayedMembers,\n    handleSearchChange,\n    hasMembers,\n    membersSearchSource,\n    searchInputResetKey,\n  } = useChannelMembersSearch();\n  const mutedUserIdSet = useMemo(\n    () => new Set(mutes.map((mute) => mute.target?.id)),\n    [mutes],\n  );\n\n  // Only members with a resolvable user id are rendered; pre-filtering keeps the\n  // virtualized item renderer total in sync with what it can actually display.\n  const renderableMembers = useMemo(\n    () => displayedMembers.filter((member) => getMemberUserId(member)),\n    [displayedMembers],\n  );\n\n  const renderItem = useCallback(\n    (_: number, member: ChannelMemberResponse) => (\n      <ChannelMembersBrowseViewItem\n        isMuted={mutedUserIdSet.has(getMemberUserId(member) as string)}\n        member={member}\n        onMemberSelect={onMemberSelect}\n      />\n    ),\n    [mutedUserIdSet, onMemberSelect],\n  );\n\n  const EmptyPlaceholder = useMemo(\n    () =>\n      function ChannelMembersEmptyPlaceholder() {\n        return (\n          <ChannelDetailEmptyList>\n            {t(\n              'channelDetail.channelMembersBrowse.noMemberFound.text',\n              'No member found',\n            )}\n          </ChannelDetailEmptyList>\n        );\n      },\n    [t],\n  );\n\n  const Footer = useMemo(\n    () =>\n      function ChannelMembersListFooter() {\n        return <ChannelDetailListLoadingIndicator searchSource={membersSearchSource} />;\n      },\n    [membersSearchSource],\n  );\n\n  return (\n    <Prompt.Body className='str-chat__channel-members-view__body'>\n      {hasMembers && (\n        <ChannelDetailSearchInput\n          onSearchChange={handleSearchChange}\n          resetKey={searchInputResetKey}\n        />\n      )}\n      <VirtualizedList\n        className='str-chat__channel-detail__channel-members-view__list'\n        computeItemKey={computeMemberItemKey}\n        data={renderableMembers}\n        EmptyPlaceholder={EmptyPlaceholder}\n        Footer={Footer}\n        itemContent={renderItem}\n        loadNext={hasMembers ? membersSearchSource.search : undefined}\n      />\n    </Prompt.Body>\n  );\n};\n"],"mappings":"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"}

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.mjs

@@ -1,9 +1,9 @@
 import { useComponentContext } from "../../../../context/ComponentContext.mjs";
-import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
 import { useDialogIsOpen, useDialogOnNearestManager } from "../../../../components/Dialog/hooks/useDialog.mjs";
 import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
 import { Button } from "../../../../components/Button/Button.mjs";
 import { ContextMenu, ContextMenuButton } from "../../../../components/Dialog/components/ContextMenu.mjs";
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
 import { useChannelDetailContext } from "../../ChannelDetailContext.mjs";
 import { canUpdateChannelMembers } from "./ChannelMembersView.utils.mjs";
 import { useMemo, useState } from "react";
@@ -32,26 +32,26 @@ var AddMembersHeaderAction = ({ modeController }) => {
 	if (modeController.mode !== "browse") return null;
 	return /* @__PURE__ */ jsx(Button, {
 		appearance: "outline",
-		"aria-label": t("Add channel members"),
+		"aria-label": t("channelDetail.channelMembersHeader.addChannelMembers.ariaLabel", "Add channel members"),
 		className: "str-chat__channel-detail__channel-members-view__add-button",
 		onClick: () => modeController.setMode("add"),
 		size: "md",
 		variant: "secondary",
-		children: t("Add")
+		children: t("channelDetail.channelMembersHeader.add.text", "Add")
 	});
 };
 var AddMembersMenuAction = ({ closeMenu, modeController }) => {
-	const { t } = useTranslationContext();
 	const { IconUserAdd } = useComponentContextIcons();
+	const { t } = useTranslationContext();
 	if (modeController.mode !== "browse") return null;
 	return /* @__PURE__ */ jsx(ContextMenuButton, {
-		"aria-label": t("Add channel members"),
+		"aria-label": t("channelDetail.channelMembersHeader.addChannelMembers.ariaLabel", "Add channel members"),
 		Icon: IconUserAdd,
 		onClick: () => {
 			modeController.setMode("add");
 			closeMenu?.();
 		},
-		children: t("Add")
+		children: t("channelDetail.channelMembersHeader.add.text", "Add")
 	});
 };
 var DefaultChannelMembersHeaderActions = {
@@ -67,13 +67,13 @@ var DefaultHeaderActionsMenuTrigger = ({ referenceRef, ...props }) => {
 	const { t } = useTranslationContext();
 	return /* @__PURE__ */ jsx(Button, {
 		appearance: "outline",
-		"aria-label": t("Open members actions"),
+		"aria-label": t("channelDetail.channelMembersHeader.openMembersActions.ariaLabel", "Open members actions"),
 		className: "str-chat__channel-detail__channel-members-view__actions-button",
 		ref: referenceRef,
 		size: "md",
 		variant: "secondary",
 		...props,
-		children: t("Actions")
+		children: t("channelDetail.channelMembersHeader.actions.text", "Actions")
 	});
 };
 var getHeaderActionsDialogId = (channelId) => `channel-members-header-actions-${channelId ?? "unknown"}`;

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelMembersHeaderActions.defaults.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.tsx"],"sourcesContent":["import type { Channel } from 'stream-chat';\nimport React, { useMemo, useState } from 'react';\n\nimport {\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../../../context';\nimport { Button } from '../../../../components/Button';\nimport {\n  ContextMenu,\n  ContextMenuButton,\n  useDialogIsOpen,\n  useDialogOnNearestManager,\n} from '../../../../components/Dialog';\nimport { useChannelDetailContext } from '../../ChannelDetailContext';\nimport { canUpdateChannelMembers } from './ChannelMembersView.utils';\nimport type {\n  ChannelMembersHeaderActionsProps,\n  ChannelMembersModeController,\n} from './ChannelMembersView';\n\nexport type ChannelMembersHeaderActionType = 'addMembers' | (string & {});\n\nexport type ChannelMembersHeaderActionComponentProps = {\n  closeMenu?: () => void;\n  modeController: ChannelMembersModeController;\n};\n\n/** Where a header action renders: inline (`quick`) or inside the actions menu. */\nexport type ChannelMembersHeaderActionPlacement = 'quick' | 'menu';\n\nexport type ChannelMembersHeaderActionItem = {\n  component: React.ComponentType<ChannelMembersHeaderActionComponentProps>;\n  placement: ChannelMembersHeaderActionPlacement;\n  type: ChannelMembersHeaderActionType;\n  /**\n   * Optional visibility gate for app-defined actions. Apps that add their own\n   * actions are responsible for their permission checks here (the predicate\n   * receives the `channel` so it can read `own_capabilities`). The SDK's own\n   * actions are gated internally and do not rely on this.\n   */\n  filter?: (ctx: { channel: Channel }) => boolean;\n};\n\n/**\n * First-pass filter applied by {@link DefaultHeaderActions}. The SDK's own\n * actions are gated internally by capability — `addMembers` requires\n * `update-channel-members`; any other action is shown by default. App-defined\n * actions may further narrow visibility via their own `filter` predicate (which\n * is what an app should use to gate, e.g., a custom member-removal action).\n */\nexport const useBaseChannelMembersHeaderActionSetFilter = (\n  channelMembersHeaderActionSet: ChannelMembersHeaderActionItem[],\n) => {\n  const { channel } = useChannelDetailContext();\n  const canManageChannelMembers = canUpdateChannelMembers(channel);\n\n  return useMemo(\n    () =>\n      channelMembersHeaderActionSet.filter((action) => {\n        const allowedByCapability =\n          action.type !== 'addMembers' || canManageChannelMembers;\n\n        return allowedByCapability && (action.filter?.({ channel }) ?? true);\n      }),\n    [canManageChannelMembers, channel, channelMembersHeaderActionSet],\n  );\n};\n\nconst AddMembersHeaderAction = ({\n  modeController,\n}: ChannelMembersHeaderActionComponentProps) => {\n  const { t } = useTranslationContext();\n\n  if (modeController.mode !== 'browse') return null;\n\n  return (\n    <Button\n      appearance='outline'\n      aria-label={t('Add channel members')}\n      className='str-chat__channel-detail__channel-members-view__add-button'\n      onClick={() => modeController.setMode('add')}\n      size='md'\n      variant='secondary'\n    >\n      {t('Add')}\n    </Button>\n  );\n};\n\nconst AddMembersMenuAction = ({\n  closeMenu,\n  modeController,\n}: ChannelMembersHeaderActionComponentProps) => {\n  const { t } = useTranslationContext();\n  const { IconUserAdd } = useComponentContextIcons();\n\n  if (modeController.mode !== 'browse') return null;\n\n  return (\n    <ContextMenuButton\n      aria-label={t('Add channel members')}\n      Icon={IconUserAdd}\n      onClick={() => {\n        modeController.setMode('add');\n        closeMenu?.();\n      }}\n    >\n      {t('Add')}\n    </ContextMenuButton>\n  );\n};\n\nexport const DefaultChannelMembersHeaderActions = {\n  AddMembers: AddMembersHeaderAction,\n  AddMembersMenu: AddMembersMenuAction,\n};\n\nexport const defaultChannelMembersHeaderActionSet: ChannelMembersHeaderActionItem[] = [\n  {\n    component: DefaultChannelMembersHeaderActions.AddMembers,\n    placement: 'quick',\n    type: 'addMembers',\n  },\n];\n\nexport type ChannelMembersHeaderActionsMenuTriggerProps = {\n  'aria-expanded': boolean;\n  onClick: () => void;\n  referenceRef?: React.Ref<HTMLButtonElement>;\n};\n\nexport const DefaultHeaderActionsMenuTrigger = ({\n  referenceRef,\n  ...props\n}: ChannelMembersHeaderActionsMenuTriggerProps) => {\n  const { t } = useTranslationContext();\n\n  return (\n    <Button\n      appearance='outline'\n      aria-label={t('Open members actions')}\n      className='str-chat__channel-detail__channel-members-view__actions-button'\n      ref={referenceRef}\n      size='md'\n      variant='secondary'\n      {...props}\n    >\n      {t('Actions')}\n    </Button>\n  );\n};\n\nconst getHeaderActionsDialogId = (channelId?: string) =>\n  `channel-members-header-actions-${channelId ?? 'unknown'}`;\n\nexport const DefaultHeaderActions = ({\n  headerActionSet,\n  HeaderActionsMenuTrigger = DefaultHeaderActionsMenuTrigger,\n  modeController,\n}: ChannelMembersHeaderActionsProps) => {\n  const { ContextMenu: ContextMenuComponent = ContextMenu } = useComponentContext();\n  const { channel } = useChannelDetailContext();\n  const actions = useBaseChannelMembersHeaderActionSetFilter(headerActionSet);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(\n    null,\n  );\n  const dialogId = getHeaderActionsDialogId(channel.id);\n  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });\n  const dialogManagerId = dialogManager?.id;\n  const dialogIsOpen = useDialogIsOpen(dialogId, dialogManagerId);\n\n  if (!actions.length) return null;\n\n  const quickActions = actions.filter((action) => action.placement === 'quick');\n  const menuActions = actions.filter((action) => action.placement === 'menu');\n\n  return (\n    <div className='str-chat__channel-detail__channel-members-view__header-actions'>\n      {quickActions.map(({ component: QuickComponent, type }) => (\n        <QuickComponent key={type} modeController={modeController} />\n      ))}\n\n      {menuActions.length > 0 && (\n        <>\n          <HeaderActionsMenuTrigger\n            aria-expanded={dialogIsOpen}\n            onClick={() => {\n              dialog.toggle();\n            }}\n            referenceRef={setReferenceElement}\n          />\n          <ContextMenuComponent\n            aria-label='Members actions'\n            className='str-chat__channel-detail__channel-members-view__header-actions-menu'\n            dialogManagerId={dialogManagerId}\n            id={dialog.id}\n            onClose={() => dialog.close()}\n            placement='bottom-start'\n            referenceElement={referenceElement}\n            tabIndex={-1}\n            trapFocus\n          >\n            {menuActions.map(({ component: MenuComponent, type }) => (\n              <MenuComponent\n                closeMenu={() => dialog.close()}\n                key={type}\n                modeController={modeController}\n              />\n            ))}\n          </ContextMenuComponent>\n        </>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ChannelMembersHeaderActions.defaults.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.tsx"],"sourcesContent":["import type { Channel } from 'stream-chat';\nimport React, { useMemo, useState } from 'react';\n\nimport {\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../../../context';\nimport { Button } from '../../../../components/Button';\nimport {\n  ContextMenu,\n  ContextMenuButton,\n  useDialogIsOpen,\n  useDialogOnNearestManager,\n} from '../../../../components/Dialog';\nimport { useChannelDetailContext } from '../../ChannelDetailContext';\nimport { canUpdateChannelMembers } from './ChannelMembersView.utils';\nimport type {\n  ChannelMembersHeaderActionsProps,\n  ChannelMembersModeController,\n} from './ChannelMembersView';\n\nexport type ChannelMembersHeaderActionType = 'addMembers' | (string & {});\n\nexport type ChannelMembersHeaderActionComponentProps = {\n  closeMenu?: () => void;\n  modeController: ChannelMembersModeController;\n};\n\n/** Where a header action renders: inline (`quick`) or inside the actions menu. */\nexport type ChannelMembersHeaderActionPlacement = 'quick' | 'menu';\n\nexport type ChannelMembersHeaderActionItem = {\n  component: React.ComponentType<ChannelMembersHeaderActionComponentProps>;\n  placement: ChannelMembersHeaderActionPlacement;\n  type: ChannelMembersHeaderActionType;\n  /**\n   * Optional visibility gate for app-defined actions. Apps that add their own\n   * actions are responsible for their permission checks here (the predicate\n   * receives the `channel` so it can read `own_capabilities`). The SDK's own\n   * actions are gated internally and do not rely on this.\n   */\n  filter?: (ctx: { channel: Channel }) => boolean;\n};\n\n/**\n * First-pass filter applied by {@link DefaultHeaderActions}. The SDK's own\n * actions are gated internally by capability — `addMembers` requires\n * `update-channel-members`; any other action is shown by default. App-defined\n * actions may further narrow visibility via their own `filter` predicate (which\n * is what an app should use to gate, e.g., a custom member-removal action).\n */\nexport const useBaseChannelMembersHeaderActionSetFilter = (\n  channelMembersHeaderActionSet: ChannelMembersHeaderActionItem[],\n) => {\n  const { channel } = useChannelDetailContext();\n  const canManageChannelMembers = canUpdateChannelMembers(channel);\n\n  return useMemo(\n    () =>\n      channelMembersHeaderActionSet.filter((action) => {\n        const allowedByCapability =\n          action.type !== 'addMembers' || canManageChannelMembers;\n\n        return allowedByCapability && (action.filter?.({ channel }) ?? true);\n      }),\n    [canManageChannelMembers, channel, channelMembersHeaderActionSet],\n  );\n};\n\nconst AddMembersHeaderAction = ({\n  modeController,\n}: ChannelMembersHeaderActionComponentProps) => {\n  const { t } = useTranslationContext();\n\n  if (modeController.mode !== 'browse') return null;\n\n  return (\n    <Button\n      appearance='outline'\n      aria-label={t(\n        'channelDetail.channelMembersHeader.addChannelMembers.ariaLabel',\n        'Add channel members',\n      )}\n      className='str-chat__channel-detail__channel-members-view__add-button'\n      onClick={() => modeController.setMode('add')}\n      size='md'\n      variant='secondary'\n    >\n      {t('channelDetail.channelMembersHeader.add.text', 'Add')}\n    </Button>\n  );\n};\n\nconst AddMembersMenuAction = ({\n  closeMenu,\n  modeController,\n}: ChannelMembersHeaderActionComponentProps) => {\n  const { IconUserAdd } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n\n  if (modeController.mode !== 'browse') return null;\n\n  return (\n    <ContextMenuButton\n      aria-label={t(\n        'channelDetail.channelMembersHeader.addChannelMembers.ariaLabel',\n        'Add channel members',\n      )}\n      Icon={IconUserAdd}\n      onClick={() => {\n        modeController.setMode('add');\n        closeMenu?.();\n      }}\n    >\n      {t('channelDetail.channelMembersHeader.add.text', 'Add')}\n    </ContextMenuButton>\n  );\n};\n\nexport const DefaultChannelMembersHeaderActions = {\n  AddMembers: AddMembersHeaderAction,\n  AddMembersMenu: AddMembersMenuAction,\n};\n\nexport const defaultChannelMembersHeaderActionSet: ChannelMembersHeaderActionItem[] = [\n  {\n    component: DefaultChannelMembersHeaderActions.AddMembers,\n    placement: 'quick',\n    type: 'addMembers',\n  },\n];\n\nexport type ChannelMembersHeaderActionsMenuTriggerProps = {\n  'aria-expanded': boolean;\n  onClick: () => void;\n  referenceRef?: React.Ref<HTMLButtonElement>;\n};\n\nexport const DefaultHeaderActionsMenuTrigger = ({\n  referenceRef,\n  ...props\n}: ChannelMembersHeaderActionsMenuTriggerProps) => {\n  const { t } = useTranslationContext();\n\n  return (\n    <Button\n      appearance='outline'\n      aria-label={t(\n        'channelDetail.channelMembersHeader.openMembersActions.ariaLabel',\n        'Open members actions',\n      )}\n      className='str-chat__channel-detail__channel-members-view__actions-button'\n      ref={referenceRef}\n      size='md'\n      variant='secondary'\n      {...props}\n    >\n      {t('channelDetail.channelMembersHeader.actions.text', 'Actions')}\n    </Button>\n  );\n};\n\nconst getHeaderActionsDialogId = (channelId?: string) =>\n  `channel-members-header-actions-${channelId ?? 'unknown'}`;\n\nexport const DefaultHeaderActions = ({\n  headerActionSet,\n  HeaderActionsMenuTrigger = DefaultHeaderActionsMenuTrigger,\n  modeController,\n}: ChannelMembersHeaderActionsProps) => {\n  const { ContextMenu: ContextMenuComponent = ContextMenu } = useComponentContext();\n  const { channel } = useChannelDetailContext();\n  const actions = useBaseChannelMembersHeaderActionSetFilter(headerActionSet);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(\n    null,\n  );\n  const dialogId = getHeaderActionsDialogId(channel.id);\n  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });\n  const dialogManagerId = dialogManager?.id;\n  const dialogIsOpen = useDialogIsOpen(dialogId, dialogManagerId);\n\n  if (!actions.length) return null;\n\n  const quickActions = actions.filter((action) => action.placement === 'quick');\n  const menuActions = actions.filter((action) => action.placement === 'menu');\n\n  return (\n    <div className='str-chat__channel-detail__channel-members-view__header-actions'>\n      {quickActions.map(({ component: QuickComponent, type }) => (\n        <QuickComponent key={type} modeController={modeController} />\n      ))}\n\n      {menuActions.length > 0 && (\n        <>\n          <HeaderActionsMenuTrigger\n            aria-expanded={dialogIsOpen}\n            onClick={() => {\n              dialog.toggle();\n            }}\n            referenceRef={setReferenceElement}\n          />\n          <ContextMenuComponent\n            aria-label='Members actions'\n            className='str-chat__channel-detail__channel-members-view__header-actions-menu'\n            dialogManagerId={dialogManagerId}\n            id={dialog.id}\n            onClose={() => dialog.close()}\n            placement='bottom-start'\n            referenceElement={referenceElement}\n            tabIndex={-1}\n            trapFocus\n          >\n            {menuActions.map(({ component: MenuComponent, type }) => (\n              <MenuComponent\n                closeMenu={() => dialog.close()}\n                key={type}\n                modeController={modeController}\n              />\n            ))}\n          </ContextMenuComponent>\n        </>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersView.mjs

@@ -1,5 +1,5 @@
-import { useModalContext } from "../../../../context/ModalContext.mjs";
 import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { useModalContext } from "../../../../context/ModalContext.mjs";
 import { SectionNavigatorHeader } from "../../SectionNavigator/SectionNavigatorHeader.mjs";
 import { useChannelDetailContext } from "../../ChannelDetailContext.mjs";
 import { DefaultHeaderActions, defaultChannelMembersHeaderActionSet } from "./ChannelMembersHeaderActions.defaults.mjs";
@@ -14,7 +14,7 @@ var RESERVED_MODES = ["browse", "memberDetail"];
 var isReservedMode = (mode) => RESERVED_MODES.includes(mode);
 var AddMembersModeTitle = () => {
 	const { t } = useTranslationContext();
-	return /* @__PURE__ */ jsx(Fragment$1, { children: t("Add members") });
+	return /* @__PURE__ */ jsx(Fragment$1, { children: t("channelDetail.channelMembersView.addMembers.label", "Add members") });
 };
 /** Built-in mode descriptors. Merged with (and overridable by) the `modeViews` prop. */
 var defaultChannelMembersModeViews = { add: {
@@ -75,9 +75,13 @@ var ChannelMembersView = ({ HeaderActions = DefaultHeaderActions, headerActionSe
 		className: "str-chat__channel-detail__channel-members-view",
 		children: [/* @__PURE__ */ jsx(SectionNavigatorHeader, {
 			close,
-			description: activeModeDescriptor ? void 0 : t("Browse channel members"),
+			description: activeModeDescriptor ? void 0 : t("channelDetail.channelMembersView.browseChannelMembers.description", "Browse channel members"),
 			goBack: activeModeDescriptor ? goBack : void 0,
-			title: ActiveModeTitle ? /* @__PURE__ */ jsx(ActiveModeTitle, {}) : t("{{ count }} members", { count: memberCount }),
+			title: ActiveModeTitle ? /* @__PURE__ */ jsx(ActiveModeTitle, {}) : t("channelDetail.channelMembersView.members.title", {
+				count: memberCount,
+				defaultValue_one: "{{ count }} member",
+				defaultValue_other: "{{ count }} members"
+			}),
 			TrailingContent: HeaderTrailingActions
 		}), ActiveModeBody ? /* @__PURE__ */ jsx(ActiveModeBody, { modeController }) : /* @__PURE__ */ jsx(ChannelMembersBrowseView, { onMemberSelect: (member) => {
 			setSelectedMember(member);

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersView.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelMembersView.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersView.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport type { ChannelMemberResponse } from 'stream-chat';\n\nimport { useModalContext, useTranslationContext } from '../../../../context';\nimport { useChannelDetailContext } from '../../ChannelDetailContext';\nimport { ChannelMemberDetail } from '../ChannelMemberDetailView';\nimport {\n  type ChannelMembersHeaderActionItem,\n  type ChannelMembersHeaderActionsMenuTriggerProps,\n  defaultChannelMembersHeaderActionSet,\n  DefaultHeaderActions,\n} from './ChannelMembersHeaderActions.defaults';\nimport { ChannelMembersAddView } from './ChannelMembersAddView';\nimport { ChannelMembersBrowseView } from './ChannelMembersBrowseView';\nimport { useChannelMemberCount } from './useChannelMemberCount';\nimport {\n  SectionNavigatorHeader,\n  type SectionNavigatorSectionContentProps,\n} from '../../SectionNavigator';\n\nexport type ChannelMembersHeaderActionsProps = {\n  modeController: ChannelMembersModeController;\n  HeaderActionsMenuTrigger?: React.ComponentType<ChannelMembersHeaderActionsMenuTriggerProps>;\n  headerActionSet: ChannelMembersHeaderActionItem[];\n};\n\n/**\n * Built-in modes are rendered by `ChannelMembersView` itself. Any other string\n * is treated as a custom mode and rendered from the injected `modeViews` registry.\n */\nexport type ChannelMembersViewMode = 'add' | 'browse' | 'memberDetail' | (string & {});\n\nexport type ChannelMembersModeController = {\n  mode: ChannelMembersViewMode;\n  setMode: (mode: ChannelMembersViewMode) => void;\n};\n\nexport type ChannelMembersModeViewProps = {\n  /**\n   * Navigation surface for the mode. Call `modeController.setMode('browse')` to\n   * return to the list, or any other mode key to transition between modes.\n   */\n  modeController: ChannelMembersModeController;\n};\n\nexport type ChannelMembersViewModeDescriptor = {\n  /** Body rendered below the section header for this mode. */\n  Body: React.ComponentType<ChannelMembersModeViewProps>;\n  /**\n   * Header title for this mode. A component (rather than a string) so it can pull\n   * whatever it needs from context/hooks — member count, translation, etc.\n   */\n  Title: React.ComponentType;\n};\n\n/** Registry of modes, keyed by the mode string passed to `setMode`. */\nexport type ChannelMembersViewModes = Record<string, ChannelMembersViewModeDescriptor>;\n\n// `browse` (the default list) and `memberDetail` (selection-driven, renders its\n// own header) are handled by ChannelMembersView directly; every other mode —\n// built-in `add` or app-provided — is resolved from the mode-view registry.\nconst RESERVED_MODES: ChannelMembersViewMode[] = ['browse', 'memberDetail'];\n\nconst isReservedMode = (mode: ChannelMembersViewMode) => RESERVED_MODES.includes(mode);\n\nconst AddMembersModeTitle = () => {\n  const { t } = useTranslationContext();\n  return <>{t('Add members')}</>;\n};\n\n/** Built-in mode descriptors. Merged with (and overridable by) the `modeViews` prop. */\nexport const defaultChannelMembersModeViews: ChannelMembersViewModes = {\n  add: {\n    Body: ChannelMembersAddView,\n    Title: AddMembersModeTitle,\n  },\n};\n\nexport type ChannelMembersViewProps = SectionNavigatorSectionContentProps & {\n  HeaderActions?: React.ComponentType<ChannelMembersHeaderActionsProps>;\n  HeaderActionsMenuTrigger?: React.ComponentType<ChannelMembersHeaderActionsMenuTriggerProps>;\n  headerActionSet?: ChannelMembersHeaderActionItem[];\n  /** App-provided modes (e.g. bulk removal) rendered alongside the built-in ones. */\n  modeViews?: ChannelMembersViewModes;\n};\n\nexport const ChannelMembersView = ({\n  HeaderActions = DefaultHeaderActions,\n  headerActionSet = defaultChannelMembersHeaderActionSet,\n  HeaderActionsMenuTrigger,\n  layout,\n  modeViews: customModeViews,\n}: ChannelMembersViewProps) => {\n  const { t } = useTranslationContext();\n  const { channel } = useChannelDetailContext();\n  const { close } = useModalContext();\n  const [mode, setMode] = useState<ChannelMembersViewMode>('browse');\n  const [selectedMember, setSelectedMember] = useState<ChannelMemberResponse>();\n  const memberCount = useChannelMemberCount(channel);\n\n  const modeViews = useMemo(\n    () => ({ ...defaultChannelMembersModeViews, ...customModeViews }),\n    [customModeViews],\n  );\n\n  const activeModeDescriptor = isReservedMode(mode) ? undefined : modeViews[mode];\n  const isViewingMemberDetail = mode === 'memberDetail';\n\n  const setViewMode = useCallback((nextMode: ChannelMembersViewMode) => {\n    setMode(nextMode);\n    if (nextMode !== 'memberDetail') {\n      setSelectedMember(undefined);\n    }\n  }, []);\n\n  // Fall back to the browse list if an unknown mode becomes active (e.g. the app\n  // stops providing the mode's descriptor while it is selected).\n  useEffect(() => {\n    if (!isReservedMode(mode) && !modeViews[mode]) {\n      setViewMode('browse');\n    }\n  }, [mode, modeViews, setViewMode]);\n\n  const goBack = useCallback(() => setViewMode('browse'), [setViewMode]);\n\n  const modeController = useMemo<ChannelMembersModeController>(\n    () => ({\n      mode,\n      setMode: setViewMode,\n    }),\n    [mode, setViewMode],\n  );\n\n  const HeaderTrailingActions = useMemo(\n    () =>\n      function HeaderTrailingActions() {\n        if (mode !== 'browse') return null;\n        return (\n          <HeaderActions\n            headerActionSet={headerActionSet}\n            HeaderActionsMenuTrigger={HeaderActionsMenuTrigger}\n            modeController={modeController}\n          />\n        );\n      },\n    [HeaderActions, HeaderActionsMenuTrigger, modeController, headerActionSet, mode],\n  );\n\n  if (isViewingMemberDetail && selectedMember) {\n    return (\n      <ChannelMemberDetail layout={layout} member={selectedMember} onBack={goBack} />\n    );\n  }\n\n  const ActiveModeTitle = activeModeDescriptor?.Title;\n  const ActiveModeBody = activeModeDescriptor?.Body;\n\n  return (\n    <div className='str-chat__channel-detail__channel-members-view'>\n      <SectionNavigatorHeader\n        close={close}\n        description={activeModeDescriptor ? undefined : t('Browse channel members')}\n        goBack={activeModeDescriptor ? goBack : undefined}\n        title={\n          ActiveModeTitle ? (\n            <ActiveModeTitle />\n          ) : (\n            t('{{ count }} members', { count: memberCount })\n          )\n        }\n        TrailingContent={HeaderTrailingActions}\n      />\n      {ActiveModeBody ? (\n        <ActiveModeBody modeController={modeController} />\n      ) : (\n        <ChannelMembersBrowseView\n          onMemberSelect={(member) => {\n            setSelectedMember(member);\n            setViewMode('memberDetail');\n          }}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AA6DA,IAAM,iBAA2C,CAAC,UAAU,cAAc;AAE1E,IAAM,kBAAkB,SAAiC,eAAe,SAAS,IAAI;AAErF,IAAM,4BAA4B;CAChC,MAAM,EAAE,MAAM,sBAAsB;CACpC,OAAO,oBAAA,YAAA,EAAA,UAAG,EAAE,aAAa,EAAI,CAAA;AAC/B;;AAGA,IAAa,iCAA0D,EACrE,KAAK;CACH,MAAM;CACN,OAAO;AACT,EACF;AAUA,IAAa,sBAAsB,EACjC,gBAAgB,sBAChB,kBAAkB,sCAClB,0BACA,QACA,WAAW,sBACkB;CAC7B,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,YAAY,wBAAwB;CAC5C,MAAM,EAAE,UAAU,gBAAgB;CAClC,MAAM,CAAC,MAAM,WAAW,SAAiC,QAAQ;CACjE,MAAM,CAAC,gBAAgB,qBAAqB,SAAgC;CAC5E,MAAM,cAAc,sBAAsB,OAAO;CAEjD,MAAM,YAAY,eACT;EAAE,GAAG;EAAgC,GAAG;CAAgB,IAC/D,CAAC,eAAe,CAClB;CAEA,MAAM,uBAAuB,eAAe,IAAI,IAAI,KAAA,IAAY,UAAU;CAC1E,MAAM,wBAAwB,SAAS;CAEvC,MAAM,cAAc,aAAa,aAAqC;EACpE,QAAQ,QAAQ;EAChB,IAAI,aAAa,gBACf,kBAAkB,KAAA,CAAS;CAE/B,GAAG,CAAC,CAAC;CAIL,gBAAgB;EACd,IAAI,CAAC,eAAe,IAAI,KAAK,CAAC,UAAU,OACtC,YAAY,QAAQ;CAExB,GAAG;EAAC;EAAM;EAAW;CAAW,CAAC;CAEjC,MAAM,SAAS,kBAAkB,YAAY,QAAQ,GAAG,CAAC,WAAW,CAAC;CAErE,MAAM,iBAAiB,eACd;EACL;EACA,SAAS;CACX,IACA,CAAC,MAAM,WAAW,CACpB;CAEA,MAAM,wBAAwB,cAE1B,SAAS,wBAAwB;EAC/B,IAAI,SAAS,UAAU,OAAO;EAC9B,OACE,oBAAC,eAAD;GACmB;GACS;GACV;EACjB,CAAA;CAEL,GACF;EAAC;EAAe;EAA0B;EAAgB;EAAiB;CAAI,CACjF;CAEA,IAAI,yBAAyB,gBAC3B,OACE,oBAAC,qBAAD;EAA6B;EAAQ,QAAQ;EAAgB,QAAQ;CAAS,CAAA;CAIlF,MAAM,kBAAkB,sBAAsB;CAC9C,MAAM,iBAAiB,sBAAsB;CAE7C,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,wBAAD;GACS;GACP,aAAa,uBAAuB,KAAA,IAAY,EAAE,wBAAwB;GAC1E,QAAQ,uBAAuB,SAAS,KAAA;GACxC,OACE,kBACE,oBAAC,iBAAD,CAAkB,CAAA,IAElB,EAAE,uBAAuB,EAAE,OAAO,YAAY,CAAC;GAGnD,iBAAiB;EAClB,CAAA,GACA,iBACC,oBAAC,gBAAD,EAAgC,eAAiB,CAAA,IAEjD,oBAAC,0BAAD,EACE,iBAAiB,WAAW;GAC1B,kBAAkB,MAAM;GACxB,YAAY,cAAc;EAC5B,EACD,CAAA,CAEA;;AAET"}
+{"version":3,"file":"ChannelMembersView.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersView.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport type { ChannelMemberResponse } from 'stream-chat';\n\nimport { useModalContext, useTranslationContext } from '../../../../context';\nimport { useChannelDetailContext } from '../../ChannelDetailContext';\nimport { ChannelMemberDetail } from '../ChannelMemberDetailView';\nimport {\n  type ChannelMembersHeaderActionItem,\n  type ChannelMembersHeaderActionsMenuTriggerProps,\n  defaultChannelMembersHeaderActionSet,\n  DefaultHeaderActions,\n} from './ChannelMembersHeaderActions.defaults';\nimport { ChannelMembersAddView } from './ChannelMembersAddView';\nimport { ChannelMembersBrowseView } from './ChannelMembersBrowseView';\nimport { useChannelMemberCount } from './useChannelMemberCount';\nimport {\n  SectionNavigatorHeader,\n  type SectionNavigatorSectionContentProps,\n} from '../../SectionNavigator';\n\nexport type ChannelMembersHeaderActionsProps = {\n  modeController: ChannelMembersModeController;\n  HeaderActionsMenuTrigger?: React.ComponentType<ChannelMembersHeaderActionsMenuTriggerProps>;\n  headerActionSet: ChannelMembersHeaderActionItem[];\n};\n\n/**\n * Built-in modes are rendered by `ChannelMembersView` itself. Any other string\n * is treated as a custom mode and rendered from the injected `modeViews` registry.\n */\nexport type ChannelMembersViewMode = 'add' | 'browse' | 'memberDetail' | (string & {});\n\nexport type ChannelMembersModeController = {\n  mode: ChannelMembersViewMode;\n  setMode: (mode: ChannelMembersViewMode) => void;\n};\n\nexport type ChannelMembersModeViewProps = {\n  /**\n   * Navigation surface for the mode. Call `modeController.setMode('browse')` to\n   * return to the list, or any other mode key to transition between modes.\n   */\n  modeController: ChannelMembersModeController;\n};\n\nexport type ChannelMembersViewModeDescriptor = {\n  /** Body rendered below the section header for this mode. */\n  Body: React.ComponentType<ChannelMembersModeViewProps>;\n  /**\n   * Header title for this mode. A component (rather than a string) so it can pull\n   * whatever it needs from context/hooks — member count, translation, etc.\n   */\n  Title: React.ComponentType;\n};\n\n/** Registry of modes, keyed by the mode string passed to `setMode`. */\nexport type ChannelMembersViewModes = Record<string, ChannelMembersViewModeDescriptor>;\n\n// `browse` (the default list) and `memberDetail` (selection-driven, renders its\n// own header) are handled by ChannelMembersView directly; every other mode —\n// built-in `add` or app-provided — is resolved from the mode-view registry.\nconst RESERVED_MODES: ChannelMembersViewMode[] = ['browse', 'memberDetail'];\n\nconst isReservedMode = (mode: ChannelMembersViewMode) => RESERVED_MODES.includes(mode);\n\nconst AddMembersModeTitle = () => {\n  const { t } = useTranslationContext();\n  return <>{t('channelDetail.channelMembersView.addMembers.label', 'Add members')}</>;\n};\n\n/** Built-in mode descriptors. Merged with (and overridable by) the `modeViews` prop. */\nexport const defaultChannelMembersModeViews: ChannelMembersViewModes = {\n  add: {\n    Body: ChannelMembersAddView,\n    Title: AddMembersModeTitle,\n  },\n};\n\nexport type ChannelMembersViewProps = SectionNavigatorSectionContentProps & {\n  HeaderActions?: React.ComponentType<ChannelMembersHeaderActionsProps>;\n  HeaderActionsMenuTrigger?: React.ComponentType<ChannelMembersHeaderActionsMenuTriggerProps>;\n  headerActionSet?: ChannelMembersHeaderActionItem[];\n  /** App-provided modes (e.g. bulk removal) rendered alongside the built-in ones. */\n  modeViews?: ChannelMembersViewModes;\n};\n\nexport const ChannelMembersView = ({\n  HeaderActions = DefaultHeaderActions,\n  headerActionSet = defaultChannelMembersHeaderActionSet,\n  HeaderActionsMenuTrigger,\n  layout,\n  modeViews: customModeViews,\n}: ChannelMembersViewProps) => {\n  const { t } = useTranslationContext();\n  const { channel } = useChannelDetailContext();\n  const { close } = useModalContext();\n  const [mode, setMode] = useState<ChannelMembersViewMode>('browse');\n  const [selectedMember, setSelectedMember] = useState<ChannelMemberResponse>();\n  const memberCount = useChannelMemberCount(channel);\n\n  const modeViews = useMemo(\n    () => ({ ...defaultChannelMembersModeViews, ...customModeViews }),\n    [customModeViews],\n  );\n\n  const activeModeDescriptor = isReservedMode(mode) ? undefined : modeViews[mode];\n  const isViewingMemberDetail = mode === 'memberDetail';\n\n  const setViewMode = useCallback((nextMode: ChannelMembersViewMode) => {\n    setMode(nextMode);\n    if (nextMode !== 'memberDetail') {\n      setSelectedMember(undefined);\n    }\n  }, []);\n\n  // Fall back to the browse list if an unknown mode becomes active (e.g. the app\n  // stops providing the mode's descriptor while it is selected).\n  useEffect(() => {\n    if (!isReservedMode(mode) && !modeViews[mode]) {\n      setViewMode('browse');\n    }\n  }, [mode, modeViews, setViewMode]);\n\n  const goBack = useCallback(() => setViewMode('browse'), [setViewMode]);\n\n  const modeController = useMemo<ChannelMembersModeController>(\n    () => ({\n      mode,\n      setMode: setViewMode,\n    }),\n    [mode, setViewMode],\n  );\n\n  const HeaderTrailingActions = useMemo(\n    () =>\n      function HeaderTrailingActions() {\n        if (mode !== 'browse') return null;\n        return (\n          <HeaderActions\n            headerActionSet={headerActionSet}\n            HeaderActionsMenuTrigger={HeaderActionsMenuTrigger}\n            modeController={modeController}\n          />\n        );\n      },\n    [HeaderActions, HeaderActionsMenuTrigger, modeController, headerActionSet, mode],\n  );\n\n  if (isViewingMemberDetail && selectedMember) {\n    return (\n      <ChannelMemberDetail layout={layout} member={selectedMember} onBack={goBack} />\n    );\n  }\n\n  const ActiveModeTitle = activeModeDescriptor?.Title;\n  const ActiveModeBody = activeModeDescriptor?.Body;\n\n  return (\n    <div className='str-chat__channel-detail__channel-members-view'>\n      <SectionNavigatorHeader\n        close={close}\n        description={\n          activeModeDescriptor\n            ? undefined\n            : t(\n                'channelDetail.channelMembersView.browseChannelMembers.description',\n                'Browse channel members',\n              )\n        }\n        goBack={activeModeDescriptor ? goBack : undefined}\n        title={\n          ActiveModeTitle ? (\n            <ActiveModeTitle />\n          ) : (\n            t('channelDetail.channelMembersView.members.title', {\n              count: memberCount,\n              defaultValue_one: '{{ count }} member',\n              defaultValue_other: '{{ count }} members',\n            })\n          )\n        }\n        TrailingContent={HeaderTrailingActions}\n      />\n      {ActiveModeBody ? (\n        <ActiveModeBody modeController={modeController} />\n      ) : (\n        <ChannelMembersBrowseView\n          onMemberSelect={(member) => {\n            setSelectedMember(member);\n            setViewMode('memberDetail');\n          }}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AA6DA,IAAM,iBAA2C,CAAC,UAAU,cAAc;AAE1E,IAAM,kBAAkB,SAAiC,eAAe,SAAS,IAAI;AAErF,IAAM,4BAA4B;CAChC,MAAM,EAAE,MAAM,sBAAsB;CACpC,OAAO,oBAAA,YAAA,EAAA,UAAG,EAAE,qDAAqD,aAAa,EAAI,CAAA;AACpF;;AAGA,IAAa,iCAA0D,EACrE,KAAK;CACH,MAAM;CACN,OAAO;AACT,EACF;AAUA,IAAa,sBAAsB,EACjC,gBAAgB,sBAChB,kBAAkB,sCAClB,0BACA,QACA,WAAW,sBACkB;CAC7B,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,YAAY,wBAAwB;CAC5C,MAAM,EAAE,UAAU,gBAAgB;CAClC,MAAM,CAAC,MAAM,WAAW,SAAiC,QAAQ;CACjE,MAAM,CAAC,gBAAgB,qBAAqB,SAAgC;CAC5E,MAAM,cAAc,sBAAsB,OAAO;CAEjD,MAAM,YAAY,eACT;EAAE,GAAG;EAAgC,GAAG;CAAgB,IAC/D,CAAC,eAAe,CAClB;CAEA,MAAM,uBAAuB,eAAe,IAAI,IAAI,KAAA,IAAY,UAAU;CAC1E,MAAM,wBAAwB,SAAS;CAEvC,MAAM,cAAc,aAAa,aAAqC;EACpE,QAAQ,QAAQ;EAChB,IAAI,aAAa,gBACf,kBAAkB,KAAA,CAAS;CAE/B,GAAG,CAAC,CAAC;CAIL,gBAAgB;EACd,IAAI,CAAC,eAAe,IAAI,KAAK,CAAC,UAAU,OACtC,YAAY,QAAQ;CAExB,GAAG;EAAC;EAAM;EAAW;CAAW,CAAC;CAEjC,MAAM,SAAS,kBAAkB,YAAY,QAAQ,GAAG,CAAC,WAAW,CAAC;CAErE,MAAM,iBAAiB,eACd;EACL;EACA,SAAS;CACX,IACA,CAAC,MAAM,WAAW,CACpB;CAEA,MAAM,wBAAwB,cAE1B,SAAS,wBAAwB;EAC/B,IAAI,SAAS,UAAU,OAAO;EAC9B,OACE,oBAAC,eAAD;GACmB;GACS;GACV;EACjB,CAAA;CAEL,GACF;EAAC;EAAe;EAA0B;EAAgB;EAAiB;CAAI,CACjF;CAEA,IAAI,yBAAyB,gBAC3B,OACE,oBAAC,qBAAD;EAA6B;EAAQ,QAAQ;EAAgB,QAAQ;CAAS,CAAA;CAIlF,MAAM,kBAAkB,sBAAsB;CAC9C,MAAM,iBAAiB,sBAAsB;CAE7C,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,wBAAD;GACS;GACP,aACE,uBACI,KAAA,IACA,EACE,qEACA,wBACF;GAEN,QAAQ,uBAAuB,SAAS,KAAA;GACxC,OACE,kBACE,oBAAC,iBAAD,CAAkB,CAAA,IAElB,EAAE,kDAAkD;IAClD,OAAO;IACP,kBAAkB;IAClB,oBAAoB;GACtB,CAAC;GAGL,iBAAiB;EAClB,CAAA,GACA,iBACC,oBAAC,gBAAD,EAAgC,eAAiB,CAAA,IAEjD,oBAAC,0BAAD,EACE,iBAAiB,WAAW;GAC1B,kBAAkB,MAAM;GACxB,YAAY,cAAc;EAC5B,EACD,CAAA,CAEA;;AAET"}

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersView.utils.mjs

@@ -2,7 +2,7 @@ import "stream-chat";
 //#region src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersView.utils.ts
 var getMemberDisplayName = (member) => getUserDisplayName(member.user) || member.user_id || "";
 var getMemberUserId = (member) => member.user?.id || member.user_id;
-var getUserDisplayName = (user) => user?.name || user?.username || user?.id || "";
+var getUserDisplayName = (user) => user?.name || (user?.custom)?.username || user?.id || "";
 var getChannelMemberUserIds = (channel) => Object.values(channel.state?.members ?? {}).map((member) => member.user?.id || member.user_id).filter((userId) => !!userId);
 var canUpdateChannelMembers = (channel) => channel.data?.own_capabilities?.includes("update-channel-members") ?? false;
 //#endregion

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersView.utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelMembersView.utils.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersView.utils.ts"],"sourcesContent":["import { type Channel, type ChannelMemberResponse, type UserResponse } from 'stream-chat';\n\nexport const CHANNEL_MEMBERS_QUERY_LIMIT = 100;\n\nexport const getMemberDisplayName = (member: ChannelMemberResponse) =>\n  getUserDisplayName(member.user) || member.user_id || '';\n\nexport const getMemberUserId = (member: ChannelMemberResponse) =>\n  member.user?.id || member.user_id;\n\nexport const getUserDisplayName = (user?: UserResponse) =>\n  user?.name || user?.username || user?.id || '';\n\nexport const getChannelMemberUserIds = (channel: Channel) =>\n  Object.values(channel.state?.members ?? {})\n    .map((member) => member.user?.id || member.user_id)\n    .filter((userId): userId is string => !!userId);\n\nexport const canUpdateChannelMembers = (channel: Channel) =>\n  channel.data?.own_capabilities?.includes('update-channel-members') ?? false;\n"],"mappings":";;AAIA,IAAa,wBAAwB,WACnC,mBAAmB,OAAO,IAAI,KAAK,OAAO,WAAW;AAEvD,IAAa,mBAAmB,WAC9B,OAAO,MAAM,MAAM,OAAO;AAE5B,IAAa,sBAAsB,SACjC,MAAM,QAAQ,MAAM,YAAY,MAAM,MAAM;AAE9C,IAAa,2BAA2B,YACtC,OAAO,OAAO,QAAQ,OAAO,WAAW,CAAC,CAAC,CAAC,CACxC,KAAK,WAAW,OAAO,MAAM,MAAM,OAAO,OAAO,CAAC,CAClD,QAAQ,WAA6B,CAAC,CAAC,MAAM;AAElD,IAAa,2BAA2B,YACtC,QAAQ,MAAM,kBAAkB,SAAS,wBAAwB,KAAK"}
+{"version":3,"file":"ChannelMembersView.utils.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersView.utils.ts"],"sourcesContent":["import { type Channel, type ChannelMemberResponse, type UserResponse } from 'stream-chat';\n\nexport const CHANNEL_MEMBERS_QUERY_LIMIT = 100;\n\nexport const getMemberDisplayName = (member: ChannelMemberResponse) =>\n  getUserDisplayName(member.user) || member.user_id || '';\n\nexport const getMemberUserId = (member: ChannelMemberResponse) =>\n  member.user?.id || member.user_id;\n\nexport const getUserDisplayName = (user?: UserResponse) =>\n  user?.name ||\n  (user?.custom as { username?: string } | undefined)?.username ||\n  user?.id ||\n  '';\n\nexport const getChannelMemberUserIds = (channel: Channel) =>\n  Object.values(channel.state?.members ?? {})\n    .map((member) => member.user?.id || member.user_id)\n    .filter((userId): userId is string => !!userId);\n\nexport const canUpdateChannelMembers = (channel: Channel) =>\n  channel.data?.own_capabilities?.includes('update-channel-members') ?? false;\n"],"mappings":";;AAIA,IAAa,wBAAwB,WACnC,mBAAmB,OAAO,IAAI,KAAK,OAAO,WAAW;AAEvD,IAAa,mBAAmB,WAC9B,OAAO,MAAM,MAAM,OAAO;AAE5B,IAAa,sBAAsB,SACjC,MAAM,SACL,MAAM,OAAA,EAA8C,YACrD,MAAM,MACN;AAEF,IAAa,2BAA2B,YACtC,OAAO,OAAO,QAAQ,OAAO,WAAW,CAAC,CAAC,CAAC,CACxC,KAAK,WAAW,OAAO,MAAM,MAAM,OAAO,OAAO,CAAC,CAClD,QAAQ,WAA6B,CAAC,CAAC,MAAM;AAElD,IAAa,2BAA2B,YACtC,QAAQ,MAAM,kBAAkB,SAAS,wBAAwB,KAAK"}

package/dist/es/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.mjs

@@ -1,5 +1,5 @@
-import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx
 var PinnedMessagesEmptyList = () => {
@@ -11,10 +11,10 @@ var PinnedMessagesEmptyList = () => {
 			className: "str-chat__channel-detail__pinned-messages-view__empty-state__content",
 			children: [/* @__PURE__ */ jsx("p", {
 				className: "str-chat__channel-detail__pinned-messages-view__empty-state__title",
-				children: t("No pinned messages")
+				children: t("channelDetail.pinnedMessagesEmpty.noPinnedMessages.text", "No pinned messages")
 			}), /* @__PURE__ */ jsx("p", {
 				className: "str-chat__channel-detail__pinned-messages-view__empty-state__description",
-				children: t("Pin a message to see it here")
+				children: t("channelDetail.pinnedMessagesEmpty.pinMessageSee.text", "Pin a message to see it here")
 			})]
 		})]
 	});

package/dist/es/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PinnedMessagesEmptyList.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx"],"sourcesContent":["import { useComponentContextIcons, useTranslationContext } from '../../../../context';\n\nexport const PinnedMessagesEmptyList = () => {\n  const { IconPin } = useComponentContextIcons();\n\n  const { t } = useTranslationContext();\n\n  return (\n    <div className='str-chat__channel-detail__pinned-messages-view__empty-state'>\n      <IconPin className='str-chat__channel-detail__pinned-messages-view__empty-state__icon' />\n      <div className='str-chat__channel-detail__pinned-messages-view__empty-state__content'>\n        <p className='str-chat__channel-detail__pinned-messages-view__empty-state__title'>\n          {t('No pinned messages')}\n        </p>\n        <p className='str-chat__channel-detail__pinned-messages-view__empty-state__description'>\n          {t('Pin a message to see it here')}\n        </p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAEA,IAAa,gCAAgC;CAC3C,MAAM,EAAE,YAAY,yBAAyB;CAE7C,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,SAAD,EAAS,WAAU,oEAAqE,CAAA,GACxF,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,KAAD;IAAG,WAAU;cACV,EAAE,oBAAoB;GACtB,CAAA,GACH,oBAAC,KAAD;IAAG,WAAU;cACV,EAAE,8BAA8B;GAChC,CAAA,CACA;IACF;;AAET"}
+{"version":3,"file":"PinnedMessagesEmptyList.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx"],"sourcesContent":["import { useComponentContextIcons, useTranslationContext } from '../../../../context';\n\nexport const PinnedMessagesEmptyList = () => {\n  const { IconPin } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n\n  return (\n    <div className='str-chat__channel-detail__pinned-messages-view__empty-state'>\n      <IconPin className='str-chat__channel-detail__pinned-messages-view__empty-state__icon' />\n      <div className='str-chat__channel-detail__pinned-messages-view__empty-state__content'>\n        <p className='str-chat__channel-detail__pinned-messages-view__empty-state__title'>\n          {t(\n            'channelDetail.pinnedMessagesEmpty.noPinnedMessages.text',\n            'No pinned messages',\n          )}\n        </p>\n        <p className='str-chat__channel-detail__pinned-messages-view__empty-state__description'>\n          {t(\n            'channelDetail.pinnedMessagesEmpty.pinMessageSee.text',\n            'Pin a message to see it here',\n          )}\n        </p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAEA,IAAa,gCAAgC;CAC3C,MAAM,EAAE,YAAY,yBAAyB;CAC7C,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,SAAD,EAAS,WAAU,oEAAqE,CAAA,GACxF,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,KAAD;IAAG,WAAU;cACV,EACC,2DACA,oBACF;GACC,CAAA,GACH,oBAAC,KAAD;IAAG,WAAU;cACV,EACC,wDACA,8BACF;GACC,CAAA,CACA;IACF;;AAET"}

package/dist/es/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesView.mjs

@@ -1,12 +1,10 @@
-import { useChannelActionContext } from "../../../../context/ChannelActionContext.mjs";
-import { useChatContext } from "../../../../context/ChatContext.mjs";
 import { useComponentContext } from "../../../../context/ComponentContext.mjs";
-import { useModalContext } from "../../../../context/ModalContext.mjs";
-import { getDateString, isDate } from "../../../../i18n/utils.mjs";
+import { getDateString } from "../../../../i18n/utils.mjs";
 import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
 import { Avatar } from "../../../../components/Avatar/Avatar.mjs";
-import { Prompt } from "../../../../components/Dialog/components/Prompt.mjs";
 import { extractDisplayInfo } from "../../../../components/Avatar/utils.mjs";
+import { Prompt } from "../../../../components/Dialog/components/Prompt.mjs";
+import { useModalContext } from "../../../../context/ModalContext.mjs";
 import { ListItemLayout } from "../../../../components/ListItemLayout/ListItemLayout.mjs";
 import { SectionNavigatorHeader } from "../../SectionNavigator/SectionNavigatorHeader.mjs";
 import { useChannelDetailContext } from "../../ChannelDetailContext.mjs";
@@ -15,30 +13,33 @@ import { getUserDisplayName } from "../ChannelMembersView/ChannelMembersView.uti
 import { VirtualizedList } from "../../VirtualizedList/VirtualizedList.mjs";
 import { ChannelDetailSearchInput } from "../../ChannelDetailSearchInput.mjs";
 import { ChannelDetailEmptyList } from "../../ChannelDetailEmptyList.mjs";
+import { useChatViewNavigation } from "../../../SlotLayout/ChatViewNavigationContext.mjs";
 import { PinnedMessagesEmptyList } from "./PinnedMessagesEmptyList.mjs";
 import { usePinnedMessagesSearch } from "./usePinnedMessagesSearch.mjs";
 import { useCallback, useMemo } from "react";
+import { convertTimestampToDate } from "stream-chat";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesView.tsx
 var computeItemKey = (_, message) => message.id;
-var normalizeTimestamp = (timestamp) => {
-	if (!timestamp) return void 0;
-	return isDate(timestamp) ? timestamp.toISOString() : timestamp;
-};
+/**
+* A wire timestamp as an ISO string, for `getDateString` and the `dateTime` attribute. `convertTimestampToDate`
+* rather than `new Date`: a nanosecond value is out of Date's range.
+*/
+var normalizeTimestamp = (timestamp) => timestamp == null ? void 0 : convertTimestampToDate(timestamp)?.toISOString();
 var getPinnedMessagePreview = (message, t) => {
 	const text = message.text?.trim();
 	if (text) return text;
 	const attachment = message.attachments?.[0];
-	return attachment?.title || attachment?.text || attachment?.fallback || attachment?.type || t("Pinned message");
+	return attachment?.title || attachment?.text || attachment?.fallback || attachment?.type || t("channelDetail.pinnedMessagesView.pinnedMessage.label", "Pinned message");
 };
 var PinnedMessageDate = ({ message }) => {
-	const { t, tDateTimeParser } = useTranslationContext("PinnedMessageDate");
+	const { t, tDateTimeParser } = useTranslationContext();
 	const normalizedTimestamp = normalizeTimestamp(message.created_at);
 	const when = useMemo(() => getDateString({
 		messageCreatedAt: normalizedTimestamp,
 		t,
 		tDateTimeParser,
-		timestampTranslationKey: "timestamp/ChannelDetailPinnedMessageTimestamp"
+		timestampTranslationKey: "timestamp.ChannelDetailPinnedMessageTimestamp"
 	}), [
 		normalizedTimestamp,
 		t,
@@ -82,21 +83,23 @@ var PinnedMessagesViewItem = ({ message, onSelect }) => {
 	});
 };
 var PinnedMessagesView = ({ searchSource }) => {
-	const { setActiveChannel } = useChatContext();
+	const { open } = useChatViewNavigation();
 	const { t } = useTranslationContext();
 	const { close } = useModalContext();
-	const { jumpToMessage } = useChannelActionContext();
 	const { channel } = useChannelDetailContext();
 	const { displayedMessages, handleSearchChange, hasPinnedMessages, hasSearchResultsLoaded, pinnedMessagesSearchSource } = usePinnedMessagesSearch({ searchSource });
 	const handleSelectMessage = useCallback((message) => {
-		setActiveChannel(channel);
-		jumpToMessage(message.id);
+		open({
+			key: channel.cid ?? void 0,
+			kind: "channel",
+			source: channel
+		});
+		channel.messagePaginator.jumpToMessage(message.id);
 		close();
 	}, [
 		channel,
 		close,
-		jumpToMessage,
-		setActiveChannel
+		open
 	]);
 	const renderItem = useCallback((_, message) => /* @__PURE__ */ jsx(PinnedMessagesViewItem, {
 		message,
@@ -104,7 +107,7 @@ var PinnedMessagesView = ({ searchSource }) => {
 	}), [handleSelectMessage]);
 	const EmptyPlaceholder = useMemo(() => function PinnedMessagesEmptyPlaceholder() {
 		if (!hasPinnedMessages) return /* @__PURE__ */ jsx(PinnedMessagesEmptyList, {});
-		if (hasSearchResultsLoaded) return /* @__PURE__ */ jsx(ChannelDetailEmptyList, { children: t("No messages found") });
+		if (hasSearchResultsLoaded) return /* @__PURE__ */ jsx(ChannelDetailEmptyList, { children: t("channelDetail.pinnedMessagesView.noMessagesFound.text", "No messages found") });
 		return null;
 	}, [
 		hasPinnedMessages,
@@ -118,8 +121,8 @@ var PinnedMessagesView = ({ searchSource }) => {
 		className: "str-chat__channel-detail__pinned-messages-view",
 		children: [/* @__PURE__ */ jsx(SectionNavigatorHeader, {
 			close,
-			description: t("Browse pinned messages"),
-			title: t("Pinned messages")
+			description: t("channelDetail.pinnedMessagesView.browsePinnedMessages.description", "Browse pinned messages"),
+			title: t("channelDetail.pinnedMessagesView.pinnedMessages.title", "Pinned messages")
 		}), /* @__PURE__ */ jsxs(Prompt.Body, {
 			className: "str-chat__channel-detail__pinned-messages-view__body",
 			children: [hasPinnedMessages && /* @__PURE__ */ jsx(ChannelDetailSearchInput, { onSearchChange: handleSearchChange }), /* @__PURE__ */ jsx(VirtualizedList, {

package/dist/es/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesView.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PinnedMessagesView.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesView.tsx"],"sourcesContent":["import type { LocalMessage, MessageResponse, MessageSearchSource } from 'stream-chat';\nimport React, { useCallback, useMemo } from 'react';\n\nimport {\n  useChannelActionContext,\n  useChatContext,\n  useComponentContext,\n  useModalContext,\n  useTranslationContext,\n} from '../../../../context';\nimport { getDateString, isDate } from '../../../../i18n/utils';\nimport { Avatar as DefaultAvatar } from '../../../../components/Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../../../../components/Avatar/utils';\nimport { ListItemLayout } from '../../../../components/ListItemLayout';\nimport { VirtualizedList } from '../../VirtualizedList';\nimport { Prompt } from '../../../../components/Dialog';\nimport {\n  SectionNavigatorHeader,\n  type SectionNavigatorSectionContentProps,\n} from '../../SectionNavigator';\nimport { ChannelDetailSearchInput } from '../../ChannelDetailSearchInput';\nimport { getUserDisplayName } from '../ChannelMembersView/ChannelMembersView.utils';\nimport { ChannelDetailListLoadingIndicator } from '../../ChannelDetailListLoadingIndicator';\nimport { PinnedMessagesEmptyList } from './PinnedMessagesEmptyList';\nimport { usePinnedMessagesSearch } from './usePinnedMessagesSearch';\nimport { useChannelDetailContext } from '../../ChannelDetailContext';\nimport { ChannelDetailEmptyList } from '../../ChannelDetailEmptyList';\n\ntype PinnedMessage = MessageResponse | LocalMessage;\n\nconst computeItemKey = (_: number, message: PinnedMessage) => message.id;\n\nconst normalizeTimestamp = (timestamp: PinnedMessage['created_at']) => {\n  if (!timestamp) return undefined;\n  return isDate(timestamp) ? timestamp.toISOString() : timestamp;\n};\n\nconst getPinnedMessagePreview = (\n  message: PinnedMessage,\n  t: ReturnType<typeof useTranslationContext>['t'],\n) => {\n  const text = message.text?.trim();\n  if (text) return text;\n\n  const attachment = message.attachments?.[0];\n  const attachmentPreview =\n    attachment?.title || attachment?.text || attachment?.fallback || attachment?.type;\n\n  return attachmentPreview || t('Pinned message');\n};\n\nconst PinnedMessageDate = ({ message }: { message: PinnedMessage }) => {\n  const { t, tDateTimeParser } = useTranslationContext('PinnedMessageDate');\n  const normalizedTimestamp = normalizeTimestamp(message.created_at);\n\n  const when = useMemo(\n    () =>\n      getDateString({\n        messageCreatedAt: normalizedTimestamp,\n        t,\n        tDateTimeParser,\n        timestampTranslationKey: 'timestamp/ChannelDetailPinnedMessageTimestamp',\n      }),\n    [normalizedTimestamp, t, tDateTimeParser],\n  );\n\n  if (!when) return null;\n\n  return (\n    <time\n      className='str-chat__channel-detail__pinned-messages-view__list-item__date'\n      dateTime={normalizedTimestamp}\n    >\n      {when}\n    </time>\n  );\n};\n\nconst PinnedMessagesViewItem = ({\n  message,\n  onSelect,\n}: {\n  message: PinnedMessage;\n  onSelect: (message: PinnedMessage) => void;\n}) => {\n  const { t } = useTranslationContext();\n  const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =\n    useComponentContext();\n  const displayName = getUserDisplayName(message.user ?? undefined);\n\n  const LeadingSlot = useMemo(\n    () =>\n      function MessageAuthorAvatar() {\n        const displayInfo = extractDisplayInfo({ user: message.user ?? undefined });\n\n        return <Avatar {...displayInfo} size='md' />;\n      },\n    [Avatar, extractDisplayInfo, message.user],\n  );\n\n  const TrailingSlot = useMemo(\n    () =>\n      function MessageDate() {\n        return <PinnedMessageDate message={message} />;\n      },\n    [message],\n  );\n\n  const rootProps = useMemo(\n    () => ({\n      className: 'str-chat__channel-detail__pinned-messages-view__list-item',\n      onClick: () => onSelect(message),\n    }),\n    [message, onSelect],\n  );\n\n  return (\n    <ListItemLayout\n      LeadingSlot={LeadingSlot}\n      RootElement='button'\n      rootProps={rootProps}\n      subtitle={getPinnedMessagePreview(message, t)}\n      subtitleClassName='str-chat__channel-detail__pinned-messages-view__list-item__message-preview'\n      title={displayName}\n      TrailingSlot={TrailingSlot}\n    />\n  );\n};\n\nexport type PinnedMessagesViewProps = SectionNavigatorSectionContentProps & {\n  /** Custom message search source for pinned messages. */\n  searchSource?: MessageSearchSource;\n};\n\nexport const PinnedMessagesView: React.ComponentType<PinnedMessagesViewProps> = ({\n  searchSource,\n}) => {\n  const { setActiveChannel } = useChatContext();\n  const { t } = useTranslationContext();\n  const { close } = useModalContext();\n  // fixme: it is not right to couple the ChannelDetail view with Channel component. We need to have access to channel.messagePaginator.jumpToMessage()\n  const { jumpToMessage } = useChannelActionContext();\n  const { channel } = useChannelDetailContext();\n  const {\n    displayedMessages,\n    handleSearchChange,\n    hasPinnedMessages,\n    hasSearchResultsLoaded,\n    pinnedMessagesSearchSource,\n  } = usePinnedMessagesSearch({ searchSource });\n\n  const handleSelectMessage = useCallback(\n    (message: PinnedMessage) => {\n      setActiveChannel(channel);\n      jumpToMessage(message.id);\n      close();\n    },\n    [channel, close, jumpToMessage, setActiveChannel],\n  );\n\n  const renderItem = useCallback(\n    (_: number, message: PinnedMessage) => (\n      <PinnedMessagesViewItem message={message} onSelect={handleSelectMessage} />\n    ),\n    [handleSelectMessage],\n  );\n\n  const EmptyPlaceholder = useMemo(\n    () =>\n      function PinnedMessagesEmptyPlaceholder() {\n        if (!hasPinnedMessages) return <PinnedMessagesEmptyList />;\n        if (hasSearchResultsLoaded)\n          return (\n            <ChannelDetailEmptyList>{t('No messages found')}</ChannelDetailEmptyList>\n          );\n        return null;\n      },\n    [hasPinnedMessages, hasSearchResultsLoaded, t],\n  );\n\n  const Footer = useMemo(\n    () =>\n      function PinnedMessagesListFooter() {\n        return (\n          <ChannelDetailListLoadingIndicator searchSource={pinnedMessagesSearchSource} />\n        );\n      },\n    [pinnedMessagesSearchSource],\n  );\n\n  return (\n    <div className='str-chat__channel-detail__pinned-messages-view'>\n      <SectionNavigatorHeader\n        close={close}\n        description={t('Browse pinned messages')}\n        title={t('Pinned messages')}\n      />\n      <Prompt.Body className='str-chat__channel-detail__pinned-messages-view__body'>\n        {hasPinnedMessages && (\n          <ChannelDetailSearchInput onSearchChange={handleSearchChange} />\n        )}\n        <VirtualizedList\n          className='str-chat__channel-detail__pinned-messages-view__list'\n          computeItemKey={computeItemKey}\n          data={displayedMessages}\n          EmptyPlaceholder={EmptyPlaceholder}\n          Footer={Footer}\n          itemContent={renderItem}\n          loadNext={hasPinnedMessages ? pinnedMessagesSearchSource.search : undefined}\n        />\n      </Prompt.Body>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PinnedMessagesView.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesView.tsx"],"sourcesContent":["import type { LocalMessage, MessageResponse, MessageSearchSource } from 'stream-chat';\nimport React, { useCallback, useMemo } from 'react';\n\nimport {\n  useComponentContext,\n  useModalContext,\n  useTranslationContext,\n} from '../../../../context';\nimport { useChatViewNavigation } from '../../../SlotLayout';\nimport { getDateString } from '../../../../i18n/utils';\nimport { Avatar as DefaultAvatar } from '../../../../components/Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../../../../components/Avatar/utils';\nimport { ListItemLayout } from '../../../../components/ListItemLayout';\nimport { VirtualizedList } from '../../VirtualizedList';\nimport { Prompt } from '../../../../components/Dialog';\nimport {\n  SectionNavigatorHeader,\n  type SectionNavigatorSectionContentProps,\n} from '../../SectionNavigator';\nimport { ChannelDetailSearchInput } from '../../ChannelDetailSearchInput';\nimport { getUserDisplayName } from '../ChannelMembersView/ChannelMembersView.utils';\nimport { ChannelDetailListLoadingIndicator } from '../../ChannelDetailListLoadingIndicator';\nimport { PinnedMessagesEmptyList } from './PinnedMessagesEmptyList';\nimport { usePinnedMessagesSearch } from './usePinnedMessagesSearch';\nimport { useChannelDetailContext } from '../../ChannelDetailContext';\nimport { ChannelDetailEmptyList } from '../../ChannelDetailEmptyList';\nimport { convertTimestampToDate } from 'stream-chat';\n\ntype PinnedMessage = MessageResponse | LocalMessage;\n\nconst computeItemKey = (_: number, message: PinnedMessage) => message.id;\n\n/**\n * A wire timestamp as an ISO string, for `getDateString` and the `dateTime` attribute. `convertTimestampToDate`\n * rather than `new Date`: a nanosecond value is out of Date's range.\n */\nconst normalizeTimestamp = (timestamp: PinnedMessage['created_at']) =>\n  timestamp == null ? undefined : convertTimestampToDate(timestamp)?.toISOString();\n\nconst getPinnedMessagePreview = (\n  message: PinnedMessage,\n  t: ReturnType<typeof useTranslationContext>['t'],\n) => {\n  const text = message.text?.trim();\n  if (text) return text;\n\n  const attachment = message.attachments?.[0];\n  const attachmentPreview =\n    attachment?.title || attachment?.text || attachment?.fallback || attachment?.type;\n\n  return (\n    attachmentPreview ||\n    t('channelDetail.pinnedMessagesView.pinnedMessage.label', 'Pinned message')\n  );\n};\n\nconst PinnedMessageDate = ({ message }: { message: PinnedMessage }) => {\n  const { t, tDateTimeParser } = useTranslationContext();\n  const normalizedTimestamp = normalizeTimestamp(message.created_at);\n\n  const when = useMemo(\n    () =>\n      getDateString({\n        messageCreatedAt: normalizedTimestamp,\n        t,\n        tDateTimeParser,\n        timestampTranslationKey: 'timestamp.ChannelDetailPinnedMessageTimestamp',\n      }),\n    [normalizedTimestamp, t, tDateTimeParser],\n  );\n\n  if (!when) return null;\n\n  return (\n    <time\n      className='str-chat__channel-detail__pinned-messages-view__list-item__date'\n      dateTime={normalizedTimestamp}\n    >\n      {when}\n    </time>\n  );\n};\n\nconst PinnedMessagesViewItem = ({\n  message,\n  onSelect,\n}: {\n  message: PinnedMessage;\n  onSelect: (message: PinnedMessage) => void;\n}) => {\n  const { t } = useTranslationContext();\n  const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =\n    useComponentContext();\n  const displayName = getUserDisplayName(message.user ?? undefined);\n\n  const LeadingSlot = useMemo(\n    () =>\n      function MessageAuthorAvatar() {\n        const displayInfo = extractDisplayInfo({ user: message.user ?? undefined });\n\n        return <Avatar {...displayInfo} size='md' />;\n      },\n    [Avatar, extractDisplayInfo, message.user],\n  );\n\n  const TrailingSlot = useMemo(\n    () =>\n      function MessageDate() {\n        return <PinnedMessageDate message={message} />;\n      },\n    [message],\n  );\n\n  const rootProps = useMemo(\n    () => ({\n      className: 'str-chat__channel-detail__pinned-messages-view__list-item',\n      onClick: () => onSelect(message),\n    }),\n    [message, onSelect],\n  );\n\n  return (\n    <ListItemLayout\n      LeadingSlot={LeadingSlot}\n      RootElement='button'\n      rootProps={rootProps}\n      subtitle={getPinnedMessagePreview(message, t)}\n      subtitleClassName='str-chat__channel-detail__pinned-messages-view__list-item__message-preview'\n      title={displayName}\n      TrailingSlot={TrailingSlot}\n    />\n  );\n};\n\nexport type PinnedMessagesViewProps = SectionNavigatorSectionContentProps & {\n  /** Custom message search source for pinned messages. */\n  searchSource?: MessageSearchSource;\n};\n\nexport const PinnedMessagesView: React.ComponentType<PinnedMessagesViewProps> = ({\n  searchSource,\n}) => {\n  const { open } = useChatViewNavigation();\n  const { t } = useTranslationContext();\n  const { close } = useModalContext();\n  const { channel } = useChannelDetailContext();\n  const {\n    displayedMessages,\n    handleSearchChange,\n    hasPinnedMessages,\n    hasSearchResultsLoaded,\n    pinnedMessagesSearchSource,\n  } = usePinnedMessagesSearch({ searchSource });\n\n  const handleSelectMessage = useCallback(\n    (message: PinnedMessage) => {\n      // Selection is one navigation model: open the channel into a layout slot.\n      open({ key: channel.cid ?? undefined, kind: 'channel', source: channel });\n      // MERGE-RECONCILE: the deleted ChannelActionContext.jumpToMessage was replaced by the\n      // channel's messagePaginator (PR #2909 / stream-chat message-paginator API).\n      void channel.messagePaginator.jumpToMessage(message.id);\n      close();\n    },\n    [channel, close, open],\n  );\n\n  const renderItem = useCallback(\n    (_: number, message: PinnedMessage) => (\n      <PinnedMessagesViewItem message={message} onSelect={handleSelectMessage} />\n    ),\n    [handleSelectMessage],\n  );\n\n  const EmptyPlaceholder = useMemo(\n    () =>\n      function PinnedMessagesEmptyPlaceholder() {\n        if (!hasPinnedMessages) return <PinnedMessagesEmptyList />;\n        if (hasSearchResultsLoaded)\n          return (\n            <ChannelDetailEmptyList>\n              {t(\n                'channelDetail.pinnedMessagesView.noMessagesFound.text',\n                'No messages found',\n              )}\n            </ChannelDetailEmptyList>\n          );\n        return null;\n      },\n    [hasPinnedMessages, hasSearchResultsLoaded, t],\n  );\n\n  const Footer = useMemo(\n    () =>\n      function PinnedMessagesListFooter() {\n        return (\n          <ChannelDetailListLoadingIndicator searchSource={pinnedMessagesSearchSource} />\n        );\n      },\n    [pinnedMessagesSearchSource],\n  );\n\n  return (\n    <div className='str-chat__channel-detail__pinned-messages-view'>\n      <SectionNavigatorHeader\n        close={close}\n        description={t(\n          'channelDetail.pinnedMessagesView.browsePinnedMessages.description',\n          'Browse pinned messages',\n        )}\n        title={t(\n          'channelDetail.pinnedMessagesView.pinnedMessages.title',\n          'Pinned messages',\n        )}\n      />\n      <Prompt.Body className='str-chat__channel-detail__pinned-messages-view__body'>\n        {hasPinnedMessages && (\n          <ChannelDetailSearchInput onSearchChange={handleSearchChange} />\n        )}\n        <VirtualizedList\n          className='str-chat__channel-detail__pinned-messages-view__list'\n          computeItemKey={computeItemKey}\n          data={displayedMessages}\n          EmptyPlaceholder={EmptyPlaceholder}\n          Footer={Footer}\n          itemContent={renderItem}\n          loadNext={hasPinnedMessages ? pinnedMessagesSearchSource.search : undefined}\n        />\n      </Prompt.Body>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/es/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesCount.mjs

@@ -1,22 +1,14 @@
-import { useEffect, useState } from "react";
+import { useStateStore } from "../../../../store/hooks/useStateStore.mjs";
 //#region src/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesCount.ts
-var PINNED_MESSAGES_EVENTS = [
-	"message.new",
-	"message.updated",
-	"message.deleted",
-	"message.undeleted"
-];
-var getPinnedMessagesCount = (channel) => channel.state?.pinnedMessages?.length ?? 0;
-/** Reactive count of the channel's pinned messages derived from channel state. */
+var selector = (state) => ({ count: state.items?.length ?? 0 });
+/**
+* Reactive count of the channel's loaded pinned messages, sourced from
+* `channel.pinnedMessagesPaginator`. The paginator is kept current by the SDK's channel event
+* handlers (pin/unpin/delete/truncate); `useStateStore` re-renders on every change.
+*/
 var usePinnedMessagesCount = (channel) => {
-	const [pinnedMessagesCount, setPinnedMessagesCount] = useState(() => getPinnedMessagesCount(channel));
-	useEffect(() => {
-		const syncPinnedMessagesCount = () => setPinnedMessagesCount(getPinnedMessagesCount(channel));
-		syncPinnedMessagesCount();
-		const subscriptions = PINNED_MESSAGES_EVENTS.map((event) => channel.on(event, syncPinnedMessagesCount));
-		return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
-	}, [channel]);
-	return pinnedMessagesCount;
+	const { count } = useStateStore(channel.pinnedMessagesPaginator.state, selector);
+	return count;
 };
 //#endregion
 export { usePinnedMessagesCount };

package/dist/es/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesCount.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePinnedMessagesCount.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesCount.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { Channel } from 'stream-chat';\n\n// stream-chat keeps channel.state.pinnedMessages current on these events (see\n// channel.ts `_handleChannelEvent` -> add/removePinnedMessage), but mutating that\n// array does not re-render React. Subscribing here re-reads the count so the view\n// re-renders — and re-reads channel.state directly — on every pin/unpin, not only\n// when the channel gains its first or loses its last pinned message.\nconst PINNED_MESSAGES_EVENTS = [\n  'message.new',\n  'message.updated',\n  'message.deleted',\n  'message.undeleted',\n] as const;\n\nconst getPinnedMessagesCount = (channel: Channel) =>\n  channel.state?.pinnedMessages?.length ?? 0;\n\n/** Reactive count of the channel's pinned messages derived from channel state. */\nexport const usePinnedMessagesCount = (channel: Channel) => {\n  const [pinnedMessagesCount, setPinnedMessagesCount] = useState(() =>\n    getPinnedMessagesCount(channel),\n  );\n\n  useEffect(() => {\n    const syncPinnedMessagesCount = () =>\n      setPinnedMessagesCount(getPinnedMessagesCount(channel));\n\n    syncPinnedMessagesCount();\n\n    const subscriptions = PINNED_MESSAGES_EVENTS.map((event) =>\n      channel.on(event, syncPinnedMessagesCount),\n    );\n\n    return () => subscriptions.forEach((subscription) => subscription.unsubscribe());\n  }, [channel]);\n\n  return pinnedMessagesCount;\n};\n"],"mappings":";;AAQA,IAAM,yBAAyB;CAC7B;CACA;CACA;CACA;AACF;AAEA,IAAM,0BAA0B,YAC9B,QAAQ,OAAO,gBAAgB,UAAU;;AAG3C,IAAa,0BAA0B,YAAqB;CAC1D,MAAM,CAAC,qBAAqB,0BAA0B,eACpD,uBAAuB,OAAO,CAChC;CAEA,gBAAgB;EACd,MAAM,gCACJ,uBAAuB,uBAAuB,OAAO,CAAC;EAExD,wBAAwB;EAExB,MAAM,gBAAgB,uBAAuB,KAAK,UAChD,QAAQ,GAAG,OAAO,uBAAuB,CAC3C;EAEA,aAAa,cAAc,SAAS,iBAAiB,aAAa,YAAY,CAAC;CACjF,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO;AACT"}
+{"version":3,"file":"usePinnedMessagesCount.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesCount.ts"],"sourcesContent":["import type { Channel, LocalMessage, PaginatorState } from 'stream-chat';\n\nimport { useStateStore } from '../../../../store';\n\nconst selector = (state: PaginatorState<LocalMessage>) => ({\n  count: state.items?.length ?? 0,\n});\n\n/**\n * Reactive count of the channel's loaded pinned messages, sourced from\n * `channel.pinnedMessagesPaginator`. The paginator is kept current by the SDK's channel event\n * handlers (pin/unpin/delete/truncate); `useStateStore` re-renders on every change.\n */\nexport const usePinnedMessagesCount = (channel: Channel) => {\n  const { count } = useStateStore(channel.pinnedMessagesPaginator.state, selector);\n  return count;\n};\n"],"mappings":";;AAIA,IAAM,YAAY,WAAyC,EACzD,OAAO,MAAM,OAAO,UAAU,EAChC;;;;;;AAOA,IAAa,0BAA0B,YAAqB;CAC1D,MAAM,EAAE,UAAU,cAAc,QAAQ,wBAAwB,OAAO,QAAQ;CAC/E,OAAO;AACT"}

package/dist/es/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesSearch.mjs

@@ -1,5 +1,5 @@
-import { useChatContext } from "../../../../context/ChatContext.mjs";
 import { useStateStore } from "../../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../../context/ChatContext.mjs";
 import { useChannelDetailContext } from "../../ChannelDetailContext.mjs";
 import { usePinnedMessagesCount } from "./usePinnedMessagesCount.mjs";
 import { useCallback, useEffect, useMemo } from "react";