Merge pull request #4231 from specklesystems/andrew/update-workspace-members-sidebar

refactor(fe): workspace sidebar members section

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

@@ -77,6 +77,7 @@
         v-if="!isWorkspaceGuest"
         :workspace-info="workspaceInfo"
         :is-workspace-admin="isWorkspaceAdmin"
+        :is-workspace-guest="isWorkspaceGuest"
         @show-invite-dialog="$emit('show-invite-dialog')"
       />
     </div>

packages/frontend-2/components/workspace/sidebar/Members.vue

@@ -5,7 +5,6 @@
     :icon="iconName"
     :icon-click="iconClick"
     :icon-text="iconText"
-    :tag="workspaceInfo.team.totalCount.toString() || undefined"
     no-hover
   >
     <div class="flex lg:flex-col items-center lg:items-start gap-y-3 pb-0 lg:pb-4 mt-1">
@@ -15,6 +14,11 @@
           :users="team.map((teamMember) => teamMember.user)"
           :max-avatars="isDesktop ? 5 : 3"
           class="shrink-0"
+          :on-hidden-count-click="
+            () => {
+              navigateTo(settingsWorkspaceRoutes.members.route(workspaceInfo.slug))
+            }
+          "
         />
         <div class="w-full flex items-center gap-x-2">
           <button
@@ -66,6 +70,7 @@ const props = defineProps<{
   workspaceInfo: WorkspaceTeam_WorkspaceFragment
   collapsible?: boolean
   isWorkspaceAdmin?: boolean
+  isWorkspaceGuest?: boolean
 }>()
 
 const breakpoints = useBreakpoints(TailwindBreakpoints)
@@ -74,19 +79,19 @@ const isDesktop = breakpoints.greaterOrEqual('lg')
 const team = computed(() => props.workspaceInfo.team.items || [])
 
 const iconName = computed(() => {
-  if (!props.isWorkspaceAdmin) return undefined
-  return 'edit'
+  if (props.isWorkspaceAdmin) return 'edit'
+  return 'view'
 })
 
 const iconClick = computed(() => {
-  if (!props.isWorkspaceAdmin) return undefined
+  if (props.isWorkspaceGuest) return undefined
   return () =>
     navigateTo(settingsWorkspaceRoutes.members.route(props.workspaceInfo.slug))
 })
 
 const iconText = computed(() => {
-  if (!props.isWorkspaceAdmin) return undefined
-  return 'Manage members'
+  if (props.isWorkspaceAdmin) return 'Manage members'
+  return 'View members'
 })
 
 const invitedTeamCount = computed(() => props.workspaceInfo?.invitedTeam?.length ?? 0)

packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue

@@ -46,6 +46,7 @@
         @click="iconClick"
       >
         <Edit v-if="icon === 'edit'" class="h-4 w-4" />
+        <ChevronRightIcon v-else-if="icon === 'view'" class="h-4 w-4" />
         <Plus v-else class="h-4 w-4" />
       </button>
     </div>
@@ -61,13 +62,14 @@ import Plus from '~~/src/components/global/icon/Plus.vue'
 import Edit from '~~/src/components/global/icon/Edit.vue'
 import ArrowFilled from '~~/src/components/global/icon/ArrowFilled.vue'
 import CommonBadge from '~~/src/components/common/Badge.vue'
+import { ChevronRightIcon } from '@heroicons/vue/24/outline'
 
 defineProps<{
   tag?: string
   title?: string
   collapsible?: boolean
   collapsed?: boolean
-  icon?: 'add' | 'edit'
+  icon?: 'add' | 'edit' | 'view'
   iconText?: string
   iconClick?: () => void
   noHover?: boolean

packages/ui-components/src/components/user/AvatarGroup.vue

@@ -14,7 +14,13 @@
         :hide-tooltip="hideTooltips"
       />
     </div>
-    <UserAvatar v-if="totalHiddenCount" :size="size" class="select-none">
+    <UserAvatar
+      v-if="totalHiddenCount"
+      :size="size"
+      class="select-none"
+      :class="{ 'cursor-pointer': !!onHiddenCountClick }"
+      @click="onHiddenCountClick && onHiddenCountClick()"
+    >
       +{{ totalHiddenCount }}
     </UserAvatar>
   </div>
@@ -35,6 +41,7 @@ const props = withDefaults(
     maxCount?: number
     hideTooltips?: boolean
     maxAvatars?: number
+    onHiddenCountClick?: () => void
   }>(),
   {
     users: () => [],
@@ -42,7 +49,8 @@ const props = withDefaults(
     size: 'base',
     maxCount: undefined,
     hideTooltips: false,
-    maxAvatars: undefined
+    maxAvatars: undefined,
+    onHiddenCountClick: undefined
   }
 )