Give the option to auto save drafts

src/components/post_status_form/post_status_form.js

@@ -294,12 +294,24 @@ const PostStatusForm = {
     isEdit () {
       return typeof this.statusId !== 'undefined' && this.statusId.trim() !== ''
     },
-    // debouncedSaveDraft () {
-    //   return debounce(this.saveDraft, 3000)
-    // },
+    debouncedMaybeAutoSaveDraft () {
+      return debounce(this.maybeAutoSaveDraft, 3000)
+    },
     pollFormVisible () {
       return this.newStatus.hasPoll
     },
+    shouldAutoSaveDraft () {
+      return this.$store.getters.mergedConfig.autoSaveDraft
+    },
+    autoSaveState () {
+      if (this.savable) {
+        return this.$t('post_status.auto_save_saving')
+      } else if (this.newStatus.id) {
+        return this.$t('post_status.auto_save_saved')
+      } else {
+        return this.$t('post_status.auto_save_nothing_new')
+      }
+    },
     ...mapGetters(['mergedConfig']),
     ...mapState({
       mobileLayout: state => state.interface.mobileLayout
@@ -314,13 +326,13 @@ const PostStatusForm = {
     }
   },
   beforeUnmount () {
-    // this.saveDraft()
+    this.maybeAutoSaveDraft()
   },
   methods: {
     statusChanged () {
       this.autoPreview()
       this.updateIdempotencyKey()
-      // this.debouncedSaveDraft()
+      this.debouncedMaybeAutoSaveDraft()
       this.savable = true
       this.saveInhibited = false
     },
@@ -688,12 +700,17 @@ const PostStatusForm = {
           .then(id => {
             if (this.newStatus.id !== id) {
               this.newStatus.id = id
-              this.savable = false
             }
+            this.savable = false
           })
       }
       return Promise.resolve()
     },
+    maybeAutoSaveDraft () {
+      if (this.shouldAutoSaveDraft) {
+        this.saveDraft()
+      }
+    },
     abandonDraft () {
       return this.$store.dispatch('abandonDraft', { id: this.newStatus.id })
     },

src/components/post_status_form/post_status_form.vue

@@ -267,6 +267,18 @@
             <FAIcon icon="poll-h" />
           </button>
         </div>
+        <span
+          v-if="shouldAutoSaveDraft"
+          class="auto-save-status"
+        >
+          {{ autoSaveState }}
+        </span>
+        <button
+          v-else
+          class="btn button-default"
+        >
+          {{ $t('post_status.save_to_drafts_button') }}
+        </button>
         <button
           v-if="posting"
           disabled
@@ -613,5 +625,9 @@
     border: 2px dashed $fallback--text;
     border: 2px dashed var(--text, $fallback--text);
   }
+
+  .auto-save-status {
+    align-self: center;
+  }
 }
 </style>

src/components/settings_modal/tabs/general_tab.vue

@@ -518,6 +518,13 @@
             {{ $t('settings.autocomplete_select_first') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting
+            path="autoSaveDraft"
+          >
+            {{ $t('settings.auto_save_draft') }}
+          </BooleanSetting>
+        </li>
         <li>
           <ChoiceSetting
             id="unsavedPostAction"

src/i18n/en.json

@@ -301,7 +301,11 @@
     "close_confirm": "What do you want to do with your current writing?",
     "close_confirm_save_button": "Save",
     "close_confirm_discard_button": "Discard",
-    "close_confirm_continue_composing_button": "Continue composing"
+    "close_confirm_continue_composing_button": "Continue composing",
+    "auto_save_nothing_new": "Nothing new to save.",
+    "auto_save_saved": "Saved.",
+    "auto_save_saving": "Saving...",
+    "save_to_drafts_button": "Save to drafts"
   },
   "registration": {
     "bio_optional": "Bio (optional)",
@@ -476,6 +480,7 @@
     "unsaved_post_action_save": "Save it to drafts",
     "unsaved_post_action_discard": "Discard it",
     "unsaved_post_action_confirm": "Ask every time",
+    "auto_save_draft": "Save drafts as you compose",
     "emoji_reactions_on_timeline": "Show emoji reactions on timeline",
     "emoji_reactions_scale": "Reactions scale factor",
     "export_theme": "Save preset",

src/modules/config.js

@@ -119,7 +119,8 @@ export const defaultState = {
   conversationTreeFadeAncestors: undefined, // instance default
   maxDepthInThread: undefined, // instance default
   autocompleteSelect: undefined, // instance default
-  unsavedPostAction: undefined // instance default
+  unsavedPostAction: undefined, // instance default
+  autoSaveDraft: undefined // instance default
 }
 
 // caching the instance default properties

src/modules/instance.js

@@ -106,6 +106,7 @@ const defaultState = {
   maxDepthInThread: 6,
   autocompleteSelect: false,
   unsavedPostAction: 'confirm',
+  autoSaveDraft: false,
 
   // Nasty stuff
   customEmoji: [],