@linktr.ee/messaging-react 3.1.4-rc-1780636753 → 3.3.0

package/src/components/ChannelList/index.test.tsx

@@ -1,4 +1,3 @@
-import { act, waitFor } from '@testing-library/react'
 import React from 'react'
 import type { Channel } from 'stream-chat'
 import { describe, expect, it, vi, beforeEach } from 'vitest'
@@ -57,7 +56,7 @@ describe('ChannelList', () => {
     })
   })
 
-  it('wraps channelRenderFilterFn to restore pending messages and delegates to consumer filter', async () => {
+  it('wraps channelRenderFilterFn to restore pending messages and delegates to consumer filter', () => {
     const filterFn = vi.fn((channels: Channel[]) => channels)
 
     renderWithProviders(
@@ -78,156 +77,9 @@ describe('ChannelList', () => {
 
     // When the wrapper is called, it should delegate to the consumer's filter
     const mockChannels = [
-      {
-        cid: 'ch-1',
-        countUnread: () => 0,
-        state: { pending_messages: [], addMessageSorted: vi.fn() },
-      },
+      { cid: 'ch-1', state: { pending_messages: [], addMessageSorted: vi.fn() } },
     ]
-    await act(async () => {
-      streamProps.channelRenderFilterFn!(mockChannels)
-      await Promise.resolve()
-    })
+    streamProps.channelRenderFilterFn!(mockChannels)
     expect(filterFn).toHaveBeenCalledWith(mockChannels)
   })
-
-  it('notifies hosts with derived visible-channel state', async () => {
-    const onStateChange = vi.fn()
-    const visibleChannel = {
-      cid: 'ch-visible',
-      countUnread: () => 2,
-      state: { pending_messages: [], addMessageSorted: vi.fn() },
-    }
-    const hiddenChannel = {
-      cid: 'ch-hidden',
-      countUnread: () => 7,
-      state: { pending_messages: [], addMessageSorted: vi.fn() },
-    }
-    const filterFn = vi.fn((channels: Channel[]) => channels.slice(0, 1))
-
-    renderWithProviders(
-      React.createElement(ChannelList, {
-        ...defaultProps,
-        channelRenderFilterFn: filterFn,
-        onStateChange,
-      } as never)
-    )
-
-    const streamProps = streamChannelListMock.mock.calls[0][0] as {
-      channelRenderFilterFn?: (channels: Channel[]) => Channel[]
-    }
-
-    await act(async () => {
-      streamProps.channelRenderFilterFn!([
-        visibleChannel as unknown as Channel,
-        hiddenChannel as unknown as Channel,
-      ])
-      await Promise.resolve()
-    })
-
-    await waitFor(() => {
-      expect(onStateChange).toHaveBeenLastCalledWith({
-        isInitialLoadSettled: true,
-        channels: [visibleChannel],
-        rawChannels: [visibleChannel, hiddenChannel],
-        hasChannels: true,
-        unreadCount: 1,
-      })
-    })
-  })
-
-  it('reports a settled empty state when no visible channels remain', async () => {
-    const onStateChange = vi.fn()
-    const filterFn = vi.fn(() => [])
-    const hiddenChannel = {
-      cid: 'ch-hidden',
-      countUnread: () => 3,
-      state: { pending_messages: [], addMessageSorted: vi.fn() },
-    }
-
-    renderWithProviders(
-      React.createElement(ChannelList, {
-        ...defaultProps,
-        channelRenderFilterFn: filterFn,
-        onStateChange,
-      } as never)
-    )
-
-    const streamProps = streamChannelListMock.mock.calls[0][0] as {
-      channelRenderFilterFn?: (channels: Channel[]) => Channel[]
-    }
-
-    await act(async () => {
-      streamProps.channelRenderFilterFn!([hiddenChannel as unknown as Channel])
-      await Promise.resolve()
-    })
-
-    await waitFor(() => {
-      expect(onStateChange).toHaveBeenLastCalledWith({
-        isInitialLoadSettled: true,
-        channels: [],
-        rawChannels: [hiddenChannel],
-        hasChannels: false,
-        unreadCount: 0,
-      })
-    })
-  })
-
-  it('resets derived state when filters change before the new list resolves', async () => {
-    const onStateChange = vi.fn()
-    const firstChannel = {
-      cid: 'ch-first',
-      countUnread: () => 1,
-      state: { pending_messages: [], addMessageSorted: vi.fn() },
-    }
-
-    const { rerender } = renderWithProviders(
-      React.createElement(ChannelList, {
-        ...defaultProps,
-        onStateChange,
-      } as never)
-    )
-
-    let streamProps = streamChannelListMock.mock.calls.at(-1)?.[0] as {
-      channelRenderFilterFn?: (channels: Channel[]) => Channel[]
-    }
-
-    await act(async () => {
-      streamProps.channelRenderFilterFn!([firstChannel as unknown as Channel])
-      await Promise.resolve()
-    })
-
-    await waitFor(() => {
-      expect(onStateChange).toHaveBeenLastCalledWith({
-        isInitialLoadSettled: true,
-        channels: [firstChannel],
-        rawChannels: [firstChannel],
-        hasChannels: true,
-        unreadCount: 1,
-      })
-    })
-
-    rerender(
-      React.createElement(ChannelList, {
-        ...defaultProps,
-        filters: { type: 'messaging', frozen: true },
-        onStateChange,
-      } as never)
-    )
-
-    streamProps = streamChannelListMock.mock.calls.at(-1)?.[0] as {
-      channelRenderFilterFn?: (channels: Channel[]) => Channel[]
-    }
-    expect(typeof streamProps.channelRenderFilterFn).toBe('function')
-
-    await waitFor(() => {
-      expect(onStateChange).toHaveBeenLastCalledWith({
-        isInitialLoadSettled: false,
-        channels: [],
-        rawChannels: [],
-        hasChannels: false,
-        unreadCount: 0,
-      })
-    })
-  })
 })

package/src/components/ChannelList/index.tsx

@@ -5,21 +5,13 @@ import { ChannelList as StreamChannelList } from 'stream-chat-react'
 
 import { restorePendingMessages } from '../../hooks/useRestorePendingMessages'
 import { useMessagingContext } from '../../providers/MessagingProvider'
-import type { ChannelListDerivedState, ChannelListProps } from '../../types'
+import type { ChannelListProps } from '../../types'
 
 import { ChannelListProvider } from './ChannelListContext'
 import CustomChannelPreview from './CustomChannelPreview'
 
 const DEFAULT_SORT = { last_message_at: -1 } as const
 
-const EMPTY_DERIVED_STATE: ChannelListDerivedState = {
-  isInitialLoadSettled: false,
-  channels: [],
-  rawChannels: [],
-  hasChannels: false,
-  unreadCount: 0,
-}
-
 /**
  * Channel list component with customizable header and actions
  */
@@ -35,7 +27,6 @@ export const ChannelList = React.memo<ChannelListProps>(
     customEmptyStateIndicator,
     renderMessagePreview,
     viewerLanguage,
-    onStateChange,
   }) => {
     // Track renders
     const renderCountRef = React.useRef(0)
@@ -43,42 +34,6 @@ export const ChannelList = React.memo<ChannelListProps>(
 
     // Get debug flag from context
     const { debug = false } = useMessagingContext()
-    const [derivedState, setDerivedState] = React.useState<ChannelListDerivedState>(
-      EMPTY_DERIVED_STATE
-    )
-    const listIdentityKey = React.useMemo(
-      () => `${JSON.stringify(filters)}:${JSON.stringify(sort)}`,
-      [filters, sort]
-    )
-    const pendingDerivedStateRef = React.useRef<ChannelListDerivedState>(
-      EMPTY_DERIVED_STATE
-    )
-    const publishScheduledRef = React.useRef(false)
-    const listVersionRef = React.useRef(0)
-
-    const publishDerivedState = React.useCallback(
-      (nextState: ChannelListDerivedState) => {
-        const publishVersion = listVersionRef.current
-        pendingDerivedStateRef.current = nextState
-        if (publishScheduledRef.current) {
-          return
-        }
-
-        publishScheduledRef.current = true
-        queueMicrotask(() => {
-          if (publishVersion !== listVersionRef.current) {
-            publishScheduledRef.current = false
-            return
-          }
-          publishScheduledRef.current = false
-          setDerivedState((currentState) => {
-            const pendingState = pendingDerivedStateRef.current
-            return currentState === pendingState ? currentState : pendingState
-          })
-        })
-      },
-      []
-    )
 
     // Wrap channelRenderFilterFn to restore pending messages for all channels
     // as soon as they are loaded, without waiting for the user to click into each one.
@@ -87,23 +42,11 @@ export const ChannelList = React.memo<ChannelListProps>(
         for (const channel of channels) {
           restorePendingMessages(channel)
         }
-
-        const visibleChannels = channelRenderFilterFn
+        return channelRenderFilterFn
           ? channelRenderFilterFn(channels)
           : channels
-
-        publishDerivedState({
-          isInitialLoadSettled: true,
-          channels: visibleChannels,
-          rawChannels: channels,
-          hasChannels: visibleChannels.length > 0,
-          unreadCount: visibleChannels.filter((channel) => channel.countUnread() > 0)
-            .length,
-        })
-
-        return visibleChannels
       },
-      [channelRenderFilterFn, publishDerivedState]
+      [channelRenderFilterFn]
     )
 
     if (debug) {
@@ -131,17 +74,6 @@ export const ChannelList = React.memo<ChannelListProps>(
       ]
     )
 
-    React.useEffect(() => {
-      listVersionRef.current += 1
-      pendingDerivedStateRef.current = EMPTY_DERIVED_STATE
-      publishScheduledRef.current = false
-      setDerivedState(EMPTY_DERIVED_STATE)
-    }, [listIdentityKey])
-
-    React.useEffect(() => {
-      onStateChange?.(derivedState)
-    }, [derivedState, onStateChange])
-
     return (
       <div
         className={classNames(
@@ -153,7 +85,7 @@ export const ChannelList = React.memo<ChannelListProps>(
         <div className="flex-1 overflow-hidden min-w-0">
           <ChannelListProvider value={contextValue}>
             <StreamChannelList
-              key={listIdentityKey}
+              key={`${JSON.stringify(filters)}:${JSON.stringify(sort)}`}
               filters={filters}
               sort={sort}
               options={{ limit: 30 }}

package/src/components/ChannelView.stories.tsx

@@ -240,12 +240,12 @@ Default.args = {
     console.log('Leave conversation:', channel.id),
   onBlockParticipant: (participantId) =>
     console.log('Block participant:', participantId),
-  followerStatus: true, // Shows "Subscribed to you"
+  followerStatus: true,
 }
 Default.parameters = {
   docs: {
     description: {
-      story: 'Default channel view with messages and conversation header, showing subscriber status.',
+      story: 'Default channel view with messages and conversation header.',
     },
   },
 }
@@ -277,10 +277,8 @@ RestrictedOfficialChannel.args = {
   // Restricted surface for the Linktree official channel:
   showBlockParticipant: false,
   showReportParticipant: false,
-  showFollowerStatus: false,
   composerDisabled: true,
   composerDisabledReason: 'Only Linktree can send messages on this thread',
-  followerStatus: true, // would normally render "Subscribed to you" — suppressed here
   onLeaveConversation: (channel) =>
     console.log('Leave conversation:', channel.id),
 }
@@ -288,7 +286,7 @@ RestrictedOfficialChannel.parameters = {
   docs: {
     description: {
       story:
-        'Restricted action surface used by the Linktree official channel: block, report, and the subscription-status label are hidden, and the composer is replaced by a locked panel explaining the linker cannot send messages on this thread. Delete conversation, favorite, and chat info remain available. Open the chat info dialog (3-dot / name click) to see block & report removed.',
+        'Restricted action surface used by the Linktree official channel: block and report are hidden, and the composer is replaced by a locked panel explaining the linker cannot send messages on this thread. Delete conversation and favorite remain available in the "..." actions popover.',
     },
   },
 }
@@ -543,74 +541,6 @@ EmptyChannel.parameters = {
   },
 }
 
-export const SubscriberStatus: StoryFn<TemplateProps> = Template.bind({})
-SubscriberStatus.args = {
-  showBackButton: false,
-  followerStatus: true, // Shows "Subscribed to you" in green
-  onLeaveConversation: (channel) =>
-    console.log('Leave conversation:', channel.id),
-  onBlockParticipant: (participantId) =>
-    console.log('Block participant:', participantId),
-}
-SubscriberStatus.parameters = {
-  docs: {
-    description: {
-      story: 'Channel view showing "Subscribed to you" badge in green when isFollower is true.',
-    },
-  },
-}
-
-export const NotSubscribedStatus: StoryFn<TemplateProps> = Template.bind({})
-NotSubscribedStatus.args = {
-  showBackButton: false,
-  followerStatus: false, // Shows "Not subscribed" in gray
-  onLeaveConversation: (channel) =>
-    console.log('Leave conversation:', channel.id),
-  onBlockParticipant: (participantId) =>
-    console.log('Block participant:', participantId),
-}
-NotSubscribedStatus.parameters = {
-  docs: {
-    description: {
-      story: 'Channel view showing "Not subscribed" badge in gray when isFollower is false.',
-    },
-  },
-}
-
-export const CustomFollowerStatus: StoryFn<TemplateProps> = Template.bind({})
-CustomFollowerStatus.args = {
-  showBackButton: false,
-  followerStatus: 'Mutual subscribers', // Custom status text in gray
-  onLeaveConversation: (channel) =>
-    console.log('Leave conversation:', channel.id),
-  onBlockParticipant: (participantId) =>
-    console.log('Block participant:', participantId),
-}
-CustomFollowerStatus.parameters = {
-  docs: {
-    description: {
-      story: 'Channel view with a custom follower status text (shows in gray unless text is "Subscribed to you").',
-    },
-  },
-}
-
-export const NoFollowerStatus: StoryFn<TemplateProps> = Template.bind({})
-NoFollowerStatus.args = {
-  showBackButton: false,
-  followerStatus: undefined, // No badge shown
-  onLeaveConversation: (channel) =>
-    console.log('Leave conversation:', channel.id),
-  onBlockParticipant: (participantId) =>
-    console.log('Block participant:', participantId),
-}
-NoFollowerStatus.parameters = {
-  docs: {
-    description: {
-      story: 'Channel view with no follower status badge displayed.',
-    },
-  },
-}
-
 export const FrozenChannel: StoryFn<TemplateProps> = Template.bind({})
 FrozenChannel.args = {
   showBackButton: false,

package/src/components/ChannelView.test.tsx

@@ -68,11 +68,11 @@ vi.mock('./CustomDateSeparator', () => ({
   CustomDateSeparator: () => <div data-testid="custom-date-separator" />,
 }))
 
-const channelInfoDialogProps: Array<Record<string, unknown>> = []
-vi.mock('./ChannelInfoDialog', () => ({
-  ChannelInfoDialog: (props: Record<string, unknown>) => {
-    channelInfoDialogProps.push({ ...props })
-    return <div data-testid="channel-info-dialog" />
+const channelActionsMenuProps: Array<Record<string, unknown>> = []
+vi.mock('./ChannelActionsMenu', () => ({
+  ChannelActionsMenu: (props: Record<string, unknown>) => {
+    channelActionsMenuProps.push({ ...props })
+    return <div data-testid="channel-actions-menu" />
   },
 }))
 
@@ -151,24 +151,24 @@ describe('ChannelView', () => {
     activeChannel = undefined
     activeChannelProps = {}
     avatarRenderCalls.length = 0
-    channelInfoDialogProps.length = 0
+    channelActionsMenuProps.length = 0
     messageInputProps.length = 0
     mockIsStarred = false
   })
 
-  const lastDialogProps = () =>
-    channelInfoDialogProps[channelInfoDialogProps.length - 1]
+  const lastActionsMenuProps = () =>
+    channelActionsMenuProps[channelActionsMenuProps.length - 1]
   const lastInputProps = () =>
     messageInputProps[messageInputProps.length - 1]
 
-  it('keeps block and report visible by default in the info dialog', () => {
+  it('keeps block and report visible by default in the actions menu', () => {
     renderWithProviders(<ChannelView channel={createChannel()} />)
 
-    expect(lastDialogProps().showBlockParticipant).not.toBe(false)
-    expect(lastDialogProps().showReportParticipant).not.toBe(false)
+    expect(lastActionsMenuProps().showBlockParticipant).not.toBe(false)
+    expect(lastActionsMenuProps().showReportParticipant).not.toBe(false)
   })
 
-  it('hides block and report in the info dialog when restricted', () => {
+  it('hides block and report in the actions menu when restricted', () => {
     renderWithProviders(
       <ChannelView
         channel={createChannel()}
@@ -177,32 +177,36 @@ describe('ChannelView', () => {
       />
     )
 
-    expect(lastDialogProps().showBlockParticipant).toBe(false)
-    expect(lastDialogProps().showReportParticipant).toBe(false)
+    expect(lastActionsMenuProps().showBlockParticipant).toBe(false)
+    expect(lastActionsMenuProps().showReportParticipant).toBe(false)
   })
 
-  it('passes the follower status label to the info dialog by default', () => {
-    const channel = createChannel()
-    ;(channel as unknown as { data: Record<string, unknown> }).data = {
-      isFollower: true,
-    }
-
-    renderWithProviders(<ChannelView channel={channel} />)
+  it('renders the participant name without an info trigger', () => {
+    renderWithProviders(<ChannelView channel={createChannel()} />)
 
-    expect(lastDialogProps().followerStatusLabel).toBe('Subscribed to you')
+    // The info sidebar was removed, so the participant name is plain text on
+    // both headers — there is no clickable affordance to open a profile
+    // dialog anymore.
+    expect(
+      screen.queryByRole('button', { name: /view info for/i })
+    ).not.toBeInTheDocument()
+    expect(screen.getAllByText('Linker').length).toBeGreaterThanOrEqual(1)
   })
 
-  it('suppresses the follower status label when showFollowerStatus is false', () => {
-    const channel = createChannel()
-    ;(channel as unknown as { data: Record<string, unknown> }).data = {
-      isFollower: true,
-    }
+  it('renders the actions menu by default', () => {
+    renderWithProviders(<ChannelView channel={createChannel()} />)
+
+    expect(
+      screen.queryAllByTestId('channel-actions-menu').length
+    ).toBeGreaterThan(0)
+  })
 
+  it('hides the actions menu (both desktop and mobile) when showChannelInfo is false', () => {
     renderWithProviders(
-      <ChannelView channel={channel} showFollowerStatus={false} />
+      <ChannelView channel={createChannel()} showChannelInfo={false} />
     )
 
-    expect(lastDialogProps().followerStatusLabel).toBeUndefined()
+    expect(screen.queryAllByTestId('channel-actions-menu')).toHaveLength(0)
   })
 
   it('passes composer disabled state and reason to the message input', () => {