Add basic notification support.

src/App.js

@@ -1,14 +1,16 @@
 import UserPanel from './components/user_panel/user_panel.vue'
 import NavPanel from './components/nav_panel/nav_panel.vue'
+import Notifications from './components/notifications/notifications.vue'
 
 export default {
   name: 'app',
   components: {
     UserPanel,
-    NavPanel
+    NavPanel,
+    Notifications
   },
   computed: {
-    user () { return this.$store.state.users.currentUser || {} },
-    style () { return { 'background-image': `url(${this.user.background_image})` } }
+    currentUser () { return this.$store.state.users.currentUser },
+    style () { return { 'background-image': `url(${this.currentUser.background_image})` } }
   }
 }

src/App.vue

@@ -9,6 +9,7 @@
       <sidebar>
         <user-panel></user-panel>
         <nav-panel></nav-panel>
+        <notifications v-if="currentUser"></notifications>
       </sidebar>
       <router-view></router-view>
     </div>

src/components/notifications/notifications.js

@@ -0,0 +1,16 @@
+import { sortBy, take } from 'lodash'
+
+const Notifications = {
+  data () {
+    return {
+      visibleNotificationCount: 20
+    }
+  },
+  computed: {
+    visibleNotifications () {
+      return take(sortBy(this.$store.state.statuses.notifications, ({action}) => -action.id), this.visibleNotificationCount)
+    }
+  }
+}
+
+export default Notifications

src/components/notifications/notifications.scss

@@ -0,0 +1,32 @@
+.notification {
+  padding: 0.5em;
+  padding-left: 1em;
+  display: flex;
+  border-bottom: 1px solid silver;
+
+  .text {
+    h1 {
+      margin: 0;
+      padding: 0;
+      font-size: 1em;
+    }
+
+    padding-left: 0.5em;
+    p {
+      margin: 0;
+      margin-top: 0;
+      margin-bottom: 0.5em;
+    }
+  }
+
+  .avatar {
+    padding-top: 3px;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+  }
+
+  &:last-child {
+    border: none
+  }
+}

src/components/notifications/notifications.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="notifications">
+    <div class="panel panel-default">
+      <div class="panel-heading">Notifications ({{visibleNotifications.length}})</div>
+      <div class="panel-body">
+        <div v-for="notification in visibleNotifications" class="notification">
+          <a :href="notification.action.user.statusnet_profile_url">
+            <img class='avatar' :src="notification.action.user.profile_image_url_original">
+          </a>
+          <div class='text'>
+            <div v-if="notification.type === 'favorite'">
+              <h1>{{ notification.action.user.name }} favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
+              <p>{{ notification.status.text }}</p>
+            </div>
+            <div v-if="notification.type === 'repeat'">
+              <h1>{{ notification.action.user.name }} repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
+              <p>{{ notification.status.text }}</p>
+            </div>
+            <div v-if="notification.type === 'mention'">
+              <h1>{{ notification.action.user.name }} <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
+              <p>{{ notification.status.text }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./notifications.js"></script>
+<style lang="scss" src="./notifications.scss"></style>