Use dropdown for reposts, do not display cards for quote posts

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/dropdown_menu.js

@@ -207,6 +207,8 @@ export default class Dropdown extends React.PureComponent {
     src: PropTypes.string,
     items: PropTypes.array.isRequired,
     size: PropTypes.number,
+    active: PropTypes.bool,
+    pressed: PropTypes.bool,
     title: PropTypes.string,
     disabled: PropTypes.bool,
     status: ImmutablePropTypes.map,
@@ -217,6 +219,7 @@ export default class Dropdown extends React.PureComponent {
     dropdownPlacement: PropTypes.string,
     openDropdownId: PropTypes.number,
     openedViaKeyboard: PropTypes.bool,
+    text: PropTypes.string,
   };
 
   static defaultProps = {
@@ -302,7 +305,7 @@ export default class Dropdown extends React.PureComponent {
   }
 
   render() {
-    const { icon, src, items, size, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard } = this.props;
+    const { icon, src, items, size, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard, active, pressed, text } = this.props;
     const open = this.state.id === openDropdownId;
 
     return (
@@ -311,9 +314,11 @@ export default class Dropdown extends React.PureComponent {
           icon={icon}
           src={src}
           title={title}
-          active={open}
+          active={open || active}
+          pressed={pressed}
           disabled={disabled}
           size={size}
+          text={text}
           ref={this.setTargetRef}
           onClick={this.handleClick}
           onMouseDown={this.handleMouseDown}

app/soapbox/components/status.js

@@ -458,7 +458,7 @@ class Status extends ImmutablePureComponent {
           </Bundle>
         );
       }
-    } else if (status.get('spoiler_text').length === 0 && status.get('card')) {
+    } else if (status.get('spoiler_text').length === 0 && !status.getIn(['pleroma', 'quote']) && status.get('card')) {
       media = (
         <Card
           onOpenMedia={this.props.onOpenMedia}

app/soapbox/components/status_action_bar.js

@@ -62,6 +62,7 @@ const messages = defineMessages({
   reactionOpenMouth: { id: 'status.reactions.open_mouth', defaultMessage: 'Wow' },
   reactionCry: { id: 'status.reactions.cry', defaultMessage: 'Sad' },
   reactionWeary: { id: 'status.reactions.weary', defaultMessage: 'Weary' },
+  quotePost: { id: 'status.quote', defaultMessage: 'Quote post' },
 });
 
 class StatusActionBar extends ImmutablePureComponent {
@@ -506,7 +507,7 @@ class StatusActionBar extends ImmutablePureComponent {
   }
 
   render() {
-    const { status, intl, allowedEmoji, emojiSelectorFocused, handleEmojiSelectorUnfocus, features } = this.props;
+    const { status, intl, allowedEmoji, emojiSelectorFocused, handleEmojiSelectorUnfocus, features, me } = this.props;
     const { emojiSelectorVisible } = this.state;
 
     const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
@@ -530,6 +531,47 @@ class StatusActionBar extends ImmutablePureComponent {
       '😩': messages.reactionWeary,
     }[meEmojiReact] || messages.favourite);
 
+    let reblogButton;
+
+    if (me && features.quotePosts) {
+      const reblogMenu = [
+        {
+          text: intl.formatMessage(status.get('reblogged') ? messages.cancel_reblog_private : messages.reblog),
+          action: this.handleReblogClick,
+          icon: require('@tabler/icons/icons/repeat.svg'),
+        },
+        {
+          text: intl.formatMessage(messages.quotePost),
+          action: this.handleQuoteClick,
+          icon: require('@tabler/icons/icons/quote.svg'),
+        },
+      ];
+
+      reblogButton = (
+        <DropdownMenuContainer
+          items={reblogMenu}
+          disabled={!publicStatus}
+          active={status.get('reblogged')}
+          pressed={status.get('reblogged')}
+          title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
+          src={require('@tabler/icons/icons/repeat.svg')}
+          direction='right'
+        />
+      );
+    } else {
+      reblogButton = (
+        <IconButton
+          className='status__action-bar-button'
+          disabled={!publicStatus}
+          active={status.get('reblogged')}
+          pressed={status.get('reblogged')}
+          title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
+          src={reblogIcon}
+          onClick={this.handleReblogClick}
+        />
+      );
+    }
+
     const menu = this._makeMenu(publicStatus);
     let reblogIcon = require('feather-icons/dist/icons/repeat.svg');
     let replyTitle;
@@ -563,13 +605,10 @@ class StatusActionBar extends ImmutablePureComponent {
           <IconButton className='status__action-bar-button' title={replyTitle} src={require('feather-icons/dist/icons/message-circle.svg')} onClick={this.handleReplyClick} />
           {replyCount !== 0 && <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`} className='detailed-status__link'>{replyCount}</Link>}
         </div>
-        <div className='status__action-bar__counter'>
+        <div className='status__action-bar__counter status__action-bar__counter--reblog'>
-          <IconButton className='status__action-bar-button' disabled={!publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} src={reblogIcon} onClick={this.handleReblogClick} />
+          {reblogButton}
           {reblogCount !== 0 && <span className='detailed-status__link' type='button' role='presentation' onClick={this.handleOpenReblogsModal}>{reblogCount}</span>}
         </div>
-        <div className='status__action-bar__counter'>
-          <IconButton className='status__action-bar-button' disabled={!publicStatus} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} src={require('@tabler/icons/icons/quote.svg')} onClick={this.handleQuoteClick} />
-        </div>
         <div
           className='status__action-bar__counter status__action-bar__counter--favourite'
           onMouseEnter={this.handleLikeButtonHover}

app/soapbox/features/status/components/action_bar.js

@@ -53,6 +53,7 @@ const messages = defineMessages({
   reactionCry: { id: 'status.reactions.cry', defaultMessage: 'Sad' },
   reactionWeary: { id: 'status.reactions.weary', defaultMessage: 'Weary' },
   emojiPickerExpand: { id: 'status.reactions_expand', defaultMessage: 'Select emoji' },
+  quotePost: { id: 'status.quote', defaultMessage: 'Quote post' },
 });
 
 const mapStateToProps = state => {
@@ -87,6 +88,7 @@ class ActionBar extends React.PureComponent {
     status: ImmutablePropTypes.map.isRequired,
     onReply: PropTypes.func.isRequired,
     onReblog: PropTypes.func.isRequired,
+    onQuote: PropTypes.func.isRequired,
     onFavourite: PropTypes.func.isRequired,
     onEmojiReact: PropTypes.func.isRequired,
     onDelete: PropTypes.func.isRequired,
@@ -143,6 +145,15 @@ class ActionBar extends React.PureComponent {
     }
   }
 
+  handleQuoteClick = () => {
+    const { me, onQuote, onOpenUnauthorizedModal, status } = this.props;
+    if (me) {
+      onQuote(status, this.context.router.history);
+    } else {
+      onOpenUnauthorizedModal('REBLOG');
+    }
+  }
+
   handleBookmarkClick = () => {
     this.props.onBookmark(this.props.status);
   }
@@ -319,6 +330,47 @@ class ActionBar extends React.PureComponent {
       '😩': messages.reactionWeary,
     }[meEmojiReact] || messages.favourite);
 
+    let reblogButton;
+
+    if (me && features.quotePosts) {
+      const reblogMenu = [
+        {
+          text: intl.formatMessage(status.get('reblogged') ? messages.cancel_reblog_private : messages.reblog),
+          action: this.handleReblogClick,
+          icon: require('@tabler/icons/icons/repeat.svg'),
+        },
+        {
+          text: intl.formatMessage(messages.quotePost),
+          action: this.handleQuoteClick,
+          icon: require('@tabler/icons/icons/quote.svg'),
+        },
+      ];
+
+      reblogButton = (
+        <DropdownMenuContainer
+          items={reblogMenu}
+          disabled={!publicStatus}
+          active={status.get('reblogged')}
+          pressed={status.get('reblogged')}
+          title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
+          src={require('@tabler/icons/icons/repeat.svg')}
+          direction='right'
+          text={intl.formatMessage(messages.reblog)}
+        />
+      );
+    } else {
+      reblogButton = (
+        <IconButton
+          disabled={reblog_disabled}
+          active={status.get('reblogged')}
+          title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
+          src={reblogIcon}
+          onClick={this.handleReblogClick}
+          text={intl.formatMessage(messages.reblog)}
+        />
+      );
+    }
+
     const menu = [];
 
     if (publicStatus) {
@@ -497,14 +549,7 @@ class ActionBar extends React.PureComponent {
           />
         </div>
         <div className='detailed-status__button'>
-          <IconButton
+          {reblogButton}
-            disabled={reblog_disabled}
-            active={status.get('reblogged')}
-            title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
-            src={reblogIcon}
-            onClick={this.handleReblogClick}
-            text={intl.formatMessage(messages.reblog)}
-          />
         </div>
         <div
           className='detailed-status__button detailed-status__button--favourite'

app/soapbox/features/status/components/detailed_status.js

@@ -157,7 +157,7 @@ class DetailedStatus extends ImmutablePureComponent {
           />
         );
       }
-    } else if (status.get('spoiler_text').length === 0) {
+    } else if (status.get('spoiler_text').length === 0 && !status.getIn(['pleroma', 'quote'])) {
       media = <Card onOpenMedia={this.props.onOpenMedia} card={status.get('card', null)} />;
     }
 

app/soapbox/features/status/components/quoted_status.js

@@ -29,6 +29,8 @@ class QuotedStatus extends ImmutablePureComponent {
       }
 
       this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('id')}`);
+
+      e.preventDefault();
     }
   }
 

app/soapbox/utils/features.js

@@ -78,6 +78,7 @@ export const getFeatures = createSelector([
     remoteInteractionsAPI: v.software === PLEROMA && gte(v.version, '2.4.50'),
     explicitAddressing: v.software === PLEROMA && gte(v.version, '1.0.0'),
     accountEndorsements: v.software === PLEROMA && gte(v.version, '2.4.50'),
+    quotePosts: v.software === PLEROMA && gte(v.version, '2.4.50'),
   };
 });
 

app/styles/components/status.scss

@@ -338,6 +338,16 @@
       font-weight: 500;
       color: var(--brand-color);
     }
+
+    &--reblog {
+      > div {
+        display: flex;
+
+        > .icon-button {
+          margin-right: 8px;
+        }
+      }
+    }
   }
 }