Local timeline: restore column settings

app/soapbox/components/sub_navigation.js

@@ -1,15 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 import { throttle } from 'lodash';
 import Icon from 'soapbox/components/icon';
+import IconButton from 'soapbox/components/icon_button';
 import classNames from 'classnames';
 import Helmet from 'soapbox/components/helmet';
+import { openModal } from 'soapbox/actions/modal';
 
-export default class SubNavigation extends React.PureComponent {
+const mapDispatchToProps = (dispatch, { settings: Settings }) => {
+  return {
+    onOpenSettings() {
+      dispatch(openModal('COMPONENT', { component: Settings }));
+    },
+  };
+};
+
+export default @connect(undefined, mapDispatchToProps)
+class SubNavigation extends React.PureComponent {
 
   static propTypes = {
     message: PropTypes.string,
+    settings: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    onOpenSettings: PropTypes.func.isRequired,
   }
 
   static contextTypes = {
@@ -62,12 +76,16 @@ export default class SubNavigation extends React.PureComponent {
     }
   }, 150, { trailing: true });
 
+  handleOpenSettings = () => {
+    this.props.onOpenSettings();
+  }
+
   setRef = c => {
     this.node = c;
   }
 
   render() {
-    const { message } = this.props;
+    const { message, settings: Settings } = this.props;
     const { scrolled } = this.state;
 
     return (
@@ -87,6 +105,11 @@ export default class SubNavigation extends React.PureComponent {
               {message}
             </div>
           )}
+          {Settings && (
+            <div className='sub-navigation__cog'>
+              <IconButton src={require('@tabler/icons/icons/settings.svg')} onClick={this.handleOpenSettings} />
+            </div>
+          )}
         </div>
       </div>
     );

app/soapbox/features/community_timeline/components/column_settings.js

@@ -1,29 +1,46 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
+import IconButton from 'soapbox/components/icon_button';
 import SettingToggle from '../../notifications/components/setting_toggle';
 
+const messages = defineMessages({
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+});
+
 export default @injectIntl
 class ColumnSettings extends React.PureComponent {
 
   static propTypes = {
+    intl: PropTypes.object.isRequired,
     settings: ImmutablePropTypes.map.isRequired,
     onChange: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
   };
 
   render() {
-    const { settings, onChange } = this.props;
+    const { intl, settings, onChange, onClose } = this.props;
 
     return (
-      <div>
-        <div className='column-settings__row'>
-          <SettingToggle prefix='community_timeline' settings={settings} settingPath={['shows', 'reply']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_replies' defaultMessage='Show replies' />} />
+      <div className='column-settings'>
+        <div className='column-settings__header'>
+          <h1 className='column-settings__title'>
+            <FormattedMessage id='community.column_settings.title' defaultMessage='Local timeline settings' />
+          </h1>
+          <div className='column-settings__close'>
+            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
+          </div>
         </div>
 
-        <div className='column-settings__row'>
-          <SettingToggle settings={settings} settingPath={['other', 'onlyMedia']} onChange={onChange} label={<FormattedMessage id='community.column_settings.media_only' defaultMessage='Media Only' />} />
+        <div className='column-settings__content'>
+          <div className='column-settings__row'>
+            <SettingToggle prefix='community_timeline' settings={settings} settingPath={['shows', 'reply']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_replies' defaultMessage='Show replies' />} />
+          </div>
+
+          <div className='column-settings__row'>
+            <SettingToggle settings={settings} settingPath={['other', 'onlyMedia']} onChange={onChange} label={<FormattedMessage id='community.column_settings.media_only' defaultMessage='Media Only' />} />
+          </div>
         </div>
       </div>
     );

app/soapbox/features/community_timeline/index.js

@@ -4,6 +4,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 import StatusListContainer from '../ui/containers/status_list_container';
 import Column from '../../components/column';
+import ColumnSettings from './containers/column_settings_container';
 import { expandCommunityTimeline } from '../../actions/timelines';
 import { connectCommunityStream } from '../../actions/streaming';
 import { getSettings } from 'soapbox/actions/settings';
@@ -74,7 +75,7 @@ class CommunityTimeline extends React.PureComponent {
 
     return (
       <Column label={intl.formatMessage(messages.title)} transparent>
-        <SubNavigation message={intl.formatMessage(messages.title)} />
+        <SubNavigation message={intl.formatMessage(messages.title)} settings={ColumnSettings} />
         <StatusListContainer
           scrollKey={`${timelineId}_timeline`}
           timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}

app/soapbox/features/ui/components/component_modal.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class ComponentModal extends React.PureComponent {
+
+  static propTypes = {
+    onClose: PropTypes.func.isRequired,
+    component: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
+    componentProps: PropTypes.object,
+  }
+
+  static defaultProps = {
+    componentProps: {},
+  }
+
+  render() {
+    const { onClose, component: Component, componentProps } = this.props;
+
+    return (
+      <div className='modal-root__modal component-modal'>
+        <Component onClose={onClose} {...componentProps} />
+      </div>
+    );
+  }
+
+}

app/soapbox/features/ui/components/modal_root.js

@@ -23,6 +23,7 @@ import {
   ComposeModal,
   UnauthorizedModal,
   EditFederationModal,
+  ComponentModal,
 } from '../../../features/ui/util/async-components';
 
 const MODAL_COMPONENTS = {
@@ -43,6 +44,7 @@ const MODAL_COMPONENTS = {
   'UNAUTHORIZED': UnauthorizedModal,
   'CRYPTO_DONATE': CryptoDonateModal,
   'EDIT_FEDERATION': EditFederationModal,
+  'COMPONENT': ComponentModal,
 };
 
 export default class ModalRoot extends React.PureComponent {

app/soapbox/features/ui/util/async-components.js

@@ -202,6 +202,10 @@ export function EmbedModal() {
   return import(/* webpackChunkName: "modals/embed_modal" */'../components/embed_modal');
 }
 
+export function ComponentModal() {
+  return import(/* webpackChunkName: "features/ui" */'../components/component_modal');
+}
+
 export function ListEditor() {
   return import(/* webpackChunkName: "features/list_editor" */'../../list_editor');
 }

app/styles/components/columns.scss

@@ -596,6 +596,45 @@
   font-size: 20px;
 }
 
+.component-modal {
+  @include standard-panel;
+  width: 400px;
+  max-width: calc(100% - 20px);
+}
+
+.column-settings {
+  width: 100%;
+
+  &__header {
+    border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
+    padding: 10px 20px;
+    display: flex;
+    align-items: center;
+  }
+
+  &__title {
+    font-weight: bold;
+    color: var(--primary-text-color--faint);
+  }
+
+  &__content {
+    padding: 10px 20px;
+  }
+
+  &__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
+
+    .svg-icon {
+      width: 20px;
+      height: 20px;
+      margin-right: -10px;
+    }
+  }
+}
+
 .column-settings__outer {
   background: var(--brand-color--med);
   padding: 15px;

app/styles/navigation.scss

@@ -166,6 +166,17 @@
     font-weight: bold;
   }
 
+  &__cog {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .svg-icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
   @media (min-width: 580px) {
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;