feat: add pin icon to the ChannelListItemUI (#3163)

Author: MartinCupela

src/components/ChannelList/styling/ChannelList.scss

@@ -49,13 +49,13 @@
     flex: 1;
     min-height: 0;
     overflow: hidden;
+    padding-bottom: calc(var(--str-chat__space-8) + var(--str-chat__space-2));
 
     .str-chat__channel-list-inner__main {
       height: 100%;
       overflow-y: auto;
       scrollbar-gutter: stable both-edges;
       scrollbar-width: thin;
-      padding-bottom: calc(var(--str-chat__space-8) + var(--str-chat__space-2));
 
       .str-chat__channel-list-empty {
         height: 100%;

src/components/ChannelListItem/ChannelListItem.tsx

@@ -17,6 +17,7 @@ import {
   useChatContext,
   useComponentContext,
 } from '../../context';
+import { useChannelMembershipState } from '../ChannelList';
 
 export type ChannelListItemUIProps = ChannelListItemProps & {
   /** Image of Channel to display */
@@ -33,6 +34,8 @@ export type ChannelListItemUIProps = ChannelListItemProps & {
   messageDeliveryStatus?: MessageDeliveryStatus;
   /** Whether the channel is muted by the current user */
   muted?: boolean;
+  /** Whether the channel is pinned by the current user */
+  pinned?: boolean;
   /** Number of unread Messages */
   unread?: number;
 };
@@ -88,6 +91,7 @@ export const ChannelListItem = (props: ChannelListItemProps) => {
   const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
     channel,
   });
+  const membership = useChannelMembershipState(channel);
 
   const [lastMessage, setLastMessage] = useState<LocalMessage>(
     channel.state.messages[channel.state.messages.length - 1],
@@ -203,6 +207,7 @@ export const ChannelListItem = (props: ChannelListItemProps) => {
         latestMessagePreview={latestMessagePreview}
         messageDeliveryStatus={messageDeliveryStatus}
         muted={muted}
+        pinned={!!membership.pinned_at}
         setActiveChannel={setActiveChannel}
         unread={unread}
       />

src/components/ChannelListItem/ChannelListItemUI.tsx

@@ -6,7 +6,7 @@ import { ChannelListItemTimestamp } from './ChannelListItemTimestamp';
 
 import { ChannelAvatar as DefaultChannelAvatar } from '../Avatar';
 import { Badge } from '../Badge';
-import { IconMute } from '../Icons';
+import { IconMute, IconPin } from '../Icons';
 import { useComponentContext, useTranslationContext } from '../../context';
 import type { ChannelListItemUIProps } from './ChannelListItem';
 import { SummarizedMessagePreview } from '../SummarizedMessagePreview';
@@ -23,6 +23,7 @@ const UnMemoizedChannelListItemUI = (props: ChannelListItemUIProps) => {
     messageDeliveryStatus,
     muted,
     onSelect: customOnSelectChannel,
+    pinned,
     setActiveChannel,
     unread,
     watchers,
@@ -60,10 +61,12 @@ const UnMemoizedChannelListItemUI = (props: ChannelListItemUIProps) => {
         aria-selected={active}
         className={clsx(
           'str-chat__channel-list-item',
-          typeof unread === 'number' &&
-            unread > 0 &&
-            'str-chat__channel-list-item--unread',
-          muted && 'str-chat__channel-list-item--muted',
+          {
+            'str-chat__channel-list-item--muted': muted,
+            'str-chat__channel-list-item--pinned': pinned,
+            'str-chat__channel-list-item--unread':
+              typeof unread === 'number' && unread > 0,
+          },
           customClassName,
         )}
         data-testid='channel-list-item-button'
@@ -81,6 +84,7 @@ const UnMemoizedChannelListItemUI = (props: ChannelListItemUIProps) => {
           <div className='str-chat__channel-list-item-data__first-row'>
             <div className='str-chat__channel-list-item-data__title'>
               <span>{displayTitle || 'N/A'}</span>
+              {pinned && <IconPin />}
               {muted && <IconMute />}
             </div>
             <div className='str-chat__channel-list-item-data__timestamp-and-badge'>

src/components/ChannelListItem/__tests__/ChannelListItem.test.tsx

@@ -49,6 +49,7 @@ const PreviewUIComponent = (props: ChannelListItemUIProps) => (
     <div data-testid='last-event-message'>
       {props.lastMessage ? props.lastMessage.text : EMPTY_CHANNEL_PREVIEW_TEXT}
     </div>
+    <div data-testid='pinned'>{String(!!props.pinned)}</div>
   </>
 );
 const PreviewUIComponentWithLatestMessagePreview = (props: ChannelListItemUIProps) => (
@@ -674,6 +675,39 @@ describe('ChannelPreview', () => {
     });
   });
 
+  describe('pinned', () => {
+    it('should pass pinned=false when membership has no pinned_at', async () => {
+      renderComponent(
+        {
+          activeChannel: c1,
+          channel: c0,
+        },
+        render,
+      );
+      await waitFor(() => {
+        expect(screen.getByTestId('pinned')).toHaveTextContent('false');
+      });
+    });
+
+    it('should pass pinned=true when membership has pinned_at', async () => {
+      c0.state.membership = fromPartial({
+        ...c0.state.membership,
+        pinned_at: '2024-01-01T00:00:00Z',
+      });
+
+      renderComponent(
+        {
+          activeChannel: c1,
+          channel: c0,
+        },
+        render,
+      );
+      await waitFor(() => {
+        expect(screen.getByTestId('pinned')).toHaveTextContent('true');
+      });
+    });
+  });
+
   describe('user.updated', () => {
     const renderComponent = async ({
       channel,

src/components/ChannelListItem/__tests__/ChannelListItemUI.test.tsx

@@ -127,4 +127,29 @@ describe('ChannelPreviewMessenger', () => {
     fireEvent.click(previewButton);
     expect(onSelect).toHaveBeenCalledTimes(1);
   });
+
+  describe('pinned', () => {
+    it('should not add pinned class or render pin icon when not pinned', () => {
+      const { container } = render(renderComponent({ pinned: false }));
+      const button = screen.getByTestId(PREVIEW_TEST_ID);
+      expect(button).not.toHaveClass('str-chat__channel-list-item--pinned');
+      expect(container.querySelector('.str-chat__icon--pin')).not.toBeInTheDocument();
+    });
+
+    it('should add pinned class and render pin icon when pinned', () => {
+      const { container } = render(renderComponent({ pinned: true }));
+      const button = screen.getByTestId(PREVIEW_TEST_ID);
+      expect(button).toHaveClass('str-chat__channel-list-item--pinned');
+      expect(container.querySelector('.str-chat__icon--pin')).toBeInTheDocument();
+    });
+
+    it('should render both pin and mute icons when pinned and muted', () => {
+      const { container } = render(renderComponent({ muted: true, pinned: true }));
+      const button = screen.getByTestId(PREVIEW_TEST_ID);
+      expect(button).toHaveClass('str-chat__channel-list-item--pinned');
+      expect(button).toHaveClass('str-chat__channel-list-item--muted');
+      expect(container.querySelector('.str-chat__icon--pin')).toBeInTheDocument();
+      expect(container.querySelector('.str-chat__icon--mute')).toBeInTheDocument();
+    });
+  });
 });