Federated timeline: restore column settings

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

@@ -1,23 +1,39 @@
 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'>
+        <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__content'>
           <div className='column-settings__row'>
             <SettingToggle prefix='public_timeline' settings={settings} settingPath={['shows', 'reblog']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show reposts' />} />
           </div>
@@ -30,6 +46,7 @@ class ColumnSettings extends React.PureComponent {
             <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/public_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 Accordion from 'soapbox/features/ui/components/accordion';
 import PinnedHostsPicker from '../remote_timeline/components/pinned_hosts_picker';
 import { expandPublicTimeline } from '../../actions/timelines';
@@ -98,7 +99,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} />
         <PinnedHostsPicker />
         {showExplanationBox && <div className='explanation-box'>
           <Accordion