Show hint explaining post visibility when quoting a "quiet public" post (#36065)

app/javascript/mastodon/features/ui/components/confirmation_modals/confirmation_modal.tsx

@@ -43,10 +43,6 @@ export const ConfirmationModal: React.FC<
     onSecondary?.();
   }, [onClose, onSecondary]);
 
-  const handleCancel = useCallback(() => {
-    onClose();
-  }, [onClose]);
-
   return (
     <div className='modal-root__modal safety-action-modal'>
       <div className='safety-action-modal__top'>
@@ -58,7 +54,7 @@ export const ConfirmationModal: React.FC<
 
       <div className='safety-action-modal__bottom'>
         <div className='safety-action-modal__actions'>
-          <button onClick={handleCancel} className='link-button'>
+          <button onClick={onClose} className='link-button'>
             {cancel ?? (
               <FormattedMessage
                 id='confirmation_modal.cancel'

app/javascript/mastodon/features/ui/components/confirmation_modals/index.ts

@@ -11,3 +11,4 @@ export { ConfirmLogOutModal } from './log_out';
 export { ConfirmFollowToListModal } from './follow_to_list';
 export { ConfirmMissingAltTextModal } from './missing_alt_text';
 export { ConfirmRevokeQuoteModal } from './revoke_quote';
+export { QuietPostQuoteInfoModal } from './quiet_post_quote_info';

app/javascript/mastodon/features/ui/components/confirmation_modals/quiet_post_quote_info.tsx

@@ -0,0 +1,77 @@
+import { useCallback } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import { quoteCompose } from '@/mastodon/actions/compose_typed';
+import { closeModal } from '@/mastodon/actions/modal';
+import { changeSetting } from '@/mastodon/actions/settings';
+import type { Status } from '@/mastodon/models/status';
+import { useAppDispatch } from '@/mastodon/store';
+
+import { ConfirmationModal } from './confirmation_modal';
+
+const messages = defineMessages({
+  title: {
+    id: 'confirmations.quiet_post_quote_info.title',
+    defaultMessage: 'Quoting quiet public posts',
+  },
+  message: {
+    id: 'confirmations.quiet_post_quote_info.message',
+    defaultMessage:
+      'When quoting a quiet public post, your post will be hidden from trending timelines.',
+  },
+  got_it: {
+    id: 'confirmations.quiet_post_quote_info.got_it',
+    defaultMessage: 'Got it',
+  },
+  dismiss: {
+    id: 'confirmations.quiet_post_quote_info.dismiss',
+    defaultMessage: "Don't remind me again",
+  },
+});
+
+/**
+ * [1] Since we only want this modal to have two buttons – "Don't ask again" and
+ * "Got it" – , we have to use the `onClose` handler to handle the "Don't ask again"
+ * functionality. Because of this, we need to set `closeWhenConfirm` to false and
+ * close the modal manually.
+ * This prevents the modal from being dismissed permanently when just confirming.
+ */
+
+export const QuietPostQuoteInfoModal: React.FC<{ status: Status }> = ({
+  status,
+}) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const confirm = useCallback(() => {
+    dispatch(quoteCompose(status));
+    // [1]
+    dispatch(
+      closeModal({ modalType: 'CONFIRM_QUIET_QUOTE', ignoreFocus: true }),
+    );
+  }, [dispatch, status]);
+
+  const dismiss = useCallback(() => {
+    dispatch(quoteCompose(status));
+    dispatch(
+      changeSetting(['dismissed_banners', 'quote/quiet_post_hint'], true),
+    );
+    // [1]
+    dispatch(
+      closeModal({ modalType: 'CONFIRM_QUIET_QUOTE', ignoreFocus: true }),
+    );
+  }, [dispatch, status]);
+
+  return (
+    <ConfirmationModal
+      closeWhenConfirm={false} // [1]
+      title={intl.formatMessage(messages.title)}
+      message={intl.formatMessage(messages.message)}
+      confirm={intl.formatMessage(messages.got_it)}
+      cancel={intl.formatMessage(messages.dismiss)}
+      onConfirm={confirm}
+      onClose={dismiss}
+    />
+  );
+};

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

@@ -38,6 +38,7 @@ import {
   ConfirmFollowToListModal,
   ConfirmMissingAltTextModal,
   ConfirmRevokeQuoteModal,
+  QuietPostQuoteInfoModal,
 } from './confirmation_modals';
 import { ImageModal } from './image_modal';
 import MediaModal from './media_modal';
@@ -62,6 +63,7 @@ export const MODAL_COMPONENTS = {
   'CONFIRM_FOLLOW_TO_LIST': () => Promise.resolve({ default: ConfirmFollowToListModal }),
   'CONFIRM_MISSING_ALT_TEXT': () => Promise.resolve({ default: ConfirmMissingAltTextModal }),
   'CONFIRM_REVOKE_QUOTE': () => Promise.resolve({ default: ConfirmRevokeQuoteModal }),
+  'CONFIRM_QUIET_QUOTE': () => Promise.resolve({ default: QuietPostQuoteInfoModal }),
   'MUTE': MuteModal,
   'BLOCK': BlockModal,
   'DOMAIN_BLOCK': DomainBlockModal,