Display information about replied-to/edited status

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

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;

src/i18n/en.json

@@ -1163,6 +1163,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}"
   }
 }