handle desktop notifications clicks

src/boot/after_store.js

@@ -345,7 +345,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
   store.dispatch('setLayoutHeight', windowHeight())
 
   FaviconService.initFaviconService()
-  initServiceWorker()
+  initServiceWorker(store)
 
   window.addEventListener('focus', () => updateFocus())
 

src/components/notifications/notifications.js

@@ -159,14 +159,16 @@ const Notifications = {
     updateScrollPosition () {
       this.showScrollTop = this.$refs.root.offsetTop < this.scrollerRef.scrollTop
     },
+    /* "Interacted" really refers to "actionable" notifications that require user input,
+     * everything else (likes/repeats/reacts) cannot be acted and therefore we just clear
+     * the "seen" status upon any clicks on them
+     */
     notificationClicked (notification) {
-      // const { type, id, seen } = notification
+      const { id } = notification
+      this.$store.dispatch('notificationClicked', { id })
     },
     notificationInteracted (notification) {
-      const { id, seen } = notification
-      if (!seen) this.markOneAsSeen(id)
-    },
-    markOneAsSeen (id) {
+      const { id } = notification
       this.$store.dispatch('markSingleNotificationAsSeen', { id })
     },
     markAsSeen () {

src/modules/notifications.js

@@ -113,6 +113,21 @@ export const notifications = {
         }
       })
     },
+    notificationClicked ({ state, commit }, id) {
+      const notification = state.idStore[id]
+      const { type, seen } = notification
+
+      if (!seen) {
+        switch (type) {
+          case 'mention':
+          case 'pleroma:report':
+          case 'follow_request':
+            break
+          default:
+            commit('markSingleNotificationAsSeen', { id })
+        }
+      }
+    },
     setNotificationsLoading ({ rootState, commit }, { value }) {
       commit('setNotificationsLoading', { value })
     },

src/services/sw/sw.js

@@ -82,12 +82,18 @@ function sendSubscriptionToBackEnd (subscription, token, notificationVisibility)
     return responseData
   })
 }
-export async function initServiceWorker () {
+export async function initServiceWorker (store) {
   if (!isSWSupported()) return
   await getOrCreateServiceWorker()
   navigator.serviceWorker.addEventListener('message', (event) => {
+    const { dispatch } = store
     console.log('SW MESSAGE', event)
-    // TODO actually act upon click (open drawer on mobile, open chat/thread etc)
+    const { type, ...rest } = event
+
+    switch (type) {
+      case 'notificationClicked':
+        dispatch('notificationClicked', { id: rest.id })
+    }
   })
 }