feat(notifications): initial textile, store notification set up

components/views/navigation/toolbar/Toolbar.html

@@ -25,23 +25,26 @@
     />
   </div>
   <div class="controls">
-    <UiComingSoon
-      v-if="!$device.isMobile"
-      :tooltipText="$t('coming_soon.alerts')"
-      :tooltipPosition="'bottom'"
-      data-cy="toolbar-alerts"
-    >
       <div
-        class="has-tooltip has-tooltip-bottom has-tooltip-primary has-tooltip-hidden-touch"
-        @click="$data.showAlerts = !$data.showAlerts"
+        class="toggle-alerts has-tooltip has-tooltip-bottom has-tooltip-primary has-tooltip-hidden-touch"
+        @click='toggleAlerts'
       >
+
+        <UiCircle
+          v-if='allUnseenNotifications.length'
+          class='notification-alert'
+          :size='15'
+          color='red'
+          type='icon'
+          :data='allUnseenNotifications.length'>
+          {{allUnseenNotifications.length}}
+        </UiCircle>
         <bell-icon
           size="1x"
           :class="`control-icon ${showAlerts ? 'primary' : ''}`"
-          color="grey"
+          color="primary"
         />
       </div>
-    </UiComingSoon>
 
     <UiFloatingContainer
       v-if="showAlerts"
@@ -53,7 +56,9 @@
       :customStyles="$device.isMobile"
       :toggleMethod="() => $data.showAlerts = false"
     >
-      <ToolbarAlerts />
+      <ToolbarAlerts
+        :notifications='allUnseenNotifications'
+      />
     </UiFloatingContainer>
     <div
       :class="`has-tooltip has-tooltip-bottom has-tooltip-primary has-tooltip-hidden-touch control-button

components/views/navigation/toolbar/Toolbar.less

@@ -13,6 +13,16 @@
     margin: 0 @light-spacing;
   }
 
+  .notification-alert {
+    position: fixed;
+    z-index: 1;
+  }
+
+  .toggle-alerts {
+    cursor: pointer;
+    user-select: none;
+  }
+
   .controls {
     &:extend(.background-semitransparent-light);
     &:extend(.round-corners);
@@ -95,6 +105,7 @@
   }
 
   .alerts-floating-container {
+    z-index: 100;
     &.side-open {
       margin-right: 1.2rem;
     }

components/views/navigation/toolbar/Toolbar.vue

@@ -24,6 +24,7 @@ import { SearchQueryItem } from '~/types/search/search'
 import { ModalWindows } from '~/store/ui/types'
 import { TrackKind } from '~/libraries/WebRTC/types'
 import { Friend } from '~/types/ui/friends'
+import { RootState } from '~/types/store/store'
 
 export default Vue.extend({
   components: {
@@ -65,20 +66,24 @@ export default Vue.extend({
     }
   },
   computed: {
-    ...mapState([
-      'ui',
-      'audio',
-      'video',
-      'webrtc',
-      'conversation',
-      'groups',
-      'friends',
-    ]),
-    ...mapGetters('ui', ['showSidebar']),
-    selectedGroup() {
+    ...mapState({
+      ui: (state) => (state as RootState).ui,
+      audio: (state) => (state as RootState).audio,
+      video: (state) => (state as RootState).video,
+      webrtc: (state) => (state as RootState).webrtc,
+      conversation: (state) => (state as RootState).conversation,
+      groups: (state) => (state as RootState).groups,
+      friends: (state) => (state as RootState).friends,
+    }),
+    ...mapGetters('ui', ['showSidebar', 'allUnseenNotifications']),
+    selectedGroup(): string {
       return this.$route.params.id // TODO: change with groupid - AP-400
     },
-    recipient() {
+    recipient():
+      | Friend
+      | { textilePubkey: string; type: string }
+      | null
+      | undefined {
       // It should not happen that someone tries to write to himself, but we should check
       // anyway
       const isMe =
@@ -101,10 +106,10 @@ export default Vue.extend({
       )
     },
     showSearchResult: {
-      set(state) {
+      set(state): void {
         this.$store.commit('ui/showSearchResult', state)
       },
-      get() {
+      get(): boolean {
         return this.ui.showSearchResult
       },
     },
@@ -137,6 +142,9 @@ export default Vue.extend({
         state: { isOpen: true, group },
       })
     },
+    toggleAlerts() {
+      this.showAlerts = !this.showAlerts
+    },
     isGroup(thing: any) {
       return thing?.type && thing?.type === 'group'
     },
@@ -176,7 +184,7 @@ export default Vue.extend({
      * @description This updates the state to show/hide the specific modal you pass in
      * @example toggleModal(ModalWindows.WALLET)
      */
-    toggleModal(modalName: keyof ModalWindows): void {
+    toggleModal(modalName: keyof ModalWindows) {
       this.$store.commit('ui/toggleModal', {
         name: modalName,
         state: !this.ui.modals[modalName],

components/views/navigation/toolbar/alerts/Alerts.html

@@ -1,13 +1,19 @@
 <div id="alerts">
+  <InteractablesButton
+  v-if='allUnseenNotifications.length'
+  size='small'
+  :action='clearNotifications'
+  style='margin-bottom:5px'
+  type='primary'
+  :text="$t('ui.clear_all')"/>
   <ToolbarAlertsAlert
-    v-if="alerts.length !== 0"
-    v-for="alert in alerts"
-    :alert="alert"
-    :key="alert.id"
-    @sync="syncAlerts"
+    v-for="notification in notifications"
+    v-if="notifications.length && notification.state !== AlertState.READ"
+    :alert="notification"
+    :key="notification.id"
   />
   <TypographySubtitle
-    v-if="!alerts.length"
+    v-if="!notifications.length "
     :size="6"
     :text="$t('alerts.caught_up')"
   />

components/views/navigation/toolbar/alerts/Alerts.vue

@@ -2,16 +2,26 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
+import { mapGetters, mapState } from 'vuex'
+import { Alert, AlertState } from '~/libraries/ui/Alerts'
+import { RootState } from '~/types/store/store'
 
 export default Vue.extend({
-  data() {
-    return {
-      alerts: this.$Alerts.all,
-    }
+  props: {
+    notifications: {
+      type: Array as PropType<Array<Alert>>,
+      default: () => [],
+      required: false,
+    },
+  },
+  computed: {
+    ...mapState({ ui: (state) => (state as RootState).ui }),
+    ...mapGetters('ui', ['allUnseenNotifications']),
+    AlertState: () => AlertState,
   },
   methods: {
-    syncAlerts(alerts) {
-      this.$data.alerts = alerts
+    clearNotifications() {
+      this.$store.commit('ui/clearAllNotifications')
     },
   },
 })

components/views/navigation/toolbar/alerts/alert/Alert.html

@@ -1,21 +1,27 @@
-<div :class="`alert ${localAlert.state} ${hidden ? 'hidden' : 'shown'}`">
+<div :class="`alert  ${hidden ? 'hidden' : 'shown'}`">
   <div>
     <!--Optional alert image -->
-    <img v-if="localAlert.content.image" :src="localAlert.content.image" />
+    <img v-if="alert.content.image" :src="alert.content.image" />
+    <UiCircle
+      v-if="!alert.content.image"
+      type='random'
+      data-cy="circle-without-picture"
+    />
   </div>
-  <div>
+  <div class='info-holder'>
     <div class="a-heading">
       <!--Alert title-->
-      <TypographySubtitle :size="6" :text="localAlert.content.title" />
+      <TypographySubtitle :size="6" :text="alert.content.title" />
       <!--Alert timestamp-->
       <TypographyText
-        :text="$dayjs(localAlert.at).fromNow()"
+        :text="$dayjs(alert.at).fromNow()"
         class="timestamp"
       />
     </div>
     <!--Alert description-->
     <div class="description">
-      <TypographyText :text="localAlert.content.description" />
+      <TypographyText
+        :text="setTranslateText" />
     </div>
   </div>
   <InteractablesClose :action="dismiss" />

components/views/navigation/toolbar/alerts/alert/Alert.less

@@ -17,6 +17,7 @@
 .alert {
   transition: all @animation-speed ease;
   opacity: 1;
+  width: 95%;
   display: inline-flex;
   flex-direction: row;
   &:extend(.blur);
@@ -25,7 +26,7 @@
   overflow: hidden;
   padding: @light-spacing (@normal-spacing + @light-spacing) @light-spacing
     @light-spacing;
-  justify-content: flex-start;
+  justify-content: center;
   align-content: flex-start;
   margin-bottom: @light-spacing;
 
@@ -43,6 +44,11 @@
     vertical-align: top;
   }
 
+  .info-holder {
+    width: 100%;
+    padding-left: 10px;
+  }
+
   .a-heading {
     display: flex;
     &:extend(.full-width);

components/views/navigation/toolbar/alerts/alert/Alert.vue

@@ -3,35 +3,42 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 
-import { Alert, AlertState } from '~/libraries/ui/Alerts'
+import { mapState } from 'vuex'
+import VueI18n from 'vue-i18n'
+import { Alert, AlertType } from '~/libraries/ui/Alerts'
+import { RootState } from '~/types/store/store'
 
 export default Vue.extend({
   props: {
     alert: {
       type: Object as PropType<Alert>,
-      required: true,
-      default: {},
+      required: false,
+      default: () => {},
     },
   },
   data() {
     return {
-      localAlert: this.$props.alert,
       hidden: false,
     }
   },
-  mounted() {
-    if (this.$props.alert.state !== AlertState.READ) {
-      const updated = this.$Alerts.mark(AlertState.READ, this.$props.alert.id)
-      this.$data.localAlert = updated
-    }
+  computed: {
+    ...mapState({ ui: (state) => (state as RootState).ui }),
+    setTranslateText(): VueI18n.TranslateResult | undefined {
+      switch (this.alert?.type) {
+        case AlertType.DIRECT_MESSAGE: {
+          return this.$t('messaging.user_sent.user', {
+            user: this.alert.from,
+            msgType: this.alert.type,
+          })
+        }
+      }
+      return this.$t('user_sent_something.user')
+    },
   },
   methods: {
     dismiss() {
-      this.$Alerts.delete(this.$props.alert.id)
+      this.$store.dispatch('ui/removeSeenNotification', this.alert.id)
       this.$data.hidden = true
-      setTimeout(() => {
-        this.$emit('sync', this.$Alerts.all)
-      }, 250)
     },
   },
 })

libraries/Enums/enums.ts

@@ -15,6 +15,7 @@ import {
   FileIconsEnum,
   FileAsideRouteEnum,
 } from '~/libraries/Enums/types/files'
+import { NotificationTypes } from '~/libraries/Enums/types/notification-types'
 
 export {
   KeybindingEnum,
@@ -29,6 +30,7 @@ export {
   AddFriendEnum,
   SocialAccountTypesEnum,
   PlatformTypeEnum,
+  NotificationTypes,
   FileSortEnum,
   FileIconsEnum,
   FileAsideRouteEnum,

libraries/Enums/types/notification-types.ts

@@ -0,0 +1,10 @@
+export enum NotificationTypes {
+  DIRECT_MESSAGE = 'directMessage',
+  GROUP_MESSAGE = 'groupMessage',
+  MENTIONS_NOTIFICATION = 'mentionNotification',
+  ACCOUNT_NOTIFICATION = 'accountNotification',
+  APPLICATION_NOTIFICATION = 'applicationNotification',
+  MISSED_CALL = 'missedCall',
+  FRIEND_REQUEST = 'friendRequest',
+  MISCELLANEOUS = 'miscellaneous',
+}