From 1aa0901471beb3f77feced1f2ac72726cb8aebfc Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 10 Mar 2023 11:20:06 -0500
Subject: [PATCH 01/34] Add basic draft saving

---
 .../post_status_form/post_status_form.js      | 54 +++++++++++++++++--
 src/main.js                                   |  2 +
 src/modules/drafts.js                         | 35 ++++++++++++
 3 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 src/modules/drafts.js

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 563dfb96..ccb1e2cc 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -55,6 +55,18 @@ const pxStringToNumber = (str) => {
   return Number(str.substring(0, str.length - 2))
 }
 
+const typeAndRefId = ({ replyTo, profileMention, statusId }) => {
+  if (replyTo) {
+    return ['reply', replyTo]
+  } else if (profileMention) {
+    return ['mention', profileMention]
+  } else if (statusId) {
+    return ['edit', statusId]
+  } else {
+    return ['new', '']
+  }
+}
+
 const PostStatusForm = {
   props: [
     'statusId',
@@ -88,7 +100,8 @@ const PostStatusForm = {
     'submitOnEnter',
     'emojiPickerPlacement',
     'optimisticPosting',
-    'profileMention'
+    'profileMention',
+    'draftId'
   ],
   emits: [
     'posted',
@@ -126,7 +139,9 @@ const PostStatusForm = {
 
     const { scopeCopy } = this.$store.getters.mergedConfig
 
-    if (this.replyTo || this.profileMention) {
+    const [statusType, refId] = typeAndRefId({ replyTo: this.replyTo, profileMention: this.profileMention, statusId: this.statusId })
+
+    if (statusType === 'reply' || statusType === 'mention') {
       const currentUser = this.$store.state.users.currentUser
       statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
     }
@@ -138,6 +153,8 @@ const PostStatusForm = {
     const { postContentType: contentType, sensitiveByDefault } = this.$store.getters.mergedConfig
 
     let statusParams = {
+      type: statusType,
+      refId,
       spoilerText: this.subject || '',
       status: statusText,
       nsfw: !!sensitiveByDefault,
@@ -148,9 +165,11 @@ const PostStatusForm = {
       contentType
     }
 
-    if (this.statusId) {
+    if (statusType === 'edit') {
       const statusContentType = this.statusContentType || contentType
       statusParams = {
+        type: statusType,
+        refId,
         spoilerText: this.subject || '',
         status: this.statusText || '',
         nsfw: this.statusIsSensitive || !!sensitiveByDefault,
@@ -163,6 +182,21 @@ const PostStatusForm = {
       }
     }
 
+    console.debug('type and ref:', [statusType, refId])
+
+    const maybeDraft = this.$store.state.drafts.drafts[this.draftId]
+    if (this.draftId && maybeDraft) {
+      console.debug('current draft:', maybeDraft)
+      statusParams = maybeDraft
+    } else {
+      const existingDrafts = this.$store.getters.draftsByTypeAndRefId(statusType, refId)
+
+      console.debug('existing drafts:', existingDrafts)
+      if (existingDrafts.length) {
+        statusParams = existingDrafts[0]
+      }
+    }
+
     return {
       randomSeed: genRandomSeed(),
       dropFiles: [],
@@ -293,6 +327,19 @@ const PostStatusForm = {
 
       return false
     },
+    saveDraft () {
+      return debounce(() => {
+        if (this.newStatus.status) {
+          console.debug('Saving status', this.newStatus)
+          this.$store.dispatch('addOrSaveDraft', { draft: this.newStatus })
+            .then(id => {
+              if (this.newStatus.id !== id) {
+                this.newStatus.id = id
+              }
+            })
+        }
+      }, 3000)
+    },
     ...mapGetters(['mergedConfig']),
     ...mapState({
       mobileLayout: state => state.interface.mobileLayout
@@ -310,6 +357,7 @@ const PostStatusForm = {
     statusChanged () {
       this.autoPreview()
       this.updateIdempotencyKey()
+      this.saveDraft()
     },
     clearStatus () {
       const newStatus = this.newStatus
diff --git a/src/main.js b/src/main.js
index 85eb1f4c..a2af7b19 100644
--- a/src/main.js
+++ b/src/main.js
@@ -24,6 +24,7 @@ import pollsModule from './modules/polls.js'
 import postStatusModule from './modules/postStatus.js'
 import editStatusModule from './modules/editStatus.js'
 import statusHistoryModule from './modules/statusHistory.js'
+import draftsModule from './modules/drafts.js'
 
 import chatsModule from './modules/chats.js'
 import announcementsModule from './modules/announcements.js'
@@ -96,6 +97,7 @@ const persistedStateOptions = {
       postStatus: postStatusModule,
       editStatus: editStatusModule,
       statusHistory: statusHistoryModule,
+      drafts: draftsModule,
       chats: chatsModule,
       announcements: announcementsModule
     },
diff --git a/src/modules/drafts.js b/src/modules/drafts.js
new file mode 100644
index 00000000..465c9aad
--- /dev/null
+++ b/src/modules/drafts.js
@@ -0,0 +1,35 @@
+
+export const defaultState = {
+  drafts: {}
+}
+
+export const mutations = {
+  addOrSaveDraft (state, { draft }) {
+    state.drafts[draft.id] = draft
+  }
+}
+
+export const actions = {
+  addOrSaveDraft (store, { draft }) {
+    const id = draft.id || (new Date().getTime()).toString()
+    store.commit('addOrSaveDraft', { draft: { ...draft, id } })
+    return id
+  }
+}
+
+export const getters = {
+  draftsByTypeAndRefId (state) {
+    return (type, refId) => {
+      return Object.values(state.drafts).filter(draft => draft.type === type && draft.refId === refId)
+    }
+  }
+}
+
+const drafts = {
+  state: defaultState,
+  mutations,
+  getters,
+  actions
+}
+
+export default drafts

From 1edada7e9dc05e2ae837acb9ea196e2f7e351e3a Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 10 Mar 2023 11:24:18 -0500
Subject: [PATCH 02/34] Save draft immediately before unmount

---
 .../post_status_form/post_status_form.js      | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index ccb1e2cc..f8b8deb7 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -327,18 +327,8 @@ const PostStatusForm = {
 
       return false
     },
-    saveDraft () {
-      return debounce(() => {
-        if (this.newStatus.status) {
-          console.debug('Saving status', this.newStatus)
-          this.$store.dispatch('addOrSaveDraft', { draft: this.newStatus })
-            .then(id => {
-              if (this.newStatus.id !== id) {
-                this.newStatus.id = id
-              }
-            })
-        }
-      }, 3000)
+    debouncedSaveDraft () {
+      return debounce(this.saveDraft, 3000)
     },
     ...mapGetters(['mergedConfig']),
     ...mapState({
@@ -353,11 +343,14 @@ const PostStatusForm = {
       }
     }
   },
+  beforeUnmount () {
+    this.saveDraft()
+  },
   methods: {
     statusChanged () {
       this.autoPreview()
       this.updateIdempotencyKey()
-      this.saveDraft()
+      this.debouncedSaveDraft()
     },
     clearStatus () {
       const newStatus = this.newStatus
@@ -713,6 +706,17 @@ const PostStatusForm = {
     },
     propsToNative (props) {
       return propsToNative(props)
+    },
+    saveDraft () {
+      if (this.newStatus.status) {
+        console.debug('Saving status', this.newStatus)
+        this.$store.dispatch('addOrSaveDraft', { draft: this.newStatus })
+          .then(id => {
+            if (this.newStatus.id !== id) {
+              this.newStatus.id = id
+            }
+          })
+      }
     }
   }
 }

From 02e2e6b1bf635c8f39af2b40904bc64cc7166bf9 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 10 Mar 2023 12:10:39 -0500
Subject: [PATCH 03/34] Add minimal draft management tool

---
 src/boot/routes.js                            |  2 +
 src/components/draft/draft.js                 | 42 +++++++++
 src/components/draft/draft.vue                | 35 ++++++++
 src/components/drafts/drafts.js               | 17 ++++
 src/components/drafts/drafts.vue              | 24 +++++
 src/components/nav_panel/nav_panel.js         |  6 +-
 src/components/navigation/navigation.js       |  5 ++
 .../post_status_form/post_status_form.js      | 90 ++++++++++---------
 src/i18n/en.json                              |  7 +-
 src/modules/drafts.js                         |  3 +
 10 files changed, 186 insertions(+), 45 deletions(-)
 create mode 100644 src/components/draft/draft.js
 create mode 100644 src/components/draft/draft.vue
 create mode 100644 src/components/drafts/drafts.js
 create mode 100644 src/components/drafts/drafts.vue

diff --git a/src/boot/routes.js b/src/boot/routes.js
index 31e3dbb0..fe076172 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -26,6 +26,7 @@ import ListsEdit from 'components/lists_edit/lists_edit.vue'
 import NavPanel from 'src/components/nav_panel/nav_panel.vue'
 import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
 import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
+import Drafts from 'components/drafts/drafts.vue'
 
 export default (store) => {
   const validateAuthenticatedRoute = (to, from, next) => {
@@ -80,6 +81,7 @@ export default (store) => {
     { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
     { name: 'about', path: '/about', component: About },
     { name: 'announcements', path: '/announcements', component: AnnouncementsPage },
+    { name: 'drafts', path: '/drafts', component: Drafts },
     { name: 'user-profile', path: '/users/:name', component: UserProfile },
     { name: 'legacy-user-profile', path: '/:name', component: UserProfile },
     { name: 'lists', path: '/lists', component: Lists },
diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
new file mode 100644
index 00000000..1914024f
--- /dev/null
+++ b/src/components/draft/draft.js
@@ -0,0 +1,42 @@
+import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
+
+const Draft = {
+  components: {
+    PostStatusForm
+  },
+  props: {
+    draft: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      editing: false
+    }
+  },
+  computed: {
+    relAttrs () {
+      if (this.draft.type === 'edit') {
+        return { statusId: this.draft.refId }
+      } else if (this.draft.type === 'reply') {
+        return { replyTo: this.draft.refId }
+      } else {
+        return {}
+      }
+    },
+    postStatusFormProps () {
+      return {
+        draftId: this.draft.id,
+        ...this.relAttrs
+      }
+    }
+  },
+  methods: {
+    toggleEditing () {
+      this.editing = !this.editing
+    }
+  }
+}
+
+export default Draft
diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
new file mode 100644
index 00000000..5114da70
--- /dev/null
+++ b/src/components/draft/draft.vue
@@ -0,0 +1,35 @@
+<template>
+  <article class="Draft">
+    <div>
+      {{ draft.id }}
+    </div>
+    <div v-if="draft.inReplyToStatusId">
+      {{ draft.inReplyToStatusId }}
+    </div>
+    <div
+      class="draft-content"
+    >
+      {{ draft.status }}
+    </div>
+    <div>
+      <button
+        class="btn button-default"
+        :aria-expanded="editing"
+        @click.prevent.stop="toggleEditing"
+      >
+        {{ $t('drafts.continue') }}
+      </button>
+    </div>
+    <div v-if="editing">
+      <PostStatusForm v-bind="postStatusFormProps" />
+    </div>
+  </article>
+</template>
+
+<script src="./draft.js"></script>
+
+<style lang="scss">
+.Draft {
+  margin: 1em;
+}
+</style>
diff --git a/src/components/drafts/drafts.js b/src/components/drafts/drafts.js
new file mode 100644
index 00000000..6703a48e
--- /dev/null
+++ b/src/components/drafts/drafts.js
@@ -0,0 +1,17 @@
+import Draft from 'src/components/draft/draft.vue'
+import List from 'src/components/list/list.vue'
+
+const Drafts = {
+  components: {
+    Draft,
+    List
+  },
+  computed: {
+    drafts () {
+      console.debug('available drafts:', this.$store.getters.draftsArray)
+      return this.$store.getters.draftsArray
+    }
+  }
+}
+
+export default Drafts
diff --git a/src/components/drafts/drafts.vue b/src/components/drafts/drafts.vue
new file mode 100644
index 00000000..e64a506e
--- /dev/null
+++ b/src/components/drafts/drafts.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="Drafts">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <div class="title">
+          {{ $t('drafts.drafts') }}
+        </div>
+      </div>
+      <div class="panel-body">
+        <List
+          :items="drafts"
+        >
+          <template #item="{ item: draft }">
+            <Draft
+              :draft="draft"
+            />
+          </template>
+        </List>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./drafts.js"></script>
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 8c9c3b11..f8d551c7 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -19,7 +19,8 @@ import {
   faInfoCircle,
   faStream,
   faList,
-  faBullhorn
+  faBullhorn,
+  faFilePen
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -34,7 +35,8 @@ library.add(
   faInfoCircle,
   faStream,
   faList,
-  faBullhorn
+  faBullhorn,
+  faFilePen
 )
 const NavPanel = {
   props: ['forceExpand', 'forceEditMode'],
diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js
index face430e..41685cda 100644
--- a/src/components/navigation/navigation.js
+++ b/src/components/navigation/navigation.js
@@ -78,6 +78,11 @@ export const ROOT_ITEMS = {
     label: 'nav.announcements',
     badgeGetter: 'unreadAnnouncementCount',
     criteria: ['announcements']
+  },
+  drafts: {
+    route: 'drafts',
+    icon: 'file-pen',
+    label: 'nav.drafts'
   }
 }
 
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index f8b8deb7..f6e20066 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -141,59 +141,48 @@ const PostStatusForm = {
 
     const [statusType, refId] = typeAndRefId({ replyTo: this.replyTo, profileMention: this.profileMention, statusId: this.statusId })
 
-    if (statusType === 'reply' || statusType === 'mention') {
-      const currentUser = this.$store.state.users.currentUser
-      statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
-    }
+    let statusParams = this.getDraft(statusType, refId)
 
-    const scope = ((this.copyMessageScope && scopeCopy) || this.copyMessageScope === 'direct')
-      ? this.copyMessageScope
-      : this.$store.state.users.currentUser.default_scope
+    if (!statusParams) {
+      if (statusType === 'reply' || statusType === 'mention') {
+        const currentUser = this.$store.state.users.currentUser
+        statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
+      }
 
-    const { postContentType: contentType, sensitiveByDefault } = this.$store.getters.mergedConfig
+      const scope = ((this.copyMessageScope && scopeCopy) || this.copyMessageScope === 'direct')
+        ? this.copyMessageScope
+        : this.$store.state.users.currentUser.default_scope
 
-    let statusParams = {
-      type: statusType,
-      refId,
-      spoilerText: this.subject || '',
-      status: statusText,
-      nsfw: !!sensitiveByDefault,
-      files: [],
-      poll: {},
-      mediaDescriptions: {},
-      visibility: scope,
-      contentType
-    }
+      const { postContentType: contentType, sensitiveByDefault } = this.$store.getters.mergedConfig
 
-    if (statusType === 'edit') {
-      const statusContentType = this.statusContentType || contentType
       statusParams = {
         type: statusType,
         refId,
         spoilerText: this.subject || '',
-        status: this.statusText || '',
-        nsfw: this.statusIsSensitive || !!sensitiveByDefault,
-        files: this.statusFiles || [],
-        poll: this.statusPoll || {},
-        mediaDescriptions: this.statusMediaDescriptions || {},
-        visibility: this.statusScope || scope,
-        contentType: statusContentType,
+        status: statusText,
+        nsfw: !!sensitiveByDefault,
+        files: [],
+        poll: {},
+        mediaDescriptions: {},
+        visibility: scope,
+        contentType,
         quoting: false
       }
-    }
 
-    console.debug('type and ref:', [statusType, refId])
-
-    const maybeDraft = this.$store.state.drafts.drafts[this.draftId]
-    if (this.draftId && maybeDraft) {
-      console.debug('current draft:', maybeDraft)
-      statusParams = maybeDraft
-    } else {
-      const existingDrafts = this.$store.getters.draftsByTypeAndRefId(statusType, refId)
-
-      console.debug('existing drafts:', existingDrafts)
-      if (existingDrafts.length) {
-        statusParams = existingDrafts[0]
+      if (statusType === 'edit') {
+        const statusContentType = this.statusContentType || contentType
+        statusParams = {
+          type: statusType,
+          refId,
+          spoilerText: this.subject || '',
+          status: this.statusText || '',
+          nsfw: this.statusIsSensitive || !!sensitiveByDefault,
+          files: this.statusFiles || [],
+          poll: this.statusPoll || {},
+          mediaDescriptions: this.statusMediaDescriptions || {},
+          visibility: this.statusScope || scope,
+          contentType: statusContentType
+        }
       }
     }
 
@@ -717,6 +706,23 @@ const PostStatusForm = {
             }
           })
       }
+    },
+    getDraft (statusType, refId) {
+      console.debug('type and ref:', [statusType, refId])
+
+      const maybeDraft = this.$store.state.drafts.drafts[this.draftId]
+      if (this.draftId && maybeDraft) {
+        console.debug('current draft:', maybeDraft)
+        return maybeDraft
+      } else {
+        const existingDrafts = this.$store.getters.draftsByTypeAndRefId(statusType, refId)
+
+        console.debug('existing drafts:', existingDrafts)
+        if (existingDrafts.length) {
+          return existingDrafts[0]
+        }
+      }
+      // No draft available, fall back
     }
   }
 }
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 3f7ea282..71059df1 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -190,7 +190,8 @@
     "mobile_notifications_close": "Close notifications",
     "mobile_notifications_mark_as_seen": "Mark all as seen",
     "announcements": "Announcements",
-    "quotes": "Quotes"
+    "quotes": "Quotes",
+    "drafts": "Drafts"
   },
   "notifications": {
     "broken_favorite": "Unknown status, searching for it…",
@@ -1401,5 +1402,9 @@
   },
   "unicode_domain_indicator": {
     "tooltip": "This domain contains non-ascii characters."
+  },
+  "drafts": {
+    "drafts": "Drafts",
+    "continue": "Continue editing"
   }
 }
diff --git a/src/modules/drafts.js b/src/modules/drafts.js
index 465c9aad..81199c62 100644
--- a/src/modules/drafts.js
+++ b/src/modules/drafts.js
@@ -22,6 +22,9 @@ export const getters = {
     return (type, refId) => {
       return Object.values(state.drafts).filter(draft => draft.type === type && draft.refId === refId)
     }
+  },
+  draftsArray (state) {
+    return Object.values(state.drafts)
   }
 }
 

From a245379f43cf91d36cb4e5360a858f0cedb688a7 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 10 Mar 2023 12:39:08 -0500
Subject: [PATCH 04/34] Make it possible to abandon draft

---
 src/components/draft/draft.js  | 24 +++++++++++++--
 src/components/draft/draft.vue | 53 +++++++++++++++++++++++++++-------
 src/i18n/en.json               |  7 ++++-
 src/modules/drafts.js          |  6 ++++
 4 files changed, 77 insertions(+), 13 deletions(-)

diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
index 1914024f..8c4b662b 100644
--- a/src/components/draft/draft.js
+++ b/src/components/draft/draft.js
@@ -1,8 +1,10 @@
 import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
+import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 
 const Draft = {
   components: {
-    PostStatusForm
+    PostStatusForm,
+    ConfirmModal
   },
   props: {
     draft: {
@@ -12,7 +14,8 @@ const Draft = {
   },
   data () {
     return {
-      editing: false
+      editing: false,
+      showingConfirmDialog: false
     }
   },
   computed: {
@@ -35,6 +38,23 @@ const Draft = {
   methods: {
     toggleEditing () {
       this.editing = !this.editing
+    },
+    abandon () {
+      this.showingConfirmDialog = true
+    },
+    doAbandon () {
+      console.debug('abandoning')
+      this.$store.dispatch('abandonDraft', { id: this.draft.id })
+        .then(() => {
+          this.hideConfirmDialog()
+        })
+    },
+    hideConfirmDialog () {
+      this.showingConfirmDialog = false
+    },
+    handlePosted () {
+      console.debug('posted')
+      this.doAbandon()
     }
   }
 }
diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
index 5114da70..dbea442b 100644
--- a/src/components/draft/draft.vue
+++ b/src/components/draft/draft.vue
@@ -1,28 +1,48 @@
 <template>
   <article class="Draft">
-    <div>
-      {{ draft.id }}
-    </div>
     <div v-if="draft.inReplyToStatusId">
       {{ draft.inReplyToStatusId }}
     </div>
-    <div
-      class="draft-content"
-    >
-      {{ draft.status }}
-    </div>
-    <div>
+    <div class="actions">
       <button
         class="btn button-default"
+        :class="{ toggled: editing }"
         :aria-expanded="editing"
         @click.prevent.stop="toggleEditing"
       >
         {{ $t('drafts.continue') }}
       </button>
+      <button
+        class="btn button-default"
+        @click.prevent.stop="abandon"
+      >
+        {{ $t('drafts.abandon') }}
+      </button>
     </div>
+    <p
+      v-if="!editing"
+      class="draft-content"
+    >
+      {{ draft.status }}
+    </p>
     <div v-if="editing">
-      <PostStatusForm v-bind="postStatusFormProps" />
+      <PostStatusForm
+        v-bind="postStatusFormProps"
+        @posted="handlePosted"
+      />
     </div>
+    <teleport to="#modal">
+      <confirm-modal
+        v-if="showingConfirmDialog"
+        :title="$t('drafts.abandon_confirm_title')"
+        :confirm-text="$t('drafts.abandon_confirm_accept_button')"
+        :cancel-text="$t('drafts.abandon_confirm_cancel_button')"
+        @accepted="doAbandon"
+        @cancelled="hideConfirmDialog"
+      >
+        {{ $t('drafts.abandon_confirm') }}
+      </confirm-modal>
+    </teleport>
   </article>
 </template>
 
@@ -31,5 +51,18 @@
 <style lang="scss">
 .Draft {
   margin: 1em;
+
+  .actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+
+    .btn {
+      flex: 1;
+      margin-left: 1em;
+      margin-right: 1em;
+      max-width: 10em;
+    }
+  }
 }
 </style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 71059df1..502be45f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1405,6 +1405,11 @@
   },
   "drafts": {
     "drafts": "Drafts",
-    "continue": "Continue editing"
+    "continue": "Continue editing",
+    "abandon": "Abandon draft",
+    "abandon_confirm_title": "Abandon confirmation",
+    "abandon_confirm": "Do you really want to abandon this draft?",
+    "abandon_confirm_accept_button": "Abandon",
+    "abandon_confirm_cancel_button": "Keep"
   }
 }
diff --git a/src/modules/drafts.js b/src/modules/drafts.js
index 81199c62..808e6837 100644
--- a/src/modules/drafts.js
+++ b/src/modules/drafts.js
@@ -6,6 +6,9 @@ export const defaultState = {
 export const mutations = {
   addOrSaveDraft (state, { draft }) {
     state.drafts[draft.id] = draft
+  },
+  abandonDraft (state, { id }) {
+    delete state.drafts[id]
   }
 }
 
@@ -14,6 +17,9 @@ export const actions = {
     const id = draft.id || (new Date().getTime()).toString()
     store.commit('addOrSaveDraft', { draft: { ...draft, id } })
     return id
+  },
+  abandonDraft (store, { id }) {
+    store.commit('abandonDraft', { id })
   }
 }
 

From 8a7f17ac9e9c58ef4b5a17bd26a5a762a06a8814 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 10 Mar 2023 13:22:44 -0500
Subject: [PATCH 05/34] Display information about replied-to/edited status

---
 src/components/draft/draft.js  |  7 +++++-
 src/components/draft/draft.vue | 46 ++++++++++++++++++++++++++++------
 src/i18n/en.json               |  4 ++-
 3 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
index 8c4b662b..9b052606 100644
--- a/src/components/draft/draft.js
+++ b/src/components/draft/draft.js
@@ -1,10 +1,12 @@
 import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
 import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
+import StatusContent from 'src/components/status_content/status_content.vue'
 
 const Draft = {
   components: {
     PostStatusForm,
-    ConfirmModal
+    ConfirmModal,
+    StatusContent
   },
   props: {
     draft: {
@@ -33,6 +35,9 @@ const Draft = {
         draftId: this.draft.id,
         ...this.relAttrs
       }
+    },
+    refStatus () {
+      return this.draft.refId ? this.$store.state.statuses.allStatusesObject[this.draft.refId] : undefined
     }
   },
   methods: {
diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
index dbea442b..6e1b65bd 100644
--- a/src/components/draft/draft.vue
+++ b/src/components/draft/draft.vue
@@ -1,8 +1,5 @@
 <template>
   <article class="Draft">
-    <div v-if="draft.inReplyToStatusId">
-      {{ draft.inReplyToStatusId }}
-    </div>
     <div class="actions">
       <button
         class="btn button-default"
@@ -19,12 +16,34 @@
         {{ $t('drafts.abandon') }}
       </button>
     </div>
-    <p
+    <div
       v-if="!editing"
-      class="draft-content"
+      class="status-content"
     >
-      {{ draft.status }}
-    </p>
+      <div>
+        <i18n-t
+          v-if="draft.type === 'reply' || draft.type === 'edit'"
+          tag="span"
+          :keypath="draft.type === 'reply' ? 'drafts.replying' : 'drafts.editing'"
+        >
+          <template #statusLink>
+            <router-link
+              class="faint-link"
+              :to="{ name: 'conversation', params: { id: draft.refId } }"
+            >
+              {{ refStatus.external_url }}
+            </router-link>
+          </template>
+        </i18n-t>
+        <StatusContent
+          v-if="draft.refId"
+          class="status-content"
+          :status="refStatus"
+          :compact="true"
+        />
+      </div>
+      <p>{{ draft.status }}</p>
+    </div>
     <div v-if="editing">
       <PostStatusForm
         v-bind="postStatusFormProps"
@@ -49,9 +68,22 @@
 <script src="./draft.js"></script>
 
 <style lang="scss">
+@import "src/variables";
+
 .Draft {
   margin: 1em;
 
+  .status-content {
+    border: 1px solid $fallback--faint;
+    border-color: var(--faint, $fallback--faint);
+    border-radius: $fallback--inputRadius;
+    border-radius: var(--inputRadius, $fallback--inputRadius);
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+    padding: 0.5em;
+    margin: 0.5em 0;
+  }
+
   .actions {
     display: flex;
     flex-direction: row;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 502be45f..da887902 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1410,6 +1410,8 @@
     "abandon_confirm_title": "Abandon confirmation",
     "abandon_confirm": "Do you really want to abandon this draft?",
     "abandon_confirm_accept_button": "Abandon",
-    "abandon_confirm_cancel_button": "Keep"
+    "abandon_confirm_cancel_button": "Keep",
+    "replying": "Replying to {statusLink}",
+    "editing": "Editing {statusLink}"
   }
 }

From ba5cad90d891011dc0cf9068bc1614014f4520ec Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 10 Mar 2023 19:24:01 -0500
Subject: [PATCH 06/34] Support editing

---
 src/components/draft/draft.js                 |  2 +
 src/components/draft/draft.vue                |  6 +++
 .../edit_status_form/edit_status_form.js      | 41 +++++++++++++++++++
 .../edit_status_form/edit_status_form.vue     | 10 +++++
 .../edit_status_modal/edit_status_modal.js    | 28 +------------
 .../edit_status_modal/edit_status_modal.vue   |  7 +---
 6 files changed, 63 insertions(+), 31 deletions(-)
 create mode 100644 src/components/edit_status_form/edit_status_form.js
 create mode 100644 src/components/edit_status_form/edit_status_form.vue

diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
index 9b052606..f5f44467 100644
--- a/src/components/draft/draft.js
+++ b/src/components/draft/draft.js
@@ -1,10 +1,12 @@
 import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
+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'
 
 const Draft = {
   components: {
     PostStatusForm,
+    EditStatusForm,
     ConfirmModal,
     StatusContent
   },
diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
index 6e1b65bd..43b14721 100644
--- a/src/components/draft/draft.vue
+++ b/src/components/draft/draft.vue
@@ -46,9 +46,15 @@
     </div>
     <div v-if="editing">
       <PostStatusForm
+        v-if="draft.type !== 'edit'"
         v-bind="postStatusFormProps"
         @posted="handlePosted"
       />
+      <EditStatusForm
+        v-else
+        :params="postStatusFormProps"
+        @posted="handlePosted"
+      />
     </div>
     <teleport to="#modal">
       <confirm-modal
diff --git a/src/components/edit_status_form/edit_status_form.js b/src/components/edit_status_form/edit_status_form.js
new file mode 100644
index 00000000..9a0bcc0e
--- /dev/null
+++ b/src/components/edit_status_form/edit_status_form.js
@@ -0,0 +1,41 @@
+import PostStatusForm from '../post_status_form/post_status_form.vue'
+import statusPosterService from '../../services/status_poster/status_poster.service.js'
+
+const EditStatusForm = {
+  components: {
+    PostStatusForm
+  },
+  props: {
+    params: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    doEditStatus ({ status, spoilerText, sensitive, media, contentType, poll }) {
+      const params = {
+        store: this.$store,
+        statusId: this.params.statusId,
+        status,
+        spoilerText,
+        sensitive,
+        poll,
+        media,
+        contentType
+      }
+
+      return statusPosterService.editStatus(params)
+        .then((data) => {
+          return data
+        })
+        .catch((err) => {
+          console.error('Error editing status', err)
+          return {
+            error: err.message
+          }
+        })
+    }
+  }
+}
+
+export default EditStatusForm
diff --git a/src/components/edit_status_form/edit_status_form.vue b/src/components/edit_status_form/edit_status_form.vue
new file mode 100644
index 00000000..eee2d39a
--- /dev/null
+++ b/src/components/edit_status_form/edit_status_form.vue
@@ -0,0 +1,10 @@
+<template>
+  <PostStatusForm
+    v-bind="params"
+    :post-handler="doEditStatus"
+    :disable-polls="true"
+    :disable-visibility-selector="true"
+  />
+</template>
+
+<script src="./edit_status_form.js"></script>
diff --git a/src/components/edit_status_modal/edit_status_modal.js b/src/components/edit_status_modal/edit_status_modal.js
index 75adfea7..90964c95 100644
--- a/src/components/edit_status_modal/edit_status_modal.js
+++ b/src/components/edit_status_modal/edit_status_modal.js
@@ -1,11 +1,10 @@
-import PostStatusForm from '../post_status_form/post_status_form.vue'
+import EditStatusForm from '../edit_status_form/edit_status_form.vue'
 import Modal from '../modal/modal.vue'
-import statusPosterService from '../../services/status_poster/status_poster.service.js'
 import get from 'lodash/get'
 
 const EditStatusModal = {
   components: {
-    PostStatusForm,
+    EditStatusForm,
     Modal
   },
   data () {
@@ -43,29 +42,6 @@ const EditStatusModal = {
     }
   },
   methods: {
-    doEditStatus ({ status, spoilerText, sensitive, media, contentType, poll }) {
-      const params = {
-        store: this.$store,
-        statusId: this.$store.state.editStatus.params.statusId,
-        status,
-        spoilerText,
-        sensitive,
-        poll,
-        media,
-        contentType
-      }
-
-      return statusPosterService.editStatus(params)
-        .then((data) => {
-          return data
-        })
-        .catch((err) => {
-          console.error('Error editing status', err)
-          return {
-            error: err.message
-          }
-        })
-    },
     closeModal () {
       this.$store.dispatch('closeEditStatusModal')
     }
diff --git a/src/components/edit_status_modal/edit_status_modal.vue b/src/components/edit_status_modal/edit_status_modal.vue
index db62972d..96d05343 100644
--- a/src/components/edit_status_modal/edit_status_modal.vue
+++ b/src/components/edit_status_modal/edit_status_modal.vue
@@ -8,12 +8,9 @@
       <div class="panel-heading">
         {{ $t('post_status.edit_status') }}
       </div>
-      <PostStatusForm
+      <EditStatusForm
         class="panel-body"
-        v-bind="params"
-        :post-handler="doEditStatus"
-        :disable-polls="true"
-        :disable-visibility-selector="true"
+        :params="params"
         @posted="closeModal"
       />
     </div>

From e67e5ff8992409dfc1d312da93e5e2d6b712663f Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 10 Mar 2023 19:28:08 -0500
Subject: [PATCH 07/34] Abandon draft after all postings

---
 src/components/draft/draft.js                       | 4 ----
 src/components/draft/draft.vue                      | 2 --
 src/components/post_status_form/post_status_form.js | 4 ++++
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
index f5f44467..ffc3671a 100644
--- a/src/components/draft/draft.js
+++ b/src/components/draft/draft.js
@@ -58,10 +58,6 @@ const Draft = {
     },
     hideConfirmDialog () {
       this.showingConfirmDialog = false
-    },
-    handlePosted () {
-      console.debug('posted')
-      this.doAbandon()
     }
   }
 }
diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
index 43b14721..cc385c14 100644
--- a/src/components/draft/draft.vue
+++ b/src/components/draft/draft.vue
@@ -48,12 +48,10 @@
       <PostStatusForm
         v-if="draft.type !== 'edit'"
         v-bind="postStatusFormProps"
-        @posted="handlePosted"
       />
       <EditStatusForm
         v-else
         :params="postStatusFormProps"
-        @posted="handlePosted"
       />
     </div>
     <teleport to="#modal">
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index f6e20066..8cfcec64 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -418,6 +418,7 @@ const PostStatusForm = {
 
       postHandler(postingOptions).then((data) => {
         if (!data.error) {
+          this.abandonDraft()
           this.clearStatus()
           this.$emit('posted', data)
         } else {
@@ -707,6 +708,9 @@ const PostStatusForm = {
           })
       }
     },
+    abandonDraft () {
+      this.$store.dispatch('abandonDraft', { id: this.newStatus.id })
+    },
     getDraft (statusType, refId) {
       console.debug('type and ref:', [statusType, refId])
 

From 747bad79fcacf6659b75bc46c76eb85fe58efed7 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 10 Mar 2023 19:36:54 -0500
Subject: [PATCH 08/34] Handle situations where draft should be saved

---
 src/components/post_status_form/post_status_form.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 8cfcec64..c2661a85 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -201,7 +201,8 @@ const PostStatusForm = {
       preview: null,
       previewLoading: false,
       emojiInputShown: false,
-      idempotencyKey: ''
+      idempotencyKey: '',
+      saveInhibited: true
     }
   },
   computed: {
@@ -340,9 +341,11 @@ const PostStatusForm = {
       this.autoPreview()
       this.updateIdempotencyKey()
       this.debouncedSaveDraft()
+      this.saveInhibited = false
     },
     clearStatus () {
       const newStatus = this.newStatus
+      this.saveInhibited = true
       this.newStatus = {
         status: '',
         spoilerText: '',
@@ -698,7 +701,7 @@ const PostStatusForm = {
       return propsToNative(props)
     },
     saveDraft () {
-      if (this.newStatus.status) {
+      if (!this.saveInhibited) {
         console.debug('Saving status', this.newStatus)
         this.$store.dispatch('addOrSaveDraft', { draft: this.newStatus })
           .then(id => {

From 2a8c7e8e7d5a4525463d369b24802b71222d37ed Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 10 Mar 2023 20:16:03 -0500
Subject: [PATCH 09/34] Handle polls in drafts

---
 src/components/poll/poll_form.js              | 48 ++++++++++---------
 .../post_status_form/post_status_form.js      | 13 +++--
 .../post_status_form/post_status_form.vue     |  2 +-
 src/services/poll/poll.service.js             | 36 ++++++++++++++
 4 files changed, 71 insertions(+), 28 deletions(-)
 create mode 100644 src/services/poll/poll.service.js

diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
index a2070155..951b9454 100644
--- a/src/components/poll/poll_form.js
+++ b/src/components/poll/poll_form.js
@@ -1,5 +1,5 @@
 import * as DateUtils from 'src/services/date_utils/date_utils.js'
-import { uniq } from 'lodash'
+import { pollFallback } from 'src/services/poll/poll.service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import Select from '../select/select.vue'
 import {
@@ -17,14 +17,31 @@ export default {
     Select
   },
   name: 'PollForm',
-  props: ['visible'],
-  data: () => ({
-    pollType: 'single',
-    options: ['', ''],
-    expiryAmount: 10,
-    expiryUnit: 'minutes'
-  }),
+  props: {
+    visible: {},
+    modelValue: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['update:modelValue'],
   computed: {
+    pollType: {
+      get () { return pollFallback(this.modelValue, 'pollType') },
+      set (newVal) { this.$emit('update:modelValue', { ...this.modelValue, pollType: newVal }) }
+    },
+    options: {
+      get () { return pollFallback(this.modelValue, 'options') },
+      set (newVal) { this.$emit('update:modelValue', { ...this.modelValue, options: newVal }) }
+    },
+    expiryAmount: {
+      get () { return pollFallback(this.modelValue, 'expiryAmount') },
+      set (newVal) { this.$emit('update:modelValue', { ...this.modelValue, expiryAmount: newVal }) }
+    },
+    expiryUnit: {
+      get () { return pollFallback(this.modelValue, 'expiryUnit') },
+      set (newVal) { this.$emit('update:modelValue', { ...this.modelValue, expiryUnit: newVal }) }
+    },
     pollLimits () {
       return this.$store.state.instance.pollLimits
     },
@@ -107,21 +124,6 @@ export default {
       this.updatePollToParent()
     },
     updatePollToParent () {
-      const expiresIn = this.convertExpiryFromUnit(
-        this.expiryUnit,
-        this.expiryAmount
-      )
-
-      const options = uniq(this.options.filter(option => option !== ''))
-      if (options.length < 2) {
-        this.$emit('update-poll', { error: this.$t('polls.not_enough_options') })
-        return
-      }
-      this.$emit('update-poll', {
-        options,
-        multiple: this.pollType === 'multiple',
-        expiresIn
-      })
     }
   }
 }
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index c2661a85..81846995 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -10,6 +10,7 @@ import StatusContent from '../status_content/status_content.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
 import { propsToNative } from '../../services/attributes_helper/attributes_helper.service.js'
+import { pollFormToMasto } from 'src/services/poll/poll.service.js'
 import { reject, map, uniqBy, debounce } from 'lodash'
 import suggestor from '../emoji_input/suggestor.js'
 import { mapGetters, mapState } from 'vuex'
@@ -163,6 +164,7 @@ const PostStatusForm = {
         nsfw: !!sensitiveByDefault,
         files: [],
         poll: {},
+        hasPoll: false,
         mediaDescriptions: {},
         visibility: scope,
         contentType,
@@ -179,6 +181,7 @@ const PostStatusForm = {
           nsfw: this.statusIsSensitive || !!sensitiveByDefault,
           files: this.statusFiles || [],
           poll: this.statusPoll || {},
+          hasPoll: false,
           mediaDescriptions: this.statusMediaDescriptions || {},
           visibility: this.statusScope || scope,
           contentType: statusContentType
@@ -195,7 +198,6 @@ const PostStatusForm = {
       highlighted: 0,
       newStatus: statusParams,
       caret: 0,
-      pollFormVisible: false,
       showDropIcon: 'hide',
       dropStopTimeout: null,
       preview: null,
@@ -320,6 +322,9 @@ const PostStatusForm = {
     debouncedSaveDraft () {
       return debounce(this.saveDraft, 3000)
     },
+    pollFormVisible () {
+      return this.newStatus.hasPoll
+    },
     ...mapGetters(['mergedConfig']),
     ...mapState({
       mobileLayout: state => state.interface.mobileLayout
@@ -353,10 +358,10 @@ const PostStatusForm = {
         visibility: newStatus.visibility,
         contentType: newStatus.contentType,
         poll: {},
+        hasPoll: false,
         mediaDescriptions: {},
         quoting: false
       }
-      this.pollFormVisible = false
       this.$refs.mediaUpload && this.$refs.mediaUpload.clearFile()
       this.clearPollForm()
       if (this.preserveFocus) {
@@ -386,7 +391,7 @@ const PostStatusForm = {
         return
       }
 
-      const poll = this.pollFormVisible ? this.newStatus.poll : {}
+      const poll = this.newStatus.hasPoll ? pollFormToMasto(this.newStatus.poll) : {}
       if (this.pollContentError) {
         this.error = this.pollContentError
         return
@@ -666,7 +671,7 @@ const PostStatusForm = {
       this.newStatus.visibility = visibility
     },
     togglePollForm () {
-      this.pollFormVisible = !this.pollFormVisible
+      this.newStatus.hasPoll = !this.newStatus.hasPoll
     },
     setPoll (poll) {
       this.newStatus.poll = poll
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index cf411ff1..a1b69c62 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -263,7 +263,7 @@
         v-if="pollsAvailable"
         ref="pollForm"
         :visible="pollFormVisible"
-        @update-poll="setPoll"
+        v-model="newStatus.poll"
       />
       <div
         ref="bottom"
diff --git a/src/services/poll/poll.service.js b/src/services/poll/poll.service.js
new file mode 100644
index 00000000..90f8e87a
--- /dev/null
+++ b/src/services/poll/poll.service.js
@@ -0,0 +1,36 @@
+import * as DateUtils from 'src/services/date_utils/date_utils.js'
+import { uniq } from 'lodash'
+
+const pollFallbackValues = {
+  pollType: 'single',
+  options: ['', ''],
+  expiryAmount: 10,
+  expiryUnit: 'minutes'
+}
+
+const pollFallback = (object, attr) => {
+  return object[attr] !== undefined ? object[attr] : pollFallbackValues[attr]
+}
+
+const pollFormToMasto = (poll) => {
+  const expiresIn = DateUtils.unitToSeconds(
+    pollFallback(poll, 'expiryUnit'),
+    pollFallback(poll, 'expiryAmount')
+  )
+
+  const options = uniq(pollFallback(poll, 'options').filter(option => option !== ''))
+  if (options.length < 2) {
+    return { errorKey: 'polls.not_enough_options' }
+  }
+
+  return {
+    options,
+    multiple: pollFallback(poll, 'pollType') === 'multiple',
+    expiresIn
+  }
+}
+
+export {
+  pollFallback,
+  pollFormToMasto
+}

From 1bffcc5fe71ac3eac1d3e343523df18ee825eaae Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 10 Mar 2023 20:19:16 -0500
Subject: [PATCH 10/34] Use the word compose instead of edit in drafts

---
 src/i18n/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index da887902..9274684f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1405,7 +1405,7 @@
   },
   "drafts": {
     "drafts": "Drafts",
-    "continue": "Continue editing",
+    "continue": "Continue composing",
     "abandon": "Abandon draft",
     "abandon_confirm_title": "Abandon confirmation",
     "abandon_confirm": "Do you really want to abandon this draft?",

From 71f16ec39c2ae1e5c4d2a842f894f2469dfa5079 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 10 Mar 2023 20:22:41 -0500
Subject: [PATCH 11/34] Add draft count to nav panel

---
 src/components/navigation/navigation.js | 3 ++-
 src/modules/drafts.js                   | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js
index 41685cda..c3071c8c 100644
--- a/src/components/navigation/navigation.js
+++ b/src/components/navigation/navigation.js
@@ -82,7 +82,8 @@ export const ROOT_ITEMS = {
   drafts: {
     route: 'drafts',
     icon: 'file-pen',
-    label: 'nav.drafts'
+    label: 'nav.drafts',
+    badgeGetter: 'draftCount'
   }
 }
 
diff --git a/src/modules/drafts.js b/src/modules/drafts.js
index 808e6837..01eb3dcf 100644
--- a/src/modules/drafts.js
+++ b/src/modules/drafts.js
@@ -31,6 +31,9 @@ export const getters = {
   },
   draftsArray (state) {
     return Object.values(state.drafts)
+  },
+  draftCount (state) {
+    return Object.values(state.drafts).length
   }
 }
 

From 98bbb4eeef0364b42a9ac626eddc0bf7081fa3b5 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 10 Mar 2023 20:26:13 -0500
Subject: [PATCH 12/34] Add drafts to side drawer

---
 src/components/side_drawer/side_drawer.js  |  8 +++++---
 src/components/side_drawer/side_drawer.vue | 21 +++++++++++++++++++++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 81c5a612..0b6d8159 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -17,7 +17,8 @@ import {
   faCog,
   faInfoCircle,
   faCompass,
-  faList
+  faList,
+  faFilePen
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -33,7 +34,8 @@ library.add(
   faCog,
   faInfoCircle,
   faCompass,
-  faList
+  faList,
+  faFilePen
 )
 
 const SideDrawer = {
@@ -98,7 +100,7 @@ const SideDrawer = {
       pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
       supportsAnnouncements: state => state.announcements.supportsAnnouncements
     }),
-    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
+    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount', 'draftCount'])
   },
   methods: {
     toggleDrawer () {
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 608b5608..1c9830d1 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -240,6 +240,27 @@
             </span>
           </router-link>
         </li>
+        <li
+          v-if="currentUser"
+          @click="toggleDrawer"
+        >
+          <router-link
+            :to="{ name: 'drafts' }"
+            class="menu-item"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="file-pen"
+            /> {{ $t('nav.drafts') }}
+            <span
+              v-if="draftCount"
+              class="badge badge-notification"
+            >
+              {{ draftCount }}
+            </span>
+          </router-link>
+        </li>
         <li
           v-if="currentUser"
           @click="toggleDrawer"

From b6f1178ea3936a9cc6dea7af24f8be8822ba8b6a Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 10 Mar 2023 21:37:03 -0500
Subject: [PATCH 13/34] Save drafts permanently in local storage

---
 src/boot/after_store.js        |  2 ++
 src/components/draft/draft.vue |  4 +--
 src/i18n/en.json               |  3 ++-
 src/lib/persisted_state.js     |  4 +--
 src/lib/storage.js             |  3 +++
 src/modules/drafts.js          | 45 +++++++++++++++++++++++++++++++---
 src/sw.js                      |  2 +-
 7 files changed, 54 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/storage.js

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index a486bd4c..a334662e 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -362,6 +362,8 @@ const afterStoreSetup = async ({ store, i18n }) => {
     getInstanceConfig({ store })
   ])
 
+  await store.dispatch('loadDrafts')
+
   // Start fetching things that don't need to block the UI
   store.dispatch('fetchMutes')
   store.dispatch('startFetchingAnnouncements')
diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
index cc385c14..daa890d8 100644
--- a/src/components/draft/draft.vue
+++ b/src/components/draft/draft.vue
@@ -31,12 +31,12 @@
               class="faint-link"
               :to="{ name: 'conversation', params: { id: draft.refId } }"
             >
-              {{ refStatus.external_url }}
+              {{ refStatus ? refStatus.external_url : $t('drafts.unavailable') }}
             </router-link>
           </template>
         </i18n-t>
         <StatusContent
-          v-if="draft.refId"
+          v-if="draft.refId && refStatus"
           class="status-content"
           :status="refStatus"
           :compact="true"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 9274684f..f5d6174f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1412,6 +1412,7 @@
     "abandon_confirm_accept_button": "Abandon",
     "abandon_confirm_cancel_button": "Keep",
     "replying": "Replying to {statusLink}",
-    "editing": "Editing {statusLink}"
+    "editing": "Editing {statusLink}",
+    "unavailable": "(unavailable)"
   }
 }
diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js
index 22ba1e7f..035eee78 100644
--- a/src/lib/persisted_state.js
+++ b/src/lib/persisted_state.js
@@ -1,6 +1,6 @@
 import merge from 'lodash.merge'
-import localforage from 'localforage'
 import { each, get, set, cloneDeep } from 'lodash'
+import { storage } from './storage.js'
 
 let loaded = false
 
@@ -26,7 +26,7 @@ const saveImmedeatelyActions = [
 ]
 
 const defaultStorage = (() => {
-  return localforage
+  return storage
 })()
 
 export default function createPersistedState ({
diff --git a/src/lib/storage.js b/src/lib/storage.js
new file mode 100644
index 00000000..25a49abc
--- /dev/null
+++ b/src/lib/storage.js
@@ -0,0 +1,3 @@
+import localforage from 'localforage'
+
+export const storage = localforage
diff --git a/src/modules/drafts.js b/src/modules/drafts.js
index 01eb3dcf..7a38fe2d 100644
--- a/src/modules/drafts.js
+++ b/src/modules/drafts.js
@@ -1,3 +1,4 @@
+import { storage } from 'src/lib/storage.js'
 
 export const defaultState = {
   drafts: {}
@@ -9,17 +10,55 @@ export const mutations = {
   },
   abandonDraft (state, { id }) {
     delete state.drafts[id]
+  },
+  loadDrafts (state, data) {
+    state.drafts = data
   }
 }
 
+const storageKey = 'pleroma-fe-drafts'
+
+/*
+ * Note: we do not use the persist state plugin because
+ * it is not impossible for a user to have two windows at
+ * the same time. The persist state plugin is just overriding
+ * everything with the current state. This isn't good because
+ * if a draft is created in one window and another draft is
+ * created in another, the draft in the first window will just
+ * be overriden.
+ * Here, we can't guarantee 100% atomicity unless one uses
+ * different keys, which will just pollute the whole storage.
+ * It is indeed best to have backend support for this.
+ */
+const getStorageData = async () => ((await storage.getItem(storageKey)) || {})
+
+const saveDraftToStorage = async (draft) => {
+  const currentData = await getStorageData()
+  currentData[draft.id] = JSON.parse(JSON.stringify(draft))
+  await storage.setItem(storageKey, currentData)
+}
+
+const deleteDraftFromStorage = async (id) => {
+  const currentData = await getStorageData()
+  delete currentData[id]
+  await storage.setItem(storageKey, currentData)
+}
+
 export const actions = {
-  addOrSaveDraft (store, { draft }) {
+  async addOrSaveDraft (store, { draft }) {
     const id = draft.id || (new Date().getTime()).toString()
-    store.commit('addOrSaveDraft', { draft: { ...draft, id } })
+    const draftWithId = { ...draft, id }
+    store.commit('addOrSaveDraft', { draft: draftWithId })
+    await saveDraftToStorage(draftWithId)
     return id
   },
-  abandonDraft (store, { id }) {
+  async abandonDraft (store, { id }) {
     store.commit('abandonDraft', { id })
+    await deleteDraftFromStorage(id)
+  },
+  async loadDrafts (store) {
+    const currentData = await getStorageData()
+    store.commit('loadDrafts', currentData)
   }
 }
 
diff --git a/src/sw.js b/src/sw.js
index 8d790446..f028936d 100644
--- a/src/sw.js
+++ b/src/sw.js
@@ -1,6 +1,6 @@
 /* eslint-env serviceworker */
 
-import localForage from 'localforage'
+import { storage } from 'src/lib/storage.js'
 import { parseNotification } from './services/entity_normalizer/entity_normalizer.service.js'
 import { prepareNotificationObject } from './services/notification_utils/notification_utils.js'
 import { createI18n } from 'vue-i18n'

From 2edf5fc9f6e7975c727bfa25b733b5f15953adf2 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 10 Mar 2023 21:39:15 -0500
Subject: [PATCH 14/34] Clean up debug statements

---
 src/components/draft/draft.js                       | 1 -
 src/components/drafts/drafts.js                     | 1 -
 src/components/post_status_form/post_status_form.js | 5 -----
 3 files changed, 7 deletions(-)

diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
index ffc3671a..cb07ec5c 100644
--- a/src/components/draft/draft.js
+++ b/src/components/draft/draft.js
@@ -50,7 +50,6 @@ const Draft = {
       this.showingConfirmDialog = true
     },
     doAbandon () {
-      console.debug('abandoning')
       this.$store.dispatch('abandonDraft', { id: this.draft.id })
         .then(() => {
           this.hideConfirmDialog()
diff --git a/src/components/drafts/drafts.js b/src/components/drafts/drafts.js
index 6703a48e..201417f6 100644
--- a/src/components/drafts/drafts.js
+++ b/src/components/drafts/drafts.js
@@ -8,7 +8,6 @@ const Drafts = {
   },
   computed: {
     drafts () {
-      console.debug('available drafts:', this.$store.getters.draftsArray)
       return this.$store.getters.draftsArray
     }
   }
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 81846995..f830048e 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -707,7 +707,6 @@ const PostStatusForm = {
     },
     saveDraft () {
       if (!this.saveInhibited) {
-        console.debug('Saving status', this.newStatus)
         this.$store.dispatch('addOrSaveDraft', { draft: this.newStatus })
           .then(id => {
             if (this.newStatus.id !== id) {
@@ -720,16 +719,12 @@ const PostStatusForm = {
       this.$store.dispatch('abandonDraft', { id: this.newStatus.id })
     },
     getDraft (statusType, refId) {
-      console.debug('type and ref:', [statusType, refId])
-
       const maybeDraft = this.$store.state.drafts.drafts[this.draftId]
       if (this.draftId && maybeDraft) {
-        console.debug('current draft:', maybeDraft)
         return maybeDraft
       } else {
         const existingDrafts = this.$store.getters.draftsByTypeAndRefId(statusType, refId)
 
-        console.debug('existing drafts:', existingDrafts)
         if (existingDrafts.length) {
           return existingDrafts[0]
         }

From dee38f7fe4d4599480afa10f4d8f6d4d47c7ac23 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sun, 12 Mar 2023 15:19:48 -0400
Subject: [PATCH 15/34] Save only if status has something to save

---
 src/components/post_status_form/post_status_form.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index f830048e..f4341cfa 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -706,7 +706,11 @@ const PostStatusForm = {
       return propsToNative(props)
     },
     saveDraft () {
-      if (!this.saveInhibited) {
+      if (!this.saveInhibited &&
+          (this.newStatus.status ||
+           this.newStatus.files?.length ||
+           this.newStatus.hasPoll
+          )) {
         this.$store.dispatch('addOrSaveDraft', { draft: this.newStatus })
           .then(id => {
             if (this.newStatus.id !== id) {

From 95b06cacea5e4bd832f826ec9ef642267e546e78 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Wed, 5 Apr 2023 22:56:39 -0400
Subject: [PATCH 16/34] Fix adding/removing poll options

---
 src/components/poll/poll_form.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
index 951b9454..a533e2b8 100644
--- a/src/components/poll/poll_form.js
+++ b/src/components/poll/poll_form.js
@@ -98,7 +98,7 @@ export default {
     },
     addOption () {
       if (this.options.length < this.maxOptions) {
-        this.options.push('')
+        this.options = [...this.options, '']
         return true
       }
       return false
@@ -106,7 +106,7 @@ export default {
     deleteOption (index, event) {
       if (this.options.length > 2) {
         this.options.splice(index, 1)
-        this.updatePollToParent()
+        this.options = [...this.options]
       }
     },
     convertExpiryToUnit (unit, amount) {
@@ -121,9 +121,6 @@ export default {
         Math.max(this.minExpirationInCurrentUnit, this.expiryAmount)
       this.expiryAmount =
         Math.min(this.maxExpirationInCurrentUnit, this.expiryAmount)
-      this.updatePollToParent()
-    },
-    updatePollToParent () {
     }
   }
 }

From edcd6982a5add96fa4390b0d18de0b0a104df1d4 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Wed, 5 Apr 2023 23:36:52 -0400
Subject: [PATCH 17/34] Fix poll duration unit

---
 src/components/poll/poll_form.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
index a533e2b8..032b3695 100644
--- a/src/components/poll/poll_form.js
+++ b/src/components/poll/poll_form.js
@@ -28,19 +28,19 @@ export default {
   computed: {
     pollType: {
       get () { return pollFallback(this.modelValue, 'pollType') },
-      set (newVal) { this.$emit('update:modelValue', { ...this.modelValue, pollType: newVal }) }
+      set (newVal) { this.modelValue.pollType = newVal }
     },
     options: {
       get () { return pollFallback(this.modelValue, 'options') },
-      set (newVal) { this.$emit('update:modelValue', { ...this.modelValue, options: newVal }) }
+      set (newVal) { this.modelValue.options = newVal }
     },
     expiryAmount: {
       get () { return pollFallback(this.modelValue, 'expiryAmount') },
-      set (newVal) { this.$emit('update:modelValue', { ...this.modelValue, expiryAmount: newVal }) }
+      set (newVal) { this.modelValue.expiryAmount = newVal }
     },
     expiryUnit: {
       get () { return pollFallback(this.modelValue, 'expiryUnit') },
-      set (newVal) { this.$emit('update:modelValue', { ...this.modelValue, expiryUnit: newVal }) }
+      set (newVal) { this.modelValue.expiryUnit = newVal }
     },
     pollLimits () {
       return this.$store.state.instance.pollLimits
@@ -98,7 +98,7 @@ export default {
     },
     addOption () {
       if (this.options.length < this.maxOptions) {
-        this.options = [...this.options, '']
+        this.options.push('')
         return true
       }
       return false
@@ -106,7 +106,6 @@ export default {
     deleteOption (index, event) {
       if (this.options.length > 2) {
         this.options.splice(index, 1)
-        this.options = [...this.options]
       }
     },
     convertExpiryToUnit (unit, amount) {

From 5206609812c5420ddc7aebc818f89c34162f28fa Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Wed, 5 Apr 2023 23:45:19 -0400
Subject: [PATCH 18/34] Prevent main post form from being associated with draft
 on load

---
 src/components/post_status_form/post_status_form.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index f4341cfa..bcf5440f 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -142,7 +142,8 @@ const PostStatusForm = {
 
     const [statusType, refId] = typeAndRefId({ replyTo: this.replyTo, profileMention: this.profileMention, statusId: this.statusId })
 
-    let statusParams = this.getDraft(statusType, refId)
+    // If we are starting a new post, do not associate it with old drafts
+    let statusParams = (this.draftId || statusType !== 'new') ? this.getDraft(statusType, refId) : null
 
     if (!statusParams) {
       if (statusType === 'reply' || statusType === 'mention') {

From b27f696d77f772b9bf0c2e5376c27e315362c942 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Thu, 6 Apr 2023 12:35:51 -0400
Subject: [PATCH 19/34] Use neutral badge for drafts

---
 src/App.scss                                   |  7 +++++++
 src/components/navigation/navigation.js        |  4 ++++
 src/components/navigation/navigation_entry.vue |  1 +
 src/components/navigation/navigation_pins.vue  | 11 +++++++++++
 src/components/side_drawer/side_drawer.vue     |  2 +-
 5 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/App.scss b/src/App.scss
index 9d1ce77a..c38c2e53 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -748,6 +748,13 @@ option {
     margin-left: 0.7em;
     margin-top: -1em;
   }
+
+  &.badge-neutral {
+    background-color: $fallback--cGreen;
+    background-color: var(--badgeNeutral, $fallback--cGreen);
+    color: white;
+    color: var(--badgeNeutralText, white);
+  }
 }
 
 .alert {
diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js
index c3071c8c..c16fe6dc 100644
--- a/src/components/navigation/navigation.js
+++ b/src/components/navigation/navigation.js
@@ -56,6 +56,7 @@ export const ROOT_ITEMS = {
     route: 'chats',
     icon: 'comments',
     label: 'nav.chats',
+    badgeStyle: 'notification',
     badgeGetter: 'unreadChatCount',
     criteria: ['chats']
   },
@@ -63,6 +64,7 @@ export const ROOT_ITEMS = {
     route: 'friend-requests',
     icon: 'user-plus',
     label: 'nav.friend_requests',
+    badgeStyle: 'notification',
     criteria: ['lockedUser'],
     badgeGetter: 'followRequestCount'
   },
@@ -76,6 +78,7 @@ export const ROOT_ITEMS = {
     route: 'announcements',
     icon: 'bullhorn',
     label: 'nav.announcements',
+    badgeStyle: 'notification',
     badgeGetter: 'unreadAnnouncementCount',
     criteria: ['announcements']
   },
@@ -83,6 +86,7 @@ export const ROOT_ITEMS = {
     route: 'drafts',
     icon: 'file-pen',
     label: 'nav.drafts',
+    badgeStyle: 'neutral',
     badgeGetter: 'draftCount'
   }
 }
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 4ea54ee3..990209c1 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -35,6 +35,7 @@
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
         class="badge -notification"
+        :class="[`badge-${item.badgeStyle}`]"
       >
         {{ getters[item.badgeGetter] }}
       </div>
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index decd1c04..ce9f18e7 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -20,6 +20,7 @@
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
         class="badge -dot -notification"
+        :class="[`alert-dot-${item.badgeStyle}`]"
       />
     </router-link>
   </span>
@@ -34,6 +35,16 @@
   overflow: hidden;
   height: 100%;
 
+  &.alert-dot-notification {
+    background-color: $fallback--cRed;
+    background-color: var(--badgeNotification, $fallback--cRed);
+  }
+
+  &.alert-dot-neutral {
+    background-color: $fallback--cGreen;
+    background-color: var(--badgeNeutral, $fallback--cGreen);
+  }
+
   .pinned-item {
     position: relative;
     flex: 1 0 3em;
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 1c9830d1..f6382520 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -255,7 +255,7 @@
             /> {{ $t('nav.drafts') }}
             <span
               v-if="draftCount"
-              class="badge badge-notification"
+              class="badge badge-neutral"
             >
               {{ draftCount }}
             </span>

From fb8747729850a683995efc0c9823455b13e37e66 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Thu, 6 Apr 2023 14:15:57 -0400
Subject: [PATCH 20/34] Allow confirmation on closing reply form

---
 src/components/draft_closer/draft_closer.js   | 48 +++++++++++++++++++
 src/components/draft_closer/draft_closer.vue  | 43 +++++++++++++++++
 .../post_status_form/post_status_form.js      | 45 +++++++++++++----
 .../post_status_form/post_status_form.vue     |  5 ++
 .../settings_modal/tabs/general_tab.js        |  5 ++
 .../settings_modal/tabs/general_tab.vue       |  9 ++++
 src/components/status/status.js               |  7 +++
 src/components/status/status.vue              |  4 +-
 src/i18n/en.json                              | 11 ++++-
 src/modules/config.js                         |  6 ++-
 src/modules/instance.js                       |  1 +
 11 files changed, 170 insertions(+), 14 deletions(-)
 create mode 100644 src/components/draft_closer/draft_closer.js
 create mode 100644 src/components/draft_closer/draft_closer.vue

diff --git a/src/components/draft_closer/draft_closer.js b/src/components/draft_closer/draft_closer.js
new file mode 100644
index 00000000..e5f827d7
--- /dev/null
+++ b/src/components/draft_closer/draft_closer.js
@@ -0,0 +1,48 @@
+import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
+
+const DraftCloser = {
+  data () {
+    return {
+      showing: false
+    }
+  },
+  components: {
+    DialogModal
+  },
+  emits: [
+    'save',
+    'discard'
+  ],
+  computed: {
+    action () {
+      return this.$store.getters.mergedConfig.unsavedPostAction
+    },
+    shouldConfirm () {
+      return this.action === 'confirm'
+    }
+  },
+  methods: {
+    requestClose () {
+      if (this.shouldConfirm) {
+        this.showing = true
+      } else if (this.action === 'save') {
+        this.save()
+      } else {
+        this.discard()
+      }
+    },
+    save () {
+      this.$emit('save')
+      this.showing = false
+    },
+    discard () {
+      this.$emit('discard')
+      this.showing = false
+    },
+    cancel () {
+      this.showing = false
+    }
+  }
+}
+
+export default DraftCloser
diff --git a/src/components/draft_closer/draft_closer.vue b/src/components/draft_closer/draft_closer.vue
new file mode 100644
index 00000000..e5ab9e7f
--- /dev/null
+++ b/src/components/draft_closer/draft_closer.vue
@@ -0,0 +1,43 @@
+<template>
+  <teleport to="#modal">
+    <dialog-modal
+      v-if="showing"
+      v-body-scroll-lock="true"
+      class="confirm-modal"
+      :on-cancel="cancel"
+      >
+      <template #header>
+        <span>
+          {{ $t('post_status.close_confirm_title') }}
+        </span>
+      </template>
+
+      {{ $t('post_status.close_confirm') }}
+
+      <template #footer>
+        <button
+          class="btn button-default"
+          @click.prevent="save"
+        >
+          {{ $t('post_status.close_confirm_save_button') }}
+        </button>
+
+        <button
+          class="btn button-default"
+          @click.prevent="discard"
+        >
+          {{ $t('post_status.close_confirm_discard_button') }}
+        </button>
+
+        <button
+          class="btn button-default"
+          @click.prevent="cancel"
+        >
+          {{ $t('post_status.close_confirm_continue_composing_button') }}
+        </button>
+      </template>
+    </dialog-modal>
+  </teleport>
+</template>
+
+<script src="./draft_closer.js"></script>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index bcf5440f..d8ef252f 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -16,6 +16,7 @@ import suggestor from '../emoji_input/suggestor.js'
 import { mapGetters, mapState } from 'vuex'
 import Checkbox from '../checkbox/checkbox.vue'
 import Select from '../select/select.vue'
+import DraftCloser from 'src/components/draft_closer/draft_closer.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -108,7 +109,8 @@ const PostStatusForm = {
     'posted',
     'resize',
     'mediaplay',
-    'mediapause'
+    'mediapause',
+    'can-close'
   ],
   components: {
     MediaUpload,
@@ -119,7 +121,8 @@ const PostStatusForm = {
     Select,
     Attachment,
     StatusContent,
-    Gallery
+    Gallery,
+    DraftCloser
   },
   mounted () {
     this.updateIdempotencyKey()
@@ -205,7 +208,8 @@ const PostStatusForm = {
       previewLoading: false,
       emojiInputShown: false,
       idempotencyKey: '',
-      saveInhibited: true
+      saveInhibited: true,
+      savable: false
     }
   },
   computed: {
@@ -320,9 +324,9 @@ const PostStatusForm = {
 
       return false
     },
-    debouncedSaveDraft () {
-      return debounce(this.saveDraft, 3000)
-    },
+    // debouncedSaveDraft () {
+    //   return debounce(this.saveDraft, 3000)
+    // },
     pollFormVisible () {
       return this.newStatus.hasPoll
     },
@@ -340,13 +344,14 @@ const PostStatusForm = {
     }
   },
   beforeUnmount () {
-    this.saveDraft()
+    // this.saveDraft()
   },
   methods: {
     statusChanged () {
       this.autoPreview()
       this.updateIdempotencyKey()
-      this.debouncedSaveDraft()
+      // this.debouncedSaveDraft()
+      this.savable = true
       this.saveInhibited = false
     },
     clearStatus () {
@@ -375,6 +380,7 @@ const PostStatusForm = {
       el.style.height = undefined
       this.error = null
       if (this.preview) this.previewStatus()
+      this.savable = false
     },
     async postStatus (event, newStatus, opts = {}) {
       if (this.posting && !this.optimisticPosting) { return }
@@ -712,16 +718,18 @@ const PostStatusForm = {
            this.newStatus.files?.length ||
            this.newStatus.hasPoll
           )) {
-        this.$store.dispatch('addOrSaveDraft', { draft: this.newStatus })
+        return this.$store.dispatch('addOrSaveDraft', { draft: this.newStatus })
           .then(id => {
             if (this.newStatus.id !== id) {
               this.newStatus.id = id
+              this.savable = false
             }
           })
       }
+      return Promise.resolve()
     },
     abandonDraft () {
-      this.$store.dispatch('abandonDraft', { id: this.newStatus.id })
+      return this.$store.dispatch('abandonDraft', { id: this.newStatus.id })
     },
     getDraft (statusType, refId) {
       const maybeDraft = this.$store.state.drafts.drafts[this.draftId]
@@ -735,6 +743,23 @@ const PostStatusForm = {
         }
       }
       // No draft available, fall back
+    },
+    requestClose () {
+      if (!this.savable) {
+        this.$emit('can-close')
+      } else {
+        this.$refs.draftCloser.requestClose()
+      }
+    },
+    saveAndCloseDraft () {
+      this.saveDraft().then(() => {
+        this.$emit('can-close')
+      })
+    },
+    discardAndCloseDraft () {
+      this.abandonDraft().then(() => {
+        this.$emit('can-close')
+      })
     }
   }
 }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index a1b69c62..934b803b 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -369,6 +369,11 @@
         </Checkbox>
       </div>
     </form>
+    <DraftCloser
+      ref="draftCloser"
+      @save="saveAndCloseDraft"
+      @discard="discardAndCloseDraft"
+    />
   </div>
 </template>
 
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index e9e8fa72..6266b949 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -45,6 +45,11 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.user_popover_avatar_action_${mode}`)
       })),
+      unsavedPostActionOptions: ['save', 'discard', 'confirm'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.unsaved_post_action_${mode}`)
+      })),
       loopSilentAvailable:
       // Firefox
       Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 4ece6cf4..52bedab2 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -453,6 +453,15 @@
             {{ $t('settings.autocomplete_select_first') }}
           </BooleanSetting>
         </li>
+        <li>
+          <ChoiceSetting
+            id="unsavedPostAction"
+            path="unsavedPostAction"
+            :options="unsavedPostActionOptions"
+          >
+            {{ $t('settings.unsaved_post_action') }}
+          </ChoiceSetting>
+        </li>
       </ul>
     </div>
   </div>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index bf4e4275..1a710162 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -473,6 +473,13 @@ const Status = {
     },
     toggleReplying () {
       this.$emit('interacted')
+      if (this.replying) {
+        this.$refs.postStatusForm.requestClose()
+      } else {
+        this.doToggleReplying()
+      }
+    },
+    doToggleReplying () {
       controlledOrUncontrolledToggle(this, 'replying')
     },
     gotoOriginal (id) {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 61a58cda..2666444d 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -598,13 +598,15 @@
         class="status-container reply-form"
       >
         <PostStatusForm
+          ref="postStatusForm"
           class="reply-body"
           :reply-to="status.id"
           :attentions="status.attentions"
           :replied-user="status.user"
           :copy-message-scope="status.visibility"
           :subject="replySubject"
-          @posted="toggleReplying"
+          @posted="doToggleReplying"
+          @can-close="doToggleReplying"
         />
       </div>
     </template>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f5d6174f..261e7f12 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -308,7 +308,12 @@
       "private": "Followers-only - post to followers only",
       "public": "Public - post to public timelines",
       "unlisted": "Unlisted - do not post to public timelines"
-    }
+    },
+    "close_confirm_title": "Closing post form",
+    "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"
   },
   "registration": {
     "bio_optional": "Bio (optional)",
@@ -505,6 +510,10 @@
     "avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
     "pad_emoji": "Pad emoji with spaces when adding from picker",
     "autocomplete_select_first": "Automatically select the first candidate when autocomplete results are available",
+    "unsaved_post_action": "When you try to close an unsaved posting form",
+    "unsaved_post_action_save": "Save it to drafts",
+    "unsaved_post_action_discard": "Discard it",
+    "unsaved_post_action_confirm": "Ask every time",
     "emoji_reactions_on_timeline": "Show emoji reactions on timeline",
     "emoji_reactions_scale": "Reactions scale factor",
     "export_theme": "Save preset",
diff --git a/src/modules/config.js b/src/modules/config.js
index cf84234a..8a388df3 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -30,7 +30,8 @@ export const multiChoiceProperties = [
   'conversationDisplay', // tree | linear
   'conversationOtherRepliesButton', // below | inside
   'mentionLinkDisplay', // short | full_for_remote | full
-  'userPopoverAvatarAction' // close | zoom | open
+  'userPopoverAvatarAction', // close | zoom | open
+  'unsavedPostAction' // save | discard | confirm
 ]
 
 export const defaultState = {
@@ -180,7 +181,8 @@ export const defaultState = {
   autocompleteSelect: undefined, // instance default
   closingDrawerMarksAsSeen: undefined, // instance default
   unseenAtTop: undefined, // instance default
-  ignoreInactionableSeen: undefined // instance default
+  ignoreInactionableSeen: undefined, // instance default
+  unsavedPostAction: undefined // instance default
 }
 
 // caching the instance default properties
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 99b8b5d5..70271976 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -119,6 +119,7 @@ const defaultState = {
   closingDrawerMarksAsSeen: true,
   unseenAtTop: false,
   ignoreInactionableSeen: false,
+  unsavedPostAction: 'confirm',
 
   // Nasty stuff
   customEmoji: [],

From 8a58de5c9fd7b275df2c79eafa8260a9e1fb706e Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Thu, 6 Apr 2023 14:25:19 -0400
Subject: [PATCH 21/34] Allow confirmation on closing edit form

---
 src/components/edit_status_form/edit_status_form.js    | 3 +++
 src/components/edit_status_form/edit_status_form.vue   | 1 +
 src/components/edit_status_modal/edit_status_modal.js  | 3 +++
 src/components/edit_status_modal/edit_status_modal.vue | 4 +++-
 4 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/edit_status_form/edit_status_form.js b/src/components/edit_status_form/edit_status_form.js
index 9a0bcc0e..32376337 100644
--- a/src/components/edit_status_form/edit_status_form.js
+++ b/src/components/edit_status_form/edit_status_form.js
@@ -12,6 +12,9 @@ const EditStatusForm = {
     }
   },
   methods: {
+    requestClose () {
+      this.$refs.postStatusForm.requestClose()
+    },
     doEditStatus ({ status, spoilerText, sensitive, media, contentType, poll }) {
       const params = {
         store: this.$store,
diff --git a/src/components/edit_status_form/edit_status_form.vue b/src/components/edit_status_form/edit_status_form.vue
index eee2d39a..0a7ec760 100644
--- a/src/components/edit_status_form/edit_status_form.vue
+++ b/src/components/edit_status_form/edit_status_form.vue
@@ -1,5 +1,6 @@
 <template>
   <PostStatusForm
+    ref="postStatusForm"
     v-bind="params"
     :post-handler="doEditStatus"
     :disable-polls="true"
diff --git a/src/components/edit_status_modal/edit_status_modal.js b/src/components/edit_status_modal/edit_status_modal.js
index 90964c95..0de2e53c 100644
--- a/src/components/edit_status_modal/edit_status_modal.js
+++ b/src/components/edit_status_modal/edit_status_modal.js
@@ -43,6 +43,9 @@ const EditStatusModal = {
   },
   methods: {
     closeModal () {
+      this.$refs.editStatusForm.requestClose()
+    },
+    doCloseModal () {
       this.$store.dispatch('closeEditStatusModal')
     }
   }
diff --git a/src/components/edit_status_modal/edit_status_modal.vue b/src/components/edit_status_modal/edit_status_modal.vue
index 96d05343..9acbaaee 100644
--- a/src/components/edit_status_modal/edit_status_modal.vue
+++ b/src/components/edit_status_modal/edit_status_modal.vue
@@ -9,9 +9,11 @@
         {{ $t('post_status.edit_status') }}
       </div>
       <EditStatusForm
+        ref="editStatusForm"
         class="panel-body"
         :params="params"
-        @posted="closeModal"
+        @posted="doCloseModal"
+        @can-close="doCloseModal"
       />
     </div>
   </Modal>

From 86f6fbeb46546e81954606c8e9eb6e6ca83bcd78 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Thu, 6 Apr 2023 15:08:35 -0400
Subject: [PATCH 22/34] Give the option to auto save drafts

---
 .../post_status_form/post_status_form.js      | 29 +++++++++++++++----
 .../post_status_form/post_status_form.vue     | 16 ++++++++++
 .../settings_modal/tabs/general_tab.vue       |  7 +++++
 src/i18n/en.json                              |  7 ++++-
 src/modules/config.js                         |  3 +-
 src/modules/instance.js                       |  1 +
 6 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index d8ef252f..2a20fe60 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -324,12 +324,24 @@ const PostStatusForm = {
 
       return false
     },
-    // 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
@@ -344,13 +356,13 @@ const PostStatusForm = {
     }
   },
   beforeUnmount () {
-    // this.saveDraft()
+    this.maybeAutoSaveDraft()
   },
   methods: {
     statusChanged () {
       this.autoPreview()
       this.updateIdempotencyKey()
-      // this.debouncedSaveDraft()
+      this.debouncedMaybeAutoSaveDraft()
       this.savable = true
       this.saveInhibited = false
     },
@@ -722,12 +734,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 })
     },
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 934b803b..f3561856 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -297,6 +297,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
@@ -612,5 +624,9 @@
     border-radius: var(--roundness);
     border: 2px dashed var(--text);
   }
+
+  .auto-save-status {
+    align-self: center;
+  }
 }
 </style>
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 52bedab2..0aba2d3f 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -453,6 +453,13 @@
             {{ $t('settings.autocomplete_select_first') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting
+            path="autoSaveDraft"
+          >
+            {{ $t('settings.auto_save_draft') }}
+          </BooleanSetting>
+        </li>
         <li>
           <ChoiceSetting
             id="unsavedPostAction"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 261e7f12..b9f0c21f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -313,7 +313,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)",
@@ -514,6 +518,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",
diff --git a/src/modules/config.js b/src/modules/config.js
index 8a388df3..87bed25d 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -182,7 +182,8 @@ export const defaultState = {
   closingDrawerMarksAsSeen: undefined, // instance default
   unseenAtTop: undefined, // instance default
   ignoreInactionableSeen: undefined, // instance default
-  unsavedPostAction: undefined // instance default
+  unsavedPostAction: undefined, // instance default
+  autoSaveDraft: undefined // instance default
 }
 
 // caching the instance default properties
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 70271976..89b471e9 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -120,6 +120,7 @@ const defaultState = {
   unseenAtTop: false,
   ignoreInactionableSeen: false,
   unsavedPostAction: 'confirm',
+  autoSaveDraft: false,
 
   // Nasty stuff
   customEmoji: [],

From 5bc4ea29044f0ccda07af4cb202a9fe672f6dbeb Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Thu, 6 Apr 2023 15:13:20 -0400
Subject: [PATCH 23/34] Do not popup dialog if autosave is on

---
 src/components/draft_closer/draft_closer.js        | 6 +++++-
 src/components/settings_modal/tabs/general_tab.vue | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/draft_closer/draft_closer.js b/src/components/draft_closer/draft_closer.js
index e5f827d7..e50ea05a 100644
--- a/src/components/draft_closer/draft_closer.js
+++ b/src/components/draft_closer/draft_closer.js
@@ -15,7 +15,11 @@ const DraftCloser = {
   ],
   computed: {
     action () {
-      return this.$store.getters.mergedConfig.unsavedPostAction
+      if (this.$store.getters.mergedConfig.autoSaveDraft) {
+        return 'save'
+      } else {
+        return this.$store.getters.mergedConfig.unsavedPostAction
+      }
     },
     shouldConfirm () {
       return this.action === 'confirm'
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 0aba2d3f..f7429c06 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -460,7 +460,7 @@
             {{ $t('settings.auto_save_draft') }}
           </BooleanSetting>
         </li>
-        <li>
+        <li v-if="!autoSaveDraft">
           <ChoiceSetting
             id="unsavedPostAction"
             path="unsavedPostAction"

From 18d8bb2c04a7f31ec96a4f3b804859552c638e1e Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Tue, 2 May 2023 08:06:55 -0400
Subject: [PATCH 24/34] Fix adding poll options not working

---
 src/components/poll/poll_form.js              | 24 ++++++++++---------
 .../post_status_form/post_status_form.vue     |  2 +-
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
index 032b3695..29ccbc4b 100644
--- a/src/components/poll/poll_form.js
+++ b/src/components/poll/poll_form.js
@@ -19,28 +19,30 @@ export default {
   name: 'PollForm',
   props: {
     visible: {},
-    modelValue: {
+    params: {
       type: Object,
       required: true
     }
   },
-  emits: ['update:modelValue'],
   computed: {
     pollType: {
-      get () { return pollFallback(this.modelValue, 'pollType') },
-      set (newVal) { this.modelValue.pollType = newVal }
+      get () { return pollFallback(this.params, 'pollType') },
+      set (newVal) { this.params.pollType = newVal }
     },
-    options: {
-      get () { return pollFallback(this.modelValue, 'options') },
-      set (newVal) { this.modelValue.options = newVal }
+    options () {
+      const hasOptions = !!this.params.options
+      if (!hasOptions) {
+        this.params.options = pollFallback(this.params, 'options')
+      }
+      return this.params.options
     },
     expiryAmount: {
-      get () { return pollFallback(this.modelValue, 'expiryAmount') },
-      set (newVal) { this.modelValue.expiryAmount = newVal }
+      get () { return pollFallback(this.params, 'expiryAmount') },
+      set (newVal) { this.params.expiryAmount = newVal }
     },
     expiryUnit: {
-      get () { return pollFallback(this.modelValue, 'expiryUnit') },
-      set (newVal) { this.modelValue.expiryUnit = newVal }
+      get () { return pollFallback(this.params, 'expiryUnit') },
+      set (newVal) { this.params.expiryUnit = newVal }
     },
     pollLimits () {
       return this.$store.state.instance.pollLimits
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index f3561856..6f794c4f 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -263,7 +263,7 @@
         v-if="pollsAvailable"
         ref="pollForm"
         :visible="pollFormVisible"
-        v-model="newStatus.poll"
+        :params="newStatus.poll"
       />
       <div
         ref="bottom"

From 55598d1cadcb1b5ab5c76f2df3a2962c786e1356 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Tue, 2 May 2023 08:08:33 -0400
Subject: [PATCH 25/34] Fix save draft button

---
 src/components/post_status_form/post_status_form.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 6f794c4f..82daee72 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -306,6 +306,7 @@
         <button
           v-else
           class="btn button-default"
+          @click="saveDraft"
         >
           {{ $t('post_status.save_to_drafts_button') }}
         </button>

From f41f7c77d94ec0342554fcc329130765cf14bbe9 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Wed, 27 Mar 2024 18:59:32 -0400
Subject: [PATCH 26/34] Make drafts work with Themes 3

---
 src/App.scss                                   |  5 ++---
 src/components/draft/draft.vue                 | 12 ++++--------
 src/components/draft_closer/draft_closer.vue   |  2 +-
 src/components/navigation/navigation_entry.vue |  4 ++--
 src/components/navigation/navigation_pins.vue  | 10 ++++------
 src/components/side_drawer/side_drawer.vue     |  2 +-
 6 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index c38c2e53..67e40540 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -749,9 +749,8 @@ option {
     margin-top: -1em;
   }
 
-  &.badge-neutral {
-    background-color: $fallback--cGreen;
-    background-color: var(--badgeNeutral, $fallback--cGreen);
+  &.-neutral {
+    background-color: var(--badgeNeutral);
     color: white;
     color: var(--badgeNeutralText, white);
   }
diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
index daa890d8..d9d35612 100644
--- a/src/components/draft/draft.vue
+++ b/src/components/draft/draft.vue
@@ -72,18 +72,14 @@
 <script src="./draft.js"></script>
 
 <style lang="scss">
-@import "src/variables";
-
 .Draft {
   margin: 1em;
 
   .status-content {
-    border: 1px solid $fallback--faint;
-    border-color: var(--faint, $fallback--faint);
-    border-radius: $fallback--inputRadius;
-    border-radius: var(--inputRadius, $fallback--inputRadius);
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    border: 1px solid;
+    border-color: var(--faint);
+    border-radius: var(--inputRadius);
+    color: var(--text);
     padding: 0.5em;
     margin: 0.5em 0;
   }
diff --git a/src/components/draft_closer/draft_closer.vue b/src/components/draft_closer/draft_closer.vue
index e5ab9e7f..1afb1f44 100644
--- a/src/components/draft_closer/draft_closer.vue
+++ b/src/components/draft_closer/draft_closer.vue
@@ -5,7 +5,7 @@
       v-body-scroll-lock="true"
       class="confirm-modal"
       :on-cancel="cancel"
-      >
+    >
       <template #header>
         <span>
           {{ $t('post_status.close_confirm_title') }}
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 990209c1..9b04bdbb 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -34,8 +34,8 @@
       <slot />
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge -notification"
-        :class="[`badge-${item.badgeStyle}`]"
+        class="badge"
+        :class="[`-${item.badgeStyle}`]"
       >
         {{ getters[item.badgeGetter] }}
       </div>
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index ce9f18e7..37351b91 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -19,8 +19,8 @@
       >{{ item.iconLetter }}</span>
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge -dot -notification"
-        :class="[`alert-dot-${item.badgeStyle}`]"
+        class="badge -dot"
+        :class="[`-${item.badgeStyle}`]"
       />
     </router-link>
   </span>
@@ -36,13 +36,11 @@
   height: 100%;
 
   &.alert-dot-notification {
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
+    background-color: var(--badgeNotification);
   }
 
   &.alert-dot-neutral {
-    background-color: $fallback--cGreen;
-    background-color: var(--badgeNeutral, $fallback--cGreen);
+    background-color: var(--badgeNeutral);
   }
 
   .pinned-item {
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index f6382520..311e377a 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -255,7 +255,7 @@
             /> {{ $t('nav.drafts') }}
             <span
               v-if="draftCount"
-              class="badge badge-neutral"
+              class="badge -neutral"
             >
               {{ draftCount }}
             </span>

From 91500ee4b0ae4e2ce33b534338536079c83516f4 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Thu, 22 Aug 2024 20:13:56 -0400
Subject: [PATCH 27/34] Disable drafts for chats

---
 src/components/chat/chat.vue                         | 1 +
 src/components/post_status_form/post_status_form.js  | 6 ++++--
 src/components/post_status_form/post_status_form.vue | 4 ++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 6efe576b..57158aba 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -76,6 +76,7 @@
             :disable-sensitivity-checkbox="true"
             :disable-submit="errorLoadingChat || !currentChat"
             :disable-preview="true"
+            :disable-draft="true"
             :optimistic-posting="true"
             :post-handler="sendMessage"
             :submit-on-enter="!mobileLayout"
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 2a20fe60..a8c36df4 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -93,6 +93,7 @@ const PostStatusForm = {
     'disableSensitivityCheckbox',
     'disableSubmit',
     'disablePreview',
+    'disableDraft',
     'placeholder',
     'maxHeight',
     'postHandler',
@@ -146,7 +147,7 @@ const PostStatusForm = {
     const [statusType, refId] = typeAndRefId({ replyTo: this.replyTo, profileMention: this.profileMention, statusId: this.statusId })
 
     // If we are starting a new post, do not associate it with old drafts
-    let statusParams = (this.draftId || statusType !== 'new') ? this.getDraft(statusType, refId) : null
+    let statusParams = !this.disableDraft && (this.draftId || statusType !== 'new') ? this.getDraft(statusType, refId) : null
 
     if (!statusParams) {
       if (statusType === 'reply' || statusType === 'mention') {
@@ -725,7 +726,8 @@ const PostStatusForm = {
       return propsToNative(props)
     },
     saveDraft () {
-      if (!this.saveInhibited &&
+      if (!this.disableDraft &&
+          !this.saveInhibited &&
           (this.newStatus.status ||
            this.newStatus.files?.length ||
            this.newStatus.hasPoll
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 82daee72..8af9925d 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -298,13 +298,13 @@
           </button>
         </div>
         <span
-          v-if="shouldAutoSaveDraft"
+          v-if="!disableDraft && shouldAutoSaveDraft"
           class="auto-save-status"
         >
           {{ autoSaveState }}
         </span>
         <button
-          v-else
+          v-else-if="!disableDraft"
           class="btn button-default"
           @click="saveDraft"
         >

From 40c7236653cc7cc2bee53cade9f688805c056ab8 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Thu, 22 Aug 2024 20:18:07 -0400
Subject: [PATCH 28/34] Add changelog for drafts

---
 changelog.d/drafts.add | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/drafts.add

diff --git a/changelog.d/drafts.add b/changelog.d/drafts.add
new file mode 100644
index 00000000..1147016e
--- /dev/null
+++ b/changelog.d/drafts.add
@@ -0,0 +1 @@
+Add draft management system

From 89346369e05cef4ba23637c162d8fe2046b85eb4 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Thu, 22 Aug 2024 20:23:48 -0400
Subject: [PATCH 29/34] Clear draft if it is empty

---
 .../post_status_form/post_status_form.js      | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index a8c36df4..8eaa0594 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -727,18 +727,24 @@ const PostStatusForm = {
     },
     saveDraft () {
       if (!this.disableDraft &&
-          !this.saveInhibited &&
-          (this.newStatus.status ||
-           this.newStatus.files?.length ||
-           this.newStatus.hasPoll
-          )) {
-        return this.$store.dispatch('addOrSaveDraft', { draft: this.newStatus })
-          .then(id => {
-            if (this.newStatus.id !== id) {
-              this.newStatus.id = id
-            }
-            this.savable = false
-          })
+          !this.saveInhibited) {
+        if (this.newStatus.status ||
+            this.newStatus.files?.length ||
+            this.newStatus.hasPoll) {
+          return this.$store.dispatch('addOrSaveDraft', { draft: this.newStatus })
+            .then(id => {
+              if (this.newStatus.id !== id) {
+                this.newStatus.id = id
+              }
+              this.savable = false
+            })
+        } else if (this.newStatus.id) {
+          // There is a draft, but there is nothing in it, clear it
+          return this.abandonDraft()
+            .then(() => {
+              this.savable = false
+            })
+        }
       }
       return Promise.resolve()
     },

From 087a7c64343cff85498e263e4d349e2335b87b82 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 24 May 2024 21:25:04 -0400
Subject: [PATCH 30/34] Fix storage in service worker

---
 src/sw.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sw.js b/src/sw.js
index f028936d..4a36672c 100644
--- a/src/sw.js
+++ b/src/sw.js
@@ -25,7 +25,7 @@ function getWindowClients () {
 }
 
 const setSettings = async () => {
-  const vuexState = await localForage.getItem('vuex-lz')
+  const vuexState = await storage.getItem('vuex-lz')
   const locale = vuexState.config.interfaceLanguage || 'en'
   i18n.locale = locale
   const notificationsNativeArray = Object.entries(vuexState.config.notificationNative)

From edf5e36bf877a49daefbb742fea93cafaadc1031 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Thu, 22 Aug 2024 20:32:45 -0400
Subject: [PATCH 31/34] Fix profile mention in drafts

---
 src/components/post_status_form/post_status_form.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 8eaa0594..63452747 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -144,7 +144,7 @@ const PostStatusForm = {
 
     const { scopeCopy } = this.$store.getters.mergedConfig
 
-    const [statusType, refId] = typeAndRefId({ replyTo: this.replyTo, profileMention: this.profileMention, statusId: this.statusId })
+    const [statusType, refId] = typeAndRefId({ replyTo: this.replyTo, profileMention: this.profileMention && this.repliedUser?.id, statusId: this.statusId })
 
     // If we are starting a new post, do not associate it with old drafts
     let statusParams = !this.disableDraft && (this.draftId || statusType !== 'new') ? this.getDraft(statusType, refId) : null

From 71622e2932bc05ba53209f9d765752d547c78520 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Thu, 22 Aug 2024 21:06:19 -0400
Subject: [PATCH 32/34] Save draft on window's beforeunload event

---
 .../post_status_form/post_status_form.js      | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 63452747..1ae98549 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -354,10 +354,20 @@ const PostStatusForm = {
       handler () {
         this.statusChanged()
       }
+    },
+    savable (val) {
+      // https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#usage_notes
+      // MDN says we'd better add the beforeunload event listener only when needed, and remove it when it's no longer needed
+      if (val) {
+        this.addBeforeUnloadListener()
+      } else {
+        this.removeBeforeUnloadListener()
+      }
     }
   },
   beforeUnmount () {
     this.maybeAutoSaveDraft()
+    this.removeBeforeUnloadListener()
   },
   methods: {
     statusChanged () {
@@ -785,6 +795,17 @@ const PostStatusForm = {
       this.abandonDraft().then(() => {
         this.$emit('can-close')
       })
+    },
+    addBeforeUnloadListener () {
+      this._beforeUnloadListener ||= () => {
+        this.saveDraft()
+      }
+      window.addEventListener('beforeunload', this._beforeUnloadListener)
+    },
+    removeBeforeUnloadListener () {
+      if (this._beforeUnloadListener) {
+        window.removeEventListener('beforeunload', this._beforeUnloadListener)
+      }
     }
   }
 }

From e7cdf00d11d1c508a85477c1ad465b68a0e039ae Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 27 Dec 2024 01:56:51 +0200
Subject: [PATCH 33/34] lint

---
 .../settings_modal/tabs/style_tab/virtual_directives_tab.vue    | 2 +-
 src/main.js                                                     | 1 -
 src/modules/config.js                                           | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
index f151d3a8..158f0a70 100644
--- a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
@@ -72,9 +72,9 @@
         :compact="true"
       />
       <ColorInput
-        name="virtual-directive-color"
         v-if="selectedVirtualDirectiveValType === 'color'"
         v-model="draftVirtualDirective"
+        name="virtual-directive-color"
         :fallback="computeColor(draftVirtualDirective)"
         :label="$t('settings.style.themes3.editor.variables.virtual_color')"
         :hide-optional-checkbox="true"
diff --git a/src/main.js b/src/main.js
index 10e51980..6b634e74 100644
--- a/src/main.js
+++ b/src/main.js
@@ -140,7 +140,6 @@ const persistedStateOptions = {
     return await afterStoreSetup({ store, i18n })
   } catch (e) {
     splashError(i18n, e)
-
   }
 })()
 
diff --git a/src/modules/config.js b/src/modules/config.js
index 3ecef8b2..e1e39585 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -187,7 +187,7 @@ export const defaultState = {
   unseenAtTop: undefined, // instance default
   ignoreInactionableSeen: undefined, // instance default
   unsavedPostAction: undefined, // instance default
-  autoSaveDraft: undefined // instance default
+  autoSaveDraft: undefined, // instance default
   useAbsoluteTimeFormat: undefined, // instance default
   absoluteTimeFormatMinAge: undefined // instance default
 }

From aff95ded522651187e0b1c0c0146db96dac4968c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 27 Dec 2024 02:02:44 +0200
Subject: [PATCH 34/34] lint

---
 src/components/status/status.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index aecfe990..f3935c48 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -319,7 +319,7 @@
                       v-if="!isPreview"
                       :status-id="status.parent_visible && status.in_reply_to_status_id"
                       class="reply-to-popover"
-                      style="min-width: 0"
+                      style="min-width: 0;"
                       :class="{ '-strikethrough': !status.parent_visible }"
                     >
                       <button