Timeline view

front/src/components/Sidebar.vue

@@ -36,6 +36,9 @@
         <router-link class="item" v-else :to="{name: 'login'}"><i class="sign in icon"></i> Login</router-link>
         <router-link class="item" :to="{path: '/library'}"><i class="sound icon"> </i>Browse library</router-link>
         <router-link class="item" :to="{path: '/favorites'}"><i class="heart icon"></i> Favorites</router-link>
+        <router-link
+          v-if="$store.state.auth.authenticated"
+          class="item" :to="{path: '/activity'}"><i class="bell icon"></i> Activity</router-link>
       </div>
     </div>
     <div v-if="queue.previousQueue " class="ui black icon message">

front/src/router/index.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 import PageNotFound from '@/components/PageNotFound'
 import About from '@/components/About'
 import Home from '@/components/Home'
+import InstanceTimeline from '@/views/instance/Timeline'
 import Login from '@/components/auth/Login'
 import Signup from '@/components/auth/Signup'
 import Profile from '@/components/auth/Profile'
@@ -39,6 +40,11 @@ export default new Router({
       name: 'about',
       component: About
     },
+    {
+      path: '/activity',
+      name: 'activity',
+      component: InstanceTimeline
+    },
     {
       path: '/login',
       name: 'login',

front/src/views/instance/Timeline.vue

+<template>
+  <div class="main pusher">
+    <div class="ui vertical center aligned stripe segment">
+      <div class="ui text container">
+        <h1 class="ui header">Recent activity on this instance</h1>
+        <div class="ui feed">
+          <component
+            class="event"
+            v-for="(event, index) in events"
+            :key="event.id + index"
+            v-if="components[event.type]"
+            :is="components[event.type]"
+            :event="event">
+            <username
+              class="user"
+              :username="event.actor.local_id"
+              slot="user"></username>
+              {{ event.published }}
+            <human-date class="date" :date="event.published" slot="date"></human-date>
+          </component>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+import Like from '@/components/activity/Like'
+import Listen from '@/components/activity/Listen'
+
+export default {
+  data () {
+    return {
+      components: {
+        'Like': Like,
+        'Listen': Listen
+      }
+    }
+  },
+  computed: {
+    ...mapState({
+      events: state => state.instance.events
+    })
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>