SafetyNumberChangeDialog: Introduce awareness of stories

_locales/en/messages.json

@@ -436,7 +436,7 @@
     "description": "(deleted 2022/11/26) Shown on confirmation dialog when user attempts to send a message"
   },
   "safetyNumberChangeDialog__message": {
-    "message": "The following people may have reinstalled Signal or changed devices. Click a recipient to confirm the new safety number. This is optional.",
+    "message": "The following people may have reinstalled Signal or changed devices. Click a recipient to confirm their new safety number. This is optional.",
     "description": "Shown on confirmation dialog when user attempts to send a message"
   },
   "safetyNumberChangeDialog__pending-messages": {
@@ -451,6 +451,34 @@
     "messageformat": "{count, plural, other {You have # connections who may have reinstalled Signal or changed devices. You can optionally review their safety numbers before sending.}}",
     "description": "Shown during an attempted send when more than five contacts have changed their safety numbers"
   },
+  "safetyNumberChangeDialog__post-review": {
+    "message": "All connections have been reviewed, click send to continue.",
+    "description": "Shown after reviewing large number of contacts"
+  },
+  "icu:safetyNumberChangeDialog__confirm-remove-all": {
+    "messageformat": "Are you sure you want to remove {count, plural, 1 {one recipient} other {# recipients}} from story {story}?",
+    "description": "Shown if user selects 'remove all' option to remove all potentially untrusted contacts from a given story"
+  },
+  "safetyNumberChangeDialog__remove-all": {
+    "message": "Remove all",
+    "description": "Shown in the context menu for a story header, to remove all contacts within from their parent list"
+  },
+  "safetyNumberChangeDialog__verify-number": {
+    "message": "Verify safety number",
+    "description": "Shown in the context menu for a story recipient header, to verify that they are still trusted"
+  },
+  "safetyNumberChangeDialog__remove": {
+    "message": "Remove from story",
+    "description": "Shown in the context menu for a story recipient, to remove this contact from from their parent list"
+  },
+  "safetyNumberChangeDialog__actions-contact": {
+    "message": "Actions for contact $contact$",
+    "description": "Label for button that opens context menu for contact"
+  },
+  "safetyNumberChangeDialog__actions-story": {
+    "message": "Actions for story $story$",
+    "description": "Label for button that opens context menu for story"
+  },
   "identityKeyErrorOnSend": {
     "message": "Your safety number with $name1$ has changed. This could either mean that someone is trying to intercept your communication or that $name2$ has simply reinstalled Signal. You may wish to verify your safety number with this contact.",
     "description": "Shown when user clicks on a failed recipient in the message detail view after an identity key change"
@@ -463,6 +491,10 @@
     "message": "Send",
     "description": "Used on a warning dialog to make it clear that it might be risky to send the message."
   },
+  "safetyNumberChangeDialog_done": {
+    "message": "Done",
+    "description": "Used when there are enough safety number changes to require an explicit review step, to signal that the review is complete."
+  },
   "callAnyway": {
     "message": "Call anyway",
     "description": "Used on a warning dialog to make it clear that it might be risky to call the conversation."

stylesheets/components/SafetyNumberChangeDialog.scss

@@ -65,22 +65,33 @@
     @include dark-theme {
       color: $color-gray-25;
     }
+
+    &--narrow {
+      padding-left: 38px;
+      padding-right: 38px;
+    }
   }
 
   &__contacts {
     list-style-type: none;
-    max-height: 300px;
-    padding: 0;
+    padding: 0px;
+    margin-block-end: 0px;
   }
 
-  &__contact {
-    $contact: &;
+  &__row {
+    $row: &;
 
     align-items: center;
     display: flex;
     flex-direction: row;
     margin-bottom: 16px;
 
+    &__story-name {
+      @include font-body-1-bold;
+      flex-grow: 1;
+      margin-right: auto;
+    }
+
     &--wrapper {
       flex-grow: 1;
       margin-left: 12px;
@@ -106,23 +117,127 @@
       }
     }
 
-    &--view {
+    &__view {
       @include button-reset;
       @include button-secondary-blue-text;
 
       opacity: 0;
       transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
 
       // Using keyboard/mouse classes directly; mixins were doing weird things
-      .mouse-mode #{$contact}:hover & {
+      .mouse-mode #{$row}:hover & {
         opacity: 1;
       }
-      .keyboard-mode #{$contact}:focus-within & {
+      .keyboard-mode #{$row}:focus-within & {
         opacity: 1;
       }
 
       border-radius: 4px;
       padding: 8px 14px;
     }
+
+    &__chevron__option {
+      padding: 10px 15px;
+
+      .ContextMenu__popper--single-item & {
+        padding: 10px 15px;
+      }
+
+      &--container {
+        align-items: center;
+      }
+    }
+
+    &__chevron__button {
+      @include button-reset;
+
+      display: flex;
+      align-items: center;
+
+      flex-grow: 0;
+      flex-shrink: 0;
+
+      padding: 10px;
+      height: 16px;
+      width: 16px;
+
+      justify-content: center;
+      border-radius: 4px;
+      border: 2px solid transparent;
+
+      opacity: 0;
+      transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
+
+      // Using keyboard/mouse classes directly; mixins were doing weird things
+      .mouse-mode #{$row}:hover & {
+        opacity: 1;
+      }
+      .keyboard-mode #{$row}:focus-within & {
+        opacity: 1;
+      }
+
+      @include keyboard-mode {
+        &:focus {
+          border-color: $color-ultramarine;
+        }
+      }
+      @include dark-keyboard-mode {
+        &:focus {
+          border-color: $color-ultramarine-light;
+        }
+      }
+
+      &::before {
+        content: '';
+        display: block;
+        height: 16px;
+        width: 16px;
+        flex-shrink: 0;
+
+        @include light-theme {
+          @include color-svg(
+            '../images/icons/v2/chevron-down-16.svg',
+            $color-gray-60
+          );
+        }
+        @include dark-theme {
+          @include color-svg(
+            '../images/icons/v2/chevron-down-16.svg',
+            $color-gray-25
+          );
+        }
+      }
+    }
+  }
+
+  &__menu-icon {
+    &--delete {
+      @include light-theme {
+        @include color-svg(
+          '../images/icons/v2/x-circle-16.svg',
+          $color-gray-90
+        );
+      }
+      @include dark-theme {
+        @include color-svg(
+          '../images/icons/v2/x-circle-16.svg',
+          $color-gray-05
+        );
+      }
+    }
+    &--verify {
+      @include light-theme {
+        @include color-svg(
+          '../images/icons/v2/safety-number-outline-24.svg',
+          $color-gray-90
+        );
+      }
+      @include dark-theme {
+        @include color-svg(
+          '../images/icons/v2/safety-number-outline-24.svg',
+          $color-gray-05
+        );
+      }
+    }
   }
 }

ts/components/CallManager.tsx

@@ -356,7 +356,12 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
       activeCall.conversationsWithSafetyNumberChanges.length ? (
         <SafetyNumberChangeDialog
           confirmText={i18n('continueCall')}
-          contacts={activeCall.conversationsWithSafetyNumberChanges}
+          contacts={[
+            {
+              story: undefined,
+              contacts: activeCall.conversationsWithSafetyNumberChanges,
+            },
+          ]}
           getPreferredBadge={getPreferredBadge}
           i18n={i18n}
           onCancel={onSafetyNumberDialogCancel}