Refactor mobile chat into modal (#3038)

* feat(mobile): refactor mobile chat into modal

- Make page always scrollable
- Move mobile chat into a standalone modal

* fix(test): split out mobile browser test specs

* fix(mobile): force chat button to render on top of footer

* fix: some small updates from review

* fix: hide/show hide chat menu option based on width

* fix: chat button icon getting cut off

* chore(tests): add browser tests for mobile chat modal

* chore(tests): add story for ChatModal component

* fix(test): quiet shellcheck

* fix: remove unused import

* fix(tests): silence storybook linting warning

* fix(ui): reposition chat modal button icon with transform

web/components/ui/Content/Content.tsx

@@ -1,5 +1,6 @@
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { Skeleton, Col, Row } from 'antd';
+import { Skeleton, Col, Row, Button } from 'antd';
+import MessageFilled from '@ant-design/icons/MessageFilled';
 import { FC, useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
 import classnames from 'classnames';
@@ -11,7 +12,6 @@ import {
   clientConfigStateAtom,
   chatMessagesAtom,
   currentUserAtom,
-  isChatAvailableSelector,
   isChatVisibleSelector,
   appStateAtom,
   isOnlineSelector,
@@ -32,6 +32,7 @@ import { ExternalAction } from '../../../interfaces/external-action';
 import { Modal } from '../Modal/Modal';
 import { DesktopContent } from './DesktopContent';
 import { MobileContent } from './MobileContent';
+import { ChatModal } from '../../modals/ChatModal/ChatModal';
 
 // Lazy loaded components
 
@@ -91,7 +92,6 @@ export const Content: FC = () => {
   const appState = useRecoilValue<AppStateOptions>(appStateAtom);
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
   const isChatVisible = useRecoilValue<boolean>(isChatVisibleSelector);
-  const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector);
   const currentUser = useRecoilValue(currentUserAtom);
   const serverStatus = useRecoilValue<ServerStatus>(serverStatusState);
   const [isMobile, setIsMobile] = useRecoilState<boolean | undefined>(isMobileAtom);
@@ -124,6 +124,8 @@ export const Content: FC = () => {
   const [supportsBrowserNotifications, setSupportsBrowserNotifications] = useState(false);
   const supportFediverseFeatures = fediverseEnabled;
 
+  const [showChatModal, setShowChatModal] = useState(false);
+
   const externalActionSelected = (action: ExternalAction) => {
     const { openExternally, url } = action;
     // apply openExternally only if we don't have an HTML embed
@@ -262,12 +264,8 @@ export const Content: FC = () => {
               tags={tags}
               socialHandles={socialHandles}
               extraPageContent={extraPageContent}
-              messages={messages}
-              currentUser={currentUser}
-              showChat={showChat}
               setShowFollowModal={setShowFollowModal}
               supportFediverseFeatures={supportFediverseFeatures}
-              chatEnabled={isChatAvailable}
               online={online}
             />
           ) : (
@@ -305,6 +303,24 @@ export const Content: FC = () => {
           handleClose={() => setShowFollowModal(false)}
         />
       </Modal>
+      {showChatModal && isChatVisible && (
+        <ChatModal
+          messages={messages}
+          currentUser={currentUser}
+          handleClose={() => setShowChatModal(false)}
+        />
+      )}
+      {isChatVisible && (
+        <Button
+          id="mobile-chat-button"
+          type="primary"
+          onClick={() => setShowChatModal(true)}
+          className={styles.floatingMobileChatModalButton}
+          style={{ zIndex: 99 }}
+        >
+          Chat <MessageFilled style={{ transform: 'translateX(-1px)' }} />
+        </Button>
+      )}
     </>
   );
 };