unify user popovers into a separate component

2 files changed, 13 insertions, 36 deletions

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 06496258..053c9441 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -4,14 +4,13 @@ import ReactButton from '../react_button/react_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
 import ExtraButtons from '../extra_buttons/extra_buttons.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
-import UserCard from '../user_card/user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import AvatarList from '../avatar_list/avatar_list.vue'
 import Timeago from '../timeago/timeago.vue'
 import StatusContent from '../status_content/status_content.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import StatusPopover from '../status_popover/status_popover.vue'
-import Popover from '../popover/popover.vue'
+import UserPopover from '../user_popover/user_popover.vue'
 import UserListPopover from '../user_list_popover/user_list_popover.vue'
 import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
 import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
@@ -106,7 +105,6 @@ const Status = {
     RetweetButton,
     ExtraButtons,
     PostStatusForm,
-    UserCard,
     UserAvatar,
     AvatarList,
     Timeago,
@@ -117,7 +115,7 @@ const Status = {
     RichContent,
     MentionLink,
     MentionsLine,
-    Popover
+    UserPopover
   },
   props: [
     'statusoid',
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 624960fe..771d336a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -123,42 +123,21 @@
           class="left-side"
         >
           <a :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="status.user.id"
+              :overlayCenters="true"
             >
-              <template v-slot:trigger>
-                <UserAvatar
-                  class="post-avatar"
-                  :bot="botIndicator"
-                  :compact="compact"
-                  :better-shadow="betterShadow"
-                  :user="status.user"
-                />
-              </template>
-              <template v-slot:content>
-                <UserCard
-                  class="mention-link-popover"
-                  :user-id="status.user.id"
-                  :hide-bio="true"
-                  :bordered="false"
-                  :allow-zooming-avatar="true"
-                  :rounded="true"
-                />
-              </template>
-            </Popover>
+              <UserAvatar
+                class="post-avatar"
+                :bot="botIndicator"
+                :compact="compact"
+                :better-shadow="betterShadow"
+                :user="status.user"
+              />
+            </UserPopover>
           </a>
         </div>
         <div class="right-side">
-          <UserCard
-            v-if="userExpanded"
-            :user-id="status.user.id"
-            :rounded="true"
-            :bordered="true"
-            class="usercard"
-          />
           <div
             v-if="!noHeading"
             class="status-heading"