Add bookmark button to detailed status action bar view

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

@@ -34,6 +34,8 @@ const messages = defineMessages({
   admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
   admin_status: { id: 'status.admin_status', defaultMessage: 'Open this post in the moderation interface' },
   copy: { id: 'status.copy', defaultMessage: 'Copy link to post' },
+  bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
+  unbookmark: { id: 'status.unbookmark', defaultMessage: 'Remove bookmark' },
 });
 
 const mapStateToProps = state => {
@@ -63,6 +65,7 @@ class ActionBar extends React.PureComponent {
     onFavourite: PropTypes.func.isRequired,
     onEmojiReact: PropTypes.func.isRequired,
     onDelete: PropTypes.func.isRequired,
+    onBookmark: PropTypes.func,
     onDirect: PropTypes.func.isRequired,
     onMention: PropTypes.func.isRequired,
     onMute: PropTypes.func,
@@ -103,6 +106,10 @@ class ActionBar extends React.PureComponent {
     }
   }
 
+  handleBookmarkClick = () => {
+    this.props.onBookmark(this.props.status);
+  }
+
   handleFavouriteClick = () => {
     const { me } = this.props;
     if (me) {
@@ -237,9 +244,12 @@ class ActionBar extends React.PureComponent {
     if (publicStatus) {
       menu.push({ text: intl.formatMessage(messages.copy), action: this.handleCopy });
       // menu.push({ text: intl.formatMessage(messages.embed), action: this.handleEmbed });
-      menu.push(null);
     }
 
+    menu.push({ text: intl.formatMessage(status.get('bookmarked') ? messages.unbookmark : messages.bookmark), action: this.handleBookmarkClick });
+
+    menu.push(null);
+
     if (me === status.getIn(['account', 'id'])) {
       if (publicStatus) {
         menu.push({ text: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin), action: this.handlePinClick });

app/soapbox/features/status/containers/detailed_status_container.js

@@ -12,6 +12,8 @@ import {
   favourite,
   unreblog,
   unfavourite,
+  bookmark,
+  unbookmark,
   pin,
   unpin,
 } from '../../../actions/interactions';
@@ -88,6 +90,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     });
   },
 
+  onBookmark(status) {
+    if (status.get('bookmarked')) {
+      dispatch(unbookmark(status));
+    } else {
+      dispatch(bookmark(status));
+    }
+  },
+
   onFavourite(status) {
     if (status.get('favourited')) {
       dispatch(unfavourite(status));

app/soapbox/features/status/index.js

@@ -14,6 +14,8 @@ import {
   unfavourite,
   reblog,
   unreblog,
+  bookmark,
+  unbookmark,
   pin,
   unpin,
 } from '../../actions/interactions';
@@ -168,6 +170,14 @@ class Status extends ImmutablePureComponent {
     }
   }
 
+  handleBookmark = (status) => {
+    if (status.get('bookmarked')) {
+      this.props.dispatch(unbookmark(status));
+    } else {
+      this.props.dispatch(bookmark(status));
+    }
+  }
+
   handleReplyClick = (status) => {
     let { askReplyConfirmation, dispatch, intl } = this.props;
     if (askReplyConfirmation) {
@@ -507,6 +517,7 @@ class Status extends ImmutablePureComponent {
                 onBlock={this.handleBlockClick}
                 onReport={this.handleReport}
                 onPin={this.handlePin}
+                onBookmark={this.handleBookmark}
                 onEmbed={this.handleEmbed}
               />
             </div>