Fix DMs link

app/soapbox/components/sidebar-navigation.tsx

@@ -106,6 +106,32 @@ const SidebarNavigation = () => {
 
   const menu = makeMenu();
 
+  /** Conditionally render the supported messages link */
+  const renderMessagesLink = (): React.ReactNode => {
+    if (features.chats) {
+      return (
+        <SidebarNavigationLink
+          to='/chats'
+          icon={require('@tabler/icons/icons/messages.svg')}
+          count={chatsCount}
+          text={<FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' />}
+        />
+      );
+    }
+
+    if (features.directTimeline || features.conversations) {
+      return (
+        <SidebarNavigationLink
+          to='/messages'
+          icon={require('icons/mail.svg')}
+          text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
+        />
+      );
+    }
+
+    return null;
+  };
+
   return (
     <div>
       <div className='flex flex-col space-y-2'>
@@ -138,22 +164,7 @@ const SidebarNavigation = () => {
           </>
         )}
 
-        {account && (
+        {account && renderMessagesLink()}
-          features.chats ? (
-            <SidebarNavigationLink
-              to='/chats'
-              icon={require('@tabler/icons/icons/messages.svg')}
-              count={chatsCount}
-              text={<FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' />}
-            />
-          ) : (
-            <SidebarNavigationLink
-              to='/messages'
-              icon={require('icons/mail.svg')}
-              text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
-            />
-          )
-        )}
 
         {menu.length > 0 && (
           <DropdownMenu items={menu}>

app/soapbox/components/thumb_navigation.tsx

@@ -12,6 +12,34 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
   const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
   const features = getFeatures(useAppSelector((state) => state.instance));
 
+  /** Conditionally render the supported messages link */
+  const renderMessagesLink = (): React.ReactNode => {
+    if (features.chats) {
+      return (
+        <ThumbNavigationLink
+          src={require('@tabler/icons/icons/messages.svg')}
+          text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
+          to='/chats'
+          exact
+          count={chatsCount}
+        />
+      );
+    }
+
+    if (features.directTimeline || features.conversations) {
+      return (
+        <ThumbNavigationLink
+          src={require('@tabler/icons/icons/mail.svg')}
+          text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
+          to='/messages'
+          paths={['/messages', '/conversations']}
+        />
+      );
+    }
+
+    return null;
+  };
+
   return (
     <div className='thumb-navigation'>
       <ThumbNavigationLink
@@ -38,24 +66,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
         />
       )}
 
-      {account && (
+      {account && renderMessagesLink()}
-        features.chats ? (
-          <ThumbNavigationLink
-            src={require('@tabler/icons/icons/messages.svg')}
-            text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
-            to='/chats'
-            exact
-            count={chatsCount}
-          />
-        ) : (
-          <ThumbNavigationLink
-            src={require('@tabler/icons/icons/mail.svg')}
-            text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
-            to='/messages'
-            paths={['/messages', '/conversations']}
-          />
-        )
-      )}
 
       {(account && account.staff) && (
         <ThumbNavigationLink

app/soapbox/features/conversations/index.js

@@ -1,18 +1,20 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import { directComposeById } from 'soapbox/actions/compose';
+import AccountSearch from 'soapbox/components/account_search';
 
 import { mountConversations, unmountConversations, expandConversations } from '../../actions/conversations';
 import { connectDirectStream } from '../../actions/streaming';
-import { Card, CardBody, Column, Stack, Text } from '../../components/ui';
+import { Column } from '../../components/ui';
+
+import ConversationsListContainer from './containers/conversations_list_container';
 
 const messages = defineMessages({
   title: { id: 'column.direct', defaultMessage: 'Direct messages' },
   searchPlaceholder: { id: 'direct.search_placeholder', defaultMessage: 'Send a message to…' },
-  body: { id: 'direct.body', defaultMessage: 'A new direct messaging experience will be available soon. Please stay tuned.' },
 });
 
 export default @connect()
@@ -54,35 +56,20 @@ class ConversationsTimeline extends React.PureComponent {
     const { intl } = this.props;
 
     return (
-      <Column label={intl.formatMessage(messages.title)} transparent>
+      <Column label={intl.formatMessage(messages.title)}>
-        <Card variant='rounded'>
+        <AccountSearch
-          <CardBody>
+          placeholder={intl.formatMessage(messages.searchPlaceholder)}
-            <Stack space={2}>
+          onSelected={this.handleSuggestion}
-              <Text size='lg' align='center' weight='bold'>{intl.formatMessage(messages.title)}</Text>
+        />
-              <Text theme='muted' align='center'>{intl.formatMessage(messages.body)}</Text>
+
-            </Stack>
+        <ConversationsListContainer
-          </CardBody>
+          scrollKey='direct_timeline'
-        </Card>
+          timelineId='direct'
+          onLoadMore={this.handleLoadMore}
+          emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
+        />
       </Column>
     );
-
-    // return (
-    //   <Column label={intl.formatMessage(messages.title)}>
-    //     <ColumnHeader icon='envelope' active={hasUnread} title={intl.formatMessage(messages.title)} />
-
-    //     <AccountSearch
-    //       placeholder={intl.formatMessage(messages.searchPlaceholder)}
-    //       onSelected={this.handleSuggestion}
-    //     />
-
-    //     <ConversationsListContainer
-    //       scrollKey='direct_timeline'
-    //       timelineId='direct'
-    //       onLoadMore={this.handleLoadMore}
-    //       emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
-    //     />
-    //   </Column>
-    // );
   }
 
 }

app/soapbox/features/ui/index.tsx

@@ -187,8 +187,12 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
       {features.federating && <WrappedRoute path='/timeline/fediverse' exact page={HomePage} component={PublicTimeline} content={children} publicRoute />}
       {features.federating && <WrappedRoute path='/timeline/:instance' exact page={RemoteInstancePage} component={RemoteTimeline} content={children} />}
 
-      <WrappedRoute path='/conversations' page={DefaultPage} component={Conversations} content={children} />
+      {features.conversations && <WrappedRoute path='/conversations' page={DefaultPage} component={Conversations} content={children} />}
-      <WrappedRoute path='/messages' page={DefaultPage} component={features.directTimeline ? DirectTimeline : Conversations} content={children} />
+      {features.directTimeline ? (
+        <WrappedRoute path='/messages' page={DefaultPage} component={DirectTimeline} content={children} />
+      ) : (
+        <WrappedRoute path='/messages' page={DefaultPage} component={Conversations} content={children} />
+      )}
 
       {/* Gab groups */}
       {/*