quote ui

app/javascript/gabsocial/components/status.js

@@ -7,6 +7,7 @@ import AvatarComposite from './avatar_composite';
 import RelativeTimestamp from './relative_timestamp';
 import DisplayName from './display_name';
 import StatusContent from './status_content';
+import StatusQuote from './status_quote';
 import StatusActionBar from './status_action_bar';
 import AttachmentList from './attachment_list';
 import Card from '../features/status/components/card';
@@ -445,6 +446,10 @@ class Status extends ImmutablePureComponent {
 
             {media}
 
+            {status.get('quote') && <StatusQuote
+              id={status.get('quote')}
+            />}
+
             {showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (
               <button className='status__content__read-more-button' onClick={this.handleClick}>
                 <FormattedMessage id='status.show_thread' defaultMessage='Show thread' />

app/javascript/gabsocial/components/status_quote.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import StatusContent from './status_content';
+import DisplayName from './display_name';
+import { connect } from 'react-redux';
+import { NavLink } from 'react-router-dom';
+
+const mapStateToProps = (state, { id }) => ({
+    status: state.getIn(['statuses', id]),
+    account: state.getIn(['accounts', state.getIn(['statuses', id, 'account'])]),
+});
+
+@connect(mapStateToProps)
+export default class StatusQuote extends React.PureComponent {
+
+    static contextTypes = {
+      router: PropTypes.object,
+    };
+  
+    static propTypes = {
+      status: ImmutablePropTypes.map.isRequired,
+    };
+
+    render() {
+        const { status, account } = this.props;
+
+        const statusUrl = `/${account.get('acct')}/posts/${status.get('id')}`;
+
+        return (
+            <NavLink to={statusUrl} className="status__quote">
+                <DisplayName account={account} />
+
+                <StatusContent
+                status={status}
+                expanded={false}
+                />
+            </NavLink>
+        );
+    }
+
+}

app/javascript/styles/gabsocial/components.scss

@@ -566,6 +566,16 @@
 		}
 	}
 
+	&__quote {
+		display: block;
+		color: $primary-text-color;
+		text-decoration: none;
+		border: 1px solid $ui-secondary-color;
+		border-radius: 10px;
+		padding: 10px 15px;
+		margin-top: 15px;
+	}
+
 	&__meta {
 		font-size: 14px;
 		color: $gab-secondary-text;