Fix mobile navigation on Chats

app/soapbox/features/chats/components/chat-page/chat-page.tsx

@@ -1,10 +1,9 @@
 import classNames from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { matchPath, Route, Switch, useHistory } from 'react-router-dom';
 
 import { Stack } from 'soapbox/components/ui';
 import { useOwnAccount } from 'soapbox/hooks';
-import { useChat } from 'soapbox/queries/chats';
 
 import ChatPageMain from './components/chat-page-main';
 import ChatPageNew from './components/chat-page-new';
@@ -18,9 +17,15 @@ interface IChatPage {
 
 const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
   const account = useOwnAccount();
+  const history = useHistory();
+
   const isOnboarded = account?.chats_onboarded;
 
-  const { data: chat } = useChat(chatId);
+  const path = history.location.pathname;
+  const isSidebarHidden = matchPath(path, {
+    path: ['/chats/settings', '/chats/new', '/chats/:chatId'],
+    exact: true,
+  });
 
   const containerRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<string | number>('100%');
@@ -61,7 +66,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
         <div className='grid grid-cols-9 overflow-hidden h-full dark:divide-x-2 dark:divide-solid dark:divide-gray-800'>
           <Stack
             className={classNames('col-span-9 sm:col-span-3 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset', {
-              'hidden sm:block': chat,
+              'hidden sm:block': isSidebarHidden,
             })}
           >
             <ChatPageSidebar />
@@ -69,7 +74,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
 
           <Stack
             className={classNames('col-span-9 sm:col-span-6 h-full overflow-hidden', {
-              'hidden sm:block': !chat,
+              'hidden sm:block': !isSidebarHidden,
             })}
           >
             <Switch>

app/soapbox/features/chats/components/chat-page/components/chat-page-new.tsx

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import AccountSearch from 'soapbox/components/account_search';
-import { CardTitle, HStack, Stack, Text } from 'soapbox/components/ui';
+import { CardTitle, HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
 import { ChatKeys, useChats } from 'soapbox/queries/chats';
 import { queryClient } from 'soapbox/queries/client';
 
@@ -23,8 +23,16 @@ const ChatPageNew: React.FC<IChatPageNew> = () => {
 
   return (
     <Stack className='h-full'>
-      <Stack className='flex-grow p-6 space-y-4'>
+      <Stack className='flex-grow py-6 px-4 sm:p-6 space-y-4'>
+        <HStack alignItems='center'>
+          <IconButton
+            src={require('@tabler/icons/arrow-left.svg')}
+            className='sm:hidden h-7 w-7 mr-2 sm:mr-0'
+            onClick={() => history.push('/chats')}
+          />
+
           <CardTitle title='New Message' />
+        </HStack>
 
         <HStack space={2} alignItems='center'>
           <Text>

app/soapbox/features/chats/components/chat-page/components/chat-page-settings.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
 
 import List, { ListItem } from 'soapbox/components/list';
-import { Button, CardBody, CardTitle, Form, Stack, Toggle } from 'soapbox/components/ui';
+import { Button, CardBody, CardTitle, Form, HStack, IconButton, Stack, Toggle } from 'soapbox/components/ui';
 import { useOwnAccount } from 'soapbox/hooks';
 import { useUpdateCredentials } from 'soapbox/queries/accounts';
 
@@ -21,6 +22,7 @@ const messages = defineMessages({
 const ChatPageSettings = () => {
   const account = useOwnAccount();
   const intl = useIntl();
+  const history = useHistory();
   const updateCredentials = useUpdateCredentials();
 
   const [data, setData] = useState<FormData>({
@@ -35,8 +37,16 @@ const ChatPageSettings = () => {
   };
 
   return (
-    <Stack className='h-full p-6 space-y-8'>
+    <Stack className='h-full py-6 px-4 sm:p-6 space-y-8'>
+      <HStack alignItems='center'>
+        <IconButton
+          src={require('@tabler/icons/arrow-left.svg')}
+          className='sm:hidden h-7 w-7 mr-2 sm:mr-0'
+          onClick={() => history.push('/chats')}
+        />
+
         <CardTitle title={intl.formatMessage(messages.title)} />
+      </HStack>
 
       <Form onSubmit={handleSubmit}>
         <CardTitle title={intl.formatMessage(messages.privacy)} />