From 8d46fd78c7ada7600afe7b74932a6f2380964592 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 7 Apr 2021 22:42:34 +0300
Subject: migrate to v-slot

---
 src/components/user_card/user_card.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/components/user_card')

diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 4b7ee7d5..78b0813f 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -53,17 +53,17 @@
               >
                 {{ user.name }}
               </div>
-              <a
+              <button
                 v-if="isOtherUser && !user.is_local"
                 :href="user.statusnet_profile_url"
                 target="_blank"
-                class="external-link-button"
+                class="button-unstyled external-link-button"
               >
                 <FAIcon
                   class="icon"
                   icon="external-link-alt"
                 />
-              </a>
+              </button>
               <AccountActions
                 v-if="isOtherUser && loggedIn"
                 :user="user"
-- 
cgit v1.2.3-70-g09d2


From 90345f158ff2eb12e619dbd7406f2fa81c379637 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 18 Jun 2021 02:01:37 +0300
Subject: gallery now supports flash, fixes for flash component. refactored
 media modal

---
 src/components/attachment/attachment.js          |  9 +++++----
 src/components/flash/flash.vue                   | 21 ++++++++++++---------
 src/components/media_modal/media_modal.js        |  8 +++++---
 src/components/media_modal/media_modal.vue       |  7 +++++++
 src/components/status_content/status_content.js  |  6 ------
 src/components/status_content/status_content.vue |  2 +-
 src/components/user_card/user_card.js            |  2 +-
 src/modules/media_viewer.js                      |  9 +++++----
 8 files changed, 36 insertions(+), 28 deletions(-)

(limited to 'src/components/user_card')

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 06928ca6..3ea96a7a 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -113,13 +113,14 @@ const Attachment = {
     },
     openModal (event) {
       if (this.useModal) {
-        this.setMedia()
-        this.$store.dispatch('setCurrent', this.attachment)
+        this.$emit('setMedia')
+        this.$store.dispatch('setCurrentMedia', this.attachment)
       }
     },
     openModalForce (event) {
-      this.setMedia()
-      this.$store.dispatch('setCurrent', this.attachment)
+      this.$emit('setMedia')
+      this.$store.dispatch('setCurrentMedia', this.attachment)
+    },
     },
     stopFlash () {
       this.$refs.flash.closePlayer()
diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue
index 5a77d235..95f71950 100644
--- a/src/components/flash/flash.vue
+++ b/src/components/flash/flash.vue
@@ -44,8 +44,9 @@
 <style lang="scss">
 @import '../../_variables.scss';
 .Flash {
+  display: inline-block;
   width: 100%;
-  height: 260px;
+  height: 100%;
   position: relative;
 
   .player {
@@ -53,6 +54,16 @@
     width: 100%;
   }
 
+  .placeholder {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg);
+    color: var(--link);
+  }
+
   .hider {
     top: 0;
   }
@@ -69,13 +80,5 @@
     display: none;
     visibility: 'hidden';
   }
-
-  .placeholder {
-    height: 100%;
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
 }
 </style>
diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index e7384c93..b6919366 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -3,6 +3,7 @@ import VideoAttachment from '../video_attachment/video_attachment.vue'
 import Modal from '../modal/modal.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import GestureService from '../../services/gesture_service/gesture_service'
+import Flash from 'src/components/flash/flash.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faChevronLeft,
@@ -18,7 +19,8 @@ const MediaModal = {
   components: {
     StillImage,
     VideoAttachment,
-    Modal
+    Modal,
+    Flash
   },
   computed: {
     showing () {
@@ -67,13 +69,13 @@ const MediaModal = {
     goPrev () {
       if (this.canNavigate) {
         const prevIndex = this.currentIndex === 0 ? this.media.length - 1 : (this.currentIndex - 1)
-        this.$store.dispatch('setCurrent', this.media[prevIndex])
+        this.$store.dispatch('setCurrentMedia', this.media[prevIndex])
       }
     },
     goNext () {
       if (this.canNavigate) {
         const nextIndex = this.currentIndex === this.media.length - 1 ? 0 : (this.currentIndex + 1)
-        this.$store.dispatch('setCurrent', this.media[nextIndex])
+        this.$store.dispatch('setCurrentMedia', this.media[nextIndex])
       }
     },
     handleKeyupEvent (e) {
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 54bc5335..a578bc71 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -28,6 +28,13 @@
       :title="currentMedia.description"
       controls
     />
+    <Flash
+      v-if="type === 'flash'"
+      class="modal-image"
+      :src="currentMedia.url"
+      :alt="currentMedia.description"
+      :title="currentMedia.description"
+    />
     <button
       v-if="canNavigate"
       :title="$t('media_modal.previous')"
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 49f9d7f8..c085c992 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -72,12 +72,6 @@ const StatusContent = {
     Gallery,
     LinkPreview,
     StatusBody
-  },
-  methods: {
-    setMedia () {
-      const attachments = this.status.attachments
-      return () => this.$store.dispatch('setMedia', attachments)
-    }
   }
 }
 
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 0f999da6..a9511fbe 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -16,8 +16,8 @@
         v-if="status.attachments.length !== 0"
         :nsfw="nsfwClickthrough"
         :attachments="status.attachments"
-        :set-media="setMedia()"
         :size="attachmentSize"
+        @setMedia="onMedia"
         @play="$emit('mediaplay', attachment.id)"
         @pause="$emit('mediapause', attachment.id)"
       />
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index d9fb64d1..23e6358f 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -159,7 +159,7 @@ export default {
         mimetype: 'image'
       }
       this.$store.dispatch('setMedia', [attachment])
-      this.$store.dispatch('setCurrent', attachment)
+      this.$store.dispatch('setCurrentMedia', attachment)
     },
     mentionUser () {
       this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
diff --git a/src/modules/media_viewer.js b/src/modules/media_viewer.js
index 721c25e6..ebcba01d 100644
--- a/src/modules/media_viewer.js
+++ b/src/modules/media_viewer.js
@@ -1,4 +1,5 @@
 import fileTypeService from '../services/file_type/file_type.service.js'
+const supportedTypes = new Set(['image', 'video', 'audio', 'flash'])
 
 const mediaViewer = {
   state: {
@@ -10,7 +11,7 @@ const mediaViewer = {
     setMedia (state, media) {
       state.media = media
     },
-    setCurrent (state, index) {
+    setCurrentMedia (state, index) {
       state.activated = true
       state.currentIndex = index
     },
@@ -22,13 +23,13 @@ const mediaViewer = {
     setMedia ({ commit }, attachments) {
       const media = attachments.filter(attachment => {
         const type = fileTypeService.fileType(attachment.mimetype)
-        return type === 'image' || type === 'video' || type === 'audio'
+        return supportedTypes.has(type)
       })
       commit('setMedia', media)
     },
-    setCurrent ({ commit, state }, current) {
+    setCurrentMedia ({ commit, state }, current) {
       const index = state.media.indexOf(current)
-      commit('setCurrent', index || 0)
+      commit('setCurrentMedia', index || 0)
     },
     closeMediaViewer ({ commit }) {
       commit('close')
-- 
cgit v1.2.3-70-g09d2


From 0d073d607cb2d033a9556eca64c5e905864ba2ed Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 19 Feb 2022 22:34:08 +0200
Subject: enable link handling in user bios to fix links not having _blank

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

(limited to 'src/components/user_card')

diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 5f957003..0708f387 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -275,6 +275,7 @@
         class="user-card-bio"
         :html="user.description_html"
         :emoji="user.emoji"
+        :handle-links="true"
       />
     </div>
   </div>
-- 
cgit v1.2.3-70-g09d2


From e51144809f4c743072e040e0875402596bebb3cf Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 16 Mar 2022 22:02:44 +0200
Subject: shit boots yo

---
 build/webpack.base.conf.js                       |  15 +-
 package.json                                     |  19 +-
 src/components/registration/registration.js      |   6 +-
 src/components/settings_modal/settings_modal.vue |  34 +-
 src/components/user_card/user_card.vue           |   2 +-
 src/main.js                                      |  14 +-
 yarn.lock                                        | 539 +++++++++++++++++------
 7 files changed, 461 insertions(+), 168 deletions(-)

(limited to 'src/components/user_card')

diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index 4a02852c..65d398c8 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -3,8 +3,8 @@ var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
 var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
-var { VueLoaderPlugin } = require('vue-loader')
 var CopyPlugin = require('copy-webpack-plugin');
+var { VueLoaderPlugin } = require('vue-loader')
 
 var env = process.env.NODE_ENV
 // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@@ -30,12 +30,12 @@ module.exports = {
     }
   },
   resolve: {
-    extensions: ['.js', '.vue', '.jsx'],
+    extensions: ['.js', '.jsx', '.vue'],
     modules: [
       path.join(__dirname, '../node_modules')
     ],
     alias: {
-      vue: "@vue/runtime-dom",
+      'vue': '@vue/compat',
       'static': path.resolve(__dirname, '../static'),
       'src': path.resolve(__dirname, '../src'),
       'assets': path.resolve(__dirname, '../src/assets'),
@@ -61,7 +61,14 @@ module.exports = {
       },
       {
         test: /\.vue$/,
-        use: 'vue-loader'
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            compatConfig: {
+              MODE: 2
+            }
+          }
+        }
       },
       {
         test: /\.jsx?$/,
diff --git a/package.json b/package.json
index adcfa3d9..4f494324 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "@fortawesome/fontawesome-svg-core": "1.3.0",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/vue-fontawesome": "2.0.6",
+    "@fortawesome/vue-fontawesome": "3.0.0-5",
     "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
     "body-scroll-lock": "2.6.4",
     "chromatism": "3.0.0",
@@ -35,12 +35,13 @@
     "punycode.js": "2.1.0",
     "ruffle-mirror": "2021.4.11",
     "v-click-outside": "2.1.5",
-    "vue": "2.6.11",
-    "vue-i18n": "7.8.1",
-    "vue-router": "3.0.2",
-    "vue-template-compiler": "2.6.11",
-    "vuelidate": "0.7.7",
-    "vuex": "3.0.1"
+    "vue": "^3.1.0",
+    "@vue/compat": "^3.1.0",
+    "vue-i18n": "9.1.9",
+    "vue-router": "4.0.14",
+    "@vuelidate/core": "2.0.0-alpha.35",
+    "@vuelidate/validators": "2.0.0-alpha.27",
+    "vuex": "4.0.2"
   },
   "devDependencies": {
     "@babel/core": "7.7.5",
@@ -50,7 +51,9 @@
     "@ungap/event-target": "0.2.3",
     "@vue/babel-helper-vue-jsx-merge-props": "1.2.1",
     "@vue/babel-preset-jsx": "1.2.4",
+    "@vue/babel-plugin-jsx": "1.1.1",
     "@vue/test-utils": "1.0.0-beta.28",
+    "@vue/compiler-sfc": "^3.1.0",
     "autoprefixer": "6.7.7",
     "babel-eslint": "7.2.3",
     "babel-loader": "8.0.6",
@@ -112,7 +115,7 @@
     "stylelint-config-standard": "20.0.0",
     "stylelint-rscss": "0.4.0",
     "url-loader": "1.1.2",
-    "vue-loader": "14.2.4",
+    "vue-loader": "^16.0.0",
     "vue-style-loader": "4.1.2",
     "webpack": "4.46.0",
     "webpack-dev-middleware": "3.7.3",
diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index 1ac8e8be..531cc480 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -1,9 +1,9 @@
-import { validationMixin } from 'vuelidate'
-import { required, requiredIf, sameAs } from 'vuelidate/lib/validators'
+import useVuelidate from '@vuelidate/core'
+import { required, requiredIf, sameAs } from '@vuelidate/validators'
 import { mapActions, mapState } from 'vuex'
 
 const registration = {
-  mixins: [validationMixin],
+  setup () { return { v$: useVuelidate() } },
   data: () => ({
     user: {
       email: '',
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 1805c77f..ccbb2af9 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -11,23 +11,25 @@
           {{ $t('settings.settings') }}
         </span>
         <transition name="fade">
-          <template v-if="currentSaveStateNotice">
-            <div
-              v-if="currentSaveStateNotice.error"
-              class="alert error"
-              @click.prevent
-            >
-              {{ $t('settings.saving_err') }}
-            </div>
+          <div>
+            <template v-if="currentSaveStateNotice">
+              <div
+                v-if="currentSaveStateNotice.error"
+                class="alert error"
+                @click.prevent
+              >
+                {{ $t('settings.saving_err') }}
+              </div>
 
-            <div
-              v-if="!currentSaveStateNotice.error"
-              class="alert transparent"
-              @click.prevent
-            >
-              {{ $t('settings.saving_ok') }}
-            </div>
-          </template>
+              <div
+                v-if="!currentSaveStateNotice.error"
+                class="alert transparent"
+                @click.prevent
+              >
+                {{ $t('settings.saving_ok') }}
+              </div>
+            </template>
+          </div>
         </transition>
         <button
           class="btn button-default"
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 2576bf87..0708f387 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -66,7 +66,7 @@
                   class="icon"
                   icon="external-link-alt"
                 />
-              </button>
+              </a>
               <AccountActions
                 v-if="isOtherUser && loggedIn"
                 :user="user"
diff --git a/src/main.js b/src/main.js
index 2d50dff5..eacd554c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -31,19 +31,7 @@ import afterStoreSetup from './boot/after_store.js'
 
 const currentLocale = (window.navigator.language || 'en').split('-')[0]
 
-Vue.use(Vuex)
-Vue.use(VueRouter)
-Vue.use(VueI18n)
-Vue.use(VueClickOutside)
-Vue.use(PortalVue)
-Vue.use(VBodyScrollLock)
-
-Vue.config.ignoredElements = ['pinch-zoom']
-
-Vue.component('FAIcon', FontAwesomeIcon)
-Vue.component('FALayers', FontAwesomeLayers)
-
-const i18n = new VueI18n({
+const i18n = createI18n({
   // By default, use the browser locale, we will update it if neccessary
   locale: 'en',
   fallbackLocale: 'en',
diff --git a/yarn.lock b/yarn.lock
index 4eecbd20..bcd8d06f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15,6 +15,13 @@
   dependencies:
     "@babel/highlight" "^7.10.4"
 
+"@babel/code-frame@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
+  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
+  dependencies:
+    "@babel/highlight" "^7.16.7"
+
 "@babel/code-frame@^7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
@@ -73,6 +80,15 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.17.3":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.7.tgz#8da2599beb4a86194a3b24df6c085931d9ee45ad"
+  integrity sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==
+  dependencies:
+    "@babel/types" "^7.17.0"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.4.tgz#db651e2840ca9aa66f327dcec1dc5f5fa9611369"
@@ -124,6 +140,13 @@
     "@babel/types" "^7.7.4"
     lodash "^4.17.13"
 
+"@babel/helper-environment-visitor@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
+  integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-explode-assignable-expression@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.7.4.tgz#fa700878e008d85dc51ba43e9fb835cddfe05c84"
@@ -141,6 +164,15 @@
     "@babel/template" "^7.10.4"
     "@babel/types" "^7.10.4"
 
+"@babel/helper-function-name@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz#f1ec51551fb1c8956bc8dd95f38523b6cf375f8f"
+  integrity sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-function-name@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz#ab6e041e7135d436d8f0a3eca15de5b67a341a2e"
@@ -157,6 +189,13 @@
   dependencies:
     "@babel/types" "^7.10.4"
 
+"@babel/helper-get-function-arity@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz#ea08ac753117a669f1508ba06ebcc49156387419"
+  integrity sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-get-function-arity@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz#cb46348d2f8808e632f0ab048172130e636005f0"
@@ -164,6 +203,13 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-hoist-variables@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
+  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-hoist-variables@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.7.4.tgz#612384e3d823fdfaaf9fce31550fe5d4db0f3d12"
@@ -249,6 +295,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
   integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
 
+"@babel/helper-plugin-utils@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
+  integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
+
 "@babel/helper-regex@^7.0.0", "@babel/helper-regex@^7.4.4":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.5.5.tgz#0aa6824f7100a2e0e89c1527c23936c152cab351"
@@ -310,6 +361,13 @@
   dependencies:
     "@babel/types" "^7.10.4"
 
+"@babel/helper-split-export-declaration@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
+  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-split-export-declaration@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz#57292af60443c4a3622cf74040ddc28e68336fd8"
@@ -322,6 +380,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
   integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
 
+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+
 "@babel/helper-wrap-function@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.7.4.tgz#37ab7fed5150e22d9d7266e830072c0cdd8baace"
@@ -367,11 +430,25 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.16.7":
+  version "7.16.10"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.10.tgz#744f2eb81579d6eea753c227b0f570ad785aba88"
+  integrity sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.10.4", "@babel/parser@^7.10.5":
   version "7.10.5"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.5.tgz#e7c6bf5a7deff957cec9f04b551e2762909d826b"
   integrity sha512-wfryxy4bE1UivvQKSQDU4/X6dr+i8bctjUjj8Zyt3DQy7NtPizJXT8M52nqpNKL+nq2PW8lxk4ZqLj0fD4B4hQ==
 
+"@babel/parser@^7.16.4", "@babel/parser@^7.16.7", "@babel/parser@^7.17.3":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.7.tgz#fc19b645a5456c8d6fdb6cecd3c66c0173902800"
+  integrity sha512-bm3AQf45vR4gKggRfvJdYJ0gFLoCbsPxiFLSH6hTVYABptNHY6l9NrhnucVjQ/X+SPtLANT9lc0fFhikj+VBRA==
+
 "@babel/parser@^7.7.4", "@babel/parser@^7.7.5":
   version "7.7.5"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.5.tgz#cbf45321619ac12d83363fcf9c94bb67fa646d71"
@@ -447,6 +524,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-jsx@^7.0.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz#50b6571d13f764266a113d77c82b4a6508bbe665"
+  integrity sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-syntax-jsx@^7.2.0":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.7.4.tgz#dab2b56a36fb6c3c222a1fbc71f7bf97f327a9ec"
@@ -804,6 +888,15 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/template@^7.0.0", "@babel/template@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
+  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/template@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
@@ -822,6 +915,22 @@
     "@babel/parser" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/traverse@^7.0.0":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.3.tgz#0ae0f15b27d9a92ba1f2263358ea7c4e7db47b57"
+  integrity sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.3"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.17.3"
+    "@babel/types" "^7.17.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/traverse@^7.10.4", "@babel/traverse@^7.10.5":
   version "7.10.5"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.10.5.tgz#77ce464f5b258be265af618d8fddf0536f20b564"
@@ -869,6 +978,14 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.16.7", "@babel/types@^7.17.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
+  integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.4.tgz#516570d539e44ddf308c07569c258ff94fde9193"
@@ -916,10 +1033,66 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "^0.2.36"
 
-"@fortawesome/vue-fontawesome@2.0.6":
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.6.tgz#87e691ed87f28f4667238573a29743f543a087f6"
-  integrity sha512-V3vT3flY15AKbUS31aZOP12awQI3aAzkr2B1KnqcHLmwrmy51DW3pwyBczKdypV8QxBZ8U68Hl2XxK2nudTxpg==
+"@fortawesome/vue-fontawesome@3.0.0-5":
+  version "3.0.0-5"
+  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.0-5.tgz#6251e6917198362fa56510eb256cfb6aa6d30a32"
+  integrity sha512-aNmBT4bOecrFsZTog1l6AJDQHPP3ocXV+WQ3Ogy8WZCqstB/ahfhH4CPu5i4N9Hw0MBKXqE+LX+NbUxcj8cVTw==
+
+"@intlify/core-base@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.1.9.tgz#e4e8c951010728e4af3a0d13d74cf3f9e7add7f6"
+  integrity sha512-x5T0p/Ja0S8hs5xs+ImKyYckVkL4CzcEXykVYYV6rcbXxJTe2o58IquSqX9bdncVKbRZP7GlBU1EcRaQEEJ+vw==
+  dependencies:
+    "@intlify/devtools-if" "9.1.9"
+    "@intlify/message-compiler" "9.1.9"
+    "@intlify/message-resolver" "9.1.9"
+    "@intlify/runtime" "9.1.9"
+    "@intlify/shared" "9.1.9"
+    "@intlify/vue-devtools" "9.1.9"
+
+"@intlify/devtools-if@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/devtools-if/-/devtools-if-9.1.9.tgz#a30e1dd1256ff2c5c98d8d75d075384fba898e5d"
+  integrity sha512-oKSMKjttG3Ut/1UGEZjSdghuP3fwA15zpDPcjkf/1FjlOIm6uIBGMNS5jXzsZy593u+P/YcnrZD6cD3IVFz9vQ==
+  dependencies:
+    "@intlify/shared" "9.1.9"
+
+"@intlify/message-compiler@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.1.9.tgz#1193cbd224a71c2fb981455b8534a3c766d2948d"
+  integrity sha512-6YgCMF46Xd0IH2hMRLCssZI3gFG4aywidoWQ3QP4RGYQXQYYfFC54DxhSgfIPpVoPLQ+4AD29eoYmhiHZ+qLFQ==
+  dependencies:
+    "@intlify/message-resolver" "9.1.9"
+    "@intlify/shared" "9.1.9"
+    source-map "0.6.1"
+
+"@intlify/message-resolver@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/message-resolver/-/message-resolver-9.1.9.tgz#3155ccd2f5e6d0dc16cad8b7f1d8e97fcda05bfc"
+  integrity sha512-Lx/DBpigeK0sz2BBbzv5mu9/dAlt98HxwbG7xLawC3O2xMF9MNWU5FtOziwYG6TDIjNq0O/3ZbOJAxwITIWXEA==
+
+"@intlify/runtime@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/runtime/-/runtime-9.1.9.tgz#2c12ce29518a075629efed0a8ed293ee740cb285"
+  integrity sha512-XgPw8+UlHCiie3fI41HPVa/VDJb3/aSH7bLhY1hJvlvNV713PFtb4p4Jo+rlE0gAoMsMCGcsiT982fImolSltg==
+  dependencies:
+    "@intlify/message-compiler" "9.1.9"
+    "@intlify/message-resolver" "9.1.9"
+    "@intlify/shared" "9.1.9"
+
+"@intlify/shared@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.1.9.tgz#0baaf96128b85560666bec784ffb01f6623cc17a"
+  integrity sha512-xKGM1d0EAxdDFCWedcYXOm6V5Pfw/TMudd6/qCdEb4tv0hk9EKeg7lwQF1azE0dP2phvx0yXxrt7UQK+IZjNdw==
+
+"@intlify/vue-devtools@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/vue-devtools/-/vue-devtools-9.1.9.tgz#2be8f4dbe7f7ed4115676eb32348141d411e426b"
+  integrity sha512-YPehH9uL4vZcGXky4Ev5qQIITnHKIvsD2GKGXgqf+05osMUI6WSEQHaN9USRa318Rs8RyyPCiDfmA0hRu3k7og==
+  dependencies:
+    "@intlify/message-resolver" "9.1.9"
+    "@intlify/runtime" "9.1.9"
+    "@intlify/shared" "9.1.9"
 
 "@kazvmoe-infra/pinch-zoom-element@1.2.0":
   version "1.2.0"
@@ -1029,6 +1202,26 @@
   resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz#31624a7a505fb14da1d58023725a4c5f270e6a81"
   integrity sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA==
 
+"@vue/babel-helper-vue-transform-on@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz#9b9c691cd06fc855221a2475c3cc831d774bc7dc"
+  integrity sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==
+
+"@vue/babel-plugin-jsx@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.1.tgz#0c5bac27880d23f89894cd036a37b55ef61ddfc1"
+  integrity sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/plugin-syntax-jsx" "^7.0.0"
+    "@babel/template" "^7.0.0"
+    "@babel/traverse" "^7.0.0"
+    "@babel/types" "^7.0.0"
+    "@vue/babel-helper-vue-transform-on" "^1.0.2"
+    camelcase "^6.0.0"
+    html-tags "^3.1.0"
+    svg-tags "^1.0.0"
+
 "@vue/babel-plugin-transform-vue-jsx@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.2.1.tgz#646046c652c2f0242727f34519d917b064041ed7"
@@ -1104,6 +1297,106 @@
     "@vue/babel-plugin-transform-vue-jsx" "^1.2.1"
     camelcase "^5.0.0"
 
+"@vue/compat@^3.1.0":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/compat/-/compat-3.2.31.tgz#9c8bdf265eeba1777e5edb56cda73581e351a648"
+  integrity sha512-hhwJk/SRwpT2OADctj+t7QZCRIgh04AcelGpe6gdj0OxA75xpHnPrG+fmG37U3Z6WDrNHZpGvu2eXBzWXM4OVA==
+
+"@vue/compiler-core@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.31.tgz#d38f06c2cf845742403b523ab4596a3fda152e89"
+  integrity sha512-aKno00qoA4o+V/kR6i/pE+aP+esng5siNAVQ422TkBNM6qA4veXiZbSe8OTXHXquEi/f6Akc+nLfB4JGfe4/WQ==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/shared" "3.2.31"
+    estree-walker "^2.0.2"
+    source-map "^0.6.1"
+
+"@vue/compiler-dom@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.31.tgz#b1b7dfad55c96c8cc2b919cd7eb5fd7e4ddbf00e"
+  integrity sha512-60zIlFfzIDf3u91cqfqy9KhCKIJgPeqxgveH2L+87RcGU/alT6BRrk5JtUso0OibH3O7NXuNOQ0cDc9beT0wrg==
+  dependencies:
+    "@vue/compiler-core" "3.2.31"
+    "@vue/shared" "3.2.31"
+
+"@vue/compiler-sfc@3.2.31", "@vue/compiler-sfc@^3.1.0":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.31.tgz#d02b29c3fe34d599a52c5ae1c6937b4d69f11c2f"
+  integrity sha512-748adc9msSPGzXgibHiO6T7RWgfnDcVQD+VVwYgSsyyY8Ans64tALHZANrKtOzvkwznV/F4H7OAod/jIlp/dkQ==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.31"
+    "@vue/compiler-dom" "3.2.31"
+    "@vue/compiler-ssr" "3.2.31"
+    "@vue/reactivity-transform" "3.2.31"
+    "@vue/shared" "3.2.31"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+    postcss "^8.1.10"
+    source-map "^0.6.1"
+
+"@vue/compiler-ssr@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.31.tgz#4fa00f486c9c4580b40a4177871ebbd650ecb99c"
+  integrity sha512-mjN0rqig+A8TVDnsGPYJM5dpbjlXeHUm2oZHZwGyMYiGT/F4fhJf/cXy8QpjnLQK4Y9Et4GWzHn9PS8AHUnSkw==
+  dependencies:
+    "@vue/compiler-dom" "3.2.31"
+    "@vue/shared" "3.2.31"
+
+"@vue/devtools-api@^6.0.0", "@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.0.0-beta.7":
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.1.3.tgz#a44c52e8fa6d22f84db3abdcdd0be5135b7dd7cf"
+  integrity sha512-79InfO2xHv+WHIrH1bHXQUiQD/wMls9qBk6WVwGCbdwP7/3zINtvqPNMtmSHXsIKjvUAHc8L0ouOj6ZQQRmcXg==
+
+"@vue/reactivity-transform@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.31.tgz#0f5b25c24e70edab2b613d5305c465b50fc00911"
+  integrity sha512-uS4l4z/W7wXdI+Va5pgVxBJ345wyGFKvpPYtdSgvfJfX/x2Ymm6ophQlXXB6acqGHtXuBqNyyO3zVp9b1r0MOA==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.31"
+    "@vue/shared" "3.2.31"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+
+"@vue/reactivity@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.31.tgz#fc90aa2cdf695418b79e534783aca90d63a46bbd"
+  integrity sha512-HVr0l211gbhpEKYr2hYe7hRsV91uIVGFYNHj73njbARVGHQvIojkImKMaZNDdoDZOIkMsBc9a1sMqR+WZwfSCw==
+  dependencies:
+    "@vue/shared" "3.2.31"
+
+"@vue/runtime-core@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.31.tgz#9d284c382f5f981b7a7b5971052a1dc4ef39ac7a"
+  integrity sha512-Kcog5XmSY7VHFEMuk4+Gap8gUssYMZ2+w+cmGI6OpZWYOEIcbE0TPzzPHi+8XTzAgx1w/ZxDFcXhZeXN5eKWsA==
+  dependencies:
+    "@vue/reactivity" "3.2.31"
+    "@vue/shared" "3.2.31"
+
+"@vue/runtime-dom@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.31.tgz#79ce01817cb3caf2c9d923f669b738d2d7953eff"
+  integrity sha512-N+o0sICVLScUjfLG7u9u5XCjvmsexAiPt17GNnaWHJUfsKed5e85/A3SWgKxzlxx2SW/Hw7RQxzxbXez9PtY3g==
+  dependencies:
+    "@vue/runtime-core" "3.2.31"
+    "@vue/shared" "3.2.31"
+    csstype "^2.6.8"
+
+"@vue/server-renderer@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.31.tgz#201e9d6ce735847d5989403af81ef80960da7141"
+  integrity sha512-8CN3Zj2HyR2LQQBHZ61HexF5NReqngLT3oahyiVRfSSvak+oAvVmu8iNLSu6XR77Ili2AOpnAt1y8ywjjqtmkg==
+  dependencies:
+    "@vue/compiler-ssr" "3.2.31"
+    "@vue/shared" "3.2.31"
+
+"@vue/shared@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.31.tgz#c90de7126d833dcd3a4c7534d534be2fb41faa4e"
+  integrity sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==
+
 "@vue/test-utils@1.0.0-beta.28":
   version "1.0.0-beta.28"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.0.0-beta.28.tgz#767c43413df8cde86128735e58923803e444b9a5"
@@ -1112,6 +1405,20 @@
     dom-event-types "^1.0.0"
     lodash "^4.17.4"
 
+"@vuelidate/core@2.0.0-alpha.35":
+  version "2.0.0-alpha.35"
+  resolved "https://registry.yarnpkg.com/@vuelidate/core/-/core-2.0.0-alpha.35.tgz#22d91787147b0883d31585fab44d0218622b7560"
+  integrity sha512-BSGQElu5lyI0GzqehFzUWy7GXhEUC7Z8oEpdxgCyGGN5gOFlAQ5Zr4dDFzfIOhU4jik3CfPHK+i+Juqg2OCKNw==
+  dependencies:
+    vue-demi "^0.12.0"
+
+"@vuelidate/validators@2.0.0-alpha.27":
+  version "2.0.0-alpha.27"
+  resolved "https://registry.yarnpkg.com/@vuelidate/validators/-/validators-2.0.0-alpha.27.tgz#260f81b2e3c0695159a9576ee7930d7d0a2e698b"
+  integrity sha512-omCUVP+gr2kKBMQwdKsOYPWYk/Fu92K93LRnl8Vk856UudNlb89wCreh0/Q8DpVEOisLljI3T7026QCo9eSq4Q==
+  dependencies:
+    vue-demi "^0.12.0"
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -1839,7 +2146,7 @@ blob@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.5.tgz#d680eeef25f8cd91ad533f5b01eed48e64caf683"
 
-bluebird@^3.1.1, bluebird@^3.3.0:
+bluebird@^3.3.0:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.3.tgz#7d01c6f9616c9a51ab0f8c549a79dfe6ec33efa7"
 
@@ -2614,12 +2921,6 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
 
-consolidate@^0.14.0:
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.14.5.tgz#5a25047bc76f73072667c8cb52c989888f494c63"
-  dependencies:
-    bluebird "^3.1.1"
-
 constants-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
@@ -2705,18 +3006,6 @@ core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
-cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892"
-  dependencies:
-    is-directory "^0.3.1"
-    js-yaml "^3.4.3"
-    minimist "^1.2.0"
-    object-assign "^4.1.0"
-    os-homedir "^1.0.1"
-    parse-json "^2.2.0"
-    require-from-string "^1.1.0"
-
 cosmiconfig@^5.0.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
@@ -2903,6 +3192,11 @@ csso@~2.3.1:
     clap "^1.0.9"
     source-map "^0.5.3"
 
+csstype@^2.6.8:
+  version "2.6.20"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
+  integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -2941,11 +3235,6 @@ dateformat@^1.0.6:
     get-stdin "^4.0.1"
     meow "^3.3.0"
 
-de-indent@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
-  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
-
 debug@2, debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -3621,6 +3910,11 @@ estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
 
+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
 esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
@@ -4426,6 +4720,11 @@ hash-sum@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
 
+hash-sum@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
+  integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
+
 hash.js@^1.0.0, hash.js@^1.0.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
@@ -4437,7 +4736,7 @@ he@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
 
-he@1.2.x, he@^1.1.0:
+he@1.2.x:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
 
@@ -5173,7 +5472,7 @@ js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
 
-js-yaml@3.x, js-yaml@^3.4.3:
+js-yaml@3.x:
   version "3.12.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.1.tgz#295c8632a18a23e054cf5c9d3cecafe678167600"
   dependencies:
@@ -5811,7 +6110,7 @@ lower-case@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
 
-lru-cache@4.1.x, lru-cache@^4.0.1, lru-cache@^4.1.1:
+lru-cache@4.1.x, lru-cache@^4.0.1:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
   dependencies:
@@ -5835,6 +6134,13 @@ lru-cache@~2.6.5:
   version "2.6.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.6.5.tgz#e56d6354148ede8d7707b58d143220fd08df0fd5"
 
+magic-string@^0.25.7:
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
+  integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
+  dependencies:
+    sourcemap-codec "^1.4.8"
+
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -6281,6 +6587,11 @@ nan@^2.12.1:
   version "2.14.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
 
+nanoid@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
+  integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -6644,7 +6955,7 @@ os-browserify@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
 
-os-homedir@^1.0.0, os-homedir@^1.0.1:
+os-homedir@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
 
@@ -6938,6 +7249,11 @@ phoenix@1.4.0:
   resolved "https://registry.yarnpkg.com/phoenix/-/phoenix-1.4.0.tgz#9cec8dbd8cbc59ecd2147bc09ca8ceb56b860d75"
   integrity sha512-+M7erjPRtrHM53Bc9sT/WSyNFOEhsAc48PBsex0R87hu0GhBRMNE2uAb8MT2gKtJmAYxv5Quaozh/PBuhO8tdQ==
 
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
 picomatch@^2.0.4:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.3.tgz#465547f359ccc206d3c48e46a1bcb89bf7ee619d"
@@ -7091,15 +7407,6 @@ postcss-less@^3.1.4:
   dependencies:
     postcss "^7.0.14"
 
-postcss-load-config@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
-  dependencies:
-    cosmiconfig "^2.1.0"
-    object-assign "^4.1.0"
-    postcss-load-options "^1.2.0"
-    postcss-load-plugins "^2.3.0"
-
 postcss-load-config@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.0.tgz#c84d692b7bb7b41ddced94ee62e8ab31b417b003"
@@ -7108,20 +7415,6 @@ postcss-load-config@^2.0.0:
     cosmiconfig "^5.0.0"
     import-cwd "^2.0.0"
 
-postcss-load-options@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.2.0.tgz#b098b1559ddac2df04bc0bb375f99a5cfe2b6d8c"
-  dependencies:
-    cosmiconfig "^2.1.0"
-    object-assign "^4.1.0"
-
-postcss-load-plugins@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz#745768116599aca2f009fad426b00175049d8d92"
-  dependencies:
-    cosmiconfig "^2.1.1"
-    object-assign "^4.1.0"
-
 postcss-loader@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-3.0.0.tgz#6b97943e47c72d845fa9e03f273773d4e8dd6c2d"
@@ -7379,7 +7672,7 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.1, postcss@^6.0.8:
+postcss@^6.0.1:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
   dependencies:
@@ -7405,6 +7698,15 @@ postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+postcss@^8.1.10:
+  version "8.4.12"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905"
+  integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==
+  dependencies:
+    nanoid "^3.3.1"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -7417,10 +7719,6 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
-prettier@^1.16.0:
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.17.1.tgz#ed64b4e93e370cb8a25b9ef7fef3e4fd1c0995db"
-
 pretty-error@^2.0.2:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
@@ -7946,10 +8244,6 @@ require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
 
-require-from-string@^1.1.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
-
 require-main-filename@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
@@ -7985,7 +8279,7 @@ resolve@1.1.x, resolve@^1.1.6:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
 
-resolve@^1.10.0, resolve@^1.4.0, resolve@^1.5.0, resolve@^1.8.1:
+resolve@^1.10.0, resolve@^1.5.0, resolve@^1.8.1:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.11.0.tgz#4014870ba296176b86343d50b60f3b50609ce232"
   dependencies:
@@ -8417,6 +8711,11 @@ source-list-map@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
 
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
 source-map-resolve@^0.5.0:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
@@ -8453,14 +8752,14 @@ source-map-url@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
 
+source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
 source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-
 source-map@^0.7.3:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
@@ -8472,6 +8771,11 @@ source-map@~0.2.0:
   dependencies:
     amdefine ">=0.0.4"
 
+sourcemap-codec@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
 spdx-correct@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"
@@ -9393,6 +9697,11 @@ void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
+vue-demi@^0.12.0:
+  version "0.12.4"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.4.tgz#420dd17628f95f1bbce1102ad3c51074713a8049"
+  integrity sha512-ztPDkFt0TSUdoq1ZI6oD730vgztBkiByhUW7L1cOTebiSBqSYfSQgnhYakYigBkyAybqCTH7h44yZuDJf2xILQ==
+
 vue-eslint-parser@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz#00f4e4da94ec974b821a26ff0ed0f7a78402b8a1"
@@ -9404,72 +9713,56 @@ vue-eslint-parser@^5.0.0:
     esquery "^1.0.1"
     lodash "^4.17.11"
 
-vue-hot-reload-api@^2.2.0:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
-
-vue-i18n@7.8.1:
-  version "7.8.1"
-  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-7.8.1.tgz#2ce4b6efde679a1e05ddb5d907bfc1bc218803b2"
-  integrity sha512-BzB+EAPo/iFyFn/GXd/qVdDe67jfk+gmQaWUKD5BANhUclGrFxzRExzW2pYEAbhNm2pg0F12Oo+gL2IMLDcTAw==
+vue-i18n@9.1.9:
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.1.9.tgz#cb53e06ab5cc5b7eed59332f151caf48d47be9bb"
+  integrity sha512-JeRdNVxS2OGp1E+pye5XB6+M6BBkHwAv9C80Q7+kzoMdUDGRna06tjC0vCB/jDX9aWrl5swxOMFcyAr7or8XTA==
+  dependencies:
+    "@intlify/core-base" "9.1.9"
+    "@intlify/shared" "9.1.9"
+    "@intlify/vue-devtools" "9.1.9"
+    "@vue/devtools-api" "^6.0.0-beta.7"
 
-vue-loader@14.2.4:
-  version "14.2.4"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-14.2.4.tgz#d0a0e8236155fa7f9602cde65b0d38259e051ee2"
-  integrity sha512-bub2/rcTMJ3etEbbeehdH2Em3G2F5vZIjMK7ZUePj5UtgmZSTtOX1xVVawDpDsy021s3vQpO6VpWJ3z3nO8dDw==
+vue-loader@^16.0.0:
+  version "16.8.3"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.8.3.tgz#d43e675def5ba9345d6c7f05914c13d861997087"
+  integrity sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==
   dependencies:
-    consolidate "^0.14.0"
-    hash-sum "^1.0.2"
-    loader-utils "^1.1.0"
-    lru-cache "^4.1.1"
-    postcss "^6.0.8"
-    postcss-load-config "^1.1.0"
-    postcss-selector-parser "^2.0.0"
-    prettier "^1.16.0"
-    resolve "^1.4.0"
-    source-map "^0.6.1"
-    vue-hot-reload-api "^2.2.0"
-    vue-style-loader "^4.0.1"
-    vue-template-es2015-compiler "^1.6.0"
+    chalk "^4.1.0"
+    hash-sum "^2.0.0"
+    loader-utils "^2.0.0"
 
-vue-router@3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.2.tgz#dedc67afe6c4e2bc25682c8b1c2a8c0d7c7e56be"
-  integrity sha512-opKtsxjp9eOcFWdp6xLQPLmRGgfM932Tl56U9chYTnoWqKxQ8M20N7AkdEbM5beUh6wICoFGYugAX9vQjyJLFg==
+vue-router@4.0.14:
+  version "4.0.14"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.14.tgz#ce2028c1c5c33e30c7287950c973f397fce1bd65"
+  integrity sha512-wAO6zF9zxA3u+7AkMPqw9LjoUCjSxfFvINQj3E/DceTt6uEz1XZLraDhdg2EYmvVwTBSGlLYsUw8bDmx0754Mw==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0"
 
-vue-style-loader@4.1.2, vue-style-loader@^4.0.1:
+vue-style-loader@4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
   dependencies:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@2.6.11:
-  version "2.6.11"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080"
-  integrity sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==
+vue@^3.1.0:
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.31.tgz#e0c49924335e9f188352816788a4cca10f817ce6"
+  integrity sha512-odT3W2tcffTiQCy57nOT93INw1auq5lYLLYtWpPYQQYQOOdHiqFct9Xhna6GJ+pJQaF67yZABraH47oywkJgFw==
   dependencies:
-    de-indent "^1.0.2"
-    he "^1.1.0"
-
-vue-template-es2015-compiler@^1.6.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
-
-vue@2.6.11:
-  version "2.6.11"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
-  integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
+    "@vue/compiler-dom" "3.2.31"
+    "@vue/compiler-sfc" "3.2.31"
+    "@vue/runtime-dom" "3.2.31"
+    "@vue/server-renderer" "3.2.31"
+    "@vue/shared" "3.2.31"
 
-vuelidate@0.7.7:
-  version "0.7.7"
-  resolved "https://registry.yarnpkg.com/vuelidate/-/vuelidate-0.7.7.tgz#5df3930a63ddecf56fde7bdacea9dbaf0c9bf899"
-  integrity sha512-pT/U2lDI67wkIqI4tum7cMSIfGcAMfB+Phtqh2ttdXURwvHRBJEAQ0tVbUsW9Upg83Q5QH59bnCoXI7A9JDGnA==
-
-vuex@3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.0.1.tgz#e761352ebe0af537d4bb755a9b9dc4be3df7efd2"
-  integrity sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w==
+vuex@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.0.2.tgz#f896dbd5bf2a0e963f00c67e9b610de749ccacc9"
+  integrity sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.11"
 
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"
-- 
cgit v1.2.3-70-g09d2


From 961ca3a71b2e5b5f98df5613d4348c8efee6ba05 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 23 Mar 2022 16:15:05 +0200
Subject: fix all the spacings i could find

---
 src/components/font_control/font_control.vue                           | 1 +
 .../interface_language_switcher/interface_language_switcher.vue        | 1 +
 src/components/poll/poll_form.vue                                      | 1 +
 src/components/scope_selector/scope_selector.vue                       | 3 +++
 src/components/select/select.vue                                       | 1 +
 src/components/settings_modal/helpers/choice_setting.vue               | 1 +
 src/components/settings_modal/settings_modal.vue                       | 1 +
 src/components/settings_modal/tabs/theme_tab/theme_tab.vue             | 1 +
 src/components/status/status.vue                                       | 1 +
 src/components/user_card/user_card.vue                                 | 1 +
 10 files changed, 12 insertions(+)

(limited to 'src/components/user_card')

diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index ddda218b..72b480ef 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -22,6 +22,7 @@
       class="opt-l"
       :for="name + '-o'"
     />
+    {{ ' ' }}
     <Select
       :id="name + '-font-switcher'"
       v-model="preset"
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index cf307a24..6d1f83c4 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -3,6 +3,7 @@
     <label for="interface-language-switcher">
       {{ $t('settings.interfaceLanguage') }}
     </label>
+    {{ ' ' }}
     <Select
       id="interface-language-switcher"
       v-model="language"
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index 3620075a..f269d60e 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -72,6 +72,7 @@
           :max="maxExpirationInCurrentUnit"
           @change="expiryAmountChange"
         >
+        {{ ' ' }}
         <Select
           v-model="expiryUnit"
           unstyled="true"
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index a01242fc..f3bee183 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -16,6 +16,7 @@
         class="fa-scale-110 fa-old-padding"
       />
     </button>
+    {{ ' ' }}
     <button
       v-if="showPrivate"
       class="button-unstyled scope"
@@ -29,6 +30,7 @@
         class="fa-scale-110 fa-old-padding"
       />
     </button>
+    {{ ' ' }}
     <button
       v-if="showUnlisted"
       class="button-unstyled scope"
@@ -42,6 +44,7 @@
         class="fa-scale-110 fa-old-padding"
       />
     </button>
+    {{ ' ' }}
     <button
       v-if="showPublic"
       class="button-unstyled scope"
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 08c88979..ea8c8b69 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -10,6 +10,7 @@
     >
       <slot />
     </select>
+    {{ ' ' }}
     <FAIcon
       class="select-down-icon"
       icon="chevron-down"
diff --git a/src/components/settings_modal/helpers/choice_setting.vue b/src/components/settings_modal/helpers/choice_setting.vue
index 28bd8500..b6aa853a 100644
--- a/src/components/settings_modal/helpers/choice_setting.vue
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@@ -4,6 +4,7 @@
     class="ChoiceSetting"
   >
     <slot />
+    {{ ' ' }}
     <Select
       :modelValue="state"
       :disabled="disabled"
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index fd4953d7..603688e4 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -68,6 +68,7 @@
               :title="$t('general.close')"
             >
               <span>{{ $t("settings.file_export_import.backup_restore") }}</span>
+              {{ ' ' }}
               <FAIcon
                 icon="chevron-down"
               />
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index c02986ed..177498f8 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -903,6 +903,7 @@
           <div class="tab-header shadow-selector">
             <div class="select-container">
               {{ $t('settings.style.shadows.component') }}
+              {{ ' ' }}
               <Select
                 id="shadow-switcher"
                 v-model="shadowSelected"
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index ceb5a95a..c832758d 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -275,6 +275,7 @@
                       icon="reply"
                       flip="horizontal"
                     />
+                    {{ ' ' }}
                     <span
                       class="reply-to-text"
                     >
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 0708f387..14b4643a 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -141,6 +141,7 @@
               class="userHighlightCl"
               type="color"
             >
+            {{ ' ' }}
             <Select
               :id="'userHighlightSel'+user.id"
               v-model="userHighlightType"
-- 
cgit v1.2.3-70-g09d2


From 71863061c691df7f59cf4be283a3e0772d485378 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Apr 2022 19:41:09 +0300
Subject: fixed tons of stuff, at least it looks normalish on desktop

---
 src/App.js                                        |   6 +-
 src/App.scss                                      | 515 +++++++++++-----------
 src/App.vue                                       |  14 +-
 src/components/chat/chat.js                       |  46 +-
 src/components/chat/chat.scss                     |  16 +-
 src/components/chat/chat.vue                      |   6 +-
 src/components/chat/chat_layout_utils.js          |   1 +
 src/components/mobile_nav/mobile_nav.vue          |   2 +-
 src/components/notifications/notifications.vue    |   2 +-
 src/components/password_reset/password_reset.vue  |   3 +
 src/components/registration/registration.vue      |   5 +-
 src/components/settings_modal/settings_modal.scss |  12 +
 src/components/status/status.scss                 |   4 +
 src/components/timeline/timeline.js               |   6 +-
 src/components/timeline/timeline.scss             |   1 -
 src/components/user_card/user_card.vue            |   8 +-
 16 files changed, 320 insertions(+), 327 deletions(-)

(limited to 'src/components/user_card')

diff --git a/src/App.js b/src/App.js
index c4360af5..4a59f412 100644
--- a/src/App.js
+++ b/src/App.js
@@ -81,11 +81,7 @@ export default {
     },
     isMobileLayout () { return this.$store.state.interface.mobileLayout },
     privateMode () { return this.$store.state.instance.private },
-    sidebarAlign () {
-      return {
-        'order': this.$store.getters.mergedConfig.sidebarRight ? 99 : 0
-      }
-    },
+    reverseLayout () { return this.$store.getters.mergedConfig.sidebarRight },
     ...mapGetters(['mergedConfig'])
   },
   methods: {
diff --git a/src/App.scss b/src/App.scss
index fa2c6a79..7e428407 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,7 +1,51 @@
+// stylelint-disable rscss/class-format
 @import './_variables.scss';
 
+html {
+  font-size: 14px;
+  overflow: hidden;
+  max-height: 100vh;
+}
+
 body {
   overflow: hidden;
+  max-height: 100vh;
+  max-width: 100vw;
+  font-family: sans-serif;
+  font-family: var(--interfaceFont, sans-serif);
+  margin: 0;
+  color: $fallback--text;
+  color: var(--text, $fallback--text);
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  &.hidden {
+    display: none;
+  }
+}
+
+a {
+  text-decoration: none;
+  color: $fallback--link;
+  color: var(--link, $fallback--link);
+}
+
+h4 {
+  margin: 0;
+}
+
+nav {
+  z-index: 1000;
+  color: var(--topBarText);
+  background-color: $fallback--fg;
+  background-color: var(--topBar, $fallback--fg);
+  color: $fallback--faint;
+  color: var(--faint, $fallback--faint);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
+  box-shadow: var(--topBarShadow);
+  box-sizing: border-box;
+  height: var(--navbar-height);
 }
 
 #app-loaded {
@@ -12,14 +56,29 @@ body {
   --navbar-height: 50px;
 }
 
-.navbar {
-  height: var(--navbar-height);
+#content {
+  overscroll-behavior-y: none;
+  overflow-y: auto;
+  position: sticky;
+}
+
+#sidebar {
+  display: grid;
+  grid-template-columns: 100%;
+  row-gap: 1em;
+  grid-area: sidebar;
+  align-content: start;
+}
+
+#main-scroller {
+  grid-area: content;
 }
 
 .app-bg-wrapper {
   position: fixed;
-  z-index: -1;
   height: 100%;
+  top: var(--navbar-height);
+  z-index: -1000;
   left: 0;
   right: -20px;
   background-size: cover;
@@ -29,69 +88,66 @@ body {
   background-position: 50%;
 }
 
-h4 {
-  margin: 0;
-}
-
-#content {
-  overflow-y: auto;
-  position: sticky;
-}
-
 .app-layout {
   position: relative;
   display: grid;
-  grid-template-columns: auto auto;
+  grid-template-columns: auto minmax(auto, 1fr);
+  grid-template-areas: "sidebar content";
   grid-template-rows: 1fr;
   box-sizing: border-box;
   margin: 0 auto;
-  height: 100vh;
+  height: calc(100vh - var(--navbar-height));
   align-content: flex-start;
   flex-wrap: wrap;
   padding: 0 10px 0 10px;
-  grid-template-columns: auto auto;
   justify-content: center;
+
+  &.-reverse {
+    grid-template-columns: minmax(auto, 1fr) auto;
+    grid-template-areas: "content sidebar";
+  }
 }
 
 .underlay {
-  height: 100%;
-  width: 100%;
   grid-column-start: 1;
-  grid-column-end: 3;
+  grid-column-end: span 2;
   grid-row-start: 1;
   grid-row-end: 1;
-  margin: -0.5em;
-  padding: 0.5em;
+  margin: 0 -0.5em;
+  padding: 0 0.5em;
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0.15);
+  background-color: var(--underlay, rgba(0, 0, 0, 0.15));
+  z-index: -2000;
 }
 
 .column {
+  box-sizing: border-box;
   max-width: 615px;
   padding-top: 10px;
   grid-row-start: 1;
   grid-row-end: 1;
-
-  &:nth-child(2) {
-    grid-column: 1;
-  }
-
-  &:nth-child(3) {
-    grid-column: 2;
-  }
+  margin: 0 0.5em;
 
   &.-mini {
     max-width: 345px;
   }
 
   &.-scrollable {
+    padding-top: 10px;
     position: sticky;
     top: 0;
-    margin-top: calc(-1 * var(--navbar-padding));
-    max-height: 100vh;
+    max-height: calc(100vh - var(--navbar-height));
     overflow-y: auto;
+    overflow-x: hidden;
+
+    .panel-heading.-sticky {
+      top: -10px;
+    }
   }
 }
 
-body,
+#content,
 .column.-scrollable {
   &::-webkit-scrollbar {
     display: block;
@@ -99,42 +155,10 @@ body,
   }
 }
 
-.underlay {
-  background-color: rgba(0,0,0,0.15);
-  background-color: var(--underlay, rgba(0,0,0,0.15));
-}
-
 .text-center {
   text-align: center;
 }
 
-html {
-  font-size: 14px;
-}
-
-body {
-  overscroll-behavior-y: none;
-  font-family: sans-serif;
-  font-family: var(--interfaceFont, sans-serif);
-  margin: 0;
-  color: $fallback--text;
-  color: var(--text, $fallback--text);
-  max-width: 100vw;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  &.hidden {
-    display: none;
-  }
-}
-
-a {
-  text-decoration: none;
-  color: $fallback--link;
-  color: var(--link, $fallback--link);
-}
-
 .button-default {
   user-select: none;
   color: $fallback--text;
@@ -166,12 +190,12 @@ a {
   }
 
   &:hover {
-    box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
+    box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
     box-shadow: var(--buttonHoverShadow);
   }
 
   &:active {
-    box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
+    box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
     box-shadow: var(--buttonPressedShadow);
     color: $fallback--text;
     color: var(--btnPressedText, $fallback--text);
@@ -204,7 +228,7 @@ a {
     color: var(--btnToggledText, $fallback--text);
     background-color: $fallback--fg;
     background-color: var(--btnToggled, $fallback--fg);
-    box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
+    box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
     box-shadow: var(--buttonPressedShadow);
 
     svg,
@@ -254,8 +278,9 @@ a {
   }
 }
 
-input, textarea, .input {
-
+input,
+textarea,
+.input {
   &.unstyled {
     border-radius: 0;
     background: none;
@@ -266,7 +291,7 @@ input, textarea, .input {
   border: none;
   border-radius: $fallback--inputRadius;
   border-radius: var(--inputRadius, $fallback--inputRadius);
-  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 0px 2px 0px rgba(0, 0, 0, 1) inset;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 0 2px 0 rgba(0, 0, 0, 1) inset;
   box-shadow: var(--inputShadow);
   background-color: $fallback--fg;
   background-color: var(--input, $fallback--fg);
@@ -282,9 +307,11 @@ input, textarea, .input {
   height: 28px;
   line-height: 16px;
   hyphens: none;
-  padding: 8px .5em;
+  padding: 8px 0.5em;
 
-  &:disabled, &[disabled=disabled], &.disabled {
+  &:disabled,
+  &[disabled=disabled],
+  &.disabled {
     cursor: not-allowed;
     opacity: 0.5;
   }
@@ -299,18 +326,21 @@ input, textarea, .input {
 
   &[type=radio] {
     display: none;
+
     &:checked + label::before {
-      box-shadow: 0px 0px 2px black inset, 0px 0px 0px 4px $fallback--fg inset;
-      box-shadow: var(--inputShadow), 0px 0px 0px 4px var(--fg, $fallback--fg) inset;
+      box-shadow: 0 0 2px black inset, 0 0 0 4px $fallback--fg inset;
+      box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, $fallback--fg) inset;
       background-color: var(--accent, $fallback--link);
     }
+
     &:disabled {
       &,
       & + label,
       & + label::before {
-        opacity: .5;
+        opacity: 0.5;
       }
     }
+
     + label::before {
       flex-shrink: 0;
       display: inline-block;
@@ -319,9 +349,9 @@ input, textarea, .input {
       width: 1.1em;
       height: 1.1em;
       border-radius: 100%; // Radio buttons should always be circle
-      box-shadow: 0px 0px 2px black inset;
+      box-shadow: 0 0 2px black inset;
       box-shadow: var(--inputShadow);
-      margin-right: .5em;
+      margin-right: 0.5em;
       background-color: $fallback--fg;
       background-color: var(--input, $fallback--fg);
       vertical-align: top;
@@ -337,17 +367,20 @@ input, textarea, .input {
 
   &[type=checkbox] {
     display: none;
+
     &:checked + label::before {
       color: $fallback--text;
       color: var(--inputText, $fallback--text);
     }
+
     &:disabled {
       &,
       & + label,
       & + label::before {
-        opacity: .5;
+        opacity: 0.5;
       }
     }
+
     + label::before {
       flex-shrink: 0;
       display: inline-block;
@@ -357,9 +390,9 @@ input, textarea, .input {
       height: 1.1em;
       border-radius: $fallback--checkboxRadius;
       border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
-      box-shadow: 0px 0px 2px black inset;
+      box-shadow: 0 0 2px black inset;
       box-shadow: var(--inputShadow);
-      margin-right: .5em;
+      margin-right: 0.5em;
       background-color: $fallback--fg;
       background-color: var(--input, $fallback--fg);
       vertical-align: top;
@@ -387,6 +420,7 @@ option {
 
 .hide-number-spinner {
   -moz-appearance: textfield;
+
   &[type=number]::-webkit-inner-spin-button,
   &[type=number]::-webkit-outer-spin-button {
     opacity: 0;
@@ -394,7 +428,8 @@ option {
   }
 }
 
-i[class*=icon-], .svg-inline--fa  {
+i[class*=icon-],
+.svg-inline--fa {
   color: $fallback--icon;
   color: var(--icon, $fallback--icon);
 }
@@ -426,10 +461,6 @@ i[class*=icon-], .svg-inline--fa  {
 }
 
 .auto-size {
-  flex: 1
-}
-
-main-router {
   flex: 1;
 }
 
@@ -439,23 +470,21 @@ main-router {
 
   p {
     margin: 0;
-    font-size: 0.8em
+    font-size: 0.8em;
   }
 }
 
 /* Panel */
-
 .panel {
-  display: flex;
   position: relative;
-
+  display: flex;
   flex-direction: column;
-  margin: 0.5em;
-
+  z-index: 0;
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
 
-  &::after, & {
+  &::after,
+  & {
     border-radius: $fallback--panelRadius;
     border-radius: var(--panelRadius, $fallback--panelRadius);
   }
@@ -463,16 +492,14 @@ main-router {
   &::after {
     content: '';
     position: absolute;
-
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
-
-    pointer-events: none;
-
-    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+    z-index: 2;
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
     box-shadow: var(--panelShadow);
+    pointer-events: none;
   }
 }
 
@@ -484,19 +511,67 @@ main-router {
 }
 
 .panel-heading {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
   flex: none;
   border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
   border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
   background-size: cover;
-  padding: .6em .6em;
+  padding: 0.6em 0.6em;
   text-align: left;
   line-height: 28px;
   color: var(--panelText);
-  background-color: $fallback--fg;
-  background-color: var(--panel, $fallback--fg);
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
   align-items: baseline;
-  box-shadow: var(--panelHeaderShadow);
+  height: var(--panelHeadingHeight);
+  z-index: -2;
+
+  --panelHeadingHeight: 45px;
+
+  &.-flexible-height {
+    --panelHeadingHeight: auto;
+
+    &::after,
+    &::before {
+      display: none;
+    }
+  }
+
+  &.-sticky {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+
+  &::after,
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    pointer-events: none;
+  }
+
+  &::after {
+    background-color: $fallback--fg;
+    background-color: var(--panel, $fallback--fg);
+    z-index: -2;
+    border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
+    border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+    box-shadow: var(--panelHeaderShadow);
+  }
+
+  &::before {
+    bottom: -20px;
+    z-index: -1;
+    border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
+    border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+    mask: linear-gradient(to bottom, white var(--panelHeadingHeight), transparent var(--panelHeadingHeight));
+  }
 
   .title {
     flex: 1 0 auto;
@@ -527,7 +602,7 @@ main-router {
     min-height: 0;
     box-sizing: border-box;
     margin: 0;
-    margin-left: .5em;
+    margin-left: 0.5em;
     min-width: 1px;
     align-self: stretch;
   }
@@ -562,7 +637,7 @@ main-router {
   a,
   .-link {
     color: $fallback--link;
-    color: var(--panelLink, $fallback--link)
+    color: var(--panelLink, $fallback--link);
   }
 }
 
@@ -574,7 +649,7 @@ main-router {
 /* TODO Should remove timeline-footer from here when we refactor panels into
  * separate component and utilize slots
  */
-.panel-footer, .timeline-footer {
+.panel-footer {
   display: flex;
   border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
   border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
@@ -605,37 +680,18 @@ main-router {
   margin: 0;
 }
 
-.container > * {
-  min-width: 0px;
-}
-
 .fa {
   color: grey;
 }
 
-nav {
-  z-index: 1000;
-  color: var(--topBarText);
-  background-color: $fallback--fg;
-  background-color: var(--topBar, $fallback--fg);
-  color: $fallback--faint;
-  color: var(--faint, $fallback--faint);
-  box-shadow: 0px 0px 4px rgba(0,0,0,.6);
-  box-shadow: var(--topBarShadow);
-  box-sizing: border-box;
-}
-
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .2s
-}
-.fade-enter-from, .fade-leave-active {
-  opacity: 0
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s;
 }
 
-.main {
-  flex-basis: 50%;
-  flex-grow: 1;
-  flex-shrink: 1;
+.fade-enter-from,
+.fade-leave-active {
+  opacity: 0;
 }
 
 .sidebar-bounds {
@@ -653,34 +709,6 @@ nav {
   display: none;
 }
 
-@media all and (min-width: 800px) {
-  .sidebar-bounds {
-    overflow: hidden;
-    max-height: 100vh;
-    width: 345px;
-    position: fixed;
-    margin-top: -10px;
-
-    .sidebar-scroller {
-      height: 96vh;
-      width: 365px;
-      padding-top: 10px;
-      padding-right: 50px;
-      overflow-x: hidden;
-      overflow-y: scroll;
-    }
-
-    .sidebar {
-      width: 345px;
-    }
-  }
-  .sidebar-flexer {
-    max-height: 96vh;
-    flex-shrink: 0;
-    flex-grow: 0;
-  }
-}
-
 .badge {
   box-sizing: border-box;
   display: inline-block;
@@ -764,7 +792,7 @@ nav {
 }
 
 .visibility-notice {
-  padding: .5em;
+  padding: 0.5em;
   border: 1px solid $fallback--faint;
   border: 1px solid var(--faint, $fallback--faint);
   border-radius: $fallback--inputRadius;
@@ -779,7 +807,7 @@ nav {
     position: absolute;
     top: 0;
     right: 0;
-    padding: .5em;
+    padding: 0.5em;
     color: inherit;
   }
 }
@@ -796,30 +824,57 @@ nav {
   }
 }
 
-@keyframes shakeError {
-  0% {
-    transform: translateX(0);
-  }
-  15% {
-    transform: translateX(0.375rem);
-  }
-  30% {
-    transform: translateX(-0.375rem);
-  }
-  45% {
-    transform: translateX(0.375rem);
-  }
-  60% {
-    transform: translateX(-0.375rem);
+.login-hint {
+  text-align: center;
+
+  @media all and (min-width: 801px) {
+    display: none;
   }
-  75% {
-    transform: translateX(0.375rem);
+
+  a {
+    display: inline-block;
+    padding: 1em 0;
+    width: 100%;
   }
-  90% {
-    transform: translateX(-0.375rem);
+}
+
+.btn.button-default {
+  min-height: 28px;
+}
+
+.new-status-notification {
+  position: relative;
+  font-size: 1.1em;
+  z-index: 1;
+  flex: 1;
+}
+
+@media all and (min-width: 800px) {
+  .sidebar-bounds {
+    overflow: hidden;
+    max-height: 100vh;
+    width: 345px;
+    position: fixed;
+    margin-top: -10px;
+
+    .sidebar-scroller {
+      height: 96vh;
+      width: 365px;
+      padding-top: 10px;
+      padding-right: 50px;
+      overflow-x: hidden;
+      overflow-y: scroll;
+    }
+
+    .sidebar {
+      width: 345px;
+    }
   }
-  100% {
-    transform: translateX(0);
+
+  .sidebar-flexer {
+    max-height: 96vh;
+    flex-shrink: 0;
+    flex-grow: 0;
   }
 }
 
@@ -832,14 +887,6 @@ nav {
     display: flex;
   }
 
-  .container {
-    padding: 0;
-  }
-
-  .panel {
-    margin: 0.5em 0 0.5em 0;
-  }
-
   .menu-button {
     display: block;
     margin-right: 0.8em;
@@ -850,41 +897,6 @@ nav {
   }
 }
 
-.setting-list,
-.option-list{
-  list-style-type: none;
-  padding-left: 2em;
-  li {
-    margin-bottom: 0.5em;
-  }
-  .suboptions {
-    margin-top: 0.3em
-  }
-}
-
-.login-hint {
-  text-align: center;
-
-  @media all and (min-width: 801px) {
-    display: none;
-  }
-
-  a {
-    display: inline-block;
-    padding: 1em 0px;
-    width: 100%;
-  }
-}
-
-.btn.button-default {
-  min-height: 28px;
-}
-
-.animate-spin {
-  animation: spin 2s infinite linear;
-  display: inline-block;
-}
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);
@@ -895,45 +907,36 @@ nav {
   }
 }
 
-.new-status-notification {
-  position: relative;
-  font-size: 1.1em;
-  z-index: 1;
-  flex: 1;
-}
+@keyframes shakeError {
+  0% {
+    transform: translateX(0);
+  }
 
-.chat-layout {
-  // Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens).
-  overflow: hidden;
-  height: 100%;
+  15% {
+    transform: translateX(0.375rem);
+  }
 
-  // Get rid of scrollbar on body as scrolling happens on different element
-  // Ensures the fixed position of the mobile browser bars on scroll up / down events.
-  // Prevents the mobile browser bars from overlapping or hiding the message posting form.
-  @media all and (max-width: 800px) {
-    body {
-      height: 100%;
-    }
+  30% {
+    transform: translateX(-0.375rem);
+  }
 
-    #app {
-      height: 100%;
-      overflow: hidden;
-      min-height: auto;
-    }
+  45% {
+    transform: translateX(0.375rem);
+  }
 
-    #app_bg_wrapper {
-      overflow: hidden;
-    }
+  60% {
+    transform: translateX(-0.375rem);
+  }
 
-    .main {
-      overflow: hidden;
-      height: 100%;
-    }
+  75% {
+    transform: translateX(0.375rem);
+  }
 
-    #content {
-      padding-top: 0;
-      height: 100%;
-      overflow: visible;
-    }
+  90% {
+    transform: translateX(-0.375rem);
+  }
+
+  100% {
+    transform: translateX(0);
   }
 }
diff --git a/src/App.vue b/src/App.vue
index dc2359f3..71de2a36 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,28 +7,28 @@
       id="app_bg_wrapper"
       class="app-bg-wrapper"
     />
-    <MobileNav class="navbar" v-if="isMobileLayout" />
-    <DesktopNav class="navbar" v-else />
-    <div class="app-bg-wrapper app-container-wrapper" />
+    <MobileNav v-if="isMobileLayout" />
+    <DesktopNav v-else />
     <div
       id="content"
       class="app-layout container"
+      :class="{ '-reverse': reverseLayout }"
     >
       <div class="underlay"/>
       <div
+        id="sidebar"
         class="column -scrollable -mini mobile-hidden"
-        :style="sidebarAlign"
       >
         <user-panel />
-        <div v-if="!isMobileLayout">
+        <template v-if="!isMobileLayout">
           <nav-panel />
           <instance-specific-panel v-if="showInstanceSpecificPanel" />
           <features-panel v-if="!currentUser && showFeaturesPanel" />
           <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
           <notifications v-if="currentUser" />
-        </div>
+        </template>
       </div>
-      <div class="column main">
+      <div id="main-scroller" class="column main">
         <div
           v-if="!currentUser"
           class="login-hint panel panel-default"
diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index aef11712..59e884c4 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -6,7 +6,7 @@ import PostStatusForm from '../post_status_form/post_status_form.vue'
 import ChatTitle from '../chat_title/chat_title.vue'
 import chatService from '../../services/chat_service/chat_service.js'
 import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
-import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight, isScrollable } from './chat_layout_utils.js'
+import { getScrollPosition, getNewTopPosition, isBottomedOut } from './chat_layout_utils.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faChevronDown,
@@ -20,7 +20,7 @@ library.add(
 )
 
 const BOTTOMED_OUT_OFFSET = 10
-const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
+const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10
 const SAFE_RESIZE_TIME_OFFSET = 100
 const MARK_AS_READ_DELAY = 1500
 const MAX_RETRIES = 10
@@ -52,7 +52,6 @@ const Chat = {
     }
 
     this.$nextTick(() => {
-      this.updateScrollableContainerHeight()
       this.handleResize()
     })
     this.setChatLayout()
@@ -132,7 +131,6 @@ const Chat = {
     onFilesDropped () {
       this.$nextTick(() => {
         this.handleResize()
-        this.updateScrollableContainerHeight()
       })
     },
     handleVisibilityChange () {
@@ -154,10 +152,6 @@ const Chat = {
       if (html) {
         html.classList.add('chat-layout')
       }
-
-      this.$nextTick(() => {
-        this.updateScrollableContainerHeight()
-      })
     },
     unsetChatLayout () {
       let html = document.querySelector('html')
@@ -167,17 +161,9 @@ const Chat = {
     },
     handleLayoutChange () {
       this.$nextTick(() => {
-        this.updateScrollableContainerHeight()
         this.scrollDown()
       })
     },
-    // Ensures the proper position of the posting form in the mobile layout (the mobile browser panel does not overlap or hide it)
-    updateScrollableContainerHeight () {
-      const header = this.$refs.header
-      const footer = this.$refs.footer
-      const inner = this.mobileLayout ? window.document.body : this.$refs.inner
-      this.scrollableContainerHeight = scrollableContainerHeight(inner, header, footer) + 'px'
-    },
     // Preserves the scroll position when OSK appears or the posting form changes its height.
     handleResize (opts = {}) {
       const { expand = false, delayed = false } = opts
@@ -190,17 +176,14 @@ const Chat = {
       }
 
       this.$nextTick(() => {
-        this.updateScrollableContainerHeight()
-
         const { offsetHeight = undefined } = this.lastScrollPosition
-        this.lastScrollPosition = getScrollPosition(this.$refs.scrollable)
+        this.lastScrollPosition = getScrollPosition(document.getElementById('content'))
 
         const diff = this.lastScrollPosition.offsetHeight - offsetHeight
         if (diff < 0 || (!this.bottomedOut() && expand)) {
           this.$nextTick(() => {
-            this.updateScrollableContainerHeight()
-            this.$refs.scrollable.scrollTo({
-              top: this.$refs.scrollable.scrollTop - diff,
+            document.getElementById('content').scrollTo({
+              top: document.getElementById('content').scrollTop - diff,
               left: 0
             })
           })
@@ -209,7 +192,7 @@ const Chat = {
     },
     scrollDown (options = {}) {
       const { behavior = 'auto', forceRead = false } = options
-      const scrollable = this.$refs.scrollable
+      const scrollable = document.getElementById('content')
       if (!scrollable) { return }
       this.$nextTick(() => {
         scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
@@ -228,10 +211,10 @@ const Chat = {
       })
     },
     bottomedOut (offset) {
-      return isBottomedOut(this.$refs.scrollable, offset)
+      return isBottomedOut(document.getElementById('content'), offset)
     },
     reachedTop () {
-      const scrollable = this.$refs.scrollable
+      const scrollable = document.getElementById('content')
       return scrollable && scrollable.scrollTop <= 0
     },
     cullOlderCheck () {
@@ -263,7 +246,7 @@ const Chat = {
       }
     }, 200),
     handleScrollUp (positionBeforeLoading) {
-      const positionAfterLoading = getScrollPosition(this.$refs.scrollable)
+      const positionAfterLoading = getScrollPosition(document.getElementById('content'))
       this.$refs.scrollable.scrollTo({
         top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
         left: 0
@@ -285,22 +268,18 @@ const Chat = {
             chatService.clear(chatMessageService)
           }
 
-          const positionBeforeUpdate = getScrollPosition(this.$refs.scrollable)
+          const positionBeforeUpdate = getScrollPosition(document.getElementById('content'))
           this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => {
             this.$nextTick(() => {
               if (fetchOlderMessages) {
                 this.handleScrollUp(positionBeforeUpdate)
               }
 
-              if (isFirstFetch) {
-                this.updateScrollableContainerHeight()
-              }
-
               // In vertical screens, the first batch of fetched messages may not always take the
               // full height of the scrollable container.
               // If this is the case, we want to fetch the messages until the scrollable container
               // is fully populated so that the user has the ability to scroll up and load the history.
-              if (!isScrollable(this.$refs.scrollable) && messages.length > 0) {
+              if (messages.length > 0) {
                 this.fetchChat({ maxId: this.currentChatMessageService.minId })
               }
             })
@@ -336,9 +315,6 @@ const Chat = {
         this.handleResize()
         // When the posting form size changes because of a media attachment, we need an extra resize
         // to account for the potential delay in the DOM update.
-        setTimeout(() => {
-          this.updateScrollableContainerHeight()
-        }, SAFE_RESIZE_TIME_OFFSET)
         this.scrollDown({ forceRead: true })
       })
     },
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 3a26686c..c1f2dcf2 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -1,19 +1,12 @@
 .chat-view {
   display: flex;
-  height: calc(100vh - 60px);
-  width: 100%;
-
-  .chat-title {
-    // prevents chat header jumping on when the user avatar loads
-    height: 28px;
-  }
+  height: 100%;
 
   .chat-view-inner {
     height: auto;
     width: 100%;
     overflow: visible;
     display: flex;
-    margin: 0.5em 0.5em 0 0.5em;
   }
 
   .chat-view-body {
@@ -32,11 +25,9 @@
     }
   }
 
-  .scrollable-message-list {
+  .message-list {
     padding: 0 0.8em;
     height: 100%;
-    overflow-y: scroll;
-    overflow-x: hidden;
     display: flex;
     flex-direction: column;
   }
@@ -44,12 +35,13 @@
   .footer {
     position: sticky;
     bottom: 0;
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
   }
 
   .chat-view-heading {
     align-items: center;
     justify-content: space-between;
-    top: 50px;
     display: flex;
     z-index: 2;
     position: sticky;
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 493c5d5a..3b0129fa 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -8,7 +8,7 @@
       >
         <div
           ref="header"
-          class="panel-heading chat-view-heading mobile-hidden"
+          class="panel-heading -sticky chat-view-heading mobile-hidden"
         >
           <a
             class="go-back-button"
@@ -27,10 +27,8 @@
           </div>
         </div>
         <div
-          ref="scrollable"
-          class="scrollable-message-list"
+          class="message-list"
           :style="{ height: scrollableContainerHeight }"
-          @scroll="handleScroll"
         >
           <template v-if="!errorLoadingChat">
             <ChatMessage
diff --git a/src/components/chat/chat_layout_utils.js b/src/components/chat/chat_layout_utils.js
index 50a933ac..5c4aa5bf 100644
--- a/src/components/chat/chat_layout_utils.js
+++ b/src/components/chat/chat_layout_utils.js
@@ -1,5 +1,6 @@
 // Captures a scroll position
 export const getScrollPosition = (el) => {
+  console.log(el)
   return {
     scrollTop: el.scrollTop,
     scrollHeight: el.scrollHeight,
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 229f3006..1c28ef77 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -181,7 +181,7 @@
   .mobile-notifications {
     margin-top: 50px;
     width: 100vw;
-    height: calc(100vh - 50px);
+    height: calc(100vh - var(--navbar-height));
     overflow-x: hidden;
     overflow-y: scroll;
 
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 2ce5d56f..9d8fa059 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -6,7 +6,7 @@
     <div :class="mainClass">
       <div
         v-if="!noHeading"
-        class="panel-heading"
+        class="notifications-heading panel-heading -sticky"
       >
         <div class="title">
           {{ $t('notifications.notifications') }}
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index 3ffa5425..e0579568 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -91,6 +91,9 @@
     flex-direction: column;
     margin-top: 0.6em;
     max-width: 18rem;
+    > * {
+      min-width: 0;
+    }
   }
 
   .form-group {
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 3d409109..1e735c69 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -271,7 +271,10 @@ $validations-cRed: #f04124;
   .container {
     display: flex;
     flex-direction: row;
-    //margin-bottom: 1em;
+
+    > * {
+      min-width: 0;
+    }
   }
 
   .terms-of-service {
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 2f7649a9..f3738a8c 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -2,6 +2,18 @@
 .settings-modal {
   overflow: hidden;
 
+  .setting-list,
+  .option-list {
+    list-style-type: none;
+    padding-left: 2em;
+    li {
+      margin-bottom: 0.5em;
+    }
+    .suboptions {
+      margin-top: 0.3em
+    }
+  }
+
   &.peek {
     .settings-modal-panel {
       /* Explanation:
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 5ed43e0d..e38e2a53 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -42,6 +42,10 @@
     display: flex;
     padding: var(--status-margin, $status-margin);
 
+    > * {
+      min-width: 0;
+    }
+
     &.-repeat {
       padding-top: 0;
     }
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 8ec5d1e5..9056319b 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -64,7 +64,7 @@ const Timeline = {
       if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
       return {
         root: rootClasses,
-        header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []),
+        header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading', '-sticky'] : []),
         body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
         footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
       }
@@ -89,7 +89,7 @@ const Timeline = {
     const credentials = store.state.users.currentUser.credentials
     const showImmediately = this.timeline.visibleStatuses.length === 0
 
-    window.addEventListener('scroll', this.handleScroll)
+    document.getElementById('content').addEventListener('scroll', this.handleScroll)
 
     if (store.state.api.fetchers[this.timelineName]) { return false }
 
@@ -111,7 +111,7 @@ const Timeline = {
     setTimeout(this.determineVisibleStatuses, 250)
   },
   unmounted () {
-    window.removeEventListener('scroll', this.handleScroll)
+    document.getElementById('content').removeEventListener('scroll', this.handleScroll)
     window.removeEventListener('keydown', this.handleShortKey)
     if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
     this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 2c5a67e2..c10375d4 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -13,7 +13,6 @@
     max-width: 100%;
     flex-wrap: nowrap;
     align-items: center;
-    position: relative;
 
     .loadmore-button {
       flex-shrink: 0;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 14b4643a..6e044bb6 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -8,7 +8,7 @@
       :style="style"
       class="background-image"
     />
-    <div class="panel-heading">
+    <div class="panel-heading -flexible-height">
       <div class="user-info">
         <div class="container">
           <a
@@ -331,6 +331,7 @@
     border-top-left-radius: calc(var(--panelRadius) - 1px);
     border-top-right-radius: calc(var(--panelRadius) - 1px);
     background-color: var(--profileBg);
+    z-index: -2;
 
     &.hide-bio {
       mask-size: 100% 40px;
@@ -385,11 +386,16 @@
   padding: 0 26px;
 
   .container {
+    min-width: 0;
     padding: 16px 0 6px;
     display: flex;
     align-items: flex-start;
     max-height: 56px;
 
+    > * {
+      min-width: 0;
+    }
+
     .Avatar {
       --_avatarShadowBox: var(--avatarShadow);
       --_avatarShadowFilter: var(--avatarShadowFilter);
-- 
cgit v1.2.3-70-g09d2


From 4a068483ed9b1334780402cbe64dfa3f4a0e8a3a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Apr 2022 18:38:05 +0300
Subject: wide mode initial implementation + cleanup

---
 src/App.js                               |   8 +-
 src/App.scss                             | 127 +++++++++++++++++--------------
 src/App.vue                              |   6 +-
 src/boot/after_store.js                  |   7 +-
 src/components/about/about.vue           |   2 +-
 src/components/mobile_nav/mobile_nav.vue |   1 -
 src/components/user_card/user_card.vue   |   1 +
 src/modules/interface.js                 |  10 +--
 8 files changed, 89 insertions(+), 73 deletions(-)

(limited to 'src/components/user_card')

diff --git a/src/App.js b/src/App.js
index 4a59f412..b2ec95d4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -79,7 +79,7 @@ export default {
     hideShoutbox () {
       return this.$store.getters.mergedConfig.hideShoutbox
     },
-    isMobileLayout () { return this.$store.state.interface.mobileLayout },
+    layoutType () { return this.$store.state.interface.layoutType },
     privateMode () { return this.$store.state.instance.private },
     reverseLayout () { return this.$store.getters.mergedConfig.sidebarRight },
     ...mapGetters(['mergedConfig'])
@@ -87,10 +87,12 @@ export default {
   methods: {
     updateMobileState () {
       const mobileLayout = windowWidth() <= 800
+      const wideLayout = windowWidth() >= 1300
       const layoutHeight = windowHeight()
-      const changed = mobileLayout !== this.isMobileLayout
+      const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal')
+      const changed = layoutType !== this.layoutType
       if (changed) {
-        this.$store.dispatch('setMobileLayout', mobileLayout)
+        this.$store.dispatch('setLayoutType', layoutType)
       }
       this.$store.dispatch('setLayoutHeight', layoutHeight)
     }
diff --git a/src/App.scss b/src/App.scss
index c8a7969c..e32a2d36 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -63,11 +63,11 @@ nav {
 }
 
 #sidebar {
-  display: grid;
-  grid-template-columns: 100%;
-  row-gap: 1em;
   grid-area: sidebar;
-  align-content: start;
+
+  @media all and (max-width: 800px) {
+    display: none;
+  }
 }
 
 #main-scroller {
@@ -88,6 +88,19 @@ nav {
   background-position: 50%;
 }
 
+.underlay {
+  grid-column-start: 1;
+  grid-column-end: span 3;
+  grid-row-start: 1;
+  grid-row-end: 1;
+  margin: 0 -0.5em;
+  padding: 0 0.5em;
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0.15);
+  background-color: var(--underlay, rgba(0, 0, 0, 0.15));
+  z-index: -2000;
+}
+
 .app-layout {
   position: relative;
   display: grid;
@@ -103,44 +116,66 @@ nav {
   justify-content: center;
 
   --miniColumn: 345px;
-  --maxiColumn: minmax(auto, 615px);
+  --maxiColumn: minmax(345px, 615px);
+
+  .column {
+    display: grid;
+    grid-template-columns: 100%;
+    box-sizing: border-box;
+    padding-top: 10px;
+    grid-row-start: 1;
+    grid-row-end: 1;
+    margin: 0 0.5em;
+    row-gap: 1em;
+    align-content: start;
+
+    &.-scrollable {
+      padding-top: 10px;
+      position: sticky;
+      top: 0;
+      max-height: calc(100vh - var(--navbar-height));
+      overflow-y: auto;
+      overflow-x: hidden;
 
-  &.-reverse {
+      .panel-heading.-sticky {
+        top: -10px;
+      }
+    }
+  }
+
+  .column-inner {
+    display: grid;
+    grid-template-columns: 100%;
+    box-sizing: border-box;
+    row-gap: 1em;
+    align-content: start;
+  }
+
+  &.-reverse:not(.-wide):not(.-mobile) {
     grid-template-columns: var(--maxiColumn) var(--miniColumn);
     grid-template-areas: "content sidebar";
   }
-}
 
-.underlay {
-  grid-column-start: 1;
-  grid-column-end: span 2;
-  grid-row-start: 1;
-  grid-row-end: 1;
-  margin: 0 -0.5em;
-  padding: 0 0.5em;
-  pointer-events: none;
-  background-color: rgba(0, 0, 0, 0.15);
-  background-color: var(--underlay, rgba(0, 0, 0, 0.15));
-  z-index: -2000;
-}
+  &.-wide {
+    grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn);
+    grid-template-areas: "sidebar content notifs";
 
-.column {
-  box-sizing: border-box;
-  padding-top: 10px;
-  grid-row-start: 1;
-  grid-row-end: 1;
-  margin: 0 0.5em;
+    &.-reverse {
+      grid-template-areas: "notifs content sidebar";
+    }
+  }
 
-  &.-scrollable {
-    padding-top: 10px;
-    position: sticky;
-    top: 0;
-    max-height: calc(100vh - var(--navbar-height));
-    overflow-y: auto;
-    overflow-x: hidden;
+  &.-mobile {
+    grid-template-columns: 100vw;
+    grid-template-areas: "content";
+    padding: 0;
+
+    .column {
+      margin: 0;
+    }
 
-    .panel-heading.-sticky {
-      top: -10px;
+    .underlay {
+      display: none;
     }
   }
 }
@@ -464,17 +499,6 @@ i[class*=icon-],
   color: grey;
 }
 
-.sidebar-bounds {
-  flex: 0;
-  flex-basis: 35%;
-}
-
-.sidebar-flexer {
-  flex: 1;
-  flex-basis: 345px;
-  width: 365px;
-}
-
 .mobile-shown {
   display: none;
 }
@@ -652,19 +676,6 @@ i[class*=icon-],
   .mobile-hidden {
     display: none;
   }
-
-  .panel-switcher {
-    display: flex;
-  }
-
-  .menu-button {
-    display: block;
-    margin-right: 0.8em;
-  }
-
-  .main {
-    margin-bottom: 7em;
-  }
 }
 
 @keyframes spin {
diff --git a/src/App.vue b/src/App.vue
index 71de2a36..f87d895b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,12 +7,12 @@
       id="app_bg_wrapper"
       class="app-bg-wrapper"
     />
-    <MobileNav v-if="isMobileLayout" />
+    <MobileNav v-if="layoutType === 'mobile'" />
     <DesktopNav v-else />
     <div
       id="content"
       class="app-layout container"
-      :class="{ '-reverse': reverseLayout }"
+      :class="[{ '-reverse': reverseLayout }, '-' + layoutType]"
     >
       <div class="underlay"/>
       <div
@@ -20,7 +20,7 @@
         class="column -scrollable -mini mobile-hidden"
       >
         <user-panel />
-        <template v-if="!isMobileLayout">
+        <template v-if="layoutType !== 'mobile'">
           <nav-panel />
           <instance-specific-panel v-if="showInstanceSpecificPanel" />
           <features-panel v-if="!currentUser && showFeaturesPanel" />
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 76832708..ce96141d 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -332,8 +332,11 @@ const checkOAuthToken = async ({ store }) => {
 }
 
 const afterStoreSetup = async ({ store, i18n }) => {
-  const width = windowWidth()
-  store.dispatch('setMobileLayout', width <= 800)
+  // TODO cleanup copypasta
+  const mobileLayout = windowWidth() <= 800
+  const wideLayout = windowWidth() >= 1300
+  const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal')
+  store.dispatch('setLayoutType', layoutType)
 
   FaviconService.initFaviconService()
 
diff --git a/src/components/about/about.vue b/src/components/about/about.vue
index 518f6184..5d5d6479 100644
--- a/src/components/about/about.vue
+++ b/src/components/about/about.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar">
+  <div class="column-inner">
     <instance-specific-panel v-if="showInstanceSpecificPanel" />
     <staff-panel />
     <terms-of-service-panel />
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 1c28ef77..09680910 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -96,7 +96,6 @@
     grid-template-rows: 50px;
     grid-template-columns: 2fr auto;
     width: 100%;
-    position: fixed;
     box-sizing: border-box;
   }
 
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 6e044bb6..43a660e1 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -289,6 +289,7 @@
 
 .user-card {
   position: relative;
+  z-index: 1;
 
   &:hover {
     --_still-image-img-visibility: visible;
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 17277331..9df72b88 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -13,7 +13,7 @@ const defaultState = {
       window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
     )
   },
-  mobileLayout: false,
+  layoutType: 'normal',
   globalNotices: [],
   layoutHeight: 0,
   lastTimeline: null
@@ -36,8 +36,8 @@ const interfaceMod = {
     setNotificationPermission (state, permission) {
       state.notificationPermission = permission
     },
-    setMobileLayout (state, value) {
-      state.mobileLayout = value
+    setLayoutType (state, value) {
+      state.layoutType = value
     },
     closeSettingsModal (state) {
       state.settingsModalState = 'hidden'
@@ -86,8 +86,8 @@ const interfaceMod = {
     setNotificationPermission ({ commit }, permission) {
       commit('setNotificationPermission', permission)
     },
-    setMobileLayout ({ commit }, value) {
-      commit('setMobileLayout', value)
+    setLayoutType ({ commit }, value) {
+      commit('setLayoutType', value)
     },
     closeSettingsModal ({ commit }) {
       commit('closeSettingsModal')
-- 
cgit v1.2.3-70-g09d2


From 631b8b93a4a8dd548bae5ab9fa7bc4d6e892ae3f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 19:44:31 +0300
Subject: tons of fixes mainly aimed at panel headings

---
 src/App.scss                                       |   6 +-
 src/components/account_actions/account_actions.vue |   4 -
 src/components/popover/popover.vue                 |  12 +-
 .../settings_modal/tabs/theme_tab/theme_tab.scss   |  17 --
 src/components/timeline/timeline.js                |   2 +-
 src/components/timeline/timeline.scss              |  22 +-
 src/components/timeline/timeline.vue               |   2 +-
 .../timeline/timeline_quick_settings.vue           |  16 +-
 src/components/user_card/user_card.vue             | 325 +--------------------
 src/components/user_profile/user_profile.vue       |  18 --
 .../user_reporting_modal/user_reporting_modal.vue  |  11 -
 src/panel.scss                                     |  77 ++---
 12 files changed, 73 insertions(+), 439 deletions(-)

(limited to 'src/components/user_card')

diff --git a/src/App.scss b/src/App.scss
index 0ee1c610..bc792263 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -641,12 +641,10 @@ option {
 }
 
 .alert {
-  margin: 0.35em;
-  padding: 0.25em;
+  margin: 0 0.35em;
+  padding: 0 0.25em;
   border-radius: $fallback--tooltipRadius;
   border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-  min-height: 28px;
-  line-height: 28px;
 
   &.error {
     background-color: $fallback--alertError;
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 1e31151c..c35d01af 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -74,10 +74,6 @@
 <style lang="scss">
 @import '../../_variables.scss';
 .AccountActions {
-  button.dropdown-item {
-    margin-left: 0;
-  }
-
   .ellipsis-button {
     width: 2.5em;
     margin: -0.5em 0;
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 044b887d..0350daa1 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -93,7 +93,7 @@
 
   .dropdown-item {
     line-height: 21px;
-    overflow: auto;
+    overflow: hidden;
     display: block;
     padding: 0.25em 0.75em;
     clear: both;
@@ -154,9 +154,13 @@
         content: '✓';
       }
 
-      &.menu-checkbox-radio::after {
-        font-size: 2em;
-        content: '•';
+      &.-radio {
+        border-radius: 9999px;
+
+        &.menu-checkbox-checked::after {
+          font-size: 2em;
+          content: '•';
+        }
       }
     }
 
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index 21b49a32..cb8e477c 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -245,25 +245,8 @@
         border-color: var(--border, $fallback--border);
       }
 
-      .panel-heading {
-        .badge, .alert, .btn, .faint {
-          margin-left: 1em;
-          white-space: nowrap;
-        }
-        .faint {
-          text-overflow: ellipsis;
-          min-width: 2em;
-          overflow-x: hidden;
-        }
-        .flex-spacer {
-          flex: 1;
-        }
-      }
       .btn {
-        margin-left: 0;
-        padding: 0 1em;
         min-width: 3em;
-        min-height: 30px;
       }
     }
   }
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 4ae7410e..f79b5167 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -60,7 +60,7 @@ const Timeline = {
       }
     },
     classes () {
-      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : []
+      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-nonpanel']
       if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
       return {
         root: rootClasses,
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index ae8324b3..4c58e686 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -13,15 +13,6 @@
     max-width: 100%;
     flex-wrap: nowrap;
     align-items: center;
-
-    .loadmore-button {
-      flex-shrink: 0;
-    }
-
-    .loadmore-text {
-      flex-shrink: 0;
-      line-height: 1em;
-    }
   }
 
   .timeline-footer {
@@ -31,4 +22,17 @@
   .conversation-heading {
     top: calc(var(--panel-heading-height) * 2);
   }
+
+  &.-nonpanel {
+    .timeline-heading {
+      text-align: center;
+      line-height: 2.75em;
+      padding: 0 0.5em;
+    }
+
+    .button-default, .alert {
+      line-height: 2em;
+      width: 100%;
+    }
+  }
 }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index d37a9e2a..ff3cd72d 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="[classes.root, 'Timeline']">
+  <div :class="['Timeline', classes.root]">
     <div :class="classes.header">
       <TimelineMenu v-if="!embedded" />
       <button
diff --git a/src/components/timeline/timeline_quick_settings.vue b/src/components/timeline/timeline_quick_settings.vue
index 4d67e06b..c62d0fe9 100644
--- a/src/components/timeline/timeline_quick_settings.vue
+++ b/src/components/timeline/timeline_quick_settings.vue
@@ -12,8 +12,8 @@
             @click="replyVisibilityAll = true"
           >
             <span
-              class="menu-checkbox"
-              :class="{ 'menu-checkbox-radio': replyVisibilityAll }"
+              class="menu-checkbox -radio"
+              :class="{ 'menu-checkbox-checked': replyVisibilityAll }"
             />{{ $t('settings.reply_visibility_all') }}
           </button>
           <button
@@ -21,8 +21,8 @@
             @click="replyVisibilityFollowing = true"
           >
             <span
-              class="menu-checkbox"
-              :class="{ 'menu-checkbox-radio': replyVisibilityFollowing }"
+              class="menu-checkbox -radio"
+              :class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
             />{{ $t('settings.reply_visibility_following_short') }}
           </button>
           <button
@@ -30,8 +30,8 @@
             @click="replyVisibilitySelf = true"
           >
             <span
-              class="menu-checkbox"
-              :class="{ 'menu-checkbox-radio': replyVisibilitySelf }"
+              class="menu-checkbox -radio"
+              :class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
             />{{ $t('settings.reply_visibility_self_short') }}
           </button>
           <div
@@ -102,10 +102,6 @@
     line-height: 100%;
     height: 100%;
   }
-
-  .dropdown-item {
-    margin: 0;
-  }
 }
 
 </style>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 43a660e1..67837845 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -284,327 +284,4 @@
 
 <script src="./user_card.js"></script>
 
-<style lang="scss">
-@import '../../_variables.scss';
-
-.user-card {
-  position: relative;
-  z-index: 1;
-
-  &:hover {
-    --_still-image-img-visibility: visible;
-    --_still-image-canvas-visibility: hidden;
-    --_still-image-label-visibility: hidden;
-  }
-
-  .panel-heading {
-    padding: .5em 0;
-    text-align: center;
-    box-shadow: none;
-    background: transparent;
-    flex-direction: column;
-    align-items: stretch;
-    // create new stacking context
-    position: relative;
-  }
-
-  .panel-body {
-    word-wrap: break-word;
-    border-bottom-right-radius: inherit;
-    border-bottom-left-radius: inherit;
-    // create new stacking context
-    position: relative;
-  }
-
-  .background-image {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    mask: linear-gradient(to top, white, transparent) bottom no-repeat,
-          linear-gradient(to top, white, white);
-    // Autoprefixed seem to ignore this one, and also syntax is different
-                                                 -webkit-mask-composite: xor;
-    mask-composite: exclude;
-    background-size: cover;
-    mask-size: 100% 60%;
-    border-top-left-radius: calc(var(--panelRadius) - 1px);
-    border-top-right-radius: calc(var(--panelRadius) - 1px);
-    background-color: var(--profileBg);
-    z-index: -2;
-
-    &.hide-bio {
-      mask-size: 100% 40px;
-    }
-  }
-
-  &-bio {
-    text-align: center;
-    display: block;
-    line-height: 18px;
-    padding: 1em;
-    margin: 0;
-
-    a {
-      color: $fallback--link;
-      color: var(--postLink, $fallback--link);
-    }
-
-    img {
-      object-fit: contain;
-      vertical-align: middle;
-      max-width: 100%;
-      max-height: 400px;
-    }
-  }
-
-  // Modifiers
-
-  &-rounded-t {
-    border-top-left-radius: $fallback--panelRadius;
-    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
-    border-top-right-radius: $fallback--panelRadius;
-    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
-  }
-
-  &-rounded {
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
-  }
-
-  &-bordered {
-    border-width: 1px;
-    border-style: solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-  }
-}
-
-.user-info {
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
-  padding: 0 26px;
-
-  .container {
-    min-width: 0;
-    padding: 16px 0 6px;
-    display: flex;
-    align-items: flex-start;
-    max-height: 56px;
-
-    > * {
-      min-width: 0;
-    }
-
-    .Avatar {
-      --_avatarShadowBox: var(--avatarShadow);
-      --_avatarShadowFilter: var(--avatarShadowFilter);
-      --_avatarShadowInset: var(--avatarShadowInset);
-
-      flex: 1 0 100%;
-      width: 56px;
-      height: 56px;
-      object-fit: cover;
-    }
-  }
-
-  &-avatar-link {
-    position: relative;
-    cursor: pointer;
-
-    &-overlay {
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      background-color: rgba(0, 0, 0, 0.3);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: $fallback--avatarRadius;
-      border-radius: var(--avatarRadius, $fallback--avatarRadius);
-      opacity: 0;
-      transition: opacity .2s ease;
-
-      svg {
-        color: #FFF;
-      }
-    }
-
-    &:hover &-overlay {
-      opacity: 1;
-    }
-  }
-
-  .external-link-button, .edit-profile-button {
-    cursor: pointer;
-    width: 2.5em;
-    text-align: center;
-    margin: -0.5em 0;
-    padding: 0.5em 0;
-
-    &:not(:hover) .icon {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
-  }
-
-  .user-summary {
-    display: block;
-    margin-left: 0.6em;
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1 1 0;
-    // This is so that text doesn't get overlapped by avatar's shadow if it has
-    // big one
-    z-index: 1;
-
-    .top-line {
-      display: flex;
-    }
-  }
-
-  .user-name {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    flex: 1 1 auto;
-    margin-right: 1em;
-    font-size: 15px;
-
-    --emoji-size: 14px;
-  }
-
-  .bottom-line {
-    display: flex;
-    font-weight: light;
-    font-size: 15px;
-
-    .lock-icon {
-      margin-left: 0.5em;
-    }
-
-    .user-screen-name {
-      min-width: 1px;
-      flex: 0 1 auto;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
-
-    .dailyAvg {
-      min-width: 1px;
-      flex: 0 0 auto;
-      margin-left: 1em;
-      font-size: 0.7em;
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
-
-    .user-role {
-      flex: none;
-      color: $fallback--text;
-      color: var(--alertNeutralText, $fallback--text);
-      background-color: $fallback--fg;
-      background-color: var(--alertNeutral, $fallback--fg);
-    }
-  }
-
-  .user-meta {
-    margin-bottom: .15em;
-    display: flex;
-    align-items: baseline;
-    font-size: 14px;
-    line-height: 22px;
-    flex-wrap: wrap;
-
-    .following {
-      flex: 1 0 auto;
-      margin: 0;
-      margin-bottom: .25em;
-      text-align: left;
-    }
-
-    .highlighter {
-      flex: 0 1 auto;
-      display: flex;
-      flex-wrap: wrap;
-      margin-right: -.5em;
-      align-self: start;
-
-      .userHighlightCl {
-        padding: 2px 10px;
-        flex: 1 0 auto;
-      }
-
-      .userHighlightSel {
-        padding-top: 0;
-        padding-bottom: 0;
-        flex: 1 0 auto;
-      }
-
-      .userHighlightText {
-        width: 70px;
-        flex: 1 0 auto;
-      }
-
-      .userHighlightCl,
-      .userHighlightText,
-      .userHighlightSel {
-        vertical-align: top;
-        margin-right: .5em;
-        margin-bottom: .25em;
-      }
-    }
-  }
-  .user-interactions {
-    position: relative;
-    display: flex;
-    flex-flow: row wrap;
-    margin-right: -.75em;
-
-    > * {
-      margin: 0 .75em .6em 0;
-      white-space: nowrap;
-      min-width: 95px;
-    }
-
-    button {
-      margin: 0;
-    }
-  }
-}
-
-.sidebar .edit-profile-button {
-  display: none;
-}
-
-.user-counts {
-  display: flex;
-  line-height:16px;
-  padding: .5em 1.5em 0em 1.5em;
-  text-align: center;
-  justify-content: space-between;
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
-  flex-wrap: wrap;
-}
-
-.user-count {
-  flex: 1 0 auto;
-  padding: .5em 0 .5em 0;
-  margin: 0 .5em;
-
-  h5 {
-    font-size:1em;
-    font-weight: bolder;
-    margin: 0 0 0.25em;
-  }
-  a {
-    text-decoration: none;
-  }
-}
-</style>
+<style lang="scss" src="./user_card.scss" />
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 726216ff..f1e3cb72 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -192,24 +192,6 @@
     align-items: middle;
     padding: 2em;
   }
-
-  .timeline-heading {
-    display: flex;
-    justify-content: center;
-
-    .loadmore-button, .alert {
-      flex: 1;
-    }
-
-    .loadmore-button {
-      height: 28px;
-      margin: 10px .6em;
-    }
-
-    .title, .loadmore-text {
-      display: none
-    }
-  }
 }
 .user-profile-placeholder {
   .panel-body {
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index cc456365..ba12a246 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -76,17 +76,6 @@
   min-height: 20vh;
   max-height: 80vh;
 
-  .panel-heading {
-    .title {
-      text-align: center;
-      // TODO: Consider making these as default of panel
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
   .panel-body {
     display: flex;
     flex-direction: column-reverse;
diff --git a/src/panel.scss b/src/panel.scss
index 147b17a9..167c60a6 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -39,7 +39,11 @@
 
   position: relative;
   box-sizing: border-box;
-  display: flex;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr;
+  grid-auto-columns: auto;
+  grid-column-gap: 0.5em;
   flex: none;
   border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
   border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
@@ -89,7 +93,6 @@
   }
 
   .title {
-    flex: 1 0 auto;
     font-size: 1.3em;
   }
 
@@ -110,42 +113,44 @@
     overflow-x: hidden;
   }
 
-  > .button-default,
-  > .alert {
-    height: var(--__panel-heading-height-inner);
-    min-height: 0;
-    box-sizing: border-box;
-    margin: 0;
-    margin-left: 0.5em;
-    min-width: 1px;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  > .button-default {
-    flex-shrink: 0;
-
-    &,
-    i[class*=icon-] {
-      color: $fallback--text;
-      color: var(--btnPanelText, $fallback--text);
-    }
-
-    &:active {
-      background-color: $fallback--fg;
-      background-color: var(--btnPressedPanel, $fallback--fg);
-      color: $fallback--text;
-      color: var(--btnPressedPanelText, $fallback--text);
-    }
-
-    &:disabled {
-      color: $fallback--text;
-      color: var(--btnDisabledPanelText, $fallback--text);
+  &:not(.-flexible-height) {
+    > .button-default,
+    > .alert {
+      height: var(--__panel-heading-height-inner);
+      min-height: 0;
+      box-sizing: border-box;
+      margin: 0;
+      min-width: 1px;
+      padding-top: 0;
+      padding-bottom: 0;
+      align-self: stretch;
     }
 
-    &.toggled {
-      color: $fallback--text;
-      color: var(--btnToggledPanelText, $fallback--text);
+    > .button-default {
+      flex-shrink: 0;
+
+      &,
+      i[class*=icon-] {
+        color: $fallback--text;
+        color: var(--btnPanelText, $fallback--text);
+      }
+
+      &:active {
+        background-color: $fallback--fg;
+        background-color: var(--btnPressedPanel, $fallback--fg);
+        color: $fallback--text;
+        color: var(--btnPressedPanelText, $fallback--text);
+      }
+
+      &:disabled {
+        color: $fallback--text;
+        color: var(--btnDisabledPanelText, $fallback--text);
+      }
+
+      &.toggled {
+        color: $fallback--text;
+        color: var(--btnToggledPanelText, $fallback--text);
+      }
     }
   }
 
-- 
cgit v1.2.3-70-g09d2


From 06f58f53493b0587dab4ecdcc7f81b181424da89 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 20:03:18 +0300
Subject: i forgor

---
 src/components/user_card/user_card.scss | 324 ++++++++++++++++++++++++++++++++
 1 file changed, 324 insertions(+)
 create mode 100644 src/components/user_card/user_card.scss

(limited to 'src/components/user_card')

diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
new file mode 100644
index 00000000..4dabafa2
--- /dev/null
+++ b/src/components/user_card/user_card.scss
@@ -0,0 +1,324 @@
+@import '../../_variables.scss';
+
+.user-card {
+  position: relative;
+  z-index: 1;
+
+  &:hover {
+    --_still-image-img-visibility: visible;
+    --_still-image-canvas-visibility: hidden;
+    --_still-image-label-visibility: hidden;
+  }
+
+  .panel-heading {
+    padding: .5em 0;
+    text-align: center;
+    box-shadow: none;
+    background: transparent;
+    flex-direction: column;
+    align-items: stretch;
+    // create new stacking context
+    position: relative;
+  }
+
+  .panel-body {
+    word-wrap: break-word;
+    border-bottom-right-radius: inherit;
+    border-bottom-left-radius: inherit;
+    // create new stacking context
+    position: relative;
+  }
+
+  .background-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    mask: linear-gradient(to top, white, transparent) bottom no-repeat,
+          linear-gradient(to top, white, white);
+    // Autoprefixer seem to ignore this one, and also syntax is different
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    background-size: cover;
+    mask-size: 100% 60%;
+    border-top-left-radius: calc(var(--panelRadius) - 1px);
+    border-top-right-radius: calc(var(--panelRadius) - 1px);
+    background-color: var(--profileBg);
+    z-index: -2;
+
+    &.hide-bio {
+      mask-size: 100% 40px;
+    }
+  }
+
+  &-bio {
+    text-align: center;
+    display: block;
+    line-height: 18px;
+    padding: 1em;
+    margin: 0;
+
+    a {
+      color: $fallback--link;
+      color: var(--postLink, $fallback--link);
+    }
+
+    img {
+      object-fit: contain;
+      vertical-align: middle;
+      max-width: 100%;
+      max-height: 400px;
+    }
+  }
+
+  // Modifiers
+
+  &-rounded-t {
+    border-top-left-radius: $fallback--panelRadius;
+    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+    border-top-right-radius: $fallback--panelRadius;
+    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+  }
+
+  &-rounded {
+    border-radius: $fallback--panelRadius;
+    border-radius: var(--panelRadius, $fallback--panelRadius);
+  }
+
+  &-bordered {
+    border-width: 1px;
+    border-style: solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+  }
+}
+
+.user-info {
+  color: $fallback--lightText;
+  color: var(--lightText, $fallback--lightText);
+  padding: 0 26px;
+
+  .container {
+    min-width: 0;
+    padding: 16px 0 6px;
+    display: flex;
+    align-items: flex-start;
+    max-height: 56px;
+
+    > * {
+      min-width: 0;
+    }
+
+    .Avatar {
+      --_avatarShadowBox: var(--avatarShadow);
+      --_avatarShadowFilter: var(--avatarShadowFilter);
+      --_avatarShadowInset: var(--avatarShadowInset);
+
+      flex: 1 0 100%;
+      width: 56px;
+      height: 56px;
+      object-fit: cover;
+    }
+  }
+
+  &-avatar-link {
+    position: relative;
+    cursor: pointer;
+
+    &-overlay {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.3);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: $fallback--avatarRadius;
+      border-radius: var(--avatarRadius, $fallback--avatarRadius);
+      opacity: 0;
+      transition: opacity .2s ease;
+
+      svg {
+        color: #FFF;
+      }
+    }
+
+    &:hover &-overlay {
+      opacity: 1;
+    }
+  }
+
+  .external-link-button, .edit-profile-button {
+    cursor: pointer;
+    width: 2.5em;
+    text-align: center;
+    margin: -0.5em 0;
+    padding: 0.5em 0;
+
+    &:not(:hover) .icon {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
+  }
+
+  .user-summary {
+    display: block;
+    margin-left: 0.6em;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1 1 0;
+    // This is so that text doesn't get overlapped by avatar's shadow if it has
+    // big one
+    z-index: 1;
+    line-height: 2em;
+
+    --emoji-size: 1.7em;
+
+    .top-line,
+    .bottom-line {
+      display: flex;
+    }
+  }
+
+  .user-name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    flex: 1 1 auto;
+    margin-right: 1em;
+    font-size: 15px;
+  }
+
+  .bottom-line {
+    font-weight: light;
+    font-size: 15px;
+    align-items: baseline;
+
+    .lock-icon {
+      margin-left: 0.5em;
+    }
+
+    .user-screen-name {
+      min-width: 1px;
+      flex: 0 1 auto;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
+
+    .dailyAvg {
+      min-width: 1px;
+      flex: 0 0 auto;
+      margin-left: 1em;
+      font-size: 0.7em;
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
+
+    .user-role {
+      flex: none;
+      color: $fallback--text;
+      color: var(--alertNeutralText, $fallback--text);
+      background-color: $fallback--fg;
+      background-color: var(--alertNeutral, $fallback--fg);
+    }
+  }
+
+  .user-meta {
+    margin-bottom: .15em;
+    display: flex;
+    align-items: baseline;
+    font-size: 14px;
+    line-height: 22px;
+    flex-wrap: wrap;
+
+    .following {
+      flex: 1 0 auto;
+      margin: 0;
+      margin-bottom: .25em;
+      text-align: left;
+    }
+
+    .highlighter {
+      flex: 0 1 auto;
+      display: flex;
+      flex-wrap: wrap;
+      margin-right: -.5em;
+      align-self: start;
+
+      .userHighlightCl {
+        padding: 2px 10px;
+        flex: 1 0 auto;
+      }
+
+      .userHighlightSel {
+        padding-top: 0;
+        padding-bottom: 0;
+        flex: 1 0 auto;
+      }
+
+      .userHighlightText {
+        width: 70px;
+        flex: 1 0 auto;
+      }
+
+      .userHighlightCl,
+      .userHighlightText,
+      .userHighlightSel {
+        vertical-align: top;
+        margin-right: .5em;
+        margin-bottom: .25em;
+      }
+    }
+  }
+  .user-interactions {
+    position: relative;
+    display: flex;
+    flex-flow: row wrap;
+    margin-right: -.75em;
+
+    > * {
+      margin: 0 .75em .6em 0;
+      white-space: nowrap;
+      min-width: 95px;
+    }
+
+    button {
+      margin: 0;
+    }
+  }
+}
+
+.sidebar .edit-profile-button {
+  display: none;
+}
+
+.user-counts {
+  display: flex;
+  line-height:16px;
+  padding: .5em 1.5em 0em 1.5em;
+  text-align: center;
+  justify-content: space-between;
+  color: $fallback--lightText;
+  color: var(--lightText, $fallback--lightText);
+  flex-wrap: wrap;
+}
+
+.user-count {
+  flex: 1 0 auto;
+  padding: .5em 0 .5em 0;
+  margin: 0 .5em;
+
+  h5 {
+    font-size:1em;
+    font-weight: bolder;
+    margin: 0 0 0.25em;
+  }
+  a {
+    text-decoration: none;
+  }
+}
-- 
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/user_card')

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 33d92f9b16267415d1e62285a4f305ae10baf489 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 23:55:34 +0300
Subject: relative units in line-height + some cleanup

---
 src/App.scss                                     | 6 +++---
 src/components/notifications/notifications.scss  | 3 ++-
 src/components/password_reset/password_reset.vue | 7 ++++---
 src/components/react_button/react_button.vue     | 2 +-
 src/components/status/status.scss                | 4 ++--
 src/components/user_card/user_card.scss          | 2 +-
 src/components/user_profile/user_profile.vue     | 2 +-
 src/panel.scss                                   | 2 +-
 8 files changed, 15 insertions(+), 13 deletions(-)

(limited to 'src/components/user_card')

diff --git a/src/App.scss b/src/App.scss
index 8c59c77a..3d30ec79 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -457,7 +457,7 @@ textarea,
   display: inline-block;
   position: relative;
   height: 2em;
-  line-height: 16px;
+  line-height: 1.2;
   hyphens: none;
   padding: 8px 0.5em;
 
@@ -508,7 +508,7 @@ textarea,
       background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
-      line-height: 1.1em;
+      line-height: 1.1;
       font-size: 1.1em;
       box-sizing: border-box;
       color: transparent;
@@ -548,7 +548,7 @@ textarea,
       background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
-      line-height: 1.1em;
+      line-height: 1.1;
       font-size: 1.1em;
       box-sizing: border-box;
       color: transparent;
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index aa4ae346..976688d1 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -155,7 +155,8 @@
       margin: 0 0 0.3em;
       padding: 0;
       font-size: 1em;
-      line-height:20px;
+      line-height: 1.5;
+
       small {
         font-weight: lighter;
       }
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index e0579568..90673f44 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -91,6 +91,7 @@
     flex-direction: column;
     margin-top: 0.6em;
     max-width: 18rem;
+
     > * {
       min-width: 0;
     }
@@ -100,8 +101,8 @@
     display: flex;
     flex-direction: column;
     margin-bottom: 1em;
-    padding: 0.3em 0.0em 0.3em;
-    line-height: 24px;
+    padding: 0.3em 0;
+    line-height: 1.85em;
   }
 
   .error {
@@ -113,7 +114,7 @@
 
   .alert {
     padding: 0.5em;
-    margin: 0.3em 0.0em 1em;
+    margin: 0.3em 0 1em;
   }
 
   .password-reset-required {
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index c69c315b..7f35b7b5 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -101,7 +101,7 @@
       cursor: pointer;
 
       flex-basis: 20%;
-      line-height: 1.5em;
+      line-height: 1.5;
       align-content: center;
 
       &:hover {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 36a2cca1..b3ad3818 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -106,7 +106,7 @@
   .heading-name-row {
     display: flex;
     justify-content: space-between;
-    line-height: 18px;
+    line-height: 1.3;
 
     a {
       display: inline-block;
@@ -227,7 +227,7 @@
 
   .replies {
     margin-top: 0.25em;
-    line-height: 18px;
+    line-height: 1.3;
     font-size: 0.85em;
     display: flex;
     flex-wrap: wrap;
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 44657bdf..2e153120 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -55,7 +55,7 @@
   &-bio {
     text-align: center;
     display: block;
-    line-height: 18px;
+    line-height: 1.3;
     padding: 1em;
     margin: 0;
 
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index f1e3cb72..67966ff4 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -176,7 +176,7 @@
       }
 
       .user-profile-field-name, .user-profile-field-value {
-        line-height: 18px;
+        line-height: 1.3;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
diff --git a/src/panel.scss b/src/panel.scss
index 637ea17c..776ed863 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -195,7 +195,7 @@
 }
 
 .panel-body > p {
-  line-height: 18px;
+  line-height: 1.3;
   padding: 1em;
   margin: 0;
 }
-- 
cgit v1.2.3-70-g09d2


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

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

(limited to 'src/components/user_card')

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


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

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

(limited to 'src/components/user_card')

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


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

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

(limited to 'src/components/user_card')

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

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