a bit clearer draft editing flow, partially divorced menu-item from list-item

src/components/draft/draft.js

@@ -3,6 +3,7 @@ import EditStatusForm from 'src/components/edit_status_form/edit_status_form.vue
 import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import StatusContent from 'src/components/status_content/status_content.vue'
 import Gallery from 'src/components/gallery/gallery.vue'
+import { cloneDeep } from 'lodash'
 
 const Draft = {
   components: {
@@ -19,8 +20,8 @@ const Draft = {
     }
   },
   data () {
-    console.log('DRAFT', this.draft)
     return {
+      referenceDraft: cloneDeep(this.draft),
       editing: false,
       showingConfirmDialog: false
     }
@@ -35,6 +36,11 @@ const Draft = {
         return {}
       }
     },
+    safeToSave () {
+      return this.draft.status ||
+        this.draft.files?.length ||
+        this.draft.hasPoll
+    },
     postStatusFormProps () {
       return {
         draftId: this.draft.id,
@@ -48,7 +54,6 @@ const Draft = {
       return this.$store.getters.mergedConfig.collapseMessageWithSubject
     },
     nsfwClickthrough () {
-      console.log(this.draft)
       if (!this.draft.nsfw) {
         return false
       }
@@ -58,6 +63,16 @@ const Draft = {
       return true
     }
   },
+  watch: {
+    editing (newVal) {
+      if (newVal) return
+      if (this.safeToSave) {
+        this.$store.dispatch('addOrSaveDraft', { draft: this.draft })
+      } else {
+        this.$store.dispatch('addOrSaveDraft', { draft: this.referenceDraft })
+      }
+    }
+  },
   methods: {
     toggleEditing () {
       this.editing = !this.editing

src/components/draft/draft.vue

@@ -44,10 +44,12 @@
     <div v-if="editing">
       <PostStatusForm
         v-if="draft.type !== 'edit'"
+        :disable-draft="true"
         v-bind="postStatusFormProps"
       />
       <EditStatusForm
         v-else
+        :disable-draft="true"
         :params="postStatusFormProps"
       />
     </div>
@@ -66,11 +68,10 @@
     <div class="actions">
       <button
         class="btn button-default"
-        :class="{ toggled: editing }"
         :aria-expanded="editing"
         @click.prevent.stop="toggleEditing"
       >
-        {{ $t('drafts.continue') }}
+        {{ editing ? $t('drafts.save') : $t('drafts.continue') }}
       </button>
       <button
         class="btn button-default"
@@ -87,6 +88,8 @@
 <style lang="scss">
 .Draft {
   position: relative;
+  line-height: 1.1;
+  font-size: initial;
 
   a {
     color: var(--link);
@@ -119,7 +122,6 @@
       flex: 1;
       margin-left: 1em;
       margin-right: 1em;
-      max-width: 10em;
     }
   }
 }