Add list of replies under the name/links in conversation statuses, clicking them will highlight the statuses and scroll you to them, expanding a status will scroll you to that status once the conversation has opened.

src/components/conversation/conversation.js

@@ -10,7 +10,8 @@ const sortAndFilterConversation = (conversation) => {
 const conversation = {
   data () {
     return {
-      highlight: null
+      highlight: null,
+      statuses: []
     }
   },
   props: [
@@ -27,8 +28,8 @@ const conversation = {
       const conversationId = this.status.statusnet_conversation_id
       const statuses = this.$store.state.statuses.allStatuses
       const conversation = filter(statuses, { statusnet_conversation_id: conversationId })
-
-      return sortAndFilterConversation(conversation)
+      this.statuses = sortAndFilterConversation(conversation)
+      return this.statuses
     }
   },
   components: {
@@ -46,6 +47,7 @@ const conversation = {
         const conversationId = this.status.statusnet_conversation_id
         this.$store.state.api.backendInteractor.fetchConversation({id: conversationId})
           .then((statuses) => this.$store.dispatch('addNewStatuses', { statuses }))
+          .then(() => this.setHighlight(this.statusoid.id))
       } else {
         const id = this.$route.params.id
         this.$store.state.api.backendInteractor.fetchStatus({id})
@@ -53,7 +55,21 @@ const conversation = {
           .then(() => this.fetchConversation())
       }
     },
-    focused: function (id) {
+    getReplies (id) {
+      let res = []
+      id = Number(id)
+      let i
+      for (i = 0; i < this.statuses.length; i++) {
+        if (Number(this.statuses[i].in_reply_to_status_id) === id) {
+          res.push({
+            name: `#${i}`,
+            id: this.statuses[i].id
+          })
+        }
+      }
+      return res
+    },
+    focused (id) {
       if (this.statusoid.retweeted_status) {
         return (id === this.statusoid.retweeted_status.id)
       } else {

src/components/conversation/conversation.vue

@@ -8,7 +8,7 @@
     </div>
     <div class="panel-body">
       <div class="timeline">
-        <status v-for="status in conversation" @goto="setHighlight" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight"></status>
+        <status v-for="status in conversation" @goto="setHighlight" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight" :replies="getReplies(status.id)"></status>
       </div>
     </div>
   </div>

src/components/status/status.js

@@ -13,7 +13,8 @@ const Status = {
     'inConversation',
     'focused',
     'highlight',
-    'compact'
+    'compact',
+    'replies'
   ],
   data: () => ({
     replying: false,
@@ -87,12 +88,14 @@ const Status = {
     toggleReplying () {
       this.replying = !this.replying
     },
-    gotoOriginal () {
+    gotoOriginal (id) {
       // only handled by conversation, not status_or_conversation
-      this.$emit('goto', this.status.in_reply_to_status_id)
+      //this.$emit('goto', this.status.in_reply_to_status_id)
+      this.$emit('goto', id)
     },
     toggleExpanded () {
       this.$emit('toggleExpanded')
+      //console.log(this.replies)
     },
     toggleMute () {
       this.unmuted = !this.unmuted
@@ -108,9 +111,8 @@ const Status = {
         let rect = this.$el.getBoundingClientRect()
         if (rect.top < 100) {
           window.scrollBy(0, rect.top - 200)
-        } else if (rect.bottom > window.innerHeight - 100) {
-          // will be useful when scrolling down to replies or root posts is in
-          window.scrollBy(0, rect.bottom + 200)
+        } else if (rect.bottom > window.innerHeight - 50) {
+          window.scrollBy(0, rect.bottom - window.innerHeight + 50)
         }
       }
     }

src/components/status/status.vue

@@ -56,7 +56,7 @@
                   </small>
                   <template v-if="isReply && !expandable">
                     <small>
-                      <a href="#" @click.prevent="gotoOriginal" ><i class="icon-reply"></i></a>
+                      <a href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" ><i class="icon-reply"></i></a>
                     </small>
                   </template>
                   -
@@ -67,6 +67,12 @@
                   </small>
                   </h4>
                 </div>
+                <h4 class="replies" v-if="inConversation">
+                  <small v-if="replies.length">Replies:</small>
+                  <small v-for="reply in replies">
+                    <a href="#" @click.prevent="gotoOriginal(reply.id)">{{reply.name}}&nbsp;</a>
+                  </small>
+                </h4>
               </div>
               <div class="heading-icons">
                 <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="fa icon-eye-off"></i></a>
@@ -159,6 +165,9 @@
          display: flex;
          flex-wrap: wrap;
        }
+       .replies {
+         flex-basis: 80%;
+       }
      }
 
      .source_url {