Feat: Change default workspace avatars

packages/frontend-2/components/auth/sso/Login.vue

@@ -68,7 +68,6 @@ graphql(`
     slug
     name
     logo
-    defaultLogoIndex
   }
 `)
 

packages/frontend-2/components/auth/sso/Register.vue

@@ -2,8 +2,8 @@
   <div class="flex flex-col items-center gap-4">
     <WorkspaceAvatar
       v-if="workspace"
+      :name="workspace.name"
       :logo="workspace.logo"
-      :default-logo-index="workspace.defaultLogoIndex"
       size="xl"
     />
 

packages/frontend-2/components/auth/sso/WorkspaceSelect.vue

@@ -9,22 +9,14 @@
   >
     <template #option="{ item }">
       <div class="flex items-center gap-2">
-        <WorkspaceAvatar
-          :logo="item.logo"
-          :default-logo-index="item.defaultLogoIndex"
-          size="xs"
-        />
+        <WorkspaceAvatar :name="item.name" :logo="item.logo" size="xs" />
         <span>{{ item.name }}</span>
       </div>
     </template>
     <template #nothing-selected>Select a workspace</template>
     <template #something-selected="{ value }">
       <div v-if="!isArrayValue(value)" class="flex items-center gap-2">
-        <WorkspaceAvatar
-          :logo="value.logo"
-          :default-logo-index="value.defaultLogoIndex"
-          size="xs"
-        />
+        <WorkspaceAvatar :logo="value.logo" :name="value.name" size="xs" />
         <span>{{ value.name }}</span>
       </div>
     </template>

packages/frontend-2/components/dashboard/ProjectCard.vue

@@ -28,7 +28,7 @@
       >
         <WorkspaceAvatar
           :logo="project.workspace.logo"
-          :default-logo-index="project.workspace.defaultLogoIndex"
+          :name="project.workspace.name"
           size="sm"
         />
         <p class="text-body-2xs text-foreground ml-2">
@@ -77,7 +77,7 @@ graphql(`
       id
       slug
       name
-      ...WorkspaceAvatar_Workspace
+      logo
     }
   }
 `)

packages/frontend-2/components/dashboard/Sidebar.vue

@@ -90,11 +90,7 @@
                     class="!pl-1"
                   >
                     <template #icon>
-                      <WorkspaceAvatar
-                        :logo="item.logo"
-                        :default-logo-index="item.defaultLogoIndex"
-                        size="sm"
-                      />
+                      <WorkspaceAvatar :name="item.name" :logo="item.logo" size="sm" />
                     </template>
                   </LayoutSidebarMenuGroupItem>
                 </NuxtLink>
@@ -235,10 +231,10 @@ const workspacesItems = computed(() =>
   workspaceResult.value?.activeUser
     ? workspaceResult.value.activeUser.workspaces.items.map((workspace) => ({
         label: workspace.name,
+        name: workspace.name,
         id: workspace.id,
         to: workspaceRoute(workspace.slug),
         logo: workspace.logo,
-        defaultLogoIndex: workspace.defaultLogoIndex,
         plan: {
           status: workspace.plan?.status
         },

packages/frontend-2/components/invite/Banner.vue

@@ -5,7 +5,7 @@
       <WorkspaceAvatar
         v-if="invite.workspace"
         :logo="invite.workspace.logo"
-        :default-logo-index="invite.workspace.defaultLogoIndex"
+        :name="invite.workspace.name"
       />
       <div class="text-foreground">
         <slot name="message" />
@@ -69,7 +69,7 @@ type GenericInviteItem = {
   workspace?: {
     id: string
     logo?: string
-    defaultLogoIndex: number
+    name: string
   }
   user?: MaybeNullOrUndefined<{
     id: string

packages/frontend-2/components/project/page/Header.vue

@@ -28,7 +28,7 @@
       >
         <WorkspaceAvatar
           :logo="project.workspace.logo"
-          :default-logo-index="project.workspace.defaultLogoIndex"
+          :name="project.workspace.name"
           size="sm"
           class="mt-0.5"
         />
@@ -59,7 +59,7 @@ graphql(`
       id
       slug
       name
-      ...WorkspaceAvatar_Workspace
+      logo
     }
   }
 `)

packages/frontend-2/components/projects/HiddenProjectWarning.vue

@@ -17,11 +17,7 @@
         color="outline"
       >
         <div class="flex items-center gap-1">
-          <WorkspaceAvatar
-            size="2xs"
-            :default-logo-index="session.defaultLogoIndex"
-            :logo="session.logo"
-          />
+          <WorkspaceAvatar size="2xs" :name="session.name" :logo="session.logo" />
           {{ session.name }}
         </div>
       </FormButton>
@@ -42,7 +38,6 @@ graphql(`
       slug
       name
       logo
-      defaultLogoIndex
     }
   }
 `)

packages/frontend-2/components/projects/MoveToWorkspaceDialog.vue

@@ -78,7 +78,6 @@ graphql(`
     id
     role
     name
-    defaultLogoIndex
     logo
     ...WorkspaceHasCustomDataResidency_Workspace
     ...ProjectsWorkspaceSelect_Workspace

packages/frontend-2/components/projects/ProjectDashboardCard.vue

@@ -33,7 +33,7 @@
           >
             <WorkspaceAvatar
               :logo="project.workspace.logo"
-              :default-logo-index="project.workspace.defaultLogoIndex"
+              :name="project.workspace.name"
               size="sm"
             />
             <p class="text-body-2xs text-foreground ml-2 line-clamp-2">

packages/frontend-2/components/projects/WorkspaceSelect.vue

@@ -22,7 +22,7 @@
       <div class="flex items-center gap-x-2">
         <WorkspaceAvatar
           :logo="(value as ProjectsWorkspaceSelect_WorkspaceFragment).logo"
-          :default-logo-index="(value as ProjectsWorkspaceSelect_WorkspaceFragment).defaultLogoIndex"
+          :name="(value as ProjectsWorkspaceSelect_WorkspaceFragment).name"
           size="2xs"
         />
         <span class="truncate text-foreground">
@@ -32,11 +32,7 @@
     </template>
     <template #option="{ item }">
       <div class="flex items-center gap-x-2">
-        <WorkspaceAvatar
-          :logo="item.logo"
-          :default-logo-index="item.defaultLogoIndex"
-          size="2xs"
-        />
+        <WorkspaceAvatar :logo="item.logo" :name="item.name" size="2xs" />
         <span class="truncate text-foreground">{{ item.name }}</span>
       </div>
     </template>
@@ -54,7 +50,6 @@ graphql(`
     id
     role
     name
-    defaultLogoIndex
     logo
   }
 `)

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

@@ -59,7 +59,7 @@
               <template #title-icon>
                 <WorkspaceAvatar
                   :logo="workspaceItem.logo"
-                  :default-logo-index="workspaceItem.defaultLogoIndex"
+                  :name="workspaceItem.name"
                   size="sm"
                 />
               </template>
@@ -148,12 +148,12 @@ import { WorkspacePlanStatuses } from '~/lib/common/generated/gql/graphql'
 
 graphql(`
   fragment SettingsDialog_Workspace on Workspace {
-    ...WorkspaceAvatar_Workspace
     ...SettingsMenu_Workspace
     id
     slug
     role
     name
+    logo
     plan {
       status
     }

packages/frontend-2/components/settings/workspaces/General/EditAvatar.vue

@@ -3,7 +3,6 @@
     v-model:edit-mode="editMode"
     :model-value="workspace.logo"
     :placeholder="workspace.name"
-    :default-img="defaultAvatar"
     name="edit-avatar"
     :disabled="loading || disabled"
     :size="size"
@@ -16,14 +15,12 @@ import type { SettingsWorkspacesGeneralEditAvatar_WorkspaceFragment } from '~~/l
 import type { MaybeNullOrUndefined } from '@speckle/shared'
 import type { UserAvatarSize } from '@speckle/ui-components/dist/composables/user/avatar'
 import { useUpdateWorkspace } from '~~/lib/settings/composables/management'
-import { useWorkspacesAvatar } from '~~/lib/workspaces/composables/avatar'
 
 graphql(`
   fragment SettingsWorkspacesGeneralEditAvatar_Workspace on Workspace {
     id
     logo
     name
-    defaultLogoIndex
   }
 `)
 
@@ -34,12 +31,9 @@ const props = defineProps<{
 }>()
 
 const { mutate, loading } = useUpdateWorkspace()
-const { getDefaultAvatar } = useWorkspacesAvatar()
 
 const editMode = ref(false)
 
-const defaultAvatar = computed(() => getDefaultAvatar(props.workspace.defaultLogoIndex))
-
 const onSave = async (newVal: MaybeNullOrUndefined<string>) => {
   if (props.workspace.logo === newVal) return
   if (loading.value) return

packages/frontend-2/components/workspace/Avatar.vue

@@ -1,47 +1,35 @@
 <template>
   <div
     :class="[
-      'text-foreground-on-primary flex shrink-0 items-center justify-center overflow-hidden rounded-full uppercase transition',
+      'flex shrink-0 overflow-hidden rounded-md border border-outline-2 bg-foundation-2',
       sizeClasses
     ]"
   >
     <div
-      class="h-full w-full bg-cover bg-center bg-no-repeat"
-      :style="{ backgroundImage: `url('${avatar}')` }"
-    />
+      class="h-full w-full bg-cover bg-center bg-no-repeat flex items-center justify-center"
+      :style="{ backgroundImage: `url('${logo}')` }"
+    >
+      <span class="text-foreground-3 uppercase leading-none">
+        {{ name[0] }}
+      </span>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { graphql } from '~~/lib/common/generated/gql'
 import type { MaybeNullOrUndefined } from '@speckle/shared'
-import type { UserAvatarSize } from '@speckle/ui-components'
-import { useAvatarSizeClasses } from '@speckle/ui-components'
-import { useWorkspacesAvatar } from '~/lib/workspaces/composables/avatar'
-
-graphql(`
-  fragment WorkspaceAvatar_Workspace on Workspace {
-    id
-    logo
-    defaultLogoIndex
-  }
-`)
+import { type UserAvatarSize, useAvatarSizeClasses } from '@speckle/ui-components'
 
 const props = withDefaults(
   defineProps<{
     size?: UserAvatarSize
-    logo?: MaybeNullOrUndefined<string>
-    defaultLogoIndex: number
+    logo: MaybeNullOrUndefined<string>
+    name: string
   }>(),
   {
     size: 'base'
   }
 )
 
 const { sizeClasses } = useAvatarSizeClasses({ props: toRefs(props) })
-const { getDefaultAvatar } = useWorkspacesAvatar()
-
-const avatar = computed(() =>
-  props.logo ? props.logo : getDefaultAvatar(props.defaultLogoIndex)
-)
 </script>

packages/frontend-2/components/workspace/CreateDialog.vue

@@ -33,7 +33,6 @@
         v-model:edit-mode="editAvatarMode"
         :model-value="workspaceLogo"
         :placeholder="workspaceName"
-        :default-img="defaultAvatar"
         name="edit-avatar"
         size="xxl"
         @save="onLogoSave"
@@ -47,7 +46,6 @@ import { useForm } from 'vee-validate'
 import type { MaybeNullOrUndefined } from '@speckle/shared'
 import type { LayoutDialogButton } from '@speckle/ui-components'
 import { useCreateWorkspace } from '~/lib/workspaces/composables/management'
-import { useWorkspacesAvatar } from '~/lib/workspaces/composables/avatar'
 import { isRequired, isStringOfLength } from '~~/lib/common/helpers/validation'
 import { generateSlugFromName } from '@speckle/shared'
 import { debounce } from 'lodash'
@@ -65,15 +63,13 @@ const props = defineProps<{
 const isOpen = defineModel<boolean>('open', { required: true })
 
 const createWorkspace = useCreateWorkspace()
-const { generateDefaultLogoIndex, getDefaultAvatar } = useWorkspacesAvatar()
 const { handleSubmit, resetForm } = useForm<{ name: string; slug: string }>()
 
 const workspaceName = ref('')
 const workspaceShortId = ref('')
 const debouncedWorkspaceShortId = ref('')
 const editAvatarMode = ref(false)
 const workspaceLogo = ref<MaybeNullOrUndefined<string>>()
-const defaultLogoIndex = ref(generateDefaultLogoIndex())
 const shortIdManuallyEdited = ref(false)
 
 const { error, loading } = useQuery(
@@ -88,8 +84,6 @@ const { error, loading } = useQuery(
 
 const baseUrl = useRuntimeConfig().public.baseUrl
 
-const defaultAvatar = computed(() => getDefaultAvatar(defaultLogoIndex.value))
-
 const getShortIdHelp = computed(() =>
   workspaceShortId.value
     ? `${baseUrl}/workspaces/${workspaceShortId.value}`
@@ -122,7 +116,6 @@ const handleCreateWorkspace = handleSubmit(async () => {
     {
       name: workspaceName.value,
       slug: workspaceShortId.value,
-      defaultLogoIndex: defaultLogoIndex.value,
       logo: workspaceLogo.value
     },
     { navigateOnSuccess: props.navigateOnSuccess === true }
@@ -140,7 +133,6 @@ const onLogoSave = (newVal: MaybeNullOrUndefined<string>) => {
 }
 
 const reset = () => {
-  defaultLogoIndex.value = generateDefaultLogoIndex()
   debouncedWorkspaceShortId.value = ''
   workspaceLogo.value = null
   editAvatarMode.value = false

packages/frontend-2/components/workspace/header/Header.vue

@@ -15,8 +15,8 @@
       <div class="flex gap-2 md:mb-3 md:mt-2">
         <div class="flex items-center mr-2">
           <WorkspaceAvatar
+            :name="workspaceInfo.name"
             :logo="workspaceInfo.logo"
-            :default-logo-index="workspaceInfo.defaultLogoIndex"
             size="lg"
           />
         </div>
@@ -134,7 +134,6 @@ import type { AlertAction } from '@speckle/ui-components'
 
 graphql(`
   fragment WorkspaceHeader_Workspace on Workspace {
-    ...WorkspaceAvatar_Workspace
     ...BillingAlert_Workspace
     id
     slug