Confirm before inviting unknown users to a DM/room (#33171)

* InviteDialog: factor out startDmOrSendInvites

Factor out the logic of calling `startDm` or `inviteUsers` to a helper
function. We're going to need to call this from a second location soon, so this
is useful groundwork.

* Add `UnknownIdentityUsersWarningDialog`

* Add unit tests

* Update playwright tests

* Convert if/else to switch statement

* Convert helper functions to React components

* Factor out "onRemove" callback

* Add clarifying comment

apps/web/res/css/_common.pcss

@@ -598,6 +598,7 @@ legend {
         .mx_AccessSecretStorageDialog button,
         .mx_InviteDialog_section button,
         .mx_InviteDialog_editor button,
+        .mx_UnknownIdentityUsersWarningDialog button,
         [class|="maplibregl"]
     ),
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton),
@@ -625,7 +626,8 @@ legend {
         .mx_ThemeChoicePanel_CustomTheme button,
         .mx_UnpinAllDialog button,
         .mx_ShareDialog button,
-        .mx_EncryptionUserSettingsTab button
+        .mx_EncryptionUserSettingsTab button,
+        .mx_UnknownIdentityUsersWarningDialog button
     ):last-child {
     margin-right: 0px;
 }
@@ -641,7 +643,8 @@ legend {
         .mx_ShareDialog button,
         .mx_EncryptionUserSettingsTab button,
         .mx_InviteDialog_section button,
-        .mx_InviteDialog_editor button
+        .mx_InviteDialog_editor button,
+        .mx_UnknownIdentityUsersWarningDialog button
     ):focus,
 .mx_Dialog input[type="submit"]:focus,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton):focus,
@@ -659,7 +662,8 @@ legend {
         .mx_ThemeChoicePanel_CustomTheme button,
         .mx_UnpinAllDialog button,
         .mx_ShareDialog button,
-        .mx_EncryptionUserSettingsTab button
+        .mx_EncryptionUserSettingsTab button,
+        .mx_UnknownIdentityUsersWarningDialog button
     ),
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
     color: var(--cpd-color-text-on-solid-primary);
@@ -678,7 +682,8 @@ legend {
         .mx_ThemeChoicePanel_CustomTheme button,
         .mx_UnpinAllDialog button,
         .mx_ShareDialog button,
-        .mx_EncryptionUserSettingsTab button
+        .mx_EncryptionUserSettingsTab button,
+        .mx_UnknownIdentityUsersWarningDialog button
     ),
 .mx_Dialog_buttons input[type="submit"].danger {
     background-color: var(--cpd-color-bg-critical-primary);
@@ -701,7 +706,8 @@ legend {
         .mx_ThemeChoicePanel_CustomTheme button,
         .mx_UnpinAllDialog button,
         .mx_ShareDialog button,
-        .mx_EncryptionUserSettingsTab button
+        .mx_EncryptionUserSettingsTab button,
+        .mx_UnknownIdentityUsersWarningDialog button
     ):disabled,
 .mx_Dialog input[type="submit"]:disabled,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton):disabled,

apps/web/res/css/_components.pcss

@@ -171,6 +171,7 @@
 @import "./views/dialogs/_UserSettingsDialog.pcss";
 @import "./views/dialogs/_VerifyEMailDialog.pcss";
 @import "./views/dialogs/_WidgetCapabilitiesPromptDialog.pcss";
+@import "./views/dialogs/invite/_UnknownIdentityUsersWarningDialog.pcss";
 @import "./views/dialogs/security/_AccessSecretStorageDialog.pcss";
 @import "./views/dialogs/security/_CreateCrossSigningDialog.pcss";
 @import "./views/dialogs/security/_CreateSecretStorageDialog.pcss";

apps/web/res/css/views/dialogs/invite/_UnknownIdentityUsersWarningDialog.pcss

@@ -0,0 +1,45 @@
+/*
+ Copyright 2026 Element Creations Ltd.
+
+ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UnknownIdentityUsersWarningDialog {
+    display: flex;
+    flex-direction: column;
+    height: 600px; /* Consistency with InviteDialog */
+}
+
+.mx_UnknownIdentityUsersWarningDialog_headerContainer {
+    /* Centre the PageHeader component horizontally */
+    display: flex;
+    justify-content: center;
+
+    /* Styling for the regular text inside the header */
+    font: var(--cpd-font-body-lg-regular);
+
+    /* Space before the list */
+    padding-bottom: var(--cpd-space-6x);
+}
+
+.mx_UnknownIdentityUsersWarningDialog_userList {
+    width: 100%;
+    overflow: auto;
+
+    /* Fill available vertical space, but don't allow it to shrink to less than 60px (about the height of a single tile) */
+    flex: 1 0 60px;
+
+    /* Remove browser default ul padding/margin */
+    padding: 0;
+    margin: 0;
+}
+
+.mx_UnknownIdentityUsersWarningDialog_buttons {
+    display: flex;
+    gap: var(--cpd-space-4x);
+
+    > button {
+        flex: 1;
+    }
+}