Only count unread stats for other tabs

ts/components/CallsTab.tsx

@@ -26,7 +26,7 @@ enum CallsTabSidebarView {
 type CallsTabProps = Readonly<{
   activeCall: ActiveCallStateType | undefined;
   allConversations: ReadonlyArray<ConversationType>;
-  appUnreadStats: UnreadStats;
+  otherTabsUnreadStats: UnreadStats;
   getCallHistoryGroupsCount: (
     options: CallHistoryFilterOptions
   ) => Promise<number>;
@@ -56,7 +56,7 @@ type CallsTabProps = Readonly<{
 export function CallsTab({
   activeCall,
   allConversations,
-  appUnreadStats,
+  otherTabsUnreadStats,
   getCallHistoryGroupsCount,
   getCallHistoryGroups,
   getConversation,
@@ -158,7 +158,7 @@ export function CallsTab({
               ? i18n('icu:CallsTab__HeaderTitle--CallsList')
               : i18n('icu:CallsTab__HeaderTitle--NewCall')
           }
-          appUnreadStats={appUnreadStats}
+          otherTabsUnreadStats={otherTabsUnreadStats}
           hasFailedStorySends={hasFailedStorySends}
           hasPendingUpdate={hasPendingUpdate}
           navTabsCollapsed={navTabsCollapsed}

ts/components/ChatsTab.tsx

@@ -9,7 +9,7 @@ import { WhatsNewLink } from './WhatsNewLink';
 import type { UnreadStats } from '../util/countUnreadStats';
 
 type ChatsTabProps = Readonly<{
-  appUnreadStats: UnreadStats;
+  otherTabsUnreadStats: UnreadStats;
   i18n: LocalizerType;
   hasPendingUpdate: boolean;
   hasFailedStorySends: boolean;
@@ -24,7 +24,7 @@ type ChatsTabProps = Readonly<{
 }>;
 
 export function ChatsTab({
-  appUnreadStats,
+  otherTabsUnreadStats,
   i18n,
   hasPendingUpdate,
   hasFailedStorySends,
@@ -41,7 +41,7 @@ export function ChatsTab({
     <>
       <div id="LeftPane">
         {renderLeftPane({
-          appUnreadStats,
+          otherTabsUnreadStats,
           collapsed: navTabsCollapsed,
           hasPendingUpdate,
           hasFailedStorySends,

ts/components/LeftPane.stories.tsx

@@ -133,7 +133,7 @@ const useProps = (overrideProps: OverridePropsType = {}): PropsType => {
   );
 
   return {
-    appUnreadStats: {
+    otherTabsUnreadStats: {
       unreadCount: 0,
       unreadMentionsCount: 0,
       markedUnread: false,

ts/components/LeftPane.tsx

@@ -60,7 +60,7 @@ export enum LeftPaneMode {
 }
 
 export type PropsType = {
-  appUnreadStats: UnreadStats;
+  otherTabsUnreadStats: UnreadStats;
   hasExpiredDialog: boolean;
   hasFailedStorySends: boolean;
   hasNetworkDialog: boolean;
@@ -158,7 +158,7 @@ export type PropsType = {
 } & LookupConversationWithoutServiceIdActionsType;
 
 export function LeftPane({
-  appUnreadStats,
+  otherTabsUnreadStats,
   blockConversation,
   challengeStatus,
   clearConversationSearch,
@@ -556,7 +556,7 @@ export function LeftPane({
         modeSpecificProps.mode === LeftPaneMode.SetGroupMetadata
       }
       i18n={i18n}
-      appUnreadStats={appUnreadStats}
+      otherTabsUnreadStats={otherTabsUnreadStats}
       hasFailedStorySends={hasFailedStorySends}
       hasPendingUpdate={hasPendingUpdate}
       navTabsCollapsed={navTabsCollapsed}

ts/components/MyStories.tsx

@@ -24,7 +24,7 @@ import type { UnreadStats } from '../util/countUnreadStats';
 
 export type PropsType = {
   i18n: LocalizerType;
-  appUnreadStats: UnreadStats;
+  otherTabsUnreadStats: UnreadStats;
   hasFailedStorySends: boolean;
   hasPendingUpdate: boolean;
   navTabsCollapsed: boolean;
@@ -46,7 +46,7 @@ export type PropsType = {
 
 export function MyStories({
   i18n,
-  appUnreadStats,
+  otherTabsUnreadStats,
   hasFailedStorySends,
   hasPendingUpdate,
   navTabsCollapsed,
@@ -90,7 +90,7 @@ export function MyStories({
       <NavSidebar
         i18n={i18n}
         title={i18n('icu:MyStories__title')}
-        appUnreadStats={appUnreadStats}
+        otherTabsUnreadStats={otherTabsUnreadStats}
         hasFailedStorySends={hasFailedStorySends}
         hasPendingUpdate={hasPendingUpdate}
         navTabsCollapsed={navTabsCollapsed}

ts/components/NavSidebar.tsx

@@ -54,7 +54,7 @@ export type NavSidebarProps = Readonly<{
   requiresFullWidth: boolean;
   savePreferredLeftPaneWidth: (width: number) => void;
   title: string;
-  appUnreadStats: UnreadStats;
+  otherTabsUnreadStats: UnreadStats;
 }>;
 
 enum DragState {
@@ -77,7 +77,7 @@ export function NavSidebar({
   requiresFullWidth,
   savePreferredLeftPaneWidth,
   title,
-  appUnreadStats,
+  otherTabsUnreadStats,
 }: NavSidebarProps): JSX.Element {
   const [dragState, setDragState] = useState(DragState.INITIAL);
 
@@ -164,7 +164,7 @@ export function NavSidebar({
               onToggleNavTabsCollapse={onToggleNavTabsCollapse}
               hasFailedStorySends={hasFailedStorySends}
               hasPendingUpdate={hasPendingUpdate}
-              appUnreadStats={appUnreadStats}
+              otherTabsUnreadStats={otherTabsUnreadStats}
             />
           )}
           <div

ts/components/NavTabs.tsx

@@ -117,7 +117,7 @@ function NavTabsItem({
 }
 
 export type NavTabPanelProps = Readonly<{
-  appUnreadStats: UnreadStats;
+  otherTabsUnreadStats: UnreadStats;
   collapsed: boolean;
   hasFailedStorySends: boolean;
   hasPendingUpdate: boolean;
@@ -125,7 +125,7 @@ export type NavTabPanelProps = Readonly<{
 }>;
 
 export type NavTabsToggleProps = Readonly<{
-  appUnreadStats: UnreadStats | null;
+  otherTabsUnreadStats: UnreadStats | null;
   i18n: LocalizerType;
   hasFailedStorySends: boolean;
   hasPendingUpdate: boolean;
@@ -138,7 +138,7 @@ export function NavTabsToggle({
   hasFailedStorySends,
   hasPendingUpdate,
   navTabsCollapsed,
-  appUnreadStats,
+  otherTabsUnreadStats,
   onToggleNavTabsCollapse,
 }: NavTabsToggleProps): JSX.Element {
   function handleToggle() {
@@ -169,7 +169,7 @@ export function NavTabsToggle({
             <span className="NavTabs__ItemLabel">{label}</span>
             <NavTabsItemBadges
               i18n={i18n}
-              unreadStats={appUnreadStats}
+              unreadStats={otherTabsUnreadStats}
               hasError={hasFailedStorySends}
               hasPendingUpdate={hasPendingUpdate}
             />
@@ -245,7 +245,7 @@ export function NavTabs({
           // These are all shown elsewhere when nav tabs are shown
           hasFailedStorySends={false}
           hasPendingUpdate={false}
-          appUnreadStats={null}
+          otherTabsUnreadStats={null}
         />
         <TabList
           className="NavTabs__TabList"

ts/components/StoriesTab.tsx

@@ -28,7 +28,7 @@ import type { UnreadStats } from '../util/countUnreadStats';
 
 export type PropsType = {
   addStoryData: AddStoryData;
-  appUnreadStats: UnreadStats;
+  otherTabsUnreadStats: UnreadStats;
   deleteStoryForEveryone: (story: StoryViewType) => unknown;
   getPreferredBadge: PreferredBadgeSelectorType;
   hasFailedStorySends: boolean;
@@ -65,7 +65,7 @@ export type PropsType = {
 
 export function StoriesTab({
   addStoryData,
-  appUnreadStats,
+  otherTabsUnreadStats,
   deleteStoryForEveryone,
   getPreferredBadge,
   hasFailedStorySends,
@@ -111,7 +111,7 @@ export function StoriesTab({
       {addStoryData && renderStoryCreator()}
       {isMyStories && myStories.length ? (
         <MyStories
-          appUnreadStats={appUnreadStats}
+          otherTabsUnreadStats={otherTabsUnreadStats}
           hasFailedStorySends={hasFailedStorySends}
           hasPendingUpdate={hasPendingUpdate}
           hasViewReceiptSetting={hasViewReceiptSetting}
@@ -142,7 +142,7 @@ export function StoriesTab({
           preferredLeftPaneWidth={preferredLeftPaneWidth}
           requiresFullWidth
           savePreferredLeftPaneWidth={savePreferredLeftPaneWidth}
-          appUnreadStats={appUnreadStats}
+          otherTabsUnreadStats={otherTabsUnreadStats}
           actions={
             <>
               <StoriesAddStoryButton

ts/state/selectors/nav.ts

@@ -3,10 +3,11 @@
 
 import { createSelector } from 'reselect';
 import type { StateType } from '../reducer';
-import type { NavStateType } from '../ducks/nav';
+import { NavTab, type NavStateType } from '../ducks/nav';
 import { getAllConversationsUnreadStats } from './conversations';
 import { getStoriesNotificationCount } from './stories';
 import type { UnreadStats } from '../../util/countUnreadStats';
+import { getCallHistoryUnreadCount } from './callHistory';
 
 function getNav(state: StateType): NavStateType {
   return state.nav;
@@ -16,16 +17,40 @@ export const getSelectedNavTab = createSelector(getNav, nav => {
   return nav.selectedNavTab;
 });
 
-export const getAppUnreadStats = createSelector(
+export const getOtherTabsUnreadStats = createSelector(
+  getSelectedNavTab,
   getAllConversationsUnreadStats,
+  getCallHistoryUnreadCount,
   getStoriesNotificationCount,
-  (conversationsUnreadStats, storiesNotificationCount): UnreadStats => {
+  (
+    selectedNavTab,
+    conversationsUnreadStats,
+    callHistoryUnreadCount,
+    storiesNotificationCount
+  ): UnreadStats => {
+    let unreadCount = 0;
+    let unreadMentionsCount = 0;
+    let markedUnread = false;
+
+    if (selectedNavTab !== NavTab.Chats) {
+      unreadCount += conversationsUnreadStats.unreadCount;
+      unreadMentionsCount += conversationsUnreadStats.unreadMentionsCount;
+      markedUnread ||= conversationsUnreadStats.markedUnread;
+    }
+
+    // Note: Conversation unread stats includes the call history unread count.
+    if (selectedNavTab !== NavTab.Calls) {
+      unreadCount += callHistoryUnreadCount;
+    }
+
+    if (selectedNavTab !== NavTab.Stories) {
+      unreadCount += storiesNotificationCount;
+    }
+
     return {
-      // Note: Conversation unread stats includes the call history unread count.
+      unreadCount,
-      unreadCount:
+      unreadMentionsCount,
-        conversationsUnreadStats.unreadCount + storiesNotificationCount,
+      markedUnread,
-      unreadMentionsCount: conversationsUnreadStats.unreadMentionsCount,
-      markedUnread: conversationsUnreadStats.markedUnread,
     };
   }
 );

ts/state/smart/CallsTab.tsx

@@ -29,7 +29,7 @@ import { useCallHistoryActions } from '../ducks/callHistory';
 import { getCallHistoryEdition } from '../selectors/callHistory';
 import { getHasPendingUpdate } from '../selectors/updates';
 import { getHasAnyFailedStorySends } from '../selectors/stories';
-import { getAppUnreadStats } from '../selectors/nav';
+import { getOtherTabsUnreadStats } from '../selectors/nav';
 
 function getCallHistoryFilter(
   allConversations: Array<ConversationType>,
@@ -96,7 +96,7 @@ export function SmartCallsTab(): JSX.Element {
 
   const hasPendingUpdate = useSelector(getHasPendingUpdate);
   const hasFailedStorySends = useSelector(getHasAnyFailedStorySends);
-  const appUnreadStats = useSelector(getAppUnreadStats);
+  const otherTabsUnreadStats = useSelector(getOtherTabsUnreadStats);
 
   const {
     onOutgoingAudioCallInConversation,
@@ -153,7 +153,7 @@ export function SmartCallsTab(): JSX.Element {
     <CallsTab
       activeCall={activeCall}
       allConversations={allConversations}
-      appUnreadStats={appUnreadStats}
+      otherTabsUnreadStats={otherTabsUnreadStats}
       getConversation={getConversation}
       getCallHistoryGroupsCount={getCallHistoryGroupsCount}
       getCallHistoryGroups={getCallHistoryGroups}

ts/state/smart/ChatsTab.tsx

@@ -22,7 +22,7 @@ import { getNavTabsCollapsed } from '../selectors/items';
 import { useItemsActions } from '../ducks/items';
 import { getHasAnyFailedStorySends } from '../selectors/stories';
 import { getHasPendingUpdate } from '../selectors/updates';
-import { getAppUnreadStats } from '../selectors/nav';
+import { getOtherTabsUnreadStats } from '../selectors/nav';
 
 function renderConversationView() {
   return <SmartConversationView />;
@@ -41,7 +41,7 @@ export function SmartChatsTab(): JSX.Element {
   const navTabsCollapsed = useSelector(getNavTabsCollapsed);
   const hasFailedStorySends = useSelector(getHasAnyFailedStorySends);
   const hasPendingUpdate = useSelector(getHasPendingUpdate);
-  const appUnreadStats = useSelector(getAppUnreadStats);
+  const otherTabsUnreadStats = useSelector(getOtherTabsUnreadStats);
 
   const { selectedConversationId, targetedMessage, targetedMessageSource } =
     useSelector<StateType, ConversationsStateType>(
@@ -144,7 +144,7 @@ export function SmartChatsTab(): JSX.Element {
 
   return (
     <ChatsTab
-      appUnreadStats={appUnreadStats}
+      otherTabsUnreadStats={otherTabsUnreadStats}
       i18n={i18n}
       hasFailedStorySends={hasFailedStorySends}
       hasPendingUpdate={hasPendingUpdate}

ts/state/smart/StoriesTab.tsx

@@ -32,7 +32,7 @@ import { useToastActions } from '../ducks/toast';
 import { useAudioPlayerActions } from '../ducks/audioPlayer';
 import { useItemsActions } from '../ducks/items';
 import { getHasPendingUpdate } from '../selectors/updates';
-import { getAppUnreadStats } from '../selectors/nav';
+import { getOtherTabsUnreadStats } from '../selectors/nav';
 
 function renderStoryCreator(): JSX.Element {
   return <SmartStoryCreator />;
@@ -71,7 +71,7 @@ export function SmartStoriesTab(): JSX.Element | null {
   const hasViewReceiptSetting = useSelector(getHasStoryViewReceiptSetting);
   const hasPendingUpdate = useSelector(getHasPendingUpdate);
   const hasFailedStorySends = useSelector(getHasAnyFailedStorySends);
-  const appUnreadStats = useSelector(getAppUnreadStats);
+  const otherTabsUnreadStats = useSelector(getOtherTabsUnreadStats);
 
   const remoteConfig = useSelector(getRemoteConfig);
   const maxAttachmentSizeInKb = getMaximumAttachmentSizeInKb(
@@ -98,7 +98,7 @@ export function SmartStoriesTab(): JSX.Element | null {
 
   return (
     <StoriesTab
-      appUnreadStats={appUnreadStats}
+      otherTabsUnreadStats={otherTabsUnreadStats}
       addStoryData={addStoryData}
       getPreferredBadge={getPreferredBadge}
       hasFailedStorySends={hasFailedStorySends}