Implement sending quote posts

src/components/post_status_form/post_status_form.js

@@ -156,7 +156,8 @@ const PostStatusForm = {
         poll: this.statusPoll || {},
         mediaDescriptions: this.statusMediaDescriptions || {},
         visibility: this.statusScope || scope,
-        contentType: statusContentType
+        contentType: statusContentType,
+        quoting: false
       }
     }
 
@@ -265,6 +266,24 @@ const PostStatusForm = {
     isEdit () {
       return typeof this.statusId !== 'undefined' && this.statusId.trim() !== ''
     },
+    quotable () {
+      if (!this.replyTo) {
+        return false
+      }
+
+      const repliedStatus = this.$store.state.statuses.allStatusesObject[this.replyTo]
+      if (!repliedStatus) {
+        return false
+      }
+
+      if (repliedStatus.visibility === 'public' ||
+          repliedStatus.visibility === 'unlisted' ||
+          repliedStatus.visibility === 'local') {
+        return true
+      } else if (repliedStatus.visibility === 'private') {
+        return repliedStatus.account.id === this.$store.state.users.currentUser.id
+      }
+    },
     ...mapGetters(['mergedConfig']),
     ...mapState({
       mobileLayout: state => state.interface.mobileLayout
@@ -292,7 +311,8 @@ const PostStatusForm = {
         visibility: newStatus.visibility,
         contentType: newStatus.contentType,
         poll: {},
-        mediaDescriptions: {}
+        mediaDescriptions: {},
+        quoting: false
       }
       this.pollFormVisible = false
       this.$refs.mediaUpload && this.$refs.mediaUpload.clearFile()
@@ -340,6 +360,8 @@ const PostStatusForm = {
         return
       }
 
+      const replyOrQuoteAttr = newStatus.quoting ? 'quoteId' : 'inReplyToStatusId'
+
       const postingOptions = {
         status: newStatus.status,
         spoilerText: newStatus.spoilerText || null,
@@ -347,7 +369,7 @@ const PostStatusForm = {
         sensitive: newStatus.nsfw,
         media: newStatus.files,
         store: this.$store,
-        inReplyToStatusId: this.replyTo,
+        [replyOrQuoteAttr]: this.replyTo,
         contentType: newStatus.contentType,
         poll,
         idempotencyKey: this.idempotencyKey
@@ -373,6 +395,7 @@ const PostStatusForm = {
       }
       const newStatus = this.newStatus
       this.previewLoading = true
+      const replyOrQuoteAttr = newStatus.quoting ? 'quoteId' : 'inReplyToStatusId'
       statusPoster.postStatus({
         status: newStatus.status,
         spoilerText: newStatus.spoilerText || null,
@@ -380,7 +403,7 @@ const PostStatusForm = {
         sensitive: newStatus.nsfw,
         media: [],
         store: this.$store,
-        inReplyToStatusId: this.replyTo,
+        [replyOrQuoteAttr]: this.replyTo,
         contentType: newStatus.contentType,
         poll: {},
         preview: true

src/components/post_status_form/post_status_form.vue

@@ -126,6 +126,42 @@
             class="preview-status"
           />
         </div>
+        <div
+          v-if="quotable"
+          role="radiogroup"
+          class="reply-or-quote-selector"
+        >
+          <div
+            class="reply-or-quote-option"
+            tabindex="0"
+            role="radio"
+            :aria-checked="!newStatus.quoting"
+            @click="newStatus.quoting = false"
+          >
+            <input
+              type="radio"
+              :checked="!newStatus.quoting"
+            >
+            <label class="reply-or-quote-option-text">
+              {{ $t('post_status.reply_option') }}
+            </label>
+          </div>
+          <div
+            class="reply-or-quote-option"
+            tabindex="0"
+            role="radio"
+            :aria-checked="newStatus.quoting"
+            @click="newStatus.quoting = true"
+          >
+            <input
+              type="radio"
+              :checked="newStatus.quoting"
+            >
+            <label class="reply-or-quote-option-text">
+              {{ $t('post_status.quote_option') }}
+            </label>
+          </div>
+        </div>
         <EmojiInput
           v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)"
           v-model="newStatus.spoilerText"
@@ -420,6 +456,20 @@
     margin: 0;
   }
 
+  .reply-or-quote-selector {
+    display: flex;
+    flex-direction: column;
+
+    .reply-or-quote-option {
+      display: flex;
+      align-items: center;
+
+      .reply-or-quote-option-text::before {
+        vertical-align: middle;
+      }
+    }
+  }
+
   .text-format {
     .only-format {
       color: $fallback--faint;