1 files changed, 30 insertions, 7 deletions

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index e806be8e..c57c7e06 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -1,4 +1,4 @@
-import { reduce, filter } from 'lodash'
+import { reduce, filter, findIndex } from 'lodash'
 import { set } from 'vue'
 import Status from '../status/status.vue'
 
@@ -27,12 +27,14 @@ const conversation = {
   data () {
     return {
       highlight: null,
+      expanded: false,
       converationStatusIds: []
     }
   },
   props: [
     'statusoid',
-    'collapsable'
+    'collapsable',
+    'isPage'
   ],
   computed: {
     status () {
@@ -59,11 +61,21 @@ const conversation = {
         return []
       }
 
+      if (!this.expanded && !this.isPage) {
+        return [this.status]
+      }
+
       const statusesObject = this.$store.state.statuses.allStatusesObject
       const conversation = this.idsToShow.reduce((acc, id) => {
         acc.push(statusesObject[id])
         return acc
       }, [])
+
+      const statusIndex = findIndex(conversation, { id: this.statusId })
+      if (statusIndex !== -1) {
+        conversation[statusIndex] = this.status
+      }
+
       return sortAndFilterConversation(conversation)
     },
     replies () {
@@ -82,16 +94,21 @@ const conversation = {
         i++
         return result
       }, {})
+    },
+    isExpanded () {
+      return this.expanded || this.isPage
     }
   },
   components: {
     Status
   },
-  created () {
-    this.fetchConversation()
-  },
   watch: {
-    '$route': 'fetchConversation'
+    '$route': 'fetchConversation',
+    expanded (value) {
+      if (value) {
+        this.fetchConversation()
+      }
+    }
   },
   methods: {
     fetchConversation () {
@@ -117,10 +134,16 @@ const conversation = {
       return this.replies[id] || []
     },
     focused (id) {
-      return id === this.statusId
+      return this.expanded && id === this.statusId
     },
     setHighlight (id) {
       this.highlight = id
+    },
+    getHighlight () {
+      return this.expanded ? this.highlight : null
+    },
+    toggleExpanded () {
+      this.expanded = !this.expanded
     }
   }
 }