include attachments in draft

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: {

src/components/draft/draft.vue

@@ -26,7 +26,20 @@
           :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>
     </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;