From 7aefda42110c703ad039a3858fa3e352a5d6db9c Mon Sep 17 00:00:00 2001
From: Alexander Tumin <iamtakingiteasy@eientei.org>
Date: Mon, 28 Jul 2025 11:39:50 +0300
Subject: [PATCH] Add quoting by url / in replies

---
 changelog.d/quote-by-url.add                  |   1 +
 src/components/chat/chat.vue                  |   1 +
 src/components/draft/draft.js                 |   7 +-
 .../edit_status_form/edit_status_form.vue     |   1 +
 .../post_status_form/post_status_form.js      |  99 ++++++++++++---
 .../post_status_form/post_status_form.scss    |   6 +
 .../post_status_form/post_status_form.vue     |  31 ++++-
 src/components/quote/quote.js                 | 101 +++++++++++++++
 src/components/quote/quote.vue                |  82 ++++++++++++
 src/components/quote/quote_form.js            | 118 ++++++++++++++++++
 src/components/quote/quote_form.vue           |  55 ++++++++
 src/components/status/status.js               |  34 ++---
 src/components/status/status.scss             |  18 ---
 src/components/status/status.vue              |  47 +------
 .../status_action_buttons.scss                |   2 +-
 src/i18n/en.json                              |   2 +
 src/services/api/api.service.js               |   4 +-
 .../entity_normalizer.service.js              |   2 +-
 18 files changed, 501 insertions(+), 110 deletions(-)
 create mode 100644 changelog.d/quote-by-url.add
 create mode 100644 src/components/quote/quote.js
 create mode 100644 src/components/quote/quote.vue
 create mode 100644 src/components/quote/quote_form.js
 create mode 100644 src/components/quote/quote_form.vue

diff --git a/changelog.d/quote-by-url.add b/changelog.d/quote-by-url.add
new file mode 100644
index 000000000..ef401f93c
--- /dev/null
+++ b/changelog.d/quote-by-url.add
@@ -0,0 +1 @@
+Add quoting by URL and in replies
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index dfd197e56..cedbdce69 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -73,6 +73,7 @@
             :disable-notice="true"
             :disable-lock-warning="true"
             :disable-polls="true"
+            :disable-quotes="true"
             :disable-sensitivity-checkbox="true"
             :disable-submit="errorLoadingChat || !currentChat"
             :disable-preview="true"
diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
index 971a75b10..4f0d8cbee 100644
--- a/src/components/draft/draft.js
+++ b/src/components/draft/draft.js
@@ -43,7 +43,12 @@ const Draft = {
       }
     },
     safeToSave() {
-      return this.draft.status || this.draft.files?.length || this.draft.hasPoll
+      return (
+        this.draft.status ||
+        this.draft.files?.length ||
+        this.draft.hasPoll ||
+        this.draft.hasQuote
+      )
     },
     postStatusFormProps() {
       return {
diff --git a/src/components/edit_status_form/edit_status_form.vue b/src/components/edit_status_form/edit_status_form.vue
index 0a7ec760a..1452be422 100644
--- a/src/components/edit_status_form/edit_status_form.vue
+++ b/src/components/edit_status_form/edit_status_form.vue
@@ -4,6 +4,7 @@
     v-bind="params"
     :post-handler="doEditStatus"
     :disable-polls="true"
+    :disable-quotes="true"
     :disable-visibility-selector="true"
   />
 </template>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 507d12f6c..049183575 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -15,6 +15,7 @@ import EmojiInput from '../emoji_input/emoji_input.vue'
 import suggestor from '../emoji_input/suggestor.js'
 import MediaUpload from '../media_upload/media_upload.vue'
 import PollForm from '../poll/poll_form.vue'
+import QuoteForm from '../quote/quote_form.vue'
 import ScopeSelector from '../scope_selector/scope_selector.vue'
 import Select from '../select/select.vue'
 import StatusContent from '../status_content/status_content.vue'
@@ -35,6 +36,7 @@ import {
   faChevronRight,
   faCircleNotch,
   faPollH,
+  faQuoteRight,
   faSmileBeam,
   faTimes,
   faUpload,
@@ -44,6 +46,7 @@ library.add(
   faSmileBeam,
   faPollH,
   faUpload,
+  faQuoteRight,
   faBan,
   faTimes,
   faCircleNotch,
@@ -105,6 +108,7 @@ const PostStatusForm = {
     'disableNotice',
     'disableLockWarning',
     'disablePolls',
+    'disableQuotes',
     'disableSensitivityCheckbox',
     'disableSubmit',
     'disablePreview',
@@ -136,6 +140,7 @@ const PostStatusForm = {
     MediaUpload,
     EmojiInput,
     PollForm,
+    QuoteForm,
     ScopeSelector,
     Checkbox,
     Select,
@@ -145,6 +150,9 @@ const PostStatusForm = {
     DraftCloser,
     Popover,
   },
+  created() {
+    this.initQuote()
+  },
   mounted() {
     this.updateIdempotencyKey()
     this.resize(this.$refs.textarea)
@@ -203,6 +211,8 @@ const PostStatusForm = {
         files: [],
         poll: {},
         hasPoll: false,
+        hasQuote: false,
+        quote: {},
         mediaDescriptions: {},
         visibility: scope,
         contentType,
@@ -220,6 +230,8 @@ const PostStatusForm = {
           files: this.statusFiles || [],
           poll: this.statusPoll || {},
           hasPoll: false,
+          hasQuote: false,
+          quote: {},
           mediaDescriptions: this.statusMediaDescriptions || {},
           visibility: this.statusScope || scope,
           contentType: statusContentType,
@@ -345,12 +357,28 @@ const PostStatusForm = {
     isEdit() {
       return typeof this.statusId !== 'undefined' && this.statusId.trim() !== ''
     },
-    quotable() {
+    quotingAvailable() {
       if (!useInstanceCapabilitiesStore().quotingAvailable) {
         return false
       }
 
-      if (!this.replyTo) {
+      return this.disableQuotes !== true
+    },
+    isReply() {
+      return this.newStatus.type === 'reply'
+    },
+    quotable() {
+      return this.quotingAvailable && this.replyTo
+    },
+    quoteThreadToggled() {
+      return this.newStatus.hasQuote && this.newStatus.quote.thread
+    },
+    defaultQuotable() {
+      if (
+        !this.quotingAvailable ||
+        !this.isReply ||
+        !this.$store.getters.mergedConfig.quoteReply
+      ) {
         return false
       }
 
@@ -372,12 +400,25 @@ const PostStatusForm = {
 
       return false
     },
+    inReplyStatusId() {
+      return !this.newStatus.hasQuote ||
+        !this.newStatus.quote.thread ||
+        !this.newStatus.quote.id
+        ? this.replyTo
+        : undefined
+    },
+    quoteId() {
+      return this.newStatus.hasQuote ? this.newStatus.quote.id : undefined
+    },
     debouncedMaybeAutoSaveDraft() {
       return debounce(this.maybeAutoSaveDraft, 3000)
     },
     pollFormVisible() {
       return this.newStatus.hasPoll
     },
+    quoteFormVisible() {
+      return this.newStatus.hasQuote && !this.newStatus.quote.thread
+    },
     shouldAutoSaveDraft() {
       return this.$store.getters.mergedConfig.autoSaveDraft
     },
@@ -395,7 +436,8 @@ const PostStatusForm = {
         (this.newStatus.status ||
           this.newStatus.spoilerText ||
           this.newStatus.files?.length ||
-          this.newStatus.hasPoll) &&
+          this.newStatus.hasPoll ||
+          this.newStatus.hasQuote) &&
         this.saveable
       )
     },
@@ -406,7 +448,8 @@ const PostStatusForm = {
           this.newStatus.status ||
           this.newStatus.spoilerText ||
           this.newStatus.files?.length ||
-          this.newStatus.hasPoll
+          this.newStatus.hasPoll ||
+          this.newStatus.hasQuote
         )
       )
     },
@@ -456,11 +499,13 @@ const PostStatusForm = {
         contentType: newStatus.contentType,
         poll: {},
         hasPoll: false,
+        hasQuote: false,
+        quote: {},
         mediaDescriptions: {},
-        quoting: false,
       }
       this.$refs.mediaUpload && this.$refs.mediaUpload.clearFile()
       this.clearPollForm()
+      this.clearQuoteForm()
       if (this.preserveFocus) {
         this.$nextTick(() => {
           this.$refs.textarea.focus()
@@ -500,9 +545,7 @@ const PostStatusForm = {
         return
       }
 
-      const poll = this.newStatus.hasPoll
-        ? pollFormToMasto(this.newStatus.poll)
-        : {}
+      const poll = newStatus.hasPoll ? pollFormToMasto(newStatus.poll) : {}
       if (this.pollContentError) {
         this.error = this.pollContentError
         return
@@ -518,10 +561,6 @@ const PostStatusForm = {
         return
       }
 
-      const replyOrQuoteAttr = newStatus.quoting
-        ? 'quoteId'
-        : 'inReplyToStatusId'
-
       const postingOptions = {
         status: newStatus.status,
         spoilerText: newStatus.spoilerText || null,
@@ -529,7 +568,8 @@ const PostStatusForm = {
         sensitive: newStatus.nsfw,
         media: newStatus.files,
         store: this.$store,
-        [replyOrQuoteAttr]: this.replyTo,
+        inReplyToStatusId: this.inReplyStatusId,
+        quoteId: this.quoteId,
         contentType: newStatus.contentType,
         poll,
         idempotencyKey: this.idempotencyKey,
@@ -558,9 +598,7 @@ const PostStatusForm = {
       }
       const newStatus = this.newStatus
       this.previewLoading = true
-      const replyOrQuoteAttr = newStatus.quoting
-        ? 'quoteId'
-        : 'inReplyToStatusId'
+
       statusPoster
         .postStatus({
           status: newStatus.status,
@@ -569,7 +607,8 @@ const PostStatusForm = {
           sensitive: newStatus.nsfw,
           media: [],
           store: this.$store,
-          [replyOrQuoteAttr]: this.replyTo,
+          inReplyToStatusId: this.inReplyStatusId,
+          quoteId: this.quoteId,
           contentType: newStatus.contentType,
           poll: {},
           preview: true,
@@ -813,6 +852,32 @@ const PostStatusForm = {
         this.$refs.pollForm.clear()
       }
     },
+    initQuote() {
+      const quote = this.newStatus.quote
+
+      if (Object.keys(quote).length > 0) {
+        return
+      }
+
+      const quotable = this.defaultQuotable
+
+      quote.id = quotable ? this.replyTo : ''
+      quote.url = ''
+      quote.thread = quotable
+    },
+    setQuoteThread(v) {
+      this.newStatus.hasQuote = v
+      this.newStatus.quote.thread = v
+      this.newStatus.quote.id = v ? this.replyTo : ''
+    },
+    clearQuoteForm() {
+      if (this.$refs.quoteForm) {
+        this.$refs.quoteForm.clear()
+      }
+    },
+    toggleQuoteForm() {
+      this.newStatus.hasQuote = !this.newStatus.hasQuote
+    },
     dismissScopeNotice() {
       this.$store.dispatch('setOption', {
         name: 'hideScopeNotice',
diff --git a/src/components/post_status_form/post_status_form.scss b/src/components/post_status_form/post_status_form.scss
index 641dc6dac..976a23f0a 100644
--- a/src/components/post_status_form/post_status_form.scss
+++ b/src/components/post_status_form/post_status_form.scss
@@ -137,11 +137,17 @@
 
   .poll-icon {
     order: 3;
+    justify-content: center;
+  }
+
+  .quote-icon {
+    order: 4;
     justify-content: right;
   }
 
   .media-upload-icon,
   .poll-icon,
+  .quote-icon,
   .emoji-icon {
     font-size: 1.85em;
     line-height: 1.1;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index f661a980d..0eedea360 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -111,24 +111,26 @@
             <button
               :id="`reply-or-quote-option-${randomSeed}-reply`"
               class="btn button-default reply-or-quote-option"
-              :class="{ toggled: !newStatus.quoting }"
+              :class="{ toggled: !quoteThreadToggled }"
               tabindex="0"
               role="radio"
+              :disabled="quoteFormVisible"
               :aria-labelledby="`reply-or-quote-option-${randomSeed}-reply`"
-              :aria-checked="!newStatus.quoting"
-              @click="newStatus.quoting = false"
+              :aria-checked="!newStatus.quote.thread"
+              @click="setQuoteThread(false)"
             >
               {{ $t('post_status.reply_option') }}
             </button>
             <button
               :id="`reply-or-quote-option-${randomSeed}-quote`"
               class="btn button-default reply-or-quote-option"
-              :class="{ toggled: newStatus.quoting }"
+              :class="{ toggled: quoteThreadToggled }"
               tabindex="0"
               role="radio"
+              :disabled="quoteFormVisible"
               :aria-labelledby="`reply-or-quote-option-${randomSeed}-quote`"
-              :aria-checked="newStatus.quoting"
-              @click="newStatus.quoting = true"
+              :aria-checked="newStatus.quote.thread"
+              @click="setQuoteThread(true)"
             >
               {{ $t('post_status.quote_option') }}
             </button>
@@ -266,6 +268,13 @@
         :visible="pollFormVisible"
         :params="newStatus.poll"
       />
+      <quote-form
+        v-if="quotingAvailable"
+        ref="quoteForm"
+        :visible="quoteFormVisible"
+        :reply="isReply"
+        :params="newStatus.quote"
+      />
       <span
         v-if="!disableDraft && shouldAutoSaveDraft"
         class="auto-save-status"
@@ -296,6 +305,16 @@
           >
             <FAIcon icon="poll-h" />
           </button>
+          <button
+            v-if="quotingAvailable"
+            class="quote-icon button-unstyled"
+            :disabled="newStatus.quote.thread"
+            :class="{ selected: quoteFormVisible }"
+            :title="$t('tool_tip.add_quote')"
+            @click="toggleQuoteForm"
+          >
+            <FAIcon icon="quote-right" />
+          </button>
         </div>
         <div class="btn-group post-button-group">
           <button
diff --git a/src/components/quote/quote.js b/src/components/quote/quote.js
new file mode 100644
index 000000000..168d5094d
--- /dev/null
+++ b/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)
+        })
+    },
+  },
+}
diff --git a/src/components/quote/quote.vue b/src/components/quote/quote.vue
new file mode 100644
index 000000000..f518db7ab
--- /dev/null
+++ b/src/components/quote/quote.vue
@@ -0,0 +1,82 @@
+<template>
+  <article
+    v-if="hasVisibleQuote"
+    class="quoted-status"
+  >
+    <button
+      class="button-unstyled -link display-quoted-status-button"
+      :aria-expanded="shouldDisplayQuote"
+      @click="toggleDisplayQuote"
+    >
+      {{ shouldDisplayQuote ? $t('status.hide_quote') : $t('status.display_quote') }}
+      <FAIcon
+        class="display-quoted-status-button-icon"
+        :icon="shouldDisplayQuote ? 'chevron-up' : 'chevron-down'"
+      />
+    </button>
+    <span
+      v-show="showSpinner"
+      class="loading-spinner"
+    >
+      <FAIcon
+        class="fa-old-padding"
+        spin
+        icon="circle-notch"
+      />
+    </span>
+    <Status
+      v-if="shouldDisplayQuote"
+      :statusoid="quotedStatus"
+      :in-quote="true"
+    />
+  </article>
+  <p
+    v-else-if="hasInvisibleQuote"
+    class="quoted-status -unavailable-prompt"
+  >
+    <i18n-t
+      scope="global"
+      keypath="status.invisible_quote"
+    >
+      <template #link>
+        <bdi>
+          <a
+            v-if="statusId"
+            :href="statusUrl"
+            target="_blank"
+          >
+            {{ statusUrl }}
+          </a>
+          <router-link
+            v-else
+            :to="{ name: 'search', query: { query: statusUrl } }"
+          >
+            {{ statusUrl }}
+          </router-link>
+        </bdi>
+      </template>
+    </i18n-t>
+  </p>
+</template>
+
+<script src="./quote.js"></script>
+
+<style lang="scss">
+.quoted-status {
+  margin-top: 0.5em;
+  border: 1px solid var(--border);
+  border-radius: var(--roundness);
+
+  &.-unavailable-prompt {
+    padding: 0.5em;
+  }
+
+  .display-quoted-status-button {
+    margin: 0.5em;
+
+    &-icon {
+      color: inherit;
+    }
+  }
+}
+</style>
diff --git a/src/components/quote/quote_form.js b/src/components/quote/quote_form.js
new file mode 100644
index 000000000..401211724
--- /dev/null
+++ b/src/components/quote/quote_form.js
@@ -0,0 +1,118 @@
+import { debounce } from 'lodash'
+
+import Checkbox from '../checkbox/checkbox.vue'
+import Quote from './quote.vue'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+
+export default {
+  components: {
+    Quote,
+    Checkbox,
+  },
+  name: 'QuoteForm',
+  props: {
+    visible: {
+      type: Boolean,
+    },
+    reply: {
+      type: Boolean,
+    },
+    params: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      text: this.params.url,
+      loading: false,
+      error: false,
+      debounceSetQuote: debounce((value) => {
+        this.fetchStatus(value)
+      }, 1000),
+    }
+  },
+  created() {
+    if (this.params.url && !this.params.id) {
+      this.fetchStatus(this.params.url)
+    } else if (this.params.id) {
+      this.text =
+        window.location.protocol +
+        '//' +
+        this.instanceHost +
+        '/notice/' +
+        this.params.id
+      this.params.url = this.text
+    }
+  },
+  computed: {
+    instanceHost() {
+      return new URL(useInstanceStore().server).host
+    },
+    noticeRegex() {
+      return new RegExp(
+        `^([^/:]*:?//|)(${window.location.host}|${this.instanceHost})/notice/(.*)$`,
+      )
+    },
+    quoteVisible() {
+      return (!!this.params.id || this.loading) && !this.error
+    },
+  },
+  watch: {
+    text(value) {
+      this.debounceSetQuote(value)
+    },
+    visible(value) {
+      if (value && this.params.url) {
+        this.fetchStatus(this.params.url)
+      }
+    },
+  },
+  methods: {
+    clear() {
+      this.text = this.params.url
+      this.loading = false
+      this.error = false
+    },
+    setLoading(value) {
+      this.loading = value
+    },
+    handleError(error) {
+      this.params.id = null
+      this.error = !!error
+    },
+    fetchStatus(value) {
+      this.params.url = value
+      this.error = false
+
+      const notice = this.noticeRegex.exec(value)
+      if (notice && notice.length === 4) {
+        this.params.id = notice[3]
+      } else if (value) {
+        this.loading = true
+        this.$store
+          .dispatch('search', {
+            q: value,
+            resolve: true,
+            offset: 0,
+            limit: 1,
+            type: 'statuses',
+          })
+          .then((data) => {
+            if (data && data.statuses && data.statuses.length === 1) {
+              this.params.id = data.statuses[0].id
+            } else {
+              this.handleError(true)
+            }
+          })
+          .catch(this.handleError)
+          .finally(() => {
+            this.loading = false
+          })
+      } else {
+        this.params.id = null
+      }
+    },
+  },
+}
diff --git a/src/components/quote/quote_form.vue b/src/components/quote/quote_form.vue
new file mode 100644
index 000000000..b0b277a2b
--- /dev/null
+++ b/src/components/quote/quote_form.vue
@@ -0,0 +1,55 @@
+<template>
+  <div
+    v-if="visible"
+    class="quote-form"
+  >
+    <div class="input-container">
+      <input
+        v-model="text"
+        type="text"
+        size="1"
+        class="input"
+        :placeholder="$t('post_status.quote_url')"
+      >
+    </div>
+    <Quote
+      :status-id="params.id"
+      :status-url="params.url"
+      :status-visible="quoteVisible"
+      :initially-expanded="true"
+      :loading="loading"
+      @loading="setLoading"
+      @error="handleError"
+    />
+  </div>
+</template>
+
+<script src="./quote_form.js"></script>
+
+<style lang="scss">
+.quote-form {
+  display: flex;
+  flex-direction: column;
+  padding: 0 0.5em 0.5em;
+
+  .input-container {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+
+    input {
+      width: 100%;
+    }
+
+    .checkbox {
+      white-space: pre;
+      display: flex;
+      flex-flow: row-reverse;
+      line-height: 2;
+      column-gap: 0.5em;
+      align-items: center;
+      user-select: none;
+    }
+  }
+}
+</style>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index fbea34b4b..ddc49b851 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -12,6 +12,7 @@ import {
 import AvatarList from '../avatar_list/avatar_list.vue'
 import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
+import Quote from '../quote/quote.vue'
 import StatusContent from '../status_content/status_content.vue'
 import StatusPopover from '../status_popover/status_popover.vue'
 import Timeago from '../timeago/timeago.vue'
@@ -127,6 +128,7 @@ const Status = {
     MentionsLine,
     UserPopover,
     UserLink,
+    Quote,
     StatusActionButtons,
   },
   props: [
@@ -172,7 +174,6 @@ const Status = {
       suspendable: true,
       error: null,
       headTailLinks: null,
-      displayQuote: !this.inQuote,
     }
   },
   computed: {
@@ -500,19 +501,17 @@ const Status = {
     editingAvailable() {
       return useInstanceCapabilitiesStore().editingAvailable
     },
-    hasVisibleQuote() {
-      return this.status.quote_url && this.status.quote_visible
-    },
-    hasInvisibleQuote() {
-      return this.status.quote_url && !this.status.quote_visible
-    },
-    quotedStatus() {
+    quoteId() {
       return this.status.quote_id
-        ? this.$store.state.statuses.allStatusesObject[this.status.quote_id]
-        : undefined
     },
-    shouldDisplayQuote() {
-      return this.quotedStatus && this.displayQuote
+    quoteUrl() {
+      return this.status.quote_url
+    },
+    quoteVisible() {
+      return this.status.quote_visible
+    },
+    quoteExpanded() {
+      return !this.inQuote
     },
     scrobblePresent() {
       if (this.mergedConfig.hideScrobbles) return false
@@ -632,17 +631,6 @@ const Status = {
         }
       }
     },
-    toggleDisplayQuote() {
-      if (this.shouldDisplayQuote) {
-        this.displayQuote = false
-      } else if (!this.quotedStatus) {
-        this.$store.dispatch('fetchStatus', this.status.quote_id).then(() => {
-          this.displayQuote = true
-        })
-      } else {
-        this.displayQuote = true
-      }
-    },
   },
   watch: {
     highlight: function (id) {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 897730a07..2a40f0dde 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -388,22 +388,4 @@
       }
     }
   }
-
-  .quoted-status {
-    margin-top: 0.5em;
-    border: 1px solid var(--border);
-    border-radius: var(--roundness);
-
-    &.-unavailable-prompt {
-      padding: 0.5em;
-    }
-  }
-
-  .display-quoted-status-button {
-    margin: 0.5em;
-
-    &-icon {
-      color: inherit;
-    }
-  }
 }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 8c78fddc1..1b65b453a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -419,47 +419,12 @@
             @parse-ready="setHeadTailLinks"
           />
 
-          <article
-            v-if="hasVisibleQuote"
-            class="quoted-status"
-          >
-            <button
-              class="button-unstyled -link display-quoted-status-button"
-              :aria-expanded="shouldDisplayQuote"
-              @click="toggleDisplayQuote"
-            >
-              {{ shouldDisplayQuote ? $t('status.hide_quote') : $t('status.display_quote') }}
-              <FAIcon
-                class="display-quoted-status-button-icon"
-                :icon="shouldDisplayQuote ? 'chevron-up' : 'chevron-down'"
-              />
-            </button>
-            <Status
-              v-if="shouldDisplayQuote"
-              :statusoid="quotedStatus"
-              :in-quote="true"
-            />
-          </article>
-          <p
-            v-else-if="hasInvisibleQuote"
-            class="quoted-status -unavailable-prompt"
-          >
-            <i18n-t
-              scope="global"
-              keypath="status.invisible_quote"
-            >
-              <template #link>
-                <bdi>
-                  <a
-                    :href="status.quote_url"
-                    target="_blank"
-                  >
-                    {{ status.quote_url }}
-                  </a>
-                </bdi>
-              </template>
-            </i18n-t>
-          </p>
+          <Quote
+            :status-id="quoteId"
+            :status-url="quoteUrl"
+            :status-visible="quoteVisible"
+            :initially-expanded="quoteExpanded"
+          />
 
           <div
             v-if="inConversation && !isPreview && replies && replies.length"
diff --git a/src/components/status_action_buttons/status_action_buttons.scss b/src/components/status_action_buttons/status_action_buttons.scss
index 23b86e5bd..3bbcdeefb 100644
--- a/src/components/status_action_buttons/status_action_buttons.scss
+++ b/src/components/status_action_buttons/status_action_buttons.scss
@@ -6,7 +6,7 @@
     grid-template-columns: repeat(auto-fill, minmax(10%, 3em));
     grid-auto-flow: row dense;
     grid-auto-rows: 1fr;
-    grid-gap: 1.25em 1em;
+    grid-gap: 1.25em 0;
     margin-top: var(--status-margin);
   }
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 8dea6851b..3302df88b 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -284,6 +284,7 @@
     "new_status": "Post new status",
     "reply_option": "Reply to this status",
     "quote_option": "Quote this status",
+    "quote_url": "Link to quoted post",
     "account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
     "account_not_locked_warning_link": "locked",
     "attachments_sensitive": "Mark attachments as sensitive",
@@ -1763,6 +1764,7 @@
     "favorite": "Favorite",
     "unfavorite": "Unfavorite",
     "add_reaction": "Add Reaction",
+    "add_quote": "Add quote",
     "user_settings": "User Settings",
     "accept_follow_request": "Accept follow request",
     "reject_follow_request": "Reject follow request",
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 48f8b9e8a..2e2ca5a5c 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -693,7 +693,7 @@ const fetchStatus = ({ id, credentials }) => {
       if (data.ok) {
         return data
       }
-      throw new Error('Error fetching timeline', data)
+      throw new Error('Error fetching timeline', { cause: data })
     })
     .then((data) => data.json())
     .then((data) => parseStatus(data))
@@ -706,7 +706,7 @@ const fetchStatusSource = ({ id, credentials }) => {
       if (data.ok) {
         return data
       }
-      throw new Error('Error fetching source', data)
+      throw new Error('Error fetching source', { cause: data })
     })
     .then((data) => data.json())
     .then((data) => parseSource(data))
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 62d7fa855..909a014ce 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -383,7 +383,7 @@ export const parseStatus = (data) => {
     }
 
     output.summary_raw_html = escapeHtml(data.spoiler_text)
-    output.external_url = data.url
+    output.external_url = data.uri || data.url
     output.poll = data.poll
     if (output.poll) {
       output.poll.options = (output.poll.options || []).map((field) => ({