Add “Learn more” on block modal to inform of federation caveats (#29614)

app/javascript/mastodon/features/ui/components/block_modal.jsx

@@ -1,8 +1,10 @@
 import PropTypes from 'prop-types';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
+import classNames from 'classnames';
+
 import { useDispatch } from 'react-redux';
 
 import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
@@ -17,6 +19,9 @@ import { Icon } from 'mastodon/components/icon';
 
 export const BlockModal = ({ accountId, acct }) => {
   const dispatch = useDispatch();
+  const [expanded, setExpanded] = useState(false);
+
+  const domain = acct.split('@')[1];
 
   const handleClick = useCallback(() => {
     dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
@@ -27,6 +32,10 @@ export const BlockModal = ({ accountId, acct }) => {
     dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
   }, [dispatch]);
 
+  const handleToggleLearnMore = useCallback(() => {
+    setExpanded(!expanded);
+  }, [expanded, setExpanded]);
+
   return (
     <div className='modal-root__modal safety-action-modal'>
       <div className='safety-action-modal__top'>
@@ -64,8 +73,28 @@ export const BlockModal = ({ accountId, acct }) => {
         </div>
       </div>
 
-      <div className='safety-action-modal__bottom'>
+      <div className={classNames('safety-action-modal__bottom', { active: expanded })}>
+        {domain && (
+          <div className='safety-action-modal__bottom__collapsible'>
+            <div className='safety-action-modal__caveats'>
+              <FormattedMessage
+                id='block_modal.remote_users_caveat'
+                defaultMessage='We will ask the server {domain} to respect your decision. However, compliance is not guaranteed since some servers may handle blocks differently. Public posts may still be visible to non-logged-in users.'
+                values={{ domain: <strong>{domain}</strong> }}
+              />
+            </div>
+          </div>
+        )}
+
         <div className='safety-action-modal__actions'>
+          {domain && (
+            <button onClick={handleToggleLearnMore} className='link-button'>
+              {expanded ? <FormattedMessage id='block_modal.show_less' defaultMessage='Show less' /> : <FormattedMessage id='block_modal.show_more' defaultMessage='Show more' />}
+            </button>
+          )}
+
+          <div className='spacer' />
+
           <button onClick={handleCancel} className='link-button'>
             <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
           </button>

app/javascript/mastodon/locales/en.json

@@ -89,6 +89,9 @@
   "announcement.announcement": "Announcement",
   "attachments_list.unprocessed": "(unprocessed)",
   "audio.hide": "Hide audio",
+  "block_modal.remote_users_caveat": "We will ask the server {domain} to respect your decision. However, compliance is not guaranteed since some servers may handle blocks differently. Public posts may still be visible to non-logged-in users.",
+  "block_modal.show_less": "Show less",
+  "block_modal.show_more": "Show more",
   "block_modal.they_cant_mention": "They can't mention or follow you.",
   "block_modal.they_cant_see_posts": "They can't see your posts and you won't see theirs.",
   "block_modal.they_will_know": "They can see that they're blocked.",

app/javascript/styles/mastodon/components.scss

@@ -5922,6 +5922,15 @@ a.status-card {
     }
   }
 
+  &__caveats {
+    font-size: 14px;
+    padding: 0 12px;
+
+    strong {
+      font-weight: 500;
+    }
+  }
+
   &__bottom {
     padding-top: 0;