Adjust Raised Hands button and toast visibility

stylesheets/_variables.scss

@@ -293,3 +293,5 @@ $NavTabs__Item__blockPadding: 2px;
 $NavTabs__Toggle__blockPadding: 8px;
 $NavTabs__ItemButton__blockPadding: 10px;
 $CallControls__height: 80px;
+$CallControls__max-width: 600px;
+$CallControls__initial-width: 440px;

stylesheets/components/CallControls.scss

@@ -7,10 +7,10 @@
   display: flex;
   flex-grow: 1;
   flex-shrink: 0;
-  flex-basis: 440px;
+  flex-basis: $CallControls__initial-width;
   align-items: center;
   justify-content: space-between;
-  max-width: 600px;
+  max-width: $CallControls__max-width;
   height: $CallControls__height;
   background-color: $color-gray-78;
   box-shadow: 0px 4px 14px 0px $color-black-alpha-40;

stylesheets/components/CallingRaisedHandsList.scss

@@ -5,13 +5,20 @@
   width: 100%;
   height: auto;
   margin-block-end: auto;
+  overflow: auto;
 }
 
 .CallingRaisedHandsList__width-container {
+  display: flex;
+  flex-direction: column;
   width: 320px;
   height: auto;
-  margin-block-end: 72px;
+  padding-block: 1px;
+  padding-inline: 1px;
+  // This should be above .CallingRaisedHandsList__Button
+  margin-block-end: 168px;
   margin-inline-start: 8px;
+  overflow: hidden;
 }
 
 .CallingRaisedHandsList__overlay {
@@ -33,7 +40,7 @@
   @include button-reset;
   position: absolute;
   inset-inline-start: 16px;
-  inset-block-end: 16px;
+  inset-block-end: calc($CallControls__height + 32px);
   display: flex;
   padding-block: 14px;
   padding-inline: 12px;

stylesheets/components/CallingRaisedHandsToasts.scss

@@ -1,14 +1,14 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-.CallingReactionsToast__Content {
+.CallingRaisedHandsToast__Content {
   display: flex;
   margin-block: 4px;
   margin-inline: 8px;
   font-weight: 500;
 }
 
-.CallingReactionsToast__HandIcon {
+.CallingRaisedHandsToast__HandIcon {
   display: inline-block;
   $icon-size: 16px;
   width: $icon-size;

stylesheets/components/CallingReactionsToasts.scss

@@ -8,6 +8,12 @@
   width: 100%;
 }
 
+// Reactions appear in the same space as the Raised Hands button. When they are both
+// present then move Reactions up.
+.CallingRaisedHandsList__Button + .CallingReactionsToasts {
+  inset-block-end: calc($CallControls__height + 100px);
+}
+
 // Normally the newest toasts are appended on top, like this:
 //              | Second |
 // | First | -> |  First |

stylesheets/components/CallingToast.scss

@@ -40,9 +40,26 @@
   }
 }
 
+.CallingButtonToasts__outer {
+  position: absolute;
+  inset-block-end: calc($CallControls__height + 16px);
+  width: 100%;
+  // Match .module-ongoing-call__footer
+  z-index: $z-index-above-base;
+}
+
+// Match the width behavior of .CallControls
+.CallingButtonToasts {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: $CallControls__initial-width;
+  max-width: $CallControls__max-width;
+}
+
 .CallingButtonToasts .CallingToasts {
   position: absolute;
-  top: -20px;
+  top: -16px;
   transform: translateY(-100%);
   inset-inline-start: 0;
 }

ts/components/CallScreen.stories.tsx

@@ -108,6 +108,18 @@ const getConversationsByDemuxId = (overrideProps: GroupCallOverrideProps) => {
   return conversationsByDemuxId;
 };
 
+const getRaisedHands = (overrideProps: GroupCallOverrideProps) => {
+  if (!overrideProps.remoteParticipants) {
+    return;
+  }
+
+  return new Set<number>(
+    overrideProps.remoteParticipants
+      .filter(participant => participant.isHandRaised)
+      .map(participant => participant.demuxId)
+  );
+};
+
 const createActiveGroupCallProp = (overrideProps: GroupCallOverrideProps) => ({
   callMode: CallMode.Group as CallMode.Group,
   connectionState:
@@ -124,7 +136,10 @@ const createActiveGroupCallProp = (overrideProps: GroupCallOverrideProps) => ({
   isConversationTooBigToRing: false,
   peekedParticipants:
     overrideProps.peekedParticipants || overrideProps.remoteParticipants || [],
-  raisedHands: overrideProps.raisedHands || new Set<number>(),
+  raisedHands:
+    overrideProps.raisedHands ||
+    getRaisedHands(overrideProps) ||
+    new Set<number>(),
   remoteParticipants: overrideProps.remoteParticipants || [],
   remoteAudioLevels: new Map<number, number>(
     overrideProps.remoteParticipants?.map((_participant, index) => [

ts/components/CallScreen.tsx

@@ -567,8 +567,8 @@ export function CallScreen({
           });
       }
       return (
-        <div className="CallingReactionsToast__Content">
-          <span className="CallingReactionsToast__HandIcon" />
+        <div className="CallingRaisedHandsToast__Content">
+          <span className="CallingRaisedHandsToast__HandIcon" />
           {message}
           {buttonOverride || (
             <button
@@ -709,12 +709,6 @@ export function CallScreen({
       )}
       {remoteParticipantsElement}
       {lonelyInCallNode}
-      <CallingReactionsToastsContainer
-        reactions={reactions}
-        conversationsByDemuxId={conversationsByDemuxId}
-        localDemuxId={localDemuxId}
-        i18n={i18n}
-      />
       {raisedHands && raisedHandsCount > 0 && (
         <>
           <button
@@ -748,6 +742,19 @@ export function CallScreen({
           )}
         </>
       )}
+      <CallingReactionsToastsContainer
+        reactions={reactions}
+        conversationsByDemuxId={conversationsByDemuxId}
+        localDemuxId={localDemuxId}
+        i18n={i18n}
+      />
+      <CallingButtonToastsContainer
+        hasLocalAudio={hasLocalAudio}
+        outgoingRing={undefined}
+        raisedHands={raisedHands}
+        renderRaisedHandsToast={renderRaisedHandsToast}
+        i18n={i18n}
+      />
       <div className="module-ongoing-call__footer">
         <div className="module-calling__spacer CallControls__OuterSpacer" />
         <div
@@ -762,14 +769,6 @@ export function CallScreen({
             <div className="CallControls__Status">{callStatus}</div>
           </div>
 
-          <CallingButtonToastsContainer
-            hasLocalAudio={hasLocalAudio}
-            outgoingRing={undefined}
-            raisedHands={raisedHands}
-            renderRaisedHandsToast={renderRaisedHandsToast}
-            i18n={i18n}
-          />
-
           {showMoreOptions && (
             <div className="CallControls__MoreOptionsContainer">
               <div

ts/components/CallingLobby.tsx

@@ -274,6 +274,11 @@ export function CallingLobby({
           {i18n('icu:calling__your-video-is-off')}
         </div>
 
+        <CallingButtonToastsContainer
+          hasLocalAudio={hasLocalAudio}
+          outgoingRing={outgoingRing}
+          i18n={i18n}
+        />
         <div className="CallingLobby__Footer">
           <div className="module-calling__spacer CallControls__OuterSpacer" />
           <div className="CallControls">
@@ -283,11 +288,6 @@ export function CallingLobby({
               </div>
               <div className="CallControls__Status">{callStatus}</div>
             </div>
-            <CallingButtonToastsContainer
-              hasLocalAudio={hasLocalAudio}
-              outgoingRing={outgoingRing}
-              i18n={i18n}
-            />
             <div className="CallControls__ButtonContainer">
               <CallingButton
                 buttonType={videoButtonType}

ts/components/CallingToastManager.tsx

@@ -249,8 +249,10 @@ export function CallingButtonToastsContainer(
       maxNonPersistentToasts={1}
       region={toastRegionRef}
     >
+      <div className="CallingButtonToasts__outer">
         <div className="CallingButtonToasts" ref={toastRegionRef} />
         <CallingButtonToasts {...props} />
+      </div>
     </CallingToastProvider>
   );
 }