From 19382c3ab9afe4460e7c1f0c318550c24ce1032d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 4 Oct 2022 19:10:58 -0400
Subject: [PATCH] ChatPageNew: display disabled ChatComposer and "To:" label

---
 app/soapbox/components/account_search.tsx     | 41 +++++++++++--------
 .../chats/components/chat-composer.tsx        |  6 ++-
 .../chat-page/components/chat-page-new.tsx    | 33 ++++++++++++---
 3 files changed, 55 insertions(+), 25 deletions(-)

diff --git a/app/soapbox/components/account_search.tsx b/app/soapbox/components/account_search.tsx
index 3b681d8d0..cdc526b9b 100644
--- a/app/soapbox/components/account_search.tsx
+++ b/app/soapbox/components/account_search.tsx
@@ -6,6 +6,7 @@ import AutosuggestAccountInput from 'soapbox/components/autosuggest_account_inpu
 import Icon from 'soapbox/components/icon';
 
 import SvgIcon from './ui/icon/svg-icon';
+import { InputThemes } from './ui/input/input';
 
 const messages = defineMessages({
   placeholder: { id: 'account_search.placeholder', defaultMessage: 'Search for an account' },
@@ -22,10 +23,12 @@ interface IAccountSearch {
   className?: string,
   autoFocus?: boolean,
   hidePortal?: boolean,
+  theme?: InputThemes,
+  showButtons?: boolean,
 }
 
 /** Input to search for accounts. */
-const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, className, ...rest }) => {
+const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, className, showButtons = true, ...rest }) => {
   const intl = useIntl();
 
   const [value, setValue] = useState('');
@@ -76,23 +79,25 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, className, ...res
           {...rest}
         />
 
-        <div
-          role='button'
-          tabIndex={0}
-          className='absolute inset-y-0 right-0 px-3 flex items-center cursor-pointer'
-          onClick={handleClear}
-        >
-          <SvgIcon
-            src={require('@tabler/icons/search.svg')}
-            className={classNames('h-4 w-4 text-gray-400', { hidden: !isEmpty() })}
-          />
-
-          <SvgIcon
-            src={require('@tabler/icons/x.svg')}
-            className={classNames('h-4 w-4 text-gray-400', { hidden: isEmpty() })}
-            aria-label={intl.formatMessage(messages.placeholder)}
-          />
-        </div>
+        {showButtons && (
+          <div
+            role='button'
+            tabIndex={0}
+            className='absolute inset-y-0 right-0 px-3 flex items-center cursor-pointer'
+            onClick={handleClear}
+          >
+            <SvgIcon
+              src={require('@tabler/icons/search.svg')}
+              className={classNames('h-4 w-4 text-gray-400', { hidden: !isEmpty() })}
+            />
+
+            <SvgIcon
+              src={require('@tabler/icons/x.svg')}
+              className={classNames('h-4 w-4 text-gray-400', { hidden: isEmpty() })}
+              aria-label={intl.formatMessage(messages.placeholder)}
+            />
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/app/soapbox/features/chats/components/chat-composer.tsx b/app/soapbox/features/chats/components/chat-composer.tsx
index ec3440a9b..5784396b6 100644
--- a/app/soapbox/features/chats/components/chat-composer.tsx
+++ b/app/soapbox/features/chats/components/chat-composer.tsx
@@ -10,7 +10,7 @@ const messages = defineMessages({
   retry: { id: 'chat.retry', defaultMessage: 'Retry?' },
 });
 
-interface IChatComposer extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onKeyDown' | 'onChange'> {
+interface IChatComposer extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onKeyDown' | 'onChange' | 'disabled'> {
   value: string,
   onSubmit: () => void,
   hasErrorSubmittingMessage?: boolean,
@@ -23,10 +23,11 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement, IChatComposer>(({
   value,
   onSubmit,
   hasErrorSubmittingMessage = false,
+  disabled = false,
 }, ref) => {
   const intl = useIntl();
 
-  const isSubmitDisabled = value.length === 0;
+  const isSubmitDisabled = disabled || value.length === 0;
 
   return (
     <div className='mt-auto pt-4 px-4 shadow-3xl'>
@@ -42,6 +43,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement, IChatComposer>(({
             isResizeable={false}
             autoGrow
             maxRows={5}
+            disabled={disabled}
           />
         </Stack>
 
diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-new.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-new.tsx
index e65af7ab2..f07a123b0 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-new.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/chat-page-new.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import AccountSearch from 'soapbox/components/account_search';
-import { CardTitle, Stack } from 'soapbox/components/ui';
+import { CardTitle, HStack, Stack, Text } from 'soapbox/components/ui';
 import { useChats } from 'soapbox/queries/chats';
 
+import ChatComposer from '../../chat-composer';
+
 interface IChatPageNew {
 }
 
@@ -19,11 +22,31 @@ const ChatPageNew: React.FC<IChatPageNew> = () => {
   };
 
   return (
-    <Stack className='h-full p-6 space-y-8'>
-      <CardTitle title='New Message' />
+    <Stack className='h-full'>
+      <Stack className='flex-grow p-6 space-y-8'>
+        <CardTitle title='New Message' />
+
+        <HStack space={2} alignItems='center'>
+          <Text>
+            <FormattedMessage
+              id='chats.new.to'
+              defaultMessage='To:'
+            />
+          </Text>
+
+          <AccountSearch
+            onSelected={handleAccountSelected}
+            theme='transparent'
+            showButtons={false}
+            autoFocus
+          />
+        </HStack>
+      </Stack>
 
-      <AccountSearch
-        onSelected={handleAccountSelected}
+      <ChatComposer
+        value=''
+        onSubmit={() => {}}
+        disabled
       />
     </Stack>
   );