Add quoting by url / in replies

src/components/quote/quote.js

@@ -0,0 +1,101 @@
+import { defineAsyncComponent } from 'vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(faCircleNotch)
+
+export default {
+  components: {
+    Status: defineAsyncComponent(() => import('../status/status.vue')),
+  },
+  name: 'Quote',
+  props: {
+    visible: {
+      type: Boolean,
+    },
+    loading: {
+      type: Boolean,
+    },
+    statusId: {
+      type: String,
+    },
+    statusUrl: {
+      type: String,
+    },
+    statusVisible: {
+      type: Boolean,
+    },
+    initiallyExpanded: {
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      displayQuote: this.initiallyExpanded,
+      fetchAttempted: false,
+      fetching: false,
+      error: null,
+    }
+  },
+  created() {
+    this.maybeFetchStatus()
+  },
+  watch: {
+    statusId() {
+      this.maybeFetchStatus()
+    },
+  },
+  computed: {
+    quotedStatus() {
+      return this.statusId
+        ? this.$store.state.statuses.allStatusesObject[this.statusId]
+        : undefined
+    },
+    shouldDisplayQuote() {
+      return this.displayQuote && this.quotedStatus
+    },
+    hasVisibleQuote() {
+      return (
+        this.statusUrl &&
+        this.statusVisible &&
+        (this.showSpinner || this.quotedStatus)
+      )
+    },
+    hasInvisibleQuote() {
+      return this.statusUrl && !this.statusVisible
+    },
+    showSpinner() {
+      return this.loading || this.fetching
+    },
+  },
+  methods: {
+    toggleDisplayQuote() {
+      this.displayQuote = !this.displayQuote
+      this.maybeFetchStatus()
+    },
+    maybeFetchStatus() {
+      if (this.statusId && this.displayQuote && !this.quotedStatus) {
+        this.fetchStatus()
+      }
+    },
+    fetchStatus() {
+      this.fetchAttempted = true
+      this.fetching = true
+      this.$emit('loading', true)
+      this.$store
+        .dispatch('fetchStatus', this.statusId)
+        .then(() => {
+          this.displayQuote = true
+        })
+        .catch((error) => {
+          this.error = error
+          this.$emit('error', error)
+        })
+        .finally(() => {
+          this.fetching = false
+          this.$emit('loading', false)
+        })
+    },
+  },
+}