feat: inline unread separator and notification redesign

khushal87 · khushal87 · commit 2028cb5f05bf · 2026-03-04T20:20:59.000+05:30
diff --git a/package/src/components/Message/MessageSimple/MessageWrapper.tsx b/package/src/components/Message/MessageSimple/MessageWrapper.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { StyleSheet, View } from 'react-native';
 
@@ -72,10 +72,11 @@ export const MessageWrapper = React.memo((props: MessageWrapperProps) => {
     useStateStore(channelUnreadStateStore.state, channelUnreadStateSelector);
   const {
     theme: {
-      messageList: { messageContainer, inlineDateSeparatorContainer },
+      messageList: { messageContainer },
       screenPadding,
     },
   } = useTheme();
+  const styles = useStyles();
   if (!channel || channel.disconnected) {
     return null;
   }
@@ -95,7 +96,7 @@ export const MessageWrapper = React.memo((props: MessageWrapperProps) => {
 
   const wrapMessageInTheme = client.userID === message.user?.id && !!myMessageTheme;
   const renderDateSeperator = dateSeparatorDate ? (
-    <View style={[styles.dateSeparatorContainer, inlineDateSeparatorContainer]}>
+    <View style={styles.dateSeparatorContainer}>
       <InlineDateSeparator date={dateSeparatorDate} />
     </View>
   ) : null;
@@ -133,13 +134,33 @@ export const MessageWrapper = React.memo((props: MessageWrapperProps) => {
           {renderMessage}
         </View>
       )}
-      {showUnreadUnderlay && <InlineUnreadIndicator />}
+      {showUnreadUnderlay && (
+        <View style={styles.unreadUnderlayContainer}>
+          <InlineUnreadIndicator />
+        </View>
+      )}
     </View>
   );
 });
 
-const styles = StyleSheet.create({
-  dateSeparatorContainer: {
-    paddingVertical: primitives.spacingXs,
-  },
-});
+const useStyles = () => {
+  const {
+    theme: {
+      messageList: { unreadUnderlayContainer, inlineDateSeparatorContainer },
+    },
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        dateSeparatorContainer: {
+          paddingVertical: primitives.spacingXs,
+          ...inlineDateSeparatorContainer,
+        },
+        unreadUnderlayContainer: {
+          paddingVertical: primitives.spacingXs,
+          ...unreadUnderlayContainer,
+        },
+      }),
+    [unreadUnderlayContainer, inlineDateSeparatorContainer],
+  );
+};
diff --git a/package/src/components/MessageList/InlineUnreadIndicator.tsx b/package/src/components/MessageList/InlineUnreadIndicator.tsx
@@ -1,38 +1,53 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { primitives } from '../../theme';
 
 export const InlineUnreadIndicator = () => {
+  const styles = useStyles();
+  const { t } = useTranslationContext();
+
+  return (
+    <View accessibilityLabel='Inline unread indicator' style={styles.container}>
+      <Text style={styles.text}>{t('Unread Messages')}</Text>
+    </View>
+  );
+};
+
+const useStyles = () => {
   const {
     theme: {
-      colors: { grey, light_gray },
       messageList: {
         inlineUnreadIndicator: { container, text },
       },
+      semantics,
     },
   } = useTheme();
-  const { t } = useTranslationContext();
-
-  return (
-    <View
-      accessibilityLabel='Inline unread indicator'
-      style={[styles.container, { backgroundColor: light_gray }, container]}
-    >
-      <Text style={[styles.text, { color: grey }, text]}>{t('Unread Messages')}</Text>
-    </View>
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingVertical: primitives.spacingXs,
+          paddingHorizontal: primitives.spacingSm,
+          backgroundColor: semantics.backgroundCoreSurfaceSubtle,
+          borderTopWidth: 1,
+          borderTopColor: semantics.borderCoreSubtle,
+          borderBottomWidth: 1,
+          borderBottomColor: semantics.borderCoreSubtle,
+          ...container,
+        },
+        text: {
+          color: semantics.chatTextSystem,
+          fontSize: primitives.typographyFontSizeXs,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          lineHeight: primitives.typographyLineHeightTight,
+          ...text,
+        },
+      }),
+    [semantics, container, text],
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginTop: 2,
-    padding: 10,
-  },
-  text: {
-    fontSize: 12,
-  },
-});
diff --git a/package/src/components/MessageList/MessageFlashList.tsx b/package/src/components/MessageList/MessageFlashList.tsx
@@ -1088,7 +1088,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
         layout={LinearTransition.duration(200)}
         style={[
           styles.scrollToBottomButtonContainer,
-          { bottom: messageInputFloating ? messageInputHeight : 16 },
+          { bottom: messageInputFloating ? messageInputHeight : primitives.spacingMd },
         ]}
       >
         <ScrollToBottomButton
@@ -1313,13 +1313,15 @@ const useStyles = () => {
           left: 0,
           position: 'absolute',
           right: 0,
-          top: primitives.spacingXs,
+          top: primitives.spacingMd,
           ...stickyHeaderContainer,
         },
         unreadMessagesNotificationContainer: {
-          alignSelf: 'center',
           position: 'absolute',
-          top: 8,
+          top: primitives.spacingMd,
+          left: 0,
+          right: 0,
+          alignItems: 'center',
           ...unreadMessagesNotificationContainer,
         },
       }),
diff --git a/package/src/components/MessageList/MessageList.tsx b/package/src/components/MessageList/MessageList.tsx
@@ -126,13 +126,15 @@ const useStyles = () => {
           left: 0,
           position: 'absolute',
           right: 0,
-          top: primitives.spacingXs,
+          top: primitives.spacingMd,
           ...stickyHeaderContainer,
         },
         unreadMessagesNotificationContainer: {
-          alignSelf: 'center',
           position: 'absolute',
-          top: 8,
+          top: primitives.spacingMd,
+          left: 0,
+          right: 0,
+          alignItems: 'center',
           ...unreadMessagesNotificationContainer,
         },
       }),
@@ -1310,7 +1312,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
         <Animated.View
           layout={LinearTransition.duration(200)}
           style={[
-            { bottom: messageInputFloating ? messageInputHeight : 16 },
+            { bottom: messageInputFloating ? messageInputHeight : primitives.spacingMd },
             styles.scrollToBottomButtonContainer,
           ]}
         >
diff --git a/package/src/components/MessageList/UnreadMessagesNotification.tsx b/package/src/components/MessageList/UnreadMessagesNotification.tsx
@@ -1,10 +1,13 @@
-import React from 'react';
-import { Pressable, StyleSheet, Text } from 'react-native';
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
 
 import { useChannelContext } from '../../contexts/channelContext/ChannelContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { ArrowUp } from '../../icons/ArrowUp';
 import { NewClose } from '../../icons/NewClose';
+import { primitives } from '../../theme';
+import { Button } from '../ui';
 
 export type UnreadMessagesNotificationProps = {
   /**
@@ -48,57 +51,67 @@ export const UnreadMessagesNotification = (props: UnreadMessagesNotificationProp
     }
   };
 
+  const styles = useStyles();
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.leftButtonContainer}>
+        <Button
+          variant='secondary'
+          type='ghost'
+          LeadingIcon={ArrowUp}
+          label={t('Unread Messages')}
+          onPress={handleOnPress}
+          size='md'
+        />
+      </View>
+      <View style={styles.rightButtonContainer}>
+        <Button
+          variant='secondary'
+          type='ghost'
+          iconOnly
+          LeadingIcon={NewClose}
+          onPress={handleClose}
+          size='md'
+        />
+      </View>
+    </View>
+  );
+};
+
+const useStyles = () => {
   const {
     theme: {
-      colors: { text_low_emphasis, white_snow },
       messageList: {
-        unreadMessagesNotification: { closeButtonContainer, closeIcon, container, text },
+        unreadMessagesNotification: { container, leftButtonContainer, rightButtonContainer },
       },
+      semantics,
     },
   } = useTheme();
-
-  return (
-    <Pressable
-      onPress={handleOnPress}
-      style={({ pressed }) => [
-        styles.container,
-        { backgroundColor: text_low_emphasis, opacity: pressed ? 0.8 : 1 },
-        container,
-      ]}
-    >
-      <Text style={[styles.text, { color: white_snow }, text]}>{t('Unread Messages')}</Text>
-      <Pressable
-        onPress={handleClose}
-        style={({ pressed }) => [
-          {
-            opacity: pressed ? 0.8 : 1,
-          },
-          closeButtonContainer,
-        ]}
-      >
-        <NewClose pathFill={white_snow} {...closeIcon} />
-      </Pressable>
-    </Pressable>
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          borderRadius: primitives.radiusMax,
+          borderWidth: 1,
+          borderColor: semantics.borderCoreDefault,
+          backgroundColor: semantics.backgroundCoreApp,
+          flexDirection: 'row',
+          alignItems: 'center',
+          ...primitives.lightElevation4,
+          ...container,
+        },
+        leftButtonContainer: {
+          flexShrink: 0,
+          borderRightWidth: 1,
+          borderRightColor: semantics.borderCoreDefault,
+          ...leftButtonContainer,
+        },
+        rightButtonContainer: {
+          flexShrink: 0,
+          ...rightButtonContainer,
+        },
+      }),
+    [semantics, container, leftButtonContainer, rightButtonContainer],
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 20,
-    elevation: 4,
-    flexDirection: 'row',
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    shadowColor: '#000',
-    shadowOffset: {
-      height: 2,
-      width: 0,
-    },
-    shadowOpacity: 0.23,
-    shadowRadius: 2.62,
-  },
-  text: {
-    fontWeight: '500',
-    marginRight: 8,
-  },
-});
diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts
@@ -488,6 +488,7 @@ export type Theme = {
     listContainer: ViewStyle;
     messageContainer: ViewStyle;
     inlineDateSeparatorContainer: ViewStyle;
+    unreadUnderlayContainer: ViewStyle;
     messageSystem: {
       container: ViewStyle;
       dateText: TextStyle;
@@ -505,10 +506,9 @@ export type Theme = {
     typingIndicatorContainer: ViewStyle;
     unreadMessagesNotificationContainer: ViewStyle;
     unreadMessagesNotification: {
-      closeButtonContainer: ViewStyle;
-      closeIcon: IconProps;
       container: ViewStyle;
-      text: TextStyle;
+      leftButtonContainer: ViewStyle;
+      rightButtonContainer: ViewStyle;
     };
   };
   messageMenu: {
@@ -1383,6 +1383,7 @@ export const defaultTheme: Theme = {
     listContainer: {},
     messageContainer: {},
     inlineDateSeparatorContainer: {},
+    unreadUnderlayContainer: {},
     messageSystem: {
       container: {},
       dateText: {},
@@ -1399,10 +1400,9 @@ export const defaultTheme: Theme = {
     stickyHeaderContainer: {},
     typingIndicatorContainer: {},
     unreadMessagesNotification: {
-      closeButtonContainer: {},
-      closeIcon: {},
       container: {},
-      text: {},
+      leftButtonContainer: {},
+      rightButtonContainer: {},
     },
     unreadMessagesNotificationContainer: {},
   },
diff --git a/package/src/icons/ArrowUp.tsx b/package/src/icons/ArrowUp.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const ArrowUp = ({ height, width, ...rest }: IconProps) => (
+  <Svg height={height} viewBox='0 0 20 20' fill='none' width={width}>
+    <Path
+      d='M4.79175 8.33333L10.0001 3.125L15.2084 8.33333M10.0001 16.875V3.75'
+      strokeWidth={1.5}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      {...rest}
+    />
+  </Svg>
+);
