New status showing.

src/components/friends_timeline/friends_timeline.vue

@@ -2,7 +2,7 @@
   <div class="timeline panel panel-default">
     <div class="panel-heading">Friends Timeline</div>
     <div class="panel-body">
-      <Timeline v-bind:timeline="timeline" />
+      <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>
     </div>
   </div>
 </template>

src/components/public_timeline/public_timeline.vue

@@ -2,7 +2,7 @@
   <div class="timeline panel panel-default">
     <div class="panel-heading">Public Timeline</div>
     <div class="panel-body">
-      <Timeline v-bind:timeline="timeline" />
+      <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
     </div>
   </div>
 </template>

src/components/timeline/timeline.js

@@ -2,10 +2,16 @@ import Status from '../status/status.vue'
 
 const Timeline = {
   props: [
-    'timeline'
+    'timeline',
+    'timelineName'
   ],
   components: {
     Status
+  },
+  methods: {
+    showNewStatuses () {
+      this.$store.commit('showNewStatuses', { timeline: this.timelineName })
+    }
   }
 }
 

src/components/timeline/timeline.vue

@@ -1,5 +1,12 @@
 <template>
   <div class="timeline">
+    <a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0">
+      <div class="new-status-notification">
+        <p class="text-center" >
+          {{timeline.newStatusCount}} new statuses
+        </p>
+      </div>
+    </a>
     <status v-for="status in timeline.visibleStatuses" v-bind:status="status"></status>
   </div>
 </template>

src/modules/statuses.js

@@ -1,4 +1,4 @@
-import { last, intersectionBy, sortBy, unionBy, toInteger, groupBy, differenceBy, each, find } from 'lodash'
+import { slice, last, intersectionBy, sortBy, unionBy, toInteger, groupBy, differenceBy, each, find } from 'lodash'
 // import moment from 'moment'
 
 const defaultState = {
@@ -93,6 +93,12 @@ const statuses = {
     addNewStatuses (state, { statuses, showImmediately = false, timeline }) {
       state.timelines[timeline] = addStatusesToTimeline(statuses, showImmediately, state.timelines[timeline])
       state.allStatuses = unionBy(state.timelines[timeline].statuses, state.allStatuses.id)
+    },
+    showNewStatuses (state, { timeline }) {
+      const oldTimeline = (state.timelines[timeline])
+
+      oldTimeline.newStatusCount = 0
+      oldTimeline.visibleStatuses = slice(oldTimeline.statuses, 0, 50)
     }
   }
 }