From fd831a27f4e9c6bcd5c40f3449d63546fba2560d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 20 May 2022 00:56:23 +0300
Subject: [PATCH 01/57] experimental disjointed popups

---
 src/App.vue                                  |  1 +
 src/components/popover/popover.js            | 10 ++++++-
 src/components/popover/popover.vue           | 28 +++++++++++---------
 src/components/react_button/react_button.vue |  1 +
 4 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5b4489729a..c217ade5a0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,6 +54,7 @@
     <PostStatusModal />
     <SettingsModal />
     <div id="modal" />
+    <div id="popovers" />
     <GlobalNoticeList />
   </div>
 </template>
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index a30a37c9df..db283ef070 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -43,6 +43,7 @@ const Popover = {
   methods: {
     containerBoundingClientRect () {
       const container = this.boundToSelector ? this.$el.closest(this.boundToSelector) : this.$el.offsetParent
+      console.log(container)
       return container.getBoundingClientRect()
     },
     updateStyles () {
@@ -125,10 +126,17 @@ const Popover = {
 
       // Note, separate translateX and translateY avoids blurry text on chromium,
       // single translate or translate3d resulted in blurry text.
+      console.log(translateX + screenBox.x + screenBox.width)
+      console.log(Math.round(parentBounds.width))
       this.styles = {
         opacity: 1,
-        transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)`
+        // transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)`
+        left: `${Math.round(translateX + screenBox.x + screenBox.width / 2)}px`,
+        top: `${Math.round(translateY + screenBox.y + screenBox.height / 2)}px`,
+        maxWidth: `${Math.round(parentBounds.width)}px`,
+        position: 'fixed'
       }
+      console.log(this.styles)
     },
     showPopover () {
       const wasHidden = this.hidden
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index c2a3e8016b..8f6ef2e6f0 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -11,19 +11,21 @@
     >
       <slot name="trigger" />
     </button>
-    <div
-      v-if="!hidden"
-      ref="content"
-      :style="styles"
-      class="popover"
-      :class="popoverClass || 'popover-default'"
-    >
-      <slot
-        name="content"
-        class="popover-inner"
-        :close="hidePopover"
-      />
-    </div>
+    <teleport to="#popovers">
+      <div
+        v-if="!hidden"
+        ref="content"
+        :style="styles"
+        class="popover"
+        :class="popoverClass || 'popover-default'"
+      >
+        <slot
+          name="content"
+          class="popover-inner"
+          :close="hidePopover"
+        />
+      </div>
+    </teleport>
   </div>
 </template>
 
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 7f35b7b5e4..8da691c0cd 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -6,6 +6,7 @@
     :offset="{ y: 5 }"
     :bound-to="{ x: 'container' }"
     remove-padding
+    popover-class="ReactButton popover-default"
     @show="focusInput"
   >
     <template v-slot:content="{close}">

From fa398b5e7aeb53709618d69de086a08b2248ba8c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 8 Jun 2022 03:08:03 +0300
Subject: [PATCH 02/57] popup offsets should be fixed now

---
 src/components/popover/popover.js | 43 ++++++++++++++-----------------
 1 file changed, 19 insertions(+), 24 deletions(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index db283ef070..7d1ad1d6b3 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -43,7 +43,6 @@ const Popover = {
   methods: {
     containerBoundingClientRect () {
       const container = this.boundToSelector ? this.$el.closest(this.boundToSelector) : this.$el.offsetParent
-      console.log(container)
       return container.getBoundingClientRect()
     },
     updateStyles () {
@@ -58,14 +57,15 @@ const Popover = {
       // its children are what are inside the slot. Expect only one v-slot:trigger.
       const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el
       // SVGs don't have offsetWidth/Height, use fallback
-      const anchorWidth = anchorEl.offsetWidth || anchorEl.clientWidth
       const anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight
-      const screenBox = anchorEl.getBoundingClientRect()
+      const anchorScreenBox = anchorEl.getBoundingClientRect()
+
       // Screen position of the origin point for popover
-      const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top }
+      const origin = { x: anchorScreenBox.left, y: anchorScreenBox.top }
       const content = this.$refs.content
+
       // Minor optimization, don't call a slow reflow call if we don't have to
-      const parentBounds = this.boundTo &&
+      const parentScreenBox = this.boundTo &&
         (this.boundTo.x === 'container' || this.boundTo.y === 'container') &&
         this.containerBoundingClientRect()
 
@@ -74,31 +74,30 @@ const Popover = {
       // What are the screen bounds for the popover? Viewport vs container
       // when using viewport, using default margin values to dodge the navbar
       const xBounds = this.boundTo && this.boundTo.x === 'container' ? {
-        min: parentBounds.left + (margin.left || 0),
-        max: parentBounds.right - (margin.right || 0)
+        min: parentScreenBox.left + (margin.left || 0),
+        max: parentScreenBox.right - (margin.right || 0)
       } : {
         min: 0 + (margin.left || 10),
         max: window.innerWidth - (margin.right || 10)
       }
 
       const yBounds = this.boundTo && this.boundTo.y === 'container' ? {
-        min: parentBounds.top + (margin.top || 0),
-        max: parentBounds.bottom - (margin.bottom || 0)
+        min: parentScreenBox.top + (margin.top || 0),
+        max: parentScreenBox.bottom - (margin.bottom || 0)
       } : {
         min: 0 + (margin.top || 50),
         max: window.innerHeight - (margin.bottom || 5)
       }
 
       let horizOffset = 0
-
       // If overflowing from left, move it so that it doesn't
-      if ((origin.x - content.offsetWidth * 0.5) < xBounds.min) {
-        horizOffset += -(origin.x - content.offsetWidth * 0.5) + xBounds.min
+      if ((origin.x) < xBounds.min) {
+        horizOffset += -origin.x + xBounds.min
       }
 
       // If overflowing from right, move it so that it doesn't
-      if ((origin.x + horizOffset + content.offsetWidth * 0.5) > xBounds.max) {
-        horizOffset -= (origin.x + horizOffset + content.offsetWidth * 0.5) - xBounds.max
+      if ((origin.x + horizOffset + content.offsetWidth) > xBounds.max) {
+        horizOffset -= (origin.x + horizOffset + content.offsetWidth) - xBounds.max
       }
 
       // Default to whatever user wished with placement prop
@@ -118,25 +117,21 @@ const Popover = {
 
       const yOffset = (this.offset && this.offset.y) || 0
       const translateY = usingTop
-        ? -anchorHeight + vPadding - yOffset - content.offsetHeight
-        : yOffset
+        ? yOffset - content.offsetHeight - vPadding
+        : yOffset + anchorHeight + vPadding
 
       const xOffset = (this.offset && this.offset.x) || 0
-      const translateX = anchorWidth * 0.5 - content.offsetWidth * 0.5 + horizOffset + xOffset
+      const translateX = horizOffset + xOffset
 
       // Note, separate translateX and translateY avoids blurry text on chromium,
       // single translate or translate3d resulted in blurry text.
-      console.log(translateX + screenBox.x + screenBox.width)
-      console.log(Math.round(parentBounds.width))
       this.styles = {
         opacity: 1,
-        // transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)`
-        left: `${Math.round(translateX + screenBox.x + screenBox.width / 2)}px`,
-        top: `${Math.round(translateY + screenBox.y + screenBox.height / 2)}px`,
-        maxWidth: `${Math.round(parentBounds.width)}px`,
+        left: `${Math.round(origin.x + translateX)}px`,
+        top: `${Math.round(origin.y + translateY)}px`,
+        maxWidth: `${parentScreenBox ? Math.round(parentScreenBox.width) : 0}px`,
         position: 'fixed'
       }
-      console.log(this.styles)
     },
     showPopover () {
       const wasHidden = this.hidden

From 832d7f2354b2f70e4100ac343c6ac4dd985eac3a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 8 Jun 2022 03:18:37 +0300
Subject: [PATCH 03/57] more fixes to chat popovers

---
 src/components/chat_message/chat_message.vue | 2 +-
 src/components/popover/popover.js            | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index d62b831dc5..0e1a5375d9 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -44,7 +44,7 @@
               <Popover
                 trigger="click"
                 placement="top"
-                :bound-to-selector="isCurrentUser ? '' : '.scrollable-message-list'"
+                bound-to-selector=".chat-view-inner"
                 :bound-to="{ x: 'container' }"
                 :margin="popoverMarginStyle"
                 @show="menuOpened = true"
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 7d1ad1d6b3..c65689bd1a 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -129,9 +129,12 @@ const Popover = {
         opacity: 1,
         left: `${Math.round(origin.x + translateX)}px`,
         top: `${Math.round(origin.y + translateY)}px`,
-        maxWidth: `${parentScreenBox ? Math.round(parentScreenBox.width) : 0}px`,
         position: 'fixed'
       }
+
+      if (parentScreenBox) {
+        this.styles.maxWidth = `${Math.round(parentScreenBox.width)}px`
+      }
     },
     showPopover () {
       const wasHidden = this.hidden

From e3b9c00d5e1bfadc0e1e1bcd06c43cf53035f0c0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 8 Jun 2022 03:22:15 +0300
Subject: [PATCH 04/57] hide popovers on scroll

---
 src/components/popover/popover.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index c65689bd1a..09e07b4c88 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -168,6 +168,9 @@ const Popover = {
       if (this.hidden) return
       if (this.$el.contains(e.target)) return
       this.hidePopover()
+    },
+    onScroll () {
+      this.hidePopover()
     }
   },
   updated () {
@@ -183,9 +186,11 @@ const Popover = {
   },
   created () {
     document.addEventListener('click', this.onClickOutside)
+    window.addEventListener('scroll', this.onScroll)
   },
   unmounted () {
     document.removeEventListener('click', this.onClickOutside)
+    window.removeEventListener('scroll', this.onScroll)
     this.hidePopover()
   }
 }

From 71b5462a059708e036bd2c998758e8fa1e205450 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 8 Jun 2022 03:22:50 +0300
Subject: [PATCH 05/57] vPadding is no longer needed

---
 src/components/popover/popover.js | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 09e07b4c88..1e8b3fb613 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -109,16 +109,10 @@ const Popover = {
       if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
       if (origin.y - content.offsetHeight < yBounds.min) usingTop = false
 
-      let vPadding = 0
-      if (this.removePadding && usingTop) {
-        const anchorStyle = getComputedStyle(anchorEl)
-        vPadding = parseFloat(anchorStyle.paddingTop) + parseFloat(anchorStyle.paddingBottom)
-      }
-
       const yOffset = (this.offset && this.offset.y) || 0
       const translateY = usingTop
-        ? yOffset - content.offsetHeight - vPadding
-        : yOffset + anchorHeight + vPadding
+        ? yOffset - content.offsetHeight
+        : yOffset + anchorHeight
 
       const xOffset = (this.offset && this.offset.x) || 0
       const translateX = horizOffset + xOffset

From ce00954e7c0c6b4d5640c886f88065db749d49c7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Jun 2022 15:21:09 +0300
Subject: [PATCH 06/57] turns out it is needed still + some code cleanup

---
 src/components/popover/popover.js | 40 ++++++++++++++++++++-----------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 1e8b3fb613..a91c084ffe 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -58,10 +58,18 @@ const Popover = {
       const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el
       // SVGs don't have offsetWidth/Height, use fallback
       const anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight
+      const anchorWidth = anchorEl.offsetWidth || anchorEl.clientWidth
       const anchorScreenBox = anchorEl.getBoundingClientRect()
 
-      // Screen position of the origin point for popover
-      const origin = { x: anchorScreenBox.left, y: anchorScreenBox.top }
+      const anchorStyle = getComputedStyle(anchorEl)
+      const topPadding = parseFloat(anchorStyle.paddingTop)
+      const bottomPadding = parseFloat(anchorStyle.paddingBottom)
+
+      // Screen position of the origin point for popover = center of the anchor
+      const origin = {
+        x: anchorScreenBox.left + anchorWidth * 0.5,
+        y: anchorScreenBox.top + anchorHeight * 0.5
+      }
       const content = this.$refs.content
 
       // Minor optimization, don't call a slow reflow call if we don't have to
@@ -89,15 +97,17 @@ const Popover = {
         max: window.innerHeight - (margin.bottom || 5)
       }
 
-      let horizOffset = 0
+      let horizOffset = content.offsetWidth * -0.5
+      const leftBorder = origin.x + horizOffset
+      const rightBorder = origin.x - horizOffset
       // If overflowing from left, move it so that it doesn't
-      if ((origin.x) < xBounds.min) {
-        horizOffset += -origin.x + xBounds.min
+      if (leftBorder < xBounds.min) {
+        horizOffset += xBounds.min - leftBorder
       }
 
       // If overflowing from right, move it so that it doesn't
-      if ((origin.x + horizOffset + content.offsetWidth) > xBounds.max) {
-        horizOffset -= (origin.x + horizOffset + content.offsetWidth) - xBounds.max
+      if (rightBorder > xBounds.max) {
+        horizOffset -= rightBorder - xBounds.max
       }
 
       // Default to whatever user wished with placement prop
@@ -106,23 +116,25 @@ const Popover = {
       // Handle special cases, first force to displaying on top if there's not space on bottom,
       // regardless of what placement value was. Then check if there's not space on top, and
       // force to bottom, again regardless of what placement value was.
-      if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
-      if (origin.y - content.offsetHeight < yBounds.min) usingTop = false
+      const topBoundary = origin.y - anchorHeight * 0.5 + (this.removePadding ? topPadding : 0)
+      const bottomBoundary = origin.y + anchorHeight * 0.5 - (this.removePadding ? bottomPadding : 0)
+      if (bottomBoundary + content.offsetHeight > yBounds.max) usingTop = true
+      if (topBoundary - content.offsetHeight < yBounds.min) usingTop = false
 
       const yOffset = (this.offset && this.offset.y) || 0
       const translateY = usingTop
-        ? yOffset - content.offsetHeight
-        : yOffset + anchorHeight
+        ? topBoundary - yOffset - content.offsetHeight
+        : bottomBoundary + yOffset
 
       const xOffset = (this.offset && this.offset.x) || 0
-      const translateX = horizOffset + xOffset
+      const translateX = origin.x + horizOffset + xOffset
 
       // Note, separate translateX and translateY avoids blurry text on chromium,
       // single translate or translate3d resulted in blurry text.
       this.styles = {
         opacity: 1,
-        left: `${Math.round(origin.x + translateX)}px`,
-        top: `${Math.round(origin.y + translateY)}px`,
+        left: `${Math.round(translateX)}px`,
+        top: `${Math.round(translateY)}px`,
         position: 'fixed'
       }
 

From 61d63b0e616392d841b78095ae8045e98d2b2fa6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Jun 2022 15:23:43 +0300
Subject: [PATCH 07/57] fix popovers so that all of them have shadows

---
 src/components/popover/popover.vue               | 2 ++
 src/components/status_popover/status_popover.vue | 2 --
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 8f6ef2e6f0..6103fbdce2 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -42,6 +42,8 @@
   z-index: 500;
   position: absolute;
   min-width: 0;
+  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--popupShadow);
 }
 
 .popover-default {
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index fdca8c9ce0..b6a3be3240 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -52,8 +52,6 @@
   border-width: 1px;
   border-radius: $fallback--tooltipRadius;
   border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-  box-shadow: var(--popupShadow);
 
   /* TODO cleanup this */
   .Status.Status {

From 55adcd822e194be8aaeb9d6b649de90e9d5e1e45 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Jun 2022 16:31:56 +0300
Subject: [PATCH 08/57] fix animations, replace ugly old mentionlink tooltips
 with new usercard ones

---
 src/App.scss                                  |   2 +-
 src/components/mention_link/mention_link.js   |   8 +-
 src/components/mention_link/mention_link.scss |   7 +-
 src/components/mention_link/mention_link.vue  | 133 ++++++++++--------
 src/components/popover/popover.js             |  40 ++++--
 src/components/popover/popover.vue            |  36 ++---
 .../settings_modal/tabs/general_tab.vue       |   2 +-
 src/i18n/en.json                              |   2 +-
 8 files changed, 140 insertions(+), 90 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 5cd0b96e3a..79c076831c 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -829,7 +829,7 @@ option {
 // Vue transitions
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.2s;
+  transition: opacity 0.3s;
 }
 
 .fade-enter-from,
diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 55eea19520..4b088f883a 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -2,6 +2,7 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p
 import { mapGetters, mapState } from 'vuex'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import { defineAsyncComponent } from 'vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faAt
@@ -14,7 +15,9 @@ library.add(
 const MentionLink = {
   name: 'MentionLink',
   components: {
-    UserAvatar
+    UserAvatar,
+    Popover: defineAsyncComponent(() => import('../popover/popover.vue')),
+    UserCard: defineAsyncComponent(() => import('../user_card/user_card.vue'))
   },
   props: {
     url: {
@@ -36,6 +39,7 @@ const MentionLink = {
   },
   methods: {
     onClick () {
+      if (this.shouldShowTooltip) return
       const link = generateProfileLink(
         this.userId || this.user.id,
         this.userScreenName || this.user.screen_name
@@ -110,7 +114,7 @@ const MentionLink = {
       }
     },
     shouldShowTooltip () {
-      return this.mergedConfig.mentionLinkShowTooltip && this.mergedConfig.mentionLinkDisplay === 'short' && this.isRemote
+      return this.mergedConfig.mentionLinkShowTooltip
     },
     shouldShowAvatar () {
       return this.mergedConfig.mentionLinkShowAvatar
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index 1d856ff959..3b3a05b137 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -101,7 +101,6 @@
   }
 
   &:hover .new .full {
-    opacity: 1;
     pointer-events: initial;
   }
 
@@ -113,3 +112,9 @@
     color: var(--faint, $fallback--faint);
   }
 }
+
+.mention-link-popover {
+  max-width: 70ch;
+  max-height: 20rem;
+  overflow: hidden;
+}
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 022f04c745..686ad27f9a 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -9,66 +9,85 @@
       class="original"
       target="_blank"
       v-html="content"
-    /><!-- eslint-enable vue/no-v-html --><span
-      v-if="user"
-      class="new"
-      :style="style"
-      :class="classnames"
+    /><!-- eslint-enable vue/no-v-html -->
+    <Popover
+      trigger="click"
+      :bound-to="{ x: 'container'}"
+      bound-to-selector=".column"
+      popover-class="popover-default mention-popover"
+      :disabled="!shouldShowTooltip"
     >
-      <a
-        class="short button-unstyled"
-        :class="{ '-with-tooltip': shouldShowTooltip }"
-        :href="url"
-        @click.prevent="onClick"
-      >
-        <!-- eslint-disable vue/no-v-html -->
-        <UserAvatar
-          v-if="shouldShowAvatar"
-          class="mention-avatar"
-          :user="user"
-        /><span
-          class="shortName"
-        ><FAIcon
-          v-if="useAtIcon"
-          size="sm"
-          icon="at"
-          class="at"
-        />{{ !useAtIcon ? '@' : '' }}<span
-          class="userName"
-          v-html="userName"
-        /><span
-          v-if="shouldShowFullUserName"
-          class="serverName"
-          :class="{ '-faded': shouldFadeDomain }"
-          v-html="'@' + serverName"
-        />
-        </span>
+      <template v-slot:trigger>
         <span
-          v-if="isYou && shouldShowYous"
-          :class="{ '-you': shouldBoldenYou }"
-        > {{ ' ' + $t('status.you') }}</span>
-        <!-- eslint-enable vue/no-v-html -->
-      </a><span
-        v-if="shouldShowTooltip"
-        class="full popover-default"
-        :class="[highlightType]"
-      >
-        <span
-          class="userNameFull"
+          v-if="user"
+          class="new"
+          :style="style"
+          :class="classnames"
         >
-          <!-- eslint-disable vue/no-v-html -->
-          @<span
-            class="userName"
-            v-html="userName"
-          /><span
-            class="serverName"
-            :class="{ '-faded': shouldFadeDomain }"
-            v-html="'@' + serverName"
-          />
-          <!-- eslint-enable vue/no-v-html -->
-        </span>
-      </span>
-    </span>
+          <a
+            class="short button-unstyled"
+            :class="{ '-with-tooltip': shouldShowTooltip }"
+            :href="url"
+            @click.prevent="onClick"
+          >
+            <!-- eslint-disable vue/no-v-html -->
+            <UserAvatar
+              v-if="shouldShowAvatar"
+              class="mention-avatar"
+              :user="user"
+            /><span
+              class="shortName"
+            ><FAIcon
+              v-if="useAtIcon"
+              size="sm"
+              icon="at"
+              class="at"
+            />{{ !useAtIcon ? '@' : '' }}<span
+              class="userName"
+              v-html="userName"
+            /><span
+              v-if="shouldShowFullUserName"
+              class="serverName"
+              :class="{ '-faded': shouldFadeDomain }"
+              v-html="'@' + serverName"
+            />
+            </span>
+            <span
+              v-if="isYou && shouldShowYous"
+              :class="{ '-you': shouldBoldenYou }"
+            > {{ ' ' + $t('status.you') }}</span>
+            <!-- eslint-enable vue/no-v-html -->
+          </a><span
+            v-if="shouldShowTooltip"
+            class="full"
+          >
+            <span
+              class="userNameFull"
+            >
+              <!-- eslint-disable vue/no-v-html -->
+              @<span
+                class="userName"
+                v-html="userName"
+              /><span
+                class="serverName"
+                :class="{ '-faded': shouldFadeDomain }"
+                v-html="'@' + serverName"
+              />
+              <!-- eslint-enable vue/no-v-html -->
+            </span>
+          </span>
+        </span></template>
+      <template v-slot:content>
+        <UserCard
+          class="mention-link-popover"
+          :user-id="user.id"
+          :hide-bio="true"
+          :bordered="false"
+          :allow-zooming-avatar="true"
+          :rounded="true"
+        />
+      </template>
+    </Popover>
   </span>
 </template>
 
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index a91c084ffe..3c3a95bdfb 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -31,13 +31,18 @@ const Popover = {
 
     // If true, subtract padding when calculating position for the popover,
     // use it when popover offset looks to be different on top vs bottom.
-    removePadding: Boolean
+    removePadding: Boolean,
+
+    // self-explanatory (i hope)
+    disabled: Boolean
   },
   data () {
     return {
       hidden: true,
-      styles: { opacity: 0 },
-      oldSize: { width: 0, height: 0 }
+      styles: {},
+      oldSize: { width: 0, height: 0 },
+      // used to avoid blinking if hovered onto popover
+      graceTimeout: null
     }
   },
   methods: {
@@ -47,9 +52,7 @@ const Popover = {
     },
     updateStyles () {
       if (this.hidden) {
-        this.styles = {
-          opacity: 0
-        }
+        this.styles = {}
         return
       }
 
@@ -132,7 +135,6 @@ const Popover = {
       // Note, separate translateX and translateY avoids blurry text on chromium,
       // single translate or translate3d resulted in blurry text.
       this.styles = {
-        opacity: 1,
         left: `${Math.round(translateX)}px`,
         top: `${Math.round(translateY)}px`,
         position: 'fixed'
@@ -143,6 +145,7 @@ const Popover = {
       }
     },
     showPopover () {
+      if (this.disabled) return
       const wasHidden = this.hidden
       this.hidden = false
       this.$nextTick(() => {
@@ -153,13 +156,30 @@ const Popover = {
     hidePopover () {
       if (!this.hidden) this.$emit('close')
       this.hidden = true
-      this.styles = { opacity: 0 }
     },
     onMouseenter (e) {
-      if (this.trigger === 'hover') this.showPopover()
+      if (this.trigger === 'hover') {
+        clearTimeout(this.graceTimeout)
+        this.graceTimeout = null
+        this.showPopover()
+      }
     },
     onMouseleave (e) {
-      if (this.trigger === 'hover') this.hidePopover()
+      if (this.trigger === 'hover') {
+        this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
+      }
+    },
+    onMouseenterContent (e) {
+      if (this.trigger === 'hover') {
+        clearTimeout(this.graceTimeout)
+        this.graceTimeout = null
+        this.showPopover()
+      }
+    },
+    onMouseleaveContent (e) {
+      if (this.trigger === 'hover') {
+        this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
+      }
     },
     onClick (e) {
       if (this.trigger === 'click') {
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 6103fbdce2..528c4fb21d 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -1,5 +1,5 @@
 <template>
-  <div
+  <span
     @mouseenter="onMouseenter"
     @mouseleave="onMouseleave"
   >
@@ -12,21 +12,25 @@
       <slot name="trigger" />
     </button>
     <teleport to="#popovers">
-      <div
-        v-if="!hidden"
-        ref="content"
-        :style="styles"
-        class="popover"
-        :class="popoverClass || 'popover-default'"
-      >
-        <slot
-          name="content"
-          class="popover-inner"
-          :close="hidePopover"
-        />
-      </div>
+      <transition name="fade">
+        <div
+          v-if="!hidden"
+          ref="content"
+          :style="styles"
+          class="popover"
+          :class="popoverClass || 'popover-default'"
+          @mouseenter="onMouseenterContent"
+          @mouseleave="onMouseleaveContent"
+        >
+          <slot
+            name="content"
+            class="popover-inner"
+            :close="hidePopover"
+          />
+        </div>
+      </transition>
     </teleport>
-  </div>
+  </span>
 </template>
 
 <script src="./popover.js" />
@@ -47,8 +51,6 @@
 }
 
 .popover-default {
-  transition: opacity 0.3s;
-
   &:after {
     content: '';
     position: absolute;
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 1fe51b6d10..5b4a126eaa 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -269,7 +269,7 @@
               path="mentionLinkShowTooltip"
               expert="1"
             >
-              {{ $t('settings.mention_link_show_tooltip') }}
+              {{ $t('settings.mention_link_use_tooltip') }}
             </BooleanSetting>
           </li>
         </ul>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 0cfda8040a..053e91ff78 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -523,7 +523,7 @@
     "mention_link_display_short": "always as short names (e.g. {'@'}foo)",
     "mention_link_display_full_for_remote": "as full names only for remote users (e.g. {'@'}foo{'@'}example.org)",
     "mention_link_display_full": "always as full names (e.g. {'@'}foo{'@'}example.org)",
-    "mention_link_show_tooltip": "Show full user names as tooltip for remote users",
+    "mention_link_use_tooltip": "Show user card when clicking mention links",
     "mention_link_show_avatar": "Show user avatar beside the link",
     "mention_link_fade_domain": "Fade domains (e.g. {'@'}example.org in {'@'}foo{'@'}example.org)",
     "mention_link_bolden_you": "Highlight mention of you when you are mentioned",

From 8979548ed8aa8255ddf7d2f7647eb3d2663087c2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Jun 2022 16:32:32 +0300
Subject: [PATCH 09/57] remove duplicate buttons on post buttons

---
 src/components/extra_buttons/extra_buttons.vue | 4 ++--
 src/components/react_button/react_button.vue   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index a3c3c767b1..cafba47046 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -119,12 +119,12 @@
       </div>
     </template>
     <template v-slot:trigger>
-      <button class="button-unstyled popover-trigger">
+      <span class="button-unstyled popover-trigger">
         <FAIcon
           class="fa-scale-110 fa-old-padding"
           icon="ellipsis-h"
         />
-      </button>
+      </span>
     </template>
   </Popover>
 </template>
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 8da691c0cd..a6541d6fef 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -41,7 +41,7 @@
       </div>
     </template>
     <template v-slot:trigger>
-      <button
+      <span
         class="button-unstyled popover-trigger"
         :title="$t('tool_tip.add_reaction')"
       >
@@ -49,7 +49,7 @@
           class="fa-scale-110 fa-old-padding"
           :icon="['far', 'smile-beam']"
         />
-      </button>
+      </span>
     </template>
   </Popover>
 </template>

From 85de0927faf5cece654c6816bd43f77114f0b4df Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Jun 2022 01:30:20 +0300
Subject: [PATCH 10/57] recalculate position on scrolls

---
 src/components/popover/popover.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 3c3a95bdfb..dbd446a563 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -195,8 +195,8 @@ const Popover = {
       if (this.$el.contains(e.target)) return
       this.hidePopover()
     },
-    onScroll () {
-      this.hidePopover()
+    onScroll (e) {
+      this.updateStyles()
     }
   },
   updated () {
@@ -210,13 +210,17 @@ const Popover = {
       this.oldSize = { width: content.offsetWidth, height: content.offsetHeight }
     }
   },
-  created () {
+  mounted () {
+    let scrollable = this.$refs.trigger.closest('.column.-scrollable')
+    if (!scrollable) scrollable = window
     document.addEventListener('click', this.onClickOutside)
-    window.addEventListener('scroll', this.onScroll)
+    scrollable.addEventListener('scroll', this.onScroll)
   },
-  unmounted () {
+  beforeUnmount () {
+    let scrollable = this.$refs.trigger.closest('.column.-scrollable')
+    if (!scrollable) scrollable = window
     document.removeEventListener('click', this.onClickOutside)
-    window.removeEventListener('scroll', this.onScroll)
+    scrollable.removeEventListener('scroll', this.onScroll)
     this.hidePopover()
   }
 }

From 97e4a3d8e52bc2255f4be23967a2223f5e458a67 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Jun 2022 01:36:41 +0300
Subject: [PATCH 11/57] fix popovers in modals

---
 src/App.js                         | 3 +--
 src/App.vue                        | 2 +-
 src/components/popover/popover.vue | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index f01f878826..d596768599 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,7 +4,6 @@ import InstanceSpecificPanel from './components/instance_specific_panel/instance
 import FeaturesPanel from './components/features_panel/features_panel.vue'
 import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
 import ShoutPanel from './components/shout_panel/shout_panel.vue'
-import SettingsModal from './components/settings_modal/settings_modal.vue'
 import MediaModal from './components/media_modal/media_modal.vue'
 import SideDrawer from './components/side_drawer/side_drawer.vue'
 import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
@@ -32,7 +31,7 @@ export default {
     MobilePostStatusButton,
     MobileNav,
     DesktopNav,
-    SettingsModal,
+    SettingsModal: defineAsyncComponent(() => import('./components/settings_modal/settings_modal.vue')),
     UserReportingModal,
     PostStatusModal,
     GlobalNoticeList
diff --git a/src/App.vue b/src/App.vue
index c217ade5a0..5d7bb4e196 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,8 +54,8 @@
     <PostStatusModal />
     <SettingsModal />
     <div id="modal" />
-    <div id="popovers" />
     <GlobalNoticeList />
+    <div id="popovers" />
   </div>
 </template>
 
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 528c4fb21d..25ce32fb7c 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -43,7 +43,7 @@
 }
 
 .popover {
-  z-index: 500;
+  z-index: 90000;
   position: absolute;
   min-width: 0;
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);

From 3628fb4272c0b9f5a66f0de61e6c4f37f4908fe7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Jun 2022 13:19:54 +0300
Subject: [PATCH 12/57] fix tests

---
 .../specs/components/rich_content.spec.js     | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index 958fb99723..cd8d4b86b0 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -4,7 +4,15 @@ import RichContent from 'src/components/rich_content/rich_content.jsx'
 const attentions = []
 const global = {
   mocks: {
-    '$store': null
+    '$store': {
+      state: {},
+      getters: {
+        mergedConfig: () => ({
+          mentionLinkShowTooltip: true
+        }),
+        findUserByUrl: () => null
+      }
+    }
   },
   stubs: {
     FAIcon: true
@@ -131,8 +139,7 @@ describe('RichContent', () => {
       ].join(''),
       [
         makeMention('John'),
-        makeMention('Josh'),
-        makeMention('Jeremy')
+        makeMention('Josh'), makeMention('Jeremy')
       ].join('')
     ].join('\n')
 
@@ -359,9 +366,9 @@ describe('RichContent', () => {
         '</span>',
         '</a>',
         '<!-- eslint-enable vue/no-v-html -->',
-        '<!--v-if-->', // v-if placeholder, mentionlink's "new" (i.e. rich) display
+        '<!---->', // vue placeholder
         '</span>',
-        '<!--v-if-->', // v-if placeholder, mentionsline's extra mentions and stuff
+        '<!--v-if-->', // vue placeholder, mentionsline's extra mentions and stuff
         '</span>'
       ),
       p(
@@ -422,7 +429,7 @@ describe('RichContent', () => {
       '</span>',
       '</a>',
       '<!-- eslint-enable vue/no-v-html -->',
-      '<!--v-if-->', // v-if placeholder, mentionlink's "new" (i.e. rich) display
+      '<!---->', // vue placeholder, mentionlink's "new" (i.e. rich) display
       '</span>',
       '<span class="MentionLink mention-link">',
       '<!-- eslint-disable vue/no-v-html -->',
@@ -435,9 +442,9 @@ describe('RichContent', () => {
       '</span>',
       '</a>',
       '<!-- eslint-enable vue/no-v-html -->',
-      '<!--v-if-->', // v-if placeholder, mentionlink's "new" (i.e. rich) display
+      '<!---->', // vue placeholder, mentionlink's "new" (i.e. rich) display
       '</span>',
-      '<!--v-if-->', // v-if placeholder, mentionsline's extra mentions and stuff
+      '<!--v-if-->', // vue placeholder, mentionsline's extra mentions and stuff
       '</span>',
       ' ',
       '</span>',

From 7c633aa9525c8a0533281947c587ff1a5ded75ec Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Jun 2022 13:45:04 +0300
Subject: [PATCH 13/57] user popovers WIP

---
 src/components/popover/popover.js  | 83 ++++++++++++++++++------------
 src/components/popover/popover.vue |  2 +-
 src/components/status/status.js    |  4 +-
 src/components/status/status.vue   | 38 ++++++++++----
 4 files changed, 80 insertions(+), 47 deletions(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index dbd446a563..233572a473 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -34,7 +34,13 @@ const Popover = {
     removePadding: Boolean,
 
     // self-explanatory (i hope)
-    disabled: Boolean
+    disabled: Boolean,
+
+    // Instead of putting popover next to anchor, overlay popover's center on top of anchor's center
+    overlayCenters: Boolean,
+
+    // What selector (witin popover!) to use for determining center of popover
+    overlayCentersSelector: String
   },
   data () {
     return {
@@ -73,7 +79,9 @@ const Popover = {
         x: anchorScreenBox.left + anchorWidth * 0.5,
         y: anchorScreenBox.top + anchorHeight * 0.5
       }
-      const content = this.$refs.content
+      const content = this.overlayCentersSelector
+        ? this.$refs.content.querySelector(this.overlayCentersSelector)
+        : this.$refs.content
 
       // Minor optimization, don't call a slow reflow call if we don't have to
       const parentScreenBox = this.boundTo &&
@@ -100,44 +108,51 @@ const Popover = {
         max: window.innerHeight - (margin.bottom || 5)
       }
 
-      let horizOffset = content.offsetWidth * -0.5
-      const leftBorder = origin.x + horizOffset
-      const rightBorder = origin.x - horizOffset
-      // If overflowing from left, move it so that it doesn't
-      if (leftBorder < xBounds.min) {
-        horizOffset += xBounds.min - leftBorder
-      }
+      if (!this.overlayCenters) {
+        let horizOffset = content.offsetWidth * -0.5
+        const leftBorder = origin.x + horizOffset
+        const rightBorder = origin.x - horizOffset
+        // If overflowing from left, move it so that it doesn't
+        if (leftBorder < xBounds.min) {
+          horizOffset += xBounds.min - leftBorder
+        }
 
-      // If overflowing from right, move it so that it doesn't
-      if (rightBorder > xBounds.max) {
-        horizOffset -= rightBorder - xBounds.max
-      }
+        // If overflowing from right, move it so that it doesn't
+        if (rightBorder > xBounds.max) {
+          horizOffset -= rightBorder - xBounds.max
+        }
 
-      // Default to whatever user wished with placement prop
-      let usingTop = this.placement !== 'bottom'
+        // Default to whatever user wished with placement prop
+        let usingTop = this.placement !== 'bottom'
 
-      // Handle special cases, first force to displaying on top if there's not space on bottom,
-      // regardless of what placement value was. Then check if there's not space on top, and
-      // force to bottom, again regardless of what placement value was.
-      const topBoundary = origin.y - anchorHeight * 0.5 + (this.removePadding ? topPadding : 0)
-      const bottomBoundary = origin.y + anchorHeight * 0.5 - (this.removePadding ? bottomPadding : 0)
-      if (bottomBoundary + content.offsetHeight > yBounds.max) usingTop = true
-      if (topBoundary - content.offsetHeight < yBounds.min) usingTop = false
+        // Handle special cases, first force to displaying on top if there's not space on bottom,
+        // regardless of what placement value was. Then check if there's not space on top, and
+        // force to bottom, again regardless of what placement value was.
+        const topBoundary = origin.y - anchorHeight * 0.5 + (this.removePadding ? topPadding : 0)
+        const bottomBoundary = origin.y + anchorHeight * 0.5 - (this.removePadding ? bottomPadding : 0)
+        if (bottomBoundary + content.offsetHeight > yBounds.max) usingTop = true
+        if (topBoundary - content.offsetHeight < yBounds.min) usingTop = false
 
-      const yOffset = (this.offset && this.offset.y) || 0
-      const translateY = usingTop
-        ? topBoundary - yOffset - content.offsetHeight
-        : bottomBoundary + yOffset
+        const yOffset = (this.offset && this.offset.y) || 0
+        const translateY = usingTop
+          ? topBoundary - yOffset - content.offsetHeight
+          : bottomBoundary + yOffset
 
-      const xOffset = (this.offset && this.offset.x) || 0
-      const translateX = origin.x + horizOffset + xOffset
+        const xOffset = (this.offset && this.offset.x) || 0
+        const translateX = origin.x + horizOffset + xOffset
 
-      // Note, separate translateX and translateY avoids blurry text on chromium,
-      // single translate or translate3d resulted in blurry text.
-      this.styles = {
-        left: `${Math.round(translateX)}px`,
-        top: `${Math.round(translateY)}px`,
-        position: 'fixed'
+        this.styles = {
+          left: `${Math.round(translateX)}px`,
+          top: `${Math.round(translateY)}px`
+        }
+      } else {
+        const translateY = origin.y - content.offsetHeight
+        const translateX = origin.x - content.offsetWidth
+
+        this.styles = {
+          left: `${Math.round(translateX)}px`,
+          top: `${Math.round(translateY)}px`
+        }
       }
 
       if (parentScreenBox) {
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 25ce32fb7c..977c355920 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -44,7 +44,7 @@
 
 .popover {
   z-index: 90000;
-  position: absolute;
+  position: fixed;
   min-width: 0;
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
   box-shadow: var(--popupShadow);
diff --git a/src/components/status/status.js b/src/components/status/status.js
index a925f30be5..0649625874 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -11,6 +11,7 @@ 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 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'
@@ -115,7 +116,8 @@ const Status = {
     StatusContent,
     RichContent,
     MentionLink,
-    MentionsLine
+    MentionsLine,
+    Popover
   },
   props: [
     'statusoid',
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 67ce999a45..624960fef7 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -122,17 +122,33 @@
           v-if="!noHeading"
           class="left-side"
         >
-          <a
-            :href="$router.resolve(userProfileLink).href"
-            @click.stop.prevent.capture="toggleUserExpanded"
-          >
-            <UserAvatar
-              class="post-avatar"
-              :bot="botIndicator"
-              :compact="compact"
-              :better-shadow="betterShadow"
-              :user="status.user"
-            />
+          <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"
+            >
+              <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>
           </a>
         </div>
         <div class="right-side">

From d3b5d27f297ae37a9684cb7d8fb2602e4c66b919 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 15 Jun 2022 03:50:57 +0300
Subject: [PATCH 14/57] properly center user popovers

---
 src/components/popover/popover.js | 68 ++++++++++++++++++-------------
 1 file changed, 40 insertions(+), 28 deletions(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 233572a473..5fd5d94f2c 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -79,9 +79,10 @@ const Popover = {
         x: anchorScreenBox.left + anchorWidth * 0.5,
         y: anchorScreenBox.top + anchorHeight * 0.5
       }
-      const content = this.overlayCentersSelector
+      const content = this.$refs.content
+      const overlayCenter = this.overlayCentersSelector
         ? this.$refs.content.querySelector(this.overlayCentersSelector)
-        : this.$refs.content
+        : null
 
       // Minor optimization, don't call a slow reflow call if we don't have to
       const parentScreenBox = this.boundTo &&
@@ -108,20 +109,39 @@ const Popover = {
         max: window.innerHeight - (margin.bottom || 5)
       }
 
-      if (!this.overlayCenters) {
-        let horizOffset = content.offsetWidth * -0.5
-        const leftBorder = origin.x + horizOffset
-        const rightBorder = origin.x - horizOffset
-        // If overflowing from left, move it so that it doesn't
-        if (leftBorder < xBounds.min) {
-          horizOffset += xBounds.min - leftBorder
-        }
+      let horizOffset = 0
+      let vertOffset = 0
 
-        // If overflowing from right, move it so that it doesn't
-        if (rightBorder > xBounds.max) {
-          horizOffset -= rightBorder - xBounds.max
-        }
+      if (overlayCenter) {
+        const box = content.getBoundingClientRect()
+        const overlayCenterScreenBox = overlayCenter.getBoundingClientRect()
+        const leftInnerOffset = overlayCenterScreenBox.left - box.left
+        const topInnerOffset = overlayCenterScreenBox.top - box.top
+        horizOffset = -leftInnerOffset - overlayCenter.offsetWidth * 0.5
+        vertOffset = -topInnerOffset - overlayCenter.offsetWidth * 0.5
+      } else {
+        horizOffset = content.offsetWidth * -0.5
+        vertOffset = content.offsetWidth * -0.5
+      }
+      const leftBorder = origin.x + horizOffset
+      const rightBorder = origin.x - horizOffset
+      // If overflowing from left, move it so that it doesn't
+      if (leftBorder < xBounds.min) {
+        horizOffset += xBounds.min - leftBorder
+      }
 
+      // If overflowing from right, move it so that it doesn't
+      if (rightBorder > xBounds.max) {
+        horizOffset -= rightBorder - xBounds.max
+      }
+
+      let translateX = 0
+      let translateY = 0
+
+      if (overlayCenter) {
+        translateX = origin.x + horizOffset
+        translateY = origin.y + vertOffset
+      } else {
         // Default to whatever user wished with placement prop
         let usingTop = this.placement !== 'bottom'
 
@@ -134,25 +154,17 @@ const Popover = {
         if (topBoundary - content.offsetHeight < yBounds.min) usingTop = false
 
         const yOffset = (this.offset && this.offset.y) || 0
-        const translateY = usingTop
+        translateY = usingTop
           ? topBoundary - yOffset - content.offsetHeight
           : bottomBoundary + yOffset
 
         const xOffset = (this.offset && this.offset.x) || 0
-        const translateX = origin.x + horizOffset + xOffset
+        translateX = origin.x + horizOffset + xOffset
+      }
 
-        this.styles = {
-          left: `${Math.round(translateX)}px`,
-          top: `${Math.round(translateY)}px`
-        }
-      } else {
-        const translateY = origin.y - content.offsetHeight
-        const translateX = origin.x - content.offsetWidth
-
-        this.styles = {
-          left: `${Math.round(translateX)}px`,
-          top: `${Math.round(translateY)}px`
-        }
+      this.styles = {
+        left: `${Math.round(translateX)}px`,
+        top: `${Math.round(translateY)}px`
       }
 
       if (parentScreenBox) {

From 30c4a66518329b307d06f1fcfc39a7bf0c453f28 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 15 Jun 2022 04:01:46 +0300
Subject: [PATCH 15/57] use user popovers in notifications as well

---
 src/components/notification/notification.js  |  4 +-
 src/components/notification/notification.vue | 39 ++++++++++++++------
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 398bb7a919..9408b21782 100644
--- a/src/components/notification/notification.js
+++ b/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 () {
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 7d3d0c6946..a44481c9b6 100644
--- a/src/components/notification/notification.vue
+++ b/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
-          :compact="true"
-          :better-shadow="betterShadow"
-          :user="notification.from_profile"
-        />
+        <Popover
+          trigger="click"
+          popover-class="popover-default user-popover"
+          :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 -->

From b343599e6f71bc68f868ac3d44d37af4b1f2665f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 15 Jun 2022 04:02:05 +0300
Subject: [PATCH 16/57] don't hide on clicks in popover's content

---
 src/components/popover/popover.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 5fd5d94f2c..7f4c1cac96 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -219,6 +219,7 @@ const Popover = {
     },
     onClickOutside (e) {
       if (this.hidden) return
+      if (this.$refs.content.contains(e.target)) return
       if (this.$el.contains(e.target)) return
       this.hidePopover()
     },

From 770d12f7adda5659ff01b83ad3e172c27bae818d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 15 Jun 2022 04:03:18 +0300
Subject: [PATCH 17/57] limit width of popover to slightly lesser than screen
 width

---
 src/components/popover/popover.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 977c355920..5c45be735b 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -46,6 +46,7 @@
   z-index: 90000;
   position: fixed;
   min-width: 0;
+  max-width: 90vw;
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
   box-shadow: var(--popupShadow);
 }

From d84cda7009d486a047953b1ca2d27acf35b8ddc1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <spam@hjkos.com>
Date: Thu, 16 Jun 2022 16:30:05 +0300
Subject: [PATCH 18/57] unify user popovers into a separate component

---
 src/components/mention_link/mention_link.js  |   3 +-
 src/components/mention_link/mention_link.vue | 115 ++++++++-----------
 src/components/notification/notification.js  |   4 +-
 src/components/notification/notification.vue |  36 ++----
 src/components/popover/popover.js            |   2 +-
 src/components/status/status.js              |   6 +-
 src/components/status/status.vue             |  43 ++-----
 src/components/user_popover/user_popover.js  |  14 +++
 src/components/user_popover/user_popover.vue |  34 ++++++
 9 files changed, 127 insertions(+), 130 deletions(-)
 create mode 100644 src/components/user_popover/user_popover.js
 create mode 100644 src/components/user_popover/user_popover.vue

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 4b088f883a..7e47625a2d 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -16,8 +16,7 @@ const MentionLink = {
   name: 'MentionLink',
   components: {
     UserAvatar,
-    Popover: defineAsyncComponent(() => import('../popover/popover.vue')),
-    UserCard: defineAsyncComponent(() => import('../user_card/user_card.vue'))
+    UserPopover: defineAsyncComponent(() => import('../user_popover/user_popover.vue'))
   },
   props: {
     url: {
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 686ad27f9a..0cff50abf9 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -10,84 +10,71 @@
       target="_blank"
       v-html="content"
     /><!-- eslint-enable vue/no-v-html -->
-    <Popover
-      trigger="click"
-      :bound-to="{ x: 'container'}"
-      bound-to-selector=".column"
-      popover-class="popover-default mention-popover"
+    <UserPopover
+      v-else
+      :userId="user.id"
       :disabled="!shouldShowTooltip"
     >
-      <template v-slot:trigger>
-        <span
-          v-if="user"
-          class="new"
-          :style="style"
-          :class="classnames"
+      <span
+        v-if="user"
+        class="new"
+        :style="style"
+        :class="classnames"
+      >
+        <a
+          class="short button-unstyled"
+          :class="{ '-with-tooltip': shouldShowTooltip }"
+          :href="url"
+          @click.prevent="onClick"
         >
-          <a
-            class="short button-unstyled"
-            :class="{ '-with-tooltip': shouldShowTooltip }"
-            :href="url"
-            @click.prevent="onClick"
+          <!-- eslint-disable vue/no-v-html -->
+          <UserAvatar
+            v-if="shouldShowAvatar"
+            class="mention-avatar"
+            :user="user"
+          /><span
+            class="shortName"
+          ><FAIcon
+            v-if="useAtIcon"
+            size="sm"
+            icon="at"
+            class="at"
+          />{{ !useAtIcon ? '@' : '' }}<span
+            class="userName"
+            v-html="userName"
+          /><span
+            v-if="shouldShowFullUserName"
+            class="serverName"
+            :class="{ '-faded': shouldFadeDomain }"
+            v-html="'@' + serverName"
+          />
+          </span>
+          <span
+            v-if="isYou && shouldShowYous"
+            :class="{ '-you': shouldBoldenYou }"
+          > {{ ' ' + $t('status.you') }}</span>
+          <!-- eslint-enable vue/no-v-html -->
+        </a><span
+          v-if="shouldShowTooltip"
+          class="full"
+        >
+          <span
+            class="userNameFull"
           >
             <!-- eslint-disable vue/no-v-html -->
-            <UserAvatar
-              v-if="shouldShowAvatar"
-              class="mention-avatar"
-              :user="user"
-            /><span
-              class="shortName"
-            ><FAIcon
-              v-if="useAtIcon"
-              size="sm"
-              icon="at"
-              class="at"
-            />{{ !useAtIcon ? '@' : '' }}<span
+            @<span
               class="userName"
               v-html="userName"
             /><span
-              v-if="shouldShowFullUserName"
               class="serverName"
               :class="{ '-faded': shouldFadeDomain }"
               v-html="'@' + serverName"
             />
-            </span>
-            <span
-              v-if="isYou && shouldShowYous"
-              :class="{ '-you': shouldBoldenYou }"
-            > {{ ' ' + $t('status.you') }}</span>
             <!-- eslint-enable vue/no-v-html -->
-          </a><span
-            v-if="shouldShowTooltip"
-            class="full"
-          >
-            <span
-              class="userNameFull"
-            >
-              <!-- eslint-disable vue/no-v-html -->
-              @<span
-                class="userName"
-                v-html="userName"
-              /><span
-                class="serverName"
-                :class="{ '-faded': shouldFadeDomain }"
-                v-html="'@' + serverName"
-              />
-              <!-- eslint-enable vue/no-v-html -->
-            </span>
           </span>
-        </span></template>
-      <template v-slot:content>
-        <UserCard
-          class="mention-link-popover"
-          :user-id="user.id"
-          :hide-bio="true"
-          :bordered="false"
-          :allow-zooming-avatar="true"
-          :rounded="true"
-        />
-      </template>
-    </Popover>
+        </span>
+      </span>
+    </UserPopover>
   </span>
 </template>
 
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 9408b21782..77cdfa7338 100644
--- a/src/components/notification/notification.js
+++ b/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 () {
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index a44481c9b6..6427d117c6 100644
--- a/src/components/notification/notification.vue
+++ b/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">
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 7f4c1cac96..f6527624f6 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -80,7 +80,7 @@ const Popover = {
         y: anchorScreenBox.top + anchorHeight * 0.5
       }
       const content = this.$refs.content
-      const overlayCenter = this.overlayCentersSelector
+      const overlayCenter = this.overlayCenters
         ? this.$refs.content.querySelector(this.overlayCentersSelector)
         : null
 
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 0649625874..053c94415d 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 624960fef7..771d336a9d 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"
diff --git a/src/components/user_popover/user_popover.js b/src/components/user_popover/user_popover.js
new file mode 100644
index 0000000000..bffd59625b
--- /dev/null
+++ b/src/components/user_popover/user_popover.js
@@ -0,0 +1,14 @@
+import { defineAsyncComponent } from 'vue'
+
+const UserPopover = {
+  name: 'UserPopover',
+  props: [
+    'userId', 'overlayCenters', 'disabled'
+  ],
+  components: {
+    UserCard: defineAsyncComponent(() => import('../user_card/user_card.vue')),
+    Popover: defineAsyncComponent(() => import('../popover/popover.vue'))
+  }
+}
+
+export default UserPopover
diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue
new file mode 100644
index 0000000000..7ad5c23432
--- /dev/null
+++ b/src/components/user_popover/user_popover.vue
@@ -0,0 +1,34 @@
+<template>
+<Popover
+  trigger="click"
+  popover-class="popover-default user-popover"
+  overlay-centers-selector=".user-info-avatar-link .Avatar"
+  :overlay-centers="overlayCenters"
+  :disabled="disabled"
+>
+  <template v-slot:trigger>
+    <slot />
+  </template>
+  <template v-slot:content>
+    <UserCard
+      class="user-popover"
+      :user-id="userId"
+      :hide-bio="true"
+      :bordered="false"
+      :allow-zooming-avatar="true"
+      :rounded="true"
+    />
+  </template>
+</Popover>
+</template>
+
+<script src="./user_popover.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+/* popover styles load on-demand, so we need to override */
+.user-popover.popover {
+}
+
+</style>

From 60571685c2e42e44b75157c3d52f162bf39c4bab Mon Sep 17 00:00:00 2001
From: Henry Jameson <spam@hjkos.com>
Date: Thu, 16 Jun 2022 17:06:16 +0300
Subject: [PATCH 19/57] popover controls for user-card

---
 src/components/user_card/user_card.js        | 24 +++++++++---
 src/components/user_card/user_card.scss      | 39 +++++++++++++++-----
 src/components/user_card/user_card.vue       | 37 ++++++++++++++++---
 src/components/user_popover/user_popover.vue |  5 +--
 4 files changed, 81 insertions(+), 24 deletions(-)

diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 4168c54ae1..52e8c0798b 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -14,7 +14,9 @@ import {
   faRss,
   faSearchPlus,
   faExternalLinkAlt,
-  faEdit
+  faEdit,
+  faTimes,
+  faExpandAlt
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -22,12 +24,21 @@ library.add(
   faBell,
   faSearchPlus,
   faExternalLinkAlt,
-  faEdit
+  faEdit,
+  faTimes,
+  faExpandAlt
 )
 
 export default {
   props: [
-    'userId', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar'
+    'userId',
+    'switcher',
+    'selected',
+    'hideBio',
+    'rounded',
+    'bordered',
+    'allowZoomingAvatar',
+    'onClose'
   ],
   data () {
     return {
@@ -47,9 +58,10 @@ export default {
     },
     classes () {
       return [{
-        'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
-        'user-card-rounded': this.rounded === true, // set border-radius for all sides
-        'user-card-bordered': this.bordered === true // set border for all sides
+        '-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
+        '-rounded': this.rounded === true, // set border-radius for all sides
+        '-bordered': this.bordered === true, // set border for all sides
+        '-popover': !!this.onClose // set popover rounding
       }]
     },
     style () {
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 2e1531200a..65299e6064 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -42,8 +42,10 @@
     mask-composite: exclude;
     background-size: cover;
     mask-size: 100% 60%;
-    border-top-left-radius: calc(var(--panelRadius) - 1px);
-    border-top-right-radius: calc(var(--panelRadius) - 1px);
+    border-top-left-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
+    border-top-right-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
+    border-bottom-left-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
+    border-bottom-right-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
     background-color: var(--profileBg);
     z-index: -2;
 
@@ -72,21 +74,33 @@
     }
   }
 
-  // Modifiers
-
-  &-rounded-t {
+  &.-rounded-t {
     border-top-left-radius: $fallback--panelRadius;
     border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
     border-top-right-radius: $fallback--panelRadius;
     border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+
+    --__roundnessTop: var(--panelRadius);
+    --__roundnessBottom: 0;
   }
 
-  &-rounded {
+  &.-rounded {
     border-radius: $fallback--panelRadius;
     border-radius: var(--panelRadius, $fallback--panelRadius);
+
+    --__roundnessTop: var(--panelRadius);
+    --__roundnessBottom: var(--panelRadius);
   }
 
-  &-bordered {
+  &.-popover {
+    border-radius: $fallback--tooltipRadius;
+    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+
+    --__roundnessTop: var(--tooltipRadius);
+    --__roundnessBottom: var(--tooltipRadius);
+  }
+
+  &.-bordered {
     border-width: 1px;
     border-style: solid;
     border-color: $fallback--border;
@@ -99,6 +113,15 @@
   color: var(--lightText, $fallback--lightText);
   padding: 0 26px;
 
+  a {
+    color: $fallback--lightText;
+    color: var(--lightText, $fallback--lightText);
+
+    &:hover {
+      color: var(--icon);
+    }
+  }
+
   .container {
     min-width: 0;
     padding: 16px 0 6px;
@@ -206,8 +229,6 @@
       flex: 0 1 auto;
       text-overflow: ellipsis;
       overflow: hidden;
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
     }
 
     .dailyAvg {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 67837845ed..936d67981a 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -8,7 +8,7 @@
       :style="style"
       class="background-image"
     />
-    <div class="panel-heading -flexible-height">
+    <div :class="onClose ? '' : panel-heading -flexible-height">
       <div class="user-info">
         <div class="container">
           <a
@@ -38,12 +38,16 @@
           </router-link>
           <div class="user-summary">
             <div class="top-line">
-              <RichContent
-                :title="user.name"
+              <router-link
+                :to="userProfileLink(user)"
                 class="user-name"
-                :html="user.name"
-                :emoji="user.emoji"
-              />
+              >
+                <RichContent
+                  :title="user.name"
+                  :html="user.name"
+                  :emoji="user.emoji"
+                />
+              </router-link>
               <button
                 v-if="!isOtherUser && user.is_local"
                 class="button-unstyled edit-profile-button"
@@ -72,6 +76,27 @@
                 :user="user"
                 :relationship="relationship"
               />
+              <router-link
+                v-if="onClose"
+                :to="userProfileLink(user)"
+                class="button-unstyled external-link-button"
+                @click="onClose"
+              >
+                <FAIcon
+                  class="icon"
+                  icon="expand-alt"
+                />
+              </router-link>
+              <button
+                v-if="onClose"
+                class="button-unstyled external-link-button"
+                @click="onClose"
+              >
+                <FAIcon
+                  class="icon"
+                  icon="times"
+                />
+              </button>
             </div>
             <div class="bottom-line">
               <router-link
diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue
index 7ad5c23432..c998e2984c 100644
--- a/src/components/user_popover/user_popover.vue
+++ b/src/components/user_popover/user_popover.vue
@@ -9,14 +9,13 @@
   <template v-slot:trigger>
     <slot />
   </template>
-  <template v-slot:content>
+  <template v-slot:content={close}>
     <UserCard
       class="user-popover"
       :user-id="userId"
       :hide-bio="true"
-      :bordered="false"
       :allow-zooming-avatar="true"
-      :rounded="true"
+      :onClose="close"
     />
   </template>
 </Popover>

From cb89646c56288f42896d34e3b405621e08c88575 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 20 Jun 2022 23:55:39 +0300
Subject: [PATCH 20/57] optimization: only process resize/scroll events when
 popup is open

---
 src/components/popover/popover.js | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 7f4c1cac96..e0c22e86b5 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -47,6 +47,7 @@ const Popover = {
       hidden: true,
       styles: {},
       oldSize: { width: 0, height: 0 },
+      scrollable: null,
       // used to avoid blinking if hovered onto popover
       graceTimeout: null
     }
@@ -175,14 +176,25 @@ const Popover = {
       if (this.disabled) return
       const wasHidden = this.hidden
       this.hidden = false
+      if (this.trigger === 'click') {
+        document.addEventListener('click', this.onClickOutside)
+      }
+      this.scrollable.addEventListener('scroll', this.onScroll)
+      this.scrollable.addEventListener('resize', this.onResize)
       this.$nextTick(() => {
         if (wasHidden) this.$emit('show')
         this.updateStyles()
       })
     },
     hidePopover () {
+      if (this.disabled) return
       if (!this.hidden) this.$emit('close')
       this.hidden = true
+      if (this.trigger === 'click') {
+        document.removeEventListener('click', this.onClickOutside)
+      }
+      this.scrollable.removeEventListener('scroll', this.onScroll)
+      this.scrollable.removeEventListener('resize', this.onResize)
     },
     onMouseenter (e) {
       if (this.trigger === 'hover') {
@@ -225,6 +237,9 @@ const Popover = {
     },
     onScroll (e) {
       this.updateStyles()
+    },
+    onResize (e) {
+      this.updateStyles()
     }
   },
   updated () {
@@ -241,14 +256,9 @@ const Popover = {
   mounted () {
     let scrollable = this.$refs.trigger.closest('.column.-scrollable')
     if (!scrollable) scrollable = window
-    document.addEventListener('click', this.onClickOutside)
-    scrollable.addEventListener('scroll', this.onScroll)
+    this.scrollable = scrollable
   },
   beforeUnmount () {
-    let scrollable = this.$refs.trigger.closest('.column.-scrollable')
-    if (!scrollable) scrollable = window
-    document.removeEventListener('click', this.onClickOutside)
-    scrollable.removeEventListener('scroll', this.onScroll)
     this.hidePopover()
   }
 }

From aca8cf64db26e8a883a8099462ce5381c7e330e4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 21 Jun 2022 00:13:13 +0300
Subject: [PATCH 21/57] move media modal to the topmost layer

---
 src/App.vue                                | 2 +-
 src/components/media_modal/media_modal.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5d7bb4e196..741786ec9b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,7 +42,7 @@
       </div>
       <div id="notifs-column" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"/>
     </div>
-    <media-modal />
+    <MediaModal />
     <shout-panel
       v-if="currentUser && shout && !hideShoutbox"
       :floating="true"
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 8b76aafb5c..b93d3d84ee 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -121,7 +121,7 @@ $modal-view-button-icon-width: 3em;
 $modal-view-button-icon-margin: 0.5em;
 
 .modal-view.media-modal-view {
-  z-index: 9000;
+  z-index: 900000;
   flex-direction: column;
 
   .modal-view-button-arrow,

From af98bc2973eed8eb08927df866bc29ecae659d44 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 21 Jun 2022 01:03:20 +0300
Subject: [PATCH 22/57] don't use async component for user popover to fix the
 incorrect initial position. for some reason same doesn't work with status
 popover...

---
 src/components/user_popover/user_popover.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/user_popover/user_popover.js b/src/components/user_popover/user_popover.js
index bffd59625b..962ae6a09e 100644
--- a/src/components/user_popover/user_popover.js
+++ b/src/components/user_popover/user_popover.js
@@ -1,3 +1,4 @@
+import UserCard from '../user_card/user_card.vue'
 import { defineAsyncComponent } from 'vue'
 
 const UserPopover = {
@@ -6,7 +7,7 @@ const UserPopover = {
     'userId', 'overlayCenters', 'disabled'
   ],
   components: {
-    UserCard: defineAsyncComponent(() => import('../user_card/user_card.vue')),
+    UserCard,
     Popover: defineAsyncComponent(() => import('../popover/popover.vue'))
   }
 }

From 78ced0c901d255bf99e096339da945b1b3cc0216 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 21 Jun 2022 01:05:42 +0300
Subject: [PATCH 23/57] proper horizontal limit

---
 src/components/popover/popover.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 5c45be735b..0d37328e5a 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -46,7 +46,7 @@
   z-index: 90000;
   position: fixed;
   min-width: 0;
-  max-width: 90vw;
+  max-width: calc(100vw - 20px);
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
   box-shadow: var(--popupShadow);
 }

From 3d4d694b493b9a0785462d1d5f57aec6411ecc0a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 21 Jun 2022 01:07:32 +0300
Subject: [PATCH 24/57] don't stop propagation on settings modal open

---
 src/components/desktop_nav/desktop_nav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index bab3ca819c..f352c78c7a 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -38,7 +38,7 @@
         />
         <button
           class="button-unstyled nav-icon"
-          @click.stop="openSettingsModal"
+          @click="openSettingsModal"
         >
           <FAIcon
             fixed-width

From e6ed00ea1cb526cbd57b4faef95dcc57b5b73a54 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 21 Jun 2022 01:24:50 +0300
Subject: [PATCH 25/57] don't show bookmark button for anon visitors

---
 src/components/extra_buttons/extra_buttons.js |  3 ++
 .../extra_buttons/extra_buttons.vue           | 46 ++++++++++---------
 2 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index dd45b6b9f9..2f5348968c 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -89,6 +89,9 @@ const ExtraButtons = {
     canMute () {
       return !!this.currentUser
     },
+    canBookmark () {
+      return !!this.currentUser
+    },
     statusLink () {
       return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
     }
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index cafba47046..2ea862015f 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -51,28 +51,30 @@
             icon="thumbtack"
           /><span>{{ $t("status.unpin") }}</span>
         </button>
-        <button
-          v-if="!status.bookmarked"
-          class="button-default dropdown-item dropdown-item-icon"
-          @click.prevent="bookmarkStatus"
-          @click="close"
-        >
-          <FAIcon
-            fixed-width
-            :icon="['far', 'bookmark']"
-          /><span>{{ $t("status.bookmark") }}</span>
-        </button>
-        <button
-          v-if="status.bookmarked"
-          class="button-default dropdown-item dropdown-item-icon"
-          @click.prevent="unbookmarkStatus"
-          @click="close"
-        >
-          <FAIcon
-            fixed-width
-            icon="bookmark"
-          /><span>{{ $t("status.unbookmark") }}</span>
-        </button>
+        <template v-if="canBookmark">
+          <button
+            v-if="!status.bookmarked"
+            class="button-default dropdown-item dropdown-item-icon"
+            @click.prevent="bookmarkStatus"
+            @click="close"
+          >
+            <FAIcon
+              fixed-width
+              :icon="['far', 'bookmark']"
+            /><span>{{ $t("status.bookmark") }}</span>
+          </button>
+          <button
+            v-if="status.bookmarked"
+            class="button-default dropdown-item dropdown-item-icon"
+            @click.prevent="unbookmarkStatus"
+            @click="close"
+          >
+            <FAIcon
+              fixed-width
+              icon="bookmark"
+            /><span>{{ $t("status.unbookmark") }}</span>
+          </button>
+        </template>
         <button
           v-if="canDelete"
           class="button-default dropdown-item dropdown-item-icon"

From b7b6432e147d0a7f312f5827bee3db39952a9ac4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 21 Jun 2022 01:32:19 +0300
Subject: [PATCH 26/57] fix mentionsline extramentions lack of space

---
 src/components/mentions_line/mentions_line.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/mentions_line/mentions_line.vue b/src/components/mentions_line/mentions_line.vue
index 09b6a1d6c6..6337162a2c 100644
--- a/src/components/mentions_line/mentions_line.vue
+++ b/src/components/mentions_line/mentions_line.vue
@@ -6,7 +6,7 @@
       class="mention-link"
       :content="mention.content"
       :url="mention.url"
-    /><span
+    /> <span
       v-if="manyMentions"
       class="extraMentions"
     >

From 7d719a2b188ebee78d115e9102e2ad8f3460a2f0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 21 Jun 2022 01:40:09 +0300
Subject: [PATCH 27/57] fix tests by just ignoring the html comments

---
 test/unit/specs/components/rich_content.spec.js | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index cd8d4b86b0..8a18a08b1a 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -356,7 +356,6 @@ describe('RichContent', () => {
       p(
         '<span class="MentionsLine">',
         '<span class="MentionLink mention-link">',
-        '<!-- eslint-disable vue/no-v-html -->',
         '<a href="lol" class="original" target="_blank">',
         '<span>',
         'https://</span>',
@@ -365,10 +364,7 @@ describe('RichContent', () => {
         '<span>',
         '</span>',
         '</a>',
-        '<!-- eslint-enable vue/no-v-html -->',
-        '<!---->', // vue placeholder
         '</span>',
-        '<!--v-if-->', // vue placeholder, mentionsline's extra mentions and stuff
         '</span>'
       ),
       p(
@@ -387,7 +383,7 @@ describe('RichContent', () => {
       }
     })
 
-    expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
+    expect(wrapper.html().replace(/\n/g, '').replace(/<!--.*?-->/g, '')).to.eql(compwrap(expected))
   })
 
   it('rich contents of nested mentions are handled properly', () => {
@@ -419,7 +415,6 @@ describe('RichContent', () => {
       '<span class="poast-style">',
       '<span class="MentionsLine">',
       '<span class="MentionLink mention-link">',
-      '<!-- eslint-disable vue/no-v-html -->',
       '<a href="lol" class="original" target="_blank">',
       '<span>',
       'https://</span>',
@@ -428,11 +423,8 @@ describe('RichContent', () => {
       '<span>',
       '</span>',
       '</a>',
-      '<!-- eslint-enable vue/no-v-html -->',
-      '<!---->', // vue placeholder, mentionlink's "new" (i.e. rich) display
       '</span>',
       '<span class="MentionLink mention-link">',
-      '<!-- eslint-disable vue/no-v-html -->',
       '<a href="lol" class="original" target="_blank">',
       '<span>',
       'https://</span>',
@@ -441,10 +433,7 @@ describe('RichContent', () => {
       '<span>',
       '</span>',
       '</a>',
-      '<!-- eslint-enable vue/no-v-html -->',
-      '<!---->', // vue placeholder, mentionlink's "new" (i.e. rich) display
       '</span>',
-      '<!--v-if-->', // vue placeholder, mentionsline's extra mentions and stuff
       '</span>',
       ' ',
       '</span>',
@@ -462,7 +451,7 @@ describe('RichContent', () => {
       }
     })
 
-    expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
+    expect(wrapper.html().replace(/\n/g, '').replace(/<!--.*?-->/g, '')).to.eql(compwrap(expected))
   })
 
   it('rich contents of a link are handled properly', () => {

From 57d156f14aa6989eebc965fad48e912ec0d4d6fd Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 21 Jun 2022 15:52:41 +0300
Subject: [PATCH 28/57] fix spacings again

---
 src/components/mentions_line/mentions_line.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/mentions_line/mentions_line.vue b/src/components/mentions_line/mentions_line.vue
index 6337162a2c..161855e878 100644
--- a/src/components/mentions_line/mentions_line.vue
+++ b/src/components/mentions_line/mentions_line.vue
@@ -6,15 +6,14 @@
       class="mention-link"
       :content="mention.content"
       :url="mention.url"
-    /> <span
+    /><span
       v-if="manyMentions"
       class="extraMentions"
     >
       <span
         v-if="expanded"
         class="fullExtraMentions"
-      >
-        <MentionLink
+      >{{ ' ' }}<MentionLink
           v-for="mention in extraMentions"
           :key="mention.index"
           class="mention-link"

From 93293db038a864aafd0f6da3df15bc86e0370bfc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 21 Jun 2022 15:57:42 +0300
Subject: [PATCH 29/57] fix popovers not scrolling in mobile notifications

---
 src/components/popover/popover.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 58de83df5a..cff9b174fb 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -254,7 +254,8 @@ const Popover = {
     }
   },
   mounted () {
-    let scrollable = this.$refs.trigger.closest('.column.-scrollable')
+    let scrollable = this.$refs.trigger.closest('.column.-scrollable') ||
+        this.$refs.trigger.closest('.mobile-notifications')
     if (!scrollable) scrollable = window
     this.scrollable = scrollable
   },

From 872db65fd86aaa605789383e629321e32447a997 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Jun 2022 00:30:10 +0300
Subject: [PATCH 30/57] slight z-index refactor and attempt at organizing it

---
 src/App.scss                                           |  9 ++++++++-
 src/boot/after_store.js                                |  3 +++
 src/components/desktop_nav/desktop_nav.scss            |  1 +
 src/components/emoji_picker/emoji_picker.scss          |  3 ++-
 .../global_notice_list/global_notice_list.vue          |  2 +-
 src/components/media_modal/media_modal.vue             |  2 +-
 src/components/mobile_nav/mobile_nav.vue               |  6 ++++--
 src/components/modal/modal.vue                         |  5 ++++-
 src/components/notifications/notifications.js          | 10 ++++++++++
 src/components/popover/popover.js                      |  4 ++++
 src/components/popover/popover.vue                     |  4 ++--
 src/components/shout_panel/shout_panel.vue             |  2 +-
 src/components/side_drawer/side_drawer.vue             |  2 +-
 13 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 79c076831c..78835c6181 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -4,6 +4,13 @@
 :root {
   --navbar-height: 3.5rem;
   --post-line-height: 1.4;
+  // Z-Index stuff
+  --ZI_media_modal: 90000;
+  --ZI_navbar_popovers: 85000;
+  --ZI_navbar: 80000;
+  --ZI_modals_popovers: 75000;
+  --ZI_modals: 70000;
+  --ZI_popovers: 60000;
 }
 
 html {
@@ -117,7 +124,7 @@ i[class*=icon-],
 }
 
 nav {
-  z-index: 1000;
+  z-index: var(--ZI_navbar);
   color: var(--topBarText);
   background-color: $fallback--fg;
   background-color: var(--topBar, $fallback--fg);
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index f655c38f04..894a68e1d6 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -396,6 +396,9 @@ const afterStoreSetup = async ({ store, i18n }) => {
   app.component('FAIcon', FontAwesomeIcon)
   app.component('FALayers', FontAwesomeLayers)
 
+  // remove after vue 3.3
+  app.config.unwrapInjectedRef = true
+
   app.mount('#app')
 
   return app
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 0ca9802ece..e9a476325e 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -2,6 +2,7 @@
 
 .DesktopNav {
   width: 100%;
+  z-index: var(--ZI_navbar);
 
   a {
     color: var(--topBarLink, $fallback--link);
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 2055e02e41..a2f17c514c 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -7,7 +7,8 @@
   right: 0;
   left: 0;
   margin: 0 !important;
-  z-index: 100;
+  // TODO: actually use popover in emoji picker
+  z-index: var(--ZI_popovers);
   background-color: $fallback--bg;
   background-color: var(--popover, $fallback--bg);
   color: $fallback--link;
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index ddc45b81b5..09904761c5 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -32,7 +32,7 @@
   top: 50px;
   width: 100%;
   pointer-events: none;
-  z-index: 1001;
+  z-index: var(--ZI_popovers);
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index b93d3d84ee..d59055b375 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -121,7 +121,7 @@ $modal-view-button-icon-width: 3em;
 $modal-view-button-icon-margin: 0.5em;
 
 .modal-view.media-modal-view {
-  z-index: 900000;
+  z-index: var(--ZI_media_modal);
   flex-direction: column;
 
   .modal-view-button-arrow,
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index d2d48a0392..c58d9e7c30 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -86,6 +86,8 @@
 @import '../../_variables.scss';
 
 .MobileNav {
+  z-index: var(--ZI_navbar);
+
   .mobile-nav {
     display: grid;
     line-height: var(--navbar-height);
@@ -147,7 +149,7 @@
     transition-property: transform;
     transition-duration: 0.25s;
     transform: translateX(0);
-    z-index: 1001;
+    z-index: var(--ZI_navbar);
     -webkit-overflow-scrolling: touch;
 
     &.-closed {
@@ -160,7 +162,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    z-index: 1;
+    z-index: calc(var(--ZI_navbar) + 100);
     width: 100%;
     height: 50px;
     line-height: 50px;
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 9394efff7b..52d8d27ef1 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -22,6 +22,9 @@ export default {
       default: false
     }
   },
+  provide: {
+    popoversZLayer: 'modals'
+  },
   computed: {
     classes () {
       return {
@@ -35,7 +38,7 @@ export default {
 
 <style lang="scss">
 .modal-view {
-  z-index: 2000;
+  z-index: var(--ZI_modals);
   position: fixed;
   top: 0;
   left: 0;
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index fb2579a55a..63d827d835 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,3 +1,4 @@
+import { computed } from 'vue'
 import { mapGetters } from 'vuex'
 import Notification from '../notification/notification.vue'
 import NotificationFilters from './notification_filters.vue'
@@ -38,6 +39,11 @@ const Notifications = {
       seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT
     }
   },
+  provide () {
+    return {
+      popoversZLayer: computed(() => this.popoversZLayer)
+    }
+  },
   computed: {
     mainClass () {
       return this.minimalMode ? '' : 'panel panel-default'
@@ -75,6 +81,10 @@ const Notifications = {
       }
       return map[layoutType] || '#notifs-sidebar'
     },
+    popoversZLayer () {
+      const { layoutType } = this.$store.state.interface
+      return layoutType === 'mobile' ? 'navbar' : null
+    },
     notificationsToDisplay () {
       return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
     },
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index cff9b174fb..5dfcf8102a 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -42,6 +42,7 @@ const Popover = {
     // What selector (witin popover!) to use for determining center of popover
     overlayCentersSelector: String
   },
+  inject: ['popoversZLayer'], // override popover z layer
   data () {
     return {
       hidden: true,
@@ -168,6 +169,9 @@ const Popover = {
         top: `${Math.round(translateY)}px`
       }
 
+      if (this.popoversZLayer) {
+        this.styles['--ZI_popover_override'] = `var(--ZI_${this.popoversZLayer}_popovers)`
+      }
       if (parentScreenBox) {
         this.styles.maxWidth = `${Math.round(parentScreenBox.width)}px`
       }
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 0d37328e5a..f854515c11 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -43,7 +43,7 @@
 }
 
 .popover {
-  z-index: 90000;
+  z-index: var(--ZI_popover_override, var(--ZI_popovers));
   position: fixed;
   min-width: 0;
   max-width: calc(100vw - 20px);
@@ -87,7 +87,7 @@
   text-align: left;
   list-style: none;
   max-width: 100vw;
-  z-index: 200;
+  z-index: var(--ZI_popover_override, var(--ZI_popovers));
   white-space: nowrap;
 
   .dropdown-divider {
diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue
index 1eca88a7aa..688c2d61f8 100644
--- a/src/components/shout_panel/shout_panel.vue
+++ b/src/components/shout_panel/shout_panel.vue
@@ -80,7 +80,7 @@
 .floating-shout {
   position: fixed;
   bottom: 0.5em;
-  z-index: 1000;
+  z-index: var(--ZI_popovers);
   max-width: 25em;
 
   &.-left {
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index dd88de7d5d..aefd391530 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -211,7 +211,7 @@
 
 .side-drawer-container {
   position: fixed;
-  z-index: 1000;
+  z-index: var(--ZI_navbar);
   top: 0;
   left: 0;
   width: 100%;

From a0ddfa499fe45e352e8c3920cba862a4902f0afe Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Jun 2022 00:34:22 +0300
Subject: [PATCH 31/57] update status popover when its content changes (only
 status reference)

---
 src/components/status_popover/status_popover.js  | 7 +++++++
 src/components/status_popover/status_popover.vue | 1 +
 2 files changed, 8 insertions(+)

diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
index e0962ccdf2..68878a50b5 100644
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@@ -38,6 +38,13 @@ const StatusPopover = {
           .catch(e => (this.error = true))
       }
     }
+  },
+  watch: {
+    status (newStatus, oldStatus) {
+      if (newStatus !== oldStatus) {
+        this.$refs.popover.updateStyles()
+      }
+    }
   }
 }
 
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index b6a3be3240..2c436d04cb 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -4,6 +4,7 @@
     popover-class="popover-default status-popover"
     :bound-to="{ x: 'container' }"
     @show="enter"
+    ref="popover"
   >
     <template v-slot:trigger>
       <slot />

From 81bf18a31120beace24a4e176eab20df733881b3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 27 Jun 2022 14:26:47 +0300
Subject: [PATCH 32/57] fix invisible old popover, cleanup, add selection
 indicator in mentionlinks

---
 src/components/mention_link/mention_link.js   | 17 ++++++++++++-
 src/components/mention_link/mention_link.scss | 24 ++++++++-----------
 src/components/mention_link/mention_link.vue  | 18 ++------------
 3 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 7e47625a2d..4a74fbe289 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -36,6 +36,11 @@ const MentionLink = {
       type: String
     }
   },
+  data () {
+    return {
+      hasSelection: false
+    }
+  },
   methods: {
     onClick () {
       if (this.shouldShowTooltip) return
@@ -44,8 +49,17 @@ const MentionLink = {
         this.userScreenName || this.user.screen_name
       )
       this.$router.push(link)
+    },
+    handleSelection () {
+      this.hasSelection = document.getSelection().containsNode(this.$refs.full, true)
     }
   },
+  mounted () {
+    document.addEventListener('selectionchange', this.handleSelection)
+  },
+  unmounted () {
+    document.removeEventListener('selectionchange', this.handleSelection)
+  },
   computed: {
     user () {
       return this.url && this.$store && this.$store.getters.findUserByUrl(this.url)
@@ -91,7 +105,8 @@ const MentionLink = {
       return [
         {
           '-you': this.isYou && this.shouldBoldenYou,
-          '-highlighted': this.highlight
+          '-highlighted': this.highlight,
+          '-has-selection': this.hasSelection
         },
         this.highlightType
       ]
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index 3b3a05b137..8b2af92637 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -55,11 +55,14 @@
 
   .new {
     &.-you {
-      & .shortName,
-      & .full {
+      .shortName {
         font-weight: 600;
       }
     }
+    &.-has-selection {
+      color: var(--alertNeutralText, $fallback--text);
+      background-color: var(--alertNeutral, $fallback--fg);
+    }
 
     .at {
       color: var(--link);
@@ -72,8 +75,7 @@
     }
 
     &.-striped {
-      & .shortName,
-      & .full {
+      & .shortName {
         background-image:
           repeating-linear-gradient(
             135deg,
@@ -86,31 +88,25 @@
     }
 
     &.-solid {
-      & .shortName,
-      & .full {
+      .shortName {
         background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
       }
     }
 
     &.-side {
-      & .shortName,
-      & .userNameFull {
+      .shortName {
         box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
       }
     }
   }
 
-  &:hover .new .full {
-    pointer-events: initial;
+  .full {
+    pointer-events: none;
   }
 
   .serverName.-faded {
     color: var(--faintLink, $fallback--link);
   }
-
-  .full .-faded {
-    color: var(--faint, $fallback--faint);
-  }
 }
 
 .mention-link-popover {
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 0cff50abf9..56da8e0f86 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -54,24 +54,10 @@
             :class="{ '-you': shouldBoldenYou }"
           > {{ ' ' + $t('status.you') }}</span>
           <!-- eslint-enable vue/no-v-html -->
-        </a><span
-          v-if="shouldShowTooltip"
-          class="full"
-        >
-          <span
-            class="userNameFull"
-          >
+        </a><span class="full" ref="full">
             <!-- eslint-disable vue/no-v-html -->
-            @<span
-              class="userName"
-              v-html="userName"
-            /><span
-              class="serverName"
-              :class="{ '-faded': shouldFadeDomain }"
-              v-html="'@' + serverName"
-            />
+            @<span v-html="userName" /><span v-html="'@' + serverName" />
             <!-- eslint-enable vue/no-v-html -->
-          </span>
         </span>
       </span>
     </UserPopover>

From 6be625b058cdc889631953b5343ff600842ee912 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 27 Jun 2022 14:28:51 +0300
Subject: [PATCH 33/57] use nextrick with status popover updates

---
 src/components/status_popover/status_popover.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
index 68878a50b5..c55bd85bc7 100644
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@@ -42,7 +42,7 @@ const StatusPopover = {
   watch: {
     status (newStatus, oldStatus) {
       if (newStatus !== oldStatus) {
-        this.$refs.popover.updateStyles()
+        this.$nextTick(() => this.$refs.popover.updateStyles())
       }
     }
   }

From 55e9acc4adcdde0d2a35dfdb73d938634872189b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 27 Jun 2022 14:47:17 +0300
Subject: [PATCH 34/57] update changelog for vue3/threecolumn/popovers changes

---
 CHANGELOG.md | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d7cc6994cd..ed8ebf6726 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,17 +16,26 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Attachments are ALWAYS in same order as user uploaded, no more "videos first"
 - Attachment description is prefilled with backend-provided default when uploading
 - Proper visual feedback that next image is loading when browsing
+- UI no longer lags when switching between mobile and desktop mode
+- Popovers no longer constrained by DOM hierarchy, shouldn't be cut off by anything
+- "Always show mobile button" is working now
 
 ### Changed
+- Using Vue 3 now
 - (You)s are optional (opt-in) now, bolding your nickname is also optional (opt-out)
 - User highlight background now also covers the `@`
 - Reverted back to textual `@`, svg version is opt-in.
-- Settings window has been throughly rearranged to make make more sense and make navication settings easier.
+- Settings window has been thoroughly rearranged to make more sense and make navigation settings easier.
 - Uploaded attachments are uniform with displayed attachments
 - Flash is watchable in media-modal (takes up nearly full screen though due to sizing issues)
 - Notifications about likes/repeats/emoji reacts are now minimized so they always take up same amount of space irrelevant to size of post.
+- Slight width/spacing adjustments
+- More sizing stuff is font-size dependent now
+- Scrollbars are styled/colorized now
+- Scrollbars are toggleable (for stuff that didn't have visible scrollbars before) (opt-in)
 
 ### Added
+- 3 column mode: only enables when there's space for it (opt-out, customizable)
 - Options to show domains in mentions
 - Option to show user avatars in mention links (opt-in)
 - Option to disable the tooltip for mentions
@@ -37,6 +46,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Media modal now also displays description and counter position in gallery (i.e. 1/5)
 - Ability to rearrange order of attachments when uploading
 - Enabled users to zoom and pan images in media viewer with mouse and touch
+- Timelines/panels and conversations have sticky headers now
 
 
 ## [2.4.2] - 2022-01-09

From e59e10e0771a95ef7ee04e5095a6bc77ae525b4a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 27 Jun 2022 19:00:38 +0300
Subject: [PATCH 35/57] put modals on top of navbar

---
 src/App.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 0b63e7bec9..ab025d63f6 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -6,10 +6,10 @@
   --post-line-height: 1.4;
   // Z-Index stuff
   --ZI_media_modal: 90000;
-  --ZI_navbar_popovers: 85000;
-  --ZI_navbar: 80000;
-  --ZI_modals_popovers: 75000;
-  --ZI_modals: 70000;
+  --ZI_modals_popovers: 85000;
+  --ZI_modals: 80000;
+  --ZI_navbar_popovers: 75000;
+  --ZI_navbar: 70000;
   --ZI_popovers: 60000;
 }
 

From 898b326f6c9da3ba26ad35b2349c2a3f9fc0484a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 27 Jun 2022 19:10:18 +0300
Subject: [PATCH 36/57] unify styling of timelines dropdown with other dropdown
 menus

---
 .../timeline_menu/timeline_menu_content.vue   | 119 +++++++++---------
 1 file changed, 57 insertions(+), 62 deletions(-)

diff --git a/src/components/timeline_menu/timeline_menu_content.vue b/src/components/timeline_menu/timeline_menu_content.vue
index bed1b679a4..6caf688ee7 100644
--- a/src/components/timeline_menu/timeline_menu_content.vue
+++ b/src/components/timeline_menu/timeline_menu_content.vue
@@ -1,66 +1,61 @@
 <template>
-  <ul>
-    <li v-if="currentUser">
-      <router-link
-        class="menu-item"
-        :to="{ name: 'friends' }"
-      >
-        <FAIcon
-          fixed-width
-          class="fa-scale-110 fa-old-padding "
-          icon="home"
-        />{{ $t("nav.home_timeline") }}
-      </router-link>
-    </li>
-    <li v-if="currentUser || !privateMode">
-      <router-link
-        class="menu-item"
-        :to="{ name: 'public-timeline' }"
-      >
-        <FAIcon
-          fixed-width
-          class="fa-scale-110 fa-old-padding "
-          icon="users"
-        />{{ $t("nav.public_tl") }}
-      </router-link>
-    </li>
-    <li v-if="federating && (currentUser || !privateMode)">
-      <router-link
-        class="menu-item"
-        :to="{ name: 'public-external-timeline' }"
-      >
-        <FAIcon
-          fixed-width
-          class="fa-scale-110 fa-old-padding "
-          icon="globe"
-        />{{ $t("nav.twkn") }}
-      </router-link>
-    </li>
-    <li v-if="currentUser">
-      <router-link
-        class="menu-item"
-        :to="{ name: 'bookmarks'}"
-      >
-        <FAIcon
-          fixed-width
-          class="fa-scale-110 fa-old-padding "
-          icon="bookmark"
-        />{{ $t("nav.bookmarks") }}
-      </router-link>
-    </li>
-    <li v-if="currentUser">
-      <router-link
-        class="menu-item"
-        :to="{ name: 'dms', params: { username: currentUser.screen_name } }"
-      >
-        <FAIcon
-          fixed-width
-          class="fa-scale-110 fa-old-padding "
-          icon="envelope"
-        />{{ $t("nav.dms") }}
-      </router-link>
-    </li>
-  </ul>
+  <div class="dropdown-menu">
+    <router-link
+      v-if="currentUser"
+      class="dropdown-item button-default"
+      :to="{ name: 'friends' }"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding "
+        icon="home"
+      />{{ $t("nav.home_timeline") }}
+    </router-link>
+    <router-link
+      v-if="currentUser || !privateMode"
+      class="dropdown-item button-default"
+      :to="{ name: 'public-timeline' }"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding "
+        icon="users"
+      />{{ $t("nav.public_tl") }}
+    </router-link>
+    <router-link
+      v-if="federating && (currentUser || !privateMode)"
+      class="dropdown-item button-default"
+      :to="{ name: 'public-external-timeline' }"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding "
+        icon="globe"
+      />{{ $t("nav.twkn") }}
+    </router-link>
+    <router-link
+      v-if="currentUser"
+      class="dropdown-item button-default"
+      :to="{ name: 'bookmarks'}"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding "
+        icon="bookmark"
+      />{{ $t("nav.bookmarks") }}
+    </router-link>
+    <router-link
+      v-if="currentUser"
+      class="dropdown-item button-default"
+      :to="{ name: 'dms', params: { username: currentUser.screen_name } }"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding "
+        icon="envelope"
+      />{{ $t("nav.dms") }}
+    </router-link>
+  </div>
 </template>
 
 <script src="./timeline_menu_content.js" ></script>

From 9c9dc2053b68813f748bc7cd656987242f45158c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 27 Jun 2022 19:12:16 +0300
Subject: [PATCH 37/57] move tooltips setting

---
 .../settings_modal/tabs/general_tab.vue       | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 5b4a126eaa..6141639470 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -261,18 +261,14 @@
             {{ $t('settings.mention_link_display') }}
           </ChoiceSetting>
         </li>
-        <ul
-          class="setting-list suboptions"
-        >
-          <li v-if="mentionLinkDisplay === 'short'">
-            <BooleanSetting
-              path="mentionLinkShowTooltip"
-              expert="1"
-            >
-              {{ $t('settings.mention_link_use_tooltip') }}
-            </BooleanSetting>
-          </li>
-        </ul>
+        <li>
+          <BooleanSetting
+            path="mentionLinkShowTooltip"
+            expert="1"
+          >
+            {{ $t('settings.mention_link_use_tooltip') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting
             path="useAtIcon"

From cb135645f9b290944c40052f09a3eb9a487598a1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 27 Jun 2022 19:16:33 +0300
Subject: [PATCH 38/57] make hover popovers less annoying to close

---
 src/components/popover/popover.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 5dfcf8102a..82ae988550 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -45,6 +45,10 @@ const Popover = {
   inject: ['popoversZLayer'], // override popover z layer
   data () {
     return {
+      // lockReEntry is a flag that is set when mouse cursor is leaving the popover's content
+      // so that if mouse goes back into popover it won't be re-shown again to prevent annoyance
+      // with popovers refusing to be hidden when user wants to interact with something in below popover
+      lockReEntry: false,
       hidden: true,
       styles: {},
       oldSize: { width: 0, height: 0 },
@@ -202,6 +206,7 @@ const Popover = {
     },
     onMouseenter (e) {
       if (this.trigger === 'hover') {
+        this.lockReEntry = false
         clearTimeout(this.graceTimeout)
         this.graceTimeout = null
         this.showPopover()
@@ -213,7 +218,8 @@ const Popover = {
       }
     },
     onMouseenterContent (e) {
-      if (this.trigger === 'hover') {
+      if (this.trigger === 'hover' && !this.lockReEntry) {
+        this.lockReEntry = true
         clearTimeout(this.graceTimeout)
         this.graceTimeout = null
         this.showPopover()

From 700df11e9a0d36b3e1afdc50034567014c2b71cc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 27 Jun 2022 19:26:52 +0300
Subject: [PATCH 39/57] fix basicusercard

---
 .../basic_user_card/basic_user_card.js        | 12 ++-----
 .../basic_user_card/basic_user_card.vue       | 31 +++++++++----------
 src/components/user_popover/user_popover.js   |  2 +-
 src/components/user_popover/user_popover.vue  |  2 +-
 4 files changed, 18 insertions(+), 29 deletions(-)

diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js
index 8f41e2fb04..8b1a2c38d4 100644
--- a/src/components/basic_user_card/basic_user_card.js
+++ b/src/components/basic_user_card/basic_user_card.js
@@ -1,4 +1,4 @@
-import UserCard from '../user_card/user_card.vue'
+import UserPopover from '../user_popover/user_popover.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -7,20 +7,12 @@ const BasicUserCard = {
   props: [
     'user'
   ],
-  data () {
-    return {
-      userExpanded: false
-    }
-  },
   components: {
-    UserCard,
+    UserPopover,
     UserAvatar,
     RichContent
   },
   methods: {
-    toggleUserExpanded () {
-      this.userExpanded = !this.userExpanded
-    },
     userProfileLink (user) {
       return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
     }
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index eeca78288c..effd926879 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -1,24 +1,19 @@
 <template>
   <div class="basic-user-card">
-    <router-link :to="userProfileLink(user)">
-      <UserAvatar
-        class="avatar"
-        :user="user"
-        @click.prevent="toggleUserExpanded"
-      />
+    <router-link @click.prevent :to="userProfileLink(user)">
+      <UserPopover
+        :userId="user.id"
+        :overlayCenters="true"
+        overlayCentersSelector=".avatar"
+      >
+        <UserAvatar
+          class="user-avatar avatar"
+          :user="user"
+          @click.prevent
+        />
+      </UserPopover>
     </router-link>
     <div
-      v-if="userExpanded"
-      class="basic-user-card-expanded-content"
-    >
-      <UserCard
-        :user-id="user.id"
-        :rounded="true"
-        :bordered="true"
-      />
-    </div>
-    <div
-      v-else
       class="basic-user-card-collapsed-content"
     >
       <div
@@ -53,6 +48,8 @@
   margin: 0;
   padding: 0.6em 1em;
 
+   --emoji-size: 14px;
+
   &-collapsed-content {
     margin-left: 0.7em;
     text-align: left;
diff --git a/src/components/user_popover/user_popover.js b/src/components/user_popover/user_popover.js
index 962ae6a09e..3b3722ce7d 100644
--- a/src/components/user_popover/user_popover.js
+++ b/src/components/user_popover/user_popover.js
@@ -4,7 +4,7 @@ import { defineAsyncComponent } from 'vue'
 const UserPopover = {
   name: 'UserPopover',
   props: [
-    'userId', 'overlayCenters', 'disabled'
+    'userId', 'overlayCenters', 'disabled', 'overlay-centers-selector'
   ],
   components: {
     UserCard,
diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue
index c998e2984c..f4f505ae01 100644
--- a/src/components/user_popover/user_popover.vue
+++ b/src/components/user_popover/user_popover.vue
@@ -2,7 +2,7 @@
 <Popover
   trigger="click"
   popover-class="popover-default user-popover"
-  overlay-centers-selector=".user-info-avatar-link .Avatar"
+  :overlay-centers-selector="overlayCentersSelector || '.user-info-avatar-link .Avatar'"
   :overlay-centers="overlayCenters"
   :disabled="disabled"
 >

From d232fa3dc3ff83a09a4ad583a123b419f4d4fa42 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 27 Jun 2022 19:52:40 +0300
Subject: [PATCH 40/57] close on avatar click again, add zooming as option

---
 src/components/settings_modal/tabs/general_tab.vue | 5 +++++
 src/components/user_card/user_card.js              | 9 ++++++++-
 src/components/user_card/user_card.vue             | 1 +
 src/components/user_popover/user_popover.js        | 7 ++++++-
 src/components/user_popover/user_popover.vue       | 7 ++++---
 src/i18n/en.json                                   | 1 +
 src/modules/config.js                              | 1 +
 7 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 6141639470..0a300311e5 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -74,6 +74,11 @@
             {{ $t('settings.show_scrollbars') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="userPopoverZoom">
+            {{ $t('settings.user_popover_avatar_zoom') }}
+          </BooleanSetting>
+        </li>
         <li>
           <ChoiceSetting
             v-if="user"
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 52e8c0798b..9a8dcb23e4 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -38,7 +38,8 @@ export default {
     'rounded',
     'bordered',
     'allowZoomingAvatar',
-    'onClose'
+    'onClose',
+    'onAvatarClick'
   ],
   data () {
     return {
@@ -182,6 +183,12 @@ export default {
     },
     mentionUser () {
       this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
+    },
+    onAvatarClickHandler (e) {
+      if (this.onAvatarClick) {
+        e.preventDefault()
+        this.onAvatarClick()
+      }
     }
   }
 }
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 936d67981a..62d4a94da7 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -30,6 +30,7 @@
           <router-link
             v-else
             :to="userProfileLink(user)"
+            @click="onAvatarClickHandler"
           >
             <UserAvatar
               :better-shadow="betterShadow"
diff --git a/src/components/user_popover/user_popover.js b/src/components/user_popover/user_popover.js
index 3b3722ce7d..fa7f978173 100644
--- a/src/components/user_popover/user_popover.js
+++ b/src/components/user_popover/user_popover.js
@@ -4,11 +4,16 @@ import { defineAsyncComponent } from 'vue'
 const UserPopover = {
   name: 'UserPopover',
   props: [
-    'userId', 'overlayCenters', 'disabled', 'overlay-centers-selector'
+    'userId', 'overlayCenters', 'disabled', 'overlayCentersSelector'
   ],
   components: {
     UserCard,
     Popover: defineAsyncComponent(() => import('../popover/popover.vue'))
+  },
+  computed: {
+    userPopoverZoom () {
+      return this.$store.getters.mergedConfig.userPopoverZoom
+    }
   }
 }
 
diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue
index f4f505ae01..c14cea4d35 100644
--- a/src/components/user_popover/user_popover.vue
+++ b/src/components/user_popover/user_popover.vue
@@ -2,7 +2,7 @@
 <Popover
   trigger="click"
   popover-class="popover-default user-popover"
-  :overlay-centers-selector="overlayCentersSelector || '.user-info-avatar-link .Avatar'"
+  :overlay-centers-selector="overlayCentersSelector || '.user-info .Avatar'"
   :overlay-centers="overlayCenters"
   :disabled="disabled"
 >
@@ -14,8 +14,9 @@
       class="user-popover"
       :user-id="userId"
       :hide-bio="true"
-      :allow-zooming-avatar="true"
-      :onClose="close"
+      :allow-zooming-avatar="userPopoverZoom"
+      :on-avatar-click="userPopoverZoom ? null : close"
+      :on-close="close"
     />
   </template>
 </Popover>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 5f3f133489..9a8e54d6a1 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -550,6 +550,7 @@
     "mention_link_show_avatar": "Show user avatar beside the link",
     "mention_link_fade_domain": "Fade domains (e.g. {'@'}example.org in {'@'}foo{'@'}example.org)",
     "mention_link_bolden_you": "Highlight mention of you when you are mentioned",
+    "user_popover_avatar_zoom": "Clicking on user avatar in popover zooms it instead of closing the popover",
     "fun": "Fun",
     "greentext": "Meme arrows",
     "show_yous": "Show (You)s",
diff --git a/src/modules/config.js b/src/modules/config.js
index 6ae2e754e6..14add385e1 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -81,6 +81,7 @@ export const defaultState = {
   useContainFit: true,
   disableStickyHeaders: false,
   showScrollbars: false,
+  userPopoverZoom: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
   mentionLinkDisplay: undefined, // instance default

From feb8a17b907fb979ce37142b1ad8302fd12e3ee3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 29 Jun 2022 21:12:56 +0300
Subject: [PATCH 41/57] Revert "unify styling of timelines dropdown with other
 dropdown menus"

This reverts commit 898b326f6c9da3ba26ad35b2349c2a3f9fc0484a.
---
 .../timeline_menu/timeline_menu_content.vue   | 119 +++++++++---------
 1 file changed, 62 insertions(+), 57 deletions(-)

diff --git a/src/components/timeline_menu/timeline_menu_content.vue b/src/components/timeline_menu/timeline_menu_content.vue
index 6caf688ee7..bed1b679a4 100644
--- a/src/components/timeline_menu/timeline_menu_content.vue
+++ b/src/components/timeline_menu/timeline_menu_content.vue
@@ -1,61 +1,66 @@
 <template>
-  <div class="dropdown-menu">
-    <router-link
-      v-if="currentUser"
-      class="dropdown-item button-default"
-      :to="{ name: 'friends' }"
-    >
-      <FAIcon
-        fixed-width
-        class="fa-scale-110 fa-old-padding "
-        icon="home"
-      />{{ $t("nav.home_timeline") }}
-    </router-link>
-    <router-link
-      v-if="currentUser || !privateMode"
-      class="dropdown-item button-default"
-      :to="{ name: 'public-timeline' }"
-    >
-      <FAIcon
-        fixed-width
-        class="fa-scale-110 fa-old-padding "
-        icon="users"
-      />{{ $t("nav.public_tl") }}
-    </router-link>
-    <router-link
-      v-if="federating && (currentUser || !privateMode)"
-      class="dropdown-item button-default"
-      :to="{ name: 'public-external-timeline' }"
-    >
-      <FAIcon
-        fixed-width
-        class="fa-scale-110 fa-old-padding "
-        icon="globe"
-      />{{ $t("nav.twkn") }}
-    </router-link>
-    <router-link
-      v-if="currentUser"
-      class="dropdown-item button-default"
-      :to="{ name: 'bookmarks'}"
-    >
-      <FAIcon
-        fixed-width
-        class="fa-scale-110 fa-old-padding "
-        icon="bookmark"
-      />{{ $t("nav.bookmarks") }}
-    </router-link>
-    <router-link
-      v-if="currentUser"
-      class="dropdown-item button-default"
-      :to="{ name: 'dms', params: { username: currentUser.screen_name } }"
-    >
-      <FAIcon
-        fixed-width
-        class="fa-scale-110 fa-old-padding "
-        icon="envelope"
-      />{{ $t("nav.dms") }}
-    </router-link>
-  </div>
+  <ul>
+    <li v-if="currentUser">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'friends' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="home"
+        />{{ $t("nav.home_timeline") }}
+      </router-link>
+    </li>
+    <li v-if="currentUser || !privateMode">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'public-timeline' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="users"
+        />{{ $t("nav.public_tl") }}
+      </router-link>
+    </li>
+    <li v-if="federating && (currentUser || !privateMode)">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'public-external-timeline' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="globe"
+        />{{ $t("nav.twkn") }}
+      </router-link>
+    </li>
+    <li v-if="currentUser">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'bookmarks'}"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="bookmark"
+        />{{ $t("nav.bookmarks") }}
+      </router-link>
+    </li>
+    <li v-if="currentUser">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'dms', params: { username: currentUser.screen_name } }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="envelope"
+        />{{ $t("nav.dms") }}
+      </router-link>
+    </li>
+  </ul>
 </template>
 
 <script src="./timeline_menu_content.js" ></script>

From 14f48ed4abe236d939795b6c1ccc1e0e10c07bb9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 29 Jun 2022 21:40:44 +0300
Subject: [PATCH 42/57] re-unfuck the timeline popover

---
 .../timeline_menu/timeline_menu.vue           | 46 ++++++-------------
 1 file changed, 15 insertions(+), 31 deletions(-)

diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 6111948200..e6125d856d 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -3,19 +3,17 @@
     trigger="click"
     class="TimelineMenu"
     :class="{ 'open': isOpen }"
-    :margin="{ left: -15, right: -200 }"
     :bound-to="{ x: 'container' }"
-    popover-class="timeline-menu-popover-wrap"
+    bound-to-selector=".Timeline"
+    popover-class="timeline-menu-popover popover-default"
     @show="openMenu"
     @close="() => isOpen = false"
   >
     <template v-slot:content>
-      <div class="timeline-menu-popover popover-default">
-        <TimelineMenuContent />
-      </div>
+      <TimelineMenuContent />
     </template>
     <template v-slot:trigger>
-      <button class="button-unstyled title timeline-menu-title">
+      <span class="button-unstyled title timeline-menu-title">
         <span class="timeline-title">{{ timelineName() }}</span>
         <span>
           <FAIcon
@@ -27,7 +25,7 @@
           class="click-blocker"
           @click="blockOpen"
         />
-      </button>
+      </span>
     </template>
   </Popover>
 </template>
@@ -38,42 +36,18 @@
 @import '../../_variables.scss';
 
 .TimelineMenu {
-  flex-shrink: 1;
   margin-right: auto;
   min-width: 0;
-  width: 24rem;
 
   .popover-trigger-button {
     vertical-align: bottom;
   }
 
-  .timeline-menu-popover-wrap {
-    overflow: hidden;
-    // Match panel heading padding to line up menu with bottom of heading
-    margin-top: 0.6rem;
-    padding: 0 15px 15px 15px;
-  }
-
-  .timeline-menu-popover {
-    width: 24rem;
-    max-width: 100vw;
-    margin: 0;
-    font-size: 1rem;
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
-    transform: translateY(-100%);
-    transition: transform 100ms;
-  }
-
   .panel::after {
     border-top-right-radius: 0;
     border-top-left-radius: 0;
   }
 
-  &.open .timeline-menu-popover {
-    transform: translateY(0);
-  }
-
   .timeline-menu-title {
     margin: 0;
     cursor: pointer;
@@ -108,6 +82,16 @@
     box-shadow: var(--popoverShadow);
   }
 
+}
+
+.timeline-menu-popover {
+  min-width: 24rem;
+  max-width: 100vw;
+  margin-top: 0.6rem;
+  font-size: 1rem;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+
   ul {
     list-style: none;
     margin: 0;

From 54ab1ed741984ef0a81019bde053f441f99eaab2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 29 Jun 2022 21:40:54 +0300
Subject: [PATCH 43/57] fix the incorrect rounding in nav list

---
 src/components/nav_panel/nav_panel.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 7ae7b1d6ed..62aab7f16b 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -113,7 +113,9 @@
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);
     padding: 0;
+  }
 
+  > li {
     &:first-child .menu-item {
       border-top-right-radius: $fallback--panelRadius;
       border-top-right-radius: var(--panelRadius, $fallback--panelRadius);

From 2c3c2bb5b032f534a7ff9bc7be4687373baa2f8d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 19 Jul 2022 19:33:48 +0300
Subject: [PATCH 44/57] fix avatar not closing, add option to put popovers next
 to avatar instead of over it

---
 src/components/settings_modal/tabs/general_tab.vue |  5 +++++
 src/components/user_card/user_card.js              |  5 ++---
 src/components/user_card/user_card.scss            | 12 ++++++++----
 src/components/user_card/user_card.vue             | 14 ++++++++++----
 src/components/user_popover/user_popover.js        |  3 +++
 src/components/user_popover/user_popover.vue       |  5 ++---
 src/components/user_profile/user_profile.vue       |  2 +-
 src/i18n/en.json                                   |  1 +
 src/modules/config.js                              |  1 +
 9 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 0a300311e5..abb0ed402e 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -79,6 +79,11 @@
             {{ $t('settings.user_popover_avatar_zoom') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="userPopoverOverlay">
+            {{ $t('settings.user_popover_avatar_overlay') }}
+          </BooleanSetting>
+        </li>
         <li>
           <ChoiceSetting
             v-if="user"
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 9a8dcb23e4..b0fa11b379 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -37,9 +37,8 @@ export default {
     'hideBio',
     'rounded',
     'bordered',
-    'allowZoomingAvatar',
-    'onClose',
-    'onAvatarClick'
+    'avatarAction', // default - open profile, 'zoom' - zoom, function - call function
+    'onClose'
   ],
   data () {
     return {
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 65299e6064..a0bbc6a689 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -133,23 +133,27 @@
       min-width: 0;
     }
 
+    > a {
+      vertical-align: middle;
+      display: flex;
+    }
+
     .Avatar {
       --_avatarShadowBox: var(--avatarShadow);
       --_avatarShadowFilter: var(--avatarShadowFilter);
       --_avatarShadowInset: var(--avatarShadowInset);
 
-      flex: 1 0 100%;
       width: 56px;
       height: 56px;
       object-fit: cover;
     }
   }
 
-  &-avatar-link {
+  &-avatar {
     position: relative;
     cursor: pointer;
 
-    &-overlay {
+    &.-overlay {
       position: absolute;
       left: 0;
       top: 0;
@@ -169,7 +173,7 @@
       }
     }
 
-    &:hover &-overlay {
+    &:hover &.-overlay {
       opacity: 1;
     }
   }
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 62d4a94da7..bc23e68e81 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -12,25 +12,31 @@
       <div class="user-info">
         <div class="container">
           <a
-            v-if="allowZoomingAvatar"
-            class="user-info-avatar-link"
+            v-if="avatarAction === 'zoom'"
+            class="user-info-avatar -link"
             @click="zoomAvatar"
           >
             <UserAvatar
               :better-shadow="betterShadow"
               :user="user"
             />
-            <div class="user-info-avatar-link-overlay">
+            <div class="user-info-avatar -link -overlay">
               <FAIcon
                 class="fa-scale-110 fa-old-padding"
                 icon="search-plus"
               />
             </div>
           </a>
+          <UserAvatar
+            v-else-if="typeof avatarAction === 'function'"
+            @click="avatarAction"
+            class="user-info-avatar"
+            :better-shadow="betterShadow"
+            :user="user"
+          />
           <router-link
             v-else
             :to="userProfileLink(user)"
-            @click="onAvatarClickHandler"
           >
             <UserAvatar
               :better-shadow="betterShadow"
diff --git a/src/components/user_popover/user_popover.js b/src/components/user_popover/user_popover.js
index fa7f978173..69b2538391 100644
--- a/src/components/user_popover/user_popover.js
+++ b/src/components/user_popover/user_popover.js
@@ -13,6 +13,9 @@ const UserPopover = {
   computed: {
     userPopoverZoom () {
       return this.$store.getters.mergedConfig.userPopoverZoom
+    },
+    userPopoverOverlay () {
+      return this.$store.getters.mergedConfig.userPopoverOverlay
     }
   }
 }
diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue
index c14cea4d35..72bb7f7749 100644
--- a/src/components/user_popover/user_popover.vue
+++ b/src/components/user_popover/user_popover.vue
@@ -3,7 +3,7 @@
   trigger="click"
   popover-class="popover-default user-popover"
   :overlay-centers-selector="overlayCentersSelector || '.user-info .Avatar'"
-  :overlay-centers="overlayCenters"
+  :overlay-centers="overlayCenters && userPopoverOverlay"
   :disabled="disabled"
 >
   <template v-slot:trigger>
@@ -14,8 +14,7 @@
       class="user-popover"
       :user-id="userId"
       :hide-bio="true"
-      :allow-zooming-avatar="userPopoverZoom"
-      :on-avatar-click="userPopoverZoom ? null : close"
+      :avatar-action="userPopoverZoom ? 'zoom' : close"
       :on-close="close"
     />
   </template>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 6279259959..430d0915db 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -8,7 +8,7 @@
         :user-id="userId"
         :switcher="true"
         :selected="timeline.viewing"
-        :allow-zooming-avatar="true"
+        :avatar-action="zoom"
         rounded="top"
       />
       <div
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 9a8e54d6a1..fe02664fcc 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -551,6 +551,7 @@
     "mention_link_fade_domain": "Fade domains (e.g. {'@'}example.org in {'@'}foo{'@'}example.org)",
     "mention_link_bolden_you": "Highlight mention of you when you are mentioned",
     "user_popover_avatar_zoom": "Clicking on user avatar in popover zooms it instead of closing the popover",
+    "user_popover_avatar_overlay": "Show user popover over user avatar",
     "fun": "Fun",
     "greentext": "Meme arrows",
     "show_yous": "Show (You)s",
diff --git a/src/modules/config.js b/src/modules/config.js
index 14add385e1..f7f142ad1b 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -82,6 +82,7 @@ export const defaultState = {
   disableStickyHeaders: false,
   showScrollbars: false,
   userPopoverZoom: false,
+  userPopoverOverlay: true,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
   mentionLinkDisplay: undefined, // instance default

From f6d0d3efba3112e5fd175e6ff52a7032fba4afff Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Jul 2022 12:54:51 +0300
Subject: [PATCH 45/57] add popovers to chats

---
 src/components/chat_message/chat_message.js  |  8 +++-----
 src/components/chat_message/chat_message.vue |  6 +++---
 src/components/chat_title/chat_title.js      | 10 +++-------
 src/components/chat_title/chat_title.vue     |  6 +++---
 4 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
index 5bac773647..ebe09814c5 100644
--- a/src/components/chat_message/chat_message.js
+++ b/src/components/chat_message/chat_message.js
@@ -6,7 +6,7 @@ import Gallery from '../gallery/gallery.vue'
 import LinkPreview from '../link-preview/link-preview.vue'
 import StatusContent from '../status_content/status_content.vue'
 import ChatMessageDate from '../chat_message_date/chat_message_date.vue'
-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { defineAsyncComponent } from 'vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faTimes,
@@ -35,7 +35,8 @@ const ChatMessage = {
     UserAvatar,
     Gallery,
     LinkPreview,
-    ChatMessageDate
+    ChatMessageDate,
+    UserPopover: defineAsyncComponent(() => import('../user_popover/user_popover.vue'))
   },
   computed: {
     // Returns HH:MM (hours and minutes) in local time.
@@ -49,9 +50,6 @@ const ChatMessage = {
     message () {
       return this.chatViewItem.data
     },
-    userProfileLink () {
-      return generateProfileLink(this.author.id, this.author.screen_name, this.$store.state.instance.restrictedNicknames)
-    },
     isMessage () {
       return this.chatViewItem.type === 'message'
     },
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 0e1a5375d9..9b823f7d9b 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -14,16 +14,16 @@
         v-if="!isCurrentUser"
         class="avatar-wrapper"
       >
-        <router-link
+        <UserPopover
           v-if="chatViewItem.isHead"
-          :to="userProfileLink"
+          :userId="author.id"
         >
           <UserAvatar
             :compact="true"
             :better-shadow="betterShadow"
             :user="author"
           />
-        </router-link>
+        </UserPopover>
       </div>
       <div class="chat-message-inner">
         <div
diff --git a/src/components/chat_title/chat_title.js b/src/components/chat_title/chat_title.js
index f6e299ad33..b872112652 100644
--- a/src/components/chat_title/chat_title.js
+++ b/src/components/chat_title/chat_title.js
@@ -1,12 +1,13 @@
-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
+import { defineAsyncComponent } from 'vue'
 
 export default {
   name: 'ChatTitle',
   components: {
     UserAvatar,
-    RichContent
+    RichContent,
+    UserPopover: defineAsyncComponent(() => import('../user_popover/user_popover.vue'))
   },
   props: [
     'user', 'withAvatar'
@@ -18,10 +19,5 @@ export default {
     htmlTitle () {
       return this.user ? this.user.name_html : ''
     }
-  },
-  methods: {
-    getUserProfileLink (user) {
-      return generateProfileLink(user.id, user.screen_name)
-    }
   }
 }
diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
index 7f6aaaa418..22d0e7c491 100644
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@@ -3,16 +3,16 @@
     class="chat-title"
     :title="title"
   >
-    <router-link
+    <UserPopover
       class="avatar-container"
       v-if="withAvatar && user"
-      :to="getUserProfileLink(user)"
+      :userId="user.id"
     >
       <UserAvatar
         class="titlebar-avatar"
         :user="user"
       />
-    </router-link>
+    </UserPopover>
     <RichContent
       v-if="user"
       class="username"

From 19a7335ee7e7b0a287b027783efc7d35c2a11d46 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Jul 2022 12:59:38 +0300
Subject: [PATCH 46/57] fix spacing in mentionsline

---
 src/components/status/status.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 771d336a9d..bbb41d41e5 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -317,6 +317,7 @@
                   class="mentions-line-first"
                 />
               </span>
+              {{ ' ' }}
               <MentionsLine
                 v-if="hasMentionsLine"
                 :mentions="mentionsLine.slice(1)"

From c5919228abe1c5523698f88cace8f289810ef206 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 27 Jul 2022 19:08:20 +0300
Subject: [PATCH 47/57] fix avatar not zooming in profile page

---
 src/components/user_profile/user_profile.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 430d0915db..dbf2898180 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -8,7 +8,7 @@
         :user-id="userId"
         :switcher="true"
         :selected="timeline.viewing"
-        :avatar-action="zoom"
+        avatar-action="zoom"
         rounded="top"
       />
       <div

From 00ded9523f27f3c31bb0bb2e4ba4910871eb1097 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 27 Jul 2022 19:10:12 +0300
Subject: [PATCH 48/57] use same sizing for timeline dropdown as in the main
 nav

---
 src/components/timeline_menu/timeline_menu.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index e6125d856d..1e054f5ad5 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -118,7 +118,9 @@
 
   a {
     display: block;
-    padding: 0.6em 0.65em;
+    padding: 0 0.65em;
+    height: 3.5em;
+    line-height: 3.5em;
 
     &:hover {
       background-color: $fallback--lightBg;

From 3d9b3a7352acf991ae11524902bee50a60af79c6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 27 Jul 2022 20:25:30 +0300
Subject: [PATCH 49/57] make user popover options expert

---
 src/components/settings_modal/tabs/general_tab.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index abb0ed402e..e201ab9d42 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -75,12 +75,12 @@
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="userPopoverZoom">
+          <BooleanSetting path="userPopoverZoom" expert="1">
             {{ $t('settings.user_popover_avatar_zoom') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="userPopoverOverlay">
+          <BooleanSetting path="userPopoverOverlay" expert="1">
             {{ $t('settings.user_popover_avatar_overlay') }}
           </BooleanSetting>
         </li>

From 5c362e9256ca097e1f3a1c693e7a1efe693ee927 Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Thu, 28 Jul 2022 09:07:22 +0000
Subject: [PATCH 50/57] Update Font Awesome to v6.1.2

---
 package.json |  6 +++---
 yarn.lock    | 38 +++++++++++++++++++-------------------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index 58efee976e..e3d4124892 100644
--- a/package.json
+++ b/package.json
@@ -18,9 +18,9 @@
   "dependencies": {
     "@babel/runtime": "7.18.9",
     "@chenfengyuan/vue-qrcode": "2.0.0",
-    "@fortawesome/fontawesome-svg-core": "6.1.1",
-    "@fortawesome/free-regular-svg-icons": "6.1.1",
-    "@fortawesome/free-solid-svg-icons": "6.1.1",
+    "@fortawesome/fontawesome-svg-core": "6.1.2",
+    "@fortawesome/free-regular-svg-icons": "6.1.2",
+    "@fortawesome/free-solid-svg-icons": "6.1.2",
     "@fortawesome/vue-fontawesome": "3.0.1",
     "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
     "@ruffle-rs/ruffle": "^0.1.0-nightly.2022.7.12",
diff --git a/yarn.lock b/yarn.lock
index 4daa3ed168..5aed8de7ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1294,31 +1294,31 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
-"@fortawesome/fontawesome-common-types@6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz#7dc996042d21fc1ae850e3173b5c67b0549f9105"
-  integrity sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==
+"@fortawesome/fontawesome-common-types@6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.2.tgz#c1095b1bbabf19f37f9ff0719db38d92a410bcfe"
+  integrity sha512-wBaAPGz1Awxg05e0PBRkDRuTsy4B3dpBm+zreTTyd9TH4uUM27cAL4xWyWR0rLJCrRwzVsQ4hF3FvM6rqydKPA==
 
-"@fortawesome/fontawesome-svg-core@6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz#3424ec6182515951816be9b11665d67efdce5b5f"
-  integrity sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==
+"@fortawesome/fontawesome-svg-core@6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.2.tgz#11e2e8583a7dea75d734e4d0e53d91c63fae7511"
+  integrity sha512-853G/Htp0BOdXnPoeCPTjFrVwyrJHpe8MhjB/DYE9XjwhnNDfuBCd3aKc2YUYbEfHEcBws4UAA0kA9dymZKGjA==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "6.1.1"
+    "@fortawesome/fontawesome-common-types" "6.1.2"
 
-"@fortawesome/free-regular-svg-icons@6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.1.tgz#3f2f58262a839edf0643cbacee7a8a8230061c98"
-  integrity sha512-xXiW7hcpgwmWtndKPOzG+43fPH7ZjxOaoeyooptSztGmJxCAflHZxXNK0GcT0uEsR4jTGQAfGklDZE5NHoBhKg==
+"@fortawesome/free-regular-svg-icons@6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.2.tgz#9f04009098addcc11d0d185126f058ed042c3099"
+  integrity sha512-xR4hA+tAwsaTHGfb+25H1gVU/aJ0Rzu+xIUfnyrhaL13yNQ7TWiI2RvzniAaB+VGHDU2a+Pk96Ve+pkN3/+TTQ==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "6.1.1"
+    "@fortawesome/fontawesome-common-types" "6.1.2"
 
-"@fortawesome/free-solid-svg-icons@6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz#3369e673f8fe8be2fba30b1ec274d47490a830a6"
-  integrity sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==
+"@fortawesome/free-solid-svg-icons@6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.2.tgz#491d668b8a6603698d0ce1ac620f66fd22b74c84"
+  integrity sha512-lTgZz+cMpzjkHmCwOG3E1ilUZrnINYdqMmrkv30EC3XbRsGlbIOL8H9LaNp5SV4g0pNJDfQ4EdTWWaMvdwyLiQ==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "6.1.1"
+    "@fortawesome/fontawesome-common-types" "6.1.2"
 
 "@fortawesome/vue-fontawesome@3.0.1":
   version "3.0.1"

From 5c553bb1eb4740f0afe5756b2374c184bddf1590 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 30 Jul 2022 23:34:07 +0300
Subject: [PATCH 51/57] vertical nudge for popovers, especially for
 overlay-centers ones

---
 src/components/popover/popover.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 82ae988550..c19e690408 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -124,13 +124,17 @@ const Popover = {
         const leftInnerOffset = overlayCenterScreenBox.left - box.left
         const topInnerOffset = overlayCenterScreenBox.top - box.top
         horizOffset = -leftInnerOffset - overlayCenter.offsetWidth * 0.5
-        vertOffset = -topInnerOffset - overlayCenter.offsetWidth * 0.5
+        vertOffset = -topInnerOffset - overlayCenter.offsetHeight * 0.5
       } else {
         horizOffset = content.offsetWidth * -0.5
-        vertOffset = content.offsetWidth * -0.5
+        vertOffset = content.offsetHeight * -0.5
       }
+
       const leftBorder = origin.x + horizOffset
-      const rightBorder = origin.x - horizOffset
+      const rightBorder = leftBorder + content.offsetWidth
+      const topBorder = origin.y + vertOffset
+      const bottomBorder = topBorder + content.offsetHeight
+
       // If overflowing from left, move it so that it doesn't
       if (leftBorder < xBounds.min) {
         horizOffset += xBounds.min - leftBorder
@@ -141,6 +145,16 @@ const Popover = {
         horizOffset -= rightBorder - xBounds.max
       }
 
+      // If overflowing from top, move it so that it doesn't
+      if (topBorder < yBounds.min) {
+        vertOffset += yBounds.min - topBorder
+      }
+
+      // If overflowing from bottom, move it so that it doesn't
+      if (bottomBorder > yBounds.max) {
+        vertOffset -= bottomBorder - yBounds.max
+      }
+
       let translateX = 0
       let translateY = 0
 

From 03e6c6b993133673f9491aa313e63d65cdf176ff Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 30 Jul 2022 23:36:40 +0300
Subject: [PATCH 52/57] fix settings tooltips

---
 .../settings_modal/helpers/modified_indicator.vue      | 10 +++++-----
 .../settings_modal/helpers/server_side_indicator.vue   | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue
index ad212db963..74366dc1e5 100644
--- a/src/components/settings_modal/helpers/modified_indicator.vue
+++ b/src/components/settings_modal/helpers/modified_indicator.vue
@@ -41,11 +41,11 @@ export default {
 .ModifiedIndicator {
   display: inline-block;
   position: relative;
+}
 
-  .modified-tooltip {
-    margin: 0.5em 1em;
-    min-width: 10em;
-    text-align: center;
-  }
+.modified-tooltip {
+  margin: 0.5em 1em;
+  min-width: 10em;
+  text-align: center;
 }
 </style>
diff --git a/src/components/settings_modal/helpers/server_side_indicator.vue b/src/components/settings_modal/helpers/server_side_indicator.vue
index 143a86a163..cf53eb6a3a 100644
--- a/src/components/settings_modal/helpers/server_side_indicator.vue
+++ b/src/components/settings_modal/helpers/server_side_indicator.vue
@@ -41,11 +41,11 @@ export default {
 .ServerSideIndicator {
   display: inline-block;
   position: relative;
+}
 
-  .serverside-tooltip {
-    margin: 0.5em 1em;
-    min-width: 10em;
-    text-align: center;
-  }
+.serverside-tooltip {
+  margin: 0.5em 1em;
+  min-width: 10em;
+  text-align: center;
 }
 </style>

From d5bc825616858f8eccb4fb9786f0178bce44e979 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 31 Jul 2022 00:05:26 +0300
Subject: [PATCH 53/57] add stay-on-click prop to solve case of clicking user
 avatar in status popover

---
 src/components/popover/popover.js             | 18 ++++++++++++----
 src/components/popover/popover.vue            | 21 +++++++++++++++++++
 .../status_popover/status_popover.vue         |  1 +
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index c19e690408..843b22f3be 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -40,7 +40,10 @@ const Popover = {
     overlayCenters: Boolean,
 
     // What selector (witin popover!) to use for determining center of popover
-    overlayCentersSelector: String
+    overlayCentersSelector: String,
+
+    // Lets hover popover stay when clicking inside of it
+    stayOnClick: Boolean
   },
   inject: ['popoversZLayer'], // override popover z layer
   data () {
@@ -50,6 +53,7 @@ const Popover = {
       // with popovers refusing to be hidden when user wants to interact with something in below popover
       lockReEntry: false,
       hidden: true,
+      pinned: false,
       styles: {},
       oldSize: { width: 0, height: 0 },
       scrollable: null,
@@ -196,9 +200,10 @@ const Popover = {
     },
     showPopover () {
       if (this.disabled) return
+      this.pinned = false
       const wasHidden = this.hidden
       this.hidden = false
-      if (this.trigger === 'click') {
+      if (this.trigger === 'click' || this.stayOnClick) {
         document.addEventListener('click', this.onClickOutside)
       }
       this.scrollable.addEventListener('scroll', this.onScroll)
@@ -227,7 +232,7 @@ const Popover = {
       }
     },
     onMouseleave (e) {
-      if (this.trigger === 'hover') {
+      if (this.trigger === 'hover' && !this.pinned) {
         this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
       }
     },
@@ -240,7 +245,7 @@ const Popover = {
       }
     },
     onMouseleaveContent (e) {
-      if (this.trigger === 'hover') {
+      if (this.trigger === 'hover' && !this.pinned) {
         this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
       }
     },
@@ -259,6 +264,11 @@ const Popover = {
       if (this.$el.contains(e.target)) return
       this.hidePopover()
     },
+    onClickContent (e) {
+      if (this.trigger === 'hover' && this.stayOnClick) {
+        this.pinned = true
+      }
+    },
     onScroll (e) {
       this.updateStyles()
     },
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index f854515c11..9b67f40028 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -21,12 +21,22 @@
           :class="popoverClass || 'popover-default'"
           @mouseenter="onMouseenterContent"
           @mouseleave="onMouseleaveContent"
+          @click="onClickContent"
         >
           <slot
             name="content"
             class="popover-inner"
             :close="hidePopover"
           />
+          <div
+            v-if="stayOnClick && pinned"
+            class="pinned-tooltip-icon popover popover-default"
+          >
+            <FAIcon
+              icon="thumbtack"
+              class="faint"
+            />
+          </div>
         </div>
       </transition>
     </teleport>
@@ -51,6 +61,17 @@
   box-shadow: var(--popupShadow);
 }
 
+.pinned-tooltip-icon {
+  position: absolute;
+  top: -1em;
+  left: -1em;
+  width: 2em;
+  height: 2em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .popover-default {
   &:after {
     content: '';
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 2c436d04cb..9cabb751de 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -1,6 +1,7 @@
 <template>
   <Popover
     trigger="hover"
+    :stay-on-click="true"
     popover-class="popover-default status-popover"
     :bound-to="{ x: 'container' }"
     @show="enter"

From 6f696874bbfa4edd6daf4d1c5f1970b9a391e7db Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 31 Jul 2022 01:41:00 +0300
Subject: [PATCH 54/57] popover stack

---
 src/components/popover/popover.js | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 843b22f3be..e477051f2e 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -58,7 +58,9 @@ const Popover = {
       oldSize: { width: 0, height: 0 },
       scrollable: null,
       // used to avoid blinking if hovered onto popover
-      graceTimeout: null
+      graceTimeout: null,
+      parentPopover: null,
+      childrenShown: new Set()
     }
   },
   methods: {
@@ -203,6 +205,7 @@ const Popover = {
       this.pinned = false
       const wasHidden = this.hidden
       this.hidden = false
+      this.parentPopover && this.parentPopover.onChildPopoverState(this, true)
       if (this.trigger === 'click' || this.stayOnClick) {
         document.addEventListener('click', this.onClickOutside)
       }
@@ -217,6 +220,7 @@ const Popover = {
       if (this.disabled) return
       if (!this.hidden) this.$emit('close')
       this.hidden = true
+      this.parentPopover && this.parentPopover.onChildPopoverState(this, false)
       if (this.trigger === 'click') {
         document.removeEventListener('click', this.onClickOutside)
       }
@@ -232,7 +236,7 @@ const Popover = {
       }
     },
     onMouseleave (e) {
-      if (this.trigger === 'hover' && !this.pinned) {
+      if (this.trigger === 'hover' && !this.pinned && this.childrenShown.size > 0) {
         this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
       }
     },
@@ -245,7 +249,7 @@ const Popover = {
       }
     },
     onMouseleaveContent (e) {
-      if (this.trigger === 'hover' && !this.pinned) {
+      if (this.trigger === 'hover' && !this.pinned && this.childrenShown.size > 0) {
         this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
       }
     },
@@ -262,7 +266,9 @@ const Popover = {
       if (this.hidden) return
       if (this.$refs.content.contains(e.target)) return
       if (this.$el.contains(e.target)) return
+      if (this.childrenShown.size > 0) return
       this.hidePopover()
+      if (this.parentPopover) this.parentPopover.onClickOutside(e)
     },
     onClickContent (e) {
       if (this.trigger === 'hover' && this.stayOnClick) {
@@ -274,6 +280,13 @@ const Popover = {
     },
     onResize (e) {
       this.updateStyles()
+    },
+    onChildPopoverState (childRef, state) {
+      if (state) {
+        this.childrenShown.add(childRef)
+      } else {
+        this.childrenShown.delete(childRef)
+      }
     }
   },
   updated () {
@@ -292,6 +305,11 @@ const Popover = {
         this.$refs.trigger.closest('.mobile-notifications')
     if (!scrollable) scrollable = window
     this.scrollable = scrollable
+    let parent = this.$parent
+    while (parent && parent.$.type.name !== 'Popover') {
+      parent = parent.$parent
+    }
+    this.parentPopover = parent
   },
   beforeUnmount () {
     this.hidePopover()

From 8ab30545b2b792ddae9cc439c3e617195e22d3ca Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 31 Jul 2022 01:45:38 +0300
Subject: [PATCH 55/57] pinned no longer needed

---
 src/components/popover/popover.js  | 11 ++---------
 src/components/popover/popover.vue | 20 --------------------
 2 files changed, 2 insertions(+), 29 deletions(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index e477051f2e..f23df826a9 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -53,7 +53,6 @@ const Popover = {
       // with popovers refusing to be hidden when user wants to interact with something in below popover
       lockReEntry: false,
       hidden: true,
-      pinned: false,
       styles: {},
       oldSize: { width: 0, height: 0 },
       scrollable: null,
@@ -202,7 +201,6 @@ const Popover = {
     },
     showPopover () {
       if (this.disabled) return
-      this.pinned = false
       const wasHidden = this.hidden
       this.hidden = false
       this.parentPopover && this.parentPopover.onChildPopoverState(this, true)
@@ -236,7 +234,7 @@ const Popover = {
       }
     },
     onMouseleave (e) {
-      if (this.trigger === 'hover' && !this.pinned && this.childrenShown.size > 0) {
+      if (this.trigger === 'hover' && this.childrenShown.size > 0) {
         this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
       }
     },
@@ -249,7 +247,7 @@ const Popover = {
       }
     },
     onMouseleaveContent (e) {
-      if (this.trigger === 'hover' && !this.pinned && this.childrenShown.size > 0) {
+      if (this.trigger === 'hover' && this.childrenShown.size === 0) {
         this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
       }
     },
@@ -270,11 +268,6 @@ const Popover = {
       this.hidePopover()
       if (this.parentPopover) this.parentPopover.onClickOutside(e)
     },
-    onClickContent (e) {
-      if (this.trigger === 'hover' && this.stayOnClick) {
-        this.pinned = true
-      }
-    },
     onScroll (e) {
       this.updateStyles()
     },
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 9b67f40028..bd59cade91 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -28,15 +28,6 @@
             class="popover-inner"
             :close="hidePopover"
           />
-          <div
-            v-if="stayOnClick && pinned"
-            class="pinned-tooltip-icon popover popover-default"
-          >
-            <FAIcon
-              icon="thumbtack"
-              class="faint"
-            />
-          </div>
         </div>
       </transition>
     </teleport>
@@ -61,17 +52,6 @@
   box-shadow: var(--popupShadow);
 }
 
-.pinned-tooltip-icon {
-  position: absolute;
-  top: -1em;
-  left: -1em;
-  width: 2em;
-  height: 2em;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .popover-default {
   &:after {
     content: '';

From 6fc62a771a8e54ae84781805e2819094967237ac Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 31 Jul 2022 01:48:22 +0300
Subject: [PATCH 56/57] fix errors in console

---
 src/components/popover/popover.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index f23df826a9..67bb1037d0 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -262,7 +262,7 @@ const Popover = {
     },
     onClickOutside (e) {
       if (this.hidden) return
-      if (this.$refs.content.contains(e.target)) return
+      if (this.$refs.content && this.$refs.content.contains(e.target)) return
       if (this.$el.contains(e.target)) return
       if (this.childrenShown.size > 0) return
       this.hidePopover()

From 36aae1635ad370ecf4d22ae6d62cbbba6af19fd3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 31 Jul 2022 11:30:52 +0300
Subject: [PATCH 57/57] fix typo

---
 src/components/popover/popover.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 67bb1037d0..58f7126d52 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -234,7 +234,7 @@ const Popover = {
       }
     },
     onMouseleave (e) {
-      if (this.trigger === 'hover' && this.childrenShown.size > 0) {
+      if (this.trigger === 'hover' && this.childrenShown.size === 0) {
         this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
       }
     },