Merge pull request 'Support selectable visibility of repeats' (#440 ) from Oneric/akkoma-fe:boost-scopes into develop

Reviewed-on: AkkomaGang/akkoma-fe#440
Add support selectable visibility of repeat
2025-06-10 18:37:59 +00:00 · 2025-05-18 22:52:55 +02:00 · 2025-05-18 22:52:55 +02:00 · 2025-05-09 18:34:53 +00:00 · 2025-05-09 18:30:07 +00:00 · 2025-05-09 18:29:54 +00:00
167 changed files with 9525 additions and 6446 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -1,2 +0,0 @@
-build/*.js
-config/*.js
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,30 +0,0 @@
-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
-  }
-}
--- a/.node-version
+++ b/.node-version
@ -1 +0,0 @@
-7.2.1
--- a/.tool-versions
+++ b/.tool-versions
@ -0,0 +1 @@
+nodejs 20.12.2
--- a/.woodpecker.yml
+++ b/.woodpecker.yml
@ -1,24 +1,25 @@
-platform: linux/amd64
-pipeline:
+labels:
+  platform: linux/amd64
+
+steps:
  lint:
    when:
      event:
      - pull_request
-    image: node:18
+    image: node:20
    commands:
    - yarn
    - yarn lint
-    #- yarn stylelint

  test:
    when:
      event:
      - pull_request
-    image: node:18
+    image: node:20
    commands:
    - apt update
    - apt install firefox-esr -y --no-install-recommends
-    - yarn 
+    - yarn
    - yarn unit

  build:
@ -28,7 +29,7 @@ pipeline:
      branch:
      - develop
      - stable
-    image: node:18
+    image: node:20
    commands:
    - yarn
    - yarn build
@ -40,15 +41,15 @@ pipeline:
      branch:
      - develop
      - stable
-    image: node:18
+    image: node:20
    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.5.1/scaleway-cli_2.5.1_linux_amd64
-      - mv scaleway-cli_2.5.1_linux_amd64 scaleway-cli
+      - wget https://github.com/scaleway/scaleway-cli/releases/download/v2.30.0/scaleway-cli_2.30.0_linux_amd64
+      - mv scaleway-cli_2.30.0_linux_amd64 scaleway-cli
      - chmod +x scaleway-cli
      - ./scaleway-cli object config install type=rclone
      - zip akkoma-fe.zip -r dist
@ -70,8 +71,8 @@ pipeline:
    - 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.5.1/scaleway-cli_2.5.1_linux_amd64
-    - mv scaleway-cli_2.5.1_linux_amd64 scaleway-cli
+    - wget https://github.com/scaleway/scaleway-cli/releases/download/v2.30.0/scaleway-cli_2.30.0_linux_amd64
+    - mv scaleway-cli_2.30.0_linux_amd64 scaleway-cli
    - chmod +x scaleway-cli
    - ./scaleway-cli object config install type=rclone
    - cd docs
@ -79,4 +80,4 @@ pipeline:
    - 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/ 
--- a/README.md
+++ b/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,9 +20,11 @@ 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
-npm install -g yarn
+corepack enable
 yarn

 # serve with hot reload at localhost:8080
@ -37,7 +39,7 @@ npm run unit

 # For Contributors:

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

 * `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.
@ -52,4 +54,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.
--- a/build/build.js
+++ b/build/build.js
@ -1,36 +1,36 @@
 // https://github.com/shelljs/shelljs
-require('./check-versions')()
-require('shelljs/global')
-env.NODE_ENV = 'production'
+require("./check-versions")();
+require("shelljs/global");
+env.NODE_ENV = "production";

-var path = require('path')
-var config = require('../config')
-var ora = require('ora')
-var webpack = require('webpack')
-var webpackConfig = require('./webpack.prod.conf')
+var path = require("path");
+var config = require("../config");
+var webpack = require("webpack");
+var webpackConfig = require("./webpack.prod.conf");

 console.log(
-  '  Tip:\n' +
-  '  Built files are meant to be served over an HTTP server.\n' +
-  '  Opening index.html over file:// won\'t work.\n'
-)
+  "  Tip:\n" +
+    "  Built files are meant to be served over an HTTP server.\n" +
+    "  Opening index.html over file:// won't work.\n",
+);

-var spinner = ora('building for production...')
-spinner.start()
-
-var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
-rm('-rf', assetsPath)
-mkdir('-p', assetsPath)
-cp('-R', 'static/*', assetsPath)
+var assetsPath = path.join(
+  config.build.assetsRoot,
+  config.build.assetsSubDirectory,
+);
+rm("-rf", assetsPath);
+mkdir("-p", assetsPath);
+cp("-R", "static/*", assetsPath);

 webpack(webpackConfig, function (err, stats) {
-  spinner.stop()
-  if (err) throw err
-  process.stdout.write(stats.toString({
-    colors: true,
-    modules: false,
-    children: false,
-    chunks: false,
-    chunkModules: false
-  }) + '\n')
-})
+  if (err) throw err;
+  process.stdout.write(
+    stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false,
+    }) + "\n",
+  );
+});
--- a/build/dev-server.js
+++ b/build/dev-server.js
@ -5,7 +5,7 @@ var path = require('path')
 var express = require('express')
 var webpack = require('webpack')
 var opn = require('opn')
-var proxyMiddleware = require('http-proxy-middleware')
+const { createProxyMiddleware } = require('http-proxy-middleware');
 var webpackConfig = process.env.NODE_ENV === 'testing'
  ? require('./webpack.prod.conf')
  : require('./webpack.dev.conf')
@ -36,7 +36,13 @@ Object.keys(proxyTable).forEach(function (context) {
  if (typeof options === 'string') {
    options = { target: options }
  }
-  app.use(proxyMiddleware(context, options))
+  const targetUrl = new URL(options.target);
+  // 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
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@ -3,6 +3,7 @@ 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
@ -35,6 +36,7 @@ module.exports = {
    ],
    fallback: {
      "url": require.resolve("url/"),
+      querystring: require.resolve("querystring-es3")
    },
    alias: {
      'static': path.resolve(__dirname, '../static'),
@ -47,20 +49,6 @@ 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
@ -118,6 +106,9 @@ module.exports = {
    ]
  },
  plugins: [
-    new VueLoaderPlugin()
+    new VueLoaderPlugin(),
+    new ESLintPlugin({
+      configType: 'flat'
+    })
  ]
 }
--- a/config/local.example.json
+++ b/config/local.example.json
@ -1,4 +1,4 @@
 {
-  "target": "https://pleroma.soykaf.com/",
+  "target": "https://otp.akkoma.dev/",
  "staticConfigPreference": false
 }
--- a/config/test.env.js
+++ b/config/test.env.js
@ -2,5 +2,4 @@ var { merge } = require('webpack-merge')
 var devEnv = require('./dev.env')

 module.exports = merge(devEnv, {
-  NODE_ENV: '"testing"'
 })
--- a/docs/docs/stickers.md
+++ b/docs/docs/stickers.md
@ -15,12 +15,13 @@ put a file that looks like this

 ```json
 {
-  "myPack": "/static/stickers/myPack"
+  "myPack": "/static/stickers/myPack/"
 }
 ```

 This file is a mapping from name to pack directory location. It says "we have a pack called myPack, look for
-it at `/static/stickers/myPack`". You can add as many packs as you like in this manner.
+it inside `/static/stickers/myPack`". You can add as many packs as you like in this manner.
+Note that a single leading and a trailing slash are **required** to work correctly!

 ## Creating the pack

--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,31 @@
+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'
+    ]
+  }
+]
--- a/index.html
+++ b/index.html
@ -6,7 +6,6 @@
    <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-->
--- a/package.json
+++ b/package.json
@ -12,120 +12,118 @@
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "stylelint": "stylelint src/**/*.scss",
-    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
-    "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
+    "lint": "eslint src test/unit/specs test/e2e/specs",
+    "lint-fix": "eslint --fix 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": "1.3.0",
-    "@fortawesome/free-regular-svg-icons": "^6.1.2",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
-    "@fortawesome/vue-fontawesome": "3.0.1",
-    "@vuelidate/core": "^2.0.0",
-    "@vuelidate/validators": "^2.0.0",
-    "blurhash": "^2.0.4",
-    "body-scroll-lock": "2.7.1",
-    "chromatism": "3.0.0",
-    "click-outside-vue3": "4.0.1",
-    "cropperjs": "1.5.12",
-    "diff": "3.5.0",
-    "escape-html": "1.0.3",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
+    "@vuelidate/core": "^2.0.3",
+    "@vuelidate/validators": "^2.0.4",
+    "blurhash": "^2.0.5",
+    "body-scroll-lock": "^3.1.5",
+    "chromatism": "^3.0.0",
+    "click-outside-vue3": "^4.0.1",
+    "cropperjs": "^1.6.2",
+    "diff": "^5.2.0",
+    "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.6.2",
-    "punycode.js": "2.1.0",
-    "qrcode": "1",
-    "url": "^0.11.0",
-    "vue": "^3.2.31",
-    "vue-i18n": "^9.2.2",
-    "vue-router": "4.0.14",
-    "vue-template-compiler": "2.6.11",
-    "vuex": "4.0.2"
+    "phoenix": "^1.7.12",
+    "punycode.js": "^2.3.1",
+    "qrcode": "^1.5.3",
+    "querystring-es3": "^0.2.1",
+    "url": "^0.11.3",
+    "vue": "^3.4.38",
+    "vue-i18n": "^9.14.0",
+    "vue-router": "^4.4.3",
+    "vue-template-compiler": "^2.7.16",
+    "vuex": "^4.1.0"
  },
  "devDependencies": {
-    "@babel/core": "7.17.8",
+    "@babel/core": "^7.24.6",
    "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-transform-runtime": "7.17.0",
-    "@babel/preset-env": "7.16.11",
-    "@babel/register": "7.17.7",
+    "@babel/plugin-transform-runtime": "^7.24.6",
+    "@babel/preset-env": "^7.24.6",
+    "@babel/register": "^7.24.6",
    "@intlify/vue-i18n-loader": "^5.0.0",
-    "@ungap/event-target": "0.2.3",
-    "@vue/babel-helper-vue-jsx-merge-props": "1.2.1",
-    "@vue/babel-plugin-jsx": "1.1.1",
+    "@ungap/event-target": "^0.2.4",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
+    "@vue/babel-plugin-jsx": "^1.2.2",
    "@vue/compiler-sfc": "^3.1.0",
    "@vue/test-utils": "^2.0.2",
-    "autoprefixer": "6.7.7",
+    "autoprefixer": "^10.4.19",
    "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",
-    "chromedriver": "^107.0.3",
+    "chalk": "^1.1.3",
+    "chromedriver": "^119.0.1",
    "connect-history-api-fallback": "^2.0.0",
    "cross-spawn": "^7.0.3",
-    "css-loader": "^6.7.2",
+    "css-loader": "^7.1.2",
    "custom-event-polyfill": "^1.0.7",
-    "eslint": "^7.32.0",
-    "eslint-config-standard": "^17.0.0",
+    "eslint": "^9.3.0",
+    "eslint-config-standard": "^17.1.0",
    "eslint-friendly-formatter": "^4.0.1",
-    "eslint-loader": "^4.0.2",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-promise": "^6.2.0",
    "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-vue": "^9.7.0",
-    "eventsource-polyfill": "0.9.6",
-    "express": "4.17.3",
+    "eslint-plugin-vue": "^9.26.0",
+    "eslint-webpack-plugin": "^4.2.0",
+    "eventsource-polyfill": "^0.9.6",
+    "express": "^4.19.2",
    "file-loader": "^6.2.0",
-    "function-bind": "1.1.1",
+    "function-bind": "^1.1.2",
    "html-webpack-plugin": "^5.5.0",
-    "http-proxy-middleware": "0.21.0",
-    "inject-loader": "2.0.1",
-    "isparta-loader": "2.0.0",
-    "json-loader": "0.5.7",
-    "karma": "6.3.17",
-    "karma-coverage": "1.1.2",
-    "karma-firefox-launcher": "1.3.0",
-    "karma-mocha": "2.0.1",
-    "karma-mocha-reporter": "2.2.5",
-    "karma-sinon-chai": "2.0.2",
-    "karma-sourcemap-loader": "0.3.8",
-    "karma-spec-reporter": "0.0.33",
+    "http-proxy-middleware": "^3.0.0",
+    "json-loader": "^0.5.7",
+    "karma": "^6.4.3",
+    "karma-coverage": "^2.2.1",
+    "karma-firefox-launcher": "^2.1.3",
+    "karma-mocha": "^2.0.1",
+    "karma-mocha-reporter": "^2.2.5",
+    "karma-sinon-chai": "^2.0.2",
+    "karma-sourcemap-loader": "^0.4.0",
+    "karma-spec-reporter": "^0.0.36",
    "karma-webpack": "^5.0.0",
-    "lodash": "4.17.21",
-    "lolex": "1.6.0",
-    "mini-css-extract-plugin": "0.12.0",
-    "mocha": "3.5.3",
-    "nightwatch": "0.9.21",
-    "opn": "4.0.2",
-    "ora": "0.4.1",
+    "lodash": "^4.17.21",
+    "lolex": "^6.0.0",
+    "mini-css-extract-plugin": "^2.9.0",
+    "mocha": "^10.4.0",
+    "nightwatch": "^3.6.3",
+    "opn": "^6.0.0",
    "postcss-html": "^1.5.0",
-    "postcss-loader": "3.0.0",
+    "postcss-loader": "^8.1.1",
    "postcss-sass": "^0.5.0",
-    "raw-loader": "0.5.1",
-    "sass": "^1.56.0",
-    "sass-loader": "^13.2.0",
-    "selenium-server": "2.53.1",
-    "semver": "5.7.1",
-    "shelljs": "0.8.5",
-    "sinon": "2.4.1",
-    "sinon-chai": "2.14.0",
+    "raw-loader": "^4.0.2",
+    "sass": "^1.77.2",
+    "sass-loader": "^14.2.1",
+    "selenium-server": "^3.141.59",
+    "semver": "^7.6.2",
+    "shelljs": "^0.8.5",
+    "sinon": "^18.0.0",
+    "sinon-chai": "^3.7.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.0.0",
-    "vue-style-loader": "^4.1.2",
-    "webpack": "^5.75.0",
-    "webpack-dev-middleware": "^5.3.3",
-    "webpack-hot-middleware": "^2.25.1",
-    "webpack-merge": "^5.8.0",
-    "workbox-webpack-plugin": "^6.5.4"
+    "vue-loader": "^17.4.2",
+    "vue-style-loader": "^4.1.3",
+    "webpack": "^5.91.0",
+    "webpack-dev-middleware": "^7.2.1",
+    "webpack-hot-middleware": "^2.26.1",
+    "webpack-merge": "^5.10.0",
+    "workbox-webpack-plugin": "^7.1.0"
  },
  "engines": {
    "node": ">= 16.0.0",
--- a/src/App.js
+++ b/src/App.js
@ -59,11 +59,17 @@ 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 () {
@ -71,7 +77,7 @@ export default {
        ? null
        : this.$store.state.instance.background
    },
-    background () { return this.userBackground || this.instanceBackground },
+    background () { return this.pageBackground || this.userBackground || this.instanceBackground },
    bgStyle () {
      if (this.background) {
        return {
@ -88,6 +94,9 @@ 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 },
--- a/src/App.scss
+++ b/src/App.scss
@ -8,7 +8,7 @@
 }

 html {
-  font-size: 14px;
+  font-size: 0.875rem;
  // overflow-x: clip causes my browser's tab to crash with SIGILL lul
 }

@ -172,6 +172,10 @@ 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 {
@ -187,12 +191,17 @@ 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);

--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@ -183,6 +183,12 @@ 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'])
 }

--- a/src/components/about/about.vue
+++ b/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>
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@ -6,7 +6,7 @@
      :bound-to="{ x: 'container' }"
      remove-padding
    >
-      <template v-slot:content>
+      <template #content>
        <div class="dropdown-menu">
          <template v-if="relationship.following">
            <button
@ -71,7 +71,7 @@
          </button>
        </div>
      </template>
-      <template v-slot:trigger>
+      <template #trigger>
        <button class="button-unstyled ellipsis-button">
          <FAIcon
            class="icon"
@ -93,7 +93,7 @@
          keypath="user_card.block_confirm"
          tag="span"
        >
-          <template v-slot:user>
+          <template #user>
            <span
              v-text="user.screen_name_ui"
            />
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@ -37,7 +37,7 @@
      white-space: pre-line;
      word-break: break-word;
      text-overflow: ellipsis;
-      overflow: scroll;
+      overflow: auto;
    }

    &.-static {
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@ -246,8 +246,8 @@
          ref="flash"
          class="flash"
          :src="attachment.large_thumb_url || attachment.url"
-          @playerOpened="setFlashLoaded(true)"
-          @playerClosed="setFlashLoaded(false)"
+          @player-opened="setFlashLoaded(true)"
+          @player-closed="setFlashLoaded(false)"
        />
      </span>
    </div>
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@ -14,7 +14,7 @@
  </div>
 </template>

-<script src="./avatar_list.js" ></script>
+<script src="./avatar_list.js"></script>

 <style lang="scss">
@import '../../_variables.scss';
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@ -22,12 +22,12 @@

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

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

 <style lang="scss">
 .color-control {
--- a/src/components/confirm_modal/confirm_modal.vue
+++ b/src/components/confirm_modal/confirm_modal.vue
@ -25,6 +25,8 @@
  </dialog-modal>
 </template>

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

@ -35,5 +37,3 @@
  }
 }
 </style>
-
-<script src="./confirm_modal.js"></script>
--- a/src/components/conversation/conversation.js
+++ b/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({
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@ -91,7 +91,7 @@
              :controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"

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

          @goto="setHighlight"
-          @toggleExpanded="toggleExpanded"
+          @toggle-expanded="toggleExpanded"
        />
      </div>
    </div>
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/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
--- a/src/components/domain_mute_card/domain_mute_card.vue
+++ b/src/components/domain_mute_card/domain_mute_card.vue
@ -9,7 +9,7 @@
      class="btn button-default"
    >
      {{ $t('domain_mute_card.unmute') }}
-      <template v-slot:progress>
+      <template #progress>
        {{ $t('domain_mute_card.unmute_progress') }}
      </template>
    </ProgressButton>
@ -19,7 +19,7 @@
      class="btn button-default"
    >
      {{ $t('domain_mute_card.mute') }}
-      <template v-slot:progress>
+      <template #progress>
        {{ $t('domain_mute_card.mute_progress') }}
      </template>
    </ProgressButton>
--- a/src/components/edit_status_modal/edit_status_modal.vue
+++ b/src/components/edit_status_modal/edit_status_modal.vue
@ -2,7 +2,7 @@
  <Modal
    v-if="isFormVisible"
    class="edit-form-modal-view"
-    @backdropClicked="closeModal"
+    @backdrop-clicked="closeModal"
  >
    <div class="edit-form-modal-panel panel">
      <div class="panel-heading">
@ -11,10 +11,10 @@
      <PostStatusForm
        class="panel-body"
        v-bind="params"
-        @posted="closeModal"
-        :disablePolls="true"
-        :disableVisibilitySelector="true"
+        :disable-polls="true"
+        :disable-visibility-selector="true"
        :post-handler="doEditStatus"
+        @posted="closeModal"
      />
    </div>
  </Modal>
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@ -43,7 +43,10 @@
          :class="{ highlighted: index === highlighted }"
          @click.stop.prevent="onClick($event, suggestion)"
        >
-          <span v-if="!suggestion.mfm" class="image">
+          <span
+            v-if="!suggestion.mfm"
+            class="image"
+          >
            <img
              v-if="suggestion.img"
              :src="suggestion.img"
--- a/src/components/emoji_input/suggestor.js
+++ b/src/components/emoji_input/suggestor.js
@ -1,4 +1,4 @@
-const MFM_TAGS = ['blur', 'bounce', 'flip', 'font', 'jelly', 'jump', 'rainbow', 'rotate', 'shake', 'sparkle', 'spin', 'tada', 'twitch', 'x2', 'x3', 'x4']
+const MFM_TAGS = ['bg', 'blur', 'bounce', 'center', 'fg', 'flip', 'font', 'jelly', 'jump', 'position', 'rainbow', 'rotate', 'scale', '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
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@ -11,7 +11,7 @@
        @click="emojiOnClick(reaction.name, $event)"
        @mouseenter="fetchEmojiReactionsByIfMissing()"
      >
-        <span
+        <template
          v-if="reaction.url !== null"
        >
          <StillImage
@ -19,16 +19,15 @@
            :title="reaction.name"
            :alt="reaction.name"
            class="reaction-emoji"
-            height="2.55em"
          />
          {{ reaction.count }}
-        </span>
-        <span v-else>
+        </template>
+        <template v-else>
          <span class="reaction-emoji unicode-emoji">
            {{ reaction.name }}
          </span>
          <span>{{ reaction.count }}</span>
-        </span>
+        </template>
      </button>
    </UserListPopover>
    <a
@ -42,7 +41,7 @@
  </div>
 </template>

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

@ -53,23 +52,26 @@
  container-type: inline-size;
 }

-.unicode-emoji {
-  font-size: 210%;
-}
-
 .emoji-reaction {
-  padding: 0 0.5em;
+  padding: 2px 0.5em;
  margin-right: 0.5em;
  margin-top: 0.5em;
  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
+  align-items: end;
+
  .reaction-emoji {
    width: auto;
    max-width: 96cqw;
-    height: 2.55em !important;
    margin-right: 0.25em;
+
+    &.still-image {
+      height: 2.55em;
+    }
+    &.unicode-emoji {
+      display: inline-block;
+      font-size: 2.125em; // assuming default line height of 1.2rem and emojis that don't exceed line height
+      line-height: 2.55rem;
+    }
  }
  &:focus {
    outline: none;
@ -97,9 +99,9 @@
 }

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

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

-<script src="./extra_buttons.js" ></script>
+<script src="./extra_buttons.js"></script>

 <style lang="scss">
@import '../../_variables.scss';
--- a/src/components/favorite_button/favorite_button.vue
+++ b/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';
--- a/src/components/features_panel/features_panel.vue
+++ b/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 {
--- a/src/components/follow_request_card/follow_request_card.vue
+++ b/src/components/follow_request_card/follow_request_card.vue
@ -1,5 +1,8 @@
 <template>
-  <basic-user-card :user="user" v-if="show">
+  <basic-user-card
+    v-if="show"
+    :user="user"
+  >
    <div class="follow-request-card-content-container">
      <button
        class="btn button-default"
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@ -47,7 +47,7 @@
  </div>
 </template>

-<script src="./font_control.js" ></script>
+<script src="./font_control.js"></script>

 <style lang="scss">
@import '../../_variables.scss';
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@ -88,10 +88,8 @@ const Gallery = {
      set(this.sizes, id, { width, height })
    },
    rowStyle (row) {
-      if (row.audio) {
-        return { 'padding-bottom': '25%' } // fixed reduced height for audio
-      } else if (!row.minimal && !row.grid) {
-        return { 'padding-bottom': `${(100 / (row.items.length + 0.6))}%` }
+      if (!row.audio && !row.minimal && !row.grid) {
+        return { 'aspect-ratio': `1/${(1 / (row.items.length + 0.6))}` }
      }
    },
    itemStyle (id, row) {
--- a/src/components/gallery/gallery.vue
+++ b/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)"
-            @setMedia="onMedia"
-            @naturalSizeLoad="onNaturalSizeLoad"
+            @set-media="onMedia"
+            @natural-size-load="onNaturalSizeLoad"
          />
        </div>
      </div>
@ -96,9 +96,15 @@

  .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;
--- a/src/components/hashtag_link/hashtag_link.vue
+++ b/src/components/hashtag_link/hashtag_link.vue
@ -14,6 +14,6 @@
  </span>
 </template>

-<script src="./hashtag_link.js"/>
+<script src="./hashtag_link.js" />

-<style lang="scss" src="./hashtag_link.scss"/>
+<style lang="scss" src="./hashtag_link.scss" />
--- a/src/components/instance_specific_panel/instance_specific_panel.vue
+++ b/src/components/instance_specific_panel/instance_specific_panel.vue
@ -10,4 +10,4 @@
  </div>
 </template>

-<script src="./instance_specific_panel.js" ></script>
+<script src="./instance_specific_panel.js"></script>
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@ -42,6 +42,7 @@ export default {
@import '../../_variables.scss';

 .list {
+  min-height: 1em;
  &-item:not(:last-child) {
    border-bottom: 1px solid;
    border-bottom-color: $fallback--border;
--- a/src/components/local_bubble_panel/local_bubble_panel.vue
+++ b/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"
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@ -90,7 +90,7 @@
  </div>
 </template>

-<script src="./login_form.js" ></script>
+<script src="./login_form.js"></script>

 <style lang="scss">
@import '../../_variables.scss';
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@ -2,7 +2,7 @@
  <Modal
    v-if="showing"
    class="media-modal-view"
-    @backdropClicked="hideIfNotSwiped"
+    @backdrop-clicked="hideIfNotSwiped"
  >
    <SwipeClick
      v-if="type === 'image'"
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@ -42,7 +42,7 @@ const mediaUpload = {
        .then((fileData) => {
          self.$emit('uploaded', fileData)
          self.decreaseUploadCount()
-        }, (error) => { // eslint-disable-line handle-callback-err
+        }, (error) => {  
          self.$emit('upload-failed', 'default')
          self.decreaseUploadCount()
        })
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@ -26,7 +26,7 @@
  </label>
 </template>

-<script src="./media_upload.js" ></script>
+<script src="./media_upload.js"></script>

 <style lang="scss">
@import '../../_variables.scss';
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@ -93,9 +93,6 @@ const MentionLink = {
        this.highlightType
      ]
    },
-    useAtIcon () {
-      return this.mergedConfig.useAtIcon
-    },
    isRemote () {
      return this.userName !== this.userNameFull
    },
--- a/src/components/mention_link/mention_link.vue
+++ b/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" />
--- a/src/components/mentions_line/mentions_line.vue
+++ b/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" />
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@ -69,4 +69,4 @@
    </div>
  </div>
 </template>
-<script src="./recovery_form.js" ></script>
+<script src="./recovery_form.js"></script>
--- a/src/components/mfa_form/totp_form.vue
+++ b/src/components/mfa_form/totp_form.vue
@ -18,6 +18,7 @@
          <input
            id="code"
            v-model="code"
+            autocomplete="one-time-code"
            class="form-control"
          >
        </div>
--- a/src/components/mod_modal/tabs/reports_tab/report_card.vue
+++ b/src/components/mod_modal/tabs/reports_tab/report_card.vue
@ -4,7 +4,7 @@
      class="panel-heading"
      @click="toggleHidden"
    >
-      <h4>{{ $t('moderation.reports.report') + ' ' + this.account.screen_name }}</h4>
+      <h4>{{ $t('moderation.reports.report') + ' ' + 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,7 +35,10 @@
        <div v-if="content">
          {{ decode(content) }}
        </div>
-        <i v-else class="faint">
+        <i
+          v-else
+          class="faint"
+        >
          {{ $t('moderation.reports.no_content') }}
        </i>
        <div class="report-author">
@ -43,12 +46,12 @@
            class="small-avatar"
            :user="actor"
          />
-          {{ this.actor.screen_name }}
+          {{ 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"
@ -74,8 +77,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"
@ -99,9 +102,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
@ -134,7 +137,7 @@
        :offset="{ y: 5 }"
        remove-padding
      >
-        <template v-slot:trigger>
+        <template #trigger>
          <button
            class="btn button-default"
            :disabled="!tagPolicyEnabled"
@ -147,7 +150,7 @@
            />
          </button>
        </template>
-        <template v-slot:content="{close}">
+        <template #content="{close}">
          <div
            class="dropdown-menu"
            :disabled="!tagPolicyEnabled"
--- a/src/components/mod_modal/tabs/reports_tab/report_note.vue
+++ b/src/components/mod_modal/tabs/reports_tab/report_note.vue
@ -6,7 +6,7 @@
          class="small-avatar"
          :user="user"
        />
-        {{ this.user.screen_name }}
+        {{ user.screen_name }}
      </div>
      <div class="header-right">
        <Timeago
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@ -22,6 +22,9 @@ export default {
      default: false
    }
  },
+  emits: [
+    'backdropClicked',
+  ],
  computed: {
    classes () {
      return {
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@ -8,7 +8,7 @@
      @show="setToggled(true)"
      @close="setToggled(false)"
    >
-      <template v-slot:content>
+      <template #content>
        <div class="dropdown-menu">
          <span v-if="user.is_local">
            <button
@ -122,7 +122,7 @@
          </span>
        </div>
      </template>
-      <template v-slot:trigger>
+      <template #trigger>
        <button
          class="btn button-default btn-block moderation-tools-button"
          :class="{ toggled }"
@ -137,11 +137,11 @@
        v-if="showDeleteUserDialog"
        :on-cancel="deleteUserDialog.bind(this, false)"
      >
-        <template v-slot:header>
+        <template #header>
          {{ $t('user_card.admin_menu.delete_user') }}
        </template>
        <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
-        <template v-slot:footer>
+        <template #footer>
          <button
            class="btn button-default"
            @click="deleteUserDialog(false)"
--- a/src/components/nav_panel/nav_panel.vue
+++ b/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';
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@ -6,6 +6,7 @@ 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'
@ -50,7 +51,8 @@ const Notification = {
    Timeago,
    Status,
    RichContent,
-    ConfirmModal
+    ConfirmModal,
+    StillImage
  },
  methods: {
    toggleUserExpanded () {
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@ -116,12 +116,13 @@
                  scope="global"
                  keypath="notifications.reacted_with"
                >
-                  <img
+                  <still-image
                    v-if="notification.emoji_url !== null"
                    class="notification-reaction-emoji"
                    :src="notification.emoji_url"
-                    :name="notification.emoji"
-                  >
+                    :title="notification.emoji"
+                    :alt="notification.emoji"
+                  />
                  <span
                    v-else
                    class="emoji-reaction-emoji"
@ -151,7 +152,6 @@
            >
              <Timeago
                :time="notification.created_at"
-                :with-direction="true"
                :auto-update="240"
              />
            </router-link>
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@ -5,7 +5,7 @@
    placement="bottom"
    :bound-to="{ x: 'container' }"
  >
-    <template v-slot:content>
+    <template #content>
      <div class="dropdown-menu">
        <button
          class="button-default dropdown-item"
@ -72,7 +72,7 @@
        </button>
      </div>
    </template>
-    <template v-slot:trigger>
+    <template #trigger>
      <button class="filter-trigger-button button-unstyled">
        <FAIcon icon="filter" />
      </button>
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@ -105,9 +105,12 @@
    flex: 1;
    padding-left: 0.8em;
    min-width: 0;
+  }

+  .heading-right, .notification-right {
    .timeago {
-      min-width: 3em;
+      display: inline-block;
+      min-width: 6em;
      text-align: right;
    }
  }
--- a/src/components/opacity_input/opacity_input.vue
+++ b/src/components/opacity_input/opacity_input.vue
@ -14,7 +14,7 @@
      :model-value="present"
      :disabled="disabled"
      class="opt"
-      @update:modelValue="$emit('update:modelValue', !present ? fallback : undefined)"
+      @update:model-value="$emit('update:modelValue', !present ? fallback : undefined)"
    />
    <input
      :id="name"
--- a/src/components/pinch_zoom/pinch_zoom.vue
+++ b/src/components/pinch_zoom/pinch_zoom.vue
@ -2,7 +2,6 @@
  <pinch-zoom
    class="pinch-zoom-parent"
    v-bind="$attrs"
-    v-on="$listeners"
  >
    <slot />
  </pinch-zoom>
--- a/src/components/poll/poll.js
+++ b/src/components/poll/poll.js
@ -50,6 +50,13 @@ export default {
    totalVotesCount () {
      return this.poll.votes_count
    },
+    totalFractionBase () {
+      // Due to a backend bug, we might not have any voter count info for remote polls
+      // in this case, fall back to count of votes even for multiple cjoice polls
+      // to be able to at least display _something_
+      const total_base = this.poll.multiple ? this.poll.voters_count : this.poll.votes_count
+      return total_base > 0 ? total_base : this.poll.votes_count
+    },
    containerClass () {
      return {
        loading: this.loading
@ -70,10 +77,11 @@ export default {
  },
  methods: {
    percentageForOption (count) {
-      return this.totalVotesCount === 0 ? 0 : Math.round(count / this.totalVotesCount * 100)
+      const total = this.totalFractionBase
+      return total === 0 ? 0 : Math.round(count / total * 100)
    },
    resultTitle (option) {
-      return `${option.votes_count}/${this.totalVotesCount} ${this.$t('polls.votes')}`
+      return `${option.votes_count}/${this.totalFractionBase} ${this.$t('polls.votes')}`
    },
    fetchPoll () {
      this.$store.dispatch('refreshPoll', { id: this.statusId, pollId: this.poll.id })
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@ -9,11 +9,13 @@ 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 scopeUtils from 'src/lib/scope_utils.js'
 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 {
@ -62,6 +64,13 @@ 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',
@ -129,6 +138,13 @@ const PostStatusForm = {
      this.$refs.textarea.focus()
    }
  },
+  setup() {
+    const {postLanguageOptions} = usePostLanguageOptions()
+
+    return {
+      postLanguageOptions,
+    }
+  },
  data () {
    const preset = this.$route.query.message
    let statusText = preset || ''
@ -138,7 +154,8 @@ const PostStatusForm = {
      statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
    }

-    const { postContentType: contentType, sensitiveByDefault, sensitiveIfSubject, interfaceLanguage } = this.$store.getters.mergedConfig
+    const { postContentType: contentType, postLanguage: defaultPostLanguage, sensitiveByDefault, sensitiveIfSubject, interfaceLanguage, alwaysShowSubjectInput } = this.$store.getters.mergedConfig
+    const postLanguage = defaultPostLanguage || interfaceToISOLanguage(interfaceLanguage)

    let statusParams = {
      spoilerText: this.subject || '',
@ -149,7 +166,7 @@ const PostStatusForm = {
      poll: {},
      mediaDescriptions: {},
      visibility: this.suggestedVisibility(),
-      language: interfaceLanguage,
+      language: postLanguage,
      contentType
    }

@ -164,7 +181,7 @@ const PostStatusForm = {
        poll: this.statusPoll || {},
        mediaDescriptions: this.statusMediaDescriptions || {},
        visibility: this.statusScope || this.suggestedVisibility(),
-        language: this.statusLanguage || interfaceLanguage,
+        language: this.statusLanguage || postLanguage,
        contentType: statusContentType
      }
    }
@ -199,6 +216,10 @@ 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,
@ -213,7 +234,10 @@ const PostStatusForm = {
      preview: null,
      previewLoading: false,
      emojiInputShown: false,
-      idempotencyKey: ''
+      idempotencyKey: '',
+      activeEmojiInput: undefined,
+      activeTextInput: undefined,
+      subjectVisible: showSubject
    }
  },
  computed: {
@ -302,13 +326,11 @@ const PostStatusForm = {
    ...mapState({
      mobileLayout: state => state.interface.mobileLayout
    }),
-    isoLanguages () {
-      return iso6391.getAllCodes();
-    }
  },
  watch: {
    'newStatus': {
      deep: true,
+      flush: 'sync',
      handler () {
        this.statusChanged()
      }
@ -674,8 +696,33 @@ const PostStatusForm = {
      this.$refs['emoji-input'].resize()
    },
    showEmojiPicker () {
-      this.$refs['textarea'].focus()
-      this.$refs['emoji-input'].triggerShowPicker()
+      if (!this.activeEmojiInput || !this.activeTextInput)
+        this.focusStatusInput()
+
+      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
@ -716,15 +763,9 @@ const PostStatusForm = {
      this.$store.dispatch('openSettingsModalTab', 'profile')
    },
    suggestedVisibility () {
-      if (this.copyMessageScope) {
-        if (this.copyMessageScope === 'direct') {
-          return this.copyMessageScope
-        }
-        if (this.copyMessageScope !== 'public' && this.$store.state.users.currentUser.default_scope !== 'private') {
-          return this.copyMessageScope
-        }
-      }
-      return this.$store.state.users.currentUser.default_scope
+      const maxScope = this.copyMessageScope
+      const defaultScope = this.$store.state.users.currentUser.default_scope
+      return scopeUtils.negotiate(defaultScope, maxScope)
    }
  }
 }
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@ -118,13 +118,16 @@
          />
        </div>
        <EmojiInput
-          v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)"
+          v-if="subjectVisible"
+          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')"
@ -132,6 +135,7 @@
            size="1"
            class="form-post-subject"
            @input="onSubjectInput"
+            @focus="focusSubjectInput()"
          >
        </EmojiInput>
        <i18n-t
@ -166,13 +170,14 @@
            cols="1"
            :disabled="posting && !optimisticPosting"
            class="form-post-body"
-            :class="{ 'scrollable-form': !!maxHeight }"
+            :class="{ 'scrollable-form': !!maxHeight, '-has-subject': subjectVisible }"
            @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"
@ -185,6 +190,7 @@
        <div
          v-if="!disableScopeSelector"
          class="visibility-tray"
+          :class="{ 'visibility-tray-edit': isEdit }"
        >
          <scope-selector
            v-if="!disableVisibilitySelector"
@ -195,47 +201,50 @@
          />

          <div
-            class="language-selector"
-            >
-            <Select
-              id="post-language"
-              v-model="newStatus.language"
-              class="form-control"
-            >
-              <option
-                v-for="language in isoLanguages"
-                :key="language"
-                :value="language"
+            class="format-selector-container">
+            <div
+              class="format-selector"
              >
-                {{ 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"
+              <Select
+                id="post-language"
+                v-model="newStatus.language"
+                class="form-control"
              >
-                {{ $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>
+                <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
+                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 format-selector"
+            >
+              <span class="only-format">
+                {{ $t(`post_status.content_type["${postFormats[0]}"]`) }}
+              </span>
+            </div>
          </div>
        </div>
      </div>
@ -276,6 +285,15 @@
          >
            <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"
@ -446,6 +464,10 @@
    align-items: baseline;
  }

+  .visibility-tray-edit {
+    justify-content: right;
+  }
+
  .visibility-notice.edit-warning {
    > :first-child {
      margin-top: 0;
@ -456,7 +478,13 @@
    }
  }

-  .media-upload-icon, .poll-icon, .emoji-icon {
+  .format-selector-container {
+    .format-selector {
+      display: inline-block;
+    }
+  }
+
+  .media-upload-icon, .poll-icon, .emoji-icon, .spoiler-icon {
    font-size: 1.85em;
    line-height: 1.1;
    flex: 1;
@ -499,6 +527,11 @@

  .poll-icon {
    order: 3;
+    justify-content: center;
+  }
+
+  .spoiler-icon {
+    order: 4;
    justify-content: right;
  }

@ -551,6 +584,11 @@
    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
@ -563,6 +601,11 @@
    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;
    }
--- a/src/components/post_status_modal/post_status_modal.vue
+++ b/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"
-    @backdropClicked="closeModal"
+    @backdrop-clicked="closeModal"
  >
    <div class="post-form-modal-panel panel">
      <div class="panel-heading">
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@ -8,13 +8,13 @@
    remove-padding
    @show="focusInput"
  >
-    <template v-slot:content="{close}">
+    <template #content="{close}">
      <EmojiPicker
        :enable-sticker-picker="false"
        @emoji="addReaction($event, close)"
      />
    </template>
-    <template v-slot:trigger>
+    <template #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';
--- a/src/components/remote_follow/remote_follow.js
+++ b/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`
    }
--- a/src/components/retweet_button/retweet_button.js
+++ b/src/components/retweet_button/retweet_button.js
@ -1,4 +1,6 @@
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
+import ScopeSelector from '../scope_selector/scope_selector.vue'
+import scopeUtils from 'src/lib/scope_utils.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faRetweet } from '@fortawesome/free-solid-svg-icons'

@ -7,12 +9,14 @@ library.add(faRetweet)
 const RetweetButton = {
  props: ['status', 'loggedIn', 'visibility'],
  components: {
-    ConfirmModal
+    ConfirmModal,
+    ScopeSelector
  },
  data () {
    return {
      animated: false,
-      showingConfirmDialog: false
+      showingConfirmDialog: false,
+      retweetVisibility: this.$store.state.users.currentUser.default_scope
    }
  },
  methods: {
@ -25,7 +29,7 @@ const RetweetButton = {
    },
    doRetweet () {
      if (!this.status.repeated) {
-        this.$store.dispatch('retweet', { id: this.status.id })
+        this.$store.dispatch('retweet', { id: this.status.id, visibility: this.retweetVisibility })
      } else {
        this.$store.dispatch('unretweet', { id: this.status.id })
      }
@ -40,6 +44,9 @@ const RetweetButton = {
    },
    hideConfirmDialog () {
      this.showingConfirmDialog = false
+    },
+    changeVis (visibility) {
+      this.retweetVisibility = visibility
    }
  },
  computed: {
@ -54,6 +61,15 @@ const RetweetButton = {
    },
    remoteInteractionLink () {
      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
+    },
+    userDefaultScope () {
+      return this.$store.state.users.currentUser.default_scope
+    },
+    statusScope () {
+      return this.status.visibility
+    },
+    initialScope () {
+      return scopeUtils.negotiate(this.userDefaultScope, this.status.visibility)
    }
  }
 }
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@ -49,12 +49,18 @@
        @cancelled="hideConfirmDialog"
      >
        {{ $t('status.repeat_confirm') }}
+        <scope-selector
+          :user-default="userDefaultScope"
+          :original-scope="statusScope"
+          :initial-scope="initialScope"
+          :on-scope-change="changeVis"
+        />
      </confirm-modal>
    </teleport>
  </div>
 </template>

-<script src="./retweet_button.js" ></script>
+<script src="./retweet_button.js"></script>

 <style lang="scss">
@import '../../_variables.scss';
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@ -121,6 +121,19 @@ 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
@ -191,6 +204,15 @@ 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) {
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@ -6,6 +6,8 @@ import {
  faGlobe
 } from '@fortawesome/free-solid-svg-icons'

+import scopeUtils from 'src/lib/scope_utils.js'
+
 library.add(
  faEnvelope,
  faGlobe,
@ -13,18 +15,11 @@ library.add(
  faLockOpen
 )

-const SCOPE_LEVELS = {
-  'direct': 0,
-  'private': 1,
-  'local': 2,
-  'unlisted': 2,
-  'public': 3
-}
-
 const ScopeSelector = {
  props: [
    'showAll',
    'userDefault',
+    // scope of parent object
    'originalScope',
    'initialScope',
    'onScopeChange'
@ -39,16 +34,16 @@ const ScopeSelector = {
      return !this.showPublic && !this.showUnlisted && !this.showPrivate && !this.showDirect
    },
    showPublic () {
-      return this.originalScope !== 'direct' && this.shouldShow('public')
+      return this.shouldShow('public')
    },
    showLocal () {
-      return this.originalScope !== 'direct' && this.shouldShow('local')
+      return this.shouldShow('local')
    },
    showUnlisted () {
-      return this.originalScope !== 'direct' && this.shouldShow('unlisted')
+      return this.shouldShow('unlisted')
    },
    showPrivate () {
-      return this.originalScope !== 'direct' && this.shouldShow('private')
+      return this.shouldShow('private')
    },
    showDirect () {
      return this.shouldShow('direct')
@ -65,15 +60,10 @@ const ScopeSelector = {
  },
  methods: {
    shouldShow (scope) {
-      if (!this.originalScope) {
+      if (!this.originalScope)
        return true
-      }
-
-      if (this.originalScope === 'local') {
-        return scope === 'direct' || scope === 'local'
-      }
-
-      return SCOPE_LEVELS[scope] <= SCOPE_LEVELS[this.originalScope]
+      else
+        return scopeUtils.compare(scope, this.originalScope) <= 0
    },
    changeVis (scope) {
      this.currentScope = scope
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@ -24,7 +24,7 @@
      :items="items"
      :get-key="getKey"
    >
-      <template v-slot:item="{item}">
+      <template #item="{item}">
        <div
          class="selectable-list-item-inner"
          :class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
@ -41,7 +41,7 @@
          />
        </div>
      </template>
-      <template v-slot:empty>
+      <template #empty>
        <slot name="empty" />
      </template>
    </List>
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@ -6,7 +6,7 @@
    <Checkbox
      :model-value="state"
      :disabled="disabled"
-      @update:modelValue="update"
+      @update:model-value="update"
    >
      <span
        v-if="!!$slots.default"
--- a/src/components/settings_modal/helpers/choice_setting.vue
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@ -8,7 +8,7 @@
    <Select
      :model-value="state"
      :disabled="disabled"
-      @update:modelValue="update"
+      @update:model-value="update"
    >
      <option
        v-for="option in options"
--- a/src/components/settings_modal/helpers/modified_indicator.vue
+++ b/src/components/settings_modal/helpers/modified_indicator.vue
@ -6,14 +6,14 @@
    <Popover
      trigger="hover"
    >
-      <template v-slot:trigger>
+      <template #trigger>
        &nbsp;
        <FAIcon
          icon="wrench"
          :aria-label="$t('settings.setting_changed')"
        />
      </template>
-      <template v-slot:content>
+      <template #content>
        <div class="modified-tooltip">
          {{ $t('settings.setting_changed') }}
        </div>
--- a/src/components/settings_modal/helpers/server_side_indicator.vue
+++ b/src/components/settings_modal/helpers/server_side_indicator.vue
@ -6,14 +6,14 @@
    <Popover
      trigger="hover"
    >
-      <template v-slot:trigger>
+      <template #trigger>
        &nbsp;
        <FAIcon
          icon="server"
          :aria-label="$t('settings.setting_server_side')"
        />
      </template>
-      <template v-slot:content>
+      <template #content>
        <div class="serverside-tooltip">
          {{ $t('settings.setting_server_side') }}
        </div>
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@ -69,7 +69,7 @@ const SettingsModal = {
      this.$store.dispatch('closeSettingsModal')
    },
    logout () {
-      this.$router.replace('/main/public')
+      this.$router.replace(this.$store.state.instance.redirectRootNoLogin || '/main/all')
      this.$store.dispatch('closeSettingsModal')
      this.$store.dispatch('logout')
    },
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@ -108,7 +108,7 @@
        <Checkbox
          :model-value="!!expertLevel"
          class="expertMode"
-          @update:modelValue="expertLevel = Number($event)"
+          @update:model-value="expertLevel = Number($event)"
        >
          {{ $t("settings.expert_mode") }}
        </Checkbox>
--- a/src/components/settings_modal/tabs/data_import_export_tab.js
+++ b/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
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@ -4,6 +4,7 @@ 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'
@ -17,6 +18,11 @@ library.add(
 )

 const GeneralTab = {
+  setup() {
+    const {postLanguageOptions} = usePostLanguageOptions()
+
+    return {postLanguageOptions}
+  },
  data () {
    return {
      subjectLineOptions: ['email', 'noop', 'masto'].map(mode => ({
@ -118,6 +124,12 @@ 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: {
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@ -44,7 +44,6 @@
          <template
            v-if="profilesExpanded"
          >
-
            <div
              v-for="profile in settingsProfiles"
              :key="profile.id"
@ -73,15 +72,24 @@
                </button>
              </template>
            </div>
-            <button class="btn button-default" @click="refreshProfiles()">
+            <button
+              class="btn button-default"
+              @click="refreshProfiles()"
+            >
              {{ $t('settings.settings_profiles_refresh') }}
-              <FAIcon icon="sync" @click="refreshProfiles()" />
+              <FAIcon
+                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 v-model="newProfileName" id="settings-profile-new-name">
+            <input
+              id="settings-profile-new-name"
+              v-model="newProfileName"
+            >
            <button
              class="btn button-default"
              @click="createSettingsProfile"
@ -146,6 +154,21 @@
            {{ $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') }}
@ -256,6 +279,11 @@
            {{ $t('settings.right_sidebar') }}
          </BooleanSetting>
        </li>
+        <li>
+          <BooleanSetting path="widenTimeline">
+            {{ $t('settings.widen_timeline') }}
+          </BooleanSetting>
+        </li>
        <li>
          <ChoiceSetting
            v-if="user"
@ -483,14 +511,6 @@
            </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') }}
@ -588,6 +608,15 @@
            {{ $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"
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
+++ b/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
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
@ -10,7 +10,7 @@
          :query="queryUserIds"
          :placeholder="$t('settings.search_user_to_block')"
        >
-          <template v-slot="row">
+          <template #default="row">
            <BlockCard
              :user-id="row.item"
            />
@ -21,7 +21,7 @@
        :refresh="true"
        :get-key="i => i"
      >
-        <template v-slot:header="{selected}">
+        <template #header="{selected}">
          <div class="bulk-actions">
            <ProgressButton
              v-if="selected.length > 0"
@ -29,7 +29,7 @@
              :click="() => blockUsers(selected)"
            >
              {{ $t('user_card.block') }}
-              <template v-slot:progress>
+              <template #progress>
                {{ $t('user_card.block_progress') }}
              </template>
            </ProgressButton>
@ -39,16 +39,16 @@
              :click="() => unblockUsers(selected)"
            >
              {{ $t('user_card.unblock') }}
-              <template v-slot:progress>
+              <template #progress>
                {{ $t('user_card.unblock_progress') }}
              </template>
            </ProgressButton>
          </div>
        </template>
-        <template v-slot:item="{item}">
+        <template #item="{item}">
          <BlockCard :user-id="item" />
        </template>
-        <template v-slot:empty>
+        <template #empty>
          {{ $t('settings.no_blocks') }}
        </template>
      </BlockList>
@ -63,7 +63,7 @@
              :query="queryUserIds"
              :placeholder="$t('settings.search_user_to_mute')"
            >
-              <template v-slot="row">
+              <template #default="row">
                <MuteCard
                  :user-id="row.item"
                />
@ -74,7 +74,7 @@
            :refresh="true"
            :get-key="i => i"
          >
-            <template v-slot:header="{selected}">
+            <template #header="{selected}">
              <div class="bulk-actions">
                <ProgressButton
                  v-if="selected.length > 0"
@ -82,7 +82,7 @@
                  :click="() => muteUsers(selected)"
                >
                  {{ $t('user_card.mute') }}
-                  <template v-slot:progress>
+                  <template #progress>
                    {{ $t('user_card.mute_progress') }}
                  </template>
                </ProgressButton>
@ -92,16 +92,16 @@
                  :click="() => unmuteUsers(selected)"
                >
                  {{ $t('user_card.unmute') }}
-                  <template v-slot:progress>
+                  <template #progress>
                    {{ $t('user_card.unmute_progress') }}
                  </template>
                </ProgressButton>
              </div>
            </template>
-            <template v-slot:item="{item}">
+            <template #item="{item}">
              <MuteCard :user-id="item" />
            </template>
-            <template v-slot:empty>
+            <template #empty>
              {{ $t('settings.no_mutes') }}
            </template>
          </MuteList>
@ -114,7 +114,7 @@
              :query="queryKnownDomains"
              :placeholder="$t('settings.type_domains_to_mute')"
            >
-              <template v-slot="row">
+              <template #default="row">
                <DomainMuteCard
                  :domain="row.item"
                />
@ -125,7 +125,7 @@
            :refresh="true"
            :get-key="i => i"
          >
-            <template v-slot:header="{selected}">
+            <template #header="{selected}">
              <div class="bulk-actions">
                <ProgressButton
                  v-if="selected.length > 0"
@ -133,16 +133,16 @@
                  :click="() => unmuteDomains(selected)"
                >
                  {{ $t('domain_mute_card.unmute') }}
-                  <template v-slot:progress>
+                  <template #progress>
                    {{ $t('domain_mute_card.unmute_progress') }}
                  </template>
                </ProgressButton>
              </div>
            </template>
-            <template v-slot:item="{item}">
+            <template #item="{item}">
              <DomainMuteCard :domain="item" />
            </template>
-            <template v-slot:empty>
+            <template #empty>
              {{ $t('settings.no_mutes') }}
            </template>
          </DomainMuteList>
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@ -33,6 +33,7 @@ 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,
@ -129,14 +130,15 @@ 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) {
@ -185,7 +187,7 @@ const ProfileTab = {
        })
        return
      }
-      // eslint-disable-next-line no-undef
+       
      const reader = new FileReader()
      reader.onload = ({ target }) => {
        const img = target.result
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@ -110,11 +110,9 @@
          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')"
@ -259,6 +257,19 @@
          <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">
--- a/src/components/settings_modal/tabs/version_tab.js
+++ b/src/components/settings_modal/tabs/version_tab.js
@ -1,22 +1,25 @@
 import { extractCommit } from 'src/services/version/version.service'

-const pleromaFeCommitUrl = 'https://akkoma.dev/AkkomaGang/pleroma-fe/commit/'
-const pleromaBeCommitUrl = 'https://akkoma.dev/AkkomaGang/akkoma/commit/'
+function joinURL(base, subpath) {
+  return URL.parse(subpath, base)?.href || "invalid base URL"
+}

 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 pleromaFeCommitUrl + this.frontendVersion
+      return joinURL(this.frontendCommitUrl, this.frontendVersion)
    },
    backendVersionLink () {
-      return pleromaBeCommitUrl + extractCommit(this.backendVersion)
+      return joinURL(this.backendCommitUrl, extractCommit(this.backendVersion))
    }
  }
 }
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@ -215,7 +215,7 @@
  </div>
 </template>

-<script src="./shadow_control.js" ></script>
+<script src="./shadow_control.js"></script>

 <style lang="scss">
@import '../../_variables.scss';
--- a/src/components/side_drawer/side_drawer.vue
+++ b/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';
--- a/src/components/staff_panel/staff_panel.vue
+++ b/src/components/staff_panel/staff_panel.vue
@ -24,7 +24,7 @@
  </div>
 </template>

-<script src="./staff_panel.js" ></script>
+<script src="./staff_panel.js"></script>

 <style lang="scss">

--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@ -266,6 +266,16 @@
      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 {
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@ -83,7 +83,7 @@
          :user="statusoid.user"
        />
        <div class="right-side faint">
-          <span
+          <div
            class="status-username repeater-name"
            :title="retweeter"
          >
@ -100,14 +100,19 @@
              v-else
              :to="retweeterProfileLink"
            >{{ retweeter }}</router-link>
-          </span>
+          </div>
          {{ ' ' }}
-          <FAIcon
-            icon="retweet"
-            class="repeat-icon"
-            :title="$t('tool_tip.repeat')"
-          />
-          {{ $t('timeline.repeated') }}
+
+          <div
+            class="repeat-tooltip"
+          >
+             <FAIcon
+               icon="retweet"
+               class="repeat-icon"
+               :title="$t('tool_tip.repeat')"
+             />
+             {{ $t('timeline.repeated') }}
+          </div>
        </div>
      </div>

@ -190,7 +195,7 @@
                >
                  <Timeago
                    :time="status.created_at"
-                    :with-direction="true"
+                    :with-direction="!compact"
                    :auto-update="60"
                  />
                </router-link>
@ -368,7 +373,7 @@
              :controlled-toggle-showing-long-subject="controlledToggleShowingLongSubject"
              @mediaplay="addMediaPlaying($event)"
              @mediapause="removeMediaPlaying($event)"
-              @parseReady="setHeadTailLinks"
+              @parse-ready="setHeadTailLinks"
            />
          </div>

@ -476,8 +481,8 @@
            />
            <extra-buttons
              :status="status"
-              @onError="showError"
-              @onSuccess="clearError"
+              @on-error="showError"
+              @on-success="clearError"
            />
          </div>
        </div>
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@ -41,7 +41,8 @@ const StatusContent = {
      postLength: this.status.text.length,
      parseReadyDone: false,
      renderMisskeyMarkdown,
-      translateFrom: null
+      translateFrom: null,
+      translating: false
    }
  },
  computed: {
@ -135,7 +136,10 @@ const StatusContent = {
    },
    translateStatus () {
      const translateTo = this.$store.getters.mergedConfig.translationLanguage || this.$store.state.instance.interfaceLanguage
-      this.$store.dispatch('translateStatus', { id: this.status.id, language: translateTo, from: this.translateFrom })
+      this.translating = true
+      this.$store.dispatch(
+        'translateStatus', { id: this.status.id, language: translateTo, from: this.translateFrom }
+      ).finally(() => { this.translating = false })
    }
  }
 }
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@ -3,6 +3,7 @@
 .StatusBody {
  display: flex;
  flex-direction: column;
+  overflow: hidden;

  .translation {
    border: 1px solid var(--accent, $fallback--link);
@ -23,24 +24,6 @@
    transition: 0.05s;
  }

-  ._mfm_x2_ {
-    .emoji {
-      height: 100px;
-    }
-  }
-
-  ._mfm_x3_ {
-    .emoji {
-      height: 150px;
-    }
-  }
-
-  ._mfm_x4_ {
-    .emoji {
-      height: 200px;
-    }
-  }
-
  .attachments {
    margin-top: 0.5em;
  }
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@ -1,7 +1,7 @@
 <template>
  <div
    class="StatusBody"
-    :class="{ '-compact': compact, 'mfm-disabled': !renderMisskeyMarkdown }"
+    :class="{ '-compact': compact }"
  >
    <div class="body">
      <div
@ -54,7 +54,7 @@
            :mfm="renderMisskeyMarkdown && (status.media_type === 'text/x.misskeymarkdown')"
            :greentext="mergedConfig.greentext"
            :attentions="status.attentions"
-            @parseReady="onParseReady"
+            @parse-ready="onParseReady"
          />
          <div
            v-if="status.translation"
@ -70,7 +70,7 @@
              :mfm="renderMisskeyMarkdown && (status.media_type === 'text/x.misskeymarkdown')"
              :greentext="mergedConfig.greentext"
              :attentions="status.attentions"
-              @parseReady="onParseReady"
+              @parse-ready="onParseReady"
            />
            <div>
              <label class="label">{{ $t('status.override_translation_source_language') }}</label>
@ -89,7 +89,11 @@
                </option>
              </Select>
              {{ ' ' }}
-              <button @click="translateStatus" class="btn button-default">
+              <button
+                class="btn button-default"
+                :disabled="translating"
+                @click="translateStatus"
+              >
                {{ $t('status.translate') }}
              </button>
            </div>
@ -138,5 +142,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" />
--- a/src/components/status_content/mfm.scss
+++ b/src/components/status_content/mfm.scss
@ -0,0 +1,423 @@
+/**
+ * "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;
+    }
+  }
+}
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@ -14,7 +14,7 @@
      :toggle-showing-tall="toggleShowingTall"
      :toggle-expanding-subject="toggleExpandingSubject"
      :toggle-showing-long-subject="toggleShowingLongSubject"
-      @parseReady="$emit('parseReady', $event)"
+      @parse-ready="$emit('parseReady', $event)"
    >
      <div v-if="status.poll && status.poll.options && !compact">
        <Poll
@ -63,7 +63,8 @@
  </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;
@ -75,23 +76,6 @@
      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,
--- a/Show more
+++ b/Show more