stream-chat-react-native-core 9.4.0-beta.6 → 9.4.0-beta.7

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/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/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

@@ -41,7 +41,11 @@ export const ChannelSwipableWrapper = ({
 }>) => {
   const { ChannelDetailsBottomSheet: ChannelDetailsBottomSheetComponent } = useComponentsContext();
   const [channelDetailSheetOpen, setChannelDetailSheetOpen] = useState(false);
-  const channelActionItems = useChannelActionItems({ channel, getChannelActionItems });
+  const channelActionItems = useChannelActionItems({
+    channel,
+    getChannelActionItems,
+    surface: 'list',
+  });
   const sheetItems = useMemo(
     () => channelActionItems.filter((item) => item.placement !== 'swipe'),
     [channelActionItems],

package/src/components/ChannelPreview/hooks/__tests__/useIsChannelPinned.test.tsx

@@ -0,0 +1,35 @@
+import { renderHook } from '@testing-library/react-native';
+import { Channel } from 'stream-chat';
+
+import { useIsChannelPinned } from '../useIsChannelPinned';
+
+describe('useIsChannelPinned', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const buildMockChannel = (membership: Record<string, unknown> = {}) =>
+    ({
+      initialized: true,
+      on: jest.fn().mockReturnValue({ unsubscribe: jest.fn() }),
+      state: { membership },
+    }) as unknown as Channel;
+
+  it('returns false when membership has no pinned_at', () => {
+    const channel = buildMockChannel({ pinned_at: null });
+    const { result } = renderHook(() => useIsChannelPinned(channel));
+    expect(result.current).toBe(false);
+  });
+
+  it('returns true when membership has a pinned_at timestamp', () => {
+    const channel = buildMockChannel({ pinned_at: '2026-06-15T08:00:00.000Z' });
+    const { result } = renderHook(() => useIsChannelPinned(channel));
+    expect(result.current).toBe(true);
+  });
+
+  it('subscribes to member.updated events', () => {
+    const channel = buildMockChannel({ pinned_at: null });
+    renderHook(() => useIsChannelPinned(channel));
+    expect(channel.on).toHaveBeenCalledWith('member.updated', expect.any(Function));
+  });
+});

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

@@ -4,4 +4,5 @@ export * from './useChannelPreviewPollLabel';
 export * from './useChannelPreviewDisplayName';
 export * from './useChannelPreviewDisplayPresence';
 export * from './useIsChannelMuted';
+export * from './useIsChannelPinned';
 export * from './useChannelTypingState';

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

@@ -4,6 +4,7 @@ import throttle from 'lodash/throttle';
 import type { Channel, Event, LocalMessage, MessageResponse, StreamChat } from 'stream-chat';
 
 import { useIsChannelMuted } from './useIsChannelMuted';
+import { useIsChannelPinned } from './useIsChannelPinned';
 
 import { useChannelsContext } from '../../../contexts';
 import { useStableCallback } from '../../../hooks';
@@ -39,6 +40,7 @@ export const useChannelPreviewData = (
   );
   const [unread, setUnread] = useState(channel.countUnread());
   const { muted } = useIsChannelMuted(channel);
+  const pinned = useIsChannelPinned(channel);
   const { forceUpdate: contextForceUpdate } = useChannelsContext();
   const channelListForceUpdate = forceUpdateOverride ?? contextForceUpdate;
 
@@ -170,5 +172,5 @@ export const useChannelPreviewData = (
     return () => listeners.forEach((l) => l.unsubscribe());
   }, [channel, refreshUnreadCount, forceUpdate, channelListForceUpdate, setLastMessage]);
 
-  return { lastMessage, muted, unread };
+  return { lastMessage, muted, pinned, unread };
 };

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

@@ -0,0 +1,8 @@
+import type { Channel } from 'stream-chat';
+
+import { useChannelMembershipState } from '../../../hooks/useChannelMembershipState';
+
+export const useIsChannelPinned = (channel: Channel) => {
+  const membership = useChannelMembershipState(channel);
+  return Boolean(membership?.pinned_at);
+};

package/src/components/index.ts

@@ -56,6 +56,7 @@ export * from './ChannelPreview/ChannelPreview';
 export * from './ChannelPreview/ChannelPreviewMessage';
 export * from './ChannelPreview/ChannelPreviewView';
 export * from './ChannelPreview/ChannelPreviewMutedStatus';
+export * from './ChannelPreview/ChannelPreviewPinnedStatus';
 export * from './ChannelPreview/ChannelLastMessagePreview';
 export * from './ChannelPreview/ChannelPreviewStatus';
 export * from './ChannelPreview/ChannelPreviewTitle';

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -118,6 +118,7 @@ export type ChannelsContextValue = {
   swipeActionsEnabled?: boolean;
 
   mutedStatusPosition?: 'trailingBottom' | 'inlineTitle';
+  pinnedStatusPosition?: 'trailingBottom' | 'inlineTitle';
 };
 
 export const ChannelsContext = React.createContext(

package/src/contexts/componentsContext/defaultComponents.ts

@@ -53,6 +53,7 @@ import { ChannelLastMessagePreview } from '../../components/ChannelPreview/Chann
 import { ChannelMessagePreviewDeliveryStatus } from '../../components/ChannelPreview/ChannelMessagePreviewDeliveryStatus';
 import { ChannelPreviewMessage } from '../../components/ChannelPreview/ChannelPreviewMessage';
 import { ChannelPreviewMutedStatus } from '../../components/ChannelPreview/ChannelPreviewMutedStatus';
+import { ChannelPreviewPinnedStatus } from '../../components/ChannelPreview/ChannelPreviewPinnedStatus';
 import { ChannelPreviewStatus } from '../../components/ChannelPreview/ChannelPreviewStatus';
 import { ChannelPreviewTitle } from '../../components/ChannelPreview/ChannelPreviewTitle';
 import { ChannelPreviewTypingIndicator } from '../../components/ChannelPreview/ChannelPreviewTypingIndicator';
@@ -271,6 +272,7 @@ const components = {
   ChannelPreviewMessage,
   ChannelPreviewMessageDeliveryStatus: ChannelMessagePreviewDeliveryStatus,
   ChannelPreviewMutedStatus,
+  ChannelPreviewPinnedStatus,
   ChannelPreviewStatus,
   ChannelPreviewTitle,
   ChannelPreviewTypingIndicator,

package/src/contexts/themeContext/utils/theme.ts

@@ -299,6 +299,7 @@ export type Theme = {
     contentContainer: ViewStyle;
     date: TextStyle;
     mutedStatus: IconProps;
+    pinnedStatus: IconProps;
     messageDeliveryStatus: {
       container: ViewStyle;
       text: TextStyle;
@@ -1357,6 +1358,7 @@ export const defaultTheme: Theme = {
       timeIcon: {},
     },
     mutedStatus: {},
+    pinnedStatus: {},
     lowerRow: {},
     title: {},
     unreadContainer: {},

package/src/hooks/actions/__tests__/useChannelActionItems.test.tsx

@@ -99,32 +99,45 @@ describe('useChannelActionItems', () => {
   });
 
   it('returns default channel action items', () => {
-    const { result } = renderHook(() => useChannelActionItems({ channel }));
+    const { result } = renderHook(() => useChannelActionItems({ channel, surface: 'list' }));
 
-    expect(result.current).toHaveLength(3);
+    expect(result.current).toHaveLength(4);
     expect(result.current.map((item) => item.action)).toEqual([
       channelActions.muteChannel,
+      channelActions.pin,
       channelActions.leave,
       expect.any(Function),
     ]);
-    expect(result.current.map((item) => item.id)).toEqual(['mute', 'leave', 'deleteChannel']);
+    expect(result.current.map((item) => item.id)).toEqual([
+      'mute',
+      'pin',
+      'leave',
+      'deleteChannel',
+    ]);
     expect(result.current.map((item) => item.type)).toEqual([
+      'standard',
       'standard',
       'destructive',
       'destructive',
     ]);
-    expect(result.current.map((item) => item.placement)).toEqual(['swipe', 'sheet', 'sheet']);
+    expect(result.current.map((item) => item.placement)).toEqual([
+      'swipe',
+      'sheet',
+      'sheet',
+      'sheet',
+    ]);
   });
 
   it('returns muteUser only in direct chats', () => {
     jest.spyOn(useIsDirectChatModule, 'useIsDirectChat').mockReturnValue(true);
 
-    const { result } = renderHook(() => useChannelActionItems({ channel }));
+    const { result } = renderHook(() => useChannelActionItems({ channel, surface: 'list' }));
 
     expect(result.current.map((item) => item.id)).toEqual([
       'mute',
       'muteUser',
       'block',
+      'pin',
       'leave',
       'deleteChannel',
     ]);
@@ -143,7 +156,7 @@ describe('useChannelActionItems', () => {
     });
     jest.spyOn(useMutedUsersModule, 'useMutedUsers').mockReturnValue([] as Mute[]);
 
-    const { result } = renderHook(() => useChannelActionItems({ channel }));
+    const { result } = renderHook(() => useChannelActionItems({ channel, surface: 'list' }));
 
     const muteItem = result.current.find((item) => item.id === 'mute');
     const muteUserItem = result.current.find((item) => item.id === 'muteUser');
@@ -152,7 +165,7 @@ describe('useChannelActionItems', () => {
   });
 
   it('forwards options from item.action to the underlying channel action', async () => {
-    const { result } = renderHook(() => useChannelActionItems({ channel }));
+    const { result } = renderHook(() => useChannelActionItems({ channel, surface: 'list' }));
 
     const muteItem = result.current.find((item) => item.id === 'mute');
     expect(muteItem).toBeDefined();
@@ -165,7 +178,7 @@ describe('useChannelActionItems', () => {
   it('marks block as destructive when user is not blocked', () => {
     jest.spyOn(useIsDirectChatModule, 'useIsDirectChat').mockReturnValue(true);
 
-    const { result } = renderHook(() => useChannelActionItems({ channel }));
+    const { result } = renderHook(() => useChannelActionItems({ channel, surface: 'list' }));
 
     const blockItem = result.current.find((item) => item.id === 'block');
     expect(blockItem?.type).toBe('destructive');
@@ -175,7 +188,9 @@ describe('useChannelActionItems', () => {
     jest.spyOn(useIsDirectChatModule, 'useIsDirectChat').mockReturnValue(true);
     const blockedChannel = createChannelMock({ blockedUserIds: ['other-user-id'] });
 
-    const { result } = renderHook(() => useChannelActionItems({ channel: blockedChannel }));
+    const { result } = renderHook(() =>
+      useChannelActionItems({ channel: blockedChannel, surface: 'list' }),
+    );
 
     const blockItem = result.current.find((item) => item.id === 'block');
     expect(blockItem?.type).toBe('standard');
@@ -190,6 +205,7 @@ describe('useChannelActionItems', () => {
       useChannelActionItems({
         channel,
         getChannelActionItems: customGetChannelActionItems,
+        surface: 'list',
       }),
     );
 
@@ -202,6 +218,7 @@ describe('useChannelActionItems', () => {
         isBlocked: undefined,
         isDirectChat: false,
         isPinned: false,
+        surface: 'list',
         t: expect.any(Function),
         userMuteActive: false,
       },
@@ -228,6 +245,7 @@ describe('getChannelActionItems', () => {
       isBlocked: undefined,
       isDirectChat: false,
       isPinned: false,
+      surface: 'list',
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -240,6 +258,7 @@ describe('getChannelActionItems', () => {
         isBlocked: undefined,
         isDirectChat: false,
         isPinned: false,
+        surface: 'list',
         t: ((value: string) => value) as TranslationContextValue['t'],
         userMuteActive: false,
       },
@@ -248,11 +267,13 @@ describe('getChannelActionItems', () => {
 
     expect(actionItems.map((item) => item.action)).toEqual([
       channelActions.muteChannel,
+      channelActions.pin,
       channelActions.leave,
       expect.any(Function),
     ]);
-    expect(actionItems.map((item) => item.id)).toEqual(['mute', 'leave', 'deleteChannel']);
+    expect(actionItems.map((item) => item.id)).toEqual(['mute', 'pin', 'leave', 'deleteChannel']);
     expect(actionItems.map((item) => item.type)).toEqual([
+      'standard',
       'standard',
       'destructive',
       'destructive',
@@ -269,6 +290,7 @@ describe('getChannelActionItems', () => {
       isBlocked: true,
       isDirectChat: true,
       isPinned: false,
+      surface: 'list',
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: true,
     });
@@ -277,6 +299,7 @@ describe('getChannelActionItems', () => {
       'mute',
       'muteUser',
       'block',
+      'pin',
       'leave',
       'deleteChannel',
     ]);
@@ -284,6 +307,7 @@ describe('getChannelActionItems', () => {
       channelActions.unmuteChannel,
       channelActions.unmuteUser,
       channelActions.unblockUser,
+      channelActions.pin,
       channelActions.leave,
       expect.any(Function),
     ]);
@@ -291,6 +315,7 @@ describe('getChannelActionItems', () => {
       'Unmute Chat',
       'Unmute User',
       'Unblock User',
+      'Pin Chat',
       'Leave Chat',
       'Delete Chat',
     ]);
@@ -300,6 +325,7 @@ describe('getChannelActionItems', () => {
       'sheet',
       'sheet',
       'sheet',
+      'sheet',
     ]);
   });
 
@@ -312,6 +338,7 @@ describe('getChannelActionItems', () => {
       isBlocked: undefined,
       isDirectChat: false,
       isPinned: false,
+      surface: 'list',
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -328,11 +355,12 @@ describe('getChannelActionItems', () => {
       isBlocked: undefined,
       isDirectChat: false,
       isPinned: false,
+      surface: 'list',
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
 
-    expect(actionItems.map((item) => item.id)).toEqual(['mute', 'leave']);
+    expect(actionItems.map((item) => item.id)).toEqual(['mute', 'pin', 'leave']);
   });
 
   it('uses group mute variants for labels and placements', () => {
@@ -345,6 +373,7 @@ describe('getChannelActionItems', () => {
       isBlocked: undefined,
       isDirectChat: false,
       isPinned: false,
+      surface: 'list',
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -353,9 +382,101 @@ describe('getChannelActionItems', () => {
     expect(actionItems[0].label).toBe('Unmute Group');
     expect(actionItems[0].placement).toBe('swipe');
 
-    expect(actionItems[1].action).toBe(channelActions.leave);
-    expect(actionItems[1].label).toBe('Leave Group');
-    expect(actionItems[1].placement).toBe('sheet');
+    const leaveItem = actionItems.find((item) => item.id === 'leave');
+    expect(leaveItem?.action).toBe(channelActions.leave);
+    expect(leaveItem?.label).toBe('Leave Group');
+    expect(leaveItem?.placement).toBe('sheet');
+  });
+
+  it('pin item toggles to unpin when channel is pinned', () => {
+    const channelActions = createChannelActions();
+    const actionItems = buildDefaultChannelActionItems({
+      actions: channelActions,
+      channel,
+      channelMuteActive: false,
+      isArchived: false,
+      isBlocked: undefined,
+      isDirectChat: false,
+      isPinned: true,
+      surface: 'list',
+      t: ((value: string) => value) as TranslationContextValue['t'],
+      userMuteActive: false,
+    });
+
+    const pinItem = actionItems.find((item) => item.id === 'pin');
+    expect(pinItem?.action).toBe(channelActions.unpin);
+    expect(pinItem?.label).toBe('Unpin Group');
+    expect(pinItem?.placement).toBe('sheet');
+  });
+
+  it('pin item uses direct-chat label variant', () => {
+    const channelActions = createChannelActions();
+    const actionItems = buildDefaultChannelActionItems({
+      actions: channelActions,
+      channel,
+      channelMuteActive: false,
+      isArchived: false,
+      isBlocked: undefined,
+      isDirectChat: true,
+      isPinned: false,
+      surface: 'list',
+      t: ((value: string) => value) as TranslationContextValue['t'],
+      userMuteActive: false,
+    });
+
+    const pinItem = actionItems.find((item) => item.id === 'pin');
+    expect(pinItem?.action).toBe(channelActions.pin);
+    expect(pinItem?.label).toBe('Pin Chat');
+  });
+
+  it('omits the pin item when building for the details surface', () => {
+    const actionItems = buildDefaultChannelActionItems({
+      actions: createChannelActions(),
+      channel,
+      channelMuteActive: false,
+      isArchived: false,
+      isBlocked: undefined,
+      isDirectChat: false,
+      isPinned: false,
+      surface: 'details',
+      t: ((value: string) => value) as TranslationContextValue['t'],
+      userMuteActive: false,
+    });
+
+    expect(actionItems.map((item) => item.id)).not.toContain('pin');
+  });
+
+  it('includes the pin item when building for the list surface', () => {
+    const actionItems = buildDefaultChannelActionItems({
+      actions: createChannelActions(),
+      channel,
+      channelMuteActive: false,
+      isArchived: false,
+      isBlocked: undefined,
+      isDirectChat: false,
+      isPinned: false,
+      surface: 'list',
+      t: ((value: string) => value) as TranslationContextValue['t'],
+      userMuteActive: false,
+    });
+
+    expect(actionItems.map((item) => item.id)).toContain('pin');
+  });
+
+  it('applies no surface-specific filtering when surface is omitted', () => {
+    const actionItems = buildDefaultChannelActionItems({
+      actions: createChannelActions(),
+      channel,
+      channelMuteActive: false,
+      isArchived: false,
+      isBlocked: undefined,
+      isDirectChat: false,
+      isPinned: false,
+      t: ((value: string) => value) as TranslationContextValue['t'],
+      userMuteActive: false,
+    });
+
+    expect(actionItems.map((item) => item.id)).toEqual(['mute', 'pin', 'leave', 'deleteChannel']);
   });
 
   it('mute and muteUser reflect their respective active states independently', () => {
@@ -368,6 +489,7 @@ describe('getChannelActionItems', () => {
       isBlocked: undefined,
       isDirectChat: true,
       isPinned: false,
+      surface: 'list',
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: true,
     });
@@ -393,6 +515,7 @@ describe('getChannelActionItems', () => {
       isBlocked: undefined,
       isDirectChat: false,
       isPinned: false,
+      surface: 'list',
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });

package/src/hooks/actions/__tests__/useChannelActionItemsById.test.tsx

@@ -41,7 +41,7 @@ describe('useChannelActionItemsById', () => {
       .spyOn(useChannelActionItemsModule, 'useChannelActionItems')
       .mockReturnValue(channelActionItems);
 
-    const { result } = renderHook(() => useChannelActionItemsById({ channel }));
+    const { result } = renderHook(() => useChannelActionItemsById({ channel, surface: 'list' }));
 
     expect(result.current.pin).toBe(channelActionItems[0]);
     expect(result.current.deleteChannel).toBe(channelActionItems[1]);
@@ -59,12 +59,14 @@ describe('useChannelActionItemsById', () => {
       useChannelActionItemsById({
         channel,
         getChannelActionItems,
+        surface: 'list',
       }),
     );
 
     expect(useChannelActionItemsSpy).toHaveBeenCalledWith({
       channel,
       getChannelActionItems,
+      surface: 'list',
     });
   });
 });