From ec22cc8afaef9381ba0452c1b3a92680e877c882 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 19 Oct 2021 15:13:04 -0500
Subject: [PATCH] AccountTimeline: add SubNavigation

---
 app/soapbox/components/sub_navigation.js      |  4 +-
 .../components/column_settings.js             | 59 +++++++++++++------
 .../features/account_timeline/index.js        | 11 +---
 app/styles/components/account-header.scss     |  6 ++
 app/styles/components/columns.scss            | 10 ++++
 app/styles/components/tabs-bar.scss           |  2 +-
 app/styles/ui.scss                            |  3 +-
 7 files changed, 64 insertions(+), 31 deletions(-)

diff --git a/app/soapbox/components/sub_navigation.js b/app/soapbox/components/sub_navigation.js
index abaceedfa..063448b5c 100644
--- a/app/soapbox/components/sub_navigation.js
+++ b/app/soapbox/components/sub_navigation.js
@@ -73,9 +73,9 @@ class SubNavigation extends React.PureComponent {
 
   handleScroll = throttle(() => {
     if (this.node) {
-      const { top } = this.node.getBoundingClientRect();
+      const { offsetTop } = this.node;
 
-      if (top <= 50) {
+      if (offsetTop > 0) {
         this.setState({ scrolled: true });
       } else {
         this.setState({ scrolled: false });
diff --git a/app/soapbox/features/account_timeline/components/column_settings.js b/app/soapbox/features/account_timeline/components/column_settings.js
index 7836c01f0..130cb47db 100644
--- a/app/soapbox/features/account_timeline/components/column_settings.js
+++ b/app/soapbox/features/account_timeline/components/column_settings.js
@@ -1,38 +1,59 @@
 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='account_timeline'
-            settings={settings}
-            settingPath={['shows', 'pinned']}
-            onChange={onChange}
-            label={<FormattedMessage id='account_timeline.column_settings.show_pinned' defaultMessage='Show pinned posts' />}
-          />
-          <SettingToggle
-            prefix='account_timeline'
-            settings={settings}
-            settingPath={['shows', 'reblog']}
-            onChange={onChange}
-            label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show reposts' />}
-          />
+      <div className='column-settings'>
+        <div className='column-settings__header'>
+          <h1 className='column-settings__title'>
+            <FormattedMessage id='account.column_settings.title' defaultMessage='Account 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__description'>
+            <FormattedMessage id='account.column_settings.description' defaultMessage='These settings apply to all account timelines.' />
+          </div>
+
+          <div className='column-settings__row'>
+            <SettingToggle
+              prefix='account_timeline'
+              settings={settings}
+              settingPath={['shows', 'pinned']}
+              onChange={onChange}
+              label={<FormattedMessage id='account_timeline.column_settings.show_pinned' defaultMessage='Show pinned posts' />}
+            />
+            <SettingToggle
+              prefix='account_timeline'
+              settings={settings}
+              settingPath={['shows', 'reblog']}
+              onChange={onChange}
+              label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show reposts' />}
+            />
+          </div>
         </div>
       </div>
     );
diff --git a/app/soapbox/features/account_timeline/index.js b/app/soapbox/features/account_timeline/index.js
index 003ab8dda..b55decbba 100644
--- a/app/soapbox/features/account_timeline/index.js
+++ b/app/soapbox/features/account_timeline/index.js
@@ -9,6 +9,7 @@ import StatusList from '../../components/status_list';
 import LoadingIndicator from '../../components/loading_indicator';
 import Column from '../ui/components/column';
 import ColumnSettingsContainer from './containers/column_settings_container';
+import SubNavigation from 'soapbox/components/sub_navigation';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
@@ -19,7 +20,6 @@ import { fetchPatronAccount } from '../../actions/patron';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { getSettings } from 'soapbox/actions/settings';
 import { makeGetStatusIds, findAccountByUsername } from 'soapbox/selectors';
-import classNames from 'classnames';
 
 const makeMapStateToProps = () => {
   const getStatusIds = makeGetStatusIds();
@@ -146,7 +146,6 @@ class AccountTimeline extends ImmutablePureComponent {
 
   render() {
     const { statusIds, featuredStatusIds, isLoading, hasMore, isBlocked, isAccount, accountId, unavailable, accountUsername } = this.props;
-    const { collapsed, animating } = this.state;
 
     if (!isAccount && accountId !== -1) {
       return (
@@ -176,7 +175,8 @@ class AccountTimeline extends ImmutablePureComponent {
     }
 
     return (
-      <Column transparent>
+      <Column className='account-timeline' transparent>
+        <SubNavigation message={`@${accountUsername}`} settings={ColumnSettingsContainer} />
         <div className='account__section-headline'>
           <NavLink exact to={`/@${accountUsername}`}>
             <FormattedMessage id='account.posts' defaultMessage='Posts' />
@@ -193,11 +193,6 @@ class AccountTimeline extends ImmutablePureComponent {
             </button>
           </div>
         </div>
-        <div className={classNames('column-header__collapsible', { collapsed, animating })} onTransitionEnd={this.handleTransitionEnd}>
-          <div className='column-header__collapsible-inner'>
-            {(!collapsed || animating) && <ColumnSettingsContainer />}
-          </div>
-        </div>
         <StatusList
           scrollKey='account_timeline'
           statusIds={statusIds}
diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss
index 401e3fcc5..69902227c 100644
--- a/app/styles/components/account-header.scss
+++ b/app/styles/components/account-header.scss
@@ -335,3 +335,9 @@
     }
   }
 }
+
+@media (min-width: 896px) {
+  .account-timeline .sub-navigation {
+    top: 134px;
+  }
+}
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 61c3ab489..36b172599 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -625,6 +625,12 @@
     overflow-y: auto;
   }
 
+  &__description {
+    font-size: 14px;
+    margin: 5px 0 15px;
+    color: var(--primary-text-color--faint);
+  }
+
   &__close {
     display: flex;
     align-items: center;
@@ -949,3 +955,7 @@
 .column .explanation-box {
   background: var(--foreground-color);
 }
+
+.sub-navigation + .account__section-headline {
+  background: var(--foreground-color);
+}
diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index a0226aef8..90ff85ddf 100644
--- a/app/styles/components/tabs-bar.scss
+++ b/app/styles/components/tabs-bar.scss
@@ -8,7 +8,7 @@
   width: 100%;
   position: sticky;
   top: 0;
-  z-index: 1000;
+  z-index: 1100;
   transition: transform 0.2s ease;
 
   &--collapsed {
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index f47c10f87..62aba1510 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -346,10 +346,11 @@
     width: 100%;
 
     &__top {
+      @include standard-panel-shadow;
       display: flex;
       width: 100%;
       height: auto;
-      z-index: 105;
+      z-index: 1000;
       background: var(--foreground-color);
 
       @media (min-width: 896px) {