Merge branch 'develop' into 'snackbar-action-link'

# Conflicts:
#   app/soapbox/features/edit_profile/index.js

app/soapbox/features/ui/components/birthdays_modal.js

@@ -0,0 +1,97 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
+import { connect } from 'react-redux';
+
+import IconButton from 'soapbox/components/icon_button';
+import LoadingIndicator from 'soapbox/components/loading_indicator';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import Account from 'soapbox/features/birthdays/account';
+
+const messages = defineMessages({
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+});
+
+const mapStateToProps = (state) => {
+  const me = state.get('me');
+
+  return {
+    accountIds: state.getIn(['user_lists', 'birthday_reminders', me]),
+  };
+};
+
+export default @connect(mapStateToProps)
+@injectIntl
+class BirthdaysModal extends React.PureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
+  static propTypes = {
+    onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+    accountIds: ImmutablePropTypes.orderedSet,
+  };
+
+  componentDidMount() {
+    this.unlistenHistory = this.context.router.history.listen((_, action) => {
+      if (action === 'PUSH') {
+        this.onClickClose(null, true);
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    if (this.unlistenHistory) {
+      this.unlistenHistory();
+    }
+  }
+
+  onClickClose = (_, noPop) => {
+    this.props.onClose('BIRTHDAYS', noPop);
+  };
+
+  render() {
+    const { intl, accountIds } = this.props;
+
+    let body;
+
+    if (!accountIds) {
+      body = <LoadingIndicator />;
+    } else {
+      const emptyMessage = <FormattedMessage id='status.reblogs.empty' defaultMessage='No one has reposted this post yet. When someone does, they will show up here.' />;
+
+      body = (
+        <ScrollableList
+          scrollKey='reblogs'
+          emptyMessage={emptyMessage}
+        >
+          {accountIds.map(id =>
+            <Account key={id} accountId={id} withNote={false} />,
+          )}
+        </ScrollableList>
+      );
+    }
+
+
+    return (
+      <div className='modal-root__modal reactions-modal'>
+        <div className='compose-modal__header'>
+          <h3 className='compose-modal__header__title'>
+            <FormattedMessage id='column.birthdays' defaultMessage='Birthdays' />
+          </h3>
+          <IconButton
+            className='compose-modal__close'
+            title={intl.formatMessage(messages.close)}
+            src={require('@tabler/icons/icons/x.svg')}
+            onClick={this.onClickClose} size={20}
+          />
+        </div>
+        {body}
+      </div>
+    );
+  }
+
+}

app/soapbox/features/ui/components/modal_root.js

@@ -26,6 +26,7 @@ import {
   FavouritesModal,
   ReblogsModal,
   MentionsModal,
+  BirthdaysModal,
 } from '../../../features/ui/util/async-components';
 import BundleContainer from '../containers/bundle_container';
 
@@ -57,6 +58,7 @@ const MODAL_COMPONENTS = {
   'FAVOURITES': FavouritesModal,
   'REACTIONS': ReactionsModal,
   'MENTIONS': MentionsModal,
+  'BIRTHDAYS': BirthdaysModal,
 };
 
 export default class ModalRoot extends React.PureComponent {

app/soapbox/features/ui/components/pending_status.js

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { Link, NavLink } from 'react-router-dom';
 
@@ -9,9 +10,10 @@ import DisplayName from 'soapbox/components/display_name';
 import RelativeTimestamp from 'soapbox/components/relative_timestamp';
 import StatusContent from 'soapbox/components/status_content';
 import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder_card';
+import PlaceholderMediaGallery from 'soapbox/features/placeholder/components/placeholder_media_gallery';
+import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
 import { getDomain } from 'soapbox/utils/accounts';
 
-import PlaceholderMediaGallery from '../../placeholder/components/placeholder_media_gallery';
 import { buildStatus } from '../util/pending_status_builder';
 
 import PollPreview from './poll_preview';
@@ -29,6 +31,7 @@ const mapStateToProps = (state, props) => {
 };
 
 export default @connect(mapStateToProps)
+@injectIntl
 class PendingStatus extends ImmutablePureComponent {
 
   renderMedia = () => {
@@ -40,13 +43,63 @@ class PendingStatus extends ImmutablePureComponent {
           media={status.get('media_attachments')}
         />
       );
-    } else if (shouldHaveCard(status)) {
+    } else if (!status.get('quote') && shouldHaveCard(status)) {
       return <PlaceholderCard />;
     } else {
       return null;
     }
   }
 
+  renderReplyMentions = () => {
+    const { status } = this.props;
+
+    if (!status.get('in_reply_to_id')) {
+      return null;
+    }
+
+    const to = status.get('mentions', []);
+
+    if (to.size === 0) {
+      if (status.get('in_reply_to_account_id') === status.getIn(['account', 'id'])) {
+        return (
+          <div className='reply-mentions'>
+            <FormattedMessage
+              id='reply_mentions.reply'
+              defaultMessage='Replying to {accounts}{more}'
+              values={{
+                accounts: <span className='reply-mentions__account'>@{status.getIn(['account', 'username'])}</span>,
+                more: false,
+              }}
+            />
+          </div>
+        );
+      } else {
+        return (
+          <div className='reply-mentions'>
+            <FormattedMessage id='reply_mentions.reply_empty' defaultMessage='Replying to post' />
+          </div>
+        );
+      }
+    }
+
+
+    return (
+      <div className='reply-mentions'>
+        <FormattedMessage
+          id='reply_mentions.reply'
+          defaultMessage='Replying to {accounts}{more}'
+          values={{
+            accounts: to.slice(0, 2).map(account => (<>
+              <span key={account.username} className='reply-mentions__account'>@{account.username}</span>
+              {' '}
+            </>)),
+            more: to.size > 2 && <FormattedMessage id='reply_mentions.more' defaultMessage='and {count} more' values={{ count: to.size - 2 }} />,
+          }}
+        />
+      </div>
+    );
+  }
+
   render() {
     const { status, className } = this.props;
     if (!status) return null;
@@ -84,6 +137,8 @@ class PendingStatus extends ImmutablePureComponent {
               </div>
             </div>
 
+            {this.renderReplyMentions()}
+
             <StatusContent
               status={status}
               expanded
@@ -93,6 +148,8 @@ class PendingStatus extends ImmutablePureComponent {
             {this.renderMedia()}
             {status.get('poll') && <PollPreview poll={status.get('poll')} />}
 
+            {status.get('quote') && <QuotedStatus statusId={status.get('quote')} />}
+
             {/* TODO */}
             {/* <PlaceholderActionBar /> */}
           </div>

app/soapbox/features/ui/components/profile_info_panel.js

@@ -80,6 +80,41 @@ class ProfileInfoPanel extends ImmutablePureComponent {
     return badges;
   }
 
+  getBirthday = () => {
+    const { account, intl } = this.props;
+
+    const birthday = account.getIn(['pleroma', 'birthday']);
+    if (!birthday) return null;
+
+    const formattedBirthday = intl.formatDate(birthday, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' });
+
+    const date = new Date(birthday);
+    const today = new Date();
+
+    const hasBirthday = date.getDate() === today.getDate() && date.getMonth() === today.getMonth();
+
+    if (hasBirthday) {
+      return (
+        <div className='profile-info-panel-content__birthday' title={formattedBirthday}>
+          <Icon src={require('@tabler/icons/icons/ballon.svg')} />
+          <FormattedMessage
+            id='account.birthday_today' defaultMessage='Birthday is today!'
+          />
+        </div>
+      );
+    }
+    return (
+      <div className='profile-info-panel-content__birthday'>
+        <Icon src={require('@tabler/icons/icons/ballon.svg')} />
+        <FormattedMessage
+          id='account.birthday' defaultMessage='Born {date}' values={{
+            date: formattedBirthday,
+          }}
+        />
+      </div>
+    );
+  }
+
   render() {
     const { account, displayFqn, intl, identity_proofs, username } = this.props;
 
@@ -150,6 +185,8 @@ class ProfileInfoPanel extends ImmutablePureComponent {
             />
           </div>}
 
+          {this.getBirthday()}
+
           <ProfileStats
             className='profile-info-panel-content__stats'
             account={account}

app/soapbox/features/ui/components/subscription_button.js

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -6,6 +7,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 
 import {
+  followAccount,
   subscribeAccount,
   unsubscribeAccount,
 } from 'soapbox/actions/accounts';
@@ -33,6 +35,13 @@ const mapDispatchToProps = (dispatch) => ({
       dispatch(subscribeAccount(account.get('id')));
     }
   },
+  onNotifyToggle(account) {
+    if (account.getIn(['relationship', 'notifying'])) {
+      dispatch(followAccount(account.get('id'), { notify: false }));
+    } else {
+      dispatch(followAccount(account.get('id'), { notify: true }));
+    }
+  },
 });
 
 export default @connect(mapStateToProps, mapDispatchToProps)
@@ -41,15 +50,17 @@ class SubscriptionButton extends ImmutablePureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map,
+    features: PropTypes.object.isRequired,
   };
 
   handleSubscriptionToggle = () => {
-    this.props.onSubscriptionToggle(this.props.account);
+    if (this.props.features.accountNotifies) this.props.onNotifyToggle(this.props.account);
+    else this.props.onSubscriptionToggle(this.props.account);
   }
 
   render() {
-    const { account, intl } = this.props;
-    const subscribing = account.getIn(['relationship', 'subscribing']);
+    const { account, intl, features } = this.props;
+    const subscribing = features.accountNotifies ? account.getIn(['relationship', 'notifying']) : account.getIn(['relationship', 'subscribing']);
     const following = account.getIn(['relationship', 'following']);
     const requested = account.getIn(['relationship', 'requested']);
 

app/soapbox/features/ui/components/tabs_bar.js

@@ -6,6 +6,7 @@ import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 import { connect } from 'react-redux';
 import { Link, NavLink, withRouter } from 'react-router-dom';
 
+import { getSettings } from 'soapbox/actions/settings';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import Icon from 'soapbox/components/icon';
 import IconWithCounter from 'soapbox/components/icon_with_counter';
@@ -168,10 +169,14 @@ const mapStateToProps = state => {
   const reportsCount = state.getIn(['admin', 'openReports']).count();
   const approvalCount = state.getIn(['admin', 'awaitingApproval']).count();
   const instance = state.get('instance');
+  const settings = getSettings(state);
+
+  // In demo mode, use the Soapbox logo
+  const logo = settings.get('demo') ? require('images/soapbox-logo.svg') : getSoapboxConfig(state).get('logo');
 
   return {
     account: state.getIn(['accounts', me]),
-    logo: getSoapboxConfig(state).get('logo'),
+    logo,
     features: getFeatures(instance),
     notificationCount: state.getIn(['notifications', 'unread']),
     chatsCount: state.getIn(['chats', 'items']).reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0),

app/soapbox/features/ui/util/async-components.js

@@ -214,6 +214,10 @@ export function MentionsModal() {
   return import(/* webpackChunkName: "features/ui" */'../components/mentions_modal');
 }
 
+export function BirthdaysModal() {
+  return import(/* webpackChunkName: "features/ui" */'../components/birthdays_modal');
+}
+
 export function ListEditor() {
   return import(/* webpackChunkName: "features/list_editor" */'../../list_editor');
 }

app/soapbox/features/ui/util/pending_status_builder.js

@@ -1,14 +1,31 @@
 import { fromJS } from 'immutable';
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 
 import { normalizeStatus } from 'soapbox/actions/importer/normalizer';
-import { makeGetAccount } from 'soapbox/selectors';
+import { makeGetAccount, makeGetStatus } from 'soapbox/selectors';
 
 export const buildStatus = (state, pendingStatus, idempotencyKey) => {
   const getAccount = makeGetAccount();
+  const getStatus = makeGetStatus();
 
   const me = state.get('me');
   const account = getAccount(state, me);
 
+  let mentions;
+  if (pendingStatus.get('in_reply_to_id')) {
+    const inReplyTo = getStatus(state, { id: pendingStatus.get('in_reply_to_id') });
+
+    if (inReplyTo.getIn(['account', 'id']) === me) {
+      mentions = ImmutableOrderedSet([account.get('acct')]).union(pendingStatus.get('to', []));
+    } else {
+      mentions = pendingStatus.get('to', []);
+    }
+
+    mentions = mentions.map(mention => ({
+      username: mention.split('@')[0],
+    }));
+  }
+
   const status = normalizeStatus({
     account,
     application: null,
@@ -24,10 +41,11 @@ export const buildStatus = (state, pendingStatus, idempotencyKey) => {
     in_reply_to_id: pendingStatus.get('in_reply_to_id'),
     language: null,
     media_attachments: pendingStatus.get('media_ids').map(id => ({ id })),
-    mentions: [],
+    mentions,
     muted: false,
     pinned: false,
     poll: pendingStatus.get('poll', null),
+    quote: pendingStatus.get('quote_id', null),
     reblog: null,
     reblogged: false,
     reblogs_count: 0,