From 6cb2761d91cc2f85905b1f06d906367a621ea1b1 Mon Sep 17 00:00:00 2001
From: Mike <mike.tasset@gmail.com>
Date: Thu, 10 Oct 2024 23:54:23 +0200
Subject: [PATCH] Feat: Tooltips on avatars (#3243)

---
 packages/frontend-2/components/header/NavUserMenu.vue         | 2 +-
 .../components/project/page/settings/collaborators/Row.vue    | 2 +-
 .../frontend-2/components/settings/server/ActiveUsers.vue     | 2 +-
 .../components/settings/server/PendingInvitations.vue         | 2 +-
 .../components/settings/workspaces/members/GuestsTable.vue    | 2 +-
 .../components/settings/workspaces/members/InvitesTable.vue   | 4 ++--
 .../components/settings/workspaces/members/MembersTable.vue   | 2 +-
 .../components/viewer/anchored-point/thread/Comment.vue       | 2 +-
 .../frontend-2/components/workspace/invite/dialog/UserRow.vue | 2 +-
 packages/ui-components/src/components/user/Avatar.vue         | 3 +++
 10 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index 6669087ece..05fe717416 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -4,7 +4,7 @@
       <MenuButton :id="menuButtonId" v-slot="{ open: userOpen }">
         <span class="sr-only">Open user menu</span>
         <div class="flex items-center gap-1 p-0.5 hover:bg-highlight-2 rounded">
-          <UserAvatar :user="activeUser" />
+          <UserAvatar hide-tooltip :user="activeUser" />
           <ChevronDownIcon :class="userOpen ? 'rotate-180' : ''" class="h-3 w-3" />
         </div>
       </MenuButton>
diff --git a/packages/frontend-2/components/project/page/settings/collaborators/Row.vue b/packages/frontend-2/components/project/page/settings/collaborators/Row.vue
index caba41df86..690c460636 100644
--- a/packages/frontend-2/components/project/page/settings/collaborators/Row.vue
+++ b/packages/frontend-2/components/project/page/settings/collaborators/Row.vue
@@ -2,7 +2,7 @@
   <div
     class="bg-foundation flex items-center gap-2 py-2 px-3 border-t border-x last:border-b border-outline-3 first:rounded-t-lg last:rounded-b-lg"
   >
-    <UserAvatar :user="collaborator.user" />
+    <UserAvatar hide-tooltip :user="collaborator.user" />
     <div class="flex flex-col grow">
       <span class="truncate text-body-xs">{{ collaborator.title }}</span>
       <span
diff --git a/packages/frontend-2/components/settings/server/ActiveUsers.vue b/packages/frontend-2/components/settings/server/ActiveUsers.vue
index b0a2c7bcca..a066f04650 100644
--- a/packages/frontend-2/components/settings/server/ActiveUsers.vue
+++ b/packages/frontend-2/components/settings/server/ActiveUsers.vue
@@ -32,7 +32,7 @@
     >
       <template #name="{ item }">
         <div class="flex items-center gap-2">
-          <UserAvatar v-if="isUser(item)" :user="item" />
+          <UserAvatar v-if="isUser(item)" hide-tooltip :user="item" />
           <span class="truncate">
             {{ isUser(item) ? item.name : '' }}
           </span>
diff --git a/packages/frontend-2/components/settings/server/PendingInvitations.vue b/packages/frontend-2/components/settings/server/PendingInvitations.vue
index 20193f954a..8b0331c751 100644
--- a/packages/frontend-2/components/settings/server/PendingInvitations.vue
+++ b/packages/frontend-2/components/settings/server/PendingInvitations.vue
@@ -33,7 +33,7 @@
 
       <template #invitedBy="{ item }">
         <div class="flex items-center gap-2">
-          <UserAvatar v-if="isInvite(item)" :user="item.invitedBy" />
+          <UserAvatar v-if="isInvite(item)" hide-tooltip :user="item.invitedBy" />
           <span class="truncate">
             {{ isInvite(item) ? item.invitedBy.name : '' }}
           </span>
diff --git a/packages/frontend-2/components/settings/workspaces/members/GuestsTable.vue b/packages/frontend-2/components/settings/workspaces/members/GuestsTable.vue
index edd4529d56..fc284a0969 100644
--- a/packages/frontend-2/components/settings/workspaces/members/GuestsTable.vue
+++ b/packages/frontend-2/components/settings/workspaces/members/GuestsTable.vue
@@ -25,7 +25,7 @@
     >
       <template #name="{ item }">
         <div class="flex items-center gap-2">
-          <UserAvatar :user="item.user" />
+          <UserAvatar hide-tooltip :user="item.user" />
           <span class="truncate text-body-xs text-foreground">
             {{ item.user.name }}
           </span>
diff --git a/packages/frontend-2/components/settings/workspaces/members/InvitesTable.vue b/packages/frontend-2/components/settings/workspaces/members/InvitesTable.vue
index 95a9f46727..8e9dcf68ec 100644
--- a/packages/frontend-2/components/settings/workspaces/members/InvitesTable.vue
+++ b/packages/frontend-2/components/settings/workspaces/members/InvitesTable.vue
@@ -29,13 +29,13 @@
     >
       <template #name="{ item }">
         <div class="flex items-center gap-2">
-          <UserAvatar v-if="item.user" :user="item.user" />
+          <UserAvatar v-if="item.user" hide-tooltip :user="item.user" />
           <span class="truncate text-body-xs text-foreground">{{ item.title }}</span>
         </div>
       </template>
       <template #invitedBy="{ item }">
         <div class="flex items-center gap-2">
-          <UserAvatar :user="item.invitedBy" />
+          <UserAvatar hide-tooltip :user="item.invitedBy" />
           <span class="truncate text-body-xs text-foreground">
             {{ item.invitedBy.name }}
           </span>
diff --git a/packages/frontend-2/components/settings/workspaces/members/MembersTable.vue b/packages/frontend-2/components/settings/workspaces/members/MembersTable.vue
index 09b9795828..d979d3fc35 100644
--- a/packages/frontend-2/components/settings/workspaces/members/MembersTable.vue
+++ b/packages/frontend-2/components/settings/workspaces/members/MembersTable.vue
@@ -29,7 +29,7 @@
     >
       <template #name="{ item }">
         <div class="flex items-center gap-2">
-          <UserAvatar :user="item" />
+          <UserAvatar hide-tooltip :user="item" />
           <span class="truncate text-body-xs text-foreground">{{ item.name }}</span>
           <div
             v-if="
diff --git a/packages/frontend-2/components/viewer/anchored-point/thread/Comment.vue b/packages/frontend-2/components/viewer/anchored-point/thread/Comment.vue
index 9ea09da477..0733e0b085 100644
--- a/packages/frontend-2/components/viewer/anchored-point/thread/Comment.vue
+++ b/packages/frontend-2/components/viewer/anchored-point/thread/Comment.vue
@@ -6,7 +6,7 @@
     </div> -->
     <div class="xxx-bg-foundation sm:rounded-xl p-4 sm:pb-2 w-full relative">
       <div class="flex items-center space-x-1">
-        <UserAvatar :user="comment.author" class="mr-1" />
+        <UserAvatar :user="comment.author" hide-tooltip class="mr-1" />
         <span class="grow truncate text-xs sm:text-sm font-medium">
           {{ comment.author.name }}
         </span>
diff --git a/packages/frontend-2/components/workspace/invite/dialog/UserRow.vue b/packages/frontend-2/components/workspace/invite/dialog/UserRow.vue
index 61d4b46a6e..6758f5d4d2 100644
--- a/packages/frontend-2/components/workspace/invite/dialog/UserRow.vue
+++ b/packages/frontend-2/components/workspace/invite/dialog/UserRow.vue
@@ -3,7 +3,7 @@
     class="flex px-4 py-3 items-center space-x-2 justify-between border-b last:border-0 border-outline-3"
   >
     <div class="flex items-center space-x-2 flex-1 truncate">
-      <UserAvatar :user="user" />
+      <UserAvatar hide-tooltip :user="user" />
       <div
         v-if="
           user.workspaceDomainPolicyCompliant === false &&
diff --git a/packages/ui-components/src/components/user/Avatar.vue b/packages/ui-components/src/components/user/Avatar.vue
index 4c15112bc7..0d80427e6d 100644
--- a/packages/ui-components/src/components/user/Avatar.vue
+++ b/packages/ui-components/src/components/user/Avatar.vue
@@ -12,11 +12,13 @@
     <slot>
       <div
         v-if="user?.avatar"
+        v-tippy="!hideTooltip ? props.user?.name : undefined"
         class="h-full w-full bg-cover bg-center bg-no-repeat"
         :style="{ backgroundImage: `url('${user.avatar}')` }"
       />
       <div
         v-else-if="initials"
+        v-tippy="!hideTooltip ? props.user?.name : undefined"
         class="flex h-full w-full select-none items-center justify-center"
       >
         {{ initials }}
@@ -41,6 +43,7 @@ const props = withDefaults(
     active?: boolean
     noBorder?: boolean
     noBg?: boolean
+    hideTooltip?: boolean
   }>(),
   {
     size: 'base',