Add circle editor

app/controllers/api/v1/accounts/search_controller.rb

@@ -18,6 +18,7 @@ class Api::V1::Accounts::SearchController < Api::BaseController
       limit: limit_param(DEFAULT_ACCOUNTS_LIMIT),
       resolve: truthy_param?(:resolve),
       following: truthy_param?(:following),
+      follower: truthy_param?(:follower),
       offset: params[:offset]
     )
   end

app/controllers/api/v1/circles/accounts_controller.rb

@@ -0,0 +1,93 @@
+# frozen_string_literal: true
+
+class Api::V1::Circles::AccountsController < Api::BaseController
+  before_action -> { doorkeeper_authorize! :read, :'read:lists' }, only: [:show]
+  before_action -> { doorkeeper_authorize! :write, :'write:lists' }, except: [:show]
+
+  before_action :require_user!
+  before_action :set_circle
+
+  after_action :insert_pagination_headers, only: :show
+
+  def show
+    @accounts = load_accounts
+    render json: @accounts, each_serializer: REST::AccountSerializer
+  end
+
+  def create
+    ApplicationRecord.transaction do
+      circle_accounts.each do |account|
+        @circle.accounts << account
+      end
+    end
+
+    render_empty
+  end
+
+  def destroy
+    CircleAccount.where(circle: @circle, account_id: account_ids).destroy_all
+    render_empty
+  end
+
+  private
+
+  def set_circle
+    @circle = Circle.where(account: current_account).find(params[:circle_id])
+  end
+
+  def load_accounts
+    if unlimited?
+      @circle.accounts.without_suspended.includes(:account_stat).all
+    else
+      @circle.accounts.without_suspended.includes(:account_stat).paginate_by_max_id(limit_param(DEFAULT_ACCOUNTS_LIMIT), params[:max_id], params[:since_id])
+    end
+  end
+
+  def circle_accounts
+    Account.find(account_ids)
+  end
+
+  def account_ids
+    Array(resource_params[:account_ids])
+  end
+
+  def resource_params
+    params.permit(account_ids: [])
+  end
+
+  def insert_pagination_headers
+    set_pagination_headers(next_path, prev_path)
+  end
+
+  def next_path
+    return if unlimited?
+
+    api_v1_circle_accounts_url pagination_params(max_id: pagination_max_id) if records_continue?
+  end
+
+  def prev_path
+    return if unlimited?
+
+    api_v1_circle_accounts_url pagination_params(since_id: pagination_since_id) unless @accounts.empty?
+  end
+
+  def pagination_max_id
+    @accounts.last.id
+  end
+
+  def pagination_since_id
+    @accounts.first.id
+  end
+
+  def records_continue?
+    @accounts.size == limit_param(DEFAULT_ACCOUNTS_LIMIT)
+  end
+
+  def pagination_params(core_params)
+    params.slice(:limit).permit(:limit).merge(core_params)
+  end
+
+  def unlimited?
+    params[:limit] == '0'
+  end
+end

app/controllers/api/v1/circles_controller.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+class Api::V1::CirclesController < Api::BaseController
+  before_action -> { doorkeeper_authorize! :read, :'read:lists' }, only: [:index, :show]
+  before_action -> { doorkeeper_authorize! :write, :'write:lists' }, except: [:index, :show]
+
+  before_action :require_user!
+  before_action :set_circle, except: [:index, :create]
+
+  rescue_from ArgumentError do |e|
+    render json: { error: e.to_s }, status: 422
+  end
+
+  def index
+    @circles = Circle.where(account: current_account).all
+    render json: @circles, each_serializer: REST::CircleSerializer
+  end
+
+  def show
+    render json: @circle, serializer: REST::CircleSerializer
+  end
+
+  def create
+    @circle = Circle.create!(circle_params.merge(account: current_account))
+    render json: @circle, serializer: REST::CircleSerializer
+  end
+
+  def update
+    @circle.update!(circle_params)
+    render json: @circle, serializer: REST::CircleSerializer
+  end
+
+  def destroy
+    @circle.destroy!
+    render_empty
+  end
+
+  private
+
+  def set_circle
+    @circle = Circle.where(account: current_account).find(params[:id])
+  end
+
+  def circle_params
+    params.permit(:title)
+  end
+end

app/javascript/mastodon/actions/circles.js

@@ -0,0 +1,372 @@
+import api from '../api';
+
+import { showAlertForError } from './alerts';
+import { importFetchedAccounts } from './importer';
+
+export const CIRCLE_FETCH_REQUEST = 'CIRCLE_FETCH_REQUEST';
+export const CIRCLE_FETCH_SUCCESS = 'CIRCLE_FETCH_SUCCESS';
+export const CIRCLE_FETCH_FAIL    = 'CIRCLE_FETCH_FAIL';
+
+export const CIRCLES_FETCH_REQUEST = 'CIRCLES_FETCH_REQUEST';
+export const CIRCLES_FETCH_SUCCESS = 'CIRCLES_FETCH_SUCCESS';
+export const CIRCLES_FETCH_FAIL    = 'CIRCLES_FETCH_FAIL';
+
+export const CIRCLE_EDITOR_TITLE_CHANGE = 'CIRCLE_EDITOR_TITLE_CHANGE';
+export const CIRCLE_EDITOR_RESET        = 'CIRCLE_EDITOR_RESET';
+export const CIRCLE_EDITOR_SETUP        = 'CIRCLE_EDITOR_SETUP';
+
+export const CIRCLE_CREATE_REQUEST = 'CIRCLE_CREATE_REQUEST';
+export const CIRCLE_CREATE_SUCCESS = 'CIRCLE_CREATE_SUCCESS';
+export const CIRCLE_CREATE_FAIL    = 'CIRCLE_CREATE_FAIL';
+
+export const CIRCLE_UPDATE_REQUEST = 'CIRCLE_UPDATE_REQUEST';
+export const CIRCLE_UPDATE_SUCCESS = 'CIRCLE_UPDATE_SUCCESS';
+export const CIRCLE_UPDATE_FAIL    = 'CIRCLE_UPDATE_FAIL';
+
+export const CIRCLE_DELETE_REQUEST = 'CIRCLE_DELETE_REQUEST';
+export const CIRCLE_DELETE_SUCCESS = 'CIRCLE_DELETE_SUCCESS';
+export const CIRCLE_DELETE_FAIL    = 'CIRCLE_DELETE_FAIL';
+
+export const CIRCLE_ACCOUNTS_FETCH_REQUEST = 'CIRCLE_ACCOUNTS_FETCH_REQUEST';
+export const CIRCLE_ACCOUNTS_FETCH_SUCCESS = 'CIRCLE_ACCOUNTS_FETCH_SUCCESS';
+export const CIRCLE_ACCOUNTS_FETCH_FAIL    = 'CIRCLE_ACCOUNTS_FETCH_FAIL';
+
+export const CIRCLE_EDITOR_SUGGESTIONS_CHANGE = 'CIRCLE_EDITOR_SUGGESTIONS_CHANGE';
+export const CIRCLE_EDITOR_SUGGESTIONS_READY  = 'CIRCLE_EDITOR_SUGGESTIONS_READY';
+export const CIRCLE_EDITOR_SUGGESTIONS_CLEAR  = 'CIRCLE_EDITOR_SUGGESTIONS_CLEAR';
+
+export const CIRCLE_EDITOR_ADD_REQUEST = 'CIRCLE_EDITOR_ADD_REQUEST';
+export const CIRCLE_EDITOR_ADD_SUCCESS = 'CIRCLE_EDITOR_ADD_SUCCESS';
+export const CIRCLE_EDITOR_ADD_FAIL    = 'CIRCLE_EDITOR_ADD_FAIL';
+
+export const CIRCLE_EDITOR_REMOVE_REQUEST = 'CIRCLE_EDITOR_REMOVE_REQUEST';
+export const CIRCLE_EDITOR_REMOVE_SUCCESS = 'CIRCLE_EDITOR_REMOVE_SUCCESS';
+export const CIRCLE_EDITOR_REMOVE_FAIL    = 'CIRCLE_EDITOR_REMOVE_FAIL';
+
+export const CIRCLE_ADDER_RESET = 'CIRCLE_ADDER_RESET';
+export const CIRCLE_ADDER_SETUP = 'CIRCLE_ADDER_SETUP';
+
+export const CIRCLE_ADDER_CIRCLES_FETCH_REQUEST = 'CIRCLE_ADDER_CIRCLES_FETCH_REQUEST';
+export const CIRCLE_ADDER_CIRCLES_FETCH_SUCCESS = 'CIRCLE_ADDER_CIRCLES_FETCH_SUCCESS';
+export const CIRCLE_ADDER_CIRCLES_FETCH_FAIL    = 'CIRCLE_ADDER_CIRCLES_FETCH_FAIL';
+
+export const fetchCircle = id => (dispatch, getState) => {
+  if (getState().getIn(['circles', id])) {
+    return;
+  }
+
+  dispatch(fetchCircleRequest(id));
+
+  api(getState).get(`/api/v1/circles/${id}`)
+    .then(({ data }) => dispatch(fetchCircleSuccess(data)))
+    .catch(err => dispatch(fetchCircleFail(id, err)));
+};
+
+export const fetchCircleRequest = id => ({
+  type: CIRCLE_FETCH_REQUEST,
+  id,
+});
+
+export const fetchCircleSuccess = circle => ({
+  type: CIRCLE_FETCH_SUCCESS,
+  circle,
+});
+
+export const fetchCircleFail = (id, error) => ({
+  type: CIRCLE_FETCH_FAIL,
+  id,
+  error,
+});
+
+export const fetchCircles = () => (dispatch, getState) => {
+  dispatch(fetchCirclesRequest());
+
+  api(getState).get('/api/v1/circles')
+    .then(({ data }) => dispatch(fetchCirclesSuccess(data)))
+    .catch(err => dispatch(fetchCirclesFail(err)));
+};
+
+export const fetchCirclesRequest = () => ({
+  type: CIRCLES_FETCH_REQUEST,
+});
+
+export const fetchCirclesSuccess = circles => ({
+  type: CIRCLES_FETCH_SUCCESS,
+  circles,
+});
+
+export const fetchCirclesFail = error => ({
+  type: CIRCLES_FETCH_FAIL,
+  error,
+});
+
+export const submitCircleEditor = shouldReset => (dispatch, getState) => {
+  const circleId = getState().getIn(['circleEditor', 'circleId']);
+  const title  = getState().getIn(['circleEditor', 'title']);
+
+  if (circleId === null) {
+    dispatch(createCircle(title, shouldReset));
+  } else {
+    dispatch(updateCircle(circleId, title, shouldReset));
+  }
+};
+
+export const setupCircleEditor = circleId => (dispatch, getState) => {
+  dispatch({
+    type: CIRCLE_EDITOR_SETUP,
+    circle: getState().getIn(['circles', circleId]),
+  });
+
+  dispatch(fetchCircleAccounts(circleId));
+};
+
+export const changeCircleEditorTitle = value => ({
+  type: CIRCLE_EDITOR_TITLE_CHANGE,
+  value,
+});
+
+export const createCircle = (title, shouldReset) => (dispatch, getState) => {
+  dispatch(createCircleRequest());
+
+  api(getState).post('/api/v1/circles', { title }).then(({ data }) => {
+    dispatch(createCircleSuccess(data));
+
+    if (shouldReset) {
+      dispatch(resetCircleEditor());
+    }
+  }).catch(err => dispatch(createCircleFail(err)));
+};
+
+export const createCircleRequest = () => ({
+  type: CIRCLE_CREATE_REQUEST,
+});
+
+export const createCircleSuccess = circle => ({
+  type: CIRCLE_CREATE_SUCCESS,
+  circle,
+});
+
+export const createCircleFail = error => ({
+  type: CIRCLE_CREATE_FAIL,
+  error,
+});
+
+export const updateCircle = (id, title, shouldReset, isExclusive, replies_policy) => (dispatch, getState) => {
+  dispatch(updateCircleRequest(id));
+
+  api(getState).put(`/api/v1/circles/${id}`, { title, replies_policy, exclusive: typeof isExclusive === 'undefined' ? undefined : !!isExclusive }).then(({ data }) => {
+    dispatch(updateCircleSuccess(data));
+
+    if (shouldReset) {
+      dispatch(resetCircleEditor());
+    }
+  }).catch(err => dispatch(updateCircleFail(id, err)));
+};
+
+export const updateCircleRequest = id => ({
+  type: CIRCLE_UPDATE_REQUEST,
+  id,
+});
+
+export const updateCircleSuccess = circle => ({
+  type: CIRCLE_UPDATE_SUCCESS,
+  circle,
+});
+
+export const updateCircleFail = (id, error) => ({
+  type: CIRCLE_UPDATE_FAIL,
+  id,
+  error,
+});
+
+export const resetCircleEditor = () => ({
+  type: CIRCLE_EDITOR_RESET,
+});
+
+export const deleteCircle = id => (dispatch, getState) => {
+  dispatch(deleteCircleRequest(id));
+
+  api(getState).delete(`/api/v1/circles/${id}`)
+    .then(() => dispatch(deleteCircleSuccess(id)))
+    .catch(err => dispatch(deleteCircleFail(id, err)));
+};
+
+export const deleteCircleRequest = id => ({
+  type: CIRCLE_DELETE_REQUEST,
+  id,
+});
+
+export const deleteCircleSuccess = id => ({
+  type: CIRCLE_DELETE_SUCCESS,
+  id,
+});
+
+export const deleteCircleFail = (id, error) => ({
+  type: CIRCLE_DELETE_FAIL,
+  id,
+  error,
+});
+
+export const fetchCircleAccounts = circleId => (dispatch, getState) => {
+  dispatch(fetchCircleAccountsRequest(circleId));
+
+  api(getState).get(`/api/v1/circles/${circleId}/accounts`, { params: { limit: 0 } }).then(({ data }) => {
+    dispatch(importFetchedAccounts(data));
+    dispatch(fetchCircleAccountsSuccess(circleId, data));
+  }).catch(err => dispatch(fetchCircleAccountsFail(circleId, err)));
+};
+
+export const fetchCircleAccountsRequest = id => ({
+  type: CIRCLE_ACCOUNTS_FETCH_REQUEST,
+  id,
+});
+
+export const fetchCircleAccountsSuccess = (id, accounts, next) => ({
+  type: CIRCLE_ACCOUNTS_FETCH_SUCCESS,
+  id,
+  accounts,
+  next,
+});
+
+export const fetchCircleAccountsFail = (id, error) => ({
+  type: CIRCLE_ACCOUNTS_FETCH_FAIL,
+  id,
+  error,
+});
+
+export const fetchCircleSuggestions = q => (dispatch, getState) => {
+  const params = {
+    q,
+    resolve: false,
+    follower: true,
+  };
+
+  api(getState).get('/api/v1/accounts/search', { params }).then(({ data }) => {
+    dispatch(importFetchedAccounts(data));
+    dispatch(fetchCircleSuggestionsReady(q, data));
+  }).catch(error => dispatch(showAlertForError(error)));
+};
+
+export const fetchCircleSuggestionsReady = (query, accounts) => ({
+  type: CIRCLE_EDITOR_SUGGESTIONS_READY,
+  query,
+  accounts,
+});
+
+export const clearCircleSuggestions = () => ({
+  type: CIRCLE_EDITOR_SUGGESTIONS_CLEAR,
+});
+
+export const changeCircleSuggestions = value => ({
+  type: CIRCLE_EDITOR_SUGGESTIONS_CHANGE,
+  value,
+});
+
+export const addToCircleEditor = accountId => (dispatch, getState) => {
+  dispatch(addToCircle(getState().getIn(['circleEditor', 'circleId']), accountId));
+};
+
+export const addToCircle = (circleId, accountId) => (dispatch, getState) => {
+  dispatch(addToCircleRequest(circleId, accountId));
+
+  api(getState).post(`/api/v1/circles/${circleId}/accounts`, { account_ids: [accountId] })
+    .then(() => dispatch(addToCircleSuccess(circleId, accountId)))
+    .catch(err => dispatch(addToCircleFail(circleId, accountId, err)));
+};
+
+export const addToCircleRequest = (circleId, accountId) => ({
+  type: CIRCLE_EDITOR_ADD_REQUEST,
+  circleId,
+  accountId,
+});
+
+export const addToCircleSuccess = (circleId, accountId) => ({
+  type: CIRCLE_EDITOR_ADD_SUCCESS,
+  circleId,
+  accountId,
+});
+
+export const addToCircleFail = (circleId, accountId, error) => ({
+  type: CIRCLE_EDITOR_ADD_FAIL,
+  circleId,
+  accountId,
+  error,
+});
+
+export const removeFromCircleEditor = accountId => (dispatch, getState) => {
+  dispatch(removeFromCircle(getState().getIn(['circleEditor', 'circleId']), accountId));
+};
+
+export const removeFromCircle = (circleId, accountId) => (dispatch, getState) => {
+  dispatch(removeFromCircleRequest(circleId, accountId));
+
+  api(getState).delete(`/api/v1/circles/${circleId}/accounts`, { params: { account_ids: [accountId] } })
+    .then(() => dispatch(removeFromCircleSuccess(circleId, accountId)))
+    .catch(err => dispatch(removeFromCircleFail(circleId, accountId, err)));
+};
+
+export const removeFromCircleRequest = (circleId, accountId) => ({
+  type: CIRCLE_EDITOR_REMOVE_REQUEST,
+  circleId,
+  accountId,
+});
+
+export const removeFromCircleSuccess = (circleId, accountId) => ({
+  type: CIRCLE_EDITOR_REMOVE_SUCCESS,
+  circleId,
+  accountId,
+});
+
+export const removeFromCircleFail = (circleId, accountId, error) => ({
+  type: CIRCLE_EDITOR_REMOVE_FAIL,
+  circleId,
+  accountId,
+  error,
+});
+
+export const resetCircleAdder = () => ({
+  type: CIRCLE_ADDER_RESET,
+});
+
+export const setupCircleAdder = accountId => (dispatch, getState) => {
+  dispatch({
+    type: CIRCLE_ADDER_SETUP,
+    account: getState().getIn(['accounts', accountId]),
+  });
+  dispatch(fetchCircles());
+  dispatch(fetchAccountCircles(accountId));
+};
+
+export const fetchAccountCircles = accountId => (dispatch, getState) => {
+  dispatch(fetchAccountCirclesRequest(accountId));
+
+  api(getState).get(`/api/v1/accounts/${accountId}/circles`)
+    .then(({ data }) => dispatch(fetchAccountCirclesSuccess(accountId, data)))
+    .catch(err => dispatch(fetchAccountCirclesFail(accountId, err)));
+};
+
+export const fetchAccountCirclesRequest = id => ({
+  type:CIRCLE_ADDER_CIRCLES_FETCH_REQUEST,
+  id,
+});
+
+export const fetchAccountCirclesSuccess = (id, circles) => ({
+  type: CIRCLE_ADDER_CIRCLES_FETCH_SUCCESS,
+  id,
+  circles,
+});
+
+export const fetchAccountCirclesFail = (id, err) => ({
+  type: CIRCLE_ADDER_CIRCLES_FETCH_FAIL,
+  id,
+  err,
+});
+
+export const addToCircleAdder = circleId => (dispatch, getState) => {
+  dispatch(addToCircle(circleId, getState().getIn(['circleAdder', 'accountId'])));
+};
+
+export const removeFromCircleAdder = circleId => (dispatch, getState) => {
+  dispatch(removeFromCircle(circleId, getState().getIn(['circleAdder', 'accountId'])));
+};
+

app/javascript/mastodon/components/icon_button.tsx

@@ -27,6 +27,7 @@ interface Props {
   obfuscateCount?: boolean;
   href?: string;
   ariaHidden: boolean;
+  data_id?: string;
 }
 interface States {
   activate: boolean;
@@ -108,6 +109,7 @@ export class IconButton extends PureComponent<Props, States> {
       obfuscateCount,
       href,
       ariaHidden,
+      data_id,
     } = this.props;
 
     const { activate, deactivate } = this.state;
@@ -160,6 +162,7 @@ export class IconButton extends PureComponent<Props, States> {
         style={style}
         tabIndex={tabIndex}
         disabled={disabled}
+        data-id={data_id}
       >
         {contents}
       </button>

app/javascript/mastodon/features/circle_adder/components/account.jsx

@@ -0,0 +1,43 @@
+import { injectIntl } from 'react-intl';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
+
+import { Avatar } from '../../../components/avatar';
+import { DisplayName } from '../../../components/display_name';
+import { makeGetAccount } from '../../../selectors';
+
+const makeMapStateToProps = () => {
+  const getAccount = makeGetAccount();
+
+  const mapStateToProps = (state, { accountId }) => ({
+    account: getAccount(state, accountId),
+  });
+
+  return mapStateToProps;
+};
+
+class Account extends ImmutablePureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+  };
+
+  render () {
+    const { account } = this.props;
+    return (
+      <div className='account'>
+        <div className='account__wrapper'>
+          <div className='account__display-name'>
+            <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
+            <DisplayName account={account} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}
+
+export default connect(makeMapStateToProps)(injectIntl(Account));

app/javascript/mastodon/features/circle_adder/components/circle.jsx

@@ -0,0 +1,72 @@
+import PropTypes from 'prop-types';
+
+import { defineMessages, injectIntl } from 'react-intl';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
+
+import { Icon }  from 'mastodon/components/icon';
+
+import { removeFromCircleAdder, addToCircleAdder } from '../../../actions/circles';
+import { IconButton }  from '../../../components/icon_button';
+
+const messages = defineMessages({
+  remove: { id: 'circles.account.remove', defaultMessage: 'Remove from circle' },
+  add: { id: 'circles.account.add', defaultMessage: 'Add to circle' },
+});
+
+const MapStateToProps = (state, { circleId, added }) => ({
+  circle: state.get('circles').get(circleId),
+  added: typeof added === 'undefined' ? state.getIn(['circleAdder', 'circles', 'items']).includes(circleId) : added,
+});
+
+const mapDispatchToProps = (dispatch, { circleId }) => ({
+  onRemove: () => dispatch(removeFromCircleAdder(circleId)),
+  onAdd: () => dispatch(addToCircleAdder(circleId)),
+});
+
+class Circle extends ImmutablePureComponent {
+
+  static propTypes = {
+    circle: ImmutablePropTypes.map.isRequired,
+    intl: PropTypes.object.isRequired,
+    onRemove: PropTypes.func.isRequired,
+    onAdd: PropTypes.func.isRequired,
+    added: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    added: false,
+  };
+
+  render () {
+    const { circle, intl, onRemove, onAdd, added } = this.props;
+
+    let button;
+
+    if (added) {
+      button = <IconButton icon='times' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    } else {
+      button = <IconButton icon='plus' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    }
+
+    return (
+      <div className='list'>
+        <div className='list__wrapper'>
+          <div className='list__display-name'>
+            <Icon id='user-circle' className='column-link__icon' fixedWidth />
+            {circle.get('title')}
+          </div>
+
+          <div className='account__relationship'>
+            {button}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}
+
+export default connect(MapStateToProps, mapDispatchToProps)(injectIntl(Circle));

app/javascript/mastodon/features/circle_adder/index.jsx

@@ -0,0 +1,76 @@
+import PropTypes from 'prop-types';
+
+import { injectIntl } from 'react-intl';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+
+import { setupCircleAdder, resetCircleAdder } from '../../actions/circles';
+import NewCircleForm from '../circles/components/new_circle_form';
+
+import Account from './components/account';
+import Circle from './components/circle';
+// hack
+
+const getOrderedCircles = createSelector([state => state.get('circles')], circles => {
+  if (!circles) {
+    return circles;
+  }
+
+  return circles.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
+});
+
+const mapStateToProps = state => ({
+  circleIds: getOrderedCircles(state).map(circle=>circle.get('id')),
+});
+
+const mapDispatchToProps = dispatch => ({
+  onInitialize: accountId => dispatch(setupCircleAdder(accountId)),
+  onReset: () => dispatch(resetCircleAdder()),
+});
+
+class CircleAdder extends ImmutablePureComponent {
+
+  static propTypes = {
+    accountId: PropTypes.string.isRequired,
+    onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+    onInitialize: PropTypes.func.isRequired,
+    onReset: PropTypes.func.isRequired,
+    circleIds: ImmutablePropTypes.list.isRequired,
+  };
+
+  componentDidMount () {
+    const { onInitialize, accountId } = this.props;
+    onInitialize(accountId);
+  }
+
+  componentWillUnmount () {
+    const { onReset } = this.props;
+    onReset();
+  }
+
+  render () {
+    const { accountId, circleIds } = this.props;
+
+    return (
+      <div className='modal-root__modal list-adder'>
+        <div className='list-adder__account'>
+          <Account accountId={accountId} />
+        </div>
+
+        <NewCircleForm />
+
+
+        <div className='list-adder__lists'>
+          {circleIds.map(CircleId => <Circle key={CircleId} circleId={CircleId} />)}
+        </div>
+      </div>
+    );
+  }
+
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(CircleAdder));

app/javascript/mastodon/features/circle_editor/components/account.jsx

@@ -0,0 +1,79 @@
+import PropTypes from 'prop-types';
+
+import { defineMessages, injectIntl } from 'react-intl';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
+
+import { removeFromCircleEditor, addToCircleEditor } from '../../../actions/circles';
+import { Avatar } from '../../../components/avatar';
+import { DisplayName } from '../../../components/display_name';
+import { IconButton } from '../../../components/icon_button';
+import { makeGetAccount } from '../../../selectors';
+
+const messages = defineMessages({
+  remove: { id: 'circles.account.remove', defaultMessage: 'Remove from circle' },
+  add: { id: 'circles.account.add', defaultMessage: 'Add to circle' },
+});
+
+const makeMapStateToProps = () => {
+  const getAccount = makeGetAccount();
+
+  const mapStateToProps = (state, { accountId, added }) => ({
+    account: getAccount(state, accountId),
+    added: typeof added === 'undefined' ? state.getIn(['circleEditor', 'accounts', 'items']).includes(accountId) : added,
+  });
+
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = (dispatch, { accountId }) => ({
+  onRemove: () => dispatch(removeFromCircleEditor(accountId)),
+  onAdd: () => dispatch(addToCircleEditor(accountId)),
+});
+
+class Account extends ImmutablePureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+    intl: PropTypes.object.isRequired,
+    onRemove: PropTypes.func.isRequired,
+    onAdd: PropTypes.func.isRequired,
+    added: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    added: false,
+  };
+
+  render () {
+    const { account, intl, onRemove, onAdd, added } = this.props;
+
+    let button;
+
+    if (added) {
+      button = <IconButton icon='times' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    } else {
+      button = <IconButton icon='plus' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    }
+
+    return (
+      <div className='account'>
+        <div className='account__wrapper'>
+          <div className='account__display-name'>
+            <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
+            <DisplayName account={account} />
+          </div>
+
+          <div className='account__relationship'>
+            {button}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(injectIntl(Account));

app/javascript/mastodon/features/circle_editor/components/edit_circle_form.jsx

@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+
+import { defineMessages, injectIntl } from 'react-intl';
+
+import { connect } from 'react-redux';
+
+import { changeCircleEditorTitle, submitCircleEditor } from '../../../actions/circles';
+import { IconButton } from '../../../components/icon_button';
+
+const messages = defineMessages({
+  title: { id: 'circles.edit.submit', defaultMessage: 'Change title' },
+});
+
+const mapStateToProps = state => ({
+  value: state.getIn(['circleEditor', 'title']),
+  disabled: !state.getIn(['circleEditor', 'isChanged']) || !state.getIn(['circleEditor', 'title']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  onChange: value => dispatch(changeCircleEditorTitle(value)),
+  onSubmit: () => dispatch(submitCircleEditor(false)),
+});
+
+class CircleForm extends PureComponent {
+
+  static propTypes = {
+    value: PropTypes.string.isRequired,
+    disabled: PropTypes.bool,
+    intl: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+  };
+
+  handleChange = e => {
+    this.props.onChange(e.target.value);
+  };
+
+  handleSubmit = e => {
+    e.preventDefault();
+    this.props.onSubmit();
+  };
+
+  handleClick = () => {
+    this.props.onSubmit();
+  };
+
+  render () {
+    const { value, disabled, intl } = this.props;
+
+    const title = intl.formatMessage(messages.title);
+
+    return (
+      <form className='column-inline-form' onSubmit={this.handleSubmit}>
+        <input
+          className='setting-text'
+          value={value}
+          onChange={this.handleChange}
+        />
+
+        <IconButton
+          disabled={disabled}
+          icon='check'
+          title={title}
+          onClick={this.handleClick}
+        />
+      </form>
+    );
+  }
+
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(CircleForm));

app/javascript/mastodon/features/circle_editor/components/search.jsx

@@ -0,0 +1,81 @@
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+
+import { defineMessages, injectIntl } from 'react-intl';
+
+import classNames from 'classnames';
+
+import { connect } from 'react-redux';
+
+import { Icon }  from 'mastodon/components/icon';
+
+import { fetchCircleSuggestions, clearCircleSuggestions, changeCircleSuggestions } from '../../../actions/circles';
+
+const messages = defineMessages({
+  search: { id: 'circles.search', defaultMessage: 'Search among people you follow' },
+});
+
+const mapStateToProps = state => ({
+  value: state.getIn(['circleEditor', 'suggestions', 'value']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  onSubmit: value => dispatch(fetchCircleSuggestions(value)),
+  onClear: () => dispatch(clearCircleSuggestions()),
+  onChange: value => dispatch(changeCircleSuggestions(value)),
+});
+
+class Search extends PureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    onClear: PropTypes.func.isRequired,
+  };
+
+  handleChange = e => {
+    this.props.onChange(e.target.value);
+  };
+
+  handleKeyUp = e => {
+    if (e.keyCode === 13) {
+      this.props.onSubmit(this.props.value);
+    }
+  };
+
+  handleClear = () => {
+    this.props.onClear();
+  };
+
+  render () {
+    const { value, intl } = this.props;
+    const hasValue = value.length > 0;
+
+    return (
+      <div className='list-editor__search search'>
+        <label>
+          <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
+
+          <input
+            className='search__input'
+            type='text'
+            value={value}
+            onChange={this.handleChange}
+            onKeyUp={this.handleKeyUp}
+            placeholder={intl.formatMessage(messages.search)}
+          />
+        </label>
+
+        <div role='button' tabIndex={0} className='search__icon' onClick={this.handleClear}>
+          <Icon id='search' className={classNames({ active: !hasValue })} />
+          <Icon id='times-circle' aria-label={intl.formatMessage(messages.search)} className={classNames({ active: hasValue })} />
+        </div>
+      </div>
+    );
+  }
+
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(Search));

app/javascript/mastodon/features/circle_editor/index.jsx

@@ -0,0 +1,83 @@
+import PropTypes from 'prop-types';
+
+import { injectIntl } from 'react-intl';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
+
+import spring from 'react-motion/lib/spring';
+
+import { setupCircleEditor, clearCircleSuggestions, resetCircleEditor } from '../../actions/circles';
+import Motion from '../ui/util/optional_motion';
+
+import Account from './components/account';
+import EditCircleForm from './components/edit_circle_form';
+import Search from './components/search';
+
+const mapStateToProps = state => ({
+  accountIds: state.getIn(['circleEditor', 'accounts', 'items']),
+  searchAccountIds: state.getIn(['circleEditor', 'suggestions', 'items']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  onInitialize: circleId => dispatch(setupCircleEditor(circleId)),
+  onClear: () => dispatch(clearCircleSuggestions()),
+  onReset: () => dispatch(resetCircleEditor()),
+});
+
+class CircleEditor extends ImmutablePureComponent {
+
+  static propTypes = {
+    circleId: PropTypes.string.isRequired,
+    onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+    onInitialize: PropTypes.func.isRequired,
+    onClear: PropTypes.func.isRequired,
+    onReset: PropTypes.func.isRequired,
+    accountIds: ImmutablePropTypes.list.isRequired,
+    searchAccountIds: ImmutablePropTypes.list.isRequired,
+  };
+
+  componentDidMount () {
+    const { onInitialize, circleId } = this.props;
+    onInitialize(circleId);
+  }
+
+  componentWillUnmount () {
+    const { onReset } = this.props;
+    onReset();
+  }
+
+  render () {
+    const { accountIds, searchAccountIds, onClear } = this.props;
+    const showSearch = searchAccountIds.size > 0;
+
+    return (
+      <div className='modal-root__modal list-editor'>
+        <EditCircleForm />
+
+        <Search />
+
+        <div className='drawer__pager'>
+          <div className='drawer__inner list-editor__accounts'>
+            {accountIds.map(accountId => <Account key={accountId} accountId={accountId} added />)}
+          </div>
+
+          {showSearch && <div role='button' tabIndex={-1} className='drawer__backdrop' onClick={onClear} />}
+
+          <Motion defaultStyle={{ x: -100 }} style={{ x: spring(showSearch ? 0 : -100, { stiffness: 210, damping: 20 }) }}>
+            {({ x }) => (
+              <div className='drawer__inner backdrop' style={{ transform: x === 0 ? null : `translateX(${x}%)`, visibility: x === -100 ? 'hidden' : 'visible' }}>
+                {searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)}
+              </div>
+            )}
+          </Motion>
+        </div>
+      </div>
+    );
+  }
+
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(CircleEditor));

app/javascript/mastodon/features/circles/components/new_circle_form.jsx

@@ -0,0 +1,80 @@
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+
+import { defineMessages, injectIntl } from 'react-intl';
+
+import { connect } from 'react-redux';
+
+import { changeCircleEditorTitle, submitCircleEditor } from 'mastodon/actions/circles';
+import Button from 'mastodon/components/button';
+
+const messages = defineMessages({
+  label: { id: 'circles.new.title_placeholder', defaultMessage: 'New circle title' },
+  title: { id: 'circles.new.create', defaultMessage: 'Add circle' },
+});
+
+const mapStateToProps = state => ({
+  value: state.getIn(['circleEditor', 'title']),
+  disabled: state.getIn(['circleEditor', 'isSubmitting']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  onChange: value => dispatch(changeCircleEditorTitle(value)),
+  onSubmit: () => dispatch(submitCircleEditor(true)),
+});
+
+class NewCircleForm extends PureComponent {
+
+  static propTypes = {
+    value: PropTypes.string.isRequired,
+    disabled: PropTypes.bool,
+    intl: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+  };
+
+  handleChange = e => {
+    this.props.onChange(e.target.value);
+  };
+
+  handleSubmit = e => {
+    e.preventDefault();
+    this.props.onSubmit();
+  };
+
+  handleClick = () => {
+    this.props.onSubmit();
+  };
+
+  render () {
+    const { value, disabled, intl } = this.props;
+
+    const label = intl.formatMessage(messages.label);
+    const title = intl.formatMessage(messages.title);
+
+    return (
+      <form className='column-inline-form' onSubmit={this.handleSubmit}>
+        <label>
+          <span style={{ display: 'none' }}>{label}</span>
+
+          <input
+            className='setting-text'
+            value={value}
+            disabled={disabled}
+            onChange={this.handleChange}
+            placeholder={label}
+          />
+        </label>
+
+        <Button
+          disabled={disabled || !value}
+          text={title}
+          onClick={this.handleClick}
+        />
+      </form>
+    );
+  }
+
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(NewCircleForm));

app/javascript/mastodon/features/circles/index.jsx

@@ -0,0 +1,126 @@
+import PropTypes from 'prop-types';
+
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+
+import { Helmet } from 'react-helmet';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+
+import { fetchCircles, deleteCircle } from 'mastodon/actions/circles';
+import { openModal } from 'mastodon/actions/modal';
+import Column from 'mastodon/components/column';
+import ColumnHeader from 'mastodon/components/column_header';
+import { IconButton } from 'mastodon/components/icon_button';
+import { LoadingIndicator } from 'mastodon/components/loading_indicator';
+import ScrollableList from 'mastodon/components/scrollable_list';
+import ColumnLink from 'mastodon/features/ui/components/column_link';
+import ColumnSubheading from 'mastodon/features/ui/components/column_subheading';
+
+import NewCircleForm from './components/new_circle_form';
+
+const messages = defineMessages({
+  heading: { id: 'column.circles', defaultMessage: 'Circles' },
+  subheading: { id: 'circles.subheading', defaultMessage: 'Your circles' },
+  deleteMessage: { id: 'circles.subheading', defaultMessage: 'Your circles' },
+  deleteConfirm: { id: 'circles.subheading', defaultMessage: 'Your circles' },
+});
+
+const getOrderedCircles = createSelector([state => state.get('circles')], circles => {
+  if (!circles) {
+    return circles;
+  }
+
+  return circles.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
+});
+
+const mapStateToProps = state => ({
+  circles: getOrderedCircles(state),
+});
+
+class Circles extends ImmutablePureComponent {
+
+  static propTypes = {
+    params: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired,
+    circles: ImmutablePropTypes.list,
+    intl: PropTypes.object.isRequired,
+    multiColumn: PropTypes.bool,
+  };
+
+  UNSAFE_componentWillMount () {
+    this.props.dispatch(fetchCircles());
+  }
+
+  handleEditClick = (e) => {
+    e.preventDefault();
+    this.props.dispatch(openModal({
+      modalType: 'CIRCLE_EDITOR',
+      modalProps: { circleId: e.currentTarget.getAttribute('data-id') },
+    }));
+  };
+
+  handleRemoveClick = (e) => {
+    const { dispatch, intl } = this.props;
+
+    e.preventDefault();
+    const id = e.currentTarget.getAttribute('data-id');
+
+    dispatch(openModal({
+      modalType: 'CONFIRM',
+      modalProps: {
+        message: intl.formatMessage(messages.deleteMessage),
+        confirm: intl.formatMessage(messages.deleteConfirm),
+        onConfirm: () => {
+          dispatch(deleteCircle(id));
+        },
+      },
+    }));
+  };
+
+  render () {
+    const { intl, circles, multiColumn } = this.props;
+
+    if (!circles) {
+      return (
+        <Column>
+          <LoadingIndicator />
+        </Column>
+      );
+    }
+
+    const emptyMessage = <FormattedMessage id='empty_column.circles' defaultMessage="You don't have any circles yet. When you create one, it will show up here." />;
+
+    return (
+      <Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.heading)}>
+        <ColumnHeader title={intl.formatMessage(messages.heading)} icon='user-circle' multiColumn={multiColumn} />
+
+        <NewCircleForm />
+
+        <ScrollableList
+          scrollKey='circles'
+          emptyMessage={emptyMessage}
+          prepend={<ColumnSubheading text={intl.formatMessage(messages.subheading)} />}
+          bindToDocument={!multiColumn}
+        >
+          {circles.map(circle =>
+            (<div key={circle.get('id')} className='circle-item'>
+              <ColumnLink to={`#`} data-id={circle.get('id')} onClick={this.handleEditClick} icon='user-circle' text={circle.get('title')} />,
+              <IconButton icon='trash' data_id={circle.get('id')} onClick={this.handleRemoveClick} />
+            </div>)
+          )}
+        </ScrollableList>
+
+        <Helmet>
+          <title>{intl.formatMessage(messages.heading)}</title>
+          <meta name='robots' content='noindex' />
+        </Helmet>
+      </Column>
+    );
+  }
+
+}
+
+export default connect(mapStateToProps)(injectIntl(Circles));

app/javascript/mastodon/features/ui/components/modal_root.jsx

@@ -13,6 +13,8 @@ import {
   ListAdder,
   AntennaEditor,
   AntennaAdder,
+  CircleEditor,
+  CircleAdder,
   CompareHistoryModal,
   FilterModal,
   InteractionModal,
@@ -48,9 +50,11 @@ export const MODAL_COMPONENTS = {
   'EMBED': EmbedModal,
   'LIST_EDITOR': ListEditor,
   'ANTENNA_EDITOR': AntennaEditor,
+  'CIRCLE_EDITOR': CircleEditor,
   'FOCAL_POINT': () => Promise.resolve({ default: FocalPointModal }),
   'LIST_ADDER': ListAdder,
   'ANTENNA_ADDER': AntennaAdder,
+  'CIRCLE_ADDER': CircleAdder,
   'COMPARE_HISTORY': CompareHistoryModal,
   'FILTER': FilterModal,
   'SUBSCRIBED_LANGUAGES': SubscribedLanguagesModal,

app/javascript/mastodon/features/ui/components/navigation_panel.jsx

@@ -28,6 +28,7 @@ const messages = defineMessages({
   bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' },
   lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' },
   antennas: { id: 'navigation_bar.antennas', defaultMessage: 'Antennas' },
+  circles: { id: 'navigation_bar.circles', defaultMessage: 'Circles' },
   preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
   followsAndFollowers: { id: 'navigation_bar.follows_and_followers', defaultMessage: 'Follows and followers' },
   about: { id: 'navigation_bar.about', defaultMessage: 'About' },
@@ -106,6 +107,7 @@ class NavigationPanel extends Component {
           <>
             <ColumnLink transparent to='/lists' icon='list-ul' text={intl.formatMessage(messages.lists)} />
             <ColumnLink transparent to='/antennasw' icon='wifi' text={intl.formatMessage(messages.antennas)} isActive={this.isAntennasActive} />
+            <ColumnLink transparent to='/circles' icon='user-circle' text={intl.formatMessage(messages.circles)} />
             <FollowRequestsColumnLink />
             <ColumnLink transparent to='/conversations' icon='at' text={intl.formatMessage(messages.direct)} />
           </>

app/javascript/mastodon/features/ui/index.jsx

@@ -62,6 +62,7 @@ import {
   PinnedStatuses,
   Lists,
   Antennas,
+  Circles,
   AntennaSetting,
   Directory,
   Explore,
@@ -254,6 +255,7 @@ class SwitchingColumnsArea extends PureComponent {
           <WrappedRoute path='/mutes' component={Mutes} content={children} />
           <WrappedRoute path='/lists' component={Lists} content={children} />
           <WrappedRoute path='/antennasw' component={Antennas} content={children} />
+          <WrappedRoute path='/circles' component={Circles} content={children} />
 
           <Route component={BundleColumnError} />
         </WrappedSwitch>

app/javascript/mastodon/features/ui/util/async-components.js

@@ -50,6 +50,10 @@ export function Antennas () {
   return import(/* webpackChunkName: "features/antennas" */'../../antennas');
 }
 
+export function Circles () {
+  return import(/* webpackChunkName: "features/circles" */'../../circles');
+}
+
 export function Status () {
   return import(/* webpackChunkName: "features/status" */'../../status');
 }
@@ -170,6 +174,14 @@ export function AntennaEditor () {
   return import(/*webpackChunkName: "features/antenna_editor" */'../../antenna_editor');
 }
 
+export function CircleAdder () {
+  return import(/*webpackChunkName: "features/circle_adder" */'../../circle_adder');
+}
+
+export function CircleEditor () {
+  return import(/*webpackChunkName: "features/circle_editor" */'../../circle_editor');
+}
+
 export function AntennaSetting () {
   return import(/*webpackChunkName: "features/antenna_setting" */'../../antenna_setting');
 }

app/javascript/mastodon/reducers/circle_adder.js

@@ -0,0 +1,48 @@
+import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+
+import {
+  LIST_ADDER_RESET,
+  LIST_ADDER_SETUP,
+  LIST_ADDER_LISTS_FETCH_REQUEST,
+  LIST_ADDER_LISTS_FETCH_SUCCESS,
+  LIST_ADDER_LISTS_FETCH_FAIL,
+  LIST_EDITOR_ADD_SUCCESS,
+  LIST_EDITOR_REMOVE_SUCCESS,
+} from '../actions/lists';
+
+const initialState = ImmutableMap({
+  accountId: null,
+
+  lists: ImmutableMap({
+    items: ImmutableList(),
+    loaded: false,
+    isLoading: false,
+  }),
+});
+
+export default function listAdderReducer(state = initialState, action) {
+  switch(action.type) {
+  case LIST_ADDER_RESET:
+    return initialState;
+  case LIST_ADDER_SETUP:
+    return state.withMutations(map => {
+      map.set('accountId', action.account.get('id'));
+    });
+  case LIST_ADDER_LISTS_FETCH_REQUEST:
+    return state.setIn(['lists', 'isLoading'], true);
+  case LIST_ADDER_LISTS_FETCH_FAIL:
+    return state.setIn(['lists', 'isLoading'], false);
+  case LIST_ADDER_LISTS_FETCH_SUCCESS:
+    return state.update('lists', lists => lists.withMutations(map => {
+      map.set('isLoading', false);
+      map.set('loaded', true);
+      map.set('items', ImmutableList(action.lists.map(item => item.id)));
+    }));
+  case LIST_EDITOR_ADD_SUCCESS:
+    return state.updateIn(['lists', 'items'], list => list.unshift(action.listId));
+  case LIST_EDITOR_REMOVE_SUCCESS:
+    return state.updateIn(['lists', 'items'], list => list.filterNot(item => item === action.listId));
+  default:
+    return state;
+  }
+}

app/javascript/mastodon/reducers/circle_editor.js

@@ -0,0 +1,99 @@
+import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+
+import {
+  CIRCLE_CREATE_REQUEST,
+  CIRCLE_CREATE_FAIL,
+  CIRCLE_CREATE_SUCCESS,
+  CIRCLE_UPDATE_REQUEST,
+  CIRCLE_UPDATE_FAIL,
+  CIRCLE_UPDATE_SUCCESS,
+  CIRCLE_EDITOR_RESET,
+  CIRCLE_EDITOR_SETUP,
+  CIRCLE_EDITOR_TITLE_CHANGE,
+  CIRCLE_ACCOUNTS_FETCH_REQUEST,
+  CIRCLE_ACCOUNTS_FETCH_SUCCESS,
+  CIRCLE_ACCOUNTS_FETCH_FAIL,
+  CIRCLE_EDITOR_SUGGESTIONS_READY,
+  CIRCLE_EDITOR_SUGGESTIONS_CLEAR,
+  CIRCLE_EDITOR_SUGGESTIONS_CHANGE,
+  CIRCLE_EDITOR_ADD_SUCCESS,
+  CIRCLE_EDITOR_REMOVE_SUCCESS,
+} from '../actions/circles';
+
+const initialState = ImmutableMap({
+  circleId: null,
+  isSubmitting: false,
+  isChanged: false,
+  title: '',
+  isExclusive: false,
+
+  accounts: ImmutableMap({
+    items: ImmutableList(),
+    loaded: false,
+    isLoading: false,
+  }),
+
+  suggestions: ImmutableMap({
+    value: '',
+    items: ImmutableList(),
+  }),
+});
+
+export default function circleEditorReducer(state = initialState, action) {
+  switch(action.type) {
+  case CIRCLE_EDITOR_RESET:
+    return initialState;
+  case CIRCLE_EDITOR_SETUP:
+    return state.withMutations(map => {
+      map.set('circleId', action.circle.get('id'));
+      map.set('title', action.circle.get('title'));
+      map.set('isExclusive', action.circle.get('is_exclusive'));
+      map.set('isSubmitting', false);
+    });
+  case CIRCLE_EDITOR_TITLE_CHANGE:
+    return state.withMutations(map => {
+      map.set('title', action.value);
+      map.set('isChanged', true);
+    });
+  case CIRCLE_CREATE_REQUEST:
+  case CIRCLE_UPDATE_REQUEST:
+    return state.withMutations(map => {
+      map.set('isSubmitting', true);
+      map.set('isChanged', false);
+    });
+  case CIRCLE_CREATE_FAIL:
+  case CIRCLE_UPDATE_FAIL:
+    return state.set('isSubmitting', false);
+  case CIRCLE_CREATE_SUCCESS:
+  case CIRCLE_UPDATE_SUCCESS:
+    return state.withMutations(map => {
+      map.set('isSubmitting', false);
+      map.set('circleId', action.circle.id);
+    });
+  case CIRCLE_ACCOUNTS_FETCH_REQUEST:
+    return state.setIn(['accounts', 'isLoading'], true);
+  case CIRCLE_ACCOUNTS_FETCH_FAIL:
+    return state.setIn(['accounts', 'isLoading'], false);
+  case CIRCLE_ACCOUNTS_FETCH_SUCCESS:
+    return state.update('accounts', accounts => accounts.withMutations(map => {
+      map.set('isLoading', false);
+      map.set('loaded', true);
+      map.set('items', ImmutableList(action.accounts.map(item => item.id)));
+    }));
+  case CIRCLE_EDITOR_SUGGESTIONS_CHANGE:
+    return state.setIn(['suggestions', 'value'], action.value);
+  case CIRCLE_EDITOR_SUGGESTIONS_READY:
+    return state.setIn(['suggestions', 'items'], ImmutableList(action.accounts.map(item => item.id)));
+  case CIRCLE_EDITOR_SUGGESTIONS_CLEAR:
+    return state.update('suggestions', suggestions => suggestions.withMutations(map => {
+      map.set('items', ImmutableList());
+      map.set('value', '');
+    }));
+  case CIRCLE_EDITOR_ADD_SUCCESS:
+    return state.updateIn(['accounts', 'items'], circle => circle.unshift(action.accountId));
+  case CIRCLE_EDITOR_REMOVE_SUCCESS:
+    return state.updateIn(['accounts', 'items'], circle => circle.filterNot(item => item === action.accountId));
+  default:
+    return state;
+  }
+}

app/javascript/mastodon/reducers/circles.js

@@ -0,0 +1,38 @@
+import { Map as ImmutableMap, fromJS } from 'immutable';
+
+import {
+  CIRCLE_FETCH_SUCCESS,
+  CIRCLE_FETCH_FAIL,
+  CIRCLES_FETCH_SUCCESS,
+  CIRCLE_CREATE_SUCCESS,
+  CIRCLE_UPDATE_SUCCESS,
+  CIRCLE_DELETE_SUCCESS,
+} from '../actions/circles';
+
+const initialState = ImmutableMap();
+
+const normalizeList = (state, circle) => state.set(circle.id, fromJS(circle));
+
+const normalizeLists = (state, circles) => {
+  circles.forEach(circle => {
+    state = normalizeList(state, circle);
+  });
+
+  return state;
+};
+
+export default function circles(state = initialState, action) {
+  switch(action.type) {
+  case CIRCLE_FETCH_SUCCESS:
+  case CIRCLE_CREATE_SUCCESS:
+  case CIRCLE_UPDATE_SUCCESS:
+    return normalizeList(state, action.circle);
+  case CIRCLES_FETCH_SUCCESS:
+    return normalizeLists(state, action.circles);
+  case CIRCLE_DELETE_SUCCESS:
+  case CIRCLE_FETCH_FAIL:
+    return state.set(action.id, false);
+  default:
+    return state;
+  }
+}

app/javascript/mastodon/reducers/index.ts

@@ -13,6 +13,9 @@ import antennaEditor from './antenna_editor';
 import antennas from './antennas';
 import blocks from './blocks';
 import boosts from './boosts';
+import circleAdder from './circle_adder';
+import circleEditor from './circle_editor';
+import circles from './circles';
 import compose from './compose';
 import contexts from './contexts';
 import conversations from './conversations';
@@ -83,6 +86,9 @@ const reducers = {
   antennas,
   antennaEditor,
   antennaAdder,
+  circles,
+  circleEditor,
+  circleAdder,
   filters,
   conversations,
   suggestions,

app/javascript/mastodon/reducers/list_adder.js

@@ -1,47 +1,47 @@
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 
 import {
-  LIST_ADDER_RESET,
-  LIST_ADDER_SETUP,
-  LIST_ADDER_LISTS_FETCH_REQUEST,
-  LIST_ADDER_LISTS_FETCH_SUCCESS,
-  LIST_ADDER_LISTS_FETCH_FAIL,
-  LIST_EDITOR_ADD_SUCCESS,
-  LIST_EDITOR_REMOVE_SUCCESS,
-} from '../actions/lists';
+  CIRCLE_ADDER_RESET,
+  CIRCLE_ADDER_SETUP,
+  CIRCLE_ADDER_CIRCLES_FETCH_REQUEST,
+  CIRCLE_ADDER_CIRCLES_FETCH_SUCCESS,
+  CIRCLE_ADDER_CIRCLES_FETCH_FAIL,
+  CIRCLE_EDITOR_ADD_SUCCESS,
+  CIRCLE_EDITOR_REMOVE_SUCCESS,
+} from '../actions/circles';
 
 const initialState = ImmutableMap({
   accountId: null,
 
-  lists: ImmutableMap({
+  circles: ImmutableMap({
     items: ImmutableList(),
     loaded: false,
     isLoading: false,
   }),
 });
 
-export default function listAdderReducer(state = initialState, action) {
+export default function circleAdderReducer(state = initialState, action) {
   switch(action.type) {
-  case LIST_ADDER_RESET:
+  case CIRCLE_ADDER_RESET:
     return initialState;
-  case LIST_ADDER_SETUP:
+  case CIRCLE_ADDER_SETUP:
     return state.withMutations(map => {
       map.set('accountId', action.account.get('id'));
     });
-  case LIST_ADDER_LISTS_FETCH_REQUEST:
-    return state.setIn(['lists', 'isLoading'], true);
-  case LIST_ADDER_LISTS_FETCH_FAIL:
-    return state.setIn(['lists', 'isLoading'], false);
-  case LIST_ADDER_LISTS_FETCH_SUCCESS:
-    return state.update('lists', lists => lists.withMutations(map => {
+  case CIRCLE_ADDER_CIRCLES_FETCH_REQUEST:
+    return state.setIn(['circles', 'isLoading'], true);
+  case CIRCLE_ADDER_CIRCLES_FETCH_FAIL:
+    return state.setIn(['circles', 'isLoading'], false);
+  case CIRCLE_ADDER_CIRCLES_FETCH_SUCCESS:
+    return state.update('circles', circles => circles.withMutations(map => {
       map.set('isLoading', false);
       map.set('loaded', true);
-      map.set('items', ImmutableList(action.lists.map(item => item.id)));
+      map.set('items', ImmutableList(action.circles.map(item => item.id)));
     }));
-  case LIST_EDITOR_ADD_SUCCESS:
-    return state.updateIn(['lists', 'items'], list => list.unshift(action.listId));
-  case LIST_EDITOR_REMOVE_SUCCESS:
-    return state.updateIn(['lists', 'items'], list => list.filterNot(item => item === action.listId));
+  case CIRCLE_EDITOR_ADD_SUCCESS:
+    return state.updateIn(['circles', 'items'], circle => circle.unshift(action.circleId));
+  case CIRCLE_EDITOR_REMOVE_SUCCESS:
+    return state.updateIn(['circles', 'items'], circle => circle.filterNot(item => item === action.circleId));
   default:
     return state;
   }

app/javascript/styles/mastodon/components.scss

@@ -3341,6 +3341,8 @@ $ui-header-height: 55px;
   white-space: nowrap;
   border: 0;
   border-left: 4px solid transparent;
+  position: relative;
+  z-index: 0;
 
   &:hover,
   &:focus,
@@ -3390,7 +3392,8 @@ $ui-header-height: 55px;
   margin-inline-end: 5px;
 }
 
-.column-link__badge {
+.column-link__badge,
+.column-link__command {
   display: inline-block;
   border-radius: 4px;
   font-size: 12px;
@@ -3401,6 +3404,12 @@ $ui-header-height: 55px;
   margin: -6px 10px;
 }
 
+.column-link__command {
+  position: absolute;
+  right: 0;
+  z-index: 1;
+}
+
 .column-subheading {
   background: $ui-base-color;
   color: $dark-text-color;
@@ -3549,6 +3558,19 @@ $ui-header-height: 55px;
   }
 }
 
+.circle-item {
+  display: flex;
+
+  .column-link {
+    flex: 1;
+  }
+
+  .icon-button {
+    align-self: center;
+    margin: 0 8px;
+  }
+}
+
 button.icon-button i.fa-retweet {
   background-position: 0 0;
   height: 19px;

app/models/circle.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: circles
+#
+#  id         :bigint(8)        not null, primary key
+#  account_id :bigint(8)        not null
+#  title      :string           default(""), not null
+#  created_at :datetime         not null
+#  updated_at :datetime         not null
+#
+
+class Circle < ApplicationRecord
+  include Paginable
+
+  PER_ACCOUNT_LIMIT = 100
+
+  belongs_to :account
+
+  has_many :circle_accounts, inverse_of: :circle, dependent: :destroy
+  has_many :accounts, through: :circle_accounts
+
+  validates :title, presence: true
+
+  validates_each :account_id, on: :create do |record, _attr, value|
+    record.errors.add(:base, I18n.t('lists.errors.limit')) if List.where(account_id: value).count >= PER_ACCOUNT_LIMIT
+  end
+end

app/models/circle_account.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: circle_accounts
+#
+#  id         :bigint(8)        not null, primary key
+#  circle_id  :bigint(8)
+#  account_id :bigint(8)        not null
+#  follow_id  :bigint(8)        not null
+#  created_at :datetime         not null
+#  updated_at :datetime         not null
+#
+
+class CircleAccount < ApplicationRecord
+  belongs_to :circle
+  belongs_to :account
+  belongs_to :follow
+
+  validates :account_id, uniqueness: { scope: :circle_id }
+  validate :validate_relationship
+
+  before_validation :set_follow
+
+  private
+
+  def set_follow
+    return if circle.account_id == account.id
+
+    self.follow = Follow.find_by!(account_id: account.id, target_account_id: circle.account_id)
+  end
+
+  def validate_relationship
+    return if circle.account_id == account_id
+
+    errors.add(:account_id, 'follow relationship missing') if follow_id.nil?
+    errors.add(:follow, 'mismatched accounts') if follow_id.present? && follow.account_id != account_id
+  end
+end

app/models/concerns/account_search.rb

@@ -87,6 +87,29 @@ module AccountSearch
     LIMIT :limit OFFSET :offset
   SQL
 
+  ADVANCED_SEARCH_WITH_FOLLOWED = <<~SQL.squish
+    WITH first_degree AS (
+      SELECT account_id
+      FROM follows
+      WHERE target_account_id = :id
+      UNION ALL
+      SELECT :id
+    )
+    SELECT
+      accounts.*,
+      (count(f.id) + 1) * #{BOOST} * ts_rank_cd(#{TEXT_SEARCH_RANKS}, to_tsquery('simple', :tsquery), 32) AS rank
+    FROM accounts
+    LEFT OUTER JOIN follows AS f ON (accounts.id = f.target_account_id AND f.account_id = :id)
+    LEFT JOIN account_stats AS s ON accounts.id = s.account_id
+    WHERE accounts.id IN (SELECT * FROM first_degree)
+      AND to_tsquery('simple', :tsquery) @@ #{TEXT_SEARCH_RANKS}
+      AND accounts.suspended_at IS NULL
+      AND accounts.moved_to_account_id IS NULL
+    GROUP BY accounts.id, s.id
+    ORDER BY rank DESC
+    LIMIT :limit OFFSET :offset
+  SQL
+
   ADVANCED_SEARCH_WITHOUT_FOLLOWING = <<~SQL.squish
     SELECT
       accounts.*,
@@ -126,9 +149,13 @@ module AccountSearch
       end
     end
 
-    def advanced_search_for(terms, account, limit: 10, following: false, offset: 0)
+    def advanced_search_for(terms, account, limit: 10, following: false, follower: false, offset: 0)
       tsquery = generate_query_for_search(terms)
-      sql_template = following ? ADVANCED_SEARCH_WITH_FOLLOWING : ADVANCED_SEARCH_WITHOUT_FOLLOWING
+      sql_template = if following
+                       ADVANCED_SEARCH_WITH_FOLLOWING
+                     else
+                       follower ? ADVANCED_SEARCH_WITH_FOLLOWED : ADVANCED_SEARCH_WITHOUT_FOLLOWING
+                     end
 
       find_by_sql([sql_template, { id: account.id, limit: limit, offset: offset, tsquery: tsquery }]).tap do |records|
         ActiveRecord::Associations::Preloader.new(records: records, associations: :account_stat)

app/serializers/rest/circle_serializer.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class REST::CircleSerializer < ActiveModel::Serializer
+  attributes :id, :title
+
+  def id
+    object.id.to_s
+  end
+end

app/services/account_search_service.rb

@@ -44,13 +44,15 @@ class AccountSearchService < BaseService
     def must_clauses
       if @account && @options[:following]
         [core_query, only_following_query]
+      elsif @account && @options[:follower]
+        [core_query, only_follower_query]
       else
         [core_query]
       end
     end
 
     def should_clauses
-      if @account && !@options[:following]
+      if @account && !@options[:following] && !@options[:follower]
         [boost_following_query]
       else
         []
@@ -76,6 +78,23 @@ class AccountSearchService < BaseService
       }
     end
 
+    def only_follower_query
+      {
+        terms: {
+          id: follower_ids,
+        },
+      }
+    end
+
+    def boost_follower_query
+      {
+        terms: {
+          id: follower_ids,
+          boost: 100,
+        },
+      }
+    end
+
     # This function deranks accounts that follow more people than follow them
     def reputation_score_function
       {
@@ -114,6 +133,10 @@ class AccountSearchService < BaseService
     def following_ids
       @following_ids ||= @account.active_relationships.pluck(:target_account_id) + [@account.id]
     end
+
+    def follower_ids
+      @follower_ids ||= @account.passive_relationships.pluck(:account_id)
+    end
   end
 
   class AutocompleteQueryBuilder < QueryBuilder
@@ -177,6 +200,7 @@ class AccountSearchService < BaseService
             end
 
     match = nil if !match.nil? && !account.nil? && options[:following] && !account.following?(match)
+    match = nil if !match.nil? && !account.nil? && options[:follower] && !match.following?(account)
 
     @exact_match = match
   end
@@ -200,7 +224,7 @@ class AccountSearchService < BaseService
   end
 
   def advanced_search_results
-    Account.advanced_search_for(terms_for_query, account, limit: limit_for_non_exact_results, following: options[:following], offset: offset)
+    Account.advanced_search_for(terms_for_query, account, limit: limit_for_non_exact_results, following: options[:following], follower: options[:follower], offset: offset)
   end
 
   def simple_search_results
@@ -210,9 +234,9 @@ class AccountSearchService < BaseService
   def from_elasticsearch
     query_builder = begin
       if options[:use_searchable_text]
-        FullQueryBuilder.new(terms_for_query, account, options.slice(:following))
+        FullQueryBuilder.new(terms_for_query, account, options.slice(:following, :follower))
       else
-        AutocompleteQueryBuilder.new(terms_for_query, account, options.slice(:following))
+        AutocompleteQueryBuilder.new(terms_for_query, account, options.slice(:following, :follower))
       end
     end
 

config/routes.rb

@@ -18,6 +18,7 @@ Rails.application.routes.draw do
     /lists/(*any)
     /antennasw/(*any)
     /antennast/(*any)
+    /circles
     /notifications
     /favourites
     /emoji_reactions

config/routes/api.rb

@@ -215,6 +215,10 @@ namespace :api, format: false do
       resource :exclude_keywords, only: [:create, :destroy], controller: 'antennas/exclude_keywords'
     end
 
+    resources :circles, only: [:index, :create, :show, :update, :destroy] do
+      resource :accounts, only: [:show, :create, :destroy], controller: 'circles/accounts'
+    end
+
     namespace :featured_tags do
       get :suggestions, to: 'suggestions#index'
     end

db/migrate/20230821061713_create_circles.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class CreateCircles < ActiveRecord::Migration[7.0]
+  def change
+    create_table :circles do |t|
+      t.belongs_to :account, null: false, foreign_key: { on_delete: :cascade }
+      t.string :title, null: false, default: ''
+      t.datetime :created_at, null: false
+      t.datetime :updated_at, null: false
+    end
+    create_table :circle_accounts do |t|
+      t.belongs_to :circle, null: true, foreign_key: { on_delete: :cascade }
+      t.belongs_to :account, null: false, foreign_key: { on_delete: :cascade }
+      t.belongs_to :follow, null: false, foreign_key: { on_delete: :cascade }
+      t.datetime :created_at, null: false
+      t.datetime :updated_at, null: false
+    end
+
+    add_index :circle_accounts, [:circle_id, :account_id], unique: true
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.0].define(version: 2023_08_19_084858) do
+ActiveRecord::Schema[7.0].define(version: 2023_08_21_061713) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
 
@@ -401,6 +401,26 @@ ActiveRecord::Schema[7.0].define(version: 2023_08_19_084858) do
     t.index ["reference_account_id"], name: "index_canonical_email_blocks_on_reference_account_id"
   end
 
+  create_table "circle_accounts", force: :cascade do |t|
+    t.bigint "circle_id"
+    t.bigint "account_id", null: false
+    t.bigint "follow_id", null: false
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["account_id"], name: "index_circle_accounts_on_account_id"
+    t.index ["circle_id", "account_id"], name: "index_circle_accounts_on_circle_id_and_account_id", unique: true
+    t.index ["circle_id"], name: "index_circle_accounts_on_circle_id"
+    t.index ["follow_id"], name: "index_circle_accounts_on_follow_id"
+  end
+
+  create_table "circles", force: :cascade do |t|
+    t.bigint "account_id", null: false
+    t.string "title", default: "", null: false
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["account_id"], name: "index_circles_on_account_id"
+  end
+
   create_table "conversation_mutes", force: :cascade do |t|
     t.bigint "conversation_id", null: false
     t.bigint "account_id", null: false
@@ -1341,6 +1361,10 @@ ActiveRecord::Schema[7.0].define(version: 2023_08_19_084858) do
   add_foreign_key "bulk_import_rows", "bulk_imports", on_delete: :cascade
   add_foreign_key "bulk_imports", "accounts", on_delete: :cascade
   add_foreign_key "canonical_email_blocks", "accounts", column: "reference_account_id", on_delete: :cascade
+  add_foreign_key "circle_accounts", "accounts", on_delete: :cascade
+  add_foreign_key "circle_accounts", "circles", on_delete: :cascade
+  add_foreign_key "circle_accounts", "follows", on_delete: :cascade
+  add_foreign_key "circles", "accounts", on_delete: :cascade
   add_foreign_key "conversation_mutes", "accounts", name: "fk_225b4212bb", on_delete: :cascade
   add_foreign_key "conversation_mutes", "conversations", on_delete: :cascade
   add_foreign_key "custom_filter_keywords", "custom_filters", on_delete: :cascade