Change report modal to include category selection in web UI (#17565)

* Change report modal to include category selection in web UI

* Various fixes and improvements

- Change thank you text to be different based on category
- Change starting headline to be different for account and status reports
- Change toggle components to have a checkmark when checked
- Fix report dialog being cut off on small screens
- Fix thank you screen offering mute or block if already muted or blocked
- Refactor toggle components in report dialog into one component

* Change wording on final screen

* Change checkboxes to be square when multiple options are possible

app/javascript/mastodon/features/report/comment.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
+import Button from 'mastodon/components/button';
+import Toggle from 'react-toggle';
+
+const messages = defineMessages({
+  placeholder: { id: 'report.placeholder', defaultMessage: 'Type or paste additional comments' },
+});
+
+export default @injectIntl
+class Comment extends React.PureComponent {
+
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+    comment: PropTypes.string.isRequired,
+    onChangeComment: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+    isSubmitting: PropTypes.bool,
+    forward: PropTypes.bool,
+    isRemote: PropTypes.bool,
+    domain: PropTypes.string,
+    onChangeForward: PropTypes.func.isRequired,
+  };
+
+  handleClick = () => {
+    const { onSubmit } = this.props;
+    onSubmit();
+  };
+
+  handleChange = e => {
+    const { onChangeComment } = this.props;
+    onChangeComment(e.target.value);
+  };
+
+  handleKeyDown = e => {
+    if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
+      this.handleClick();
+    }
+  };
+
+  handleForwardChange = e => {
+    const { onChangeForward } = this.props;
+    onChangeForward(e.target.checked);
+  };
+
+  render () {
+    const { comment, isRemote, forward, domain, isSubmitting, intl } = this.props;
+
+    return (
+      <React.Fragment>
+        <h3 className='report-dialog-modal__title'><FormattedMessage id='report.comment.title' defaultMessage='Is there anything else you think we should know?' /></h3>
+
+        <textarea
+          className='report-dialog-modal__textarea'
+          placeholder={intl.formatMessage(messages.placeholder)}
+          value={comment}
+          onChange={this.handleChange}
+          onKeyDown={this.handleKeyDown}
+          disabled={isSubmitting}
+        />
+
+        {isRemote && (
+          <React.Fragment>
+            <p className='report-dialog-modal__lead'><FormattedMessage id='report.forward_hint' defaultMessage='The account is from another server. Send an anonymized copy of the report there as well?' /></p>
+
+            <label className='report-dialog-modal__toggle'>
+              <Toggle checked={forward} disabled={isSubmitting} onChange={this.handleForwardChange} />
+              <FormattedMessage id='report.forward' defaultMessage='Forward to {target}' values={{ target: domain }} />
+            </label>
+          </React.Fragment>
+        )}
+
+        <div className='flex-spacer' />
+
+        <div className='report-dialog-modal__actions'>
+          <Button onClick={this.handleClick}><FormattedMessage id='report.submit' defaultMessage='Submit report' /></Button>
+        </div>
+      </React.Fragment>
+    );
+  }
+
+}