Re-add text shadows on user cards for better visibility

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

.dockerignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+test/unit/coverage
+test/e2e/reports
+selenium-debug.log
+.idea/
+config/local.json
+config/local.*.json
+docs/site/
+.vscode/
+akkoma-fe.zip

.eslintignore

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

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

.gitignore

@@ -9,4 +9,5 @@ selenium-debug.log
 config/local.json
 config/local.*.json
 docs/site/
-.vscode/
+.vscode/
+akkoma-fe.zip

.node-version

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

.tool-versions

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

.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/ 

Dockerfile

@@ -0,0 +1,24 @@
+FROM node:22.6.0-alpine3.20 as build
+
+RUN apk add --no-cache \
+  git \
+  chromium-chromedriver
+
+# use chromedriver from apk
+ENV CHROMEDRIVER_FILEPATH=/usr/bin/chromedriver
+
+WORKDIR /app/
+
+ARG NODE_ENV=production
+ENV YARN_CACHE_FOLDER=/.yarn/
+
+COPY . /app/
+
+RUN  \
+  --mount=type=cache,target=/.yarn \
+  NODE_ENV=development yarn install \
+  && NODE_ENV=${NODE_ENV} yarn run build
+
+FROM scratch as result
+
+COPY --from=build /app/dist/ /

Makefile

@@ -0,0 +1,26 @@
+RUNTIME ?= docker
+BUILD_DIR ?= ./dist/
+OUTFILE_ZIP ?= ./akkoma-fe.zip
+NODE_ENV ?= production
+
+.PHONY: all
+all: build-fe package
+
+.PHONY: build-fe
+build-fe:
+ifeq ("$(wildcard $(BUILD_DIR))","")
+	mkdir $(BUILD_DIR)
+else
+	rm -rf $(BUILD_DIR)
+	mkdir $(BUILD_DIR)
+endif
+	$(RUNTIME) build --build-arg NODE_ENV=$(NODE_ENV) --output type=local,dest=./dist/ .
+
+.PHONY: package
+package:
+ifneq ("$(wildcard $(OUTFILE_ZIP))","")
+	rm $(OUTFILE_ZIP)
+endif
+	zip -r -9 $(OUTFILE_ZIP) $(BUILD_DIR)
+
+# vim:set noexpandtab:

README.md

@@ -1,28 +1,76 @@
-# Akkoma-FE 
+# BNAkkoma: Brand New Akkoma
 
-![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)
+<small>It's not that new. This is just a cheap pun on the title of a [furry anime](https://en.wikipedia.org/wiki/BNA:_Brand_New_Animal).</small>
+
+Also keep in mind that B in BNAkkoma stands for 'bleeding-edge', **features can be added, changed or removed at any time!**
+
+If you are experiencing any strange quirks, make sure both your frontend and backend are up to date.
+
+If your software are up to date but the bug is still there, ping me on the fediverse at '@itepechi@fedi.itepechi.me'.
+
+## What is this?
+
+This is a fork of [AkkomaGang/akkoma-fe](https://akkoma.dev/AkkomaGang/akkoma-fe/), with a custom theme and Makefile.
+
+The differences from the upstream repository are described below:
+
+- Added a Makefile where you can build the client inside a Docker container
+- Refactored some components and styles
+- Fixed a lot of broken CSS rules and misaligned elements
+- Added and changed the default theme to a custom one
+- Added support for setting the default post language
+- Stole some commits from the original Pleroma frontend
+- Added OpenSearch protocol support
+- Added the Media tab to the search page (requires appropriate backend)
+- Added 'Limit to Following' filter to the search page (requires appropriate backend)
+- Added 'Limit to Local' filter to the search page (requires appropriate backend)
+- Implemented lazy loading of search results
+- More than 200 (!) Japanese translations have been fixed
+- Removed some themes to save network bandwidth
+- Improved PWA support, sort of
+
+Although this frontend application is designed to work with the BNAkkoma backend, it remains compatible with the original version of Akkoma by only enabling additional features when the backend server returns a corresponding flag.
+
+### How to build
+
+**Requires 2GB+ memory.**
+
+```sh
+# Docker
+make
+
+# Podman
+make RUNTIME=podman
+```
+
+---
+
+## Akkoma-FE
+
+![English OK](https://img.shields.io/badge/English-OK-blueviolet?style=for-the-badge) ![日本語OK](https://img.shields.io/badge/%E6%97%A5%E6%9C%AC%E8%AA%9E-OK-blueviolet?style=for-the-badge)
 
 This is a fork of Akkoma-FE from the Pleroma project, with support for new Akkoma features such as:
+
 - MFM support via [marked-mfm](https://akkoma.dev/sfr/marked-mfm)
 - Custom emoji reactions
 
-# For Translators
+## 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.
 
 Akkoma-FE will set your language by your browser locale, but you can temporarily force it in the code by changing the locale in main.js.
 
-# FOR ADMINS
+## FOR ADMINS
 
 To use Akkoma-FE in Akkoma, use the [frontend](https://docs.akkoma.dev/stable/administration/CLI_tasks/frontend/) CLI task to install Akkoma-FE, then modify your configuration as described in the [Frontend Management](https://docs.akkoma.dev/stable/configuration/frontend_management/) doc.
 
-## Build Setup
+### Build Setup
 
-``` bash
+```bash
 # install dependencies
-npm install -g yarn
+corepack enable
 yarn
 
 # serve with hot reload at localhost:8080
@@ -35,21 +83,21 @@ npm run build
 npm run unit
 ```
 
-# For Contributors:
+## 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.
+- `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.
 
 FE Build process also leaves current commit hash in global variable `___pleromafe_commit_hash` so that you can easily see which pleroma-fe commit instance is running, also helps pinpointing which commit was used when FE was bundled into BE.
 
-# Configuration
+## Configuration
 
 Edit config.json for configuration.
 
-## Options
+### Options
 
-### Login methods
+#### Login methods
 
-```loginMethod``` can be set to either ```password``` (the default) or ```token```, which will use the full oauth redirection flow, which is useful for SSO situations. 
+`loginMethod` can be set to either `password` (the default) or `token`, which will use the full oauth redirection flow, which is useful for SSO situations.

build/build.js

@@ -1,36 +1,36 @@
 // https://github.com/shelljs/shelljs
-require('./check-versions')()
-require('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",
+  );
+});

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

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

config/local.example.json

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

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

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

index.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="/static/theme-holder.css" id="theme-holder">
     <!--server-generated-meta-->
     <link rel="icon" type="image/png" href="/favicon.png">
+    <link rel="apple-touch-icon" href="/static/apple-touch-icon.png">
     <link rel="manifest" href="/manifest.json">
   </head>
   <body class="hidden">

package.json

@@ -1,7 +1,7 @@
 {
   "name": "pleroma_fe",
-  "version": "3.10.0",
-  "description": "A frontend for Akkoma instances",
+  "version": "3.10.0+bnakkoma",
+  "description": "An extended frontend for Akkoma instances",
   "author": "Roger Braun <roger@rogerbraun.net>",
   "private": true,
   "scripts": {
@@ -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",

src/App.js

@@ -64,6 +64,11 @@ export default {
         '-' + 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 +76,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 {

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
 }
 
@@ -665,8 +665,12 @@ option {
 }
 
 .alert {
-  margin: 0 0.35em;
-  padding: 0 0.25em;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  margin: 0 0.5em;
+  padding: 0.35em;
   border-radius: $fallback--tooltipRadius;
   border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
 
@@ -767,6 +771,8 @@ option {
 
 .btn.button-default {
   min-height: 2em;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
 }
 
 .new-status-notification {
@@ -780,6 +786,11 @@ option {
   .mobile-hidden {
     display: none;
   }
+
+  .btn.button-default {
+    padding-left: 0.7em;
+    padding-right: 0.7em;
+  }
 }
 
 @keyframes spin {

src/boot/after_store.js

@@ -77,7 +77,9 @@ const getInstanceConfig = async ({ store }) => {
       store.dispatch('setInstanceOption', { name: 'accountApprovalRequired', value: data.approval_required })
       // don't override cookie if set
       if (!Cookies.get('userLanguage')) {
-        store.dispatch('setOption', { name: 'interfaceLanguage', value: resolveLanguage(data.languages) })
+        const language = resolveLanguage(data.languages)
+        store.dispatch('setOption', { name: 'interfaceLanguage', value: language })
+        store.dispatch('setOption', { name: 'postLanguage', value: language })
       }
 
       if (vapidPublicKey) {
@@ -183,6 +185,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'])
 }
 
@@ -279,6 +287,10 @@ const getNodeInfo = async ({ store }) => {
       store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })
       store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled })
       store.dispatch('setInstanceOption', { name: 'translationEnabled', value: features.includes('akkoma:machine_translation') })
+      store.dispatch('setInstanceOption', { name: 'searchTypeMediaEnabled', value: features.includes('bnakkoma:search_type_media') })
+      store.dispatch('setInstanceOption', { name: 'searchOptionFollowingEnabled', value: features.includes('bnakkoma:search_option_following') })
+      store.dispatch('setInstanceOption', { name: 'searchOptionLocalEnabled', value: features.includes('bnakkoma:search_option_local') })
+      store.dispatch('setInstanceOption', { name: 'opensearchProtocolSupported', value: features.includes('bnakkoma:opensearch_protocol') })
 
       const uploadLimits = metadata.uploadLimits
       store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadLimits.general) })
@@ -402,6 +414,16 @@ const afterStoreSetup = async ({ store, i18n }) => {
   getTOS({ store })
   getStickers({ store })
 
+  // Create a link tag for OpenSearch and forget about it
+  if (store.state.instance.opensearchProtocolSupported) {
+    const node = document.createElement('link')
+    node.setAttribute('rel', 'search')
+    node.setAttribute('type', 'application/opensearchdescription+xml')
+    node.setAttribute('href', '/opensearch.xml')
+    node.setAttribute('title', store.state.instance.name)
+    document.head.appendChild(node)
+  }
+
   const router = createRouter({
     history: createWebHistory(),
     routes: routes(store),

src/components/about/about.vue

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

src/components/account_actions/account_actions.vue

@@ -6,7 +6,7 @@
       :bound-to="{ x: 'container' }"
       remove-padding
     >
-      <template 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"
             />

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 {

src/components/attachment/attachment.vue

@@ -155,6 +155,7 @@
       >
         <StillImage
           class="image"
+          :loading="'lazy'"
           :referrerpolicy="referrerpolicy"
           :mimetype="attachment.mimetype"
           :src="attachment.large_thumb_url || attachment.url"
@@ -246,8 +247,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>

src/components/avatar_list/avatar_list.vue

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

src/components/basic_user_card/basic_user_card.vue

@@ -61,12 +61,11 @@
   }
 
   &-user-name {
-    img {
-      object-fit: contain;
-      height: 16px;
-      width: 16px;
-      vertical-align: middle;
-    }
+    --emoji-size: 14px;
+  }
+
+  &-user-name-value {
+    font-weight: bold;
   }
 
   &-user-name-value,

src/components/checkbox/checkbox.vue

@@ -22,31 +22,36 @@
 
 <script>
 export default {
-  emits: ['update:modelValue'],
   props: [
     'modelValue',
     'indeterminate',
     'disabled'
-  ]
+  ],
+  emits: ['update:modelValue']
 }
 </script>
 
 <style lang="scss">
 @import '../../_variables.scss';
 
+$checkbox-size: 1.2em;
+$padding-size: 0.5em;
+
 .checkbox {
   position: relative;
   display: inline-block;
-  min-height: 1.2em;
+  min-height: $checkbox-size;
+  padding-left: calc($checkbox-size + $padding-size);
 
   &-indicator {
     position: relative;
-    padding-left: 1.2em;
+    padding-left: calc($checkbox-size + $padding-size);
+    margin-left: calc(($checkbox-size + $padding-size) * -1);
   }
 
   &-indicator::before {
     position: absolute;
-    right: 0;
+    left: 0;
     top: 0;
     display: block;
     content: '✓';
@@ -92,11 +97,6 @@ export default {
       color: $fallback--text;
       color: var(--inputText, $fallback--text);
     }
-
-  }
-
-  & > span {
-    margin-left: .5em;
   }
 }
 </style>

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 {

src/components/confirm_modal/confirm_modal.vue

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

src/components/conversation/conversation.js

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

src/components/conversation/conversation.vue

@@ -91,7 +91,7 @@
               :controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"
 
               @goto="setHighlight"
-              @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>

src/components/desktop_nav/desktop_nav.js

@@ -51,7 +51,6 @@ export default {
     ConfirmModal
   },
   data: () => ({
-    searchBarHidden: true,
     supportsMask: window.CSS && window.CSS.supports && (
       window.CSS.supports('mask-size', 'contain') ||
         window.CSS.supports('-webkit-mask-size', 'contain') ||
@@ -77,8 +76,7 @@ export default {
     },
     logoBgStyle () {
       return Object.assign({
-        'margin': `${this.$store.state.instance.logoMargin} 0`,
-        opacity: this.searchBarHidden ? 1 : 0
+        'margin': `${this.$store.state.instance.logoMargin} 0`
       }, this.enableMask ? {} : {
         'background-color': this.enableMask ? '' : 'transparent'
       })
@@ -120,9 +118,6 @@ export default {
     scrollToTop () {
       window.scrollTo(0, 0)
     },
-    onSearchBarToggled (hidden) {
-      this.searchBarHidden = hidden
-    },
     openSettingsModal () {
       this.$store.dispatch('openSettingsModal')
     },

src/components/desktop_nav/desktop_nav.scss

@@ -56,13 +56,6 @@
   .logo {
     grid-area: logo;
     position: relative;
-    transition: opacity;
-    transition-timing-function: ease-out;
-    transition-duration: 100ms;
-
-    @media all and (min-width: 800px) {
-      opacity: 1 !important;
-    }
 
     .mask {
       mask-repeat: no-repeat;

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
@@ -98,7 +98,6 @@
       <div class="item right actions">
         <search-bar
           v-if="currentUser || !privateMode"
-          @toggled="onSearchBarToggled"
           @click.stop
         />
         <div

src/components/domain_mute_card/domain_mute_card.vue

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

src/components/edit_status_modal/edit_status_modal.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>

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"

src/components/emoji_input/suggestor.js

@@ -122,14 +122,14 @@ export const suggestUsers = ({ dispatch, state }) => {
       const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1
 
       return diff + nameAlphabetically + screenNameAlphabetically
-      /* eslint-disable camelcase */
+       
     }).map(({ screen_name, screen_name_ui, name, profile_image_url_original }) => ({
       displayText: screen_name_ui,
       detailText: name,
       imageUrl: profile_image_url_original,
       replacement: '@' + screen_name + ' '
     }))
-    /* eslint-enable camelcase */
+     
 
     suggestions = newSuggestions || []
     return suggestions

src/components/emoji_reactions/emoji_reactions.vue

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

src/components/extra_buttons/extra_buttons.vue

@@ -7,7 +7,7 @@
     :bound-to="{ x: 'container' }"
     remove-padding
   >
-    <template 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';

src/components/favorite_button/favorite_button.vue

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

src/components/features_panel/features_panel.vue

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

src/components/follow_request_card/follow_request_card.vue

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

src/components/font_control/font_control.vue

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

src/components/gallery/gallery.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>

src/components/hashtag_link/hashtag_link.vue

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

src/components/instance_specific_panel/instance_specific_panel.vue

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

src/components/list/list.vue

@@ -42,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;

src/components/local_bubble_panel/local_bubble_panel.vue

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

src/components/login_form/login_form.vue

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

src/components/media_modal/media_modal.vue

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

src/components/media_upload/media_upload.js

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

src/components/media_upload/media_upload.vue

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

src/components/mention_link/mention_link.js

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

src/components/mention_link/mention_link.vue

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

src/components/mentions_line/mentions_line.vue

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

src/components/mfa_form/recovery_form.vue

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

src/components/mfa_form/totp_form.vue

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

src/components/mod_modal/mod_modal.vue

@@ -5,6 +5,7 @@
     class="mod-modal"
     :class="{ peek: modalPeeked }"
     :no-background="modalPeeked"
+    @backdropClicked="closeModal"
   >
     <div class="mod-modal-panel panel">
       <div class="panel-heading">

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"

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

src/components/modal/modal.vue

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

src/components/moderation_tools/moderation_tools.vue

@@ -8,7 +8,7 @@
       @show="setToggled(true)"
       @close="setToggled(false)"
     >
-      <template 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)"

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';
@@ -125,20 +125,6 @@
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);
     padding: 0;
-
-    &:first-child .menu-item {
-      border-top-right-radius: $fallback--panelRadius;
-      border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
-      border-top-left-radius: $fallback--panelRadius;
-      border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
-    }
-
-    &:last-child .menu-item {
-      border-bottom-right-radius: $fallback--panelRadius;
-      border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
-      border-bottom-left-radius: $fallback--panelRadius;
-      border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
-    }
   }
 
   li:last-child {

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

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>

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>

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

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"

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>

src/components/poll/poll_form.vue

@@ -18,7 +18,9 @@
           :placeholder="$t('polls.option')"
           :maxlength="maxLength"
           @change="updatePollToParent"
-          @keydown.enter.stop.prevent="nextOption(index)"
+          @keydown.enter.stop.prevent="
+            $event.isComposing || $event.keyCode === 229 || nextOption(index)
+          "
         >
       </div>
       <button

src/components/popover/popover.vue

@@ -3,14 +3,14 @@
     @mouseenter="onMouseenter"
     @mouseleave="onMouseleave"
   >
-    <button
+    <div
       ref="trigger"
       class="button-unstyled popover-trigger-button"
       type="button"
       @click="onClick"
     >
       <slot name="trigger" />
-    </button>
+    </div>
     <div
       v-if="!hidden"
       ref="content"

src/components/post_status_form/post_status_form.js

@@ -9,11 +9,12 @@ import StatusContent from '../status_content/status_content.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
 import { reject, map, uniqBy, debounce } from 'lodash'
+import { usePostLanguageOptions } from 'src/lib/post_language'
 import suggestor from '../emoji_input/suggestor.js'
 import { mapGetters, mapState } from 'vuex'
 import Checkbox from '../checkbox/checkbox.vue'
 import Select from '../select/select.vue'
-import iso6391 from 'iso-639-1'
+
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -62,6 +63,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 +137,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 +153,15 @@ 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,12 +172,13 @@ const PostStatusForm = {
       poll: {},
       mediaDescriptions: {},
       visibility: this.suggestedVisibility(),
-      language: interfaceLanguage,
+      language: postLanguage,
       contentType
     }
 
     if (this.statusId || this.isRedraft) {
       const statusContentType = this.statusContentType || contentType
+      const statusLanguage = this.statusLanguage || language
       statusParams = {
         spoilerText: this.subject || '',
         status: this.statusText || '',
@@ -164,7 +188,7 @@ const PostStatusForm = {
         poll: this.statusPoll || {},
         mediaDescriptions: this.statusMediaDescriptions || {},
         visibility: this.statusScope || this.suggestedVisibility(),
-        language: this.statusLanguage || interfaceLanguage,
+        language: this.statusLanguage || postLanguage,
         contentType: statusContentType
       }
     }
@@ -189,8 +213,8 @@ const PostStatusForm = {
           poll: draft.data.poll,
           mediaDescriptions: draft.data.mediaDescriptions,
           visibility: draft.data.visibility,
-          language: draft.data.language,
-          contentType: draft.data.contentType
+          contentType: draft.data.contentType,
+          language: draft.data.language
         }
 
         if (draft.data.poll) {
@@ -199,6 +223,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 +241,10 @@ const PostStatusForm = {
       preview: null,
       previewLoading: false,
       emojiInputShown: false,
-      idempotencyKey: ''
+      idempotencyKey: '',
+      activeEmojiInput: undefined,
+      activeTextInput: undefined,
+      subjectVisible: showSubject
     }
   },
   computed: {
@@ -302,13 +333,11 @@ const PostStatusForm = {
     ...mapState({
       mobileLayout: state => state.interface.mobileLayout
     }),
-    isoLanguages () {
-      return iso6391.getAllCodes();
-    }
   },
   watch: {
     'newStatus': {
       deep: true,
+      flush: 'sync',
       handler () {
         this.statusChanged()
       }
@@ -674,8 +703,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

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,18 @@
             cols="1"
             :disabled="posting && !optimisticPosting"
             class="form-post-body"
-            :class="{ 'scrollable-form': !!maxHeight }"
-            @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
+            :class="{ 'scrollable-form': !!maxHeight, '-has-subject': subjectVisible }"
+            @keydown.exact.enter="
+              $event.isComposing ||
+                $event.keyCode === 229 ||
+                (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 +194,7 @@
         <div
           v-if="!disableScopeSelector"
           class="visibility-tray"
+          :class="{ 'visibility-tray-edit': isEdit }"
         >
           <scope-selector
             v-if="!disableVisibilitySelector"
@@ -195,47 +205,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 +289,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 +468,10 @@
     align-items: baseline;
   }
 
+  .visibility-tray-edit {
+    justify-content: right;
+  }
+
   .visibility-notice.edit-warning {
     > :first-child {
       margin-top: 0;
@@ -456,7 +482,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 +531,11 @@
 
   .poll-icon {
     order: 3;
+    justify-content: center;
+  }
+
+  .spoiler-icon {
+    order: 4;
     justify-content: right;
   }
 
@@ -551,6 +588,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 +605,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;
     }

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

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

src/components/remote_follow/remote_follow.js

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

src/components/retweet_button/retweet_button.vue

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

src/components/search/search.js

@@ -1,38 +1,54 @@
 import FollowCard from '../follow_card/follow_card.vue'
 import Conversation from '../conversation/conversation.vue'
-import Status from '../status/status.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+import SearchFilters from './search_filters.vue'
 import map from 'lodash/map'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faCircleNotch,
   faSearch
 } from '@fortawesome/free-solid-svg-icons'
+import { uniqBy } from 'lodash'
 
 library.add(
   faCircleNotch,
   faSearch
 )
 
+const allSearchTypes = Object.freeze(['statuses', 'media', 'accounts', 'hashtags'])
+
 const Search = {
   components: {
     FollowCard,
     Conversation,
-    Status,
-    TabSwitcher
+    TabSwitcher,
+    SearchFilters
   },
   props: [
     'query'
   ],
   data () {
     return {
-      loaded: false,
-      loading: false,
+      queryCount: 0,
+      loadedInitially: false,
+      loading: Object.fromEntries(
+        allSearchTypes.map((searchType) => [searchType, false])
+      ),
       searchTerm: this.query || '',
       userIds: [],
       statuses: [],
+      media: [],
       hashtags: [],
-      currenResultTab: 'statuses'
+      allTabs: allSearchTypes,
+      currentResultTab: 'statuses',
+      hasUserSelectedTab: false,
+
+      statusesOffset: 0,
+      lastStatusFetchCount: 0,
+      mediaOffset: 0,
+      lastMediaFetchCount: 0,
+      lastQuery: '',
+      filter: {}
     }
   },
   computed: {
@@ -45,6 +61,20 @@ const Search = {
       return this.statuses.filter(status =>
         allStatusesObject[status.id] && !allStatusesObject[status.id].deleted
       )
+    },
+    visibleMedia () {
+      const allStatusesObject = this.$store.state.statuses.allStatusesObject
+
+      return this.media.filter(status =>
+        allStatusesObject[status.id] && !allStatusesObject[status.id].deleted
+      )
+    },
+    canSearchMediaPosts () {
+      return this.$store.state.instance.searchTypeMediaEnabled === true
+    },
+    hasAtLeastOneResult () {
+      return allSearchTypes
+        .some((searchType) => this.getVisibleLength(searchType) > 0)
     }
   },
   mounted () {
@@ -54,55 +84,191 @@ const Search = {
     query (newValue) {
       this.searchTerm = newValue
       this.search(newValue)
+    },
+    filter: {
+      deep: true,
+      handler () {
+        this.lastQuery = "" // invalidate state
+        this.search(this.searchTerm)
+      }
     }
   },
   methods: {
     newQuery (query) {
-      this.$router.push({ name: 'search', query: { query } })
-      this.$refs.searchInput.focus()
+      if (this.lastQuery === query && !this.loading[this.currentResultTab]) {
+        // Handle search retries
+        this.lastQuery = "" // invalidate state
+        this.search(query)
+      } else {
+        this.$router.push({ name: 'search', query: { query } })
+        this.$refs.searchInput.focus()
+      }
     },
-    search (query) {
+    async search (query, searchType = null) {
       if (!query) {
-        this.loading = false
+        for (const searchType of allSearchTypes) {
+          this.loading[searchType] = false
+        }
         return
       }
 
-      this.loading = true
-      this.userIds = []
-      this.statuses = []
-      this.hashtags = []
-      this.$refs.searchInput.blur()
+      const localQueryCount = ++this.queryCount
 
-      this.$store.dispatch('search', { q: query, resolve: true })
-        .then(data => {
-          this.loading = false
-          this.userIds = map(data.accounts, 'id')
-          this.statuses = data.statuses
-          this.hashtags = data.hashtags
-          this.currenResultTab = this.getActiveTab()
-          this.loaded = true
-        })
+      const isNewSearch = this.lastQuery !== query
+      this.$refs.searchInput.blur()
+      if (isNewSearch) {
+        this.userIds = []
+        this.hashtags = []
+        this.statuses = []
+        this.media = []
+
+        this.statusesOffset = 0
+        this.lastStatusFetchCount = 0
+        this.mediaOffset = 0
+        this.lastMediaFetchCount = 0
+      }
+
+      let searchTypes = allSearchTypes
+      if (searchType) {
+        // Search only for `searchType` if it is provided
+        searchTypes = [searchType]
+      } else if (this.hasUserSelectedTab && this.currentResultTab !== 'statuses') {
+        // Start the search from the tab that the user has selected
+        // No need to sort if userPreferredTab === 'statuses'
+        searchTypes = [
+          this.currentResultTab,
+          ...allSearchTypes.filter((tab) => tab !== this.currentResultTab)
+        ]
+      }
+
+      for (const searchType of searchTypes) {
+        this.loading[searchType] = true
+      }
+
+      let oldStatusesLength = this.statuses.length
+      let oldMediaLength = this.media.length
+
+      let skipMediaSearch = !this.canSearchMediaPosts
+
+      for (const searchType of searchTypes) {
+        try {
+          if (searchType === 'media' && skipMediaSearch) {
+            continue
+          }
+
+          let searchOffset
+          if (searchType === 'statuses') {
+            searchOffset = this.statusesOffset
+          } else if (searchType === 'media') {
+            searchOffset = this.mediaOffset
+          }
+
+          const data = await this.$store.dispatch('search', {
+            q: query,
+            resolve: true,
+            offset: searchOffset,
+            'type': searchType,
+            following:
+              'followingOnly' in this.filter && this.filter.followingOnly,
+            local: 'localOnly' in this.filter && this.filter.localOnly
+          })
+
+          if (localQueryCount !== this.queryCount) {
+            // Query count differs, there should be a newer query
+            return
+          }
+
+          // Always append to old results. If new results are empty, this doesn't change anything
+          this.userIds = this.userIds.concat(map(data.accounts, 'id'))
+          this.statuses = uniqBy(this.statuses.concat(data.statuses), 'id')
+          if ('media' in data) {
+            this.media = uniqBy(this.media.concat(data.media), 'id')
+          }
+          this.hashtags = this.hashtags.concat(data.hashtags)
+
+          if (isNewSearch) {
+            if (!this.hasUserSelectedTab) {
+              this.currentResultTab = this.getFirstTabWithResults()
+            }
+            if (searchType === 'statuses' && data.statuses.length === 0) {
+              // Safe to assume that there are no media posts
+              skipMediaSearch = true
+            }
+          }
+        } catch (error) {
+          console.error(error)
+        } finally {
+          if (localQueryCount !== this.queryCount) {
+            // Skip cleanups if there's a newer query
+            return
+          }
+
+          if (!this.loadedInitially && this.hasAtLeastOneResult) {
+            // Show results on the first meaningful response
+            this.loadedInitially = true
+          }
+          this.loading[searchType] = false
+
+          if (searchType === 'statuses') {
+            // Offset from whatever we already have
+            this.statusesOffset = this.statuses.length
+            // Because the amount of new statuses can actually be zero, compare to old length instead
+            this.lastStatusFetchCount = this.statuses.length - oldStatusesLength
+          } else if (searchType === 'media') {
+            this.mediaOffset = this.media.length
+            this.lastMediaFetchCount = this.media.length - oldMediaLength
+          }
+        }
+      }
+
+      this.lastQuery = query
+      this.loadedInitially = true
+      for (const searchType of allSearchTypes) {
+        this.loading[searchType] = false
+      }
     },
-    resultCount (tabName) {
-      const length = this[tabName].length
-      return length === 0 ? '' : ` (${length})`
+    resultCount (tab) {
+      const length = this.getVisibleLength(tab)
+
+      if (length === 0 || !this.loadedInitially) {
+        return ''
+      }
+
+      if (
+        (tab === 'statuses' && this.lastStatusFetchCount !== 0) ||
+        (tab === 'media' && this.lastMediaFetchCount !== 0)
+      ) {
+        return ` (${length}+)`
+      }
+
+      return ` (${length})`
     },
     onResultTabSwitch (key) {
-      this.currenResultTab = key
+      this.currentResultTab = key
+      this.hasUserSelectedTab = true
     },
-    getActiveTab () {
-      if (this.visibleStatuses.length > 0) {
-        return 'statuses'
-      } else if (this.users.length > 0) {
-        return 'people'
-      } else if (this.hashtags.length > 0) {
-        return 'hashtags'
+    getFirstTabWithResults () {
+      for (const tab of allSearchTypes) {
+        if (this.getVisibleLength(tab) > 0) {
+          return tab
+        }
       }
 
       return 'statuses'
     },
     lastHistoryRecord (hashtag) {
       return hashtag.history && hashtag.history[0]
+    },
+    getVisibleLength (tab) {
+      if (tab === 'statuses') {
+        return this.visibleStatuses.length
+      } else if (tab === 'media') {
+        return this.visibleMedia.length
+      } else if (tab === 'accounts') {
+        return this.users.length
+      } else if (tab === 'hashtags') {
+        return this.hashtags.length
+      }
     }
   }
 }

src/components/search/search.vue

@@ -4,6 +4,9 @@
       <div class="title">
         {{ $t('nav.search') }}
       </div>
+      <SearchFilters
+        v-model="filter"
+      />
     </div>
     <div class="search-input-container">
       <input
@@ -11,7 +14,9 @@
         v-model="searchTerm"
         class="search-input"
         :placeholder="$t('nav.search')"
-        @keyup.enter="newQuery(searchTerm)"
+        @keydown.enter="
+          $event.isComposing || $event.keyCode === 229 || newQuery(searchTerm)
+        "
       >
       <button
         class="btn button-default search-button"
@@ -21,30 +26,25 @@
         <FAIcon icon="search" />
       </button>
     </div>
-    <div
-      v-if="loading"
-      class="text-center loading-icon"
-    >
-      <FAIcon
-        icon="circle-notch"
-        spin
-        size="lg"
-      />
-    </div>
-    <div v-else-if="loaded">
+    <div v-if="loadedInitially">
       <div class="search-nav-heading">
         <tab-switcher
           ref="tabSwitcher"
           :on-switch="onResultTabSwitch"
-          :active-tab="currenResultTab"
+          :active-tab="currentResultTab"
         >
           <span
             key="statuses"
-            :label="$t('user_card.statuses') + resultCount('visibleStatuses')"
+            :label="$t('user_card.statuses') + resultCount('statuses')"
           />
           <span
-            key="people"
-            :label="$t('search.people') + resultCount('users')"
+            v-if="canSearchMediaPosts"
+            key="media"
+            :label="$t('user_card.media') + resultCount('media')"
+          />
+          <span
+            key="accounts"
+            :label="$t('search.people') + resultCount('accounts')"
           />
           <span
             key="hashtags"
@@ -54,27 +54,97 @@
       </div>
     </div>
     <div class="panel-body">
-      <div v-if="currenResultTab === 'statuses'">
-        <div
-          v-if="visibleStatuses.length === 0 && !loading && loaded"
-          class="search-result-heading"
-        >
-          <h4>{{ $t('search.no_results') }}</h4>
-        </div>
-        <Status
-          v-for="status in visibleStatuses"
-          :key="status.id"
-          :collapsable="false"
-          :expandable="false"
-          :compact="false"
-          class="search-result"
-          :statusoid="status"
-          :no-heading="false"
+      <div
+        v-if="!Object.values(loading).includes(false) && !hasAtLeastOneResult"
+        class="text-center loading-icon"
+      >
+        <FAIcon
+          icon="circle-notch"
+          spin
+          size="lg"
         />
       </div>
-      <div v-else-if="currenResultTab === 'people'">
+      <div v-if="currentResultTab === 'statuses'">
+        <Conversation
+          v-for="status in visibleStatuses"
+          :key="status.id"
+          :collapsable="true"
+          class="status-fadein"
+          :status-id="status.id"
+        />
+        <button
+          v-if="!loading['statuses'] && loadedInitially && lastStatusFetchCount > 0"
+          class="more-statuses-button button-unstyled -link -fullwidth"
+          @click.prevent="search(lastQuery, 'statuses')"
+        >
+          <div class="new-status-notification text-center">
+            {{ $t('search.load_more') }}
+          </div>
+        </button>
         <div
-          v-if="users.length === 0 && !loading && loaded"
+          v-else-if="loading['statuses'] && statusesOffset > 0"
+          class="text-center loading-icon"
+        >
+          <FAIcon
+            icon="circle-notch"
+            spin
+            size="lg"
+          />
+        </div>
+        <div
+          v-if="
+            (visibleStatuses.length === 0 || lastStatusFetchCount === 0) &&
+              !loading['statuses'] && loadedInitially
+          "
+          class="search-result-heading"
+        >
+          <h4>
+            {{ visibleStatuses.length === 0 ? $t('search.no_results') : $t('search.no_more_results') }}
+          </h4>
+        </div>
+      </div>
+      <div v-if="currentResultTab === 'media'">
+        <Conversation
+          v-for="media in visibleMedia"
+          :key="media.id"
+          :collapsable="true"
+          class="status-fadein"
+          :status-id="media.id"
+        />
+        <button
+          v-if="!loading['media'] && loadedInitially && lastMediaFetchCount > 0"
+          class="more-statuses-button button-unstyled -link -fullwidth"
+          @click.prevent="search(lastQuery, 'media')"
+        >
+          <div class="new-status-notification text-center">
+            {{ $t('search.load_more') }}
+          </div>
+        </button>
+        <div
+          v-else-if="loading['media'] && mediaOffset > 0"
+          class="text-center loading-icon"
+        >
+          <FAIcon
+            icon="circle-notch"
+            spin
+            size="lg"
+          />
+        </div>
+        <div
+          v-if="
+            (visibleMedia.length === 0 || lastMediaFetchCount === 0) &&
+              !loading['media'] && loadedInitially
+          "
+          class="search-result-heading"
+        >
+          <h4>
+            {{ visibleMedia.length === 0 ? $t('search.no_results') : $t('search.no_more_results') }}
+          </h4>
+        </div>
+      </div>
+      <div v-else-if="currentResultTab === 'accounts'">
+        <div
+          v-if="users.length === 0 && !loading['accounts'] && loadedInitially"
           class="search-result-heading"
         >
           <h4>{{ $t('search.no_results') }}</h4>
@@ -86,9 +156,9 @@
           class="list-item search-result"
         />
       </div>
-      <div v-else-if="currenResultTab === 'hashtags'">
+      <div v-else-if="currentResultTab === 'hashtags'">
         <div
-          v-if="hashtags.length === 0 && !loading && loaded"
+          v-if="hashtags.length === 0 && !loading['hashtags'] && loadedInitially"
           class="search-result-heading"
         >
           <h4>{{ $t('search.no_results') }}</h4>
@@ -147,13 +217,6 @@
   }
 }
 
-.search-result {
-  box-sizing: border-box;
-  border-bottom: 1px solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-}
-
 .search-result-footer {
   border-width: 1px 0 0 0;
   border-style: solid;
@@ -178,6 +241,10 @@
 
   .search-button {
     margin-left: 0.5em;
+    width: 3em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 }
 
@@ -189,6 +256,12 @@
   display: flex;
   align-items: center;
 
+  & + & {
+    border-top: 1px solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+  }
+
   .hashtag {
     flex: 1 1 auto;
     color: $fallback--text;
@@ -196,6 +269,12 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    box-sizing: border-box;
+
+    a {
+      display: inline-block;
+      padding: .5em 1em;
+    }
   }
 
   .count {
@@ -210,4 +289,8 @@
   }
 }
 
+.more-statuses-button {
+  height: 3.5em;
+  line-height: 3.5em;
+}
 </style>

src/components/search/search_filters.vue

@@ -0,0 +1,116 @@
+<template>
+  <Popover
+    v-if="showFilters"
+    trigger="click"
+    class="SearchFilters"
+    placement="bottom"
+    :bound-to="{ x: 'container' }"
+  >
+    <template #content>
+      <div class="dropdown-menu">
+        <button
+          v-if="canSearchFollowing"
+          class="button-default dropdown-item"
+          @click="toggleFilter('followingOnly')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': currentFilter.followingOnly }"
+          />{{ $t('lists.following_only') }}
+        </button>
+        <button
+          v-if="canSearchLocal"
+          class="button-default dropdown-item"
+          @click="toggleFilter('localOnly')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': currentFilter.localOnly }"
+          />{{ $t('search.local_only') }}
+        </button>
+      </div>
+    </template>
+    <template #trigger>
+      <button class="filter-trigger-button button-unstyled">
+        <FAIcon icon="filter" />
+      </button>
+    </template>
+  </Popover>
+</template>
+
+<script>
+import Popover from '../popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faFilter } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faFilter
+)
+
+export default {
+  components: { Popover },
+  props: [
+    'modelValue'
+  ],
+  emits: [
+    'update:modelValue'
+  ],
+  data () {
+    return {
+      currentFilter: {
+        followingOnly: false,
+        localOnly: false
+      }
+    }
+  },
+  computed: {
+    showFilters () {
+      return this.canSearchFollowing || this.canSearchLocal
+    },
+    isLoggedIn () {
+      return !!this.$store.state.users.currentUser
+    },
+    canSearchFollowing () {
+      return this.isLoggedIn &&
+        this.$store.state.instance.searchOptionFollowingEnabled
+    },
+    canSearchLocal () {
+      return this.$store.state.instance.searchOptionLocalEnabled
+    },
+  },
+  created () {
+    for (const filterName of Object.entries(this.currentFilter)) {
+      if (this.modelValue && filterName in this.modelValue) {
+        this.currentFilter[filterName] = this.modelValue[filterName]
+      }
+    }
+  },
+  methods: {
+    toggleFilter (filterName) {
+      if (filterName in this.currentFilter) {
+        this.currentFilter[filterName] = !this.currentFilter[filterName]
+      } else {
+        this.currentFilter[filterName] = true
+      }
+      this.$emit('update:modelValue', this.currentFilter)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.SearchFilters {
+  align-self: stretch;
+
+  > button {
+    line-height: 100%;
+    height: 100%;
+    width: var(--__panel-heading-height-inner);
+    text-align: center;
+
+    svg {
+      font-size: 1.2em;
+    }
+  }
+}
+</style>

src/components/search_bar/search_bar.js

@@ -10,6 +10,12 @@ library.add(
 )
 
 const SearchBar = {
+  mounted () {
+    window.addEventListener('keydown', this.autoFocus)
+  },
+  beforeDestroy () {
+    window.removeEventListener('keydown', this.autoFocus)
+  },
   data: () => ({
     searchTerm: undefined,
     hidden: true,
@@ -36,6 +42,38 @@ const SearchBar = {
           this.$refs.searchInput.focus()
         }
       })
+    },
+    autoFocus (event) {
+      if (
+        event.target.tagName !== 'BODY' ||
+          event.altKey ||
+          event.ctrlKey ||
+          event.isComposing ||
+          event.metaKey ||
+          event.repeat ||
+          event.shiftKey ||
+          // not very vue-esque, but as long as it works
+          document.querySelector('.modal-view.modal-background.open')
+      ) {
+        return
+      }
+
+      if (event.key === '/') {
+        if (this.hidden) {
+          this.toggleHidden()
+        } else {
+          this.$refs.searchInput.focus()
+        }
+        event.preventDefault()
+      } else if (event.key === 'Escape') {
+        if (!this.hidden) {
+          this.toggleHidden()
+        }
+        event.preventDefault()
+      }
+    },
+    blur () {
+      this.$refs.searchInput.blur()
     }
   }
 }

src/components/search_bar/search_bar.vue

@@ -24,7 +24,12 @@
         class="search-bar-input"
         :placeholder="$t('nav.search')"
         type="text"
-        @keyup.enter="find(searchTerm)"
+        @keydown.enter="
+          $event.isComposing || $event.keyCode === 229 || find(searchTerm)
+        "
+        @keydown.escape="
+          $event.isComposing || blur()
+        "
       >
       <button
         class="button-default search-button"
@@ -58,8 +63,7 @@
 
 .SearchBar {
   display: inline-flex;
-  align-items: baseline;
-  vertical-align: baseline;
+  align-items: center;
   justify-content: flex-end;
 
   &.-expanded {
@@ -71,13 +75,21 @@
     height: 29px;
   }
 
+  .search-button {
+    margin-left: 0.5em;
+    width: 3em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   .search-bar-input {
     flex: 1 0 auto;
     margin-left: 0.5em;
   }
 
   .cancel-search {
-    height: 50px;
+    height: 100%;
   }
 
   .cancel-icon {

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>

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"

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"

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>

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>

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

src/components/settings_modal/settings_modal.vue

@@ -4,6 +4,7 @@
     class="settings-modal"
     :class="{ peek: modalPeeked }"
     :no-background="modalPeeked"
+    @backdropClicked="closeModal"
   >
     <div class="settings-modal-panel panel">
       <div class="panel-heading">
@@ -108,7 +109,7 @@
         <Checkbox
           :model-value="!!expertLevel"
           class="expertMode"
-          @update:modelValue="expertLevel = Number($event)"
+          @update:model-value="expertLevel = Number($event)"
         >
           {{ $t("settings.expert_mode") }}
         </Checkbox>

src/components/settings_modal/tabs/data_import_export_tab.js

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

src/components/settings_modal/tabs/general_tab.js

@@ -4,12 +4,14 @@ 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'
 import {
   faGlobe, faSync
 } from '@fortawesome/free-solid-svg-icons'
+import iso6391 from 'iso-639-1'
 
 library.add(
   faGlobe,
@@ -17,6 +19,11 @@ library.add(
 )
 
 const GeneralTab = {
+  setup() {
+    const {postLanguageOptions} = usePostLanguageOptions()
+
+    return {postLanguageOptions}
+  },
   data () {
     return {
       subjectLineOptions: ['email', 'noop', 'masto'].map(mode => ({
@@ -80,6 +87,15 @@ const GeneralTab = {
         label: this.$t(`post_status.content_type["${format}"]`)
       }))
     },
+    postLanguages () {
+      return iso6391.getLanguages(iso6391.getAllCodes())
+        .map(lang => ({
+          key: lang.code,
+          value: lang.code,
+          label: lang.nativeName,
+        }))
+        .sort((a, b) => a.label.localeCompare(b.label));
+    },
     instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
     instanceWallpaperUsed () {
       return this.$store.state.instance.background &&
@@ -118,6 +134,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: {

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') }}
@@ -483,14 +506,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') }}
@@ -579,6 +594,15 @@
             {{ $t('settings.subject_line_behavior') }}
           </ChoiceSetting>
         </li>
+        <li>
+          <ChoiceSetting
+            id="postLanguage"
+            path="postLanguage"
+            :options="postLanguages"
+          >
+            {{ $t('settings.post_status_language') }}
+          </ChoiceSetting>
+        </li>
         <li v-if="postFormats.length > 0">
           <ChoiceSetting
             id="postContentType"
@@ -588,6 +612,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"

src/components/settings_modal/tabs/mutes_and_blocks_tab.js

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

src/components/settings_modal/tabs/mutes_and_blocks_tab.vue

@@ -10,7 +10,7 @@
           :query="queryUserIds"
           :placeholder="$t('settings.search_user_to_block')"
         >
-          <template 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>

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

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

src/components/settings_modal/tabs/theme_tab/preview.vue

@@ -21,8 +21,10 @@
       </div>
       <div class="panel-body theme-preview-content">
         <div class="post">
-          <div class="avatar still-image">
-            ( ͡° ͜ʖ ͡°)
+          <div class="Avatar post-avatar">
+            <div class="still-image avatar -better-shadow">
+              ( ͡° ͜ʖ ͡°)
+            </div>
           </div>
           <div class="content">
             <h4>

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