diff --git a/app/javascript/flavours/glitch/actions/lists.js b/app/javascript/flavours/glitch/actions/lists.js
new file mode 100644
index 00000000000..3c3af5fee40
--- /dev/null
+++ b/app/javascript/flavours/glitch/actions/lists.js
@@ -0,0 +1,313 @@
+import api from 'flavours/glitch/util/api';
+
+export const LIST_FETCH_REQUEST = 'LIST_FETCH_REQUEST';
+export const LIST_FETCH_SUCCESS = 'LIST_FETCH_SUCCESS';
+export const LIST_FETCH_FAIL = 'LIST_FETCH_FAIL';
+
+export const LISTS_FETCH_REQUEST = 'LISTS_FETCH_REQUEST';
+export const LISTS_FETCH_SUCCESS = 'LISTS_FETCH_SUCCESS';
+export const LISTS_FETCH_FAIL = 'LISTS_FETCH_FAIL';
+
+export const LIST_EDITOR_TITLE_CHANGE = 'LIST_EDITOR_TITLE_CHANGE';
+export const LIST_EDITOR_RESET = 'LIST_EDITOR_RESET';
+export const LIST_EDITOR_SETUP = 'LIST_EDITOR_SETUP';
+
+export const LIST_CREATE_REQUEST = 'LIST_CREATE_REQUEST';
+export const LIST_CREATE_SUCCESS = 'LIST_CREATE_SUCCESS';
+export const LIST_CREATE_FAIL = 'LIST_CREATE_FAIL';
+
+export const LIST_UPDATE_REQUEST = 'LIST_UPDATE_REQUEST';
+export const LIST_UPDATE_SUCCESS = 'LIST_UPDATE_SUCCESS';
+export const LIST_UPDATE_FAIL = 'LIST_UPDATE_FAIL';
+
+export const LIST_DELETE_REQUEST = 'LIST_DELETE_REQUEST';
+export const LIST_DELETE_SUCCESS = 'LIST_DELETE_SUCCESS';
+export const LIST_DELETE_FAIL = 'LIST_DELETE_FAIL';
+
+export const LIST_ACCOUNTS_FETCH_REQUEST = 'LIST_ACCOUNTS_FETCH_REQUEST';
+export const LIST_ACCOUNTS_FETCH_SUCCESS = 'LIST_ACCOUNTS_FETCH_SUCCESS';
+export const LIST_ACCOUNTS_FETCH_FAIL = 'LIST_ACCOUNTS_FETCH_FAIL';
+
+export const LIST_EDITOR_SUGGESTIONS_CHANGE = 'LIST_EDITOR_SUGGESTIONS_CHANGE';
+export const LIST_EDITOR_SUGGESTIONS_READY = 'LIST_EDITOR_SUGGESTIONS_READY';
+export const LIST_EDITOR_SUGGESTIONS_CLEAR = 'LIST_EDITOR_SUGGESTIONS_CLEAR';
+
+export const LIST_EDITOR_ADD_REQUEST = 'LIST_EDITOR_ADD_REQUEST';
+export const LIST_EDITOR_ADD_SUCCESS = 'LIST_EDITOR_ADD_SUCCESS';
+export const LIST_EDITOR_ADD_FAIL = 'LIST_EDITOR_ADD_FAIL';
+
+export const LIST_EDITOR_REMOVE_REQUEST = 'LIST_EDITOR_REMOVE_REQUEST';
+export const LIST_EDITOR_REMOVE_SUCCESS = 'LIST_EDITOR_REMOVE_SUCCESS';
+export const LIST_EDITOR_REMOVE_FAIL = 'LIST_EDITOR_REMOVE_FAIL';
+
+export const fetchList = id => (dispatch, getState) => {
+ if (getState().getIn(['lists', id])) {
+ return;
+ }
+
+ dispatch(fetchListRequest(id));
+
+ api(getState).get(`/api/v1/lists/${id}`)
+ .then(({ data }) => dispatch(fetchListSuccess(data)))
+ .catch(err => dispatch(fetchListFail(id, err)));
+};
+
+export const fetchListRequest = id => ({
+ type: LIST_FETCH_REQUEST,
+ id,
+});
+
+export const fetchListSuccess = list => ({
+ type: LIST_FETCH_SUCCESS,
+ list,
+});
+
+export const fetchListFail = (id, error) => ({
+ type: LIST_FETCH_FAIL,
+ id,
+ error,
+});
+
+export const fetchLists = () => (dispatch, getState) => {
+ dispatch(fetchListsRequest());
+
+ api(getState).get('/api/v1/lists')
+ .then(({ data }) => dispatch(fetchListsSuccess(data)))
+ .catch(err => dispatch(fetchListsFail(err)));
+};
+
+export const fetchListsRequest = () => ({
+ type: LISTS_FETCH_REQUEST,
+});
+
+export const fetchListsSuccess = lists => ({
+ type: LISTS_FETCH_SUCCESS,
+ lists,
+});
+
+export const fetchListsFail = error => ({
+ type: LISTS_FETCH_FAIL,
+ error,
+});
+
+export const submitListEditor = shouldReset => (dispatch, getState) => {
+ const listId = getState().getIn(['listEditor', 'listId']);
+ const title = getState().getIn(['listEditor', 'title']);
+
+ if (listId === null) {
+ dispatch(createList(title, shouldReset));
+ } else {
+ dispatch(updateList(listId, title, shouldReset));
+ }
+};
+
+export const setupListEditor = listId => (dispatch, getState) => {
+ dispatch({
+ type: LIST_EDITOR_SETUP,
+ list: getState().getIn(['lists', listId]),
+ });
+
+ dispatch(fetchListAccounts(listId));
+};
+
+export const changeListEditorTitle = value => ({
+ type: LIST_EDITOR_TITLE_CHANGE,
+ value,
+});
+
+export const createList = (title, shouldReset) => (dispatch, getState) => {
+ dispatch(createListRequest());
+
+ api(getState).post('/api/v1/lists', { title }).then(({ data }) => {
+ dispatch(createListSuccess(data));
+
+ if (shouldReset) {
+ dispatch(resetListEditor());
+ }
+ }).catch(err => dispatch(createListFail(err)));
+};
+
+export const createListRequest = () => ({
+ type: LIST_CREATE_REQUEST,
+});
+
+export const createListSuccess = list => ({
+ type: LIST_CREATE_SUCCESS,
+ list,
+});
+
+export const createListFail = error => ({
+ type: LIST_CREATE_FAIL,
+ error,
+});
+
+export const updateList = (id, title, shouldReset) => (dispatch, getState) => {
+ dispatch(updateListRequest(id));
+
+ api(getState).put(`/api/v1/lists/${id}`, { title }).then(({ data }) => {
+ dispatch(updateListSuccess(data));
+
+ if (shouldReset) {
+ dispatch(resetListEditor());
+ }
+ }).catch(err => dispatch(updateListFail(id, err)));
+};
+
+export const updateListRequest = id => ({
+ type: LIST_UPDATE_REQUEST,
+ id,
+});
+
+export const updateListSuccess = list => ({
+ type: LIST_UPDATE_SUCCESS,
+ list,
+});
+
+export const updateListFail = (id, error) => ({
+ type: LIST_UPDATE_FAIL,
+ id,
+ error,
+});
+
+export const resetListEditor = () => ({
+ type: LIST_EDITOR_RESET,
+});
+
+export const deleteList = id => (dispatch, getState) => {
+ dispatch(deleteListRequest(id));
+
+ api(getState).delete(`/api/v1/lists/${id}`)
+ .then(() => dispatch(deleteListSuccess(id)))
+ .catch(err => dispatch(deleteListFail(id, err)));
+};
+
+export const deleteListRequest = id => ({
+ type: LIST_DELETE_REQUEST,
+ id,
+});
+
+export const deleteListSuccess = id => ({
+ type: LIST_DELETE_SUCCESS,
+ id,
+});
+
+export const deleteListFail = (id, error) => ({
+ type: LIST_DELETE_FAIL,
+ id,
+ error,
+});
+
+export const fetchListAccounts = listId => (dispatch, getState) => {
+ dispatch(fetchListAccountsRequest(listId));
+
+ api(getState).get(`/api/v1/lists/${listId}/accounts`, { params: { limit: 0 } })
+ .then(({ data }) => dispatch(fetchListAccountsSuccess(listId, data)))
+ .catch(err => dispatch(fetchListAccountsFail(listId, err)));
+};
+
+export const fetchListAccountsRequest = id => ({
+ type: LIST_ACCOUNTS_FETCH_REQUEST,
+ id,
+});
+
+export const fetchListAccountsSuccess = (id, accounts, next) => ({
+ type: LIST_ACCOUNTS_FETCH_SUCCESS,
+ id,
+ accounts,
+ next,
+});
+
+export const fetchListAccountsFail = (id, error) => ({
+ type: LIST_ACCOUNTS_FETCH_FAIL,
+ id,
+ error,
+});
+
+export const fetchListSuggestions = q => (dispatch, getState) => {
+ const params = {
+ q,
+ resolve: false,
+ limit: 4,
+ following: true,
+ };
+
+ api(getState).get('/api/v1/accounts/search', { params })
+ .then(({ data }) => dispatch(fetchListSuggestionsReady(q, data)));
+};
+
+export const fetchListSuggestionsReady = (query, accounts) => ({
+ type: LIST_EDITOR_SUGGESTIONS_READY,
+ query,
+ accounts,
+});
+
+export const clearListSuggestions = () => ({
+ type: LIST_EDITOR_SUGGESTIONS_CLEAR,
+});
+
+export const changeListSuggestions = value => ({
+ type: LIST_EDITOR_SUGGESTIONS_CHANGE,
+ value,
+});
+
+export const addToListEditor = accountId => (dispatch, getState) => {
+ dispatch(addToList(getState().getIn(['listEditor', 'listId']), accountId));
+};
+
+export const addToList = (listId, accountId) => (dispatch, getState) => {
+ dispatch(addToListRequest(listId, accountId));
+
+ api(getState).post(`/api/v1/lists/${listId}/accounts`, { account_ids: [accountId] })
+ .then(() => dispatch(addToListSuccess(listId, accountId)))
+ .catch(err => dispatch(addToListFail(listId, accountId, err)));
+};
+
+export const addToListRequest = (listId, accountId) => ({
+ type: LIST_EDITOR_ADD_REQUEST,
+ listId,
+ accountId,
+});
+
+export const addToListSuccess = (listId, accountId) => ({
+ type: LIST_EDITOR_ADD_SUCCESS,
+ listId,
+ accountId,
+});
+
+export const addToListFail = (listId, accountId, error) => ({
+ type: LIST_EDITOR_ADD_FAIL,
+ listId,
+ accountId,
+ error,
+});
+
+export const removeFromListEditor = accountId => (dispatch, getState) => {
+ dispatch(removeFromList(getState().getIn(['listEditor', 'listId']), accountId));
+};
+
+export const removeFromList = (listId, accountId) => (dispatch, getState) => {
+ dispatch(removeFromListRequest(listId, accountId));
+
+ api(getState).delete(`/api/v1/lists/${listId}/accounts`, { params: { account_ids: [accountId] } })
+ .then(() => dispatch(removeFromListSuccess(listId, accountId)))
+ .catch(err => dispatch(removeFromListFail(listId, accountId, err)));
+};
+
+export const removeFromListRequest = (listId, accountId) => ({
+ type: LIST_EDITOR_REMOVE_REQUEST,
+ listId,
+ accountId,
+});
+
+export const removeFromListSuccess = (listId, accountId) => ({
+ type: LIST_EDITOR_REMOVE_SUCCESS,
+ listId,
+ accountId,
+});
+
+export const removeFromListFail = (listId, accountId, error) => ({
+ type: LIST_EDITOR_REMOVE_FAIL,
+ listId,
+ accountId,
+ error,
+});
diff --git a/app/javascript/flavours/glitch/actions/streaming.js b/app/javascript/flavours/glitch/actions/streaming.js
index 595eefa41f7..ae51e83490c 100644
--- a/app/javascript/flavours/glitch/actions/streaming.js
+++ b/app/javascript/flavours/glitch/actions/streaming.js
@@ -52,3 +52,4 @@ export const connectMediaStream = () => connectTimelineStream('community', 'publ
export const connectPublicStream = () => connectTimelineStream('public', 'public');
export const connectHashtagStream = (tag) => connectTimelineStream(`hashtag:${tag}`, `hashtag&tag=${tag}`);
export const connectDirectStream = () => connectTimelineStream('direct', 'direct');
+export const connectListStream = (id) => connectTimelineStream(`list:${id}`, `list&list=${id}`);
diff --git a/app/javascript/flavours/glitch/actions/timelines.js b/app/javascript/flavours/glitch/actions/timelines.js
index 3fabf388581..9a5b2e6da91 100644
--- a/app/javascript/flavours/glitch/actions/timelines.js
+++ b/app/javascript/flavours/glitch/actions/timelines.js
@@ -119,6 +119,7 @@ export const refreshDirectTimeline = () => refreshTimeline('direct', '/api
export const refreshAccountTimeline = accountId => refreshTimeline(`account:${accountId}`, `/api/v1/accounts/${accountId}/statuses`);
export const refreshAccountMediaTimeline = accountId => refreshTimeline(`account:${accountId}:media`, `/api/v1/accounts/${accountId}/statuses`, { only_media: true });
export const refreshHashtagTimeline = hashtag => refreshTimeline(`hashtag:${hashtag}`, `/api/v1/timelines/tag/${hashtag}`);
+export const refreshListTimeline = id => refreshTimeline(`list:${id}`, `/api/v1/timelines/list/${id}`);
export function refreshTimelineFail(timeline, error, skipLoading) {
return {
@@ -160,6 +161,7 @@ export const expandDirectTimeline = () => expandTimeline('direct', '/api/v
export const expandAccountTimeline = accountId => expandTimeline(`account:${accountId}`, `/api/v1/accounts/${accountId}/statuses`);
export const expandAccountMediaTimeline = accountId => expandTimeline(`account:${accountId}:media`, `/api/v1/accounts/${accountId}/statuses`, { only_media: true });
export const expandHashtagTimeline = hashtag => expandTimeline(`hashtag:${hashtag}`, `/api/v1/timelines/tag/${hashtag}`);
+export const expandListTimeline = id => expandTimeline(`list:${id}`, `/api/v1/timelines/list/${id}`);
export function expandTimelineRequest(timeline) {
return {
diff --git a/app/javascript/flavours/glitch/components/autosuggest_textarea.js b/app/javascript/flavours/glitch/components/autosuggest_textarea.js
index 551528e5ace..a29b2c9c57e 100644
--- a/app/javascript/flavours/glitch/components/autosuggest_textarea.js
+++ b/app/javascript/flavours/glitch/components/autosuggest_textarea.js
@@ -209,6 +209,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
onBlur={this.onBlur}
onPaste={this.onPaste}
style={style}
+ aria-autocomplete='list'
/>
diff --git a/app/javascript/flavours/glitch/features/getting_started/index.js b/app/javascript/flavours/glitch/features/getting_started/index.js
index 2af0fcf48d0..47142fdd12b 100644
--- a/app/javascript/flavours/glitch/features/getting_started/index.js
+++ b/app/javascript/flavours/glitch/features/getting_started/index.js
@@ -29,6 +29,8 @@ const messages = defineMessages({
info: { id: 'navigation_bar.info', defaultMessage: 'Extended information' },
show_me_around: { id: 'getting_started.onboarding', defaultMessage: 'Show me around' },
pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned toots' },
+ lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' },
+ keyboard_shortcuts: { id: 'navigation_bar.keyboard_shortcuts', defaultMessage: 'Keyboard shortcuts' },
});
const mapStateToProps = state => ({
@@ -87,6 +89,7 @@ export default class GettingStarted extends ImmutablePureComponent {
navItems = navItems.concat([
,
,
+ ,
]);
if (myAccount.get('locked')) {
diff --git a/app/javascript/flavours/glitch/features/list_editor/components/account.js b/app/javascript/flavours/glitch/features/list_editor/components/account.js
new file mode 100644
index 00000000000..f48df759dd5
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/list_editor/components/account.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { makeGetAccount } from 'flavours/glitch/selectors';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import Avatar from 'flavours/glitch/components/avatar';
+import DisplayName from 'flavours/glitch/components/display_name';
+import IconButton from 'flavours/glitch/components/icon_button';
+import { defineMessages, injectIntl } from 'react-intl';
+import { removeFromListEditor, addToListEditor } from 'flavours/glitch/actions/lists';
+
+const messages = defineMessages({
+ remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
+ add: { id: 'lists.account.add', defaultMessage: 'Add to list' },
+});
+
+const makeMapStateToProps = () => {
+ const getAccount = makeGetAccount();
+
+ const mapStateToProps = (state, { accountId, added }) => ({
+ account: getAccount(state, accountId),
+ added: typeof added === 'undefined' ? state.getIn(['listEditor', 'accounts', 'items']).includes(accountId) : added,
+ });
+
+ return mapStateToProps;
+};
+
+const mapDispatchToProps = (dispatch, { accountId }) => ({
+ onRemove: () => dispatch(removeFromListEditor(accountId)),
+ onAdd: () => dispatch(addToListEditor(accountId)),
+});
+
+@connect(makeMapStateToProps, mapDispatchToProps)
+@injectIntl
+export default 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 = ;
+ } else {
+ button = ;
+ }
+
+ return (
+
+ );
+ }
+
+}
diff --git a/app/javascript/flavours/glitch/features/list_editor/components/search.js b/app/javascript/flavours/glitch/features/list_editor/components/search.js
new file mode 100644
index 00000000000..45c4d0f2ecd
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/list_editor/components/search.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { defineMessages, injectIntl } from 'react-intl';
+import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from '../../../actions/lists';
+import classNames from 'classnames';
+
+const messages = defineMessages({
+ search: { id: 'lists.search', defaultMessage: 'Search among people you follow' },
+});
+
+const mapStateToProps = state => ({
+ value: state.getIn(['listEditor', 'suggestions', 'value']),
+});
+
+const mapDispatchToProps = dispatch => ({
+ onSubmit: value => dispatch(fetchListSuggestions(value)),
+ onClear: () => dispatch(clearListSuggestions()),
+ onChange: value => dispatch(changeListSuggestions(value)),
+});
+
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+export default class Search extends React.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 (
+
+
+
+
+
+
+
+
+ );
+ }
+
+}
diff --git a/app/javascript/flavours/glitch/features/list_editor/index.js b/app/javascript/flavours/glitch/features/list_editor/index.js
new file mode 100644
index 00000000000..7f9c6b0e991
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/list_editor/index.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { connect } from 'react-redux';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { injectIntl } from 'react-intl';
+import { setupListEditor, clearListSuggestions, resetListEditor } from 'flavours/glitch/actions/lists';
+import Account from './components/account';
+import Search from './components/search';
+import Motion from 'flavours/glitch/util/optional_motion';
+import spring from 'react-motion/lib/spring';
+
+const mapStateToProps = state => ({
+ title: state.getIn(['listEditor', 'title']),
+ accountIds: state.getIn(['listEditor', 'accounts', 'items']),
+ searchAccountIds: state.getIn(['listEditor', 'suggestions', 'items']),
+});
+
+const mapDispatchToProps = dispatch => ({
+ onInitialize: listId => dispatch(setupListEditor(listId)),
+ onClear: () => dispatch(clearListSuggestions()),
+ onReset: () => dispatch(resetListEditor()),
+});
+
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+export default class ListEditor extends ImmutablePureComponent {
+
+ static propTypes = {
+ listId: PropTypes.string.isRequired,
+ onClose: PropTypes.func.isRequired,
+ intl: PropTypes.object.isRequired,
+ onInitialize: PropTypes.func.isRequired,
+ onClear: PropTypes.func.isRequired,
+ onReset: PropTypes.func.isRequired,
+ title: PropTypes.string.isRequired,
+ accountIds: ImmutablePropTypes.list.isRequired,
+ searchAccountIds: ImmutablePropTypes.list.isRequired,
+ };
+
+ componentDidMount () {
+ const { onInitialize, listId } = this.props;
+ onInitialize(listId);
+ }
+
+ componentWillUnmount () {
+ const { onReset } = this.props;
+ onReset();
+ }
+
+ render () {
+ const { title, accountIds, searchAccountIds, onClear } = this.props;
+ const showSearch = searchAccountIds.size > 0;
+
+ return (
+
+
{title}
+
+
+
+
+
+ {accountIds.map(accountId =>
)}
+
+
+ {showSearch &&
}
+
+
+ {({ x }) =>
+
+ {searchAccountIds.map(accountId =>
)}
+
+ }
+
+
+
+ );
+ }
+
+}
diff --git a/app/javascript/flavours/glitch/features/list_timeline/index.js b/app/javascript/flavours/glitch/features/list_timeline/index.js
new file mode 100644
index 00000000000..bcc752d34f1
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/list_timeline/index.js
@@ -0,0 +1,170 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container';
+import Column from 'flavours/glitch/components/column';
+import ColumnHeader from 'flavours/glitch/components/column_header';
+import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { connectListStream } from 'flavours/glitch/actions/streaming';
+import { refreshListTimeline, expandListTimeline } from 'flavours/glitch/actions/timelines';
+import { fetchList, deleteList } from 'flavours/glitch/actions/lists';
+import { openModal } from 'flavours/glitch/actions/modal';
+import MissingIndicator from 'flavours/glitch/components/missing_indicator';
+import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
+
+const messages = defineMessages({
+ deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
+ deleteConfirm: { id: 'confirmations.delete_list.confirm', defaultMessage: 'Delete' },
+});
+
+const mapStateToProps = (state, props) => ({
+ list: state.getIn(['lists', props.params.id]),
+ hasUnread: state.getIn(['timelines', `list:${props.params.id}`, 'unread']) > 0,
+});
+
+@connect(mapStateToProps)
+@injectIntl
+export default class ListTimeline extends React.PureComponent {
+
+ static contextTypes = {
+ router: PropTypes.object,
+ };
+
+ static propTypes = {
+ params: PropTypes.object.isRequired,
+ dispatch: PropTypes.func.isRequired,
+ columnId: PropTypes.string,
+ hasUnread: PropTypes.bool,
+ multiColumn: PropTypes.bool,
+ list: PropTypes.oneOfType([ImmutablePropTypes.map, PropTypes.bool]),
+ intl: PropTypes.object.isRequired,
+ };
+
+ handlePin = () => {
+ const { columnId, dispatch } = this.props;
+
+ if (columnId) {
+ dispatch(removeColumn(columnId));
+ } else {
+ dispatch(addColumn('LIST', { id: this.props.params.id }));
+ this.context.router.history.push('/');
+ }
+ }
+
+ handleMove = (dir) => {
+ const { columnId, dispatch } = this.props;
+ dispatch(moveColumn(columnId, dir));
+ }
+
+ handleHeaderClick = () => {
+ this.column.scrollTop();
+ }
+
+ componentDidMount () {
+ const { dispatch } = this.props;
+ const { id } = this.props.params;
+
+ dispatch(fetchList(id));
+ dispatch(refreshListTimeline(id));
+
+ this.disconnect = dispatch(connectListStream(id));
+ }
+
+ componentWillUnmount () {
+ if (this.disconnect) {
+ this.disconnect();
+ this.disconnect = null;
+ }
+ }
+
+ setRef = c => {
+ this.column = c;
+ }
+
+ handleLoadMore = () => {
+ const { id } = this.props.params;
+ this.props.dispatch(expandListTimeline(id));
+ }
+
+ handleEditClick = () => {
+ this.props.dispatch(openModal('LIST_EDITOR', { listId: this.props.params.id }));
+ }
+
+ handleDeleteClick = () => {
+ const { dispatch, columnId, intl } = this.props;
+ const { id } = this.props.params;
+
+ dispatch(openModal('CONFIRM', {
+ message: intl.formatMessage(messages.deleteMessage),
+ confirm: intl.formatMessage(messages.deleteConfirm),
+ onConfirm: () => {
+ dispatch(deleteList(id));
+
+ if (!!columnId) {
+ dispatch(removeColumn(columnId));
+ } else {
+ this.context.router.history.push('/lists');
+ }
+ },
+ }));
+ }
+
+ render () {
+ const { hasUnread, columnId, multiColumn, list } = this.props;
+ const { id } = this.props.params;
+ const pinned = !!columnId;
+ const title = list ? list.get('title') : id;
+
+ if (typeof list === 'undefined') {
+ return (
+
+
+
+ );
+ } else if (list === false) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ }
+ />
+
+ );
+ }
+
+}
diff --git a/app/javascript/flavours/glitch/features/lists/components/new_list_form.js b/app/javascript/flavours/glitch/features/lists/components/new_list_form.js
new file mode 100644
index 00000000000..61fcbeaf977
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/lists/components/new_list_form.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { changeListEditorTitle, submitListEditor } from 'flavours/glitch/actions/lists';
+import IconButton from 'flavours/glitch/components/icon_button';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+ label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' },
+ title: { id: 'lists.new.create', defaultMessage: 'Add list' },
+});
+
+const mapStateToProps = state => ({
+ value: state.getIn(['listEditor', 'title']),
+ disabled: state.getIn(['listEditor', 'isSubmitting']),
+});
+
+const mapDispatchToProps = dispatch => ({
+ onChange: value => dispatch(changeListEditorTitle(value)),
+ onSubmit: () => dispatch(submitListEditor(true)),
+});
+
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+export default class NewListForm extends React.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 (
+
+ );
+ }
+
+}
diff --git a/app/javascript/flavours/glitch/features/lists/index.js b/app/javascript/flavours/glitch/features/lists/index.js
new file mode 100644
index 00000000000..c82b370bc5f
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/lists/index.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
+import Column from 'flavours/glitch/features/ui/components/column';
+import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim';
+import { fetchLists } from 'flavours/glitch/actions/lists';
+import { defineMessages, injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import ColumnLink from 'flavours/glitch/features/ui/components/column_link';
+import ColumnSubheading from 'flavours/glitch/features/ui/components/column_subheading';
+import NewListForm from './components/new_list_form';
+import { createSelector } from 'reselect';
+
+const messages = defineMessages({
+ heading: { id: 'column.lists', defaultMessage: 'Lists' },
+ subheading: { id: 'lists.subheading', defaultMessage: 'Your lists' },
+});
+
+const getOrderedLists = createSelector([state => state.get('lists')], lists => {
+ if (!lists) {
+ return lists;
+ }
+
+ return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
+});
+
+const mapStateToProps = state => ({
+ lists: getOrderedLists(state),
+});
+
+@connect(mapStateToProps)
+@injectIntl
+export default class Lists extends ImmutablePureComponent {
+
+ static propTypes = {
+ params: PropTypes.object.isRequired,
+ dispatch: PropTypes.func.isRequired,
+ lists: ImmutablePropTypes.list,
+ intl: PropTypes.object.isRequired,
+ };
+
+ componentWillMount () {
+ this.props.dispatch(fetchLists());
+ }
+
+ render () {
+ const { intl, lists } = this.props;
+
+ if (!lists) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ {lists.map(list =>
+
+ )}
+
+
+ );
+ }
+
+}
diff --git a/app/javascript/flavours/glitch/features/ui/components/columns_area.js b/app/javascript/flavours/glitch/features/ui/components/columns_area.js
index 264f60724da..4167ff693ef 100644
--- a/app/javascript/flavours/glitch/features/ui/components/columns_area.js
+++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.js
@@ -11,7 +11,7 @@ import BundleContainer from '../containers/bundle_container';
import ColumnLoading from './column_loading';
import DrawerLoading from './drawer_loading';
import BundleColumnError from './bundle_column_error';
-import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, DirectTimeline, FavouritedStatuses } from 'flavours/glitch/util/async-components';
+import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, DirectTimeline, FavouritedStatuses, ListTimeline } from 'flavours/glitch/util/async-components';
import detectPassiveEvents from 'detect-passive-events';
import { scrollRight } from 'flavours/glitch/util/scroll';
@@ -25,6 +25,7 @@ const componentMap = {
'HASHTAG': HashtagTimeline,
'DIRECT': DirectTimeline,
'FAVOURITES': FavouritedStatuses,
+ 'LIST': ListTimeline,
};
@component => injectIntl(component, { withRef: true })
diff --git a/app/javascript/flavours/glitch/features/ui/components/modal_root.js b/app/javascript/flavours/glitch/features/ui/components/modal_root.js
index 61b2392839d..679578b7599 100644
--- a/app/javascript/flavours/glitch/features/ui/components/modal_root.js
+++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.js
@@ -15,6 +15,7 @@ import {
ReportModal,
SettingsModal,
EmbedModal,
+ ListEditor,
} from 'flavours/glitch/util/async-components';
const MODAL_COMPONENTS = {
@@ -29,6 +30,7 @@ const MODAL_COMPONENTS = {
'SETTINGS': SettingsModal,
'ACTIONS': () => Promise.resolve({ default: ActionsModal }),
'EMBED': EmbedModal,
+ 'LIST_EDITOR': ListEditor,
};
export default class ModalRoot extends React.PureComponent {
diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js
index 4a19829164b..698ae996c2e 100644
--- a/app/javascript/flavours/glitch/features/ui/index.js
+++ b/app/javascript/flavours/glitch/features/ui/index.js
@@ -35,9 +35,11 @@ import {
FollowRequests,
GenericNotFound,
FavouritedStatuses,
+ ListTimeline,
Blocks,
Mutes,
PinnedStatuses,
+ Lists,
} from 'flavours/glitch/util/async-components';
import { HotKeys } from 'react-hotkeys';
import { me } from 'flavours/glitch/util/initial_state';
@@ -407,7 +409,7 @@ export default class UI extends React.Component {
-
+
@@ -425,6 +427,7 @@ export default class UI extends React.Component {
+
diff --git a/app/javascript/flavours/glitch/reducers/accounts.js b/app/javascript/flavours/glitch/reducers/accounts.js
index 5113a281aa5..9ca05881a33 100644
--- a/app/javascript/flavours/glitch/reducers/accounts.js
+++ b/app/javascript/flavours/glitch/reducers/accounts.js
@@ -43,6 +43,10 @@ import {
FAVOURITED_STATUSES_FETCH_SUCCESS,
FAVOURITED_STATUSES_EXPAND_SUCCESS,
} from 'flavours/glitch/actions/favourites';
+import {
+ LIST_ACCOUNTS_FETCH_SUCCESS,
+ LIST_EDITOR_SUGGESTIONS_READY,
+} from 'flavours/glitch/actions/lists';
import { STORE_HYDRATE } from 'flavours/glitch/actions/store';
import emojify from 'flavours/glitch/util/emoji';
import { Map as ImmutableMap, fromJS } from 'immutable';
@@ -110,6 +114,8 @@ export default function accounts(state = initialState, action) {
case BLOCKS_EXPAND_SUCCESS:
case MUTES_FETCH_SUCCESS:
case MUTES_EXPAND_SUCCESS:
+ case LIST_ACCOUNTS_FETCH_SUCCESS:
+ case LIST_EDITOR_SUGGESTIONS_READY:
return action.accounts ? normalizeAccounts(state, action.accounts) : state;
case NOTIFICATIONS_REFRESH_SUCCESS:
case NOTIFICATIONS_EXPAND_SUCCESS:
diff --git a/app/javascript/flavours/glitch/reducers/accounts_counters.js b/app/javascript/flavours/glitch/reducers/accounts_counters.js
index a9aebd26fce..0fd985a081f 100644
--- a/app/javascript/flavours/glitch/reducers/accounts_counters.js
+++ b/app/javascript/flavours/glitch/reducers/accounts_counters.js
@@ -45,6 +45,10 @@ import {
FAVOURITED_STATUSES_FETCH_SUCCESS,
FAVOURITED_STATUSES_EXPAND_SUCCESS,
} from 'flavours/glitch/actions/favourites';
+import {
+ LIST_ACCOUNTS_FETCH_SUCCESS,
+ LIST_EDITOR_SUGGESTIONS_READY,
+} from 'flavours/glitch/actions/lists';
import { STORE_HYDRATE } from 'flavours/glitch/actions/store';
import { Map as ImmutableMap, fromJS } from 'immutable';
@@ -106,6 +110,8 @@ export default function accountsCounters(state = initialState, action) {
case BLOCKS_EXPAND_SUCCESS:
case MUTES_FETCH_SUCCESS:
case MUTES_EXPAND_SUCCESS:
+ case LIST_ACCOUNTS_FETCH_SUCCESS:
+ case LIST_EDITOR_SUGGESTIONS_READY:
return action.accounts ? normalizeAccounts(state, action.accounts) : state;
case NOTIFICATIONS_REFRESH_SUCCESS:
case NOTIFICATIONS_EXPAND_SUCCESS:
diff --git a/app/javascript/flavours/glitch/reducers/index.js b/app/javascript/flavours/glitch/reducers/index.js
index aa748421a3d..e9c8d7c1df1 100644
--- a/app/javascript/flavours/glitch/reducers/index.js
+++ b/app/javascript/flavours/glitch/reducers/index.js
@@ -23,6 +23,8 @@ import media_attachments from './media_attachments';
import notifications from './notifications';
import height_cache from './height_cache';
import custom_emojis from './custom_emojis';
+import lists from './lists';
+import listEditor from './list_editor';
const reducers = {
timelines,
@@ -49,6 +51,8 @@ const reducers = {
notifications,
height_cache,
custom_emojis,
+ lists,
+ listEditor,
};
export default combineReducers(reducers);
diff --git a/app/javascript/flavours/glitch/reducers/list_editor.js b/app/javascript/flavours/glitch/reducers/list_editor.js
new file mode 100644
index 00000000000..02a0dabb147
--- /dev/null
+++ b/app/javascript/flavours/glitch/reducers/list_editor.js
@@ -0,0 +1,89 @@
+import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+import {
+ LIST_CREATE_REQUEST,
+ LIST_CREATE_FAIL,
+ LIST_CREATE_SUCCESS,
+ LIST_UPDATE_REQUEST,
+ LIST_UPDATE_FAIL,
+ LIST_UPDATE_SUCCESS,
+ LIST_EDITOR_RESET,
+ LIST_EDITOR_SETUP,
+ LIST_EDITOR_TITLE_CHANGE,
+ LIST_ACCOUNTS_FETCH_REQUEST,
+ LIST_ACCOUNTS_FETCH_SUCCESS,
+ LIST_ACCOUNTS_FETCH_FAIL,
+ LIST_EDITOR_SUGGESTIONS_READY,
+ LIST_EDITOR_SUGGESTIONS_CLEAR,
+ LIST_EDITOR_SUGGESTIONS_CHANGE,
+ LIST_EDITOR_ADD_SUCCESS,
+ LIST_EDITOR_REMOVE_SUCCESS,
+} from '../actions/lists';
+
+const initialState = ImmutableMap({
+ listId: null,
+ isSubmitting: false,
+ title: '',
+
+ accounts: ImmutableMap({
+ items: ImmutableList(),
+ loaded: false,
+ isLoading: false,
+ }),
+
+ suggestions: ImmutableMap({
+ value: '',
+ items: ImmutableList(),
+ }),
+});
+
+export default function listEditorReducer(state = initialState, action) {
+ switch(action.type) {
+ case LIST_EDITOR_RESET:
+ return initialState;
+ case LIST_EDITOR_SETUP:
+ return state.withMutations(map => {
+ map.set('listId', action.list.get('id'));
+ map.set('title', action.list.get('title'));
+ map.set('isSubmitting', false);
+ });
+ case LIST_EDITOR_TITLE_CHANGE:
+ return state.set('title', action.value);
+ case LIST_CREATE_REQUEST:
+ case LIST_UPDATE_REQUEST:
+ return state.set('isSubmitting', true);
+ case LIST_CREATE_FAIL:
+ case LIST_UPDATE_FAIL:
+ return state.set('isSubmitting', false);
+ case LIST_CREATE_SUCCESS:
+ case LIST_UPDATE_SUCCESS:
+ return state.withMutations(map => {
+ map.set('isSubmitting', false);
+ map.set('listId', action.list.id);
+ });
+ case LIST_ACCOUNTS_FETCH_REQUEST:
+ return state.setIn(['accounts', 'isLoading'], true);
+ case LIST_ACCOUNTS_FETCH_FAIL:
+ return state.setIn(['accounts', 'isLoading'], false);
+ case LIST_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 LIST_EDITOR_SUGGESTIONS_CHANGE:
+ return state.setIn(['suggestions', 'value'], action.value);
+ case LIST_EDITOR_SUGGESTIONS_READY:
+ return state.setIn(['suggestions', 'items'], ImmutableList(action.accounts.map(item => item.id)));
+ case LIST_EDITOR_SUGGESTIONS_CLEAR:
+ return state.update('suggestions', suggestions => suggestions.withMutations(map => {
+ map.set('items', ImmutableList());
+ map.set('value', '');
+ }));
+ case LIST_EDITOR_ADD_SUCCESS:
+ return state.updateIn(['accounts', 'items'], list => list.unshift(action.accountId));
+ case LIST_EDITOR_REMOVE_SUCCESS:
+ return state.updateIn(['accounts', 'items'], list => list.filterNot(item => item === action.accountId));
+ default:
+ return state;
+ }
+};
diff --git a/app/javascript/flavours/glitch/reducers/lists.js b/app/javascript/flavours/glitch/reducers/lists.js
new file mode 100644
index 00000000000..f30ffbcbdbf
--- /dev/null
+++ b/app/javascript/flavours/glitch/reducers/lists.js
@@ -0,0 +1,37 @@
+import {
+ LIST_FETCH_SUCCESS,
+ LIST_FETCH_FAIL,
+ LISTS_FETCH_SUCCESS,
+ LIST_CREATE_SUCCESS,
+ LIST_UPDATE_SUCCESS,
+ LIST_DELETE_SUCCESS,
+} from '../actions/lists';
+import { Map as ImmutableMap, fromJS } from 'immutable';
+
+const initialState = ImmutableMap();
+
+const normalizeList = (state, list) => state.set(list.id, fromJS(list));
+
+const normalizeLists = (state, lists) => {
+ lists.forEach(list => {
+ state = normalizeList(state, list);
+ });
+
+ return state;
+};
+
+export default function lists(state = initialState, action) {
+ switch(action.type) {
+ case LIST_FETCH_SUCCESS:
+ case LIST_CREATE_SUCCESS:
+ case LIST_UPDATE_SUCCESS:
+ return normalizeList(state, action.list);
+ case LISTS_FETCH_SUCCESS:
+ return normalizeLists(state, action.lists);
+ case LIST_DELETE_SUCCESS:
+ case LIST_FETCH_FAIL:
+ return state.set(action.id, false);
+ default:
+ return state;
+ }
+};
diff --git a/app/javascript/flavours/glitch/reducers/settings.js b/app/javascript/flavours/glitch/reducers/settings.js
index 6d5d71217c8..aaf7938df4d 100644
--- a/app/javascript/flavours/glitch/reducers/settings.js
+++ b/app/javascript/flavours/glitch/reducers/settings.js
@@ -2,6 +2,7 @@ import { SETTING_CHANGE, SETTING_SAVE } from 'flavours/glitch/actions/settings';
import { COLUMN_ADD, COLUMN_REMOVE, COLUMN_MOVE } from 'flavours/glitch/actions/columns';
import { STORE_HYDRATE } from 'flavours/glitch/actions/store';
import { EMOJI_USE } from 'flavours/glitch/actions/emojis';
+import { LIST_DELETE_SUCCESS, LIST_FETCH_FAIL } from '../actions/lists';
import { Map as ImmutableMap, fromJS } from 'immutable';
import uuid from 'flavours/glitch/util/uuid';
@@ -92,6 +93,8 @@ const moveColumn = (state, uuid, direction) => {
const updateFrequentEmojis = (state, emoji) => state.update('frequentlyUsedEmojis', ImmutableMap(), map => map.update(emoji.id, 0, count => count + 1)).set('saved', false);
+const filterDeadListColumns = (state, listId) => state.update('columns', columns => columns.filterNot(column => column.get('id') === 'LIST' && column.get('params').get('id') === listId));
+
export default function settings(state = initialState, action) {
switch(action.type) {
case STORE_HYDRATE:
@@ -114,6 +117,10 @@ export default function settings(state = initialState, action) {
return updateFrequentEmojis(state, action.emoji);
case SETTING_SAVE:
return state.set('saved', true);
+ case LIST_FETCH_FAIL:
+ return action.error.response.status === 404 ? filterDeadListColumns(state, action.id) : state;
+ case LIST_DELETE_SUCCESS:
+ return filterDeadListColumns(state, action.id);
default:
return state;
}
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index 7aeab0a6af9..e171b72c136 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -2542,6 +2542,10 @@ button.icon-button.active i.fa-retweet {
margin-left: 0;
}
+.column-header__links .text-btn {
+ margin-right: 10px;
+}
+
.column-header__button {
background: lighten($ui-base-color, 4%);
border: 0;
@@ -2664,6 +2668,14 @@ button.icon-button.active i.fa-retweet {
overflow-y: hidden;
}
+ hr {
+ height: 0;
+ background: transparent;
+ border: 0;
+ border-top: 1px solid lighten($ui-base-color, 12%);
+ margin: 10px 0;
+ }
+
// notif cleaning drawer
&.ncd {
transition: none;
@@ -4827,6 +4839,98 @@ noscript {
}
}
+
+.column-inline-form {
+ padding: 7px 15px;
+ padding-right: 5px;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ background: lighten($ui-base-color, 4%);
+
+ label {
+ flex: 1 1 auto;
+
+ input {
+ width: 100%;
+ margin-bottom: 6px;
+
+ &:focus {
+ outline: 0;
+ }
+ }
+ }
+
+ .icon-button {
+ flex: 0 0 auto;
+ margin-left: 5px;
+ }
+}
+
+.drawer__backdrop {
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba($base-overlay-background, 0.5);
+}
+
+.list-editor {
+ background: $ui-base-color;
+ flex-direction: column;
+ border-radius: 8px;
+ box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+ width: 380px;
+ overflow: hidden;
+
+ @media screen and (max-width: 420px) {
+ width: 90%;
+ }
+
+ h4 {
+ padding: 15px 0;
+ background: lighten($ui-base-color, 13%);
+ font-weight: 500;
+ font-size: 16px;
+ text-align: center;
+ border-radius: 8px 8px 0 0;
+ }
+
+ .drawer__pager {
+ height: 50vh;
+ }
+
+ .drawer__inner {
+ border-radius: 0 0 8px 8px;
+
+ &.backdrop {
+ width: calc(100% - 60px);
+ box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+ border-radius: 0 0 0 8px;
+ }
+ }
+
+ &__accounts {
+ overflow-y: auto;
+ }
+
+ .account__display-name {
+ &:hover strong {
+ text-decoration: none;
+ }
+ }
+
+ .account__avatar {
+ cursor: default;
+ }
+
+ .search {
+ margin-bottom: 0;
+ }
+}
+
@import 'doodle';
@import 'emoji_picker';
@import 'local_settings';
diff --git a/app/javascript/flavours/glitch/util/async-components.js b/app/javascript/flavours/glitch/util/async-components.js
index b7ac4d3ec50..e4c991f011c 100644
--- a/app/javascript/flavours/glitch/util/async-components.js
+++ b/app/javascript/flavours/glitch/util/async-components.js
@@ -26,6 +26,18 @@ export function HashtagTimeline () {
return import(/* webpackChunkName: "flavours/glitch/async/hashtag_timeline" */'flavours/glitch/features/hashtag_timeline');
}
+export function ListTimeline () {
+ return import(/* webpackChunkName: "features/list_timeline" */'flavours/glitch/features/list_timeline');
+}
+
+export function Lists () {
+ return import(/* webpackChunkName: "features/lists" */'flavours/glitch/features/lists');
+}
+
+export function ListEditor () {
+ return import(/* webpackChunkName: "features/list_editor" */'flavours/glitch/features/list_editor');
+}
+
export function DirectTimeline() {
return import(/* webpackChunkName: "flavours/glitch/async/direct_timeline" */'flavours/glitch/features/direct_timeline');
}