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'>
-        <ChatPageSidebar />
+        <Stack
-        <ChatPageMain />
+          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,105 +62,111 @@ 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'>
+    <Stack className='h-full overflow-hidden'>
-      {chat && (
+      <HStack alignItems='center' justifyContent='between' space={2} className='px-4 py-2 w-full'>
-        <Stack className='h-full overflow-hidden'>
+        <HStack alignItems='center' space={2} className='overflow-hidden'>
-          <HStack alignItems='center' justifyContent='between' space={2} className='px-4 py-2 w-full'>
+          <Avatar src={chat.account?.avatar} size={40} className='flex-none' />
-            <HStack alignItems='center' space={2} className='overflow-hidden'>
-              <Avatar src={chat.account?.avatar} size={40} className='flex-none' />
 
-              <Stack alignItems='start' className='overflow-hidden'>
+          <Stack alignItems='start' className='overflow-hidden'>
-                <div className='flex items-center space-x-1 flex-grow w-full'>
+            <div className='flex items-center space-x-1 flex-grow w-full'>
-                  <Text weight='bold' size='sm' align='left' truncate>{chat.account?.display_name || `@${chat.account.username}`}</Text>
+              <Text weight='bold' size='sm' align='left' truncate>{chat.account?.display_name || `@${chat.account.username}`}</Text>
-                  {chat.account?.verified && <VerificationBadge />}
+              {chat.account?.verified && <VerificationBadge />}
-                </div>
+            </div>
 
-                <Text
+            <Text
-                  align='left'
+              align='left'
-                  size='sm'
+              size='sm'
-                  weight='medium'
+              weight='medium'
-                  theme='muted'
+              theme='muted'
-                  truncate
+              truncate
-                  className='w-full'
+              className='w-full'
-                >
+            >
-                  {chat.account.acct}
+              {chat.account.acct}
-                </Text>
+            </Text>
-              </Stack>
+          </Stack>
-            </HStack>
+        </HStack>
 
-            <Menu>
+        <Menu>
-              <MenuButton
+          <MenuButton
-                as={IconButton}
+            as={IconButton}
-                src={require('@tabler/icons/info-circle.svg')}
+            src={require('@tabler/icons/info-circle.svg')}
-                iconClassName='w-5 h-5 text-gray-600'
+            iconClassName='w-5 h-5 text-gray-600'
-                children={null}
+            children={null}
-              />
+          />
 
-              <MenuList className='w-80 py-6'>
+          <MenuList className='w-80 py-6'>
-                <Stack space={4} className='w-5/6 mx-auto'>
+            <Stack space={4} className='w-5/6 mx-auto'>
-                  <Stack alignItems='center' space={2}>
+              <Stack alignItems='center' space={2}>
-                    <Avatar src={chat.account.avatar_static} size={75} />
+                <Avatar src={chat.account.avatar_static} size={75} />
-                    <Stack>
+                <Stack>
-                      <Text size='lg' weight='semibold' align='center'>{chat.account.display_name}</Text>
+                  <Text size='lg' weight='semibold' align='center'>{chat.account.display_name}</Text>
-                      <Text theme='primary' align='center'>@{chat.account.acct}</Text>
+                  <Text theme='primary' align='center'>@{chat.account.acct}</Text>
-                    </Stack>
-                  </Stack>
-
-                  <Divider />
-
-                  <List>
-                    <ListItem label='Silence notifications'>
-                      <Toggle checked={isSilenced} onChange={handleSilence} />
-                    </ListItem>
-                  </List>
-
-                  <Divider />
-
-                  <Stack space={2}>
-                    <MenuItem
-                      as='button'
-                      onSelect={handleBlockUser}
-                      className='!px-0 hover:!bg-transparent'
-                    >
-                      <div className='w-full flex items-center space-x-2 font-bold text-sm text-primary-500 dark:text-accent-blue'>
-                        <Icon src={require('@tabler/icons/ban.svg')} className='w-5 h-5' />
-                        <span>{intl.formatMessage(messages.blockUser, { acct: chat.account.acct })}</span>
-                      </div>
-                    </MenuItem>
-
-                    <MenuItem
-                      as='button'
-                      onSelect={handleReportChat}
-                      className='!px-0 hover:!bg-transparent'
-                    >
-                      <div className='w-full flex items-center space-x-2 font-bold text-sm text-primary-500 dark:text-accent-blue'>
-                        <Icon src={require('@tabler/icons/flag.svg')} className='w-5 h-5' />
-                        <span>{intl.formatMessage(messages.reportUser, { acct: chat.account.acct })}</span>
-                      </div>
-                    </MenuItem>
-
-                    <MenuItem
-                      as='button'
-                      onSelect={handleLeaveChat}
-                      className='!px-0 hover:!bg-transparent'
-                    >
-                      <div className='w-full flex items-center space-x-2 font-bold text-sm text-danger-600 dark:text-danger-500'>
-                        <Icon src={require('@tabler/icons/logout.svg')} className='w-5 h-5' />
-                        <span>{intl.formatMessage(messages.leaveChat)}</span>
-                      </div>
-                    </MenuItem>
-                  </Stack>
                 </Stack>
-              </MenuList>
+              </Stack>
-            </Menu>
-          </HStack>
 
-          <div className='h-full overflow-hidden'>
+              <Divider />
-            <Chat className='h-full overflow-hidden' chat={chat} />
+
-          </div>
+              <List>
-        </Stack>
+                <ListItem label='Silence notifications'>
-      )}
+                  <Toggle checked={isSilenced} onChange={handleSilence} />
+                </ListItem>
+              </List>
+
+              <Divider />
+
+              <Stack space={2}>
+                <MenuItem
+                  as='button'
+                  onSelect={handleBlockUser}
+                  className='!px-0 hover:!bg-transparent'
+                >
+                  <div className='w-full flex items-center space-x-2 font-bold text-sm text-primary-500 dark:text-accent-blue'>
+                    <Icon src={require('@tabler/icons/ban.svg')} className='w-5 h-5' />
+                    <span>{intl.formatMessage(messages.blockUser, { acct: chat.account.acct })}</span>
+                  </div>
+                </MenuItem>
+
+                <MenuItem
+                  as='button'
+                  onSelect={handleReportChat}
+                  className='!px-0 hover:!bg-transparent'
+                >
+                  <div className='w-full flex items-center space-x-2 font-bold text-sm text-primary-500 dark:text-accent-blue'>
+                    <Icon src={require('@tabler/icons/flag.svg')} className='w-5 h-5' />
+                    <span>{intl.formatMessage(messages.reportUser, { acct: chat.account.acct })}</span>
+                  </div>
+                </MenuItem>
+
+                <MenuItem
+                  as='button'
+                  onSelect={handleLeaveChat}
+                  className='!px-0 hover:!bg-transparent'
+                >
+                  <div className='w-full flex items-center space-x-2 font-bold text-sm text-danger-600 dark:text-danger-500'>
+                    <Icon src={require('@tabler/icons/logout.svg')} className='w-5 h-5' />
+                    <span>{intl.formatMessage(messages.leaveChat)}</span>
+                  </div>
+                </MenuItem>
+              </Stack>
+            </Stack>
+          </MenuList>
+        </Menu>
+      </HStack>
+
+      <div className='h-full overflow-hidden'>
+        <Chat className='h-full overflow-hidden' chat={chat} />
+      </div>
     </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: '',