From cc922029fb5e574830a185642f24747b9b9933f4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 30 Dec 2024 01:22:17 +0200
Subject: [PATCH 1/3] resize button to compensate for added width of dropdown

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

diff --git a/src/components/post_status_form/post_status_form.scss b/src/components/post_status_form/post_status_form.scss
index 99cc30fee..e1da8556e 100644
--- a/src/components/post_status_form/post_status_form.scss
+++ b/src/components/post_status_form/post_status_form.scss
@@ -12,7 +12,7 @@
     height: 2.5em;
 
     .post-button {
-      width: 10em;
+      width: 7.5em;
     }
 
     p {

From 8657c820bdc6347f804613b7506efe42dc2dc0a4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 30 Dec 2024 02:07:49 +0200
Subject: [PATCH 2/3] include attachments in draft

---
 src/components/draft/draft.js  | 18 +++++++++++++++++-
 src/components/draft/draft.vue | 34 +++++++++++++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
index cb07ec5c5..c32208021 100644
--- a/src/components/draft/draft.js
+++ b/src/components/draft/draft.js
@@ -2,13 +2,15 @@ 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'
+import Gallery from 'src/components/gallery/gallery.vue'
 
 const Draft = {
   components: {
     PostStatusForm,
     EditStatusForm,
     ConfirmModal,
-    StatusContent
+    StatusContent,
+    Gallery
   },
   props: {
     draft: {
@@ -17,6 +19,7 @@ const Draft = {
     }
   },
   data () {
+    console.log('DRAFT', this.draft)
     return {
       editing: false,
       showingConfirmDialog: false
@@ -40,6 +43,19 @@ const Draft = {
     },
     refStatus () {
       return this.draft.refId ? this.$store.state.statuses.allStatusesObject[this.draft.refId] : undefined
+    },
+    localCollapseSubjectDefault () {
+      return this.$store.getters.mergedConfig.collapseMessageWithSubject
+    },
+    nsfwClickthrough () {
+      console.log(this.draft)
+      if (!this.draft.nsfw) {
+        return false
+      }
+      if (this.draft.summary && this.localCollapseSubjectDefault) {
+        return false
+      }
+      return true
     }
   },
   methods: {
diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
index d462045ed..2e1937486 100644
--- a/src/components/draft/draft.vue
+++ b/src/components/draft/draft.vue
@@ -26,7 +26,20 @@
           :compact="true"
         />
       </div>
-      <p>{{ draft.status }}</p>
+      <div class="status-preview">
+        <p>{{ draft.status }}</p>
+        <gallery
+          v-if="draft.files?.length !== 0"
+          class="attachments media-body"
+          :compact="true"
+          :nsfw="nsfwClickthrough"
+          :attachments="draft.files"
+          :limit="1"
+          size="small"
+          @play="$emit('mediaplay', attachment.id)"
+          @pause="$emit('mediapause', attachment.id)"
+        />
+      </div>
     </div>
     <div v-if="editing">
       <PostStatusForm
@@ -73,11 +86,30 @@
 
 <style lang="scss">
 .Draft {
+  position: relative;
+
+  a {
+    color: var(--link);
+  }
+
   .status-content {
     padding: 0.5em;
     margin: 0.5em 0;
   }
 
+  .status-preview {
+    display: grid;
+    grid-template-columns: 1fr 10em;
+    grid-gap: 0.5em;
+    max-width: 100%;
+
+    p {
+      word-wrap: break-word;
+      white-space: normal;
+      overflow-x: hidden;
+    }
+  }
+
   .actions {
     display: flex;
     flex-direction: row;

From 68e8a24f1886c8f38857f19a6a978ad60fdde752 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 30 Dec 2024 03:10:11 +0200
Subject: [PATCH 3/3] a bit clearer draft editing flow, partially divorced
 menu-item from list-item

---
 src/App.scss                                  | 21 +++++++++-----
 src/components/draft/draft.js                 | 19 ++++++++++--
 src/components/draft/draft.vue                |  8 +++--
 src/components/drafts/drafts.vue              |  7 +++++
 .../post_status_form/post_status_form.js      | 19 ++++++------
 .../post_status_form/post_status_form.scss    | 29 ++++++++++++-------
 .../post_status_form/post_status_form.vue     |  2 +-
 src/i18n/en.json                              |  1 +
 8 files changed, 74 insertions(+), 32 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 2afc43908..dc784fdd0 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -390,6 +390,20 @@ nav {
   }
 }
 
+.menu-item {
+  line-height: var(--__line-height);
+  font-family: inherit;
+  font-weight: 400;
+  font-size: 100%;
+  cursor: pointer;
+
+  a,
+  button:not(.button-default) {
+    color: var(--text);
+    font-size: 100%;
+  }
+}
+
 .menu-item,
 .list-item {
   display: block;
@@ -397,10 +411,6 @@ nav {
   border: none;
   outline: none;
   text-align: initial;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: 400;
-  cursor: pointer;
   color: inherit;
   clear: both;
   position: relative;
@@ -410,7 +420,6 @@ nav {
   border-width: 0;
   border-top-width: 1px;
   width: 100%;
-  line-height: var(--__line-height);
   padding: var(--__vertical-gap) var(--__horizontal-gap);
   background: transparent;
 
@@ -450,10 +459,8 @@ nav {
     border: none;
     outline: none;
     display: inline;
-    font-size: 100%;
     font-family: inherit;
     line-height: unset;
-    color: var(--text);
   }
 
   &:first-child {
diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
index c32208021..e31d02964 100644
--- a/src/components/draft/draft.js
+++ b/src/components/draft/draft.js
@@ -3,6 +3,7 @@ import EditStatusForm from 'src/components/edit_status_form/edit_status_form.vue
 import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import StatusContent from 'src/components/status_content/status_content.vue'
 import Gallery from 'src/components/gallery/gallery.vue'
+import { cloneDeep } from 'lodash'
 
 const Draft = {
   components: {
@@ -19,8 +20,8 @@ const Draft = {
     }
   },
   data () {
-    console.log('DRAFT', this.draft)
     return {
+      referenceDraft: cloneDeep(this.draft),
       editing: false,
       showingConfirmDialog: false
     }
@@ -35,6 +36,11 @@ const Draft = {
         return {}
       }
     },
+    safeToSave () {
+      return this.draft.status ||
+        this.draft.files?.length ||
+        this.draft.hasPoll
+    },
     postStatusFormProps () {
       return {
         draftId: this.draft.id,
@@ -48,7 +54,6 @@ const Draft = {
       return this.$store.getters.mergedConfig.collapseMessageWithSubject
     },
     nsfwClickthrough () {
-      console.log(this.draft)
       if (!this.draft.nsfw) {
         return false
       }
@@ -58,6 +63,16 @@ const Draft = {
       return true
     }
   },
+  watch: {
+    editing (newVal) {
+      if (newVal) return
+      if (this.safeToSave) {
+        this.$store.dispatch('addOrSaveDraft', { draft: this.draft })
+      } else {
+        this.$store.dispatch('addOrSaveDraft', { draft: this.referenceDraft })
+      }
+    }
+  },
   methods: {
     toggleEditing () {
       this.editing = !this.editing
diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
index 2e1937486..6ccf8695d 100644
--- a/src/components/draft/draft.vue
+++ b/src/components/draft/draft.vue
@@ -44,10 +44,12 @@
     <div v-if="editing">
       <PostStatusForm
         v-if="draft.type !== 'edit'"
+        :disable-draft="true"
         v-bind="postStatusFormProps"
       />
       <EditStatusForm
         v-else
+        :disable-draft="true"
         :params="postStatusFormProps"
       />
     </div>
@@ -66,11 +68,10 @@
     <div class="actions">
       <button
         class="btn button-default"
-        :class="{ toggled: editing }"
         :aria-expanded="editing"
         @click.prevent.stop="toggleEditing"
       >
-        {{ $t('drafts.continue') }}
+        {{ editing ? $t('drafts.save') : $t('drafts.continue') }}
       </button>
       <button
         class="btn button-default"
@@ -87,6 +88,8 @@
 <style lang="scss">
 .Draft {
   position: relative;
+  line-height: 1.1;
+  font-size: initial;
 
   a {
     color: var(--link);
@@ -119,7 +122,6 @@
       flex: 1;
       margin-left: 1em;
       margin-right: 1em;
-      max-width: 10em;
     }
   }
 }
diff --git a/src/components/drafts/drafts.vue b/src/components/drafts/drafts.vue
index 18d83d704..796993524 100644
--- a/src/components/drafts/drafts.vue
+++ b/src/components/drafts/drafts.vue
@@ -16,6 +16,7 @@
         >
           <template #item="{ item: draft }">
             <Draft
+              class="draft"
               :draft="draft"
             />
           </template>
@@ -26,3 +27,9 @@
 </template>
 
 <script src="./drafts.js"></script>
+
+<style lang="scss">
+.draft {
+  margin: 1em 0;
+}
+</style>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 5779bcb39..352dad6fc 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -118,7 +118,8 @@ const PostStatusForm = {
     'resize',
     'mediaplay',
     'mediapause',
-    'can-close'
+    'can-close',
+    'update'
   ],
   components: {
     MediaUpload,
@@ -218,7 +219,7 @@ const PostStatusForm = {
       emojiInputShown: false,
       idempotencyKey: '',
       saveInhibited: true,
-      savable: false
+      saveable: false
     }
   },
   computed: {
@@ -343,7 +344,7 @@ const PostStatusForm = {
       return this.$store.getters.mergedConfig.autoSaveDraft
     },
     autoSaveState () {
-      if (this.savable) {
+      if (this.saveable) {
         return this.$t('post_status.auto_save_saving')
       } else if (this.newStatus.id) {
         return this.$t('post_status.auto_save_saved')
@@ -363,7 +364,7 @@ const PostStatusForm = {
         this.statusChanged()
       }
     },
-    savable (val) {
+    saveable (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) {
@@ -382,7 +383,7 @@ const PostStatusForm = {
       this.autoPreview()
       this.updateIdempotencyKey()
       this.debouncedMaybeAutoSaveDraft()
-      this.savable = true
+      this.saveable = true
       this.saveInhibited = false
     },
     clearStatus () {
@@ -411,7 +412,7 @@ const PostStatusForm = {
       el.style.height = undefined
       this.error = null
       if (this.preview) this.previewStatus()
-      this.savable = false
+      this.saveable = false
     },
     async postStatus (event, newStatus, opts = {}) {
       if (this.posting && !this.optimisticPosting) { return }
@@ -754,13 +755,13 @@ const PostStatusForm = {
               if (this.newStatus.id !== id) {
                 this.newStatus.id = id
               }
-              this.savable = false
+              this.saveable = 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
+              this.saveable = false
             })
         }
       }
@@ -788,7 +789,7 @@ const PostStatusForm = {
       // No draft available, fall back
     },
     requestClose () {
-      if (!this.savable) {
+      if (!this.saveable) {
         this.$emit('can-close')
       } else {
         this.$refs.draftCloser.requestClose()
diff --git a/src/components/post_status_form/post_status_form.scss b/src/components/post_status_form/post_status_form.scss
index e1da8556e..9e8de25d5 100644
--- a/src/components/post_status_form/post_status_form.scss
+++ b/src/components/post_status_form/post_status_form.scss
@@ -5,14 +5,31 @@
     margin-bottom: 0.5em;
   }
 
+  .more-post-actions {
+    height: 100%;
+
+    .btn {
+      height: 100%;
+    }
+  }
+
   .form-bottom {
     display: flex;
     justify-content: space-between;
     padding: 0.5em;
     height: 2.5em;
 
-    .post-button {
-      width: 7.5em;
+    .post-button-group {
+      width: 10em;
+      display: flex;
+
+      .post-button {
+        flex: 1 0 auto;
+      }
+
+      .more-post-actions {
+        flex: 0 0 auto;
+      }
     }
 
     p {
@@ -22,14 +39,6 @@
     }
   }
 
-  .more-post-actions {
-    height: 100%;
-
-    .btn {
-      height: 100%;
-    }
-  }
-
   .form-bottom-left {
     display: flex;
     flex: 1;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index dd26b3e47..5fdc6f8de 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -302,7 +302,7 @@
             <FAIcon icon="poll-h" />
           </button>
         </div>
-        <div class="btn-group">
+        <div class="btn-group post-button-group">
           <button
             class="btn button-default post-button"
             :disabled="isOverLengthLimit || posting || uploadingFiles || disableSubmit"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a1bf32ef4..c10b62a5f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1515,6 +1515,7 @@
     "drafts": "Drafts",
     "no_drafts": "You have no drafts",
     "continue": "Continue composing",
+    "save": "Save without posting",
     "abandon": "Abandon draft",
     "abandon_confirm_title": "Abandon confirmation",
     "abandon_confirm": "Do you really want to abandon this draft?",