Merge pull request #6084 from mattermost/MM-42160-Mention-badge

Adds mention badges to channel list items

app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap

@@ -13,6 +13,7 @@ Object {
             Object {
               "value": Object {
                 "height": 40,
+                "marginVertical": 2,
                 "opacity": 1,
               },
             }
@@ -21,6 +22,7 @@ Object {
           style={
             Object {
               "height": 40,
+              "marginVertical": 2,
               "opacity": 1,
             }
           }
@@ -46,10 +48,10 @@ Object {
               <View
                 style={
                   Object {
+                    "alignItems": "center",
                     "flexDirection": "row",
-                    "marginBottom": 8,
+                    "height": 40,
                     "paddingLeft": 2,
-                    "paddingVertical": 4,
                   }
                 }
               >

app/components/channel_list/categories/body/category_body.tsx

@@ -41,7 +41,7 @@ const CategoryBody = ({currentChannelId, sortedIds, category, hiddenChannelIds,
                 collapsed={category.collapsed}
             />
         );
-    }, [currentChannelId]);
+    }, [currentChannelId, category.collapsed]);
 
     return (
         <FlatList

app/components/channel_list/categories/body/channel/__snapshots__/channel_list_item.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`components/channel_list/categories/body/channel/item should match snaps
     Object {
       "value": Object {
         "height": 40,
+        "marginVertical": 2,
         "opacity": 1,
       },
     }
@@ -14,6 +15,7 @@ exports[`components/channel_list/categories/body/channel/item should match snaps
   style={
     Object {
       "height": 40,
+      "marginVertical": 2,
       "opacity": 1,
     }
   }
@@ -39,10 +41,10 @@ exports[`components/channel_list/categories/body/channel/item should match snaps
       <View
         style={
           Object {
+            "alignItems": "center",
             "flexDirection": "row",
-            "marginBottom": 8,
+            "height": 40,
             "paddingLeft": 2,
-            "paddingVertical": 4,
           }
         }
       >

app/components/channel_list/categories/body/channel/channel_list_item.tsx

@@ -8,6 +8,7 @@ import {TouchableOpacity} from 'react-native-gesture-handler';
 import Animated, {Easing, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 
 import {switchToChannelById} from '@actions/remote/channel';
+import Badge from '@components/badge';
 import ChannelIcon from '@components/channel_icon';
 import {General} from '@constants';
 import {useServerUrl} from '@context/server';
@@ -21,9 +22,9 @@ import type MyChannelModel from '@typings/database/models/servers/my_channel';
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     container: {
         flexDirection: 'row',
-        marginBottom: 8,
         paddingLeft: 2,
-        paddingVertical: 4,
+        height: 40,
+        alignItems: 'center',
     },
     icon: {
         fontSize: 24,
@@ -42,6 +43,16 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     muted: {
         color: changeOpacity(theme.sidebarText, 0.4),
     },
+    badge: {
+        position: 'relative',
+        borderWidth: 0,
+        left: 0,
+        top: 0,
+        alignSelf: undefined,
+    },
+    mutedBadge: {
+        opacity: 0.4,
+    },
 }));
 
 const textStyle = StyleSheet.create({
@@ -65,7 +76,7 @@ const ChannelListItem = ({channel, isActive, isOwnDirectMessage, isMuted, myChan
     const serverUrl = useServerUrl();
 
     // Make it brighter if it's not muted, and highlighted or has unreads
-    const bright = !isMuted && (myChannel.isUnread || myChannel.mentionsCount > 0);
+    const bright = !isMuted && (isActive || myChannel.isUnread || myChannel.mentionsCount > 0);
 
     const sharedValue = useSharedValue(collapsed && !bright);
 
@@ -75,6 +86,7 @@ const ChannelListItem = ({channel, isActive, isOwnDirectMessage, isMuted, myChan
 
     const animatedStyle = useAnimatedStyle(() => {
         return {
+            marginVertical: withTiming(sharedValue.value ? 0 : 2, {duration: 500}),
             height: withTiming(sharedValue.value ? 0 : 40, {duration: 500}),
             opacity: withTiming(sharedValue.value ? 0 : 1, {duration: 500, easing: Easing.inOut(Easing.exp)}),
         };
@@ -85,7 +97,6 @@ const ChannelListItem = ({channel, isActive, isOwnDirectMessage, isMuted, myChan
         if (channel.type === General.GM_CHANNEL) {
             return channel.displayName?.split(',').length;
         }
-
         return 0;
     }, [channel.type, channel.displayName]);
 
@@ -117,6 +128,7 @@ const ChannelListItem = ({channel, isActive, isOwnDirectMessage, isMuted, myChan
                         shared={channel.shared}
                         size={24}
                         type={channel.type}
+                        isMuted={isMuted}
                     />
                     <Text
                         ellipsizeMode='tail'
@@ -125,7 +137,11 @@ const ChannelListItem = ({channel, isActive, isOwnDirectMessage, isMuted, myChan
                     >
                         {displayName}
                     </Text>
-
+                    <Badge
+                        visible={myChannel.mentionsCount > 0}
+                        value={myChannel.mentionsCount}
+                        style={[styles.badge, isMuted && styles.mutedBadge]}
+                    />
                 </View>
             </TouchableOpacity>
         </Animated.View>