stream-chat-react-native-core 9.3.1 → 9.4.0-beta.10

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

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+
+import type { UserResponse } from 'stream-chat';
+
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { getDateString } from '../../../utils/i18n/getDateString';
+
+/**
+ * Returns the localized presence status string for a user:
+ *   - `t('Online')` when `user.online === true`
+ *   - `t('timestamp/UserActivityStatus')` (e.g. "Last seen 10 minutes ago") when offline
+ *     with a valid `last_active`
+ *   - `t('Offline')` otherwise (including `user === undefined` or an unparseable date)
+ *
+ * The relative time is produced through the shared `getDateString` + translation-key
+ * pipeline used by message timestamps, so the format follows the configured locale.
+ * @experimental This hook is experimental and is subject to change.
+ */
+export const useUserActivityStatus = (user?: UserResponse): string => {
+  const { t, tDateTimeParser } = useTranslationContext();
+
+  return useMemo(() => {
+    if (user?.online) return t('Online');
+
+    if (user?.last_active) {
+      const lastSeen = getDateString({
+        date: user.last_active,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey: 'timestamp/UserActivityStatus',
+      });
+      if (typeof lastSeen === 'string') {
+        return lastSeen;
+      }
+    }
+
+    return t('Offline');
+  }, [t, tDateTimeParser, user?.last_active, user?.online]);
+};

package/src/components/ChannelDetails/index.ts

@@ -0,0 +1,3 @@
+export * from './ChannelDetails';
+export * from './components';
+export * from './hooks';

package/src/components/ChannelList/ChannelList.tsx

@@ -41,6 +41,7 @@ export type ChannelListProps = Partial<
     | 'maxUnreadCount'
     | 'numberOfSkeletons'
     | 'mutedStatusPosition'
+    | 'pinnedStatusPosition'
   >
 > & {
   /** Optional function to filter channels prior to rendering the list. Do not use any complex logic that would delay the loading of the ChannelList. We recommend using a pure function with array methods like filter/sort/reduce. */
@@ -252,6 +253,7 @@ export const ChannelList = (props: ChannelListProps) => {
     queryChannelsOverride,
     notificationHostId: notificationHostIdProp,
     mutedStatusPosition = 'inlineTitle',
+    pinnedStatusPosition = 'inlineTitle',
     swipeActionsEnabled = true,
   } = props;
 
@@ -375,6 +377,7 @@ export const ChannelList = (props: ChannelListProps) => {
       }
     },
     mutedStatusPosition,
+    pinnedStatusPosition,
   });
 
   return (

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

@@ -1,11 +1,5 @@
 export * from './listeners/useChannelUpdated';
-export * from './useChannelActionItems';
-export * from './useChannelActionItemsById';
-export * from './useChannelActions';
-export * from './useChannelMembershipState';
 export * from './useChannelMembersState';
-export * from './useChannelMuteActive';
 export * from './useChannelOnlineMemberCount';
-export * from './useIsDirectChat';
 export * from './useMutedChannels';
 export * from './useMutedUsers';

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

@@ -23,6 +23,7 @@ export const useCreateChannelsContext = ({
   reloadList,
   setFlatListRef,
   mutedStatusPosition,
+  pinnedStatusPosition,
 }: ChannelsContextValue) => {
   const channelValueString = channels
     ?.map(
@@ -56,6 +57,7 @@ export const useCreateChannelsContext = ({
       reloadList,
       setFlatListRef,
       mutedStatusPosition,
+      pinnedStatusPosition,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
@@ -69,6 +71,7 @@ export const useCreateChannelsContext = ({
       swipeActionsEnabled,
       refreshing,
       mutedStatusPosition,
+      pinnedStatusPosition,
     ],
   );
 

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

@@ -1,13 +1,19 @@
 import { Channel, EventTypes, Mute, StreamChat } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts';
-import { useSyncClientEventsToChannel } from '../../../hooks/useSyncClientEvents';
+import { useSyncClientEvents } from '../../../hooks/useSyncClientEvents';
 
-const selector = (_channel: Channel, client: StreamChat) => client.mutedUsers;
+const selector = (client: StreamChat) => client.mutedUsers;
 const keys: EventTypes[] = ['health.check', 'notification.mutes_updated'];
-export function useMutedUsers(channel: Channel): Array<Mute>;
-export function useMutedUsers(channel?: Channel): Array<Mute> | undefined;
-export function useMutedUsers(channel?: Channel) {
+
+export function useMutedUsers(): Array<Mute>;
+/**
+ *
+ * @param @deprecated _channel - This parameter is deprecated because it is no longer necessary. It is kept for backwards compatibility only.
+ * @returns
+ */
+export function useMutedUsers(_channel: Channel): Array<Mute> | undefined;
+export function useMutedUsers(_channel?: Channel): Array<Mute> {
   const { client } = useChatContext();
-  return useSyncClientEventsToChannel({ channel, client, selector, stateChangeEventKeys: keys });
+  return useSyncClientEvents({ client, selector, stateChangeEventKeys: keys });
 }

package/src/components/ChannelPreview/ChannelDetailsBottomSheet.tsx

@@ -8,20 +8,19 @@ import type { Channel } from 'stream-chat';
 
 import { ChannelPreviewMutedStatus } from './ChannelPreviewMutedStatus';
 import { ChannelPreviewTitle } from './ChannelPreviewTitle';
-import { useIsChannelMuted } from './hooks/useIsChannelMuted';
 
 import { useBottomSheetContext } from '../../contexts/bottomSheetContext/BottomSheetContext';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import type { ChannelActionItem } from '../../hooks/actions/useChannelActionItems';
+import { useChannelMuteActive } from '../../hooks/useChannelMuteActive';
+import { useIsDirectChat } from '../../hooks/useIsDirectChat';
 import { useStableCallback } from '../../hooks/useStableCallback';
 import { primitives } from '../../theme';
-import type { ChannelActionItem } from '../ChannelList/hooks/useChannelActionItems';
 import { useChannelMembersState } from '../ChannelList/hooks/useChannelMembersState';
-import { useChannelMuteActive } from '../ChannelList/hooks/useChannelMuteActive';
 import { useChannelOnlineMemberCount } from '../ChannelList/hooks/useChannelOnlineMemberCount';
-import { useIsDirectChat } from '../ChannelList/hooks/useIsDirectChat';
 import { ChannelAvatar } from '../ui/Avatar/ChannelAvatar';
 import { StreamBottomSheetModalFlatList } from '../UIComponents/StreamBottomSheetModalFlatList';
 
@@ -40,9 +39,7 @@ export const ChannelDetailsHeader = ({ channel }: ChannelDetailsHeaderProps) =>
   const memberCount = useMemo(() => Object.keys(members).length, [members]);
   const onlineCount = useChannelOnlineMemberCount(channel);
   const isDirectChat = useIsDirectChat(channel);
-  const { muted: channelMuted } = useIsChannelMuted(channel);
-  const directChatUserMuted = useChannelMuteActive(channel);
-  const muted = isDirectChat ? directChatUserMuted : channelMuted;
+  const muted = useChannelMuteActive(channel);
   const displayedMemberCount = memberCount > 9 ? '9+' : `${memberCount}`;
   const displayedOnlineCount = onlineCount > 9 ? '9+' : `${onlineCount}`;
   const membersAndOnlineLabel = useMemo(

package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx

@@ -107,7 +107,7 @@ const useStyles = () => {
     theme: {
       semantics,
       channelPreview: {
-        messageDeliveryStatus: { container, text },
+        messageDeliveryStatus: { container, text, username },
       },
     },
   } = useTheme();
@@ -132,7 +132,8 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightNormal,
+        ...username,
       },
     });
-  }, [semantics, text, container]);
+  }, [semantics, text, username, container]);
 };

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -30,19 +30,37 @@ export const ChannelPreview = (props: ChannelPreviewProps) => {
 
   const client = propClient || contextClient;
 
-  const { muted, unread, lastMessage } = useChannelPreviewData(channel, client, propForceUpdate);
+  const { muted, pinned, unread, lastMessage } = useChannelPreviewData(
+    channel,
+    client,
+    propForceUpdate,
+  );
 
   const translatedLastMessage = useTranslatedMessage(lastMessage);
 
   const message = translatedLastMessage ? translatedLastMessage : lastMessage;
 
   if (!swipeActionsEnabled) {
-    return <ChannelPreview channel={channel} muted={muted} unread={unread} lastMessage={message} />;
+    return (
+      <ChannelPreview
+        channel={channel}
+        muted={muted}
+        pinned={pinned}
+        unread={unread}
+        lastMessage={message}
+      />
+    );
   }
 
   return (
     <ChannelSwipableWrapper channel={channel} getChannelActionItems={getChannelActionItems}>
-      <ChannelPreview channel={channel} muted={muted} unread={unread} lastMessage={message} />
+      <ChannelPreview
+        channel={channel}
+        muted={muted}
+        pinned={pinned}
+        unread={unread}
+        lastMessage={message}
+      />
     </ChannelSwipableWrapper>
   );
 };

package/src/components/ChannelPreview/ChannelPreviewPinnedStatus.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Pin } from '../../icons';
+import { CompositeAccessibilityProbe } from '../Accessibility/CompositeAccessibilityProbe';
+
+/**
+ * This UI component displays a pinned indicator for a particular channel.
+ */
+export const ChannelPreviewPinnedStatus = () => {
+  const {
+    theme: {
+      channelPreview: { pinnedStatus },
+      semantics,
+    },
+  } = useTheme();
+  const accessibilityLabel = useA11yLabel('a11y/Pinned');
+
+  return (
+    <CompositeAccessibilityProbe label={accessibilityLabel}>
+      <Pin height={20} stroke={semantics.textTertiary} width={20} {...pinnedStatus} />
+    </CompositeAccessibilityProbe>
+  );
+};

package/src/components/ChannelPreview/ChannelPreviewView.tsx

@@ -17,7 +17,10 @@ import { useStableCallback } from '../../hooks';
 import { primitives } from '../../theme';
 
 export type ChannelPreviewViewPropsWithContext = Pick<ChannelPreviewProps, 'channel'> &
-  Pick<ChannelsContextValue, 'maxUnreadCount' | 'onSelect' | 'mutedStatusPosition'> & {
+  Pick<
+    ChannelsContextValue,
+    'maxUnreadCount' | 'onSelect' | 'mutedStatusPosition' | 'pinnedStatusPosition'
+  > & {
     /**
      * Formatter function for date of latest message.
      * @param date Message date
@@ -30,6 +33,8 @@ export type ChannelPreviewViewPropsWithContext = Pick<ChannelPreviewProps, 'chan
     formatLatestMessageDate?: (date: Date) => string;
     /** If the channel is muted. */
     muted?: boolean;
+    /** If the channel is pinned for the current user. */
+    pinned?: boolean;
     /** Number of unread messages on the channel */
     unread?: number;
     lastMessage?: LastMessageType;
@@ -42,14 +47,17 @@ const ChannelPreviewViewWithContext = (props: ChannelPreviewViewPropsWithContext
     maxUnreadCount,
     muted,
     onSelect,
+    pinned,
     unread,
     mutedStatusPosition,
+    pinnedStatusPosition,
     lastMessage,
   } = props;
   const {
     ChannelPreviewAvatar,
     ChannelPreviewMessage,
     ChannelPreviewMutedStatus,
+    ChannelPreviewPinnedStatus,
     ChannelPreviewStatus,
     ChannelPreviewTitle,
     ChannelPreviewUnreadCount,
@@ -111,6 +119,9 @@ const ChannelPreviewViewWithContext = (props: ChannelPreviewViewPropsWithContext
               {muted && mutedStatusPosition === 'inlineTitle' ? (
                 <ChannelPreviewMutedStatus />
               ) : null}
+              {pinned && pinnedStatusPosition === 'inlineTitle' ? (
+                <ChannelPreviewPinnedStatus />
+              ) : null}
             </View>
 
             <View style={[styles.statusContainer, statusContainer]}>
@@ -132,6 +143,9 @@ const ChannelPreviewViewWithContext = (props: ChannelPreviewViewPropsWithContext
             {muted && mutedStatusPosition === 'trailingBottom' ? (
               <ChannelPreviewMutedStatus />
             ) : null}
+            {pinned && pinnedStatusPosition === 'trailingBottom' ? (
+              <ChannelPreviewPinnedStatus />
+            ) : null}
           </View>
         </View>
       </Pressable>
@@ -151,7 +165,8 @@ const MemoizedChannelPreviewViewWithContext = React.memo(
  * from the ChannelPreview component.
  */
 export const ChannelPreviewView = (props: ChannelPreviewViewProps) => {
-  const { forceUpdate, maxUnreadCount, onSelect, mutedStatusPosition } = useChannelsContext();
+  const { forceUpdate, maxUnreadCount, onSelect, mutedStatusPosition, pinnedStatusPosition } =
+    useChannelsContext();
   return (
     <MemoizedChannelPreviewViewWithContext
       {...{
@@ -159,6 +174,7 @@ export const ChannelPreviewView = (props: ChannelPreviewViewProps) => {
         maxUnreadCount,
         onSelect,
         mutedStatusPosition,
+        pinnedStatusPosition,
       }}
       {...props}
     />

package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx

@@ -1,19 +1,19 @@
 import React, { PropsWithChildren, useCallback, useMemo, useState } from 'react';
-import { StyleSheet } from 'react-native';
+import { type ColorValue, StyleSheet } from 'react-native';
 
 import type { SharedValue } from 'react-native-reanimated';
 
 import type { Channel } from 'stream-chat';
 
-import { useIsChannelMuted } from './hooks/useIsChannelMuted';
-
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { MenuPointHorizontal, Mute, Sound } from '../../icons';
-import type { GetChannelActionItems } from '../ChannelList/hooks/useChannelActionItems';
-import { useChannelActionItems } from '../ChannelList/hooks/useChannelActionItems';
-import { useChannelActions } from '../ChannelList/hooks/useChannelActions';
+import type {
+  ChannelActionItem,
+  GetChannelActionItems,
+} from '../../hooks/actions/useChannelActionItems';
+import { useChannelActionItems } from '../../hooks/actions/useChannelActionItems';
+import { MenuPointHorizontal } from '../../icons';
 import { BottomSheetModal } from '../UIComponents/BottomSheetModal';
 import {
   RightActions,
@@ -41,12 +41,19 @@ export const ChannelSwipableWrapper = ({
 }>) => {
   const { ChannelDetailsBottomSheet: ChannelDetailsBottomSheetComponent } = useComponentsContext();
   const [channelDetailSheetOpen, setChannelDetailSheetOpen] = useState(false);
-  const { muteChannel, unmuteChannel } = useChannelActions(channel);
-  const channelActionItems = useChannelActionItems({ channel, getChannelActionItems });
+  const channelActionItems = useChannelActionItems({
+    channel,
+    getChannelActionItems,
+    surface: 'list',
+  });
   const sheetItems = useMemo(
     () => channelActionItems.filter((item) => item.placement !== 'swipe'),
     [channelActionItems],
   );
+  const swipeItems = useMemo(
+    () => channelActionItems.filter((item) => item.placement !== 'sheet'),
+    [channelActionItems],
+  );
   const swipableRegistry = useSwipeRegistryContext();
 
   const {
@@ -54,19 +61,6 @@ export const ChannelSwipableWrapper = ({
   } = useTheme();
   const styles = useStyles();
 
-  const channelMuteState = useIsChannelMuted(channel);
-  const channelMuteActive = channelMuteState.muted;
-
-  const Icon = useCallback(
-    () =>
-      channelMuteActive ? (
-        <Sound width={20} height={20} stroke={semantics.textOnAccent} />
-      ) : (
-        <Mute width={20} height={20} fill={semantics.textOnAccent} />
-      ),
-    [channelMuteActive, semantics.textOnAccent],
-  );
-
   const swipableActions = useMemo<SwipableActionItem[]>(() => {
     const items: SwipableActionItem[] = [
       {
@@ -77,15 +71,16 @@ export const ChannelSwipableWrapper = ({
       },
     ];
 
-    items.push({
-      id: 'mute',
-      action: () => {
-        const action = channelMuteActive ? unmuteChannel : muteChannel;
-        action();
-        swipableRegistry?.closeAll();
-      },
-      Content: Icon,
-      contentContainerStyle: [styles.contentContainerStyle, styles.standard],
+    swipeItems.forEach((item) => {
+      items.push({
+        id: item.id,
+        action: () => {
+          item.action();
+          swipableRegistry?.closeAll();
+        },
+        Content: createSwipeContent(item, semantics.textOnAccent),
+        contentContainerStyle: [styles.contentContainerStyle, styles.standard],
+      });
     });
 
     return items;
@@ -93,11 +88,9 @@ export const ChannelSwipableWrapper = ({
     styles.contentContainerStyle,
     styles.elipsis,
     styles.standard,
-    channelMuteActive,
-    muteChannel,
-    unmuteChannel,
-    Icon,
+    swipeItems,
     swipableRegistry,
+    semantics.textOnAccent,
   ]);
 
   const renderRightActions = useCallback(
@@ -129,6 +122,11 @@ export const ChannelSwipableWrapper = ({
   );
 };
 
+const createSwipeContent = (item: ChannelActionItem, color: ColorValue) => {
+  const SwipeContent = () => <item.Icon fill={color} stroke={color} />;
+  return SwipeContent;
+};
+
 const useStyles = () => {
   const {
     theme: { semantics },

package/src/components/ChannelPreview/__tests__/ChannelDetailsBottomSheet.test.tsx

@@ -6,7 +6,7 @@ import type { Channel } from 'stream-chat';
 
 import { ThemeProvider, defaultTheme } from '../../../contexts';
 import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
-import type { ChannelActionItem } from '../../ChannelList/hooks/useChannelActionItems';
+import type { ChannelActionItem } from '../../../hooks/actions/useChannelActionItems';
 import { StreamBottomSheetModalFlatList } from '../../UIComponents/StreamBottomSheetModalFlatList';
 import type { ChannelDetailsHeaderProps } from '../ChannelDetailsBottomSheet';
 import { ChannelDetailsBottomSheet } from '../ChannelDetailsBottomSheet';

package/src/components/ChannelPreview/__tests__/ChannelSwipableWrapper.test.tsx

@@ -5,12 +5,10 @@ import { act, render } from '@testing-library/react-native';
 import type { Channel } from 'stream-chat';
 
 import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
-import type { ChannelActionItem } from '../../ChannelList/hooks/useChannelActionItems';
-import * as ChannelActionItemsModule from '../../ChannelList/hooks/useChannelActionItems';
-import * as ChannelActionsModule from '../../ChannelList/hooks/useChannelActions';
+import type { ChannelActionItem } from '../../../hooks/actions/useChannelActionItems';
+import * as ChannelActionItemsModule from '../../../hooks/actions/useChannelActionItems';
 import { SwipableWrapper } from '../../UIComponents/SwipableWrapper';
 import { ChannelSwipableWrapper } from '../ChannelSwipableWrapper';
-import * as UseIsChannelMutedModule from '../hooks/useIsChannelMuted';
 
 const rightActionsProbe = {
   items: [] as Array<{ action: () => void; id: string }>,
@@ -73,49 +71,30 @@ describe('ChannelSwipableWrapper', () => {
     rightActionsProbe.items = [];
   });
 
-  it('uses channel mute for direct-channel swipe actions and keeps mute user in the sheet', () => {
-    const muteChannel = jest.fn();
-    const unmuteChannel = jest.fn();
+  it('renders the swipe mute action from useChannelActionItems and keeps muteUser in the sheet', () => {
     const customBottomSheet = jest.fn(() => null);
-    const items: ChannelActionItem[] = [
-      {
-        Icon: () => null,
-        action: jest.fn(),
-        id: 'mute',
-        label: 'Mute User',
-        placement: 'sheet',
-        type: 'standard',
-      },
-      {
-        Icon: () => null,
-        action: jest.fn(),
-        id: 'archive',
-        label: 'Archive Chat',
-        placement: 'sheet',
-        type: 'standard',
-      },
-    ];
-
-    jest.spyOn(ChannelActionsModule, 'useChannelActions').mockReturnValue({
-      archive: jest.fn(),
-      blockUser: jest.fn(),
-      deleteChannel: jest.fn(),
-      leave: jest.fn(),
-      muteChannel,
-      muteUser: jest.fn(),
-      pin: jest.fn(),
-      unarchive: jest.fn(),
-      unblockUser: jest.fn(),
-      unmuteChannel,
-      unmuteUser: jest.fn(),
-      unpin: jest.fn(),
-    });
-    jest.spyOn(ChannelActionItemsModule, 'useChannelActionItems').mockReturnValue(items);
-    jest.spyOn(UseIsChannelMutedModule, 'useIsChannelMuted').mockReturnValue({
-      createdAt: null,
-      expiresAt: null,
-      muted: false,
-    });
+    const muteAction = jest.fn();
+    const muteUserAction = jest.fn();
+    const muteItem: ChannelActionItem = {
+      Icon: () => null,
+      action: muteAction,
+      id: 'mute',
+      label: 'Mute Chat',
+      placement: 'swipe',
+      type: 'standard',
+    };
+    const muteUserItem: ChannelActionItem = {
+      Icon: () => null,
+      action: muteUserAction,
+      id: 'muteUser',
+      label: 'Mute User',
+      placement: 'sheet',
+      type: 'standard',
+    };
+
+    jest
+      .spyOn(ChannelActionItemsModule, 'useChannelActionItems')
+      .mockReturnValue([muteItem, muteUserItem]);
 
     render(
       <WithComponents overrides={{ ChannelDetailsBottomSheet: customBottomSheet }}>
@@ -128,7 +107,7 @@ describe('ChannelSwipableWrapper', () => {
     expect(customBottomSheet).toHaveBeenCalledWith(
       expect.objectContaining({
         channel,
-        items,
+        items: [muteUserItem],
       }),
       undefined,
     );
@@ -138,52 +117,34 @@ describe('ChannelSwipableWrapper', () => {
       rightActionsProbe.items[1].action();
     });
 
-    expect(muteChannel).toHaveBeenCalledTimes(1);
-    expect(unmuteChannel).not.toHaveBeenCalled();
+    expect(muteAction).toHaveBeenCalledTimes(1);
+    expect(muteUserAction).not.toHaveBeenCalled();
   });
 
-  it('removes mute group from the sheet while keeping mute as the quick swipe action', () => {
-    const muteChannel = jest.fn();
+  it('removes swipe-only items from the sheet and keeps both-placed items in both surfaces', () => {
     const customBottomSheet = jest.fn(() => null);
-    const muteItem = {
+    const muteAction = jest.fn();
+    const archiveAction = jest.fn();
+    const muteItem: ChannelActionItem = {
       Icon: () => null,
-      action: jest.fn(),
+      action: muteAction,
       id: 'mute',
       label: 'Mute Group',
       placement: 'swipe',
       type: 'standard',
-    } as const satisfies ChannelActionItem;
-    const archiveItem = {
+    };
+    const archiveItem: ChannelActionItem = {
       Icon: () => null,
-      action: jest.fn(),
+      action: archiveAction,
       id: 'archive',
       label: 'Archive Group',
       placement: 'both',
       type: 'standard',
-    } as const satisfies ChannelActionItem;
-
-    jest.spyOn(ChannelActionsModule, 'useChannelActions').mockReturnValue({
-      archive: jest.fn(),
-      blockUser: jest.fn(),
-      deleteChannel: jest.fn(),
-      leave: jest.fn(),
-      muteChannel,
-      muteUser: jest.fn(),
-      pin: jest.fn(),
-      unarchive: jest.fn(),
-      unblockUser: jest.fn(),
-      unmuteChannel: jest.fn(),
-      unmuteUser: jest.fn(),
-      unpin: jest.fn(),
-    });
+    };
+
     jest
       .spyOn(ChannelActionItemsModule, 'useChannelActionItems')
       .mockReturnValue([muteItem, archiveItem]);
-    jest.spyOn(UseIsChannelMutedModule, 'useIsChannelMuted').mockReturnValue({
-      createdAt: null,
-      expiresAt: null,
-      muted: false,
-    });
 
     render(
       <WithComponents overrides={{ ChannelDetailsBottomSheet: customBottomSheet }}>
@@ -200,12 +161,16 @@ describe('ChannelSwipableWrapper', () => {
       }),
       undefined,
     );
-    expect(rightActionsProbe.items.map((item) => item.id)).toEqual(['openSheet', 'mute']);
+    expect(rightActionsProbe.items.map((item) => item.id)).toEqual([
+      'openSheet',
+      'mute',
+      'archive',
+    ]);
 
     act(() => {
       rightActionsProbe.items[1].action();
     });
 
-    expect(muteChannel).toHaveBeenCalledTimes(1);
+    expect(muteAction).toHaveBeenCalledTimes(1);
   });
 });