Add badge to thread screen (#7404)

* Add mention badge to global threads and threads screens

* Tablet fix

* Remove changes on Thread screen

app/actions/remote/channel.ts

@@ -7,7 +7,6 @@ import {DeviceEventEmitter} from 'react-native';
 import {addChannelToDefaultCategory, storeCategories} from '@actions/local/category';
 import {markChannelAsViewed, removeCurrentUserFromChannel, setChannelDeleteAt, storeMyChannelsForTeam, switchToChannel} from '@actions/local/channel';
 import {switchToGlobalThreads} from '@actions/local/thread';
-import {getIsCRTEnabled} from '@app/queries/servers/thread';
 import {loadCallForChannel} from '@calls/actions/calls';
 import {DeepLink, Events, General, Preferences, Screens} from '@constants';
 import DatabaseManager from '@database/manager';
@@ -20,6 +19,7 @@ import {prepareMyChannelsForTeam, getChannelById, getChannelByName, getMyChannel
 import {queryDisplayNamePreferences} from '@queries/servers/preference';
 import {getCommonSystemValues, getConfig, getCurrentChannelId, getCurrentTeamId, getCurrentUserId, getLicense, setCurrentChannelId, setCurrentTeamAndChannelId} from '@queries/servers/system';
 import {getNthLastChannelFromTeam, getMyTeamById, getTeamByName, queryMyTeams, removeChannelFromTeamHistory} from '@queries/servers/team';
+import {getIsCRTEnabled} from '@queries/servers/thread';
 import {getCurrentUser} from '@queries/servers/user';
 import {dismissAllModalsAndPopToRoot} from '@screens/navigation';
 import EphemeralStore from '@store/ephemeral_store';

app/components/other_mentions_badge/index.tsx

@@ -1,10 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 
 import Badge from '@components/badge';
+import {Screens} from '@constants';
+import {useServerUrl} from '@context/server';
 import {subscribeAllServers} from '@database/subscription/servers';
 import {subscribeMentionsByServer} from '@database/subscription/unreads';
 
@@ -27,9 +29,9 @@ const styles = StyleSheet.create({
     },
 });
 
-const subscriptions: Map<string, UnreadSubscription> = new Map();
-
 const OtherMentionsBadge = ({channelId}: Props) => {
+    const currentServerUrl = useServerUrl();
+    const subscriptions: Map<string, UnreadSubscription> = useRef(new Map()).current;
     const [count, setCount] = useState(0);
 
     const updateCount = () => {
@@ -50,7 +52,10 @@ const OtherMentionsBadge = ({channelId}: Props) => {
                 }
             }
 
-            unreads.mentions = mentions + threadMentionCount;
+            unreads.mentions = mentions;
+            if (serverUrl !== currentServerUrl || channelId !== Screens.GLOBAL_THREADS) {
+                unreads.mentions += threadMentionCount;
+            }
             subscriptions.set(serverUrl, unreads);
             updateCount();
         }

app/screens/channel/header/header.tsx

@@ -11,6 +11,7 @@ import CompassIcon from '@components/compass_icon';
 import CustomStatusEmoji from '@components/custom_status/custom_status_emoji';
 import NavigationHeader from '@components/navigation_header';
 import {ITEM_HEIGHT} from '@components/option_item';
+import OtherMentionsBadge from '@components/other_mentions_badge';
 import RoundedHeaderContext from '@components/rounded_header_context';
 import {General, Screens} from '@constants';
 import {useTheme} from '@context/theme';
@@ -23,7 +24,6 @@ import {preventDoubleTap} from '@utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
 
-import OtherMentionsBadge from './other_mentions_badge';
 import QuickActions, {MARGIN, SEPARATOR_HEIGHT} from './quick_actions';
 
 import type {HeaderRightButton} from '@components/navigation_header/header';

app/screens/global_threads/global_threads.tsx

@@ -8,7 +8,9 @@ import {type Edge, SafeAreaView} from 'react-native-safe-area-context';
 
 import {setGlobalThreadsTab} from '@actions/local/systems';
 import NavigationHeader from '@components/navigation_header';
+import OtherMentionsBadge from '@components/other_mentions_badge';
 import RoundedHeaderContext from '@components/rounded_header_context';
+import {Screens} from '@constants';
 import {useServerUrl} from '@context/server';
 import useAndroidHardwareBackHandler from '@hooks/android_back_handler';
 import {useIsTablet} from '@hooks/device';
@@ -49,6 +51,14 @@ const GlobalThreads = ({componentId, globalThreadsTab}: Props) => {
         return {flex: 1, marginTop};
     }, [defaultHeight]);
 
+    const headerLeftComponent = useMemo(() => {
+        if (isTablet) {
+            return undefined;
+        }
+
+        return (<OtherMentionsBadge channelId={Screens.GLOBAL_THREADS}/>);
+    }, [isTablet]);
+
     useEffect(() => {
         mounted.current = true;
         return () => {
@@ -85,6 +95,7 @@ const GlobalThreads = ({componentId, globalThreadsTab}: Props) => {
                         defaultMessage: 'Threads',
                     })
                 }
+                leftComponent={headerLeftComponent}
             />
             <View style={contextStyle}>
                 <RoundedHeaderContext/>