Add circle editor

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;