From 6db7d10fd16a18b35225fd8b7e99a573db1d13cd Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Wed, 11 Dec 2024 15:00:57 +0100
Subject: [PATCH 01/10] Feat: Change server invite to new design

---
 .../components/header/NavUserMenu.vue         |   2 +-
 .../components/invite/dialog/Server.vue       | 174 ++++++++++++++++++
 .../components/singleton/ToastManager.vue     |  10 +-
 .../lib/common/composables/toast.ts           |  91 ++++++---
 .../lib/invites/helpers/constants.ts          |   8 +
 .../frontend-2/lib/invites/helpers/types.ts   |  12 ++
 .../src/components/form/select/Base.vue       |   2 +-
 .../global/ToastRenderer.stories.ts           |  64 +++----
 .../src/components/global/ToastRenderer.vue   |  34 ++--
 .../ui-components/src/helpers/global/toast.ts |   1 +
 .../src/stories/components/GlobalToast.vue    |  10 +-
 .../src/stories/composables/toast.ts          |  95 +++++++---
 12 files changed, 387 insertions(+), 116 deletions(-)
 create mode 100644 packages/frontend-2/components/invite/dialog/Server.vue
 create mode 100644 packages/frontend-2/lib/invites/helpers/constants.ts
 create mode 100644 packages/frontend-2/lib/invites/helpers/types.ts

diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index 04a59f8131..4083b7035f 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -124,7 +124,7 @@
         </MenuItems>
       </Transition>
     </Menu>
-    <SettingsServerUserInviteDialog v-model:open="showInviteDialog" />
+    <InviteDialogServer v-model:open="showInviteDialog" />
     <SettingsDialog
       v-model:open="showSettingsDialog"
       v-model:target-menu-item="settingsDialogTarget"
diff --git a/packages/frontend-2/components/invite/dialog/Server.vue b/packages/frontend-2/components/invite/dialog/Server.vue
new file mode 100644
index 0000000000..ea7e19a2c2
--- /dev/null
+++ b/packages/frontend-2/components/invite/dialog/Server.vue
@@ -0,0 +1,174 @@
+<template>
+  <LayoutDialog v-model:open="isOpen" max-width="md" :buttons="dialogButtons">
+    <template #header>Invite to server</template>
+    <form @submit="onSubmit">
+      <div class="flex flex-col gap-y-5 text-foreground mb-4">
+        <div v-for="(item, index) in fields" :key="item.key" class="flex gap-x-3">
+          <div class="flex flex-col gap-y-3 flex-1">
+            <hr v-if="index !== 0" class="border-outline-3" />
+            <div class="flex flex-row gap-x-3">
+              <div class="flex-1">
+                <FormTextInput
+                  v-model="item.value.email"
+                  :name="`email-${item.key}`"
+                  color="foundation"
+                  size="lg"
+                  placeholder="Email address"
+                  show-clear
+                  full-width
+                  use-label-in-errors
+                  show-label
+                  label="Email"
+                  :rules="[isEmail]"
+                />
+              </div>
+              <FormSelectServerRoles
+                v-if="allowServerRoleSelect"
+                v-model="item.value.serverRole"
+                label="Select role"
+                class="sm:w-48"
+                show-label
+                :disabled="anyMutationsLoading"
+                :allow-guest="isGuestMode"
+                :allow-admin="isAdmin"
+                mount-menu-on-body
+              />
+            </div>
+            <FormSelectProjects
+              v-model="item.value.project"
+              label="Select project"
+              class="w-full"
+              owned-only
+              show-optional
+              mount-menu-on-body
+              show-label
+              :name="`project-${index}`"
+            />
+          </div>
+          <div class="relative w-4">
+            <CommonTextLink
+              v-if="fields.length > 1"
+              class="top-10 absolute right-0"
+              :class="{ 'top-7': index === 0 }"
+              @click="removeInviteItem(index)"
+            >
+              <TrashIcon class="h-4 w-4 text-foreground-2" />
+            </CommonTextLink>
+          </div>
+        </div>
+        <FormButton
+          color="subtle"
+          :icon-left="PlusIcon"
+          :disabled="anyMutationsLoading"
+          @click="addInviteItem"
+        >
+          Invite another user
+        </FormButton>
+      </div>
+    </form>
+  </LayoutDialog>
+</template>
+<script setup lang="ts">
+import type { LayoutDialogButton } from '@speckle/ui-components'
+import { useMutationLoading } from '@vue/apollo-composable'
+import { useForm, useFieldArray } from 'vee-validate'
+import { useActiveUser } from '~~/lib/auth/composables/activeUser'
+import { useMixpanel } from '~~/lib/core/composables/mp'
+import { useServerInfo } from '~~/lib/core/composables/server'
+import { useInviteUserToProject } from '~~/lib/projects/composables/projectManagement'
+import { useInviteUserToServer } from '~~/lib/server/composables/invites'
+import { PlusIcon, TrashIcon } from '@heroicons/vue/24/outline'
+import type { InviteServerForm, InviteServerItem } from '~~/lib/invites/helpers/types'
+import { emptyInviteServerItem } from '~~/lib/invites/helpers/constants'
+import { isEmail } from '~~/lib/common/helpers/validation'
+
+const isOpen = defineModel<boolean>('open', { required: true })
+
+const { handleSubmit } = useForm<InviteServerForm>({
+  initialValues: {
+    fields: [
+      {
+        ...emptyInviteServerItem
+      }
+    ]
+  }
+})
+const {
+  fields,
+  replace: replaceFields,
+  push: pushInvite,
+  remove: removeInvite
+} = useFieldArray<InviteServerItem>('fields')
+const { mutate: inviteUserToServer } = useInviteUserToServer()
+const inviteUserToProject = useInviteUserToProject()
+const anyMutationsLoading = useMutationLoading()
+const { isAdmin } = useActiveUser()
+const { isGuestMode } = useServerInfo()
+const mixpanel = useMixpanel()
+
+const allowServerRoleSelect = computed(() => isAdmin.value || isGuestMode.value)
+const dialogButtons = computed((): LayoutDialogButton[] => [
+  {
+    text: 'Cancel',
+    props: { color: 'outline' },
+    onClick: () => {
+      isOpen.value = false
+    }
+  },
+  {
+    text: 'Invite',
+    props: {
+      submit: true,
+      disabled: anyMutationsLoading.value
+    },
+    onClick: onSubmit
+  }
+])
+
+const addInviteItem = () => {
+  pushInvite({ ...emptyInviteServerItem })
+}
+
+const removeInviteItem = (index: number) => {
+  removeInvite(index)
+}
+
+const onSubmit = handleSubmit(() => {
+  fields.value.forEach(async (invite) => {
+    invite.value.project
+      ? await inviteUserToProject(invite.value.project.id, [
+          {
+            email: invite.value.email,
+            serverRole: invite.value.serverRole
+          }
+        ])
+      : await inviteUserToServer([
+          {
+            email: invite.value.email,
+            serverRole: invite.value.serverRole
+          }
+        ])
+  })
+
+  mixpanel.track('Invite Action', {
+    type: 'server invite',
+    name: 'send',
+    multiple: fields.value.length !== 1,
+    count: fields.value.length,
+    hasProject: !!fields.value.some((invite) => invite.value.project),
+    to: 'email'
+  })
+
+  isOpen.value = false
+})
+
+watch(isOpen, (newVal, oldVal) => {
+  if (newVal && !oldVal) {
+    replaceFields([
+      {
+        ...emptyInviteServerItem
+      }
+    ])
+  }
+})
+</script>
diff --git a/packages/frontend-2/components/singleton/ToastManager.vue b/packages/frontend-2/components/singleton/ToastManager.vue
index 43499b8f70..616aea4125 100644
--- a/packages/frontend-2/components/singleton/ToastManager.vue
+++ b/packages/frontend-2/components/singleton/ToastManager.vue
@@ -1,6 +1,6 @@
 <template>
   <Teleport to="#toast-portal">
-    <GlobalToastRenderer v-model:notification="notification" />
+    <GlobalToastRenderer v-model:notifications="notifications" @dismiss="dismiss" />
   </Teleport>
 </template>
 
@@ -8,13 +8,13 @@
 import { useGlobalToastManager } from '~~/lib/common/composables/toast'
 import { GlobalToastRenderer } from '@speckle/ui-components'
 
-const { currentNotification, dismiss } = useGlobalToastManager()
+const { currentNotifications, dismissAll, dismiss } = useGlobalToastManager()
 
-const notification = computed({
-  get: () => currentNotification.value,
+const notifications = computed({
+  get: () => currentNotifications.value,
   set: (newVal) => {
     if (!newVal) {
-      dismiss()
+      dismissAll()
     }
   }
 })
diff --git a/packages/frontend-2/lib/common/composables/toast.ts b/packages/frontend-2/lib/common/composables/toast.ts
index 657afacac7..58395d9ff0 100644
--- a/packages/frontend-2/lib/common/composables/toast.ts
+++ b/packages/frontend-2/lib/common/composables/toast.ts
@@ -1,60 +1,95 @@
-import { useTimeoutFn } from '@vueuse/core'
 import type { Optional } from '@speckle/shared'
 import type { ToastNotification } from '@speckle/ui-components'
+import { useTimeoutFn } from '@vueuse/core'
 import { ToastNotificationType } from '@speckle/ui-components'
 import { useSynchronizedCookie } from '~/lib/common/composables/reactiveCookie'
+import { nanoid } from 'nanoid'
 
 /**
  * Persisting toast state between reqs and between CSR & SSR loads so that we can trigger
  * toasts anywhere and anytime
  */
 const useGlobalToastState = () =>
-  useSynchronizedCookie<Optional<ToastNotification>>('global-toast-state')
+  useSynchronizedCookie<Optional<ToastNotification[]>>('global-toast-state')
 
 /**
  * Set up a new global toast manager/renderer (don't use this in multiple components that live at the same time)
  */
 export function useGlobalToastManager() {
+  type Timeout = {
+    id: string
+    stop: () => void
+  }
+
   const stateNotification = useGlobalToastState()
 
-  const currentNotification = ref(stateNotification.value)
-  const readOnlyNotification = computed(() => currentNotification.value)
+  const timeouts = ref<Timeout[]>([])
+  const currentNotifications = ref<ToastNotification[]>(
+    Array.isArray(stateNotification.value) ? stateNotification.value : []
+  )
+  const readOnlyNotification = computed(() => currentNotifications.value)
 
-  const dismiss = () => {
-    currentNotification.value = undefined
-    stateNotification.value = undefined
+  // Remove a specific notification from the state
+  const removeNotification = (id: string) => {
+    const index = currentNotifications.value.findIndex((n) => n.id === id)
+    if (index !== -1) {
+      currentNotifications.value.splice(index, 1)
+      // Clean up timeout
+      timeouts.value = timeouts.value.filter((t) => t.id !== id)
+    }
   }
 
-  const { start, stop } = useTimeoutFn(() => {
-    dismiss()
-  }, 4000)
+  // Create a timeout for a notification
+  const createTimeout = (notification: ToastNotification) => {
+    const { stop } = useTimeoutFn(() => {
+      if (notification.id) {
+        removeNotification(notification.id)
+      }
+    }, 4000)
+    return stop
+  }
 
   watch(
     stateNotification,
     (newVal) => {
       if (!newVal) return
-      if (import.meta.server) {
-        currentNotification.value = newVal
-        return
-      }
+      currentNotifications.value = newVal
 
-      // First dismiss old notification, then set a new one on next tick
-      // this is so that the old one actually disappears from the screen for the user,
-      // instead of just having its contents replaced
-      dismiss()
+      if (import.meta.server) return
 
-      nextTick(() => {
-        currentNotification.value = newVal
+      // Create timeout for the new notification
+      const index = currentNotifications.value.length - 1
+      const lastNotification = newVal[index]
 
-        // (re-)init timeout
-        stop()
-        if (newVal.autoClose !== false) start()
-      })
+      if (lastNotification && !lastNotification.autoClose) {
+        timeouts.value.push({
+          id: lastNotification.id as string,
+          stop: createTimeout(lastNotification)
+        })
+      }
     },
     { deep: true, immediate: true }
   )
 
-  return { currentNotification: readOnlyNotification, dismiss }
+  // Function to dismiss a specific notification
+  const dismiss = (notification: ToastNotification) => {
+    if (!notification.id) return
+
+    const targetTimeout = timeouts.value.find((t) => t.id === notification.id)
+    if (targetTimeout) {
+      targetTimeout.stop()
+    }
+    removeNotification(notification.id as string)
+  }
+
+  // Dismiss all notifications
+  const dismissAll = () => {
+    timeouts.value.forEach((timeout) => timeout.stop())
+    timeouts.value = []
+    currentNotifications.value = []
+  }
+
+  return { currentNotifications: readOnlyNotification, dismiss, dismissAll }
 }
 
 /**
@@ -68,7 +103,11 @@ export function useGlobalToast() {
    * Trigger a new toast notification
    */
   const triggerNotification = (notification: ToastNotification) => {
-    stateNotification.value = notification
+    const newNotification = { ...notification, id: nanoid() }
+
+    stateNotification.value
+      ? stateNotification.value.push(newNotification)
+      : (stateNotification.value = [newNotification])
 
     if (import.meta.server) {
       logger.info('Queued SSR toast notification', notification)
diff --git a/packages/frontend-2/lib/invites/helpers/constants.ts b/packages/frontend-2/lib/invites/helpers/constants.ts
new file mode 100644
index 0000000000..d31c358f68
--- /dev/null
+++ b/packages/frontend-2/lib/invites/helpers/constants.ts
@@ -0,0 +1,8 @@
+import type { InviteServerItem } from '~~/lib/invites/helpers/types'
+import { Roles } from '@speckle/shared'
+
+export const emptyInviteServerItem: InviteServerItem = {
+  email: '',
+  serverRole: Roles.Server.User,
+  project: undefined
+}
diff --git a/packages/frontend-2/lib/invites/helpers/types.ts b/packages/frontend-2/lib/invites/helpers/types.ts
new file mode 100644
index 0000000000..aeae0c16ad
--- /dev/null
+++ b/packages/frontend-2/lib/invites/helpers/types.ts
@@ -0,0 +1,12 @@
+import type { ServerRoles } from '@speckle/shared'
+import type { FormSelectProjects_ProjectFragment } from '~~/lib/common/generated/gql/graphql'
+
+export type InviteServerItem = {
+  email: string
+  serverRole: ServerRoles
+  project?: FormSelectProjects_ProjectFragment
+}
+
+export interface InviteServerForm {
+  fields: InviteServerItem[]
+}
diff --git a/packages/ui-components/src/components/form/select/Base.vue b/packages/ui-components/src/components/form/select/Base.vue
index 3f988eb635..5c72ffc5f2 100644
--- a/packages/ui-components/src/components/form/select/Base.vue
+++ b/packages/ui-components/src/components/form/select/Base.vue
@@ -127,7 +127,7 @@
                       ref="searchInput"
                       v-model="searchValue"
                       type="text"
-                      class="py-1 pl-7 w-full bg-foundation placeholder:font-normal normal placeholder:text-foreground-2 text-[13px]"
+                      class="py-1 pl-7 w-full bg-foundation placeholder:font-normal normal placeholder:text-foreground-2 text-[13px] focus-visible:[box-shadow:none] rounded-md hover:border-outline-5 focus-visible:border-outline-4"
                       :placeholder="searchPlaceholder"
                       @keydown.stop
                     />
diff --git a/packages/ui-components/src/components/global/ToastRenderer.stories.ts b/packages/ui-components/src/components/global/ToastRenderer.stories.ts
index ce1e1fe540..fe7b692197 100644
--- a/packages/ui-components/src/components/global/ToastRenderer.stories.ts
+++ b/packages/ui-components/src/components/global/ToastRenderer.stories.ts
@@ -7,7 +7,7 @@ import { ToastNotificationType } from '~~/src/helpers/global/toast'
 import type { ToastNotification } from '~~/src/helpers/global/toast'
 import { useGlobalToast } from '~~/src/stories/composables/toast'
 
-type StoryType = StoryObj<{ notification: ToastNotification }>
+type StoryType = StoryObj<{ notifications: ToastNotification[] }>
 
 export default {
   component: ToastRenderer,
@@ -20,12 +20,11 @@ export default {
     }
   },
   argTypes: {
-    notification: {
-      description: 'ToastNotification type object, nullable'
+    notifications: {
+      description: 'ToastNotification array, nullable'
     },
-    'update:notification': {
-      description:
-        "Notification prop update event. Enables two-way binding through 'v-model:notification'"
+    dismiss: {
+      description: 'Dismiss event for a notification'
     }
   }
 } as Meta
@@ -35,11 +34,11 @@ export const Default: StoryType = {
     components: { ToastRenderer, FormButton },
     setup() {
       const { triggerNotification } = useGlobalToast()
-      const notification = ref(null as Nullable<ToastNotification>)
+      const notifications = ref(null as Nullable<ToastNotification[]>)
       const onClick = () => {
-        triggerNotification(args.notification)
+        triggerNotification(args.notifications[0])
       }
-      return { args, onClick, notification }
+      return { args, onClick, notifications }
     },
     template: `
       <div>
@@ -50,30 +49,34 @@ export const Default: StoryType = {
   parameters: {
     docs: {
       source: {
-        code: '<GlobalToastRenderer v-model:notification="notification"/>'
+        code: '<GlobalToastRenderer v-model:notifications="notifications" />'
       }
     }
   },
   args: {
-    notification: {
-      type: ToastNotificationType.Info,
-      title: 'Title',
-      description: 'Description',
+    notifications: [
+      {
+        type: ToastNotificationType.Info,
+        title: 'Title',
+        description: 'Description',
 
-      cta: {
-        title: 'CTA'
+        cta: {
+          title: 'CTA'
+        }
       }
-    }
+    ]
   }
 }
 
 export const WithManualClose: StoryType = {
   ...Default,
   args: {
-    notification: {
-      ...Default.args!.notification!,
-      autoClose: false
-    }
+    notifications: [
+      {
+        ...Default.args!.notifications![0],
+        autoClose: false
+      }
+    ]
   }
 }
 
@@ -81,23 +84,20 @@ export const NoCtaOrDescription: StoryObj = {
   render: (args) => ({
     components: { ToastRenderer, FormButton },
     setup() {
-      const notification = ref(null as Nullable<ToastNotification>)
+      const { triggerNotification } = useGlobalToast()
+      const notifications = ref(null as Nullable<ToastNotification[]>)
       const onClick = () => {
-        // Update notification without cta or description
-        notification.value = {
+        triggerNotification({
           type: ToastNotificationType.Info,
           title: 'Displays a toast notification'
-        }
-
-        // Clear after 2s
-        setTimeout(() => (notification.value = null), 2000)
+        })
       }
-      return { args, onClick, notification }
+      return { args, onClick, notifications }
     },
     template: `
       <div>
         <FormButton @click="onClick">Trigger Title Only</FormButton>
-        <ToastRenderer v-model:notification="notification"/>
+        <ToastRenderer v-model:notifications="notifications" />
       </div>
     `
   }),
@@ -108,8 +108,8 @@ export const NoCtaOrDescription: StoryObj = {
       },
       source: {
         code: `
-<FormButton @click="onClick">Trigger Title Only</FormButton>
-<ToastRenderer v-model:notification="notification"/>
+          <FormButton @click="onClick">Trigger Title Only</FormButton>
+          <ToastRenderer v-model:notifications="notifications" />
         `
       }
     }
diff --git a/packages/ui-components/src/components/global/ToastRenderer.vue b/packages/ui-components/src/components/global/ToastRenderer.vue
index 01bdc1a82f..41d68a5016 100644
--- a/packages/ui-components/src/components/global/ToastRenderer.vue
+++ b/packages/ui-components/src/components/global/ToastRenderer.vue
@@ -5,7 +5,7 @@
   >
     <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
       <!-- Notification panel, dynamically insert this into the live region when it needs to be displayed -->
-      <Transition
+      <TransitionGroup
         enter-active-class="transform ease-out duration-300 transition"
         enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
         enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
@@ -14,9 +14,10 @@
         leave-to-class="opacity-0"
       >
         <div
-          v-if="notification"
+          v-for="(notification, index) in notifications"
+          :key="`toast-${index}`"
           class="pointer-events-auto w-full max-w-[20rem] overflow-hidden rounded bg-foundation text-foreground shadow-lg border border-outline-2 p-3"
-          :class="{ 'pb-2': isTitleOnly }"
+          :class="{ 'pb-2': !notification?.description && !notification?.cta }"
         >
           <div class="flex space-x-2">
             <div class="flex-shrink-0 mt-1">
@@ -60,7 +61,7 @@
                   color="subtle"
                   :to="notification.cta.url"
                   size="sm"
-                  @click="onCtaClick"
+                  @click="(e: MouseEvent) => onCtaClick(notification, e)"
                 >
                   {{ notification.cta.title }}
                 </FormButton>
@@ -70,7 +71,7 @@
               <button
                 type="button"
                 class="inline-flex rounded-md bg-foundation text-foreground-2 hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
-                @click="dismiss"
+                @click="dismiss(notification)"
               >
                 <span class="sr-only">Close</span>
                 <XMarkIcon class="h-5 w-5" aria-hidden="true" />
@@ -78,7 +79,7 @@
             </div>
           </div>
         </div>
-      </Transition>
+      </TransitionGroup>
     </div>
   </div>
 </template>
@@ -91,29 +92,24 @@ import {
   InformationCircleIcon,
   XMarkIcon
 } from '@heroicons/vue/20/solid'
-import { computed } from 'vue'
 import type { MaybeNullOrUndefined } from '@speckle/shared'
 import { ToastNotificationType } from '~~/src/helpers/global/toast'
 import type { ToastNotification } from '~~/src/helpers/global/toast'
 
 const emit = defineEmits<{
-  (e: 'update:notification', val: MaybeNullOrUndefined<ToastNotification>): void
+  (e: 'dismiss', val: ToastNotification): void
 }>()
 
-const props = defineProps<{
-  notification: MaybeNullOrUndefined<ToastNotification>
+defineProps<{
+  notifications: MaybeNullOrUndefined<ToastNotification[]>
 }>()
 
-const isTitleOnly = computed(
-  () => !props.notification?.description && !props.notification?.cta
-)
-
-const dismiss = () => {
-  emit('update:notification', null)
+const dismiss = (notification: ToastNotification) => {
+  emit('dismiss', notification)
 }
 
-const onCtaClick = (e: MouseEvent) => {
-  props.notification?.cta?.onClick?.(e)
-  dismiss()
+const onCtaClick = (notification: ToastNotification, e: MouseEvent) => {
+  notification.cta?.onClick?.(e)
+  dismiss(notification)
 }
 </script>
diff --git a/packages/ui-components/src/helpers/global/toast.ts b/packages/ui-components/src/helpers/global/toast.ts
index 7052f86a22..4c070cf69c 100644
--- a/packages/ui-components/src/helpers/global/toast.ts
+++ b/packages/ui-components/src/helpers/global/toast.ts
@@ -25,4 +25,5 @@ export type ToastNotification = {
    * Defaults to true
    */
   autoClose?: boolean
+  id?: string
 }
diff --git a/packages/ui-components/src/stories/components/GlobalToast.vue b/packages/ui-components/src/stories/components/GlobalToast.vue
index 38b795ea8e..401583d092 100644
--- a/packages/ui-components/src/stories/components/GlobalToast.vue
+++ b/packages/ui-components/src/stories/components/GlobalToast.vue
@@ -1,18 +1,18 @@
 <template>
-  <ToastRenderer v-model:notification="notification" />
+  <ToastRenderer v-model:notifications="notifications" @dismiss="dismiss" />
 </template>
 <script setup lang="ts">
 import { computed } from 'vue'
 import ToastRenderer from '~~/src/components/global/ToastRenderer.vue'
 import { useGlobalToastManager } from '~~/src/stories/composables/toast'
 
-const { currentNotification, dismiss } = useGlobalToastManager()
+const { currentNotifications, dismissAll, dismiss } = useGlobalToastManager()
 
-const notification = computed({
-  get: () => currentNotification.value,
+const notifications = computed({
+  get: () => currentNotifications.value,
   set: (newVal) => {
     if (!newVal) {
-      dismiss()
+      dismissAll()
     }
   }
 })
diff --git a/packages/ui-components/src/stories/composables/toast.ts b/packages/ui-components/src/stories/composables/toast.ts
index 2614223549..5342537b33 100644
--- a/packages/ui-components/src/stories/composables/toast.ts
+++ b/packages/ui-components/src/stories/composables/toast.ts
@@ -1,57 +1,94 @@
+import type { ToastNotification } from '~~/src/helpers/global/toast'
+import type { Optional } from '@speckle/shared'
 import { useTimeoutFn, createGlobalState } from '@vueuse/core'
-import type { Nullable } from '@speckle/shared'
-import { computed, nextTick, watch } from 'vue'
+import { computed, watch } from 'vue'
 import { ref } from 'vue'
-import type { ToastNotification } from '~~/src/helpers/global/toast'
+import { nanoid } from 'nanoid'
 
 /**
  * Development-only version of the toast notification state. Do not export this out from the library as it can't work in SSR!
  */
 
 const useGlobalToastState = createGlobalState(() =>
-  ref(null as Nullable<ToastNotification>)
+  ref([] as Optional<ToastNotification[]>)
 )
 
 /**
  * Set up a new global toast manager/renderer (don't use this in multiple components that live at the same time)
  */
 export function useGlobalToastManager() {
+  type Timeout = {
+    id: string
+    stop: () => void
+  }
+
   const stateNotification = useGlobalToastState()
 
-  const currentNotification = ref(stateNotification.value)
-  const readOnlyNotification = computed(() => currentNotification.value)
+  const timeouts = ref<Timeout[]>([])
+  const currentNotifications = ref<ToastNotification[]>(
+    Array.isArray(stateNotification.value) ? stateNotification.value : []
+  )
+  const readOnlyNotification = computed(() => currentNotifications.value)
 
-  const { start, stop } = useTimeoutFn(() => {
-    dismiss()
-  }, 4000)
+  // Remove a specific notification from the state
+  const removeNotification = (id: string) => {
+    const index = currentNotifications.value.findIndex((n) => n.id === id)
+    if (index !== -1) {
+      currentNotifications.value.splice(index, 1)
+      // Clean up timeout
+      timeouts.value = timeouts.value.filter((t) => t.id !== id)
+    }
+  }
+
+  // Create a timeout for a notification
+  const createTimeout = (notification: ToastNotification) => {
+    const { stop } = useTimeoutFn(() => {
+      if (notification.id) {
+        removeNotification(notification.id)
+      }
+    }, 4000)
+    return stop
+  }
 
   watch(
     stateNotification,
-    async (newVal) => {
+    (newVal) => {
       if (!newVal) return
+      currentNotifications.value = newVal
 
-      // First dismiss old notification, then set a new one on next tick
-      // this is so that the old one actually disappears from the screen for the user,
-      // instead of just having its contents replaced
-      dismiss()
-
-      await nextTick(() => {
-        currentNotification.value = newVal
+      // Create timeout for the new notification
+      const index = currentNotifications.value.length - 1
+      const lastNotification = newVal[index]
 
-        // (re-)init timeout
-        stop()
-        if (newVal.autoClose !== false) start()
-      })
+      if (lastNotification && !lastNotification.autoClose) {
+        timeouts.value.push({
+          id: lastNotification.id as string,
+          stop: createTimeout(lastNotification)
+        })
+      }
     },
-    { deep: true }
+    { deep: true, immediate: true }
   )
 
-  const dismiss = () => {
-    currentNotification.value = null
-    stateNotification.value = null
+  // Function to dismiss a specific notification
+  const dismiss = (notification: ToastNotification) => {
+    if (!notification.id) return
+
+    const targetTimeout = timeouts.value.find((t) => t.id === notification.id)
+    if (targetTimeout) {
+      targetTimeout.stop()
+    }
+    removeNotification(notification.id)
   }
 
-  return { currentNotification: readOnlyNotification, dismiss }
+  // Dismiss all notifications
+  const dismissAll = () => {
+    timeouts.value.forEach((timeout) => timeout.stop())
+    timeouts.value = []
+    currentNotifications.value = []
+  }
+
+  return { currentNotifications: readOnlyNotification, dismiss, dismissAll }
 }
 
 /**
@@ -64,7 +101,11 @@ export function useGlobalToast() {
    * Trigger a new toast notification
    */
   const triggerNotification = (notification: ToastNotification) => {
-    stateNotification.value = notification
+    const newNotification = { ...notification, id: nanoid() }
+
+    stateNotification.value
+      ? stateNotification.value.push(newNotification)
+      : (stateNotification.value = [newNotification])
   }
 
   return { triggerNotification }

From 3c5a7bb63aa117a7646807e5d1eda3c952307d8b Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Wed, 11 Dec 2024 15:03:49 +0100
Subject: [PATCH 02/10] Remove old dialog

---
 .../components/onboarding/checklist/v1.vue    |   2 +-
 .../settings/server/ActiveUsers.vue           |   2 +-
 .../settings/server/PendingInvitations.vue    |   2 +-
 .../settings/server/user/InviteDialog.vue     | 136 ------------------
 4 files changed, 3 insertions(+), 139 deletions(-)
 delete mode 100644 packages/frontend-2/components/settings/server/user/InviteDialog.vue

diff --git a/packages/frontend-2/components/onboarding/checklist/v1.vue b/packages/frontend-2/components/onboarding/checklist/v1.vue
index 0dd619fb67..73e647a221 100644
--- a/packages/frontend-2/components/onboarding/checklist/v1.vue
+++ b/packages/frontend-2/components/onboarding/checklist/v1.vue
@@ -213,7 +213,7 @@
     >
       <template #header>Your first upload</template>
     </OnboardingDialogFirstSend>
-    <SettingsServerUserInviteDialog
+    <InviteDialogServer
       v-model:open="showServerInviteDialog"
       @update:open="(v) => (!v ? markComplete(3) : '')"
     />
diff --git a/packages/frontend-2/components/settings/server/ActiveUsers.vue b/packages/frontend-2/components/settings/server/ActiveUsers.vue
index 3d9150edc9..da61c5a232 100644
--- a/packages/frontend-2/components/settings/server/ActiveUsers.vue
+++ b/packages/frontend-2/components/settings/server/ActiveUsers.vue
@@ -98,7 +98,7 @@
       :user="userToModify"
     />
 
-    <SettingsServerUserInviteDialog v-model:open="showInviteDialog" />
+    <InviteDialogServer v-model:open="showInviteDialog" />
   </div>
 </template>
 
diff --git a/packages/frontend-2/components/settings/server/PendingInvitations.vue b/packages/frontend-2/components/settings/server/PendingInvitations.vue
index 2644c01560..844e2801be 100644
--- a/packages/frontend-2/components/settings/server/PendingInvitations.vue
+++ b/packages/frontend-2/components/settings/server/PendingInvitations.vue
@@ -70,7 +70,7 @@
       @infinite="onInfiniteLoad"
     />
 
-    <SettingsServerUserInviteDialog v-model:open="showInviteDialog" />
+    <InviteDialogServer v-model:open="showInviteDialog" />
   </div>
 </template>
 
diff --git a/packages/frontend-2/components/settings/server/user/InviteDialog.vue b/packages/frontend-2/components/settings/server/user/InviteDialog.vue
deleted file mode 100644
index b8e38bf716..0000000000
--- a/packages/frontend-2/components/settings/server/user/InviteDialog.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-  <LayoutDialog v-model:open="isOpen" max-width="md" :buttons="dialogButtons">
-    <template #header>Get your colleagues in!</template>
-    <form @submit="onSubmit">
-      <div class="flex flex-col gap-y-3 text-foreground mb-4">
-        <p class="text-body-xs">
-          Speckle will send a server invite link to the email(-s) below. You can also
-          add a personal message if you want to. To add multiple e-mails, seperate them
-          with commas.
-        </p>
-        <FormTextInput
-          name="emailsString"
-          color="foundation"
-          label="E-mail"
-          show-label
-          placeholder="example@example.com, example2@example.com"
-          :rules="[isRequired, isOneOrMultipleEmails]"
-          :disabled="anyMutationsLoading"
-        />
-        <FormSelectServerRoles
-          v-if="allowServerRoleSelect"
-          v-model="serverRole"
-          label="Select server role"
-          class="w-full sm:w-60"
-          show-label
-          :allow-guest="isGuestMode"
-          :allow-admin="isAdmin"
-          mount-menu-on-body
-        />
-        <FormTextArea
-          name="message"
-          show-optional
-          show-label
-          label="Message"
-          color="foundation"
-          :disabled="anyMutationsLoading"
-          :rules="[isStringOfLength({ maxLength: 1024 })]"
-          placeholder="Write an optional invitation message!"
-        />
-        <FormSelectProjects
-          v-model="selectedProject"
-          label="Select project to invite to"
-          class="w-full sm:w-60"
-          owned-only
-          show-optional
-          mount-menu-on-body
-          show-label
-        />
-      </div>
-    </form>
-  </LayoutDialog>
-</template>
-<script setup lang="ts">
-import { Roles } from '@speckle/shared'
-import type { Optional, ServerRoles } from '@speckle/shared'
-import type { LayoutDialogButton } from '@speckle/ui-components'
-import { useMutationLoading } from '@vue/apollo-composable'
-import { useForm } from 'vee-validate'
-import { useActiveUser } from '~~/lib/auth/composables/activeUser'
-import type { FormSelectProjects_ProjectFragment } from '~~/lib/common/generated/gql/graphql'
-import {
-  isRequired,
-  isOneOrMultipleEmails,
-  isStringOfLength
-} from '~~/lib/common/helpers/validation'
-import { useMixpanel } from '~~/lib/core/composables/mp'
-import { useServerInfo } from '~~/lib/core/composables/server'
-import { useInviteUserToProject } from '~~/lib/projects/composables/projectManagement'
-import { useInviteUserToServer } from '~~/lib/server/composables/invites'
-
-const selectedProject = ref(undefined as Optional<FormSelectProjects_ProjectFragment>)
-const serverRole = ref<ServerRoles>(Roles.Server.User)
-
-const { handleSubmit } = useForm<{ message?: string; emailsString: string }>()
-const { mutate: inviteUserToServer } = useInviteUserToServer()
-const inviteUserToProject = useInviteUserToProject()
-const anyMutationsLoading = useMutationLoading()
-const { isAdmin } = useActiveUser()
-const { isGuestMode } = useServerInfo()
-
-const isOpen = defineModel<boolean>('open', { required: true })
-
-const allowServerRoleSelect = computed(() => isAdmin.value || isGuestMode.value)
-
-const mp = useMixpanel()
-const onSubmit = handleSubmit(async (values) => {
-  const emails = values.emailsString.split(',').map((i) => i.trim())
-  const project = selectedProject.value
-
-  const success = project
-    ? await inviteUserToProject(
-        project.id,
-        emails.map((email) => ({
-          email,
-          serverRole: allowServerRoleSelect.value ? serverRole.value : undefined
-        }))
-      )
-    : await inviteUserToServer(
-        emails.map((email) => ({
-          email,
-          message: values.message,
-          serverRole: allowServerRoleSelect.value ? serverRole.value : undefined
-        }))
-      )
-  if (success) {
-    isOpen.value = false
-    selectedProject.value = undefined
-    mp.track('Invite Action', {
-      type: 'server invite',
-      name: 'send',
-      multiple: emails.length !== 1,
-      count: emails.length,
-      hasProject: !!project,
-      to: 'email'
-    })
-  }
-})
-
-const dialogButtons = computed((): LayoutDialogButton[] => [
-  {
-    text: 'Cancel',
-    props: { color: 'outline' },
-    onClick: () => {
-      isOpen.value = false
-    }
-  },
-  {
-    text: 'Send',
-    props: {
-      submit: true,
-      disabled: anyMutationsLoading.value
-    },
-    onClick: onSubmit
-  }
-])
-</script>

From 5dee917d3550f2791210d47fe5db84e9cf2e735a Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Wed, 11 Dec 2024 15:07:20 +0100
Subject: [PATCH 03/10] Updated toasts to support multiple invites

---
 .../lib/projects/composables/projectManagement.ts      | 10 ++++++++--
 packages/frontend-2/lib/server/composables/invites.ts  | 10 ++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/frontend-2/lib/projects/composables/projectManagement.ts b/packages/frontend-2/lib/projects/composables/projectManagement.ts
index d4520d4677..3049df31f2 100644
--- a/packages/frontend-2/lib/projects/composables/projectManagement.ts
+++ b/packages/frontend-2/lib/projects/composables/projectManagement.ts
@@ -308,13 +308,19 @@ export function useInviteUserToProject() {
     if (err) {
       triggerNotification({
         type: ToastNotificationType.Danger,
-        title: 'Invitation failed',
+        title:
+          input.length > 1
+            ? "Couldn't send invites"
+            : `Coudldn't send invite to ${input[0].email}`,
         description: err
       })
     } else {
       triggerNotification({
         type: ToastNotificationType.Success,
-        title: 'Invite successfully sent'
+        title:
+          input.length > 1
+            ? 'Invites successfully send'
+            : `Invite successfully sent to ${input[0].email}`
       })
     }
 
diff --git a/packages/frontend-2/lib/server/composables/invites.ts b/packages/frontend-2/lib/server/composables/invites.ts
index c0b73713dc..cd18c32226 100644
--- a/packages/frontend-2/lib/server/composables/invites.ts
+++ b/packages/frontend-2/lib/server/composables/invites.ts
@@ -55,13 +55,19 @@ export function useInviteUserToServer() {
       if (res?.data?.serverInviteBatchCreate) {
         triggerNotification({
           type: ToastNotificationType.Success,
-          title: `Server invite${finalInput.length > 1 ? 's' : ''} sent`
+          title:
+            finalInput.length > 1
+              ? 'Server invites sent'
+              : `Server invite sent to ${finalInput[0].email}`
         })
       } else {
         const errMsg = getFirstErrorMessage(res?.errors)
         triggerNotification({
           type: ToastNotificationType.Danger,
-          title: `Couldn't send invite${finalInput.length > 1 ? 's' : ''}`,
+          title:
+            finalInput.length > 1
+              ? "Couldn't send invites"
+              : `Couldn't send invite to ${finalInput[0].email}`,
           description: errMsg
         })
       }

From a0e3d5495600d4da1002a385416e6c7b3ca727aa Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Wed, 11 Dec 2024 15:29:30 +0100
Subject: [PATCH 04/10] Fix input size

---
 packages/frontend-2/components/invite/dialog/Server.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/frontend-2/components/invite/dialog/Server.vue b/packages/frontend-2/components/invite/dialog/Server.vue
index ea7e19a2c2..a23a7cded2 100644
--- a/packages/frontend-2/components/invite/dialog/Server.vue
+++ b/packages/frontend-2/components/invite/dialog/Server.vue
@@ -12,7 +12,6 @@
                   v-model="item.value.email"
                   :name="`email-${item.key}`"
                   color="foundation"
-                  size="lg"
                   placeholder="Email address"
                   show-clear
                   full-width

From 8dda3d92dcc2b92bbe2fee227062b5993851cde8 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Wed, 11 Dec 2024 17:05:30 +0100
Subject: [PATCH 05/10] Fix toast issue

---
 packages/frontend-2/lib/common/composables/toast.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/frontend-2/lib/common/composables/toast.ts b/packages/frontend-2/lib/common/composables/toast.ts
index 58395d9ff0..a2b5911c65 100644
--- a/packages/frontend-2/lib/common/composables/toast.ts
+++ b/packages/frontend-2/lib/common/composables/toast.ts
@@ -55,8 +55,6 @@ export function useGlobalToastManager() {
       if (!newVal) return
       currentNotifications.value = newVal
 
-      if (import.meta.server) return
-
       // Create timeout for the new notification
       const index = currentNotifications.value.length - 1
       const lastNotification = newVal[index]

From 374b34ea5f16160d45f57e376aa3a2e3717b2b2f Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Wed, 11 Dec 2024 21:56:43 +0100
Subject: [PATCH 06/10] Strip empty invites

---
 packages/frontend-2/components/invite/dialog/Server.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/frontend-2/components/invite/dialog/Server.vue b/packages/frontend-2/components/invite/dialog/Server.vue
index a23a7cded2..f3be478aea 100644
--- a/packages/frontend-2/components/invite/dialog/Server.vue
+++ b/packages/frontend-2/components/invite/dialog/Server.vue
@@ -133,7 +133,9 @@ const removeInviteItem = (index: number) => {
 }
 
 const onSubmit = handleSubmit(() => {
-  fields.value.forEach(async (invite) => {
+  const invites = fields.value.filter((invite) => invite.value.email)
+
+  invites.forEach(async (invite) => {
     invite.value.project
       ? await inviteUserToProject(invite.value.project.id, [
           {

From 06b8a3dc9312513d97d327a9c92717313b669acb Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 12 Dec 2024 13:34:34 +0100
Subject: [PATCH 07/10] Alignment

---
 packages/frontend-2/components/invite/dialog/Server.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-2/components/invite/dialog/Server.vue b/packages/frontend-2/components/invite/dialog/Server.vue
index f3be478aea..754c5d68fc 100644
--- a/packages/frontend-2/components/invite/dialog/Server.vue
+++ b/packages/frontend-2/components/invite/dialog/Server.vue
@@ -6,7 +6,7 @@
         <div v-for="(item, index) in fields" :key="item.key" class="flex gap-x-3">
           <div class="flex flex-col gap-y-3 flex-1">
             <hr v-if="index !== 0" class="border-outline-3" />
-            <div class="flex flex-row gap-x-3">
+            <div class="flex flex-row gap-x-3 items-center">
               <div class="flex-1">
                 <FormTextInput
                   v-model="item.value.email"

From 41bd3d14782975b187acc9b2942be98c1b97a566 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 12 Dec 2024 13:36:48 +0100
Subject: [PATCH 08/10] Remove bottom margin

---
 packages/frontend-2/components/invite/dialog/Server.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-2/components/invite/dialog/Server.vue b/packages/frontend-2/components/invite/dialog/Server.vue
index 754c5d68fc..679d16be21 100644
--- a/packages/frontend-2/components/invite/dialog/Server.vue
+++ b/packages/frontend-2/components/invite/dialog/Server.vue
@@ -2,7 +2,7 @@
   <LayoutDialog v-model:open="isOpen" max-width="md" :buttons="dialogButtons">
     <template #header>Invite to server</template>
     <form @submit="onSubmit">
-      <div class="flex flex-col gap-y-5 text-foreground mb-4">
+      <div class="flex flex-col gap-y-5 text-foreground">
         <div v-for="(item, index) in fields" :key="item.key" class="flex gap-x-3">
           <div class="flex flex-col gap-y-3 flex-1">
             <hr v-if="index !== 0" class="border-outline-3" />

From a79b54449208c429479583870812206308cf871b Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 12 Dec 2024 13:45:16 +0100
Subject: [PATCH 09/10] Reactivity fix

---
 packages/frontend-2/components/form/select/ServerRoles.vue | 5 +++--
 packages/frontend-2/components/invite/dialog/Server.vue    | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/frontend-2/components/form/select/ServerRoles.vue b/packages/frontend-2/components/form/select/ServerRoles.vue
index 25028ebd8a..9aa4c2bceb 100644
--- a/packages/frontend-2/components/form/select/ServerRoles.vue
+++ b/packages/frontend-2/components/form/select/ServerRoles.vue
@@ -7,7 +7,7 @@
     :disabled-item-tooltip="
       !allowGuest ? 'The Guest role isn\'t enabled on the server' : ''
     "
-    name="serverRoles"
+    :name="name ?? 'serverRoles'"
     label="Role"
     :show-label="showLabel"
     class="min-w-[110px]"
@@ -75,7 +75,8 @@ const props = defineProps({
   allowAdmin: Boolean,
   allowArchived: Boolean,
   fullyControlValue: Boolean,
-  showLabel: Boolean
+  showLabel: Boolean,
+  name: String
 })
 
 const elementToWatchForChanges = ref(null as Nullable<HTMLElement>)
diff --git a/packages/frontend-2/components/invite/dialog/Server.vue b/packages/frontend-2/components/invite/dialog/Server.vue
index 679d16be21..502d497984 100644
--- a/packages/frontend-2/components/invite/dialog/Server.vue
+++ b/packages/frontend-2/components/invite/dialog/Server.vue
@@ -25,6 +25,7 @@
                 v-if="allowServerRoleSelect"
                 v-model="item.value.serverRole"
                 label="Select role"
+                :name="`role-${item.key}`"
                 class="sm:w-48"
                 show-label
                 :disabled="anyMutationsLoading"

From 9a9bc180e9254c826071fef6f6924f01b9d096ec Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 12 Dec 2024 14:25:09 +0100
Subject: [PATCH 10/10] Change title

---
 packages/frontend-2/components/invite/dialog/Server.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-2/components/invite/dialog/Server.vue b/packages/frontend-2/components/invite/dialog/Server.vue
index 502d497984..c02350d4bb 100644
--- a/packages/frontend-2/components/invite/dialog/Server.vue
+++ b/packages/frontend-2/components/invite/dialog/Server.vue
@@ -1,6 +1,6 @@
 <template>
   <LayoutDialog v-model:open="isOpen" max-width="md" :buttons="dialogButtons">
-    <template #header>Invite to server</template>
+    <template #header>Invite to Speckle</template>
     <form @submit="onSubmit">
       <div class="flex flex-col gap-y-5 text-foreground">
         <div v-for="(item, index) in fields" :key="item.key" class="flex gap-x-3">