From b319e0deb09b50dc9847a4751ec67fc611176795 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 16 Jul 2024 15:08:33 +0300
Subject: [PATCH 01/26] add uxStore and rightDrawer boilerplate

---
 frontend/src/store/index.js |  4 +++-
 frontend/src/store/ux.js    | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/store/ux.js

diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 2893166bac..36ce0466a6 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -3,11 +3,13 @@ import { createStore } from 'vuex'
 import account from './account.js'
 import storagePlugin from './plugins/storage.plugin.js'
 import product from './product.js'
+import ux from './ux.js'
 
 export default createStore({
     modules: {
         account,
-        product
+        product,
+        ux
     },
     plugins: [storagePlugin]
 })
diff --git a/frontend/src/store/ux.js b/frontend/src/store/ux.js
new file mode 100644
index 0000000000..ec80111b4f
--- /dev/null
+++ b/frontend/src/store/ux.js
@@ -0,0 +1,36 @@
+const state = () => ({
+    rightDrawer: {
+        state: false,
+        component: null
+    }
+})
+
+const getters = {}
+
+const mutations = {
+    openRightDrawer (state, { component }) {
+        state.rightDrawer.state = true
+        state.rightDrawer.component = component
+    },
+    closeRightDrawer (state) {
+        state.rightDrawer.state = false
+        state.rightDrawer.component = null
+    }
+}
+
+const actions = {
+    openRightDrawer (state, { component }) {
+        state.commit('openRightDrawer', { component })
+    },
+    closeRightDrawer (state) {
+        state.commit('closeRightDrawer')
+    }
+}
+
+export default {
+    namespaced: true,
+    state,
+    getters,
+    mutations,
+    actions
+}

From 424ba9fee378c89cae3f2dd77afdad29b5ef3fbe Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 16 Jul 2024 15:58:22 +0300
Subject: [PATCH 02/26] add a notification button to the top nav

---
 .../src/components/NotificationsButton.vue    | 49 +++++++++++++++++++
 frontend/src/components/PageHeader.vue        |  6 ++-
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/NotificationsButton.vue

diff --git a/frontend/src/components/NotificationsButton.vue b/frontend/src/components/NotificationsButton.vue
new file mode 100644
index 0000000000..3e31434c0a
--- /dev/null
+++ b/frontend/src/components/NotificationsButton.vue
@@ -0,0 +1,49 @@
+<template>
+    <div class="notifications-button-wrapper">
+        <button class="notifications-button" @click="onClick">
+            <MailIcon />
+        </button>
+    </div>
+</template>
+
+<script>
+import { MailIcon } from '@heroicons/vue/solid'
+
+export default {
+    name: 'NotificationsButton',
+    components: { MailIcon },
+    methods: {
+        onClick () {
+            console.log(123)
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.notifications-button-wrapper {
+
+  .notifications-button {
+    border-left: 1px solid $ff-grey-500;
+    color: white;
+    display: flex;
+    align-items: center;
+    flex: 1;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+
+    &:hover {
+      background-color: $ff-grey-700;
+    }
+
+    svg {
+      flex: 1;
+      width: 35px;
+      height: 35px;
+    }
+  }
+
+}
+</style>
diff --git a/frontend/src/components/PageHeader.vue b/frontend/src/components/PageHeader.vue
index d4373bfcf3..5ff1795cce 100644
--- a/frontend/src/components/PageHeader.vue
+++ b/frontend/src/components/PageHeader.vue
@@ -38,6 +38,7 @@
         <div class="hidden lg:flex">
             <ff-team-selection data-action="team-selection" />
             <!-- Desktop: User Options -->
+            <NotificationsButton />
             <ff-dropdown v-if="user" class="ff-navigation ff-user-options" options-align="right" data-action="user-options" data-cy="user-options">
                 <template #placeholder>
                     <div class="ff-user">
@@ -63,6 +64,8 @@ import { mapGetters, mapState } from 'vuex'
 import navigationMixin from '../mixins/Navigation.js'
 
 import NavItem from './NavItem.vue'
+import NotificationsButton from './NotificationsButton.vue'
+
 import TeamSelection from './TeamSelection.vue'
 
 export default {
@@ -129,7 +132,8 @@ export default {
     components: {
         NavItem,
         'ff-team-selection': TeamSelection,
-        MenuIcon
+        MenuIcon,
+        NotificationsButton
     },
     data () {
         return {

From 286495de2ef61a4aa2f638bb2c3f51be1dfd986d Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 16 Jul 2024 16:37:24 +0300
Subject: [PATCH 03/26] Adding rightDrawer template & basic functionality

---
 .../src/components/drawers/RightDrawer.vue    | 37 +++++++++++++++++++
 frontend/src/layouts/Platform.vue             |  3 ++
 2 files changed, 40 insertions(+)
 create mode 100644 frontend/src/components/drawers/RightDrawer.vue

diff --git a/frontend/src/components/drawers/RightDrawer.vue b/frontend/src/components/drawers/RightDrawer.vue
new file mode 100644
index 0000000000..33a050dfcb
--- /dev/null
+++ b/frontend/src/components/drawers/RightDrawer.vue
@@ -0,0 +1,37 @@
+<template>
+    <div v-click-outside="closeRightDrawer" class="right-drawer" :class="{open: rightDrawer.state} ">
+        <component :is="rightDrawer.component" v-if="rightDrawer.component" />
+    </div>
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex'
+
+export default {
+    name: 'RightDrawer',
+    computed: {
+        ...mapState('ux', ['rightDrawer'])
+    },
+    methods: {
+        ...mapActions('ux', ['closeRightDrawer'])
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.right-drawer {
+  position: absolute;
+  border-left: 1px solid $ff-grey-300;
+  background: white;
+  height: 100%;
+  width: 0;
+  right: -1000px;
+  z-index: 500;
+  transition: ease-in-out .3s;
+
+  &.open {
+    right: 0;
+    width: 40%;
+  }
+}
+</style>
diff --git a/frontend/src/layouts/Platform.vue b/frontend/src/layouts/Platform.vue
index 9bc3b4240b..6aeb30b12b 100644
--- a/frontend/src/layouts/Platform.vue
+++ b/frontend/src/layouts/Platform.vue
@@ -7,6 +7,7 @@
             </div>
             <div class="ff-view">
                 <div id="platform-banner" />
+                <RightDrawer />
                 <slot />
             </div>
             <TransitionGroup class="ff-notifications" name="notifications-list" tag="div">
@@ -36,12 +37,14 @@ import { mapState } from 'vuex'
 
 import InterviewPopup from '../components/InterviewPopup.vue'
 import PageHeader from '../components/PageHeader.vue'
+import RightDrawer from '../components/drawers/RightDrawer.vue'
 import AlertsMixin from '../mixins/Alerts.js'
 import DialogMixin from '../mixins/Dialog.js'
 
 export default {
     name: 'ff-layout-platform',
     components: {
+        RightDrawer,
         PageHeader,
         InterviewPopup
     },

From 5ec2d695a547da5bddc736590039e0af7f817f07 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 16 Jul 2024 16:38:00 +0300
Subject: [PATCH 04/26] add a notification drawer component and open the
 notification drawer when notification button is clicked

---
 frontend/src/components/NotificationsButton.vue     | 12 +++++++++++-
 .../drawers/notifications/NotificationsDrawer.vue   | 13 +++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/drawers/notifications/NotificationsDrawer.vue

diff --git a/frontend/src/components/NotificationsButton.vue b/frontend/src/components/NotificationsButton.vue
index 3e31434c0a..9ede6da167 100644
--- a/frontend/src/components/NotificationsButton.vue
+++ b/frontend/src/components/NotificationsButton.vue
@@ -8,13 +8,23 @@
 
 <script>
 import { MailIcon } from '@heroicons/vue/solid'
+import { markRaw } from 'vue'
+import { mapActions, mapState } from 'vuex'
+
+import NotificationsDrawer from './drawers/notifications/NotificationsDrawer.vue'
 
 export default {
     name: 'NotificationsButton',
     components: { MailIcon },
+    computed: {
+        ...mapState('ux', ['rightDrawer'])
+    },
     methods: {
+        ...mapActions('ux', ['openRightDrawer', 'closeRightDrawer']),
         onClick () {
-            console.log(123)
+            if (this.rightDrawer.state) {
+                this.closeRightDrawer()
+            } else this.openRightDrawer({ component: markRaw(NotificationsDrawer) })
         }
     }
 }
diff --git a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
new file mode 100644
index 0000000000..88435d6ca1
--- /dev/null
+++ b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
@@ -0,0 +1,13 @@
+<template>
+    <h1>Hello Notifications!</h1>
+</template>
+
+<script>
+export default {
+    name: 'NotificationsDrawer'
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

From ad52602ba04c8425188ecf7d347f43d592403d4b Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 16 Jul 2024 16:49:17 +0300
Subject: [PATCH 05/26] add notification pill ot the navbar notification button

---
 frontend/src/components/NotificationsButton.vue | 16 ++++++++++++++--
 frontend/src/store/account.js                   |  3 ++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/NotificationsButton.vue b/frontend/src/components/NotificationsButton.vue
index 9ede6da167..e68d430a75 100644
--- a/frontend/src/components/NotificationsButton.vue
+++ b/frontend/src/components/NotificationsButton.vue
@@ -2,6 +2,7 @@
     <div class="notifications-button-wrapper">
         <button class="notifications-button" @click="onClick">
             <MailIcon />
+            <ff-notification-pill v-if="hasNotifications" data-el="notification-pill" class="ml-3" :count="notifications.total" />
         </button>
     </div>
 </template>
@@ -9,7 +10,7 @@
 <script>
 import { MailIcon } from '@heroicons/vue/solid'
 import { markRaw } from 'vue'
-import { mapActions, mapState } from 'vuex'
+import { mapActions, mapGetters, mapState } from 'vuex'
 
 import NotificationsDrawer from './drawers/notifications/NotificationsDrawer.vue'
 
@@ -17,7 +18,9 @@ export default {
     name: 'NotificationsButton',
     components: { MailIcon },
     computed: {
-        ...mapState('ux', ['rightDrawer'])
+        ...mapState('ux', ['rightDrawer']),
+        ...mapState('account', ['notifications']),
+        ...mapGetters('account', ['hasNotifications'])
     },
     methods: {
         ...mapActions('ux', ['openRightDrawer', 'closeRightDrawer']),
@@ -43,6 +46,7 @@ export default {
     width: 100%;
     height: 100%;
     padding: 10px;
+    position: relative;
 
     &:hover {
       background-color: $ff-grey-700;
@@ -53,6 +57,14 @@ export default {
       width: 35px;
       height: 35px;
     }
+
+    .ff-notification-pill {
+      bottom: 10px;
+      right: 5px;
+      position: absolute;
+      font-size: 0.65rem;
+      padding: 0 7px;
+    }
   }
 
 }
diff --git a/frontend/src/store/account.js b/frontend/src/store/account.js
index 8a0fb4ca06..67016efb48 100644
--- a/frontend/src/store/account.js
+++ b/frontend/src/store/account.js
@@ -87,7 +87,8 @@ const getters = {
         return state.teams.find(team => team.id === defaultTeamId)
     },
     blueprints: state => state.teamBlueprints[state.team?.id] || [],
-    defaultBlueprint: (state, getters) => getters.blueprints?.find(blueprint => blueprint.default)
+    defaultBlueprint: (state, getters) => getters.blueprints?.find(blueprint => blueprint.default),
+    hasNotifications: (state) => state.notifications.total > 0
 }
 
 const mutations = {

From 82ab29e51db9bfdcbc3b15dbf1be4768850523b0 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 16 Jul 2024 16:51:10 +0300
Subject: [PATCH 06/26] remove the team invitations nav dropdown menu

---
 frontend/src/components/PageHeader.vue | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/frontend/src/components/PageHeader.vue b/frontend/src/components/PageHeader.vue
index 5ff1795cce..d6a1eca914 100644
--- a/frontend/src/components/PageHeader.vue
+++ b/frontend/src/components/PageHeader.vue
@@ -43,8 +43,6 @@
                 <template #placeholder>
                     <div class="ff-user">
                         <img :src="user.avatar" class="ff-avatar">
-                        <ff-notification-pill v-if="notifications.total > 0" data-el="notification-pill" class="ml-3" :count="notifications.total" />
-                        <!-- <label>{{ user.name }}</label> -->
                     </div>
                 </template>
                 <template #default>
@@ -89,14 +87,6 @@ export default {
                     onclick: this.$router.push,
                     onclickparams: { name: 'User Settings' }
                 },
-                {
-                    label: 'Team Invitations',
-                    icon: UserGroupIcon,
-                    tag: 'team-invitations',
-                    onclick: this.$router.push,
-                    onclickparams: { name: 'User Invitations' },
-                    notifications: this.notifications.invitations
-                },
                 this.user.admin
                     ? {
                         label: 'Admin Settings',

From e1cbb6d0dc0e001b6381eaa93b8b0054c71f8d1d Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 18 Jul 2024 12:08:13 +0300
Subject: [PATCH 07/26] wip: switch notifications functionality to vuex store

---
 .../src/components/NotificationsButton.vue    |  4 +-
 frontend/src/pages/account/NoTeamsUser.vue    | 17 ++---
 .../src/pages/account/Teams/Invitations.vue   | 17 +++--
 frontend/src/store/account.js                 | 73 +++++++++++--------
 4 files changed, 60 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/NotificationsButton.vue b/frontend/src/components/NotificationsButton.vue
index e68d430a75..9fe790f7fb 100644
--- a/frontend/src/components/NotificationsButton.vue
+++ b/frontend/src/components/NotificationsButton.vue
@@ -19,8 +19,8 @@ export default {
     components: { MailIcon },
     computed: {
         ...mapState('ux', ['rightDrawer']),
-        ...mapState('account', ['notifications']),
-        ...mapGetters('account', ['hasNotifications'])
+        ...mapGetters('account', ['hasNotifications']),
+        ...mapGetters('account', ['notifications'])
     },
     methods: {
         ...mapActions('ux', ['openRightDrawer', 'closeRightDrawer']),
diff --git a/frontend/src/pages/account/NoTeamsUser.vue b/frontend/src/pages/account/NoTeamsUser.vue
index 0e2bfec2be..15b965b5b1 100644
--- a/frontend/src/pages/account/NoTeamsUser.vue
+++ b/frontend/src/pages/account/NoTeamsUser.vue
@@ -18,9 +18,7 @@
 <script>
 
 import { InboxInIcon, UserGroupIcon } from '@heroicons/vue/outline'
-import { mapState } from 'vuex'
-
-import userApi from '../../api/user.js'
+import { mapGetters, mapState } from 'vuex'
 
 export default {
     name: 'NoTeamsUser',
@@ -28,21 +26,18 @@ export default {
         UserGroupIcon,
         InboxInIcon
     },
-    data () {
-        return {
-            invitationCount: 0
-        }
-    },
     computed: {
-        ...mapState('account', ['settings', 'user'])
+        ...mapState('account', ['settings', 'user']),
+        ...mapGetters('account', {
+            invitationCount: 'totalNotificationsCount'
+        })
     },
     mounted () {
         this.fetchData()
     },
     methods: {
         async fetchData () {
-            const invitations = await userApi.getTeamInvitations()
-            this.invitationCount = invitations.count
+            await this.$store.dispatch('account/getNotifications')
         }
     }
 }
diff --git a/frontend/src/pages/account/Teams/Invitations.vue b/frontend/src/pages/account/Teams/Invitations.vue
index 460e2b0283..765156993f 100644
--- a/frontend/src/pages/account/Teams/Invitations.vue
+++ b/frontend/src/pages/account/Teams/Invitations.vue
@@ -11,6 +11,7 @@
 
 <script>
 import { markRaw } from 'vue'
+import { mapGetters } from 'vuex'
 
 import userApi from '../../../api/user.js'
 import InviteUserCell from '../../../components/tables/cells/InviteUserCell.vue'
@@ -28,7 +29,6 @@ export default {
     emits: ['invites-updated'],
     data () {
         return {
-            invitations: [],
             inviteColumns: [
                 { label: 'Team', key: 'team', class: ['w-auto'], component: { is: markRaw(TeamCell), map: { id: 'team.id', avatar: 'team.avatar', name: 'team.name' } } },
                 { label: 'Role', class: ['w-40'], key: 'roleName' },
@@ -37,13 +37,18 @@ export default {
             ]
         }
     },
+    computed: {
+        ...mapGetters('account', {
+            invitations: 'teamInvitations'
+        })
+    },
     mounted () {
-        this.fetchData()
+        this.$store.dispatch('account/getNotifications')
     },
     methods: {
         async acceptInvite (invite) {
             await userApi.acceptTeamInvitation(invite.id, invite.team.id)
-            await this.fetchData()
+            await this.$store.dispatch('account/getNotifications')
             await this.$store.dispatch('account/refreshTeams')
             Alerts.emit(`Invite to "${invite.team.name}" has been accepted.`, 'confirmation')
             // navigate to team dashboad once invite accepted
@@ -56,13 +61,11 @@ export default {
         },
         async rejectInvite (invite) {
             await userApi.rejectTeamInvitation(invite.id, invite.team.id)
-            await this.fetchData()
+            await this.$store.dispatch('account/getNotifications')
             Alerts.emit(`Invite to "${invite.team.name}" has been rejected.`, 'confirmation')
         },
         async fetchData () {
-            const invitations = await userApi.getTeamInvitations()
-            await this.$store.dispatch('account/countNotifications')
-            this.invitations = invitations.invitations
+            await this.$store.dispatch('account/getNotifications')
         }
     }
 }
diff --git a/frontend/src/store/account.js b/frontend/src/store/account.js
index 67016efb48..053d6f1578 100644
--- a/frontend/src/store/account.js
+++ b/frontend/src/store/account.js
@@ -28,8 +28,10 @@ const state = () => ({
     teamMembership: null,
     // The user's teams
     teams: [],
-    // stores active notifications that require user attention, key'd by notification type (e.g. invites)
-    notifications: {},
+    // stores active notifications that require user attention, key'd by notification type (e.g. invites) alongside a payload bucket to store all notifications
+    notifications: {
+        payload: []
+    },
     // An error during login
     loginError: null,
     //
@@ -59,16 +61,20 @@ const getters = {
         return state.teamMembership
     },
     notifications (state) {
-        const n = state.notifications
+        const n = { ...state.notifications }
+
         let sum = 0
         for (const type of Object.keys(n)) {
-            if (type !== 'total') {
+            if (!['total', 'payload'].includes(type)) {
                 sum += n[type]
             }
         }
+
         n.total = sum
+
         return n
     },
+    totalNotificationsCount: (state, getters) => getters.notifications.total,
     redirectUrlAfterLogin (state) {
         return state.redirectUrlAfterLogin
     },
@@ -88,7 +94,8 @@ const getters = {
     },
     blueprints: state => state.teamBlueprints[state.team?.id] || [],
     defaultBlueprint: (state, getters) => getters.blueprints?.find(blueprint => blueprint.default),
-    hasNotifications: (state) => state.notifications.total > 0
+    hasNotifications: (state, getters) => getters.notifications.total > 0,
+    teamInvitations: state => state.notifications.payload // filter out team invites by notification.type = invite
 }
 
 const mutations = {
@@ -130,6 +137,9 @@ const mutations = {
     setNotificationsCount (state, payload) {
         state.notifications[payload.type] = payload.count
     },
+    setNotificationsPayload (state, notifications) {
+        state.notifications.payload = notifications
+    },
     sessionExpired (state) {
         state.user = null
     },
@@ -156,15 +166,15 @@ const mutations = {
 
 // actions
 const actions = {
-    async checkState (state, redirectUrlAfterLogin) {
+    async checkState ({ commit, dispatch }, redirectUrlAfterLogin) {
         try {
             const settings = await settingsApi.getSettings()
-            state.commit('setSettings', settings)
+            commit('setSettings', settings)
 
-            state.commit('setOffline', false)
+            commit('setOffline', false)
 
             const user = await userApi.getUser()
-            state.commit('login', user)
+            commit('login', user)
 
             // User is logged in
             if (router.currentRoute.value.name === 'VerifyEmail' && user.email_verified === false) {
@@ -178,20 +188,20 @@ const actions = {
                 window.location = '/'
                 return
             } else if (user.email_verified === false || user.password_expired) {
-                state.commit('clearPending')
+                commit('clearPending')
                 router.push({ name: 'Home' })
                 return
             }
 
             // check notifications count
-            state.dispatch('countNotifications')
+            await dispatch('getNotifications')
 
             const teams = await teamApi.getTeams()
-            state.commit('setTeams', teams.teams)
+            commit('setTeams', teams.teams)
 
             if (teams.count === 0) {
-                state.commit('clearPending')
-                state.commit('setTeam', null)
+                commit('clearPending')
+                commit('setTeam', null)
                 if (/^\/team\//.test(router.currentRoute.value.path)) {
                     router.push({ name: 'Home' })
                 }
@@ -224,18 +234,18 @@ const actions = {
                     }
                     const team = await teamApi.getTeam(teamId || { slug: teamSlug })
                     const teamMembership = await teamApi.getTeamUserMembership(team.id)
-                    state.commit('setTeam', team)
-                    state.commit('setTeamMembership', teamMembership)
+                    commit('setTeam', team)
+                    commit('setTeamMembership', teamMembership)
                 }
-                state.commit('clearPending')
+                commit('clearPending')
                 if (redirectUrlAfterLogin) {
                     // If this is a user-driven login, take them to the profile page
                     router.push(redirectUrlAfterLogin)
                     // Clear the redirectUrl on nextTick
-                    nextTick(() => { state.commit('setRedirectUrl', null) })
+                    nextTick(() => { commit('setRedirectUrl', null) })
                 }
             } catch (teamLoadErr) {
-                state.commit('clearPending')
+                commit('clearPending')
                 // This means the team doesn't exist, or the user doesn't have access
                 router.push({
                     name: 'PageNotFound',
@@ -247,13 +257,13 @@ const actions = {
             }
         } catch (err) {
             // Not logged in
-            state.commit('clearPending')
+            commit('clearPending')
             window.posthog?.reset()
 
             if (router.currentRoute.value.meta.requiresLogin !== false) {
                 if (router.currentRoute.value.path !== '/') {
                     // Only remember the url if it isn't the default / path
-                    state.commit('setRedirectUrl', router.currentRoute.value.fullPath)
+                    commit('setRedirectUrl', router.currentRoute.value.fullPath)
                 }
                 router.push({ name: 'Home' })
             }
@@ -335,16 +345,6 @@ const actions = {
         const settings = await settingsApi.getSettings()
         state.commit('setSettings', settings)
     },
-    async countNotifications (state) {
-        await userApi.getTeamInvitations()
-            .then((invitations) => {
-                state.commit('setNotificationsCount', {
-                    type: 'invitations',
-                    count: invitations.count
-                })
-            })
-            .catch(_ => {})
-    },
     setOffline (state, value) {
         state.commit('setOffline', value)
     },
@@ -356,6 +356,17 @@ const actions = {
     },
     setRedirectUrl (state, url) {
         state.commit('setRedirectUrl', url)
+    },
+    async getNotifications (state) {
+        await userApi.getTeamInvitations()
+            .then((invitations) => {
+                state.commit('setNotificationsCount', {
+                    type: 'invitations',
+                    count: invitations.count
+                })
+                state.commit('setNotificationsPayload', invitations.invitations)
+            })
+            .catch(_ => {})
     }
 }
 

From b73d7c961bfd510a707c8f96ea65f5e46fe49761 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 18 Jul 2024 17:35:58 +0300
Subject: [PATCH 08/26] use distinct component for each type of notification
 message

---
 .../src/components/drawers/RightDrawer.vue    |  1 +
 .../notifications/NotificationsDrawer.vue     | 65 +++++++++++-
 .../TeamInvitationNotification.vue            | 49 ++++++++++
 frontend/src/mixins/NotificationMessage.js    | 31 ++++++
 frontend/src/store/account.js                 |  3 +
 .../stylesheets/components/notifications.scss | 98 +++++++++++++++++++
 6 files changed, 245 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/notifications/TeamInvitationNotification.vue
 create mode 100644 frontend/src/mixins/NotificationMessage.js

diff --git a/frontend/src/components/drawers/RightDrawer.vue b/frontend/src/components/drawers/RightDrawer.vue
index 33a050dfcb..f5068d3ecc 100644
--- a/frontend/src/components/drawers/RightDrawer.vue
+++ b/frontend/src/components/drawers/RightDrawer.vue
@@ -28,6 +28,7 @@ export default {
   right: -1000px;
   z-index: 500;
   transition: ease-in-out .3s;
+  box-shadow: -5px 0px 8px rgba(0, 0, 0, 0.1);
 
   &.open {
     right: 0;
diff --git a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
index 88435d6ca1..4ed9e25bec 100644
--- a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
+++ b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
@@ -1,10 +1,71 @@
 <template>
-    <h1>Hello Notifications!</h1>
+    <div class="ff-notifications-drawer">
+        <div class="header">
+            <h2 class="title">Notifications</h2>
+            <!--            <div class="actions">-->
+            <!--                <span class="forge-badge" :class="{disabled: !canSelectAll}" @click="selectAll">select all</span>-->
+            <!--                <span class="forge-badge" :class="{disabled: !canDeselectAll}" @click="deselectAll">deselect all</span>-->
+            <!--                <span class="forge-badge disabled">mark as read</span>-->
+            <!--                <span class="forge-badge disabled">mark as unread</span>-->
+            <!--            </div>-->
+        </div>
+        <ul class="messages-wrapper">
+            <li v-for="notification in notificationMessages" :key="notification.id">
+                <component
+                    :is="notificationsComponentMap['team-invitation']"
+                    :notification="notification"
+                    :selections="selections"
+                    @selected="onSelected"
+                    @deselected="onDeselected"
+                />
+            </li>
+        </ul>
+    </div>
 </template>
 
 <script>
+import { markRaw } from 'vue'
+import { mapGetters } from 'vuex'
+
+import TeamInvitationNotification from '../../notifications/TeamInvitationNotification.vue'
+
 export default {
-    name: 'NotificationsDrawer'
+    name: 'NotificationsDrawer',
+    data () {
+        return {
+            notificationsComponentMap: {
+                // todo replace hardcoded value with actual notification type
+                'team-invitation': markRaw(TeamInvitationNotification)
+            },
+            selections: []
+        }
+    },
+    computed: {
+        ...mapGetters('account', ['notificationMessages']),
+        canSelectAll () {
+            return this.notificationMessages.length !== this.selections.length
+        },
+        canDeselectAll () {
+            return this.selections.length > 0
+        }
+    },
+    methods: {
+        onSelected (notification) {
+            this.selections.push(notification)
+        },
+        onDeselected (notification) {
+            const index = this.selections.findIndex(n => n.id === notification.id)
+            if (index > -1) {
+                this.selections.splice(index, 1)
+            }
+        },
+        selectAll () {
+            this.selections = [...this.notificationMessages]
+        },
+        deselectAll () {
+            this.selections = []
+        }
+    }
 }
 </script>
 
diff --git a/frontend/src/components/notifications/TeamInvitationNotification.vue b/frontend/src/components/notifications/TeamInvitationNotification.vue
new file mode 100644
index 0000000000..cb29d9c609
--- /dev/null
+++ b/frontend/src/components/notifications/TeamInvitationNotification.vue
@@ -0,0 +1,49 @@
+<template>
+    <div class="message">
+        <div class="icon">
+            <UserAddIcon class="ff-btn--icon" />
+        </div>
+        <div class="body">
+            <div class="header">
+                <router-link class="title" :to="{name: 'User Invitations'}" @click="closeRightDrawer">
+                    <h4>Team Invitation</h4>
+                </router-link>
+            <!--            <ff-checkbox :model-value="isSelected" label="" @click.prevent.stop="toggleSelection" />-->
+            </div>
+            <div class="content">
+                You have been invited by <i>{{ invitorName }}</i> to join <i>{{ teamName }}</i>.
+            </div>
+            <div class="footer">
+                {{ notification.createdSince }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { UserAddIcon } from '@heroicons/vue/solid'
+import { mapActions } from 'vuex'
+
+import NotificationMessageMixin from '../../mixins/NotificationMessage.js'
+
+export default {
+    name: 'TeamInvitationNotification',
+    components: { UserAddIcon },
+    mixins: [NotificationMessageMixin],
+    computed: {
+        invitorName () {
+            return this.notification.invitor.name
+        },
+        teamName () {
+            return this.notification.team.name
+        }
+    },
+    methods: {
+        ...mapActions('ux', ['closeRightDrawer'])
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/frontend/src/mixins/NotificationMessage.js b/frontend/src/mixins/NotificationMessage.js
new file mode 100644
index 0000000000..ba0e5a3840
--- /dev/null
+++ b/frontend/src/mixins/NotificationMessage.js
@@ -0,0 +1,31 @@
+export default {
+    props: {
+        notification: {
+            type: Object,
+            required: true
+        },
+        selections: {
+            type: Array,
+            required: true
+        }
+    },
+    computed: {
+        isSelected () {
+            return !!this.selections.find(n => n.id === this.notification.id)
+        }
+    },
+    emits: ['selected', 'deselected'],
+    methods: {
+        onSelect () {
+            this.$emit('selected', this.notification)
+        },
+        onDeselect () {
+            this.$emit('deselected', this.notification)
+        },
+        toggleSelection () {
+            if (this.isSelected) {
+                this.onDeselect()
+            } else this.onSelect()
+        }
+    }
+}
diff --git a/frontend/src/store/account.js b/frontend/src/store/account.js
index 91072961a8..2ff15910d7 100644
--- a/frontend/src/store/account.js
+++ b/frontend/src/store/account.js
@@ -74,6 +74,9 @@ const getters = {
 
         return n
     },
+    notificationMessages (state, getters) {
+        return getters.notifications.payload ?? []
+    },
     totalNotificationsCount: (state, getters) => getters.notifications.total,
     redirectUrlAfterLogin (state) {
         return state.redirectUrlAfterLogin
diff --git a/frontend/src/stylesheets/components/notifications.scss b/frontend/src/stylesheets/components/notifications.scss
index 6e53ef68dc..033cd2a0fe 100644
--- a/frontend/src/stylesheets/components/notifications.scss
+++ b/frontend/src/stylesheets/components/notifications.scss
@@ -29,4 +29,102 @@
             }
         }
     }
+}
+
+$ff-notifications-drawer-side-padding: 5px;
+
+.ff-notifications-drawer {
+    > .header {
+        border-bottom: 1px solid $ff-grey-300;
+        padding: 10px 0;
+
+        .title {
+            padding: 0 $ff-notifications-drawer-side-padding;
+            margin: 0;
+        }
+
+        .actions {
+            padding: 0 5px;
+            display: flex;
+            gap: 5px;
+
+            .forge-badge {
+                background-color: $ff-grey-100;
+
+                &:hover {
+                    cursor: pointer;
+                    background-color: $ff-grey-300
+                }
+
+                &.disabled {
+                    color: $ff-grey-400;
+
+                    &:hover {
+                        cursor: not-allowed;
+                    }
+                }
+            }
+        }
+    }
+
+    .message {
+        border-bottom: 1px solid $ff-grey-300;
+        padding: 10px 0 0;
+        transition: ease-in-out .3s;
+        display: flex;
+        align-items: center;
+
+        .icon {
+            align-self: baseline;
+            
+            .ff-btn--icon {
+                width: 30px;
+                height: 30px;
+            }
+        }
+
+        .body {
+            flex: 1;
+            
+            .header {
+                display: flex;
+                padding: 0 $ff-notifications-drawer-side-padding;
+                justify-content: space-between;
+                margin-bottom: 5px;
+
+                .title {
+                    flex: 1;
+
+                    h4 {
+                        margin: 0;
+                    }
+
+                    &:hover {
+                        color: $ff-blue-500;
+                    }
+                }
+
+                input {
+                    &:hover {
+                        cursor: pointer;
+                    }
+                }
+            }
+
+            .content {
+                padding: 0 $ff-notifications-drawer-side-padding;
+            }
+
+            .footer {
+                text-align: right;
+                color: $ff-grey-400;
+                font-size: 80%;
+                padding: 0 $ff-notifications-drawer-side-padding;
+            }
+        }
+
+        &:hover {
+            background-color: $ff-grey-100;
+        }
+    }
 }
\ No newline at end of file

From 09649734c709b8264afbb430e0e5311211eaa732 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 18 Jul 2024 17:53:51 +0300
Subject: [PATCH 09/26] qf failing e2e tests

---
 test/e2e/frontend/cypress/tests/admin.spec.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/test/e2e/frontend/cypress/tests/admin.spec.js b/test/e2e/frontend/cypress/tests/admin.spec.js
index bfaad9349f..e3dff84df1 100644
--- a/test/e2e/frontend/cypress/tests/admin.spec.js
+++ b/test/e2e/frontend/cypress/tests/admin.spec.js
@@ -14,8 +14,11 @@ describe('FlowFuse platform admin users', () => {
         cy.get('[data-cy="user-options"]').get('.ff-dropdown-options').should('not.be.visible')
         cy.get('[data-cy="user-options"]').click()
         cy.get('[data-cy="user-options"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-cy="user-options"] .ff-dropdown-options > .ff-dropdown-option').eq(2).contains('Admin Settings').should('be.visible')
-        cy.get('[data-cy="user-options"] .ff-dropdown-options > .ff-dropdown-option').eq(2).click()
+        cy.get('[data-cy="user-options"] .ff-dropdown-options > .ff-dropdown-option')
+            .contains('Admin Settings')
+            .should('be.visible')
+        cy.get('[data-cy="user-options"] .ff-dropdown-options > .ff-dropdown-option').eq(1)
+            .click()
 
         // wait for APIs to return
         cy.wait('@getSettings')

From 339eeea1dfd71e7015024966a0f26a3a70c0632f Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 18 Jul 2024 18:00:58 +0300
Subject: [PATCH 10/26] qf overflowing right drawer

---
 frontend/src/stylesheets/layouts.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/stylesheets/layouts.scss b/frontend/src/stylesheets/layouts.scss
index 49aa0d104e..28bd064f09 100644
--- a/frontend/src/stylesheets/layouts.scss
+++ b/frontend/src/stylesheets/layouts.scss
@@ -182,6 +182,7 @@ $nav_height: 60px;
     .ff-view {
         position: relative;
         overflow-y: auto;
+        overflow-x: hidden;
     }
     main {
         background-color: $ff-grey-50;

From 31992dde9ae7a41d1adc23fb693cddcf614a1193 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 18 Jul 2024 18:37:11 +0300
Subject: [PATCH 11/26] adding support for no notification messages & e2e
 selectors

---
 .../src/components/NotificationsButton.vue    |   2 +-
 .../src/components/drawers/RightDrawer.vue    |   2 +-
 .../notifications/NotificationsDrawer.vue     |  12 +-
 .../TeamInvitationNotification.vue            |   2 +-
 .../stylesheets/components/notifications.scss | 109 +++++++++++-------
 5 files changed, 77 insertions(+), 50 deletions(-)

diff --git a/frontend/src/components/NotificationsButton.vue b/frontend/src/components/NotificationsButton.vue
index 9fe790f7fb..6bcb611961 100644
--- a/frontend/src/components/NotificationsButton.vue
+++ b/frontend/src/components/NotificationsButton.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="notifications-button-wrapper">
-        <button class="notifications-button" @click="onClick">
+        <button class="notifications-button" data-el="notifications-button" @click="onClick">
             <MailIcon />
             <ff-notification-pill v-if="hasNotifications" data-el="notification-pill" class="ml-3" :count="notifications.total" />
         </button>
diff --git a/frontend/src/components/drawers/RightDrawer.vue b/frontend/src/components/drawers/RightDrawer.vue
index f5068d3ecc..2894ec9437 100644
--- a/frontend/src/components/drawers/RightDrawer.vue
+++ b/frontend/src/components/drawers/RightDrawer.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-click-outside="closeRightDrawer" class="right-drawer" :class="{open: rightDrawer.state} ">
+    <div v-click-outside="closeRightDrawer" class="right-drawer" :class="{open: rightDrawer.state}" data-el="right-drawer">
         <component :is="rightDrawer.component" v-if="rightDrawer.component" />
     </div>
 </template>
diff --git a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
index 4ed9e25bec..6f5893ba67 100644
--- a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
+++ b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="ff-notifications-drawer">
+    <div class="ff-notifications-drawer" data-el="notifications-drawer">
         <div class="header">
             <h2 class="title">Notifications</h2>
             <!--            <div class="actions">-->
@@ -9,8 +9,8 @@
             <!--                <span class="forge-badge disabled">mark as unread</span>-->
             <!--            </div>-->
         </div>
-        <ul class="messages-wrapper">
-            <li v-for="notification in notificationMessages" :key="notification.id">
+        <ul v-if="hasNotificationMessages" class="messages-wrapper" data-el="messages-wrapper">
+            <li v-for="notification in notificationMessages" :key="notification.id" data-el="message">
                 <component
                     :is="notificationsComponentMap['team-invitation']"
                     :notification="notification"
@@ -20,6 +20,9 @@
                 />
             </li>
         </ul>
+        <div v-else class="empty">
+            <p>Nothing so far...</p>
+        </div>
     </div>
 </template>
 
@@ -47,6 +50,9 @@ export default {
         },
         canDeselectAll () {
             return this.selections.length > 0
+        },
+        hasNotificationMessages () {
+            return this.notificationMessages.length > 0
         }
     },
     methods: {
diff --git a/frontend/src/components/notifications/TeamInvitationNotification.vue b/frontend/src/components/notifications/TeamInvitationNotification.vue
index cb29d9c609..8544baf0ac 100644
--- a/frontend/src/components/notifications/TeamInvitationNotification.vue
+++ b/frontend/src/components/notifications/TeamInvitationNotification.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="message">
+    <div class="message" data-el="invitation-message">
         <div class="icon">
             <UserAddIcon class="ff-btn--icon" />
         </div>
diff --git a/frontend/src/stylesheets/components/notifications.scss b/frontend/src/stylesheets/components/notifications.scss
index 033cd2a0fe..f6b4eadc59 100644
--- a/frontend/src/stylesheets/components/notifications.scss
+++ b/frontend/src/stylesheets/components/notifications.scss
@@ -34,9 +34,16 @@
 $ff-notifications-drawer-side-padding: 5px;
 
 .ff-notifications-drawer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    
     > .header {
         border-bottom: 1px solid $ff-grey-300;
         padding: 10px 0;
+        width: 100%;
 
         .title {
             padding: 0 $ff-notifications-drawer-side-padding;
@@ -67,64 +74,78 @@ $ff-notifications-drawer-side-padding: 5px;
         }
     }
 
-    .message {
-        border-bottom: 1px solid $ff-grey-300;
-        padding: 10px 0 0;
-        transition: ease-in-out .3s;
-        display: flex;
-        align-items: center;
+    .messages-wrapper {
+        flex: 1;
+        width: 100%;
+        
+        .message {
+            border-bottom: 1px solid $ff-grey-300;
+            padding: 10px 0 0;
+            transition: ease-in-out .3s;
+            display: flex;
+            align-items: center;
+
+            .icon {
+                align-self: baseline;
 
-        .icon {
-            align-self: baseline;
-            
-            .ff-btn--icon {
-                width: 30px;
-                height: 30px;
+                .ff-btn--icon {
+                    width: 30px;
+                    height: 30px;
+                }
             }
-        }
 
-        .body {
-            flex: 1;
-            
-            .header {
-                display: flex;
-                padding: 0 $ff-notifications-drawer-side-padding;
-                justify-content: space-between;
-                margin-bottom: 5px;
+            .body {
+                flex: 1;
+
+                .header {
+                    display: flex;
+                    padding: 0 $ff-notifications-drawer-side-padding;
+                    justify-content: space-between;
+                    margin-bottom: 5px;
+
+                    .title {
+                        flex: 1;
 
-                .title {
-                    flex: 1;
+                        h4 {
+                            margin: 0;
+                        }
 
-                    h4 {
-                        margin: 0;
+                        &:hover {
+                            color: $ff-blue-500;
+                        }
                     }
 
-                    &:hover {
-                        color: $ff-blue-500;
+                    input {
+                        &:hover {
+                            cursor: pointer;
+                        }
                     }
                 }
 
-                input {
-                    &:hover {
-                        cursor: pointer;
-                    }
+                .content {
+                    padding: 0 $ff-notifications-drawer-side-padding;
                 }
-            }
 
-            .content {
-                padding: 0 $ff-notifications-drawer-side-padding;
+                .footer {
+                    text-align: right;
+                    color: $ff-grey-400;
+                    font-size: 80%;
+                    padding: 0 $ff-notifications-drawer-side-padding;
+                }
             }
 
-            .footer {
-                text-align: right;
-                color: $ff-grey-400;
-                font-size: 80%;
-                padding: 0 $ff-notifications-drawer-side-padding;
+            &:hover {
+                background-color: $ff-grey-100;
             }
-        }
-
-        &:hover {
-            background-color: $ff-grey-100;
-        }
+        }   
+    }
+    
+    .empty {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        text-align: center;
+        color: $ff-grey-400;
     }
+    
 }
\ No newline at end of file

From 9b4ec29335eb867266626a155b0cfa8ba44ce7f7 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 18 Jul 2024 18:44:03 +0300
Subject: [PATCH 12/26] qf styling drawer max width

---
 frontend/src/components/drawers/RightDrawer.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/drawers/RightDrawer.vue b/frontend/src/components/drawers/RightDrawer.vue
index 2894ec9437..42d1ec51c7 100644
--- a/frontend/src/components/drawers/RightDrawer.vue
+++ b/frontend/src/components/drawers/RightDrawer.vue
@@ -32,7 +32,9 @@ export default {
 
   &.open {
     right: 0;
-    width: 40%;
+    width: 100%;
+    max-width: 30vw;
+    min-width: 400px;
   }
 }
 </style>

From d116f12b64db510aaf8c8a6b349bbb125059e604 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 18 Jul 2024 18:47:25 +0300
Subject: [PATCH 13/26] sort notification messages by newest

---
 frontend/src/store/account.js                 |  4 +-
 .../cypress/tests/notifications.spec.js       | 47 +++++++++++++++++++
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 test/e2e/frontend/cypress/tests/notifications.spec.js

diff --git a/frontend/src/store/account.js b/frontend/src/store/account.js
index 2ff15910d7..da82726f09 100644
--- a/frontend/src/store/account.js
+++ b/frontend/src/store/account.js
@@ -75,7 +75,9 @@ const getters = {
         return n
     },
     notificationMessages (state, getters) {
-        return getters.notifications.payload ?? []
+        const notifications = getters.notifications.payload ?? []
+
+        return notifications.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
     },
     totalNotificationsCount: (state, getters) => getters.notifications.total,
     redirectUrlAfterLogin (state) {
diff --git a/test/e2e/frontend/cypress/tests/notifications.spec.js b/test/e2e/frontend/cypress/tests/notifications.spec.js
new file mode 100644
index 0000000000..7139e8696a
--- /dev/null
+++ b/test/e2e/frontend/cypress/tests/notifications.spec.js
@@ -0,0 +1,47 @@
+describe('FlowForge - Notifications', () => {
+    describe('Team Invitations', () => {
+        describe('appear as notification messages', () => {
+            it('to users that have no team memberships', () => {
+                cy.login('dave', 'ddPassword')
+
+                cy.intercept('/api/*/user').as('getUser')
+                cy.intercept('/api/*/settings').as('getSettings')
+                cy.intercept('/api/*/user/teams').as('getTeams')
+                cy.intercept('/api/*/user/invitations').as('getInvitations')
+
+                cy.intercept('/api/*/admin/stats').as('getAdminStats')
+                cy.intercept('/api/*/admin/license').as('getAdminLicense')
+
+                cy.visit('/')
+
+                cy.wait('@getUser')
+                cy.wait('@getSettings')
+                cy.wait('@getTeams')
+                cy.wait('@getInvitations')
+
+                cy.get('[data-el="right-drawer"').should('not.be.visible')
+
+                cy.get('[data-el="notifications-button"')
+                    .should('exist')
+                    .contains(2)
+
+                cy.get('[data-el="notifications-button"').click()
+
+                cy.get('[data-el="right-drawer"').should('be.visible')
+
+                cy.get('[data-el="right-drawer"').within(() => {
+                    cy.get('[data-el="notifications-drawer"]')
+
+                    cy.get('[data-el="invitation-message"]').should('have.length', 2)
+                    cy.get('[data-el="invitation-message"]').contains('Team Invitation')
+                    cy.get('[data-el="invitation-message"]').contains('You have been invited by Alice Skywalker to join ATeam.')
+                    cy.get('[data-el="invitation-message"]').contains('You have been invited by Bob Solo to join BTeam.')
+
+                    cy.get('[data-el="invitation-message"]').contains('Team Invitation').click()
+
+                    cy.url().should('include', 'account/teams/invitations')
+                })
+            })
+        })
+    })
+})

From df4c2f4d8df31a5cfb7f616ebe8bdbfa35cc5c7c Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 18 Jul 2024 19:07:34 +0300
Subject: [PATCH 14/26] sort notification messages by newest

---
 frontend/src/store/account.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/store/account.js b/frontend/src/store/account.js
index 2ff15910d7..da82726f09 100644
--- a/frontend/src/store/account.js
+++ b/frontend/src/store/account.js
@@ -75,7 +75,9 @@ const getters = {
         return n
     },
     notificationMessages (state, getters) {
-        return getters.notifications.payload ?? []
+        const notifications = getters.notifications.payload ?? []
+
+        return notifications.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
     },
     totalNotificationsCount: (state, getters) => getters.notifications.total,
     redirectUrlAfterLogin (state) {

From 61fa32a07377b28b019ced2f77e2f6aae4ff8387 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 18 Jul 2024 19:25:22 +0300
Subject: [PATCH 15/26] add notifications e2e tests

---
 .../cypress/tests/notifications.spec.js       | 115 ++++++++++++++++++
 1 file changed, 115 insertions(+)
 create mode 100644 test/e2e/frontend/cypress/tests/notifications.spec.js

diff --git a/test/e2e/frontend/cypress/tests/notifications.spec.js b/test/e2e/frontend/cypress/tests/notifications.spec.js
new file mode 100644
index 0000000000..f3668fcd14
--- /dev/null
+++ b/test/e2e/frontend/cypress/tests/notifications.spec.js
@@ -0,0 +1,115 @@
+describe('FlowForge - Notifications', () => {
+    describe('Team Invitations', () => {
+        describe('appear as notification messages', () => {
+            it('to users that have no team memberships', () => {
+                cy.login('dave', 'ddPassword')
+
+                cy.intercept('/api/*/user').as('getUser')
+                cy.intercept('/api/*/settings').as('getSettings')
+                cy.intercept('/api/*/user/teams').as('getTeams')
+                cy.intercept('/api/*/user/invitations').as('getInvitations')
+
+                cy.intercept('/api/*/admin/stats').as('getAdminStats')
+                cy.intercept('/api/*/admin/license').as('getAdminLicense')
+
+                cy.visit('/')
+
+                cy.wait('@getUser')
+                cy.wait('@getSettings')
+                cy.wait('@getTeams')
+                cy.wait('@getInvitations')
+
+                cy.get('[data-el="right-drawer"').should('not.be.visible')
+
+                cy.get('[data-el="notifications-button"')
+                    .should('exist')
+                    .contains(2)
+
+                cy.get('[data-el="notifications-button"').click()
+
+                cy.get('[data-el="right-drawer"').should('be.visible')
+
+                cy.get('[data-el="right-drawer"').within(() => {
+                    cy.get('[data-el="notifications-drawer"]')
+
+                    cy.get('[data-el="invitation-message"]').should('have.length', 2)
+                    cy.get('[data-el="invitation-message"]').contains('Team Invitation')
+                    cy.get('[data-el="invitation-message"]').contains('You have been invited by Alice Skywalker to join ATeam.')
+                    cy.get('[data-el="invitation-message"]').contains('You have been invited by Bob Solo to join BTeam.')
+
+                    cy.get('[data-el="invitation-message"]').contains('Team Invitation').click()
+
+                    cy.url().should('include', 'account/teams/invitations')
+                })
+            })
+
+            it.only('to users that are part of teams', () => {
+                cy.login('bob', 'bbPassword')
+
+                cy.intercept('/api/*/user').as('getUser')
+                cy.intercept('/api/*/settings').as('getSettings')
+                cy.intercept('/api/*/user/teams').as('getTeams')
+                cy.intercept('/api/*/user/invitations', {
+                    meta: {},
+                    count: 1,
+                    invitations: [
+                        {
+                            id: '1',
+                            role: 30,
+                            createdAt: new Date().setTime((new Date()).getTime() - 3600000),
+                            expiresAt: new Date().setTime((new Date()).getTime() + 3600000),
+                            team: {
+                                id: 'gY9GQjDb2k',
+                                name: 'Alice\'s team',
+                                slug: 'team-alice',
+                                avatar: '//www.gravatar.com/avatar/3f9a1fa9ff68277d3e9b5369250be8d9?d=identicon',
+                                links: {
+                                    self: 'http://localhost:3000/api/v1/teams/gY9GQjDb2k'
+                                }
+                            },
+                            invitor: {
+                                id: 'AJ1lQQjlqR',
+                                username: 'alice',
+                                name: 'Alice'
+                            },
+                            invitee: {
+                                id: 'qMN5ng9xYv',
+                                username: 'bob',
+                                name: 'Bob'
+                            }
+                        }
+                    ]
+                }).as('getInvitations')
+
+                cy.visit('/')
+
+                cy.wait('@getUser')
+                cy.wait('@getSettings')
+                cy.wait('@getTeams')
+                cy.wait('@getInvitations')
+
+                cy.get('[data-el="right-drawer"').should('not.be.visible')
+
+                cy.get('[data-el="notifications-button"')
+                    .should('exist')
+                    .contains(1)
+
+                cy.get('[data-el="notifications-button"').click()
+
+                cy.get('[data-el="right-drawer"').should('be.visible')
+
+                cy.get('[data-el="right-drawer"').within(() => {
+                    cy.get('[data-el="notifications-drawer"]')
+
+                    cy.get('[data-el="invitation-message"]').should('have.length', 1)
+                    cy.get('[data-el="invitation-message"]').contains('You have been invited by Alice to join Alice\'s team.')
+                    cy.get('[data-el="invitation-message"]').contains('1 hour ago')
+
+                    cy.get('[data-el="invitation-message"]').contains('Team Invitation').click()
+
+                    cy.url().should('include', 'account/teams/invitations')
+                })
+            })
+        })
+    })
+})

From 3d195f7b46387048e54d5f5a982c365e9db4d245 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 18 Jul 2024 19:44:07 +0300
Subject: [PATCH 16/26] fix failing notification test due to testing data
 crossover

---
 .../cypress/tests/notifications.spec.js       | 51 ++++++++++++++++++-
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/test/e2e/frontend/cypress/tests/notifications.spec.js b/test/e2e/frontend/cypress/tests/notifications.spec.js
index 4c64ebf090..177aafccf6 100644
--- a/test/e2e/frontend/cypress/tests/notifications.spec.js
+++ b/test/e2e/frontend/cypress/tests/notifications.spec.js
@@ -1,13 +1,60 @@
 describe('FlowForge - Notifications', () => {
     describe('Team Invitations', () => {
         describe('appear as notification messages', () => {
-            it('to users that have no team memberships', () => {
+            it.only('to users that have no team memberships', () => {
                 cy.login('dave', 'ddPassword')
 
                 cy.intercept('/api/*/user').as('getUser')
                 cy.intercept('/api/*/settings').as('getSettings')
                 cy.intercept('/api/*/user/teams').as('getTeams')
-                cy.intercept('/api/*/user/invitations').as('getInvitations')
+                cy.intercept('/api/*/user/invitations', {
+                    meta: {},
+                    count: 2,
+                    invitations: [
+                        {
+                            id: '1',
+                            role: 30,
+                            createdAt: new Date().setTime((new Date()).getTime() - 3600000),
+                            expiresAt: new Date().setTime((new Date()).getTime() + 3600000),
+                            team: {
+                                id: 'gY9GQjDb2k',
+                                name: 'ATeam',
+                                slug: 'ateam'
+                            },
+                            invitor: {
+                                id: 'AJ1lQQjlqR',
+                                username: 'alice',
+                                name: 'Alice Skywalker'
+                            },
+                            invitee: {
+                                id: 'qMN5ng9xYv',
+                                username: 'bob',
+                                name: 'Bob'
+                            }
+                        },
+                        {
+                            id: '2',
+                            role: 30,
+                            createdAt: new Date().setTime((new Date()).getTime() - 3600000),
+                            expiresAt: new Date().setTime((new Date()).getTime() + 3600000),
+                            team: {
+                                id: 'gY9GQjDb2k',
+                                name: 'BTeam',
+                                slug: 'bteam'
+                            },
+                            invitor: {
+                                id: 'AJ1lQQjlqR',
+                                username: 'bob',
+                                name: 'Bob Solo'
+                            },
+                            invitee: {
+                                id: 'qMN5ng9xYv',
+                                username: 'bob',
+                                name: 'Bob'
+                            }
+                        }
+                    ]
+                }).as('getInvitations')
 
                 cy.intercept('/api/*/admin/stats').as('getAdminStats')
                 cy.intercept('/api/*/admin/license').as('getAdminLicense')

From 0cc923d23f73aa408796b26823eb768aadaaa54e Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 18 Jul 2024 19:45:25 +0300
Subject: [PATCH 17/26] remove testing leftover

---
 test/e2e/frontend/cypress/tests/notifications.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/frontend/cypress/tests/notifications.spec.js b/test/e2e/frontend/cypress/tests/notifications.spec.js
index 177aafccf6..de31c5b435 100644
--- a/test/e2e/frontend/cypress/tests/notifications.spec.js
+++ b/test/e2e/frontend/cypress/tests/notifications.spec.js
@@ -1,7 +1,7 @@
 describe('FlowForge - Notifications', () => {
     describe('Team Invitations', () => {
         describe('appear as notification messages', () => {
-            it.only('to users that have no team memberships', () => {
+            it('to users that have no team memberships', () => {
                 cy.login('dave', 'ddPassword')
 
                 cy.intercept('/api/*/user').as('getUser')

From 7ea2f332fc382e6e7f3d6aa23992d478abdb49fd Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 18 Jul 2024 19:48:16 +0300
Subject: [PATCH 18/26] fix linting errors

---
 frontend/src/components/PageHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/PageHeader.vue b/frontend/src/components/PageHeader.vue
index a39fd49317..8bf34f881f 100644
--- a/frontend/src/components/PageHeader.vue
+++ b/frontend/src/components/PageHeader.vue
@@ -61,7 +61,7 @@
     </div>
 </template>
 <script>
-import { AdjustmentsIcon, CogIcon, LogoutIcon, MenuIcon, PlusIcon, QuestionMarkCircleIcon, UserAddIcon, UserGroupIcon } from '@heroicons/vue/solid'
+import { AdjustmentsIcon, CogIcon, LogoutIcon, MenuIcon, PlusIcon, QuestionMarkCircleIcon, UserAddIcon } from '@heroicons/vue/solid'
 import { ref } from 'vue'
 import { mapGetters, mapState } from 'vuex'
 

From 21930f431b5e378e53c0653ae74d97a1adf1bd86 Mon Sep 17 00:00:00 2001
From: Costin Serban <cstn.serban@gmail.com>
Date: Thu, 18 Jul 2024 20:23:21 +0300
Subject: [PATCH 19/26] Update frontend/src/components/NotificationsButton.vue

Co-authored-by: Joe Pavitt <99246719+joepavitt@users.noreply.github.com>
---
 frontend/src/components/NotificationsButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/NotificationsButton.vue b/frontend/src/components/NotificationsButton.vue
index 6bcb611961..50cd3acb0f 100644
--- a/frontend/src/components/NotificationsButton.vue
+++ b/frontend/src/components/NotificationsButton.vue
@@ -45,7 +45,7 @@ export default {
     justify-content: center;
     width: 100%;
     height: 100%;
-    padding: 10px;
+    padding: 18px;
     position: relative;
 
     &:hover {

From cab958681f0cb1f1e3b6ab45d827e7d8ec419692 Mon Sep 17 00:00:00 2001
From: Costin Serban <cstn.serban@gmail.com>
Date: Thu, 18 Jul 2024 20:23:28 +0300
Subject: [PATCH 20/26] Update frontend/src/components/NotificationsButton.vue

Co-authored-by: Joe Pavitt <99246719+joepavitt@users.noreply.github.com>
---
 frontend/src/components/NotificationsButton.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/NotificationsButton.vue b/frontend/src/components/NotificationsButton.vue
index 50cd3acb0f..c6a2992ae2 100644
--- a/frontend/src/components/NotificationsButton.vue
+++ b/frontend/src/components/NotificationsButton.vue
@@ -54,8 +54,8 @@ export default {
 
     svg {
       flex: 1;
-      width: 35px;
-      height: 35px;
+      width: 24px;
+      height: 24px;
     }
 
     .ff-notification-pill {

From 780c98f72fbee2d677c063987bab2820beb2f11a Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 18 Jul 2024 20:27:52 +0300
Subject: [PATCH 21/26] qf collapsing the right drawer extended to full width

---
 frontend/src/components/drawers/RightDrawer.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/drawers/RightDrawer.vue b/frontend/src/components/drawers/RightDrawer.vue
index 42d1ec51c7..be5754e2b9 100644
--- a/frontend/src/components/drawers/RightDrawer.vue
+++ b/frontend/src/components/drawers/RightDrawer.vue
@@ -24,9 +24,11 @@ export default {
   border-left: 1px solid $ff-grey-300;
   background: white;
   height: 100%;
-  width: 0;
   right: -1000px;
   z-index: 500;
+  width: 100%;
+  max-width: 0;
+  min-width: 0;
   transition: ease-in-out .3s;
   box-shadow: -5px 0px 8px rgba(0, 0, 0, 0.1);
 

From 5d419f8e46c40f08e4a691b3c5c65503f47843fb Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 18 Jul 2024 20:33:40 +0300
Subject: [PATCH 22/26] update the notification button' s ff-notification-pill
 color

---
 frontend/src/components/NotificationsButton.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/NotificationsButton.vue b/frontend/src/components/NotificationsButton.vue
index c6a2992ae2..0e6bc2a1c6 100644
--- a/frontend/src/components/NotificationsButton.vue
+++ b/frontend/src/components/NotificationsButton.vue
@@ -64,6 +64,7 @@ export default {
       position: absolute;
       font-size: 0.65rem;
       padding: 0 7px;
+      background-color: $ff-red-500;
     }
   }
 

From ef475286c3a30e5c1d75691aa8315af9bd0b48ac Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 19 Jul 2024 11:53:09 +0300
Subject: [PATCH 23/26] Extend the click outside directive to allow adding
 excluded nodes. Fixes the right drawer opening and closing when clicking the
 notification button with the drawer open

---
 frontend/src/components/NotificationsButton.vue       |  6 +++++-
 frontend/src/components/drawers/RightDrawer.vue       |  2 +-
 frontend/src/store/ux.js                              |  8 ++++----
 frontend/src/ui-components/directives/ClickOutside.js | 11 +++++++++--
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/NotificationsButton.vue b/frontend/src/components/NotificationsButton.vue
index 0e6bc2a1c6..843dd2827e 100644
--- a/frontend/src/components/NotificationsButton.vue
+++ b/frontend/src/components/NotificationsButton.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="notifications-button-wrapper">
-        <button class="notifications-button" data-el="notifications-button" @click="onClick">
+        <button class="notifications-button" data-el="notifications-button" data-click-exclude="right-drawer" @click="onClick">
             <MailIcon />
             <ff-notification-pill v-if="hasNotifications" data-el="notification-pill" class="ml-3" :count="notifications.total" />
         </button>
@@ -48,6 +48,10 @@ export default {
     padding: 18px;
     position: relative;
 
+    > * {
+      pointer-events: none;
+    }
+
     &:hover {
       background-color: $ff-grey-700;
     }
diff --git a/frontend/src/components/drawers/RightDrawer.vue b/frontend/src/components/drawers/RightDrawer.vue
index be5754e2b9..6de88c0552 100644
--- a/frontend/src/components/drawers/RightDrawer.vue
+++ b/frontend/src/components/drawers/RightDrawer.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-click-outside="closeRightDrawer" class="right-drawer" :class="{open: rightDrawer.state}" data-el="right-drawer">
+    <div v-click-outside="{handler: closeRightDrawer, exclude: ['right-drawer']}" class="right-drawer" :class="{open: rightDrawer.state}" data-el="right-drawer">
         <component :is="rightDrawer.component" v-if="rightDrawer.component" />
     </div>
 </template>
diff --git a/frontend/src/store/ux.js b/frontend/src/store/ux.js
index ec80111b4f..65c7d64eb7 100644
--- a/frontend/src/store/ux.js
+++ b/frontend/src/store/ux.js
@@ -19,11 +19,11 @@ const mutations = {
 }
 
 const actions = {
-    openRightDrawer (state, { component }) {
-        state.commit('openRightDrawer', { component })
+    openRightDrawer ({ commit }, { component }) {
+        commit('openRightDrawer', { component })
     },
-    closeRightDrawer (state) {
-        state.commit('closeRightDrawer')
+    closeRightDrawer ({ commit }) {
+        commit('closeRightDrawer')
     }
 }
 
diff --git a/frontend/src/ui-components/directives/ClickOutside.js b/frontend/src/ui-components/directives/ClickOutside.js
index 4316f04ea8..215ea1c4b2 100644
--- a/frontend/src/ui-components/directives/ClickOutside.js
+++ b/frontend/src/ui-components/directives/ClickOutside.js
@@ -11,9 +11,16 @@ const directive = {
     name: 'click-outside',
     mounted (element, options) {
         const handler = function (evt) {
-            if (!evt.target !== element && !element.contains(evt.target)) {
+            const excludedNodes = options.value.exclude || []
+
+            switch (true) {
+            case !evt.target !== element && !element.contains(evt.target) && typeof options.value === 'function':
                 return options.value()
-            } else {
+            case !evt.target !== element && !element.contains(evt.target) && typeof options.value === 'object':
+                return excludedNodes.includes(evt.target.dataset?.clickExclude)
+                    ? null
+                    : options.value.handler()
+            default:
                 return null
             }
         }

From 3317e35cba7643d24bf777c89ba2fb1f3c261b08 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Fri, 19 Jul 2024 12:34:21 +0100
Subject: [PATCH 24/26] Improve structure of notifications/message & cleaner
 CSS

---
 .../components/notifications/Notification.vue | 57 ++++++++++++++
 .../TeamInvitationNotification.vue            | 41 ++++------
 .../stylesheets/components/notifications.scss | 77 +++++++++----------
 3 files changed, 111 insertions(+), 64 deletions(-)
 create mode 100644 frontend/src/components/notifications/Notification.vue

diff --git a/frontend/src/components/notifications/Notification.vue b/frontend/src/components/notifications/Notification.vue
new file mode 100644
index 0000000000..1cc5527475
--- /dev/null
+++ b/frontend/src/components/notifications/Notification.vue
@@ -0,0 +1,57 @@
+<template>
+    <div class="message" @click="go(to)">
+        <div class="body">
+            <div class="icon ff-icon ff-icon-lg">
+                <slot name="icon" />
+            </div>
+            <div class="text">
+                <div class="header">
+                    <h4 class="title"><slot name="title" /></h4>
+                <!--            <ff-checkbox :model-value="isSelected" label="" @click.prevent.stop="toggleSelection" />-->
+                </div>
+                <div class="content">
+                    <slot name="message" />
+                </div>
+            </div>
+        </div>
+        <div class="footer">
+            <slot name="timestamp" />
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+import NotificationMessageMixin from '../../mixins/NotificationMessage.js'
+
+export default {
+    name: 'TeamInvitationNotification',
+    mixins: [NotificationMessageMixin],
+    props: {
+        to: {
+            type: Object,
+            required: true
+        }
+    },
+    computed: {
+        invitorName () {
+            return this.notification.invitor.name
+        },
+        teamName () {
+            return this.notification.team.name
+        }
+    },
+    methods: {
+        ...mapActions('ux', ['closeRightDrawer']),
+        go (to) {
+            this.closeRightDrawer()
+            this.$router.push(to)
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/frontend/src/components/notifications/TeamInvitationNotification.vue b/frontend/src/components/notifications/TeamInvitationNotification.vue
index 8544baf0ac..aab3432deb 100644
--- a/frontend/src/components/notifications/TeamInvitationNotification.vue
+++ b/frontend/src/components/notifications/TeamInvitationNotification.vue
@@ -1,34 +1,30 @@
 <template>
-    <div class="message" data-el="invitation-message">
-        <div class="icon">
-            <UserAddIcon class="ff-btn--icon" />
-        </div>
-        <div class="body">
-            <div class="header">
-                <router-link class="title" :to="{name: 'User Invitations'}" @click="closeRightDrawer">
-                    <h4>Team Invitation</h4>
-                </router-link>
-            <!--            <ff-checkbox :model-value="isSelected" label="" @click.prevent.stop="toggleSelection" />-->
-            </div>
-            <div class="content">
-                You have been invited by <i>{{ invitorName }}</i> to join <i>{{ teamName }}</i>.
-            </div>
-            <div class="footer">
-                {{ notification.createdSince }}
-            </div>
-        </div>
-    </div>
+    <NotificationMessage data-el="invitation-message" :to="{name: 'User Invitations'}">
+        <template #icon>
+            <UserAddIcon />
+        </template>
+        <template #title>
+            Team Invitation
+        </template>
+        <template #message>
+            You have been invited by <i>"{{ invitorName }}"</i> to join <i>"{{ teamName }}"</i>.
+        </template>
+        <template #timestamp>
+            {{ notification.createdSince }}
+        </template>
+    </NotificationMessage>
 </template>
 
 <script>
 import { UserAddIcon } from '@heroicons/vue/solid'
-import { mapActions } from 'vuex'
 
 import NotificationMessageMixin from '../../mixins/NotificationMessage.js'
 
+import NotificationMessage from './Notification.vue'
+
 export default {
     name: 'TeamInvitationNotification',
-    components: { UserAddIcon },
+    components: { NotificationMessage, UserAddIcon },
     mixins: [NotificationMessageMixin],
     computed: {
         invitorName () {
@@ -37,9 +33,6 @@ export default {
         teamName () {
             return this.notification.team.name
         }
-    },
-    methods: {
-        ...mapActions('ux', ['closeRightDrawer'])
     }
 }
 </script>
diff --git a/frontend/src/stylesheets/components/notifications.scss b/frontend/src/stylesheets/components/notifications.scss
index f6b4eadc59..1bc50dd0ec 100644
--- a/frontend/src/stylesheets/components/notifications.scss
+++ b/frontend/src/stylesheets/components/notifications.scss
@@ -31,7 +31,7 @@
     }
 }
 
-$ff-notifications-drawer-side-padding: 5px;
+$ff-notifications-drawer-side-padding: 12px;
 
 .ff-notifications-drawer {
     display: flex;
@@ -48,6 +48,10 @@ $ff-notifications-drawer-side-padding: 5px;
         .title {
             padding: 0 $ff-notifications-drawer-side-padding;
             margin: 0;
+            color: $ff-grey-800;
+            font-weight: bold;
+            font-size: 1.25rem;
+            line-height: 1.75rem;
         }
 
         .actions {
@@ -77,61 +81,54 @@ $ff-notifications-drawer-side-padding: 5px;
     .messages-wrapper {
         flex: 1;
         width: 100%;
+        background-color: $ff-grey-100;
         
         .message {
+            background-color: $ff-white;
             border-bottom: 1px solid $ff-grey-300;
-            padding: 10px 0 0;
+            padding: 9px $ff-notifications-drawer-side-padding;
             transition: ease-in-out .3s;
-            display: flex;
-            align-items: center;
-
-            .icon {
-                align-self: baseline;
+            cursor: pointer;
 
-                .ff-btn--icon {
-                    width: 30px;
-                    height: 30px;
-                }
+            &:hover .title {
+                color: $ff-blue-500;
             }
 
             .body {
                 flex: 1;
+                display: flex;
+                align-items: center;
+            }
 
-                .header {
-                    display: flex;
-                    padding: 0 $ff-notifications-drawer-side-padding;
-                    justify-content: space-between;
-                    margin-bottom: 5px;
-
-                    .title {
-                        flex: 1;
-
-                        h4 {
-                            margin: 0;
-                        }
-
-                        &:hover {
-                            color: $ff-blue-500;
-                        }
-                    }
+            .text {
+                padding: 0 $ff-notifications-drawer-side-padding;
+                flex-grow: 1;
+            }
 
-                    input {
-                        &:hover {
-                            cursor: pointer;
-                        }
+            .header {
+                display: flex;
+                justify-content: space-between;
+                .title {
+                    flex: 1;
+                    transition: ease-in-out .3s;
+                    h4 {
+                        margin: 0;
                     }
                 }
 
-                .content {
-                    padding: 0 $ff-notifications-drawer-side-padding;
+                input {
+                    &:hover {
+                        cursor: pointer;
+                    }
                 }
+            }
 
-                .footer {
-                    text-align: right;
-                    color: $ff-grey-400;
-                    font-size: 80%;
-                    padding: 0 $ff-notifications-drawer-side-padding;
-                }
+            .footer {
+                margin-top: 6px;
+                text-align: right;
+                color: $ff-grey-400;
+                font-size: 80%;
+                padding: 0 $ff-notifications-drawer-side-padding;
             }
 
             &:hover {

From e088b8a4b2cfa501d3a7411e435fc1dec5570b07 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Fri, 19 Jul 2024 12:41:17 +0100
Subject: [PATCH 25/26] Improve "Empty" state CSS

---
 frontend/src/stylesheets/components/notifications.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/stylesheets/components/notifications.scss b/frontend/src/stylesheets/components/notifications.scss
index 1bc50dd0ec..bd97687d3c 100644
--- a/frontend/src/stylesheets/components/notifications.scss
+++ b/frontend/src/stylesheets/components/notifications.scss
@@ -141,8 +141,11 @@ $ff-notifications-drawer-side-padding: 12px;
         flex: 1;
         display: flex;
         align-items: center;
+        justify-content: center;
         text-align: center;
         color: $ff-grey-400;
+        width: 100%;
+        background-color: $ff-grey-100;
     }
     
 }
\ No newline at end of file

From 124badb99ecc2eb572de4f5ffc33f52dd2f9669b Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Fri, 19 Jul 2024 12:55:35 +0100
Subject: [PATCH 26/26] Update tests to account for added "" around user and
 team names

---
 test/e2e/frontend/cypress/tests/notifications.spec.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/e2e/frontend/cypress/tests/notifications.spec.js b/test/e2e/frontend/cypress/tests/notifications.spec.js
index de31c5b435..9af1400a8c 100644
--- a/test/e2e/frontend/cypress/tests/notifications.spec.js
+++ b/test/e2e/frontend/cypress/tests/notifications.spec.js
@@ -81,8 +81,8 @@ describe('FlowForge - Notifications', () => {
 
                     cy.get('[data-el="invitation-message"]').should('have.length', 2)
                     cy.get('[data-el="invitation-message"]').contains('Team Invitation')
-                    cy.get('[data-el="invitation-message"]').contains('You have been invited by Alice Skywalker to join ATeam.')
-                    cy.get('[data-el="invitation-message"]').contains('You have been invited by Bob Solo to join BTeam.')
+                    cy.get('[data-el="invitation-message"]').contains('You have been invited by "Alice Skywalker" to join "ATeam".')
+                    cy.get('[data-el="invitation-message"]').contains('You have been invited by "Bob Solo" to join "BTeam".')
 
                     cy.get('[data-el="invitation-message"]').contains('Team Invitation').click()
 
@@ -149,7 +149,7 @@ describe('FlowForge - Notifications', () => {
                     cy.get('[data-el="notifications-drawer"]')
 
                     cy.get('[data-el="invitation-message"]').should('have.length', 1)
-                    cy.get('[data-el="invitation-message"]').contains('You have been invited by Alice to join Alice\'s team.')
+                    cy.get('[data-el="invitation-message"]').contains('You have been invited by "Alice" to join "Alice\'s team".')
                     cy.get('[data-el="invitation-message"]').contains('1 hour ago')
 
                     cy.get('[data-el="invitation-message"]').contains('Team Invitation').click()