Change design of confirmation modals in web UIfeature-update-confirmation-modal

24 files changed, 444 insertions, 482 deletions

diff --git a/app/javascript/mastodon/components/domain.tsx b/app/javascript/mastodon/components/domain.tsx
index ed5e8e7e4c2..aa64f0f8c3d 100644
--- a/app/javascript/mastodon/components/domain.tsx
+++ b/app/javascript/mastodon/components/domain.tsx
@@ -3,6 +3,8 @@ import { useCallback } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
+import { unblockDomain } from 'mastodon/actions/domain_blocks';
+import { useAppDispatch } from 'mastodon/store';
 
 import { IconButton } from './icon_button';
 
@@ -13,17 +15,15 @@ const messages = defineMessages({
   },
 });
 
-interface Props {
+export const Domain: React.FC<{
   domain: string;
-  onUnblockDomain: (domain: string) => void;
-}
-
-export const Domain: React.FC<Props> = ({ domain, onUnblockDomain }) => {
+}> = ({ domain }) => {
   const intl = useIntl();
+  const dispatch = useAppDispatch();
 
   const handleDomainUnblock = useCallback(() => {
-    onUnblockDomain(domain);
-  }, [domain, onUnblockDomain]);
+    dispatch(unblockDomain(domain));
+  }, [dispatch, domain]);
 
   return (
     <div className='domain'>
diff --git a/app/javascript/mastodon/components/follow_button.tsx b/app/javascript/mastodon/components/follow_button.tsx
index ecc4e1ee175..4272797a86f 100644
--- a/app/javascript/mastodon/components/follow_button.tsx
+++ b/app/javascript/mastodon/components/follow_button.tsx
@@ -1,18 +1,15 @@
 import { useCallback, useEffect } from 'react';
 
-import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+import { useIntl, defineMessages } from 'react-intl';
 
 import { useIdentity } from '@/mastodon/identity_context';
-import {
-  fetchRelationships,
-  followAccount,
-  unfollowAccount,
-} from 'mastodon/actions/accounts';
+import { fetchRelationships, followAccount } from 'mastodon/actions/accounts';
 import { openModal } from 'mastodon/actions/modal';
 import { Button } from 'mastodon/components/button';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import { me } from 'mastodon/initial_state';
 import { useAppDispatch, useAppSelector } from 'mastodon/store';
+import { confirmUnfollow } from 'mastodon/utils/confirmations';
 
 const messages = defineMessages({
   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
@@ -60,25 +57,8 @@ export const FollowButton: React.FC<{
 
     if (accountId === me) {
       return;
-    } else if (relationship.following || relationship.requested) {
-      dispatch(
-        openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: (
-              <FormattedMessage
-                id='confirmations.unfollow.message'
-                defaultMessage='Are you sure you want to unfollow {name}?'
-                values={{ name: <strong>@{account?.acct}</strong> }}
-              />
-            ),
-            confirm: intl.formatMessage(messages.unfollow),
-            onConfirm: () => {
-              dispatch(unfollowAccount(accountId));
-            },
-          },
-        }),
-      );
+    } else if (account && (relationship.following || relationship.requested)) {
+      confirmUnfollow(dispatch, intl, account);
     } else {
       dispatch(followAccount(accountId));
     }
diff --git a/app/javascript/mastodon/containers/account_container.jsx b/app/javascript/mastodon/containers/account_container.jsx
index f171fcc2fe5..be108094a42 100644
--- a/app/javascript/mastodon/containers/account_container.jsx
+++ b/app/javascript/mastodon/containers/account_container.jsx
@@ -1,24 +1,20 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { injectIntl } from 'react-intl';
 
 import { connect } from 'react-redux';
 
+import { confirmUnfollow } from 'mastodon/utils/confirmations';
+
 import {
   followAccount,
-  unfollowAccount,
   blockAccount,
   unblockAccount,
   muteAccount,
   unmuteAccount,
 } from '../actions/accounts';
-import { openModal } from '../actions/modal';
 import { initMuteModal } from '../actions/mutes';
 import Account from '../components/account';
 import { makeGetAccount } from '../selectors';
 
-const messages = defineMessages({
-  unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
-});
-
 const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();
 
@@ -33,14 +29,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
 
   onFollow (account) {
     if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
-      dispatch(openModal({
-        modalType: 'CONFIRM',
-        modalProps: {
-          message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
-          confirm: intl.formatMessage(messages.unfollowConfirm),
-          onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
-        },
-      }));
+      confirmUnfollow(dispatch, intl, account);
     } else {
       dispatch(followAccount(account.get('id')));
     }
diff --git a/app/javascript/mastodon/containers/domain_container.jsx b/app/javascript/mastodon/containers/domain_container.jsx
deleted file mode 100644
index c719a5775c7..00000000000
--- a/app/javascript/mastodon/containers/domain_container.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-
-import { connect } from 'react-redux';
-
-import { blockDomain, unblockDomain } from '../actions/domain_blocks';
-import { openModal } from '../actions/modal';
-import { Domain } from '../components/domain';
-
-const messages = defineMessages({
-  blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' },
-});
-
-const makeMapStateToProps = () => {
-  const mapStateToProps = () => ({});
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = (dispatch, { intl }) => ({
-  onBlockDomain (domain) {
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications. Your followers from that domain will be removed.' values={{ domain: <strong>{domain}</strong> }} />,
-        confirm: intl.formatMessage(messages.blockDomainConfirm),
-        onConfirm: () => dispatch(blockDomain(domain)),
-      },
-    }));
-  },
-
-  onUnblockDomain (domain) {
-    dispatch(unblockDomain(domain));
-  },
-});
-
-export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Domain));
diff --git a/app/javascript/mastodon/containers/status_container.jsx b/app/javascript/mastodon/containers/status_container.jsx
index 4a9b5257778..936749cd897 100644
--- a/app/javascript/mastodon/containers/status_container.jsx
+++ b/app/javascript/mastodon/containers/status_container.jsx
@@ -1,7 +1,9 @@
-import { defineMessages, injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl';
 
 import { connect } from 'react-redux';
 
+import { confirmDeleteStatus, confirmReply, confirmEdit } from 'mastodon/utils/confirmations';
+
 import {
   unmuteAccount,
   unblockAccount,
@@ -49,18 +51,6 @@ import Status from '../components/status';
 import { boostModal, deleteModal } from '../initial_state';
 import { makeGetStatus, makeGetPictureInPicture } from '../selectors';
 
-const messages = defineMessages({
-  deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
-  deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
-  redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
-  redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.' },
-  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
-  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
-  editConfirm: { id: 'confirmations.edit.confirm', defaultMessage: 'Edit' },
-  editMessage: { id: 'confirmations.edit.message', defaultMessage: 'Editing now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
-  blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' },
-});
-
 const makeMapStateToProps = () => {
   const getStatus = makeGetStatus();
   const getPictureInPicture = makeGetPictureInPicture();
@@ -81,13 +71,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
       let state = getState();
 
       if (state.getIn(['compose', 'text']).trim().length !== 0) {
-        dispatch(openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: intl.formatMessage(messages.replyMessage),
-            confirm: intl.formatMessage(messages.replyConfirm),
-            onConfirm: () => dispatch(replyCompose(status, router)) },
-        }));
+        confirmReply(dispatch, intl, router, status);
       } else {
         dispatch(replyCompose(status, router));
       }
@@ -148,14 +132,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     if (!deleteModal) {
       dispatch(deleteStatus(status.get('id'), history, withRedraft));
     } else {
-      dispatch(openModal({
-        modalType: 'CONFIRM',
-        modalProps: {
-          message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
-          confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
-          onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)),
-        },
-      }));
+      confirmDeleteStatus(dispatch, intl, history, status.get('id'), withRedraft);
     }
   },
 
@@ -163,14 +140,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     dispatch((_, getState) => {
       let state = getState();
       if (state.getIn(['compose', 'text']).trim().length !== 0) {
-        dispatch(openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: intl.formatMessage(messages.editMessage),
-            confirm: intl.formatMessage(messages.editConfirm),
-            onConfirm: () => dispatch(editStatus(status.get('id'), history)),
-          },
-        }));
+        confirmEdit(dispatch, intl, history, status.get('id'));
       } else {
         dispatch(editStatus(status.get('id'), history));
       }
diff --git a/app/javascript/mastodon/features/account_timeline/containers/header_container.jsx b/app/javascript/mastodon/features/account_timeline/containers/header_container.jsx
index d55d8c58e41..d25083f08a0 100644
--- a/app/javascript/mastodon/features/account_timeline/containers/header_container.jsx
+++ b/app/javascript/mastodon/features/account_timeline/containers/header_container.jsx
@@ -1,12 +1,12 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { injectIntl } from 'react-intl';
 
 import { connect } from 'react-redux';
 
 import { openURL } from 'mastodon/actions/search';
+import { confirmUnfollow } from 'mastodon/utils/confirmations';
 
 import {
   followAccount,
-  unfollowAccount,
   unblockAccount,
   unmuteAccount,
   pinAccount,
@@ -24,11 +24,6 @@ import { initReport } from '../../../actions/reports';
 import { makeGetAccount, getAccountHidden } from '../../../selectors';
 import Header from '../components/header';
 
-const messages = defineMessages({
-  unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
-  blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' },
-});
-
 const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();
 
@@ -45,14 +40,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
 
   onFollow (account) {
     if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
-      dispatch(openModal({
-        modalType: 'CONFIRM',
-        modalProps: {
-          message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
-          confirm: intl.formatMessage(messages.unfollowConfirm),
-          onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
-        },
-      }));
+      confirmUnfollow(dispatch, intl, account);
     } else {
       dispatch(followAccount(account.get('id')));
     }
diff --git a/app/javascript/mastodon/features/compose/components/action_bar.jsx b/app/javascript/mastodon/features/compose/components/action_bar.jsx
index be52eac11ea..42cd1886bfd 100644
--- a/app/javascript/mastodon/features/compose/components/action_bar.jsx
+++ b/app/javascript/mastodon/features/compose/components/action_bar.jsx
@@ -5,9 +5,8 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
-import { openModal } from 'mastodon/actions/modal';
 import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
-import { logOut } from 'mastodon/utils/log_out';
+import { confirmLogOut } from 'mastodon/utils/confirmations';
 
 const messages = defineMessages({
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
@@ -23,8 +22,6 @@ const messages = defineMessages({
   filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
   bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' },
-  logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' },
-  logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' },
 });
 
 export const ActionBar = () => {
@@ -32,15 +29,7 @@ export const ActionBar = () => {
   const intl = useIntl();
 
   const handleLogoutClick = useCallback(() => {
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: intl.formatMessage(messages.logoutMessage),
-        confirm: intl.formatMessage(messages.logoutConfirm),
-        closeWhenConfirm: false,
-        onConfirm: () => logOut(),
-      },
-    }));
+    confirmLogOut(dispatch, intl);
   }, [dispatch, intl]);
 
   let menu = [];
diff --git a/app/javascript/mastodon/features/compose/index.jsx b/app/javascript/mastodon/features/compose/index.jsx
index 83c741fd191..6ef5414fac6 100644
--- a/app/javascript/mastodon/features/compose/index.jsx
+++ b/app/javascript/mastodon/features/compose/index.jsx
@@ -18,10 +18,9 @@ import MenuIcon from '@/material-icons/400-24px/menu.svg?react';
 import NotificationsIcon from '@/material-icons/400-24px/notifications-fill.svg?react';
 import PublicIcon from '@/material-icons/400-24px/public.svg?react';
 import SettingsIcon from '@/material-icons/400-24px/settings-fill.svg?react';
-import { openModal } from 'mastodon/actions/modal';
 import Column from 'mastodon/components/column';
 import { Icon }  from 'mastodon/components/icon';
-import { logOut } from 'mastodon/utils/log_out';
+import { confirmLogOut } from 'mastodon/utils/confirmations';
 
 import elephantUIPlane from '../../../images/elephant_ui_plane.svg';
 import { changeComposing, mountCompose, unmountCompose } from '../../actions/compose';
@@ -42,8 +41,6 @@ const messages = defineMessages({
   preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
   compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new post' },
-  logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' },
-  logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' },
 });
 
 const mapStateToProps = (state, ownProps) => ({
@@ -77,15 +74,7 @@ class Compose extends PureComponent {
     e.preventDefault();
     e.stopPropagation();
 
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: intl.formatMessage(messages.logoutMessage),
-        confirm: intl.formatMessage(messages.logoutConfirm),
-        closeWhenConfirm: false,
-        onConfirm: () => logOut(),
-      },
-    }));
+    confirmLogOut(dispatch, intl);
 
     return false;
   };
diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx b/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx
index a2b72f7162a..0f85d1fe77f 100644
--- a/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx
+++ b/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx
@@ -17,7 +17,6 @@ import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import { replyCompose } from 'mastodon/actions/compose';
 import { markConversationRead, deleteConversation } from 'mastodon/actions/conversations';
-import { openModal } from 'mastodon/actions/modal';
 import { muteStatus, unmuteStatus, revealStatus, hideStatus } from 'mastodon/actions/statuses';
 import AttachmentList from 'mastodon/components/attachment_list';
 import AvatarComposite from 'mastodon/components/avatar_composite';
@@ -27,6 +26,7 @@ import StatusContent from 'mastodon/components/status_content';
 import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
 import { autoPlayGif } from 'mastodon/initial_state';
 import { makeGetStatus } from 'mastodon/selectors';
+import { confirmReply } from 'mastodon/utils/confirmations';
 
 const messages = defineMessages({
   more: { id: 'status.more', defaultMessage: 'More' },
@@ -36,8 +36,6 @@ const messages = defineMessages({
   delete: { id: 'conversation.delete', defaultMessage: 'Delete conversation' },
   muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
   unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
-  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
-  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
 });
 
 const getAccounts = createSelector(
@@ -103,14 +101,7 @@ export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown })
       let state = getState();
 
       if (state.getIn(['compose', 'text']).trim().length !== 0) {
-        dispatch(openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: intl.formatMessage(messages.replyMessage),
-            confirm: intl.formatMessage(messages.replyConfirm),
-            onConfirm: () => dispatch(replyCompose(lastStatus, history)),
-          },
-        }));
+        confirmReply(dispatch, intl, history, lastStatus);
       } else {
         dispatch(replyCompose(lastStatus, history));
       }
diff --git a/app/javascript/mastodon/features/directory/components/account_card.tsx b/app/javascript/mastodon/features/directory/components/account_card.tsx
index 7201f6135b4..d1f84ced248 100644
--- a/app/javascript/mastodon/features/directory/components/account_card.tsx
+++ b/app/javascript/mastodon/features/directory/components/account_card.tsx
@@ -8,11 +8,9 @@ import { Link } from 'react-router-dom';
 
 import {
   followAccount,
-  unfollowAccount,
   unblockAccount,
   unmuteAccount,
 } from 'mastodon/actions/accounts';
-import { openModal } from 'mastodon/actions/modal';
 import { Avatar } from 'mastodon/components/avatar';
 import { Button } from 'mastodon/components/button';
 import { DisplayName } from 'mastodon/components/display_name';
@@ -21,6 +19,7 @@ import { autoPlayGif, me } from 'mastodon/initial_state';
 import type { Account } from 'mastodon/models/account';
 import { makeGetAccount } from 'mastodon/selectors';
 import { useAppDispatch, useAppSelector } from 'mastodon/store';
+import { confirmUnfollow } from 'mastodon/utils/confirmations';
 
 const messages = defineMessages({
   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
@@ -29,20 +28,12 @@ const messages = defineMessages({
     id: 'account.cancel_follow_request',
     defaultMessage: 'Withdraw follow request',
   },
-  cancelFollowRequestConfirm: {
-    id: 'confirmations.cancel_follow_request.confirm',
-    defaultMessage: 'Withdraw request',
-  },
   requested: {
     id: 'account.requested',
     defaultMessage: 'Awaiting approval. Click to cancel follow request',
   },
   unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' },
   unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' },
-  unfollowConfirm: {
-    id: 'confirmations.unfollow.confirm',
-    defaultMessage: 'Unfollow',
-  },
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
 });
 
@@ -89,44 +80,11 @@ export const AccountCard: React.FC<{ accountId: string }> = ({ accountId }) => {
   const handleFollow = useCallback(() => {
     if (!account) return;
 
-    if (account.getIn(['relationship', 'following'])) {
-      dispatch(
-        openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: (
-              <FormattedMessage
-                id='confirmations.unfollow.message'
-                defaultMessage='Are you sure you want to unfollow {name}?'
-                values={{ name: <strong>@{account.get('acct')}</strong> }}
-              />
-            ),
-            confirm: intl.formatMessage(messages.unfollowConfirm),
-            onConfirm: () => {
-              dispatch(unfollowAccount(account.get('id')));
-            },
-          },
-        }),
-      );
-    } else if (account.getIn(['relationship', 'requested'])) {
-      dispatch(
-        openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: (
-              <FormattedMessage
-                id='confirmations.cancel_follow_request.message'
-                defaultMessage='Are you sure you want to withdraw your request to follow {name}?'
-                values={{ name: <strong>@{account.get('acct')}</strong> }}
-              />
-            ),
-            confirm: intl.formatMessage(messages.cancelFollowRequestConfirm),