Fix subscribe WebUI

app/javascript/mastodon/actions/accounts.js

@@ -1,6 +1,5 @@
 import api, { getLinks } from '../api';
 import { importFetchedAccount, importFetchedAccounts } from './importer';
-import { Map as ImmutableMap } from 'immutable';
 
 export const ACCOUNT_FETCH_REQUEST = 'ACCOUNT_FETCH_REQUEST';
 export const ACCOUNT_FETCH_SUCCESS = 'ACCOUNT_FETCH_SUCCESS';

app/javascript/mastodon/components/account.js

@@ -9,7 +9,6 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { me, show_followed_by, follow_button_to_list_adder } from '../initial_state';
 import RelativeTimestamp from './relative_timestamp';
-import { Map as ImmutableMap } from 'immutable';
 
 const messages = defineMessages({
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
@@ -129,12 +128,33 @@ class Account extends ImmutablePureComponent {
       } else {
         let following_buttons, subscribing_buttons;
         if (!account.get('moved') || subscribing ) {
-          subscribing_buttons = <IconButton icon='rss-square' title={intl.formatMessage(subscribing ? messages.unsubscribe : messages.subscribe)} onClick={this.handleSubscribe} active={subscribing} no_delivery={subscribing && !subscribing_home} />;
+          subscribing_buttons = (
+            <IconButton
+              icon='rss-square'
+              title={intl.formatMessage(
+                subscribing ? messages.unsubscribe : messages.subscribe
+              )}
+              onClick={this.handleSubscribe}
+              active={subscribing}
+              no_delivery={subscribing && !subscribing_home}
+            />
+          );
         }
         if (!account.get('moved') || following) {
-          following_buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} passive={followed_by} no_delivery={following && !delivery} />;
+          following_buttons = (
+            <IconButton
+              icon={following ? 'user-times' : 'user-plus'}
+              title={intl.formatMessage(
+                following ? messages.unfollow : messages.follow
+              )}
+              onClick={this.handleFollow}
+              active={following}
+              passive={followed_by}
+              no_delivery={following && !delivery}
+            />
+          );
         }
-        buttons = <span>{subscribing_buttons}{following_buttons}</span>
+        buttons = <Fragment>{subscribing_buttons}{following_buttons}</Fragment>;
       }
     }
 

app/javascript/mastodon/containers/account_container.js

@@ -16,7 +16,6 @@ import {
 import { openModal } from '../actions/modal';
 import { initMuteModal } from '../actions/mutes';
 import { unfollowModal, unsubscribeModal } from '../initial_state';
-import { Map as ImmutableMap } from 'immutable';
 
 const messages = defineMessages({
   unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },

app/javascript/mastodon/containers/status_container.js

@@ -50,7 +50,6 @@ import { deployPictureInPicture } from '../actions/picture_in_picture';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { boostModal, deleteModal, unfollowModal, unsubscribeModal } from '../initial_state';
 import { showAlertForError } from '../actions/alerts';
-import { Map as ImmutableMap } from 'immutable';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },

app/javascript/mastodon/features/account/components/header.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
@@ -14,7 +14,6 @@ import ShortNumber from 'mastodon/components/short_number';
 import { NavLink } from 'react-router-dom';
 import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
 import AccountNoteContainer from '../containers/account_note_container';
-import { Map as ImmutableMap } from 'immutable';
 
 const messages = defineMessages({
   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
@@ -297,12 +296,33 @@ class Header extends ImmutablePureComponent {
     if(me !== account.get('id') && !blockd_by) {
       let following_buttons, subscribing_buttons;
       if(!account.get('moved') || subscribing) {
-        subscribing_buttons = <IconButton icon='rss-square' title={intl.formatMessage(subscribing ? messages.unsubscribe : messages.subscribe)} onClick={this.handleSubscribe} active={subscribing} no_delivery={subscribing && !subscribing_home} />;
+        subscribing_buttons = (
+          <IconButton
+            icon='rss-square'
+            title={intl.formatMessage(
+              subscribing ? messages.unsubscribe : messages.subscribe
+            )}
+            onClick={this.handleSubscribe}
+            active={subscribing}
+            no_delivery={subscribing && !subscribing_home}
+          />
+        );
       }
       if(!account.get('moved') || following) {
-        following_buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} passive={followed_by} no_delivery={following && !delivery} />;
+        following_buttons = (
+          <IconButton
+            icon={following ? 'user-times' : 'user-plus'}
+            title={intl.formatMessage(
+              following ? messages.unfollow : messages.follow
+            )}
+            onClick={this.handleFollow}
+            active={following}
+            passive={followed_by}
+            no_delivery={following && !delivery}
+          />
+        );
       }
-      buttons = <span>{subscribing_buttons}{following_buttons}</span>
+      buttons = <Fragment>{subscribing_buttons}{following_buttons}</Fragment>;
     }
 
     return (

app/javascript/mastodon/features/directory/components/account_card.js

@@ -10,7 +10,14 @@ import Permalink from 'mastodon/components/permalink';
 import RelativeTimestamp from 'mastodon/components/relative_timestamp';
 import IconButton from 'mastodon/components/icon_button';
 import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
-import { autoPlayGif, me, unfollowModal, unsubscribeModal, show_followed_by } from 'mastodon/initial_state';
+import {
+  autoPlayGif,
+  me,
+  unfollowModal,
+  unsubscribeModal,
+  show_followed_by,
+  follow_button_to_list_adder,
+} from 'mastodon/initial_state';
 import ShortNumber from 'mastodon/components/short_number';
 import {
   followAccount,
@@ -19,11 +26,10 @@ import {
   unsubscribeAccount,
   blockAccount,
   unblockAccount,
-  unmuteAccount
+  unmuteAccount,
 } from 'mastodon/actions/accounts';
 import { openModal } from 'mastodon/actions/modal';
 import { initMuteModal } from 'mastodon/actions/mutes';
-import { Map as ImmutableMap } from 'immutable';
 
 const messages = defineMessages({
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
@@ -262,7 +268,7 @@ class AccountCard extends ImmutablePureComponent {
             />
           );
         }
-        buttons = <Fragment>{subscribing_buttons}{following_buttons}</Fragment>
+        buttons = <Fragment>{subscribing_buttons}{following_buttons}</Fragment>;
       }
     }
 

app/javascript/mastodon/features/group_directory/components/account_card.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
@@ -10,11 +10,20 @@ import Permalink from 'mastodon/components/permalink';
 import RelativeTimestamp from 'mastodon/components/relative_timestamp';
 import IconButton from 'mastodon/components/icon_button';
 import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
-import { autoPlayGif, me, unfollowModal } from 'mastodon/initial_state';
+import {
+  autoPlayGif,
+  me,
+  unfollowModal,
+  unsubscribeModal,
+  show_followed_by,
+  follow_button_to_list_adder,
+} from 'mastodon/initial_state';
 import ShortNumber from 'mastodon/components/short_number';
 import {
   followAccount,
   unfollowAccount,
+  subscribeAccount,
+  unsubscribeAccount,
   blockAccount,
   unblockAccount,
   unmuteAccount,
@@ -25,6 +34,8 @@ import { initMuteModal } from 'mastodon/actions/mutes';
 const messages = defineMessages({
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
+  unsubscribe: { id: 'account.unsubscribe', defaultMessage: 'Unsubscribe' },
+  subscribe: { id: 'account.subscribe', defaultMessage: 'Subscribe' },
   requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
   unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
   unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
@@ -32,6 +43,10 @@ const messages = defineMessages({
     id: 'confirmations.unfollow.confirm',
     defaultMessage: 'Unfollow',
   },
+  unsubscribeConfirm: {
+    id: 'confirmations.unsubscribe.confirm',
+    defaultMessage: 'Unsubscribe'
+  },
 });
 
 const makeMapStateToProps = () => {
@@ -72,6 +87,28 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     }
   },
 
+  onSubscribe(account) {
+    if (account.getIn(['relationship', 'subscribing', '-1'], new Map).size > 0) {
+      if (unsubscribeModal) {
+        dispatch(openModal('CONFIRM', {
+          message: <FormattedMessage id='confirmations.unsubscribe.message' defaultMessage='Are you sure you want to unsubscribe {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
+          confirm: intl.formatMessage(messages.unsubscribeConfirm),
+          onConfirm: () => dispatch(unsubscribeAccount(account.get('id'))),
+        }));
+      } else {
+        dispatch(unsubscribeAccount(account.get('id')));
+      }
+    } else {
+      dispatch(subscribeAccount(account.get('id')));
+    }
+  },
+
+  onAddToList(account){
+    dispatch(openModal('LIST_ADDER', {
+      accountId: account.get('id'),
+    }));
+  },
+
   onBlock(account) {
     if (account.getIn(['relationship', 'blocking'])) {
       dispatch(unblockAccount(account.get('id')));
@@ -98,6 +135,8 @@ class AccountCard extends ImmutablePureComponent {
     account: ImmutablePropTypes.map.isRequired,
     intl: PropTypes.object.isRequired,
     onFollow: PropTypes.func.isRequired,
+    onSubscribe: PropTypes.func.isRequired,
+    onAddToList: PropTypes.func.isRequired,
     onBlock: PropTypes.func.isRequired,
     onMute: PropTypes.func.isRequired,
   };
@@ -139,8 +178,20 @@ class AccountCard extends ImmutablePureComponent {
     target.src = target.getAttribute('data-static');
   };
 
-  handleFollow = () => {
+  handleFollow = (e) => {
+    if ((e && e.shiftKey) || !follow_button_to_list_adder) {
       this.props.onFollow(this.props.account);
+    } else {
+      this.props.onAddToList(this.props.account);
+    }
+  };
+
+  handleSubscribe = (e) => {
+    if ((e && e.shiftKey) || !follow_button_to_list_adder) {
+      this.props.onSubscribe(this.props.account);
+    } else {
+      this.props.onAddToList(this.props.account);
+    }
   };
 
   handleBlock = () => {
@@ -165,6 +216,10 @@ class AccountCard extends ImmutablePureComponent {
       account.get('relationship', null) !== null
     ) {
       const following = account.getIn(['relationship', 'following']);
+      const delivery         = account.getIn(['relationship', 'delivery_following']);
+      const followed_by      = account.getIn(['relationship', 'followed_by']) && show_followed_by;
+      const subscribing      = account.getIn(['relationship', 'subscribing'], new Map).size > 0;
+      const subscribing_home = account.getIn(['relationship', 'subscribing', '-1'], new Map).size > 0;
       const requested = account.getIn(['relationship', 'requested']);
       const blocking = account.getIn(['relationship', 'blocking']);
       const muting = account.getIn(['relationship', 'muting']);
@@ -200,17 +255,36 @@ class AccountCard extends ImmutablePureComponent {
           />
         );
       } else if (!account.get('moved') || following) {
-        buttons = (
+        let following_buttons, subscribing_buttons;
+        if(!account.get('moved') || subscribing) {
+          subscribing_buttons = (
+            <IconButton
+              icon='rss-square'
+              title={intl.formatMessage(
+                subscribing ? messages.unsubscribe : messages.subscribe
+              )}
+              onClick={this.handleSubscribe}
+              active={subscribing}
+              no_delivery={subscribing && !subscribing_home}
+            />
+          );
+        }
+        if(!account.get('moved') || following) {
+          following_buttons = (
             <IconButton
               icon={following ? 'user-times' : 'user-plus'}
               title={intl.formatMessage(
-              following ? messages.unfollow : messages.follow,
+                following ? messages.unfollow : messages.follow
               )}
               onClick={this.handleFollow}
               active={following}
+              passive={followed_by}
+              no_delivery={following && !delivery}
             />
           );
         }
+        buttons = <Fragment>{subscribing_buttons}{following_buttons}</Fragment>;
+      }
     }
 
     return (

app/javascript/mastodon/features/group_timeline/components/group_detail.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
@@ -9,11 +9,20 @@ import Avatar from 'mastodon/components/avatar';
 import DisplayName from 'mastodon/components/display_name';
 import IconButton from 'mastodon/components/icon_button';
 import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
-import { autoPlayGif, me, unfollowModal } from 'mastodon/initial_state';
+import {
+  autoPlayGif,
+  me,
+  unfollowModal,
+  unsubscribeModal,
+  show_followed_by,
+  follow_button_to_list_adder,
+} from 'mastodon/initial_state';
 import ShortNumber from 'mastodon/components/short_number';
 import {
   followAccount,
   unfollowAccount,
+  subscribeAccount,
+  unsubscribeAccount,
   blockAccount,
   unblockAccount,
   unmuteAccount,
@@ -24,6 +33,8 @@ import { initMuteModal } from 'mastodon/actions/mutes';
 const messages = defineMessages({
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
+  unsubscribe: { id: 'account.unsubscribe', defaultMessage: 'Unsubscribe' },
+  subscribe: { id: 'account.subscribe', defaultMessage: 'Subscribe' },
   requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
   unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
   unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
@@ -31,6 +42,10 @@ const messages = defineMessages({
     id: 'confirmations.unfollow.confirm',
     defaultMessage: 'Unfollow',
   },
+  unsubscribeConfirm: {
+    id: 'confirmations.unsubscribe.confirm',
+    defaultMessage: 'Unsubscribe'
+  },
 });
 
 const makeMapStateToProps = () => {
@@ -71,6 +86,28 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     }
   },
 
+  onSubscribe(account) {
+    if (account.getIn(['relationship', 'subscribing', '-1'], new Map).size > 0) {
+      if (unsubscribeModal) {
+        dispatch(openModal('CONFIRM', {
+          message: <FormattedMessage id='confirmations.unsubscribe.message' defaultMessage='Are you sure you want to unsubscribe {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
+          confirm: intl.formatMessage(messages.unsubscribeConfirm),
+          onConfirm: () => dispatch(unsubscribeAccount(account.get('id'))),
+        }));
+      } else {
+        dispatch(unsubscribeAccount(account.get('id')));
+      }
+    } else {
+      dispatch(subscribeAccount(account.get('id')));
+    }
+  },
+
+  onAddToList(account){
+    dispatch(openModal('LIST_ADDER', {
+      accountId: account.get('id'),
+    }));
+  },
+
   onBlock(account) {
     if (account.getIn(['relationship', 'blocking'])) {
       dispatch(unblockAccount(account.get('id')));
@@ -97,6 +134,8 @@ class GroupDetail extends ImmutablePureComponent {
     account: ImmutablePropTypes.map.isRequired,
     intl: PropTypes.object.isRequired,
     onFollow: PropTypes.func.isRequired,
+    onSubscribe: PropTypes.func.isRequired,
+    onAddToList: PropTypes.func.isRequired,
     onBlock: PropTypes.func.isRequired,
     onMute: PropTypes.func.isRequired,
   };
@@ -138,8 +177,20 @@ class GroupDetail extends ImmutablePureComponent {
     target.src = target.getAttribute('data-static');
   };
 
-  handleFollow = () => {
+  handleFollow = (e) => {
+    if ((e && e.shiftKey) || !follow_button_to_list_adder) {
       this.props.onFollow(this.props.account);
+    } else {
+      this.props.onAddToList(this.props.account);
+    }
+  };
+
+  handleSubscribe = (e) => {
+    if ((e && e.shiftKey) || !follow_button_to_list_adder) {
+      this.props.onSubscribe(this.props.account);
+    } else {
+      this.props.onAddToList(this.props.account);
+    }
   };
 
   handleBlock = () => {
@@ -164,6 +215,10 @@ class GroupDetail extends ImmutablePureComponent {
       account.get('relationship', null) !== null
     ) {
       const following        = account.getIn(['relationship', 'following']);
+      const delivery         = account.getIn(['relationship', 'delivery_following']);
+      const followed_by      = account.getIn(['relationship', 'followed_by']) && show_followed_by;
+      const subscribing      = account.getIn(['relationship', 'subscribing'], new Map).size > 0;
+      const subscribing_home = account.getIn(['relationship', 'subscribing', '-1'], new Map).size > 0;
       const requested        = account.getIn(['relationship', 'requested']);
       const blocking         = account.getIn(['relationship', 'blocking']);
       const muting           = account.getIn(['relationship', 'muting']);
@@ -199,17 +254,36 @@ class GroupDetail extends ImmutablePureComponent {
           />
         );
       } else if (!account.get('moved') || following) {
-        buttons = (
+        let following_buttons, subscribing_buttons;
+        if(!account.get('moved') || subscribing) {
+          subscribing_buttons = (
+            <IconButton
+              icon='rss-square'
+              title={intl.formatMessage(
+                subscribing ? messages.unsubscribe : messages.subscribe
+              )}
+              onClick={this.handleSubscribe}
+              active={subscribing}
+              no_delivery={subscribing && !subscribing_home}
+            />
+          );
+        }
+        if(!account.get('moved') || following) {
+          following_buttons = (
             <IconButton
               icon={following ? 'user-times' : 'user-plus'}
               title={intl.formatMessage(
-              following ? messages.unfollow : messages.follow,
+                following ? messages.unfollow : messages.follow
               )}
               onClick={this.handleFollow}
               active={following}
+              passive={followed_by}
+              no_delivery={following && !delivery}
             />
           );
         }
+        buttons = <Fragment>{subscribing_buttons}{following_buttons}</Fragment>;
+      }
     }
 
     return (

app/javascript/mastodon/features/list_adder/components/account.js

@@ -10,7 +10,6 @@ import { unfollowAccount, followAccount } from '../../../actions/accounts';
 import { me, show_followed_by, unfollowModal } from '../../../initial_state';
 import { openModal } from '../../../actions/modal';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { Map as ImmutableMap } from 'immutable';
 
 const messages = defineMessages({
   follow: { id: 'account.follow', defaultMessage: 'Follow' },

app/javascript/styles/mastodon/components.scss

@@ -6165,7 +6165,7 @@ a.status-card.compact:hover {
       }
 
       &__relationship {
-        width: 23px;
+        width: 46px;
         min-height: 1px;
         flex: 0 0 auto;
       }