From c511e52d1e67e3aec8571037572c6e1c7a346cd7 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?[Glitch]=20Add=20=E2=80=9CLearn=20more=E2=80=9D?=
 =?UTF-8?q?=20on=20block=20modal=20to=20inform=20of=20federation=20caveats?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Port d702a03a0c35fc631a0fa456532946e6751cbbfd to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../features/ui/components/block_modal.jsx    | 33 +++++++++++++++++--
 .../flavours/glitch/styles/components.scss    |  9 +++++
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx
index af5479b5fa..fa772b067d 100644
--- a/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx
+++ b/app/javascript/flavours/glitch/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 'flavours/glitch/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/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 3501777873..8c74f6d2d0 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -6420,6 +6420,15 @@ a.status-card {
     }
   }
 
+  &__caveats {
+    font-size: 14px;
+    padding: 0 12px;
+
+    strong {
+      font-weight: 500;
+    }
+  }
+
   &__bottom {
     padding-top: 0;