feat: message headers redesign

Author: khushal87

examples/SampleApp/src/components/Reminders/MessageReminderHeader.tsx

@@ -176,7 +176,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
   };
 
   const onThreadSelect = useCallback(
-    (thread: LocalMessage | null) => {
+    (thread: LocalMessage | null, targetedMessageId?: string) => {
       if (!thread || !channel) {
         return;
       }
@@ -185,6 +185,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
       navigation.navigate('ThreadScreen', {
         channel,
         thread,
+        targetedMessageId,
       });
     },
     [channel, navigation, setThread],
@@ -233,7 +234,6 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
         initialScrollToFirstUnreadMessage
         keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : -300}
         messageActions={messageActions}
-        MessageHeader={MessageHeader}
         MessageLocation={MessageLocation}
         messageId={messageId}
         NetworkDownIndicator={() => null}

examples/SampleApp/src/icons/Bell.tsx

@@ -15,12 +15,11 @@ import { useStateStore } from 'stream-chat-react-native';
 
 import { ScreenHeader } from '../components/ScreenHeader';
 
-import type { RouteProp } from '@react-navigation/native';
+import { type RouteProp } from '@react-navigation/native';
 
 import type { StackNavigatorParamList } from '../types';
 import { LocalMessage, ThreadState, UserResponse } from 'stream-chat';
 import { useCreateDraftFocusEffect } from '../utils/useCreateDraftFocusEffect.tsx';
-import { MessageReminderHeader } from '../components/Reminders/MessageReminderHeader.tsx';
 import { channelMessageActions } from '../utils/messageActions.tsx';
 import { useStreamChatContext } from '../context/StreamChatContext.tsx';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -74,7 +73,7 @@ const ThreadHeader: React.FC<ThreadHeaderProps> = ({ thread }) => {
 export const ThreadScreen: React.FC<ThreadScreenProps> = ({
   navigation,
   route: {
-    params: { channel, thread },
+    params: { channel, thread, targetedMessageId },
   },
 }) => {
   const {
@@ -87,7 +86,6 @@ export const ThreadScreen: React.FC<ThreadScreenProps> = ({
   const { t } = useTranslationContext();
   const { setThread } = useStreamChatContext();
   const { messageInputFloating, messageListImplementation } = useAppContext();
-
   const onPressMessage: NonNullable<React.ComponentProps<typeof Channel>['onPressMessage']> = (
     payload,
   ) => {
@@ -118,6 +116,13 @@ export const ThreadScreen: React.FC<ThreadScreenProps> = ({
     setThread(null);
   }, [setThread]);
 
+  const onBackPressThread = useCallback(
+    (messageId?: string) => {
+      navigation.popTo('ChannelScreen', { messageId: messageId });
+    },
+    [navigation],
+  );
+
   return (
     <View style={[styles.container, { backgroundColor: white }]}>
       <Channel
@@ -128,14 +133,18 @@ export const ThreadScreen: React.FC<ThreadScreenProps> = ({
         keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : -300}
         messageActions={messageActions}
         messageInputFloating={messageInputFloating}
-        MessageHeader={MessageReminderHeader}
         MessageLocation={MessageLocation}
         onPressMessage={onPressMessage}
         thread={thread}
         threadList
+        onBackPressThread={onBackPressThread}
+        messageId={targetedMessageId}
       >
         <ThreadHeader thread={thread} />
-        <Thread onThreadDismount={onThreadDismount} shouldUseFlashList={messageListImplementation === 'flashlist'} />
+        <Thread
+          onThreadDismount={onThreadDismount}
+          shouldUseFlashList={messageListImplementation === 'flashlist'}
+        />
       </Channel>
     </View>
   );

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -40,6 +40,7 @@ export type StackNavigatorParamList = {
   ThreadScreen: {
     channel: Channel;
     thread: LocalMessage | ThreadType;
+    targetedMessageId?: string;
   };
 };
 

examples/SampleApp/src/screens/ThreadScreen.tsx

@@ -9,8 +9,8 @@ import {
   MessageActionsParams,
   Time,
   TranslationContextValue,
+  Bell,
 } from 'stream-chat-react-native';
-import { Bell } from '../icons/Bell';
 import { Theme } from 'stream-chat-react-native';
 
 export function channelMessageActions({
@@ -94,7 +94,7 @@ export function channelMessageActions({
     },
     actionType: reminder ? 'remove-reminder' : 'remind-me',
     title: reminder ? 'Remove Reminder' : 'Remind Me',
-    icon: <Bell height={20} width={20} pathFill={semantics.textSecondary} />,
+    icon: <Bell height={20} width={20} stroke={semantics.textSecondary} />,
     type: 'standard',
   });
   actions.push({

examples/SampleApp/src/types.ts

@@ -404,7 +404,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
     >
   > &
   Partial<Pick<MessageContextValue, 'isMessageAIGenerated'>> &
-  Partial<Pick<ThreadContextValue, 'allowThreadMessagesInChannel'>> & {
+  Partial<Pick<ThreadContextValue, 'allowThreadMessagesInChannel' | 'onBackPressThread'>> & {
     shouldSyncChannel: boolean;
     thread: ThreadType;
     /**
@@ -704,6 +704,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     onLongPressMessage,
     onPressInMessage,
     onPressMessage,
+    onBackPressThread,
     openPollCreationDialog,
     overrideOwnCapabilities,
     PollContent,
@@ -1984,6 +1985,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
 
   const threadContext = useCreateThreadContext({
     allowThreadMessagesInChannel,
+    onBackPressThread,
     closeThread,
     loadMoreThread,
     openThread,

examples/SampleApp/src/utils/messageActions.tsx

@@ -12,6 +12,7 @@ const selector = (nextValue: ThreadState) =>
 
 export const useCreateThreadContext = ({
   allowThreadMessagesInChannel,
+  onBackPressThread,
   closeThread,
   loadMoreThread,
   openThread,
@@ -39,6 +40,7 @@ export const useCreateThreadContext = ({
 
   return {
     allowThreadMessagesInChannel,
+    onBackPressThread,
     closeThread,
     loadMoreThread,
     openThread,

package/src/components/Channel/Channel.tsx

@@ -79,7 +79,7 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
   if (draftMessage) {
     return (
       <View style={styles.container}>
-        <Text style={styles.draftText}>{t('Draft:')}</Text>
+        <Text style={styles.draftText}>{t('Draft')}:</Text>
         {renderMessagePreview(draftMessage)}
       </View>
     );

package/src/components/Channel/hooks/useCreateThreadContext.ts

@@ -773,6 +773,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           }
         }
       : null,
+    onThreadSelect,
     otherAttachments: attachments.other,
     preventPress: overlayActive ? true : preventPress,
     reactions,