WIP notification count

src/components/nav_panel/nav_panel.js

@@ -1,4 +1,4 @@
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 
 const NavPanel = {
   created () {
@@ -6,13 +6,16 @@ const NavPanel = {
       this.$store.dispatch('startFetchingFollowRequests')
     }
   },
-  computed: mapState({
-    currentUser: state => state.users.currentUser,
-    chat: state => state.chat.channel,
-    followRequestCount: state => state.api.followRequests.length,
-    privateMode: state => state.instance.private,
-    federating: state => state.instance.federating
-  })
+  computed: {
+    ...mapState({
+      currentUser: state => state.users.currentUser,
+      chat: state => state.chat.channel,
+      followRequestCount: state => state.api.followRequests.length,
+      privateMode: state => state.instance.private,
+      federating: state => state.instance.federating
+    }),
+    ...mapGetters(['unreadChatCount', 'currentChat'])
+  }
 }
 
 export default NavPanel

src/components/nav_panel/nav_panel.vue

@@ -19,6 +19,12 @@
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }">
+            <div
+              v-if="unreadChatCount(currentChat)"
+              class="alert-dot-number"
+            >
+              {{ unreadChatCount(currentChat) }}
+            </div>
             <i class="button-icon icon-chat" /> {{ $t("nav.chats") }}
           </router-link>
         </li>

src/components/side_drawer/side_drawer.js

@@ -1,3 +1,4 @@
+import { mapGetters } from 'vuex'
 import UserCard from '../user_card/user_card.vue'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
 import GestureService from '../../services/gesture_service/gesture_service'
@@ -47,7 +48,8 @@ const SideDrawer = {
     },
     federating () {
       return this.$store.state.instance.federating
-    }
+    },
+    ...mapGetters(['unreadChatCount', 'currentChat'])
   },
   methods: {
     toggleDrawer () {

src/components/side_drawer/side_drawer.vue

@@ -46,8 +46,14 @@
           <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
             <i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }}
           </router-link>
-          <router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }">
+          <router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }" style="position: relative">
             <i class="button-icon icon-chat" /> {{ $t("nav.chats") }}
+            <span
+              v-if="unreadChatCount(currentChat)"
+              class="alert-dot-number"
+            >
+              {{ unreadChatCount(currentChat) }}
+            </span>
           </router-link>
         </li>
         <li
@@ -98,14 +104,6 @@
             <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
           </router-link>
         </li>
-        <li
-          v-if="currentUser && chat"
-          @click="toggleDrawer"
-        >
-          <router-link :to="{ name: 'chat' }">
-            <i class="button-icon icon-chat" /> {{ $t("nav.chat") }}
-          </router-link>
-        </li>
       </ul>
       <ul>
         <li

src/modules/chats.js

@@ -79,6 +79,9 @@ const chats = {
     },
     readChat ({ rootState, dispatch }, { id }) {
       dispatch('resetChatNewMessageCount')
+      dispatch('markMultipleNotificationsAsSeen', {
+        finder: n => n.chatMessage && n.chatMessage.chat_id === id && !n.seen
+      })
       rootState.api.backendInteractor.readChat({ id }).then(() => {
         // dispatch('refreshCurrentUser')
       })
@@ -124,11 +127,10 @@ const chats = {
     updateChat (state, { _dispatch, chat: updatedChat, _rootGetters }) {
       let chat = find(state.chatList.data, { id: updatedChat.id })
       if (chat) {
-        state.chatList.data = state.chatList.data.filter(d => {
-          return d.id !== updatedChat.id
-        })
+        chat.lastMessage = updatedChat.lastMessage
+        chat.unread = updatedChat.unread
       }
-      state.chatList.data.unshift(updatedChat)
+      if (!chat) { state.chatList.data.unshift(updatedChat) }
       state.chatList.idStore[updatedChat.id] = updatedChat
     },
     deleteChat (state, { _dispatch, id, _rootGetters }) {

src/modules/statuses.js

@@ -335,6 +335,7 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
     if (notification.type === 'pleroma:chat_mention') {
       dispatch('addChatMessages', { chatId: notification.chatMessage.chat_id, messages: [notification.chatMessage] })
       dispatch('updateChatByAccountId', { accountId: notification.from_profile.id })
+      // dispatch('updateUnreadChatCount', { userId, unreadChatCount })
     }
 
     // Only add a new notification if we don't have one for the same action
@@ -540,6 +541,9 @@ export const mutations = {
   dismissNotification (state, { id }) {
     state.notifications.data = state.notifications.data.filter(n => n.id !== id)
   },
+  dismissNotifications (state, { finder }) {
+    state.notifications.data = state.notifications.data.filter(n => finder)
+  },
   updateNotification (state, { id, updater }) {
     const notification = find(state.notifications.data, n => n.id === id)
     notification && updater(notification)
@@ -616,6 +620,22 @@ export const mutations = {
 
 const statuses = {
   state: defaultState(),
+  getters: {
+    unreadChatCount: state => currentChat => {
+      let res = 0
+      state.notifications.data.forEach(n => {
+        let isMsg = !n.seen && n.chatMessage
+        if (!isMsg) { return }
+
+        if (currentChat) {
+          if (currentChat.id !== n.chatMessage.chat_id) { res++ }
+        } else {
+          res++
+        }
+      })
+      return res
+    }
+  },
   actions: {
     addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false, userId }) {
       commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser, userId })
@@ -718,6 +738,14 @@ const statuses = {
       commit('dismissNotification', { id })
       rootState.api.backendInteractor.dismissNotification({ id })
     },
+    markMultipleNotificationsAsSeen ({ rootState, commit }, { finder }) {
+      const notifications = rootState.statuses.notifications.data.filter(finder)
+
+      notifications.forEach(n => {
+        commit('markSingleNotificationAsSeen', { id: n.id })
+        rootState.api.backendInteractor.markNotificationsAsSeen({ id: n.id, single: true })
+      })
+    },
     updateNotification ({ rootState, commit }, { id, updater }) {
       commit('updateNotification', { id, updater })
     },

src/modules/users.js

@@ -225,6 +225,12 @@ export const mutations = {
   signUpFailure (state, errors) {
     state.signUpPending = false
     state.signUpErrors = errors
+  },
+  updateUnreadChatCount (state, { userId, unreadChatCount }) {
+    const user = state.usersObject[userId]
+    if (user) {
+      user.unread_chat_count = unreadChatCount
+    }
   }
 }
 
@@ -259,6 +265,9 @@ const users = {
   mutations,
   getters,
   actions: {
+    updateUnreadChatCount (store, { userId, unreadChatCount }) {
+      store.commit('updateUnreadChatCount', { userId, unreadChatCount })
+    },
     fetchUser (store, id) {
       return store.rootState.api.backendInteractor.fetchUser({ id })
         .then((user) => {

src/services/notification_utils/notification_utils.js

@@ -9,8 +9,7 @@ export const visibleTypes = store => ([
   store.state.config.notificationVisibility.follows && 'follow',
   store.state.config.notificationVisibility.followRequest && 'follow_request',
   store.state.config.notificationVisibility.moves && 'move',
-  store.state.config.notificationVisibility.emojiReactions && 'pleroma:emoji_reaction',
-  store.state.config.notificationVisibility.chatMention && 'pleroma:chat_mention'
+  store.state.config.notificationVisibility.emojiReactions && 'pleroma:emoji_reaction'
 ].filter(_ => _))
 
 const statusNotifications = ['like', 'mention', 'repeat', 'pleroma:emoji_reaction']