Fix logged-out quote menu UX, simplify Interaction dialog copy (#36124)

app/javascript/mastodon/components/follow_button.tsx

@@ -46,7 +46,6 @@ export const FollowButton: React.FC<{
         openModal({
           modalType: 'INTERACTION',
           modalProps: {
-            type: 'follow',
             accountId: accountId,
             url: account?.url,
           },

app/javascript/mastodon/components/poll.tsx

@@ -109,7 +109,6 @@ export const Poll: React.FC<PollProps> = ({ pollId, disabled, status }) => {
         openModal({
           modalType: 'INTERACTION',
           modalProps: {
-            type: 'vote',
             accountId: status.getIn(['account', 'id']),
             url: status.get('uri'),
           },

app/javascript/mastodon/components/status/boost_button.tsx

@@ -72,6 +72,18 @@ export const StatusBoostButton: FC<ReblogButtonProps> = ({
   const statusId = status.get('id') as string;
   const wasBoosted = !!status.get('reblogged');
 
+  const showLoginPrompt = useCallback(() => {
+    dispatch(
+      openModal({
+        modalType: 'INTERACTION',
+        modalProps: {
+          accountId: status.getIn(['account', 'id']),
+          url: status.get('uri'),
+        },
+      }),
+    );
+  }, [dispatch, status]);
+
   const items = useMemo(() => {
     const boostItem = boostItemState(statusState);
     const quoteItem = quoteItemState(statusState);
@@ -87,6 +99,8 @@ export const StatusBoostButton: FC<ReblogButtonProps> = ({
         action: (event) => {
           if (isLoggedIn) {
             dispatch(toggleReblog(statusId, event.shiftKey));
+          } else {
+            showLoginPrompt();
           }
         },
       },
@@ -100,34 +114,37 @@ export const StatusBoostButton: FC<ReblogButtonProps> = ({
         action: () => {
           if (isLoggedIn) {
             dispatch(quoteComposeById(statusId));
+          } else {
+            showLoginPrompt();
           }
         },
       },
     ] satisfies [ActionMenuItemWithIcon, ActionMenuItemWithIcon];
-  }, [dispatch, intl, isLoggedIn, statusId, statusState, wasBoosted]);
+  }, [
+    dispatch,
+    intl,
+    isLoggedIn,
+    showLoginPrompt,
+    statusId,
+    statusState,
+    wasBoosted,
+  ]);
 
   const boostIcon = items[0].icon;
 
   const handleDropdownOpen = useCallback(
     (event: MouseEvent | KeyboardEvent) => {
-      if (!isLoggedIn) {
-        dispatch(
-          openModal({
-            modalType: 'INTERACTION',
-            modalProps: {
-              type: 'reblog',
-              accountId: status.getIn(['account', 'id']),
-              url: status.get('uri'),
-            },
-          }),
-        );
-      } else if (event.shiftKey) {
+      if (event.shiftKey) {
+        if (!isLoggedIn) {
+          showLoginPrompt();
+          return false;
+        }
         dispatch(toggleReblog(status.get('id'), true));
         return false;
       }
       return true;
     },
-    [dispatch, isLoggedIn, status],
+    [dispatch, isLoggedIn, showLoginPrompt, status],
   );
 
   return (
@@ -223,7 +240,6 @@ export const LegacyReblogButton: FC<ReblogButtonProps> = ({
           openModal({
             modalType: 'INTERACTION',
             modalProps: {
-              type: 'reblog',
               accountId: status.getIn(['account', 'id']),
               url: status.get('uri'),
             },

app/javascript/mastodon/components/status/boost_button_utils.ts

@@ -129,6 +129,7 @@ export function boostItemState({
 }
 
 export function quoteItemState({
+  isLoggedIn,
   isMine,
   isQuoteAutomaticallyAccepted,
   isQuoteManuallyAccepted,
@@ -149,7 +150,8 @@ export function quoteItemState({
   } else if (isQuoteManuallyAccepted) {
     iconText.title = messages.request_quote;
     iconText.meta = messages.quote_manual_review;
-  } else {
+    // We don't show the disabled state when logged out
+  } else if (isLoggedIn) {
     iconText.disabled = true;
     iconText.iconComponent = FormatQuoteOff;
     iconText.meta = isQuoteFollowersOnly

app/javascript/mastodon/components/status_action_bar/index.jsx

@@ -122,7 +122,7 @@ class StatusActionBar extends ImmutablePureComponent {
     if (signedIn) {
       this.props.onReply(this.props.status);
     } else {
-      this.props.onInteractionModal('reply', this.props.status);
+      this.props.onInteractionModal(this.props.status);
     }
   };
 
@@ -140,7 +140,7 @@ class StatusActionBar extends ImmutablePureComponent {
     if (signedIn) {
       this.props.onFavourite(this.props.status);
     } else {
-      this.props.onInteractionModal('favourite', this.props.status);
+      this.props.onInteractionModal(this.props.status);
     }
   };
 

app/javascript/mastodon/containers/status_container.jsx

@@ -235,11 +235,10 @@ const mapDispatchToProps = (dispatch, { contextType }) => ({
     dispatch(deployPictureInPicture({statusId: status.get('id'), accountId: status.getIn(['account', 'id']), playerType: type, props: mediaProps}));
   },
 
-  onInteractionModal (type, status) {
+  onInteractionModal (status) {
     dispatch(openModal({
       modalType: 'INTERACTION',
       modalProps: {
-        type,
         accountId: status.getIn(['account', 'id']),
         url: status.get('uri'),
       },

app/javascript/mastodon/features/interaction_modal/index.tsx

@@ -7,15 +7,9 @@ import classNames from 'classnames';
 import { escapeRegExp } from 'lodash';
 import { useDebouncedCallback } from 'use-debounce';
 
-import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
-import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
-import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
-import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
-import StarIcon from '@/material-icons/400-24px/star.svg?react';
 import { openModal, closeModal } from 'mastodon/actions/modal';
 import { apiRequest } from 'mastodon/api';
 import { Button } from 'mastodon/components/button';
-import { Icon } from 'mastodon/components/icon';
 import {
   domain as localDomain,
   registrationsOpen,
@@ -408,8 +402,7 @@ const LoginForm: React.FC<{
 const InteractionModal: React.FC<{
   accountId: string;
   url: string;
-  type: 'reply' | 'reblog' | 'favourite' | 'follow' | 'vote';
-}> = ({ accountId, url, type }) => {
+}> = ({ accountId, url }) => {
   const dispatch = useAppDispatch();
   const displayNameHtml = useAppSelector(
     (state) => state.accounts.get(accountId)?.display_name_html ?? '',
@@ -437,93 +430,6 @@ const InteractionModal: React.FC<{
     );
   }, [dispatch]);
 
-  let title: React.ReactNode,
-    icon: React.ReactNode,
-    actionPrompt: React.ReactNode;
-
-  switch (type) {
-    case 'reply':
-      icon = <Icon id='reply' icon={ReplyIcon} />;
-      title = (
-        <FormattedMessage
-          id='interaction_modal.title.reply'
-          defaultMessage="Reply to {name}'s post"
-          values={{ name }}
-        />
-      );
-      actionPrompt = (
-        <FormattedMessage
-          id='interaction_modal.action.reply'
-          defaultMessage='To continue, you need to reply from your account.'
-        />
-      );
-      break;
-    case 'reblog':
-      icon = <Icon id='retweet' icon={RepeatIcon} />;
-      title = (
-        <FormattedMessage
-          id='interaction_modal.title.reblog'
-          defaultMessage="Boost {name}'s post"
-          values={{ name }}
-        />
-      );
-      actionPrompt = (
-        <FormattedMessage
-          id='interaction_modal.action.reblog'
-          defaultMessage='To continue, you need to reblog from your account.'
-        />
-      );
-      break;
-    case 'favourite':
-      icon = <Icon id='star' icon={StarIcon} />;
-      title = (
-        <FormattedMessage
-          id='interaction_modal.title.favourite'
-          defaultMessage="Favorite {name}'s post"
-          values={{ name }}
-        />
-      );
-      actionPrompt = (
-        <FormattedMessage
-          id='interaction_modal.action.favourite'
-          defaultMessage='To continue, you need to favorite from your account.'
-        />
-      );
-      break;
-    case 'follow':
-      icon = <Icon id='user-plus' icon={PersonAddIcon} />;
-      title = (
-        <FormattedMessage
-          id='interaction_modal.title.follow'
-          defaultMessage='Follow {name}'
-          values={{ name }}
-        />
-      );
-      actionPrompt = (
-        <FormattedMessage
-          id='interaction_modal.action.follow'
-          defaultMessage='To continue, you need to follow from your account.'
-        />
-      );
-      break;
-    case 'vote':
-      icon = <Icon id='tasks' icon={InsertChartIcon} />;
-      title = (
-        <FormattedMessage
-          id='interaction_modal.title.vote'
-          defaultMessage="Vote in {name}'s poll"
-          values={{ name }}
-        />
-      );
-      actionPrompt = (
-        <FormattedMessage
-          id='interaction_modal.action.vote'
-          defaultMessage='To continue, you need to vote from your account.'
-        />
-      );
-      break;
-  }
-
   let signupButton;
 
   if (sso_redirect) {
@@ -559,9 +465,18 @@ const InteractionModal: React.FC<{
     <div className='modal-root__modal interaction-modal'>
       <div className='interaction-modal__lead'>
         <h3>
-          <span className='interaction-modal__icon'>{icon}</span> {title}
+          <FormattedMessage
+            id='interaction_modal.title'
+            defaultMessage='Sign in to continue'
+          />
         </h3>
-        <p>{actionPrompt}</p>
+        <p>
+          <FormattedMessage
+            id='interaction_modal.action'
+            defaultMessage="To interact with {name}'s post, you need to sign into your account on whatever Mastodon server you use."
+            values={{ name }}
+          />
+        </p>
       </div>
 
       <LoginForm resourceUrl={url} />

app/javascript/mastodon/features/picture_in_picture/components/footer.tsx

@@ -92,7 +92,6 @@ export const Footer: React.FC<{
         openModal({
           modalType: 'INTERACTION',
           modalProps: {
-            type: 'reply',
             accountId: status.getIn(['account', 'id']),
             url: status.get('uri'),
           },
@@ -113,7 +112,6 @@ export const Footer: React.FC<{
         openModal({
           modalType: 'INTERACTION',
           modalProps: {
-            type: 'favourite',
             accountId: status.getIn(['account', 'id']),
             url: status.get('uri'),
           },
@@ -135,7 +133,6 @@ export const Footer: React.FC<{
           openModal({
             modalType: 'INTERACTION',
             modalProps: {
-              type: 'reblog',
               accountId: status.getIn(['account', 'id']),
               url: status.get('uri'),
             },

app/javascript/mastodon/features/status/index.jsx

@@ -186,7 +186,6 @@ class Status extends ImmutablePureComponent {
       dispatch(openModal({
         modalType: 'INTERACTION',
         modalProps: {
-          type: 'favourite',
           accountId: status.getIn(['account', 'id']),
           url: status.get('uri'),
         },
@@ -216,7 +215,6 @@ class Status extends ImmutablePureComponent {
       dispatch(openModal({
         modalType: 'INTERACTION',
         modalProps: {
-          type: 'reply',
           accountId: status.getIn(['account', 'id']),
           url: status.get('uri'),
         },
@@ -234,7 +232,6 @@ class Status extends ImmutablePureComponent {
       dispatch(openModal({
         modalType: 'INTERACTION',
         modalProps: {
-          type: 'reblog',
           accountId: status.getIn(['account', 'id']),
           url: status.get('uri'),
         },

app/javascript/mastodon/locales/en.json

@@ -453,20 +453,12 @@
   "ignore_notifications_modal.private_mentions_title": "Ignore notifications from unsolicited Private Mentions?",
   "info_button.label": "Help",
   "info_button.what_is_alt_text": "<h1>What is alt text?</h1> <p>Alt text provides image descriptions for people with vision impairments, low-bandwidth connections, or those seeking extra context.</p> <p>You can improve accessibility and understanding for everyone by writing clear, concise, and objective alt text.</p> <ul> <li>Capture important elements</li> <li>Summarize text in images</li> <li>Use regular sentence structure</li> <li>Avoid redundant information</li> <li>Focus on trends and key findings in complex visuals (like diagrams or maps)</li> </ul>",
-  "interaction_modal.action.favourite": "To continue, you need to favorite from your account.",
-  "interaction_modal.action.follow": "To continue, you need to follow from your account.",
-  "interaction_modal.action.reblog": "To continue, you need to reblog from your account.",
-  "interaction_modal.action.reply": "To continue, you need to reply from your account.",
-  "interaction_modal.action.vote": "To continue, you need to vote from your account.",
+  "interaction_modal.action": "To interact with {name}'s post, you need to sign into your account on whatever Mastodon server you use.",
   "interaction_modal.go": "Go",
   "interaction_modal.no_account_yet": "Don't have an account yet?",
   "interaction_modal.on_another_server": "On a different server",
   "interaction_modal.on_this_server": "On this server",
-  "interaction_modal.title.favourite": "Favorite {name}'s post",
-  "interaction_modal.title.follow": "Follow {name}",
-  "interaction_modal.title.reblog": "Boost {name}'s post",
-  "interaction_modal.title.reply": "Reply to {name}'s post",
-  "interaction_modal.title.vote": "Vote in {name}'s poll",
+  "interaction_modal.title": "Sign in to continue",
   "interaction_modal.username_prompt": "E.g. {example}",
   "intervals.full.days": "{number, plural, one {# day} other {# days}}",
   "intervals.full.hours": "{number, plural, one {# hour} other {# hours}}",

app/javascript/styles/mastodon/components.scss

@@ -9533,13 +9533,6 @@ noscript {
     font-size: 14px;
   }
 
-  &__icon {
-    color: $highlight-text-color;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   &__lead {
     margin-bottom: 20px;