diff --git a/app/soapbox/actions/settings.js b/app/soapbox/actions/settings.js
index 34b266262..5beba817a 100644
--- a/app/soapbox/actions/settings.js
+++ b/app/soapbox/actions/settings.js
@@ -127,6 +127,13 @@ export const defaultSettings = ImmutableMap({
}),
}),
+ account_timeline: ImmutableMap({
+ shows: ImmutableMap({
+ reblog: true,
+ pinned: true,
+ }),
+ }),
+
trends: ImmutableMap({
show: true,
}),
diff --git a/app/soapbox/features/account_timeline/components/column_settings.js b/app/soapbox/features/account_timeline/components/column_settings.js
new file mode 100644
index 000000000..7836c01f0
--- /dev/null
+++ b/app/soapbox/features/account_timeline/components/column_settings.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import SettingToggle from '../../notifications/components/setting_toggle';
+
+export default @injectIntl
+class ColumnSettings extends React.PureComponent {
+
+ static propTypes = {
+ settings: ImmutablePropTypes.map.isRequired,
+ onChange: PropTypes.func.isRequired,
+ intl: PropTypes.object.isRequired,
+ };
+
+ render() {
+ const { settings, onChange } = this.props;
+
+ return (
+
+ );
+ }
+
+}
diff --git a/app/soapbox/features/account_timeline/containers/column_settings_container.js b/app/soapbox/features/account_timeline/containers/column_settings_container.js
new file mode 100644
index 000000000..e5045e54e
--- /dev/null
+++ b/app/soapbox/features/account_timeline/containers/column_settings_container.js
@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import ColumnSettings from '../components/column_settings';
+import { getSettings, changeSetting } from '../../../actions/settings';
+
+const mapStateToProps = state => ({
+ settings: getSettings(state).get('account_timeline'),
+});
+
+const mapDispatchToProps = (dispatch) => {
+ return {
+ onChange(key, checked) {
+ dispatch(changeSetting(['account_timeline', ...key], checked));
+ },
+ };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings);
diff --git a/app/soapbox/features/account_timeline/index.js b/app/soapbox/features/account_timeline/index.js
index 313b42c27..ba0040623 100644
--- a/app/soapbox/features/account_timeline/index.js
+++ b/app/soapbox/features/account_timeline/index.js
@@ -4,9 +4,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { fetchAccount, fetchAccountByUsername } from '../../actions/accounts';
import { expandAccountFeaturedTimeline, expandAccountTimeline } from '../../actions/timelines';
+import Icon from 'soapbox/components/icon';
import StatusList from '../../components/status_list';
import LoadingIndicator from '../../components/loading_indicator';
import Column from '../ui/components/column';
+import ColumnSettingsContainer from './containers/column_settings_container';
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { FormattedMessage } from 'react-intl';
@@ -15,47 +17,57 @@ import MissingIndicator from 'soapbox/components/missing_indicator';
import { NavLink } from 'react-router-dom';
import { fetchPatronAccount } from '../../actions/patron';
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
+import { getSettings } from 'soapbox/actions/settings';
+import { makeGetStatusIds } from 'soapbox/selectors';
+import classNames from 'classnames';
+
+const makeMapStateToProps = () => {
+ const getStatusIds = makeGetStatusIds();
+
+ const mapStateToProps = (state, { params, withReplies = false }) => {
+ const username = params.username || '';
+ const me = state.get('me');
+ const accounts = state.getIn(['accounts']);
+ const accountFetchError = (state.getIn(['accounts', -1, 'username'], '').toLowerCase() === username.toLowerCase());
+ const soapboxConfig = getSoapboxConfig(state);
+
+ let accountId = -1;
+ let accountUsername = username;
+ let accountApId = null;
+ if (accountFetchError) {
+ accountId = null;
+ } else {
+ const account = accounts.find(acct => username.toLowerCase() === acct.getIn(['acct'], '').toLowerCase());
+ accountId = account ? account.getIn(['id'], null) : -1;
+ accountUsername = account ? account.getIn(['acct'], '') : '';
+ accountApId = account ? account.get('url') : '';
+ }
-const mapStateToProps = (state, { params, withReplies = false }) => {
- const username = params.username || '';
- const me = state.get('me');
- const accounts = state.getIn(['accounts']);
- const accountFetchError = (state.getIn(['accounts', -1, 'username'], '').toLowerCase() === username.toLowerCase());
- const soapboxConfig = getSoapboxConfig(state);
-
- let accountId = -1;
- let accountUsername = username;
- let accountApId = null;
- if (accountFetchError) {
- accountId = null;
- } else {
- const account = accounts.find(acct => username.toLowerCase() === acct.getIn(['acct'], '').toLowerCase());
- accountId = account ? account.getIn(['id'], null) : -1;
- accountUsername = account ? account.getIn(['acct'], '') : '';
- accountApId = account ? account.get('url') : '';
- }
-
- const path = withReplies ? `${accountId}:with_replies` : accountId;
-
- const isBlocked = state.getIn(['relationships', accountId, 'blocked_by'], false);
- const unavailable = (me === accountId) ? false : isBlocked;
-
- return {
- accountId,
- unavailable,
- accountUsername,
- accountApId,
- isAccount: !!state.getIn(['accounts', accountId]),
- statusIds: state.getIn(['timelines', `account:${path}`, 'items'], ImmutableOrderedSet()),
- featuredStatusIds: withReplies ? ImmutableOrderedSet() : state.getIn(['timelines', `account:${accountId}:pinned`, 'items'], ImmutableOrderedSet()),
- isLoading: state.getIn(['timelines', `account:${path}`, 'isLoading']),
- hasMore: state.getIn(['timelines', `account:${path}`, 'hasMore']),
- me,
- patronEnabled: soapboxConfig.getIn(['extensions', 'patron', 'enabled']),
+ const path = withReplies ? `${accountId}:with_replies` : accountId;
+
+ const isBlocked = state.getIn(['relationships', accountId, 'blocked_by'], false);
+ const unavailable = (me === accountId) ? false : isBlocked;
+ const showPins = getSettings(state).getIn(['account_timeline', 'shows', 'pinned']) && !withReplies;
+
+ return {
+ accountId,
+ unavailable,
+ accountUsername,
+ accountApId,
+ isAccount: !!state.getIn(['accounts', accountId]),
+ statusIds: getStatusIds(state, { type: `account:${path}`, prefix: 'account_timeline' }),
+ featuredStatusIds: showPins ? getStatusIds(state, { type: `account:${accountId}:pinned`, prefix: 'account_timeline' }) : ImmutableOrderedSet(),
+ isLoading: state.getIn(['timelines', `account:${path}`, 'isLoading']),
+ hasMore: state.getIn(['timelines', `account:${path}`, 'hasMore']),
+ me,
+ patronEnabled: soapboxConfig.getIn(['extensions', 'patron', 'enabled']),
+ };
};
+
+ return mapStateToProps;
};
-export default @connect(mapStateToProps)
+export default @connect(makeMapStateToProps)
class AccountTimeline extends ImmutablePureComponent {
static propTypes = {
@@ -70,6 +82,11 @@ class AccountTimeline extends ImmutablePureComponent {
unavailable: PropTypes.bool,
};
+ state = {
+ collapsed: true,
+ animating: false,
+ }
+
componentDidMount() {
const { params: { username }, accountId, accountApId, withReplies, me, patronEnabled } = this.props;
@@ -115,8 +132,18 @@ class AccountTimeline extends ImmutablePureComponent {
}
}
+ handleToggleClick = (e) => {
+ e.stopPropagation();
+ this.setState({ collapsed: !this.state.collapsed, animating: true });
+ }
+
+ handleTransitionEnd = () => {
+ this.setState({ animating: false });
+ }
+
render() {
const { statusIds, featuredStatusIds, isLoading, hasMore, isAccount, accountId, unavailable, accountUsername } = this.props;
+ const { collapsed, animating } = this.state;
if (!isAccount && accountId !== -1) {
return (
@@ -156,6 +183,16 @@ class AccountTimeline extends ImmutablePureComponent {
+
+
+
+
+
-
- } />
-
-
} />
diff --git a/app/soapbox/features/ui/containers/status_list_container.js b/app/soapbox/features/ui/containers/status_list_container.js
index 95fa64cc2..c5afed275 100644
--- a/app/soapbox/features/ui/containers/status_list_container.js
+++ b/app/soapbox/features/ui/containers/status_list_container.js
@@ -1,25 +1,10 @@
import { connect } from 'react-redux';
import StatusList from '../../../components/status_list';
-import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet } from 'immutable';
-import { createSelector } from 'reselect';
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import { makeGetStatusIds } from 'soapbox/selectors';
import { debounce } from 'lodash';
import { dequeueTimeline } from 'soapbox/actions/timelines';
import { scrollTopTimeline } from '../../../actions/timelines';
-import { getSettings } from 'soapbox/actions/settings';
-import { shouldFilter } from 'soapbox/utils/timelines';
-
-const makeGetStatusIds = () => createSelector([
- (state, { type }) => getSettings(state).get(type, ImmutableMap()),
- (state, { type }) => state.getIn(['timelines', type, 'items'], ImmutableOrderedSet()),
- (state) => state.get('statuses'),
- (state) => state.get('me'),
-], (columnSettings, statusIds, statuses, me) => {
- return statusIds.filter(id => {
- const status = statuses.get(id);
- if (!status) return true;
- return !shouldFilter(status, columnSettings);
- });
-});
const makeMapStateToProps = () => {
const getStatusIds = makeGetStatusIds();
diff --git a/app/soapbox/selectors/index.js b/app/soapbox/selectors/index.js
index 35ee305fb..8a5bf3b20 100644
--- a/app/soapbox/selectors/index.js
+++ b/app/soapbox/selectors/index.js
@@ -6,6 +6,8 @@ import {
} from 'immutable';
import { getDomain } from 'soapbox/utils/accounts';
import ConfigDB from 'soapbox/utils/config_db';
+import { getSettings } from 'soapbox/actions/settings';
+import { shouldFilter } from 'soapbox/utils/timelines';
const getAccountBase = (state, id) => state.getIn(['accounts', id], null);
const getAccountCounters = (state, id) => state.getIn(['accounts_counters', id], null);
@@ -262,3 +264,16 @@ export const makeGetRemoteInstance = () => {
});
});
};
+
+export const makeGetStatusIds = () => createSelector([
+ (state, { type, prefix }) => getSettings(state).get(prefix || type, ImmutableMap()),
+ (state, { type }) => state.getIn(['timelines', type, 'items'], ImmutableOrderedSet()),
+ (state) => state.get('statuses'),
+ (state) => state.get('me'),
+], (columnSettings, statusIds, statuses, me) => {
+ return statusIds.filter(id => {
+ const status = statuses.get(id);
+ if (!status) return true;
+ return !shouldFilter(status, columnSettings);
+ });
+});