refs #138 Show unread mark in SideMenu when update timeline

src/renderer/components/TimelineSpace/Home.vue

@@ -13,6 +13,9 @@ import Toot from './Cards/Toot'
 export default {
   name: 'home',
   components: { Toot },
+  mounted () {
+    this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
+  },
   computed: {
     ...mapState({
       timeline: state => state.TimelineSpace.homeTimeline

src/renderer/components/TimelineSpace/Notifications.vue

@@ -13,6 +13,9 @@ import Notification from './Cards/Notification'
 export default {
   name: 'notifications',
   components: { Notification },
+  mounted () {
+    this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
+  },
   computed: {
     ...mapState({
       notifications: state => state.TimelineSpace.notifications

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -16,10 +16,14 @@
       <el-menu-item :index="`/${id()}/home`">
         <icon name="home"></icon>
         <span>Home</span>
+        <el-badge is-dot :hidden="!unreadHomeTimeline">
+        </el-badge>
       </el-menu-item>
       <el-menu-item :index="`/${id()}/notifications`">
         <icon name="bell"></icon>
         <span>Notification</span>
+        <el-badge is-dot :hidden="!unreadNotifications">
+        </el-badge>
       </el-menu-item>
       <el-menu-item :index="`/${id()}/favourites`">
         <icon name="star"></icon>
@@ -45,7 +49,9 @@ export default {
   computed: {
     ...mapState({
       account: state => state.TimelineSpace.account,
-      username: state => state.TimelineSpace.username
+      username: state => state.TimelineSpace.username,
+      unreadHomeTimeline: state => state.TimelineSpace.SideMenu.unreadHomeTimeline,
+      unreadNotifications: state => state.TimelineSpace.SideMenu.unreadNotifications
     })
   },
   methods: {
@@ -76,12 +82,18 @@ export default {
     }
   }
 
-  .timeline-menu {
+  .timeline-menu /deep/ {
     position: fixed;
     top: 70px;
     left: 65px;
     height: 100%;
     width: 180px;
+
+    .el-badge__content {
+      background-color: #409eff;
+      border: none;
+      margin-left: 4px;
+    }
   }
 }
 </style>

src/renderer/store/TimelineSpace.js

@@ -117,6 +117,7 @@ const TimelineSpace = {
     startUserStreaming ({ commit }, account) {
       ipcRenderer.on('update-start-user-streaming', (event, update) => {
         commit('appendHomeTimeline', update)
+        commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', true, { root: true })
       })
       ipcRenderer.on('notification-start-user-streaming', (event, notification) => {
         let notify = buildNotification(notification)
@@ -124,6 +125,7 @@ const TimelineSpace = {
           router.push(`/${account._id}/notifications`)
         }
         commit('appendNotifications', notification)
+        commit('TimelineSpace/SideMenu/changeUnreadNotifications', true, { root: true })
       })
 
       return new Promise((resolve, reject) => {

src/renderer/store/TimelineSpace/SideMenu.js

@@ -1,7 +1,17 @@
 const SideMenu = {
   namespaced: true,
-  state: {},
-  mutations: {},
+  state: {
+    unreadHomeTimeline: false,
+    unreadNotifications: false
+  },
+  mutations: {
+    changeUnreadHomeTimeline (state, value) {
+      state.unreadHomeTimeline = value
+    },
+    changeUnreadNotifications (state, value) {
+      state.unreadNotifications = value
+    }
+  },
   actions: {}
 }