src/App.scss

@@ -390,20 +390,6 @@ 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;
@@ -411,6 +397,10 @@ 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;
@@ -420,6 +410,7 @@ nav {
   border-width: 0;
   border-top-width: 1px;
   width: 100%;
+  line-height: var(--__line-height);
   padding: var(--__vertical-gap) var(--__horizontal-gap);
   background: transparent;
 
@@ -459,8 +450,10 @@ nav {
     border: none;
     outline: none;
     display: inline;
+    font-size: 100%;
     font-family: inherit;
     line-height: unset;
+    color: var(--text);
   }
 
   &:first-child {

src/components/draft/draft.js

@@ -2,16 +2,13 @@ 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'
-import { cloneDeep } from 'lodash'
 
 const Draft = {
   components: {
     PostStatusForm,
     EditStatusForm,
     ConfirmModal,
-    StatusContent,
-    Gallery
+    StatusContent
   },
   props: {
     draft: {
@@ -21,7 +18,6 @@ const Draft = {
   },
   data () {
     return {
-      referenceDraft: cloneDeep(this.draft),
       editing: false,
       showingConfirmDialog: false
     }
@@ -36,11 +32,6 @@ const Draft = {
         return {}
       }
     },
-    safeToSave () {
-      return this.draft.status ||
-        this.draft.files?.length ||
-        this.draft.hasPoll
-    },
     postStatusFormProps () {
       return {
         draftId: this.draft.id,
@@ -49,28 +40,6 @@ const Draft = {
     },
     refStatus () {
       return this.draft.refId ? this.$store.state.statuses.allStatusesObject[this.draft.refId] : undefined
-    },
-    localCollapseSubjectDefault () {
-      return this.$store.getters.mergedConfig.collapseMessageWithSubject
-    },
-    nsfwClickthrough () {
-      if (!this.draft.nsfw) {
-        return false
-      }
-      if (this.draft.summary && this.localCollapseSubjectDefault) {
-        return false
-      }
-      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: {

src/components/draft/draft.vue

@@ -26,30 +26,15 @@
           :compact="true"
         />
       </div>
-      <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>
+      <p>{{ draft.status }}</p>
     </div>
     <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>
@@ -68,10 +53,11 @@
     <div class="actions">
       <button
         class="btn button-default"
+        :class="{ toggled: editing }"
         :aria-expanded="editing"
         @click.prevent.stop="toggleEditing"
       >
-        {{ editing ? $t('drafts.save') : $t('drafts.continue') }}
+        {{ $t('drafts.continue') }}
       </button>
       <button
         class="btn button-default"
@@ -87,32 +73,11 @@
 
 <style lang="scss">
 .Draft {
-  position: relative;
-  line-height: 1.1;
-  font-size: initial;
-
-  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;
@@ -122,6 +87,7 @@
       flex: 1;
       margin-left: 1em;
       margin-right: 1em;
+      max-width: 10em;
     }
   }
 }

src/components/drafts/drafts.vue

@@ -16,7 +16,6 @@
         >
           <template #item="{ item: draft }">
             <Draft
-              class="draft"
               :draft="draft"
             />
           </template>
@@ -27,9 +26,3 @@
 </template>
 
 <script src="./drafts.js"></script>
-
-<style lang="scss">
-.draft {
-  margin: 1em 0;
-}
-</style>

src/components/post_status_form/post_status_form.js

@@ -118,8 +118,7 @@ const PostStatusForm = {
     'resize',
     'mediaplay',
     'mediapause',
-    'can-close',
-    'update'
+    'can-close'
   ],
   components: {
     MediaUpload,
@@ -219,7 +218,7 @@ const PostStatusForm = {
       emojiInputShown: false,
       idempotencyKey: '',
       saveInhibited: true,
-      saveable: false
+      savable: false
     }
   },
   computed: {
@@ -344,7 +343,7 @@ const PostStatusForm = {
       return this.$store.getters.mergedConfig.autoSaveDraft
     },
     autoSaveState () {
-      if (this.saveable) {
+      if (this.savable) {
         return this.$t('post_status.auto_save_saving')
       } else if (this.newStatus.id) {
         return this.$t('post_status.auto_save_saved')
@@ -364,7 +363,7 @@ const PostStatusForm = {
         this.statusChanged()
       }
     },
-    saveable (val) {
+    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) {
@@ -383,7 +382,7 @@ const PostStatusForm = {
       this.autoPreview()
       this.updateIdempotencyKey()
       this.debouncedMaybeAutoSaveDraft()
-      this.saveable = true
+      this.savable = true
       this.saveInhibited = false
     },
     clearStatus () {
@@ -412,7 +411,7 @@ const PostStatusForm = {
       el.style.height = undefined
       this.error = null
       if (this.preview) this.previewStatus()
-      this.saveable = false
+      this.savable = false
     },
     async postStatus (event, newStatus, opts = {}) {
       if (this.posting && !this.optimisticPosting) { return }
@@ -755,13 +754,13 @@ const PostStatusForm = {
               if (this.newStatus.id !== id) {
                 this.newStatus.id = id
               }
-              this.saveable = false
+              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.saveable = false
+              this.savable = false
             })
         }
       }
@@ -789,7 +788,7 @@ const PostStatusForm = {
       // No draft available, fall back
     },
     requestClose () {
-      if (!this.saveable) {
+      if (!this.savable) {
         this.$emit('can-close')
       } else {
         this.$refs.draftCloser.requestClose()

src/components/post_status_form/post_status_form.scss

@@ -5,31 +5,14 @@
     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-group {
+    .post-button {
       width: 10em;
-      display: flex;
-
-      .post-button {
-        flex: 1 0 auto;
-      }
-
-      .more-post-actions {
-        flex: 0 0 auto;
-      }
     }
 
     p {
@@ -39,6 +22,14 @@
     }
   }
 
+  .more-post-actions {
+    height: 100%;
+
+    .btn {
+      height: 100%;
+    }
+  }
+
   .form-bottom-left {
     display: flex;
     flex: 1;

src/components/post_status_form/post_status_form.vue

@@ -302,7 +302,7 @@
             <FAIcon icon="poll-h" />
           </button>
         </div>
-        <div class="btn-group post-button-group">
+        <div class="btn-group">
           <button
             class="btn button-default post-button"
             :disabled="isOverLengthLimit || posting || uploadingFiles || disableSubmit"

src/i18n/en.json

@@ -1515,7 +1515,6 @@
     "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?",