add option to remove all drafts in one go

src/components/drafts/drafts.js

@@ -1,16 +1,39 @@
 import Draft from 'src/components/draft/draft.vue'
 import List from 'src/components/list/list.vue'
+import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 
 const Drafts = {
   components: {
     Draft,
     List,
+    ConfirmModal,
+  },
+  data() {
+    return {
+      showingConfirmDialog: false
+    }
   },
   computed: {
     drafts() {
       return this.$store.getters.draftsArray
     },
   },
+  methods: {
+    abandonAll() {
+      this.showingConfirmDialog = true
+    },
+    doAbandonAll() {
+      this.drafts.forEach((draft) => {
+        this.$store.dispatch('abandonDraft', { id: draft.id }).then(() => {
+          this.hideConfirmDialog()
+        })
+      })
+      this.hideConfirmDialog()
+    },
+    hideConfirmDialog() {
+      this.showingConfirmDialog = false
+    },
+  }
 }
 
 export default Drafts

src/components/drafts/drafts.vue

@@ -13,36 +13,66 @@
         >
           {{ $t('drafts.no_drafts') }}
         </div>
-        <List
-          v-else
-          :items="drafts"
-          :non-interactive="true"
-        >
-          <template #item="{ item: draft }">
-            <Draft
-              class="draft"
-              :draft="draft"
-            />
-          </template>
-        </List>
+        <template v-else>
+          <List
+            :items="drafts"
+            :non-interactive="true"
+          >
+            <template #item="{ item: draft }">
+              <Draft
+                class="draft"
+                :draft="draft"
+              />
+            </template>
+          </List>
+          <div class="remove-all">
+            <button
+              class="btn -danger button-default"
+              @click="abandonAll"
+            >
+              {{ $t('drafts.clean_drafts') }}
+            </button>
+          </div>
+        </template>
       </div>
     </div>
+    <teleport to="#modal">
+      <confirm-modal
+        v-if="showingConfirmDialog"
+        :confirm-danger="true"
+        :title="$t('drafts.abandon_confirm_title')"
+        :confirm-text="$t('drafts.abandon_confirm_accept_button')"
+        :cancel-text="$t('drafts.abandon_confirm_cancel_button')"
+        @accepted="doAbandonAll"
+        @cancelled="hideConfirmDialog"
+      >
+        {{ $t('drafts.abandon_all_confirm') }}
+      </confirm-modal>
+    </teleport>
   </div>
 </template>
 
 <script src="./drafts.js"></script>
 
 <style lang="scss">
-.draft {
-  margin: 1em 0;
-}
+.Drafts {
+  .draft {
+    margin: 1em 0;
+  }
 
-.empty-drafs-list-alert {
-  padding: 3em;
-  font-size: 1.2em;
-  display: flex;
-  justify-content: center;
-  color: var(--textFaint);
+  .remove-all {
+    margin: 1em;
+    display: flex;
+    justify-content: center;
+  }
+
+  .empty-drafs-list-alert {
+    padding: 3em;
+    font-size: 1.2em;
+    display: flex;
+    justify-content: center;
+    color: var(--textFaint);
+  }
 }
 
 </style>

src/i18n/en.json

@@ -1884,6 +1884,7 @@
   "drafts": {
     "drafts": "Drafts",
     "no_drafts": "You have no drafts",
+    "clean_drafts": "Remove all drafts",
     "empty": "(No content)",
     "poll_tooltip": "Draft contains a poll",
     "continue": "Continue composing",
@@ -1893,6 +1894,7 @@
     "abandon_confirm": "Do you really want to abandon this draft?",
     "abandon_confirm_accept_button": "Abandon",
     "abandon_confirm_cancel_button": "Keep",
+    "abandon_all_confirm": "Do you really want to abandon all drafts?",
     "replying": "Replying to {statusLink}",
     "editing": "Editing {statusLink}",
     "unavailable": "(unavailable)"