Messages: prefer DirectTimeline, but fall back to Conversations

app/soapbox/features/ui/index.js

@@ -177,6 +177,7 @@ class SwitchingColumnsArea extends React.PureComponent {
     location: PropTypes.object,
     onLayoutChange: PropTypes.func.isRequired,
     soapbox: ImmutablePropTypes.map.isRequired,
+    features: PropTypes.object.isRequired,
   };
 
   state = {
@@ -205,7 +206,7 @@ class SwitchingColumnsArea extends React.PureComponent {
   }
 
   render() {
-    const { children, soapbox } = this.props;
+    const { children, soapbox, features } = this.props;
     const authenticatedProfile = soapbox.get('authenticatedProfile');
 
     return (
@@ -221,7 +222,7 @@ class SwitchingColumnsArea extends React.PureComponent {
         <WrappedRoute path='/timeline/fediverse' exact page={HomePage} component={PublicTimeline} content={children} publicRoute />
         <WrappedRoute path='/timeline/:instance' exact page={RemoteInstancePage} component={RemoteTimeline} content={children} />
         <WrappedRoute path='/conversations' page={DefaultPage} component={Conversations} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
-        <WrappedRoute path='/messages' page={DefaultPage} component={DirectTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+        <WrappedRoute path='/messages' page={DefaultPage} component={features.directTimeline ? DirectTimeline : Conversations} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 
         {/*
         <WrappedRoute path='/groups' exact page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'featured' }} />
@@ -686,7 +687,7 @@ class UI extends React.PureComponent {
         <div className={classnames} ref={this.setRef} style={style}>
           <TabsBar />
 
-          <SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange} soapbox={soapbox}>
+          <SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange} soapbox={soapbox} features={features}>
             {children}
           </SwitchingColumnsArea>
 

app/soapbox/utils/features.js

@@ -1,5 +1,6 @@
 // Detect backend features to conditionally render elements
 import gte from 'semver/functions/gte';
+import lt from 'semver/functions/lt';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import { createSelector } from 'reselect';
 
@@ -30,6 +31,14 @@ export const getFeatures = createSelector([
       v.software === MASTODON && gte(v.compatVersion, '3.1.3'),
       v.software === PLEROMA && gte(v.version, '2.1.0'),
     ]),
+    directTimeline: any([
+      v.software === MASTODON && lt(v.compatVersion, '3.0.0'),
+      v.software === PLEROMA && gte(v.version, '0.9.9'),
+    ]),
+    conversations: any([
+      v.software === MASTODON && gte(v.compatVersion, '2.6.0'),
+      v.software === PLEROMA && gte(v.version, '0.9.9'),
+    ]),
     emojiReacts: v.software === PLEROMA && gte(v.version, '2.0.0'),
     emojiReactsRGI: v.software === PLEROMA && gte(v.version, '2.2.49'),
     attachmentLimit: v.software === PLEROMA ? Infinity : 4,