From 29d320a658e9472719dec3596a524870e14d3aff Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 3 Nov 2022 19:56:03 -0500
Subject: [PATCH] Fix spacing around column headings, remove unused column
 settings

---
 app/soapbox/components/sub_navigation.tsx     | 46 +---------------
 .../components/column_settings.js             | 51 -----------------
 .../containers/column_settings_container.js   | 18 ------
 .../features/community_timeline/index.tsx     |  7 ++-
 .../features/hashtag-timeline/index.tsx       | 10 ++--
 .../components/column_settings.js             | 55 -------------------
 .../containers/column_settings_container.js   | 18 ------
 .../features/public_timeline/index.tsx        |  8 ++-
 8 files changed, 17 insertions(+), 196 deletions(-)
 delete mode 100644 app/soapbox/features/community_timeline/components/column_settings.js
 delete mode 100644 app/soapbox/features/community_timeline/containers/column_settings_container.js
 delete mode 100644 app/soapbox/features/public_timeline/components/column_settings.js
 delete mode 100644 app/soapbox/features/public_timeline/containers/column_settings_container.js

diff --git a/app/soapbox/components/sub_navigation.tsx b/app/soapbox/components/sub_navigation.tsx
index b8e2b310d..1e6afb85a 100644
--- a/app/soapbox/components/sub_navigation.tsx
+++ b/app/soapbox/components/sub_navigation.tsx
@@ -4,34 +4,22 @@ import { defineMessages, useIntl } from 'react-intl';
 // import { connect } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
-// import { openModal } from 'soapbox/actions/modals';
-// import { useAppDispatch } from 'soapbox/hooks';
-
 import { CardHeader, CardTitle } from './ui';
 
 const messages = defineMessages({
   back: { id: 'column_back_button.label', defaultMessage: 'Back' },
-  settings: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
 });
 
 interface ISubNavigation {
-  message: String,
+  message: React.ReactNode,
+  /** @deprecated Unused. */
   settings?: React.ComponentType,
 }
 
 const SubNavigation: React.FC<ISubNavigation> = ({ message }) => {
   const intl = useIntl();
-  // const dispatch = useAppDispatch();
   const history = useHistory();
 
-  // const ref = useRef(null);
-
-  // const [scrolled, setScrolled] = useState(false);
-
-  // const onOpenSettings = () => {
-  //   dispatch(openModal('COMPONENT', { component: Settings }));
-  // };
-
   const handleBackClick = () => {
     if (window.history && window.history.length === 1) {
       history.push('/');
@@ -40,36 +28,6 @@ const SubNavigation: React.FC<ISubNavigation> = ({ message }) => {
     }
   };
 
-  // const handleBackKeyUp = (e) => {
-  //   if (e.key === 'Enter') {
-  //     handleClick();
-  //   }
-  // }
-
-  // const handleOpenSettings = () => {
-  //   onOpenSettings();
-  // }
-
-  // useEffect(() => {
-  //   const handleScroll = throttle(() => {
-  //     if (this.node) {
-  //       const { offsetTop } = this.node;
-
-  //       if (offsetTop > 0) {
-  //         setScrolled(true);
-  //       } else {
-  //         setScrolled(false);
-  //       }
-  //     }
-  //   }, 150, { trailing: true });
-
-  //   window.addEventListener('scroll', handleScroll);
-
-  //   return () => {
-  //     window.removeEventListener('scroll', handleScroll);
-  //   };
-  // }, []);
-
   return (
     <CardHeader
       aria-label={intl.formatMessage(messages.back)}
diff --git a/app/soapbox/features/community_timeline/components/column_settings.js b/app/soapbox/features/community_timeline/components/column_settings.js
deleted file mode 100644
index 52781f1f4..000000000
--- a/app/soapbox/features/community_timeline/components/column_settings.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-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,
-    onClose: PropTypes.func.isRequired,
-  };
-
-  render() {
-    const { intl, settings, onChange, onClose } = this.props;
-
-    return (
-      <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/x.svg')} onClick={onClose} />
-          </div>
-        </div>
-
-        <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>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/community_timeline/containers/column_settings_container.js b/app/soapbox/features/community_timeline/containers/column_settings_container.js
deleted file mode 100644
index d20838089..000000000
--- a/app/soapbox/features/community_timeline/containers/column_settings_container.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { connect } from 'react-redux';
-
-import { getSettings, changeSetting } from '../../../actions/settings';
-import ColumnSettings from '../components/column_settings';
-
-const mapStateToProps = state => ({
-  settings: getSettings(state).get('community'),
-});
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    onChange(key, checked) {
-      dispatch(changeSetting(['community', ...key], checked));
-    },
-  };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings);
diff --git a/app/soapbox/features/community_timeline/index.tsx b/app/soapbox/features/community_timeline/index.tsx
index 8c0adc2cb..4fd4e1d0a 100644
--- a/app/soapbox/features/community_timeline/index.tsx
+++ b/app/soapbox/features/community_timeline/index.tsx
@@ -10,8 +10,6 @@ import { useAppDispatch, useSettings } from 'soapbox/hooks';
 
 import Timeline from '../ui/components/timeline';
 
-import ColumnSettings from './containers/column_settings_container';
-
 const messages = defineMessages({
   title: { id: 'column.community', defaultMessage: 'Local timeline' },
 });
@@ -44,7 +42,10 @@ const CommunityTimeline = () => {
 
   return (
     <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
-      <SubNavigation message={intl.formatMessage(messages.title)} settings={ColumnSettings} />
+      <div className='px-4 sm:p-0'>
+        <SubNavigation message={intl.formatMessage(messages.title)} />
+      </div>
+
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
           scrollKey={`${timelineId}_timeline`}
diff --git a/app/soapbox/features/hashtag-timeline/index.tsx b/app/soapbox/features/hashtag-timeline/index.tsx
index a8b97cbab..7ead1a9f5 100644
--- a/app/soapbox/features/hashtag-timeline/index.tsx
+++ b/app/soapbox/features/hashtag-timeline/index.tsx
@@ -3,10 +3,10 @@ import { FormattedMessage } from 'react-intl';
 
 import { connectHashtagStream } from 'soapbox/actions/streaming';
 import { expandHashtagTimeline, clearTimeline } from 'soapbox/actions/timelines';
-import ColumnHeader from 'soapbox/components/column_header';
+import SubNavigation from 'soapbox/components/sub_navigation';
 import { Column } from 'soapbox/components/ui';
 import Timeline from 'soapbox/features/ui/components/timeline';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch } from 'soapbox/hooks';
 
 import type { Tag as TagEntity } from 'soapbox/types/entities';
 
@@ -27,7 +27,6 @@ export const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
   const tags = params?.tags || { any: [], all: [], none: [] };
 
   const dispatch = useAppDispatch();
-  const hasUnread = useAppSelector<boolean>(state => (state.timelines.getIn([`hashtag:${id}`, 'unread']) as number) > 0);
   const disconnects = useRef<(() => void)[]>([]);
 
   // Mastodon supports displaying results from multiple hashtags.
@@ -100,7 +99,10 @@ export const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
 
   return (
     <Column label={`#${id}`} transparent withHeader={false}>
-      <ColumnHeader active={hasUnread} title={title()} />
+      <div className='px-4 pt-4 sm:p-0'>
+        <SubNavigation message={title()} />
+      </div>
+
       <Timeline
         scrollKey='hashtag_timeline'
         timelineId={`hashtag:${id}`}
diff --git a/app/soapbox/features/public_timeline/components/column_settings.js b/app/soapbox/features/public_timeline/components/column_settings.js
deleted file mode 100644
index 1d7022fa4..000000000
--- a/app/soapbox/features/public_timeline/components/column_settings.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-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,
-    onClose: PropTypes.func.isRequired,
-  };
-
-  render() {
-    const { intl, settings, onChange, onClose } = this.props;
-
-    return (
-      <div className='column-settings'>
-        <div className='column-settings__header'>
-          <h1 className='column-settings__title'>
-            <FormattedMessage id='public.column_settings.title' defaultMessage='Fediverse timeline settings' />
-          </h1>
-          <div className='column-settings__close'>
-            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/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>
-
-          <div className='column-settings__row'>
-            <SettingToggle prefix='public_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>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/public_timeline/containers/column_settings_container.js b/app/soapbox/features/public_timeline/containers/column_settings_container.js
deleted file mode 100644
index 63a629007..000000000
--- a/app/soapbox/features/public_timeline/containers/column_settings_container.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { connect } from 'react-redux';
-
-import { getSettings, changeSetting } from '../../../actions/settings';
-import ColumnSettings from '../components/column_settings';
-
-const mapStateToProps = state => ({
-  settings: getSettings(state).get('public'),
-});
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    onChange(key, checked) {
-      dispatch(changeSetting(['public', ...key], checked));
-    },
-  };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings);
diff --git a/app/soapbox/features/public_timeline/index.tsx b/app/soapbox/features/public_timeline/index.tsx
index 6fe5afec8..34017a0d3 100644
--- a/app/soapbox/features/public_timeline/index.tsx
+++ b/app/soapbox/features/public_timeline/index.tsx
@@ -14,8 +14,6 @@ import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
 import PinnedHostsPicker from '../remote_timeline/components/pinned_hosts_picker';
 import Timeline from '../ui/components/timeline';
 
-import ColumnSettings from './containers/column_settings_container';
-
 const messages = defineMessages({
   title: { id: 'column.public', defaultMessage: 'Fediverse timeline' },
   dismiss: { id: 'fediverse_tab.explanation_box.dismiss', defaultMessage: 'Don\'t show again' },
@@ -65,8 +63,12 @@ const CommunityTimeline = () => {
 
   return (
     <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
-      <SubNavigation message={intl.formatMessage(messages.title)} settings={ColumnSettings} />
+      <div className='px-4 sm:p-0'>
+        <SubNavigation message={intl.formatMessage(messages.title)} />
+      </div>
+
       <PinnedHostsPicker />
+
       {showExplanationBox && <div className='mb-4'>
         <Accordion
           headline={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}