Add quoting by url / in replies

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) {

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;
-    }
-  }
 }

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"