Merge branch 'fix-column-headings' into 'develop'

Fix spacing around column headings, remove unused column settings

See merge request soapbox-pub/soapbox!1865

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)}

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`}

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}`}

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?' />}