Merge branch 'chats-small-changes' into 'develop'

Chats small changes

See merge request soapbox-pub/soapbox!1981

app/soapbox/components/helmet.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Helmet as ReactHelmet } from 'react-helmet';
 
+import { useStatContext } from 'soapbox/contexts/stat-context';
 import { useAppSelector, useInstance, useSettings } from 'soapbox/hooks';
 import { RootState } from 'soapbox/store';
 import FaviconService from 'soapbox/utils/favicon-service';
@@ -9,15 +10,15 @@ FaviconService.initFaviconService();
 
 const getNotifTotals = (state: RootState): number => {
   const notifications = state.notifications.unread || 0;
-  const chats = state.chats.items.reduce((acc: any, curr: any) => acc + Math.min(curr.get('unread', 0), 1), 0);
   const reports = state.admin.openReports.count();
   const approvals = state.admin.awaitingApproval.count();
-  return notifications + chats + reports + approvals;
+  return notifications + reports + approvals;
 };
 
 const Helmet: React.FC = ({ children }) => {
   const instance = useInstance();
-  const unreadCount = useAppSelector((state) => getNotifTotals(state));
+  const { unreadChatsCount } = useStatContext();
+  const unreadCount = useAppSelector((state) => getNotifTotals(state) + unreadChatsCount);
   const demetricator = useSettings().get('demetricator');
 
   const hasUnreadNotifications = React.useMemo(() => !(unreadCount < 1 || demetricator), [unreadCount, demetricator]);

app/soapbox/features/chats/components/chat-message-list.tsx

@@ -307,7 +307,9 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
                 title={getFormattedTimestamp(chatMessage)}
                 className={
                   classNames({
-                    'text-ellipsis break-words relative rounded-md py-2 px-3 max-w-full space-y-2': true,
+                    'text-ellipsis break-words relative rounded-md py-2 px-3 max-w-full space-y-2 [&_.mention]:underline': true,
+                    '[&_.mention]:text-primary-600 dark:[&_.mention]:text-accent-blue': !isMyMessage,
+                    '[&_.mention]:text-white dark:[&_.mention]:white': isMyMessage,
                     'bg-primary-500 text-white': isMyMessage,
                     'bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100': !isMyMessage,
                     '!bg-transparent !p-0 emoji-lg': isOnlyEmoji,

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

@@ -28,7 +28,7 @@ const BlankslateEmpty: React.FC<IBlankslate> = () => {
         <Text size='sm' theme='muted' align='center'>
           <FormattedMessage
             id='chats.main.blankslate.subtitle'
-            defaultMessage='You can start a chat with anyone that follows you'
+            defaultMessage='Search for someone to chat with'
           />
         </Text>
       </Stack>

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

@@ -13,7 +13,7 @@ type FormData = {
 
 const messages = defineMessages({
   title: { id: 'chat.welcome.title', defaultMessage: 'Welcome to {br} Chats!' },
-  subtitle: { id: 'chat.welcome.subtitle', defaultMessage: 'Exchange private messages with other users.' },
+  subtitle: { id: 'chat.welcome.subtitle', defaultMessage: 'Exchange direct messages with other users.' },
   acceptingMessageLabel: { id: 'chat.welcome.accepting_messages.label', defaultMessage: 'Allow users to start a new chat with you' },
   notice: { id: 'chat.welcome.notice', defaultMessage: 'You can change these settings later.' },
   submit: { id: 'chat.welcome.submit', defaultMessage: 'Save & Continue' },

app/soapbox/features/chats/components/chat-pane/blankslate.tsx

@@ -5,7 +5,7 @@ import { Button, Stack, Text } from 'soapbox/components/ui';
 
 const messages = defineMessages({
   title: { id: 'chat_search.empty_results_blankslate.title', defaultMessage: 'No messages yet' },
-  body: { id: 'chat_search.empty_results_blankslate.body', defaultMessage: 'You can start a chat with anyone that follows you.' },
+  body: { id: 'chat_search.empty_results_blankslate.body', defaultMessage: 'Search for someone to chat with.' },
   action: { id: 'chat_search.empty_results_blankslate.action', defaultMessage: 'Message someone' },
 });
 

app/soapbox/features/chats/components/chat-search/blankslate.tsx

@@ -4,8 +4,8 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Stack, Text } from 'soapbox/components/ui';
 
 const messages = defineMessages({
-  title: { id: 'chat_search.blankslate.title', defaultMessage: 'Search followers' },
-  body: { id: 'chat_search.blankslate.body', defaultMessage: 'You can start a chat with anyone that follows you.' },
+  title: { id: 'chat_search.blankslate.title', defaultMessage: 'Start a chat' },
+  body: { id: 'chat_search.blankslate.body', defaultMessage: 'Search for someone to chat with.' },
 });
 
 const Blankslate = () => {

app/soapbox/queries/chats.ts

@@ -253,7 +253,6 @@ const useChatActions = (chatId: string) => {
               return {
                 ...page,
                 result: [
-                  ...page.result,
                   normalizeChatMessage({
                     content: variables.content,
                     id: String(Number(new Date())),
@@ -262,6 +261,7 @@ const useChatActions = (chatId: string) => {
                     pending: true,
                     unread: true,
                   }),
+                  ...page.result,
                 ],
               };
             }