quoted post preview added to status composer

app/javascript/gabsocial/features/compose/components/compose_form.js

@@ -21,6 +21,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { length } from 'stringz';
 import { countableText } from '../util/counter';
 import Icon from 'gabsocial/components/icon';
+import QuotedStatusPreviewContainer from '../containers/quoted_status_preview_container';
 
 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';
 const maxPostCharacterCount = 3000;
@@ -199,7 +200,7 @@ class ComposeForm extends ImmutablePureComponent {
   }
 
   render () {
-    const { intl, onPaste, showSearch, anyMedia, shouldCondense, autoFocus, isModalOpen } = this.props;
+    const { intl, onPaste, showSearch, anyMedia, shouldCondense, autoFocus, isModalOpen, quoteOfId } = this.props;
     const condensed = shouldCondense && !this.props.text && !this.state.composeFocused;
     const disabled = this.props.isSubmitting;
     const text     = [this.props.spoilerText, countableText(this.props.text)].join('');
@@ -271,6 +272,8 @@ class ComposeForm extends ImmutablePureComponent {
           }
         </AutosuggestTextarea>
 
+        {quoteOfId && <QuotedStatusPreviewContainer id={quoteOfId} />}
+
         {
           !condensed &&
           <div className='compose-form__buttons-wrapper'>

app/javascript/gabsocial/features/compose/components/quoted_status_preview.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import DisplayName from '../../../components/display_name';
+import StatusContent from '../../../components/status_content';
+
+export default class QuotedStatusPreview extends React.PureComponent {
+    static propTypes = {
+        status: ImmutablePropTypes.map,
+        account: ImmutablePropTypes.map,
+    }
+    
+    render() {
+        const { status, account } = this.props;
+
+        return (
+            <div className='compose-form__quote-preview'>
+                <DisplayName account={account} />
+
+                <StatusContent
+                    status={status}
+                    expanded={false}
+                />
+            </div>
+        );
+    }
+}

app/javascript/gabsocial/features/compose/containers/compose_form_container.js

@@ -26,6 +26,7 @@ const mapStateToProps = state => ({
   showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
   anyMedia: state.getIn(['compose', 'media_attachments']).size > 0,
   isModalOpen: state.get('modal').modalType === 'COMPOSE',
+  quoteOfId: state.getIn(['compose', 'quote_of_id']),
 });
 
 const mapDispatchToProps = (dispatch) => ({

app/javascript/gabsocial/features/compose/containers/quoted_status_preview_container.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import QuotedStatusPreview from '../components/quoted_status_preview';
+
+const mapStateToProps = (state, { id }) => ({
+    status: state.getIn(['statuses', id]),
+    account: state.getIn(['accounts', state.getIn(['statuses', id, 'account'])]),
+});
+
+export default connect(mapStateToProps)(QuotedStatusPreview);

app/javascript/styles/gabsocial/components/compose-form.scss

@@ -282,4 +282,17 @@
 			padding-top: 10px;
 		}
 	}
+
+	&__quote-preview {
+		font-size: 14px;
+		padding: 5px 10px 0;
+		background: darken($simple-background-color, 8%);
+		border-bottom: 1px solid darken($simple-background-color, 22%);
+		color: #555;
+
+		.status__content {
+			font-size: 0.9em;
+			color: #555;
+		}
+	}
 } // end .compose-form