2 files changed, 41 insertions, 9 deletions
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 5e24bd15..aac3869f 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -1,7 +1,20 @@
 import Status from '../status/status.vue'
 import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
 import Conversation from '../conversation/conversation.vue'
-import { throttle } from 'lodash'
+import { throttle, keyBy } from 'lodash'
+
+export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => {
+  const ids = []
+  if (pinnedStatusIds && pinnedStatusIds.length > 0) {
+    for (let status of statuses) {
+      if (!pinnedStatusIds.includes(status.id)) {
+        break
+      }
+      ids.push(status.id)
+    }
+  }
+  return ids
+}
 
 const Timeline = {
   props: [
@@ -11,7 +24,8 @@ const Timeline = {
     'userId',
     'tag',
     'embedded',
-    'count'
+    'count',
+    'pinnedStatusIds'
   ],
   data () {
     return {
@@ -39,6 +53,12 @@ const Timeline = {
         body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
         footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
       }
+    },
+    // id map of statuses which need to be hidden in the main list due to pinning logic
+    excludedStatusIdsObject () {
+      const ids = getExcludedStatusIdsByPinning(this.timeline.visibleStatuses, this.pinnedStatusIds)
+      // Convert id array to object
+      return keyBy(ids, id => id)
     }
   },
   components: {
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 1fc52083..0cb4b3ef 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -28,13 +28,25 @@
     </div>
     <div :class="classes.body">
       <div class="timeline">
-        <conversation
-          v-for="status in timeline.visibleStatuses"
-          :key="status.id"
-          class="status-fadein"
-          :statusoid="status"
-          :collapsable="true"
-        />
+        <template v-for="statusId in pinnedStatusIds">
+          <conversation
+            v-if="timeline.statusesObject[statusId]"
+            :key="statusId + '-pinned'"
+            class="status-fadein"
+            :statusoid="timeline.statusesObject[statusId]"
+            :collapsable="true"
+            :show-pinned="true"
+          />
+        </template>
+        <template v-for="status in timeline.visibleStatuses">
+          <conversation
+            v-if="!excludedStatusIdsObject[status.id]"
+            :key="status.id"
+            class="status-fadein"
+            :statusoid="status"
+            :collapsable="true"
+          />
+        </template>
       </div>
     </div>
     <div :class="classes.footer">