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

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'),
         },