group timeline reply filter

app/javascript/gabsocial/features/groups/timeline/components/column_settings.js

@@ -0,0 +1,30 @@
+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 (
+      <div>
+        <span className='column-settings__section'><FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' /></span>
+
+        <div className='column-settings__row'>
+          <SettingToggle prefix='home_timeline' settings={settings} settingPath={['shows', 'reply']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_replies' defaultMessage='Show replies' />} />
+        </div>
+      </div>
+    );
+  }
+
+}

app/javascript/gabsocial/features/groups/timeline/containers/column_settings_container.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+import ColumnSettings from '../components/column_settings';
+import { changeSetting, saveSettings } from '../../../../actions/settings';
+
+const mapStateToProps = state => ({
+  settings: state.getIn(['settings', 'group']),
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onChange (key, checked) {
+    dispatch(changeSetting(['group', ...key], checked));
+  },
+
+  onSave () {
+    dispatch(saveSettings());
+  },
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings);

app/javascript/gabsocial/features/groups/timeline/index.js

@@ -14,9 +14,13 @@ import { me } from 'gabsocial/initial_state';
 import Avatar from '../../../components/avatar';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames';
+import ColumnSettingsContainer from "./containers/column_settings_container";
+import Icon from 'gabsocial/components/icon';
 
 const messages = defineMessages({
   tabLatest: { id: 'group.timeline.tab_latest', defaultMessage: 'Latest' },
+  show: { id: 'group.timeline.show_settings', defaultMessage: 'Show settings' },
+  hide: { id: 'group.timeline.hide_settings', defaultMessage: 'Hide settings' },
 });
 
 const mapStateToProps = (state, props) => ({
@@ -44,6 +48,10 @@ class GroupTimeline extends React.PureComponent {
 		intl: PropTypes.object.isRequired,
 	};
 
+	state = {
+		collapsed: true,
+	}
+
 	componentDidMount () {
 		const { dispatch } = this.props;
 		const { id } = this.props.params;
@@ -65,8 +73,14 @@ class GroupTimeline extends React.PureComponent {
 		this.props.dispatch(expandGroupTimeline(id, { maxId }));
 	}
 
+	handleToggleClick = (e) => {
+		e.stopPropagation();
+		this.setState({ collapsed: !this.state.collapsed });
+	  }
+
 	render () {
 		const { columnId, group, relationships, account, intl } = this.props;
+		const { collapsed } = this.state;
 		const { id } = this.props.params;
 
 		if (typeof group === 'undefined' || !relationships) {
@@ -100,7 +114,24 @@ class GroupTimeline extends React.PureComponent {
 							<Link to={`/groups/${id}`} className={classNames('btn grouped active')}>
 								{intl.formatMessage(messages.tabLatest)}
 							</Link>
+
+							<div className='column-header__buttons'>
+								<button
+									className={classNames('column-header__button', { 'active': !collapsed })} 
+									title={intl.formatMessage(collapsed ? messages.show : messages.hide)}
+									aria-label={intl.formatMessage(collapsed ? messages.show : messages.hide)}
+									aria-pressed={collapsed ? 'false' : 'true'}
+									onClick={this.handleToggleClick}
+								><Icon id='sliders' /></button>
+							</div>
 						</h1>
+						{!collapsed && <div className='column-header__collapsible'>
+							<div className='column-header__collapsible-inner'>
+								<div className='column-header__collapsible__extra'>
+									<ColumnSettingsContainer />
+								</div>
+							</div>
+						</div>}
 					</div>
 
 					<StatusListContainer