Composer Quote UI (#35805)

Co-authored-by: diondiondion <mail@diondiondion.com>

app/javascript/mastodon/features/compose/components/compose_form.jsx

@@ -31,6 +31,7 @@ import { PollForm } from "./poll_form";
 import { ReplyIndicator } from './reply_indicator';
 import { UploadForm } from './upload_form';
 import { Warning } from './warning';
+import { ComposeQuotedStatus } from './quoted_post';
 
 const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
 
@@ -304,10 +305,12 @@ class ComposeForm extends ImmutablePureComponent {
             onPaste={onPaste}
             autoFocus={autoFocus}
             lang={this.props.lang}
+            className='compose-form__input'
           />
 
           <UploadForm />
           <PollForm />
+          <ComposeQuotedStatus />
 
           <div className='compose-form__footer'>
             <div className='compose-form__actions'>

app/javascript/mastodon/features/compose/components/quoted_post.tsx

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import type { FC } from 'react';
+
+import { Map } from 'immutable';
+
+import { QuotedStatus } from '@/mastodon/components/status_quoted';
+import { useAppSelector } from '@/mastodon/store';
+
+export const ComposeQuotedStatus: FC = () => {
+  const quotedStatusId = useAppSelector(
+    (state) => state.compose.get('quoted_status_id') as string | null,
+  );
+  const quote = useMemo(
+    () =>
+      quotedStatusId
+        ? Map<'state' | 'quoted_status', string>([
+            ['state', 'accepted'],
+            ['quoted_status', quotedStatusId],
+          ])
+        : null,
+    [quotedStatusId],
+  );
+  if (!quote) {
+    return null;
+  }
+  return <QuotedStatus quote={quote} contextType='compose' />;
+};

app/javascript/mastodon/features/compose/containers/poll_button_container.js

@@ -3,10 +3,16 @@ import { connect } from 'react-redux';
 import { addPoll, removePoll } from '../../../actions/compose';
 import PollButton from '../components/poll_button';
 
-const mapStateToProps = state => ({
-  disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 0),
-  active: state.getIn(['compose', 'poll']) !== null,
-});
+const mapStateToProps = state => {
+  const readyAttachmentsSize = state.compose.get('media_attachments').size ?? 0;
+  const hasAttachments = readyAttachmentsSize > 0 || !!state.compose.get('is_uploading');
+  const hasQuote = !!state.compose.get('quoted_status_id');
+
+  return ({
+    disabled: hasAttachments || hasQuote,
+    active: state.getIn(['compose', 'poll']) !== null,
+  });
+};
 
 const mapDispatchToProps = dispatch => ({
 

app/javascript/mastodon/features/compose/containers/upload_button_container.js

@@ -11,9 +11,10 @@ const mapStateToProps = state => {
   const attachmentsSize = readyAttachmentsSize + pendingAttachmentsSize;
   const isOverLimit = attachmentsSize > state.getIn(['server', 'server', 'configuration', 'statuses', 'max_media_attachments'])-1;
   const hasVideoOrAudio = state.getIn(['compose', 'media_attachments']).some(m => ['video', 'audio'].includes(m.get('type')));
+  const hasQuote = !!state.compose.get('quoted_status_id');
 
   return {
-    disabled: isPoll || isUploading || isOverLimit || hasVideoOrAudio,
+    disabled: isPoll || isUploading || isOverLimit || hasVideoOrAudio || hasQuote,
     resetFileKey: state.getIn(['compose', 'resetFileKey']),
   };
 };