3 files changed, 79 insertions, 0 deletions
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
new file mode 100644
index 00000000..10f987a8
--- /dev/null
+++ b/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
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
new file mode 100644
index 00000000..1257e751
--- /dev/null
+++ b/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
+  }
+}
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
new file mode 100644
index 00000000..de5d9f00
--- /dev/null
+++ b/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>