2 files changed, 94 insertions, 23 deletions
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index c45f8947..0594576c 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 StatusOrConversation from '../status_or_conversation/status_or_conversation.vue'
-import { throttle } from 'lodash'
+import Conversation from '../conversation/conversation.vue'
+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,9 @@ const Timeline = {
     'userId',
     'tag',
     'embedded',
-    'count'
+    'count',
+    'pinnedStatusIds',
+    'inProfile'
   ],
   data () {
     return {
@@ -39,11 +54,20 @@ 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)
+    },
+    pinnedStatusIdsObject () {
+      return keyBy(this.pinnedStatusIds)
     }
   },
   components: {
     Status,
-    StatusOrConversation
+    Conversation
   },
   created () {
     const store = this.$store
@@ -52,7 +76,7 @@ const Timeline = {
 
     window.addEventListener('scroll', this.scrollLoad)
 
-    if (this.timelineName === 'friends' && !credentials) { return false }
+    if (store.state.api.fetchers[this.timelineName]) { return false }
 
     timelineFetcher.fetchAndUpdate({
       store,
@@ -78,13 +102,15 @@ const Timeline = {
   },
   methods: {
     handleShortKey (e) {
+      // Ignore when input fields are focused
+      if (['textarea', 'input'].includes(e.target.tagName.toLowerCase())) return
       if (e.key === '.') this.showNewStatuses()
     },
     showNewStatuses () {
       if (this.newStatusCount === 0) return
 
       if (this.timeline.flushMarker !== 0) {
-        this.$store.commit('clearTimeline', { timeline: this.timelineName })
+        this.$store.commit('clearTimeline', { timeline: this.timelineName, excludeUserId: true })
         this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
         this.fetchOlderStatuses()
       } else {
@@ -137,7 +163,7 @@ const Timeline = {
         if (top < 15 &&
             !this.paused &&
             !(this.unfocused && this.$store.state.config.pauseOnUnfocused)
-           ) {
+        ) {
           this.showNewStatuses()
         } else {
           this.paused = true
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 8f28d65c..f1d3903a 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -2,35 +2,80 @@
   <div :class="classes.root">
     <div :class="classes.header">
       <div class="title">
-        {{title}}
+        {{ title }}
       </div>
-      <div @click.prevent class="loadmore-error alert error" v-if="timelineError">
-        {{$t('timeline.error_fetching')}}
+      <div
+        v-if="timelineError"
+        class="loadmore-error alert error"
+        @click.prevent
+      >
+        {{ $t('timeline.error_fetching') }}
       </div>
-      <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
-        {{$t('timeline.show_new')}}{{newStatusCountStr}}
+      <button
+        v-if="timeline.newStatusCount > 0 && !timelineError"
+        class="loadmore-button"
+        @click.prevent="showNewStatuses"
+      >
+        {{ $t('timeline.show_new') }}{{ newStatusCountStr }}
       </button>
-      <div @click.prevent class="loadmore-text faint" v-if="!timeline.newStatusCount > 0 && !timelineError">
-        {{$t('timeline.up_to_date')}}
+      <div
+        v-if="!timeline.newStatusCount > 0 && !timelineError"
+        class="loadmore-text faint"
+        @click.prevent
+      >
+        {{ $t('timeline.up_to_date') }}
       </div>
     </div>
     <div :class="classes.body">
       <div class="timeline">
-        <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status" class="status-fadein"></status-or-conversation>
+        <template v-for="statusId in pinnedStatusIds">
+          <conversation
+            v-if="timeline.statusesObject[statusId]"
+            :key="statusId + '-pinned'"
+            class="status-fadein"
+            :status-id="statusId"
+            :collapsable="true"
+            :pinned-status-ids-object="pinnedStatusIdsObject"
+            :in-profile="inProfile"
+          />
+        </template>
+        <template v-for="status in timeline.visibleStatuses">
+          <conversation
+            v-if="!excludedStatusIdsObject[status.id]"
+            :key="status.id"
+            class="status-fadein"
+            :status-id="status.id"
+            :collapsable="true"
+            :in-profile="inProfile"
+          />
+        </template>
       </div>
     </div>
     <div :class="classes.footer">
-      <div v-if="count===0" class="new-status-notification text-center panel-footer faint">
-        {{$t('timeline.no_statuses')}}
+      <div
+        v-if="count===0"
+        class="new-status-notification text-center panel-footer faint"
+      >
+        {{ $t('timeline.no_statuses') }}
       </div>
-      <div v-else-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
-        {{$t('timeline.no_more_statuses')}}
+      <div
+        v-else-if="bottomedOut"
+        class="new-status-notification text-center panel-footer faint"
+      >
+        {{ $t('timeline.no_more_statuses') }}
       </div>
-      <a v-else-if="!timeline.loading" href="#" v-on:click.prevent='fetchOlderStatuses()'>
-        <div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div>
+      <a
+        v-else-if="!timeline.loading"
+        href="#"
+        @click.prevent="fetchOlderStatuses()"
+      >
+        <div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
       </a>
-      <div v-else class="new-status-notification text-center panel-footer">
-        <i class="icon-spin3 animate-spin"/>
+      <div
+        v-else
+        class="new-status-notification text-center panel-footer"
+      >
+        <i class="icon-spin3 animate-spin" />
       </div>
     </div>
   </div>