Add StatusPage

app/soapbox/features/ui/index.js

@@ -33,6 +33,7 @@ import ProfilePage from 'soapbox/pages/profile_page';
 // import GroupSidebarPanel from '../groups/sidebar_panel';
 import HomePage from 'soapbox/pages/home_page';
 import DefaultPage from 'soapbox/pages/default_page';
+import StatusPage from 'soapbox/pages/status_page';
 import EmptyPage from 'soapbox/pages/default_page';
 import AdminPage from 'soapbox/pages/admin_page';
 import RemoteInstancePage from 'soapbox/pages/remote_instance_page';
@@ -269,7 +270,7 @@ class SwitchingColumnsArea extends React.PureComponent {
         <WrappedRoute path='/@:username/tagged/:tag' exact component={AccountTimeline} page={ProfilePage} content={children} />
         <WrappedRoute path='/@:username/favorites' component={FavouritedStatuses} page={ProfilePage} content={children}  />
         <WrappedRoute path='/@:username/pins' component={PinnedStatuses} page={ProfilePage} content={children} />
-        <WrappedRoute path='/@:username/posts/:statusId' publicRoute exact page={DefaultPage} component={Status} content={children} />
+        <WrappedRoute path='/@:username/posts/:statusId' publicRoute exact page={StatusPage} component={Status} content={children} />
         <WrappedRoute path='/@:username/posts/:statusId/reblogs' page={DefaultPage} component={Reblogs} content={children} />
         <WrappedRoute path='/@:username/posts/:statusId/reactions/:reaction?' page={DefaultPage} component={Reactions} content={children} />
 

app/soapbox/pages/status_page.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import PrimaryNavigation from 'soapbox/components/primary_navigation';
+import WhoToFollowPanel from 'soapbox/features/ui/components/who_to_follow_panel';
+import TrendsPanel from 'soapbox/features/ui/components/trends_panel';
+import PromoPanel from 'soapbox/features/ui/components/promo_panel';
+import FeaturesPanel from 'soapbox/features/ui/components/features_panel';
+import SignUpPanel from 'soapbox/features/ui/components/sign_up_panel';
+import LinkFooter from 'soapbox/features/ui/components/link_footer';
+import { getFeatures } from 'soapbox/utils/features';
+
+const mapStateToProps = state => {
+  const me = state.get('me');
+  const features = getFeatures(state.get('instance'));
+
+  return {
+    me,
+    showTrendsPanel: features.trends,
+    showWhoToFollowPanel: features.suggestions,
+  };
+};
+
+export default @connect(mapStateToProps)
+class StatusPage extends ImmutablePureComponent {
+
+  render() {
+    const { me, children, showTrendsPanel, showWhoToFollowPanel } = this.props;
+
+    return (
+      <div className='page'>
+        <div className='page__columns'>
+          <div className='columns-area__panels'>
+
+            <div className='columns-area__panels__pane columns-area__panels__pane--left'>
+              <div className='columns-area__panels__pane__inner'>
+                <PrimaryNavigation />
+              </div>
+            </div>
+
+            <div className='columns-area__panels__main'>
+              <div className='columns-area columns-area--mobile'>
+                {children}
+              </div>
+            </div>
+
+            <div className='columns-area__panels__pane columns-area__panels__pane--right'>
+              <div className='columns-area__panels__pane__inner'>
+                {showTrendsPanel && <TrendsPanel limit={3} key='trends-panel' />}
+                {showWhoToFollowPanel && <WhoToFollowPanel limit={5} key='wtf-panel' />}
+                {me ? <FeaturesPanel key='features-panel' /> : <SignUpPanel key='sign-up-panel' />}
+                <PromoPanel key='promo-panel' />
+                <LinkFooter key='link-footer' />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}