Favourites: display favourites for Mastodon (if exposableReactions is manually toggled)

app/soapbox/components/status_action_bar.js

@@ -458,7 +458,13 @@ class StatusActionBar extends ImmutablePureComponent {
             emoji={meEmojiReact}
             onClick={this.handleLikeButtonClick}
           />
-          {emojiReactCount !== 0 && <span className='detailed-status__link'>{emojiReactCount}</span>}
+          {emojiReactCount !== 0 && (
+            (features.exposableReactions && !features.emojiReacts) ? (
+              <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/likes`} className='detailed-status__link'>{emojiReactCount}</Link>
+            ) : (
+              <span className='detailed-status__link'>{emojiReactCount}</span>
+            )
+          )}
         </div>
         {shareButton}
 

app/soapbox/features/favourites/index.js

@@ -5,19 +5,25 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import LoadingIndicator from '../../components/loading_indicator';
 import { fetchFavourites } from '../../actions/interactions';
-import { FormattedMessage } from 'react-intl';
+import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
 import AccountContainer from '../../containers/account_container';
 import Column from '../ui/components/column';
 import ScrollableList from '../../components/scrollable_list';
 
+const messages = defineMessages({
+  heading: { id: 'column.favourites', defaultMessage: 'Likes' },
+});
+
 const mapStateToProps = (state, props) => ({
   accountIds: state.getIn(['user_lists', 'favourited_by', props.params.statusId]),
 });
 
 export default @connect(mapStateToProps)
+@injectIntl
 class Favourites extends ImmutablePureComponent {
 
   static propTypes = {
+    intl: PropTypes.object.isRequired,
     params: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired,
     accountIds: ImmutablePropTypes.orderedSet,
@@ -37,7 +43,7 @@ class Favourites extends ImmutablePureComponent {
   }
 
   render() {
-    const { accountIds } = this.props;
+    const { intl, accountIds } = this.props;
 
     if (!accountIds) {
       return (
@@ -50,7 +56,7 @@ class Favourites extends ImmutablePureComponent {
     const emptyMessage = <FormattedMessage id='empty_column.favourites' defaultMessage='No one has liked this post yet. When someone does, they will show up here.' />;
 
     return (
-      <Column>
+      <Column heading={intl.formatMessage(messages.heading)}>
         <ScrollableList
           scrollKey='favourites'
           emptyMessage={emptyMessage}

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

@@ -14,11 +14,10 @@ import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 
 const mapStateToProps = state => {
   const instance = state.get('instance');
-  const features = getFeatures(instance);
 
   return {
     allowedEmoji: getSoapboxConfig(state).get('allowedEmoji'),
-    reactionList: features.exposableReactions,
+    features: getFeatures(instance),
   };
 };
 
@@ -29,7 +28,7 @@ class StatusInteractionBar extends ImmutablePureComponent {
     status: ImmutablePropTypes.map,
     me: SoapboxPropTypes.me,
     allowedEmoji: ImmutablePropTypes.list,
-    reactionList: PropTypes.bool,
+    features: PropTypes.object.isRequired,
   }
 
   getNormalizedReacts = () => {
@@ -42,7 +41,7 @@ class StatusInteractionBar extends ImmutablePureComponent {
     ).reverse();
   }
 
-  getRepost = () => {
+  getReposts = () => {
     const { status } = this.props;
     if (status.get('reblogs_count')) {
       return (
@@ -58,8 +57,39 @@ class StatusInteractionBar extends ImmutablePureComponent {
     return '';
   }
 
+  getFavourites = () => {
+    const { features, status } = this.props;
+
+    if (status.get('favourites_count')) {
+      const favourites = (
+        <>
+          <Icon src={require('@tabler/icons/icons/thumb-up.svg')} />
+          <span className='emoji-reacts__count'>
+            <FormattedNumber value={status.get('favourites_count')} />
+          </span>
+        </>
+      );
+
+      if (features.exposableReactions) {
+        return (
+          <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/likes`} className='emoji-react emoji-react--favourites'>
+            {favourites}
+          </Link>
+        );
+      } else {
+        return (
+          <div className='emoji-react emoji-react--favourites'>
+            {favourites}
+          </div>
+        );
+      }
+    }
+
+    return '';
+  }
+
   getEmojiReacts = () => {
-    const { status, reactionList } = this.props;
+    const { status, features } = this.props;
 
     const emojiReacts = this.getNormalizedReacts();
     const count = emojiReacts.reduce((acc, cur) => (
@@ -81,7 +111,7 @@ class StatusInteractionBar extends ImmutablePureComponent {
                 </>
               );
 
-              if (reactionList) {
+              if (features.exposableReactions) {
                 return <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reactions/${e.get('name')}`} className='emoji-react' key={i}>{emojiReact}</Link>;
               }
 
@@ -99,13 +129,12 @@ class StatusInteractionBar extends ImmutablePureComponent {
   };
 
   render() {
-    const emojiReacts = this.getEmojiReacts();
+    const { features } = this.props;
-    const repost = this.getRepost();
 
     return (
       <div className='status-interaction-bar'>
-        {emojiReacts}
+        {features.emojiReacts ? this.getEmojiReacts() : this.getFavourites()}
-        {repost}
+        {this.getReposts()}
       </div>
     );
   }

app/soapbox/features/ui/index.js

@@ -56,7 +56,7 @@ import {
   Following,
   Reblogs,
   Reactions,
-  // Favourites,
+  Favourites,
   DirectTimeline,
   Conversations,
   HashtagTimeline,
@@ -288,6 +288,7 @@ class SwitchingColumnsArea extends React.PureComponent {
         <WrappedRoute path='/@:username/pins' component={PinnedStatuses} page={ProfilePage} content={children} />
         <WrappedRoute path='/@:username/posts/:statusId' publicRoute exact page={StatusPage} component={Status} content={children} />
         <WrappedRoute path='/@:username/posts/:statusId/reblogs' page={DefaultPage} component={Reblogs} content={children} />
+        <WrappedRoute path='/@:username/posts/:statusId/likes' page={DefaultPage} component={Favourites} content={children} />
         <WrappedRoute path='/@:username/posts/:statusId/reactions/:reaction?' page={DefaultPage} component={Reactions} content={children} />
         <Redirect from='/@:username/:statusId' to='/@:username/posts/:statusId' />
 

app/styles/components/detailed-status.scss

@@ -71,7 +71,6 @@
 
 .detailed-status__link {
   color: var(--primary-text-color--faint);
-  cursor: pointer;
   text-decoration: none;
   font-size: 13px;
 }

app/styles/components/emoji-reacts.scss

@@ -21,12 +21,19 @@
   }
 }
 
-.emoji-react--reblogs {
+.emoji-react--reblogs,
+.emoji-react--favourites {
   vertical-align: middle;
   display: inline-flex;
+  margin-right: 10px;
 
   .svg-icon {
     margin-right: 0.2em;
+  }
+}
+
+.emoji-react--reblogs {
+  .svg-icon {
     color: var(--highlight-text-color);
 
     svg {
@@ -35,6 +42,12 @@
   }
 }
 
+.emoji-react--favourites {
+  .svg-icon {
+    color: $gold-star;
+  }
+}
+
 .emoji-reacts {
   display: inline-flex;
   flex-direction: row-reverse;