From 5faafdb428410800b7db9127adf7342894851407 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 1 Jul 2019 13:46:09 -0400
Subject: [PATCH 01/25] use popper for status preview

---
 src/components/status/status.js  |   7 +-
 src/components/status/status.vue | 169 +++++++++++++++----------------
 2 files changed, 85 insertions(+), 91 deletions(-)

diff --git a/src/components/status/status.js b/src/components/status/status.js
index d17ba318..ae3aacbd 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -1,3 +1,4 @@
+import Popper from 'vue-popperjs/src/component/popper.js.vue'
 import Attachment from '../attachment/attachment.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
@@ -38,7 +39,6 @@ const Status = {
       unmuted: false,
       userExpanded: false,
       preview: null,
-      showPreview: false,
       showingTall: this.inConversation && this.focused,
       showingLongSubject: false,
       error: null,
@@ -290,6 +290,7 @@ const Status = {
     }
   },
   components: {
+    Popper,
     Attachment,
     FavoriteButton,
     RetweetButton,
@@ -377,7 +378,6 @@ const Status = {
       }
     },
     replyEnter (id, event) {
-      this.showPreview = true
       const targetId = id
       const statuses = this.$store.state.statuses.allStatuses
 
@@ -394,9 +394,6 @@ const Status = {
         this.preview = find(statuses, { 'id': targetId })
       }
     },
-    replyLeave () {
-      this.showPreview = false
-    },
     generateUserProfileLink (id, name) {
       return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
     },
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 912f77d2..d03fe143 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -170,24 +170,30 @@
             </div>
 
             <div class="heading-reply-row">
-              <div
-                v-if="isReply"
-                class="reply-to-and-accountname"
-              >
-                <a
-                  class="reply-to"
-                  href="#"
-                  :aria-label="$t('tool_tip.reply')"
-                  @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
-                  @mouseenter.prevent.stop="replyEnter(status.in_reply_to_status_id, $event)"
-                  @mouseleave.prevent.stop="replyLeave()"
-                >
-                  <i
-                    v-if="!isPreview"
-                    class="button-icon icon-reply"
-                  />
-                  <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
-                </a>
+              <div v-if="isReply" class="reply-to-and-accountname">
+                <Popper ref="foo" :options="{ placement: 'bottom-start' }" @show="replyEnter(status.in_reply_to_status_id)">
+                  <div class="popper-wrapper status-preview">
+                    <status
+                      v-if="preview"
+                      :isPreview="true"
+                      :statusoid="preview"
+                      :compact="true"
+                    />
+                    <div v-else class="status-preview-loading">
+                      <i class="icon-spin4 animate-spin"></i>
+                    </div>
+                  </div>
+
+                  <a
+                    slot="reference"
+                    class="reply-to"
+                    href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+                    :aria-label="$t('tool_tip.reply')"
+                  >
+                    <i class="button-icon icon-reply" v-if="!isPreview"></i>
+                    <span class="faint-link reply-to-text">{{$t('status.reply_to')}}</span>
+                  </a>
+                </Popper>
                 <router-link :to="replyProfileLink">
                   {{ replyToName }}
                 </router-link>
@@ -224,25 +230,6 @@
             </div>
           </div>
 
-          <div
-            v-if="showPreview"
-            class="status-preview-container"
-          >
-            <status
-              v-if="preview"
-              class="status-preview"
-              :is-preview="true"
-              :statusoid="preview"
-              :compact="true"
-            />
-            <div
-              v-else
-              class="status-preview status-preview-loading"
-            >
-              <i class="icon-spin4 animate-spin" />
-            </div>
-          </div>
-
           <div
             v-if="longSubject"
             class="status-content-wrapper"
@@ -439,18 +426,6 @@ $status-margin: 0.75em;
   min-width: 0;
 }
 
-.status-preview.status-el {
-  border-style: solid;
-  border-width: 1px;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-}
-
-.status-preview-container {
-  position: relative;
-  max-width: 100%;
-}
-
 .status-pin {
   padding: $status-margin $status-margin 0;
   display: flex;
@@ -458,43 +433,6 @@ $status-margin: 0.75em;
   justify-content: flex-end;
 }
 
-.status-preview {
-  position: absolute;
-  max-width: 95%;
-  display: flex;
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-  border-style: solid;
-  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);
-  margin-top: 0.25em;
-  margin-left: 0.5em;
-  z-index: 50;
-
-  .status {
-    flex: 1;
-    border: 0;
-    min-width: 15em;
-  }
-}
-
-.status-preview-loading {
-  display: block;
-  min-width: 15em;
-  padding: 1em;
-  text-align: center;
-  border-width: 1px;
-  border-style: solid;
-
-  i {
-    font-size: 2em;
-  }
-}
 
 .media-left {
   margin-right: $status-margin;
@@ -600,6 +538,7 @@ $status-margin: 0.75em;
     }
 
     .heading-reply-row {
+      position: relative;
       align-content: baseline;
       font-size: 12px;
       line-height: 18px;
@@ -898,6 +837,64 @@ a.unmute {
   }
 }
 
+.popper-wrapper.status-preview {
+  font-size: 14px;
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
+  border-style: solid;
+  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);
+  min-width: 15em;
+  max-width: 95%;
+  margin-left: 0.5em;
+
+  > .status-el.status-el {
+    border: none;
+  }
+
+  > .status-preview-loading {
+    padding: 1em;
+    text-align: center;
+
+    i {
+      font-size: 2em;
+    }
+  }
+
+  &[x-placement^="bottom"] .popper__arrow {
+    &:before {
+      position: absolute;
+      content: '';
+      top: -2px;
+      left: -7px;
+      border-width: 0 7px 7px 7px;
+      border-color: transparent transparent $fallback--border transparent;
+      border-color: transparent transparent var(--border, $fallback--border) transparent;
+      border-style: solid;
+      z-index: -1;
+    }
+  }
+
+  &[x-placement^="top"] .popper__arrow {
+    &:before {
+      position: absolute;
+      content: '';
+      bottom: -2px;
+      left: -7px;
+      border-width: 7px 7px 0 7px;
+      border-color: $fallback--border transparent transparent transparent;
+      border-color: var(--border, $fallback--border)  transparent transparent transparent;
+      border-style: solid;
+      z-index: -1;
+    }
+  }
+}
+
 .favs-repeated-users {
   margin-top: $status-margin;
 

From 565d53812b394ed829bcd2e70e48efcc612e5d59 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 1 Jul 2019 13:47:55 -0400
Subject: [PATCH 02/25] reposition popper after fetching status

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

diff --git a/src/components/status/status.js b/src/components/status/status.js
index ae3aacbd..641702be 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -388,6 +388,7 @@ const Status = {
         if (!this.preview) {
           this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => {
             this.preview = status
+            this.$nextTick(this.$refs.foo.updatePopper)
           })
         }
       } else if (this.preview.id !== targetId) {

From a26ec64b3bcc4e4a50dd984b39ab1d8ddde05b30 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 1 Jul 2019 14:00:02 -0400
Subject: [PATCH 03/25] fix minor css issues in status preview

---
 src/components/status/status.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index d03fe143..cb4abb9a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -491,11 +491,6 @@ $status-margin: 0.75em;
     flex-basis: 100%;
     margin-bottom: 0.5em;
 
-    a {
-      display: inline-block;
-      word-break: break-all;
-    }
-
     small {
       font-weight: lighter;
     }
@@ -506,6 +501,11 @@ $status-margin: 0.75em;
       justify-content: space-between;
       line-height: 18px;
 
+      a {
+        display: inline-block;
+        word-break: break-all;
+      }
+
       .name-and-account-name {
         display: flex;
         min-width: 0;
@@ -547,11 +547,13 @@ $status-margin: 0.75em;
       flex-wrap: wrap;
       align-items: stretch;
 
-      a {
+      > .reply-to-and-accountname > a {
         max-width: 100%;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
+        display: inline-block;
+        word-break: break-all;
       }
     }
 

From 5d6fcb3bb3b901f678c26732037c142bf0145c51 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 1 Jul 2019 14:00:19 -0400
Subject: [PATCH 04/25] css cleanup

---
 src/components/status/status.vue | 42 ++++++++++++++------------------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index cb4abb9a..e0515b33 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -868,32 +868,26 @@ a.unmute {
     }
   }
 
-  &[x-placement^="bottom"] .popper__arrow {
-    &:before {
-      position: absolute;
-      content: '';
-      top: -2px;
-      left: -7px;
-      border-width: 0 7px 7px 7px;
-      border-color: transparent transparent $fallback--border transparent;
-      border-color: transparent transparent var(--border, $fallback--border) transparent;
-      border-style: solid;
-      z-index: -1;
-    }
+  .popper__arrow::before {
+    position: absolute;
+    content: '';
+    left: -7px;
+    border: solid 7px transparent;
+    z-index: -1;
   }
 
-  &[x-placement^="top"] .popper__arrow {
-    &:before {
-      position: absolute;
-      content: '';
-      bottom: -2px;
-      left: -7px;
-      border-width: 7px 7px 0 7px;
-      border-color: $fallback--border transparent transparent transparent;
-      border-color: var(--border, $fallback--border)  transparent transparent transparent;
-      border-style: solid;
-      z-index: -1;
-    }
+  &[x-placement^="bottom"] .popper__arrow::before {
+    top: -2px;
+    border-top-width: 0;
+    border-bottom-color: $fallback--border;
+    border-bottom-color: var(--border, $fallback--border);
+  }
+
+  &[x-placement^="top"] .popper__arrow::before {
+    bottom: -2px;
+    border-bottom-width: 0;
+    border-top-color: $fallback--border;
+    border-top-color: var(--border, $fallback--border);
   }
 }
 

From 498d7bcb5e029650c964ea241ffa3dc44ff6a79e Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 1 Jul 2019 14:03:07 -0400
Subject: [PATCH 05/25] use better name

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

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 641702be..d24feccf 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -388,7 +388,7 @@ const Status = {
         if (!this.preview) {
           this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => {
             this.preview = status
-            this.$nextTick(this.$refs.foo.updatePopper)
+            this.$nextTick(this.$refs.statusPreviewPopper.updatePopper)
           })
         }
       } else if (this.preview.id !== targetId) {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index e0515b33..d59e661c 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -171,7 +171,7 @@
 
             <div class="heading-reply-row">
               <div v-if="isReply" class="reply-to-and-accountname">
-                <Popper ref="foo" :options="{ placement: 'bottom-start' }" @show="replyEnter(status.in_reply_to_status_id)">
+                <Popper ref="statusPreviewPopper" :options="{ placement: 'bottom-start' }" @show="replyEnter(status.in_reply_to_status_id)">
                   <div class="popper-wrapper status-preview">
                     <status
                       v-if="preview"

From 72fe385ec4c6893c279a00ee1911f03d20e4c1f8 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 1 Jul 2019 14:38:43 -0400
Subject: [PATCH 06/25] hide status preview popper when hover popper content

---
 src/components/status/status.vue | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index d59e661c..66082aa4 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -173,14 +173,16 @@
               <div v-if="isReply" class="reply-to-and-accountname">
                 <Popper ref="statusPreviewPopper" :options="{ placement: 'bottom-start' }" @show="replyEnter(status.in_reply_to_status_id)">
                   <div class="popper-wrapper status-preview">
-                    <status
-                      v-if="preview"
-                      :isPreview="true"
-                      :statusoid="preview"
-                      :compact="true"
-                    />
-                    <div v-else class="status-preview-loading">
-                      <i class="icon-spin4 animate-spin"></i>
+                    <div class="popper-wrapper-inner" @mouseover.prevent.stop @focus.prevent.stop>
+                      <status
+                        v-if="preview"
+                        :isPreview="true"
+                        :statusoid="preview"
+                        :compact="true"
+                      />
+                      <div v-else class="status-preview-loading">
+                        <i class="icon-spin4 animate-spin"></i>
+                      </div>
                     </div>
                   </div>
 
@@ -855,11 +857,11 @@ a.unmute {
   max-width: 95%;
   margin-left: 0.5em;
 
-  > .status-el.status-el {
+  .status-el.status-el {
     border: none;
   }
 
-  > .status-preview-loading {
+  .status-preview-loading {
     padding: 1em;
     text-align: center;
 

From 0f65280e203a5f41dba650760e0294e7215fc500 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 5 Jul 2019 11:38:48 -0400
Subject: [PATCH 07/25] use top placement by default

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

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 66082aa4..79b359b7 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -171,7 +171,7 @@
 
             <div class="heading-reply-row">
               <div v-if="isReply" class="reply-to-and-accountname">
-                <Popper ref="statusPreviewPopper" :options="{ placement: 'bottom-start' }" @show="replyEnter(status.in_reply_to_status_id)">
+                <Popper ref="statusPreviewPopper" :options="{ placement: 'top-start' }" @show="replyEnter(status.in_reply_to_status_id)">
                   <div class="popper-wrapper status-preview">
                     <div class="popper-wrapper-inner" @mouseover.prevent.stop @focus.prevent.stop>
                       <status

From 1504b272d2d4065c7ba9e940c09bdc853e728bc4 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 5 Jul 2019 12:08:16 -0400
Subject: [PATCH 08/25] reset font-size to normal text size using rem

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

diff --git a/src/App.scss b/src/App.scss
index f20eb44c..2d10f1e7 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -39,10 +39,13 @@ h4 {
   text-align: center;
 }
 
+html {
+  font-size: 14px;
+}
+
 body {
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
-  font-size: 14px;
   margin: 0;
   color: $fallback--text;
   color: var(--text, $fallback--text);
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 79b359b7..cdafcfda 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -842,7 +842,7 @@ a.unmute {
 }
 
 .popper-wrapper.status-preview {
-  font-size: 14px;
+  font-size: 1rem;
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
   border-color: $fallback--border;

From e834b9d88b8373d6647b6f9bab61a52885f9eb7a Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sun, 7 Jul 2019 22:42:08 -0400
Subject: [PATCH 09/25] fix eslint warnings

---
 src/components/status/status.vue | 37 +++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index cdafcfda..daba7efc 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -170,18 +170,32 @@
             </div>
 
             <div class="heading-reply-row">
-              <div v-if="isReply" class="reply-to-and-accountname">
-                <Popper ref="statusPreviewPopper" :options="{ placement: 'top-start' }" @show="replyEnter(status.in_reply_to_status_id)">
+              <div
+                v-if="isReply"
+                class="reply-to-and-accountname"
+              >
+                <Popper
+                  ref="statusPreviewPopper"
+                  :options="{ placement: 'top-start' }"
+                  @show="replyEnter(status.in_reply_to_status_id)"
+                >
                   <div class="popper-wrapper status-preview">
-                    <div class="popper-wrapper-inner" @mouseover.prevent.stop @focus.prevent.stop>
+                    <div
+                      class="popper-wrapper-inner"
+                      @mouseover.prevent.stop
+                      @focus.prevent.stop
+                    >
                       <status
                         v-if="preview"
-                        :isPreview="true"
+                        :is-preview="true"
                         :statusoid="preview"
                         :compact="true"
                       />
-                      <div v-else class="status-preview-loading">
-                        <i class="icon-spin4 animate-spin"></i>
+                      <div
+                        v-else
+                        class="status-preview-loading"
+                      >
+                        <i class="icon-spin4 animate-spin" />
                       </div>
                     </div>
                   </div>
@@ -189,11 +203,15 @@
                   <a
                     slot="reference"
                     class="reply-to"
-                    href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+                    href="#"
                     :aria-label="$t('tool_tip.reply')"
+                    @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                   >
-                    <i class="button-icon icon-reply" v-if="!isPreview"></i>
-                    <span class="faint-link reply-to-text">{{$t('status.reply_to')}}</span>
+                    <i
+                      v-if="!isPreview"
+                      class="button-icon icon-reply"
+                    />
+                    <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
                   </a>
                 </Popper>
                 <router-link :to="replyProfileLink">
@@ -435,7 +453,6 @@ $status-margin: 0.75em;
   justify-content: flex-end;
 }
 
-
 .media-left {
   margin-right: $status-margin;
 }

From 2f7f6967fdb5e11cd866cb0d15a0d50bf4e00ed7 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sun, 7 Jul 2019 22:47:32 -0400
Subject: [PATCH 10/25] fix popper go behind the top bar

---
 src/components/status/status.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index daba7efc..79fbe47d 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -176,7 +176,12 @@
               >
                 <Popper
                   ref="statusPreviewPopper"
-                  :options="{ placement: 'top-start' }"
+                  :options="{
+                    placement: 'top-start',
+                    modifiers: {
+                      preventOverflow: { padding: 50, boundariesElement: 'viewport' },
+                    }
+                  }"
                   @show="replyEnter(status.in_reply_to_status_id)"
                 >
                   <div class="popper-wrapper status-preview">

From 85c897403a0460c4932c70f783c1725d32cff6ac Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 17 Jul 2019 12:50:49 -0400
Subject: [PATCH 11/25] migrate Popper to v-popover

---
 src/components/popper/popper.scss |   9 +--
 src/components/status/status.js   |   2 -
 src/components/status/status.vue  | 130 +++++++++++++++---------------
 3 files changed, 68 insertions(+), 73 deletions(-)

diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
index 279b01be..06daa871 100644
--- a/src/components/popper/popper.scss
+++ b/src/components/popper/popper.scss
@@ -20,7 +20,6 @@
     margin: 5px;
     border-color: $fallback--bg;
     border-color: var(--bg, $fallback--bg);
-    z-index: 1;
   }
 
   &[x-placement^="top"] {
@@ -31,7 +30,7 @@
       border-left-color: transparent !important;
       border-right-color: transparent !important;
       border-bottom-color: transparent !important;
-      bottom: -5px;
+      bottom: -4px;
       left: calc(50% - 5px);
       margin-top: 0;
       margin-bottom: 0;
@@ -46,7 +45,7 @@
       border-left-color: transparent !important;
       border-right-color: transparent !important;
       border-top-color: transparent !important;
-      top: -5px;
+      top: -4px;
       left: calc(50% - 5px);
       margin-top: 0;
       margin-bottom: 0;
@@ -61,7 +60,7 @@
       border-left-color: transparent !important;
       border-top-color: transparent !important;
       border-bottom-color: transparent !important;
-      left: -5px;
+      left: -4px;
       top: calc(50% - 5px);
       margin-left: 0;
       margin-right: 0;
@@ -76,7 +75,7 @@
       border-top-color: transparent !important;
       border-right-color: transparent !important;
       border-bottom-color: transparent !important;
-      right: -5px;
+      right: -4px;
       top: calc(50% - 5px);
       margin-left: 0;
       margin-right: 0;
diff --git a/src/components/status/status.js b/src/components/status/status.js
index d24feccf..36455f2a 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -1,4 +1,3 @@
-import Popper from 'vue-popperjs/src/component/popper.js.vue'
 import Attachment from '../attachment/attachment.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
@@ -290,7 +289,6 @@ const Status = {
     }
   },
   components: {
-    Popper,
     Attachment,
     FavoriteButton,
     RetweetButton,
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 79fbe47d..fd1705a0 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -174,51 +174,47 @@
                 v-if="isReply"
                 class="reply-to-and-accountname"
               >
-                <Popper
+                <v-popover
+                  v-if="!isPreview"
                   ref="statusPreviewPopper"
-                  :options="{
-                    placement: 'top-start',
-                    modifiers: {
-                      preventOverflow: { padding: 50, boundariesElement: 'viewport' },
-                    }
-                  }"
+                  popoverClass="status-popover"
+                  placement="top-start"
+                  trigger="hover"
+                  :offset="5"
+                  :container="false"
                   @show="replyEnter(status.in_reply_to_status_id)"
                 >
-                  <div class="popper-wrapper status-preview">
+                  <div slot="popover">
+                    <status
+                      v-if="preview"
+                      :is-preview="true"
+                      :statusoid="preview"
+                      :compact="true"
+                    />
                     <div
-                      class="popper-wrapper-inner"
-                      @mouseover.prevent.stop
-                      @focus.prevent.stop
+                      v-else
+                      class="status-preview-loading"
                     >
-                      <status
-                        v-if="preview"
-                        :is-preview="true"
-                        :statusoid="preview"
-                        :compact="true"
-                      />
-                      <div
-                        v-else
-                        class="status-preview-loading"
-                      >
-                        <i class="icon-spin4 animate-spin" />
-                      </div>
+                      <i class="icon-spin4 animate-spin" />
                     </div>
                   </div>
 
                   <a
-                    slot="reference"
                     class="reply-to"
                     href="#"
                     :aria-label="$t('tool_tip.reply')"
                     @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                   >
-                    <i
-                      v-if="!isPreview"
-                      class="button-icon icon-reply"
-                    />
+                    <i class="button-icon icon-reply" />
                     <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
                   </a>
-                </Popper>
+                </v-popover>
+                <span
+                  v-else
+                  class="reply-to"
+                >
+                  <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
+                </span>
                 <router-link :to="replyProfileLink">
                   {{ replyToName }}
                 </router-link>
@@ -604,6 +600,8 @@ $status-margin: 0.75em;
       overflow: hidden;
       text-overflow: ellipsis;
       margin: 0 0.4em 0 0.2em;
+      color: $fallback--faint;
+      color: var(--faint, $fallback--faint);
     }
 
     .replies-separator {
@@ -863,21 +861,43 @@ a.unmute {
   }
 }
 
-.popper-wrapper.status-preview {
-  font-size: 1rem;
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-  border-style: solid;
-  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);
-  min-width: 15em;
-  max-width: 95%;
-  margin-left: 0.5em;
+.tooltip.popover.status-popover {
+  .popover-inner {
+    font-size: 1rem;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    border-style: solid;
+    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);
+    min-width: 15em;
+    max-width: 95%;
+    margin-left: 0.5em;
+  }
+
+  .popover-arrow::before {
+    position: absolute;
+    content: '';
+    left: -7px;
+    border: solid 7px transparent;
+    z-index: -1;
+  }
+
+  &[x-placement^="bottom-start"] .popover-arrow::before {
+    top: -2px;
+    border-top-width: 0;
+    border-bottom-color: $fallback--border;
+    border-bottom-color: var(--border, $fallback--border);
+  }
+
+  &[x-placement^="top-start"] .popover-arrow::before {
+    bottom: -2px;
+    border-bottom-width: 0;
+    border-top-color: $fallback--border;
+    border-top-color: var(--border, $fallback--border);
+  }
 
   .status-el.status-el {
     border: none;
@@ -891,28 +911,6 @@ a.unmute {
       font-size: 2em;
     }
   }
-
-  .popper__arrow::before {
-    position: absolute;
-    content: '';
-    left: -7px;
-    border: solid 7px transparent;
-    z-index: -1;
-  }
-
-  &[x-placement^="bottom"] .popper__arrow::before {
-    top: -2px;
-    border-top-width: 0;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
-  }
-
-  &[x-placement^="top"] .popper__arrow::before {
-    bottom: -2px;
-    border-bottom-width: 0;
-    border-top-color: $fallback--border;
-    border-top-color: var(--border, $fallback--border);
-  }
 }
 
 .favs-repeated-users {

From 39e92e76b9f1c4d7de844a23f88e21b502e30f6b Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 17 Jul 2019 13:00:44 -0400
Subject: [PATCH 12/25] fix popper go behind the top bar

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

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index fd1705a0..1187c182 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -182,6 +182,11 @@
                   trigger="hover"
                   :offset="5"
                   :container="false"
+                  :popperOptions="{
+                    modifiers: {
+                      preventOverflow: { padding: 50, boundariesElement: 'viewport' },
+                    }
+                  }"
                   @show="replyEnter(status.in_reply_to_status_id)"
                 >
                   <div slot="popover">

From c9ba37ba2cb5871fbf31881842308f503b9852bb Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 17 Jul 2019 13:01:42 -0400
Subject: [PATCH 13/25] fix eslint warnings

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

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 1187c182..7053e2cb 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -177,12 +177,12 @@
                 <v-popover
                   v-if="!isPreview"
                   ref="statusPreviewPopper"
-                  popoverClass="status-popover"
+                  popover-class="status-popover"
                   placement="top-start"
                   trigger="hover"
                   :offset="5"
                   :container="false"
-                  :popperOptions="{
+                  :popper-options="{
                     modifiers: {
                       preventOverflow: { padding: 50, boundariesElement: 'viewport' },
                     }

From c009f17651e153835babd04b1cda1cb4a24ca0a2 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 17 Jul 2019 13:56:27 -0400
Subject: [PATCH 14/25] set different trigger event in desktop and mobile by
 default

---
 package.json                                         | 1 +
 src/components/extra_buttons/extra_buttons.vue       | 2 --
 src/components/moderation_tools/moderation_tools.vue | 2 --
 src/components/status/status.vue                     | 3 ---
 src/main.js                                          | 9 ++++++++-
 yarn.lock                                            | 5 +++++
 6 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index f039d412..dabc4d11 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "diff": "^3.0.1",
     "karma-mocha-reporter": "^2.2.1",
     "localforage": "^1.5.0",
+    "mobile-detect": "^1.4.3",
     "object-path": "^0.11.3",
     "phoenix": "^1.3.0",
     "portal-vue": "^2.1.4",
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 6781a4f8..746f1c91 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -4,8 +4,6 @@
     trigger="click"
     placement="top"
     class="extra-button-popover"
-    :offset="5"
-    :container="false"
   >
     <div slot="popover">
       <div class="dropdown-menu">
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index d97ca3aa..006d6373 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -3,9 +3,7 @@
     <v-popover
       trigger="click"
       class="moderation-tools-popover"
-      :container="false"
       placement="bottom-end"
-      :offset="5"
       @show="showDropDown = true"
       @hide="showDropDown = false"
     >
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 7053e2cb..1b383558 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -179,9 +179,6 @@
                   ref="statusPreviewPopper"
                   popover-class="status-popover"
                   placement="top-start"
-                  trigger="hover"
-                  :offset="5"
-                  :container="false"
                   :popper-options="{
                     modifiers: {
                       preventOverflow: { padding: 50, boundariesElement: 'viewport' },
diff --git a/src/main.js b/src/main.js
index 7923ffe8..cfa683e5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -29,6 +29,7 @@ import VueClickOutside from 'v-click-outside'
 import PortalVue from 'portal-vue'
 import VBodyScrollLock from './directives/body_scroll_lock'
 import VTooltip from 'v-tooltip'
+import MobileDetect from 'mobile-detect'
 
 import afterStoreSetup from './boot/after_store.js'
 
@@ -41,7 +42,13 @@ Vue.use(VueChatScroll)
 Vue.use(VueClickOutside)
 Vue.use(PortalVue)
 Vue.use(VBodyScrollLock)
-Vue.use(VTooltip)
+Vue.use(VTooltip, {
+  popover: {
+    defaultTrigger: (new MobileDetect(window.navigator.userAgent)).mobile() ? 'click' : 'hover',
+    defaultContainer: false,
+    defaultOffset: 5
+  }
+})
 
 const i18n = new VueI18n({
   // By default, use the browser locale, we will update it if neccessary
diff --git a/yarn.lock b/yarn.lock
index 4e0d9a22..a9714854 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4836,6 +4836,11 @@ mkpath@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/mkpath/-/mkpath-1.0.0.tgz#ebb3a977e7af1c683ae6fda12b545a6ba6c5853d"
 
+mobile-detect@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/mobile-detect/-/mobile-detect-1.4.3.tgz#e436a3839f5807dd4d3cd4e081f7d3a51ffda2dd"
+  integrity sha512-UaahPNLllQsstHOEHAmVnTHCMQrAS9eL5Qgdi50QrYz6UgGk+Xziz2udz2GN6NYcyODcPLnasC7a7s6R2DjiaQ==
+
 mocha-nightwatch@3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/mocha-nightwatch/-/mocha-nightwatch-3.2.2.tgz#91bcb9b3bde057dd7677c78125e491e58d66647c"

From 17295429e55fac15e69cc0baccf826751f54acb7 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 17 Jul 2019 14:37:20 -0400
Subject: [PATCH 15/25] restrict distance at top side only

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

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 1b383558..f9cd4d98 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -181,7 +181,7 @@
                   placement="top-start"
                   :popper-options="{
                     modifiers: {
-                      preventOverflow: { padding: 50, boundariesElement: 'viewport' },
+                      preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' },
                     }
                   }"
                   @show="replyEnter(status.in_reply_to_status_id)"

From 052a00dadb88ee8257c01bbb4d1a7f436b37cf03 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 17 Jul 2019 14:37:43 -0400
Subject: [PATCH 16/25] minor css fix

---
 src/components/status/status.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index f9cd4d98..3edee25a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -864,8 +864,12 @@ a.unmute {
 }
 
 .tooltip.popover.status-popover {
+  font-size: 1rem;
+  min-width: 15em;
+  max-width: 95%;
+  margin-left: 0.5em;
+
   .popover-inner {
-    font-size: 1rem;
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);
     border-style: solid;
@@ -874,9 +878,6 @@ a.unmute {
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
     box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
     box-shadow: var(--popupShadow);
-    min-width: 15em;
-    max-width: 95%;
-    margin-left: 0.5em;
   }
 
   .popover-arrow::before {

From 95e211ccb7bbfbf8373bdcacfdc8d42e729623e7 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 16:11:28 -0400
Subject: [PATCH 17/25] listen both events

---
 src/main.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/main.js b/src/main.js
index cfa683e5..a9db1cff 100644
--- a/src/main.js
+++ b/src/main.js
@@ -29,7 +29,6 @@ import VueClickOutside from 'v-click-outside'
 import PortalVue from 'portal-vue'
 import VBodyScrollLock from './directives/body_scroll_lock'
 import VTooltip from 'v-tooltip'
-import MobileDetect from 'mobile-detect'
 
 import afterStoreSetup from './boot/after_store.js'
 
@@ -44,7 +43,7 @@ Vue.use(PortalVue)
 Vue.use(VBodyScrollLock)
 Vue.use(VTooltip, {
   popover: {
-    defaultTrigger: (new MobileDetect(window.navigator.userAgent)).mobile() ? 'click' : 'hover',
+    defaultTrigger: 'hover click',
     defaultContainer: false,
     defaultOffset: 5
   }

From 54a26be90c4e0f770d49fbaa35ae62afd85912bc Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 16:13:00 -0400
Subject: [PATCH 18/25] uninstall mobile-detect library

---
 package.json | 1 -
 yarn.lock    | 5 -----
 2 files changed, 6 deletions(-)

diff --git a/package.json b/package.json
index dabc4d11..f039d412 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
     "diff": "^3.0.1",
     "karma-mocha-reporter": "^2.2.1",
     "localforage": "^1.5.0",
-    "mobile-detect": "^1.4.3",
     "object-path": "^0.11.3",
     "phoenix": "^1.3.0",
     "portal-vue": "^2.1.4",
diff --git a/yarn.lock b/yarn.lock
index a9714854..4e0d9a22 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4836,11 +4836,6 @@ mkpath@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/mkpath/-/mkpath-1.0.0.tgz#ebb3a977e7af1c683ae6fda12b545a6ba6c5853d"
 
-mobile-detect@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/mobile-detect/-/mobile-detect-1.4.3.tgz#e436a3839f5807dd4d3cd4e081f7d3a51ffda2dd"
-  integrity sha512-UaahPNLllQsstHOEHAmVnTHCMQrAS9eL5Qgdi50QrYz6UgGk+Xziz2udz2GN6NYcyODcPLnasC7a7s6R2DjiaQ==
-
 mocha-nightwatch@3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/mocha-nightwatch/-/mocha-nightwatch-3.2.2.tgz#91bcb9b3bde057dd7677c78125e491e58d66647c"

From 62b2648a3e124ac34d960219b925a6c3569e2229 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 16:53:36 -0400
Subject: [PATCH 19/25] split status preview popover into a separate component

---
 src/components/status/status.js               | 25 +-----
 src/components/status/status.vue              | 82 +-----------------
 .../status_popover/status_popover.js          | 43 ++++++++++
 .../status_popover/status_popover.vue         | 86 +++++++++++++++++++
 4 files changed, 136 insertions(+), 100 deletions(-)
 create mode 100644 src/components/status_popover/status_popover.js
 create mode 100644 src/components/status_popover/status_popover.vue

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 36455f2a..d3b39175 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -10,11 +10,12 @@ import Gallery from '../gallery/gallery.vue'
 import LinkPreview from '../link-preview/link-preview.vue'
 import AvatarList from '../avatar_list/avatar_list.vue'
 import Timeago from '../timeago/timeago.vue'
+import StatusPopover from '../status_popover/status_popover.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import fileType from 'src/services/file_type/file_type.service'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
-import { filter, find, unescape, uniqBy } from 'lodash'
+import { filter, unescape, uniqBy } from 'lodash'
 
 const Status = {
   name: 'Status',
@@ -37,7 +38,6 @@ const Status = {
       replying: false,
       unmuted: false,
       userExpanded: false,
-      preview: null,
       showingTall: this.inConversation && this.focused,
       showingLongSubject: false,
       error: null,
@@ -300,7 +300,8 @@ const Status = {
     Gallery,
     LinkPreview,
     AvatarList,
-    Timeago
+    Timeago,
+    StatusPopover
   },
   methods: {
     visibilityIcon (visibility) {
@@ -375,24 +376,6 @@ const Status = {
         this.expandingSubject = true
       }
     },
-    replyEnter (id, event) {
-      const targetId = id
-      const statuses = this.$store.state.statuses.allStatuses
-
-      if (!this.preview) {
-        // if we have the status somewhere already
-        this.preview = find(statuses, { 'id': targetId })
-        // or if we have to fetch it
-        if (!this.preview) {
-          this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => {
-            this.preview = status
-            this.$nextTick(this.$refs.statusPreviewPopper.updatePopper)
-          })
-        }
-      } else if (this.preview.id !== targetId) {
-        this.preview = find(statuses, { 'id': targetId })
-      }
-    },
     generateUserProfileLink (id, name) {
       return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
     },
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 3edee25a..e91dfd28 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -174,33 +174,10 @@
                 v-if="isReply"
                 class="reply-to-and-accountname"
               >
-                <v-popover
+                <StatusPopover
                   v-if="!isPreview"
-                  ref="statusPreviewPopper"
-                  popover-class="status-popover"
-                  placement="top-start"
-                  :popper-options="{
-                    modifiers: {
-                      preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' },
-                    }
-                  }"
-                  @show="replyEnter(status.in_reply_to_status_id)"
+                  :status-id="status.in_reply_to_status_id"
                 >
-                  <div slot="popover">
-                    <status
-                      v-if="preview"
-                      :is-preview="true"
-                      :statusoid="preview"
-                      :compact="true"
-                    />
-                    <div
-                      v-else
-                      class="status-preview-loading"
-                    >
-                      <i class="icon-spin4 animate-spin" />
-                    </div>
-                  </div>
-
                   <a
                     class="reply-to"
                     href="#"
@@ -210,7 +187,7 @@
                     <i class="button-icon icon-reply" />
                     <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
                   </a>
-                </v-popover>
+                </StatusPopover>
                 <span
                   v-else
                   class="reply-to"
@@ -863,59 +840,6 @@ a.unmute {
   }
 }
 
-.tooltip.popover.status-popover {
-  font-size: 1rem;
-  min-width: 15em;
-  max-width: 95%;
-  margin-left: 0.5em;
-
-  .popover-inner {
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    border-style: solid;
-    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);
-  }
-
-  .popover-arrow::before {
-    position: absolute;
-    content: '';
-    left: -7px;
-    border: solid 7px transparent;
-    z-index: -1;
-  }
-
-  &[x-placement^="bottom-start"] .popover-arrow::before {
-    top: -2px;
-    border-top-width: 0;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
-  }
-
-  &[x-placement^="top-start"] .popover-arrow::before {
-    bottom: -2px;
-    border-bottom-width: 0;
-    border-top-color: $fallback--border;
-    border-top-color: var(--border, $fallback--border);
-  }
-
-  .status-el.status-el {
-    border: none;
-  }
-
-  .status-preview-loading {
-    padding: 1em;
-    text-align: center;
-
-    i {
-      font-size: 2em;
-    }
-  }
-}
-
 .favs-repeated-users {
   margin-top: $status-margin;
 
diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
new file mode 100644
index 00000000..91b64f72
--- /dev/null
+++ b/src/components/status_popover/status_popover.js
@@ -0,0 +1,43 @@
+import { find } from 'lodash'
+
+const StatusPopover = {
+  name: 'StatusPopover',
+  props: [
+    'statusId'
+  ],
+  data () {
+    return {
+      preview: null,
+      popperOptions: {
+        modifiers: {
+          preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
+        }
+      }
+    }
+  },
+  components: {
+    Status: () => import('../status/status.vue')
+  },
+  methods: {
+    enter () {
+      const id = this.statusId
+      const statuses = this.$store.state.statuses.allStatuses
+
+      if (!this.preview) {
+        // if we have the status somewhere already
+        this.preview = find(statuses, { id })
+        // or if we have to fetch it
+        if (!this.preview) {
+          this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => {
+            this.preview = status
+            this.$nextTick(this.$refs.popper.updatePopper)
+          })
+        }
+      } else if (this.preview.id !== id) {
+        this.preview = find(statuses, 'id')
+      }
+    }
+  }
+}
+
+export default StatusPopover
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
new file mode 100644
index 00000000..b0975afb
--- /dev/null
+++ b/src/components/status_popover/status_popover.vue
@@ -0,0 +1,86 @@
+<template>
+  <v-popover
+    ref="popper"
+    popover-class="status-popover"
+    placement="top-start"
+    :popper-options="popperOptions"
+    @show="enter()"
+  >
+    <div slot="popover">
+      <Status
+        v-if="preview"
+        :is-preview="true"
+        :statusoid="preview"
+        :compact="true"
+      />
+      <div
+        v-else
+        class="status-preview-loading"
+      >
+        <i class="icon-spin4 animate-spin" />
+      </div>
+    </div>
+
+    <slot />
+  </v-popover>
+</template>
+
+<script src="./status_popover.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.tooltip.popover.status-popover {
+  font-size: 1rem;
+  min-width: 15em;
+  max-width: 95%;
+  margin-left: 0.5em;
+
+  .popover-inner {
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    border-style: solid;
+    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);
+  }
+
+  .popover-arrow::before {
+    position: absolute;
+    content: '';
+    left: -7px;
+    border: solid 7px transparent;
+    z-index: -1;
+  }
+
+  &[x-placement^="bottom-start"] .popover-arrow::before {
+    top: -2px;
+    border-top-width: 0;
+    border-bottom-color: $fallback--border;
+    border-bottom-color: var(--border, $fallback--border);
+  }
+
+  &[x-placement^="top-start"] .popover-arrow::before {
+    bottom: -2px;
+    border-bottom-width: 0;
+    border-top-color: $fallback--border;
+    border-top-color: var(--border, $fallback--border);
+  }
+
+  .status-el.status-el {
+    border: none;
+  }
+
+  .status-preview-loading {
+    padding: 1em;
+    text-align: center;
+
+    i {
+      font-size: 2em;
+    }
+  }
+}
+
+</style>

From e00cf288f54936fc563d2baebf2a694cc3619f61 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 22:14:53 -0400
Subject: [PATCH 20/25] refactor status loading logic

---
 .../status_popover/status_popover.js          | 24 +++++++------------
 .../status_popover/status_popover.vue         |  4 ++--
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
index 91b64f72..b96ae642 100644
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@@ -7,7 +7,6 @@ const StatusPopover = {
   ],
   data () {
     return {
-      preview: null,
       popperOptions: {
         modifiers: {
           preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
@@ -15,26 +14,21 @@ const StatusPopover = {
       }
     }
   },
+  computed: {
+    status () {
+      return find(this.$store.state.statuses.allStatuses, { id: this.statusId })
+    }
+  },
   components: {
     Status: () => import('../status/status.vue')
   },
   methods: {
     enter () {
-      const id = this.statusId
-      const statuses = this.$store.state.statuses.allStatuses
-
-      if (!this.preview) {
-        // if we have the status somewhere already
-        this.preview = find(statuses, { id })
-        // or if we have to fetch it
-        if (!this.preview) {
-          this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => {
-            this.preview = status
-            this.$nextTick(this.$refs.popper.updatePopper)
+      if (!this.status) {
+        this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
+          .then((status) => {
+            this.$store.dispatch('addNewStatuses', { statuses: [status] })
           })
-        }
-      } else if (this.preview.id !== id) {
-        this.preview = find(statuses, 'id')
       }
     }
   }
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index b0975afb..62afadca 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -8,9 +8,9 @@
   >
     <div slot="popover">
       <Status
-        v-if="preview"
+        v-if="status"
         :is-preview="true"
-        :statusoid="preview"
+        :statusoid="status"
         :compact="true"
       />
       <div

From f969e9ab3d08f0b8cf6b5201094243feff6fc3d0 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 22:21:33 -0400
Subject: [PATCH 21/25] add fetchStatus action

---
 src/components/status_popover/status_popover.js | 5 +----
 src/modules/statuses.js                         | 4 ++++
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
index b96ae642..19f16bd9 100644
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@@ -25,10 +25,7 @@ const StatusPopover = {
   methods: {
     enter () {
       if (!this.status) {
-        this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
-          .then((status) => {
-            this.$store.dispatch('addNewStatuses', { statuses: [status] })
-          })
+        this.$store.dispatch('fetchStatus', this.statusId)
       }
     }
   }
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 918065d2..f11ffdcd 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -537,6 +537,10 @@ const statuses = {
     setNotificationsSilence ({ rootState, commit }, { value }) {
       commit('setNotificationsSilence', { value })
     },
+    fetchStatus ({ rootState, dispatch }, id) {
+      rootState.api.backendInteractor.fetchStatus({ id })
+        .then((status) => dispatch('addNewStatuses', { statuses: [status] }))
+    },
     deleteStatus ({ rootState, commit }, status) {
       commit('setDeleted', { status })
       apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })

From 644343ccdad905cff4a632f7154457ab7a158cb8 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 22:27:23 -0400
Subject: [PATCH 22/25] do not make too many nested div

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

diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 62afadca..f570ea7a 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -6,7 +6,7 @@
     :popper-options="popperOptions"
     @show="enter()"
   >
-    <div slot="popover">
+    <template slot="popover">
       <Status
         v-if="status"
         :is-preview="true"
@@ -19,7 +19,7 @@
       >
         <i class="icon-spin4 animate-spin" />
       </div>
-    </div>
+    </template>
 
     <slot />
   </v-popover>

From c5e391b6064ec52fe4731d9a10a8999652453c8b Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 22:41:15 -0400
Subject: [PATCH 23/25] refactor conditions

---
 src/components/status/status.vue | 31 +++++++++++++------------------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index e91dfd28..77886912 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -205,27 +205,22 @@
                 </span>
               </div>
               <div
-                v-if="inConversation && !isPreview"
+                v-if="inConversation && !isPreview && replies && replies.length"
                 class="replies"
               >
+                <span class="faint">{{ $t('status.replies_list') }}</span>
                 <span
-                  v-if="replies && replies.length"
-                  class="faint"
-                >{{ $t('status.replies_list') }}</span>
-                <template v-if="replies">
-                  <span
-                    v-for="reply in replies"
-                    :key="reply.id"
-                    class="reply-link faint"
-                  >
-                    <a
-                      href="#"
-                      @click.prevent="gotoOriginal(reply.id)"
-                      @mouseenter="replyEnter(reply.id, $event)"
-                      @mouseout="replyLeave()"
-                    >{{ reply.name }}</a>
-                  </span>
-                </template>
+                  v-for="reply in replies"
+                  :key="reply.id"
+                  class="reply-link faint"
+                >
+                  <a
+                    href="#"
+                    @click.prevent="gotoOriginal(reply.id)"
+                    @mouseenter="replyEnter(reply.id, $event)"
+                    @mouseout="replyLeave()"
+                  >{{ reply.name }}</a>
+                </span>
               </div>
             </div>
           </div>

From fbd1922567a873efb097109bbd5e54736eed8a4d Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 22:55:02 -0400
Subject: [PATCH 24/25] show preview popover when hover numbered replies

---
 src/components/status/status.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 77886912..65778b2e 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -209,18 +209,17 @@
                 class="replies"
               >
                 <span class="faint">{{ $t('status.replies_list') }}</span>
-                <span
+                <StatusPopover
                   v-for="reply in replies"
                   :key="reply.id"
-                  class="reply-link faint"
+                  :status-id="reply.id"
                 >
                   <a
                     href="#"
+                    class="reply-link"
                     @click.prevent="gotoOriginal(reply.id)"
-                    @mouseenter="replyEnter(reply.id, $event)"
-                    @mouseout="replyLeave()"
                   >{{ reply.name }}</a>
-                </span>
+                </StatusPopover>
               </div>
             </div>
           </div>

From 237d95b0f73d9d20df0b8c4668110ce09a5527de Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 23:50:50 -0400
Subject: [PATCH 25/25] remove needless ref

---
 src/components/status_popover/status_popover.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index f570ea7a..eacf4c06 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -1,6 +1,5 @@
 <template>
   <v-popover
-    ref="popper"
     popover-class="status-popover"
     placement="top-start"
     :popper-options="popperOptions"