feat: User Tooltip (#4319)

frontend/components/Domain/Recipe/RecipeDataTable.vue

@@ -33,7 +33,7 @@
     </template>
     <template #item.userId="{ item }">
       <v-list-item class="justify-start">
-        <UserAvatar :user-id="item.userId" size="40" />
+        <UserAvatar :user-id="item.userId" :tooltip="false" size="40" />
         <v-list-item-content>
           <v-list-item-title>
             {{ getMember(item.userId) }}
@@ -153,7 +153,7 @@ export default defineComponent({
     async function refreshMembers() {
       const { data } = await api.groups.fetchMembers();
       if (data) {
-        members.value = data;
+        members.value = data.items;
       }
     }
 

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageComments.vue

@@ -9,7 +9,7 @@
     <v-divider class="mx-2"></v-divider>
     <div v-if="user.id" class="d-flex flex-column">
       <div class="d-flex mt-3" style="gap: 10px">
-        <UserAvatar size="40" :user-id="user.id" />
+        <UserAvatar :tooltip="false" size="40" :user-id="user.id" />
 
         <v-textarea
           v-model="comment"
@@ -31,7 +31,7 @@
       </div>
     </div>
     <div v-for="comment in recipe.comments" :key="comment.id" class="d-flex my-2" style="gap: 10px">
-      <UserAvatar size="40" :user-id="comment.userId" />
+      <UserAvatar :tooltip="false" size="40" :user-id="comment.userId" />
       <v-card outlined class="flex-grow-1">
         <v-card-text class="pa-3 pb-0">
           <p class="">{{ comment.user.username }} • {{ $d(Date.parse(comment.createdAt), "medium") }}</p>

frontend/components/Domain/User/UserAvatar.vue

@@ -1,14 +1,26 @@
 <template>
-  <v-list-item-avatar v-if="list && userId">
-    <v-img :src="imageURL" :alt="userId" @load="error = false" @error="error = true"> </v-img>
-  </v-list-item-avatar>
-  <v-avatar v-else-if="userId" :size="size">
-    <v-img :src="imageURL" :alt="userId" @load="error = false" @error="error = true"> </v-img>
-  </v-avatar>
+  <v-tooltip
+    v-if="userId"
+    :disabled="!user || !tooltip"
+    right
+  >
+    <template #activator="{ on, attrs }">
+      <v-list-item-avatar v-if="list" v-bind="attrs" v-on="on">
+        <v-img :src="imageURL" :alt="userId" @load="error = false" @error="error = true"> </v-img>
+      </v-list-item-avatar>
+      <v-avatar v-else :size="size" v-bind="attrs" v-on="on">
+        <v-img :src="imageURL" :alt="userId" @load="error = false" @error="error = true"> </v-img>
+      </v-avatar>
+    </template>
+    <span v-if="user">
+      {{ user.fullName }}
+    </span>
+  </v-tooltip>
 </template>
 
 <script lang="ts">
 import { defineComponent, toRefs, reactive, useContext, computed } from "@nuxtjs/composition-api";
+import { useUserStore } from "~/composables/store/use-user-store";
 import { UserOut } from "~/lib/api/types/user";
 
 export default defineComponent({
@@ -25,6 +37,10 @@ export default defineComponent({
       type: String,
       default: "42",
     },
+    tooltip: {
+      type: Boolean,
+      default: true,
+    }
   },
   setup(props) {
     const state = reactive({
@@ -32,15 +48,20 @@ export default defineComponent({
     });
 
     const { $auth } = useContext();
+    const { store: users } = useUserStore();
+    const user = computed(() => {
+      return users.value.find((user) => user.id === props.userId);
+    })
 
     const imageURL = computed(() => {
       // TODO Setup correct user type for $auth.user
-      const user = $auth.user as unknown as UserOut | null;
-      const key = user?.cacheKey ?? "";
+      const authUser = $auth.user as unknown as UserOut | null;
+      const key = authUser?.cacheKey ?? "";
       return `/api/media/users/${props.userId}/profile.webp?cacheKey=${key}`;
     });
 
     return {
+      user,
       imageURL,
       ...toRefs(state),
     };

frontend/components/Layout/LayoutParts/AppSidebar.vue

@@ -3,7 +3,7 @@
     <!-- User Profile -->
     <template v-if="loggedIn">
       <v-list-item two-line :to="userProfileLink" exact>
-        <UserAvatar list :user-id="$auth.user.id" />
+        <UserAvatar list :user-id="$auth.user.id" :tooltip="false" />
 
         <v-list-item-content>
           <v-list-item-title class="pr-2"> {{ $auth.user.fullName }}</v-list-item-title>