Show current quoted message above composition field

Note that substantial changes will be required for the updated Android
mockups, putting the quotation into the text box next to the attachment
preview.

ts/components/conversation/Quote.md

@@ -893,3 +893,132 @@ const View = Whisper.MessageView;
   />
 </util.ConversationContext>
 ```
+
+### In bottom bar
+
+#### Plain text
+
+```jsx
+<div className={util.theme}>
+  <div className="bottom-bar">
+    <Quote
+      text="How many ferrets do you have?"
+      authorColor="blue"
+      authorTitle={util.ourNumber}
+      authorProfileName="Mr. Blue"
+      id={Date.now() - 1000}
+      i18n={window.i18n}
+    />
+  </div>
+</div>
+```
+
+#### With an icon
+
+```jsx
+<div className={util.theme}>
+  <div className="bottom-bar">
+    <Quote
+      text="How many ferrets do you have?"
+      authorColor="blue"
+      authorTitle={util.ourNumber}
+      authorProfileName="Mr. Blue"
+      id={Date.now() - 1000}
+      i18n={window.i18n}
+      attachments={[{
+        contentType: 'image/jpeg',
+        fileName: 'llama.jpg',
+      }]}
+    />
+  </div>
+</div>
+```
+
+#### With an image
+
+```jsx
+<div className={util.theme}>
+  <div className="bottom-bar">
+    <Quote
+      text="How many ferrets do you have?"
+      authorColor="blue"
+      authorTitle={util.ourNumber}
+      authorProfileName="Mr. Blue"
+      id={Date.now() - 1000}
+      i18n={window.i18n}
+      attachments={[{
+        contentType: 'image/gif',
+        fileName: 'llama.gif',
+        thumbnail: {
+          objectUrl: util.gifObjectUrl
+        },
+      }]}
+    />
+  </div>
+</div>
+```
+
+#### With a close button
+
+```jsx
+<div className={util.theme}>
+  <div className="bottom-bar">
+    <Quote
+      text="How many ferrets do you have?"
+      authorColor="blue"
+      authorTitle={util.ourNumber}
+      authorProfileName="Mr. Blue"
+      id={Date.now() - 1000}
+      onClose={() => console.log('Close was clicked!')}
+      i18n={window.i18n}
+    />
+  </div>
+</div>
+```
+
+#### With a close button and icon
+
+```jsx
+<div className={util.theme}>
+  <div className="bottom-bar">
+    <Quote
+      text="How many ferrets do you have?"
+      authorColor="blue"
+      authorTitle={util.ourNumber}
+      authorProfileName="Mr. Blue"
+      id={Date.now() - 1000}
+      onClose={() => console.log('Close was clicked!')}
+      i18n={window.i18n}
+      attachments={[{
+        contentType: 'image/jpeg',
+        fileName: 'llama.jpg',
+      }]}
+    />
+  </div>
+</div>
+```
+
+#### With a close button and image
+
+```jsx
+<div className={util.theme}>
+  <div className="bottom-bar">
+    <Quote
+      text="How many ferrets do you have?"
+      authorColor="blue"
+      authorTitle={util.ourNumber}
+      authorProfileName="Mr. Blue"
+      id={Date.now() - 1000}
+      onClose={() => console.log('Close was clicked!')}
+      i18n={window.i18n}
+      attachments={[{
+        contentType: 'image/gif',
+        fileName: 'llama.gif',
+        thumbnail: {
+          objectUrl: util.gifObjectUrl
+        },
+      }]}
+    />
+  </div>
+</div>
+```

ts/components/conversation/Quote.tsx

@@ -14,6 +14,7 @@ interface Props {
   isFromMe: string;
   isIncoming: boolean;
   onClick?: () => void;
+  onClose?: () => void;
   text: string;
 }
 
@@ -153,6 +154,22 @@ export class Quote extends React.Component<Props, {}> {
     return <div className="ios-label">{label}</div>;
   }
 
+  public renderClose() {
+    const { onClose } = this.props;
+
+    if (!onClose) {
+      return null;
+    }
+
+    // We need the container to give us the flexibility to implement the iOS design.
+    // We put the onClick on both because the Android theme juse uses close-container
+    return (
+      <div className="close-container" onClick={onClose}>
+        <div className="close-button" onClick={onClose}></div>
+      </div>
+    );
+  }
+
   public render() {
     const {
       authorTitle,
@@ -186,6 +203,7 @@ export class Quote extends React.Component<Props, {}> {
           {this.renderText()}
         </div>
         {this.renderIconContainer()}
+        {this.renderClose()}
       </div>
     );
   }