use system mono in mfa backup code view

.eslintrc.js

@@ -5,14 +5,9 @@ module.exports = {
     sourceType: 'module'
   },
   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
-  extends: [
+  extends: ['plugin:vue/recommended', 'plugin:prettier/recommended'],
-    'plugin:vue/recommended'
-  ],
   // required to lint *.vue files
-  plugins: [
+  plugins: ['vue', 'import'],
-    'vue',
-    'import'
-  ],
   // add your custom rules here
   rules: {
     // allow paren-less arrow functions

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "none",
+  "singleQuote": true,
+  "semi": false,
+  "singleAttributePerLine": true
+}

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",

postcss.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  plugins: [
+  plugins: [require('autoprefixer')]
-    require('autoprefixer')
-  ]
 }

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 },
+    currentUser() {
-    userBackground () { return this.currentUser.background_image },
+      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 },
+    noSticky() {
-    showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars },
+      return this.$store.getters.mergedConfig.disableStickyHeaders
+    },
+    showScrollbars() {
+      return this.$store.getters.mergedConfig.showScrollbars
+    },
     ...mapGetters(['mergedConfig'])
   },
   methods: {

src/App.scss

@@ -12,8 +12,8 @@ html {
 }
 
 body {
-  font-family: sans-serif;
+  font-family: $system-sans-serif;
-  font-family: var(--interfaceFont, 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-inner-spin-button,
-  &[type=number]::-webkit-outer-spin-button {
+  &[type='number']::-webkit-outer-spin-button {
     opacity: 0;
     display: none;
   }

src/App.vue

@@ -43,7 +43,7 @@
             :to="{ name: 'login' }"
             class="panel-body"
           >
-            {{ $t("login.hint") }}
+            {{ $t('login.hint') }}
           </router-link>
         </div>
         <router-view />

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--alertError: rgba(211, 16, 20, 0.5);
-$fallback--alertWarning: rgba(111,111,20,.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;

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', {
-      store.dispatch('setInstanceOption', { name: 'accountApprovalRequired', value: data.approval_required })
+        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'
+    value: typeof config.logoMask === 'undefined' ? true : config.logoMask
-      ? true
-      : config.logoMask
   })
 
   store.dispatch('setInstanceOption', {
     name: 'logoMargin',
-    value: typeof config.logoMargin === 'undefined'
+    value: typeof config.logoMargin === 'undefined' ? 0 : config.logoMargin
-      ? 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())
+  const nicknames = accounts.map((uri) => uri.split('/').pop())
-  store.dispatch('setInstanceOption', { name: 'staffAccounts', value: nicknames })
+  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', {
-      store.dispatch('setInstanceOption', { name: 'registrationOpen', value: data.openRegistrations })
+        name: 'name',
-      store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
+        value: metadata.nodeName
-      store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') })
+      })
-      store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
+      store.dispatch('setInstanceOption', {
-      store.dispatch('setInstanceOption', { name: 'editingAvailable', value: features.includes('editing') })
+        name: 'registrationOpen',
-      store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })
+        value: data.openRegistrations
-      store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled })
+      })
-      store.dispatch('setInstanceOption', { name: 'translationEnabled', value: features.includes('akkoma:machine_translation') })
+      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', {
-      store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadLimits.avatar) })
+        name: 'uploadlimit',
-      store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadLimits.background) })
+        value: parseInt(uploadLimits.general)
-      store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadLimits.banner) })
+      })
-      store.dispatch('setInstanceOption', { name: 'fieldsLimits', value: metadata.fieldsLimits })
+      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', {
-      store.dispatch('setInstanceOption', { name: 'postFormats', value: metadata.postFormats })
+        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', {
-      store.dispatch('setInstanceOption', { name: 'suggestionsWeb', value: suggestions.web })
+        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', {
-      store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: software.name === 'pleroma' })
+        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', {
-      store.dispatch('setInstanceOption', { name: 'localBubbleInstances', value: metadata.localBubbleInstances })
+        name: 'federationPolicy',
+        value: federation
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'localBubbleInstances',
+        value: metadata.localBubbleInstances
+      })
       store.dispatch('setInstanceOption', {
         name: 'federating',
-        value: typeof federation.enabled === 'undefined'
+        value:
-          ? true
+          typeof federation.enabled === 'undefined' ? true : federation.enabled
-          : 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 {}
       }
 

src/boot/routes.js

@@ -35,51 +35,145 @@ export default (store) => {
   }
 
   let routes = [
-    { name: 'root',
+    {
+      name: 'root',
       path: '/',
-      redirect: _to => {
+      redirect: (_to) => {
-        return (store.state.users.currentUser
+        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: 'public-external-timeline',
-    { name: 'bubble-timeline', path: '/main/bubble', component: BubbleTimeline },
+      path: '/main/all',
-    { name: 'friends', path: '/main/friends', component: FriendsTimeline, beforeEnter: validateAuthenticatedRoute },
+      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: 'external-user-profile',
-    { name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute },
+      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: 'registration-request-sent',
-    { name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
+      path: '/registration-request-sent',
-    { name: 'registration-token', path: '/registration/:token', component: Registration },
+      component: RegistrationRequestSent
-    { name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
+    },
-    { name: 'notifications', path: '/:username/notifications', component: Notifications, props: () => ({ disableTeleport: true }), beforeEnter: validateAuthenticatedRoute },
+    {
+      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: 'oauth-callback',
-    { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
+      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

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

src/components/about/about.vue

@@ -11,5 +11,4 @@
 
 <script src="./about.js"></script>
 
-<style lang="scss">
+<style lang="scss"></style>
-</style>

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 {
+import { faEllipsisV } from '@fortawesome/free-solid-svg-icons'
-  faEllipsisV
-} from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+library.add(faEllipsisV)
-  faEllipsisV
-)
 
 const AccountActions = {
-  props: [
+  props: ['user', 'relationship'],
-    '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
     })
   }
 }

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>
+          <template #user>
-            <span
+            <span v-text="user.screen_name_ui" />
-              v-text="user.screen_name_ui"
-            />
           </template>
         </i18n-t>
       </confirm-modal>

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
         })
     },

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);
   }
 

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>

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(() => {

src/components/announcements_page/announcements_page.vue

@@ -6,9 +6,7 @@
       </div>
     </div>
     <div class="panel-body">
-      <section
+      <section v-if="currentUser && currentUser.role === 'admin'">
-        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);
     }
 

src/components/async_component_error/async_component_error.vue

@@ -35,8 +35,8 @@ export default {
   align-items: center;
   justify-content: center;
   .btn {
-    margin: .5em;
+    margin: 0.5em;
-    padding: .5em 2em;
+    padding: 0.5em 2em;
   }
 }
 </style>

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)

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 }"
     >

src/components/auth_form/auth_form.js

@@ -11,8 +11,12 @@ const AuthForm = {
   },
   computed: {
     authForm() {
-      if (this.requiredTOTP) { return 'MFATOTPForm' }
+      if (this.requiredTOTP) {
-      if (this.requiredRecovery) { return 'MFARecoveryForm' }
+        return 'MFATOTPForm'
+      }
+      if (this.requiredRecovery) {
+        return 'MFARecoveryForm'
+      }
       return 'LoginForm'
     },
     ...mapGetters('authFlow', ['requiredTOTP', 'requiredRecovery'])

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)
     },

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"

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
+      )
     }
   }
 }

src/components/awaiting_email_confirmation/awaiting_email_confirmation.js

@@ -1,4 +1,3 @@
 export default {
-  computed: {
+  computed: {}
-  }
 }

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: [
+  props: ['user'],
-    '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
+      )
     }
   }
 }

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

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' }
+        )
       }
     }
   }

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: [
+  emits: ['update:modelValue']
-    'modelValue',
-    'indeterminate',
-    'disabled'
-  ]
 }
 </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>

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 {

src/components/confirm_modal/confirm_modal.js

@@ -22,8 +22,7 @@ const ConfirmModal = {
       type: String
     }
   },
-  computed: {
+  computed: {},
-  },
   methods: {
     onCancel() {
       this.$emit('cancelled')

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>

src/components/contrast_ratio/contrast_ratio.vue

@@ -43,11 +43,7 @@ import {
   faThumbsUp
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+library.add(faAdjust, faExclamationTriangle, faThumbsUp)
-  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
+      })
     }
   }
 }

src/components/conversation/conversation.js

@@ -11,11 +11,7 @@ import {
   faChevronLeft
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+library.add(faAngleDoubleDown, faAngleDoubleLeft, faChevronLeft)
-  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)
+        return Object.entries(this.statusContentProperties).every(
-          .every(([k, prop]) => !prop.replying && prop.mediaPlaying.length === 0)
+          ([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 conversation = clone(
-      const statusIndex = findIndex(conversation, { id: this.originalStatusId })
+        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)
+          a.forest[id] = this.getReplies(id).map((s) => s.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) =>
+      const topLevel = this.conversation.reduce(
-        tl.filter(k => this.getReplies(cur.id).map(v => v.id).indexOf(k.id) === -1), this.conversation)
+        (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(
+      this.$store.dispatch('setVirtualHeight', {
-        'setVirtualHeight',
+        statusId: this.statusId,
-        { statusId: this.statusId, height: `${this.$el.clientHeight}px` }
+        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() {

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
+              <FAIcon icon="angle-double-left" />
-                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="
-              :controlled-showing-tall="statusContentProperties[status.id].showingTall"
+                statusContentProperties[status.id].showingTall
-              :controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
+              "
-              :controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
+              :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-media-playing="
-              :controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')"
+                statusContentProperties[status.id].mediaPlaying
-              :controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')"
+              "
-              :controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')"
+              :controlled-toggle-showing-tall="
-              :controlled-toggle-replying="() => toggleStatusContentProperty(status.id, 'replying')"
+                () => toggleStatusContentProperty(status.id, 'showingTall')
-              :controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"
+              "
-
+              :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
+              <div class="thread-ancestor-dive-box-inner">
-                class="thread-ancestor-dive-box-inner"
-              >
                 <i18n-t
                   tag="button"
                   scope="global"
@@ -108,13 +134,17 @@
                   @click.prevent="diveIntoStatus(status.id)"
                 >
                   <template #icon>
-                    <FAIcon
+                    <FAIcon icon="angle-double-right" />
-                      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);
   }
 

src/components/desktop_nav/desktop_nav.js

@@ -46,42 +46,56 @@ export default {
   },
   data: () => ({
     searchBarHidden: true,
-    supportsMask: window.CSS && window.CSS.supports && (
+    supportsMask:
-      window.CSS.supports('mask-size', 'contain') ||
+      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({
+      return Object.assign(
-        'margin': `${this.$store.state.instance.logoMargin} 0`,
+        {
+          margin: `${this.$store.state.instance.logoMargin} 0`,
           opacity: this.searchBarHidden ? 1 : 0
-      }, this.enableMask ? {} : {
-        'background-color': this.enableMask ? '' : 'transparent'
-      })
         },
-    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 },
+    hideSitename() {
-    logoLeft () { return this.$store.state.instance.logoLeft },
+      return this.$store.state.instance.hideSitename
-    currentUser () { return this.$store.state.users.currentUser },
+    },
-    privateMode () { return this.$store.state.instance.private },
+    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
     },

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"
         >

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>

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>

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
         })

src/components/edit_status_modal/edit_status_modal.vue

@@ -11,10 +11,10 @@
       <PostStatusForm
         class="panel-body"
         v-bind="params"
-        @posted="closeModal"
+        :disable-polls="true"
-        :disablePolls="true"
+        :disable-visibility-selector="true"
-        :disableVisibilitySelector="true"
         :post-handler="doEditStatus"
+        @posted="closeModal"
       />
     </div>
   </Modal>

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 {
+import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
-  faSmileBeam
-} from '@fortawesome/free-regular-svg-icons'
 
-library.add(
+library.add(faSmileBeam)
-  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)
+      this.suggestions = take(matchedSuggestions, 5).map(
-        .map(({ imageUrl, ...rest }) => ({
+        ({ 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 spaceBefore =
-      const spaceAfter = (surroundingSpace && !isSpaceRegex.exec(after[0]) && this.padEmoji) ? ' ' : ''
+        surroundingSpace &&
+        !isSpaceRegex.exec(before.slice(-1)) &&
+        before.length &&
+        this.padEmoji > 0
+          ? ' '
+          : ''
+      const spaceAfter =
+        surroundingSpace && !isSpaceRegex.exec(after[0]) && this.padEmoji
+          ? ' '
+          : ''
 
-      const newValue = [
+      const newValue = [before, spaceBefore, insertion, spaceAfter, after].join(
-        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
+      const currentScroll =
-        ? scrollerRef.scrollY
+        scrollerRef === window ? scrollerRef.scrollY : scrollerRef.scrollTop
-        : scrollerRef.scrollTop
+      const scrollerHeight =
-      const scrollerHeight = scrollerRef === window
+        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 {

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;
   }
 }

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']
+const MFM_TAGS = [
-  .map(tag => ({ displayText: tag, detailText: '$[' + tag + ' ]', replacement: '$[' + tag + ' ]', mfm: true }))
+  '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
+      return MFM_TAGS.filter(
-        .filter(({ replacement }) => replacement.toLowerCase().indexOf(input) !== -1)
+        ({ 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(
+    const newSuggestions = state.users.users
-      user =>
+      .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 || []

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(
+library.add(faBoxOpen, faStickyNote, faSmileBeam)
-  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 list.filter((emoji) => {
-        return (regex.test(emoji.displayText) || (!emoji.imageUrl && emoji.replacement === this.keyword))
+        return (
+          regex.test(emoji.displayText) ||
+          (!emoji.imageUrl && emoji.replacement === this.keyword)
+        )
       })
     }
   },
@@ -164,9 +169,7 @@ const EmojiPicker = {
       return 0
     },
     filteredEmoji() {
-      return this.filterByKeyword(
+      return this.filterByKeyword(this.$store.state.instance.customEmoji || [])
-        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
+      )
     }
   }
 }

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>

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)
       }

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);
+  background: none;
-  margin-left: -1px; // offset the border, can't use inset shadows either
+  padding: 1px 0.5em;
-  margin-right: calc(0.5em - 1px);
-}
 
+  .emoji-button-inner {
+    display: flex;
+    align-items: center;
+  }
+}
 </style>

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(
+library.add(faCircleNotch)
-  faCircleNotch
-)
 
 const Exporter = {
   props: {
@@ -26,17 +24,21 @@ const Exporter = {
   methods: {
     process() {
       this.processing = true
-      this.getContent()
+      this.getContent().then((content) => {
-        .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)
       })
     }
   }

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
+      const translateTo =
-      this.$store.dispatch('translateStatus', { id: this.status.id, language: 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 })
+      this.$store
-        .then(data => this.$store.dispatch('openEditStatusModal', {
+        .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']
+      const stripFieldsList = [
-      stripFieldsList.forEach(p => delete originalStatus[p])
+        '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 })
+      this.$store
-        .then(data => this.$store.dispatch('openPostStatusModal', {
+        .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 }
+      if (!this.currentUser) {
-      const superuser = this.currentUser.rights.moderator || this.currentUser.rights.admin
+        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
+    }
   }
 }
 

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"

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 {
+import { faStar as faStarRegular } from '@fortawesome/free-regular-svg-icons'
-  faStar as faStarRegular
-} from '@fortawesome/free-regular-svg-icons'
 
-library.add(
+library.add(faStar, faStarRegular)
-  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
+      })
     }
   }
 }

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,

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 },
+    whoToFollow: function () {
-    mediaProxy: function () { return this.$store.state.instance.mediaProxyAvailable },
+      return this.$store.state.instance.suggestionsEnabled
-    textlimit: function () { return this.$store.state.instance.textlimit },
+    },
-    uploadlimit: function () { return fileSizeFormatService.fileSizeFormat(this.$store.state.instance.uploadlimit) }
+    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
+      )
+    }
   }
 }
 

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>

src/components/flash/flash.js

@@ -5,10 +5,7 @@ import {
   faExclamationTriangle
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+library.add(faStop, faExclamationTriangle)
-  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'
           })

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()

src/components/follow_button/follow_button.vue

@@ -21,9 +21,7 @@
           tag="span"
         >
           <template #user>
-            <span
+            <span v-text="user.screen_name_ui" />
-              v-text="user.screen_name_ui"
-            />
           </template>
         </i18n-t>
       </confirm-modal>

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: [
+  props: ['user', 'noFollowsYou'],
-    'user',
-    'noFollowsYou'
-  ],
   components: {
     BasicUserCard,
     RemoteFollow,

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)

src/components/font_control/font_control.js

@@ -5,9 +5,7 @@ export default {
   components: {
     Select
   },
-  props: [
+  props: ['name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'],
-    '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'

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>
 

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
+    }
   }
 }
 

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) {

src/components/gallery/gallery.vue

@@ -25,11 +25,20 @@
             :size="size"
             :editable="editable"
             :remove="removeAttachment"
-            :shift-up="!(attachmentIndex === 0 && rowIndex === 0) && shiftUpAttachment"
+            :shift-up="
-            :shift-dn="!(attachmentIndex === row.items.length - 1 && rowIndex === rows.length - 1) && shiftDnAttachment"
+              !(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:
+      mask: linear-gradient(to top, white, transparent) bottom/100% 70px
-        linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
+          no-repeat,
         linear-gradient(to top, white, white);
 
       /* Autoprefixed seem to ignore this one, and also syntax is different */

src/components/global_notice_list/global_notice_list.js

@@ -1,11 +1,7 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
-  faTimes
-} from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+library.add(faTimes)
-  faTimes
-)
 
 const GlobalNoticeList = {
   computed: {

src/components/hashtag_link/hashtag_link.vue

@@ -1,7 +1,5 @@
 <template>
-  <span
+  <span class="HashtagLink">
-    class="HashtagLink"
-  >
     <!-- eslint-disable vue/no-v-html -->
     <a
       :href="url"

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 {
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
-  faCircleNotch
-} from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+library.add(faCircleNotch)
-  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

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>
 

src/components/importer/importer.js

@@ -1,13 +1,7 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
+import { faCircleNotch, faTimes } from '@fortawesome/free-solid-svg-icons'
-  faCircleNotch,
-  faTimes
-} from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+library.add(faCircleNotch, faTimes)
-  faCircleNotch,
-  faTimes
-)
 
 const Importer = {
   props: {
@@ -35,9 +29,15 @@ const Importer = {
       this.dismiss()
       this.submitting = true
       this.submitHandler(this.file)
-        .then(() => { this.success = true })
+        .then(() => {
-        .catch(() => { this.error = true })
+          this.success = true
-        .finally(() => { this.submitting = false })
+        })
+        .catch(() => {
+          this.error = true
+        })
+        .finally(() => {
+          this.submitting = false
+        })
     },
     dismiss() {
       this.success = false

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
+        <FAIcon icon="times" />
-          icon="times"
-        />
       </button>
       {{ ' ' }}
       <span>{{ successMessage || $t('importer.success') }}</span>
@@ -37,9 +35,7 @@
         class="button-unstyled"
         @click="dismiss"
       >
-        <FAIcon
+        <FAIcon icon="times" />
-          icon="times"
-        />
       </button>
       {{ ' ' }}
       <span>{{ errorMessage || $t('importer.error') }}</span>

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']
     }
   },

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

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)
       }

src/components/link-preview/link-preview.js

@@ -2,11 +2,7 @@ import { mapGetters } from 'vuex'
 
 const LinkPreview = {
   name: 'LinkPreview',
-  props: [
+  props: ['card', 'size', 'nsfw'],
-    'card',
-    'size',
-    'nsfw'
-  ],
   data() {
     return {
       imageLoaded: false
@@ -28,9 +24,7 @@ const LinkPreview = {
     hideNsfwConfig() {
       return this.mergedConfig.hideNsfw
     },
-    ...mapGetters([
+    ...mapGetters(['mergedConfig'])
-      'mergedConfig'
-    ])
   },
   created() {
     if (this.useImage) {

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>

src/components/list/list.vue

@@ -28,7 +28,7 @@ export default {
     },
     getKey: {
       type: Function,
-      default: item => item.id
+      default: (item) => item.id
     }
   }
 }

src/components/list_card/list_card.js

@@ -1,16 +1,10 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
+import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
-  faEllipsisH
-} from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+library.add(faEllipsisH)
-  faEllipsisH
-)
 
 const ListCard = {
-  props: [
+  props: ['list']
-    'list'
-  ]
 }
 
 export default ListCard

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 {
+import { faSearch, faChevronLeft } from '@fortawesome/free-solid-svg-icons'
-  faSearch,
-  faChevronLeft
-} from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+library.add(faSearch, faChevronLeft)
-  faSearch,
-  faChevronLeft
-)
 
 const ListNew = {
   components: {
@@ -27,12 +21,12 @@ const ListNew = {
     }
   },
   created() {
-    this.$store.dispatch('fetchList', { id: this.id })
+    this.$store.dispatch('fetchList', { id: this.id }).then(() => {
-      .then(() => { this.title = this.findListTitle(this.id) })
+      this.title = this.findListTitle(this.id)
-    this.$store.dispatch('fetchListAccounts', { id: this.id })
+    })
-      .then(() => {
+    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 } })
     },

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

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 {
+import { faSearch, faChevronLeft } from '@fortawesome/free-solid-svg-icons'
-  faSearch,
-  faChevronLeft
-} from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+library.add(faSearch, faChevronLeft)
-  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 })
+      this.$store.dispatch('createList', { title: this.title }).then((list) => {
-        .then((list) => {
+        this.$store.dispatch('setListAccounts', {
-          this.$store.dispatch('setListAccounts', { id: list.id, accountIds: this.selectedUserIds })
+          id: list.id,
+          accountIds: this.selectedUserIds
+        })
         this.$router.push({ name: 'list-timeline', params: { id: list.id } })
       })
     }

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
+    <ListUserSearch @results="onResults" />
-      @results="onResults"
-    />
     <div
       v-for="user in users"
       :key="user.id"

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')

src/components/list_user_search/list_user_search.js

@@ -1,15 +1,9 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
+import { faSearch, faChevronLeft } from '@fortawesome/free-solid-svg-icons'
-  faSearch,
-  faChevronLeft
-} from '@fortawesome/free-solid-svg-icons'
 import { debounce } from 'lodash'
 import Checkbox from '../checkbox/checkbox.vue'
 
-library.add(
+library.add(faSearch, faChevronLeft)
-  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 })
+      this.$store
-        .then(data => {
+        .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)
+          )
         })
     }
   }

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>

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">

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')
     })
   }
 }

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"

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 {
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
-  faTimes
-} from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+library.add(faTimes)
-  faTimes
-)
 
 const LoginForm = {
   data: () => ({
@@ -15,17 +11,23 @@ const LoginForm = {
     error: false
   }),
   computed: {
-    isPasswordAuth () { return this.requiredPassword },
+    isPasswordAuth() {
-    isTokenAuth () { return this.requiredToken },
+      return this.requiredPassword
+    },
+    isTokenAuth() {
+      return this.requiredToken
+    },
     ...mapState({
-      registrationOpen: state => state.instance.registrationOpen,
+      registrationOpen: (state) => state.instance.registrationOpen,
-      instance: state => state.instance,
+      instance: (state) => state.instance,
-      loggingIn: state => state.users.loggingIn,
+      loggingIn: (state) => state.users.loggingIn,
-      oauth: state => state.oauth
+      oauth: (state) => state.oauth
     }),
-    ...mapGetters(
+    ...mapGetters('authFlow', [
-      'authFlow', ['requiredPassword', 'requiredToken', 'requiredMFA']
+      'requiredPassword',
-    )
+      'requiredToken',
+      'requiredMFA'
+    ])
   },
   methods: {
     ...mapMutations('authFlow', ['requireMFA']),
@@ -42,8 +44,9 @@ const LoginForm = {
         commit: this.$store.commit
       }
 
-      oauthApi.getOrCreateApp(data)
+      oauthApi.getOrCreateApp(data).then((app) => {
-        .then((app) => { oauthApi.login({ ...app, ...data }) })
+        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()

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;

src/components/media_modal/media_modal.js

@@ -14,12 +14,7 @@ import {
   faTimes
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+library.add(faChevronLeft, faChevronRight, faCircleNotch, faTimes)
-  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()
       }
     }

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
+    <span class="counter">
-      class="counter"
+      {{
-    >
+        $tc('media_modal.counter', currentIndex + 1, {
-      {{ $tc('media_modal.counter', currentIndex + 1, { current: currentIndex + 1, total: media.length }) }}
+          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 {

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(
+library.add(faUpload, faCircleNotch)
-  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)
+        const allowedsize = fileSizeFormatService.fileSizeFormat(
-        self.$emit('upload-failed', 'file_too_big', { filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit })
+          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 })
+      statusPosterService.uploadMedia({ store, formData }).then(
-        .then((fileData) => {
+        (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: [
+  props: ['dropFiles', 'disabled'],
-    'dropFiles',
-    'disabled'
-  ],
   watch: {
-    'dropFiles': function (fileInfos) {
+    dropFiles: function (fileInfos) {
       if (!this.uploading) {
         this.multiUpload(fileInfos)
       }

src/components/media_upload/media_upload.vue

@@ -22,7 +22,7 @@
       type="file"
       multiple="true"
       @change="change"
-    >
+    />
   </label>
 </template>
 

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 {
+import { faAt } from '@fortawesome/free-solid-svg-icons'
-  faAt
-} from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+library.add(faAt)
-  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
     })
   }
 }

src/components/mention_link/mention_link.vue

@@ -1,7 +1,5 @@
 <template>
-  <span
+  <span class="MentionLink">
-    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 -->
+          {{ ' ' + $t('status.you') }}</span
-      </a><span
+        >
+        <!-- eslint-enable vue/no-v-html --> </a
+      ><span
         v-if="shouldShowTooltip"
         class="full popover-default"
         :class="[highlightType]"
       >
-        <span
+        <span class="userNameFull">
-          class="userNameFull"
-        >
           <!-- eslint-disable vue/no-v-html -->
           @<span
             class="userName"

src/components/mentions_line/mentions_line.vue

@@ -20,14 +20,14 @@
           class="mention-link"
           :content="mention.content"
           :url="mention.url"
-        />
+        /> </span
-      </span><button
+      ><button
         v-if="!expanded"
         class="button-unstyled showMoreLess"
         @click="toggleShowMore"
       >
-        {{ $t('status.plus_more', { number: extraMentions.length }) }}
+        {{ $t('status.plus_more', { number: extraMentions.length }) }}</button
-      </button><button
+      ><button
         v-if="expanded"
         class="button-unstyled showMoreLess"
         @click="toggleShowMore"

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 {
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
-  faTimes
-} from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+library.add(faTimes)
-  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