From dcc36d2a355d2cec80f1c9f7b5f8171bc150fea9 Mon Sep 17 00:00:00 2001
From: Leonic <88329746+Leon-Luu@users.noreply.github.com>
Date: Fri, 23 Jan 2026 16:14:10 +0100
Subject: [PATCH] feat(common): display user roles in member stack tooltips
 (#5793)

---
 .../src/components/teams/MemberStack.vue               | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/teams/MemberStack.vue b/packages/hoppscotch-common/src/components/teams/MemberStack.vue
index 81d1ecad..7ea5a934 100644
--- a/packages/hoppscotch-common/src/components/teams/MemberStack.vue
+++ b/packages/hoppscotch-common/src/components/teams/MemberStack.vue
@@ -8,7 +8,7 @@
       <HoppSmartPicture
         v-tippy="{ theme: 'tooltip' }"
         :name="member.user.uid"
-        :title="getUserName(member as TeamMember)"
+        :title="getUserWithRole(member as TeamMember)"
         class="ring-2 ring-primary group-hover:-translate-y-1 transition-transform"
         @click="handleClick()"
       />
@@ -51,6 +51,12 @@ const getUserName = (member: TeamMember): string =>
   member.user.email ||
   t("profile.default_hopp_displayname")
 
+const getUserWithRole = (member: TeamMember): string => {
+  const name = getUserName(member)
+  const role = member.role
+  return `${name} (${role})`
+}
+
 const maxMembersSoftLimit = 3
 const maxMembersHardLimit = 6
 
@@ -66,7 +72,7 @@ const remainingSlicedMembers = computed(
     props.teamMembers
       .slice(maxMembersSoftLimit)
       .slice(0, maxMembersHardLimit)
-      .map((member) => getUserName(member as TeamMember))
+      .map((member) => getUserWithRole(member as TeamMember))
       .join(`,<br>`) +
     (props.teamMembers.length - (maxMembersSoftLimit + maxMembersHardLimit) > 0
       ? `,<br>${t("team.more_members", {