From b029225236f715841c935680e20c278f403b628a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 8 Oct 2021 16:32:49 -0500
Subject: [PATCH] ListTimeline: use SubNavigation, nuke HomeColumnHeader once
 and for all

---
 app/soapbox/components/home_column_header.js | 185 -------------------
 app/soapbox/features/list_timeline/index.js  |  17 +-
 2 files changed, 7 insertions(+), 195 deletions(-)
 delete mode 100644 app/soapbox/components/home_column_header.js

diff --git a/app/soapbox/components/home_column_header.js b/app/soapbox/components/home_column_header.js
deleted file mode 100644
index 9ed7fea2a..000000000
--- a/app/soapbox/components/home_column_header.js
+++ /dev/null
@@ -1,185 +0,0 @@
-'use strict';
-
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import classNames from 'classnames';
-import { injectIntl, defineMessages } from 'react-intl';
-import { Link } from 'react-router-dom';
-import Icon from 'soapbox/components/icon';
-import { fetchLists } from 'soapbox/actions/lists';
-import { createSelector } from 'reselect';
-import { getFeatures } from 'soapbox/utils/features';
-
-const messages = defineMessages({
-  show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
-  hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
-  homeTitle: { id: 'home_column_header.home', defaultMessage: 'Home' },
-  allTitle: { id: 'home_column_header.all', defaultMessage: 'All' },
-  fediverseTitle: { id: 'home_column_header.fediverse', defaultMessage: 'Fediverse' },
-  listTitle: { id: 'home_column.lists', defaultMessage: 'Lists' },
-});
-
-const getOrderedLists = createSelector([state => state.get('lists')], lists => {
-  if (!lists) {
-    return lists;
-  }
-
-  return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
-});
-
-const mapStateToProps = state => {
-  const instance = state.get('instance');
-  const features = getFeatures(instance);
-
-  return {
-    lists: getOrderedLists(state),
-    siteTitle: state.getIn(['instance', 'title']),
-    federating: features.federating,
-  };
-};
-
-class ColumnHeader extends React.PureComponent {
-
-  static contextTypes = {
-    router: PropTypes.object,
-  };
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    active: PropTypes.bool,
-    children: PropTypes.node,
-    activeItem: PropTypes.string,
-    activeSubItem: PropTypes.string,
-    lists: ImmutablePropTypes.list,
-    siteTitle: PropTypes.string,
-    federating: PropTypes.bool,
-  };
-
-  state = {
-    collapsed: true,
-    animating: false,
-    expandedFor: null, //lists, groups, etc.
-  };
-
-  componentDidMount() {
-    this.props.dispatch(fetchLists());
-  }
-
-  handleToggleClick = (e) => {
-    e.stopPropagation();
-    this.setState({ collapsed: !this.state.collapsed, animating: true });
-  }
-
-  handleTransitionEnd = () => {
-    this.setState({ animating: false });
-  }
-
-  expandLists = () => {
-    this.setState({
-      expandedFor: 'lists',
-    });
-  }
-
-  render() {
-    const { active, children, intl: { formatMessage }, activeItem, activeSubItem, lists, siteTitle, federating } = this.props;
-    const { collapsed, animating, expandedFor } = this.state;
-
-    const wrapperClassName = classNames('column-header__wrapper', {
-      'active': active,
-    });
-
-    const buttonClassName = classNames('column-header', {
-      'active': active,
-    });
-
-    const collapsibleClassName = classNames('column-header__collapsible', {
-      'collapsed': collapsed,
-      'animating': animating,
-    });
-
-    const collapsibleButtonClassName = classNames('column-header__button', {
-      'active': !collapsed,
-    });
-
-    const expansionClassName = classNames('column-header column-header__expansion', {
-      'open': expandedFor,
-    });
-
-    let extraContent, collapseButton;
-
-    if (children) {
-      extraContent = (
-        <div key='extra-content' className='column-header__collapsible__extra'>
-          {children}
-        </div>
-      );
-
-      collapseButton = <button className={collapsibleButtonClassName} title={formatMessage(collapsed ? messages.show : messages.hide)} aria-label={formatMessage(collapsed ? messages.show : messages.hide)} aria-pressed={collapsed ? 'false' : 'true'} onClick={this.handleToggleClick}><Icon id='sliders' /></button>;
-    }
-
-    const collapsedContent = [
-      extraContent,
-    ];
-
-    let expandedContent = null;
-    if ((expandedFor === 'lists' || activeItem === 'lists') && lists) {
-      expandedContent = lists.map(list =>
-        (<Link
-          key={list.get('id')}
-          to={`/list/${list.get('id')}`}
-          className={
-            classNames('btn btn--sub grouped', {
-              'active': list.get('id') === activeSubItem,
-            })
-          }
-        >
-          {list.get('title')}
-        </Link>),
-      );
-    }
-
-    return (
-      <div className={wrapperClassName}>
-        <h1 className={buttonClassName}>
-          <Link to='/' className={classNames('btn grouped', { 'active': 'home' === activeItem })}>
-            <Icon id='home' fixedWidth className='column-header__icon' />
-            {formatMessage(messages.homeTitle)}
-          </Link>
-
-          <Link to='/timeline/local' className={classNames('btn grouped', { 'active': 'local' === activeItem })}>
-            <Icon id={federating ? 'users' : 'globe-w'} fixedWidth className='column-header__icon' />
-            {federating ? siteTitle : formatMessage(messages.allTitle)}
-          </Link>
-
-          {federating && <Link to='/timeline/fediverse' className={classNames('btn grouped', { 'active': 'fediverse' === activeItem })}>
-            <Icon id='fediverse' fixedWidth className='column-header__icon' />
-            {formatMessage(messages.fediverseTitle)}
-          </Link>}
-
-          <div className='column-header__buttons'>
-            {collapseButton}
-          </div>
-        </h1>
-
-        {
-          expandedContent &&
-          <h1 className={expansionClassName}>
-            {expandedContent}
-          </h1>
-        }
-
-        <div className={collapsibleClassName} tabIndex={collapsed ? -1 : null} onTransitionEnd={this.handleTransitionEnd}>
-          <div className='column-header__collapsible-inner'>
-            {(!collapsed || animating) && collapsedContent}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
-
-export default injectIntl(connect(mapStateToProps)(ColumnHeader));
diff --git a/app/soapbox/features/list_timeline/index.js b/app/soapbox/features/list_timeline/index.js
index c14df6b23..e45bcbcd6 100644
--- a/app/soapbox/features/list_timeline/index.js
+++ b/app/soapbox/features/list_timeline/index.js
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import StatusListContainer from '../ui/containers/status_list_container';
-import Column from '../../components/column';
+import Column from 'soapbox/features/ui/components/column';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { connectListStream } from '../../actions/streaming';
 import { expandListTimeline } from '../../actions/timelines';
@@ -11,9 +11,6 @@ import { fetchList, deleteList } from '../../actions/lists';
 import { openModal } from '../../actions/modal';
 import MissingIndicator from '../../components/missing_indicator';
 import LoadingIndicator from '../../components/loading_indicator';
-import Icon from 'soapbox/components/icon';
-import HomeColumnHeader from '../../components/home_column_header';
-import { Link } from 'react-router-dom';
 import Button from 'soapbox/components/button';
 
 const messages = defineMessages({
@@ -23,7 +20,7 @@ const messages = defineMessages({
 
 const mapStateToProps = (state, props) => ({
   list: state.getIn(['lists', props.params.id]),
-  hasUnread: state.getIn(['timelines', `list:${props.params.id}`, 'unread']) > 0,
+  // hasUnread: state.getIn(['timelines', `list:${props.params.id}`, 'unread']) > 0,
 });
 
 export default @connect(mapStateToProps)
@@ -37,7 +34,7 @@ class ListTimeline extends React.PureComponent {
   static propTypes = {
     params: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired,
-    hasUnread: PropTypes.bool,
+    // hasUnread: PropTypes.bool,
     list: PropTypes.oneOfType([ImmutablePropTypes.map, PropTypes.bool]),
     intl: PropTypes.object.isRequired,
   };
@@ -97,7 +94,7 @@ class ListTimeline extends React.PureComponent {
   }
 
   render() {
-    const { hasUnread, list } = this.props;
+    const { list } = this.props;
     const { id } = this.props.params;
     const title  = list ? list.get('title') : id;
 
@@ -126,8 +123,8 @@ class ListTimeline extends React.PureComponent {
     );
 
     return (
-      <Column label={title}>
-        <HomeColumnHeader activeItem='lists' activeSubItem={id} active={hasUnread}>
+      <Column label={title} heading={title} transparent>
+        {/* <HomeColumnHeader activeItem='lists' activeSubItem={id} active={hasUnread}>
           <div className='column-header__links'>
             <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleEditClick}>
               <Icon id='pencil' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' />
@@ -144,7 +141,7 @@ class ListTimeline extends React.PureComponent {
               <Icon id='arrow-right' />
             </Link>
           </div>
-        </HomeColumnHeader>
+        </HomeColumnHeader> */}
 
         <StatusListContainer
           scrollKey='list_timeline'