use system mono in mfa backup code view

add some nicer easings to favourite and rt button animations
make left side of conversations clickable, à la birdsite
2022-12-08 19:25:12 +00:00 · 2022-12-08 19:24:59 +00:00 · 2022-12-08 19:24:22 +00:00 · 2022-12-08 19:23:46 +00:00 · 2022-12-08 19:23:05 +00:00 · 2022-12-08 19:22:32 +00:00
378 changed files with 9439 additions and 6639 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -5,14 +5,9 @@ module.exports = {
    sourceType: 'module'
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
-  extends: [
-    'plugin:vue/recommended'
-  ],
+  extends: ['plugin:vue/recommended', 'plugin:prettier/recommended'],
  // required to lint *.vue files
-  plugins: [
-    'vue',
-    'import'
-  ],
+  plugins: ['vue', 'import'],
  // add your custom rules here
  rules: {
    // allow paren-less arrow functions
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,6 @@
+{
+  "trailingComma": "none",
+  "singleQuote": true,
+  "semi": false,
+  "singleAttributePerLine": true
+}
--- a/package.json
+++ b/package.json
@ -56,7 +56,7 @@
    "@vue/babel-plugin-jsx": "1.1.1",
    "@vue/compiler-sfc": "^3.1.0",
    "@vue/test-utils": "^2.0.2",
-    "autoprefixer": "6.7.7",
+    "autoprefixer": "^10.4.13",
    "babel-loader": "^9.1.0",
    "babel-plugin-lodash": "3.3.4",
    "chai": "^4.3.7",
@ -67,11 +67,13 @@
    "css-loader": "^6.7.2",
    "custom-event-polyfill": "^1.0.7",
    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.5.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-standard": "^5.0.0",
    "eslint-plugin-vue": "^9.7.0",
@ -101,9 +103,11 @@
    "nightwatch": "0.9.21",
    "opn": "4.0.2",
    "ora": "0.4.1",
+    "postcss": "^8.4.19",
    "postcss-html": "^1.5.0",
-    "postcss-loader": "3.0.0",
+    "postcss-loader": "^7.0.2",
    "postcss-sass": "^0.5.0",
+    "prettier": "2.8.1",
    "raw-loader": "0.5.1",
    "sass": "^1.56.0",
    "sass-loader": "^13.2.0",
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,5 +1,3 @@
 module.exports = {
-  plugins: [
-    require('autoprefixer')
-  ]
+  plugins: [require('autoprefixer')]
 }
--- a/src/App.js
+++ b/src/App.js
@ -24,7 +24,9 @@ export default {
  components: {
    UserPanel,
    NavPanel,
-    Notifications: defineAsyncComponent(() => import('./components/notifications/notifications.vue')),
+    Notifications: defineAsyncComponent(() =>
+      import('./components/notifications/notifications.vue')
+    ),
    InstanceSpecificPanel,
    FeaturesPanel,
    WhoToFollowPanel,
@ -47,7 +49,10 @@ export default {
  created() {
    // Load the locale from the storage
    const val = this.$store.getters.mergedConfig.interfaceLanguage
-    this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+    this.$store.dispatch('setOption', {
+      name: 'interfaceLanguage',
+      value: val
+    })
    window.addEventListener('resize', this.updateMobileState)
  },
  unmounted() {
@ -64,14 +69,20 @@ export default {
        '-' + this.layoutType
      ]
    },
-    currentUser () { return this.$store.state.users.currentUser },
-    userBackground () { return this.currentUser.background_image },
+    currentUser() {
+      return this.$store.state.users.currentUser
+    },
+    userBackground() {
+      return this.currentUser.background_image
+    },
    instanceBackground() {
      return this.mergedConfig.hideInstanceWallpaper
        ? null
        : this.$store.state.instance.background
    },
-    background () { return this.userBackground || this.instanceBackground },
+    background() {
+      return this.userBackground || this.instanceBackground
+    },
    bgStyle() {
      if (this.background) {
        return {
@ -79,29 +90,51 @@ export default {
        }
      }
    },
-    suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
+    suggestionsEnabled() {
+      return this.$store.state.instance.suggestionsEnabled
+    },
    showInstanceSpecificPanel() {
-      return this.$store.state.instance.showInstanceSpecificPanel &&
+      return (
+        this.$store.state.instance.showInstanceSpecificPanel &&
        !this.$store.getters.mergedConfig.hideISP &&
        this.$store.state.instance.instanceSpecificPanelContent
+      )
    },
    newPostButtonShown() {
-      return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile'
+      return (
+        this.$store.getters.mergedConfig.alwaysShowNewPostButton ||
+        this.layoutType === 'mobile'
+      )
+    },
+    showFeaturesPanel() {
+      return this.$store.state.instance.showFeaturesPanel
+    },
+    editingAvailable() {
+      return this.$store.state.instance.editingAvailable
+    },
+    layoutType() {
+      return this.$store.state.interface.layoutType
+    },
+    privateMode() {
+      return this.$store.state.instance.private
    },
-    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
-    editingAvailable () { return this.$store.state.instance.editingAvailable },
-    layoutType () { return this.$store.state.interface.layoutType },
-    privateMode () { return this.$store.state.instance.private },
    reverseLayout() {
-      const { thirdColumnMode, sidebarRight: reverseSetting } = this.$store.getters.mergedConfig
+      const { thirdColumnMode, sidebarRight: reverseSetting } =
+        this.$store.getters.mergedConfig
      if (this.layoutType !== 'wide') {
        return reverseSetting
      } else {
-        return thirdColumnMode === 'notifications' ? reverseSetting : !reverseSetting
+        return thirdColumnMode === 'notifications'
+          ? reverseSetting
+          : !reverseSetting
      }
    },
-    noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
-    showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars },
+    noSticky() {
+      return this.$store.getters.mergedConfig.disableStickyHeaders
+    },
+    showScrollbars() {
+      return this.$store.getters.mergedConfig.showScrollbars
+    },
    ...mapGetters(['mergedConfig'])
  },
  methods: {
--- a/src/App.scss
+++ b/src/App.scss
@ -12,8 +12,8 @@ html {
 }

 body {
-  font-family: sans-serif;
-  font-family: var(--interfaceFont, sans-serif);
+  font-family: $system-sans-serif;
+  font-family: var(--interfaceFont, $system-sans-serif);
  margin: 0;
  color: $fallback--text;
  color: var(--text, $fallback--text);
@ -22,84 +22,13 @@ body {
  overscroll-behavior-y: none;
  overflow-x: clip;
  overflow-y: scroll;
+  background: var(--bg);

  &.hidden {
    display: none;
  }
 }

-// ## Custom scrollbars
-// Only show custom scrollbars on devices which
-// have a cursor/pointer to operate them
-@media (any-pointer: fine) {
-  * {
-    scrollbar-color: var(--btn) transparent;
-
-    &::-webkit-scrollbar {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-button,
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--btn);
-      box-shadow: var(--buttonShadow);
-      border-radius: var(--btnRadius);
-    }
-
-    // horizontal/vertical/increment/decrement are webkit-specific stuff
-    // that indicates whether we're affecting vertical scrollbar, increase button etc
-    // stylelint-disable selector-pseudo-class-no-unknown
-    &::-webkit-scrollbar-button {
-      --___bgPadding: 2px;
-
-      color: var(--btnText);
-      background-repeat: no-repeat, no-repeat;
-
-      &:horizontal {
-        background-size: 50% calc(50% - var(--___bgPadding)), 50% calc(50% - var(--___bgPadding));
-
-        &:increment {
-          background-image:
-            linear-gradient(45deg, var(--btnText) 50%, transparent 51%),
-            linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
-          background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
-        }
-
-        &:decrement {
-          background-image:
-            linear-gradient(45deg, transparent 50%, var(--btnText) 51%),
-            linear-gradient(-45deg, var(--btnText) 50%, transparent 51%);
-          background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
-        }
-      }
-
-      &:vertical {
-        background-size: calc(50% - var(--___bgPadding)) 50%, calc(50% - var(--___bgPadding)) 50%;
-
-        &:increment {
-          background-image:
-            linear-gradient(-45deg, transparent 50%, var(--btnText) 51%),
-            linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
-          background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
-        }
-
-        &:decrement {
-          background-image:
-            linear-gradient(-45deg, var(--btnText) 50%, transparent 51%),
-            linear-gradient(45deg, var(--btnText) 50%, transparent 51%);
-          background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
-        }
-      }
-    }
-    // stylelint-enable selector-pseudo-class-no-unknown
-  }
-  // Body should have background to scrollbar otherwise it will use white (body color?)
-  html {
-    scrollbar-color: var(--selectedMenu) var(--wallpaper);
-    background: var(--wallpaper);
-  }
-}
-
 a {
  text-decoration: none;
  color: $fallback--link;
@ -110,7 +39,7 @@ h4 {
  margin: 0;
 }

-i[class*=icon-],
+i[class*='icon-'],
 .svg-inline--fa {
  color: $fallback--icon;
  color: var(--icon, $fallback--icon);
@ -126,8 +55,9 @@ nav {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  box-shadow: var(--topBarShadow);
  box-sizing: border-box;
-  height: var(--navbar-height);
+  height: calc(var(--navbar-height) + 1px);
  position: fixed;
+  backdrop-filter: blur(12px) saturate(1.2);
 }

 #sidebar {
@ -182,7 +112,7 @@ nav {
  position: relative;
  display: grid;
  grid-template-columns: var(--miniColumn) var(--maxiColumn);
-  grid-template-areas: "sidebar content";
+  grid-template-areas: 'sidebar content';
  grid-template-rows: 1fr;
  box-sizing: border-box;
  margin: 0 auto;
@ -228,7 +158,9 @@ nav {
      overflow-y: auto;
      overflow-x: hidden;
      margin-left: calc(var(--___paddingIncrease) * -1);
-      padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
+      padding-left: calc(
+        var(--___paddingIncrease) + var(--___columnMargin) / 2
+      );

      // On browsers that don't support hiding scrollbars we enforce "show scrolbars" mode
      // might implement old style of hiding scrollbars later if there's demand
@ -236,7 +168,9 @@ nav {
        &:not(.-show-scrollbar) {
          scrollbar-width: none;
          margin-right: calc(var(--___paddingIncrease) * -1);
-          padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
+          padding-right: calc(
+            var(--___paddingIncrease) + var(--___columnMargin) / 2
+          );

          &::-webkit-scrollbar {
            display: block;
@ -276,21 +210,21 @@ nav {

  &.-reverse:not(.-wide):not(.-mobile) {
    grid-template-columns: var(--maxiColumn) var(--miniColumn);
-    grid-template-areas: "content sidebar";
+    grid-template-areas: 'content sidebar';
  }

  &.-wide {
    grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn);
-    grid-template-areas: "sidebar content notifs";
+    grid-template-areas: 'sidebar content notifs';

    &.-reverse {
-      grid-template-areas: "notifs content sidebar";
+      grid-template-areas: 'notifs content sidebar';
    }
  }

  &.-mobile {
    grid-template-columns: 100vw;
-    grid-template-areas: "content";
+    grid-template-areas: 'content';
    padding: 0;

    .column {
@ -347,7 +281,7 @@ nav {
    background: transparent;
  }

-  i[class*=icon-],
+  i[class*='icon-'],
  .svg-inline--fa {
    color: $fallback--text;
    color: var(--btnText, $fallback--text);
@ -363,7 +297,9 @@ nav {
  }

  &:active {
-    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: 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);
@ -396,7 +332,9 @@ nav {
    color: var(--btnToggledText, $fallback--text);
    background-color: $fallback--fg;
    background-color: var(--btnToggled, $fallback--fg);
-    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: 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,
@ -461,7 +399,8 @@ textarea,
  border: none;
  border-radius: $fallback--inputRadius;
  border-radius: var(--inputRadius, $fallback--inputRadius);
-  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: 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);
@ -479,13 +418,13 @@ textarea,
  padding: 0 var(--_padding);

  &:disabled,
-  &[disabled=disabled],
+  &[disabled='disabled'],
  &.disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

-  &[type=range] {
+  &[type='range'] {
    background: none;
    border: none;
    margin: 0;
@ -493,7 +432,7 @@ textarea,
    flex: 1;
  }

-  &[type=radio] {
+  &[type='radio'] {
    display: none;

    &:checked + label::before {
@ -533,7 +472,7 @@ textarea,
    }
  }

-  &[type=checkbox] {
+  &[type='checkbox'] {
    display: none;

    &:checked + label::before {
@ -594,8 +533,8 @@ option {
 .hide-number-spinner {
  -moz-appearance: textfield;

-  &[type=number]::-webkit-inner-spin-button,
-  &[type=number]::-webkit-outer-spin-button {
+  &[type='number']::-webkit-inner-spin-button,
+  &[type='number']::-webkit-outer-spin-button {
    opacity: 0;
    display: none;
  }
--- a/src/App.vue
+++ b/src/App.vue
@ -43,7 +43,7 @@
            :to="{ name: 'login' }"
            class="panel-body"
          >
-            {{ $t("login.hint") }}
+            {{ $t('login.hint') }}
          </router-link>
        </div>
        <router-view />
--- a/src/_variables.scss
+++ b/src/_variables.scss
@ -4,7 +4,7 @@ $darkened-background: whitesmoke;

 $fallback--bg: #121a24;
 $fallback--fg: #182230;
-$fallback--faint: rgba(185, 185, 186, .5);
+$fallback--faint: rgba(185, 185, 186, 0.5);
 $fallback--text: #b9b9ba;
 $fallback--link: #d8a070;
 $fallback--icon: #666;
@ -16,8 +16,8 @@ $fallback--cBlue: #0095ff;
 $fallback--cGreen: #0fa00f;
 $fallback--cOrange: orange;

-$fallback--alertError: rgba(211,16,20,.5);
-$fallback--alertWarning: rgba(111,111,20,.5);
+$fallback--alertError: rgba(211, 16, 20, 0.5);
+$fallback--alertWarning: rgba(111, 111, 20, 0.5);

 $fallback--panelRadius: 10px;
 $fallback--checkboxRadius: 2px;
@ -28,6 +28,14 @@ $fallback--avatarRadius: 4px;
 $fallback--avatarAltRadius: 10px;
 $fallback--attachmentRadius: 10px;

-$fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
+$fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1),
+  0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
+  0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;

 $status-margin: 0.75em;
+
+$system-sans-serif: -apple-system, BlinkMacSystemFont, avenir next, avenir,
+  segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
+  sans-serif;
+$system-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
+  monospace;
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@ -3,13 +3,19 @@ import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import vClickOutside from 'click-outside-vue3'

-import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
+import {
+  FontAwesomeIcon,
+  FontAwesomeLayers
+} from '@fortawesome/vue-fontawesome'

 import App from '../App.vue'
 import routes from './routes'
 import VBodyScrollLock from 'src/directives/body_scroll_lock'

-import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
+import {
+  windowWidth,
+  windowHeight
+} from '../services/window_utils/window_utils'
 import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
@ -23,7 +29,9 @@ const parsedInitialResults = () => {
    return null
  }
  if (!staticInitialResults) {
-    staticInitialResults = JSON.parse(document.getElementById('initial-results').textContent)
+    staticInitialResults = JSON.parse(
+      document.getElementById('initial-results').textContent
+    )
  }
  return staticInitialResults
 }
@ -71,18 +79,30 @@ const getInstanceConfig = async ({ store }) => {
      const textlimit = data.max_toot_chars
      const vapidPublicKey = data.pleroma.vapid_public_key

-      store.dispatch('setInstanceOption', { name: 'textlimit', value: textlimit })
-      store.dispatch('setInstanceOption', { name: 'accountApprovalRequired', value: data.approval_required })
+      store.dispatch('setInstanceOption', {
+        name: 'textlimit',
+        value: textlimit
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'accountApprovalRequired',
+        value: data.approval_required
+      })
      // don't override cookie if set
      if (!Cookies.get('userLanguage')) {
-        store.dispatch('setOption', { name: 'interfaceLanguage', value: resolveLanguage(data.languages) })
+        store.dispatch('setOption', {
+          name: 'interfaceLanguage',
+          value: resolveLanguage(data.languages)
+        })
      }

      if (vapidPublicKey) {
-        store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey })
+        store.dispatch('setInstanceOption', {
+          name: 'vapidPublicKey',
+          value: vapidPublicKey
+        })
      }
    } else {
-      throw (res)
+      throw res
    }
  } catch (error) {
    console.error('Could not load instance config, potentially fatal')
@ -97,10 +117,12 @@ const getBackendProvidedConfig = async ({ store }) => {
      const data = await res.json()
      return data.pleroma_fe
    } else {
-      throw (res)
+      throw res
    }
  } catch (error) {
-    console.error('Could not load backend-provided frontend config, potentially fatal')
+    console.error(
+      'Could not load backend-provided frontend config, potentially fatal'
+    )
    console.error(error)
  }
 }
@ -111,7 +133,7 @@ const getStaticConfig = async () => {
    if (res.ok) {
      return res.json()
    } else {
-      throw (res)
+      throw res
    }
  } catch (error) {
    console.warn('Failed to load static/config.json, continuing without it.')
@ -154,16 +176,12 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {

  store.dispatch('setInstanceOption', {
    name: 'logoMask',
-    value: typeof config.logoMask === 'undefined'
-      ? true
-      : config.logoMask
+    value: typeof config.logoMask === 'undefined' ? true : config.logoMask
  })

  store.dispatch('setInstanceOption', {
    name: 'logoMargin',
-    value: typeof config.logoMargin === 'undefined'
-      ? 0
-      : config.logoMargin
+    value: typeof config.logoMargin === 'undefined' ? 0 : config.logoMargin
  })
  copyInstanceOption('logoLeft')
  store.commit('authFlow/setInitialStrategy', config.loginMethod)
@ -191,7 +209,7 @@ const getTOS = async ({ store }) => {
      const html = await res.text()
      store.dispatch('setInstanceOption', { name: 'tos', value: html })
    } else {
-      throw (res)
+      throw res
    }
  } catch (e) {
    console.warn("Can't load TOS")
@ -204,9 +222,12 @@ const getInstancePanel = async ({ store }) => {
    const res = await preloadFetch('/instance/panel.html')
    if (res.ok) {
      const html = await res.text()
-      store.dispatch('setInstanceOption', { name: 'instanceSpecificPanelContent', value: html })
+      store.dispatch('setInstanceOption', {
+        name: 'instanceSpecificPanelContent',
+        value: html
+      })
    } else {
-      throw (res)
+      throw res
    }
  } catch (e) {
    console.warn("Can't load instance panel")
@ -219,7 +240,8 @@ const getStickers = async ({ store }) => {
    const res = await window.fetch('/static/stickers.json')
    if (res.ok) {
      const values = await res.json()
-      const stickers = (await Promise.all(
+      const stickers = (
+        await Promise.all(
          Object.entries(values).map(async ([name, path]) => {
            const resPack = await window.fetch(path + 'pack.json')
            var meta = {}
@ -232,12 +254,16 @@ const getStickers = async ({ store }) => {
              meta
            }
          })
-      )).sort((a, b) => {
+        )
+      ).sort((a, b) => {
        return a.meta.title.localeCompare(b.meta.title)
      })
-      store.dispatch('setInstanceOption', { name: 'stickers', value: stickers })
+      store.dispatch('setInstanceOption', {
+        name: 'stickers',
+        value: stickers
+      })
    } else {
-      throw (res)
+      throw res
    }
  } catch (e) {
    console.warn("Can't load stickers")
@ -252,13 +278,19 @@ const getAppSecret = async ({ store }) => {
    .then((app) => getClientToken({ ...app, instance: instance.server }))
    .then((token) => {
      commit('setAppToken', token.access_token)
-      commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
+      commit(
+        'setBackendInteractor',
+        backendInteractorService(store.getters.getToken())
+      )
    })
 }

 const resolveStaffAccounts = ({ store, accounts }) => {
-  const nicknames = accounts.map(uri => uri.split('/').pop())
-  store.dispatch('setInstanceOption', { name: 'staffAccounts', value: nicknames })
+  const nicknames = accounts.map((uri) => uri.split('/').pop())
+  store.dispatch('setInstanceOption', {
+    name: 'staffAccounts',
+    value: nicknames
+  })
 }

 const getNodeInfo = async ({ store }) => {
@ -268,65 +300,137 @@ const getNodeInfo = async ({ store }) => {
      const data = await res.json()
      const metadata = data.metadata
      const features = metadata.features
-      store.dispatch('setInstanceOption', { name: 'name', value: metadata.nodeName })
-      store.dispatch('setInstanceOption', { name: 'registrationOpen', value: data.openRegistrations })
-      store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
-      store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') })
-      store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
-      store.dispatch('setInstanceOption', { name: 'editingAvailable', value: features.includes('editing') })
-      store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })
-      store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled })
-      store.dispatch('setInstanceOption', { name: 'translationEnabled', value: features.includes('akkoma:machine_translation') })
+      store.dispatch('setInstanceOption', {
+        name: 'name',
+        value: metadata.nodeName
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'registrationOpen',
+        value: data.openRegistrations
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'mediaProxyAvailable',
+        value: features.includes('media_proxy')
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'safeDM',
+        value: features.includes('safe_dm_mentions')
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'pollsAvailable',
+        value: features.includes('polls')
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'editingAvailable',
+        value: features.includes('editing')
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'pollLimits',
+        value: metadata.pollLimits
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'mailerEnabled',
+        value: metadata.mailerEnabled
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'translationEnabled',
+        value: features.includes('akkoma:machine_translation')
+      })

      const uploadLimits = metadata.uploadLimits
-      store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadLimits.general) })
-      store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadLimits.avatar) })
-      store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadLimits.background) })
-      store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadLimits.banner) })
-      store.dispatch('setInstanceOption', { name: 'fieldsLimits', value: metadata.fieldsLimits })
+      store.dispatch('setInstanceOption', {
+        name: 'uploadlimit',
+        value: parseInt(uploadLimits.general)
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'avatarlimit',
+        value: parseInt(uploadLimits.avatar)
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'backgroundlimit',
+        value: parseInt(uploadLimits.background)
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'bannerlimit',
+        value: parseInt(uploadLimits.banner)
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'fieldsLimits',
+        value: metadata.fieldsLimits
+      })

-      store.dispatch('setInstanceOption', { name: 'restrictedNicknames', value: metadata.restrictedNicknames })
-      store.dispatch('setInstanceOption', { name: 'postFormats', value: metadata.postFormats })
+      store.dispatch('setInstanceOption', {
+        name: 'restrictedNicknames',
+        value: metadata.restrictedNicknames
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'postFormats',
+        value: metadata.postFormats
+      })

      const suggestions = metadata.suggestions
-      store.dispatch('setInstanceOption', { name: 'suggestionsEnabled', value: suggestions.enabled })
-      store.dispatch('setInstanceOption', { name: 'suggestionsWeb', value: suggestions.web })
+      store.dispatch('setInstanceOption', {
+        name: 'suggestionsEnabled',
+        value: suggestions.enabled
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'suggestionsWeb',
+        value: suggestions.web
+      })

      const software = data.software
-      store.dispatch('setInstanceOption', { name: 'backendVersion', value: software.version })
-      store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: software.name === 'pleroma' })
+      store.dispatch('setInstanceOption', {
+        name: 'backendVersion',
+        value: software.version
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'pleromaBackend',
+        value: software.name === 'pleroma'
+      })

      const priv = metadata.private
      store.dispatch('setInstanceOption', { name: 'private', value: priv })

      const frontendVersion = window.___pleromafe_commit_hash
-      store.dispatch('setInstanceOption', { name: 'frontendVersion', value: frontendVersion })
+      store.dispatch('setInstanceOption', {
+        name: 'frontendVersion',
+        value: frontendVersion
+      })

      const federation = metadata.federation

      store.dispatch('setInstanceOption', {
        name: 'tagPolicyAvailable',
-        value: typeof federation.mrf_policies === 'undefined'
+        value:
+          typeof federation.mrf_policies === 'undefined'
            ? false
            : metadata.federation.mrf_policies.includes('TagPolicy')
      })

-      store.dispatch('setInstanceOption', { name: 'federationPolicy', value: federation })
-      store.dispatch('setInstanceOption', { name: 'localBubbleInstances', value: metadata.localBubbleInstances })
+      store.dispatch('setInstanceOption', {
+        name: 'federationPolicy',
+        value: federation
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'localBubbleInstances',
+        value: metadata.localBubbleInstances
+      })
      store.dispatch('setInstanceOption', {
        name: 'federating',
-        value: typeof federation.enabled === 'undefined'
-          ? true
-          : federation.enabled
+        value:
+          typeof federation.enabled === 'undefined' ? true : federation.enabled
      })

      const accountActivationRequired = metadata.accountActivationRequired
-      store.dispatch('setInstanceOption', { name: 'accountActivationRequired', value: accountActivationRequired })
+      store.dispatch('setInstanceOption', {
+        name: 'accountActivationRequired',
+        value: accountActivationRequired
+      })

      const accounts = metadata.staffAccounts
      resolveStaffAccounts({ store, accounts })
    } else {
-      throw (res)
+      throw res
    }
  } catch (e) {
    console.warn('Could not load nodeinfo')
@ -336,11 +440,16 @@ const getNodeInfo = async ({ store }) => {

 const setConfig = async ({ store }) => {
  // apiConfig, staticConfig
-  const configInfos = await Promise.all([getBackendProvidedConfig({ store }), getStaticConfig()])
+  const configInfos = await Promise.all([
+    getBackendProvidedConfig({ store }),
+    getStaticConfig()
+  ])
  const apiConfig = configInfos[0]
  const staticConfig = configInfos[1]

-  await setSettings({ store, apiConfig, staticConfig }).then(getAppSecret({ store }))
+  await setSettings({ store, apiConfig, staticConfig }).then(
+    getAppSecret({ store })
+  )
 }

 const checkOAuthToken = async ({ store }) => {
@ -363,7 +472,10 @@ const afterStoreSetup = async ({ store, i18n }) => {
  FaviconService.initFaviconService()

  const overrides = window.___pleromafe_dev_overrides || {}
-  const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
+  const server =
+    typeof overrides.target !== 'undefined'
+      ? overrides.target
+      : window.location.origin
  store.dispatch('setInstanceOption', { name: 'server', value: server })

  await setConfig({ store })
@ -373,7 +485,10 @@ const afterStoreSetup = async ({ store, i18n }) => {
  const customThemePresent = customThemeSource || customTheme

  if (customThemePresent) {
-    if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
+    if (
+      customThemeSource &&
+      customThemeSource.themeEngineVersion === CURRENT_VERSION
+    ) {
      applyTheme(customThemeSource)
    } else {
      applyTheme(customTheme)
@ -404,7 +519,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
    history: createWebHistory(),
    routes: routes(store),
    scrollBehavior: (to, _from, savedPosition) => {
-      if (to.matched.some(m => m.meta.dontScroll)) {
+      if (to.matched.some((m) => m.meta.dontScroll)) {
        return {}
      }

--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@ -35,51 +35,145 @@ export default (store) => {
  }

  let routes = [
-    { name: 'root',
+    {
+      name: 'root',
      path: '/',
-      redirect: _to => {
-        return (store.state.users.currentUser
+      redirect: (_to) => {
+        return (
+          (store.state.users.currentUser
            ? store.state.instance.redirectRootLogin
            : store.state.instance.redirectRootNoLogin) || '/main/all'
+        )
      }
    },
-    { name: 'public-external-timeline', path: '/main/all', component: PublicAndExternalTimeline },
-    { name: 'public-timeline', path: '/main/public', component: PublicTimeline },
-    { name: 'bubble-timeline', path: '/main/bubble', component: BubbleTimeline },
-    { name: 'friends', path: '/main/friends', component: FriendsTimeline, beforeEnter: validateAuthenticatedRoute },
+    {
+      name: 'public-external-timeline',
+      path: '/main/all',
+      component: PublicAndExternalTimeline
+    },
+    {
+      name: 'public-timeline',
+      path: '/main/public',
+      component: PublicTimeline
+    },
+    {
+      name: 'bubble-timeline',
+      path: '/main/bubble',
+      component: BubbleTimeline
+    },
+    {
+      name: 'friends',
+      path: '/main/friends',
+      component: FriendsTimeline,
+      beforeEnter: validateAuthenticatedRoute
+    },
    { 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: 'conversation',
+      path: '/notice/:id',
+      component: ConversationPage,
+      meta: { dontScroll: true }
+    },
+    {
+      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
    },
-    { name: 'external-user-profile', path: '/users/:id', component: UserProfile, meta: { dontScroll: true } },
-    { name: 'interactions', path: '/users/:username/interactions', component: Interactions, beforeEnter: validateAuthenticatedRoute },
-    { name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute },
+    {
+      name: 'external-user-profile',
+      path: '/users/:id',
+      component: UserProfile,
+      meta: { dontScroll: true }
+    },
+    {
+      name: 'interactions',
+      path: '/users/:username/interactions',
+      component: Interactions,
+      beforeEnter: validateAuthenticatedRoute
+    },
+    {
+      name: 'dms',
+      path: '/users/:username/dms',
+      component: DMs,
+      beforeEnter: validateAuthenticatedRoute
+    },
    { name: 'registration', path: '/registration', component: Registration },
-    { name: 'registration-request-sent', path: '/registration-request-sent', component: RegistrationRequestSent },
-    { name: 'awaiting-email-confirmation', path: '/awaiting-email-confirmation', component: AwaitingEmailConfirmation },
-    { name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
-    { name: 'registration-token', path: '/registration/:token', component: Registration },
-    { name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
-    { name: 'notifications', path: '/:username/notifications', component: Notifications, props: () => ({ disableTeleport: true }), beforeEnter: validateAuthenticatedRoute },
+    {
+      name: 'registration-request-sent',
+      path: '/registration-request-sent',
+      component: RegistrationRequestSent
+    },
+    {
+      name: 'awaiting-email-confirmation',
+      path: '/awaiting-email-confirmation',
+      component: AwaitingEmailConfirmation
+    },
+    {
+      name: 'password-reset',
+      path: '/password-reset',
+      component: PasswordReset,
+      props: true
+    },
+    {
+      name: 'registration-token',
+      path: '/registration/:token',
+      component: Registration
+    },
+    {
+      name: 'friend-requests',
+      path: '/friend-requests',
+      component: FollowRequests,
+      beforeEnter: validateAuthenticatedRoute
+    },
+    {
+      name: 'notifications',
+      path: '/:username/notifications',
+      component: Notifications,
+      props: () => ({ disableTeleport: true }),
+      beforeEnter: validateAuthenticatedRoute
+    },
    { name: 'login', path: '/login', component: AuthForm },
-    { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
-    { name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
-    { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
+    {
+      name: 'oauth-callback',
+      path: '/oauth-callback',
+      component: OAuthCallback,
+      props: (route) => ({ code: route.query.code })
+    },
+    {
+      name: 'search',
+      path: '/search',
+      component: Search,
+      props: (route) => ({ query: route.query.query })
+    },
+    {
+      name: 'who-to-follow',
+      path: '/who-to-follow',
+      component: WhoToFollow,
+      beforeEnter: validateAuthenticatedRoute
+    },
    { name: 'about', path: '/about', component: About },
    { name: 'lists', path: '/lists', component: Lists },
    { name: 'list-timeline', path: '/lists/:id', component: ListTimeline },
    { name: 'list-edit', path: '/lists/:id/edit', component: ListEdit },
-    { name: 'announcements', path: '/announcements', component: AnnouncementsPage },
-    { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile, meta: { dontScroll: true } }
+    {
+      name: 'announcements',
+      path: '/announcements',
+      component: AnnouncementsPage
+    },
+    {
+      name: 'user-profile',
+      path: '/:_(users)?/:name',
+      component: UserProfile,
+      meta: { dontScroll: true }
+    }
  ]

  return routes
--- a/src/components/about/about.js
+++ b/src/components/about/about.js
@ -15,11 +15,15 @@ const About = {
    LocalBubblePanel
  },
  computed: {
-    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
+    showFeaturesPanel() {
+      return this.$store.state.instance.showFeaturesPanel
+    },
    showInstanceSpecificPanel() {
-      return this.$store.state.instance.showInstanceSpecificPanel &&
+      return (
+        this.$store.state.instance.showInstanceSpecificPanel &&
        !this.$store.getters.mergedConfig.hideISP &&
        this.$store.state.instance.instanceSpecificPanelContent
+      )
    },
    showLocalBubblePanel() {
      return this.$store.state.instance.localBubbleInstances.length > 0
--- a/src/components/about/about.vue
+++ b/src/components/about/about.vue
@ -11,5 +11,4 @@

 <script src="./about.js"></script>

-<style lang="scss">
-</style>
+<style lang="scss"></style>
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@ -3,18 +3,12 @@ import Popover from '../popover/popover.vue'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { mapState } from 'vuex'
-import {
-  faEllipsisV
-} from '@fortawesome/free-solid-svg-icons'
+import { faEllipsisV } from '@fortawesome/free-solid-svg-icons'

-library.add(
-  faEllipsisV
-)
+library.add(faEllipsisV)

 const AccountActions = {
-  props: [
-    'user', 'relationship'
-  ],
+  props: ['user', 'relationship'],
  data() {
    return {
      showingConfirmBlock: false
@ -62,11 +56,13 @@ const AccountActions = {
      this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
    },
    muteDomain() {
-      this.$store.dispatch('muteDomain', this.user.screen_name.split('@')[1])
+      this.$store
+        .dispatch('muteDomain', this.user.screen_name.split('@')[1])
        .then(() => this.refetchRelationship())
    },
    unmuteDomain() {
-      this.$store.dispatch('unmuteDomain', this.user.screen_name.split('@')[1])
+      this.$store
+        .dispatch('unmuteDomain', this.user.screen_name.split('@')[1])
        .then(() => this.refetchRelationship())
    }
  },
@ -75,7 +71,8 @@ const AccountActions = {
      return this.$store.getters.mergedConfig.modalOnBlock
    },
    ...mapState({
-      pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
+      pleromaChatMessagesAvailable: (state) =>
+        state.instance.pleromaChatMessagesAvailable
    })
  }
 }
--- 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
@ -71,7 +71,7 @@
          </button>
        </div>
      </template>
-      <template v-slot:trigger>
+      <template #trigger>
        <button class="button-unstyled ellipsis-button">
          <FAIcon
            class="icon"
@ -93,10 +93,8 @@
          keypath="user_card.block_confirm"
          tag="span"
        >
-          <template v-slot:user>
-            <span
-              v-text="user.screen_name_ui"
-            />
+          <template #user>
+            <span v-text="user.screen_name_ui" />
          </template>
        </i18n-t>
      </confirm-modal>
--- a/src/components/announcement/announcement.js
+++ b/src/components/announcement/announcement.js
@ -25,7 +25,7 @@ const Announcement = {
  },
  computed: {
    ...mapState({
-      currentUser: state => state.users.currentUser
+      currentUser: (state) => state.users.currentUser
    }),
    content() {
      return this.announcement.content
@ -39,7 +39,10 @@ const Announcement = {
        return
      }

-      return this.formatTimeOrDate(time, localeService.internalToBrowserLocale(this.$i18n.locale))
+      return this.formatTimeOrDate(
+        time,
+        localeService.internalToBrowserLocale(this.$i18n.locale)
+      )
    },
    startsAt() {
      const time = this.announcement['starts_at']
@ -47,7 +50,10 @@ const Announcement = {
        return
      }

-      return this.formatTimeOrDate(time, localeService.internalToBrowserLocale(this.$i18n.locale))
+      return this.formatTimeOrDate(
+        time,
+        localeService.internalToBrowserLocale(this.$i18n.locale)
+      )
    },
    endsAt() {
      const time = this.announcement['ends_at']
@ -55,7 +61,10 @@ const Announcement = {
        return
      }

-      return this.formatTimeOrDate(time, localeService.internalToBrowserLocale(this.$i18n.locale))
+      return this.formatTimeOrDate(
+        time,
+        localeService.internalToBrowserLocale(this.$i18n.locale)
+      )
    },
    inactive() {
      return this.announcement.inactive
@ -64,7 +73,10 @@ const Announcement = {
  methods: {
    markAsRead() {
      if (!this.isRead) {
-        return this.$store.dispatch('markAnnouncementAsRead', this.announcement.id)
+        return this.$store.dispatch(
+          'markAnnouncementAsRead',
+          this.announcement.id
+        )
      }
    },
    deleteAnnouncement() {
@ -72,7 +84,9 @@ const Announcement = {
    },
    formatTimeOrDate(time, locale) {
      const d = new Date(time)
-      return this.announcement['all_day'] ? d.toLocaleDateString(locale) : d.toLocaleString(locale)
+      return this.announcement['all_day']
+        ? d.toLocaleDateString(locale)
+        : d.toLocaleString(locale)
    },
    enterEditMode() {
      this.editedAnnouncement.content = this.announcement.pleroma['raw_content']
@ -82,14 +96,15 @@ const Announcement = {
      this.editing = true
    },
    submitEdit() {
-      this.$store.dispatch('editAnnouncement', {
+      this.$store
+        .dispatch('editAnnouncement', {
          id: this.announcement.id,
          ...this.editedAnnouncement
        })
        .then(() => {
          this.editing = false
        })
-        .catch(error => {
+        .catch((error) => {
          this.editError = error.error
        })
    },
--- a/src/components/announcement/announcement.vue
+++ b/src/components/announcement/announcement.vue
@ -21,7 +21,9 @@
        class="times"
      >
        <span v-if="publishedAt">
-          {{ $t('announcements.published_time_display', { time: publishedAt }) }}
+          {{
+            $t('announcements.published_time_display', { time: publishedAt })
+          }}
        </span>
        <span v-if="startsAt">
          {{ $t('announcements.start_time_display', { time: startsAt }) }}
@ -99,7 +101,7 @@
 <script src="./announcement.js"></script>

 <style lang="scss">
-@import "../../variables";
+@import '../../variables';

 .announcement {
  border-bottom-width: 1px;
@ -108,7 +110,8 @@
  border-radius: 0;
  padding: var(--status-margin, $status-margin);

-  .heading, .body {
+  .heading,
+  .body {
    margin-bottom: var(--status-margin, $status-margin);
  }

--- a/src/components/announcement_editor/announcement_editor.vue
+++ b/src/components/announcement_editor/announcement_editor.vue
@ -10,22 +10,26 @@
      :disabled="disabled"
    />
    <span class="announcement-metadata">
-      <label for="announcement-start-time">{{ $t('announcements.start_time_prompt') }}</label>
+      <label for="announcement-start-time">{{
+        $t('announcements.start_time_prompt')
+      }}</label>
      <input
        id="announcement-start-time"
        v-model="announcement.startsAt"
        :type="announcement.allDay ? 'date' : 'datetime-local'"
        :disabled="disabled"
-      >
+      />
    </span>
    <span class="announcement-metadata">
-      <label for="announcement-end-time">{{ $t('announcements.end_time_prompt') }}</label>
+      <label for="announcement-end-time">{{
+        $t('announcements.end_time_prompt')
+      }}</label>
      <input
        id="announcement-end-time"
        v-model="announcement.endsAt"
        :type="announcement.allDay ? 'date' : 'datetime-local'"
        :disabled="disabled"
-      >
+      />
    </span>
    <span class="announcement-metadata">
      <Checkbox
@ -33,7 +37,9 @@
        v-model="announcement.allDay"
        :disabled="disabled"
      />
-      <label for="announcement-all-day">{{ $t('announcements.all_day_prompt') }}</label>
+      <label for="announcement-all-day">{{
+        $t('announcements.all_day_prompt')
+      }}</label>
    </span>
  </div>
 </template>
--- a/src/components/announcements_page/announcements_page.js
+++ b/src/components/announcements_page/announcements_page.js
@ -24,7 +24,7 @@ const AnnouncementsPage = {
  },
  computed: {
    ...mapState({
-      currentUser: state => state.users.currentUser
+      currentUser: (state) => state.users.currentUser
    }),
    announcements() {
      return this.$store.state.announcements.announcements
@ -33,13 +33,14 @@ const AnnouncementsPage = {
  methods: {
    postAnnouncement() {
      this.posting = true
-      this.$store.dispatch('postAnnouncement', this.newAnnouncement)
+      this.$store
+        .dispatch('postAnnouncement', this.newAnnouncement)
        .then(() => {
          this.newAnnouncement.content = ''
          this.startsAt = undefined
          this.endsAt = undefined
        })
-        .catch(error => {
+        .catch((error) => {
          this.error = error.error
        })
        .finally(() => {
--- a/src/components/announcements_page/announcements_page.vue
+++ b/src/components/announcements_page/announcements_page.vue
@ -6,9 +6,7 @@
      </div>
    </div>
    <div class="panel-body">
-      <section
-        v-if="currentUser && currentUser.role === 'admin'"
-      >
+      <section v-if="currentUser && currentUser.role === 'admin'">
        <div class="post-form">
          <div class="heading">
            <h4>{{ $t('announcements.post_form_header') }}</h4>
@ -50,9 +48,7 @@
        v-for="announcement in announcements"
        :key="announcement.id"
      >
-        <announcement
-          :announcement="announcement"
-        />
+        <announcement :announcement="announcement" />
      </section>
    </div>
  </div>
@ -61,13 +57,14 @@
 <script src="./announcements_page.js"></script>

 <style lang="scss">
-@import "../../variables";
+@import '../../variables';

 .announcements-page {
  .post-form {
    padding: var(--status-margin, $status-margin);

-    .heading, .body {
+    .heading,
+    .body {
      margin-bottom: var(--status-margin, $status-margin);
    }

--- a/src/components/async_component_error/async_component_error.vue
+++ b/src/components/async_component_error/async_component_error.vue
@ -35,8 +35,8 @@ export default {
  align-items: center;
  justify-content: center;
  .btn {
-    margin: .5em;
-    padding: .5em 2em;
+    margin: 0.5em;
+    padding: 0.5em 2em;
  }
 }
 </style>
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@ -53,7 +53,9 @@ const Attachment = {
      hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
      preloadImage: this.$store.getters.mergedConfig.preloadImage,
      loading: false,
-      img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
+      img:
+        fileTypeService.fileType(this.attachment.mimetype) === 'image' &&
+        document.createElement('img'),
      modalOpen: false,
      showHidden: false,
      flashLoaded: false,
@ -106,7 +108,7 @@ const Attachment = {
      return this.nsfw && this.hideNsfwLocal && !this.showHidden
    },
    isEmpty() {
-      return (this.type === 'html' && !this.attachment.oembed)
+      return this.type === 'html' && !this.attachment.oembed
    },
    useModal() {
      let modalTypes = []
@ -180,7 +182,8 @@ const Attachment = {
    },
    toggleHidden(event) {
      if (
-        (this.mergedConfig.useOneClickNsfw && !this.showHidden) &&
+        this.mergedConfig.useOneClickNsfw &&
+        !this.showHidden &&
        (this.type !== 'video' || this.mergedConfig.playVideosInModal)
      ) {
        this.openModal(event)
@ -208,7 +211,9 @@ const Attachment = {
    },
    resize(e) {
      const target = e.target || e
-      if (!(target instanceof window.Element)) { return }
+      if (!(target instanceof window.Element)) {
+        return
+      }

      // Reset to default height for empty form, nothing else to do here.
      if (target.value === '') {
@ -219,7 +224,9 @@ const Attachment = {

      const paddingString = getComputedStyle(target)['padding']
      // remove -px suffix
-      const padding = Number(paddingString.substring(0, paddingString.length - 2))
+      const padding = Number(
+        paddingString.substring(0, paddingString.length - 2)
+      )

      target.style.height = 'auto'
      const newHeight = Math.floor(target.scrollHeight - padding * 2)
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@ -15,7 +15,8 @@
      @click.prevent
    >
      <FAIcon :icon="placeholderIconClass" />
-      <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ edit ? '' : placeholderName }}
+      <b>{{ nsfw ? 'NSFW / ' : '' }}</b
+      >{{ edit ? '' : placeholderName }}
    </a>
    <div
      v-if="edit || remove"
@ -30,7 +31,11 @@
      </button>
    </div>
    <div
-      v-if="size !== 'hide' && !hideDescription && (edit || localDescription || showDescription)"
+      v-if="
+        size !== 'hide' &&
+        !hideDescription &&
+        (edit || localDescription || showDescription)
+      "
      class="description-container"
      :class="{ '-static': !edit }"
    >
@ -41,7 +46,7 @@
        class="description-field"
        :placeholder="$t('post_status.media_description')"
        @keydown.enter.prevent=""
-      >
+      />
      <p v-else>
        {{ localDescription }}
      </p>
@ -68,7 +73,7 @@
          :key="nsfwImage"
          class="nsfw"
          :src="nsfwImage"
-        >
+        />
        <FAIcon
          v-if="type === 'video'"
          class="play-icon"
@ -88,7 +93,12 @@
          <FAIcon icon="stop" />
        </button>
        <button
-          v-if="attachment.description && size !== 'small' && !edit && type !== 'unknown'"
+          v-if="
+            attachment.description &&
+            size !== 'small' &&
+            !edit &&
+            type !== 'unknown'
+          "
          class="button-unstyled attachment-button"
          :title="$t('status.show_attachment_description')"
          @click.prevent="toggleDescription"
@ -218,11 +228,13 @@
          v-if="attachment.thumb_url"
          class="image"
        >
-          <img :src="attachment.thumb_url">
+          <img :src="attachment.thumb_url" />
        </div>
        <div class="text">
          <!-- eslint-disable vue/no-v-html -->
-          <h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1>
+          <h1>
+            <a :href="attachment.url">{{ attachment.oembed.title }}</a>
+          </h1>
          <div v-html="attachment.oembed.oembedHTML" />
          <!-- eslint-enable vue/no-v-html -->
        </div>
@ -244,7 +256,11 @@
      </span>
    </div>
    <div
-      v-if="size !== 'hide' && !hideDescription && (edit || (localDescription && showDescription))"
+      v-if="
+        size !== 'hide' &&
+        !hideDescription &&
+        (edit || (localDescription && showDescription))
+      "
      class="description-container"
      :class="{ '-static': !edit }"
    >
--- a/src/components/auth_form/auth_form.js
+++ b/src/components/auth_form/auth_form.js
@ -11,8 +11,12 @@ const AuthForm = {
  },
  computed: {
    authForm() {
-      if (this.requiredTOTP) { return 'MFATOTPForm' }
-      if (this.requiredRecovery) { return 'MFARecoveryForm' }
+      if (this.requiredTOTP) {
+        return 'MFATOTPForm'
+      }
+      if (this.requiredRecovery) {
+        return 'MFARecoveryForm'
+      }
      return 'LoginForm'
    },
    ...mapGetters('authFlow', ['requiredTOTP', 'requiredRecovery'])
--- a/src/components/autosuggest/autosuggest.js
+++ b/src/components/autosuggest/autosuggest.js
@ -2,11 +2,13 @@ const debounceMilliseconds = 500

 export default {
  props: {
-    query: { // function to query results and return a promise
+    query: {
+      // function to query results and return a promise
      type: Function,
      required: true
    },
-    filter: { // function to filter results in real time
+    filter: {
+      // function to filter results in real time
      type: Function
    },
    placeholder: {
@ -38,7 +40,9 @@ export default {
      this.timeout = setTimeout(() => {
        this.results = []
        if (term) {
-          this.query(term).then((results) => { this.results = results })
+          this.query(term).then((results) => {
+            this.results = results
+          })
        }
      }, debounceMilliseconds)
    },
--- a/src/components/autosuggest/autosuggest.vue
+++ b/src/components/autosuggest/autosuggest.vue
@ -8,7 +8,7 @@
      :placeholder="placeholder"
      class="autosuggest-input"
      @click="onInputClick"
-    >
+    />
    <div
      v-if="resultsVisible && filtered.length > 0"
      class="autosuggest-results"
--- a/src/components/avatar_list/avatar_list.js
+++ b/src/components/avatar_list/avatar_list.js
@ -13,7 +13,11 @@ const AvatarList = {
  },
  methods: {
    userProfileLink(user) {
-      return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
+      return generateProfileLink(
+        user.id,
+        user.screen_name,
+        this.$store.state.instance.restrictedNicknames
+      )
    }
  }
 }
--- a/src/components/awaiting_email_confirmation/awaiting_email_confirmation.js
+++ b/src/components/awaiting_email_confirmation/awaiting_email_confirmation.js
@ -1,4 +1,3 @@
 export default {
-  computed: {
-  }
+  computed: {}
 }
--- a/src/components/basic_user_card/basic_user_card.js
+++ b/src/components/basic_user_card/basic_user_card.js
@ -4,9 +4,7 @@ import RichContent from 'src/components/rich_content/rich_content.jsx'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'

 const BasicUserCard = {
-  props: [
-    'user'
-  ],
+  props: ['user'],
  data() {
    return {
      userExpanded: false
@ -22,7 +20,11 @@ const BasicUserCard = {
      this.userExpanded = !this.userExpanded
    },
    userProfileLink(user) {
-      return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
+      return generateProfileLink(
+        user.id,
+        user.screen_name,
+        this.$store.state.instance.restrictedNicknames
+      )
    }
  }
 }
--- a/src/components/bubble_timeline/bubble_timeline.js
+++ b/src/components/bubble_timeline/bubble_timeline.js
@ -4,7 +4,9 @@ const PublicTimeline = {
    Timeline
  },
  computed: {
-    timeline () { return this.$store.state.statuses.timelines.bubble }
+    timeline() {
+      return this.$store.state.statuses.timelines.bubble
+    }
  },
  created() {
    this.$store.dispatch('startFetchingTimeline', { timeline: 'bubble' })
@ -12,7 +14,6 @@ const PublicTimeline = {
  unmounted() {
    this.$store.dispatch('stopFetchingTimeline', 'bubble')
  }
-
 }

 export default PublicTimeline
--- a/src/components/chat_message_date/chat_message_date.vue
+++ b/src/components/chat_message_date/chat_message_date.vue
@ -18,7 +18,10 @@ export default {
      if (this.date.getTime() === today.getTime()) {
        return this.$t('display_date.today')
      } else {
-        return this.date.toLocaleDateString(localeService.internalToBrowserLocale(this.$i18n.locale), { day: 'numeric', month: 'long' })
+        return this.date.toLocaleDateString(
+          localeService.internalToBrowserLocale(this.$i18n.locale),
+          { day: 'numeric', month: 'long' }
+        )
      }
    }
  }
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@ -9,7 +9,7 @@
      :checked="modelValue"
      :indeterminate="indeterminate"
      @change="$emit('update:modelValue', $event.target.checked)"
-    >
+    />
    <i class="checkbox-indicator" />
    <span
      v-if="!!$slots.default"
@ -22,12 +22,8 @@

 <script>
 export default {
-  emits: ['update:modelValue'],
-  props: [
-    'modelValue',
-    'indeterminate',
-    'disabled'
-  ]
+  props: ['modelValue', 'indeterminate', 'disabled'],
+  emits: ['update:modelValue']
 }
 </script>

@ -71,7 +67,7 @@ export default {
  &.disabled {
    .checkbox-indicator::before,
    .label {
-      opacity: .5;
+      opacity: 0.5;
    }
    .label {
      color: $fallback--faint;
@ -79,7 +75,7 @@ export default {
    }
  }

-  input[type=checkbox] {
+  input[type='checkbox'] {
    display: none;

    &:checked + .checkbox-indicator::before {
@ -92,11 +88,10 @@ export default {
      color: $fallback--text;
      color: var(--inputText, $fallback--text);
    }
-
  }

  & > span {
-    margin-left: .5em;
+    margin-left: 0.5em;
  }
 }
 </style>
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@ -14,7 +14,12 @@
      :model-value="present"
      :disabled="disabled"
      class="opt"
-      @update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
+      @update:modelValue="
+        $emit(
+          'update:modelValue',
+          typeof modelValue === 'undefined' ? fallback : undefined
+        )
+      "
    />
    <div class="input color-input-field">
      <input
@ -24,7 +29,7 @@
        :value="modelValue || fallback"
        :disabled="!present || disabled"
        @input="$emit('update:modelValue', $event.target.value)"
-      >
+      />
      <input
        v-if="validColor"
        :id="name"
@ -33,7 +38,7 @@
        :value="modelValue || fallback"
        :disabled="!present || disabled"
        @input="$emit('update:modelValue', $event.target.value)"
-      >
+      />
      <div
        v-if="transparentColor"
        class="transparentIndicator"
@ -46,7 +51,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 +112,7 @@ export default {
  }
 }
 </script>
+<style lang="scss" src="./color_input.scss"></style>

 <style lang="scss">
 .color-control {
--- a/src/components/confirm_modal/confirm_modal.js
+++ b/src/components/confirm_modal/confirm_modal.js
@ -22,8 +22,7 @@ const ConfirmModal = {
      type: String
    }
  },
-  computed: {
-  },
+  computed: {},
  methods: {
    onCancel() {
      this.$emit('cancelled')
--- a/src/components/confirm_modal/confirm_modal.vue
+++ b/src/components/confirm_modal/confirm_modal.vue
@ -25,6 +25,8 @@
  </dialog-modal>
 </template>

+<script src="./confirm_modal.js"></script>
+
 <style lang="scss" scoped>
@import '../../_variables';

@ -35,5 +37,3 @@
  }
 }
 </style>
-
-<script src="./confirm_modal.js"></script>
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@ -43,11 +43,7 @@ import {
  faThumbsUp
 } from '@fortawesome/free-solid-svg-icons'

-library.add(
-  faAdjust,
-  faExclamationTriangle,
-  faThumbsUp
-)
+library.add(faAdjust, faExclamationTriangle, faThumbsUp)

 export default {
  props: {
@ -66,18 +62,34 @@ export default {
  },
  computed: {
    hint() {
-      const levelVal = this.contrast.aaa ? 'aaa' : (this.contrast.aa ? 'aa' : 'bad')
+      const levelVal = this.contrast.aaa
+        ? 'aaa'
+        : this.contrast.aa
+        ? 'aa'
+        : 'bad'
      const level = this.$t(`settings.style.common.contrast.level.${levelVal}`)
      const context = this.$t('settings.style.common.contrast.context.text')
      const ratio = this.contrast.text
-      return this.$t('settings.style.common.contrast.hint', { level, context, ratio })
+      return this.$t('settings.style.common.contrast.hint', {
+        level,
+        context,
+        ratio
+      })
    },
    hint_18pt() {
-      const levelVal = this.contrast.laaa ? 'aaa' : (this.contrast.laa ? 'aa' : 'bad')
+      const levelVal = this.contrast.laaa
+        ? 'aaa'
+        : this.contrast.laa
+        ? 'aa'
+        : 'bad'
      const level = this.$t(`settings.style.common.contrast.level.${levelVal}`)
      const context = this.$t('settings.style.common.contrast.context.18pt')
      const ratio = this.contrast.text
-      return this.$t('settings.style.common.contrast.hint', { level, context, ratio })
+      return this.$t('settings.style.common.contrast.hint', {
+        level,
+        context,
+        ratio
+      })
    }
  }
 }
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@ -11,11 +11,7 @@ import {
  faChevronLeft
 } from '@fortawesome/free-solid-svg-icons'

-library.add(
-  faAngleDoubleDown,
-  faAngleDoubleLeft,
-  faChevronLeft
-)
+library.add(faAngleDoubleDown, faAngleDoubleLeft, faChevronLeft)

 const sortById = (a, b) => {
  const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
@ -39,12 +35,13 @@ const sortAndFilterConversation = (conversation, statusoid) => {
  if (statusoid.type === 'retweet') {
    conversation = filter(
      conversation,
-      (status) => (status.type === 'retweet' || status.id !== statusoid.retweeted_status.id)
+      (status) =>
+        status.type === 'retweet' || status.id !== statusoid.retweeted_status.id
    )
  } else {
    conversation = filter(conversation, (status) => status.type !== 'retweet')
  }
-  return conversation.filter(_ => _).sort(sortById)
+  return conversation.filter((_) => _).sort(sortById)
 }

 const conversation = {
@ -80,7 +77,10 @@ const conversation = {
      return maxDepth >= 1 ? maxDepth : 1
    },
    streamingEnabled() {
-      return this.mergedConfig.useStreamingApi && this.mastoUserSocketStatus === WSConnectionStatus.JOINED
+      return (
+        this.mergedConfig.useStreamingApi &&
+        this.mastoUserSocketStatus === WSConnectionStatus.JOINED
+      )
    },
    displayStyle() {
      return this.$store.getters.mergedConfig.conversationDisplay
@ -108,11 +108,12 @@ const conversation = {
    },
    suspendable() {
      if (this.isTreeView) {
-        return Object.entries(this.statusContentProperties)
-          .every(([k, prop]) => !prop.replying && prop.mediaPlaying.length === 0)
+        return Object.entries(this.statusContentProperties).every(
+          ([k, prop]) => !prop.replying && prop.mediaPlaying.length === 0
+        )
      }
      if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
-        return this.$refs.statusComponent.every(s => s.suspendable)
+        return this.$refs.statusComponent.every((s) => s.suspendable)
      } else {
        return true
      }
@ -142,8 +143,12 @@ const conversation = {
        return [this.status]
      }

-      const conversation = clone(this.$store.state.statuses.conversationsObject[this.conversationId])
-      const statusIndex = findIndex(conversation, { id: this.originalStatusId })
+      const conversation = clone(
+        this.$store.state.statuses.conversationsObject[this.conversationId]
+      )
+      const statusIndex = findIndex(conversation, {
+        id: this.originalStatusId
+      })
      if (statusIndex !== -1) {
        conversation[statusIndex] = this.status
      }
@ -157,42 +162,57 @@ const conversation = {
      }, {})
    },
    threadTree() {
-      const reverseLookupTable = this.conversation.reduce((table, status, index) => {
+      const reverseLookupTable = this.conversation.reduce(
+        (table, status, index) => {
          table[status.id] = index
          return table
-      }, {})
+        },
+        {}
+      )

-      const threads = this.conversation.reduce((a, cur) => {
+      const threads = this.conversation.reduce(
+        (a, cur) => {
          const id = cur.id
-        a.forest[id] = this.getReplies(id)
-          .map(s => s.id)
+          a.forest[id] = this.getReplies(id).map((s) => s.id)

          return a
-      }, {
+        },
+        {
          forest: {}
-      })
+        }
+      )

-      const walk = (forest, topLevel, depth = 0, processed = {}) => topLevel.map(id => {
+      const walk = (forest, topLevel, depth = 0, processed = {}) =>
+        topLevel
+          .map((id) => {
            if (processed[id]) {
              return []
            }

            processed[id] = true
-        return [{
+            return [
+              {
                status: this.conversation[reverseLookupTable[id]],
                id,
                depth
-        }, walk(forest, forest[id], depth + 1, processed)].reduce((a, b) => a.concat(b), [])
-      }).reduce((a, b) => a.concat(b), [])
+              },
+              walk(forest, forest[id], depth + 1, processed)
+            ].reduce((a, b) => a.concat(b), [])
+          })
+          .reduce((a, b) => a.concat(b), [])

-      const linearized = walk(threads.forest, this.topLevel.map(k => k.id))
+      const linearized = walk(
+        threads.forest,
+        this.topLevel.map((k) => k.id)
+      )

      return linearized
    },
    replyIds() {
-      return this.conversation.map(k => k.id)
+      return this.conversation
+        .map((k) => k.id)
        .reduce((res, id) => {
-          res[id] = (this.replies[id] || []).map(k => k.id)
+          res[id] = (this.replies[id] || []).map((k) => k.id)
          return res
        }, {})
    },
@ -202,10 +222,14 @@ const conversation = {
        if (sizes[id]) {
          return sizes[id]
        }
-        sizes[id] = 1 + this.replyIds[id].map(cid => subTreeSizeFor(cid)).reduce((a, b) => a + b, 0)
+        sizes[id] =
+          1 +
+          this.replyIds[id]
+            .map((cid) => subTreeSizeFor(cid))
+            .reduce((a, b) => a + b, 0)
        return sizes[id]
      }
-      this.conversation.map(k => k.id).map(subTreeSizeFor)
+      this.conversation.map((k) => k.id).map(subTreeSizeFor)
      return Object.keys(sizes).reduce((res, id) => {
        res[id] = sizes[id] - 1 // exclude itself
        return res
@ -217,10 +241,14 @@ const conversation = {
        if (depths[id]) {
          return depths[id]
        }
-        depths[id] = 1 + this.replyIds[id].map(cid => subTreeDepthFor(cid)).reduce((a, b) => a > b ? a : b, 0)
+        depths[id] =
+          1 +
+          this.replyIds[id]
+            .map((cid) => subTreeDepthFor(cid))
+            .reduce((a, b) => (a > b ? a : b), 0)
        return depths[id]
      }
-      this.conversation.map(k => k.id).map(subTreeDepthFor)
+      this.conversation.map((k) => k.id).map(subTreeDepthFor)
      return Object.keys(depths).reduce((res, id) => {
        res[id] = depths[id] - 1 // exclude itself
        return res
@ -233,8 +261,16 @@ const conversation = {
      }, {})
    },
    topLevel() {
-      const topLevel = this.conversation.reduce((tl, cur) =>
-        tl.filter(k => this.getReplies(cur.id).map(v => v.id).indexOf(k.id) === -1), this.conversation)
+      const topLevel = this.conversation.reduce(
+        (tl, cur) =>
+          tl.filter(
+            (k) =>
+              this.getReplies(cur.id)
+                .map((v) => v.id)
+                .indexOf(k.id) === -1
+          ),
+        this.conversation
+      )
      return topLevel
    },
    otherTopLevelCount() {
@ -260,15 +296,26 @@ const conversation = {
    shouldShowAllConversationButton() {
      // The "show all conversation" button tells the user that there exist
      // other toplevel statuses, so do not show it if there is only a single root
-      return this.isTreeView && this.isExpanded && this.diveMode && this.topLevel.length > 1
+      return (
+        this.isTreeView &&
+        this.isExpanded &&
+        this.diveMode &&
+        this.topLevel.length > 1
+      )
    },
    shouldShowAncestors() {
-      return this.isTreeView && this.isExpanded && this.ancestorsOf(this.diveRoot).length
+      return (
+        this.isTreeView &&
+        this.isExpanded &&
+        this.ancestorsOf(this.diveRoot).length
+      )
    },
    replies() {
      let i = 1
      // eslint-disable-next-line camelcase
-      return reduce(this.conversation, (result, { id, in_reply_to_status_id }) => {
+      return reduce(
+        this.conversation,
+        (result, { id, in_reply_to_status_id }) => {
          /* eslint-disable camelcase */
          const irid = in_reply_to_status_id
          /* eslint-enable camelcase */
@ -281,7 +328,9 @@ const conversation = {
          }
          i++
          return result
-      }, {})
+        },
+        {}
+      )
    },
    isExpanded() {
      return !!(this.expanded || this.isPage)
@ -298,7 +347,7 @@ const conversation = {
          if (this.threadDisplayStatusObject[id]) {
            return this.threadDisplayStatusObject[id]
          }
-          if ((depth - this.diveDepth) <= this.maxDepthToShowByDefault) {
+          if (depth - this.diveDepth <= this.maxDepthToShowByDefault) {
            return 'showing'
          } else {
            return 'hidden'
@ -339,7 +388,7 @@ const conversation = {
    },
    focused() {
      return (id) => {
-        return (this.isExpanded) && id === this.highlight
+        return this.isExpanded && id === this.highlight
      }
    },
    maybeHighlight() {
@ -347,7 +396,7 @@ const conversation = {
    },
    ...mapGetters(['mergedConfig']),
    ...mapState({
-      mastoUserSocketStatus: state => state.api.mastoUserSocketStatus
+      mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus
    })
  },
  components: {
@ -358,7 +407,11 @@ const conversation = {
    statusId(newVal, oldVal) {
      const newConversationId = this.getConversationId(newVal)
      const oldConversationId = this.getConversationId(oldVal)
-      if (newConversationId && oldConversationId && newConversationId === oldConversationId) {
+      if (
+        newConversationId &&
+        oldConversationId &&
+        newConversationId === oldConversationId
+      ) {
        this.setHighlight(this.originalStatusId)
      } else {
        this.fetchConversation()
@ -372,23 +425,25 @@ const conversation = {
      }
    },
    virtualHidden(value) {
-      this.$store.dispatch(
-        'setVirtualHeight',
-        { statusId: this.statusId, height: `${this.$el.clientHeight}px` }
-      )
+      this.$store.dispatch('setVirtualHeight', {
+        statusId: this.statusId,
+        height: `${this.$el.clientHeight}px`
+      })
    }
  },
  methods: {
    fetchConversation() {
      if (this.status) {
-        this.$store.state.api.backendInteractor.fetchConversation({ id: this.statusId })
+        this.$store.state.api.backendInteractor
+          .fetchConversation({ id: this.statusId })
          .then(({ ancestors, descendants }) => {
            this.$store.dispatch('addNewStatuses', { statuses: ancestors })
            this.$store.dispatch('addNewStatuses', { statuses: descendants })
            this.setHighlight(this.originalStatusId)
          })
      } else {
-        this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
+        this.$store.state.api.backendInteractor
+          .fetchStatus({ id: this.statusId })
          .then((status) => {
            this.$store.dispatch('addNewStatuses', { statuses: [status] })
            this.fetchConversation()
@ -417,7 +472,11 @@ const conversation = {
    },
    getConversationId(statusId) {
      const status = this.$store.state.statuses.allStatusesObject[statusId]
-      return get(status, 'retweeted_status.statusnet_conversation_id', get(status, 'statusnet_conversation_id'))
+      return get(
+        status,
+        'retweeted_status.statusnet_conversation_id',
+        get(status, 'statusnet_conversation_id')
+      )
    },
    setThreadDisplay(id, nextStatus) {
      this.threadDisplayStatusObject = {
@ -432,7 +491,9 @@ const conversation = {
    },
    setThreadDisplayRecursively(id, nextStatus) {
      this.setThreadDisplay(id, nextStatus)
-      this.getReplies(id).map(k => k.id).map(id => this.setThreadDisplayRecursively(id, nextStatus))
+      this.getReplies(id)
+        .map((k) => k.id)
+        .map((id) => this.setThreadDisplayRecursively(id, nextStatus))
    },
    showThreadRecursively(id) {
      this.setThreadDisplayRecursively(id, 'showing')
@ -447,7 +508,11 @@ const conversation = {
      }
    },
    toggleStatusContentProperty(id, name) {
-      this.setStatusContentProperty(id, name, !this.statusContentProperties[id][name])
+      this.setStatusContentProperty(
+        id,
+        name,
+        !this.statusContentProperties[id][name]
+      )
    },
    leastVisibleAncestor(id) {
      let cur = id
@ -467,7 +532,9 @@ const conversation = {
      this.tryScrollTo(id)
    },
    diveToTopLevel() {
-      this.tryScrollTo(this.topLevelAncestorOrSelfId(this.diveRoot) || this.topLevel[0].id)
+      this.tryScrollTo(
+        this.topLevelAncestorOrSelfId(this.diveRoot) || this.topLevel[0].id
+      )
    },
    // only used when we are not on a page
    undive() {
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@ -3,7 +3,7 @@
    v-if="!hideStatus"
    :style="hiddenStyle"
    class="Conversation"
-    :class="{ '-expanded' : isExpanded, 'panel' : isExpanded }"
+    :class="{ '-expanded': isExpanded, panel: isExpanded }"
  >
    <div
      v-if="isExpanded"
@ -35,13 +35,15 @@
            @click.prevent="diveToTopLevel"
          >
            <template #icon>
-              <FAIcon
-                icon="angle-double-left"
-              />
+              <FAIcon icon="angle-double-left" />
            </template>
            <template #text>
              <span>
-                {{ $tc('status.show_all_conversation', otherTopLevelCount, { numStatus: otherTopLevelCount }) }}
+                {{
+                  $tc('status.show_all_conversation', otherTopLevelCount, {
+                    numStatus: otherTopLevelCount
+                  })
+                }}
              </span>
            </template>
          </i18n-t>
@ -54,14 +56,20 @@
            v-for="status in ancestorsOf(diveRoot)"
            :key="status.id"
            class="thread-ancestor"
-            :class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1, '-faded': shouldFadeAncestors}"
+            :class="{
+              'thread-ancestor-has-other-replies':
+                getReplies(status.id).length > 1,
+              '-faded': shouldFadeAncestors
+            }"
          >
            <status
              ref="statusComponent"
              :inline-expanded="collapsable && isExpanded"
              :statusoid="status"
              :expandable="!isExpanded"
-              :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+              :show-pinned="
+                pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]
+              "
              :focused="focused(status.id)"
              :in-conversation="isExpanded"
              :highlight="getHighlight()"
@ -69,7 +77,6 @@
              :in-profile="inProfile"
              :profile-user-id="profileUserId"
              class="conversation-status status-fadein panel-body"
-
              :simple-tree="treeViewIsSimple"
              :toggle-thread-display="toggleThreadDisplay"
              :thread-display-status="threadDisplayStatus"
@ -78,28 +85,47 @@
              :total-reply-depth="totalReplyDepth"
              :show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
              :dive="() => diveIntoStatus(status.id)"
-
-              :controlled-showing-tall="statusContentProperties[status.id].showingTall"
-              :controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
-              :controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
+              :controlled-showing-tall="
+                statusContentProperties[status.id].showingTall
+              "
+              :controlled-expanding-subject="
+                statusContentProperties[status.id].expandingSubject
+              "
+              :controlled-showing-long-subject="
+                statusContentProperties[status.id].showingLongSubject
+              "
              :controlled-replying="statusContentProperties[status.id].replying"
-              :controlled-media-playing="statusContentProperties[status.id].mediaPlaying"
-              :controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')"
-              :controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')"
-              :controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')"
-              :controlled-toggle-replying="() => toggleStatusContentProperty(status.id, 'replying')"
-              :controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"
-
+              :controlled-media-playing="
+                statusContentProperties[status.id].mediaPlaying
+              "
+              :controlled-toggle-showing-tall="
+                () => toggleStatusContentProperty(status.id, 'showingTall')
+              "
+              :controlled-toggle-expanding-subject="
+                () => toggleStatusContentProperty(status.id, 'expandingSubject')
+              "
+              :controlled-toggle-showing-long-subject="
+                () =>
+                  toggleStatusContentProperty(status.id, 'showingLongSubject')
+              "
+              :controlled-toggle-replying="
+                () => toggleStatusContentProperty(status.id, 'replying')
+              "
+              :controlled-set-media-playing="
+                (newVal) =>
+                  toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)
+              "
              @goto="setHighlight"
              @toggleExpanded="toggleExpanded"
            />
            <div
-              v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
+              v-if="
+                showOtherRepliesButtonBelowStatus &&
+                getReplies(status.id).length > 1
+              "
              class="thread-ancestor-dive-box"
            >
-              <div
-                class="thread-ancestor-dive-box-inner"
-              >
+              <div class="thread-ancestor-dive-box-inner">
                <i18n-t
                  tag="button"
                  scope="global"
@ -108,13 +134,17 @@
                  @click.prevent="diveIntoStatus(status.id)"
                >
                  <template #icon>
-                    <FAIcon
-                      icon="angle-double-right"
-                    />
+                    <FAIcon icon="angle-double-right" />
                  </template>
                  <template #text>
                    <span>
-                      {{ $tc('status.ancestor_follow', getReplies(status.id).length - 1, { numReplies: getReplies(status.id).length - 1 }) }}
+                      {{
+                        $tc(
+                          'status.ancestor_follow',
+                          getReplies(status.id).length - 1,
+                          { numReplies: getReplies(status.id).length - 1 }
+                        )
+                      }}
                    </span>
                  </template>
                </i18n-t>
@ -127,7 +157,6 @@
          :key="status.id"
          ref="statusComponent"
          :depth="0"
-
          :status="status"
          :in-profile="inProfile"
          :conversation="conversation"
@ -135,13 +164,11 @@
          :is-expanded="isExpanded"
          :pinned-status-ids-object="pinnedStatusIdsObject"
          :profile-user-id="profileUserId"
-
          :focused="focused"
          :get-replies="getReplies"
          :highlight="maybeHighlight"
          :set-highlight="setHighlight"
          :toggle-expanded="toggleExpanded"
-
          :simple="treeViewIsSimple"
          :toggle-thread-display="toggleThreadDisplay"
          :thread-display-status="threadDisplayStatus"
@ -165,7 +192,9 @@
          :inline-expanded="collapsable && isExpanded"
          :statusoid="status"
          :expandable="!isExpanded"
-          :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+          :show-pinned="
+            pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]
+          "
          :focused="focused(status.id)"
          :in-conversation="isExpanded"
          :highlight="getHighlight()"
@ -173,7 +202,6 @@
          :in-profile="inProfile"
          :profile-user-id="profileUserId"
          class="conversation-status status-fadein panel-body"
-
          :toggle-thread-display="toggleThreadDisplay"
          :thread-display-status="threadDisplayStatus"
          :show-thread-recursively="showThreadRecursively"
@ -182,7 +210,6 @@
          :status-content-properties="statusContentProperties"
          :set-status-content-property="setStatusContentProperty"
          :toggle-status-content-property="toggleStatusContentProperty"
-
          @goto="setHighlight"
          @toggleExpanded="toggleExpanded"
        />
@ -233,7 +260,8 @@
    border-bottom-color: var(--border, $fallback--border);
    border-radius: 0;
    /* Make the button stretch along the whole row */
-    &, &-inner {
+    &,
+    &-inner {
      display: flex;
      align-items: stretch;
      flex-direction: column;
@ -271,7 +299,8 @@
    border-left-color: $fallback--cRed;
    border-left-color: var(--cRed, $fallback--cRed);
    border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
-    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius)
+      var(--panelRadius, $fallback--panelRadius);
    border-bottom: 1px solid var(--border, $fallback--border);
  }

--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@ -46,42 +46,56 @@ export default {
  },
  data: () => ({
    searchBarHidden: true,
-    supportsMask: window.CSS && window.CSS.supports && (
-      window.CSS.supports('mask-size', 'contain') ||
+    supportsMask:
+      window.CSS &&
+      window.CSS.supports &&
+      (window.CSS.supports('mask-size', 'contain') ||
        window.CSS.supports('-webkit-mask-size', 'contain') ||
        window.CSS.supports('-moz-mask-size', 'contain') ||
        window.CSS.supports('-ms-mask-size', 'contain') ||
-        window.CSS.supports('-o-mask-size', 'contain')
-    ),
+        window.CSS.supports('-o-mask-size', 'contain')),
    showingConfirmLogout: false
  }),
  computed: {
-    enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
+    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 ? {
+      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`,
+      return Object.assign(
+        {
+          margin: `${this.$store.state.instance.logoMargin} 0`,
          opacity: this.searchBarHidden ? 1 : 0
-      }, this.enableMask ? {} : {
-        'background-color': this.enableMask ? '' : 'transparent'
-      })
        },
-    logo () { return this.$store.state.instance.logo },
+        this.enableMask
+          ? {}
+          : {
+              'background-color': this.enableMask ? '' : 'transparent'
+            }
+      )
+    },
+    logo() {
+      return this.$store.state.instance.logo
+    },
    mergedConfig() {
      return this.$store.getters.mergedConfig
    },
-    sitename () { return this.$store.state.instance.name },
+    sitename() {
+      return this.$store.state.instance.name
+    },
    showNavShortcuts() {
      return this.mergedConfig.showNavShortcuts
    },
@ -94,10 +108,18 @@ export default {
    hideSiteName() {
      return this.mergedConfig.hideSiteName
    },
-    hideSitename () { return this.$store.state.instance.hideSitename },
-    logoLeft () { return this.$store.state.instance.logoLeft },
-    currentUser () { return this.$store.state.users.currentUser },
-    privateMode () { return this.$store.state.instance.private },
+    hideSitename() {
+      return this.$store.state.instance.hideSitename
+    },
+    logoLeft() {
+      return this.$store.state.instance.logoLeft
+    },
+    currentUser() {
+      return this.$store.state.users.currentUser
+    },
+    privateMode() {
+      return this.$store.state.instance.private
+    },
    shouldConfirmLogout() {
      return this.$store.getters.mergedConfig.modalOnLogout
    },
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@ -19,7 +19,7 @@
            v-if="!hideSiteFavicon"
            class="favicon"
            src="/favicon.png"
-          >
+          />
          <span
            v-if="!hideSiteName"
            class="site-name"
@ -91,7 +91,7 @@
        <img
          :src="logo"
          :style="logoStyle"
-        >
+        />
      </router-link>
      <div class="item right actions">
        <search-bar
@ -106,7 +106,10 @@
          <router-link
            v-if="currentUser"
            class="nav-icon"
-            :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
+            :to="{
+              name: 'interactions',
+              params: { username: currentUser.screen_name }
+            }"
          >
            <FAIcon
              fixed-width
@ -152,7 +155,10 @@
          />
        </button>
        <button
-          v-if="currentUser && currentUser.role === 'admin' || currentUser.role === 'moderator'"
+          v-if="
+            (currentUser && currentUser.role === 'admin') ||
+            currentUser.role === 'moderator'
+          "
          class="button-unstyled nav-icon"
          @click.stop="openModModal"
        >
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@ -31,14 +31,14 @@
 .dark-overlay {
  &::before {
    bottom: 0;
-    content: " ";
+    content: ' ';
    display: block;
    cursor: default;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
-    background: rgba(27,31,35,.5);
+    background: rgba(27, 31, 35, 0.5);
    z-index: 2000;
  }
 }
@ -74,7 +74,7 @@

  .dialog-modal-footer {
    margin: 0;
-    padding: .5em .5em;
+    padding: 0.5em 0.5em;
    background-color: $fallback--bg;
    background-color: var(--bg, $fallback--bg);
    border-top: 1px solid $fallback--border;
@ -84,9 +84,8 @@

    button {
      width: auto;
-      margin-left: .5rem;
+      margin-left: 0.5rem;
    }
  }
 }
-
 </style>
--- 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>
--- a/src/components/edit_status_modal/edit_status_modal.js
+++ b/src/components/edit_status_modal/edit_status_modal.js
@ -38,7 +38,9 @@ const EditStatusModal = {
    },
    isFormVisible(val) {
      if (val) {
-        this.$nextTick(() => this.$el && this.$el.querySelector('textarea').focus())
+        this.$nextTick(
+          () => this.$el && this.$el.querySelector('textarea').focus()
+        )
      }
    }
  },
@ -55,7 +57,8 @@ const EditStatusModal = {
        contentType
      }

-      return statusPosterService.editStatus(params)
+      return statusPosterService
+        .editStatus(params)
        .then((data) => {
          return data
        })
--- a/src/components/edit_status_modal/edit_status_modal.vue
+++ b/src/components/edit_status_modal/edit_status_modal.vue
@ -11,10 +11,10 @@
      <PostStatusForm
        class="panel-body"
        v-bind="params"
-        @posted="closeModal"
-        :disablePolls="true"
-        :disableVisibilitySelector="true"
+        :disable-polls="true"
+        :disable-visibility-selector="true"
        :post-handler="doEditStatus"
+        @posted="closeModal"
      />
    </div>
  </Modal>
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@ -4,13 +4,9 @@ import { take } from 'lodash'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'

 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faSmileBeam
-} from '@fortawesome/free-regular-svg-icons'
+import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'

-library.add(
-  faSmileBeam
-)
+library.add(faSmileBeam)

 /**
 * EmojiInput - augmented inputs for emoji and autocomplete support in inputs
@ -127,25 +123,30 @@ const EmojiInput = {
      return this.$store.getters.mergedConfig.padEmoji
    },
    showSuggestions() {
-      return this.focused &&
+      return (
+        this.focused &&
        this.suggestions &&
        this.suggestions.length > 0 &&
        !this.showPicker &&
        !this.temporarilyHideSuggestions
+      )
    },
    textAtCaret() {
      return (this.wordAtCaret || {}).word || ''
    },
    wordAtCaret() {
      if (this.modelValue && this.caret) {
-        const word = Completion.wordAtPosition(this.modelValue, this.caret - 1) || {}
+        const word =
+          Completion.wordAtPosition(this.modelValue, this.caret - 1) || {}
        return word
      }
    }
  },
  mounted() {
    const { root } = this.$refs
-    const input = root.querySelector('.emoji-input > input') || root.querySelector('.emoji-input > textarea')
+    const input =
+      root.querySelector('.emoji-input > input') ||
+      root.querySelector('.emoji-input > textarea')
    if (!input) return
    this.input = input
    this.resize()
@ -183,11 +184,12 @@ const EmojiInput = {
      // Async: cancel if textAtCaret has changed during wait
      if (this.textAtCaret !== newWord) return
      if (matchedSuggestions.length <= 0) return
-      this.suggestions = take(matchedSuggestions, 5)
-        .map(({ imageUrl, ...rest }) => ({
+      this.suggestions = take(matchedSuggestions, 5).map(
+        ({ imageUrl, ...rest }) => ({
          ...rest,
          img: imageUrl || ''
-        }))
+        })
+      )
    },
    suggestions: {
      handler(newValue) {
@ -228,7 +230,11 @@ const EmojiInput = {
      }
    },
    replace(replacement) {
-      const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
+      const newValue = Completion.replaceWord(
+        this.modelValue,
+        this.wordAtCaret,
+        replacement
+      )
      this.$emit('update:modelValue', newValue)
      this.caret = 0
    },
@ -251,19 +257,25 @@ const EmojiInput = {
       * them, masto seem to be rendering :emoji::emoji: correctly now so why not
       */
      const isSpaceRegex = /\s/
-      const spaceBefore = (surroundingSpace && !isSpaceRegex.exec(before.slice(-1)) && before.length && this.padEmoji > 0) ? ' ' : ''
-      const spaceAfter = (surroundingSpace && !isSpaceRegex.exec(after[0]) && this.padEmoji) ? ' ' : ''
+      const spaceBefore =
+        surroundingSpace &&
+        !isSpaceRegex.exec(before.slice(-1)) &&
+        before.length &&
+        this.padEmoji > 0
+          ? ' '
+          : ''
+      const spaceAfter =
+        surroundingSpace && !isSpaceRegex.exec(after[0]) && this.padEmoji
+          ? ' '
+          : ''

-      const newValue = [
-        before,
-        spaceBefore,
-        insertion,
-        spaceAfter,
-        after
-      ].join('')
+      const newValue = [before, spaceBefore, insertion, spaceAfter, after].join(
+        ''
+      )
      this.keepOpen = keepOpen
      this.$emit('update:modelValue', newValue)
-      const position = this.caret + (insertion + spaceAfter + spaceBefore).length
+      const position =
+        this.caret + (insertion + spaceAfter + spaceBefore).length
      if (!keepOpen) {
        this.input.focus()
      }
@ -278,9 +290,14 @@ const EmojiInput = {
    replaceText(e, suggestion) {
      const len = this.suggestions.length || 0
      if (len > 0 || suggestion) {
-        const chosenSuggestion = suggestion || this.suggestions[this.highlighted]
+        const chosenSuggestion =
+          suggestion || this.suggestions[this.highlighted]
        const replacement = chosenSuggestion.replacement
-        const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
+        const newValue = Completion.replaceWord(
+          this.modelValue,
+          this.wordAtCaret,
+          replacement
+        )
        this.$emit('update:modelValue', newValue)
        this.highlighted = 0
        const position = this.wordAtCaret.start + replacement.length
@ -325,20 +342,22 @@ const EmojiInput = {
       * replies in notifs) or mobile post form. Note that getting and setting
       * scroll is different for `Window` and `Element`s
       */
-      const scrollerRef = this.$el.closest('.sidebar-scroller') ||
+      const scrollerRef =
+        this.$el.closest('.sidebar-scroller') ||
        this.$el.closest('.post-form-modal-view') ||
        window
-      const currentScroll = scrollerRef === window
-        ? scrollerRef.scrollY
-        : scrollerRef.scrollTop
-      const scrollerHeight = scrollerRef === window
+      const currentScroll =
+        scrollerRef === window ? scrollerRef.scrollY : scrollerRef.scrollTop
+      const scrollerHeight =
+        scrollerRef === window
          ? scrollerRef.innerHeight
          : scrollerRef.offsetHeight

      const scrollerBottomBorder = currentScroll + scrollerHeight
      // We check where the bottom border of root element is, this uses findOffset
      // to find offset relative to scrollable container (scroller)
-      const rootBottomBorder = rootRef.offsetHeight + findOffset(rootRef, scrollerRef).top
+      const rootBottomBorder =
+        rootRef.offsetHeight + findOffset(rootRef, scrollerRef).top

      const bottomDelta = Math.max(0, rootBottomBorder - scrollerBottomBorder)
      // could also check top delta but there's no case for it
@ -490,7 +509,10 @@ const EmojiInput = {
    },
    setPlacement(container, target, offsetBottom) {
      if (!container || !target) return
-      if (this.placement === 'bottom' || (this.placement === 'auto' && !this.overflowsBottom(container))) {
+      if (
+        this.placement === 'bottom' ||
+        (this.placement === 'auto' && !this.overflowsBottom(container))
+      ) {
        target.style.top = offsetBottom + 'px'
        target.style.bottom = 'auto'
      } else {
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@ -42,11 +42,14 @@
          :class="{ highlighted: index === highlighted }"
          @click.stop.prevent="onClick($event, suggestion)"
        >
-          <span v-if="!suggestion.mfm" class="image">
+          <span
+            v-if="!suggestion.mfm"
+            class="image"
+          >
            <img
              v-if="suggestion.img"
              :src="suggestion.img"
-            >
+            />
            <span v-else>{{ suggestion.replacement }}</span>
          </span>
          <div class="label">
@ -77,7 +80,7 @@
    position: absolute;
    top: 0;
    right: 0;
-    margin: .2em .25em;
+    margin: 0.2em 0.25em;
    font-size: 1.3em;
    cursor: pointer;
    line-height: 24px;
@ -93,7 +96,7 @@
    margin-top: 2px;

    &.hide {
-      display: none
+      display: none;
    }
  }

@ -104,7 +107,7 @@
      margin-top: 2px;

      &.hide {
-        display: none
+        display: none;
      }

      &-body {
@ -178,7 +181,8 @@
    }
  }

-  input, textarea {
+  input,
+  textarea {
    flex: 1 0 auto;
  }
 }
--- a/src/components/emoji_input/suggestor.js
+++ b/src/components/emoji_input/suggestor.js
@ -1,5 +1,26 @@
-const MFM_TAGS = ['blur', 'bounce', 'flip', 'font', 'jelly', 'jump', 'rainbow', 'rotate', 'shake', 'sparkle', 'spin', 'tada', 'twitch', 'x2', 'x3', 'x4']
-  .map(tag => ({ displayText: tag, detailText: '$[' + tag + ' ]', replacement: '$[' + tag + ' ]', mfm: true }))
+const MFM_TAGS = [
+  'blur',
+  'bounce',
+  'flip',
+  'font',
+  'jelly',
+  'jump',
+  'rainbow',
+  'rotate',
+  'shake',
+  'sparkle',
+  'spin',
+  'tada',
+  'twitch',
+  'x2',
+  'x3',
+  'x4'
+].map((tag) => ({
+  displayText: tag,
+  detailText: '$[' + tag + ' ]',
+  replacement: '$[' + tag + ' ]',
+  mfm: true
+}))

 /**
 * suggest - generates a suggestor function to be used by emoji-input
@ -13,10 +34,10 @@ const MFM_TAGS = ['blur', 'bounce', 'flip', 'font', 'jelly', 'jump', 'rainbow',
 * doesn't support user linking you can just provide only emoji.
 */

-export default data => {
+export default (data) => {
  const emojiCurry = suggestEmoji(data.emoji)
  const usersCurry = data.store && suggestUsers(data.store)
-  return input => {
+  return (input) => {
    const firstChar = input[0]
    if (firstChar === ':' && data.emoji) {
      return emojiCurry(input)
@ -25,14 +46,15 @@ export default data => {
      return usersCurry(input)
    }
    if (firstChar === '$') {
-      return MFM_TAGS
-        .filter(({ replacement }) => replacement.toLowerCase().indexOf(input) !== -1)
+      return MFM_TAGS.filter(
+        ({ replacement }) => replacement.toLowerCase().indexOf(input) !== -1
+      )
    }
    return []
  }
 }

-export const suggestEmoji = emojis => input => {
+export const suggestEmoji = (emojis) => (input) => {
  const noPrefix = input.toLowerCase().substr(1)
  return emojis
    .filter(({ displayText }) => displayText.toLowerCase().match(noPrefix))
@ -85,7 +107,7 @@ export const suggestUsers = ({ dispatch, state }) => {
    })
  }

-  return async input => {
+  return async (input) => {
    const noPrefix = input.toLowerCase().substr(1)
    if (previousQuery === noPrefix) return suggestions

@ -99,11 +121,14 @@ export const suggestUsers = ({ dispatch, state }) => {
      await debounceUserSearch(noPrefix)
    }

-    const newSuggestions = state.users.users.filter(
-      user =>
+    const newSuggestions = state.users.users
+      .filter(
+        (user) =>
          user.screen_name.toLowerCase().startsWith(noPrefix) ||
          user.name.toLowerCase().startsWith(noPrefix)
-    ).slice(0, 20).sort((a, b) => {
+      )
+      .slice(0, 20)
+      .sort((a, b) => {
        let aScore = 0
        let bScore = 0

@ -123,12 +148,20 @@ export const suggestUsers = ({ dispatch, state }) => {

        return diff + nameAlphabetically + screenNameAlphabetically
        /* eslint-disable camelcase */
-    }).map(({ screen_name, screen_name_ui, name, profile_image_url_original }) => ({
+      })
+      .map(
+        ({
+          screen_name,
+          screen_name_ui,
+          name,
+          profile_image_url_original
+        }) => ({
          displayText: screen_name_ui,
          detailText: name,
          imageUrl: profile_image_url_original,
          replacement: '@' + screen_name + ' '
-    }))
+        })
+      )
    /* eslint-enable camelcase */

    suggestions = newSuggestions || []
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@ -8,11 +8,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { trim, escapeRegExp, startCase } from 'lodash'

-library.add(
-  faBoxOpen,
-  faStickyNote,
-  faSmileBeam
-)
+library.add(faBoxOpen, faStickyNote, faSmileBeam)

 // At widest, approximately 20 emoji are visible in a row,
 // loading 3 rows, could be overkill for narrow picker
@ -42,7 +38,9 @@ const EmojiPicker = {
    }
  },
  components: {
-    StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
+    StickerPicker: defineAsyncComponent(() =>
+      import('../sticker_picker/sticker_picker.vue')
+    ),
    Checkbox
  },
  methods: {
@ -53,7 +51,9 @@ const EmojiPicker = {
      this.$emit('sticker-upload-failed', e)
    },
    onEmoji(emoji) {
-      const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
+      const value = emoji.imageUrl
+        ? `:${emoji.displayText}:`
+        : emoji.replacement
      this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
    },
    onScroll(e) {
@ -93,7 +93,8 @@ const EmojiPicker = {
      // Always load when at the very top in case there's no scroll space yet
      const atTop = scrollerTop < 5
      // Don't load when looking at unicode category or at the very bottom
-      const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
+      const bottomAboveViewport =
+        bottom < scrollerTop || scrollerBottom === scrollerMax
      if (!bottomAboveViewport && (approachingBottom || atTop)) {
        this.loadEmoji()
      }
@ -101,7 +102,7 @@ const EmojiPicker = {
    scrolledGroup(target) {
      const top = target.scrollTop + 5
      this.$nextTick(() => {
-        this.emojisView.forEach(group => {
+        this.emojisView.forEach((group) => {
          const ref = this.$refs['group-' + group.id]
          if (ref.offsetTop <= top) {
            this.activeGroup = group.id
@ -110,7 +111,8 @@ const EmojiPicker = {
      })
    },
    loadEmoji() {
-      const allLoaded = this.customEmojiBuffer.length === this.filteredEmoji.length
+      const allLoaded =
+        this.customEmojiBuffer.length === this.filteredEmoji.length

      if (allLoaded) {
        return
@ -141,8 +143,11 @@ const EmojiPicker = {
    filterByKeyword(list) {
      if (this.keyword === '') return list
      const regex = new RegExp(escapeRegExp(trim(this.keyword)), 'i')
-      return list.filter(emoji => {
-        return (regex.test(emoji.displayText) || (!emoji.imageUrl && emoji.replacement === this.keyword))
+      return list.filter((emoji) => {
+        return (
+          regex.test(emoji.displayText) ||
+          (!emoji.imageUrl && emoji.replacement === this.keyword)
+        )
      })
    }
  },
@ -164,9 +169,7 @@ const EmojiPicker = {
      return 0
    },
    filteredEmoji() {
-      return this.filterByKeyword(
-        this.$store.state.instance.customEmoji || []
-      )
+      return this.filterByKeyword(this.$store.state.instance.customEmoji || [])
    },
    customEmojiBuffer() {
      return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
@ -209,17 +212,20 @@ const EmojiPicker = {
    },
    emojisView() {
      if (this.keyword === '') {
-        return this.emojis.filter(pack => {
+        return this.emojis.filter((pack) => {
          return pack.id === this.activeGroup
        })
      } else {
-        return this.emojis.filter(pack => {
+        return this.emojis.filter((pack) => {
          return pack.emojis.length > 0
        })
      }
    },
    stickerPickerEnabled() {
-      return (this.$store.state.instance.stickers || []).length !== 0 && this.enableStickerPicker
+      return (
+        (this.$store.state.instance.stickers || []).length !== 0 &&
+        this.enableStickerPicker
+      )
    }
  }
 }
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@ -2,9 +2,9 @@
  <div class="emoji-picker panel panel-default panel-body">
    <div class="heading">
      <span
+        ref="emoji-tabs"
        class="emoji-tabs"
        @wheel="onWheel"
-        ref="emoji-tabs"
      >
        <span
          v-for="group in emojis"
@ -17,11 +17,13 @@
          :title="group.text"
          @click.prevent="highlight(group.id)"
        >
-          <span v-if="!group.first.imageUrl">{{ group.first.replacement }}</span>
+          <span v-if="!group.first.imageUrl">{{
+            group.first.replacement
+          }}</span>
          <img
            v-else
            :src="group.first.imageUrl"
-          >
+          />
        </span>
        <span
          v-if="stickerPickerEnabled"
@ -49,7 +51,7 @@
            class="form-control"
            :placeholder="$t('emoji.search_emoji')"
            @input="$event.target.composing = false"
-          >
+          />
        </div>
        <div
          ref="emoji-groups"
@ -79,7 +81,7 @@
              <img
                v-else
                :src="emoji.imageUrl"
-              >
+              />
            </span>
            <span :ref="'group-end-' + group.id" />
          </div>
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@ -23,7 +23,9 @@ const EmojiReactions = {
        : this.status.emoji_reactions.slice(0, EMOJI_REACTION_COUNT_CUTOFF)
    },
    showMoreString() {
-      return `+${this.status.emoji_reactions.length - EMOJI_REACTION_COUNT_CUTOFF}`
+      return `+${
+        this.status.emoji_reactions.length - EMOJI_REACTION_COUNT_CUTOFF
+      }`
    },
    accountsForEmoji() {
      return this.status.emoji_reactions.reduce((acc, reaction) => {
@ -44,10 +46,10 @@ const EmojiReactions = {
      this.showAll = !this.showAll
    },
    reactedWith(emoji) {
-      return this.status.emoji_reactions.find(r => r.name === emoji).me
+      return this.status.emoji_reactions.find((r) => r.name === emoji).me
    },
    fetchEmojiReactionsByIfMissing() {
-      const hasNoAccounts = this.status.emoji_reactions.find(r => !r.accounts)
+      const hasNoAccounts = this.status.emoji_reactions.find((r) => !r.accounts)
      if (hasNoAccounts) {
        this.$store.dispatch('fetchEmojiReactionsBy', this.status.id)
      }
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@ -1,28 +1,35 @@
 <template>
  <div class="emoji-reactions">
    <UserListPopover
-      v-for="(reaction) in emojiReactions"
+      v-for="reaction in emojiReactions"
      :key="reaction.url || reaction.name"
      :users="accountsForEmoji[reaction.url || reaction.name]"
    >
      <button
        class="emoji-reaction btn button-default"
-        :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
+        :class="{
+          'picked-reaction': reactedWith(reaction.name),
+          'not-clickable': !loggedIn
+        }"
        @click="emojiOnClick(reaction.name, $event)"
        @mouseenter="fetchEmojiReactionsByIfMissing()"
      >
        <span
          v-if="reaction.url !== null"
+          class="emoji-button-inner"
        >
          <img
            :src="reaction.url"
            :title="reaction.name"
            class="reaction-emoji"
            width="2.55em"
-          >
+          />
          {{ reaction.count }}
        </span>
-        <span v-else>
+        <span
+          v-else
+          class="emoji-button-inner"
+        >
          <span class="reaction-emoji unicode-emoji">
            {{ reaction.name }}
          </span>
@ -52,7 +59,7 @@
 }

 .unicode-emoji {
-  font-size: 210%;
+  font-size: 128%;
 }

 .emoji-reaction {
@ -60,13 +67,17 @@
  margin-right: 0.5em;
  margin-top: 0.5em;
  display: flex;
+  height: 28px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  .reaction-emoji {
-    width: 2.55em !important;
    margin-right: 0.25em;
  }
+  img.reaction-emoji {
+    width: 1.55em !important;
+    display: block;
+  }
  &:focus {
    outline: none;
  }
@ -93,9 +104,12 @@
 }

 .button-default.picked-reaction {
-  border: 1px solid var(--accent, $fallback--link);
-  margin-left: -1px; // offset the border, can't use inset shadows either
-  margin-right: calc(0.5em - 1px);
-}
+  background: none;
+  padding: 1px 0.5em;

+  .emoji-button-inner {
+    display: flex;
+    align-items: center;
+  }
+}
 </style>
--- a/src/components/exporter/exporter.js
+++ b/src/components/exporter/exporter.js
@ -1,9 +1,7 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'

-library.add(
-  faCircleNotch
-)
+library.add(faCircleNotch)

 const Exporter = {
  props: {
@ -26,17 +24,21 @@ const Exporter = {
  methods: {
    process() {
      this.processing = true
-      this.getContent()
-        .then((content) => {
+      this.getContent().then((content) => {
        const fileToDownload = document.createElement('a')
-          fileToDownload.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content))
+        fileToDownload.setAttribute(
+          'href',
+          'data:text/plain;charset=utf-8,' + encodeURIComponent(content)
+        )
        fileToDownload.setAttribute('download', this.filename)
        fileToDownload.style.display = 'none'
        document.body.appendChild(fileToDownload)
        fileToDownload.click()
        document.body.removeChild(fileToDownload)
        // Add delay before hiding processing state since browser takes some time to handle file download
-          setTimeout(() => { this.processing = false }, 2000)
+        setTimeout(() => {
+          this.processing = false
+        }, 2000)
      })
    }
  }
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@ -62,54 +62,75 @@ const ExtraButtons = {
    },
    translateStatus() {
      if (this.noTranslationTargetSet) {
-        this.$store.dispatch('pushGlobalNotice', { messageKey: 'toast.no_translation_target_set', level: 'info' })
+        this.$store.dispatch('pushGlobalNotice', {
+          messageKey: 'toast.no_translation_target_set',
+          level: 'info'
+        })
      }
-      const translateTo = this.$store.getters.mergedConfig.translationLanguage || this.$store.state.instance.interfaceLanguage
-      this.$store.dispatch('translateStatus', { id: this.status.id, language: translateTo })
+      const translateTo =
+        this.$store.getters.mergedConfig.translationLanguage ||
+        this.$store.state.instance.interfaceLanguage
+      this.$store
+        .dispatch('translateStatus', {
+          id: this.status.id,
+          language: translateTo
+        })
        .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
+        .catch((err) => this.$emit('onError', err.error.error))
    },
    pinStatus() {
-      this.$store.dispatch('pinStatus', this.status.id)
+      this.$store
+        .dispatch('pinStatus', this.status.id)
        .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
+        .catch((err) => this.$emit('onError', err.error.error))
    },
    unpinStatus() {
-      this.$store.dispatch('unpinStatus', this.status.id)
+      this.$store
+        .dispatch('unpinStatus', this.status.id)
        .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
+        .catch((err) => this.$emit('onError', err.error.error))
    },
    muteConversation() {
-      this.$store.dispatch('muteConversation', this.status.id)
+      this.$store
+        .dispatch('muteConversation', this.status.id)
        .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
+        .catch((err) => this.$emit('onError', err.error.error))
    },
    unmuteConversation() {
-      this.$store.dispatch('unmuteConversation', this.status.id)
+      this.$store
+        .dispatch('unmuteConversation', this.status.id)
        .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
+        .catch((err) => this.$emit('onError', err.error.error))
    },
    copyLink() {
-      navigator.clipboard.writeText(this.statusLink)
+      navigator.clipboard
+        .writeText(this.statusLink)
        .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
+        .catch((err) => this.$emit('onError', err.error.error))
    },
    bookmarkStatus() {
-      this.$store.dispatch('bookmark', { id: this.status.id })
+      this.$store
+        .dispatch('bookmark', { id: this.status.id })
        .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
+        .catch((err) => this.$emit('onError', err.error.error))
    },
    unbookmarkStatus() {
-      this.$store.dispatch('unbookmark', { id: this.status.id })
+      this.$store
+        .dispatch('unbookmark', { id: this.status.id })
        .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
+        .catch((err) => this.$emit('onError', err.error.error))
    },
    reportStatus() {
-      this.$store.dispatch('openUserReportingModal', { userId: this.status.user.id, statusIds: [this.status.id] })
+      this.$store.dispatch('openUserReportingModal', {
+        userId: this.status.user.id,
+        statusIds: [this.status.id]
+      })
    },
    editStatus() {
-      this.$store.dispatch('fetchStatusSource', { id: this.status.id })
-        .then(data => this.$store.dispatch('openEditStatusModal', {
+      this.$store
+        .dispatch('fetchStatusSource', { id: this.status.id })
+        .then((data) =>
+          this.$store.dispatch('openEditStatusModal', {
            statusId: this.status.id,
            subject: data.spoiler_text,
            statusText: data.text,
@ -118,12 +139,23 @@ const ExtraButtons = {
            statusFiles: [...this.status.attachments],
            visibility: this.status.visibility,
            statusContentType: data.content_type
-        }))
+          })
+        )
    },
    showStatusHistory() {
      const originalStatus = { ...this.status }
-      const stripFieldsList = ['attachments', 'created_at', 'emojis', 'text', 'raw_html', 'nsfw', 'poll', 'summary', 'summary_raw_html']
-      stripFieldsList.forEach(p => delete originalStatus[p])
+      const stripFieldsList = [
+        'attachments',
+        'created_at',
+        'emojis',
+        'text',
+        'raw_html',
+        'nsfw',
+        'poll',
+        'summary',
+        'summary_raw_html'
+      ]
+      stripFieldsList.forEach((p) => delete originalStatus[p])
      this.$store.dispatch('openStatusHistoryModal', originalStatus)
    },
    redraftStatus() {
@ -134,8 +166,10 @@ const ExtraButtons = {
      }
    },
    doRedraftStatus() {
-      this.$store.dispatch('fetchStatusSource', { id: this.status.id })
-        .then(data => this.$store.dispatch('openPostStatusModal', {
+      this.$store
+        .dispatch('fetchStatusSource', { id: this.status.id })
+        .then((data) =>
+          this.$store.dispatch('openPostStatusModal', {
            isRedraft: true,
            statusId: this.status.id,
            subject: data.spoiler_text,
@ -145,7 +179,8 @@ const ExtraButtons = {
            statusFiles: [...this.status.attachments],
            statusScope: this.status.visibility,
            statusContentType: data.content_type
-        }))
+          })
+        )
      this.doDeleteStatus()
    },
    showRedraftStatusConfirmDialog() {
@ -156,17 +191,26 @@ const ExtraButtons = {
    }
  },
  computed: {
-    currentUser () { return this.$store.state.users.currentUser },
+    currentUser() {
+      return this.$store.state.users.currentUser
+    },
    canDelete() {
-      if (!this.currentUser) { return }
-      const superuser = this.currentUser.rights.moderator || this.currentUser.rights.admin
+      if (!this.currentUser) {
+        return
+      }
+      const superuser =
+        this.currentUser.rights.moderator || this.currentUser.rights.admin
      return superuser || this.status.user.id === this.currentUser.id
    },
    ownStatus() {
      return this.status.user.id === this.currentUser.id
    },
    canPin() {
-      return this.ownStatus && (this.status.visibility === 'public' || this.status.visibility === 'unlisted')
+      return (
+        this.ownStatus &&
+        (this.status.visibility === 'public' ||
+          this.status.visibility === 'unlisted')
+      )
    },
    canMute() {
      return !!this.currentUser
@ -179,7 +223,12 @@ const ExtraButtons = {
    },
    statusLink() {
      if (this.status.is_local) {
-        return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
+        return `${this.$store.state.instance.server}${
+          this.$router.resolve({
+            name: 'conversation',
+            params: { id: this.status.id }
+          }).href
+        }`
      } else {
        return this.status.external_url
      }
@ -190,7 +239,9 @@ const ExtraButtons = {
    isEdited() {
      return this.status.edited_at !== null
    },
-    editingAvailable () { return this.$store.state.instance.editingAvailable }
+    editingAvailable() {
+      return this.$store.state.instance.editingAvailable
+    }
  }
 }

--- 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"
@ -17,7 +17,7 @@
          <FAIcon
            fixed-width
            icon="eye-slash"
-          /><span>{{ $t("status.mute_conversation") }}</span>
+          /><span>{{ $t('status.mute_conversation') }}</span>
        </button>
        <button
          v-if="canMute && status.thread_muted"
@ -27,7 +27,7 @@
          <FAIcon
            fixed-width
            icon="eye-slash"
-          /><span>{{ $t("status.unmute_conversation") }}</span>
+          /><span>{{ $t('status.unmute_conversation') }}</span>
        </button>
        <button
          v-if="!status.pinned && canPin"
@ -38,7 +38,7 @@
          <FAIcon
            fixed-width
            icon="thumbtack"
-          /><span>{{ $t("status.pin") }}</span>
+          /><span>{{ $t('status.pin') }}</span>
        </button>
        <button
          v-if="status.pinned && canPin"
@ -49,7 +49,7 @@
          <FAIcon
            fixed-width
            icon="thumbtack"
-          /><span>{{ $t("status.unpin") }}</span>
+          /><span>{{ $t('status.unpin') }}</span>
        </button>
        <button
          v-if="!status.bookmarked"
@ -60,7 +60,7 @@
          <FAIcon
            fixed-width
            :icon="['far', 'bookmark']"
-          /><span>{{ $t("status.bookmark") }}</span>
+          /><span>{{ $t('status.bookmark') }}</span>
        </button>
        <button
          v-if="status.bookmarked"
@ -71,7 +71,7 @@
          <FAIcon
            fixed-width
            icon="bookmark"
-          /><span>{{ $t("status.unbookmark") }}</span>
+          /><span>{{ $t('status.unbookmark') }}</span>
        </button>
        <button
          v-if="ownStatus && editingAvailable"
@ -82,7 +82,7 @@
          <FAIcon
            fixed-width
            icon="pen"
-          /><span>{{ $t("status.edit") }}</span>
+          /><span>{{ $t('status.edit') }}</span>
        </button>
        <button
          v-if="isEdited && editingAvailable"
@ -93,7 +93,7 @@
          <FAIcon
            fixed-width
            icon="history"
-          /><span>{{ $t("status.edit_history") }}</span>
+          /><span>{{ $t('status.edit_history') }}</span>
        </button>
        <button
          v-if="ownStatus"
@ -104,7 +104,7 @@
          <FAIcon
            fixed-width
            icon="file-pen"
-          /><span>{{ $t("status.redraft") }}</span>
+          /><span>{{ $t('status.redraft') }}</span>
        </button>
        <button
          v-if="canDelete"
@ -115,7 +115,7 @@
          <FAIcon
            fixed-width
            icon="times"
-          /><span>{{ $t("status.delete") }}</span>
+          /><span>{{ $t('status.delete') }}</span>
        </button>
        <button
          class="button-default dropdown-item dropdown-item-icon"
@ -125,7 +125,7 @@
          <FAIcon
            fixed-width
            icon="share-alt"
-          /><span>{{ $t("status.copy_link") }}</span>
+          /><span>{{ $t('status.copy_link') }}</span>
        </button>
        <a
          v-if="!status.is_local"
@ -137,7 +137,7 @@
          <FAIcon
            fixed-width
            icon="external-link-alt"
-          /><span>{{ $t("status.external_source") }}</span>
+          /><span>{{ $t('status.external_source') }}</span>
        </a>
        <button
          class="button-default dropdown-item dropdown-item-icon"
@ -147,7 +147,7 @@
          <FAIcon
            fixed-width
            :icon="['far', 'flag']"
-          /><span>{{ $t("user_card.report") }}</span>
+          /><span>{{ $t('user_card.report') }}</span>
        </button>
        <button
          v-if="canTranslate"
@ -158,7 +158,7 @@
          <FAIcon
            fixed-width
            icon="globe"
-          /><span>{{ $t("status.translate") }}</span>
+          /><span>{{ $t('status.translate') }}</span>

          <template v-if="noTranslationTargetSet">
            <span class="dropdown-item-icon__badge warning">
@ -172,7 +172,7 @@
        </button>
      </div>
    </template>
-    <template v-slot:trigger>
+    <template #trigger>
      <button class="button-unstyled popover-trigger">
        <FAIcon
          class="fa-scale-110 fa-old-padding"
--- a/src/components/favorite_button/favorite_button.js
+++ b/src/components/favorite_button/favorite_button.js
@ -1,14 +1,9 @@
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faStar } from '@fortawesome/free-solid-svg-icons'
-import {
-  faStar as faStarRegular
-} from '@fortawesome/free-regular-svg-icons'
+import { faStar as faStarRegular } from '@fortawesome/free-regular-svg-icons'

-library.add(
-  faStar,
-  faStarRegular
-)
+library.add(faStar, faStarRegular)

 const FavoriteButton = {
  props: ['status', 'loggedIn'],
@ -33,7 +28,9 @@ const FavoriteButton = {
  computed: {
    ...mapGetters(['mergedConfig']),
    remoteInteractionLink() {
-      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
+      return this.$store.getters.remoteInteractionLink({
+        statusId: this.status.id
+      })
    }
  }
 }
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@ -56,6 +56,7 @@
  .interactive {
    .svg-inline--fa {
      animation-duration: 0.6s;
+      animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    &:hover .svg-inline--fa,
--- a/src/components/features_panel/features_panel.js
+++ b/src/components/features_panel/features_panel.js
@ -2,10 +2,20 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for

 const FeaturesPanel = {
  computed: {
-    whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled },
-    mediaProxy: function () { return this.$store.state.instance.mediaProxyAvailable },
-    textlimit: function () { return this.$store.state.instance.textlimit },
-    uploadlimit: function () { return fileSizeFormatService.fileSizeFormat(this.$store.state.instance.uploadlimit) }
+    whoToFollow: function () {
+      return this.$store.state.instance.suggestionsEnabled
+    },
+    mediaProxy: function () {
+      return this.$store.state.instance.mediaProxyAvailable
+    },
+    textlimit: function () {
+      return this.$store.state.instance.textlimit
+    },
+    uploadlimit: function () {
+      return fileSizeFormatService.fileSizeFormat(
+        this.$store.state.instance.uploadlimit
+      )
+    }
  }
 }

--- a/src/components/features_panel/features_panel.vue
+++ b/src/components/features_panel/features_panel.vue
@ -16,7 +16,10 @@
          </li>
          <li>{{ $t('features_panel.scope_options') }}</li>
          <li>{{ $t('features_panel.text_limit') }} = {{ textlimit }}</li>
-          <li>{{ $t('features_panel.upload_limit') }} = {{ uploadlimit.num }} {{ $t('upload.file_size_units.' + uploadlimit.unit) }}</li>
+          <li>
+            {{ $t('features_panel.upload_limit') }} = {{ uploadlimit.num }}
+            {{ $t('upload.file_size_units.' + uploadlimit.unit) }}
+          </li>
        </ul>
      </div>
    </div>
--- a/src/components/flash/flash.js
+++ b/src/components/flash/flash.js
@ -5,10 +5,7 @@ import {
  faExclamationTriangle
 } from '@fortawesome/free-solid-svg-icons'

-library.add(
-  faStop,
-  faExclamationTriangle
-)
+library.add(faStop, faExclamationTriangle)

 const Flash = {
  props: ['src'],
@ -32,9 +29,12 @@ const Flash = {
        container.appendChild(player)
        player.style.width = '100%'
        player.style.height = '100%'
-        player.load(this.src).then(() => {
+        player
+          .load(this.src)
+          .then(() => {
            this.player = true
-        }).catch((e) => {
+          })
+          .catch((e) => {
            console.error('Error loading ruffle', e)
            this.player = 'error'
          })
--- a/src/components/follow_button/follow_button.js
+++ b/src/components/follow_button/follow_button.js
@ -1,5 +1,8 @@
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
-import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
+import {
+  requestFollow,
+  requestUnfollow
+} from '../../services/follow_manipulate/follow_manipulate'
 export default {
  props: ['relationship', 'user', 'labelFollowing', 'buttonClass'],
  components: {
@ -50,7 +53,9 @@ export default {
      this.showingConfirmUnfollow = false
    },
    onClick() {
-      this.relationship.following || this.relationship.requested ? this.unfollow() : this.follow()
+      this.relationship.following || this.relationship.requested
+        ? this.unfollow()
+        : this.follow()
    },
    follow() {
      this.inProgress = true
@ -70,7 +75,10 @@ export default {
      this.inProgress = true
      requestUnfollow(this.relationship.id, store).then(() => {
        this.inProgress = false
-        store.commit('removeStatus', { timeline: 'friends', userId: this.relationship.id })
+        store.commit('removeStatus', {
+          timeline: 'friends',
+          userId: this.relationship.id
+        })
      })

      this.hideConfirmUnfollow()
--- a/src/components/follow_button/follow_button.vue
+++ b/src/components/follow_button/follow_button.vue
@ -21,9 +21,7 @@
          tag="span"
        >
          <template #user>
-            <span
-              v-text="user.screen_name_ui"
-            />
+            <span v-text="user.screen_name_ui" />
          </template>
        </i18n-t>
      </confirm-modal>
--- a/src/components/follow_card/follow_card.js
+++ b/src/components/follow_card/follow_card.js
@ -4,10 +4,7 @@ import FollowButton from '../follow_button/follow_button.vue'
 import RemoveFollowerButton from '../remove_follower_button/remove_follower_button.vue'

 const FollowCard = {
-  props: [
-    'user',
-    'noFollowsYou'
-  ],
+  props: ['user', 'noFollowsYou'],
  components: {
    BasicUserCard,
    RemoteFollow,
--- a/src/components/follow_request_card/follow_request_card.js
+++ b/src/components/follow_request_card/follow_request_card.js
@ -17,7 +17,9 @@ const FollowRequestCard = {
  methods: {
    findFollowRequestNotificationId() {
      const notif = notificationsFromStore(this.$store).find(
-        (notif) => notif.from_profile.id === this.user.id && notif.type === 'follow_request'
+        (notif) =>
+          notif.from_profile.id === this.user.id &&
+          notif.type === 'follow_request'
      )
      return notif && notif.id
    },
@ -48,7 +50,7 @@ const FollowRequestCard = {
      this.$store.dispatch('markSingleNotificationAsSeen', { id: notifId })
      this.$store.dispatch('updateNotification', {
        id: notifId,
-        updater: notification => {
+        updater: (notification) => {
          notification.type = 'follow'
        }
      })
@ -63,7 +65,8 @@ const FollowRequestCard = {
    },
    doDeny() {
      const notifId = this.findFollowRequestNotificationId()
-      this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
+      this.$store.state.api.backendInteractor
+        .denyUser({ id: this.user.id })
        .then(() => {
          this.$store.dispatch('dismissNotificationLocal', { id: notifId })
          this.$store.dispatch('removeFollowRequest', this.user)
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@ -5,9 +5,7 @@ export default {
  components: {
    Select
  },
-  props: [
-    'name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'
-  ],
+  props: ['name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'],
  emits: ['update:modelValue'],
  data() {
    return {
@ -19,7 +17,7 @@ export default {
        'serif',
        'monospace',
        'sans-serif'
-      ].filter(_ => _)
+      ].filter((_) => _)
    }
  },
  beforeUpdate() {
@ -46,10 +44,12 @@ export default {
    },
    preset: {
      get() {
-        if (this.family === 'serif' ||
+        if (
+          this.family === 'serif' ||
          this.family === 'sans-serif' ||
          this.family === 'monospace' ||
-            this.family === 'inherit') {
+          this.family === 'inherit'
+        ) {
          return this.family
        } else {
          return 'custom'
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@ -15,8 +15,13 @@
      class="opt exlcude-disabled"
      type="checkbox"
      :checked="present"
-      @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
-    >
+      @change="
+        $emit(
+          'update:modelValue',
+          typeof modelValue === 'undefined' ? fallback : undefined
+        )
+      "
+    />
    <label
      v-if="typeof fallback !== 'undefined'"
      class="opt-l"
@ -43,7 +48,7 @@
      v-model="family"
      class="custom-font"
      type="text"
-    >
+    />
  </div>
 </template>

--- a/src/components/friends_timeline/friends_timeline.js
+++ b/src/components/friends_timeline/friends_timeline.js
@ -4,7 +4,9 @@ const FriendsTimeline = {
    Timeline
  },
  computed: {
-    timeline () { return this.$store.state.statuses.timelines.friends }
+    timeline() {
+      return this.$store.state.statuses.timelines.friends
+    }
  }
 }

--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@ -29,35 +29,54 @@ const Gallery = {
      if (!this.attachments) {
        return []
      }
-      const attachments = this.limit > 0
+      const attachments =
+        this.limit > 0
          ? this.attachments.slice(0, this.limit)
          : this.attachments
      if (this.size === 'hide') {
-        return attachments.map(item => ({ minimal: true, items: [item] }))
+        return attachments.map((item) => ({ minimal: true, items: [item] }))
      }
      const rows = this.grid
        ? [{ grid: true, items: attachments }]
-        : attachments.reduce((acc, attachment, i) => {
+        : attachments
+            .reduce(
+              (acc, attachment, i) => {
                if (attachment.mimetype.includes('audio')) {
-            return [...acc, { audio: true, items: [attachment] }, { items: [] }]
+                  return [
+                    ...acc,
+                    { audio: true, items: [attachment] },
+                    { items: [] }
+                  ]
                }
-          if (!(
+                if (
+                  !(
                    attachment.mimetype.includes('image') ||
                    attachment.mimetype.includes('video') ||
                    attachment.mimetype.includes('flash')
-          )) {
-            return [...acc, { minimal: true, items: [attachment] }, { items: [] }]
+                  )
+                ) {
+                  return [
+                    ...acc,
+                    { minimal: true, items: [attachment] },
+                    { items: [] }
+                  ]
                }
                const maxPerRow = 3
                const attachmentsRemaining = this.attachments.length - i + 1
                const currentRow = acc[acc.length - 1].items
                currentRow.push(attachment)
-          if (currentRow.length >= maxPerRow && attachmentsRemaining > maxPerRow) {
+                if (
+                  currentRow.length >= maxPerRow &&
+                  attachmentsRemaining > maxPerRow
+                ) {
                  return [...acc, { items: [] }]
                } else {
                  return acc
                }
-        }, [{ items: [] }]).filter(_ => _.items.length > 0)
+              },
+              [{ items: [] }]
+            )
+            .filter((_) => _.items.length > 0)
      return rows
    },
    attachmentsDimensionalScore() {
@ -91,11 +110,11 @@ const Gallery = {
      if (row.audio) {
        return { 'padding-bottom': '25%' } // fixed reduced height for audio
      } else if (!row.minimal && !row.grid) {
-        return { 'padding-bottom': `${(100 / (row.items.length + 0.6))}%` }
+        return { 'padding-bottom': `${100 / (row.items.length + 0.6)}%` }
      }
    },
    itemStyle(id, row) {
-      const total = sumBy(row, item => this.getAspectRatio(item.id))
+      const total = sumBy(row, (item) => this.getAspectRatio(item.id))
      return { flex: `${this.getAspectRatio(id) / total} 1 0%` }
    },
    getAspectRatio(id) {
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@ -25,11 +25,20 @@
            :size="size"
            :editable="editable"
            :remove="removeAttachment"
-            :shift-up="!(attachmentIndex === 0 && rowIndex === 0) && shiftUpAttachment"
-            :shift-dn="!(attachmentIndex === row.items.length - 1 && rowIndex === rows.length - 1) && shiftDnAttachment"
+            :shift-up="
+              !(attachmentIndex === 0 && rowIndex === 0) && shiftUpAttachment
+            "
+            :shift-dn="
+              !(
+                attachmentIndex === row.items.length - 1 &&
+                rowIndex === rows.length - 1
+              ) && shiftDnAttachment
+            "
            :edit="editAttachment"
            :description="descriptions && descriptions[attachment.id]"
-            :hide-description="size === 'small' || tooManyAttachments && hidingLong"
+            :hide-description="
+              size === 'small' || (tooManyAttachments && hidingLong)
+            "
            :style="itemStyle(attachment.id, row.items)"
            @setMedia="onMedia"
            @naturalSizeLoad="onNaturalSizeLoad"
@ -42,7 +51,7 @@
      class="many-attachments"
    >
      <div class="many-attachments-text">
-        {{ $t("status.many_attachments", { number: attachments.length }) }}
+        {{ $t('status.many_attachments', { number: attachments.length }) }}
      </div>
      <div class="many-attachments-buttons">
        <span
@ -53,7 +62,7 @@
            class="button-unstyled -link"
            @click="toggleHidingLong(true)"
          >
-            {{ $t("status.collapse_attachments") }}
+            {{ $t('status.collapse_attachments') }}
          </button>
        </span>
        <span
@ -64,7 +73,7 @@
            class="button-unstyled -link"
            @click="toggleHidingLong(false)"
          >
-            {{ $t("status.show_all_attachments") }}
+            {{ $t('status.show_all_attachments') }}
          </button>
        </span>
        <span
@ -75,7 +84,7 @@
            class="button-unstyled -link"
            @click="openGallery"
          >
-            {{ $t("status.open_gallery") }}
+            {{ $t('status.open_gallery') }}
          </button>
        </span>
      </div>
@ -83,7 +92,7 @@
  </div>
 </template>

-<script src='./gallery.js'></script>
+<script src="./gallery.js"></script>

 <style lang="scss">
@import '../../_variables.scss';
@ -109,8 +118,8 @@
    .gallery-rows {
      max-height: 25em;
      overflow: hidden;
-      mask:
-        linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
+      mask: linear-gradient(to top, white, transparent) bottom/100% 70px
+          no-repeat,
        linear-gradient(to top, white, white);

      /* Autoprefixed seem to ignore this one, and also syntax is different */
--- a/src/components/global_notice_list/global_notice_list.js
+++ b/src/components/global_notice_list/global_notice_list.js
@ -1,11 +1,7 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faTimes
-} from '@fortawesome/free-solid-svg-icons'
+import { faTimes } from '@fortawesome/free-solid-svg-icons'

-library.add(
-  faTimes
-)
+library.add(faTimes)

 const GlobalNoticeList = {
  computed: {
--- a/src/components/hashtag_link/hashtag_link.vue
+++ b/src/components/hashtag_link/hashtag_link.vue
@ -1,7 +1,5 @@
 <template>
-  <span
-    class="HashtagLink"
-  >
+  <span class="HashtagLink">
    <!-- eslint-disable vue/no-v-html -->
    <a
      :href="url"
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@ -1,13 +1,9 @@
 import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.css'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faCircleNotch
-} from '@fortawesome/free-solid-svg-icons'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'

-library.add(
-  faCircleNotch
-)
+library.add(faCircleNotch)

 const ImageCropper = {
  props: {
@ -59,7 +55,10 @@ const ImageCropper = {
      return this.saveButtonLabel || this.$t('image_cropper.save')
    },
    saveWithoutCroppingText() {
-      return this.saveWithoutCroppingButtonlabel || this.$t('image_cropper.save_without_cropping')
+      return (
+        this.saveWithoutCroppingButtonlabel ||
+        this.$t('image_cropper.save_without_cropping')
+      )
    },
    cancelText() {
      return this.cancelButtonLabel || this.$t('image_cropper.cancel')
@ -89,7 +88,9 @@ const ImageCropper = {
      this.cropper = new Cropper(this.$refs.img, this.cropperOptions)
    },
    getTriggerDOM() {
-      return typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
+      return typeof this.trigger === 'object'
+        ? this.trigger
+        : document.querySelector(this.trigger)
    },
    readFile() {
      const fileInput = this.$refs.input
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@ -7,7 +7,7 @@
          :src="dataUrl"
          alt=""
          @load.stop="createCropper"
-        >
+        />
      </div>
      <div class="image-cropper-buttons-wrapper">
        <button
@ -43,7 +43,7 @@
      type="file"
      class="image-cropper-img-input"
      :accept="mimes"
-    >
+    />
  </div>
 </template>

--- a/src/components/importer/importer.js
+++ b/src/components/importer/importer.js
@ -1,13 +1,7 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faCircleNotch,
-  faTimes
-} from '@fortawesome/free-solid-svg-icons'
+import { faCircleNotch, faTimes } from '@fortawesome/free-solid-svg-icons'

-library.add(
-  faCircleNotch,
-  faTimes
-)
+library.add(faCircleNotch, faTimes)

 const Importer = {
  props: {
@ -35,9 +29,15 @@ const Importer = {
      this.dismiss()
      this.submitting = true
      this.submitHandler(this.file)
-        .then(() => { this.success = true })
-        .catch(() => { this.error = true })
-        .finally(() => { this.submitting = false })
+        .then(() => {
+          this.success = true
+        })
+        .catch(() => {
+          this.error = true
+        })
+        .finally(() => {
+          this.submitting = false
+        })
    },
    dismiss() {
      this.success = false
--- a/src/components/importer/importer.vue
+++ b/src/components/importer/importer.vue
@ -5,7 +5,7 @@
        ref="input"
        type="file"
        @change="change"
-      >
+      />
    </form>
    <FAIcon
      v-if="submitting"
@ -25,9 +25,7 @@
        class="button-unstyled"
        @click="dismiss"
      >
-        <FAIcon
-          icon="times"
-        />
+        <FAIcon icon="times" />
      </button>
      {{ ' ' }}
      <span>{{ successMessage || $t('importer.success') }}</span>
@ -37,9 +35,7 @@
        class="button-unstyled"
        @click="dismiss"
      >
-        <FAIcon
-          icon="times"
-        />
+        <FAIcon icon="times" />
      </button>
      {{ ' ' }}
      <span>{{ errorMessage || $t('importer.error') }}</span>
--- a/src/components/interactions/interactions.js
+++ b/src/components/interactions/interactions.js
@ -11,7 +11,8 @@ const tabModeDict = {
 const Interactions = {
  data() {
    return {
-      allowFollowingMove: this.$store.state.users.currentUser.allow_following_move,
+      allowFollowingMove:
+        this.$store.state.users.currentUser.allow_following_move,
      filterMode: tabModeDict['mentions']
    }
  },
--- a/src/components/interactions/interactions.vue
+++ b/src/components/interactions/interactions.vue
@ -2,7 +2,7 @@
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="title">
-        {{ $t("nav.interactions") }}
+        {{ $t('nav.interactions') }}
      </div>
    </div>
    <tab-switcher
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@ -56,7 +56,9 @@ export default {
    },

    controlledLanguage: {
-      get: function () { return this.language },
+      get: function () {
+        return this.language
+      },
      set: function (val) {
        this.setLanguage(val)
      }
--- a/src/components/link-preview/link-preview.js
+++ b/src/components/link-preview/link-preview.js
@ -2,11 +2,7 @@ import { mapGetters } from 'vuex'

 const LinkPreview = {
  name: 'LinkPreview',
-  props: [
-    'card',
-    'size',
-    'nsfw'
-  ],
+  props: ['card', 'size', 'nsfw'],
  data() {
    return {
      imageLoaded: false
@ -28,9 +24,7 @@ const LinkPreview = {
    hideNsfwConfig() {
      return this.mergedConfig.hideNsfw
    },
-    ...mapGetters([
-      'mergedConfig'
-    ])
+    ...mapGetters(['mergedConfig'])
  },
  created() {
    if (this.useImage) {
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@ -10,21 +10,24 @@
        v-if="useImage && imageLoaded"
        class="card-image"
      >
-        <img :src="card.image">
+        <img :src="card.image" />
      </div>
      <div class="card-content">
        <span class="card-host faint">
          <span
            v-if="censored"
            class="nsfw-alert alert warning"
-          >{{ $t('status.nsfw') }}</span>
+            >{{ $t('status.nsfw') }}</span
+          >
          {{ card.provider_name }}
        </span>
        <h4 class="card-title">{{ card.title }}</h4>
        <p
          v-if="useDescription"
          class="card-description"
-        >{{ card.description }}</p>
+        >
+          {{ card.description }}
+        </p>
      </div>
    </a>
  </div>
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@ -28,7 +28,7 @@ export default {
    },
    getKey: {
      type: Function,
-      default: item => item.id
+      default: (item) => item.id
    }
  }
 }
--- a/src/components/list_card/list_card.js
+++ b/src/components/list_card/list_card.js
@ -1,16 +1,10 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faEllipsisH
-} from '@fortawesome/free-solid-svg-icons'
+import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'

-library.add(
-  faEllipsisH
-)
+library.add(faEllipsisH)

 const ListCard = {
-  props: [
-    'list'
-  ]
+  props: ['list']
 }

 export default ListCard
--- a/src/components/list_edit/list_edit.js
+++ b/src/components/list_edit/list_edit.js
@ -3,15 +3,9 @@ import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 import ListUserSearch from '../list_user_search/list_user_search.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faSearch,
-  faChevronLeft
-} from '@fortawesome/free-solid-svg-icons'
+import { faSearch, faChevronLeft } from '@fortawesome/free-solid-svg-icons'

-library.add(
-  faSearch,
-  faChevronLeft
-)
+library.add(faSearch, faChevronLeft)

 const ListNew = {
  components: {
@ -27,12 +21,12 @@ const ListNew = {
    }
  },
  created() {
-    this.$store.dispatch('fetchList', { id: this.id })
-      .then(() => { this.title = this.findListTitle(this.id) })
-    this.$store.dispatch('fetchListAccounts', { id: this.id })
-      .then(() => {
+    this.$store.dispatch('fetchList', { id: this.id }).then(() => {
+      this.title = this.findListTitle(this.id)
+    })
+    this.$store.dispatch('fetchListAccounts', { id: this.id }).then(() => {
      this.selectedUserIds = this.findListAccounts(this.id)
-        this.selectedUserIds.forEach(userId => {
+      this.selectedUserIds.forEach((userId) => {
        this.$store.dispatch('fetchUserIfMissing', userId)
      })
    })
@ -42,13 +36,15 @@ const ListNew = {
      return this.$route.params.id
    },
    users() {
-      return this.userIds.map(userId => this.findUser(userId))
+      return this.userIds.map((userId) => this.findUser(userId))
    },
    selectedUsers() {
-      return this.selectedUserIds.map(userId => this.findUser(userId)).filter(user => user)
+      return this.selectedUserIds
+        .map((userId) => this.findUser(userId))
+        .filter((user) => user)
    },
    ...mapState({
-      currentUser: state => state.users.currentUser
+      currentUser: (state) => state.users.currentUser
    }),
    ...mapGetters(['findUser', 'findListTitle', 'findListAccounts'])
  },
@ -70,14 +66,17 @@ const ListNew = {
      this.selectedUserIds.push(user.id)
    },
    removeUser(userId) {
-      this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
+      this.selectedUserIds = this.selectedUserIds.filter((id) => id !== userId)
    },
    onResults(results) {
      this.userIds = results
    },
    updateList() {
      this.$store.dispatch('setList', { id: this.id, title: this.title })
-      this.$store.dispatch('setListAccounts', { id: this.id, accountIds: this.selectedUserIds })
+      this.$store.dispatch('setListAccounts', {
+        id: this.id,
+        accountIds: this.selectedUserIds
+      })

      this.$router.push({ name: 'list-timeline', params: { id: this.id } })
    },
--- a/src/components/list_edit/list_edit.vue
+++ b/src/components/list_edit/list_edit.vue
@ -19,7 +19,7 @@
        ref="title"
        v-model="title"
        :placeholder="$t('lists.title')"
-      >
+      />
    </div>
    <div class="member-list">
      <div
--- a/src/components/list_new/list_new.js
+++ b/src/components/list_new/list_new.js
@ -3,15 +3,9 @@ import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import ListUserSearch from '../list_user_search/list_user_search.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faSearch,
-  faChevronLeft
-} from '@fortawesome/free-solid-svg-icons'
+import { faSearch, faChevronLeft } from '@fortawesome/free-solid-svg-icons'

-library.add(
-  faSearch,
-  faChevronLeft
-)
+library.add(faSearch, faChevronLeft)

 const ListNew = {
  components: {
@ -28,13 +22,13 @@ const ListNew = {
  },
  computed: {
    users() {
-      return this.userIds.map(userId => this.findUser(userId))
+      return this.userIds.map((userId) => this.findUser(userId))
    },
    selectedUsers() {
-      return this.selectedUserIds.map(userId => this.findUser(userId))
+      return this.selectedUserIds.map((userId) => this.findUser(userId))
    },
    ...mapState({
-      currentUser: state => state.users.currentUser
+      currentUser: (state) => state.users.currentUser
    }),
    ...mapGetters(['findUser'])
  },
@ -59,7 +53,7 @@ const ListNew = {
      this.selectedUserIds.push(user.id)
    },
    removeUser(userId) {
-      this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
+      this.selectedUserIds = this.selectedUserIds.filter((id) => id !== userId)
    },
    onResults(results) {
      this.userIds = results
@ -67,9 +61,11 @@ const ListNew = {
    createList() {
      // the API has two different endpoints for "creating a list with a name"
      // and "updating the accounts on the list".
-      this.$store.dispatch('createList', { title: this.title })
-        .then((list) => {
-          this.$store.dispatch('setListAccounts', { id: list.id, accountIds: this.selectedUserIds })
+      this.$store.dispatch('createList', { title: this.title }).then((list) => {
+        this.$store.dispatch('setListAccounts', {
+          id: list.id,
+          accountIds: this.selectedUserIds
+        })
        this.$router.push({ name: 'list-timeline', params: { id: list.id } })
      })
    }
--- a/src/components/list_new/list_new.vue
+++ b/src/components/list_new/list_new.vue
@ -19,7 +19,7 @@
        ref="title"
        v-model="title"
        :placeholder="$t('lists.title')"
-      >
+      />
    </div>

    <div class="member-list">
@ -35,9 +35,7 @@
        />
      </div>
    </div>
-    <ListUserSearch
-      @results="onResults"
-    />
+    <ListUserSearch @results="onResults" />
    <div
      v-for="user in users"
      :key="user.id"
--- a/src/components/list_timeline/list_timeline.js
+++ b/src/components/list_timeline/list_timeline.js
@ -9,12 +9,17 @@ const ListTimeline = {
    Timeline
  },
  computed: {
-    timeline () { return this.$store.state.statuses.timelines.list }
+    timeline() {
+      return this.$store.state.statuses.timelines.list
+    }
  },
  created() {
    this.listId = this.$route.params.id
    this.$store.dispatch('fetchList', { id: this.listId })
-    this.$store.dispatch('startFetchingTimeline', { timeline: 'list', listId: this.listId })
+    this.$store.dispatch('startFetchingTimeline', {
+      timeline: 'list',
+      listId: this.listId
+    })
  },
  unmounted() {
    this.$store.dispatch('stopFetchingTimeline', 'list')
--- a/src/components/list_user_search/list_user_search.js
+++ b/src/components/list_user_search/list_user_search.js
@ -1,15 +1,9 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faSearch,
-  faChevronLeft
-} from '@fortawesome/free-solid-svg-icons'
+import { faSearch, faChevronLeft } from '@fortawesome/free-solid-svg-icons'
 import { debounce } from 'lodash'
 import Checkbox from '../checkbox/checkbox.vue'

-library.add(
-  faSearch,
-  faChevronLeft
-)
+library.add(faSearch, faChevronLeft)

 const ListUserSearch = {
  components: {
@ -34,10 +28,19 @@ const ListUserSearch = {

      this.loading = true
      this.userIds = []
-      this.$store.dispatch('search', { q: query, resolve: true, type: 'accounts', following: this.followingOnly })
-        .then(data => {
+      this.$store
+        .dispatch('search', {
+          q: query,
+          resolve: true,
+          type: 'accounts',
+          following: this.followingOnly
+        })
+        .then((data) => {
          this.loading = false
-          this.$emit('results', data.accounts.map(a => a.id))
+          this.$emit(
+            'results',
+            data.accounts.map((a) => a.id)
+          )
        })
    }
  }
--- a/src/components/list_user_search/list_user_search.vue
+++ b/src/components/list_user_search/list_user_search.vue
@ -12,7 +12,7 @@
        v-model="query"
        :placeholder="$t('lists.search')"
        @input="onInput"
-      >
+      />
    </div>
    <div class="input-wrap">
      <Checkbox
@ -41,5 +41,4 @@
 .search-icon {
  margin-right: 0.3em;
 }
-
 </style>
--- a/src/components/lists/lists.vue
+++ b/src/components/lists/lists.vue
@ -14,7 +14,7 @@
        class="button-default"
        @click="newList"
      >
-        {{ $t("lists.new") }}
+        {{ $t('lists.new') }}
      </button>
    </div>
    <div class="panel-body">
--- a/src/components/local_bubble_panel/local_bubble_panel.js
+++ b/src/components/local_bubble_panel/local_bubble_panel.js
@ -4,7 +4,7 @@ import { get } from 'lodash'
 const LocalBubblePanel = {
  computed: {
    ...mapState({
-      bubbleInstances: state => get(state, 'instance.localBubbleInstances')
+      bubbleInstances: (state) => get(state, 'instance.localBubbleInstances')
    })
  }
 }
--- a/src/components/local_bubble_panel/local_bubble_panel.vue
+++ b/src/components/local_bubble_panel/local_bubble_panel.vue
@ -6,11 +6,11 @@
    <div class="panel panel-default base01-background">
      <div class="panel-heading timeline-heading base02-background">
        <div class="title">
-          {{ $t("about.bubble_instances") }}
+          {{ $t('about.bubble_instances') }}
        </div>
      </div>
      <div class="panel-body">
-        <p>{{ $t("about.bubble_instances_description")}}:</p>
+        <p>{{ $t('about.bubble_instances_description') }}:</p>
        <ul>
          <li
            v-for="instance in bubbleInstances"
--- a/src/components/login_form/login_form.js
+++ b/src/components/login_form/login_form.js
@ -1,13 +1,9 @@
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
 import oauthApi from '../../services/new_api/oauth.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faTimes
-} from '@fortawesome/free-solid-svg-icons'
+import { faTimes } from '@fortawesome/free-solid-svg-icons'

-library.add(
-  faTimes
-)
+library.add(faTimes)

 const LoginForm = {
  data: () => ({
@ -15,17 +11,23 @@ const LoginForm = {
    error: false
  }),
  computed: {
-    isPasswordAuth () { return this.requiredPassword },
-    isTokenAuth () { return this.requiredToken },
+    isPasswordAuth() {
+      return this.requiredPassword
+    },
+    isTokenAuth() {
+      return this.requiredToken
+    },
    ...mapState({
-      registrationOpen: state => state.instance.registrationOpen,
-      instance: state => state.instance,
-      loggingIn: state => state.users.loggingIn,
-      oauth: state => state.oauth
+      registrationOpen: (state) => state.instance.registrationOpen,
+      instance: (state) => state.instance,
+      loggingIn: (state) => state.users.loggingIn,
+      oauth: (state) => state.oauth
    }),
-    ...mapGetters(
-      'authFlow', ['requiredPassword', 'requiredToken', 'requiredMFA']
-    )
+    ...mapGetters('authFlow', [
+      'requiredPassword',
+      'requiredToken',
+      'requiredMFA'
+    ])
  },
  methods: {
    ...mapMutations('authFlow', ['requireMFA']),
@ -42,8 +44,9 @@ const LoginForm = {
        commit: this.$store.commit
      }

-      oauthApi.getOrCreateApp(data)
-        .then((app) => { oauthApi.login({ ...app, ...data }) })
+      oauthApi.getOrCreateApp(data).then((app) => {
+        oauthApi.login({ ...app, ...data })
+      })
    },
    submitPassword() {
      const { clientId } = this.oauth
@ -56,19 +59,22 @@ const LoginForm = {
      this.error = false

      oauthApi.getOrCreateApp(data).then((app) => {
-        oauthApi.getTokenWithCredentials(
-          {
+        oauthApi
+          .getTokenWithCredentials({
            ...app,
            instance: data.instance,
            username: this.user.username,
            password: this.user.password
-          }
-        ).then((result) => {
+          })
+          .then((result) => {
            if (result.error) {
              if (result.error === 'mfa_required') {
                this.requireMFA({ settings: result })
              } else if (result.identifier === 'password_reset_required') {
-              this.$router.push({ name: 'password-reset', params: { passwordResetRequested: true } })
+                this.$router.push({
+                  name: 'password-reset',
+                  params: { passwordResetRequested: true }
+                })
              } else {
                this.error = result.error
                this.focusOnPasswordInput()
@ -81,7 +87,9 @@ const LoginForm = {
          })
      })
    },
-    clearError () { this.error = false },
+    clearError() {
+      this.error = false
+    },
    focusOnPasswordInput() {
      let passwordInput = this.$refs.passwordInput
      passwordInput.focus()
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@ -20,7 +20,7 @@
              :disabled="loggingIn"
              class="form-control"
              :placeholder="$t('login.placeholder')"
-            >
+            />
          </div>
          <div class="form-group">
            <label for="password">{{ $t('login.password') }}</label>
@ -31,7 +31,7 @@
              :disabled="loggingIn"
              class="form-control"
              type="password"
-            >
+            />
          </div>
          <div class="form-group">
            <router-link :to="{ name: 'password-reset' }">
@ -110,7 +110,7 @@
  }

  .login-bottom {
-    margin-top: 1.0em;
+    margin-top: 1em;
    display: flex;
    flex-direction: row;
    align-items: center;
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@ -14,12 +14,7 @@ import {
  faTimes
 } from '@fortawesome/free-solid-svg-icons'

-library.add(
-  faChevronLeft,
-  faChevronRight,
-  faCircleNotch,
-  faTimes
-)
+library.add(faChevronLeft, faChevronRight, faCircleNotch, faTimes)

 const MediaModal = {
  components: {
@ -88,7 +83,10 @@ const MediaModal = {
    },
    goPrev() {
      if (this.canNavigate) {
-        const prevIndex = this.currentIndex === 0 ? this.media.length - 1 : (this.currentIndex - 1)
+        const prevIndex =
+          this.currentIndex === 0
+            ? this.media.length - 1
+            : this.currentIndex - 1
        const newMedia = this.media[prevIndex]
        if (this.getType(newMedia) === 'image') {
          this.loading = true
@ -98,7 +96,10 @@ const MediaModal = {
    },
    goNext() {
      if (this.canNavigate) {
-        const nextIndex = this.currentIndex === this.media.length - 1 ? 0 : (this.currentIndex + 1)
+        const nextIndex =
+          this.currentIndex === this.media.length - 1
+            ? 0
+            : this.currentIndex + 1
        const newMedia = this.media[nextIndex]
        if (this.getType(newMedia) === 'image') {
          this.loading = true
@ -121,7 +122,8 @@ const MediaModal = {
      }
    },
    handleKeyupEvent(e) {
-      if (this.showing && e.keyCode === 27) { // escape
+      if (this.showing && e.keyCode === 27) {
+        // escape
        this.hide()
      }
    },
@ -130,9 +132,11 @@ const MediaModal = {
        return
      }

-      if (e.keyCode === 39) { // arrow right
+      if (e.keyCode === 39) {
+        // arrow right
        this.goNext()
-      } else if (e.keyCode === 37) { // arrow left
+      } else if (e.keyCode === 37) {
+        // arrow left
        this.goPrev()
      }
    }
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@ -31,7 +31,7 @@
          :alt="currentMedia.description"
          :title="currentMedia.description"
          @load="onImageLoaded"
-        >
+        />
      </PinchZoom>
    </SwipeClick>
    <VideoAttachment
@ -94,10 +94,13 @@
    >
      {{ description }}
    </span>
-    <span
-      class="counter"
-    >
-      {{ $tc('media_modal.counter', currentIndex + 1, { current: currentIndex + 1, total: media.length }) }}
+    <span class="counter">
+      {{
+        $tc('media_modal.counter', currentIndex + 1, {
+          current: currentIndex + 1,
+          total: media.length
+        })
+      }}
    </span>
    <span
      v-if="loading"
@ -116,7 +119,9 @@

 <style lang="scss">
 $modal-view-button-icon-height: 3em;
-$modal-view-button-icon-half-height: calc(#{$modal-view-button-icon-height} / 2);
+$modal-view-button-icon-half-height: calc(
+  #{$modal-view-button-icon-height} / 2
+);
 $modal-view-button-icon-width: 3em;
 $modal-view-button-icon-margin: 0.5em;

@ -227,7 +232,7 @@ $modal-view-button-icon-margin: 0.5em;
    appearance: none;
    overflow: visible;
    cursor: pointer;
-    transition: opacity 333ms cubic-bezier(.4,0,.22,1);
+    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
    height: $modal-view-button-icon-height;
    width: $modal-view-button-icon-width;

@ -237,9 +242,9 @@ $modal-view-button-icon-margin: 0.5em;
      width: $modal-view-button-icon-width;
      font-size: 1rem;
      line-height: $modal-view-button-icon-height;
-      color: #FFF;
+      color: #fff;
      text-align: center;
-      background-color: rgba(0,0,0,.3);
+      background-color: rgba(0, 0, 0, 0.3);
    }
  }

@ -255,9 +260,9 @@ $modal-view-button-icon-margin: 0.5em;
      position: absolute;
      top: 0;
      line-height: $modal-view-button-icon-height;
-      color: #FFF;
+      color: #fff;
      text-align: center;
-      background-color: rgba(0,0,0,.3);
+      background-color: rgba(0, 0, 0, 0.3);
    }

    &--prev {
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@ -5,10 +5,7 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faUpload, faCircleNotch } from '@fortawesome/free-solid-svg-icons'

-library.add(
-  faUpload,
-  faCircleNotch
-)
+library.add(faUpload, faCircleNotch)

 const mediaUpload = {
  data() {
@ -28,8 +25,15 @@ const mediaUpload = {
      const store = this.$store
      if (file.size > store.state.instance.uploadlimit) {
        const filesize = fileSizeFormatService.fileSizeFormat(file.size)
-        const allowedsize = fileSizeFormatService.fileSizeFormat(store.state.instance.uploadlimit)
-        self.$emit('upload-failed', 'file_too_big', { filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit })
+        const allowedsize = fileSizeFormatService.fileSizeFormat(
+          store.state.instance.uploadlimit
+        )
+        self.$emit('upload-failed', 'file_too_big', {
+          filesize: filesize.num,
+          filesizeunit: filesize.unit,
+          allowedsize: allowedsize.num,
+          allowedsizeunit: allowedsize.unit
+        })
        return
      }
      const formData = new FormData()
@ -38,14 +42,17 @@ const mediaUpload = {
      self.$emit('uploading')
      self.uploadCount++

-      statusPosterService.uploadMedia({ store, formData })
-        .then((fileData) => {
+      statusPosterService.uploadMedia({ store, formData }).then(
+        (fileData) => {
          self.$emit('uploaded', fileData)
          self.decreaseUploadCount()
-        }, (error) => { // eslint-disable-line handle-callback-err
+        },
+        (error) => {
+          // eslint-disable-line handle-callback-err
          self.$emit('upload-failed', 'default')
          self.decreaseUploadCount()
-        })
+        }
+      )
    },
    decreaseUploadCount() {
      this.uploadCount--
@ -68,12 +75,9 @@ const mediaUpload = {
      this.multiUpload(target.files)
    }
  },
-  props: [
-    'dropFiles',
-    'disabled'
-  ],
+  props: ['dropFiles', 'disabled'],
  watch: {
-    'dropFiles': function (fileInfos) {
+    dropFiles: function (fileInfos) {
      if (!this.uploading) {
        this.multiUpload(fileInfos)
      }
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@ -22,7 +22,7 @@
      type="file"
      multiple="true"
      @change="change"
-    >
+    />
  </label>
 </template>

--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@ -1,15 +1,14 @@
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters, mapState } from 'vuex'
-import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
+import {
+  highlightClass,
+  highlightStyle
+} from '../../services/user_highlighter/user_highlighter.js'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faAt
-} from '@fortawesome/free-solid-svg-icons'
+import { faAt } from '@fortawesome/free-solid-svg-icons'

-library.add(
-  faAt
-)
+library.add(faAt)

 const MentionLink = {
  name: 'MentionLink',
@ -45,7 +44,9 @@ const MentionLink = {
  },
  computed: {
    user() {
-      return this.url && this.$store && this.$store.getters.findUserByUrl(this.url)
+      return (
+        this.url && this.$store && this.$store.getters.findUserByUrl(this.url)
+      )
    },
    isYou() {
      // FIXME why user !== currentUser???
@ -56,7 +57,11 @@ const MentionLink = {
    },
    serverName() {
      // XXX assumed that domain does not contain @
-      return this.user && (this.userNameFullUi.split('@')[1] || this.$store.getters.instanceDomain)
+      return (
+        this.user &&
+        (this.userNameFullUi.split('@')[1] ||
+          this.$store.getters.instanceDomain)
+      )
    },
    userNameFull() {
      return this.user && this.user.screen_name
@ -68,7 +73,7 @@ const MentionLink = {
      return this.user && this.mergedConfig.highlight[this.user.screen_name]
    },
    highlightType() {
-      return this.highlight && ('-' + this.highlight.type)
+      return this.highlight && '-' + this.highlight.type
    },
    highlightClass() {
      if (this.highlight) return highlightClass(this.user)
@ -105,12 +110,17 @@ const MentionLink = {
        return false
      } else if (conf === 'full') {
        return true
-      } else { // full_for_remote
+      } else {
+        // full_for_remote
        return this.isRemote
      }
    },
    shouldShowTooltip() {
-      return this.mergedConfig.mentionLinkShowTooltip && this.mergedConfig.mentionLinkDisplay === 'short' && this.isRemote
+      return (
+        this.mergedConfig.mentionLinkShowTooltip &&
+        this.mergedConfig.mentionLinkDisplay === 'short' &&
+        this.isRemote
+      )
    },
    shouldShowAvatar() {
      return this.mergedConfig.mentionLinkShowAvatar
@ -126,7 +136,7 @@ const MentionLink = {
    },
    ...mapGetters(['mergedConfig']),
    ...mapState({
-      currentUser: state => state.users.currentUser
+      currentUser: (state) => state.users.currentUser
    })
  }
 }
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@ -1,7 +1,5 @@
 <template>
-  <span
-    class="MentionLink"
-  >
+  <span class="MentionLink">
    <!-- eslint-disable vue/no-v-html -->
    <a
      v-if="!user"
@ -27,7 +25,8 @@
          class="mention-avatar"
          :user="user"
        />
-        <span class="shortName">@<span
+        <span class="shortName"
+          >@<span
            class="userName"
            v-html="userName"
          /><span
@ -40,16 +39,16 @@
        <span
          v-if="isYou && shouldShowYous"
          :class="{ '-you': shouldBoldenYou }"
-        > {{ ' ' + $t('status.you') }}</span>
-        <!-- eslint-enable vue/no-v-html -->
-      </a><span
+        >
+          {{ ' ' + $t('status.you') }}</span
+        >
+        <!-- eslint-enable vue/no-v-html --> </a
+      ><span
        v-if="shouldShowTooltip"
        class="full popover-default"
        :class="[highlightType]"
      >
-        <span
-          class="userNameFull"
-        >
+        <span class="userNameFull">
          <!-- eslint-disable vue/no-v-html -->
          @<span
            class="userName"
--- a/src/components/mentions_line/mentions_line.vue
+++ b/src/components/mentions_line/mentions_line.vue
@ -20,14 +20,14 @@
          class="mention-link"
          :content="mention.content"
          :url="mention.url"
-        />
-      </span><button
+        /> </span
+      ><button
        v-if="!expanded"
        class="button-unstyled showMoreLess"
        @click="toggleShowMore"
      >
-        {{ $t('status.plus_more', { number: extraMentions.length }) }}
-      </button><button
+        {{ $t('status.plus_more', { number: extraMentions.length }) }}</button
+      ><button
        v-if="expanded"
        class="button-unstyled showMoreLess"
        @click="toggleShowMore"
--- a/src/components/mfa_form/recovery_form.js
+++ b/src/components/mfa_form/recovery_form.js
@ -1,13 +1,9 @@
 import mfaApi from '../../services/new_api/mfa.js'
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faTimes
-} from '@fortawesome/free-solid-svg-icons'
+import { faTimes } from '@fortawesome/free-solid-svg-icons'

-library.add(
-  faTimes
-)
+library.add(faTimes)

 export default {
  data: () => ({
@ -26,7 +22,9 @@ export default {
  methods: {
    ...mapMutations('authFlow', ['requireTOTP', 'abortMFA']),
    ...mapActions({ login: 'authFlow/login' }),
-    clearError () { this.error = false },
+    clearError() {
+      this.error = false
+    },
    submit() {
      const { clientId, clientSecret } = this.oauth

--- a/Show more
+++ b/Show more
Author	SHA1	Message	Date
emma	83c6f7f9f9	use system mono in mfa backup code view	2022-12-08 19:25:12 +00:00
emma	65adfb01c3	add some nicer easings to favourite and rt button animations	2022-12-08 19:24:59 +00:00
emma	65511042e3	make left side of conversations clickable, à la birdsite	2022-12-08 19:24:22 +00:00
emma	235f3b2d94	allow popovers to escape the bounds of content	2022-12-08 19:23:46 +00:00
emma	2382696698	remove gradient mask on user card	2022-12-08 19:23:05 +00:00
emma	ae2d72131b	add consistent shadows to popover elements	2022-12-08 19:22:32 +00:00
emma	98d38e3b73	make emoji reaction buttons smaller	2022-12-08 19:21:35 +00:00
emma	47c05363f8	make tab switcher on profile look less messy with large border radii	2022-12-08 19:20:51 +00:00
emma	87d9c1ae15	fix various spacing issues	2022-12-08 19:20:09 +00:00
emma	5ad0da1766	update text color on nav to be less glaring	2022-12-08 19:18:13 +00:00
emma	97e9b2597a	enable translucency on top bar & titles	2022-12-08 19:16:40 +00:00
emma	94bbf8f0a3	update unread notification overlay look	2022-12-08 19:12:58 +00:00
emma	ce9d316a51	use system fonts by default	2022-12-08 19:11:38 +00:00
emma	6ce12fc153	update eslint & postcss	2022-12-08 19:08:18 +00:00
emma	6a2cdcfc15	remove custom scrollbars	2022-12-08 16:49:31 +00:00
emma	d7688fafd3	format everything	2022-12-08 16:48:17 +00:00
emma	3d3425eda9	add prettier for formatting	2022-12-08 16:31:17 +00:00