Modal report (#17)

* Base modal implementation

* Modal Report page

* Upgrade multiselect

* Fixed multiselect styling

* fix build err

* rev change

* Added dropdown component, addressed changes

Removed unused classes after vue multiselect was removed
Updated markdown-it and xss

* Update index.js

* fix lint

* Fix prettier code style

* Address most changes

* New dropdown

* Undo comment

Makes the component close when not focused

* Fix accessibility issues

* Fix double focus

* addressed changes to modal

* Run Prettier

* Update ModalReport.vue

* Fixed spacing issues

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>

lib/components/base/ModalReport.vue

@@ -0,0 +1,149 @@
+<template>
+  <Modal ref="modal" :header="`Report ${itemType}`">
+    <div class="modal-report">
+      <div class="markdown-body">
+        <p>
+          Modding should be safe for everyone, so we take abuse and malicious intent seriously at
+          Modrinth. We want to hear about harmful content on the site that violates our
+          <router-link to="/legal/terms">ToS</router-link>
+          and
+          <router-link to="/legal/rules">Rules</router-link>
+          . Rest assured, we’ll keep your identifying information private.
+        </p>
+        <p v-if="itemType === 'project' || itemType === 'version'">
+          Please <strong>do not</strong> use this to report bugs with the project itself. This form
+          is only for submitting a report to Modrinth staff. If the project has an Issues link or a
+          Discord invite, consider reporting it there.
+        </p>
+      </div>
+      <div>
+        <label class="report-label" for="report-type">
+          <span>
+            <strong>Reason</strong>
+          </span>
+        </label>
+        <DropdownSelect
+          id="report-type"
+          v-model="reportType"
+          :options="reportTypes"
+          default-value="Choose report type"
+          class="multiselect"
+        />
+      </div>
+      <label class="report-label" for="additional-information">
+        <strong>Additional information</strong>
+        <span> Include links and images if possible. Markdown formatting is supported. </span>
+      </label>
+      <div>
+        <div v-if="bodyViewType === 'source'" class="text-input textarea-wrapper">
+          <Chips v-model="bodyViewType" class="separator" :items="['source', 'preview']" />
+          <textarea id="body" v-model="body" spellcheck="true" />
+        </div>
+        <div v-else class="preview" v-html="renderString(body)"></div>
+      </div>
+      <div class="button-group">
+        <Button @click="cancel">
+          <XIcon />
+          Cancel
+        </Button>
+        <Button color="primary" @click="submitReport">
+          <CheckIcon />
+          Report
+        </Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+<script setup>
+import { Modal, Chips, XIcon, CheckIcon, DropdownSelect } from '@/components'
+import { renderString } from '@/components/parse.js'
+import { ref } from 'vue'
+
+const modal = ref('modal')
+defineExpose({
+  modal: modal,
+})
+</script>
+<script>
+export default {
+  props: {
+    itemType: {
+      type: String,
+      default: '',
+    },
+    itemId: {
+      type: String,
+      default: '',
+    },
+    reportTypes: {
+      type: Array,
+      default: () => [],
+    },
+    submitReport: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      reportType: '',
+      body: '',
+      bodyViewType: 'source',
+    }
+  },
+  methods: {
+    renderString,
+    cancel() {
+      this.reportType = ''
+      this.body = ''
+      this.bodyViewType = 'source'
+
+      this.$refs.modal.hide()
+    },
+    show() {
+      this.$refs.modal.show()
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.modal-report {
+  padding: var(--gap-lg);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.markdown-body {
+  margin-bottom: 1rem;
+}
+
+.report-label {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: 0.5rem;
+}
+
+.button-group {
+  margin-left: auto;
+  display: flex;
+  grid-gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.text-input {
+  height: 12rem;
+  gap: 1rem;
+
+  textarea {
+    // here due to a bug in safari
+    max-height: 9rem;
+  }
+
+  .preview {
+    overflow-y: auto;
+  }
+}
+</style>