Feat: Move settings from individual pages into one settings modal

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="() => (showProfileEditDialog = true)"
+              @click="toggleSettingsDialog(settingsQueries.user.profile)"
             >
-              <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="toggleSettingsDialog(settingsQueries.server.general)"
             >
-              <Cog6ToothIcon class="w-5 h-5" />
-              Server management
+              <ServerStackIcon class="w-5 h-5" />
+              Server settings
             </NuxtLink>
           </MenuItem>
           <MenuItem v-slot="{ active }">
@@ -127,11 +127,16 @@
         </MenuItems>
       </Transition>
     </Menu>
-    <ServerManagementInviteDialog v-model:open="showInviteDialog" />
-    <UserProfileEditDialog v-model:open="showProfileEditDialog" />
+    <SettingsServerUserInviteDialog v-model:open="showInviteDialog" />
+    <SettingsDialog
+      v-model:open="showSettingsDialog"
+      v-model:target-menu-item="settingsDialogTarget"
+    />
   </div>
 </template>
 <script setup lang="ts">
+import { isString } from 'lodash'
+import { useBreakpoints } from '@vueuse/core'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import {
   XMarkIcon,
@@ -140,54 +145,66 @@ import {
   SunIcon,
   MoonIcon,
   EnvelopeIcon,
-  Cog6ToothIcon,
   CloudArrowDownIcon,
-  ChatBubbleLeftRightIcon
+  ChatBubbleLeftRightIcon,
+  UserCircleIcon,
+  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'
 import { useServerInfo } from '~/lib/core/composables/server'
-import { homeRoute, profileRoute, 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 router = useRouter()
-const route = useRoute()
 
 const showInviteDialog = ref(false)
-const showProfileEditDialog = ref(false)
+const showSettingsDialog = ref(false)
+const settingsDialogTarget = ref<string | null>(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)
 const isAdmin = computed(() => activeUser.value?.role === Roles.Server.Admin)
-const isProfileRoute = computed(() => route.path === profileRoute)
 
 const toggleInviteDialog = () => {
   showInviteDialog.value = true
 }
 
-const goToServerManagement = () => {
-  router.push('/server-management')
+const toggleSettingsDialog = (target: string) => {
+  showSettingsDialog.value = true
+
+  // On mobile open the modal but dont set the target
+  settingsDialogTarget.value = !isMobile.value ? target : null
 }
 
-watch(
-  isProfileRoute,
-  (newVal, oldVal) => {
-    if (newVal && !oldVal) {
-      showProfileEditDialog.value = true
-      void router.replace({ path: homeRoute, force: true }) // in-place replace
-    }
-  },
-  { immediate: true }
-)
+const deleteSettingsQuery = (): void => {
+  const currentQueryParams = { ...route.query }
+  delete currentQueryParams.settings
+  router.push({ query: currentQueryParams })
+}
+
+onMounted(() => {
+  const settingsQuery = route.query?.settings
+
+  if (settingsQuery && isString(settingsQuery)) {
+    showSettingsDialog.value = true
+    settingsDialogTarget.value = settingsQuery
+    deleteSettingsQuery()
+  }
+})
 </script>

packages/frontend-2/components/onboarding/checklist/v1.vue

@@ -216,7 +216,7 @@
     >
       <template #header>Your first upload</template>
     </OnboardingDialogFirstSend>
-    <ServerManagementInviteDialog
+    <SettingsServerUserInviteDialog
       v-model:open="showServerInviteDialog"
       @update:open="(v) => (!v ? markComplete(3) : '')"
     />

packages/frontend-2/components/settings/Dialog.vue

@@ -0,0 +1,156 @@
+<template>
+  <LayoutDialog
+    v-model:open="isOpen"
+    v-bind="
+      isMobile ? { title: selectedMenuItem ? selectedMenuItem.title : 'Settings' } : {}
+    "
+    fullscreen
+    :show-back-button="isMobile && !!selectedMenuItem"
+    @back="targetMenuItem = null"
+  >
+    <div class="w-full h-full flex">
+      <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"
+      >
+        <LayoutSidebarMenu>
+          <LayoutSidebarMenuGroup title="Account settings">
+            <template #title-icon>
+              <UserIcon class="h-5 w-5" />
+            </template>
+            <LayoutSidebarMenuGroupItem
+              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="targetMenuItem = `${key}`"
+            />
+          </LayoutSidebarMenuGroup>
+          <LayoutSidebarMenuGroup title="Server settings">
+            <template #title-icon>
+              <ServerStackIcon class="h-5 w-5" />
+            </template>
+            <LayoutSidebarMenuGroupItem
+              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="targetMenuItem = `${key}`"
+            />
+          </LayoutSidebarMenuGroup>
+        </LayoutSidebarMenu>
+      </LayoutSidebar>
+      <component
+        :is="selectedMenuItem.component"
+        v-if="selectedMenuItem"
+        :class="[
+          'bg-foundation md:px-10 md:py-12 md:bg-foundation w-full',
+          !isMobile && 'simple-scrollbar overflow-y-auto flex-1'
+        ]"
+        :user="user"
+      />
+    </div>
+  </LayoutDialog>
+</template>
+
+<script setup lang="ts">
+import type { defineComponent } from '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'
+import { settingsQueries } from '~/lib/common/helpers/route'
+import { useActiveUser } from '~/lib/auth/composables/activeUser'
+import {
+  LayoutSidebar,
+  LayoutSidebarMenu,
+  LayoutSidebarMenuGroup
+} from '@speckle/ui-components'
+
+type MenuItem = {
+  title: string
+  component: ReturnType<typeof defineComponent>
+}
+
+const { activeUser: user } = useActiveUser()
+const breakpoints = useBreakpoints(TailwindBreakpoints)
+const isMobile = breakpoints.smaller('md')
+
+const menuItemConfig = shallowRef<{ [key: string]: { [key: string]: MenuItem } }>({
+  user: {
+    [settingsQueries.user.profile]: {
+      title: 'Profile',
+      component: SettingsUserProfile
+    },
+    [settingsQueries.user.notifications]: {
+      title: 'Notifications',
+      component: SettingsUserNotifications
+    },
+    [settingsQueries.user.developerSettings]: {
+      title: 'Developer settings',
+      component: SettingsUserDeveloper
+    }
+  },
+  server: {
+    [settingsQueries.server.general]: {
+      title: 'General',
+      component: SettingsServerGeneral
+    },
+    [settingsQueries.server.projects]: {
+      title: 'Projects',
+      component: SettingsServerProjects
+    },
+    [settingsQueries.server.activeUsers]: {
+      title: 'Active users',
+      component: SettingsServerActiveUsers
+    },
+    [settingsQueries.server.pendingInvitations]: {
+      title: 'Pending invitations',
+      component: SettingsServerPendingInvitations
+    }
+  }
+})
+
+const isOpen = defineModel<boolean>('open', { required: true })
+const targetMenuItem = defineModel<string | null>('targetMenuItem', { required: true })
+
+const selectedMenuItem = computed((): MenuItem | null => {
+  const categories = [menuItemConfig.value.user, menuItemConfig.value.server]
+  for (const category of categories) {
+    if (targetMenuItem.value && targetMenuItem.value in category) {
+      return category[targetMenuItem.value]
+    }
+  }
+
+  if (!isMobile.value && targetMenuItem.value) {
+    // Fallback for invalid queries/typos
+    return targetMenuItem.value.includes('server')
+      ? menuItemConfig.value.server.general
+      : menuItemConfig.value.user.profile
+  }
+
+  return null
+})
+
+watch(
+  () => user.value,
+  (newVal) => {
+    if (!newVal) {
+      isOpen.value = false
+    }
+  },
+  { immediate: true }
+)
+</script>