From b6e8c12dbcd7d9f4cf50e10bfd3c85fe691c2640 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 25 Apr 2021 14:51:00 +0300
Subject: emoji picker fix

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

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 2716d93f..6b589079 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,3 +1,4 @@
+import { defineAsyncComponent } from 'vue'
 import Checkbox from '../checkbox/checkbox.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -57,7 +58,7 @@ const EmojiPicker = {
     }
   },
   components: {
-    StickerPicker: () => import('../sticker_picker/sticker_picker.vue'),
+    StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
     Checkbox
   },
   methods: {
@@ -79,7 +80,7 @@ const EmojiPicker = {
     },
     highlight (key) {
       const ref = this.$refs['group-' + key]
-      const top = ref[0].offsetTop
+      const top = ref.offsetTop
       this.setShowStickers(false)
       this.activeGroup = key
       this.$nextTick(() => {
@@ -96,7 +97,7 @@ const EmojiPicker = {
       }
     },
     triggerLoadMore (target) {
-      const ref = this.$refs['group-end-custom'][0]
+      const ref = this.$refs['group-end-custom']
       if (!ref) return
       const bottom = ref.offsetTop + ref.offsetHeight
 
@@ -119,7 +120,7 @@ const EmojiPicker = {
       this.$nextTick(() => {
         this.emojisView.forEach(group => {
           const ref = this.$refs['group-' + group.id]
-          if (ref[0].offsetTop <= top) {
+          if (ref.offsetTop <= top) {
             this.activeGroup = group.id
           }
         })
-- 
cgit v1.2.3-70-g09d2


From 666498e7b76144b35d245d4b1c09e1dc62fac84b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 21:54:02 +0300
Subject: fix main post form having hidden emoji picker

---
 src/App.scss                                         | 12 ++++++------
 src/components/attachment/attachment.scss            |  2 +-
 src/components/desktop_nav/desktop_nav.scss          |  8 ++++----
 src/components/emoji_picker/emoji_picker.scss        |  2 +-
 src/components/media_modal/media_modal.vue           |  2 +-
 src/components/post_status_form/post_status_form.vue |  1 +
 src/components/user_panel/user_panel.vue             |  1 +
 src/hocs/with_load_more/with_load_more.scss          |  2 +-
 src/hocs/with_subscription/with_subscription.scss    |  2 +-
 9 files changed, 17 insertions(+), 15 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/App.scss b/src/App.scss
index d8396562..cc8ef592 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -2,7 +2,7 @@
 @import './_variables.scss';
 
 :root {
-  --navbar-height: 50px;
+  --navbar-height: 3.5em;
 }
 
 html {
@@ -159,8 +159,8 @@ nav {
 }
 
 .app-layout {
-  --miniColumn: 25em;
-  --maxiColumn: minmax(var(--miniColumn), 45em);
+  --miniColumn: 25rem;
+  --maxiColumn: minmax(var(--miniColumn), 45rem);
   --columnGap: 1em;
   --status-margin: 0.75em;
 
@@ -227,7 +227,7 @@ nav {
 
   &.-has-new-post-button {
     .column {
-      padding-bottom: 20em;
+      padding-bottom: 10rem;
     }
   }
 
@@ -301,7 +301,7 @@ nav {
   cursor: pointer;
   box-shadow: $fallback--buttonShadow;
   box-shadow: var(--buttonShadow);
-  font-size: 14px;
+  font-size: 1rem;
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
 
@@ -429,7 +429,7 @@ textarea,
   color: var(--inputText, $fallback--lightText);
   font-family: sans-serif;
   font-family: var(--inputFont, sans-serif);
-  font-size: 14px;
+  font-size: 1rem;
   margin: 0;
   box-sizing: border-box;
   display: inline-block;
diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index dfda15bf..b2dea98d 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -173,7 +173,7 @@
       margin: 8px;
       word-break: break-all;
       h1 {
-        font-size: 14px;
+        font-size: 1rem;
         margin: 0px;
       }
     }
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 1e731c70..3c2e70b5 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -9,7 +9,7 @@
 
   .inner-nav {
     display: grid;
-    grid-template-rows: 50px;
+    grid-template-rows: var(--navbar-height);
     grid-template-columns: 2fr auto 2fr;
     grid-template-areas: "sitename logo actions";
     box-sizing: border-box;
@@ -75,7 +75,7 @@
 
     img {
       display: inline-block;
-      height: 50px;
+      height: var(--navbar-height);
     }
   }
 
@@ -101,8 +101,8 @@
 
   .item {
     flex: 1;
-    line-height: 50px;
-    height: 50px;
+    line-height: var(--navbar-height);
+    height: var(--navbar-height);
     overflow: hidden;
     display: flex;
     flex-wrap: wrap;
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index ec711758..1a696584 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -7,7 +7,7 @@
   right: 0;
   left: 0;
   margin: 0 !important;
-  z-index: 1;
+  z-index: 100;
   background-color: $fallback--bg;
   background-color: var(--popover, $fallback--bg);
   color: $fallback--link;
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index c7dcd007..8b76aafb 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -234,7 +234,7 @@ $modal-view-button-icon-margin: 0.5em;
       position: absolute;
       height: $modal-view-button-icon-height;
       width: $modal-view-button-icon-width;
-      font-size: 14px;
+      font-size: 1rem;
       line-height: $modal-view-button-icon-height;
       color: #FFF;
       text-align: center;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 0fdb6dc7..d6595354 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -509,6 +509,7 @@
     flex-direction: column;
     padding: 0.25em 0.5em 0.5em;
     line-height:24px;
+    z-index: 50;
   }
 
   form textarea.form-cw {
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 50949b98..243de387 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -24,5 +24,6 @@
 <style lang="scss">
 .user-panel .signed-in {
   overflow: visible;
+  z-index: 10;
 }
 </style>
diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss
index 1a26eb8d..de86ed4a 100644
--- a/src/hocs/with_load_more/with_load_more.scss
+++ b/src/hocs/with_load_more/with_load_more.scss
@@ -10,7 +10,7 @@
     border-top-color: var(--border, $fallback--border);
 
     .error {
-      font-size: 14px;
+      font-size: 1rem;
     }
 
     a {
diff --git a/src/hocs/with_subscription/with_subscription.scss b/src/hocs/with_subscription/with_subscription.scss
index 52c7d94c..7fd83802 100644
--- a/src/hocs/with_subscription/with_subscription.scss
+++ b/src/hocs/with_subscription/with_subscription.scss
@@ -4,7 +4,7 @@
     text-align: center;
 
     .error {
-      font-size: 14px;
+      font-size: 1rem;
     }
   }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 7f513fe46fbf631190445b21b7cb4b7cb431d019 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 23:44:33 +0300
Subject: more em-sized fonts

---
 src/components/emoji_input/emoji_input.vue             | 2 +-
 src/components/emoji_picker/emoji_picker.scss          | 6 ++++--
 src/components/link-preview/link-preview.vue           | 2 +-
 src/components/notifications/notifications.scss        | 8 ++++----
 src/components/registration/registration.vue           | 2 +-
 src/components/status/status.scss                      | 9 ++++-----
 src/components/still-image/still-image.vue             | 8 ++++----
 src/components/user_card/user_card.scss                | 5 ++---
 src/components/user_list_popover/user_list_popover.vue | 2 +-
 9 files changed, 22 insertions(+), 22 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index aa2950ce..7d95ab7e 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -78,7 +78,7 @@
     top: 0;
     right: 0;
     margin: .2em .25em;
-    font-size: 16px;
+    font-size: 1.3em;
     cursor: pointer;
     line-height: 24px;
 
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 1a696584..2055e02e 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -73,12 +73,13 @@
     &-item {
       padding: 0 7px;
       cursor: pointer;
-      font-size: 24px;
+      font-size: 1.85em;
 
       &.disabled {
         opacity: 0.5;
         pointer-events: none;
       }
+
       &.active {
         border-bottom: 4px solid;
 
@@ -151,9 +152,10 @@
       justify-content: left;
 
       &-title {
-        font-size: 12px;
+        font-size: 0.85em;
         width: 100%;
         margin: 0;
+
         &.disabled {
           display: none;
         }
diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
index d3ca39b8..220527f2 100644
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@@ -63,7 +63,7 @@
   }
 
   .card-host {
-    font-size: 12px;
+    font-size: 0.85em;
   }
 
   .card-description {
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index a285027d..aa4ae346 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -113,13 +113,13 @@
   }
 
   .emoji-reaction-emoji {
-    font-size: 16px;
+    font-size: 1.3em;
   }
 
   .notification-details {
-    min-width: 0px;
+    min-width: 0;
     word-wrap: break-word;
-    line-height:18px;
+    line-height: 1.4;
     position: relative;
     overflow: hidden;
     width: 100%;
@@ -142,7 +142,7 @@
     }
 
     .timeago {
-      margin-right: .2em;
+      margin-right: 0.2em;
     }
 
     .status-content {
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 1c83a47e..c3fee6f8 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -318,7 +318,7 @@ $validations-cRed: #f04124;
     text-align: left;
 
     span {
-      font-size: 12px;
+      font-size: 0.85em;
     }
   }
 
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index e38e2a53..36a2cca1 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -82,7 +82,6 @@
 
   .status-username {
     white-space: nowrap;
-    font-size: 14px;
     overflow: hidden;
     max-width: 85%;
     font-weight: bold;
@@ -160,7 +159,7 @@
   & .heading-reply-row {
     position: relative;
     align-content: baseline;
-    font-size: 12px;
+    font-size: 0.85em;
     margin-top: 0.2em;
     line-height: 130%;
     max-width: 100%;
@@ -229,7 +228,7 @@
   .replies {
     margin-top: 0.25em;
     line-height: 18px;
-    font-size: 12px;
+    font-size: 0.85em;
     display: flex;
     flex-wrap: wrap;
 
@@ -389,14 +388,14 @@
 
     .stat-title {
       color: var(--faint, $fallback--faint);
-      font-size: 12px;
+      font-size: 0.85em;
       text-transform: uppercase;
       position: relative;
     }
 
     .stat-number {
       font-weight: bolder;
-      font-size: 16px;
+      font-size: 1.1em;
       line-height: 1em;
     }
 
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index e939b532..ab3080c8 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -58,10 +58,10 @@
       zoom: var(--_still_image-label-scale, 1);
       content: 'gif';
       position: absolute;
-      line-height: 10px;
-      font-size: 10px;
-      top: 5px;
-      left: 5px;
+      line-height: 1;
+      font-size: 0.7em;
+      top: 0.5em;
+      left: 0.5em;
       background: rgba(127, 127, 127, 0.5);
       color: #fff;
       display: block;
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 4dabafa2..44657bdf 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -189,12 +189,12 @@
     overflow: hidden;
     flex: 1 1 auto;
     margin-right: 1em;
-    font-size: 15px;
+    font-size: 1.1em;
   }
 
   .bottom-line {
     font-weight: light;
-    font-size: 15px;
+    font-size: 1.1em;
     align-items: baseline;
 
     .lock-icon {
@@ -232,7 +232,6 @@
     margin-bottom: .15em;
     display: flex;
     align-items: baseline;
-    font-size: 14px;
     line-height: 22px;
     flex-wrap: wrap;
 
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index 8706d0ff..bdc3aa92 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -73,7 +73,7 @@
     }
 
     .user-list-screen-name {
-      font-size: 9px;
+      font-size: 0.65em;
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 9c8738ff22a0563b16b19e57e8042c65c4a0b7e2 Mon Sep 17 00:00:00 2001
From: Lain Soykaf <lain@lain.com>
Date: Sun, 12 Jun 2022 13:38:12 +0200
Subject: EmojiPicker: Workaround to search immediately on mobile

See https://github.com/vuejs/vue/pull/9814
---
 src/components/emoji_picker/emoji_picker.js  | 5 +++--
 src/components/emoji_picker/emoji_picker.vue | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 6b589079..bd5c2e39 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -6,6 +6,7 @@ import {
   faStickyNote,
   faSmileBeam
 } from '@fortawesome/free-solid-svg-icons'
+import { trim } from 'lodash'
 
 library.add(
   faBoxOpen,
@@ -176,7 +177,7 @@ const EmojiPicker = {
     filteredEmoji () {
       return filterByKeyword(
         this.$store.state.instance.customEmoji || [],
-        this.keyword
+        trim(this.keyword)
       )
     },
     customEmojiBuffer () {
@@ -197,7 +198,7 @@ const EmojiPicker = {
           id: 'standard',
           text: this.$t('emoji.unicode'),
           icon: 'box-open',
-          emojis: filterByKeyword(standardEmojis, this.keyword)
+          emojis: filterByKeyword(standardEmojis, trim(this.keyword))
         }
       ]
     },
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 3262a3d9..a7269120 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -47,6 +47,7 @@
             type="text"
             class="form-control"
             :placeholder="$t('emoji.search_emoji')"
+            @input="$event.target.composing = false"
           >
         </div>
         <div
-- 
cgit v1.2.3-70-g09d2


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: 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 ++-
 src/components/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(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/App.scss b/src/App.scss
index 79c07683..78835c61 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 f655c38f..894a68e1 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 0ca9802e..e9a47632 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 2055e02e..a2f17c51 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 ddc45b81..09904761 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 b93d3d84..d59055b3 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 d2d48a03..c58d9e7c 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 9394efff..52d8d27e 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 fb2579a5..63d827d8 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 cff9b174..5dfcf810 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 0d37328e..f854515c 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 1eca88a7..688c2d61 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 dd88de7d..aefd3915 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%;
-- 
cgit v1.2.3-70-g09d2


From fddb531ed20b31c44e6911418e7bbb884836c40a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 31 Jul 2022 12:35:48 +0300
Subject: --fix

---
 src/App.vue                                        | 20 ++++--
 src/boot/after_store.js                            |  4 +-
 src/boot/routes.js                                 |  9 ++-
 src/components/about/about.vue                     |  2 +-
 src/components/account_actions/account_actions.vue |  4 +-
 src/components/avatar_list/avatar_list.vue         |  2 +-
 src/components/basic_user_card/basic_user_card.vue | 11 ++--
 src/components/chat/chat.js                        |  2 +-
 src/components/chat_list/chat_list.vue             |  2 +-
 src/components/chat_message/chat_message.vue       | 10 +--
 src/components/chat_title/chat_title.vue           |  4 +-
 src/components/checkbox/checkbox.vue               |  4 +-
 src/components/color_input/color_input.vue         |  2 +-
 src/components/conversation/conversation.js        |  2 +-
 src/components/conversation/conversation.vue       |  2 +-
 src/components/desktop_nav/desktop_nav.js          | 24 +++++---
 .../domain_mute_card/domain_mute_card.vue          |  4 +-
 src/components/emoji_input/emoji_input.js          |  2 +-
 src/components/emoji_picker/emoji_picker.js        |  2 +-
 src/components/emoji_reactions/emoji_reactions.vue |  2 +-
 src/components/extra_buttons/extra_buttons.js      |  2 +-
 src/components/extra_buttons/extra_buttons.vue     |  6 +-
 src/components/favorite_button/favorite_button.vue |  2 +-
 src/components/features_panel/features_panel.vue   |  2 +-
 src/components/flash/flash.js                      |  2 +-
 src/components/font_control/font_control.vue       |  2 +-
 src/components/hashtag_link/hashtag_link.vue       |  4 +-
 src/components/image_cropper/image_cropper.js      |  2 +-
 .../instance_specific_panel.vue                    |  2 +-
 src/components/interactions/interactions.js        |  2 +-
 .../interface_language_switcher.vue                |  1 +
 src/components/login_form/login_form.js            |  2 +-
 src/components/login_form/login_form.vue           |  2 +-
 src/components/media_upload/media_upload.js        |  5 +-
 src/components/media_upload/media_upload.vue       |  2 +-
 src/components/mention_link/mention_link.vue       | 17 ++---
 src/components/mentions_line/mentions_line.vue     | 14 ++---
 src/components/mfa_form/recovery_form.vue          |  2 +-
 src/components/mobile_nav/mobile_nav.vue           |  5 +-
 src/components/modal/modal.vue                     |  8 +--
 .../moderation_tools/moderation_tools.vue          |  8 +--
 .../mrf_transparency_panel.js                      |  6 +-
 src/components/nav_panel/nav_panel.vue             |  2 +-
 src/components/notification/notification.js        |  2 +-
 src/components/notification/notification.vue       |  4 +-
 .../notifications/notification_filters.vue         |  4 +-
 src/components/notifications/notifications.vue     |  5 +-
 src/components/popover/popover.js                  | 34 +++++-----
 .../post_status_form/post_status_form.js           | 16 ++---
 src/components/react_button/react_button.js        |  2 +-
 src/components/react_button/react_button.vue       |  8 +--
 src/components/remote_follow/remote_follow.js      |  2 +-
 src/components/retweet_button/retweet_button.vue   |  2 +-
 src/components/search_bar/search_bar.js            |  2 +-
 src/components/selectable_list/selectable_list.vue |  4 +-
 .../settings_modal/helpers/modified_indicator.vue  |  4 +-
 .../helpers/server_side_indicator.vue              |  4 +-
 src/components/settings_modal/settings_modal.vue   |  4 +-
 src/components/settings_modal/tabs/general_tab.vue | 10 ++-
 .../settings_modal/tabs/mutes_and_blocks_tab.vue   | 34 +++++-----
 src/components/settings_modal/tabs/profile_tab.js  | 10 +--
 src/components/settings_modal/tabs/profile_tab.vue |  2 +-
 .../settings_modal/tabs/security_tab/mfa.js        |  6 +-
 .../settings_modal/tabs/security_tab/mfa_totp.js   |  2 +-
 .../tabs/security_tab/security_tab.js              |  2 +-
 .../settings_modal/tabs/theme_tab/preview.vue      |  5 +-
 .../settings_modal/tabs/theme_tab/theme_tab.js     |  8 +--
 src/components/shadow_control/shadow_control.js    |  8 ++-
 src/components/shadow_control/shadow_control.vue   |  2 +-
 src/components/shout_panel/shout_panel.js          |  2 +-
 src/components/side_drawer/side_drawer.js          |  2 +-
 src/components/side_drawer/side_drawer.vue         |  2 +-
 src/components/staff_panel/staff_panel.js          |  4 +-
 src/components/staff_panel/staff_panel.vue         |  2 +-
 src/components/status/status.js                    |  6 +-
 src/components/status/status.vue                   | 11 ++--
 src/components/status_body/status_body.vue         |  2 +-
 src/components/status_content/status_content.vue   |  2 +-
 src/components/status_popover/status_popover.vue   |  8 +--
 src/components/sticker_picker/sticker_picker.js    |  4 +-
 .../terms_of_service_panel.vue                     |  2 +-
 src/components/timeline/timeline.vue               |  5 +-
 .../timeline/timeline_quick_settings.vue           |  4 +-
 src/components/timeline_menu/timeline_menu.js      |  6 +-
 src/components/timeline_menu/timeline_menu.vue     |  6 +-
 .../timeline_menu/timeline_menu_content.vue        |  2 +-
 src/components/user_card/user_card.js              |  2 +-
 src/components/user_card/user_card.vue             |  2 +-
 .../user_list_popover/user_list_popover.vue        |  6 +-
 src/components/user_popover/user_popover.vue       | 42 ++++++-------
 src/components/user_profile/user_profile.vue       | 15 +++--
 .../user_reporting_modal/user_reporting_modal.vue  |  2 +-
 src/components/who_to_follow/who_to_follow.js      |  2 +-
 .../who_to_follow_panel/who_to_follow_panel.js     | 10 +--
 .../who_to_follow_panel/who_to_follow_panel.vue    |  2 +-
 src/i18n/messages.js                               |  2 +-
 src/lib/notification-i18n-loader.js                |  4 +-
 src/lib/persisted_state.js                         | 12 ++--
 src/modules/api.js                                 |  4 +-
 src/modules/config.js                              |  2 +-
 src/modules/errors.js                              |  4 +-
 src/modules/serverSideConfig.js                    | 28 ++++-----
 src/modules/statuses.js                            | 20 +++---
 src/modules/users.js                               | 24 ++++----
 src/services/api/api.service.js                    | 72 +++++++++++-----------
 src/services/chat_service/chat_service.js          | 12 ++--
 src/services/chat_utils/chat_utils.js              |  2 +-
 src/services/color_convert/color_convert.js        | 12 ++--
 src/services/completion/completion.js              |  2 +-
 src/services/date_utils/date_utils.js              |  2 +-
 .../entity_normalizer/entity_normalizer.service.js |  4 +-
 src/services/file_size_format/file_size_format.js  |  8 +--
 .../html_converter/html_line_converter.service.js  |  4 +-
 src/services/html_converter/utility.service.js     |  2 +-
 src/services/locale/locale.service.js              | 14 ++---
 src/services/new_api/password_reset.js             |  2 +-
 .../notifications_fetcher.service.js               | 12 ++--
 src/services/push/push.js                          |  4 +-
 src/services/theme_data/theme_data.service.js      |  2 +-
 .../timeline_fetcher/timeline_fetcher.service.js   | 16 ++---
 src/services/user_highlighter/user_highlighter.js  |  2 +-
 src/sw.js                                          |  4 +-
 test/e2e/custom-assertions/elementCount.js         |  2 +-
 test/e2e/nightwatch.conf.js                        | 54 ++++++++--------
 test/e2e/runner.js                                 |  8 +--
 test/unit/karma.conf.js                            | 14 ++---
 test/unit/specs/components/emoji_input.spec.js     |  2 +-
 test/unit/specs/components/rich_content.spec.js    |  2 +-
 test/unit/specs/components/user_profile.spec.js    |  6 +-
 test/unit/specs/modules/statuses.spec.js           |  4 +-
 .../services/chat_service/chat_service.spec.js     | 24 ++++----
 .../entity_normalizer/entity_normalizer.spec.js    |  8 +--
 .../file_size_format/file_size_format.spec.js      |  4 +-
 133 files changed, 508 insertions(+), 449 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/App.vue b/src/App.vue
index 7d4a8e1e..0efadaf0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,8 +15,12 @@
       class="app-layout container"
       :class="classes"
     >
-      <div class="underlay"/>
-      <div id="sidebar" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }">
+      <div class="underlay" />
+      <div
+        id="sidebar"
+        class="column -scrollable"
+        :class="{ '-show-scrollbar': showScrollbars }"
+      >
         <user-panel />
         <template v-if="layoutType !== 'mobile'">
           <nav-panel />
@@ -26,7 +30,11 @@
           <div id="notifs-sidebar" />
         </template>
       </div>
-      <div id="main-scroller" class="column main" :class="{ '-full-height': isChats }">
+      <div
+        id="main-scroller"
+        class="column main"
+        :class="{ '-full-height': isChats }"
+      >
         <div
           v-if="!currentUser"
           class="login-hint panel panel-default"
@@ -40,7 +48,11 @@
         </div>
         <router-view />
       </div>
-      <div id="notifs-column" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"/>
+      <div
+        id="notifs-column"
+        class="column -scrollable"
+        :class="{ '-show-scrollbar': showScrollbars }"
+      />
     </div>
     <MediaModal />
     <shout-panel
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 894a68e1..23b68e83 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -156,7 +156,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
   copyInstanceOption('hideSitename')
   copyInstanceOption('sidebarRight')
 
-  return store.dispatch('setTheme', config['theme'])
+  return store.dispatch('setTheme', config.theme)
 }
 
 const getTOS = async ({ store }) => {
@@ -197,7 +197,7 @@ const getStickers = async ({ store }) => {
       const stickers = (await Promise.all(
         Object.entries(values).map(async ([name, path]) => {
           const resPack = await window.fetch(path + 'pack.json')
-          var meta = {}
+          let meta = {}
           if (resPack.ok) {
             meta = await resPack.json()
           }
diff --git a/src/boot/routes.js b/src/boot/routes.js
index 726476a8..c8194d5f 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -31,7 +31,8 @@ export default (store) => {
   }
 
   let routes = [
-    { name: 'root',
+    {
+      name: 'root',
       path: '/',
       redirect: _to => {
         return (store.state.users.currentUser
@@ -45,12 +46,14 @@ export default (store) => {
     { name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
     { name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
     { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
-    { name: 'remote-user-profile-acct',
+    {
+      name: 'remote-user-profile-acct',
       path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',
       component: RemoteUserResolver,
       beforeEnter: validateAuthenticatedRoute
     },
-    { name: 'remote-user-profile',
+    {
+      name: 'remote-user-profile',
       path: '/remote-users/:hostname/:username',
       component: RemoteUserResolver,
       beforeEnter: validateAuthenticatedRoute
diff --git a/src/components/about/about.vue b/src/components/about/about.vue
index 5d5d6479..33586c97 100644
--- a/src/components/about/about.vue
+++ b/src/components/about/about.vue
@@ -8,7 +8,7 @@
   </div>
 </template>
 
-<script src="./about.js" ></script>
+<script src="./about.js"></script>
 
 <style lang="scss">
 </style>
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index c35d01af..23547f2c 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -6,7 +6,7 @@
       :bound-to="{ x: 'container' }"
       remove-padding
     >
-      <template v-slot:content>
+      <template #content>
         <div class="dropdown-menu">
           <template v-if="relationship.following">
             <button
@@ -57,7 +57,7 @@
           </button>
         </div>
       </template>
-      <template v-slot:trigger>
+      <template #trigger>
         <button class="button-unstyled ellipsis-button">
           <FAIcon
             class="icon"
diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index e1b6e971..9a6ca3f6 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -14,7 +14,7 @@
   </div>
 </template>
 
-<script src="./avatar_list.js" ></script>
+<script src="./avatar_list.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index effd9268..9cca7840 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -1,10 +1,13 @@
 <template>
   <div class="basic-user-card">
-    <router-link @click.prevent :to="userProfileLink(user)">
+    <router-link
+      :to="userProfileLink(user)"
+      @click.prevent
+    >
       <UserPopover
-        :userId="user.id"
-        :overlayCenters="true"
-        overlayCentersSelector=".avatar"
+        :user-id="user.id"
+        :overlay-centers="true"
+        overlay-centers-selector=".avatar"
       >
         <UserAvatar
           class="user-avatar avatar"
diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 9f6e64e3..5a5c37b6 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -107,7 +107,7 @@ const Chat = {
         }
       })
     },
-    '$route': function () {
+    $route: function () {
       this.startFetching()
     },
     mastoUserSocketStatus (newValue) {
diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue
index 58e8d0b3..1248c4c8 100644
--- a/src/components/chat_list/chat_list.vue
+++ b/src/components/chat_list/chat_list.vue
@@ -23,7 +23,7 @@
         class="timeline"
       >
         <List :items="sortedChatList">
-          <template v-slot:item="{item}">
+          <template #item="{item}">
             <ChatListItem
               :key="item.id"
               :compact="false"
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 9b823f7d..d635c47e 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -16,7 +16,7 @@
       >
         <UserPopover
           v-if="chatViewItem.isHead"
-          :userId="author.id"
+          :user-id="author.id"
         >
           <UserAvatar
             :compact="true"
@@ -50,7 +50,7 @@
                 @show="menuOpened = true"
                 @close="menuOpened = false"
               >
-                <template v-slot:content>
+                <template #content>
                   <div class="dropdown-menu">
                     <button
                       class="button-default dropdown-item dropdown-item-icon"
@@ -60,7 +60,7 @@
                     </button>
                   </div>
                 </template>
-                <template v-slot:trigger>
+                <template #trigger>
                   <button
                     class="button-default menu-icon"
                     :title="$t('chats.more')"
@@ -75,7 +75,7 @@
               :status="messageForStatusContent"
               :full-content="true"
             >
-              <template v-slot:footer>
+              <template #footer>
                 <span
                   class="created-at"
                 >
@@ -96,7 +96,7 @@
   </div>
 </template>
 
-<script src="./chat_message.js" ></script>
+<script src="./chat_message.js"></script>
 <style lang="scss">
 @import './chat_message.scss';
 
diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
index 22d0e7c4..ab7491fa 100644
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@@ -4,9 +4,9 @@
     :title="title"
   >
     <UserPopover
-      class="avatar-container"
       v-if="withAvatar && user"
-      :userId="user.id"
+      class="avatar-container"
+      :user-id="user.id"
     >
       <UserAvatar
         class="titlebar-avatar"
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 83695912..b6768d67 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -22,12 +22,12 @@
 
 <script>
 export default {
-  emits: ['update:modelValue'],
   props: [
     'modelValue',
     'indeterminate',
     'disabled'
-  ]
+  ],
+  emits: ['update:modelValue']
 }
 </script>
 
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index e84603c3..dfc084f9 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -46,7 +46,6 @@
     </div>
   </div>
 </template>
-<style lang="scss" src="./color_input.scss"></style>
 <script>
 import Checkbox from '../checkbox/checkbox.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
@@ -108,6 +107,7 @@ export default {
   }
 }
 </script>
+<style lang="scss" src="./color_input.scss"></style>
 
 <style lang="scss">
 .color-control {
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 2ef2977a..3b540cac 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -271,7 +271,7 @@ const conversation = {
           result[irid] = result[irid] || []
           result[irid].push({
             name: `#${i}`,
-            id: id
+            id
           })
         }
         i++
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 6088e1ca..1adbe250 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -31,8 +31,8 @@
             keypath="status.show_all_conversation_with_icon"
             tag="button"
             class="button-unstyled -link"
-            @click.prevent="diveToTopLevel"
             scope="global"
+            @click.prevent="diveToTopLevel"
           >
             <template #icon>
               <FAIcon
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
index e048f53d..08c0e44e 100644
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -46,23 +46,27 @@ export default {
     enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
     logoStyle () {
       return {
-        'visibility': this.enableMask ? 'hidden' : 'visible'
+        visibility: this.enableMask ? 'hidden' : 'visible'
       }
     },
     logoMaskStyle () {
-      return this.enableMask ? {
-        'mask-image': `url(${this.$store.state.instance.logo})`
-      } : {
-        'background-color': this.enableMask ? '' : 'transparent'
-      }
+      return this.enableMask
+        ? {
+            'mask-image': `url(${this.$store.state.instance.logo})`
+          }
+        : {
+            'background-color': this.enableMask ? '' : 'transparent'
+          }
     },
     logoBgStyle () {
       return Object.assign({
-        'margin': `${this.$store.state.instance.logoMargin} 0`,
+        margin: `${this.$store.state.instance.logoMargin} 0`,
         opacity: this.searchBarHidden ? 1 : 0
-      }, this.enableMask ? {} : {
-        'background-color': this.enableMask ? '' : 'transparent'
-      })
+      }, this.enableMask
+        ? {}
+        : {
+            'background-color': this.enableMask ? '' : 'transparent'
+          })
     },
     logo () { return this.$store.state.instance.logo },
     sitename () { return this.$store.state.instance.name },
diff --git a/src/components/domain_mute_card/domain_mute_card.vue b/src/components/domain_mute_card/domain_mute_card.vue
index 836688aa..28c61631 100644
--- a/src/components/domain_mute_card/domain_mute_card.vue
+++ b/src/components/domain_mute_card/domain_mute_card.vue
@@ -9,7 +9,7 @@
       class="btn button-default"
     >
       {{ $t('domain_mute_card.unmute') }}
-      <template v-slot:progress>
+      <template #progress>
         {{ $t('domain_mute_card.unmute_progress') }}
       </template>
     </ProgressButton>
@@ -19,7 +19,7 @@
       class="btn button-default"
     >
       {{ $t('domain_mute_card.mute') }}
-      <template v-slot:progress>
+      <template #progress>
         {{ $t('domain_mute_card.mute_progress') }}
       </template>
     </ProgressButton>
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 391cc5b5..5ba3907f 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -321,7 +321,7 @@ const EmojiInput = {
       }
     },
     scrollIntoView () {
-      const rootRef = this.$refs['picker'].$el
+      const rootRef = this.$refs.picker.$el
       /* Scroller is either `window` (replies in TL), sidebar (main post form,
        * replies in notifs) or mobile post form. Note that getting and setting
        * scroll is different for `Window` and `Element`s
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index bd5c2e39..f6920208 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -25,7 +25,7 @@ const filterByKeyword = (list, keyword = '') => {
   if (keyword === '') return list
 
   const keywordLowercase = keyword.toLowerCase()
-  let orderedEmojiList = []
+  const orderedEmojiList = []
   for (const emoji of list) {
     const indexOfKeyword = emoji.displayText.toLowerCase().indexOf(keywordLowercase)
     if (indexOfKeyword > -1) {
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 51d50359..4ea8b6a2 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -26,7 +26,7 @@
   </div>
 </template>
 
-<script src="./emoji_reactions.js" ></script>
+<script src="./emoji_reactions.js"></script>
 <style lang="scss">
 @import '../../_variables.scss';
 
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 2f534896..22ffb65a 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -25,7 +25,7 @@ library.add(
 )
 
 const ExtraButtons = {
-  props: [ 'status' ],
+  props: ['status'],
   components: { Popover },
   methods: {
     deleteStatus () {
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 2ea86201..2c893bf3 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -7,7 +7,7 @@
     :bound-to="{ x: 'container' }"
     remove-padding
   >
-    <template v-slot:content="{close}">
+    <template #content="{close}">
       <div class="dropdown-menu">
         <button
           v-if="canMute && !status.thread_muted"
@@ -120,7 +120,7 @@
         </button>
       </div>
     </template>
-    <template v-slot:trigger>
+    <template #trigger>
       <span class="button-unstyled popover-trigger">
         <FAIcon
           class="fa-scale-110 fa-old-padding"
@@ -131,7 +131,7 @@
   </Popover>
 </template>
 
-<script src="./extra_buttons.js" ></script>
+<script src="./extra_buttons.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index dce25e24..d5c4c61e 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -29,7 +29,7 @@
   </div>
 </template>
 
-<script src="./favorite_button.js" ></script>
+<script src="./favorite_button.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/features_panel/features_panel.vue b/src/components/features_panel/features_panel.vue
index a58a99af..4cdf56d0 100644
--- a/src/components/features_panel/features_panel.vue
+++ b/src/components/features_panel/features_panel.vue
@@ -32,7 +32,7 @@
   </div>
 </template>
 
-<script src="./features_panel.js" ></script>
+<script src="./features_panel.js"></script>
 
 <style lang="scss">
   .features-panel li {
diff --git a/src/components/flash/flash.js b/src/components/flash/flash.js
index 87f940a7..87c1d650 100644
--- a/src/components/flash/flash.js
+++ b/src/components/flash/flash.js
@@ -11,7 +11,7 @@ library.add(
 )
 
 const Flash = {
-  props: [ 'src' ],
+  props: ['src'],
   data () {
     return {
       player: false, // can be true, "hidden", false. hidden = element exists
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index f100c3a9..83c1cef7 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -47,7 +47,7 @@
   </div>
 </template>
 
-<script src="./font_control.js" ></script>
+<script src="./font_control.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/hashtag_link/hashtag_link.vue b/src/components/hashtag_link/hashtag_link.vue
index 918ed26b..596851b9 100644
--- a/src/components/hashtag_link/hashtag_link.vue
+++ b/src/components/hashtag_link/hashtag_link.vue
@@ -14,6 +14,6 @@
   </span>
 </template>
 
-<script src="./hashtag_link.js"/>
+<script src="./hashtag_link.js" />
 
-<style lang="scss" src="./hashtag_link.scss"/>
+<style lang="scss" src="./hashtag_link.scss" />
diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index 05f6fd4c..55e901a0 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -95,7 +95,7 @@ const ImageCropper = {
       const fileInput = this.$refs.input
       if (fileInput.files != null && fileInput.files[0] != null) {
         this.file = fileInput.files[0]
-        let reader = new window.FileReader()
+        const reader = new window.FileReader()
         reader.onload = (e) => {
           this.dataUrl = e.target.result
           this.$emit('open')
diff --git a/src/components/instance_specific_panel/instance_specific_panel.vue b/src/components/instance_specific_panel/instance_specific_panel.vue
index 7448ca06..c8ed0a2d 100644
--- a/src/components/instance_specific_panel/instance_specific_panel.vue
+++ b/src/components/instance_specific_panel/instance_specific_panel.vue
@@ -10,4 +10,4 @@
   </div>
 </template>
 
-<script src="./instance_specific_panel.js" ></script>
+<script src="./instance_specific_panel.js"></script>
diff --git a/src/components/interactions/interactions.js b/src/components/interactions/interactions.js
index c5ceb63d..cc6a15e1 100644
--- a/src/components/interactions/interactions.js
+++ b/src/components/interactions/interactions.js
@@ -12,7 +12,7 @@ const Interactions = {
   data () {
     return {
       allowFollowingMove: this.$store.state.users.currentUser.allow_following_move,
-      filterMode: tabModeDict['mentions']
+      filterMode: tabModeDict.mentions
     }
   },
   methods: {
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 7ad1fe2e..6997f149 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -25,6 +25,7 @@ import Select from '../select/select.vue'
 
 export default {
   components: {
+    // eslint-disable-next-line vue/no-reserved-component-names
     Select
   },
   props: {
diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js
index 638bd812..b795640e 100644
--- a/src/components/login_form/login_form.js
+++ b/src/components/login_form/login_form.js
@@ -83,7 +83,7 @@ const LoginForm = {
     },
     clearError () { this.error = false },
     focusOnPasswordInput () {
-      let passwordInput = this.$refs.passwordInput
+      const passwordInput = this.$refs.passwordInput
       passwordInput.focus()
       passwordInput.setSelectionRange(0, passwordInput.value.length)
     }
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 21482977..7a430c51 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -90,7 +90,7 @@
   </div>
 </template>
 
-<script src="./login_form.js" ></script>
+<script src="./login_form.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 669d8190..cfd42d4c 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -42,7 +42,8 @@ const mediaUpload = {
         .then((fileData) => {
           self.$emit('uploaded', fileData)
           self.decreaseUploadCount()
-        }, (error) => { // eslint-disable-line handle-callback-err
+        }, (error) => {
+          console.error('Error uploading file', error)
           self.$emit('upload-failed', 'default')
           self.decreaseUploadCount()
         })
@@ -73,7 +74,7 @@ const mediaUpload = {
     'disabled'
   ],
   watch: {
-    'dropFiles': function (fileInfos) {
+    dropFiles: function (fileInfos) {
       if (!this.uploading) {
         this.multiUpload(fileInfos)
       }
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 7cc59f5a..a538a5ed 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -26,7 +26,7 @@
   </label>
 </template>
 
-<script src="./media_upload.js" ></script>
+<script src="./media_upload.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 56da8e0f..3af502ef 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -12,7 +12,7 @@
     /><!-- eslint-enable vue/no-v-html -->
     <UserPopover
       v-else
-      :userId="user.id"
+      :user-id="user.id"
       :disabled="!shouldShowTooltip"
     >
       <span
@@ -54,16 +54,19 @@
             :class="{ '-you': shouldBoldenYou }"
           > {{ ' ' + $t('status.you') }}</span>
           <!-- eslint-enable vue/no-v-html -->
-        </a><span class="full" ref="full">
-            <!-- eslint-disable vue/no-v-html -->
-            @<span v-html="userName" /><span v-html="'@' + serverName" />
-            <!-- eslint-enable vue/no-v-html -->
+        </a><span
+          ref="full"
+          class="full"
+        >
+          <!-- eslint-disable vue/no-v-html -->
+          @<span v-html="userName" /><span v-html="'@' + serverName" />
+          <!-- eslint-enable vue/no-v-html -->
         </span>
       </span>
     </UserPopover>
   </span>
 </template>
 
-<script src="./mention_link.js"/>
+<script src="./mention_link.js" />
 
-<style lang="scss" src="./mention_link.scss"/>
+<style lang="scss" src="./mention_link.scss" />
diff --git a/src/components/mentions_line/mentions_line.vue b/src/components/mentions_line/mentions_line.vue
index 161855e8..64c19bf1 100644
--- a/src/components/mentions_line/mentions_line.vue
+++ b/src/components/mentions_line/mentions_line.vue
@@ -14,12 +14,12 @@
         v-if="expanded"
         class="fullExtraMentions"
       >{{ ' ' }}<MentionLink
-          v-for="mention in extraMentions"
-          :key="mention.index"
-          class="mention-link"
-          :content="mention.content"
-          :url="mention.url"
-        />
+        v-for="mention in extraMentions"
+        :key="mention.index"
+        class="mention-link"
+        :content="mention.content"
+        :url="mention.url"
+      />
       </span><button
         v-if="!expanded"
         class="button-unstyled showMoreLess"
@@ -36,5 +36,5 @@
     </span>
   </span>
 </template>
-<script src="./mentions_line.js" ></script>
+<script src="./mentions_line.js"></script>
 <style lang="scss" src="./mentions_line.scss" />
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index a9cf39aa..5988fa51 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@@ -69,4 +69,4 @@
     </div>
   </div>
 </template>
-<script src="./recovery_form.js" ></script>
+<script src="./recovery_form.js"></script>
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index c58d9e7c..949cf17e 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -67,11 +67,10 @@
         </a>
       </div>
       <div
-        class="mobile-notifications"
         id="mobile-notifications"
+        class="mobile-notifications"
         @scroll="onScroll"
-      >
-      </div>
+      />
     </div>
     <SideDrawer
       ref="sideDrawer"
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 52d8d27e..2187f392 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -12,6 +12,9 @@
 
 <script>
 export default {
+  provide: {
+    popoversZLayer: 'modals'
+  },
   props: {
     isOpen: {
       type: Boolean,
@@ -22,14 +25,11 @@ export default {
       default: false
     }
   },
-  provide: {
-    popoversZLayer: 'modals'
-  },
   computed: {
     classes () {
       return {
         'modal-background': !this.noBackground,
-        'open': this.isOpen
+        open: this.isOpen
       }
     }
   }
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 96b8c3a3..34fe2e7c 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -8,7 +8,7 @@
       @show="setToggled(true)"
       @close="setToggled(false)"
     >
-      <template v-slot:content>
+      <template #content>
         <div class="dropdown-menu">
           <span v-if="user.is_local">
             <button
@@ -122,7 +122,7 @@
           </span>
         </div>
       </template>
-      <template v-slot:trigger>
+      <template #trigger>
         <button
           class="btn button-default btn-block moderation-tools-button"
           :class="{ toggled }"
@@ -137,11 +137,11 @@
         v-if="showDeleteUserDialog"
         :on-cancel="deleteUserDialog.bind(this, false)"
       >
-        <template v-slot:header>
+        <template #header>
           {{ $t('user_card.admin_menu.delete_user') }}
         </template>
         <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
-        <template v-slot:footer>
+        <template #footer>
           <button
             class="btn button-default"
             @click="deleteUserDialog(false)"
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.js b/src/components/mrf_transparency_panel/mrf_transparency_panel.js
index 3fde8106..13cfb52e 100644
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.js
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.js
@@ -9,10 +9,10 @@ import { get } from 'lodash'
  */
 const toInstanceReasonObject = (instances, info, key) => {
   return instances.map(instance => {
-    if (info[key] && info[key][instance] && info[key][instance]['reason']) {
-      return { instance: instance, reason: info[key][instance]['reason'] }
+    if (info[key] && info[key][instance] && info[key][instance].reason) {
+      return { instance, reason: info[key][instance].reason }
     }
-    return { instance: instance, reason: '' }
+    return { instance, reason: '' }
   })
 }
 
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 62aab7f1..3fd27d89 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -90,7 +90,7 @@
   </div>
 </template>
 
-<script src="./nav_panel.js" ></script>
+<script src="./nav_panel.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 77cdfa73..882b68f9 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -40,7 +40,7 @@ const Notification = {
       unmuted: false
     }
   },
-  props: [ 'notification' ],
+  props: ['notification'],
   components: {
     StatusContent,
     UserAvatar,
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 6427d117..d2b903f6 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -37,8 +37,8 @@
         @click.prevent
       >
         <UserPopover
-          :userId="notification.from_profile.id"
-          :overlayCenters="true"
+          :user-id="notification.from_profile.id"
+          :overlay-centers="true"
         >
           <UserAvatar
             class="post-avatar"
diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index 00a531b3..b0213167 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@@ -5,7 +5,7 @@
     placement="bottom"
     :bound-to="{ x: 'container' }"
   >
-    <template v-slot:content>
+    <template #content>
       <div class="dropdown-menu">
         <button
           class="button-default dropdown-item"
@@ -72,7 +72,7 @@
         </button>
       </div>
     </template>
-    <template v-slot:trigger>
+    <template #trigger>
       <button class="filter-trigger-button button-unstyled">
         <FAIcon icon="filter" />
       </button>
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index b46c06aa..e778e27b 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,5 +1,8 @@
 <template>
-  <teleport :disabled="minimalMode || disableTeleport" :to="teleportTarget">
+  <teleport
+    :disabled="minimalMode || disableTeleport"
+    :to="teleportTarget"
+  >
     <div
       :class="{ minimal: minimalMode }"
       class="Notifications"
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 58f7126d..d2af59fe 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -104,21 +104,25 @@ 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: 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: parentScreenBox.top + (margin.top || 0),
-        max: parentScreenBox.bottom - (margin.bottom || 0)
-      } : {
-        min: 0 + (margin.top || 50),
-        max: window.innerHeight - (margin.bottom || 5)
-      }
+      const xBounds = this.boundTo && this.boundTo.x === 'container'
+        ? {
+            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: 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
       let vertOffset = 0
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 2febf226..c0d80b20 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -41,7 +41,7 @@ const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
   allAttentions = uniqBy(allAttentions, 'id')
   allAttentions = reject(allAttentions, { id: currentUser.id })
 
-  let mentions = map(allAttentions, (attention) => {
+  const mentions = map(allAttentions, (attention) => {
     return `@${attention.screen_name}`
   })
 
@@ -242,7 +242,7 @@ const PostStatusForm = {
     })
   },
   watch: {
-    'newStatus': {
+    newStatus: {
       deep: true,
       handler () {
         this.statusChanged()
@@ -273,7 +273,7 @@ const PostStatusForm = {
           this.$refs.textarea.focus()
         })
       }
-      let el = this.$el.querySelector('textarea')
+      const el = this.$el.querySelector('textarea')
       el.style.height = 'auto'
       el.style.height = undefined
       this.error = null
@@ -392,7 +392,7 @@ const PostStatusForm = {
       this.$emit('resize', { delayed: true })
     },
     removeMediaFile (fileInfo) {
-      let index = this.newStatus.files.indexOf(fileInfo)
+      const index = this.newStatus.files.indexOf(fileInfo)
       this.newStatus.files.splice(index, 1)
       this.$emit('resize')
     },
@@ -462,7 +462,7 @@ const PostStatusForm = {
     },
     onEmojiInputInput (e) {
       this.$nextTick(() => {
-        this.resize(this.$refs['textarea'])
+        this.resize(this.$refs.textarea)
       })
     },
     resize (e) {
@@ -477,8 +477,8 @@ const PostStatusForm = {
         return
       }
 
-      const formRef = this.$refs['form']
-      const bottomRef = this.$refs['bottom']
+      const formRef = this.$refs.form
+      const bottomRef = this.$refs.bottom
       /* Scroller is either `window` (replies in TL), sidebar (main post form,
        * replies in notifs) or mobile post form. Note that getting and setting
        * scroll is different for `Window` and `Element`s
@@ -564,7 +564,7 @@ const PostStatusForm = {
       this.$refs['emoji-input'].resize()
     },
     showEmojiPicker () {
-      this.$refs['textarea'].focus()
+      this.$refs.textarea.focus()
       this.$refs['emoji-input'].triggerShowPicker()
     },
     clearError () {
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index e6f9dbff..37d6e7d0 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -45,7 +45,7 @@ const ReactButton = {
     emojis () {
       if (this.filterWord !== '') {
         const filterWordLowercase = trim(this.filterWord.toLowerCase())
-        let orderedEmojiList = []
+        const orderedEmojiList = []
         for (const emoji of this.$store.state.instance.emoji) {
           if (emoji.replacement === this.filterWord) return [emoji]
 
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index b76fb244..5a809847 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -9,13 +9,13 @@
     popover-class="ReactButton popover-default"
     @show="focusInput"
   >
-    <template v-slot:content="{close}">
+    <template #content="{close}">
       <div class="reaction-picker-filter">
         <input
           v-model="filterWord"
-          @input="$event.target.composing = false"
           size="1"
           :placeholder="$t('emoji.search_emoji')"
+          @input="$event.target.composing = false"
         >
       </div>
       <div class="reaction-picker">
@@ -41,7 +41,7 @@
         <div class="reaction-bottom-fader" />
       </div>
     </template>
-    <template v-slot:trigger>
+    <template #trigger>
       <span
         class="button-unstyled popover-trigger"
         :title="$t('tool_tip.add_reaction')"
@@ -55,7 +55,7 @@
   </Popover>
 </template>
 
-<script src="./react_button.js" ></script>
+<script src="./react_button.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/remote_follow/remote_follow.js b/src/components/remote_follow/remote_follow.js
index 461d58c9..56b264fc 100644
--- a/src/components/remote_follow/remote_follow.js
+++ b/src/components/remote_follow/remote_follow.js
@@ -1,5 +1,5 @@
 export default {
-  props: [ 'user' ],
+  props: ['user'],
   computed: {
     subscribeUrl () {
       // eslint-disable-next-line no-undef
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 859ce499..5a15d387 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -36,7 +36,7 @@
   </div>
 </template>
 
-<script src="./retweet_button.js" ></script>
+<script src="./retweet_button.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/search_bar/search_bar.js b/src/components/search_bar/search_bar.js
index 551649c7..3b297f09 100644
--- a/src/components/search_bar/search_bar.js
+++ b/src/components/search_bar/search_bar.js
@@ -16,7 +16,7 @@ const SearchBar = {
     error: false
   }),
   watch: {
-    '$route': function (route) {
+    $route: function (route) {
       if (route.name === 'search') {
         this.searchTerm = route.query.query
       }
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 3c80660e..1f7683ab 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -24,7 +24,7 @@
       :items="items"
       :get-key="getKey"
     >
-      <template v-slot:item="{item}">
+      <template #item="{item}">
         <div
           class="selectable-list-item-inner"
           :class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
@@ -41,7 +41,7 @@
           />
         </div>
       </template>
-      <template v-slot:empty>
+      <template #empty>
         <slot name="empty" />
       </template>
     </List>
diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue
index 74366dc1..8311533a 100644
--- a/src/components/settings_modal/helpers/modified_indicator.vue
+++ b/src/components/settings_modal/helpers/modified_indicator.vue
@@ -6,14 +6,14 @@
     <Popover
       trigger="hover"
     >
-      <template v-slot:trigger>
+      <template #trigger>
         &nbsp;
         <FAIcon
           icon="wrench"
           :aria-label="$t('settings.setting_changed')"
         />
       </template>
-      <template v-slot:content>
+      <template #content>
         <div class="modified-tooltip">
           {{ $t('settings.setting_changed') }}
         </div>
diff --git a/src/components/settings_modal/helpers/server_side_indicator.vue b/src/components/settings_modal/helpers/server_side_indicator.vue
index cf53eb6a..bf181959 100644
--- a/src/components/settings_modal/helpers/server_side_indicator.vue
+++ b/src/components/settings_modal/helpers/server_side_indicator.vue
@@ -6,14 +6,14 @@
     <Popover
       trigger="hover"
     >
-      <template v-slot:trigger>
+      <template #trigger>
         &nbsp;
         <FAIcon
           icon="server"
           :aria-label="$t('settings.setting_server_side')"
         />
       </template>
-      <template v-slot:content>
+      <template #content>
         <div class="serverside-tooltip">
           {{ $t('settings.setting_server_side') }}
         </div>
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index d3bed061..7b457371 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -53,7 +53,7 @@
           :bound-to="{ x: 'container' }"
           remove-padding
         >
-          <template v-slot:trigger>
+          <template #trigger>
             <button
               class="btn button-default"
               :title="$t('general.close')"
@@ -65,7 +65,7 @@
               />
             </button>
           </template>
-          <template v-slot:content="{close}">
+          <template #content="{close}">
             <div class="dropdown-menu">
               <button
                 class="button-default dropdown-item dropdown-item-icon"
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index e201ab9d..a2609200 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -75,12 +75,18 @@
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="userPopoverZoom" expert="1">
+          <BooleanSetting
+            path="userPopoverZoom"
+            expert="1"
+          >
             {{ $t('settings.user_popover_avatar_zoom') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="userPopoverOverlay" expert="1">
+          <BooleanSetting
+            path="userPopoverOverlay"
+            expert="1"
+          >
             {{ $t('settings.user_popover_avatar_overlay') }}
           </BooleanSetting>
         </li>
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
index 32a21415..c515d542 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
@@ -10,7 +10,7 @@
           :query="queryUserIds"
           :placeholder="$t('settings.search_user_to_block')"
         >
-          <template v-slot="row">
+          <template #default="row">
             <BlockCard
               :user-id="row.item"
             />
@@ -21,7 +21,7 @@
         :refresh="true"
         :get-key="i => i"
       >
-        <template v-slot:header="{selected}">
+        <template #header="{selected}">
           <div class="bulk-actions">
             <ProgressButton
               v-if="selected.length > 0"
@@ -29,7 +29,7 @@
               :click="() => blockUsers(selected)"
             >
               {{ $t('user_card.block') }}
-              <template v-slot:progress>
+              <template #progress>
                 {{ $t('user_card.block_progress') }}
               </template>
             </ProgressButton>
@@ -39,16 +39,16 @@
               :click="() => unblockUsers(selected)"
             >
               {{ $t('user_card.unblock') }}
-              <template v-slot:progress>
+              <template #progress>
                 {{ $t('user_card.unblock_progress') }}
               </template>
             </ProgressButton>
           </div>
         </template>
-        <template v-slot:item="{item}">
+        <template #item="{item}">
           <BlockCard :user-id="item" />
         </template>
-        <template v-slot:empty>
+        <template #empty>
           {{ $t('settings.no_blocks') }}
         </template>
       </BlockList>
@@ -63,7 +63,7 @@
               :query="queryUserIds"
               :placeholder="$t('settings.search_user_to_mute')"
             >
-              <template v-slot="row">
+              <template #default="row">
                 <MuteCard
                   :user-id="row.item"
                 />
@@ -74,7 +74,7 @@
             :refresh="true"
             :get-key="i => i"
           >
-            <template v-slot:header="{selected}">
+            <template #header="{selected}">
               <div class="bulk-actions">
                 <ProgressButton
                   v-if="selected.length > 0"
@@ -82,7 +82,7 @@
                   :click="() => muteUsers(selected)"
                 >
                   {{ $t('user_card.mute') }}
-                  <template v-slot:progress>
+                  <template #progress>
                     {{ $t('user_card.mute_progress') }}
                   </template>
                 </ProgressButton>
@@ -92,16 +92,16 @@
                   :click="() => unmuteUsers(selected)"
                 >
                   {{ $t('user_card.unmute') }}
-                  <template v-slot:progress>
+                  <template #progress>
                     {{ $t('user_card.unmute_progress') }}
                   </template>
                 </ProgressButton>
               </div>
             </template>
-            <template v-slot:item="{item}">
+            <template #item="{item}">
               <MuteCard :user-id="item" />
             </template>
-            <template v-slot:empty>
+            <template #empty>
               {{ $t('settings.no_mutes') }}
             </template>
           </MuteList>
@@ -114,7 +114,7 @@
               :query="queryKnownDomains"
               :placeholder="$t('settings.type_domains_to_mute')"
             >
-              <template v-slot="row">
+              <template #default="row">
                 <DomainMuteCard
                   :domain="row.item"
                 />
@@ -125,7 +125,7 @@
             :refresh="true"
             :get-key="i => i"
           >
-            <template v-slot:header="{selected}">
+            <template #header="{selected}">
               <div class="bulk-actions">
                 <ProgressButton
                   v-if="selected.length > 0"
@@ -133,16 +133,16 @@
                   :click="() => unmuteDomains(selected)"
                 >
                   {{ $t('domain_mute_card.unmute') }}
-                  <template v-slot:progress>
+                  <template #progress>
                     {{ $t('domain_mute_card.unmute_progress') }}
                   </template>
                 </ProgressButton>
               </div>
             </template>
-            <template v-slot:item="{item}">
+            <template #item="{item}">
               <DomainMuteCard :domain="item" />
             </template>
-            <template v-slot:empty>
+            <template #empty>
               {{ $t('settings.no_mutes') }}
             </template>
           </DomainMuteList>
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 8781bb91..376248ef 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -71,10 +71,12 @@ const ProfileTab = {
       })
     },
     emojiSuggestor () {
-      return suggestor({ emoji: [
-        ...this.$store.state.instance.emoji,
-        ...this.$store.state.instance.customEmoji
-      ] })
+      return suggestor({
+        emoji: [
+          ...this.$store.state.instance.emoji,
+          ...this.$store.state.instance.customEmoji
+        ]
+      })
     },
     userSuggestor () {
       return suggestor({ store: this.$store })
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 4cd93772..642d54ca 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -117,8 +117,8 @@
         <button
           v-if="!isDefaultAvatar && pickAvatarBtnVisible"
           :title="$t('settings.reset_avatar')"
-          @click="resetAvatar"
           class="button-unstyled reset-button"
+          @click="resetAvatar"
         >
           <FAIcon
             icon="times"
diff --git a/src/components/settings_modal/tabs/security_tab/mfa.js b/src/components/settings_modal/tabs/security_tab/mfa.js
index abf37062..5337d150 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa.js
+++ b/src/components/settings_modal/tabs/security_tab/mfa.js
@@ -32,8 +32,8 @@ const Mfa = {
   components: {
     'recovery-codes': RecoveryCodes,
     'totp-item': TOTP,
-    'qrcode': VueQrcode,
-    'confirm': Confirm
+    qrcode: VueQrcode,
+    confirm: Confirm
   },
   computed: {
     canSetupOTP () {
@@ -139,7 +139,7 @@ const Mfa = {
 
     // fetch settings from server
     async fetchSettings () {
-      let result = await this.backendInteractor.settingsMFA()
+      const result = await this.backendInteractor.settingsMFA()
       if (result.error) return
       this.settings = result.settings
       this.settings.available = true
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_totp.js b/src/components/settings_modal/tabs/security_tab/mfa_totp.js
index 8408d8e9..b0adb530 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa_totp.js
+++ b/src/components/settings_modal/tabs/security_tab/mfa_totp.js
@@ -10,7 +10,7 @@ export default {
     inProgress: false // progress peform request to disable otp method
   }),
   components: {
-    'confirm': Confirm
+    confirm: Confirm
   },
   computed: {
     isActivated () {
diff --git a/src/components/settings_modal/tabs/security_tab/security_tab.js b/src/components/settings_modal/tabs/security_tab/security_tab.js
index fc732936..d253bc79 100644
--- a/src/components/settings_modal/tabs/security_tab/security_tab.js
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.js
@@ -13,7 +13,7 @@ const SecurityTab = {
       deletingAccount: false,
       deleteAccountConfirmPasswordInput: '',
       deleteAccountError: false,
-      changePasswordInputs: [ '', '', '' ],
+      changePasswordInputs: ['', '', ''],
       changedPassword: false,
       changePasswordError: false,
       moveAccountTarget: '',
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index f266b603..ba6bd529 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -29,7 +29,10 @@
               {{ $t('settings.style.preview.content') }}
             </h4>
 
-            <i18n-t scope="global" keypath="settings.style.preview.text">
+            <i18n-t
+              scope="global"
+              keypath="settings.style.preview.text"
+            >
               <code style="font-family: var(--postCodeFont)">
                 {{ $t('settings.style.preview.mono') }}
               </code>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 7e1da7ab..282cb384 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -95,11 +95,11 @@ export default {
 
       ...Object.keys(SLOT_INHERITANCE)
         .map(key => [key, ''])
-        .reduce((acc, [key, val]) => ({ ...acc, [ key + 'ColorLocal' ]: val }), {}),
+        .reduce((acc, [key, val]) => ({ ...acc, [key + 'ColorLocal']: val }), {}),
 
       ...Object.keys(OPACITIES)
         .map(key => [key, ''])
-        .reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}),
+        .reduce((acc, [key, val]) => ({ ...acc, [key + 'OpacityLocal']: val }), {}),
 
       shadowSelected: undefined,
       shadowsLocal: {},
@@ -212,12 +212,12 @@ export default {
     currentColors () {
       return Object.keys(SLOT_INHERITANCE)
         .map(key => [key, this[key + 'ColorLocal']])
-        .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
+        .reduce((acc, [key, val]) => ({ ...acc, [key]: val }), {})
     },
     currentOpacity () {
       return Object.keys(OPACITIES)
         .map(key => [key, this[key + 'OpacityLocal']])
-        .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
+        .reduce((acc, [key, val]) => ({ ...acc, [key]: val }), {})
     },
     currentRadii () {
       return {
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index 386a5756..a1d1012b 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -112,9 +112,11 @@ export default {
       return hex2rgb(this.selected.color)
     },
     style () {
-      return this.ready ? {
-        boxShadow: getCssShadow(this.fallback)
-      } : {}
+      return this.ready
+        ? {
+            boxShadow: getCssShadow(this.fallback)
+          }
+        : {}
     }
   }
 }
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index f2fc7b99..669cac71 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -215,7 +215,7 @@
   </div>
 </template>
 
-<script src="./shadow_control.js" ></script>
+<script src="./shadow_control.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/shout_panel/shout_panel.js b/src/components/shout_panel/shout_panel.js
index a6168971..fb0c5aa2 100644
--- a/src/components/shout_panel/shout_panel.js
+++ b/src/components/shout_panel/shout_panel.js
@@ -11,7 +11,7 @@ library.add(
 )
 
 const shoutPanel = {
-  props: [ 'floating' ],
+  props: ['floating'],
   data () {
     return {
       currentMessage: '',
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index bad1806b..f45f8def 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -32,7 +32,7 @@ library.add(
 )
 
 const SideDrawer = {
-  props: [ 'logout' ],
+  props: ['logout'],
   data: () => ({
     closed: true,
     closeGesture: undefined
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index aefd3915..7547fb08 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -204,7 +204,7 @@
   </div>
 </template>
 
-<script src="./side_drawer.js" ></script>
+<script src="./side_drawer.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/staff_panel/staff_panel.js b/src/components/staff_panel/staff_panel.js
index b9561bf1..a7fbc718 100644
--- a/src/components/staff_panel/staff_panel.js
+++ b/src/components/staff_panel/staff_panel.js
@@ -17,8 +17,8 @@ const StaffPanel = {
       const groupedStaffAccounts = groupBy(staffAccounts, 'role')
 
       return [
-        { role: 'admin', users: groupedStaffAccounts['admin'] },
-        { role: 'moderator', users: groupedStaffAccounts['moderator'] }
+        { role: 'admin', users: groupedStaffAccounts.admin },
+        { role: 'moderator', users: groupedStaffAccounts.moderator }
       ].filter(group => group.users)
     },
     ...mapGetters([
diff --git a/src/components/staff_panel/staff_panel.vue b/src/components/staff_panel/staff_panel.vue
index c52ade42..6b9e61f2 100644
--- a/src/components/staff_panel/staff_panel.vue
+++ b/src/components/staff_panel/staff_panel.vue
@@ -24,7 +24,7 @@
   </div>
 </template>
 
-<script src="./staff_panel.js" ></script>
+<script src="./staff_panel.js"></script>
 
 <style lang="scss">
 
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 053c9441..0a2690f6 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -448,7 +448,7 @@ const Status = {
     scrollIfHighlighted (highlightId) {
       const id = highlightId
       if (this.status.id === id) {
-        let rect = this.$el.getBoundingClientRect()
+        const rect = this.$el.getBoundingClientRect()
         if (rect.top < 100) {
           // Post is above screen, match its top to screen top
           window.scrollBy(0, rect.top - 100)
@@ -463,7 +463,7 @@ const Status = {
     }
   },
   watch: {
-    'highlight': function (id) {
+    highlight: function (id) {
       this.scrollIfHighlighted(id)
     },
     'status.repeat_num': function (num) {
@@ -478,7 +478,7 @@ const Status = {
         this.$store.dispatch('fetchFavs', this.status.id)
       }
     },
-    'isSuspendable': function (val) {
+    isSuspendable: function (val) {
       this.suspendable = val
     }
   }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index bbb41d41..967a966c 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -122,10 +122,13 @@
           v-if="!noHeading"
           class="left-side"
         >
-          <a :href="$router.resolve(userProfileLink).href" @click.prevent>
+          <a
+            :href="$router.resolve(userProfileLink).href"
+            @click.prevent
+          >
             <UserPopover
-              :userId="status.user.id"
-              :overlayCenters="true"
+              :user-id="status.user.id"
+              :overlay-centers="true"
             >
               <UserAvatar
                 class="post-avatar"
@@ -488,6 +491,6 @@
   </div>
 </template>
 
-<script src="./status.js" ></script>
+<script src="./status.js"></script>
 
 <style src="./status.scss" lang="scss"></style>
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index 976fe98c..fb356360 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -96,5 +96,5 @@
     <slot v-if="!hideSubjectStatus" />
   </div>
 </template>
-<script src="./status_body.js" ></script>
+<script src="./status_body.js"></script>
 <style lang="scss" src="./status_body.scss" />
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 9e7d7956..e2120f7a 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -56,7 +56,7 @@
   </div>
 </template>
 
-<script src="./status_content.js" ></script>
+<script src="./status_content.js"></script>
 <style lang="scss">
 .StatusContent {
   flex: 1;
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 9cabb751..f4ab357b 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -1,16 +1,16 @@
 <template>
   <Popover
+    ref="popover"
     trigger="hover"
     :stay-on-click="true"
     popover-class="popover-default status-popover"
     :bound-to="{ x: 'container' }"
     @show="enter"
-    ref="popover"
   >
-    <template v-slot:trigger>
+    <template #trigger>
       <slot />
     </template>
-    <template v-slot:content>
+    <template #content>
       <Status
         v-if="status"
         :is-preview="true"
@@ -37,7 +37,7 @@
   </Popover>
 </template>
 
-<script src="./status_popover.js" ></script>
+<script src="./status_popover.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/sticker_picker/sticker_picker.js b/src/components/sticker_picker/sticker_picker.js
index 3a2d3914..b06384e5 100644
--- a/src/components/sticker_picker/sticker_picker.js
+++ b/src/components/sticker_picker/sticker_picker.js
@@ -31,8 +31,8 @@ const StickerPicker = {
       fetch(sticker)
         .then((res) => {
           res.blob().then((blob) => {
-            var file = new File([blob], name, { mimetype: 'image/png' })
-            var formData = new FormData()
+            const file = new File([blob], name, { mimetype: 'image/png' })
+            const formData = new FormData()
             formData.append('file', file)
             statusPosterService.uploadMedia({ store, formData })
               .then((fileData) => {
diff --git a/src/components/terms_of_service_panel/terms_of_service_panel.vue b/src/components/terms_of_service_panel/terms_of_service_panel.vue
index 63dc58b8..1df41d70 100644
--- a/src/components/terms_of_service_panel/terms_of_service_panel.vue
+++ b/src/components/terms_of_service_panel/terms_of_service_panel.vue
@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script src="./terms_of_service_panel.js" ></script>
+<script src="./terms_of_service_panel.js"></script>
 
 <style lang="scss">
 .tos-content {
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index f65881b6..266c1d9a 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -46,7 +46,10 @@
       </div>
     </div>
     <div :class="classes.footer">
-      <teleport :to="footerSlipgate" :disabled="!embedded || !footerSlipgate">
+      <teleport
+        :to="footerSlipgate"
+        :disabled="!embedded || !footerSlipgate"
+      >
         <div
           v-if="count===0"
           class="new-status-notification text-center faint"
diff --git a/src/components/timeline/timeline_quick_settings.vue b/src/components/timeline/timeline_quick_settings.vue
index 98fab926..297bc72a 100644
--- a/src/components/timeline/timeline_quick_settings.vue
+++ b/src/components/timeline/timeline_quick_settings.vue
@@ -4,7 +4,7 @@
     class="TimelineQuickSettings"
     :bound-to="{ x: 'container' }"
   >
-    <template v-slot:content>
+    <template #content>
       <div class="dropdown-menu">
         <div v-if="loggedIn">
           <button
@@ -80,7 +80,7 @@
         </button>
       </div>
     </template>
-    <template v-slot:trigger>
+    <template #trigger>
       <button class="button-unstyled">
         <FAIcon icon="filter" />
       </button>
diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index bab51e75..a11e7b7e 100644
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -11,9 +11,9 @@ library.add(faChevronDown)
 // because nav panel benefits from the same information.
 export const timelineNames = () => {
   return {
-    'friends': 'nav.home_timeline',
-    'bookmarks': 'nav.bookmarks',
-    'dms': 'nav.dms',
+    friends: 'nav.home_timeline',
+    bookmarks: 'nav.bookmarks',
+    dms: 'nav.dms',
     'public-timeline': 'nav.public_tl',
     'public-external-timeline': 'nav.twkn'
   }
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 1e054f5a..c24b9d72 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -9,10 +9,10 @@
     @show="openMenu"
     @close="() => isOpen = false"
   >
-    <template v-slot:content>
+    <template #content>
       <TimelineMenuContent />
     </template>
-    <template v-slot:trigger>
+    <template #trigger>
       <span class="button-unstyled title timeline-menu-title">
         <span class="timeline-title">{{ timelineName() }}</span>
         <span>
@@ -30,7 +30,7 @@
   </Popover>
 </template>
 
-<script src="./timeline_menu.js" ></script>
+<script src="./timeline_menu.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/timeline_menu/timeline_menu_content.vue b/src/components/timeline_menu/timeline_menu_content.vue
index bed1b679..59e9e43c 100644
--- a/src/components/timeline_menu/timeline_menu_content.vue
+++ b/src/components/timeline_menu/timeline_menu_content.vue
@@ -63,4 +63,4 @@
   </ul>
 </template>
 
-<script src="./timeline_menu_content.js" ></script>
+<script src="./timeline_menu_content.js"></script>
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index b0fa11b3..4c81e2c7 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -67,7 +67,7 @@ export default {
     style () {
       return {
         backgroundImage: [
-          `linear-gradient(to bottom, var(--profileTint), var(--profileTint))`,
+          'linear-gradient(to bottom, var(--profileTint), var(--profileTint))',
           `url(${this.user.cover_photo})`
         ].join(', ')
       }
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index bc23e68e..ace89c51 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -29,10 +29,10 @@
           </a>
           <UserAvatar
             v-else-if="typeof avatarAction === 'function'"
-            @click="avatarAction"
             class="user-info-avatar"
             :better-shadow="betterShadow"
             :user="user"
+            @click="avatarAction"
           />
           <router-link
             v-else
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index bdc3aa92..a3ce54c3 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -4,10 +4,10 @@
     placement="top"
     :offset="{ y: 5 }"
   >
-    <template v-slot:trigger>
+    <template #trigger>
       <slot />
     </template>
-    <template v-slot:content>
+    <template #content>
       <div class="user-list-popover">
         <template v-if="users.length">
           <div
@@ -45,7 +45,7 @@
   </Popover>
 </template>
 
-<script src="./user_list_popover.js" ></script>
+<script src="./user_list_popover.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue
index 72bb7f77..4e999672 100644
--- a/src/components/user_popover/user_popover.vue
+++ b/src/components/user_popover/user_popover.vue
@@ -1,27 +1,27 @@
 <template>
-<Popover
-  trigger="click"
-  popover-class="popover-default user-popover"
-  :overlay-centers-selector="overlayCentersSelector || '.user-info .Avatar'"
-  :overlay-centers="overlayCenters && userPopoverOverlay"
-  :disabled="disabled"
->
-  <template v-slot:trigger>
-    <slot />
-  </template>
-  <template v-slot:content={close}>
-    <UserCard
-      class="user-popover"
-      :user-id="userId"
-      :hide-bio="true"
-      :avatar-action="userPopoverZoom ? 'zoom' : close"
-      :on-close="close"
-    />
-  </template>
-</Popover>
+  <Popover
+    trigger="click"
+    popover-class="popover-default user-popover"
+    :overlay-centers-selector="overlayCentersSelector || '.user-info .Avatar'"
+    :overlay-centers="overlayCenters && userPopoverOverlay"
+    :disabled="disabled"
+  >
+    <template #trigger>
+      <slot />
+    </template>
+    <template #content="{close}">
+      <UserCard
+        class="user-popover"
+        :user-id="userId"
+        :hide-bio="true"
+        :avatar-action="userPopoverZoom ? 'zoom' : close"
+        :on-close="close"
+      />
+    </template>
+  </Popover>
 </template>
 
-<script src="./user_popover.js" ></script>
+<script src="./user_popover.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index dbf28981..d0da2b5b 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -56,7 +56,7 @@
           :user-id="userId"
           :pinned-status-ids="user.pinnedStatusIds"
           :in-profile="true"
-          :footerSlipgate="footerRef"
+          :footer-slipgate="footerRef"
         />
         <div
           v-if="followsTabVisible"
@@ -65,7 +65,7 @@
           :disabled="!user.friends_count"
         >
           <FriendList :user-id="userId">
-            <template v-slot:item="{item}">
+            <template #item="{item}">
               <FollowCard :user="item" />
             </template>
           </FriendList>
@@ -77,7 +77,7 @@
           :disabled="!user.followers_count"
         >
           <FollowerList :user-id="userId">
-            <template v-slot:item="{item}">
+            <template #item="{item}">
               <FollowCard
                 :user="item"
                 :no-follows-you="isUs"
@@ -95,7 +95,7 @@
           :timeline="media"
           :user-id="userId"
           :in-profile="true"
-          :footerSlipgate="footerRef"
+          :footer-slipgate="footerRef"
         />
         <Timeline
           v-if="isUs"
@@ -107,10 +107,13 @@
           timeline-name="favorites"
           :timeline="favorites"
           :in-profile="true"
-          :footerSlipgate="footerRef"
+          :footer-slipgate="footerRef"
         />
       </tab-switcher>
-      <div class="panel-footer" :ref="setFooterRef"></div>
+      <div
+        :ref="setFooterRef"
+        class="panel-footer"
+      />
     </div>
     <div
       v-else
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index 030ce2c4..429a66e2 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -45,7 +45,7 @@
         </div>
         <div class="user-reporting-panel-right">
           <List :items="statuses">
-            <template v-slot:item="{item}">
+            <template #item="{item}">
               <div class="status-fadein user-reporting-panel-sitem">
                 <Status
                   :in-conversation="false"
diff --git a/src/components/who_to_follow/who_to_follow.js b/src/components/who_to_follow/who_to_follow.js
index ecd97dd7..53f05272 100644
--- a/src/components/who_to_follow/who_to_follow.js
+++ b/src/components/who_to_follow/who_to_follow.js
@@ -28,7 +28,7 @@ const WhoToFollow = {
     getWhoToFollow () {
       const credentials = this.$store.state.users.currentUser.credentials
       if (credentials) {
-        apiService.suggestions({ credentials: credentials })
+        apiService.suggestions({ credentials })
           .then((reply) => {
             this.showWhoToFollow(reply)
           })
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
index 818e8bd5..f19ba948 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -6,9 +6,9 @@ function showWhoToFollow (panel, reply) {
   const shuffled = shuffle(reply)
 
   panel.usersToFollow.forEach((toFollow, index) => {
-    let user = shuffled[index]
-    let img = user.avatar || this.$store.state.instance.defaultAvatar
-    let name = user.acct
+    const user = shuffled[index]
+    const img = user.avatar || this.$store.state.instance.defaultAvatar
+    const name = user.acct
 
     toFollow.img = img
     toFollow.name = name
@@ -24,12 +24,12 @@ function showWhoToFollow (panel, reply) {
 }
 
 function getWhoToFollow (panel) {
-  var credentials = panel.$store.state.users.currentUser.credentials
+  const credentials = panel.$store.state.users.currentUser.credentials
   if (credentials) {
     panel.usersToFollow.forEach(toFollow => {
       toFollow.name = 'Loading...'
     })
-    apiService.suggestions({ credentials: credentials })
+    apiService.suggestions({ credentials })
       .then((reply) => {
         showWhoToFollow(panel, reply)
       })
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue
index 518acd97..c1ba6fb1 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.vue
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue
@@ -27,7 +27,7 @@
   </div>
 </template>
 
-<script src="./who_to_follow_panel.js" ></script>
+<script src="./who_to_follow_panel.js"></script>
 
 <style lang="scss">
   .who-to-follow * {
diff --git a/src/i18n/messages.js b/src/i18n/messages.js
index 18ed79b7..eae75c80 100644
--- a/src/i18n/messages.js
+++ b/src/i18n/messages.js
@@ -46,7 +46,7 @@ const messages = {
   },
   setLanguage: async (i18n, language) => {
     if (loaders[language]) {
-      let messages = await loaders[language]()
+      const messages = await loaders[language]()
       i18n.setLocaleMessage(language, messages.default)
     }
     i18n.locale = language
diff --git a/src/lib/notification-i18n-loader.js b/src/lib/notification-i18n-loader.js
index 71f9156a..d7a4430d 100644
--- a/src/lib/notification-i18n-loader.js
+++ b/src/lib/notification-i18n-loader.js
@@ -3,8 +3,8 @@
 // meant to be used to load the partial i18n we need for
 // the service worker.
 module.exports = function (source) {
-  var object = JSON.parse(source)
-  var smol = {
+  const object = JSON.parse(source)
+  const smol = {
     notifications: object.notifications || {}
   }
 
diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js
index 24b835da..c73a38ec 100644
--- a/src/lib/persisted_state.js
+++ b/src/lib/persisted_state.js
@@ -5,10 +5,12 @@ import { each, get, set, cloneDeep } from 'lodash'
 let loaded = false
 
 const defaultReducer = (state, paths) => (
-  paths.length === 0 ? state : paths.reduce((substate, path) => {
-    set(substate, path, get(state, path))
-    return substate
-  }, {})
+  paths.length === 0
+    ? state
+    : paths.reduce((substate, path) => {
+      set(substate, path, get(state, path))
+      return substate
+    }, {})
 )
 
 const saveImmedeatelyActions = [
@@ -30,7 +32,7 @@ export default function createPersistedState ({
   key = 'vuex-lz',
   paths = [],
   getState = (key, storage) => {
-    let value = storage.getItem(key)
+    const value = storage.getItem(key)
     return value
   },
   setState = (key, state, storage) => {
diff --git a/src/modules/api.js b/src/modules/api.js
index 54f94356..28f2076e 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -233,7 +233,7 @@ const api = {
 
     // Follow requests
     startFetchingFollowRequests (store) {
-      if (store.state.fetchers['followRequests']) return
+      if (store.state.fetchers.followRequests) return
       const fetcher = store.state.backendInteractor.startFetchingFollowRequests({ store })
 
       store.commit('addFetcher', { fetcherName: 'followRequests', fetcher })
@@ -244,7 +244,7 @@ const api = {
       store.commit('removeFetcher', { fetcherName: 'followRequests', fetcher })
     },
     removeFollowRequest (store, request) {
-      let requests = store.state.followRequests.filter((it) => it !== request)
+      const requests = store.state.followRequests.filter((it) => it !== request)
       store.commit('setFollowRequests', requests)
     },
 
diff --git a/src/modules/config.js b/src/modules/config.js
index f7f142ad..eaf67a91 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -147,7 +147,7 @@ const config = {
       const knownKeys = new Set(Object.keys(defaultState))
       const presentKeys = new Set(Object.keys(data))
       const intersection = new Set()
-      for (let elem of presentKeys) {
+      for (const elem of presentKeys) {
         if (knownKeys.has(elem)) {
           intersection.add(elem)
         }
diff --git a/src/modules/errors.js b/src/modules/errors.js
index ca89dc0f..d2e24100 100644
--- a/src/modules/errors.js
+++ b/src/modules/errors.js
@@ -2,8 +2,8 @@ import { capitalize } from 'lodash'
 
 export function humanizeErrors (errors) {
   return Object.entries(errors).reduce((errs, [k, val]) => {
-    let message = val.reduce((acc, message) => {
-      let key = capitalize(k.replace(/_/g, ' '))
+    const message = val.reduce((acc, message) => {
+      const key = capitalize(k.replace(/_/g, ' '))
       return acc + [key, message].join(' ') + '. '
     }, '')
     return [...errs, message]
diff --git a/src/modules/serverSideConfig.js b/src/modules/serverSideConfig.js
index 4b73af26..476263bc 100644
--- a/src/modules/serverSideConfig.js
+++ b/src/modules/serverSideConfig.js
@@ -39,53 +39,53 @@ const notificationsApi = ({ rootState, commit }, { path, value, oldValue }) => {
  * If no api is specified, defaultApi is used (see above)
  */
 export const settingsMap = {
-  'defaultScope': 'source.privacy',
-  'defaultNSFW': 'source.sensitive', // BROKEN: pleroma/pleroma#2837
-  'stripRichContent': {
+  defaultScope: 'source.privacy',
+  defaultNSFW: 'source.sensitive', // BROKEN: pleroma/pleroma#2837
+  stripRichContent: {
     get: 'source.pleroma.no_rich_text',
     set: 'no_rich_text'
   },
   // Privacy
-  'locked': 'locked',
-  'acceptChatMessages': {
+  locked: 'locked',
+  acceptChatMessages: {
     get: 'pleroma.accepts_chat_messages',
     set: 'accepts_chat_messages'
   },
-  'allowFollowingMove': {
+  allowFollowingMove: {
     get: 'pleroma.allow_following_move',
     set: 'allow_following_move'
   },
-  'discoverable': {
+  discoverable: {
     get: 'source.pleroma.discoverable',
     set: 'discoverable'
   },
-  'hideFavorites': {
+  hideFavorites: {
     get: 'pleroma.hide_favorites',
     set: 'hide_favorites'
   },
-  'hideFollowers': {
+  hideFollowers: {
     get: 'pleroma.hide_followers',
     set: 'hide_followers'
   },
-  'hideFollows': {
+  hideFollows: {
     get: 'pleroma.hide_follows',
     set: 'hide_follows'
   },
-  'hideFollowersCount': {
+  hideFollowersCount: {
     get: 'pleroma.hide_followers_count',
     set: 'hide_followers_count'
   },
-  'hideFollowsCount': {
+  hideFollowsCount: {
     get: 'pleroma.hide_follows_count',
     set: 'hide_follows_count'
   },
   // NotificationSettingsAPIs
-  'webPushHideContents': {
+  webPushHideContents: {
     get: 'pleroma.notification_settings.hide_notification_contents',
     set: 'hide_notification_contents',
     api: notificationsApi
   },
-  'blockNotificationsFromStrangers': {
+  blockNotificationsFromStrangers: {
     get: 'pleroma.notification_settings.block_from_strangers',
     set: 'block_from_strangers',
     api: notificationsApi
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index a13930e9..67026832 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -245,10 +245,10 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
   }
 
   const processors = {
-    'status': (status) => {
+    status: (status) => {
       addStatus(status, showImmediately)
     },
-    'retweet': (status) => {
+    retweet: (status) => {
       // RetweetedStatuses are never shown immediately
       const retweetedStatus = addStatus(status.retweeted_status, false, false)
 
@@ -270,7 +270,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
 
       retweet.retweeted_status = retweetedStatus
     },
-    'favorite': (favorite) => {
+    favorite: (favorite) => {
       // Only update if this is a new favorite.
       // Ignore our own favorites because we get info about likes as response to like request
       if (!state.favorites.has(favorite.id)) {
@@ -278,7 +278,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
         favoriteStatus(favorite)
       }
     },
-    'deletion': (deletion) => {
+    deletion: (deletion) => {
       const uri = deletion.uri
       const status = find(allStatuses, { uri })
       if (!status) {
@@ -292,10 +292,10 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
         remove(timelineObject.visibleStatuses, { uri })
       }
     },
-    'follow': (follow) => {
+    follow: (follow) => {
       // NOOP, it is known status but we don't do anything about it for now
     },
-    'default': (unknown) => {
+    default: (unknown) => {
       console.log('unknown status type')
       console.log(unknown)
     }
@@ -303,7 +303,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
 
   each(statuses, (status) => {
     const type = status.type
-    const processor = processors[type] || processors['default']
+    const processor = processors[type] || processors.default
     processor(status)
   })
 
@@ -522,7 +522,7 @@ export const mutations = {
   },
   addEmojiReactionsBy (state, { id, emojiReactions, currentUser }) {
     const status = state.allStatusesObject[id]
-    status['emoji_reactions'] = emojiReactions
+    status.emoji_reactions = emojiReactions
   },
   addOwnReaction (state, { id, emoji, currentUser }) {
     const status = state.allStatusesObject[id]
@@ -543,7 +543,7 @@ export const mutations = {
     if (reactionIndex >= 0) {
       status.emoji_reactions[reactionIndex] = newReaction
     } else {
-      status['emoji_reactions'] = [...status.emoji_reactions, newReaction]
+      status.emoji_reactions = [...status.emoji_reactions, newReaction]
     }
   },
   removeOwnReaction (state, { id, emoji, currentUser }) {
@@ -564,7 +564,7 @@ export const mutations = {
     if (newReaction.count > 0) {
       status.emoji_reactions[reactionIndex] = newReaction
     } else {
-      status['emoji_reactions'] = status.emoji_reactions.filter(r => r.name !== emoji)
+      status.emoji_reactions = status.emoji_reactions.filter(r => r.name !== emoji)
     }
   },
   updateStatusWithPoll (state, { id, poll }) {
diff --git a/src/modules/users.js b/src/modules/users.js
index f951483f..13d4e318 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -103,23 +103,23 @@ export const mutations = {
     const user = state.usersObject[id]
     const tags = user.tags || []
     const newTags = tags.concat([tag])
-    user['tags'] = newTags
+    user.tags = newTags
   },
   untagUser (state, { user: { id }, tag }) {
     const user = state.usersObject[id]
     const tags = user.tags || []
     const newTags = tags.filter(t => t !== tag)
-    user['tags'] = newTags
+    user.tags = newTags
   },
   updateRight (state, { user: { id }, right, value }) {
     const user = state.usersObject[id]
-    let newRights = user.rights
+    const newRights = user.rights
     newRights[right] = value
-    user['rights'] = newRights
+    user.rights = newRights
   },
   updateActivationStatus (state, { user: { id }, deactivated }) {
     const user = state.usersObject[id]
-    user['deactivated'] = deactivated
+    user.deactivated = deactivated
   },
   setCurrentUser (state, user) {
     state.lastLoginName = user.screen_name
@@ -148,13 +148,13 @@ export const mutations = {
   clearFriends (state, userId) {
     const user = state.usersObject[userId]
     if (user) {
-      user['friendIds'] = []
+      user.friendIds = []
     }
   },
   clearFollowers (state, userId) {
     const user = state.usersObject[userId]
     if (user) {
-      user['followerIds'] = []
+      user.followerIds = []
     }
   },
   addNewUsers (state, users) {
@@ -222,7 +222,7 @@ export const mutations = {
   },
   setColor (state, { user: { id }, highlighted }) {
     const user = state.usersObject[id]
-    user['highlight'] = highlighted
+    user.highlight = highlighted
   },
   signUpPending (state) {
     state.signUpPending = true
@@ -393,7 +393,7 @@ const users = {
     toggleActivationStatus ({ rootState, commit }, { user }) {
       const api = user.deactivated ? rootState.api.backendInteractor.activateUser : rootState.api.backendInteractor.deactivateUser
       api({ user })
-        .then((user) => { let deactivated = !user.is_active; commit('updateActivationStatus', { user, deactivated }) })
+        .then((user) => { const deactivated = !user.is_active; commit('updateActivationStatus', { user, deactivated }) })
     },
     registerPushNotifications (store) {
       const token = store.state.currentUser.credentials
@@ -457,17 +457,17 @@ const users = {
     async signUp (store, userInfo) {
       store.commit('signUpPending')
 
-      let rootState = store.rootState
+      const rootState = store.rootState
 
       try {
-        let data = await rootState.api.backendInteractor.register(
+        const data = await rootState.api.backendInteractor.register(
           { params: { ...userInfo } }
         )
         store.commit('signUpSuccess')
         store.commit('setToken', data.access_token)
         store.dispatch('loginUser', data.access_token)
       } catch (e) {
-        let errors = e.message
+        const errors = e.message
         store.commit('signUpFailure', errors)
         throw e
       }
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index e413baee..da3bccc5 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -76,7 +76,7 @@ const MASTODON_PIN_OWN_STATUS = id => `/api/v1/statuses/${id}/pin`
 const MASTODON_UNPIN_OWN_STATUS = id => `/api/v1/statuses/${id}/unpin`
 const MASTODON_MUTE_CONVERSATION = id => `/api/v1/statuses/${id}/mute`
 const MASTODON_UNMUTE_CONVERSATION = id => `/api/v1/statuses/${id}/unmute`
-const MASTODON_SEARCH_2 = `/api/v2/search`
+const MASTODON_SEARCH_2 = '/api/v2/search'
 const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search'
 const MASTODON_DOMAIN_BLOCKS_URL = '/api/v1/domain_blocks'
 const MASTODON_STREAMING = '/api/v1/streaming'
@@ -84,7 +84,7 @@ const MASTODON_KNOWN_DOMAIN_LIST_URL = '/api/v1/instance/peers'
 const PLEROMA_EMOJI_REACTIONS_URL = id => `/api/v1/pleroma/statuses/${id}/reactions`
 const PLEROMA_EMOJI_REACT_URL = (id, emoji) => `/api/v1/pleroma/statuses/${id}/reactions/${emoji}`
 const PLEROMA_EMOJI_UNREACT_URL = (id, emoji) => `/api/v1/pleroma/statuses/${id}/reactions/${emoji}`
-const PLEROMA_CHATS_URL = `/api/v1/pleroma/chats`
+const PLEROMA_CHATS_URL = '/api/v1/pleroma/chats'
 const PLEROMA_CHAT_URL = id => `/api/v1/pleroma/chats/by-account-id/${id}`
 const PLEROMA_CHAT_MESSAGES_URL = id => `/api/v1/pleroma/chats/${id}/messages`
 const PLEROMA_CHAT_READ_URL = id => `/api/v1/pleroma/chats/${id}/read`
@@ -93,7 +93,7 @@ const PLEROMA_BACKUP_URL = '/api/v1/pleroma/backups'
 
 const oldfetch = window.fetch
 
-let fetch = (url, options) => {
+const fetch = (url, options) => {
   options = options || {}
   const baseUrl = ''
   const fullUrl = baseUrl + url
@@ -105,7 +105,7 @@ const promisedRequest = ({ method, url, params, payload, credentials, headers =
   const options = {
     method,
     headers: {
-      'Accept': 'application/json',
+      Accept: 'application/json',
       'Content-Type': 'application/json',
       ...headers
     }
@@ -229,16 +229,16 @@ const getCaptcha = () => fetch('/api/pleroma/captcha').then(resp => resp.json())
 
 const authHeaders = (accessToken) => {
   if (accessToken) {
-    return { 'Authorization': `Bearer ${accessToken}` }
+    return { Authorization: `Bearer ${accessToken}` }
   } else {
     return { }
   }
 }
 
 const followUser = ({ id, credentials, ...options }) => {
-  let url = MASTODON_FOLLOW_URL(id)
+  const url = MASTODON_FOLLOW_URL(id)
   const form = {}
-  if (options.reblogs !== undefined) { form['reblogs'] = options.reblogs }
+  if (options.reblogs !== undefined) { form.reblogs = options.reblogs }
   return fetch(url, {
     body: JSON.stringify(form),
     headers: {
@@ -250,7 +250,7 @@ const followUser = ({ id, credentials, ...options }) => {
 }
 
 const unfollowUser = ({ id, credentials }) => {
-  let url = MASTODON_UNFOLLOW_URL(id)
+  const url = MASTODON_UNFOLLOW_URL(id)
   return fetch(url, {
     headers: authHeaders(credentials),
     method: 'POST'
@@ -292,7 +292,7 @@ const unblockUser = ({ id, credentials }) => {
 }
 
 const approveUser = ({ id, credentials }) => {
-  let url = MASTODON_APPROVE_USER_URL(id)
+  const url = MASTODON_APPROVE_USER_URL(id)
   return fetch(url, {
     headers: authHeaders(credentials),
     method: 'POST'
@@ -300,7 +300,7 @@ const approveUser = ({ id, credentials }) => {
 }
 
 const denyUser = ({ id, credentials }) => {
-  let url = MASTODON_DENY_USER_URL(id)
+  const url = MASTODON_DENY_USER_URL(id)
   return fetch(url, {
     headers: authHeaders(credentials),
     method: 'POST'
@@ -308,13 +308,13 @@ const denyUser = ({ id, credentials }) => {
 }
 
 const fetchUser = ({ id, credentials }) => {
-  let url = `${MASTODON_USER_URL}/${id}`
+  const url = `${MASTODON_USER_URL}/${id}`
   return promisedRequest({ url, credentials })
     .then((data) => parseUser(data))
 }
 
 const fetchUserRelationship = ({ id, credentials }) => {
-  let url = `${MASTODON_USER_RELATIONSHIPS_URL}/?id=${id}`
+  const url = `${MASTODON_USER_RELATIONSHIPS_URL}/?id=${id}`
   return fetch(url, { headers: authHeaders(credentials) })
     .then((response) => {
       return new Promise((resolve, reject) => response.json()
@@ -333,7 +333,7 @@ const fetchFriends = ({ id, maxId, sinceId, limit = 20, credentials }) => {
     maxId && `max_id=${maxId}`,
     sinceId && `since_id=${sinceId}`,
     limit && `limit=${limit}`,
-    `with_relationships=true`
+    'with_relationships=true'
   ].filter(_ => _).join('&')
 
   url = url + (args ? '?' + args : '')
@@ -368,7 +368,7 @@ const fetchFollowers = ({ id, maxId, sinceId, limit = 20, credentials }) => {
     maxId && `max_id=${maxId}`,
     sinceId && `since_id=${sinceId}`,
     limit && `limit=${limit}`,
-    `with_relationships=true`
+    'with_relationships=true'
   ].filter(_ => _).join('&')
 
   url += args ? '?' + args : ''
@@ -385,7 +385,7 @@ const fetchFollowRequests = ({ credentials }) => {
 }
 
 const fetchConversation = ({ id, credentials }) => {
-  let urlContext = MASTODON_STATUS_CONTEXT_URL(id)
+  const urlContext = MASTODON_STATUS_CONTEXT_URL(id)
   return fetch(urlContext, { headers: authHeaders(credentials) })
     .then((data) => {
       if (data.ok) {
@@ -401,7 +401,7 @@ const fetchConversation = ({ id, credentials }) => {
 }
 
 const fetchStatus = ({ id, credentials }) => {
-  let url = MASTODON_STATUS_URL(id)
+  const url = MASTODON_STATUS_URL(id)
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => {
       if (data.ok) {
@@ -425,7 +425,7 @@ const tagUser = ({ tag, credentials, user }) => {
 
   return fetch(TAG_USER_URL, {
     method: 'PUT',
-    headers: headers,
+    headers,
     body: JSON.stringify(form)
   })
 }
@@ -442,7 +442,7 @@ const untagUser = ({ tag, credentials, user }) => {
 
   return fetch(TAG_USER_URL, {
     method: 'DELETE',
-    headers: headers,
+    headers,
     body: JSON.stringify(body)
   })
 }
@@ -495,7 +495,7 @@ const deleteUser = ({ credentials, user }) => {
 
   return fetch(`${ADMIN_USERS_URL}?nickname=${screenName}`, {
     method: 'DELETE',
-    headers: headers
+    headers
   })
 }
 
@@ -514,7 +514,7 @@ const fetchTimeline = ({
     friends: MASTODON_USER_HOME_TIMELINE_URL,
     dms: MASTODON_DIRECT_MESSAGES_TIMELINE_URL,
     notifications: MASTODON_USER_NOTIFICATIONS_URL,
-    'publicAndExternal': MASTODON_PUBLIC_TIMELINE,
+    publicAndExternal: MASTODON_PUBLIC_TIMELINE,
     user: MASTODON_USER_TIMELINE_URL,
     media: MASTODON_USER_TIMELINE_URL,
     favorites: MASTODON_USER_FAVORITES_TIMELINE_URL,
@@ -688,7 +688,7 @@ const postStatus = ({
     form.append('preview', 'true')
   }
 
-  let postHeaders = authHeaders(credentials)
+  const postHeaders = authHeaders(credentials)
   if (idempotencyKey) {
     postHeaders['idempotency-key'] = idempotencyKey
   }
@@ -993,7 +993,7 @@ const vote = ({ pollId, choices, credentials }) => {
     method: 'POST',
     credentials,
     payload: {
-      choices: choices
+      choices
     }
   })
 }
@@ -1053,8 +1053,8 @@ const reportUser = ({ credentials, userId, statusIds, comment, forward }) => {
     url: MASTODON_REPORT_USER_URL,
     method: 'POST',
     payload: {
-      'account_id': userId,
-      'status_ids': statusIds,
+      account_id: userId,
+      status_ids: statusIds,
       comment,
       forward
     },
@@ -1076,7 +1076,7 @@ const searchUsers = ({ credentials, query }) => {
 
 const search2 = ({ credentials, q, resolve, limit, offset, following }) => {
   let url = MASTODON_SEARCH_2
-  let params = []
+  const params = []
 
   if (q) {
     params.push(['q', encodeURIComponent(q)])
@@ -1100,7 +1100,7 @@ const search2 = ({ credentials, q, resolve, limit, offset, following }) => {
 
   params.push(['with_relationships', true])
 
-  let queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
+  const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
   url += `?${queryString}`
 
   return fetch(url, { headers: authHeaders(credentials) })
@@ -1254,12 +1254,12 @@ export const handleMastoWS = (wsEvent) => {
 }
 
 export const WSConnectionStatus = Object.freeze({
-  'JOINED': 1,
-  'CLOSED': 2,
-  'ERROR': 3,
-  'DISABLED': 4,
-  'STARTING': 5,
-  'STARTING_INITIAL': 6
+  JOINED: 1,
+  CLOSED: 2,
+  ERROR: 3,
+  DISABLED: 4,
+  STARTING: 5,
+  STARTING_INITIAL: 6
 })
 
 const chats = ({ credentials }) => {
@@ -1297,11 +1297,11 @@ const chatMessages = ({ id, credentials, maxId, sinceId, limit = 20 }) => {
 
 const sendChatMessage = ({ id, content, mediaId = null, idempotencyKey, credentials }) => {
   const payload = {
-    'content': content
+    content
   }
 
   if (mediaId) {
-    payload['media_id'] = mediaId
+    payload.media_id = mediaId
   }
 
   const headers = {}
@@ -1313,7 +1313,7 @@ const sendChatMessage = ({ id, content, mediaId = null, idempotencyKey, credenti
   return promisedRequest({
     url: PLEROMA_CHAT_MESSAGES_URL(id),
     method: 'POST',
-    payload: payload,
+    payload,
     credentials,
     headers
   })
@@ -1324,7 +1324,7 @@ const readChat = ({ id, lastReadId, credentials }) => {
     url: PLEROMA_CHAT_READ_URL(id),
     method: 'POST',
     payload: {
-      'last_read_id': lastReadId
+      last_read_id: lastReadId
     },
     credentials
   })
diff --git a/src/services/chat_service/chat_service.js b/src/services/chat_service/chat_service.js
index 92ff689d..eb26a0ab 100644
--- a/src/services/chat_service/chat_service.js
+++ b/src/services/chat_service/chat_service.js
@@ -7,7 +7,7 @@ const empty = (chatId) => {
     messages: [],
     newMessageCount: 0,
     lastSeenMessageId: '0',
-    chatId: chatId,
+    chatId,
     minId: undefined,
     maxId: undefined
   }
@@ -101,7 +101,7 @@ const add = (storage, { messages: newMessages, updateMaxId = true }) => {
           storage.messages = storage.messages.filter(msg => msg.id !== message.id)
         }
         Object.assign(fakeMessage, message, { error: false })
-        delete fakeMessage['fakeId']
+        delete fakeMessage.fakeId
         storage.idIndex[fakeMessage.id] = fakeMessage
         delete storage.idIndex[message.fakeId]
 
@@ -178,7 +178,7 @@ const getView = (storage) => {
         id: date.getTime().toString()
       })
 
-      previousMessage['isTail'] = true
+      previousMessage.isTail = true
       currentMessageChainId = undefined
       afterDate = true
     }
@@ -193,15 +193,15 @@ const getView = (storage) => {
 
     // end a message chian
     if ((nextMessage && nextMessage.account_id) !== message.account_id) {
-      object['isTail'] = true
+      object.isTail = true
       currentMessageChainId = undefined
     }
 
     // start a new message chain
     if ((previousMessage && previousMessage.data && previousMessage.data.account_id) !== message.account_id || afterDate) {
       currentMessageChainId = _.uniqueId()
-      object['isHead'] = true
-      object['messageChainId'] = currentMessageChainId
+      object.isHead = true
+      object.messageChainId = currentMessageChainId
     }
 
     result.push(object)
diff --git a/src/services/chat_utils/chat_utils.js b/src/services/chat_utils/chat_utils.js
index de6e0625..a8da1eed 100644
--- a/src/services/chat_utils/chat_utils.js
+++ b/src/services/chat_utils/chat_utils.js
@@ -25,7 +25,7 @@ export const buildFakeMessage = ({ content, chatId, attachments, userId, idempot
     chat_id: chatId,
     created_at: new Date(),
     id: `${new Date().getTime()}`,
-    attachments: attachments,
+    attachments,
     account_id: userId,
     idempotency_key: idempotencyKey,
     emojis: [],
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index ec104269..47d6344e 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -144,11 +144,13 @@ export const invert = (rgb) => {
  */
 export const hex2rgb = (hex) => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-  return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16)
-  } : null
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+      }
+    : null
 }
 
 /**
diff --git a/src/services/completion/completion.js b/src/services/completion/completion.js
index 8a6eba7e..8fa4f75b 100644
--- a/src/services/completion/completion.js
+++ b/src/services/completion/completion.js
@@ -35,7 +35,7 @@ export const addPositionToWords = (words) => {
 }
 
 export const splitByWhitespaceBoundary = (str) => {
-  let result = []
+  const result = []
   let currentWord = ''
   for (let i = 0; i < str.length; i++) {
     const currentChar = str[i]
diff --git a/src/services/date_utils/date_utils.js b/src/services/date_utils/date_utils.js
index 677c184c..c93d2176 100644
--- a/src/services/date_utils/date_utils.js
+++ b/src/services/date_utils/date_utils.js
@@ -10,7 +10,7 @@ export const relativeTime = (date, nowThreshold = 1) => {
   if (typeof date === 'string') date = Date.parse(date)
   const round = Date.now() > date ? Math.floor : Math.ceil
   const d = Math.abs(Date.now() - date)
-  let r = { num: round(d / YEAR), key: 'time.unit.years' }
+  const r = { num: round(d / YEAR), key: 'time.unit.years' }
   if (d < nowThreshold * SECOND) {
     r.num = 0
     r.key = 'time.now'
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index f219c161..86472b42 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -371,8 +371,8 @@ export const parseStatus = (data) => {
 
 export const parseNotification = (data) => {
   const mastoDict = {
-    'favourite': 'like',
-    'reblog': 'repeat'
+    favourite: 'like',
+    reblog: 'repeat'
   }
   const masto = !data.hasOwnProperty('ntype')
   const output = {}
diff --git a/src/services/file_size_format/file_size_format.js b/src/services/file_size_format/file_size_format.js
index 7e6cd4d7..d481dfb0 100644
--- a/src/services/file_size_format/file_size_format.js
+++ b/src/services/file_size_format/file_size_format.js
@@ -1,7 +1,7 @@
 const fileSizeFormat = (num) => {
-  var exponent
-  var unit
-  var units = ['B', 'KiB', 'MiB', 'GiB', 'TiB']
+  let exponent
+  let unit
+  const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB']
   if (num < 1) {
     return num + ' ' + units[0]
   }
@@ -9,7 +9,7 @@ const fileSizeFormat = (num) => {
   exponent = Math.min(Math.floor(Math.log(num) / Math.log(1024)), units.length - 1)
   num = (num / Math.pow(1024, exponent)).toFixed(2) * 1
   unit = units[exponent]
-  return { num: num, unit: unit }
+  return { num, unit }
 }
 const fileSizeFormatService = {
   fileSizeFormat
diff --git a/src/services/html_converter/html_line_converter.service.js b/src/services/html_converter/html_line_converter.service.js
index 5eeaa7cb..9c3d1f19 100644
--- a/src/services/html_converter/html_line_converter.service.js
+++ b/src/services/html_converter/html_line_converter.service.js
@@ -46,7 +46,7 @@ export const convertHtmlToLines = (html = '') => {
   // All block-level elements that aren't empty elements, i.e. not <hr>
   const nonEmptyElements = new Set(visualLineElements)
   // Difference
-  for (let elem of emptyElements) {
+  for (const elem of emptyElements) {
     nonEmptyElements.delete(elem)
   }
 
@@ -56,7 +56,7 @@ export const convertHtmlToLines = (html = '') => {
     ...emptyElements.values()
   ])
 
-  let buffer = [] // Current output buffer
+  const buffer = [] // Current output buffer
   const level = [] // How deep we are in tags and which tags were there
   let textBuffer = '' // Current line content
   let tagBuffer = null // Current tag buffer, if null = we are not currently reading a tag
diff --git a/src/services/html_converter/utility.service.js b/src/services/html_converter/utility.service.js
index 4d0c36c2..583ccca5 100644
--- a/src/services/html_converter/utility.service.js
+++ b/src/services/html_converter/utility.service.js
@@ -50,7 +50,7 @@ export const processTextForEmoji = (text, emojis, processor) => {
     if (char === ':') {
       const next = text.slice(i + 1)
       let found = false
-      for (let emoji of emojis) {
+      for (const emoji of emojis) {
         if (next.slice(0, emoji.shortcode.length + 1) === (emoji.shortcode + ':')) {
           found = emoji
           break
diff --git a/src/services/locale/locale.service.js b/src/services/locale/locale.service.js
index 8cef2522..d3389785 100644
--- a/src/services/locale/locale.service.js
+++ b/src/services/locale/locale.service.js
@@ -3,9 +3,9 @@ import ISO6391 from 'iso-639-1'
 import _ from 'lodash'
 
 const specialLanguageCodes = {
-  'ja_easy': 'ja',
-  'zh_Hant': 'zh-HANT',
-  'zh': 'zh-Hans'
+  ja_easy: 'ja',
+  zh_Hant: 'zh-HANT',
+  zh: 'zh-Hans'
 }
 
 const internalToBrowserLocale = code => specialLanguageCodes[code] || code
@@ -14,16 +14,16 @@ const internalToBackendLocale = code => internalToBrowserLocale(code).replace('_
 
 const getLanguageName = (code) => {
   const specialLanguageNames = {
-    'ja_easy': 'やさしいにほんご',
-    'zh': '简体中文',
-    'zh_Hant': '繁體中文'
+    ja_easy: 'やさしいにほんご',
+    zh: '简体中文',
+    zh_Hant: '繁體中文'
   }
   const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
   const browserLocale = internalToBrowserLocale(code)
   return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
 }
 
-const languages = _.map(languagesObject.languages, (code) => ({ code: code, name: getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
+const languages = _.map(languagesObject.languages, (code) => ({ code, name: getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
 
 const localeService = {
   internalToBrowserLocale,
diff --git a/src/services/new_api/password_reset.js b/src/services/new_api/password_reset.js
index 43199625..9f3c27b5 100644
--- a/src/services/new_api/password_reset.js
+++ b/src/services/new_api/password_reset.js
@@ -1,6 +1,6 @@
 import { reduce } from 'lodash'
 
-const MASTODON_PASSWORD_RESET_URL = `/auth/password`
+const MASTODON_PASSWORD_RESET_URL = '/auth/password'
 
 const resetPassword = ({ instance, email }) => {
   const params = { email }
diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
index f83f871e..c0e299e4 100644
--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
@@ -12,20 +12,20 @@ const fetchAndUpdate = ({ store, credentials, older = false, since }) => {
   const timelineData = rootState.statuses.notifications
   const hideMutedPosts = getters.mergedConfig.hideMutedPosts
 
-  args['withMuted'] = !hideMutedPosts
+  args.withMuted = !hideMutedPosts
 
-  args['timeline'] = 'notifications'
+  args.timeline = 'notifications'
   if (older) {
     if (timelineData.minId !== Number.POSITIVE_INFINITY) {
-      args['until'] = timelineData.minId
+      args.until = timelineData.minId
     }
     return fetchNotifications({ store, args, older })
   } else {
     // fetch new notifications
     if (since === undefined && timelineData.maxId !== Number.POSITIVE_INFINITY) {
-      args['since'] = timelineData.maxId
+      args.since = timelineData.maxId
     } else if (since !== null) {
-      args['since'] = since
+      args.since = since
     }
     const result = fetchNotifications({ store, args, older })
 
@@ -38,7 +38,7 @@ const fetchAndUpdate = ({ store, credentials, older = false, since }) => {
     const readNotifsIds = notifications.filter(n => n.seen).map(n => n.id)
     const numUnseenNotifs = notifications.length - readNotifsIds.length
     if (numUnseenNotifs > 0 && readNotifsIds.length > 0) {
-      args['since'] = Math.max(...readNotifsIds)
+      args.since = Math.max(...readNotifsIds)
       fetchNotifications({ store, args, older })
     }
 
diff --git a/src/services/push/push.js b/src/services/push/push.js
index 5836fc26..40d7b0fd 100644
--- a/src/services/push/push.js
+++ b/src/services/push/push.js
@@ -43,7 +43,7 @@ function deleteSubscriptionFromBackEnd (token) {
     method: 'DELETE',
     headers: {
       'Content-Type': 'application/json',
-      'Authorization': `Bearer ${token}`
+      Authorization: `Bearer ${token}`
     }
   }).then((response) => {
     if (!response.ok) throw new Error('Bad status code from server.')
@@ -56,7 +56,7 @@ function sendSubscriptionToBackEnd (subscription, token, notificationVisibility)
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
-      'Authorization': `Bearer ${token}`
+      Authorization: `Bearer ${token}`
     },
     body: JSON.stringify({
       subscription,
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index b619f810..da48f02c 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -39,7 +39,7 @@ import { LAYERS, DEFAULT_OPACITY, SLOT_INHERITANCE } from './pleromafe.js'
 export const CURRENT_VERSION = 3
 
 export const getLayersArray = (layer, data = LAYERS) => {
-  let array = [layer]
+  const array = [layer]
   let parent = data[layer]
   while (parent) {
     array.unshift(parent)
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index 46bba41a..7ba138e0 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -34,20 +34,20 @@ const fetchAndUpdate = ({
   const loggedIn = !!rootState.users.currentUser
 
   if (older) {
-    args['until'] = until || timelineData.minId
+    args.until = until || timelineData.minId
   } else {
     if (since === undefined) {
-      args['since'] = timelineData.maxId
+      args.since = timelineData.maxId
     } else if (since !== null) {
-      args['since'] = since
+      args.since = since
     }
   }
 
-  args['userId'] = userId
-  args['tag'] = tag
-  args['withMuted'] = !hideMutedPosts
+  args.userId = userId
+  args.tag = tag
+  args.withMuted = !hideMutedPosts
   if (loggedIn && ['friends', 'public', 'publicAndExternal'].includes(timeline)) {
-    args['replyVisibility'] = replyVisibility
+    args.replyVisibility = replyVisibility
   }
 
   const numStatusesBeforeFetch = timelineData.statuses.length
@@ -60,7 +60,7 @@ const fetchAndUpdate = ({
 
       const { data: statuses, pagination } = response
       if (!older && statuses.length >= 20 && !timelineData.loading && numStatusesBeforeFetch > 0) {
-        store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
+        store.dispatch('queueFlush', { timeline, id: timelineData.maxId })
       }
       update({ store, statuses, timeline, showImmediately, userId, pagination })
       return { statuses, pagination }
diff --git a/src/services/user_highlighter/user_highlighter.js b/src/services/user_highlighter/user_highlighter.js
index 3b07592e..b5f58040 100644
--- a/src/services/user_highlighter/user_highlighter.js
+++ b/src/services/user_highlighter/user_highlighter.js
@@ -36,7 +36,7 @@ const highlightStyle = (prefs) => {
         'linear-gradient(to right,',
         `${solidColor} ,`,
         `${solidColor} 2px,`,
-        `transparent 6px`
+        'transparent 6px'
       ].join(' '),
       backgroundPosition: '0 0',
       ...customProps
diff --git a/src/sw.js b/src/sw.js
index 9118dd71..70fed44b 100644
--- a/src/sw.js
+++ b/src/sw.js
@@ -57,8 +57,8 @@ self.addEventListener('notificationclick', (event) => {
   event.notification.close()
 
   event.waitUntil(getWindowClients().then((list) => {
-    for (var i = 0; i < list.length; i++) {
-      var client = list[i]
+    for (let i = 0; i < list.length; i++) {
+      const client = list[i]
       if (client.url === '/' && 'focus' in client) { return client.focus() }
     }
 
diff --git a/test/e2e/custom-assertions/elementCount.js b/test/e2e/custom-assertions/elementCount.js
index c0d5fe00..5d5a57b9 100644
--- a/test/e2e/custom-assertions/elementCount.js
+++ b/test/e2e/custom-assertions/elementCount.js
@@ -16,7 +16,7 @@ exports.assertion = function (selector, count) {
     return res.value
   }
   this.command = function (cb) {
-    var self = this
+    const self = this
     return this.api.execute(function (selector) {
       return document.querySelectorAll(selector).length
     }, [selector], function (res) {
diff --git a/test/e2e/nightwatch.conf.js b/test/e2e/nightwatch.conf.js
index 07d974df..4041c698 100644
--- a/test/e2e/nightwatch.conf.js
+++ b/test/e2e/nightwatch.conf.js
@@ -1,45 +1,45 @@
 require('@babel/register')
-var config = require('../../config')
+const config = require('../../config')
 
 // http://nightwatchjs.org/guide#settings-file
 module.exports = {
-  'src_folders': ['test/e2e/specs'],
-  'output_folder': 'test/e2e/reports',
-  'custom_assertions_path': ['test/e2e/custom-assertions'],
+  src_folders: ['test/e2e/specs'],
+  output_folder: 'test/e2e/reports',
+  custom_assertions_path: ['test/e2e/custom-assertions'],
 
-  'selenium': {
-    'start_process': true,
-    'server_path': 'node_modules/selenium-server/lib/runner/selenium-server-standalone-2.53.1.jar',
-    'host': '127.0.0.1',
-    'port': 4444,
-    'cli_args': {
+  selenium: {
+    start_process: true,
+    server_path: 'node_modules/selenium-server/lib/runner/selenium-server-standalone-2.53.1.jar',
+    host: '127.0.0.1',
+    port: 4444,
+    cli_args: {
       'webdriver.chrome.driver': require('chromedriver').path
     }
   },
 
-  'test_settings': {
-    'default': {
-      'selenium_port': 4444,
-      'selenium_host': 'localhost',
-      'silent': true,
-      'globals': {
-        'devServerURL': 'http://localhost:' + (process.env.PORT || config.dev.port)
+  test_settings: {
+    default: {
+      selenium_port: 4444,
+      selenium_host: 'localhost',
+      silent: true,
+      globals: {
+        devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
       }
     },
 
-    'chrome': {
-      'desiredCapabilities': {
-        'browserName': 'chrome',
-        'javascriptEnabled': true,
-        'acceptSslCerts': true
+    chrome: {
+      desiredCapabilities: {
+        browserName: 'chrome',
+        javascriptEnabled: true,
+        acceptSslCerts: true
       }
     },
 
-    'firefox': {
-      'desiredCapabilities': {
-        'browserName': 'firefox',
-        'javascriptEnabled': true,
-        'acceptSslCerts': true
+    firefox: {
+      desiredCapabilities: {
+        browserName: 'firefox',
+        javascriptEnabled: true,
+        acceptSslCerts: true
       }
     }
   }
diff --git a/test/e2e/runner.js b/test/e2e/runner.js
index 2a5c6ef9..57abc2e1 100644
--- a/test/e2e/runner.js
+++ b/test/e2e/runner.js
@@ -1,6 +1,6 @@
 // 1. start the dev server using production config
 process.env.NODE_ENV = 'testing'
-var server = require('../../build/dev-server.js')
+const server = require('../../build/dev-server.js')
 
 // 2. run the nightwatch test suite against it
 // to run in additional browsers:
@@ -9,7 +9,7 @@ var server = require('../../build/dev-server.js')
 // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
 // For more information on Nightwatch's config file, see
 // http://nightwatchjs.org/guide#settings-file
-var opts = process.argv.slice(2)
+let opts = process.argv.slice(2)
 if (opts.indexOf('--config') === -1) {
   opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
 }
@@ -17,8 +17,8 @@ if (opts.indexOf('--env') === -1) {
   opts = opts.concat(['--env', 'chrome'])
 }
 
-var spawn = require('cross-spawn')
-var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
+const spawn = require('cross-spawn')
+const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
 
 runner.on('exit', function (code) {
   server.close()
diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index 45d74f14..8959e009 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -4,14 +4,14 @@
 //   https://github.com/webpack/karma-webpack
 
 // var path = require('path')
-var merge = require('webpack-merge')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
-var baseConfig = require('../../build/webpack.base.conf')
-var utils = require('../../build/utils')
-var webpack = require('webpack')
+const merge = require('webpack-merge')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const baseConfig = require('../../build/webpack.base.conf')
+const utils = require('../../build/utils')
+const webpack = require('webpack')
 // var projectRoot = path.resolve(__dirname, '../../')
 
-var webpackConfig = merge(baseConfig, {
+const webpackConfig = merge(baseConfig, {
   // use inline sourcemap for karma-sourcemap-loader
   module: {
     rules: utils.styleLoaders()
@@ -63,7 +63,7 @@ module.exports = function (config) {
     frameworks: ['mocha', 'sinon-chai'],
     reporters: ['mocha'],
     customLaunchers: {
-      'FirefoxHeadless': {
+      FirefoxHeadless: {
         base: 'Firefox',
         flags: [
           '-headless'
diff --git a/test/unit/specs/components/emoji_input.spec.js b/test/unit/specs/components/emoji_input.spec.js
index 6188308e..752111ef 100644
--- a/test/unit/specs/components/emoji_input.spec.js
+++ b/test/unit/specs/components/emoji_input.spec.js
@@ -29,7 +29,7 @@ const generateInput = (value, padEmoji = true) => {
       modelValue: value
     },
     slots: {
-      'default': () => h('input', '')
+      default: () => h('input', '')
     }
   })
   return wrapper
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index 8a18a08b..616df6a0 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -4,7 +4,7 @@ import RichContent from 'src/components/rich_content/rich_content.jsx'
 const attentions = []
 const global = {
   mocks: {
-    '$store': {
+    $store: {
       state: {},
       getters: {
         mergedConfig: () => ({
diff --git a/test/unit/specs/components/user_profile.spec.js b/test/unit/specs/components/user_profile.spec.js
index 584758f7..0fbab722 100644
--- a/test/unit/specs/components/user_profile.spec.js
+++ b/test/unit/specs/components/user_profile.spec.js
@@ -163,7 +163,7 @@ const localProfileStore = createStore({
       currentUser: {
         credentials: ''
       },
-      usersObject: { 100: localUser, 'testuser': localUser },
+      usersObject: { 100: localUser, testuser: localUser },
       users: [localUser],
       relationships: {}
     }
@@ -175,7 +175,7 @@ describe.skip('UserProfile', () => {
   it('renders external profile', () => {
     const wrapper = mount(UserProfile, {
       global: {
-        plugins: [ externalProfileStore ],
+        plugins: [externalProfileStore],
         mocks: {
           $route: {
             params: { id: 100 },
@@ -192,7 +192,7 @@ describe.skip('UserProfile', () => {
   it('renders local profile', () => {
     const wrapper = mount(UserProfile, {
       global: {
-        plugins: [ localProfileStore ],
+        plugins: [localProfileStore],
         mocks: {
           $route: {
             params: { name: 'testUser' },
diff --git a/test/unit/specs/modules/statuses.spec.js b/test/unit/specs/modules/statuses.spec.js
index b790b231..a8d0e5a3 100644
--- a/test/unit/specs/modules/statuses.spec.js
+++ b/test/unit/specs/modules/statuses.spec.js
@@ -245,7 +245,7 @@ describe('Statuses module', () => {
     it('increments count in existing reaction', () => {
       const state = defaultState()
       const status = makeMockStatus({ id: '1' })
-      status.emoji_reactions = [ { name: '😂', count: 1, accounts: [] } ]
+      status.emoji_reactions = [{ name: '😂', count: 1, accounts: [] }]
 
       mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
       mutations.addOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } })
@@ -269,7 +269,7 @@ describe('Statuses module', () => {
     it('decreases count in existing reaction', () => {
       const state = defaultState()
       const status = makeMockStatus({ id: '1' })
-      status.emoji_reactions = [ { name: '😂', count: 2, accounts: [{ id: 'me' }] } ]
+      status.emoji_reactions = [{ name: '😂', count: 2, accounts: [{ id: 'me' }] }]
 
       mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
       mutations.removeOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } })
diff --git a/test/unit/specs/services/chat_service/chat_service.spec.js b/test/unit/specs/services/chat_service/chat_service.spec.js
index fbbca436..a42269b4 100644
--- a/test/unit/specs/services/chat_service/chat_service.spec.js
+++ b/test/unit/specs/services/chat_service/chat_service.spec.js
@@ -24,23 +24,23 @@ describe('chatService', () => {
   describe('.add', () => {
     it("Doesn't add duplicates", () => {
       const chat = chatService.empty()
-      chatService.add(chat, { messages: [ message1 ] })
-      chatService.add(chat, { messages: [ message1 ] })
+      chatService.add(chat, { messages: [message1] })
+      chatService.add(chat, { messages: [message1] })
       expect(chat.messages.length).to.eql(1)
 
-      chatService.add(chat, { messages: [ message2 ] })
+      chatService.add(chat, { messages: [message2] })
       expect(chat.messages.length).to.eql(2)
     })
 
     it('Updates minId and lastMessage and newMessageCount', () => {
       const chat = chatService.empty()
 
-      chatService.add(chat, { messages: [ message1 ] })
+      chatService.add(chat, { messages: [message1] })
       expect(chat.maxId).to.eql(message1.id)
       expect(chat.minId).to.eql(message1.id)
       expect(chat.newMessageCount).to.eql(1)
 
-      chatService.add(chat, { messages: [ message2 ] })
+      chatService.add(chat, { messages: [message2] })
       expect(chat.maxId).to.eql(message2.id)
       expect(chat.minId).to.eql(message1.id)
       expect(chat.newMessageCount).to.eql(2)
@@ -50,7 +50,7 @@ describe('chatService', () => {
       expect(chat.lastSeenMessageId).to.eql(message2.id)
 
       // Add message with higher id
-      chatService.add(chat, { messages: [ message3 ] })
+      chatService.add(chat, { messages: [message3] })
       expect(chat.newMessageCount).to.eql(1)
     })
   })
@@ -59,9 +59,9 @@ describe('chatService', () => {
     it('Updates minId and lastMessage', () => {
       const chat = chatService.empty()
 
-      chatService.add(chat, { messages: [ message1 ] })
-      chatService.add(chat, { messages: [ message2 ] })
-      chatService.add(chat, { messages: [ message3 ] })
+      chatService.add(chat, { messages: [message1] })
+      chatService.add(chat, { messages: [message2] })
+      chatService.add(chat, { messages: [message3] })
 
       expect(chat.maxId).to.eql(message3.id)
       expect(chat.minId).to.eql(message1.id)
@@ -80,9 +80,9 @@ describe('chatService', () => {
     it('Inserts date separators', () => {
       const chat = chatService.empty()
 
-      chatService.add(chat, { messages: [ message1 ] })
-      chatService.add(chat, { messages: [ message2 ] })
-      chatService.add(chat, { messages: [ message3 ] })
+      chatService.add(chat, { messages: [message1] })
+      chatService.add(chat, { messages: [message2] })
+      chatService.add(chat, { messages: [message3] })
 
       const view = chatService.getView(chat)
       expect(view.map(i => i.type)).to.eql(['date', 'message', 'message', 'date', 'message'])
diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
index 03fb32c9..525e57a5 100644
--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
@@ -314,8 +314,8 @@ describe('API Entities normalizer', () => {
       const linkHeader = '<https://example.com/api/v1/notifications?max_id=861676>; rel="next", <https://example.com/api/v1/notifications?min_id=861741>; rel="prev"'
       const result = parseLinkHeaderPagination(linkHeader)
       expect(result).to.eql({
-        'maxId': 861676,
-        'minId': 861741
+        maxId: 861676,
+        minId: 861741
       })
     })
 
@@ -323,8 +323,8 @@ describe('API Entities normalizer', () => {
       const linkHeader = '<http://example.com/api/v1/timelines/home?max_id=9waQx5IIS48qVue2Ai>; rel="next", <http://example.com/api/v1/timelines/home?min_id=9wi61nIPnfn674xgie>; rel="prev"'
       const result = parseLinkHeaderPagination(linkHeader, { flakeId: true })
       expect(result).to.eql({
-        'maxId': '9waQx5IIS48qVue2Ai',
-        'minId': '9wi61nIPnfn674xgie'
+        maxId: '9waQx5IIS48qVue2Ai',
+        minId: '9wi61nIPnfn674xgie'
       })
     })
   })
diff --git a/test/unit/specs/services/file_size_format/file_size_format.spec.js b/test/unit/specs/services/file_size_format/file_size_format.spec.js
index e02ac379..6804b6eb 100644
--- a/test/unit/specs/services/file_size_format/file_size_format.spec.js
+++ b/test/unit/specs/services/file_size_format/file_size_format.spec.js
@@ -25,8 +25,8 @@ describe('fileSizeFormat', () => {
       }
     ]
 
-    var res = []
-    for (var value in values) {
+    const res = []
+    for (const value in values) {
       res.push(fileSizeFormatService.fileSizeFormat(values[value]))
     }
     expect(res).to.eql(expected)
-- 
cgit v1.2.3-70-g09d2


From 69b3102fb2396edb63abe98b4a69ebe311e22a70 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 14 Aug 2021 21:10:24 -0400
Subject: Group custom emojis by pack in emoji picker

---
 src/components/emoji_picker/emoji_picker.js   | 29 ++++++++++++++++++++-------
 src/components/emoji_picker/emoji_picker.scss | 13 ++++++++++++
 src/components/emoji_picker/emoji_picker.vue  | 10 +++++++++
 3 files changed, 45 insertions(+), 7 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index f6920208..9e398176 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -183,17 +183,32 @@ const EmojiPicker = {
     customEmojiBuffer () {
       return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
     },
+    groupedCustomEmojis () {
+      const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5)
+      return this.customEmojiBuffer.reduce((res, emoji) => {
+        const pack = packOf(emoji)
+        if (!res[pack]) {
+          res[pack] = {
+            id: `custom-${pack}`,
+            text: pack,
+            /// FIXME
+            // icon: 'smile-beam',
+            image: emoji.imageUrl,
+            emojis: []
+          }
+        }
+        res[pack].emojis.push(emoji)
+        return res
+      }, {})
+    },
     emojis () {
       const standardEmojis = this.$store.state.instance.emoji || []
-      const customEmojis = this.customEmojiBuffer
+      // const customEmojis = this.customEmojiBuffer
 
       return [
-        {
-          id: 'custom',
-          text: this.$t('emoji.custom'),
-          icon: 'smile-beam',
-          emojis: customEmojis
-        },
+        ...Object
+          .keys(this.groupedCustomEmojis)
+          .map(k => this.groupedCustomEmojis[k]),
         {
           id: 'standard',
           text: this.$t('emoji.unicode'),
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index a2f17c51..ccb12a2a 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -19,6 +19,19 @@
   --lightText: var(--popoverLightText, $fallback--lightText);
   --icon: var(--popoverIcon, $fallback--icon);
 
+  &-header-image {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 30px;
+    height: 24px;
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+    }
+  }
+
   .keep-open,
   .too-many-emoji {
     padding: 7px;
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index a7269120..16549c08 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -13,7 +13,17 @@
           :title="group.text"
           @click.prevent="highlight(group.id)"
         >
+          <span
+            v-if="group.image"
+            class="emoji-picker-header-image"
+          >
+            <img
+              :alt="group.text"
+              :src="group.image"
+            >
+          </span>
           <FAIcon
+            v-else
             :icon="group.icon"
             fixed-width
           />
-- 
cgit v1.2.3-70-g09d2


From ff2242e85dc89aa7479000cf469ca2bce5d60157 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 14 Aug 2021 21:23:45 -0400
Subject: Fix load more emoji action

---
 src/components/emoji_picker/emoji_picker.js |  5 ++++-
 src/modules/instance.js                     | 12 +++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 9e398176..7d5a3d8f 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -98,7 +98,7 @@ const EmojiPicker = {
       }
     },
     triggerLoadMore (target) {
-      const ref = this.$refs['group-end-custom']
+      const ref = this.$refs[`group-end-${this.lastNonUnicodeGroupId}`][0]
       if (!ref) return
       const bottom = ref.offsetTop + ref.offsetHeight
 
@@ -217,6 +217,9 @@ const EmojiPicker = {
         }
       ]
     },
+    lastNonUnicodeGroupId () {
+      return this.emojis[this.emojis.length - 2].id
+    },
     emojisView () {
       return this.emojis.filter(value => value.emojis.length > 0)
     },
diff --git a/src/modules/instance.js b/src/modules/instance.js
index bfce6f38..23f534c3 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -164,6 +164,16 @@ const instance = {
         if (res.ok) {
           const result = await res.json()
           const values = Array.isArray(result) ? Object.assign({}, ...result) : result
+          const caseInsensitiveStrCmp = (a, b) => {
+            const la = a.toLowerCase()
+            const lb = b.toLowerCase()
+            return la > lb ? 1 : (la < lb ? -1 : 0)
+          }
+          const byPackThenByName = (a, b) => {
+            const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5)
+            return caseInsensitiveStrCmp(packOf(a), packOf(b)) || caseInsensitiveStrCmp(a.displayText, b.displayText)
+          }
+
           const emoji = Object.entries(values).map(([key, value]) => {
             const imageUrl = value.image_url
             return {
@@ -174,7 +184,7 @@ const instance = {
             }
             // Technically could use tags but those are kinda useless right now,
             // should have been "pack" field, that would be more useful
-          }).sort((a, b) => a.displayText.toLowerCase() > b.displayText.toLowerCase() ? 1 : -1)
+          }).sort(byPackThenByName)
           commit('setInstanceOption', { name: 'customEmoji', value: emoji })
         } else {
           throw (res)
-- 
cgit v1.2.3-70-g09d2


From 992d57ef69540f4c63939fbc5abed9b1ea28ed2f Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 14 Aug 2021 21:50:58 -0400
Subject: Display all emoji groups on emoji picker header

---
 src/components/emoji_picker/emoji_picker.js   | 28 +++++++++++++++++++++++++--
 src/components/emoji_picker/emoji_picker.scss |  6 +++++-
 src/components/emoji_picker/emoji_picker.vue  |  4 ++--
 3 files changed, 33 insertions(+), 5 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 7d5a3d8f..d04649dc 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -38,6 +38,8 @@ const filterByKeyword = (list, keyword = '') => {
   return orderedEmojiList.flat()
 }
 
+const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5)
+
 const EmojiPicker = {
   props: {
     enableStickerPicker: {
@@ -174,9 +176,12 @@ const EmojiPicker = {
       }
       return 0
     },
+    allEmojis () {
+      return this.$store.state.instance.customEmoji || []
+    },
     filteredEmoji () {
       return filterByKeyword(
-        this.$store.state.instance.customEmoji || [],
+        this.allEmojis,
         trim(this.keyword)
       )
     },
@@ -184,7 +189,6 @@ const EmojiPicker = {
       return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
     },
     groupedCustomEmojis () {
-      const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5)
       return this.customEmojiBuffer.reduce((res, emoji) => {
         const pack = packOf(emoji)
         if (!res[pack]) {
@@ -201,6 +205,26 @@ const EmojiPicker = {
         return res
       }, {})
     },
+    allEmojiGroups () {
+      return this.allEmojis
+        .reduce((res, emoji) => {
+          const packName = packOf(emoji)
+          const packId = `custom-${packName}`
+          if (res.filter(k => k.id === packId).length === 0) {
+            res.push({
+              id: packId,
+              text: packName,
+              image: emoji.imageUrl
+            })
+          }
+          return res
+        }, [])
+        .concat({
+          id: 'standard',
+          text: this.$t('emoji.unicode'),
+          icon: 'box-open'
+        })
+    },
     emojis () {
       const standardEmojis = this.$store.state.instance.emoji || []
       // const customEmojis = this.customEmojiBuffer
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index ccb12a2a..0bd4363c 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -52,6 +52,7 @@
     display: flex;
     height: 32px;
     padding: 10px 7px 5px;
+    overflow-x: auto;
   }
 
   .content {
@@ -63,6 +64,9 @@
 
   .emoji-tabs {
     flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
   }
 
   .emoji-groups {
@@ -70,6 +74,7 @@
   }
 
   .additional-tabs {
+    display: block;
     border-left: 1px solid;
     border-left-color: $fallback--icon;
     border-left-color: var(--icon, $fallback--icon);
@@ -79,7 +84,6 @@
 
   .additional-tabs,
   .emoji-tabs {
-    display: block;
     min-width: 0;
     flex-basis: auto;
     flex-shrink: 1;
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 16549c08..fe60cb5e 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -3,12 +3,12 @@
     <div class="heading">
       <span class="emoji-tabs">
         <span
-          v-for="group in emojis"
+          v-for="group in allEmojiGroups"
           :key="group.id"
           class="emoji-tabs-item"
           :class="{
             active: activeGroupView === group.id,
-            disabled: group.emojis.length === 0
+            disabled: false
           }"
           :title="group.text"
           @click.prevent="highlight(group.id)"
-- 
cgit v1.2.3-70-g09d2


From ba1b006e05ef50c7e85f88c3dbd4eefc66d05806 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 14 Aug 2021 23:37:00 -0400
Subject: Load visible emoji groups when scrolling

---
 src/components/emoji_picker/emoji_picker.js  | 101 +++++++++++++++++++--------
 src/components/emoji_picker/emoji_picker.vue |   4 +-
 2 files changed, 75 insertions(+), 30 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index d04649dc..cab952f8 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -57,7 +57,8 @@ const EmojiPicker = {
       keepOpen: false,
       customEmojiBufferSlice: LOAD_EMOJI_BY,
       customEmojiTimeout: null,
-      customEmojiLoadAllConfirmed: false
+      customEmojiLoadAllConfirmed: false,
+      groupLoadedCount: {}
     }
   },
   components: {
@@ -79,7 +80,9 @@ const EmojiPicker = {
       const target = (e && e.target) || this.$refs['emoji-groups']
       this.updateScrolledClass(target)
       this.scrolledGroup(target)
-      this.triggerLoadMore(target)
+      this.$nextTick(() => {
+        this.triggerLoadMore(target)
+      })
     },
     highlight (key) {
       const ref = this.$refs['group-' + key]
@@ -88,6 +91,7 @@ const EmojiPicker = {
       this.activeGroup = key
       this.$nextTick(() => {
         this.$refs['emoji-groups'].scrollTop = top + 1
+        this.loadEmoji(key)
       })
     },
     updateScrolledClass (target) {
@@ -100,28 +104,40 @@ const EmojiPicker = {
       }
     },
     triggerLoadMore (target) {
-      const ref = this.$refs[`group-end-${this.lastNonUnicodeGroupId}`][0]
-      if (!ref) return
-      const bottom = ref.offsetTop + ref.offsetHeight
+      Object.keys(this.allCustomGroups)
+        .map(groupId => {
+          const ref = this.$refs[`group-end-${groupId}`][0]
+          if (!ref) return undefined
 
-      const scrollerBottom = target.scrollTop + target.clientHeight
-      const scrollerTop = target.scrollTop
-      const scrollerMax = target.scrollHeight
+          const bottom = ref.offsetTop + ref.offsetHeight
 
-      // Loads more emoji when they come into view
-      const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
-      // Always load when at the very top in case there's no scroll space yet
-      const atTop = scrollerTop < 5
-      // Don't load when looking at unicode category or at the very bottom
-      const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
-      if (!bottomAboveViewport && (approachingBottom || atTop)) {
-        this.loadEmoji()
-      }
+          const group = this.$refs[`group-${groupId}`][0]
+          const top = group.offsetTop
+
+          const scrollerBottom = target.scrollTop + target.clientHeight
+          const scrollerTop = target.scrollTop
+          const scrollerMax = target.scrollHeight
+
+          // Loads more emoji when they come into view
+          const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
+          // Always load when at the very top in case there's no scroll space yet
+          const atTop = scrollerTop < top + target.clientHeight / 2 && top < scrollerBottom
+          // Don't load when looking at unicode category or at the very bottom
+          const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
+          if (!bottomAboveViewport && (approachingBottom || atTop)) {
+            return groupId
+          }
+          return undefined
+        })
+        .filter(k => k)
+        .map(k => {
+          this.loadEmoji(k)
+        })
     },
     scrolledGroup (target) {
       const top = target.scrollTop + 5
       this.$nextTick(() => {
-        this.emojisView.forEach(group => {
+        this.allEmojiGroups.forEach(group => {
           const ref = this.$refs['group-' + group.id]
           if (ref.offsetTop <= top) {
             this.activeGroup = group.id
@@ -129,14 +145,21 @@ const EmojiPicker = {
         })
       })
     },
-    loadEmoji () {
-      const allLoaded = this.customEmojiBuffer.length === this.filteredEmoji.length
+    loadEmoji (loadGroup) {
+      if (!this.allCustomGroups[loadGroup]) {
+        return
+      }
+
+      const allLoaded = this.loadedCount[loadGroup] >= this.allCustomGroups[loadGroup].emojis.length
 
       if (allLoaded) {
         return
       }
 
-      this.customEmojiBufferSlice += LOAD_EMOJI_BY
+      this.groupLoadedCount = {
+        ...this.groupLoadedCount,
+        [loadGroup]: this.loadedCount[loadGroup] + LOAD_EMOJI_BY
+      }
     },
     startEmojiLoad (forceUpdate = false) {
       if (!forceUpdate) {
@@ -157,6 +180,9 @@ const EmojiPicker = {
     },
     setShowStickers (value) {
       this.showingStickers = value
+    },
+    limitedEmojis (list, groupId) {
+      return list.slice(0, this.loadedCount[groupId])
     }
   },
   watch: {
@@ -205,24 +231,36 @@ const EmojiPicker = {
         return res
       }, {})
     },
-    allEmojiGroups () {
-      return this.allEmojis
+    allCustomGroups () {
+      return this.filteredEmoji
         .reduce((res, emoji) => {
           const packName = packOf(emoji)
           const packId = `custom-${packName}`
-          if (res.filter(k => k.id === packId).length === 0) {
-            res.push({
+          if (!res[packId]) {
+            res[packId] = ({
               id: packId,
               text: packName,
-              image: emoji.imageUrl
+              image: emoji.imageUrl,
+              emojis: []
             })
           }
+          res[packId].emojis.push(emoji)
           return res
-        }, [])
+        }, {})
+    },
+    sensibleInitialAmountForAGroup () {
+      const groupCount = Object.keys(this.allCustomGroups).length
+      return Math.max(Math.floor(LOAD_EMOJI_BY / Math.max(groupCount, 1)), 1)
+    },
+    allEmojiGroups () {
+      const standardEmojis = this.$store.state.instance.emoji || []
+      return Object.entries(this.allCustomGroups)
+        .map(([_, v]) => v)
         .concat({
           id: 'standard',
           text: this.$t('emoji.unicode'),
-          icon: 'box-open'
+          icon: 'box-open',
+          emojis: filterByKeyword(standardEmojis, this.keyword)
         })
     },
     emojis () {
@@ -241,6 +279,13 @@ const EmojiPicker = {
         }
       ]
     },
+    loadedCount () {
+      return Object.keys(this.allCustomGroups)
+        .reduce((res, groupId) => {
+          res[groupId] = this.groupLoadedCount[groupId] || this.sensibleInitialAmountForAGroup
+          return res
+        }, {})
+    },
     lastNonUnicodeGroupId () {
       return this.emojis[this.emojis.length - 2].id
     },
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index fe60cb5e..277d5bf6 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -67,7 +67,7 @@
           @scroll="onScroll"
         >
           <div
-            v-for="group in emojisView"
+            v-for="group in allEmojiGroups"
             :key="group.id"
             class="emoji-group"
           >
@@ -78,7 +78,7 @@
               {{ group.text }}
             </h6>
             <span
-              v-for="emoji in group.emojis"
+              v-for="emoji in limitedEmojis(group.emojis, group.id)"
               :key="group.id + emoji.displayText"
               :title="emoji.displayText"
               class="emoji-item"
-- 
cgit v1.2.3-70-g09d2


From 99a368dbb3359c7aeb8aa8fc328c39fc913304d3 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 15 Aug 2021 00:03:31 -0400
Subject: Load emoji properly on first showing

---
 src/components/emoji_picker/emoji_picker.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index cab952f8..322bb8ba 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -58,7 +58,8 @@ const EmojiPicker = {
       customEmojiBufferSlice: LOAD_EMOJI_BY,
       customEmojiTimeout: null,
       customEmojiLoadAllConfirmed: false,
-      groupLoadedCount: {}
+      groupLoadedCount: {},
+      firstLoaded: false
     }
   },
   components: {
@@ -167,6 +168,13 @@ const EmojiPicker = {
       }
       this.$nextTick(() => {
         this.$refs['emoji-groups'].scrollTop = 0
+        this.$nextTick(() => {
+          if (this.firstLoaded) {
+            return
+          }
+          this.triggerLoadMore(this.$refs['emoji-groups'])
+          this.firstLoaded = true
+        })
       })
       const bufferSize = this.customEmojiBuffer.length
       const bufferPrefilledAll = bufferSize === this.filteredEmoji.length
-- 
cgit v1.2.3-70-g09d2


From 123913f34ffd91917a9ed4dd1c9d406fb547ef87 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 15 Aug 2021 00:43:35 -0400
Subject: Optimise emoji picker loading process

---
 src/components/emoji_picker/emoji_picker.js  | 83 +++++-----------------------
 src/components/emoji_picker/emoji_picker.vue |  4 +-
 src/modules/instance.js                      | 18 ++++++
 3 files changed, 34 insertions(+), 71 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 322bb8ba..67c6d0cc 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -106,6 +106,7 @@ const EmojiPicker = {
     },
     triggerLoadMore (target) {
       Object.keys(this.allCustomGroups)
+        .filter(id => this.filteredEmojiGroups.filter(group => group.id === id).length > 0)
         .map(groupId => {
           const ref = this.$refs[`group-end-${groupId}`][0]
           if (!ref) return undefined
@@ -123,9 +124,10 @@ const EmojiPicker = {
           const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
           // Always load when at the very top in case there's no scroll space yet
           const atTop = scrollerTop < top + target.clientHeight / 2 && top < scrollerBottom
+          const unscrollable = top - bottom < target.clientHeight
           // Don't load when looking at unicode category or at the very bottom
           const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
-          if (!bottomAboveViewport && (approachingBottom || atTop)) {
+          if (!bottomAboveViewport && (approachingBottom || atTop || unscrollable)) {
             return groupId
           }
           return undefined
@@ -176,12 +178,6 @@ const EmojiPicker = {
           this.firstLoaded = true
         })
       })
-      const bufferSize = this.customEmojiBuffer.length
-      const bufferPrefilledAll = bufferSize === this.filteredEmoji.length
-      if (bufferPrefilledAll && !forceUpdate) {
-        return
-      }
-      this.customEmojiBufferSlice = LOAD_EMOJI_BY
     },
     toggleStickers () {
       this.showingStickers = !this.showingStickers
@@ -191,6 +187,9 @@ const EmojiPicker = {
     },
     limitedEmojis (list, groupId) {
       return list.slice(0, this.loadedCount[groupId])
+    },
+    filterByKeyword (list, keyword) {
+      return filterByKeyword(list, keyword)
     }
   },
   watch: {
@@ -210,51 +209,8 @@ const EmojiPicker = {
       }
       return 0
     },
-    allEmojis () {
-      return this.$store.state.instance.customEmoji || []
-    },
-    filteredEmoji () {
-      return filterByKeyword(
-        this.allEmojis,
-        trim(this.keyword)
-      )
-    },
-    customEmojiBuffer () {
-      return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
-    },
-    groupedCustomEmojis () {
-      return this.customEmojiBuffer.reduce((res, emoji) => {
-        const pack = packOf(emoji)
-        if (!res[pack]) {
-          res[pack] = {
-            id: `custom-${pack}`,
-            text: pack,
-            /// FIXME
-            // icon: 'smile-beam',
-            image: emoji.imageUrl,
-            emojis: []
-          }
-        }
-        res[pack].emojis.push(emoji)
-        return res
-      }, {})
-    },
     allCustomGroups () {
-      return this.filteredEmoji
-        .reduce((res, emoji) => {
-          const packName = packOf(emoji)
-          const packId = `custom-${packName}`
-          if (!res[packId]) {
-            res[packId] = ({
-              id: packId,
-              text: packName,
-              image: emoji.imageUrl,
-              emojis: []
-            })
-          }
-          res[packId].emojis.push(emoji)
-          return res
-        }, {})
+      return this.$store.getters.groupedCustomEmojis
     },
     sensibleInitialAmountForAGroup () {
       const groupCount = Object.keys(this.allCustomGroups).length
@@ -271,21 +227,13 @@ const EmojiPicker = {
           emojis: filterByKeyword(standardEmojis, this.keyword)
         })
     },
-    emojis () {
-      const standardEmojis = this.$store.state.instance.emoji || []
-      // const customEmojis = this.customEmojiBuffer
-
-      return [
-        ...Object
-          .keys(this.groupedCustomEmojis)
-          .map(k => this.groupedCustomEmojis[k]),
-        {
-          id: 'standard',
-          text: this.$t('emoji.unicode'),
-          icon: 'box-open',
-          emojis: filterByKeyword(standardEmojis, trim(this.keyword))
-        }
-      ]
+    filteredEmojiGroups () {
+      return this.allEmojiGroups
+        .map(group => ({
+          ...group,
+          emojis: filterByKeyword(group.emojis, this.keyword)
+        }))
+        .filter(group => group.emojis.length > 0)
     },
     loadedCount () {
       return Object.keys(this.allCustomGroups)
@@ -297,9 +245,6 @@ const EmojiPicker = {
     lastNonUnicodeGroupId () {
       return this.emojis[this.emojis.length - 2].id
     },
-    emojisView () {
-      return this.emojis.filter(value => value.emojis.length > 0)
-    },
     stickerPickerEnabled () {
       return (this.$store.state.instance.stickers || []).length !== 0
     }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 277d5bf6..7b2b7fc8 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -3,7 +3,7 @@
     <div class="heading">
       <span class="emoji-tabs">
         <span
-          v-for="group in allEmojiGroups"
+          v-for="group in filteredEmojiGroups"
           :key="group.id"
           class="emoji-tabs-item"
           :class="{
@@ -67,7 +67,7 @@
           @scroll="onScroll"
         >
           <div
-            v-for="group in allEmojiGroups"
+            v-for="group in filteredEmojiGroups"
             :key="group.id"
             class="emoji-group"
           >
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 23f534c3..8aadce77 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -115,6 +115,24 @@ const instance = {
         .map(key => [key, state[key]])
         .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
     },
+    groupedCustomEmojis (state) {
+      return state.customEmoji
+        .reduce((res, emoji) => {
+          emoji.tags.forEach(packName => {
+            const packId = `custom-${packName}`
+            if (!res[packId]) {
+              res[packId] = ({
+                id: packId,
+                text: packName,
+                image: emoji.imageUrl,
+                emojis: []
+              })
+            }
+            res[packId].emojis.push(emoji)
+          })
+          return res
+        }, {})
+    },
     instanceDomain (state) {
       return new URL(state.server).hostname
     }
-- 
cgit v1.2.3-70-g09d2


From 90f757cc6d9e1e29c2567979d3c27765f84cdc6c Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 15 Aug 2021 00:53:57 -0400
Subject: Lint

---
 src/components/emoji_picker/emoji_picker.js | 2 --
 1 file changed, 2 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 67c6d0cc..8e11f83f 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -38,8 +38,6 @@ const filterByKeyword = (list, keyword = '') => {
   return orderedEmojiList.flat()
 }
 
-const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5)
-
 const EmojiPicker = {
   props: {
     enableStickerPicker: {
-- 
cgit v1.2.3-70-g09d2


From c70cdbb873eb77bc1aaf7edb9defdda59bdba1e1 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Thu, 7 Oct 2021 23:23:58 -0400
Subject: Use lozad for lazy image loading

Ref: grouped-emoji-picker
---
 package.json                                 |  1 +
 src/components/emoji_picker/emoji_picker.js  |  6 +++++-
 src/components/emoji_picker/emoji_picker.vue |  3 ++-
 src/directives/lazy_image_container.js       | 13 +++++++++++++
 yarn.lock                                    |  5 +++++
 5 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 src/directives/lazy_image_container.js

(limited to 'src/components/emoji_picker')

diff --git a/package.json b/package.json
index 50a6b55f..06fb4916 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "js-cookie": "3.0.1",
     "localforage": "1.10.0",
     "parse-link-header": "2.0.0",
+    "lozad": "^1.16.0",
     "phoenix": "1.6.2",
     "punycode.js": "2.1.0",
     "qrcode": "1.5.0",
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 8e11f83f..82e5ad0b 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,5 +1,6 @@
 import { defineAsyncComponent } from 'vue'
 import Checkbox from '../checkbox/checkbox.vue'
+import LazyImageContainer from '../../directives/lazy_image_container'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBoxOpen,
@@ -64,6 +65,9 @@ const EmojiPicker = {
     StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
     Checkbox
   },
+  directives: {
+    LazyImageContainer
+  },
   methods: {
     onStickerUploaded (e) {
       this.$emit('sticker-uploaded', e)
@@ -184,7 +188,7 @@ const EmojiPicker = {
       this.showingStickers = value
     },
     limitedEmojis (list, groupId) {
-      return list.slice(0, this.loadedCount[groupId])
+      return list // list.slice(0, this.loadedCount[groupId])
     },
     filterByKeyword (list, keyword) {
       return filterByKeyword(list, keyword)
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 7b2b7fc8..0e6c7e41 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -62,6 +62,7 @@
         </div>
         <div
           ref="emoji-groups"
+          v-lazy-image-container
           class="emoji-groups"
           :class="groupsScrolledClass"
           @scroll="onScroll"
@@ -87,7 +88,7 @@
               <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
               <img
                 v-else
-                :src="emoji.imageUrl"
+                :data-src="emoji.imageUrl"
               >
             </span>
             <span :ref="'group-end-' + group.id" />
diff --git a/src/directives/lazy_image_container.js b/src/directives/lazy_image_container.js
new file mode 100644
index 00000000..44adc828
--- /dev/null
+++ b/src/directives/lazy_image_container.js
@@ -0,0 +1,13 @@
+
+import lozad from 'lozad'
+
+const LazyImageContainer = {
+  inserted (el) {
+    const images = el.querySelectorAll('img')
+    console.log(images.length)
+    el.$observer = lozad(images)
+    el.$observer.observe()
+  }
+}
+
+export default LazyImageContainer
diff --git a/yarn.lock b/yarn.lock
index 2fefe76f..041fc1dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5733,6 +5733,11 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
+lozad@^1.16.0:
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/lozad/-/lozad-1.16.0.tgz#86ce732c64c69926ccdebb81c8c90bb3735948b4"
+  integrity sha512-JBr9WjvEFeKoyim3svo/gsQPTkgG/mOHJmDctZ/+U9H3ymUuvEkqpn8bdQMFsvTMcyRJrdJkLv0bXqGm0sP72w==
+
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
-- 
cgit v1.2.3-70-g09d2


From 8777b6eadd7deadf010dc36bb90514f75fc0da16 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 01:02:16 -0400
Subject: Clean up legacy code in emoji picker

Ref: grouped-emoji-picker
---
 src/components/emoji_input/emoji_input.js    |   1 -
 src/components/emoji_picker/emoji_picker.js  | 130 ++++++---------------------
 src/components/emoji_picker/emoji_picker.vue |   3 +-
 src/directives/lazy_image_container.js       |  13 ---
 4 files changed, 28 insertions(+), 119 deletions(-)
 delete mode 100644 src/directives/lazy_image_container.js

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index b664d6b3..fb2096c9 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -207,7 +207,6 @@ const EmojiInput = {
     },
     triggerShowPicker () {
       this.showPicker = true
-      this.$refs.picker.startEmojiLoad()
       this.$nextTick(() => {
         this.scrollIntoView()
         this.focusPickerInput()
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 82e5ad0b..b0162479 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,6 +1,6 @@
 import { defineAsyncComponent } from 'vue'
 import Checkbox from '../checkbox/checkbox.vue'
-import LazyImageContainer from '../../directives/lazy_image_container'
+import lozad from 'lozad'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBoxOpen,
@@ -54,7 +54,6 @@ const EmojiPicker = {
       showingStickers: false,
       groupsScrolledClass: 'scrolled-top',
       keepOpen: false,
-      customEmojiBufferSlice: LOAD_EMOJI_BY,
       customEmojiTimeout: null,
       customEmojiLoadAllConfirmed: false,
       groupLoadedCount: {},
@@ -65,9 +64,6 @@ const EmojiPicker = {
     StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
     Checkbox
   },
-  directives: {
-    LazyImageContainer
-  },
   methods: {
     onStickerUploaded (e) {
       this.$emit('sticker-uploaded', e)
@@ -82,10 +78,6 @@ const EmojiPicker = {
     onScroll (e) {
       const target = (e && e.target) || this.$refs['emoji-groups']
       this.updateScrolledClass(target)
-      this.scrolledGroup(target)
-      this.$nextTick(() => {
-        this.triggerLoadMore(target)
-      })
     },
     highlight (key) {
       const ref = this.$refs['group-' + key]
@@ -94,7 +86,6 @@ const EmojiPicker = {
       this.activeGroup = key
       this.$nextTick(() => {
         this.$refs['emoji-groups'].scrollTop = top + 1
-        this.loadEmoji(key)
       })
     },
     updateScrolledClass (target) {
@@ -106,101 +97,48 @@ const EmojiPicker = {
         this.groupsScrolledClass = 'scrolled-middle'
       }
     },
-    triggerLoadMore (target) {
-      Object.keys(this.allCustomGroups)
-        .filter(id => this.filteredEmojiGroups.filter(group => group.id === id).length > 0)
-        .map(groupId => {
-          const ref = this.$refs[`group-end-${groupId}`][0]
-          if (!ref) return undefined
-
-          const bottom = ref.offsetTop + ref.offsetHeight
-
-          const group = this.$refs[`group-${groupId}`][0]
-          const top = group.offsetTop
-
-          const scrollerBottom = target.scrollTop + target.clientHeight
-          const scrollerTop = target.scrollTop
-          const scrollerMax = target.scrollHeight
-
-          // Loads more emoji when they come into view
-          const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
-          // Always load when at the very top in case there's no scroll space yet
-          const atTop = scrollerTop < top + target.clientHeight / 2 && top < scrollerBottom
-          const unscrollable = top - bottom < target.clientHeight
-          // Don't load when looking at unicode category or at the very bottom
-          const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
-          if (!bottomAboveViewport && (approachingBottom || atTop || unscrollable)) {
-            return groupId
-          }
-          return undefined
-        })
-        .filter(k => k)
-        .map(k => {
-          this.loadEmoji(k)
-        })
-    },
-    scrolledGroup (target) {
-      const top = target.scrollTop + 5
-      this.$nextTick(() => {
-        this.allEmojiGroups.forEach(group => {
-          const ref = this.$refs['group-' + group.id]
-          if (ref.offsetTop <= top) {
-            this.activeGroup = group.id
-          }
-        })
-      })
-    },
-    loadEmoji (loadGroup) {
-      if (!this.allCustomGroups[loadGroup]) {
-        return
-      }
-
-      const allLoaded = this.loadedCount[loadGroup] >= this.allCustomGroups[loadGroup].emojis.length
-
-      if (allLoaded) {
-        return
-      }
-
-      this.groupLoadedCount = {
-        ...this.groupLoadedCount,
-        [loadGroup]: this.loadedCount[loadGroup] + LOAD_EMOJI_BY
-      }
-    },
-    startEmojiLoad (forceUpdate = false) {
-      if (!forceUpdate) {
-        this.keyword = ''
-      }
-      this.$nextTick(() => {
-        this.$refs['emoji-groups'].scrollTop = 0
-        this.$nextTick(() => {
-          if (this.firstLoaded) {
-            return
-          }
-          this.triggerLoadMore(this.$refs['emoji-groups'])
-          this.firstLoaded = true
-        })
-      })
-    },
     toggleStickers () {
       this.showingStickers = !this.showingStickers
     },
     setShowStickers (value) {
       this.showingStickers = value
     },
-    limitedEmojis (list, groupId) {
-      return list // list.slice(0, this.loadedCount[groupId])
-    },
     filterByKeyword (list, keyword) {
       return filterByKeyword(list, keyword)
+    },
+    initializeLazyLoad () {
+      this.destroyLazyLoad()
+      this.$lozad = lozad('img', {})
+      this.$lozad.observe()
+    },
+    destroyLazyLoad () {
+      if (this.$lozad) {
+        if (this.$lozad.observer) {
+          this.$lozad.observer.disconnect()
+        }
+        if (this.$lozad.mutationObserver) {
+          this.$lozad.mutationObserver.disconnect()
+        }
+      }
     }
   },
   watch: {
     keyword () {
       this.customEmojiLoadAllConfirmed = false
       this.onScroll()
-      this.startEmojiLoad(true)
+      // Wait for the dom to change
+      this.$nextTick(() => this.initializeLazyLoad())
+    },
+    allCustomGroups () {
+      this.$nextTick(() => this.initializeLazyLoad())
     }
   },
+  mounted () {
+    this.initializeLazyLoad()
+  },
+  destroyed () {
+    this.destroyLazyLoad()
+  },
   computed: {
     activeGroupView () {
       return this.showingStickers ? '' : this.activeGroup
@@ -214,10 +152,6 @@ const EmojiPicker = {
     allCustomGroups () {
       return this.$store.getters.groupedCustomEmojis
     },
-    sensibleInitialAmountForAGroup () {
-      const groupCount = Object.keys(this.allCustomGroups).length
-      return Math.max(Math.floor(LOAD_EMOJI_BY / Math.max(groupCount, 1)), 1)
-    },
     allEmojiGroups () {
       const standardEmojis = this.$store.state.instance.emoji || []
       return Object.entries(this.allCustomGroups)
@@ -237,16 +171,6 @@ const EmojiPicker = {
         }))
         .filter(group => group.emojis.length > 0)
     },
-    loadedCount () {
-      return Object.keys(this.allCustomGroups)
-        .reduce((res, groupId) => {
-          res[groupId] = this.groupLoadedCount[groupId] || this.sensibleInitialAmountForAGroup
-          return res
-        }, {})
-    },
-    lastNonUnicodeGroupId () {
-      return this.emojis[this.emojis.length - 2].id
-    },
     stickerPickerEnabled () {
       return (this.$store.state.instance.stickers || []).length !== 0
     }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 0e6c7e41..0df33c24 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -62,7 +62,6 @@
         </div>
         <div
           ref="emoji-groups"
-          v-lazy-image-container
           class="emoji-groups"
           :class="groupsScrolledClass"
           @scroll="onScroll"
@@ -79,7 +78,7 @@
               {{ group.text }}
             </h6>
             <span
-              v-for="emoji in limitedEmojis(group.emojis, group.id)"
+              v-for="emoji in group.emojis"
               :key="group.id + emoji.displayText"
               :title="emoji.displayText"
               class="emoji-item"
diff --git a/src/directives/lazy_image_container.js b/src/directives/lazy_image_container.js
deleted file mode 100644
index 44adc828..00000000
--- a/src/directives/lazy_image_container.js
+++ /dev/null
@@ -1,13 +0,0 @@
-
-import lozad from 'lozad'
-
-const LazyImageContainer = {
-  inserted (el) {
-    const images = el.querySelectorAll('img')
-    console.log(images.length)
-    el.$observer = lozad(images)
-    el.$observer.observe()
-  }
-}
-
-export default LazyImageContainer
-- 
cgit v1.2.3-70-g09d2


From 23edc4f7e253cdca022290f877a0fd8f43a4f993 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 01:11:32 -0400
Subject: Fix scrol->highlight behaviour

Ref: grouped-emoji-picker
---
 src/components/emoji_picker/emoji_picker.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index b0162479..31a455fd 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -78,6 +78,18 @@ const EmojiPicker = {
     onScroll (e) {
       const target = (e && e.target) || this.$refs['emoji-groups']
       this.updateScrolledClass(target)
+      this.scrolledGroup(target)
+    },
+    scrolledGroup (target) {
+      const top = target.scrollTop + 5
+      this.$nextTick(() => {
+        this.allEmojiGroups.forEach(group => {
+          const ref = this.$refs['group-' + group.id]
+          if (ref[0].offsetTop <= top) {
+            this.activeGroup = group.id
+          }
+        })
+      })
     },
     highlight (key) {
       const ref = this.$refs['group-' + key]
@@ -134,6 +146,9 @@ const EmojiPicker = {
     }
   },
   mounted () {
+    if (this.defaultGroup) {
+      this.highlight(this.defaultGroup)
+    }
     this.initializeLazyLoad()
   },
   destroyed () {
@@ -152,6 +167,9 @@ const EmojiPicker = {
     allCustomGroups () {
       return this.$store.getters.groupedCustomEmojis
     },
+    defaultGroup () {
+      return Object.keys(this.allCustomGroups)[0]
+    },
     allEmojiGroups () {
       const standardEmojis = this.$store.state.instance.emoji || []
       return Object.entries(this.allCustomGroups)
-- 
cgit v1.2.3-70-g09d2


From f1d6e6afce6a0a6d709ae6ede5f14bdf3cf48e2b Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 01:20:35 -0400
Subject: Clean up unused variables

Ref: grouped-emoji-picker
---
 src/components/emoji_picker/emoji_picker.js | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 31a455fd..d60daab7 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -15,13 +15,6 @@ library.add(
   faSmileBeam
 )
 
-// At widest, approximately 20 emoji are visible in a row,
-// loading 3 rows, could be overkill for narrow picker
-const LOAD_EMOJI_BY = 60
-
-// When to start loading new batch emoji, in pixels
-const LOAD_EMOJI_MARGIN = 64
-
 const filterByKeyword = (list, keyword = '') => {
   if (keyword === '') return list
 
@@ -54,10 +47,7 @@ const EmojiPicker = {
       showingStickers: false,
       groupsScrolledClass: 'scrolled-top',
       keepOpen: false,
-      customEmojiTimeout: null,
-      customEmojiLoadAllConfirmed: false,
-      groupLoadedCount: {},
-      firstLoaded: false
+      customEmojiTimeout: null
     }
   },
   components: {
@@ -136,7 +126,6 @@ const EmojiPicker = {
   },
   watch: {
     keyword () {
-      this.customEmojiLoadAllConfirmed = false
       this.onScroll()
       // Wait for the dom to change
       this.$nextTick(() => this.initializeLazyLoad())
-- 
cgit v1.2.3-70-g09d2


From 031a01be7920e4cf3bda6ed5e4f3e589f9821121 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 13:06:03 -0400
Subject: Remove useless class `disabled` in emoji picker

Ref: grouped-emoji-picker
---
 src/components/emoji_picker/emoji_picker.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 0df33c24..fb2eef25 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -7,8 +7,7 @@
           :key="group.id"
           class="emoji-tabs-item"
           :class="{
-            active: activeGroupView === group.id,
-            disabled: false
+            active: activeGroupView === group.id
           }"
           :title="group.text"
           @click.prevent="highlight(group.id)"
-- 
cgit v1.2.3-70-g09d2


From 5ab51613b738bf089770c2ad6d0ae9354d49bcee Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 13:17:47 -0400
Subject: Use StillImage for emoji group header

Ref: grouped-emoji-picker
---
 src/components/emoji_picker/emoji_picker.js  | 4 +++-
 src/components/emoji_picker/emoji_picker.vue | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index d60daab7..5b90c31e 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,5 +1,6 @@
 import { defineAsyncComponent } from 'vue'
 import Checkbox from '../checkbox/checkbox.vue'
+import StillImage from '../still-image/still-image.vue'
 import lozad from 'lozad'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -52,7 +53,8 @@ const EmojiPicker = {
   },
   components: {
     StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
-    Checkbox
+    Checkbox,
+    StillImage
   },
   methods: {
     onStickerUploaded (e) {
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index fb2eef25..ed196066 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -16,10 +16,10 @@
             v-if="group.image"
             class="emoji-picker-header-image"
           >
-            <img
+            <still-image
               :alt="group.text"
               :src="group.image"
-            >
+            />
           </span>
           <FAIcon
             v-else
-- 
cgit v1.2.3-70-g09d2


From d00ebc14f1b9b584a6573d80dcb7ac654f94674e Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 14:10:17 -0400
Subject: Fix vertical scrollbar of emoji picker header

Ref: grouped-emoji-picker
---
 src/components/emoji_picker/emoji_picker.scss | 29 ++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 0bd4363c..e315d2d7 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -1,5 +1,10 @@
 @import '../../_variables.scss';
 
+$emoji-picker-header-height: 36px;
+$emoji-picker-header-picture-width: 32px;
+$emoji-picker-header-picture-height: 32px;
+$emoji-picker-emoji-size: 32px;
+
 .emoji-picker {
   display: flex;
   flex-direction: column;
@@ -23,9 +28,11 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    width: 30px;
-    height: 24px;
-    img {
+    width: $emoji-picker-header-picture-width;
+    max-width: $emoji-picker-header-picture-width;
+    height: $emoji-picker-header-picture-height;
+    max-height: $emoji-picker-header-picture-height;
+    .still-image {
       max-width: 100%;
       max-height: 100%;
       object-fit: contain;
@@ -50,7 +57,7 @@
 
   .heading {
     display: flex;
-    height: 32px;
+    //height: $emoji-picker-header-height;
     padding: 10px 7px 5px;
     overflow-x: auto;
   }
@@ -87,11 +94,19 @@
     min-width: 0;
     flex-basis: auto;
     flex-shrink: 1;
+    display: flex;
+    align-content: center;
 
     &-item {
       padding: 0 7px;
       cursor: pointer;
       font-size: 1.85em;
+      width: $emoji-picker-header-picture-width;
+      max-width: $emoji-picker-header-picture-width;
+      height: $emoji-picker-header-picture-height;
+      max-height: $emoji-picker-header-picture-height;
+      display: flex;
+      align-items: center;
 
       &.disabled {
         opacity: 0.5;
@@ -181,11 +196,11 @@
     }
 
     &-item {
-      width: 32px;
-      height: 32px;
+      width: $emoji-picker-emoji-size;
+      height: $emoji-picker-emoji-size;
       box-sizing: border-box;
       display: flex;
-      font-size: 32px;
+      font-size: $emoji-picker-emoji-size;
       align-items: center;
       justify-content: center;
       margin: 4px;
-- 
cgit v1.2.3-70-g09d2


From 9aeffd7634e049123d3ffc8addf9c223652b0bbb Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 14:46:00 -0400
Subject: Fix sticker picker heading tab

Ref: grouped-emoji-picker
---
 src/components/emoji_picker/emoji_picker.scss | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index e315d2d7..ea8b6037 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -57,9 +57,7 @@ $emoji-picker-emoji-size: 32px;
 
   .heading {
     display: flex;
-    //height: $emoji-picker-header-height;
     padding: 10px 7px 5px;
-    overflow-x: auto;
   }
 
   .content {
@@ -74,6 +72,7 @@ $emoji-picker-emoji-size: 32px;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
+    overflow-x: auto;
   }
 
   .emoji-groups {
@@ -81,7 +80,8 @@ $emoji-picker-emoji-size: 32px;
   }
 
   .additional-tabs {
-    display: block;
+    display: flex;
+    flex: 1;
     border-left: 1px solid;
     border-left-color: $fallback--icon;
     border-left-color: var(--icon, $fallback--icon);
@@ -91,9 +91,8 @@ $emoji-picker-emoji-size: 32px;
 
   .additional-tabs,
   .emoji-tabs {
-    min-width: 0;
     flex-basis: auto;
-    flex-shrink: 1;
+    // flex-shrink: 1;
     display: flex;
     align-content: center;
 
-- 
cgit v1.2.3-70-g09d2


From 06a636db3732ce2808c54d3b74eb4aabd866dbf6 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 15:09:24 -0400
Subject: Lazy-load emoji picker in post form

When clicking the reply button, we used to load the whole emoji picker.
This causes a considerable delay even if the user is not going to use
the emoji picker. Now the content of the emoji picker is loaded only
after the user has explicitly opened the emoji picker.

Ref: grouped-emoji-picker
---
 src/components/emoji_input/emoji_input.vue   |  1 +
 src/components/emoji_picker/emoji_picker.js  | 24 +++++++++++++++++++-----
 src/components/emoji_picker/emoji_picker.vue |  9 +++++++--
 3 files changed, 27 insertions(+), 7 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 81b81913..eedde9aa 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -19,6 +19,7 @@
         v-if="enableEmojiPicker"
         ref="picker"
         :class="{ hide: !showPicker }"
+        :showing="showPicker"
         :enable-sticker-picker="enableStickerPicker"
         class="emoji-picker-panel"
         @emoji="insert"
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 5b90c31e..8b4f302f 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -39,6 +39,10 @@ const EmojiPicker = {
       required: false,
       type: Boolean,
       default: false
+    },
+    showing: {
+      required: true,
+      type: Boolean
     }
   },
   data () {
@@ -48,7 +52,9 @@ const EmojiPicker = {
       showingStickers: false,
       groupsScrolledClass: 'scrolled-top',
       keepOpen: false,
-      customEmojiTimeout: null
+      customEmojiTimeout: null,
+      // Lazy-load only after the first time `showing` becomes true.
+      contentLoaded: false
     }
   },
   components: {
@@ -115,6 +121,9 @@ const EmojiPicker = {
       this.$lozad = lozad('img', {})
       this.$lozad.observe()
     },
+    waitForDomAndInitializeLazyLoad() {
+      this.$nextTick(() => this.initializeLazyLoad())
+    },
     destroyLazyLoad () {
       if (this.$lozad) {
         if (this.$lozad.observer) {
@@ -129,18 +138,23 @@ const EmojiPicker = {
   watch: {
     keyword () {
       this.onScroll()
-      // Wait for the dom to change
-      this.$nextTick(() => this.initializeLazyLoad())
+      this.waitForDomAndInitializeLazyLoad()
     },
     allCustomGroups () {
-      this.$nextTick(() => this.initializeLazyLoad())
+      this.waitForDomAndInitializeLazyLoad()
+    },
+    showing (val) {
+      if (val) {
+        this.contentLoaded = true
+        this.waitForDomAndInitializeLazyLoad()
+      }
     }
   },
   mounted () {
     if (this.defaultGroup) {
       this.highlight(this.defaultGroup)
     }
-    this.initializeLazyLoad()
+    this.waitForDomAndInitializeLazyLoad()
   },
   destroyed () {
     this.destroyLazyLoad()
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index ed196066..b92bccd7 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="emoji-picker panel panel-default panel-body">
+  <div
+    class="emoji-picker panel panel-default panel-body"
+  >
     <div class="heading">
       <span class="emoji-tabs">
         <span
@@ -45,7 +47,10 @@
         </span>
       </span>
     </div>
-    <div class="content">
+    <div
+      v-if="contentLoaded"
+      class="content"
+    >
       <div
         class="emoji-content"
         :class="{hidden: showingStickers}"
-- 
cgit v1.2.3-70-g09d2


From 3156f046b4215cab5edf272ae92538c5f1e2e1f1 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 15:25:13 -0400
Subject: Lint

Ref: grouped-emoji-picker
---
 src/components/emoji_picker/emoji_picker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 8b4f302f..aeee867d 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -121,7 +121,7 @@ const EmojiPicker = {
       this.$lozad = lozad('img', {})
       this.$lozad.observe()
     },
-    waitForDomAndInitializeLazyLoad() {
+    waitForDomAndInitializeLazyLoad () {
       this.$nextTick(() => this.initializeLazyLoad())
     },
     destroyLazyLoad () {
-- 
cgit v1.2.3-70-g09d2


From c93da0b865e9a14c6fa952e63c4c4f77f34943bc Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 8 Oct 2021 15:47:39 -0400
Subject: Fix error on emoji picker first load

Ref: grouped-emoji-picker
---
 src/components/emoji_picker/emoji_picker.js | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index aeee867d..ea53a972 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -133,6 +133,18 @@ const EmojiPicker = {
           this.$lozad.mutationObserver.disconnect()
         }
       }
+    },
+    onShowing () {
+      const oldContentLoaded = this.contentLoaded
+      this.contentLoaded = true
+      this.waitForDomAndInitializeLazyLoad()
+      if (!oldContentLoaded) {
+        this.$nextTick(() => {
+          if (this.defaultGroup) {
+            this.highlight(this.defaultGroup)
+          }
+        })
+      }
     }
   },
   watch: {
@@ -145,16 +157,14 @@ const EmojiPicker = {
     },
     showing (val) {
       if (val) {
-        this.contentLoaded = true
-        this.waitForDomAndInitializeLazyLoad()
+        this.onShowing()
       }
     }
   },
   mounted () {
-    if (this.defaultGroup) {
-      this.highlight(this.defaultGroup)
+    if (this.showing) {
+      this.onShowing()
     }
-    this.waitForDomAndInitializeLazyLoad()
   },
   destroyed () {
     this.destroyLazyLoad()
-- 
cgit v1.2.3-70-g09d2


From b77259a9a0c353ede8ff1d6bf5c13ae91ca7fc7c Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 01:35:16 -0500
Subject: Use StillImage to render emojis in emoji picker

---
 src/components/emoji_picker/emoji_picker.js  | 15 +++++++++++++--
 src/components/emoji_picker/emoji_picker.vue |  5 +++--
 src/components/still-image/still-image.js    | 19 +++++++++++++++++--
 src/components/still-image/still-image.vue   |  5 +++--
 4 files changed, 36 insertions(+), 8 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index ea53a972..315364d5 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -118,8 +118,19 @@ const EmojiPicker = {
     },
     initializeLazyLoad () {
       this.destroyLazyLoad()
-      this.$lozad = lozad('img', {})
-      this.$lozad.observe()
+      this.$nextTick(() => {
+        this.$lozad = lozad('.still-image.emoji-picker-emoji', {
+          load: el => {
+            const vn = el.__vue__
+            if (!vn) {
+              return
+            }
+
+            vn.loadLazy()
+          }
+        })
+        this.$lozad.observe()
+      })
     },
     waitForDomAndInitializeLazyLoad () {
       this.$nextTick(() => this.initializeLazyLoad())
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index b92bccd7..19cc46b5 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -89,10 +89,11 @@
               @click.stop.prevent="onEmoji(emoji)"
             >
               <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
-              <img
+              <still-image
                 v-else
+                class="emoji-picker-emoji"
                 :data-src="emoji.imageUrl"
-              >
+              />
             </span>
             <span :ref="'group-end-' + group.id" />
           </div>
diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
index d7abbcb5..1806d33b 100644
--- a/src/components/still-image/still-image.js
+++ b/src/components/still-image/still-image.js
@@ -7,16 +7,23 @@ const StillImage = {
     'imageLoadHandler',
     'alt',
     'height',
-    'width'
+    'width',
+    'dataSrc'
   ],
   data () {
     return {
+      // for lazy loading, see loadLazy()
+      realSrc: this.src,
       stopGifs: this.$store.getters.mergedConfig.stopGifs
     }
   },
   computed: {
     animated () {
-      return this.stopGifs && (this.mimetype === 'image/gif' || this.src.endsWith('.gif'))
+      if (!this.realSrc) {
+        return false
+      }
+
+      return this.stopGifs && (this.mimetype === 'image/gif' || this.realSrc.endsWith('.gif'))
     },
     style () {
       const appendPx = (str) => /\d$/.test(str) ? str + 'px' : str
@@ -27,7 +34,15 @@ const StillImage = {
     }
   },
   methods: {
+    loadLazy () {
+      if (this.dataSrc) {
+        this.realSrc = this.dataSrc
+      }
+    },
     onLoad () {
+      if (!this.realSrc) {
+        return
+      }
       const image = this.$refs.src
       if (!image) return
       this.imageLoadHandler && this.imageLoadHandler(image)
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index ab3080c8..633fb229 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -11,10 +11,11 @@
     <!-- NOTE: key is required to force to re-render img tag when src is changed -->
     <img
       ref="src"
-      :key="src"
+      :key="realSrc"
       :alt="alt"
       :title="alt"
-      :src="src"
+      :data-src="dataSrc"
+      :src="realSrc"
       :referrerpolicy="referrerpolicy"
       @load="onLoad"
       @error="onError"
-- 
cgit v1.2.3-70-g09d2


From d9e428ebab3ea575e622fadd47150c39684648aa Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 01:37:19 -0500
Subject: Clean up emoji picker css

---
 src/components/emoji_picker/emoji_picker.scss | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index ea8b6037..222749d0 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -92,7 +92,6 @@ $emoji-picker-emoji-size: 32px;
   .additional-tabs,
   .emoji-tabs {
     flex-basis: auto;
-    // flex-shrink: 1;
     display: flex;
     align-content: center;
 
-- 
cgit v1.2.3-70-g09d2


From 38861fc6cc1e30c6ef3c429db222a303ed1c321d Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 02:17:59 -0500
Subject: Scroll active tab header into view in emoji picker

---
 src/components/emoji_picker/emoji_picker.js  | 18 ++++++++++++++++++
 src/components/emoji_picker/emoji_picker.vue |  6 +++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 315364d5..26c767ac 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -87,8 +87,26 @@ const EmojiPicker = {
             this.activeGroup = group.id
           }
         })
+        this.scrollHeader()
       })
     },
+    scrollHeader () {
+      // Scroll the active tab's header into view
+      const headerRef = this.$refs['group-header-' + this.activeGroup][0]
+      const left = headerRef.offsetLeft
+      const right = left + headerRef.offsetWidth
+      const headerCont = this.$refs.header
+      const currentScroll = headerCont.scrollLeft
+      const currentScrollRight = currentScroll + headerCont.clientWidth
+      const setScroll = s => { headerCont.scrollLeft = s }
+
+      const margin = 7 // .emoji-tabs-item: padding
+      if (left - margin < currentScroll) {
+        setScroll(left - margin)
+      } else if (right + margin > currentScrollRight) {
+        setScroll(right + margin - headerCont.clientWidth)
+      }
+    },
     highlight (key) {
       const ref = this.$refs['group-' + key]
       const top = ref.offsetTop
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 19cc46b5..e8d42c24 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -3,9 +3,13 @@
     class="emoji-picker panel panel-default panel-body"
   >
     <div class="heading">
-      <span class="emoji-tabs">
+      <span
+        ref="header"
+        class="emoji-tabs"
+      >
         <span
           v-for="group in filteredEmojiGroups"
+          :ref="'group-header-' + group.id"
           :key="group.id"
           class="emoji-tabs-item"
           :class="{
-- 
cgit v1.2.3-70-g09d2


From 8f4f02683f89129cf6f28f2059122cff7db02242 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 16:55:00 -0500
Subject: Make emoji picker use grouped unicode emojis

---
 src/components/emoji_input/suggestor.js            |  2 +-
 src/components/emoji_picker/emoji_picker.js        | 16 +++++----
 .../post_status_form/post_status_form.js           |  6 ++--
 src/components/react_button/react_button.js        |  4 +--
 src/components/settings_modal/tabs/profile_tab.js  |  4 +--
 src/modules/instance.js                            | 38 ++++++++++++++++++----
 6 files changed, 48 insertions(+), 22 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js
index 0ddb4d68..1765f843 100644
--- a/src/components/emoji_input/suggestor.js
+++ b/src/components/emoji_input/suggestor.js
@@ -2,7 +2,7 @@
  * suggest - generates a suggestor function to be used by emoji-input
  * data: object providing source information for specific types of suggestions:
  * data.emoji - optional, an array of all emoji available i.e.
- *   (state.instance.emoji + state.instance.customEmoji)
+ *   (getters.standardEmojiList + state.instance.customEmoji)
  * data.users - optional, an array of all known users
  * updateUsersList - optional, a function to search and append to users
  *
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 26c767ac..4990afb3 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -214,16 +214,18 @@ const EmojiPicker = {
     defaultGroup () {
       return Object.keys(this.allCustomGroups)[0]
     },
+    unicodeEmojiGroups () {
+      return this.$store.getters.standardEmojiGroupList.map(group => ({
+        id: `standard-${group.id}`,
+        text: this.$t(`emoji.unicode_groups.${group.id}`),
+        icon: 'box-open',
+        emojis: group.emojis
+      }))
+    },
     allEmojiGroups () {
-      const standardEmojis = this.$store.state.instance.emoji || []
       return Object.entries(this.allCustomGroups)
         .map(([_, v]) => v)
-        .concat({
-          id: 'standard',
-          text: this.$t('emoji.unicode'),
-          icon: 'box-open',
-          emojis: filterByKeyword(standardEmojis, this.keyword)
-        })
+        .concat(this.unicodeEmojiGroups)
     },
     filteredEmojiGroups () {
       return this.allEmojiGroups
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 77f73d04..5c536b74 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -189,7 +189,7 @@ const PostStatusForm = {
     emojiUserSuggestor () {
       return suggestor({
         emoji: [
-          ...this.$store.state.instance.emoji,
+          ...this.$store.getters.standardEmojiList,
           ...this.$store.state.instance.customEmoji
         ],
         store: this.$store
@@ -198,13 +198,13 @@ const PostStatusForm = {
     emojiSuggestor () {
       return suggestor({
         emoji: [
-          ...this.$store.state.instance.emoji,
+          ...this.$store.getters.standardEmojiList,
           ...this.$store.state.instance.customEmoji
         ]
       })
     },
     emoji () {
-      return this.$store.state.instance.emoji || []
+      return this.$store.getters.standardEmojiList || []
     },
     customEmoji () {
       return this.$store.state.instance.customEmoji || []
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index 5e052e1e..e65bfd93 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -59,7 +59,7 @@ const ReactButton = {
       if (this.filterWord !== '') {
         const filterWordLowercase = trim(this.filterWord.toLowerCase())
         const orderedEmojiList = []
-        for (const emoji of this.$store.state.instance.emoji) {
+        for (const emoji of this.$store.getters.standardEmojiList) {
           if (emoji.replacement === this.filterWord) return [emoji]
 
           const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
@@ -72,7 +72,7 @@ const ReactButton = {
         }
         return orderedEmojiList.flat()
       }
-      return this.$store.state.instance.emoji || []
+      return this.$store.getters.standardEmojiList || []
     },
     mergedConfig () {
       return this.$store.getters.mergedConfig
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 376248ef..b86faef0 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -64,7 +64,7 @@ const ProfileTab = {
     emojiUserSuggestor () {
       return suggestor({
         emoji: [
-          ...this.$store.state.instance.emoji,
+          ...this.$store.getters.standardEmojiList,
           ...this.$store.state.instance.customEmoji
         ],
         store: this.$store
@@ -73,7 +73,7 @@ const ProfileTab = {
     emojiSuggestor () {
       return suggestor({
         emoji: [
-          ...this.$store.state.instance.emoji,
+          ...this.$store.getters.standardEmojiList,
           ...this.$store.state.instance.customEmoji
         ]
       })
diff --git a/src/modules/instance.js b/src/modules/instance.js
index a7a91d99..2fcb059c 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -3,6 +3,18 @@ import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
 import apiService from '../services/api/api.service.js'
 import { instanceDefaultProperties } from './config.js'
 
+const SORTED_EMOJI_GROUP_IDS = [
+  'smileys-and-emotion',
+  'people-and-body',
+  'animals-and-nature',
+  'food-and-drink',
+  'travel-and-places',
+  'activities',
+  'objects',
+  'symbols',
+  'flags'
+]
+
 const defaultState = {
   // Stuff from apiConfig
   name: 'Pleroma FE',
@@ -64,7 +76,7 @@ const defaultState = {
   // Nasty stuff
   customEmoji: [],
   customEmojiFetched: false,
-  emoji: [],
+  emoji: {},
   emojiFetched: false,
   pleromaBackend: true,
   postFormats: [],
@@ -139,6 +151,17 @@ const instance = {
           return res
         }, {})
     },
+    standardEmojiList (state) {
+      return SORTED_EMOJI_GROUP_IDS
+        .map(groupId => state.emoji[groupId] || [])
+        .reduce((a, b) => a.concat(b), [])
+    },
+    standardEmojiGroupList (state) {
+      return SORTED_EMOJI_GROUP_IDS.map(groupId => ({
+        id: groupId,
+        emojis: state.emoji[groupId] || []
+      }))
+    },
     instanceDomain (state) {
       return new URL(state.server).hostname
     }
@@ -165,13 +188,14 @@ const instance = {
         const res = await window.fetch('/static/emoji.json')
         if (res.ok) {
           const values = await res.json()
-          const emoji = Object.keys(values).map((key) => {
-            return {
-              displayText: key,
+          const emoji = Object.keys(values).reduce((res, groupId) => {
+            res[groupId] = values[groupId].map(e => ({
+              displayText: e.name,
               imageUrl: false,
-              replacement: values[key]
-            }
-          }).sort((a, b) => a.name > b.name ? 1 : -1)
+              replacement: e.emoji
+            }))
+            return res
+          }, {})
           commit('setInstanceOption', { name: 'emoji', value: emoji })
         } else {
           throw (res)
-- 
cgit v1.2.3-70-g09d2


From 02de0ed825667c5a40be5c18b86f71152198e77a Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 17:14:23 -0500
Subject: Add icons for unicode emoji groups

---
 src/components/emoji_picker/emoji_picker.js | 36 ++++++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 4990afb3..bf4a98d4 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -6,16 +6,46 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBoxOpen,
   faStickyNote,
-  faSmileBeam
+  faSmileBeam,
+  faSmile,
+  faUser,
+  faPaw,
+  faIceCream,
+  faBus,
+  faBasketballBall,
+  faLightbulb,
+  faCode,
+  faFlag
 } from '@fortawesome/free-solid-svg-icons'
 import { trim } from 'lodash'
 
 library.add(
   faBoxOpen,
   faStickyNote,
-  faSmileBeam
+  faSmileBeam,
+  faSmile,
+  faUser,
+  faPaw,
+  faIceCream,
+  faBus,
+  faBasketballBall,
+  faLightbulb,
+  faCode,
+  faFlag
 )
 
+const UNICODE_EMOJI_GROUP_ICON = {
+  'smileys-and-emotion': 'smile',
+  'people-and-body': 'user',
+  'animals-and-nature': 'paw',
+  'food-and-drink': 'ice-cream',
+  'travel-and-places': 'bus',
+  'activities': 'basketball-ball',
+  'objects': 'lightbulb',
+  'symbols': 'code',
+  'flags': 'flag',
+}
+
 const filterByKeyword = (list, keyword = '') => {
   if (keyword === '') return list
 
@@ -218,7 +248,7 @@ const EmojiPicker = {
       return this.$store.getters.standardEmojiGroupList.map(group => ({
         id: `standard-${group.id}`,
         text: this.$t(`emoji.unicode_groups.${group.id}`),
-        icon: 'box-open',
+        icon: UNICODE_EMOJI_GROUP_ICON[group.id],
         emojis: group.emojis
       }))
     },
-- 
cgit v1.2.3-70-g09d2


From fbbeb33f48379e056a48c077ac04a59c502125d9 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 8 Jan 2022 17:17:32 -0500
Subject: Lint

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

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index bf4a98d4..07f4b005 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -43,7 +43,7 @@ const UNICODE_EMOJI_GROUP_ICON = {
   'activities': 'basketball-ball',
   'objects': 'lightbulb',
   'symbols': 'code',
-  'flags': 'flag',
+  'flags': 'flag'
 }
 
 const filterByKeyword = (list, keyword = '') => {
-- 
cgit v1.2.3-70-g09d2


From e01c76c7e90f354436e726456532f51288a7ab99 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 6 Apr 2022 21:29:50 -0400
Subject: Make emoji picker work with vue3

---
 src/components/emoji_picker/emoji_picker.js  | 21 +++++++++++++++------
 src/components/emoji_picker/emoji_picker.vue |  8 +++++---
 2 files changed, 20 insertions(+), 9 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 07f4b005..677ef5e4 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -84,7 +84,9 @@ const EmojiPicker = {
       keepOpen: false,
       customEmojiTimeout: null,
       // Lazy-load only after the first time `showing` becomes true.
-      contentLoaded: false
+      contentLoaded: false,
+      groupRefs: {},
+      emojiRefs: {}
     }
   },
   components: {
@@ -93,6 +95,12 @@ const EmojiPicker = {
     StillImage
   },
   methods: {
+    setGroupRef (name) {
+      return el => { this.groupRefs[name] = el }
+    },
+    setEmojiRef (name) {
+      return el => { this.emojiRefs[name] = el }
+    },
     onStickerUploaded (e) {
       this.$emit('sticker-uploaded', e)
     },
@@ -112,8 +120,8 @@ const EmojiPicker = {
       const top = target.scrollTop + 5
       this.$nextTick(() => {
         this.allEmojiGroups.forEach(group => {
-          const ref = this.$refs['group-' + group.id]
-          if (ref[0].offsetTop <= top) {
+          const ref = this.groupRefs['group-' + group.id]
+          if (ref && ref.offsetTop <= top) {
             this.activeGroup = group.id
           }
         })
@@ -122,7 +130,7 @@ const EmojiPicker = {
     },
     scrollHeader () {
       // Scroll the active tab's header into view
-      const headerRef = this.$refs['group-header-' + this.activeGroup][0]
+      const headerRef = this.groupRefs['group-header-' + this.activeGroup]
       const left = headerRef.offsetLeft
       const right = left + headerRef.offsetWidth
       const headerCont = this.$refs.header
@@ -138,7 +146,7 @@ const EmojiPicker = {
       }
     },
     highlight (key) {
-      const ref = this.$refs['group-' + key]
+      const ref = this.groupRefs['group-' + key]
       const top = ref.offsetTop
       this.setShowStickers(false)
       this.activeGroup = key
@@ -169,7 +177,8 @@ const EmojiPicker = {
       this.$nextTick(() => {
         this.$lozad = lozad('.still-image.emoji-picker-emoji', {
           load: el => {
-            const vn = el.__vue__
+            const name = el.getAttribute('data-emoji-name')
+            const vn = this.emojiRefs[name]
             if (!vn) {
               return
             }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index e8d42c24..a6a63411 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -9,7 +9,7 @@
       >
         <span
           v-for="group in filteredEmojiGroups"
-          :ref="'group-header-' + group.id"
+          :ref="setGroupRef('group-header-' + group.id)"
           :key="group.id"
           class="emoji-tabs-item"
           :class="{
@@ -80,7 +80,7 @@
             class="emoji-group"
           >
             <h6
-              :ref="'group-' + group.id"
+              :ref="setGroupRef('group-' + group.id)"
               class="emoji-group-title"
             >
               {{ group.text }}
@@ -96,10 +96,12 @@
               <still-image
                 v-else
                 class="emoji-picker-emoji"
+                :ref="setEmojiRef(group.id + emoji.displayText)"
                 :data-src="emoji.imageUrl"
+                :data-emoji-name="group.id + emoji.displayText"
               />
             </span>
-            <span :ref="'group-end-' + group.id" />
+            <span :ref="setGroupRef('group-end-' + group.id)" />
           </div>
         </div>
         <div class="keep-open">
-- 
cgit v1.2.3-70-g09d2


From 0fd0d6c4c2c7791f889135727f8afef10a36472d Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 29 Apr 2022 22:40:06 -0400
Subject: Limit the width of unsupported multichar emojis

---
 src/components/emoji_picker/emoji_picker.scss | 8 ++++++--
 src/components/emoji_picker/emoji_picker.vue  | 7 +++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 222749d0..af01b3ec 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -198,18 +198,22 @@ $emoji-picker-emoji-size: 32px;
       height: $emoji-picker-emoji-size;
       box-sizing: border-box;
       display: flex;
-      font-size: $emoji-picker-emoji-size;
+      line-height: $emoji-picker-emoji-size;
       align-items: center;
       justify-content: center;
       margin: 4px;
 
       cursor: pointer;
 
-      img {
+      .emoji-picker-emoji.-custom {
         object-fit: contain;
         max-width: 100%;
         max-height: 100%;
       }
+      .emoji-picker-emoji.-unicode {
+        font-size: 24px;
+        overflow: hidden;
+      }
     }
 
   }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index a6a63411..e5a5958c 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -92,10 +92,13 @@
               class="emoji-item"
               @click.stop.prevent="onEmoji(emoji)"
             >
-              <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
+              <span
+                v-if="!emoji.imageUrl"
+                class="emoji-picker-emoji -unicode"
+              >{{ emoji.replacement }}</span>
               <still-image
                 v-else
-                class="emoji-picker-emoji"
+                class="emoji-picker-emoji -custom"
                 :ref="setEmojiRef(group.id + emoji.displayText)"
                 :data-src="emoji.imageUrl"
                 :data-emoji-name="group.id + emoji.displayText"
-- 
cgit v1.2.3-70-g09d2


From 09bcb6a5b176a9451d842a32dae64a214aa5ce8c Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 20 Jun 2022 08:50:32 -0400
Subject: Use trimmed keyword for filtering emojis

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

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 677ef5e4..3cb6f76d 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -270,7 +270,7 @@ const EmojiPicker = {
       return this.allEmojiGroups
         .map(group => ({
           ...group,
-          emojis: filterByKeyword(group.emojis, this.keyword)
+          emojis: filterByKeyword(group.emojis, trim(this.keyword))
         }))
         .filter(group => group.emojis.length > 0)
     },
-- 
cgit v1.2.3-70-g09d2


From 5d6f3a5c8bd3acc53e51b4300c93051ddc1b627b Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Thu, 7 Jul 2022 23:10:06 -0400
Subject: Tweak efficiency when changing filter keywords in emoji picker

---
 src/components/emoji_picker/emoji_picker.js | 31 +++++++++++++++++++----------
 1 file changed, 20 insertions(+), 11 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 3cb6f76d..6a7b5285 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -17,7 +17,7 @@ import {
   faCode,
   faFlag
 } from '@fortawesome/free-solid-svg-icons'
-import { trim } from 'lodash'
+import { debounce, trim } from 'lodash'
 
 library.add(
   faBoxOpen,
@@ -86,7 +86,8 @@ const EmojiPicker = {
       // Lazy-load only after the first time `showing` becomes true.
       contentLoaded: false,
       groupRefs: {},
-      emojiRefs: {}
+      emojiRefs: {},
+      filteredEmojiGroups: []
     }
   },
   components: {
@@ -206,6 +207,7 @@ const EmojiPicker = {
       const oldContentLoaded = this.contentLoaded
       this.contentLoaded = true
       this.waitForDomAndInitializeLazyLoad()
+      this.filteredEmojiGroups = this.getFilteredEmojiGroups()
       if (!oldContentLoaded) {
         this.$nextTick(() => {
           if (this.defaultGroup) {
@@ -213,15 +215,24 @@ const EmojiPicker = {
           }
         })
       }
+    },
+    getFilteredEmojiGroups () {
+      return this.allEmojiGroups
+        .map(group => ({
+          ...group,
+          emojis: filterByKeyword(group.emojis, trim(this.keyword))
+        }))
+        .filter(group => group.emojis.length > 0)
     }
   },
   watch: {
     keyword () {
       this.onScroll()
-      this.waitForDomAndInitializeLazyLoad()
+      this.debouncedHandleKeywordChange()
     },
     allCustomGroups () {
       this.waitForDomAndInitializeLazyLoad()
+      this.filteredEmojiGroups = this.getFilteredEmojiGroups()
     },
     showing (val) {
       if (val) {
@@ -266,16 +277,14 @@ const EmojiPicker = {
         .map(([_, v]) => v)
         .concat(this.unicodeEmojiGroups)
     },
-    filteredEmojiGroups () {
-      return this.allEmojiGroups
-        .map(group => ({
-          ...group,
-          emojis: filterByKeyword(group.emojis, trim(this.keyword))
-        }))
-        .filter(group => group.emojis.length > 0)
-    },
     stickerPickerEnabled () {
       return (this.$store.state.instance.stickers || []).length !== 0
+    },
+    debouncedHandleKeywordChange () {
+      return debounce(() => {
+        this.waitForDomAndInitializeLazyLoad()
+        this.filteredEmojiGroups = this.getFilteredEmojiGroups()
+      }, 500)
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 58b01db9e1f466607b810b1900db1d8e4411ccad Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 1 Aug 2022 11:03:52 -0400
Subject: Fix emoji picker lint

---
 src/components/emoji_picker/emoji_picker.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 6a7b5285..c2ae76f3 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -40,10 +40,10 @@ const UNICODE_EMOJI_GROUP_ICON = {
   'animals-and-nature': 'paw',
   'food-and-drink': 'ice-cream',
   'travel-and-places': 'bus',
-  'activities': 'basketball-ball',
-  'objects': 'lightbulb',
-  'symbols': 'code',
-  'flags': 'flag'
+  activities: 'basketball-ball',
+  objects: 'lightbulb',
+  symbols: 'code',
+  flags: 'flag'
 }
 
 const filterByKeyword = (list, keyword = '') => {
-- 
cgit v1.2.3-70-g09d2


From 6e2b87f5af922d27ee87b9fec64c5308832a41af Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 1 Aug 2022 11:30:54 -0400
Subject: Fix emoji picker lint

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

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index e5a5958c..689138e6 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -98,8 +98,8 @@
               >{{ emoji.replacement }}</span>
               <still-image
                 v-else
-                class="emoji-picker-emoji -custom"
                 :ref="setEmojiRef(group.id + emoji.displayText)"
+                class="emoji-picker-emoji -custom"
                 :data-src="emoji.imageUrl"
                 :data-emoji-name="group.id + emoji.displayText"
               />
-- 
cgit v1.2.3-70-g09d2


From 8bd27165f38e8568950992bc82058da676e56f18 Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Thu, 18 Aug 2022 13:10:24 +0000
Subject: Fix non-square emojis being truncated

---
 src/components/emoji_picker/emoji_picker.scss | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index af01b3ec..016c46d7 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -35,6 +35,8 @@ $emoji-picker-emoji-size: 32px;
     .still-image {
       max-width: 100%;
       max-height: 100%;
+      height: 100%;
+      width: 100%;
       object-fit: contain;
     }
   }
-- 
cgit v1.2.3-70-g09d2


From a73f9731f5ad78d1e6f1bd211ad2971d21fc1379 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Tue, 20 Sep 2022 20:44:52 -0400
Subject: Display localized unicode emoji names

---
 src/components/emoji_picker/emoji_picker.js  | 20 ++++++++++++++++++++
 src/components/emoji_picker/emoji_picker.vue |  2 +-
 src/i18n/languages.js                        |  3 ++-
 src/modules/instance.js                      | 18 +++++++++++++++---
 4 files changed, 38 insertions(+), 5 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index c2ae76f3..2ebead53 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,6 +1,7 @@
 import { defineAsyncComponent } from 'vue'
 import Checkbox from '../checkbox/checkbox.vue'
 import StillImage from '../still-image/still-image.vue'
+import { ensureFinalFallback } from '../../i18n/languages.js'
 import lozad from 'lozad'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -285,6 +286,25 @@ const EmojiPicker = {
         this.waitForDomAndInitializeLazyLoad()
         this.filteredEmojiGroups = this.getFilteredEmojiGroups()
       }, 500)
+    },
+    languages () {
+      console.log('languages:', ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage))
+      return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)
+    },
+    maybeLocalizedEmojiName () {
+      return emoji => {
+        if (!emoji.annotations) {
+          return emoji.displayText
+        }
+
+        for (const lang of this.languages) {
+          if (emoji.annotations[lang]?.name) {
+            return emoji.annotations[lang].name
+          }
+        }
+
+        return emoji.displayText
+      }
     }
   }
 }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 689138e6..57bb0037 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -88,7 +88,7 @@
             <span
               v-for="emoji in group.emojis"
               :key="group.id + emoji.displayText"
-              :title="emoji.displayText"
+              :title="maybeLocalizedEmojiName(emoji)"
               class="emoji-item"
               @click.stop.prevent="onEmoji(emoji)"
             >
diff --git a/src/i18n/languages.js b/src/i18n/languages.js
index 40cf04f2..250b3b1a 100644
--- a/src/i18n/languages.js
+++ b/src/i18n/languages.js
@@ -41,7 +41,8 @@ const langCodeToJsonName = (code) => specialJsonName[code] || code
 const langCodeToCldrName = (code) => code
 
 const ensureFinalFallback = codes => {
-  return codes.includes('en') ? codes : codes.concat(['en'])
+  const codeList = Array.isArray(codes) ? codes : [codes]
+  return codeList.includes('en') ? codeList : codeList.concat(['en'])
 }
 
 module.exports = {
diff --git a/src/modules/instance.js b/src/modules/instance.js
index c0c7cef0..5a72a6d3 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -117,6 +117,18 @@ const loadAnnotations = (lang) => {
   )
 }
 
+const injectAnnotations = (emoji, annotations) => {
+  const availableLangs = Object.keys(annotations)
+
+  return {
+    ...emoji,
+    annotations: availableLangs.reduce((acc, cur) => {
+      acc[cur] = annotations[cur][emoji.replacement]
+      return acc
+    }, {})
+  }
+}
+
 const instance = {
   state: defaultState,
   mutations: {
@@ -164,13 +176,13 @@ const instance = {
     },
     standardEmojiList (state) {
       return SORTED_EMOJI_GROUP_IDS
-        .map(groupId => state.emoji[groupId] || [])
+        .map(groupId => (state.emoji[groupId] || []).map(k => injectAnnotations(k, state.unicodeEmojiAnnotations)))
         .reduce((a, b) => a.concat(b), [])
     },
     standardEmojiGroupList (state) {
       return SORTED_EMOJI_GROUP_IDS.map(groupId => ({
         id: groupId,
-        emojis: state.emoji[groupId] || []
+        emojis: (state.emoji[groupId] || []).map(k => injectAnnotations(k, state.unicodeEmojiAnnotations))
       }))
     },
     instanceDomain (state) {
@@ -218,7 +230,7 @@ const instance = {
     },
 
     loadUnicodeEmojiData ({ commit, state }, language) {
-      const langList = ensureFinalFallback(Array.isArray(language) ? language : [language])
+      const langList = ensureFinalFallback(language)
 
       return Promise.all(
         langList
-- 
cgit v1.2.3-70-g09d2


From 980241c1ac4044e66a4f702d5420affc4a3bb9a0 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Tue, 20 Sep 2022 21:06:57 -0400
Subject: Support filtering by keywords from cldr

---
 src/components/emoji_picker/emoji_picker.js | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 2ebead53..bf5e0e43 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -47,13 +47,30 @@ const UNICODE_EMOJI_GROUP_ICON = {
   flags: 'flag'
 }
 
-const filterByKeyword = (list, keyword = '') => {
+const maybeLocalizedKeywords = (emoji, languages) => {
+  const res = [emoji.displayText]
+  if (emoji.annotations) {
+    languages.forEach(lang => {
+      const keywords = emoji.annotations[lang]?.keywords || []
+      const name = emoji.annotations[lang]?.name
+      res.push(...(keywords.concat([name]).filter(k => k)))
+    })
+  }
+  return res
+}
+
+const filterByKeyword = (list, keyword = '', languages) => {
   if (keyword === '') return list
 
   const keywordLowercase = keyword.toLowerCase()
   const orderedEmojiList = []
   for (const emoji of list) {
-    const indexOfKeyword = emoji.displayText.toLowerCase().indexOf(keywordLowercase)
+    const indices = maybeLocalizedKeywords(emoji, languages)
+      .map(k => k.toLowerCase().indexOf(keywordLowercase))
+      .filter(k => k > -1)
+
+    const indexOfKeyword = indices.length ? Math.min(...indices) : -1
+
     if (indexOfKeyword > -1) {
       if (!Array.isArray(orderedEmojiList[indexOfKeyword])) {
         orderedEmojiList[indexOfKeyword] = []
@@ -172,7 +189,7 @@ const EmojiPicker = {
       this.showingStickers = value
     },
     filterByKeyword (list, keyword) {
-      return filterByKeyword(list, keyword)
+      return filterByKeyword(list, keyword, this.languages)
     },
     initializeLazyLoad () {
       this.destroyLazyLoad()
@@ -221,7 +238,7 @@ const EmojiPicker = {
       return this.allEmojiGroups
         .map(group => ({
           ...group,
-          emojis: filterByKeyword(group.emojis, trim(this.keyword))
+          emojis: this.filterByKeyword(group.emojis, trim(this.keyword))
         }))
         .filter(group => group.emojis.length > 0)
     }
-- 
cgit v1.2.3-70-g09d2


From cc58b9b93d4346860e244d2093f0d406eb76954c Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Tue, 20 Sep 2022 21:50:40 -0400
Subject: Add regional indicators

---
 src/components/emoji_picker/emoji_picker.js | 15 +++++++++------
 src/i18n/en.json                            |  3 ++-
 src/modules/instance.js                     | 29 +++++++++++++++++++++++++++--
 3 files changed, 38 insertions(+), 9 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index bf5e0e43..fafc2af1 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -47,8 +47,8 @@ const UNICODE_EMOJI_GROUP_ICON = {
   flags: 'flag'
 }
 
-const maybeLocalizedKeywords = (emoji, languages) => {
-  const res = [emoji.displayText]
+const maybeLocalizedKeywords = (emoji, languages, nameLocalizer) => {
+  const res = [emoji.displayText, nameLocalizer(emoji)]
   if (emoji.annotations) {
     languages.forEach(lang => {
       const keywords = emoji.annotations[lang]?.keywords || []
@@ -59,13 +59,13 @@ const maybeLocalizedKeywords = (emoji, languages) => {
   return res
 }
 
-const filterByKeyword = (list, keyword = '', languages) => {
+const filterByKeyword = (list, keyword = '', languages, nameLocalizer) => {
   if (keyword === '') return list
 
   const keywordLowercase = keyword.toLowerCase()
   const orderedEmojiList = []
   for (const emoji of list) {
-    const indices = maybeLocalizedKeywords(emoji, languages)
+    const indices = maybeLocalizedKeywords(emoji, languages, nameLocalizer)
       .map(k => k.toLowerCase().indexOf(keywordLowercase))
       .filter(k => k > -1)
 
@@ -189,7 +189,7 @@ const EmojiPicker = {
       this.showingStickers = value
     },
     filterByKeyword (list, keyword) {
-      return filterByKeyword(list, keyword, this.languages)
+      return filterByKeyword(list, keyword, this.languages, this.maybeLocalizedEmojiName)
     },
     initializeLazyLoad () {
       this.destroyLazyLoad()
@@ -305,7 +305,6 @@ const EmojiPicker = {
       }, 500)
     },
     languages () {
-      console.log('languages:', ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage))
       return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)
     },
     maybeLocalizedEmojiName () {
@@ -314,6 +313,10 @@ const EmojiPicker = {
           return emoji.displayText
         }
 
+        if (emoji.displayTextI18n) {
+          return this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args)
+        }
+
         for (const lang of this.languages) {
           if (emoji.annotations[lang]?.name) {
             return emoji.annotations[lang].name
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 2a665bd5..fb941c8d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -211,7 +211,8 @@
       "travel-and-places": "Travel & Places"
     },
     "load_all_hint": "Loaded first {saneAmount} emoji, loading all emoji may cause performance issues.",
-    "load_all": "Loading all {emojiAmount} emoji"
+    "load_all": "Loading all {emojiAmount} emoji",
+    "regional_indicator": "Regional indicator {letter}"
   },
   "errors": {
     "storage_unavailable": "Pleroma could not access browser storage. Your login or your local settings won't be saved and you might encounter unexpected issues. Try enabling cookies."
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 5a72a6d3..9be35d88 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -16,6 +16,26 @@ const SORTED_EMOJI_GROUP_IDS = [
   'flags'
 ]
 
+const REGIONAL_INDICATORS = (() => {
+  const start = 0x1F1E6
+  const end = 0x1F1FF
+  const A = 'A'.codePointAt(0)
+  const res = new Array(end - start + 1)
+  for (let i = start; i <= end; ++i) {
+    const letter = String.fromCodePoint(A + i - start)
+    res[i - start] = {
+      replacement: String.fromCodePoint(i),
+      imageUrl: false,
+      displayText: 'regional_indicator_' + letter,
+      displayTextI18n: {
+        key: 'emoji.regional_indicator',
+        args: { letter }
+      }
+    }
+  }
+  return res
+})()
+
 const defaultState = {
   // Stuff from apiConfig
   name: 'Pleroma FE',
@@ -129,6 +149,11 @@ const injectAnnotations = (emoji, annotations) => {
   }
 }
 
+const injectRegionalIndicators = groups => {
+  groups.symbols.push(...REGIONAL_INDICATORS)
+  return groups
+}
+
 const instance = {
   state: defaultState,
   mutations: {
@@ -219,7 +244,7 @@ const instance = {
             }))
             return res
           }, {})
-          commit('setInstanceOption', { name: 'emoji', value: emoji })
+          commit('setInstanceOption', { name: 'emoji', value: injectRegionalIndicators(emoji) })
         } else {
           throw (res)
         }
@@ -234,7 +259,7 @@ const instance = {
 
       return Promise.all(
         langList
-          .forEach(async lang => {
+          .map(async lang => {
             if (!state.unicodeEmojiAnnotations[lang]) {
               const annotations = await loadAnnotations(lang)
               commit('setUnicodeEmojiAnnotations', { lang, annotations })
-- 
cgit v1.2.3-70-g09d2


From 296a6fa4e3d14f0c8ca091870fd4f7e85bc34df8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 9 Oct 2022 23:42:36 +0300
Subject: some shitty initial implementation of emoji picker with popover

---
 src/components/emoji_input/emoji_input.js     |  36 ++---
 src/components/emoji_input/emoji_input.vue    |   5 +-
 src/components/emoji_picker/emoji_picker.js   |  32 ++--
 src/components/emoji_picker/emoji_picker.scss |   8 +-
 src/components/emoji_picker/emoji_picker.vue  | 210 +++++++++++++-------------
 src/components/popover/popover.js             |   6 +
 6 files changed, 150 insertions(+), 147 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 5131e699..635251be 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -115,12 +115,12 @@ const EmojiInput = {
       caret: 0,
       focused: false,
       blurTimeout: null,
-      showPicker: false,
       temporarilyHideSuggestions: false,
       keepOpen: false,
       disableClickOutside: false,
       suggestions: [],
-      overlayStyle: {}
+      overlayStyle: {},
+      pickerShown: false
     }
   },
   components: {
@@ -142,7 +142,6 @@ const EmojiInput = {
       return this.focused &&
         this.suggestions &&
         this.suggestions.length > 0 &&
-        !this.showPicker &&
         !this.temporarilyHideSuggestions
     },
     textAtCaret () {
@@ -285,8 +284,8 @@ const EmojiInput = {
       if (pickerInput) pickerInput.focus()
     },
     triggerShowPicker () {
-      this.showPicker = true
       this.$nextTick(() => {
+        this.$refs.picker.showPicker()
         this.scrollIntoView()
         this.focusPickerInput()
       })
@@ -299,12 +298,16 @@ const EmojiInput = {
       }, 0)
     },
     togglePicker () {
+      console.log('piick')
       this.input.focus()
-      this.showPicker = !this.showPicker
-      if (this.showPicker) {
+      if (!this.pickerShown) {
+        console.log('pick')
         this.scrollIntoView()
+        this.$refs.picker.showPicker()
         this.$refs.picker.startEmojiLoad()
         this.$nextTick(this.focusPickerInput)
+      } else {
+        this.$refs.picker.hidePicker()
       }
     },
     replace (replacement) {
@@ -441,6 +444,12 @@ const EmojiInput = {
         }
       })
     },
+    onPickerShown () {
+      this.pickerShown = true
+    },
+    onPickerClosed () {
+      this.pickerShown = false
+    },
     onBlur (e) {
       // Clicking on any suggestion removes focus from autocomplete,
       // preventing click handler ever executing.
@@ -458,9 +467,6 @@ const EmojiInput = {
         this.blurTimeout = null
       }
 
-      if (!this.keepOpen) {
-        this.showPicker = false
-      }
       this.focused = true
       this.setCaret(e)
       this.temporarilyHideSuggestions = false
@@ -523,27 +529,15 @@ const EmojiInput = {
           this.input.focus()
         }
       }
-
-      this.showPicker = false
     },
     onInput (e) {
-      this.showPicker = false
       this.setCaret(e)
       this.$emit('update:modelValue', e.target.value)
     },
-    onClickInput (e) {
-      this.showPicker = false
-    },
-    onClickOutside (e) {
-      if (this.disableClickOutside) return
-      this.showPicker = false
-    },
     onStickerUploaded (e) {
-      this.showPicker = false
       this.$emit('sticker-uploaded', e)
     },
     onStickerUploadFailed (e) {
-      this.showPicker = false
       this.$emit('sticker-upload-Failed', e)
     },
     setCaret ({ target: { selectionStart } }) {
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 68498ef0..63bf856e 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-click-outside="onClickOutside"
     class="emoji-input"
     :class="{ 'with-picker': !hideEmojiButton }"
   >
@@ -24,13 +23,13 @@
       <EmojiPicker
         v-if="enableEmojiPicker"
         ref="picker"
-        :class="{ hide: !showPicker }"
-        :showing="showPicker"
         :enable-sticker-picker="enableStickerPicker"
         class="emoji-picker-panel"
         @emoji="insert"
         @sticker-uploaded="onStickerUploaded"
         @sticker-upload-failed="onStickerUploadFailed"
+        @show="onPickerShown"
+        @close="onPickerClosed"
       />
     </template>
     <Popover
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index fafc2af1..d70abf5b 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,5 +1,6 @@
 import { defineAsyncComponent } from 'vue'
 import Checkbox from '../checkbox/checkbox.vue'
+import Popover from 'src/components/popover/popover.vue'
 import StillImage from '../still-image/still-image.vue'
 import { ensureFinalFallback } from '../../i18n/languages.js'
 import lozad from 'lozad'
@@ -87,10 +88,6 @@ const EmojiPicker = {
       required: false,
       type: Boolean,
       default: false
-    },
-    showing: {
-      required: true,
-      type: Boolean
     }
   },
   data () {
@@ -111,15 +108,30 @@ const EmojiPicker = {
   components: {
     StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
     Checkbox,
-    StillImage
+    StillImage,
+    Popover
   },
   methods: {
+    showPicker () {
+      console.log('pick')
+      this.$refs.popover.showPopover()
+      this.onShowing()
+    },
+    hidePicker () {
+      this.$refs.popover.hidePopover()
+    },
     setGroupRef (name) {
       return el => { this.groupRefs[name] = el }
     },
     setEmojiRef (name) {
       return el => { this.emojiRefs[name] = el }
     },
+    onPopoverShown () {
+      this.$emit('show')
+    },
+    onPopoverClosed () {
+      this.$emit('close')
+    },
     onStickerUploaded (e) {
       this.$emit('sticker-uploaded', e)
     },
@@ -251,16 +263,6 @@ const EmojiPicker = {
     allCustomGroups () {
       this.waitForDomAndInitializeLazyLoad()
       this.filteredEmojiGroups = this.getFilteredEmojiGroups()
-    },
-    showing (val) {
-      if (val) {
-        this.onShowing()
-      }
-    }
-  },
-  mounted () {
-    if (this.showing) {
-      this.onShowing()
     }
   },
   destroyed () {
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 016c46d7..53363ec1 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -6,14 +6,10 @@ $emoji-picker-header-picture-height: 32px;
 $emoji-picker-emoji-size: 32px;
 
 .emoji-picker {
+  width: 25em;
+  max-width: 100vw;
   display: flex;
   flex-direction: column;
-  position: absolute;
-  right: 0;
-  left: 0;
-  margin: 0 !important;
-  // 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/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 57bb0037..ccd45bc1 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -1,129 +1,135 @@
 <template>
-  <div
-    class="emoji-picker panel panel-default panel-body"
+  <Popover
+    trigger="click"
+    popover-class="emoji-picker popover-default"
+    ref="popover"
+    @show="onPopoverShown"
+    @close="onPopoverClosed"
   >
-    <div class="heading">
-      <span
-        ref="header"
-        class="emoji-tabs"
-      >
+    <template #content>
+      <div class="heading">
         <span
-          v-for="group in filteredEmojiGroups"
-          :ref="setGroupRef('group-header-' + group.id)"
-          :key="group.id"
-          class="emoji-tabs-item"
-          :class="{
-            active: activeGroupView === group.id
-          }"
-          :title="group.text"
-          @click.prevent="highlight(group.id)"
+          ref="header"
+          class="emoji-tabs"
         >
           <span
-            v-if="group.image"
-            class="emoji-picker-header-image"
+            v-for="group in filteredEmojiGroups"
+            :ref="setGroupRef('group-header-' + group.id)"
+            :key="group.id"
+            class="emoji-tabs-item"
+            :class="{
+              active: activeGroupView === group.id
+            }"
+            :title="group.text"
+            @click.prevent="highlight(group.id)"
           >
-            <still-image
-              :alt="group.text"
-              :src="group.image"
+            <span
+              v-if="group.image"
+              class="emoji-picker-header-image"
+            >
+              <still-image
+                :alt="group.text"
+                :src="group.image"
+              />
+            </span>
+            <FAIcon
+              v-else
+              :icon="group.icon"
+              fixed-width
             />
           </span>
-          <FAIcon
-            v-else
-            :icon="group.icon"
-            fixed-width
-          />
         </span>
-      </span>
-      <span
-        v-if="stickerPickerEnabled"
-        class="additional-tabs"
-      >
         <span
-          class="stickers-tab-icon additional-tabs-item"
-          :class="{active: showingStickers}"
-          :title="$t('emoji.stickers')"
-          @click.prevent="toggleStickers"
+          v-if="stickerPickerEnabled"
+          class="additional-tabs"
         >
-          <FAIcon
-            icon="sticky-note"
-            fixed-width
-          />
+          <span
+            class="stickers-tab-icon additional-tabs-item"
+            :class="{active: showingStickers}"
+            :title="$t('emoji.stickers')"
+            @click.prevent="toggleStickers"
+          >
+            <FAIcon
+              icon="sticky-note"
+              fixed-width
+            />
+          </span>
         </span>
-      </span>
-    </div>
-    <div
-      v-if="contentLoaded"
-      class="content"
-    >
+      </div>
       <div
-        class="emoji-content"
-        :class="{hidden: showingStickers}"
+        v-if="contentLoaded"
+        class="content"
       >
-        <div class="emoji-search">
-          <input
-            v-model="keyword"
-            type="text"
-            class="form-control"
-            :placeholder="$t('emoji.search_emoji')"
-            @input="$event.target.composing = false"
-          >
-        </div>
         <div
-          ref="emoji-groups"
-          class="emoji-groups"
-          :class="groupsScrolledClass"
-          @scroll="onScroll"
+          class="emoji-content"
+          :class="{hidden: showingStickers}"
         >
+          <div class="emoji-search">
+            <input
+              v-model="keyword"
+              type="text"
+              class="form-control"
+              :placeholder="$t('emoji.search_emoji')"
+              @input="$event.target.composing = false"
+            >
+          </div>
           <div
-            v-for="group in filteredEmojiGroups"
-            :key="group.id"
-            class="emoji-group"
+            ref="emoji-groups"
+            class="emoji-groups"
+            :class="groupsScrolledClass"
+            @scroll="onScroll"
           >
-            <h6
-              :ref="setGroupRef('group-' + group.id)"
-              class="emoji-group-title"
-            >
-              {{ group.text }}
-            </h6>
-            <span
-              v-for="emoji in group.emojis"
-              :key="group.id + emoji.displayText"
-              :title="maybeLocalizedEmojiName(emoji)"
-              class="emoji-item"
-              @click.stop.prevent="onEmoji(emoji)"
+            <div
+              v-for="group in filteredEmojiGroups"
+              :key="group.id"
+              class="emoji-group"
             >
+              <h6
+                :ref="setGroupRef('group-' + group.id)"
+                class="emoji-group-title"
+              >
+                {{ group.text }}
+              </h6>
               <span
-                v-if="!emoji.imageUrl"
-                class="emoji-picker-emoji -unicode"
-              >{{ emoji.replacement }}</span>
-              <still-image
-                v-else
-                :ref="setEmojiRef(group.id + emoji.displayText)"
-                class="emoji-picker-emoji -custom"
-                :data-src="emoji.imageUrl"
-                :data-emoji-name="group.id + emoji.displayText"
-              />
-            </span>
-            <span :ref="setGroupRef('group-end-' + group.id)" />
+                v-for="emoji in group.emojis"
+                :key="group.id + emoji.displayText"
+                :title="maybeLocalizedEmojiName(emoji)"
+                class="emoji-item"
+                @click.stop.prevent="onEmoji(emoji)"
+              >
+                <span
+                  v-if="!emoji.imageUrl"
+                  class="emoji-picker-emoji -unicode"
+                >{{ emoji.replacement }}</span>
+                <still-image
+                  v-else
+                  :ref="setEmojiRef(group.id + emoji.displayText)"
+                  class="emoji-picker-emoji -custom"
+                  :data-src="emoji.imageUrl"
+                  :data-emoji-name="group.id + emoji.displayText"
+                />
+              </span>
+              <span :ref="setGroupRef('group-end-' + group.id)" />
+            </div>
+          </div>
+          <div class="keep-open">
+            <Checkbox v-model="keepOpen">
+              {{ $t('emoji.keep_open') }}
+            </Checkbox>
           </div>
         </div>
-        <div class="keep-open">
-          <Checkbox v-model="keepOpen">
-            {{ $t('emoji.keep_open') }}
-          </Checkbox>
+        <div
+          v-if="showingStickers"
+          class="stickers-content"
+        >
+          <sticker-picker
+            @uploaded="onStickerUploaded"
+            @upload-failed="onStickerUploadFailed"
+          />
         </div>
       </div>
-      <div
-        v-if="showingStickers"
-        class="stickers-content"
-      >
-        <sticker-picker
-          @uploaded="onStickerUploaded"
-          @upload-failed="onStickerUploadFailed"
-        />
-      </div>
-    </div>
-  </div>
+    </template>
+  </Popover>
 </template>
 
 <script src="./emoji_picker.js"></script>
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 60c42f0f..3474d354 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -63,6 +63,7 @@ const Popover = {
       // used to avoid blinking if hovered onto popover
       graceTimeout: null,
       parentPopover: null,
+      disableClickOutside: false,
       childrenShown: new Set()
     }
   },
@@ -234,6 +235,10 @@ const Popover = {
     },
     showPopover () {
       if (this.disabled) return
+      this.disableClickOutside = true
+      setTimeout(() => {
+        this.disableClickOutside = false
+      }, 0)
       const wasHidden = this.hidden
       this.hidden = false
       this.parentPopover && this.parentPopover.onChildPopoverState(this, true)
@@ -294,6 +299,7 @@ const Popover = {
       }
     },
     onClickOutside (e) {
+      if (this.disableClickOutside) return
       if (this.hidden) return
       if (this.$refs.content && this.$refs.content.contains(e.target)) return
       if (this.$el.contains(e.target)) return
-- 
cgit v1.2.3-70-g09d2


From 8fa1f0b50dcf51e976330163b819dfaf82d30a53 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 10 Oct 2022 00:33:58 +0300
Subject: move keepOpen to picker

---
 src/components/emoji_input/emoji_input.js   | 2 --
 src/components/emoji_picker/emoji_picker.js | 3 +++
 2 files changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 635251be..6532654f 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -116,7 +116,6 @@ const EmojiInput = {
       focused: false,
       blurTimeout: null,
       temporarilyHideSuggestions: false,
-      keepOpen: false,
       disableClickOutside: false,
       suggestions: [],
       overlayStyle: {},
@@ -344,7 +343,6 @@ const EmojiInput = {
         spaceAfter,
         after
       ].join('')
-      this.keepOpen = keepOpen
       this.$emit('update:modelValue', newValue)
       const position = this.caret + (insertion + spaceAfter + spaceBefore).length
       if (!keepOpen) {
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index d70abf5b..3fad4601 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -140,6 +140,9 @@ const EmojiPicker = {
     },
     onEmoji (emoji) {
       const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
+      if (!this.keepOpen) {
+        this.$refs.popover.hidePopover()
+      }
       this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
     },
     onScroll (e) {
-- 
cgit v1.2.3-70-g09d2


From d2fabe1a71207f92e10283fc5a881d883cb52ae1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 10 Oct 2022 00:37:59 +0300
Subject: use anchor for picker

---
 src/components/emoji_input/emoji_input.js   | 2 ++
 src/components/emoji_picker/emoji_picker.js | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 6532654f..eb64e054 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -141,6 +141,7 @@ const EmojiInput = {
       return this.focused &&
         this.suggestions &&
         this.suggestions.length > 0 &&
+        !this.pickerShown &&
         !this.temporarilyHideSuggestions
     },
     textAtCaret () {
@@ -205,6 +206,7 @@ const EmojiInput = {
     this.input = input
     this.caretEl = hiddenOverlayCaret
     suggestorPopover.setAnchorEl(this.caretEl)
+    this.$refs.picker.setAnchorEl(this.caretEl)
     const style = getComputedStyle(this.input)
     this.overlayStyle.padding = style.padding
     this.overlayStyle.border = style.border
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 3fad4601..e907def9 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -113,13 +113,15 @@ const EmojiPicker = {
   },
   methods: {
     showPicker () {
-      console.log('pick')
       this.$refs.popover.showPopover()
       this.onShowing()
     },
     hidePicker () {
       this.$refs.popover.hidePopover()
     },
+    setAnchorEl (el) {
+      this.$refs.popover.setAnchorEl(el)
+    },
     setGroupRef (name) {
       return el => { this.groupRefs[name] = el }
     },
-- 
cgit v1.2.3-70-g09d2


From 692342a77f1b91a88a30aadfd20994c293ad65e0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 10 Oct 2022 20:11:04 +0300
Subject: focus search input when opening emoji picker

---
 src/components/emoji_input/emoji_input.js    | 8 --------
 src/components/emoji_picker/emoji_picker.js  | 1 +
 src/components/emoji_picker/emoji_picker.vue | 1 +
 3 files changed, 2 insertions(+), 8 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index eb64e054..92c10f09 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -278,17 +278,10 @@ const EmojiInput = {
     }
   },
   methods: {
-    focusPickerInput () {
-      const pickerEl = this.$refs.picker.$el
-      if (!pickerEl) return
-      const pickerInput = pickerEl.querySelector('input')
-      if (pickerInput) pickerInput.focus()
-    },
     triggerShowPicker () {
       this.$nextTick(() => {
         this.$refs.picker.showPicker()
         this.scrollIntoView()
-        this.focusPickerInput()
       })
       // This temporarily disables "click outside" handler
       // since external trigger also means click originates
@@ -306,7 +299,6 @@ const EmojiInput = {
         this.scrollIntoView()
         this.$refs.picker.showPicker()
         this.$refs.picker.startEmojiLoad()
-        this.$nextTick(this.focusPickerInput)
       } else {
         this.$refs.picker.hidePicker()
       }
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index e907def9..d1372c4a 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -245,6 +245,7 @@ const EmojiPicker = {
       this.filteredEmojiGroups = this.getFilteredEmojiGroups()
       if (!oldContentLoaded) {
         this.$nextTick(() => {
+          this.$refs.search.focus()
           if (this.defaultGroup) {
             this.highlight(this.defaultGroup)
           }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index ccd45bc1..a2c99c16 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -71,6 +71,7 @@
               class="form-control"
               :placeholder="$t('emoji.search_emoji')"
               @input="$event.target.composing = false"
+              ref="search"
             >
           </div>
           <div
-- 
cgit v1.2.3-70-g09d2


From c1be65332f4105c172550308a36445166077b47e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 1 Nov 2022 23:25:34 +0200
Subject: always focus search when opening emoji picker

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

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index d1372c4a..dd5e5217 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -240,12 +240,14 @@ const EmojiPicker = {
     },
     onShowing () {
       const oldContentLoaded = this.contentLoaded
+      this.$nextTick(() => {
+        this.$refs.search.focus()
+      })
       this.contentLoaded = true
       this.waitForDomAndInitializeLazyLoad()
       this.filteredEmojiGroups = this.getFilteredEmojiGroups()
       if (!oldContentLoaded) {
         this.$nextTick(() => {
-          this.$refs.search.focus()
           if (this.defaultGroup) {
             this.highlight(this.defaultGroup)
           }
-- 
cgit v1.2.3-70-g09d2


From 3c0e7882b10989424c3ec98413b555373efa1719 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 21 Nov 2022 22:17:33 +0200
Subject: lint

---
 src/components/emoji_input/emoji_input.vue                 | 13 ++++++++++---
 src/components/emoji_picker/emoji_picker.vue               |  4 ++--
 src/components/mobile_nav/mobile_nav.vue                   |  6 +++---
 src/components/notifications/notifications.vue             |  2 +-
 src/components/popover/popover.vue                         |  5 ++++-
 .../quick_filter_settings/quick_filter_settings.vue        |  2 +-
 src/components/quick_view_settings/quick_view_settings.vue |  2 +-
 src/components/search/search.js                            |  4 ++--
 src/components/timeline/timeline.vue                       | 14 ++++++++++----
 9 files changed, 34 insertions(+), 18 deletions(-)

(limited to 'src/components/emoji_picker')

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 63bf856e..c9bbc18f 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -6,9 +6,16 @@
   >
     <slot />
     <!-- TODO: make the 'x' disappear if at the end maybe? -->
-    <div class="hidden-overlay" :style="overlayStyle" ref="hiddenOverlay">
+    <div
+      ref="hiddenOverlay"
+      class="hidden-overlay"
+      :style="overlayStyle"
+    >
       <span>{{ preText }}</span>
-      <span class="caret" ref="hiddenOverlayCaret">x</span>
+      <span
+        ref="hiddenOverlayCaret"
+        class="caret"
+      >x</span>
       <span>{{ postText }}</span>
     </div>
     <template v-if="enableEmojiPicker">
@@ -33,9 +40,9 @@
       />
     </template>
     <Popover
+      ref="suggestorPopover"
       class="autocomplete-panel"
       placement="bottom"
-      ref="suggestorPopover"
     >
       <template #content>
         <div
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index a2c99c16..ff56d637 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -1,8 +1,8 @@
 <template>
   <Popover
+    ref="popover"
     trigger="click"
     popover-class="emoji-picker popover-default"
-    ref="popover"
     @show="onPopoverShown"
     @close="onPopoverClosed"
   >
@@ -66,12 +66,12 @@
         >
           <div class="emoji-search">
             <input
+              ref="search"
               v-model="keyword"
               type="text"
               class="form-control"
               :placeholder="$t('emoji.search_emoji')"
               @input="$event.target.composing = false"
-              ref="search"
             >
           </div>
           <div
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 6e732d1f..d642008b 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -11,7 +11,7 @@
         <button
           class="button-unstyled mobile-nav-button"
           :title="$t('nav.mobile_sidebar')"
-          :aria-expanaded="this.$refs.sideDrawer && !this.$refs.sideDrawer.closed"
+          :aria-expanaded="$refs.sideDrawer && !$refs.sideDrawer.closed"
           @click.stop.prevent="toggleMobileSidebar()"
         >
           <FAIcon
@@ -51,7 +51,7 @@
     >
       <div class="mobile-notifications-header">
         <span class="title">{{ $t('notifications.notifications') }}</span>
-        <span class="spacer"/>
+        <span class="spacer" />
         <button
           v-if="notificationsAtTop"
           class="button-unstyled mobile-nav-button"
@@ -79,8 +79,8 @@
       </div>
       <div
         id="mobile-notifications"
-        class="mobile-notifications"
         ref="mobileNotifications"
+        class="mobile-notifications"
         @scroll="onScroll"
       />
     </aside>
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 3d5878d4..633efca6 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -22,8 +22,8 @@
             >{{ unseenCount }}</span>
           </div>
           <div
-            class="rightside-button"
             v-if="showScrollTop"
+            class="rightside-button"
           >
             <button
               class="button-unstyled scroll-to-top-button"
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index c2cf2327..2869d736 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -12,7 +12,10 @@
     >
       <slot name="trigger" />
     </button>
-    <teleport :disabled="!teleport" to="#popovers">
+    <teleport
+      :disabled="!teleport"
+      to="#popovers"
+    >
       <transition name="fade">
         <div
           v-if="!hidden"
diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index 87fcd716..f2aa61ee 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -3,7 +3,7 @@
     trigger="click"
     class="QuickFilterSettings"
     :bound-to="{ x: 'container' }"
-    :triggerAttrs="{ title: $t('timeline.quick_filter_settings') }"
+    :trigger-attrs="{ title: $t('timeline.quick_filter_settings') }"
   >
     <template #content>
       <div class="dropdown-menu">
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index d7c9bf3b..4bd81c5b 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -3,7 +3,7 @@
     trigger="click"
     class="QuickViewSettings"
     :bound-to="{ x: 'container' }"
-    :triggerAttrs="{ title: $t('timeline.quick_view_settings') }"
+    :trigger-attrs="{ title: $t('timeline.quick_view_settings') }"
   >
     <template #content>
       <div class="dropdown-menu">
diff --git a/src/components/search/search.js b/src/components/search/search.js
index 8d4212cd..877d6f30 100644
--- a/src/components/search/search.js
+++ b/src/components/search/search.js
@@ -83,11 +83,11 @@ const Search = {
         this.lastStatusFetchCount = 0
       }
 
-      this.$store.dispatch('search', { q: query, resolve: true, offset: this.statusesOffset, 'type': searchType })
+      this.$store.dispatch('search', { q: query, resolve: true, offset: this.statusesOffset, type: searchType })
         .then(data => {
           this.loading = false
 
-          let oldLength = this.statuses.length
+          const oldLength = this.statuses.length
 
           // Always append to old results. If new results are empty, this doesn't change anything
           this.userIds = this.userIds.concat(map(data.accounts, 'id'))
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 877a0cc0..2279f21a 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -6,8 +6,8 @@
         :timeline-name="timelineName"
       />
       <div
-        class="rightside-button"
         v-if="showScrollTop && !embedded"
+        class="rightside-button"
       >
         <button
           class="button-unstyled scroll-to-top-button"
@@ -26,8 +26,8 @@
       </div>
       <template v-if="mobileLayout && !embedded">
         <div
-          class="rightside-button"
           v-if="showLoadButton"
+          class="rightside-button"
         >
           <button
             class="button-unstyled loadmore-button"
@@ -72,8 +72,14 @@
           {{ $t('timeline.up_to_date') }}
         </div>
       </template>
-      <QuickFilterSettings v-if="!embedded" class="rightside-button"/>
-      <QuickViewSettings v-if="!embedded" class="rightside-button"/>
+      <QuickFilterSettings
+        v-if="!embedded"
+        class="rightside-button"
+      />
+      <QuickViewSettings
+        v-if="!embedded"
+        class="rightside-button"
+      />
     </div>
     <div :class="classes.body">
       <div
-- 
cgit v1.2.3-70-g09d2