Properly style call buttons across app, when already in a call

ts/state/ducks/calling.ts

@@ -2104,9 +2104,7 @@ const _startCallLinkLobby = async ({
 
   const { activeCallState } = state.calling;
   if (activeCallState && activeCallState.conversationId === roomId) {
-    dispatch({
-      type: TOGGLE_PIP,
-    });
+    dispatch(togglePip());
     return;
   }
   if (activeCallState) {
@@ -2263,7 +2261,13 @@ function startCallingLobby({
       "startCallingLobby: can't start lobby without a conversation"
     );
 
-    if (state.calling.activeCallState) {
+    const { activeCallState } = state.calling;
+
+    if (activeCallState && activeCallState.conversationId === conversationId) {
+      dispatch(togglePip());
+      return;
+    }
+    if (activeCallState) {
       dispatch(
         toggleConfirmLeaveCallModal({
           type: 'conversation',

ts/state/selectors/message.ts

@@ -577,6 +577,7 @@ export const getPropsForQuote = (
 
 export type GetPropsForMessageOptions = Pick<
   GetPropsForBubbleOptions,
+  | 'activeCall'
   | 'conversationSelector'
   | 'ourConversationId'
   | 'ourAci'
@@ -676,6 +677,7 @@ export const getPropsForMessage = (
   const payment = getPayment(message);
 
   const {
+    activeCall,
     accountSelector,
     conversationSelector,
     ourConversationId,
@@ -699,6 +701,7 @@ export const getPropsForMessage = (
   const { sticker } = message;
 
   const isMessageTapToView = isTapToView(message);
+  const activeCallConversationId = activeCall?.conversationId;
 
   const isTargeted = message.id === targetedMessageId;
   const isSelected = selectedMessageIds?.includes(message.id) ?? false;
@@ -726,6 +729,7 @@ export const getPropsForMessage = (
     attachmentDroppedDueToSize,
     author,
     bodyRanges,
+    activeCallConversationId,
     previews,
     quote,
     reactions,

ts/state/smart/CallLinkDetails.tsx

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import type { CallHistoryGroup } from '../../types/CallDisposition';
 import { getIntl } from '../selectors/user';
 import { CallLinkDetails } from '../../components/CallLinkDetails';
-import { getCallLinkSelector } from '../selectors/calling';
+import { getActiveCallState, getCallLinkSelector } from '../selectors/calling';
 import { useGlobalModalActions } from '../ducks/globalModals';
 import { useCallingActions } from '../ducks/calling';
 import * as log from '../../logging/log';
@@ -60,6 +60,11 @@ export const SmartCallLinkDetails = memo(function SmartCallLinkDetails({
     [roomId, updateCallLinkRestrictions]
   );
 
+  const activeCall = useSelector(getActiveCallState);
+  const hasActiveCall = Boolean(
+    activeCall && callLink && activeCall?.conversationId !== callLink?.roomId
+  );
+
   if (callLink == null) {
     log.error(`SmartCallLinkDetails: callLink not found for room ${roomId}`);
     return null;
@@ -69,6 +74,7 @@ export const SmartCallLinkDetails = memo(function SmartCallLinkDetails({
     <CallLinkDetails
       callHistoryGroup={callHistoryGroup}
       callLink={callLink}
+      hasActiveCall={hasActiveCall}
       i18n={i18n}
       onDeleteCallLink={handleDeleteCallLink}
       onOpenCallLinkAddNameModal={handleOpenCallLinkAddNameModal}

ts/state/smart/CallLinkEditModal.tsx

@@ -4,7 +4,7 @@ import React, { memo, useCallback, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { CallLinkEditModal } from '../../components/CallLinkEditModal';
 import { useCallingActions } from '../ducks/calling';
-import { getCallLinkSelector } from '../selectors/calling';
+import { getActiveCallState, getCallLinkSelector } from '../selectors/calling';
 import * as log from '../../logging/log';
 import { getIntl } from '../selectors/user';
 import { useGlobalModalActions } from '../ducks/globalModals';
@@ -74,6 +74,11 @@ export const SmartCallLinkEditModal = memo(
       toggleCallLinkEditModal(null);
     }, [callLink, startCallLinkLobby, toggleCallLinkEditModal]);
 
+    const activeCall = useSelector(getActiveCallState);
+    const hasActiveCall = Boolean(
+      activeCall && callLink && activeCall?.conversationId !== callLink?.roomId
+    );
+
     if (!callLink) {
       log.error(
         'SmartCallLinkEditModal: No call link found for roomId',
@@ -86,6 +91,7 @@ export const SmartCallLinkEditModal = memo(
       <CallLinkEditModal
         i18n={i18n}
         callLink={callLink}
+        hasActiveCall={hasActiveCall}
         onClose={handleClose}
         onCopyCallLink={handleCopyCallLink}
         onOpenCallLinkAddNameModal={handleOpenCallLinkAddNameModal}

ts/state/smart/ConversationDetails.tsx

@@ -154,7 +154,8 @@ export const SmartConversationDetails = memo(function SmartConversationDetails({
     conversation,
     allComposableConversations
   );
-  const hasActiveCall = activeCall != null;
+  const hasActiveCall =
+    activeCall != null && activeCall.conversationId !== conversationId;
   const hasGroupLink =
     conversation.groupLink != null &&
     conversation.accessControlAddFromInviteLink !== ACCESS_ENUM.UNSATISFIABLE;

ts/state/smart/ConversationHeader.tsx

@@ -56,7 +56,7 @@ const useOutgoingCallButtonStyle = (
   const callSelector = useSelector(getCallSelector);
   strictAssert(ourAci, 'useOutgoingCallButtonStyle missing our uuid');
 
-  if (activeCall != null) {
+  if (activeCall?.conversationId === conversation.id) {
     return OutgoingCallButtonStyle.None;
   }
 
@@ -100,6 +100,8 @@ export const SmartConversationHeader = memo(function SmartConversationHeader({
   const hasPanelShowing = useSelector(getHasPanelOpen);
   const outgoingCallButtonStyle = useOutgoingCallButtonStyle(conversation);
   const theme = useSelector(getTheme);
+  const activeCall = useSelector(getActiveCallState);
+  const hasActiveCall = Boolean(activeCall);
 
   const {
     destroyMessages,
@@ -264,6 +266,7 @@ export const SmartConversationHeader = memo(function SmartConversationHeader({
       cannotLeaveBecauseYouAreLastAdmin={cannotLeaveBecauseYouAreLastAdmin}
       conversation={minimalConversation}
       conversationName={conversationName}
+      hasActiveCall={hasActiveCall}
       hasPanelShowing={hasPanelShowing}
       hasStories={hasStories}
       i18n={i18n}