Copy quoted message contents into quote on receipt

Also:
  - visually distinguish any reference we couldn't verify on receipt
  - show toast on quote click if we can't scroll to message
  - toast visuals redesigned to match rest of app

ts/components/conversation/Message.tsx

@@ -78,6 +78,7 @@ export interface Props {
     authorName?: string;
     authorColor: Color;
     onClick?: () => void;
+    referencedMessageNotFound: boolean;
   };
   authorAvatarPath?: string;
   expirationLength?: number;
@@ -572,6 +573,7 @@ export class Message extends React.Component<Props, State> {
         authorProfileName={quote.authorProfileName}
         authorName={quote.authorName}
         authorColor={quote.authorColor}
+        referencedMessageNotFound={quote.referencedMessageNotFound}
         isFromMe={quote.isFromMe}
         withContentAbove={withContentAbove}
       />

ts/components/conversation/Quote.md

@@ -225,6 +225,83 @@
 </util.ConversationContext>
 ```
 
+#### Referenced message not found
+
+```jsx
+<util.ConversationContext theme={util.theme} ios={util.ios}>
+  <li>
+    <Message
+      direction="incoming"
+      timestamp={Date.now()}
+      authorColor="green"
+      text="About six"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'red',
+        text: 'How many ferrets do you have?',
+        authorPhoneNumber: '(202) 555-0011',
+        isFromMe: true,
+        referencedMessageNotFound: true,
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="outgoing"
+      timestamp={Date.now()}
+      status="sending"
+      authorColor="green"
+      text="About six"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'red',
+        text: 'How many ferrets do you have?',
+        authorPhoneNumber: '(202) 555-0011',
+        isFromMe: true,
+        referencedMessageNotFound: true,
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="incoming"
+      timestamp={Date.now()}
+      conversationType="group"
+      authorName="Mr. 🔥Fire🔥"
+      authorColor="green"
+      text="About six"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'red',
+        text: 'How many ferrets do you have?',
+        authorPhoneNumber: '(202) 555-0011',
+        referencedMessageNotFound: true,
+      }}
+      authorAvatarPath={util.gifObjectUrl}
+    />
+  </li>
+  <li>
+    <Message
+      direction="outgoing"
+      timestamp={Date.now()}
+      conversationType="group"
+      authorName="Mr. 🔥Fire🔥"
+      status="sending"
+      authorColor="green"
+      text="About six"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'red',
+        text: 'How many ferrets do you have?',
+        authorPhoneNumber: '(202) 555-0011',
+        referencedMessageNotFound: true,
+      }}
+      authorAvatarPath={util.gifObjectUrl}
+    />
+  </li>
+</util.ConversationContext>
+```
+
 #### Long names and context
 
 ```jsx

ts/components/conversation/Quote.tsx

@@ -23,6 +23,7 @@ interface Props {
   onClick?: () => void;
   onClose?: () => void;
   text: string;
+  referencedMessageNotFound: boolean;
 }
 
 export interface QuotedAttachment {
@@ -281,12 +282,49 @@ export class Quote extends React.Component<Props> {
     );
   }
 
+  public renderReferenceWarning() {
+    const { i18n, isIncoming, referencedMessageNotFound } = this.props;
+
+    if (!referencedMessageNotFound) {
+      return null;
+    }
+
+    return (
+      <div
+        className={classNames(
+          'module-quote__reference-warning',
+          isIncoming ? 'module-quote__reference-warning--incoming' : null
+        )}
+      >
+        <div
+          className={classNames(
+            'module-quote__reference-warning__icon',
+            isIncoming
+              ? 'module-quote__reference-warning__icon--incoming'
+              : null
+          )}
+        />
+        <div
+          className={classNames(
+            'module-quote__reference-warning__text',
+            isIncoming
+              ? 'module-quote__reference-warning__text--incoming'
+              : null
+          )}
+        >
+          {i18n('originalMessageNotFound')}
+        </div>
+      </div>
+    );
+  }
+
   public render() {
     const {
       authorColor,
       isFromMe,
       isIncoming,
       onClick,
+      referencedMessageNotFound,
       withContentAbove,
     } = this.props;
 
@@ -296,26 +334,37 @@ export class Quote extends React.Component<Props> {
 
     return (
       <div
-        onClick={onClick}
-        role="button"
         className={classNames(
-          'module-quote',
-          isIncoming ? 'module-quote--incoming' : 'module-quote--outgoing',
-          !isIncoming && !isFromMe
-            ? `module-quote--outgoing-${authorColor}`
-            : null,
-          !isIncoming && isFromMe ? 'module-quote--outgoing-you' : null,
-          !onClick ? 'module-quote--no-click' : null,
-          withContentAbove ? 'module-quote--with-content-above' : null
+          'module-quote-container',
+          withContentAbove ? 'module-quote-container--with-content-above' : null
         )}
       >
-        <div className="module-quote__primary">
-          {this.renderAuthor()}
-          {this.renderGenericFile()}
-          {this.renderText()}
+        <div
+          onClick={onClick}
+          role="button"
+          className={classNames(
+            'module-quote',
+            isIncoming ? 'module-quote--incoming' : 'module-quote--outgoing',
+            !isIncoming && !isFromMe
+              ? `module-quote--outgoing-${authorColor}`
+              : null,
+            !isIncoming && isFromMe ? 'module-quote--outgoing-you' : null,
+            !onClick ? 'module-quote--no-click' : null,
+            withContentAbove ? 'module-quote--with-content-above' : null,
+            referencedMessageNotFound
+              ? 'module-quote--with-reference-warning'
+              : null
+          )}
+        >
+          <div className="module-quote__primary">
+            {this.renderAuthor()}
+            {this.renderGenericFile()}
+            {this.renderText()}
+          </div>
+          {this.renderIconContainer()}
+          {this.renderClose()}
         </div>
-        {this.renderIconContainer()}
-        {this.renderClose()}
+        {this.renderReferenceWarning()}
       </div>
     );
   }