From c792caf84fbbf0329bdfc8111c193698f561f972 Mon Sep 17 00:00:00 2001
From: Jeff Kristian <jekrimo@gmail.com>
Date: Tue, 16 Aug 2022 13:57:31 -0600
Subject: [PATCH] feat(notifications): notification basics (#4307)

* feat(notification): wip on noti

* feat(notifications): alerts show in notifications

* feat(notifications): alerts show in notifications

* feat(notifications: make notifications clickable rework notification structure)

* feat(notifications: noti only missing delete)

* fix(noti): hover pointer for alert

* fix(noti): update

* fix(noti): update

* feat(noti): wip

* fix(notification): update and rebase

* fix(subscription): remove console

* feat(notifications): notification basics

* feat(notifications): notification basics

* feat(notifications): notification basics
---
 .gitignore                                    |   4 +-
 .../views/navigation/toolbar/Toolbar.html     |  18 +-
 .../views/navigation/toolbar/Toolbar.less     |   1 +
 .../views/navigation/toolbar/Toolbar.vue      |   6 +-
 .../navigation/toolbar/alerts/Alerts.html     |  16 +-
 .../navigation/toolbar/alerts/Alerts.vue      |  21 +-
 .../toolbar/alerts/alert/Alert.html           |  20 +-
 .../toolbar/alerts/alert/Alert.less           |   1 +
 .../navigation/toolbar/alerts/alert/Alert.vue |  45 +-
 components/views/user/User.vue                |   0
 layouts/chat.vue                              |   0
 libraries/Iridium/IridiumManager.ts           |   6 +
 libraries/Iridium/NotificationManager.ts      | 123 +++
 libraries/Iridium/chat/ChatManager.ts         |  20 +
 libraries/Iridium/friends/FriendsManager.ts   |  18 +
 libraries/Iridium/notifications/types.ts      |  46 +-
 libraries/ui/Alerts.ts                        |  35 -
 locales/en-US.js                              |   1 +
 store/ui/__snapshots__/getters.test.ts.snap   |  32 -
 store/ui/getters.test.ts                      | 157 ----
 store/ui/mutations.test.ts                    | 871 +-----------------
 store/ui/mutations.ts                         |  17 -
 utilities/Notifications.ts                    |   2 +-
 23 files changed, 293 insertions(+), 1167 deletions(-)
 create mode 100644 components/views/user/User.vue
 create mode 100644 layouts/chat.vue
 create mode 100644 libraries/Iridium/NotificationManager.ts
 delete mode 100644 store/ui/__snapshots__/getters.test.ts.snap

diff --git a/.gitignore b/.gitignore
index 6003790c5e..7ef45bc2ed 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,7 +8,7 @@ yarn-debug.log*
 yarn-error.log*
 package-lock.json
 yarn.lock
-
+pnpm-lock.yaml
 # Runtime data
 pids
 *.pid
@@ -103,4 +103,4 @@ scratchpad.js
 
 solana-localnet
 
-iridium
\ No newline at end of file
+iridium
diff --git a/components/views/navigation/toolbar/Toolbar.html b/components/views/navigation/toolbar/Toolbar.html
index 6aaff9bbc7..d04089be9c 100644
--- a/components/views/navigation/toolbar/Toolbar.html
+++ b/components/views/navigation/toolbar/Toolbar.html
@@ -13,16 +13,20 @@
   <div class="controls">
     <div class="toggle-alerts" data-cy="toolbar-alerts">
       <UiCircle
-        v-if="allUnseenNotifications.length"
+        v-if="notifications.length"
         class="notification-alert"
         :size="15"
         color="red"
         type="icon"
-        :data="allUnseenNotifications.length"
+        :data="notifications.length"
         @click="toggleAlerts"
       >
-        {{ allUnseenNotifications.length }}
+        {{notifications.length}}
       </UiCircle>
+      <ToolbarAlerts
+        v-if="showAlerts && $device.isDesktop"
+        v-click-outside="toggleAlerts"
+      />
       <bell-icon
         v-tooltip.bottom="$t('pages.chat.alerts')"
         size="1x"
@@ -30,15 +34,7 @@
         color="primary"
         @click="toggleAlerts"
       />
-      <ToolbarAlerts
-        v-if="showAlerts && $device.isDesktop"
-        v-click-outside="toggleAlerts"
-      />
     </div>
-    <ToolbarAlerts
-      v-if="showAlerts && !$device.isDesktop"
-      v-click-outside="toggleAlerts"
-    />
     <div
       v-if="conversation"
       v-tooltip.bottom="callTooltipText"
diff --git a/components/views/navigation/toolbar/Toolbar.less b/components/views/navigation/toolbar/Toolbar.less
index c193ff0c6a..94de7ab319 100644
--- a/components/views/navigation/toolbar/Toolbar.less
+++ b/components/views/navigation/toolbar/Toolbar.less
@@ -16,6 +16,7 @@
 
   .notification-alert {
     position: fixed;
+    z-index: 1;
   }
 
   .toggle-alerts {
diff --git a/components/views/navigation/toolbar/Toolbar.vue b/components/views/navigation/toolbar/Toolbar.vue
index 47f400f29f..df3f820f6c 100644
--- a/components/views/navigation/toolbar/Toolbar.vue
+++ b/components/views/navigation/toolbar/Toolbar.vue
@@ -22,6 +22,10 @@ import type { Friend, User } from '~/libraries/Iridium/friends/types'
 import { RootState } from '~/types/store/store'
 import { Conversation } from '~/libraries/Iridium/chat/types'
 import { GroupMemberDetails } from '~/libraries/Iridium/groups/types'
+import {
+  Notification,
+  NotificationType,
+} from '~/libraries/Iridium/notifications/types'
 
 export default Vue.extend({
   components: {
@@ -50,13 +54,13 @@ export default Vue.extend({
   },
   computed: {
     ...mapState({
+      notifications: () => Object.entries(iridium.notifications?.state),
       ui: (state) => (state as RootState).ui,
       audio: (state) => (state as RootState).audio,
       video: (state) => (state as RootState).video,
       webrtc: (state) => (state as RootState).webrtc,
       modals: (state) => (state as RootState).ui.modals,
     }),
-    ...mapGetters('ui', ['allUnseenNotifications']),
     ModalWindows: () => ModalWindows,
     conversationId(): Conversation['id'] | undefined {
       return this.$route.params.id
diff --git a/components/views/navigation/toolbar/alerts/Alerts.html b/components/views/navigation/toolbar/alerts/Alerts.html
index 8316b4c267..611d6762ac 100644
--- a/components/views/navigation/toolbar/alerts/Alerts.html
+++ b/components/views/navigation/toolbar/alerts/Alerts.html
@@ -4,15 +4,17 @@
     <TypographySubtitle :size="6" :text="$t('pages.chat.alerts')" />
   </div>
   <template v-if="notifications.length">
-    <InteractablesButton
-      @click="clearNotifications"
-      class="alerts-clear-button"
-      color="primary"
-      :text="$t('ui.clear_all')"
-    />
+<!--    <InteractablesButton-->
+<!--      @click="clearNotifications"-->
+<!--      class="alerts-clear-button"-->
+<!--      color="primary"-->
+<!--      :text="$t('ui.clear_all')"-->
+<!--    />-->
     <ToolbarAlertsAlert
       v-for="notification in notifications"
-      :alert="notification"
+      v-if="notification[1].type !== 'EMPTY'"
+      :alert="notification[1]"
+      :alertDid="notification[0]"
       :key="notification.id"
     />
   </template>
diff --git a/components/views/navigation/toolbar/alerts/Alerts.vue b/components/views/navigation/toolbar/alerts/Alerts.vue
index d843772be6..b9e9ba617e 100644
--- a/components/views/navigation/toolbar/alerts/Alerts.vue
+++ b/components/views/navigation/toolbar/alerts/Alerts.vue
@@ -2,20 +2,29 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'vuex'
 import { FlaskConicalIcon } from 'satellite-lucide-icons'
-import { AlertState } from '~/libraries/ui/Alerts'
-import { RootState } from '~/types/store/store'
+import iridium from '~/libraries/Iridium/IridiumManager'
 export default Vue.extend({
   components: {
     FlaskConicalIcon,
   },
+  data() {
+    return {
+      messages: [],
+    }
+  },
   computed: {
     ...mapState({
-      notifications: (state) => (state as RootState).ui.notifications,
+      notifications: () =>
+        Object.entries(iridium.notifications?.state)
+          .sort((a: any, b: any) => {
+            return b.at - a.at
+          })
+          .filter((a) => {
+            return a
+          }),
     }),
-    ...mapGetters('ui', ['allUnseenNotifications']),
-    AlertState: () => AlertState,
   },
   methods: {
     clearNotifications() {
diff --git a/components/views/navigation/toolbar/alerts/alert/Alert.html b/components/views/navigation/toolbar/alerts/alert/Alert.html
index 762998aeb7..081ae565a4 100644
--- a/components/views/navigation/toolbar/alerts/alert/Alert.html
+++ b/components/views/navigation/toolbar/alerts/alert/Alert.html
@@ -1,15 +1,13 @@
-<div class="alert">
-  <UiCircle
-    :type="alertImage ? 'image' : 'random'"
-    :source="alertImage"
-    :data-cy="{'circle-without-picture' : !alertImage}"
-  />
-  <div class="info-container">
+<div class="alert" >
+<!--  <UiCircle-->
+<!--    :type="alertImage ? 'image' : 'random'"-->
+<!--    :source="alertImage"-->
+<!--    :data-cy="{'circle-without-picture' : !alertImage}"-->
+<!--  />-->
+  <div class="info-container"  @click="notificationLink(alert.type)">
     <div class="head">
-      <TypographySubtitle :size="6" :text="alert.content.title" />
-      <TypographyText color="dark" size="xs">
-        {{ $dayjs(alert.at).fromNow() }}
-      </TypographyText>
+      <TypographySubtitle :size="6" :text="setTranslateText" />
+      <TypographyText :text="$dayjs(alert.at).fromNow()" class="timestamp" />
     </div>
     <TypographyText class="ellipsis" :title="setTranslateText">
       {{ setTranslateText }}
diff --git a/components/views/navigation/toolbar/alerts/alert/Alert.less b/components/views/navigation/toolbar/alerts/alert/Alert.less
index 4d2814f366..dc376923df 100644
--- a/components/views/navigation/toolbar/alerts/alert/Alert.less
+++ b/components/views/navigation/toolbar/alerts/alert/Alert.less
@@ -7,6 +7,7 @@
   &:extend(.round-corners);
   padding: @light-spacing @large-spacing @light-spacing @light-spacing;
   align-items: center;
+  cursor: pointer;
   position: relative;
   transition: all @animation-speed ease;
 
diff --git a/components/views/navigation/toolbar/alerts/alert/Alert.vue b/components/views/navigation/toolbar/alerts/alert/Alert.vue
index 63aae5707a..9c2fe2e709 100644
--- a/components/views/navigation/toolbar/alerts/alert/Alert.vue
+++ b/components/views/navigation/toolbar/alerts/alert/Alert.vue
@@ -4,41 +4,62 @@
 import Vue, { PropType } from 'vue'
 
 import { TranslateResult } from 'vue-i18n'
-import { Alert, AlertType } from '~/libraries/ui/Alerts'
+import {
+  Notification,
+  NotificationType,
+} from '~/libraries/Iridium/notifications/types'
+import iridium from '~/libraries/Iridium/IridiumManager'
 
 export default Vue.extend({
   props: {
     alert: {
-      type: Object as PropType<Alert>,
+      type: Object as PropType<Notification>,
+      required: true,
+    },
+    alertDid: {
+      type: String,
       required: true,
     },
   },
   computed: {
     setTranslateText(): TranslateResult | undefined {
       switch (this.alert?.type) {
-        case AlertType.DIRECT_MESSAGE: {
+        case NotificationType.DIRECT_MESSAGE: {
           return this.$t('messaging.user_sent.user', {
             user: this.alert.fromName,
             msgType: this.alert.type,
           })
         }
-        case AlertType.GROUP_MESSAGE: {
-          return this.$t('messaging.user_sent_group_message.user', {
+        case NotificationType.FRIEND_REQUEST: {
+          return this.$t('friends.new_friend_request', {
             user: this.alert.fromName,
-            group: this.alert.groupName,
           })
         }
       }
       return this.$t('user_sent_something.user')
     },
-    alertImage(): string {
-      const hash = this.alert?.content?.image
-      return hash ? `${this.$Config.ipfs.gateway}${hash}` : ''
-    },
+    // alertImage(): string {
+    //   const hash = this.alert?.image
+    //   return hash ? `${this.$Config.textile.browser}/ipfs/${hash}` : ''
+    // },
   },
   methods: {
-    removeNotification() {
-      this.$store.commit('ui/removeNotification', this.alert.id)
+    removeNotification(id: string) {
+      iridium.notifications.deleteNotification(this.alertDid)
+    },
+    notificationLink(alertType: NotificationType) {
+      switch (alertType) {
+        case NotificationType.FRIEND_REQUEST: {
+          this.$router.push({ path: '/friends' })
+          break
+        }
+        case NotificationType.DIRECT_MESSAGE: {
+          this.$router.push(
+            this.alert.fromAddress ? `/chat/${this.alert.fromAddress}` : `/`,
+          )
+          break
+        }
+      }
     },
   },
 })
diff --git a/components/views/user/User.vue b/components/views/user/User.vue
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/layouts/chat.vue b/layouts/chat.vue
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/libraries/Iridium/IridiumManager.ts b/libraries/Iridium/IridiumManager.ts
index e14b9cfd00..cd3ec2965d 100644
--- a/libraries/Iridium/IridiumManager.ts
+++ b/libraries/Iridium/IridiumManager.ts
@@ -10,6 +10,7 @@ import logger from '~/plugins/local/logger'
 import { Config } from '~/config'
 import FilesManager from '~/libraries/Iridium/files/FilesManager'
 import SettingsManager from '~/libraries/Iridium/settings/SettingsManager'
+import NotificationManager from '~/libraries/Iridium/NotificationManager'
 
 export class IridiumManager extends Emitter {
   ready: boolean = false
@@ -19,6 +20,7 @@ export class IridiumManager extends Emitter {
   chat: ChatManager
   friends: FriendsManager
   files: FilesManager
+  notifications: NotificationManager
   settings: SettingsManager
 
   constructor() {
@@ -29,6 +31,7 @@ export class IridiumManager extends Emitter {
     this.chat = new ChatManager(this)
     this.files = new FilesManager(this)
     this.settings = new SettingsManager(this)
+    this.notifications = new NotificationManager(this)
   }
 
   /**
@@ -76,6 +79,7 @@ export class IridiumManager extends Emitter {
         friends: {},
         conversations: {},
         files: {},
+        notifications: {},
         settings: {},
         indexes: {},
       }
@@ -97,6 +101,8 @@ export class IridiumManager extends Emitter {
     await this.files.init()
     logger.log('iridium/manager', 'initializing settings')
     await this.settings.init()
+    logger.log('iridium/manager', 'notification settings')
+    await this.notifications.init()
     logger.log('iridium/manager', 'ready')
 
     this.ready = true
diff --git a/libraries/Iridium/NotificationManager.ts b/libraries/Iridium/NotificationManager.ts
new file mode 100644
index 0000000000..e908afd380
--- /dev/null
+++ b/libraries/Iridium/NotificationManager.ts
@@ -0,0 +1,123 @@
+import {
+  Emitter,
+  EmitterCallback,
+  IridiumGetOptions,
+  IridiumSetOptions,
+} from '@satellite-im/iridium'
+import { IridiumManager } from '~/libraries/Iridium/IridiumManager'
+import logger from '~/plugins/local/logger'
+import {
+  EmptyNotification,
+  Notification,
+  NotificationsError,
+} from '~/libraries/Iridium/notifications/types'
+import { Notifications } from '~/utilities/Notifications'
+
+export default class NotificationManager extends Emitter<Notification> {
+  public ready: boolean = false
+  public subscriptions: string[] = []
+  public state: {
+    notifications: [{ [key: string]: Notification }]
+  } = {
+    notifications: [{}],
+  }
+
+  constructor(public readonly iridium: IridiumManager) {
+    super()
+  }
+
+  async init() {
+    await this.fetch()
+    this.ready = true
+    this.emit('ready', {})
+  }
+
+  async fetch() {
+    this.state = (await this.iridium.connector?.get('notifications')) || {
+      notifications: [{}],
+    }
+  }
+
+  get(path: string, options: IridiumGetOptions = {}) {
+    return this.iridium.connector?.get(
+      `/notifications${path === '/' ? '' : path}`,
+      options,
+    )
+  }
+
+  set(path: string, payload: any, options: IridiumSetOptions = {}) {
+    logger.info('iridium/notifications', 'path and paylaod', {
+      path,
+      payload,
+    })
+    return this.iridium.connector?.set(
+      `/${path === '/' ? '' : path}`,
+      payload,
+      options,
+    )
+  }
+
+  async filterDeletedNotifications(): Promise<[{ [p: string]: Notification }]> {
+    this.state = (await this.iridium.connector?.get('notifications')) || {
+      notifications: [{}],
+    }
+    return this.state.notifications.sort((a: any, b: any) => {
+      return b.at - a.at
+    })
+  }
+
+  async seenAll() {
+    this.state.notifications.forEach((a) => {
+      a[1].seen = true
+      this.iridium.connector?.set(`/notifications/${a[0]}`, a[1])
+    })
+  }
+
+  async subscribeToNotifications(
+    id: string,
+    onNotification: EmitterCallback<Notification>,
+  ) {
+    await this.fetch()
+    this.on(`notifications`, onNotification)
+  }
+
+  async unsubscribeFromConversation(
+    id: string,
+    onNotification: EmitterCallback<Notification>,
+  ) {
+    this.off(`notifications`, onNotification)
+  }
+
+  async deleteNotification(Id: string) {
+    await this.iridium.connector?.set(`/notifications/${Id}`, EmptyNotification)
+  }
+
+  /**
+   * Send a new notification
+   * @method sendNotification
+   */
+  async sendNotification(payload: Partial<Notification>) {
+    if (!this.iridium.connector) return
+    const notificationCID = await this.iridium.connector.store(payload, {})
+    if (!notificationCID) {
+      throw new Error(NotificationsError.NOTIFICATION_NOT_SENT)
+    }
+    await this.iridium.connector.set(
+      `/notifications/${notificationCID}`,
+      payload,
+    )
+
+    this.emit(`notifications/${notificationCID}`, {
+      action: 'notification',
+      message: payload,
+      from: this.iridium.connector.did,
+    })
+    const browserNotification = new Notifications()
+    await browserNotification.sendNotifications(
+      payload.type!,
+      payload.title!,
+      payload.image!,
+      payload.description!,
+    )
+  }
+}
diff --git a/libraries/Iridium/chat/ChatManager.ts b/libraries/Iridium/chat/ChatManager.ts
index 564176baef..795dee63b9 100644
--- a/libraries/Iridium/chat/ChatManager.ts
+++ b/libraries/Iridium/chat/ChatManager.ts
@@ -26,6 +26,10 @@ import createThumbnail from '~/utilities/Thumbnail'
 import { FILE_TYPE } from '~/libraries/Files/types/file'
 import { blobToStream } from '~/utilities/BlobManip'
 import isNSFW from '~/utilities/NSFW'
+import {
+  Notification,
+  NotificationType,
+} from '~/libraries/Iridium/notifications/types'
 
 export type ConversationPubsubEvent = IridiumMessage<{
   message?: ConversationMessage
@@ -190,6 +194,22 @@ export default class ChatManager extends Emitter<ConversationMessage> {
         `/conversations/${conversationId}/message/${message.id}`,
         message,
       )
+      const friendName = this.iridium.friends.getFriend(message?.from)
+      const buildNotification: Partial<Notification> = {
+        fromName: friendName?.name,
+        at: Date.now(),
+        fromAddress: conversationId,
+        title: `New message from ${friendName?.name}`,
+        description:
+          message.body?.length! > 79
+            ? `${message.body?.substring(0, 80)}...`
+            : message.body,
+        image: message.from,
+        type: NotificationType.DIRECT_MESSAGE,
+        seen: false,
+      }
+
+      this.iridium.notifications?.sendNotification(buildNotification)
     }
   }
 
diff --git a/libraries/Iridium/friends/FriendsManager.ts b/libraries/Iridium/friends/FriendsManager.ts
index b6c4748536..2bb9d56b22 100644
--- a/libraries/Iridium/friends/FriendsManager.ts
+++ b/libraries/Iridium/friends/FriendsManager.ts
@@ -19,6 +19,10 @@ import {
   User,
 } from './types'
 import logger from '~/plugins/local/logger'
+import {
+  Notification,
+  NotificationType,
+} from '~/libraries/Iridium/notifications/types'
 
 export type IridiumFriendEvent = {
   to: IridiumPeerIdentifier
@@ -282,6 +286,10 @@ export default class FriendsManager extends Emitter<IridiumFriendPubsub> {
       did,
       request,
     })
+    logger.info('iridium/friends', 'saving friend request', {
+      did,
+      request,
+    })
 
     // Announce to the remote user
     if (did !== this.iridium.connector?.id) {
@@ -303,6 +311,16 @@ export default class FriendsManager extends Emitter<IridiumFriendPubsub> {
         did,
         payload,
       })
+      const buildNotification: Partial<Notification> = {
+        fromName: request.user.name,
+        at: Date.now(),
+        title: 'New Request',
+        description: `New ${NotificationType.FRIEND_REQUEST} From ${request.user.name}`,
+        image: request.user.photoHash,
+        type: NotificationType.FRIEND_REQUEST,
+        seen: false,
+      }
+      this.iridium.notifications?.sendNotification(buildNotification)
       await this.send(payload)
     }
   }
diff --git a/libraries/Iridium/notifications/types.ts b/libraries/Iridium/notifications/types.ts
index acaa6341d2..9b7ea9950f 100644
--- a/libraries/Iridium/notifications/types.ts
+++ b/libraries/Iridium/notifications/types.ts
@@ -1,9 +1,43 @@
+export const NotificationsError = {
+  NOTIFICATION_NOT_SENT: 'error.notifications.notifications_not_sent',
+}
+
+export enum NotificationType {
+  FRIEND_REQUEST = 'Friend Request',
+  MISSED_CALL = 'MISSED_CALL',
+  FILES_FULL = 'FILES_FULL',
+  FILE_UPLOADED = 'FILE_UPLOADED',
+  FILE_NSFW = 'FILE_NSFW',
+  DEV = 'DEV',
+  DIRECT_MESSAGE = 'Direct Message',
+  GROUP_MESSAGE = 'Group Message',
+  MENTIONS_NOTIFICATION = 'mentionNotification',
+  ACCOUNT_NOTIFICATION = 'accountNotification',
+  APPLICATION_NOTIFICATION = 'applicationNotification',
+  MISCELLANEOUS = 'miscellaneous',
+  SEEN = 'Seen',
+}
+
 export type Notification = {
-  id: string
-  type: string
-  from: string
-  to: string
-  body: string
   at: number
-  read: boolean
+  id?: string
+  type: NotificationType
+  fromName: string
+  fromAddress?: string
+  title: string
+  description: string
+  image?: string
+  seen: boolean
+}
+
+export const EmptyNotification: Notification = {
+  at: 0,
+  id: '',
+  type: NotificationType.SEEN,
+  fromName: '',
+  fromAddress: '',
+  title: '',
+  description: '',
+  image: '',
+  seen: false,
 }
diff --git a/libraries/ui/Alerts.ts b/libraries/ui/Alerts.ts
index c88df44b85..e69de29bb2 100644
--- a/libraries/ui/Alerts.ts
+++ b/libraries/ui/Alerts.ts
@@ -1,35 +0,0 @@
-export enum AlertType {
-  FRIEND_REQUEST = 'FRIEND_REQUEST',
-  MISSED_CALL = 'MISSED_CALL',
-  FILES_FULL = 'FILES_FULL',
-  FILE_UPLOADED = 'FILE_UPLOADED',
-  FILE_NSFW = 'FILE_NSFW',
-  DEV = 'DEV',
-  DIRECT_MESSAGE = 'Direct Message',
-  GROUP_MESSAGE = 'Group Message',
-  MENTIONS_NOTIFICATION = 'mentionNotification',
-  ACCOUNT_NOTIFICATION = 'accountNotification',
-  APPLICATION_NOTIFICATION = 'applicationNotification',
-  MISCELLANEOUS = 'miscellaneous',
-}
-
-export enum AlertState {
-  READ = 'READ',
-  UNREAD = 'UNREAD',
-}
-
-export type Alert = {
-  at: number
-  id?: string
-  state?: AlertState
-  type: AlertType
-  fromName: string
-  fromAddress?: string
-  groupName?: string
-  groupId?: string
-  content: {
-    title: string
-    description: string
-    image?: string
-  }
-}
diff --git a/locales/en-US.js b/locales/en-US.js
index 376ee0538f..1a2b292380 100644
--- a/locales/en-US.js
+++ b/locales/en-US.js
@@ -712,6 +712,7 @@ export default {
     invalid_id: 'Invalid account ID',
     request_sent: 'Friend request successfully sent!',
     requests: 'Friend requests',
+    new_friend_request: 'New friend request from {user}',
     incoming: 'Requests',
     received: 'Received',
     sent: 'Sent',
diff --git a/store/ui/__snapshots__/getters.test.ts.snap b/store/ui/__snapshots__/getters.test.ts.snap
deleted file mode 100644
index 24b514e40d..0000000000
--- a/store/ui/__snapshots__/getters.test.ts.snap
+++ /dev/null
@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`init get all unseen notifications 1`] = `
-Array [
-  Object {
-    "_id": "01g2ya7w44h4c5mm4bgyedkrvy",
-    "_mod": 1652432302212590600,
-    "at": 1652432301322,
-    "content": Object {
-      "description": "New DM",
-      "title": "Notification",
-    },
-    "from": "Andre2",
-    "id": "62fceb8d-60a5-4434-92e8-c07f52f9e8e6",
-    "state": "UNREAD",
-    "type": "Direct Message",
-  },
-  Object {
-    "_id": "01g2y9d6499169rzs5etrff48w",
-    "_mod": 1652431427721842400,
-    "at": 1652431426842,
-    "content": Object {
-      "description": "New DM",
-      "title": "Notification",
-    },
-    "from": "Andre2",
-    "id": "69c1ad1d-37e9-4ff5-b929-de5509512a11",
-    "state": "UNREAD",
-    "type": "Direct Message",
-  },
-]
-`;
diff --git a/store/ui/getters.test.ts b/store/ui/getters.test.ts
index 953d5124d2..d8fb1459c0 100644
--- a/store/ui/getters.test.ts
+++ b/store/ui/getters.test.ts
@@ -310,161 +310,4 @@ describe('init', () => {
     ])
     expect(result).toMatchSnapshot()
   })
-
-  test('get all unseen notifications', () => {
-    const localState = {
-      contextMenuStatus: false,
-      showSidebarUsers: true,
-      showSidebar: true,
-      notifications: [
-        {
-          _id: '01g2y9d6499169rzs5etrff48w',
-          _mod: 1652431427721842400,
-          at: 1652431426842,
-          content: {
-            description: 'New DM',
-            title: 'Notification',
-          },
-          from: 'Andre2',
-          id: '69c1ad1d-37e9-4ff5-b929-de5509512a11',
-          state: 'UNREAD',
-          type: 'Direct Message',
-        },
-        {
-          _id: '01g2ya7w44h4c5mm4bgyedkrvy',
-          _mod: 1652432302212590600,
-          at: 1652432301322,
-          content: {
-            description: 'New DM',
-            title: 'Notification',
-          },
-          from: 'Andre2',
-          id: '62fceb8d-60a5-4434-92e8-c07f52f9e8e6',
-          state: 'UNREAD',
-          type: 'Direct Message',
-        },
-      ],
-      showSearchResult: false,
-      showSettings: false,
-      settingsSideBar: true,
-      settingsRoute: 'personalize',
-      quickProfile: false,
-      userProfile: {},
-      contextMenuValues: [],
-      contextMenuPosition: {
-        x: 0,
-        y: 0,
-      },
-      quickProfilePosition: {
-        x: 0,
-        y: 0,
-      },
-      modals: {
-        callToAction: false,
-        changelog: false,
-        createServer: false,
-        creategroup: false,
-        crop: false,
-        error: false,
-        glyph: false,
-      },
-      groupInvite: {
-        isOpen: false,
-        marketplace: false,
-        newfolder: false,
-        quickchat: false,
-        renameFile: false,
-        userProfile: false,
-        wallet: false,
-        walletMini: false,
-        glyphModalPackId: '',
-        chatbarContent: '',
-      },
-      replyChatbarMessage: {
-        from: '',
-        id: '',
-        payload: '',
-        chatbarFocus: false,
-        fullscreen: false,
-        showPinned: false,
-      },
-      enhancers: {
-        containerWidth: 0,
-        defaultHeight: '30rem',
-        defaultWidth: '24rem',
-        floating: false,
-        position: [0, 0],
-        route: 'emoji',
-        show: false,
-        messages: [],
-        unreadMessage: 0,
-        isScrollOver: false,
-        showOlderMessagesInfo: false,
-        isTyping: false,
-        isReacted: false,
-        activeChannel: undefined,
-      },
-      settingReaction: {
-        groupID: null,
-        messageID: null,
-        status: false,
-        hoveredGlyphInfo: undefined,
-      },
-      glyphMarketplaceView: {
-        shopId: null,
-        view: 'home',
-      },
-      editMessage: {
-        from: '',
-        id: '',
-        payload: '',
-        mostEmojiUsed: [],
-        recentGlyphs: [],
-      },
-      theme: {},
-      base: {
-        class: '',
-        name: 'default',
-        text: 'Default',
-        value: 'default',
-      },
-      flair: {
-        text: 'Satellite',
-        value: '#2761fd',
-        filesUploadStatus: '',
-        renameItem: undefined,
-        filePreview: undefined,
-        fileDownloadList: [],
-        chatImageOverlay: undefined,
-      },
-      fileSort: {
-        asc: true,
-        category: 'modified',
-      },
-    }
-    const result: any = inst.allUnseenNotifications(localState)
-    expect(result).toEqual([
-      {
-        _id: '01g2ya7w44h4c5mm4bgyedkrvy',
-        _mod: 1652432302212590600,
-        at: 1652432301322,
-        content: { description: 'New DM', title: 'Notification' },
-        from: 'Andre2',
-        id: '62fceb8d-60a5-4434-92e8-c07f52f9e8e6',
-        state: 'UNREAD',
-        type: 'Direct Message',
-      },
-      {
-        _id: '01g2y9d6499169rzs5etrff48w',
-        _mod: 1652431427721842400,
-        at: 1652431426842,
-        content: { description: 'New DM', title: 'Notification' },
-        from: 'Andre2',
-        id: '69c1ad1d-37e9-4ff5-b929-de5509512a11',
-        state: 'UNREAD',
-        type: 'Direct Message',
-      },
-    ])
-    expect(result).toMatchSnapshot()
-  })
 })
diff --git a/store/ui/mutations.test.ts b/store/ui/mutations.test.ts
index ca22dd2c97..b48f7b9d3e 100644
--- a/store/ui/mutations.test.ts
+++ b/store/ui/mutations.test.ts
@@ -468,11 +468,11 @@ describe('mutations', () => {
     expect(localizedState.enhancers).toBe(localizedState.enhancers)
     /*
      As paradoxical as it may seem here, this is very much normal. Consider the following ternary operation:
-    
+
      typeof options.floating !== 'undefined'
      ? options.floating
      : state.enhancers.floating,
-    
+
      If we do not pass an object (options) containing the floating property (options.floating),
      it will fall back to the existing value it has: which is what `state.enhancers.floating` has.
      Hence, what we're doing is checking if the state we are checking (state.enhancers) would be mutated
@@ -1291,871 +1291,4 @@ describe('mutations', () => {
       expect.arrayContaining(['not-in-array']),
     )
   })
-
-  test('send notification', () => {
-    const localizedState = {
-      contextMenuStatus: false,
-      showSidebar: true,
-      notifications: [
-        {
-          _id: '01g2y9d6499169rzs5etrff48w',
-          _mod: 1652431427721842400,
-          at: 1652431426842,
-          content: {
-            description: 'New DM',
-            title: 'Notification',
-          },
-          from: 'Andre2',
-          id: '69c1ad1d-37e9-4ff5-b929-de5509512a11',
-          state: 'UNREAD',
-          type: 'Direct Message',
-        },
-      ],
-      showSearchResult: false,
-      showSettings: false,
-      settingsSideBar: true,
-      settingsRoute: 'personalize',
-      quickProfile: false,
-      userProfile: {},
-      contextMenuValues: [],
-      contextMenuPosition: {
-        x: 0,
-        y: 0,
-      },
-      quickProfilePosition: {
-        x: 0,
-        y: 0,
-      },
-      modals: {
-        callToAction: false,
-        changelog: false,
-        createServer: false,
-        creategroup: false,
-        crop: false,
-        error: false,
-        glyph: false,
-      },
-      groupInvite: {
-        isOpen: false,
-        marketplace: false,
-        newfolder: false,
-        quickchat: false,
-        renameFile: false,
-        userProfile: false,
-        wallet: false,
-        walletMini: false,
-        glyphModalPackId: '',
-        chatbarContent: '',
-      },
-      replyChatbarMessage: {
-        from: '',
-        id: '',
-        payload: '',
-        chatbarFocus: false,
-        fullscreen: false,
-        showPinned: false,
-      },
-      enhancers: {
-        containerWidth: 0,
-        defaultHeight: '30rem',
-        defaultWidth: '24rem',
-        floating: false,
-        position: [0, 0],
-        route: 'emoji',
-        show: false,
-        messages: [],
-        unreadMessage: 0,
-        isScrollOver: false,
-        showOlderMessagesInfo: false,
-        isTyping: false,
-        isReacted: false,
-        activeChannel: undefined,
-      },
-      settingReaction: {
-        groupID: null,
-        messageID: null,
-        status: false,
-        hoveredGlyphInfo: undefined,
-      },
-      glyphMarketplaceView: {
-        shopId: null,
-        view: 'home',
-      },
-      editMessage: {
-        from: '',
-        id: '',
-        payload: '',
-        mostEmojiUsed: [],
-        recentGlyphs: [],
-      },
-      theme: {},
-      base: {
-        class: '',
-        name: 'default',
-        text: 'Default',
-        value: 'default',
-      },
-      flair: {
-        text: 'Satellite',
-        value: '#2761fd',
-        filesUploadStatus: '',
-        renameItem: undefined,
-        filePreview: undefined,
-        fileDownloadList: [],
-        chatImageOverlay: undefined,
-      },
-      fileSort: {
-        asc: true,
-        category: 'modified',
-      },
-    }
-    mutations.default.sendNotification(localizedState, {
-      _id: '01g2ya7w44h4c5mm4bgyedkrvy',
-      _mod: 1652432302212590600,
-      at: 1652432301322,
-      content: {
-        description: 'New DM',
-        title: 'Notification',
-      },
-      from: 'Andre2',
-      id: '62fceb8d-60a5-4434-92e8-c07f52f9e8e6',
-      state: 'UNREAD',
-      type: 'Direct Message',
-    })
-
-    expect(localizedState.notifications).toEqual([
-      // Sorted in reverse
-      {
-        _id: '01g2y9d6499169rzs5etrff48w',
-        _mod: 1652431427721842400,
-        at: 1652431426842,
-        content: { description: 'New DM', title: 'Notification' },
-        from: 'Andre2',
-        id: '69c1ad1d-37e9-4ff5-b929-de5509512a11',
-        state: 'UNREAD',
-        type: 'Direct Message',
-      },
-      {
-        _id: '01g2ya7w44h4c5mm4bgyedkrvy',
-        _mod: 1652432302212590600,
-        at: 1652432301322,
-        content: { description: 'New DM', title: 'Notification' },
-        from: 'Andre2',
-        id: '62fceb8d-60a5-4434-92e8-c07f52f9e8e6',
-        state: 'UNREAD',
-        type: 'Direct Message',
-      },
-    ])
-  })
-
-  test('set notification', () => {
-    const localizedState = {
-      contextMenuStatus: false,
-      showSidebar: true,
-      notifications: [],
-      showSearchResult: false,
-      showSettings: false,
-
-      settingsSideBar: true,
-      settingsRoute: 'personalize',
-      quickProfile: false,
-      userProfile: {},
-      contextMenuValues: [],
-      contextMenuPosition: {
-        x: 0,
-        y: 0,
-      },
-      quickProfilePosition: {
-        x: 0,
-        y: 0,
-      },
-      modals: {
-        callToAction: false,
-        changelog: false,
-        createServer: false,
-        creategroup: false,
-        crop: false,
-        error: false,
-        glyph: false,
-      },
-      groupInvite: {
-        isOpen: false,
-        marketplace: false,
-        newfolder: false,
-        quickchat: false,
-        renameFile: false,
-        userProfile: false,
-        wallet: false,
-        walletMini: false,
-        glyphModalPackId: '',
-        chatbarContent: '',
-      },
-      replyChatbarMessage: {
-        from: '',
-        id: '',
-        payload: '',
-        chatbarFocus: false,
-        fullscreen: false,
-        showPinned: false,
-      },
-      enhancers: {
-        containerWidth: 0,
-        defaultHeight: '30rem',
-        defaultWidth: '24rem',
-        floating: false,
-        position: [0, 0],
-        route: 'emoji',
-        show: false,
-        messages: [],
-        unreadMessage: 0,
-        isScrollOver: false,
-        showOlderMessagesInfo: false,
-        isTyping: false,
-        isReacted: false,
-        activeChannel: undefined,
-      },
-      settingReaction: {
-        groupID: null,
-        messageID: null,
-        status: false,
-        hoveredGlyphInfo: undefined,
-      },
-      glyphMarketplaceView: {
-        shopId: null,
-        view: 'home',
-      },
-      editMessage: {
-        from: '',
-        id: '',
-        payload: '',
-        mostEmojiUsed: [],
-        recentGlyphs: [],
-      },
-      theme: {},
-      base: {
-        class: '',
-        name: 'default',
-        text: 'Default',
-        value: 'default',
-      },
-      flair: {
-        text: 'Satellite',
-        value: '#2761fd',
-        filesUploadStatus: '',
-        renameItem: undefined,
-        filePreview: undefined,
-        fileDownloadList: [],
-        chatImageOverlay: undefined,
-      },
-      fileSort: {
-        asc: true,
-        category: 'modified',
-      },
-    }
-    mutations.default.setNotifications(localizedState, [
-      // Sorted in the same order
-      {
-        _id: '01g2y9d6499169rzs5etrff48w',
-        _mod: 1652431427721842400,
-        at: 1652431426842,
-        content: { description: 'New DM', title: 'Notification' },
-        from: 'Andre2',
-        id: '69c1ad1d-37e9-4ff5-b929-de5509512a11',
-        state: 'UNREAD',
-        type: 'Direct Message',
-      },
-      {
-        _id: '01g2ya7w44h4c5mm4bgyedkrvy',
-        _mod: 1652432302212590600,
-        at: 1652432301322,
-        content: { description: 'New DM', title: 'Notification' },
-        from: 'Andre2',
-        id: '62fceb8d-60a5-4434-92e8-c07f52f9e8e6',
-        state: 'UNREAD',
-        type: 'Direct Message',
-      },
-    ])
-    expect(localizedState.notifications).toEqual([
-      // Sorted in the same order
-      {
-        _id: '01g2y9d6499169rzs5etrff48w',
-        _mod: 1652431427721842400,
-        at: 1652431426842,
-        content: { description: 'New DM', title: 'Notification' },
-        from: 'Andre2',
-        id: '69c1ad1d-37e9-4ff5-b929-de5509512a11',
-        state: 'UNREAD',
-        type: 'Direct Message',
-      },
-      {
-        _id: '01g2ya7w44h4c5mm4bgyedkrvy',
-        _mod: 1652432302212590600,
-        at: 1652432301322,
-        content: { description: 'New DM', title: 'Notification' },
-        from: 'Andre2',
-        id: '62fceb8d-60a5-4434-92e8-c07f52f9e8e6',
-        state: 'UNREAD',
-        type: 'Direct Message',
-      },
-    ])
-  })
-
-  test('set all notification state to read', () => {
-    // previously they are unread
-    const localizedState = {
-      contextMenuStatus: false,
-      showSidebar: true,
-      notifications: [
-        {
-          _id: '01g2y9d6499169rzs5etrff48w',
-          _mod: 1652431427721842400,
-          at: 1652431426842,
-          content: { description: 'New DM', title: 'Notification' },
-          from: 'Andre2',
-          id: '69c1ad1d-37e9-4ff5-b929-de5509512a11',
-          state: 'UNREAD',
-          type: 'Direct Message',
-        },
-        {
-          _id: '01g2ya7w44h4c5mm4bgyedkrvy',
-          _mod: 1652432302212590600,
-          at: 1652432301322,
-          content: { description: 'New DM', title: 'Notification' },
-          from: 'Andre2',
-          id: '62fceb8d-60a5-4434-92e8-c07f52f9e8e6',
-          state: 'UNREAD',
-          type: 'Direct Message',
-        },
-      ],
-      showSearchResult: false,
-      showSettings: false,
-
-      settingsSideBar: true,
-      settingsRoute: 'personalize',
-      quickProfile: false,
-      userProfile: {},
-      contextMenuValues: [],
-      contextMenuPosition: {
-        x: 0,
-        y: 0,
-      },
-      quickProfilePosition: {
-        x: 0,
-        y: 0,
-      },
-      modals: {
-        callToAction: false,
-        changelog: false,
-        createServer: false,
-        creategroup: false,
-        crop: false,
-        error: false,
-        glyph: false,
-      },
-      groupInvite: {
-        isOpen: false,
-        marketplace: false,
-        newfolder: false,
-        quickchat: false,
-        renameFile: false,
-        userProfile: false,
-        wallet: false,
-        walletMini: false,
-        glyphModalPackId: '',
-        chatbarContent: '',
-      },
-      replyChatbarMessage: {
-        from: '',
-        id: '',
-        payload: '',
-        chatbarFocus: false,
-        fullscreen: false,
-        showPinned: false,
-      },
-      enhancers: {
-        containerWidth: 0,
-        defaultHeight: '30rem',
-        defaultWidth: '24rem',
-        floating: false,
-        position: [0, 0],
-        route: 'emoji',
-        show: false,
-        messages: [],
-        unreadMessage: 0,
-        isScrollOver: false,
-        showOlderMessagesInfo: false,
-        isTyping: false,
-        isReacted: false,
-        activeChannel: undefined,
-      },
-      settingReaction: {
-        groupID: null,
-        messageID: null,
-        status: false,
-        hoveredGlyphInfo: undefined,
-      },
-      glyphMarketplaceView: {
-        shopId: null,
-        view: 'home',
-      },
-      editMessage: {
-        from: '',
-        id: '',
-        payload: '',
-        mostEmojiUsed: [],
-        recentGlyphs: [],
-      },
-      theme: {},
-      base: {
-        class: '',
-        name: 'default',
-        text: 'Default',
-        value: 'default',
-      },
-      flair: {
-        text: 'Satellite',
-        value: '#2761fd',
-        filesUploadStatus: '',
-        renameItem: undefined,
-        filePreview: undefined,
-        fileDownloadList: [],
-        chatImageOverlay: undefined,
-      },
-      fileSort: {
-        asc: true,
-        category: 'modified',
-      },
-    }
-    mutations.default.clearAllNotifications(localizedState)
-    expect(localizedState.notifications).toEqual([
-      {
-        _id: '01g2y9d6499169rzs5etrff48w',
-        _mod: 1652431427721842400,
-        at: 1652431426842,
-        content: { description: 'New DM', title: 'Notification' },
-        from: 'Andre2',
-        id: '69c1ad1d-37e9-4ff5-b929-de5509512a11',
-        state: 'READ',
-        type: 'Direct Message',
-      },
-      {
-        _id: '01g2ya7w44h4c5mm4bgyedkrvy',
-        _mod: 1652432302212590600,
-        at: 1652432301322,
-        content: { description: 'New DM', title: 'Notification' },
-        from: 'Andre2',
-        id: '62fceb8d-60a5-4434-92e8-c07f52f9e8e6',
-        state: 'READ',
-        type: 'Direct Message',
-      },
-    ])
-  })
-
-  test('update group notifications', () => {
-    // previously they are unread
-    const localizedState = {
-      contextMenuStatus: false,
-      showSidebar: true,
-      notifications: [
-        {
-          _id: '01g2y9d6499169rzs5etrff48w',
-          _mod: 1652431427721842400,
-          at: 1652431426842,
-          content: { description: 'New DM', title: 'Notification' },
-          from: 'Andre2',
-          id: '69c1ad1d-37e9-4ff5-b929-de5509512a11',
-          state: 'UNREAD',
-          type: 'Direct Message',
-        },
-        {
-          _id: '01g2ya7w44h4c5mm4bgyedkrvy',
-          _mod: 1652432302212590600,
-          at: 1652432301322,
-          content: { description: 'New DM', title: 'Notification' },
-          from: 'Andre2',
-          id: '62fceb8d-60a5-4434-92e8-c07f52f9e8e6',
-          state: 'UNREAD',
-          type: 'Group Message',
-        },
-      ],
-      showSearchResult: false,
-      showSettings: false,
-
-      settingsSideBar: true,
-      settingsRoute: 'personalize',
-      quickProfile: false,
-      userProfile: {},
-      contextMenuValues: [],
-      contextMenuPosition: {
-        x: 0,
-        y: 0,
-      },
-      quickProfilePosition: {
-        x: 0,
-        y: 0,
-      },
-      modals: {
-        callToAction: false,
-        changelog: false,
-        createServer: false,
-        creategroup: false,
-        crop: false,
-        error: false,
-        glyph: false,
-      },
-      groupInvite: {
-        isOpen: false,
-        marketplace: false,
-        newfolder: false,
-        quickchat: false,
-        renameFile: false,
-        userProfile: false,
-        wallet: false,
-        walletMini: false,
-        glyphModalPackId: '',
-        chatbarContent: '',
-      },
-      replyChatbarMessage: {
-        from: '',
-        id: '',
-        payload: '',
-        chatbarFocus: false,
-        fullscreen: false,
-        showPinned: false,
-      },
-      enhancers: {
-        containerWidth: 0,
-        defaultHeight: '30rem',
-        defaultWidth: '24rem',
-        floating: false,
-        position: [0, 0],
-        route: 'emoji',
-        show: false,
-        messages: [],
-        unreadMessage: 0,
-        isScrollOver: false,
-        showOlderMessagesInfo: false,
-        isTyping: false,
-        isReacted: false,
-        activeChannel: undefined,
-      },
-      settingReaction: {
-        groupID: null,
-        messageID: null,
-        status: false,
-        hoveredGlyphInfo: undefined,
-      },
-      glyphMarketplaceView: {
-        shopId: null,
-        view: 'home',
-      },
-      editMessage: {
-        from: '',
-        id: '',
-        payload: '',
-        mostEmojiUsed: [],
-        recentGlyphs: [],
-      },
-      theme: {},
-      base: {
-        class: '',
-        name: 'default',
-        text: 'Default',
-        value: 'default',
-      },
-      flair: {
-        text: 'Satellite',
-        value: '#2761fd',
-        filesUploadStatus: '',
-        renameItem: undefined,
-        filePreview: undefined,
-        fileDownloadList: [],
-        chatImageOverlay: undefined,
-      },
-      fileSort: {
-        asc: true,
-        category: 'modified',
-      },
-    }
-    mutations.default.updateGroupNotifications(localizedState)
-    expect(localizedState.notifications).toEqual([
-      {
-        _id: '01g2y9d6499169rzs5etrff48w',
-        _mod: 1652431427721842400,
-        at: 1652431426842,
-        content: {
-          description: 'New DM',
-          title: 'Notification',
-        },
-        from: 'Andre2',
-        id: '69c1ad1d-37e9-4ff5-b929-de5509512a11',
-        state: 'UNREAD',
-        type: 'Direct Message',
-      },
-    ])
-  })
-
-  test('remove specified notification', () => {
-    // previously they are unread
-    const localizedState = {
-      contextMenuStatus: false,
-      showSidebar: true,
-      notifications: [
-        {
-          _id: '01g2y9d6499169rzs5etrff48w',
-          _mod: 1652431427721842400,
-          at: 1652431426842,
-          content: { description: 'New DM', title: 'Notification' },
-          from: 'Andre2',
-          id: '69c1ad1d-37e9-4ff5-b929-de5509512a11',
-          state: 'UNREAD',
-          type: 'Direct Message',
-        },
-        {
-          _id: '01g2ya7w44h4c5mm4bgyedkrvy',
-          _mod: 1652432302212590600,
-          at: 1652432301322,
-          content: { description: 'New DM', title: 'Notification' },
-          from: 'Andre2',
-          id: '62fceb8d-60a5-4434-92e8-c07f52f9e8e6',
-          state: 'UNREAD',
-          type: 'Direct Message',
-        },
-      ],
-      showSearchResult: false,
-      showSettings: false,
-
-      settingsSideBar: true,
-      settingsRoute: 'personalize',
-      quickProfile: false,
-      userProfile: {},
-      contextMenuValues: [],
-      contextMenuPosition: {
-        x: 0,
-        y: 0,
-      },
-      quickProfilePosition: {
-        x: 0,
-        y: 0,
-      },
-      modals: {
-        callToAction: false,
-        changelog: false,
-        createServer: false,
-        creategroup: false,
-        crop: false,
-        error: false,
-        glyph: false,
-      },
-      groupInvite: {
-        isOpen: false,
-        marketplace: false,
-        newfolder: false,
-        quickchat: false,
-        renameFile: false,
-        userProfile: false,
-        wallet: false,
-        walletMini: false,
-        glyphModalPackId: '',
-        chatbarContent: '',
-      },
-      replyChatbarMessage: {
-        from: '',
-        id: '',
-        payload: '',
-        chatbarFocus: false,
-        fullscreen: false,
-        showPinned: false,
-      },
-      enhancers: {
-        containerWidth: 0,
-        defaultHeight: '30rem',
-        defaultWidth: '24rem',
-        floating: false,
-        position: [0, 0],
-        route: 'emoji',
-        show: false,
-        messages: [],
-        unreadMessage: 0,
-        isScrollOver: false,
-        showOlderMessagesInfo: false,
-        isTyping: false,
-        isReacted: false,
-        activeChannel: undefined,
-      },
-      settingReaction: {
-        groupID: null,
-        messageID: null,
-        status: false,
-        hoveredGlyphInfo: undefined,
-      },
-      glyphMarketplaceView: {
-        shopId: null,
-        view: 'home',
-      },
-      editMessage: {
-        from: '',
-        id: '',
-        payload: '',
-        mostEmojiUsed: [],
-        recentGlyphs: [],
-      },
-      theme: {},
-      base: {
-        class: '',
-        name: 'default',
-        text: 'Default',
-        value: 'default',
-      },
-      flair: {
-        text: 'Satellite',
-        value: '#2761fd',
-        filesUploadStatus: '',
-        renameItem: undefined,
-        filePreview: undefined,
-        fileDownloadList: [],
-        chatImageOverlay: undefined,
-      },
-      fileSort: {
-        asc: true,
-        category: 'modified',
-      },
-    }
-    mutations.default.removeNotification(
-      localizedState,
-      '62fceb8d-60a5-4434-92e8-c07f52f9e8e6', // Using id, not _id.
-    )
-    expect(localizedState.notifications).toEqual([
-      {
-        _id: '01g2y9d6499169rzs5etrff48w',
-        _mod: 1652431427721842400,
-        at: 1652431426842,
-        content: { description: 'New DM', title: 'Notification' },
-        from: 'Andre2',
-        id: '69c1ad1d-37e9-4ff5-b929-de5509512a11',
-        state: 'UNREAD',
-        type: 'Direct Message',
-      }, // Just one
-    ])
-  })
-
-  test('get notification that have been read (notificationSeen)', () => {
-    const localizedState = {
-      contextMenuStatus: false,
-      showSidebar: true,
-      notifications: [
-        {
-          _id: '01g2y9d6499169rzs5etrff48w',
-          _mod: 1652431427721842400,
-          at: 1652431426842,
-          content: { description: 'New DM', title: 'Notification' },
-          from: 'Andre2',
-          id: '69c1ad1d-37e9-4ff5-b929-de5509512a11',
-          state: 'UNREAD',
-          type: 'Direct Message',
-        },
-        {
-          _id: '01g2ya7w44h4c5mm4bgyedkrvy',
-          _mod: 1652432302212590600,
-          at: 1652432301322,
-          content: { description: 'New DM', title: 'Notification' },
-          from: 'Andre2',
-          id: '62fceb8d-60a5-4434-92e8-c07f52f9e8e6',
-          state: 'UNREAD',
-          type: 'Direct Message',
-        },
-      ],
-      showSearchResult: false,
-      showSettings: false,
-
-      settingsSideBar: true,
-      settingsRoute: 'personalize',
-      quickProfile: false,
-      userProfile: {},
-      contextMenuValues: [],
-      contextMenuPosition: {
-        x: 0,
-        y: 0,
-      },
-      quickProfilePosition: {
-        x: 0,
-        y: 0,
-      },
-      modals: {
-        callToAction: false,
-        changelog: false,
-        createServer: false,
-        creategroup: false,
-        crop: false,
-        error: false,
-        glyph: false,
-      },
-      groupInvite: {
-        isOpen: false,
-        marketplace: false,
-        newfolder: false,
-        quickchat: false,
-        renameFile: false,
-        userProfile: false,
-        wallet: false,
-        walletMini: false,
-        glyphModalPackId: '',
-        chatbarContent: '',
-      },
-      replyChatbarMessage: undefined,
-      enhancers: {
-        containerWidth: 0,
-        defaultHeight: '30rem',
-        defaultWidth: '24rem',
-        floating: false,
-        position: [0, 0],
-        route: 'emoji',
-        show: false,
-        messages: [],
-        unreadMessage: 0,
-        isScrollOver: false,
-        showOlderMessagesInfo: false,
-        isTyping: false,
-        isReacted: false,
-        activeChannel: undefined,
-      },
-      settingReaction: {
-        groupID: null,
-        messageID: null,
-        status: false,
-        hoveredGlyphInfo: undefined,
-      },
-      glyphMarketplaceView: {
-        shopId: null,
-        view: 'home',
-      },
-      editMessage: {
-        from: '',
-        id: '',
-        payload: '',
-        mostEmojiUsed: [],
-        recentGlyphs: [],
-      },
-      theme: {},
-      base: {
-        class: '',
-        name: 'default',
-        text: 'Default',
-        value: 'default',
-      },
-      flair: {
-        text: 'Satellite',
-        value: '#2761fd',
-        filesUploadStatus: '',
-        renameItem: undefined,
-        filePreview: undefined,
-        fileDownloadList: [],
-        chatImageOverlay: undefined,
-      },
-      fileSort: {
-        asc: true,
-        category: 'modified',
-      },
-    }
-  })
 })
diff --git a/store/ui/mutations.ts b/store/ui/mutations.ts
index 2b8ef6e14f..46968f4fd9 100644
--- a/store/ui/mutations.ts
+++ b/store/ui/mutations.ts
@@ -9,7 +9,6 @@ import {
 import { MessageGroup } from '~/types/messaging'
 import { Channel } from '~/types/ui/server'
 import { FileMessage } from '~/types/textile/mailbox'
-import { Alert, AlertState, AlertType } from '~/libraries/ui/Alerts'
 
 export default {
   togglePinned(state: UIState, visible: boolean) {
@@ -315,22 +314,6 @@ export default {
       count: 1,
     })
   },
-  sendNotification(state: UIState, notification: Alert) {
-    state.notifications.push(notification)
-  },
-  setNotifications(state: UIState, notifications: Array<Alert>) {
-    state.notifications = notifications
-  },
-  clearAllNotifications(state: UIState) {
-    state.notifications.forEach((notification) => {
-      notification.state = AlertState.READ
-    })
-  },
-  updateGroupNotifications(state: UIState) {
-    state.notifications = state.notifications.filter(
-      (item) => item.type !== AlertType.GROUP_MESSAGE,
-    )
-  },
   removeNotification(state: UIState, id: string) {
     state.notifications = state.notifications.filter((item) => item.id !== id)
   },
diff --git a/utilities/Notifications.ts b/utilities/Notifications.ts
index ee6373c03c..02d31ba950 100644
--- a/utilities/Notifications.ts
+++ b/utilities/Notifications.ts
@@ -133,7 +133,7 @@ export const Notifications = class Notifications {
       this.currentPlatform === PlatformTypeEnum.ELECTRON
     ) {
       // browser notification api
-      await new Notification(`${type} ${titleText}`, {
+      await new Notification(`${titleText}`, {
         tag: String(new Date().getTime()),
         body: message,
         icon: `${this.$Config.ipfs.gateway}${image}`,