From d702a03a0c35fc631a0fa456532946e6751cbbfd Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Fri, 15 Mar 2024 20:09:21 +0100
Subject: [PATCH] =?UTF-8?q?Add=20=E2=80=9CLearn=20more=E2=80=9D=20on=20blo?=
 =?UTF-8?q?ck=20modal=20to=20inform=20of=20federation=20caveats=20(#29614)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/ui/components/block_modal.jsx    | 33 +++++++++++++++++--
 app/javascript/mastodon/locales/en.json       |  3 ++
 .../styles/mastodon/components.scss           |  9 +++++
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/app/javascript/mastodon/features/ui/components/block_modal.jsx b/app/javascript/mastodon/features/ui/components/block_modal.jsx
index d18adaa5eb7..fc9233a9cc6 100644
--- a/app/javascript/mastodon/features/ui/components/block_modal.jsx
+++ b/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>
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index f893c98a3c6..376dfb7e4b6 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/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.",
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 805ffb963a0..8b7e5f5e84a 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/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;