Add Twitter compatibility redirects

Add compatibility redirects for Mastodon and Soapbox FE
2021-12-27 13:31:23 -06:00 · 2021-12-27 13:25:12 -06:00
208 changed files with 4088 additions and 8238 deletions
--- a/.babelrc
+++ b/.babelrc
@ -1,5 +1,5 @@
 {
-  "presets": ["@babel/preset-env"],
-  "plugins": ["@babel/plugin-transform-runtime", "lodash", "@vue/babel-plugin-jsx"],
+  "presets": ["@babel/preset-env", "@vue/babel-preset-jsx"],
+  "plugins": ["@babel/plugin-transform-runtime", "lodash"],
  "comments": false
 }
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -1,7 +1,7 @@
 # This file is a template, and might need editing before it works on your project.
 # Official framework image. Look for the different tagged releases at:
 # https://hub.docker.com/r/library/node/tags/
-image: node:12
+image: node:10

 stages:
  - lint
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -3,56 +3,6 @@ All notable changes to this project will be documented in this file.

 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).

-## Unreleased
-### Fixed
- AdminFE button no longer scrolls page to top when clicked
- Pinned statuses no longer appear at bottom of user timeline (still appear as part of the timeline when fetched deep enough)
- Fixed many many bugs related to new mentions, including spacing and alignment issues
- Links in profile bios now properly open in new tabs
- Inline images now respect their intended width/height attributes
- Links with `&` in them work properly now
- Interaction list popovers now properly emojify names
- Completely hidden posts still had 1px border
- Attachments are ALWAYS in same order as user uploaded, no more "videos first"
- Attachment description is prefilled with backend-provided default when uploading
- Proper visual feedback that next image is loading when browsing
-
-### Changed
- (You)s are optional (opt-in) now, bolding your nickname is also optional (opt-out)
- User highlight background now also covers the `@`
- Reverted back to textual `@`, svg version is opt-in.
- Settings window has been throughly rearranged to make make more sense and make navication settings easier.
- Uploaded attachments are uniform with displayed attachments
- Flash is watchable in media-modal (takes up nearly full screen though due to sizing issues)
- Notifications about likes/repeats/emoji reacts are now minimized so they always take up same amount of space irrelevant to size of post.
-
-### Added
- Options to show domains in mentions
- Option to show user avatars in mention links (opt-in)
- Option to disable the tooltip for mentions
- Option to completely hide muted threads
- Ability to open videos in modal even if you disabled that feature, via an icon button
- New button on attachment that indicates that attachment has a description and shows a bar filled with description
- Attachments are truncated just like post contents
- Media modal now also displays description and counter position in gallery (i.e. 1/5)
- Ability to rearrange order of attachments when uploading
- Enabled users to zoom and pan images in media viewer with mouse and touch
-
-
-## [2.4.2] - 2022-01-09
-### Added
- Added Apply and Reset buttons to the bottom of theme tab to minimize UI travel
- Implemented user option to always show floating New Post button (normally mobile-only)
- Display reasons for instance specific policies
- Added functionality to cancel follow request
-
-### Fixed
- Fixed link to external profile not working on user profiles
- Fixed mobile shoutbox display
- Fixed favicon badge not working in Chrome
- Escape html more properly in subject/display name
-
-
 ## [2.4.0] - 2021-08-08
 ### Added
 - Added a quick settings to timeline header for easier access
@ -61,11 +11,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Implemented user option to change sidebar position to the right side
 - Implemented user option to hide floating shout panel
 - Implemented "edit profile" button if viewing own profile which opens profile settings
+- Added Apply and Reset buttons to the bottom of theme tab to minimize UI travel
+- Implemented user option to always show floating New Post button (normally mobile-only)

 ### Fixed
 - Fixed follow request count showing in the wrong location in mobile view

-
 ## [2.3.0] - 2021-03-01
 ### Fixed
 - Button to remove uploaded media in post status form is now properly placed and sized.
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@ -4,7 +4,6 @@ var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
 var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
 var CopyPlugin = require('copy-webpack-plugin');
-var { VueLoaderPlugin } = require('vue-loader')

 var env = process.env.NODE_ENV
 // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@ -30,16 +29,16 @@ module.exports = {
    }
  },
  resolve: {
-    extensions: ['.js', '.jsx', '.vue'],
+    extensions: ['.js', '.vue'],
    modules: [
      path.join(__dirname, '../node_modules')
    ],
    alias: {
+      'vue$': 'vue/dist/vue.runtime.common',
      'static': path.resolve(__dirname, '../static'),
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
-      'components': path.resolve(__dirname, '../src/components'),
-      'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
+      'components': path.resolve(__dirname, '../src/components')
    }
  },
  module: {
@ -59,28 +58,9 @@ module.exports = {
          }
        }
      },
-      {
-        enforce: 'post',
-        test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
-        type: 'javascript/auto',
-        loader: '@intlify/vue-i18n-loader',
-        include: [ // Use `Rule.include` to specify the files of locale messages to be pre-compiled
-          path.resolve(__dirname, '../src/i18n')
-        ]
-      },
      {
        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          compilerOptions: {
-            isCustomElement(tag) {
-              if (tag === 'pinch-zoom') {
-                return true
-              }
-              return false
-            }
-          }
-        }
+        use: 'vue-loader'
      },
      {
        test: /\.jsx?$/,
@ -115,7 +95,6 @@ module.exports = {
      entry: path.join(__dirname, '..', 'src/sw.js'),
      filename: 'sw-pleroma.js'
    }),
-    new VueLoaderPlugin(),
    // This copies Ruffle's WASM to a directory so that JS side can access it
    new CopyPlugin({
      patterns: [
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@ -21,9 +21,7 @@ module.exports = merge(baseWebpackConfig, {
    new webpack.DefinePlugin({
      'process.env': config.dev.env,
      'COMMIT_HASH': JSON.stringify('DEV'),
-      'DEV_OVERRIDES': JSON.stringify(config.dev.settings),
-      '__VUE_OPTIONS_API__': true,
-      '__VUE_PROD_DEVTOOLS__': false
+      'DEV_OVERRIDES': JSON.stringify(config.dev.settings)
    }),
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.HotModuleReplacementPlugin(),
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@ -36,9 +36,7 @@ var webpackConfig = merge(baseWebpackConfig, {
    new webpack.DefinePlugin({
      'process.env': env,
      'COMMIT_HASH': JSON.stringify(commitHash),
-      'DEV_OVERRIDES': JSON.stringify(undefined),
-      '__VUE_OPTIONS_API__': true,
-      '__VUE_PROD_DEVTOOLS__': false
+      'DEV_OVERRIDES': JSON.stringify(undefined)
    }),
    // extract css into its own file
    new MiniCssExtractPlugin({
--- a/config/index.js
+++ b/config/index.js
@ -52,10 +52,7 @@ module.exports = {
        target,
        changeOrigin: true,
        cookieDomainRewrite: 'localhost',
-        ws: true,
-        headers: {
-          'Origin': target
-        }
+        ws: true
      },
      '/oauth/revoke': {
        target,
--- a/package.json
+++ b/package.json
@ -16,111 +16,107 @@
    "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
  },
  "dependencies": {
-    "@babel/runtime": "7.17.8",
-    "@chenfengyuan/vue-qrcode": "2.0.0",
-    "@fortawesome/fontawesome-svg-core": "1.3.0",
-    "@fortawesome/free-regular-svg-icons": "5.15.4",
-    "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/vue-fontawesome": "3.0.0-5",
-    "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
-    "@vuelidate/core": "2.0.0-alpha.35",
-    "@vuelidate/validators": "2.0.0-alpha.27",
-    "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",
-    "localforage": "1.10.0",
-    "parse-link-header": "1.0.1",
-    "phoenix": "1.6.2",
-    "punycode.js": "2.1.0",
-    "qrcode": "1",
-    "ruffle-mirror": "2021.12.31",
-    "vue": "^3.2.31",
-    "vue-i18n": "^9.2.0-beta.34",
-    "vue-router": "4.0.14",
-    "vue-template-compiler": "2.6.11",
-    "vuex": "4.0.2"
+    "@babel/runtime": "^7.7.6",
+    "@chenfengyuan/vue-qrcode": "^1.0.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-regular-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/vue-fontawesome": "^2.0.0",
+    "body-scroll-lock": "^2.6.4",
+    "chromatism": "^3.0.0",
+    "cropperjs": "^1.4.3",
+    "diff": "^3.0.1",
+    "escape-html": "^1.0.3",
+    "localforage": "^1.5.0",
+    "parse-link-header": "^1.0.1",
+    "phoenix": "^1.3.0",
+    "portal-vue": "^2.1.4",
+    "punycode.js": "^2.1.0",
+    "ruffle-mirror": "^2021.4.10",
+    "v-click-outside": "^2.1.1",
+    "vue": "^2.6.11",
+    "vue-i18n": "^7.3.2",
+    "vue-router": "^3.0.1",
+    "vue-template-compiler": "^2.6.11",
+    "vuelidate": "^0.7.4",
+    "vuex": "^3.0.1"
  },
  "devDependencies": {
-    "@babel/core": "7.17.8",
-    "@babel/plugin-transform-runtime": "7.17.0",
-    "@babel/preset-env": "7.16.11",
-    "@babel/register": "7.17.7",
-    "@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",
-    "@vue/compiler-sfc": "^3.1.0",
-    "@vue/test-utils": "2.0.0-rc.17",
-    "autoprefixer": "6.7.7",
-    "babel-eslint": "7.2.3",
-    "babel-loader": "8.2.4",
-    "babel-plugin-lodash": "3.3.4",
-    "chai": "3.5.0",
-    "chalk": "1.1.3",
-    "chromedriver": "87.0.7",
-    "connect-history-api-fallback": "1.6.0",
-    "copy-webpack-plugin": "6.4.1",
-    "cross-spawn": "4.0.2",
-    "css-loader": "0.28.11",
-    "custom-event-polyfill": "1.0.7",
-    "eslint": "5.16.0",
-    "eslint-config-standard": "12.0.0",
-    "eslint-friendly-formatter": "2.0.7",
-    "eslint-loader": "2.2.1",
-    "eslint-plugin-import": "2.25.4",
-    "eslint-plugin-node": "7.0.1",
-    "eslint-plugin-promise": "4.3.1",
-    "eslint-plugin-standard": "4.1.0",
-    "eslint-plugin-vue": "5.2.3",
-    "eventsource-polyfill": "0.9.6",
-    "express": "4.17.3",
-    "file-loader": "3.0.1",
-    "function-bind": "1.1.1",
-    "html-webpack-plugin": "3.2.0",
-    "http-proxy-middleware": "0.21.0",
-    "inject-loader": "2.0.1",
-    "iso-639-1": "2.1.13",
-    "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",
-    "karma-webpack": "4.0.2",
-    "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",
-    "postcss-loader": "3.0.0",
-    "raw-loader": "0.5.1",
-    "sass": "1.20.1",
-    "sass-loader": "7.2.0",
+    "@babel/core": "^7.7.5",
+    "@babel/plugin-transform-runtime": "^7.7.6",
+    "@babel/preset-env": "^7.7.6",
+    "@babel/register": "^7.7.4",
+    "@ungap/event-target": "^0.1.0",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
+    "@vue/babel-preset-jsx": "^1.2.4",
+    "@vue/test-utils": "^1.0.0-beta.26",
+    "autoprefixer": "^6.4.0",
+    "babel-eslint": "^7.0.0",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-lodash": "^3.3.4",
+    "chai": "^3.5.0",
+    "chalk": "^1.1.3",
+    "chromedriver": "^87.0.1",
+    "connect-history-api-fallback": "^1.1.0",
+    "copy-webpack-plugin": "^6.4.1",
+    "cross-spawn": "^4.0.2",
+    "css-loader": "^0.28.0",
+    "custom-event-polyfill": "^1.0.7",
+    "eslint": "^5.16.0",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-friendly-formatter": "^2.0.5",
+    "eslint-loader": "^2.1.0",
+    "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-node": "^7.0.0",
+    "eslint-plugin-promise": "^4.0.0",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^5.2.2",
+    "eventsource-polyfill": "^0.9.6",
+    "express": "^4.13.3",
+    "file-loader": "^3.0.1",
+    "function-bind": "^1.0.2",
+    "html-webpack-plugin": "^3.0.0",
+    "http-proxy-middleware": "^0.17.2",
+    "inject-loader": "^2.0.1",
+    "iso-639-1": "^2.0.3",
+    "isparta-loader": "^2.0.0",
+    "json-loader": "^0.5.4",
+    "karma": "^3.0.0",
+    "karma-coverage": "^1.1.1",
+    "karma-firefox-launcher": "^1.1.0",
+    "karma-mocha": "^1.2.0",
+    "karma-mocha-reporter": "^2.2.1",
+    "karma-sinon-chai": "^2.0.2",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "0.0.26",
+    "karma-webpack": "^4.0.0-rc.3",
+    "lodash": "^4.16.4",
+    "lolex": "^1.4.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "mocha": "^3.1.0",
+    "nightwatch": "^0.9.8",
+    "opn": "^4.0.2",
+    "ora": "^0.3.0",
+    "postcss-loader": "^3.0.0",
+    "raw-loader": "^0.5.1",
+    "sass": "^1.17.3",
+    "sass-loader": "git://github.com/webpack-contrib/sass-loader",
    "selenium-server": "2.53.1",
-    "semver": "5.6.0",
-    "serviceworker-webpack-plugin": "1.0.1",
-    "shelljs": "0.8.5",
-    "sinon": "2.4.1",
-    "sinon-chai": "2.14.0",
-    "stylelint": "13.6.1",
-    "stylelint-config-standard": "20.0.0",
-    "stylelint-rscss": "0.4.0",
-    "url-loader": "1.1.2",
-    "vue-loader": "^16.0.0",
-    "vue-style-loader": "4.1.2",
-    "webpack": "4.46.0",
-    "webpack-dev-middleware": "3.7.3",
-    "webpack-hot-middleware": "2.24.3",
-    "webpack-merge": "0.14.1"
+    "semver": "^5.3.0",
+    "serviceworker-webpack-plugin": "^1.0.0",
+    "shelljs": "^0.8.4",
+    "sinon": "^2.1.0",
+    "sinon-chai": "^2.8.0",
+    "stylelint": "^13.6.1",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-rscss": "^0.4.0",
+    "url-loader": "^1.1.2",
+    "vue-loader": "^14.0.0",
+    "vue-style-loader": "^4.0.0",
+    "webpack": "^4.44.0",
+    "webpack-dev-middleware": "^3.6.0",
+    "webpack-hot-middleware": "^2.12.2",
+    "webpack-merge": "^0.14.1"
  },
  "engines": {
    "node": ">= 4.0.0",
--- a/renovate.json
+++ b/renovate.json
@ -1,6 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:base"
-  ]
-}
--- a/src/App.js
+++ b/src/App.js
@ -46,7 +46,7 @@ export default {
    this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
    window.addEventListener('resize', this.updateMobileState)
  },
-  unmounted () {
+  destroyed () {
    window.removeEventListener('resize', this.updateMobileState)
  },
  computed: {
@ -65,7 +65,7 @@ export default {
        }
      }
    },
-    shout () { return this.$store.state.shout.joined },
+    shout () { return this.$store.state.shout.channel.state === 'joined' },
    suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
    showInstanceSpecificPanel () {
      return this.$store.state.instance.showInstanceSpecificPanel &&
--- a/src/App.scss
+++ b/src/App.scss
@ -572,7 +572,7 @@ nav {
 .fade-enter-active, .fade-leave-active {
  transition: opacity .2s
 }
-.fade-enter-from, .fade-leave-active {
+.fade-enter, .fade-leave-active {
  opacity: 0
 }

--- a/src/App.vue
+++ b/src/App.vue
@ -1,6 +1,6 @@
 <template>
  <div
-    id="app-loaded"
+    id="app"
    :style="bgStyle"
  >
    <div
@ -59,7 +59,7 @@
    <UserReportingModal />
    <PostStatusModal />
    <SettingsModal />
-    <div id="modal" />
+    <portal-target name="modal" />
    <GlobalNoticeList />
  </div>
 </template>
--- a/src/_variables.scss
+++ b/src/_variables.scss
@ -30,5 +30,3 @@ $fallback--attachmentRadius: 10px;
 $fallback--chatMessageRadius: 10px;

 $fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
-
-$status-margin: 0.75em;
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@ -1,13 +1,7 @@
-import { createApp } from 'vue'
-import { createRouter, createWebHistory } from 'vue-router'
-import vClickOutside from 'click-outside-vue3'
-
-import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
-
-import App from '../App.vue'
+import Vue from 'vue'
+import VueRouter from 'vue-router'
 import routes from './routes'
-import VBodyScrollLock from 'src/directives/body_scroll_lock'
-
+import App from '../App.vue'
 import { windowWidth } from '../services/window_utils/window_utils'
 import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
@ -121,7 +115,6 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
  copyInstanceOption('nsfwCensorImage')
  copyInstanceOption('background')
  copyInstanceOption('hidePostStats')
-  copyInstanceOption('hideBotIndication')
  copyInstanceOption('hideUserStats')
  copyInstanceOption('hideFilteredStatuses')
  copyInstanceOption('logo')
@ -373,32 +366,25 @@ const afterStoreSetup = async ({ store, i18n }) => {
  getTOS({ store })
  getStickers({ store })

-  const router = createRouter({
-    history: createWebHistory(),
+  const router = new VueRouter({
+    mode: 'history',
    routes: routes(store),
    scrollBehavior: (to, _from, savedPosition) => {
      if (to.matched.some(m => m.meta.dontScroll)) {
        return false
      }
-      return savedPosition || { left: 0, top: 0 }
+      return savedPosition || { x: 0, y: 0 }
    }
  })

-  const app = createApp(App)
-
-  app.use(router)
-  app.use(store)
-  app.use(i18n)
-
-  app.use(vClickOutside)
-  app.use(VBodyScrollLock)
-
-  app.component('FAIcon', FontAwesomeIcon)
-  app.component('FALayers', FontAwesomeLayers)
-
-  app.mount('#app')
-
-  return app
+  /* eslint-disable no-new */
+  return new Vue({
+    router,
+    store,
+    i18n,
+    el: '#app',
+    render: h => h(App)
+  })
 }

 export default afterStoreSetup
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@ -39,6 +39,12 @@ export default (store) => {
          : store.state.instance.redirectRootNoLogin) || '/main/all'
      }
    },
+
+    // Redirects from Mastodon, Soapbox FE, etc. to fix old bookmarks
+    { path: '/@:username/posts/:statusId', redirect: '/notice/:statusId' },
+    { path: '/@:username/:statusId', redirect: '/notice/:statusId' },
+    { path: '/:username/status/:statusId', redirect: '/notice/:statusId' },
+
    { name: 'public-external-timeline', path: '/main/all', component: PublicAndExternalTimeline },
    { name: 'public-timeline', path: '/main/public', component: PublicTimeline },
    { name: 'friends', path: '/main/friends', component: FriendsTimeline, beforeEnter: validateAuthenticatedRoute },
@ -46,7 +52,7 @@ export default (store) => {
    { name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
    { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
    { name: 'remote-user-profile-acct',
-      path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',
+      path: '/remote-users/(@?):username([^/@]+)@:hostname([^/@]+)',
      component: RemoteUserResolver,
      beforeEnter: validateAuthenticatedRoute
    },
@ -69,7 +75,7 @@ export default (store) => {
    { name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
    { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
    { name: 'about', path: '/about', component: About },
-    { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile }
+    { name: 'user-profile', path: '/(users/)?:name', component: UserProfile }
  ]

  if (store.state.instance.pleromaChatMessagesAvailable) {
--- a/src/components/async_component_error/async_component_error.vue
+++ b/src/components/async_component_error/async_component_error.vue
@ -19,7 +19,6 @@

 <script>
 export default {
-  emits: ['resetAsyncComponent'],
  methods: {
    retry () {
      this.$emit('resetAsyncComponent')
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@ -11,12 +11,7 @@ import {
  faImage,
  faVideo,
  faPlayCircle,
-  faTimes,
-  faStop,
-  faSearchPlus,
-  faTrashAlt,
-  faPencilAlt,
-  faAlignRight
+  faTimes
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
@ -25,39 +20,27 @@ library.add(
  faImage,
  faVideo,
  faPlayCircle,
-  faTimes,
-  faStop,
-  faSearchPlus,
-  faTrashAlt,
-  faPencilAlt,
-  faAlignRight
+  faTimes
 )

 const Attachment = {
  props: [
    'attachment',
-    'description',
-    'hideDescription',
    'nsfw',
    'size',
+    'allowPlay',
    'setMedia',
-    'remove',
-    'shiftUp',
-    'shiftDn',
-    'edit'
+    'naturalSizeLoad'
  ],
  data () {
    return {
-      localDescription: this.description || this.attachment.description,
      nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage,
      hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
      preloadImage: this.$store.getters.mergedConfig.preloadImage,
      loading: false,
      img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
      modalOpen: false,
-      showHidden: false,
-      flashLoaded: false,
-      showDescription: false
+      showHidden: false
    }
  },
  components: {
@ -66,23 +49,8 @@ const Attachment = {
    VideoAttachment
  },
  computed: {
-    classNames () {
-      return [
-        {
-          '-loading': this.loading,
-          '-nsfw-placeholder': this.hidden,
-          '-editable': this.edit !== undefined
-        },
-        '-type-' + this.type,
-        this.size && '-size-' + this.size,
-        `-${this.useContainFit ? 'contain' : 'cover'}-fit`
-      ]
-    },
    usePlaceholder () {
-      return this.size === 'hide'
-    },
-    useContainFit () {
-      return this.$store.getters.mergedConfig.useContainFit
+      return this.size === 'hide' || this.type === 'unknown'
    },
    placeholderName () {
      if (this.attachment.description === '' || !this.attachment.description) {
@ -106,33 +74,24 @@ const Attachment = {
      return this.nsfw && this.hideNsfwLocal && !this.showHidden
    },
    isEmpty () {
-      return (this.type === 'html' && !this.attachment.oembed)
+      return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
+    },
+    isSmall () {
+      return this.size === 'small'
+    },
+    fullwidth () {
+      if (this.size === 'hide') return false
+      return this.type === 'html' || this.type === 'audio' || this.type === 'unknown'
    },
    useModal () {
-      let modalTypes = []
-      switch (this.size) {
-        case 'hide':
-        case 'small':
-          modalTypes = ['image', 'video', 'audio', 'flash']
-          break
-        default:
-          modalTypes = this.mergedConfig.playVideosInModal
-            ? ['image', 'video', 'flash']
-            : ['image']
-          break
-      }
+      const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio']
+        : this.mergedConfig.playVideosInModal
+          ? ['image', 'video']
+          : ['image']
      return modalTypes.includes(this.type)
    },
-    videoTag () {
-      return this.useModal ? 'button' : 'span'
-    },
    ...mapGetters(['mergedConfig'])
  },
-  watch: {
-    localDescription (newVal) {
-      this.onEdit(newVal)
-    }
-  },
  methods: {
    linkClicked ({ target }) {
      if (target.tagName === 'A') {
@ -141,37 +100,12 @@ const Attachment = {
    },
    openModal (event) {
      if (this.useModal) {
-        this.$emit('setMedia')
-        this.$store.dispatch('setCurrentMedia', this.attachment)
-      } else if (this.type === 'unknown') {
-        window.open(this.attachment.url)
+        event.stopPropagation()
+        event.preventDefault()
+        this.setMedia()
+        this.$store.dispatch('setCurrent', this.attachment)
      }
    },
-    openModalForce (event) {
-      this.$emit('setMedia')
-      this.$store.dispatch('setCurrentMedia', this.attachment)
-    },
-    onEdit (event) {
-      this.edit && this.edit(this.attachment, event)
-    },
-    onRemove () {
-      this.remove && this.remove(this.attachment)
-    },
-    onShiftUp () {
-      this.shiftUp && this.shiftUp(this.attachment)
-    },
-    onShiftDn () {
-      this.shiftDn && this.shiftDn(this.attachment)
-    },
-    stopFlash () {
-      this.$refs.flash.closePlayer()
-    },
-    setFlashLoaded (event) {
-      this.flashLoaded = event
-    },
-    toggleDescription () {
-      this.showDescription = !this.showDescription
-    },
    toggleHidden (event) {
      if (
        (this.mergedConfig.useOneClickNsfw && !this.showHidden) &&
@ -198,7 +132,7 @@ const Attachment = {
    onImageLoad (image) {
      const width = image.naturalWidth
      const height = image.naturalHeight
-      this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height })
+      this.naturalSizeLoad && this.naturalSizeLoad({ width, height })
    }
  }
 }
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@ -1,268 +0,0 @@
-@import '../../_variables.scss';
-
-.Attachment {
-  display: inline-flex;
-  flex-direction: column;
-  position: relative;
-  align-self: flex-start;
-  line-height: 0;
-  height: 100%;
-  border-style: solid;
-  border-width: 1px;
-  border-radius: $fallback--attachmentRadius;
-  border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-
-  .attachment-wrapper {
-    flex: 1 1 auto;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .description-container {
-    flex: 0 1 0;
-    display: flex;
-    padding-top: 0.5em;
-    z-index: 1;
-
-    p {
-      flex: 1;
-      text-align: center;
-      line-height: 1.5;
-      padding: 0.5em;
-      margin: 0;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-
-    &.-static {
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      padding-top: 0;
-      background: var(--popover);
-      box-shadow: var(--popupShadow);
-    }
-  }
-
-  .description-field {
-    flex: 1;
-    min-width: 0;
-  }
-
-  & .placeholder-container,
-  & .image-container,
-  & .audio-container,
-  & .video-container,
-  & .flash-container,
-  & .oembed-container {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
-
-  .image-container {
-    .image {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  & .flash-container,
-  & .video-container {
-    & .flash,
-    & video {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-      align-self: center;
-    }
-  }
-
-  .audio-container {
-    display: flex;
-    align-items: flex-end;
-
-    audio {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .placeholder-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding-top: 0.5em;
-  }
-
-
-  .play-icon {
-    position: absolute;
-    font-size: 64px;
-    top: calc(50% - 32px);
-    left: calc(50% - 32px);
-    color: rgba(255, 255, 255, 0.75);
-    text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
-
-    &::before {
-      margin: 0;
-    }
-  }
-
-  .attachment-buttons {
-    display: flex;
-    position: absolute;
-    right: 0;
-    top: 0;
-    margin-top: 0.5em;
-    margin-right: 0.5em;
-    z-index: 1;
-
-    .attachment-button {
-      padding: 0;
-      border-radius: $fallback--tooltipRadius;
-      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-      text-align: center;
-      width: 2em;
-      height: 2em;
-      margin-left: 0.5em;
-      font-size: 1.25em;
-      // TODO: theming? hard to theme with unknown background image color
-      background: rgba(230, 230, 230, 0.7);
-
-      .svg-inline--fa {
-        color: rgba(0, 0, 0, 0.6);
-      }
-
-      &:hover .svg-inline--fa {
-        color: rgba(0, 0, 0, 0.9);
-      }
-    }
-  }
-
-  .oembed-container {
-    line-height: 1.2em;
-    flex: 1 0 100%;
-    width: 100%;
-    margin-right: 15px;
-    display: flex;
-
-    img {
-      width: 100%;
-    }
-
-    .image {
-      flex: 1;
-      img {
-        border: 0px;
-        border-radius: 5px;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-
-    .text {
-      flex: 2;
-      margin: 8px;
-      word-break: break-all;
-      h1 {
-        font-size: 14px;
-        margin: 0px;
-      }
-    }
-  }
-
-  &.-size-small {
-    .play-icon {
-      zoom: 0.5;
-      opacity: 0.7;
-    }
-
-    .attachment-buttons {
-      zoom: 0.7;
-      opacity: 0.5;
-    }
-  }
-
-  &.-editable {
-    padding: 0.5em;
-
-    & .description-container,
-    & .attachment-buttons {
-      margin: 0;
-    }
-  }
-
-  &.-placeholder {
-    display: inline-block;
-    color: $fallback--link;
-    color: var(--postLink, $fallback--link);
-    overflow: hidden;
-    white-space: nowrap;
-    height: auto;
-    line-height: 1.5;
-
-    &:not(.-editable) {
-      border: none;
-    }
-
-    &.-editable {
-      display: flex;
-      flex-direction: row;
-      align-items: baseline;
-
-      & .description-container,
-      & .attachment-buttons {
-        margin: 0;
-        padding: 0;
-        position: relative;
-      }
-
-      .description-container {
-        flex: 1;
-        padding-left: 0.5em;
-      }
-
-      .attachment-buttons {
-        order: 99;
-        align-self: center;
-      }
-    }
-
-    a {
-      display: inline-block;
-      max-width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    svg {
-      color: inherit;
-    }
-  }
-
-  &.-loading {
-    cursor: progress;
-  }
-
-  &.-contain-fit {
-    img,
-    canvas {
-      object-fit: contain;
-    }
-  }
-
-  &.-cover-fit {
-    img,
-    canvas {
-      object-fit: cover;
-    }
-  }
-}
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@ -1,8 +1,7 @@
 <template>
-  <button
+  <div
    v-if="usePlaceholder"
-    class="Attachment -placeholder button-unstyled"
-    :class="classNames"
+    :class="{ 'fullwidth': fullwidth }"
    @click="openModal"
  >
    <a
@ -12,257 +11,318 @@
      :href="attachment.url"
      :alt="attachment.description"
      :title="attachment.description"
-      @click.prevent
    >
      <FAIcon :icon="placeholderIconClass" />
-      <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ edit ? '' : placeholderName }}
+      <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
    </a>
-    <div
-      v-if="edit || remove"
-      class="attachment-buttons"
-    >
-      <button
-        v-if="remove"
-        class="button-unstyled attachment-button"
-        @click.prevent="onRemove"
-      >
-        <FAIcon icon="trash-alt" />
-      </button>
-    </div>
-    <div
-      v-if="size !== 'hide' && !hideDescription && (edit || localDescription || showDescription)"
-      class="description-container"
-      :class="{ '-static': !edit }"
-    >
-      <input
-        v-if="edit"
-        v-model="localDescription"
-        type="text"
-        class="description-field"
-        :placeholder="$t('post_status.media_description')"
-        @keydown.enter.prevent=""
-      >
-      <p v-else>
-        {{ localDescription }}
-      </p>
-    </div>
-  </button>
+  </div>
  <div
    v-else
-    class="Attachment"
-    :class="classNames"
+    v-show="!isEmpty"
+    class="attachment"
+    :class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
  >
-    <div
-      v-show="!isEmpty"
-      class="attachment-wrapper"
+    <a
+      v-if="hidden"
+      class="image-attachment"
+      :href="attachment.url"
+      :alt="attachment.description"
+      :title="attachment.description"
+      @click.prevent.stop="toggleHidden"
    >
-      <a
-        v-if="hidden"
-        class="image-container"
-        :href="attachment.url"
+      <img
+        :key="nsfwImage"
+        class="nsfw"
+        :src="nsfwImage"
+        :class="{'small': isSmall}"
+      >
+      <FAIcon
+        v-if="type === 'video'"
+        class="play-icon"
+        icon="play-circle"
+      />
+    </a>
+    <button
+      v-if="nsfw && hideNsfwLocal && !hidden"
+      class="button-unstyled hider"
+      @click.prevent="toggleHidden"
+    >
+      <FAIcon icon="times" />
+    </button>
+
+    <a
+      v-if="type === 'image' && (!hidden || preloadImage)"
+      class="image-attachment"
+      :class="{'hidden': hidden && preloadImage }"
+      :href="attachment.url"
+      target="_blank"
+      @click="openModal"
+    >
+      <StillImage
+        class="image"
+        :referrerpolicy="referrerpolicy"
+        :mimetype="attachment.mimetype"
+        :src="attachment.large_thumb_url || attachment.url"
+        :image-load-handler="onImageLoad"
        :alt="attachment.description"
-        :title="attachment.description"
-        @click.prevent.stop="toggleHidden"
-      >
-        <img
-          :key="nsfwImage"
-          class="nsfw"
-          :src="nsfwImage"
-        >
-        <FAIcon
-          v-if="type === 'video'"
-          class="play-icon"
-          icon="play-circle"
-        />
-      </a>
-      <div
-        v-if="!hidden"
-        class="attachment-buttons"
-      >
-        <button
-          v-if="type === 'flash' && flashLoaded"
-          class="button-unstyled attachment-button"
-          :title="$t('status.attachment_stop_flash')"
-          @click.prevent="stopFlash"
-        >
-          <FAIcon icon="stop" />
-        </button>
-        <button
-          v-if="attachment.description && size !== 'small' && !edit && type !== 'unknown'"
-          class="button-unstyled attachment-button"
-          :title="$t('status.show_attachment_description')"
-          @click.prevent="toggleDescription"
-        >
-          <FAIcon icon="align-right" />
-        </button>
-        <button
-          v-if="!useModal && type !== 'unknown'"
-          class="button-unstyled attachment-button"
-          :title="$t('status.show_attachment_in_modal')"
-          @click.prevent="openModalForce"
-        >
-          <FAIcon icon="search-plus" />
-        </button>
-        <button
-          v-if="nsfw && hideNsfwLocal"
-          class="button-unstyled attachment-button"
-          :title="$t('status.hide_attachment')"
-          @click.prevent="toggleHidden"
-        >
-          <FAIcon icon="times" />
-        </button>
-        <button
-          v-if="shiftUp"
-          class="button-unstyled attachment-button"
-          :title="$t('status.move_up')"
-          @click.prevent="onShiftUp"
-        >
-          <FAIcon icon="chevron-left" />
-        </button>
-        <button
-          v-if="shiftDn"
-          class="button-unstyled attachment-button"
-          :title="$t('status.move_down')"
-          @click.prevent="onShiftDn"
-        >
-          <FAIcon icon="chevron-right" />
-        </button>
-        <button
-          v-if="remove"
-          class="button-unstyled attachment-button"
-          :title="$t('status.remove_attachment')"
-          @click.prevent="onRemove"
-        >
-          <FAIcon icon="trash-alt" />
-        </button>
-      </div>
+      />
+    </a>

-      <a
-        v-if="type === 'image' && (!hidden || preloadImage)"
-        class="image-container"
-        :class="{'-hidden': hidden && preloadImage }"
-        :href="attachment.url"
-        target="_blank"
-        @click.stop.prevent="openModal"
-      >
-        <StillImage
-          class="image"
-          :referrerpolicy="referrerpolicy"
-          :mimetype="attachment.mimetype"
-          :src="attachment.large_thumb_url || attachment.url"
-          :image-load-handler="onImageLoad"
-          :alt="attachment.description"
-        />
-      </a>
-
-      <a
-        v-if="type === 'unknown' && !hidden"
-        class="placeholder-container"
-        :href="attachment.url"
-        target="_blank"
-      >
-        <FAIcon
-          size="5x"
-          :icon="placeholderIconClass"
-        />
-        <p>
-          {{ localDescription }}
-        </p>
-      </a>
-
-      <component
-        :is="videoTag"
-        v-if="type === 'video' && !hidden"
-        class="video-container"
-        :class="{ 'button-unstyled': 'isModal' }"
-        :href="attachment.url"
-        @click.stop.prevent="openModal"
-      >
-        <VideoAttachment
-          class="video"
-          :attachment="attachment"
-          :controls="!useModal"
-          @play="$emit('play')"
-          @pause="$emit('pause')"
-        />
-        <FAIcon
-          v-if="useModal"
-          class="play-icon"
-          icon="play-circle"
-        />
-      </component>
-
-      <span
-        v-if="type === 'audio' && !hidden"
-        class="audio-container"
-        :href="attachment.url"
-        @click.stop.prevent="openModal"
-      >
-        <audio
-          v-if="type === 'audio'"
-          :src="attachment.url"
-          :alt="attachment.description"
-          :title="attachment.description"
-          controls
-          @play="$emit('play')"
-          @pause="$emit('pause')"
-        />
-      </span>
-
-      <div
-        v-if="type === 'html' && attachment.oembed"
-        class="oembed-container"
-        @click.prevent="linkClicked"
-      >
-        <div
-          v-if="attachment.thumb_url"
-          class="image"
-        >
-          <img :src="attachment.thumb_url">
-        </div>
-        <div class="text">
-          <!-- eslint-disable vue/no-v-html -->
-          <h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1>
-          <div v-html="attachment.oembed.oembedHTML" />
-          <!-- eslint-enable vue/no-v-html -->
-        </div>
-      </div>
-
-      <span
-        v-if="type === 'flash' && !hidden"
-        class="flash-container"
-        :href="attachment.url"
-        @click.stop.prevent="openModal"
-      >
-        <Flash
-          ref="flash"
-          class="flash"
-          :src="attachment.large_thumb_url || attachment.url"
-          @playerOpened="setFlashLoaded(true)"
-          @playerClosed="setFlashLoaded(false)"
-        />
-      </span>
-    </div>
-    <div
-      v-if="size !== 'hide' && !hideDescription && (edit || (localDescription && showDescription))"
-      class="description-container"
-      :class="{ '-static': !edit }"
+    <a
+      v-if="type === 'video' && !hidden"
+      class="video-container"
+      :class="{'small': isSmall}"
+      :href="allowPlay ? undefined : attachment.url"
+      @click="openModal"
    >
-      <input
-        v-if="edit"
-        v-model="localDescription"
-        type="text"
-        class="description-field"
-        :placeholder="$t('post_status.media_description')"
-        @keydown.enter.prevent=""
+      <VideoAttachment
+        class="video"
+        :attachment="attachment"
+        :controls="allowPlay"
+        @play="$emit('play')"
+        @pause="$emit('pause')"
+      />
+      <FAIcon
+        v-if="!allowPlay"
+        class="play-icon"
+        icon="play-circle"
+      />
+    </a>
+
+    <audio
+      v-if="type === 'audio'"
+      :src="attachment.url"
+      :alt="attachment.description"
+      :title="attachment.description"
+      controls
+      @play="$emit('play')"
+      @pause="$emit('pause')"
+    />
+
+    <div
+      v-if="type === 'html' && attachment.oembed"
+      class="oembed"
+      @click.prevent="linkClicked"
+    >
+      <div
+        v-if="attachment.thumb_url"
+        class="image"
      >
-      <p v-else>
-        {{ localDescription }}
-      </p>
+        <img :src="attachment.thumb_url">
+      </div>
+      <div class="text">
+        <!-- eslint-disable vue/no-v-html -->
+        <h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1>
+        <div v-html="attachment.oembed.oembedHTML" />
+        <!-- eslint-enable vue/no-v-html -->
+      </div>
    </div>
+
+    <Flash
+      v-if="type === 'flash'"
+      :src="attachment.large_thumb_url || attachment.url"
+    />
  </div>
 </template>

 <script src="./attachment.js"></script>

-<style src="./attachment.scss" lang="scss"></style>
+<style lang="scss">
+@import '../../_variables.scss';
+
+.attachments {
+  display: flex;
+  flex-wrap: wrap;
+
+  .non-gallery {
+    max-width: 100%;
+  }
+
+  .placeholder {
+    display: inline-block;
+    padding: 0.3em 1em 0.3em 0;
+    color: $fallback--link;
+    color: var(--postLink, $fallback--link);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 100%;
+
+    svg {
+      color: inherit;
+    }
+  }
+
+  .nsfw-placeholder {
+    cursor: pointer;
+
+    &.loading {
+      cursor: progress;
+    }
+  }
+
+  .attachment {
+    position: relative;
+    margin-top: 0.5em;
+    align-self: flex-start;
+    line-height: 0;
+
+    border-style: solid;
+    border-width: 1px;
+    border-radius: $fallback--attachmentRadius;
+    border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    overflow: hidden;
+  }
+
+  .non-gallery.attachment {
+    &.flash,
+    &.video {
+      flex: 1 0 40%;
+    }
+    .nsfw {
+      height: 260px;
+    }
+    .small {
+      height: 120px;
+      flex-grow: 0;
+    }
+    .video {
+      height: 260px;
+      display: flex;
+    }
+    video {
+      max-height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .fullwidth {
+    flex-basis: 100%;
+  }
+  // fixes small gap below video
+  &.video {
+    line-height: 0;
+  }
+
+  .video-container {
+    display: flex;
+    max-height: 100%;
+  }
+
+  .video {
+    width: 100%;
+    height: 100%;
+  }
+
+  .play-icon {
+    position: absolute;
+    font-size: 64px;
+    top: calc(50% - 32px);
+    left: calc(50% - 32px);
+    color: rgba(255, 255, 255, 0.75);
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+  }
+
+  .play-icon::before {
+    margin: 0;
+  }
+
+  &.html {
+    flex-basis: 90%;
+    width: 100%;
+    display: flex;
+  }
+
+  .hider {
+    position: absolute;
+    right: 0;
+    margin: 10px;
+    padding: 0;
+    z-index: 4;
+    border-radius: $fallback--tooltipRadius;
+    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    text-align: center;
+    width: 2em;
+    height: 2em;
+    font-size: 1.25em;
+    // TODO: theming? hard to theme with unknown background image color
+    background: rgba(230, 230, 230, 0.7);
+    .svg-inline--fa {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    &:hover .svg-inline--fa {
+      color: rgba(0, 0, 0, 0.9);
+    }
+  }
+
+  video {
+    z-index: 0;
+  }
+
+  audio {
+    width: 100%;
+  }
+
+  img.media-upload {
+    line-height: 0;
+    max-height: 200px;
+    max-width: 100%;
+  }
+
+  .oembed {
+    line-height: 1.2em;
+    flex: 1 0 100%;
+    width: 100%;
+    margin-right: 15px;
+    display: flex;
+
+    img {
+      width: 100%;
+    }
+
+    .image {
+      flex: 1;
+      img {
+        border: 0px;
+        border-radius: 5px;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .text {
+      flex: 2;
+      margin: 8px;
+      word-break: break-all;
+      h1 {
+        font-size: 14px;
+        margin: 0px;
+      }
+    }
+  }
+
+  .image-attachment {
+    &,
+    & .image {
+      width: 100%;
+      height: 100%;
+    }
+
+    &.hidden {
+      display: none;
+    }
+
+    .nsfw {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+
+    img {
+      image-orientation: from-image; // NOTE: only FF supports this
+    }
+  }
+}
+</style>
--- a/src/components/auth_form/auth_form.js
+++ b/src/components/auth_form/auth_form.js
@ -1,4 +1,3 @@
-import { h, resolveComponent } from 'vue'
 import LoginForm from '../login_form/login_form.vue'
 import MFARecoveryForm from '../mfa_form/recovery_form.vue'
 import MFATOTPForm from '../mfa_form/totp_form.vue'
@ -6,8 +5,8 @@ import { mapGetters } from 'vuex'

 const AuthForm = {
  name: 'AuthForm',
-  render () {
-    return h(resolveComponent(this.authForm))
+  render (createElement) {
+    return createElement('component', { is: this.authForm })
  },
  computed: {
    authForm () {
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@ -4,7 +4,7 @@
      <UserAvatar
        class="avatar"
        :user="user"
-        @click.prevent="toggleUserExpanded"
+        @click.prevent.native="toggleUserExpanded"
      />
    </router-link>
    <div
--- a/src/components/bookmark_timeline/bookmark_timeline.js
+++ b/src/components/bookmark_timeline/bookmark_timeline.js
@ -9,7 +9,7 @@ const Bookmarks = {
  components: {
    Timeline
  },
-  unmounted () {
+  destroyed () {
    this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
  }
 }
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@ -57,7 +57,7 @@ const Chat = {
    })
    this.setChatLayout()
  },
-  unmounted () {
+  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
    window.removeEventListener('resize', this.handleLayoutChange)
    this.unsetChatLayout()
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@ -26,71 +26,73 @@
            />
          </div>
        </div>
-        <div
-          ref="scrollable"
-          class="scrollable-message-list"
-          :style="{ height: scrollableContainerHeight }"
-          @scroll="handleScroll"
-        >
-          <template v-if="!errorLoadingChat">
-            <ChatMessage
-              v-for="chatViewItem in chatViewItems"
-              :key="chatViewItem.id"
-              :author="recipient"
-              :chat-view-item="chatViewItem"
-              :hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId"
-              @hover="onMessageHover"
-            />
-          </template>
+        <template>
          <div
-            v-else
-            class="chat-loading-error"
+            ref="scrollable"
+            class="scrollable-message-list"
+            :style="{ height: scrollableContainerHeight }"
+            @scroll="handleScroll"
          >
-            <div class="alert error">
-              {{ $t('chats.error_loading_chat') }}
+            <template v-if="!errorLoadingChat">
+              <ChatMessage
+                v-for="chatViewItem in chatViewItems"
+                :key="chatViewItem.id"
+                :author="recipient"
+                :chat-view-item="chatViewItem"
+                :hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId"
+                @hover="onMessageHover"
+              />
+            </template>
+            <div
+              v-else
+              class="chat-loading-error"
+            >
+              <div class="alert error">
+                {{ $t('chats.error_loading_chat') }}
+              </div>
            </div>
          </div>
-        </div>
-        <div
-          ref="footer"
-          class="panel-body footer"
-        >
          <div
-            class="jump-to-bottom-button"
-            :class="{ 'visible': jumpToBottomButtonVisible }"
-            @click="scrollDown({ behavior: 'smooth' })"
+            ref="footer"
+            class="panel-body footer"
          >
-            <span>
-              <FAIcon icon="chevron-down" />
-              <div
-                v-if="newMessageCount"
-                class="badge badge-notification unread-chat-count unread-message-count"
-              >
-                {{ newMessageCount }}
-              </div>
-            </span>
+            <div
+              class="jump-to-bottom-button"
+              :class="{ 'visible': jumpToBottomButtonVisible }"
+              @click="scrollDown({ behavior: 'smooth' })"
+            >
+              <span>
+                <FAIcon icon="chevron-down" />
+                <div
+                  v-if="newMessageCount"
+                  class="badge badge-notification unread-chat-count unread-message-count"
+                >
+                  {{ newMessageCount }}
+                </div>
+              </span>
+            </div>
+            <PostStatusForm
+              :disable-subject="true"
+              :disable-scope-selector="true"
+              :disable-notice="true"
+              :disable-lock-warning="true"
+              :disable-polls="true"
+              :disable-sensitivity-checkbox="true"
+              :disable-submit="errorLoadingChat || !currentChat"
+              :disable-preview="true"
+              :optimistic-posting="true"
+              :post-handler="sendMessage"
+              :submit-on-enter="!mobileLayout"
+              :preserve-focus="!mobileLayout"
+              :auto-focus="!mobileLayout"
+              :placeholder="formPlaceholder"
+              :file-limit="1"
+              max-height="160"
+              emoji-picker-placement="top"
+              @resize="handleResize"
+            />
          </div>
-          <PostStatusForm
-            :disable-subject="true"
-            :disable-scope-selector="true"
-            :disable-notice="true"
-            :disable-lock-warning="true"
-            :disable-polls="true"
-            :disable-sensitivity-checkbox="true"
-            :disable-submit="errorLoadingChat || !currentChat"
-            :disable-preview="true"
-            :optimistic-posting="true"
-            :post-handler="sendMessage"
-            :submit-on-enter="!mobileLayout"
-            :preserve-focus="!mobileLayout"
-            :auto-focus="!mobileLayout"
-            :placeholder="formPlaceholder"
-            :file-limit="1"
-            max-height="160"
-            emoji-picker-placement="top"
-            @resize="handleResize"
-          />
-        </div>
+        </template>
      </div>
    </div>
  </div>
--- a/src/components/chat_message/chat_message.js
+++ b/src/components/chat_message/chat_message.js
@ -27,7 +27,6 @@ const ChatMessage = {
    'chatViewItem',
    'hoveredMessageChain'
  ],
-  emits: ['hover'],
  components: {
    Popover,
    Attachment,
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@ -1,7 +1,6 @@
@import '../../_variables.scss';

 .chat-message-wrapper {
-
  &.hovered-message-chain {
    .animated.Avatar {
      canvas {
@ -41,12 +40,6 @@
  .chat-message {
    display: flex;
    padding-bottom: 0.5em;
-
-    .status-body:hover {
-      --_still-image-img-visibility: visible;
-      --_still-image-canvas-visibility: hidden;
-      --_still-image-label-visibility: hidden;
-    }
  }

  .avatar-wrapper {
@ -69,6 +62,10 @@
    &.with-media {
      width: 100%;

+      .gallery-row {
+        overflow: hidden;
+      }
+
      .status {
        width: 100%;
      }
--- a/src/components/chat_title/chat_title.js
+++ b/src/components/chat_title/chat_title.js
@ -1,12 +1,11 @@
+import Vue from 'vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import UserAvatar from '../user_avatar/user_avatar.vue'
-import RichContent from 'src/components/rich_content/rich_content.jsx'

-export default {
+export default Vue.component('chat-title', {
  name: 'ChatTitle',
  components: {
-    UserAvatar,
-    RichContent
+    UserAvatar
  },
  props: [
    'user', 'withAvatar'
@ -24,4 +23,4 @@ export default {
      return generateProfileLink(user.id, user.screen_name)
    }
  }
-}
+})
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@ -1,4 +1,5 @@
 <template>
+  <!-- eslint-disable vue/no-v-html -->
  <div
    class="chat-title"
    :title="title"
@ -13,14 +14,12 @@
        height="23px"
      />
    </router-link>
-    <RichContent
-      v-if="user"
+    <span
      class="username"
-      :title="'@'+user.screen_name_ui"
-      :html="htmlTitle"
-      :emoji="user.emoji || []"
+      v-html="htmlTitle"
    />
  </div>
+  <!-- eslint-enable vue/no-v-html -->
 </template>

 <script src="./chat_title.js"></script>
@ -35,8 +34,6 @@
  white-space: nowrap;
  align-items: center;

-  --emoji-size: 14px;
-
  .username {
    max-width: 100%;
    text-overflow: ellipsis;
@ -44,6 +41,14 @@
    display: inline;
    word-wrap: break-word;
    overflow: hidden;
+    text-overflow: ellipsis;
+
+    .emoji {
+      width: 14px;
+      height: 14px;
+      vertical-align: middle;
+      object-fit: contain
+    }
  }

  .Avatar {
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@ -6,9 +6,9 @@
    <input
      type="checkbox"
      :disabled="disabled"
-      :checked="modelValue"
-      :indeterminate="indeterminate"
-      @change="$emit('update:modelValue', $event.target.checked)"
+      :checked="checked"
+      :indeterminate.prop="indeterminate"
+      @change="$emit('change', $event.target.checked)"
    >
    <i class="checkbox-indicator" />
    <span
@ -22,9 +22,12 @@

 <script>
 export default {
-  emits: ['update:modelValue'],
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
  props: [
-    'modelValue',
+    'checked',
    'indeterminate',
    'disabled'
  ]
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@ -11,28 +11,28 @@
    </label>
    <Checkbox
      v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
-      :model-value="present"
+      :checked="present"
      :disabled="disabled"
      class="opt"
-      @update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
+      @change="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
    />
    <div class="input color-input-field">
      <input
        :id="name + '-t'"
        class="textColor unstyled"
        type="text"
-        :value="modelValue || fallback"
+        :value="value || fallback"
        :disabled="!present || disabled"
-        @input="$emit('update:modelValue', $event.target.value)"
+        @input="$emit('input', $event.target.value)"
      >
      <input
        v-if="validColor"
        :id="name"
        class="nativeColor unstyled"
        type="color"
-        :value="modelValue || fallback"
+        :value="value || fallback"
        :disabled="!present || disabled"
-        @input="$emit('update:modelValue', $event.target.value)"
+        @input="$emit('input', $event.target.value)"
      >
      <div
        v-if="transparentColor"
@ -67,7 +67,7 @@ export default {
    },
    // Color value, should be required but vue cannot tell the difference
    // between "property missing" and "property set to undefined"
-    modelValue: {
+    value: {
      required: false,
      type: String,
      default: undefined
@ -91,19 +91,18 @@ export default {
      default: true
    }
  },
-  emits: ['update:modelValue'],
  computed: {
    present () {
-      return typeof this.modelValue !== 'undefined'
+      return typeof this.value !== 'undefined'
    },
    validColor () {
-      return hex2rgb(this.modelValue || this.fallback)
+      return hex2rgb(this.value || this.fallback)
    },
    transparentColor () {
-      return this.modelValue === 'transparent'
+      return this.value === 'transparent'
    },
    computedColor () {
-      return this.modelValue && this.modelValue.startsWith('--')
+      return this.value && this.value.startsWith('--')
    }
  }
 }
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@ -1,19 +1,5 @@
 import { reduce, filter, findIndex, clone, get } from 'lodash'
 import Status from '../status/status.vue'
-import ThreadTree from '../thread_tree/thread_tree.vue'
-
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faAngleDoubleDown,
-  faAngleDoubleLeft,
-  faChevronLeft
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faAngleDoubleDown,
-  faAngleDoubleLeft,
-  faChevronLeft
-)

 const sortById = (a, b) => {
  const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
@ -49,10 +35,7 @@ const conversation = {
  data () {
    return {
      highlight: null,
-      expanded: false,
-      threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
-      statusContentPropertiesObject: {},
-      inlineDivePosition: null
+      expanded: false
    }
  },
  props: [
@ -70,50 +53,12 @@ const conversation = {
    }
  },
  computed: {
-    maxDepthToShowByDefault () {
-      // maxDepthInThread = max number of depths that is *visible*
-      // since our depth starts with 0 and "showing" means "showing children"
-      // there is a -2 here
-      const maxDepth = this.$store.getters.mergedConfig.maxDepthInThread - 2
-      return maxDepth >= 1 ? maxDepth : 1
-    },
-    displayStyle () {
-      return this.$store.getters.mergedConfig.conversationDisplay
-    },
-    isTreeView () {
-      return !this.isLinearView
-    },
-    treeViewIsSimple () {
-      return !this.$store.getters.mergedConfig.conversationTreeAdvanced
-    },
-    isLinearView () {
-      return this.displayStyle === 'linear'
-    },
-    shouldFadeAncestors () {
-      return this.$store.getters.mergedConfig.conversationTreeFadeAncestors
-    },
-    otherRepliesButtonPosition () {
-      return this.$store.getters.mergedConfig.conversationOtherRepliesButton
-    },
-    showOtherRepliesButtonBelowStatus () {
-      return this.otherRepliesButtonPosition === 'below'
-    },
-    showOtherRepliesButtonInsideStatus () {
-      return this.otherRepliesButtonPosition === 'inside'
-    },
-    suspendable () {
-      if (this.isTreeView) {
-        return Object.entries(this.statusContentProperties)
-          .every(([k, prop]) => !prop.replying && prop.mediaPlaying.length === 0)
-      }
-      if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
-        return this.$refs.statusComponent.every(s => s.suspendable)
-      } else {
-        return true
-      }
-    },
    hideStatus () {
-      return this.virtualHidden && this.suspendable
+      if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
+        return this.virtualHidden && this.$refs.statusComponent[0].suspendable
+      } else {
+        return this.virtualHidden
+      }
    },
    status () {
      return this.$store.state.statuses.allStatusesObject[this.statusId]
@ -145,121 +90,6 @@ const conversation = {

      return sortAndFilterConversation(conversation, this.status)
    },
-    statusMap () {
-      return this.conversation.reduce((res, s) => {
-        res[s.id] = s
-        return res
-      }, {})
-    },
-    threadTree () {
-      const reverseLookupTable = this.conversation.reduce((table, status, index) => {
-        table[status.id] = index
-        return table
-      }, {})
-
-      const threads = this.conversation.reduce((a, cur) => {
-        const id = cur.id
-        a.forest[id] = this.getReplies(id)
-          .map(s => s.id)
-
-        return a
-      }, {
-        forest: {}
-      })
-
-      const walk = (forest, topLevel, depth = 0, processed = {}) => topLevel.map(id => {
-        if (processed[id]) {
-          return []
-        }
-
-        processed[id] = true
-        return [{
-          status: this.conversation[reverseLookupTable[id]],
-          id,
-          depth
-        }, walk(forest, forest[id], depth + 1, processed)].reduce((a, b) => a.concat(b), [])
-      }).reduce((a, b) => a.concat(b), [])
-
-      const linearized = walk(threads.forest, this.topLevel.map(k => k.id))
-
-      return linearized
-    },
-    replyIds () {
-      return this.conversation.map(k => k.id)
-        .reduce((res, id) => {
-          res[id] = (this.replies[id] || []).map(k => k.id)
-          return res
-        }, {})
-    },
-    totalReplyCount () {
-      const sizes = {}
-      const subTreeSizeFor = (id) => {
-        if (sizes[id]) {
-          return sizes[id]
-        }
-        sizes[id] = 1 + this.replyIds[id].map(cid => subTreeSizeFor(cid)).reduce((a, b) => a + b, 0)
-        return sizes[id]
-      }
-      this.conversation.map(k => k.id).map(subTreeSizeFor)
-      return Object.keys(sizes).reduce((res, id) => {
-        res[id] = sizes[id] - 1 // exclude itself
-        return res
-      }, {})
-    },
-    totalReplyDepth () {
-      const depths = {}
-      const subTreeDepthFor = (id) => {
-        if (depths[id]) {
-          return depths[id]
-        }
-        depths[id] = 1 + this.replyIds[id].map(cid => subTreeDepthFor(cid)).reduce((a, b) => a > b ? a : b, 0)
-        return depths[id]
-      }
-      this.conversation.map(k => k.id).map(subTreeDepthFor)
-      return Object.keys(depths).reduce((res, id) => {
-        res[id] = depths[id] - 1 // exclude itself
-        return res
-      }, {})
-    },
-    depths () {
-      return this.threadTree.reduce((a, k) => {
-        a[k.id] = k.depth
-        return a
-      }, {})
-    },
-    topLevel () {
-      const topLevel = this.conversation.reduce((tl, cur) =>
-        tl.filter(k => this.getReplies(cur.id).map(v => v.id).indexOf(k.id) === -1), this.conversation)
-      return topLevel
-    },
-    otherTopLevelCount () {
-      return this.topLevel.length - 1
-    },
-    showingTopLevel () {
-      if (this.canDive && this.diveRoot) {
-        return [this.statusMap[this.diveRoot]]
-      }
-      return this.topLevel
-    },
-    diveRoot () {
-      const statusId = this.inlineDivePosition || this.statusId
-      const isTopLevel = !this.parentOf(statusId)
-      return isTopLevel ? null : statusId
-    },
-    diveDepth () {
-      return this.canDive && this.diveRoot ? this.depths[this.diveRoot] : 0
-    },
-    diveMode () {
-      return this.canDive && !!this.diveRoot
-    },
-    shouldShowAllConversationButton () {
-      // The "show all conversation" button tells the user that there exist
-      // other toplevel statuses, so do not show it if there is only a single root
-      return this.isTreeView && this.isExpanded && this.diveMode && this.topLevel.length > 1
-    },
-    shouldShowAncestors () {
-      return this.isTreeView && this.isExpanded && this.ancestorsOf(this.diveRoot).length
-    },
    replies () {
      let i = 1
      // eslint-disable-next-line camelcase
@ -279,71 +109,15 @@ const conversation = {
      }, {})
    },
    isExpanded () {
-      return !!(this.expanded || this.isPage)
+      return this.expanded || this.isPage
    },
    hiddenStyle () {
      const height = (this.status && this.status.virtualHeight) || '120px'
      return this.virtualHidden ? { height } : {}
-    },
-    threadDisplayStatus () {
-      return this.conversation.reduce((a, k) => {
-        const id = k.id
-        const depth = this.depths[id]
-        const status = (() => {
-          if (this.threadDisplayStatusObject[id]) {
-            return this.threadDisplayStatusObject[id]
-          }
-          if ((depth - this.diveDepth) <= this.maxDepthToShowByDefault) {
-            return 'showing'
-          } else {
-            return 'hidden'
-          }
-        })()
-
-        a[id] = status
-        return a
-      }, {})
-    },
-    statusContentProperties () {
-      return this.conversation.reduce((a, k) => {
-        const id = k.id
-        const props = (() => {
-          const def = {
-            showingTall: false,
-            expandingSubject: false,
-            showingLongSubject: false,
-            isReplying: false,
-            mediaPlaying: []
-          }
-
-          if (this.statusContentPropertiesObject[id]) {
-            return {
-              ...def,
-              ...this.statusContentPropertiesObject[id]
-            }
-          }
-          return def
-        })()
-
-        a[id] = props
-        return a
-      }, {})
-    },
-    canDive () {
-      return this.isTreeView && this.isExpanded
-    },
-    focused () {
-      return (id) => {
-        return (this.isExpanded) && id === this.highlight
-      }
-    },
-    maybeHighlight () {
-      return this.isExpanded ? this.highlight : null
    }
  },
  components: {
-    Status,
-    ThreadTree
+    Status
  },
  watch: {
    statusId (newVal, oldVal) {
@ -358,8 +132,6 @@ const conversation = {
    expanded (value) {
      if (value) {
        this.fetchConversation()
-      } else {
-        this.resetDisplayState()
      }
    },
    virtualHidden (value) {
@ -389,8 +161,8 @@ const conversation = {
    getReplies (id) {
      return this.replies[id] || []
    },
-    getHighlight () {
-      return this.isExpanded ? this.highlight : null
+    focused (id) {
+      return (this.isExpanded) && id === this.statusId
    },
    setHighlight (id) {
      if (!id) return
@ -398,139 +170,15 @@ const conversation = {
      this.$store.dispatch('fetchFavsAndRepeats', id)
      this.$store.dispatch('fetchEmojiReactionsBy', id)
    },
+    getHighlight () {
+      return this.isExpanded ? this.highlight : null
+    },
    toggleExpanded () {
      this.expanded = !this.expanded
    },
    getConversationId (statusId) {
      const status = this.$store.state.statuses.allStatusesObject[statusId]
      return get(status, 'retweeted_status.statusnet_conversation_id', get(status, 'statusnet_conversation_id'))
-    },
-    setThreadDisplay (id, nextStatus) {
-      this.threadDisplayStatusObject = {
-        ...this.threadDisplayStatusObject,
-        [id]: nextStatus
-      }
-    },
-    toggleThreadDisplay (id) {
-      const curStatus = this.threadDisplayStatus[id]
-      const nextStatus = curStatus === 'showing' ? 'hidden' : 'showing'
-      this.setThreadDisplay(id, nextStatus)
-    },
-    setThreadDisplayRecursively (id, nextStatus) {
-      this.setThreadDisplay(id, nextStatus)
-      this.getReplies(id).map(k => k.id).map(id => this.setThreadDisplayRecursively(id, nextStatus))
-    },
-    showThreadRecursively (id) {
-      this.setThreadDisplayRecursively(id, 'showing')
-    },
-    setStatusContentProperty (id, name, value) {
-      this.statusContentPropertiesObject = {
-        ...this.statusContentPropertiesObject,
-        [id]: {
-          ...this.statusContentPropertiesObject[id],
-          [name]: value
-        }
-      }
-    },
-    toggleStatusContentProperty (id, name) {
-      this.setStatusContentProperty(id, name, !this.statusContentProperties[id][name])
-    },
-    leastVisibleAncestor (id) {
-      let cur = id
-      let parent = this.parentOf(cur)
-      while (cur) {
-        // if the parent is showing it means cur is visible
-        if (this.threadDisplayStatus[parent] === 'showing') {
-          return cur
-        }
-        parent = this.parentOf(parent)
-        cur = this.parentOf(cur)
-      }
-      // nothing found, fall back to toplevel
-      return this.topLevel[0] ? this.topLevel[0].id : undefined
-    },
-    diveIntoStatus (id, preventScroll) {
-      this.tryScrollTo(id)
-    },
-    diveToTopLevel () {
-      this.tryScrollTo(this.topLevelAncestorOrSelfId(this.diveRoot) || this.topLevel[0].id)
-    },
-    // only used when we are not on a page
-    undive () {
-      this.inlineDivePosition = null
-      this.setHighlight(this.statusId)
-    },
-    tryScrollTo (id) {
-      if (!id) {
-        return
-      }
-      if (this.isPage) {
-        // set statusId
-        this.$router.push({ name: 'conversation', params: { id } })
-      } else {
-        this.inlineDivePosition = id
-      }
-      // Because the conversation can be unmounted when out of sight
-      // and mounted again when it comes into sight,
-      // the `mounted` or `created` function in `status` should not
-      // contain scrolling calls, as we do not want the page to jump
-      // when we scroll with an expanded conversation.
-      //
-      // Now the method is to rely solely on the `highlight` watcher
-      // in `status` components.
-      // In linear views, all statuses are rendered at all times, but
-      // in tree views, it is possible that a change in active status
-      // removes and adds status components (e.g. an originally child
-      // status becomes an ancestor status, and thus they will be
-      // different).
-      // Here, let the components be rendered first, in order to trigger
-      // the `highlight` watcher.
-      this.$nextTick(() => {
-        this.setHighlight(id)
-      })
-    },
-    goToCurrent () {
-      this.tryScrollTo(this.diveRoot || this.topLevel[0].id)
-    },
-    statusById (id) {
-      return this.statusMap[id]
-    },
-    parentOf (id) {
-      const status = this.statusById(id)
-      if (!status) {
-        return undefined
-      }
-      const { in_reply_to_status_id: parentId } = status
-      if (!this.statusMap[parentId]) {
-        return undefined
-      }
-      return parentId
-    },
-    parentOrSelf (id) {
-      return this.parentOf(id) || id
-    },
-    // Ancestors of some status, from top to bottom
-    ancestorsOf (id) {
-      const ancestors = []
-      let cur = this.parentOf(id)
-      while (cur) {
-        ancestors.unshift(this.statusMap[cur])
-        cur = this.parentOf(cur)
-      }
-      return ancestors
-    },
-    topLevelAncestorOrSelfId (id) {
-      let cur = id
-      let parent = this.parentOf(id)
-      while (parent) {
-        cur = this.parentOf(cur)
-        parent = this.parentOf(parent)
-      }
-      return cur
-    },
-    resetDisplayState () {
-      this.undive()
-      this.threadDisplayStatusObject = {}
    }
  }
 }
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@ -18,176 +18,24 @@
        {{ $t('timeline.collapse') }}
      </button>
    </div>
-    <div class="conversation-body panel-body">
-      <div
-        v-if="isTreeView"
-        class="thread-body"
-      >
-        <div
-          v-if="shouldShowAllConversationButton"
-          class="conversation-dive-to-top-level-box"
-        >
-          <i18n-t
-            keypath="status.show_all_conversation_with_icon"
-            tag="button"
-            class="button-unstyled -link"
-            @click.prevent="diveToTopLevel"
-            scope="global"
-          >
-            <template #icon>
-              <FAIcon
-                icon="angle-double-left"
-              />
-            </template>
-            <template #text>
-              <span>
-                {{ $tc('status.show_all_conversation', otherTopLevelCount, { numStatus: otherTopLevelCount }) }}
-              </span>
-            </template>
-          </i18n-t>
-        </div>
-        <div
-          v-if="shouldShowAncestors"
-          class="thread-ancestors"
-        >
-          <div
-            v-for="status in ancestorsOf(diveRoot)"
-            :key="status.id"
-            class="thread-ancestor"
-            :class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1, '-faded': shouldFadeAncestors}"
-          >
-            <status
-              ref="statusComponent"
-              :inline-expanded="collapsable && isExpanded"
-              :statusoid="status"
-              :expandable="!isExpanded"
-              :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-              :focused="focused(status.id)"
-              :in-conversation="isExpanded"
-              :highlight="getHighlight()"
-              :replies="getReplies(status.id)"
-              :in-profile="inProfile"
-              :profile-user-id="profileUserId"
-              class="conversation-status status-fadein panel-body"
-
-              :simple-tree="treeViewIsSimple"
-              :toggle-thread-display="toggleThreadDisplay"
-              :thread-display-status="threadDisplayStatus"
-              :show-thread-recursively="showThreadRecursively"
-              :total-reply-count="totalReplyCount"
-              :total-reply-depth="totalReplyDepth"
-              :show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
-              :dive="() => diveIntoStatus(status.id)"
-
-              :controlled-showing-tall="statusContentProperties[status.id].showingTall"
-              :controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
-              :controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
-              :controlled-replying="statusContentProperties[status.id].replying"
-              :controlled-media-playing="statusContentProperties[status.id].mediaPlaying"
-              :controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')"
-              :controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')"
-              :controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')"
-              :controlled-toggle-replying="() => toggleStatusContentProperty(status.id, 'replying')"
-              :controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"
-
-              @goto="setHighlight"
-              @toggleExpanded="toggleExpanded"
-            />
-            <div
-              v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
-              class="thread-ancestor-dive-box"
-            >
-              <div
-                class="thread-ancestor-dive-box-inner"
-              >
-                <i18n-t
-                  tag="button"
-                  scope="global"
-                  keypath="status.ancestor_follow_with_icon"
-                  class="button-unstyled -link thread-tree-show-replies-button"
-                  @click.prevent="diveIntoStatus(status.id)"
-                >
-                  <template #icon>
-                    <FAIcon
-                      icon="angle-double-right"
-                    />
-                  </template>
-                  <template #text>
-                    <span>
-                      {{ $tc('status.ancestor_follow', getReplies(status.id).length - 1, { numReplies: getReplies(status.id).length - 1 }) }}
-                    </span>
-                  </template>
-                </i18n-t>
-              </div>
-            </div>
-          </div>
-        </div>
-        <thread-tree
-          v-for="status in showingTopLevel"
-          :key="status.id"
-          ref="statusComponent"
-          :depth="0"
-
-          :status="status"
-          :in-profile="inProfile"
-          :conversation="conversation"
-          :collapsable="collapsable"
-          :is-expanded="isExpanded"
-          :pinned-status-ids-object="pinnedStatusIdsObject"
-          :profile-user-id="profileUserId"
-
-          :focused="focused"
-          :get-replies="getReplies"
-          :highlight="maybeHighlight"
-          :set-highlight="setHighlight"
-          :toggle-expanded="toggleExpanded"
-
-          :simple="treeViewIsSimple"
-          :toggle-thread-display="toggleThreadDisplay"
-          :thread-display-status="threadDisplayStatus"
-          :show-thread-recursively="showThreadRecursively"
-          :total-reply-count="totalReplyCount"
-          :total-reply-depth="totalReplyDepth"
-          :status-content-properties="statusContentProperties"
-          :set-status-content-property="setStatusContentProperty"
-          :toggle-status-content-property="toggleStatusContentProperty"
-          :dive="canDive ? diveIntoStatus : undefined"
-        />
-      </div>
-      <div
-        v-if="isLinearView"
-        class="thread-body"
-      >
-        <status
-          v-for="status in conversation"
-          :key="status.id"
-          ref="statusComponent"
-          :inline-expanded="collapsable && isExpanded"
-          :statusoid="status"
-          :expandable="!isExpanded"
-          :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-          :focused="focused(status.id)"
-          :in-conversation="isExpanded"
-          :highlight="getHighlight()"
-          :replies="getReplies(status.id)"
-          :in-profile="inProfile"
-          :profile-user-id="profileUserId"
-          class="conversation-status status-fadein panel-body"
-
-          :toggle-thread-display="toggleThreadDisplay"
-          :thread-display-status="threadDisplayStatus"
-          :show-thread-recursively="showThreadRecursively"
-          :total-reply-count="totalReplyCount"
-          :total-reply-depth="totalReplyDepth"
-          :status-content-properties="statusContentProperties"
-          :set-status-content-property="setStatusContentProperty"
-          :toggle-status-content-property="toggleStatusContentProperty"
-
-          @goto="setHighlight"
-          @toggleExpanded="toggleExpanded"
-        />
-      </div>
-    </div>
+    <status
+      v-for="status in conversation"
+      :key="status.id"
+      ref="statusComponent"
+      :inline-expanded="collapsable && isExpanded"
+      :statusoid="status"
+      :expandable="!isExpanded"
+      :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+      :focused="focused(status.id)"
+      :in-conversation="isExpanded"
+      :highlight="getHighlight()"
+      :replies="getReplies(status.id)"
+      :in-profile="inProfile"
+      :profile-user-id="profileUserId"
+      class="conversation-status status-fadein panel-body"
+      @goto="setHighlight"
+      @toggleExpanded="toggleExpanded"
+    />
  </div>
  <div
    v-else
@ -201,45 +49,6 @@
@import '../../_variables.scss';

 .Conversation {
-  .conversation-dive-to-top-level-box {
-    padding: var(--status-margin, $status-margin);
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: var(--border, $fallback--border);
-    border-radius: 0;
-    /* Make the button stretch along the whole row */
-    display: flex;
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .thread-ancestors {
-    margin-left: var(--status-margin, $status-margin);
-    border-left: 2px solid var(--border, $fallback--border);
-  }
-
-  .thread-ancestor.-faded .StatusContent {
-    --link: var(--faintLink);
-    --text: var(--faint);
-    color: var(--text);
-  }
-  .thread-ancestor-dive-box {
-    padding-left: var(--status-margin, $status-margin);
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: var(--border, $fallback--border);
-    border-radius: 0;
-    /* Make the button stretch along the whole row */
-    &, &-inner {
-      display: flex;
-      align-items: stretch;
-      flex-direction: column;
-    }
-  }
-  .thread-ancestor-dive-box-inner {
-    padding: var(--status-margin, $status-margin);
-  }
-
  .conversation-status {
    border-bottom-width: 1px;
    border-bottom-style: solid;
@ -247,28 +56,12 @@
    border-radius: 0;
  }

-  .thread-ancestor-has-other-replies .conversation-status,
-  .thread-ancestor:last-child .conversation-status,
-  .thread-ancestor:last-child .thread-ancestor-dive-box,
-  &.-expanded .thread-tree .conversation-status {
-    border-bottom: none;
-  }
-
-  .thread-ancestors + .thread-tree > .conversation-status {
-    border-top-width: 1px;
-    border-top-style: solid;
-    border-top-color: var(--border, $fallback--border);
-  }
-
-  /* expanded conversation in timeline */
-  &.status-fadein.-expanded .thread-body {
-    border-left-width: 4px;
-    border-left-style: solid;
-    border-left-color: $fallback--cRed;
-    border-left-color: var(--cRed, $fallback--cRed);
-    border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
-    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
-    border-bottom: 1px solid var(--border, $fallback--border);
+  &.-expanded {
+    .conversation-status:last-child {
+      border-bottom: none;
+      border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
+      border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+    }
  }
 }
 </style>
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@ -34,7 +34,7 @@
        <search-bar
          v-if="currentUser || !privateMode"
          @toggled="onSearchBarToggled"
-          @click.stop
+          @click.stop.native
        />
        <button
          class="button-unstyled nav-icon"
@ -52,7 +52,6 @@
          href="/pleroma/admin/#/login-pleroma"
          class="nav-icon"
          target="_blank"
-          @click.stop
        >
          <FAIcon
            fixed-width
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@ -31,7 +31,6 @@ library.add(
 */

 const EmojiInput = {
-  emits: ['update:modelValue', 'shown'],
  props: {
    suggest: {
      /**
@ -58,7 +57,8 @@ const EmojiInput = {
      required: true,
      type: Function
    },
-    modelValue: {
+    // TODO VUE3: change to modelValue, change 'input' event to 'input'
+    value: {
      /**
       * Used for v-model
       */
@ -137,8 +137,8 @@ const EmojiInput = {
      return (this.wordAtCaret || {}).word || ''
    },
    wordAtCaret () {
-      if (this.modelValue && this.caret) {
-        const word = Completion.wordAtPosition(this.modelValue, this.caret - 1) || {}
+      if (this.value && this.caret) {
+        const word = Completion.wordAtPosition(this.value, this.caret - 1) || {}
        return word
      }
    }
@ -189,11 +189,8 @@ const EmojiInput = {
          img: imageUrl || ''
        }))
    },
-    suggestions: {
-      handler (newValue) {
-        this.$nextTick(this.resize)
-      },
-      deep: true
+    suggestions (newValue) {
+      this.$nextTick(this.resize)
    }
  },
  methods: {
@ -228,13 +225,13 @@ const EmojiInput = {
      }
    },
    replace (replacement) {
-      const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
-      this.$emit('update:modelValue', newValue)
+      const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
+      this.$emit('input', newValue)
      this.caret = 0
    },
    insert ({ insertion, keepOpen, surroundingSpace = true }) {
-      const before = this.modelValue.substring(0, this.caret) || ''
-      const after = this.modelValue.substring(this.caret) || ''
+      const before = this.value.substring(0, this.caret) || ''
+      const after = this.value.substring(this.caret) || ''

      /* Using a bit more smart approach to padding emojis with spaces:
       * - put a space before cursor if there isn't one already, unless we
@ -262,7 +259,7 @@ const EmojiInput = {
        after
      ].join('')
      this.keepOpen = keepOpen
-      this.$emit('update:modelValue', newValue)
+      this.$emit('input', newValue)
      const position = this.caret + (insertion + spaceAfter + spaceBefore).length
      if (!keepOpen) {
        this.input.focus()
@ -281,8 +278,8 @@ const EmojiInput = {
      if (len > 0 || suggestion) {
        const chosenSuggestion = suggestion || this.suggestions[this.highlighted]
        const replacement = chosenSuggestion.replacement
-        const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
-        this.$emit('update:modelValue', newValue)
+        const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
+        this.$emit('input', newValue)
        this.highlighted = 0
        const position = this.wordAtCaret.start + replacement.length

@ -458,7 +455,7 @@ const EmojiInput = {
      this.showPicker = false
      this.setCaret(e)
      this.resize()
-      this.$emit('update:modelValue', e.target.value)
+      this.$emit('input', e.target.value)
    },
    onClickInput (e) {
      this.showPicker = false
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@ -1,4 +1,3 @@
-import { defineAsyncComponent } from 'vue'
 import Checkbox from '../checkbox/checkbox.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@ -58,7 +57,7 @@ const EmojiPicker = {
    }
  },
  components: {
-    StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
+    StickerPicker: () => import('../sticker_picker/sticker_picker.vue'),
    Checkbox
  },
  methods: {
@ -80,7 +79,7 @@ const EmojiPicker = {
    },
    highlight (key) {
      const ref = this.$refs['group-' + key]
-      const top = ref.offsetTop
+      const top = ref[0].offsetTop
      this.setShowStickers(false)
      this.activeGroup = key
      this.$nextTick(() => {
@ -97,7 +96,7 @@ const EmojiPicker = {
      }
    },
    triggerLoadMore (target) {
-      const ref = this.$refs['group-end-custom']
+      const ref = this.$refs['group-end-custom'][0]
      if (!ref) return
      const bottom = ref.offsetTop + ref.offsetHeight

@ -120,7 +119,7 @@ const EmojiPicker = {
      this.$nextTick(() => {
        this.emojisView.forEach(group => {
          const ref = this.$refs['group-' + group.id]
-          if (ref.offsetTop <= top) {
+          if (ref[0].offsetTop <= top) {
            this.activeGroup = group.id
          }
        })
--- a/src/components/exporter/exporter.js
+++ b/src/components/exporter/exporter.js
@ -15,8 +15,18 @@ const Exporter = {
      type: String,
      default: 'export.csv'
    },
-    exportButtonLabel: { type: String },
-    processingMessage: { type: String }
+    exportButtonLabel: {
+      type: String,
+      default () {
+        return this.$t('exporter.export')
+      }
+    },
+    processingMessage: {
+      type: String,
+      default () {
+        return this.$t('exporter.processing')
+      }
+    }
  },
  data () {
    return {
--- a/src/components/exporter/exporter.vue
+++ b/src/components/exporter/exporter.vue
@ -7,14 +7,14 @@
        spin
      />

-      <span>{{ processingMessage || $t('exporter.processing') }}</span>
+      <span>{{ processingMessage }}</span>
    </div>
    <button
      v-else
      class="btn button-default"
      @click="process"
    >
-      {{ exportButtonLabel || $t('exporter.export') }}
+      {{ exportButtonLabel }}
    </button>
  </div>
 </template>
--- a/src/components/flash/flash.js
+++ b/src/components/flash/flash.js
@ -39,13 +39,12 @@ const Flash = {
          this.player = 'error'
        })
        this.ruffleInstance = player
-        this.$emit('playerOpened')
      })
    },
    closePlayer () {
-      this.ruffleInstance && this.ruffleInstance.remove()
+      console.log(this.ruffleInstance)
+      this.ruffleInstance.remove()
      this.player = false
-      this.$emit('playerClosed')
    }
  }
 }
--- a/src/components/flash/flash.vue
+++ b/src/components/flash/flash.vue
@ -36,6 +36,13 @@
        </p>
      </span>
    </button>
+    <button
+      v-if="player"
+      class="button-unstyled hider"
+      @click="closePlayer"
+    >
+      <FAIcon icon="stop" />
+    </button>
  </div>
 </template>

@ -44,9 +51,8 @@
 <style lang="scss">
@import '../../_variables.scss';
 .Flash {
-  display: inline-block;
  width: 100%;
-  height: 100%;
+  height: 260px;
  position: relative;

  .player {
@ -54,16 +60,6 @@
    width: 100%;
  }

-  .placeholder {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--bg);
-    color: var(--link);
-  }
-
  .hider {
    top: 0;
  }
@ -80,5 +76,13 @@
    display: none;
    visibility: 'hidden';
  }
+
+  .placeholder {
+    height: 100%;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 </style>
--- a/src/components/follow_button/follow_button.js
+++ b/src/components/follow_button/follow_button.js
@ -1,6 +1,6 @@
 import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 export default {
-  props: ['relationship', 'user', 'labelFollowing', 'buttonClass'],
+  props: ['relationship', 'labelFollowing', 'buttonClass'],
  data () {
    return {
      inProgress: false
@ -14,7 +14,7 @@ export default {
      if (this.inProgress || this.relationship.following) {
        return this.$t('user_card.follow_unfollow')
      } else if (this.relationship.requested) {
-        return this.$t('user_card.follow_cancel')
+        return this.$t('user_card.follow_again')
      } else {
        return this.$t('user_card.follow')
      }
@ -29,14 +29,11 @@ export default {
      } else {
        return this.$t('user_card.follow')
      }
-    },
-    disabled () {
-      return this.inProgress || this.user.deactivated
    }
  },
  methods: {
    onClick () {
-      this.relationship.following || this.relationship.requested ? this.unfollow() : this.follow()
+      this.relationship.following ? this.unfollow() : this.follow()
    },
    follow () {
      this.inProgress = true
--- a/src/components/follow_button/follow_button.vue
+++ b/src/components/follow_button/follow_button.vue
@ -2,7 +2,7 @@
  <button
    class="btn button-default follow-button"
    :class="{ toggled: isPressed }"
-    :disabled="disabled"
+    :disabled="inProgress"
    :title="title"
    @click="onClick"
  >
--- a/src/components/follow_card/follow_card.vue
+++ b/src/components/follow_card/follow_card.vue
@ -20,7 +20,6 @@
          :relationship="relationship"
          :label-following="$t('user_card.follow_unfollow')"
          class="follow-card-follow-button"
-          :user="user"
        />
      </template>
    </div>
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@ -1,4 +1,4 @@
-import { set } from 'lodash'
+import { set } from 'vue'
 import Select from '../select/select.vue'

 export default {
@ -6,12 +6,11 @@ export default {
    Select
  },
  props: [
-    'name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'
+    'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
  ],
-  emits: ['update:modelValue'],
  data () {
    return {
-      lValue: this.modelValue,
+      lValue: this.value,
      availableOptions: [
        this.noInherit ? '' : 'inherit',
        'custom',
@ -23,7 +22,7 @@ export default {
    }
  },
  beforeUpdate () {
-    this.lValue = this.modelValue
+    this.lValue = this.value
  },
  computed: {
    present () {
@ -38,7 +37,7 @@ export default {
      },
      set (v) {
        set(this.lValue, 'family', v)
-        this.$emit('update:modelValue', this.lValue)
+        this.$emit('input', this.lValue)
      }
    },
    isCustom () {
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@ -15,14 +15,13 @@
      class="opt exlcude-disabled"
      type="checkbox"
      :checked="present"
-      @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
+      @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
    >
    <label
      v-if="typeof fallback !== 'undefined'"
      class="opt-l"
      :for="name + '-o'"
    />
-    {{ ' ' }}
    <Select
      :id="name + '-font-switcher'"
      v-model="preset"
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@ -1,26 +1,15 @@
 import Attachment from '../attachment/attachment.vue'
-import { sumBy, set } from 'lodash'
+import { chunk, last, dropRight, sumBy } from 'lodash'

 const Gallery = {
  props: [
    'attachments',
-    'limitRows',
-    'descriptions',
-    'limit',
    'nsfw',
-    'setMedia',
-    'size',
-    'editable',
-    'removeAttachment',
-    'shiftUpAttachment',
-    'shiftDnAttachment',
-    'editAttachment',
-    'grid'
+    'setMedia'
  ],
  data () {
    return {
-      sizes: {},
-      hidingLong: true
+      sizes: {}
    }
  },
  components: { Attachment },
@ -29,70 +18,26 @@ const Gallery = {
      if (!this.attachments) {
        return []
      }
-      const attachments = this.limit > 0
-        ? this.attachments.slice(0, this.limit)
-        : this.attachments
-      if (this.size === 'hide') {
-        return attachments.map(item => ({ minimal: true, items: [item] }))
+      const rows = chunk(this.attachments, 3)
+      if (last(rows).length === 1 && rows.length > 1) {
+        // if 1 attachment on last row -> add it to the previous row instead
+        const lastAttachment = last(rows)[0]
+        const allButLastRow = dropRight(rows)
+        last(allButLastRow).push(lastAttachment)
+        return allButLastRow
      }
-      const rows = this.grid
-        ? [{ grid: true, items: attachments }]
-        : attachments.reduce((acc, attachment, i) => {
-          if (attachment.mimetype.includes('audio')) {
-            return [...acc, { audio: true, items: [attachment] }, { items: [] }]
-          }
-          if (!(
-            attachment.mimetype.includes('image') ||
-              attachment.mimetype.includes('video') ||
-              attachment.mimetype.includes('flash')
-          )) {
-            return [...acc, { minimal: true, items: [attachment] }, { items: [] }]
-          }
-          const maxPerRow = 3
-          const attachmentsRemaining = this.attachments.length - i + 1
-          const currentRow = acc[acc.length - 1].items
-          currentRow.push(attachment)
-          if (currentRow.length >= maxPerRow && attachmentsRemaining > maxPerRow) {
-            return [...acc, { items: [] }]
-          } else {
-            return acc
-          }
-        }, [{ items: [] }]).filter(_ => _.items.length > 0)
      return rows
    },
-    attachmentsDimensionalScore () {
-      return this.rows.reduce((acc, row) => {
-        let size = 0
-        if (row.minimal) {
-          size += 1 / 8
-        } else if (row.audio) {
-          size += 1 / 4
-        } else {
-          size += 1 / (row.items.length + 0.6)
-        }
-        return acc + size
-      }, 0)
-    },
-    tooManyAttachments () {
-      if (this.editable || this.size === 'small') {
-        return false
-      } else if (this.size === 'hide') {
-        return this.attachments.length > 8
-      } else {
-        return this.attachmentsDimensionalScore > 1
-      }
+    useContainFit () {
+      return this.$store.getters.mergedConfig.useContainFit
    }
  },
  methods: {
-    onNaturalSizeLoad ({ id, width, height }) {
-      set(this.sizes, id, { width, height })
+    onNaturalSizeLoad (id, size) {
+      this.$set(this.sizes, id, size)
    },
-    rowStyle (row) {
-      if (row.audio) {
-        return { 'padding-bottom': '25%' } // fixed reduced height for audio
-      } else if (!row.minimal && !row.grid) {
-        return { 'padding-bottom': `${(100 / (row.items.length + 0.6))}%` }
-      }
+    rowStyle (itemsPerRow) {
+      return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` }
    },
    itemStyle (id, row) {
      const total = sumBy(row, item => this.getAspectRatio(item.id))
@ -101,16 +46,6 @@ const Gallery = {
    getAspectRatio (id) {
      const size = this.sizes[id]
      return size ? size.width / size.height : 1
-    },
-    toggleHidingLong (event) {
-      this.hidingLong = event
-    },
-    openGallery () {
-      this.$store.dispatch('setMedia', this.attachments)
-      this.$store.dispatch('setCurrentMedia', this.attachments[0])
-    },
-    onMedia () {
-      this.$store.dispatch('setMedia', this.attachments)
    }
  }
 }
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@ -1,83 +1,26 @@
 <template>
  <div
    ref="galleryContainer"
-    class="Gallery"
-    :class="{ '-long': tooManyAttachments && hidingLong }"
+    style="width: 100%;"
  >
-    <div class="gallery-rows">
-      <div
-        v-for="(row, rowIndex) in rows"
-        :key="rowIndex"
-        class="gallery-row"
-        :style="rowStyle(row)"
-        :class="{ '-audio': row.audio, '-minimal': row.minimal, '-grid': grid }"
-      >
-        <div
-          class="gallery-row-inner"
-          :class="{ '-grid': grid }"
-        >
-          <Attachment
-            v-for="(attachment, attachmentIndex) in row.items"
-            :key="attachment.id"
-            class="gallery-item"
-            :nsfw="nsfw"
-            :attachment="attachment"
-            :size="size"
-            :editable="editable"
-            :remove="removeAttachment"
-            :shift-up="!(attachmentIndex === 0 && rowIndex === 0) && shiftUpAttachment"
-            :shift-dn="!(attachmentIndex === row.items.length - 1 && rowIndex === rows.length - 1) && shiftDnAttachment"
-            :edit="editAttachment"
-            :description="descriptions && descriptions[attachment.id]"
-            :hide-description="size === 'small' || tooManyAttachments && hidingLong"
-            :style="itemStyle(attachment.id, row.items)"
-            @setMedia="onMedia"
-            @naturalSizeLoad="onNaturalSizeLoad"
-          />
-        </div>
-      </div>
-    </div>
    <div
-      v-if="tooManyAttachments"
-      class="many-attachments"
+      v-for="(row, index) in rows"
+      :key="index"
+      class="gallery-row"
+      :style="rowStyle(row.length)"
+      :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }"
    >
-      <div class="many-attachments-text">
-        {{ $t("status.many_attachments", { number: attachments.length }) }}
-      </div>
-      <div class="many-attachments-buttons">
-        <span
-          v-if="!hidingLong"
-          class="many-attachments-button"
-        >
-          <button
-            class="button-unstyled -link"
-            @click="toggleHidingLong(true)"
-          >
-            {{ $t("status.collapse_attachments") }}
-          </button>
-        </span>
-        <span
-          v-if="hidingLong"
-          class="many-attachments-button"
-        >
-          <button
-            class="button-unstyled -link"
-            @click="toggleHidingLong(false)"
-          >
-            {{ $t("status.show_all_attachments") }}
-          </button>
-        </span>
-        <span
-          v-if="hidingLong"
-          class="many-attachments-button"
-        >
-          <button
-            class="button-unstyled -link"
-            @click="openGallery"
-          >
-            {{ $t("status.open_gallery") }}
-          </button>
-        </span>
+      <div class="gallery-row-inner">
+        <attachment
+          v-for="attachment in row"
+          :key="attachment.id"
+          :set-media="setMedia"
+          :nsfw="nsfw"
+          :attachment="attachment"
+          :allow-play="false"
+          :natural-size-load="onNaturalSizeLoad.bind(null, attachment.id)"
+          :style="itemStyle(attachment.id, row)"
+        />
      </div>
    </div>
  </div>
@ -88,66 +31,12 @@
 <style lang="scss">
@import '../../_variables.scss';

-.Gallery {
-  .gallery-rows {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .gallery-row {
-    position: relative;
-    height: 0;
-    width: 100%;
-    flex-grow: 1;
-
-    &:not(:first-child) {
-      margin-top: 0.5em;
-    }
-  }
-
-  &.-long {
-    .gallery-rows {
-      max-height: 25em;
-      overflow: hidden;
-      mask:
-        linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
-        linear-gradient(to top, white, white);
-
-      /* Autoprefixed seem to ignore this one, and also syntax is different */
-      -webkit-mask-composite: xor;
-      mask-composite: exclude;
-    }
-  }
-
-  .many-attachments-text {
-    text-align: center;
-    line-height: 2;
-  }
-
-  .many-attachments-buttons {
-    display: flex;
-  }
-
-  .many-attachments-button {
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    line-height: 2;
-
-    button {
-      padding: 0 2em;
-    }
-  }
-
-  .gallery-row {
-    &.-grid,
-    &.-minimal {
-      height: auto;
-      .gallery-row-inner {
-        position: relative;
-      }
-    }
-  }
+.gallery-row {
+  position: relative;
+  height: 0;
+  width: 100%;
+  flex-grow: 1;
+  margin-top: 0.5em;

  .gallery-row-inner {
    position: absolute;
@ -159,24 +48,9 @@
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
-
-    &.-grid {
-      width: 100%;
-      height: auto;
-      position: relative;
-      display: grid;
-      grid-column-gap: 0.5em;
-      grid-row-gap: 0.5em;
-      grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
-
-      .gallery-item {
-        margin: 0;
-        height: 200px;
-      }
-    }
  }

-  .gallery-item {
+  .gallery-row-inner .attachment {
    margin: 0 0.5em 0 0;
    flex-grow: 1;
    height: 100%;
@ -187,5 +61,32 @@
      margin: 0;
    }
  }
+
+  .image-attachment {
+    width: 100%;
+    height: 100%;
+  }
+
+  .video-container {
+    height: 100%;
+  }
+
+  &.contain-fit {
+    img,
+    video,
+    canvas {
+      object-fit: contain;
+      height: 100%;
+    }
+  }
+
+  &.cover-fit {
+    img,
+    video,
+    canvas {
+      object-fit: cover;
+    }
+  }
 }
+
 </style>
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@ -117,7 +117,7 @@ const ImageCropper = {
    const fileInput = this.$refs.input
    fileInput.addEventListener('change', this.readFile)
  },
-  beforeUnmount: function () {
+  beforeDestroy: function () {
    // remove the event listeners
    const trigger = this.getTriggerDOM()
    if (trigger) {
--- a/src/components/importer/importer.js
+++ b/src/components/importer/importer.js
@ -15,9 +15,24 @@ const Importer = {
      type: Function,
      required: true
    },
-    submitButtonLabel: { type: String },
-    successMessage: { type: String },
-    errorMessage: { type: String }
+    submitButtonLabel: {
+      type: String,
+      default () {
+        return this.$t('importer.submit')
+      }
+    },
+    successMessage: {
+      type: String,
+      default () {
+        return this.$t('importer.success')
+      }
+    },
+    errorMessage: {
+      type: String,
+      default () {
+        return this.$t('importer.error')
+      }
+    }
  },
  data () {
    return {
--- a/src/components/importer/importer.vue
+++ b/src/components/importer/importer.vue
@ -18,31 +18,21 @@
      class="btn button-default"
      @click="submit"
    >
-      {{ submitButtonLabel || $t('importer.submit') }}
+      {{ submitButtonLabel }}
    </button>
    <div v-if="success">
-      <button
-        class="button-unstyled"
+      <FAIcon
+        icon="times"
        @click="dismiss"
-      >
-        <FAIcon
-          icon="times"
-        />
-      </button>
-      {{ ' ' }}
-      <span>{{ successMessage || $t('importer.success') }}</span>
+      />
+      <p>{{ successMessage }}</p>
    </div>
    <div v-else-if="error">
-      <button
-        class="button-unstyled"
+      <FAIcon
+        icon="times"
        @click="dismiss"
-      >
-        <FAIcon
-          icon="times"
-        />
-      </button>
-      {{ ' ' }}
-      <span>{{ errorMessage || $t('importer.error') }}</span>
+      />
+      <p>{{ errorMessage }}</p>
    </div>
  </div>
 </template>
--- a/src/components/interactions/interactions.js
+++ b/src/components/interactions/interactions.js
@ -1,5 +1,4 @@
 import Notifications from '../notifications/notifications.vue'
-import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'

 const tabModeDict = {
  mentions: ['mention'],
@ -21,8 +20,7 @@ const Interactions = {
    }
  },
  components: {
-    Notifications,
-    TabSwitcher
+    Notifications
  }
 }

--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@ -3,7 +3,6 @@
    <label for="interface-language-switcher">
      {{ $t('settings.interfaceLanguage') }}
    </label>
-    {{ ' ' }}
    <Select
      id="interface-language-switcher"
      v-model="language"
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@ -76,15 +76,11 @@
    >
      <div class="alert error">
        {{ error }}
-        <button
-          class="button-unstyled"
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="times"
          @click="clearError"
-        >
-          <FAIcon
-            class="fa-scale-110 fa-old-padding"
-            icon="times"
-          />
-        </button>
+        />
      </div>
    </div>
  </div>
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@ -1,46 +1,24 @@
 import StillImage from '../still-image/still-image.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
 import Modal from '../modal/modal.vue'
-import PinchZoom from '../pinch_zoom/pinch_zoom.vue'
-import SwipeClick from '../swipe_click/swipe_click.vue'
-import GestureService from '../../services/gesture_service/gesture_service'
-import Flash from 'src/components/flash/flash.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
+import GestureService from '../../services/gesture_service/gesture_service'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
  faChevronLeft,
-  faChevronRight,
-  faCircleNotch,
-  faTimes
+  faChevronRight
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
  faChevronLeft,
-  faChevronRight,
-  faCircleNotch,
-  faTimes
+  faChevronRight
 )

 const MediaModal = {
  components: {
    StillImage,
    VideoAttachment,
-    PinchZoom,
-    SwipeClick,
-    Modal,
-    Flash
-  },
-  data () {
-    return {
-      loading: false,
-      swipeDirection: GestureService.DIRECTION_LEFT,
-      swipeThreshold: () => {
-        const considerableMoveRatio = 1 / 4
-        return window.innerWidth * considerableMoveRatio
-      },
-      pinchZoomMinScale: 1,
-      pinchZoomScaleResetLimit: 1.2
-    }
+    Modal
  },
  computed: {
    showing () {
@ -49,9 +27,6 @@ const MediaModal = {
    media () {
      return this.$store.state.mediaViewer.media
    },
-    description () {
-      return this.currentMedia.description
-    },
    currentIndex () {
      return this.$store.state.mediaViewer.currentIndex
    },
@ -62,62 +37,43 @@ const MediaModal = {
      return this.media.length > 1
    },
    type () {
-      return this.currentMedia ? this.getType(this.currentMedia) : null
+      return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
    }
  },
+  created () {
+    this.mediaSwipeGestureRight = GestureService.swipeGesture(
+      GestureService.DIRECTION_RIGHT,
+      this.goPrev,
+      50
+    )
+    this.mediaSwipeGestureLeft = GestureService.swipeGesture(
+      GestureService.DIRECTION_LEFT,
+      this.goNext,
+      50
+    )
+  },
  methods: {
-    getType (media) {
-      return fileTypeService.fileType(media.mimetype)
+    mediaTouchStart (e) {
+      GestureService.beginSwipe(e, this.mediaSwipeGestureRight)
+      GestureService.beginSwipe(e, this.mediaSwipeGestureLeft)
+    },
+    mediaTouchMove (e) {
+      GestureService.updateSwipe(e, this.mediaSwipeGestureRight)
+      GestureService.updateSwipe(e, this.mediaSwipeGestureLeft)
    },
    hide () {
-      // HACK: Closing immediately via a touch will cause the click
-      // to be processed on the content below the overlay
-      const transitionTime = 100 // ms
-      setTimeout(() => {
-        this.$store.dispatch('closeMediaViewer')
-      }, transitionTime)
-    },
-    hideIfNotSwiped (event) {
-      // If we have swiped over SwipeClick, do not trigger hide
-      const comp = this.$refs.swipeClick
-      if (!comp) {
-        this.hide()
-      } else {
-        comp.$gesture.click(event)
-      }
+      this.$store.dispatch('closeMediaViewer')
    },
    goPrev () {
      if (this.canNavigate) {
        const prevIndex = this.currentIndex === 0 ? this.media.length - 1 : (this.currentIndex - 1)
-        const newMedia = this.media[prevIndex]
-        if (this.getType(newMedia) === 'image') {
-          this.loading = true
-        }
-        this.$store.dispatch('setCurrentMedia', newMedia)
+        this.$store.dispatch('setCurrent', this.media[prevIndex])
      }
    },
    goNext () {
      if (this.canNavigate) {
        const nextIndex = this.currentIndex === this.media.length - 1 ? 0 : (this.currentIndex + 1)
-        const newMedia = this.media[nextIndex]
-        if (this.getType(newMedia) === 'image') {
-          this.loading = true
-        }
-        this.$store.dispatch('setCurrentMedia', newMedia)
-      }
-    },
-    onImageLoaded () {
-      this.loading = false
-    },
-    handleSwipePreview (offsets) {
-      this.$refs.pinchZoom.setTransform({ scale: 1, x: offsets[0], y: 0 })
-    },
-    handleSwipeEnd (sign) {
-      this.$refs.pinchZoom.setTransform({ scale: 1, x: 0, y: 0 })
-      if (sign > 0) {
-        this.goNext()
-      } else if (sign < 0) {
-        this.goPrev()
+        this.$store.dispatch('setCurrent', this.media[nextIndex])
      }
    },
    handleKeyupEvent (e) {
@ -142,7 +98,7 @@ const MediaModal = {
    document.addEventListener('keyup', this.handleKeyupEvent)
    document.addEventListener('keydown', this.handleKeydownEvent)
  },
-  unmounted () {
+  destroyed () {
    window.removeEventListener('popstate', this.hide)
    document.removeEventListener('keyup', this.handleKeyupEvent)
    document.removeEventListener('keydown', this.handleKeydownEvent)
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@ -2,38 +2,18 @@
  <Modal
    v-if="showing"
    class="media-modal-view"
-    @backdropClicked="hideIfNotSwiped"
+    @backdropClicked="hide"
  >
-    <SwipeClick
+    <img
      v-if="type === 'image'"
-      ref="swipeClick"
-      class="modal-image-container"
-      :direction="swipeDirection"
-      :threshold="swipeThreshold"
-      @preview-requested="handleSwipePreview"
-      @swipe-finished="handleSwipeEnd"
-      @swipeless-clicked="hide"
+      class="modal-image"
+      :src="currentMedia.url"
+      :alt="currentMedia.description"
+      :title="currentMedia.description"
+      @touchstart.stop="mediaTouchStart"
+      @touchmove.stop="mediaTouchMove"
+      @click="hide"
    >
-      <PinchZoom
-        ref="pinchZoom"
-        class="modal-image-container-inner"
-        selector=".modal-image"
-        reach-min-scale-strategy="reset"
-        stop-propagate-handled="stop-propgate-handled"
-        :allow-pan-min-scale="pinchZoomMinScale"
-        :min-scale="pinchZoomMinScale"
-        :reset-to-min-scale-limit="pinchZoomScaleResetLimit"
-      >
-        <img
-          :class="{ loading }"
-          class="modal-image"
-          :src="currentMedia.url"
-          :alt="currentMedia.description"
-          :title="currentMedia.description"
-          @load="onImageLoaded"
-        >
-      </PinchZoom>
-    </SwipeClick>
    <VideoAttachment
      v-if="type === 'video'"
      class="modal-image"
@ -48,84 +28,38 @@
      :title="currentMedia.description"
      controls
    />
-    <Flash
-      v-if="type === 'flash'"
-      class="modal-image"
-      :src="currentMedia.url"
-      :alt="currentMedia.description"
-      :title="currentMedia.description"
-    />
    <button
      v-if="canNavigate"
      :title="$t('media_modal.previous')"
-      class="modal-view-button modal-view-button-arrow modal-view-button-arrow--prev"
+      class="modal-view-button-arrow modal-view-button-arrow--prev"
      @click.stop.prevent="goPrev"
    >
      <FAIcon
-        class="button-icon arrow-icon"
+        class="arrow-icon"
        icon="chevron-left"
      />
    </button>
    <button
      v-if="canNavigate"
      :title="$t('media_modal.next')"
-      class="modal-view-button modal-view-button-arrow modal-view-button-arrow--next"
+      class="modal-view-button-arrow modal-view-button-arrow--next"
      @click.stop.prevent="goNext"
    >
      <FAIcon
-        class="button-icon arrow-icon"
+        class="arrow-icon"
        icon="chevron-right"
      />
    </button>
-    <button
-      class="modal-view-button modal-view-button-hide"
-      :title="$t('media_modal.hide')"
-      @click.stop.prevent="hide"
-    >
-      <FAIcon
-        class="button-icon"
-        icon="times"
-      />
-    </button>
-
-    <span
-      v-if="description"
-      class="description"
-    >
-      {{ description }}
-    </span>
-    <span
-      class="counter"
-    >
-      {{ $tc('media_modal.counter', currentIndex + 1, { current: currentIndex + 1, total: media.length }) }}
-    </span>
-    <span
-      v-if="loading"
-      class="loading-spinner"
-    >
-      <FAIcon
-        spin
-        icon="circle-notch"
-        size="5x"
-      />
-    </span>
  </Modal>
 </template>

 <script src="./media_modal.js"></script>

 <style lang="scss">
-$modal-view-button-icon-height: 3em;
-$modal-view-button-icon-half-height: calc(#{$modal-view-button-icon-height} / 2);
-$modal-view-button-icon-width: 3em;
-$modal-view-button-icon-margin: 0.5em;
-
 .modal-view.media-modal-view {
  z-index: 1001;
-  flex-direction: column;

-  .modal-view-button-arrow,
-  .modal-view-button-hide {
+  .modal-view-button-arrow {
    opacity: 0.75;

    &:focus,
@ -133,154 +67,69 @@ $modal-view-button-icon-margin: 0.5em;
      outline: none;
      box-shadow: none;
    }
-
    &:hover {
      opacity: 1;
    }
  }
-  overflow: hidden;
 }

-.media-modal-view {
-  @keyframes media-fadein {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  .modal-image-container {
-    display: flex;
-    overflow: hidden;
-    align-items: center;
-    flex-direction: column;
-    max-width: 100%;
-    max-height: 100%;
-    width: 100%;
-    height: 100%;
-    flex-grow: 1;
-    justify-content: center;
-
-    &-inner {
-      width: 100%;
-      height: 100%;
-      flex-grow: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  .description,
-  .counter {
-    /* Hardcoded since background is also hardcoded */
-    color: white;
-    margin-top: 1em;
-    text-shadow: 0 0 10px black, 0 0 10px black;
-    padding: 0.2em 2em;
-  }
-
-  .description {
-    flex: 0 0 auto;
-    overflow-y: auto;
-    min-height: 1em;
-    max-width: 500px;
-    max-height: 9.5em;
-    word-break: break-all;
-  }
-
-  .modal-image {
-    max-width: 100%;
-    max-height: 100%;
-    image-orientation: from-image; // NOTE: only FF supports this
-    animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
-
-    &.loading {
-      opacity: 0.5;
-    }
-  }
-
-  .loading-spinner {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    pointer-events: none;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    svg {
-      color: white;
-    }
-  }
-
-  .modal-view-button {
-    border: 0;
-    padding: 0;
+@keyframes media-fadein {
+  from {
    opacity: 0;
-    box-shadow: none;
-    background: none;
-    appearance: none;
-    overflow: visible;
-    cursor: pointer;
-    transition: opacity 333ms cubic-bezier(.4,0,.22,1);
-    height: $modal-view-button-icon-height;
-    width: $modal-view-button-icon-width;
+  }
+  to {
+    opacity: 1;
+  }
+}

-    .button-icon {
-      position: absolute;
-      height: $modal-view-button-icon-height;
-      width: $modal-view-button-icon-width;
-      font-size: 14px;
-      line-height: $modal-view-button-icon-height;
-      color: #FFF;
-      text-align: center;
-      background-color: rgba(0,0,0,.3);
-    }
+.modal-image {
+  max-width: 90%;
+  max-height: 90%;
+  box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
+  image-orientation: from-image; // NOTE: only FF supports this
+  animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
+}
+
+.modal-view-button-arrow {
+  position: absolute;
+  display: block;
+  top: 50%;
+  margin-top: -50px;
+  width: 70px;
+  height: 100px;
+  border: 0;
+  padding: 0;
+  opacity: 0;
+  box-shadow: none;
+  background: none;
+  appearance: none;
+  overflow: visible;
+  cursor: pointer;
+  transition: opacity 333ms cubic-bezier(.4,0,.22,1);
+
+  .arrow-icon {
+    position: absolute;
+    top: 35px;
+    height: 30px;
+    width: 32px;
+    font-size: 14px;
+    line-height: 30px;
+    color: #FFF;
+    text-align: center;
+    background-color: rgba(0,0,0,.3);
  }

-  .modal-view-button-arrow {
-    position: absolute;
-    display: block;
-    top: 50%;
-    margin-top: $modal-view-button-icon-half-height;
-    width: $modal-view-button-icon-width;
-    height: $modal-view-button-icon-height;
-
+  &--prev {
+    left: 0;
    .arrow-icon {
-      position: absolute;
-      top: 0;
-      line-height: $modal-view-button-icon-height;
-      color: #FFF;
-      text-align: center;
-      background-color: rgba(0,0,0,.3);
-    }
-
-    &--prev {
-      left: 0;
-      .arrow-icon {
-        left: $modal-view-button-icon-margin;
-      }
-    }
-
-    &--next {
-      right: 0;
-      .arrow-icon {
-        right: $modal-view-button-icon-margin;
-      }
+      left: 6px;
    }
  }

-  .modal-view-button-hide {
-    position: absolute;
-    top: 0;
+  &--next {
    right: 0;
-    .button-icon {
-      top: $modal-view-button-icon-margin;
-      right: $modal-view-button-icon-margin;
+    .arrow-icon {
+      right: 6px;
    }
  }
 }
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@ -1,7 +1,6 @@
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters, mapState } from 'vuex'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
-import UserAvatar from '../user_avatar/user_avatar.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
  faAt
@ -13,9 +12,6 @@ library.add(

 const MentionLink = {
  name: 'MentionLink',
-  components: {
-    UserAvatar
-  },
  props: {
    url: {
      required: true,
@ -54,10 +50,6 @@ const MentionLink = {
    userName () {
      return this.user && this.userNameFullUi.split('@')[0]
    },
-    serverName () {
-      // XXX assumed that domain does not contain @
-      return this.user && (this.userNameFullUi.split('@')[1] || this.$store.getters.instanceDomain)
-    },
    userNameFull () {
      return this.user && this.user.screen_name
    },
@ -87,43 +79,12 @@ const MentionLink = {
    classnames () {
      return [
        {
-          '-you': this.isYou && this.shouldBoldenYou,
+          '-you': this.isYou,
          '-highlighted': this.highlight
        },
        this.highlightType
      ]
    },
-    useAtIcon () {
-      return this.mergedConfig.useAtIcon
-    },
-    isRemote () {
-      return this.userName !== this.userNameFull
-    },
-    shouldShowFullUserName () {
-      const conf = this.mergedConfig.mentionLinkDisplay
-      if (conf === 'short') {
-        return false
-      } else if (conf === 'full') {
-        return true
-      } else { // full_for_remote
-        return this.isRemote
-      }
-    },
-    shouldShowTooltip () {
-      return this.mergedConfig.mentionLinkShowTooltip && this.mergedConfig.mentionLinkDisplay === 'short' && this.isRemote
-    },
-    shouldShowAvatar () {
-      return this.mergedConfig.mentionLinkShowAvatar
-    },
-    shouldShowYous () {
-      return this.mergedConfig.mentionLinkShowYous
-    },
-    shouldBoldenYou () {
-      return this.mergedConfig.mentionLinkBoldenYou
-    },
-    shouldFadeDomain () {
-      return this.mergedConfig.mentionLinkFadeDomain
-    },
    ...mapGetters(['mergedConfig']),
    ...mapState({
      currentUser: state => state.users.currentUser
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@ -1,27 +1,15 @@
-@import '../../_variables.scss';
-
 .MentionLink {
  position: relative;
  white-space: normal;
-  display: inline;
+  display: inline-block;
  color: var(--link);
-  word-break: normal;

  & .new,
  & .original {
-    display: inline;
+    display: inline-block;
    border-radius: 2px;
  }

-  .mention-avatar {
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-    width: 1.5em;
-    height: 1.5em;
-    vertical-align: middle;
-    user-select: none;
-    margin-right: 0.2em;
-  }
-
  .full {
    position: absolute;
    display: inline-block;
@ -39,8 +27,7 @@
    user-select: all;
  }

-  & .short.-with-tooltip,
-  & .you {
+  .short {
    user-select: none;
  }

@ -49,10 +36,6 @@
    white-space: nowrap;
  }

-  .shortName {
-    white-space: normal;
-  }
-
  .new {
    &.-you {
      & .shortName,
@ -65,6 +48,7 @@
      color: var(--link);
      opacity: 0.8;
      display: inline-block;
+      height: 50%;
      line-height: 1;
      padding: 0 0.1em;
      vertical-align: -25%;
@ -72,7 +56,7 @@
    }

    &.-striped {
-      & .shortName,
+      & .userName,
      & .full {
        background-image:
          repeating-linear-gradient(
@ -86,14 +70,14 @@
    }

    &.-solid {
-      & .shortName,
+      & .userName,
      & .full {
        background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
      }
    }

    &.-side {
-      & .shortName,
+      & .userName,
      & .userNameFull {
        box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
      }
@ -104,12 +88,4 @@
    opacity: 1;
    pointer-events: initial;
  }
-
-  .serverName.-faded {
-    color: var(--faintLink, $fallback--link);
-  }
-
-  .full .-faded {
-    color: var(--faint, $fallback--faint);
-  }
 }
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@ -9,7 +9,9 @@
      class="original"
      target="_blank"
      v-html="content"
-    /><!-- eslint-enable vue/no-v-html --><span
+    />
+    <!-- eslint-enable vue/no-v-html -->
+    <span
      v-if="user"
      class="new"
      :style="style"
@ -17,56 +19,33 @@
    >
      <a
        class="short button-unstyled"
-        :class="{ '-with-tooltip': shouldShowTooltip }"
        :href="url"
        @click.prevent="onClick"
      >
        <!-- eslint-disable vue/no-v-html -->
-        <UserAvatar
-          v-if="shouldShowAvatar"
-          class="mention-avatar"
-          :user="user"
-        /><span
-          class="shortName"
-        ><FAIcon
-          v-if="useAtIcon"
+        <FAIcon
          size="sm"
          icon="at"
          class="at"
-        />{{ !useAtIcon ? '@' : '' }}<span
+        /><span class="shortName"><span
          class="userName"
          v-html="userName"
-        /><span
-          v-if="shouldShowFullUserName"
-          class="serverName"
-          :class="{ '-faded': shouldFadeDomain }"
-          v-html="'@' + serverName"
-        />
-        </span>
+        /></span>
        <span
-          v-if="isYou && shouldShowYous"
-          :class="{ '-you': shouldBoldenYou }"
-        > {{ ' ' + $t('status.you') }}</span>
+          v-if="isYou"
+          class="you"
+        >{{ $t('status.you') }}</span>
        <!-- eslint-enable vue/no-v-html -->
-      </a><span
-        v-if="shouldShowTooltip"
+      </a>
+      <span
+        v-if="userName !== userNameFull"
        class="full popover-default"
        :class="[highlightType]"
      >
        <span
          class="userNameFull"
-        >
-          <!-- eslint-disable vue/no-v-html -->
-          @<span
-            class="userName"
-            v-html="userName"
-          /><span
-            class="serverName"
-            :class="{ '-faded': shouldFadeDomain }"
-            v-html="'@' + serverName"
-          />
-          <!-- eslint-enable vue/no-v-html -->
-        </span>
+          v-text="'@' + userNameFull"
+        />
      </span>
    </span>
  </span>
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@ -1,13 +1,11 @@
 .MentionsLine {
-  word-break: break-all;
-
-  .mention-link:not(:first-child)::before {
-    content: ' ';
-  }
-
  .showMoreLess {
-    margin-left: 0.5em;
    white-space: normal;
    color: var(--link);
  }
+
+  .fullExtraMentions,
+  .mention-link:not(:last-child) {
+    margin-right: 0.25em;
+  }
 }
--- a/src/components/mentions_line/mentions_line.vue
+++ b/src/components/mentions_line/mentions_line.vue
@ -6,6 +6,7 @@
      class="mention-link"
      :content="mention.content"
      :url="mention.url"
+      :first-mention="false"
    /><span
      v-if="manyMentions"
      class="extraMentions"
@ -20,6 +21,7 @@
          class="mention-link"
          :content="mention.content"
          :url="mention.url"
+          :first-mention="false"
        />
      </span><button
        v-if="!expanded"
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@ -56,15 +56,11 @@
    >
      <div class="alert error">
        {{ error }}
-        <button
-          class="button-unstyled"
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="times"
          @click="clearError"
-        >
-          <FAIcon
-            class="fa-scale-110 fa-old-padding"
-            icon="times"
-          />
-        </button>
+        />
      </div>
    </div>
  </div>
--- a/src/components/mfa_form/totp_form.vue
+++ b/src/components/mfa_form/totp_form.vue
@ -58,16 +58,12 @@
    >
      <div class="alert error">
        {{ error }}
-        <button
-          class="button-unstyled"
+        <FAIcon
+          size="lg"
+          class="fa-scale-110 fa-old-padding"
+          icon="times"
          @click="clearError"
-        >
-          <FAIcon
-            size="lg"
-            class="fa-scale-110 fa-old-padding"
-            icon="times"
-          />
-        </button>
+        />
      </div>
    </div>
  </div>
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@ -99,9 +99,6 @@
    width: 100%;
    position: fixed;
    box-sizing: border-box;
-    a {
-      color: var(--topBarLink, $fallback--link);
-    }
  }

  .mobile-inner-nav {
--- a/src/components/mobile_post_status_button/mobile_post_status_button.js
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
@ -29,7 +29,7 @@ const MobilePostStatusButton = {
    }
    window.addEventListener('resize', this.handleOSK)
  },
-  unmounted () {
+  destroyed () {
    if (this.autohideFloatingPostButton) {
      this.deactivateFloatingPostButtonAutohide()
    }
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@ -1,12 +1,13 @@
 <template>
-  <button
-    v-if="isLoggedIn"
-    class="MobilePostButton button-default new-status-button"
-    :class="{ 'hidden': isHidden, 'always-show': isPersistent }"
-    @click="openPostForm"
-  >
-    <FAIcon icon="pen" />
-  </button>
+  <div v-if="isLoggedIn">
+    <button
+      class="button-default new-status-button"
+      :class="{ 'hidden': isHidden, 'always-show': isPersistent }"
+      @click="openPostForm"
+    >
+      <FAIcon icon="pen" />
+    </button>
+  </div>
 </template>

 <script src="./mobile_post_status_button.js"></script>
@ -14,27 +15,25 @@
 <style lang="scss">
@import '../../_variables.scss';

-.MobilePostButton {
-  &.button-default {
-    width: 5em;
-    height: 5em;
-    border-radius: 100%;
-    position: fixed;
-    bottom: 1.5em;
-    right: 1.5em;
-    // TODO: this needs its own color, it has to stand out enough and link color
-    // is not very optimal for this particular use.
-    background-color: $fallback--fg;
-    background-color: var(--btn, $fallback--fg);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
-    z-index: 10;
+.new-status-button {
+  width: 5em;
+  height: 5em;
+  border-radius: 100%;
+  position: fixed;
+  bottom: 1.5em;
+  right: 1.5em;
+  // TODO: this needs its own color, it has to stand out enough and link color
+  // is not very optimal for this particular use.
+  background-color: $fallback--fg;
+  background-color: var(--btn, $fallback--fg);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
+  z-index: 10;

-    transition: 0.35s transform;
-    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-  }
+  transition: 0.35s transform;
+  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

  &.hidden {
    transform: translateY(150%);
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@ -132,7 +132,7 @@
        </button>
      </template>
    </Popover>
-    <teleport to="#modal">
+    <portal to="modal">
      <DialogModal
        v-if="showDeleteUserDialog"
        :on-cancel="deleteUserDialog.bind(this, false)"
@ -156,7 +156,7 @@
          </button>
        </template>
      </DialogModal>
-    </teleport>
+    </portal>
  </div>
 </template>

--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@ -2,18 +2,7 @@

 // TODO Copypaste from Status, should unify it somehow
 .Notification {
-   border-bottom: 1px solid;
-   border-color: $fallback--border;
-   border-color: var(--border, $fallback--border);
-   word-wrap: break-word;
-   word-break: break-word;
-   --emoji-size: 14px;
-
-  &:hover {
-    --_still-image-img-visibility: visible;
-    --_still-image-canvas-visibility: hidden;
-    --_still-image-label-visibility: hidden;
-  }
+  --emoji-size: 14px;

  &.-muted {
    padding: 0.25em 0.6em;
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@ -1,7 +1,6 @@
 <template>
  <Status
    v-if="notification.type === 'mention'"
-    class="Notification"
    :compact="true"
    :statusoid="notification.status"
  />
@ -33,7 +32,7 @@
    >
      <a
        class="avatar-container"
-        :href="$router.resolve(userProfileLink).href"
+        :href="notification.from_profile.statusnet_profile_url"
        @click.stop.prevent.capture="toggleUserExpanded"
      >
        <UserAvatar
@ -65,16 +64,12 @@
              v-else
              class="username"
              :title="'@'+notification.from_profile.screen_name_ui"
-            >
-              {{ notification.from_profile.name }}
-            </span>
-            {{ ' ' }}
+            >{{ notification.from_profile.name }}</span>
            <span v-if="notification.type === 'like'">
              <FAIcon
                class="type-icon"
                icon="star"
              />
-              {{ ' ' }}
              <small>{{ $t('notifications.favorited_you') }}</small>
            </span>
            <span v-if="notification.type === 'repeat'">
@ -83,7 +78,6 @@
                icon="retweet"
                :title="$t('tool_tip.repeat')"
              />
-              {{ ' ' }}
              <small>{{ $t('notifications.repeated_you') }}</small>
            </span>
            <span v-if="notification.type === 'follow'">
@ -91,7 +85,6 @@
                class="type-icon"
                icon="user-plus"
              />
-              {{ ' ' }}
              <small>{{ $t('notifications.followed_you') }}</small>
            </span>
            <span v-if="notification.type === 'follow_request'">
@ -99,7 +92,6 @@
                class="type-icon"
                icon="user"
              />
-              {{ ' ' }}
              <small>{{ $t('notifications.follow_request') }}</small>
            </span>
            <span v-if="notification.type === 'move'">
@ -107,17 +99,13 @@
                class="type-icon"
                icon="suitcase-rolling"
              />
-              {{ ' ' }}
              <small>{{ $t('notifications.migrated_to') }}</small>
            </span>
            <span v-if="notification.type === 'pleroma:emoji_reaction'">
              <small>
-                <i18n-t
-                  scope="global"
-                  keypath="notifications.reacted_with"
-                >
+                <i18n path="notifications.reacted_with">
                  <span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
-                </i18n-t>
+                </i18n>
              </small>
            </span>
          </div>
@ -172,26 +160,18 @@
            v-if="notification.type === 'follow_request'"
            style="white-space: nowrap;"
          >
-            <button
-              class="button-unstyled"
+            <FAIcon
+              icon="check"
+              class="fa-scale-110 fa-old-padding follow-request-accept"
              :title="$t('tool_tip.accept_follow_request')"
              @click="approveUser()"
-            >
-              <FAIcon
-                icon="check"
-                class="fa-scale-110 fa-old-padding follow-request-accept"
-              />
-            </button>
-            <button
-              class="button-unstyled"
+            />
+            <FAIcon
+              icon="times"
+              class="fa-scale-110 fa-old-padding follow-request-reject"
              :title="$t('tool_tip.reject_follow_request')"
              @click="denyUser()"
-            >
-              <FAIcon
-                icon="times"
-                class="fa-scale-110 fa-old-padding follow-request-reject"
-              />
-            </button>
+            />
          </div>
        </div>
        <div
@ -203,9 +183,8 @@
          </router-link>
        </div>
        <template v-else>
-          <StatusContent
+          <status-content
            class="faint"
-            :compact="true"
            :status="notification.action"
          />
        </template>
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@ -37,6 +37,11 @@

 .notification {
  box-sizing: border-box;
+  border-bottom: 1px solid;
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
+  word-wrap: break-word;
+  word-break: break-word;

  &:hover .animated.Avatar {
    canvas {
@ -64,6 +69,8 @@
  }

  .follow-request-accept {
+    cursor: pointer;
+
    &:hover {
      color: $fallback--text;
      color: var(--text, $fallback--text);
@ -71,6 +78,8 @@
  }

  .follow-request-reject {
+    cursor: pointer;
+
    &:hover {
      color: $fallback--cRed;
      color: var(--cRed, $fallback--cRed);
--- a/src/components/opacity_input/opacity_input.vue
+++ b/src/components/opacity_input/opacity_input.vue
@ -11,21 +11,21 @@
    </label>
    <Checkbox
      v-if="typeof fallback !== 'undefined'"
-      :model-value="present"
+      :checked="present"
      :disabled="disabled"
      class="opt"
-      @update:modelValue="$emit('update:modelValue', !present ? fallback : undefined)"
+      @change="$emit('input', !present ? fallback : undefined)"
    />
    <input
      :id="name"
      class="input-number"
      type="number"
-      :value="modelValue || fallback"
+      :value="value || fallback"
      :disabled="!present || disabled"
      max="1"
      min="0"
      step=".05"
-      @input="$emit('update:modelValue', $event.target.value)"
+      @input="$emit('input', $event.target.value)"
    >
  </div>
 </template>
@ -37,12 +37,11 @@ export default {
    Checkbox
  },
  props: [
-    'name', 'modelValue', 'fallback', 'disabled'
+    'name', 'value', 'fallback', 'disabled'
  ],
-  emits: ['update:modelValue'],
  computed: {
    present () {
-      return typeof this.modelValue !== 'undefined'
+      return typeof this.value !== 'undefined'
    }
  }
 }
--- a/src/components/pinch_zoom/pinch_zoom.js
+++ b/src/components/pinch_zoom/pinch_zoom.js
@ -1,13 +0,0 @@
-import PinchZoom from '@kazvmoe-infra/pinch-zoom-element'
-
-export default {
-  methods: {
-    setTransform ({ scale, x, y }) {
-      this.$el.setTransform({ scale, x, y })
-    }
-  },
-  created () {
-    // Make lint happy
-    (() => PinchZoom)()
-  }
-}
--- a/src/components/pinch_zoom/pinch_zoom.vue
+++ b/src/components/pinch_zoom/pinch_zoom.vue
@ -1,11 +0,0 @@
-<template>
-  <pinch-zoom
-    class="pinch-zoom-parent"
-    v-bind="$attrs"
-    v-on="$listeners"
-  >
-    <slot />
-  </pinch-zoom>
-</template>
-
-<script src="./pinch_zoom.js"></script>
--- a/src/components/poll/poll.js
+++ b/src/components/poll/poll.js
@ -21,7 +21,7 @@ export default {
    }
    this.$store.dispatch('trackPoll', this.pollId)
  },
-  unmounted () {
+  destroyed () {
    this.$store.dispatch('untrackPoll', this.pollId)
  },
  computed: {
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@ -71,18 +71,13 @@
          {{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }}&nbsp;·&nbsp;
        </template>
      </div>
-      <span>
-        <i18n-t
-          scope="global"
-          :keypath="expired ? 'polls.expired' : 'polls.expires_in'"
-        >
-          <Timeago
-            :time="expiresAt"
-            :auto-update="60"
-            :now-threshold="0"
-          />
-        </i18n-t>
-      </span>
+      <i18n :path="expired ? 'polls.expired' : 'polls.expires_in'">
+        <Timeago
+          :time="expiresAt"
+          :auto-update="60"
+          :now-threshold="0"
+        />
+      </i18n>
    </div>
  </div>
 </template>
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@ -72,7 +72,6 @@
          :max="maxExpirationInCurrentUnit"
          @change="expiryAmountChange"
        >
-        {{ ' ' }}
        <Select
          v-model="expiryUnit"
          unstyled="true"
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@ -178,7 +178,7 @@ const Popover = {
  created () {
    document.addEventListener('click', this.onClickOutside)
  },
-  unmounted () {
+  destroyed () {
    document.removeEventListener('click', this.onClickOutside)
    this.hidePopover()
  }
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@ -33,7 +33,7 @@
@import '../../_variables.scss';

 .popover-trigger-button {
-  display: inline-block;
+  display: block;
 }

 .popover {
@ -149,30 +149,5 @@
    }

  }
-
-  .button-default.dropdown-item {
-    &,
-    i[class*=icon-] {
-      color: $fallback--text;
-      color: var(--btnText, $fallback--text);
-    }
-
-    &:active {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      color: $fallback--link;
-      color: var(--selectedMenuPopoverText, $fallback--link);
-    }
-
-    &:disabled {
-      color: $fallback--text;
-      color: var(--btnDisabledText, $fallback--text);
-    }
-
-    &.toggled {
-      color: $fallback--text;
-      color: var(--btnToggledText, $fallback--text);
-    }
-  }
 }
 </style>
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@ -4,7 +4,6 @@ import ScopeSelector from '../scope_selector/scope_selector.vue'
 import EmojiInput from '../emoji_input/emoji_input.vue'
 import PollForm from '../poll/poll_form.vue'
 import Attachment from '../attachment/attachment.vue'
-import Gallery from 'src/components/gallery/gallery.vue'
 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'
@ -78,12 +77,6 @@ const PostStatusForm = {
    'emojiPickerPlacement',
    'optimisticPosting'
  ],
-  emits: [
-    'posted',
-    'resize',
-    'mediaplay',
-    'mediapause'
-  ],
  components: {
    MediaUpload,
    EmojiInput,
@ -92,8 +85,7 @@ const PostStatusForm = {
    Checkbox,
    Select,
    Attachment,
-    StatusContent,
-    Gallery
+    StatusContent
  },
  mounted () {
    this.updateIdempotencyKey()
@ -396,21 +388,6 @@ const PostStatusForm = {
      this.newStatus.files.splice(index, 1)
      this.$emit('resize')
    },
-    editAttachment (fileInfo, newText) {
-      this.newStatus.mediaDescriptions[fileInfo.id] = newText
-    },
-    shiftUpMediaFile (fileInfo) {
-      const { files } = this.newStatus
-      const index = this.newStatus.files.indexOf(fileInfo)
-      files.splice(index, 1)
-      files.splice(index - 1, 0, fileInfo)
-    },
-    shiftDnMediaFile (fileInfo) {
-      const { files } = this.newStatus
-      const index = this.newStatus.files.indexOf(fileInfo)
-      files.splice(index, 1)
-      files.splice(index + 1, 0, fileInfo)
-    },
    uploadFailed (errString, templateArgs) {
      templateArgs = templateArgs || {}
      this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs)
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@ -18,12 +18,11 @@
        <FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
      </div>
      <div class="form-group">
-        <i18n-t
+        <i18n
          v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
-          keypath="post_status.account_not_locked_warning"
+          path="post_status.account_not_locked_warning"
          tag="p"
          class="visibility-notice"
-          scope="global"
        >
          <button
            class="button-unstyled -link"
@ -31,7 +30,7 @@
          >
            {{ $t('post_status.account_not_locked_warning_link') }}
          </button>
-        </i18n-t>
+        </i18n>
        <p
          v-if="!hideScopeNotice && newStatus.visibility === 'public'"
          class="visibility-notice notice-dismissible"
@ -282,32 +281,38 @@
        class="alert error"
      >
        Error: {{ error }}
-        <button
-          class="button-unstyled"
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="times"
          @click="clearError"
-        >
-          <FAIcon
-            class="fa-scale-110 fa-old-padding"
-            icon="times"
-          />
-        </button>
+        />
+      </div>
+      <div class="attachments">
+        <div
+          v-for="file in newStatus.files"
+          :key="file.url"
+          class="media-upload-wrapper"
+        >
+          <button
+            class="button-unstyled hider"
+            @click="removeMediaFile(file)"
+          >
+            <FAIcon icon="times" />
+          </button>
+          <attachment
+            :attachment="file"
+            :set-media="() => $store.dispatch('setMedia', newStatus.files)"
+            size="small"
+            allow-play="false"
+          />
+          <input
+            v-model="newStatus.mediaDescriptions[file.id]"
+            type="text"
+            :placeholder="$t('post_status.media_description')"
+            @keydown.enter.prevent=""
+          >
+        </div>
      </div>
-      <gallery
-        v-if="newStatus.files && newStatus.files.length > 0"
-        class="attachments"
-        :grid="true"
-        :nsfw="false"
-        :attachments="newStatus.files"
-        :descriptions="newStatus.mediaDescriptions"
-        :set-media="() => $store.dispatch('setMedia', newStatus.files)"
-        :editable="true"
-        :edit-attachment="editAttachment"
-        :remove-attachment="removeMediaFile"
-        :shift-up-attachment="newStatus.files.length > 1 && shiftUpMediaFile"
-        :shift-dn-attachment="newStatus.files.length > 1 && shiftDnMediaFile"
-        @play="$emit('mediaplay', attachment.id)"
-        @pause="$emit('mediapause', attachment.id)"
-      />
      <div
        v-if="newStatus.files.length > 0 && !disableSensitivityCheckbox"
        class="upload_settings"
@ -325,13 +330,26 @@
 <style lang="scss">
@import '../../_variables.scss';

+.tribute-container {
+  ul {
+    padding: 0px;
+    li {
+      display: flex;
+      align-items: center;
+    }
+  }
+  img {
+    padding: 3px;
+    width: 16px;
+    height: 16px;
+    border-radius: $fallback--avatarAltRadius;
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+  }
+}
+
 .post-status-form {
  position: relative;

-  .attachments {
-    margin-bottom: 0.5em;
-  }
-
  .form-bottom {
    display: flex;
    justify-content: space-between;
@ -489,6 +507,15 @@
    flex-direction: column;
  }

+   .attachments .media-upload-wrapper {
+    position: relative;
+
+    .attachment {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
  .btn {
    cursor: pointer;
  }
@ -589,4 +616,11 @@
    border: 2px dashed var(--text, $fallback--text);
  }
 }
+
+// todo: unify with attachment.vue (otherwise the uploaded images are not minified unless a status with an attachment was displayed before)
+img.media-upload, .media-upload-container > video {
+  line-height: 0;
+  max-height: 200px;
+  max-width: 100%;
+}
 </style>
--- a/src/components/public_and_external_timeline/public_and_external_timeline.js
+++ b/src/components/public_and_external_timeline/public_and_external_timeline.js
@ -9,7 +9,7 @@ const PublicAndExternalTimeline = {
  created () {
    this.$store.dispatch('startFetchingTimeline', { timeline: 'publicAndExternal' })
  },
-  unmounted () {
+  destroyed () {
    this.$store.dispatch('stopFetchingTimeline', 'publicAndExternal')
  }
 }
--- a/src/components/public_timeline/public_timeline.js
+++ b/src/components/public_timeline/public_timeline.js
@ -9,7 +9,7 @@ const PublicTimeline = {
  created () {
    this.$store.dispatch('startFetchingTimeline', { timeline: 'public' })
  },
-  unmounted () {
+  destroyed () {
    this.$store.dispatch('stopFetchingTimeline', 'public')
  }

--- a/src/components/range_input/range_input.vue
+++ b/src/components/range_input/range_input.vue
@ -15,7 +15,7 @@
      class="opt"
      type="checkbox"
      :checked="present"
-      @change="$emit('update:modelValue', !present ? fallback : undefined)"
+      @input="$emit('input', !present ? fallback : undefined)"
    >
    <label
      v-if="typeof fallback !== 'undefined'"
@ -26,23 +26,23 @@
      :id="name"
      class="input-number"
      type="range"
-      :value="modelValue || fallback"
+      :value="value || fallback"
      :disabled="!present || disabled"
      :max="max || hardMax || 100"
      :min="min || hardMin || 0"
      :step="step || 1"
-      @input="$emit('update:modelValue', $event.target.value)"
+      @input="$emit('input', $event.target.value)"
    >
    <input
      :id="name"
      class="input-number"
      type="number"
-      :value="modelValue || fallback"
+      :value="value || fallback"
      :disabled="!present || disabled"
      :max="hardMax"
      :min="hardMin"
      :step="step || 1"
-      @input="$emit('update:modelValue', $event.target.value)"
+      @input="$emit('input', $event.target.value)"
    >
  </div>
 </template>
@ -50,12 +50,11 @@
 <script>
 export default {
  props: [
-    'name', 'modelValue', 'fallback', 'disabled', 'label', 'max', 'min', 'step', 'hardMin', 'hardMax'
+    'name', 'value', 'fallback', 'disabled', 'label', 'max', 'min', 'step', 'hardMin', 'hardMax'
  ],
-  emits: ['update:modelValue'],
  computed: {
    present () {
-      return typeof this.modelValue !== 'undefined'
+      return typeof this.value !== 'undefined'
    }
  }
 }
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@ -1,9 +1,9 @@
-import useVuelidate from '@vuelidate/core'
-import { required, requiredIf, sameAs } from '@vuelidate/validators'
+import { validationMixin } from 'vuelidate'
+import { required, requiredIf, sameAs } from 'vuelidate/lib/validators'
 import { mapActions, mapState } from 'vuex'

 const registration = {
-  setup () { return { v$: useVuelidate() } },
+  mixins: [validationMixin],
  data: () => ({
    user: {
      email: '',
@ -24,7 +24,7 @@ const registration = {
        password: { required },
        confirm: {
          required,
-          sameAs: sameAs(this.user.password)
+          sameAsPassword: sameAs('password')
        },
        reason: { required: requiredIf(() => this.accountApprovalRequired) }
      }
@ -65,9 +65,9 @@ const registration = {
      this.user.captcha_token = this.captcha.token
      this.user.captcha_answer_data = this.captcha.answer_data

-      this.v$.$touch()
+      this.$v.$touch()

-      if (!this.v$.$invalid) {
+      if (!this.$v.$invalid) {
        try {
          await this.signUp(this.user)
          this.$router.push({ name: 'friends' })
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@ -12,7 +12,7 @@
          <div class="text-fields">
            <div
              class="form-group"
-              :class="{ 'form-group--error': v$.user.username.$error }"
+              :class="{ 'form-group--error': $v.user.username.$error }"
            >
              <label
                class="form--label"
@ -20,18 +20,18 @@
              >{{ $t('login.username') }}</label>
              <input
                id="sign-up-username"
-                v-model.trim="v$.user.username.$model"
+                v-model.trim="$v.user.username.$model"
                :disabled="isPending"
                class="form-control"
                :placeholder="$t('registration.username_placeholder')"
              >
            </div>
            <div
-              v-if="v$.user.username.$dirty"
+              v-if="$v.user.username.$dirty"
              class="form-error"
            >
              <ul>
-                <li v-if="!v$.user.username.required">
+                <li v-if="!$v.user.username.required">
                  <span>{{ $t('registration.validations.username_required') }}</span>
                </li>
              </ul>
@ -39,7 +39,7 @@

            <div
              class="form-group"
-              :class="{ 'form-group--error': v$.user.fullname.$error }"
+              :class="{ 'form-group--error': $v.user.fullname.$error }"
            >
              <label
                class="form--label"
@ -47,18 +47,18 @@
              >{{ $t('registration.fullname') }}</label>
              <input
                id="sign-up-fullname"
-                v-model.trim="v$.user.fullname.$model"
+                v-model.trim="$v.user.fullname.$model"
                :disabled="isPending"
                class="form-control"
                :placeholder="$t('registration.fullname_placeholder')"
              >
            </div>
            <div
-              v-if="v$.user.fullname.$dirty"
+              v-if="$v.user.fullname.$dirty"
              class="form-error"
            >
              <ul>
-                <li v-if="!v$.user.fullname.required">
+                <li v-if="!$v.user.fullname.required">
                  <span>{{ $t('registration.validations.fullname_required') }}</span>
                </li>
              </ul>
@ -66,7 +66,7 @@

            <div
              class="form-group"
-              :class="{ 'form-group--error': v$.user.email.$error }"
+              :class="{ 'form-group--error': $v.user.email.$error }"
            >
              <label
                class="form--label"
@ -74,18 +74,18 @@
              >{{ $t('registration.email') }}</label>
              <input
                id="email"
-                v-model="v$.user.email.$model"
+                v-model="$v.user.email.$model"
                :disabled="isPending"
                class="form-control"
                type="email"
              >
            </div>
            <div
-              v-if="v$.user.email.$dirty"
+              v-if="$v.user.email.$dirty"
              class="form-error"
            >
              <ul>
-                <li v-if="!v$.user.email.required">
+                <li v-if="!$v.user.email.required">
                  <span>{{ $t('registration.validations.email_required') }}</span>
                </li>
              </ul>
@ -107,7 +107,7 @@

            <div
              class="form-group"
-              :class="{ 'form-group--error': v$.user.password.$error }"
+              :class="{ 'form-group--error': $v.user.password.$error }"
            >
              <label
                class="form--label"
@ -122,11 +122,11 @@
              >
            </div>
            <div
-              v-if="v$.user.password.$dirty"
+              v-if="$v.user.password.$dirty"
              class="form-error"
            >
              <ul>
-                <li v-if="!v$.user.password.required">
+                <li v-if="!$v.user.password.required">
                  <span>{{ $t('registration.validations.password_required') }}</span>
                </li>
              </ul>
@ -134,7 +134,7 @@

            <div
              class="form-group"
-              :class="{ 'form-group--error': v$.user.confirm.$error }"
+              :class="{ 'form-group--error': $v.user.confirm.$error }"
            >
              <label
                class="form--label"
@ -149,14 +149,14 @@
              >
            </div>
            <div
-              v-if="v$.user.confirm.$dirty"
+              v-if="$v.user.confirm.$dirty"
              class="form-error"
            >
              <ul>
-                <li v-if="!v$.user.confirm.required">
+                <li v-if="!$v.user.confirm.required">
                  <span>{{ $t('registration.validations.password_confirmation_required') }}</span>
                </li>
-                <li v-if="!v$.user.confirm.sameAsPassword">
+                <li v-if="!$v.user.confirm.sameAsPassword">
                  <span>{{ $t('registration.validations.password_confirmation_match') }}</span>
                </li>
              </ul>
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@ -1,3 +1,4 @@
+import Vue from 'vue'
 import { unescape, flattenDeep } from 'lodash'
 import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js'
 import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
@ -26,12 +27,8 @@ import './rich_content.scss'
 *
 * Apart from that one small hiccup with emit in render this _should_ be vue3-ready
 */
-export default {
+export default Vue.component('RichContent', {
  name: 'RichContent',
-  components: {
-    MentionsLine,
-    HashtagLink
-  },
  props: {
    // Original html content
    html: {
@ -61,7 +58,7 @@ export default {
    }
  },
  // NEVER EVER TOUCH DATA INSIDE RENDER
-  render () {
+  render (h) {
    // Pre-process HTML
    const { newHtml: html } = preProcessPerLine(this.html, this.greentext)
    let currentMentions = null // Current chain of mentions, we group all mentions together
@ -79,19 +76,18 @@ export default {

    const renderImage = (tag) => {
      return <StillImage
-        {...getAttrs(tag)}
+        {...{ attrs: getAttrs(tag) }}
        class="img"
      />
    }

    const renderHashtag = (attrs, children, encounteredTextReverse) => {
-      const { index, ...linkData } = getLinkData(attrs, children, tagsIndex++)
+      const linkData = getLinkData(attrs, children, tagsIndex++)
      writtenTags.push(linkData)
      if (!encounteredTextReverse) {
        lastTags.push(linkData)
      }
-      const { url, tag, content } = linkData
-      return <HashtagLink url={url} tag={tag} content={content}/>
+      return <HashtagLink {...{ props: linkData }}/>
    }

    const renderMention = (attrs, children) => {
@ -124,8 +120,7 @@ export default {
          // don't include spaces when processing mentions - we'll include them
          // in MentionsLine
          lastSpacing = item
-          // Don't remove last space in a container (fixes poast mentions)
-          return (index !== array.length - 1) && (currentMentions !== null) ? item.trim() : item
+          return currentMentions !== null ? item.trim() : item
        }

        currentMentions = null
@ -226,7 +221,7 @@ export default {
              attrs.target = '_blank'
              const newChildren = [...children].reverse().map(processItemReverse).reverse()

-              return <a {...attrs}>
+              return <a {...{ attrs }}>
                { newChildren }
              </a>
            }
@ -239,7 +234,7 @@ export default {
          const newChildren = Array.isArray(children)
            ? [...children].reverse().map(processItemReverse).reverse()
            : children
-          return <Tag {...getAttrs(opener)}>
+          return <Tag {...{ attrs: getAttrs(opener) }}>
            { newChildren }
          </Tag>
        } else {
@ -270,7 +265,7 @@ export default {

    return result
  }
-}
+})

 const getLinkData = (attrs, children, index) => {
  const stripTags = (item) => {
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@ -16,7 +16,6 @@
        class="fa-scale-110 fa-old-padding"
      />
    </button>
-    {{ ' ' }}
    <button
      v-if="showPrivate"
      class="button-unstyled scope"
@ -30,7 +29,6 @@
        class="fa-scale-110 fa-old-padding"
      />
    </button>
-    {{ ' ' }}
    <button
      v-if="showUnlisted"
      class="button-unstyled scope"
@ -44,7 +42,6 @@
        class="fa-scale-110 fa-old-padding"
      />
    </button>
-    {{ ' ' }}
    <button
      v-if="showPublic"
      class="button-unstyled scope"
--- a/src/components/search/search.js
+++ b/src/components/search/search.js
@ -1,7 +1,6 @@
 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 map from 'lodash/map'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@ -18,8 +17,7 @@ const Search = {
  components: {
    FollowCard,
    Conversation,
-    Status,
-    TabSwitcher
+    Status
  },
  props: [
    'query'
--- a/src/components/select/select.js
+++ b/src/components/select/select.js
@ -8,9 +8,12 @@ library.add(
 )

 export default {
-  emits: ['update:modelValue'],
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
  props: [
-    'modelValue',
+    'value',
    'disabled',
    'unstyled',
    'kind'
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@ -1,3 +1,4 @@
+
 <template>
  <label
    class="Select input"
@ -5,12 +6,11 @@
  >
    <select
      :disabled="disabled"
-      :value="modelValue"
-      @change="$emit('update:modelValue', $event.target.value)"
+      :value="value"
+      @change="$emit('change', $event.target.value)"
    >
      <slot />
    </select>
-    {{ ' ' }}
    <FAIcon
      class="select-down-icon"
      icon="chevron-down"
@ -23,8 +23,7 @@
 <style lang="scss">
@import '../../_variables.scss';

-/* TODO fix order of styles */
-label.Select {
+.Select {
  padding: 0;

  select {
@ -52,7 +51,6 @@ label.Select {
    bottom: 0;
    right: 5px;
    height: 100%;
-    width: 0.875em;
    color: $fallback--text;
    color: var(--inputText, $fallback--text);
    line-height: 28px;
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@ -6,9 +6,9 @@
    >
      <div class="selectable-list-checkbox-wrapper">
        <Checkbox
-          :model-value="allSelected"
+          :checked="allSelected"
          :indeterminate="someSelected"
-          @update:model-value="toggleAll"
+          @change="toggleAll"
        >
          {{ $t('selectable_list.select_all') }}
        </Checkbox>
@ -31,8 +31,8 @@
        >
          <div class="selectable-list-checkbox-wrapper">
            <Checkbox
-              :model-value="isSelected(item)"
-              @update:model-value="checked => toggle(checked, item)"
+              :checked="isSelected(item)"
+              @change="checked => toggle(checked, item)"
            />
          </div>
          <slot
--- a/src/components/settings_modal/helpers/boolean_setting.js
+++ b/src/components/settings_modal/helpers/boolean_setting.js
@ -1,17 +1,14 @@
 import { get, set } from 'lodash'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ModifiedIndicator from './modified_indicator.vue'
-import ServerSideIndicator from './server_side_indicator.vue'
 export default {
  components: {
    Checkbox,
-    ModifiedIndicator,
-    ServerSideIndicator
+    ModifiedIndicator
  },
  props: [
    'path',
-    'disabled',
-    'expert'
+    'disabled'
  ],
  computed: {
    pathDefault () {
@ -29,14 +26,8 @@ export default {
    defaultState () {
      return get(this.$parent, this.pathDefault)
    },
-    isServerSide () {
-      return this.path.startsWith('serverSide_')
-    },
    isChanged () {
-      return !this.path.startsWith('serverSide_') && this.state !== this.defaultState
-    },
-    matchesExpertLevel () {
-      return (this.expert || 0) <= this.$parent.expertLevel
+      return this.state !== this.defaultState
    }
  },
  methods: {
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@ -1,12 +1,11 @@
 <template>
  <label
-    v-if="matchesExpertLevel"
    class="BooleanSetting"
  >
    <Checkbox
-      :model-value="state"
+      :checked="state"
      :disabled="disabled"
-      @update:modelValue="update"
+      @change="update"
    >
      <span
        v-if="!!$slots.default"
@ -14,8 +13,8 @@
      >
        <slot />
      </span>
-      {{ ' ' }}
-      <ModifiedIndicator :changed="isChanged" /><ServerSideIndicator :server-side="isServerSide" /> </Checkbox>
+      <ModifiedIndicator :changed="isChanged" />
+    </Checkbox>
  </label>
 </template>

--- a/src/components/settings_modal/helpers/choice_setting.js
+++ b/src/components/settings_modal/helpers/choice_setting.js
@ -1,18 +1,15 @@
 import { get, set } from 'lodash'
 import Select from 'src/components/select/select.vue'
 import ModifiedIndicator from './modified_indicator.vue'
-import ServerSideIndicator from './server_side_indicator.vue'
 export default {
  components: {
    Select,
-    ModifiedIndicator,
-    ServerSideIndicator
+    ModifiedIndicator
  },
  props: [
    'path',
    'disabled',
-    'options',
-    'expert'
+    'options'
  ],
  computed: {
    pathDefault () {
@ -30,14 +27,8 @@ export default {
    defaultState () {
      return get(this.$parent, this.pathDefault)
    },
-    isServerSide () {
-      return this.path.startsWith('serverSide_')
-    },
    isChanged () {
-      return !this.path.startsWith('serverSide_') && this.state !== this.defaultState
-    },
-    matchesExpertLevel () {
-      return (this.expert || 0) <= this.$parent.expertLevel
+      return this.state !== this.defaultState
    }
  },
  methods: {
--- a/src/components/settings_modal/helpers/choice_setting.vue
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@ -1,14 +1,12 @@
 <template>
  <label
-    v-if="matchesExpertLevel"
    class="ChoiceSetting"
  >
    <slot />
-    {{ ' ' }}
    <Select
-      :model-value="state"
+      :value="state"
      :disabled="disabled"
-      @update:modelValue="update"
+      @change="update"
    >
      <option
        v-for="option in options"
@ -20,7 +18,6 @@
      </option>
    </Select>
    <ModifiedIndicator :changed="isChanged" />
-    <ServerSideIndicator :server-side="isServerSide" />
  </label>
 </template>

--- a/src/components/settings_modal/helpers/integer_setting.js
+++ b/src/components/settings_modal/helpers/integer_setting.js
@ -1,41 +0,0 @@
-import { get, set } from 'lodash'
-import ModifiedIndicator from './modified_indicator.vue'
-export default {
-  components: {
-    ModifiedIndicator
-  },
-  props: {
-    path: String,
-    disabled: Boolean,
-    min: Number,
-    expert: [Number, String]
-  },
-  computed: {
-    pathDefault () {
-      const [firstSegment, ...rest] = this.path.split('.')
-      return [firstSegment + 'DefaultValue', ...rest].join('.')
-    },
-    state () {
-      const value = get(this.$parent, this.path)
-      if (value === undefined) {
-        return this.defaultState
-      } else {
-        return value
-      }
-    },
-    defaultState () {
-      return get(this.$parent, this.pathDefault)
-    },
-    isChanged () {
-      return this.state !== this.defaultState
-    },
-    matchesExpertLevel () {
-      return (this.expert || 0) <= this.$parent.expertLevel
-    }
-  },
-  methods: {
-    update (e) {
-      set(this.$parent, this.path, parseInt(e.target.value))
-    }
-  }
-}
--- a/src/components/settings_modal/helpers/integer_setting.vue
+++ b/src/components/settings_modal/helpers/integer_setting.vue
@ -1,24 +0,0 @@
-<template>
-  <span
-    v-if="matchesExpertLevel"
-    class="IntegerSetting"
-  >
-    <label :for="path">
-      <slot />
-    </label>
-    <input
-      :id="path"
-      class="number-input"
-      type="number"
-      step="1"
-      :disabled="disabled"
-      :min="min || 0"
-      :value="state"
-      @change="update"
-    >
-    {{ ' ' }}
-    <ModifiedIndicator :changed="isChanged" />
-  </span>
-</template>
-
-<script src="./integer_setting.js"></script>
--- a/src/components/settings_modal/helpers/server_side_indicator.vue
+++ b/src/components/settings_modal/helpers/server_side_indicator.vue
@ -1,51 +0,0 @@
-<template>
-  <span
-    v-if="serverSide"
-    class="ServerSideIndicator"
-  >
-    <Popover
-      trigger="hover"
-    >
-      <template v-slot:trigger>
-        &nbsp;
-        <FAIcon
-          icon="server"
-          :aria-label="$t('settings.setting_server_side')"
-        />
-      </template>
-      <template v-slot:content>
-        <div class="serverside-tooltip">
-          {{ $t('settings.setting_server_side') }}
-        </div>
-      </template>
-    </Popover>
-  </span>
-</template>
-
-<script>
-import Popover from 'src/components/popover/popover.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faServer } from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faServer
-)
-
-export default {
-  components: { Popover },
-  props: ['serverSide']
-}
-</script>
-
-<style lang="scss">
-.ServerSideIndicator {
-  display: inline-block;
-  position: relative;
-
-  .serverside-tooltip {
-    margin: 0.5em 1em;
-    min-width: 10em;
-    text-align: center;
-  }
-}
-</style>
--- a/src/components/settings_modal/helpers/shared_computed_object.js
+++ b/src/components/settings_modal/helpers/shared_computed_object.js
@ -1,5 +1,4 @@
 import { defaultState as configDefaultState } from 'src/modules/config.js'
-import { defaultState as serverSideConfigDefaultState } from 'src/modules/serverSideConfig.js'

 const SharedComputedObject = () => ({
  user () {
@ -23,14 +22,6 @@ const SharedComputedObject = () => ({
      }
    }])
    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
-  ...Object.keys(serverSideConfigDefaultState)
-    .map(key => ['serverSide_' + key, {
-      get () { return this.$store.state.serverSideConfig[key] },
-      set (value) {
-        this.$store.dispatch('setServerSideOption', { name: key, value })
-      }
-    }])
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
  // Special cases (need to transform values or perform actions first)
  useStreamingApi: {
    get () { return this.$store.getters.mergedConfig.useStreamingApi },
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@ -3,7 +3,6 @@ import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
 import AsyncComponentError from 'src/components/async_component_error/async_component_error.vue'
 import getResettableAsyncComponent from 'src/services/resettable_async_component.js'
 import Popover from '../popover/popover.vue'
-import Checkbox from 'src/components/checkbox/checkbox.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { cloneDeep } from 'lodash'
 import {
@ -52,12 +51,11 @@ const SettingsModal = {
  components: {
    Modal,
    Popover,
-    Checkbox,
    SettingsModalContent: getResettableAsyncComponent(
      () => import('./settings_modal_content.vue'),
      {
-        loadingComponent: PanelLoading,
-        errorComponent: AsyncComponentError,
+        loading: PanelLoading,
+        error: AsyncComponentError,
        delay: 0
      }
    )
@ -161,15 +159,6 @@ const SettingsModal = {
    },
    modalPeeked () {
      return this.$store.state.interface.settingsModalState === 'minimized'
-    },
-    expertLevel: {
-      get () {
-        return this.$store.state.config.expertLevel > 0
-      },
-      set (value) {
-        console.log(value)
-        this.$store.dispatch('setOption', { name: 'expertLevel', value: value ? 1 : 0 })
-      }
    }
  }
 }
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@ -48,16 +48,4 @@
      }
    }
  }
-
-  .settings-footer {
-    display: flex;
-    >* {
-      margin-right: 0.5em;
-    }
-
-    .extra-content {
-      display: flex;
-      flex-grow: 1;
-    }
-  }
 }
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@ -11,7 +11,7 @@
          {{ $t('settings.settings') }}
        </span>
        <transition name="fade">
-          <div v-if="currentSaveStateNotice">
+          <template v-if="currentSaveStateNotice">
            <div
              v-if="currentSaveStateNotice.error"
              class="alert error"
@ -27,7 +27,7 @@
            >
              {{ $t('settings.saving_ok') }}
            </div>
-          </div>
+          </template>
        </transition>
        <button
          class="btn button-default"
@ -53,7 +53,7 @@
      <div class="panel-body">
        <SettingsModalContent v-if="modalOpenedOnce" />
      </div>
-      <div class="panel-footer settings-footer">
+      <div class="panel-footer">
        <Popover
          class="export"
          trigger="click"
@ -68,7 +68,6 @@
              :title="$t('general.close')"
            >
              <span>{{ $t("settings.file_export_import.backup_restore") }}</span>
-              {{ ' ' }}
              <FAIcon
                icon="chevron-down"
              />
@ -109,17 +108,6 @@
            </div>
          </template>
        </Popover>
-
-        <Checkbox
-          :model-value="!!expertLevel"
-          @update:modelValue="expertLevel = Number($event)"
-        >
-          {{ $t("settings.expert_mode") }}
-        </Checkbox>
-        <span
-          id="unscrolled-content"
-          class="extra-content"
-        />
      </div>
    </div>
  </Modal>
--- a/Show more
+++ b/Show more
Author	SHA1	Message	Date
Alex Gleason	05f7577e09	Add Twitter compatibility redirects	2021-12-27 13:31:23 -06:00
Alex Gleason	e9d66248b5	Add compatibility redirects for Mastodon and Soapbox FE	2021-12-27 13:25:12 -06:00