Allow mounting arbitrary columns (#3207)

* Allow mounting arbitrary columns

* Refactor column headers, allow pinning/unpinning and moving columns around

* Collapse animation

* Re-introduce scroll to top

* Save column settings properly, do not display pin options in
single-column view, do not display collapse icon if there is
nothing to collapse

* Fix one instance of public timeline being closed closing the stream
Fix back buttons inconsistently sending you back to / even if history exists

* Getting started displays links to columns that are not mounted

app/javascript/mastodon/features/ui/components/column.js

@@ -2,34 +2,7 @@ import React from 'react';
 import ColumnHeader from './column_header';
 import PropTypes from 'prop-types';
 import { debounce } from 'lodash';
-
-const easingOutQuint = (x, t, b, c, d) => c*((t=t/d-1)*t*t*t*t + 1) + b;
-
-const scrollTop = (node) => {
-  const startTime = Date.now();
-  const offset    = node.scrollTop;
-  const targetY   = -offset;
-  const duration  = 1000;
-  let interrupt   = false;
-
-  const step = () => {
-    const elapsed    = Date.now() - startTime;
-    const percentage = elapsed / duration;
-
-    if (percentage > 1 || interrupt) {
-      return;
-    }
-
-    node.scrollTop = easingOutQuint(0, elapsed, offset, targetY, duration);
-    requestAnimationFrame(step);
-  };
-
-  step();
-
-  return () => {
-    interrupt = true;
-  };
-};
+import scrollTop from '../../../scroll';
 
 class Column extends React.PureComponent {
 
@@ -43,9 +16,11 @@ class Column extends React.PureComponent {
 
   handleHeaderClick = () => {
     const scrollable = this.node.querySelector('.scrollable');
+
     if (!scrollable) {
       return;
     }
+
     this._interruptScrollAnimation = scrollTop(scrollable);
   }
 

app/javascript/mastodon/features/ui/components/columns_area.js

@@ -1,16 +1,51 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import HomeTimeline from '../../home_timeline';
+import Notifications from '../../notifications';
+import PublicTimeline from '../../public_timeline';
+import CommunityTimeline from '../../community_timeline';
+import HashtagTimeline from '../../hashtag_timeline';
+import Compose from '../../compose';
 
-class ColumnsArea extends React.PureComponent {
+const componentMap = {
+  'COMPOSE': Compose,
+  'HOME': HomeTimeline,
+  'NOTIFICATIONS': Notifications,
+  'PUBLIC': PublicTimeline,
+  'COMMUNITY': CommunityTimeline,
+  'HASHTAG': HashtagTimeline,
+};
+
+class ColumnsArea extends ImmutablePureComponent {
 
   static propTypes = {
+    columns: ImmutablePropTypes.list.isRequired,
+    singleColumn: PropTypes.bool,
     children: PropTypes.node,
   };
 
   render () {
+    const { columns, children, singleColumn } = this.props;
+
+    if (singleColumn) {
+      return (
+        <div className='columns-area'>
+          {children}
+        </div>
+      );
+    }
+
     return (
       <div className='columns-area'>
-        {this.props.children}
+        {columns.map(column => {
+          const SpecificComponent = componentMap[column.get('id')];
+          const params = column.get('params', null) === null ? null : column.get('params').toJS();
+          return <SpecificComponent key={column.get('uuid')} columnId={column.get('uuid')} params={params} multiColumn />;
+        })}
+
+        {React.Children.map(children, child => React.cloneElement(child, { multiColumn: true }))}
       </div>
     );
   }

app/javascript/mastodon/features/ui/containers/columns_area_container.js

@@ -0,0 +1,8 @@
+import { connect } from 'react-redux';
+import ColumnsArea from '../components/columns_area';
+
+const mapStateToProps = state => ({
+  columns: state.getIn(['settings', 'columns']),
+});
+
+export default connect(mapStateToProps)(ColumnsArea);

app/javascript/mastodon/features/ui/index.js

@@ -1,13 +1,9 @@
 import React from 'react';
-import ColumnsArea from './components/columns_area';
 import NotificationsContainer from './containers/notifications_container';
 import PropTypes from 'prop-types';
 import LoadingBarContainer from './containers/loading_bar_container';
-import HomeTimeline from '../home_timeline';
-import Compose from '../compose';
 import TabsBar from './components/tabs_bar';
 import ModalContainer from './containers/modal_container';
-import Notifications from '../notifications';
 import { connect } from 'react-redux';
 import { isMobile } from '../../is_mobile';
 import { debounce } from 'lodash';
@@ -15,6 +11,7 @@ import { uploadCompose } from '../../actions/compose';
 import { refreshTimeline } from '../../actions/timelines';
 import { refreshNotifications } from '../../actions/notifications';
 import UploadArea from './components/upload_area';
+import ColumnsAreaContainer from './containers/columns_area_container';
 
 const noOp = () => false;
 
@@ -119,31 +116,10 @@ class UI extends React.PureComponent {
     const { width, draggingOver } = this.state;
     const { children } = this.props;
 
-    let mountedColumns;
-
-    if (isMobile(width)) {
-      mountedColumns = (
-        <ColumnsArea>
-          {children}
-        </ColumnsArea>
-      );
-    } else {
-      mountedColumns = (
-        <ColumnsArea>
-          <Compose withHeader={true} />
-          <HomeTimeline shouldUpdateScroll={noOp} />
-          <Notifications shouldUpdateScroll={noOp} />
-          <div className="column__wrapper">{children}</div>
-        </ColumnsArea>
-      );
-    }
-
     return (
       <div className='ui' ref={this.setRef}>
         <TabsBar />
-
-        {mountedColumns}
-
+        <ColumnsAreaContainer singleColumn={isMobile(width)}>{children}</ColumnsAreaContainer>
         <NotificationsContainer />
         <LoadingBarContainer className="loading-bar" />
         <ModalContainer />