Add delete & redraft button to posts

package.json

@@ -20,7 +20,7 @@
     "@chenfengyuan/vue-qrcode": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.3.0",
     "@fortawesome/free-regular-svg-icons": "^6.1.2",
-    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/vue-fontawesome": "3.0.1",
     "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
     "@vuelidate/core": "2.0.0-alpha.42",

src/components/extra_buttons/extra_buttons.js

@@ -8,7 +8,8 @@ import {
   faThumbtack,
   faShareAlt,
   faExternalLinkAlt,
-  faHistory
+  faHistory,
+  faFilePen
 } from '@fortawesome/free-solid-svg-icons'
 import {
   faBookmark as faBookmarkReg,
@@ -24,7 +25,8 @@ library.add(
   faShareAlt,
   faExternalLinkAlt,
   faFlag,
-  faHistory
+  faHistory,
+  faFilePen
 )
 
 const ExtraButtons = {
@@ -36,7 +38,8 @@ const ExtraButtons = {
   data () {
     return {
       expanded: false,
-      showingDeleteDialog: false
+      showingDeleteDialog: false,
+      showingRedraftDialog: false
     }
   },
   methods: {
@@ -122,6 +125,34 @@ const ExtraButtons = {
       const stripFieldsList = ['attachments', 'created_at', 'emojis', 'text', 'raw_html', 'nsfw', 'poll', 'summary', 'summary_raw_html']
       stripFieldsList.forEach(p => delete originalStatus[p])
       this.$store.dispatch('openStatusHistoryModal', originalStatus)
+    },
+    redraftStatus () {
+      if (this.shouldConfirmDelete) {
+        this.showRedraftStatusConfirmDialog()
+      } else {
+        this.doRedraftStatus()
+      }
+    },
+    doRedraftStatus () {
+      this.$store.dispatch('fetchStatusSource', { id: this.status.id })
+        .then(data => this.$store.dispatch('openPostStatusModal', {
+          isRedraft: true,
+          statusId: this.status.id,
+          subject: data.spoiler_text,
+          statusText: data.text,
+          statusIsSensitive: this.status.nsfw,
+          statusPoll: this.status.poll,
+          statusFiles: [...this.status.attachments],
+          statusScope: this.status.visibility,
+          statusContentType: data.content_type
+        }))
+      this.doDeleteStatus()
+    },
+    showRedraftStatusConfirmDialog () {
+      this.showingRedraftDialog = true
+    },
+    hideRedraftStatusConfirmDialog () {
+      this.showingRedraftDialog = false
     }
   },
   computed: {

src/components/extra_buttons/extra_buttons.vue

@@ -95,6 +95,17 @@
             icon="history"
           /><span>{{ $t("status.edit_history") }}</span>
         </button>
+        <button
+          v-if="ownStatus"
+          class="button-default dropdown-item dropdown-item-icon"
+          @click.prevent="redraftStatus"
+          @click="close"
+        >
+          <FAIcon
+            fixed-width
+            icon="file-pen"
+          /><span>{{ $t("status.redraft") }}</span>
+        </button>
         <button
           v-if="canDelete"
           class="button-default dropdown-item dropdown-item-icon"
@@ -179,6 +190,16 @@
         >
           {{ $t('status.delete_confirm') }}
         </ConfirmModal>
+        <ConfirmModal
+          v-if="showingRedraftDialog"
+          :title="$t('status.redraft_confirm_title')"
+          :cancel-text="$t('status.redraft_confirm_cancel_button')"
+          :confirm-text="$t('status.redraft_confirm_accept_button')"
+          @cancelled="hideRedraftStatusConfirmDialog"
+          @accepted="doRedraftStatus"
+        >
+          {{ $t('status.redraft_confirm') }}
+        </ConfirmModal>
       </teleport>
     </template>
   </Popover>

src/components/post_status_form/post_status_form.js

@@ -86,7 +86,8 @@ const PostStatusForm = {
     'fileLimit',
     'submitOnEnter',
     'emojiPickerPlacement',
-    'optimisticPosting'
+    'optimisticPosting',
+    'isRedraft'
   ],
   emits: [
     'posted',
@@ -141,7 +142,7 @@ const PostStatusForm = {
       contentType
     }
 
-    if (this.statusId) {
+    if (this.statusId || this.isRedraft) {
       const statusContentType = this.statusContentType || contentType
       statusParams = {
         spoilerText: this.subject || '',
@@ -259,7 +260,7 @@ const PostStatusForm = {
       return this.newStatus.files.length >= this.fileLimit
     },
     isEdit () {
-      return typeof this.statusId !== 'undefined' && this.statusId.trim() !== ''
+      return typeof this.statusId !== 'undefined' && this.statusId.trim() !== '' && !this.isRedraft
     },
     ...mapGetters(['mergedConfig']),
     ...mapState({

src/components/post_status_modal/post_status_modal.js

@@ -28,7 +28,8 @@ const PostStatusModal = {
   },
   watch: {
     params (newVal, oldVal) {
-      if (get(newVal, 'repliedUser.id') !== get(oldVal, 'repliedUser.id')) {
+      if (get(newVal, 'repliedUser.id') !== get(oldVal, 'repliedUser.id') ||
+          get(newVal, 'statusId') !== get(oldVal, 'statusId')) {
         this.resettingForm = true
         this.$nextTick(() => {
           this.resettingForm = false

src/i18n/en.json

@@ -925,6 +925,11 @@
         "pin": "Pin on profile",
         "pinned": "Pinned",
         "plus_more": "+{number} more",
+        "redraft": "Delete & redraft",
+        "redraft_confirm": "Do you really want to delete and redraft this post? Interactions to the original post will not be preserved.",
+        "redraft_confirm_accept_button": "Yes, delete and redraft",
+        "redraft_confirm_cancel_button": "No, keep the original",
+        "redraft_confirm_title": "Confirm delete & redraft",
         "remove_attachment": "Remove attachment",
         "repeat_confirm": "Do you really want to repeat this post?",
         "repeat_confirm_accept_button": "Yes, repeat it",