feat: redesign ChannelHeader

examples/vite/src/stream-imports-layout.scss

@@ -9,7 +9,7 @@
 //@use 'stream-chat-react/dist/scss/v2/AudioRecorder/AudioRecorder-layout';
 //@use 'stream-chat-react/dist/scss/v2/BaseImage/BaseImage-layout';
 //@use 'stream-chat-react/dist/scss/v2/Channel/Channel-layout';
-@use 'stream-chat-react/dist/scss/v2/ChannelHeader/ChannelHeader-layout';
+//@use 'stream-chat-react/dist/scss/v2/ChannelHeader/ChannelHeader-layout';
 @use 'stream-chat-react/dist/scss/v2/ChannelList/ChannelList-layout';
 @use 'stream-chat-react/dist/scss/v2/ChannelPreview/ChannelPreview-layout';
 @use 'stream-chat-react/dist/scss/v2/ChannelSearch/ChannelSearch-layout';

examples/vite/src/stream-imports-theme.scss

@@ -9,7 +9,7 @@
 //@use 'stream-chat-react/dist/scss/v2/Autocomplete/Autocomplete-theme';
 //@use 'stream-chat-react/dist/scss/v2/BaseImage/BaseImage-theme';
 //@use 'stream-chat-react/dist/scss/v2/Channel/Channel-theme.scss';
-@use 'stream-chat-react/dist/scss/v2/ChannelHeader/ChannelHeader-theme';
+//@use 'stream-chat-react/dist/scss/v2/ChannelHeader/ChannelHeader-theme';
 @use 'stream-chat-react/dist/scss/v2/ChannelList/ChannelList-theme';
 @use 'stream-chat-react/dist/scss/v2/ChannelPreview/ChannelPreview-theme';
 @use 'stream-chat-react/dist/scss/v2/ChannelSearch/ChannelSearch-theme';

src/components/Attachment/AttachmentActions.tsx

@@ -70,10 +70,9 @@ const UnMemoizedAttachmentActions = (props: AttachmentActionsProps) => {
         <span>{text}</span>
         {actions.map((action, index) => (
           <Button
+            appearance='ghost'
             className={clsx(
               `str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--${action.style}`,
-              'str-chat__button--ghost',
-              'str-chat__button--secondary',
             )}
             data-testid={`${action.name}`}
             data-value={action.value}
@@ -82,6 +81,7 @@ const UnMemoizedAttachmentActions = (props: AttachmentActionsProps) => {
             ref={(element) => {
               buttonRefs.current[index] = element;
             }}
+            variant='secondary'
           >
             {action.text ? (knownActionText[action.text] ?? t(action.text)) : null}
           </Button>

src/components/Attachment/components/PlaybackRateButton.tsx

@@ -9,7 +9,6 @@ export const PlaybackRateButton = ({ children, onClick }: PlaybackRateButtonProp
     className={clsx('str-chat__message_attachment__playback-rate-button')}
     data-testid='playback-rate-button'
     onClick={onClick}
-    type='button'
   >
     {children}
   </Button>

src/components/Button/Button.tsx

@@ -2,18 +2,56 @@ import type { ComponentProps } from 'react';
 import { forwardRef } from 'react';
 import clsx from 'clsx';
 
-export type ButtonProps = ComponentProps<'button'>;
+export type ButtonVariant = 'primary' | 'secondary' | 'danger';
+export type ButtonAppearance = 'solid' | 'outline' | 'ghost';
+export type ButtonSize = 'lg' | 'md' | 'sm';
+
+export type ButtonProps = ComponentProps<'button'> & {
+  /** Semantic variant: primary, secondary, or danger (maps to destructive in styles). */
+  variant?: ButtonVariant;
+  /** Visual style: solid, outline, or ghost. */
+  appearance?: ButtonAppearance;
+  /** When true, uses full border-radius for icon-only/pill shape. */
+  circular?: boolean;
+  /** Size: lg, md, or sm. */
+  size?: ButtonSize;
+};
+
+const variantToClass: Record<ButtonVariant, string> = {
+  danger: 'str-chat__button--destructive',
+  primary: 'str-chat__button--primary',
+  secondary: 'str-chat__button--secondary',
+};
+
+const appearanceToClass: Record<ButtonAppearance, string> = {
+  ghost: 'str-chat__button--ghost',
+  outline: 'str-chat__button--outline',
+  solid: 'str-chat__button--solid',
+};
+
+const sizeToClass: Record<ButtonSize, string> = {
+  lg: 'str-chat__button--size-lg',
+  md: 'str-chat__button--size-md',
+  sm: 'str-chat__button--size-sm',
+};
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { className, ...props },
+  { appearance, circular, className, size, variant, ...props },
   ref,
 ) {
   return (
     <button
       ref={ref}
       type='button'
       {...props}
-      className={clsx('str-chat__button', className)}
+      className={clsx(
+        'str-chat__button',
+        variant != null && variantToClass[variant],
+        appearance != null && appearanceToClass[appearance],
+        circular && 'str-chat__button--circular',
+        size != null && sizeToClass[size],
+        className,
+      )}
     />
   );
 });

src/components/Button/PlayButton.tsx

@@ -9,16 +9,13 @@ export type PlayButtonProps = ComponentProps<'button'> & {
 
 export const PlayButton = ({ className, isPlaying, ...props }: PlayButtonProps) => (
   <Button
-    {...props}
-    className={clsx(
-      'str-chat__button-play',
-      'str-chat__button--secondary',
-      'str-chat__button--outline',
-      'str-chat__button--size-sm',
-      'str-chat__button--circular',
-      className,
-    )}
+    appearance='outline'
+    circular
+    className={clsx('str-chat__button-play', className)}
     data-testid={isPlaying ? 'pause-audio' : 'play-audio'}
+    size='sm'
+    variant='secondary'
+    {...props}
   >
     {isPlaying ? <IconPause /> : <IconPlaySolid />}
   </Button>

src/components/ChannelHeader/ChannelHeader.tsx

@@ -1,22 +1,25 @@
 import React from 'react';
 
-import { MenuIcon as DefaultMenuIcon } from './icons';
+import { IconLayoutAlignLeft } from '../Icons/icons';
 import { Avatar as DefaultAvatar } from '../Avatar';
+import { useChannelHeaderOnlineStatus } from './hooks/useChannelHeaderOnlineStatus';
 import { useChannelPreviewInfo } from '../ChannelPreview/hooks/useChannelPreviewInfo';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import type { ChannelAvatarProps } from '../Avatar';
+import { Button } from '../Button';
+import clsx from 'clsx';
 
 export type ChannelHeaderProps = {
   /** UI component to display an avatar, defaults to [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) component and accepts the same props as: [ChannelAvatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/ChannelAvatar.tsx) */
   Avatar?: React.ComponentType<ChannelAvatarProps>;
   /** Manually set the image to render, defaults to the Channel image */
   image?: string;
-  /** Show a little indicator that the Channel is live right now */
-  live?: boolean;
   /** UI component to display menu icon, defaults to [MenuIcon](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelHeader/ChannelHeader.tsx)*/
   MenuIcon?: React.ComponentType;
+  /** When true, shows IconLayoutAlignLeft instead of MenuIcon for sidebar expansion */
+  sidebarCollapsed?: boolean;
   /** Set title manually */
   title?: string;
 };
@@ -28,58 +31,53 @@ export const ChannelHeader = (props: ChannelHeaderProps) => {
   const {
     Avatar = DefaultAvatar,
     image: overrideImage,
-    live,
-    MenuIcon = DefaultMenuIcon,
+    MenuIcon = IconLayoutAlignLeft,
+    sidebarCollapsed = true,
     title: overrideTitle,
   } = props;
 
-  const { channel, watcher_count } = useChannelStateContext('ChannelHeader');
+  const { channel } = useChannelStateContext();
   const { openMobileNav } = useChatContext('ChannelHeader');
   const { t } = useTranslationContext('ChannelHeader');
   const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
     channel,
     overrideImage,
     overrideTitle,
   });
-
-  const { member_count, subtitle } = channel?.data || {};
+  const onlineStatusText = useChannelHeaderOnlineStatus();
 
   return (
-    <div className='str-chat__channel-header'>
-      <button
-        aria-label={t('aria/Menu')}
-        className='str-chat__header-hamburger'
+    <div
+      className={clsx('str-chat__channel-header', {
+        'str-chat__channel-header--sidebar-collapsed': sidebarCollapsed,
+      })}
+    >
+      <Button
+        appearance='ghost'
+        aria-label={sidebarCollapsed ? t('aria/Expand sidebar') : t('aria/Menu')}
+        circular
+        className='str-chat__header-sidebar-toggle'
         onClick={openMobileNav}
+        size='md'
+        variant='secondary'
       >
-        <MenuIcon />
-      </button>
+        {sidebarCollapsed && <MenuIcon />}
+      </Button>
+      <div className='str-chat__channel-header__data'>
+        <div className='str-chat__channel-header__data__title'>{displayTitle}</div>
+        {onlineStatusText != null && (
+          <div className='str-chat__channel-header__data__subtitle'>
+            {onlineStatusText}
+          </div>
+        )}
+      </div>
       <Avatar
         className='str-chat__avatar--channel-header'
         groupChannelDisplayInfo={groupChannelDisplayInfo}
         imageUrl={displayImage}
         size='lg'
         userName={displayTitle}
       />
-      <div className='str-chat__channel-header-end'>
-        <p className='str-chat__channel-header-title'>
-          {displayTitle}{' '}
-          {live && (
-            <span className='str-chat__header-livestream-livelabel'>{t('live')}</span>
-          )}
-        </p>
-        {subtitle && <p className='str-chat__channel-header-subtitle'>{subtitle}</p>}
-        <p className='str-chat__channel-header-info'>
-          {!live && !!member_count && member_count > 0 && (
-            <>
-              {t('{{ memberCount }} members', {
-                memberCount: member_count,
-              })}
-              ,{' '}
-            </>
-          )}
-          {t('{{ watcherCount }} online', { watcherCount: watcher_count })}
-        </p>
-      </div>
     </div>
   );
 };

src/components/ChannelHeader/hooks/useChannelHeaderOnlineStatus.ts

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import type { ChannelState } from 'stream-chat';
+
+import { useChannelStateContext } from '../../../context/ChannelStateContext';
+import { useChatContext } from '../../../context/ChatContext';
+import { useTranslationContext } from '../../../context/TranslationContext';
+
+/**
+ * Returns the channel header online status text (e.g. "Online", "Offline", or "X members, Y online").
+ * Returns null when the channel has no members (nothing to show).
+ */
+export function useChannelHeaderOnlineStatus(): string | null {
+  const { t } = useTranslationContext();
+  const { client } = useChatContext();
+  const { channel, watcherCount = 0 } = useChannelStateContext();
+  const { member_count: memberCount = 0 } = channel?.data || {};
+
+  // todo: we need reactive state for watchers in LLC
+  const [watchers, setWatchers] = useState<ChannelState['watchers']>(() =>
+    Object.assign({}, channel?.state?.watchers ?? {}),
+  );
+
+  useEffect(() => {
+    if (!channel) return;
+    const subscription = channel.on('user.watching.start', (event) => {
+      setWatchers((prev) => {
+        if (!event.user?.id) return prev;
+        if (prev[event.user.id]) return prev;
+        return Object.assign({ [event.user.id]: event.user }, prev);
+      });
+    });
+    return () => subscription.unsubscribe();
+  }, [channel]);
+
+  if (!memberCount) return null;
+
+  const isDmChannel =
+    memberCount === 1 ||
+    (memberCount === 2 &&
+      Object.values(channel?.state?.members ?? {}).some(
+        ({ user }) => user?.id === client.user?.id,
+      ));
+
+  if (isDmChannel) {
+    const hasWatchers = Object.keys(watchers).length > 0;
+    return hasWatchers ? t('Online') : t('Offline');
+  }
+
+  return `${t('{{ memberCount }} members', { memberCount })}, ${t('{{ watcherCount }} online', { watcherCount })}`;
+}