feat: rework conversations ui (#443)

Author: Cl0v1s

app/soapbox/__fixtures__/intlMessages.json

@@ -60,7 +60,7 @@
     "bundle_modal_error.retry": "Try again",
     "column.blocks": "Blocked users",
     "column.community": "Local timeline",
-    "column.direct": "Direct messages",
+    "column.direct": "Conversations",
     "column.domain_blocks": "Hidden domains",
     "column.edit_profile": "Edit profile",
     "column.filters": "Muted words",
@@ -538,7 +538,7 @@
   "bundle_modal_error.retry": "Try again",
   "column.blocks": "Blocked users",
   "column.community": "Local timeline",
-  "column.direct": "Direct messages",
+  "column.direct": "Conversations",
   "column.domain_blocks": "Hidden domains",
   "column.edit_profile": "Edit profile",
   "column.filters": "Muted words",

app/soapbox/actions/compose.ts

@@ -212,26 +212,25 @@ const mentionCompose = (account: Account) =>
     dispatch(openModal('COMPOSE'));
   };
 
-const directCompose = (account: Account) =>
+const directCompose = (history: History, account: Account) =>
   (dispatch: AppDispatch) => {
+    dispatch(resetCompose());
     dispatch({
       type: COMPOSE_DIRECT,
       account: account,
     });
-
-    dispatch(openModal('COMPOSE'));
+    history.push('/statuses/compose');
   };
 
-const directComposeById = (accountId: string) =>
+const directComposeById = (history: History, accountId: string) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const account = getState().accounts.get(accountId);
-
+    dispatch(resetCompose());
     dispatch({
       type: COMPOSE_DIRECT,
       account: account,
     });
-
-    dispatch(openModal('COMPOSE'));
+    history.push('/statuses/compose');
   };
 
 const handleComposeSubmit = (dispatch: AppDispatch, getState: () => RootState, data: APIEntity, status: string, edit?: boolean) => {

app/soapbox/actions/timelines.ts

@@ -204,9 +204,6 @@ const expandRemoteTimeline = (instance: string, { maxId, onlyMedia, excludeRepli
 const expandCommunityTimeline = ({ maxId, onlyMedia, excludeReplies }: Record<string, any> = {}, done = noOp) =>
   expandTimeline(`community${onlyMedia ? ':media' : ''}${excludeReplies ? ':exclude_replies' : ''}`, '/api/v1/timelines/public', { local: true, max_id: maxId, only_media: !!onlyMedia, exclude_replies: excludeReplies }, done);
 
-const expandDirectTimeline = ({ maxId }: Record<string, any> = {}, done = noOp) =>
-  expandTimeline('direct', '/api/v1/timelines/direct', { max_id: maxId }, done);
-
 const expandAccountTimeline = (accountId: string, { maxId, withReplies }: Record<string, any> = {}) =>
   expandTimeline(`account:${accountId}${withReplies ? ':with_replies' : ''}`, `/api/v1/accounts/${accountId}/statuses`, { exclude_replies: !withReplies, max_id: maxId, with_muted: true });
 
@@ -307,7 +304,6 @@ export {
   expandPublicTimeline,
   expandRemoteTimeline,
   expandCommunityTimeline,
-  expandDirectTimeline,
   expandAccountTimeline,
   expandAccountFeaturedTimeline,
   expandAccountMediaTimeline,

app/soapbox/components/sidebar-navigation.tsx

@@ -114,11 +114,11 @@ const SidebarNavigation = () => {
             />
 
             {
-              (features.directTimeline || features.conversations) && (
+              (features.conversations) && (
                 <SidebarNavigationLink
-                  to='/messages'
-                  icon={require('@tabler/icons/mail.svg')}
-                  text={<FormattedMessage id='column.direct' defaultMessage='Direct messages' />}
+                  to='/conversations'
+                  icon={require('@tabler/icons/messages.svg')}
+                  text={<FormattedMessage id='column.direct' defaultMessage='Conversations' />}
                 />
               )
             }

app/soapbox/components/sidebar_menu.tsx

@@ -34,7 +34,7 @@ const messages = defineMessages({
   invites: { id: 'navigation_bar.invites', defaultMessage: 'Invites' },
   developers: { id: 'navigation.developers', defaultMessage: 'Developers' },
   addAccount: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
-  direct: { id: 'column.direct', defaultMessage: 'Direct messages' },
+  direct: { id: 'column.direct', defaultMessage: 'Conversations' },
   directory: { id: 'navigation_bar.profile_directory', defaultMessage: 'Profile directory' },
   dashboard: { id: 'tabs_bar.dashboard', defaultMessage: 'Dashboard' },
   tags: { id: 'navigation_bar.tags', defaultMessage: 'Hashtags' },
@@ -278,12 +278,12 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                     />
 
                     {
-                      (features.directTimeline || features.conversations) && (
+                      (features.conversations) && (
                         <SidebarLink
                           onClick={onClose}
-                          to='/messages'
-                          icon={require('@tabler/icons/mail.svg')}
-                          text={<FormattedMessage id='column.direct' defaultMessage='Direct messages' />}
+                          to='/conversations'
+                          icon={require('@tabler/icons/messages.svg')}
+                          text={<FormattedMessage id='column.direct' defaultMessage='Conversations' />}
                         />
                       )
                     }

app/soapbox/components/status-action-bar.tsx

@@ -144,8 +144,8 @@ const StatusActionBarMenu: React.FC<IStatusActionBarMenu> = ({ status, withDismi
 
   const handleDirectClick = React.useCallback<React.EventHandler<React.MouseEvent>>((e) => {
     e.stopPropagation();
-    dispatch(directCompose(status.account as Account));
-  }, [dispatch, status.account]);
+    dispatch(directCompose(history, status.account as Account));
+  }, [dispatch, history, status.account]);
 
   const handleMuteClick = React.useCallback<React.EventHandler<React.MouseEvent>>((e) => {
     e.stopPropagation();

app/soapbox/features/account/components/header.tsx

@@ -134,7 +134,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
   }, [account, dispatch]);
 
   const onDirect = useCallback(() => {
-    dispatch(directCompose(account));
+    dispatch(directCompose(history, account));
   }, [account, dispatch]);
 
   const onReblogToggle = useCallback(() => {

app/soapbox/features/conversations/components/conversation.tsx

@@ -1,60 +1,84 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
+import { HotKeys } from 'react-hotkeys';
 import { useHistory } from 'react-router-dom';
 
 import { markConversationRead } from 'soapbox/actions/conversations';
-import StatusContainer from 'soapbox/containers/status_container';
+import Account from 'soapbox/components/account';
+import { Icon } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { Account as AccountEntity, Status } from 'soapbox/types/entities';
 
 interface IConversation {
+  className?: string,
   conversationId: string,
   onMoveUp: (id: string) => void,
   onMoveDown: (id: string) => void,
 }
 
-const Conversation: React.FC<IConversation> = ({ conversationId, onMoveUp, onMoveDown }) => {
+const Conversation: React.FC<IConversation> = ({ conversationId, onMoveUp, onMoveDown, className }) => {
   const dispatch = useAppDispatch();
   const history = useHistory();
 
-  const { accounts, unread, lastStatusId } = useAppSelector((state) => {
+  const { accounts, unread, lastStatusId, lastStatus } = useAppSelector((state) => {
     const conversation = state.conversations.items.find(x => x.id === conversationId)!;
 
     return {
-      accounts: conversation.accounts.map((accountId: string) => state.accounts.get(accountId, null)!),
+      accounts: conversation.accounts.map((accountId: string) => state.accounts.get<AccountEntity>(accountId, null)!),
       unread: conversation.unread,
+      lastStatus: state.statuses.get<Status>(conversation.last_status, null)!,
       lastStatusId: conversation.last_status || null,
     };
   });
 
-  const handleClick = () => {
+  const handleClick = useCallback(() => {
     if (unread) {
       dispatch(markConversationRead(conversationId));
     }
-
     history.push(`/statuses/${lastStatusId}`);
-  };
+  }, [conversationId, dispatch, history, lastStatusId, unread]);
 
-  const handleHotkeyMoveUp = () => {
+  const handleHotkeyMoveUp = useCallback(() => {
     onMoveUp(conversationId);
-  };
+  }, [conversationId, onMoveUp]);
 
-  const handleHotkeyMoveDown = () => {
+  const handleHotkeyMoveDown = useCallback(() => {
     onMoveDown(conversationId);
-  };
+  }, [conversationId, onMoveDown]);
+
+  const handlers = useMemo(() => {
+    return {
+      open: handleClick,
+      moveUp: handleHotkeyMoveUp,
+      moveDown: handleHotkeyMoveDown,
+    };
+  }, [handleClick, handleHotkeyMoveDown, handleHotkeyMoveUp]);
 
   if (lastStatusId === null) {
     return null;
   }
 
   return (
-    // @ts-ignore
-    <StatusContainer
-      id={lastStatusId}
-      unread={unread}
-      otherAccounts={accounts}
-      onMoveUp={handleHotkeyMoveUp}
-      onMoveDown={handleHotkeyMoveDown}
-      onClick={handleClick}
-    />
+    <HotKeys handlers={handlers} data-testid='status'>
+      <div onClick={handleClick} role='button' tabIndex={0} className={`bg-white dark:bg-slate-800 px-4 py-6 sm:shadow-sm dark:shadow-inset sm:p-5 sm:rounded-xl ${className}`}>
+        <div className='flex justify-between gap-3'>
+          <div className='flex gap-2 grow'>
+            {accounts.map((a) => <Account withLinkToProfile={false} account={a} />)}
+          </div>
+          <Icon
+            src={require('@tabler/icons/messages.svg')}
+            count={unread ? 1 : 0}
+            className='h-6 w-6 dark:group-hover:text-primary-500'
+          />
+        </div>
+        <div className='flex justify-between mt-3 items-end gap-2'>
+          <div style={{ 'whiteSpace': 'nowrap' }} className='overflow-x-hidden text-ellipsis text-gray-700 dark:text-gray-300' dangerouslySetInnerHTML={{ __html: lastStatus.contentHtml.replace(/<br.*>/, '') }} />
+          <div className='text-gray-300 dark:text-gray-300 text-xs'>
+            {new Date(lastStatus.get('created_at')).toLocaleDateString(undefined, { day: '2-digit', month: '2-digit', year: 'numeric' })}
+          </div>
+        </div>
+
+      </div>
+    </HotKeys>
   );
 };
 

app/soapbox/features/conversations/components/conversations_list.tsx

@@ -55,11 +55,12 @@ const ConversationsList: React.FC = () => {
       scrollKey='direct'
       ref={ref}
       isLoading={isLoading}
-      showLoading={isLoading && conversations.size === 0}
+      showLoading={isLoading}
       emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
     >
       {conversations.map((item: any) => (
         <Conversation
+          className='my-3'
           key={item.id}
           conversationId={item.id}
           onMoveUp={handleMoveUp}

app/soapbox/features/conversations/index.tsx

@@ -1,23 +1,26 @@
 import React, { useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
 
 import { directComposeById } from 'soapbox/actions/compose';
 import { mountConversations, unmountConversations, expandConversations } from 'soapbox/actions/conversations';
 import { connectDirectStream } from 'soapbox/actions/streaming';
 import AccountSearch from 'soapbox/components/account_search';
+import SubNavigation from 'soapbox/components/sub_navigation';
 import { Column } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
 import ConversationsList from './components/conversations_list';
 
 const messages = defineMessages({
-  title: { id: 'column.direct', defaultMessage: 'Direct messages' },
+  title: { id: 'column.direct', defaultMessage: 'Conversations' },
   searchPlaceholder: { id: 'direct.search_placeholder', defaultMessage: 'Send a message to…' },
 });
 
 const ConversationsTimeline = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const history = useHistory();
 
   useEffect(() => {
     dispatch(mountConversations());
@@ -29,19 +32,24 @@ const ConversationsTimeline = () => {
       dispatch(unmountConversations());
       disconnect();
     };
-  }, []);
+  }, [dispatch]);
 
   const handleSuggestion = (accountId: string) => {
-    dispatch(directComposeById(accountId));
+    dispatch(directComposeById(history, accountId));
   };
 
   return (
-    <Column label={intl.formatMessage(messages.title)}>
-      <AccountSearch
-        placeholder={intl.formatMessage(messages.searchPlaceholder)}
-        onSelected={handleSuggestion}
-      />
-      <ConversationsList />
+    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
+      <div className='px-4 pt-4 pb-8 sm:px-0 sm:pt-0'>
+        <SubNavigation message={intl.formatMessage(messages.title)} />
+        <div className='flex flex-col gap-3'>
+          <AccountSearch
+            placeholder={intl.formatMessage(messages.searchPlaceholder)}
+            onSelected={handleSuggestion}
+          />
+          <ConversationsList />
+        </div>
+      </div>
     </Column>
   );
 };