Add welcome screen to Chats main page

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Card } from 'soapbox/components/ui';
+import { Card, Stack } from 'soapbox/components/ui';
 
 import ChatPageMain from './components/chat-page-main';
 import ChatPageSidebar from './components/chat-page-sidebar';
@@ -9,8 +9,15 @@ const ChatPage = () => {
   return (
     <Card className='p-0 h-[calc(100vh-176px)] overflow-hidden' variant='rounded'>
       <div className='grid grid-cols-9 overflow-hidden h-full dark:divide-x-2 dark:divide-solid dark:divide-gray-800'>
+        <Stack
+          className='col-span-3 p-6 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset'
+        >
           <ChatPageSidebar />
+        </Stack>
+
+        <Stack className='col-span-6 h-full overflow-hidden'>
           <ChatPageMain />
+        </Stack>
       </div>
     </Card>
   );

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

@@ -1,18 +1,23 @@
+import { useMutation } from '@tanstack/react-query';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { blockAccount } from 'soapbox/actions/accounts';
+import { patchMeSuccess } from 'soapbox/actions/me';
 import { openModal } from 'soapbox/actions/modals';
 import { initReport } from 'soapbox/actions/reports';
+import snackbar from 'soapbox/actions/snackbar';
 import List, { ListItem } from 'soapbox/components/list';
-import { Avatar, Divider, HStack, Icon, IconButton, Menu, MenuButton, MenuItem, MenuList, Stack, Text, Toggle } from 'soapbox/components/ui';
+import { Avatar, CardBody, CardHeader, CardTitle, Divider, HStack, Icon, IconButton, Menu, MenuButton, MenuItem, MenuList, Stack, Text, Toggle } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification_badge';
 import { useChatContext } from 'soapbox/contexts/chat-context';
-import { useAppDispatch } from 'soapbox/hooks';
+import { useApi, useAppDispatch, useOwnAccount } from 'soapbox/hooks';
 import { useChat, useChatSilence } from 'soapbox/queries/chats';
 
 import Chat from '../../chat';
 
+import Welcome from './welcome';
+
 const messages = defineMessages({
   blockMessage: { id: 'chat_settings.block.message', defaultMessage: 'Blocking will prevent this profile from direct messaging you and viewing your content. You can unblock later.' },
   blockHeading: { id: 'chat_settings.block.heading', defaultMessage: 'Block @{acct}' },
@@ -28,6 +33,8 @@ const messages = defineMessages({
 const ChatPageMain = () => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
+  const account = useOwnAccount();
+  const api = useApi();
 
   const { chat } = useChatContext();
   const { isSilenced, handleSilence } = useChatSilence(chat);
@@ -55,9 +62,17 @@ const ChatPageMain = () => {
 
   const handleReportChat = () => dispatch(initReport(chat?.account as any));
 
+  if (!account?.chats_onboarded) {
+    return (
+      <Welcome />
+    );
+  }
+
+  if (!chat) {
+    return null;
+  }
+
   return (
-    <Stack className='col-span-6 h-full overflow-hidden'>
-      {chat && (
     <Stack className='h-full overflow-hidden'>
       <HStack alignItems='center' justifyContent='between' space={2} className='px-4 py-2 w-full'>
         <HStack alignItems='center' space={2} className='overflow-hidden'>
@@ -153,8 +168,6 @@ const ChatPageMain = () => {
         <Chat className='h-full overflow-hidden' chat={chat} />
       </div>
     </Stack>
-      )}
-    </Stack>
   );
 };
 

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

@@ -1,17 +1,18 @@
+import { useMutation } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
 
-import { launchChat } from 'soapbox/actions/chats';
+import snackbar from 'soapbox/actions/snackbar';
 import AccountSearch from 'soapbox/components/account_search';
 import { CardTitle, Stack } from 'soapbox/components/ui';
 import { useChatContext } from 'soapbox/contexts/chat-context';
 import { useAppDispatch } from 'soapbox/hooks';
+import { IChat, useChats } from 'soapbox/queries/chats';
+import { queryClient } from 'soapbox/queries/client';
 
 import ChatList from '../../chat-list';
 
-import type { IChat } from 'soapbox/queries/chats';
-
 const messages = defineMessages({
   title: { id: 'column.chats', defaultMessage: 'Messages' },
   searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Start a chat with…' },
@@ -19,22 +20,32 @@ const messages = defineMessages({
 
 const ChatPageSidebar = () => {
   const dispatch = useAppDispatch();
-  const history = useHistory();
   const intl = useIntl();
 
   const { setChat } = useChatContext();
+  const { getOrCreateChatByAccountId } = useChats();
 
   const handleSuggestion = (accountId: string) => {
-    dispatch(launchChat(accountId, history, true));
+    handleClickOnSearchResult.mutate(accountId);
   };
 
+  const handleClickOnSearchResult = useMutation((accountId: string) => {
+    return getOrCreateChatByAccountId(accountId);
+  }, {
+    onError: (error: AxiosError) => {
+      const data = error.response?.data as any;
+      dispatch(snackbar.error(data?.error));
+    },
+    onSuccess: (response) => {
+      setChat(response.data);
+      queryClient.invalidateQueries(['chats']);
+    },
+  });
+
   const handleClickChat = (chat: IChat) => setChat(chat);
 
   return (
-    <Stack
+    <Stack space={6} className='h-full'>
-      className='col-span-3 p-6 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset'
-      space={6}
-    >
       <CardTitle title={intl.formatMessage(messages.title)} />
 
       <AccountSearch

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

@@ -0,0 +1,70 @@
+import { useMutation } from '@tanstack/react-query';
+import React, { useState } from 'react';
+
+import { patchMeSuccess } from 'soapbox/actions/me';
+import snackbar from 'soapbox/actions/snackbar';
+import List, { ListItem } from 'soapbox/components/list';
+import { Button, CardBody, CardTitle, Form, Stack, Toggle } from 'soapbox/components/ui';
+import { useApi, useAppDispatch, useOwnAccount } from 'soapbox/hooks';
+
+type FormData = {
+  accepting_messages?: boolean
+  chats_onboarded: boolean
+}
+
+const Welcome = () => {
+  const account = useOwnAccount();
+  const api = useApi();
+  const dispatch = useAppDispatch();
+
+  const [data, setData] = useState<FormData>({
+    chats_onboarded: true,
+    accepting_messages: account?.accepting_messages,
+  });
+
+  const updateSettings = useMutation(() => api.patch('/api/v1/accounts/update_credentials', data), {
+    onSuccess(response) {
+      dispatch(patchMeSuccess(response.data));
+      dispatch(snackbar.success('Chat Settings updated successfully'));
+    },
+    onError() {
+      dispatch(snackbar.success('Chat Settings failed to update.'));
+    },
+  });
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+
+    updateSettings.mutate();
+  };
+
+  return (
+    <Stack className='h-full p-6 space-y-8'>
+      <CardTitle title='Message Settings' />
+
+      <Form onSubmit={handleSubmit}>
+        <CardTitle title='Privacy' />
+
+        <CardBody>
+          <List>
+            <ListItem
+              label='Allow others to message me'
+              hint='Only people I follow can send me messages'
+            >
+              <Toggle
+                checked={data.accepting_messages}
+                onChange={(event) => setData((prevData) => ({ ...prevData, accepting_messages: event.target.checked }))}
+              />
+            </ListItem>
+          </List>
+        </CardBody>
+
+        <Button type='submit' theme='primary'>
+          Save & Continue
+        </Button>
+      </Form>
+    </Stack>
+  );
+};
+
+export default Welcome;

app/soapbox/normalizers/account.ts

@@ -21,11 +21,13 @@ import type { Emoji, Field, EmbeddedEntity, Relationship } from 'soapbox/types/e
 
 // https://docs.joinmastodon.org/entities/account/
 export const AccountRecord = ImmutableRecord({
+  accepting_messages: false,
   acct: '',
   avatar: '',
   avatar_static: '',
   birthday: '',
   bot: false,
+  chats_onboarded: false,
   created_at: '',
   discoverable: false,
   display_name: '',