Sync mute state

ts/components/conversation/ConversationHeader.stories.tsx

@@ -239,6 +239,22 @@ const stories: Array<ConversationHeaderStory> = [
           outgoingCallButtonStyle: OutgoingCallButtonStyle.Join,
         },
       },
+      {
+        title: 'In a forever muted group',
+        props: {
+          ...commonProps,
+          color: 'signal-blue',
+          title: 'Way too many messages',
+          name: 'Way too many messages',
+          phoneNumber: '',
+          id: '1',
+          type: 'group',
+          expireTimer: 10,
+          acceptedMessageRequest: true,
+          outgoingCallButtonStyle: OutgoingCallButtonStyle.JustVideo,
+          muteExpiresAt: Infinity,
+        },
+      },
     ],
   },
   {

ts/components/conversation/ConversationHeader.tsx

@@ -378,14 +378,24 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
     const muteOptions: Array<MuteOption> = [];
     if (isMuted(muteExpiresAt)) {
       const expires = moment(muteExpiresAt);
-      const muteExpirationLabel = moment().isSame(expires, 'day')
-        ? expires.format('hh:mm A')
-        : expires.format('M/D/YY, hh:mm A');
+
+      let muteExpirationLabel: string;
+      if (Number(muteExpiresAt) >= Number.MAX_SAFE_INTEGER) {
+        muteExpirationLabel = i18n('muteExpirationLabelAlways');
+      } else {
+        const muteExpirationUntil = moment().isSame(expires, 'day')
+          ? expires.format('hh:mm A')
+          : expires.format('M/D/YY, hh:mm A');
+
+        muteExpirationLabel = i18n('muteExpirationLabel', [
+          muteExpirationUntil,
+        ]);
+      }
 
       muteOptions.push(
         ...[
           {
-            name: i18n('muteExpirationLabel', [muteExpirationLabel]),
+            name: muteExpirationLabel,
             disabled: true,
             value: 0,
           },

ts/components/conversationList/ConversationListItem.tsx

@@ -121,9 +121,9 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
       /* eslint-disable no-nested-ternary */
       messageText = (
         <>
-          {muteExpiresAt && Date.now() < muteExpiresAt && (
+          {muteExpiresAt && Date.now() < muteExpiresAt ? (
             <span className={`${MESSAGE_TEXT_CLASS_NAME}__muted`} />
-          )}
+          ) : null}
           {!acceptedMessageRequest ? (
             <span className={`${MESSAGE_TEXT_CLASS_NAME}__message-request`}>
               {i18n('ConversationListItem--message-request')}