Add Mastodon compatibility routes, expose /conversations, display Messages tab for Mastodon

app/soapbox/components/primary_navigation.js

@@ -26,7 +26,7 @@ const mapStateToProps = state => {
     chatsCount: state.get('chats').reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0),
     dashboardCount: reportsCount + approvalCount,
     features: getFeatures(instance),
-    siteTitle: state.getIn(['instance', 'title']),
+    instance,
   };
 };
 
@@ -45,12 +45,12 @@ class PrimaryNavigation extends React.PureComponent {
     notificationCount: PropTypes.number,
     chatsCount: PropTypes.number,
     features: PropTypes.object.isRequired,
-    siteTitle: PropTypes.string,
     location: PropTypes.object,
+    instance: ImmutablePropTypes.map.isRequired,
   };
 
   render() {
-    const { account, features, notificationCount, chatsCount, dashboardCount, siteTitle, location } = this.props;
+    const { account, features, notificationCount, chatsCount, dashboardCount, location, instance } = this.props;
 
     return (
       <div className='column-header__wrapper primary-navigation__wrapper'>
@@ -60,14 +60,37 @@ class PrimaryNavigation extends React.PureComponent {
             <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
           </NavLink>
 
-          {account && <NavLink key='notifications' className='btn grouped' to='/notifications' data-preview-title-id='column.notifications'>
-            <IconWithCounter
-              src={notificationCount > 0 ? require('@tabler/icons/icons/bell-ringing-2.svg') : require('@tabler/icons/icons/bell.svg')}
-              className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/notifications' })}
-              count={notificationCount}
-            />
-            <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
-          </NavLink>}
+          {account && (
+            <NavLink key='notifications' className='btn grouped' to='/notifications' data-preview-title-id='column.notifications'>
+              <IconWithCounter
+                src={notificationCount > 0 ? require('@tabler/icons/icons/bell-ringing-2.svg') : require('@tabler/icons/icons/bell.svg')}
+                className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/notifications' })}
+                count={notificationCount}
+              />
+              <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
+            </NavLink>
+          )}
+
+          {account && (
+            features.chats ? (
+              <NavLink key='chats' className='btn grouped' to='/chats' data-preview-title-id='column.chats'>
+                <IconWithCounter
+                  src={require('@tabler/icons/icons/messages.svg')}
+                  className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/chats' })}
+                  count={chatsCount}
+                />
+                <FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' />
+              </NavLink>
+            ) : (
+              <NavLink to='/messages' className='btn grouped'>
+                <Icon
+                  src={require('@tabler/icons/icons/mail.svg')}
+                  className={classNames('primary-navigation__icon', { 'svg-icon--active': ['/messages', '/conversations'].includes(location.pathname) })}
+                />
+                <FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />
+              </NavLink>
+            )
+          )}
 
           <NavLink key='search' className='btn grouped' to='/search'>
             <Icon
@@ -77,23 +100,23 @@ class PrimaryNavigation extends React.PureComponent {
             <FormattedMessage id='navigation.search' defaultMessage='Search' />
           </NavLink>
 
-          {(features.chats && account) && <NavLink key='chats' className='btn grouped' to='/chats' data-preview-title-id='column.chats'>
-            <IconWithCounter
-              src={require('@tabler/icons/icons/messages.svg')}
-              className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/chats' })}
-              count={chatsCount}
-            />
-            <FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' />
-          </NavLink>}
+          {(account && isStaff(account)) && (
+            <NavLink key='dashboard' className='btn grouped' to='/admin' data-preview-title-id='tabs_bar.dashboard'>
+              <IconWithCounter
+                src={location.pathname.startsWith('/admin') ? require('icons/dashboard-filled.svg') : require('@tabler/icons/icons/dashboard.svg')}
+                className='primary-navigation__icon'
+                count={dashboardCount}
+              />
+              <FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />
+            </NavLink>
+          )}
 
-          {(account && isStaff(account)) && <NavLink key='dashboard' className='btn grouped' to='/admin' data-preview-title-id='tabs_bar.dashboard'>
-            <IconWithCounter
-              src={location.pathname.startsWith('/admin') ? require('icons/dashboard-filled.svg') : require('@tabler/icons/icons/dashboard.svg')}
-              className='primary-navigation__icon'
-              count={dashboardCount}
-            />
-            <FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />
-          </NavLink>}
+          {(account && instance.get('invites_enabled')) && (
+            <a href='/invites' className='btn grouped'>
+              <Icon src={require('@tabler/icons/icons/mailbox.svg')} className='primary-navigation__icon' />
+              <FormattedMessage id='navigation.invites' defaultMessage='Invites' />
+            </a>
+          )}
 
           <hr />
 
@@ -103,7 +126,7 @@ class PrimaryNavigation extends React.PureComponent {
                 src={require('@tabler/icons/icons/users.svg')}
                 className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/timeline/local' })}
               />
-              {siteTitle}
+              {instance.get('title')}
             </NavLink>
           ) : (
             <NavLink to='/timeline/local' className='btn grouped'>
@@ -112,10 +135,12 @@ class PrimaryNavigation extends React.PureComponent {
             </NavLink>
           )}
 
-          {features.federating && <NavLink to='/timeline/fediverse' className='btn grouped'>
-            <Icon src={require('icons/fediverse.svg')} className='column-header__icon' />
-            <FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />
-          </NavLink>}
+          {features.federating && (
+            <NavLink to='/timeline/fediverse' className='btn grouped'>
+              <Icon src={require('icons/fediverse.svg')} className='column-header__icon' />
+              <FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />
+            </NavLink>
+          )}
         </h1>
       </div>
     );

app/soapbox/components/thumb_navigation.js

@@ -66,17 +66,29 @@ class ThumbNavigation extends React.PureComponent {
           </NavLink>
         )}
 
-        {(features.chats && account) && (
-          <NavLink to='/chats' className='thumb-navigation__link'>
-            <IconWithCounter
-              src={require('@tabler/icons/icons/messages.svg')}
-              className={classNames({ 'svg-icon--active': location.pathname === '/chats' })}
-              count={chatsCount}
-            />
-            <span>
-              <FormattedMessage id='navigation.chats' defaultMessage='Chats' />
-            </span>
-          </NavLink>
+        {account && (
+          features.chats ? (
+            <NavLink to='/chats' className='thumb-navigation__link'>
+              <IconWithCounter
+                src={require('@tabler/icons/icons/messages.svg')}
+                className={classNames({ 'svg-icon--active': location.pathname === '/chats' })}
+                count={chatsCount}
+              />
+              <span>
+                <FormattedMessage id='navigation.chats' defaultMessage='Chats' />
+              </span>
+            </NavLink>
+          ) : (
+            <NavLink to='/messages' className='thumb-navigation__link'>
+              <Icon
+                src={require('@tabler/icons/icons/mail.svg')}
+                className={classNames({ 'svg-icon--active': ['/messages', '/conversations'].includes(location.pathname) })}
+              />
+              <span>
+                <FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />
+              </span>
+            </NavLink>
+          )
         )}
 
         <NavLink to='/search' className='thumb-navigation__link'>

app/soapbox/features/ui/index.js

@@ -58,6 +58,7 @@ import {
   Reactions,
   // Favourites,
   DirectTimeline,
+  Conversations,
   HashtagTimeline,
   Notifications,
   FollowRequests,
@@ -219,6 +220,7 @@ class SwitchingColumnsArea extends React.PureComponent {
         <WrappedRoute path='/timeline/local' exact page={HomePage} component={CommunityTimeline} content={children} publicRoute />
         <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 }} />
 
         {/*
@@ -236,14 +238,20 @@ class SwitchingColumnsArea extends React.PureComponent {
         <Redirect from='/web/:path1/:path2/:path3' to='/:path1/:path2/:path3' />
         <Redirect from='/web/:path1/:path2' to='/:path1/:path2' />
         <Redirect from='/web/:path' to='/:path' />
+        <Redirect from='/statuses/new' to='/' />
         <Redirect from='/timelines/home' to='/' />
+        <Redirect from='/timelines/public/local' to='/timeline/local' />
+        <Redirect from='/timelines/public' to='/timeline/fediverse' />
+        <Redirect from='/timelines/direct' to='/messages' />
         <Redirect from='/main/all' to='/timeline/fediverse' />
         <Redirect from='/main/public' to='/timeline/local' />
         <Redirect from='/main/friends' to='/' />
         <Redirect from='/tag/:id' to='/tags/:id' />
         <Redirect from='/user-settings' to='/settings/profile' />
         <WrappedRoute path='/notice/:statusId' publicRoute exact page={DefaultPage} component={Status} content={children} />
+        <Redirect from='/users/:username/chats' to='/chats' />
         <Redirect from='/users/:username' to='/@:username' />
+        <Redirect from='/terms' to='/about' />
         <Redirect from='/home' to='/' />
 
         {/* Soapbox Legacy redirects */}
@@ -286,6 +294,7 @@ class SwitchingColumnsArea extends React.PureComponent {
         <WrappedRoute path='/scheduled_statuses' page={DefaultPage} component={ScheduledStatuses} content={children} />
 
         <Redirect from='/registration/:token' to='/invite/:token' />
+        <Redirect from='/registration' to='/' />
         <WrappedRoute path='/invite/:token' component={RegisterInvite} content={children} publicRoute />
 
         <Redirect exact from='/settings' to='/settings/preferences' />

app/styles/components/icon.scss

@@ -29,6 +29,15 @@
         fill: var(--primary-text-color);
       }
     }
+
+    svg.icon-tabler-mail {
+      stroke: var(--background-color);
+
+      rect {
+        fill: var(--primary-text-color);
+        stroke: var(--primary-text-color);
+      }
+    }
   }
 }