From e9e3a1ecaa99df04ddb07907ff6115ff36863437 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Mon, 4 May 2026 17:22:24 +0200
Subject: [PATCH] [Glitch] Update block dialog copy to include quotes &
 collections

Port a23b3c7c25cff702ea94f7f7d8a00b5095f9a8cc to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../features/ui/components/block_modal.jsx    | 37 ++++++++++++-------
 .../ui/components/domain_block_modal.tsx      | 30 +++++++--------
 .../components/ignore_notifications_modal.jsx | 16 ++++----
 .../features/ui/components/mute_modal.jsx     | 22 +++++------
 .../glitch/styles/mastodon/components.scss    |  8 ++--
 5 files changed, 62 insertions(+), 51 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 2d835eb8ca..ecb9846df1 100644
--- a/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx
@@ -10,12 +10,14 @@ import { useDispatch } from 'react-redux';
 import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
 import BlockIcon from '@/material-icons/400-24px/block.svg?react';
 import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react';
+import CollectionsIcon from '@/material-icons/400-24px/category.svg?react';
 import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
 import { blockAccount } from 'flavours/glitch/actions/accounts';
 import { closeModal } from 'flavours/glitch/actions/modal';
 import { Button } from 'flavours/glitch/components/button';
 import { Icon } from 'flavours/glitch/components/icon';
+import { areCollectionsEnabled } from '../../collections/utils';
 
 export const BlockModal = ({ accountId, acct }) => {
   const dispatch = useDispatch();
@@ -46,31 +48,38 @@ export const BlockModal = ({ accountId, acct }) => {
 
           <div>
             <h1><FormattedMessage id='block_modal.title' defaultMessage='Block user?' /></h1>
-            <div>@{acct}</div>
+            <p>@{acct}</p>
           </div>
         </div>
 
-        <div className='safety-action-modal__bullet-points'>
-          <div>
+        <ul className='safety-action-modal__bullet-points'>
+          <li>
             <div className='safety-action-modal__bullet-points__icon'><Icon icon={CampaignIcon} /></div>
             <div><FormattedMessage id='block_modal.they_will_know' defaultMessage="They can see that they're blocked." /></div>
-          </div>
+          </li>
 
-          <div>
+          <li>
             <div className='safety-action-modal__bullet-points__icon'><Icon icon={VisibilityOffIcon} /></div>
-            <div><FormattedMessage id='block_modal.they_cant_see_posts' defaultMessage="They can't see your posts and you won't see theirs." /></div>
-          </div>
+            <div><FormattedMessage id='block_modal.they_cant_see_posts' defaultMessage="They can't see your content and you won't see theirs." /></div>
+          </li>
 
-          <div>
+          <li>
             <div className='safety-action-modal__bullet-points__icon'><Icon icon={AlternateEmailIcon} /></div>
-            <div><FormattedMessage id='block_modal.you_wont_see_mentions' defaultMessage="You won't see posts that mentions them." /></div>
-          </div>
+            <div><FormattedMessage id='block_modal.you_wont_see_mentions' defaultMessage="You won't see posts from others that mention them." /></div>
+          </li>
 
-          <div>
+          <li>
             <div className='safety-action-modal__bullet-points__icon'><Icon icon={ReplyIcon} /></div>
-            <div><FormattedMessage id='block_modal.they_cant_mention' defaultMessage="They can't mention or follow you." /></div>
-          </div>
-        </div>
+            <div><FormattedMessage id='block_modal.they_cant_mention' defaultMessage="You can't mention, follow, or quote each other." /></div>
+          </li>
+
+          {areCollectionsEnabled() && 
+            <li>
+              <div className='safety-action-modal__bullet-points__icon'><Icon icon={CollectionsIcon} /></div>
+              <div><FormattedMessage id='block_modal.no_collections' defaultMessage="Neither of you can add each other to collections. You'll be automatically removed from each others' existing collections, if applicable." /></div>
+            </li>
+          }
+        </ul>
       </div>
 
       <div className={classNames('safety-action-modal__bottom', { active: expanded })}>
diff --git a/app/javascript/flavours/glitch/features/ui/components/domain_block_modal.tsx b/app/javascript/flavours/glitch/features/ui/components/domain_block_modal.tsx
index 1fdec8f9a9..4fe665c9e5 100644
--- a/app/javascript/flavours/glitch/features/ui/components/domain_block_modal.tsx
+++ b/app/javascript/flavours/glitch/features/ui/components/domain_block_modal.tsx
@@ -83,15 +83,15 @@ export const DomainBlockModal: React.FC<{
                 defaultMessage='Block domain?'
               />
             </h1>
-            <div>{domain}</div>
+            <p>{domain}</p>
           </div>
         </div>
 
-        <div className='safety-action-modal__bullet-points'>
+        <ul className='safety-action-modal__bullet-points'>
           {preview &&
             preview !== 'error' &&
             preview.followers_count + preview.following_count > 0 && (
-              <div>
+              <li>
                 <div className='safety-action-modal__bullet-points__icon'>
                   <Icon id='' icon={PersonRemoveIcon} />
                 </div>
@@ -113,11 +113,11 @@ export const DomainBlockModal: React.FC<{
                     />
                   </strong>
                 </div>
-              </div>
+              </li>
             )}
 
           {preview === 'error' && (
-            <div>
+            <li>
               <div className='safety-action-modal__bullet-points__icon'>
                 <Icon id='' icon={PersonRemoveIcon} />
               </div>
@@ -129,10 +129,10 @@ export const DomainBlockModal: React.FC<{
                   />
                 </strong>
               </div>
-            </div>
+            </li>
           )}
 
-          <div className='safety-action-modal__bullet-points--deemphasized'>
+          <li className='safety-action-modal__bullet-points--deemphasized'>
             <div className='safety-action-modal__bullet-points__icon'>
               <Icon id='' icon={CampaignIcon} />
             </div>
@@ -142,9 +142,9 @@ export const DomainBlockModal: React.FC<{
                 defaultMessage="They won't know they've been blocked."
               />
             </div>
-          </div>
+          </li>
 
-          <div className='safety-action-modal__bullet-points--deemphasized'>
+          <li className='safety-action-modal__bullet-points--deemphasized'>
             <div className='safety-action-modal__bullet-points__icon'>
               <Icon id='' icon={VisibilityOffIcon} />
             </div>
@@ -154,9 +154,9 @@ export const DomainBlockModal: React.FC<{
                 defaultMessage="You won't see posts or notifications from users on this server."
               />
             </div>
-          </div>
+          </li>
 
-          <div className='safety-action-modal__bullet-points--deemphasized'>
+          <li className='safety-action-modal__bullet-points--deemphasized'>
             <div className='safety-action-modal__bullet-points__icon'>
               <Icon id='' icon={ReplyIcon} />
             </div>
@@ -166,9 +166,9 @@ export const DomainBlockModal: React.FC<{
                 defaultMessage='Nobody from this server can follow you.'
               />
             </div>
-          </div>
+          </li>
 
-          <div className='safety-action-modal__bullet-points--deemphasized'>
+          <li className='safety-action-modal__bullet-points--deemphasized'>
             <div className='safety-action-modal__bullet-points__icon'>
               <Icon id='' icon={HistoryIcon} />
             </div>
@@ -178,8 +178,8 @@ export const DomainBlockModal: React.FC<{
                 defaultMessage='People from this server can interact with your old posts.'
               />
             </div>
-          </div>
-        </div>
+          </li>
+        </ul>
       </div>
 
       <div className='safety-action-modal__bottom'>
diff --git a/app/javascript/flavours/glitch/features/ui/components/ignore_notifications_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/ignore_notifications_modal.jsx
index 3affc76aa2..ab5f105063 100644
--- a/app/javascript/flavours/glitch/features/ui/components/ignore_notifications_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/ignore_notifications_modal.jsx
@@ -57,22 +57,22 @@ export const IgnoreNotificationsModal = ({ filterType }) => {
           <h1>{title}</h1>
         </div>
 
-        <div className='safety-action-modal__bullet-points'>
-          <div>
+        <ul className='safety-action-modal__bullet-points'>
+          <li>
             <div className='safety-action-modal__bullet-points__icon'><Icon icon={InventoryIcon} /></div>
             <div><FormattedMessage id='ignore_notifications_modal.filter_to_review_separately' defaultMessage='You can review filtered notifications separately' /></div>
-          </div>
+          </li>
 
-          <div>
+          <li>
             <div className='safety-action-modal__bullet-points__icon'><Icon icon={PersonAlertIcon} /></div>
             <div><FormattedMessage id='ignore_notifications_modal.filter_to_act_users' defaultMessage="You'll still be able to accept, reject, or report users" /></div>
-          </div>
+          </li>
 
-          <div>
+          <li>
             <div className='safety-action-modal__bullet-points__icon'><Icon icon={ShieldQuestionIcon} /></div>
             <div><FormattedMessage id='ignore_notifications_modal.filter_to_avoid_confusion' defaultMessage='Filtering helps avoid potential confusion' /></div>
-          </div>
-        </div>
+          </li>
+        </ul>
 
         <div>
           <FormattedMessage id='ignore_notifications_modal.disclaimer' defaultMessage="Mastodon cannot inform users that you've ignored their notifications. Ignoring notifications will not stop the messages themselves from being sent." />
diff --git a/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx
index 2e944151bf..33e8ff06bd 100644
--- a/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx
@@ -85,31 +85,31 @@ export const MuteModal = ({ accountId, acct }) => {
 
           <div>
             <h1><FormattedMessage id='mute_modal.title' defaultMessage='Mute user?' /></h1>
-            <div>@{acct}</div>
+            <p>@{acct}</p>
           </div>
         </div>
 
-        <div className='safety-action-modal__bullet-points'>
-          <div>
+        <ul className='safety-action-modal__bullet-points'>
+          <li>
             <div className='safety-action-modal__bullet-points__icon'><Icon icon={CampaignIcon} /></div>
             <div><FormattedMessage id='mute_modal.they_wont_know' defaultMessage="They won't know they've been muted." /></div>
-          </div>
+          </li>
 
-          <div>
+          <li>
             <div className='safety-action-modal__bullet-points__icon'><Icon icon={VisibilityOffIcon} /></div>
             <div><FormattedMessage id='mute_modal.you_wont_see_posts' defaultMessage="They can still see your posts, but you won't see theirs." /></div>
-          </div>
+          </li>
 
-          <div>
+          <li>
             <div className='safety-action-modal__bullet-points__icon'><Icon icon={AlternateEmailIcon} /></div>
             <div><FormattedMessage id='mute_modal.you_wont_see_mentions' defaultMessage="You won't see posts that mention them." /></div>
-          </div>
+          </li>
 
-          <div>
+          <li>
             <div className='safety-action-modal__bullet-points__icon'><Icon icon={ReplyIcon} /></div>
             <div><FormattedMessage id='mute_modal.they_can_mention_and_follow' defaultMessage="They can mention and follow you, but you won't see them." /></div>
-          </div>
-        </div>
+          </li>
+        </ul>
       </div>
 
       <div className={classNames('safety-action-modal__bottom', { active: expanded })}>
diff --git a/app/javascript/flavours/glitch/styles/mastodon/components.scss b/app/javascript/flavours/glitch/styles/mastodon/components.scss
index cd4351b63f..b65289ede7 100644
--- a/app/javascript/flavours/glitch/styles/mastodon/components.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon/components.scss
@@ -6733,14 +6733,16 @@ a.status-card {
   &__bullet-points {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 16px;
     font-size: 16px;
     line-height: 24px;
 
+    & > li,
     & > div {
       display: flex;
       gap: 16px;
-      align-items: center;
+      align-items: start;
+      text-wrap: pretty;
 
       strong {
         font-weight: 700;
@@ -6753,7 +6755,7 @@ a.status-card {
 
     &__icon {
       width: 40px;
-      height: 40px;
+      height: 24px;
       display: flex;
       align-items: center;
       justify-content: center;