Merge branch 'biome' into 'develop'

Migration to Biome

See merge request pleroma/pleroma-fe!2193

.gitlab-ci.yml

@@ -34,12 +34,23 @@ check-changelog:
     - apk add git
     - sh ./tools/check-changelog
 
-lint:
+lint-eslint:
   stage: lint
   script:
     - yarn
-    - yarn lint
+    - yarn ci-eslint
-    - yarn stylelint
+
+lint-biome:
+  stage: lint
+  script:
+    - yarn
+    - yarn ci-biome
+
+lint-stylelint:
+  stage: lint
+  script:
+    - yarn
+    - yarn ci-stylelint
 
 test:
   stage: test

biome.json

@@ -0,0 +1,145 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "includes": ["**", "!!**/dist", "!!tools/emojis.json"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "linter": {
+    "enabled": true,
+    "domains": {
+      "vue": "recommended"
+    },
+    "rules": {
+      "recommended": false,
+      "complexity": {
+        "noAdjacentSpacesInRegex": "error",
+        "noExtraBooleanCast": "error",
+        "noUselessCatch": "error",
+        "noUselessEscapeInRegex": "error"
+      },
+      "correctness": {
+        "noConstAssign": "error",
+        "noConstantCondition": "error",
+        "noEmptyCharacterClassInRegex": "error",
+        "noEmptyPattern": "error",
+        "noGlobalObjectCalls": "error",
+        "noInvalidBuiltinInstantiation": "error",
+        "noInvalidConstructorSuper": "error",
+        "noNonoctalDecimalEscape": "error",
+        "noPrecisionLoss": "error",
+        "noSelfAssign": "error",
+        "noSetterReturn": "error",
+        "noSwitchDeclarations": "error",
+        "noUndeclaredVariables": "error",
+        "noUnreachable": "error",
+        "noUnreachableSuper": "error",
+        "noUnsafeFinally": "error",
+        "noUnsafeOptionalChaining": "error",
+        "noUnusedLabels": "error",
+        "noUnusedPrivateClassMembers": "error",
+        "noUnusedVariables": "error",
+        "useIsNan": "error",
+        "useValidForDirection": "error",
+        "useValidTypeof": "error",
+        "useYield": "error"
+      },
+      "suspicious": {
+        "noAsyncPromiseExecutor": "error",
+        "noCatchAssign": "error",
+        "noClassAssign": "error",
+        "noCompareNegZero": "error",
+        "noConstantBinaryExpressions": "error",
+        "noControlCharactersInRegex": "error",
+        "noDebugger": "error",
+        "noDuplicateCase": "error",
+        "noDuplicateClassMembers": "error",
+        "noDuplicateElseIf": "error",
+        "noDuplicateObjectKeys": "error",
+        "noDuplicateParameters": "error",
+        "noEmptyBlockStatements": "error",
+        "noFallthroughSwitchClause": "error",
+        "noFunctionAssign": "error",
+        "noGlobalAssign": "error",
+        "noImportAssign": "error",
+        "noIrregularWhitespace": "error",
+        "noMisleadingCharacterClass": "error",
+        "noPrototypeBuiltins": "error",
+        "noRedeclare": "error",
+        "noShadowRestrictedNames": "error",
+        "noSparseArray": "error",
+        "noUnsafeNegation": "error",
+        "noUselessRegexBackrefs": "error",
+        "noWith": "error",
+        "useGetterReturn": "error"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "semicolons": "asNeeded"
+    },
+    "globals": []
+  },
+  "overrides": [
+    {
+      "includes": ["**/*.spec.js", "test/fixtures/*.js"],
+      "javascript": {
+        "globals": [
+          "vi",
+          "describe",
+          "it",
+          "test",
+          "expect",
+          "before",
+          "beforeEach",
+          "after",
+          "afterEach"
+        ]
+      }
+    },
+    {
+      "includes": ["**/*.vue"],
+      "linter": {
+        "rules": {
+          "style": {
+            "useConst": "off",
+            "useImportType": "off"
+          },
+          "correctness": {
+            "noUnusedVariables": "off",
+            "noUnusedImports": "off"
+          }
+        }
+      }
+    }
+  ],
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": {
+          "level": "on",
+          "options": {
+            "groups": [
+              [":NODE:", ":PACKAGE:", "!src/**", "!@fortawesome/**"],
+              ":BLANK_LINE:",
+              [":PATH:", "src/**"],
+              ":BLANK_LINE:",
+              "@fortawesome/fontawesome-svg-core",
+              "@fortawesome/*"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

build/check-versions.mjs

@@ -1,5 +1,5 @@
-import semver from 'semver'
 import chalk from 'chalk'
+import semver from 'semver'
 
 import packageConfig from '../package.json' with { type: 'json' }
 
@@ -7,8 +7,8 @@ var versionRequirements = [
   {
     name: 'node',
     currentVersion: semver.clean(process.version),
-    versionRequirement: packageConfig.engines.node
+    versionRequirement: packageConfig.engines.node,
-  }
+  },
 ]
 
 export default function () {
@@ -16,15 +16,22 @@ export default function () {
   for (let i = 0; i < versionRequirements.length; i++) {
     const mod = versionRequirements[i]
     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
-      warnings.push(mod.name + ': ' +
+      warnings.push(
-        chalk.red(mod.currentVersion) + ' should be ' +
+        mod.name +
-        chalk.green(mod.versionRequirement)
+          ': ' +
+          chalk.red(mod.currentVersion) +
+          ' should be ' +
+          chalk.green(mod.versionRequirement),
       )
     }
   }
 
   if (warnings.length) {
-    console.warn(chalk.yellow('\nTo use this template, you must update following to modules:\n'))
+    console.warn(
+      chalk.yellow(
+        '\nTo use this template, you must update following to modules:\n',
+      ),
+    )
     for (let i = 0; i < warnings.length; i++) {
       const warning = warnings[i]
       console.warn('  ' + warning)

build/commit_hash.js

@@ -1,7 +1,7 @@
 import childProcess from 'child_process'
 
-export const getCommitHash = (() => {
+export const getCommitHash = () => {
-  const subst = "$Format:%h$"
+  const subst = '$Format:%h$'
   if (!subst.match(/Format:/)) {
     return subst
   } else {
@@ -15,4 +15,4 @@ export const getCommitHash = (() => {
       return 'UNKNOWN'
     }
   }
-})
+}

build/copy_plugin.js

@@ -1,8 +1,8 @@
-import serveStatic from 'serve-static'
-import { resolve } from 'node:path'
 import { cp } from 'node:fs/promises'
+import { resolve } from 'node:path'
+import serveStatic from 'serve-static'
 
-const getPrefix = s => {
+const getPrefix = (s) => {
   const padEnd = s.endsWith('/') ? s : s + '/'
   return padEnd.startsWith('/') ? padEnd : '/' + padEnd
 }
@@ -13,13 +13,15 @@ const copyPlugin = ({ inUrl, inFs }) => {
   let copyTarget
   const handler = serveStatic(inFs)
 
-  return [{
+  return [
+    {
       name: 'copy-plugin-serve',
       apply: 'serve',
       configureServer(server) {
         server.middlewares.use(prefix, handler)
-    }
+      },
-  }, {
+    },
+    {
       name: 'copy-plugin-build',
       apply: 'build',
       configResolved(config) {
@@ -32,9 +34,10 @@ const copyPlugin = ({ inUrl, inFs }) => {
           console.info(`Copying '${inFs}' to ${copyTarget}...`)
           await cp(inFs, copyTarget, { recursive: true })
           console.info('Done.')
-      }
+        },
-    }
+      },
-  }]
+    },
+  ]
 }
 
 export default copyPlugin

build/emojis_plugin.js

@@ -1,21 +1,23 @@
-import { resolve } from 'node:path'
 import { access } from 'node:fs/promises'
-import { languages, langCodeToCldrName } from '../src/i18n/languages.js'
+import { resolve } from 'node:path'
+
+import { languages } from '../src/i18n/languages.js'
 
 const annotationsImportPrefix = '@kazvmoe-infra/unicode-emoji-json/annotations/'
 const specialAnnotationsLocale = {
-  ja_easy: 'ja'
+  ja_easy: 'ja',
 }
 
-const internalToAnnotationsLocale = (internal) => specialAnnotationsLocale[internal] || internal
+const internalToAnnotationsLocale = (internal) =>
+  specialAnnotationsLocale[internal] || internal
 
 // This gets all the annotations that are accessible (whose language
 // can be chosen in the settings). Data for other languages are
 // discarded because there is no way for it to be fetched.
 const getAllAccessibleAnnotations = async (projectRoot) => {
-  const imports = (await Promise.all(
+  const imports = (
-    languages
+    await Promise.all(
-      .map(async lang => {
+      languages.map(async (lang) => {
         const destLang = internalToAnnotationsLocale(lang)
         const importModule = `${annotationsImportPrefix}${destLang}.json`
         const importFile = resolve(projectRoot, 'node_modules', importModule)
@@ -23,10 +25,13 @@ const getAllAccessibleAnnotations = async (projectRoot) => {
           await access(importFile)
           return `'${lang}': () => import('${importModule}')`
         } catch (e) {
+          console.error(e)
           return
         }
-      })))
+      }),
-        .filter(k => k)
+    )
+  )
+    .filter((k) => k)
     .join(',\n')
 
   return `
@@ -57,7 +62,7 @@ const emojisPlugin = () => {
         return await getAllAccessibleAnnotations(projectRoot)
       }
       return null
-    }
+    },
   }
 }
 

build/msw_plugin.js

@@ -1,5 +1,5 @@
-import { resolve } from 'node:path'
 import { readFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
 
 const target = 'node_modules/msw/lib/mockServiceWorker.js'
 
@@ -21,7 +21,7 @@ const mswPlugin = () => {
           next()
         }
       })
-    }
+    },
   }
 }
 

build/service_worker_messages.js

@@ -1,11 +1,12 @@
-import { languages, langCodeToJsonName } from '../src/i18n/languages.js'
 import { readFile } from 'node:fs/promises'
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
+import { langCodeToJsonName, languages } from '../src/i18n/languages.js'
+
 const i18nDir = resolve(
   dirname(dirname(fileURLToPath(import.meta.url))),
-  'src/i18n'
+  'src/i18n',
 )
 
 export const i18nFiles = languages.reduce((acc, lang) => {
@@ -16,13 +17,15 @@ export const i18nFiles = languages.reduce((acc, lang) => {
 }, {})
 
 export const generateServiceWorkerMessages = async () => {
-  const msgArray = await Promise.all(Object.entries(i18nFiles).map(async ([lang, file]) => {
+  const msgArray = await Promise.all(
+    Object.entries(i18nFiles).map(async ([lang, file]) => {
       const fileContent = await readFile(file, 'utf-8')
       const msg = {
-      notifications: JSON.parse(fileContent).notifications || {}
+        notifications: JSON.parse(fileContent).notifications || {},
       }
       return [lang, msg]
-  }))
+    }),
+  )
   return msgArray.reduce((acc, [lang, msg]) => {
     acc[lang] = msg
     return acc

build/sw_plugin.js

@@ -1,9 +1,13 @@
-import { fileURLToPath } from 'node:url'
-import { dirname, resolve } from 'node:path'
 import { readFile } from 'node:fs/promises'
-import { build } from 'vite'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
 import * as esbuild from 'esbuild'
-import { generateServiceWorkerMessages, i18nFiles } from './service_worker_messages.js'
+import { build } from 'vite'
+
+import {
+  generateServiceWorkerMessages,
+  i18nFiles,
+} from './service_worker_messages.js'
 
 const getSWMessagesAsText = async () => {
   const messages = await generateServiceWorkerMessages()
@@ -14,14 +18,10 @@ const projectRoot = dirname(dirname(fileURLToPath(import.meta.url)))
 const swEnvName = 'virtual:pleroma-fe/service_worker_env'
 const swEnvNameResolved = '\0' + swEnvName
 const getDevSwEnv = () => `self.serviceWorkerOption = { assets: [] };`
-const getProdSwEnv = ({ assets }) => `self.serviceWorkerOption = { assets: ${JSON.stringify(assets)} };`
+const getProdSwEnv = ({ assets }) =>
+  `self.serviceWorkerOption = { assets: ${JSON.stringify(assets)} };`
 
-export const devSwPlugin = ({
+export const devSwPlugin = ({ swSrc, swDest, transformSW, alias }) => {
-  swSrc,
-  swDest,
-  transformSW,
-  alias
-}) => {
   const swFullSrc = resolve(projectRoot, swSrc)
   const esbuildAlias = {}
   Object.entries(alias).forEach(([source, dest]) => {
@@ -31,7 +31,8 @@ export const devSwPlugin = ({
   return {
     name: 'dev-sw-plugin',
     apply: 'serve',
-    configResolved (conf) {
+    configResolved() {
+      /* no-op */
     },
     resolveId(id) {
       const name = id.startsWith('/') ? id.slice(1) : id
@@ -63,52 +64,54 @@ export const devSwPlugin = ({
           write: false,
           outfile: 'sw-pleroma.js',
           alias: esbuildAlias,
-          plugins: [{
+          plugins: [
+            {
               name: 'vite-like-root-resolve',
               setup(b) {
-              b.onResolve(
+                b.onResolve({ filter: new RegExp(/^\//) }, (args) => ({
-                { filter: new RegExp(/^\//) },
+                  path: resolve(projectRoot, args.path.slice(1)),
-                args => ({
+                }))
-                  path: resolve(projectRoot, args.path.slice(1))
+              },
-                })
+            },
-              )
+            {
-            }
-          }, {
               name: 'sw-messages',
               setup(b) {
                 b.onResolve(
                   { filter: new RegExp('^' + swMessagesName + '$') },
-                args => ({
+                  (args) => ({
                     path: args.path,
-                  namespace: 'sw-messages'
+                    namespace: 'sw-messages',
-                }))
+                  }),
+                )
                 b.onLoad(
                   { filter: /.*/, namespace: 'sw-messages' },
                   async () => ({
-                  contents: await getSWMessagesAsText()
+                    contents: await getSWMessagesAsText(),
-                }))
+                  }),
-            }
+                )
-          }, {
+              },
+            },
+            {
               name: 'sw-env',
               setup(b) {
                 b.onResolve(
                   { filter: new RegExp('^' + swEnvName + '$') },
-                args => ({
+                  (args) => ({
                     path: args.path,
-                  namespace: 'sw-env'
+                    namespace: 'sw-env',
+                  }),
+                )
+                b.onLoad({ filter: /.*/, namespace: 'sw-env' }, () => ({
+                  contents: getDevSwEnv(),
                 }))
-              b.onLoad(
+              },
-                { filter: /.*/, namespace: 'sw-env' },
+            },
-                () => ({
+          ],
-                  contents: getDevSwEnv()
-                }))
-            }
-          }]
         })
         const text = res.outputFiles[0].text
         return text
       }
-    }
+    },
   }
 }
 
@@ -118,10 +121,7 @@ export const devSwPlugin = ({
 // however, we must compile the service worker to iife because of browser support.
 // Run another vite build just for the service worker targeting iife at
 // the end of the build.
-export const buildSwPlugin = ({
+export const buildSwPlugin = ({ swSrc, swDest }) => {
-  swSrc,
-  swDest,
-}) => {
   let config
   return {
     name: 'build-sw-plugin',
@@ -138,16 +138,16 @@ export const buildSwPlugin = ({
           lib: {
             entry: swSrc,
             formats: ['iife'],
-            name: 'sw_pleroma'
+            name: 'sw_pleroma',
           },
           emptyOutDir: false,
           rollupOptions: {
             output: {
-              entryFileNames: swDest
+              entryFileNames: swDest,
-            }
-          }
             },
-        configFile: false
+          },
+        },
+        configFile: false,
       }
     },
     generateBundle: {
@@ -155,8 +155,8 @@ export const buildSwPlugin = ({
       sequential: true,
       async handler(_, bundle) {
         const assets = Object.keys(bundle)
-              .filter(name => !/\.map$/.test(name))
+          .filter((name) => !/\.map$/.test(name))
-              .map(name => '/' + name)
+          .map((name) => '/' + name)
         config.plugins.push({
           name: 'build-sw-env-plugin',
           resolveId(id) {
@@ -170,9 +170,9 @@ export const buildSwPlugin = ({
               return getProdSwEnv({ assets })
             }
             return null
-          }
+          },
         })
-      }
+      },
     },
     closeBundle: {
       order: 'post',
@@ -180,8 +180,8 @@ export const buildSwPlugin = ({
       async handler() {
         console.info('Building service worker for production')
         await build(config)
-      }
+      },
-    }
+    },
   }
 }
 
@@ -193,7 +193,7 @@ export const swMessagesPlugin = () => {
     name: 'sw-messages-plugin',
     resolveId(id) {
       if (id === swMessagesName) {
-        Object.values(i18nFiles).forEach(f => {
+        Object.values(i18nFiles).forEach((f) => {
           this.addWatchFile(f)
         })
         return swMessagesNameResolved
@@ -206,6 +206,6 @@ export const swMessagesPlugin = () => {
         return await getSWMessagesAsText()
       }
       return null
-    }
+    },
   }
 }

build/update-emoji.js

@@ -1,10 +1,10 @@
-
+import emojis from '@kazvmoe-infra/unicode-emoji-json/data-by-group.json' with {
-import emojis from '@kazvmoe-infra/unicode-emoji-json/data-by-group.json' with { type: 'json' }
+  type: 'json',
+}
 import fs from 'fs'
 
-Object.keys(emojis)
+Object.keys(emojis).map((k) => {
-  .map(k => {
+  emojis[k].map((e) => {
-    emojis[k].map(e => {
     delete e.unicode_version
     delete e.emoji_version
     delete e.skin_tone_support_unicode_version
@@ -12,8 +12,7 @@ Object.keys(emojis)
 })
 
 const res = {}
-Object.keys(emojis)
+Object.keys(emojis).map((k) => {
-  .map(k => {
   const groupId = k.replace('&', 'and').replace(/ /g, '-').toLowerCase()
   res[groupId] = emojis[k]
 })

eslint.config.mjs

@@ -1,37 +1,34 @@
-import vue from "eslint-plugin-vue";
+import js from '@eslint/js'
-import js from "@eslint/js";
+import { defineConfig, globalIgnores } from 'eslint/config'
-import globals from "globals";
+import vue from 'eslint-plugin-vue'
+import globals from 'globals'
 
-
+export default defineConfig([
-export default [
   ...vue.configs['flat/recommended'],
-  js.configs.recommended,
+  globalIgnores(['**/*.js', 'build/', 'dist/', 'config/']),
   {
-    files: ["**/*.js", "**/*.mjs", "**/*.vue"],
+    files: ['src/**/*.vue'],
-    ignores: ["build/*.js", "config/*.js"],
+    plugins: { js },
-
+    extends: ['js/recommended'],
     languageOptions: {
       ecmaVersion: 2024,
-      sourceType: "module",
+      sourceType: 'module',
 
       parserOptions: {
-        parser: "@babel/eslint-parser",
+        parser: '@babel/eslint-parser',
       },
       globals: {
         ...globals.browser,
         ...globals.vitest,
         ...globals.chai,
         ...globals.commonjs,
-        ...globals.serviceworker
+        ...globals.serviceworker,
-      }
+      },
     },
 
     rules: {
-      'arrow-parens': 0,
-      'generator-star-spacing': 0,
-      'no-debugger': 0,
       'vue/require-prop-types': 0,
       'vue/multi-word-component-names': 0,
-    }
+    },
-  }
+  },
-]
+])

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pleroma_fe",
-  "version": "2.9.3",
+  "version": "2.10.0",
   "description": "Pleroma frontend, the default frontend of Pleroma social network server",
   "author": "Pleroma contributors <https://git.pleroma.social/pleroma/pleroma-fe/-/blob/develop/CONTRIBUTORS.md>",
   "private": false,
@@ -13,9 +13,11 @@
     "e2e:pw": "playwright test --config test/e2e-playwright/playwright.config.mjs",
     "e2e": "sh ./tools/e2e/run.sh",
     "test": "yarn run unit && yarn run e2e",
-    "stylelint": "yarn exec stylelint '**/*.scss' '**/*.vue'",
+    "ci-biome": "yarn exec biome check",
-    "lint": "eslint src test/unit/specs test/e2e/specs test/e2e-playwright/specs test/e2e-playwright/playwright.config.mjs",
+    "ci-eslint": "yarn exec eslint",
-    "lint-fix": "eslint --fix src test/unit/specs test/e2e/specs test/e2e-playwright/specs test/e2e-playwright/playwright.config.mjs"
+    "ci-stylelint": "yarn exec stylelint '**/*.scss' '**/*.vue'",
+    "lint": "yarn ci-biome; yarn ci-eslint; yarn ci-stylelint",
+    "lint-fix": "yarn exec eslint --fix; yarn exec stylelint '**/*.scss' '**/*.vue' --fix; biome check --write"
   },
   "dependencies": {
     "@babel/runtime": "7.28.4",
@@ -60,6 +62,7 @@
     "@babel/plugin-transform-runtime": "7.28.5",
     "@babel/preset-env": "7.28.5",
     "@babel/register": "7.28.3",
+    "@biomejs/biome": "2.3.11",
     "@ungap/event-target": "0.2.4",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
@@ -78,7 +81,6 @@
     "cross-spawn": "7.0.6",
     "custom-event-polyfill": "1.0.7",
     "eslint": "9.39.2",
-    "vue-eslint-parser": "10.2.0",
     "eslint-config-standard": "17.1.0",
     "eslint-formatter-friendly": "7.0.0",
     "eslint-plugin-import": "2.32.0",
@@ -113,7 +115,8 @@
     "vite": "^6.1.0",
     "vite-plugin-eslint2": "^5.0.3",
     "vite-plugin-stylelint": "^6.0.0",
-    "vitest": "^3.0.7"
+    "vitest": "^3.0.7",
+    "vue-eslint-parser": "10.2.0"
   },
   "type": "module",
   "engines": {

postcss.config.js

@@ -1,7 +1,5 @@
 import autoprefixer from 'autoprefixer'
 
 export default {
-  plugins: [
+  plugins: [autoprefixer],
-    autoprefixer
-  ]
 }

public/static/palettes/index.json

@@ -1,6 +1,26 @@
 {
-  "pleroma-dark": [ "Pleroma Dark", "#121a24", "#182230", "#b9b9ba", "#d8a070", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
+  "pleroma-dark": [
-  "pleroma-light": [ "Pleroma Light", "#f2f4f6", "#dbe0e8", "#304055", "#f86f0f", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
+    "Pleroma Dark",
+    "#121a24",
+    "#182230",
+    "#b9b9ba",
+    "#d8a070",
+    "#d31014",
+    "#0fa00f",
+    "#0095ff",
+    "#ffa500"
+  ],
+  "pleroma-light": [
+    "Pleroma Light",
+    "#f2f4f6",
+    "#dbe0e8",
+    "#304055",
+    "#f86f0f",
+    "#d31014",
+    "#0fa00f",
+    "#0095ff",
+    "#ffa500"
+  ],
   "classic-dark": {
     "name": "Classic Dark",
     "bg": "#161c20",
@@ -12,8 +32,28 @@
     "cBlue": "#0095ff",
     "cOrange": "#ffa500"
   },
-  "bird": [ "Bird", "#f8fafd", "#e6ecf0", "#14171a", "#0084b8", "#e0245e", "#17bf63", "#1b95e0", "#fab81e"],
+  "bird": [
-  "pleroma-amoled": [ "Pleroma Dark AMOLED", "#000000", "#111111", "#b0b0b1", "#d8a070", "#aa0000", "#0fa00f", "#0095ff", "#d59500"],
+    "Bird",
+    "#f8fafd",
+    "#e6ecf0",
+    "#14171a",
+    "#0084b8",
+    "#e0245e",
+    "#17bf63",
+    "#1b95e0",
+    "#fab81e"
+  ],
+  "pleroma-amoled": [
+    "Pleroma Dark AMOLED",
+    "#000000",
+    "#111111",
+    "#b0b0b1",
+    "#d8a070",
+    "#aa0000",
+    "#0fa00f",
+    "#0095ff",
+    "#d59500"
+  ],
   "tomorrow-night": {
     "name": "Tomorrow Night",
     "bg": "#1d1f21",
@@ -36,8 +76,28 @@
     "cGreen": "#50FA7B",
     "cOrange": "#FFB86C"
   },
-  "ir-black": [ "Ir Black", "#000000", "#242422", "#b5b3aa", "#ff6c60", "#FF6C60", "#A8FF60", "#96CBFE", "#FFFFB6" ],
+  "ir-black": [
-  "monokai": [ "Monokai", "#272822", "#383830", "#f8f8f2", "#f92672", "#F92672", "#a6e22e", "#66d9ef", "#f4bf75" ],
+    "Ir Black",
+    "#000000",
+    "#242422",
+    "#b5b3aa",
+    "#ff6c60",
+    "#FF6C60",
+    "#A8FF60",
+    "#96CBFE",
+    "#FFFFB6"
+  ],
+  "monokai": [
+    "Monokai",
+    "#272822",
+    "#383830",
+    "#f8f8f2",
+    "#f92672",
+    "#F92672",
+    "#a6e22e",
+    "#66d9ef",
+    "#f4bf75"
+  ],
   "purple-stream": {
     "name": "Purple stream",
     "bg": "#17171A",

public/static/splash.css

@@ -65,7 +65,8 @@ body {
   z-index: 2;
   grid-template-rows: repeat(8, 1fr);
   grid-template-columns: repeat(5, 1fr);
-  grid-template-areas: "P P . L L"
+  grid-template-areas:
+    "P P . L L"
     "P P . L L"
     "P P . L L"
     "P P . L L"
@@ -74,7 +75,7 @@ body {
     "P P . E E"
     "P P . E E";
 
-  --logoChunkSize: calc(2em * 0.5 * var(--scale))
+  --logoChunkSize: calc(2em * 0.5 * var(--scale));
 }
 
 .chunk {

renovate.json

@@ -1,6 +1,4 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
+  "extends": ["config:base"]
-    "config:base"
-  ]
 }

src/App.js

@@ -1,34 +1,36 @@
-import UserPanel from './components/user_panel/user_panel.vue'
-import NavPanel from './components/nav_panel/nav_panel.vue'
-import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
-import FeaturesPanel from './components/features_panel/features_panel.vue'
-import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
-import ShoutPanel from './components/shout_panel/shout_panel.vue'
-import MediaModal from './components/media_modal/media_modal.vue'
-import SideDrawer from './components/side_drawer/side_drawer.vue'
-import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
-import MobileNav from './components/mobile_nav/mobile_nav.vue'
-import DesktopNav from './components/desktop_nav/desktop_nav.vue'
-import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
-import EditStatusModal from './components/edit_status_modal/edit_status_modal.vue'
-import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
-import StatusHistoryModal from './components/status_history_modal/status_history_modal.vue'
-import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
-import { getOrCreateServiceWorker } from './services/sw/sw'
-import { windowWidth, windowHeight } from './services/window_utils/window_utils'
-import { mapGetters } from 'vuex'
-import { defineAsyncComponent } from 'vue'
-import { useShoutStore } from './stores/shout'
-import { useInterfaceStore } from './stores/interface'
-
 import { throttle } from 'lodash'
+import { defineAsyncComponent } from 'vue'
+import { mapGetters } from 'vuex'
+
+import DesktopNav from './components/desktop_nav/desktop_nav.vue'
+import EditStatusModal from './components/edit_status_modal/edit_status_modal.vue'
+import FeaturesPanel from './components/features_panel/features_panel.vue'
+import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
+import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
+import MediaModal from './components/media_modal/media_modal.vue'
+import MobileNav from './components/mobile_nav/mobile_nav.vue'
+import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
+import NavPanel from './components/nav_panel/nav_panel.vue'
+import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
+import ShoutPanel from './components/shout_panel/shout_panel.vue'
+import SideDrawer from './components/side_drawer/side_drawer.vue'
+import StatusHistoryModal from './components/status_history_modal/status_history_modal.vue'
+import UserPanel from './components/user_panel/user_panel.vue'
+import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
+import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
+import { getOrCreateServiceWorker } from './services/sw/sw'
+import { windowHeight, windowWidth } from './services/window_utils/window_utils'
+import { useInterfaceStore } from './stores/interface'
+import { useShoutStore } from './stores/shout'
 
 export default {
   name: 'app',
   components: {
     UserPanel,
     NavPanel,
-    Notifications: defineAsyncComponent(() => import('./components/notifications/notifications.vue')),
+    Notifications: defineAsyncComponent(
+      () => import('./components/notifications/notifications.vue'),
+    ),
     InstanceSpecificPanel,
     FeaturesPanel,
     WhoToFollowPanel,
@@ -38,16 +40,20 @@ export default {
     MobilePostStatusButton,
     MobileNav,
     DesktopNav,
-    SettingsModal: defineAsyncComponent(() => import('./components/settings_modal/settings_modal.vue')),
+    SettingsModal: defineAsyncComponent(
-    UpdateNotification: defineAsyncComponent(() => import('./components/update_notification/update_notification.vue')),
+      () => import('./components/settings_modal/settings_modal.vue'),
+    ),
+    UpdateNotification: defineAsyncComponent(
+      () => import('./components/update_notification/update_notification.vue'),
+    ),
     UserReportingModal,
     PostStatusModal,
     EditStatusModal,
     StatusHistoryModal,
-    GlobalNoticeList
+    GlobalNoticeList,
   },
   data: () => ({
-    mobileActivePanel: 'timeline'
+    mobileActivePanel: 'timeline',
   }),
   watch: {
     themeApplied() {
@@ -58,7 +64,7 @@ export default {
     },
     layoutType() {
       document.getElementById('modal').classList = ['-' + this.layoutType]
-    }
+    },
   },
   created() {
     // Load the locale from the storage
@@ -90,10 +96,12 @@ export default {
     },
     currentTheme() {
       if (useInterfaceStore().styleDataUsed) {
-        const styleMeta = useInterfaceStore().styleDataUsed.find(x => x.component === '@meta')
+        const styleMeta = useInterfaceStore().styleDataUsed.find(
+          (x) => x.component === '@meta',
+        )
 
         if (styleMeta !== undefined) {
-          return styleMeta.directives.name.replaceAll(" ", "-").toLowerCase()
+          return styleMeta.directives.name.replaceAll(' ', '-').toLowerCase()
         }
       }
 
@@ -107,39 +115,51 @@ export default {
         {
           '-reverse': this.reverseLayout,
           '-no-sticky-headers': this.noSticky,
-          '-has-new-post-button': this.newPostButtonShown
+          '-has-new-post-button': this.newPostButtonShown,
         },
-        '-' + this.layoutType
+        '-' + this.layoutType,
       ]
     },
     navClasses() {
       const { navbarColumnStretch } = this.$store.getters.mergedConfig
       return [
         '-' + this.layoutType,
-        ...(navbarColumnStretch ? ['-column-stretch'] : [])
+        ...(navbarColumnStretch ? ['-column-stretch'] : []),
       ]
     },
-    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 {
-          '--body-background-image': `url(${this.background})`
+          '--body-background-image': `url(${this.background})`,
         }
       }
     },
-    shout () { return useShoutStore().joined },
+    shout() {
-    suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
+      return useShoutStore().joined
+    },
+    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
+      )
     },
     isChats() {
       return this.$route.name === 'chat' || this.$route.name === 'chats'
@@ -150,30 +170,50 @@ export default {
     newPostButtonShown() {
       if (this.isChats) return false
       if (this.isListEdit) return false
-      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
     },
-    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
-    editingAvailable () { return this.$store.state.instance.editingAvailable },
     shoutboxPosition() {
       return this.$store.getters.mergedConfig.alwaysShowNewPostButton || false
     },
     hideShoutbox() {
       return this.$store.getters.mergedConfig.hideShoutbox
     },
-    layoutType () { return useInterfaceStore().layoutType },
+    layoutType() {
-    privateMode () { return this.$store.state.instance.private },
+      return useInterfaceStore().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
-    scrollParent () { return window; /* this.$refs.appContentRef */ },
+    },
-    ...mapGetters(['mergedConfig'])
+    showScrollbars() {
+      return this.$store.getters.mergedConfig.showScrollbars
+    },
+    scrollParent() {
+      return window /* this.$refs.appContentRef */
+    },
+    ...mapGetters(['mergedConfig']),
   },
   methods: {
     resizeHandler() {
@@ -181,7 +221,10 @@ export default {
       useInterfaceStore().setLayoutHeight(windowHeight())
     },
     scrollHandler() {
-      const scrollPosition = this.scrollParent === window ? window.scrollY : this.scrollParent.scrollTop
+      const scrollPosition =
+        this.scrollParent === window
+          ? window.scrollY
+          : this.scrollParent.scrollTop
 
       if (scrollPosition != 0) {
         this.$refs.appContentRef.classList.add(['-scrolled'])
@@ -192,7 +235,7 @@ export default {
     setThemeBodyClass() {
       const themeName = this.currentTheme
       const classList = Array.from(document.body.classList)
-      const oldTheme = classList.filter(c => c.startsWith('theme-'))
+      const oldTheme = classList.filter((c) => c.startsWith('theme-'))
 
       if (themeName !== null && themeName !== '') {
         const newTheme = `theme-${themeName.toLowerCase()}`
@@ -209,7 +252,9 @@ export default {
       }
     },
     removeSplash() {
-      document.querySelector('#status').textContent = this.$t('splash.fun_' + Math.ceil(Math.random() * 4))
+      document.querySelector('#status').textContent = this.$t(
+        'splash.fun_' + Math.ceil(Math.random() * 4),
+      )
       const splashscreenRoot = document.querySelector('#splash')
       splashscreenRoot.addEventListener('transitionend', () => {
         splashscreenRoot.remove()
@@ -219,6 +264,6 @@ export default {
       }, 600)
       splashscreenRoot.classList.add('hidden')
       document.querySelector('#app').classList.remove('hidden')
-    }
+    },
-  }
+  },
 }

src/boot/after_store.js

@@ -1,30 +1,39 @@
 /* global process */
+
+import vClickOutside from 'click-outside-vue3'
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
-import vClickOutside from 'click-outside-vue3'
 import VueVirtualScroller from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
-import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
+import { config } from '@fortawesome/fontawesome-svg-core'
-import { config } from '@fortawesome/fontawesome-svg-core';
+import {
+  FontAwesomeIcon,
+  FontAwesomeLayers,
+} from '@fortawesome/vue-fontawesome'
+
 config.autoAddCss = false
 
-import App from '../App.vue'
-import routes from './routes'
 import VBodyScrollLock from 'src/directives/body_scroll_lock'
-
+import {
-import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
+  instanceDefaultConfig,
-import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
+  staticOrApiConfigDefault,
-import { applyConfig } from '../services/style_setter/style_setter.js'
+} from 'src/modules/default_config_state.js'
-import FaviconService from '../services/favicon_service/favicon_service.js'
-import { initServiceWorker, updateFocus } from '../services/sw/sw.js'
-
-import { useOAuthStore } from 'src/stores/oauth'
-import { useI18nStore } from 'src/stores/i18n'
-import { useInterfaceStore } from 'src/stores/interface'
 import { useAnnouncementsStore } from 'src/stores/announcements'
 import { useAuthFlowStore } from 'src/stores/auth_flow'
-import { staticOrApiConfigDefault, instanceDefaultConfig } from 'src/modules/default_config_state.js'
+import { useI18nStore } from 'src/stores/i18n'
+import { useInterfaceStore } from 'src/stores/interface'
+import { useOAuthStore } from 'src/stores/oauth'
+import App from '../App.vue'
+import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
+import FaviconService from '../services/favicon_service/favicon_service.js'
+import { applyConfig } from '../services/style_setter/style_setter.js'
+import { initServiceWorker, updateFocus } from '../services/sw/sw.js'
+import {
+  windowHeight,
+  windowWidth,
+} from '../services/window_utils/window_utils'
+import routes from './routes'
 
 let staticInitialResults = null
 
@@ -33,7 +42,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
 }
@@ -55,7 +66,7 @@ const preloadFetch = async (request) => {
   return {
     ok: true,
     json: () => requestData,
-    text: () => requestData
+    text: () => requestData,
   }
 }
 
@@ -67,17 +78,35 @@ const getInstanceConfig = async ({ store }) => {
       const textlimit = data.max_toot_chars
       const vapidPublicKey = data.pleroma.vapid_public_key
 
-      store.dispatch('setInstanceOption', { name: 'pleromaExtensionsAvailable', value: data.pleroma })
+      store.dispatch('setInstanceOption', {
-      store.dispatch('setInstanceOption', { name: 'textlimit', value: textlimit })
+        name: 'pleromaExtensionsAvailable',
-      store.dispatch('setInstanceOption', { name: 'accountApprovalRequired', value: data.approval_required })
+        value: data.pleroma,
-      store.dispatch('setInstanceOption', { name: 'birthdayRequired', value: !!data.pleroma?.metadata.birthday_required })
+      })
-      store.dispatch('setInstanceOption', { name: 'birthdayMinAge', value: data.pleroma?.metadata.birthday_min_age || 0 })
+      store.dispatch('setInstanceOption', {
+        name: 'textlimit',
+        value: textlimit,
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'accountApprovalRequired',
+        value: data.approval_required,
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'birthdayRequired',
+        value: !!data.pleroma?.metadata.birthday_required,
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'birthdayMinAge',
+        value: data.pleroma?.metadata.birthday_min_age || 0,
+      })
 
       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')
@@ -94,10 +123,12 @@ const getBackendProvidedConfig = async () => {
       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)
   }
 }
@@ -108,7 +139,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.')
@@ -149,7 +180,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\n", e)
@@ -161,9 +192,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\n", e)
@@ -175,7 +209,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')
             let meta = {}
@@ -185,15 +220,16 @@ const getStickers = async ({ store }) => {
             return {
               pack: name,
               path,
-            meta
+              meta,
             }
-        })
+          }),
-      )).sort((a, b) => {
+        )
+      ).sort((a, b) => {
         return a.meta.title.localeCompare(b.meta.title)
       })
       store.dispatch('setInstanceOption', { name: 'stickers', value: stickers })
     } else {
-      throw (res)
+      throw res
     }
   } catch (e) {
     console.warn("Can't load stickers\n", e)
@@ -203,13 +239,19 @@ const getStickers = async ({ store }) => {
 const getAppSecret = async ({ store }) => {
   const oauth = useOAuthStore()
   if (oauth.userToken) {
-    store.commit('setBackendInteractor', backendInteractorService(oauth.getToken))
+    store.commit(
+      'setBackendInteractor',
+      backendInteractorService(oauth.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 }) => {
@@ -220,77 +262,167 @@ 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: 'shoutAvailable', value: features.includes('chat') })
+      store.dispatch('setInstanceOption', {
-      store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
+        name: 'registrationOpen',
+        value: data.openRegistrations,
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'mediaProxyAvailable',
+        value: features.includes('media_proxy'),
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'safeDM',
+        value: features.includes('safe_dm_mentions'),
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'shoutAvailable',
+        value: features.includes('chat'),
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'pleromaChatMessagesAvailable',
+        value: features.includes('pleroma_chat_messages'),
+      })
       store.dispatch('setInstanceOption', {
         name: 'pleromaCustomEmojiReactionsAvailable',
         value:
           features.includes('pleroma_custom_emoji_reactions') ||
-          features.includes('custom_emoji_reactions')
+          features.includes('custom_emoji_reactions'),
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'pleromaBookmarkFoldersAvailable',
+        value: features.includes('pleroma:bookmark_folders'),
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'gopherAvailable',
+        value: features.includes('gopher'),
+      })
+      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: 'quotingAvailable',
+        value: features.includes('quote_posting'),
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'groupActorAvailable',
+        value: features.includes('pleroma:group_actors'),
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'blockExpiration',
+        value: features.includes('pleroma:block_expiration'),
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'localBubbleInstances',
+        value: metadata.localBubbleInstances ?? [],
       })
-      store.dispatch('setInstanceOption', { name: 'pleromaBookmarkFoldersAvailable', value: features.includes('pleroma:bookmark_folders') })
-      store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
-      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: 'quotingAvailable', value: features.includes('quote_posting') })
-      store.dispatch('setInstanceOption', { name: 'groupActorAvailable', value: features.includes('pleroma:group_actors') })
-      store.dispatch('setInstanceOption', { name: 'blockExpiration', value: features.includes('pleroma:block_expiration') })
-      store.dispatch('setInstanceOption', { name: 'localBubbleInstances', value: metadata.localBubbleInstances ?? [] })
 
       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: 'backendRepository', value: software.repository })
+        name: 'backendVersion',
+        value: software.version,
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'backendRepository',
+        value: software.repository,
+      })
 
       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')
+            : metadata.federation.mrf_policies.includes('TagPolicy'),
       })
 
-      store.dispatch('setInstanceOption', { name: 'federationPolicy', value: federation })
+      store.dispatch('setInstanceOption', {
+        name: 'federationPolicy',
+        value: federation,
+      })
       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')
@@ -300,7 +432,10 @@ 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]
 
@@ -331,29 +466,37 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
     if (process.env.NODE_ENV === 'development') {
       // do some checks to avoid common errors
       if (!Object.keys(allStores).length) {
-        throw new Error('No stores are available. Check the code in src/boot/after_store.js')
+        throw new Error(
+          'No stores are available. Check the code in src/boot/after_store.js',
+        )
       }
     }
     await Promise.all(
-      Object.entries(allStores)
+      Object.entries(allStores).map(async ([name, mod]) => {
-        .map(async ([name, mod]) => {
+        const isStoreName = (name) => name.startsWith('use')
-          const isStoreName = name => name.startsWith('use')
         if (process.env.NODE_ENV === 'development') {
           if (Object.keys(mod).filter(isStoreName).length !== 1) {
-              throw new Error('Each store file must export exactly one store as a named export. Check your code in src/stores/')
+            throw new Error(
+              'Each store file must export exactly one store as a named export. Check your code in src/stores/',
+            )
           }
         }
         const storeFuncName = Object.keys(mod).find(isStoreName)
         if (storeFuncName && typeof mod[storeFuncName] === 'function') {
           const p = mod[storeFuncName]().$persistLoaded
           if (!(p instanceof Promise)) {
-              throw new Error(`${name} store's $persistLoaded is not a Promise. The persist plugin is not applied.`)
+            throw new Error(
+              `${name} store's $persistLoaded is not a Promise. The persist plugin is not applied.`,
+            )
           }
           await p
         } else {
-            throw new Error(`Store module ${name} does not export a 'use...' function`)
+          throw new Error(
+            `Store module ${name} does not export a 'use...' function`,
+          )
         }
-        }))
+      }),
+    )
   }
 
   try {
@@ -364,7 +507,10 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
   }
 
   if (storageError) {
-    useInterfaceStore().pushGlobalNotice({ messageKey: 'errors.storage_unavailable', level: 'error' })
+    useInterfaceStore().pushGlobalNotice({
+      messageKey: 'errors.storage_unavailable',
+      level: 'error',
+    })
   }
 
   useInterfaceStore().setLayoutWidth(windowWidth())
@@ -376,12 +522,19 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
   window.addEventListener('focus', () => updateFocus())
 
   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 })
   try {
-    await useInterfaceStore().applyTheme().catch((e) => { console.error('Error setting theme', e) })
+    await useInterfaceStore()
+      .applyTheme()
+      .catch((e) => {
+        console.error('Error setting theme', e)
+      })
   } catch (e) {
     window.splashError(e)
     return Promise.reject(e)
@@ -395,8 +548,8 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
     checkOAuthToken({ store }),
     getInstancePanel({ store }),
     getNodeInfo({ store }),
-    getInstanceConfig({ store })
+    getInstanceConfig({ store }),
-  ]).catch(e => Promise.reject(e))
+  ]).catch((e) => Promise.reject(e))
 
   // Start fetching things that don't need to block the UI
   store.dispatch('fetchMutes')
@@ -409,11 +562,11 @@ const afterStoreSetup = async ({ pinia, store, storageError, 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 false
       }
       return savedPosition || { left: 0, top: 0 }
-    }
+    },
   })
 
   useI18nStore().setI18n(i18n)

src/boot/routes.js

@@ -1,35 +1,36 @@
-import PublicTimeline from 'components/public_timeline/public_timeline.vue'
-import BubbleTimeline from 'components/bubble_timeline/bubble_timeline.vue'
-import PublicAndExternalTimeline from 'components/public_and_external_timeline/public_and_external_timeline.vue'
-import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue'
-import TagTimeline from 'components/tag_timeline/tag_timeline.vue'
-import BookmarkTimeline from 'components/bookmark_timeline/bookmark_timeline.vue'
-import ConversationPage from 'components/conversation-page/conversation-page.vue'
-import Interactions from 'components/interactions/interactions.vue'
-import DMs from 'components/dm_timeline/dm_timeline.vue'
-import ChatList from 'components/chat_list/chat_list.vue'
-import Chat from 'components/chat/chat.vue'
-import UserProfile from 'components/user_profile/user_profile.vue'
-import Search from 'components/search/search.vue'
-import Registration from 'components/registration/registration.vue'
-import PasswordReset from 'components/password_reset/password_reset.vue'
-import FollowRequests from 'components/follow_requests/follow_requests.vue'
-import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
-import Notifications from 'components/notifications/notifications.vue'
-import AuthForm from 'components/auth_form/auth_form.js'
-import ShoutPanel from 'components/shout_panel/shout_panel.vue'
-import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
 import About from 'components/about/about.vue'
-import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
-import Lists from 'components/lists/lists.vue'
-import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
-import ListsEdit from 'components/lists_edit/lists_edit.vue'
-import NavPanel from 'src/components/nav_panel/nav_panel.vue'
 import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
-import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
+import AuthForm from 'components/auth_form/auth_form.js'
+import BookmarkTimeline from 'components/bookmark_timeline/bookmark_timeline.vue'
+import BubbleTimeline from 'components/bubble_timeline/bubble_timeline.vue'
+import Chat from 'components/chat/chat.vue'
+import ChatList from 'components/chat_list/chat_list.vue'
+import ConversationPage from 'components/conversation-page/conversation-page.vue'
+import DMs from 'components/dm_timeline/dm_timeline.vue'
 import Drafts from 'components/drafts/drafts.vue'
-import BookmarkFolders from '../components/bookmark_folders/bookmark_folders.vue'
+import FollowRequests from 'components/follow_requests/follow_requests.vue'
+import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue'
+import Interactions from 'components/interactions/interactions.vue'
+import Lists from 'components/lists/lists.vue'
+import ListsEdit from 'components/lists_edit/lists_edit.vue'
+import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
+import Notifications from 'components/notifications/notifications.vue'
+import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
+import PasswordReset from 'components/password_reset/password_reset.vue'
+import PublicAndExternalTimeline from 'components/public_and_external_timeline/public_and_external_timeline.vue'
+import PublicTimeline from 'components/public_timeline/public_timeline.vue'
+import Registration from 'components/registration/registration.vue'
+import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
+import Search from 'components/search/search.vue'
+import ShoutPanel from 'components/shout_panel/shout_panel.vue'
+import TagTimeline from 'components/tag_timeline/tag_timeline.vue'
+import UserProfile from 'components/user_profile/user_profile.vue'
+import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
+
+import NavPanel from 'src/components/nav_panel/nav_panel.vue'
 import BookmarkFolderEdit from '../components/bookmark_folder_edit/bookmark_folder_edit.vue'
+import BookmarkFolders from '../components/bookmark_folders/bookmark_folders.vue'
+import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
 
 export default (store) => {
   const validateAuthenticatedRoute = (to, from, next) => {
@@ -45,46 +46,124 @@ export default (store) => {
       name: 'root',
       path: '/',
       redirect: () => {
-        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: 'friends',
+      path: '/main/friends',
+      component: FriendsTimeline,
+      beforeEnter: validateAuthenticatedRoute,
     },
-    { name: 'public-external-timeline', path: '/main/all', component: PublicAndExternalTimeline },
-    { name: 'public-timeline', path: '/main/public', component: PublicTimeline },
-    { name: 'friends', path: '/main/friends', component: FriendsTimeline, beforeEnter: validateAuthenticatedRoute },
     { name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
     { name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
     { name: 'bubble', path: '/bubble', component: BubbleTimeline },
-    { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
+    {
+      name: 'conversation',
+      path: '/notice/:id',
+      component: ConversationPage,
+      meta: { dontScroll: true },
+    },
     { name: 'quotes', path: '/notice/:id/quotes', component: QuotesTimeline },
     {
       name: 'remote-user-profile-acct',
       path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',
       component: RemoteUserResolver,
-      beforeEnter: validateAuthenticatedRoute
+      beforeEnter: validateAuthenticatedRoute,
     },
     {
       name: 'remote-user-profile',
       path: '/remote-users/:hostname/:username',
       component: RemoteUserResolver,
-      beforeEnter: validateAuthenticatedRoute
+      beforeEnter: validateAuthenticatedRoute,
+    },
+    {
+      name: 'external-user-profile',
+      path: '/users/$:id',
+      component: UserProfile,
+    },
+    {
+      name: 'interactions',
+      path: '/users/:username/interactions',
+      component: Interactions,
+      beforeEnter: validateAuthenticatedRoute,
+    },
+    {
+      name: 'dms',
+      path: '/users/:username/dms',
+      component: DMs,
+      beforeEnter: validateAuthenticatedRoute,
     },
-    { name: 'external-user-profile', path: '/users/$:id', component: UserProfile },
-    { 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: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
+    {
-    { name: 'registration-token', path: '/registration/:token', component: Registration },
+      name: 'password-reset',
-    { name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
+      path: '/password-reset',
-    { name: 'notifications', path: '/:username/notifications', component: Notifications, props: () => ({ disableTeleport: true }), beforeEnter: validateAuthenticatedRoute },
+      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: 'shout-panel', path: '/shout-panel', component: ShoutPanel, props: () => ({ floating: false }) },
+    {
-    { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
+      name: 'shout-panel',
-    { name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
+      path: '/shout-panel',
-    { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
+      component: ShoutPanel,
+      props: () => ({ floating: false }),
+    },
+    {
+      name: 'oauth-callback',
+      path: '/oauth-callback',
+      component: OAuthCallback,
+      props: (route) => ({ code: route.query.code }),
+    },
+    {
+      name: 'search',
+      path: '/search',
+      component: Search,
+      props: (route) => ({ query: route.query.query }),
+    },
+    {
+      name: 'who-to-follow',
+      path: '/who-to-follow',
+      component: WhoToFollow,
+      beforeEnter: validateAuthenticatedRoute,
+    },
     { name: 'about', path: '/about', component: About },
-    { name: 'announcements', path: '/announcements', component: AnnouncementsPage },
+    {
+      name: 'announcements',
+      path: '/announcements',
+      component: AnnouncementsPage,
+    },
     { name: 'drafts', path: '/drafts', component: Drafts },
     { name: 'user-profile', path: '/users/:name', component: UserProfile },
     { name: 'legacy-user-profile', path: '/:name', component: UserProfile },
@@ -92,17 +171,51 @@ export default (store) => {
     { name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
     { name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
     { name: 'lists-new', path: '/lists/new', component: ListsEdit },
-    { name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute },
+    {
-    { name: 'bookmark-folders', path: '/bookmark_folders', component: BookmarkFolders },
+      name: 'edit-navigation',
-    { name: 'bookmark-folder-new', path: '/bookmarks/new-folder', component: BookmarkFolderEdit },
+      path: '/nav-edit',
-    { name: 'bookmark-folder', path: '/bookmarks/:id', component: BookmarkTimeline },
+      component: NavPanel,
-    { name: 'bookmark-folder-edit', path: '/bookmarks/:id/edit', component: BookmarkFolderEdit }
+      props: () => ({ forceExpand: true, forceEditMode: true }),
+      beforeEnter: validateAuthenticatedRoute,
+    },
+    {
+      name: 'bookmark-folders',
+      path: '/bookmark_folders',
+      component: BookmarkFolders,
+    },
+    {
+      name: 'bookmark-folder-new',
+      path: '/bookmarks/new-folder',
+      component: BookmarkFolderEdit,
+    },
+    {
+      name: 'bookmark-folder',
+      path: '/bookmarks/:id',
+      component: BookmarkTimeline,
+    },
+    {
+      name: 'bookmark-folder-edit',
+      path: '/bookmarks/:id/edit',
+      component: BookmarkFolderEdit,
+    },
   ]
 
   if (store.state.instance.pleromaChatMessagesAvailable) {
     routes = routes.concat([
-      { name: 'chat', path: '/users/:username/chats/:recipient_id', component: Chat, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute },
+      {
-      { name: 'chats', path: '/users/:username/chats', component: ChatList, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute }
+        name: 'chat',
+        path: '/users/:username/chats/:recipient_id',
+        component: Chat,
+        meta: { dontScroll: false },
+        beforeEnter: validateAuthenticatedRoute,
+      },
+      {
+        name: 'chats',
+        path: '/users/:username/chats',
+        component: ChatList,
+        meta: { dontScroll: false },
+        beforeEnter: validateAuthenticatedRoute,
+      },
     ])
   }
 

src/components/about/about.js

@@ -1,8 +1,8 @@
-import InstanceSpecificPanel from '../instance_specific_panel/instance_specific_panel.vue'
 import FeaturesPanel from '../features_panel/features_panel.vue'
-import TermsOfServicePanel from '../terms_of_service_panel/terms_of_service_panel.vue'
+import InstanceSpecificPanel from '../instance_specific_panel/instance_specific_panel.vue'
-import StaffPanel from '../staff_panel/staff_panel.vue'
 import MRFTransparencyPanel from '../mrf_transparency_panel/mrf_transparency_panel.vue'
+import StaffPanel from '../staff_panel/staff_panel.vue'
+import TermsOfServicePanel from '../terms_of_service_panel/terms_of_service_panel.vue'
 
 const About = {
   components: {
@@ -10,16 +10,20 @@ const About = {
     FeaturesPanel,
     TermsOfServicePanel,
     StaffPanel,
-    MRFTransparencyPanel
+    MRFTransparencyPanel,
   },
   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
-    }
+      )
-  }
+    },
+  },
 }
 
 export default About

src/components/account_actions/account_actions.js

@@ -1,27 +1,23 @@
 import { mapState } from 'vuex'
-import ProgressButton from '../progress_button/progress_button.vue'
-import Popover from '../popover/popover.vue'
-import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue'
-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
-import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faEllipsisV
-} from '@fortawesome/free-solid-svg-icons'
-import { useReportsStore } from 'src/stores/reports'
 
-library.add(
+import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue'
-  faEllipsisV
+import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
-)
+import { useReportsStore } from 'src/stores/reports'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
+import Popover from '../popover/popover.vue'
+import ProgressButton from '../progress_button/progress_button.vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faEllipsisV } from '@fortawesome/free-solid-svg-icons'
+
+library.add(faEllipsisV)
 
 const AccountActions = {
-  props: [
+  props: ['user', 'relationship'],
-    'user', 'relationship'
-  ],
   data() {
     return {
       showingConfirmBlock: false,
-      showingConfirmRemoveFollower: false
+      showingConfirmRemoveFollower: false,
     }
   },
   components: {
@@ -29,7 +25,7 @@ const AccountActions = {
     Popover,
     UserListMenu,
     ConfirmModal,
-    UserTimedFilterModal
+    UserTimedFilterModal,
   },
   methods: {
     showConfirmRemoveUserFromFollowers() {
@@ -82,9 +78,12 @@ const AccountActions = {
     openChat() {
       this.$router.push({
         name: 'chat',
-        params: { username: this.$store.state.users.currentUser.screen_name, recipient_id: this.user.id }
+        params: {
+          username: this.$store.state.users.currentUser.screen_name,
+          recipient_id: this.user.id,
+        },
       })
-    }
+    },
   },
   computed: {
     shouldConfirmBlock() {
@@ -94,10 +93,11 @@ const AccountActions = {
       return this.$store.getters.mergedConfig.modalOnRemoveUserFromFollowers
     },
     ...mapState({
-      blockExpirationSupported: state => state.instance.blockExpiration,
+      blockExpirationSupported: (state) => state.instance.blockExpiration,
-      pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
+      pleromaChatMessagesAvailable: (state) =>
-    })
+        state.instance.pleromaChatMessagesAvailable,
-  }
+    }),
+  },
 }
 
 export default AccountActions

src/components/alert.style.js

@@ -1,57 +1,51 @@
 export default {
   name: 'Alert',
   selector: '.alert',
-  validInnerComponents: [
+  validInnerComponents: ['Text', 'Icon', 'Link', 'Border', 'ButtonUnstyled'],
-    'Text',
-    'Icon',
-    'Link',
-    'Border',
-    'ButtonUnstyled'
-  ],
   variants: {
     normal: '.neutral',
     error: '.error',
     warning: '.warning',
-    success: '.success'
+    success: '.success',
   },
   editor: {
     border: 1,
-    aspect: '3 / 1'
+    aspect: '3 / 1',
   },
   defaultRules: [
     {
       directives: {
         background: '--text',
         opacity: 0.5,
-        blur: '9px'
+        blur: '9px',
-      }
+      },
     },
     {
       parent: {
-        component: 'Alert'
+        component: 'Alert',
       },
       component: 'Border',
       directives: {
-        textColor: '--parent'
+        textColor: '--parent',
-      }
+      },
     },
     {
       variant: 'error',
       directives: {
-        background: '--cRed'
+        background: '--cRed',
-      }
+      },
     },
     {
       variant: 'warning',
       directives: {
-        background: '--cOrange'
+        background: '--cOrange',
-      }
+      },
     },
     {
       variant: 'success',
       directives: {
-        background: '--cGreen'
+        background: '--cGreen',
-      }
+      },
-    }
+    },
-  ]
+  ],
 }

src/components/announcement/announcement.js

@@ -1,13 +1,14 @@
 import { mapState } from 'vuex'
+
+import { useAnnouncementsStore } from 'src/stores/announcements'
+import localeService from '../../services/locale/locale.service.js'
 import AnnouncementEditor from '../announcement_editor/announcement_editor.vue'
 import RichContent from '../rich_content/rich_content.jsx'
-import localeService from '../../services/locale/locale.service.js'
-import { useAnnouncementsStore } from 'src/stores/announcements'
 
 const Announcement = {
   components: {
     AnnouncementEditor,
-    RichContent
+    RichContent,
   },
   data() {
     return {
@@ -16,20 +17,25 @@ const Announcement = {
         content: '',
         startsAt: undefined,
         endsAt: undefined,
-        allDay: undefined
+        allDay: undefined,
       },
-      editError: ''
+      editError: '',
     }
   },
   props: {
-    announcement: Object
+    announcement: Object,
   },
   computed: {
     ...mapState({
-      currentUser: state => state.users.currentUser
+      currentUser: (state) => state.users.currentUser,
     }),
     canEditAnnouncement() {
-      return this.currentUser && this.currentUser.privileges.includes('announcements_manage_announcements')
+      return (
+        this.currentUser &&
+        this.currentUser.privileges.includes(
+          'announcements_manage_announcements',
+        )
+      )
     },
     content() {
       return this.announcement.content
@@ -43,7 +49,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
@@ -51,7 +60,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
@@ -59,16 +71,21 @@ 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
-    }
+    },
   },
   methods: {
     markAsRead() {
       if (!this.isRead) {
-        return useAnnouncementsStore().markAnnouncementAsRead(this.announcement.id)
+        return useAnnouncementsStore().markAnnouncementAsRead(
+          this.announcement.id,
+        )
       }
     },
     deleteAnnouncement() {
@@ -76,7 +93,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
@@ -86,14 +105,15 @@ const Announcement = {
       this.editing = true
     },
     submitEdit() {
-      useAnnouncementsStore().editAnnouncement({
+      useAnnouncementsStore()
+        .editAnnouncement({
           id: this.announcement.id,
-        ...this.editedAnnouncement
+          ...this.editedAnnouncement,
         })
         .then(() => {
           this.editing = false
         })
-        .catch(error => {
+        .catch((error) => {
           this.editError = error.error
         })
     },
@@ -102,8 +122,8 @@ const Announcement = {
     },
     clearError() {
       this.editError = undefined
-    }
+    },
-  }
+  },
 }
 
 export default Announcement

src/components/announcement_editor/announcement_editor.js

@@ -2,12 +2,12 @@ import Checkbox from '../checkbox/checkbox.vue'
 
 const AnnouncementEditor = {
   components: {
-    Checkbox
+    Checkbox,
   },
   props: {
     announcement: Object,
-    disabled: Boolean
+    disabled: Boolean,
-  }
+  },
 }
 
 export default AnnouncementEditor

src/components/announcements_page/announcements_page.js

@@ -1,12 +1,13 @@
 import { mapState } from 'vuex'
+
+import { useAnnouncementsStore } from 'src/stores/announcements'
 import Announcement from '../announcement/announcement.vue'
 import AnnouncementEditor from '../announcement_editor/announcement_editor.vue'
-import { useAnnouncementsStore } from 'src/stores/announcements'
 
 const AnnouncementsPage = {
   components: {
     Announcement,
-    AnnouncementEditor
+    AnnouncementEditor,
   },
   data() {
     return {
@@ -14,10 +15,10 @@ const AnnouncementsPage = {
         content: '',
         startsAt: undefined,
         endsAt: undefined,
-        allDay: false
+        allDay: false,
       },
       posting: false,
-      error: undefined
+      error: undefined,
     }
   },
   mounted() {
@@ -25,25 +26,31 @@ const AnnouncementsPage = {
   },
   computed: {
     ...mapState({
-      currentUser: state => state.users.currentUser
+      currentUser: (state) => state.users.currentUser,
     }),
     announcements() {
       return useAnnouncementsStore().announcements
     },
     canPostAnnouncement() {
-      return this.currentUser && this.currentUser.privileges.includes('announcements_manage_announcements')
+      return (
-    }
+        this.currentUser &&
+        this.currentUser.privileges.includes(
+          'announcements_manage_announcements',
+        )
+      )
+    },
   },
   methods: {
     postAnnouncement() {
       this.posting = true
-      useAnnouncementsStore().postAnnouncement(this.newAnnouncement)
+      useAnnouncementsStore()
+        .postAnnouncement(this.newAnnouncement)
         .then(() => {
           this.newAnnouncement.content = ''
           this.startsAt = undefined
           this.endsAt = undefined
         })
-        .catch(error => {
+        .catch((error) => {
           this.error = error.error
         })
         .finally(() => {
@@ -52,8 +59,8 @@ const AnnouncementsPage = {
     },
     clearError() {
       this.error = undefined
-    }
+    },
-  }
+  },
 }
 
 export default AnnouncementsPage

src/components/async_component_error/async_component_error.vue

@@ -23,8 +23,8 @@ export default {
   methods: {
     retry() {
       this.$emit('resetAsyncComponent')
-    }
+    },
-  }
+  },
 }
 </script>
 

src/components/attachment/attachment.js

@@ -1,24 +1,26 @@
-import StillImage from '../still-image/still-image.vue'
+import { mapGetters } from 'vuex'
-import Flash from '../flash/flash.vue'
+
-import VideoAttachment from '../video_attachment/video_attachment.vue'
+import { useMediaViewerStore } from 'src/stores/media_viewer'
 import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
-import { mapGetters } from 'vuex'
+import Flash from '../flash/flash.vue'
+import StillImage from '../still-image/still-image.vue'
+import VideoAttachment from '../video_attachment/video_attachment.vue'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
+  faAlignRight,
   faFile,
-  faMusic,
   faImage,
-  faVideo,
+  faMusic,
-  faPlayCircle,
-  faTimes,
-  faStop,
-  faSearchPlus,
-  faTrashAlt,
   faPencilAlt,
-  faAlignRight
+  faPlayCircle,
+  faSearchPlus,
+  faStop,
+  faTimes,
+  faTrashAlt,
+  faVideo,
 } from '@fortawesome/free-solid-svg-icons'
-import { useMediaViewerStore } from 'src/stores/media_viewer'
 
 library.add(
   faFile,
@@ -31,7 +33,7 @@ library.add(
   faSearchPlus,
   faTrashAlt,
   faPencilAlt,
-  faAlignRight
+  faAlignRight,
 )
 
 const Attachment = {
@@ -46,7 +48,7 @@ const Attachment = {
     'remove',
     'shiftUp',
     'shiftDn',
-    'edit'
+    'edit',
   ],
   data() {
     return {
@@ -55,17 +57,19 @@ 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,
-      showDescription: false
+      showDescription: false,
     }
   },
   components: {
     Flash,
     StillImage,
-    VideoAttachment
+    VideoAttachment,
   },
   computed: {
     classNames() {
@@ -74,11 +78,11 @@ const Attachment = {
           '-loading': this.loading,
           '-nsfw-placeholder': this.hidden,
           '-editable': this.edit !== undefined,
-          '-compact': this.compact
+          '-compact': this.compact,
         },
         '-type-' + this.type,
         this.size && '-size-' + this.size,
-        `-${this.useContainFit ? 'contain' : 'cover'}-fit`
+        `-${this.useContainFit ? 'contain' : 'cover'}-fit`,
       ]
     },
     usePlaceholder() {
@@ -109,7 +113,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 = []
@@ -129,7 +133,7 @@ const Attachment = {
     videoTag() {
       return this.useModal ? 'button' : 'span'
     },
-    ...mapGetters(['mergedConfig'])
+    ...mapGetters(['mergedConfig']),
   },
   watch: {
     'attachment.description'(newVal) {
@@ -137,7 +141,7 @@ const Attachment = {
     },
     localDescription(newVal) {
       this.onEdit(newVal)
-    }
+    },
   },
   methods: {
     linkClicked({ target }) {
@@ -180,7 +184,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)
@@ -205,8 +210,8 @@ const Attachment = {
       const width = image.naturalWidth
       const height = image.naturalHeight
       this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height })
-    }
+    },
-  }
+  },
 }
 
 export default Attachment

src/components/auth_form/auth_form.js

@@ -1,9 +1,10 @@
+import { mapState } from 'pinia'
 import { h, resolveComponent } from 'vue'
+
+import { useAuthFlowStore } from 'src/stores/auth_flow'
 import LoginForm from '../login_form/login_form.vue'
 import MFARecoveryForm from '../mfa_form/recovery_form.vue'
 import MFATOTPForm from '../mfa_form/totp_form.vue'
-import { mapState } from 'pinia'
-import { useAuthFlowStore } from 'src/stores/auth_flow'
 
 const AuthForm = {
   name: 'AuthForm',
@@ -12,17 +13,21 @@ 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'
     },
-    ...mapState(useAuthFlowStore, ['requiredTOTP', 'requiredRecovery'])
+    ...mapState(useAuthFlowStore, ['requiredTOTP', 'requiredRecovery']),
   },
   components: {
     MFARecoveryForm,
     MFATOTPForm,
-    LoginForm
+    LoginForm,
-  }
+  },
 }
 
 export default AuthForm

src/components/autosuggest/autosuggest.js

@@ -2,35 +2,37 @@ 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
+      required: true,
     },
-    filter: { // function to filter results in real time
+    filter: {
-      type: Function
+      // function to filter results in real time
+      type: Function,
     },
     placeholder: {
       type: String,
-      default: 'Search...'
+      default: 'Search...',
-    }
+    },
   },
   data() {
     return {
       term: '',
       timeout: null,
       results: [],
-      resultsVisible: false
+      resultsVisible: false,
     }
   },
   computed: {
     filtered() {
       return this.filter ? this.filter(this.results) : this.results
-    }
+    },
   },
   watch: {
     term(val) {
       this.fetchResults(val)
-    }
+    },
   },
   methods: {
     fetchResults(term) {
@@ -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)
     },
@@ -47,6 +51,6 @@ export default {
     },
     onClickOutside() {
       this.resultsVisible = false
-    }
+    },
-  }
+  },
 }

src/components/avatar_list/avatar_list.js

@@ -1,21 +1,25 @@
-import UserAvatar from '../user_avatar/user_avatar.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import UserAvatar from '../user_avatar/user_avatar.vue'
 
 const AvatarList = {
   props: ['users'],
   computed: {
     slicedUsers() {
       return this.users ? this.users.slice(0, 15) : []
-    }
+    },
   },
   components: {
-    UserAvatar
+    UserAvatar,
   },
   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,
+      )
+    },
+  },
 }
 
 export default AvatarList

src/components/badge.style.js

@@ -1,30 +1,27 @@
 export default {
   name: 'Badge',
   selector: '.badge',
-  validInnerComponents: [
+  validInnerComponents: ['Text', 'Icon'],
-    'Text',
-    'Icon'
-  ],
   variants: {
-    notification: '.-notification'
+    notification: '.-notification',
   },
   defaultRules: [
     {
       component: 'Root',
       directives: {
-        '--badgeNotification': 'color | --cRed'
+        '--badgeNotification': 'color | --cRed',
-      }
+      },
     },
     {
       directives: {
-        background: '--cGreen'
+        background: '--cGreen',
-      }
+      },
     },
     {
       variant: 'notification',
       directives: {
-        background: '--cRed'
+        background: '--cRed',
-      }
+      },
-    }
+    },
-  ]
+  ],
 }

src/components/basic_user_card/basic_user_card.js

@@ -1,24 +1,26 @@
-import UserPopover from '../user_popover/user_popover.vue'
-import UserAvatar from '../user_avatar/user_avatar.vue'
-import UserLink from '../user_link/user_link.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import UserAvatar from '../user_avatar/user_avatar.vue'
+import UserLink from '../user_link/user_link.vue'
+import UserPopover from '../user_popover/user_popover.vue'
 
 const BasicUserCard = {
-  props: [
+  props: ['user'],
-    'user'
-  ],
   components: {
     UserPopover,
     UserAvatar,
     RichContent,
-    UserLink
+    UserLink,
   },
   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,
+      )
+    },
+  },
 }
 
 export default BasicUserCard

src/components/block_card/block_card.js

@@ -20,14 +20,16 @@ const BlockCard = {
     blockExpiry() {
       return this.user.block_expires_at == null
         ? this.$t('user_card.block_expires_forever')
-        : this.$t('user_card.block_expires_at', [new Date(this.user.mute_expires_at).toLocaleString()])
+        : this.$t('user_card.block_expires_at', [
+            new Date(this.user.mute_expires_at).toLocaleString(),
+          ])
     },
     ...mapState({
-      blockExpirationSupported: state => state.instance.blockExpiration,
+      blockExpirationSupported: (state) => state.instance.blockExpiration,
-    })
+    }),
   },
   components: {
-    BasicUserCard
+    BasicUserCard,
   },
   methods: {
     unblockUser() {
@@ -39,8 +41,8 @@ const BlockCard = {
       } else {
         this.$store.dispatch('blockUser', { id: this.user.id })
       }
-    }
+    },
-  }
+  },
 }
 
 export default BlockCard

src/components/bookmark_folder_card/bookmark_folder_card.js

@@ -1,22 +1,15 @@
 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 BookmarkFolderCard = {
-  props: [
+  props: ['folder', 'allBookmarks'],
-    'folder',
-    'allBookmarks'
-  ],
   computed: {
     firstLetter() {
       return this.folder ? this.folder.name[0] : null
-    }
+    },
-  }
+  },
 }
 
 export default BookmarkFolderCard

src/components/bookmark_folder_edit/bookmark_folder_edit.js

@@ -1,7 +1,7 @@
-import EmojiPicker from '../emoji_picker/emoji_picker.vue'
-import apiService from '../../services/api/api.service'
-import { useInterfaceStore } from 'src/stores/interface'
 import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
+import { useInterfaceStore } from 'src/stores/interface'
+import apiService from '../../services/api/api.service'
+import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 
 const BookmarkFolderEdit = {
   data() {
@@ -13,18 +13,17 @@ const BookmarkFolderEdit = {
       emojiDraft: '',
       emojiUrlDraft: null,
       emojiPickerExpanded: false,
-      reallyDelete: false
+      reallyDelete: false,
     }
   },
   components: {
-    EmojiPicker
+    EmojiPicker,
   },
   created() {
     if (!this.id) return
     const credentials = this.$store.state.users.currentUser.credentials
-    apiService.fetchBookmarkFolders({ credentials })
+    apiService.fetchBookmarkFolders({ credentials }).then((folders) => {
-      .then((folders) => {
+      const folder = folders.find((folder) => folder.id === this.id)
-        const folder = folders.find(folder => folder.id === this.id)
       if (!folder) return
 
       this.nameDraft = this.name = folder.name
@@ -35,7 +34,7 @@ const BookmarkFolderEdit = {
   computed: {
     id() {
       return this.$route.params.id
-    }
+    },
   },
   methods: {
     selectEmoji(event) {
@@ -54,13 +53,19 @@ const BookmarkFolderEdit = {
       this.emojiPickerExpanded = false
     },
     updateFolder() {
-      useBookmarkFoldersStore().updateBookmarkFolder({ folderId: this.id, name: this.nameDraft, emoji: this.emojiDraft })
+      useBookmarkFoldersStore()
+        .updateBookmarkFolder({
+          folderId: this.id,
+          name: this.nameDraft,
+          emoji: this.emojiDraft,
+        })
         .then(() => {
           this.$router.push({ name: 'bookmark-folders' })
         })
     },
     createFolder() {
-      useBookmarkFoldersStore().createBookmarkFolder({ name: this.nameDraft, emoji: this.emojiDraft })
+      useBookmarkFoldersStore()
+        .createBookmarkFolder({ name: this.nameDraft, emoji: this.emojiDraft })
         .then(() => {
           this.$router.push({ name: 'bookmark-folders' })
         })
@@ -68,15 +73,15 @@ const BookmarkFolderEdit = {
           useInterfaceStore().pushGlobalNotice({
             messageKey: 'bookmark_folders.error',
             messageArgs: [e.message],
-            level: 'error'
+            level: 'error',
           })
         })
     },
     deleteFolder() {
       useBookmarkFoldersStore().deleteBookmarkFolder({ folderId: this.id })
       this.$router.push({ name: 'bookmark-folders' })
-    }
+    },
-  }
+  },
 }
 
 export default BookmarkFolderEdit

src/components/bookmark_folders/bookmark_folders.js

@@ -1,19 +1,19 @@
-import BookmarkFolderCard from '../bookmark_folder_card/bookmark_folder_card.vue'
 import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
+import BookmarkFolderCard from '../bookmark_folder_card/bookmark_folder_card.vue'
 
 const BookmarkFolders = {
   data() {
     return {
-      isNew: false
+      isNew: false,
     }
   },
   components: {
-    BookmarkFolderCard
+    BookmarkFolderCard,
   },
   computed: {
     bookmarkFolders() {
       return useBookmarkFoldersStore().allFolders
-    }
+    },
   },
   methods: {
     cancelNewFolder() {
@@ -21,8 +21,8 @@ const BookmarkFolders = {
     },
     newFolder() {
       this.isNew = true
-    }
+    },
-  }
+  },
 }
 
 export default BookmarkFolders

src/components/bookmark_folders_menu/bookmark_folders_menu_content.js

@@ -1,20 +1,19 @@
 import { mapState } from 'pinia'
-import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
+
 import { getBookmarkFolderEntries } from 'src/components/navigation/filter.js'
+import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
 import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 
 export const BookmarkFoldersMenuContent = {
-  props: [
+  props: ['showPin'],
-    'showPin'
-  ],
   components: {
-    NavigationEntry
+    NavigationEntry,
   },
   computed: {
     ...mapState(useBookmarkFoldersStore, {
-      folders: getBookmarkFolderEntries
+      folders: getBookmarkFolderEntries,
-    })
+    }),
-  }
+  },
 }
 
 export default BookmarkFoldersMenuContent

src/components/bookmark_timeline/bookmark_timeline.js

@@ -3,10 +3,13 @@ import Timeline from '../timeline/timeline.vue'
 const Bookmarks = {
   created() {
     this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
-    this.$store.dispatch('startFetchingTimeline', { timeline: 'bookmarks', bookmarkFolderId: this.folderId || null })
+    this.$store.dispatch('startFetchingTimeline', {
+      timeline: 'bookmarks',
+      bookmarkFolderId: this.folderId || null,
+    })
   },
   components: {
-    Timeline
+    Timeline,
   },
   computed: {
     folderId() {
@@ -14,19 +17,22 @@ const Bookmarks = {
     },
     timeline() {
       return this.$store.state.statuses.timelines.bookmarks
-    }
+    },
   },
   watch: {
     folderId() {
       this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
       this.$store.dispatch('stopFetchingTimeline', 'bookmarks')
-      this.$store.dispatch('startFetchingTimeline', { timeline: 'bookmarks', bookmarkFolderId: this.folderId || null })
+      this.$store.dispatch('startFetchingTimeline', {
-    }
+        timeline: 'bookmarks',
+        bookmarkFolderId: this.folderId || null,
+      })
+    },
   },
   unmounted() {
     this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
     this.$store.dispatch('stopFetchingTimeline', 'bookmarks')
-  }
+  },
 }
 
 export default Bookmarks

src/components/border.style.js

@@ -6,8 +6,8 @@ export default {
     {
       directives: {
         textColor: '$mod(--parent 10)',
-        textAuto: 'no-auto'
+        textAuto: 'no-auto',
-      }
+      },
-    }
+    },
-  ]
+  ],
 }

src/components/bubble_timeline/bubble_timeline.js

@@ -1,18 +1,20 @@
 import Timeline from '../timeline/timeline.vue'
+
 const BubbleTimeline = {
   components: {
-    Timeline
+    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' })
   },
   unmounted() {
     this.$store.dispatch('stopFetchingTimeline', 'bubble')
-  }
+  },
-
 }
 
 export default BubbleTimeline

src/components/button.style.js

@@ -12,25 +12,22 @@ export default {
     focused: ':focus-within',
     pressed: ':active',
     hover: ':is(:hover, :focus-visible):not(:disabled)',
-    disabled: ':disabled'
+    disabled: ':disabled',
   },
   // Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
   variants: {
     // Variants save on computation time since adding new variant just adds one more "set".
     // normal: '', // you can override normal variant, it will be appenended to the main class
     danger: '.-danger',
-    transparent: '.-transparent'
+    transparent: '.-transparent',
     // Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
     // This (currently) is further multipled by number of places where component can exist.
   },
   editor: {
-    aspect: '2 / 1'
+    aspect: '2 / 1',
   },
   // This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever).
-  validInnerComponents: [
+  validInnerComponents: ['Text', 'Icon'],
-    'Text',
-    'Icon'
-  ],
   // Default rules, used as "default theme", essentially.
   defaultRules: [
     {
@@ -39,9 +36,11 @@ export default {
         '--buttonDefaultHoverGlow': 'shadow | 0 0 1 2 --text / 0.4',
         '--buttonDefaultFocusGlow': 'shadow | 0 0 1 2 --link / 0.5',
         '--buttonDefaultShadow': 'shadow | 0 0 2 #000000',
-        '--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 1), $borderSide(#000000 bottom 0.2 1)',
+        '--buttonDefaultBevel':
-        '--buttonPressedBevel': 'shadow | inset 0 0 4 #000000, $borderSide(#FFFFFF bottom 0.2 1), $borderSide(#000000 top 0.2 1)'
+          'shadow | $borderSide(#FFFFFF top 0.2 1), $borderSide(#000000 bottom 0.2 1)',
-      }
+        '--buttonPressedBevel':
+          'shadow | inset 0 0 4 #000000, $borderSide(#FFFFFF bottom 0.2 1), $borderSide(#000000 top 0.2 1)',
+      },
     },
     {
       // component: 'Button', // no need to specify components every time unless you're specifying how other component should look
@@ -49,128 +48,128 @@ export default {
       directives: {
         background: '--fg',
         shadow: ['--buttonDefaultShadow', '--buttonDefaultBevel'],
-        roundness: 3
+        roundness: 3,
-      }
+      },
     },
     {
       variant: 'danger',
       directives: {
-        background: '--cRed'
+        background: '--cRed',
-      }
+      },
     },
     {
       variant: 'transparent',
       directives: {
-        opacity: 0.5
+        opacity: 0.5,
-      }
+      },
     },
     {
       component: 'Text',
       parent: {
         component: 'Button',
-        variant: 'transparent'
+        variant: 'transparent',
       },
       directives: {
-        textColor: '--text'
+        textColor: '--text',
-      }
+      },
     },
     {
       component: 'Icon',
       parent: {
         component: 'Button',
-        variant: 'transparent'
+        variant: 'transparent',
       },
       directives: {
-        textColor: '--text'
+        textColor: '--text',
-      }
+      },
     },
     {
       state: ['hover'],
       directives: {
-        shadow: ['--buttonDefaultHoverGlow', '--buttonDefaultBevel']
+        shadow: ['--buttonDefaultHoverGlow', '--buttonDefaultBevel'],
-      }
+      },
     },
     {
       state: ['focused'],
       directives: {
-        shadow: ['--buttonDefaultFocusGlow', '--buttonDefaultBevel']
+        shadow: ['--buttonDefaultFocusGlow', '--buttonDefaultBevel'],
-      }
+      },
     },
     {
       state: ['pressed'],
       directives: {
-        shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
+        shadow: ['--buttonDefaultShadow', '--buttonPressedBevel'],
-      }
+      },
     },
     {
       state: ['pressed', 'hover'],
       directives: {
-        shadow: ['--buttonPressedBevel', '--buttonDefaultHoverGlow']
+        shadow: ['--buttonPressedBevel', '--buttonDefaultHoverGlow'],
-      }
+      },
     },
     {
       state: ['toggled'],
       directives: {
         background: '--accent,-24.2',
-        shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
+        shadow: ['--buttonDefaultShadow', '--buttonPressedBevel'],
-      }
+      },
     },
     {
       state: ['toggled', 'hover'],
       directives: {
         background: '--accent,-24.2',
-        shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
+        shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel'],
-      }
+      },
     },
     {
       state: ['toggled', 'focused'],
       directives: {
         background: '--accent,-24.2',
-        shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
+        shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel'],
-      }
+      },
     },
     {
       state: ['toggled', 'hover', 'focused'],
       directives: {
         background: '--accent,-24.2',
-        shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
+        shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel'],
-      }
+      },
     },
     {
       state: ['toggled', 'disabled'],
       directives: {
         background: '$blend(--accent 0.25 --parent)',
-        shadow: ['--buttonPressedBevel']
+        shadow: ['--buttonPressedBevel'],
-      }
+      },
     },
     {
       state: ['disabled'],
       directives: {
         background: '$blend(--inheritedBackground 0.25 --parent)',
-        shadow: ['--buttonDefaultBevel']
+        shadow: ['--buttonDefaultBevel'],
-      }
+      },
     },
     {
       component: 'Text',
       parent: {
         component: 'Button',
-        state: ['disabled']
+        state: ['disabled'],
       },
       directives: {
         textOpacity: 0.25,
-        textOpacityMode: 'blend'
+        textOpacityMode: 'blend',
-      }
+      },
     },
     {
       component: 'Icon',
       parent: {
         component: 'Button',
-        state: ['disabled']
+        state: ['disabled'],
       },
       directives: {
         textOpacity: 0.25,
-        textOpacityMode: 'blend'
+        textOpacityMode: 'blend',
-      }
+      },
-    }
+    },
-  ]
+  ],
 }

src/components/button_unstyled.style.js

@@ -7,91 +7,86 @@ export default {
     toggled: '.toggled',
     disabled: ':disabled',
     hover: ':is(:hover, :focus-visible):not(:disabled)',
-    focused: ':focus-within:not(:is(:focus-visible))'
+    focused: ':focus-within:not(:is(:focus-visible))',
   },
-  validInnerComponents: [
+  validInnerComponents: ['Text', 'Link', 'Icon', 'Badge'],
-    'Text',
-    'Link',
-    'Icon',
-    'Badge'
-  ],
   defaultRules: [
     {
       directives: {
-        shadow: []
+        shadow: [],
-      }
+      },
     },
     {
       component: 'Icon',
       parent: {
         component: 'ButtonUnstyled',
-        state: ['hover']
+        state: ['hover'],
       },
       directives: {
-        textColor: '--parent--text'
+        textColor: '--parent--text',
-      }
+      },
     },
     {
       component: 'Icon',
       parent: {
         component: 'ButtonUnstyled',
-        state: ['toggled']
+        state: ['toggled'],
       },
       directives: {
-        textColor: '--parent--text'
+        textColor: '--parent--text',
-      }
+      },
     },
     {
       component: 'Icon',
       parent: {
         component: 'ButtonUnstyled',
-        state: ['toggled', 'hover']
+        state: ['toggled', 'hover'],
       },
       directives: {
-        textColor: '--parent--text'
+        textColor: '--parent--text',
-      }
+      },
     },
     {
       component: 'Icon',
       parent: {
         component: 'ButtonUnstyled',
-        state: ['toggled', 'focused']
+        state: ['toggled', 'focused'],
       },
       directives: {
-        textColor: '--parent--text'
+        textColor: '--parent--text',
-      }
+      },
     },
     {
       component: 'Icon',
       parent: {
         component: 'ButtonUnstyled',
-        state: ['toggled', 'focused', 'hover']
+        state: ['toggled', 'focused', 'hover'],
       },
       directives: {
-        textColor: '--parent--text'
+        textColor: '--parent--text',
-      }
+      },
     },
     {
       component: 'Text',
       parent: {
         component: 'ButtonUnstyled',
-        state: ['disabled']
+        state: ['disabled'],
       },
       directives: {
         textOpacity: 0.25,
-        textOpacityMode: 'blend'
+        textOpacityMode: 'blend',
-      }
+      },
     },
     {
       component: 'Icon',
       parent: {
         component: 'ButtonUnstyled',
-        state: ['disabled']
+        state: ['disabled'],
       },
       directives: {
         textOpacity: 0.25,
-        textOpacityMode: 'blend'
+        textOpacityMode: 'blend',
-      }
+      },
-    }
+    },
-  ]
+  ],
 }

src/components/chat/chat.js

@@ -1,25 +1,26 @@
 import _ from 'lodash'
-import { WSConnectionStatus } from '../../services/api/api.service.js'
-import { mapGetters, mapState } from 'vuex'
 import { mapState as mapPiniaState } from 'pinia'
-import ChatMessage from '../chat_message/chat_message.vue'
+import { mapGetters, mapState } from 'vuex'
-import PostStatusForm from '../post_status_form/post_status_form.vue'
-import ChatTitle from '../chat_title/chat_title.vue'
-import chatService from '../../services/chat_service/chat_service.js'
-import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
-import { getScrollPosition, getNewTopPosition, isBottomedOut, isScrollable } from './chat_layout_utils.js'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown,
-  faChevronLeft
-} from '@fortawesome/free-solid-svg-icons'
-import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'
-import { useInterfaceStore } from 'src/stores/interface.js'
 
-library.add(
+import { useInterfaceStore } from 'src/stores/interface.js'
-  faChevronDown,
+import { WSConnectionStatus } from '../../services/api/api.service.js'
-  faChevronLeft
+import chatService from '../../services/chat_service/chat_service.js'
-)
+import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'
+import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
+import ChatMessage from '../chat_message/chat_message.vue'
+import ChatTitle from '../chat_title/chat_title.vue'
+import PostStatusForm from '../post_status_form/post_status_form.vue'
+import {
+  getNewTopPosition,
+  getScrollPosition,
+  isBottomedOut,
+  isScrollable,
+} from './chat_layout_utils.js'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faChevronDown, faChevronLeft } from '@fortawesome/free-solid-svg-icons'
+
+library.add(faChevronDown, faChevronLeft)
 
 const BOTTOMED_OUT_OFFSET = 10
 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10
@@ -31,7 +32,7 @@ const Chat = {
   components: {
     ChatMessage,
     ChatTitle,
-    PostStatusForm
+    PostStatusForm,
   },
   data() {
     return {
@@ -40,7 +41,7 @@ const Chat = {
       lastScrollPosition: {},
       scrollableContainerHeight: '100%',
       errorLoadingChat: false,
-      messageRetriers: {}
+      messageRetriers: {},
     }
   },
   created() {
@@ -50,7 +51,11 @@ const Chat = {
   mounted() {
     window.addEventListener('scroll', this.handleScroll)
     if (typeof document.hidden !== 'undefined') {
-      document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
+      document.addEventListener(
+        'visibilitychange',
+        this.handleVisibilityChange,
+        false,
+      )
     }
 
     this.$nextTick(() => {
@@ -60,7 +65,12 @@ const Chat = {
   unmounted() {
     window.removeEventListener('scroll', this.handleScroll)
     window.removeEventListener('resize', this.handleResize)
-    if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
+    if (typeof document.hidden !== 'undefined')
+      document.removeEventListener(
+        'visibilitychange',
+        this.handleVisibilityChange,
+        false,
+      )
     this.$store.dispatch('clearCurrentChat')
   },
   computed: {
@@ -72,7 +82,9 @@ const Chat = {
     },
     formPlaceholder() {
       if (this.recipient) {
-        return this.$t('chats.message_user', { nickname: this.recipient.screen_name_ui })
+        return this.$t('chats.message_user', {
+          nickname: this.recipient.screen_name_ui,
+        })
       } else {
         return ''
       }
@@ -81,25 +93,31 @@ const Chat = {
       return chatService.getView(this.currentChatMessageService)
     },
     newMessageCount() {
-      return this.currentChatMessageService && this.currentChatMessageService.newMessageCount
+      return (
+        this.currentChatMessageService &&
+        this.currentChatMessageService.newMessageCount
+      )
     },
     streamingEnabled() {
-      return this.mergedConfig.useStreamingApi && this.mastoUserSocketStatus === WSConnectionStatus.JOINED
+      return (
+        this.mergedConfig.useStreamingApi &&
+        this.mastoUserSocketStatus === WSConnectionStatus.JOINED
+      )
     },
     ...mapGetters([
       'currentChat',
       'currentChatMessageService',
       'findOpenedChatByRecipientId',
-      'mergedConfig'
+      'mergedConfig',
     ]),
     ...mapPiniaState(useInterfaceStore, {
-      mobileLayout: store => store.layoutType === 'mobile'
+      mobileLayout: (store) => store.layoutType === 'mobile',
     }),
     ...mapState({
-      backendInteractor: state => state.api.backendInteractor,
+      backendInteractor: (state) => state.api.backendInteractor,
-      mastoUserSocketStatus: state => state.api.mastoUserSocketStatus,
+      mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
-      currentUser: state => state.users.currentUser
+      currentUser: (state) => state.users.currentUser,
-    })
+    }),
   },
   watch: {
     chatViewItems() {
@@ -119,7 +137,7 @@ const Chat = {
       if (newValue === WSConnectionStatus.JOINED) {
         this.fetchChat({ isFirstFetch: true })
       }
-    }
+    },
   },
   methods: {
     // Used to animate the avatar near the first message of the message chain when any message belonging to the chain is hovered
@@ -163,19 +181,30 @@ const Chat = {
     scrollDown(options = {}) {
       const { behavior = 'auto', forceRead = false } = options
       this.$nextTick(() => {
-        window.scrollTo({ top: document.documentElement.scrollHeight, behavior })
+        window.scrollTo({
+          top: document.documentElement.scrollHeight,
+          behavior,
+        })
       })
       if (forceRead) {
         this.readChat()
       }
     },
     readChat() {
-      if (!(this.currentChatMessageService && this.currentChatMessageService.maxId)) { return }
+      if (
-      if (document.hidden) { return }
+        !(
+          this.currentChatMessageService && this.currentChatMessageService.maxId
+        )
+      ) {
+        return
+      }
+      if (document.hidden) {
+        return
+      }
       const lastReadId = this.currentChatMessageService.maxId
       this.$store.dispatch('readChat', {
         id: this.currentChat.id,
-        lastReadId
+        lastReadId,
       })
     },
     bottomedOut(offset) {
@@ -187,13 +216,18 @@ const Chat = {
     cullOlderCheck() {
       window.setTimeout(() => {
         if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
-          this.$store.dispatch('cullOlderMessages', this.currentChatMessageService.chatId)
+          this.$store.dispatch(
+            'cullOlderMessages',
+            this.currentChatMessageService.chatId,
+          )
         }
       }, 5000)
     },
     handleScroll: _.throttle(function () {
       this.lastScrollPosition = getScrollPosition()
-      if (!this.currentChat) { return }
+      if (!this.currentChat) {
+        return
+      }
 
       if (this.reachedTop()) {
         this.fetchChat({ maxId: this.currentChatMessageService.minId })
@@ -216,19 +250,24 @@ const Chat = {
     handleScrollUp(positionBeforeLoading) {
       const positionAfterLoading = getScrollPosition()
       window.scrollTo({
-        top: getNewTopPosition(positionBeforeLoading, positionAfterLoading)
+        top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
       })
     },
     fetchChat({ isFirstFetch = false, fetchLatest = false, maxId }) {
       const chatMessageService = this.currentChatMessageService
-      if (!chatMessageService) { return }
+      if (!chatMessageService) {
-      if (fetchLatest && this.streamingEnabled) { return }
+        return
+      }
+      if (fetchLatest && this.streamingEnabled) {
+        return
+      }
 
       const chatId = chatMessageService.chatId
       const fetchOlderMessages = !!maxId
       const sinceId = fetchLatest && chatMessageService.maxId
 
-      return this.backendInteractor.chatMessages({ id: chatId, maxId, sinceId })
+      return this.backendInteractor
+        .chatMessages({ id: chatId, maxId, sinceId })
         .then((messages) => {
           // Clear the current chat in case we're recovering from a ws connection loss.
           if (isFirstFetch) {
@@ -236,7 +275,9 @@ const Chat = {
           }
 
           const positionBeforeUpdate = getScrollPosition()
-          this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => {
+          this.$store
+            .dispatch('addChatMessages', { chatId, messages })
+            .then(() => {
               this.$nextTick(() => {
                 if (fetchOlderMessages) {
                   this.handleScrollUp(positionBeforeUpdate)
@@ -247,7 +288,9 @@ const Chat = {
                 // If this is the case, we want to fetch the messages until the scrollable container
                 // is fully populated so that the user has the ability to scroll up and load the history.
                 if (!isScrollable() && messages.length > 0) {
-                this.fetchChat({ maxId: this.currentChatMessageService.minId })
+                  this.fetchChat({
+                    maxId: this.currentChatMessageService.minId,
+                  })
                 }
               })
             })
@@ -257,7 +300,9 @@ const Chat = {
       let chat = this.findOpenedChatByRecipientId(this.recipientId)
       if (!chat) {
         try {
-          chat = await this.backendInteractor.getOrCreateChat({ accountId: this.recipientId })
+          chat = await this.backendInteractor.getOrCreateChat({
+            accountId: this.recipientId,
+          })
         } catch (e) {
           console.error('Error creating or getting a chat', e)
           this.errorLoadingChat = true
@@ -273,7 +318,8 @@ const Chat = {
     },
     doStartFetching() {
       this.$store.dispatch('startFetchingCurrentChat', {
-        fetcher: () => promiseInterval(() => this.fetchChat({ fetchLatest: true }), 5000)
+        fetcher: () =>
+          promiseInterval(() => this.fetchChat({ fetchLatest: true }), 5000),
       })
       this.fetchChat({ isFirstFetch: true })
     },
@@ -289,7 +335,7 @@ const Chat = {
       const params = {
         id: this.currentChat.id,
         content: status,
-        idempotencyKey
+        idempotencyKey,
       }
 
       if (media[0]) {
@@ -301,42 +347,59 @@ const Chat = {
         chatId: this.currentChat.id,
         content: status,
         userId: this.currentUser.id,
-        idempotencyKey
+        idempotencyKey,
       })
 
-      this.$store.dispatch('addChatMessages', {
+      this.$store
+        .dispatch('addChatMessages', {
           chatId: this.currentChat.id,
-        messages: [fakeMessage]
+          messages: [fakeMessage],
-      }).then(() => {
+        })
+        .then(() => {
           this.handleAttachmentPosting()
         })
 
-      return this.doSendMessage({ params, fakeMessage, retriesLeft: MAX_RETRIES })
+      return this.doSendMessage({
+        params,
+        fakeMessage,
+        retriesLeft: MAX_RETRIES,
+      })
     },
     doSendMessage({ params, fakeMessage, retriesLeft = MAX_RETRIES }) {
       if (retriesLeft <= 0) return
 
-      this.backendInteractor.sendChatMessage(params)
+      this.backendInteractor
-        .then(data => {
+        .sendChatMessage(params)
+        .then((data) => {
           this.$store.dispatch('addChatMessages', {
             chatId: this.currentChat.id,
             updateMaxId: false,
-            messages: [{ ...data, fakeId: fakeMessage.id }]
+            messages: [{ ...data, fakeId: fakeMessage.id }],
           })
 
           return data
         })
-        .catch(error => {
+        .catch((error) => {
           console.error('Error sending message', error)
           this.$store.dispatch('handleMessageError', {
             chatId: this.currentChat.id,
             fakeId: fakeMessage.id,
-            isRetry: retriesLeft !== MAX_RETRIES
+            isRetry: retriesLeft !== MAX_RETRIES,
           })
-          if ((error.statusCode >= 500 && error.statusCode < 600) || error.message === 'Failed to fetch') {
+          if (
-            this.messageRetriers[fakeMessage.id] = setTimeout(() => {
+            (error.statusCode >= 500 && error.statusCode < 600) ||
-              this.doSendMessage({ params, fakeMessage, retriesLeft: retriesLeft - 1 })
+            error.message === 'Failed to fetch'
-            }, 1000 * (2 ** (MAX_RETRIES - retriesLeft)))
+          ) {
+            this.messageRetriers[fakeMessage.id] = setTimeout(
+              () => {
+                this.doSendMessage({
+                  params,
+                  fakeMessage,
+                  retriesLeft: retriesLeft - 1,
+                })
+              },
+              1000 * 2 ** (MAX_RETRIES - retriesLeft),
+            )
           }
           return {}
         })
@@ -344,9 +407,12 @@ const Chat = {
       return Promise.resolve(fakeMessage)
     },
     goBack() {
-      this.$router.push({ name: 'chats', params: { username: this.currentUser.screen_name } })
+      this.$router.push({
-    }
+        name: 'chats',
-  }
+        params: { username: this.currentUser.screen_name },
+      })
+    },
+  },
 }
 
 export default Chat

src/components/chat/chat.style.js

@@ -1,19 +1,13 @@
 export default {
   name: 'Chat',
   selector: '.chat-message-list',
-  validInnerComponents: [
+  validInnerComponents: ['Text', 'Link', 'Icon', 'Avatar', 'ChatMessage'],
-    'Text',
-    'Link',
-    'Icon',
-    'Avatar',
-    'ChatMessage'
-  ],
   defaultRules: [
     {
       directives: {
         background: '--bg',
-        blur: '5px'
+        blur: '5px',
-      }
+      },
-    }
+    },
-  ]
+  ],
 }

src/components/chat/chat_layout_utils.js

@@ -3,14 +3,17 @@ export const getScrollPosition = () => {
   return {
     scrollTop: window.scrollY,
     scrollHeight: document.documentElement.scrollHeight,
-    offsetHeight: window.innerHeight
+    offsetHeight: window.innerHeight,
   }
 }
 
 // A helper function that is used to keep the scroll position fixed as the new elements are added to the top
 // Takes two scroll positions, before and after the update.
 export const getNewTopPosition = (previousPosition, newPosition) => {
-  return previousPosition.scrollTop + (newPosition.scrollHeight - previousPosition.scrollHeight)
+  return (
+    previousPosition.scrollTop +
+    (newPosition.scrollHeight - previousPosition.scrollHeight)
+  )
 }
 
 export const isBottomedOut = (offset = 0) => {

src/components/chat_list/chat_list.js

@@ -1,4 +1,5 @@
-import { mapState, mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
+
 import ChatListItem from '../chat_list_item/chat_list_item.vue'
 import ChatNew from '../chat_new/chat_new.vue'
 import List from '../list/list.vue'
@@ -7,17 +8,17 @@ const ChatList = {
   components: {
     ChatListItem,
     List,
-    ChatNew
+    ChatNew,
   },
   computed: {
     ...mapState({
-      currentUser: state => state.users.currentUser
+      currentUser: (state) => state.users.currentUser,
     }),
-    ...mapGetters(['sortedChatList'])
+    ...mapGetters(['sortedChatList']),
   },
   data() {
     return {
-      isNew: false
+      isNew: false,
     }
   },
   created() {
@@ -30,8 +31,8 @@ const ChatList = {
     },
     newChat() {
       this.isNew = true
-    }
+    },
-  }
+  },
 }
 
 export default ChatList

src/components/chat_list_item/chat_list_item.js

@@ -1,31 +1,34 @@
 import { mapState } from 'vuex'
-import StatusBody from '../status_content/status_content.vue'
+
 import fileType from 'src/services/file_type/file_type.service'
-import UserAvatar from '../user_avatar/user_avatar.vue'
 import AvatarList from '../avatar_list/avatar_list.vue'
-import Timeago from '../timeago/timeago.vue'
 import ChatTitle from '../chat_title/chat_title.vue'
+import StatusBody from '../status_content/status_content.vue'
+import Timeago from '../timeago/timeago.vue'
+import UserAvatar from '../user_avatar/user_avatar.vue'
 
 const ChatListItem = {
   name: 'ChatListItem',
-  props: [
+  props: ['chat'],
-    'chat'
-  ],
   components: {
     UserAvatar,
     AvatarList,
     Timeago,
     ChatTitle,
-    StatusBody
+    StatusBody,
   },
   computed: {
     ...mapState({
-      currentUser: state => state.users.currentUser
+      currentUser: (state) => state.users.currentUser,
     }),
     attachmentInfo() {
-      if (this.chat.lastMessage.attachments.length === 0) { return }
+      if (this.chat.lastMessage.attachments.length === 0) {
+        return
+      }
 
-      const types = this.chat.lastMessage.attachments.map(file => fileType.fileType(file.mimetype))
+      const types = this.chat.lastMessage.attachments.map((file) =>
+        fileType.fileType(file.mimetype),
+      )
       if (types.includes('video')) {
         return this.$t('file_type.video')
       } else if (types.includes('audio')) {
@@ -40,17 +43,19 @@ const ChatListItem = {
       const message = this.chat.lastMessage
       const messageEmojis = message ? message.emojis : []
       const isYou = message && message.account_id === this.currentUser.id
-      const content = message ? (this.attachmentInfo || message.content) : ''
+      const content = message ? this.attachmentInfo || message.content : ''
-      const messagePreview = isYou ? `<i>${this.$t('chats.you')}</i> ${content}` : content
+      const messagePreview = isYou
+        ? `<i>${this.$t('chats.you')}</i> ${content}`
+        : content
       return {
         summary: '',
         emojis: messageEmojis,
         raw_html: messagePreview,
         text: messagePreview,
-        attachments: []
+        attachments: [],
-      }
       }
     },
+  },
   methods: {
     openChat() {
       if (this.chat.id) {
@@ -58,12 +63,12 @@ const ChatListItem = {
           name: 'chat',
           params: {
             username: this.currentUser.screen_name,
-            recipient_id: this.chat.account.id
+            recipient_id: this.chat.account.id,
-          }
+          },
         })
       }
-    }
+    },
-  }
+  },
 }
 
 export default ChatListItem

src/components/chat_message/chat_message.js

@@ -1,24 +1,20 @@
-import { mapState, mapGetters } from 'vuex'
 import { mapState as mapPiniaState } from 'pinia'
-import Popover from '../popover/popover.vue'
+import { defineAsyncComponent } from 'vue'
+import { mapGetters, mapState } from 'vuex'
+
+import { useInterfaceStore } from 'src/stores/interface'
 import Attachment from '../attachment/attachment.vue'
-import UserAvatar from '../user_avatar/user_avatar.vue'
+import ChatMessageDate from '../chat_message_date/chat_message_date.vue'
 import Gallery from '../gallery/gallery.vue'
 import LinkPreview from '../link-preview/link-preview.vue'
+import Popover from '../popover/popover.vue'
 import StatusContent from '../status_content/status_content.vue'
-import ChatMessageDate from '../chat_message_date/chat_message_date.vue'
+import UserAvatar from '../user_avatar/user_avatar.vue'
-import { defineAsyncComponent } from 'vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faTimes,
-  faEllipsisH
-} from '@fortawesome/free-solid-svg-icons'
-import { useInterfaceStore } from 'src/stores/interface'
 
-library.add(
+import { library } from '@fortawesome/fontawesome-svg-core'
-  faTimes,
+import { faEllipsisH, faTimes } from '@fortawesome/free-solid-svg-icons'
-  faEllipsisH
+
-)
+library.add(faTimes, faEllipsisH)
 
 const ChatMessage = {
   name: 'ChatMessage',
@@ -27,7 +23,7 @@ const ChatMessage = {
     'edited',
     'noHeading',
     'chatViewItem',
-    'hoveredMessageChain'
+    'hoveredMessageChain',
   ],
   emits: ['hover'],
   components: {
@@ -38,13 +34,19 @@ const ChatMessage = {
     Gallery,
     LinkPreview,
     ChatMessageDate,
-    UserPopover: defineAsyncComponent(() => import('../user_popover/user_popover.vue'))
+    UserPopover: defineAsyncComponent(
+      () => import('../user_popover/user_popover.vue'),
+    ),
   },
   computed: {
     // Returns HH:MM (hours and minutes) in local time.
     createdAt() {
       const time = this.chatViewItem.data.created_at
-      return time.toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit', hour12: false })
+      return time.toLocaleTimeString('en', {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+      })
     },
     isCurrentUser() {
       return this.message.account_id === this.currentUser.id
@@ -61,18 +63,18 @@ const ChatMessage = {
         emojis: this.message.emojis,
         raw_html: this.message.content || '',
         text: this.message.content || '',
-        attachments: this.message.attachments
+        attachments: this.message.attachments,
       }
     },
     hasAttachment() {
       return this.message.attachments.length > 0
     },
     ...mapPiniaState(useInterfaceStore, {
-      betterShadow: store => store.browserSupport.cssFilter
+      betterShadow: (store) => store.browserSupport.cssFilter,
     }),
     ...mapState({
-      currentUser: state => state.users.currentUser,
+      currentUser: (state) => state.users.currentUser,
-      restrictedNicknames: state => state.instance.restrictedNicknames
+      restrictedNicknames: (state) => state.instance.restrictedNicknames,
     }),
     popoverMarginStyle() {
       if (this.isCurrentUser) {
@@ -81,30 +83,33 @@ const ChatMessage = {
         return { left: 50 }
       }
     },
-    ...mapGetters(['mergedConfig', 'findUser'])
+    ...mapGetters(['mergedConfig', 'findUser']),
   },
   data() {
     return {
       hovered: false,
-      menuOpened: false
+      menuOpened: false,
     }
   },
   methods: {
     onHover(bool) {
-      this.$emit('hover', { isHovered: bool, messageChainId: this.chatViewItem.messageChainId })
+      this.$emit('hover', {
+        isHovered: bool,
+        messageChainId: this.chatViewItem.messageChainId,
+      })
     },
     async deleteMessage() {
       const confirmed = window.confirm(this.$t('chats.delete_confirm'))
       if (confirmed) {
         await this.$store.dispatch('deleteChatMessage', {
           messageId: this.chatViewItem.data.id,
-          chatId: this.chatViewItem.data.chat_id
+          chatId: this.chatViewItem.data.chat_id,
         })
       }
       this.hovered = false
       this.menuOpened = false
-    }
+    },
-  }
+  },
 }
 
 export default ChatMessage

src/components/chat_message/chat_message.style.js

@@ -2,26 +2,21 @@ export default {
   name: 'ChatMessage',
   selector: '.chat-message',
   variants: {
-    outgoing: '.outgoing'
+    outgoing: '.outgoing',
   },
-  validInnerComponents: [
+  validInnerComponents: ['Text', 'Icon', 'Border', 'PollGraph'],
-    'Text',
-    'Icon',
-    'Border',
-    'PollGraph'
-  ],
   defaultRules: [
     {
       directives: {
         background: '--bg, 2',
-        backgroundNoCssColor: 'yes'
+        backgroundNoCssColor: 'yes',
-      }
+      },
     },
     {
       variant: 'outgoing',
       directives: {
-        background: '--bg, 5'
+        background: '--bg, 5',
-      }
+      },
-    }
+    },
-  ]
+  ],
 }

src/components/chat_message_date/chat_message_date.vue

@@ -18,9 +18,12 @@ 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' },
+        )
       }
+    },
+  },
 }
 </script>

src/components/chat_new/chat_new.js

@@ -1,37 +1,33 @@
-import { mapState, mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
+
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faSearch,
-  faChevronLeft
-} from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+import { library } from '@fortawesome/fontawesome-svg-core'
-  faSearch,
+import { faChevronLeft, faSearch } from '@fortawesome/free-solid-svg-icons'
-  faChevronLeft
+
-)
+library.add(faSearch, faChevronLeft)
 
 const chatNew = {
   components: {
     BasicUserCard,
-    UserAvatar
+    UserAvatar,
   },
   data() {
     return {
       suggestions: [],
       userIds: [],
       loading: false,
-      query: ''
+      query: '',
     }
   },
   async created() {
     const { chats } = await this.backendInteractor.chats()
-    chats.forEach(chat => this.suggestions.push(chat.account))
+    chats.forEach((chat) => this.suggestions.push(chat.account))
   },
   computed: {
     users() {
-      return this.userIds.map(userId => this.findUser(userId))
+      return this.userIds.map((userId) => this.findUser(userId))
     },
     availableUsers() {
       if (this.query.length !== 0) {
@@ -41,10 +37,10 @@ const chatNew = {
       }
     },
     ...mapState({
-      currentUser: state => state.users.currentUser,
+      currentUser: (state) => state.users.currentUser,
-      backendInteractor: state => state.api.backendInteractor
+      backendInteractor: (state) => state.api.backendInteractor,
     }),
-    ...mapGetters(['findUser'])
+    ...mapGetters(['findUser']),
   },
   methods: {
     goBack() {
@@ -61,7 +57,7 @@ const chatNew = {
       this.query = ''
     },
     removeUser(userId) {
-      this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
+      this.selectedUserIds = this.selectedUserIds.filter((id) => id !== userId)
     },
     search(query) {
       if (!query) {
@@ -71,13 +67,14 @@ const chatNew = {
 
       this.loading = true
       this.userIds = []
-      this.$store.dispatch('search', { q: query, resolve: true, type: 'accounts' })
+      this.$store
-        .then(data => {
+        .dispatch('search', { q: query, resolve: true, type: 'accounts' })
+        .then((data) => {
           this.loading = false
-          this.userIds = data.accounts.map(a => a.id)
+          this.userIds = data.accounts.map((a) => a.id)
         })
-    }
+    },
-  }
+  },
 }
 
 export default chatNew

src/components/chat_title/chat_title.js

@@ -1,23 +1,24 @@
-import UserAvatar from '../user_avatar/user_avatar.vue'
-import RichContent from 'src/components/rich_content/rich_content.jsx'
 import { defineAsyncComponent } from 'vue'
 
+import RichContent from 'src/components/rich_content/rich_content.jsx'
+import UserAvatar from '../user_avatar/user_avatar.vue'
+
 export default {
   name: 'ChatTitle',
   components: {
     UserAvatar,
     RichContent,
-    UserPopover: defineAsyncComponent(() => import('../user_popover/user_popover.vue'))
+    UserPopover: defineAsyncComponent(
+      () => import('../user_popover/user_popover.vue'),
+    ),
   },
-  props: [
+  props: ['user', 'withAvatar'],
-    'user', 'withAvatar'
-  ],
   computed: {
     title() {
       return this.user ? this.user.screen_name_ui : ''
     },
     htmlTitle() {
       return this.user ? this.user.name_html : ''
-    }
+    },
-  }
+  },
 }

src/components/checkbox/checkbox.vue

@@ -36,30 +36,25 @@
 
 <script>
 export default {
-  props: [
+  props: ['radio', 'modelValue', 'indeterminate', 'disabled'],
-    'radio',
-    'modelValue',
-    'indeterminate',
-    'disabled'
-  ],
   emits: ['update:modelValue'],
   data: (vm) => ({
-    indeterminateTransitionFix: vm.indeterminate
+    indeterminateTransitionFix: vm.indeterminate,
   }),
   watch: {
     indeterminate(e) {
       if (e) {
         this.indeterminateTransitionFix = true
       }
-    }
+    },
   },
   methods: {
     onTransitionEnd() {
       if (!this.indeterminate) {
         this.indeterminateTransitionFix = false
       }
-    }
+    },
-  }
+  },
 }
 </script>
 

src/components/color_input/color_input.vue

@@ -64,74 +64,71 @@
   </div>
 </template>
 <script>
-import Checkbox from '../checkbox/checkbox.vue'
-import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import { throttle } from 'lodash'
 
-import { library } from '@fortawesome/fontawesome-svg-core'
+import { hex2rgb } from '../../services/color_convert/color_convert.js'
-import {
+import Checkbox from '../checkbox/checkbox.vue'
-  faEyeDropper
-} from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+import { library } from '@fortawesome/fontawesome-svg-core'
-  faEyeDropper
+import { faEyeDropper } from '@fortawesome/free-solid-svg-icons'
-)
+
+library.add(faEyeDropper)
 
 export default {
   components: {
-    Checkbox
+    Checkbox,
   },
   props: {
     // Name of color, used for identifying
     name: {
       required: true,
-      type: String
+      type: String,
     },
     // Readable label
     label: {
       required: true,
-      type: String
+      type: String,
     },
     // use unstyled, uh, style
     unstyled: {
       required: false,
-      type: Boolean
+      type: Boolean,
     },
     // Color value, should be required but vue cannot tell the difference
     // between "property missing" and "property set to undefined"
     modelValue: {
       required: false,
       type: String,
-      default: undefined
+      default: undefined,
     },
     // Color fallback to use when value is not defeind
     fallback: {
       required: false,
       type: String,
-      default: undefined
+      default: undefined,
     },
     // Disable the control
     disabled: {
       required: false,
       type: Boolean,
-      default: false
+      default: false,
     },
     // Show "optional" tickbox, for when value might become mandatory
     showOptionalCheckbox: {
       required: false,
       type: Boolean,
-      default: true
+      default: true,
     },
     // Force "optional" tickbox to hide
     hideOptionalCheckbox: {
       required: false,
       type: Boolean,
-      default: false
+      default: false,
     },
     compact: {
       required: false,
-      type: Boolean
+      type: Boolean,
-    }
+    },
   },
   emits: ['update:modelValue'],
   computed: {
@@ -145,14 +142,17 @@ export default {
       return this.modelValue === 'transparent'
     },
     computedColor() {
-      return this.modelValue && (this.modelValue.startsWith('--') || this.modelValue.startsWith('$'))
+      return (
-    }
+        this.modelValue &&
+        (this.modelValue.startsWith('--') || this.modelValue.startsWith('$'))
+      )
+    },
   },
   methods: {
     updateValue: throttle(function (value) {
       this.$emit('update:modelValue', value)
-    }, 100)
+    }, 100),
-  }
+  },
 }
 </script>
 <style lang="scss" src="./color_input.scss"></style>

src/components/component_preview/component_preview.js

@@ -1,13 +1,15 @@
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ColorInput from 'src/components/color_input/color_input.vue'
-
 import genRandomSeed from 'src/services/random_seed/random_seed.service.js'
-import { createStyleSheet, adoptStyleSheets } from 'src/services/style_setter/style_setter.js'
+import {
+  adoptStyleSheets,
+  createStyleSheet,
+} from 'src/services/style_setter/style_setter.js'
 
 export default {
   components: {
     Checkbox,
-    ColorInput
+    ColorInput,
   },
   props: [
     'shadow',
@@ -17,7 +19,7 @@ export default {
     'previewCss',
     'disabled',
     'invalid',
-    'noColorControl'
+    'noColorControl',
   ],
   emits: ['update:shadow'],
   data() {
@@ -25,7 +27,7 @@ export default {
       colorOverride: undefined,
       lightGrid: false,
       zoom: 100,
-      randomSeed: genRandomSeed()
+      randomSeed: genRandomSeed(),
     }
   },
   mounted() {
@@ -34,7 +36,7 @@ export default {
   computed: {
     hideControls() {
       return typeof this.shadow === 'string'
-    }
+    },
   },
   watch: {
     previewCss() {
@@ -45,7 +47,7 @@ export default {
     },
     zoom() {
       this.update()
-    }
+    },
   },
   methods: {
     updateProperty(axis, value) {
@@ -60,23 +62,25 @@ export default {
       if (this.colorOverride) result.push(`--background: ${this.colorOverride}`)
 
       const styleRule = [
-        '#component-preview-', this.randomSeed, ' {\n',
+        '#component-preview-',
+        this.randomSeed,
+        ' {\n',
         '.preview-block {\n',
         `zoom: ${this.zoom / 100};`,
         this.previewStyle,
         '\n}',
-        '\n}'
+        '\n}',
       ].join('')
 
       sheet.addRule(styleRule)
-      sheet.addRule([
+      sheet.addRule(
-        '#component-preview-', this.randomSeed, ' {\n',
+        ['#component-preview-', this.randomSeed, ' {\n', ...result, '\n}'].join(
-        ...result,
+          '',
-        '\n}'
+        ),
-      ].join(''))
+      )
 
       sheet.ready = true
       adoptStyleSheets()
-    }
+    },
-  }
+  },
 }

src/components/confirm_modal/confirm_modal.js

@@ -9,30 +9,29 @@ import DialogModal from '../dialog_modal/dialog_modal.vue'
  */
 const ConfirmModal = {
   components: {
-    DialogModal
+    DialogModal,
   },
   props: {
     title: {
-      type: String
+      type: String,
     },
     cancelText: {
-      type: String
+      type: String,
     },
     confirmText: {
-      type: String
+      type: String,
-    }
+    },
   },
   emits: ['cancelled', 'accepted'],
-  computed: {
+  computed: {},
-  },
   methods: {
     onCancel() {
       this.$emit('cancelled')
     },
     onAccept() {
       this.$emit('accepted')
-    }
+    },
-  }
+  },
 }
 
 export default ConfirmModal

src/components/confirm_modal/mute_confirm.js

@@ -1,17 +1,17 @@
 import { mapGetters } from 'vuex'
 
-import ConfirmModal from './confirm_modal.vue'
 import Select from 'src/components/select/select.vue'
+import ConfirmModal from './confirm_modal.vue'
 
 export default {
   props: ['type', 'user', 'status'],
   emits: ['hide', 'show', 'muted'],
   data: () => ({
-    showing: false
+    showing: false,
   }),
   components: {
     ConfirmModal,
-    Select
+    Select,
   },
   computed: {
     domain() {
@@ -28,19 +28,22 @@ export default {
       return this.status.conversation_muted
     },
     domainIsMuted() {
-      return new Set(this.$store.state.users.currentUser.domainMutes).has(this.domain)
+      return new Set(this.$store.state.users.currentUser.domainMutes).has(
+        this.domain,
+      )
     },
     shouldConfirm() {
       switch (this.type) {
         case 'domain': {
           return this.mergedConfig.modalOnMuteDomain
         }
-        default: { // conversation
+        default: {
+          // conversation
           return this.mergedConfig.modalOnMuteConversation
         }
       }
     },
-    ...mapGetters(['mergedConfig'])
+    ...mapGetters(['mergedConfig']),
   },
   methods: {
     optionallyPrompt() {
@@ -79,6 +82,6 @@ export default {
       }
       this.$emit('muted')
       this.hide()
-    }
+    },
-  }
+  },
 }

src/components/contrast_ratio/contrast_ratio.vue

@@ -63,54 +63,68 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faAdjust,
   faExclamationTriangle,
-  faThumbsUp
+  faThumbsUp,
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+library.add(faAdjust, faExclamationTriangle, faThumbsUp)
-  faAdjust,
-  faExclamationTriangle,
-  faThumbsUp
-)
 
 export default {
   components: {
-    Tooltip
+    Tooltip,
   },
   props: {
     large: {
       required: false,
       type: Boolean,
-      default: false
+      default: false,
     },
     // TODO: Make theme switcher compute theme initially so that contrast
     // component won't be called without contrast data
     contrast: {
       required: false,
       type: Object,
-      default: () => ({})
+      default: () => ({
+        /* no-op */
+      }),
     },
     showRatio: {
       required: false,
       type: Boolean,
-      default: false
+      default: false,
-    }
+    },
   },
   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,
+      })
+    },
+  },
 }
 </script>
 

src/components/conversation-page/conversation-page.js

@@ -2,13 +2,13 @@ import Conversation from '../conversation/conversation.vue'
 
 const conversationPage = {
   components: {
-    Conversation
+    Conversation,
   },
   computed: {
     statusId() {
       return this.$route.params.id
-    }
+    },
-  }
+  },
 }
 
 export default conversationPage

src/components/conversation/conversation.js

@@ -1,25 +1,22 @@
-import { reduce, filter, findIndex, clone, get } from 'lodash'
+import { clone, filter, findIndex, get, reduce } from 'lodash'
-import Status from '../status/status.vue'
-import ThreadTree from '../thread_tree/thread_tree.vue'
-import { WSConnectionStatus } from '../../services/api/api.service.js'
-import { mapGetters, mapState } from 'vuex'
 import { mapState as mapPiniaState } from 'pinia'
+import { mapGetters, mapState } from 'vuex'
+
+import { useInterfaceStore } from 'src/stores/interface'
+import { WSConnectionStatus } from '../../services/api/api.service.js'
 import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.vue'
 import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
-import { useInterfaceStore } from 'src/stores/interface'
+import Status from '../status/status.vue'
+import ThreadTree from '../thread_tree/thread_tree.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faAngleDoubleDown,
   faAngleDoubleLeft,
-  faChevronLeft
+  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
@@ -43,12 +40,14 @@ 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 = {
@@ -59,7 +58,7 @@ const conversation = {
       threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
       statusContentPropertiesObject: {},
       inlineDivePosition: null,
-      loadStatusError: null
+      loadStatusError: null,
     }
   },
   props: [
@@ -69,7 +68,7 @@ const conversation = {
     'pinnedStatusIdsObject',
     'inProfile',
     'profileUserId',
-    'virtualHidden'
+    'virtualHidden',
   ],
   created() {
     if (this.isPage) {
@@ -85,7 +84,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
@@ -113,11 +115,12 @@ const conversation = {
     },
     suspendable() {
       if (this.isTreeView) {
-        return Object.entries(this.statusContentProperties)
+        return Object.entries(this.statusContentProperties).every(
-          .every(([, prop]) => !prop.replying && prop.mediaPlaying.length === 0)
+          ([, 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
       }
@@ -147,7 +150,9 @@ const conversation = {
         return [this.status]
       }
 
-      const conversation = clone(this.$store.state.statuses.conversationsObject[this.conversationId])
+      const conversation = clone(
+        this.$store.state.statuses.conversationsObject[this.conversationId],
+      )
       const statusIndex = findIndex(conversation, { id: this.originalStatusId })
       if (statusIndex !== -1) {
         conversation[statusIndex] = this.status
@@ -162,42 +167,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: {}
+        {
-      })
+          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
+                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
         }, {})
     },
@@ -207,10 +227,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
@@ -222,10 +246,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
@@ -238,8 +266,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() {
@@ -265,25 +301,38 @@ 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
 
-      return reduce(this.conversation, (result, { id, in_reply_to_status_id: irid }) => {
+      return reduce(
+        this.conversation,
+        (result, { id, in_reply_to_status_id: irid }) => {
           if (irid) {
             result[irid] = result[irid] || []
             result[irid].push({
               name: `#${i}`,
-            id
+              id,
             })
           }
           i++
           return result
-      }, {})
+        },
+        {},
+      )
     },
     isExpanded() {
       return !!(this.expanded || this.isPage)
@@ -300,7 +349,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'
@@ -320,13 +369,13 @@ const conversation = {
             expandingSubject: false,
             showingLongSubject: false,
             isReplying: false,
-            mediaPlaying: []
+            mediaPlaying: [],
           }
 
           if (this.statusContentPropertiesObject[id]) {
             return {
               ...def,
-              ...this.statusContentPropertiesObject[id]
+              ...this.statusContentPropertiesObject[id],
             }
           }
           return def
@@ -344,23 +393,27 @@ const conversation = {
     },
     ...mapGetters(['mergedConfig']),
     ...mapState({
-      mastoUserSocketStatus: state => state.api.mastoUserSocketStatus
+      mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
     }),
     ...mapPiniaState(useInterfaceStore, {
-      mobileLayout: store => store.layoutType === 'mobile'
+      mobileLayout: (store) => store.layoutType === 'mobile',
-    })
+    }),
   },
   components: {
     Status,
     ThreadTree,
     QuickFilterSettings,
-    QuickViewSettings
+    QuickViewSettings,
   },
   watch: {
     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()
@@ -374,16 +427,17 @@ const conversation = {
       }
     },
     virtualHidden() {
-      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 })
@@ -391,7 +445,8 @@ const conversation = {
           })
       } else {
         this.loadStatusError = null
-        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()
@@ -402,7 +457,7 @@ const conversation = {
       }
     },
     isFocused(id) {
-      return (this.isExpanded) && id === this.highlight
+      return this.isExpanded && id === this.highlight
     },
     getReplies(id) {
       return this.replies[id] || []
@@ -426,12 +481,16 @@ 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 = {
         ...this.threadDisplayStatusObject,
-        [id]: nextStatus
+        [id]: nextStatus,
       }
     },
     toggleThreadDisplay(id) {
@@ -441,7 +500,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')
@@ -451,12 +512,16 @@ const conversation = {
         ...this.statusContentPropertiesObject,
         [id]: {
           ...this.statusContentPropertiesObject[id],
-          [name]: value
+          [name]: value,
-        }
+        },
       }
     },
     toggleStatusContentProperty(id, name) {
-      this.setStatusContentProperty(id, name, !this.statusContentProperties[id][name])
+      this.setStatusContentProperty(
+        id,
+        name,
+        !this.statusContentProperties[id][name],
+      )
     },
     leastVisibleAncestor(id) {
       let cur = id
@@ -476,7 +541,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() {
@@ -554,8 +621,8 @@ const conversation = {
     resetDisplayState() {
       this.undive()
       this.threadDisplayStatusObject = {}
-    }
+    },
-  }
+  },
 }
 
 export default conversation

src/components/desktop_nav/desktop_nav.js

@@ -1,20 +1,22 @@
 import SearchBar from 'components/search_bar/search_bar.vue'
+
+import { useInterfaceStore } from 'src/stores/interface'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
+  faBell,
+  faBullhorn,
+  faCog,
+  faComments,
+  faHome,
+  faInfoCircle,
+  faSearch,
   faSignInAlt,
   faSignOutAlt,
-  faHome,
-  faComments,
-  faBell,
-  faUserPlus,
-  faBullhorn,
-  faSearch,
   faTachometerAlt,
-  faCog,
+  faUserPlus,
-  faInfoCircle
 } from '@fortawesome/free-solid-svg-icons'
-import { useInterfaceStore } from 'src/stores/interface'
 
 library.add(
   faSignInAlt,
@@ -27,60 +29,78 @@ library.add(
   faSearch,
   faTachometerAlt,
   faCog,
-  faInfoCircle
+  faInfoCircle,
 )
 
 export default {
   components: {
     SearchBar,
-    ConfirmModal
+    ConfirmModal,
   },
   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,
-    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
         ? {
-            'mask-image': `url(${this.$store.state.instance.logo})`
+            'mask-image': `url(${this.$store.state.instance.logo})`,
           }
         : {
-            'background-color': this.enableMask ? '' : 'transparent'
+            'background-color': this.enableMask ? '' : 'transparent',
           }
     },
     logoBgStyle() {
-      return Object.assign({
+      return Object.assign(
+        {
           margin: `${this.$store.state.instance.logoMargin} 0`,
-        opacity: this.searchBarHidden ? 1 : 0
+          opacity: this.searchBarHidden ? 1 : 0,
-      }, this.enableMask
+        },
+        this.enableMask
           ? {}
           : {
-            'background-color': this.enableMask ? '' : 'transparent'
+              'background-color': this.enableMask ? '' : 'transparent',
-          })
+            },
+      )
+    },
+    logo() {
+      return this.$store.state.instance.logo
+    },
+    sitename() {
+      return this.$store.state.instance.name
+    },
+    hideSitename() {
+      return this.$store.state.instance.hideSitename
+    },
+    logoLeft() {
+      return this.$store.state.instance.logoLeft
+    },
+    currentUser() {
+      return this.$store.state.users.currentUser
+    },
+    privateMode() {
+      return this.$store.state.instance.private
     },
-    logo () { return this.$store.state.instance.logo },
-    sitename () { return this.$store.state.instance.name },
-    hideSitename () { return this.$store.state.instance.hideSitename },
-    logoLeft () { return this.$store.state.instance.logoLeft },
-    currentUser () { return this.$store.state.users.currentUser },
-    privateMode () { return this.$store.state.instance.private },
     shouldConfirmLogout() {
       return this.$store.getters.mergedConfig.modalOnLogout
-    }
+    },
   },
   methods: {
     scrollToTop() {
@@ -112,6 +132,6 @@ export default {
     },
     openAdminModal() {
       useInterfaceStore().openSettingsModal('admin')
-    }
+    },
-  }
+  },
 }

src/components/dialog_modal/dialog_modal.js

@@ -2,18 +2,20 @@ const DialogModal = {
   props: {
     darkOverlay: {
       default: true,
-      type: Boolean
+      type: Boolean,
     },
     onCancel: {
-      default: () => {},
+      default: () => {
-      type: Function
+        /* no-op */
-    }
+      },
+      type: Function,
+    },
   },
   computed: {
     mobileCenter() {
       return this.$store.getters.mergedConfig.modalMobileCenter
-    }
+    },
-  }
+  },
 }
 
 export default DialogModal

src/components/dm_timeline/dm_timeline.js

@@ -4,11 +4,11 @@ const DMs = {
   computed: {
     timeline() {
       return this.$store.state.statuses.timelines.dms
-    }
+    },
   },
   components: {
-    Timeline
+    Timeline,
-  }
+  },
 }
 
 export default DMs

src/components/domain_mute_card/domain_mute_card.js

@@ -3,7 +3,7 @@ import ProgressButton from '../progress_button/progress_button.vue'
 const DomainMuteCard = {
   props: ['domain'],
   components: {
-    ProgressButton
+    ProgressButton,
   },
   computed: {
     user() {
@@ -11,7 +11,7 @@ const DomainMuteCard = {
     },
     muted() {
       return this.user.domainMutes.includes(this.domain)
-    }
+    },
   },
   methods: {
     unmuteDomain() {
@@ -19,8 +19,8 @@ const DomainMuteCard = {
     },
     muteDomain() {
       return this.$store.dispatch('muteDomain', this.domain)
-    }
+    },
-  }
+  },
 }
 
 export default DomainMuteCard

src/components/draft/draft.js

@@ -1,18 +1,15 @@
-import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
-import EditStatusForm from 'src/components/edit_status_form/edit_status_form.vue'
-import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
-import StatusContent from 'src/components/status_content/status_content.vue'
-import Gallery from 'src/components/gallery/gallery.vue'
 import { cloneDeep } from 'lodash'
 
-import { library } from '@fortawesome/fontawesome-svg-core'
+import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
-import {
+import EditStatusForm from 'src/components/edit_status_form/edit_status_form.vue'
-  faPollH
+import Gallery from 'src/components/gallery/gallery.vue'
-} from '@fortawesome/free-solid-svg-icons'
+import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
+import StatusContent from 'src/components/status_content/status_content.vue'
 
-library.add(
+import { library } from '@fortawesome/fontawesome-svg-core'
-  faPollH
+import { faPollH } from '@fortawesome/free-solid-svg-icons'
-)
+
+library.add(faPollH)
 
 const Draft = {
   components: {
@@ -20,19 +17,19 @@ const Draft = {
     EditStatusForm,
     ConfirmModal,
     StatusContent,
-    Gallery
+    Gallery,
   },
   props: {
     draft: {
       type: Object,
-      required: true
+      required: true,
-    }
+    },
   },
   data() {
     return {
       referenceDraft: cloneDeep(this.draft),
       editing: false,
-      showingConfirmDialog: false
+      showingConfirmDialog: false,
     }
   },
   computed: {
@@ -46,18 +43,18 @@ const Draft = {
       }
     },
     safeToSave() {
-      return this.draft.status ||
+      return this.draft.status || this.draft.files?.length || this.draft.hasPoll
-        this.draft.files?.length ||
-        this.draft.hasPoll
     },
     postStatusFormProps() {
       return {
         draftId: this.draft.id,
-        ...this.relAttrs
+        ...this.relAttrs,
       }
     },
     refStatus() {
-      return this.draft.refId ? this.$store.state.statuses.allStatusesObject[this.draft.refId] : undefined
+      return this.draft.refId
+        ? this.$store.state.statuses.allStatusesObject[this.draft.refId]
+        : undefined
     },
     localCollapseSubjectDefault() {
       return this.$store.getters.mergedConfig.collapseMessageWithSubject
@@ -70,7 +67,7 @@ const Draft = {
         return false
       }
       return true
-    }
+    },
   },
   watch: {
     editing(newVal) {
@@ -80,7 +77,7 @@ const Draft = {
       } else {
         this.$store.dispatch('addOrSaveDraft', { draft: this.referenceDraft })
       }
-    }
+    },
   },
   methods: {
     toggleEditing() {
@@ -90,15 +87,14 @@ const Draft = {
       this.showingConfirmDialog = true
     },
     doAbandon() {
-      this.$store.dispatch('abandonDraft', { id: this.draft.id })
+      this.$store.dispatch('abandonDraft', { id: this.draft.id }).then(() => {
-        .then(() => {
         this.hideConfirmDialog()
       })
     },
     hideConfirmDialog() {
       this.showingConfirmDialog = false
-    }
+    },
-  }
+  },
 }
 
 export default Draft

src/components/draft_closer/draft_closer.js

@@ -3,16 +3,13 @@ import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
 const DraftCloser = {
   data() {
     return {
-      showing: false
+      showing: false,
     }
   },
   components: {
-    DialogModal
+    DialogModal,
   },
-  emits: [
+  emits: ['save', 'discard'],
-    'save',
-    'discard'
-  ],
   computed: {
     action() {
       if (this.$store.getters.mergedConfig.autoSaveDraft) {
@@ -23,7 +20,7 @@ const DraftCloser = {
     },
     shouldConfirm() {
       return this.action === 'confirm'
-    }
+    },
   },
   methods: {
     requestClose() {
@@ -45,8 +42,8 @@ const DraftCloser = {
     },
     cancel() {
       this.showing = false
-    }
+    },
-  }
+  },
 }
 
 export default DraftCloser

src/components/drafts/drafts.js

@@ -4,13 +4,13 @@ import List from 'src/components/list/list.vue'
 const Drafts = {
   components: {
     Draft,
-    List
+    List,
   },
   computed: {
     drafts() {
       return this.$store.getters.draftsArray
-    }
+    },
-  }
+  },
 }
 
 export default Drafts

src/components/edit_status_form/edit_status_form.js

@@ -1,15 +1,15 @@
-import PostStatusForm from '../post_status_form/post_status_form.vue'
 import statusPosterService from '../../services/status_poster/status_poster.service.js'
+import PostStatusForm from '../post_status_form/post_status_form.vue'
 
 const EditStatusForm = {
   components: {
-    PostStatusForm
+    PostStatusForm,
   },
   props: {
     params: {
       type: Object,
-      required: true
+      required: true,
-    }
+    },
   },
   methods: {
     requestClose() {
@@ -24,21 +24,22 @@ const EditStatusForm = {
         sensitive,
         poll,
         media,
-        contentType
+        contentType,
       }
 
-      return statusPosterService.editStatus(params)
+      return statusPosterService
+        .editStatus(params)
         .then((data) => {
           return data
         })
         .catch((err) => {
           console.error('Error editing status', err)
           return {
-            error: err.message
+            error: err.message,
           }
         })
-    }
+    },
-  }
+  },
 }
 
 export default EditStatusForm

src/components/edit_status_modal/edit_status_modal.js

@@ -1,16 +1,17 @@
+import get from 'lodash/get'
+
+import { useEditStatusStore } from 'src/stores/editStatus'
 import EditStatusForm from '../edit_status_form/edit_status_form.vue'
 import Modal from '../modal/modal.vue'
-import get from 'lodash/get'
-import { useEditStatusStore } from 'src/stores/editStatus'
 
 const EditStatusModal = {
   components: {
     EditStatusForm,
-    Modal
+    Modal,
   },
   data() {
     return {
-      resettingForm: false
+      resettingForm: false,
     }
   },
   computed: {
@@ -25,7 +26,7 @@ const EditStatusModal = {
     },
     params() {
       return useEditStatusStore().params || {}
-    }
+    },
   },
   watch: {
     params(newVal, oldVal) {
@@ -38,18 +39,20 @@ const EditStatusModal = {
     },
     isFormVisible(val) {
       if (val) {
-        this.$nextTick(() => this.$el && this.$el.querySelector('textarea').focus())
+        this.$nextTick(
-      }
+          () => this.$el && this.$el.querySelector('textarea').focus(),
+        )
       }
     },
+  },
   methods: {
     closeModal() {
       this.$refs.editStatusForm.requestClose()
     },
     doCloseModal() {
       useEditStatusStore().closeEditStatusModal()
-    }
+    },
-  }
+  },
 }
 
 export default EditStatusModal

src/components/emoji_input/emoji_input.js

@@ -1,20 +1,18 @@
-import Completion from '../../services/completion/completion.js'
+import { take } from 'lodash'
-import genRandomSeed from '../../services/random_seed/random_seed.service.js'
+
-import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import Popover from 'src/components/popover/popover.vue'
 import ScreenReaderNotice from 'src/components/screen_reader_notice/screen_reader_notice.vue'
-import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
-import { take } from 'lodash'
-import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
 import { ensureFinalFallback } from '../../i18n/languages.js'
-import { library } from '@fortawesome/fontawesome-svg-core'
+import Completion from '../../services/completion/completion.js'
-import {
+import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
-  faSmileBeam
+import genRandomSeed from '../../services/random_seed/random_seed.service.js'
-} from '@fortawesome/free-regular-svg-icons'
+import EmojiPicker from '../emoji_picker/emoji_picker.vue'
+import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
 
-library.add(
+import { library } from '@fortawesome/fontawesome-svg-core'
-  faSmileBeam
+import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
-)
+
+library.add(faSmileBeam)
 
 /**
  * EmojiInput - augmented inputs for emoji and autocomplete support in inputs
@@ -60,14 +58,14 @@ const EmojiInput = {
        * For commonly used suggestors (emoji, users, both) use suggestor.js
        */
       required: true,
-      type: Function
+      type: Function,
     },
     modelValue: {
       /**
        * Used for v-model
        */
       required: true,
-      type: String
+      type: String,
     },
     enableEmojiPicker: {
       /**
@@ -75,7 +73,7 @@ const EmojiInput = {
        */
       required: false,
       type: Boolean,
-      default: false
+      default: false,
     },
     hideEmojiButton: {
       /**
@@ -84,7 +82,7 @@ const EmojiInput = {
        */
       required: false,
       type: Boolean,
-      default: false
+      default: false,
     },
     enableStickerPicker: {
       /**
@@ -92,7 +90,7 @@ const EmojiInput = {
        */
       required: false,
       type: Boolean,
-      default: false
+      default: false,
     },
     placement: {
       /**
@@ -101,13 +99,13 @@ const EmojiInput = {
        */
       required: false,
       type: String, // 'auto', 'top', 'bottom'
-      default: 'auto'
+      default: 'auto',
     },
     newlineOnCtrlEnter: {
       required: false,
       type: Boolean,
-      default: false
+      default: false,
-    }
+    },
   },
   data() {
     return {
@@ -122,14 +120,14 @@ const EmojiInput = {
       disableClickOutside: false,
       suggestions: [],
       overlayStyle: {},
-      pickerShown: false
+      pickerShown: false,
     }
   },
   components: {
     Popover,
     EmojiPicker,
     UnicodeDomainIndicator,
-    ScreenReaderNotice
+    ScreenReaderNotice,
   },
   computed: {
     padEmoji() {
@@ -145,35 +143,42 @@ const EmojiInput = {
       return this.modelValue.slice(this.caret)
     },
     showSuggestions() {
-      return this.focused &&
+      return (
+        this.focused &&
         this.suggestions &&
         this.suggestions.length > 0 &&
         !this.pickerShown &&
         !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
       }
     },
     languages() {
-      return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)
+      return ensureFinalFallback(
+        this.$store.getters.mergedConfig.interfaceLanguage,
+      )
     },
     maybeLocalizedEmojiNamesAndKeywords() {
-      return emoji => {
+      return (emoji) => {
         const names = [emoji.displayText]
         const keywords = []
 
         if (emoji.displayTextI18n) {
-          names.push(this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args))
+          names.push(
+            this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args),
+          )
         }
 
         if (emoji.annotations) {
-          this.languages.forEach(lang => {
+          this.languages.forEach((lang) => {
             names.push(emoji.annotations[lang]?.name)
 
             keywords.push(...(emoji.annotations[lang]?.keywords || []))
@@ -181,13 +186,13 @@ const EmojiInput = {
         }
 
         return {
-          names: names.filter(k => k),
+          names: names.filter((k) => k),
-          keywords: keywords.filter(k => k)
+          keywords: keywords.filter((k) => k),
         }
       }
     },
     maybeLocalizedEmojiName() {
-      return emoji => {
+      return (emoji) => {
         if (!emoji.annotations) {
           return emoji.displayText
         }
@@ -210,11 +215,13 @@ const EmojiInput = {
     },
     suggestionItemId() {
       return (index) => `suggestion-item-${index}-${this.randomSeed}`
-    }
+    },
   },
   mounted() {
     const { root, hiddenOverlayCaret, suggestorPopover } = 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.caretEl = hiddenOverlayCaret
@@ -273,32 +280,36 @@ const EmojiInput = {
         this.suggestions = []
         return
       }
-      const matchedSuggestions = await this.suggest(newWord, this.maybeLocalizedEmojiNamesAndKeywords)
+      const matchedSuggestions = await this.suggest(
+        newWord,
+        this.maybeLocalizedEmojiNamesAndKeywords,
+      )
       // Async: cancel if textAtCaret has changed during wait
       if (this.textAtCaret !== newWord || matchedSuggestions.length <= 0) {
         this.suggestions = []
         return
       }
-      this.suggestions = take(matchedSuggestions, 5)
+      this.suggestions = take(matchedSuggestions, 5).map(
-        .map(({ imageUrl, ...rest }) => ({
+        ({ imageUrl, ...rest }) => ({
           ...rest,
-          img: imageUrl || ''
+          img: imageUrl || '',
-        }))
+        }),
+      )
       this.highlighted = this.defaultCandidateIndex
       this.$refs.screenReaderNotice.announce(
         this.$t(
           'tool_tip.autocomplete_available',
           { number: this.suggestions.length },
-          this.suggestions.length
+          this.suggestions.length,
+        ),
       )
-      )
+    },
-    }
   },
   methods: {
     onInputScroll(e) {
       this.$refs.hiddenOverlay.scrollTo({
         top: this.input.scrollTop,
-        left: this.input.scrollLeft
+        left: this.input.scrollLeft,
       })
       this.setCaret(e)
     },
@@ -326,7 +337,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
     },
@@ -349,18 +364,24 @@ 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.$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()
       }
@@ -374,11 +395,18 @@ const EmojiInput = {
     },
     replaceText(e, suggestion) {
       const len = this.suggestions.length || 0
-      if (this.textAtCaret.length === 1) { return }
+      if (this.textAtCaret.length === 1) {
+        return
+      }
       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
@@ -424,20 +452,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
@@ -567,8 +597,8 @@ const EmojiInput = {
       } else {
         return this.maybeLocalizedEmojiName(suggestion)
       }
-    }
+    },
-  }
+  },
 }
 
 export default EmojiInput

src/components/emoji_input/suggestor.js

@@ -10,7 +10,7 @@
  * 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, nameKeywordLocalizer) => {
@@ -25,22 +25,35 @@ export default data => {
   }
 }
 
-export const suggestEmoji = emojis => (input, nameKeywordLocalizer) => {
+export const suggestEmoji = (emojis) => (input, nameKeywordLocalizer) => {
   const noPrefix = input.toLowerCase().substr(1)
   return emojis
-    .map(emoji => ({ ...emoji, ...nameKeywordLocalizer(emoji) }))
+    .map((emoji) => ({ ...emoji, ...nameKeywordLocalizer(emoji) }))
-    .filter((emoji) => (emoji.names.concat(emoji.keywords)).filter(kw => kw.toLowerCase().match(noPrefix)).length)
+    .filter(
-    .map(k => {
+      (emoji) =>
+        emoji.names
+          .concat(emoji.keywords)
+          .filter((kw) => kw.toLowerCase().match(noPrefix)).length,
+    )
+    .map((k) => {
       let score = 0
 
       // An exact match always wins
-      score += Math.max(...k.names.map(name => name.toLowerCase() === noPrefix ? 200 : 0), 0)
+      score += Math.max(
+        ...k.names.map((name) => (name.toLowerCase() === noPrefix ? 200 : 0)),
+        0,
+      )
 
       // Prioritize custom emoji a lot
       score += k.imageUrl ? 100 : 0
 
       // Prioritize prefix matches somewhat
-      score += Math.max(...k.names.map(kw => kw.toLowerCase().startsWith(noPrefix) ? 10 : 0), 0)
+      score += Math.max(
+        ...k.names.map((kw) =>
+          kw.toLowerCase().startsWith(noPrefix) ? 10 : 0,
+        ),
+        0,
+      )
 
       // Sort by length
       score -= k.displayText.length
@@ -78,7 +91,7 @@ export const suggestUsers = ({ dispatch, state }) => {
     })
   }
 
-  return async input => {
+  return async (input) => {
     const noPrefix = input.toLowerCase().substr(1)
     if (previousQuery === noPrefix) return suggestions
 
@@ -92,12 +105,16 @@ export const suggestUsers = ({ dispatch, state }) => {
       await debounceUserSearch(noPrefix)
     }
 
-    const newSuggestions = state.users.users.filter(
+    const newSuggestions = state.users.users
-      user =>
+      .filter(
-        user.screen_name && user.name && (
+        (user) =>
-          user.screen_name.toLowerCase().startsWith(noPrefix) ||
+          user.screen_name &&
-            user.name.toLowerCase().startsWith(noPrefix))
+          user.name &&
-    ).slice(0, 20).sort((a, b) => {
+          (user.screen_name.toLowerCase().startsWith(noPrefix) ||
+            user.name.toLowerCase().startsWith(noPrefix)),
+      )
+      .slice(0, 20)
+      .sort((a, b) => {
         let aScore = 0
         let bScore = 0
 
@@ -116,12 +133,13 @@ export const suggestUsers = ({ dispatch, state }) => {
         const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1
 
         return diff + nameAlphabetically + screenNameAlphabetically
-    }).map((user) => ({
+      })
+      .map((user) => ({
         user,
         displayText: user.screen_name_ui,
         detailText: user.name,
         imageUrl: user.profile_image_url_original,
-      replacement: '@' + user.screen_name + ' '
+        replacement: '@' + user.screen_name + ' ',
       }))
 
     suggestions = newSuggestions || []

src/components/emoji_picker/emoji_picker.js

@@ -1,24 +1,26 @@
+import { chunk, debounce, trim } from 'lodash'
 import { defineAsyncComponent } from 'vue'
-import Checkbox from '../checkbox/checkbox.vue'
+
 import Popover from 'src/components/popover/popover.vue'
-import StillImage from '../still-image/still-image.vue'
 import { ensureFinalFallback } from '../../i18n/languages.js'
+import Checkbox from '../checkbox/checkbox.vue'
+import StillImage from '../still-image/still-image.vue'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faBoxOpen,
-  faStickyNote,
-  faSmileBeam,
-  faSmile,
-  faUser,
-  faPaw,
-  faIceCream,
-  faBus,
   faBasketballBall,
-  faLightbulb,
+  faBoxOpen,
+  faBus,
   faCode,
-  faFlag
+  faFlag,
+  faIceCream,
+  faLightbulb,
+  faPaw,
+  faSmile,
+  faSmileBeam,
+  faStickyNote,
+  faUser,
 } from '@fortawesome/free-solid-svg-icons'
-import { debounce, trim, chunk } from 'lodash'
 
 library.add(
   faBoxOpen,
@@ -32,7 +34,7 @@ library.add(
   faBasketballBall,
   faLightbulb,
   faCode,
-  faFlag
+  faFlag,
 )
 
 const UNICODE_EMOJI_GROUP_ICON = {
@@ -44,16 +46,16 @@ const UNICODE_EMOJI_GROUP_ICON = {
   activities: 'basketball-ball',
   objects: 'lightbulb',
   symbols: 'code',
-  flags: 'flag'
+  flags: 'flag',
 }
 
 const maybeLocalizedKeywords = (emoji, languages, nameLocalizer) => {
   const res = [emoji.displayText, nameLocalizer(emoji)]
   if (emoji.annotations) {
-    languages.forEach(lang => {
+    languages.forEach((lang) => {
       const keywords = emoji.annotations[lang]?.keywords || []
       const name = emoji.annotations[lang]?.name
-      res.push(...(keywords.concat([name]).filter(k => k)))
+      res.push(...keywords.concat([name]).filter((k) => k))
     })
   }
   return res
@@ -66,8 +68,8 @@ const filterByKeyword = (list, keyword = '', languages, nameLocalizer) => {
   const orderedEmojiList = []
   for (const emoji of list) {
     const indices = maybeLocalizedKeywords(emoji, languages, nameLocalizer)
-      .map(k => k.toLowerCase().indexOf(keywordLowercase))
+      .map((k) => k.toLowerCase().indexOf(keywordLowercase))
-      .filter(k => k > -1)
+      .filter((k) => k > -1)
 
     const indexOfKeyword = indices.length ? Math.min(...indices) : -1
 
@@ -84,11 +86,13 @@ const filterByKeyword = (list, keyword = '', languages, nameLocalizer) => {
 const getOffset = (elem) => {
   const style = elem.style.transform
   const res = /translateY\((\d+)px\)/.exec(style)
-  if (!res) { return 0 }
+  if (!res) {
+    return 0
+  }
   return res[1]
 }
 
-const toHeaderId = id => {
+const toHeaderId = (id) => {
   return id.replace(/^row-\d+-/, '')
 }
 
@@ -97,18 +101,18 @@ const EmojiPicker = {
     enableStickerPicker: {
       required: false,
       type: Boolean,
-      default: true
+      default: true,
     },
     hideCustomEmoji: {
       required: false,
       type: Boolean,
-      default: false
+      default: false,
-    }
+    },
   },
   inject: {
     popoversZLayer: {
-      default: ''
+      default: '',
-    }
+    },
   },
   data() {
     return {
@@ -125,14 +129,16 @@ const EmojiPicker = {
       emojiRefs: {},
       filteredEmojiGroups: [],
       emojiSize: 0,
-      width: 0
+      width: 0,
     }
   },
   components: {
-    StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
+    StickerPicker: defineAsyncComponent(
+      () => import('../sticker_picker/sticker_picker.vue'),
+    ),
     Checkbox,
     StillImage,
-    Popover
+    Popover,
   },
   methods: {
     groupScroll(e) {
@@ -163,7 +169,7 @@ const EmojiPicker = {
         emojiSizeReal = emojiSizeValue
       }
 
-      const fullEmojiSize = emojiSizeReal + (2 * 0.2 * fontSizeMultiplier * 14)
+      const fullEmojiSize = emojiSizeReal + 2 * 0.2 * fontSizeMultiplier * 14
       this.emojiSize = fullEmojiSize
     },
     showPicker() {
@@ -179,7 +185,9 @@ const EmojiPicker = {
       this.$refs.popover.setAnchorEl(el)
     },
     setGroupRef(name) {
-      return el => { this.groupRefs[name] = el }
+      return (el) => {
+        this.groupRefs[name] = el
+      }
     },
     onPopoverShown() {
       this.$emit('show')
@@ -194,11 +202,17 @@ 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
       if (!this.keepOpen) {
         this.$refs.popover.hidePopover()
       }
-      this.$emit('emoji', { insertion: value, insertionUrl: emoji.imageUrl, keepOpen: this.keepOpen })
+      this.$emit('emoji', {
+        insertion: value,
+        insertionUrl: emoji.imageUrl,
+        keepOpen: this.keepOpen,
+      })
     },
     onScroll(startIndex, endIndex, visibleStartIndex, visibleEndIndex) {
       const target = this.$refs['emoji-groups'].$el
@@ -207,12 +221,16 @@ const EmojiPicker = {
     scrolledGroup(target, start, end) {
       const top = target.scrollTop + 5
       this.$nextTick(() => {
-        this.emojiItems.slice(start, end + 1).forEach(group => {
+        this.emojiItems.slice(start, end + 1).forEach((group) => {
           const headerId = toHeaderId(group.id)
           const ref = this.groupRefs['group-' + group.id]
-          if (!ref) { return }
+          if (!ref) {
+            return
+          }
           const elem = ref.$el.parentElement
-          if (!elem) { return }
+          if (!elem) {
+            return
+          }
           if (elem && getOffset(elem) <= top) {
             this.activeGroup = headerId
           }
@@ -228,7 +246,9 @@ const EmojiPicker = {
       const headerCont = this.$refs.header
       const currentScroll = headerCont.scrollLeft
       const currentScrollRight = currentScroll + headerCont.clientWidth
-      const setScroll = s => { headerCont.scrollLeft = s }
+      const setScroll = (s) => {
+        headerCont.scrollLeft = s
+      }
 
       const margin = 7 // .emoji-tabs-item: padding
       if (left - margin < currentScroll) {
@@ -239,7 +259,7 @@ const EmojiPicker = {
     },
     highlight(groupId) {
       this.setShowStickers(false)
-      const indexInList = this.emojiItems.findIndex(k => k.id === groupId)
+      const indexInList = this.emojiItems.findIndex((k) => k.id === groupId)
       this.$refs['emoji-groups'].scrollToItem(indexInList)
     },
     updateScrolledClass(target) {
@@ -258,7 +278,12 @@ const EmojiPicker = {
       this.showingStickers = value
     },
     filterByKeyword(list, keyword) {
-      return filterByKeyword(list, keyword, this.languages, this.maybeLocalizedEmojiName)
+      return filterByKeyword(
+        list,
+        keyword,
+        this.languages,
+        this.maybeLocalizedEmojiName,
+      )
     },
     onShowing() {
       const oldContentLoaded = this.contentLoaded
@@ -279,11 +304,11 @@ const EmojiPicker = {
     },
     getFilteredEmojiGroups() {
       return this.allEmojiGroups
-        .map(group => ({
+        .map((group) => ({
           ...group,
-          emojis: this.filterByKeyword(group.emojis, trim(this.keyword))
+          emojis: this.filterByKeyword(group.emojis, trim(this.keyword)),
         }))
-        .filter(group => group.emojis.length > 0)
+        .filter((group) => group.emojis.length > 0)
     },
     recalculateItemPerRow() {
       this.$nextTick(() => {
@@ -292,7 +317,7 @@ const EmojiPicker = {
         }
         this.width = this.$refs['emoji-groups'].$el.clientWidth
       })
-    }
+    },
   },
   watch: {
     keyword() {
@@ -301,7 +326,7 @@ const EmojiPicker = {
     },
     allCustomGroups() {
       this.filteredEmojiGroups = this.getFilteredEmojiGroups()
-    }
+    },
   },
   computed: {
     minItemSize() {
@@ -343,11 +368,11 @@ const EmojiPicker = {
       return Object.keys(this.allCustomGroups)[0]
     },
     unicodeEmojiGroups() {
-      return this.$store.getters.standardEmojiGroupList.map(group => ({
+      return this.$store.getters.standardEmojiGroupList.map((group) => ({
         id: `standard-${group.id}`,
         text: this.$t(`emoji.unicode_groups.${group.id}`),
         icon: UNICODE_EMOJI_GROUP_ICON[group.id],
-        emojis: group.emojis
+        emojis: group.emojis,
       }))
     },
     allEmojiGroups() {
@@ -364,21 +389,24 @@ const EmojiPicker = {
       }, 500)
     },
     emojiItems() {
-      return this.filteredEmojiGroups.map(group =>
+      return this.filteredEmojiGroups
-        chunk(group.emojis, this.itemPerRow)
+        .map((group) =>
-          .map((items, index) => ({
+          chunk(group.emojis, this.itemPerRow).map((items, index) => ({
             ...group,
             id: index === 0 ? group.id : `row-${index}-${group.id}`,
             emojis: items,
-            isFirstRow: index === 0
+            isFirstRow: index === 0,
-          })))
+          })),
+        )
         .reduce((a, c) => a.concat(c), [])
     },
     languages() {
-      return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)
+      return ensureFinalFallback(
+        this.$store.getters.mergedConfig.interfaceLanguage,
+      )
     },
     maybeLocalizedEmojiName() {
-      return emoji => {
+      return (emoji) => {
         if (!emoji.annotations) {
           return emoji.displayText
         }
@@ -398,8 +426,8 @@ const EmojiPicker = {
     },
     isInModal() {
       return this.popoversZLayer === 'modals'
-    }
+    },
-  }
+  },
 }
 
 export default EmojiPicker

src/components/emoji_reactions/emoji_reactions.js

@@ -1,18 +1,11 @@
+import StillImage from 'src/components/still-image/still-image.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserListPopover from '../user_list_popover/user_list_popover.vue'
-import StillImage from 'src/components/still-image/still-image.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faPlus,
-  faMinus,
-  faCheck
-} from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+import { library } from '@fortawesome/fontawesome-svg-core'
-  faPlus,
+import { faCheck, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons'
-  faMinus,
+
-  faCheck
+library.add(faPlus, faMinus, faCheck)
-)
 
 const EMOJI_REACTION_COUNT_CUTOFF = 12
 
@@ -21,11 +14,11 @@ const EmojiReactions = {
   components: {
     UserAvatar,
     UserListPopover,
-    StillImage
+    StillImage,
   },
   props: ['status'],
   data: () => ({
-    showAll: false
+    showAll: false,
   }),
   computed: {
     tooManyReactions() {
@@ -49,20 +42,25 @@ const EmojiReactions = {
       return !!this.$store.state.users.currentUser
     },
     remoteInteractionLink() {
-      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
+      return this.$store.getters.remoteInteractionLink({
-    }
+        statusId: this.status.id,
+      })
+    },
   },
   methods: {
     toggleShowAll() {
       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
     },
     async fetchEmojiReactionsByIfMissing() {
-      const hasNoAccounts = this.status.emoji_reactions.find(r => !r.accounts)
+      const hasNoAccounts = this.status.emoji_reactions.find((r) => !r.accounts)
       if (hasNoAccounts) {
-        return await this.$store.dispatch('fetchEmojiReactionsBy', this.status.id)
+        return await this.$store.dispatch(
+          'fetchEmojiReactionsBy',
+          this.status.id,
+        )
       }
     },
     reactWith(emoji) {
@@ -87,13 +85,17 @@ const EmojiReactions = {
           'emoji-reaction-count-button',
           {
             '-picked-reaction': this.reactedWith(reaction.name),
-            toggled: this.reactedWith(reaction.name)
+            toggled: this.reactedWith(reaction.name),
-          }
+          },
         ],
-        'aria-label': this.$t('status.reaction_count_label', { num: reaction.count }, reaction.count)
+        'aria-label': this.$t(
-      }
+          'status.reaction_count_label',
-    }
+          { num: reaction.count },
+          reaction.count,
+        ),
       }
+    },
+  },
 }
 
 export default EmojiReactions

src/components/exporter/exporter.js

@@ -1,45 +1,47 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+library.add(faCircleNotch)
-  faCircleNotch
-)
 
 const Exporter = {
   props: {
     getContent: {
       type: Function,
-      required: true
+      required: true,
     },
     filename: {
       type: String,
-      default: 'export.csv'
+      default: 'export.csv',
     },
     exportButtonLabel: { type: String },
-    processingMessage: { type: String }
+    processingMessage: { type: String },
   },
   data() {
     return {
-      processing: false
+      processing: false,
     }
   },
   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)
       })
-    }
+    },
-  }
+  },
 }
 
 export default Exporter

src/components/extra_notifications/extra_notifications.js

@@ -1,55 +1,72 @@
-import { mapGetters } from 'vuex'
 import { mapState as mapPiniaState } from 'pinia'
+import { mapGetters } from 'vuex'
+
 import { useAnnouncementsStore } from 'src/stores/announcements'
+import { useInterfaceStore } from 'src/stores/interface'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faUserPlus,
+  faBullhorn,
   faComments,
-  faBullhorn
+  faUserPlus,
 } from '@fortawesome/free-solid-svg-icons'
 
-import { useInterfaceStore } from 'src/stores/interface'
+library.add(faUserPlus, faComments, faBullhorn)
-
-library.add(
-  faUserPlus,
-  faComments,
-  faBullhorn
-)
 
 const ExtraNotifications = {
   computed: {
     shouldShowChats() {
-      return this.mergedConfig.showExtraNotifications && this.mergedConfig.showChatsInExtraNotifications && this.unreadChatCount
+      return (
+        this.mergedConfig.showExtraNotifications &&
+        this.mergedConfig.showChatsInExtraNotifications &&
+        this.unreadChatCount
+      )
     },
     shouldShowAnnouncements() {
-      return this.mergedConfig.showExtraNotifications && this.mergedConfig.showAnnouncementsInExtraNotifications && this.unreadAnnouncementCount
+      return (
+        this.mergedConfig.showExtraNotifications &&
+        this.mergedConfig.showAnnouncementsInExtraNotifications &&
+        this.unreadAnnouncementCount
+      )
     },
     shouldShowFollowRequests() {
-      return this.mergedConfig.showExtraNotifications && this.mergedConfig.showFollowRequestsInExtraNotifications && this.followRequestCount
+      return (
+        this.mergedConfig.showExtraNotifications &&
+        this.mergedConfig.showFollowRequestsInExtraNotifications &&
+        this.followRequestCount
+      )
     },
     hasAnythingToShow() {
-      return this.shouldShowChats || this.shouldShowAnnouncements || this.shouldShowFollowRequests
+      return (
+        this.shouldShowChats ||
+        this.shouldShowAnnouncements ||
+        this.shouldShowFollowRequests
+      )
     },
     shouldShowCustomizationTip() {
-      return this.mergedConfig.showExtraNotificationsTip && this.hasAnythingToShow
+      return (
+        this.mergedConfig.showExtraNotificationsTip && this.hasAnythingToShow
+      )
     },
     currentUser() {
       return this.$store.state.users.currentUser
     },
     ...mapGetters(['unreadChatCount', 'followRequestCount', 'mergedConfig']),
     ...mapPiniaState(useAnnouncementsStore, {
-      unreadAnnouncementCount: 'unreadAnnouncementCount'
+      unreadAnnouncementCount: 'unreadAnnouncementCount',
-    })
+    }),
   },
   methods: {
     openNotificationSettings() {
       return useInterfaceStore().openSettingsModalTab('notifications')
     },
     dismissConfigurationTip() {
-      return this.$store.dispatch('setOption', { name: 'showExtraNotificationsTip', value: false })
+      return this.$store.dispatch('setOption', {
-    }
+        name: 'showExtraNotificationsTip',
-  }
+        value: false,
+      })
+    },
+  },
 }
 
 export default ExtraNotifications

src/components/features_panel/features_panel.js

@@ -2,15 +2,33 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for
 
 const FeaturesPanel = {
   computed: {
-    shout: function () { return this.$store.state.instance.shoutAvailable },
+    shout: function () {
-    pleromaChatMessages: function () { return this.$store.state.instance.pleromaChatMessagesAvailable },
+      return this.$store.state.instance.shoutAvailable
-    gopher: function () { return this.$store.state.instance.gopherAvailable },
+    },
-    whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled },
+    pleromaChatMessages: function () {
-    mediaProxy: function () { return this.$store.state.instance.mediaProxyAvailable },
+      return this.$store.state.instance.pleromaChatMessagesAvailable
-    minimalScopesMode: function () { return this.$store.state.instance.minimalScopesMode },
+    },
-    textlimit: function () { return this.$store.state.instance.textlimit },
+    gopher: function () {
-    uploadlimit: function () { return fileSizeFormatService.fileSizeFormat(this.$store.state.instance.uploadlimit) }
+      return this.$store.state.instance.gopherAvailable
-  }
+    },
+    whoToFollow: function () {
+      return this.$store.state.instance.suggestionsEnabled
+    },
+    mediaProxy: function () {
+      return this.$store.state.instance.mediaProxyAvailable
+    },
+    minimalScopesMode: function () {
+      return this.$store.state.instance.minimalScopesMode
+    },
+    textlimit: function () {
+      return this.$store.state.instance.textlimit
+    },
+    uploadlimit: function () {
+      return fileSizeFormatService.fileSizeFormat(
+        this.$store.state.instance.uploadlimit,
+      )
+    },
+  },
 }
 
 export default FeaturesPanel

src/components/flash/flash.js

@@ -1,14 +1,12 @@
 import RuffleService from '../../services/ruffle_service/ruffle_service.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
+  faExclamationTriangle,
   faStop,
-  faExclamationTriangle
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+library.add(faStop, faExclamationTriangle)
-  faStop,
-  faExclamationTriangle
-)
 
 const Flash = {
   props: ['src'],
@@ -16,7 +14,7 @@ const Flash = {
     return {
       player: false, // can be true, "hidden", false. hidden = element exists
       loaded: false,
-      ruffleInstance: null
+      ruffleInstance: null,
     }
   },
   methods: {
@@ -26,15 +24,18 @@ const Flash = {
       RuffleService.getRuffle().then((ruffle) => {
         const player = ruffle.newest().createPlayer()
         player.config = {
-          letterbox: 'on'
+          letterbox: 'on',
         }
         const container = this.$refs.container
         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'
           })
@@ -46,8 +47,8 @@ const Flash = {
       this.ruffleInstance && this.ruffleInstance.remove()
       this.player = false
       this.$emit('playerClosed')
-    }
+    },
-  }
+  },
 }
 
 export default Flash

src/components/follow_button/follow_button.js

@@ -1,14 +1,17 @@
+import {
+  requestFollow,
+  requestUnfollow,
+} from '../../services/follow_manipulate/follow_manipulate'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
-import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 export default {
   props: ['relationship', 'user', 'labelFollowing', 'buttonClass'],
   components: {
-    ConfirmModal
+    ConfirmModal,
   },
   data() {
     return {
       inProgress: false,
-      showingConfirmUnfollow: false
+      showingConfirmUnfollow: false,
     }
   },
   computed: {
@@ -40,7 +43,7 @@ export default {
     },
     disabled() {
       return this.inProgress || this.user.deactivated
-    }
+    },
   },
   methods: {
     showConfirmUnfollow() {
@@ -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,10 +75,13 @@ 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_card/follow_card.js

@@ -1,18 +1,15 @@
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
-import RemoteFollow from '../remote_follow/remote_follow.vue'
 import FollowButton from '../follow_button/follow_button.vue'
+import RemoteFollow from '../remote_follow/remote_follow.vue'
 import RemoveFollowerButton from '../remove_follower_button/remove_follower_button.vue'
 
 const FollowCard = {
-  props: [
+  props: ['user', 'noFollowsYou'],
-    'user',
-    'noFollowsYou'
-  ],
   components: {
     BasicUserCard,
     RemoteFollow,
     FollowButton,
-    RemoveFollowerButton
+    RemoveFollowerButton,
   },
   computed: {
     isMe() {
@@ -23,8 +20,8 @@ const FollowCard = {
     },
     relationship() {
       return this.$store.getters.relationship(this.user.id)
-    }
+    },
-  }
+  },
 }
 
 export default FollowCard

src/components/follow_request_card/follow_request_card.js

@@ -1,23 +1,25 @@
+import { notificationsFromStore } from '../../services/notification_utils/notification_utils.js'
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
-import { notificationsFromStore } from '../../services/notification_utils/notification_utils.js'
 
 const FollowRequestCard = {
   props: ['user'],
   components: {
     BasicUserCard,
-    ConfirmModal
+    ConfirmModal,
   },
   data() {
     return {
       showingApproveConfirmDialog: false,
-      showingDenyConfirmDialog: false
+      showingDenyConfirmDialog: false,
     }
   },
   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,9 +50,9 @@ const FollowRequestCard = {
       this.$store.dispatch('markSingleNotificationAsSeen', { id: notifId })
       this.$store.dispatch('updateNotification', {
         id: notifId,
-        updater: notification => {
+        updater: (notification) => {
           notification.type = 'follow'
-        }
+        },
       })
       this.hideApproveConfirmDialog()
     },
@@ -63,13 +65,14 @@ 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)
         })
       this.hideDenyConfirmDialog()
-    }
+    },
   },
   computed: {
     mergedConfig() {
@@ -80,8 +83,8 @@ const FollowRequestCard = {
     },
     shouldConfirmDeny() {
       return this.mergedConfig.modalOnDenyFollow
-    }
+    },
-  }
+  },
 }
 
 export default FollowRequestCard

src/components/follow_requests/follow_requests.js

@@ -2,13 +2,13 @@ import FollowRequestCard from '../follow_request_card/follow_request_card.vue'
 
 const FollowRequests = {
   components: {
-    FollowRequestCard
+    FollowRequestCard,
   },
   computed: {
     requests() {
       return this.$store.state.api.followRequests
-    }
+    },
-  }
+  },
 }
 
 export default FollowRequests

src/components/font_control/font_control.js

@@ -1,30 +1,24 @@
-import Select from '../select/select.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Popover from 'src/components/popover/popover.vue'
 import { useInterfaceStore } from 'src/stores/interface'
+import Select from '../select/select.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faExclamationTriangle,
+  faFont,
   faKeyboard,
-  faFont
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+library.add(faExclamationTriangle, faKeyboard, faFont)
-  faExclamationTriangle,
-  faKeyboard,
-  faFont
-)
 
 export default {
   components: {
     Select,
     Checkbox,
-    Popover
+    Popover,
   },
-  props: [
+  props: ['name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'],
-    'name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'
-  ],
   mounted() {
     useInterfaceStore().queryLocalFonts()
   },
@@ -37,14 +31,14 @@ export default {
         'serif',
         'sans-serif',
         'monospace',
-        ...(this.options || [])
+        ...(this.options || []),
-      ].filter(_ => _)
+      ].filter((_) => _),
     }
   },
   methods: {
     toggleManualEntry() {
       this.manualEntry = !this.manualEntry
-    }
+    },
   },
   computed: {
     present() {
@@ -55,6 +49,6 @@ export default {
     },
     localFontsSize() {
       return useInterfaceStore().localFonts?.length
-    }
+    },
-  }
+  },
 }

src/components/friends_timeline/friends_timeline.js

@@ -1,11 +1,14 @@
 import Timeline from '../timeline/timeline.vue'
+
 const FriendsTimeline = {
   components: {
-    Timeline
+    Timeline,
   },
   computed: {
-    timeline () { return this.$store.state.statuses.timelines.friends }
+    timeline() {
-  }
+      return this.$store.state.statuses.timelines.friends
+    },
+  },
 }
 
 export default FriendsTimeline

src/components/fun_text.style.js

@@ -4,37 +4,37 @@ export default {
   virtual: true,
   variants: {
     greentext: '.greentext',
-    cyantext: '.cyantext'
+    cyantext: '.cyantext',
   },
   states: {
-    faint: '.faint'
+    faint: '.faint',
   },
   defaultRules: [
     {
       directives: {
         textColor: '--text',
-        textAuto: 'preserve'
+        textAuto: 'preserve',
-      }
+      },
     },
     {
       state: ['faint'],
       directives: {
-        textOpacity: 0.5
+        textOpacity: 0.5,
-      }
+      },
     },
     {
       variant: 'greentext',
       directives: {
         textColor: '--cGreen',
-        textAuto: 'preserve'
+        textAuto: 'preserve',
-      }
+      },
     },
     {
       variant: 'cyantext',
       directives: {
         textColor: '--cBlue',
-        textAuto: 'preserve'
+        textAuto: 'preserve',
-      }
+      },
-    }
+    },
-  ]
+  ],
 }

src/components/gallery/gallery.js

@@ -1,6 +1,7 @@
+import { set, sumBy } from 'lodash'
+
 import { useMediaViewerStore } from 'src/stores/media_viewer'
 import Attachment from '../attachment/attachment.vue'
-import { sumBy, set } from 'lodash'
 
 const Gallery = {
   props: [
@@ -17,12 +18,12 @@ const Gallery = {
     'shiftUpAttachment',
     'shiftDnAttachment',
     'editAttachment',
-    'grid'
+    'grid',
   ],
   data() {
     return {
       sizes: {},
-      hidingLong: true
+      hidingLong: true,
     }
   },
   components: { Attachment },
@@ -31,35 +32,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() {
@@ -83,7 +103,7 @@ const Gallery = {
       } else {
         return this.attachmentsDimensionalScore > 1
       }
-    }
+    },
   },
   methods: {
     onNaturalSizeLoad({ id, width, height }) {
@@ -93,11 +113,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) {
@@ -113,8 +133,8 @@ const Gallery = {
     },
     onMedia() {
       useMediaViewerStore().setMedia(this.attachments)
-    }
+    },
-  }
+  },
 }
 
 export default Gallery

src/components/global_notice_list/global_notice_list.js

@@ -1,24 +1,21 @@
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faTimes
-} from '@fortawesome/free-solid-svg-icons'
 import { useInterfaceStore } from 'src/stores/interface'
 
-library.add(
+import { library } from '@fortawesome/fontawesome-svg-core'
-  faTimes
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
-)
+
+library.add(faTimes)
 
 const GlobalNoticeList = {
   computed: {
     notices() {
       return useInterfaceStore().globalNotices
-    }
+    },
   },
   methods: {
     closeNotice(notice) {
       useInterfaceStore().removeGlobalNotice(notice)
-    }
+    },
-  }
+  },
 }
 
 export default GlobalNoticeList

src/components/hashtag_link/hashtag_link.js

@@ -5,17 +5,17 @@ const HashtagLink = {
   props: {
     url: {
       required: true,
-      type: String
+      type: String,
     },
     content: {
       required: true,
-      type: String
+      type: String,
     },
     tag: {
       required: false,
       type: String,
-      default: ''
+      default: '',
-    }
+    },
   },
   methods: {
     onClick() {
@@ -29,8 +29,8 @@ const HashtagLink = {
     },
     generateTagLink(tag) {
       return `/tag/${tag}`
-    }
+    },
-  }
+  },
 }
 
 export default HashtagLink

src/components/icon.style.js

@@ -7,8 +7,8 @@ export default {
       component: 'Icon',
       directives: {
         textColor: '$blend(--stack 0.5 --parent--text)',
-        textAuto: 'no-auto'
+        textAuto: 'no-auto',
-      }
+      },
-    }
+    },
-  ]
+  ],
 }

src/components/image_cropper/image_cropper.js

@@ -1,29 +1,26 @@
 import 'cropperjs' // This adds all of the cropperjs's components into DOM
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faCircleNotch
-} from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+import { library } from '@fortawesome/fontawesome-svg-core'
-  faCircleNotch
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
-)
+
+library.add(faCircleNotch)
 
 const ImageCropper = {
   props: {
     // Mime-types to accept, i.e. which filetypes to accept (.gif, .png, etc.)
     mimes: {
       type: String,
-      default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
+      default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',
     },
     // Fixed aspect-ratio for selection box
     aspectRatio: {
-      type: Number
+      type: Number,
-    }
+    },
   },
   data() {
     return {
       dataUrl: undefined,
-      filename: undefined
+      filename: undefined,
     }
   },
   emits: [
@@ -44,7 +41,7 @@ const ImageCropper = {
         cropperPromise = Promise.resolve()
       }
 
-      cropperPromise.then(canvas => {
+      cropperPromise.then((canvas) => {
         this.$emit('submit', { canvas, file: this.file })
       })
     },
@@ -66,10 +63,10 @@ const ImageCropper = {
     },
     inSelection(selection, maxSelection) {
       return (
-        selection.x >= maxSelection.x
+        selection.x >= maxSelection.x &&
-        && selection.y >= maxSelection.y
+        selection.y >= maxSelection.y &&
-        && (selection.x + selection.width) <= (maxSelection.x + maxSelection.width)
+        selection.x + selection.width <= maxSelection.x + maxSelection.width &&
-        && (selection.y + selection.height) <= (maxSelection.y + maxSelection.height)
+        selection.y + selection.height <= maxSelection.y + maxSelection.height
       )
     },
     onCropperSelectionChange(event) {
@@ -84,10 +81,10 @@ const ImageCropper = {
       }
 
       if (!this.inSelection(selection, maxSelection)) {
-        event.preventDefault();
+        event.preventDefault()
-      }
       }
     },
+  },
   mounted() {
     // listen for input file changes
     const fileInput = this.$refs.input
@@ -96,7 +93,7 @@ const ImageCropper = {
   beforeUnmount: function () {
     const fileInput = this.$refs.input
     fileInput.removeEventListener('change', this.readFile)
-  }
+  },
 }
 
 export default ImageCropper

src/components/importer/importer.js

@@ -1,30 +1,24 @@
 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: {
     submitHandler: {
       type: Function,
-      required: true
+      required: true,
     },
     submitButtonLabel: { type: String },
     successMessage: { type: String },
-    errorMessage: { type: String }
+    errorMessage: { type: String },
   },
   data() {
     return {
       file: null,
       error: false,
       success: false,
-      submitting: false
+      submitting: false,
     }
   },
   methods: {
@@ -35,15 +29,21 @@ 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
       this.error = false
-    }
+    },
-  }
+  },
 }
 
 export default Importer

src/components/input.style.js

@@ -4,91 +4,96 @@ export default {
   states: {
     hover: ':is(:hover, :focus-visible):not(.disabled)',
     focused: ':focus-within',
-    disabled: '.disabled'
+    disabled: '.disabled',
   },
   variants: {
     checkbox: '.-checkbox',
-    radio: '.-radio'
+    radio: '.-radio',
   },
-  validInnerComponents: [
+  validInnerComponents: ['Text', 'Icon'],
-    'Text',
-    'Icon'
-  ],
   defaultRules: [
     {
       component: 'Root',
       directives: {
-        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2), inset 0 0 2 #000000 / 0.15, 1 0 1 1 --text / 0.15, -1 0 1 1 --text / 0.15',
+        '--defaultInputBevel':
+          'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2), inset 0 0 2 #000000 / 0.15, 1 0 1 1 --text / 0.15, -1 0 1 1 --text / 0.15',
         '--defaultInputHoverGlow': 'shadow | 0 0 4 --text / 0.5',
-        '--defaultInputFocusGlow': 'shadow | 0 0 4 4 --link / 0.5'
+        '--defaultInputFocusGlow': 'shadow | 0 0 4 4 --link / 0.5',
-      }
+      },
     },
     {
       variant: 'checkbox',
       directives: {
-        roundness: 1
+        roundness: 1,
-      }
+      },
     },
     {
       directives: {
         '--font': 'generic | inherit',
         background: '--fg, -5',
         roundness: 3,
-        shadow: [{
+        shadow: [
+          {
             x: 0,
             y: 0,
             blur: 2,
             spread: 0,
             color: '#000000',
-          alpha: 1
+            alpha: 1,
-        }, '--defaultInputBevel']
+          },
-      }
+          '--defaultInputBevel',
+        ],
+      },
     },
     {
       state: ['hover'],
       directives: {
-        shadow: ['--defaultInputHoverGlow', '--defaultInputBevel']
+        shadow: ['--defaultInputHoverGlow', '--defaultInputBevel'],
-      }
+      },
     },
     {
       state: ['focused'],
       directives: {
-        shadow: ['--defaultInputFocusGlow', '--defaultInputBevel']
+        shadow: ['--defaultInputFocusGlow', '--defaultInputBevel'],
-      }
+      },
     },
     {
       state: ['focused', 'hover'],
       directives: {
-        shadow: ['--defaultInputFocusGlow', '--defaultInputHoverGlow', '--defaultInputBevel']
+        shadow: [
-      }
+          '--defaultInputFocusGlow',
+          '--defaultInputHoverGlow',
+          '--defaultInputBevel',
+        ],
+      },
     },
     {
       state: ['disabled'],
       directives: {
-        background: '--parent'
+        background: '--parent',
-      }
+      },
     },
     {
       component: 'Text',
       parent: {
         component: 'Input',
-        state: ['disabled']
+        state: ['disabled'],
       },
       directives: {
         textOpacity: 0.25,
-        textOpacityMode: 'blend'
+        textOpacityMode: 'blend',
-      }
+      },
     },
     {
       component: 'Icon',
       parent: {
         component: 'Input',
-        state: ['disabled']
+        state: ['disabled'],
       },
       directives: {
         textOpacity: 0.25,
-        textOpacityMode: 'blend'
+        textOpacityMode: 'blend',
-      }
+      },
-    }
+    },
-  ]
+  ],
 }

src/components/instance_specific_panel/instance_specific_panel.js

@@ -2,8 +2,8 @@ const InstanceSpecificPanel = {
   computed: {
     instanceSpecificPanelContent() {
       return this.$store.state.instance.instanceSpecificPanelContent
-    }
+    },
-  }
+  },
 }
 
 export default InstanceSpecificPanel

src/components/interactions/interactions.js

@@ -1,5 +1,5 @@
-import Notifications from '../notifications/notifications.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+import Notifications from '../notifications/notifications.vue'
 
 const tabModeDict = {
   mentions: ['mention'],
@@ -8,26 +8,29 @@ const tabModeDict = {
   follows: ['follow'],
   reactions: ['pleroma:emoji_reaction'],
   reports: ['pleroma:report'],
-  moves: ['move']
+  moves: ['move'],
 }
 
 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,
-      canSeeReports: this.$store.state.users.currentUser.privileges.includes('reports_manage_reports')
+      canSeeReports: this.$store.state.users.currentUser.privileges.includes(
+        'reports_manage_reports',
+      ),
     }
   },
   methods: {
     onModeSwitch(key) {
       this.filterMode = tabModeDict[key]
-    }
+    },
   },
   components: {
     Notifications,
-    TabSwitcher
+    TabSwitcher,
-  }
+  },
 }
 
 export default Interactions

src/components/interface_language_switcher/interface_language_switcher.js

@@ -1,27 +1,26 @@
-import localeService from '../../services/locale/locale.service.js'
+import { v4 as uuidv4 } from 'uuid'
 
-import Select from '../select/select.vue'
 import ProfileSettingIndicator from 'src/components/settings_modal/helpers/profile_setting_indicator.vue'
-
+import localeService from '../../services/locale/locale.service.js'
-import { v4 as uuidv4 } from 'uuid';
+import Select from '../select/select.vue'
 
 export default {
   components: {
     Select,
-    ProfileSettingIndicator
+    ProfileSettingIndicator,
   },
   props: {
     // List of languages (or just one language)
     modelValue: {
       type: [Array, String],
-      required: true
+      required: true,
     },
     // Is this setting stored in user profile (true) or elsewhere (false)
     // Doesn't affect storage, just shows an icon if true
     profile: {
       type: Boolean,
-      default: false
+      default: false,
-    }
+    },
   },
   emits: ['update:modelValue'],
   computed: {
@@ -33,12 +32,14 @@ export default {
     },
     controlledLanguage: {
       get: function () {
-        return Array.isArray(this.modelValue) ? this.modelValue : [this.modelValue]
+        return Array.isArray(this.modelValue)
+          ? this.modelValue
+          : [this.modelValue]
       },
       set: function (val) {
         this.$emit('update:modelValue', val)
-      }
+      },
-    }
+    },
   },
 
   methods: {
@@ -57,6 +58,6 @@ export default {
       const lang = [...this.controlledLanguage]
       lang.splice(index, 1)
       this.controlledLanguage = lang
-    }
+    },
-  }
+  },
 }

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

@@ -2,14 +2,10 @@ import { mapGetters } from 'vuex'
 
 const LinkPreview = {
   name: 'LinkPreview',
-  props: [
+  props: ['card', 'size', 'nsfw'],
-    'card',
-    'size',
-    'nsfw'
-  ],
   data() {
     return {
-      imageLoaded: false
+      imageLoaded: false,
     }
   },
   computed: {
@@ -28,9 +24,7 @@ const LinkPreview = {
     hideNsfwConfig() {
       return this.mergedConfig.hideNsfw
     },
-    ...mapGetters([
+    ...mapGetters(['mergedConfig']),
-      'mergedConfig'
-    ])
   },
   created() {
     if (this.useImage) {
@@ -40,7 +34,7 @@ const LinkPreview = {
       }
       newImg.src = this.card.image
     }
-  }
+  },
 }
 
 export default LinkPreview

src/components/link.style.js

@@ -3,22 +3,22 @@ export default {
   selector: 'a',
   virtual: true,
   states: {
-    faint: '.faint'
+    faint: '.faint',
   },
   defaultRules: [
     {
       component: 'Link',
       directives: {
-        textColor: '--link'
+        textColor: '--link',
-      }
+      },
     },
     {
       component: 'Link',
       state: ['faint'],
       directives: {
         textOpacity: 0.5,
-        textOpacityMode: 'fake'
+        textOpacityMode: 'fake',
-      }
+      },
-    }
+    },
-  ]
+  ],
 }

src/components/list/list.vue

@@ -29,20 +29,20 @@ export default {
   props: {
     items: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     getKey: {
       type: Function,
-      default: item => item.id
+      default: (item) => item.id,
     },
     getClass: {
       type: Function,
-      default: () => ''
+      default: () => '',
     },
     nonInteractive: {
       type: Boolean,
-      default: false
+      default: false,
-    }
+    },
-  }
+  },
 }
 </script>

src/components/lists/lists.js

@@ -4,16 +4,16 @@ import ListsCard from '../lists_card/lists_card.vue'
 const Lists = {
   data() {
     return {
-      isNew: false
+      isNew: false,
     }
   },
   components: {
-    ListsCard
+    ListsCard,
   },
   computed: {
     lists() {
       return useListsStore().allLists
-    }
+    },
   },
   methods: {
     cancelNewList() {
@@ -21,8 +21,8 @@ const Lists = {
     },
     newList() {
       this.isNew = true
-    }
+    },
-  }
+  },
 }
 
 export default Lists

src/components/lists_card/lists_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 ListsCard = {
-  props: [
+  props: ['list'],
-    'list'
-  ]
 }
 
 export default ListsCard