From afe4b8f67b7874c55bb5749dbf653d4ea7b4be38 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Mon, 24 Jun 2024 17:52:09 +0200
Subject: [PATCH 01/77] Clean up code

---
 .../frontend-2/components/settings/Debug.vue  |   7 +
 .../components/settings/server/General.vue    | 189 ++++++++++++++++++
 .../settings/user/DeleteAccount.vue           |  25 +++
 .../settings/user/DeleteAccountDialog.vue     |  86 ++++++++
 .../components/settings/user/Details.vue      |  81 ++++++++
 .../settings/user/Notifications.vue           |  94 +++++++++
 .../components/settings/user/Password.vue     |  26 +++
 .../lib/common/generated/gql/gql.ts           |  10 +-
 .../lib/common/generated/gql/graphql.ts       |   8 +-
 .../pages/settings/server/general.vue         |  21 ++
 .../pages/settings/user/notifications.vue     |  25 +++
 .../pages/settings/user/profile.vue           |  29 +++
 12 files changed, 592 insertions(+), 9 deletions(-)
 create mode 100644 packages/frontend-2/components/settings/Debug.vue
 create mode 100644 packages/frontend-2/components/settings/server/General.vue
 create mode 100644 packages/frontend-2/components/settings/user/DeleteAccount.vue
 create mode 100644 packages/frontend-2/components/settings/user/DeleteAccountDialog.vue
 create mode 100644 packages/frontend-2/components/settings/user/Details.vue
 create mode 100644 packages/frontend-2/components/settings/user/Notifications.vue
 create mode 100644 packages/frontend-2/components/settings/user/Password.vue
 create mode 100644 packages/frontend-2/pages/settings/server/general.vue
 create mode 100644 packages/frontend-2/pages/settings/user/notifications.vue
 create mode 100644 packages/frontend-2/pages/settings/user/profile.vue

diff --git a/packages/frontend-2/components/settings/Debug.vue b/packages/frontend-2/components/settings/Debug.vue
new file mode 100644
index 0000000000..ffeeb1584f
--- /dev/null
+++ b/packages/frontend-2/components/settings/Debug.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="fixed bg-red-300 p-2 fixed top-16 left-6 flex flex-col">
+    <NuxtLink to="/settings/user/profile">User - details</NuxtLink>
+    <NuxtLink to="/settings/user/notifications">User - notifications</NuxtLink>
+    <NuxtLink to="/settings/server/general">Server - general</NuxtLink>
+  </div>
+</template>
diff --git a/packages/frontend-2/components/settings/server/General.vue b/packages/frontend-2/components/settings/server/General.vue
new file mode 100644
index 0000000000..734975bb51
--- /dev/null
+++ b/packages/frontend-2/components/settings/server/General.vue
@@ -0,0 +1,189 @@
+<template>
+  <h2 class="h5">Server details</h2>
+  <form class="flex flex-col gap-2" @submit="onSubmit">
+    <div class="flex flex-col gap-4">
+      <FormTextInput
+        v-model="name"
+        label="Server's public name"
+        name="serverName"
+        color="foundation"
+        placeholder="Server name"
+        show-label
+        :show-required="true"
+        :rules="requiredRule"
+        :type="'text'"
+      />
+      <FormTextArea
+        v-model="description"
+        color="foundation"
+        label="Description"
+        name="description"
+        placeholder="Description"
+        show-label
+      />
+      <FormTextInput
+        v-model="company"
+        color="foundation"
+        label="Owner"
+        name="owner"
+        placeholder="Owner"
+        show-label
+      />
+      <FormTextInput
+        v-model="adminContact"
+        color="foundation"
+        label="Admin Email"
+        name="adminEmail"
+        placeholder="Admin Email"
+        show-label
+        :type="'email'"
+      />
+      <FormTextInput
+        v-model="termsOfService"
+        color="foundation"
+        label="URL to the Terms of Service"
+        name="terms"
+        show-label
+      />
+      <div class="text-sm flex flex-col gap-2 mt-2">
+        <FormCheckbox
+          v-model="inviteOnly"
+          label="Invite only mode - Only users with an invitation will be able to join"
+          name="inviteOnly"
+          show-label
+        />
+        <FormCheckbox
+          v-model="guestModeEnabled"
+          label="Guest mode - Enables the 'Guest' server role, which allows users to only contribute to projects that they're invited to"
+          name="guestModeEnabled"
+          show-label
+        />
+      </div>
+      <div>
+        <FormButton color="default" @click="onSubmit">Save changes</FormButton>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { useQuery, useMutation } from '@vue/apollo-composable'
+import { useForm } from 'vee-validate'
+import { isRequired } from '~~/lib/common/helpers/validation'
+import { useGlobalToast, ToastNotificationType } from '~~/lib/common/composables/toast'
+import {
+  FormTextInput,
+  FormTextArea,
+  useFormCheckboxModel
+} from '@speckle/ui-components'
+import { useLogger } from '~~/composables/logging'
+import {
+  ROOT_QUERY,
+  convertThrowIntoFetchResult,
+  modifyObjectFields
+} from '~~/lib/common/helpers/graphql'
+import { serverInfoQuery } from '~~/lib/server-management/graphql/queries'
+import { serverInfoUpdateMutation } from '~~/lib/server-management/graphql/mutations'
+import type {
+  ServerInfoUpdateMutationVariables,
+  Query
+} from '~~/lib/common/generated/gql/graphql'
+
+type FormValues = {
+  name: string
+  description: string
+  company: string
+  adminContact: string
+  termsOfService: string
+  inviteOnly: boolean
+  guestModeEnabled: boolean
+}
+
+const logger = useLogger()
+const { triggerNotification } = useGlobalToast()
+const { handleSubmit } = useForm<FormValues>()
+const { result } = useQuery(serverInfoQuery)
+const { mutate: updateServerInfo } = useMutation(serverInfoUpdateMutation)
+
+const name = ref('')
+const description = ref('')
+const company = ref('')
+const adminContact = ref('')
+const termsOfService = ref('')
+const { model: inviteOnly, isChecked: isInviteOnlyChecked } = useFormCheckboxModel()
+const { model: guestModeEnabled, isChecked: isGuestModeChecked } =
+  useFormCheckboxModel()
+
+const requiredRule = [isRequired]
+
+const updateServerInfoAndCache = async (
+  variables: ServerInfoUpdateMutationVariables
+) => {
+  try {
+    const result = await updateServerInfo(variables, {
+      update: (cache, result) => {
+        if (result?.data?.serverInfoUpdate) {
+          // Modify 'serverInfo' field of ROOT_QUERY
+          modifyObjectFields<undefined, Query['serverInfo']>(
+            cache,
+            ROOT_QUERY,
+            (_fieldName, _variables, value) => {
+              const newData = variables.info
+              return {
+                ...value,
+                ...newData,
+                guestModeEnabled: newData.guestModeEnabled ?? value.guestModeEnabled
+              }
+            },
+            { fieldNameWhitelist: ['serverInfo'] }
+          )
+        }
+      }
+    })
+    return result
+  } catch (error) {
+    return convertThrowIntoFetchResult(error)
+  }
+}
+
+const onSubmit = handleSubmit(async () => {
+  const result = await updateServerInfoAndCache({
+    info: {
+      name: name.value,
+      description: description.value,
+      company: company.value,
+      adminContact: adminContact.value,
+      termsOfService: termsOfService.value,
+      inviteOnly: isInviteOnlyChecked.value,
+      guestModeEnabled: isGuestModeChecked.value
+    }
+  })
+
+  if (result && result.data) {
+    triggerNotification({
+      type: ToastNotificationType.Success,
+      title: 'Successfully saved',
+      description: 'Your server settings have been saved.'
+    })
+  } else {
+    logger.error(result && result.errors)
+    triggerNotification({
+      type: ToastNotificationType.Danger,
+      title: 'Saving failed',
+      description: `Failed to update server info`
+    })
+  }
+})
+
+onBeforeMount(() => {
+  if (!result.value?.serverInfo) return
+
+  name.value = result.value.serverInfo.name
+  description.value = result.value.serverInfo.description || ''
+  company.value = result.value.serverInfo.company || ''
+  adminContact.value = result.value.serverInfo.adminContact || ''
+  termsOfService.value = result.value.serverInfo.termsOfService || ''
+  isInviteOnlyChecked.value = !!result.value.serverInfo.inviteOnly
+  isGuestModeChecked.value = !!result.value.serverInfo.guestModeEnabled
+})
+</script>
diff --git a/packages/frontend-2/components/settings/user/DeleteAccount.vue b/packages/frontend-2/components/settings/user/DeleteAccount.vue
new file mode 100644
index 0000000000..49ceb07aab
--- /dev/null
+++ b/packages/frontend-2/components/settings/user/DeleteAccount.vue
@@ -0,0 +1,25 @@
+<template>
+  <SettingsUserDeleteAccountDialog v-model:open="isOpen" :user="user" />
+  <div class="flex flex-col space-y-6">
+    <h2 class="h5">Delete account</h2>
+    <div class="p-4 bg-foundation border border-gray-300 rounded">
+      <p class="text-sm">
+        We will delete all projects where you are the sole owner, and any associated
+        data. We will ask you to type in your email address and press the delete button.
+      </p>
+    </div>
+    <div>
+      <FormButton color="default" @click="toggleModal">Delete account</FormButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useActiveUser } from '~~/lib/auth/composables/activeUser'
+const { activeUser: user } = useActiveUser()
+const isOpen = ref(false)
+
+function toggleModal() {
+  isOpen.value = !isOpen.value
+}
+</script>
diff --git a/packages/frontend-2/components/settings/user/DeleteAccountDialog.vue b/packages/frontend-2/components/settings/user/DeleteAccountDialog.vue
new file mode 100644
index 0000000000..ac8c8d5681
--- /dev/null
+++ b/packages/frontend-2/components/settings/user/DeleteAccountDialog.vue
@@ -0,0 +1,86 @@
+<template>
+  <LayoutDialog :open="open" max-width="md">
+    <form class="flex flex-col gap-2" @submit="onDelete">
+      <div
+        class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 py-3 px-4 bg-danger-lighter dark:bg-danger-darker rounded-md select-none mb-4"
+      >
+        <div>
+          <ExclamationTriangleIcon class="mt-0.5 h-12 w-12 text-danger" />
+        </div>
+        <div>
+          <p class="font-semibold text-danger-darker dark:text-danger-lighter">
+            This action cannot be undone. We will delete all projects where you are the
+            sole owner, and any associated data.
+          </p>
+          <p class="text-sm">
+            To delete your account, type in your
+            <HelpText :text="emailPlaceholder">e-mail address</HelpText>
+            and press the button.
+          </p>
+        </div>
+      </div>
+      <div class="flex gap-2">
+        <FormTextInput
+          name="deleteEmail"
+          label="Your e-mail address"
+          :placeholder="emailPlaceholder"
+          full-width
+          validate-on-mount
+          validate-on-value-update
+          hide-error-message
+          :rules="[stringMatchesEmail]"
+        />
+        <FormButton
+          color="danger"
+          submit
+          :disabled="!!Object.values(errors).length || loading"
+        >
+          Delete
+        </FormButton>
+      </div>
+    </form>
+  </LayoutDialog>
+</template>
+<script setup lang="ts">
+import { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'
+import { useForm } from 'vee-validate'
+import type { GenericValidateFunction } from 'vee-validate'
+import { graphql } from '~~/lib/common/generated/gql'
+import type { UserProfileEditDialogDeleteAccount_UserFragment } from '~~/lib/common/generated/gql/graphql'
+import { useDeleteAccount } from '~~/lib/user/composables/management'
+
+graphql(`
+  fragment UserProfileEditDialogDeleteAccount_User on User {
+    id
+    email
+  }
+`)
+
+const stringMatchesEmail: GenericValidateFunction<string> = (val: string) => {
+  return (val || '').toLowerCase() === (props.user.email || '').toLowerCase()
+    ? true
+    : 'Value must match the email exactly'
+}
+
+const emit = defineEmits<{
+  (e: 'deleted'): void
+  (e: 'update:open', val: boolean): void
+}>()
+
+const props = defineProps<{
+  user: UserProfileEditDialogDeleteAccount_UserFragment
+  open: boolean
+}>()
+
+const { handleSubmit, errors } = useForm<{ deleteEmail: string }>()
+const { mutate, loading } = useDeleteAccount()
+
+const emailPlaceholder = computed(() => props.user.email || 'example@example.com')
+
+const onDelete = handleSubmit(async (values) => {
+  const isDeleted = await mutate({
+    email: values.deleteEmail
+  })
+  if (isDeleted) emit('deleted')
+})
+</script>
diff --git a/packages/frontend-2/components/settings/user/Details.vue b/packages/frontend-2/components/settings/user/Details.vue
new file mode 100644
index 0000000000..3e66865f8b
--- /dev/null
+++ b/packages/frontend-2/components/settings/user/Details.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="flex flex-col gap-y-6">
+    <h2 class="h5">Your details</h2>
+    <FormTextInput
+      v-model="name"
+      color="foundation"
+      label="Name"
+      name="name"
+      placeholder="John Doe"
+      show-label
+      show-required
+      :rules="[isRequired, isStringOfLength({ maxLength: 512 })]"
+      @change="save"
+    />
+    <FormTextInput
+      v-model="company"
+      color="foundation"
+      label="Company"
+      name="company"
+      placeholder="Example Ltd."
+      show-label
+      :rules="[isStringOfLength({ maxLength: 512 })]"
+      @change="save"
+    />
+    <UserProfileEditDialogAvatar :user="user" size="xxl" />
+  </div>
+</template>
+<script setup lang="ts">
+import { debounce } from 'lodash-es'
+import { graphql } from '~~/lib/common/generated/gql'
+import type {
+  UserProfileEditDialogBio_UserFragment,
+  UserUpdateInput
+} from '~~/lib/common/generated/gql/graphql'
+import { isRequired, isStringOfLength } from '~~/lib/common/helpers/validation'
+import { useUpdateUserProfile } from '~~/lib/user/composables/management'
+
+graphql(`
+  fragment UserProfileEditDialogBio_User on User {
+    id
+    name
+    company
+    bio
+    ...UserProfileEditDialogAvatar_User
+  }
+`)
+
+const props = defineProps<{
+  user: UserProfileEditDialogBio_UserFragment
+}>()
+
+const { mutate } = useUpdateUserProfile()
+
+const name = ref('')
+const company = ref('')
+const bio = ref('')
+
+const save = async () => {
+  debouncedSave.cancel()
+  const input: UserUpdateInput = {}
+  if (name.value !== props.user.name) input.name = name.value
+  if (company.value !== props.user.company) input.company = company.value
+  if (bio.value !== props.user.bio) input.bio = bio.value
+  if (!Object.values(input).length) return
+
+  await mutate(input)
+}
+const debouncedSave = debounce(save, 1000)
+
+watch(
+  () => props.user,
+  (user) => {
+    name.value = user.name
+    company.value = user.company || ''
+    bio.value = user.bio || ''
+  },
+  { deep: true, immediate: true }
+)
+
+watch(() => [name.value, company.value, bio.value], debouncedSave)
+</script>
diff --git a/packages/frontend-2/components/settings/user/Notifications.vue b/packages/frontend-2/components/settings/user/Notifications.vue
new file mode 100644
index 0000000000..e7303f44c0
--- /dev/null
+++ b/packages/frontend-2/components/settings/user/Notifications.vue
@@ -0,0 +1,94 @@
+<template>
+  <table class="table-auto w-full rounded-t overflow-hidden">
+    <thead class="text-foreground-1">
+      <tr>
+        <th class="pb-4 font-semibold text-sm text-left">Notification type</th>
+        <th
+          v-for="channel in notificationChannels"
+          :key="channel"
+          class="text-right font-semibold pb-4 text-sm"
+        >
+          {{ capitalize(channel) }}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="[type, settings] in Object.entries(localPreferences)"
+        :key="type"
+        class="border-t"
+      >
+        <td class="text-xs sm:text-sm py-4">
+          {{ notificationTypeMapping[type] || 'Unknown' }}
+        </td>
+        <td
+          v-for="channel in notificationChannels"
+          :key="channel"
+          class="flex justify-end py-4"
+        >
+          <FormCheckbox
+            :name="`${type} (${channel})`"
+            :disabled="loading"
+            hide-label
+            :model-value="settings[channel] || undefined"
+            @update:model-value="
+              ($event) => onUpdate({ value: !!$event, type, channel })
+            "
+          />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+<script setup lang="ts">
+import { capitalize, cloneDeep } from 'lodash-es'
+import { graphql } from '~~/lib/common/generated/gql'
+import type { UserProfileEditDialogNotificationPreferences_UserFragment } from '~~/lib/common/generated/gql/graphql'
+import { useUpdateNotificationPreferences } from '~~/lib/user/composables/management'
+import type { NotificationPreferences } from '~~/lib/user/helpers/components'
+
+graphql(`
+  fragment UserProfileEditDialogNotificationPreferences_User on User {
+    id
+    notificationPreferences
+  }
+`)
+
+const props = defineProps<{
+  user: UserProfileEditDialogNotificationPreferences_UserFragment
+}>()
+
+const { mutate, loading } = useUpdateNotificationPreferences()
+
+const notificationTypeMapping = ref({
+  activityDigest: 'Weekly activity digest',
+  mentionedInComment: 'Mentioned in comment',
+  newStreamAccessRequest: 'Project access request',
+  streamAccessRequestApproved: 'Project access request approved'
+} as Record<string, string>)
+
+const localPreferences = ref({} as NotificationPreferences)
+
+const notificationPreferences = computed(
+  () => props.user.notificationPreferences as NotificationPreferences
+)
+
+const notificationChannels = computed(() => {
+  const firstTypeSettings = Object.values(notificationPreferences.value)[0] || {}
+  return Object.keys(firstTypeSettings)
+})
+
+const onUpdate = async (params: { value: boolean; channel: string; type: string }) => {
+  const { value, channel, type } = params
+  localPreferences.value[type][channel] = value
+  await mutate(localPreferences.value)
+}
+
+watch(
+  notificationPreferences,
+  (prefs) => {
+    localPreferences.value = cloneDeep(prefs)
+  },
+  { immediate: true, deep: true }
+)
+</script>
diff --git a/packages/frontend-2/components/settings/user/Password.vue b/packages/frontend-2/components/settings/user/Password.vue
new file mode 100644
index 0000000000..631d3bf3af
--- /dev/null
+++ b/packages/frontend-2/components/settings/user/Password.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="flex flex-col space-y-6">
+    <h2 class="h5">Password change</h2>
+    <p class="text-sm">
+      Press the button below to start the password reset process.
+      <br />
+      Once pressed, you will receive an e-mail with further instructions.
+    </p>
+    <div>
+      <FormButton color="default" @click="onClick">Reset password</FormButton>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useActiveUser } from '~~/lib/auth/composables/activeUser'
+import { usePasswordReset } from '~~/lib/auth/composables/passwordReset'
+
+const { activeUser } = useActiveUser()
+const { sendResetEmail } = usePasswordReset()
+
+const onClick = async () => {
+  const email = activeUser.value?.email
+  if (!email) return
+  await sendResetEmail(email)
+}
+</script>
diff --git a/packages/frontend-2/lib/common/generated/gql/gql.ts b/packages/frontend-2/lib/common/generated/gql/gql.ts
index 68b8628293..601c48a687 100644
--- a/packages/frontend-2/lib/common/generated/gql/gql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/gql.ts
@@ -83,10 +83,10 @@ const documents = {
     "\n  fragment ProjectsDashboardFilled on ProjectCollection {\n    items {\n      ...ProjectDashboardItem\n    }\n  }\n": types.ProjectsDashboardFilledFragmentDoc,
     "\n  fragment ProjectsInviteBanner on PendingStreamCollaborator {\n    id\n    invitedBy {\n      ...LimitedUserAvatar\n    }\n    projectId\n    projectName\n    token\n  }\n": types.ProjectsInviteBannerFragmentDoc,
     "\n  fragment ProjectsInviteBanners on User {\n    projectInvites {\n      ...ProjectsInviteBanner\n    }\n  }\n": types.ProjectsInviteBannersFragmentDoc,
-    "\n  fragment UserProfileEditDialogAvatar_User on User {\n    id\n    avatar\n    ...ActiveUserAvatar\n  }\n": types.UserProfileEditDialogAvatar_UserFragmentDoc,
-    "\n  fragment UserProfileEditDialogBio_User on User {\n    id\n    name\n    company\n    bio\n    ...UserProfileEditDialogAvatar_User\n  }\n": types.UserProfileEditDialogBio_UserFragmentDoc,
     "\n  fragment UserProfileEditDialogDeleteAccount_User on User {\n    id\n    email\n  }\n": types.UserProfileEditDialogDeleteAccount_UserFragmentDoc,
+    "\n  fragment UserProfileEditDialogBio_User on User {\n    id\n    name\n    company\n    bio\n    ...UserProfileEditDialogAvatar_User\n  }\n": types.UserProfileEditDialogBio_UserFragmentDoc,
     "\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n": types.UserProfileEditDialogNotificationPreferences_UserFragmentDoc,
+    "\n  fragment UserProfileEditDialogAvatar_User on User {\n    id\n    avatar\n    ...ActiveUserAvatar\n  }\n": types.UserProfileEditDialogAvatar_UserFragmentDoc,
     "\n  fragment ModelPageProject on Project {\n    id\n    createdAt\n    name\n    visibility\n  }\n": types.ModelPageProjectFragmentDoc,
     "\n  fragment ThreadCommentAttachment on Comment {\n    text {\n      attachments {\n        id\n        fileName\n        fileType\n        fileSize\n      }\n    }\n  }\n": types.ThreadCommentAttachmentFragmentDoc,
     "\n  fragment ViewerCommentsListItem on Comment {\n    id\n    rawText\n    archived\n    author {\n      ...LimitedUserAvatar\n    }\n    createdAt\n    viewedAt\n    replies {\n      totalCount\n      cursor\n      items {\n        ...ViewerCommentsReplyItem\n      }\n    }\n    replyAuthors(limit: 4) {\n      totalCount\n      items {\n        ...FormUsersSelectItem\n      }\n    }\n    resources {\n      resourceId\n      resourceType\n    }\n  }\n": types.ViewerCommentsListItemFragmentDoc,
@@ -537,7 +537,7 @@ export function graphql(source: "\n  fragment ProjectsInviteBanners on User {\n
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment UserProfileEditDialogAvatar_User on User {\n    id\n    avatar\n    ...ActiveUserAvatar\n  }\n"): (typeof documents)["\n  fragment UserProfileEditDialogAvatar_User on User {\n    id\n    avatar\n    ...ActiveUserAvatar\n  }\n"];
+export function graphql(source: "\n  fragment UserProfileEditDialogDeleteAccount_User on User {\n    id\n    email\n  }\n"): (typeof documents)["\n  fragment UserProfileEditDialogDeleteAccount_User on User {\n    id\n    email\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -545,11 +545,11 @@ export function graphql(source: "\n  fragment UserProfileEditDialogBio_User on U
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment UserProfileEditDialogDeleteAccount_User on User {\n    id\n    email\n  }\n"): (typeof documents)["\n  fragment UserProfileEditDialogDeleteAccount_User on User {\n    id\n    email\n  }\n"];
+export function graphql(source: "\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n"): (typeof documents)["\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n"): (typeof documents)["\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n"];
+export function graphql(source: "\n  fragment UserProfileEditDialogAvatar_User on User {\n    id\n    avatar\n    ...ActiveUserAvatar\n  }\n"): (typeof documents)["\n  fragment UserProfileEditDialogAvatar_User on User {\n    id\n    avatar\n    ...ActiveUserAvatar\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/packages/frontend-2/lib/common/generated/gql/graphql.ts b/packages/frontend-2/lib/common/generated/gql/graphql.ts
index ac1b09012e..d0a0ba31f8 100644
--- a/packages/frontend-2/lib/common/generated/gql/graphql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/graphql.ts
@@ -3555,14 +3555,14 @@ export type ProjectsInviteBannerFragment = { __typename?: 'PendingStreamCollabor
 
 export type ProjectsInviteBannersFragment = { __typename?: 'User', projectInvites: Array<{ __typename?: 'PendingStreamCollaborator', id: string, projectId: string, projectName: string, token?: string | null, invitedBy: { __typename?: 'LimitedUser', id: string, name: string, avatar?: string | null } }> };
 
-export type UserProfileEditDialogAvatar_UserFragment = { __typename?: 'User', id: string, avatar?: string | null, name: string };
+export type UserProfileEditDialogDeleteAccount_UserFragment = { __typename?: 'User', id: string, email?: string | null };
 
 export type UserProfileEditDialogBio_UserFragment = { __typename?: 'User', id: string, name: string, company?: string | null, bio?: string | null, avatar?: string | null };
 
-export type UserProfileEditDialogDeleteAccount_UserFragment = { __typename?: 'User', id: string, email?: string | null };
-
 export type UserProfileEditDialogNotificationPreferences_UserFragment = { __typename?: 'User', id: string, notificationPreferences: {} };
 
+export type UserProfileEditDialogAvatar_UserFragment = { __typename?: 'User', id: string, avatar?: string | null, name: string };
+
 export type ModelPageProjectFragment = { __typename?: 'Project', id: string, createdAt: string, name: string, visibility: ProjectVisibility };
 
 export type ThreadCommentAttachmentFragment = { __typename?: 'Comment', text: { __typename?: 'SmartTextEditorValue', attachments?: Array<{ __typename?: 'BlobMetadata', id: string, fileName: string, fileType: string, fileSize?: number | null }> | null } };
@@ -4582,10 +4582,10 @@ export const ProjectDashboardItemFragmentDoc = {"kind":"Document","definitions":
 export const ProjectsDashboardFilledFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectsDashboardFilled"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ProjectCollection"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDashboardItem"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectsPageTeamDialogManagePermissions_Project"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"visibility"}},{"kind":"Field","name":{"kind":"Name","value":"role"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectsModelPageEmbed_Project"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectsPageTeamDialogManagePermissions_Project"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageModelsActions_Project"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectsModelPageEmbed_Project"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageModelsCardProject"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"visibility"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageModelsActions_Project"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectDashboardItemNoModels"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"team"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageModelsCardProject"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PendingFileUpload"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"FileUpload"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"projectId"}},{"kind":"Field","name":{"kind":"Name","value":"modelName"}},{"kind":"Field","name":{"kind":"Name","value":"convertedStatus"}},{"kind":"Field","name":{"kind":"Name","value":"convertedMessage"}},{"kind":"Field","name":{"kind":"Name","value":"uploadDate"}},{"kind":"Field","name":{"kind":"Name","value":"convertedLastUpdate"}},{"kind":"Field","name":{"kind":"Name","value":"fileType"}},{"kind":"Field","name":{"kind":"Name","value":"fileName"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageModelsCardRenameDialog"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Model"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageModelsCardDeleteDialog"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Model"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageModelsActions"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Model"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FunctionRunStatusForSummary"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AutomateFunctionRun"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"TriggeredAutomationsStatusSummary"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"TriggeredAutomationsStatus"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"automationRuns"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"functionRuns"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"FunctionRunStatusForSummary"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AutomateRunsTriggerStatusDialogFunctionRun_AutomateFunctionRun"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AutomateFunctionRun"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"results"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"statusMessage"}},{"kind":"Field","name":{"kind":"Name","value":"contextView"}},{"kind":"Field","name":{"kind":"Name","value":"function"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"logo"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AutomationsStatusOrderedRuns_AutomationRun"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AutomateRun"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"automation"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"functionRuns"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AutomateRunsTriggerStatusDialogRunsRows_AutomateRun"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AutomateRun"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"functionRuns"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"AutomateRunsTriggerStatusDialogFunctionRun_AutomateFunctionRun"}}]}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"AutomationsStatusOrderedRuns_AutomationRun"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AutomateRunsTriggerStatusDialog_TriggeredAutomationsStatus"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"TriggeredAutomationsStatus"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"automationRuns"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"AutomateRunsTriggerStatusDialogRunsRows_AutomateRun"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AutomateRunsTriggerStatus_TriggeredAutomationsStatus"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"TriggeredAutomationsStatus"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"TriggeredAutomationsStatusSummary"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"AutomateRunsTriggerStatusDialog_TriggeredAutomationsStatus"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageLatestItemsModelItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Model"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","alias":{"kind":"Name","value":"versionCount"},"name":{"kind":"Name","value":"versions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"0"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"commentThreadCount"},"name":{"kind":"Name","value":"commentThreads"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"0"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}},{"kind":"Field","name":{"kind":"Name","value":"pendingImportedVersions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"1"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PendingFileUpload"}}]}},{"kind":"Field","name":{"kind":"Name","value":"previewUrl"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageModelsCardRenameDialog"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageModelsCardDeleteDialog"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageModelsActions"}},{"kind":"Field","name":{"kind":"Name","value":"automationsStatus"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"AutomateRunsTriggerStatus_TriggeredAutomationsStatus"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectDashboardItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDashboardItemNoModels"}},{"kind":"Field","name":{"kind":"Name","value":"models"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"4"}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"onlyWithVersions"},"value":{"kind":"BooleanValue","value":true}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageLatestItemsModelItem"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"pendingImportedModels"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"4"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PendingFileUpload"}}]}}]}}]} as unknown as DocumentNode<ProjectsDashboardFilledFragment, unknown>;
 export const ProjectsInviteBannerFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectsInviteBanner"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PendingStreamCollaborator"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"invitedBy"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LimitedUserAvatar"}}]}},{"kind":"Field","name":{"kind":"Name","value":"projectId"}},{"kind":"Field","name":{"kind":"Name","value":"projectName"}},{"kind":"Field","name":{"kind":"Name","value":"token"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LimitedUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LimitedUser"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]} as unknown as DocumentNode<ProjectsInviteBannerFragment, unknown>;
 export const ProjectsInviteBannersFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectsInviteBanners"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectInvites"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectsInviteBanner"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LimitedUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LimitedUser"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectsInviteBanner"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PendingStreamCollaborator"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"invitedBy"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LimitedUserAvatar"}}]}},{"kind":"Field","name":{"kind":"Name","value":"projectId"}},{"kind":"Field","name":{"kind":"Name","value":"projectName"}},{"kind":"Field","name":{"kind":"Name","value":"token"}}]}}]} as unknown as DocumentNode<ProjectsInviteBannersFragment, unknown>;
+export const UserProfileEditDialogDeleteAccount_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogDeleteAccount_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogDeleteAccount_UserFragment, unknown>;
 export const ActiveUserAvatarFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ActiveUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]} as unknown as DocumentNode<ActiveUserAvatarFragment, unknown>;
 export const UserProfileEditDialogAvatar_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogAvatar_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ActiveUserAvatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ActiveUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogAvatar_UserFragment, unknown>;
 export const UserProfileEditDialogBio_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogBio_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"bio"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"UserProfileEditDialogAvatar_User"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ActiveUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogAvatar_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ActiveUserAvatar"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogBio_UserFragment, unknown>;
-export const UserProfileEditDialogDeleteAccount_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogDeleteAccount_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogDeleteAccount_UserFragment, unknown>;
 export const UserProfileEditDialogNotificationPreferences_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogNotificationPreferences_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"notificationPreferences"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogNotificationPreferences_UserFragment, unknown>;
 export const ModelPageProjectFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ModelPageProject"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"visibility"}}]}}]} as unknown as DocumentNode<ModelPageProjectFragment, unknown>;
 export const ViewerModelVersionCardItemFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ViewerModelVersionCardItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Version"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"referencedObject"}},{"kind":"Field","name":{"kind":"Name","value":"sourceApplication"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"previewUrl"}},{"kind":"Field","name":{"kind":"Name","value":"authorUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LimitedUserAvatar"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LimitedUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LimitedUser"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]} as unknown as DocumentNode<ViewerModelVersionCardItemFragment, unknown>;
diff --git a/packages/frontend-2/pages/settings/server/general.vue b/packages/frontend-2/pages/settings/server/general.vue
new file mode 100644
index 0000000000..ee2612bc17
--- /dev/null
+++ b/packages/frontend-2/pages/settings/server/general.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <Portal to="navigation">
+      <HeaderNavLink :to="'/downloads'" name="Speckle Connectors"></HeaderNavLink>
+    </Portal>
+    <SettingsDebug />
+    <div class="md:max-w-xl md:mx-auto md:py-12">
+      <h1 class="h2">General</h1>
+      <div class="flex flex-col gap-y-8 mt-4">
+        <p>Manage your server settings</p>
+        <hr />
+        <SettingsServerGeneral />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+useHead({
+  title: 'Settings - Server General'
+})
+</script>
diff --git a/packages/frontend-2/pages/settings/user/notifications.vue b/packages/frontend-2/pages/settings/user/notifications.vue
new file mode 100644
index 0000000000..1d53dcf91a
--- /dev/null
+++ b/packages/frontend-2/pages/settings/user/notifications.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <Portal to="navigation">
+      <HeaderNavLink :to="'/downloads'" name="Speckle Connectors"></HeaderNavLink>
+    </Portal>
+    <SettingsDebug />
+    <div class="md:max-w-xl md:mx-auto md:py-12">
+      <h1 class="h2">Notifications</h1>
+      <div class="flex flex-col gap-y-8 mt-4">
+        <p>Your notification preferences</p>
+        <hr />
+        <SettingsUserNotifications :user="user" />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useActiveUser } from '~/lib/auth/composables/activeUser'
+
+useHead({
+  title: 'Settings - User Profile'
+})
+
+const { activeUser: user } = useActiveUser()
+</script>
diff --git a/packages/frontend-2/pages/settings/user/profile.vue b/packages/frontend-2/pages/settings/user/profile.vue
new file mode 100644
index 0000000000..b3234e0b51
--- /dev/null
+++ b/packages/frontend-2/pages/settings/user/profile.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <Portal to="navigation">
+      <HeaderNavLink :to="'/downloads'" name="Speckle Connectors"></HeaderNavLink>
+    </Portal>
+    <SettingsDebug />
+    <div class="md:max-w-xl md:mx-auto md:py-12">
+      <h1 class="h2">Profile</h1>
+      <div class="flex flex-col gap-y-8 mt-4">
+        <p>Manage your profile information</p>
+        <hr />
+        <SettingsUserDetails :user="user" />
+        <hr />
+        <SettingsUserPassword :user="user" />
+        <hr />
+        <SettingsUserDeleteAccount :user="user" />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useActiveUser } from '~/lib/auth/composables/activeUser'
+
+useHead({
+  title: 'Settings - User Profile'
+})
+
+const { activeUser: user } = useActiveUser()
+</script>

From c2d3dddb2410a298f6a3abbf0faa200687f70b99 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Tue, 25 Jun 2024 14:16:28 +0200
Subject: [PATCH 02/77] Added projects settings page

---
 .../frontend-2/components/settings/Debug.vue  |   1 +
 .../components/settings/server/Projects.vue   | 195 ++++++++++++++++++
 .../settings/server/VersionControl.vue        |  14 ++
 .../pages/settings/server/general.vue         |   6 +-
 .../pages/settings/server/projects.vue        |  19 ++
 .../pages/settings/user/notifications.vue     |   4 +-
 .../pages/settings/user/profile.vue           |   4 +-
 7 files changed, 234 insertions(+), 9 deletions(-)
 create mode 100644 packages/frontend-2/components/settings/server/Projects.vue
 create mode 100644 packages/frontend-2/components/settings/server/VersionControl.vue
 create mode 100644 packages/frontend-2/pages/settings/server/projects.vue

diff --git a/packages/frontend-2/components/settings/Debug.vue b/packages/frontend-2/components/settings/Debug.vue
index ffeeb1584f..8b6d79060e 100644
--- a/packages/frontend-2/components/settings/Debug.vue
+++ b/packages/frontend-2/components/settings/Debug.vue
@@ -3,5 +3,6 @@
     <NuxtLink to="/settings/user/profile">User - details</NuxtLink>
     <NuxtLink to="/settings/user/notifications">User - notifications</NuxtLink>
     <NuxtLink to="/settings/server/general">Server - general</NuxtLink>
+    <NuxtLink to="/settings/server/projects">Server - projects</NuxtLink>
   </div>
 </template>
diff --git a/packages/frontend-2/components/settings/server/Projects.vue b/packages/frontend-2/components/settings/server/Projects.vue
new file mode 100644
index 0000000000..d894f46165
--- /dev/null
+++ b/packages/frontend-2/components/settings/server/Projects.vue
@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <h2 class="h5">Projects</h2>
+
+    <FormTextInput
+      size="lg"
+      name="search"
+      :custom-icon="MagnifyingGlassIcon"
+      color="foundation"
+      full-width
+      search
+      :show-clear="!!searchString"
+      placeholder="Search Projects"
+      class="rounded-md border border-outline-3"
+      @update:model-value="debounceSearchUpdate"
+      @change="($event) => searchUpdateHandler($event.value)"
+    />
+
+    <ServerManagementTable
+      class="mt-8"
+      :headers="[
+        { id: 'name', title: 'Name' },
+        { id: 'type', title: 'Type' },
+        { id: 'created', title: 'Created' },
+        { id: 'modified', title: 'Modified' },
+        { id: 'models', title: 'Models' },
+        { id: 'versions', title: 'Versions' },
+        { id: 'contributors', title: 'Contributors' }
+      ]"
+      :items="projects"
+      :buttons="[{ icon: TrashIcon, label: 'Delete', action: openProjectDeleteDialog }]"
+      :column-classes="{
+        name: 'col-span-3 truncate',
+        type: 'col-span-1',
+        created: 'col-span-2',
+        modified: 'col-span-2',
+        models: 'col-span-1 text-right',
+        versions: 'col-span-1 text-right',
+        contributors: 'col-span-2'
+      }"
+      :on-row-click="handleProjectClick"
+    >
+      <template #name="{ item }">
+        {{ isProject(item) ? item.name : '' }}
+      </template>
+
+      <template #type="{ item }">
+        <div class="capitalize">
+          {{ isProject(item) ? item.visibility.toLowerCase() : '' }}
+        </div>
+      </template>
+
+      <template #created="{ item }">
+        <div class="font-mono text-xs">
+          {{ isProject(item) ? new Date(item.createdAt).toLocaleString('en-GB') : '' }}
+        </div>
+      </template>
+
+      <template #modified="{ item }">
+        <div class="font-mono text-xs">
+          {{ isProject(item) ? new Date(item.updatedAt).toLocaleString('en-GB') : '' }}
+        </div>
+      </template>
+
+      <template #models="{ item }">
+        <div class="font-mono text-xs">
+          {{ isProject(item) ? item.models.totalCount : '' }}
+        </div>
+      </template>
+
+      <template #versions="{ item }">
+        <div class="font-mono text-xs">
+          {{ isProject(item) ? item.versions.totalCount : '' }}
+        </div>
+      </template>
+
+      <template #contributors="{ item }">
+        <div v-if="isProject(item)" class="py-1">
+          <UserAvatarGroup :users="item.team.map((t) => t.user)" :max-count="3" />
+        </div>
+      </template>
+    </ServerManagementTable>
+
+    <CommonLoadingBar v-if="loading && !projects?.length" loading />
+
+    <InfiniteLoading
+      v-if="projects?.length"
+      :settings="{ identifier: infiniteLoaderId }"
+      class="py-4"
+      @infinite="infiniteLoad"
+    />
+
+    <ServerManagementDeleteProjectDialog
+      v-model:open="showProjectDeleteDialog"
+      :project="projectToModify"
+      title="Delete Project"
+      :result-variables="resultVariables"
+    />
+
+    <ProjectsAddDialog v-model:open="openNewProject" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { debounce } from 'lodash-es'
+import { useQuery } from '@vue/apollo-composable'
+import { MagnifyingGlassIcon, TrashIcon } from '@heroicons/vue/20/solid'
+import { getProjectsQuery } from '~~/lib/server-management/graphql/queries'
+import type { ItemType, ProjectItem } from '~~/lib/server-management/helpers/types'
+import type { InfiniteLoaderState } from '~~/lib/global/helpers/components'
+import { isProject } from '~~/lib/server-management/helpers/utils'
+
+const logger = useLogger()
+const router = useRouter()
+
+useHead({
+  title: 'Projects'
+})
+
+definePageMeta({
+  middleware: ['admin']
+})
+
+const projectToModify = ref<ProjectItem | null>(null)
+const searchString = ref('')
+const showProjectDeleteDialog = ref(false)
+const infiniteLoaderId = ref('')
+const openNewProject = ref(false)
+
+const {
+  result: extraPagesResult,
+  fetchMore: fetchMorePages,
+  variables: resultVariables,
+  onResult,
+  loading
+} = useQuery(getProjectsQuery, () => ({
+  limit: 50,
+  query: searchString.value
+}))
+
+const moreToLoad = computed(
+  () =>
+    !extraPagesResult.value?.admin?.projectList ||
+    extraPagesResult.value.admin.projectList.items.length <
+      extraPagesResult.value.admin.projectList.totalCount
+)
+
+const projects = computed(() => extraPagesResult.value?.admin.projectList.items || [])
+
+const openProjectDeleteDialog = (item: ItemType) => {
+  if (isProject(item)) {
+    projectToModify.value = item
+    showProjectDeleteDialog.value = true
+  }
+}
+
+const handleProjectClick = (item: ItemType) => {
+  router.push(`/projects/${item.id}`)
+}
+
+const infiniteLoad = async (state: InfiniteLoaderState) => {
+  const cursor = extraPagesResult.value?.admin?.projectList.cursor || null
+  if (!moreToLoad.value || !cursor) return state.complete()
+
+  try {
+    await fetchMorePages({
+      variables: {
+        cursor
+      }
+    })
+  } catch (e) {
+    logger.error(e)
+    state.error()
+    return
+  }
+
+  state.loaded()
+  if (!moreToLoad.value) {
+    state.complete()
+  }
+}
+
+const searchUpdateHandler = (value: string) => {
+  searchString.value = value
+}
+
+const debounceSearchUpdate = debounce(searchUpdateHandler, 500)
+
+const calculateLoaderId = () => {
+  infiniteLoaderId.value = resultVariables.value?.query || ''
+}
+
+onResult(calculateLoaderId)
+</script>
diff --git a/packages/frontend-2/components/settings/server/VersionControl.vue b/packages/frontend-2/components/settings/server/VersionControl.vue
new file mode 100644
index 0000000000..fa97273e2f
--- /dev/null
+++ b/packages/frontend-2/components/settings/server/VersionControl.vue
@@ -0,0 +1,14 @@
+<template>
+  <h2 class="h5">Speckle version</h2>
+  <div class="grid grid-cols-2">
+    <div>
+      <p class="text-sm font-semibold pb-2">2.19.1-alpha.116475</p>
+      <p class="text-sm">There’s a newer version available</p>
+    </div>
+    <div class="flex justify-end">
+      <FormButton color="secondary">Update to 2.2.0</FormButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/packages/frontend-2/pages/settings/server/general.vue b/packages/frontend-2/pages/settings/server/general.vue
index ee2612bc17..11089f8417 100644
--- a/packages/frontend-2/pages/settings/server/general.vue
+++ b/packages/frontend-2/pages/settings/server/general.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <Portal to="navigation">
-      <HeaderNavLink :to="'/downloads'" name="Speckle Connectors"></HeaderNavLink>
-    </Portal>
+    <Portal to="navigation" />
     <SettingsDebug />
     <div class="md:max-w-xl md:mx-auto md:py-12">
       <h1 class="h2">General</h1>
@@ -10,6 +8,8 @@
         <p>Manage your server settings</p>
         <hr />
         <SettingsServerGeneral />
+        <hr />
+        <SettingsServerVersionControl />
       </div>
     </div>
   </div>
diff --git a/packages/frontend-2/pages/settings/server/projects.vue b/packages/frontend-2/pages/settings/server/projects.vue
new file mode 100644
index 0000000000..0ff1531abf
--- /dev/null
+++ b/packages/frontend-2/pages/settings/server/projects.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <Portal to="navigation" />
+    <SettingsDebug />
+    <div class="md:max-w-5xl md:mx-auto md:py-12">
+      <h1 class="h2">Projects</h1>
+      <div class="flex flex-col gap-y-8 mt-4">
+        <p>Manage projects on your server</p>
+        <hr />
+        <SettingsServerProjects />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+useHead({
+  title: 'Settings - Projects'
+})
+</script>
diff --git a/packages/frontend-2/pages/settings/user/notifications.vue b/packages/frontend-2/pages/settings/user/notifications.vue
index 1d53dcf91a..54e3b5b8dc 100644
--- a/packages/frontend-2/pages/settings/user/notifications.vue
+++ b/packages/frontend-2/pages/settings/user/notifications.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <Portal to="navigation">
-      <HeaderNavLink :to="'/downloads'" name="Speckle Connectors"></HeaderNavLink>
-    </Portal>
+    <Portal to="navigation" />
     <SettingsDebug />
     <div class="md:max-w-xl md:mx-auto md:py-12">
       <h1 class="h2">Notifications</h1>
diff --git a/packages/frontend-2/pages/settings/user/profile.vue b/packages/frontend-2/pages/settings/user/profile.vue
index b3234e0b51..62be001670 100644
--- a/packages/frontend-2/pages/settings/user/profile.vue
+++ b/packages/frontend-2/pages/settings/user/profile.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <Portal to="navigation">
-      <HeaderNavLink :to="'/downloads'" name="Speckle Connectors"></HeaderNavLink>
-    </Portal>
+    <Portal to="navigation" />
     <SettingsDebug />
     <div class="md:max-w-xl md:mx-auto md:py-12">
       <h1 class="h2">Profile</h1>

From 0b871d3d5967fd852a86119c019a12cd4b701000 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Tue, 25 Jun 2024 16:54:26 +0200
Subject: [PATCH 03/77] WIP

---
 .../settings/user/DeleteAccount.vue           | 25 +++++-----
 .../components/settings/user/Details.vue      | 49 ++++++++++---------
 .../pages/settings/user/notifications.vue     |  7 ++-
 .../pages/settings/user/profile.vue           | 13 ++---
 4 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/packages/frontend-2/components/settings/user/DeleteAccount.vue b/packages/frontend-2/components/settings/user/DeleteAccount.vue
index 49ceb07aab..daa5df12a8 100644
--- a/packages/frontend-2/components/settings/user/DeleteAccount.vue
+++ b/packages/frontend-2/components/settings/user/DeleteAccount.vue
@@ -1,15 +1,18 @@
 <template>
-  <SettingsUserDeleteAccountDialog v-model:open="isOpen" :user="user" />
-  <div class="flex flex-col space-y-6">
-    <h2 class="h5">Delete account</h2>
-    <div class="p-4 bg-foundation border border-gray-300 rounded">
-      <p class="text-sm">
-        We will delete all projects where you are the sole owner, and any associated
-        data. We will ask you to type in your email address and press the delete button.
-      </p>
-    </div>
-    <div>
-      <FormButton color="default" @click="toggleModal">Delete account</FormButton>
+  <div>
+    <SettingsUserDeleteAccountDialog v-model:open="isOpen" :user="user" />
+    <div class="flex flex-col space-y-6">
+      <h2 class="h5">Delete account</h2>
+      <div class="p-4 bg-foundation border border-gray-300 rounded">
+        <p class="text-sm">
+          We will delete all projects where you are the sole owner, and any associated
+          data. We will ask you to type in your email address and press the delete
+          button.
+        </p>
+      </div>
+      <div>
+        <FormButton color="default" @click="toggleModal">Delete account</FormButton>
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/frontend-2/components/settings/user/Details.vue b/packages/frontend-2/components/settings/user/Details.vue
index 3e66865f8b..8974ab279d 100644
--- a/packages/frontend-2/components/settings/user/Details.vue
+++ b/packages/frontend-2/components/settings/user/Details.vue
@@ -1,28 +1,33 @@
 <template>
   <div class="flex flex-col gap-y-6">
     <h2 class="h5">Your details</h2>
-    <FormTextInput
-      v-model="name"
-      color="foundation"
-      label="Name"
-      name="name"
-      placeholder="John Doe"
-      show-label
-      show-required
-      :rules="[isRequired, isStringOfLength({ maxLength: 512 })]"
-      @change="save"
-    />
-    <FormTextInput
-      v-model="company"
-      color="foundation"
-      label="Company"
-      name="company"
-      placeholder="Example Ltd."
-      show-label
-      :rules="[isStringOfLength({ maxLength: 512 })]"
-      @change="save"
-    />
-    <UserProfileEditDialogAvatar :user="user" size="xxl" />
+    <div class="grid grid-cols-2">
+      <p class="text-sm font-semibold">Name</p>
+      <FormTextInput
+        v-model="name"
+        color="foundation"
+        label="Name"
+        name="name"
+        placeholder="John Doe"
+        :rules="[isRequired, isStringOfLength({ maxLength: 512 })]"
+        @change="save"
+      />
+    </div>
+    <div class="grid grid-cols-2">
+      <p class="text-sm font-semibold">Company</p>
+      <FormTextInput
+        v-model="company"
+        color="foundation"
+        label="Company"
+        name="company"
+        placeholder="Example Ltd."
+        :rules="[isStringOfLength({ maxLength: 512 })]"
+        @change="save"
+      />
+    </div>
+    <div class="grid grid-cols-2">
+      <UserProfileEditDialogAvatar :user="user" size="xxl" />
+    </div>
   </div>
 </template>
 <script setup lang="ts">
diff --git a/packages/frontend-2/pages/settings/user/notifications.vue b/packages/frontend-2/pages/settings/user/notifications.vue
index 54e3b5b8dc..a2bcfb1777 100644
--- a/packages/frontend-2/pages/settings/user/notifications.vue
+++ b/packages/frontend-2/pages/settings/user/notifications.vue
@@ -4,10 +4,9 @@
     <SettingsDebug />
     <div class="md:max-w-xl md:mx-auto md:py-12">
       <h1 class="h2">Notifications</h1>
-      <div class="flex flex-col gap-y-8 mt-4">
-        <p>Your notification preferences</p>
-        <hr />
-        <SettingsUserNotifications :user="user" />
+      <div class="mt-4 divide-y">
+        <p class="py-8">Your notification preferences</p>
+        <SettingsUserNotifications class="py-8" :user="user" />
       </div>
     </div>
   </div>
diff --git a/packages/frontend-2/pages/settings/user/profile.vue b/packages/frontend-2/pages/settings/user/profile.vue
index 62be001670..48dc3a2cc3 100644
--- a/packages/frontend-2/pages/settings/user/profile.vue
+++ b/packages/frontend-2/pages/settings/user/profile.vue
@@ -4,14 +4,11 @@
     <SettingsDebug />
     <div class="md:max-w-xl md:mx-auto md:py-12">
       <h1 class="h2">Profile</h1>
-      <div class="flex flex-col gap-y-8 mt-4">
-        <p>Manage your profile information</p>
-        <hr />
-        <SettingsUserDetails :user="user" />
-        <hr />
-        <SettingsUserPassword :user="user" />
-        <hr />
-        <SettingsUserDeleteAccount :user="user" />
+      <div class="mt-4 divide-y">
+        <p class="py-8">Manage your profile information</p>
+        <SettingsUserDetails class="py-8" :user="user" />
+        <SettingsUserPassword class="py-8" :user="user" />
+        <SettingsUserDeleteAccount class="py-8" :user="user" />
       </div>
     </div>
   </div>

From 0348a98badaced15fd8c6cb618243165af4b9a4e Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 27 Jun 2024 12:20:10 +0200
Subject: [PATCH 04/77] Moved pages to modal

---
 packages/frontend-2/app.vue                   |   1 +
 .../components/header/NavUserMenu.vue         |   2 +-
 .../frontend-2/components/settings/Debug.vue  |   8 --
 .../frontend-2/components/settings/Modal.vue  | 109 ++++++++++++++
 .../components/settings/server/General.vue    | 133 +++++++++---------
 .../components/settings/server/Projects.vue   |   6 +-
 .../settings/user/DeleteAccount.vue           |   8 +-
 .../settings/user/Notifications.vue           |  98 ++-----------
 .../settings/user/NotificationsTable.vue      |  94 +++++++++++++
 .../components/settings/user/Profile.vue      |  20 +++
 .../pages/settings/user/profile.vue           |   8 +-
 .../src/components/common/Alert.vue           |  16 ++-
 12 files changed, 325 insertions(+), 178 deletions(-)
 delete mode 100644 packages/frontend-2/components/settings/Debug.vue
 create mode 100644 packages/frontend-2/components/settings/Modal.vue
 create mode 100644 packages/frontend-2/components/settings/user/NotificationsTable.vue
 create mode 100644 packages/frontend-2/components/settings/user/Profile.vue

diff --git a/packages/frontend-2/app.vue b/packages/frontend-2/app.vue
index f1a988d50c..0efb8c5105 100644
--- a/packages/frontend-2/app.vue
+++ b/packages/frontend-2/app.vue
@@ -7,6 +7,7 @@
       <NuxtPage />
     </NuxtLayout>
     <SingletonManagers />
+    <SettingsModal />
   </div>
 </template>
 <script setup lang="ts">
diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index e5befd4937..cfe4670d6c 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -128,7 +128,7 @@
       </Transition>
     </Menu>
     <ServerManagementInviteDialog v-model:open="showInviteDialog" />
-    <UserProfileEditDialog v-model:open="showProfileEditDialog" />
+    <!-- <UserProfileEditDialog v-model:open="showProfileEditDialog" /> -->
   </div>
 </template>
 <script setup lang="ts">
diff --git a/packages/frontend-2/components/settings/Debug.vue b/packages/frontend-2/components/settings/Debug.vue
deleted file mode 100644
index 8b6d79060e..0000000000
--- a/packages/frontend-2/components/settings/Debug.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="fixed bg-red-300 p-2 fixed top-16 left-6 flex flex-col">
-    <NuxtLink to="/settings/user/profile">User - details</NuxtLink>
-    <NuxtLink to="/settings/user/notifications">User - notifications</NuxtLink>
-    <NuxtLink to="/settings/server/general">Server - general</NuxtLink>
-    <NuxtLink to="/settings/server/projects">Server - projects</NuxtLink>
-  </div>
-</template>
diff --git a/packages/frontend-2/components/settings/Modal.vue b/packages/frontend-2/components/settings/Modal.vue
new file mode 100644
index 0000000000..a94342a797
--- /dev/null
+++ b/packages/frontend-2/components/settings/Modal.vue
@@ -0,0 +1,109 @@
+<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
+<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
+<template>
+  <div
+    class="fixed z-40 w-screen h-screen bg-slate-700/40 top-0 left-0 pt-4 md:p-4 md:p-8"
+  >
+    <div class="bg-white w-full h-full rounded-md shadow-lg flex overflow-hidden">
+      <ClientOnly>
+        <div
+          v-if="!isMobile || !selectedItem"
+          class="w-full md:w-64 h-full bg-gray-100 border-r border-gray-200 flex flex-col"
+        >
+          <div class="py-4 px-6 md:py-6 flex gap-y-4 flex-col">
+            <h1 class="h4 font-semibold py-4 md:hidden">Settings</h1>
+            <div>
+              <p class="text-sm font-semibold">User settings</p>
+            </div>
+            <a
+              class="text-sm block cursor-pointer"
+              :class="{ 'text-blue-600': selectedItem?.title === 'Profile' }"
+              @click="setSelectedItem(itemConfig.profile)"
+            >
+              <p>Account</p>
+            </a>
+            <a
+              class="text-sm block cursor-pointer"
+              :class="{ 'text-blue-600': selectedItem?.title === 'Notifications' }"
+              @click="setSelectedItem(itemConfig.notifications)"
+            >
+              <p>Notifications</p>
+            </a>
+            <div class="mt-4">
+              <p class="text-sm font-semibold">Server settings</p>
+            </div>
+            <a
+              class="text-sm block cursor-pointer"
+              :class="{ 'text-blue-600': selectedItem?.title === 'General' }"
+              @click="setSelectedItem(itemConfig.general)"
+            >
+              <p>General</p>
+            </a>
+            <a
+              class="text-sm block cursor-pointer"
+              :class="{ 'text-blue-600': selectedItem?.title === 'Projects' }"
+              @click="setSelectedItem(itemConfig.projects)"
+            >
+              <p>Projects</p>
+            </a>
+          </div>
+        </div>
+      </ClientOnly>
+      <section
+        v-if="selectedItem"
+        class="overflow-scroll flex-1 bg-gray-50 p-6 py-8 md:p-4 md:py-12"
+      >
+        <div class="flex md:hidden items-center">
+          <ChevronLeftIcon class="w-6 h-6" @click="clearSelection" />
+          <h2 class="h4 font-semibold ml-4">{{ selectedItem.title }}</h2>
+        </div>
+        <component :is="selectedItem?.component" />
+      </section>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ChevronLeftIcon } from '@heroicons/vue/24/solid'
+import SettingsUserProfile from './user/Profile'
+import SettingsUserNotifications from './user/Notifications'
+import SettingsServerGeneral from './server/General'
+import SettingsServerProjects from './server/Projects'
+import { useBreakpoints } from '@vueuse/core'
+import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
+
+const breakpoints = useBreakpoints(TailwindBreakpoints)
+const isMobile = breakpoints.smallerOrEqual('sm')
+
+const itemConfig = {
+  profile: {
+    title: 'Profile',
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    component: SettingsUserProfile
+  },
+  notifications: {
+    title: 'Notifications',
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    component: SettingsUserNotifications
+  },
+  general: {
+    title: 'General',
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    component: SettingsServerGeneral
+  },
+  projects: {
+    title: 'Projects',
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    component: SettingsServerProjects
+  }
+}
+
+const selectedItem = shallowRef()
+
+function setSelectedItem(item: string): void {
+  selectedItem.value = item
+}
+
+function clearSelection(): void {
+  selectedItem.value = null
+}
+</script>
diff --git a/packages/frontend-2/components/settings/server/General.vue b/packages/frontend-2/components/settings/server/General.vue
index 734975bb51..9775c73cd6 100644
--- a/packages/frontend-2/components/settings/server/General.vue
+++ b/packages/frontend-2/components/settings/server/General.vue
@@ -1,69 +1,74 @@
 <template>
-  <h2 class="h5">Server details</h2>
-  <form class="flex flex-col gap-2" @submit="onSubmit">
-    <div class="flex flex-col gap-4">
-      <FormTextInput
-        v-model="name"
-        label="Server's public name"
-        name="serverName"
-        color="foundation"
-        placeholder="Server name"
-        show-label
-        :show-required="true"
-        :rules="requiredRule"
-        :type="'text'"
-      />
-      <FormTextArea
-        v-model="description"
-        color="foundation"
-        label="Description"
-        name="description"
-        placeholder="Description"
-        show-label
-      />
-      <FormTextInput
-        v-model="company"
-        color="foundation"
-        label="Owner"
-        name="owner"
-        placeholder="Owner"
-        show-label
-      />
-      <FormTextInput
-        v-model="adminContact"
-        color="foundation"
-        label="Admin Email"
-        name="adminEmail"
-        placeholder="Admin Email"
-        show-label
-        :type="'email'"
-      />
-      <FormTextInput
-        v-model="termsOfService"
-        color="foundation"
-        label="URL to the Terms of Service"
-        name="terms"
-        show-label
-      />
-      <div class="text-sm flex flex-col gap-2 mt-2">
-        <FormCheckbox
-          v-model="inviteOnly"
-          label="Invite only mode - Only users with an invitation will be able to join"
-          name="inviteOnly"
-          show-label
-        />
-        <FormCheckbox
-          v-model="guestModeEnabled"
-          label="Guest mode - Enables the 'Guest' server role, which allows users to only contribute to projects that they're invited to"
-          name="guestModeEnabled"
-          show-label
-        />
-      </div>
-      <div>
-        <FormButton color="default" @click="onSubmit">Save changes</FormButton>
-      </div>
+  <div class="md:max-w-xl md:mx-auto">
+    <h2 class="h3 font-semibold hidden md:block">General</h2>
+    <div class="flex flex-col mt-4 divide-y">
+      <h3 class="h5 py-8">Server details</h3>
+      <form class="flex flex-col gap-2 py-8" @submit="onSubmit">
+        <div class="flex flex-col gap-4">
+          <FormTextInput
+            v-model="name"
+            label="Server's public name"
+            name="serverName"
+            color="foundation"
+            placeholder="Server name"
+            show-label
+            :show-required="true"
+            :rules="requiredRule"
+            :type="'text'"
+          />
+          <FormTextArea
+            v-model="description"
+            color="foundation"
+            label="Description"
+            name="description"
+            placeholder="Description"
+            show-label
+          />
+          <FormTextInput
+            v-model="company"
+            color="foundation"
+            label="Owner"
+            name="owner"
+            placeholder="Owner"
+            show-label
+          />
+          <FormTextInput
+            v-model="adminContact"
+            color="foundation"
+            label="Admin Email"
+            name="adminEmail"
+            placeholder="Admin Email"
+            show-label
+            :type="'email'"
+          />
+          <FormTextInput
+            v-model="termsOfService"
+            color="foundation"
+            label="URL to the Terms of Service"
+            name="terms"
+            show-label
+          />
+          <div class="text-sm flex flex-col gap-2 mt-2">
+            <FormCheckbox
+              v-model="inviteOnly"
+              label="Invite only mode - Only users with an invitation will be able to join"
+              name="inviteOnly"
+              show-label
+            />
+            <FormCheckbox
+              v-model="guestModeEnabled"
+              label="Guest mode - Enables the 'Guest' server role, which allows users to only contribute to projects that they're invited to"
+              name="guestModeEnabled"
+              show-label
+            />
+          </div>
+          <div>
+            <FormButton color="default" @click="onSubmit">Save changes</FormButton>
+          </div>
+        </div>
+      </form>
     </div>
-  </form>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/frontend-2/components/settings/server/Projects.vue b/packages/frontend-2/components/settings/server/Projects.vue
index d894f46165..4264dba9a9 100644
--- a/packages/frontend-2/components/settings/server/Projects.vue
+++ b/packages/frontend-2/components/settings/server/Projects.vue
@@ -1,7 +1,6 @@
 <template>
-  <div>
-    <h2 class="h5">Projects</h2>
-
+  <div class="md:max-w-5xl md:mx-auto">
+    <h2 class="h3 font-semibold pb-8 hidden md:block">Projects</h2>
     <FormTextInput
       size="lg"
       name="search"
@@ -15,7 +14,6 @@
       @update:model-value="debounceSearchUpdate"
       @change="($event) => searchUpdateHandler($event.value)"
     />
-
     <ServerManagementTable
       class="mt-8"
       :headers="[
diff --git a/packages/frontend-2/components/settings/user/DeleteAccount.vue b/packages/frontend-2/components/settings/user/DeleteAccount.vue
index daa5df12a8..ce01669c33 100644
--- a/packages/frontend-2/components/settings/user/DeleteAccount.vue
+++ b/packages/frontend-2/components/settings/user/DeleteAccount.vue
@@ -3,13 +3,13 @@
     <SettingsUserDeleteAccountDialog v-model:open="isOpen" :user="user" />
     <div class="flex flex-col space-y-6">
       <h2 class="h5">Delete account</h2>
-      <div class="p-4 bg-foundation border border-gray-300 rounded">
-        <p class="text-sm">
+      <CommonAlert color="info" size="sm" hide-icon>
+        <template #description>
           We will delete all projects where you are the sole owner, and any associated
           data. We will ask you to type in your email address and press the delete
           button.
-        </p>
-      </div>
+        </template>
+      </CommonAlert>
       <div>
         <FormButton color="default" @click="toggleModal">Delete account</FormButton>
       </div>
diff --git a/packages/frontend-2/components/settings/user/Notifications.vue b/packages/frontend-2/components/settings/user/Notifications.vue
index e7303f44c0..ecc9afe1c8 100644
--- a/packages/frontend-2/components/settings/user/Notifications.vue
+++ b/packages/frontend-2/components/settings/user/Notifications.vue
@@ -1,94 +1,18 @@
 <template>
-  <table class="table-auto w-full rounded-t overflow-hidden">
-    <thead class="text-foreground-1">
-      <tr>
-        <th class="pb-4 font-semibold text-sm text-left">Notification type</th>
-        <th
-          v-for="channel in notificationChannels"
-          :key="channel"
-          class="text-right font-semibold pb-4 text-sm"
-        >
-          {{ capitalize(channel) }}
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        v-for="[type, settings] in Object.entries(localPreferences)"
-        :key="type"
-        class="border-t"
-      >
-        <td class="text-xs sm:text-sm py-4">
-          {{ notificationTypeMapping[type] || 'Unknown' }}
-        </td>
-        <td
-          v-for="channel in notificationChannels"
-          :key="channel"
-          class="flex justify-end py-4"
-        >
-          <FormCheckbox
-            :name="`${type} (${channel})`"
-            :disabled="loading"
-            hide-label
-            :model-value="settings[channel] || undefined"
-            @update:model-value="
-              ($event) => onUpdate({ value: !!$event, type, channel })
-            "
-          />
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <div class="md:max-w-xl md:mx-auto">
+    <h2 class="h3 font-semibold hidden md:block">Notifications</h2>
+    <div class="divide-y">
+      <p class="py-8">Your notification preferences</p>
+      <SettingsUserNotificationsTable class="py-8" :user="user" />
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
-import { capitalize, cloneDeep } from 'lodash-es'
-import { graphql } from '~~/lib/common/generated/gql'
-import type { UserProfileEditDialogNotificationPreferences_UserFragment } from '~~/lib/common/generated/gql/graphql'
-import { useUpdateNotificationPreferences } from '~~/lib/user/composables/management'
-import type { NotificationPreferences } from '~~/lib/user/helpers/components'
+import { useActiveUser } from '~/lib/auth/composables/activeUser'
 
-graphql(`
-  fragment UserProfileEditDialogNotificationPreferences_User on User {
-    id
-    notificationPreferences
-  }
-`)
-
-const props = defineProps<{
-  user: UserProfileEditDialogNotificationPreferences_UserFragment
-}>()
-
-const { mutate, loading } = useUpdateNotificationPreferences()
-
-const notificationTypeMapping = ref({
-  activityDigest: 'Weekly activity digest',
-  mentionedInComment: 'Mentioned in comment',
-  newStreamAccessRequest: 'Project access request',
-  streamAccessRequestApproved: 'Project access request approved'
-} as Record<string, string>)
-
-const localPreferences = ref({} as NotificationPreferences)
-
-const notificationPreferences = computed(
-  () => props.user.notificationPreferences as NotificationPreferences
-)
-
-const notificationChannels = computed(() => {
-  const firstTypeSettings = Object.values(notificationPreferences.value)[0] || {}
-  return Object.keys(firstTypeSettings)
+useHead({
+  title: 'Settings - User Profile'
 })
 
-const onUpdate = async (params: { value: boolean; channel: string; type: string }) => {
-  const { value, channel, type } = params
-  localPreferences.value[type][channel] = value
-  await mutate(localPreferences.value)
-}
-
-watch(
-  notificationPreferences,
-  (prefs) => {
-    localPreferences.value = cloneDeep(prefs)
-  },
-  { immediate: true, deep: true }
-)
+const { activeUser: user } = useActiveUser()
 </script>
diff --git a/packages/frontend-2/components/settings/user/NotificationsTable.vue b/packages/frontend-2/components/settings/user/NotificationsTable.vue
new file mode 100644
index 0000000000..e7303f44c0
--- /dev/null
+++ b/packages/frontend-2/components/settings/user/NotificationsTable.vue
@@ -0,0 +1,94 @@
+<template>
+  <table class="table-auto w-full rounded-t overflow-hidden">
+    <thead class="text-foreground-1">
+      <tr>
+        <th class="pb-4 font-semibold text-sm text-left">Notification type</th>
+        <th
+          v-for="channel in notificationChannels"
+          :key="channel"
+          class="text-right font-semibold pb-4 text-sm"
+        >
+          {{ capitalize(channel) }}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="[type, settings] in Object.entries(localPreferences)"
+        :key="type"
+        class="border-t"
+      >
+        <td class="text-xs sm:text-sm py-4">
+          {{ notificationTypeMapping[type] || 'Unknown' }}
+        </td>
+        <td
+          v-for="channel in notificationChannels"
+          :key="channel"
+          class="flex justify-end py-4"
+        >
+          <FormCheckbox
+            :name="`${type} (${channel})`"
+            :disabled="loading"
+            hide-label
+            :model-value="settings[channel] || undefined"
+            @update:model-value="
+              ($event) => onUpdate({ value: !!$event, type, channel })
+            "
+          />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+<script setup lang="ts">
+import { capitalize, cloneDeep } from 'lodash-es'
+import { graphql } from '~~/lib/common/generated/gql'
+import type { UserProfileEditDialogNotificationPreferences_UserFragment } from '~~/lib/common/generated/gql/graphql'
+import { useUpdateNotificationPreferences } from '~~/lib/user/composables/management'
+import type { NotificationPreferences } from '~~/lib/user/helpers/components'
+
+graphql(`
+  fragment UserProfileEditDialogNotificationPreferences_User on User {
+    id
+    notificationPreferences
+  }
+`)
+
+const props = defineProps<{
+  user: UserProfileEditDialogNotificationPreferences_UserFragment
+}>()
+
+const { mutate, loading } = useUpdateNotificationPreferences()
+
+const notificationTypeMapping = ref({
+  activityDigest: 'Weekly activity digest',
+  mentionedInComment: 'Mentioned in comment',
+  newStreamAccessRequest: 'Project access request',
+  streamAccessRequestApproved: 'Project access request approved'
+} as Record<string, string>)
+
+const localPreferences = ref({} as NotificationPreferences)
+
+const notificationPreferences = computed(
+  () => props.user.notificationPreferences as NotificationPreferences
+)
+
+const notificationChannels = computed(() => {
+  const firstTypeSettings = Object.values(notificationPreferences.value)[0] || {}
+  return Object.keys(firstTypeSettings)
+})
+
+const onUpdate = async (params: { value: boolean; channel: string; type: string }) => {
+  const { value, channel, type } = params
+  localPreferences.value[type][channel] = value
+  await mutate(localPreferences.value)
+}
+
+watch(
+  notificationPreferences,
+  (prefs) => {
+    localPreferences.value = cloneDeep(prefs)
+  },
+  { immediate: true, deep: true }
+)
+</script>
diff --git a/packages/frontend-2/components/settings/user/Profile.vue b/packages/frontend-2/components/settings/user/Profile.vue
new file mode 100644
index 0000000000..2f213c05e2
--- /dev/null
+++ b/packages/frontend-2/components/settings/user/Profile.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="md:max-w-xl md:mx-auto">
+    <h2 class="h3 font-semibold hidden md:block">Profile</h2>
+    <div class="divide-y">
+      <p class="py-8">Manage your profile information</p>
+      <SettingsUserDetails class="py-8" :user="user" />
+      <SettingsUserPassword class="py-8" :user="user" />
+      <SettingsUserDeleteAccount class="py-8" :user="user" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useActiveUser } from '~/lib/auth/composables/activeUser'
+
+useHead({
+  title: 'Settings - User Profile'
+})
+
+const { activeUser: user } = useActiveUser()
+</script>
diff --git a/packages/frontend-2/pages/settings/user/profile.vue b/packages/frontend-2/pages/settings/user/profile.vue
index 48dc3a2cc3..03b0604a8a 100644
--- a/packages/frontend-2/pages/settings/user/profile.vue
+++ b/packages/frontend-2/pages/settings/user/profile.vue
@@ -3,13 +3,7 @@
     <Portal to="navigation" />
     <SettingsDebug />
     <div class="md:max-w-xl md:mx-auto md:py-12">
-      <h1 class="h2">Profile</h1>
-      <div class="mt-4 divide-y">
-        <p class="py-8">Manage your profile information</p>
-        <SettingsUserDetails class="py-8" :user="user" />
-        <SettingsUserPassword class="py-8" :user="user" />
-        <SettingsUserDeleteAccount class="py-8" :user="user" />
-      </div>
+      <SettingsUserProfile :user="user" />
     </div>
   </div>
 </template>
diff --git a/packages/ui-components/src/components/common/Alert.vue b/packages/ui-components/src/components/common/Alert.vue
index 40d8b5106f..865cb14b7c 100644
--- a/packages/ui-components/src/components/common/Alert.vue
+++ b/packages/ui-components/src/components/common/Alert.vue
@@ -1,11 +1,15 @@
 <template>
   <div class="rounded-md" :class="[containerClasses, textClasses]">
     <div class="flex" :class="subcontainerClasses">
-      <div class="flex-shrink-0">
+      <div v-if="!hideIcon" class="flex-shrink-0">
         <Component :is="icon" :class="iconClasses" aria-hidden="true" />
       </div>
       <div :class="mainContentContainerClasses">
-        <h3 class="text-sm" :class="[hasDescription ? 'font-medium' : '']">
+        <h3
+          v-if="hasTitle"
+          class="text-sm"
+          :class="[hasDescription ? 'font-medium' : '']"
+        >
           <slot name="title">Title</slot>
         </h3>
         <div v-if="hasDescription" :class="descriptionWrapperClasses">
@@ -75,6 +79,7 @@ const props = withDefaults(
       externalUrl?: boolean
     }>
     customIcon?: PropAnyComponent
+    hideIcon?: boolean
     size?: Size
   }>(),
   {
@@ -85,6 +90,7 @@ const props = withDefaults(
 
 const slots = useSlots()
 const hasDescription = computed(() => !!slots['description'])
+const hasTitle = computed(() => !!slots['title'])
 
 const icon = computed(() => {
   if (props.customIcon) return props.customIcon
@@ -185,10 +191,14 @@ const descriptionWrapperClasses = computed(() => {
       break
     case 'default':
     default:
-      classParts.push('mt-1 sm:mt-2 text-xs sm:text-sm')
+      classParts.push('text-xs sm:text-sm')
       break
   }
 
+  if (hasTitle.value && props.size !== 'xs') {
+    classParts.push('mt-1 sm:mt-2')
+  }
+
   return classParts.join(' ')
 })
 

From 4522eab4613aa068f3354d31922ea7f8d9498e04 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Mon, 1 Jul 2024 09:32:36 +0200
Subject: [PATCH 05/77] update modal styling

---
 packages/shared/src/package.json              |  9 ++++++
 .../src/components/layout/Dialog.vue          | 31 ++++++++++---------
 2 files changed, 25 insertions(+), 15 deletions(-)
 create mode 100644 packages/shared/src/package.json

diff --git a/packages/shared/src/package.json b/packages/shared/src/package.json
new file mode 100644
index 0000000000..01ff50b316
--- /dev/null
+++ b/packages/shared/src/package.json
@@ -0,0 +1,9 @@
+{
+  "type": "module",
+  "imports": {
+    "#lodash": {
+      "require": "lodash",
+      "import": "lodash-es"
+    }
+  }
+}
diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue
index 224fd3467c..4283d36109 100644
--- a/packages/ui-components/src/components/layout/Dialog.vue
+++ b/packages/ui-components/src/components/layout/Dialog.vue
@@ -6,29 +6,31 @@
         enter="ease-out duration-300"
         enter-from="opacity-0"
         enter-to="opacity-100"
-        leave="ease-in duration-200"
+        leave="ease-in duration-400"
         leave-from="opacity-100"
         leave-to="opacity-0"
       >
         <div
-          class="fixed top-0 left-0 w-full h-full bg-neutral-100/70 dark:bg-neutral-900/70 transition-opacity backdrop-blur-xs"
+          class="fixed top-0 left-0 w-full h-full bg-black/40 dark:bg-neutral-900/70 transition-opacity backdrop-blur-xs"
         />
       </TransitionChild>
       <div class="fixed top-0 left-0 z-10 h-screen !h-[100dvh] w-screen">
-        <div class="flex justify-center items-center h-full w-full p-4 sm:p-0">
+        <div
+          class="flex md:justify-center items-end md:items-center h-full w-full md:p-4"
+        >
           <TransitionChild
             as="template"
             enter="ease-out duration-300"
-            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enter-to="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100 translate-y-0 sm:scale-100"
-            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-from="md:opacity-0 translate-y-[100%] md:translate-y-4"
+            enter-to="md:opacity-100 translate-y-0"
+            leave="ease-in duration-400"
+            leave-from="md:opacity-100 translate-y-0"
+            leave-to="md:opacity-0 translate-y-[100%] md:translate-y-4"
             @after-leave="$emit('fully-closed')"
           >
             <DialogPanel
               :class="[
-                'transform rounded-lg text-foreground overflow-hidden bg-foundation text-left shadow-xl transition-all flex flex-col max-h-[90vh]',
+                'transform rounded-t-lg md:rounded-lg text-foreground overflow-hidden bg-foundation text-left shadow-xl transition-all flex flex-col h-[98vh] md:h-auto md:max-h-[90vh]',
                 widthClasses
               ]"
               :as="isForm ? 'form' : 'div'"
@@ -37,7 +39,7 @@
               <div :class="scrolledFromTop && 'relative z-20 shadow-lg'">
                 <div
                   v-if="hasTitle"
-                  class="flex items-center justify-start rounded-t-lg shrink-0 min-h-[2rem] sm:min-h-[4rem] p-4 sm:p-6 truncate text-lg sm:text-2xl font-bold"
+                  class="flex items-center justify-start rounded-t-lg shrink-0 min-h-[2rem] sm:min-h-[4rem] px-6 py-4 md:p-6 truncate text-lg sm:text-2xl font-bold"
                 >
                   <div class="w-full truncate pr-12">
                     {{ title }}
@@ -56,23 +58,22 @@
               <button
                 v-if="!hideCloser"
                 type="button"
-                class="absolute z-20 bg-foundation rounded-full p-1"
-                :class="hasTitle ? 'top-2 right-3 sm:top-4' : 'right-4 top-3'"
+                class="absolute z-20 bg-foundation rounded-full p-1.5 shadow border top-4 right-4"
                 @click="open = false"
               >
-                <XMarkIcon class="h-5 sm:h-6 w-5 sm:w-6" />
+                <XMarkIcon class="h-4 w-4" />
               </button>
               <div
                 ref="slotContainer"
                 class="flex-1 simple-scrollbar overflow-y-auto text-sm sm:text-base"
-                :class="hasTitle ? 'px-4 pb-4 sm:px-6' : 'p-4 sm:p-6'"
+                :class="hasTitle ? 'px-6 pb-4' : 'p-6'"
                 @scroll="onScroll"
               >
                 <slot>Put your content here!</slot>
               </div>
               <div
                 v-if="hasButtons"
-                class="relative z-50 flex p-4 sm:p-6 gap-3 shrink-0 bg-foundation"
+                class="relative z-50 flex p-6 gap-3 shrink-0 bg-foundation"
                 :class="{
                   'shadow-t': !scrolledToBottom,
                   [buttonsWrapperClasses || '']: true

From 415a8541c82d1404ea11ca121806fedcc3da5410 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Mon, 1 Jul 2024 09:40:26 +0100
Subject: [PATCH 06/77] SIdebar styling updates

---
 packages/ui-components/package.json           |   2 +-
 .../layout/sidebar/Sidebar.stories.ts         | 318 ++++++++++++++++++
 .../src/components/layout/sidebar/Sidebar.vue |  43 +++
 .../components/layout/sidebar/menu/Group.vue  |  77 +++++
 .../components/layout/sidebar/menu/Menu.vue   |   7 +
 yarn.lock                                     |  35 +-
 6 files changed, 480 insertions(+), 2 deletions(-)
 create mode 100644 packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts
 create mode 100644 packages/ui-components/src/components/layout/sidebar/Sidebar.vue
 create mode 100644 packages/ui-components/src/components/layout/sidebar/menu/Group.vue
 create mode 100644 packages/ui-components/src/components/layout/sidebar/menu/Menu.vue

diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index ffdd881db6..56c0312678 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -90,7 +90,7 @@
     "prettier": "^2.7.1",
     "rollup-plugin-node-builtins": "^2.1.2",
     "storybook": "^8.1.10",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^3.4.4",
     "type-fest": "^2.13.1",
     "typescript": "^5.0.4",
     "unplugin-vue-macros": "^2.7.0",
diff --git a/packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts b/packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts
new file mode 100644
index 0000000000..ccdd48f347
--- /dev/null
+++ b/packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts
@@ -0,0 +1,318 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import LayoutSidebar from '~~/src/components/layout/sidebar/Sidebar.vue'
+import LayoutSidebarMenu from '~~/src/components/layout/sidebar/menu/Menu.vue'
+import LayoutSidebarMenuGroup from '~~/src/components/layout/sidebar/menu/Group.vue'
+import {
+  HomeIcon,
+  PresentationChartLineIcon,
+  Squares2X2Icon,
+  CubeIcon,
+  ChatBubbleOvalLeftIcon,
+  BoltIcon,
+  Cog6ToothIcon,
+  PuzzlePieceIcon,
+  UsersIcon,
+  BookOpenIcon,
+  HeartIcon,
+  ChatBubbleLeftIcon
+} from '@heroicons/vue/24/outline'
+import { UserIcon } from '@heroicons/vue/24/solid'
+import UserAvatar from '~~/src/components/user/Avatar.vue'
+import { computed } from 'vue'
+
+const dashboardItems = computed(() => [
+  {
+    label: 'Dashboard',
+    id: 'dashboard',
+    to: '/',
+    icon: HomeIcon
+  },
+  { label: 'Projects', id: 'projects', to: '/', icon: Squares2X2Icon },
+  {
+    label: 'Activity',
+    id: 'activity',
+    to: '/activity',
+    icon: PresentationChartLineIcon
+  },
+  { label: 'Settings', id: 'settings', to: '/', icon: Cog6ToothIcon }
+])
+
+const workspacesItems = computed(() => [
+  { label: "Benjamin's space", id: 'default-space', tag: 'Free', to: '/workspace' },
+  { label: 'Acme Inc', id: 'profile', to: '/workspace' }
+])
+
+const favouritesItems = computed(() => [
+  { label: 'Different Houses', id: 'different-houses', to: '', icon: Squares2X2Icon },
+  { label: 'Another Project', id: 'another-project', to: '', icon: Squares2X2Icon },
+  { label: 'The Palace', id: 'the-palace', to: '', icon: CubeIcon },
+  {
+    label: 'A discussion title',
+    id: 'a-discussion-title',
+    to: '',
+    icon: ChatBubbleOvalLeftIcon
+  },
+  { label: 'An automation name', id: 'an-automation-name', to: '', icon: BoltIcon }
+])
+
+const resourcesItems = computed(() => [
+  {
+    label: 'Connectors',
+    id: 'connectors',
+    to: 'https://speckle.systems/features/connectors/',
+    external: true,
+    icon: PuzzlePieceIcon
+  },
+  {
+    label: 'Community forum',
+    id: 'community-forum',
+    to: 'https://speckle.community/',
+    external: true,
+    icon: UsersIcon
+  },
+  {
+    label: 'Documentation',
+    id: 'documentation',
+    to: 'https://speckle.guide/',
+    external: true,
+    icon: BookOpenIcon
+  },
+  { label: 'Changelog', id: 'changelog', to: '', external: true, icon: HeartIcon },
+  {
+    label: 'Give us feedback',
+    id: 'give-us-feedback',
+    to: '',
+    icon: ChatBubbleLeftIcon
+  }
+])
+
+const userSettingsItems = computed(() => [
+  {
+    label: 'Profile',
+    id: 'profile',
+    to: '/'
+  },
+  {
+    label: 'Notifications',
+    id: 'notifications',
+    to: '/'
+  }
+])
+
+const workspaceSettingsItems = computed(() => [
+  {
+    label: 'General',
+    id: 'general',
+    to: '/'
+  },
+  {
+    label: 'Project',
+    id: 'project',
+    to: '/'
+  },
+  {
+    label: 'Members',
+    id: 'members',
+    to: '/'
+  },
+  {
+    label: 'Security',
+    id: 'security',
+    to: '/'
+  },
+  {
+    label: 'Regions',
+    id: 'regions',
+    to: '/'
+  }
+])
+
+export default {
+  component: LayoutSidebar,
+  parameters: {
+    docs: {
+      description: {
+        component: 'This component displays a sidebar with optional exit button.'
+      }
+    }
+  },
+  argTypes: {
+    items: {
+      description: 'Array of items to display in the sidebar'
+    },
+    title: {
+      description: 'Title of the sidebar, displayed at the top if provided'
+    },
+    exitButtonText: {
+      description: 'Text for the exit button at the top of the sidebar'
+    },
+    onExitButtonClick: {
+      description: 'Event emitted when the exit button is clicked',
+      type: 'function',
+      action: 'exit-button-click'
+    },
+    collapsible: {
+      description: 'Indicates if the sidebar sections are collapsible',
+      type: 'boolean'
+    }
+  }
+} as Meta
+
+export const Dashboard: StoryObj = {
+  render: (args) => ({
+    components: {
+      LayoutSidebar,
+      LayoutSidebarMenu,
+      LayoutSidebarMenuGroup,
+      HomeIcon,
+      PresentationChartLineIcon,
+      Squares2X2Icon,
+      CubeIcon,
+      ChatBubbleOvalLeftIcon,
+      BoltIcon,
+      Cog6ToothIcon,
+      PuzzlePieceIcon,
+      UsersIcon,
+      BookOpenIcon,
+      HeartIcon,
+      ChatBubbleLeftIcon,
+      UserAvatar,
+      UserIcon
+    },
+    setup() {
+      return {
+        args,
+        dashboardItems,
+        workspacesItems,
+        favouritesItems,
+        resourcesItems
+      }
+    },
+    template: `
+      <LayoutSidebar v-bind="args">
+        <LayoutSidebarMenu>
+          <LayoutSidebarMenuGroup :items="dashboardItems" title="Dashboard">
+            <template #title-icon>
+              <HomeIcon class="size-5" />
+            </template>
+            <template #projects>
+              <Squares2X2Icon class="size-5" />
+            </template>
+            <template #activity>
+              <PresentationChartLineIcon class="size-5" />
+            </template>
+            <template #settings>
+              <Cog6ToothIcon class="size-5" />
+            </template>
+          </LayoutSidebarMenuGroup>
+
+          <LayoutSidebarMenuGroup collapsible title="Workspaces" :items="workspacesItems">
+            <template #title-icon>
+              <UserIcon class="size-5" />
+            </template>
+            <template #default-space>
+              <UserAvatar size="sm" hover-effect class="ml-1" />
+            </template>
+            <template #profile>
+              <UserAvatar size="sm" hover-effect class="ml-1" />
+            </template>
+          </LayoutSidebarMenuGroup>
+
+          <LayoutSidebarMenuGroup title="Favourites" :items="favouritesItems" collapsible>
+            <template #title-icon>
+              <HeartIcon class="size-5" />
+            </template>
+            <template #different-houses>
+              <Squares2X2Icon class="size-5" />
+            </template>
+            <template #another-project>
+              <Squares2X2Icon class="size-5" />
+            </template>
+            <template #the-palace>
+              <CubeIcon class="size-5" />
+            </template>
+            <template #a-discussion-title>
+              <ChatBubbleOvalLeftIcon class="size-5" />
+            </template>
+            <template #an-automation-name>
+              <BoltIcon class="size-5" />
+            </template>
+          </LayoutSidebarMenuGroup>
+
+          <LayoutSidebarMenuGroup title="Resources" :items="resourcesItems">
+            <template #title-icon>
+              <BookOpenIcon class="size-5" />
+            </template>
+            <template #connectors>
+              <PuzzlePieceIcon class="size-5" />
+            </template>
+            <template #community-forum>
+              <UsersIcon class="size-5" />
+            </template>
+            <template #documentation>
+              <BookOpenIcon class="size-5" />
+            </template>
+            <template #changelog>
+              <HeartIcon class="size-5" />
+            </template>
+            <template #give-us-feedback>
+              <ChatBubbleLeftIcon class="size-5" />
+            </template>
+          </LayoutSidebarMenuGroup>
+        </LayoutSidebarMenu>
+      </LayoutSidebar>
+    `
+  }),
+  args: {
+    exitButtonText: 'Exit settings',
+    collapsible: true
+  }
+}
+
+export const Settings: StoryObj = {
+  render: (args) => ({
+    components: {
+      LayoutSidebar,
+      LayoutSidebarMenu,
+      LayoutSidebarMenuGroup,
+      UserIcon
+    },
+    setup() {
+      return {
+        args,
+        userSettingsItems,
+        workspaceSettingsItems
+      }
+    },
+    template: `
+      <LayoutSidebar v-bind="args">
+        <LayoutSidebarMenu>
+          <LayoutSidebarMenuGroup title="User Settings" :items="userSettingsItems">
+            <template #title-icon>
+              <UserIcon class="size-5" />
+            </template>
+          </LayoutSidebarMenuGroup>
+          <LayoutSidebarMenuGroup title="Workspace Settings" :items="workspaceSettingsItems">
+            <template #title-icon>
+              <UserIcon class="size-5" />
+            </template>
+          </LayoutSidebarMenuGroup>
+          <LayoutSidebarMenuGroup title="Server Settings" :items="workspaceSettingsItems">
+            <template #title-icon>
+              <UserIcon class="size-5" />
+            </template>
+          </LayoutSidebarMenuGroup>
+          <LayoutSidebarMenuGroup title="Resources" :items="userSettingsItems">
+            <template #title-icon>
+              <UserIcon class="size-5" />
+            </template>
+          </LayoutSidebarMenuGroup>
+        </LayoutSidebarMenu>
+      </LayoutSidebar>
+    `
+  }),
+  args: {
+    exitButtonText: 'Exit settings',
+    collapsible: true
+  }
+}
diff --git a/packages/ui-components/src/components/layout/sidebar/Sidebar.vue b/packages/ui-components/src/components/layout/sidebar/Sidebar.vue
new file mode 100644
index 0000000000..c875101004
--- /dev/null
+++ b/packages/ui-components/src/components/layout/sidebar/Sidebar.vue
@@ -0,0 +1,43 @@
+<template>
+  <aside
+    class="absolute z-40 top-0 md:left-0 md:relative h-full flex flex-col justify-between w-64 md:w-80 bg-foundation-2 border-r border-outline-3 overflow-x-visible overflow-y-auto p-4 transition-all duration-200 shadow-md md:shadow-none simple-scrollbar"
+    :class="isOpen ? 'left-0' : '-left-64 '"
+  >
+    <button
+      class="md:hidden absolute top-4 -right-12 bg-foundation p-2 rounded border border-outline-3 shadow"
+      @click="isOpen = !isOpen"
+    >
+      <Bars3Icon v-if="!isOpen" class="h-4 w-4" />
+      <XMarkIcon v-else class="h-4 w-4" />
+    </button>
+
+    <button
+      v-if="exitButtonText"
+      class="flex items-center gap-1.5 text-sm font-semibold mb-4 max-w-max"
+      @click="handleExitButtonClick"
+    >
+      <ChevronLeftIcon class="size-3" />
+      {{ exitButtonText }}
+    </button>
+
+    <slot></slot>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { Bars3Icon, XMarkIcon, ChevronLeftIcon } from '@heroicons/vue/24/outline'
+import { ref } from 'vue'
+
+const props = defineProps<{
+  exitButtonText?: string
+  onExitButtonClick?: () => void
+}>()
+
+const isOpen = ref(false)
+
+const handleExitButtonClick = () => {
+  if (typeof props.onExitButtonClick === 'function') {
+    props.onExitButtonClick()
+  }
+}
+</script>
diff --git a/packages/ui-components/src/components/layout/sidebar/menu/Group.vue b/packages/ui-components/src/components/layout/sidebar/menu/Group.vue
new file mode 100644
index 0000000000..e436cb8af2
--- /dev/null
+++ b/packages/ui-components/src/components/layout/sidebar/menu/Group.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="flex flex-col">
+    <div v-if="title" class="select-none mb-1">
+      <button
+        v-if="collapsible"
+        class="group flex gap-1.5 items-center w-full hover:bg-foundation-3 rounded-md p-0.5"
+        @click="isOpen = !isOpen"
+      >
+        <ChevronDownIcon :class="isOpen ? '' : 'rotate-180'" class="size-2.5" />
+        <h6 class="font-bold text-foreground-2 text-xs flex items-center gap-1.5">
+          {{ title }}
+        </h6>
+      </button>
+      <div v-else class="flex gap-1.5 items-center w-full p-0.5 text-foreground-2">
+        <div
+          v-if="$slots['title-icon']"
+          class="size-5 flex items-center justify-center"
+        >
+          <slot name="title-icon"></slot>
+        </div>
+        <h6 class="font-bold text-xs">
+          {{ title }}
+        </h6>
+      </div>
+    </div>
+
+    <div v-show="isOpen">
+      <div v-for="(item, itemIndex) in items" :key="itemIndex">
+        <NuxtLink
+          :to="item.to"
+          class="group flex items-center justify-between gap-2 shrink-0 text-sm select-none rounded-md w-full hover:bg-primary-muted p-1.5"
+          active-class="bg-foundation-focus hover:!bg-foundation-focus"
+          :external="item.external"
+          :target="item.external ? '_blank' : undefined"
+        >
+          <div class="flex items-center gap-2">
+            <div v-if="$slots[item.id]" class="size-5 flex items-center justify-center">
+              <slot :name="item.id" />
+            </div>
+            <span :class="$slots[item.id] ? '' : 'pl-2'">
+              {{ item.label }}
+            </span>
+          </div>
+          <div
+            v-if="item.tag"
+            class="text-xs uppercase bg-primary-muted py-0.5 px-2 rounded-full font-medium text-primary-focus group-hover:bg-white"
+          >
+            {{ item.tag }}
+          </div>
+        </NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon } from '@heroicons/vue/24/outline'
+import { ref, resolveDynamicComponent } from 'vue'
+
+interface MenuItem {
+  label: string
+  id: string
+  to: string
+  tag?: string
+  external?: boolean
+}
+
+defineProps<{
+  title?: string
+  items: MenuItem[]
+  collapsible?: boolean
+}>()
+
+const isOpen = ref(true)
+
+const NuxtLink = resolveDynamicComponent('NuxtLink')
+</script>
diff --git a/packages/ui-components/src/components/layout/sidebar/menu/Menu.vue b/packages/ui-components/src/components/layout/sidebar/menu/Menu.vue
new file mode 100644
index 0000000000..53cb5d7623
--- /dev/null
+++ b/packages/ui-components/src/components/layout/sidebar/menu/Menu.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="flex flex-col gap-4 mb-4">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/yarn.lock b/yarn.lock
index b0afb09ebf..4bf1415a5e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15949,7 +15949,7 @@ __metadata:
     prettier: "npm:^2.7.1"
     rollup-plugin-node-builtins: "npm:^2.1.2"
     storybook: "npm:^8.1.10"
-    tailwindcss: "npm:^3.3.2"
+    tailwindcss: "npm:^3.4.4"
     type-fest: "npm:^2.13.1"
     typescript: "npm:^5.0.4"
     unplugin-vue-macros: "npm:^2.7.0"
@@ -48173,6 +48173,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwindcss@npm:^3.4.4":
+  version: 3.4.4
+  resolution: "tailwindcss@npm:3.4.4"
+  dependencies:
+    "@alloc/quick-lru": "npm:^5.2.0"
+    arg: "npm:^5.0.2"
+    chokidar: "npm:^3.5.3"
+    didyoumean: "npm:^1.2.2"
+    dlv: "npm:^1.1.3"
+    fast-glob: "npm:^3.3.0"
+    glob-parent: "npm:^6.0.2"
+    is-glob: "npm:^4.0.3"
+    jiti: "npm:^1.21.0"
+    lilconfig: "npm:^2.1.0"
+    micromatch: "npm:^4.0.5"
+    normalize-path: "npm:^3.0.0"
+    object-hash: "npm:^3.0.0"
+    picocolors: "npm:^1.0.0"
+    postcss: "npm:^8.4.23"
+    postcss-import: "npm:^15.1.0"
+    postcss-js: "npm:^4.0.1"
+    postcss-load-config: "npm:^4.0.1"
+    postcss-nested: "npm:^6.0.1"
+    postcss-selector-parser: "npm:^6.0.11"
+    resolve: "npm:^1.22.2"
+    sucrase: "npm:^3.32.0"
+  bin:
+    tailwind: lib/cli.js
+    tailwindcss: lib/cli.js
+  checksum: 10/ab120014a68517c079fbeecba06c404ac94088a959b5b5e631214af4d87b332b6e4b28d8453f65eac9d94759a030ca581b1330f7d73cbf497883c4e2de083432
+  languageName: node
+  linkType: hard
+
 "tapable@npm:^1.0.0":
   version: 1.1.3
   resolution: "tapable@npm:1.1.3"

From 8a37e50f27694e7c4ef583e3665dbfb16fb29fba Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Mon, 1 Jul 2024 16:07:21 +0100
Subject: [PATCH 07/77] feat: refactor component

---
 .../frontend-2/components/header/NavBar.vue   |   2 +-
 .../layout/sidebar/Sidebar.stories.ts         | 314 +++---------------
 .../src/components/layout/sidebar/Sidebar.vue |  38 +--
 .../components/layout/sidebar/menu/Group.vue  |  77 -----
 .../components/layout/sidebar/menu/Menu.vue   |   4 +-
 .../layout/sidebar/menu/group/Group.vue       |  43 +++
 .../layout/sidebar/menu/group/Item.vue        |  61 ++++
 packages/ui-components/src/lib.ts             |   8 +
 8 files changed, 161 insertions(+), 386 deletions(-)
 delete mode 100644 packages/ui-components/src/components/layout/sidebar/menu/Group.vue
 create mode 100644 packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue
 create mode 100644 packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue

diff --git a/packages/frontend-2/components/header/NavBar.vue b/packages/frontend-2/components/header/NavBar.vue
index fb3b7ec035..af2ea268f3 100644
--- a/packages/frontend-2/components/header/NavBar.vue
+++ b/packages/frontend-2/components/header/NavBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <nav class="fixed z-20 top-0 h-14 bg-foundation shadow">
+    <nav class="fixed z-40 top-0 h-14 bg-foundation shadow">
       <div
         class="flex gap-4 items-center justify-between h-full w-screen py-4 pl-3 pr-4"
       >
diff --git a/packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts b/packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts
index ccdd48f347..fcf32f1c60 100644
--- a/packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts
+++ b/packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts
@@ -1,159 +1,31 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import LayoutSidebar from '~~/src/components/layout/sidebar/Sidebar.vue'
 import LayoutSidebarMenu from '~~/src/components/layout/sidebar/menu/Menu.vue'
-import LayoutSidebarMenuGroup from '~~/src/components/layout/sidebar/menu/Group.vue'
-import {
-  HomeIcon,
-  PresentationChartLineIcon,
-  Squares2X2Icon,
-  CubeIcon,
-  ChatBubbleOvalLeftIcon,
-  BoltIcon,
-  Cog6ToothIcon,
-  PuzzlePieceIcon,
-  UsersIcon,
-  BookOpenIcon,
-  HeartIcon,
-  ChatBubbleLeftIcon
-} from '@heroicons/vue/24/outline'
-import { UserIcon } from '@heroicons/vue/24/solid'
-import UserAvatar from '~~/src/components/user/Avatar.vue'
-import { computed } from 'vue'
-
-const dashboardItems = computed(() => [
-  {
-    label: 'Dashboard',
-    id: 'dashboard',
-    to: '/',
-    icon: HomeIcon
-  },
-  { label: 'Projects', id: 'projects', to: '/', icon: Squares2X2Icon },
-  {
-    label: 'Activity',
-    id: 'activity',
-    to: '/activity',
-    icon: PresentationChartLineIcon
-  },
-  { label: 'Settings', id: 'settings', to: '/', icon: Cog6ToothIcon }
-])
-
-const workspacesItems = computed(() => [
-  { label: "Benjamin's space", id: 'default-space', tag: 'Free', to: '/workspace' },
-  { label: 'Acme Inc', id: 'profile', to: '/workspace' }
-])
-
-const favouritesItems = computed(() => [
-  { label: 'Different Houses', id: 'different-houses', to: '', icon: Squares2X2Icon },
-  { label: 'Another Project', id: 'another-project', to: '', icon: Squares2X2Icon },
-  { label: 'The Palace', id: 'the-palace', to: '', icon: CubeIcon },
-  {
-    label: 'A discussion title',
-    id: 'a-discussion-title',
-    to: '',
-    icon: ChatBubbleOvalLeftIcon
-  },
-  { label: 'An automation name', id: 'an-automation-name', to: '', icon: BoltIcon }
-])
-
-const resourcesItems = computed(() => [
-  {
-    label: 'Connectors',
-    id: 'connectors',
-    to: 'https://speckle.systems/features/connectors/',
-    external: true,
-    icon: PuzzlePieceIcon
-  },
-  {
-    label: 'Community forum',
-    id: 'community-forum',
-    to: 'https://speckle.community/',
-    external: true,
-    icon: UsersIcon
-  },
-  {
-    label: 'Documentation',
-    id: 'documentation',
-    to: 'https://speckle.guide/',
-    external: true,
-    icon: BookOpenIcon
-  },
-  { label: 'Changelog', id: 'changelog', to: '', external: true, icon: HeartIcon },
-  {
-    label: 'Give us feedback',
-    id: 'give-us-feedback',
-    to: '',
-    icon: ChatBubbleLeftIcon
-  }
-])
-
-const userSettingsItems = computed(() => [
-  {
-    label: 'Profile',
-    id: 'profile',
-    to: '/'
-  },
-  {
-    label: 'Notifications',
-    id: 'notifications',
-    to: '/'
-  }
-])
-
-const workspaceSettingsItems = computed(() => [
-  {
-    label: 'General',
-    id: 'general',
-    to: '/'
-  },
-  {
-    label: 'Project',
-    id: 'project',
-    to: '/'
-  },
-  {
-    label: 'Members',
-    id: 'members',
-    to: '/'
-  },
-  {
-    label: 'Security',
-    id: 'security',
-    to: '/'
-  },
-  {
-    label: 'Regions',
-    id: 'regions',
-    to: '/'
-  }
-])
+import LayoutSidebarMenuGroup from '~~/src/components/layout/sidebar/menu/group/Group.vue'
+import LayoutSidebarMenuGroupItem from '~~/src/components/layout/sidebar/menu/group/Item.vue'
+import { HomeIcon } from '@heroicons/vue/24/outline'
 
 export default {
   component: LayoutSidebar,
   parameters: {
     docs: {
       description: {
-        component: 'This component displays a sidebar with optional exit button.'
+        component:
+          'This component displays a sidebar with an optional topbar button slot.'
       }
     }
   },
   argTypes: {
-    items: {
-      description: 'Array of items to display in the sidebar'
-    },
     title: {
       description: 'Title of the sidebar, displayed at the top if provided'
     },
-    exitButtonText: {
-      description: 'Text for the exit button at the top of the sidebar'
-    },
-    onExitButtonClick: {
-      description: 'Event emitted when the exit button is clicked',
-      type: 'function',
-      action: 'exit-button-click'
-    },
     collapsible: {
       description: 'Indicates if the sidebar sections are collapsible',
       type: 'boolean'
+    },
+    isStatic: {
+      description: 'Indicates if the sidebar should always be visible',
+      type: 'boolean'
     }
   }
 } as Meta
@@ -164,155 +36,61 @@ export const Dashboard: StoryObj = {
       LayoutSidebar,
       LayoutSidebarMenu,
       LayoutSidebarMenuGroup,
-      HomeIcon,
-      PresentationChartLineIcon,
-      Squares2X2Icon,
-      CubeIcon,
-      ChatBubbleOvalLeftIcon,
-      BoltIcon,
-      Cog6ToothIcon,
-      PuzzlePieceIcon,
-      UsersIcon,
-      BookOpenIcon,
-      HeartIcon,
-      ChatBubbleLeftIcon,
-      UserAvatar,
-      UserIcon
+      LayoutSidebarMenuGroupItem,
+      HomeIcon
     },
     setup() {
       return {
-        args,
-        dashboardItems,
-        workspacesItems,
-        favouritesItems,
-        resourcesItems
+        args
       }
     },
     template: `
       <LayoutSidebar v-bind="args">
         <LayoutSidebarMenu>
-          <LayoutSidebarMenuGroup :items="dashboardItems" title="Dashboard">
+          <LayoutSidebarMenuGroup title="Group Title with Icon">
             <template #title-icon>
               <HomeIcon class="size-5" />
             </template>
-            <template #projects>
-              <Squares2X2Icon class="size-5" />
-            </template>
-            <template #activity>
-              <PresentationChartLineIcon class="size-5" />
-            </template>
-            <template #settings>
-              <Cog6ToothIcon class="size-5" />
-            </template>
-          </LayoutSidebarMenuGroup>
+            <LayoutSidebarMenuGroupItem label="Group Item with Icon" to="/" >
+              <template #icon>
+                <HomeIcon class="size-5" />
+              </template>
+            </LayoutSidebarMenuGroupItem>
+            <LayoutSidebarMenuGroupItem label="Group Item with Icon" to="/" >
+              <template #icon>
+                <HomeIcon class="size-5" />
+              </template>
+            </LayoutSidebarMenuGroupItem>
+            <LayoutSidebarMenuGroupItem label="Group Item with Icon" to="/" >
+              <template #icon>
+                <HomeIcon class="size-5" />
+              </template>
+            </LayoutSidebarMenuGroupItem>
 
-          <LayoutSidebarMenuGroup collapsible title="Workspaces" :items="workspacesItems">
-            <template #title-icon>
-              <UserIcon class="size-5" />
-            </template>
-            <template #default-space>
-              <UserAvatar size="sm" hover-effect class="ml-1" />
-            </template>
-            <template #profile>
-              <UserAvatar size="sm" hover-effect class="ml-1" />
-            </template>
-          </LayoutSidebarMenuGroup>
+            <LayoutSidebarMenuGroupItem label="Group Item with no Icon" to="/" />
 
-          <LayoutSidebarMenuGroup title="Favourites" :items="favouritesItems" collapsible>
-            <template #title-icon>
-              <HeartIcon class="size-5" />
-            </template>
-            <template #different-houses>
-              <Squares2X2Icon class="size-5" />
-            </template>
-            <template #another-project>
-              <Squares2X2Icon class="size-5" />
-            </template>
-            <template #the-palace>
-              <CubeIcon class="size-5" />
-            </template>
-            <template #a-discussion-title>
-              <ChatBubbleOvalLeftIcon class="size-5" />
-            </template>
-            <template #an-automation-name>
-              <BoltIcon class="size-5" />
-            </template>
+            <LayoutSidebarMenuGroupItem label="Group Item with Child" to="/">
+              <LayoutSidebarMenuGroupItem label="Group Item child with Child" to="/">
+                <LayoutSidebarMenuGroupItem label="Group Item child" to="/">
+                  <template #icon>
+                    <HomeIcon class="size-5" />
+                  </template>
+                </LayoutSidebarMenuGroupItem>
+              </LayoutSidebarMenuGroupItem>
+            </LayoutSidebarMenuGroupItem>
           </LayoutSidebarMenuGroup>
 
-          <LayoutSidebarMenuGroup title="Resources" :items="resourcesItems">
-            <template #title-icon>
-              <BookOpenIcon class="size-5" />
-            </template>
-            <template #connectors>
-              <PuzzlePieceIcon class="size-5" />
-            </template>
-            <template #community-forum>
-              <UsersIcon class="size-5" />
-            </template>
-            <template #documentation>
-              <BookOpenIcon class="size-5" />
-            </template>
-            <template #changelog>
-              <HeartIcon class="size-5" />
-            </template>
-            <template #give-us-feedback>
-              <ChatBubbleLeftIcon class="size-5" />
-            </template>
+          <LayoutSidebarMenuGroup title="Group Title without icon">
+            <LayoutSidebarMenuGroupItem label="Menu item with children" to="/">
+              <LayoutSidebarMenuGroupItem label="Menu item" to="/" />
+              <LayoutSidebarMenuGroupItem label="Menu item" to="/" />
+              <LayoutSidebarMenuGroupItem label="Menu item" to="/" />
+              <LayoutSidebarMenuGroupItem label="Menu item" to="/" />
+            </LayoutSidebarMenuGroupItem>
           </LayoutSidebarMenuGroup>
-        </LayoutSidebarMenu>
-      </LayoutSidebar>
-    `
-  }),
-  args: {
-    exitButtonText: 'Exit settings',
-    collapsible: true
-  }
-}
 
-export const Settings: StoryObj = {
-  render: (args) => ({
-    components: {
-      LayoutSidebar,
-      LayoutSidebarMenu,
-      LayoutSidebarMenuGroup,
-      UserIcon
-    },
-    setup() {
-      return {
-        args,
-        userSettingsItems,
-        workspaceSettingsItems
-      }
-    },
-    template: `
-      <LayoutSidebar v-bind="args">
-        <LayoutSidebarMenu>
-          <LayoutSidebarMenuGroup title="User Settings" :items="userSettingsItems">
-            <template #title-icon>
-              <UserIcon class="size-5" />
-            </template>
-          </LayoutSidebarMenuGroup>
-          <LayoutSidebarMenuGroup title="Workspace Settings" :items="workspaceSettingsItems">
-            <template #title-icon>
-              <UserIcon class="size-5" />
-            </template>
-          </LayoutSidebarMenuGroup>
-          <LayoutSidebarMenuGroup title="Server Settings" :items="workspaceSettingsItems">
-            <template #title-icon>
-              <UserIcon class="size-5" />
-            </template>
-          </LayoutSidebarMenuGroup>
-          <LayoutSidebarMenuGroup title="Resources" :items="userSettingsItems">
-            <template #title-icon>
-              <UserIcon class="size-5" />
-            </template>
-          </LayoutSidebarMenuGroup>
         </LayoutSidebarMenu>
       </LayoutSidebar>
     `
-  }),
-  args: {
-    exitButtonText: 'Exit settings',
-    collapsible: true
-  }
+  })
 }
diff --git a/packages/ui-components/src/components/layout/sidebar/Sidebar.vue b/packages/ui-components/src/components/layout/sidebar/Sidebar.vue
index c875101004..9b6b82f221 100644
--- a/packages/ui-components/src/components/layout/sidebar/Sidebar.vue
+++ b/packages/ui-components/src/components/layout/sidebar/Sidebar.vue
@@ -1,43 +1,7 @@
 <template>
   <aside
-    class="absolute z-40 top-0 md:left-0 md:relative h-full flex flex-col justify-between w-64 md:w-80 bg-foundation-2 border-r border-outline-3 overflow-x-visible overflow-y-auto p-4 transition-all duration-200 shadow-md md:shadow-none simple-scrollbar"
-    :class="isOpen ? 'left-0' : '-left-64 '"
+    class="flex flex-col justify-between h-full w-full bg-foundation-2 border-r border-outline-3 overflow-x-visible overflow-y-auto p-4 shadow simple-scrollbar"
   >
-    <button
-      class="md:hidden absolute top-4 -right-12 bg-foundation p-2 rounded border border-outline-3 shadow"
-      @click="isOpen = !isOpen"
-    >
-      <Bars3Icon v-if="!isOpen" class="h-4 w-4" />
-      <XMarkIcon v-else class="h-4 w-4" />
-    </button>
-
-    <button
-      v-if="exitButtonText"
-      class="flex items-center gap-1.5 text-sm font-semibold mb-4 max-w-max"
-      @click="handleExitButtonClick"
-    >
-      <ChevronLeftIcon class="size-3" />
-      {{ exitButtonText }}
-    </button>
-
     <slot></slot>
   </aside>
 </template>
-
-<script setup lang="ts">
-import { Bars3Icon, XMarkIcon, ChevronLeftIcon } from '@heroicons/vue/24/outline'
-import { ref } from 'vue'
-
-const props = defineProps<{
-  exitButtonText?: string
-  onExitButtonClick?: () => void
-}>()
-
-const isOpen = ref(false)
-
-const handleExitButtonClick = () => {
-  if (typeof props.onExitButtonClick === 'function') {
-    props.onExitButtonClick()
-  }
-}
-</script>
diff --git a/packages/ui-components/src/components/layout/sidebar/menu/Group.vue b/packages/ui-components/src/components/layout/sidebar/menu/Group.vue
deleted file mode 100644
index e436cb8af2..0000000000
--- a/packages/ui-components/src/components/layout/sidebar/menu/Group.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <div class="flex flex-col">
-    <div v-if="title" class="select-none mb-1">
-      <button
-        v-if="collapsible"
-        class="group flex gap-1.5 items-center w-full hover:bg-foundation-3 rounded-md p-0.5"
-        @click="isOpen = !isOpen"
-      >
-        <ChevronDownIcon :class="isOpen ? '' : 'rotate-180'" class="size-2.5" />
-        <h6 class="font-bold text-foreground-2 text-xs flex items-center gap-1.5">
-          {{ title }}
-        </h6>
-      </button>
-      <div v-else class="flex gap-1.5 items-center w-full p-0.5 text-foreground-2">
-        <div
-          v-if="$slots['title-icon']"
-          class="size-5 flex items-center justify-center"
-        >
-          <slot name="title-icon"></slot>
-        </div>
-        <h6 class="font-bold text-xs">
-          {{ title }}
-        </h6>
-      </div>
-    </div>
-
-    <div v-show="isOpen">
-      <div v-for="(item, itemIndex) in items" :key="itemIndex">
-        <NuxtLink
-          :to="item.to"
-          class="group flex items-center justify-between gap-2 shrink-0 text-sm select-none rounded-md w-full hover:bg-primary-muted p-1.5"
-          active-class="bg-foundation-focus hover:!bg-foundation-focus"
-          :external="item.external"
-          :target="item.external ? '_blank' : undefined"
-        >
-          <div class="flex items-center gap-2">
-            <div v-if="$slots[item.id]" class="size-5 flex items-center justify-center">
-              <slot :name="item.id" />
-            </div>
-            <span :class="$slots[item.id] ? '' : 'pl-2'">
-              {{ item.label }}
-            </span>
-          </div>
-          <div
-            v-if="item.tag"
-            class="text-xs uppercase bg-primary-muted py-0.5 px-2 rounded-full font-medium text-primary-focus group-hover:bg-white"
-          >
-            {{ item.tag }}
-          </div>
-        </NuxtLink>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ChevronDownIcon } from '@heroicons/vue/24/outline'
-import { ref, resolveDynamicComponent } from 'vue'
-
-interface MenuItem {
-  label: string
-  id: string
-  to: string
-  tag?: string
-  external?: boolean
-}
-
-defineProps<{
-  title?: string
-  items: MenuItem[]
-  collapsible?: boolean
-}>()
-
-const isOpen = ref(true)
-
-const NuxtLink = resolveDynamicComponent('NuxtLink')
-</script>
diff --git a/packages/ui-components/src/components/layout/sidebar/menu/Menu.vue b/packages/ui-components/src/components/layout/sidebar/menu/Menu.vue
index 53cb5d7623..559b81c18a 100644
--- a/packages/ui-components/src/components/layout/sidebar/menu/Menu.vue
+++ b/packages/ui-components/src/components/layout/sidebar/menu/Menu.vue
@@ -1,7 +1,5 @@
 <template>
-  <div class="flex flex-col gap-4 mb-4">
+  <div class="flex flex-col gap-4">
     <slot></slot>
   </div>
 </template>
-
-<script setup lang="ts"></script>
diff --git a/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue b/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue
new file mode 100644
index 0000000000..dfeffde078
--- /dev/null
+++ b/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="flex flex-col">
+    <div v-if="title" class="select-none mb-1">
+      <button
+        v-if="collapsible"
+        class="group flex gap-1.5 items-center w-full hover:bg-foundation-3 rounded-md p-0.5"
+        @click="isOpen = !isOpen"
+      >
+        <ChevronDownIcon :class="isOpen ? '' : 'rotate-180'" class="size-2.5" />
+        <h6 class="font-bold text-foreground-2 text-xs flex items-center gap-1.5">
+          {{ title }}
+        </h6>
+      </button>
+      <div v-else class="flex gap-1 items-center w-full p-0.5 text-foreground-2">
+        <div
+          v-if="$slots['title-icon']"
+          class="size-5 flex items-center justify-center"
+        >
+          <slot name="title-icon"></slot>
+        </div>
+        <h6 class="font-bold text-xs">
+          {{ title }}
+        </h6>
+      </div>
+    </div>
+
+    <div v-show="isOpen" class="flex flex-col">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon } from '@heroicons/vue/24/outline'
+import { ref } from 'vue'
+
+defineProps<{
+  title?: string
+  collapsible?: boolean
+}>()
+
+const isOpen = ref(true)
+</script>
diff --git a/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue b/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
new file mode 100644
index 0000000000..254e98b70e
--- /dev/null
+++ b/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <NuxtLink
+      v-if="!hasChildren"
+      :to="to"
+      class="group flex items-center justify-between gap-2 shrink-0 text-sm select-none rounded-md w-full hover:bg-primary-muted p-1.5"
+      active-class="bg-foundation-focus hover:!bg-foundation-focus"
+      :external="external"
+      :target="external ? '_blank' : undefined"
+    >
+      <div class="flex items-center gap-2">
+        <div v-if="$slots.icon" class="size-5 flex items-center justify-center">
+          <slot name="icon" />
+        </div>
+        <span :class="$slots.icon ? '' : 'pl-2'">
+          {{ label }}
+        </span>
+      </div>
+      <div
+        v-if="tag"
+        class="text-xs uppercase bg-primary-muted py-0.5 px-2 rounded-full font-medium text-primary-focus group-hover:bg-white"
+      >
+        {{ tag }}
+      </div>
+    </NuxtLink>
+    <div v-else class="flex flex-col py-2">
+      <button
+        class="group flex gap-1.5 items-center w-full hover:bg-foundation-3 rounded-md p-0.5"
+        @click="isOpen = !isOpen"
+      >
+        <ChevronDownIcon :class="isOpen ? '' : 'rotate-180'" class="size-2.5" />
+        <h6 class="font-bold text-foreground-2 text-xs flex items-center gap-1.5">
+          {{ label }}
+        </h6>
+      </button>
+      <div v-show="isOpen" class="pl-4">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon } from '@heroicons/vue/24/outline'
+import { ref, resolveDynamicComponent, useSlots } from 'vue'
+
+defineProps<{
+  label: string
+  to: string
+  tag?: string
+  external?: boolean
+}>()
+
+const isOpen = ref(true)
+
+const NuxtLink = resolveDynamicComponent('NuxtLink')
+
+const slots = useSlots()
+
+const hasChildren = !!slots.default
+</script>
diff --git a/packages/ui-components/src/lib.ts b/packages/ui-components/src/lib.ts
index a83c6e23f9..cf9c6b9d0f 100644
--- a/packages/ui-components/src/lib.ts
+++ b/packages/ui-components/src/lib.ts
@@ -64,6 +64,10 @@ import LayoutTable from '~~/src/components/layout/Table.vue'
 import InfiniteLoading from '~~/src/components/InfiniteLoading.vue'
 import type { InfiniteLoaderState } from '~~/src/helpers/global/components'
 import LayoutPanel from '~~/src/components/layout/Panel.vue'
+import LayoutSidebar from '~~/src/components/layout/sidebar/Sidebar.vue'
+import LayoutSidebarMenu from '~~/src/components/layout/sidebar/menu/Menu.vue'
+import LayoutSidebarMenuGroup from '~~/src/components/layout/sidebar/menu/group/Group.vue'
+import LayoutSidebarMenuGroupItem from '~~/src/components/layout/sidebar/menu/group/Item.vue'
 import CommonAlert from '~~/src/components/common/Alert.vue'
 import {
   writableAsyncComputed,
@@ -146,6 +150,10 @@ export {
   LayoutTabsHoriztonal,
   LayoutTabsVertical,
   LayoutTable,
+  LayoutSidebar,
+  LayoutSidebarMenu,
+  LayoutSidebarMenuGroup,
+  LayoutSidebarMenuGroupItem,
   InfiniteLoading,
   LayoutPanel,
   CommonAlert,

From a2f3fab8e70a369fbd27ca65128eaa1386723eb5 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Mon, 1 Jul 2024 16:08:08 +0100
Subject: [PATCH 08/77] Remove unused args

---
 .../src/components/layout/sidebar/Sidebar.stories.ts      | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts b/packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts
index fcf32f1c60..66e174a6a8 100644
--- a/packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts
+++ b/packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts
@@ -18,14 +18,6 @@ export default {
   argTypes: {
     title: {
       description: 'Title of the sidebar, displayed at the top if provided'
-    },
-    collapsible: {
-      description: 'Indicates if the sidebar sections are collapsible',
-      type: 'boolean'
-    },
-    isStatic: {
-      description: 'Indicates if the sidebar should always be visible',
-      type: 'boolean'
     }
   }
 } as Meta

From 317d1af04ab13ad995c8cef5697d43e37f9b5b40 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Mon, 1 Jul 2024 16:26:59 +0100
Subject: [PATCH 09/77] Remove styles. Semantic tags

---
 .../ui-components/src/components/layout/sidebar/Sidebar.vue   | 4 +---
 .../ui-components/src/components/layout/sidebar/menu/Menu.vue | 4 ++--
 .../src/components/layout/sidebar/menu/group/Item.vue         | 2 +-
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/ui-components/src/components/layout/sidebar/Sidebar.vue b/packages/ui-components/src/components/layout/sidebar/Sidebar.vue
index 9b6b82f221..5a6a85a591 100644
--- a/packages/ui-components/src/components/layout/sidebar/Sidebar.vue
+++ b/packages/ui-components/src/components/layout/sidebar/Sidebar.vue
@@ -1,7 +1,5 @@
 <template>
-  <aside
-    class="flex flex-col justify-between h-full w-full bg-foundation-2 border-r border-outline-3 overflow-x-visible overflow-y-auto p-4 shadow simple-scrollbar"
-  >
+  <aside class="flex flex-col justify-between h-full w-full">
     <slot></slot>
   </aside>
 </template>
diff --git a/packages/ui-components/src/components/layout/sidebar/menu/Menu.vue b/packages/ui-components/src/components/layout/sidebar/menu/Menu.vue
index 559b81c18a..91fcc9fa1c 100644
--- a/packages/ui-components/src/components/layout/sidebar/menu/Menu.vue
+++ b/packages/ui-components/src/components/layout/sidebar/menu/Menu.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-4">
+  <nav class="flex flex-col gap-4">
     <slot></slot>
-  </div>
+  </nav>
 </template>
diff --git a/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue b/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
index 254e98b70e..feb1e3f11e 100644
--- a/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
+++ b/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
@@ -23,7 +23,7 @@
         {{ tag }}
       </div>
     </NuxtLink>
-    <div v-else class="flex flex-col py-2">
+    <div v-else class="flex flex-col">
       <button
         class="group flex gap-1.5 items-center w-full hover:bg-foundation-3 rounded-md p-0.5"
         @click="isOpen = !isOpen"

From 7aa84a576cfd28bf9c20767600d566c10f0b4ffa Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Mon, 1 Jul 2024 17:20:59 +0100
Subject: [PATCH 10/77] FE2 TESTING CHANGES

---
 packages/frontend-2/app.vue                   |   2 +-
 .../frontend-2/components/sidebar/Main.vue    | 109 ++++++++++++++++++
 packages/frontend-2/layouts/default.vue       |  64 +++++++++-
 3 files changed, 170 insertions(+), 5 deletions(-)
 create mode 100644 packages/frontend-2/components/sidebar/Main.vue

diff --git a/packages/frontend-2/app.vue b/packages/frontend-2/app.vue
index f1a988d50c..dd0f42f67e 100644
--- a/packages/frontend-2/app.vue
+++ b/packages/frontend-2/app.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     id="speckle"
-    class="bg-foundation-page text-foreground has-[.viewer]:!overflow-hidden has-[.viewer-transparent]:!bg-transparent"
+    class="bg-foundation-page text-foreground has-[.viewer-transparent]:!bg-transparent"
   >
     <NuxtLayout>
       <NuxtPage />
diff --git a/packages/frontend-2/components/sidebar/Main.vue b/packages/frontend-2/components/sidebar/Main.vue
new file mode 100644
index 0000000000..7cfeaddb53
--- /dev/null
+++ b/packages/frontend-2/components/sidebar/Main.vue
@@ -0,0 +1,109 @@
+<template>
+  <LayoutSidebar>
+    <LayoutSidebarMenu>
+      <LayoutSidebarMenuGroup>
+        <LayoutSidebarMenuGroupItem label="Dashboard" :to="homeRoute">
+          <template #icon>
+            <HomeIcon />
+          </template>
+        </LayoutSidebarMenuGroupItem>
+        <LayoutSidebarMenuGroupItem label="Projects" :to="homeRoute">
+          <template #icon>
+            <Squares2X2Icon />
+          </template>
+        </LayoutSidebarMenuGroupItem>
+        <LayoutSidebarMenuGroupItem label="Activity" :to="homeRoute">
+          <template #icon>
+            <PresentationChartLineIcon />
+          </template>
+        </LayoutSidebarMenuGroupItem>
+      </LayoutSidebarMenuGroup>
+
+      <LayoutSidebarMenuGroup title="Workspaces">
+        <LayoutSidebarMenuGroupItem label="Benjamin's space" :to="homeRoute">
+          <template #icon>
+            <UserAvatar size="sm" />
+          </template>
+        </LayoutSidebarMenuGroupItem>
+        <LayoutSidebarMenuGroupItem label="Acme Inc" :to="homeRoute">
+          <template #icon>
+            <UserAvatar size="sm" />
+          </template>
+        </LayoutSidebarMenuGroupItem>
+      </LayoutSidebarMenuGroup>
+
+      <LayoutSidebarMenuGroup title="Favorites">
+        <LayoutSidebarMenuGroupItem label="Different Houses" :to="homeRoute">
+          <template #icon>
+            <Squares2X2Icon />
+          </template>
+        </LayoutSidebarMenuGroupItem>
+        <LayoutSidebarMenuGroupItem label="Acme Inc" :to="homeRoute">
+          <template #icon>
+            <Squares2X2Icon />
+          </template>
+        </LayoutSidebarMenuGroupItem>
+        <LayoutSidebarMenuGroupItem label="The Palace" :to="homeRoute">
+          <template #icon>
+            <CubeIcon />
+          </template>
+        </LayoutSidebarMenuGroupItem>
+        <LayoutSidebarMenuGroupItem label="An automation name" :to="homeRoute">
+          <template #icon>
+            <BoltIcon />
+          </template>
+        </LayoutSidebarMenuGroupItem>
+      </LayoutSidebarMenuGroup>
+
+      <LayoutSidebarMenuGroup title="Resources">
+        <LayoutSidebarMenuGroupItem label="Connectors" :to="homeRoute">
+          <template #icon>
+            <PuzzlePieceIcon />
+          </template>
+        </LayoutSidebarMenuGroupItem>
+        <LayoutSidebarMenuGroupItem label="Community Forum" :to="homeRoute">
+          <template #icon>
+            <UsersIcon />
+          </template>
+        </LayoutSidebarMenuGroupItem>
+        <LayoutSidebarMenuGroupItem label="Documentation" :to="homeRoute">
+          <template #icon>
+            <BookOpenIcon />
+          </template>
+        </LayoutSidebarMenuGroupItem>
+        <LayoutSidebarMenuGroupItem label="Changelog" :to="homeRoute">
+          <template #icon>
+            <HeartIcon />
+          </template>
+        </LayoutSidebarMenuGroupItem>
+        <LayoutSidebarMenuGroupItem label="Give us feedback" :to="homeRoute">
+          <template #icon>
+            <ChatBubbleLeftIcon />
+          </template>
+        </LayoutSidebarMenuGroupItem>
+      </LayoutSidebarMenuGroup>
+    </LayoutSidebarMenu>
+  </LayoutSidebar>
+</template>
+
+<script setup lang="ts">
+import {
+  HomeIcon,
+  PresentationChartLineIcon,
+  Squares2X2Icon,
+  CubeIcon,
+  BoltIcon,
+  PuzzlePieceIcon,
+  UsersIcon,
+  BookOpenIcon,
+  HeartIcon,
+  ChatBubbleLeftIcon
+} from '@heroicons/vue/24/outline'
+import { homeRoute } from '~~/lib/common/helpers/route'
+import {
+  LayoutSidebar,
+  LayoutSidebarMenu,
+  LayoutSidebarMenuGroup,
+  UserAvatar
+} from '@speckle/ui-components'
+</script>
diff --git a/packages/frontend-2/layouts/default.vue b/packages/frontend-2/layouts/default.vue
index 72830bdbf7..008c90a9c2 100644
--- a/packages/frontend-2/layouts/default.vue
+++ b/packages/frontend-2/layouts/default.vue
@@ -1,8 +1,64 @@
 <template>
-  <div class="min-h-full">
+  <div>
     <HeaderNavBar />
-    <main class="my-4 layout-container pb-20">
-      <slot />
-    </main>
+    <div class="fixed top-0 left-0 h-dvh w-full overflow-hidden flex pt-14">
+      <div ref="sidebar" class="relative" :style="{ width: sidebarWidth + 'px' }">
+        <div
+          class="bg-foundation overflow-y-auto overflow-x-hidden simple-scrollbar h-full"
+        >
+          <div class="p-4">
+            <SidebarMain />
+          </div>
+        </div>
+
+        <div
+          ref="resizeHandle"
+          class="group absolute right-0 top-0 h-full w-1.5 hover:cursor-ew-resize flex justify-end"
+        >
+          <div class="opacity-0 group-hover:opacity-100 h-full w-0.5 bg-primary"></div>
+        </div>
+      </div>
+
+      <main class="flex-1 overflow-y-auto simple-scrollbar pt-8 pb-16">
+        <div class="container mx-auto px-12">
+          <slot />
+        </div>
+      </main>
+    </div>
   </div>
 </template>
+
+<script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
+
+const sidebar = ref(null)
+const resizeHandle = ref(null)
+const isResizing = ref(false)
+const sidebarWidth = ref(256) // Initial width (equivalent to w-64)
+let startWidth = 0
+let startX = 0
+
+const startResizing = (event: MouseEvent) => {
+  event.preventDefault()
+  isResizing.value = true
+  startX = event.clientX
+  startWidth = sidebarWidth.value
+}
+
+if (import.meta.client) {
+  useEventListener(resizeHandle, 'mousedown', startResizing)
+
+  useEventListener(document, 'mousemove', (event) => {
+    if (isResizing.value) {
+      const diffX = event.clientX - startX
+      sidebarWidth.value = Math.max(220, Math.min(startWidth + diffX, 400))
+    }
+  })
+
+  useEventListener(document, 'mouseup', () => {
+    if (isResizing.value) {
+      isResizing.value = false
+    }
+  })
+}
+</script>

From 143ace12d07df3d11dc5cb5d68344903465a3d5b Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Tue, 2 Jul 2024 10:08:19 +0200
Subject: [PATCH 11/77] Implemented sidebar

---
 packages/frontend-2/app.vue                   |  4 +-
 .../frontend-2/components/settings/Modal.vue  | 88 ++++++++++---------
 2 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/packages/frontend-2/app.vue b/packages/frontend-2/app.vue
index 89f061e8c7..d066b78d12 100644
--- a/packages/frontend-2/app.vue
+++ b/packages/frontend-2/app.vue
@@ -1,14 +1,14 @@
 <template>
   <div
     id="speckle"
-    class="bg-foundation-page text-foreground has-[.viewer-transparent]:!bg-transparent"
+    class="bg-foundation-page text-foreground has-[.viewer]:!overflow-hidden has-[.viewer-transparent]:!bg-transparent"
   >
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
     <SingletonManagers />
-    <SettingsModal />
   </div>
+  <SettingsModal />
 </template>
 <script setup lang="ts">
 import { useTheme } from '~~/lib/core/composables/theme'
diff --git a/packages/frontend-2/components/settings/Modal.vue b/packages/frontend-2/components/settings/Modal.vue
index a94342a797..50fa2b776f 100644
--- a/packages/frontend-2/components/settings/Modal.vue
+++ b/packages/frontend-2/components/settings/Modal.vue
@@ -1,5 +1,3 @@
-<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
-<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
 <template>
   <div
     class="fixed z-40 w-screen h-screen bg-slate-700/40 top-0 left-0 pt-4 md:p-4 md:p-8"
@@ -8,45 +6,38 @@
       <ClientOnly>
         <div
           v-if="!isMobile || !selectedItem"
-          class="w-full md:w-64 h-full bg-gray-100 border-r border-gray-200 flex flex-col"
+          class="w-full md:w-56 lg:w-72 p-4 pt-6 bg-gray-100 md:border-r md:border-gray-200"
         >
-          <div class="py-4 px-6 md:py-6 flex gap-y-4 flex-col">
-            <h1 class="h4 font-semibold py-4 md:hidden">Settings</h1>
-            <div>
-              <p class="text-sm font-semibold">User settings</p>
-            </div>
-            <a
-              class="text-sm block cursor-pointer"
-              :class="{ 'text-blue-600': selectedItem?.title === 'Profile' }"
-              @click="setSelectedItem(itemConfig.profile)"
-            >
-              <p>Account</p>
-            </a>
-            <a
-              class="text-sm block cursor-pointer"
-              :class="{ 'text-blue-600': selectedItem?.title === 'Notifications' }"
-              @click="setSelectedItem(itemConfig.notifications)"
-            >
-              <p>Notifications</p>
-            </a>
-            <div class="mt-4">
-              <p class="text-sm font-semibold">Server settings</p>
-            </div>
-            <a
-              class="text-sm block cursor-pointer"
-              :class="{ 'text-blue-600': selectedItem?.title === 'General' }"
-              @click="setSelectedItem(itemConfig.general)"
-            >
-              <p>General</p>
-            </a>
-            <a
-              class="text-sm block cursor-pointer"
-              :class="{ 'text-blue-600': selectedItem?.title === 'Projects' }"
-              @click="setSelectedItem(itemConfig.projects)"
-            >
-              <p>Projects</p>
-            </a>
-          </div>
+          <LayoutSidebar>
+            <LayoutSidebarMenu>
+              <LayoutSidebarMenuGroup title="Account Settings">
+                <template #title-icon>
+                  <UserIcon />
+                </template>
+                <LayoutSidebarMenuGroupItem
+                  label="User Profile"
+                  @click="setSelectedItem(itemConfig.profile)"
+                />
+                <LayoutSidebarMenuGroupItem
+                  label="Notifications"
+                  @click="setSelectedItem(itemConfig.notifications)"
+                />
+              </LayoutSidebarMenuGroup>
+              <LayoutSidebarMenuGroup title="Server Settings">
+                <template #title-icon>
+                  <ServerStackIcon />
+                </template>
+                <LayoutSidebarMenuGroupItem
+                  label="General"
+                  @click="setSelectedItem(itemConfig.general)"
+                />
+                <LayoutSidebarMenuGroupItem
+                  label="Projects"
+                  @click="setSelectedItem(itemConfig.projects)"
+                />
+              </LayoutSidebarMenuGroup>
+            </LayoutSidebarMenu>
+          </LayoutSidebar>
         </div>
       </ClientOnly>
       <section
@@ -62,7 +53,9 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
+import type { defineComponent } from 'vue'
 import { ChevronLeftIcon } from '@heroicons/vue/24/solid'
 import SettingsUserProfile from './user/Profile'
 import SettingsUserNotifications from './user/Notifications'
@@ -70,11 +63,22 @@ import SettingsServerGeneral from './server/General'
 import SettingsServerProjects from './server/Projects'
 import { useBreakpoints } from '@vueuse/core'
 import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
+import { UserIcon, ServerStackIcon } from '@heroicons/vue/24/outline'
+import {
+  LayoutSidebar,
+  LayoutSidebarMenu,
+  LayoutSidebarMenuGroup
+} from '@speckle/ui-components'
 
 const breakpoints = useBreakpoints(TailwindBreakpoints)
 const isMobile = breakpoints.smallerOrEqual('sm')
 
-const itemConfig = {
+type SelectableItem = {
+  title: string
+  component: ReturnType<typeof defineComponent>
+}
+
+const itemConfig: { [key: string]: SelectableItem } = {
   profile: {
     title: 'Profile',
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -99,7 +103,7 @@ const itemConfig = {
 
 const selectedItem = shallowRef()
 
-function setSelectedItem(item: string): void {
+function setSelectedItem(item: SelectableItem): void {
   selectedItem.value = item
 }
 

From 5b2ce3f9f14f2885f8c9b43a762f2ba6e035c14c Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Tue, 2 Jul 2024 11:36:14 +0200
Subject: [PATCH 12/77] Remove Dialog temporarily

---
 packages/frontend-2/app.vue                               | 1 -
 packages/frontend-2/components/header/NavUserMenu.vue     | 8 ++++----
 .../components/settings/{Modal.vue => Dialog.vue}         | 6 ++++--
 packages/ui-components/src/components/layout/Dialog.vue   | 7 ++++++-
 4 files changed, 14 insertions(+), 8 deletions(-)
 rename packages/frontend-2/components/settings/{Modal.vue => Dialog.vue} (94%)

diff --git a/packages/frontend-2/app.vue b/packages/frontend-2/app.vue
index d066b78d12..f1a988d50c 100644
--- a/packages/frontend-2/app.vue
+++ b/packages/frontend-2/app.vue
@@ -8,7 +8,6 @@
     </NuxtLayout>
     <SingletonManagers />
   </div>
-  <SettingsModal />
 </template>
 <script setup lang="ts">
 import { useTheme } from '~~/lib/core/composables/theme'
diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index cfe4670d6c..4dd98d9697 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -39,7 +39,7 @@
                 active ? 'bg-foundation-focus' : '',
                 'flex gap-2.5 items-center px-3 py-2.5 text-sm text-foreground cursor-pointer transition mx-1 rounded'
               ]"
-              @click="() => (showProfileEditDialog = true)"
+              @click="() => (showSettingsDialog = true)"
             >
               <UserAvatar :user="activeUser" size="sm" class="-ml-0.5 mr-px" />
               Edit Profile
@@ -128,7 +128,7 @@
       </Transition>
     </Menu>
     <ServerManagementInviteDialog v-model:open="showInviteDialog" />
-    <!-- <UserProfileEditDialog v-model:open="showProfileEditDialog" /> -->
+    <SettingsDialog v-model:open="showSettingsDialog" />
   </div>
 </template>
 <script setup lang="ts">
@@ -164,7 +164,7 @@ const router = useRouter()
 const route = useRoute()
 
 const showInviteDialog = ref(false)
-const showProfileEditDialog = ref(false)
+const showSettingsDialog = ref(false)
 const menuButtonId = useId()
 
 const Icon = computed(() => (isDarkTheme.value ? SunIcon : MoonIcon))
@@ -184,7 +184,7 @@ watch(
   isProfileRoute,
   (newVal, oldVal) => {
     if (newVal && !oldVal) {
-      showProfileEditDialog.value = true
+      showSettingsDialog.value = true
       void router.replace({ path: homeRoute, force: true }) // in-place replace
     }
   },
diff --git a/packages/frontend-2/components/settings/Modal.vue b/packages/frontend-2/components/settings/Dialog.vue
similarity index 94%
rename from packages/frontend-2/components/settings/Modal.vue
rename to packages/frontend-2/components/settings/Dialog.vue
index 50fa2b776f..152fe49c7d 100644
--- a/packages/frontend-2/components/settings/Modal.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -1,12 +1,13 @@
 <template>
+  <!-- <LayoutDialog v-model:open="isOpen"> -->
   <div
     class="fixed z-40 w-screen h-screen bg-slate-700/40 top-0 left-0 pt-4 md:p-4 md:p-8"
   >
-    <div class="bg-white w-full h-full rounded-md shadow-lg flex overflow-hidden">
+    <div class="bg-white w-full h-full flex bg-slate-700/40 rounded overflow-hidden">
       <ClientOnly>
         <div
           v-if="!isMobile || !selectedItem"
-          class="w-full md:w-56 lg:w-72 p-4 pt-6 bg-gray-100 md:border-r md:border-gray-200"
+          class="w-full md:w-56 lg:w-60 p-4 pt-6 bg-gray-100 md:border-r md:border-gray-200"
         >
           <LayoutSidebar>
             <LayoutSidebarMenu>
@@ -52,6 +53,7 @@
       </section>
     </div>
   </div>
+  <!-- </LayoutDialog> -->
 </template>
 
 <script setup lang="ts">
diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue
index 224fd3467c..922f4023a0 100644
--- a/packages/ui-components/src/components/layout/Dialog.vue
+++ b/packages/ui-components/src/components/layout/Dialog.vue
@@ -120,6 +120,7 @@ const emit = defineEmits<{
 const props = defineProps<{
   open: boolean
   maxWidth?: MaxWidthValue
+  fullscreen?: boolean
   hideCloser?: boolean
   /**
    * Prevent modal from closing when the user clicks outside of the modal or presses Esc
@@ -177,7 +178,11 @@ const maxWidthWeight = computed(() => {
 })
 
 const widthClasses = computed(() => {
-  const classParts: string[] = ['w-full', 'sm:w-full sm:max-w-2xl']
+  const classParts: string[] = ['w-full', 'sm:w-full']
+
+  if (!props.fullscreen) {
+    classParts.push('sm:max-w-2xl')
+  }
 
   if (maxWidthWeight.value >= 1) {
     classParts.push('md:max-w-2xl')

From 01930f716d2c00031bd96e5a78e708bbf36b9f7b Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Tue, 2 Jul 2024 11:45:19 +0200
Subject: [PATCH 13/77] Added missing pages

---
 .../frontend-2/components/settings/Dialog.vue |  30 ++
 .../settings/server/ActiveUsers.vue           | 226 +++++++++++
 .../components/settings/server/Invites.vue    | 211 ++++++++++
 .../components/settings/server/Projects.vue   |   2 +-
 .../components/settings/user/Developer.vue    | 381 ++++++++++++++++++
 5 files changed, 849 insertions(+), 1 deletion(-)
 create mode 100644 packages/frontend-2/components/settings/server/ActiveUsers.vue
 create mode 100644 packages/frontend-2/components/settings/server/Invites.vue
 create mode 100644 packages/frontend-2/components/settings/user/Developer.vue

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 152fe49c7d..0f083add0e 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -23,6 +23,10 @@
                   label="Notifications"
                   @click="setSelectedItem(itemConfig.notifications)"
                 />
+                <LayoutSidebarMenuGroupItem
+                  label="Developer Settings"
+                  @click="setSelectedItem(itemConfig.developer)"
+                />
               </LayoutSidebarMenuGroup>
               <LayoutSidebarMenuGroup title="Server Settings">
                 <template #title-icon>
@@ -36,6 +40,14 @@
                   label="Projects"
                   @click="setSelectedItem(itemConfig.projects)"
                 />
+                <LayoutSidebarMenuGroupItem
+                  label="Active Users"
+                  @click="setSelectedItem(itemConfig.users)"
+                />
+                <LayoutSidebarMenuGroupItem
+                  label="Pending invitation"
+                  @click="setSelectedItem(itemConfig.invites)"
+                />
               </LayoutSidebarMenuGroup>
             </LayoutSidebarMenu>
           </LayoutSidebar>
@@ -61,8 +73,11 @@ import type { defineComponent } from 'vue'
 import { ChevronLeftIcon } from '@heroicons/vue/24/solid'
 import SettingsUserProfile from './user/Profile'
 import SettingsUserNotifications from './user/Notifications'
+import SettingsUserDeveloper from './user/Developer'
 import SettingsServerGeneral from './server/General'
 import SettingsServerProjects from './server/Projects'
+import SettingsServerActiveUsers from './server/ActiveUsers'
+import SettingsServerInvites from './server/Invites'
 import { useBreakpoints } from '@vueuse/core'
 import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
 import { UserIcon, ServerStackIcon } from '@heroicons/vue/24/outline'
@@ -91,6 +106,11 @@ const itemConfig: { [key: string]: SelectableItem } = {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     component: SettingsUserNotifications
   },
+  developer: {
+    title: 'Developer Settings',
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    component: SettingsUserDeveloper
+  },
   general: {
     title: 'General',
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -100,6 +120,16 @@ const itemConfig: { [key: string]: SelectableItem } = {
     title: 'Projects',
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     component: SettingsServerProjects
+  },
+  users: {
+    title: 'Active users',
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    component: SettingsServerActiveUsers
+  },
+  invites: {
+    title: 'Pending Invitations',
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    component: SettingsServerInvites
   }
 }
 
diff --git a/packages/frontend-2/components/settings/server/ActiveUsers.vue b/packages/frontend-2/components/settings/server/ActiveUsers.vue
new file mode 100644
index 0000000000..bb8cab1859
--- /dev/null
+++ b/packages/frontend-2/components/settings/server/ActiveUsers.vue
@@ -0,0 +1,226 @@
+<template>
+  <div class="md:max-w-5xl md:mx-auto">
+    <h2 class="h3 font-semibold pb-8 hidden md:block">Active Users</h2>
+    <div class="flex justify-end items-end mb-8">
+      <FormButton :icon-left="UserPlusIcon" @click="toggleInviteDialog">
+        Invite
+      </FormButton>
+    </div>
+
+    <FormTextInput
+      size="lg"
+      name="search"
+      :custom-icon="MagnifyingGlassIcon"
+      color="foundation"
+      full-width
+      search
+      :show-clear="!!searchString"
+      placeholder="Search Users"
+      class="rounded-md border border-outline-3"
+      @update:model-value="debounceSearchUpdate"
+      @change="($event) => searchUpdateHandler($event.value)"
+    />
+
+    <LayoutTable
+      class="mt-8"
+      :columns="[
+        { id: 'name', header: 'Name', classes: 'col-span-3 truncate' },
+        { id: 'email', header: 'Email', classes: 'col-span-3 truncate' },
+        { id: 'emailState', header: 'Email State', classes: 'col-span-2' },
+        { id: 'company', header: 'Company', classes: 'col-span-2 truncate' },
+        { id: 'role', header: 'Role', classes: 'col-span-2' }
+      ]"
+      :items="users"
+      :buttons="[{ icon: TrashIcon, label: 'Delete', action: openUserDeleteDialog }]"
+    >
+      <template #name="{ item }">
+        <div class="flex items-center gap-2">
+          <UserAvatar v-if="isUser(item)" :user="item" />
+          <span class="truncate">
+            {{ isUser(item) ? item.name : '' }}
+          </span>
+        </div>
+      </template>
+
+      <template #email="{ item }">
+        {{ isUser(item) ? item.email : '' }}
+      </template>
+
+      <template #emailState="{ item }">
+        <div class="flex items-center gap-2 select-none">
+          <template v-if="isUser(item) && item.verified">
+            <CheckCircleIcon class="h-4 w-4 text-primary" />
+            <span>Verified</span>
+          </template>
+          <template v-else>
+            <ExclamationCircleIcon class="h-4 w-4 text-danger" />
+            <span>Not verified</span>
+          </template>
+        </div>
+      </template>
+
+      <template #company="{ item }">
+        {{ isUser(item) ? item.company : '' }}
+      </template>
+
+      <template #role="{ item }">
+        <FormSelectServerRoles
+          :allow-guest="isGuestMode"
+          allow-admin
+          allow-archived
+          :model-value="isUser(item) ? item.role : undefined"
+          :disabled="isUser(item) && isCurrentUser(item)"
+          fully-control-value
+          @update:model-value="(newRoleValue) => isUser(item) && !isArray(newRoleValue) && newRoleValue && openChangeUserRoleDialog(item, newRoleValue as ServerRoles)"
+        />
+      </template>
+    </LayoutTable>
+
+    <CommonLoadingBar v-if="loading && !users?.length" loading />
+
+    <InfiniteLoading
+      v-if="users?.length"
+      :settings="{ identifier: infiniteLoaderId }"
+      class="-mt-24 -mb-24"
+      @infinite="infiniteLoad"
+    />
+
+    <ServerManagementDeleteUserDialog
+      v-model:open="showUserDeleteDialog"
+      :user="userToModify"
+      :result-variables="resultVariables"
+    />
+
+    <ServerManagementChangeUserRoleDialog
+      v-model:open="showChangeUserRoleDialog"
+      :user="userToModify"
+      :old-role="oldRole"
+      :new-role="newRole"
+      hide-closer
+    />
+    <ServerManagementInviteDialog v-model:open="showInviteDialog" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useQuery } from '@vue/apollo-composable'
+import { debounce, isArray } from 'lodash-es'
+import { useLogger } from '~~/composables/logging'
+import type { InfiniteLoaderState } from '~~/lib/global/helpers/components'
+import type { Nullable, ServerRoles, Optional } from '@speckle/shared'
+import { getUsersQuery } from '~~/lib/server-management/graphql/queries'
+import type { ItemType, UserItem } from '~~/lib/server-management/helpers/types'
+import { isUser } from '~~/lib/server-management/helpers/utils'
+import { useActiveUser } from '~~/lib/auth/composables/activeUser'
+import {
+  MagnifyingGlassIcon,
+  ExclamationCircleIcon,
+  CheckCircleIcon,
+  TrashIcon,
+  UserPlusIcon
+} from '@heroicons/vue/24/outline'
+import { useServerInfo } from '~~/lib/core/composables/server'
+
+useHead({
+  title: 'Active Users'
+})
+
+definePageMeta({
+  middleware: ['admin']
+})
+
+const logger = useLogger()
+const { activeUser } = useActiveUser()
+const { isGuestMode } = useServerInfo()
+
+const userToModify: Ref<Nullable<UserItem>> = ref(null)
+const searchString = ref('')
+const showUserDeleteDialog = ref(false)
+const showChangeUserRoleDialog = ref(false)
+const newRole = ref<ServerRoles>()
+const infiniteLoaderId = ref('')
+const showInviteDialog = ref(false)
+
+const queryVariables = computed(() => ({
+  limit: 50,
+  query: searchString.value
+}))
+
+const {
+  result: extraPagesResult,
+  fetchMore: fetchMorePages,
+  variables: resultVariables,
+  onResult,
+  loading
+} = useQuery(getUsersQuery, queryVariables)
+
+const oldRole = computed(() => userToModify.value?.role as Optional<ServerRoles>)
+
+const moreToLoad = computed(
+  () =>
+    !extraPagesResult.value?.admin?.userList ||
+    extraPagesResult.value.admin.userList.items.length <
+      extraPagesResult.value.admin.userList.totalCount
+)
+
+const users = computed(() => extraPagesResult.value?.admin.userList.items || [])
+
+const isCurrentUser = (userItem: UserItem) => {
+  return userItem.id === activeUser.value?.id
+}
+
+const openUserDeleteDialog = (item: ItemType) => {
+  if (isUser(item)) {
+    userToModify.value = item
+    showUserDeleteDialog.value = true
+  }
+}
+
+const openChangeUserRoleDialog = (user: UserItem, newRoleValue: ServerRoles) => {
+  if (user.role === newRoleValue) {
+    return
+  }
+  userToModify.value = user
+  newRole.value = newRoleValue
+  showChangeUserRoleDialog.value = true
+}
+
+const infiniteLoad = async (state: InfiniteLoaderState) => {
+  const cursor = extraPagesResult.value?.admin?.userList.cursor || null
+  if (!moreToLoad.value || !cursor) return state.complete()
+
+  try {
+    await fetchMorePages({
+      variables: {
+        cursor
+      }
+    })
+  } catch (e) {
+    logger.error(e)
+    state.error()
+    return
+  }
+
+  state.loaded()
+  if (!moreToLoad.value) {
+    state.complete()
+  }
+}
+
+const searchUpdateHandler = (value: string) => {
+  searchString.value = value
+}
+
+const debounceSearchUpdate = debounce(searchUpdateHandler, 500)
+
+const calculateLoaderId = () => {
+  infiniteLoaderId.value = resultVariables.value?.query || ''
+}
+
+const toggleInviteDialog = () => {
+  showInviteDialog.value = true
+}
+
+onResult(calculateLoaderId)
+</script>
diff --git a/packages/frontend-2/components/settings/server/Invites.vue b/packages/frontend-2/components/settings/server/Invites.vue
new file mode 100644
index 0000000000..5ab5995b4a
--- /dev/null
+++ b/packages/frontend-2/components/settings/server/Invites.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="md:max-w-5xl md:mx-auto">
+    <h2 class="h3 font-semibold pb-8 hidden md:block">Active Users</h2>
+    <div class="flex justify-end items-end mb-8">
+      <FormButton :icon-left="UserPlusIcon" @click="toggleInviteDialog">
+        Invite
+      </FormButton>
+    </div>
+
+    <FormTextInput
+      size="lg"
+      name="search"
+      :custom-icon="MagnifyingGlassIcon"
+      color="foundation"
+      full-width
+      search
+      :show-clear="!!searchString"
+      placeholder="Search Invitations"
+      class="rounded-md border border-outline-3"
+      @update:model-value="debounceSearchUpdate"
+      @change="($event) => searchUpdateHandler($event.value)"
+    />
+
+    <LayoutTable
+      class="mt-8"
+      :columns="[
+        { id: 'email', header: 'Email', classes: 'col-span-5 truncate' },
+        { id: 'invitedBy', header: 'Invited By', classes: 'col-span-4' },
+        { id: 'resend', header: '', classes: 'col-span-3' }
+      ]"
+      :items="invites"
+      :buttons="[
+        { icon: TrashIcon, label: 'Delete', action: openDeleteInvitationDialog }
+      ]"
+    >
+      <template #email="{ item }">
+        {{ isInvite(item) ? item.email : '' }}
+      </template>
+
+      <template #invitedBy="{ item }">
+        <div class="flex items-center gap-2 py-1">
+          <UserAvatar v-if="isInvite(item)" :user="item.invitedBy" />
+          <span class="truncate">
+            {{ isInvite(item) ? item.invitedBy.name : '' }}
+          </span>
+        </div>
+      </template>
+
+      <template #resend="{ item }">
+        <FormButton
+          :link="true"
+          :class="{
+            'font-semibold': true,
+            'text-primary': !successfullyResentInvites.includes(item.id),
+            'text-foreground': successfullyResentInvites.includes(item.id)
+          }"
+          :disabled="successfullyResentInvites.includes(item.id)"
+          @click="resendInvitation(item as InviteItem)"
+        >
+          {{
+            successfullyResentInvites.includes(item.id)
+              ? 'Invitation Resent'
+              : 'Resend Invitation'
+          }}
+        </FormButton>
+      </template>
+    </LayoutTable>
+
+    <ServerManagementDeleteInvitationDialog
+      v-model:open="showDeleteInvitationDialog"
+      :invite="inviteToModify"
+      :result-variables="resultVariables"
+    />
+
+    <CommonLoadingBar v-if="loading && !invites?.length" loading />
+
+    <InfiniteLoading
+      v-if="invites?.length"
+      :settings="{ identifier: infiniteLoaderId }"
+      class="py-4"
+      @infinite="infiniteLoad"
+    />
+    <ServerManagementInviteDialog v-model:open="showInviteDialog" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { debounce } from 'lodash-es'
+import { useQuery, useMutation } from '@vue/apollo-composable'
+import { MagnifyingGlassIcon, TrashIcon, UserPlusIcon } from '@heroicons/vue/24/outline'
+import type { ItemType, InviteItem } from '~~/lib/server-management/helpers/types'
+import type { InfiniteLoaderState } from '~~/lib/global/helpers/components'
+import { getInvitesQuery } from '~~/lib/server-management/graphql/queries'
+import { adminResendInviteMutation } from '~~/lib/server-management/graphql/mutations'
+import { isInvite } from '~~/lib/server-management/helpers/utils'
+import { useGlobalToast, ToastNotificationType } from '~~/lib/common/composables/toast'
+import {
+  convertThrowIntoFetchResult,
+  getFirstErrorMessage
+} from '~~/lib/common/helpers/graphql'
+
+useHead({
+  title: 'Pending Invitations'
+})
+
+definePageMeta({
+  middleware: ['admin']
+})
+
+const logger = useLogger()
+const { triggerNotification } = useGlobalToast()
+const { mutate: resendInvitationMutation } = useMutation(adminResendInviteMutation)
+
+const inviteToModify = ref<InviteItem | null>(null)
+const searchString = ref('')
+const showDeleteInvitationDialog = ref(false)
+const infiniteLoaderId = ref('')
+const successfullyResentInvites = ref<string[]>([])
+const showInviteDialog = ref(false)
+
+const {
+  result: extraPagesResult,
+  fetchMore: fetchMorePages,
+  variables: resultVariables,
+  onResult,
+  loading
+} = useQuery(getInvitesQuery, () => ({
+  limit: 50,
+  query: searchString.value
+}))
+
+const moreToLoad = computed(
+  () =>
+    !extraPagesResult.value?.admin?.inviteList ||
+    extraPagesResult.value.admin.inviteList.items.length <
+      extraPagesResult.value.admin.inviteList.totalCount
+)
+
+const invites = computed(() => extraPagesResult.value?.admin.inviteList.items || [])
+
+const openDeleteInvitationDialog = (item: ItemType) => {
+  if (isInvite(item)) {
+    inviteToModify.value = item
+    showDeleteInvitationDialog.value = true
+  }
+}
+
+const resendInvitation = async (item: InviteItem) => {
+  const inviteId = item.id
+  if (!inviteId) return
+
+  const result = await resendInvitationMutation({ inviteId }).catch(
+    convertThrowIntoFetchResult
+  )
+
+  if (result?.data?.inviteResend) {
+    successfullyResentInvites.value.push(inviteId)
+    triggerNotification({
+      type: ToastNotificationType.Success,
+      title: 'Invitation Resent',
+      description: 'The invitation has been successfully resent'
+    })
+  } else {
+    const errorMessage = getFirstErrorMessage(result?.errors)
+    triggerNotification({
+      type: ToastNotificationType.Danger,
+      title: 'Failed to resend invitation',
+      description: errorMessage
+    })
+  }
+}
+
+const infiniteLoad = async (state: InfiniteLoaderState) => {
+  const cursor = extraPagesResult.value?.admin?.inviteList.cursor || null
+  if (!moreToLoad.value || !cursor) return state.complete()
+
+  try {
+    await fetchMorePages({
+      variables: {
+        cursor
+      }
+    })
+  } catch (e) {
+    logger.error(e)
+    state.error()
+    return
+  }
+
+  state.loaded()
+  if (!moreToLoad.value) {
+    state.complete()
+  }
+}
+
+const searchUpdateHandler = (value: string) => {
+  searchString.value = value
+}
+
+const debounceSearchUpdate = debounce(searchUpdateHandler, 500)
+
+const calculateLoaderId = () => {
+  infiniteLoaderId.value = resultVariables.value?.query || ''
+}
+
+const toggleInviteDialog = () => {
+  showInviteDialog.value = true
+}
+
+onResult(calculateLoaderId)
+</script>
diff --git a/packages/frontend-2/components/settings/server/Projects.vue b/packages/frontend-2/components/settings/server/Projects.vue
index b3a2e9456d..3878f3c0f4 100644
--- a/packages/frontend-2/components/settings/server/Projects.vue
+++ b/packages/frontend-2/components/settings/server/Projects.vue
@@ -103,7 +103,7 @@
 import { ref } from 'vue'
 import { debounce } from 'lodash-es'
 import { useQuery } from '@vue/apollo-composable'
-import { MagnifyingGlassIcon, TrashIcon } from '@heroicons/vue/20/solid'
+import { MagnifyingGlassIcon, TrashIcon } from '@heroicons/vue/24/outline'
 import { getProjectsQuery } from '~~/lib/server-management/graphql/queries'
 import type { ItemType, ProjectItem } from '~~/lib/server-management/helpers/types'
 import type { InfiniteLoaderState } from '~~/lib/global/helpers/components'
diff --git a/packages/frontend-2/components/settings/user/Developer.vue b/packages/frontend-2/components/settings/user/Developer.vue
new file mode 100644
index 0000000000..8d3437fd4b
--- /dev/null
+++ b/packages/frontend-2/components/settings/user/Developer.vue
@@ -0,0 +1,381 @@
+<template>
+  <div class="md:max-w-5xl md:mx-auto">
+    <div class="flex flex-col gap-y-6">
+      <div class="flex flex-col gap-16">
+        <DeveloperSettingsSectionHeader
+          title="Developer Settings"
+          :buttons="[
+            {
+              props: {
+                target: '_blank',
+                external: true
+              },
+              onClick: goToExplorer,
+              label: 'Explore GraphQL'
+            }
+          ]"
+        >
+          Heads up! The sections below are intended for developers.
+        </DeveloperSettingsSectionHeader>
+        <div class="flex flex-col gap-4">
+          <DeveloperSettingsSectionHeader
+            title="Access Tokens"
+            subheading
+            :buttons="[
+              {
+                props: {
+                  color: 'invert',
+                  to: 'https://speckle.guide/dev/tokens.html',
+                  iconLeft: BookOpenIcon,
+                  target: '_blank',
+                  external: true
+                },
+                label: 'Open Docs'
+              },
+              {
+                props: {
+                  iconLeft: PlusIcon,
+                  onClick: openCreateTokenDialog
+                },
+                label: 'New Token'
+              }
+            ]"
+          >
+            Personal Access Tokens can be used to access the Speckle API on this server;
+            they function like ordinary OAuth access tokens. Use them in your scripts or
+            apps!
+            <strong>
+              Treat them like a password: do not post them anywhere where they could be
+              accessed by others (e.g., public repos).
+            </strong>
+          </DeveloperSettingsSectionHeader>
+
+          <LayoutTable
+            :columns="[
+              { id: 'name', header: 'Name', classes: 'col-span-3 truncate' },
+              { id: 'id', header: 'ID', classes: 'col-span-2' },
+              {
+                id: 'scope',
+                header: 'Scope',
+                classes: 'col-span-7 whitespace-break-spaces text-xs'
+              }
+            ]"
+            :items="tokens"
+            :buttons="[
+              {
+                icon: TrashIcon,
+                label: 'Delete',
+                action: openDeleteDialog,
+                textColor: 'danger'
+              }
+            ]"
+          >
+            <template #name="{ item }">
+              {{ item.name }}
+            </template>
+            <template #id="{ item }">
+              <span class="rounded text-xs font-mono bg-foundation-page p-2">
+                {{ item.id }}
+              </span>
+            </template>
+
+            <template #scope="{ item }">
+              <div>
+                {{
+                  item.scopes
+                    ? item.scopes
+                        .map(
+                          (event, index, array) =>
+                            `"${event}"${index < array.length - 1 ? ',' : ''}`
+                        )
+                        .join(' ')
+                    : 'No scopes available'
+                }}
+              </div>
+            </template>
+          </LayoutTable>
+        </div>
+
+        <div class="flex flex-col gap-4">
+          <DeveloperSettingsSectionHeader
+            subheading
+            title="Applications"
+            :buttons="[
+              {
+                props: {
+                  color: 'invert',
+                  to: 'https://speckle.guide/dev/apps.html',
+                  target: '_blank',
+                  external: true,
+                  iconLeft: BookOpenIcon
+                },
+                label: 'Open Docs'
+              },
+              {
+                props: {
+                  onClick: openCreateApplicationDialog,
+                  iconLeft: PlusIcon
+                },
+                label: 'New Application'
+              }
+            ]"
+          >
+            Register and manage third-party Speckle Apps that, once authorised by a user
+            on this server, can act on their behalf.
+          </DeveloperSettingsSectionHeader>
+          <LayoutTable
+            :columns="[
+              { id: 'name', header: 'Name', classes: 'col-span-3' },
+              { id: 'id', header: 'ID', classes: 'col-span-2' },
+              {
+                id: 'scope',
+                header: 'Scope',
+                classes: 'col-span-7 whitespace-break-spaces text-xs'
+              }
+            ]"
+            :items="applications"
+            :buttons="[
+              {
+                icon: LockOpenIcon,
+                label: 'Reveal Secret',
+                action: openRevealSecretDialog,
+                textColor: 'primary'
+              },
+              {
+                icon: PencilIcon,
+                label: 'Edit',
+                action: openEditApplicationDialog,
+                textColor: 'primary'
+              },
+              {
+                icon: TrashIcon,
+                label: 'Delete',
+                action: openDeleteDialog,
+                textColor: 'danger'
+              }
+            ]"
+          >
+            <template #name="{ item }">
+              {{ item.name }}
+            </template>
+            <template #id="{ item }">
+              <span class="rounded text-xs font-mono bg-foundation-page p-2">
+                {{ item.id }}
+              </span>
+            </template>
+
+            <template #scope="{ item }">
+              <div>
+                {{
+                  item.scopes
+                    .map(
+                      (event, index, array) =>
+                        `"${event.name}"${index < array.length - 1 ? ',' : ''}`
+                    )
+                    .join(' ')
+                }}
+              </div>
+            </template>
+          </LayoutTable>
+        </div>
+
+        <div class="flex flex-col gap-4">
+          <DeveloperSettingsSectionHeader
+            subheading
+            title="Authorized Apps"
+            :buttons="[
+              {
+                props: {
+                  color: 'invert',
+                  to: 'https://speckle.guide/dev/apps.html',
+                  target: '_blank',
+                  external: true,
+                  iconLeft: BookOpenIcon
+                },
+                label: 'Open Docs'
+              }
+            ]"
+          >
+            Here you can review the apps that you have granted access to. If something
+            looks suspicious, revoke the access.
+          </DeveloperSettingsSectionHeader>
+          <LayoutTable
+            :columns="[
+              { id: 'name', header: 'Name', classes: 'col-span-3 ' },
+              { id: 'author', header: 'Author', classes: 'col-span-3 ' },
+              {
+                id: 'description',
+                header: 'Description',
+                classes: 'col-span-6 !pt-1.5'
+              }
+            ]"
+            :items="authorizedApps"
+            :buttons="[
+              {
+                icon: XMarkIcon,
+                label: 'Revoke Access',
+                action: openDeleteDialog,
+                textColor: 'danger'
+              }
+            ]"
+            row-items-align="stretch"
+          >
+            <template #name="{ item }">
+              {{ item.name }}
+            </template>
+            <template #author="{ item }">
+              <div class="flex space-x-2 items-center">
+                <template v-if="item.author">
+                  <UserAvatar :user="item.author" />
+                  <span>{{ item.author.name }}</span>
+                </template>
+                <template v-else>
+                  <HeaderLogoBlock minimal no-link />
+                  <span>Speckle</span>
+                </template>
+              </div>
+            </template>
+            <template #description="{ item }">
+              {{ item.description }}
+            </template>
+          </LayoutTable>
+        </div>
+      </div>
+
+      <DeveloperSettingsCreateTokenDialog
+        v-model:open="showCreateTokenDialog"
+        @token-created="(token) => handleTokenCreated(token)"
+      />
+      <DeveloperSettingsDeleteDialog
+        v-model:open="showDeleteDialog"
+        :item="itemToModify"
+      />
+      <DeveloperSettingsCreateEditApplicationDialog
+        v-model:open="showCreateEditApplicationDialog"
+        :application="(itemToModify as ApplicationItem)"
+        @application-created="handleApplicationCreated"
+      />
+      <DeveloperSettingsRevealSecretDialog
+        v-model:open="showRevealSecretDialog"
+        :application="itemToModify && 'secret' in itemToModify ? itemToModify : null"
+      />
+      <DeveloperSettingsCreateTokenSuccessDialog
+        v-model:open="showCreateTokenSuccessDialog"
+        :token="tokenSuccess"
+      />
+      <DeveloperSettingsCreateApplicationSuccessDialog
+        v-model:open="showCreateApplicationSuccessDialog"
+        :application="(itemToModify as ApplicationItem)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  PlusIcon,
+  BookOpenIcon,
+  TrashIcon,
+  PencilIcon,
+  LockOpenIcon,
+  XMarkIcon
+} from '@heroicons/vue/24/outline'
+import type {
+  TokenItem,
+  ApplicationItem,
+  AuthorizedAppItem
+} from '~~/lib/developer-settings/helpers/types'
+import {
+  developerSettingsAccessTokensQuery,
+  developerSettingsApplicationsQuery,
+  developerSettingsAuthorizedAppsQuery
+} from '~~/lib/developer-settings/graphql/queries'
+import { useQuery } from '@vue/apollo-composable'
+
+useHead({
+  title: 'Developer Settings'
+})
+
+const apiOrigin = useApiOrigin()
+
+const { result: tokensResult, refetch: refetchTokens } = useQuery(
+  developerSettingsAccessTokensQuery
+)
+const { result: applicationsResult, refetch: refetchApplications } = useQuery(
+  developerSettingsApplicationsQuery
+)
+const { result: authorizedAppsResult } = useQuery(developerSettingsAuthorizedAppsQuery)
+
+const itemToModify = ref<TokenItem | ApplicationItem | AuthorizedAppItem | null>(null)
+const tokenSuccess = ref('')
+const showCreateTokenDialog = ref(false)
+const showCreateTokenSuccessDialog = ref(false)
+const showCreateApplicationSuccessDialog = ref(false)
+const showDeleteDialog = ref(false)
+const showCreateEditApplicationDialog = ref(false)
+const showRevealSecretDialog = ref(false)
+
+const tokens = computed<TokenItem[]>(() => {
+  return (
+    tokensResult.value?.activeUser?.apiTokens?.filter(
+      (token): token is TokenItem => token !== null
+    ) || []
+  )
+})
+
+const applications = computed<ApplicationItem[]>(() => {
+  return applicationsResult.value?.activeUser?.createdApps || []
+})
+
+const authorizedApps = computed(() =>
+  (authorizedAppsResult.value?.activeUser?.authorizedApps || []).filter(
+    (app) => app.id !== 'spklwebapp'
+  )
+)
+
+const openDeleteDialog = (item: TokenItem | ApplicationItem | AuthorizedAppItem) => {
+  itemToModify.value = item
+  showDeleteDialog.value = true
+}
+
+const openCreateApplicationDialog = () => {
+  itemToModify.value = null
+  showCreateEditApplicationDialog.value = true
+}
+
+const openCreateTokenDialog = () => {
+  showCreateTokenDialog.value = true
+}
+
+const openEditApplicationDialog = (item: ApplicationItem) => {
+  itemToModify.value = item
+  showCreateEditApplicationDialog.value = true
+}
+
+const openRevealSecretDialog = (item: ApplicationItem) => {
+  itemToModify.value = item
+  showRevealSecretDialog.value = true
+}
+
+const handleTokenCreated = (token: string) => {
+  refetchTokens()
+  tokenSuccess.value = token
+  showCreateTokenSuccessDialog.value = true
+}
+
+const handleApplicationCreated = (applicationId: string) => {
+  refetchApplications()?.then(() => {
+    const newApplication = applications.value.find((app) => app.id === applicationId)
+
+    if (newApplication) {
+      itemToModify.value = newApplication
+      showCreateApplicationSuccessDialog.value = true
+    }
+  })
+}
+
+const goToExplorer = () => {
+  if (!import.meta.client) return
+  window.location.href = new URL('/explorer', apiOrigin).toString()
+}
+</script>

From 534190a41222e3b8fb7c21d65faff12f1e1b83c4 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Tue, 2 Jul 2024 11:48:59 +0200
Subject: [PATCH 14/77] Change modal backdrop color

---
 packages/frontend-2/components/settings/Dialog.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 0f083add0e..60633873fa 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -1,9 +1,7 @@
 <template>
   <!-- <LayoutDialog v-model:open="isOpen"> -->
-  <div
-    class="fixed z-40 w-screen h-screen bg-slate-700/40 top-0 left-0 pt-4 md:p-4 md:p-8"
-  >
-    <div class="bg-white w-full h-full flex bg-slate-700/40 rounded overflow-hidden">
+  <div class="fixed z-40 w-screen h-screen bg-black/70 top-0 left-0 pt-4 md:p-4 md:p-8">
+    <div class="w-full h-full flex rounded overflow-hidden">
       <ClientOnly>
         <div
           v-if="!isMobile || !selectedItem"

From a6aacb22824c670177445ab734f7c9c341bd0e8b Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Wed, 3 Jul 2024 09:54:51 +0100
Subject: [PATCH 15/77] fix: add cursor-pointer to buttons

---
 .../src/components/layout/sidebar/menu/group/Item.vue         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue b/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
index feb1e3f11e..3410dbd116 100644
--- a/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
+++ b/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
@@ -3,7 +3,7 @@
     <NuxtLink
       v-if="!hasChildren"
       :to="to"
-      class="group flex items-center justify-between gap-2 shrink-0 text-sm select-none rounded-md w-full hover:bg-primary-muted p-1.5"
+      class="group flex items-center justify-between gap-2 shrink-0 text-sm select-none rounded-md w-full hover:bg-primary-muted p-1.5 cursor-pointer"
       active-class="bg-foundation-focus hover:!bg-foundation-focus"
       :external="external"
       :target="external ? '_blank' : undefined"
@@ -25,7 +25,7 @@
     </NuxtLink>
     <div v-else class="flex flex-col">
       <button
-        class="group flex gap-1.5 items-center w-full hover:bg-foundation-3 rounded-md p-0.5"
+        class="group flex gap-1.5 items-center w-full hover:bg-foundation-3 rounded-md p-0.5 cursor-pointer"
         @click="isOpen = !isOpen"
       >
         <ChevronDownIcon :class="isOpen ? '' : 'rotate-180'" class="size-2.5" />

From ea7fbe9ae2d53384df2a7f25f4e1e77b2641a202 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Wed, 3 Jul 2024 12:12:18 +0200
Subject: [PATCH 16/77] Changed modal to use LayoutDialog, added fullscreen
 variant to LayoutDialog

---
 .../components/header/NavUserMenu.vue         | 21 +++++-----
 .../frontend-2/components/settings/Dialog.vue | 25 ++++++++----
 .../src/components/layout/Dialog.vue          | 39 +++++++++++--------
 3 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index 4dd98d9697..a6d1a692d4 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -37,12 +37,12 @@
             <NuxtLink
               :class="[
                 active ? 'bg-foundation-focus' : '',
-                'flex gap-2.5 items-center px-3 py-2.5 text-sm text-foreground cursor-pointer transition mx-1 rounded'
+                'flex gap-3.5 items-center px-3 py-2.5 text-sm text-foreground cursor-pointer transition mx-1 rounded'
               ]"
               @click="() => (showSettingsDialog = true)"
             >
-              <UserAvatar :user="activeUser" size="sm" class="-ml-0.5 mr-px" />
-              Edit Profile
+              <UserCircleIcon class="w-5 h-5" />
+              Settings
             </NuxtLink>
           </MenuItem>
           <MenuItem v-if="isAdmin" v-slot="{ active }">
@@ -51,10 +51,10 @@
                 active ? 'bg-foundation-focus' : '',
                 'flex gap-3.5 items-center px-3 py-2.5 text-sm text-foreground cursor-pointer transition mx-1 rounded'
               ]"
-              @click="goToServerManagement()"
+              @click="() => (showSettingsDialog = true)"
             >
-              <Cog6ToothIcon class="w-5 h-5" />
-              Server Management
+              <ServerStackIcon class="w-5 h-5" />
+              Server Settings
             </NuxtLink>
           </MenuItem>
           <MenuItem v-slot="{ active }">
@@ -140,9 +140,10 @@ import {
   SunIcon,
   MoonIcon,
   EnvelopeIcon,
-  Cog6ToothIcon,
   CloudArrowDownIcon,
-  ChatBubbleLeftRightIcon
+  ChatBubbleLeftRightIcon,
+  UserCircleIcon,
+  ServerStackIcon
 } from '@heroicons/vue/24/outline'
 import { Roles } from '@speckle/shared'
 import { useActiveUser } from '~~/lib/auth/composables/activeUser'
@@ -176,10 +177,6 @@ const toggleInviteDialog = () => {
   showInviteDialog.value = true
 }
 
-const goToServerManagement = () => {
-  router.push('/server-management')
-}
-
 watch(
   isProfileRoute,
   (newVal, oldVal) => {
diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 60633873fa..5d1cf4f84d 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -1,7 +1,6 @@
 <template>
-  <!-- <LayoutDialog v-model:open="isOpen"> -->
-  <div class="fixed z-40 w-screen h-screen bg-black/70 top-0 left-0 pt-4 md:p-4 md:p-8">
-    <div class="w-full h-full flex rounded overflow-hidden">
+  <LayoutDialog v-model:open="isOpen" fullscreen>
+    <div class="w-full h-full flex">
       <ClientOnly>
         <div
           v-if="!isMobile || !selectedItem"
@@ -62,8 +61,8 @@
         <component :is="selectedItem?.component" />
       </section>
     </div>
-  </div>
-  <!-- </LayoutDialog> -->
+    <!-- </div> -->
+  </LayoutDialog>
 </template>
 
 <script setup lang="ts">
@@ -85,8 +84,22 @@ import {
   LayoutSidebarMenuGroup
 } from '@speckle/ui-components'
 
+const emit = defineEmits<{
+  (e: 'update:open', val: boolean): void
+}>()
+
+const props = defineProps<{
+  open: boolean
+}>()
+
 const breakpoints = useBreakpoints(TailwindBreakpoints)
 const isMobile = breakpoints.smallerOrEqual('sm')
+const selectedItem = shallowRef()
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (newVal: boolean) => emit('update:open', newVal)
+})
 
 type SelectableItem = {
   title: string
@@ -131,8 +144,6 @@ const itemConfig: { [key: string]: SelectableItem } = {
   }
 }
 
-const selectedItem = shallowRef()
-
 function setSelectedItem(item: SelectableItem): void {
   selectedItem.value = item
 }
diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue
index 9694418788..a9c46c4d78 100644
--- a/packages/ui-components/src/components/layout/Dialog.vue
+++ b/packages/ui-components/src/components/layout/Dialog.vue
@@ -11,7 +11,7 @@
         leave-to="opacity-0"
       >
         <div
-          class="fixed top-0 left-0 w-full h-full bg-black/40 dark:bg-neutral-900/70 transition-opacity backdrop-blur-xs"
+          class="fixed top-0 left-0 w-full h-full bg-black/70 dark:bg-neutral-900/70 transition-opacity"
         />
       </TransitionChild>
       <div class="fixed top-0 left-0 z-10 h-screen !h-[100dvh] w-screen">
@@ -30,7 +30,8 @@
           >
             <DialogPanel
               :class="[
-                'transform rounded-t-lg md:rounded-lg text-foreground overflow-hidden bg-foundation text-left shadow-xl transition-all flex flex-col h-[98vh] md:h-auto md:max-h-[90vh]',
+                'transform rounded-t-lg md:rounded-xl text-foreground overflow-hidden bg-foundation text-left shadow-xl transition-all flex flex-col h-[98vh] md:h-auto',
+                fullscreen ? 'md:h-full' : 'md:max-h-[90vh]',
                 widthClasses
               ]"
               :as="isForm ? 'form' : 'div'"
@@ -61,12 +62,16 @@
                 class="absolute z-20 bg-foundation rounded-full p-1.5 shadow border top-4 right-4"
                 @click="open = false"
               >
-                <XMarkIcon class="h-4 w-4" />
+                <XMarkIcon class="h-4 w-4 md:w-5 md:h-5" />
               </button>
               <div
                 ref="slotContainer"
                 class="flex-1 simple-scrollbar overflow-y-auto text-sm sm:text-base"
-                :class="hasTitle ? 'px-6 pb-4' : 'p-6'"
+                :class="
+                  hasTitle
+                    ? `px-6 pb-4 ${fullscreen && 'md:p-0'}`
+                    : !fullscreen && 'p-6'
+                "
                 @scroll="onScroll"
               >
                 <slot>Put your content here!</slot>
@@ -111,7 +116,7 @@ import { computed, ref, useSlots, watch, onUnmounted } from 'vue'
 import { throttle } from 'lodash'
 import { isClient } from '@vueuse/core'
 
-type MaxWidthValue = 'sm' | 'md' | 'lg' | 'xl'
+type MaxWidthValue = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
 
 const emit = defineEmits<{
   (e: 'update:open', v: boolean): void
@@ -183,19 +188,19 @@ const widthClasses = computed(() => {
 
   if (!props.fullscreen) {
     classParts.push('sm:max-w-2xl')
-  }
 
-  if (maxWidthWeight.value >= 1) {
-    classParts.push('md:max-w-2xl')
-  }
-  if (maxWidthWeight.value >= 2) {
-    classParts.push('lg:max-w-4xl')
-  }
-  if (maxWidthWeight.value >= 3) {
-    classParts.push('xl:max-w-6xl')
-  }
-  if (maxWidthWeight.value >= 4) {
-    classParts.push('2xl:max-w-7xl')
+    if (maxWidthWeight.value >= 1) {
+      classParts.push('md:max-w-2xl')
+    }
+    if (maxWidthWeight.value >= 2) {
+      classParts.push('lg:max-w-4xl')
+    }
+    if (maxWidthWeight.value >= 3) {
+      classParts.push('xl:max-w-6xl')
+    }
+    if (maxWidthWeight.value >= 4) {
+      classParts.push('2xl:max-w-7xl')
+    }
   }
 
   return classParts.join(' ')

From 22de9d448508ce8f577c105de1966d25541963a4 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Wed, 3 Jul 2024 13:35:24 +0100
Subject: [PATCH 17/77] Revert FE2 testing changes

---
 packages/frontend-2/app.vue                   |   2 +-
 .../frontend-2/components/header/NavBar.vue   |   2 +-
 .../frontend-2/components/sidebar/Main.vue    | 109 ------------------
 packages/frontend-2/layouts/default.vue       |  64 +---------
 4 files changed, 6 insertions(+), 171 deletions(-)
 delete mode 100644 packages/frontend-2/components/sidebar/Main.vue

diff --git a/packages/frontend-2/app.vue b/packages/frontend-2/app.vue
index dd0f42f67e..f1a988d50c 100644
--- a/packages/frontend-2/app.vue
+++ b/packages/frontend-2/app.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     id="speckle"
-    class="bg-foundation-page text-foreground has-[.viewer-transparent]:!bg-transparent"
+    class="bg-foundation-page text-foreground has-[.viewer]:!overflow-hidden has-[.viewer-transparent]:!bg-transparent"
   >
     <NuxtLayout>
       <NuxtPage />
diff --git a/packages/frontend-2/components/header/NavBar.vue b/packages/frontend-2/components/header/NavBar.vue
index af2ea268f3..fb3b7ec035 100644
--- a/packages/frontend-2/components/header/NavBar.vue
+++ b/packages/frontend-2/components/header/NavBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <nav class="fixed z-40 top-0 h-14 bg-foundation shadow">
+    <nav class="fixed z-20 top-0 h-14 bg-foundation shadow">
       <div
         class="flex gap-4 items-center justify-between h-full w-screen py-4 pl-3 pr-4"
       >
diff --git a/packages/frontend-2/components/sidebar/Main.vue b/packages/frontend-2/components/sidebar/Main.vue
deleted file mode 100644
index 7cfeaddb53..0000000000
--- a/packages/frontend-2/components/sidebar/Main.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <LayoutSidebar>
-    <LayoutSidebarMenu>
-      <LayoutSidebarMenuGroup>
-        <LayoutSidebarMenuGroupItem label="Dashboard" :to="homeRoute">
-          <template #icon>
-            <HomeIcon />
-          </template>
-        </LayoutSidebarMenuGroupItem>
-        <LayoutSidebarMenuGroupItem label="Projects" :to="homeRoute">
-          <template #icon>
-            <Squares2X2Icon />
-          </template>
-        </LayoutSidebarMenuGroupItem>
-        <LayoutSidebarMenuGroupItem label="Activity" :to="homeRoute">
-          <template #icon>
-            <PresentationChartLineIcon />
-          </template>
-        </LayoutSidebarMenuGroupItem>
-      </LayoutSidebarMenuGroup>
-
-      <LayoutSidebarMenuGroup title="Workspaces">
-        <LayoutSidebarMenuGroupItem label="Benjamin's space" :to="homeRoute">
-          <template #icon>
-            <UserAvatar size="sm" />
-          </template>
-        </LayoutSidebarMenuGroupItem>
-        <LayoutSidebarMenuGroupItem label="Acme Inc" :to="homeRoute">
-          <template #icon>
-            <UserAvatar size="sm" />
-          </template>
-        </LayoutSidebarMenuGroupItem>
-      </LayoutSidebarMenuGroup>
-
-      <LayoutSidebarMenuGroup title="Favorites">
-        <LayoutSidebarMenuGroupItem label="Different Houses" :to="homeRoute">
-          <template #icon>
-            <Squares2X2Icon />
-          </template>
-        </LayoutSidebarMenuGroupItem>
-        <LayoutSidebarMenuGroupItem label="Acme Inc" :to="homeRoute">
-          <template #icon>
-            <Squares2X2Icon />
-          </template>
-        </LayoutSidebarMenuGroupItem>
-        <LayoutSidebarMenuGroupItem label="The Palace" :to="homeRoute">
-          <template #icon>
-            <CubeIcon />
-          </template>
-        </LayoutSidebarMenuGroupItem>
-        <LayoutSidebarMenuGroupItem label="An automation name" :to="homeRoute">
-          <template #icon>
-            <BoltIcon />
-          </template>
-        </LayoutSidebarMenuGroupItem>
-      </LayoutSidebarMenuGroup>
-
-      <LayoutSidebarMenuGroup title="Resources">
-        <LayoutSidebarMenuGroupItem label="Connectors" :to="homeRoute">
-          <template #icon>
-            <PuzzlePieceIcon />
-          </template>
-        </LayoutSidebarMenuGroupItem>
-        <LayoutSidebarMenuGroupItem label="Community Forum" :to="homeRoute">
-          <template #icon>
-            <UsersIcon />
-          </template>
-        </LayoutSidebarMenuGroupItem>
-        <LayoutSidebarMenuGroupItem label="Documentation" :to="homeRoute">
-          <template #icon>
-            <BookOpenIcon />
-          </template>
-        </LayoutSidebarMenuGroupItem>
-        <LayoutSidebarMenuGroupItem label="Changelog" :to="homeRoute">
-          <template #icon>
-            <HeartIcon />
-          </template>
-        </LayoutSidebarMenuGroupItem>
-        <LayoutSidebarMenuGroupItem label="Give us feedback" :to="homeRoute">
-          <template #icon>
-            <ChatBubbleLeftIcon />
-          </template>
-        </LayoutSidebarMenuGroupItem>
-      </LayoutSidebarMenuGroup>
-    </LayoutSidebarMenu>
-  </LayoutSidebar>
-</template>
-
-<script setup lang="ts">
-import {
-  HomeIcon,
-  PresentationChartLineIcon,
-  Squares2X2Icon,
-  CubeIcon,
-  BoltIcon,
-  PuzzlePieceIcon,
-  UsersIcon,
-  BookOpenIcon,
-  HeartIcon,
-  ChatBubbleLeftIcon
-} from '@heroicons/vue/24/outline'
-import { homeRoute } from '~~/lib/common/helpers/route'
-import {
-  LayoutSidebar,
-  LayoutSidebarMenu,
-  LayoutSidebarMenuGroup,
-  UserAvatar
-} from '@speckle/ui-components'
-</script>
diff --git a/packages/frontend-2/layouts/default.vue b/packages/frontend-2/layouts/default.vue
index 008c90a9c2..72830bdbf7 100644
--- a/packages/frontend-2/layouts/default.vue
+++ b/packages/frontend-2/layouts/default.vue
@@ -1,64 +1,8 @@
 <template>
-  <div>
+  <div class="min-h-full">
     <HeaderNavBar />
-    <div class="fixed top-0 left-0 h-dvh w-full overflow-hidden flex pt-14">
-      <div ref="sidebar" class="relative" :style="{ width: sidebarWidth + 'px' }">
-        <div
-          class="bg-foundation overflow-y-auto overflow-x-hidden simple-scrollbar h-full"
-        >
-          <div class="p-4">
-            <SidebarMain />
-          </div>
-        </div>
-
-        <div
-          ref="resizeHandle"
-          class="group absolute right-0 top-0 h-full w-1.5 hover:cursor-ew-resize flex justify-end"
-        >
-          <div class="opacity-0 group-hover:opacity-100 h-full w-0.5 bg-primary"></div>
-        </div>
-      </div>
-
-      <main class="flex-1 overflow-y-auto simple-scrollbar pt-8 pb-16">
-        <div class="container mx-auto px-12">
-          <slot />
-        </div>
-      </main>
-    </div>
+    <main class="my-4 layout-container pb-20">
+      <slot />
+    </main>
   </div>
 </template>
-
-<script setup lang="ts">
-import { useEventListener } from '@vueuse/core'
-
-const sidebar = ref(null)
-const resizeHandle = ref(null)
-const isResizing = ref(false)
-const sidebarWidth = ref(256) // Initial width (equivalent to w-64)
-let startWidth = 0
-let startX = 0
-
-const startResizing = (event: MouseEvent) => {
-  event.preventDefault()
-  isResizing.value = true
-  startX = event.clientX
-  startWidth = sidebarWidth.value
-}
-
-if (import.meta.client) {
-  useEventListener(resizeHandle, 'mousedown', startResizing)
-
-  useEventListener(document, 'mousemove', (event) => {
-    if (isResizing.value) {
-      const diffX = event.clientX - startX
-      sidebarWidth.value = Math.max(220, Math.min(startWidth + diffX, 400))
-    }
-  })
-
-  useEventListener(document, 'mouseup', () => {
-    if (isResizing.value) {
-      isResizing.value = false
-    }
-  })
-}
-</script>

From f11506e0da1525fb999a1f4e65a7d7cb934c81cb Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Wed, 3 Jul 2024 13:51:46 +0100
Subject: [PATCH 18/77] Make DUI3 friendly

---
 .../layout/sidebar/Sidebar.stories.ts         | 22 +++++--------------
 .../layout/sidebar/menu/group/Group.vue       |  4 ++--
 .../layout/sidebar/menu/group/Item.vue        |  4 ++--
 3 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts b/packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts
index 66e174a6a8..260c4a756e 100644
--- a/packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts
+++ b/packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts
@@ -10,15 +10,9 @@ export default {
   parameters: {
     docs: {
       description: {
-        component:
-          'This component displays a sidebar with an optional topbar button slot.'
+        component: 'This component displays a sidebar.'
       }
     }
-  },
-  argTypes: {
-    title: {
-      description: 'Title of the sidebar, displayed at the top if provided'
-    }
   }
 } as Meta
 
@@ -41,37 +35,34 @@ export const Dashboard: StoryObj = {
         <LayoutSidebarMenu>
           <LayoutSidebarMenuGroup title="Group Title with Icon">
             <template #title-icon>
-              <HomeIcon class="size-5" />
+              <HomeIcon class="h-5 w-5" />
             </template>
             <LayoutSidebarMenuGroupItem label="Group Item with Icon" to="/" >
               <template #icon>
-                <HomeIcon class="size-5" />
+                <HomeIcon class="h-5 w-5" />
               </template>
             </LayoutSidebarMenuGroupItem>
             <LayoutSidebarMenuGroupItem label="Group Item with Icon" to="/" >
               <template #icon>
-                <HomeIcon class="size-5" />
+                <HomeIcon class="h-5 w-5" />
               </template>
             </LayoutSidebarMenuGroupItem>
             <LayoutSidebarMenuGroupItem label="Group Item with Icon" to="/" >
               <template #icon>
-                <HomeIcon class="size-5" />
+                <HomeIcon class="h-5 w-5" />
               </template>
             </LayoutSidebarMenuGroupItem>
-
             <LayoutSidebarMenuGroupItem label="Group Item with no Icon" to="/" />
-
             <LayoutSidebarMenuGroupItem label="Group Item with Child" to="/">
               <LayoutSidebarMenuGroupItem label="Group Item child with Child" to="/">
                 <LayoutSidebarMenuGroupItem label="Group Item child" to="/">
                   <template #icon>
-                    <HomeIcon class="size-5" />
+                    <HomeIcon class="h-5 w-5" />
                   </template>
                 </LayoutSidebarMenuGroupItem>
               </LayoutSidebarMenuGroupItem>
             </LayoutSidebarMenuGroupItem>
           </LayoutSidebarMenuGroup>
-
           <LayoutSidebarMenuGroup title="Group Title without icon">
             <LayoutSidebarMenuGroupItem label="Menu item with children" to="/">
               <LayoutSidebarMenuGroupItem label="Menu item" to="/" />
@@ -80,7 +71,6 @@ export const Dashboard: StoryObj = {
               <LayoutSidebarMenuGroupItem label="Menu item" to="/" />
             </LayoutSidebarMenuGroupItem>
           </LayoutSidebarMenuGroup>
-
         </LayoutSidebarMenu>
       </LayoutSidebar>
     `
diff --git a/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue b/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue
index dfeffde078..6ff64b4dd7 100644
--- a/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue
+++ b/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue
@@ -6,7 +6,7 @@
         class="group flex gap-1.5 items-center w-full hover:bg-foundation-3 rounded-md p-0.5"
         @click="isOpen = !isOpen"
       >
-        <ChevronDownIcon :class="isOpen ? '' : 'rotate-180'" class="size-2.5" />
+        <ChevronDownIcon :class="isOpen ? '' : 'rotate-180'" class="h-2.5 w-2.5" />
         <h6 class="font-bold text-foreground-2 text-xs flex items-center gap-1.5">
           {{ title }}
         </h6>
@@ -14,7 +14,7 @@
       <div v-else class="flex gap-1 items-center w-full p-0.5 text-foreground-2">
         <div
           v-if="$slots['title-icon']"
-          class="size-5 flex items-center justify-center"
+          class="h-5 w-5 flex items-center justify-center"
         >
           <slot name="title-icon"></slot>
         </div>
diff --git a/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue b/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
index 3410dbd116..6b2a09e972 100644
--- a/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
+++ b/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
@@ -9,7 +9,7 @@
       :target="external ? '_blank' : undefined"
     >
       <div class="flex items-center gap-2">
-        <div v-if="$slots.icon" class="size-5 flex items-center justify-center">
+        <div v-if="$slots.icon" class="h-5 w-5 flex items-center justify-center">
           <slot name="icon" />
         </div>
         <span :class="$slots.icon ? '' : 'pl-2'">
@@ -28,7 +28,7 @@
         class="group flex gap-1.5 items-center w-full hover:bg-foundation-3 rounded-md p-0.5 cursor-pointer"
         @click="isOpen = !isOpen"
       >
-        <ChevronDownIcon :class="isOpen ? '' : 'rotate-180'" class="size-2.5" />
+        <ChevronDownIcon :class="isOpen ? '' : 'rotate-180'" class="h-2.5 w-2.5" />
         <h6 class="font-bold text-foreground-2 text-xs flex items-center gap-1.5">
           {{ label }}
         </h6>

From 25e185aebb051d0dc5030ce50206cdd740ff83cb Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Wed, 3 Jul 2024 14:13:36 +0100
Subject: [PATCH 19/77] Revert unneeded upgrade

---
 packages/ui-components/package.json |  2 +-
 yarn.lock                           | 35 +----------------------------
 2 files changed, 2 insertions(+), 35 deletions(-)

diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index 56c0312678..ffdd881db6 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -90,7 +90,7 @@
     "prettier": "^2.7.1",
     "rollup-plugin-node-builtins": "^2.1.2",
     "storybook": "^8.1.10",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^3.3.2",
     "type-fest": "^2.13.1",
     "typescript": "^5.0.4",
     "unplugin-vue-macros": "^2.7.0",
diff --git a/yarn.lock b/yarn.lock
index 4118293342..0eada8e5f6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15950,7 +15950,7 @@ __metadata:
     prettier: "npm:^2.7.1"
     rollup-plugin-node-builtins: "npm:^2.1.2"
     storybook: "npm:^8.1.10"
-    tailwindcss: "npm:^3.4.4"
+    tailwindcss: "npm:^3.3.2"
     type-fest: "npm:^2.13.1"
     typescript: "npm:^5.0.4"
     unplugin-vue-macros: "npm:^2.7.0"
@@ -48174,39 +48174,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwindcss@npm:^3.4.4":
-  version: 3.4.4
-  resolution: "tailwindcss@npm:3.4.4"
-  dependencies:
-    "@alloc/quick-lru": "npm:^5.2.0"
-    arg: "npm:^5.0.2"
-    chokidar: "npm:^3.5.3"
-    didyoumean: "npm:^1.2.2"
-    dlv: "npm:^1.1.3"
-    fast-glob: "npm:^3.3.0"
-    glob-parent: "npm:^6.0.2"
-    is-glob: "npm:^4.0.3"
-    jiti: "npm:^1.21.0"
-    lilconfig: "npm:^2.1.0"
-    micromatch: "npm:^4.0.5"
-    normalize-path: "npm:^3.0.0"
-    object-hash: "npm:^3.0.0"
-    picocolors: "npm:^1.0.0"
-    postcss: "npm:^8.4.23"
-    postcss-import: "npm:^15.1.0"
-    postcss-js: "npm:^4.0.1"
-    postcss-load-config: "npm:^4.0.1"
-    postcss-nested: "npm:^6.0.1"
-    postcss-selector-parser: "npm:^6.0.11"
-    resolve: "npm:^1.22.2"
-    sucrase: "npm:^3.32.0"
-  bin:
-    tailwind: lib/cli.js
-    tailwindcss: lib/cli.js
-  checksum: 10/ab120014a68517c079fbeecba06c404ac94088a959b5b5e631214af4d87b332b6e4b28d8453f65eac9d94759a030ca581b1330f7d73cbf497883c4e2de083432
-  languageName: node
-  linkType: hard
-
 "tapable@npm:^1.0.0":
   version: 1.1.3
   resolution: "tapable@npm:1.1.3"

From 8fc8ea38bdaef4ec85ff279a3ad6390b203514f1 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Wed, 3 Jul 2024 16:02:43 +0200
Subject: [PATCH 20/77] Clean up classes, align styling, align server settings
 pages

---
 .../developer-settings/SectionHeader.vue      |  6 +--
 .../settings/server/ActiveUsers.vue           |  4 +-
 .../components/settings/server/Invites.vue    |  4 +-
 .../settings/user/DeleteAccount.vue           |  2 +-
 .../components/settings/user/Details.vue      | 54 +++++++++----------
 .../components/settings/user/Developer.vue    | 12 ++---
 .../settings/user/Notifications.vue           |  9 ++--
 .../components/settings/user/Password.vue     |  2 +-
 .../components/settings/user/Profile.vue      | 13 +++--
 .../src/components/common/Alert.vue           | 14 +++--
 .../src/components/layout/Dialog.vue          |  2 +-
 11 files changed, 60 insertions(+), 62 deletions(-)

diff --git a/packages/frontend-2/components/developer-settings/SectionHeader.vue b/packages/frontend-2/components/developer-settings/SectionHeader.vue
index 9ea40ef417..096f639b71 100644
--- a/packages/frontend-2/components/developer-settings/SectionHeader.vue
+++ b/packages/frontend-2/components/developer-settings/SectionHeader.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="flex flex-col gap-4">
     <div class="flex flex-col md:flex-row gap-3 md:gap-0 justify-between">
-      <h2 v-if="subheading" class="h5 font-bold">{{ title }}</h2>
-      <h1 v-else class="h4 font-bold">{{ title }}</h1>
+      <h2 v-if="subheading" class="text-xl">{{ title }}</h2>
+      <h1 v-else class="text-2xl font-semibold">{{ title }}</h1>
       <div class="flex flex-wrap gap-2">
         <FormButton
           v-for="(button, index) in buttons"
@@ -15,7 +15,7 @@
         </FormButton>
       </div>
     </div>
-    <p class="text-sm max-w-5xl">
+    <p class="text-sm">
       <slot></slot>
     </p>
   </div>
diff --git a/packages/frontend-2/components/settings/server/ActiveUsers.vue b/packages/frontend-2/components/settings/server/ActiveUsers.vue
index bb8cab1859..c880b6643c 100644
--- a/packages/frontend-2/components/settings/server/ActiveUsers.vue
+++ b/packages/frontend-2/components/settings/server/ActiveUsers.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
-    <h2 class="h3 font-semibold pb-8 hidden md:block">Active Users</h2>
-    <div class="flex justify-end items-end mb-8">
+    <div class="flex justify-between flex-col md:flex-row gap-3 md:gap-0">
+      <h2 class="h3 font-semibold pb-8 hidden md:block">Active Users</h2>
       <FormButton :icon-left="UserPlusIcon" @click="toggleInviteDialog">
         Invite
       </FormButton>
diff --git a/packages/frontend-2/components/settings/server/Invites.vue b/packages/frontend-2/components/settings/server/Invites.vue
index 5ab5995b4a..0b056dcf58 100644
--- a/packages/frontend-2/components/settings/server/Invites.vue
+++ b/packages/frontend-2/components/settings/server/Invites.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
-    <h2 class="h3 font-semibold pb-8 hidden md:block">Active Users</h2>
-    <div class="flex justify-end items-end mb-8">
+    <div class="flex justify-between flex-col md:flex-row gap-3 md:gap-0">
+      <h2 class="h3 font-semibold pb-8 hidden md:block">Pending Invitations</h2>
       <FormButton :icon-left="UserPlusIcon" @click="toggleInviteDialog">
         Invite
       </FormButton>
diff --git a/packages/frontend-2/components/settings/user/DeleteAccount.vue b/packages/frontend-2/components/settings/user/DeleteAccount.vue
index ce01669c33..2abe708037 100644
--- a/packages/frontend-2/components/settings/user/DeleteAccount.vue
+++ b/packages/frontend-2/components/settings/user/DeleteAccount.vue
@@ -2,7 +2,7 @@
   <div>
     <SettingsUserDeleteAccountDialog v-model:open="isOpen" :user="user" />
     <div class="flex flex-col space-y-6">
-      <h2 class="h5">Delete account</h2>
+      <h2 class="text-xl">Delete account</h2>
       <CommonAlert color="info" size="sm" hide-icon>
         <template #description>
           We will delete all projects where you are the sole owner, and any associated
diff --git a/packages/frontend-2/components/settings/user/Details.vue b/packages/frontend-2/components/settings/user/Details.vue
index 8974ab279d..51878eee47 100644
--- a/packages/frontend-2/components/settings/user/Details.vue
+++ b/packages/frontend-2/components/settings/user/Details.vue
@@ -1,33 +1,29 @@
 <template>
-  <div class="flex flex-col gap-y-6">
-    <h2 class="h5">Your details</h2>
-    <div class="grid grid-cols-2">
-      <p class="text-sm font-semibold">Name</p>
-      <FormTextInput
-        v-model="name"
-        color="foundation"
-        label="Name"
-        name="name"
-        placeholder="John Doe"
-        :rules="[isRequired, isStringOfLength({ maxLength: 512 })]"
-        @change="save"
-      />
-    </div>
-    <div class="grid grid-cols-2">
-      <p class="text-sm font-semibold">Company</p>
-      <FormTextInput
-        v-model="company"
-        color="foundation"
-        label="Company"
-        name="company"
-        placeholder="Example Ltd."
-        :rules="[isStringOfLength({ maxLength: 512 })]"
-        @change="save"
-      />
-    </div>
-    <div class="grid grid-cols-2">
-      <UserProfileEditDialogAvatar :user="user" size="xxl" />
-    </div>
+  <div class="flex flex-col gap-y-4">
+    <h2 class="text-xl">Your details</h2>
+    <FormTextInput
+      v-model="name"
+      class="pt-2 pb-1"
+      color="foundation"
+      label="Name"
+      name="name"
+      placeholder="John Doe"
+      show-label
+      :rules="[isRequired, isStringOfLength({ maxLength: 512 })]"
+      @change="save"
+    />
+    <hr />
+    <FormTextInput
+      v-model="company"
+      color="foundation"
+      label="Company"
+      name="company"
+      placeholder="Example Ltd."
+      show-label
+      :rules="[isStringOfLength({ maxLength: 512 })]"
+      @change="save"
+    />
+    <UserProfileEditDialogAvatar :user="user" size="xxl" />
   </div>
 </template>
 <script setup lang="ts">
diff --git a/packages/frontend-2/components/settings/user/Developer.vue b/packages/frontend-2/components/settings/user/Developer.vue
index 8d3437fd4b..3509412fe2 100644
--- a/packages/frontend-2/components/settings/user/Developer.vue
+++ b/packages/frontend-2/components/settings/user/Developer.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
-    <div class="flex flex-col gap-y-6">
-      <div class="flex flex-col gap-16">
+    <div class="flex flex-col">
+      <div class="flex flex-col gap-12">
         <DeveloperSettingsSectionHeader
           title="Developer Settings"
           :buttons="[
@@ -14,9 +14,7 @@
               label: 'Explore GraphQL'
             }
           ]"
-        >
-          Heads up! The sections below are intended for developers.
-        </DeveloperSettingsSectionHeader>
+        />
         <div class="flex flex-col gap-4">
           <DeveloperSettingsSectionHeader
             title="Access Tokens"
@@ -95,7 +93,7 @@
             </template>
           </LayoutTable>
         </div>
-
+        <hr />
         <div class="flex flex-col gap-4">
           <DeveloperSettingsSectionHeader
             subheading
@@ -178,7 +176,7 @@
             </template>
           </LayoutTable>
         </div>
-
+        <hr />
         <div class="flex flex-col gap-4">
           <DeveloperSettingsSectionHeader
             subheading
diff --git a/packages/frontend-2/components/settings/user/Notifications.vue b/packages/frontend-2/components/settings/user/Notifications.vue
index ecc9afe1c8..1303dcce33 100644
--- a/packages/frontend-2/components/settings/user/Notifications.vue
+++ b/packages/frontend-2/components/settings/user/Notifications.vue
@@ -1,10 +1,9 @@
 <template>
   <div class="md:max-w-xl md:mx-auto">
-    <h2 class="h3 font-semibold hidden md:block">Notifications</h2>
-    <div class="divide-y">
-      <p class="py-8">Your notification preferences</p>
-      <SettingsUserNotificationsTable class="py-8" :user="user" />
-    </div>
+    <h2 class="text-2xl font-semibold font-semibold hidden md:block">Notifications</h2>
+    <p class="text-sm pt-4">Your notification preferences</p>
+    <hr class="pb-10 mt-10" />
+    <SettingsUserNotificationsTable class="py-8" :user="user" />
   </div>
 </template>
 <script setup lang="ts">
diff --git a/packages/frontend-2/components/settings/user/Password.vue b/packages/frontend-2/components/settings/user/Password.vue
index 631d3bf3af..3ac35d6df3 100644
--- a/packages/frontend-2/components/settings/user/Password.vue
+++ b/packages/frontend-2/components/settings/user/Password.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col space-y-6">
-    <h2 class="h5">Password change</h2>
+    <h2 class="text-xl">Password change</h2>
     <p class="text-sm">
       Press the button below to start the password reset process.
       <br />
diff --git a/packages/frontend-2/components/settings/user/Profile.vue b/packages/frontend-2/components/settings/user/Profile.vue
index 2f213c05e2..c18de399ca 100644
--- a/packages/frontend-2/components/settings/user/Profile.vue
+++ b/packages/frontend-2/components/settings/user/Profile.vue
@@ -1,12 +1,11 @@
 <template>
   <div class="md:max-w-xl md:mx-auto">
-    <h2 class="h3 font-semibold hidden md:block">Profile</h2>
-    <div class="divide-y">
-      <p class="py-8">Manage your profile information</p>
-      <SettingsUserDetails class="py-8" :user="user" />
-      <SettingsUserPassword class="py-8" :user="user" />
-      <SettingsUserDeleteAccount class="py-8" :user="user" />
-    </div>
+    <h2 class="text-2xl font-semibold hidden md:block">User profile</h2>
+    <p class="text-sm py-4">Manage your profile information</p>
+    <SettingsUserDetails class="pt-10 pb-8" :user="user" />
+    <SettingsUserPassword class="pt-4 pb-8" :user="user" />
+    <hr />
+    <SettingsUserDeleteAccount class="py-6" :user="user" />
   </div>
 </template>
 <script setup lang="ts">
diff --git a/packages/ui-components/src/components/common/Alert.vue b/packages/ui-components/src/components/common/Alert.vue
index 865cb14b7c..b33f96a99c 100644
--- a/packages/ui-components/src/components/common/Alert.vue
+++ b/packages/ui-components/src/components/common/Alert.vue
@@ -123,16 +123,22 @@ const containerClasses = computed(() => {
 
   switch (props.color) {
     case 'success':
-      classParts.push('bg-success-lighter border-l-4 border-success')
+      classParts.push(
+        `bg-success-lighter ${!props.hideIcon && 'border-l-4 border-success'}`
+      )
       break
     case 'info':
-      classParts.push('bg-info-lighter border-l-4 border-info')
+      classParts.push(`bg-info-lighter ${!props.hideIcon && 'border-l-4 border-info'}`)
       break
     case 'danger':
-      classParts.push('bg-danger-lighter border-l-4 border-danger')
+      classParts.push(
+        `bg-danger-lighter ${!props.hideIcon && 'border-l-4 border-danger'}`
+      )
       break
     case 'warning':
-      classParts.push('bg-warning-lighter border-l-4 border-warning')
+      classParts.push(
+        `bg-warning-lighter ${!props.hideIcon && 'border-l-4 border-warning'}`
+      )
       break
   }
 
diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue
index a9c46c4d78..eeb8ffb5b9 100644
--- a/packages/ui-components/src/components/layout/Dialog.vue
+++ b/packages/ui-components/src/components/layout/Dialog.vue
@@ -16,7 +16,7 @@
       </TransitionChild>
       <div class="fixed top-0 left-0 z-10 h-screen !h-[100dvh] w-screen">
         <div
-          class="flex md:justify-center items-end md:items-center h-full w-full md:p-4"
+          class="flex md:justify-center items-end md:items-center h-full w-full md:p-6"
         >
           <TransitionChild
             as="template"

From 72f8ea9ae057f731ac87bb95c9fb3dab2f344cd1 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Wed, 3 Jul 2024 17:08:40 +0200
Subject: [PATCH 21/77] Change modal to use url for displaying correct content

---
 .../frontend-2/components/settings/Dialog.vue | 110 +++++++++---------
 .../pages/settings/server/active-users.vue    |   3 +
 .../pages/settings/server/general.vue         |  20 +---
 .../settings/server/pending-invitations.vue   |   3 +
 .../pages/settings/server/projects.vue        |  18 +--
 .../settings/user/developer-settings.vue      |   3 +
 .../pages/settings/user/notifications.vue     |  21 +---
 .../pages/settings/user/profile.vue           |  17 +--
 8 files changed, 71 insertions(+), 124 deletions(-)
 create mode 100644 packages/frontend-2/pages/settings/server/active-users.vue
 create mode 100644 packages/frontend-2/pages/settings/server/pending-invitations.vue
 create mode 100644 packages/frontend-2/pages/settings/user/developer-settings.vue

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 5d1cf4f84d..0609514466 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -13,16 +13,16 @@
                   <UserIcon />
                 </template>
                 <LayoutSidebarMenuGroupItem
-                  label="User Profile"
-                  @click="setSelectedItem(itemConfig.profile)"
+                  :label="itemConfig.profile.title"
+                  @click="setSelectedItem(itemConfig.profile.path)"
                 />
                 <LayoutSidebarMenuGroupItem
-                  label="Notifications"
-                  @click="setSelectedItem(itemConfig.notifications)"
+                  :label="itemConfig.notifications.title"
+                  @click="setSelectedItem(itemConfig.notifications.path)"
                 />
                 <LayoutSidebarMenuGroupItem
-                  label="Developer Settings"
-                  @click="setSelectedItem(itemConfig.developer)"
+                  :label="itemConfig.developerSettings.title"
+                  @click="setSelectedItem(itemConfig.developerSettings.path)"
                 />
               </LayoutSidebarMenuGroup>
               <LayoutSidebarMenuGroup title="Server Settings">
@@ -30,20 +30,20 @@
                   <ServerStackIcon />
                 </template>
                 <LayoutSidebarMenuGroupItem
-                  label="General"
-                  @click="setSelectedItem(itemConfig.general)"
+                  :label="itemConfig.general.title"
+                  @click="setSelectedItem(itemConfig.general.path)"
                 />
                 <LayoutSidebarMenuGroupItem
-                  label="Projects"
-                  @click="setSelectedItem(itemConfig.projects)"
+                  :label="itemConfig.projects.title"
+                  @click="setSelectedItem(itemConfig.projects.path)"
                 />
                 <LayoutSidebarMenuGroupItem
-                  label="Active Users"
-                  @click="setSelectedItem(itemConfig.users)"
+                  :label="itemConfig.activeUsers.title"
+                  @click="setSelectedItem(itemConfig.activeUsers.path)"
                 />
                 <LayoutSidebarMenuGroupItem
-                  label="Pending invitation"
-                  @click="setSelectedItem(itemConfig.invites)"
+                  :label="itemConfig.pendingInvitations.title"
+                  @click="setSelectedItem(itemConfig.pendingInvitations.path)"
                 />
               </LayoutSidebarMenuGroup>
             </LayoutSidebarMenu>
@@ -55,26 +55,25 @@
         class="overflow-scroll flex-1 bg-gray-50 p-6 py-8 md:p-4 md:py-12"
       >
         <div class="flex md:hidden items-center">
-          <ChevronLeftIcon class="w-6 h-6" @click="clearSelection" />
+          <ChevronLeftIcon class="w-6 h-6" @click="setSelectedItem(null)" />
           <h2 class="h4 font-semibold ml-4">{{ selectedItem.title }}</h2>
         </div>
         <component :is="selectedItem?.component" />
       </section>
     </div>
-    <!-- </div> -->
   </LayoutDialog>
 </template>
 
 <script setup lang="ts">
 import type { defineComponent } from 'vue'
 import { ChevronLeftIcon } from '@heroicons/vue/24/solid'
-import SettingsUserProfile from './user/Profile'
-import SettingsUserNotifications from './user/Notifications'
-import SettingsUserDeveloper from './user/Developer'
-import SettingsServerGeneral from './server/General'
-import SettingsServerProjects from './server/Projects'
-import SettingsServerActiveUsers from './server/ActiveUsers'
-import SettingsServerInvites from './server/Invites'
+import SettingsUserProfile from './user/Profile.vue'
+import SettingsUserNotifications from './user/Notifications.vue'
+import SettingsUserDeveloper from './user/Developer.vue'
+import SettingsServerGeneral from './server/General.vue'
+import SettingsServerProjects from './server/Projects.vue'
+import SettingsServerActiveUsers from './server/ActiveUsers.vue'
+import SettingsServerInvites from './server/Invites.vue'
 import { useBreakpoints } from '@vueuse/core'
 import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
 import { UserIcon, ServerStackIcon } from '@heroicons/vue/24/outline'
@@ -84,6 +83,12 @@ import {
   LayoutSidebarMenuGroup
 } from '@speckle/ui-components'
 
+type SelectableItem = {
+  title: string
+  component: ReturnType<typeof defineComponent>
+  path: string
+}
+
 const emit = defineEmits<{
   (e: 'update:open', val: boolean): void
 }>()
@@ -94,61 +99,62 @@ const props = defineProps<{
 
 const breakpoints = useBreakpoints(TailwindBreakpoints)
 const isMobile = breakpoints.smallerOrEqual('sm')
-const selectedItem = shallowRef()
+const router = useRouter()
 
 const isOpen = computed({
   get: () => props.open,
   set: (newVal: boolean) => emit('update:open', newVal)
 })
 
-type SelectableItem = {
-  title: string
-  component: ReturnType<typeof defineComponent>
-}
+const selectedItem = computed(() => {
+  const path = router.currentRoute.value.path
+  for (const key in itemConfig) {
+    if (new RegExp(`${itemConfig[key].path}?$`, 'i').test(path)) {
+      return itemConfig[key]
+    }
+  }
+  return null
+})
 
 const itemConfig: { [key: string]: SelectableItem } = {
   profile: {
     title: 'Profile',
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    component: SettingsUserProfile
+    component: SettingsUserProfile,
+    path: '/settings/user/profile'
   },
   notifications: {
     title: 'Notifications',
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    component: SettingsUserNotifications
+    component: SettingsUserNotifications,
+    path: '/settings/user/notifications'
   },
-  developer: {
+  developerSettings: {
     title: 'Developer Settings',
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    component: SettingsUserDeveloper
+    component: SettingsUserDeveloper,
+    path: '/settings/user/developer-settings'
   },
   general: {
     title: 'General',
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    component: SettingsServerGeneral
+    component: SettingsServerGeneral,
+    path: '/settings/server/general'
   },
   projects: {
     title: 'Projects',
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    component: SettingsServerProjects
+    component: SettingsServerProjects,
+    path: '/settings/server/projects'
   },
-  users: {
-    title: 'Active users',
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    component: SettingsServerActiveUsers
+  activeUsers: {
+    title: 'Active Users',
+    component: SettingsServerActiveUsers,
+    path: '/settings/server/active-users'
   },
-  invites: {
+  pendingInvitations: {
     title: 'Pending Invitations',
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    component: SettingsServerInvites
+    component: SettingsServerInvites,
+    path: '/settings/server/pending-invitations'
   }
 }
 
-function setSelectedItem(item: SelectableItem): void {
-  selectedItem.value = item
-}
-
-function clearSelection(): void {
-  selectedItem.value = null
+function setSelectedItem(path: string | null): void {
+  router.push({ path: path ?? '/settings' })
 }
 </script>
diff --git a/packages/frontend-2/pages/settings/server/active-users.vue b/packages/frontend-2/pages/settings/server/active-users.vue
new file mode 100644
index 0000000000..04d85e1bdb
--- /dev/null
+++ b/packages/frontend-2/pages/settings/server/active-users.vue
@@ -0,0 +1,3 @@
+<template>
+  <div />
+</template>
diff --git a/packages/frontend-2/pages/settings/server/general.vue b/packages/frontend-2/pages/settings/server/general.vue
index 11089f8417..04d85e1bdb 100644
--- a/packages/frontend-2/pages/settings/server/general.vue
+++ b/packages/frontend-2/pages/settings/server/general.vue
@@ -1,21 +1,3 @@
 <template>
-  <div>
-    <Portal to="navigation" />
-    <SettingsDebug />
-    <div class="md:max-w-xl md:mx-auto md:py-12">
-      <h1 class="h2">General</h1>
-      <div class="flex flex-col gap-y-8 mt-4">
-        <p>Manage your server settings</p>
-        <hr />
-        <SettingsServerGeneral />
-        <hr />
-        <SettingsServerVersionControl />
-      </div>
-    </div>
-  </div>
+  <div />
 </template>
-<script setup lang="ts">
-useHead({
-  title: 'Settings - Server General'
-})
-</script>
diff --git a/packages/frontend-2/pages/settings/server/pending-invitations.vue b/packages/frontend-2/pages/settings/server/pending-invitations.vue
new file mode 100644
index 0000000000..04d85e1bdb
--- /dev/null
+++ b/packages/frontend-2/pages/settings/server/pending-invitations.vue
@@ -0,0 +1,3 @@
+<template>
+  <div />
+</template>
diff --git a/packages/frontend-2/pages/settings/server/projects.vue b/packages/frontend-2/pages/settings/server/projects.vue
index 0ff1531abf..04d85e1bdb 100644
--- a/packages/frontend-2/pages/settings/server/projects.vue
+++ b/packages/frontend-2/pages/settings/server/projects.vue
@@ -1,19 +1,3 @@
 <template>
-  <div>
-    <Portal to="navigation" />
-    <SettingsDebug />
-    <div class="md:max-w-5xl md:mx-auto md:py-12">
-      <h1 class="h2">Projects</h1>
-      <div class="flex flex-col gap-y-8 mt-4">
-        <p>Manage projects on your server</p>
-        <hr />
-        <SettingsServerProjects />
-      </div>
-    </div>
-  </div>
+  <div />
 </template>
-<script setup lang="ts">
-useHead({
-  title: 'Settings - Projects'
-})
-</script>
diff --git a/packages/frontend-2/pages/settings/user/developer-settings.vue b/packages/frontend-2/pages/settings/user/developer-settings.vue
new file mode 100644
index 0000000000..04d85e1bdb
--- /dev/null
+++ b/packages/frontend-2/pages/settings/user/developer-settings.vue
@@ -0,0 +1,3 @@
+<template>
+  <div />
+</template>
diff --git a/packages/frontend-2/pages/settings/user/notifications.vue b/packages/frontend-2/pages/settings/user/notifications.vue
index a2bcfb1777..04d85e1bdb 100644
--- a/packages/frontend-2/pages/settings/user/notifications.vue
+++ b/packages/frontend-2/pages/settings/user/notifications.vue
@@ -1,22 +1,3 @@
 <template>
-  <div>
-    <Portal to="navigation" />
-    <SettingsDebug />
-    <div class="md:max-w-xl md:mx-auto md:py-12">
-      <h1 class="h2">Notifications</h1>
-      <div class="mt-4 divide-y">
-        <p class="py-8">Your notification preferences</p>
-        <SettingsUserNotifications class="py-8" :user="user" />
-      </div>
-    </div>
-  </div>
+  <div />
 </template>
-<script setup lang="ts">
-import { useActiveUser } from '~/lib/auth/composables/activeUser'
-
-useHead({
-  title: 'Settings - User Profile'
-})
-
-const { activeUser: user } = useActiveUser()
-</script>
diff --git a/packages/frontend-2/pages/settings/user/profile.vue b/packages/frontend-2/pages/settings/user/profile.vue
index 03b0604a8a..04d85e1bdb 100644
--- a/packages/frontend-2/pages/settings/user/profile.vue
+++ b/packages/frontend-2/pages/settings/user/profile.vue
@@ -1,18 +1,3 @@
 <template>
-  <div>
-    <Portal to="navigation" />
-    <SettingsDebug />
-    <div class="md:max-w-xl md:mx-auto md:py-12">
-      <SettingsUserProfile :user="user" />
-    </div>
-  </div>
+  <div />
 </template>
-<script setup lang="ts">
-import { useActiveUser } from '~/lib/auth/composables/activeUser'
-
-useHead({
-  title: 'Settings - User Profile'
-})
-
-const { activeUser: user } = useActiveUser()
-</script>

From c2383c4b20307568a64413a4231efc9f36c54e23 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 4 Jul 2024 10:00:18 +0200
Subject: [PATCH 22/77] Cleanup code; change template to loop over config

---
 .../frontend-2/components/settings/Dialog.vue | 189 +++++++++---------
 1 file changed, 93 insertions(+), 96 deletions(-)

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 0609514466..8864946def 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -1,65 +1,46 @@
 <template>
   <LayoutDialog v-model:open="isOpen" fullscreen>
     <div class="w-full h-full flex">
-      <ClientOnly>
-        <div
-          v-if="!isMobile || !selectedItem"
-          class="w-full md:w-56 lg:w-60 p-4 pt-6 bg-gray-100 md:border-r md:border-gray-200"
-        >
-          <LayoutSidebar>
-            <LayoutSidebarMenu>
-              <LayoutSidebarMenuGroup title="Account Settings">
-                <template #title-icon>
-                  <UserIcon />
-                </template>
-                <LayoutSidebarMenuGroupItem
-                  :label="itemConfig.profile.title"
-                  @click="setSelectedItem(itemConfig.profile.path)"
-                />
-                <LayoutSidebarMenuGroupItem
-                  :label="itemConfig.notifications.title"
-                  @click="setSelectedItem(itemConfig.notifications.path)"
-                />
-                <LayoutSidebarMenuGroupItem
-                  :label="itemConfig.developerSettings.title"
-                  @click="setSelectedItem(itemConfig.developerSettings.path)"
-                />
-              </LayoutSidebarMenuGroup>
-              <LayoutSidebarMenuGroup title="Server Settings">
-                <template #title-icon>
-                  <ServerStackIcon />
-                </template>
-                <LayoutSidebarMenuGroupItem
-                  :label="itemConfig.general.title"
-                  @click="setSelectedItem(itemConfig.general.path)"
-                />
-                <LayoutSidebarMenuGroupItem
-                  :label="itemConfig.projects.title"
-                  @click="setSelectedItem(itemConfig.projects.path)"
-                />
-                <LayoutSidebarMenuGroupItem
-                  :label="itemConfig.activeUsers.title"
-                  @click="setSelectedItem(itemConfig.activeUsers.path)"
-                />
-                <LayoutSidebarMenuGroupItem
-                  :label="itemConfig.pendingInvitations.title"
-                  @click="setSelectedItem(itemConfig.pendingInvitations.path)"
-                />
-              </LayoutSidebarMenuGroup>
-            </LayoutSidebarMenu>
-          </LayoutSidebar>
-        </div>
-      </ClientOnly>
-      <section
-        v-if="selectedItem"
-        class="overflow-scroll flex-1 bg-gray-50 p-6 py-8 md:p-4 md:py-12"
+      <LayoutSidebar
+        v-if="!isMobile || !selectedMenuItem"
+        class="w-full md:w-56 lg:w-60 p-4 pt-6 bg-primary-muted md:border-r md:border-outline-3"
+      >
+        <LayoutSidebarMenu>
+          <LayoutSidebarMenuGroup title="Account Settings">
+            <template #title-icon>
+              <UserIcon />
+            </template>
+            <LayoutSidebarMenuGroupItem
+              v-for="(sidebarMenuItem, index) in sidebarConfig.user"
+              :key="`sidebarUserItem-${index}`"
+              :label="sidebarMenuItem.title"
+              @click="setSelectedMenuItem(sidebarMenuItem.path)"
+            />
+          </LayoutSidebarMenuGroup>
+          <LayoutSidebarMenuGroup title="Server Settings">
+            <template #title-icon>
+              <ServerStackIcon />
+            </template>
+            <LayoutSidebarMenuGroupItem
+              v-for="(sidebarMenuItem, index) in sidebarConfig.server"
+              :key="`sidebarUserItem-${index}`"
+              :label="sidebarMenuItem.title"
+              @click="setSelectedMenuItem(sidebarMenuItem.path)"
+            />
+          </LayoutSidebarMenuGroup>
+        </LayoutSidebarMenu>
+      </LayoutSidebar>
+
+      <main
+        v-if="selectedMenuItem"
+        class="overflow-scroll flex-1 bg-foundation-page p-6 py-8 md:p-4 md:py-12"
       >
         <div class="flex md:hidden items-center">
-          <ChevronLeftIcon class="w-6 h-6" @click="setSelectedItem(null)" />
-          <h2 class="h4 font-semibold ml-4">{{ selectedItem.title }}</h2>
+          <ChevronLeftIcon class="w-6 h-6" @click="setSelectedMenuItem(null)" />
+          <h1 class="h4 font-semibold ml-4">{{ selectedMenuItem.title }}</h1>
         </div>
-        <component :is="selectedItem?.component" />
-      </section>
+        <component :is="selectedMenuItem?.component" />
+      </main>
     </div>
   </LayoutDialog>
 </template>
@@ -83,12 +64,18 @@ import {
   LayoutSidebarMenuGroup
 } from '@speckle/ui-components'
 
-type SelectableItem = {
+type MenuItem = {
   title: string
   component: ReturnType<typeof defineComponent>
   path: string
 }
 
+type SidebarConfig = {
+  [key: string]: {
+    [key: string]: MenuItem
+  }
+}
+
 const emit = defineEmits<{
   (e: 'update:open', val: boolean): void
 }>()
@@ -106,55 +93,65 @@ const isOpen = computed({
   set: (newVal: boolean) => emit('update:open', newVal)
 })
 
-const selectedItem = computed(() => {
+const selectedMenuItem = computed(() => {
   const path = router.currentRoute.value.path
-  for (const key in itemConfig) {
-    if (new RegExp(`${itemConfig[key].path}?$`, 'i').test(path)) {
-      return itemConfig[key]
+  for (const group in sidebarConfig) {
+    const menuItems = sidebarConfig[group]
+
+    for (const key in menuItems) {
+      const item = menuItems[key]
+
+      if (new RegExp(`${item.path}?$`, 'i').test(path)) {
+        return item
+      }
     }
   }
   return null
 })
 
-const itemConfig: { [key: string]: SelectableItem } = {
-  profile: {
-    title: 'Profile',
-    component: SettingsUserProfile,
-    path: '/settings/user/profile'
-  },
-  notifications: {
-    title: 'Notifications',
-    component: SettingsUserNotifications,
-    path: '/settings/user/notifications'
-  },
-  developerSettings: {
-    title: 'Developer Settings',
-    component: SettingsUserDeveloper,
-    path: '/settings/user/developer-settings'
-  },
-  general: {
-    title: 'General',
-    component: SettingsServerGeneral,
-    path: '/settings/server/general'
-  },
-  projects: {
-    title: 'Projects',
-    component: SettingsServerProjects,
-    path: '/settings/server/projects'
-  },
-  activeUsers: {
-    title: 'Active Users',
-    component: SettingsServerActiveUsers,
-    path: '/settings/server/active-users'
+const sidebarConfig: SidebarConfig = {
+  user: {
+    profile: {
+      title: 'Profile',
+      component: SettingsUserProfile,
+      path: '/settings/user/profile'
+    },
+    notifications: {
+      title: 'Notifications',
+      component: SettingsUserNotifications,
+      path: '/settings/user/notifications'
+    },
+    developerSettings: {
+      title: 'Developer Settings',
+      component: SettingsUserDeveloper,
+      path: '/settings/user/developer-settings'
+    }
   },
-  pendingInvitations: {
-    title: 'Pending Invitations',
-    component: SettingsServerInvites,
-    path: '/settings/server/pending-invitations'
+  server: {
+    general: {
+      title: 'General',
+      component: SettingsServerGeneral,
+      path: '/settings/server/general'
+    },
+    projects: {
+      title: 'Projects',
+      component: SettingsServerProjects,
+      path: '/settings/server/projects'
+    },
+    activeUsers: {
+      title: 'Active Users',
+      component: SettingsServerActiveUsers,
+      path: '/settings/server/active-users'
+    },
+    pendingInvitations: {
+      title: 'Pending Invitations',
+      component: SettingsServerInvites,
+      path: '/settings/server/pending-invitations'
+    }
   }
 }
 
-function setSelectedItem(path: string | null): void {
+function setSelectedMenuItem(path: string | null): void {
   router.push({ path: path ?? '/settings' })
 }
 </script>

From 5872fcb738e6f58c34a67821eabeaecfc676b784 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 4 Jul 2024 12:45:26 +0200
Subject: [PATCH 23/77] Updated styling to align all pages on desktop

---
 .../frontend-2/components/settings/Dialog.vue |  10 +-
 .../settings/server/ActiveUsers.vue           |  34 +-
 .../components/settings/server/General.vue    |  18 +-
 .../components/settings/server/Invites.vue    |  36 +-
 .../components/settings/server/Projects.vue   |  10 +-
 .../components/settings/user/Details.vue      |  50 +--
 .../components/settings/user/Developer.vue    |  37 +-
 .../settings/user/Notifications.vue           |   2 +-
 .../components/settings/user/Profile.vue      |  12 +-
 .../frontend-2/pages/developer-settings.vue   | 381 ------------------
 packages/frontend-2/pages/settings/index.vue  |   3 +
 11 files changed, 122 insertions(+), 471 deletions(-)
 delete mode 100644 packages/frontend-2/pages/developer-settings.vue
 create mode 100644 packages/frontend-2/pages/settings/index.vue

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 8864946def..0d8a3b9355 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -3,7 +3,7 @@
     <div class="w-full h-full flex">
       <LayoutSidebar
         v-if="!isMobile || !selectedMenuItem"
-        class="w-full md:w-56 lg:w-60 p-4 pt-6 bg-primary-muted md:border-r md:border-outline-3"
+        class="w-full md:w-56 lg:w-60 p-4 pt-6 bg-foundation-page md:border-r md:border-outline-3"
       >
         <LayoutSidebarMenu>
           <LayoutSidebarMenuGroup title="Account Settings">
@@ -23,23 +23,22 @@
             </template>
             <LayoutSidebarMenuGroupItem
               v-for="(sidebarMenuItem, index) in sidebarConfig.server"
-              :key="`sidebarUserItem-${index}`"
+              :key="`sidebarServerItem-${index}`"
               :label="sidebarMenuItem.title"
               @click="setSelectedMenuItem(sidebarMenuItem.path)"
             />
           </LayoutSidebarMenuGroup>
         </LayoutSidebarMenu>
       </LayoutSidebar>
-
       <main
         v-if="selectedMenuItem"
-        class="overflow-scroll flex-1 bg-foundation-page p-6 py-8 md:p-4 md:py-12"
+        class="simple-scrollbar overflow-y-scroll flex-1 bg-foundation p-6 py-8 md:p-4 md:py-12"
       >
         <div class="flex md:hidden items-center">
           <ChevronLeftIcon class="w-6 h-6" @click="setSelectedMenuItem(null)" />
           <h1 class="h4 font-semibold ml-4">{{ selectedMenuItem.title }}</h1>
         </div>
-        <component :is="selectedMenuItem?.component" />
+        <component :is="selectedMenuItem.component" />
       </main>
     </div>
   </LayoutDialog>
@@ -153,5 +152,6 @@ const sidebarConfig: SidebarConfig = {
 
 function setSelectedMenuItem(path: string | null): void {
   router.push({ path: path ?? '/settings' })
+  // history.pushState({}, '', path ?? '/settings')
 }
 </script>
diff --git a/packages/frontend-2/components/settings/server/ActiveUsers.vue b/packages/frontend-2/components/settings/server/ActiveUsers.vue
index c880b6643c..ca7eda114b 100644
--- a/packages/frontend-2/components/settings/server/ActiveUsers.vue
+++ b/packages/frontend-2/components/settings/server/ActiveUsers.vue
@@ -1,26 +1,28 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
-    <div class="flex justify-between flex-col md:flex-row gap-3 md:gap-0">
-      <h2 class="h3 font-semibold pb-8 hidden md:block">Active Users</h2>
+    <h2 class="text-2xl font-semibold font-semibold hidden md:block">Active Users</h2>
+    <p class="text-sm pt-4">And overview of all your active users</p>
+
+    <hr class="my-10" />
+
+    <div class="flex">
+      <FormTextInput
+        name="search"
+        :custom-icon="MagnifyingGlassIcon"
+        color="foundation"
+        full-width
+        search
+        :show-clear="!!searchString"
+        placeholder="Search Users"
+        class="rounded-md border border-outline-3 md:max-w-md"
+        @update:model-value="debounceSearchUpdate"
+        @change="($event) => searchUpdateHandler($event.value)"
+      />
       <FormButton :icon-left="UserPlusIcon" @click="toggleInviteDialog">
         Invite
       </FormButton>
     </div>
 
-    <FormTextInput
-      size="lg"
-      name="search"
-      :custom-icon="MagnifyingGlassIcon"
-      color="foundation"
-      full-width
-      search
-      :show-clear="!!searchString"
-      placeholder="Search Users"
-      class="rounded-md border border-outline-3"
-      @update:model-value="debounceSearchUpdate"
-      @change="($event) => searchUpdateHandler($event.value)"
-    />
-
     <LayoutTable
       class="mt-8"
       :columns="[
diff --git a/packages/frontend-2/components/settings/server/General.vue b/packages/frontend-2/components/settings/server/General.vue
index 9775c73cd6..1d520b0b76 100644
--- a/packages/frontend-2/components/settings/server/General.vue
+++ b/packages/frontend-2/components/settings/server/General.vue
@@ -1,20 +1,24 @@
 <template>
   <div class="md:max-w-xl md:mx-auto">
-    <h2 class="h3 font-semibold hidden md:block">General</h2>
-    <div class="flex flex-col mt-4 divide-y">
-      <h3 class="h5 py-8">Server details</h3>
-      <form class="flex flex-col gap-2 py-8" @submit="onSubmit">
+    <h2 class="text-2xl font-semibold font-semibold hidden md:block">General</h2>
+    <p class="text-sm pt-4">Here are your general settings</p>
+
+    <hr class="my-10" />
+
+    <div class="flex flex-col space-y-6">
+      <h2 class="text-xl">Server details</h2>
+      <form class="flex flex-col gap-2" @submit="onSubmit">
         <div class="flex flex-col gap-4">
           <FormTextInput
             v-model="name"
-            label="Server's public name"
+            label="Public name"
             name="serverName"
             color="foundation"
             placeholder="Server name"
             show-label
             :show-required="true"
             :rules="requiredRule"
-            :type="'text'"
+            type="text"
           />
           <FormTextArea
             v-model="description"
@@ -39,7 +43,7 @@
             name="adminEmail"
             placeholder="Admin Email"
             show-label
-            :type="'email'"
+            type="email"
           />
           <FormTextInput
             v-model="termsOfService"
diff --git a/packages/frontend-2/components/settings/server/Invites.vue b/packages/frontend-2/components/settings/server/Invites.vue
index 0b056dcf58..1ad8bb2994 100644
--- a/packages/frontend-2/components/settings/server/Invites.vue
+++ b/packages/frontend-2/components/settings/server/Invites.vue
@@ -1,26 +1,30 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
-    <div class="flex justify-between flex-col md:flex-row gap-3 md:gap-0">
-      <h2 class="h3 font-semibold pb-8 hidden md:block">Pending Invitations</h2>
+    <h2 class="text-2xl font-semibold font-semibold hidden md:block">
+      Pending Invitations
+    </h2>
+    <p class="text-sm pt-4">And overview of all your pending invititations</p>
+
+    <hr class="my-10" />
+
+    <div class="flex">
+      <FormTextInput
+        name="search"
+        :custom-icon="MagnifyingGlassIcon"
+        color="foundation"
+        full-width
+        search
+        :show-clear="!!searchString"
+        placeholder="Search Invitations"
+        class="rounded-md border border-outline-3 md:max-w-md"
+        @update:model-value="debounceSearchUpdate"
+        @change="($event) => searchUpdateHandler($event.value)"
+      />
       <FormButton :icon-left="UserPlusIcon" @click="toggleInviteDialog">
         Invite
       </FormButton>
     </div>
 
-    <FormTextInput
-      size="lg"
-      name="search"
-      :custom-icon="MagnifyingGlassIcon"
-      color="foundation"
-      full-width
-      search
-      :show-clear="!!searchString"
-      placeholder="Search Invitations"
-      class="rounded-md border border-outline-3"
-      @update:model-value="debounceSearchUpdate"
-      @change="($event) => searchUpdateHandler($event.value)"
-    />
-
     <LayoutTable
       class="mt-8"
       :columns="[
diff --git a/packages/frontend-2/components/settings/server/Projects.vue b/packages/frontend-2/components/settings/server/Projects.vue
index 3878f3c0f4..a611bd39d7 100644
--- a/packages/frontend-2/components/settings/server/Projects.vue
+++ b/packages/frontend-2/components/settings/server/Projects.vue
@@ -1,8 +1,11 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
-    <h2 class="h3 font-semibold pb-8 hidden md:block">Projects</h2>
+    <h2 class="text-2xl font-semibold font-semibold hidden md:block">Projects</h2>
+    <p class="text-sm pt-4">And overview of all your projects</p>
+
+    <hr class="my-10" />
+
     <FormTextInput
-      size="lg"
       name="search"
       :custom-icon="MagnifyingGlassIcon"
       color="foundation"
@@ -10,10 +13,11 @@
       search
       :show-clear="!!searchString"
       placeholder="Search Projects"
-      class="rounded-md border border-outline-3"
+      class="rounded-md border border-outline-3 md:max-w-md"
       @update:model-value="debounceSearchUpdate"
       @change="($event) => searchUpdateHandler($event.value)"
     />
+
     <LayoutTable
       class="mt-8"
       :columns="[
diff --git a/packages/frontend-2/components/settings/user/Details.vue b/packages/frontend-2/components/settings/user/Details.vue
index 51878eee47..7ce7f55f94 100644
--- a/packages/frontend-2/components/settings/user/Details.vue
+++ b/packages/frontend-2/components/settings/user/Details.vue
@@ -1,29 +1,33 @@
 <template>
   <div class="flex flex-col gap-y-4">
     <h2 class="text-xl">Your details</h2>
-    <FormTextInput
-      v-model="name"
-      class="pt-2 pb-1"
-      color="foundation"
-      label="Name"
-      name="name"
-      placeholder="John Doe"
-      show-label
-      :rules="[isRequired, isStringOfLength({ maxLength: 512 })]"
-      @change="save"
-    />
-    <hr />
-    <FormTextInput
-      v-model="company"
-      color="foundation"
-      label="Company"
-      name="company"
-      placeholder="Example Ltd."
-      show-label
-      :rules="[isStringOfLength({ maxLength: 512 })]"
-      @change="save"
-    />
-    <UserProfileEditDialogAvatar :user="user" size="xxl" />
+    <div class="grid grid-cols-2">
+      <UserProfileEditDialogAvatar :user="user" size="xxl" />
+      <div>
+        <FormTextInput
+          v-model="name"
+          class="pt-2 pb-1"
+          color="foundation"
+          label="Name"
+          name="name"
+          placeholder="John Doe"
+          show-label
+          :rules="[isRequired, isStringOfLength({ maxLength: 512 })]"
+          @change="save"
+        />
+        <hr class="mt-4 mb-2" />
+        <FormTextInput
+          v-model="company"
+          color="foundation"
+          label="Company"
+          name="company"
+          placeholder="Example Ltd."
+          show-label
+          :rules="[isStringOfLength({ maxLength: 512 })]"
+          @change="save"
+        />
+      </div>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
diff --git a/packages/frontend-2/components/settings/user/Developer.vue b/packages/frontend-2/components/settings/user/Developer.vue
index 3509412fe2..b4e9202898 100644
--- a/packages/frontend-2/components/settings/user/Developer.vue
+++ b/packages/frontend-2/components/settings/user/Developer.vue
@@ -1,20 +1,30 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
     <div class="flex flex-col">
+      <h2 class="text-2xl font-semibold hidden md:block">Developer Settings</h2>
+      <p class="text-sm pt-4">You can see stuff for developers here</p>
+      <hr class="my-10" />
       <div class="flex flex-col gap-12">
-        <DeveloperSettingsSectionHeader
-          title="Developer Settings"
-          :buttons="[
-            {
-              props: {
-                target: '_blank',
-                external: true
-              },
-              onClick: goToExplorer,
-              label: 'Explore GraphQL'
-            }
-          ]"
-        />
+        <div class="flex flex-col">
+          <DeveloperSettingsSectionHeader
+            title="Explore GraphQL"
+            class="md:gap-0"
+            subheading
+            :buttons="[
+              {
+                props: {
+                  color: 'invert',
+                  target: '_blank',
+                  external: true,
+                  iconLeft: BookOpenIcon
+                },
+                onClick: goToExplorer,
+                label: 'Open docs'
+              }
+            ]"
+          />
+        </div>
+        <hr />
         <div class="flex flex-col gap-4">
           <DeveloperSettingsSectionHeader
             title="Access Tokens"
@@ -47,7 +57,6 @@
               accessed by others (e.g., public repos).
             </strong>
           </DeveloperSettingsSectionHeader>
-
           <LayoutTable
             :columns="[
               { id: 'name', header: 'Name', classes: 'col-span-3 truncate' },
diff --git a/packages/frontend-2/components/settings/user/Notifications.vue b/packages/frontend-2/components/settings/user/Notifications.vue
index 1303dcce33..eb6f17d298 100644
--- a/packages/frontend-2/components/settings/user/Notifications.vue
+++ b/packages/frontend-2/components/settings/user/Notifications.vue
@@ -2,7 +2,7 @@
   <div class="md:max-w-xl md:mx-auto">
     <h2 class="text-2xl font-semibold font-semibold hidden md:block">Notifications</h2>
     <p class="text-sm pt-4">Your notification preferences</p>
-    <hr class="pb-10 mt-10" />
+    <hr class="my-10" />
     <SettingsUserNotificationsTable class="py-8" :user="user" />
   </div>
 </template>
diff --git a/packages/frontend-2/components/settings/user/Profile.vue b/packages/frontend-2/components/settings/user/Profile.vue
index c18de399ca..4add039092 100644
--- a/packages/frontend-2/components/settings/user/Profile.vue
+++ b/packages/frontend-2/components/settings/user/Profile.vue
@@ -1,11 +1,13 @@
 <template>
   <div class="md:max-w-xl md:mx-auto">
     <h2 class="text-2xl font-semibold hidden md:block">User profile</h2>
-    <p class="text-sm py-4">Manage your profile information</p>
-    <SettingsUserDetails class="pt-10 pb-8" :user="user" />
-    <SettingsUserPassword class="pt-4 pb-8" :user="user" />
-    <hr />
-    <SettingsUserDeleteAccount class="py-6" :user="user" />
+    <p class="text-sm pt-4">Manage your profile information</p>
+    <hr class="my-10" />
+    <SettingsUserDetails :user="user" />
+    <hr class="my-10" />
+    <SettingsUserPassword :user="user" />
+    <hr class="my-10" />
+    <SettingsUserDeleteAccount :user="user" />
   </div>
 </template>
 <script setup lang="ts">
diff --git a/packages/frontend-2/pages/developer-settings.vue b/packages/frontend-2/pages/developer-settings.vue
deleted file mode 100644
index 189bffe038..0000000000
--- a/packages/frontend-2/pages/developer-settings.vue
+++ /dev/null
@@ -1,381 +0,0 @@
-<template>
-  <div>
-    <Portal to="navigation">
-      <HeaderNavLink
-        to="/developer-settings/"
-        name="Developer Settings"
-      ></HeaderNavLink>
-    </Portal>
-    <div class="flex flex-col gap-16">
-      <DeveloperSettingsSectionHeader
-        title="Developer Settings"
-        :buttons="[
-          {
-            props: {
-              target: '_blank',
-              external: true
-            },
-            onClick: goToExplorer,
-            label: 'Explore GraphQL'
-          }
-        ]"
-      >
-        Heads up! The sections below are intended for developers.
-      </DeveloperSettingsSectionHeader>
-      <div class="flex flex-col gap-4">
-        <DeveloperSettingsSectionHeader
-          title="Access Tokens"
-          subheading
-          :buttons="[
-            {
-              props: {
-                color: 'invert',
-                to: 'https://speckle.guide/dev/tokens.html',
-                iconLeft: BookOpenIcon,
-                target: '_blank',
-                external: true
-              },
-              label: 'Open Docs'
-            },
-            {
-              props: {
-                iconLeft: PlusIcon,
-                onClick: openCreateTokenDialog
-              },
-              label: 'New Token'
-            }
-          ]"
-        >
-          Personal Access Tokens can be used to access the Speckle API on this server;
-          they function like ordinary OAuth access tokens. Use them in your scripts or
-          apps!
-          <strong>
-            Treat them like a password: do not post them anywhere where they could be
-            accessed by others (e.g., public repos).
-          </strong>
-        </DeveloperSettingsSectionHeader>
-
-        <LayoutTable
-          :columns="[
-            { id: 'name', header: 'Name', classes: 'col-span-3 truncate' },
-            { id: 'id', header: 'ID', classes: 'col-span-2' },
-            {
-              id: 'scope',
-              header: 'Scope',
-              classes: 'col-span-7 whitespace-break-spaces text-xs'
-            }
-          ]"
-          :items="tokens"
-          :buttons="[
-            {
-              icon: TrashIcon,
-              label: 'Delete',
-              action: openDeleteDialog,
-              textColor: 'danger'
-            }
-          ]"
-        >
-          <template #name="{ item }">
-            {{ item.name }}
-          </template>
-          <template #id="{ item }">
-            <span class="rounded text-xs font-mono bg-foundation-page p-2">
-              {{ item.id }}
-            </span>
-          </template>
-
-          <template #scope="{ item }">
-            <div>
-              {{
-                item.scopes
-                  ? item.scopes
-                      .map(
-                        (event, index, array) =>
-                          `"${event}"${index < array.length - 1 ? ',' : ''}`
-                      )
-                      .join(' ')
-                  : 'No scopes available'
-              }}
-            </div>
-          </template>
-        </LayoutTable>
-      </div>
-
-      <div class="flex flex-col gap-4">
-        <DeveloperSettingsSectionHeader
-          subheading
-          title="Applications"
-          :buttons="[
-            {
-              props: {
-                color: 'invert',
-                to: 'https://speckle.guide/dev/apps.html',
-                target: '_blank',
-                external: true,
-                iconLeft: BookOpenIcon
-              },
-              label: 'Open Docs'
-            },
-            {
-              props: {
-                onClick: openCreateApplicationDialog,
-                iconLeft: PlusIcon
-              },
-              label: 'New Application'
-            }
-          ]"
-        >
-          Register and manage third-party Speckle Apps that, once authorised by a user
-          on this server, can act on their behalf.
-        </DeveloperSettingsSectionHeader>
-        <LayoutTable
-          :columns="[
-            { id: 'name', header: 'Name', classes: 'col-span-3' },
-            { id: 'id', header: 'ID', classes: 'col-span-2' },
-            {
-              id: 'scope',
-              header: 'Scope',
-              classes: 'col-span-7 whitespace-break-spaces text-xs'
-            }
-          ]"
-          :items="applications"
-          :buttons="[
-            {
-              icon: LockOpenIcon,
-              label: 'Reveal Secret',
-              action: openRevealSecretDialog,
-              textColor: 'primary'
-            },
-            {
-              icon: PencilIcon,
-              label: 'Edit',
-              action: openEditApplicationDialog,
-              textColor: 'primary'
-            },
-            {
-              icon: TrashIcon,
-              label: 'Delete',
-              action: openDeleteDialog,
-              textColor: 'danger'
-            }
-          ]"
-        >
-          <template #name="{ item }">
-            {{ item.name }}
-          </template>
-          <template #id="{ item }">
-            <span class="rounded text-xs font-mono bg-foundation-page p-2">
-              {{ item.id }}
-            </span>
-          </template>
-
-          <template #scope="{ item }">
-            <div>
-              {{
-                item.scopes
-                  .map(
-                    (event, index, array) =>
-                      `"${event.name}"${index < array.length - 1 ? ',' : ''}`
-                  )
-                  .join(' ')
-              }}
-            </div>
-          </template>
-        </LayoutTable>
-      </div>
-
-      <div class="flex flex-col gap-4">
-        <DeveloperSettingsSectionHeader
-          subheading
-          title="Authorized Apps"
-          :buttons="[
-            {
-              props: {
-                color: 'invert',
-                to: 'https://speckle.guide/dev/apps.html',
-                target: '_blank',
-                external: true,
-                iconLeft: BookOpenIcon
-              },
-              label: 'Open Docs'
-            }
-          ]"
-        >
-          Here you can review the apps that you have granted access to. If something
-          looks suspicious, revoke the access.
-        </DeveloperSettingsSectionHeader>
-        <LayoutTable
-          :columns="[
-            { id: 'name', header: 'Name', classes: 'col-span-3 ' },
-            { id: 'author', header: 'Author', classes: 'col-span-3 ' },
-            { id: 'description', header: 'Description', classes: 'col-span-6 !pt-1.5' }
-          ]"
-          :items="authorizedApps"
-          :buttons="[
-            {
-              icon: XMarkIcon,
-              label: 'Revoke Access',
-              action: openDeleteDialog,
-              textColor: 'danger'
-            }
-          ]"
-          row-items-align="stretch"
-        >
-          <template #name="{ item }">
-            {{ item.name }}
-          </template>
-          <template #author="{ item }">
-            <div class="flex space-x-2 items-center">
-              <template v-if="item.author">
-                <UserAvatar :user="item.author" />
-                <span>{{ item.author.name }}</span>
-              </template>
-              <template v-else>
-                <HeaderLogoBlock minimal no-link />
-                <span>Speckle</span>
-              </template>
-            </div>
-          </template>
-          <template #description="{ item }">
-            {{ item.description }}
-          </template>
-        </LayoutTable>
-      </div>
-    </div>
-
-    <DeveloperSettingsCreateTokenDialog
-      v-model:open="showCreateTokenDialog"
-      @token-created="(token) => handleTokenCreated(token)"
-    />
-    <DeveloperSettingsDeleteDialog
-      v-model:open="showDeleteDialog"
-      :item="itemToModify"
-    />
-    <DeveloperSettingsCreateEditApplicationDialog
-      v-model:open="showCreateEditApplicationDialog"
-      :application="(itemToModify as ApplicationItem)"
-      @application-created="handleApplicationCreated"
-    />
-    <DeveloperSettingsRevealSecretDialog
-      v-model:open="showRevealSecretDialog"
-      :application="itemToModify && 'secret' in itemToModify ? itemToModify : null"
-    />
-    <DeveloperSettingsCreateTokenSuccessDialog
-      v-model:open="showCreateTokenSuccessDialog"
-      :token="tokenSuccess"
-    />
-    <DeveloperSettingsCreateApplicationSuccessDialog
-      v-model:open="showCreateApplicationSuccessDialog"
-      :application="(itemToModify as ApplicationItem)"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  PlusIcon,
-  BookOpenIcon,
-  TrashIcon,
-  PencilIcon,
-  LockOpenIcon,
-  XMarkIcon
-} from '@heroicons/vue/24/outline'
-import type {
-  TokenItem,
-  ApplicationItem,
-  AuthorizedAppItem
-} from '~~/lib/developer-settings/helpers/types'
-import {
-  developerSettingsAccessTokensQuery,
-  developerSettingsApplicationsQuery,
-  developerSettingsAuthorizedAppsQuery
-} from '~~/lib/developer-settings/graphql/queries'
-import { useQuery } from '@vue/apollo-composable'
-
-useHead({
-  title: 'Developer Settings'
-})
-
-const apiOrigin = useApiOrigin()
-
-const { result: tokensResult, refetch: refetchTokens } = useQuery(
-  developerSettingsAccessTokensQuery
-)
-const { result: applicationsResult, refetch: refetchApplications } = useQuery(
-  developerSettingsApplicationsQuery
-)
-const { result: authorizedAppsResult } = useQuery(developerSettingsAuthorizedAppsQuery)
-
-const itemToModify = ref<TokenItem | ApplicationItem | AuthorizedAppItem | null>(null)
-const tokenSuccess = ref('')
-const showCreateTokenDialog = ref(false)
-const showCreateTokenSuccessDialog = ref(false)
-const showCreateApplicationSuccessDialog = ref(false)
-const showDeleteDialog = ref(false)
-const showCreateEditApplicationDialog = ref(false)
-const showRevealSecretDialog = ref(false)
-
-const tokens = computed<TokenItem[]>(() => {
-  return (
-    tokensResult.value?.activeUser?.apiTokens?.filter(
-      (token): token is TokenItem => token !== null
-    ) || []
-  )
-})
-
-const applications = computed<ApplicationItem[]>(() => {
-  return applicationsResult.value?.activeUser?.createdApps || []
-})
-
-const authorizedApps = computed(() =>
-  (authorizedAppsResult.value?.activeUser?.authorizedApps || []).filter(
-    (app) => app.id !== 'spklwebapp'
-  )
-)
-
-const openDeleteDialog = (item: TokenItem | ApplicationItem | AuthorizedAppItem) => {
-  itemToModify.value = item
-  showDeleteDialog.value = true
-}
-
-const openCreateApplicationDialog = () => {
-  itemToModify.value = null
-  showCreateEditApplicationDialog.value = true
-}
-
-const openCreateTokenDialog = () => {
-  showCreateTokenDialog.value = true
-}
-
-const openEditApplicationDialog = (item: ApplicationItem) => {
-  itemToModify.value = item
-  showCreateEditApplicationDialog.value = true
-}
-
-const openRevealSecretDialog = (item: ApplicationItem) => {
-  itemToModify.value = item
-  showRevealSecretDialog.value = true
-}
-
-const handleTokenCreated = (token: string) => {
-  refetchTokens()
-  tokenSuccess.value = token
-  showCreateTokenSuccessDialog.value = true
-}
-
-const handleApplicationCreated = (applicationId: string) => {
-  refetchApplications()?.then(() => {
-    const newApplication = applications.value.find((app) => app.id === applicationId)
-
-    if (newApplication) {
-      itemToModify.value = newApplication
-      showCreateApplicationSuccessDialog.value = true
-    }
-  })
-}
-
-const goToExplorer = () => {
-  if (!import.meta.client) return
-  window.location.href = new URL('/explorer', apiOrigin).toString()
-}
-</script>
diff --git a/packages/frontend-2/pages/settings/index.vue b/packages/frontend-2/pages/settings/index.vue
new file mode 100644
index 0000000000..7b8b46cb04
--- /dev/null
+++ b/packages/frontend-2/pages/settings/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

From 074f980dada41986b32e2b6c2a62786c132e3c33 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 4 Jul 2024 14:23:28 +0200
Subject: [PATCH 24/77] Added version control section

---
 .../CreateEditApplicationDialog.vue           |  3 +
 .../developer-settings/CreateTokenDialog.vue  |  2 +
 .../frontend-2/components/settings/Dialog.vue |  2 +-
 .../components/settings/server/General.vue    |  2 +
 .../components/settings/server/Version.vue    | 78 +++++++++++++++++++
 .../settings/server/VersionControl.vue        | 14 ----
 .../components/settings/user/Details.vue      |  6 +-
 7 files changed, 90 insertions(+), 17 deletions(-)
 create mode 100644 packages/frontend-2/components/settings/server/Version.vue
 delete mode 100644 packages/frontend-2/components/settings/server/VersionControl.vue

diff --git a/packages/frontend-2/components/developer-settings/CreateEditApplicationDialog.vue b/packages/frontend-2/components/developer-settings/CreateEditApplicationDialog.vue
index 89f79b51bf..7de4efad5e 100644
--- a/packages/frontend-2/components/developer-settings/CreateEditApplicationDialog.vue
+++ b/packages/frontend-2/components/developer-settings/CreateEditApplicationDialog.vue
@@ -15,6 +15,7 @@
           label="Name"
           help="The name of your app"
           name="hookName"
+          color="foundation"
           show-required
           :rules="[isRequired]"
           show-label
@@ -41,6 +42,7 @@
           help="After authentication, the users will be redirected (together with an access token) to this URL."
           show-required
           name="redirectUrl"
+          color="foundation"
           show-label
           :rules="[isRequired, isUrl]"
           type="text"
@@ -50,6 +52,7 @@
           label="Description"
           help="A short description of your application."
           name="description"
+          color="foundation"
           show-label
           type="text"
         />
diff --git a/packages/frontend-2/components/developer-settings/CreateTokenDialog.vue b/packages/frontend-2/components/developer-settings/CreateTokenDialog.vue
index a187f22bef..c08ab00d7a 100644
--- a/packages/frontend-2/components/developer-settings/CreateTokenDialog.vue
+++ b/packages/frontend-2/components/developer-settings/CreateTokenDialog.vue
@@ -13,6 +13,8 @@
           label="Name"
           help="A name to remember this token by. For example, the name of the script or application you're planning to use it in!"
           name="hookName"
+          placeholder="Token name"
+          color="foundation"
           :rules="[isRequired]"
           show-required
           show-label
diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 0d8a3b9355..3883e90f8e 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -32,7 +32,7 @@
       </LayoutSidebar>
       <main
         v-if="selectedMenuItem"
-        class="simple-scrollbar overflow-y-scroll flex-1 bg-foundation p-6 py-8 md:p-4 md:py-12"
+        class="simple-scrollbar overflow-y-scroll flex-1 bg-foundation px-6 py-8 md:px-4 md:py-12"
       >
         <div class="flex md:hidden items-center">
           <ChevronLeftIcon class="w-6 h-6" @click="setSelectedMenuItem(null)" />
diff --git a/packages/frontend-2/components/settings/server/General.vue b/packages/frontend-2/components/settings/server/General.vue
index 1d520b0b76..7267cfdb8e 100644
--- a/packages/frontend-2/components/settings/server/General.vue
+++ b/packages/frontend-2/components/settings/server/General.vue
@@ -72,6 +72,8 @@
         </div>
       </form>
     </div>
+    <hr class="my-10" />
+    <SettingsServerVersion />
   </div>
 </template>
 
diff --git a/packages/frontend-2/components/settings/server/Version.vue b/packages/frontend-2/components/settings/server/Version.vue
new file mode 100644
index 0000000000..a5fc497cf8
--- /dev/null
+++ b/packages/frontend-2/components/settings/server/Version.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="flex flex-col space-y-6">
+    <h2 class="text-xl">Speckle version</h2>
+    <div class="flex items-center">
+      <div class="w-[50%]">
+        <p class="text-sm">
+          <span class="font-semibold">Current version:</span>
+          {{ currentVersion }}
+        </p>
+        <p v-if="!isLatestVersion" class="text-sm pt-2">New version available</p>
+      </div>
+      <div class="flex justify-end w-[50%]">
+        <FormButton
+          color="secondary"
+          :disabled="isLatestVersion"
+          @click="openGithubReleasePage"
+        >
+          {{ isLatestVersion ? 'You are up to date' : `Update to ${latestVersion}` }}
+        </FormButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { serverManagementDataQuery } from '~~/lib/server-management/graphql/queries'
+import { useQuery } from '@vue/apollo-composable'
+import { ref, computed } from 'vue'
+
+interface GithubRelease {
+  url: string
+  assets_url: string
+  upload_url: string
+  html_url: string
+  id: number
+  node_id: string
+  tag_name: string
+}
+
+const logger = useLogger()
+const { result } = useQuery(serverManagementDataQuery)
+
+const latestVersion = ref<string | null>(null)
+
+const currentVersion = computed(() => result.value?.serverInfo.version)
+const isLatestVersion = computed(() => {
+  return (
+    !latestVersion.value ||
+    currentVersion.value === latestVersion.value ||
+    currentVersion.value === 'dev' ||
+    currentVersion.value?.includes('alpha') ||
+    currentVersion.value === 'N/A'
+  )
+})
+
+const openGithubReleasePage = () => {
+  window.open('https://github.com/specklesystems/speckle-server/releases', '_blank')
+}
+
+async function getLatestVersion(): Promise<string | null> {
+  try {
+    const response: Response = await fetch(
+      'https://api.github.com/repos/specklesystems/speckle-server/releases/latest'
+    )
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    } else {
+      const data = (await response.json()) as GithubRelease
+      return data.tag_name
+    }
+  } catch (err) {
+    logger.error(err)
+    return null
+  }
+}
+
+latestVersion.value = await getLatestVersion()
+</script>
diff --git a/packages/frontend-2/components/settings/server/VersionControl.vue b/packages/frontend-2/components/settings/server/VersionControl.vue
deleted file mode 100644
index fa97273e2f..0000000000
--- a/packages/frontend-2/components/settings/server/VersionControl.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <h2 class="h5">Speckle version</h2>
-  <div class="grid grid-cols-2">
-    <div>
-      <p class="text-sm font-semibold pb-2">2.19.1-alpha.116475</p>
-      <p class="text-sm">There’s a newer version available</p>
-    </div>
-    <div class="flex justify-end">
-      <FormButton color="secondary">Update to 2.2.0</FormButton>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
diff --git a/packages/frontend-2/components/settings/user/Details.vue b/packages/frontend-2/components/settings/user/Details.vue
index 7ce7f55f94..f462c75403 100644
--- a/packages/frontend-2/components/settings/user/Details.vue
+++ b/packages/frontend-2/components/settings/user/Details.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="flex flex-col gap-y-4">
     <h2 class="text-xl">Your details</h2>
-    <div class="grid grid-cols-2">
-      <UserProfileEditDialogAvatar :user="user" size="xxl" />
+    <div class="grid grid-cols-2 pt-4">
+      <div class="flex h-full items-center justify-center">
+        <UserProfileEditDialogAvatar :user="user" size="xxl" />
+      </div>
       <div>
         <FormTextInput
           v-model="name"

From 166a8d397772ed1de71ba786513139947513b454 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 4 Jul 2024 14:26:08 +0200
Subject: [PATCH 25/77] Clean up projects table layout

---
 .../components/settings/server/Projects.vue   | 21 ++++++-------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/packages/frontend-2/components/settings/server/Projects.vue b/packages/frontend-2/components/settings/server/Projects.vue
index a611bd39d7..05f89468c5 100644
--- a/packages/frontend-2/components/settings/server/Projects.vue
+++ b/packages/frontend-2/components/settings/server/Projects.vue
@@ -25,21 +25,12 @@
         { id: 'type', header: 'Type', classes: 'col-span-1' },
         { id: 'created', header: 'Created', classes: 'col-span-2' },
         { id: 'modified', header: 'Modified', classes: 'col-span-2' },
-        { id: 'models', header: 'Models', classes: 'col-span-1 text-right' },
-        { id: 'versions', header: 'Versions', classes: 'col-span-1 text-right' },
+        { id: 'models', header: 'Models', classes: 'col-span-1' },
+        { id: 'versions', header: 'Versions', classes: 'col-span-1' },
         { id: 'contributors', header: 'Contributors', classes: 'col-span-2' }
       ]"
       :items="projects"
       :buttons="[{ icon: TrashIcon, label: 'Delete', action: openProjectDeleteDialog }]"
-      :column-classes="{
-        name: 'col-span-3 truncate',
-        type: 'col-span-1',
-        created: 'col-span-2',
-        modified: 'col-span-2',
-        models: 'col-span-1 text-right',
-        versions: 'col-span-1 text-right',
-        contributors: 'col-span-2'
-      }"
       :on-row-click="handleProjectClick"
     >
       <template #name="{ item }">
@@ -53,25 +44,25 @@
       </template>
 
       <template #created="{ item }">
-        <div class="font-mono text-xs">
+        <div class="text-xs">
           {{ isProject(item) ? new Date(item.createdAt).toLocaleString('en-GB') : '' }}
         </div>
       </template>
 
       <template #modified="{ item }">
-        <div class="font-mono text-xs">
+        <div class="text-xs">
           {{ isProject(item) ? new Date(item.updatedAt).toLocaleString('en-GB') : '' }}
         </div>
       </template>
 
       <template #models="{ item }">
-        <div class="font-mono text-xs">
+        <div class="text-xs">
           {{ isProject(item) ? item.models.totalCount : '' }}
         </div>
       </template>
 
       <template #versions="{ item }">
-        <div class="font-mono text-xs">
+        <div class="text-xs">
           {{ isProject(item) ? item.versions.totalCount : '' }}
         </div>
       </template>

From 3e3e0e4d064c7835c9672670d436b92071301d53 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Fri, 5 Jul 2024 10:04:27 +0200
Subject: [PATCH 26/77] Improved mobile styling

---
 .../frontend-2/components/settings/Dialog.vue | 63 ++++++++++---------
 .../settings/server/ActiveUsers.vue           | 18 ++----
 .../components/settings/server/General.vue    |  6 +-
 .../{Invites.vue => PendingInvitations.vue}   | 18 ++----
 .../components/settings/server/Projects.vue   | 14 +----
 .../settings/user/DeleteAccount.vue           | 11 ++--
 .../components/settings/user/Details.vue      |  4 +-
 .../components/settings/user/Developer.vue    |  6 +-
 .../settings/user/Notifications.vue           |  4 +-
 .../components/settings/user/Profile.vue      | 12 ++--
 .../src/components/layout/Dialog.vue          |  4 +-
 11 files changed, 66 insertions(+), 94 deletions(-)
 rename packages/frontend-2/components/settings/server/{Invites.vue => PendingInvitations.vue} (95%)

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 3883e90f8e..bdf14d13fd 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -5,40 +5,43 @@
         v-if="!isMobile || !selectedMenuItem"
         class="w-full md:w-56 lg:w-60 p-4 pt-6 bg-foundation-page md:border-r md:border-outline-3"
       >
-        <LayoutSidebarMenu>
-          <LayoutSidebarMenuGroup title="Account Settings">
-            <template #title-icon>
-              <UserIcon />
-            </template>
-            <LayoutSidebarMenuGroupItem
-              v-for="(sidebarMenuItem, index) in sidebarConfig.user"
-              :key="`sidebarUserItem-${index}`"
-              :label="sidebarMenuItem.title"
-              @click="setSelectedMenuItem(sidebarMenuItem.path)"
-            />
-          </LayoutSidebarMenuGroup>
-          <LayoutSidebarMenuGroup title="Server Settings">
-            <template #title-icon>
-              <ServerStackIcon />
-            </template>
-            <LayoutSidebarMenuGroupItem
-              v-for="(sidebarMenuItem, index) in sidebarConfig.server"
-              :key="`sidebarServerItem-${index}`"
-              :label="sidebarMenuItem.title"
-              @click="setSelectedMenuItem(sidebarMenuItem.path)"
-            />
-          </LayoutSidebarMenuGroup>
-        </LayoutSidebarMenu>
+        <h1 class="text-xl pl-1 pb-6 font-semibold md:hidden">Settings</h1>
+        <div class="flex-1">
+          <LayoutSidebarMenu>
+            <LayoutSidebarMenuGroup title="Account Settings">
+              <template #title-icon>
+                <UserIcon />
+              </template>
+              <LayoutSidebarMenuGroupItem
+                v-for="(sidebarMenuItem, index) in sidebarConfig.user"
+                :key="`sidebarUserItem-${index}`"
+                :label="sidebarMenuItem.title"
+                @click="setSelectedMenuItem(sidebarMenuItem.path)"
+              />
+            </LayoutSidebarMenuGroup>
+            <LayoutSidebarMenuGroup title="Server Settings">
+              <template #title-icon>
+                <ServerStackIcon />
+              </template>
+              <LayoutSidebarMenuGroupItem
+                v-for="(sidebarMenuItem, index) in sidebarConfig.server"
+                :key="`sidebarServerItem-${index}`"
+                :label="sidebarMenuItem.title"
+                @click="setSelectedMenuItem(sidebarMenuItem.path)"
+              />
+            </LayoutSidebarMenuGroup>
+          </LayoutSidebarMenu>
+        </div>
       </LayoutSidebar>
       <main
         v-if="selectedMenuItem"
-        class="simple-scrollbar overflow-y-scroll flex-1 bg-foundation px-6 py-8 md:px-4 md:py-12"
+        class="simple-scrollbar overflow-y-scroll flex-1 bg-foundation p-6 md:px-4 md:py-12"
       >
         <div class="flex md:hidden items-center">
-          <ChevronLeftIcon class="w-6 h-6" @click="setSelectedMenuItem(null)" />
-          <h1 class="h4 font-semibold ml-4">{{ selectedMenuItem.title }}</h1>
+          <ChevronLeftIcon class="w-5 h-5 -ml-2" @click="setSelectedMenuItem(null)" />
+          <h2 class="text-xl font-semibold ml-4">{{ selectedMenuItem?.title }}</h2>
         </div>
-        <component :is="selectedMenuItem.component" />
+        <component :is="selectedMenuItem?.component" />
       </main>
     </div>
   </LayoutDialog>
@@ -53,7 +56,7 @@ import SettingsUserDeveloper from './user/Developer.vue'
 import SettingsServerGeneral from './server/General.vue'
 import SettingsServerProjects from './server/Projects.vue'
 import SettingsServerActiveUsers from './server/ActiveUsers.vue'
-import SettingsServerInvites from './server/Invites.vue'
+import SettingsServerPendingInvitations from './server/PendingInvitations.vue'
 import { useBreakpoints } from '@vueuse/core'
 import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
 import { UserIcon, ServerStackIcon } from '@heroicons/vue/24/outline'
@@ -144,7 +147,7 @@ const sidebarConfig: SidebarConfig = {
     },
     pendingInvitations: {
       title: 'Pending Invitations',
-      component: SettingsServerInvites,
+      component: SettingsServerPendingInvitations,
       path: '/settings/server/pending-invitations'
     }
   }
diff --git a/packages/frontend-2/components/settings/server/ActiveUsers.vue b/packages/frontend-2/components/settings/server/ActiveUsers.vue
index ca7eda114b..0194c3316d 100644
--- a/packages/frontend-2/components/settings/server/ActiveUsers.vue
+++ b/packages/frontend-2/components/settings/server/ActiveUsers.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
     <h2 class="text-2xl font-semibold font-semibold hidden md:block">Active Users</h2>
-    <p class="text-sm pt-4">And overview of all your active users</p>
+    <p class="text-sm pt-6 md:pt-4">And overview of all your active users</p>
 
-    <hr class="my-10" />
+    <hr class="my-6 md:my-10" />
 
-    <div class="flex">
+    <div class="flex flex-col-reverse md:flex-row">
       <FormTextInput
         name="search"
         :custom-icon="MagnifyingGlassIcon"
@@ -14,7 +14,7 @@
         search
         :show-clear="!!searchString"
         placeholder="Search Users"
-        class="rounded-md border border-outline-3 md:max-w-md"
+        class="rounded-md border border-outline-3 md:max-w-md mt-6 md:mt-0"
         @update:model-value="debounceSearchUpdate"
         @change="($event) => searchUpdateHandler($event.value)"
       />
@@ -24,7 +24,7 @@
     </div>
 
     <LayoutTable
-      class="mt-8"
+      class="mt-6 md:mt-8"
       :columns="[
         { id: 'name', header: 'Name', classes: 'col-span-3 truncate' },
         { id: 'email', header: 'Email', classes: 'col-span-3 truncate' },
@@ -124,14 +124,6 @@ import {
 } from '@heroicons/vue/24/outline'
 import { useServerInfo } from '~~/lib/core/composables/server'
 
-useHead({
-  title: 'Active Users'
-})
-
-definePageMeta({
-  middleware: ['admin']
-})
-
 const logger = useLogger()
 const { activeUser } = useActiveUser()
 const { isGuestMode } = useServerInfo()
diff --git a/packages/frontend-2/components/settings/server/General.vue b/packages/frontend-2/components/settings/server/General.vue
index 7267cfdb8e..f7d8a44514 100644
--- a/packages/frontend-2/components/settings/server/General.vue
+++ b/packages/frontend-2/components/settings/server/General.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="md:max-w-xl md:mx-auto">
     <h2 class="text-2xl font-semibold font-semibold hidden md:block">General</h2>
-    <p class="text-sm pt-4">Here are your general settings</p>
+    <p class="text-sm pt-6 md:pt-4">Here are your general settings</p>
 
-    <hr class="my-10" />
+    <hr class="my-6 md:my-10" />
 
     <div class="flex flex-col space-y-6">
       <h2 class="text-xl">Server details</h2>
@@ -72,7 +72,7 @@
         </div>
       </form>
     </div>
-    <hr class="my-10" />
+    <hr class="my-6 md:my-10" />
     <SettingsServerVersion />
   </div>
 </template>
diff --git a/packages/frontend-2/components/settings/server/Invites.vue b/packages/frontend-2/components/settings/server/PendingInvitations.vue
similarity index 95%
rename from packages/frontend-2/components/settings/server/Invites.vue
rename to packages/frontend-2/components/settings/server/PendingInvitations.vue
index 1ad8bb2994..04380451f7 100644
--- a/packages/frontend-2/components/settings/server/Invites.vue
+++ b/packages/frontend-2/components/settings/server/PendingInvitations.vue
@@ -3,11 +3,11 @@
     <h2 class="text-2xl font-semibold font-semibold hidden md:block">
       Pending Invitations
     </h2>
-    <p class="text-sm pt-4">And overview of all your pending invititations</p>
+    <p class="text-sm pt-6 md:pt-4">And overview of all your pending invititations</p>
 
-    <hr class="my-10" />
+    <hr class="my-6 md:my-10" />
 
-    <div class="flex">
+    <div class="flex flex-col-reverse md:flex-row">
       <FormTextInput
         name="search"
         :custom-icon="MagnifyingGlassIcon"
@@ -16,7 +16,7 @@
         search
         :show-clear="!!searchString"
         placeholder="Search Invitations"
-        class="rounded-md border border-outline-3 md:max-w-md"
+        class="rounded-md border border-outline-3 md:max-w-md mt-6 md:mt-0"
         @update:model-value="debounceSearchUpdate"
         @change="($event) => searchUpdateHandler($event.value)"
       />
@@ -26,7 +26,7 @@
     </div>
 
     <LayoutTable
-      class="mt-8"
+      class="mt-6 md:mt-8"
       :columns="[
         { id: 'email', header: 'Email', classes: 'col-span-5 truncate' },
         { id: 'invitedBy', header: 'Invited By', classes: 'col-span-4' },
@@ -104,14 +104,6 @@ import {
   getFirstErrorMessage
 } from '~~/lib/common/helpers/graphql'
 
-useHead({
-  title: 'Pending Invitations'
-})
-
-definePageMeta({
-  middleware: ['admin']
-})
-
 const logger = useLogger()
 const { triggerNotification } = useGlobalToast()
 const { mutate: resendInvitationMutation } = useMutation(adminResendInviteMutation)
diff --git a/packages/frontend-2/components/settings/server/Projects.vue b/packages/frontend-2/components/settings/server/Projects.vue
index 05f89468c5..9fd4913a53 100644
--- a/packages/frontend-2/components/settings/server/Projects.vue
+++ b/packages/frontend-2/components/settings/server/Projects.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
     <h2 class="text-2xl font-semibold font-semibold hidden md:block">Projects</h2>
-    <p class="text-sm pt-4">And overview of all your projects</p>
+    <p class="text-sm pt-6 md:pt-4">And overview of all your projects</p>
 
-    <hr class="my-10" />
+    <hr class="my-6 md:my-10" />
 
     <FormTextInput
       name="search"
@@ -19,7 +19,7 @@
     />
 
     <LayoutTable
-      class="mt-8"
+      class="mt-6 md:mt-8"
       :columns="[
         { id: 'name', header: 'Name', classes: 'col-span-3 truncate' },
         { id: 'type', header: 'Type', classes: 'col-span-1' },
@@ -107,14 +107,6 @@ import { isProject } from '~~/lib/server-management/helpers/utils'
 const logger = useLogger()
 const router = useRouter()
 
-useHead({
-  title: 'Projects'
-})
-
-definePageMeta({
-  middleware: ['admin']
-})
-
 const projectToModify = ref<ProjectItem | null>(null)
 const searchString = ref('')
 const showProjectDeleteDialog = ref(false)
diff --git a/packages/frontend-2/components/settings/user/DeleteAccount.vue b/packages/frontend-2/components/settings/user/DeleteAccount.vue
index 2abe708037..a9d2b45e52 100644
--- a/packages/frontend-2/components/settings/user/DeleteAccount.vue
+++ b/packages/frontend-2/components/settings/user/DeleteAccount.vue
@@ -3,13 +3,10 @@
     <SettingsUserDeleteAccountDialog v-model:open="isOpen" :user="user" />
     <div class="flex flex-col space-y-6">
       <h2 class="text-xl">Delete account</h2>
-      <CommonAlert color="info" size="sm" hide-icon>
-        <template #description>
-          We will delete all projects where you are the sole owner, and any associated
-          data. We will ask you to type in your email address and press the delete
-          button.
-        </template>
-      </CommonAlert>
+      <div class="rounded border bg-foundation-page border-outline-3 text-sm py-4 px-6">
+        We will delete all projects where you are the sole owner, and any associated
+        data. We will ask you to type in your email address and press the delete button.
+      </div>
       <div>
         <FormButton color="default" @click="toggleModal">Delete account</FormButton>
       </div>
diff --git a/packages/frontend-2/components/settings/user/Details.vue b/packages/frontend-2/components/settings/user/Details.vue
index f462c75403..a66b21b2eb 100644
--- a/packages/frontend-2/components/settings/user/Details.vue
+++ b/packages/frontend-2/components/settings/user/Details.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="flex flex-col gap-y-4">
     <h2 class="text-xl">Your details</h2>
-    <div class="grid grid-cols-2 pt-4">
+    <div class="grid md:grid-cols-2 pt-4">
       <div class="flex h-full items-center justify-center">
         <UserProfileEditDialogAvatar :user="user" size="xxl" />
       </div>
-      <div>
+      <div class="pt-6 md:pt-0">
         <FormTextInput
           v-model="name"
           class="pt-2 pb-1"
diff --git a/packages/frontend-2/components/settings/user/Developer.vue b/packages/frontend-2/components/settings/user/Developer.vue
index b4e9202898..5365ce4655 100644
--- a/packages/frontend-2/components/settings/user/Developer.vue
+++ b/packages/frontend-2/components/settings/user/Developer.vue
@@ -2,9 +2,9 @@
   <div class="md:max-w-5xl md:mx-auto">
     <div class="flex flex-col">
       <h2 class="text-2xl font-semibold hidden md:block">Developer Settings</h2>
-      <p class="text-sm pt-4">You can see stuff for developers here</p>
-      <hr class="my-10" />
-      <div class="flex flex-col gap-12">
+      <p class="text-sm pt-6 md:pt-4">You can see stuff for developers here</p>
+      <hr class="my-6 md:my-10" />
+      <div class="flex flex-col gap-6 md:gap-12">
         <div class="flex flex-col">
           <DeveloperSettingsSectionHeader
             title="Explore GraphQL"
diff --git a/packages/frontend-2/components/settings/user/Notifications.vue b/packages/frontend-2/components/settings/user/Notifications.vue
index eb6f17d298..a5e38bda1f 100644
--- a/packages/frontend-2/components/settings/user/Notifications.vue
+++ b/packages/frontend-2/components/settings/user/Notifications.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="md:max-w-xl md:mx-auto">
     <h2 class="text-2xl font-semibold font-semibold hidden md:block">Notifications</h2>
-    <p class="text-sm pt-4">Your notification preferences</p>
-    <hr class="my-10" />
+    <p class="text-sm pt-6 md:pt-4">Your notification preferences</p>
+    <hr class="my-6 md:my-10" />
     <SettingsUserNotificationsTable class="py-8" :user="user" />
   </div>
 </template>
diff --git a/packages/frontend-2/components/settings/user/Profile.vue b/packages/frontend-2/components/settings/user/Profile.vue
index 4add039092..666701589c 100644
--- a/packages/frontend-2/components/settings/user/Profile.vue
+++ b/packages/frontend-2/components/settings/user/Profile.vue
@@ -1,21 +1,17 @@
 <template>
   <div class="md:max-w-xl md:mx-auto">
     <h2 class="text-2xl font-semibold hidden md:block">User profile</h2>
-    <p class="text-sm pt-4">Manage your profile information</p>
-    <hr class="my-10" />
+    <p class="text-sm pt-6 md:pt-4">Manage your profile information</p>
+    <hr class="my-6 md:my-10" />
     <SettingsUserDetails :user="user" />
-    <hr class="my-10" />
+    <hr class="my-6 md:my-10" />
     <SettingsUserPassword :user="user" />
-    <hr class="my-10" />
+    <hr class="my-6 md:my-10" />
     <SettingsUserDeleteAccount :user="user" />
   </div>
 </template>
 <script setup lang="ts">
 import { useActiveUser } from '~/lib/auth/composables/activeUser'
 
-useHead({
-  title: 'Settings - User Profile'
-})
-
 const { activeUser: user } = useActiveUser()
 </script>
diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue
index eeb8ffb5b9..5982f40776 100644
--- a/packages/ui-components/src/components/layout/Dialog.vue
+++ b/packages/ui-components/src/components/layout/Dialog.vue
@@ -40,7 +40,7 @@
               <div :class="scrolledFromTop && 'relative z-20 shadow-lg'">
                 <div
                   v-if="hasTitle"
-                  class="flex items-center justify-start rounded-t-lg shrink-0 min-h-[2rem] sm:min-h-[4rem] px-6 py-4 md:p-6 truncate text-lg sm:text-2xl font-bold"
+                  class="flex items-center justify-start rounded-t-lg shrink-0 min-h-[2rem] sm:min-h-[4rem] p-6 truncate text-lg sm:text-2xl font-bold"
                 >
                   <div class="w-full truncate pr-12">
                     {{ title }}
@@ -59,7 +59,7 @@
               <button
                 v-if="!hideCloser"
                 type="button"
-                class="absolute z-20 bg-foundation rounded-full p-1.5 shadow border top-4 right-4"
+                class="absolute z-20 bg-foundation rounded-full p-1.5 shadow border top-5 right-5"
                 @click="open = false"
               >
                 <XMarkIcon class="h-4 w-4 md:w-5 md:h-5" />

From 71131700b50848dbcdd594efbcae93837b034368 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Fri, 5 Jul 2024 14:12:09 +0200
Subject: [PATCH 27/77] Clean up layout, fix Dialog bugs, remove useHead from
 modal pages

---
 .../frontend-2/components/settings/Dialog.vue | 34 +++++++++++++------
 .../settings/server/ActiveUsers.vue           |  2 +-
 .../components/settings/server/General.vue    |  2 +-
 .../settings/server/PendingInvitations.vue    |  2 +-
 .../components/settings/server/Projects.vue   | 29 +++++++++-------
 .../components/settings/user/Developer.vue    | 10 +++---
 .../settings/user/Notifications.vue           |  6 +---
 .../components/settings/user/Profile.vue      |  2 +-
 packages/shared/src/package.json              |  9 -----
 .../src/components/layout/Dialog.vue          |  8 +++--
 10 files changed, 55 insertions(+), 49 deletions(-)
 delete mode 100644 packages/shared/src/package.json

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index bdf14d13fd..f24eb48cd9 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -1,11 +1,25 @@
 <template>
-  <LayoutDialog v-model:open="isOpen" fullscreen>
+  <LayoutDialog
+    v-model:open="isOpen"
+    :title="selectedMenuItem || !isMobile ? null : 'Settings'"
+    fullscreen
+  >
+    <template v-if="isMobile" #header>
+      <div v-if="selectedMenuItem" class="flex md:hidden items-center">
+        <ChevronLeftIcon class="w-5 h-5 -ml-1" @click="setSelectedMenuItem(null)" />
+        <h2 class="text-xl font-semibold ml-3">{{ selectedMenuItem?.title }}</h2>
+      </div>
+    </template>
     <div class="w-full h-full flex">
-      <LayoutSidebar
+      <!-- <LayoutSidebar
         v-if="!isMobile || !selectedMenuItem"
         class="w-full md:w-56 lg:w-60 p-4 pt-6 bg-foundation-page md:border-r md:border-outline-3"
+      > -->
+      <LayoutSidebar
+        v-if="!isMobile || !selectedMenuItem"
+        class="w-full md:w-56 lg:w-60 md:p-4 md:pt-6 md:bg-foundation-page md:border-r md:border-outline-3"
       >
-        <h1 class="text-xl pl-1 pb-6 font-semibold md:hidden">Settings</h1>
+        <!-- <h1 class="text-xl pl-1 pb-6 font-semibold md:hidden">Settings</h1> -->
         <div class="flex-1">
           <LayoutSidebarMenu>
             <LayoutSidebarMenuGroup title="Account Settings">
@@ -33,15 +47,15 @@
           </LayoutSidebarMenu>
         </div>
       </LayoutSidebar>
+      <!-- simple-scrollbar overflow-y-scroll flex-1  -->
       <main
         v-if="selectedMenuItem"
-        class="simple-scrollbar overflow-y-scroll flex-1 bg-foundation p-6 md:px-4 md:py-12"
+        :class="[
+          'bg-foundation md:p-6 md:px-10 md:py-12 w-full md:bg-foundation',
+          !isMobile && 'simple-scrollbar overflow-y-scroll flex-1'
+        ]"
       >
-        <div class="flex md:hidden items-center">
-          <ChevronLeftIcon class="w-5 h-5 -ml-2" @click="setSelectedMenuItem(null)" />
-          <h2 class="text-xl font-semibold ml-4">{{ selectedMenuItem?.title }}</h2>
-        </div>
-        <component :is="selectedMenuItem?.component" />
+        <component :is="selectedMenuItem?.component" class="pb-6" />
       </main>
     </div>
   </LayoutDialog>
@@ -87,7 +101,7 @@ const props = defineProps<{
 }>()
 
 const breakpoints = useBreakpoints(TailwindBreakpoints)
-const isMobile = breakpoints.smallerOrEqual('sm')
+const isMobile = breakpoints.smallerOrEqual('md')
 const router = useRouter()
 
 const isOpen = computed({
diff --git a/packages/frontend-2/components/settings/server/ActiveUsers.vue b/packages/frontend-2/components/settings/server/ActiveUsers.vue
index 0194c3316d..9aff136220 100644
--- a/packages/frontend-2/components/settings/server/ActiveUsers.vue
+++ b/packages/frontend-2/components/settings/server/ActiveUsers.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
     <h2 class="text-2xl font-semibold font-semibold hidden md:block">Active Users</h2>
-    <p class="text-sm pt-6 md:pt-4">And overview of all your active users</p>
+    <p class="text-sm pt-2 md:pt-4">And overview of all your active users</p>
 
     <hr class="my-6 md:my-10" />
 
diff --git a/packages/frontend-2/components/settings/server/General.vue b/packages/frontend-2/components/settings/server/General.vue
index f7d8a44514..ca107add90 100644
--- a/packages/frontend-2/components/settings/server/General.vue
+++ b/packages/frontend-2/components/settings/server/General.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="md:max-w-xl md:mx-auto">
     <h2 class="text-2xl font-semibold font-semibold hidden md:block">General</h2>
-    <p class="text-sm pt-6 md:pt-4">Here are your general settings</p>
+    <p class="text-sm pt-2 md:pt-4">Here are your general settings</p>
 
     <hr class="my-6 md:my-10" />
 
diff --git a/packages/frontend-2/components/settings/server/PendingInvitations.vue b/packages/frontend-2/components/settings/server/PendingInvitations.vue
index 04380451f7..a6cdbb1ea1 100644
--- a/packages/frontend-2/components/settings/server/PendingInvitations.vue
+++ b/packages/frontend-2/components/settings/server/PendingInvitations.vue
@@ -3,7 +3,7 @@
     <h2 class="text-2xl font-semibold font-semibold hidden md:block">
       Pending Invitations
     </h2>
-    <p class="text-sm pt-6 md:pt-4">And overview of all your pending invititations</p>
+    <p class="text-sm pt-2 md:pt-4">And overview of all your pending invititations</p>
 
     <hr class="my-6 md:my-10" />
 
diff --git a/packages/frontend-2/components/settings/server/Projects.vue b/packages/frontend-2/components/settings/server/Projects.vue
index 9fd4913a53..f5e8e7be6f 100644
--- a/packages/frontend-2/components/settings/server/Projects.vue
+++ b/packages/frontend-2/components/settings/server/Projects.vue
@@ -1,22 +1,25 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
     <h2 class="text-2xl font-semibold font-semibold hidden md:block">Projects</h2>
-    <p class="text-sm pt-6 md:pt-4">And overview of all your projects</p>
+    <p class="text-sm pt-2 md:pt-4">And overview of all your projects</p>
 
     <hr class="my-6 md:my-10" />
 
-    <FormTextInput
-      name="search"
-      :custom-icon="MagnifyingGlassIcon"
-      color="foundation"
-      full-width
-      search
-      :show-clear="!!searchString"
-      placeholder="Search Projects"
-      class="rounded-md border border-outline-3 md:max-w-md"
-      @update:model-value="debounceSearchUpdate"
-      @change="($event) => searchUpdateHandler($event.value)"
-    />
+    <div class="flex flex-col-reverse md:flex-row">
+      <FormTextInput
+        name="search"
+        :custom-icon="MagnifyingGlassIcon"
+        color="foundation"
+        full-width
+        search
+        :show-clear="!!searchString"
+        placeholder="Search Projects"
+        class="rounded-md border border-outline-3 md:max-w-md mt-6 md:mt-0"
+        @update:model-value="debounceSearchUpdate"
+        @change="($event) => searchUpdateHandler($event.value)"
+      />
+      <FormButton :icon-left="PlusIcon" @click="openNewProject = true">New</FormButton>
+    </div>
 
     <LayoutTable
       class="mt-6 md:mt-8"
diff --git a/packages/frontend-2/components/settings/user/Developer.vue b/packages/frontend-2/components/settings/user/Developer.vue
index 5365ce4655..17537fc326 100644
--- a/packages/frontend-2/components/settings/user/Developer.vue
+++ b/packages/frontend-2/components/settings/user/Developer.vue
@@ -2,7 +2,7 @@
   <div class="md:max-w-5xl md:mx-auto">
     <div class="flex flex-col">
       <h2 class="text-2xl font-semibold hidden md:block">Developer Settings</h2>
-      <p class="text-sm pt-6 md:pt-4">You can see stuff for developers here</p>
+      <p class="text-sm pt-2 md:pt-4">You can see stuff for developers here</p>
       <hr class="my-6 md:my-10" />
       <div class="flex flex-col gap-6 md:gap-12">
         <div class="flex flex-col">
@@ -13,7 +13,7 @@
             :buttons="[
               {
                 props: {
-                  color: 'invert',
+                  color: 'secondary',
                   target: '_blank',
                   external: true,
                   iconLeft: BookOpenIcon
@@ -32,7 +32,7 @@
             :buttons="[
               {
                 props: {
-                  color: 'invert',
+                  color: 'secondary',
                   to: 'https://speckle.guide/dev/tokens.html',
                   iconLeft: BookOpenIcon,
                   target: '_blank',
@@ -110,7 +110,7 @@
             :buttons="[
               {
                 props: {
-                  color: 'invert',
+                  color: 'secondary',
                   to: 'https://speckle.guide/dev/apps.html',
                   target: '_blank',
                   external: true,
@@ -193,7 +193,7 @@
             :buttons="[
               {
                 props: {
-                  color: 'invert',
+                  color: 'secondary',
                   to: 'https://speckle.guide/dev/apps.html',
                   target: '_blank',
                   external: true,
diff --git a/packages/frontend-2/components/settings/user/Notifications.vue b/packages/frontend-2/components/settings/user/Notifications.vue
index a5e38bda1f..d95a10bf1b 100644
--- a/packages/frontend-2/components/settings/user/Notifications.vue
+++ b/packages/frontend-2/components/settings/user/Notifications.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="md:max-w-xl md:mx-auto">
     <h2 class="text-2xl font-semibold font-semibold hidden md:block">Notifications</h2>
-    <p class="text-sm pt-6 md:pt-4">Your notification preferences</p>
+    <p class="text-sm pt-2 md:pt-4">Your notification preferences</p>
     <hr class="my-6 md:my-10" />
     <SettingsUserNotificationsTable class="py-8" :user="user" />
   </div>
@@ -9,9 +9,5 @@
 <script setup lang="ts">
 import { useActiveUser } from '~/lib/auth/composables/activeUser'
 
-useHead({
-  title: 'Settings - User Profile'
-})
-
 const { activeUser: user } = useActiveUser()
 </script>
diff --git a/packages/frontend-2/components/settings/user/Profile.vue b/packages/frontend-2/components/settings/user/Profile.vue
index 666701589c..6dec8b31d5 100644
--- a/packages/frontend-2/components/settings/user/Profile.vue
+++ b/packages/frontend-2/components/settings/user/Profile.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="md:max-w-xl md:mx-auto">
     <h2 class="text-2xl font-semibold hidden md:block">User profile</h2>
-    <p class="text-sm pt-6 md:pt-4">Manage your profile information</p>
+    <p class="text-sm pt-2 md:pt-4">Manage your profile information</p>
     <hr class="my-6 md:my-10" />
     <SettingsUserDetails :user="user" />
     <hr class="my-6 md:my-10" />
diff --git a/packages/shared/src/package.json b/packages/shared/src/package.json
deleted file mode 100644
index 01ff50b316..0000000000
--- a/packages/shared/src/package.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "type": "module",
-  "imports": {
-    "#lodash": {
-      "require": "lodash",
-      "import": "lodash-es"
-    }
-  }
-}
diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue
index 5982f40776..aa77a381fd 100644
--- a/packages/ui-components/src/components/layout/Dialog.vue
+++ b/packages/ui-components/src/components/layout/Dialog.vue
@@ -30,7 +30,7 @@
           >
             <DialogPanel
               :class="[
-                'transform rounded-t-lg md:rounded-xl text-foreground overflow-hidden bg-foundation text-left shadow-xl transition-all flex flex-col h-[98vh] md:h-auto',
+                'transform rounded-t-lg md:rounded-xl text-foreground overflow-hidden transition-all bg-foundation text-left shadow-xl  flex flex-col h-[98vh] md:h-auto',
                 fullscreen ? 'md:h-full' : 'md:max-h-[90vh]',
                 widthClasses
               ]"
@@ -42,10 +42,10 @@
                   v-if="hasTitle"
                   class="flex items-center justify-start rounded-t-lg shrink-0 min-h-[2rem] sm:min-h-[4rem] p-6 truncate text-lg sm:text-2xl font-bold"
                 >
-                  <div class="w-full truncate pr-12">
+                  <div v-if="props.title" class="w-full truncate pr-12">
                     {{ title }}
-                    <slot name="header"></slot>
                   </div>
+                  <slot v-else name="header" />
                 </div>
               </div>
 
@@ -141,6 +141,8 @@ const props = defineProps<{
   /**
    * If set, the modal will be wrapped in a form element and the `onSubmit` callback will be invoked when the user submits the form
    */
+  // Temp fix
+  backgroundColor?: string
   onSubmit?: (e: SubmitEvent) => void
 }>()
 

From 2ae2a97ec395bbb76c282143e88ef81b16fd8612 Mon Sep 17 00:00:00 2001
From: Benjamin Ottensten <benjamin.ottensten@gmail.com>
Date: Fri, 5 Jul 2024 14:52:34 +0200
Subject: [PATCH 28/77] Update sub headings

---
 packages/frontend-2/components/settings/server/ActiveUsers.vue  | 2 +-
 packages/frontend-2/components/settings/server/General.vue      | 2 +-
 .../components/settings/server/PendingInvitations.vue           | 2 +-
 packages/frontend-2/components/settings/server/Projects.vue     | 2 +-
 packages/frontend-2/components/settings/user/Developer.vue      | 2 +-
 packages/frontend-2/components/settings/user/Notifications.vue  | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/frontend-2/components/settings/server/ActiveUsers.vue b/packages/frontend-2/components/settings/server/ActiveUsers.vue
index 0194c3316d..0b68cfc6cc 100644
--- a/packages/frontend-2/components/settings/server/ActiveUsers.vue
+++ b/packages/frontend-2/components/settings/server/ActiveUsers.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
     <h2 class="text-2xl font-semibold font-semibold hidden md:block">Active Users</h2>
-    <p class="text-sm pt-6 md:pt-4">And overview of all your active users</p>
+    <p class="text-sm pt-6 md:pt-4">Manage server members</p>
 
     <hr class="my-6 md:my-10" />
 
diff --git a/packages/frontend-2/components/settings/server/General.vue b/packages/frontend-2/components/settings/server/General.vue
index f7d8a44514..1ffd9973f7 100644
--- a/packages/frontend-2/components/settings/server/General.vue
+++ b/packages/frontend-2/components/settings/server/General.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="md:max-w-xl md:mx-auto">
     <h2 class="text-2xl font-semibold font-semibold hidden md:block">General</h2>
-    <p class="text-sm pt-6 md:pt-4">Here are your general settings</p>
+    <p class="text-sm pt-6 md:pt-4">Manage general server information</p>
 
     <hr class="my-6 md:my-10" />
 
diff --git a/packages/frontend-2/components/settings/server/PendingInvitations.vue b/packages/frontend-2/components/settings/server/PendingInvitations.vue
index 04380451f7..ba68464541 100644
--- a/packages/frontend-2/components/settings/server/PendingInvitations.vue
+++ b/packages/frontend-2/components/settings/server/PendingInvitations.vue
@@ -3,7 +3,7 @@
     <h2 class="text-2xl font-semibold font-semibold hidden md:block">
       Pending Invitations
     </h2>
-    <p class="text-sm pt-6 md:pt-4">And overview of all your pending invititations</p>
+    <p class="text-sm pt-6 md:pt-4">Manage invitations to join server</p>
 
     <hr class="my-6 md:my-10" />
 
diff --git a/packages/frontend-2/components/settings/server/Projects.vue b/packages/frontend-2/components/settings/server/Projects.vue
index 9fd4913a53..932d311107 100644
--- a/packages/frontend-2/components/settings/server/Projects.vue
+++ b/packages/frontend-2/components/settings/server/Projects.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
     <h2 class="text-2xl font-semibold font-semibold hidden md:block">Projects</h2>
-    <p class="text-sm pt-6 md:pt-4">And overview of all your projects</p>
+    <p class="text-sm pt-6 md:pt-4">Manage projects across the server</p>
 
     <hr class="my-6 md:my-10" />
 
diff --git a/packages/frontend-2/components/settings/user/Developer.vue b/packages/frontend-2/components/settings/user/Developer.vue
index 5365ce4655..c00e368070 100644
--- a/packages/frontend-2/components/settings/user/Developer.vue
+++ b/packages/frontend-2/components/settings/user/Developer.vue
@@ -2,7 +2,7 @@
   <div class="md:max-w-5xl md:mx-auto">
     <div class="flex flex-col">
       <h2 class="text-2xl font-semibold hidden md:block">Developer Settings</h2>
-      <p class="text-sm pt-6 md:pt-4">You can see stuff for developers here</p>
+      <p class="text-sm pt-6 md:pt-4">Manage your tokens and authorized apps</p>
       <hr class="my-6 md:my-10" />
       <div class="flex flex-col gap-6 md:gap-12">
         <div class="flex flex-col">
diff --git a/packages/frontend-2/components/settings/user/Notifications.vue b/packages/frontend-2/components/settings/user/Notifications.vue
index a5e38bda1f..6e79497565 100644
--- a/packages/frontend-2/components/settings/user/Notifications.vue
+++ b/packages/frontend-2/components/settings/user/Notifications.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="md:max-w-xl md:mx-auto">
     <h2 class="text-2xl font-semibold font-semibold hidden md:block">Notifications</h2>
-    <p class="text-sm pt-6 md:pt-4">Your notification preferences</p>
+    <p class="text-sm pt-6 md:pt-4">Manage your notification preferences</p>
     <hr class="my-6 md:my-10" />
     <SettingsUserNotificationsTable class="py-8" :user="user" />
   </div>

From ca598ba84103b141ad2a55864e6324cb75702ded Mon Sep 17 00:00:00 2001
From: Benjamin Ottensten <benjamin.ottensten@gmail.com>
Date: Fri, 5 Jul 2024 14:54:43 +0200
Subject: [PATCH 29/77] CamelCase button copy

To be consistent...
---
 packages/frontend-2/components/settings/server/General.vue     | 2 +-
 packages/frontend-2/components/settings/user/DeleteAccount.vue | 2 +-
 packages/frontend-2/components/settings/user/Password.vue      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend-2/components/settings/server/General.vue b/packages/frontend-2/components/settings/server/General.vue
index 1ffd9973f7..5501bd1e46 100644
--- a/packages/frontend-2/components/settings/server/General.vue
+++ b/packages/frontend-2/components/settings/server/General.vue
@@ -67,7 +67,7 @@
             />
           </div>
           <div>
-            <FormButton color="default" @click="onSubmit">Save changes</FormButton>
+            <FormButton color="default" @click="onSubmit">Save Changes</FormButton>
           </div>
         </div>
       </form>
diff --git a/packages/frontend-2/components/settings/user/DeleteAccount.vue b/packages/frontend-2/components/settings/user/DeleteAccount.vue
index a9d2b45e52..de6edc62cc 100644
--- a/packages/frontend-2/components/settings/user/DeleteAccount.vue
+++ b/packages/frontend-2/components/settings/user/DeleteAccount.vue
@@ -8,7 +8,7 @@
         data. We will ask you to type in your email address and press the delete button.
       </div>
       <div>
-        <FormButton color="default" @click="toggleModal">Delete account</FormButton>
+        <FormButton color="default" @click="toggleModal">Delete Account</FormButton>
       </div>
     </div>
   </div>
diff --git a/packages/frontend-2/components/settings/user/Password.vue b/packages/frontend-2/components/settings/user/Password.vue
index 3ac35d6df3..155e82b9fe 100644
--- a/packages/frontend-2/components/settings/user/Password.vue
+++ b/packages/frontend-2/components/settings/user/Password.vue
@@ -7,7 +7,7 @@
       Once pressed, you will receive an e-mail with further instructions.
     </p>
     <div>
-      <FormButton color="default" @click="onClick">Reset password</FormButton>
+      <FormButton color="default" @click="onClick">Reset Password</FormButton>
     </div>
   </div>
 </template>

From 1ee8e3cc57d09f6e5e2e0415089018f4cc8e40e6 Mon Sep 17 00:00:00 2001
From: Benjamin Ottensten <benjamin.ottensten@gmail.com>
Date: Fri, 5 Jul 2024 14:59:21 +0200
Subject: [PATCH 30/77] Add hover effect to dialog close button

---
 packages/ui-components/src/components/layout/Dialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue
index 5982f40776..a5c2865e78 100644
--- a/packages/ui-components/src/components/layout/Dialog.vue
+++ b/packages/ui-components/src/components/layout/Dialog.vue
@@ -59,7 +59,7 @@
               <button
                 v-if="!hideCloser"
                 type="button"
-                class="absolute z-20 bg-foundation rounded-full p-1.5 shadow border top-5 right-5"
+                class="absolute z-20 bg-foundation hover:bg-foundation-page transition rounded-full p-1.5 shadow border top-5 right-5"
                 @click="open = false"
               >
                 <XMarkIcon class="h-4 w-4 md:w-5 md:h-5" />

From 89f4cdb11f18c1bb9a4c3bd103ec451b62cc1dc6 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Mon, 8 Jul 2024 10:07:10 +0200
Subject: [PATCH 31/77] Minor tweaks to styling, copy, and button colors

---
 packages/frontend-2/components/settings/Dialog.vue   | 10 ++++------
 .../components/settings/user/DeleteAccount.vue       |  4 ++--
 .../components/settings/user/DeleteAccountDialog.vue |  2 +-
 .../ui-components/src/components/layout/Dialog.vue   | 12 +++++++-----
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index f24eb48cd9..3577c084e8 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -1,14 +1,12 @@
 <template>
-  <LayoutDialog
-    v-model:open="isOpen"
-    :title="selectedMenuItem || !isMobile ? null : 'Settings'"
-    fullscreen
-  >
+  <LayoutDialog v-model:open="isOpen" fullscreen>
     <template v-if="isMobile" #header>
       <div v-if="selectedMenuItem" class="flex md:hidden items-center">
         <ChevronLeftIcon class="w-5 h-5 -ml-1" @click="setSelectedMenuItem(null)" />
-        <h2 class="text-xl font-semibold ml-3">{{ selectedMenuItem?.title }}</h2>
       </div>
+      <h2 class="text-xl font-semibold ml-3">
+        {{ selectedMenuItem ? selectedMenuItem?.title : 'Settings' }}
+      </h2>
     </template>
     <div class="w-full h-full flex">
       <!-- <LayoutSidebar
diff --git a/packages/frontend-2/components/settings/user/DeleteAccount.vue b/packages/frontend-2/components/settings/user/DeleteAccount.vue
index a9d2b45e52..49dc3406fd 100644
--- a/packages/frontend-2/components/settings/user/DeleteAccount.vue
+++ b/packages/frontend-2/components/settings/user/DeleteAccount.vue
@@ -2,13 +2,13 @@
   <div>
     <SettingsUserDeleteAccountDialog v-model:open="isOpen" :user="user" />
     <div class="flex flex-col space-y-6">
-      <h2 class="text-xl">Delete account</h2>
+      <h2 class="text-xl">Delete Account</h2>
       <div class="rounded border bg-foundation-page border-outline-3 text-sm py-4 px-6">
         We will delete all projects where you are the sole owner, and any associated
         data. We will ask you to type in your email address and press the delete button.
       </div>
       <div>
-        <FormButton color="default" @click="toggleModal">Delete account</FormButton>
+        <FormButton color="danger" @click="toggleModal">Delete account</FormButton>
       </div>
     </div>
   </div>
diff --git a/packages/frontend-2/components/settings/user/DeleteAccountDialog.vue b/packages/frontend-2/components/settings/user/DeleteAccountDialog.vue
index ac8c8d5681..901951a9d2 100644
--- a/packages/frontend-2/components/settings/user/DeleteAccountDialog.vue
+++ b/packages/frontend-2/components/settings/user/DeleteAccountDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <LayoutDialog :open="open" max-width="md">
+  <LayoutDialog title="Delete account" :open="open" max-width="md">
     <form class="flex flex-col gap-2" @submit="onDelete">
       <div
         class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 py-3 px-4 bg-danger-lighter dark:bg-danger-darker rounded-md select-none mb-4"
diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue
index aa77a381fd..59a1f3a2e4 100644
--- a/packages/ui-components/src/components/layout/Dialog.vue
+++ b/packages/ui-components/src/components/layout/Dialog.vue
@@ -37,15 +37,17 @@
               :as="isForm ? 'form' : 'div'"
               @submit.prevent="onFormSubmit"
             >
-              <div :class="scrolledFromTop && 'relative z-20 shadow-lg'">
+              <div
+                v-if="hasTitle"
+                :class="scrolledFromTop && 'relative z-20 shadow-lg'"
+              >
                 <div
-                  v-if="hasTitle"
                   class="flex items-center justify-start rounded-t-lg shrink-0 min-h-[2rem] sm:min-h-[4rem] p-6 truncate text-lg sm:text-2xl font-bold"
                 >
-                  <div v-if="props.title" class="w-full truncate pr-12">
+                  <div class="w-full truncate pr-12">
                     {{ title }}
+                    <slot name="header" />
                   </div>
-                  <slot v-else name="header" />
                 </div>
               </div>
 
@@ -163,7 +165,7 @@ useResizeObserver(
 
 const isForm = computed(() => !!props.onSubmit)
 const hasButtons = computed(() => props.buttons || slots.buttons)
-const hasTitle = computed(() => props.title || slots.header)
+const hasTitle = computed(() => !!props.title || !!slots.header)
 
 const open = computed({
   get: () => props.open,

From 8f76b493e4d418d4e1414baeb8ec3bf96f96ea48 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Mon, 8 Jul 2024 10:48:12 +0200
Subject: [PATCH 32/77] Update copy; rename files; fix sidebar styling

---
 .../dui3/lib/common/generated/gql/graphql.ts  | 132 +-----------------
 .../components/settings/server/General.vue    |   4 +-
 .../{Version.vue => GeneralVersion.vue}       |   2 +-
 .../components/settings/server/Projects.vue   |   2 +-
 .../components/settings/user/Profile.vue      |   6 +-
 ...teAccount.vue => ProfileDeleteAccount.vue} |   0
 .../user/{Details.vue => ProfileDetails.vue}  |   0
 .../{Password.vue => ProfilePassword.vue}     |   0
 .../lib/common/generated/gql/gql.ts           |   6 +-
 .../lib/common/generated/gql/graphql.ts       |   6 +-
 .../layout/sidebar/menu/group/Group.vue       |   2 +-
 .../layout/sidebar/menu/group/Item.vue        |   4 +-
 12 files changed, 18 insertions(+), 146 deletions(-)
 rename packages/frontend-2/components/settings/server/{Version.vue => GeneralVersion.vue} (97%)
 rename packages/frontend-2/components/settings/user/{DeleteAccount.vue => ProfileDeleteAccount.vue} (100%)
 rename packages/frontend-2/components/settings/user/{Details.vue => ProfileDetails.vue} (100%)
 rename packages/frontend-2/components/settings/user/{Password.vue => ProfilePassword.vue} (100%)

diff --git a/packages/dui3/lib/common/generated/gql/graphql.ts b/packages/dui3/lib/common/generated/gql/graphql.ts
index aa36a33fb5..5d9b3f7be8 100644
--- a/packages/dui3/lib/common/generated/gql/graphql.ts
+++ b/packages/dui3/lib/common/generated/gql/graphql.ts
@@ -201,6 +201,8 @@ export type AutomateAuthCodePayloadTest = {
 export type AutomateFunction = {
   __typename?: 'AutomateFunction';
   automationCount: Scalars['Int']['output'];
+  /** Only returned if user is a part of this speckle server */
+  creator?: Maybe<LimitedUser>;
   description: Scalars['String']['output'];
   id: Scalars['ID']['output'];
   isFeatured: Scalars['Boolean']['output'];
@@ -373,62 +375,6 @@ export type AutomationCollection = {
   totalCount: Scalars['Int']['output'];
 };
 
-export type AutomationCreateInput = {
-  automationId: Scalars['String']['input'];
-  automationName: Scalars['String']['input'];
-  automationRevisionId: Scalars['String']['input'];
-  modelId: Scalars['String']['input'];
-  projectId: Scalars['String']['input'];
-  webhookId?: InputMaybe<Scalars['String']['input']>;
-};
-
-export type AutomationFunctionRun = {
-  __typename?: 'AutomationFunctionRun';
-  contextView?: Maybe<Scalars['String']['output']>;
-  elapsed: Scalars['Float']['output'];
-  functionId: Scalars['String']['output'];
-  functionLogo?: Maybe<Scalars['String']['output']>;
-  functionName: Scalars['String']['output'];
-  id: Scalars['ID']['output'];
-  resultVersions: Array<Version>;
-  /**
-   * NOTE: this is the schema for the results field below!
-   * Current schema: {
-   *   version: "1.0.0",
-   *   values: {
-   *     objectResults: Record<str, {
-   *       category: string
-   *       level: ObjectResultLevel
-   *       objectIds: string[]
-   *       message: str | null
-   *       metadata: Records<str, unknown> | null
-   *       visualoverrides: Records<str, unknown> | null
-   *     }[]>
-   *     blobIds?: string[]
-   *   }
-   * }
-   */
-  results?: Maybe<Scalars['JSONObject']['output']>;
-  status: AutomationRunStatus;
-  statusMessage?: Maybe<Scalars['String']['output']>;
-};
-
-export type AutomationMutations = {
-  __typename?: 'AutomationMutations';
-  create: Scalars['Boolean']['output'];
-  functionRunStatusReport: Scalars['Boolean']['output'];
-};
-
-
-export type AutomationMutationsCreateArgs = {
-  input: AutomationCreateInput;
-};
-
-
-export type AutomationMutationsFunctionRunStatusReportArgs = {
-  input: AutomationRunStatusUpdateInput;
-};
-
 export type AutomationRevision = {
   __typename?: 'AutomationRevision';
   functions: Array<AutomationRevisionFunction>;
@@ -452,44 +398,8 @@ export type AutomationRevisionFunction = {
 
 export type AutomationRevisionTriggerDefinition = VersionCreatedTriggerDefinition;
 
-export type AutomationRun = {
-  __typename?: 'AutomationRun';
-  automationId: Scalars['String']['output'];
-  automationName: Scalars['String']['output'];
-  createdAt: Scalars['DateTime']['output'];
-  functionRuns: Array<AutomationFunctionRun>;
-  id: Scalars['ID']['output'];
-  /** Resolved from all function run statuses */
-  status: AutomationRunStatus;
-  updatedAt: Scalars['DateTime']['output'];
-  versionId: Scalars['String']['output'];
-};
-
-export enum AutomationRunStatus {
-  Failed = 'FAILED',
-  Initializing = 'INITIALIZING',
-  Running = 'RUNNING',
-  Succeeded = 'SUCCEEDED'
-}
-
-export type AutomationRunStatusUpdateInput = {
-  automationId: Scalars['String']['input'];
-  automationRevisionId: Scalars['String']['input'];
-  automationRunId: Scalars['String']['input'];
-  functionRuns: Array<FunctionRunStatusInput>;
-  versionId: Scalars['String']['input'];
-};
-
 export type AutomationRunTrigger = VersionCreatedTrigger;
 
-export type AutomationsStatus = {
-  __typename?: 'AutomationsStatus';
-  automationRuns: Array<AutomationRun>;
-  id: Scalars['ID']['output'];
-  status: AutomationRunStatus;
-  statusMessage?: Maybe<Scalars['String']['output']>;
-};
-
 export type AvatarUser = {
   __typename?: 'AvatarUser';
   avatar?: Maybe<Scalars['String']['output']>;
@@ -934,27 +844,6 @@ export type FileUpload = {
   userId: Scalars['String']['output'];
 };
 
-export type FunctionRunStatusInput = {
-  contextView?: InputMaybe<Scalars['String']['input']>;
-  elapsed: Scalars['Float']['input'];
-  functionId: Scalars['String']['input'];
-  functionLogo?: InputMaybe<Scalars['String']['input']>;
-  functionName: Scalars['String']['input'];
-  resultVersionIds: Array<Scalars['String']['input']>;
-  /**
-   * Current schema: {
-   *   version: "1.0.0",
-   *   values: {
-   *     speckleObjects: Record<ObjectId, {level: string; statusMessage: string}[]>
-   *     blobIds?: string[]
-   *   }
-   * }
-   */
-  results?: InputMaybe<Scalars['JSONObject']['input']>;
-  status: AutomationRunStatus;
-  statusMessage?: InputMaybe<Scalars['String']['input']>;
-};
-
 export type GendoAiRender = {
   __typename?: 'GendoAIRender';
   camera?: Maybe<Scalars['JSONObject']['output']>;
@@ -1080,7 +969,6 @@ export type LimitedUserTimelineArgs = {
 export type Model = {
   __typename?: 'Model';
   author: LimitedUser;
-  automationStatus?: Maybe<AutomationsStatus>;
   automationsStatus?: Maybe<TriggeredAutomationsStatus>;
   /** Return a model tree of children */
   childrenTree: Array<ModelsTreeItem>;
@@ -1213,7 +1101,6 @@ export type Mutation = {
   appUpdate: Scalars['Boolean']['output'];
   automateFunctionRunStatusReport: Scalars['Boolean']['output'];
   automateMutations: AutomateMutations;
-  automationMutations: AutomationMutations;
   branchCreate: Scalars['String']['output'];
   branchDelete: Scalars['Boolean']['output'];
   branchUpdate: Scalars['Boolean']['output'];
@@ -1899,14 +1786,6 @@ export type ProjectAutomationUpdateInput = {
   name?: InputMaybe<Scalars['String']['input']>;
 };
 
-export type ProjectAutomationsStatusUpdatedMessage = {
-  __typename?: 'ProjectAutomationsStatusUpdatedMessage';
-  model: Model;
-  project: Project;
-  status: AutomationsStatus;
-  version: Version;
-};
-
 export type ProjectAutomationsUpdatedMessage = {
   __typename?: 'ProjectAutomationsUpdatedMessage';
   automation?: Maybe<Automation>;
@@ -2873,7 +2752,6 @@ export type Subscription = {
   commitDeleted?: Maybe<Scalars['JSONObject']['output']>;
   /** Subscribe to commit updated event. */
   commitUpdated?: Maybe<Scalars['JSONObject']['output']>;
-  projectAutomationsStatusUpdated: ProjectAutomationsStatusUpdatedMessage;
   /** Subscribe to updates to automations in the project */
   projectAutomationsUpdated: ProjectAutomationsUpdatedMessage;
   /**
@@ -2969,11 +2847,6 @@ export type SubscriptionCommitUpdatedArgs = {
 };
 
 
-export type SubscriptionProjectAutomationsStatusUpdatedArgs = {
-  projectId: Scalars['String']['input'];
-};
-
-
 export type SubscriptionProjectAutomationsUpdatedArgs = {
   projectId: Scalars['String']['input'];
 };
@@ -3315,7 +3188,6 @@ export type UserUpdateInput = {
 export type Version = {
   __typename?: 'Version';
   authorUser?: Maybe<LimitedUser>;
-  automationStatus?: Maybe<AutomationsStatus>;
   automationsStatus?: Maybe<TriggeredAutomationsStatus>;
   /** All comment threads in this version */
   commentThreads: CommentCollection;
diff --git a/packages/frontend-2/components/settings/server/General.vue b/packages/frontend-2/components/settings/server/General.vue
index 5501bd1e46..ae7b568cf4 100644
--- a/packages/frontend-2/components/settings/server/General.vue
+++ b/packages/frontend-2/components/settings/server/General.vue
@@ -6,7 +6,7 @@
     <hr class="my-6 md:my-10" />
 
     <div class="flex flex-col space-y-6">
-      <h2 class="text-xl">Server details</h2>
+      <h2 class="text-xl">Server Details</h2>
       <form class="flex flex-col gap-2" @submit="onSubmit">
         <div class="flex flex-col gap-4">
           <FormTextInput
@@ -73,7 +73,7 @@
       </form>
     </div>
     <hr class="my-6 md:my-10" />
-    <SettingsServerVersion />
+    <SettingsServerGeneralVersion />
   </div>
 </template>
 
diff --git a/packages/frontend-2/components/settings/server/Version.vue b/packages/frontend-2/components/settings/server/GeneralVersion.vue
similarity index 97%
rename from packages/frontend-2/components/settings/server/Version.vue
rename to packages/frontend-2/components/settings/server/GeneralVersion.vue
index a5fc497cf8..36b03dd06b 100644
--- a/packages/frontend-2/components/settings/server/Version.vue
+++ b/packages/frontend-2/components/settings/server/GeneralVersion.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col space-y-6">
-    <h2 class="text-xl">Speckle version</h2>
+    <h2 class="text-xl">Speckle Version</h2>
     <div class="flex items-center">
       <div class="w-[50%]">
         <p class="text-sm">
diff --git a/packages/frontend-2/components/settings/server/Projects.vue b/packages/frontend-2/components/settings/server/Projects.vue
index 0c950df447..4e962cb2cd 100644
--- a/packages/frontend-2/components/settings/server/Projects.vue
+++ b/packages/frontend-2/components/settings/server/Projects.vue
@@ -101,7 +101,7 @@
 import { ref } from 'vue'
 import { debounce } from 'lodash-es'
 import { useQuery } from '@vue/apollo-composable'
-import { MagnifyingGlassIcon, TrashIcon } from '@heroicons/vue/24/outline'
+import { MagnifyingGlassIcon, TrashIcon, PlusIcon } from '@heroicons/vue/24/outline'
 import { getProjectsQuery } from '~~/lib/server-management/graphql/queries'
 import type { ItemType, ProjectItem } from '~~/lib/server-management/helpers/types'
 import type { InfiniteLoaderState } from '~~/lib/global/helpers/components'
diff --git a/packages/frontend-2/components/settings/user/Profile.vue b/packages/frontend-2/components/settings/user/Profile.vue
index 1bb49ca6be..8f68d8b73a 100644
--- a/packages/frontend-2/components/settings/user/Profile.vue
+++ b/packages/frontend-2/components/settings/user/Profile.vue
@@ -3,11 +3,11 @@
     <h2 class="text-2xl font-semibold hidden md:block">User Profile</h2>
     <p class="text-sm pt-2 md:pt-4">Manage your profile information</p>
     <hr class="my-6 md:my-10" />
-    <SettingsUserDetails :user="user" />
+    <SettingsUserProfileDetails :user="user" />
     <hr class="my-6 md:my-10" />
-    <SettingsUserPassword :user="user" />
+    <SettingsUserProfilePassword :user="user" />
     <hr class="my-6 md:my-10" />
-    <SettingsUserDeleteAccount :user="user" />
+    <SettingsUserProfileDeleteAccount :user="user" />
   </div>
 </template>
 <script setup lang="ts">
diff --git a/packages/frontend-2/components/settings/user/DeleteAccount.vue b/packages/frontend-2/components/settings/user/ProfileDeleteAccount.vue
similarity index 100%
rename from packages/frontend-2/components/settings/user/DeleteAccount.vue
rename to packages/frontend-2/components/settings/user/ProfileDeleteAccount.vue
diff --git a/packages/frontend-2/components/settings/user/Details.vue b/packages/frontend-2/components/settings/user/ProfileDetails.vue
similarity index 100%
rename from packages/frontend-2/components/settings/user/Details.vue
rename to packages/frontend-2/components/settings/user/ProfileDetails.vue
diff --git a/packages/frontend-2/components/settings/user/Password.vue b/packages/frontend-2/components/settings/user/ProfilePassword.vue
similarity index 100%
rename from packages/frontend-2/components/settings/user/Password.vue
rename to packages/frontend-2/components/settings/user/ProfilePassword.vue
diff --git a/packages/frontend-2/lib/common/generated/gql/gql.ts b/packages/frontend-2/lib/common/generated/gql/gql.ts
index 4ccaf1661f..ae5a7dc07f 100644
--- a/packages/frontend-2/lib/common/generated/gql/gql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/gql.ts
@@ -84,8 +84,8 @@ const documents = {
     "\n  fragment ProjectsInviteBanner on PendingStreamCollaborator {\n    id\n    invitedBy {\n      ...LimitedUserAvatar\n    }\n    projectId\n    projectName\n    token\n    user {\n      id\n    }\n  }\n": types.ProjectsInviteBannerFragmentDoc,
     "\n  fragment ProjectsInviteBanners on User {\n    projectInvites {\n      ...ProjectsInviteBanner\n    }\n  }\n": types.ProjectsInviteBannersFragmentDoc,
     "\n  fragment UserProfileEditDialogDeleteAccount_User on User {\n    id\n    email\n  }\n": types.UserProfileEditDialogDeleteAccount_UserFragmentDoc,
-    "\n  fragment UserProfileEditDialogBio_User on User {\n    id\n    name\n    company\n    bio\n    ...UserProfileEditDialogAvatar_User\n  }\n": types.UserProfileEditDialogBio_UserFragmentDoc,
     "\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n": types.UserProfileEditDialogNotificationPreferences_UserFragmentDoc,
+    "\n  fragment UserProfileEditDialogBio_User on User {\n    id\n    name\n    company\n    bio\n    ...UserProfileEditDialogAvatar_User\n  }\n": types.UserProfileEditDialogBio_UserFragmentDoc,
     "\n  fragment UserProfileEditDialogAvatar_User on User {\n    id\n    avatar\n    ...ActiveUserAvatar\n  }\n": types.UserProfileEditDialogAvatar_UserFragmentDoc,
     "\n  fragment ModelPageProject on Project {\n    id\n    createdAt\n    name\n    visibility\n  }\n": types.ModelPageProjectFragmentDoc,
     "\n  fragment ThreadCommentAttachment on Comment {\n    text {\n      attachments {\n        id\n        fileName\n        fileType\n        fileSize\n      }\n    }\n  }\n": types.ThreadCommentAttachmentFragmentDoc,
@@ -542,11 +542,11 @@ export function graphql(source: "\n  fragment UserProfileEditDialogDeleteAccount
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment UserProfileEditDialogBio_User on User {\n    id\n    name\n    company\n    bio\n    ...UserProfileEditDialogAvatar_User\n  }\n"): (typeof documents)["\n  fragment UserProfileEditDialogBio_User on User {\n    id\n    name\n    company\n    bio\n    ...UserProfileEditDialogAvatar_User\n  }\n"];
+export function graphql(source: "\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n"): (typeof documents)["\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n"): (typeof documents)["\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n"];
+export function graphql(source: "\n  fragment UserProfileEditDialogBio_User on User {\n    id\n    name\n    company\n    bio\n    ...UserProfileEditDialogAvatar_User\n  }\n"): (typeof documents)["\n  fragment UserProfileEditDialogBio_User on User {\n    id\n    name\n    company\n    bio\n    ...UserProfileEditDialogAvatar_User\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/packages/frontend-2/lib/common/generated/gql/graphql.ts b/packages/frontend-2/lib/common/generated/gql/graphql.ts
index aaf095f82b..eed78136b6 100644
--- a/packages/frontend-2/lib/common/generated/gql/graphql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/graphql.ts
@@ -3557,10 +3557,10 @@ export type ProjectsInviteBannersFragment = { __typename?: 'User', projectInvite
 
 export type UserProfileEditDialogDeleteAccount_UserFragment = { __typename?: 'User', id: string, email?: string | null };
 
-export type UserProfileEditDialogBio_UserFragment = { __typename?: 'User', id: string, name: string, company?: string | null, bio?: string | null, avatar?: string | null };
-
 export type UserProfileEditDialogNotificationPreferences_UserFragment = { __typename?: 'User', id: string, notificationPreferences: {} };
 
+export type UserProfileEditDialogBio_UserFragment = { __typename?: 'User', id: string, name: string, company?: string | null, bio?: string | null, avatar?: string | null };
+
 export type UserProfileEditDialogAvatar_UserFragment = { __typename?: 'User', id: string, avatar?: string | null, name: string };
 
 export type ModelPageProjectFragment = { __typename?: 'Project', id: string, createdAt: string, name: string, visibility: ProjectVisibility };
@@ -4590,10 +4590,10 @@ export const ProjectsDashboardFilledFragmentDoc = {"kind":"Document","definition
 export const ProjectsInviteBannerFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectsInviteBanner"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PendingStreamCollaborator"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"invitedBy"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LimitedUserAvatar"}}]}},{"kind":"Field","name":{"kind":"Name","value":"projectId"}},{"kind":"Field","name":{"kind":"Name","value":"projectName"}},{"kind":"Field","name":{"kind":"Name","value":"token"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LimitedUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LimitedUser"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]} as unknown as DocumentNode<ProjectsInviteBannerFragment, unknown>;
 export const ProjectsInviteBannersFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectsInviteBanners"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectInvites"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectsInviteBanner"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LimitedUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LimitedUser"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectsInviteBanner"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PendingStreamCollaborator"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"invitedBy"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LimitedUserAvatar"}}]}},{"kind":"Field","name":{"kind":"Name","value":"projectId"}},{"kind":"Field","name":{"kind":"Name","value":"projectName"}},{"kind":"Field","name":{"kind":"Name","value":"token"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<ProjectsInviteBannersFragment, unknown>;
 export const UserProfileEditDialogDeleteAccount_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogDeleteAccount_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogDeleteAccount_UserFragment, unknown>;
+export const UserProfileEditDialogNotificationPreferences_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogNotificationPreferences_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"notificationPreferences"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogNotificationPreferences_UserFragment, unknown>;
 export const ActiveUserAvatarFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ActiveUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]} as unknown as DocumentNode<ActiveUserAvatarFragment, unknown>;
 export const UserProfileEditDialogAvatar_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogAvatar_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ActiveUserAvatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ActiveUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogAvatar_UserFragment, unknown>;
 export const UserProfileEditDialogBio_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogBio_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"bio"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"UserProfileEditDialogAvatar_User"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ActiveUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogAvatar_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ActiveUserAvatar"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogBio_UserFragment, unknown>;
-export const UserProfileEditDialogNotificationPreferences_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogNotificationPreferences_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"notificationPreferences"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogNotificationPreferences_UserFragment, unknown>;
 export const ModelPageProjectFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ModelPageProject"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"visibility"}}]}}]} as unknown as DocumentNode<ModelPageProjectFragment, unknown>;
 export const ViewerModelVersionCardItemFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ViewerModelVersionCardItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Version"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"referencedObject"}},{"kind":"Field","name":{"kind":"Name","value":"sourceApplication"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"previewUrl"}},{"kind":"Field","name":{"kind":"Name","value":"authorUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LimitedUserAvatar"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LimitedUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LimitedUser"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]} as unknown as DocumentNode<ViewerModelVersionCardItemFragment, unknown>;
 export const SearchAutomateFunctionReleaseItemFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SearchAutomateFunctionReleaseItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AutomateFunctionRelease"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"versionTag"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"inputSchema"}}]}}]} as unknown as DocumentNode<SearchAutomateFunctionReleaseItemFragment, unknown>;
diff --git a/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue b/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue
index 6ff64b4dd7..c983dcbf3a 100644
--- a/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue
+++ b/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue
@@ -25,7 +25,7 @@
     </div>
 
     <div v-show="isOpen" class="flex flex-col">
-      <slot></slot>
+      <slot :class="$slots['title-icon'] && 'px-6'"></slot>
     </div>
   </div>
 </template>
diff --git a/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue b/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
index 6b2a09e972..29e3d55671 100644
--- a/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
+++ b/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
@@ -3,7 +3,7 @@
     <NuxtLink
       v-if="!hasChildren"
       :to="to"
-      class="group flex items-center justify-between gap-2 shrink-0 text-sm select-none rounded-md w-full hover:bg-primary-muted p-1.5 cursor-pointer"
+      class="group flex items-center justify-between gap-2 shrink-0 text-sm select-none rounded-md w-full hover:bg-primary-muted py-1.5 px-5 bcursor-pointer"
       active-class="bg-foundation-focus hover:!bg-foundation-focus"
       :external="external"
       :target="external ? '_blank' : undefined"
@@ -46,7 +46,7 @@ import { ref, resolveDynamicComponent, useSlots } from 'vue'
 
 defineProps<{
   label: string
-  to: string
+  to?: string
   tag?: string
   external?: boolean
 }>()

From 4ed7338c22c1269ca4f53f09b8b321b3ae5ac1f4 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Mon, 8 Jul 2024 11:05:50 +0200
Subject: [PATCH 33/77] Moved closed option to LayoutDialog; updated
 implementation in SettingsDialog

---
 .../frontend-2/components/settings/Dialog.vue | 23 ++++++-------------
 .../src/components/layout/Dialog.vue          | 17 ++++++++++----
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 3577c084e8..af7651deda 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -1,23 +1,16 @@
 <template>
-  <LayoutDialog v-model:open="isOpen" fullscreen>
-    <template v-if="isMobile" #header>
-      <div v-if="selectedMenuItem" class="flex md:hidden items-center">
-        <ChevronLeftIcon class="w-5 h-5 -ml-1" @click="setSelectedMenuItem(null)" />
-      </div>
-      <h2 class="text-xl font-semibold ml-3">
-        {{ selectedMenuItem ? selectedMenuItem?.title : 'Settings' }}
-      </h2>
-    </template>
+  <LayoutDialog
+    v-model:open="isOpen"
+    :title="isMobile ? (selectedMenuItem ? selectedMenuItem?.title : 'Settings') : null"
+    fullscreen
+    :show-back-button="!!(isMobile && selectedMenuItem)"
+    @back="setSelectedMenuItem(null)"
+  >
     <div class="w-full h-full flex">
-      <!-- <LayoutSidebar
-        v-if="!isMobile || !selectedMenuItem"
-        class="w-full md:w-56 lg:w-60 p-4 pt-6 bg-foundation-page md:border-r md:border-outline-3"
-      > -->
       <LayoutSidebar
         v-if="!isMobile || !selectedMenuItem"
         class="w-full md:w-56 lg:w-60 md:p-4 md:pt-6 md:bg-foundation-page md:border-r md:border-outline-3"
       >
-        <!-- <h1 class="text-xl pl-1 pb-6 font-semibold md:hidden">Settings</h1> -->
         <div class="flex-1">
           <LayoutSidebarMenu>
             <LayoutSidebarMenuGroup title="Account Settings">
@@ -45,7 +38,6 @@
           </LayoutSidebarMenu>
         </div>
       </LayoutSidebar>
-      <!-- simple-scrollbar overflow-y-scroll flex-1  -->
       <main
         v-if="selectedMenuItem"
         :class="[
@@ -61,7 +53,6 @@
 
 <script setup lang="ts">
 import type { defineComponent } from 'vue'
-import { ChevronLeftIcon } from '@heroicons/vue/24/solid'
 import SettingsUserProfile from './user/Profile.vue'
 import SettingsUserNotifications from './user/Notifications.vue'
 import SettingsUserDeveloper from './user/Developer.vue'
diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue
index e7555ab121..4c420aa9ab 100644
--- a/packages/ui-components/src/components/layout/Dialog.vue
+++ b/packages/ui-components/src/components/layout/Dialog.vue
@@ -44,9 +44,16 @@
                 <div
                   class="flex items-center justify-start rounded-t-lg shrink-0 min-h-[2rem] sm:min-h-[4rem] p-6 truncate text-lg sm:text-2xl font-bold"
                 >
-                  <div class="w-full truncate pr-12">
-                    {{ title }}
-                    <slot name="header" />
+                  <div class="flex items-center pr-12">
+                    <ChevronLeftIcon
+                      v-if="showBackButton"
+                      class="w-5 h-5 -ml-1 mr-3"
+                      @click="$emit('back')"
+                    />
+                    <div class="w-full truncate">
+                      {{ title }}
+                      <slot name="header" />
+                    </div>
                   </div>
                 </div>
               </div>
@@ -112,7 +119,7 @@
 <script setup lang="ts">
 import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
 import { FormButton, type LayoutDialogButton } from '~~/src/lib'
-import { XMarkIcon } from '@heroicons/vue/24/outline'
+import { XMarkIcon, ChevronLeftIcon } from '@heroicons/vue/24/outline'
 import { useResizeObserver, type ResizeObserverCallback } from '@vueuse/core'
 import { computed, ref, useSlots, watch, onUnmounted } from 'vue'
 import { throttle } from 'lodash'
@@ -123,6 +130,7 @@ type MaxWidthValue = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
 const emit = defineEmits<{
   (e: 'update:open', v: boolean): void
   (e: 'fully-closed'): void
+  (e: 'back'): void
 }>()
 
 const props = defineProps<{
@@ -130,6 +138,7 @@ const props = defineProps<{
   maxWidth?: MaxWidthValue
   fullscreen?: boolean
   hideCloser?: boolean
+  showBackButton?: boolean
   /**
    * Prevent modal from closing when the user clicks outside of the modal or presses Esc
    */

From 44bf1d199c3b6c605d64069f42547b3fb2fcaf73 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Mon, 8 Jul 2024 11:09:50 +0200
Subject: [PATCH 34/77] Fixed scrollbar being visible without overflow

---
 packages/frontend-2/components/settings/Dialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index af7651deda..c7c7920523 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -42,7 +42,7 @@
         v-if="selectedMenuItem"
         :class="[
           'bg-foundation md:p-6 md:px-10 md:py-12 w-full md:bg-foundation',
-          !isMobile && 'simple-scrollbar overflow-y-scroll flex-1'
+          !isMobile && 'simple-scrollbar overflow-y-auto flex-1'
         ]"
       >
         <component :is="selectedMenuItem?.component" class="pb-6" />

From 2d0703c734195377bd5119c9fe758cd2b2693778 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Mon, 8 Jul 2024 11:33:53 +0200
Subject: [PATCH 35/77] Abstracted all header into 1 component

---
 .../components/settings/SectionHeader.vue     | 50 ++++++++++
 .../settings/server/ActiveUsers.vue           |  6 +-
 .../components/settings/server/General.vue    |  8 +-
 .../settings/server/PendingInvitations.vue    | 11 +--
 .../components/settings/server/Projects.vue   |  6 +-
 .../components/settings/user/Developer.vue    | 49 +++++-----
 .../settings/user/Notifications.vue           | 94 ++++++++++++++++++-
 .../settings/user/NotificationsTable.vue      | 94 -------------------
 .../components/settings/user/Profile.vue      |  7 +-
 .../settings/user/ProfileDeleteAccount.vue    |  2 +-
 .../settings/user/ProfileDetails.vue          |  2 +-
 .../settings/user/ProfilePassword.vue         |  2 +-
 12 files changed, 182 insertions(+), 149 deletions(-)
 create mode 100644 packages/frontend-2/components/settings/SectionHeader.vue
 delete mode 100644 packages/frontend-2/components/settings/user/NotificationsTable.vue

diff --git a/packages/frontend-2/components/settings/SectionHeader.vue b/packages/frontend-2/components/settings/SectionHeader.vue
new file mode 100644
index 0000000000..c543d734e2
--- /dev/null
+++ b/packages/frontend-2/components/settings/SectionHeader.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="flex flex-col">
+    <div class="flex flex-col md:flex-row gap-3 md:gap-0 justify-between">
+      <h2 v-if="subheading" class="text-xl">{{ title }}</h2>
+      <h1 v-else class="text-2xl font-semibold font-semibold hidden md:block">
+        {{ title }}
+      </h1>
+      <div v-if="!!buttons" class="flex flex-wrap gap-2">
+        <FormButton
+          v-for="(button, index) in buttons"
+          :key="index"
+          v-bind="button.props"
+          class="shrink-0 whitespace-nowrap"
+          @click="($event) => button.onClick?.($event)"
+        >
+          {{ button.label }}
+        </FormButton>
+      </div>
+    </div>
+    <p v-if="text" class="text-sm pt-6 md:pt-4">
+      {{ text }}
+    </p>
+    <hr v-if="!subheading" class="my-6 md:my-10" />
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { FormButton } from '@speckle/ui-components'
+
+type FormButtonProps = InstanceType<typeof FormButton>['$props']
+
+interface Button {
+  label: string
+  props: Record<string, unknown> & FormButtonProps
+  onClick?: (e: MouseEvent) => void
+}
+
+withDefaults(
+  defineProps<{
+    title: string
+    text?: string
+    buttons?: Button[]
+    subheading?: boolean
+  }>(),
+  {
+    buttons: () => []
+  }
+)
+</script>
diff --git a/packages/frontend-2/components/settings/server/ActiveUsers.vue b/packages/frontend-2/components/settings/server/ActiveUsers.vue
index 0b68cfc6cc..13cdfc7695 100644
--- a/packages/frontend-2/components/settings/server/ActiveUsers.vue
+++ b/packages/frontend-2/components/settings/server/ActiveUsers.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
-    <h2 class="text-2xl font-semibold font-semibold hidden md:block">Active Users</h2>
-    <p class="text-sm pt-6 md:pt-4">Manage server members</p>
-
-    <hr class="my-6 md:my-10" />
-
+    <SettingsSectionHeader title="Active Users" text="Manage server members" />
     <div class="flex flex-col-reverse md:flex-row">
       <FormTextInput
         name="search"
diff --git a/packages/frontend-2/components/settings/server/General.vue b/packages/frontend-2/components/settings/server/General.vue
index ae7b568cf4..ea35505350 100644
--- a/packages/frontend-2/components/settings/server/General.vue
+++ b/packages/frontend-2/components/settings/server/General.vue
@@ -1,12 +1,8 @@
 <template>
   <div class="md:max-w-xl md:mx-auto">
-    <h2 class="text-2xl font-semibold font-semibold hidden md:block">General</h2>
-    <p class="text-sm pt-6 md:pt-4">Manage general server information</p>
-
-    <hr class="my-6 md:my-10" />
-
+    <SettingsSectionHeader title="General" text="Manage general server information" />
     <div class="flex flex-col space-y-6">
-      <h2 class="text-xl">Server Details</h2>
+      <SettingsSectionHeader title="Server Details" subheading />
       <form class="flex flex-col gap-2" @submit="onSubmit">
         <div class="flex flex-col gap-4">
           <FormTextInput
diff --git a/packages/frontend-2/components/settings/server/PendingInvitations.vue b/packages/frontend-2/components/settings/server/PendingInvitations.vue
index a6cdbb1ea1..1ffc5f2a90 100644
--- a/packages/frontend-2/components/settings/server/PendingInvitations.vue
+++ b/packages/frontend-2/components/settings/server/PendingInvitations.vue
@@ -1,12 +1,9 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
-    <h2 class="text-2xl font-semibold font-semibold hidden md:block">
-      Pending Invitations
-    </h2>
-    <p class="text-sm pt-2 md:pt-4">And overview of all your pending invititations</p>
-
-    <hr class="my-6 md:my-10" />
-
+    <SettingsSectionHeader
+      title="Pending Invitations"
+      text="And overview of all your pending invititations"
+    />
     <div class="flex flex-col-reverse md:flex-row">
       <FormTextInput
         name="search"
diff --git a/packages/frontend-2/components/settings/server/Projects.vue b/packages/frontend-2/components/settings/server/Projects.vue
index 4e962cb2cd..3647256bb9 100644
--- a/packages/frontend-2/components/settings/server/Projects.vue
+++ b/packages/frontend-2/components/settings/server/Projects.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
-    <h2 class="text-2xl font-semibold font-semibold hidden md:block">Projects</h2>
-    <p class="text-sm pt-6 md:pt-4">Manage projects across the server</p>
-
-    <hr class="my-6 md:my-10" />
-
+    <SettingsSectionHeader title="Projects" text="Manage projects across the server" />
     <div class="flex flex-col-reverse md:flex-row">
       <FormTextInput
         name="search"
diff --git a/packages/frontend-2/components/settings/user/Developer.vue b/packages/frontend-2/components/settings/user/Developer.vue
index 9d5eeb1fa3..782c04ed80 100644
--- a/packages/frontend-2/components/settings/user/Developer.vue
+++ b/packages/frontend-2/components/settings/user/Developer.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
     <div class="flex flex-col">
-      <h2 class="text-2xl font-semibold hidden md:block">Developer Settings</h2>
-      <p class="text-sm pt-6 md:pt-4">Manage your tokens and authorized apps</p>
-      <hr class="my-6 md:my-10" />
+      <SettingsSectionHeader
+        title="Developer Settings"
+        text="Manage your tokens and authorized app"
+      />
       <div class="flex flex-col gap-6 md:gap-12">
         <div class="flex flex-col">
-          <DeveloperSettingsSectionHeader
+          <SettingsSectionHeader
             title="Explore GraphQL"
             class="md:gap-0"
             subheading
@@ -26,7 +27,7 @@
         </div>
         <hr />
         <div class="flex flex-col gap-4">
-          <DeveloperSettingsSectionHeader
+          <SettingsSectionHeader
             title="Access Tokens"
             subheading
             :buttons="[
@@ -49,14 +50,16 @@
               }
             ]"
           >
-            Personal Access Tokens can be used to access the Speckle API on this server;
-            they function like ordinary OAuth access tokens. Use them in your scripts or
-            apps!
-            <strong>
-              Treat them like a password: do not post them anywhere where they could be
-              accessed by others (e.g., public repos).
-            </strong>
-          </DeveloperSettingsSectionHeader>
+            <p class="text-sm pt-6 md:pt-4">
+              Personal Access Tokens can be used to access the Speckle API on this
+              server; they function like ordinary OAuth access tokens. Use them in your
+              scripts or apps!
+              <strong>
+                Treat them like a password: do not post them anywhere where they could
+                be accessed by others (e.g., public repos).
+              </strong>
+            </p>
+          </SettingsSectionHeader>
           <LayoutTable
             :columns="[
               { id: 'name', header: 'Name', classes: 'col-span-3 truncate' },
@@ -104,7 +107,7 @@
         </div>
         <hr />
         <div class="flex flex-col gap-4">
-          <DeveloperSettingsSectionHeader
+          <SettingsSectionHeader
             subheading
             title="Applications"
             :buttons="[
@@ -127,9 +130,11 @@
               }
             ]"
           >
-            Register and manage third-party Speckle Apps that, once authorised by a user
-            on this server, can act on their behalf.
-          </DeveloperSettingsSectionHeader>
+            <p class="text-sm pt-6 md:pt-4">
+              Register and manage third-party Speckle Apps that, once authorised by a
+              user on this server, can act on their behalf.
+            </p>
+          </SettingsSectionHeader>
           <LayoutTable
             :columns="[
               { id: 'name', header: 'Name', classes: 'col-span-3' },
@@ -187,7 +192,7 @@
         </div>
         <hr />
         <div class="flex flex-col gap-4">
-          <DeveloperSettingsSectionHeader
+          <SettingsSectionHeader
             subheading
             title="Authorized Apps"
             :buttons="[
@@ -203,9 +208,11 @@
               }
             ]"
           >
-            Here you can review the apps that you have granted access to. If something
-            looks suspicious, revoke the access.
-          </DeveloperSettingsSectionHeader>
+            <p class="text-sm pt-6 md:pt-4">
+              Here you can review the apps that you have granted access to. If something
+              looks suspicious, revoke the access.
+            </p>
+          </SettingsSectionHeader>
           <LayoutTable
             :columns="[
               { id: 'name', header: 'Name', classes: 'col-span-3 ' },
diff --git a/packages/frontend-2/components/settings/user/Notifications.vue b/packages/frontend-2/components/settings/user/Notifications.vue
index 36c6953ef7..925ada6082 100644
--- a/packages/frontend-2/components/settings/user/Notifications.vue
+++ b/packages/frontend-2/components/settings/user/Notifications.vue
@@ -1,13 +1,97 @@
 <template>
-  <div class="md:max-w-xl md:mx-auto">
-    <h2 class="text-2xl font-semibold font-semibold hidden md:block">Notifications</h2>
-    <p class="text-sm pt-6 md:pt-4">Manage your notification preferences</p>
-    <hr class="my-6 md:my-10" />
-    <SettingsUserNotificationsTable class="py-8" :user="user" />
+  <div>
+    <SettingsSectionHeader
+      title="Notifications"
+      text="Manage your notification preferencesr"
+    />
+    <table class="table-auto w-full rounded-t overflow-hidden">
+      <thead class="text-foreground-1">
+        <tr>
+          <th class="pb-4 font-semibold text-sm text-left">Notification type</th>
+          <th
+            v-for="channel in notificationChannels"
+            :key="channel"
+            class="text-right font-semibold pb-4 text-sm"
+          >
+            {{ capitalize(channel) }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="[type, settings] in Object.entries(localPreferences)"
+          :key="type"
+          class="border-t"
+        >
+          <td class="text-xs sm:text-sm py-4">
+            {{ notificationTypeMapping[type] || 'Unknown' }}
+          </td>
+          <td
+            v-for="channel in notificationChannels"
+            :key="channel"
+            class="flex justify-end py-4"
+          >
+            <FormCheckbox
+              :name="`${type} (${channel})`"
+              :disabled="loading"
+              hide-label
+              :model-value="settings[channel] || undefined"
+              @update:model-value="
+                ($event) => onUpdate({ value: !!$event, type, channel })
+              "
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </template>
 <script setup lang="ts">
+import { capitalize, cloneDeep } from 'lodash-es'
+import { graphql } from '~~/lib/common/generated/gql'
+import { useUpdateNotificationPreferences } from '~~/lib/user/composables/management'
+import type { NotificationPreferences } from '~~/lib/user/helpers/components'
 import { useActiveUser } from '~/lib/auth/composables/activeUser'
 
+graphql(`
+  fragment UserProfileEditDialogNotificationPreferences_User on User {
+    id
+    notificationPreferences
+  }
+`)
+
 const { activeUser: user } = useActiveUser()
+const { mutate, loading } = useUpdateNotificationPreferences()
+
+const notificationTypeMapping = ref({
+  activityDigest: 'Weekly activity digest',
+  mentionedInComment: 'Mentioned in comment',
+  newStreamAccessRequest: 'Project access request',
+  streamAccessRequestApproved: 'Project access request approved'
+} as Record<string, string>)
+
+const localPreferences = ref({} as NotificationPreferences)
+
+const notificationPreferences = computed(
+  () => user.value.notificationPreferences as NotificationPreferences
+)
+
+const notificationChannels = computed(() => {
+  const firstTypeSettings = Object.values(notificationPreferences.value)[0] || {}
+  return Object.keys(firstTypeSettings)
+})
+
+const onUpdate = async (params: { value: boolean; channel: string; type: string }) => {
+  const { value, channel, type } = params
+  localPreferences.value[type][channel] = value
+  await mutate(localPreferences.value)
+}
+
+watch(
+  notificationPreferences,
+  (prefs) => {
+    localPreferences.value = cloneDeep(prefs)
+  },
+  { immediate: true, deep: true }
+)
 </script>
diff --git a/packages/frontend-2/components/settings/user/NotificationsTable.vue b/packages/frontend-2/components/settings/user/NotificationsTable.vue
deleted file mode 100644
index e7303f44c0..0000000000
--- a/packages/frontend-2/components/settings/user/NotificationsTable.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <table class="table-auto w-full rounded-t overflow-hidden">
-    <thead class="text-foreground-1">
-      <tr>
-        <th class="pb-4 font-semibold text-sm text-left">Notification type</th>
-        <th
-          v-for="channel in notificationChannels"
-          :key="channel"
-          class="text-right font-semibold pb-4 text-sm"
-        >
-          {{ capitalize(channel) }}
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        v-for="[type, settings] in Object.entries(localPreferences)"
-        :key="type"
-        class="border-t"
-      >
-        <td class="text-xs sm:text-sm py-4">
-          {{ notificationTypeMapping[type] || 'Unknown' }}
-        </td>
-        <td
-          v-for="channel in notificationChannels"
-          :key="channel"
-          class="flex justify-end py-4"
-        >
-          <FormCheckbox
-            :name="`${type} (${channel})`"
-            :disabled="loading"
-            hide-label
-            :model-value="settings[channel] || undefined"
-            @update:model-value="
-              ($event) => onUpdate({ value: !!$event, type, channel })
-            "
-          />
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-<script setup lang="ts">
-import { capitalize, cloneDeep } from 'lodash-es'
-import { graphql } from '~~/lib/common/generated/gql'
-import type { UserProfileEditDialogNotificationPreferences_UserFragment } from '~~/lib/common/generated/gql/graphql'
-import { useUpdateNotificationPreferences } from '~~/lib/user/composables/management'
-import type { NotificationPreferences } from '~~/lib/user/helpers/components'
-
-graphql(`
-  fragment UserProfileEditDialogNotificationPreferences_User on User {
-    id
-    notificationPreferences
-  }
-`)
-
-const props = defineProps<{
-  user: UserProfileEditDialogNotificationPreferences_UserFragment
-}>()
-
-const { mutate, loading } = useUpdateNotificationPreferences()
-
-const notificationTypeMapping = ref({
-  activityDigest: 'Weekly activity digest',
-  mentionedInComment: 'Mentioned in comment',
-  newStreamAccessRequest: 'Project access request',
-  streamAccessRequestApproved: 'Project access request approved'
-} as Record<string, string>)
-
-const localPreferences = ref({} as NotificationPreferences)
-
-const notificationPreferences = computed(
-  () => props.user.notificationPreferences as NotificationPreferences
-)
-
-const notificationChannels = computed(() => {
-  const firstTypeSettings = Object.values(notificationPreferences.value)[0] || {}
-  return Object.keys(firstTypeSettings)
-})
-
-const onUpdate = async (params: { value: boolean; channel: string; type: string }) => {
-  const { value, channel, type } = params
-  localPreferences.value[type][channel] = value
-  await mutate(localPreferences.value)
-}
-
-watch(
-  notificationPreferences,
-  (prefs) => {
-    localPreferences.value = cloneDeep(prefs)
-  },
-  { immediate: true, deep: true }
-)
-</script>
diff --git a/packages/frontend-2/components/settings/user/Profile.vue b/packages/frontend-2/components/settings/user/Profile.vue
index 8f68d8b73a..ef994cb33f 100644
--- a/packages/frontend-2/components/settings/user/Profile.vue
+++ b/packages/frontend-2/components/settings/user/Profile.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="md:max-w-xl md:mx-auto">
-    <h2 class="text-2xl font-semibold hidden md:block">User Profile</h2>
-    <p class="text-sm pt-2 md:pt-4">Manage your profile information</p>
-    <hr class="my-6 md:my-10" />
+    <SettingsSectionHeader
+      title="User Profile"
+      text="Manage your profile information"
+    />
     <SettingsUserProfileDetails :user="user" />
     <hr class="my-6 md:my-10" />
     <SettingsUserProfilePassword :user="user" />
diff --git a/packages/frontend-2/components/settings/user/ProfileDeleteAccount.vue b/packages/frontend-2/components/settings/user/ProfileDeleteAccount.vue
index 55cc80e369..c910bc34dc 100644
--- a/packages/frontend-2/components/settings/user/ProfileDeleteAccount.vue
+++ b/packages/frontend-2/components/settings/user/ProfileDeleteAccount.vue
@@ -2,7 +2,7 @@
   <div>
     <SettingsUserDeleteAccountDialog v-model:open="isOpen" :user="user" />
     <div class="flex flex-col space-y-6">
-      <h2 class="text-xl">Delete Account</h2>
+      <SettingsSectionHeader title="Delete Account" subheading />
       <div class="rounded border bg-foundation-page border-outline-3 text-sm py-4 px-6">
         We will delete all projects where you are the sole owner, and any associated
         data. We will ask you to type in your email address and press the delete button.
diff --git a/packages/frontend-2/components/settings/user/ProfileDetails.vue b/packages/frontend-2/components/settings/user/ProfileDetails.vue
index 42aea8f42d..f56c2d1dd7 100644
--- a/packages/frontend-2/components/settings/user/ProfileDetails.vue
+++ b/packages/frontend-2/components/settings/user/ProfileDetails.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-y-4">
-    <h2 class="text-xl">Your Details</h2>
+    <SettingsSectionHeader title="Your Details" subheading />
     <div class="grid md:grid-cols-2 pt-4">
       <div class="flex h-full items-center justify-center">
         <UserProfileEditDialogAvatar :user="user" size="xxl" />
diff --git a/packages/frontend-2/components/settings/user/ProfilePassword.vue b/packages/frontend-2/components/settings/user/ProfilePassword.vue
index 2d5d6ef78a..8bb9024bee 100644
--- a/packages/frontend-2/components/settings/user/ProfilePassword.vue
+++ b/packages/frontend-2/components/settings/user/ProfilePassword.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col space-y-6">
-    <h2 class="text-xl">Change password</h2>
+    <SettingsSectionHeader title="Change password" subheading />
     <p class="text-sm">
       Press the button below to start the password reset process.
       <br />

From cc8d19dcc0b65036d737f755587e0cad2e9d66b0 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Mon, 8 Jul 2024 12:01:59 +0200
Subject: [PATCH 36/77] Delete old files, move dialogs to settings folder

---
 .../developer-settings/SectionHeader.vue      |  46 ----
 .../components/header/NavUserMenu.vue         |   2 +-
 .../components/onboarding/checklist/v1.vue    |   2 +-
 .../components/server-management/Card.vue     |  22 --
 .../components/server-management/CardRow.vue  |  51 ----
 .../server-management/SettingsDialog.vue      | 207 ----------------
 .../settings/server/ActiveUsers.vue           |   6 +-
 .../server}/ChangeUserRoleDialog.vue          |   0
 .../server}/DeleteUserDialog.vue              |   0
 .../server}/InviteDialog.vue                  |   0
 .../server/PendingInvitationDeleteDialog.vue} |   0
 .../settings/server/PendingInvitations.vue    |   4 +-
 .../server/ProjectDeleteDialog.vue}           |   0
 .../components/settings/server/Projects.vue   |   2 +-
 .../settings/user/ProfileDeleteAccount.vue    |   2 +-
 ...log.vue => ProfileDeleteAccountDialog.vue} |   0
 .../lib/common/generated/gql/gql.ts           |   6 +-
 .../lib/common/generated/gql/graphql.ts       |   6 +-
 .../pages/server-management/active-users.vue  | 234 ------------------
 .../pages/server-management/index.vue         | 171 -------------
 .../server-management/pending-invitations.vue | 219 ----------------
 .../pages/server-management/projects.vue      | 186 --------------
 .../src/components/layout/Dialog.vue          |   2 -
 .../layout/sidebar/menu/group/Group.vue       |   2 +-
 24 files changed, 16 insertions(+), 1154 deletions(-)
 delete mode 100644 packages/frontend-2/components/developer-settings/SectionHeader.vue
 delete mode 100644 packages/frontend-2/components/server-management/Card.vue
 delete mode 100644 packages/frontend-2/components/server-management/CardRow.vue
 delete mode 100644 packages/frontend-2/components/server-management/SettingsDialog.vue
 rename packages/frontend-2/components/{server-management => settings/server}/ChangeUserRoleDialog.vue (100%)
 rename packages/frontend-2/components/{server-management => settings/server}/DeleteUserDialog.vue (100%)
 rename packages/frontend-2/components/{server-management => settings/server}/InviteDialog.vue (100%)
 rename packages/frontend-2/components/{server-management/DeleteInvitationDialog.vue => settings/server/PendingInvitationDeleteDialog.vue} (100%)
 rename packages/frontend-2/components/{server-management/DeleteProjectDialog.vue => settings/server/ProjectDeleteDialog.vue} (100%)
 rename packages/frontend-2/components/settings/user/{DeleteAccountDialog.vue => ProfileDeleteAccountDialog.vue} (100%)
 delete mode 100644 packages/frontend-2/pages/server-management/active-users.vue
 delete mode 100644 packages/frontend-2/pages/server-management/index.vue
 delete mode 100644 packages/frontend-2/pages/server-management/pending-invitations.vue
 delete mode 100644 packages/frontend-2/pages/server-management/projects.vue

diff --git a/packages/frontend-2/components/developer-settings/SectionHeader.vue b/packages/frontend-2/components/developer-settings/SectionHeader.vue
deleted file mode 100644
index 096f639b71..0000000000
--- a/packages/frontend-2/components/developer-settings/SectionHeader.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <div class="flex flex-col gap-4">
-    <div class="flex flex-col md:flex-row gap-3 md:gap-0 justify-between">
-      <h2 v-if="subheading" class="text-xl">{{ title }}</h2>
-      <h1 v-else class="text-2xl font-semibold">{{ title }}</h1>
-      <div class="flex flex-wrap gap-2">
-        <FormButton
-          v-for="(button, index) in buttons"
-          :key="index"
-          v-bind="button.props"
-          class="shrink-0 whitespace-nowrap"
-          @click="($event) => button.onClick?.($event)"
-        >
-          {{ button.label }}
-        </FormButton>
-      </div>
-    </div>
-    <p class="text-sm">
-      <slot></slot>
-    </p>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { FormButton } from '@speckle/ui-components'
-
-type FormButtonProps = InstanceType<typeof FormButton>['$props']
-
-interface Button {
-  label: string
-  props: Record<string, unknown> & FormButtonProps
-  onClick?: (e: MouseEvent) => void
-}
-
-withDefaults(
-  defineProps<{
-    title: string
-    text?: string
-    buttons?: Button[]
-    subheading?: boolean
-  }>(),
-  {
-    buttons: () => []
-  }
-)
-</script>
diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index a6d1a692d4..7336b24094 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -127,7 +127,7 @@
         </MenuItems>
       </Transition>
     </Menu>
-    <ServerManagementInviteDialog v-model:open="showInviteDialog" />
+    <SettingsServerInviteDialog v-model:open="showInviteDialog" />
     <SettingsDialog v-model:open="showSettingsDialog" />
   </div>
 </template>
diff --git a/packages/frontend-2/components/onboarding/checklist/v1.vue b/packages/frontend-2/components/onboarding/checklist/v1.vue
index dd2914822d..0077c9ad40 100644
--- a/packages/frontend-2/components/onboarding/checklist/v1.vue
+++ b/packages/frontend-2/components/onboarding/checklist/v1.vue
@@ -216,7 +216,7 @@
     >
       <template #header>Your First Upload</template>
     </OnboardingDialogFirstSend>
-    <ServerManagementInviteDialog
+    <SettingsServerInviteDialog
       v-model:open="showServerInviteDialog"
       @update:open="(v) => (!v ? markComplete(3) : '')"
     />
diff --git a/packages/frontend-2/components/server-management/Card.vue b/packages/frontend-2/components/server-management/Card.vue
deleted file mode 100644
index 0818911472..0000000000
--- a/packages/frontend-2/components/server-management/Card.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div>
-    <div class="bg-foundation p-4 flex flex-col gap-4 rounded-md shadow-md">
-      <ServerManagementCardRow
-        v-for="info in serverInfo"
-        :key="info.title"
-        :title="info.title"
-        :value="info.value"
-        :cta="info.cta"
-        :icon="info.icon"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { CardInfo } from '~~/lib/server-management/helpers/types'
-
-defineProps<{
-  serverInfo: CardInfo[]
-}>()
-</script>
diff --git a/packages/frontend-2/components/server-management/CardRow.vue b/packages/frontend-2/components/server-management/CardRow.vue
deleted file mode 100644
index 6bf64d1f8b..0000000000
--- a/packages/frontend-2/components/server-management/CardRow.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <div class="flex flex-col gap-2">
-    <div class="flex items-center gap-1 text-foreground-2 text-sm">
-      <Component :is="icon" class="h-4 w-4" />
-      <span>{{ title }}</span>
-    </div>
-    <div class="flex justify-between items-center gap-4 sm:gap-8">
-      <span class="text-xl sm:text-2xl font-bold">{{ value }}</span>
-      <template v-if="cta?.type === 'button'">
-        <FormButton @click="cta?.action">
-          {{ cta.label }}
-        </FormButton>
-      </template>
-      <template v-else-if="cta?.type === 'link'">
-        <FormButton
-          color="invert"
-          class="shrink-0"
-          :icon-right="ArrowTopRightOnSquareIcon"
-          @click="cta?.action"
-        >
-          {{ cta.label }}
-        </FormButton>
-      </template>
-      <template v-else-if="cta?.type === 'text'">
-        <div
-          class="flex items-center gap-1 text-xs text-center sm:text-sm opacity-50 shrink-0"
-        >
-          <CheckCircleIcon class="h-4 w-4" />
-          {{ cta.label }}
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ArrowTopRightOnSquareIcon, CheckCircleIcon } from '@heroicons/vue/24/outline'
-import type { ConcreteComponent } from 'vue'
-import type { CTA } from '~~/lib/server-management/helpers/types'
-
-defineEmits<{
-  (e: 'cta-clicked', v: MouseEvent): void
-}>()
-
-defineProps<{
-  title: string
-  value: string
-  icon: ConcreteComponent
-  cta?: CTA
-}>()
-</script>
diff --git a/packages/frontend-2/components/server-management/SettingsDialog.vue b/packages/frontend-2/components/server-management/SettingsDialog.vue
deleted file mode 100644
index 35f4aee940..0000000000
--- a/packages/frontend-2/components/server-management/SettingsDialog.vue
+++ /dev/null
@@ -1,207 +0,0 @@
-<template>
-  <LayoutDialog v-model:open="isOpen" max-width="sm" :buttons="dialogButtons">
-    <template #header>Edit Settings</template>
-    <form @submit="onSubmit">
-      <div class="flex flex-col gap-4">
-        <FormTextInput
-          v-model="name"
-          label="This server's public name"
-          name="serverName"
-          color="foundation"
-          placeholder="Server name"
-          show-label
-          :show-required="true"
-          :rules="requiredRule"
-          :type="'text'"
-        />
-        <FormTextArea
-          v-model="description"
-          color="foundation"
-          label="Description"
-          name="description"
-          placeholder="Description"
-          show-label
-        />
-        <FormTextInput
-          v-model="company"
-          color="foundation"
-          label="Owner"
-          name="owner"
-          placeholder="Owner"
-          show-label
-        />
-        <FormTextInput
-          v-model="adminContact"
-          color="foundation"
-          label="Admin Email"
-          name="adminEmail"
-          placeholder="Admin Email"
-          show-label
-          :type="'email'"
-        />
-        <FormTextInput
-          v-model="termsOfService"
-          color="foundation"
-          label="Url pointing to the terms of service page"
-          name="terms"
-          show-label
-        />
-        <div class="text-sm flex flex-col gap-2 mt-2">
-          <FormCheckbox
-            v-model="inviteOnly"
-            label="Invite only mode - Only users with an invitation will be able to join"
-            name="inviteOnly"
-            show-label
-          />
-          <FormCheckbox
-            v-model="guestModeEnabled"
-            label="Guest mode - Enables the 'Guest' server role, which allows users to only contribute to projects that they're invited to"
-            name="guestModeEnabled"
-            show-label
-          />
-        </div>
-      </div>
-    </form>
-  </LayoutDialog>
-</template>
-
-<script setup lang="ts">
-import { useQuery, useMutation } from '@vue/apollo-composable'
-import { useForm } from 'vee-validate'
-import { isRequired } from '~~/lib/common/helpers/validation'
-import { useGlobalToast, ToastNotificationType } from '~~/lib/common/composables/toast'
-import {
-  LayoutDialog,
-  FormTextInput,
-  FormTextArea,
-  useFormCheckboxModel,
-  type LayoutDialogButton
-} from '@speckle/ui-components'
-import { useLogger } from '~~/composables/logging'
-import {
-  ROOT_QUERY,
-  convertThrowIntoFetchResult,
-  modifyObjectFields
-} from '~~/lib/common/helpers/graphql'
-import { serverInfoQuery } from '~~/lib/server-management/graphql/queries'
-import { serverInfoUpdateMutation } from '~~/lib/server-management/graphql/mutations'
-import type {
-  ServerInfoUpdateMutationVariables,
-  Query
-} from '~~/lib/common/generated/gql/graphql'
-
-type FormValues = {
-  name: string
-  description: string
-  company: string
-  adminContact: string
-  termsOfService: string
-  inviteOnly: boolean
-  guestModeEnabled: boolean
-}
-
-const logger = useLogger()
-const { triggerNotification } = useGlobalToast()
-const { handleSubmit } = useForm<FormValues>()
-const { result } = useQuery(serverInfoQuery)
-const { mutate: updateServerInfo } = useMutation(serverInfoUpdateMutation)
-
-const name = ref('')
-const description = ref('')
-const company = ref('')
-const adminContact = ref('')
-const termsOfService = ref('')
-const { model: inviteOnly, isChecked: isInviteOnlyChecked } = useFormCheckboxModel()
-const { model: guestModeEnabled, isChecked: isGuestModeChecked } =
-  useFormCheckboxModel()
-
-const isOpen = defineModel<boolean>('open', { required: true })
-
-const dialogButtons = computed((): LayoutDialogButton[] => [
-  {
-    text: 'Cancel',
-    props: { color: 'secondary', fullWidth: true, outline: true },
-    onClick: () => (isOpen.value = false)
-  },
-  {
-    text: 'Save',
-    props: { color: 'default', fullWidth: true, outline: false },
-    onClick: onSubmit
-  }
-])
-
-const requiredRule = [isRequired]
-
-const updateServerInfoAndCache = async (
-  variables: ServerInfoUpdateMutationVariables
-) => {
-  try {
-    const result = await updateServerInfo(variables, {
-      update: (cache, result) => {
-        if (result?.data?.serverInfoUpdate) {
-          // Modify 'serverInfo' field of ROOT_QUERY
-          modifyObjectFields<undefined, Query['serverInfo']>(
-            cache,
-            ROOT_QUERY,
-            (_fieldName, _variables, value) => {
-              const newData = variables.info
-              return {
-                ...value,
-                ...newData,
-                guestModeEnabled: newData.guestModeEnabled ?? value.guestModeEnabled
-              }
-            },
-            { fieldNameWhitelist: ['serverInfo'] }
-          )
-        }
-      }
-    })
-    return result
-  } catch (error) {
-    return convertThrowIntoFetchResult(error)
-  }
-}
-
-const onSubmit = handleSubmit(async () => {
-  const result = await updateServerInfoAndCache({
-    info: {
-      name: name.value,
-      description: description.value,
-      company: company.value,
-      adminContact: adminContact.value,
-      termsOfService: termsOfService.value,
-      inviteOnly: isInviteOnlyChecked.value,
-      guestModeEnabled: isGuestModeChecked.value
-    }
-  })
-
-  if (result && result.data) {
-    triggerNotification({
-      type: ToastNotificationType.Success,
-      title: 'Successfully saved',
-      description: 'Your server settings have been saved.'
-    })
-    isOpen.value = false
-  } else {
-    logger.error(result && result.errors)
-    triggerNotification({
-      type: ToastNotificationType.Danger,
-      title: 'Saving failed',
-      description: `Failed to update server info`
-    })
-  }
-})
-
-watch(isOpen, (newVal, oldVal) => {
-  if (!newVal || oldVal) return
-  if (!result.value?.serverInfo) return
-
-  name.value = result.value.serverInfo.name
-  description.value = result.value.serverInfo.description || ''
-  company.value = result.value.serverInfo.company || ''
-  adminContact.value = result.value.serverInfo.adminContact || ''
-  termsOfService.value = result.value.serverInfo.termsOfService || ''
-  isInviteOnlyChecked.value = !!result.value.serverInfo.inviteOnly
-  isGuestModeChecked.value = !!result.value.serverInfo.guestModeEnabled
-})
-</script>
diff --git a/packages/frontend-2/components/settings/server/ActiveUsers.vue b/packages/frontend-2/components/settings/server/ActiveUsers.vue
index 13cdfc7695..7452ee3df5 100644
--- a/packages/frontend-2/components/settings/server/ActiveUsers.vue
+++ b/packages/frontend-2/components/settings/server/ActiveUsers.vue
@@ -83,20 +83,20 @@
       @infinite="infiniteLoad"
     />
 
-    <ServerManagementDeleteUserDialog
+    <SettingsServerDeleteUserDialog
       v-model:open="showUserDeleteDialog"
       :user="userToModify"
       :result-variables="resultVariables"
     />
 
-    <ServerManagementChangeUserRoleDialog
+    <SettingsServerChangeUserRoleDialog
       v-model:open="showChangeUserRoleDialog"
       :user="userToModify"
       :old-role="oldRole"
       :new-role="newRole"
       hide-closer
     />
-    <ServerManagementInviteDialog v-model:open="showInviteDialog" />
+    <SettingsServerInviteDialog v-model:open="showInviteDialog" />
   </div>
 </template>
 
diff --git a/packages/frontend-2/components/server-management/ChangeUserRoleDialog.vue b/packages/frontend-2/components/settings/server/ChangeUserRoleDialog.vue
similarity index 100%
rename from packages/frontend-2/components/server-management/ChangeUserRoleDialog.vue
rename to packages/frontend-2/components/settings/server/ChangeUserRoleDialog.vue
diff --git a/packages/frontend-2/components/server-management/DeleteUserDialog.vue b/packages/frontend-2/components/settings/server/DeleteUserDialog.vue
similarity index 100%
rename from packages/frontend-2/components/server-management/DeleteUserDialog.vue
rename to packages/frontend-2/components/settings/server/DeleteUserDialog.vue
diff --git a/packages/frontend-2/components/server-management/InviteDialog.vue b/packages/frontend-2/components/settings/server/InviteDialog.vue
similarity index 100%
rename from packages/frontend-2/components/server-management/InviteDialog.vue
rename to packages/frontend-2/components/settings/server/InviteDialog.vue
diff --git a/packages/frontend-2/components/server-management/DeleteInvitationDialog.vue b/packages/frontend-2/components/settings/server/PendingInvitationDeleteDialog.vue
similarity index 100%
rename from packages/frontend-2/components/server-management/DeleteInvitationDialog.vue
rename to packages/frontend-2/components/settings/server/PendingInvitationDeleteDialog.vue
diff --git a/packages/frontend-2/components/settings/server/PendingInvitations.vue b/packages/frontend-2/components/settings/server/PendingInvitations.vue
index 1ffc5f2a90..f859e5907d 100644
--- a/packages/frontend-2/components/settings/server/PendingInvitations.vue
+++ b/packages/frontend-2/components/settings/server/PendingInvitations.vue
@@ -67,7 +67,7 @@
       </template>
     </LayoutTable>
 
-    <ServerManagementDeleteInvitationDialog
+    <SettingsServerPendingInvitationDeleteDialog
       v-model:open="showDeleteInvitationDialog"
       :invite="inviteToModify"
       :result-variables="resultVariables"
@@ -81,7 +81,7 @@
       class="py-4"
       @infinite="infiniteLoad"
     />
-    <ServerManagementInviteDialog v-model:open="showInviteDialog" />
+    <SettingsServerInviteDialog v-model:open="showInviteDialog" />
   </div>
 </template>
 
diff --git a/packages/frontend-2/components/server-management/DeleteProjectDialog.vue b/packages/frontend-2/components/settings/server/ProjectDeleteDialog.vue
similarity index 100%
rename from packages/frontend-2/components/server-management/DeleteProjectDialog.vue
rename to packages/frontend-2/components/settings/server/ProjectDeleteDialog.vue
diff --git a/packages/frontend-2/components/settings/server/Projects.vue b/packages/frontend-2/components/settings/server/Projects.vue
index 3647256bb9..da2dbf08cf 100644
--- a/packages/frontend-2/components/settings/server/Projects.vue
+++ b/packages/frontend-2/components/settings/server/Projects.vue
@@ -82,7 +82,7 @@
       @infinite="infiniteLoad"
     />
 
-    <ServerManagementDeleteProjectDialog
+    <SettingsServerProjectDeleteDialog
       v-model:open="showProjectDeleteDialog"
       :project="projectToModify"
       title="Delete Project"
diff --git a/packages/frontend-2/components/settings/user/ProfileDeleteAccount.vue b/packages/frontend-2/components/settings/user/ProfileDeleteAccount.vue
index c910bc34dc..9b9cf34061 100644
--- a/packages/frontend-2/components/settings/user/ProfileDeleteAccount.vue
+++ b/packages/frontend-2/components/settings/user/ProfileDeleteAccount.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <SettingsUserDeleteAccountDialog v-model:open="isOpen" :user="user" />
+    <SettingsUserProfileDeleteAccountDialog v-model:open="isOpen" :user="user" />
     <div class="flex flex-col space-y-6">
       <SettingsSectionHeader title="Delete Account" subheading />
       <div class="rounded border bg-foundation-page border-outline-3 text-sm py-4 px-6">
diff --git a/packages/frontend-2/components/settings/user/DeleteAccountDialog.vue b/packages/frontend-2/components/settings/user/ProfileDeleteAccountDialog.vue
similarity index 100%
rename from packages/frontend-2/components/settings/user/DeleteAccountDialog.vue
rename to packages/frontend-2/components/settings/user/ProfileDeleteAccountDialog.vue
diff --git a/packages/frontend-2/lib/common/generated/gql/gql.ts b/packages/frontend-2/lib/common/generated/gql/gql.ts
index ae5a7dc07f..5a589a9f1b 100644
--- a/packages/frontend-2/lib/common/generated/gql/gql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/gql.ts
@@ -83,8 +83,8 @@ const documents = {
     "\n  fragment ProjectsDashboardFilled on ProjectCollection {\n    items {\n      ...ProjectDashboardItem\n    }\n  }\n": types.ProjectsDashboardFilledFragmentDoc,
     "\n  fragment ProjectsInviteBanner on PendingStreamCollaborator {\n    id\n    invitedBy {\n      ...LimitedUserAvatar\n    }\n    projectId\n    projectName\n    token\n    user {\n      id\n    }\n  }\n": types.ProjectsInviteBannerFragmentDoc,
     "\n  fragment ProjectsInviteBanners on User {\n    projectInvites {\n      ...ProjectsInviteBanner\n    }\n  }\n": types.ProjectsInviteBannersFragmentDoc,
-    "\n  fragment UserProfileEditDialogDeleteAccount_User on User {\n    id\n    email\n  }\n": types.UserProfileEditDialogDeleteAccount_UserFragmentDoc,
     "\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n": types.UserProfileEditDialogNotificationPreferences_UserFragmentDoc,
+    "\n  fragment UserProfileEditDialogDeleteAccount_User on User {\n    id\n    email\n  }\n": types.UserProfileEditDialogDeleteAccount_UserFragmentDoc,
     "\n  fragment UserProfileEditDialogBio_User on User {\n    id\n    name\n    company\n    bio\n    ...UserProfileEditDialogAvatar_User\n  }\n": types.UserProfileEditDialogBio_UserFragmentDoc,
     "\n  fragment UserProfileEditDialogAvatar_User on User {\n    id\n    avatar\n    ...ActiveUserAvatar\n  }\n": types.UserProfileEditDialogAvatar_UserFragmentDoc,
     "\n  fragment ModelPageProject on Project {\n    id\n    createdAt\n    name\n    visibility\n  }\n": types.ModelPageProjectFragmentDoc,
@@ -538,11 +538,11 @@ export function graphql(source: "\n  fragment ProjectsInviteBanners on User {\n
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment UserProfileEditDialogDeleteAccount_User on User {\n    id\n    email\n  }\n"): (typeof documents)["\n  fragment UserProfileEditDialogDeleteAccount_User on User {\n    id\n    email\n  }\n"];
+export function graphql(source: "\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n"): (typeof documents)["\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n"): (typeof documents)["\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n"];
+export function graphql(source: "\n  fragment UserProfileEditDialogDeleteAccount_User on User {\n    id\n    email\n  }\n"): (typeof documents)["\n  fragment UserProfileEditDialogDeleteAccount_User on User {\n    id\n    email\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/packages/frontend-2/lib/common/generated/gql/graphql.ts b/packages/frontend-2/lib/common/generated/gql/graphql.ts
index eed78136b6..3dddc7de60 100644
--- a/packages/frontend-2/lib/common/generated/gql/graphql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/graphql.ts
@@ -3555,10 +3555,10 @@ export type ProjectsInviteBannerFragment = { __typename?: 'PendingStreamCollabor
 
 export type ProjectsInviteBannersFragment = { __typename?: 'User', projectInvites: Array<{ __typename?: 'PendingStreamCollaborator', id: string, projectId: string, projectName: string, token?: string | null, invitedBy: { __typename?: 'LimitedUser', id: string, name: string, avatar?: string | null }, user?: { __typename?: 'LimitedUser', id: string } | null }> };
 
-export type UserProfileEditDialogDeleteAccount_UserFragment = { __typename?: 'User', id: string, email?: string | null };
-
 export type UserProfileEditDialogNotificationPreferences_UserFragment = { __typename?: 'User', id: string, notificationPreferences: {} };
 
+export type UserProfileEditDialogDeleteAccount_UserFragment = { __typename?: 'User', id: string, email?: string | null };
+
 export type UserProfileEditDialogBio_UserFragment = { __typename?: 'User', id: string, name: string, company?: string | null, bio?: string | null, avatar?: string | null };
 
 export type UserProfileEditDialogAvatar_UserFragment = { __typename?: 'User', id: string, avatar?: string | null, name: string };
@@ -4589,8 +4589,8 @@ export const ProjectDashboardItemFragmentDoc = {"kind":"Document","definitions":
 export const ProjectsDashboardFilledFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectsDashboardFilled"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ProjectCollection"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDashboardItem"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectsPageTeamDialogManagePermissions_Project"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"visibility"}},{"kind":"Field","name":{"kind":"Name","value":"role"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectsModelPageEmbed_Project"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectsPageTeamDialogManagePermissions_Project"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageModelsActions_Project"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectsModelPageEmbed_Project"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageModelsCardProject"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"visibility"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageModelsActions_Project"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectDashboardItemNoModels"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"team"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageModelsCardProject"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PendingFileUpload"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"FileUpload"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"projectId"}},{"kind":"Field","name":{"kind":"Name","value":"modelName"}},{"kind":"Field","name":{"kind":"Name","value":"convertedStatus"}},{"kind":"Field","name":{"kind":"Name","value":"convertedMessage"}},{"kind":"Field","name":{"kind":"Name","value":"uploadDate"}},{"kind":"Field","name":{"kind":"Name","value":"convertedLastUpdate"}},{"kind":"Field","name":{"kind":"Name","value":"fileType"}},{"kind":"Field","name":{"kind":"Name","value":"fileName"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageModelsCardRenameDialog"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Model"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageModelsCardDeleteDialog"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Model"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageModelsActions"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Model"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FunctionRunStatusForSummary"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AutomateFunctionRun"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"TriggeredAutomationsStatusSummary"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"TriggeredAutomationsStatus"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"automationRuns"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"functionRuns"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"FunctionRunStatusForSummary"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AutomateRunsTriggerStatusDialogFunctionRun_AutomateFunctionRun"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AutomateFunctionRun"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"results"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"statusMessage"}},{"kind":"Field","name":{"kind":"Name","value":"contextView"}},{"kind":"Field","name":{"kind":"Name","value":"function"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"logo"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AutomationsStatusOrderedRuns_AutomationRun"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AutomateRun"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"automation"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"functionRuns"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AutomateRunsTriggerStatusDialogRunsRows_AutomateRun"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AutomateRun"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"functionRuns"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"AutomateRunsTriggerStatusDialogFunctionRun_AutomateFunctionRun"}}]}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"AutomationsStatusOrderedRuns_AutomationRun"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AutomateRunsTriggerStatusDialog_TriggeredAutomationsStatus"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"TriggeredAutomationsStatus"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"automationRuns"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"AutomateRunsTriggerStatusDialogRunsRows_AutomateRun"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AutomateRunsTriggerStatus_TriggeredAutomationsStatus"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"TriggeredAutomationsStatus"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"TriggeredAutomationsStatusSummary"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"AutomateRunsTriggerStatusDialog_TriggeredAutomationsStatus"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageLatestItemsModelItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Model"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","alias":{"kind":"Name","value":"versionCount"},"name":{"kind":"Name","value":"versions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"0"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"commentThreadCount"},"name":{"kind":"Name","value":"commentThreads"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"0"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}},{"kind":"Field","name":{"kind":"Name","value":"pendingImportedVersions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"1"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PendingFileUpload"}}]}},{"kind":"Field","name":{"kind":"Name","value":"previewUrl"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageModelsCardRenameDialog"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageModelsCardDeleteDialog"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageModelsActions"}},{"kind":"Field","name":{"kind":"Name","value":"automationsStatus"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"AutomateRunsTriggerStatus_TriggeredAutomationsStatus"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectDashboardItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDashboardItemNoModels"}},{"kind":"Field","name":{"kind":"Name","value":"models"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"4"}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"onlyWithVersions"},"value":{"kind":"BooleanValue","value":true}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageLatestItemsModelItem"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"pendingImportedModels"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"4"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PendingFileUpload"}}]}}]}}]} as unknown as DocumentNode<ProjectsDashboardFilledFragment, unknown>;
 export const ProjectsInviteBannerFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectsInviteBanner"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PendingStreamCollaborator"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"invitedBy"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LimitedUserAvatar"}}]}},{"kind":"Field","name":{"kind":"Name","value":"projectId"}},{"kind":"Field","name":{"kind":"Name","value":"projectName"}},{"kind":"Field","name":{"kind":"Name","value":"token"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LimitedUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LimitedUser"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]} as unknown as DocumentNode<ProjectsInviteBannerFragment, unknown>;
 export const ProjectsInviteBannersFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectsInviteBanners"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectInvites"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectsInviteBanner"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LimitedUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LimitedUser"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectsInviteBanner"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PendingStreamCollaborator"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"invitedBy"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LimitedUserAvatar"}}]}},{"kind":"Field","name":{"kind":"Name","value":"projectId"}},{"kind":"Field","name":{"kind":"Name","value":"projectName"}},{"kind":"Field","name":{"kind":"Name","value":"token"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<ProjectsInviteBannersFragment, unknown>;
-export const UserProfileEditDialogDeleteAccount_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogDeleteAccount_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogDeleteAccount_UserFragment, unknown>;
 export const UserProfileEditDialogNotificationPreferences_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogNotificationPreferences_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"notificationPreferences"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogNotificationPreferences_UserFragment, unknown>;
+export const UserProfileEditDialogDeleteAccount_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogDeleteAccount_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogDeleteAccount_UserFragment, unknown>;
 export const ActiveUserAvatarFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ActiveUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]} as unknown as DocumentNode<ActiveUserAvatarFragment, unknown>;
 export const UserProfileEditDialogAvatar_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogAvatar_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ActiveUserAvatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ActiveUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogAvatar_UserFragment, unknown>;
 export const UserProfileEditDialogBio_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogBio_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"bio"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"UserProfileEditDialogAvatar_User"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ActiveUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogAvatar_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ActiveUserAvatar"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogBio_UserFragment, unknown>;
diff --git a/packages/frontend-2/pages/server-management/active-users.vue b/packages/frontend-2/pages/server-management/active-users.vue
deleted file mode 100644
index 692da16754..0000000000
--- a/packages/frontend-2/pages/server-management/active-users.vue
+++ /dev/null
@@ -1,234 +0,0 @@
-<template>
-  <div>
-    <Portal to="navigation">
-      <HeaderNavLink to="/server-management" name="Server Management"></HeaderNavLink>
-      <HeaderNavLink
-        to="/server-management/active-users"
-        name="Active Users"
-      ></HeaderNavLink>
-    </Portal>
-
-    <div class="flex justify-between items-center mb-8">
-      <h1 class="h4 font-bold">Active Users</h1>
-      <FormButton :icon-left="UserPlusIcon" @click="toggleInviteDialog">
-        Invite
-      </FormButton>
-    </div>
-
-    <FormTextInput
-      size="lg"
-      name="search"
-      :custom-icon="MagnifyingGlassIcon"
-      color="foundation"
-      full-width
-      search
-      :show-clear="!!searchString"
-      placeholder="Search Users"
-      class="rounded-md border border-outline-3"
-      @update:model-value="debounceSearchUpdate"
-      @change="($event) => searchUpdateHandler($event.value)"
-    />
-
-    <LayoutTable
-      class="mt-8"
-      :columns="[
-        { id: 'name', header: 'Name', classes: 'col-span-3 truncate' },
-        { id: 'email', header: 'Email', classes: 'col-span-3 truncate' },
-        { id: 'emailState', header: 'Email State', classes: 'col-span-2' },
-        { id: 'company', header: 'Company', classes: 'col-span-2 truncate' },
-        { id: 'role', header: 'Role', classes: 'col-span-2' }
-      ]"
-      :items="users"
-      :buttons="[{ icon: TrashIcon, label: 'Delete', action: openUserDeleteDialog }]"
-    >
-      <template #name="{ item }">
-        <div class="flex items-center gap-2">
-          <UserAvatar v-if="isUser(item)" :user="item" />
-          <span class="truncate">
-            {{ isUser(item) ? item.name : '' }}
-          </span>
-        </div>
-      </template>
-
-      <template #email="{ item }">
-        {{ isUser(item) ? item.email : '' }}
-      </template>
-
-      <template #emailState="{ item }">
-        <div class="flex items-center gap-2 select-none">
-          <template v-if="isUser(item) && item.verified">
-            <CheckCircleIcon class="h-4 w-4 text-primary" />
-            <span>Verified</span>
-          </template>
-          <template v-else>
-            <ExclamationCircleIcon class="h-4 w-4 text-danger" />
-            <span>Not verified</span>
-          </template>
-        </div>
-      </template>
-
-      <template #company="{ item }">
-        {{ isUser(item) ? item.company : '' }}
-      </template>
-
-      <template #role="{ item }">
-        <FormSelectServerRoles
-          :allow-guest="isGuestMode"
-          allow-admin
-          allow-archived
-          :model-value="isUser(item) ? item.role : undefined"
-          :disabled="isUser(item) && isCurrentUser(item)"
-          fully-control-value
-          @update:model-value="(newRoleValue) => isUser(item) && !isArray(newRoleValue) && newRoleValue && openChangeUserRoleDialog(item, newRoleValue as ServerRoles)"
-        />
-      </template>
-    </LayoutTable>
-
-    <CommonLoadingBar v-if="loading && !users?.length" loading />
-
-    <InfiniteLoading
-      v-if="users?.length"
-      :settings="{ identifier: infiniteLoaderId }"
-      class="-mt-24 -mb-24"
-      @infinite="infiniteLoad"
-    />
-
-    <ServerManagementDeleteUserDialog
-      v-model:open="showUserDeleteDialog"
-      :user="userToModify"
-      :result-variables="resultVariables"
-    />
-
-    <ServerManagementChangeUserRoleDialog
-      v-model:open="showChangeUserRoleDialog"
-      :user="userToModify"
-      :old-role="oldRole"
-      :new-role="newRole"
-      hide-closer
-    />
-    <ServerManagementInviteDialog v-model:open="showInviteDialog" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useQuery } from '@vue/apollo-composable'
-import { debounce, isArray } from 'lodash-es'
-import { useLogger } from '~~/composables/logging'
-import type { InfiniteLoaderState } from '~~/lib/global/helpers/components'
-import type { Nullable, ServerRoles, Optional } from '@speckle/shared'
-import { getUsersQuery } from '~~/lib/server-management/graphql/queries'
-import type { ItemType, UserItem } from '~~/lib/server-management/helpers/types'
-import { isUser } from '~~/lib/server-management/helpers/utils'
-import { useActiveUser } from '~~/lib/auth/composables/activeUser'
-import {
-  MagnifyingGlassIcon,
-  ExclamationCircleIcon,
-  CheckCircleIcon,
-  TrashIcon,
-  UserPlusIcon
-} from '@heroicons/vue/24/outline'
-import { useServerInfo } from '~~/lib/core/composables/server'
-
-useHead({
-  title: 'Active Users'
-})
-
-definePageMeta({
-  middleware: ['admin']
-})
-
-const logger = useLogger()
-const { activeUser } = useActiveUser()
-const { isGuestMode } = useServerInfo()
-
-const userToModify: Ref<Nullable<UserItem>> = ref(null)
-const searchString = ref('')
-const showUserDeleteDialog = ref(false)
-const showChangeUserRoleDialog = ref(false)
-const newRole = ref<ServerRoles>()
-const infiniteLoaderId = ref('')
-const showInviteDialog = ref(false)
-
-const queryVariables = computed(() => ({
-  limit: 50,
-  query: searchString.value
-}))
-
-const {
-  result: extraPagesResult,
-  fetchMore: fetchMorePages,
-  variables: resultVariables,
-  onResult,
-  loading
-} = useQuery(getUsersQuery, queryVariables)
-
-const oldRole = computed(() => userToModify.value?.role as Optional<ServerRoles>)
-
-const moreToLoad = computed(
-  () =>
-    !extraPagesResult.value?.admin?.userList ||
-    extraPagesResult.value.admin.userList.items.length <
-      extraPagesResult.value.admin.userList.totalCount
-)
-
-const users = computed(() => extraPagesResult.value?.admin.userList.items || [])
-
-const isCurrentUser = (userItem: UserItem) => {
-  return userItem.id === activeUser.value?.id
-}
-
-const openUserDeleteDialog = (item: ItemType) => {
-  if (isUser(item)) {
-    userToModify.value = item
-    showUserDeleteDialog.value = true
-  }
-}
-
-const openChangeUserRoleDialog = (user: UserItem, newRoleValue: ServerRoles) => {
-  if (user.role === newRoleValue) {
-    return
-  }
-  userToModify.value = user
-  newRole.value = newRoleValue
-  showChangeUserRoleDialog.value = true
-}
-
-const infiniteLoad = async (state: InfiniteLoaderState) => {
-  const cursor = extraPagesResult.value?.admin?.userList.cursor || null
-  if (!moreToLoad.value || !cursor) return state.complete()
-
-  try {
-    await fetchMorePages({
-      variables: {
-        cursor
-      }
-    })
-  } catch (e) {
-    logger.error(e)
-    state.error()
-    return
-  }
-
-  state.loaded()
-  if (!moreToLoad.value) {
-    state.complete()
-  }
-}
-
-const searchUpdateHandler = (value: string) => {
-  searchString.value = value
-}
-
-const debounceSearchUpdate = debounce(searchUpdateHandler, 500)
-
-const calculateLoaderId = () => {
-  infiniteLoaderId.value = resultVariables.value?.query || ''
-}
-
-const toggleInviteDialog = () => {
-  showInviteDialog.value = true
-}
-
-onResult(calculateLoaderId)
-</script>
diff --git a/packages/frontend-2/pages/server-management/index.vue b/packages/frontend-2/pages/server-management/index.vue
deleted file mode 100644
index 9b5dbdfdbb..0000000000
--- a/packages/frontend-2/pages/server-management/index.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<template>
-  <div>
-    <Portal to="navigation">
-      <HeaderNavLink to="/server-management" name="Server Management"></HeaderNavLink>
-    </Portal>
-    <div
-      class="flex flex-col md:flex-row space-y-2 space-x-2 justify-between mb-4 md:items-center"
-    >
-      <div>
-        <h5 class="h4 font-bold">Your server at a glance</h5>
-      </div>
-    </div>
-
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-10">
-      <ServerManagementCard
-        :server-info="serverData"
-        @cta-clicked="showDialog = true"
-      />
-
-      <ServerManagementSettingsDialog v-model:open="showDialog" />
-
-      <ServerManagementCard :server-info="userData" />
-      <ServerManagementCard :server-info="projectData" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { serverManagementDataQuery } from '~~/lib/server-management/graphql/queries'
-import { useQuery } from '@vue/apollo-composable'
-import { ref, computed } from 'vue'
-import type { CardInfo } from '~~/lib/server-management/helpers/types'
-import {
-  ServerIcon,
-  UsersIcon,
-  EnvelopeIcon,
-  ChartBarIcon,
-  HomeIcon
-} from '@heroicons/vue/24/solid'
-import { useRouter } from 'vue-router'
-
-interface GithubRelease {
-  url: string
-  assets_url: string
-  upload_url: string
-  html_url: string
-  id: number
-  node_id: string
-  tag_name: string
-}
-
-useHead({
-  title: 'Server Management'
-})
-
-definePageMeta({
-  middleware: ['admin']
-})
-
-const logger = useLogger()
-const router = useRouter()
-const { result } = useQuery(serverManagementDataQuery)
-
-const showDialog = ref(false)
-const latestVersion = ref<string | null>(null)
-
-const currentVersion = computed(() => result.value?.serverInfo.version)
-const isLatestVersion = computed(() => {
-  return (
-    !latestVersion.value ||
-    currentVersion.value === latestVersion.value ||
-    currentVersion.value === 'dev' ||
-    currentVersion.value?.includes('alpha') ||
-    currentVersion.value === 'N/A'
-  )
-})
-const serverData = computed((): CardInfo[] => [
-  {
-    title: 'Server',
-    value: result.value?.serverInfo.name || 'N/A',
-    icon: ServerIcon,
-    cta: {
-      type: 'button',
-      label: 'Edit',
-      action: () => {
-        showDialog.value = true
-      }
-    }
-  },
-  {
-    title: 'Speckle Version',
-    value: currentVersion.value || 'N/A',
-    icon: ChartBarIcon,
-    cta: !isLatestVersion.value
-      ? {
-          type: 'link',
-          label: 'Update is available',
-          action: openGithubReleasePage
-        }
-      : {
-          type: 'text',
-          label: 'Up-to-date'
-        }
-  }
-])
-const userData = computed((): CardInfo[] => [
-  {
-    title: 'Active users',
-    value: result.value?.admin.userList.totalCount?.toString() || 'N/A',
-    icon: UsersIcon,
-    cta: {
-      type: 'button',
-      label: 'Manage',
-      action: () => navigate('/server-management/active-users/')
-    }
-  },
-  {
-    title: 'Pending invitations',
-    value: result.value?.admin.inviteList.totalCount?.toString() || 'N/A',
-    icon: EnvelopeIcon,
-    cta: {
-      type: 'button',
-      label: 'Manage',
-      action: () => navigate('/server-management/pending-invitations/')
-    }
-  }
-])
-const projectData = computed((): CardInfo[] => [
-  {
-    title: 'Projects',
-    value: result.value?.admin.projectList.totalCount?.toString() || 'N/A',
-    icon: HomeIcon,
-    cta: {
-      type: 'button',
-      label: 'Manage',
-      action: () => navigate('/server-management/projects/')
-    }
-  }
-])
-
-const openGithubReleasePage = () => {
-  window.open('https://github.com/specklesystems/speckle-server/releases', '_blank')
-}
-
-const navigate = async (path: string) => {
-  try {
-    await router.push(path)
-  } catch (error) {
-    logger.error('Failed to navigate:', error)
-  }
-}
-
-async function getLatestVersion(): Promise<string | null> {
-  try {
-    const response: Response = await fetch(
-      'https://api.github.com/repos/specklesystems/speckle-server/releases/latest'
-    )
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
-    } else {
-      const data = (await response.json()) as GithubRelease
-      return data.tag_name
-    }
-  } catch (err) {
-    logger.error(err)
-    return null
-  }
-}
-
-latestVersion.value = await getLatestVersion()
-</script>
diff --git a/packages/frontend-2/pages/server-management/pending-invitations.vue b/packages/frontend-2/pages/server-management/pending-invitations.vue
deleted file mode 100644
index fe1a6bc843..0000000000
--- a/packages/frontend-2/pages/server-management/pending-invitations.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<template>
-  <div>
-    <Portal to="navigation">
-      <HeaderNavLink to="/server-management" name="Server Management"></HeaderNavLink>
-      <HeaderNavLink
-        to="/server-management/pending-invitations"
-        name="Pending Invitations"
-      ></HeaderNavLink>
-    </Portal>
-
-    <div class="flex justify-between items-center mb-8">
-      <h1 class="h4 font-bold">Pending Invitations</h1>
-      <FormButton :icon-left="UserPlusIcon" @click="toggleInviteDialog">
-        Invite
-      </FormButton>
-    </div>
-
-    <FormTextInput
-      size="lg"
-      name="search"
-      :custom-icon="MagnifyingGlassIcon"
-      color="foundation"
-      full-width
-      search
-      :show-clear="!!searchString"
-      placeholder="Search Invitations"
-      class="rounded-md border border-outline-3"
-      @update:model-value="debounceSearchUpdate"
-      @change="($event) => searchUpdateHandler($event.value)"
-    />
-
-    <LayoutTable
-      class="mt-8"
-      :columns="[
-        { id: 'email', header: 'Email', classes: 'col-span-5 truncate' },
-        { id: 'invitedBy', header: 'Invited By', classes: 'col-span-4' },
-        { id: 'resend', header: '', classes: 'col-span-3' }
-      ]"
-      :items="invites"
-      :buttons="[
-        { icon: TrashIcon, label: 'Delete', action: openDeleteInvitationDialog }
-      ]"
-    >
-      <template #email="{ item }">
-        {{ isInvite(item) ? item.email : '' }}
-      </template>
-
-      <template #invitedBy="{ item }">
-        <div class="flex items-center gap-2 py-1">
-          <UserAvatar v-if="isInvite(item)" :user="item.invitedBy" />
-          <span class="truncate">
-            {{ isInvite(item) ? item.invitedBy.name : '' }}
-          </span>
-        </div>
-      </template>
-
-      <template #resend="{ item }">
-        <FormButton
-          :link="true"
-          :class="{
-            'font-semibold': true,
-            'text-primary': !successfullyResentInvites.includes(item.id),
-            'text-foreground': successfullyResentInvites.includes(item.id)
-          }"
-          :disabled="successfullyResentInvites.includes(item.id)"
-          @click="resendInvitation(item as InviteItem)"
-        >
-          {{
-            successfullyResentInvites.includes(item.id)
-              ? 'Invitation Resent'
-              : 'Resend Invitation'
-          }}
-        </FormButton>
-      </template>
-    </LayoutTable>
-
-    <ServerManagementDeleteInvitationDialog
-      v-model:open="showDeleteInvitationDialog"
-      :invite="inviteToModify"
-      :result-variables="resultVariables"
-    />
-
-    <CommonLoadingBar v-if="loading && !invites?.length" loading />
-
-    <InfiniteLoading
-      v-if="invites?.length"
-      :settings="{ identifier: infiniteLoaderId }"
-      class="py-4"
-      @infinite="infiniteLoad"
-    />
-    <ServerManagementInviteDialog v-model:open="showInviteDialog" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { debounce } from 'lodash-es'
-import { useQuery, useMutation } from '@vue/apollo-composable'
-import { MagnifyingGlassIcon, TrashIcon, UserPlusIcon } from '@heroicons/vue/24/outline'
-import type { ItemType, InviteItem } from '~~/lib/server-management/helpers/types'
-import type { InfiniteLoaderState } from '~~/lib/global/helpers/components'
-import { getInvitesQuery } from '~~/lib/server-management/graphql/queries'
-import { adminResendInviteMutation } from '~~/lib/server-management/graphql/mutations'
-import { isInvite } from '~~/lib/server-management/helpers/utils'
-import { useGlobalToast, ToastNotificationType } from '~~/lib/common/composables/toast'
-import {
-  convertThrowIntoFetchResult,
-  getFirstErrorMessage
-} from '~~/lib/common/helpers/graphql'
-
-useHead({
-  title: 'Pending Invitations'
-})
-
-definePageMeta({
-  middleware: ['admin']
-})
-
-const logger = useLogger()
-const { triggerNotification } = useGlobalToast()
-const { mutate: resendInvitationMutation } = useMutation(adminResendInviteMutation)
-
-const inviteToModify = ref<InviteItem | null>(null)
-const searchString = ref('')
-const showDeleteInvitationDialog = ref(false)
-const infiniteLoaderId = ref('')
-const successfullyResentInvites = ref<string[]>([])
-const showInviteDialog = ref(false)
-
-const {
-  result: extraPagesResult,
-  fetchMore: fetchMorePages,
-  variables: resultVariables,
-  onResult,
-  loading
-} = useQuery(getInvitesQuery, () => ({
-  limit: 50,
-  query: searchString.value
-}))
-
-const moreToLoad = computed(
-  () =>
-    !extraPagesResult.value?.admin?.inviteList ||
-    extraPagesResult.value.admin.inviteList.items.length <
-      extraPagesResult.value.admin.inviteList.totalCount
-)
-
-const invites = computed(() => extraPagesResult.value?.admin.inviteList.items || [])
-
-const openDeleteInvitationDialog = (item: ItemType) => {
-  if (isInvite(item)) {
-    inviteToModify.value = item
-    showDeleteInvitationDialog.value = true
-  }
-}
-
-const resendInvitation = async (item: InviteItem) => {
-  const inviteId = item.id
-  if (!inviteId) return
-
-  const result = await resendInvitationMutation({ inviteId }).catch(
-    convertThrowIntoFetchResult
-  )
-
-  if (result?.data?.inviteResend) {
-    successfullyResentInvites.value.push(inviteId)
-    triggerNotification({
-      type: ToastNotificationType.Success,
-      title: 'Invitation Resent',
-      description: 'The invitation has been successfully resent'
-    })
-  } else {
-    const errorMessage = getFirstErrorMessage(result?.errors)
-    triggerNotification({
-      type: ToastNotificationType.Danger,
-      title: 'Failed to resend invitation',
-      description: errorMessage
-    })
-  }
-}
-
-const infiniteLoad = async (state: InfiniteLoaderState) => {
-  const cursor = extraPagesResult.value?.admin?.inviteList.cursor || null
-  if (!moreToLoad.value || !cursor) return state.complete()
-
-  try {
-    await fetchMorePages({
-      variables: {
-        cursor
-      }
-    })
-  } catch (e) {
-    logger.error(e)
-    state.error()
-    return
-  }
-
-  state.loaded()
-  if (!moreToLoad.value) {
-    state.complete()
-  }
-}
-
-const searchUpdateHandler = (value: string) => {
-  searchString.value = value
-}
-
-const debounceSearchUpdate = debounce(searchUpdateHandler, 500)
-
-const calculateLoaderId = () => {
-  infiniteLoaderId.value = resultVariables.value?.query || ''
-}
-
-const toggleInviteDialog = () => {
-  showInviteDialog.value = true
-}
-
-onResult(calculateLoaderId)
-</script>
diff --git a/packages/frontend-2/pages/server-management/projects.vue b/packages/frontend-2/pages/server-management/projects.vue
deleted file mode 100644
index d6bea83cc3..0000000000
--- a/packages/frontend-2/pages/server-management/projects.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<template>
-  <div>
-    <Portal to="navigation">
-      <HeaderNavLink to="/server-management" name="Server Management"></HeaderNavLink>
-      <HeaderNavLink to="/server-management/projects" name="Projects"></HeaderNavLink>
-    </Portal>
-
-    <div class="flex justify-between items-center mb-8">
-      <h1 class="h4 font-bold">Projects</h1>
-      <FormButton :icon-left="PlusIcon" @click="openNewProject = true">New</FormButton>
-    </div>
-
-    <FormTextInput
-      size="lg"
-      name="search"
-      :custom-icon="MagnifyingGlassIcon"
-      color="foundation"
-      full-width
-      search
-      :show-clear="!!searchString"
-      placeholder="Search Projects"
-      class="rounded-md border border-outline-3"
-      @update:model-value="debounceSearchUpdate"
-      @change="($event) => searchUpdateHandler($event.value)"
-    />
-
-    <LayoutTable
-      class="mt-8"
-      :columns="[
-        { id: 'name', header: 'Name', classes: 'col-span-3 truncate' },
-        { id: 'type', header: 'Type', classes: 'col-span-1' },
-        { id: 'created', header: 'Created', classes: 'col-span-2' },
-        { id: 'modified', header: 'Modified', classes: 'col-span-2' },
-        { id: 'models', header: 'Models', classes: 'col-span-1 text-right' },
-        { id: 'versions', header: 'Versions', classes: 'col-span-1 text-right' },
-        { id: 'contributors', header: 'Contributors', classes: 'col-span-2' }
-      ]"
-      :items="projects"
-      :buttons="[{ icon: TrashIcon, label: 'Delete', action: openProjectDeleteDialog }]"
-      :on-row-click="handleProjectClick"
-    >
-      <template #name="{ item }">
-        {{ isProject(item) ? item.name : '' }}
-      </template>
-
-      <template #type="{ item }">
-        <span class="capitalize">
-          {{ isProject(item) ? item.visibility.toLowerCase() : '' }}
-        </span>
-      </template>
-
-      <template #created="{ item }">
-        {{ isProject(item) ? new Date(item.createdAt).toLocaleString('en-GB') : '' }}
-      </template>
-
-      <template #modified="{ item }">
-        {{ isProject(item) ? new Date(item.updatedAt).toLocaleString('en-GB') : '' }}
-      </template>
-
-      <template #models="{ item }">
-        {{ isProject(item) ? item.models.totalCount : '' }}
-      </template>
-
-      <template #versions="{ item }">
-        {{ isProject(item) ? item.versions.totalCount : '' }}
-      </template>
-
-      <template #contributors="{ item }">
-        <div v-if="isProject(item)" class="py-1">
-          <UserAvatarGroup :users="item.team.map((t) => t.user)" :max-count="3" />
-        </div>
-      </template>
-    </LayoutTable>
-
-    <CommonLoadingBar v-if="loading && !projects?.length" loading />
-
-    <InfiniteLoading
-      v-if="projects?.length"
-      :settings="{ identifier: infiniteLoaderId }"
-      class="py-4"
-      @infinite="infiniteLoad"
-    />
-
-    <ServerManagementDeleteProjectDialog
-      v-model:open="showProjectDeleteDialog"
-      :project="projectToModify"
-      title="Delete Project"
-      :result-variables="resultVariables"
-    />
-
-    <ProjectsAddDialog v-model:open="openNewProject" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { debounce } from 'lodash-es'
-import { useQuery } from '@vue/apollo-composable'
-import { MagnifyingGlassIcon, TrashIcon, PlusIcon } from '@heroicons/vue/24/outline'
-import { getProjectsQuery } from '~~/lib/server-management/graphql/queries'
-import type { ItemType, ProjectItem } from '~~/lib/server-management/helpers/types'
-import type { InfiniteLoaderState } from '~~/lib/global/helpers/components'
-import { isProject } from '~~/lib/server-management/helpers/utils'
-
-const logger = useLogger()
-const router = useRouter()
-
-useHead({
-  title: 'Projects'
-})
-
-definePageMeta({
-  middleware: ['admin']
-})
-
-const projectToModify = ref<ProjectItem | null>(null)
-const searchString = ref('')
-const showProjectDeleteDialog = ref(false)
-const infiniteLoaderId = ref('')
-const openNewProject = ref(false)
-
-const {
-  result: extraPagesResult,
-  fetchMore: fetchMorePages,
-  variables: resultVariables,
-  onResult,
-  loading
-} = useQuery(getProjectsQuery, () => ({
-  limit: 50,
-  query: searchString.value
-}))
-
-const moreToLoad = computed(
-  () =>
-    !extraPagesResult.value?.admin?.projectList ||
-    extraPagesResult.value.admin.projectList.items.length <
-      extraPagesResult.value.admin.projectList.totalCount
-)
-
-const projects = computed(() => extraPagesResult.value?.admin.projectList.items || [])
-
-const openProjectDeleteDialog = (item: ItemType) => {
-  if (isProject(item)) {
-    projectToModify.value = item
-    showProjectDeleteDialog.value = true
-  }
-}
-
-const handleProjectClick = (item: ItemType) => {
-  router.push(`/projects/${item.id}`)
-}
-
-const infiniteLoad = async (state: InfiniteLoaderState) => {
-  const cursor = extraPagesResult.value?.admin?.projectList.cursor || null
-  if (!moreToLoad.value || !cursor) return state.complete()
-
-  try {
-    await fetchMorePages({
-      variables: {
-        cursor
-      }
-    })
-  } catch (e) {
-    logger.error(e)
-    state.error()
-    return
-  }
-
-  state.loaded()
-  if (!moreToLoad.value) {
-    state.complete()
-  }
-}
-
-const searchUpdateHandler = (value: string) => {
-  searchString.value = value
-}
-
-const debounceSearchUpdate = debounce(searchUpdateHandler, 500)
-
-const calculateLoaderId = () => {
-  infiniteLoaderId.value = resultVariables.value?.query || ''
-}
-
-onResult(calculateLoaderId)
-</script>
diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue
index 4c420aa9ab..091b2cefaa 100644
--- a/packages/ui-components/src/components/layout/Dialog.vue
+++ b/packages/ui-components/src/components/layout/Dialog.vue
@@ -152,8 +152,6 @@ const props = defineProps<{
   /**
    * If set, the modal will be wrapped in a form element and the `onSubmit` callback will be invoked when the user submits the form
    */
-  // Temp fix
-  backgroundColor?: string
   onSubmit?: (e: SubmitEvent) => void
 }>()
 
diff --git a/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue b/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue
index c983dcbf3a..6ff64b4dd7 100644
--- a/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue
+++ b/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue
@@ -25,7 +25,7 @@
     </div>
 
     <div v-show="isOpen" class="flex flex-col">
-      <slot :class="$slots['title-icon'] && 'px-6'"></slot>
+      <slot></slot>
     </div>
   </div>
 </template>

From c963fe68e4223131e5d1d054c6cee44c74154a9d Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Mon, 8 Jul 2024 12:03:05 +0200
Subject: [PATCH 37/77] Added redirect from old URLs to new ones

---
 packages/frontend-2/nuxt.config.ts | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/packages/frontend-2/nuxt.config.ts b/packages/frontend-2/nuxt.config.ts
index 0acf024cb6..f66db24c51 100644
--- a/packages/frontend-2/nuxt.config.ts
+++ b/packages/frontend-2/nuxt.config.ts
@@ -159,6 +159,31 @@ export default defineNuxtConfig({
         'access-control-allow-methods': 'GET',
         'Access-Control-Expose-Headers': '*'
       }
+    },
+    // Redirect old settings pages
+    '/server-management/projects': {
+      redirect: {
+        to: '/settings/server/projects',
+        statusCode: 301
+      }
+    },
+    '/server-management/active-users': {
+      redirect: {
+        to: '/settings/server/active-users',
+        statusCode: 301
+      }
+    },
+    '/server-management/pending-invitations': {
+      redirect: {
+        to: '/settings/server/pending-invitations',
+        statusCode: 301
+      }
+    },
+    '/server-management': {
+      redirect: {
+        to: '/settings/server/general',
+        statusCode: 301
+      }
     }
   },
 

From 15faf89f6543d55797876d157555ce9b56cf3568 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Mon, 8 Jul 2024 13:10:59 +0200
Subject: [PATCH 38/77] Cleanup: remove old files; move components into folder

---
 .../components/header/NavUserMenu.vue         |  2 +-
 .../components/onboarding/checklist/v1.vue    |  2 +-
 .../frontend-2/components/settings/Dialog.vue |  4 +-
 .../settings/server/ActiveUsers.vue           |  6 +-
 .../settings/server/PendingInvitations.vue    |  4 +-
 .../Version.vue}                              |  0
 .../DeleteDialog.vue}                         |  0
 .../DeleteDialog.vue}                         |  0
 .../ChangeRoleDialog.vue}                     |  0
 .../DeleteDialog.vue}                         |  0
 .../server/{ => user}/InviteDialog.vue        |  0
 .../components/settings/user/Developer.vue    | 12 +--
 .../settings/user/Notifications.vue           | 88 +++++++++----------
 .../components/settings/user/Profile.vue      |  2 +-
 .../CreateApplicationSuccessDialog.vue        |  0
 .../CreateEditApplicationDialog.vue           |  0
 .../user/developer}/CreateTokenDialog.vue     |  0
 .../developer}/CreateTokenSuccessDialog.vue   |  0
 .../user/developer}/DeleteDialog.vue          |  0
 .../user/developer}/RevealSecretDialog.vue    |  0
 .../ChangePassword.vue}                       |  0
 .../DeleteAccount.vue}                        |  0
 .../DeleteAccountDialog.vue}                  |  0
 .../Details.vue}                              |  0
 24 files changed, 60 insertions(+), 60 deletions(-)
 rename packages/frontend-2/components/settings/server/{GeneralVersion.vue => general/Version.vue} (100%)
 rename packages/frontend-2/components/settings/server/{PendingInvitationDeleteDialog.vue => pending-invitations/DeleteDialog.vue} (100%)
 rename packages/frontend-2/components/settings/server/{ProjectDeleteDialog.vue => project/DeleteDialog.vue} (100%)
 rename packages/frontend-2/components/settings/server/{ChangeUserRoleDialog.vue => user/ChangeRoleDialog.vue} (100%)
 rename packages/frontend-2/components/settings/server/{DeleteUserDialog.vue => user/DeleteDialog.vue} (100%)
 rename packages/frontend-2/components/settings/server/{ => user}/InviteDialog.vue (100%)
 rename packages/frontend-2/components/{developer-settings => settings/user/developer}/CreateApplicationSuccessDialog.vue (100%)
 rename packages/frontend-2/components/{developer-settings => settings/user/developer}/CreateEditApplicationDialog.vue (100%)
 rename packages/frontend-2/components/{developer-settings => settings/user/developer}/CreateTokenDialog.vue (100%)
 rename packages/frontend-2/components/{developer-settings => settings/user/developer}/CreateTokenSuccessDialog.vue (100%)
 rename packages/frontend-2/components/{developer-settings => settings/user/developer}/DeleteDialog.vue (100%)
 rename packages/frontend-2/components/{developer-settings => settings/user/developer}/RevealSecretDialog.vue (100%)
 rename packages/frontend-2/components/settings/user/{ProfilePassword.vue => profile/ChangePassword.vue} (100%)
 rename packages/frontend-2/components/settings/user/{ProfileDeleteAccount.vue => profile/DeleteAccount.vue} (100%)
 rename packages/frontend-2/components/settings/user/{ProfileDeleteAccountDialog.vue => profile/DeleteAccountDialog.vue} (100%)
 rename packages/frontend-2/components/settings/user/{ProfileDetails.vue => profile/Details.vue} (100%)

diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index 7336b24094..98d6c0685b 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -127,7 +127,7 @@
         </MenuItems>
       </Transition>
     </Menu>
-    <SettingsServerInviteDialog v-model:open="showInviteDialog" />
+    <SettingsServerUserInviteDialog v-model:open="showInviteDialog" />
     <SettingsDialog v-model:open="showSettingsDialog" />
   </div>
 </template>
diff --git a/packages/frontend-2/components/onboarding/checklist/v1.vue b/packages/frontend-2/components/onboarding/checklist/v1.vue
index 0077c9ad40..5bce69f11d 100644
--- a/packages/frontend-2/components/onboarding/checklist/v1.vue
+++ b/packages/frontend-2/components/onboarding/checklist/v1.vue
@@ -216,7 +216,7 @@
     >
       <template #header>Your First Upload</template>
     </OnboardingDialogFirstSend>
-    <SettingsServerInviteDialog
+    <SettingsServerUserInviteDialog
       v-model:open="showServerInviteDialog"
       @update:open="(v) => (!v ? markComplete(3) : '')"
     />
diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index c7c7920523..0a8b442abf 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -45,7 +45,9 @@
           !isMobile && 'simple-scrollbar overflow-y-auto flex-1'
         ]"
       >
-        <component :is="selectedMenuItem?.component" class="pb-6" />
+        <div class="pb-6">
+          <component :is="selectedMenuItem?.component" />
+        </div>
       </main>
     </div>
   </LayoutDialog>
diff --git a/packages/frontend-2/components/settings/server/ActiveUsers.vue b/packages/frontend-2/components/settings/server/ActiveUsers.vue
index 7452ee3df5..a54f25c261 100644
--- a/packages/frontend-2/components/settings/server/ActiveUsers.vue
+++ b/packages/frontend-2/components/settings/server/ActiveUsers.vue
@@ -83,20 +83,20 @@
       @infinite="infiniteLoad"
     />
 
-    <SettingsServerDeleteUserDialog
+    <SettingsServerUserDeleteDialog
       v-model:open="showUserDeleteDialog"
       :user="userToModify"
       :result-variables="resultVariables"
     />
 
-    <SettingsServerChangeUserRoleDialog
+    <SettingsServerUserChangeRoleDialog
       v-model:open="showChangeUserRoleDialog"
       :user="userToModify"
       :old-role="oldRole"
       :new-role="newRole"
       hide-closer
     />
-    <SettingsServerInviteDialog v-model:open="showInviteDialog" />
+    <SettingsServerUserInviteDialog 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 f859e5907d..a3bd995ce5 100644
--- a/packages/frontend-2/components/settings/server/PendingInvitations.vue
+++ b/packages/frontend-2/components/settings/server/PendingInvitations.vue
@@ -67,7 +67,7 @@
       </template>
     </LayoutTable>
 
-    <SettingsServerPendingInvitationDeleteDialog
+    <SettingsServerPendingInvitationsDeleteDialog
       v-model:open="showDeleteInvitationDialog"
       :invite="inviteToModify"
       :result-variables="resultVariables"
@@ -81,7 +81,7 @@
       class="py-4"
       @infinite="infiniteLoad"
     />
-    <SettingsServerInviteDialog v-model:open="showInviteDialog" />
+    <SettingsServerUserInviteDialog v-model:open="showInviteDialog" />
   </div>
 </template>
 
diff --git a/packages/frontend-2/components/settings/server/GeneralVersion.vue b/packages/frontend-2/components/settings/server/general/Version.vue
similarity index 100%
rename from packages/frontend-2/components/settings/server/GeneralVersion.vue
rename to packages/frontend-2/components/settings/server/general/Version.vue
diff --git a/packages/frontend-2/components/settings/server/PendingInvitationDeleteDialog.vue b/packages/frontend-2/components/settings/server/pending-invitations/DeleteDialog.vue
similarity index 100%
rename from packages/frontend-2/components/settings/server/PendingInvitationDeleteDialog.vue
rename to packages/frontend-2/components/settings/server/pending-invitations/DeleteDialog.vue
diff --git a/packages/frontend-2/components/settings/server/ProjectDeleteDialog.vue b/packages/frontend-2/components/settings/server/project/DeleteDialog.vue
similarity index 100%
rename from packages/frontend-2/components/settings/server/ProjectDeleteDialog.vue
rename to packages/frontend-2/components/settings/server/project/DeleteDialog.vue
diff --git a/packages/frontend-2/components/settings/server/ChangeUserRoleDialog.vue b/packages/frontend-2/components/settings/server/user/ChangeRoleDialog.vue
similarity index 100%
rename from packages/frontend-2/components/settings/server/ChangeUserRoleDialog.vue
rename to packages/frontend-2/components/settings/server/user/ChangeRoleDialog.vue
diff --git a/packages/frontend-2/components/settings/server/DeleteUserDialog.vue b/packages/frontend-2/components/settings/server/user/DeleteDialog.vue
similarity index 100%
rename from packages/frontend-2/components/settings/server/DeleteUserDialog.vue
rename to packages/frontend-2/components/settings/server/user/DeleteDialog.vue
diff --git a/packages/frontend-2/components/settings/server/InviteDialog.vue b/packages/frontend-2/components/settings/server/user/InviteDialog.vue
similarity index 100%
rename from packages/frontend-2/components/settings/server/InviteDialog.vue
rename to packages/frontend-2/components/settings/server/user/InviteDialog.vue
diff --git a/packages/frontend-2/components/settings/user/Developer.vue b/packages/frontend-2/components/settings/user/Developer.vue
index 782c04ed80..e3b4c5c9bf 100644
--- a/packages/frontend-2/components/settings/user/Developer.vue
+++ b/packages/frontend-2/components/settings/user/Developer.vue
@@ -256,28 +256,28 @@
         </div>
       </div>
 
-      <DeveloperSettingsCreateTokenDialog
+      <SettingsUserDeveloperCreateTokenDialog
         v-model:open="showCreateTokenDialog"
         @token-created="(token) => handleTokenCreated(token)"
       />
-      <DeveloperSettingsDeleteDialog
+      <SettingsUserDeveloperDeleteDialog
         v-model:open="showDeleteDialog"
         :item="itemToModify"
       />
-      <DeveloperSettingsCreateEditApplicationDialog
+      <SettingsUserDeveloperCreateEditApplicationDialog
         v-model:open="showCreateEditApplicationDialog"
         :application="(itemToModify as ApplicationItem)"
         @application-created="handleApplicationCreated"
       />
-      <DeveloperSettingsRevealSecretDialog
+      <SettingsUserDeveloperRevealSecretDialog
         v-model:open="showRevealSecretDialog"
         :application="itemToModify && 'secret' in itemToModify ? itemToModify : null"
       />
-      <DeveloperSettingsCreateTokenSuccessDialog
+      <SettingsUserDeveloperCreateTokenSuccessDialog
         v-model:open="showCreateTokenSuccessDialog"
         :token="tokenSuccess"
       />
-      <DeveloperSettingsCreateApplicationSuccessDialog
+      <SettingsUserDeveloperCreateApplicationSuccessDialog
         v-model:open="showCreateApplicationSuccessDialog"
         :application="(itemToModify as ApplicationItem)"
       />
diff --git a/packages/frontend-2/components/settings/user/Notifications.vue b/packages/frontend-2/components/settings/user/Notifications.vue
index 925ada6082..08b19032fe 100644
--- a/packages/frontend-2/components/settings/user/Notifications.vue
+++ b/packages/frontend-2/components/settings/user/Notifications.vue
@@ -1,50 +1,48 @@
 <template>
-  <div>
-    <SettingsSectionHeader
-      title="Notifications"
-      text="Manage your notification preferencesr"
-    />
-    <table class="table-auto w-full rounded-t overflow-hidden">
-      <thead class="text-foreground-1">
-        <tr>
-          <th class="pb-4 font-semibold text-sm text-left">Notification type</th>
-          <th
-            v-for="channel in notificationChannels"
-            :key="channel"
-            class="text-right font-semibold pb-4 text-sm"
-          >
-            {{ capitalize(channel) }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="[type, settings] in Object.entries(localPreferences)"
-          :key="type"
-          class="border-t"
+  <SettingsSectionHeader
+    title="Notifications"
+    text="Manage your notification preferencesr"
+  />
+  <table class="table-auto w-full rounded-t overflow-hidden">
+    <thead class="text-foreground-1">
+      <tr>
+        <th class="pb-4 font-semibold text-sm text-left">Notification type</th>
+        <th
+          v-for="channel in notificationChannels"
+          :key="channel"
+          class="text-right font-semibold pb-4 text-sm"
         >
-          <td class="text-xs sm:text-sm py-4">
-            {{ notificationTypeMapping[type] || 'Unknown' }}
-          </td>
-          <td
-            v-for="channel in notificationChannels"
-            :key="channel"
-            class="flex justify-end py-4"
-          >
-            <FormCheckbox
-              :name="`${type} (${channel})`"
-              :disabled="loading"
-              hide-label
-              :model-value="settings[channel] || undefined"
-              @update:model-value="
-                ($event) => onUpdate({ value: !!$event, type, channel })
-              "
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+          {{ capitalize(channel) }}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="[type, settings] in Object.entries(localPreferences)"
+        :key="type"
+        class="border-t"
+      >
+        <td class="text-xs sm:text-sm py-4">
+          {{ notificationTypeMapping[type] || 'Unknown' }}
+        </td>
+        <td
+          v-for="channel in notificationChannels"
+          :key="channel"
+          class="flex justify-end py-4"
+        >
+          <FormCheckbox
+            :name="`${type} (${channel})`"
+            :disabled="loading"
+            hide-label
+            :model-value="settings[channel] || undefined"
+            @update:model-value="
+              ($event) => onUpdate({ value: !!$event, type, channel })
+            "
+          />
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </template>
 <script setup lang="ts">
 import { capitalize, cloneDeep } from 'lodash-es'
diff --git a/packages/frontend-2/components/settings/user/Profile.vue b/packages/frontend-2/components/settings/user/Profile.vue
index ef994cb33f..99016d0126 100644
--- a/packages/frontend-2/components/settings/user/Profile.vue
+++ b/packages/frontend-2/components/settings/user/Profile.vue
@@ -6,7 +6,7 @@
     />
     <SettingsUserProfileDetails :user="user" />
     <hr class="my-6 md:my-10" />
-    <SettingsUserProfilePassword :user="user" />
+    <SettingsUserProfileChangePassword :user="user" />
     <hr class="my-6 md:my-10" />
     <SettingsUserProfileDeleteAccount :user="user" />
   </div>
diff --git a/packages/frontend-2/components/developer-settings/CreateApplicationSuccessDialog.vue b/packages/frontend-2/components/settings/user/developer/CreateApplicationSuccessDialog.vue
similarity index 100%
rename from packages/frontend-2/components/developer-settings/CreateApplicationSuccessDialog.vue
rename to packages/frontend-2/components/settings/user/developer/CreateApplicationSuccessDialog.vue
diff --git a/packages/frontend-2/components/developer-settings/CreateEditApplicationDialog.vue b/packages/frontend-2/components/settings/user/developer/CreateEditApplicationDialog.vue
similarity index 100%
rename from packages/frontend-2/components/developer-settings/CreateEditApplicationDialog.vue
rename to packages/frontend-2/components/settings/user/developer/CreateEditApplicationDialog.vue
diff --git a/packages/frontend-2/components/developer-settings/CreateTokenDialog.vue b/packages/frontend-2/components/settings/user/developer/CreateTokenDialog.vue
similarity index 100%
rename from packages/frontend-2/components/developer-settings/CreateTokenDialog.vue
rename to packages/frontend-2/components/settings/user/developer/CreateTokenDialog.vue
diff --git a/packages/frontend-2/components/developer-settings/CreateTokenSuccessDialog.vue b/packages/frontend-2/components/settings/user/developer/CreateTokenSuccessDialog.vue
similarity index 100%
rename from packages/frontend-2/components/developer-settings/CreateTokenSuccessDialog.vue
rename to packages/frontend-2/components/settings/user/developer/CreateTokenSuccessDialog.vue
diff --git a/packages/frontend-2/components/developer-settings/DeleteDialog.vue b/packages/frontend-2/components/settings/user/developer/DeleteDialog.vue
similarity index 100%
rename from packages/frontend-2/components/developer-settings/DeleteDialog.vue
rename to packages/frontend-2/components/settings/user/developer/DeleteDialog.vue
diff --git a/packages/frontend-2/components/developer-settings/RevealSecretDialog.vue b/packages/frontend-2/components/settings/user/developer/RevealSecretDialog.vue
similarity index 100%
rename from packages/frontend-2/components/developer-settings/RevealSecretDialog.vue
rename to packages/frontend-2/components/settings/user/developer/RevealSecretDialog.vue
diff --git a/packages/frontend-2/components/settings/user/ProfilePassword.vue b/packages/frontend-2/components/settings/user/profile/ChangePassword.vue
similarity index 100%
rename from packages/frontend-2/components/settings/user/ProfilePassword.vue
rename to packages/frontend-2/components/settings/user/profile/ChangePassword.vue
diff --git a/packages/frontend-2/components/settings/user/ProfileDeleteAccount.vue b/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue
similarity index 100%
rename from packages/frontend-2/components/settings/user/ProfileDeleteAccount.vue
rename to packages/frontend-2/components/settings/user/profile/DeleteAccount.vue
diff --git a/packages/frontend-2/components/settings/user/ProfileDeleteAccountDialog.vue b/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue
similarity index 100%
rename from packages/frontend-2/components/settings/user/ProfileDeleteAccountDialog.vue
rename to packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue
diff --git a/packages/frontend-2/components/settings/user/ProfileDetails.vue b/packages/frontend-2/components/settings/user/profile/Details.vue
similarity index 100%
rename from packages/frontend-2/components/settings/user/ProfileDetails.vue
rename to packages/frontend-2/components/settings/user/profile/Details.vue

From c705bed98d0cd3953858990b493580eabfd09181 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Wed, 10 Jul 2024 13:44:12 +0200
Subject: [PATCH 39/77] Added URL handling

---
 .../components/header/NavUserMenu.vue         |  50 +++++++--
 .../frontend-2/components/settings/Dialog.vue | 103 +++++++++++-------
 .../components/settings/SectionHeader.vue     |   2 +-
 .../settings/user/Notifications.vue           |  88 +++++++--------
 .../frontend-2/lib/common/helpers/route.ts    |  33 ++++++
 packages/frontend-2/nuxt.config.ts            |   6 +
 .../layout/sidebar/menu/group/Item.vue        |  77 ++++++-------
 7 files changed, 228 insertions(+), 131 deletions(-)

diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index 98d6c0685b..5b7e0222e7 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -39,7 +39,14 @@
                 active ? 'bg-foundation-focus' : '',
                 'flex gap-3.5 items-center px-3 py-2.5 text-sm text-foreground cursor-pointer transition mx-1 rounded'
               ]"
-              @click="() => (showSettingsDialog = true)"
+              @click="
+                () =>
+                  toggleSettingsDialog(
+                    isMobile
+                      ? settingsRoutes.default.settings
+                      : settingsRoutes.user.profile
+                  )
+              "
             >
               <UserCircleIcon class="w-5 h-5" />
               Settings
@@ -51,7 +58,14 @@
                 active ? 'bg-foundation-focus' : '',
                 'flex gap-3.5 items-center px-3 py-2.5 text-sm text-foreground cursor-pointer transition mx-1 rounded'
               ]"
-              @click="() => (showSettingsDialog = true)"
+              @click="
+                () =>
+                  toggleSettingsDialog(
+                    isMobile
+                      ? settingsRoutes.default.settings
+                      : settingsRoutes.server.general
+                  )
+              "
             >
               <ServerStackIcon class="w-5 h-5" />
               Server Settings
@@ -128,7 +142,11 @@
       </Transition>
     </Menu>
     <SettingsServerUserInviteDialog v-model:open="showInviteDialog" />
-    <SettingsDialog v-model:open="showSettingsDialog" />
+    <SettingsDialog
+      v-model:open="showSettingsDialog"
+      :route="settingsRoute"
+      :original-route="settingsOriginalRoute"
+    />
   </div>
 </template>
 <script setup lang="ts">
@@ -150,8 +168,14 @@ import { useActiveUser } from '~~/lib/auth/composables/activeUser'
 import { useAuthManager } from '~~/lib/auth/composables/auth'
 import { useTheme } from '~~/lib/core/composables/theme'
 import { useServerInfo } from '~/lib/core/composables/server'
-import { homeRoute, profileRoute, connectorsPageUrl } from '~/lib/common/helpers/route'
+import {
+  getSettingsRoute,
+  settingsRoutes,
+  connectorsPageUrl
+} from '~/lib/common/helpers/route'
 import type { RouteLocationRaw } from 'vue-router'
+import { useBreakpoints } from '@vueuse/core'
+import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
 
 defineProps<{
   loginUrl?: RouteLocationRaw
@@ -161,28 +185,38 @@ const { logout } = useAuthManager()
 const { activeUser, isGuest } = useActiveUser()
 const { isDarkTheme, toggleTheme } = useTheme()
 const { serverInfo } = useServerInfo()
-const router = useRouter()
+
 const route = useRoute()
 
 const showInviteDialog = ref(false)
 const showSettingsDialog = ref(false)
+const settingsRoute = ref(null)
+const settingsOriginalRoute = ref(null)
+const breakpoints = useBreakpoints(TailwindBreakpoints)
+const isMobile = breakpoints.smallerOrEqual('md')
 const menuButtonId = useId()
 
 const Icon = computed(() => (isDarkTheme.value ? SunIcon : MoonIcon))
 const version = computed(() => serverInfo.value?.version)
 const isAdmin = computed(() => activeUser.value?.role === Roles.Server.Admin)
-const isProfileRoute = computed(() => route.path === profileRoute)
+const isSettingsRoute = computed(() => !!getSettingsRoute(route.path))
 
 const toggleInviteDialog = () => {
   showInviteDialog.value = true
 }
 
+const toggleSettingsDialog = (newRoute: string) => {
+  showSettingsDialog.value = true
+  settingsRoute.value = newRoute
+  settingsOriginalRoute.value = route.path
+}
+
 watch(
-  isProfileRoute,
+  isSettingsRoute,
   (newVal, oldVal) => {
     if (newVal && !oldVal) {
       showSettingsDialog.value = true
-      void router.replace({ path: homeRoute, force: true }) // in-place replace
+      settingsRoute.value = getSettingsRoute(route.path)
     }
   },
   { immediate: true }
diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 0a8b442abf..a6fdb281f1 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -21,7 +21,11 @@
                 v-for="(sidebarMenuItem, index) in sidebarConfig.user"
                 :key="`sidebarUserItem-${index}`"
                 :label="sidebarMenuItem.title"
-                @click="setSelectedMenuItem(sidebarMenuItem.path)"
+                :class="{
+                  'bg-foundation-focus hover:!bg-foundation-focus':
+                    selectedMenuItem?.path === sidebarMenuItem.path
+                }"
+                @click="setSelectedMenuItem(sidebarMenuItem)"
               />
             </LayoutSidebarMenuGroup>
             <LayoutSidebarMenuGroup title="Server Settings">
@@ -32,7 +36,11 @@
                 v-for="(sidebarMenuItem, index) in sidebarConfig.server"
                 :key="`sidebarServerItem-${index}`"
                 :label="sidebarMenuItem.title"
-                @click="setSelectedMenuItem(sidebarMenuItem.path)"
+                :class="{
+                  'bg-foundation-focus hover:!bg-foundation-focus':
+                    selectedMenuItem?.path === sidebarMenuItem.path
+                }"
+                @click="setSelectedMenuItem(sidebarMenuItem)"
               />
             </LayoutSidebarMenuGroup>
           </LayoutSidebarMenu>
@@ -65,6 +73,7 @@ import SettingsServerPendingInvitations from './server/PendingInvitations.vue'
 import { useBreakpoints } from '@vueuse/core'
 import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
 import { UserIcon, ServerStackIcon } from '@heroicons/vue/24/outline'
+import { settingsRoutes, homeRoute } from '~/lib/common/helpers/route'
 import {
   LayoutSidebar,
   LayoutSidebarMenu,
@@ -77,89 +86,101 @@ type MenuItem = {
   path: string
 }
 
-type SidebarConfig = {
-  [key: string]: {
-    [key: string]: MenuItem
-  }
-}
-
 const emit = defineEmits<{
   (e: 'update:open', val: boolean): void
 }>()
 
 const props = defineProps<{
   open: boolean
+  route?: string
+  originalRoute?: string
 }>()
 
+const router = useRouter()
 const breakpoints = useBreakpoints(TailwindBreakpoints)
 const isMobile = breakpoints.smallerOrEqual('md')
-const router = useRouter()
-
-const isOpen = computed({
-  get: () => props.open,
-  set: (newVal: boolean) => emit('update:open', newVal)
-})
-
-const selectedMenuItem = computed(() => {
-  const path = router.currentRoute.value.path
-  for (const group in sidebarConfig) {
-    const menuItems = sidebarConfig[group]
-
-    for (const key in menuItems) {
-      const item = menuItems[key]
-
-      if (new RegExp(`${item.path}?$`, 'i').test(path)) {
-        return item
-      }
-    }
+const selectedMenuItem: MenuItem | null = shallowRef(null)
+const sidebarConfig: {
+  [key: string]: {
+    [key: string]: MenuItem
   }
-  return null
-})
-
-const sidebarConfig: SidebarConfig = {
+} = {
   user: {
     profile: {
       title: 'Profile',
       component: SettingsUserProfile,
-      path: '/settings/user/profile'
+      path: settingsRoutes.user.profile
     },
     notifications: {
       title: 'Notifications',
       component: SettingsUserNotifications,
-      path: '/settings/user/notifications'
+      path: settingsRoutes.user.notifications
     },
     developerSettings: {
       title: 'Developer Settings',
       component: SettingsUserDeveloper,
-      path: '/settings/user/developer-settings'
+      path: settingsRoutes.user.developerSettings
     }
   },
   server: {
     general: {
       title: 'General',
       component: SettingsServerGeneral,
-      path: '/settings/server/general'
+      path: settingsRoutes.server.general
     },
     projects: {
       title: 'Projects',
       component: SettingsServerProjects,
-      path: '/settings/server/projects'
+      path: settingsRoutes.server.projects
     },
     activeUsers: {
       title: 'Active Users',
       component: SettingsServerActiveUsers,
-      path: '/settings/server/active-users'
+      path: settingsRoutes.server.activeUsers
     },
     pendingInvitations: {
       title: 'Pending Invitations',
       component: SettingsServerPendingInvitations,
-      path: '/settings/server/pending-invitations'
+      path: settingsRoutes.server.pendingInvitations
     }
   }
 }
 
-function setSelectedMenuItem(path: string | null): void {
-  router.push({ path: path ?? '/settings' })
-  // history.pushState({}, '', path ?? '/settings')
+const isOpen = computed({
+  get: () => props.open,
+  set: (newVal: boolean) => emit('update:open', newVal)
+})
+
+watch(
+  isOpen,
+  (newVal, oldVal) => {
+    if (newVal && !oldVal) {
+      if (isMobile.value) {
+        history.pushState({}, '', '/settings')
+      } else {
+        // If not on mobile find the component matching the route
+        for (const group in sidebarConfig) {
+          for (const key in sidebarConfig[group]) {
+            const item = sidebarConfig[group][key]
+            if (item.path === props.route) {
+              setSelectedMenuItem(item)
+            }
+          }
+        }
+      }
+    } else if (!newVal && oldVal) {
+      // When closing the modal revert back to the original route
+      selectedMenuItem.value = null
+      router.replace({ path: props.originalRoute ?? homeRoute, force: true })
+    }
+  },
+  { immediate: true }
+)
+
+function setSelectedMenuItem(item: MenuItem | null): void {
+  selectedMenuItem.value = item
+  if (typeof window !== 'undefined') {
+    history.pushState({}, '', item ? item.path : settingsRoutes.default.settings)
+  }
 }
 </script>
diff --git a/packages/frontend-2/components/settings/SectionHeader.vue b/packages/frontend-2/components/settings/SectionHeader.vue
index c543d734e2..99bb23ab06 100644
--- a/packages/frontend-2/components/settings/SectionHeader.vue
+++ b/packages/frontend-2/components/settings/SectionHeader.vue
@@ -17,7 +17,7 @@
         </FormButton>
       </div>
     </div>
-    <p v-if="text" class="text-sm pt-6 md:pt-4">
+    <p v-if="text" class="text-sm pt-6 md:pt-4 text-secondary-2">
       {{ text }}
     </p>
     <hr v-if="!subheading" class="my-6 md:my-10" />
diff --git a/packages/frontend-2/components/settings/user/Notifications.vue b/packages/frontend-2/components/settings/user/Notifications.vue
index 08b19032fe..92f0eca9cd 100644
--- a/packages/frontend-2/components/settings/user/Notifications.vue
+++ b/packages/frontend-2/components/settings/user/Notifications.vue
@@ -1,48 +1,50 @@
 <template>
-  <SettingsSectionHeader
-    title="Notifications"
-    text="Manage your notification preferencesr"
-  />
-  <table class="table-auto w-full rounded-t overflow-hidden">
-    <thead class="text-foreground-1">
-      <tr>
-        <th class="pb-4 font-semibold text-sm text-left">Notification type</th>
-        <th
-          v-for="channel in notificationChannels"
-          :key="channel"
-          class="text-right font-semibold pb-4 text-sm"
+  <div class="md:max-w-xl md:mx-auto">
+    <SettingsSectionHeader
+      title="Notifications"
+      text="Manage your notification preferencesr"
+    />
+    <table class="table-auto w-full rounded-t overflow-hidden">
+      <thead class="text-foreground-1">
+        <tr>
+          <th class="pb-4 font-semibold text-sm text-left">Notification type</th>
+          <th
+            v-for="channel in notificationChannels"
+            :key="channel"
+            class="text-right font-semibold pb-4 text-sm"
+          >
+            {{ capitalize(channel) }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="[type, settings] in Object.entries(localPreferences)"
+          :key="type"
+          class="border-t"
         >
-          {{ capitalize(channel) }}
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        v-for="[type, settings] in Object.entries(localPreferences)"
-        :key="type"
-        class="border-t"
-      >
-        <td class="text-xs sm:text-sm py-4">
-          {{ notificationTypeMapping[type] || 'Unknown' }}
-        </td>
-        <td
-          v-for="channel in notificationChannels"
-          :key="channel"
-          class="flex justify-end py-4"
-        >
-          <FormCheckbox
-            :name="`${type} (${channel})`"
-            :disabled="loading"
-            hide-label
-            :model-value="settings[channel] || undefined"
-            @update:model-value="
-              ($event) => onUpdate({ value: !!$event, type, channel })
-            "
-          />
-        </td>
-      </tr>
-    </tbody>
-  </table>
+          <td class="text-xs sm:text-sm py-4">
+            {{ notificationTypeMapping[type] || 'Unknown' }}
+          </td>
+          <td
+            v-for="channel in notificationChannels"
+            :key="channel"
+            class="flex justify-end py-4"
+          >
+            <FormCheckbox
+              :name="`${type} (${channel})`"
+              :disabled="loading"
+              hide-label
+              :model-value="settings[channel] || undefined"
+              @update:model-value="
+                ($event) => onUpdate({ value: !!$event, type, channel })
+              "
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>
 <script setup lang="ts">
 import { capitalize, cloneDeep } from 'lodash-es'
diff --git a/packages/frontend-2/lib/common/helpers/route.ts b/packages/frontend-2/lib/common/helpers/route.ts
index bf35cb02ee..a03e4955dc 100644
--- a/packages/frontend-2/lib/common/helpers/route.ts
+++ b/packages/frontend-2/lib/common/helpers/route.ts
@@ -14,6 +14,39 @@ export const downloadManagerRoute = '/download-manager'
 export const serverManagementRoute = '/server-management'
 export const connectorsPageUrl = 'https://speckle.systems/features/connectors/'
 
+export const settingsRoutes: {
+  [key: string]: {
+    [key: string]: string
+  }
+} = {
+  default: {
+    settings: '/settings'
+  },
+  user: {
+    profile: '/settings/user/profile',
+    notifications: '/settings/user/notifications',
+    developerSettings: '/settings/user/developer-settings'
+  },
+  server: {
+    general: '/settings/server/general',
+    projects: '/settings/server/projects',
+    activeUsers: '/settings/server/active-users',
+    pendingInvitations: '/settings/server/pending-invitations'
+  }
+}
+
+export const getSettingsRoute = (route: string) => {
+  for (const group in settingsRoutes) {
+    for (const key in settingsRoutes[group]) {
+      if (route === settingsRoutes[group][key]) {
+        return settingsRoutes[group][key]
+      }
+    }
+  }
+
+  return null
+}
+
 export const projectRoute = (
   id: string,
   tab?: 'models' | 'discussions' | 'automations' | 'settings'
diff --git a/packages/frontend-2/nuxt.config.ts b/packages/frontend-2/nuxt.config.ts
index f66db24c51..887e17b05b 100644
--- a/packages/frontend-2/nuxt.config.ts
+++ b/packages/frontend-2/nuxt.config.ts
@@ -184,6 +184,12 @@ export default defineNuxtConfig({
         to: '/settings/server/general',
         statusCode: 301
       }
+    },
+    '/profile': {
+      redirect: {
+        to: '/settings/user/profile',
+        statusCode: 301
+      }
     }
   },
 
diff --git a/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue b/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
index 29e3d55671..7d665891dd 100644
--- a/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
+++ b/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
@@ -1,50 +1,49 @@
 <template>
-  <div>
-    <NuxtLink
-      v-if="!hasChildren"
-      :to="to"
-      class="group flex items-center justify-between gap-2 shrink-0 text-sm select-none rounded-md w-full hover:bg-primary-muted py-1.5 px-5 bcursor-pointer"
-      active-class="bg-foundation-focus hover:!bg-foundation-focus"
-      :external="external"
-      :target="external ? '_blank' : undefined"
-    >
-      <div class="flex items-center gap-2">
-        <div v-if="$slots.icon" class="h-5 w-5 flex items-center justify-center">
-          <slot name="icon" />
-        </div>
-        <span :class="$slots.icon ? '' : 'pl-2'">
-          {{ label }}
-        </span>
-      </div>
-      <div
-        v-if="tag"
-        class="text-xs uppercase bg-primary-muted py-0.5 px-2 rounded-full font-medium text-primary-focus group-hover:bg-white"
-      >
-        {{ tag }}
-      </div>
-    </NuxtLink>
-    <div v-else class="flex flex-col">
-      <button
-        class="group flex gap-1.5 items-center w-full hover:bg-foundation-3 rounded-md p-0.5 cursor-pointer"
-        @click="isOpen = !isOpen"
-      >
-        <ChevronDownIcon :class="isOpen ? '' : 'rotate-180'" class="h-2.5 w-2.5" />
-        <h6 class="font-bold text-foreground-2 text-xs flex items-center gap-1.5">
-          {{ label }}
-        </h6>
-      </button>
-      <div v-show="isOpen" class="pl-4">
-        <slot></slot>
+  <component
+    :is="linkComponent"
+    v-if="!hasChildren"
+    :to="to"
+    class="group flex items-center justify-between gap-2 shrink-0 text-sm select-none rounded-md w-full hover:bg-primary-muted py-1.5 px-5 cursor-pointer"
+    exact-active-class="bg-foundation-focus hover:!bg-foundation-focus"
+    :external="external"
+    :target="external ? '_blank' : undefined"
+  >
+    <div class="flex items-center gap-2">
+      <div v-if="$slots.icon" class="h-5 w-5 flex items-center justify-center">
+        <slot name="icon" />
       </div>
+      <span :class="$slots.icon ? '' : 'pl-2'">
+        {{ label }}
+      </span>
+    </div>
+    <div
+      v-if="tag"
+      class="text-xs uppercase bg-primary-muted py-0.5 px-2 rounded-full font-medium text-primary-focus group-hover:bg-white"
+    >
+      {{ tag }}
+    </div>
+  </component>
+  <div v-else class="flex flex-col">
+    <button
+      class="group flex gap-1.5 items-center w-full hover:bg-foundation-3 rounded-md p-0.5 cursor-pointer"
+      @click="isOpen = !isOpen"
+    >
+      <ChevronDownIcon :class="isOpen ? '' : 'rotate-180'" class="h-2.5 w-2.5" />
+      <h6 class="font-bold text-foreground-2 text-xs flex items-center gap-1.5">
+        {{ label }}
+      </h6>
+    </button>
+    <div v-show="isOpen" class="pl-4">
+      <slot></slot>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ChevronDownIcon } from '@heroicons/vue/24/outline'
-import { ref, resolveDynamicComponent, useSlots } from 'vue'
+import { ref, computed, resolveDynamicComponent, useSlots } from 'vue'
 
-defineProps<{
+const props = defineProps<{
   label: string
   to?: string
   tag?: string
@@ -55,6 +54,8 @@ const isOpen = ref(true)
 
 const NuxtLink = resolveDynamicComponent('NuxtLink')
 
+const linkComponent = computed(() => (props.to ? NuxtLink : 'a'))
+
 const slots = useSlots()
 
 const hasChildren = !!slots.default

From 05a9b026e834489ae361766b171f8ffbf24183b3 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Wed, 10 Jul 2024 14:15:07 +0200
Subject: [PATCH 40/77] Changed routes to be added progrmatically, so they can
 load the dashboard component

---
 packages/frontend-2/nuxt.config.ts            | 48 +++++++++++++++++++
 packages/frontend-2/pages/settings/index.vue  |  3 --
 .../pages/settings/server/active-users.vue    |  3 --
 .../pages/settings/server/general.vue         |  3 --
 .../settings/server/pending-invitations.vue   |  3 --
 .../pages/settings/server/projects.vue        |  3 --
 .../settings/user/developer-settings.vue      |  3 --
 .../pages/settings/user/notifications.vue     |  3 --
 .../pages/settings/user/profile.vue           |  3 --
 .../src/components/common/Alert.vue           |  6 +--
 10 files changed, 49 insertions(+), 29 deletions(-)
 delete mode 100644 packages/frontend-2/pages/settings/index.vue
 delete mode 100644 packages/frontend-2/pages/settings/server/active-users.vue
 delete mode 100644 packages/frontend-2/pages/settings/server/general.vue
 delete mode 100644 packages/frontend-2/pages/settings/server/pending-invitations.vue
 delete mode 100644 packages/frontend-2/pages/settings/server/projects.vue
 delete mode 100644 packages/frontend-2/pages/settings/user/developer-settings.vue
 delete mode 100644 packages/frontend-2/pages/settings/user/notifications.vue
 delete mode 100644 packages/frontend-2/pages/settings/user/profile.vue

diff --git a/packages/frontend-2/nuxt.config.ts b/packages/frontend-2/nuxt.config.ts
index 887e17b05b..f2ee55e8bb 100644
--- a/packages/frontend-2/nuxt.config.ts
+++ b/packages/frontend-2/nuxt.config.ts
@@ -193,6 +193,54 @@ export default defineNuxtConfig({
     }
   },
 
+  hooks: {
+    'pages:extend'(pages) {
+      // Adds settings routes so direct routes are available but will load the dashboard component
+      pages.push(
+        {
+          name: 'settings',
+          path: '/settings',
+          file: '~/pages/index.vue'
+        },
+        {
+          name: 'settings-user-profile',
+          path: '/settings/user/profile',
+          file: '~/pages/index.vue'
+        },
+        {
+          name: 'settings-user-notifications',
+          path: '/settings/user/notifications',
+          file: '~/pages/index.vue'
+        },
+        {
+          name: 'settings-user-developer-settings',
+          path: '/settings/user/developer-settings',
+          file: '~/pages/index.vue'
+        },
+        {
+          name: 'settings-server-general',
+          path: '/settings/server/general',
+          file: '~/pages/index.vue'
+        },
+        {
+          name: 'settings-server-active-users',
+          path: '/settings/server/active-users',
+          file: '~/pages/index.vue'
+        },
+        {
+          name: 'settings-server-pending-invitations',
+          path: '/settings/server/pending-invitations',
+          file: '~/pages/index.vue'
+        },
+        {
+          name: 'settings-server-projects',
+          path: '/settings/server/projects',
+          file: '~/pages/index.vue'
+        }
+      )
+    }
+  },
+
   nitro: {
     compressPublicAssets: true
   },
diff --git a/packages/frontend-2/pages/settings/index.vue b/packages/frontend-2/pages/settings/index.vue
deleted file mode 100644
index 7b8b46cb04..0000000000
--- a/packages/frontend-2/pages/settings/index.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div></div>
-</template>
diff --git a/packages/frontend-2/pages/settings/server/active-users.vue b/packages/frontend-2/pages/settings/server/active-users.vue
deleted file mode 100644
index 04d85e1bdb..0000000000
--- a/packages/frontend-2/pages/settings/server/active-users.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div />
-</template>
diff --git a/packages/frontend-2/pages/settings/server/general.vue b/packages/frontend-2/pages/settings/server/general.vue
deleted file mode 100644
index 04d85e1bdb..0000000000
--- a/packages/frontend-2/pages/settings/server/general.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div />
-</template>
diff --git a/packages/frontend-2/pages/settings/server/pending-invitations.vue b/packages/frontend-2/pages/settings/server/pending-invitations.vue
deleted file mode 100644
index 04d85e1bdb..0000000000
--- a/packages/frontend-2/pages/settings/server/pending-invitations.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div />
-</template>
diff --git a/packages/frontend-2/pages/settings/server/projects.vue b/packages/frontend-2/pages/settings/server/projects.vue
deleted file mode 100644
index 04d85e1bdb..0000000000
--- a/packages/frontend-2/pages/settings/server/projects.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div />
-</template>
diff --git a/packages/frontend-2/pages/settings/user/developer-settings.vue b/packages/frontend-2/pages/settings/user/developer-settings.vue
deleted file mode 100644
index 04d85e1bdb..0000000000
--- a/packages/frontend-2/pages/settings/user/developer-settings.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div />
-</template>
diff --git a/packages/frontend-2/pages/settings/user/notifications.vue b/packages/frontend-2/pages/settings/user/notifications.vue
deleted file mode 100644
index 04d85e1bdb..0000000000
--- a/packages/frontend-2/pages/settings/user/notifications.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div />
-</template>
diff --git a/packages/frontend-2/pages/settings/user/profile.vue b/packages/frontend-2/pages/settings/user/profile.vue
deleted file mode 100644
index 04d85e1bdb..0000000000
--- a/packages/frontend-2/pages/settings/user/profile.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div />
-</template>
diff --git a/packages/ui-components/src/components/common/Alert.vue b/packages/ui-components/src/components/common/Alert.vue
index b33f96a99c..403741402c 100644
--- a/packages/ui-components/src/components/common/Alert.vue
+++ b/packages/ui-components/src/components/common/Alert.vue
@@ -5,11 +5,7 @@
         <Component :is="icon" :class="iconClasses" aria-hidden="true" />
       </div>
       <div :class="mainContentContainerClasses">
-        <h3
-          v-if="hasTitle"
-          class="text-sm"
-          :class="[hasDescription ? 'font-medium' : '']"
-        >
+        <h3 v-if="hasTitle" class="text-sm" :class="{ 'font-medium': hasDescription }">
           <slot name="title">Title</slot>
         </h3>
         <div v-if="hasDescription" :class="descriptionWrapperClasses">

From 7222db49d40a65a5c7e0829e075a390ce25dfdb1 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 11 Jul 2024 15:40:40 +0200
Subject: [PATCH 41/77] Fix capitalization

---
 .../components/header/NavUserMenu.vue         |  6 +-
 .../components/projects/AddDialog.vue         |  3 +-
 .../frontend-2/components/settings/Dialog.vue | 72 +++++++++----------
 .../settings/server/ActiveUsers.vue           |  6 +-
 .../components/settings/server/General.vue    |  8 +--
 .../settings/server/PendingInvitations.vue    | 12 ++--
 .../components/settings/server/Projects.vue   |  2 +-
 .../components/settings/user/Developer.vue    | 14 ++--
 .../settings/user/Notifications.vue           |  2 +-
 .../components/settings/user/Profile.vue      |  2 +-
 .../settings/user/profile/ChangePassword.vue  |  2 +-
 .../settings/user/profile/DeleteAccount.vue   |  4 +-
 .../settings/user/profile/Details.vue         |  2 +-
 .../src/components/layout/Table.vue           |  1 -
 14 files changed, 66 insertions(+), 70 deletions(-)

diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index 5b7e0222e7..8a3f340868 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -30,7 +30,7 @@
               :href="connectorsPageUrl"
             >
               <CloudArrowDownIcon class="w-5 h-5" />
-              Connector Downloads
+              Connector downloads
             </NuxtLink>
           </MenuItem>
           <MenuItem v-if="activeUser" v-slot="{ active }">
@@ -68,7 +68,7 @@
               "
             >
               <ServerStackIcon class="w-5 h-5" />
-              Server Settings
+              Server settings
             </NuxtLink>
           </MenuItem>
           <MenuItem v-slot="{ active }">
@@ -118,7 +118,7 @@
               @click="logout"
             >
               <ArrowLeftOnRectangleIcon class="w-5 h-5" />
-              Sign Out
+              Sign out
             </NuxtLink>
           </MenuItem>
           <MenuItem v-if="!activeUser && loginUrl" v-slot="{ active }">
diff --git a/packages/frontend-2/components/projects/AddDialog.vue b/packages/frontend-2/components/projects/AddDialog.vue
index c5e211fa99..54efbd770c 100644
--- a/packages/frontend-2/components/projects/AddDialog.vue
+++ b/packages/frontend-2/components/projects/AddDialog.vue
@@ -1,6 +1,5 @@
 <template>
-  <LayoutDialog v-model:open="open" max-width="sm" :buttons="dialogButtons">
-    <template #header>Create new project</template>
+  <LayoutDialog v-model:open="open" title="test" fullscreen :buttons="dialogButtons">
     <form class="flex flex-col text-foreground" @submit="onSubmit">
       <div class="flex flex-col gap-3 mb-6">
         <FormTextInput
diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index a6fdb281f1..12f5c85379 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -11,40 +11,38 @@
         v-if="!isMobile || !selectedMenuItem"
         class="w-full md:w-56 lg:w-60 md:p-4 md:pt-6 md:bg-foundation-page md:border-r md:border-outline-3"
       >
-        <div class="flex-1">
-          <LayoutSidebarMenu>
-            <LayoutSidebarMenuGroup title="Account Settings">
-              <template #title-icon>
-                <UserIcon />
-              </template>
-              <LayoutSidebarMenuGroupItem
-                v-for="(sidebarMenuItem, index) in sidebarConfig.user"
-                :key="`sidebarUserItem-${index}`"
-                :label="sidebarMenuItem.title"
-                :class="{
-                  'bg-foundation-focus hover:!bg-foundation-focus':
-                    selectedMenuItem?.path === sidebarMenuItem.path
-                }"
-                @click="setSelectedMenuItem(sidebarMenuItem)"
-              />
-            </LayoutSidebarMenuGroup>
-            <LayoutSidebarMenuGroup title="Server Settings">
-              <template #title-icon>
-                <ServerStackIcon />
-              </template>
-              <LayoutSidebarMenuGroupItem
-                v-for="(sidebarMenuItem, index) in sidebarConfig.server"
-                :key="`sidebarServerItem-${index}`"
-                :label="sidebarMenuItem.title"
-                :class="{
-                  'bg-foundation-focus hover:!bg-foundation-focus':
-                    selectedMenuItem?.path === sidebarMenuItem.path
-                }"
-                @click="setSelectedMenuItem(sidebarMenuItem)"
-              />
-            </LayoutSidebarMenuGroup>
-          </LayoutSidebarMenu>
-        </div>
+        <LayoutSidebarMenu>
+          <LayoutSidebarMenuGroup title="Account settings">
+            <template #title-icon>
+              <UserIcon />
+            </template>
+            <LayoutSidebarMenuGroupItem
+              v-for="(sidebarMenuItem, index) in sidebarConfig.user"
+              :key="`sidebarUserItem-${index}`"
+              :label="sidebarMenuItem.title"
+              :class="{
+                'bg-foundation-focus hover:!bg-foundation-focus':
+                  selectedMenuItem?.path === sidebarMenuItem.path
+              }"
+              @click="setSelectedMenuItem(sidebarMenuItem)"
+            />
+          </LayoutSidebarMenuGroup>
+          <LayoutSidebarMenuGroup title="Server settings">
+            <template #title-icon>
+              <ServerStackIcon />
+            </template>
+            <LayoutSidebarMenuGroupItem
+              v-for="(sidebarMenuItem, index) in sidebarConfig.server"
+              :key="`sidebarServerItem-${index}`"
+              :label="sidebarMenuItem.title"
+              :class="{
+                'bg-foundation-focus hover:!bg-foundation-focus':
+                  selectedMenuItem?.path === sidebarMenuItem.path
+              }"
+              @click="setSelectedMenuItem(sidebarMenuItem)"
+            />
+          </LayoutSidebarMenuGroup>
+        </LayoutSidebarMenu>
       </LayoutSidebar>
       <main
         v-if="selectedMenuItem"
@@ -117,7 +115,7 @@ const sidebarConfig: {
       path: settingsRoutes.user.notifications
     },
     developerSettings: {
-      title: 'Developer Settings',
+      title: 'Developer settings',
       component: SettingsUserDeveloper,
       path: settingsRoutes.user.developerSettings
     }
@@ -134,12 +132,12 @@ const sidebarConfig: {
       path: settingsRoutes.server.projects
     },
     activeUsers: {
-      title: 'Active Users',
+      title: 'Active users',
       component: SettingsServerActiveUsers,
       path: settingsRoutes.server.activeUsers
     },
     pendingInvitations: {
-      title: 'Pending Invitations',
+      title: 'Pending invitations',
       component: SettingsServerPendingInvitations,
       path: settingsRoutes.server.pendingInvitations
     }
diff --git a/packages/frontend-2/components/settings/server/ActiveUsers.vue b/packages/frontend-2/components/settings/server/ActiveUsers.vue
index a54f25c261..8a7fd13302 100644
--- a/packages/frontend-2/components/settings/server/ActiveUsers.vue
+++ b/packages/frontend-2/components/settings/server/ActiveUsers.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
-    <SettingsSectionHeader title="Active Users" text="Manage server members" />
+    <SettingsSectionHeader title="Active users" text="Manage server members" />
     <div class="flex flex-col-reverse md:flex-row">
       <FormTextInput
         name="search"
@@ -9,7 +9,7 @@
         full-width
         search
         :show-clear="!!searchString"
-        placeholder="Search Users"
+        placeholder="Search users"
         class="rounded-md border border-outline-3 md:max-w-md mt-6 md:mt-0"
         @update:model-value="debounceSearchUpdate"
         @change="($event) => searchUpdateHandler($event.value)"
@@ -24,7 +24,7 @@
       :columns="[
         { id: 'name', header: 'Name', classes: 'col-span-3 truncate' },
         { id: 'email', header: 'Email', classes: 'col-span-3 truncate' },
-        { id: 'emailState', header: 'Email State', classes: 'col-span-2' },
+        { id: 'emailState', header: 'Email state', classes: 'col-span-2' },
         { id: 'company', header: 'Company', classes: 'col-span-2 truncate' },
         { id: 'role', header: 'Role', classes: 'col-span-2' }
       ]"
diff --git a/packages/frontend-2/components/settings/server/General.vue b/packages/frontend-2/components/settings/server/General.vue
index ea35505350..54213a50cb 100644
--- a/packages/frontend-2/components/settings/server/General.vue
+++ b/packages/frontend-2/components/settings/server/General.vue
@@ -2,7 +2,7 @@
   <div class="md:max-w-xl md:mx-auto">
     <SettingsSectionHeader title="General" text="Manage general server information" />
     <div class="flex flex-col space-y-6">
-      <SettingsSectionHeader title="Server Details" subheading />
+      <SettingsSectionHeader title="Server details" subheading />
       <form class="flex flex-col gap-2" @submit="onSubmit">
         <div class="flex flex-col gap-4">
           <FormTextInput
@@ -35,9 +35,9 @@
           <FormTextInput
             v-model="adminContact"
             color="foundation"
-            label="Admin Email"
+            label="Admin email"
             name="adminEmail"
-            placeholder="Admin Email"
+            placeholder="Admin email"
             show-label
             type="email"
           />
@@ -63,7 +63,7 @@
             />
           </div>
           <div>
-            <FormButton color="default" @click="onSubmit">Save Changes</FormButton>
+            <FormButton color="default" @click="onSubmit">Save changes</FormButton>
           </div>
         </div>
       </form>
diff --git a/packages/frontend-2/components/settings/server/PendingInvitations.vue b/packages/frontend-2/components/settings/server/PendingInvitations.vue
index a3bd995ce5..d8ed8342b1 100644
--- a/packages/frontend-2/components/settings/server/PendingInvitations.vue
+++ b/packages/frontend-2/components/settings/server/PendingInvitations.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
     <SettingsSectionHeader
-      title="Pending Invitations"
+      title="Pending invitations"
       text="And overview of all your pending invititations"
     />
     <div class="flex flex-col-reverse md:flex-row">
@@ -12,7 +12,7 @@
         full-width
         search
         :show-clear="!!searchString"
-        placeholder="Search Invitations"
+        placeholder="Search invitations"
         class="rounded-md border border-outline-3 md:max-w-md mt-6 md:mt-0"
         @update:model-value="debounceSearchUpdate"
         @change="($event) => searchUpdateHandler($event.value)"
@@ -26,8 +26,8 @@
       class="mt-6 md:mt-8"
       :columns="[
         { id: 'email', header: 'Email', classes: 'col-span-5 truncate' },
-        { id: 'invitedBy', header: 'Invited By', classes: 'col-span-4' },
-        { id: 'resend', header: '', classes: 'col-span-3' }
+        { id: 'invitedBy', header: 'Invited by', classes: 'col-span-4' },
+        { id: 'resend', header: 'Resend', classes: 'col-span-3' }
       ]"
       :items="invites"
       :buttons="[
@@ -60,8 +60,8 @@
         >
           {{
             successfullyResentInvites.includes(item.id)
-              ? 'Invitation Resent'
-              : 'Resend Invitation'
+              ? 'Invitation resent'
+              : 'Resend invitation'
           }}
         </FormButton>
       </template>
diff --git a/packages/frontend-2/components/settings/server/Projects.vue b/packages/frontend-2/components/settings/server/Projects.vue
index da2dbf08cf..dd2ca77593 100644
--- a/packages/frontend-2/components/settings/server/Projects.vue
+++ b/packages/frontend-2/components/settings/server/Projects.vue
@@ -9,7 +9,7 @@
         full-width
         search
         :show-clear="!!searchString"
-        placeholder="Search Projects"
+        placeholder="Search projects"
         class="rounded-md border border-outline-3 md:max-w-md mt-6 md:mt-0"
         @update:model-value="debounceSearchUpdate"
         @change="($event) => searchUpdateHandler($event.value)"
diff --git a/packages/frontend-2/components/settings/user/Developer.vue b/packages/frontend-2/components/settings/user/Developer.vue
index e3b4c5c9bf..5f6c10db46 100644
--- a/packages/frontend-2/components/settings/user/Developer.vue
+++ b/packages/frontend-2/components/settings/user/Developer.vue
@@ -2,7 +2,7 @@
   <div class="md:max-w-5xl md:mx-auto">
     <div class="flex flex-col">
       <SettingsSectionHeader
-        title="Developer Settings"
+        title="Developer settings"
         text="Manage your tokens and authorized app"
       />
       <div class="flex flex-col gap-6 md:gap-12">
@@ -28,7 +28,7 @@
         <hr />
         <div class="flex flex-col gap-4">
           <SettingsSectionHeader
-            title="Access Tokens"
+            title="Access tokens"
             subheading
             :buttons="[
               {
@@ -39,14 +39,14 @@
                   target: '_blank',
                   external: true
                 },
-                label: 'Open Docs'
+                label: 'Open docs'
               },
               {
                 props: {
                   iconLeft: PlusIcon,
                   onClick: openCreateTokenDialog
                 },
-                label: 'New Token'
+                label: 'New token'
               }
             ]"
           >
@@ -119,14 +119,14 @@
                   external: true,
                   iconLeft: BookOpenIcon
                 },
-                label: 'Open Docs'
+                label: 'Open docs'
               },
               {
                 props: {
                   onClick: openCreateApplicationDialog,
                   iconLeft: PlusIcon
                 },
-                label: 'New Application'
+                label: 'New application'
               }
             ]"
           >
@@ -204,7 +204,7 @@
                   external: true,
                   iconLeft: BookOpenIcon
                 },
-                label: 'Open Docs'
+                label: 'Open docs'
               }
             ]"
           >
diff --git a/packages/frontend-2/components/settings/user/Notifications.vue b/packages/frontend-2/components/settings/user/Notifications.vue
index 92f0eca9cd..63dcb19ce1 100644
--- a/packages/frontend-2/components/settings/user/Notifications.vue
+++ b/packages/frontend-2/components/settings/user/Notifications.vue
@@ -2,7 +2,7 @@
   <div class="md:max-w-xl md:mx-auto">
     <SettingsSectionHeader
       title="Notifications"
-      text="Manage your notification preferencesr"
+      text="Manage your notification preferences"
     />
     <table class="table-auto w-full rounded-t overflow-hidden">
       <thead class="text-foreground-1">
diff --git a/packages/frontend-2/components/settings/user/Profile.vue b/packages/frontend-2/components/settings/user/Profile.vue
index 99016d0126..ffece41635 100644
--- a/packages/frontend-2/components/settings/user/Profile.vue
+++ b/packages/frontend-2/components/settings/user/Profile.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="md:max-w-xl md:mx-auto">
     <SettingsSectionHeader
-      title="User Profile"
+      title="User profile"
       text="Manage your profile information"
     />
     <SettingsUserProfileDetails :user="user" />
diff --git a/packages/frontend-2/components/settings/user/profile/ChangePassword.vue b/packages/frontend-2/components/settings/user/profile/ChangePassword.vue
index 8bb9024bee..749a24ac45 100644
--- a/packages/frontend-2/components/settings/user/profile/ChangePassword.vue
+++ b/packages/frontend-2/components/settings/user/profile/ChangePassword.vue
@@ -7,7 +7,7 @@
       Once pressed, you will receive an e-mail with further instructions.
     </p>
     <div>
-      <FormButton color="default" @click="onClick">Reset Password</FormButton>
+      <FormButton color="default" @click="onClick">Reset password</FormButton>
     </div>
   </div>
 </template>
diff --git a/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue b/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue
index 9b9cf34061..a5f68e578c 100644
--- a/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue
+++ b/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue
@@ -2,13 +2,13 @@
   <div>
     <SettingsUserProfileDeleteAccountDialog v-model:open="isOpen" :user="user" />
     <div class="flex flex-col space-y-6">
-      <SettingsSectionHeader title="Delete Account" subheading />
+      <SettingsSectionHeader title="Delete account" subheading />
       <div class="rounded border bg-foundation-page border-outline-3 text-sm py-4 px-6">
         We will delete all projects where you are the sole owner, and any associated
         data. We will ask you to type in your email address and press the delete button.
       </div>
       <div>
-        <FormButton color="danger" @click="toggleModal">Delete Account</FormButton>
+        <FormButton color="danger" @click="toggleModal">Delete account</FormButton>
       </div>
     </div>
   </div>
diff --git a/packages/frontend-2/components/settings/user/profile/Details.vue b/packages/frontend-2/components/settings/user/profile/Details.vue
index f56c2d1dd7..146fddeb3c 100644
--- a/packages/frontend-2/components/settings/user/profile/Details.vue
+++ b/packages/frontend-2/components/settings/user/profile/Details.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-y-4">
-    <SettingsSectionHeader title="Your Details" subheading />
+    <SettingsSectionHeader title="Your details" subheading />
     <div class="grid md:grid-cols-2 pt-4">
       <div class="flex h-full items-center justify-center">
         <UserProfileEditDialogAvatar :user="user" size="xxl" />
diff --git a/packages/ui-components/src/components/layout/Table.vue b/packages/ui-components/src/components/layout/Table.vue
index 246dbbf8f6..19d79a13bc 100644
--- a/packages/ui-components/src/components/layout/Table.vue
+++ b/packages/ui-components/src/components/layout/Table.vue
@@ -13,7 +13,6 @@
           v-for="(column, colIndex) in columns"
           :key="column.id"
           :class="getHeaderClasses(column.id, colIndex)"
-          class="capitalize"
         >
           {{ column.header }}
         </div>

From eaf151c4eedd8b097887d18685238a124e2e5c83 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Fri, 12 Jul 2024 09:51:39 +0200
Subject: [PATCH 42/77] Fix type issues and update copy

---
 .../components/header/NavUserMenu.vue         |  6 +-
 .../frontend-2/components/settings/Dialog.vue | 69 +++++++++----------
 .../pending-invitations/DeleteDialog.vue      |  2 +-
 .../settings/server/project/DeleteDialog.vue  |  2 +-
 .../settings/server/user/ChangeRoleDialog.vue |  4 +-
 .../settings/server/user/DeleteDialog.vue     |  2 +-
 .../settings/user/Notifications.vue           |  2 +-
 .../CreateApplicationSuccessDialog.vue        |  6 +-
 .../developer/CreateEditApplicationDialog.vue |  2 +-
 .../user/developer/CreateTokenDialog.vue      |  2 +-
 .../user/developer/RevealSecretDialog.vue     |  4 +-
 11 files changed, 50 insertions(+), 51 deletions(-)

diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index 8a3f340868..18e95d4a83 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -190,8 +190,8 @@ const route = useRoute()
 
 const showInviteDialog = ref(false)
 const showSettingsDialog = ref(false)
-const settingsRoute = ref(null)
-const settingsOriginalRoute = ref(null)
+const settingsRoute = ref('')
+const settingsOriginalRoute = ref('')
 const breakpoints = useBreakpoints(TailwindBreakpoints)
 const isMobile = breakpoints.smallerOrEqual('md')
 const menuButtonId = useId()
@@ -216,7 +216,7 @@ watch(
   (newVal, oldVal) => {
     if (newVal && !oldVal) {
       showSettingsDialog.value = true
-      settingsRoute.value = getSettingsRoute(route.path)
+      settingsRoute.value = route.path
     }
   },
   { immediate: true }
diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 12f5c85379..7a820c0197 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -1,10 +1,12 @@
 <template>
   <LayoutDialog
     v-model:open="isOpen"
-    :title="isMobile ? (selectedMenuItem ? selectedMenuItem?.title : 'Settings') : null"
+    v-bind="
+      isMobile ? { title: selectedMenuItem ? selectedMenuItem.title : 'Settings' } : {}
+    "
     fullscreen
     :show-back-button="!!(isMobile && selectedMenuItem)"
-    @back="setSelectedMenuItem(null)"
+    @back="onBack"
   >
     <div class="w-full h-full flex">
       <LayoutSidebar
@@ -60,6 +62,7 @@
 </template>
 
 <script setup lang="ts">
+import { find, flatMap } from 'lodash-es'
 import type { defineComponent } from 'vue'
 import SettingsUserProfile from './user/Profile.vue'
 import SettingsUserNotifications from './user/Notifications.vue'
@@ -90,58 +93,55 @@ const emit = defineEmits<{
 
 const props = defineProps<{
   open: boolean
-  route?: string
-  originalRoute?: string
+  route: string
+  originalRoute: string
 }>()
 
 const router = useRouter()
 const breakpoints = useBreakpoints(TailwindBreakpoints)
 const isMobile = breakpoints.smallerOrEqual('md')
-const selectedMenuItem: MenuItem | null = shallowRef(null)
-const sidebarConfig: {
-  [key: string]: {
-    [key: string]: MenuItem
-  }
-} = {
-  user: {
-    profile: {
+
+const selectedMenuItem = shallowRef<MenuItem | null>(null)
+const sidebarConfig: { [key: string]: MenuItem[] } = {
+  user: [
+    {
       title: 'Profile',
       component: SettingsUserProfile,
       path: settingsRoutes.user.profile
     },
-    notifications: {
+    {
       title: 'Notifications',
       component: SettingsUserNotifications,
       path: settingsRoutes.user.notifications
     },
-    developerSettings: {
+    {
       title: 'Developer settings',
       component: SettingsUserDeveloper,
       path: settingsRoutes.user.developerSettings
     }
-  },
-  server: {
-    general: {
+  ],
+  server: [
+    {
       title: 'General',
       component: SettingsServerGeneral,
       path: settingsRoutes.server.general
     },
-    projects: {
+    {
       title: 'Projects',
       component: SettingsServerProjects,
       path: settingsRoutes.server.projects
     },
-    activeUsers: {
+    {
       title: 'Active users',
       component: SettingsServerActiveUsers,
       path: settingsRoutes.server.activeUsers
     },
-    pendingInvitations: {
+    {
       title: 'Pending invitations',
       component: SettingsServerPendingInvitations,
       path: settingsRoutes.server.pendingInvitations
     }
-  }
+  ]
 }
 
 const isOpen = computed({
@@ -154,31 +154,30 @@ watch(
   (newVal, oldVal) => {
     if (newVal && !oldVal) {
       if (isMobile.value) {
-        history.pushState({}, '', '/settings')
+        history.pushState({}, '', settingsRoutes.default.settings)
       } else {
-        // If not on mobile find the component matching the route
-        for (const group in sidebarConfig) {
-          for (const key in sidebarConfig[group]) {
-            const item = sidebarConfig[group][key]
-            if (item.path === props.route) {
-              setSelectedMenuItem(item)
-            }
-          }
+        const foundItem = find(flatMap(sidebarConfig), { path: props.route })
+        if (foundItem) {
+          setSelectedMenuItem(foundItem)
         }
       }
     } else if (!newVal && oldVal) {
-      // When closing the modal revert back to the original route
-      selectedMenuItem.value = null
       router.replace({ path: props.originalRoute ?? homeRoute, force: true })
     }
   },
   { immediate: true }
 )
 
-function setSelectedMenuItem(item: MenuItem | null): void {
+function setSelectedMenuItem(item: MenuItem): void {
   selectedMenuItem.value = item
-  if (typeof window !== 'undefined') {
-    history.pushState({}, '', item ? item.path : settingsRoutes.default.settings)
+
+  if (import.meta.browser) {
+    history.pushState({}, '', item.path)
   }
 }
+
+function onBack() {
+  selectedMenuItem.value = null
+  history.pushState({}, '', settingsRoutes.default.settingsh)
+}
 </script>
diff --git a/packages/frontend-2/components/settings/server/pending-invitations/DeleteDialog.vue b/packages/frontend-2/components/settings/server/pending-invitations/DeleteDialog.vue
index 2aba3981c5..238238b93a 100644
--- a/packages/frontend-2/components/settings/server/pending-invitations/DeleteDialog.vue
+++ b/packages/frontend-2/components/settings/server/pending-invitations/DeleteDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <LayoutDialog v-model:open="isOpen" max-width="sm" :buttons="dialogButtons">
-    <template #header>Delete Invitation</template>
+    <template #header>Delete invitation</template>
     <div class="flex flex-col gap-6 text-sm text-foreground">
       <p>Are you sure you want to delete the selected invitation?</p>
       <div v-if="invite" class="flex flex-col gap-2">
diff --git a/packages/frontend-2/components/settings/server/project/DeleteDialog.vue b/packages/frontend-2/components/settings/server/project/DeleteDialog.vue
index 59e0ee1594..a24cef93a0 100644
--- a/packages/frontend-2/components/settings/server/project/DeleteDialog.vue
+++ b/packages/frontend-2/components/settings/server/project/DeleteDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <LayoutDialog v-model:open="isOpen" max-width="sm" :buttons="dialogButtons">
-    <template #header>Delete Project</template>
+    <template #header>Delete project</template>
     <div class="flex flex-col gap-6">
       <p>
         Are you sure you want to
diff --git a/packages/frontend-2/components/settings/server/user/ChangeRoleDialog.vue b/packages/frontend-2/components/settings/server/user/ChangeRoleDialog.vue
index 596df7bfe1..b5b9ba7226 100644
--- a/packages/frontend-2/components/settings/server/user/ChangeRoleDialog.vue
+++ b/packages/frontend-2/components/settings/server/user/ChangeRoleDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <LayoutDialog v-model:open="isOpen" max-width="sm" :buttons="dialogButtons">
-    <template #header>Change Role</template>
+    <template #header>Change role</template>
     <div class="flex flex-col gap-6 text-sm text-foreground">
       <p>
         Are you sure you want to
@@ -117,7 +117,7 @@ const changeUserRoleConfirmed = async () => {
 
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
-    text: 'Change Role',
+    text: 'Change role',
     props: { color: 'danger', fullWidth: true },
     onClick: changeUserRoleConfirmed
   },
diff --git a/packages/frontend-2/components/settings/server/user/DeleteDialog.vue b/packages/frontend-2/components/settings/server/user/DeleteDialog.vue
index 295d350882..24bf712512 100644
--- a/packages/frontend-2/components/settings/server/user/DeleteDialog.vue
+++ b/packages/frontend-2/components/settings/server/user/DeleteDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <LayoutDialog v-model:open="isOpen" max-width="sm" :buttons="dialogButtons">
-    <template #header>Delete User</template>
+    <template #header>Delete user</template>
     <div class="flex flex-col gap-6">
       <p>
         Are you sure you want to
diff --git a/packages/frontend-2/components/settings/user/Notifications.vue b/packages/frontend-2/components/settings/user/Notifications.vue
index 63dcb19ce1..e8a55c8928 100644
--- a/packages/frontend-2/components/settings/user/Notifications.vue
+++ b/packages/frontend-2/components/settings/user/Notifications.vue
@@ -73,7 +73,7 @@ const notificationTypeMapping = ref({
 const localPreferences = ref({} as NotificationPreferences)
 
 const notificationPreferences = computed(
-  () => user.value.notificationPreferences as NotificationPreferences
+  () => user.value?.notificationPreferences as NotificationPreferences
 )
 
 const notificationChannels = computed(() => {
diff --git a/packages/frontend-2/components/settings/user/developer/CreateApplicationSuccessDialog.vue b/packages/frontend-2/components/settings/user/developer/CreateApplicationSuccessDialog.vue
index 0b7adae2f2..1eeb40c065 100644
--- a/packages/frontend-2/components/settings/user/developer/CreateApplicationSuccessDialog.vue
+++ b/packages/frontend-2/components/settings/user/developer/CreateApplicationSuccessDialog.vue
@@ -1,18 +1,18 @@
 <template>
   <LayoutDialog v-model:open="isOpen" max-width="sm" :buttons="dialogButtons">
-    <template #header>Create Application</template>
+    <template #header>Create application</template>
     <div class="flex flex-col gap-4 text-sm text-foreground">
       <div class="flex flex-col gap-3">
         <h6 class="h6 font-bold text-center">Your new app is ready</h6>
         <div class="grid grid-cols-2 gap-x-6 gap-y-3 py-2 text-sm max-w-xs mx-auto">
-          <div class="flex items-center">App Id:</div>
+          <div class="flex items-center">App id:</div>
           <div class="w-40">
             <CommonClipboardInputWithToast
               v-if="props.application?.id"
               :value="props.application?.id"
             />
           </div>
-          <div class="flex items-center">App Secret:</div>
+          <div class="flex items-center">App secret:</div>
           <div class="w-40">
             <CommonClipboardInputWithToast
               v-if="props.application?.secret"
diff --git a/packages/frontend-2/components/settings/user/developer/CreateEditApplicationDialog.vue b/packages/frontend-2/components/settings/user/developer/CreateEditApplicationDialog.vue
index 7de4efad5e..bf0cc23ef3 100644
--- a/packages/frontend-2/components/settings/user/developer/CreateEditApplicationDialog.vue
+++ b/packages/frontend-2/components/settings/user/developer/CreateEditApplicationDialog.vue
@@ -6,7 +6,7 @@
     prevent-close-on-click-outside
   >
     <template #header>
-      {{ props.application ? 'Edit Application' : 'Create Application' }}
+      {{ props.application ? 'Edit application' : 'Create application' }}
     </template>
     <form @submit="onSubmit">
       <div class="flex flex-col gap-6">
diff --git a/packages/frontend-2/components/settings/user/developer/CreateTokenDialog.vue b/packages/frontend-2/components/settings/user/developer/CreateTokenDialog.vue
index cdcb28da2d..a75cc2655c 100644
--- a/packages/frontend-2/components/settings/user/developer/CreateTokenDialog.vue
+++ b/packages/frontend-2/components/settings/user/developer/CreateTokenDialog.vue
@@ -5,7 +5,7 @@
     :buttons="dialogButtons"
     prevent-close-on-click-outside
   >
-    <template #header>Create Token</template>
+    <template #header>Create token</template>
     <form @submit="onSubmit">
       <div class="flex flex-col gap-6">
         <FormTextInput
diff --git a/packages/frontend-2/components/settings/user/developer/RevealSecretDialog.vue b/packages/frontend-2/components/settings/user/developer/RevealSecretDialog.vue
index 81882f1704..fe7e4c23cf 100644
--- a/packages/frontend-2/components/settings/user/developer/RevealSecretDialog.vue
+++ b/packages/frontend-2/components/settings/user/developer/RevealSecretDialog.vue
@@ -5,14 +5,14 @@
     :buttons="dialogButtons"
     prevent-close-on-click-outside
   >
-    <template #header>Reveal Application Secret</template>
+    <template #header>Reveal application secret</template>
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 py-2 text-sm">
       <div class="text-center sm:text-right font-bold sm:font-normal">App Name:</div>
       <p class="truncate text-center sm:text-left">{{ props.application?.name }}</p>
       <div
         class="text-center sm:text-right flex items-center justify-center sm:justify-end font-bold sm:font-normal"
       >
-        App Secret:
+        App secret:
       </div>
       <div class="w-44 mx-auto sm:ml-0">
         <CommonClipboardInputWithToast

From 94fc96c334f2cb501db7a4e5e41e46cfec7828a1 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Fri, 12 Jul 2024 10:11:29 +0200
Subject: [PATCH 43/77] Minor bugfix after fixing types

---
 packages/frontend-2/components/settings/Dialog.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 7a820c0197..5d7f32cfe5 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -5,7 +5,7 @@
       isMobile ? { title: selectedMenuItem ? selectedMenuItem.title : 'Settings' } : {}
     "
     fullscreen
-    :show-back-button="!!(isMobile && selectedMenuItem)"
+    :show-back-button="isMobile && !!selectedMenuItem"
     @back="onBack"
   >
     <div class="w-full h-full flex">
@@ -94,7 +94,7 @@ const emit = defineEmits<{
 const props = defineProps<{
   open: boolean
   route: string
-  originalRoute: string
+  originalRoute?: string
 }>()
 
 const router = useRouter()
@@ -162,7 +162,8 @@ watch(
         }
       }
     } else if (!newVal && oldVal) {
-      router.replace({ path: props.originalRoute ?? homeRoute, force: true })
+      const newRoute = props.originalRoute ? props.originalRoute : homeRoute
+      router.replace({ path: newRoute, force: true })
     }
   },
   { immediate: true }
@@ -178,6 +179,7 @@ function setSelectedMenuItem(item: MenuItem): void {
 
 function onBack() {
   selectedMenuItem.value = null
+
   history.pushState({}, '', settingsRoutes.default.settingsh)
 }
 </script>

From 80245513fc41c70733f3e4eece43b83b22a3a0e1 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Mon, 15 Jul 2024 10:58:18 +0200
Subject: [PATCH 44/77] Fix pipeline issue

---
 .../components/settings/user/Profile.vue      | 12 ++-
 .../settings/user/profile/DeleteAccount.vue   |  8 +-
 .../user/profile/DeleteAccountDialog.vue      |  7 +-
 .../components/user/profile/EditDialog.vue    | 82 ----------------
 .../user/profile/EditDialog/Avatar.vue        | 44 ---------
 .../user/profile/EditDialog/Bio.vue           | 91 -----------------
 .../profile/EditDialog/ChangePassword.vue     | 31 ------
 .../user/profile/EditDialog/DeleteAccount.vue | 88 -----------------
 .../EditDialog/NotificationPreferences.vue    | 97 -------------------
 9 files changed, 19 insertions(+), 441 deletions(-)
 delete mode 100644 packages/frontend-2/components/user/profile/EditDialog.vue
 delete mode 100644 packages/frontend-2/components/user/profile/EditDialog/Avatar.vue
 delete mode 100644 packages/frontend-2/components/user/profile/EditDialog/Bio.vue
 delete mode 100644 packages/frontend-2/components/user/profile/EditDialog/ChangePassword.vue
 delete mode 100644 packages/frontend-2/components/user/profile/EditDialog/DeleteAccount.vue
 delete mode 100644 packages/frontend-2/components/user/profile/EditDialog/NotificationPreferences.vue

diff --git a/packages/frontend-2/components/settings/user/Profile.vue b/packages/frontend-2/components/settings/user/Profile.vue
index ffece41635..80e9401f1d 100644
--- a/packages/frontend-2/components/settings/user/Profile.vue
+++ b/packages/frontend-2/components/settings/user/Profile.vue
@@ -4,11 +4,13 @@
       title="User profile"
       text="Manage your profile information"
     />
-    <SettingsUserProfileDetails :user="user" />
-    <hr class="my-6 md:my-10" />
-    <SettingsUserProfileChangePassword :user="user" />
-    <hr class="my-6 md:my-10" />
-    <SettingsUserProfileDeleteAccount :user="user" />
+    <template v-if="user">
+      <SettingsUserProfileDetails :user="user" />
+      <hr class="my-6 md:my-10" />
+      <SettingsUserProfileChangePassword :user="user" />
+      <hr class="my-6 md:my-10" />
+      <SettingsUserProfileDeleteAccount :user="user" />
+    </template>
   </div>
 </template>
 <script setup lang="ts">
diff --git a/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue b/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue
index a5f68e578c..5fcf4850e1 100644
--- a/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue
+++ b/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue
@@ -15,8 +15,12 @@
 </template>
 
 <script setup lang="ts">
-import { useActiveUser } from '~~/lib/auth/composables/activeUser'
-const { activeUser: user } = useActiveUser()
+import type { UserProfileEditDialogDeleteAccount_UserFragment } from '~~/lib/common/generated/gql/graphql'
+
+defineProps<{
+  user: UserProfileEditDialogDeleteAccount_UserFragment
+}>()
+
 const isOpen = ref(false)
 
 function toggleModal() {
diff --git a/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue b/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue
index 901951a9d2..36b5f1e9f2 100644
--- a/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue
+++ b/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <LayoutDialog title="Delete account" :open="open" max-width="md">
+  <LayoutDialog title="Delete account" :open="isOpen" max-width="md">
     <form class="flex flex-col gap-2" @submit="onDelete">
       <div
         class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 py-3 px-4 bg-danger-lighter dark:bg-danger-darker rounded-md select-none mb-4"
@@ -72,6 +72,11 @@ const props = defineProps<{
   open: boolean
 }>()
 
+const isOpen = computed({
+  get: () => props.open,
+  set: (newVal) => emit('update:open', newVal)
+})
+
 const { handleSubmit, errors } = useForm<{ deleteEmail: string }>()
 const { mutate, loading } = useDeleteAccount()
 
diff --git a/packages/frontend-2/components/user/profile/EditDialog.vue b/packages/frontend-2/components/user/profile/EditDialog.vue
deleted file mode 100644
index a1cb055c39..0000000000
--- a/packages/frontend-2/components/user/profile/EditDialog.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-  <LayoutDialog v-model:open="isOpen" max-width="md">
-    <template #header>Edit Profile</template>
-    <div v-if="user" class="flex flex-col text-foreground">
-      <UserProfileEditDialogBio :user="user" />
-      <UserProfileEditDialogNotificationPreferences :user="user" />
-      <LayoutDialogSection
-        title="Developer Settings"
-        :button="developerSettingsButton"
-        border-b
-      >
-        <template #icon>
-          <CodeBracketIcon class="h-full w-full" />
-        </template>
-      </LayoutDialogSection>
-      <UserProfileEditDialogChangePassword :user="user" />
-      <UserProfileEditDialogDeleteAccount :user="user" @deleted="isOpen = false" />
-      <div class="text-xs text-foreground-2 mt-4">
-        User ID:
-        <CommonTextLink size="xs" no-underline @click="copyUserId">
-          #{{ user.id }}
-        </CommonTextLink>
-        <template v-if="distinctId">
-          |
-          <CommonTextLink size="xs" no-underline @click="copyDistinctId">
-            {{ distinctId }}
-          </CommonTextLink>
-        </template>
-      </div>
-    </div>
-  </LayoutDialog>
-</template>
-<script setup lang="ts">
-import { CodeBracketIcon, ChevronRightIcon } from '@heroicons/vue/24/outline'
-import { useActiveUser } from '~/lib/auth/composables/activeUser'
-
-type FormButtonColor =
-  | 'default'
-  | 'invert'
-  | 'danger'
-  | 'warning'
-  | 'success'
-  | 'card'
-  | 'secondary'
-  | 'info'
-
-const emit = defineEmits<{
-  (e: 'update:open', val: boolean): void
-}>()
-
-const props = defineProps<{
-  open: boolean
-}>()
-
-const { activeUser: user, distinctId } = useActiveUser()
-const { copy } = useClipboard()
-
-const isOpen = computed({
-  get: () => !!(props.open && user.value),
-  set: (newVal) => emit('update:open', newVal)
-})
-
-const developerSettingsButton = computed(() => ({
-  text: 'Manage',
-  color: 'default' as FormButtonColor,
-  to: '/developer-settings/',
-  iconRight: ChevronRightIcon,
-  onClick: () => {
-    isOpen.value = false
-  }
-}))
-
-const copyUserId = () => {
-  if (!user.value) return
-  copy(user.value.id)
-}
-
-const copyDistinctId = () => {
-  if (!distinctId.value) return
-  copy(distinctId.value)
-}
-</script>
diff --git a/packages/frontend-2/components/user/profile/EditDialog/Avatar.vue b/packages/frontend-2/components/user/profile/EditDialog/Avatar.vue
deleted file mode 100644
index b1656d5a0c..0000000000
--- a/packages/frontend-2/components/user/profile/EditDialog/Avatar.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <UserAvatarEditable
-    v-model:edit-mode="editMode"
-    :model-value="user.avatar"
-    :placeholder="user.name"
-    name="edit-avatar"
-    :disabled="loading"
-    :size="size"
-    @save="onSave"
-  />
-</template>
-<script setup lang="ts">
-import type { UserProfileEditDialogAvatar_UserFragment } from '~~/lib/common/generated/gql/graphql'
-import { graphql } from '~~/lib/common/generated/gql'
-import { useUpdateUserProfile } from '~~/lib/user/composables/management'
-import type { MaybeNullOrUndefined } from '@speckle/shared'
-import type { UserAvatarSize } from '@speckle/ui-components/dist/composables/user/avatar'
-
-graphql(`
-  fragment UserProfileEditDialogAvatar_User on User {
-    id
-    avatar
-    ...ActiveUserAvatar
-  }
-`)
-
-const props = defineProps<{
-  user: UserProfileEditDialogAvatar_UserFragment
-  size: UserAvatarSize
-}>()
-
-const editMode = ref(false)
-const { mutate, loading } = useUpdateUserProfile()
-
-const onSave = async (newVal: MaybeNullOrUndefined<string>) => {
-  if (props.user.avatar === newVal) return
-  if (loading.value) return
-
-  await mutate({
-    avatar: newVal || ''
-  })
-  editMode.value = false
-}
-</script>
diff --git a/packages/frontend-2/components/user/profile/EditDialog/Bio.vue b/packages/frontend-2/components/user/profile/EditDialog/Bio.vue
deleted file mode 100644
index 8904a7e1d1..0000000000
--- a/packages/frontend-2/components/user/profile/EditDialog/Bio.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <div class="flex flex-col space-y-4 mb-8">
-    <div class="flex flex-col space-y-4">
-      <div class="flex flex-col md:flex-row gap-2 sm:gap-8 items-center">
-        <div class="w-full md:w-4/12">
-          <UserProfileEditDialogAvatar :user="user" size="xxl" />
-        </div>
-        <div class="flex flex-col space-y-4 w-full md:w-9/12">
-          <FormTextInput
-            v-model="name"
-            color="foundation"
-            label="Name"
-            name="name"
-            placeholder="John Doe"
-            :custom-icon="UserIcon"
-            show-label
-            show-required
-            :rules="[isRequired, isStringOfLength({ maxLength: 512 })]"
-            @change="save"
-          />
-          <FormTextInput
-            v-model="company"
-            color="foundation"
-            label="Company"
-            name="company"
-            placeholder="Example Ltd."
-            :custom-icon="BriefcaseIcon"
-            show-label
-            :rules="[isStringOfLength({ maxLength: 512 })]"
-            @change="save"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { UserIcon, BriefcaseIcon } from '@heroicons/vue/24/solid'
-import { debounce } from 'lodash-es'
-import { graphql } from '~~/lib/common/generated/gql'
-import type {
-  UserProfileEditDialogBio_UserFragment,
-  UserUpdateInput
-} from '~~/lib/common/generated/gql/graphql'
-import { isRequired, isStringOfLength } from '~~/lib/common/helpers/validation'
-import { useUpdateUserProfile } from '~~/lib/user/composables/management'
-
-graphql(`
-  fragment UserProfileEditDialogBio_User on User {
-    id
-    name
-    company
-    bio
-    ...UserProfileEditDialogAvatar_User
-  }
-`)
-
-const props = defineProps<{
-  user: UserProfileEditDialogBio_UserFragment
-}>()
-
-const { mutate } = useUpdateUserProfile()
-
-const name = ref('')
-const company = ref('')
-const bio = ref('')
-
-const save = async () => {
-  debouncedSave.cancel()
-  const input: UserUpdateInput = {}
-  if (name.value !== props.user.name) input.name = name.value
-  if (company.value !== props.user.company) input.company = company.value
-  if (bio.value !== props.user.bio) input.bio = bio.value
-  if (!Object.values(input).length) return
-
-  await mutate(input)
-}
-const debouncedSave = debounce(save, 1000)
-
-watch(
-  () => props.user,
-  (user) => {
-    name.value = user.name
-    company.value = user.company || ''
-    bio.value = user.bio || ''
-  },
-  { deep: true, immediate: true }
-)
-
-watch(() => [name.value, company.value, bio.value], debouncedSave)
-</script>
diff --git a/packages/frontend-2/components/user/profile/EditDialog/ChangePassword.vue b/packages/frontend-2/components/user/profile/EditDialog/ChangePassword.vue
deleted file mode 100644
index e4e0e4007c..0000000000
--- a/packages/frontend-2/components/user/profile/EditDialog/ChangePassword.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <LayoutDialogSection border-b title="Change Password" title-color="default">
-    <template #icon>
-      <LockClosedIcon class="h-full w-full" />
-    </template>
-    <div class="flex flex-col space-y-4">
-      <div>
-        Press the button below to start the password reset process. Once pressed, you
-        will receive an e-mail with further instructions.
-      </div>
-      <div class="flex justify-end">
-        <FormButton color="default" @click="onClick">Reset password</FormButton>
-      </div>
-    </div>
-  </LayoutDialogSection>
-</template>
-<script setup lang="ts">
-import { LayoutDialogSection } from '@speckle/ui-components'
-import { LockClosedIcon } from '@heroicons/vue/24/outline'
-import { useActiveUser } from '~~/lib/auth/composables/activeUser'
-import { usePasswordReset } from '~~/lib/auth/composables/passwordReset'
-
-const { activeUser } = useActiveUser()
-const { sendResetEmail } = usePasswordReset()
-
-const onClick = async () => {
-  const email = activeUser.value?.email
-  if (!email) return
-  await sendResetEmail(email)
-}
-</script>
diff --git a/packages/frontend-2/components/user/profile/EditDialog/DeleteAccount.vue b/packages/frontend-2/components/user/profile/EditDialog/DeleteAccount.vue
deleted file mode 100644
index cb1297c2d5..0000000000
--- a/packages/frontend-2/components/user/profile/EditDialog/DeleteAccount.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <LayoutDialogSection border-b title="Delete Account" title-color="danger">
-    <template #icon>
-      <TrashIcon class="h-full w-full" />
-    </template>
-    <form class="flex flex-col gap-2" @submit="onDelete">
-      <div
-        class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 py-3 px-4 bg-danger-lighter dark:bg-danger-darker rounded-md select-none mb-4"
-      >
-        <div>
-          <ExclamationTriangleIcon class="mt-0.5 h-12 w-12 text-danger" />
-        </div>
-        <div>
-          <p class="font-semibold text-danger-darker dark:text-danger-lighter">
-            This action cannot be undone. We will delete all projects where you are the
-            sole owner, and any associated data.
-          </p>
-          <p class="text-sm">
-            To delete your account, type in your
-            <HelpText :text="emailPlaceholder">e-mail address</HelpText>
-            and press the button.
-          </p>
-        </div>
-      </div>
-      <div class="flex gap-2">
-        <FormTextInput
-          name="deleteEmail"
-          label="Your e-mail address"
-          :placeholder="emailPlaceholder"
-          full-width
-          validate-on-mount
-          validate-on-value-update
-          hide-error-message
-          :rules="[stringMatchesEmail]"
-        />
-        <FormButton
-          color="danger"
-          submit
-          :disabled="!!Object.values(errors).length || loading"
-        >
-          Delete
-        </FormButton>
-      </div>
-    </form>
-  </LayoutDialogSection>
-</template>
-<script setup lang="ts">
-import { LayoutDialogSection } from '@speckle/ui-components'
-import { TrashIcon, ExclamationTriangleIcon } from '@heroicons/vue/24/outline'
-import { useForm } from 'vee-validate'
-import type { GenericValidateFunction } from 'vee-validate'
-import { graphql } from '~~/lib/common/generated/gql'
-import type { UserProfileEditDialogDeleteAccount_UserFragment } from '~~/lib/common/generated/gql/graphql'
-import { useDeleteAccount } from '~~/lib/user/composables/management'
-
-graphql(`
-  fragment UserProfileEditDialogDeleteAccount_User on User {
-    id
-    email
-  }
-`)
-
-const stringMatchesEmail: GenericValidateFunction<string> = (val: string) => {
-  return (val || '').toLowerCase() === (props.user.email || '').toLowerCase()
-    ? true
-    : 'Value must match the email exactly'
-}
-
-const emit = defineEmits<{
-  (e: 'deleted'): void
-}>()
-
-const props = defineProps<{
-  user: UserProfileEditDialogDeleteAccount_UserFragment
-}>()
-
-const { handleSubmit, errors } = useForm<{ deleteEmail: string }>()
-const { mutate, loading } = useDeleteAccount()
-
-const emailPlaceholder = computed(() => props.user.email || 'example@example.com')
-
-const onDelete = handleSubmit(async (values) => {
-  const isDeleted = await mutate({
-    email: values.deleteEmail
-  })
-  if (isDeleted) emit('deleted')
-})
-</script>
diff --git a/packages/frontend-2/components/user/profile/EditDialog/NotificationPreferences.vue b/packages/frontend-2/components/user/profile/EditDialog/NotificationPreferences.vue
deleted file mode 100644
index 465b6b52ec..0000000000
--- a/packages/frontend-2/components/user/profile/EditDialog/NotificationPreferences.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-  <LayoutDialogSection title="Notification preferences" border-t border-b>
-    <template #icon>
-      <BellIcon class="h-full w-full" />
-    </template>
-    <table class="table-auto w-full rounded-t overflow-hidden">
-      <thead class="text-foreground-1">
-        <tr>
-          <th class="bg-primary-muted py-2 px-4">Notification type</th>
-          <th
-            v-for="channel in notificationChannels"
-            :key="channel"
-            class="bg-primary-muted text-right py-2 px-4"
-          >
-            {{ capitalize(channel) }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="[type, settings] in Object.entries(localPreferences)" :key="type">
-          <td class="px-4 pb-1 pt-2 text-xs sm:text-sm">
-            {{ notificationTypeMapping[type] || 'Unknown' }}
-          </td>
-          <td
-            v-for="channel in notificationChannels"
-            :key="channel"
-            class="flex justify-end pt-2 pr-4"
-          >
-            <FormCheckbox
-              :name="`${type} (${channel})`"
-              :disabled="loading"
-              hide-label
-              :model-value="settings[channel] || undefined"
-              @update:model-value="
-                ($event) => onUpdate({ value: !!$event, type, channel })
-              "
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </LayoutDialogSection>
-</template>
-<script setup lang="ts">
-import { LayoutDialogSection } from '@speckle/ui-components'
-import { BellIcon } from '@heroicons/vue/24/outline'
-import { capitalize, cloneDeep } from 'lodash-es'
-import { graphql } from '~~/lib/common/generated/gql'
-import type { UserProfileEditDialogNotificationPreferences_UserFragment } from '~~/lib/common/generated/gql/graphql'
-import { useUpdateNotificationPreferences } from '~~/lib/user/composables/management'
-import type { NotificationPreferences } from '~~/lib/user/helpers/components'
-
-graphql(`
-  fragment UserProfileEditDialogNotificationPreferences_User on User {
-    id
-    notificationPreferences
-  }
-`)
-
-const props = defineProps<{
-  user: UserProfileEditDialogNotificationPreferences_UserFragment
-}>()
-
-const { mutate, loading } = useUpdateNotificationPreferences()
-
-const notificationTypeMapping = ref({
-  activityDigest: 'Weekly activity digest',
-  mentionedInComment: 'Mentioned in comment',
-  newStreamAccessRequest: 'Project access request',
-  streamAccessRequestApproved: 'Project access request approved'
-} as Record<string, string>)
-
-const localPreferences = ref({} as NotificationPreferences)
-
-const notificationPreferences = computed(
-  () => props.user.notificationPreferences as NotificationPreferences
-)
-
-const notificationChannels = computed(() => {
-  const firstTypeSettings = Object.values(notificationPreferences.value)[0] || {}
-  return Object.keys(firstTypeSettings)
-})
-
-const onUpdate = async (params: { value: boolean; channel: string; type: string }) => {
-  const { value, channel, type } = params
-  localPreferences.value[type][channel] = value
-  await mutate(localPreferences.value)
-}
-
-watch(
-  notificationPreferences,
-  (prefs) => {
-    localPreferences.value = cloneDeep(prefs)
-  },
-  { immediate: true, deep: true }
-)
-</script>

From 3e2e21824ed22da2913aa47e8804d2955ba7721d Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Mon, 15 Jul 2024 11:01:39 +0200
Subject: [PATCH 45/77] Fix addidental delete

---
 .../settings/user/profile/Details.vue         |  2 +-
 .../settings/user/profile/EditAvatar.vue      | 44 +++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 packages/frontend-2/components/settings/user/profile/EditAvatar.vue

diff --git a/packages/frontend-2/components/settings/user/profile/Details.vue b/packages/frontend-2/components/settings/user/profile/Details.vue
index 146fddeb3c..900e3c2368 100644
--- a/packages/frontend-2/components/settings/user/profile/Details.vue
+++ b/packages/frontend-2/components/settings/user/profile/Details.vue
@@ -3,7 +3,7 @@
     <SettingsSectionHeader title="Your details" subheading />
     <div class="grid md:grid-cols-2 pt-4">
       <div class="flex h-full items-center justify-center">
-        <UserProfileEditDialogAvatar :user="user" size="xxl" />
+        <SettingsUserProfileEditAvatar :user="user" size="xxl" />
       </div>
       <div class="pt-6 md:pt-0">
         <FormTextInput
diff --git a/packages/frontend-2/components/settings/user/profile/EditAvatar.vue b/packages/frontend-2/components/settings/user/profile/EditAvatar.vue
new file mode 100644
index 0000000000..b1656d5a0c
--- /dev/null
+++ b/packages/frontend-2/components/settings/user/profile/EditAvatar.vue
@@ -0,0 +1,44 @@
+<template>
+  <UserAvatarEditable
+    v-model:edit-mode="editMode"
+    :model-value="user.avatar"
+    :placeholder="user.name"
+    name="edit-avatar"
+    :disabled="loading"
+    :size="size"
+    @save="onSave"
+  />
+</template>
+<script setup lang="ts">
+import type { UserProfileEditDialogAvatar_UserFragment } from '~~/lib/common/generated/gql/graphql'
+import { graphql } from '~~/lib/common/generated/gql'
+import { useUpdateUserProfile } from '~~/lib/user/composables/management'
+import type { MaybeNullOrUndefined } from '@speckle/shared'
+import type { UserAvatarSize } from '@speckle/ui-components/dist/composables/user/avatar'
+
+graphql(`
+  fragment UserProfileEditDialogAvatar_User on User {
+    id
+    avatar
+    ...ActiveUserAvatar
+  }
+`)
+
+const props = defineProps<{
+  user: UserProfileEditDialogAvatar_UserFragment
+  size: UserAvatarSize
+}>()
+
+const editMode = ref(false)
+const { mutate, loading } = useUpdateUserProfile()
+
+const onSave = async (newVal: MaybeNullOrUndefined<string>) => {
+  if (props.user.avatar === newVal) return
+  if (loading.value) return
+
+  await mutate({
+    avatar: newVal || ''
+  })
+  editMode.value = false
+}
+</script>

From 9051f14939ab9e74c9917631ae0a1b14bc481db8 Mon Sep 17 00:00:00 2001
From: Mike <mike.tasset@gmail.com>
Date: Mon, 15 Jul 2024 15:48:00 +0200
Subject: [PATCH 46/77] Update Dialog.vue

---
 packages/frontend-2/components/settings/Dialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 5d7f32cfe5..af083974a9 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -180,6 +180,6 @@ function setSelectedMenuItem(item: MenuItem): void {
 function onBack() {
   selectedMenuItem.value = null
 
-  history.pushState({}, '', settingsRoutes.default.settingsh)
+  history.pushState({}, '', settingsRoutes.default.settings)
 }
 </script>

From 654ebef9f53e47a2d372742e70ab7fe907179deb Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Tue, 16 Jul 2024 16:34:09 +0200
Subject: [PATCH 47/77] Remove route maniplulation from settings dialog

---
 .../components/header/NavUserMenu.vue         | 57 +++------------
 .../frontend-2/components/settings/Dialog.vue | 72 ++++++++-----------
 .../frontend-2/lib/common/helpers/route.ts    | 15 ----
 3 files changed, 37 insertions(+), 107 deletions(-)

diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index 18e95d4a83..39b0c0fc22 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -39,14 +39,7 @@
                 active ? 'bg-foundation-focus' : '',
                 'flex gap-3.5 items-center px-3 py-2.5 text-sm text-foreground cursor-pointer transition mx-1 rounded'
               ]"
-              @click="
-                () =>
-                  toggleSettingsDialog(
-                    isMobile
-                      ? settingsRoutes.default.settings
-                      : settingsRoutes.user.profile
-                  )
-              "
+              @click="toggleSettingsDialog(false)"
             >
               <UserCircleIcon class="w-5 h-5" />
               Settings
@@ -58,14 +51,7 @@
                 active ? 'bg-foundation-focus' : '',
                 'flex gap-3.5 items-center px-3 py-2.5 text-sm text-foreground cursor-pointer transition mx-1 rounded'
               ]"
-              @click="
-                () =>
-                  toggleSettingsDialog(
-                    isMobile
-                      ? settingsRoutes.default.settings
-                      : settingsRoutes.server.general
-                  )
-              "
+              @click="toggleSettingsDialog"
             >
               <ServerStackIcon class="w-5 h-5" />
               Server settings
@@ -89,7 +75,7 @@
                 active ? 'bg-foundation-focus' : '',
                 'flex gap-3.5 items-center px-3 py-2.5 text-sm text-foreground cursor-pointer transition mx-1 rounded'
               ]"
-              @click="toggleInviteDialog"
+              @click="toggleInviteDialog(true)"
             >
               <EnvelopeIcon class="w-5 h-5" />
               Invite to Speckle
@@ -144,8 +130,7 @@
     <SettingsServerUserInviteDialog v-model:open="showInviteDialog" />
     <SettingsDialog
       v-model:open="showSettingsDialog"
-      :route="settingsRoute"
-      :original-route="settingsOriginalRoute"
+      :open-server-page="settingsDialogOpenServerPage"
     />
   </div>
 </template>
@@ -168,14 +153,8 @@ import { useActiveUser } from '~~/lib/auth/composables/activeUser'
 import { useAuthManager } from '~~/lib/auth/composables/auth'
 import { useTheme } from '~~/lib/core/composables/theme'
 import { useServerInfo } from '~/lib/core/composables/server'
-import {
-  getSettingsRoute,
-  settingsRoutes,
-  connectorsPageUrl
-} from '~/lib/common/helpers/route'
+import { connectorsPageUrl } from '~/lib/common/helpers/route'
 import type { RouteLocationRaw } from 'vue-router'
-import { useBreakpoints } from '@vueuse/core'
-import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
 
 defineProps<{
   loginUrl?: RouteLocationRaw
@@ -186,39 +165,21 @@ const { activeUser, isGuest } = useActiveUser()
 const { isDarkTheme, toggleTheme } = useTheme()
 const { serverInfo } = useServerInfo()
 
-const route = useRoute()
-
 const showInviteDialog = ref(false)
+const settingsDialogOpenServerPage = ref(false)
 const showSettingsDialog = ref(false)
-const settingsRoute = ref('')
-const settingsOriginalRoute = ref('')
-const breakpoints = useBreakpoints(TailwindBreakpoints)
-const isMobile = breakpoints.smallerOrEqual('md')
 const menuButtonId = useId()
 
 const Icon = computed(() => (isDarkTheme.value ? SunIcon : MoonIcon))
 const version = computed(() => serverInfo.value?.version)
 const isAdmin = computed(() => activeUser.value?.role === Roles.Server.Admin)
-const isSettingsRoute = computed(() => !!getSettingsRoute(route.path))
 
-const toggleInviteDialog = () => {
+const toggleInviteDialog = (openServerPage: boolean) => {
   showInviteDialog.value = true
+  settingsDialogOpenServerPage.value = openServerPage
 }
 
-const toggleSettingsDialog = (newRoute: string) => {
+const toggleSettingsDialog = () => {
   showSettingsDialog.value = true
-  settingsRoute.value = newRoute
-  settingsOriginalRoute.value = route.path
 }
-
-watch(
-  isSettingsRoute,
-  (newVal, oldVal) => {
-    if (newVal && !oldVal) {
-      showSettingsDialog.value = true
-      settingsRoute.value = route.path
-    }
-  },
-  { immediate: true }
-)
 </script>
diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index af083974a9..aebad98d8a 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -6,7 +6,7 @@
     "
     fullscreen
     :show-back-button="isMobile && !!selectedMenuItem"
-    @back="onBack"
+    @back="selectedMenuItem = null"
   >
     <div class="w-full h-full flex">
       <LayoutSidebar
@@ -26,7 +26,7 @@
                 'bg-foundation-focus hover:!bg-foundation-focus':
                   selectedMenuItem?.path === sidebarMenuItem.path
               }"
-              @click="setSelectedMenuItem(sidebarMenuItem)"
+              @click="selectedMenuItem = sidebarMenuItem"
             />
           </LayoutSidebarMenuGroup>
           <LayoutSidebarMenuGroup title="Server settings">
@@ -41,7 +41,7 @@
                 'bg-foundation-focus hover:!bg-foundation-focus':
                   selectedMenuItem?.path === sidebarMenuItem.path
               }"
-              @click="setSelectedMenuItem(sidebarMenuItem)"
+              @click="selectedMenuItem = sidebarMenuItem"
             />
           </LayoutSidebarMenuGroup>
         </LayoutSidebarMenu>
@@ -54,7 +54,7 @@
         ]"
       >
         <div class="pb-6">
-          <component :is="selectedMenuItem?.component" />
+          <component :is="selectedMenuItem.component" />
         </div>
       </main>
     </div>
@@ -62,7 +62,6 @@
 </template>
 
 <script setup lang="ts">
-import { find, flatMap } from 'lodash-es'
 import type { defineComponent } from 'vue'
 import SettingsUserProfile from './user/Profile.vue'
 import SettingsUserNotifications from './user/Notifications.vue'
@@ -74,7 +73,7 @@ import SettingsServerPendingInvitations from './server/PendingInvitations.vue'
 import { useBreakpoints } from '@vueuse/core'
 import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
 import { UserIcon, ServerStackIcon } from '@heroicons/vue/24/outline'
-import { settingsRoutes, homeRoute } from '~/lib/common/helpers/route'
+import { settingsRoutes } from '~/lib/common/helpers/route'
 import {
   LayoutSidebar,
   LayoutSidebarMenu,
@@ -93,55 +92,58 @@ const emit = defineEmits<{
 
 const props = defineProps<{
   open: boolean
-  route: string
-  originalRoute?: string
+  openServerPage?: boolean
 }>()
 
-const router = useRouter()
 const breakpoints = useBreakpoints(TailwindBreakpoints)
 const isMobile = breakpoints.smallerOrEqual('md')
 
 const selectedMenuItem = shallowRef<MenuItem | null>(null)
-const sidebarConfig: { [key: string]: MenuItem[] } = {
-  user: [
-    {
+
+const sidebarConfig: {
+  [key: string]: {
+    [key: string]: MenuItem
+  }
+} = {
+  user: {
+    profile: {
       title: 'Profile',
       component: SettingsUserProfile,
       path: settingsRoutes.user.profile
     },
-    {
+    notifications: {
       title: 'Notifications',
       component: SettingsUserNotifications,
       path: settingsRoutes.user.notifications
     },
-    {
+    developerSettings: {
       title: 'Developer settings',
       component: SettingsUserDeveloper,
       path: settingsRoutes.user.developerSettings
     }
-  ],
-  server: [
-    {
+  },
+  server: {
+    general: {
       title: 'General',
       component: SettingsServerGeneral,
       path: settingsRoutes.server.general
     },
-    {
+    projects: {
       title: 'Projects',
       component: SettingsServerProjects,
       path: settingsRoutes.server.projects
     },
-    {
+    activeUsers: {
       title: 'Active users',
       component: SettingsServerActiveUsers,
       path: settingsRoutes.server.activeUsers
     },
-    {
+    pendingInvitations: {
       title: 'Pending invitations',
       component: SettingsServerPendingInvitations,
       path: settingsRoutes.server.pendingInvitations
     }
-  ]
+  }
 }
 
 const isOpen = computed({
@@ -153,33 +155,15 @@ watch(
   isOpen,
   (newVal, oldVal) => {
     if (newVal && !oldVal) {
-      if (isMobile.value) {
-        history.pushState({}, '', settingsRoutes.default.settings)
-      } else {
-        const foundItem = find(flatMap(sidebarConfig), { path: props.route })
-        if (foundItem) {
-          setSelectedMenuItem(foundItem)
-        }
+      if (!isMobile.value) {
+        selectedMenuItem.value = props.openServerPage
+          ? sidebarConfig.user.profile
+          : sidebarConfig.server.general
       }
     } else if (!newVal && oldVal) {
-      const newRoute = props.originalRoute ? props.originalRoute : homeRoute
-      router.replace({ path: newRoute, force: true })
+      selectedMenuItem.value = null
     }
   },
   { immediate: true }
 )
-
-function setSelectedMenuItem(item: MenuItem): void {
-  selectedMenuItem.value = item
-
-  if (import.meta.browser) {
-    history.pushState({}, '', item.path)
-  }
-}
-
-function onBack() {
-  selectedMenuItem.value = null
-
-  history.pushState({}, '', settingsRoutes.default.settings)
-}
 </script>
diff --git a/packages/frontend-2/lib/common/helpers/route.ts b/packages/frontend-2/lib/common/helpers/route.ts
index a03e4955dc..2dbebb218f 100644
--- a/packages/frontend-2/lib/common/helpers/route.ts
+++ b/packages/frontend-2/lib/common/helpers/route.ts
@@ -19,9 +19,6 @@ export const settingsRoutes: {
     [key: string]: string
   }
 } = {
-  default: {
-    settings: '/settings'
-  },
   user: {
     profile: '/settings/user/profile',
     notifications: '/settings/user/notifications',
@@ -35,18 +32,6 @@ export const settingsRoutes: {
   }
 }
 
-export const getSettingsRoute = (route: string) => {
-  for (const group in settingsRoutes) {
-    for (const key in settingsRoutes[group]) {
-      if (route === settingsRoutes[group][key]) {
-        return settingsRoutes[group][key]
-      }
-    }
-  }
-
-  return null
-}
-
 export const projectRoute = (
   id: string,
   tab?: 'models' | 'discussions' | 'automations' | 'settings'

From 918c21e79b9819abcd6b5f375515f1604dc2b8ed Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Tue, 16 Jul 2024 16:52:25 +0200
Subject: [PATCH 48/77] Minor bugfixes

---
 packages/frontend-2/components/projects/AddDialog.vue          | 3 ++-
 packages/frontend-2/components/settings/Dialog.vue             | 2 +-
 packages/ui-components/src/components/layout/Dialog.vue        | 2 +-
 .../src/components/layout/sidebar/menu/group/Group.vue         | 2 +-
 packages/ui-components/src/helpers/tailwind.ts                 | 2 +-
 5 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/frontend-2/components/projects/AddDialog.vue b/packages/frontend-2/components/projects/AddDialog.vue
index 54efbd770c..c5e211fa99 100644
--- a/packages/frontend-2/components/projects/AddDialog.vue
+++ b/packages/frontend-2/components/projects/AddDialog.vue
@@ -1,5 +1,6 @@
 <template>
-  <LayoutDialog v-model:open="open" title="test" fullscreen :buttons="dialogButtons">
+  <LayoutDialog v-model:open="open" max-width="sm" :buttons="dialogButtons">
+    <template #header>Create new project</template>
     <form class="flex flex-col text-foreground" @submit="onSubmit">
       <div class="flex flex-col gap-3 mb-6">
         <FormTextInput
diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index aebad98d8a..4e009d86d5 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -92,7 +92,7 @@ const emit = defineEmits<{
 
 const props = defineProps<{
   open: boolean
-  openServerPage?: boolean
+  openServerPage: boolean
 }>()
 
 const breakpoints = useBreakpoints(TailwindBreakpoints)
diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue
index 091b2cefaa..b44f4dacd8 100644
--- a/packages/ui-components/src/components/layout/Dialog.vue
+++ b/packages/ui-components/src/components/layout/Dialog.vue
@@ -68,7 +68,7 @@
               <button
                 v-if="!hideCloser"
                 type="button"
-                class="absolute z-20 bg-foundation hover:bg-foundation-page transition rounded-full p-1.5 shadow border top-5 right-5"
+                class="absolute z-20 bg-foundation hover:bg-foundation-page transition rounded-full p-1.5 shadow border top-5 right-5 border-outline-3"
                 @click="open = false"
               >
                 <XMarkIcon class="h-4 w-4 md:w-5 md:h-5" />
diff --git a/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue b/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue
index 6ff64b4dd7..3e70bfcbde 100644
--- a/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue
+++ b/packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue
@@ -11,7 +11,7 @@
           {{ title }}
         </h6>
       </button>
-      <div v-else class="flex gap-1 items-center w-full p-0.5 text-foreground-2">
+      <div v-else class="flex gap-1 items-center w-full p-1 text-foreground-2">
         <div
           v-if="$slots['title-icon']"
           class="h-5 w-5 flex items-center justify-center"
diff --git a/packages/ui-components/src/helpers/tailwind.ts b/packages/ui-components/src/helpers/tailwind.ts
index f536aca48a..ef4a141f32 100644
--- a/packages/ui-components/src/helpers/tailwind.ts
+++ b/packages/ui-components/src/helpers/tailwind.ts
@@ -19,7 +19,7 @@ export function markClassesUsed(classes: string[]) {
  */
 export enum TailwindBreakpoints {
   sm = 640,
-  md = 746,
+  md = 768,
   lg = 1024,
   xl = 1280,
   '2xl' = 1536

From 7c390ffed2a271b2d70704f2416314e60656248a Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Tue, 16 Jul 2024 17:23:51 +0200
Subject: [PATCH 49/77] Fix dialog closing

---
 .../settings/server/user/DeleteDialog.vue         |  6 ++++--
 .../developer/CreateEditApplicationDialog.vue     |  7 +------
 .../settings/user/developer/CreateTokenDialog.vue |  7 +------
 .../user/developer/RevealSecretDialog.vue         |  7 +------
 .../settings/user/profile/DeleteAccount.vue       | 15 ++++++++++-----
 .../settings/user/profile/DeleteAccountDialog.vue |  8 ++------
 6 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/packages/frontend-2/components/settings/server/user/DeleteDialog.vue b/packages/frontend-2/components/settings/server/user/DeleteDialog.vue
index 24bf712512..516284b296 100644
--- a/packages/frontend-2/components/settings/server/user/DeleteDialog.vue
+++ b/packages/frontend-2/components/settings/server/user/DeleteDialog.vue
@@ -46,8 +46,10 @@ const props = defineProps<{
 const { triggerNotification } = useGlobalToast()
 const { mutate: adminDeleteUser } = useMutation(adminDeleteUserMutation)
 
-const isOpen = defineModel<boolean>('open', { required: true })
-
+const isOpen = computed({
+  get: () => props.open,
+  set: (newVal: boolean) => emit('update:open', newVal)
+})
 const deleteConfirmed = async () => {
   const userEmail = props.user?.email
   if (!userEmail) {
diff --git a/packages/frontend-2/components/settings/user/developer/CreateEditApplicationDialog.vue b/packages/frontend-2/components/settings/user/developer/CreateEditApplicationDialog.vue
index bf0cc23ef3..8c088817ec 100644
--- a/packages/frontend-2/components/settings/user/developer/CreateEditApplicationDialog.vue
+++ b/packages/frontend-2/components/settings/user/developer/CreateEditApplicationDialog.vue
@@ -1,10 +1,5 @@
 <template>
-  <LayoutDialog
-    v-model:open="isOpen"
-    max-width="sm"
-    :buttons="dialogButtons"
-    prevent-close-on-click-outside
-  >
+  <LayoutDialog v-model:open="isOpen" max-width="sm" :buttons="dialogButtons">
     <template #header>
       {{ props.application ? 'Edit application' : 'Create application' }}
     </template>
diff --git a/packages/frontend-2/components/settings/user/developer/CreateTokenDialog.vue b/packages/frontend-2/components/settings/user/developer/CreateTokenDialog.vue
index a75cc2655c..4c626bf70c 100644
--- a/packages/frontend-2/components/settings/user/developer/CreateTokenDialog.vue
+++ b/packages/frontend-2/components/settings/user/developer/CreateTokenDialog.vue
@@ -1,10 +1,5 @@
 <template>
-  <LayoutDialog
-    v-model:open="isOpen"
-    max-width="sm"
-    :buttons="dialogButtons"
-    prevent-close-on-click-outside
-  >
+  <LayoutDialog v-model:open="isOpen" max-width="sm" :buttons="dialogButtons">
     <template #header>Create token</template>
     <form @submit="onSubmit">
       <div class="flex flex-col gap-6">
diff --git a/packages/frontend-2/components/settings/user/developer/RevealSecretDialog.vue b/packages/frontend-2/components/settings/user/developer/RevealSecretDialog.vue
index fe7e4c23cf..fbb0d8d939 100644
--- a/packages/frontend-2/components/settings/user/developer/RevealSecretDialog.vue
+++ b/packages/frontend-2/components/settings/user/developer/RevealSecretDialog.vue
@@ -1,10 +1,5 @@
 <template>
-  <LayoutDialog
-    v-model:open="isOpen"
-    max-width="sm"
-    :buttons="dialogButtons"
-    prevent-close-on-click-outside
-  >
+  <LayoutDialog v-model:open="isOpen" max-width="sm" :buttons="dialogButtons">
     <template #header>Reveal application secret</template>
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 py-2 text-sm">
       <div class="text-center sm:text-right font-bold sm:font-normal">App Name:</div>
diff --git a/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue b/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue
index 5fcf4850e1..ab465d371b 100644
--- a/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue
+++ b/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <SettingsUserProfileDeleteAccountDialog v-model:open="isOpen" :user="user" />
+    <SettingsUserProfileDeleteAccountDialog
+      v-model:open="showDeleteDialog"
+      :user="user"
+    />
     <div class="flex flex-col space-y-6">
       <SettingsSectionHeader title="Delete account" subheading />
       <div class="rounded border bg-foundation-page border-outline-3 text-sm py-4 px-6">
@@ -8,7 +11,9 @@
         data. We will ask you to type in your email address and press the delete button.
       </div>
       <div>
-        <FormButton color="danger" @click="toggleModal">Delete account</FormButton>
+        <FormButton color="danger" @click="toggleDeleteDialog">
+          Delete account
+        </FormButton>
       </div>
     </div>
   </div>
@@ -21,9 +26,9 @@ defineProps<{
   user: UserProfileEditDialogDeleteAccount_UserFragment
 }>()
 
-const isOpen = ref(false)
+const showDeleteDialog = ref(false)
 
-function toggleModal() {
-  isOpen.value = !isOpen.value
+function toggleDeleteDialog() {
+  showDeleteDialog.value = true
 }
 </script>
diff --git a/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue b/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue
index 36b5f1e9f2..9949bdec9d 100644
--- a/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue
+++ b/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <LayoutDialog title="Delete account" :open="isOpen" max-width="md">
+  <LayoutDialog v-model:open="isOpen" title="Delete account" max-width="md">
     <form class="flex flex-col gap-2" @submit="onDelete">
       <div
         class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 py-3 px-4 bg-danger-lighter dark:bg-danger-darker rounded-md select-none mb-4"
@@ -69,13 +69,9 @@ const emit = defineEmits<{
 
 const props = defineProps<{
   user: UserProfileEditDialogDeleteAccount_UserFragment
-  open: boolean
 }>()
 
-const isOpen = computed({
-  get: () => props.open,
-  set: (newVal) => emit('update:open', newVal)
-})
+const isOpen = defineModel<boolean>('open', { required: true })
 
 const { handleSubmit, errors } = useForm<{ deleteEmail: string }>()
 const { mutate, loading } = useDeleteAccount()

From 97b6070cc9ac3628d4569690f91f5802a9748fea Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Tue, 16 Jul 2024 18:41:17 +0200
Subject: [PATCH 50/77] Fixed dialog on mobile

---
 packages/frontend-2/components/settings/Dialog.vue      | 4 ++--
 packages/ui-components/src/components/layout/Dialog.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 4e009d86d5..4032c23d4d 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -16,7 +16,7 @@
         <LayoutSidebarMenu>
           <LayoutSidebarMenuGroup title="Account settings">
             <template #title-icon>
-              <UserIcon />
+              <UserIcon class="h-5 w-5" />
             </template>
             <LayoutSidebarMenuGroupItem
               v-for="(sidebarMenuItem, index) in sidebarConfig.user"
@@ -31,7 +31,7 @@
           </LayoutSidebarMenuGroup>
           <LayoutSidebarMenuGroup title="Server settings">
             <template #title-icon>
-              <ServerStackIcon />
+              <ServerStackIcon class="h-5 w-5" />
             </template>
             <LayoutSidebarMenuGroupItem
               v-for="(sidebarMenuItem, index) in sidebarConfig.server"
diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue
index b44f4dacd8..2d4bb0d638 100644
--- a/packages/ui-components/src/components/layout/Dialog.vue
+++ b/packages/ui-components/src/components/layout/Dialog.vue
@@ -30,7 +30,7 @@
           >
             <DialogPanel
               :class="[
-                'transform rounded-t-lg md:rounded-xl text-foreground overflow-hidden transition-all bg-foundation text-left shadow-xl  flex flex-col h-[98vh] md:h-auto',
+                'transform rounded-t-lg md:rounded-xl text-foreground overflow-hidden transition-all bg-foundation text-left shadow-xl  flex flex-col h-[98vh] h-[98dvh] md:h-auto',
                 fullscreen ? 'md:h-full' : 'md:max-h-[90vh]',
                 widthClasses
               ]"

From ff0ac5a0962fecc4ac7cfe4db450b0695cc062ea Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Tue, 16 Jul 2024 23:04:05 +0200
Subject: [PATCH 51/77] Fix linting

---
 packages/frontend-2/components/header/NavUserMenu.vue     | 8 ++++----
 packages/frontend-2/components/settings/Dialog.vue        | 4 ++--
 .../components/settings/server/user/DeleteDialog.vue      | 6 ++----
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index 39b0c0fc22..dcd0596de7 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -51,7 +51,7 @@
                 active ? 'bg-foundation-focus' : '',
                 'flex gap-3.5 items-center px-3 py-2.5 text-sm text-foreground cursor-pointer transition mx-1 rounded'
               ]"
-              @click="toggleSettingsDialog"
+              @click="toggleSettingsDialog(true)"
             >
               <ServerStackIcon class="w-5 h-5" />
               Server settings
@@ -174,12 +174,12 @@ const Icon = computed(() => (isDarkTheme.value ? SunIcon : MoonIcon))
 const version = computed(() => serverInfo.value?.version)
 const isAdmin = computed(() => activeUser.value?.role === Roles.Server.Admin)
 
-const toggleInviteDialog = (openServerPage: boolean) => {
+const toggleInviteDialog = () => {
   showInviteDialog.value = true
-  settingsDialogOpenServerPage.value = openServerPage
 }
 
-const toggleSettingsDialog = () => {
+const toggleSettingsDialog = (openServerPage: boolean) => {
   showSettingsDialog.value = true
+  settingsDialogOpenServerPage.value = openServerPage
 }
 </script>
diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 4032c23d4d..4067b97573 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -157,8 +157,8 @@ watch(
     if (newVal && !oldVal) {
       if (!isMobile.value) {
         selectedMenuItem.value = props.openServerPage
-          ? sidebarConfig.user.profile
-          : sidebarConfig.server.general
+          ? sidebarConfig.server.general
+          : sidebarConfig.user.profile
       }
     } else if (!newVal && oldVal) {
       selectedMenuItem.value = null
diff --git a/packages/frontend-2/components/settings/server/user/DeleteDialog.vue b/packages/frontend-2/components/settings/server/user/DeleteDialog.vue
index 516284b296..24bf712512 100644
--- a/packages/frontend-2/components/settings/server/user/DeleteDialog.vue
+++ b/packages/frontend-2/components/settings/server/user/DeleteDialog.vue
@@ -46,10 +46,8 @@ const props = defineProps<{
 const { triggerNotification } = useGlobalToast()
 const { mutate: adminDeleteUser } = useMutation(adminDeleteUserMutation)
 
-const isOpen = computed({
-  get: () => props.open,
-  set: (newVal: boolean) => emit('update:open', newVal)
-})
+const isOpen = defineModel<boolean>('open', { required: true })
+
 const deleteConfirmed = async () => {
   const userEmail = props.user?.email
   if (!userEmail) {

From 6753c23bbbb10de8f5df28645ffbd1b956e8f5cb Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Tue, 16 Jul 2024 23:06:23 +0200
Subject: [PATCH 52/77] Fix linting

---
 packages/frontend-2/components/header/NavUserMenu.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index dcd0596de7..c535deadbf 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -66,7 +66,7 @@
               @click="toggleTheme"
             >
               <Icon class="w-5 h-5" />
-              {{ isDarkTheme ? 'Light Mode' : 'Dark Mode' }}
+              {{ isDarkTheme ? 'Light mode' : 'Dark mode' }}
             </NuxtLink>
           </MenuItem>
           <MenuItem v-if="activeUser && !isGuest" v-slot="{ active }">
@@ -75,7 +75,7 @@
                 active ? 'bg-foundation-focus' : '',
                 'flex gap-3.5 items-center px-3 py-2.5 text-sm text-foreground cursor-pointer transition mx-1 rounded'
               ]"
-              @click="toggleInviteDialog(true)"
+              @click="toggleInviteDialog"
             >
               <EnvelopeIcon class="w-5 h-5" />
               Invite to Speckle

From fe431eb8d12f919eea72a3fb8bca14aa0d4e9504 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 18 Jul 2024 09:26:50 +0200
Subject: [PATCH 53/77] Added support for direct URLs

---
 .../components/header/NavUserMenu.vue         | 21 ++--
 .../frontend-2/components/settings/Dialog.vue | 98 +++++++++++++------
 .../frontend-2/lib/common/helpers/route.ts    | 16 +--
 packages/frontend-2/nuxt.config.ts            | 59 +++--------
 4 files changed, 100 insertions(+), 94 deletions(-)

diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index c535deadbf..c0f819ad28 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -39,7 +39,7 @@
                 active ? 'bg-foundation-focus' : '',
                 'flex gap-3.5 items-center px-3 py-2.5 text-sm text-foreground cursor-pointer transition mx-1 rounded'
               ]"
-              @click="toggleSettingsDialog(false)"
+              @click="toggleSettingsDialog(settingsQueries.user.profile)"
             >
               <UserCircleIcon class="w-5 h-5" />
               Settings
@@ -51,7 +51,7 @@
                 active ? 'bg-foundation-focus' : '',
                 'flex gap-3.5 items-center px-3 py-2.5 text-sm text-foreground cursor-pointer transition mx-1 rounded'
               ]"
-              @click="toggleSettingsDialog(true)"
+              @click="toggleSettingsDialog(settingsQueries.server.general)"
             >
               <ServerStackIcon class="w-5 h-5" />
               Server settings
@@ -130,7 +130,7 @@
     <SettingsServerUserInviteDialog v-model:open="showInviteDialog" />
     <SettingsDialog
       v-model:open="showSettingsDialog"
-      :open-server-page="settingsDialogOpenServerPage"
+      :target-menu-item="settingsDialogTarget"
     />
   </div>
 </template>
@@ -153,33 +153,40 @@ import { useActiveUser } from '~~/lib/auth/composables/activeUser'
 import { useAuthManager } from '~~/lib/auth/composables/auth'
 import { useTheme } from '~~/lib/core/composables/theme'
 import { useServerInfo } from '~/lib/core/composables/server'
-import { connectorsPageUrl } from '~/lib/common/helpers/route'
+import { connectorsPageUrl, settingsQueries } from '~/lib/common/helpers/route'
 import type { RouteLocationRaw } from 'vue-router'
 
 defineProps<{
   loginUrl?: RouteLocationRaw
 }>()
 
+const route = useRoute()
 const { logout } = useAuthManager()
 const { activeUser, isGuest } = useActiveUser()
 const { isDarkTheme, toggleTheme } = useTheme()
 const { serverInfo } = useServerInfo()
 
 const showInviteDialog = ref(false)
-const settingsDialogOpenServerPage = ref(false)
 const showSettingsDialog = ref(false)
+const settingsDialogTarget = ref(undefined)
 const menuButtonId = useId()
 
 const Icon = computed(() => (isDarkTheme.value ? SunIcon : MoonIcon))
 const version = computed(() => serverInfo.value?.version)
 const isAdmin = computed(() => activeUser.value?.role === Roles.Server.Admin)
 
+onMounted(() => {
+  if (route.query?.settings) {
+    toggleSettingsDialog(route.query.settings)
+  }
+})
+
 const toggleInviteDialog = () => {
   showInviteDialog.value = true
 }
 
-const toggleSettingsDialog = (openServerPage: boolean) => {
+const toggleSettingsDialog = (target: string) => {
   showSettingsDialog.value = true
-  settingsDialogOpenServerPage.value = openServerPage
+  settingsDialogTarget.value = target
 }
 </script>
diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 4067b97573..0c3e8f1a4d 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -19,12 +19,12 @@
               <UserIcon class="h-5 w-5" />
             </template>
             <LayoutSidebarMenuGroupItem
-              v-for="(sidebarMenuItem, index) in sidebarConfig.user"
+              v-for="(sidebarMenuItem, index) in menuItemConfig.user"
               :key="`sidebarUserItem-${index}`"
               :label="sidebarMenuItem.title"
               :class="{
                 'bg-foundation-focus hover:!bg-foundation-focus':
-                  selectedMenuItem?.path === sidebarMenuItem.path
+                  selectedMenuItem?.title === sidebarMenuItem.title
               }"
               @click="selectedMenuItem = sidebarMenuItem"
             />
@@ -34,12 +34,12 @@
               <ServerStackIcon class="h-5 w-5" />
             </template>
             <LayoutSidebarMenuGroupItem
-              v-for="(sidebarMenuItem, index) in sidebarConfig.server"
+              v-for="(sidebarMenuItem, index) in menuItemConfig.server"
               :key="`sidebarServerItem-${index}`"
               :label="sidebarMenuItem.title"
               :class="{
                 'bg-foundation-focus hover:!bg-foundation-focus':
-                  selectedMenuItem?.path === sidebarMenuItem.path
+                  selectedMenuItem?.title === sidebarMenuItem.title
               }"
               @click="selectedMenuItem = sidebarMenuItem"
             />
@@ -73,7 +73,7 @@ import SettingsServerPendingInvitations from './server/PendingInvitations.vue'
 import { useBreakpoints } from '@vueuse/core'
 import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
 import { UserIcon, ServerStackIcon } from '@heroicons/vue/24/outline'
-import { settingsRoutes } from '~/lib/common/helpers/route'
+import { settingsQueries } from '~/lib/common/helpers/route'
 import {
   LayoutSidebar,
   LayoutSidebarMenu,
@@ -92,56 +92,51 @@ const emit = defineEmits<{
 
 const props = defineProps<{
   open: boolean
-  openServerPage: boolean
+  targetMenuItem?: string
 }>()
 
+const route = useRoute()
+const router = useRouter()
 const breakpoints = useBreakpoints(TailwindBreakpoints)
 const isMobile = breakpoints.smallerOrEqual('md')
 
 const selectedMenuItem = shallowRef<MenuItem | null>(null)
 
-const sidebarConfig: {
+const menuItemConfig: {
   [key: string]: {
     [key: string]: MenuItem
   }
 } = {
   user: {
-    profile: {
+    [settingsQueries.user.profile]: {
       title: 'Profile',
-      component: SettingsUserProfile,
-      path: settingsRoutes.user.profile
+      component: SettingsUserProfile
     },
-    notifications: {
+    [settingsQueries.user.notifications]: {
       title: 'Notifications',
-      component: SettingsUserNotifications,
-      path: settingsRoutes.user.notifications
+      component: SettingsUserNotifications
     },
-    developerSettings: {
+    [settingsQueries.user.developerSettings]: {
       title: 'Developer settings',
-      component: SettingsUserDeveloper,
-      path: settingsRoutes.user.developerSettings
+      component: SettingsUserDeveloper
     }
   },
   server: {
-    general: {
+    [settingsQueries.server.general]: {
       title: 'General',
-      component: SettingsServerGeneral,
-      path: settingsRoutes.server.general
+      component: SettingsServerGeneral
     },
-    projects: {
+    [settingsQueries.server.projects]: {
       title: 'Projects',
-      component: SettingsServerProjects,
-      path: settingsRoutes.server.projects
+      component: SettingsServerProjects
     },
-    activeUsers: {
+    [settingsQueries.server.activeUsers]: {
       title: 'Active users',
-      component: SettingsServerActiveUsers,
-      path: settingsRoutes.server.activeUsers
+      component: SettingsServerActiveUsers
     },
-    pendingInvitations: {
+    [settingsQueries.server.pendingInvitations]: {
       title: 'Pending invitations',
-      component: SettingsServerPendingInvitations,
-      path: settingsRoutes.server.pendingInvitations
+      component: SettingsServerPendingInvitations
     }
   }
 }
@@ -151,14 +146,47 @@ const isOpen = computed({
   set: (newVal: boolean) => emit('update:open', newVal)
 })
 
+// Check if there is a matching menu item in the config
+const getMenuItem = (key: string): MenuItem | null => {
+  const categories = [menuItemConfig.user, menuItemConfig.server]
+  for (const category of categories) {
+    if (key in category) {
+      return category[key]
+    }
+  }
+
+  return null
+}
+
 watch(
   isOpen,
   (newVal, oldVal) => {
     if (newVal && !oldVal) {
-      if (!isMobile.value) {
-        selectedMenuItem.value = props.openServerPage
-          ? sidebarConfig.server.general
-          : sidebarConfig.user.profile
+      const settingsQuery: string | null = route.query?.settings
+
+      // Check if there is a settings query
+      if (settingsQuery) {
+        const matchingMenuItem = getMenuItem(settingsQuery)
+        // Set matching menu items if it exists
+        if (matchingMenuItem) {
+          selectedMenuItem.value = matchingMenuItem
+        } else if (!isMobile.value) {
+          // On desktop: if no matching query check if we can match it to server
+          // Else open on the user profile page
+          // On mobile we not select any item and show the sidebar
+          selectedMenuItem.value = settingsQuery.includes('server')
+            ? menuItemConfig.server[settingsQueries.server.general]
+            : menuItemConfig.user[settingsQueries.user.profile]
+        }
+
+        deleteSettingsQuery()
+        return
+      }
+
+      // Check if there is target prop, only on desktop toggle that page
+      if (!isMobile.value && props.targetMenuItem) {
+        const matchingMenuItem = getMenuItem(props.targetMenuItem)
+        selectedMenuItem.value = matchingMenuItem
       }
     } else if (!newVal && oldVal) {
       selectedMenuItem.value = null
@@ -166,4 +194,10 @@ watch(
   },
   { immediate: true }
 )
+
+const deleteSettingsQuery = (): void => {
+  const currentQueryParams = { ...route.query }
+  delete currentQueryParams.settings
+  router.push({ query: currentQueryParams })
+}
 </script>
diff --git a/packages/frontend-2/lib/common/helpers/route.ts b/packages/frontend-2/lib/common/helpers/route.ts
index 2dbebb218f..7ae7230bcc 100644
--- a/packages/frontend-2/lib/common/helpers/route.ts
+++ b/packages/frontend-2/lib/common/helpers/route.ts
@@ -14,21 +14,21 @@ export const downloadManagerRoute = '/download-manager'
 export const serverManagementRoute = '/server-management'
 export const connectorsPageUrl = 'https://speckle.systems/features/connectors/'
 
-export const settingsRoutes: {
+export const settingsQueries: {
   [key: string]: {
     [key: string]: string
   }
 } = {
   user: {
-    profile: '/settings/user/profile',
-    notifications: '/settings/user/notifications',
-    developerSettings: '/settings/user/developer-settings'
+    profile: 'user/profile',
+    notifications: 'user/notifications',
+    developerSettings: 'user/developer-settings'
   },
   server: {
-    general: '/settings/server/general',
-    projects: '/settings/server/projects',
-    activeUsers: '/settings/server/active-users',
-    pendingInvitations: '/settings/server/pending-invitations'
+    general: 'server/general',
+    projects: 'server/projects',
+    activeUsers: 'server/active-users',
+    pendingInvitations: 'server/pending-invitations'
   }
 }
 
diff --git a/packages/frontend-2/nuxt.config.ts b/packages/frontend-2/nuxt.config.ts
index f2ee55e8bb..7db0dcf76b 100644
--- a/packages/frontend-2/nuxt.config.ts
+++ b/packages/frontend-2/nuxt.config.ts
@@ -190,54 +190,19 @@ export default defineNuxtConfig({
         to: '/settings/user/profile',
         statusCode: 301
       }
-    }
-  },
+    },
 
-  hooks: {
-    'pages:extend'(pages) {
-      // Adds settings routes so direct routes are available but will load the dashboard component
-      pages.push(
-        {
-          name: 'settings',
-          path: '/settings',
-          file: '~/pages/index.vue'
-        },
-        {
-          name: 'settings-user-profile',
-          path: '/settings/user/profile',
-          file: '~/pages/index.vue'
-        },
-        {
-          name: 'settings-user-notifications',
-          path: '/settings/user/notifications',
-          file: '~/pages/index.vue'
-        },
-        {
-          name: 'settings-user-developer-settings',
-          path: '/settings/user/developer-settings',
-          file: '~/pages/index.vue'
-        },
-        {
-          name: 'settings-server-general',
-          path: '/settings/server/general',
-          file: '~/pages/index.vue'
-        },
-        {
-          name: 'settings-server-active-users',
-          path: '/settings/server/active-users',
-          file: '~/pages/index.vue'
-        },
-        {
-          name: 'settings-server-pending-invitations',
-          path: '/settings/server/pending-invitations',
-          file: '~/pages/index.vue'
-        },
-        {
-          name: 'settings-server-projects',
-          path: '/settings/server/projects',
-          file: '~/pages/index.vue'
-        }
-      )
+    // Redirect settings 'route' to homepage with added query
+    '/settings/user/profile': { redirect: '/?settings=user/profile' },
+    '/settings/user/notifications': { redirect: '/?settings=user/notifications' },
+    '/settings/user/developer-settings': {
+      redirect: '/?settings=user/developer-settings'
+    },
+    '/settings/server/general': { redirect: '/?settings=server/general' },
+    '/settings/server/projects': { redirect: '/?settings=server/projects' },
+    '/settings/server/active-users': { redirect: '/?settings=server/active-users' },
+    '/settings/server/pending-invitations': {
+      redirect: '/?settings=server/pending-invitations'
     }
   },
 

From f25444743bbfa457d667bf387a480ca42a3ff6ed Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 18 Jul 2024 10:13:36 +0200
Subject: [PATCH 54/77] fix types

---
 .../frontend-2/components/header/NavUserMenu.vue    |  9 +++++----
 packages/frontend-2/components/settings/Dialog.vue  | 13 +++++++------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index c0f819ad28..9c37e33e24 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -154,7 +154,7 @@ import { useAuthManager } from '~~/lib/auth/composables/auth'
 import { useTheme } from '~~/lib/core/composables/theme'
 import { useServerInfo } from '~/lib/core/composables/server'
 import { connectorsPageUrl, settingsQueries } from '~/lib/common/helpers/route'
-import type { RouteLocationRaw } from 'vue-router'
+import type { RouteLocationRaw, LocationQueryValue } from 'vue-router'
 
 defineProps<{
   loginUrl?: RouteLocationRaw
@@ -168,7 +168,7 @@ const { serverInfo } = useServerInfo()
 
 const showInviteDialog = ref(false)
 const showSettingsDialog = ref(false)
-const settingsDialogTarget = ref(undefined)
+const settingsDialogTarget = ref<LocationQueryValue>(null)
 const menuButtonId = useId()
 
 const Icon = computed(() => (isDarkTheme.value ? SunIcon : MoonIcon))
@@ -176,8 +176,9 @@ const version = computed(() => serverInfo.value?.version)
 const isAdmin = computed(() => activeUser.value?.role === Roles.Server.Admin)
 
 onMounted(() => {
-  if (route.query?.settings) {
-    toggleSettingsDialog(route.query.settings)
+  const settingsQuery = route.query?.settings
+  if (settingsQuery && typeof settingsQuery === 'string') {
+    toggleSettingsDialog(settingsQuery)
   }
 })
 
diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 0c3e8f1a4d..294a982d20 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -63,6 +63,7 @@
 
 <script setup lang="ts">
 import type { defineComponent } from 'vue'
+import type { LocationQueryValue } from 'vue-router'
 import SettingsUserProfile from './user/Profile.vue'
 import SettingsUserNotifications from './user/Notifications.vue'
 import SettingsUserDeveloper from './user/Developer.vue'
@@ -83,7 +84,6 @@ import {
 type MenuItem = {
   title: string
   component: ReturnType<typeof defineComponent>
-  path: string
 }
 
 const emit = defineEmits<{
@@ -92,7 +92,7 @@ const emit = defineEmits<{
 
 const props = defineProps<{
   open: boolean
-  targetMenuItem?: string
+  targetMenuItem?: LocationQueryValue
 }>()
 
 const route = useRoute()
@@ -147,10 +147,10 @@ const isOpen = computed({
 })
 
 // Check if there is a matching menu item in the config
-const getMenuItem = (key: string): MenuItem | null => {
+const getMenuItem = (key: LocationQueryValue): MenuItem | null => {
   const categories = [menuItemConfig.user, menuItemConfig.server]
   for (const category of categories) {
-    if (key in category) {
+    if (key && key in category) {
       return category[key]
     }
   }
@@ -162,10 +162,11 @@ watch(
   isOpen,
   (newVal, oldVal) => {
     if (newVal && !oldVal) {
-      const settingsQuery: string | null = route.query?.settings
+      const settingsQuery: LocationQueryValue | LocationQueryValue[] =
+        route.query?.settings
 
       // Check if there is a settings query
-      if (settingsQuery) {
+      if (settingsQuery && typeof settingsQuery === 'string') {
         const matchingMenuItem = getMenuItem(settingsQuery)
         // Set matching menu items if it exists
         if (matchingMenuItem) {

From 6cfef3c3c2285f86adafe790ee522852c7936e03 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 18 Jul 2024 11:16:50 +0200
Subject: [PATCH 55/77] Added fix for mobile safari

---
 packages/frontend-2/components/settings/SectionHeader.vue | 6 +++++-
 packages/ui-components/src/components/layout/Dialog.vue   | 7 ++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/frontend-2/components/settings/SectionHeader.vue b/packages/frontend-2/components/settings/SectionHeader.vue
index 99bb23ab06..0b63aad61e 100644
--- a/packages/frontend-2/components/settings/SectionHeader.vue
+++ b/packages/frontend-2/components/settings/SectionHeader.vue
@@ -17,7 +17,11 @@
         </FormButton>
       </div>
     </div>
-    <p v-if="text" class="text-sm pt-6 md:pt-4 text-secondary-2">
+    <p
+      v-if="text"
+      class="text-sm pt-2 md:pt-4 text-secondary-2"
+      :class="{ 'pt-6': subheading }"
+    >
       {{ text }}
     </p>
     <hr v-if="!subheading" class="my-6 md:my-10" />
diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue
index 2d4bb0d638..9d1b4e2212 100644
--- a/packages/ui-components/src/components/layout/Dialog.vue
+++ b/packages/ui-components/src/components/layout/Dialog.vue
@@ -30,7 +30,7 @@
           >
             <DialogPanel
               :class="[
-                'transform rounded-t-lg md:rounded-xl text-foreground overflow-hidden transition-all bg-foundation text-left shadow-xl  flex flex-col h-[98vh] h-[98dvh] md:h-auto',
+                'dialog-panel transform rounded-t-lg md:rounded-xl text-foreground overflow-hidden transition-all bg-foundation text-left shadow-xl  flex flex-col md:h-auto',
                 fullscreen ? 'md:h-full' : 'md:max-h-[90vh]',
                 widthClasses
               ]"
@@ -263,4 +263,9 @@ html.dialog-open {
 html.dialog-open body {
   overflow: hidden !important;
 }
+/* Workaround because in Tailwind vh gets added after dvh */
+.dialog-panel {
+  height: 98vh;
+  height: 98dvh;
+}
 </style>

From 5776fcd8069365528ccd4cdcac08a79fb7bc38d8 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 18 Jul 2024 11:21:11 +0200
Subject: [PATCH 56/77] Added fix for mobile safari

---
 packages/frontend-2/components/settings/SectionHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-2/components/settings/SectionHeader.vue b/packages/frontend-2/components/settings/SectionHeader.vue
index 0b63aad61e..0b00889311 100644
--- a/packages/frontend-2/components/settings/SectionHeader.vue
+++ b/packages/frontend-2/components/settings/SectionHeader.vue
@@ -5,7 +5,7 @@
       <h1 v-else class="text-2xl font-semibold font-semibold hidden md:block">
         {{ title }}
       </h1>
-      <div v-if="!!buttons" class="flex flex-wrap gap-2">
+      <div v-if="buttons > 0" class="flex flex-wrap gap-2">
         <FormButton
           v-for="(button, index) in buttons"
           :key="index"

From ec06dff26eb1cbb113c5060f675066db38fb32d0 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 18 Jul 2024 11:42:28 +0200
Subject: [PATCH 57/77] Fixed typo

---
 packages/frontend-2/components/settings/SectionHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-2/components/settings/SectionHeader.vue b/packages/frontend-2/components/settings/SectionHeader.vue
index 0b00889311..7e0b963b8e 100644
--- a/packages/frontend-2/components/settings/SectionHeader.vue
+++ b/packages/frontend-2/components/settings/SectionHeader.vue
@@ -5,7 +5,7 @@
       <h1 v-else class="text-2xl font-semibold font-semibold hidden md:block">
         {{ title }}
       </h1>
-      <div v-if="buttons > 0" class="flex flex-wrap gap-2">
+      <div v-if="buttons.length > 0" class="flex flex-wrap gap-2">
         <FormButton
           v-for="(button, index) in buttons"
           :key="index"

From b51bc96be7233e48c0869d0b082af460f02097f6 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 18 Jul 2024 13:09:07 +0200
Subject: [PATCH 58/77] Fix height bug in sfari

---
 .../frontend-2/components/settings/user/profile/Details.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-2/components/settings/user/profile/Details.vue b/packages/frontend-2/components/settings/user/profile/Details.vue
index 900e3c2368..77dc05a549 100644
--- a/packages/frontend-2/components/settings/user/profile/Details.vue
+++ b/packages/frontend-2/components/settings/user/profile/Details.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-col gap-y-4">
     <SettingsSectionHeader title="Your details" subheading />
     <div class="grid md:grid-cols-2 pt-4">
-      <div class="flex h-full items-center justify-center">
+      <div class="flex items-center justify-center">
         <SettingsUserProfileEditAvatar :user="user" size="xxl" />
       </div>
       <div class="pt-6 md:pt-0">

From e285816556b0d38de959b9589f1ebc70571fe177 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 18 Jul 2024 15:50:46 +0200
Subject: [PATCH 59/77] Fixed breakpoint isses, added link to /settings

---
 packages/frontend-2/components/settings/Dialog.vue | 14 ++++++++------
 packages/frontend-2/nuxt.config.ts                 |  1 +
 .../ui-components/src/components/layout/Dialog.vue |  9 +++------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 294a982d20..486e48a641 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -2,15 +2,17 @@
   <LayoutDialog
     v-model:open="isOpen"
     v-bind="
-      isMobile ? { title: selectedMenuItem ? selectedMenuItem.title : 'Settings' } : {}
+      !isNotMobile
+        ? { title: selectedMenuItem ? selectedMenuItem.title : 'Settings' }
+        : {}
     "
     fullscreen
-    :show-back-button="isMobile && !!selectedMenuItem"
+    :show-back-button="!isNotMobile && !!selectedMenuItem"
     @back="selectedMenuItem = null"
   >
     <div class="w-full h-full flex">
       <LayoutSidebar
-        v-if="!isMobile || !selectedMenuItem"
+        v-if="isNotMobile || !selectedMenuItem"
         class="w-full md:w-56 lg:w-60 md:p-4 md:pt-6 md:bg-foundation-page md:border-r md:border-outline-3"
       >
         <LayoutSidebarMenu>
@@ -98,7 +100,7 @@ const props = defineProps<{
 const route = useRoute()
 const router = useRouter()
 const breakpoints = useBreakpoints(TailwindBreakpoints)
-const isMobile = breakpoints.smallerOrEqual('md')
+const isNotMobile = breakpoints.greater('md')
 
 const selectedMenuItem = shallowRef<MenuItem | null>(null)
 
@@ -171,7 +173,7 @@ watch(
         // Set matching menu items if it exists
         if (matchingMenuItem) {
           selectedMenuItem.value = matchingMenuItem
-        } else if (!isMobile.value) {
+        } else if (isNotMobile.value) {
           // On desktop: if no matching query check if we can match it to server
           // Else open on the user profile page
           // On mobile we not select any item and show the sidebar
@@ -185,7 +187,7 @@ watch(
       }
 
       // Check if there is target prop, only on desktop toggle that page
-      if (!isMobile.value && props.targetMenuItem) {
+      if (isNotMobile.value && props.targetMenuItem) {
         const matchingMenuItem = getMenuItem(props.targetMenuItem)
         selectedMenuItem.value = matchingMenuItem
       }
diff --git a/packages/frontend-2/nuxt.config.ts b/packages/frontend-2/nuxt.config.ts
index 7db0dcf76b..ff5baa0fa9 100644
--- a/packages/frontend-2/nuxt.config.ts
+++ b/packages/frontend-2/nuxt.config.ts
@@ -193,6 +193,7 @@ export default defineNuxtConfig({
     },
 
     // Redirect settings 'route' to homepage with added query
+    '/settings': { redirect: '/?settings=user/profile' },
     '/settings/user/profile': { redirect: '/?settings=user/profile' },
     '/settings/user/notifications': { redirect: '/?settings=user/notifications' },
     '/settings/user/developer-settings': {
diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue
index 9d1b4e2212..e72b954075 100644
--- a/packages/ui-components/src/components/layout/Dialog.vue
+++ b/packages/ui-components/src/components/layout/Dialog.vue
@@ -20,10 +20,10 @@
         >
           <TransitionChild
             as="template"
-            enter="ease-out duration-300"
+            enter="ease-out duration-5000"
             enter-from="md:opacity-0 translate-y-[100%] md:translate-y-4"
             enter-to="md:opacity-100 translate-y-0"
-            leave="ease-in duration-400"
+            leave="ease-in duration-5000"
             leave-from="md:opacity-100 translate-y-0"
             leave-to="md:opacity-0 translate-y-[100%] md:translate-y-4"
             @after-leave="$emit('fully-closed')"
@@ -198,11 +198,8 @@ const widthClasses = computed(() => {
   const classParts: string[] = ['w-full', 'sm:w-full']
 
   if (!props.fullscreen) {
-    classParts.push('sm:max-w-2xl')
+    classParts.push('md:max-w-2xl')
 
-    if (maxWidthWeight.value >= 1) {
-      classParts.push('md:max-w-2xl')
-    }
     if (maxWidthWeight.value >= 2) {
       classParts.push('lg:max-w-4xl')
     }

From 6283944cc65c575a6543e405eb7adab57c9e6009 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 18 Jul 2024 15:52:49 +0200
Subject: [PATCH 60/77] Fix typo

---
 packages/frontend-2/components/settings/Dialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 486e48a641..4d656d9b18 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -52,7 +52,7 @@
         v-if="selectedMenuItem"
         :class="[
           'bg-foundation md:p-6 md:px-10 md:py-12 w-full md:bg-foundation',
-          !isMobile && 'simple-scrollbar overflow-y-auto flex-1'
+          isNotMobile && 'simple-scrollbar overflow-y-auto flex-1'
         ]"
       >
         <div class="pb-6">

From 8fc78ece19210fe1733b42cef07724c530f7323a Mon Sep 17 00:00:00 2001
From: Benjamin Ottensten <benjamin.ottensten@gmail.com>
Date: Thu, 18 Jul 2024 16:02:27 +0200
Subject: [PATCH 61/77] Adjust weights and profile settings page header

---
 packages/frontend-2/components/settings/SectionHeader.vue | 2 +-
 packages/frontend-2/components/settings/user/Profile.vue  | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/frontend-2/components/settings/SectionHeader.vue b/packages/frontend-2/components/settings/SectionHeader.vue
index 7e0b963b8e..587e4d0583 100644
--- a/packages/frontend-2/components/settings/SectionHeader.vue
+++ b/packages/frontend-2/components/settings/SectionHeader.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-col">
     <div class="flex flex-col md:flex-row gap-3 md:gap-0 justify-between">
       <h2 v-if="subheading" class="text-xl">{{ title }}</h2>
-      <h1 v-else class="text-2xl font-semibold font-semibold hidden md:block">
+      <h1 v-else class="text-2xl font-semibold hidden md:block">
         {{ title }}
       </h1>
       <div v-if="buttons.length > 0" class="flex flex-wrap gap-2">
diff --git a/packages/frontend-2/components/settings/user/Profile.vue b/packages/frontend-2/components/settings/user/Profile.vue
index 80e9401f1d..79976dac6d 100644
--- a/packages/frontend-2/components/settings/user/Profile.vue
+++ b/packages/frontend-2/components/settings/user/Profile.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="md:max-w-xl md:mx-auto">
-    <SettingsSectionHeader
-      title="User profile"
-      text="Manage your profile information"
-    />
+    <SettingsSectionHeader title="Profile" text="Manage your profile information" />
     <template v-if="user">
       <SettingsUserProfileDetails :user="user" />
       <hr class="my-6 md:my-10" />

From 7b90396ec9a5160a93e5765d131077d4de138978 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 18 Jul 2024 16:27:46 +0200
Subject: [PATCH 62/77] Change var name

---
 .../frontend-2/components/settings/Dialog.vue    | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 4d656d9b18..294a982d20 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -2,17 +2,15 @@
   <LayoutDialog
     v-model:open="isOpen"
     v-bind="
-      !isNotMobile
-        ? { title: selectedMenuItem ? selectedMenuItem.title : 'Settings' }
-        : {}
+      isMobile ? { title: selectedMenuItem ? selectedMenuItem.title : 'Settings' } : {}
     "
     fullscreen
-    :show-back-button="!isNotMobile && !!selectedMenuItem"
+    :show-back-button="isMobile && !!selectedMenuItem"
     @back="selectedMenuItem = null"
   >
     <div class="w-full h-full flex">
       <LayoutSidebar
-        v-if="isNotMobile || !selectedMenuItem"
+        v-if="!isMobile || !selectedMenuItem"
         class="w-full md:w-56 lg:w-60 md:p-4 md:pt-6 md:bg-foundation-page md:border-r md:border-outline-3"
       >
         <LayoutSidebarMenu>
@@ -52,7 +50,7 @@
         v-if="selectedMenuItem"
         :class="[
           'bg-foundation md:p-6 md:px-10 md:py-12 w-full md:bg-foundation',
-          isNotMobile && 'simple-scrollbar overflow-y-auto flex-1'
+          !isMobile && 'simple-scrollbar overflow-y-auto flex-1'
         ]"
       >
         <div class="pb-6">
@@ -100,7 +98,7 @@ const props = defineProps<{
 const route = useRoute()
 const router = useRouter()
 const breakpoints = useBreakpoints(TailwindBreakpoints)
-const isNotMobile = breakpoints.greater('md')
+const isMobile = breakpoints.smallerOrEqual('md')
 
 const selectedMenuItem = shallowRef<MenuItem | null>(null)
 
@@ -173,7 +171,7 @@ watch(
         // Set matching menu items if it exists
         if (matchingMenuItem) {
           selectedMenuItem.value = matchingMenuItem
-        } else if (isNotMobile.value) {
+        } else if (!isMobile.value) {
           // On desktop: if no matching query check if we can match it to server
           // Else open on the user profile page
           // On mobile we not select any item and show the sidebar
@@ -187,7 +185,7 @@ watch(
       }
 
       // Check if there is target prop, only on desktop toggle that page
-      if (isNotMobile.value && props.targetMenuItem) {
+      if (!isMobile.value && props.targetMenuItem) {
         const matchingMenuItem = getMenuItem(props.targetMenuItem)
         selectedMenuItem.value = matchingMenuItem
       }

From 73c01d37580b679cea8e35dd56d189216863873a Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Thu, 18 Jul 2024 17:05:02 +0200
Subject: [PATCH 63/77] Updated old redirects

---
 packages/frontend-2/nuxt.config.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/frontend-2/nuxt.config.ts b/packages/frontend-2/nuxt.config.ts
index ff5baa0fa9..190105a914 100644
--- a/packages/frontend-2/nuxt.config.ts
+++ b/packages/frontend-2/nuxt.config.ts
@@ -163,31 +163,31 @@ export default defineNuxtConfig({
     // Redirect old settings pages
     '/server-management/projects': {
       redirect: {
-        to: '/settings/server/projects',
+        to: '/?settings=server/projects',
         statusCode: 301
       }
     },
     '/server-management/active-users': {
       redirect: {
-        to: '/settings/server/active-users',
+        to: '/?settings=server/active-users',
         statusCode: 301
       }
     },
     '/server-management/pending-invitations': {
       redirect: {
-        to: '/settings/server/pending-invitations',
+        to: '/?settings=server/pending-invitations',
         statusCode: 301
       }
     },
     '/server-management': {
       redirect: {
-        to: '/settings/server/general',
+        to: '/?settings=server/general',
         statusCode: 301
       }
     },
     '/profile': {
       redirect: {
-        to: '/settings/user/profile',
+        to: '/?settings=user/profile',
         statusCode: 301
       }
     },

From 649a4695fac715acd24d9bba989aa090ab26fd7a Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Fri, 19 Jul 2024 10:26:38 +0200
Subject: [PATCH 64/77] Moved onMounted, change typeof string to lodash

---
 .../components/header/NavUserMenu.vue         | 19 ++++++++++---------
 .../user/profile/DeleteAccountDialog.vue      |  1 -
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index 28e231ed72..54d12996b1 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -135,6 +135,7 @@
   </div>
 </template>
 <script setup lang="ts">
+import { isString } from 'lodash'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import {
   XMarkIcon,
@@ -154,7 +155,7 @@ import { useAuthManager } from '~~/lib/auth/composables/auth'
 import { useTheme } from '~~/lib/core/composables/theme'
 import { useServerInfo } from '~/lib/core/composables/server'
 import { connectorsPageUrl, settingsQueries } from '~/lib/common/helpers/route'
-import type { RouteLocationRaw, LocationQueryValue } from 'vue-router'
+import type { RouteLocationRaw } from 'vue-router'
 
 defineProps<{
   loginUrl?: RouteLocationRaw
@@ -168,20 +169,13 @@ const { serverInfo } = useServerInfo()
 
 const showInviteDialog = ref(false)
 const showSettingsDialog = ref(false)
-const settingsDialogTarget = ref<LocationQueryValue>(null)
+const settingsDialogTarget = ref<string>(null)
 const menuButtonId = useId()
 
 const Icon = computed(() => (isDarkTheme.value ? SunIcon : MoonIcon))
 const version = computed(() => serverInfo.value?.version)
 const isAdmin = computed(() => activeUser.value?.role === Roles.Server.Admin)
 
-onMounted(() => {
-  const settingsQuery = route.query?.settings
-  if (settingsQuery && typeof settingsQuery === 'string') {
-    toggleSettingsDialog(settingsQuery)
-  }
-})
-
 const toggleInviteDialog = () => {
   showInviteDialog.value = true
 }
@@ -190,4 +184,11 @@ const toggleSettingsDialog = (target: string) => {
   showSettingsDialog.value = true
   settingsDialogTarget.value = target
 }
+
+onMounted(() => {
+  const settingsQuery = route.query?.settings
+  if (settingsQuery && isString(settingsQuery)) {
+    toggleSettingsDialog(settingsQuery)
+  }
+})
 </script>
diff --git a/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue b/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue
index 9949bdec9d..f9d9bb30bb 100644
--- a/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue
+++ b/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue
@@ -64,7 +64,6 @@ const stringMatchesEmail: GenericValidateFunction<string> = (val: string) => {
 
 const emit = defineEmits<{
   (e: 'deleted'): void
-  (e: 'update:open', val: boolean): void
 }>()
 
 const props = defineProps<{

From ec1e734bc12f74fe2f03f6e3093bc3a5a0ffbf1d Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Fri, 19 Jul 2024 11:41:58 +0200
Subject: [PATCH 65/77] Small refactor for checking query, change to
 defineModel

---
 .../dui3/lib/common/generated/gql/graphql.ts  | 352 +++++++++++++++---
 .../components/header/NavUserMenu.vue         |  21 +-
 .../frontend-2/components/settings/Dialog.vue | 103 ++---
 .../components/settings/server/Projects.vue   |   4 +-
 .../src/components/layout/Dialog.vue          |   2 +-
 5 files changed, 350 insertions(+), 132 deletions(-)

diff --git a/packages/dui3/lib/common/generated/gql/graphql.ts b/packages/dui3/lib/common/generated/gql/graphql.ts
index 5d9b3f7be8..f3dce427d4 100644
--- a/packages/dui3/lib/common/generated/gql/graphql.ts
+++ b/packages/dui3/lib/common/generated/gql/graphql.ts
@@ -18,7 +18,6 @@ export type Scalars = {
   BigInt: { input: any; output: any; }
   /** A date-time string at UTC, such as 2007-12-03T10:15:30Z, compliant with the `date-time` format outlined in section 5.6 of the RFC 3339 profile of the ISO 8601 standard for representation of dates and times using the Gregorian calendar. */
   DateTime: { input: string; output: string; }
-  EmailAddress: { input: any; output: any; }
   /** The `JSONObject` scalar type represents JSON objects as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf). */
   JSONObject: { input: {}; output: {}; }
 };
@@ -439,7 +438,10 @@ export type BlobMetadataCollection = {
 
 export type Branch = {
   __typename?: 'Branch';
-  /** All the recent activity on this branch in chronological order */
+  /**
+   * All the recent activity on this branch in chronological order
+   * @deprecated Part of the old API surface and will be removed in the future.
+   */
   activity?: Maybe<ActivityCollection>;
   author?: Maybe<User>;
   commits?: Maybe<CommitCollection>;
@@ -654,7 +656,10 @@ export type CommentThreadActivityMessage = {
 
 export type Commit = {
   __typename?: 'Commit';
-  /** All the recent activity on this commit in chronological order */
+  /**
+   * All the recent activity on this commit in chronological order
+   * @deprecated Part of the old API surface and will be removed in the future.
+   */
   activity?: Maybe<ActivityCollection>;
   authorAvatar?: Maybe<Scalars['String']['output']>;
   authorId?: Maybe<Scalars['String']['output']>;
@@ -670,6 +675,7 @@ export type Commit = {
    *     ...
    *   }
    * ```
+   * @deprecated Part of the old API surface and will be removed in the future.
    */
   commentCount: Scalars['Int']['output'];
   createdAt?: Maybe<Scalars['DateTime']['output']>;
@@ -791,6 +797,16 @@ export type CreateModelInput = {
   projectId: Scalars['ID']['input'];
 };
 
+export type CreateVersionInput = {
+  message?: InputMaybe<Scalars['String']['input']>;
+  modelId: Scalars['String']['input'];
+  objectId: Scalars['String']['input'];
+  parents?: InputMaybe<Array<Scalars['String']['input']>>;
+  projectId: Scalars['String']['input'];
+  sourceApplication?: InputMaybe<Scalars['String']['input']>;
+  totalChildrenCount?: InputMaybe<Scalars['Int']['input']>;
+};
+
 export type DeleteModelInput = {
   id: Scalars['ID']['input'];
   projectId: Scalars['ID']['input'];
@@ -902,21 +918,36 @@ export type LegacyCommentViewerData = {
  */
 export type LimitedUser = {
   __typename?: 'LimitedUser';
-  /** All the recent activity from this user in chronological order */
+  /**
+   * All the recent activity from this user in chronological order
+   * @deprecated Part of the old API surface and will be removed in the future.
+   */
   activity?: Maybe<ActivityCollection>;
   avatar?: Maybe<Scalars['String']['output']>;
   bio?: Maybe<Scalars['String']['output']>;
-  /** Get public stream commits authored by the user */
+  /**
+   * Get public stream commits authored by the user
+   * @deprecated Part of the old API surface and will be removed in the future.
+   */
   commits?: Maybe<CommitCollection>;
   company?: Maybe<Scalars['String']['output']>;
   id: Scalars['ID']['output'];
   name: Scalars['String']['output'];
   role?: Maybe<Scalars['String']['output']>;
-  /** Returns all discoverable streams that the user is a collaborator on */
+  /**
+   * Returns all discoverable streams that the user is a collaborator on
+   * @deprecated Part of the old API surface and will be removed in the future.
+   */
   streams: StreamCollection;
-  /** The user's timeline in chronological order */
+  /**
+   * The user's timeline in chronological order
+   * @deprecated Part of the old API surface and will be removed in the future.
+   */
   timeline?: Maybe<ActivityCollection>;
-  /** Total amount of favorites attached to streams owned by the user */
+  /**
+   * Total amount of favorites attached to streams owned by the user
+   * @deprecated Part of the old API surface and will be removed in the future.
+   */
   totalOwnedStreamsFavorites: Scalars['Int']['output'];
   verified?: Maybe<Scalars['Boolean']['output']>;
 };
@@ -966,6 +997,13 @@ export type LimitedUserTimelineArgs = {
   limit?: Scalars['Int']['input'];
 };
 
+export type MarkReceivedVersionInput = {
+  message?: InputMaybe<Scalars['String']['input']>;
+  projectId: Scalars['String']['input'];
+  sourceApplication: Scalars['String']['input'];
+  versionId: Scalars['String']['input'];
+};
+
 export type Model = {
   __typename?: 'Model';
   author: LimitedUser;
@@ -1101,8 +1139,11 @@ export type Mutation = {
   appUpdate: Scalars['Boolean']['output'];
   automateFunctionRunStatusReport: Scalars['Boolean']['output'];
   automateMutations: AutomateMutations;
+  /** @deprecated Part of the old API surface and will be removed in the future. Use ModelMutations.create instead. */
   branchCreate: Scalars['String']['output'];
+  /** @deprecated Part of the old API surface and will be removed in the future. Use ModelMutations.delete instead. */
   branchDelete: Scalars['Boolean']['output'];
+  /** @deprecated Part of the old API surface and will be removed in the future. Use ModelMutations.update instead. */
   branchUpdate: Scalars['Boolean']['output'];
   /** Broadcast user activity in the viewer */
   broadcastViewerUserActivity: Scalars['Boolean']['output'];
@@ -1132,13 +1173,23 @@ export type Mutation = {
    * @deprecated Use commentMutations version
    */
   commentView: Scalars['Boolean']['output'];
+  /** @deprecated Part of the old API surface and will be removed in the future. Use VersionMutations.create instead. */
   commitCreate: Scalars['String']['output'];
+  /** @deprecated Part of the old API surface and will be removed in the future. Use VersionMutations.delete instead. */
   commitDelete: Scalars['Boolean']['output'];
+  /** @deprecated Part of the old API surface and will be removed in the future. Use VersionMutations.markReceived instead. */
   commitReceive: Scalars['Boolean']['output'];
+  /** @deprecated Part of the old API surface and will be removed in the future. Use VersionMutations.update/moveToModel instead. */
   commitUpdate: Scalars['Boolean']['output'];
-  /** Delete a batch of commits */
+  /**
+   * Delete a batch of commits
+   * @deprecated Part of the old API surface and will be removed in the future. Use VersionMutations.delete instead.
+   */
   commitsDelete: Scalars['Boolean']['output'];
-  /** Move a batch of commits to a new branch */
+  /**
+   * Move a batch of commits to a new branch
+   * @deprecated Part of the old API surface and will be removed in the future. Use VersionMutations.moveToModel instead.
+   */
   commitsMove: Scalars['Boolean']['output'];
   /**
    * Delete a pending invite
@@ -1151,7 +1202,8 @@ export type Mutation = {
    */
   inviteResend: Scalars['Boolean']['output'];
   modelMutations: ModelMutations;
-  objectCreate: Array<Maybe<Scalars['String']['output']>>;
+  /** @deprecated Part of the old API surface and will be removed in the future. */
+  objectCreate: Array<Scalars['String']['output']>;
   projectMutations: ProjectMutations;
   /** (Re-)send the account verification e-mail */
   requestVerification: Scalars['Boolean']['output'];
@@ -1161,37 +1213,71 @@ export type Mutation = {
   serverInviteBatchCreate: Scalars['Boolean']['output'];
   /** Invite a new user to the speckle server and return the invite ID */
   serverInviteCreate: Scalars['Boolean']['output'];
-  /** Request access to a specific stream */
+  /**
+   * Request access to a specific stream
+   * @deprecated Part of the old API surface and will be removed in the future. Use ProjectAccessRequestMutations.create instead.
+   */
   streamAccessRequestCreate: StreamAccessRequest;
-  /** Accept or decline a stream access request. Must be a stream owner to invoke this. */
+  /**
+   * Accept or decline a stream access request. Must be a stream owner to invoke this.
+   * @deprecated Part of the old API surface and will be removed in the future. Use ProjectAccessRequestMutations.use instead.
+   */
   streamAccessRequestUse: Scalars['Boolean']['output'];
-  /** Creates a new stream. */
+  /**
+   * Creates a new stream.
+   * @deprecated Part of the old API surface and will be removed in the future. Use ProjectMutations.create instead.
+   */
   streamCreate?: Maybe<Scalars['String']['output']>;
-  /** Deletes an existing stream. */
+  /**
+   * Deletes an existing stream.
+   * @deprecated Part of the old API surface and will be removed in the future. Use ProjectMutations.delete instead.
+   */
   streamDelete: Scalars['Boolean']['output'];
+  /** @deprecated Part of the old API surface and will be removed in the future. */
   streamFavorite?: Maybe<Stream>;
-  /** Note: The required scope to invoke this is not given out to app or personal access tokens */
+  /**
+   * Note: The required scope to invoke this is not given out to app or personal access tokens
+   * @deprecated Part of the old API surface and will be removed in the future. Use ProjectInviteMutations.batchCreate instead.
+   */
   streamInviteBatchCreate: Scalars['Boolean']['output'];
   /**
    * Cancel a pending stream invite. Can only be invoked by a stream owner.
    * Note: The required scope to invoke this is not given out to app or personal access tokens
+   * @deprecated Part of the old API surface and will be removed in the future. Use ProjectInviteMutations.cancel instead.
    */
   streamInviteCancel: Scalars['Boolean']['output'];
   /**
    * Invite a new or registered user to the specified stream
    * Note: The required scope to invoke this is not given out to app or personal access tokens
+   * @deprecated Part of the old API surface and will be removed in the future. Use ProjectInviteMutations.create instead.
    */
   streamInviteCreate: Scalars['Boolean']['output'];
-  /** Accept or decline a stream invite */
+  /**
+   * Accept or decline a stream invite
+   * @deprecated Part of the old API surface and will be removed in the future. Use ProjectInviteMutations.use instead.
+   */
   streamInviteUse: Scalars['Boolean']['output'];
-  /** Remove yourself from stream collaborators (not possible for the owner) */
+  /**
+   * Remove yourself from stream collaborators (not possible for the owner)
+   * @deprecated Part of the old API surface and will be removed in the future. Use ProjectMutations.leave instead.
+   */
   streamLeave: Scalars['Boolean']['output'];
-  /** Revokes the permissions of a user on a given stream. */
+  /**
+   * Revokes the permissions of a user on a given stream.
+   * @deprecated Part of the old API surface and will be removed in the future. Use ProjectMutations.updateRole instead.
+   */
   streamRevokePermission?: Maybe<Scalars['Boolean']['output']>;
-  /** Updates an existing stream. */
+  /**
+   * Updates an existing stream.
+   * @deprecated Part of the old API surface and will be removed in the future. Use ProjectMutations.update instead.
+   */
   streamUpdate: Scalars['Boolean']['output'];
-  /** Update permissions of a user on a given stream. */
+  /**
+   * Update permissions of a user on a given stream.
+   * @deprecated Part of the old API surface and will be removed in the future. Use ProjectMutations.updateRole instead.
+   */
   streamUpdatePermission?: Maybe<Scalars['Boolean']['output']>;
+  /** @deprecated Part of the old API surface and will be removed in the future. Use ProjectMutations.batchDelete instead. */
   streamsDelete: Scalars['Boolean']['output'];
   /**
    * Used for broadcasting real time typing status in comment threads. Does not persist any info.
@@ -1508,6 +1594,7 @@ export type MutationWebhookUpdateArgs = {
 
 export type Object = {
   __typename?: 'Object';
+  /** @deprecated Not implemented. */
   applicationId?: Maybe<Scalars['String']['output']>;
   /**
    * Get any objects that this object references. In the case of commits, this will give you a commit's constituent objects.
@@ -1523,6 +1610,7 @@ export type Object = {
    *     ...
    *   }
    * ```
+   * @deprecated Part of the old API surface and will be removed in the future.
    */
   commentCount: Scalars['Int']['output'];
   createdAt?: Maybe<Scalars['DateTime']['output']>;
@@ -1546,7 +1634,7 @@ export type ObjectChildrenArgs = {
 export type ObjectCollection = {
   __typename?: 'ObjectCollection';
   cursor?: Maybe<Scalars['String']['output']>;
-  objects: Array<Maybe<Object>>;
+  objects: Array<Object>;
   totalCount: Scalars['Int']['output'];
 };
 
@@ -1586,7 +1674,9 @@ export type PendingStreamCollaborator = {
   projectId: Scalars['String']['output'];
   projectName: Scalars['String']['output'];
   role: Scalars['String']['output'];
+  /** @deprecated Use projectId instead */
   streamId: Scalars['String']['output'];
+  /** @deprecated Use projectName instead */
   streamName: Scalars['String']['output'];
   /** E-mail address or name of the invited user */
   title: Scalars['String']['output'];
@@ -1605,6 +1695,8 @@ export type Project = {
   blob?: Maybe<BlobMetadata>;
   /** Get the metadata collection of blobs stored for this stream. */
   blobs?: Maybe<BlobMetadataCollection>;
+  /** Get specific project comment/thread by ID */
+  comment?: Maybe<Comment>;
   /** All comment threads in this project */
   commentThreads: ProjectCommentCollection;
   createdAt: Scalars['DateTime']['output'];
@@ -1614,6 +1706,8 @@ export type Project = {
   invitedTeam?: Maybe<Array<PendingStreamCollaborator>>;
   /** Returns a specific model by its ID */
   model: Model;
+  /** Retrieve a specific project model by its ID */
+  modelByName: Model;
   /** Return a model tree of children for the specified model name */
   modelChildrenTree: Array<ModelsTreeItem>;
   /** Returns a flat list of all models */
@@ -1624,6 +1718,9 @@ export type Project = {
    */
   modelsTree: ModelsTreeItemCollection;
   name: Scalars['String']['output'];
+  object?: Maybe<Object>;
+  /** Pending project access requests */
+  pendingAccessRequests?: Maybe<Array<ProjectAccessRequest>>;
   /** Returns a list models that are being created from a file import */
   pendingImportedModels: Array<FileUpload>;
   /** Active user's role for this project. `null` if request is not authenticated, or the project is not explicitly shared with you. */
@@ -1667,6 +1764,11 @@ export type ProjectBlobsArgs = {
 };
 
 
+export type ProjectCommentArgs = {
+  id: Scalars['String']['input'];
+};
+
+
 export type ProjectCommentThreadsArgs = {
   cursor?: InputMaybe<Scalars['String']['input']>;
   filter?: InputMaybe<ProjectCommentsFilter>;
@@ -1679,6 +1781,11 @@ export type ProjectModelArgs = {
 };
 
 
+export type ProjectModelByNameArgs = {
+  name: Scalars['String']['input'];
+};
+
+
 export type ProjectModelChildrenTreeArgs = {
   fullName: Scalars['String']['input'];
 };
@@ -1698,6 +1805,11 @@ export type ProjectModelsTreeArgs = {
 };
 
 
+export type ProjectObjectArgs = {
+  id: Scalars['String']['input'];
+};
+
+
 export type ProjectPendingImportedModelsArgs = {
   limit?: InputMaybe<Scalars['Int']['input']>;
 };
@@ -1724,6 +1836,38 @@ export type ProjectWebhooksArgs = {
   id?: InputMaybe<Scalars['String']['input']>;
 };
 
+/** Created when a user requests to become a contributor on a project */
+export type ProjectAccessRequest = {
+  __typename?: 'ProjectAccessRequest';
+  createdAt: Scalars['DateTime']['output'];
+  id: Scalars['ID']['output'];
+  /** Can only be selected if authed user has proper access */
+  project: Project;
+  projectId: Scalars['String']['output'];
+  requester: LimitedUser;
+  requesterId: Scalars['String']['output'];
+};
+
+export type ProjectAccessRequestMutations = {
+  __typename?: 'ProjectAccessRequestMutations';
+  /** Request access to a specific project */
+  create: ProjectAccessRequest;
+  /** Accept or decline a project access request. Must be a project owner to invoke this. */
+  use: Project;
+};
+
+
+export type ProjectAccessRequestMutationsCreateArgs = {
+  projectId: Scalars['String']['input'];
+};
+
+
+export type ProjectAccessRequestMutationsUseArgs = {
+  accept: Scalars['Boolean']['input'];
+  requestId: Scalars['String']['input'];
+  role?: StreamRole;
+};
+
 export type ProjectAutomationCreateInput = {
   enabled: Scalars['Boolean']['input'];
   name: Scalars['String']['input'];
@@ -1858,6 +2002,7 @@ export type ProjectCreateInput = {
   description?: InputMaybe<Scalars['String']['input']>;
   name?: InputMaybe<Scalars['String']['input']>;
   visibility?: InputMaybe<ProjectVisibility>;
+  workspaceId?: InputMaybe<Scalars['String']['input']>;
 };
 
 export type ProjectFileImportUpdatedMessage = {
@@ -1966,7 +2111,11 @@ export enum ProjectModelsUpdatedMessageType {
 
 export type ProjectMutations = {
   __typename?: 'ProjectMutations';
+  /** Access request related mutations */
+  accessRequestMutations: ProjectAccessRequestMutations;
   automationMutations: ProjectAutomationMutations;
+  /** Batch delete projects */
+  batchDelete: Scalars['Boolean']['output'];
   /** Create new project */
   create: Project;
   /**
@@ -1992,6 +2141,11 @@ export type ProjectMutationsAutomationMutationsArgs = {
 };
 
 
+export type ProjectMutationsBatchDeleteArgs = {
+  ids: Array<Scalars['String']['input']>;
+};
+
+
 export type ProjectMutationsCreateArgs = {
   input?: InputMaybe<ProjectCreateInput>;
 };
@@ -2143,7 +2297,10 @@ export type Query = {
   adminUsers?: Maybe<AdminUsersListCollection>;
   /** Gets a specific app from the server. */
   app?: Maybe<ServerApp>;
-  /** Returns all the publicly available apps on this server. */
+  /**
+   * Returns all the publicly available apps on this server.
+   * @deprecated Part of the old API surface and will be removed in the future.
+   */
   apps?: Maybe<Array<Maybe<ServerAppListItem>>>;
   /** If user is authenticated using an app token, this will describe the app */
   authenticatedAsApp?: Maybe<ServerAppListItem>;
@@ -2152,15 +2309,19 @@ export type Query = {
   automateFunctions: AutomateFunctionCollection;
   /** Part of the automation/function creation handshake mechanism */
   automateValidateAuthCode: Scalars['Boolean']['output'];
+  /** @deprecated Part of the old API surface and will be removed in the future. Use Project.comment instead. */
   comment?: Maybe<Comment>;
   /**
    * This query can be used in the following ways:
    * - get all the comments for a stream: **do not pass in any resource identifiers**.
    * - get the comments targeting any of a set of provided resources (comments/objects): **pass in an array of resources.**
-   * @deprecated Use 'commentThreads' fields instead
+   * @deprecated Use Project/Version/Model 'commentThreads' fields instead
    */
   comments?: Maybe<CommentCollection>;
-  /** All of the discoverable streams of the server */
+  /**
+   * All of the discoverable streams of the server
+   * @deprecated Part of the old API surface and will be removed in the future.
+   */
   discoverableStreams?: Maybe<StreamCollection>;
   /** Get the (limited) profile information of another server user */
   otherUser?: Maybe<LimitedUser>;
@@ -2182,20 +2343,29 @@ export type Query = {
   /**
    * Returns a specific stream. Will throw an authorization error if active user isn't authorized
    * to see it, for example, if a stream isn't public and the user doesn't have the appropriate rights.
+   * @deprecated Part of the old API surface and will be removed in the future. Use Query.project instead.
    */
   stream?: Maybe<Stream>;
-  /** Get authed user's stream access request */
+  /**
+   * Get authed user's stream access request
+   * @deprecated Part of the old API surface and will be removed in the future. Use User.projectAccessRequest instead.
+   */
   streamAccessRequest?: Maybe<StreamAccessRequest>;
   /**
    * Look for an invitation to a stream, for the current user (authed or not). If token
    * isn't specified, the server will look for any valid invite.
+   * @deprecated Part of the old API surface and will be removed in the future. Use Query.projectInvite instead.
    */
   streamInvite?: Maybe<PendingStreamCollaborator>;
-  /** Get all invitations to streams that the active user has */
+  /**
+   * Get all invitations to streams that the active user has
+   * @deprecated Part of the old API surface and will be removed in the future. Use User.projectInvites instead.
+   */
   streamInvites: Array<PendingStreamCollaborator>;
   /**
    * Returns all streams that the active user is a collaborator on.
    * Pass in the `query` parameter to search by name, description or ID.
+   * @deprecated Part of the old API surface and will be removed in the future. Use User.projects instead.
    */
   streams?: Maybe<StreamCollection>;
   /**
@@ -2203,7 +2373,10 @@ export type Query = {
    * @deprecated To be removed in the near future! Use 'activeUser' to get info about the active user or 'otherUser' to get info about another user.
    */
   user?: Maybe<User>;
-  /** Validate password strength */
+  /**
+   * Validate password strength
+   * @deprecated Part of the old API surface and will be removed in the future.
+   */
   userPwdStrength: PasswordStrengthCheckResults;
   /**
    * Search for users and return limited metadata about them, if you have the server:user role.
@@ -2527,13 +2700,22 @@ export enum SortDirection {
 
 export type Stream = {
   __typename?: 'Stream';
-  /** All the recent activity on this stream in chronological order */
+  /**
+   * All the recent activity on this stream in chronological order
+   * @deprecated Part of the old API surface and will be removed in the future.
+   */
   activity?: Maybe<ActivityCollection>;
   allowPublicComments: Scalars['Boolean']['output'];
+  /** @deprecated Part of the old API surface and will be removed in the future. Use Project.blob instead. */
   blob?: Maybe<BlobMetadata>;
-  /** Get the metadata collection of blobs stored for this stream. */
+  /**
+   * Get the metadata collection of blobs stored for this stream.
+   * @deprecated Part of the old API surface and will be removed in the future. Use Project.blobs instead.
+   */
   blobs?: Maybe<BlobMetadataCollection>;
+  /** @deprecated Part of the old API surface and will be removed in the future. Use Project.model or Project.modelByName instead. */
   branch?: Maybe<Branch>;
+  /** @deprecated Part of the old API surface and will be removed in the future. Use Project.models or Project.modelsTree instead. */
   branches?: Maybe<BranchCollection>;
   collaborators: Array<StreamCollaborator>;
   /**
@@ -2545,18 +2727,27 @@ export type Stream = {
    *     ...
    *   }
    * ```
+   * @deprecated Part of the old API surface and will be removed in the future.
    */
   commentCount: Scalars['Int']['output'];
+  /** @deprecated Part of the old API surface and will be removed in the future. Use Project.version instead. */
   commit?: Maybe<Commit>;
+  /** @deprecated Part of the old API surface and will be removed in the future. Use Project.versions instead. */
   commits?: Maybe<CommitCollection>;
   createdAt: Scalars['DateTime']['output'];
   description?: Maybe<Scalars['String']['output']>;
   /** Date when you favorited this stream. `null` if stream isn't viewed from a specific user's perspective or if it isn't favorited. */
   favoritedDate?: Maybe<Scalars['DateTime']['output']>;
   favoritesCount: Scalars['Int']['output'];
-  /** Returns a specific file upload that belongs to this stream. */
+  /**
+   * Returns a specific file upload that belongs to this stream.
+   * @deprecated Part of the old API surface and will be removed in the future. Use Project.pendingImportedModels or Model.pendingImportedVersions instead.
+   */
   fileUpload?: Maybe<FileUpload>;
-  /** Returns a list of all the file uploads for this stream. */
+  /**
+   * Returns a list of all the file uploads for this stream.
+   * @deprecated Part of the old API surface and will be removed in the future. Use Project.pendingImportedModels or Model.pendingImportedVersions instead.
+   */
   fileUploads: Array<FileUpload>;
   id: Scalars['String']['output'];
   /**
@@ -2567,8 +2758,12 @@ export type Stream = {
   /** Whether the stream can be viewed by non-contributors */
   isPublic: Scalars['Boolean']['output'];
   name: Scalars['String']['output'];
+  /** @deprecated Part of the old API surface and will be removed in the future. Use Project.object instead. */
   object?: Maybe<Object>;
-  /** Pending stream access requests */
+  /**
+   * Pending stream access requests
+   * @deprecated Part of the old API surface and will be removed in the future. Use Project.pendingAccessRequests instead.
+   */
   pendingAccessRequests?: Maybe<Array<StreamAccessRequest>>;
   /** Collaborators who have been invited, but not yet accepted. */
   pendingCollaborators?: Maybe<Array<PendingStreamCollaborator>>;
@@ -2576,6 +2771,7 @@ export type Stream = {
   role?: Maybe<Scalars['String']['output']>;
   size?: Maybe<Scalars['String']['output']>;
   updatedAt: Scalars['DateTime']['output'];
+  /** @deprecated Part of the old API surface and will be removed in the future. Use Project.webhooks instead. */
   webhooks: WebhookCollection;
 };
 
@@ -2678,6 +2874,7 @@ export type StreamCreateInput = {
   name?: InputMaybe<Scalars['String']['input']>;
   /** Optionally specify user IDs of users that you want to invite to be contributors to this stream */
   withContributors?: InputMaybe<Array<Scalars['String']['input']>>;
+  workspaceId?: InputMaybe<Scalars['String']['input']>;
 };
 
 export type StreamInviteCreateInput = {
@@ -2726,11 +2923,20 @@ export type Subscription = {
   __typename?: 'Subscription';
   /** It's lonely in the void. */
   _?: Maybe<Scalars['String']['output']>;
-  /** Subscribe to branch created event */
+  /**
+   * Subscribe to branch created event
+   * @deprecated Part of the old API surface and will be removed in the future. Use 'projectModelsUpdated' instead.
+   */
   branchCreated?: Maybe<Scalars['JSONObject']['output']>;
-  /** Subscribe to branch deleted event */
+  /**
+   * Subscribe to branch deleted event
+   * @deprecated Part of the old API surface and will be removed in the future. Use 'projectModelsUpdated' instead.
+   */
   branchDeleted?: Maybe<Scalars['JSONObject']['output']>;
-  /** Subscribe to branch updated event. */
+  /**
+   * Subscribe to branch updated event.
+   * @deprecated Part of the old API surface and will be removed in the future. Use 'projectModelsUpdated' instead.
+   */
   branchUpdated?: Maybe<Scalars['JSONObject']['output']>;
   /**
    * Subscribe to new comment events. There's two ways to use this subscription:
@@ -2746,11 +2952,20 @@ export type Subscription = {
    * @deprecated Use projectCommentsUpdated or viewerUserActivityBroadcasted for reply status
    */
   commentThreadActivity: CommentThreadActivityMessage;
-  /** Subscribe to commit created event */
+  /**
+   * Subscribe to commit created event
+   * @deprecated Part of the old API surface and will be removed in the future. Use 'projectVersionsUpdated' instead.
+   */
   commitCreated?: Maybe<Scalars['JSONObject']['output']>;
-  /** Subscribe to commit deleted event */
+  /**
+   * Subscribe to commit deleted event
+   * @deprecated Part of the old API surface and will be removed in the future. Use 'projectVersionsUpdated' instead.
+   */
   commitDeleted?: Maybe<Scalars['JSONObject']['output']>;
-  /** Subscribe to commit updated event. */
+  /**
+   * Subscribe to commit updated event.
+   * @deprecated Part of the old API surface and will be removed in the future. Use 'projectVersionsUpdated' instead.
+   */
   commitUpdated?: Maybe<Scalars['JSONObject']['output']>;
   /** Subscribe to updates to automations in the project */
   projectAutomationsUpdated: ProjectAutomationsUpdatedMessage;
@@ -2759,7 +2974,10 @@ export type Subscription = {
    * updates regarding comments for those resources.
    */
   projectCommentsUpdated: ProjectCommentsUpdatedMessage;
-  /** Subscribe to changes to any of a project's file imports */
+  /**
+   * Subscribe to changes to any of a project's file imports
+   * @deprecated Part of the old API surface and will be removed in the future. Use projectPendingModelsUpdated or projectPendingVersionsUpdated instead.
+   */
   projectFileImportUpdated: ProjectFileImportUpdatedMessage;
   /** Subscribe to changes to a project's models. Optionally specify modelIds to track. */
   projectModelsUpdated: ProjectModelsUpdatedMessage;
@@ -2777,20 +2995,28 @@ export type Subscription = {
   projectVersionsPreviewGenerated: ProjectVersionsPreviewGeneratedMessage;
   /** Subscribe to changes to a project's versions. */
   projectVersionsUpdated: ProjectVersionsUpdatedMessage;
-  /** Subscribes to stream deleted event. Use this in clients/components that pertain only to this stream. */
+  /**
+   * Subscribes to stream deleted event. Use this in clients/components that pertain only to this stream.
+   * @deprecated Part of the old API surface and will be removed in the future. Use projectUpdated instead.
+   */
   streamDeleted?: Maybe<Scalars['JSONObject']['output']>;
-  /** Subscribes to stream updated event. Use this in clients/components that pertain only to this stream. */
+  /**
+   * Subscribes to stream updated event. Use this in clients/components that pertain only to this stream.
+   * @deprecated Part of the old API surface and will be removed in the future. Use projectUpdated instead.
+   */
   streamUpdated?: Maybe<Scalars['JSONObject']['output']>;
   /** Track newly added or deleted projects owned by the active user */
   userProjectsUpdated: UserProjectsUpdatedMessage;
   /**
    * Subscribes to new stream added event for your profile. Use this to display an up-to-date list of streams.
    * **NOTE**: If someone shares a stream with you, this subscription will be triggered with an extra value of `sharedBy` in the payload.
+   * @deprecated Part of the old API surface and will be removed in the future. Use userProjectsUpdated instead.
    */
   userStreamAdded?: Maybe<Scalars['JSONObject']['output']>;
   /**
    * Subscribes to stream removed event for your profile. Use this to display an up-to-date list of streams for your profile.
    * **NOTE**: If someone revokes your permissions on a stream, this subscription will be triggered with an extra value of `revokedBy` in the payload.
+   * @deprecated Part of the old API surface and will be removed in the future. Use userProjectsUpdated instead.
    */
   userStreamRemoved?: Maybe<Scalars['JSONObject']['output']>;
   /**
@@ -3003,7 +3229,10 @@ export type UpdateVersionInput = {
  */
 export type User = {
   __typename?: 'User';
-  /** All the recent activity from this user in chronological order */
+  /**
+   * All the recent activity from this user in chronological order
+   * @deprecated Part of the old API surface and will be removed in the future.
+   */
   activity?: Maybe<ActivityCollection>;
   /** Returns a list of your personal api tokens. */
   apiTokens: Array<ApiToken>;
@@ -3015,16 +3244,19 @@ export type User = {
   /**
    * Get commits authored by the user. If requested for another user, then only commits
    * from public streams will be returned.
+   * @deprecated Part of the old API surface and will be removed in the future. Use User.versions instead.
    */
   commits?: Maybe<CommitCollection>;
   company?: Maybe<Scalars['String']['output']>;
   /** Returns the apps you have created. */
   createdApps?: Maybe<Array<ServerApp>>;
   createdAt?: Maybe<Scalars['DateTime']['output']>;
+  /** Only returned if API user is the user being requested or an admin */
   email?: Maybe<Scalars['String']['output']>;
   /**
    * All the streams that a active user has favorited.
    * Note: You can't use this to retrieve another user's favorite streams.
+   * @deprecated Part of the old API surface and will be removed in the future.
    */
   favoriteStreams: StreamCollection;
   /** Whether the user has a pending/active email verification token */
@@ -3035,6 +3267,8 @@ export type User = {
   name: Scalars['String']['output'];
   notificationPreferences: Scalars['JSONObject']['output'];
   profiles?: Maybe<Scalars['JSONObject']['output']>;
+  /** Get pending project access request, that the user made */
+  projectAccessRequest?: Maybe<ProjectAccessRequest>;
   /** Get all invitations to projects that the active user has */
   projectInvites: Array<PendingStreamCollaborator>;
   /** Get projects that the user participates in */
@@ -3043,11 +3277,18 @@ export type User = {
   /**
    * Returns all streams that the user is a collaborator on. If requested for a user, who isn't the
    * authenticated user, then this will only return discoverable streams.
+   * @deprecated Part of the old API surface and will be removed in the future. Use User.projects instead.
    */
   streams: StreamCollection;
-  /** The user's timeline in chronological order */
+  /**
+   * The user's timeline in chronological order
+   * @deprecated Part of the old API surface and will be removed in the future.
+   */
   timeline?: Maybe<ActivityCollection>;
-  /** Total amount of favorites attached to streams owned by the user */
+  /**
+   * Total amount of favorites attached to streams owned by the user
+   * @deprecated Part of the old API surface and will be removed in the future.
+   */
   totalOwnedStreamsFavorites: Scalars['Int']['output'];
   verified?: Maybe<Scalars['Boolean']['output']>;
   /**
@@ -3093,6 +3334,15 @@ export type UserFavoriteStreamsArgs = {
 };
 
 
+/**
+ * Full user type, should only be used in the context of admin operations or
+ * when a user is reading/writing info about himself
+ */
+export type UserProjectAccessRequestArgs = {
+  projectId: Scalars['String']['input'];
+};
+
+
 /**
  * Full user type, should only be used in the context of admin operations or
  * when a user is reading/writing info about himself
@@ -3237,18 +3487,30 @@ export type VersionCreatedTriggerDefinition = {
 
 export type VersionMutations = {
   __typename?: 'VersionMutations';
+  create: Version;
   delete: Scalars['Boolean']['output'];
+  markReceived: Scalars['Boolean']['output'];
   moveToModel: Model;
   requestGendoAIRender: Scalars['Boolean']['output'];
   update: Version;
 };
 
 
+export type VersionMutationsCreateArgs = {
+  input: CreateVersionInput;
+};
+
+
 export type VersionMutationsDeleteArgs = {
   input: DeleteVersionsInput;
 };
 
 
+export type VersionMutationsMarkReceivedArgs = {
+  input: MarkReceivedVersionInput;
+};
+
+
 export type VersionMutationsMoveToModelArgs = {
   input: MoveVersionsInput;
 };
diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index 54d12996b1..8aa7290d9f 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -136,6 +136,7 @@
 </template>
 <script setup lang="ts">
 import { isString } from 'lodash'
+import { useBreakpoints } from '@vueuse/core'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import {
   XMarkIcon,
@@ -150,6 +151,7 @@ import {
   ServerStackIcon
 } from '@heroicons/vue/24/outline'
 import { Roles } from '@speckle/shared'
+import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
 import { useActiveUser } from '~~/lib/auth/composables/activeUser'
 import { useAuthManager } from '~~/lib/auth/composables/auth'
 import { useTheme } from '~~/lib/core/composables/theme'
@@ -166,11 +168,14 @@ const { logout } = useAuthManager()
 const { activeUser, isGuest } = useActiveUser()
 const { isDarkTheme, toggleTheme } = useTheme()
 const { serverInfo } = useServerInfo()
+const router = useRouter()
 
 const showInviteDialog = ref(false)
 const showSettingsDialog = ref(false)
 const settingsDialogTarget = ref<string>(null)
 const menuButtonId = useId()
+const breakpoints = useBreakpoints(TailwindBreakpoints)
+const isMobile = breakpoints.smaller('md')
 
 const Icon = computed(() => (isDarkTheme.value ? SunIcon : MoonIcon))
 const version = computed(() => serverInfo.value?.version)
@@ -182,13 +187,25 @@ const toggleInviteDialog = () => {
 
 const toggleSettingsDialog = (target: string) => {
   showSettingsDialog.value = true
-  settingsDialogTarget.value = target
+
+  if (!isMobile.value) {
+    settingsDialogTarget.value = target
+  }
+}
+
+const deleteSettingsQuery = (): void => {
+  const currentQueryParams = { ...route.query }
+  delete currentQueryParams.settings
+  router.push({ query: currentQueryParams })
 }
 
 onMounted(() => {
   const settingsQuery = route.query?.settings
+
   if (settingsQuery && isString(settingsQuery)) {
-    toggleSettingsDialog(settingsQuery)
+    showSettingsDialog.value = true
+    settingsDialogTarget.value = settingsQuery
+    deleteSettingsQuery()
   }
 })
 </script>
diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 294a982d20..b74515474c 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -6,7 +6,7 @@
     "
     fullscreen
     :show-back-button="isMobile && !!selectedMenuItem"
-    @back="selectedMenuItem = null"
+    @back="targetMenuItem = null"
   >
     <div class="w-full h-full flex">
       <LayoutSidebar
@@ -19,14 +19,14 @@
               <UserIcon class="h-5 w-5" />
             </template>
             <LayoutSidebarMenuGroupItem
-              v-for="(sidebarMenuItem, index) in menuItemConfig.user"
-              :key="`sidebarUserItem-${index}`"
+              v-for="(sidebarMenuItem, key) in menuItemConfig.user"
+              :key="key"
               :label="sidebarMenuItem.title"
               :class="{
                 'bg-foundation-focus hover:!bg-foundation-focus':
                   selectedMenuItem?.title === sidebarMenuItem.title
               }"
-              @click="selectedMenuItem = sidebarMenuItem"
+              @click="targetMenuItem = key"
             />
           </LayoutSidebarMenuGroup>
           <LayoutSidebarMenuGroup title="Server settings">
@@ -34,14 +34,14 @@
               <ServerStackIcon class="h-5 w-5" />
             </template>
             <LayoutSidebarMenuGroupItem
-              v-for="(sidebarMenuItem, index) in menuItemConfig.server"
-              :key="`sidebarServerItem-${index}`"
+              v-for="(sidebarMenuItem, key) in menuItemConfig.server"
+              :key="key"
               :label="sidebarMenuItem.title"
               :class="{
                 'bg-foundation-focus hover:!bg-foundation-focus':
                   selectedMenuItem?.title === sidebarMenuItem.title
               }"
-              @click="selectedMenuItem = sidebarMenuItem"
+              @click="targetMenuItem = key"
             />
           </LayoutSidebarMenuGroup>
         </LayoutSidebarMenu>
@@ -63,14 +63,13 @@
 
 <script setup lang="ts">
 import type { defineComponent } from 'vue'
-import type { LocationQueryValue } from 'vue-router'
-import SettingsUserProfile from './user/Profile.vue'
-import SettingsUserNotifications from './user/Notifications.vue'
-import SettingsUserDeveloper from './user/Developer.vue'
-import SettingsServerGeneral from './server/General.vue'
-import SettingsServerProjects from './server/Projects.vue'
-import SettingsServerActiveUsers from './server/ActiveUsers.vue'
-import SettingsServerPendingInvitations from './server/PendingInvitations.vue'
+import SettingsUserProfile from '~/components/settings/user/Profile.vue'
+import SettingsUserNotifications from '~/components/settings/user/Notifications.vue'
+import SettingsUserDeveloper from '~/components/settings/user/Developer.vue'
+import SettingsServerGeneral from '~/components/settings/server/General.vue'
+import SettingsServerProjects from '~/components/settings/server/Projects.vue'
+import SettingsServerActiveUsers from '~/components/settings/server/ActiveUsers.vue'
+import SettingsServerPendingInvitations from '~/components/settings/server/PendingInvitations.vue'
 import { useBreakpoints } from '@vueuse/core'
 import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
 import { UserIcon, ServerStackIcon } from '@heroicons/vue/24/outline'
@@ -86,21 +85,8 @@ type MenuItem = {
   component: ReturnType<typeof defineComponent>
 }
 
-const emit = defineEmits<{
-  (e: 'update:open', val: boolean): void
-}>()
-
-const props = defineProps<{
-  open: boolean
-  targetMenuItem?: LocationQueryValue
-}>()
-
-const route = useRoute()
-const router = useRouter()
 const breakpoints = useBreakpoints(TailwindBreakpoints)
-const isMobile = breakpoints.smallerOrEqual('md')
-
-const selectedMenuItem = shallowRef<MenuItem | null>(null)
+const isMobile = breakpoints.smaller('md')
 
 const menuItemConfig: {
   [key: string]: {
@@ -141,64 +127,17 @@ const menuItemConfig: {
   }
 }
 
-const isOpen = computed({
-  get: () => props.open,
-  set: (newVal: boolean) => emit('update:open', newVal)
-})
+const isOpen = defineModel<boolean>('open', { required: true })
+const targetMenuItem = defineModel<string>('targetMenuItem', { required: false })
 
-// Check if there is a matching menu item in the config
-const getMenuItem = (key: LocationQueryValue): MenuItem | null => {
+const selectedMenuItem = computed((): menuItem | null => {
   const categories = [menuItemConfig.user, menuItemConfig.server]
   for (const category of categories) {
-    if (key && key in category) {
-      return category[key]
+    if (targetMenuItem.value in category) {
+      return category[targetMenuItem.value]
     }
   }
 
   return null
-}
-
-watch(
-  isOpen,
-  (newVal, oldVal) => {
-    if (newVal && !oldVal) {
-      const settingsQuery: LocationQueryValue | LocationQueryValue[] =
-        route.query?.settings
-
-      // Check if there is a settings query
-      if (settingsQuery && typeof settingsQuery === 'string') {
-        const matchingMenuItem = getMenuItem(settingsQuery)
-        // Set matching menu items if it exists
-        if (matchingMenuItem) {
-          selectedMenuItem.value = matchingMenuItem
-        } else if (!isMobile.value) {
-          // On desktop: if no matching query check if we can match it to server
-          // Else open on the user profile page
-          // On mobile we not select any item and show the sidebar
-          selectedMenuItem.value = settingsQuery.includes('server')
-            ? menuItemConfig.server[settingsQueries.server.general]
-            : menuItemConfig.user[settingsQueries.user.profile]
-        }
-
-        deleteSettingsQuery()
-        return
-      }
-
-      // Check if there is target prop, only on desktop toggle that page
-      if (!isMobile.value && props.targetMenuItem) {
-        const matchingMenuItem = getMenuItem(props.targetMenuItem)
-        selectedMenuItem.value = matchingMenuItem
-      }
-    } else if (!newVal && oldVal) {
-      selectedMenuItem.value = null
-    }
-  },
-  { immediate: true }
-)
-
-const deleteSettingsQuery = (): void => {
-  const currentQueryParams = { ...route.query }
-  delete currentQueryParams.settings
-  router.push({ query: currentQueryParams })
-}
+})
 </script>
diff --git a/packages/frontend-2/components/settings/server/Projects.vue b/packages/frontend-2/components/settings/server/Projects.vue
index fe67da5d2a..c2c10881f6 100644
--- a/packages/frontend-2/components/settings/server/Projects.vue
+++ b/packages/frontend-2/components/settings/server/Projects.vue
@@ -44,13 +44,13 @@
 
       <template #created="{ item }">
         <div class="text-xs">
-          {{ isProject(item) ? new Date(item.createdAt).toLocaleString('en-GB') : '' }}
+          {{ formattedFullDate(item.createdAt) }}
         </div>
       </template>
 
       <template #modified="{ item }">
         <div class="text-xs">
-          {{ isProject(item) ? new Date(item.updatedAt).toLocaleString('en-GB') : '' }}
+          {{ formattedFullDate(item.updatedAt) }}
         </div>
       </template>
 
diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue
index e72b954075..a74c989ed5 100644
--- a/packages/ui-components/src/components/layout/Dialog.vue
+++ b/packages/ui-components/src/components/layout/Dialog.vue
@@ -125,7 +125,7 @@ import { computed, ref, useSlots, watch, onUnmounted } from 'vue'
 import { throttle } from 'lodash'
 import { isClient } from '@vueuse/core'
 
-type MaxWidthValue = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
+type MaxWidthValue = 'sm' | 'md' | 'lg' | 'xl'
 
 const emit = defineEmits<{
   (e: 'update:open', v: boolean): void

From 41508d799de86d170db2742431e56c122d8ad305 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Fri, 19 Jul 2024 11:44:22 +0200
Subject: [PATCH 66/77] Small refactor for checking query, change to
 defineModel

---
 packages/frontend-2/components/header/NavUserMenu.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index 8aa7290d9f..add4784dc5 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -188,9 +188,8 @@ const toggleInviteDialog = () => {
 const toggleSettingsDialog = (target: string) => {
   showSettingsDialog.value = true
 
-  if (!isMobile.value) {
-    settingsDialogTarget.value = target
-  }
+  // On mobile open the modal but dont set the target
+  settingsDialogTarget.value = !isMobile.value ? target : null
 }
 
 const deleteSettingsQuery = (): void => {

From d0797a95d483626aed430bacd6bad4f2cfa5eceb Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Fri, 19 Jul 2024 11:47:25 +0200
Subject: [PATCH 67/77] Added fallback for invalid queries

---
 packages/frontend-2/components/settings/Dialog.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index b74515474c..d60d28666e 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -138,6 +138,13 @@ const selectedMenuItem = computed((): menuItem | null => {
     }
   }
 
+  if (!isMobile.value) {
+    // Fallback for invalid queries/typos
+    return targetMenuItem.value.includes('server')
+      ? menuItemConfig.server.general
+      : menuItemConfig.user.profile
+  }
+
   return null
 })
 </script>

From ed24e9a0e8bbbaeb9b75556f26b274e65e9e3d9b Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Fri, 19 Jul 2024 12:19:54 +0200
Subject: [PATCH 68/77] Fix type issues

---
 .../components/header/NavUserMenu.vue         |  2 +-
 .../frontend-2/components/settings/Dialog.vue | 26 ++++++++-----------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index add4784dc5..5346761309 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -172,7 +172,7 @@ const router = useRouter()
 
 const showInviteDialog = ref(false)
 const showSettingsDialog = ref(false)
-const settingsDialogTarget = ref<string>(null)
+const settingsDialogTarget = ref<string | null>(null)
 const menuButtonId = useId()
 const breakpoints = useBreakpoints(TailwindBreakpoints)
 const isMobile = breakpoints.smaller('md')
diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index d60d28666e..ffa241753f 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -26,7 +26,7 @@
                 'bg-foundation-focus hover:!bg-foundation-focus':
                   selectedMenuItem?.title === sidebarMenuItem.title
               }"
-              @click="targetMenuItem = key"
+              @click="targetMenuItem = `${key}`"
             />
           </LayoutSidebarMenuGroup>
           <LayoutSidebarMenuGroup title="Server settings">
@@ -41,7 +41,7 @@
                 'bg-foundation-focus hover:!bg-foundation-focus':
                   selectedMenuItem?.title === sidebarMenuItem.title
               }"
-              @click="targetMenuItem = key"
+              @click="targetMenuItem = `${key}`"
             />
           </LayoutSidebarMenuGroup>
         </LayoutSidebarMenu>
@@ -88,11 +88,7 @@ type MenuItem = {
 const breakpoints = useBreakpoints(TailwindBreakpoints)
 const isMobile = breakpoints.smaller('md')
 
-const menuItemConfig: {
-  [key: string]: {
-    [key: string]: MenuItem
-  }
-} = {
+const menuItemConfig = shallowRef<{ [key: string]: { [key: string]: MenuItem } }>({
   user: {
     [settingsQueries.user.profile]: {
       title: 'Profile',
@@ -125,24 +121,24 @@ const menuItemConfig: {
       component: SettingsServerPendingInvitations
     }
   }
-}
+})
 
 const isOpen = defineModel<boolean>('open', { required: true })
-const targetMenuItem = defineModel<string>('targetMenuItem', { required: false })
+const targetMenuItem = defineModel<string | null>('targetMenuItem', { required: true })
 
-const selectedMenuItem = computed((): menuItem | null => {
-  const categories = [menuItemConfig.user, menuItemConfig.server]
+const selectedMenuItem = computed((): MenuItem | null => {
+  const categories = [menuItemConfig.value.user, menuItemConfig.value.server]
   for (const category of categories) {
-    if (targetMenuItem.value in category) {
+    if (targetMenuItem.value && targetMenuItem.value in category) {
       return category[targetMenuItem.value]
     }
   }
 
-  if (!isMobile.value) {
+  if (!isMobile.value && targetMenuItem.value) {
     // Fallback for invalid queries/typos
     return targetMenuItem.value.includes('server')
-      ? menuItemConfig.server.general
-      : menuItemConfig.user.profile
+      ? menuItemConfig.value.server.general
+      : menuItemConfig.value.user.profile
   }
 
   return null

From a8c5de45d858f7cf0e60040565ac04a43df863ca Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Fri, 19 Jul 2024 12:49:06 +0200
Subject: [PATCH 69/77] Moved scoped formatting to a function

---
 .../components/settings/user/Developer.vue    | 34 +++++++------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/packages/frontend-2/components/settings/user/Developer.vue b/packages/frontend-2/components/settings/user/Developer.vue
index 5f6c10db46..e3af5fd508 100644
--- a/packages/frontend-2/components/settings/user/Developer.vue
+++ b/packages/frontend-2/components/settings/user/Developer.vue
@@ -90,18 +90,7 @@
             </template>
 
             <template #scope="{ item }">
-              <div>
-                {{
-                  item.scopes
-                    ? item.scopes
-                        .map(
-                          (event, index, array) =>
-                            `"${event}"${index < array.length - 1 ? ',' : ''}`
-                        )
-                        .join(' ')
-                    : 'No scopes available'
-                }}
-              </div>
+              {{ getItemScopes(item) }}
             </template>
           </LayoutTable>
         </div>
@@ -177,16 +166,7 @@
             </template>
 
             <template #scope="{ item }">
-              <div>
-                {{
-                  item.scopes
-                    .map(
-                      (event, index, array) =>
-                        `"${event.name}"${index < array.length - 1 ? ',' : ''}`
-                    )
-                    .join(' ')
-                }}
-              </div>
+              {{ getItemScopes(item) }}
             </template>
           </LayoutTable>
         </div>
@@ -392,4 +372,14 @@ const goToExplorer = () => {
   if (!import.meta.client) return
   window.location.href = new URL('/explorer', apiOrigin).toString()
 }
+
+const getItemScopes = (item: TokenItem | ApplicationItem): string => {
+  return item.scopes
+    ? item.scopes
+        .map(
+          (event, index, array) => `"${event}"${index < array.length - 1 ? ',' : ''}`
+        )
+        .join(' ')
+    : 'No scopes available'
+}
 </script>

From 667e6e400cd36e413e7860f1204d5ac7a106f59c Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Fri, 19 Jul 2024 13:08:56 +0200
Subject: [PATCH 70/77] Refactor to useDebouncedTextInput

---
 .../settings/server/ActiveUsers.vue           | 46 +++++++++++--------
 .../settings/server/PendingInvitations.vue    | 20 ++++----
 .../components/settings/server/Projects.vue   | 42 ++++++++---------
 3 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/packages/frontend-2/components/settings/server/ActiveUsers.vue b/packages/frontend-2/components/settings/server/ActiveUsers.vue
index 8a7fd13302..d93c2a4f8b 100644
--- a/packages/frontend-2/components/settings/server/ActiveUsers.vue
+++ b/packages/frontend-2/components/settings/server/ActiveUsers.vue
@@ -1,19 +1,21 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
     <SettingsSectionHeader title="Active users" text="Manage server members" />
-    <div class="flex flex-col-reverse md:flex-row">
-      <FormTextInput
-        name="search"
-        :custom-icon="MagnifyingGlassIcon"
-        color="foundation"
-        full-width
-        search
-        :show-clear="!!searchString"
-        placeholder="Search users"
-        class="rounded-md border border-outline-3 md:max-w-md mt-6 md:mt-0"
-        @update:model-value="debounceSearchUpdate"
-        @change="($event) => searchUpdateHandler($event.value)"
-      />
+    <div class="flex flex-col-reverse md:justify-between md:flex-row md:gap-x-4">
+      <div class="relative w-full md:max-w-md mt-6 md:mt-0">
+        <FormTextInput
+          name="search"
+          :custom-icon="MagnifyingGlassIcon"
+          color="foundation"
+          full-width
+          search
+          :show-clear="!!search"
+          placeholder="Search users"
+          class="rounded-md border border-outline-3"
+          :model-value="bind.modelValue.value"
+          v-on="on"
+        />
+      </div>
       <FormButton :icon-left="UserPlusIcon" @click="toggleInviteDialog">
         Invite
       </FormButton>
@@ -103,7 +105,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
-import { debounce, isArray } from 'lodash-es'
+import { isArray } from 'lodash-es'
 import { useLogger } from '~~/composables/logging'
 import type { InfiniteLoaderState } from '~~/lib/global/helpers/components'
 import type { Nullable, ServerRoles, Optional } from '@speckle/shared'
@@ -119,13 +121,17 @@ import {
   UserPlusIcon
 } from '@heroicons/vue/24/outline'
 import { useServerInfo } from '~~/lib/core/composables/server'
+import { useDebouncedTextInput } from '@speckle/ui-components'
+
+const search = defineModel<string>('search')
 
 const logger = useLogger()
 const { activeUser } = useActiveUser()
 const { isGuestMode } = useServerInfo()
+const { on, bind } = useDebouncedTextInput({ model: search })
 
 const userToModify: Ref<Nullable<UserItem>> = ref(null)
-const searchString = ref('')
+
 const showUserDeleteDialog = ref(false)
 const showChangeUserRoleDialog = ref(false)
 const newRole = ref<ServerRoles>()
@@ -134,7 +140,7 @@ const showInviteDialog = ref(false)
 
 const queryVariables = computed(() => ({
   limit: 50,
-  query: searchString.value
+  query: search.value
 }))
 
 const {
@@ -198,11 +204,11 @@ const infiniteLoad = async (state: InfiniteLoaderState) => {
   }
 }
 
-const searchUpdateHandler = (value: string) => {
-  searchString.value = value
-}
+// const searchUpdateHandler = (value: string) => {
+//   searchString.value = value
+// }
 
-const debounceSearchUpdate = debounce(searchUpdateHandler, 500)
+// const debounceSearchUpdate = debounce(searchUpdateHandler, 500)
 
 const calculateLoaderId = () => {
   infiniteLoaderId.value = resultVariables.value?.query || ''
diff --git a/packages/frontend-2/components/settings/server/PendingInvitations.vue b/packages/frontend-2/components/settings/server/PendingInvitations.vue
index d8ed8342b1..0bc2a3b60d 100644
--- a/packages/frontend-2/components/settings/server/PendingInvitations.vue
+++ b/packages/frontend-2/components/settings/server/PendingInvitations.vue
@@ -11,11 +11,11 @@
         color="foundation"
         full-width
         search
-        :show-clear="!!searchString"
+        :show-clear="!!search"
         placeholder="Search invitations"
         class="rounded-md border border-outline-3 md:max-w-md mt-6 md:mt-0"
-        @update:model-value="debounceSearchUpdate"
-        @change="($event) => searchUpdateHandler($event.value)"
+        :model-value="bind.modelValue.value"
+        v-on="on"
       />
       <FormButton :icon-left="UserPlusIcon" @click="toggleInviteDialog">
         Invite
@@ -87,7 +87,6 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { debounce } from 'lodash-es'
 import { useQuery, useMutation } from '@vue/apollo-composable'
 import { MagnifyingGlassIcon, TrashIcon, UserPlusIcon } from '@heroicons/vue/24/outline'
 import type { ItemType, InviteItem } from '~~/lib/server-management/helpers/types'
@@ -100,13 +99,16 @@ import {
   convertThrowIntoFetchResult,
   getFirstErrorMessage
 } from '~~/lib/common/helpers/graphql'
+import { useDebouncedTextInput } from '@speckle/ui-components'
+
+const search = defineModel<string>('search')
 
 const logger = useLogger()
 const { triggerNotification } = useGlobalToast()
 const { mutate: resendInvitationMutation } = useMutation(adminResendInviteMutation)
+const { on, bind } = useDebouncedTextInput({ model: search })
 
 const inviteToModify = ref<InviteItem | null>(null)
-const searchString = ref('')
 const showDeleteInvitationDialog = ref(false)
 const infiniteLoaderId = ref('')
 const successfullyResentInvites = ref<string[]>([])
@@ -120,7 +122,7 @@ const {
   loading
 } = useQuery(getInvitesQuery, () => ({
   limit: 50,
-  query: searchString.value
+  query: search.value
 }))
 
 const moreToLoad = computed(
@@ -186,12 +188,6 @@ const infiniteLoad = async (state: InfiniteLoaderState) => {
   }
 }
 
-const searchUpdateHandler = (value: string) => {
-  searchString.value = value
-}
-
-const debounceSearchUpdate = debounce(searchUpdateHandler, 500)
-
 const calculateLoaderId = () => {
   infiniteLoaderId.value = resultVariables.value?.query || ''
 }
diff --git a/packages/frontend-2/components/settings/server/Projects.vue b/packages/frontend-2/components/settings/server/Projects.vue
index c2c10881f6..096c4a7077 100644
--- a/packages/frontend-2/components/settings/server/Projects.vue
+++ b/packages/frontend-2/components/settings/server/Projects.vue
@@ -1,19 +1,21 @@
 <template>
   <div class="md:max-w-5xl md:mx-auto">
     <SettingsSectionHeader title="Projects" text="Manage projects across the server" />
-    <div class="flex flex-col-reverse md:flex-row">
-      <FormTextInput
-        name="search"
-        :custom-icon="MagnifyingGlassIcon"
-        color="foundation"
-        full-width
-        search
-        :show-clear="!!searchString"
-        placeholder="Search projects"
-        class="rounded-md border border-outline-3 md:max-w-md mt-6 md:mt-0"
-        @update:model-value="debounceSearchUpdate"
-        @change="($event) => searchUpdateHandler($event.value)"
-      />
+    <div class="flex flex-col-reverse md:justify-between md:flex-row md:gap-x-4">
+      <div class="relative w-full md:max-w-md mt-6 md:mt-0">
+        <FormTextInput
+          name="search"
+          :custom-icon="MagnifyingGlassIcon"
+          color="foundation"
+          full-width
+          search
+          :show-clear="!!search"
+          placeholder="Search projects"
+          class="rounded-md border border-outline-3 md:max-w-md mt-6 md:mt-0"
+          :model-value="bind.modelValue.value"
+          v-on="on"
+        />
+      </div>
       <FormButton :icon-left="PlusIcon" @click="openNewProject = true">New</FormButton>
     </div>
 
@@ -95,19 +97,21 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { debounce } from 'lodash-es'
 import { useQuery } from '@vue/apollo-composable'
 import { MagnifyingGlassIcon, TrashIcon, PlusIcon } from '@heroicons/vue/24/outline'
 import { getProjectsQuery } from '~~/lib/server-management/graphql/queries'
 import type { ItemType, ProjectItem } from '~~/lib/server-management/helpers/types'
 import type { InfiniteLoaderState } from '~~/lib/global/helpers/components'
 import { isProject } from '~~/lib/server-management/helpers/utils'
+import { useDebouncedTextInput } from '@speckle/ui-components'
 
+const search = defineModel<string>('search')
+
+const { on, bind } = useDebouncedTextInput({ model: search })
 const logger = useLogger()
 const router = useRouter()
 
 const projectToModify = ref<ProjectItem | null>(null)
-const searchString = ref('')
 const showProjectDeleteDialog = ref(false)
 const infiniteLoaderId = ref('')
 const openNewProject = ref(false)
@@ -120,7 +124,7 @@ const {
   loading
 } = useQuery(getProjectsQuery, () => ({
   limit: 50,
-  query: searchString.value
+  query: search.value
 }))
 
 const moreToLoad = computed(
@@ -165,12 +169,6 @@ const infiniteLoad = async (state: InfiniteLoaderState) => {
   }
 }
 
-const searchUpdateHandler = (value: string) => {
-  searchString.value = value
-}
-
-const debounceSearchUpdate = debounce(searchUpdateHandler, 500)
-
 const calculateLoaderId = () => {
   infiniteLoaderId.value = resultVariables.value?.query || ''
 }

From 5cf7ac51d3b859f343bbfab01c33899e731a9272 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Fri, 19 Jul 2024 13:40:48 +0200
Subject: [PATCH 71/77] Changed user to always be passed as a prop

---
 .../frontend-2/components/settings/Dialog.vue | 14 +++++++++++++-
 .../settings/user/Notifications.vue           |  9 ++++++---
 .../components/settings/user/Profile.vue      | 19 ++++++++++---------
 .../settings/user/profile/ChangePassword.vue  |  9 ++++++---
 .../settings/user/profile/DeleteAccount.vue   |  4 ++--
 .../user/profile/DeleteAccountDialog.vue      |  4 ++--
 .../settings/user/profile/Details.vue         |  9 +++------
 .../settings/user/profile/EditAvatar.vue      |  4 ++--
 8 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index ffa241753f..4ae99633d2 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -54,7 +54,7 @@
         ]"
       >
         <div class="pb-6">
-          <component :is="selectedMenuItem.component" />
+          <component :is="selectedMenuItem.component" :user="user" />
         </div>
       </main>
     </div>
@@ -74,6 +74,7 @@ import { useBreakpoints } from '@vueuse/core'
 import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
 import { UserIcon, ServerStackIcon } from '@heroicons/vue/24/outline'
 import { settingsQueries } from '~/lib/common/helpers/route'
+import { useActiveUser } from '~/lib/auth/composables/activeUser'
 import {
   LayoutSidebar,
   LayoutSidebarMenu,
@@ -85,6 +86,7 @@ type MenuItem = {
   component: ReturnType<typeof defineComponent>
 }
 
+const { activeUser: user } = useActiveUser()
 const breakpoints = useBreakpoints(TailwindBreakpoints)
 const isMobile = breakpoints.smaller('md')
 
@@ -143,4 +145,14 @@ const selectedMenuItem = computed((): MenuItem | null => {
 
   return null
 })
+
+watch(
+  () => user.value,
+  (newVal) => {
+    if (!newVal) {
+      isOpen.value = false
+    }
+  },
+  { immediate: true }
+)
 </script>
diff --git a/packages/frontend-2/components/settings/user/Notifications.vue b/packages/frontend-2/components/settings/user/Notifications.vue
index e8a55c8928..aec31cfae1 100644
--- a/packages/frontend-2/components/settings/user/Notifications.vue
+++ b/packages/frontend-2/components/settings/user/Notifications.vue
@@ -51,7 +51,7 @@ import { capitalize, cloneDeep } from 'lodash-es'
 import { graphql } from '~~/lib/common/generated/gql'
 import { useUpdateNotificationPreferences } from '~~/lib/user/composables/management'
 import type { NotificationPreferences } from '~~/lib/user/helpers/components'
-import { useActiveUser } from '~/lib/auth/composables/activeUser'
+import type { User } from '~~/lib/common/generated/gql/graphql'
 
 graphql(`
   fragment UserProfileEditDialogNotificationPreferences_User on User {
@@ -60,7 +60,10 @@ graphql(`
   }
 `)
 
-const { activeUser: user } = useActiveUser()
+const props = defineProps<{
+  user: User
+}>()
+
 const { mutate, loading } = useUpdateNotificationPreferences()
 
 const notificationTypeMapping = ref({
@@ -73,7 +76,7 @@ const notificationTypeMapping = ref({
 const localPreferences = ref({} as NotificationPreferences)
 
 const notificationPreferences = computed(
-  () => user.value?.notificationPreferences as NotificationPreferences
+  () => props.user.notificationPreferences as NotificationPreferences
 )
 
 const notificationChannels = computed(() => {
diff --git a/packages/frontend-2/components/settings/user/Profile.vue b/packages/frontend-2/components/settings/user/Profile.vue
index 79976dac6d..2d1312b464 100644
--- a/packages/frontend-2/components/settings/user/Profile.vue
+++ b/packages/frontend-2/components/settings/user/Profile.vue
@@ -1,17 +1,18 @@
 <template>
   <div class="md:max-w-xl md:mx-auto">
     <SettingsSectionHeader title="Profile" text="Manage your profile information" />
-    <template v-if="user">
-      <SettingsUserProfileDetails :user="user" />
-      <hr class="my-6 md:my-10" />
-      <SettingsUserProfileChangePassword :user="user" />
-      <hr class="my-6 md:my-10" />
-      <SettingsUserProfileDeleteAccount :user="user" />
-    </template>
+    <SettingsUserProfileDetails :user="user" />
+    <hr class="my-6 md:my-10" />
+    <SettingsUserProfileChangePassword :user="user" />
+    <hr class="my-6 md:my-10" />
+    <SettingsUserProfileDeleteAccount :user="user" />
   </div>
 </template>
+
 <script setup lang="ts">
-import { useActiveUser } from '~/lib/auth/composables/activeUser'
+import type { User } from '~~/lib/common/generated/gql/graphql'
 
-const { activeUser: user } = useActiveUser()
+defineProps<{
+  user: User
+}>()
 </script>
diff --git a/packages/frontend-2/components/settings/user/profile/ChangePassword.vue b/packages/frontend-2/components/settings/user/profile/ChangePassword.vue
index 749a24ac45..369cf57910 100644
--- a/packages/frontend-2/components/settings/user/profile/ChangePassword.vue
+++ b/packages/frontend-2/components/settings/user/profile/ChangePassword.vue
@@ -12,14 +12,17 @@
   </div>
 </template>
 <script setup lang="ts">
-import { useActiveUser } from '~~/lib/auth/composables/activeUser'
+import type { User } from '~~/lib/common/generated/gql/graphql'
 import { usePasswordReset } from '~~/lib/auth/composables/passwordReset'
 
-const { activeUser } = useActiveUser()
 const { sendResetEmail } = usePasswordReset()
 
+const props = defineProps<{
+  user: User
+}>()
+
 const onClick = async () => {
-  const email = activeUser.value?.email
+  const email = props.user.email
   if (!email) return
   await sendResetEmail(email)
 }
diff --git a/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue b/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue
index ab465d371b..53d6e62a10 100644
--- a/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue
+++ b/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue
@@ -20,10 +20,10 @@
 </template>
 
 <script setup lang="ts">
-import type { UserProfileEditDialogDeleteAccount_UserFragment } from '~~/lib/common/generated/gql/graphql'
+import type { User } from '~~/lib/common/generated/gql/graphql'
 
 defineProps<{
-  user: UserProfileEditDialogDeleteAccount_UserFragment
+  user: User
 }>()
 
 const showDeleteDialog = ref(false)
diff --git a/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue b/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue
index f9d9bb30bb..8f9f80b627 100644
--- a/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue
+++ b/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue
@@ -46,7 +46,7 @@ import { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'
 import { useForm } from 'vee-validate'
 import type { GenericValidateFunction } from 'vee-validate'
 import { graphql } from '~~/lib/common/generated/gql'
-import type { UserProfileEditDialogDeleteAccount_UserFragment } from '~~/lib/common/generated/gql/graphql'
+import type { User } from '~~/lib/common/generated/gql/graphql'
 import { useDeleteAccount } from '~~/lib/user/composables/management'
 
 graphql(`
@@ -67,7 +67,7 @@ const emit = defineEmits<{
 }>()
 
 const props = defineProps<{
-  user: UserProfileEditDialogDeleteAccount_UserFragment
+  user: User
 }>()
 
 const isOpen = defineModel<boolean>('open', { required: true })
diff --git a/packages/frontend-2/components/settings/user/profile/Details.vue b/packages/frontend-2/components/settings/user/profile/Details.vue
index 77dc05a549..0c73520165 100644
--- a/packages/frontend-2/components/settings/user/profile/Details.vue
+++ b/packages/frontend-2/components/settings/user/profile/Details.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-col gap-y-4">
     <SettingsSectionHeader title="Your details" subheading />
     <div class="grid md:grid-cols-2 pt-4">
-      <div class="flex items-center justify-center">
+      <div class="flex h-full items-center justify-center">
         <SettingsUserProfileEditAvatar :user="user" size="xxl" />
       </div>
       <div class="pt-6 md:pt-0">
@@ -35,10 +35,7 @@
 <script setup lang="ts">
 import { debounce } from 'lodash-es'
 import { graphql } from '~~/lib/common/generated/gql'
-import type {
-  UserProfileEditDialogBio_UserFragment,
-  UserUpdateInput
-} from '~~/lib/common/generated/gql/graphql'
+import type { User, UserUpdateInput } from '~~/lib/common/generated/gql/graphql'
 import { isRequired, isStringOfLength } from '~~/lib/common/helpers/validation'
 import { useUpdateUserProfile } from '~~/lib/user/composables/management'
 
@@ -53,7 +50,7 @@ graphql(`
 `)
 
 const props = defineProps<{
-  user: UserProfileEditDialogBio_UserFragment
+  user: User
 }>()
 
 const { mutate } = useUpdateUserProfile()
diff --git a/packages/frontend-2/components/settings/user/profile/EditAvatar.vue b/packages/frontend-2/components/settings/user/profile/EditAvatar.vue
index b1656d5a0c..32d5713232 100644
--- a/packages/frontend-2/components/settings/user/profile/EditAvatar.vue
+++ b/packages/frontend-2/components/settings/user/profile/EditAvatar.vue
@@ -10,7 +10,7 @@
   />
 </template>
 <script setup lang="ts">
-import type { UserProfileEditDialogAvatar_UserFragment } from '~~/lib/common/generated/gql/graphql'
+import type { User } from '~~/lib/common/generated/gql/graphql'
 import { graphql } from '~~/lib/common/generated/gql'
 import { useUpdateUserProfile } from '~~/lib/user/composables/management'
 import type { MaybeNullOrUndefined } from '@speckle/shared'
@@ -25,7 +25,7 @@ graphql(`
 `)
 
 const props = defineProps<{
-  user: UserProfileEditDialogAvatar_UserFragment
+  user: User
   size: UserAvatarSize
 }>()
 

From 74655d8b4ffc2219e09148470edbfc13175e7c62 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Fri, 19 Jul 2024 15:39:33 +0200
Subject: [PATCH 72/77] Remove leftover comment

---
 .../frontend-2/components/settings/server/ActiveUsers.vue   | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/frontend-2/components/settings/server/ActiveUsers.vue b/packages/frontend-2/components/settings/server/ActiveUsers.vue
index d93c2a4f8b..a3246adac5 100644
--- a/packages/frontend-2/components/settings/server/ActiveUsers.vue
+++ b/packages/frontend-2/components/settings/server/ActiveUsers.vue
@@ -204,12 +204,6 @@ const infiniteLoad = async (state: InfiniteLoaderState) => {
   }
 }
 
-// const searchUpdateHandler = (value: string) => {
-//   searchString.value = value
-// }
-
-// const debounceSearchUpdate = debounce(searchUpdateHandler, 500)
-
 const calculateLoaderId = () => {
   infiniteLoaderId.value = resultVariables.value?.query || ''
 }

From f66213c7e26544bff1cac2156a9399403971efec Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Fri, 19 Jul 2024 22:29:17 +0200
Subject: [PATCH 73/77] Small reactivity fix

---
 packages/frontend-2/components/header/NavUserMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index 5346761309..846dbfe85f 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -130,7 +130,7 @@
     <SettingsServerUserInviteDialog v-model:open="showInviteDialog" />
     <SettingsDialog
       v-model:open="showSettingsDialog"
-      :target-menu-item="settingsDialogTarget"
+      v-model:target-menu-item="settingsDialogTarget"
     />
   </div>
 </template>

From d987ff085bbdaf63834187e7fd41ab9e31566473 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Sat, 20 Jul 2024 22:58:26 +0200
Subject: [PATCH 74/77] Moved scrollclasses to apply to children, so it reset
 when component changes

---
 .../frontend-2/components/settings/Dialog.vue |  12 +-
 .../settings/server/ActiveUsers.vue           | 200 +++----
 .../components/settings/server/General.vue    | 134 ++---
 .../settings/server/PendingInvitations.vue    | 166 +++---
 .../components/settings/server/Projects.vue   | 193 +++----
 .../components/settings/user/Developer.vue    | 514 +++++++++---------
 .../settings/user/Notifications.vue           |  92 ++--
 .../components/settings/user/Profile.vue      |  18 +-
 8 files changed, 674 insertions(+), 655 deletions(-)

diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 4ae99633d2..e2196149e1 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -46,17 +46,15 @@
           </LayoutSidebarMenuGroup>
         </LayoutSidebarMenu>
       </LayoutSidebar>
-      <main
+      <component
+        :is="selectedMenuItem.component"
         v-if="selectedMenuItem"
         :class="[
-          'bg-foundation md:p-6 md:px-10 md:py-12 w-full md:bg-foundation',
+          'bg-foundation md:px-10 md:py-12 md:bg-foundation w-full',
           !isMobile && 'simple-scrollbar overflow-y-auto flex-1'
         ]"
-      >
-        <div class="pb-6">
-          <component :is="selectedMenuItem.component" :user="user" />
-        </div>
-      </main>
+        :user="user"
+      />
     </div>
   </LayoutDialog>
 </template>
diff --git a/packages/frontend-2/components/settings/server/ActiveUsers.vue b/packages/frontend-2/components/settings/server/ActiveUsers.vue
index a3246adac5..01fddfdc7b 100644
--- a/packages/frontend-2/components/settings/server/ActiveUsers.vue
+++ b/packages/frontend-2/components/settings/server/ActiveUsers.vue
@@ -1,105 +1,107 @@
 <template>
-  <div class="md:max-w-5xl md:mx-auto">
-    <SettingsSectionHeader title="Active users" text="Manage server members" />
-    <div class="flex flex-col-reverse md:justify-between md:flex-row md:gap-x-4">
-      <div class="relative w-full md:max-w-md mt-6 md:mt-0">
-        <FormTextInput
-          name="search"
-          :custom-icon="MagnifyingGlassIcon"
-          color="foundation"
-          full-width
-          search
-          :show-clear="!!search"
-          placeholder="Search users"
-          class="rounded-md border border-outline-3"
-          :model-value="bind.modelValue.value"
-          v-on="on"
-        />
+  <section>
+    <div class="md:max-w-5xl md:mx-auto pb-6 md:pb-0">
+      <SettingsSectionHeader title="Active users" text="Manage server members" />
+      <div class="flex flex-col-reverse md:justify-between md:flex-row md:gap-x-4">
+        <div class="relative w-full md:max-w-md mt-6 md:mt-0">
+          <FormTextInput
+            name="search"
+            :custom-icon="MagnifyingGlassIcon"
+            color="foundation"
+            full-width
+            search
+            :show-clear="!!search"
+            placeholder="Search users"
+            class="rounded-md border border-outline-3"
+            :model-value="bind.modelValue.value"
+            v-on="on"
+          />
+        </div>
+        <FormButton :icon-left="UserPlusIcon" @click="toggleInviteDialog">
+          Invite
+        </FormButton>
       </div>
-      <FormButton :icon-left="UserPlusIcon" @click="toggleInviteDialog">
-        Invite
-      </FormButton>
-    </div>
 
-    <LayoutTable
-      class="mt-6 md:mt-8"
-      :columns="[
-        { id: 'name', header: 'Name', classes: 'col-span-3 truncate' },
-        { id: 'email', header: 'Email', classes: 'col-span-3 truncate' },
-        { id: 'emailState', header: 'Email state', classes: 'col-span-2' },
-        { id: 'company', header: 'Company', classes: 'col-span-2 truncate' },
-        { id: 'role', header: 'Role', classes: 'col-span-2' }
-      ]"
-      :items="users"
-      :buttons="[{ icon: TrashIcon, label: 'Delete', action: openUserDeleteDialog }]"
-    >
-      <template #name="{ item }">
-        <div class="flex items-center gap-2">
-          <UserAvatar v-if="isUser(item)" :user="item" />
-          <span class="truncate">
-            {{ isUser(item) ? item.name : '' }}
-          </span>
-        </div>
-      </template>
-
-      <template #email="{ item }">
-        {{ isUser(item) ? item.email : '' }}
-      </template>
-
-      <template #emailState="{ item }">
-        <div class="flex items-center gap-2 select-none">
-          <template v-if="isUser(item) && item.verified">
-            <CheckCircleIcon class="h-4 w-4 text-primary" />
-            <span>Verified</span>
-          </template>
-          <template v-else>
-            <ExclamationCircleIcon class="h-4 w-4 text-danger" />
-            <span>Not verified</span>
-          </template>
-        </div>
-      </template>
-
-      <template #company="{ item }">
-        {{ isUser(item) ? item.company : '' }}
-      </template>
-
-      <template #role="{ item }">
-        <FormSelectServerRoles
-          :allow-guest="isGuestMode"
-          allow-admin
-          allow-archived
-          :model-value="isUser(item) ? item.role : undefined"
-          :disabled="isUser(item) && isCurrentUser(item)"
-          fully-control-value
-          @update:model-value="(newRoleValue) => isUser(item) && !isArray(newRoleValue) && newRoleValue && openChangeUserRoleDialog(item, newRoleValue as ServerRoles)"
-        />
-      </template>
-    </LayoutTable>
-
-    <CommonLoadingBar v-if="loading && !users?.length" loading />
-
-    <InfiniteLoading
-      v-if="users?.length"
-      :settings="{ identifier: infiniteLoaderId }"
-      class="-mt-24 -mb-24"
-      @infinite="infiniteLoad"
-    />
-
-    <SettingsServerUserDeleteDialog
-      v-model:open="showUserDeleteDialog"
-      :user="userToModify"
-      :result-variables="resultVariables"
-    />
-
-    <SettingsServerUserChangeRoleDialog
-      v-model:open="showChangeUserRoleDialog"
-      :user="userToModify"
-      :old-role="oldRole"
-      :new-role="newRole"
-      hide-closer
-    />
-    <SettingsServerUserInviteDialog v-model:open="showInviteDialog" />
-  </div>
+      <LayoutTable
+        class="mt-6 md:mt-8"
+        :columns="[
+          { id: 'name', header: 'Name', classes: 'col-span-3 truncate' },
+          { id: 'email', header: 'Email', classes: 'col-span-3 truncate' },
+          { id: 'emailState', header: 'Email state', classes: 'col-span-2' },
+          { id: 'company', header: 'Company', classes: 'col-span-2 truncate' },
+          { id: 'role', header: 'Role', classes: 'col-span-2' }
+        ]"
+        :items="users"
+        :buttons="[{ icon: TrashIcon, label: 'Delete', action: openUserDeleteDialog }]"
+      >
+        <template #name="{ item }">
+          <div class="flex items-center gap-2">
+            <UserAvatar v-if="isUser(item)" :user="item" />
+            <span class="truncate">
+              {{ isUser(item) ? item.name : '' }}
+            </span>
+          </div>
+        </template>
+
+        <template #email="{ item }">
+          {{ isUser(item) ? item.email : '' }}
+        </template>
+
+        <template #emailState="{ item }">
+          <div class="flex items-center gap-2 select-none">
+            <template v-if="isUser(item) && item.verified">
+              <CheckCircleIcon class="h-4 w-4 text-primary" />
+              <span>Verified</span>
+            </template>
+            <template v-else>
+              <ExclamationCircleIcon class="h-4 w-4 text-danger" />
+              <span>Not verified</span>
+            </template>
+          </div>
+        </template>
+
+        <template #company="{ item }">
+          {{ isUser(item) ? item.company : '' }}
+        </template>
+
+        <template #role="{ item }">
+          <FormSelectServerRoles
+            :allow-guest="isGuestMode"
+            allow-admin
+            allow-archived
+            :model-value="isUser(item) ? item.role : undefined"
+            :disabled="isUser(item) && isCurrentUser(item)"
+            fully-control-value
+            @update:model-value="(newRoleValue) => isUser(item) && !isArray(newRoleValue) && newRoleValue && openChangeUserRoleDialog(item, newRoleValue as ServerRoles)"
+          />
+        </template>
+      </LayoutTable>
+
+      <CommonLoadingBar v-if="loading && !users?.length" loading />
+
+      <InfiniteLoading
+        v-if="users?.length"
+        :settings="{ identifier: infiniteLoaderId }"
+        class="-mt-24 -mb-24"
+        @infinite="infiniteLoad"
+      />
+
+      <SettingsServerUserDeleteDialog
+        v-model:open="showUserDeleteDialog"
+        :user="userToModify"
+        :result-variables="resultVariables"
+      />
+
+      <SettingsServerUserChangeRoleDialog
+        v-model:open="showChangeUserRoleDialog"
+        :user="userToModify"
+        :old-role="oldRole"
+        :new-role="newRole"
+        hide-closer
+      />
+      <SettingsServerUserInviteDialog v-model:open="showInviteDialog" />
+    </div>
+  </section>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/frontend-2/components/settings/server/General.vue b/packages/frontend-2/components/settings/server/General.vue
index 54213a50cb..df83fe5f4e 100644
--- a/packages/frontend-2/components/settings/server/General.vue
+++ b/packages/frontend-2/components/settings/server/General.vue
@@ -1,76 +1,78 @@
 <template>
-  <div class="md:max-w-xl md:mx-auto">
-    <SettingsSectionHeader title="General" text="Manage general server information" />
-    <div class="flex flex-col space-y-6">
-      <SettingsSectionHeader title="Server details" subheading />
-      <form class="flex flex-col gap-2" @submit="onSubmit">
-        <div class="flex flex-col gap-4">
-          <FormTextInput
-            v-model="name"
-            label="Public name"
-            name="serverName"
-            color="foundation"
-            placeholder="Server name"
-            show-label
-            :show-required="true"
-            :rules="requiredRule"
-            type="text"
-          />
-          <FormTextArea
-            v-model="description"
-            color="foundation"
-            label="Description"
-            name="description"
-            placeholder="Description"
-            show-label
-          />
-          <FormTextInput
-            v-model="company"
-            color="foundation"
-            label="Owner"
-            name="owner"
-            placeholder="Owner"
-            show-label
-          />
-          <FormTextInput
-            v-model="adminContact"
-            color="foundation"
-            label="Admin email"
-            name="adminEmail"
-            placeholder="Admin email"
-            show-label
-            type="email"
-          />
-          <FormTextInput
-            v-model="termsOfService"
-            color="foundation"
-            label="URL to the Terms of Service"
-            name="terms"
-            show-label
-          />
-          <div class="text-sm flex flex-col gap-2 mt-2">
-            <FormCheckbox
-              v-model="inviteOnly"
-              label="Invite only mode - Only users with an invitation will be able to join"
-              name="inviteOnly"
+  <section>
+    <div class="md:max-w-xl md:mx-auto pb-6 md:pb-0">
+      <SettingsSectionHeader title="General" text="Manage general server information" />
+      <div class="flex flex-col space-y-6">
+        <SettingsSectionHeader title="Server details" subheading />
+        <form class="flex flex-col gap-2" @submit="onSubmit">
+          <div class="flex flex-col gap-4">
+            <FormTextInput
+              v-model="name"
+              label="Public name"
+              name="serverName"
+              color="foundation"
+              placeholder="Server name"
               show-label
+              :show-required="true"
+              :rules="requiredRule"
+              type="text"
             />
-            <FormCheckbox
-              v-model="guestModeEnabled"
-              label="Guest mode - Enables the 'Guest' server role, which allows users to only contribute to projects that they're invited to"
-              name="guestModeEnabled"
+            <FormTextArea
+              v-model="description"
+              color="foundation"
+              label="Description"
+              name="description"
+              placeholder="Description"
               show-label
             />
+            <FormTextInput
+              v-model="company"
+              color="foundation"
+              label="Owner"
+              name="owner"
+              placeholder="Owner"
+              show-label
+            />
+            <FormTextInput
+              v-model="adminContact"
+              color="foundation"
+              label="Admin email"
+              name="adminEmail"
+              placeholder="Admin email"
+              show-label
+              type="email"
+            />
+            <FormTextInput
+              v-model="termsOfService"
+              color="foundation"
+              label="URL to the Terms of Service"
+              name="terms"
+              show-label
+            />
+            <div class="text-sm flex flex-col gap-2 mt-2">
+              <FormCheckbox
+                v-model="inviteOnly"
+                label="Invite only mode - Only users with an invitation will be able to join"
+                name="inviteOnly"
+                show-label
+              />
+              <FormCheckbox
+                v-model="guestModeEnabled"
+                label="Guest mode - Enables the 'Guest' server role, which allows users to only contribute to projects that they're invited to"
+                name="guestModeEnabled"
+                show-label
+              />
+            </div>
+            <div>
+              <FormButton color="default" @click="onSubmit">Save changes</FormButton>
+            </div>
           </div>
-          <div>
-            <FormButton color="default" @click="onSubmit">Save changes</FormButton>
-          </div>
-        </div>
-      </form>
+        </form>
+      </div>
+      <hr class="my-6 md:my-10" />
+      <SettingsServerGeneralVersion />
     </div>
-    <hr class="my-6 md:my-10" />
-    <SettingsServerGeneralVersion />
-  </div>
+  </section>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/frontend-2/components/settings/server/PendingInvitations.vue b/packages/frontend-2/components/settings/server/PendingInvitations.vue
index 0bc2a3b60d..4217fa251b 100644
--- a/packages/frontend-2/components/settings/server/PendingInvitations.vue
+++ b/packages/frontend-2/components/settings/server/PendingInvitations.vue
@@ -1,88 +1,90 @@
 <template>
-  <div class="md:max-w-5xl md:mx-auto">
-    <SettingsSectionHeader
-      title="Pending invitations"
-      text="And overview of all your pending invititations"
-    />
-    <div class="flex flex-col-reverse md:flex-row">
-      <FormTextInput
-        name="search"
-        :custom-icon="MagnifyingGlassIcon"
-        color="foundation"
-        full-width
-        search
-        :show-clear="!!search"
-        placeholder="Search invitations"
-        class="rounded-md border border-outline-3 md:max-w-md mt-6 md:mt-0"
-        :model-value="bind.modelValue.value"
-        v-on="on"
+  <section>
+    <div class="md:max-w-5xl md:mx-auto pb-6 md:pb-0">
+      <SettingsSectionHeader
+        title="Pending invitations"
+        text="And overview of all your pending invititations"
       />
-      <FormButton :icon-left="UserPlusIcon" @click="toggleInviteDialog">
-        Invite
-      </FormButton>
-    </div>
-
-    <LayoutTable
-      class="mt-6 md:mt-8"
-      :columns="[
-        { id: 'email', header: 'Email', classes: 'col-span-5 truncate' },
-        { id: 'invitedBy', header: 'Invited by', classes: 'col-span-4' },
-        { id: 'resend', header: 'Resend', classes: 'col-span-3' }
-      ]"
-      :items="invites"
-      :buttons="[
-        { icon: TrashIcon, label: 'Delete', action: openDeleteInvitationDialog }
-      ]"
-    >
-      <template #email="{ item }">
-        {{ isInvite(item) ? item.email : '' }}
-      </template>
-
-      <template #invitedBy="{ item }">
-        <div class="flex items-center gap-2 py-1">
-          <UserAvatar v-if="isInvite(item)" :user="item.invitedBy" />
-          <span class="truncate">
-            {{ isInvite(item) ? item.invitedBy.name : '' }}
-          </span>
-        </div>
-      </template>
-
-      <template #resend="{ item }">
-        <FormButton
-          :link="true"
-          :class="{
-            'font-semibold': true,
-            'text-primary': !successfullyResentInvites.includes(item.id),
-            'text-foreground': successfullyResentInvites.includes(item.id)
-          }"
-          :disabled="successfullyResentInvites.includes(item.id)"
-          @click="resendInvitation(item as InviteItem)"
-        >
-          {{
-            successfullyResentInvites.includes(item.id)
-              ? 'Invitation resent'
-              : 'Resend invitation'
-          }}
+      <div class="flex flex-col-reverse md:flex-row">
+        <FormTextInput
+          name="search"
+          :custom-icon="MagnifyingGlassIcon"
+          color="foundation"
+          full-width
+          search
+          :show-clear="!!search"
+          placeholder="Search invitations"
+          class="rounded-md border border-outline-3 md:max-w-md mt-6 md:mt-0"
+          :model-value="bind.modelValue.value"
+          v-on="on"
+        />
+        <FormButton :icon-left="UserPlusIcon" @click="toggleInviteDialog">
+          Invite
         </FormButton>
-      </template>
-    </LayoutTable>
-
-    <SettingsServerPendingInvitationsDeleteDialog
-      v-model:open="showDeleteInvitationDialog"
-      :invite="inviteToModify"
-      :result-variables="resultVariables"
-    />
-
-    <CommonLoadingBar v-if="loading && !invites?.length" loading />
-
-    <InfiniteLoading
-      v-if="invites?.length"
-      :settings="{ identifier: infiniteLoaderId }"
-      class="py-4"
-      @infinite="infiniteLoad"
-    />
-    <SettingsServerUserInviteDialog v-model:open="showInviteDialog" />
-  </div>
+      </div>
+
+      <LayoutTable
+        class="mt-6 md:mt-8"
+        :columns="[
+          { id: 'email', header: 'Email', classes: 'col-span-5 truncate' },
+          { id: 'invitedBy', header: 'Invited by', classes: 'col-span-4' },
+          { id: 'resend', header: 'Resend', classes: 'col-span-3' }
+        ]"
+        :items="invites"
+        :buttons="[
+          { icon: TrashIcon, label: 'Delete', action: openDeleteInvitationDialog }
+        ]"
+      >
+        <template #email="{ item }">
+          {{ isInvite(item) ? item.email : '' }}
+        </template>
+
+        <template #invitedBy="{ item }">
+          <div class="flex items-center gap-2 py-1">
+            <UserAvatar v-if="isInvite(item)" :user="item.invitedBy" />
+            <span class="truncate">
+              {{ isInvite(item) ? item.invitedBy.name : '' }}
+            </span>
+          </div>
+        </template>
+
+        <template #resend="{ item }">
+          <FormButton
+            :link="true"
+            :class="{
+              'font-semibold': true,
+              'text-primary': !successfullyResentInvites.includes(item.id),
+              'text-foreground': successfullyResentInvites.includes(item.id)
+            }"
+            :disabled="successfullyResentInvites.includes(item.id)"
+            @click="resendInvitation(item as InviteItem)"
+          >
+            {{
+              successfullyResentInvites.includes(item.id)
+                ? 'Invitation resent'
+                : 'Resend invitation'
+            }}
+          </FormButton>
+        </template>
+      </LayoutTable>
+
+      <SettingsServerPendingInvitationsDeleteDialog
+        v-model:open="showDeleteInvitationDialog"
+        :invite="inviteToModify"
+        :result-variables="resultVariables"
+      />
+
+      <CommonLoadingBar v-if="loading && !invites?.length" loading />
+
+      <InfiniteLoading
+        v-if="invites?.length"
+        :settings="{ identifier: infiniteLoaderId }"
+        class="py-4"
+        @infinite="infiniteLoad"
+      />
+      <SettingsServerUserInviteDialog v-model:open="showInviteDialog" />
+    </div>
+  </section>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/frontend-2/components/settings/server/Projects.vue b/packages/frontend-2/components/settings/server/Projects.vue
index 096c4a7077..9a95974349 100644
--- a/packages/frontend-2/components/settings/server/Projects.vue
+++ b/packages/frontend-2/components/settings/server/Projects.vue
@@ -1,98 +1,107 @@
 <template>
-  <div class="md:max-w-5xl md:mx-auto">
-    <SettingsSectionHeader title="Projects" text="Manage projects across the server" />
-    <div class="flex flex-col-reverse md:justify-between md:flex-row md:gap-x-4">
-      <div class="relative w-full md:max-w-md mt-6 md:mt-0">
-        <FormTextInput
-          name="search"
-          :custom-icon="MagnifyingGlassIcon"
-          color="foundation"
-          full-width
-          search
-          :show-clear="!!search"
-          placeholder="Search projects"
-          class="rounded-md border border-outline-3 md:max-w-md mt-6 md:mt-0"
-          :model-value="bind.modelValue.value"
-          v-on="on"
-        />
-      </div>
-      <FormButton :icon-left="PlusIcon" @click="openNewProject = true">New</FormButton>
-    </div>
-
-    <LayoutTable
-      class="mt-6 md:mt-8"
-      :columns="[
-        { id: 'name', header: 'Name', classes: 'col-span-3 truncate' },
-        { id: 'type', header: 'Type', classes: 'col-span-1' },
-        { id: 'created', header: 'Created', classes: 'col-span-2' },
-        { id: 'modified', header: 'Modified', classes: 'col-span-2' },
-        { id: 'models', header: 'Models', classes: 'col-span-1' },
-        { id: 'versions', header: 'Versions', classes: 'col-span-1' },
-        { id: 'contributors', header: 'Contributors', classes: 'col-span-2' }
-      ]"
-      :items="projects"
-      :buttons="[{ icon: TrashIcon, label: 'Delete', action: openProjectDeleteDialog }]"
-      :on-row-click="handleProjectClick"
-    >
-      <template #name="{ item }">
-        {{ isProject(item) ? item.name : '' }}
-      </template>
-
-      <template #type="{ item }">
-        <div class="capitalize">
-          {{ isProject(item) ? item.visibility.toLowerCase() : '' }}
-        </div>
-      </template>
-
-      <template #created="{ item }">
-        <div class="text-xs">
-          {{ formattedFullDate(item.createdAt) }}
-        </div>
-      </template>
-
-      <template #modified="{ item }">
-        <div class="text-xs">
-          {{ formattedFullDate(item.updatedAt) }}
+  <section>
+    <div class="md:max-w-5xl md:mx-auto pb-6 md:pb-0">
+      <SettingsSectionHeader
+        title="Projects"
+        text="Manage projects across the server"
+      />
+      <div class="flex flex-col-reverse md:justify-between md:flex-row md:gap-x-4">
+        <div class="relative w-full md:max-w-md mt-6 md:mt-0">
+          <FormTextInput
+            name="search"
+            :custom-icon="MagnifyingGlassIcon"
+            color="foundation"
+            full-width
+            search
+            :show-clear="!!search"
+            placeholder="Search projects"
+            class="rounded-md border border-outline-3 md:max-w-md mt-6 md:mt-0"
+            :model-value="bind.modelValue.value"
+            v-on="on"
+          />
         </div>
-      </template>
-
-      <template #models="{ item }">
-        <div class="text-xs">
-          {{ isProject(item) ? item.models.totalCount : '' }}
-        </div>
-      </template>
-
-      <template #versions="{ item }">
-        <div class="text-xs">
-          {{ isProject(item) ? item.versions.totalCount : '' }}
-        </div>
-      </template>
+        <FormButton :icon-left="PlusIcon" @click="openNewProject = true">
+          New
+        </FormButton>
+      </div>
 
-      <template #contributors="{ item }">
-        <div v-if="isProject(item)" class="py-1">
-          <UserAvatarGroup :users="item.team.map((t) => t.user)" :max-count="3" />
-        </div>
-      </template>
-    </LayoutTable>
-
-    <CommonLoadingBar v-if="loading && !projects?.length" loading />
-
-    <InfiniteLoading
-      v-if="projects?.length"
-      :settings="{ identifier: infiniteLoaderId }"
-      class="py-4"
-      @infinite="infiniteLoad"
-    />
-
-    <SettingsServerProjectDeleteDialog
-      v-model:open="showProjectDeleteDialog"
-      :project="projectToModify"
-      title="Delete project"
-      :result-variables="resultVariables"
-    />
-
-    <ProjectsAddDialog v-model:open="openNewProject" />
-  </div>
+      <LayoutTable
+        class="mt-6 md:mt-8"
+        :columns="[
+          { id: 'name', header: 'Name', classes: 'col-span-3 truncate' },
+          { id: 'type', header: 'Type', classes: 'col-span-1' },
+          { id: 'created', header: 'Created', classes: 'col-span-2' },
+          { id: 'modified', header: 'Modified', classes: 'col-span-2' },
+          { id: 'models', header: 'Models', classes: 'col-span-1' },
+          { id: 'versions', header: 'Versions', classes: 'col-span-1' },
+          { id: 'contributors', header: 'Contributors', classes: 'col-span-2' }
+        ]"
+        :items="projects"
+        :buttons="[
+          { icon: TrashIcon, label: 'Delete', action: openProjectDeleteDialog }
+        ]"
+        :on-row-click="handleProjectClick"
+      >
+        <template #name="{ item }">
+          {{ isProject(item) ? item.name : '' }}
+        </template>
+
+        <template #type="{ item }">
+          <div class="capitalize">
+            {{ isProject(item) ? item.visibility.toLowerCase() : '' }}
+          </div>
+        </template>
+
+        <template #created="{ item }">
+          <div class="text-xs">
+            {{ formattedFullDate(item.createdAt) }}
+          </div>
+        </template>
+
+        <template #modified="{ item }">
+          <div class="text-xs">
+            {{ formattedFullDate(item.updatedAt) }}
+          </div>
+        </template>
+
+        <template #models="{ item }">
+          <div class="text-xs">
+            {{ isProject(item) ? item.models.totalCount : '' }}
+          </div>
+        </template>
+
+        <template #versions="{ item }">
+          <div class="text-xs">
+            {{ isProject(item) ? item.versions.totalCount : '' }}
+          </div>
+        </template>
+
+        <template #contributors="{ item }">
+          <div v-if="isProject(item)" class="py-1">
+            <UserAvatarGroup :users="item.team.map((t) => t.user)" :max-count="3" />
+          </div>
+        </template>
+      </LayoutTable>
+
+      <CommonLoadingBar v-if="loading && !projects?.length" loading />
+
+      <InfiniteLoading
+        v-if="projects?.length"
+        :settings="{ identifier: infiniteLoaderId }"
+        class="py-4"
+        @infinite="infiniteLoad"
+      />
+
+      <SettingsServerProjectDeleteDialog
+        v-model:open="showProjectDeleteDialog"
+        :project="projectToModify"
+        title="Delete project"
+        :result-variables="resultVariables"
+      />
+
+      <ProjectsAddDialog v-model:open="openNewProject" />
+    </div>
+  </section>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/frontend-2/components/settings/user/Developer.vue b/packages/frontend-2/components/settings/user/Developer.vue
index e3af5fd508..bbc8140a0c 100644
--- a/packages/frontend-2/components/settings/user/Developer.vue
+++ b/packages/frontend-2/components/settings/user/Developer.vue
@@ -1,268 +1,270 @@
 <template>
-  <div class="md:max-w-5xl md:mx-auto">
-    <div class="flex flex-col">
-      <SettingsSectionHeader
-        title="Developer settings"
-        text="Manage your tokens and authorized app"
-      />
-      <div class="flex flex-col gap-6 md:gap-12">
-        <div class="flex flex-col">
-          <SettingsSectionHeader
-            title="Explore GraphQL"
-            class="md:gap-0"
-            subheading
-            :buttons="[
-              {
-                props: {
-                  color: 'secondary',
-                  target: '_blank',
-                  external: true,
-                  iconLeft: BookOpenIcon
+  <section>
+    <div class="md:max-w-5xl md:mx-auto pb-6 md:pb-0">
+      <div class="flex flex-col">
+        <SettingsSectionHeader
+          title="Developer settings"
+          text="Manage your tokens and authorized app"
+        />
+        <div class="flex flex-col gap-6 md:gap-12">
+          <div class="flex flex-col">
+            <SettingsSectionHeader
+              title="Explore GraphQL"
+              class="md:gap-0"
+              subheading
+              :buttons="[
+                {
+                  props: {
+                    color: 'secondary',
+                    target: '_blank',
+                    external: true,
+                    iconLeft: BookOpenIcon
+                  },
+                  onClick: goToExplorer,
+                  label: 'Open docs'
+                }
+              ]"
+            />
+          </div>
+          <hr />
+          <div class="flex flex-col gap-4">
+            <SettingsSectionHeader
+              title="Access tokens"
+              subheading
+              :buttons="[
+                {
+                  props: {
+                    color: 'secondary',
+                    to: 'https://speckle.guide/dev/tokens.html',
+                    iconLeft: BookOpenIcon,
+                    target: '_blank',
+                    external: true
+                  },
+                  label: 'Open docs'
                 },
-                onClick: goToExplorer,
-                label: 'Open docs'
-              }
-            ]"
-          />
-        </div>
-        <hr />
-        <div class="flex flex-col gap-4">
-          <SettingsSectionHeader
-            title="Access tokens"
-            subheading
-            :buttons="[
-              {
-                props: {
-                  color: 'secondary',
-                  to: 'https://speckle.guide/dev/tokens.html',
-                  iconLeft: BookOpenIcon,
-                  target: '_blank',
-                  external: true
-                },
-                label: 'Open docs'
-              },
-              {
-                props: {
-                  iconLeft: PlusIcon,
-                  onClick: openCreateTokenDialog
-                },
-                label: 'New token'
-              }
-            ]"
-          >
-            <p class="text-sm pt-6 md:pt-4">
-              Personal Access Tokens can be used to access the Speckle API on this
-              server; they function like ordinary OAuth access tokens. Use them in your
-              scripts or apps!
-              <strong>
-                Treat them like a password: do not post them anywhere where they could
-                be accessed by others (e.g., public repos).
-              </strong>
-            </p>
-          </SettingsSectionHeader>
-          <LayoutTable
-            :columns="[
-              { id: 'name', header: 'Name', classes: 'col-span-3 truncate' },
-              { id: 'id', header: 'ID', classes: 'col-span-2' },
-              {
-                id: 'scope',
-                header: 'Scope',
-                classes: 'col-span-7 whitespace-break-spaces text-xs'
-              }
-            ]"
-            :items="tokens"
-            :buttons="[
-              {
-                icon: TrashIcon,
-                label: 'Delete',
-                action: openDeleteDialog,
-                textColor: 'danger'
-              }
-            ]"
-          >
-            <template #name="{ item }">
-              {{ item.name }}
-            </template>
-            <template #id="{ item }">
-              <span class="rounded text-xs font-mono bg-foundation-page p-2">
-                {{ item.id }}
-              </span>
-            </template>
+                {
+                  props: {
+                    iconLeft: PlusIcon,
+                    onClick: openCreateTokenDialog
+                  },
+                  label: 'New token'
+                }
+              ]"
+            >
+              <p class="text-sm pt-6 md:pt-4">
+                Personal Access Tokens can be used to access the Speckle API on this
+                server; they function like ordinary OAuth access tokens. Use them in
+                your scripts or apps!
+                <strong>
+                  Treat them like a password: do not post them anywhere where they could
+                  be accessed by others (e.g., public repos).
+                </strong>
+              </p>
+            </SettingsSectionHeader>
+            <LayoutTable
+              :columns="[
+                { id: 'name', header: 'Name', classes: 'col-span-3 truncate' },
+                { id: 'id', header: 'ID', classes: 'col-span-2' },
+                {
+                  id: 'scope',
+                  header: 'Scope',
+                  classes: 'col-span-7 whitespace-break-spaces text-xs'
+                }
+              ]"
+              :items="tokens"
+              :buttons="[
+                {
+                  icon: TrashIcon,
+                  label: 'Delete',
+                  action: openDeleteDialog,
+                  textColor: 'danger'
+                }
+              ]"
+            >
+              <template #name="{ item }">
+                {{ item.name }}
+              </template>
+              <template #id="{ item }">
+                <span class="rounded text-xs font-mono bg-foundation-page p-2">
+                  {{ item.id }}
+                </span>
+              </template>
 
-            <template #scope="{ item }">
-              {{ getItemScopes(item) }}
-            </template>
-          </LayoutTable>
-        </div>
-        <hr />
-        <div class="flex flex-col gap-4">
-          <SettingsSectionHeader
-            subheading
-            title="Applications"
-            :buttons="[
-              {
-                props: {
-                  color: 'secondary',
-                  to: 'https://speckle.guide/dev/apps.html',
-                  target: '_blank',
-                  external: true,
-                  iconLeft: BookOpenIcon
+              <template #scope="{ item }">
+                {{ getItemScopes(item) }}
+              </template>
+            </LayoutTable>
+          </div>
+          <hr />
+          <div class="flex flex-col gap-4">
+            <SettingsSectionHeader
+              subheading
+              title="Applications"
+              :buttons="[
+                {
+                  props: {
+                    color: 'secondary',
+                    to: 'https://speckle.guide/dev/apps.html',
+                    target: '_blank',
+                    external: true,
+                    iconLeft: BookOpenIcon
+                  },
+                  label: 'Open docs'
                 },
-                label: 'Open docs'
-              },
-              {
-                props: {
-                  onClick: openCreateApplicationDialog,
-                  iconLeft: PlusIcon
+                {
+                  props: {
+                    onClick: openCreateApplicationDialog,
+                    iconLeft: PlusIcon
+                  },
+                  label: 'New application'
+                }
+              ]"
+            >
+              <p class="text-sm pt-6 md:pt-4">
+                Register and manage third-party Speckle Apps that, once authorised by a
+                user on this server, can act on their behalf.
+              </p>
+            </SettingsSectionHeader>
+            <LayoutTable
+              :columns="[
+                { id: 'name', header: 'Name', classes: 'col-span-3' },
+                { id: 'id', header: 'ID', classes: 'col-span-2' },
+                {
+                  id: 'scope',
+                  header: 'Scope',
+                  classes: 'col-span-7 whitespace-break-spaces text-xs'
+                }
+              ]"
+              :items="applications"
+              :buttons="[
+                {
+                  icon: LockOpenIcon,
+                  label: 'Reveal Secret',
+                  action: openRevealSecretDialog,
+                  textColor: 'primary'
                 },
-                label: 'New application'
-              }
-            ]"
-          >
-            <p class="text-sm pt-6 md:pt-4">
-              Register and manage third-party Speckle Apps that, once authorised by a
-              user on this server, can act on their behalf.
-            </p>
-          </SettingsSectionHeader>
-          <LayoutTable
-            :columns="[
-              { id: 'name', header: 'Name', classes: 'col-span-3' },
-              { id: 'id', header: 'ID', classes: 'col-span-2' },
-              {
-                id: 'scope',
-                header: 'Scope',
-                classes: 'col-span-7 whitespace-break-spaces text-xs'
-              }
-            ]"
-            :items="applications"
-            :buttons="[
-              {
-                icon: LockOpenIcon,
-                label: 'Reveal Secret',
-                action: openRevealSecretDialog,
-                textColor: 'primary'
-              },
-              {
-                icon: PencilIcon,
-                label: 'Edit',
-                action: openEditApplicationDialog,
-                textColor: 'primary'
-              },
-              {
-                icon: TrashIcon,
-                label: 'Delete',
-                action: openDeleteDialog,
-                textColor: 'danger'
-              }
-            ]"
-          >
-            <template #name="{ item }">
-              {{ item.name }}
-            </template>
-            <template #id="{ item }">
-              <span class="rounded text-xs font-mono bg-foundation-page p-2">
-                {{ item.id }}
-              </span>
-            </template>
-
-            <template #scope="{ item }">
-              {{ getItemScopes(item) }}
-            </template>
-          </LayoutTable>
-        </div>
-        <hr />
-        <div class="flex flex-col gap-4">
-          <SettingsSectionHeader
-            subheading
-            title="Authorized Apps"
-            :buttons="[
-              {
-                props: {
-                  color: 'secondary',
-                  to: 'https://speckle.guide/dev/apps.html',
-                  target: '_blank',
-                  external: true,
-                  iconLeft: BookOpenIcon
+                {
+                  icon: PencilIcon,
+                  label: 'Edit',
+                  action: openEditApplicationDialog,
+                  textColor: 'primary'
                 },
-                label: 'Open docs'
-              }
-            ]"
-          >
-            <p class="text-sm pt-6 md:pt-4">
-              Here you can review the apps that you have granted access to. If something
-              looks suspicious, revoke the access.
-            </p>
-          </SettingsSectionHeader>
-          <LayoutTable
-            :columns="[
-              { id: 'name', header: 'Name', classes: 'col-span-3 ' },
-              { id: 'author', header: 'Author', classes: 'col-span-3 ' },
-              {
-                id: 'description',
-                header: 'Description',
-                classes: 'col-span-6 !pt-1.5'
-              }
-            ]"
-            :items="authorizedApps"
-            :buttons="[
-              {
-                icon: XMarkIcon,
-                label: 'Revoke Access',
-                action: openDeleteDialog,
-                textColor: 'danger'
-              }
-            ]"
-            row-items-align="stretch"
-          >
-            <template #name="{ item }">
-              {{ item.name }}
-            </template>
-            <template #author="{ item }">
-              <div class="flex space-x-2 items-center">
-                <template v-if="item.author">
-                  <UserAvatar :user="item.author" />
-                  <span>{{ item.author.name }}</span>
-                </template>
-                <template v-else>
-                  <HeaderLogoBlock minimal no-link />
-                  <span>Speckle</span>
-                </template>
-              </div>
-            </template>
-            <template #description="{ item }">
-              {{ item.description }}
-            </template>
-          </LayoutTable>
+                {
+                  icon: TrashIcon,
+                  label: 'Delete',
+                  action: openDeleteDialog,
+                  textColor: 'danger'
+                }
+              ]"
+            >
+              <template #name="{ item }">
+                {{ item.name }}
+              </template>
+              <template #id="{ item }">
+                <span class="rounded text-xs font-mono bg-foundation-page p-2">
+                  {{ item.id }}
+                </span>
+              </template>
+
+              <template #scope="{ item }">
+                {{ getItemScopes(item) }}
+              </template>
+            </LayoutTable>
+          </div>
+          <hr />
+          <div class="flex flex-col gap-4">
+            <SettingsSectionHeader
+              subheading
+              title="Authorized Apps"
+              :buttons="[
+                {
+                  props: {
+                    color: 'secondary',
+                    to: 'https://speckle.guide/dev/apps.html',
+                    target: '_blank',
+                    external: true,
+                    iconLeft: BookOpenIcon
+                  },
+                  label: 'Open docs'
+                }
+              ]"
+            >
+              <p class="text-sm pt-6 md:pt-4">
+                Here you can review the apps that you have granted access to. If
+                something looks suspicious, revoke the access.
+              </p>
+            </SettingsSectionHeader>
+            <LayoutTable
+              :columns="[
+                { id: 'name', header: 'Name', classes: 'col-span-3 ' },
+                { id: 'author', header: 'Author', classes: 'col-span-3 ' },
+                {
+                  id: 'description',
+                  header: 'Description',
+                  classes: 'col-span-6 !pt-1.5'
+                }
+              ]"
+              :items="authorizedApps"
+              :buttons="[
+                {
+                  icon: XMarkIcon,
+                  label: 'Revoke Access',
+                  action: openDeleteDialog,
+                  textColor: 'danger'
+                }
+              ]"
+              row-items-align="stretch"
+            >
+              <template #name="{ item }">
+                {{ item.name }}
+              </template>
+              <template #author="{ item }">
+                <div class="flex space-x-2 items-center">
+                  <template v-if="item.author">
+                    <UserAvatar :user="item.author" />
+                    <span>{{ item.author.name }}</span>
+                  </template>
+                  <template v-else>
+                    <HeaderLogoBlock minimal no-link />
+                    <span>Speckle</span>
+                  </template>
+                </div>
+              </template>
+              <template #description="{ item }">
+                {{ item.description }}
+              </template>
+            </LayoutTable>
+          </div>
         </div>
-      </div>
 
-      <SettingsUserDeveloperCreateTokenDialog
-        v-model:open="showCreateTokenDialog"
-        @token-created="(token) => handleTokenCreated(token)"
-      />
-      <SettingsUserDeveloperDeleteDialog
-        v-model:open="showDeleteDialog"
-        :item="itemToModify"
-      />
-      <SettingsUserDeveloperCreateEditApplicationDialog
-        v-model:open="showCreateEditApplicationDialog"
-        :application="(itemToModify as ApplicationItem)"
-        @application-created="handleApplicationCreated"
-      />
-      <SettingsUserDeveloperRevealSecretDialog
-        v-model:open="showRevealSecretDialog"
-        :application="itemToModify && 'secret' in itemToModify ? itemToModify : null"
-      />
-      <SettingsUserDeveloperCreateTokenSuccessDialog
-        v-model:open="showCreateTokenSuccessDialog"
-        :token="tokenSuccess"
-      />
-      <SettingsUserDeveloperCreateApplicationSuccessDialog
-        v-model:open="showCreateApplicationSuccessDialog"
-        :application="(itemToModify as ApplicationItem)"
-      />
+        <SettingsUserDeveloperCreateTokenDialog
+          v-model:open="showCreateTokenDialog"
+          @token-created="(token) => handleTokenCreated(token)"
+        />
+        <SettingsUserDeveloperDeleteDialog
+          v-model:open="showDeleteDialog"
+          :item="itemToModify"
+        />
+        <SettingsUserDeveloperCreateEditApplicationDialog
+          v-model:open="showCreateEditApplicationDialog"
+          :application="(itemToModify as ApplicationItem)"
+          @application-created="handleApplicationCreated"
+        />
+        <SettingsUserDeveloperRevealSecretDialog
+          v-model:open="showRevealSecretDialog"
+          :application="itemToModify && 'secret' in itemToModify ? itemToModify : null"
+        />
+        <SettingsUserDeveloperCreateTokenSuccessDialog
+          v-model:open="showCreateTokenSuccessDialog"
+          :token="tokenSuccess"
+        />
+        <SettingsUserDeveloperCreateApplicationSuccessDialog
+          v-model:open="showCreateApplicationSuccessDialog"
+          :application="(itemToModify as ApplicationItem)"
+        />
+      </div>
     </div>
-  </div>
+  </section>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/frontend-2/components/settings/user/Notifications.vue b/packages/frontend-2/components/settings/user/Notifications.vue
index aec31cfae1..cd8be71fb8 100644
--- a/packages/frontend-2/components/settings/user/Notifications.vue
+++ b/packages/frontend-2/components/settings/user/Notifications.vue
@@ -1,50 +1,52 @@
 <template>
-  <div class="md:max-w-xl md:mx-auto">
-    <SettingsSectionHeader
-      title="Notifications"
-      text="Manage your notification preferences"
-    />
-    <table class="table-auto w-full rounded-t overflow-hidden">
-      <thead class="text-foreground-1">
-        <tr>
-          <th class="pb-4 font-semibold text-sm text-left">Notification type</th>
-          <th
-            v-for="channel in notificationChannels"
-            :key="channel"
-            class="text-right font-semibold pb-4 text-sm"
+  <section>
+    <div class="md:max-w-xl md:mx-auto pb-6 md:pb-0">
+      <SettingsSectionHeader
+        title="Notifications"
+        text="Manage your notification preferences"
+      />
+      <table class="table-auto w-full rounded-t overflow-hidden">
+        <thead class="text-foreground-1">
+          <tr>
+            <th class="pb-4 font-semibold text-sm text-left">Notification type</th>
+            <th
+              v-for="channel in notificationChannels"
+              :key="channel"
+              class="text-right font-semibold pb-4 text-sm"
+            >
+              {{ capitalize(channel) }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="[type, settings] in Object.entries(localPreferences)"
+            :key="type"
+            class="border-t"
           >
-            {{ capitalize(channel) }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="[type, settings] in Object.entries(localPreferences)"
-          :key="type"
-          class="border-t"
-        >
-          <td class="text-xs sm:text-sm py-4">
-            {{ notificationTypeMapping[type] || 'Unknown' }}
-          </td>
-          <td
-            v-for="channel in notificationChannels"
-            :key="channel"
-            class="flex justify-end py-4"
-          >
-            <FormCheckbox
-              :name="`${type} (${channel})`"
-              :disabled="loading"
-              hide-label
-              :model-value="settings[channel] || undefined"
-              @update:model-value="
-                ($event) => onUpdate({ value: !!$event, type, channel })
-              "
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+            <td class="text-xs sm:text-sm py-4">
+              {{ notificationTypeMapping[type] || 'Unknown' }}
+            </td>
+            <td
+              v-for="channel in notificationChannels"
+              :key="channel"
+              class="flex justify-end py-4"
+            >
+              <FormCheckbox
+                :name="`${type} (${channel})`"
+                :disabled="loading"
+                hide-label
+                :model-value="settings[channel] || undefined"
+                @update:model-value="
+                  ($event) => onUpdate({ value: !!$event, type, channel })
+                "
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
 </template>
 <script setup lang="ts">
 import { capitalize, cloneDeep } from 'lodash-es'
diff --git a/packages/frontend-2/components/settings/user/Profile.vue b/packages/frontend-2/components/settings/user/Profile.vue
index 2d1312b464..3293edf62c 100644
--- a/packages/frontend-2/components/settings/user/Profile.vue
+++ b/packages/frontend-2/components/settings/user/Profile.vue
@@ -1,12 +1,14 @@
 <template>
-  <div class="md:max-w-xl md:mx-auto">
-    <SettingsSectionHeader title="Profile" text="Manage your profile information" />
-    <SettingsUserProfileDetails :user="user" />
-    <hr class="my-6 md:my-10" />
-    <SettingsUserProfileChangePassword :user="user" />
-    <hr class="my-6 md:my-10" />
-    <SettingsUserProfileDeleteAccount :user="user" />
-  </div>
+  <section>
+    <div class="md:max-w-xl md:mx-auto pb-6 md:pb-0">
+      <SettingsSectionHeader title="Profile" text="Manage your profile information" />
+      <SettingsUserProfileDetails :user="user" />
+      <hr class="my-6 md:my-10" />
+      <SettingsUserProfileChangePassword :user="user" />
+      <hr class="my-6 md:my-10" />
+      <SettingsUserProfileDeleteAccount :user="user" />
+    </div>
+  </section>
 </template>
 
 <script setup lang="ts">

From ed0fd987266906de0f0f3e7d3d02ef8d7cf3ea4e Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Mon, 22 Jul 2024 10:56:33 +0200
Subject: [PATCH 75/77] Changed User to use fragments

---
 .../components/settings/user/Notifications.vue       |  4 ++--
 .../frontend-2/components/settings/user/Profile.vue  | 12 ++++++++++--
 .../settings/user/profile/ChangePassword.vue         | 12 ++++++++++--
 .../settings/user/profile/DeleteAccount.vue          |  4 ++--
 .../settings/user/profile/DeleteAccountDialog.vue    |  4 ++--
 .../components/settings/user/profile/Details.vue     |  7 +++++--
 .../components/settings/user/profile/EditAvatar.vue  |  4 ++--
 packages/frontend-2/lib/common/generated/gql/gql.ts  |  5 +++++
 .../frontend-2/lib/common/generated/gql/graphql.ts   |  3 +++
 9 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/packages/frontend-2/components/settings/user/Notifications.vue b/packages/frontend-2/components/settings/user/Notifications.vue
index cd8be71fb8..49c287e52d 100644
--- a/packages/frontend-2/components/settings/user/Notifications.vue
+++ b/packages/frontend-2/components/settings/user/Notifications.vue
@@ -53,7 +53,7 @@ import { capitalize, cloneDeep } from 'lodash-es'
 import { graphql } from '~~/lib/common/generated/gql'
 import { useUpdateNotificationPreferences } from '~~/lib/user/composables/management'
 import type { NotificationPreferences } from '~~/lib/user/helpers/components'
-import type { User } from '~~/lib/common/generated/gql/graphql'
+import type { UserProfileEditDialogNotificationPreferences_UserFragment } from '~~/lib/common/generated/gql/graphql'
 
 graphql(`
   fragment UserProfileEditDialogNotificationPreferences_User on User {
@@ -63,7 +63,7 @@ graphql(`
 `)
 
 const props = defineProps<{
-  user: User
+  user: UserProfileEditDialogNotificationPreferences_UserFragment
 }>()
 
 const { mutate, loading } = useUpdateNotificationPreferences()
diff --git a/packages/frontend-2/components/settings/user/Profile.vue b/packages/frontend-2/components/settings/user/Profile.vue
index 3293edf62c..d1b8c21d2c 100644
--- a/packages/frontend-2/components/settings/user/Profile.vue
+++ b/packages/frontend-2/components/settings/user/Profile.vue
@@ -12,9 +12,17 @@
 </template>
 
 <script setup lang="ts">
-import type { User } from '~~/lib/common/generated/gql/graphql'
+import type {
+  UserProfileEditDialogChangePassword_UserFragment,
+  UserProfileEditDialogBio_UserFragment,
+  UserProfileEditDialogDeleteAccount_UserFragment
+} from '~~/lib/common/generated/gql/graphql'
+
+type CombinedUser = UserProfileEditDialogChangePassword_UserFragment &
+  UserProfileEditDialogDeleteAccount_UserFragment &
+  UserProfileEditDialogBio_UserFragment
 
 defineProps<{
-  user: User
+  user: CombinedUser
 }>()
 </script>
diff --git a/packages/frontend-2/components/settings/user/profile/ChangePassword.vue b/packages/frontend-2/components/settings/user/profile/ChangePassword.vue
index 369cf57910..60dc676deb 100644
--- a/packages/frontend-2/components/settings/user/profile/ChangePassword.vue
+++ b/packages/frontend-2/components/settings/user/profile/ChangePassword.vue
@@ -12,13 +12,21 @@
   </div>
 </template>
 <script setup lang="ts">
-import type { User } from '~~/lib/common/generated/gql/graphql'
+import type { UserProfileEditDialogChangePassword_UserFragment } from '~~/lib/common/generated/gql/graphql'
+import { graphql } from '~~/lib/common/generated/gql'
 import { usePasswordReset } from '~~/lib/auth/composables/passwordReset'
 
+graphql(`
+  fragment UserProfileEditDialogChangePassword_User on User {
+    id
+    email
+  }
+`)
+
 const { sendResetEmail } = usePasswordReset()
 
 const props = defineProps<{
-  user: User
+  user: UserProfileEditDialogChangePassword_UserFragment
 }>()
 
 const onClick = async () => {
diff --git a/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue b/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue
index 53d6e62a10..ab465d371b 100644
--- a/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue
+++ b/packages/frontend-2/components/settings/user/profile/DeleteAccount.vue
@@ -20,10 +20,10 @@
 </template>
 
 <script setup lang="ts">
-import type { User } from '~~/lib/common/generated/gql/graphql'
+import type { UserProfileEditDialogDeleteAccount_UserFragment } from '~~/lib/common/generated/gql/graphql'
 
 defineProps<{
-  user: User
+  user: UserProfileEditDialogDeleteAccount_UserFragment
 }>()
 
 const showDeleteDialog = ref(false)
diff --git a/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue b/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue
index 8f9f80b627..f9d9bb30bb 100644
--- a/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue
+++ b/packages/frontend-2/components/settings/user/profile/DeleteAccountDialog.vue
@@ -46,7 +46,7 @@ import { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'
 import { useForm } from 'vee-validate'
 import type { GenericValidateFunction } from 'vee-validate'
 import { graphql } from '~~/lib/common/generated/gql'
-import type { User } from '~~/lib/common/generated/gql/graphql'
+import type { UserProfileEditDialogDeleteAccount_UserFragment } from '~~/lib/common/generated/gql/graphql'
 import { useDeleteAccount } from '~~/lib/user/composables/management'
 
 graphql(`
@@ -67,7 +67,7 @@ const emit = defineEmits<{
 }>()
 
 const props = defineProps<{
-  user: User
+  user: UserProfileEditDialogDeleteAccount_UserFragment
 }>()
 
 const isOpen = defineModel<boolean>('open', { required: true })
diff --git a/packages/frontend-2/components/settings/user/profile/Details.vue b/packages/frontend-2/components/settings/user/profile/Details.vue
index 0c73520165..900e3c2368 100644
--- a/packages/frontend-2/components/settings/user/profile/Details.vue
+++ b/packages/frontend-2/components/settings/user/profile/Details.vue
@@ -35,7 +35,10 @@
 <script setup lang="ts">
 import { debounce } from 'lodash-es'
 import { graphql } from '~~/lib/common/generated/gql'
-import type { User, UserUpdateInput } from '~~/lib/common/generated/gql/graphql'
+import type {
+  UserProfileEditDialogBio_UserFragment,
+  UserUpdateInput
+} from '~~/lib/common/generated/gql/graphql'
 import { isRequired, isStringOfLength } from '~~/lib/common/helpers/validation'
 import { useUpdateUserProfile } from '~~/lib/user/composables/management'
 
@@ -50,7 +53,7 @@ graphql(`
 `)
 
 const props = defineProps<{
-  user: User
+  user: UserProfileEditDialogBio_UserFragment
 }>()
 
 const { mutate } = useUpdateUserProfile()
diff --git a/packages/frontend-2/components/settings/user/profile/EditAvatar.vue b/packages/frontend-2/components/settings/user/profile/EditAvatar.vue
index 32d5713232..b1656d5a0c 100644
--- a/packages/frontend-2/components/settings/user/profile/EditAvatar.vue
+++ b/packages/frontend-2/components/settings/user/profile/EditAvatar.vue
@@ -10,7 +10,7 @@
   />
 </template>
 <script setup lang="ts">
-import type { User } from '~~/lib/common/generated/gql/graphql'
+import type { UserProfileEditDialogAvatar_UserFragment } from '~~/lib/common/generated/gql/graphql'
 import { graphql } from '~~/lib/common/generated/gql'
 import { useUpdateUserProfile } from '~~/lib/user/composables/management'
 import type { MaybeNullOrUndefined } from '@speckle/shared'
@@ -25,7 +25,7 @@ graphql(`
 `)
 
 const props = defineProps<{
-  user: User
+  user: UserProfileEditDialogAvatar_UserFragment
   size: UserAvatarSize
 }>()
 
diff --git a/packages/frontend-2/lib/common/generated/gql/gql.ts b/packages/frontend-2/lib/common/generated/gql/gql.ts
index 47a268ad99..c00e863993 100644
--- a/packages/frontend-2/lib/common/generated/gql/gql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/gql.ts
@@ -84,6 +84,7 @@ const documents = {
     "\n  fragment ProjectsInviteBanner on PendingStreamCollaborator {\n    id\n    invitedBy {\n      ...LimitedUserAvatar\n    }\n    projectId\n    projectName\n    token\n    user {\n      id\n    }\n  }\n": types.ProjectsInviteBannerFragmentDoc,
     "\n  fragment ProjectsInviteBanners on User {\n    projectInvites {\n      ...ProjectsInviteBanner\n    }\n  }\n": types.ProjectsInviteBannersFragmentDoc,
     "\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n": types.UserProfileEditDialogNotificationPreferences_UserFragmentDoc,
+    "\n  fragment UserProfileEditDialogChangePassword_User on User {\n    id\n    email\n  }\n": types.UserProfileEditDialogChangePassword_UserFragmentDoc,
     "\n  fragment UserProfileEditDialogDeleteAccount_User on User {\n    id\n    email\n  }\n": types.UserProfileEditDialogDeleteAccount_UserFragmentDoc,
     "\n  fragment UserProfileEditDialogBio_User on User {\n    id\n    name\n    company\n    bio\n    ...UserProfileEditDialogAvatar_User\n  }\n": types.UserProfileEditDialogBio_UserFragmentDoc,
     "\n  fragment UserProfileEditDialogAvatar_User on User {\n    id\n    avatar\n    ...ActiveUserAvatar\n  }\n": types.UserProfileEditDialogAvatar_UserFragmentDoc,
@@ -539,6 +540,10 @@ export function graphql(source: "\n  fragment ProjectsInviteBanners on User {\n
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n"): (typeof documents)["\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment UserProfileEditDialogChangePassword_User on User {\n    id\n    email\n  }\n"): (typeof documents)["\n  fragment UserProfileEditDialogChangePassword_User on User {\n    id\n    email\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/packages/frontend-2/lib/common/generated/gql/graphql.ts b/packages/frontend-2/lib/common/generated/gql/graphql.ts
index e797140a1d..12b7cb6f6f 100644
--- a/packages/frontend-2/lib/common/generated/gql/graphql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/graphql.ts
@@ -3819,6 +3819,8 @@ export type ProjectsInviteBannersFragment = { __typename?: 'User', projectInvite
 
 export type UserProfileEditDialogNotificationPreferences_UserFragment = { __typename?: 'User', id: string, notificationPreferences: {} };
 
+export type UserProfileEditDialogChangePassword_UserFragment = { __typename?: 'User', id: string, email?: string | null };
+
 export type UserProfileEditDialogDeleteAccount_UserFragment = { __typename?: 'User', id: string, email?: string | null };
 
 export type UserProfileEditDialogBio_UserFragment = { __typename?: 'User', id: string, name: string, company?: string | null, bio?: string | null, avatar?: string | null };
@@ -4852,6 +4854,7 @@ export const ProjectsDashboardFilledFragmentDoc = {"kind":"Document","definition
 export const ProjectsInviteBannerFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectsInviteBanner"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PendingStreamCollaborator"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"invitedBy"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LimitedUserAvatar"}}]}},{"kind":"Field","name":{"kind":"Name","value":"projectId"}},{"kind":"Field","name":{"kind":"Name","value":"projectName"}},{"kind":"Field","name":{"kind":"Name","value":"token"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LimitedUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LimitedUser"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]} as unknown as DocumentNode<ProjectsInviteBannerFragment, unknown>;
 export const ProjectsInviteBannersFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectsInviteBanners"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectInvites"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectsInviteBanner"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LimitedUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LimitedUser"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectsInviteBanner"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PendingStreamCollaborator"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"invitedBy"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LimitedUserAvatar"}}]}},{"kind":"Field","name":{"kind":"Name","value":"projectId"}},{"kind":"Field","name":{"kind":"Name","value":"projectName"}},{"kind":"Field","name":{"kind":"Name","value":"token"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<ProjectsInviteBannersFragment, unknown>;
 export const UserProfileEditDialogNotificationPreferences_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogNotificationPreferences_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"notificationPreferences"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogNotificationPreferences_UserFragment, unknown>;
+export const UserProfileEditDialogChangePassword_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogChangePassword_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogChangePassword_UserFragment, unknown>;
 export const UserProfileEditDialogDeleteAccount_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogDeleteAccount_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogDeleteAccount_UserFragment, unknown>;
 export const ActiveUserAvatarFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ActiveUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]} as unknown as DocumentNode<ActiveUserAvatarFragment, unknown>;
 export const UserProfileEditDialogAvatar_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogAvatar_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ActiveUserAvatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ActiveUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogAvatar_UserFragment, unknown>;

From 0c2d338774b1391238b39b2dae98028301858cb7 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Mon, 22 Jul 2024 13:45:41 +0200
Subject: [PATCH 76/77] Created new fragment for overarching user

---
 .../components/settings/user/Profile.vue      | 19 ++++++++++---------
 .../lib/common/generated/gql/gql.ts           |  5 +++++
 .../lib/common/generated/gql/graphql.ts       |  3 +++
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/frontend-2/components/settings/user/Profile.vue b/packages/frontend-2/components/settings/user/Profile.vue
index d1b8c21d2c..211e7cf38d 100644
--- a/packages/frontend-2/components/settings/user/Profile.vue
+++ b/packages/frontend-2/components/settings/user/Profile.vue
@@ -12,17 +12,18 @@
 </template>
 
 <script setup lang="ts">
-import type {
-  UserProfileEditDialogChangePassword_UserFragment,
-  UserProfileEditDialogBio_UserFragment,
-  UserProfileEditDialogDeleteAccount_UserFragment
-} from '~~/lib/common/generated/gql/graphql'
+import { graphql } from '~~/lib/common/generated/gql'
+import type { SettingsUserProfile_UserFragment } from '~~/lib/common/generated/gql/graphql'
 
-type CombinedUser = UserProfileEditDialogChangePassword_UserFragment &
-  UserProfileEditDialogDeleteAccount_UserFragment &
-  UserProfileEditDialogBio_UserFragment
+graphql(`
+  fragment SettingsUserProfile_User on User {
+    ...UserProfileEditDialogChangePassword_User
+    ...UserProfileEditDialogDeleteAccount_User
+    ...UserProfileEditDialogBio_User
+  }
+`)
 
 defineProps<{
-  user: CombinedUser
+  user: SettingsUserProfile_UserFragment
 }>()
 </script>
diff --git a/packages/frontend-2/lib/common/generated/gql/gql.ts b/packages/frontend-2/lib/common/generated/gql/gql.ts
index c00e863993..e675f85b58 100644
--- a/packages/frontend-2/lib/common/generated/gql/gql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/gql.ts
@@ -84,6 +84,7 @@ const documents = {
     "\n  fragment ProjectsInviteBanner on PendingStreamCollaborator {\n    id\n    invitedBy {\n      ...LimitedUserAvatar\n    }\n    projectId\n    projectName\n    token\n    user {\n      id\n    }\n  }\n": types.ProjectsInviteBannerFragmentDoc,
     "\n  fragment ProjectsInviteBanners on User {\n    projectInvites {\n      ...ProjectsInviteBanner\n    }\n  }\n": types.ProjectsInviteBannersFragmentDoc,
     "\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n": types.UserProfileEditDialogNotificationPreferences_UserFragmentDoc,
+    "\n  fragment SettingsUserProfile_User on User {\n    ...UserProfileEditDialogChangePassword_User\n    ...UserProfileEditDialogDeleteAccount_User\n    ...UserProfileEditDialogBio_User\n  }\n": types.SettingsUserProfile_UserFragmentDoc,
     "\n  fragment UserProfileEditDialogChangePassword_User on User {\n    id\n    email\n  }\n": types.UserProfileEditDialogChangePassword_UserFragmentDoc,
     "\n  fragment UserProfileEditDialogDeleteAccount_User on User {\n    id\n    email\n  }\n": types.UserProfileEditDialogDeleteAccount_UserFragmentDoc,
     "\n  fragment UserProfileEditDialogBio_User on User {\n    id\n    name\n    company\n    bio\n    ...UserProfileEditDialogAvatar_User\n  }\n": types.UserProfileEditDialogBio_UserFragmentDoc,
@@ -540,6 +541,10 @@ export function graphql(source: "\n  fragment ProjectsInviteBanners on User {\n
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n"): (typeof documents)["\n  fragment UserProfileEditDialogNotificationPreferences_User on User {\n    id\n    notificationPreferences\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment SettingsUserProfile_User on User {\n    ...UserProfileEditDialogChangePassword_User\n    ...UserProfileEditDialogDeleteAccount_User\n    ...UserProfileEditDialogBio_User\n  }\n"): (typeof documents)["\n  fragment SettingsUserProfile_User on User {\n    ...UserProfileEditDialogChangePassword_User\n    ...UserProfileEditDialogDeleteAccount_User\n    ...UserProfileEditDialogBio_User\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/packages/frontend-2/lib/common/generated/gql/graphql.ts b/packages/frontend-2/lib/common/generated/gql/graphql.ts
index 12b7cb6f6f..2678d75c03 100644
--- a/packages/frontend-2/lib/common/generated/gql/graphql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/graphql.ts
@@ -3819,6 +3819,8 @@ export type ProjectsInviteBannersFragment = { __typename?: 'User', projectInvite
 
 export type UserProfileEditDialogNotificationPreferences_UserFragment = { __typename?: 'User', id: string, notificationPreferences: {} };
 
+export type SettingsUserProfile_UserFragment = { __typename?: 'User', id: string, email?: string | null, name: string, company?: string | null, bio?: string | null, avatar?: string | null };
+
 export type UserProfileEditDialogChangePassword_UserFragment = { __typename?: 'User', id: string, email?: string | null };
 
 export type UserProfileEditDialogDeleteAccount_UserFragment = { __typename?: 'User', id: string, email?: string | null };
@@ -4859,6 +4861,7 @@ export const UserProfileEditDialogDeleteAccount_UserFragmentDoc = {"kind":"Docum
 export const ActiveUserAvatarFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ActiveUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]} as unknown as DocumentNode<ActiveUserAvatarFragment, unknown>;
 export const UserProfileEditDialogAvatar_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogAvatar_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ActiveUserAvatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ActiveUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogAvatar_UserFragment, unknown>;
 export const UserProfileEditDialogBio_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogBio_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"bio"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"UserProfileEditDialogAvatar_User"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ActiveUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogAvatar_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ActiveUserAvatar"}}]}}]} as unknown as DocumentNode<UserProfileEditDialogBio_UserFragment, unknown>;
+export const SettingsUserProfile_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SettingsUserProfile_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"UserProfileEditDialogChangePassword_User"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"UserProfileEditDialogDeleteAccount_User"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"UserProfileEditDialogBio_User"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ActiveUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogAvatar_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ActiveUserAvatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogChangePassword_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogDeleteAccount_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserProfileEditDialogBio_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"bio"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"UserProfileEditDialogAvatar_User"}}]}}]} as unknown as DocumentNode<SettingsUserProfile_UserFragment, unknown>;
 export const ModelPageProjectFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ModelPageProject"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"visibility"}}]}}]} as unknown as DocumentNode<ModelPageProjectFragment, unknown>;
 export const ViewerModelVersionCardItemFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ViewerModelVersionCardItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Version"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"referencedObject"}},{"kind":"Field","name":{"kind":"Name","value":"sourceApplication"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"previewUrl"}},{"kind":"Field","name":{"kind":"Name","value":"authorUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LimitedUserAvatar"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LimitedUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LimitedUser"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]} as unknown as DocumentNode<ViewerModelVersionCardItemFragment, unknown>;
 export const SearchAutomateFunctionReleaseItemFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SearchAutomateFunctionReleaseItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AutomateFunctionRelease"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"versionTag"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"inputSchema"}}]}}]} as unknown as DocumentNode<SearchAutomateFunctionReleaseItemFragment, unknown>;

From 7dd77ac5ed882c991e532ee8f6045669dfabae37 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Tue, 23 Jul 2024 10:54:44 +0200
Subject: [PATCH 77/77] Hide server settings if you're not an admin

---
 packages/frontend-2/components/header/NavUserMenu.vue | 11 +++++++++++
 packages/frontend-2/components/settings/Dialog.vue    |  6 ++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index 846dbfe85f..dfcb85bdfa 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -158,6 +158,7 @@ import { useTheme } from '~~/lib/core/composables/theme'
 import { useServerInfo } from '~/lib/core/composables/server'
 import { connectorsPageUrl, settingsQueries } from '~/lib/common/helpers/route'
 import type { RouteLocationRaw } from 'vue-router'
+import { ToastNotificationType, useGlobalToast } from '~~/lib/common/composables/toast'
 
 defineProps<{
   loginUrl?: RouteLocationRaw
@@ -169,6 +170,7 @@ const { activeUser, isGuest } = useActiveUser()
 const { isDarkTheme, toggleTheme } = useTheme()
 const { serverInfo } = useServerInfo()
 const router = useRouter()
+const { triggerNotification } = useGlobalToast()
 
 const showInviteDialog = ref(false)
 const showSettingsDialog = ref(false)
@@ -202,6 +204,15 @@ onMounted(() => {
   const settingsQuery = route.query?.settings
 
   if (settingsQuery && isString(settingsQuery)) {
+    if (settingsQuery.includes('server') && !isAdmin.value) {
+      triggerNotification({
+        type: ToastNotificationType.Danger,
+        title: "You don't have access to server settings"
+      })
+
+      return
+    }
+
     showSettingsDialog.value = true
     settingsDialogTarget.value = settingsQuery
     deleteSettingsQuery()
diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index e2196149e1..6b25d91cb1 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -29,7 +29,7 @@
               @click="targetMenuItem = `${key}`"
             />
           </LayoutSidebarMenuGroup>
-          <LayoutSidebarMenuGroup title="Server settings">
+          <LayoutSidebarMenuGroup v-if="isAdmin" title="Server settings">
             <template #title-icon>
               <ServerStackIcon class="h-5 w-5" />
             </template>
@@ -78,6 +78,7 @@ import {
   LayoutSidebarMenu,
   LayoutSidebarMenuGroup
 } from '@speckle/ui-components'
+import { Roles } from '@speckle/shared'
 
 type MenuItem = {
   title: string
@@ -126,6 +127,7 @@ const menuItemConfig = shallowRef<{ [key: string]: { [key: string]: MenuItem } }
 const isOpen = defineModel<boolean>('open', { required: true })
 const targetMenuItem = defineModel<string | null>('targetMenuItem', { required: true })
 
+const isAdmin = computed(() => user.value?.role === Roles.Server.Admin)
 const selectedMenuItem = computed((): MenuItem | null => {
   const categories = [menuItemConfig.value.user, menuItemConfig.value.server]
   for (const category of categories) {
@@ -136,7 +138,7 @@ const selectedMenuItem = computed((): MenuItem | null => {
 
   if (!isMobile.value && targetMenuItem.value) {
     // Fallback for invalid queries/typos
-    return targetMenuItem.value.includes('server')
+    return targetMenuItem.value.includes('server') && isAdmin.value
       ? menuItemConfig.value.server.general
       : menuItemConfig.value.user.profile
   }