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

package/dist/cjs/channel-detail.js

@@ -1,17 +1,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_NotificationList = require("./NotificationList.4ce251ea.js");
-const require_useChannelHeaderOnlineStatus = require("./useChannelHeaderOnlineStatus.64c443f5.js");
+const require_useComponentContextIcons = require("./useComponentContextIcons.d16834d9.js");
+const require_Thread = require("./Thread.373af587.js");
+const require_ListItemLayout = require("./ListItemLayout.60c3b287.js");
+const require_useChannel = require("./useChannel.1004ed4c.js");
+const require_SlotLayout = require("./SlotLayout.de45be2d.js");
 let react = require("react");
-react = require_NotificationList.__toESM(react);
+react = require_useComponentContextIcons.__toESM(react);
+let stream_chat = require("stream-chat");
 let react_jsx_runtime = require("react/jsx-runtime");
 let clsx = require("clsx");
-clsx = require_NotificationList.__toESM(clsx);
-let stream_chat = require("stream-chat");
-let lodash_debounce = require("lodash.debounce");
-lodash_debounce = require_NotificationList.__toESM(lodash_debounce);
-let lodash_uniqby = require("lodash.uniqby");
-lodash_uniqby = require_NotificationList.__toESM(lodash_uniqby);
+clsx = require_useComponentContextIcons.__toESM(clsx);
 let react_virtuoso = require("react-virtuoso");
+let lodash_debounce = require("lodash.debounce");
+lodash_debounce = require_useComponentContextIcons.__toESM(lodash_debounce);
+let _stream_io_i18n = require("@stream-io/i18n");
 //#region src/plugins/ChannelDetail/SectionNavigator/SectionNavigator.tsx
 var SECTION_NAVIGATOR_LAYOUT = {
 	inline: "inline",
@@ -179,16 +181,16 @@ var SectionNavigator = ({ className, createLayoutObserver = defaultCreateLayoutO
 * (`goBack`), where it would compete with the back affordance.
 */
 var SectionNavigatorHeader = (props) => {
-	const { IconMenu } = require_NotificationList.useComponentContextIcons();
-	const { t } = require_NotificationList.useTranslationContext("SectionNavigatorHeader");
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	const { layout, openNavigation } = useSectionNavigatorContext();
 	const MenuButton = (0, react.useMemo)(() => {
 		if (layout !== SECTION_NAVIGATOR_LAYOUT.inline) return void 0;
 		if (props.goBack) return void 0;
 		return function SectionNavigatorHeaderMenuButton() {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
+			const { IconMenu } = require_useComponentContextIcons.useComponentContextIcons();
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useComponentContextIcons.Button, {
 				appearance: "ghost",
-				"aria-label": t("Open menu"),
+				"aria-label": t("channelDetail.sectionNavigatorHeader.openMenu.ariaLabel", "Open menu"),
 				circular: true,
 				className: "str-chat__section-navigator__header-menu-button",
 				onClick: openNavigation,
@@ -198,13 +200,12 @@ var SectionNavigatorHeader = (props) => {
 			});
 		};
 	}, [
-		IconMenu,
 		layout,
 		openNavigation,
 		props.goBack,
 		t
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Prompt.Header, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.Prompt.Header, {
 		...props,
 		LeadingContent: MenuButton
 	});
@@ -216,7 +217,7 @@ var SectionNavigatorHeader = (props) => {
 * `ListItemLayout` as a `<button>` and wires the SectionNavigator selection
 * state into `aria-current` and the click handler.
 */
-var ChannelDetailNavButton = ({ className, LeadingIcon, sectionId: _sectionId, select, selected, title, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
+var ChannelDetailNavButton = ({ className, LeadingIcon, sectionId: _sectionId, select, selected, title, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.ListItemLayout, {
 	LeadingIcon,
 	RootElement: "button",
 	rootProps: {
@@ -246,18 +247,18 @@ var useChannelDetailContext = () => {
 //#endregion
 //#region src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsx
 var ChannelFilesEmptyList = () => {
-	const { IconFolder } = require_NotificationList.useComponentContextIcons();
-	const { t } = require_NotificationList.useTranslationContext("ChannelFilesEmptyList");
+	const { IconFolder } = require_useComponentContextIcons.useComponentContextIcons();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "str-chat__channel-detail__files-view__empty-state",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconFolder, { className: "str-chat__channel-detail__files-view__empty-state__icon" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "str-chat__channel-detail__files-view__empty-state__content",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "str-chat__channel-detail__files-view__empty-state__title",
-				children: t("No files")
+				children: t("channelDetail.channelFilesEmpty.noFiles.text", "No files")
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "str-chat__channel-detail__files-view__empty-state__description",
-				children: t("Share a file to see it here")
+				children: t("channelDetail.channelFilesEmpty.shareFileSee.text", "Share a file to see it here")
 			})]
 		})]
 	});
@@ -269,11 +270,11 @@ var searchSourceFooterStateSelector = (state) => ({
 	isLoading: state.isLoading
 });
 var ChannelDetailListLoadingIndicator = ({ searchSource }) => {
-	const { hasNextPage, isLoading } = require_NotificationList.useStateStore(searchSource.state, searchSourceFooterStateSelector);
+	const { hasNextPage, isLoading } = require_useComponentContextIcons.useStateStore(searchSource.state, searchSourceFooterStateSelector);
 	if (!hasNextPage || !isLoading) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "str-chat__loading-indicator-placeholder",
-		children: isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.LoadingIndicator, {})
+		children: isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Thread.LoadingIndicator, {})
 	});
 };
 //#endregion
@@ -281,10 +282,12 @@ var ChannelDetailListLoadingIndicator = ({ searchSource }) => {
 /** Attachment types listed by the files view (everything that is not an image/video). */
 var FILE_ATTACHMENT_TYPES = ["file", "audio"];
 var FILE_ATTACHMENT_TYPE_SET = new Set(FILE_ATTACHMENT_TYPES);
-var normalizeTimestamp$1 = (timestamp) => {
-	if (!timestamp) return void 0;
-	return require_NotificationList.isDate(timestamp) ? timestamp.toISOString() : timestamp;
-};
+/**
+* A wire timestamp as an ISO string — what `getDateString` accepts, what the month key slices, and
+* what `byCreatedAtDesc` compares. `convertTimestampToDate` rather than `new Date`: a nanosecond value is out of
+* Date's range, so constructing one directly yields an Invalid Date.
+*/
+var normalizeTimestamp$1 = (timestamp) => timestamp == null ? void 0 : (0, stream_chat.convertTimestampToDate)(timestamp)?.toISOString();
 var isChannelFileAttachment = (attachment) => !(0, stream_chat.isScrapedContent)(attachment) && !!attachment.type && FILE_ATTACHMENT_TYPE_SET.has(attachment.type);
 var byCreatedAtDesc = (a, b) => (b.createdAt ?? "").localeCompare(a.createdAt ?? "");
 /**
@@ -342,7 +345,7 @@ var channelFilesSearchSourceStateSelector = (state) => ({
 	messages: state.items
 });
 var useChannelFilesSearch = () => {
-	const { client } = require_NotificationList.useChatContext();
+	const { client } = require_useComponentContextIcons.useChatContext();
 	const { channel } = useChannelDetailContext();
 	const channelFilesSearchSource = (0, react.useMemo)(() => {
 		const source = new stream_chat.MessageSearchSource(client, {
@@ -354,7 +357,7 @@ var useChannelFilesSearch = () => {
 		source.messageSearchFilters = { "attachments.type": { $in: [...FILE_ATTACHMENT_TYPES] } };
 		return source;
 	}, [channel.cid, client]);
-	const { isLoading, messages } = require_NotificationList.useStateStore(channelFilesSearchSource.state, channelFilesSearchSourceStateSelector);
+	const { isLoading, messages } = require_useComponentContextIcons.useStateStore(channelFilesSearchSource.state, channelFilesSearchSourceStateSelector);
 	const { groupCounts, items, sections } = (0, react.useMemo)(() => toChannelFileSections(messages ?? []), [messages]);
 	(0, react.useEffect)(() => {
 		channelFilesSearchSource.activate();
@@ -389,8 +392,8 @@ var ChannelFilesGroup = (0, react.forwardRef)(function ChannelFilesGroup({ class
 	});
 });
 var ChannelFilesSectionHeader = ({ timestamp }) => {
-	const { t, tDateTimeParser } = require_NotificationList.useTranslationContext("ChannelFilesView");
-	const label = require_NotificationList.getDateString({
+	const { t, tDateTimeParser } = require_useComponentContextIcons.useTranslationContext();
+	const label = (0, _stream_io_i18n.getDateString)({
 		format: "MMMM YYYY",
 		messageCreatedAt: timestamp,
 		t,
@@ -407,22 +410,23 @@ var ChannelFileListItem = ({ item }) => {
 	const { attachment } = item;
 	const fileName = getAttachmentFileName(attachment);
 	const assetUrl = attachment.asset_url;
+	const { file_size: fileSize, mime_type: mimeType } = attachment.custom ?? {};
 	const LeadingSlot = (0, react.useMemo)(() => function FileListItemIcon() {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.FileIcon, {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.FileIcon, {
 			className: "str-chat__channel-detail__files-view__list-item__icon",
 			fileName,
-			mimeType: attachment.mime_type,
+			mimeType,
 			size: "md"
 		});
-	}, [attachment.mime_type, fileName]);
+	}, [mimeType, fileName]);
 	const sharedProps = (0, react.useMemo)(() => ({
 		LeadingSlot,
-		subtitle: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.FileSizeIndicator, { fileSize: attachment.file_size }),
+		subtitle: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.FileSizeIndicator, { fileSize }),
 		subtitleClassName: "str-chat__channel-detail__files-view__list-item__size",
 		title: fileName,
 		titleClassName: "str-chat__channel-detail__files-view__list-item__name"
 	}), [
-		attachment.file_size,
+		fileSize,
 		fileName,
 		LeadingSlot
 	]);
@@ -434,20 +438,20 @@ var ChannelFileListItem = ({ item }) => {
 		target: "_blank"
 	}), [assetUrl, fileName]);
 	const divRootProps = (0, react.useMemo)(() => ({ className: "str-chat__channel-detail__files-view__list-item" }), []);
-	if (assetUrl) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
+	if (assetUrl) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.ListItemLayout, {
 		...sharedProps,
 		RootElement: "a",
 		rootProps: linkRootProps
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.ListItemLayout, {
 		...sharedProps,
 		RootElement: "div",
 		rootProps: divRootProps
 	});
 };
 var ChannelFilesView = () => {
-	const { t } = require_NotificationList.useTranslationContext();
-	const { close } = require_NotificationList.useModalContext();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	const { close } = require_ListItemLayout.useModalContext();
 	const { channelFilesSearchSource, fileItems, groupCounts, hasResultsLoaded, sections } = useChannelFilesSearch();
 	const groupContent = (0, react.useCallback)((groupIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelFilesSectionHeader, { timestamp: sections[groupIndex]?.timestamp }), [sections]);
 	const itemContent = (0, react.useCallback)((index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelFileListItem, { item: fileItems[index] }), [fileItems]);
@@ -470,8 +474,8 @@ var ChannelFilesView = () => {
 		className: "str-chat__channel-detail__files-view",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionNavigatorHeader, {
 			close,
-			title: t("Files")
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Prompt.Body, {
+			title: t("channelDetail.channelFilesView.files.title", "Files")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.Prompt.Body, {
 			className: "str-chat__channel-detail__files-view__body",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_virtuoso.GroupedVirtuoso, {
 				atBottomStateChange,
@@ -489,34 +493,34 @@ var ChannelFilesView = () => {
 var toError$1 = (error) => error instanceof Error ? error : /* @__PURE__ */ new Error("An unknown error occurred");
 var getDisplayName = (name, fallback) => name || fallback || "";
 var BlockUserActionIcon$1 = () => {
-	const { IconNoSign } = require_NotificationList.useComponentContextIcons();
+	const { IconNoSign } = require_useComponentContextIcons.useComponentContextIcons();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconNoSign, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--block-user" });
 };
 var DeleteChatActionIcon = () => {
-	const { IconDelete } = require_NotificationList.useComponentContextIcons();
+	const { IconDelete } = require_useComponentContextIcons.useComponentContextIcons();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconDelete, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--delete-chat" });
 };
 var MuteActionIcon = () => {
-	const { IconMute } = require_NotificationList.useComponentContextIcons();
+	const { IconMute } = require_useComponentContextIcons.useComponentContextIcons();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconMute, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute" });
 };
 var MutedActionIcon = () => {
-	const { IconAudio } = require_NotificationList.useComponentContextIcons();
+	const { IconAudio } = require_useComponentContextIcons.useComponentContextIcons();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconAudio, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--unmute" });
 };
 var LeaveChannelActionIcon = () => {
-	const { IconLeave } = require_NotificationList.useComponentContextIcons();
+	const { IconLeave } = require_useComponentContextIcons.useComponentContextIcons();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconLeave, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--leave-channel" });
 };
 var channelManagementViewActionClassName = "str-chat__channel-management-view-action";
 var blockedUsersSelector$1 = ({ userIds }) => ({ userIds });
-var ChannelManagementConfirmationAlert = ({ action, cancelLabel, confirmLabel, description, isSubmitting, onCancel, onConfirm, testId, title }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Alert.Root, {
+var ChannelManagementConfirmationAlert = ({ action, cancelLabel, confirmLabel, description, isSubmitting, onCancel, onConfirm, testId, title }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ListItemLayout.Alert.Root, {
 	className: (0, clsx.default)("str-chat__channel-management-confirmation-alert", { [`str-chat__channel-management-confirmation-alert--${action}`]: action }),
 	"data-testid": testId,
-	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Alert.Header, {
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.Alert.Header, {
 		description,
 		title
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Alert.Actions, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ListItemLayout.Alert.Actions, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useComponentContextIcons.Button, {
 		appearance: "solid",
 		"data-testid": `${testId}-confirm-button`,
 		disabled: isSubmitting,
@@ -524,7 +528,7 @@ var ChannelManagementConfirmationAlert = ({ action, cancelLabel, confirmLabel, d
 		size: "md",
 		variant: "danger",
 		children: confirmLabel
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useComponentContextIcons.Button, {
 		appearance: "outline",
 		autoFocus: true,
 		"data-testid": `${testId}-cancel-button`,
@@ -536,7 +540,7 @@ var ChannelManagementConfirmationAlert = ({ action, cancelLabel, confirmLabel, d
 	})] })]
 });
 var useOtherMember = () => {
-	const { client } = require_NotificationList.useChatContext();
+	const { client } = require_useComponentContextIcons.useChatContext();
 	const { channel } = useChannelDetailContext();
 	return (0, react.useMemo)(() => {
 		const stateMembers = Object.values(channel.state?.members ?? {});
@@ -544,10 +548,10 @@ var useOtherMember = () => {
 	}, [channel, client.user?.id]);
 };
 var useChannelManagementActionFilterState = () => {
-	const { client } = require_NotificationList.useChatContext();
+	const { client } = require_useComponentContextIcons.useChatContext();
 	const { channel } = useChannelDetailContext();
 	const otherMember = useOtherMember();
-	const resolvedIsDmChannel = require_useChannelHeaderOnlineStatus.isDmChannel({
+	const resolvedIsDmChannel = require_ListItemLayout.isDmChannel({
 		channel,
 		ownUserId: client.user?.id
 	});
@@ -584,18 +588,18 @@ var useBaseChannelManagementActionSetFilter = (channelManagementActionSet) => {
 };
 var ChannelMuteAction = () => {
 	const { channel } = useChannelDetailContext();
-	const { addNotification } = require_NotificationList.useNotificationApi();
-	const { t } = require_NotificationList.useTranslationContext();
-	const { muted: channelMuted } = require_useChannelHeaderOnlineStatus.useIsChannelMuted(channel);
+	const { addNotification } = require_Thread.useNotificationApi();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	const { muted: channelMuted } = require_Thread.useIsChannelMuted(channel);
 	const [optimisticChannelMuted, setOptimisticChannelMuted] = (0, react.useState)(channelMuted);
 	(0, react.useEffect)(() => {
 		setOptimisticChannelMuted(channelMuted);
 	}, [channelMuted]);
-	const toggleChannelMuteRequest = require_useChannelHeaderOnlineStatus.useStableCallback((nextMuted, targetChannel) => {
+	const toggleChannelMuteRequest = require_Thread.useStableCallback((nextMuted, targetChannel) => {
 		if (!nextMuted) return targetChannel.unmute().then(() => addNotification({
 			context: { channel: targetChannel },
 			emitter: "ChannelManagementView",
-			message: t("Channel unmuted"),
+			message: t("common.channelUnmuted.text", "Channel unmuted"),
 			severity: "success",
 			type: "api:channel:unmute:success"
 		})).catch((error) => {
@@ -604,7 +608,7 @@ var ChannelMuteAction = () => {
 				context: { channel: targetChannel },
 				emitter: "ChannelManagementView",
 				error: toError$1(error),
-				message: t("Error unmuting channel"),
+				message: t("channelDetail.channelManagementActions.errorUnmutingChannel.text", "Error unmuting channel"),
 				severity: "error",
 				type: "api:channel:unmute:failed"
 			});
@@ -612,7 +616,7 @@ var ChannelMuteAction = () => {
 		return targetChannel.mute().then(() => addNotification({
 			context: { channel: targetChannel },
 			emitter: "ChannelManagementView",
-			message: t("Channel muted"),
+			message: t("common.channelMuted.text", "Channel muted"),
 			severity: "success",
 			type: "api:channel:mute:success"
 		})).catch((error) => {
@@ -621,7 +625,7 @@ var ChannelMuteAction = () => {
 				context: { channel: targetChannel },
 				emitter: "ChannelManagementView",
 				error: toError$1(error),
-				message: t("Error muting channel"),
+				message: t("channelDetail.channelManagementActions.errorMutingChannel.text", "Error muting channel"),
 				severity: "error",
 				type: "api:channel:mute:failed"
 			});
@@ -647,39 +651,39 @@ var ChannelMuteAction = () => {
 	}), [optimisticChannelMuted, toggleOptimisticChannelMute]);
 	const TrailingSlot = (0, react.useMemo)(() => {
 		function ChannelMuteSwitch() {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Switch, {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.Switch, {
 				on: optimisticChannelMuted,
 				presentation: true
 			});
 		}
 		return ChannelMuteSwitch;
 	}, [optimisticChannelMuted]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.ListItemLayout, {
 		LeadingIcon: optimisticChannelMuted ? MutedActionIcon : MuteActionIcon,
 		RootElement: "button",
 		rootProps,
-		title: optimisticChannelMuted ? t("Unmute chat") : t("Mute chat"),
+		title: optimisticChannelMuted ? t("channelDetail.channelManagementActions.unmuteChat.title", "Unmute chat") : t("channelDetail.channelManagementActions.muteChat.title", "Mute chat"),
 		TrailingSlot
 	});
 };
 var UserMuteAction$1 = () => {
-	const { client, mutes } = require_NotificationList.useChatContext();
+	const { client, mutes } = require_useComponentContextIcons.useChatContext();
 	const { channel } = useChannelDetailContext();
-	const { addNotification } = require_NotificationList.useNotificationApi();
-	const { t } = require_NotificationList.useTranslationContext();
+	const { addNotification } = require_Thread.useNotificationApi();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	const otherMember = useOtherMember();
-	const userMuted = !!mutes.find((mute) => mute.target.id === otherMember?.user?.id);
+	const userMuted = !!mutes.find((mute) => mute.target?.id === otherMember?.user?.id);
 	const [optimisticUserMuted, setOptimisticUserMuted] = (0, react.useState)(userMuted);
 	(0, react.useEffect)(() => {
 		setOptimisticUserMuted(userMuted);
 	}, [userMuted]);
 	const otherMemberUserId = otherMember?.user?.id;
-	const toggleUserMuteRequest = require_useChannelHeaderOnlineStatus.useStableCallback((nextMuted, targetUserId) => {
+	const toggleUserMuteRequest = require_Thread.useStableCallback((nextMuted, targetUserId) => {
 		if (!targetUserId) return;
-		if (!nextMuted) return client.unmuteUser(targetUserId).then(() => addNotification({
+		if (!nextMuted) return client.moderation.unmute({ target_ids: [targetUserId] }).then(() => addNotification({
 			context: { channel },
 			emitter: "ChannelManagementView",
-			message: t("User unmuted"),
+			message: t("channelDetail.channelManagementActions.userUnmuted.text", "User unmuted"),
 			severity: "success",
 			type: "api:user:unmute:success"
 		})).catch((error) => {
@@ -688,15 +692,15 @@ var UserMuteAction$1 = () => {
 				context: { channel },
 				emitter: "ChannelManagementView",
 				error: toError$1(error),
-				message: t("Error unmuting user"),
+				message: t("channelDetail.channelManagementActions.errorUnmutingUser.text", "Error unmuting user"),
 				severity: "error",
 				type: "api:user:unmute:failed"
 			});
 		});
-		return client.muteUser(targetUserId).then(() => addNotification({
+		return client.moderation.mute({ target_ids: [targetUserId] }).then(() => addNotification({
 			context: { channel },
 			emitter: "ChannelManagementView",
-			message: t("User muted"),
+			message: t("channelDetail.channelManagementActions.userMuted.text", "User muted"),
 			severity: "success",
 			type: "api:user:mute:success"
 		})).catch((error) => {
@@ -705,7 +709,7 @@ var UserMuteAction$1 = () => {
 				context: { channel },
 				emitter: "ChannelManagementView",
 				error: toError$1(error),
-				message: t("Error muting user"),
+				message: t("channelDetail.channelManagementActions.errorMutingUser.text", "Error muting user"),
 				severity: "error",
 				type: "api:user:mute:failed"
 			});
@@ -731,29 +735,29 @@ var UserMuteAction$1 = () => {
 	}), [optimisticUserMuted, toggleOptimisticUserMute]);
 	const TrailingSlot = (0, react.useMemo)(() => {
 		function UserMuteSwitch() {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Switch, {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.Switch, {
 				on: optimisticUserMuted,
 				presentation: true
 			});
 		}
 		return UserMuteSwitch;
 	}, [optimisticUserMuted]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.ListItemLayout, {
 		LeadingIcon: optimisticUserMuted ? MutedActionIcon : MuteActionIcon,
 		RootElement: "button",
 		rootProps,
-		title: optimisticUserMuted ? t("Unmute user") : t("Mute user"),
+		title: optimisticUserMuted ? t("channelDetail.channelManagementActions.unmuteUser.title", "Unmute user") : t("channelDetail.channelManagementActions.muteUser.title", "Mute user"),
 		TrailingSlot
 	});
 };
 var BlockUserAction$1 = () => {
-	const { client } = require_NotificationList.useChatContext();
-	const { Modal = require_NotificationList.GlobalModal } = require_NotificationList.useComponentContext();
+	const { client } = require_useComponentContextIcons.useChatContext();
+	const { Modal = require_ListItemLayout.GlobalModal } = require_useComponentContextIcons.useComponentContext();
 	const { channel } = useChannelDetailContext();
-	const { addNotification } = require_NotificationList.useNotificationApi();
-	const { t } = require_NotificationList.useTranslationContext();
+	const { addNotification } = require_Thread.useNotificationApi();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	const targetUserId = useOtherMember()?.user?.id;
-	const { userIds: blockedUserIds } = require_NotificationList.useStateStore(client.blockedUsers, blockedUsersSelector$1);
+	const { userIds: blockedUserIds } = require_useComponentContextIcons.useStateStore(client.blockedUsers, blockedUsersSelector$1);
 	const isBlocked = (0, react.useMemo)(() => !!targetUserId && new Set(blockedUserIds).has(targetUserId), [blockedUserIds, targetUserId]);
 	const [alertOpen, setAlertOpen] = (0, react.useState)(false);
 	const [userBlockInProgress, setUserBlockInProgress] = (0, react.useState)(false);
@@ -767,11 +771,11 @@ var BlockUserAction$1 = () => {
 		if (!targetUserId) return;
 		try {
 			setUserBlockInProgress(true);
-			await client.unBlockUser(targetUserId);
+			await client.unblockUser(targetUserId);
 			addNotification({
 				context: { channel },
 				emitter: "ChannelManagementView",
-				message: t("User unblocked"),
+				message: t("common.userUnblocked.text", "User unblocked"),
 				severity: "success",
 				type: "api:user:unblock:success"
 			});
@@ -780,7 +784,7 @@ var BlockUserAction$1 = () => {
 				context: { channel },
 				emitter: "ChannelManagementView",
 				error: toError$1(error),
-				message: t("Error unblocking user"),
+				message: t("channelDetail.channelManagementActions.errorUnblockingUser.text", "Error unblocking user"),
 				severity: "error",
 				type: "api:user:unblock:failed"
 			});
@@ -803,7 +807,7 @@ var BlockUserAction$1 = () => {
 			addNotification({
 				context: { channel },
 				emitter: "ChannelManagementView",
-				message: t("User blocked"),
+				message: t("common.userBlocked.text", "User blocked"),
 				severity: "success",
 				type: "api:user:block:success"
 			});
@@ -812,7 +816,7 @@ var BlockUserAction$1 = () => {
 				context: { channel },
 				emitter: "ChannelManagementView",
 				error: toError$1(error),
-				message: t("Error blocking user"),
+				message: t("channelDetail.channelManagementActions.errorBlockingUser.text", "Error blocking user"),
 				severity: "error",
 				type: "api:user:block:failed"
 			});
@@ -827,7 +831,7 @@ var BlockUserAction$1 = () => {
 		targetUserId,
 		t
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.ListItemLayout, {
 		destructive: true,
 		LeadingIcon: BlockUserActionIcon$1,
 		RootElement: "button",
@@ -836,30 +840,30 @@ var BlockUserAction$1 = () => {
 			disabled: userBlockInProgress,
 			onClick: openBlockUserAlert
 		}), [openBlockUserAlert, userBlockInProgress]),
-		title: isBlocked ? t("Unblock") : t("Block user")
+		title: isBlocked ? t("common.unblock.ariaLabel", "Unblock") : t("channelDetail.channelManagementActions.blockUser.title", "Block user")
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Modal, {
 		open: alertOpen,
 		role: "alertdialog",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelManagementConfirmationAlert, {
 			action: "blockUser",
-			cancelLabel: t("Cancel"),
-			confirmLabel: isBlocked ? t("Unblock") : t("Block User"),
-			description: isBlocked ? t("This user will be able to message you again.") : t("This user won't be able to message you anymore. You can unblock them anytime."),
+			cancelLabel: t("common.cancel.label", "Cancel"),
+			confirmLabel: isBlocked ? t("common.unblock.ariaLabel", "Unblock") : t("common.blockUser.title", "Block User"),
+			description: isBlocked ? t("channelDetail.channelManagementActions.userAbleMessageAgain.description", "This user will be able to message you again.") : t("channelDetail.channelManagementActions.userWonTAble.description", "This user won't be able to message you anymore. You can unblock them anytime."),
 			isSubmitting: userBlockInProgress,
 			onCancel: closeBlockUserAlert,
 			onConfirm: isBlocked ? unblockUser : blockUser,
 			testId: "channel-detail-block-user-alert",
-			title: isBlocked ? t("Unblock") : t("Block User")
+			title: isBlocked ? t("common.unblock.ariaLabel", "Unblock") : t("common.blockUser.title", "Block User")
 		})
 	})] });
 };
 var LeaveChannelAction = () => {
-	const { client } = require_NotificationList.useChatContext();
+	const { client } = require_useComponentContextIcons.useChatContext();
 	const { channel } = useChannelDetailContext();
-	const { Modal = require_NotificationList.GlobalModal } = require_NotificationList.useComponentContext();
-	const { close } = require_NotificationList.useModalContext();
-	const { addNotification } = require_NotificationList.useNotificationApi();
-	const { t } = require_NotificationList.useTranslationContext();
+	const { Modal = require_ListItemLayout.GlobalModal } = require_useComponentContextIcons.useComponentContext();
+	const { close } = require_ListItemLayout.useModalContext();
+	const { addNotification } = require_Thread.useNotificationApi();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	const [alertOpen, setAlertOpen] = (0, react.useState)(false);
 	const [leaveChannelInProgress, setLeaveChannelInProgress] = (0, react.useState)(false);
 	const closeLeaveChannelAlert = (0, react.useCallback)(() => {
@@ -876,7 +880,7 @@ var LeaveChannelAction = () => {
 			addNotification({
 				context: { channel },
 				emitter: "ChannelManagementView",
-				message: t("Left channel"),
+				message: t("common.leftChannel.text", "Left channel"),
 				severity: "success",
 				type: "api:channel:leave:success"
 			});
@@ -887,7 +891,7 @@ var LeaveChannelAction = () => {
 				context: { channel },
 				emitter: "ChannelManagementView",
 				error: toError$1(error),
-				message: t("Failed to leave channel"),
+				message: t("common.failedLeaveChannel.text", "Failed to leave channel"),
 				severity: "error",
 				type: "api:channel:leave:failed"
 			});
@@ -901,7 +905,7 @@ var LeaveChannelAction = () => {
 		close,
 		t
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.ListItemLayout, {
 		destructive: true,
 		LeadingIcon: LeaveChannelActionIcon,
 		RootElement: "button",
@@ -910,29 +914,29 @@ var LeaveChannelAction = () => {
 			disabled: leaveChannelInProgress,
 			onClick: openLeaveChannelAlert
 		}), [leaveChannelInProgress, openLeaveChannelAlert]),
-		title: t("Leave chat")
+		title: t("channelDetail.channelManagementActions.leaveChat.title", "Leave chat")
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Modal, {
 		open: alertOpen,
 		role: "alertdialog",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelManagementConfirmationAlert, {
 			action: "leaveChannel",
-			cancelLabel: t("Cancel"),
-			confirmLabel: t("Leave chat"),
-			description: t("Are you sure you want to leave this channel?"),
+			cancelLabel: t("common.cancel.label", "Cancel"),
+			confirmLabel: t("channelDetail.channelManagementActions.leaveChat.title", "Leave chat"),
+			description: t("channelDetail.channelManagementActions.sureWantLeaveChannel.description", "Are you sure you want to leave this channel?"),
 			isSubmitting: leaveChannelInProgress,
 			onCancel: closeLeaveChannelAlert,
 			onConfirm: leaveChannel,
 			testId: "channel-detail-leave-channel-alert",
-			title: t("Leave chat")
+			title: t("channelDetail.channelManagementActions.leaveChat.title", "Leave chat")
 		})
 	})] });
 };
 var DeleteChatAction = () => {
 	const { channel } = useChannelDetailContext();
-	const { Modal = require_NotificationList.GlobalModal } = require_NotificationList.useComponentContext();
-	const { close: closeChannelDetail } = require_NotificationList.useModalContext();
-	const { addNotification } = require_NotificationList.useNotificationApi();
-	const { t } = require_NotificationList.useTranslationContext();
+	const { Modal = require_ListItemLayout.GlobalModal } = require_useComponentContextIcons.useComponentContext();
+	const { close: closeChannelDetail } = require_ListItemLayout.useModalContext();
+	const { addNotification } = require_Thread.useNotificationApi();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	const otherMember = useOtherMember();
 	const [alertOpen, setAlertOpen] = (0, react.useState)(false);
 	const [deleteChatInProgress, setDeleteChatInProgress] = (0, react.useState)(false);
@@ -950,7 +954,7 @@ var DeleteChatAction = () => {
 			addNotification({
 				context: { channel },
 				emitter: "ChannelManagementView",
-				message: t("Chat deleted"),
+				message: t("channelDetail.channelManagementActions.chatDeleted.text", "Chat deleted"),
 				severity: "success",
 				type: "api:channel:delete:success"
 			});
@@ -961,7 +965,7 @@ var DeleteChatAction = () => {
 				context: { channel },
 				emitter: "ChannelManagementView",
 				error: toError$1(error),
-				message: t("Error deleting chat"),
+				message: t("channelDetail.channelManagementActions.errorDeletingChat.text", "Error deleting chat"),
 				severity: "error",
 				type: "api:channel:delete:failed"
 			});
@@ -974,7 +978,7 @@ var DeleteChatAction = () => {
 		closeChannelDetail,
 		t
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.ListItemLayout, {
 		destructive: true,
 		LeadingIcon: DeleteChatActionIcon,
 		RootElement: "button",
@@ -983,20 +987,20 @@ var DeleteChatAction = () => {
 			disabled: deleteChatInProgress,
 			onClick: openDeleteChatAlert
 		}), [deleteChatInProgress, openDeleteChatAlert]),
-		title: t("Delete chat")
+		title: t("channelDetail.channelManagementActions.deleteChat.title", "Delete chat")
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Modal, {
 		open: alertOpen,
 		role: "alertdialog",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelManagementConfirmationAlert, {
 			action: "deleteChat",
-			cancelLabel: t("Cancel"),
-			confirmLabel: t("Delete chat"),
-			description: t("This permanently deletes your message history with {{ user }}. This can't be undone.", { user: userName }),
+			cancelLabel: t("common.cancel.label", "Cancel"),
+			confirmLabel: t("channelDetail.channelManagementActions.deleteChat.title", "Delete chat"),
+			description: t("channelDetail.channelManagementActions.permanentlyDeletesMessageHistory.description", "This permanently deletes your message history with {{ user }}. This can't be undone.", { user: userName }),
 			isSubmitting: deleteChatInProgress,
 			onCancel: closeDeleteChatAlert,
 			onConfirm: deleteChat,
 			testId: "channel-detail-delete-chat-alert",
-			title: t("Delete chat")
+			title: t("channelDetail.channelManagementActions.deleteChat.title", "Delete chat")
 		})
 	})] });
 };
@@ -1032,12 +1036,12 @@ var defaultChannelManagementActionSet = [
 //#endregion
 //#region src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx
 var ChannelManagementInfoBody = ({ actions }) => {
-	const { IconMute, IconPin } = require_NotificationList.useComponentContextIcons();
-	const { client } = require_NotificationList.useChatContext();
+	const { IconMute, IconPin } = require_useComponentContextIcons.useComponentContextIcons();
+	const { client } = require_useComponentContextIcons.useChatContext();
 	const { channel } = useChannelDetailContext();
-	const { Avatar = require_useChannelHeaderOnlineStatus.ChannelAvatar } = require_NotificationList.useComponentContext();
-	const { displayImage, displayTitle, groupChannelDisplayInfo } = require_useChannelHeaderOnlineStatus.useChannelPreviewInfo({ channel });
-	const resolvedIsDmChannel = require_useChannelHeaderOnlineStatus.isDmChannel({
+	const { Avatar = require_Thread.ChannelAvatar } = require_useComponentContextIcons.useComponentContext();
+	const { displayImage, displayTitle, groupChannelDisplayInfo } = require_Thread.useChannelPreviewInfo({ channel });
+	const resolvedIsDmChannel = require_ListItemLayout.isDmChannel({
 		channel,
 		ownUserId: client.user?.id
 	});
@@ -1049,13 +1053,13 @@ var ChannelManagementInfoBody = ({ actions }) => {
 		client.user?.id,
 		resolvedIsDmChannel
 	]);
-	const isOnline = require_useChannelHeaderOnlineStatus.useChannelHasMembersOnline({ channel });
-	const { muted: channelMuted } = require_useChannelHeaderOnlineStatus.useIsChannelMuted(channel);
-	const userMuted = require_useChannelHeaderOnlineStatus.useIsUserMuted(otherMemberUserId);
-	const membership = require_useChannelHeaderOnlineStatus.useChannelMembershipState(channel);
-	const onlineStatusText = require_useChannelHeaderOnlineStatus.useChannelHeaderOnlineStatus({ channel });
-	const pinned = !!membership.pinned_at;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_NotificationList.Prompt.Body, {
+	const isOnline = require_ListItemLayout.useChannelHasMembersOnline({ channel });
+	const { muted: channelMuted } = require_Thread.useIsChannelMuted(channel);
+	const userMuted = require_ListItemLayout.useIsUserMuted(otherMemberUserId);
+	const membership = require_Thread.useChannelMembershipState(channel);
+	const onlineStatusText = require_ListItemLayout.useChannelHeaderOnlineStatus();
+	const pinned = membership.pinned_at != null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ListItemLayout.Prompt.Body, {
 		className: "str-chat__channel-detail__channel-management-view__body",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "str-chat__channel-detail__channel-management-view__profile",
@@ -1094,10 +1098,10 @@ var EDIT_BODY_EMITTER = "ChannelManagementEditBody";
 var buildChannelUpdatePayload = ({ image, name }) => {
 	const payload = {};
 	const set = {};
-	if (name !== void 0) set.name = name;
-	if (typeof image === "string") set.image = image;
+	if (name !== void 0) set["custom.name"] = name;
+	if (typeof image === "string") set["custom.image"] = image;
 	if (Object.keys(set).length > 0) payload.set = set;
-	if (image === null) payload.unset = ["image"];
+	if (image === null) payload.unset = ["custom.image"];
 	return Object.keys(payload).length > 0 ? payload : null;
 };
 /**
@@ -1106,19 +1110,19 @@ var buildChannelUpdatePayload = ({ image, name }) => {
 * notify). The component is left to render the values this returns.
 */
 var useChannelManagementEditForm = ({ uploadImage }) => {
-	const { t } = require_NotificationList.useTranslationContext();
-	const { client } = require_NotificationList.useChatContext();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	const { client } = require_useComponentContextIcons.useChatContext();
 	const { channel } = useChannelDetailContext();
-	const { displayImage, displayTitle, groupChannelDisplayInfo } = require_useChannelHeaderOnlineStatus.useChannelPreviewInfo({ channel });
-	const { addNotification } = require_NotificationList.useNotificationApi();
-	const resolvedIsDmChannel = require_useChannelHeaderOnlineStatus.isDmChannel({
+	const { displayImage, displayTitle, groupChannelDisplayInfo } = require_Thread.useChannelPreviewInfo({ channel });
+	const { addNotification } = require_Thread.useNotificationApi();
+	const resolvedIsDmChannel = require_ListItemLayout.isDmChannel({
 		channel,
 		ownUserId: client.user?.id
 	});
-	const hasMembersOnline = require_useChannelHeaderOnlineStatus.useChannelHasMembersOnline({ channel });
+	const hasMembersOnline = require_ListItemLayout.useChannelHasMembersOnline({ channel });
 	const isOnline = resolvedIsDmChannel ? hasMembersOnline : void 0;
-	const nameLabel = resolvedIsDmChannel ? t("Contact name") : t("Group name");
-	const [baselineName, setBaselineName] = (0, react.useState)(channel.data?.name ?? "");
+	const nameLabel = resolvedIsDmChannel ? t("channelDetail.channelManagementView.contactName.label", "Contact name") : t("channelDetail.channelManagementView.groupName.label", "Group name");
+	const [baselineName, setBaselineName] = (0, react.useState)(channel.data?.custom?.name ?? "");
 	const [name, setName] = (0, react.useState)(baselineName);
 	const [imageEdit, setImageEdit] = (0, react.useState)(null);
 	const [isSaving, setIsSaving] = (0, react.useState)(false);
@@ -1144,7 +1148,7 @@ var useChannelManagementEditForm = ({ uploadImage }) => {
 	}, []);
 	const handleDeleteImage = (0, react.useCallback)(() => setImageEdit("removed"), []);
 	const resolveImageUrl = (0, react.useCallback)(async (file) => {
-		const url = uploadImage ? await uploadImage(file) : (await channel.sendImage(file)).file;
+		const url = uploadImage ? await uploadImage(file) : (await channel.uploadImage({ file })).file;
 		if (!url) throw new Error("Image upload did not return a URL");
 		return url;
 	}, [channel, uploadImage]);
@@ -1181,7 +1185,7 @@ var useChannelManagementEditForm = ({ uploadImage }) => {
 						operation: "update",
 						status: "success"
 					},
-					message: t("Changes saved"),
+					message: t("channelDetail.channelManagementView.changesSaved.text", "Changes saved"),
 					severity: "success"
 				});
 			} catch (error) {
@@ -1194,7 +1198,7 @@ var useChannelManagementEditForm = ({ uploadImage }) => {
 						operation: "update",
 						status: "failed"
 					},
-					message: t("Failed to save changes"),
+					message: t("channelDetail.channelManagementView.failedSaveChanges.text", "Failed to save changes"),
 					severity: "error"
 				});
 			} finally {
@@ -1222,13 +1226,13 @@ var useChannelManagementEditForm = ({ uploadImage }) => {
 	};
 };
 var ChannelManagementEditBody = (props) => {
-	const { IconCheckmark } = require_NotificationList.useComponentContextIcons();
-	const { Avatar = require_useChannelHeaderOnlineStatus.ChannelAvatar } = require_NotificationList.useComponentContext();
+	const { IconCheckmark } = require_useComponentContextIcons.useComponentContextIcons();
+	const { Avatar = require_Thread.ChannelAvatar } = require_useComponentContextIcons.useComponentContext();
 	const { canSubmit, displayTitle, fileInputRef, groupChannelDisplayInfo, handleDeleteImage, handleFileChange, handleOpenFilePicker, handleSubmit, hasAvatarImage, isOnline, name, nameLabel, previewImageUrl, setName, t, trimmedName } = useChannelManagementEditForm(props);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
 		className: "str-chat__channel-detail__channel-management-view__form",
 		onSubmit: handleSubmit,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_NotificationList.Prompt.Body, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ListItemLayout.Prompt.Body, {
 			className: "str-chat__channel-detail__channel-management-view__body",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "str-chat__channel-detail__channel-management-view__avatar-row",
@@ -1241,21 +1245,21 @@ var ChannelManagementEditBody = (props) => {
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "str-chat__channel-detail__channel-management-view__avatar-row__actions",
 					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useComponentContextIcons.Button, {
 							appearance: "outline",
 							onClick: handleOpenFilePicker,
 							size: "sm",
 							type: "button",
 							variant: "secondary",
-							children: t("Upload Picture")
+							children: t("channelDetail.channelManagementView.uploadPicture.text", "Upload Picture")
 						}),
-						hasAvatarImage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
+						hasAvatarImage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useComponentContextIcons.Button, {
 							appearance: "outline",
 							onClick: handleDeleteImage,
 							size: "sm",
 							type: "button",
 							variant: "secondary",
-							children: t("Delete")
+							children: t("common.delete.text", "Delete")
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 							accept: "image/*",
@@ -1268,7 +1272,7 @@ var ChannelManagementEditBody = (props) => {
 						})
 					]
 				})]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.TextInput, {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.TextInput, {
 				"aria-label": nameLabel,
 				autoFocus: true,
 				className: "str-chat__channel-detail__channel-management-view__name-input",
@@ -1277,22 +1281,22 @@ var ChannelManagementEditBody = (props) => {
 				placeholder: nameLabel,
 				value: name
 			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Prompt.Footer, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.Prompt.Footer, {
 			className: "str-chat__channel-detail__channel-management-view__footer",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Prompt.FooterControls, { children: canSubmit && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_NotificationList.Prompt.FooterControlsButtonPrimary, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.Prompt.FooterControls, { children: canSubmit && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ListItemLayout.Prompt.FooterControlsButtonPrimary, {
 				className: "str-chat__channel-detail__channel-management-view__footer__save-button",
 				type: "submit",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconCheckmark, {}), t("Save")]
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconCheckmark, {}), t("channelDetail.channelManagementView.save.text", "Save")]
 			}) })
 		})]
 	});
 };
 var ChannelManagementView = ({ channelManagementActionSet = defaultChannelManagementActionSet, EditModeComponent = ChannelManagementEditBody, uploadImage, ViewModeComponent = ChannelManagementInfoBody }) => {
-	const { t } = require_NotificationList.useTranslationContext();
-	const { client } = require_NotificationList.useChatContext();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	const { client } = require_useComponentContextIcons.useChatContext();
 	const { channel } = useChannelDetailContext();
-	const { close } = require_NotificationList.useModalContext();
-	const resolvedIsDmChannel = require_useChannelHeaderOnlineStatus.isDmChannel({
+	const { close } = require_ListItemLayout.useModalContext();
+	const resolvedIsDmChannel = require_ListItemLayout.isDmChannel({
 		channel,
 		ownUserId: client.user?.id
 	});
@@ -1302,26 +1306,26 @@ var ChannelManagementView = ({ channelManagementActionSet = defaultChannelManage
 	const isEditMode = isEditing && canEditChannel;
 	(0, react.useEffect)(() => {
 		setIsEditing(false);
-	}, [channel.cid]);
+	}, [channel]);
 	const EditChannelButton = (0, react.useMemo)(() => function EditChannelButton() {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useComponentContextIcons.Button, {
 			appearance: "outline",
-			"aria-label": t("Edit chat data"),
+			"aria-label": t("channelDetail.channelManagementView.editChatData.ariaLabel", "Edit chat data"),
 			className: "str-chat__channel-detail__channel-management-view__edit-button",
 			onClick: () => {
 				setIsEditing(true);
 			},
 			size: "md",
 			variant: "secondary",
-			children: t("Edit")
+			children: t("channelDetail.channelManagementView.edit.text", "Edit")
 		});
 	}, [t]);
-	const headerTitle = isEditMode ? resolvedIsDmChannel ? t("Edit contact") : t("Edit group") : resolvedIsDmChannel ? t("Contact info") : t("Group info");
+	const headerTitle = isEditMode ? resolvedIsDmChannel ? t("channelDetail.channelManagementView.editContact.label", "Edit contact") : t("channelDetail.channelManagementView.editGroup.label", "Edit group") : resolvedIsDmChannel ? t("channelDetail.channelManagementView.contactInfo.label", "Contact info") : t("channelDetail.channelManagementView.groupInfo.label", "Group info");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "str-chat__channel-detail__channel-management-view",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionNavigatorHeader, {
 			close,
-			description: isEditMode ? void 0 : t("Manage channel"),
+			description: isEditMode ? void 0 : t("channelDetail.channelManagementView.manageChannel.description", "Manage channel"),
 			goBack: isEditMode ? () => setIsEditing(false) : void 0,
 			title: headerTitle,
 			TrailingContent: !isEditMode && canEditChannel ? EditChannelButton : void 0
@@ -1331,18 +1335,18 @@ var ChannelManagementView = ({ channelManagementActionSet = defaultChannelManage
 //#endregion
 //#region src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.tsx
 var ChannelMediaEmptyList = () => {
-	const { IconImage } = require_NotificationList.useComponentContextIcons();
-	const { t } = require_NotificationList.useTranslationContext("ChannelMediaEmptyList");
+	const { IconImage } = require_useComponentContextIcons.useComponentContextIcons();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "str-chat__channel-detail__media-view__empty-state",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconImage, { className: "str-chat__channel-detail__media-view__empty-state__icon" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "str-chat__channel-detail__media-view__empty-state__content",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "str-chat__channel-detail__media-view__empty-state__title",
-				children: t("No photos or videos")
+				children: t("channelDetail.channelMediaEmpty.noPhotosVideos.text", "No photos or videos")
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "str-chat__channel-detail__media-view__empty-state__description",
-				children: t("Share a photo or video to see it here")
+				children: t("channelDetail.channelMediaEmpty.sharePhotoVideoSee.text", "Share a photo or video to see it here")
 			})]
 		})]
 	});
@@ -1351,7 +1355,7 @@ var ChannelMediaEmptyList = () => {
 //#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
@@ -1372,12 +1376,17 @@ var toChannelMediaItems = (messages) => {
 		message.attachments?.forEach((attachment, index) => {
 			const type = getMediaAttachmentType(attachment);
 			if (!type) return;
-			const descriptor = require_NotificationList.toBaseImageDescriptors(attachment);
+			const descriptor = require_ListItemLayout.toBaseImageDescriptors(attachment);
 			if (!descriptor) return;
 			if (!(type === "video" ? Boolean(descriptor.videoThumbnailUrl || descriptor.videoUrl) : Boolean(descriptor.imageUrl))) return;
+			const attachmentDuration = attachment.custom?.duration;
 			items.push({
-				durationSeconds: typeof attachment.duration === "number" ? attachment.duration : void 0,
-				galleryItem: descriptor,
+				durationSeconds: typeof attachmentDuration === "number" ? attachmentDuration : void 0,
+				galleryItem: {
+					...descriptor,
+					createdAt: (0, stream_chat.convertTimestampToDate)(message.created_at),
+					user: message.user ?? void 0
+				},
 				id: `${message.id}-${index}`,
 				type,
 				user: message.user ?? void 0
@@ -1395,7 +1404,7 @@ var channelMediaSearchSourceItemsStateSelector = (state) => ({
 	messages: state.items
 });
 var useChannelMediaSearch = () => {
-	const { client } = require_NotificationList.useChatContext();
+	const { client } = require_useComponentContextIcons.useChatContext();
 	const { channel } = useChannelDetailContext();
 	const channelMediaSearchSource = (0, react.useMemo)(() => {
 		const source = new stream_chat.MessageSearchSource(client, {
@@ -1407,7 +1416,7 @@ var useChannelMediaSearch = () => {
 		source.messageSearchFilters = { "attachments.type": { $in: [...MEDIA_ATTACHMENT_TYPES] } };
 		return source;
 	}, [channel.cid, client]);
-	const { hasNext, isLoading, messages } = require_NotificationList.useStateStore(channelMediaSearchSource.state, channelMediaSearchSourceItemsStateSelector);
+	const { hasNext, isLoading, messages } = require_useComponentContextIcons.useStateStore(channelMediaSearchSource.state, channelMediaSearchSourceItemsStateSelector);
 	const mediaItems = (0, react.useMemo)(() => toChannelMediaItems(messages ?? []), [messages]);
 	(0, react.useEffect)(() => {
 		channelMediaSearchSource.activate();
@@ -1428,14 +1437,14 @@ var useChannelMediaSearch = () => {
 //#region src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.tsx
 var DEFAULT_CHANNEL_MEDIA_ITEMS_PER_PAGE = 30;
 var ChannelMediaGridItem = ({ BaseImage, item, onClick }) => {
-	const { t } = require_NotificationList.useTranslationContext("ChannelMediaView");
-	const { Avatar: Avatar$4 = require_NotificationList.Avatar, extractDisplayInfo: extractDisplayInfo$4 = require_NotificationList.extractDisplayInfo } = require_NotificationList.useComponentContext();
-	const { IconImage, IconVideoFill } = require_NotificationList.useComponentContextIcons();
+	const { IconImage, IconVideoFill } = require_useComponentContextIcons.useComponentContextIcons();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	const { Avatar: Avatar$4 = require_Thread.Avatar, extractDisplayInfo: extractDisplayInfo$4 = require_Thread.extractDisplayInfo } = require_useComponentContextIcons.useComponentContext();
 	const displayName = getUserDisplayName(item.user);
 	const mediaSrc = item.type === "video" ? item.galleryItem.videoThumbnailUrl : item.galleryItem.imageUrl;
-	const durationLabel = require_NotificationList.formatTime(item.durationSeconds, "floor");
+	const durationLabel = require_ListItemLayout.formatTime(item.durationSeconds, "floor");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-		"aria-label": item.type === "video" ? t("aria/Open video shared by {{ name }}", { name: displayName }) : t("aria/Open image shared by {{ name }}", { name: displayName }),
+		"aria-label": item.type === "video" ? t("channelDetail.channelMediaView.openVideoShared.ariaLabel", "Open video shared by {{ name }}", { name: displayName }) : t("channelDetail.channelMediaView.openImageShared.ariaLabel", "Open image shared by {{ name }}", { name: displayName }),
 		className: "str-chat__channel-detail__media-view__item",
 		onClick,
 		type: "button",
@@ -1455,7 +1464,7 @@ var ChannelMediaGridItem = ({ BaseImage, item, onClick }) => {
 				className: "str-chat__channel-detail__media-view__item__avatar",
 				size: "sm"
 			}),
-			item.type === "video" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Badge, {
+			item.type === "video" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Thread.Badge, {
 				className: "str-chat__channel-detail__media-view__item__duration",
 				size: "sm",
 				variant: "inverse",
@@ -1465,35 +1474,35 @@ var ChannelMediaGridItem = ({ BaseImage, item, onClick }) => {
 	});
 };
 var ChannelMediaPagination = ({ nextDisabled, onNext, onPrevious, previousDisabled }) => {
-	const { t } = require_NotificationList.useTranslationContext("ChannelMediaView");
-	const { IconChevronLeft, IconChevronRight } = require_NotificationList.useComponentContextIcons();
+	const { IconChevronLeft, IconChevronRight } = require_useComponentContextIcons.useComponentContextIcons();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "str-chat__channel-detail__media-view__pagination",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_NotificationList.Button, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useComponentContextIcons.Button, {
 			appearance: "outline",
-			"aria-label": t("aria/Previous page"),
+			"aria-label": t("channelDetail.channelMediaView.previousPage.ariaLabel", "Previous page"),
 			className: "str-chat__channel-detail__media-view__pagination__button str-chat__channel-detail__media-view__pagination__button--previous",
 			disabled: previousDisabled,
 			onClick: onPrevious,
 			size: "md",
 			variant: "secondary",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconChevronLeft, {}), t("Previous")]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_NotificationList.Button, {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconChevronLeft, {}), t("channelDetail.channelMediaView.previous.text", "Previous")]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useComponentContextIcons.Button, {
 			appearance: "outline",
-			"aria-label": t("aria/Next page"),
+			"aria-label": t("channelDetail.channelMediaView.nextPage.ariaLabel", "Next page"),
 			className: "str-chat__channel-detail__media-view__pagination__button str-chat__channel-detail__media-view__pagination__button--next",
 			disabled: nextDisabled,
 			onClick: onNext,
 			size: "md",
 			variant: "secondary",
-			children: [t("Next"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconChevronRight, {})]
+			children: [t("channelDetail.channelMediaView.next.text", "Next"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconChevronRight, {})]
 		})]
 	});
 };
 var ChannelMediaView = ({ itemsPerPage = DEFAULT_CHANNEL_MEDIA_ITEMS_PER_PAGE }) => {
-	const { t } = require_NotificationList.useTranslationContext();
-	const { close } = require_NotificationList.useModalContext();
-	const { BaseImage: BaseImage$1 = require_NotificationList.BaseImage, Gallery: Gallery$1 = require_NotificationList.Gallery, Modal = require_NotificationList.GlobalModal } = require_NotificationList.useComponentContext();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	const { close } = require_ListItemLayout.useModalContext();
+	const { BaseImage: BaseImage$1 = require_ListItemLayout.BaseImage, Gallery: Gallery$1 = require_ListItemLayout.Gallery, Modal = require_ListItemLayout.GlobalModal } = require_useComponentContextIcons.useComponentContext();
 	const { channelMediaSearchSource, hasNext, hasResultsLoaded, isLoading, mediaItems } = useChannelMediaSearch();
 	const [viewerOpen, setViewerOpen] = (0, react.useState)(false);
 	const [selectedIndex, setSelectedIndex] = (0, react.useState)(0);
@@ -1571,9 +1580,9 @@ var ChannelMediaView = ({ itemsPerPage = DEFAULT_CHANNEL_MEDIA_ITEMS_PER_PAGE })
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionNavigatorHeader, {
 				close,
-				title: t("Photos & videos")
+				title: t("channelDetail.channelMediaView.photosVideos.title", "Photos & videos")
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Prompt.Body, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.Prompt.Body, {
 				className: "str-chat__channel-detail__media-view__body",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "str-chat__channel-detail__media-view__grid",
@@ -1605,7 +1614,7 @@ var ChannelMediaView = ({ itemsPerPage = DEFAULT_CHANNEL_MEDIA_ITEMS_PER_PAGE })
 				onClose: closeViewer,
 				open: viewerOpen,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Gallery$1, {
-					GalleryUI: require_NotificationList.GalleryUI,
+					GalleryUI: require_ListItemLayout.GalleryUI,
 					initialIndex: selectedIndex,
 					items: galleryItems,
 					onRequestClose: closeViewer
@@ -1635,30 +1644,30 @@ var useBaseChannelMembersHeaderActionSetFilter = (channelMembersHeaderActionSet)
 	]);
 };
 var AddMembersHeaderAction = ({ modeController }) => {
-	const { t } = require_NotificationList.useTranslationContext();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	if (modeController.mode !== "browse") return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useComponentContextIcons.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 } = require_NotificationList.useTranslationContext();
-	const { IconUserAdd } = require_NotificationList.useComponentContextIcons();
+	const { IconUserAdd } = require_useComponentContextIcons.useComponentContextIcons();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	if (modeController.mode !== "browse") return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ContextMenuButton, {
-		"aria-label": t("Add channel members"),
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Thread.ContextMenuButton, {
+		"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 = {
@@ -1671,28 +1680,28 @@ var defaultChannelMembersHeaderActionSet = [{
 	type: "addMembers"
 }];
 var DefaultHeaderActionsMenuTrigger = ({ referenceRef, ...props }) => {
-	const { t } = require_NotificationList.useTranslationContext();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useComponentContextIcons.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"}`;
 var DefaultHeaderActions = ({ headerActionSet, HeaderActionsMenuTrigger = DefaultHeaderActionsMenuTrigger, modeController }) => {
-	const { ContextMenu: ContextMenuComponent = require_NotificationList.ContextMenu } = require_NotificationList.useComponentContext();
+	const { ContextMenu: ContextMenuComponent = require_Thread.ContextMenu } = require_useComponentContextIcons.useComponentContext();
 	const { channel } = useChannelDetailContext();
 	const actions = useBaseChannelMembersHeaderActionSetFilter(headerActionSet);
 	const [referenceElement, setReferenceElement] = (0, react.useState)(null);
 	const dialogId = getHeaderActionsDialogId(channel.id);
-	const { dialog, dialogManager } = require_NotificationList.useDialogOnNearestManager({ id: dialogId });
+	const { dialog, dialogManager } = require_Thread.useDialogOnNearestManager({ id: dialogId });
 	const dialogManagerId = dialogManager?.id;
-	const dialogIsOpen = require_NotificationList.useDialogIsOpen(dialogId, dialogManagerId);
+	const dialogIsOpen = require_Thread.useDialogIsOpen(dialogId, dialogManagerId);
 	if (!actions.length) return null;
 	const quickActions = actions.filter((action) => action.placement === "quick");
 	const menuActions = actions.filter((action) => action.placement === "menu");
@@ -1777,8 +1786,8 @@ var useChannelMemberIds = (channel) => {
 //#endregion
 //#region src/plugins/ChannelDetail/ChannelDetailSearchInput.tsx
 var ChannelDetailSearchInput = react.default.memo(({ autoFocus, onSearchChange, resetKey }) => {
-	const { IconSearch } = require_NotificationList.useComponentContextIcons();
-	const { t } = require_NotificationList.useTranslationContext();
+	const { IconSearch } = require_useComponentContextIcons.useComponentContextIcons();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	const [searchInput, setSearchInput] = (0, react.useState)("");
 	(0, react.useEffect)(() => {
 		setSearchInput("");
@@ -1788,14 +1797,14 @@ var ChannelDetailSearchInput = react.default.memo(({ autoFocus, onSearchChange,
 		setSearchInput(value);
 		onSearchChange(value);
 	}, [onSearchChange]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.TextInput, {
-		"aria-label": t("Search"),
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.TextInput, {
+		"aria-label": t("common.search.ariaLabel", "Search"),
 		autoComplete: "off",
 		autoFocus,
 		className: "str-chat__channel-detail__search-input",
 		leading: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconSearch, {}),
 		onChange: handleSearchChange,
-		placeholder: t("Search"),
+		placeholder: t("common.search.ariaLabel", "Search"),
 		type: "search",
 		value: searchInput
 	});
@@ -1804,7 +1813,7 @@ ChannelDetailSearchInput.displayName = "ChannelDetailSearchInput";
 //#endregion
 //#region src/plugins/ChannelDetail/ChannelDetailEmptyList.tsx
 var ChannelDetailEmptyList = ({ children }) => {
-	const { IconSearch } = require_NotificationList.useComponentContextIcons();
+	const { IconSearch } = require_useComponentContextIcons.useComponentContextIcons();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "str-chat__channel-detail__channel-members-view__empty-state",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconSearch, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })]
@@ -1820,13 +1829,13 @@ var searchSourceItemsStateSelector = (state) => ({
 var EMPTY_USERS = [];
 var computeUserItemKey = (_, user) => user.id;
 var MuteIndicator = () => {
-	const { IconMute } = require_NotificationList.useComponentContextIcons();
+	const { IconMute } = require_useComponentContextIcons.useComponentContextIcons();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconMute, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute" });
 };
 var readOnlyRootProps = { className: "str-chat__channel-detail__channel-members-view__list-item" };
 var ChannelMembersAddViewItem = ({ canManageChannelMembers, isMember, isMuted, isSelected, toggleSelectedUser, user }) => {
-	const { t } = require_NotificationList.useTranslationContext();
-	const { Avatar: Avatar$3 = require_NotificationList.Avatar, extractDisplayInfo: extractDisplayInfo$3 = require_NotificationList.extractDisplayInfo } = require_NotificationList.useComponentContext();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	const { Avatar: Avatar$3 = require_Thread.Avatar, extractDisplayInfo: extractDisplayInfo$3 = require_Thread.extractDisplayInfo } = require_useComponentContextIcons.useComponentContext();
 	const displayName = getUserDisplayName(user);
 	const LeadingSlot = (0, react.useMemo)(() => function MemberAvatar() {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar$3, {
@@ -1840,7 +1849,7 @@ var ChannelMembersAddViewItem = ({ canManageChannelMembers, isMember, isMuted, i
 		user
 	]);
 	const SelectableTrailingSlot = (0, react.useMemo)(() => function SelectCheckbox() {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Checkbox, {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.Checkbox, {
 			"aria-hidden": true,
 			checked: isSelected
 		});
@@ -1854,27 +1863,27 @@ var ChannelMembersAddViewItem = ({ canManageChannelMembers, isMember, isMuted, i
 		toggleSelectedUser,
 		user.id
 	]);
-	if (canManageChannelMembers && !isMember) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
+	if (canManageChannelMembers && !isMember) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.ListItemLayout, {
 		LeadingSlot,
 		RootElement: "button",
 		rootProps: selectableRootProps,
 		title: displayName,
 		TrailingSlot: SelectableTrailingSlot
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.ListItemLayout, {
 		LeadingSlot,
 		rootProps: readOnlyRootProps,
-		subtitle: isMember ? t("Already a member") : void 0,
+		subtitle: isMember ? t("channelDetail.channelMembersAdd.alreadyMember.label", "Already a member") : void 0,
 		title: displayName,
 		TrailingSlot: isMuted ? MuteIndicator : void 0
 	});
 };
 var ChannelMembersAddView = ({ modeController, searchSource }) => {
-	const { client, mutes } = require_NotificationList.useChatContext();
-	const { t } = require_NotificationList.useTranslationContext();
+	const { client, mutes } = require_useComponentContextIcons.useChatContext();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	const { channel } = useChannelDetailContext();
 	const canManageChannelMembers = canUpdateChannelMembers(channel);
-	const { addNotification } = require_NotificationList.useNotificationApi();
+	const { addNotification } = require_Thread.useNotificationApi();
 	const memberUserIds = useChannelMemberIds(channel);
 	const memberIdSet = (0, react.useMemo)(() => new Set(memberUserIds), [memberUserIds]);
 	const userSearchSource = (0, react.useMemo)(() => searchSource ?? new stream_chat.UserSearchSource(client, {
@@ -1882,7 +1891,7 @@ var ChannelMembersAddView = ({ modeController, searchSource }) => {
 		pageSize: USER_SEARCH_PAGE_SIZE,
 		resetOnNewSearchQuery: false
 	}), [client, searchSource]);
-	const { isLoading, users } = require_NotificationList.useStateStore(userSearchSource.state, searchSourceItemsStateSelector);
+	const { isLoading, users } = require_useComponentContextIcons.useStateStore(userSearchSource.state, searchSourceItemsStateSelector);
 	const [isSaving, setIsSaving] = (0, react.useState)(false);
 	const [selectedUserIds, setSelectedUserIds] = (0, react.useState)([]);
 	(0, react.useEffect)(() => {
@@ -1891,7 +1900,7 @@ var ChannelMembersAddView = ({ modeController, searchSource }) => {
 		return () => userSearchSource.cancelScheduledQuery();
 	}, [userSearchSource]);
 	const selectedUserIdSet = (0, react.useMemo)(() => new Set(selectedUserIds), [selectedUserIds]);
-	const mutedUserIdSet = (0, react.useMemo)(() => new Set(mutes.map((mute) => mute.target.id)), [mutes]);
+	const mutedUserIdSet = (0, react.useMemo)(() => new Set(mutes.map((mute) => mute.target?.id)), [mutes]);
 	const handleSearchChange = (0, react.useCallback)((query) => {
 		userSearchSource.search(query);
 	}, [userSearchSource]);
@@ -1912,7 +1921,7 @@ var ChannelMembersAddView = ({ modeController, searchSource }) => {
 	]);
 	const EmptyPlaceholder = (0, react.useMemo)(() => function ChannelMembersAddEmptyPlaceholder() {
 		if (isLoading || !users) return null;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailEmptyList, { children: t("No user found") });
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailEmptyList, { children: t("channelDetail.channelMembersAdd.noUserFound.text", "No user found") });
 	}, [
 		isLoading,
 		t,
@@ -1929,7 +1938,11 @@ var ChannelMembersAddView = ({ modeController, searchSource }) => {
 			addNotification({
 				context: { channel },
 				emitter: "ChannelMembersView",
-				message: t("{{ count }} members added", { count: selectedUserIds.length }),
+				message: t("channelDetail.channelMembersAdd.membersAdded.text", {
+					count: selectedUserIds.length,
+					defaultValue_one: "{{ count }} member added",
+					defaultValue_other: "{{ count }} members added"
+				}),
 				severity: "success",
 				type: "api:channel:addMembers:success"
 			});
@@ -1942,13 +1955,13 @@ var ChannelMembersAddView = ({ modeController, searchSource }) => {
 				context: { channel },
 				emitter: "ChannelMembersView",
 				error,
-				message: t("Error adding members"),
+				message: t("channelDetail.channelMembersAdd.errorAddingMembers.text", "Error adding members"),
 				severity: "error",
 				type: "api:channel:addMembers:failed"
 			});
 		}
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_NotificationList.Prompt.Body, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ListItemLayout.Prompt.Body, {
 		className: "str-chat__channel-members-view__body",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailSearchInput, {
 			autoFocus: true,
@@ -1962,10 +1975,14 @@ var ChannelMembersAddView = ({ modeController, searchSource }) => {
 			itemContent: renderItem,
 			loadNext: userSearchSource.search
 		})]
-	}), canManageChannelMembers && selectedUserIds.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Prompt.Footer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Prompt.FooterControls, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Prompt.FooterControlsButtonPrimary, {
+	}), canManageChannelMembers && selectedUserIds.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.Prompt.Footer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.Prompt.FooterControls, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.Prompt.FooterControlsButtonPrimary, {
 		disabled: isSaving,
 		onClick: handleSave,
-		children: t("Add {{ count }} members", { count: selectedUserIds.length })
+		children: t("channelDetail.channelMembersAdd.addMembers.text", {
+			count: selectedUserIds.length,
+			defaultValue_one: "Add {{ count }} member",
+			defaultValue_other: "Add {{ count }} members"
+		})
 	}) }) })] });
 };
 //#endregion
@@ -2001,7 +2018,7 @@ var useChannelMembersSearch = () => {
 		pageSize: 100,
 		resetOnNewSearchQuery: false
 	}), [channel]);
-	const { members } = require_NotificationList.useStateStore(membersSearchSource.state, membersSearchSourceItemsStateSelector);
+	const { members } = require_useComponentContextIcons.useStateStore(membersSearchSource.state, membersSearchSourceItemsStateSelector);
 	const [searchInputResetKey, setSearchInputResetKey] = (0, react.useState)(0);
 	const resetMembersSearch = (0, react.useCallback)(() => {
 		membersSearchSource.cancelScheduledQuery();
@@ -2033,18 +2050,18 @@ var useChannelMembersSearch = () => {
 //#endregion
 //#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$1 = (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: (0, stream_chat.convertTimestampToDate)(user.last_active) }) });
+	return t("common.offline.label", "Offline");
 };
 var ChannelMembersBrowseViewItem = ({ isMuted, member, onMemberSelect }) => {
-	const { t } = require_NotificationList.useTranslationContext();
-	const { Avatar: Avatar$2 = require_NotificationList.Avatar, extractDisplayInfo: extractDisplayInfo$2 = require_NotificationList.extractDisplayInfo } = require_NotificationList.useComponentContext();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	const { Avatar: Avatar$2 = require_Thread.Avatar, extractDisplayInfo: extractDisplayInfo$2 = require_Thread.extractDisplayInfo } = require_useComponentContextIcons.useComponentContext();
 	const user = member.user;
 	const displayName = getMemberDisplayName(member);
 	const roleTranslation = getMemberRoleTranslation(member, t);
@@ -2060,7 +2077,7 @@ var ChannelMembersBrowseViewItem = ({ isMuted, member, onMemberSelect }) => {
 		user
 	]);
 	const TrailingSlot = (0, react.useMemo)(() => function MemberTrailingSlot() {
-		const { IconMute } = require_NotificationList.useComponentContextIcons();
+		const { IconMute } = require_useComponentContextIcons.useComponentContextIcons();
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "str-chat__channel-detail__channel-members-view__list-item__trailing-slot",
 			children: [roleTranslation ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -2069,11 +2086,11 @@ var ChannelMembersBrowseViewItem = ({ isMuted, member, onMemberSelect }) => {
 			}) : null, isMuted ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(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" }) : null]
 		});
 	}, [isMuted, roleTranslation]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.ListItemLayout, {
 		LeadingSlot,
 		RootElement: "button",
 		rootProps: (0, react.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)
 		}), [
@@ -2089,10 +2106,10 @@ var ChannelMembersBrowseViewItem = ({ isMuted, member, onMemberSelect }) => {
 };
 var computeMemberItemKey = (_, member) => getMemberUserId(member);
 var ChannelMembersBrowseView = ({ onMemberSelect }) => {
-	const { mutes } = require_NotificationList.useChatContext();
-	const { t } = require_NotificationList.useTranslationContext();
+	const { mutes } = require_useComponentContextIcons.useChatContext();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	const { displayedMembers, handleSearchChange, hasMembers, membersSearchSource, searchInputResetKey } = useChannelMembersSearch();
-	const mutedUserIdSet = (0, react.useMemo)(() => new Set(mutes.map((mute) => mute.target.id)), [mutes]);
+	const mutedUserIdSet = (0, react.useMemo)(() => new Set(mutes.map((mute) => mute.target?.id)), [mutes]);
 	const renderableMembers = (0, react.useMemo)(() => displayedMembers.filter((member) => getMemberUserId(member)), [displayedMembers]);
 	const renderItem = (0, react.useCallback)((_, member) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelMembersBrowseViewItem, {
 		isMuted: mutedUserIdSet.has(getMemberUserId(member)),
@@ -2100,12 +2117,12 @@ var ChannelMembersBrowseView = ({ onMemberSelect }) => {
 		onMemberSelect
 	}), [mutedUserIdSet, onMemberSelect]);
 	const EmptyPlaceholder = (0, react.useMemo)(() => function ChannelMembersEmptyPlaceholder() {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailEmptyList, { children: t("No member found") });
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailEmptyList, { children: t("channelDetail.channelMembersBrowse.noMemberFound.text", "No member found") });
 	}, [t]);
 	const Footer = (0, react.useMemo)(() => function ChannelMembersListFooter() {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailListLoadingIndicator, { searchSource: membersSearchSource });
 	}, [membersSearchSource]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_NotificationList.Prompt.Body, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ListItemLayout.Prompt.Body, {
 		className: "str-chat__channel-members-view__body",
 		children: [hasMembers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailSearchInput, {
 			onSearchChange: handleSearchChange,
@@ -2135,34 +2152,34 @@ var useChannelMemberActionContext = () => {
 };
 var toError = (error) => error instanceof Error ? error : /* @__PURE__ */ new Error("An unknown error occurred");
 var MemberMuteActionIcon = () => {
-	const { IconMute } = require_NotificationList.useComponentContextIcons();
+	const { IconMute } = require_useComponentContextIcons.useComponentContextIcons();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconMute, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute" });
 };
 var MemberUnmuteActionIcon = () => {
-	const { IconAudio } = require_NotificationList.useComponentContextIcons();
+	const { IconAudio } = require_useComponentContextIcons.useComponentContextIcons();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconAudio, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--unmute" });
 };
 var SendDirectMessageActionIcon = () => {
-	const { IconMessageBubble } = require_NotificationList.useComponentContextIcons();
+	const { IconMessageBubble } = require_useComponentContextIcons.useComponentContextIcons();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconMessageBubble, { className: "str-chat__channel-detail__action-icon" });
 };
 var BlockUserActionIcon = () => {
-	const { IconNoSign } = require_NotificationList.useComponentContextIcons();
+	const { IconNoSign } = require_useComponentContextIcons.useComponentContextIcons();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconNoSign, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--block-user" });
 };
 var RemoveUserActionIcon = () => {
-	const { IconUserRemove } = require_NotificationList.useComponentContextIcons();
+	const { IconUserRemove } = require_useComponentContextIcons.useComponentContextIcons();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconUserRemove, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--remove-user" });
 };
 var channelMemberDetailActionClassName = "str-chat__channel-member-detail-action";
 var blockedUsersSelector = ({ userIds }) => ({ userIds });
-var ChannelMemberConfirmationAlert = ({ action, cancelLabel, confirmLabel, description, isSubmitting, onCancel, onConfirm, testId, title }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Alert.Root, {
+var ChannelMemberConfirmationAlert = ({ action, cancelLabel, confirmLabel, description, isSubmitting, onCancel, onConfirm, testId, title }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ListItemLayout.Alert.Root, {
 	className: (0, clsx.default)("str-chat__channel-member-confirmation-alert", { [`str-chat__channel-member-confirmation-alert--${action}`]: action }),
 	"data-testid": testId,
-	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Alert.Header, {
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.Alert.Header, {
 		description,
 		title
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Alert.Actions, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ListItemLayout.Alert.Actions, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useComponentContextIcons.Button, {
 		appearance: "solid",
 		"data-testid": `${testId}-confirm-button`,
 		disabled: isSubmitting,
@@ -2170,7 +2187,7 @@ var ChannelMemberConfirmationAlert = ({ action, cancelLabel, confirmLabel, descr
 		size: "md",
 		variant: "danger",
 		children: confirmLabel
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useComponentContextIcons.Button, {
 		appearance: "outline",
 		autoFocus: true,
 		"data-testid": `${testId}-cancel-button`,
@@ -2182,7 +2199,7 @@ var ChannelMemberConfirmationAlert = ({ action, cancelLabel, confirmLabel, descr
 	})] })]
 });
 var useChannelMemberActionFilterState = () => {
-	const { client } = require_NotificationList.useChatContext();
+	const { client } = require_useComponentContextIcons.useChatContext();
 	const { channel } = useChannelDetailContext();
 	const { targetUserId } = useChannelMemberActionContext();
 	const ownCapabilities = channel.data?.own_capabilities;
@@ -2213,29 +2230,33 @@ var useBaseChannelMemberActionSetFilter = (channelMemberActionSet) => {
 	]);
 };
 var SendDirectMessageAction = () => {
-	const { client, setActiveChannel } = require_NotificationList.useChatContext();
-	const { setChannels } = require_NotificationList.useChannelListContext();
-	const { close } = require_NotificationList.useModalContext();
+	const { channelManager, client } = require_useComponentContextIcons.useChatContext();
+	const { open } = require_SlotLayout.useChatViewNavigation();
+	const { close } = require_ListItemLayout.useModalContext();
 	const { channel } = useChannelDetailContext();
-	const { addNotification } = require_NotificationList.useNotificationApi();
-	const { t } = require_NotificationList.useTranslationContext();
+	const { addNotification } = require_Thread.useNotificationApi();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	const { targetUserId } = useChannelMemberActionContext();
 	const [isSending, setIsSending] = (0, react.useState)(false);
 	const openDirectMessage = (0, react.useCallback)(async () => {
 		if (!client.userID || !targetUserId || isSending) return;
 		setIsSending(true);
 		try {
-			const directMessageChannel = client.channel(channel.type, { members: [client.userID, targetUserId] });
+			const directMessageChannel = client.channel(channel.type, { members: [client.userID, targetUserId].map((user_id) => ({ user_id })) });
 			await directMessageChannel.watch();
-			setActiveChannel(directMessageChannel);
-			setChannels?.((channels) => (0, lodash_uniqby.default)([directMessageChannel, ...channels], "cid"));
+			open({
+				key: directMessageChannel.cid ?? void 0,
+				kind: "channel",
+				source: directMessageChannel
+			});
+			channelManager.ingestChannel(directMessageChannel);
 			close();
 		} catch (error) {
 			addNotification({
 				context: { channel },
 				emitter: "ChannelMemberDetail",
 				error: toError(error),
-				message: t("Error opening direct message"),
+				message: t("channelDetail.channelMemberActions.errorOpeningDirectMessage.text", "Error opening direct message"),
 				severity: "error",
 				type: "api:channel:watch:failed"
 			});
@@ -2247,13 +2268,13 @@ var SendDirectMessageAction = () => {
 		channel,
 		client,
 		close,
+		channelManager,
 		isSending,
-		setActiveChannel,
-		setChannels,
+		open,
 		t,
 		targetUserId
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.ListItemLayout, {
 		LeadingIcon: SendDirectMessageActionIcon,
 		RootElement: "button",
 		rootProps: (0, react.useMemo)(() => ({
@@ -2261,26 +2282,26 @@ var SendDirectMessageAction = () => {
 			disabled: isSending,
 			onClick: openDirectMessage
 		}), [isSending, openDirectMessage]),
-		title: t("Send direct message")
+		title: t("channelDetail.channelMemberActions.sendDirectMessage.title", "Send direct message")
 	});
 };
 var UserMuteAction = () => {
 	const { channel } = useChannelDetailContext();
-	const { client, mutes } = require_NotificationList.useChatContext();
-	const { addNotification } = require_NotificationList.useNotificationApi();
-	const { t } = require_NotificationList.useTranslationContext();
+	const { client, mutes } = require_useComponentContextIcons.useChatContext();
+	const { addNotification } = require_Thread.useNotificationApi();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	const { targetUserId } = useChannelMemberActionContext();
-	const userMuted = !!targetUserId && mutes.some((mute) => mute.target.id === targetUserId);
+	const userMuted = !!targetUserId && mutes.some((mute) => mute.target?.id === targetUserId);
 	const [optimisticUserMuted, setOptimisticUserMuted] = (0, react.useState)(userMuted);
 	(0, react.useEffect)(() => {
 		setOptimisticUserMuted(userMuted);
 	}, [userMuted]);
-	const toggleUserMuteRequest = require_useChannelHeaderOnlineStatus.useStableCallback((nextMuted, userId) => {
+	const toggleUserMuteRequest = require_Thread.useStableCallback((nextMuted, userId) => {
 		if (!userId) return;
-		if (!nextMuted) return client.unmuteUser(userId).then(() => addNotification({
+		if (!nextMuted) return client.moderation.unmute({ target_ids: [userId] }).then(() => addNotification({
 			context: { channel },
 			emitter: "ChannelMemberDetail",
-			message: t("User unmuted"),
+			message: t("channelDetail.channelManagementActions.userUnmuted.text", "User unmuted"),
 			severity: "success",
 			type: "api:user:unmute:success"
 		})).catch((error) => {
@@ -2289,15 +2310,15 @@ var UserMuteAction = () => {
 				context: { channel },
 				emitter: "ChannelMemberDetail",
 				error: toError(error),
-				message: t("Error unmuting user"),
+				message: t("channelDetail.channelManagementActions.errorUnmutingUser.text", "Error unmuting user"),
 				severity: "error",
 				type: "api:user:unmute:failed"
 			});
 		});
-		return client.muteUser(userId).then(() => addNotification({
+		return client.moderation.mute({ target_ids: [userId] }).then(() => addNotification({
 			context: { channel },
 			emitter: "ChannelMemberDetail",
-			message: t("User muted"),
+			message: t("channelDetail.channelManagementActions.userMuted.text", "User muted"),
 			severity: "success",
 			type: "api:user:mute:success"
 		})).catch((error) => {
@@ -2306,7 +2327,7 @@ var UserMuteAction = () => {
 				context: { channel },
 				emitter: "ChannelMemberDetail",
 				error: toError(error),
-				message: t("Error muting user"),
+				message: t("channelDetail.channelManagementActions.errorMutingUser.text", "Error muting user"),
 				severity: "error",
 				type: "api:user:mute:failed"
 			});
@@ -2332,29 +2353,29 @@ var UserMuteAction = () => {
 	}), [optimisticUserMuted, toggleOptimisticUserMute]);
 	const TrailingSlot = (0, react.useMemo)(() => {
 		function UserMuteSwitch() {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Switch, {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.Switch, {
 				on: optimisticUserMuted,
 				presentation: true
 			});
 		}
 		return UserMuteSwitch;
 	}, [optimisticUserMuted]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.ListItemLayout, {
 		LeadingIcon: optimisticUserMuted ? MemberUnmuteActionIcon : MemberMuteActionIcon,
 		RootElement: "button",
 		rootProps,
-		title: optimisticUserMuted ? t("Unmute user") : t("Mute user"),
+		title: optimisticUserMuted ? t("channelDetail.channelManagementActions.unmuteUser.title", "Unmute user") : t("channelDetail.channelManagementActions.muteUser.title", "Mute user"),
 		TrailingSlot
 	});
 };
 var BlockUserAction = () => {
-	const { client } = require_NotificationList.useChatContext();
-	const { Modal = require_NotificationList.GlobalModal } = require_NotificationList.useComponentContext();
+	const { client } = require_useComponentContextIcons.useChatContext();
+	const { Modal = require_ListItemLayout.GlobalModal } = require_useComponentContextIcons.useComponentContext();
 	const { channel } = useChannelDetailContext();
-	const { addNotification } = require_NotificationList.useNotificationApi();
-	const { t } = require_NotificationList.useTranslationContext();
+	const { addNotification } = require_Thread.useNotificationApi();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	const { memberDisplayName, targetUserId } = useChannelMemberActionContext();
-	const { userIds: blockedUserIds } = require_NotificationList.useStateStore(client.blockedUsers, blockedUsersSelector);
+	const { userIds: blockedUserIds } = require_useComponentContextIcons.useStateStore(client.blockedUsers, blockedUsersSelector);
 	const isBlocked = !!targetUserId && new Set(blockedUserIds).has(targetUserId);
 	const [alertOpen, setAlertOpen] = (0, react.useState)(false);
 	const [userBlockInProgress, setUserBlockInProgress] = (0, react.useState)(false);
@@ -2368,11 +2389,11 @@ var BlockUserAction = () => {
 		if (!targetUserId) return;
 		try {
 			setUserBlockInProgress(true);
-			await client.unBlockUser(targetUserId);
+			await client.unblockUser(targetUserId);
 			addNotification({
 				context: { channel },
 				emitter: "ChannelMemberDetail",
-				message: t("User unblocked"),
+				message: t("common.userUnblocked.text", "User unblocked"),
 				severity: "success",
 				type: "api:user:unblock:success"
 			});
@@ -2381,7 +2402,7 @@ var BlockUserAction = () => {
 				context: { channel },
 				emitter: "ChannelMemberDetail",
 				error: toError(error),
-				message: t("Error unblocking user"),
+				message: t("channelDetail.channelManagementActions.errorUnblockingUser.text", "Error unblocking user"),
 				severity: "error",
 				type: "api:user:unblock:failed"
 			});
@@ -2404,7 +2425,7 @@ var BlockUserAction = () => {
 			addNotification({
 				context: { channel },
 				emitter: "ChannelMemberDetail",
-				message: t("User blocked"),
+				message: t("common.userBlocked.text", "User blocked"),
 				severity: "success",
 				type: "api:user:block:success"
 			});
@@ -2413,7 +2434,7 @@ var BlockUserAction = () => {
 				context: { channel },
 				emitter: "ChannelMemberDetail",
 				error: toError(error),
-				message: t("Error blocking user"),
+				message: t("channelDetail.channelManagementActions.errorBlockingUser.text", "Error blocking user"),
 				severity: "error",
 				type: "api:user:block:failed"
 			});
@@ -2428,7 +2449,7 @@ var BlockUserAction = () => {
 		t,
 		targetUserId
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.ListItemLayout, {
 		destructive: true,
 		LeadingIcon: BlockUserActionIcon,
 		RootElement: "button",
@@ -2437,28 +2458,28 @@ var BlockUserAction = () => {
 			disabled: userBlockInProgress,
 			onClick: openBlockUserAlert
 		}), [openBlockUserAlert, userBlockInProgress]),
-		title: isBlocked ? t("Unblock user") : t("Block user")
+		title: isBlocked ? t("channelDetail.channelMemberActions.unblockUser.title", "Unblock user") : t("channelDetail.channelManagementActions.blockUser.title", "Block user")
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Modal, {
 		open: alertOpen,
 		role: "alertdialog",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelMemberConfirmationAlert, {
 			action: "blockUser",
-			cancelLabel: t("Cancel"),
-			confirmLabel: isBlocked ? t("Unblock user") : t("Block user"),
-			description: isBlocked ? t("{{ member }} will be able to message you again.", { member: memberDisplayName }) : t("{{ member }} won't be able to message you anymore.", { member: memberDisplayName }),
+			cancelLabel: t("common.cancel.label", "Cancel"),
+			confirmLabel: isBlocked ? t("channelDetail.channelMemberActions.unblockUser.title", "Unblock user") : t("channelDetail.channelManagementActions.blockUser.title", "Block user"),
+			description: isBlocked ? t("channelDetail.channelMemberActions.ableMessageAgain.description", "{{ member }} will be able to message you again.", { member: memberDisplayName }) : t("channelDetail.channelMemberActions.wonTAbleMessage.description", "{{ member }} won't be able to message you anymore.", { member: memberDisplayName }),
 			isSubmitting: userBlockInProgress,
 			onCancel: closeBlockUserAlert,
 			onConfirm: isBlocked ? unblockUser : blockUser,
 			testId: "channel-detail-block-member-alert",
-			title: isBlocked ? t("Unblock user") : t("Block user")
+			title: isBlocked ? t("channelDetail.channelMemberActions.unblockUser.title", "Unblock user") : t("channelDetail.channelManagementActions.blockUser.title", "Block user")
 		})
 	})] });
 };
 var RemoveUserAction = () => {
-	const { Modal = require_NotificationList.GlobalModal } = require_NotificationList.useComponentContext();
+	const { Modal = require_ListItemLayout.GlobalModal } = require_useComponentContextIcons.useComponentContext();
 	const { channel } = useChannelDetailContext();
-	const { addNotification } = require_NotificationList.useNotificationApi();
-	const { t } = require_NotificationList.useTranslationContext();
+	const { addNotification } = require_Thread.useNotificationApi();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	const { memberDisplayName, targetUserId } = useChannelMemberActionContext();
 	const [alertOpen, setAlertOpen] = (0, react.useState)(false);
 	const [removeMemberInProgress, setRemoveMemberInProgress] = (0, react.useState)(false);
@@ -2476,7 +2497,7 @@ var RemoveUserAction = () => {
 			addNotification({
 				context: { channel },
 				emitter: "ChannelMemberDetail",
-				message: t("User removed"),
+				message: t("channelDetail.channelMemberActions.userRemoved.text", "User removed"),
 				severity: "success",
 				type: "api:channel:remove-members:success"
 			});
@@ -2486,7 +2507,7 @@ var RemoveUserAction = () => {
 				context: { channel },
 				emitter: "ChannelMemberDetail",
 				error: toError(error),
-				message: t("Error removing user"),
+				message: t("channelDetail.channelMemberActions.errorRemovingUser.text", "Error removing user"),
 				severity: "error",
 				type: "api:channel:remove-members:failed"
 			});
@@ -2499,7 +2520,7 @@ var RemoveUserAction = () => {
 		t,
 		targetUserId
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.ListItemLayout, {
 		destructive: true,
 		LeadingIcon: RemoveUserActionIcon,
 		RootElement: "button",
@@ -2508,20 +2529,20 @@ var RemoveUserAction = () => {
 			disabled: removeMemberInProgress,
 			onClick: openRemoveUserAlert
 		}), [openRemoveUserAlert, removeMemberInProgress]),
-		title: t("Remove user")
+		title: t("channelDetail.channelMemberActions.removeUser.title", "Remove user")
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Modal, {
 		open: alertOpen,
 		role: "alertdialog",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelMemberConfirmationAlert, {
 			action: "removeUser",
-			cancelLabel: t("Cancel"),
-			confirmLabel: t("Remove user"),
-			description: t("Remove {{ member }} from this channel?", { member: memberDisplayName }),
+			cancelLabel: t("common.cancel.label", "Cancel"),
+			confirmLabel: t("channelDetail.channelMemberActions.removeUser.title", "Remove user"),
+			description: t("channelDetail.channelMemberActions.removeChannel.description", "Remove {{ member }} from this channel?", { member: memberDisplayName }),
 			isSubmitting: removeMemberInProgress,
 			onCancel: closeRemoveUserAlert,
 			onConfirm: removeUser,
 			testId: "channel-detail-remove-member-alert",
-			title: t("Remove user")
+			title: t("channelDetail.channelMemberActions.removeUser.title", "Remove user")
 		})
 	})] });
 };
@@ -2552,12 +2573,12 @@ var defaultChannelMemberActionSet = [
 //#endregion
 //#region src/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberDetail.tsx
 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: (0, stream_chat.convertTimestampToDate)(user.last_active) }) });
+	return t("common.offline.label", "Offline");
 };
 var ChannelMemberDetail = ({ channelMemberActionSet = defaultChannelMemberActionSet, member, onBack }) => {
-	const { t } = require_NotificationList.useTranslationContext();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	const memberDisplayName = getMemberDisplayName(member);
 	const memberStatusText = getPresenceStatusText(member.user, t);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelMemberActionProvider, {
@@ -2575,9 +2596,9 @@ var ChannelMemberDetail = ({ channelMemberActionSet = defaultChannelMemberAction
 	});
 };
 var ChannelMemberDetailContent = ({ channelMemberActionSet, memberDisplayName, memberStatusText, onBack }) => {
-	const { close } = require_NotificationList.useModalContext();
-	const { t } = require_NotificationList.useTranslationContext();
-	const { Avatar = require_useChannelHeaderOnlineStatus.ChannelAvatar } = require_NotificationList.useComponentContext();
+	const { close } = require_ListItemLayout.useModalContext();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	const { Avatar = require_Thread.ChannelAvatar } = require_useComponentContextIcons.useComponentContext();
 	const { member } = useChannelMemberActionContext();
 	const filteredActions = useBaseChannelMemberActionSetFilter(channelMemberActionSet);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2585,8 +2606,8 @@ var ChannelMemberDetailContent = ({ channelMemberActionSet, memberDisplayName, m
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionNavigatorHeader, {
 			close,
 			goBack: onBack,
-			title: t("Member detail")
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_NotificationList.Prompt.Body, {
+			title: t("channelDetail.channelMemberDetail.memberDetail.title", "Member detail")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ListItemLayout.Prompt.Body, {
 			className: "str-chat__channel-detail__channel-member-detail-view__body",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "str-chat__channel-detail__channel-member-detail-view__profile",
@@ -2617,8 +2638,8 @@ var ChannelMemberDetailContent = ({ channelMemberActionSet, memberDisplayName, m
 var RESERVED_MODES = ["browse", "memberDetail"];
 var isReservedMode = (mode) => RESERVED_MODES.includes(mode);
 var AddMembersModeTitle = () => {
-	const { t } = require_NotificationList.useTranslationContext();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: t("Add members") });
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: t("channelDetail.channelMembersView.addMembers.label", "Add members") });
 };
 /** Built-in mode descriptors. Merged with (and overridable by) the `modeViews` prop. */
 var defaultChannelMembersModeViews = { add: {
@@ -2626,9 +2647,9 @@ var defaultChannelMembersModeViews = { add: {
 	Title: AddMembersModeTitle
 } };
 var ChannelMembersView = ({ HeaderActions = DefaultHeaderActions, headerActionSet = defaultChannelMembersHeaderActionSet, HeaderActionsMenuTrigger, layout, modeViews: customModeViews }) => {
-	const { t } = require_NotificationList.useTranslationContext();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	const { channel } = useChannelDetailContext();
-	const { close } = require_NotificationList.useModalContext();
+	const { close } = require_ListItemLayout.useModalContext();
 	const [mode, setMode] = (0, react.useState)("browse");
 	const [selectedMember, setSelectedMember] = (0, react.useState)();
 	const memberCount = useChannelMemberCount(channel);
@@ -2679,9 +2700,13 @@ var ChannelMembersView = ({ HeaderActions = DefaultHeaderActions, headerActionSe
 		className: "str-chat__channel-detail__channel-members-view",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(ActiveModeTitle, {}) : t("{{ count }} members", { count: memberCount }),
+			title: ActiveModeTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActiveModeTitle, {}) : t("channelDetail.channelMembersView.members.title", {
+				count: memberCount,
+				defaultValue_one: "{{ count }} member",
+				defaultValue_other: "{{ count }} members"
+			}),
 			TrailingContent: HeaderTrailingActions
 		}), ActiveModeBody ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActiveModeBody, { modeController }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelMembersBrowseView, { onMemberSelect: (member) => {
 			setSelectedMember(member);
@@ -2692,41 +2717,33 @@ var ChannelMembersView = ({ HeaderActions = DefaultHeaderActions, headerActionSe
 //#endregion
 //#region src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx
 var PinnedMessagesEmptyList = () => {
-	const { IconPin } = require_NotificationList.useComponentContextIcons();
-	const { t } = require_NotificationList.useTranslationContext();
+	const { IconPin } = require_useComponentContextIcons.useComponentContextIcons();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "str-chat__channel-detail__pinned-messages-view__empty-state",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconPin, { className: "str-chat__channel-detail__pinned-messages-view__empty-state__icon" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "str-chat__channel-detail__pinned-messages-view__empty-state__content",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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")
 			})]
 		})]
 	});
 };
 //#endregion
 //#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] = (0, react.useState)(() => getPinnedMessagesCount(channel));
-	(0, react.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 } = require_useComponentContextIcons.useStateStore(channel.pinnedMessagesPaginator.state, selector);
+	return count;
 };
 //#endregion
 //#region src/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesSearch.ts
@@ -2734,7 +2751,7 @@ var PINNED_MESSAGES_SEARCH_PAGE_SIZE = 30;
 var PINNED_MESSAGES_SEARCH_DEBOUNCE_MS = 300;
 var pinnedMessagesSearchSourceItemsStateSelector = (state) => ({ messages: state.items });
 var usePinnedMessagesSearch = ({ searchSource } = {}) => {
-	const { client } = require_NotificationList.useChatContext();
+	const { client } = require_useComponentContextIcons.useChatContext();
 	const { channel } = useChannelDetailContext();
 	const pinnedMessagesSearchSource = (0, react.useMemo)(() => {
 		const source = searchSource ?? new stream_chat.MessageSearchSource(client, {
@@ -2756,7 +2773,7 @@ var usePinnedMessagesSearch = ({ searchSource } = {}) => {
 		client,
 		searchSource
 	]);
-	const { messages } = require_NotificationList.useStateStore(pinnedMessagesSearchSource.state, pinnedMessagesSearchSourceItemsStateSelector);
+	const { messages } = require_useComponentContextIcons.useStateStore(pinnedMessagesSearchSource.state, pinnedMessagesSearchSourceItemsStateSelector);
 	(0, react.useEffect)(() => {
 		pinnedMessagesSearchSource.activate();
 		return () => {
@@ -2790,24 +2807,25 @@ var usePinnedMessagesSearch = ({ searchSource } = {}) => {
 //#endregion
 //#region src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesView.tsx
 var computeItemKey = (_, message) => message.id;
-var normalizeTimestamp = (timestamp) => {
-	if (!timestamp) return void 0;
-	return require_NotificationList.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 : (0, stream_chat.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 } = require_NotificationList.useTranslationContext("PinnedMessageDate");
+	const { t, tDateTimeParser } = require_useComponentContextIcons.useTranslationContext();
 	const normalizedTimestamp = normalizeTimestamp(message.created_at);
-	const when = (0, react.useMemo)(() => require_NotificationList.getDateString({
+	const when = (0, react.useMemo)(() => (0, _stream_io_i18n.getDateString)({
 		messageCreatedAt: normalizedTimestamp,
 		t,
 		tDateTimeParser,
-		timestampTranslationKey: "timestamp/ChannelDetailPinnedMessageTimestamp"
+		timestampTranslationKey: "timestamp.ChannelDetailPinnedMessageTimestamp"
 	}), [
 		normalizedTimestamp,
 		t,
@@ -2821,8 +2839,8 @@ var PinnedMessageDate = ({ message }) => {
 	});
 };
 var PinnedMessagesViewItem = ({ message, onSelect }) => {
-	const { t } = require_NotificationList.useTranslationContext();
-	const { Avatar: Avatar$1 = require_NotificationList.Avatar, extractDisplayInfo: extractDisplayInfo$1 = require_NotificationList.extractDisplayInfo } = require_NotificationList.useComponentContext();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	const { Avatar: Avatar$1 = require_Thread.Avatar, extractDisplayInfo: extractDisplayInfo$1 = require_Thread.extractDisplayInfo } = require_useComponentContextIcons.useComponentContext();
 	const displayName = getUserDisplayName(message.user ?? void 0);
 	const LeadingSlot = (0, react.useMemo)(() => function MessageAuthorAvatar() {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar$1, {
@@ -2837,7 +2855,7 @@ var PinnedMessagesViewItem = ({ message, onSelect }) => {
 	const TrailingSlot = (0, react.useMemo)(() => function MessageDate() {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PinnedMessageDate, { message });
 	}, [message]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.ListItemLayout, {
 		LeadingSlot,
 		RootElement: "button",
 		rootProps: (0, react.useMemo)(() => ({
@@ -2851,21 +2869,23 @@ var PinnedMessagesViewItem = ({ message, onSelect }) => {
 	});
 };
 var PinnedMessagesView = ({ searchSource }) => {
-	const { setActiveChannel } = require_NotificationList.useChatContext();
-	const { t } = require_NotificationList.useTranslationContext();
-	const { close } = require_NotificationList.useModalContext();
-	const { jumpToMessage } = require_NotificationList.useChannelActionContext();
+	const { open } = require_SlotLayout.useChatViewNavigation();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	const { close } = require_ListItemLayout.useModalContext();
 	const { channel } = useChannelDetailContext();
 	const { displayedMessages, handleSearchChange, hasPinnedMessages, hasSearchResultsLoaded, pinnedMessagesSearchSource } = usePinnedMessagesSearch({ searchSource });
 	const handleSelectMessage = (0, react.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 = (0, react.useCallback)((_, message) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PinnedMessagesViewItem, {
 		message,
@@ -2873,7 +2893,7 @@ var PinnedMessagesView = ({ searchSource }) => {
 	}), [handleSelectMessage]);
 	const EmptyPlaceholder = (0, react.useMemo)(() => function PinnedMessagesEmptyPlaceholder() {
 		if (!hasPinnedMessages) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PinnedMessagesEmptyList, {});
-		if (hasSearchResultsLoaded) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailEmptyList, { children: t("No messages found") });
+		if (hasSearchResultsLoaded) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailEmptyList, { children: t("channelDetail.pinnedMessagesView.noMessagesFound.text", "No messages found") });
 		return null;
 	}, [
 		hasPinnedMessages,
@@ -2887,9 +2907,9 @@ var PinnedMessagesView = ({ searchSource }) => {
 		className: "str-chat__channel-detail__pinned-messages-view",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionNavigatorHeader, {
 			close,
-			description: t("Browse pinned messages"),
-			title: t("Pinned messages")
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_NotificationList.Prompt.Body, {
+			description: t("channelDetail.pinnedMessagesView.browsePinnedMessages.description", "Browse pinned messages"),
+			title: t("channelDetail.pinnedMessagesView.pinnedMessages.title", "Pinned messages")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ListItemLayout.Prompt.Body, {
 			className: "str-chat__channel-detail__pinned-messages-view__body",
 			children: [hasPinnedMessages && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailSearchInput, { onSearchChange: handleSearchChange }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VirtualizedList, {
 				className: "str-chat__channel-detail__pinned-messages-view__list",
@@ -2906,23 +2926,23 @@ var PinnedMessagesView = ({ searchSource }) => {
 //#endregion
 //#region src/plugins/ChannelDetail/ChannelDetail.tsx
 var ChannelManagementNavButtonIcon = () => {
-	const { IconInfo } = require_NotificationList.useComponentContextIcons();
+	const { IconInfo } = require_useComponentContextIcons.useComponentContextIcons();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconInfo, { className: "str-chat__channel-detail__action-icon" });
 };
 var ChannelMembersNavButtonIcon = () => {
-	const { IconUser } = require_NotificationList.useComponentContextIcons();
+	const { IconUser } = require_useComponentContextIcons.useComponentContextIcons();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconUser, { className: "str-chat__channel-detail__action-icon" });
 };
 var PinnedMessagesNavButtonIcon = () => {
-	const { IconPin } = require_NotificationList.useComponentContextIcons();
+	const { IconPin } = require_useComponentContextIcons.useComponentContextIcons();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconPin, { className: "str-chat__channel-detail__action-icon" });
 };
 var ChannelMediaNavButtonIcon = () => {
-	const { IconImage } = require_NotificationList.useComponentContextIcons();
+	const { IconImage } = require_useComponentContextIcons.useComponentContextIcons();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconImage, { className: "str-chat__channel-detail__action-icon" });
 };
 var ChannelFilesNavButtonIcon = () => {
-	const { IconFolder } = require_NotificationList.useComponentContextIcons();
+	const { IconFolder } = require_useComponentContextIcons.useComponentContextIcons();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconFolder, { className: "str-chat__channel-detail__action-icon" });
 };
 var ChannelManagementNavButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailNavButton, {
@@ -2981,7 +3001,7 @@ var ChannelDetail = ({ channel, className, defaultLayout = SECTION_NAVIGATOR_LAY
 	const [layout, setLayout] = (0, react.useState)(defaultLayout);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailProvider, {
 		channel,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Prompt.Root, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListItemLayout.Prompt.Root, {
 			className: (0, clsx.default)("str-chat__channel-detail", { "str-chat__channel-detail--inline": layout === SECTION_NAVIGATOR_LAYOUT.inline }, className),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionNavigator, {
 				...props,
@@ -2996,15 +3016,15 @@ var ChannelDetail = ({ channel, className, defaultLayout = SECTION_NAVIGATOR_LAY
 //#region src/plugins/ChannelDetail/AvatarWithChannelDetail.tsx
 var avatarWithChannelDetailDialogRootProps = { className: "str-chat__channel-detail-modal" };
 var AvatarWithChannelDetail = ({ Avatar, ChannelDetail: ChannelDetail$1 = ChannelDetail, className, ...avatarProps }) => {
-	const { t } = require_NotificationList.useTranslationContext();
-	const { channel } = require_NotificationList.useChannelStateContext();
-	const { Avatar: ContextAvatar, Modal = require_NotificationList.GlobalModal } = require_NotificationList.useComponentContext();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	const channel = require_useChannel.useChannel();
+	const { Avatar: ContextAvatar, Modal = require_ListItemLayout.GlobalModal } = require_useComponentContextIcons.useComponentContext();
 	const [isModalOpen, setIsModalOpen] = (0, react.useState)(false);
 	const openModal = (0, react.useCallback)(() => setIsModalOpen(true), []);
 	const closeModal = (0, react.useCallback)(() => setIsModalOpen(false), []);
-	const AvatarComponent = Avatar ?? (ContextAvatar === AvatarWithChannelDetail ? void 0 : ContextAvatar) ?? require_useChannelHeaderOnlineStatus.ChannelAvatar;
+	const AvatarComponent = Avatar ?? (ContextAvatar === AvatarWithChannelDetail ? void 0 : ContextAvatar) ?? require_Thread.ChannelAvatar;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		"aria-label": t("aria/Open channel details"),
+		"aria-label": t("channelDetail.avatarChannelDetail.openChannelDetails.ariaLabel", "Open channel details"),
 		className: "str-chat__avatar-with-channel-detail-button",
 		onClick: openModal,
 		type: "button",
@@ -3013,7 +3033,7 @@ var AvatarWithChannelDetail = ({ Avatar, ChannelDetail: ChannelDetail$1 = Channe
 			className: (0, clsx.default)("str-chat__avatar-with-channel-detail-button__avatar", className)
 		})
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Modal, {
-		"aria-label": t("aria/Channel details"),
+		"aria-label": t("channelDetail.avatarChannelDetail.channelDetails.ariaLabel", "Channel details"),
 		dialogRootProps: avatarWithChannelDetailDialogRootProps,
 		onClose: closeModal,
 		open: isModalOpen,