unify user popovers into a separate component

src/components/notification/notification.js

@@ -5,7 +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 UserPopover from '../user_popover/user_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'
@@ -48,7 +48,7 @@ const Notification = {
     Timeago,
     Status,
     RichContent,
-    Popover
+    UserPopover
   },
   methods: {
     toggleUserExpanded () {

src/components/notification/notification.vue

@@ -36,32 +36,18 @@
         :href="$router.resolve(userProfileLink).href"
         @click.prevent
       >
-        <Popover
-          trigger="click"
-          popover-class="popover-default user-popover"
-          :overlay-centers="true"
-          overlay-centers-selector=".user-info-avatar-link .Avatar"
+        <UserPopover
+          :userId="notification.from_profile.id"
+          :overlayCenters="true"
         >
-          <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>
+          <UserAvatar
+            class="post-avatar"
+            :bot="botIndicator"
+            :compact="true"
+            :better-shadow="betterShadow"
+            :user="notification.from_profile"
+          />
+        </UserPopover>
       </a>
       <div class="notification-right">
         <span class="notification-details">