3 files changed, 39 insertions, 11 deletions
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 10f987a8..c8d5e212 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,14 +1,40 @@
-import { sortBy, take } from 'lodash'
+import { sortBy, take, filter } from 'lodash'
 
 const Notifications = {
   data () {
     return {
-      visibleNotificationCount: 20
+      visibleNotificationCount: 10
     }
   },
   computed: {
+    notifications () {
+      return this.$store.state.statuses.notifications
+    },
+    unseenNotifications () {
+      return filter(this.notifications, ({seen}) => !seen)
+    },
     visibleNotifications () {
-      return take(sortBy(this.$store.state.statuses.notifications, ({action}) => -action.id), this.visibleNotificationCount)
+      // Don't know why, but sortBy([seen, -action.id]) doesn't work.
+      let sortedNotifications = sortBy(this.notifications, ({action}) => -action.id)
+      sortedNotifications = sortBy(sortedNotifications, 'seen')
+      return take(sortedNotifications, this.visibleNotificationCount)
+    },
+    unseenCount () {
+      return this.unseenNotifications.length
+    }
+  },
+  watch: {
+    unseenCount (count) {
+      if (count > 0) {
+        this.$store.dispatch('setPageTitle', `(${count})`)
+      } else {
+        this.$store.dispatch('setPageTitle', '')
+      }
+    }
+  },
+  methods: {
+    markAsSeen () {
+      this.$store.commit('markNotificationsAsSeen', this.visibleNotifications)
     }
   }
 }
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 687a4f0f..517afeaa 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,13 +1,13 @@
 @import '../../_variables.scss';
 .notification {
-  padding: 0.5em;
-  padding-left: 1em;
+  padding: 0.4em 0 0 0.7em;
   display: flex;
   border-bottom: 1px solid silver;
 
   .text {
     min-width: 0px;
     word-wrap: break-word;
+    line-height:18px;
 
     .icon-retweet {
       color: $green;
@@ -18,21 +18,22 @@
     }
 
     h1 {
-      margin: 0;
+      margin: 0 0 0.3em;
       padding: 0;
       font-size: 1em;
+      line-height:20px;
     }
 
-    padding-left: 0.5em;
+    padding: 0.3em 0.8em 0.5em;
     p {
       margin: 0;
       margin-top: 0;
-      margin-bottom: 0.5em;
+      margin-bottom: 0.3em;
     }
   }
 
   .avatar {
-    padding-top: 3px;
+    padding-top: 0.3em;
     width: 32px;
     height: 32px;
     border-radius: 50%;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 0846c27b..785cc019 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="notifications">
     <div class="panel panel-default base00-background">
-      <div class="panel-heading base01-background base04">Notifications ({{visibleNotifications.length}})</div>
+      <div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen">Read!</button></div>
       <div class="panel-body">
-        <div v-for="notification in visibleNotifications" class="notification">
+        <div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
           <a :href="notification.action.user.statusnet_profile_url">
             <img class='avatar' :src="notification.action.user.profile_image_url_original">
           </a>
           <div class='text'>
+            <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
             <div v-if="notification.type === 'favorite'">
               <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
               <p>{{ notification.status.text }}</p>