use user popovers in notifications as well

src/components/notification/notification.js

@@ -5,6 +5,7 @@ import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserCard from '../user_card/user_card.vue'
 import Timeago from '../timeago/timeago.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
+import Popover from '../popover/popover.vue'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -46,7 +47,8 @@ const Notification = {
     UserCard,
     Timeago,
     Status,
-    RichContent
+    RichContent,
+    Popover
   },
   methods: {
     toggleUserExpanded () {

src/components/notification/notification.vue

@@ -34,21 +34,36 @@
       <a
         class="avatar-container"
         :href="$router.resolve(userProfileLink).href"
-        @click.stop.prevent.capture="toggleUserExpanded"
+        @click.prevent
       >
-        <UserAvatar
+        <Popover
-          :compact="true"
+          trigger="click"
-          :better-shadow="betterShadow"
+          popover-class="popover-default user-popover"
-          :user="notification.from_profile"
+          :overlay-centers="true"
-        />
+          overlay-centers-selector=".user-info-avatar-link .Avatar"
+        >
+          <template v-slot:trigger>
+            <UserAvatar
+              class="post-avatar"
+              :bot="botIndicator"
+              :compact="true"
+              :better-shadow="betterShadow"
+              :user="notification.from_profile"
+            />
+          </template>
+          <template v-slot:content>
+            <UserCard
+              class="mention-link-popover"
+              :user-id="getUser(notification).id"
+              :hide-bio="true"
+              :bordered="false"
+              :allow-zooming-avatar="true"
+              :rounded="true"
+            />
+          </template>
+        </Popover>
       </a>
       <div class="notification-right">
-        <UserCard
-          v-if="userExpanded"
-          :user-id="getUser(notification).id"
-          :rounded="true"
-          :bordered="true"
-        />
         <span class="notification-details">
           <div class="name-and-action">
             <!-- eslint-disable vue/no-v-html -->