Add muted icon in calls tab

Co-authored-by: trevor-signal <131492920+trevor-signal@users.noreply.github.com>
Co-authored-by: Backport Bot <backport-bot@signal.org>

_locales/en/messages.json

@@ -1378,6 +1378,10 @@
     "messageformat": "Mute",
     "description": "Shown in a button when a conversation is unmuted and can be muted"
   },
+  "icu:muted": {
+    "messageformat": "Muted",
+    "description": "Label for icon showing conversation is muted"
+  },
   "icu:cannotUpdateDetail-v2": {
     "messageformat": "Signal couldn't update. <retryUpdateButton>Retry update</retryUpdateButton> or visit {url} to install it manually. Then, <contactSupportLink>contact support</contactSupportLink> about this problem",
     "description": "Shown if a general error happened while trying to install update package"

stylesheets/components/CallsTab.scss

@@ -285,10 +285,6 @@
   width: 60%;
 }
 
-.CallsList__ItemTitle {
-  font-weight: bold;
-}
-
 // Override .ListTile__subtitle so ellipsis is correct color
 .CallsList__Item--missed .ListTile__subtitle,
 .CallsList__Item--declined .ListTile__subtitle {

ts/components/CallsList.dom.tsx

@@ -60,6 +60,13 @@ import { DAY, MINUTE, SECOND } from '../util/durations/index.std.ts';
 import type { StartCallData } from './ConfirmLeaveCallModal.dom.tsx';
 import { Button, ButtonVariant } from './Button.dom.tsx';
 import type { ICUJSXMessageParamsByKeyType } from '../types/Util.std.ts';
+import {
+  getNotifyWhileMuted,
+  type NotifyWhileMuted,
+} from '../util/notifyWhileMuted.std.ts';
+import { AxoSymbol } from '../axo/AxoSymbol.dom.tsx';
+import { tw } from '../axo/tw.dom.tsx';
+import { isConversationMuted } from '../util/isConversationMuted.std.ts';
 
 const log = createLogger('CallsList');
 
@@ -134,6 +141,7 @@ type CallsListProps = Readonly<{
   getCall: (id: string) => CallStateType | undefined;
   getCallLink: (id: string) => CallLinkType | undefined;
   getConversation: (id: string) => ConversationType | void;
+  globalNotifyWhileMuted: NotifyWhileMuted;
   hangUpActiveCall: (reason: string) => void;
   i18n: LocalizerType;
   selectedCallHistoryGroup: CallHistoryGroup | null;
@@ -179,6 +187,7 @@ export function CallsList({
   getCall,
   getCallLink,
   getConversation,
+  globalNotifyWhileMuted,
   i18n,
   selectedCallHistoryGroup,
   onCreateCallLink,
@@ -891,6 +900,10 @@ export function CallsList({
         />
       );
 
+      const isMutedForCalls =
+        isConversationMuted(conversation) &&
+        !getNotifyWhileMuted(conversation, globalNotifyWhileMuted).calls;
+
       return (
         <div
           key={key}
@@ -924,8 +937,20 @@ export function CallsList({
             }
             trailing={isCallButtonVisible ? callButton : undefined}
             title={
-              <span className="CallsList__ItemTitle">
-                <UserText text={conversation.title} />
+              <span className={tw('flex items-center font-semibold')}>
+                <span className={tw('truncate')}>
+                  <UserText text={conversation.title} />
+                </span>
+                {isMutedForCalls ? (
+                  <span
+                    className={tw('ms-2 shrink-0 font-regular text-secondary')}
+                  >
+                    <AxoSymbol.InlineGlyph
+                      symbol="bell-slash"
+                      label={i18n('icu:muted')}
+                    />
+                  </span>
+                ) : null}
               </span>
             }
             subtitleMaxLines={1}
@@ -973,6 +998,7 @@ export function CallsList({
       getIsAnybodyInCall,
       getIsCallActive,
       getIsInCall,
+      globalNotifyWhileMuted,
       hasMissedCallFilter,
       hasSearchStateQuery,
       selectedCallHistoryGroup,

ts/components/CallsTab.dom.tsx

@@ -25,6 +25,7 @@ import { I18n } from './I18n.dom.tsx';
 import { AxoDropdownMenu } from '../axo/AxoDropdownMenu.dom.tsx';
 import type { SmartPropsType as SmartToastManagerPropsType } from '../state/smart/ToastManager.preload.tsx';
 import { AxoConfirmDialog } from '../axo/AxoConfirmDialog.dom.tsx';
+import type { NotifyWhileMuted } from '../util/notifyWhileMuted.std.ts';
 
 enum CallsTabSidebarView {
   CallsListView,
@@ -48,6 +49,7 @@ type CallsTabProps = Readonly<{
   getCallLink: (id: string) => CallLinkType | undefined;
   getCallIdFromEra: typeof getCallIdFromEra;
   getConversation: (id: string) => ConversationType | void;
+  globalNotifyWhileMuted: NotifyWhileMuted;
   hangUpActiveCall: (reason: string) => void;
   hasAnyAdminCallLinks: boolean;
   hasFailedStorySends: boolean;
@@ -103,6 +105,7 @@ export function CallsTab({
   getCall,
   getCallLink,
   getConversation,
+  globalNotifyWhileMuted,
   hangUpActiveCall,
   hasAnyAdminCallLinks,
   hasFailedStorySends,
@@ -264,6 +267,7 @@ export function CallsTab({
               getCallIdFromEra={getCallIdFromEra}
               getCallLink={getCallLink}
               getConversation={getConversation}
+              globalNotifyWhileMuted={globalNotifyWhileMuted}
               hangUpActiveCall={hangUpActiveCall}
               i18n={i18n}
               selectedCallHistoryGroup={selectedView?.callHistoryGroup ?? null}

ts/state/smart/CallsTab.preload.tsx

@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux';
 import { DataReader } from '../../sql/Client.preload.ts';
 import { useItemsActions } from '../ducks/items.preload.ts';
 import {
+  getGlobalNotifyWhileMuted,
   getNavTabsCollapsed,
   getPreferredLeftPaneWidth,
 } from '../selectors/items.dom.ts';
@@ -140,6 +141,7 @@ export const SmartCallsTab = memo(function SmartCallsTab() {
 
   const allCallLinks = useSelector(getAllCallLinks);
   const allConversations = useSelector(getAllConversations);
+  const globalNotifyWhileMuted = useSelector(getGlobalNotifyWhileMuted);
   const regionCode = useSelector(getRegionCode);
   const getConversation = useSelector(getConversationSelector);
   const getAdhocCall = useSelector(getAdhocCallSelector);
@@ -232,6 +234,7 @@ export const SmartCallsTab = memo(function SmartCallsTab() {
       getCall={getCall}
       getCallLink={getCallLink}
       callHistoryEdition={callHistoryEdition}
+      globalNotifyWhileMuted={globalNotifyWhileMuted}
       hangUpActiveCall={hangUpActiveCall}
       hasAnyAdminCallLinks={hasAnyAdminCallLinks}
       hasFailedStorySends={hasFailedStorySends}