Add circle reply and redraft

app/controllers/api/v1/statuses_controller.rb

@@ -77,6 +77,22 @@ def set_thread
     render json: { error: I18n.t('statuses.errors.in_reply_not_found') }, status: 404
   end
 
+  def set_circle
+    @circle = begin
+      if status_params[:circle_id].blank?
+        nil
+      elsif status_params[:circle_id] == 'thread' && @thread.present?
+        Account.where(id: (@thread.ancestors(CONTEXT_LIMIT, current_account).pluck(:account_id) + [@thread.account_id]).uniq - [current_user.account_id])
+      elsif status_params[:circle_id] == 'reply' && @thread.present?
+        Account.where(id: [@thread.account_id] - [current_user.account_id])
+      else
+        current_account.owned_circles.find(status_params[:circle_id])
+      end
+    end
+  rescue ActiveRecord::RecordNotFound
+    render json: { error: I18n.t('statuses.errors.circle_not_found') }, status: 404
+  end
+
   def status_params
     params.permit(
       :status,

app/javascript/mastodon/actions/compose.js

@@ -147,7 +147,7 @@ export function submitCompose(routerHistory) {
       sensitive: getState().getIn(['compose', 'sensitive']),
       spoiler_text: getState().getIn(['compose', 'spoiler']) ? getState().getIn(['compose', 'spoiler_text'], '') : '',
       visibility: getState().getIn(['compose', 'privacy']),
-      circle_id: getState().getIn(['compose', 'circle_id']),
+      circle_id: getState().getIn(['compose', 'privacy']) === 'limited' ? getState().getIn(['compose', 'circle_id']) : null,
       poll: getState().getIn(['compose', 'poll'], null),
     }, {
       headers: {

app/javascript/mastodon/features/compose/components/circle_dropdown.js

@@ -4,11 +4,17 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { injectIntl, defineMessages } from 'react-intl';
 import classNames from 'classnames';
-import Icon from 'mastodon/components/icon';
+import IconButton from 'mastodon/components/icon_button';
 import { createSelector } from 'reselect';
 
 const messages = defineMessages({
-  circle_unselect: { id: 'circle.unselect', defaultMessage: 'Select a circle' },
+  circle_system: { id: 'circle.system_definition', defaultMessage: 'System definition' },
+  circle_user: { id: 'circle.user_definition', defaultMessage: 'User definition' },
+  circle_unselect: { id: 'circle.unselect', defaultMessage: '(Select circle)' },
+  circle_reply_to_poster: { id: 'circle.reply-to_poster', defaultMessage: 'Reply-to poster' },
+  circle_thread_posters: { id: 'circle.thread_posters', defaultMessage: 'Thread posters' },
+  circle_open_circle_column: { id: 'circle.open_circle_column', defaultMessage: 'Open circle column' },
+  circle_select: { id: 'circle.select', defaultMessage: 'Select circle' },
 });
 
 const getOrderedCircles = createSelector([state => state.get('circles')], circles => {
@@ -29,31 +35,48 @@ export default @connect(mapStateToProps)
 @injectIntl
 class CircleDropdown extends React.PureComponent {
 
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
   static propTypes = {
     circles: ImmutablePropTypes.list,
     value: PropTypes.string.isRequired,
     visible: PropTypes.bool.isRequired,
+    reply: PropTypes.bool.isRequired,
     onChange: PropTypes.func.isRequired,
+    onOpenCircleColumn: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
   };
 
   handleChange = e => {
     this.props.onChange(e.target.value);
   };
 
+  handleOpenCircleColumn = () => {
+    this.props.onOpenCircleColumn(this.context.router ? this.context.router.history : null);
+  };
+
   render () {
-    const { circles, value, visible, intl } = this.props;
+    const { circles, value, visible, reply, intl } = this.props;
 
     return (
       <div className={classNames('circle-dropdown', { 'circle-dropdown--visible': visible })}>
-        <Icon id='circle-o' className='circle-dropdown__icon' />
+        <IconButton icon='circle-o' className='circle-dropdown__icon' title={intl.formatMessage(messages.circle_open_circle_column)} style={{ width: 'auto', height: 'auto' }} onClick={this.handleOpenCircleColumn} />
 
         {/* eslint-disable-next-line jsx-a11y/no-onchange */}
-        <select className='circle-dropdown__menu' value={value} onChange={this.handleChange}>
+        <select className='circle-dropdown__menu' title={intl.formatMessage(messages.circle_select)} value={value} onChange={this.handleChange}>
           <option value='' key='unselect'>{intl.formatMessage(messages.circle_unselect)}</option>
-          {circles.map(circle =>
-            <option value={circle.get('id')} key={circle.get('id')}>{circle.get('title')}</option>,
-          )}
+          {reply &&
+          <optgroup label={intl.formatMessage(messages.circle_system)}>
+            <option value='reply' key='reply'>{intl.formatMessage(messages.circle_reply_to_poster)}</option>
+            <option value='thread' key='thread'>{intl.formatMessage(messages.circle_thread_posters)}</option>
+          </optgroup>}
+          <optgroup label={intl.formatMessage(messages.circle_user)}>
+            {circles.map(circle =>
+              <option value={circle.get('id')} key={circle.get('id')}>{circle.get('title')}</option>,
+            )}
+          </optgroup>
         </select>
       </div>
     );

app/javascript/mastodon/features/compose/containers/circle_dropdown_container.js

@@ -9,6 +9,7 @@ const mapStateToProps = state => {
   return {
     value: value,
     visible: state.getIn(['compose', 'privacy']) === 'limited',
+    reply: state.getIn(['compose', 'in_reply_to']) !== null,
   };
 };
 
@@ -18,6 +19,12 @@ const mapDispatchToProps = dispatch => ({
     dispatch(changeComposeCircle(value));
   },
 
+  onOpenCircleColumn (router) {
+    if(router && router.location.pathname !== '/circles') {
+      router.push('/circles');
+    }
+  },
+
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(CircleDropdown);

app/javascript/mastodon/locales/en.json

@@ -57,6 +57,13 @@
   "bundle_modal_error.close": "Close",
   "bundle_modal_error.message": "Something went wrong while loading this component.",
   "bundle_modal_error.retry": "Try again",
+  "circle.open_circle_column": "Open circle column",
+  "circle.reply-to_poster": "Reply-to poster",
+  "circle.thread_posters": "Thread posters",
+  "circle.select": "Select circle",
+  "circle.system_definition": "System definition",
+  "circle.unselect": "(Select circle)",
+  "circle.user_definition": "User definition",
   "column.blocks": "Blocked users",
   "column.bookmarks": "Bookmarks",
   "column.community": "Local timeline",
@@ -85,6 +92,7 @@
   "compose_form.direct_message_warning": "This toot will only be sent to the mentioned users.",
   "compose_form.direct_message_warning_learn_more": "Learn more",
   "compose_form.hashtag_warning": "This toot won't be listed under any hashtag as it is unlisted. Only public toots can be searched by hashtag.",
+  "compose_form.limited_message_warning": "This toot will only be sent to users in the circle.",
   "compose_form.lock_disclaimer": "Your account is not {locked}. Anyone can follow you to view your follower-only posts.",
   "compose_form.lock_disclaimer.lock": "locked",
   "compose_form.placeholder": "What's on your mind?",

app/javascript/mastodon/reducers/compose.js

@@ -61,6 +61,7 @@ const initialState = ImmutableMap({
   caretPosition: null,
   preselectDate: null,
   in_reply_to: null,
+  reply_status: null,
   is_composing: false,
   is_submitting: false,
   is_changing_upload: false,
@@ -89,7 +90,7 @@ const initialPoll = ImmutableMap({
 function statusToTextMentions(state, status) {
   let set = ImmutableOrderedSet([]);
 
-  if (status.getIn(['account', 'id']) !== me) {
+  if (status.getIn(['account', 'id']) !== me && status.getIn(['visibility']) !== 'limited') {
     set = set.add(`@${status.getIn(['account', 'acct'])} `);
   }
 
@@ -104,6 +105,7 @@ function clearAll(state) {
     map.set('is_submitting', false);
     map.set('is_changing_upload', false);
     map.set('in_reply_to', null);
+    map.set('reply_status', null);
     map.set('privacy', state.get('default_privacy'));
     map.set('circle_id', null);
     map.set('sensitive', false);
@@ -187,6 +189,29 @@ const insertEmoji = (state, position, emojiData, needsSpace) => {
   });
 };
 
+const resetMentionText = (text, privacy, status) => {
+  if(status === null) {
+    return text;
+  }
+
+  let set = ImmutableOrderedSet([]);
+
+  if (status.getIn(['account', 'id']) !== me) {
+    set = set.add(`@${status.getIn(['account', 'acct'])}`);
+  }
+
+  set = set.union(status.get('mentions').filterNot(mention => mention.get('id') === me).map(mention => `@${mention.get('acct')}`));
+
+  var match = /^(\s*(?:(?:@\S+)\s*)*)(.*)/.exec(text);
+  var mentions = ImmutableOrderedSet((match[1].trim().split(/\s+/)));
+
+  if(privacy === 'limited') {
+    return mentions.subtract(set).add(match[2]).join(' ');
+  } else {
+    return set.union(mentions).add(match[2]).join(' ');
+  }
+};
+
 const privacyPreference = (a, b) => {
   const order = ['public', 'unlisted', 'private', 'limited', 'direct'];
   return order[Math.max(order.indexOf(a), order.indexOf(b), 0)];
@@ -284,9 +309,12 @@ export default function compose(state = initialState, action) {
       .set('idempotencyKey', uuid());
   case COMPOSE_VISIBILITY_CHANGE:
     return state.withMutations(map => {
+      map.set('text', resetMentionText(state.get('text'), action.value, state.get('reply_status')));
       map.set('privacy', action.value);
       map.set('idempotencyKey', uuid());
-      if (action.value !== 'limited') {
+      if(action.value === 'limited') {
+        map.set('circle_id', state.getIn(['reply_status', 'in_reply_to_id']) ? 'thread' : 'reply');
+      } else {
         map.set('circle_id', null);
       }
     });
@@ -303,9 +331,16 @@ export default function compose(state = initialState, action) {
   case COMPOSE_REPLY:
     return state.withMutations(map => {
       map.set('in_reply_to', action.status.get('id'));
+      map.set('reply_status', action.status);
       map.set('text', statusToTextMentions(state, action.status));
       map.set('privacy', privacyPreference(action.status.get('visibility'), state.get('default_privacy')));
-      map.set('circle_id', null);
+      if(action.status.get('circle_id')) {
+        map.set('circle_id', action.status.get('circle_id'));
+      } else if(action.status.get('visibility') === 'limited'){
+        map.set('circle_id', action.status.get('in_reply_to_id') ? 'thread' : 'reply');
+      } else {
+        map.set('circle_id', null);
+      }
       map.set('focusDate', new Date());
       map.set('caretPosition', null);
       map.set('preselectDate', new Date());
@@ -323,6 +358,7 @@ export default function compose(state = initialState, action) {
   case COMPOSE_RESET:
     return state.withMutations(map => {
       map.set('in_reply_to', null);
+      map.set('reply_status', null);
       map.set('text', '');
       map.set('spoiler', false);
       map.set('spoiler_text', '');
@@ -415,8 +451,9 @@ export default function compose(state = initialState, action) {
     return state.withMutations(map => {
       map.set('text', action.raw_text || unescapeHTML(expandMentions(action.status)));
       map.set('in_reply_to', action.status.get('in_reply_to_id'));
+      map.set('reply_status', action.status);
       map.set('privacy', action.status.get('visibility'));
-      map.set('circle_id', null);
+      map.set('circle_id', action.status.get('circle_id'));
       map.set('media_attachments', action.status.get('media_attachments'));
       map.set('focusDate', new Date());
       map.set('caretPosition', null);

app/javascript/styles/mastodon-light/diff.scss

@@ -145,7 +145,7 @@ html {
 .poll__option input[type="text"],
 .compose-form .spoiler-input__input,
 .compose-form__poll-wrapper select,
-.circle-dropdown .circle-dropdown__menu,
+.circle-dropdown,
 .search__input,
 .setting-text,
 .box-widget input[type="text"],
@@ -170,7 +170,7 @@ html {
 }
 
 .compose-form__poll-wrapper select,
-.circle-dropdown .circle-dropdown__menu {
+.circle-dropdown__menu {
   background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>") no-repeat right 8px center / auto 16px;
 }
 

app/javascript/styles/mastodon/components.scss

@@ -7035,20 +7035,23 @@ noscript {
   margin-top: 10px;
   position: relative;
   display: none;
+  background-color: $simple-background-color;
+  border: 1px solid darken($simple-background-color, 14%);
+  border-radius: 4px;
 
   &.circle-dropdown--visible {
-    display: block;
+    display: flex;
   }
 
   &__icon {
-    padding: 8px;
+    padding: 6px 4px;
     flex: 0 0 auto;
     font-size: 18px;
     color: $inverted-text-color;
-    position: absolute;
   }
 
   &__menu {
+    flex: 1 1 auto;
     appearance: none;
     box-sizing: border-box;
     font-size: 14px;
@@ -7059,8 +7062,24 @@ noscript {
     outline: 0;
     font-family: inherit;
     background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") no-repeat right 8px center / auto 16px;
-    border: 1px solid darken($simple-background-color, 14%);
-    border-radius: 4px;
-    padding: 8px 30px;
+    border: 0;
+    padding: 9px 30px 9px 4px;
+
+    cursor: pointer;
+    transition: all 100ms ease-in;
+    transition-property: background-color, color;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: rgba($action-button-color, 0.15);
+      transition: all 200ms ease-out;
+      transition-property: background-color, color;
+    }
+
+    &:focus {
+      background-color: rgba($action-button-color, 0.3);
+    }
+
   }
 }

app/javascript/styles/mastodon/rtl.scss

@@ -420,4 +420,13 @@ body.rtl {
   .circle-dropdown .circle-dropdown__menu {
     background-position: left 8px center;
   }
+
+  .circle-dropdown__menu {
+    padding: 9px 4px 9px 30px;
+  }
+
+  .circle-link .circle-edit-button,
+  .circle-link .circle-delete-button {
+      text-align: right;
+  }
 }

app/serializers/rest/status_serializer.rb

@@ -11,6 +11,7 @@ class REST::StatusSerializer < ActiveModel::Serializer
   attribute :muted, if: :current_user?
   attribute :bookmarked, if: :current_user?
   attribute :pinned, if: :pinnable?
+  attribute :circle_id, if: :limited_owned_status?
 
   attribute :content, unless: :source_requested?
   attribute :text, if: :source_requested?
@@ -43,8 +44,12 @@ def current_user?
     !current_user.nil?
   end
 
+  def owned_status?
+    current_user? && current_user.account_id == object.account_id
+  end
+
   def show_application?
-    object.account.user_shows_application? || (current_user? && current_user.account_id == object.account_id)
+    object.account.user_shows_application? || owned_status?
   end
 
   def visibility
@@ -58,6 +63,18 @@ def visibility
     end
   end
 
+  def limited
+    object.limited_visibility?
+  end
+
+  def limited_owned_status?
+    object.limited_visibility? && owned_status?
+  end
+
+  def circle_id
+    Redis.current.get("statuses/#{object.id}/circle_id")
+  end
+
   def uri
     ActivityPub::TagManager.instance.uri_for(object)
   end
@@ -111,8 +128,7 @@ def pinned
   end
 
   def pinnable?
-    current_user? &&
-      current_user.account_id == object.account_id &&
+    owned_status? &&
       !object.reblog? &&
       %w(public unlisted).include?(object.visibility)
   end