Add new "quick boosting" setting (#36516)

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

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import type { FC, KeyboardEvent, MouseEvent } from 'react';
+import type { FC, KeyboardEvent, MouseEvent, MouseEventHandler } from 'react';
 
 import { useIntl } from 'react-intl';
 
@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import { quoteComposeById } from '@/mastodon/actions/compose_typed';
 import { toggleReblog } from '@/mastodon/actions/interactions';
 import { openModal } from '@/mastodon/actions/modal';
+import { quickBoosting } from '@/mastodon/initial_state';
 import type { ActionMenuItem } from '@/mastodon/models/dropdown_menu';
 import type { Status } from '@/mastodon/models/status';
 import { useAppDispatch, useAppSelector } from '@/mastodon/store';
@@ -24,6 +25,55 @@ import {
   selectStatusState,
 } from './boost_button_utils';
 
+const StandaloneBoostButton: FC<ReblogButtonProps> = ({ status, counters }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const statusState = useAppSelector((state) =>
+    selectStatusState(state, status),
+  );
+  const { title, meta, iconComponent, disabled } = useMemo(
+    () => boostItemState(statusState),
+    [statusState],
+  );
+
+  const handleClick: MouseEventHandler = useCallback(
+    (event) => {
+      if (statusState.isLoggedIn) {
+        dispatch(toggleReblog(status.get('id') as string, event.shiftKey));
+      } else {
+        dispatch(
+          openModal({
+            modalType: 'INTERACTION',
+            modalProps: {
+              accountId: status.getIn(['account', 'id']),
+              url: status.get('uri'),
+            },
+          }),
+        );
+      }
+    },
+    [dispatch, status, statusState.isLoggedIn],
+  );
+
+  return (
+    <IconButton
+      disabled={disabled}
+      active={!!status.get('reblogged')}
+      title={intl.formatMessage(meta ?? title)}
+      icon='retweet'
+      iconComponent={iconComponent}
+      onClick={!disabled ? handleClick : undefined}
+      counter={
+        counters
+          ? (status.get('reblogs_count') as number) +
+            (status.get('quotes_count') as number)
+          : undefined
+      }
+    />
+  );
+};
+
 const renderMenuItem: RenderItemFn<ActionMenuItem> = (
   item,
   index,
@@ -46,7 +96,7 @@ interface ReblogButtonProps {
 
 type ActionMenuItemWithIcon = SomeRequired<ActionMenuItem, 'icon'>;
 
-export const BoostButton: FC<ReblogButtonProps> = ({ status, counters }) => {
+const BoostOrQuoteMenu: FC<ReblogButtonProps> = ({ status, counters }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const statusState = useAppSelector((state) =>
@@ -188,3 +238,9 @@ const ReblogMenuItem: FC<ReblogMenuItemProps> = ({
     </li>
   );
 };
+
+// Switch between the standalone boost button or the
+// "Boost or quote" menu based on the quickBoosting preference
+export const BoostButton = quickBoosting
+  ? StandaloneBoostButton
+  : BoostOrQuoteMenu;

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

@@ -20,11 +20,12 @@ import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'mastodon/
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
 import { Dropdown } from 'mastodon/components/dropdown_menu';
-import { me } from '../../initial_state';
+import { me, quickBoosting } from '../../initial_state';
 
 import { IconButton } from '../icon_button';
 import { BoostButton } from '../status/boost_button';
 import { RemoveQuoteHint } from './remove_quote_hint';
+import { quoteItemState, selectStatusState } from '../status/boost_button_utils';
 
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
@@ -68,6 +69,7 @@ const mapStateToProps = (state, { status }) => {
   return ({
     relationship: state.getIn(['relationships', status.getIn(['account', 'id'])]),
     quotedAccountId: quotedStatusId ? state.getIn(['statuses', quotedStatusId, 'account']) : null,
+    statusQuoteState: selectStatusState(state, status),
   });
 };
 
@@ -76,6 +78,7 @@ class StatusActionBar extends ImmutablePureComponent {
     identity: identityContextPropShape,
     status: ImmutablePropTypes.map.isRequired,
     relationship: ImmutablePropTypes.record,
+    statusQuoteState: PropTypes.object,
     quotedAccountId: PropTypes.string,
     contextType: PropTypes.string,
     onReply: PropTypes.func,
@@ -125,6 +128,10 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   };
 
+  handleQuoteClick = () => {
+    this.props.onQuote(this.props.status);
+  };
+
   handleShareClick = () => {
     navigator.share({
       url: this.props.status.get('url'),
@@ -241,7 +248,7 @@ class StatusActionBar extends ImmutablePureComponent {
   };
 
   render () {
-    const { status, relationship, quotedAccountId, contextType, intl, withDismiss, withCounters, scrollKey } = this.props;
+    const { status, relationship, statusQuoteState, quotedAccountId, contextType, intl, withDismiss, withCounters, scrollKey } = this.props;
     const { signedIn, permissions } = this.props.identity;
 
     const publicStatus       = ['public', 'unlisted'].includes(status.get('visibility'));
@@ -265,6 +272,20 @@ class StatusActionBar extends ImmutablePureComponent {
     if (publicStatus && 'share' in navigator) {
       menu.push({ text: intl.formatMessage(messages.share), action: this.handleShareClick });
     }
+    
+    if (quickBoosting && signedIn) {
+      const quoteItem = quoteItemState(statusQuoteState);
+      menu.push(null);
+      menu.push({
+        text: intl.formatMessage(quoteItem.title),
+        description: quoteItem.meta
+          ? intl.formatMessage(quoteItem.meta)
+          : undefined,
+        disabled: quoteItem.disabled,
+        action: this.handleQuoteClick,
+      });
+      menu.push(null);
+    }
 
     if (publicStatus && !isRemote) {
       menu.push({ text: intl.formatMessage(messages.embed), action: this.handleEmbed });

app/javascript/mastodon/features/status/components/action_bar.jsx

@@ -18,8 +18,9 @@ import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'mastodon/
 
 import { IconButton } from '../../../components/icon_button';
 import { Dropdown } from 'mastodon/components/dropdown_menu';
-import { me } from '../../../initial_state';
+import { me, quickBoosting } from '../../../initial_state';
 import { BoostButton } from '@/mastodon/components/status/boost_button';
+import { quoteItemState, selectStatusState } from '@/mastodon/components/status/boost_button_utils';
 
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
@@ -60,6 +61,7 @@ const mapStateToProps = (state, { status }) => {
   return ({
     relationship: state.getIn(['relationships', status.getIn(['account', 'id'])]),
     quotedAccountId: quotedStatusId ? state.getIn(['statuses', quotedStatusId, 'account']) : null,
+    statusQuoteState: selectStatusState(state, status),
   });
 };
 
@@ -68,6 +70,7 @@ class ActionBar extends PureComponent {
     identity: identityContextPropShape,
     status: ImmutablePropTypes.map.isRequired,
     relationship: ImmutablePropTypes.record,
+    statusQuoteState: PropTypes.object,
     quotedAccountId: ImmutablePropTypes.string,
     onReply: PropTypes.func.isRequired,
     onReblog: PropTypes.func.isRequired,
@@ -116,6 +119,10 @@ class ActionBar extends PureComponent {
     this.props.onRevokeQuote(this.props.status);
   };
 
+  handleQuoteClick = () => {
+    this.props.onQuote(this.props.status);
+  };
+
   handleQuotePolicyChange = () => {
     this.props.onQuotePolicyChange(this.props.status);
   };
@@ -200,7 +207,7 @@ class ActionBar extends PureComponent {
   };
 
   render () {
-    const { status, relationship, quotedAccountId, intl } = this.props;
+    const { status, relationship, statusQuoteState, quotedAccountId, intl } = this.props;
     const { signedIn, permissions } = this.props.identity;
 
     const publicStatus       = ['public', 'unlisted'].includes(status.get('visibility'));
@@ -222,6 +229,20 @@ class ActionBar extends PureComponent {
       menu.push({ text: intl.formatMessage(messages.share), action: this.handleShare });
     }
 
+    if (quickBoosting && signedIn) {
+      const quoteItem = quoteItemState(statusQuoteState);
+      menu.push(null);
+      menu.push({
+        text: intl.formatMessage(quoteItem.title),
+        description: quoteItem.meta
+          ? intl.formatMessage(quoteItem.meta)
+          : undefined,
+        disabled: quoteItem.disabled,
+        action: this.handleQuoteClick,
+      });
+      menu.push(null);
+    }
+
     if (publicStatus && (signedIn || !isRemote)) {
       menu.push({ text: intl.formatMessage(messages.embed), action: this.handleEmbed });
     }

app/javascript/mastodon/initial_state.ts

@@ -9,6 +9,7 @@ interface InitialStateMeta {
   activity_api_enabled: boolean;
   admin: string;
   boost_modal?: boolean;
+  quick_boosting?: boolean;
   delete_modal?: boolean;
   missing_alt_text_modal?: boolean;
   disable_swiping?: boolean;
@@ -89,6 +90,7 @@ function getMeta<K extends keyof InitialStateMeta>(
 export const activityApiEnabled = getMeta('activity_api_enabled');
 export const autoPlayGif = getMeta('auto_play_gif');
 export const boostModal = getMeta('boost_modal');
+export const quickBoosting = getMeta('quick_boosting');
 export const deleteModal = getMeta('delete_modal');
 export const missingAltTextModal = getMeta('missing_alt_text_modal');
 export const disableSwiping = getMeta('disable_swiping');

app/javascript/styles/mastodon/forms.scss

@@ -224,6 +224,10 @@ code {
       list-style: disc;
       margin-inline-start: 18px;
     }
+
+    .icon {
+      vertical-align: -3px;
+    }
   }
 
   ul.hint {