Merge branch 'develop' into stable

Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/215

.eslintignore

@@ -0,0 +1,2 @@
+build/*.js
+config/*.js

.eslintrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: '@babel/eslint-parser',
+    sourceType: 'module'
+  },
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  extends: [
+    'plugin:vue/recommended'
+  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue',
+    'import'
+  ],
+  // add your custom rules here
+  rules: {
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow async-await
+    'generator-star-spacing': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'vue/require-prop-types': 0,
+    'vue/no-unused-vars': 0,
+    'no-tabs': 0,
+    'vue/multi-word-component-names': 0,
+    'vue/no-reserved-component-names': 0
+  }
+}

.node-version

@@ -0,0 +1 @@
+7.2.1

.tool-versions

@@ -1 +0,0 @@
-nodejs 20.12.2

.woodpecker.yml

@@ -1,25 +1,23 @@
-labels:
+pipeline:
-  platform: linux/amd64
-
-steps:
   lint:
     when:
       event:
       - pull_request
-    image: node:20
+    image: node:18
     commands:
     - yarn
     - yarn lint
+    #- yarn stylelint
 
   test:
     when:
       event:
       - pull_request
-    image: node:20
+    image: node:18
     commands:
     - apt update
     - apt install firefox-esr -y --no-install-recommends
-    - yarn
+    - yarn 
     - yarn unit
 
   build:
@@ -29,7 +27,7 @@ steps:
       branch:
       - develop
       - stable
-    image: node:20
+    image: node:18
     commands:
     - yarn
     - yarn build
@@ -41,15 +39,15 @@ steps:
       branch:
       - develop
       - stable
-    image: node:20
+    image: node:18
     secrets:
     - SCW_ACCESS_KEY
     - SCW_SECRET_KEY
     - SCW_DEFAULT_ORGANIZATION_ID
     commands:
       - apt-get update && apt-get install -y rclone wget zip
-      - wget https://github.com/scaleway/scaleway-cli/releases/download/v2.30.0/scaleway-cli_2.30.0_linux_amd64
+      - wget https://github.com/scaleway/scaleway-cli/releases/download/v2.5.1/scaleway-cli_2.5.1_linux_amd64
-      - mv scaleway-cli_2.30.0_linux_amd64 scaleway-cli
+      - mv scaleway-cli_2.5.1_linux_amd64 scaleway-cli
       - chmod +x scaleway-cli
       - ./scaleway-cli object config install type=rclone
       - zip akkoma-fe.zip -r dist
@@ -71,8 +69,8 @@ steps:
     - SCW_DEFAULT_ORGANIZATION_ID
     commands:
     - apt-get update && apt-get install -y rclone wget git zip
-    - wget https://github.com/scaleway/scaleway-cli/releases/download/v2.30.0/scaleway-cli_2.30.0_linux_amd64
+    - wget https://github.com/scaleway/scaleway-cli/releases/download/v2.5.1/scaleway-cli_2.5.1_linux_amd64
-    - mv scaleway-cli_2.30.0_linux_amd64 scaleway-cli
+    - mv scaleway-cli_2.5.1_linux_amd64 scaleway-cli
     - chmod +x scaleway-cli
     - ./scaleway-cli object config install type=rclone
     - cd docs
@@ -80,4 +78,4 @@ steps:
     - mkdocs build
     - zip -r docs.zip site/*
     - cd site
-    - rclone copy . scaleway:akkoma-docs/frontend/$CI_COMMIT_BRANCH/ 
+    - rclone copy . scaleway:akkoma-docs/frontend/$CI_COMMIT_BRANCH/

README.md

@@ -1,4 +1,4 @@
-# Akkoma-FE
+# Akkoma-FE 
 
 ![English OK](https://img.shields.io/badge/English-OK-blueviolet) ![日本語OK](https://img.shields.io/badge/%E6%97%A5%E6%9C%AC%E8%AA%9E-OK-blueviolet)
 
@@ -8,7 +8,7 @@ This is a fork of Akkoma-FE from the Pleroma project, with support for new Akkom
 
 # For Translators
 
-The [Weblate UI](https://translate.akkoma.dev/projects/akkoma/pleroma-fe/) is recommended for adding or modifying translations for Akkoma-FE.
+The [Weblate UI](https://translate.akkoma.dev/projects/akkoma/pleroma-fe/) is recommended for adding or modifying translations for Akkoma-FE. 
 
 Alternatively, edit/create `src/i18n/$LANGUAGE_CODE.json` (where `$LANGUAGE_CODE` is the [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) for your language), then add your language to [src/i18n/messages.js](https://akkoma.dev/AkkomaGang/pleroma-fe/src/branch/develop/src/i18n/messages.js) if it doesn't already exist there.
 
@@ -20,11 +20,9 @@ To use Akkoma-FE in Akkoma, use the [frontend](https://docs.akkoma.dev/stable/ad
 
 ## Build Setup
 
-Make sure you have [Node.js](https://nodejs.org/) installed. You can check `/.woodpecker.yml` for which node version the Akkoma CI currently uses.
-
 ``` bash
 # install dependencies
-corepack enable
+npm install -g yarn
 yarn
 
 # serve with hot reload at localhost:8080
@@ -39,7 +37,7 @@ npm run unit
 
 # For Contributors:
 
-You can create file `/config/local.json` (see [example](https://akkoma.dev/AkkomaGang/akkoma-fe/src/branch/develop/config/local.example.json)) to enable some convenience dev options:
+You can create file `/config/local.json` (see [example](https://git.pleroma.social/pleroma/pleroma-fe/blob/develop/config/local.example.json)) to enable some convenience dev options:
 
 * `target`: makes local dev server redirect to some existing instance's BE instead of local BE, useful for testing things in near-production environment and searching for real-life use-cases.
 * `staticConfigPreference`: makes FE's `/static/config.json` take preference of BE-served `/api/statusnet/config.json`. Only works in dev mode.
@@ -54,4 +52,4 @@ Edit config.json for configuration.
 
 ### Login methods
 
-```loginMethod``` can be set to either ```password``` (the default) or ```token```, which will use the full oauth redirection flow, which is useful for SSO situations.
+```loginMethod``` can be set to either ```password``` (the default) or ```token```, which will use the full oauth redirection flow, which is useful for SSO situations. 

build/build.js

@@ -1,36 +1,36 @@
 // https://github.com/shelljs/shelljs
-require("./check-versions")();
+require('./check-versions')()
-require("shelljs/global");
+require('shelljs/global')
-env.NODE_ENV = "production";
+env.NODE_ENV = 'production'
 
-var path = require("path");
+var path = require('path')
-var config = require("../config");
+var config = require('../config')
-var webpack = require("webpack");
+var ora = require('ora')
-var webpackConfig = require("./webpack.prod.conf");
+var webpack = require('webpack')
+var webpackConfig = require('./webpack.prod.conf')
 
 console.log(
-  "  Tip:\n" +
+  '  Tip:\n' +
-    "  Built files are meant to be served over an HTTP server.\n" +
+  '  Built files are meant to be served over an HTTP server.\n' +
-    "  Opening index.html over file:// won't work.\n",
+  '  Opening index.html over file:// won\'t work.\n'
-);
+)
 
-var assetsPath = path.join(
+var spinner = ora('building for production...')
-  config.build.assetsRoot,
+spinner.start()
-  config.build.assetsSubDirectory,
+
-);
+var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
-rm("-rf", assetsPath);
+rm('-rf', assetsPath)
-mkdir("-p", assetsPath);
+mkdir('-p', assetsPath)
-cp("-R", "static/*", assetsPath);
+cp('-R', 'static/*', assetsPath)
 
 webpack(webpackConfig, function (err, stats) {
-  if (err) throw err;
+  spinner.stop()
-  process.stdout.write(
+  if (err) throw err
-    stats.toString({
+  process.stdout.write(stats.toString({
-      colors: true,
+    colors: true,
-      modules: false,
+    modules: false,
-      children: false,
+    children: false,
-      chunks: false,
+    chunks: false,
-      chunkModules: false,
+    chunkModules: false
-    }) + "\n",
+  }) + '\n')
-  );
+})
-});

build/dev-server.js

@@ -5,7 +5,7 @@ var path = require('path')
 var express = require('express')
 var webpack = require('webpack')
 var opn = require('opn')
-const { createProxyMiddleware } = require('http-proxy-middleware');
+var proxyMiddleware = require('http-proxy-middleware')
 var webpackConfig = process.env.NODE_ENV === 'testing'
   ? require('./webpack.prod.conf')
   : require('./webpack.dev.conf')
@@ -36,13 +36,7 @@ Object.keys(proxyTable).forEach(function (context) {
   if (typeof options === 'string') {
     options = { target: options }
   }
-  const targetUrl = new URL(options.target);
+  app.use(proxyMiddleware(context, options))
-  // add path
-  targetUrl.pathname = context;
-  options.target = targetUrl.toString();
-
-  console.log("Proxying", context, "to", options.target);
-  app.use(context, createProxyMiddleware(options))
 })
 
 // handle fallback for HTML5 history API

build/webpack.base.conf.js

@@ -3,7 +3,6 @@ var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
 var { VueLoaderPlugin } = require('vue-loader')
-const ESLintPlugin = require('eslint-webpack-plugin');
 
 var env = process.env.NODE_ENV
 // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@@ -36,7 +35,6 @@ module.exports = {
     ],
     fallback: {
       "url": require.resolve("url/"),
-      querystring: require.resolve("querystring-es3")
     },
     alias: {
       'static': path.resolve(__dirname, '../static'),
@@ -49,6 +47,20 @@ module.exports = {
   module: {
     noParse: /node_modules\/localforage\/dist\/localforage.js/,
     rules: [
+      {
+        enforce: 'pre',
+        test: /\.(js|vue)$/,
+        include: projectRoot,
+        exclude: /node_modules/,
+        use: {
+          loader: 'eslint-loader',
+          options: {
+            formatter: require('eslint-friendly-formatter'),
+            sourceMap: config.build.productionSourceMap,
+            extract: true
+          }
+        }
+      },
       {
         enforce: 'post',
         test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
@@ -106,9 +118,6 @@ module.exports = {
     ]
   },
   plugins: [
-    new VueLoaderPlugin(),
+    new VueLoaderPlugin()
-    new ESLintPlugin({
-      configType: 'flat'
-    })
   ]
 }

config/local.example.json

@@ -1,4 +1,4 @@
 {
-  "target": "https://otp.akkoma.dev/",
+  "target": "https://pleroma.soykaf.com/",
   "staticConfigPreference": false
 }

config/test.env.js

@@ -2,4 +2,5 @@ var { merge } = require('webpack-merge')
 var devEnv = require('./dev.env')
 
 module.exports = merge(devEnv, {
+  NODE_ENV: '"testing"'
 })

eslint.config.js

@@ -1,31 +0,0 @@
-const pluginVue = require('eslint-plugin-vue')
-const pluginImport = require('eslint-plugin-import')
-
-module.exports = [
-  ...pluginVue.configs['flat/recommended'],
-  {
-    languageOptions: {
-      parserOptions: {
-        parser: '@babel/eslint-parser',
-        sourceType: 'module'
-      }
-    },
-    rules: {
-      // allow paren-less arrow functions
-      'arrow-parens': 0,
-      // allow async-await
-      'generator-star-spacing': 0,
-      // allow debugger during development
-      'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-      'vue/require-prop-types': 0,
-      'vue/no-unused-vars': 0,
-      'no-tabs': 0,
-      'vue/multi-word-component-names': 0,
-      'vue/no-reserved-component-names': 0
-    },
-    ignores: [
-      'build/*.js',
-      'config/*.js'
-    ]
-  }
-]

index.html

@@ -6,6 +6,7 @@
     <title>Akkoma</title>
     <link rel="stylesheet" href="/static/font/tiresias.css">
     <link rel="stylesheet" href="/static/font/css/lato.css">
+    <link rel="stylesheet" href="/static/mfm.css">
     <link rel="stylesheet" href="/static/custom.css">
     <link rel="stylesheet" href="/static/theme-holder.css" id="theme-holder">
     <!--server-generated-meta-->

package.json

@@ -12,118 +12,120 @@
     "e2e": "node test/e2e/runner.js",
     "test": "npm run unit && npm run e2e",
     "stylelint": "stylelint src/**/*.scss",
-    "lint": "eslint src test/unit/specs test/e2e/specs",
+    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
-    "lint-fix": "eslint --fix src test/unit/specs test/e2e/specs"
+    "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
     "@babel/runtime": "7.17.8",
-    "@chenfengyuan/vue-qrcode": "^2.0.0",
+    "@chenfengyuan/vue-qrcode": "2.0.0",
     "@floatingghost/pinch-zoom-element": "^1.3.1",
-    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/fontawesome-svg-core": "1.3.0",
-    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.1.2",
-    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
-    "@fortawesome/vue-fontawesome": "^3.0.8",
+    "@fortawesome/vue-fontawesome": "3.0.1",
-    "@vuelidate/core": "^2.0.3",
+    "@vuelidate/core": "^2.0.0",
-    "@vuelidate/validators": "^2.0.4",
+    "@vuelidate/validators": "^2.0.0",
-    "blurhash": "^2.0.5",
+    "blurhash": "^2.0.4",
-    "body-scroll-lock": "^3.1.5",
+    "body-scroll-lock": "2.7.1",
-    "chromatism": "^3.0.0",
+    "chromatism": "3.0.0",
-    "click-outside-vue3": "^4.0.1",
+    "click-outside-vue3": "4.0.1",
-    "cropperjs": "^1.6.2",
+    "cropperjs": "1.5.12",
-    "diff": "^5.2.0",
+    "diff": "3.5.0",
-    "escape-html": "^1.0.3",
+    "escape-html": "1.0.3",
     "iso-639-1": "^2.1.15",
     "js-cookie": "^3.0.1",
-    "localforage": "^1.10.0",
+    "localforage": "1.10.0",
     "parse-link-header": "^2.0.0",
-    "phoenix": "^1.7.12",
+    "phoenix": "1.6.2",
-    "punycode.js": "^2.3.1",
+    "punycode.js": "2.1.0",
-    "qrcode": "^1.5.3",
+    "qrcode": "1",
-    "querystring-es3": "^0.2.1",
+    "url": "^0.11.0",
-    "url": "^0.11.3",
+    "vue": "^3.2.31",
-    "vue": "^3.4.38",
+    "vue-i18n": "^9.2.2",
-    "vue-i18n": "^9.14.0",
+    "vue-router": "4.0.14",
-    "vue-router": "^4.4.3",
+    "vue-template-compiler": "2.6.11",
-    "vue-template-compiler": "^2.7.16",
+    "vuex": "4.0.2"
-    "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.6",
+    "@babel/core": "7.17.8",
     "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-transform-runtime": "^7.24.6",
+    "@babel/plugin-transform-runtime": "7.17.0",
-    "@babel/preset-env": "^7.24.6",
+    "@babel/preset-env": "7.16.11",
-    "@babel/register": "^7.24.6",
+    "@babel/register": "7.17.7",
     "@intlify/vue-i18n-loader": "^5.0.0",
-    "@ungap/event-target": "^0.2.4",
+    "@ungap/event-target": "0.2.3",
-    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
+    "@vue/babel-helper-vue-jsx-merge-props": "1.2.1",
-    "@vue/babel-plugin-jsx": "^1.2.2",
+    "@vue/babel-plugin-jsx": "1.1.1",
     "@vue/compiler-sfc": "^3.1.0",
     "@vue/test-utils": "^2.0.2",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "6.7.7",
     "babel-loader": "^9.1.0",
-    "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-lodash": "3.3.4",
     "chai": "^4.3.7",
-    "chalk": "^1.1.3",
+    "chalk": "1.1.3",
-    "chromedriver": "^119.0.1",
+    "chromedriver": "^107.0.3",
     "connect-history-api-fallback": "^2.0.0",
     "cross-spawn": "^7.0.3",
-    "css-loader": "^7.1.2",
+    "css-loader": "^6.7.2",
     "custom-event-polyfill": "^1.0.7",
-    "eslint": "^9.3.0",
+    "eslint": "^7.32.0",
-    "eslint-config-standard": "^17.1.0",
+    "eslint-config-standard": "^17.0.0",
     "eslint-friendly-formatter": "^4.0.1",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.2.0",
+    "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-vue": "^9.26.0",
+    "eslint-plugin-vue": "^9.7.0",
-    "eslint-webpack-plugin": "^4.2.0",
+    "eventsource-polyfill": "0.9.6",
-    "eventsource-polyfill": "^0.9.6",
+    "express": "4.17.3",
-    "express": "^4.19.2",
     "file-loader": "^6.2.0",
-    "function-bind": "^1.1.2",
+    "function-bind": "1.1.1",
     "html-webpack-plugin": "^5.5.0",
-    "http-proxy-middleware": "^3.0.0",
+    "http-proxy-middleware": "0.21.0",
-    "json-loader": "^0.5.7",
+    "inject-loader": "2.0.1",
-    "karma": "^6.4.3",
+    "isparta-loader": "2.0.0",
-    "karma-coverage": "^2.2.1",
+    "json-loader": "0.5.7",
-    "karma-firefox-launcher": "^2.1.3",
+    "karma": "6.3.17",
-    "karma-mocha": "^2.0.1",
+    "karma-coverage": "1.1.2",
-    "karma-mocha-reporter": "^2.2.5",
+    "karma-firefox-launcher": "1.3.0",
-    "karma-sinon-chai": "^2.0.2",
+    "karma-mocha": "2.0.1",
-    "karma-sourcemap-loader": "^0.4.0",
+    "karma-mocha-reporter": "2.2.5",
-    "karma-spec-reporter": "^0.0.36",
+    "karma-sinon-chai": "2.0.2",
+    "karma-sourcemap-loader": "0.3.8",
+    "karma-spec-reporter": "0.0.33",
     "karma-webpack": "^5.0.0",
-    "lodash": "^4.17.21",
+    "lodash": "4.17.21",
-    "lolex": "^6.0.0",
+    "lolex": "1.6.0",
-    "mini-css-extract-plugin": "^2.9.0",
+    "mini-css-extract-plugin": "0.12.0",
-    "mocha": "^10.4.0",
+    "mocha": "3.5.3",
-    "nightwatch": "^3.6.3",
+    "nightwatch": "0.9.21",
-    "opn": "^6.0.0",
+    "opn": "4.0.2",
+    "ora": "0.4.1",
     "postcss-html": "^1.5.0",
-    "postcss-loader": "^8.1.1",
+    "postcss-loader": "3.0.0",
     "postcss-sass": "^0.5.0",
-    "raw-loader": "^4.0.2",
+    "raw-loader": "0.5.1",
-    "sass": "^1.77.2",
+    "sass": "^1.56.0",
-    "sass-loader": "^14.2.1",
+    "sass-loader": "^13.2.0",
-    "selenium-server": "^3.141.59",
+    "selenium-server": "2.53.1",
-    "semver": "^7.6.2",
+    "semver": "5.7.1",
-    "shelljs": "^0.8.5",
+    "shelljs": "0.8.5",
-    "sinon": "^18.0.0",
+    "sinon": "2.4.1",
-    "sinon-chai": "^3.7.0",
+    "sinon-chai": "2.14.0",
     "stylelint": "^14.15.0",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-config-standard": "^29.0.0",
     "stylelint-config-standard-scss": "^6.1.0",
     "stylelint-rscss": "^0.4.0",
     "url-loader": "^4.1.1",
-    "vue-loader": "^17.4.2",
+    "vue-loader": "^17.0.0",
-    "vue-style-loader": "^4.1.3",
+    "vue-style-loader": "^4.1.2",
-    "webpack": "^5.91.0",
+    "webpack": "^5.75.0",
-    "webpack-dev-middleware": "^7.2.1",
+    "webpack-dev-middleware": "^5.3.3",
-    "webpack-hot-middleware": "^2.26.1",
+    "webpack-hot-middleware": "^2.25.1",
-    "webpack-merge": "^5.10.0",
+    "webpack-merge": "^5.8.0",
-    "workbox-webpack-plugin": "^7.1.0"
+    "workbox-webpack-plugin": "^6.5.4"
   },
   "engines": {
     "node": ">= 16.0.0",

src/App.js

@@ -59,17 +59,11 @@ export default {
         {
           '-reverse': this.reverseLayout,
           '-no-sticky-headers': this.noSticky,
-          '-has-new-post-button': this.newPostButtonShown,
+          '-has-new-post-button': this.newPostButtonShown
-          '-wide-timeline': this.widenTimeline
         },
         '-' + this.layoutType
       ]
     },
-    pageBackground () {
-      return this.mergedConfig.displayPageBackgrounds
-        ? this.$store.state.users.displayBackground
-        : null
-    },
     currentUser () { return this.$store.state.users.currentUser },
     userBackground () { return this.currentUser.background_image },
     instanceBackground () {
@@ -77,7 +71,7 @@ export default {
         ? null
         : this.$store.state.instance.background
     },
-    background () { return this.pageBackground || this.userBackground || this.instanceBackground },
+    background () { return this.userBackground || this.instanceBackground },
     bgStyle () {
       if (this.background) {
         return {
@@ -94,9 +88,6 @@ export default {
     newPostButtonShown () {
       return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile'
     },
-    widenTimeline () {
-      return this.$store.getters.mergedConfig.widenTimeline
-    },
     showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
     editingAvailable () { return this.$store.state.instance.editingAvailable },
     layoutType () { return this.$store.state.interface.layoutType },

src/App.scss

@@ -8,7 +8,7 @@
 }
 
 html {
-  font-size: 0.875rem;
+  font-size: 14px;
   // overflow-x: clip causes my browser's tab to crash with SIGILL lul
 }
 
@@ -172,10 +172,6 @@ nav {
   background-color: rgba(0, 0, 0, 0.15);
   background-color: var(--underlay, rgba(0, 0, 0, 0.15));
   z-index: -1000;
-
-  .-wide-timeline & {
-    margin:0 calc(var(--columnGap) / -2);
-  }
 }
 
 .app-layout {
@@ -191,17 +187,12 @@ nav {
   grid-template-rows: 1fr;
   box-sizing: border-box;
   margin: 0 auto;
-  padding: 0 calc(var(--columnGap) / 2);
   align-content: flex-start;
   flex-wrap: wrap;
   justify-content: center;
   min-height: 100vh;
   overflow-x: clip;
 
-  &.-wide-timeline {
-    --maxiColumn: minmax(var(--miniColumn), 1fr);
-  }
-
   .column {
     --___columnMargin: var(--columnGap);
 

src/boot/after_store.js

@@ -183,12 +183,6 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
   copyInstanceOption('renderMisskeyMarkdown')
   copyInstanceOption('sidebarRight')
 
-  if (config.backendCommitUrl)
-    copyInstanceOption('backendCommitUrl')
-
-  if (config.frontendCommitUrl)
-    copyInstanceOption('frontendCommitUrl')
-
   return store.dispatch('setTheme', config['theme'])
 }
 

src/components/about/about.vue

@@ -9,7 +9,7 @@
   </div>
 </template>
 
-<script src="./about.js"></script>
+<script src="./about.js" ></script>
 
 <style lang="scss">
 </style>

src/components/account_actions/account_actions.vue

@@ -6,7 +6,7 @@
       :bound-to="{ x: 'container' }"
       remove-padding
     >
-      <template #content>
+      <template v-slot:content>
         <div class="dropdown-menu">
           <template v-if="relationship.following">
             <button
@@ -71,7 +71,7 @@
           </button>
         </div>
       </template>
-      <template #trigger>
+      <template v-slot:trigger>
         <button class="button-unstyled ellipsis-button">
           <FAIcon
             class="icon"
@@ -93,7 +93,7 @@
           keypath="user_card.block_confirm"
           tag="span"
         >
-          <template #user>
+          <template v-slot:user>
             <span
               v-text="user.screen_name_ui"
             />

src/components/attachment/attachment.scss

@@ -37,7 +37,7 @@
       white-space: pre-line;
       word-break: break-word;
       text-overflow: ellipsis;
-      overflow: auto;
+      overflow: scroll;
     }
 
     &.-static {

src/components/attachment/attachment.vue

@@ -246,8 +246,8 @@
           ref="flash"
           class="flash"
           :src="attachment.large_thumb_url || attachment.url"
-          @player-opened="setFlashLoaded(true)"
+          @playerOpened="setFlashLoaded(true)"
-          @player-closed="setFlashLoaded(false)"
+          @playerClosed="setFlashLoaded(false)"
         />
       </span>
     </div>

src/components/avatar_list/avatar_list.vue

@@ -14,7 +14,7 @@
   </div>
 </template>
 
-<script src="./avatar_list.js"></script>
+<script src="./avatar_list.js" ></script>
 
 <style lang="scss">
 @import '../../_variables.scss';

src/components/checkbox/checkbox.vue

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

src/components/color_input/color_input.vue

@@ -14,7 +14,7 @@
       :model-value="present"
       :disabled="disabled"
       class="opt"
-      @update:model-value="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
+      @update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
     />
     <div class="input color-input-field">
       <input
@@ -46,6 +46,7 @@
     </div>
   </div>
 </template>
+<style lang="scss" src="./color_input.scss"></style>
 <script>
 import Checkbox from '../checkbox/checkbox.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
@@ -107,7 +108,6 @@ export default {
   }
 }
 </script>
-<style lang="scss" src="./color_input.scss"></style>
 
 <style lang="scss">
 .color-control {

src/components/confirm_modal/confirm_modal.vue

@@ -25,8 +25,6 @@
   </dialog-modal>
 </template>
 
-<script src="./confirm_modal.js"></script>
-
 <style lang="scss" scoped>
 @import '../../_variables';
 
@@ -37,3 +35,5 @@
   }
 }
 </style>
+
+<script src="./confirm_modal.js"></script>

src/components/conversation/conversation.js

@@ -267,11 +267,11 @@ const conversation = {
     },
     replies () {
       let i = 1
-       
+      // eslint-disable-next-line camelcase
       return reduce(this.conversation, (result, { id, in_reply_to_status_id }) => {
-         
+        /* eslint-disable camelcase */
         const irid = in_reply_to_status_id
-         
+        /* eslint-enable camelcase */
         if (irid) {
           result[irid] = result[irid] || []
           result[irid].push({

src/components/conversation/conversation.vue

@@ -91,7 +91,7 @@
               :controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"
 
               @goto="setHighlight"
-              @toggle-expanded="toggleExpanded"
+              @toggleExpanded="toggleExpanded"
             />
             <div
               v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
@@ -184,7 +184,7 @@
           :toggle-status-content-property="toggleStatusContentProperty"
 
           @goto="setHighlight"
-          @toggle-expanded="toggleExpanded"
+          @toggleExpanded="toggleExpanded"
         />
       </div>
     </div>

src/components/desktop_nav/desktop_nav.vue

@@ -44,9 +44,9 @@
             />
           </router-link>
           <router-link
-            v-if="publicTimelineVisible"
             :to="{ name: 'public-timeline' }"
             class="nav-icon"
+            v-if="publicTimelineVisible"
           >
             <FAIcon
               fixed-width
@@ -68,9 +68,9 @@
             />
           </router-link>
           <router-link
-            v-if="federatedTimelineVisible"
             :to="{ name: 'public-external-timeline' }"
             class="nav-icon"
+            v-if="federatedTimelineVisible"
           >
             <FAIcon
               fixed-width

src/components/domain_mute_card/domain_mute_card.vue

@@ -9,7 +9,7 @@
       class="btn button-default"
     >
       {{ $t('domain_mute_card.unmute') }}
-      <template #progress>
+      <template v-slot:progress>
         {{ $t('domain_mute_card.unmute_progress') }}
       </template>
     </ProgressButton>
@@ -19,7 +19,7 @@
       class="btn button-default"
     >
       {{ $t('domain_mute_card.mute') }}
-      <template #progress>
+      <template v-slot:progress>
         {{ $t('domain_mute_card.mute_progress') }}
       </template>
     </ProgressButton>

src/components/edit_status_modal/edit_status_modal.vue

@@ -2,7 +2,7 @@
   <Modal
     v-if="isFormVisible"
     class="edit-form-modal-view"
-    @backdrop-clicked="closeModal"
+    @backdropClicked="closeModal"
   >
     <div class="edit-form-modal-panel panel">
       <div class="panel-heading">
@@ -11,10 +11,10 @@
       <PostStatusForm
         class="panel-body"
         v-bind="params"
-        :disable-polls="true"
-        :disable-visibility-selector="true"
-        :post-handler="doEditStatus"
         @posted="closeModal"
+        :disablePolls="true"
+        :disableVisibilitySelector="true"
+        :post-handler="doEditStatus"
       />
     </div>
   </Modal>

src/components/emoji_input/emoji_input.vue

@@ -43,10 +43,7 @@
           :class="{ highlighted: index === highlighted }"
           @click.stop.prevent="onClick($event, suggestion)"
         >
-          <span
+          <span v-if="!suggestion.mfm" class="image">
-            v-if="!suggestion.mfm"
-            class="image"
-          >
             <img
               v-if="suggestion.img"
               :src="suggestion.img"

src/components/emoji_input/suggestor.js

@@ -1,4 +1,4 @@
-const MFM_TAGS = ['bg', 'blur', 'bounce', 'center', 'fg', 'flip', 'font', 'jelly', 'jump', 'position', 'rainbow', 'rotate', 'scale', 'shake', 'sparkle', 'spin', 'tada', 'twitch', 'x2', 'x3', 'x4']
+const MFM_TAGS = ['blur', 'bounce', 'flip', 'font', 'jelly', 'jump', 'rainbow', 'rotate', 'shake', 'sparkle', 'spin', 'tada', 'twitch', 'x2', 'x3', 'x4']
   .map(tag => ({ displayText: tag, detailText: '$[' + tag + ' ]', replacement: '$[' + tag + ' ]', mfm: true }))
 
 /**
@@ -122,14 +122,14 @@ export const suggestUsers = ({ dispatch, state }) => {
       const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1
 
       return diff + nameAlphabetically + screenNameAlphabetically
-       
+      /* eslint-disable camelcase */
     }).map(({ screen_name, screen_name_ui, name, profile_image_url_original }) => ({
       displayText: screen_name_ui,
       detailText: name,
       imageUrl: profile_image_url_original,
       replacement: '@' + screen_name + ' '
     }))
-     
+    /* eslint-enable camelcase */
 
     suggestions = newSuggestions || []
     return suggestions

src/components/emoji_reactions/emoji_reactions.vue

@@ -42,7 +42,7 @@
   </div>
 </template>
 
-<script src="./emoji_reactions.js"></script>
+<script src="./emoji_reactions.js" ></script>
 <style lang="scss">
 @import '../../_variables.scss';
 

src/components/extra_buttons/extra_buttons.vue

@@ -7,7 +7,7 @@
     :bound-to="{ x: 'container' }"
     remove-padding
   >
-    <template #content="{close}">
+    <template v-slot:content="{close}">
       <div class="dropdown-menu">
         <button
           v-if="canMute && !status.thread_muted"
@@ -172,7 +172,7 @@
         </button>
       </div>
     </template>
-    <template #trigger>
+    <template v-slot:trigger>
       <button class="button-unstyled popover-trigger">
         <FAIcon
           class="fa-scale-110 fa-old-padding"
@@ -205,7 +205,7 @@
   </Popover>
 </template>
 
-<script src="./extra_buttons.js"></script>
+<script src="./extra_buttons.js" ></script>
 
 <style lang="scss">
 @import '../../_variables.scss';

src/components/favorite_button/favorite_button.vue

@@ -35,7 +35,7 @@
   </div>
 </template>
 
-<script src="./favorite_button.js"></script>
+<script src="./favorite_button.js" ></script>
 
 <style lang="scss">
 @import '../../_variables.scss';

src/components/features_panel/features_panel.vue

@@ -23,7 +23,7 @@
   </div>
 </template>
 
-<script src="./features_panel.js"></script>
+<script src="./features_panel.js" ></script>
 
 <style lang="scss">
   .features-panel li {

src/components/follow_request_card/follow_request_card.vue

@@ -1,8 +1,5 @@
 <template>
-  <basic-user-card
+  <basic-user-card :user="user" v-if="show">
-    v-if="show"
-    :user="user"
-  >
     <div class="follow-request-card-content-container">
       <button
         class="btn button-default"

src/components/font_control/font_control.vue

@@ -47,7 +47,7 @@
   </div>
 </template>
 
-<script src="./font_control.js"></script>
+<script src="./font_control.js" ></script>
 
 <style lang="scss">
 @import '../../_variables.scss';

src/components/gallery/gallery.js

@@ -88,8 +88,10 @@ const Gallery = {
       set(this.sizes, id, { width, height })
     },
     rowStyle (row) {
-      if (!row.audio && !row.minimal && !row.grid) {
+      if (row.audio) {
-        return { 'aspect-ratio': `1/${(1 / (row.items.length + 0.6))}` }
+        return { 'padding-bottom': '25%' } // fixed reduced height for audio
+      } else if (!row.minimal && !row.grid) {
+        return { 'padding-bottom': `${(100 / (row.items.length + 0.6))}%` }
       }
     },
     itemStyle (id, row) {

src/components/gallery/gallery.vue

@@ -31,8 +31,8 @@
             :description="descriptions && descriptions[attachment.id]"
             :hide-description="size === 'small' || tooManyAttachments && hidingLong"
             :style="itemStyle(attachment.id, row.items)"
-            @set-media="onMedia"
+            @setMedia="onMedia"
-            @natural-size-load="onNaturalSizeLoad"
+            @naturalSizeLoad="onNaturalSizeLoad"
           />
         </div>
       </div>
@@ -96,15 +96,9 @@
 
   .gallery-row {
     position: relative;
+    height: 0;
     width: 100%;
     flex-grow: 1;
-    .Status & {
-      max-height: 30em;
-    }
-
-    &.-audio {
-      aspect-ratio: 4/1; // this is terrible, but it's how it was before so I'm not changing it >:(
-    }
 
     &:not(:first-child) {
       margin-top: 0.5em;

src/components/hashtag_link/hashtag_link.vue

@@ -14,6 +14,6 @@
   </span>
 </template>
 
-<script src="./hashtag_link.js" />
+<script src="./hashtag_link.js"/>
 
-<style lang="scss" src="./hashtag_link.scss" />
+<style lang="scss" src="./hashtag_link.scss"/>

src/components/instance_specific_panel/instance_specific_panel.vue

@@ -10,4 +10,4 @@
   </div>
 </template>
 
-<script src="./instance_specific_panel.js"></script>
+<script src="./instance_specific_panel.js" ></script>

src/components/list/list.vue

@@ -42,7 +42,6 @@ export default {
 @import '../../_variables.scss';
 
 .list {
-  min-height: 1em;
   &-item:not(:last-child) {
     border-bottom: 1px solid;
     border-bottom-color: $fallback--border;

src/components/local_bubble_panel/local_bubble_panel.vue

@@ -10,7 +10,7 @@
         </div>
       </div>
       <div class="panel-body">
-        <p>{{ $t("about.bubble_instances_description") }}:</p>
+        <p>{{ $t("about.bubble_instances_description")}}:</p>
         <ul>
           <li
             v-for="instance in bubbleInstances"

src/components/login_form/login_form.vue

@@ -90,7 +90,7 @@
   </div>
 </template>
 
-<script src="./login_form.js"></script>
+<script src="./login_form.js" ></script>
 
 <style lang="scss">
 @import '../../_variables.scss';

src/components/media_modal/media_modal.vue

@@ -2,7 +2,7 @@
   <Modal
     v-if="showing"
     class="media-modal-view"
-    @backdrop-clicked="hideIfNotSwiped"
+    @backdropClicked="hideIfNotSwiped"
   >
     <SwipeClick
       v-if="type === 'image'"

src/components/media_upload/media_upload.js

@@ -42,7 +42,7 @@ const mediaUpload = {
         .then((fileData) => {
           self.$emit('uploaded', fileData)
           self.decreaseUploadCount()
-        }, (error) => {  
+        }, (error) => { // eslint-disable-line handle-callback-err
           self.$emit('upload-failed', 'default')
           self.decreaseUploadCount()
         })

src/components/media_upload/media_upload.vue

@@ -26,7 +26,7 @@
   </label>
 </template>
 
-<script src="./media_upload.js"></script>
+<script src="./media_upload.js" ></script>
 
 <style lang="scss">
 @import '../../_variables.scss';

src/components/mention_link/mention_link.js

@@ -93,6 +93,9 @@ const MentionLink = {
         this.highlightType
       ]
     },
+    useAtIcon () {
+      return this.mergedConfig.useAtIcon
+    },
     isRemote () {
       return this.userName !== this.userNameFull
     },

src/components/mention_link/mention_link.vue

@@ -66,6 +66,6 @@
   </span>
 </template>
 
-<script src="./mention_link.js" />
+<script src="./mention_link.js"/>
 
-<style lang="scss" src="./mention_link.scss" />
+<style lang="scss" src="./mention_link.scss"/>

src/components/mentions_line/mentions_line.vue

@@ -37,5 +37,5 @@
     </span>
   </span>
 </template>
-<script src="./mentions_line.js"></script>
+<script src="./mentions_line.js" ></script>
 <style lang="scss" src="./mentions_line.scss" />

src/components/mfa_form/recovery_form.vue

@@ -69,4 +69,4 @@
     </div>
   </div>
 </template>
-<script src="./recovery_form.js"></script>
+<script src="./recovery_form.js" ></script>

src/components/mfa_form/totp_form.vue

@@ -18,7 +18,6 @@
           <input
             id="code"
             v-model="code"
-            autocomplete="one-time-code"
             class="form-control"
           >
         </div>

src/components/mod_modal/tabs/reports_tab/report_card.vue

@@ -4,7 +4,7 @@
       class="panel-heading"
       @click="toggleHidden"
     >
-      <h4>{{ $t('moderation.reports.report') + ' ' + account.screen_name }}</h4>
+      <h4>{{ $t('moderation.reports.report') + ' ' + this.account.screen_name }}</h4>
       <button
         v-if="isOpen"
         class="button-default"
@@ -24,7 +24,7 @@
         class="button-default"
         @click.stop="updateReportState('open')"
       >
-        {{ $t('moderation.reports.reopen') }}
+          {{ $t('moderation.reports.reopen') }}
       </button>
     </div>
     <div
@@ -35,10 +35,7 @@
         <div v-if="content">
           {{ decode(content) }}
         </div>
-        <i
+        <i v-else class="faint">
-          v-else
-          class="faint"
-        >
           {{ $t('moderation.reports.no_content') }}
         </i>
         <div class="report-author">
@@ -46,12 +43,12 @@
             class="small-avatar"
             :user="actor"
           />
-          {{ actor.screen_name }}
+          {{ this.actor.screen_name }}
         </div>
       </div>
       <div
-        v-if="!hidden && statuses.length > 0"
         class="dropdown"
+        v-if="!hidden && this.statuses.length > 0"
       >
         <button
           class="button button-unstyled dropdown-header"
@@ -77,8 +74,8 @@
         </div>
       </div>
       <div
-        v-if="!hidden && notes.length > 0"
         class="dropdown"
+        v-if="!hidden && this.notes.length > 0"
       >
         <button
           class="button button-unstyled dropdown-header"
@@ -102,9 +99,9 @@
       </div>
       <div class="report-add-note">
         <textarea
-          v-model.trim="note"
           rows="1"
           cols="1"
+          v-model.trim="note"
           :placeholder="$t('moderation.reports.note_placeholder')"
         />
         <button
@@ -137,7 +134,7 @@
         :offset="{ y: 5 }"
         remove-padding
       >
-        <template #trigger>
+        <template v-slot:trigger>
           <button
             class="btn button-default"
             :disabled="!tagPolicyEnabled"
@@ -150,7 +147,7 @@
             />
           </button>
         </template>
-        <template #content="{close}">
+        <template v-slot:content="{close}">
           <div
             class="dropdown-menu"
             :disabled="!tagPolicyEnabled"

src/components/mod_modal/tabs/reports_tab/report_note.vue

@@ -6,7 +6,7 @@
           class="small-avatar"
           :user="user"
         />
-        {{ user.screen_name }}
+        {{ this.user.screen_name }}
       </div>
       <div class="header-right">
         <Timeago

src/components/modal/modal.vue

@@ -22,9 +22,6 @@ export default {
       default: false
     }
   },
-  emits: [
-    'backdropClicked',
-  ],
   computed: {
     classes () {
       return {

src/components/moderation_tools/moderation_tools.vue

@@ -8,7 +8,7 @@
       @show="setToggled(true)"
       @close="setToggled(false)"
     >
-      <template #content>
+      <template v-slot:content>
         <div class="dropdown-menu">
           <span v-if="user.is_local">
             <button
@@ -122,7 +122,7 @@
           </span>
         </div>
       </template>
-      <template #trigger>
+      <template v-slot:trigger>
         <button
           class="btn button-default btn-block moderation-tools-button"
           :class="{ toggled }"
@@ -137,11 +137,11 @@
         v-if="showDeleteUserDialog"
         :on-cancel="deleteUserDialog.bind(this, false)"
       >
-        <template #header>
+        <template v-slot:header>
           {{ $t('user_card.admin_menu.delete_user') }}
         </template>
         <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
-        <template #footer>
+        <template v-slot:footer>
           <button
             class="btn button-default"
             @click="deleteUserDialog(false)"

src/components/nav_panel/nav_panel.vue

@@ -102,7 +102,7 @@
   </div>
 </template>
 
-<script src="./nav_panel.js"></script>
+<script src="./nav_panel.js" ></script>
 
 <style lang="scss">
 @import '../../_variables.scss';

src/components/notification/notification.js

@@ -6,7 +6,6 @@ import UserCard from '../user_card/user_card.vue'
 import Timeago from '../timeago/timeago.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
-import StillImage from '../still-image/still-image.vue'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -51,8 +50,7 @@ const Notification = {
     Timeago,
     Status,
     RichContent,
-    ConfirmModal,
+    ConfirmModal
-    StillImage
   },
   methods: {
     toggleUserExpanded () {

src/components/notification/notification.vue

@@ -116,13 +116,12 @@
                   scope="global"
                   keypath="notifications.reacted_with"
                 >
-                  <still-image
+                  <img
                     v-if="notification.emoji_url !== null"
                     class="notification-reaction-emoji"
                     :src="notification.emoji_url"
-                    :title="notification.emoji"
+                    :name="notification.emoji"
-                    :alt="notification.emoji"
+                  >
-                  />
                   <span
                     v-else
                     class="emoji-reaction-emoji"
@@ -152,6 +151,7 @@
             >
               <Timeago
                 :time="notification.created_at"
+                :with-direction="true"
                 :auto-update="240"
               />
             </router-link>

src/components/notifications/notification_filters.vue

@@ -5,7 +5,7 @@
     placement="bottom"
     :bound-to="{ x: 'container' }"
   >
-    <template #content>
+    <template v-slot:content>
       <div class="dropdown-menu">
         <button
           class="button-default dropdown-item"
@@ -72,7 +72,7 @@
         </button>
       </div>
     </template>
-    <template #trigger>
+    <template v-slot:trigger>
       <button class="filter-trigger-button button-unstyled">
         <FAIcon icon="filter" />
       </button>

src/components/notifications/notifications.scss

@@ -105,12 +105,9 @@
     flex: 1;
     padding-left: 0.8em;
     min-width: 0;
-  }
 
-  .heading-right, .notification-right {
     .timeago {
-      display: inline-block;
+      min-width: 3em;
-      min-width: 6em;
       text-align: right;
     }
   }

src/components/opacity_input/opacity_input.vue

@@ -14,7 +14,7 @@
       :model-value="present"
       :disabled="disabled"
       class="opt"
-      @update:model-value="$emit('update:modelValue', !present ? fallback : undefined)"
+      @update:modelValue="$emit('update:modelValue', !present ? fallback : undefined)"
     />
     <input
       :id="name"

src/components/pinch_zoom/pinch_zoom.vue

@@ -2,6 +2,7 @@
   <pinch-zoom
     class="pinch-zoom-parent"
     v-bind="$attrs"
+    v-on="$listeners"
   >
     <slot />
   </pinch-zoom>

src/components/post_status_form/post_status_form.js

@@ -9,12 +9,11 @@ import StatusContent from '../status_content/status_content.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
 import { reject, map, uniqBy, debounce } from 'lodash'
-import { usePostLanguageOptions } from 'src/lib/post_language'
 import suggestor from '../emoji_input/suggestor.js'
 import { mapGetters, mapState } from 'vuex'
 import Checkbox from '../checkbox/checkbox.vue'
 import Select from '../select/select.vue'
-
+import iso6391 from 'iso-639-1'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -63,13 +62,6 @@ const deleteDraft = (draftKey) => {
 	localStorage.setItem('drafts', JSON.stringify(draftData));
 }
 
-const interfaceToISOLanguage = (ilang) => {
-    const sep = ilang.indexOf("_");
-    return sep < 0 ?
-        ilang :
-        ilang.substr(0, sep);
-}
-
 const PostStatusForm = {
   props: [
     'statusId',
@@ -137,13 +129,6 @@ const PostStatusForm = {
       this.$refs.textarea.focus()
     }
   },
-  setup() {
-    const {postLanguageOptions} = usePostLanguageOptions()
-
-    return {
-      postLanguageOptions,
-    }
-  },
   data () {
     const preset = this.$route.query.message
     let statusText = preset || ''
@@ -153,8 +138,7 @@ const PostStatusForm = {
       statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
     }
 
-    const { postContentType: contentType, postLanguage: defaultPostLanguage, sensitiveByDefault, sensitiveIfSubject, interfaceLanguage, alwaysShowSubjectInput } = this.$store.getters.mergedConfig
+    const { postContentType: contentType, sensitiveByDefault, sensitiveIfSubject, interfaceLanguage } = this.$store.getters.mergedConfig
-    const postLanguage = defaultPostLanguage || interfaceToISOLanguage(interfaceLanguage)
 
     let statusParams = {
       spoilerText: this.subject || '',
@@ -165,7 +149,7 @@ const PostStatusForm = {
       poll: {},
       mediaDescriptions: {},
       visibility: this.suggestedVisibility(),
-      language: postLanguage,
+      language: interfaceLanguage,
       contentType
     }
 
@@ -180,7 +164,7 @@ const PostStatusForm = {
         poll: this.statusPoll || {},
         mediaDescriptions: this.statusMediaDescriptions || {},
         visibility: this.statusScope || this.suggestedVisibility(),
-        language: this.statusLanguage || postLanguage,
+        language: this.statusLanguage || interfaceLanguage,
         contentType: statusContentType
       }
     }
@@ -215,10 +199,6 @@ const PostStatusForm = {
       }
     }
 
-    // When first loading the form, hide the subject (CW) field if it's disabled or doesn't have a starting value.
-    // "disableSubject" seems to take priority over "alwaysShowSubjectInput".
-    const showSubject = !this.disableSubject && (statusParams.spoilerText || alwaysShowSubjectInput)
-
     return {
       dropFiles: [],
       uploadingFiles: false,
@@ -233,10 +213,7 @@ const PostStatusForm = {
       preview: null,
       previewLoading: false,
       emojiInputShown: false,
-      idempotencyKey: '',
+      idempotencyKey: ''
-      activeEmojiInput: undefined,
-      activeTextInput: undefined,
-      subjectVisible: showSubject
     }
   },
   computed: {
@@ -325,11 +302,13 @@ const PostStatusForm = {
     ...mapState({
       mobileLayout: state => state.interface.mobileLayout
     }),
+    isoLanguages () {
+      return iso6391.getAllCodes();
+    }
   },
   watch: {
     'newStatus': {
       deep: true,
-      flush: 'sync',
       handler () {
         this.statusChanged()
       }
@@ -695,33 +674,8 @@ const PostStatusForm = {
       this.$refs['emoji-input'].resize()
     },
     showEmojiPicker () {
-      if (!this.activeEmojiInput || !this.activeTextInput)
+      this.$refs['textarea'].focus()
-        this.focusStatusInput()
+      this.$refs['emoji-input'].triggerShowPicker()
-
-      this.$refs[this.activeTextInput].focus()
-      this.$refs[this.activeEmojiInput].triggerShowPicker()
-    },
-    focusStatusInput() {
-      this.activeEmojiInput = 'emoji-input'
-      this.activeTextInput = 'textarea'
-    },
-    focusSubjectInput() {
-      this.activeEmojiInput = 'subject-emoji-input'
-      this.activeTextInput = 'subject-input'
-    },
-    toggleSubjectVisible() {
-      // If hiding CW, then we need to clear the subject and reset focus
-      if (this.subjectVisible)
-      {
-        this.focusStatusInput()
-
-        // "nsfw" property is normally set by the @change listener, but this bypasses it.
-        // We need to clear it manually instead.
-        this.newStatus.spoilerText = ''
-        this.newStatus.nsfw = false
-      }
-
-      this.subjectVisible = !this.subjectVisible
     },
     clearError () {
       this.error = null

src/components/post_status_form/post_status_form.vue

@@ -118,16 +118,13 @@
           />
         </div>
         <EmojiInput
-          v-if="subjectVisible"
+          v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)"
-          ref="subject-emoji-input"
           v-model="newStatus.spoilerText"
           enable-emoji-picker
-          hide-emoji-button
           :suggest="emojiSuggestor"
           class="form-control"
         >
           <input
-            ref="subject-input"
             v-model="newStatus.spoilerText"
             type="text"
             :placeholder="$t('post_status.content_warning')"
@@ -135,7 +132,6 @@
             size="1"
             class="form-post-subject"
             @input="onSubjectInput"
-            @focus="focusSubjectInput()"
           >
         </EmojiInput>
         <i18n-t
@@ -170,14 +166,13 @@
             cols="1"
             :disabled="posting && !optimisticPosting"
             class="form-post-body"
-            :class="{ 'scrollable-form': !!maxHeight, '-has-subject': subjectVisible }"
+            :class="{ 'scrollable-form': !!maxHeight }"
             @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
             @keydown.meta.enter="postStatus($event, newStatus)"
             @keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
             @input="resize"
             @compositionupdate="resize"
             @paste="paste"
-            @focus="focusStatusInput()"
           />
           <p
             v-if="hasStatusLengthLimit"
@@ -190,7 +185,6 @@
         <div
           v-if="!disableScopeSelector"
           class="visibility-tray"
-          :class="{ 'visibility-tray-edit': isEdit }"
         >
           <scope-selector
             v-if="!disableVisibilitySelector"
@@ -201,50 +195,47 @@
           />
 
           <div
-            class="format-selector-container">
+            class="language-selector"
-            <div
-              class="format-selector"
-              >
-              <Select
-                id="post-language"
-                v-model="newStatus.language"
-                class="form-control"
-              >
-                <option
-                  v-for="language in postLanguageOptions"
-                  :key="language.key"
-                  :value="language.value"
-                >
-                  {{ language.label }}
-                </option>
-              </Select>
-            </div>
-            <div
-              v-if="postFormats.length > 1"
-              class="text-format format-selector"
             >
-              <Select
+            <Select
-                id="post-content-type"
+              id="post-language"
-                v-model="newStatus.contentType"
+              v-model="newStatus.language"
-                class="form-control"
+              class="form-control"
-              >
-                <option
-                  v-for="postFormat in postFormats"
-                  :key="postFormat"
-                  :value="postFormat"
-                >
-                  {{ $t(`post_status.content_type["${postFormat}"]`) }}
-                </option>
-              </Select>
-            </div>
-            <div
-              v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
-              class="text-format format-selector"
             >
-              <span class="only-format">
+              <option
-                {{ $t(`post_status.content_type["${postFormats[0]}"]`) }}
+                v-for="language in isoLanguages"
-              </span>
+                :key="language"
-            </div>
+                :value="language"
+              >
+                {{ language }}
+              </option>
+            </Select>
+          </div>
+          <div
+            v-if="postFormats.length > 1"
+            class="text-format"
+          >
+            <Select
+              id="post-content-type"
+              v-model="newStatus.contentType"
+              class="form-control"
+            >
+              <option
+                v-for="postFormat in postFormats"
+                :key="postFormat"
+                :value="postFormat"
+              >
+                {{ $t(`post_status.content_type["${postFormat}"]`) }}
+              </option>
+            </Select>
+          </div>
+          <div
+            v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
+            class="text-format"
+          >
+            <span class="only-format">
+              {{ $t(`post_status.content_type["${postFormats[0]}"]`) }}
+            </span>
           </div>
         </div>
       </div>
@@ -285,15 +276,6 @@
           >
             <FAIcon icon="poll-h" />
           </button>
-          <button
-            v-if="!disableSubject"
-            class="spoiler-icon button-unstyled"
-            :class="{ selected: subjectVisible }"
-            :title="$t('post_status.toggle_content_warning')"
-            @click="toggleSubjectVisible"
-          >
-            <FAIcon icon="eye-slash" />
-          </button>
         </div>
         <button
           v-if="posting"
@@ -464,10 +446,6 @@
     align-items: baseline;
   }
 
-  .visibility-tray-edit {
-    justify-content: right;
-  }
-
   .visibility-notice.edit-warning {
     > :first-child {
       margin-top: 0;
@@ -478,13 +456,7 @@
     }
   }
 
-  .format-selector-container {
+  .media-upload-icon, .poll-icon, .emoji-icon {
-    .format-selector {
-      display: inline-block;
-    }
-  }
-
-  .media-upload-icon, .poll-icon, .emoji-icon, .spoiler-icon {
     font-size: 1.85em;
     line-height: 1.1;
     flex: 1;
@@ -527,11 +499,6 @@
 
   .poll-icon {
     order: 3;
-    justify-content: center;
-  }
-
-  .spoiler-icon {
-    order: 4;
     justify-content: right;
   }
 
@@ -584,11 +551,6 @@
     line-height: 1.85;
   }
 
-  .form-post-subject {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
   .form-post-body {
     // TODO: make a resizable textarea component?
     box-sizing: content-box; // needed for easier computation of dynamic size
@@ -601,11 +563,6 @@
     min-height: calc(var(--post-line-height) * 1em);
     resize: none;
 
-    &.-has-subject {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-
     &.scrollable-form {
       overflow-y: auto;
     }

src/components/post_status_modal/post_status_modal.vue

@@ -3,7 +3,7 @@
     v-if="isLoggedIn && !resettingForm"
     :is-open="modalActivated"
     class="post-form-modal-view"
-    @backdrop-clicked="closeModal"
+    @backdropClicked="closeModal"
   >
     <div class="post-form-modal-panel panel">
       <div class="panel-heading">

src/components/react_button/react_button.vue

@@ -8,13 +8,13 @@
     remove-padding
     @show="focusInput"
   >
-    <template #content="{close}">
+    <template v-slot:content="{close}">
       <EmojiPicker
         :enable-sticker-picker="false"
         @emoji="addReaction($event, close)"
       />
     </template>
-    <template #trigger>
+    <template v-slot:trigger>
       <button
         class="button-unstyled popover-trigger"
         :title="$t('tool_tip.add_reaction')"
@@ -28,7 +28,7 @@
   </Popover>
 </template>
 
-<script src="./react_button.js"></script>
+<script src="./react_button.js" ></script>
 
 <style lang="scss">
 @import '../../_variables.scss';

src/components/remote_follow/remote_follow.js

@@ -2,7 +2,7 @@ export default {
   props: [ 'user' ],
   computed: {
     subscribeUrl () {
-       
+      // eslint-disable-next-line no-undef
       const serverUrl = new URL(this.user.statusnet_profile_url)
       return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
     }

src/components/retweet_button/retweet_button.vue

@@ -54,7 +54,7 @@
   </div>
 </template>
 
-<script src="./retweet_button.js"></script>
+<script src="./retweet_button.js" ></script>
 
 <style lang="scss">
 @import '../../_variables.scss';

src/components/rich_content/rich_content.jsx

@@ -121,19 +121,6 @@ export default {
       }
     }
 
-    const mfmStyleFromDataAttributes = (attributes) => {
-      // CSS selectors can check if a data-* attribute is true, but can't use other values, so we want to add them to the style attribute
-      // Here we turn e.g. `{'data-mfm-some': '1deg', 'data-mfm-thing': '5s'}` to "--mfm-some: 1deg;--mfm-thing: 5s;"
-      // Note that we only add the value to `style` when they contain only letters, numbers, dot, or minus signs
-      // At the moment of writing, this should be enough for legitimate purposes and reduces the chance of injection by using special characters
-      // There is a special case for the `color` value, who is provided without `#`, but requires this in the `style` attribute
-      return Object.keys(attributes).filter(
-        (key) => key.startsWith('data-mfm-') && attributes[key] !== true && /^[a-zA-Z0-9.\-]*$/.test(attributes[key])
-      ).map(
-        (key) => '--mfm-' + key.substr(9) + (key === 'data-mfm-color' ? ': #' : ': ') + attributes[key] + ';'
-      ).reduce((a,v) => a+v, '')
-    }
-
     // Processor to use with html_tree_converter
     const processItem = (item, index, array, what) => {
       // Handle text nodes - just add emoji
@@ -204,15 +191,6 @@ export default {
             if (this.handleLinks && attrs?.['class']?.includes?.('h-card')) {
               return ['', children.map(processItem), '']
             }
-
-            let mfm_style = mfmStyleFromDataAttributes(attrs)
-            if (mfm_style !== '') {
-              return [
-                opener.slice(0,-1) + ' style="' + mfm_style + '">',
-                children.map(processItem),
-                closer
-              ]
-            }
         }
 
         if (children !== undefined) {

src/components/selectable_list/selectable_list.vue

@@ -24,7 +24,7 @@
       :items="items"
       :get-key="getKey"
     >
-      <template #item="{item}">
+      <template v-slot:item="{item}">
         <div
           class="selectable-list-item-inner"
           :class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
@@ -41,7 +41,7 @@
           />
         </div>
       </template>
-      <template #empty>
+      <template v-slot:empty>
         <slot name="empty" />
       </template>
     </List>

src/components/settings_modal/helpers/boolean_setting.vue

@@ -6,7 +6,7 @@
     <Checkbox
       :model-value="state"
       :disabled="disabled"
-      @update:model-value="update"
+      @update:modelValue="update"
     >
       <span
         v-if="!!$slots.default"

src/components/settings_modal/helpers/choice_setting.vue

@@ -8,7 +8,7 @@
     <Select
       :model-value="state"
       :disabled="disabled"
-      @update:model-value="update"
+      @update:modelValue="update"
     >
       <option
         v-for="option in options"

src/components/settings_modal/helpers/modified_indicator.vue

@@ -6,14 +6,14 @@
     <Popover
       trigger="hover"
     >
-      <template #trigger>
+      <template v-slot:trigger>
         &nbsp;
         <FAIcon
           icon="wrench"
           :aria-label="$t('settings.setting_changed')"
         />
       </template>
-      <template #content>
+      <template v-slot:content>
         <div class="modified-tooltip">
           {{ $t('settings.setting_changed') }}
         </div>

src/components/settings_modal/helpers/server_side_indicator.vue

@@ -6,14 +6,14 @@
     <Popover
       trigger="hover"
     >
-      <template #trigger>
+      <template v-slot:trigger>
         &nbsp;
         <FAIcon
           icon="server"
           :aria-label="$t('settings.setting_server_side')"
         />
       </template>
-      <template #content>
+      <template v-slot:content>
         <div class="serverside-tooltip">
           {{ $t('settings.setting_server_side') }}
         </div>

src/components/settings_modal/settings_modal.js

@@ -69,7 +69,7 @@ const SettingsModal = {
       this.$store.dispatch('closeSettingsModal')
     },
     logout () {
-      this.$router.replace(this.$store.state.instance.redirectRootNoLogin || '/main/all')
+      this.$router.replace('/main/public')
       this.$store.dispatch('closeSettingsModal')
       this.$store.dispatch('logout')
     },

src/components/settings_modal/settings_modal.vue

@@ -108,7 +108,7 @@
         <Checkbox
           :model-value="!!expertLevel"
           class="expertMode"
-          @update:model-value="expertLevel = Number($event)"
+          @update:modelValue="expertLevel = Number($event)"
         >
           {{ $t("settings.expert_mode") }}
         </Checkbox>

src/components/settings_modal/tabs/data_import_export_tab.js

@@ -72,7 +72,7 @@ const DataImportExportTab = {
         // check is it's a local user
         if (user && user.is_local) {
           // append the instance address
-           
+          // eslint-disable-next-line no-undef
           return user.screen_name + '@' + location.hostname
         }
         return user.screen_name

src/components/settings_modal/tabs/general_tab.js

@@ -4,7 +4,6 @@ import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
-import { usePostLanguageOptions } from 'src/lib/post_language'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import ServerSideIndicator from '../helpers/server_side_indicator.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -18,11 +17,6 @@ library.add(
 )
 
 const GeneralTab = {
-  setup() {
-    const {postLanguageOptions} = usePostLanguageOptions()
-
-    return {postLanguageOptions}
-  },
   data () {
     return {
       subjectLineOptions: ['email', 'noop', 'masto'].map(mode => ({
@@ -124,12 +118,6 @@ const GeneralTab = {
         this.$store.dispatch('setOption', { name: 'translationLanguage', value: val })
       }
     },
-    postLanguage: {
-      get: function () { return this.$store.getters.mergedConfig.postLanguage },
-      set: function (val) {
-        this.$store.dispatch('setOption', { name: 'postLanguage', value: val })
-      }
-    },
     ...SharedComputedObject()
   },
   methods: {

src/components/settings_modal/tabs/general_tab.vue

@@ -44,6 +44,7 @@
           <template
             v-if="profilesExpanded"
           >
+
             <div
               v-for="profile in settingsProfiles"
               :key="profile.id"
@@ -72,24 +73,15 @@
                 </button>
               </template>
             </div>
-            <button
+            <button class="btn button-default" @click="refreshProfiles()">
-              class="btn button-default"
-              @click="refreshProfiles()"
-            >
               {{ $t('settings.settings_profiles_refresh') }}
-              <FAIcon
+              <FAIcon icon="sync" @click="refreshProfiles()" />
-                icon="sync"
-                @click="refreshProfiles()"
-              />
             </button>
             <h3>{{ $t('settings.settings_profile_creation') }}</h3>
             <label for="settings-profile-new-name">
               {{ $t('settings.settings_profile_creation_new_name_label') }}
             </label>
-            <input
+            <input v-model="newProfileName" id="settings-profile-new-name">
-              id="settings-profile-new-name"
-              v-model="newProfileName"
-            >
             <button
               class="btn button-default"
               @click="createSettingsProfile"
@@ -154,21 +146,6 @@
             {{ $t('settings.show_wider_shortcuts') }}
           </BooleanSetting>
         </li>
-        <li>
-          <BooleanSetting path="displayPageBackgrounds">
-            {{ $t('settings.show_page_backgrounds') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="centerAlignBio">
-            {{ $t('settings.center_align_bio') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="compactUserInfo">
-            {{ $t('settings.compact_user_info') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting path="stopGifs">
             {{ $t('settings.stop_gifs') }}
@@ -279,11 +256,6 @@
             {{ $t('settings.right_sidebar') }}
           </BooleanSetting>
         </li>
-        <li>
-          <BooleanSetting path="widenTimeline">
-            {{ $t('settings.widen_timeline') }}
-          </BooleanSetting>
-        </li>
         <li>
           <ChoiceSetting
             v-if="user"
@@ -511,6 +483,14 @@
             </BooleanSetting>
           </li>
         </ul>
+        <li>
+          <BooleanSetting
+            path="useAtIcon"
+            expert="1"
+          >
+            {{ $t('settings.use_at_icon') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting path="mentionLinkShowAvatar">
             {{ $t('settings.mention_link_show_avatar') }}
@@ -608,15 +588,6 @@
             {{ $t('settings.post_status_content_type') }}
           </ChoiceSetting>
         </li>
-        <li>
-          <ChoiceSetting
-            id="postLanguage"
-            path="postLanguage"
-            :options="postLanguageOptions"
-          >
-            {{ $t('settings.post_language') }}
-          </ChoiceSetting>
-        </li>
         <li>
           <BooleanSetting
             path="alwaysShowNewPostButton"

src/components/settings_modal/tabs/mutes_and_blocks_tab.js

@@ -85,7 +85,7 @@ const MutesAndBlocks = {
         // check is it's a local user
         if (user && user.is_local) {
           // append the instance address
-           
+          // eslint-disable-next-line no-undef
           return user.screen_name + '@' + location.hostname
         }
         return user.screen_name

src/components/settings_modal/tabs/mutes_and_blocks_tab.vue

@@ -10,7 +10,7 @@
           :query="queryUserIds"
           :placeholder="$t('settings.search_user_to_block')"
         >
-          <template #default="row">
+          <template v-slot="row">
             <BlockCard
               :user-id="row.item"
             />
@@ -21,7 +21,7 @@
         :refresh="true"
         :get-key="i => i"
       >
-        <template #header="{selected}">
+        <template v-slot:header="{selected}">
           <div class="bulk-actions">
             <ProgressButton
               v-if="selected.length > 0"
@@ -29,7 +29,7 @@
               :click="() => blockUsers(selected)"
             >
               {{ $t('user_card.block') }}
-              <template #progress>
+              <template v-slot:progress>
                 {{ $t('user_card.block_progress') }}
               </template>
             </ProgressButton>
@@ -39,16 +39,16 @@
               :click="() => unblockUsers(selected)"
             >
               {{ $t('user_card.unblock') }}
-              <template #progress>
+              <template v-slot:progress>
                 {{ $t('user_card.unblock_progress') }}
               </template>
             </ProgressButton>
           </div>
         </template>
-        <template #item="{item}">
+        <template v-slot:item="{item}">
           <BlockCard :user-id="item" />
         </template>
-        <template #empty>
+        <template v-slot:empty>
           {{ $t('settings.no_blocks') }}
         </template>
       </BlockList>
@@ -63,7 +63,7 @@
               :query="queryUserIds"
               :placeholder="$t('settings.search_user_to_mute')"
             >
-              <template #default="row">
+              <template v-slot="row">
                 <MuteCard
                   :user-id="row.item"
                 />
@@ -74,7 +74,7 @@
             :refresh="true"
             :get-key="i => i"
           >
-            <template #header="{selected}">
+            <template v-slot:header="{selected}">
               <div class="bulk-actions">
                 <ProgressButton
                   v-if="selected.length > 0"
@@ -82,7 +82,7 @@
                   :click="() => muteUsers(selected)"
                 >
                   {{ $t('user_card.mute') }}
-                  <template #progress>
+                  <template v-slot:progress>
                     {{ $t('user_card.mute_progress') }}
                   </template>
                 </ProgressButton>
@@ -92,16 +92,16 @@
                   :click="() => unmuteUsers(selected)"
                 >
                   {{ $t('user_card.unmute') }}
-                  <template #progress>
+                  <template v-slot:progress>
                     {{ $t('user_card.unmute_progress') }}
                   </template>
                 </ProgressButton>
               </div>
             </template>
-            <template #item="{item}">
+            <template v-slot:item="{item}">
               <MuteCard :user-id="item" />
             </template>
-            <template #empty>
+            <template v-slot:empty>
               {{ $t('settings.no_mutes') }}
             </template>
           </MuteList>
@@ -114,7 +114,7 @@
               :query="queryKnownDomains"
               :placeholder="$t('settings.type_domains_to_mute')"
             >
-              <template #default="row">
+              <template v-slot="row">
                 <DomainMuteCard
                   :domain="row.item"
                 />
@@ -125,7 +125,7 @@
             :refresh="true"
             :get-key="i => i"
           >
-            <template #header="{selected}">
+            <template v-slot:header="{selected}">
               <div class="bulk-actions">
                 <ProgressButton
                   v-if="selected.length > 0"
@@ -133,16 +133,16 @@
                   :click="() => unmuteDomains(selected)"
                 >
                   {{ $t('domain_mute_card.unmute') }}
-                  <template #progress>
+                  <template v-slot:progress>
                     {{ $t('domain_mute_card.unmute_progress') }}
                   </template>
                 </ProgressButton>
               </div>
             </template>
-            <template #item="{item}">
+            <template v-slot:item="{item}">
               <DomainMuteCard :domain="item" />
             </template>
-            <template #empty>
+            <template v-slot:empty>
               {{ $t('settings.no_mutes') }}
             </template>
           </DomainMuteList>

src/components/settings_modal/tabs/profile_tab.js

@@ -33,7 +33,6 @@ const ProfileTab = {
       newName: this.$store.state.users.currentUser.name_unescaped,
       newBio: unescape(this.$store.state.users.currentUser.description),
       newLocked: this.$store.state.users.currentUser.locked,
-      newPermitFollowback: this.$store.state.users.currentUser.permit_followback,
       newFields: this.$store.state.users.currentUser.fields.map(field => ({ name: field.name, value: field.value })),
       showRole: this.$store.state.users.currentUser.show_role,
       role: this.$store.state.users.currentUser.role,
@@ -130,15 +129,14 @@ const ProfileTab = {
         note: this.newBio,
         locked: this.newLocked,
         // Backend notation.
-         
+        /* eslint-disable camelcase */
         display_name: this.newName,
         fields_attributes: this.newFields.filter(el => el != null),
         bot: this.bot,
         show_role: this.showRole,
         status_ttl_days: this.expirePosts ? this.newPostTTLDays : -1,
-        permit_followback: this.permit_followback,
         accepts_direct_messages_from: this.userAcceptsDirectMessagesFrom
-         
+        /* eslint-enable camelcase */
       }
 
       if (this.emailLanguage) {
@@ -187,7 +185,7 @@ const ProfileTab = {
         })
         return
       }
-       
+      // eslint-disable-next-line no-undef
       const reader = new FileReader()
       reader.onload = ({ target }) => {
         const img = target.result

src/components/settings_modal/tabs/profile_tab.vue

@@ -110,9 +110,11 @@
           max="730"
           class="expire-posts-days"
           :placeholder="$t('settings.expire_posts_input_placeholder')"
-        >
+        />
+      </p>
+      <p>
+
       </p>
-      <p />
       <p>
         <interface-language-switcher
           :prompt-text="$t('settings.email_language')"
@@ -257,19 +259,6 @@
           <BooleanSetting path="serverSide_locked">
             {{ $t('settings.lock_account_description') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !serverSide_locked}]"
-          >
-            <li>
-              <BooleanSetting
-                path="serverSide_permitFollowback"
-                :disabled="!serverSide_locked"
-              >
-                {{ $t('settings.permit_followback_description') }}
-              </BooleanSetting>
-            </li>
-          </ul>
         </li>
         <li>
           <BooleanSetting path="serverSide_discoverable">

src/components/settings_modal/tabs/version_tab.js

@@ -1,25 +1,22 @@
 import { extractCommit } from 'src/services/version/version.service'
 
-function joinURL(base, subpath) {
+const pleromaFeCommitUrl = 'https://akkoma.dev/AkkomaGang/pleroma-fe/commit/'
-  return URL.parse(subpath, base)?.href || "invalid base URL"
+const pleromaBeCommitUrl = 'https://akkoma.dev/AkkomaGang/akkoma/commit/'
-}
 
 const VersionTab = {
   data () {
     const instance = this.$store.state.instance
     return {
-      backendCommitUrl: instance.backendCommitUrl,
       backendVersion: instance.backendVersion,
-      frontendCommitUrl: instance.frontendCommitUrl,
       frontendVersion: instance.frontendVersion
     }
   },
   computed: {
     frontendVersionLink () {
-      return joinURL(this.frontendCommitUrl, this.frontendVersion)
+      return pleromaFeCommitUrl + this.frontendVersion
     },
     backendVersionLink () {
-      return joinURL(this.backendCommitUrl, extractCommit(this.backendVersion))
+      return pleromaBeCommitUrl + extractCommit(this.backendVersion)
     }
   }
 }

src/components/shadow_control/shadow_control.vue

@@ -215,7 +215,7 @@
   </div>
 </template>
 
-<script src="./shadow_control.js"></script>
+<script src="./shadow_control.js" ></script>
 
 <style lang="scss">
 @import '../../_variables.scss';

src/components/side_drawer/side_drawer.vue

@@ -218,7 +218,7 @@
   </div>
 </template>
 
-<script src="./side_drawer.js"></script>
+<script src="./side_drawer.js" ></script>
 
 <style lang="scss">
 @import '../../_variables.scss';

src/components/staff_panel/staff_panel.vue

@@ -24,7 +24,7 @@
   </div>
 </template>
 
-<script src="./staff_panel.js"></script>
+<script src="./staff_panel.js" ></script>
 
 <style lang="scss">
 

src/components/status/status.scss

@@ -266,16 +266,6 @@
       color: $fallback--cGreen;
       color: var(--cGreen, $fallback--cGreen);
     }
-
-    .right-side {
-      display: flex;
-      align-items: center;
-      gap: 0.3em;
-    }
-
-    .repeat-tooltip {
-      flex-shrink: 0;
-    }
   }
 
   .repeater-avatar {

src/components/status/status.vue

@@ -83,7 +83,7 @@
           :user="statusoid.user"
         />
         <div class="right-side faint">
-          <div
+          <span
             class="status-username repeater-name"
             :title="retweeter"
           >
@@ -100,19 +100,14 @@
               v-else
               :to="retweeterProfileLink"
             >{{ retweeter }}</router-link>
-          </div>
+          </span>
           {{ ' ' }}
-
+          <FAIcon
-          <div
+            icon="retweet"
-            class="repeat-tooltip"
+            class="repeat-icon"
-          >
+            :title="$t('tool_tip.repeat')"
-             <FAIcon
+          />
-               icon="retweet"
+          {{ $t('timeline.repeated') }}
-               class="repeat-icon"
-               :title="$t('tool_tip.repeat')"
-             />
-             {{ $t('timeline.repeated') }}
-          </div>
         </div>
       </div>
 
@@ -195,7 +190,7 @@
                 >
                   <Timeago
                     :time="status.created_at"
-                    :with-direction="!compact"
+                    :with-direction="true"
                     :auto-update="60"
                   />
                 </router-link>
@@ -373,7 +368,7 @@
               :controlled-toggle-showing-long-subject="controlledToggleShowingLongSubject"
               @mediaplay="addMediaPlaying($event)"
               @mediapause="removeMediaPlaying($event)"
-              @parse-ready="setHeadTailLinks"
+              @parseReady="setHeadTailLinks"
             />
           </div>
 
@@ -481,8 +476,8 @@
             />
             <extra-buttons
               :status="status"
-              @on-error="showError"
+              @onError="showError"
-              @on-success="clearError"
+              @onSuccess="clearError"
             />
           </div>
         </div>

src/components/status_body/status_body.js

@@ -41,8 +41,7 @@ const StatusContent = {
       postLength: this.status.text.length,
       parseReadyDone: false,
       renderMisskeyMarkdown,
-      translateFrom: null,
+      translateFrom: null
-      translating: false
     }
   },
   computed: {
@@ -136,10 +135,7 @@ const StatusContent = {
     },
     translateStatus () {
       const translateTo = this.$store.getters.mergedConfig.translationLanguage || this.$store.state.instance.interfaceLanguage
-      this.translating = true
+      this.$store.dispatch('translateStatus', { id: this.status.id, language: translateTo, from: this.translateFrom })
-      this.$store.dispatch(
-        'translateStatus', { id: this.status.id, language: translateTo, from: this.translateFrom }
-      ).finally(() => { this.translating = false })
     }
   }
 }

src/components/status_body/status_body.scss

@@ -3,7 +3,6 @@
 .StatusBody {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
 
   .translation {
     border: 1px solid var(--accent, $fallback--link);
@@ -24,6 +23,24 @@
     transition: 0.05s;
   }
 
+  ._mfm_x2_ {
+    .emoji {
+      height: 100px;
+    }
+  }
+
+  ._mfm_x3_ {
+    .emoji {
+      height: 150px;
+    }
+  }
+
+  ._mfm_x4_ {
+    .emoji {
+      height: 200px;
+    }
+  }
+
   .attachments {
     margin-top: 0.5em;
   }

src/components/status_body/status_body.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="StatusBody"
-    :class="{ '-compact': compact }"
+    :class="{ '-compact': compact, 'mfm-disabled': !renderMisskeyMarkdown }"
   >
     <div class="body">
       <div
@@ -54,7 +54,7 @@
             :mfm="renderMisskeyMarkdown && (status.media_type === 'text/x.misskeymarkdown')"
             :greentext="mergedConfig.greentext"
             :attentions="status.attentions"
-            @parse-ready="onParseReady"
+            @parseReady="onParseReady"
           />
           <div
             v-if="status.translation"
@@ -70,7 +70,7 @@
               :mfm="renderMisskeyMarkdown && (status.media_type === 'text/x.misskeymarkdown')"
               :greentext="mergedConfig.greentext"
               :attentions="status.attentions"
-              @parse-ready="onParseReady"
+              @parseReady="onParseReady"
             />
             <div>
               <label class="label">{{ $t('status.override_translation_source_language') }}</label>
@@ -89,11 +89,7 @@
                 </option>
               </Select>
               {{ ' ' }}
-              <button
+              <button @click="translateStatus" class="btn button-default">
-                class="btn button-default"
-                :disabled="translating"
-                @click="translateStatus"
-              >
                 {{ $t('status.translate') }}
               </button>
             </div>
@@ -142,5 +138,5 @@
     <slot v-if="!hideSubjectStatus" />
   </div>
 </template>
-<script src="./status_body.js"></script>
+<script src="./status_body.js" ></script>
 <style lang="scss" src="./status_body.scss" />

src/components/status_content/mfm.scss

@@ -1,423 +0,0 @@
-/**
- * "FEP-c16b: Formatting MFM functions" attributes that Akkoma supports
- */
-
-.StatusContent:not(.mfm-disabled) {
-  /* The following are the non-animated MFM */
-  .mfm-center {
-    display: block;
-    text-align: center;
-  }
-
-  .mfm-flip {
-    display: inline-block;
-    transform: scaleX(-1);
-  }
-
-  .mfm-flip[data-mfm-v] {
-    transform: scaleY(-1);
-  }
-
-  .mfm-flip[data-mfm-v][data-mfm-h] {
-    transform: scale(-1, -1);
-  }
-
-  .mfm-font[data-mfm-serif] {
-    font-family: serif;
-  }
-
-  .mfm-font[data-mfm-monospace] {
-    font-family: monospace;
-  }
-
-  .mfm-font[data-mfm-cursive] {
-    font-family: cursive;
-  }
-
-  .mfm-font[data-mfm-fantasy] {
-    font-family: fantasy;
-  }
-
-  .mfm-font[data-mfm-emoji] {
-    font-family: emoji;
-  }
-
-  .mfm-font[data-mfm-math] {
-    font-family: math;
-  }
-
-  .mfm-blur {
-    filter: blur(6px);
-    transition: filter 0.3s;
-
-    &:hover {
-      filter: blur(0);
-    }
-  }
-
-  .mfm-rotate {
-    display: inline-block;
-    transform: rotate(calc(var(--mfm-deg, 90) * 1deg));
-    transform-origin: center center;
-  }
-
-  .mfm-x2 {
-    --mfm-zoom-size: 200%;
-  }
-
-  .mfm-x3 {
-    --mfm-zoom-size: 400%;
-  }
-
-  .mfm-x4 {
-    --mfm-zoom-size: 600%;
-  }
-
-  .mfm-x2,
-  .mfm-x3,
-  .mfm-x4,
-  .mfm-tada {
-    .emoji {
-      --emoji-size: 2em;
-    }
-    font-size: var(--mfm-zoom-size);
-
-    .mfm-x2,
-    .mfm-x3,
-    .mfm-x4,
-    .mfm-tada {
-      /* only half effective */
-      font-size: calc(var(--mfm-zoom-size) / 2 + 50%);
-
-      .mfm-x2,
-      .mfm-x3,
-      .mfm-x4,
-      .mfm-tada {
-        /* disabled */
-        font-size: 100%;
-      }
-    }
-  }
-
-  .mfm-position {
-    display: inline-block;
-    transform: translate(calc(var(--mfm-x, 0) * 1em), calc(var(--mfm-y, 0) * 1em));
-  }
-
-  .mfm-scale {
-    display: inline-block;
-    transform: scale(var(--mfm-x, 1), var(--mfm-y, 1));
-  }
-
-  .mfm-fg {
-    color: var(--mfm-color, #f00);
-  }
-
-  .mfm-bg {
-    background-color: var(--mfm-color, #0f0);
-  }
-
-  /* The following are the animated MFM */
-
-  /* .mfm-hover means that we should only play animation when hovering over the StatusContent
-   * So either StatusContent does not have this class,
-   * or it has the class and we are hovering over StatusContent
-   */
-  &:not(.mfm-hover:not(:hover)) {
-    .mfm-jelly {
-      display: inline-block;
-      animation: mfm-rubberBand var(--mfm-speed, 1s) linear infinite both;
-    }
-
-    .mfm-twitch {
-      display: inline-block;
-      animation: mfm-twitch var(--mfm-speed, 0.5s) ease infinite;
-    }
-
-    .mfm-shake {
-      display: inline-block;
-      animation: mfm-shake var(--mfm-speed, 0.5s) ease infinite;
-    }
-
-    .mfm-spin {
-      display: inline-block;
-      animation: mfm-spin var(--mfm-speed, 1.5s) linear infinite;
-    }
-
-    .mfm-spin[data-mfm-y] {
-      animation-name: mfm-spinY;
-    }
-
-    .mfm-spin[data-mfm-x] {
-      animation-name: mfm-spinX;
-    }
-
-    .mfm-spin[data-mfm-alternate] {
-      animation-direction: alternate;
-    }
-
-    .mfm-spin[data-mfm-left] {
-      animation-direction: reverse;
-    }
-
-    .mfm-jump {
-      display: inline-block;
-      animation: mfm-jump var(--mfm-speed, 0.75s) linear infinite;
-    }
-
-    .mfm-bounce {
-      display: inline-block;
-      animation: mfm-bounce var(--mfm-speed, 0.75s) linear infinite;
-      transform-origin: center bottom;
-    }
-
-    .mfm-rainbow {
-      animation: mfm-rainbow var(--mfm-speed, 1s) linear infinite;
-    }
-
-    .mfm-tada {
-      display: inline-block;
-      animation: mfm-tada var(--mfm-speed, 1s) linear infinite both;
-
-      --mfm-zoom-size: 150%;
-    }
-  }
-
-  /* animation keyframes */
-
-  @keyframes mfm-spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-
-  @keyframes mfm-spinX {
-    0% { transform: perspective(128px) rotateX(0deg); }
-    100% { transform: perspective(128px) rotateX(360deg); }
-  }
-
-  @keyframes mfm-spinY {
-    0% { transform: perspective(128px) rotateY(0deg); }
-    100% { transform: perspective(128px) rotateY(360deg); }
-  }
-
-  @keyframes mfm-jump {
-    0% { transform: translateY(0); }
-    25% { transform: translateY(-16px); }
-    50% { transform: translateY(0); }
-    75% { transform: translateY(-8px); }
-    100% { transform: translateY(0); }
-  }
-
-  @keyframes mfm-bounce {
-    0% { transform: translateY(0) scale(1, 1); }
-    25% { transform: translateY(-16px) scale(1, 1); }
-    50% { transform: translateY(0) scale(1, 1); }
-    75% { transform: translateY(0) scale(1.5, 0.75); }
-    100% { transform: translateY(0) scale(1, 1); }
-  }
-
-  @keyframes mfm-twitch {
-    0% { transform: translate(7px, -2px); }
-    5% { transform: translate(-3px, 1px); }
-    10% { transform: translate(-7px, -1px); }
-    15% { transform: translate(0, -1px); }
-    20% { transform: translate(-8px, 6px); }
-    25% { transform: translate(-4px, -3px); }
-    30% { transform: translate(-4px, -6px); }
-    35% { transform: translate(-8px, -8px); }
-    40% { transform: translate(4px, 6px); }
-    45% { transform: translate(-3px, 1px); }
-    50% { transform: translate(2px, -10px); }
-    55% { transform: translate(-7px, 0); }
-    60% { transform: translate(-2px, 4px); }
-    65% { transform: translate(3px, -8px); }
-    70% { transform: translate(6px, 7px); }
-    75% { transform: translate(-7px, -2px); }
-    80% { transform: translate(-7px, -8px); }
-    85% { transform: translate(9px, 3px); }
-    90% { transform: translate(-3px, -2px); }
-    95% { transform: translate(-10px, 2px); }
-    100% { transform: translate(-2px, -6px); }
-  }
-
-  @keyframes mfm-shake {
-    0% { transform: translate(-3px, -1px) rotate(-8deg); }
-    5% { transform: translate(0, -1px) rotate(-10deg); }
-    10% { transform: translate(1px, -3px) rotate(0deg); }
-    15% { transform: translate(1px, 1px) rotate(11deg); }
-    20% { transform: translate(-2px, 1px) rotate(1deg); }
-    25% { transform: translate(-1px, -2px) rotate(-2deg); }
-    30% { transform: translate(-1px, 2px) rotate(-3deg); }
-    35% { transform: translate(2px, 1px) rotate(6deg); }
-    40% { transform: translate(-2px, -3px) rotate(-9deg); }
-    45% { transform: translate(0, -1px) rotate(-12deg); }
-    50% { transform: translate(1px, 2px) rotate(10deg); }
-    55% { transform: translate(0, -3px) rotate(8deg); }
-    60% { transform: translate(1px, -1px) rotate(8deg); }
-    65% { transform: translate(0, -1px) rotate(-7deg); }
-    70% { transform: translate(-1px, -3px) rotate(6deg); }
-    75% { transform: translate(0, -2px) rotate(4deg); }
-    80% { transform: translate(-2px, -1px) rotate(3deg); }
-    85% { transform: translate(1px, -3px) rotate(-10deg); }
-    90% { transform: translate(1px, 0) rotate(3deg); }
-    95% { transform: translate(-2px, 0) rotate(-3deg); }
-    100% { transform: translate(2px, 1px) rotate(2deg); }
-  }
-
-  @keyframes mfm-rubberBand {
-    0% { transform: scale3d(1, 1, 1); }
-    30% { transform: scale3d(1.25, 0.75, 1); }
-    40% { transform: scale3d(0.75, 1.25, 1); }
-    50% { transform: scale3d(1.15, 0.85, 1); }
-    65% { transform: scale3d(0.95, 1.05, 1); }
-    75% { transform: scale3d(1.05, 0.95, 1); }
-    100% { transform: scale3d(1, 1, 1); }
-  }
-
-  @keyframes mfm-rainbow {
-    0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
-    100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
-  }
-
-  @keyframes mfm-tada {
-    0%,
-    100% { transform: scale3d(1, 1, 1); }
-
-    10%,
-    20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
-
-    30%,
-    50%,
-    70%,
-    90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
-
-    40%,
-    60%,
-    80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
-  }
-
-  /**
-   * Legacy MFM
-   * This is for backwards compatibility with posts formatted on Akkoma before support for FEP-c16b
-   * Note that it uses the keyframes as defined above for the FEP-c16b compatible MFM representation
-   */
-
-  .mfm {
-    display: inline-block;
-  }
-
-  /* The following are the legacy non-animated MFM */
-  ._mfm_flip_[data-h][data-v] {
-    transform: scale(-1, -1);
-  }
-
-  ._mfm_flip_[data-v] {
-    transform: scaleY(-1);
-  }
-
-  ._mfm_flip_:not([data-v]) {
-    transform: scaleX(-1);
-  }
-
-  ._mfm_x2_ {
-    font-size: 200%;
-  }
-
-  ._mfm_x3_ {
-    font-size: 400%;
-  }
-
-  ._mfm_x4_ {
-    font-size: 600%;
-  }
-
-  ._mfm_x2_ {
-    .emoji {
-      height: 100px;
-    }
-  }
-
-  ._mfm_x3_ {
-    .emoji {
-      height: 150px;
-    }
-  }
-
-  ._mfm_x4_ {
-    .emoji {
-      height: 200px;
-    }
-  }
-
-  ._mfm_blur_ {
-    filter: blur(6px);
-    transition: filter 0.3s;
-  }
-
-  ._mfm_blur_:hover {
-    filter: blur(0);
-  }
-
-  ._mfm_rotate_ {
-    transform: rotate(90deg);
-    transform-origin: center center;
-  }
-
-  /* The following are the legacy animated MFM */
-
-  /* .mfm-hover means that we should only play animation when hovering over the StatusContent
-   * So either StatusContent does not have this class,
-   * or it has the class and we are hovering over StatusContent
-   */
-  &:not(.mfm-hover:not(:hover)) {
-    ._mfm_tada_ {
-      font-size: 150%;
-      animation: mfm-tada 1s linear infinite both;
-    }
-
-    ._mfm_jelly_ {
-      animation: mfm-rubberBand 1s linear infinite both;
-    }
-
-    ._mfm_twitch_ {
-      animation: mfm-twitch 0.5s ease infinite;
-    }
-
-    ._mfm_shake_ {
-      animation: mfm-shake 0.5s ease infinite;
-    }
-
-    ._mfm_spin_ {
-      animation: mfm-spin 0.5s linear infinite;
-    }
-
-    ._mfm_spin_[data-x] {
-      animation-name: mfm-spinX;
-    }
-
-    ._mfm_spin_[data-y] {
-      animation-name: mfm-spinY;
-    }
-
-    ._mfm_spin_[left] {
-      animation-direction: reverse;
-    }
-
-    ._mfm_spin_[alternate] {
-      animation-direction: alternate;
-    }
-
-    ._mfm_jump_ {
-      animation: mfm-jump 0.75s linear infinite;
-    }
-
-    ._mfm_bounce_ {
-      animation: mfm-bounce 0.75s linear infinite;
-      transform-origin: center bottom;
-    }
-
-    ._mfm_rainbow_ {
-      animation: mfm-rainbow 1s linear infinite;
-    }
-  }
-}

src/components/status_content/status_content.vue

@@ -14,7 +14,7 @@
       :toggle-showing-tall="toggleShowingTall"
       :toggle-expanding-subject="toggleExpandingSubject"
       :toggle-showing-long-subject="toggleShowingLongSubject"
-      @parse-ready="$emit('parseReady', $event)"
+      @parseReady="$emit('parseReady', $event)"
     >
       <div v-if="status.poll && status.poll.options && !compact">
         <Poll
@@ -63,8 +63,7 @@
   </div>
 </template>
 
-<script src="./status_content.js"></script>
+<script src="./status_content.js" ></script>
-<style lang="scss" src="./mfm.scss" />
 <style lang="scss">
 .StatusContent {
   flex: 1;
@@ -76,6 +75,23 @@
       height: 50px;
     }
   }
+
+  &.mfm-hover:not(:hover) {
+    .mfm {
+      animation: none !important;
+    }
+  }
+  &.mfm-disabled {
+    span {
+      font-size: 100% !important;
+    }
+    .mfm {
+      animation: none !important;
+    }
+    .emoji {
+      height: 32px !important;
+    }
+  }
 }
 
 .quote-inline,

src/components/status_history_modal/status_history_modal.vue

@@ -2,7 +2,7 @@
   <Modal
     v-if="modalActivated"
     class="status-history-modal-view"
-    @backdrop-clicked="closeModal"
+    @backdropClicked="closeModal"
   >
     <div class="status-history-modal-panel panel">
       <div class="panel-heading">
@@ -17,9 +17,9 @@
             v-for="status in history"
             :key="status.id"
             :statusoid="status"
-            :is-preview="true"
+            :isPreview="true"
             class="conversation-status status-fadein panel-body"
-          />
+        />
         </div>
       </div>
     </div>

src/components/status_popover/status_popover.vue

@@ -5,10 +5,10 @@
     :bound-to="{ x: 'container' }"
     @show="enter"
   >
-    <template #trigger>
+    <template v-slot:trigger>
       <slot />
     </template>
-    <template #content>
+    <template v-slot:content>
       <Status
         v-if="status"
         :is-preview="true"
@@ -35,7 +35,7 @@
   </Popover>
 </template>
 
-<script src="./status_popover.js"></script>
+<script src="./status_popover.js" ></script>
 
 <style lang="scss">
 @import '../../_variables.scss';

src/components/still-image/still-image.js

@@ -13,7 +13,6 @@ const StillImage = {
     return {
       stopGifs: this.$store.getters.mergedConfig.stopGifs || window.matchMedia('(prefers-reduced-motion: reduce)').matches,
       isAnimated: false,
-      imageTypeLabel: ''
     }
   },
   computed: {
@@ -40,24 +39,27 @@ const StillImage = {
       this.imageLoadError && this.imageLoadError()
     },
     detectAnimation (image) {
+      // If there are no file extensions, the mimetype isn't set, and no mediaproxy is available, we can't figure out
+      // the mimetype of the image.
+      const hasFileExtension = this.src.split('/').pop().includes('.') // TODO: Better check?
       const mediaProxyAvailable = this.$store.state.instance.mediaProxyAvailable
-
+      if (!hasFileExtension && this.mimetype === undefined && !mediaProxyAvailable) {
-      if (!mediaProxyAvailable) {
         // It's a bit aggressive to assume all images we can't find the mimetype of is animated, but necessary for
         // people in need of reduced motion accessibility. As such, we'll consider those images animated if the user
         // agent is set to prefer reduced motion. Otherwise, it'll just be used as an early exit.
-        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
-          // Since the canvas and images are not pixel-perfect matching (due to scaling),
-          // It makes the images jiggle on hover, which is not ideal for accessibility, methinks
           this.isAnimated = true
-          return
+        return
-        }
-        this.detectWithoutMediaProxy(image)
-      } else {
-        this.detectWithMediaProxy(image)
       }
-    },
+
-    detectAnimationWithFetch (image) {
+      if (this.mimetype === 'image/gif' || this.src.endsWith('.gif')) {
+        this.isAnimated = true
+        return
+      }
+      // harmless CORS errors without-- clean console with
+      if (!mediaProxyAvailable) return
+      // Animated JPEGs?
+      if (!(this.src.endsWith('.webp') || this.src.endsWith('.png'))) return
       // Browser Cache should ensure image doesn't get loaded twice if cache exists
       fetch(image.src, {
         referrerPolicy: 'same-origin'
@@ -66,20 +68,12 @@ const StillImage = {
           // We don't need to read the whole file so only call it once
           data.body.getReader().read()
             .then(reader => {
-              // Ordered from least to most intensive
+              if (this.src.endsWith('.webp') && this.isAnimatedWEBP(reader.value)) {
-              if (this.isGIF(reader.value)) {
                 this.isAnimated = true
-                this.setLabel('GIF')
                 return
               }
-              if (this.isAnimatedWEBP(reader.value)) {
+              if (this.src.endsWith('.png') && this.isAnimatedPNG(reader.value)) {
                 this.isAnimated = true
-                this.setLabel('WEBP')
-                return
-              }
-              if (this.isAnimatedPNG(reader.value)) {
-                this.isAnimated = true
-                this.setLabel('APNG')
               }
             })
         })
@@ -87,53 +81,6 @@ const StillImage = {
           // this.imageLoadError && this.imageLoadError()
         })
     },
-    detectWithMediaProxy (image) {
-      this.detectAnimationWithFetch(image)
-    },
-    detectWithoutMediaProxy (image) {
-      // We'll just assume that gifs and webp are animated
-      const extension = image.src.split('.').pop().toLowerCase()
-
-      if (extension === 'gif') {
-        this.isAnimated = true
-        this.setLabel('GIF')
-        return
-      }
-      if (extension === 'webp') {
-        this.isAnimated = true
-        this.setLabel('WEBP')
-        return
-      }
-      // Beware the apng! use this if ye dare
-      // if (extension === 'png') {
-      //  this.isAnimated = true
-      //  this.setLabel('PNG')
-      //  return
-      // }
-      
-      // Hail mary for extensionless
-      if (extension.includes('/')) {
-        // Don't mind the CORS error barrage
-        this.detectAnimationWithFetch(image)
-      }
-    },
-    setLabel (name) {
-      this.imageTypeLabel = name;
-    },
-    isGIF (data) {
-      // I am a perfectly sane individual
-      //
-      // GIF HEADER CHUNK
-      // === START HEADER ===
-      // 47 49 46 38 ("GIF8")
-      const gifHeader = [0x47, 0x49, 0x46];
-      for (let i = 0; i < 3; i++) {
-        if (data[i] !== gifHeader[i]) {
-          return false;
-        }
-      }
-      return true
-    },
     isAnimatedWEBP (data) {
       /**
        * WEBP HEADER CHUNK
@@ -167,55 +114,16 @@ const StillImage = {
       const idatPos = str.indexOf('IDAT')
       return (str.substring(0, idatPos > 0 ? idatPos : 0).indexOf('acTL') > 0)
     },
-    drawThumbnail() {
+    drawThumbnail () {
-      const canvas = this.$refs.canvas;
+      const canvas = this.$refs.canvas
-      if (!canvas) return;
+      if (!this.$refs.canvas) return
-    
+      const image = this.$refs.src
-      const context = canvas.getContext('2d');
+      const width = image.naturalWidth
-      const image = this.$refs.src;
+      const height = image.naturalHeight
-      const parentElement = canvas.parentElement;
+      canvas.width = width
-    
+      canvas.height = height
-      // Draw the quick, unscaled version first
+      canvas.getContext('2d').drawImage(image, 0, 0, width, height)
-      context.drawImage(image, 0, 0, parentElement.clientWidth, parentElement.clientHeight);
+    }
-    
-      // Use requestAnimationFrame to schedule the scaling to the next frame
-      requestAnimationFrame(() => {
-        // Compute scaling ratio between the natural dimensions of the image and its display dimensions
-        const scalingRatioWidth = parentElement.clientWidth / image.naturalWidth;
-        const scalingRatioHeight = parentElement.clientHeight / image.naturalHeight;
-
-        // Adjust for high-DPI displays
-        const ratio = window.devicePixelRatio || 1;
-        canvas.width = image.naturalWidth * scalingRatioWidth * ratio;
-        canvas.height = image.naturalHeight * scalingRatioHeight * ratio;
-        canvas.style.width = `${parentElement.clientWidth}px`;
-        canvas.style.height = `${parentElement.clientHeight}px`;
-        context.scale(ratio, ratio);
-    
-        // Maintain the aspect ratio of the image
-        const imgAspectRatio = image.naturalWidth / image.naturalHeight;
-        const canvasAspectRatio = parentElement.clientWidth / parentElement.clientHeight;
-    
-        let drawWidth, drawHeight;
-    
-        if (imgAspectRatio > canvasAspectRatio) {
-          drawWidth = parentElement.clientWidth;
-          drawHeight = parentElement.clientWidth / imgAspectRatio;
-        } else {
-          drawHeight = parentElement.clientHeight;
-          drawWidth = parentElement.clientHeight * imgAspectRatio;
-        }
-    
-        context.clearRect(0, 0, canvas.width, canvas.height);  // Clear the previous unscaled image
-        context.imageSmoothingEnabled = true;
-        context.imageSmoothingQuality = 'high';
-
-        // Draw the good one for realsies
-        const dx = (parentElement.clientWidth - drawWidth) / 2;
-        const dy = (parentElement.clientHeight - drawHeight) / 2;
-        context.drawImage(image, dx, dy, drawWidth, drawHeight);
-      });
-    }    
   },
   updated () {
     // On computed animated change

src/components/still-image/still-image.vue

@@ -1,16 +1,9 @@
 <template>
   <div
-    ref="still-image"
     class="still-image"
     :class="{ animated: animated }"
     :style="style"
   >
-    <div
-      v-if="animated && imageTypeLabel"
-      class="image-type-label"
-    >
-      {{ imageTypeLabel }}
-    </div>
     <canvas
       v-if="animated"
       ref="canvas"
@@ -64,26 +57,30 @@
     }
   }
 
-  .image-type-label {
-    position: absolute;
-    top: 0.25em;
-    left: 0.25em;
-    line-height: 1;
-    font-size: 0.6em;
-    background: rgba(127, 127, 127, 0.5);
-    color: #fff;
-    padding: 2px 4px;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    z-index: 2;
-    visibility: var(--_still-image-label-visibility, visible);
-  }
-
   &.animated {
+    &::before {
+      zoom: var(--_still_image-label-scale, 1);
+      content: 'gif';
+      position: absolute;
+      line-height: 1;
+      font-size: 0.7em;
+      top: 0.5em;
+      left: 0.5em;
+      background: rgba(127, 127, 127, 0.5);
+      color: #fff;
+      display: block;
+      padding: 2px 4px;
+      border-radius: $fallback--tooltipRadius;
+      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+      z-index: 2;
+      visibility: var(--_still-image-label-visibility, visible);
+    }
+
     &:hover canvas {
       display: none;
     }
 
-    &:hover .image-type-label {
+    &:hover::before {
       visibility: var(--_still-image-label-visibility, hidden);
     }