Smarter scope copy (#28 )

Reviewed-on: AkkomaGang/pleroma-fe#28 Co-authored-by: sfr <sol@solfisher.com> Co-committed-by: sfr <sol@solfisher.com>
Merge pull request '[#30 ] increase spacing of icons' (#31 ) from icon-spacing into develop
2022-07-12 09:04:28 +00:00 · 2022-07-10 17:11:44 +00:00 · 2022-07-10 18:05:55 +01:00 · 2022-07-05 13:42:17 +00:00 · 2022-07-05 14:37:26 +01:00 · 2022-07-05 14:28:23 +01:00
333 changed files with 18457 additions and 6434 deletions
--- a/.babelrc
+++ b/.babelrc
@ -1,5 +1,5 @@
 {
  "presets": ["@babel/preset-env"],
-  "plugins": ["@babel/plugin-transform-runtime", "lodash", "@vue/babel-plugin-transform-vue-jsx"],
+  "plugins": ["@babel/plugin-transform-runtime", "lodash", "@vue/babel-plugin-jsx"],
  "comments": false
 }
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -21,6 +21,8 @@ module.exports = {
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'vue/require-prop-types': 0
+    'vue/require-prop-types': 0,
+    'vue/no-unused-vars': 0,
+    'no-tabs': 0
  }
 }
--- a/.gitignore
+++ b/.gitignore
@ -7,3 +7,4 @@ test/e2e/reports
 selenium-debug.log
 .idea/
 config/local.json
+config/local.*.json
--- 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:10
+image: node:12

 stages:
  - lint
--- a/.woodpecker.yml
+++ b/.woodpecker.yml
@ -0,0 +1,54 @@
+pipeline:
+  lint:
+    when:
+      event:
+      - push
+      - pull_request
+    image: node:16
+    commands:
+    - yarn
+    - yarn lint
+    - yarn stylelint
+
+  test:
+    when:
+      event:
+      - push
+      - pull_request
+    image: node:16
+    commands:
+    - apt update
+    - apt install firefox-esr -y --no-install-recommends
+    - yarn 
+    - yarn unit
+
+  build:
+    when:
+      event:
+      - push
+      branch:
+      - develop
+    image: node:16
+    commands:
+    - yarn
+    - yarn build
+
+  release:
+    when:
+      event:
+      - push
+      branch:
+      - develop
+    image: node:16
+    secrets:
+    - SCW_ACCESS_KEY
+    - SCW_SECRET_KEY
+    - SCW_DEFAULT_ORGANIZATION_ID
+    commands:
+      - apt-get update && apt-get install -y rclone wget zip
+      - wget https://github.com/scaleway/scaleway-cli/releases/download/v2.5.1/scaleway-cli_2.5.1_linux_amd64
+      - mv scaleway-cli_2.5.1_linux_amd64 scaleway-cli
+      - chmod +x scaleway-cli
+      - ./scaleway-cli object config install type=rclone
+      - zip akkoma-fe.zip -r dist
+      - rclone copyto akkoma-fe.zip scaleway:akkoma-updates/frontend/akkoma-fe.zip
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -3,6 +3,57 @@ 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
+- Added frontend ui for account migration
+
+
+## [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
@ -15,6 +66,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### 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,6 +4,7 @@ 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
@ -29,16 +30,16 @@ module.exports = {
    }
  },
  resolve: {
-    extensions: ['.js', '.vue'],
+    extensions: ['.js', '.jsx', '.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')
+      'components': path.resolve(__dirname, '../src/components'),
+      'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
    }
  },
  module: {
@ -58,9 +59,28 @@ 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$/,
-        use: 'vue-loader'
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            isCustomElement(tag) {
+              if (tag === 'pinch-zoom') {
+                return true
+              }
+              return false
+            }
+          }
+        }
      },
      {
        test: /\.jsx?$/,
@ -95,6 +115,7 @@ 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,7 +21,9 @@ module.exports = merge(baseWebpackConfig, {
    new webpack.DefinePlugin({
      'process.env': config.dev.env,
      'COMMIT_HASH': JSON.stringify('DEV'),
-      'DEV_OVERRIDES': JSON.stringify(config.dev.settings)
+      'DEV_OVERRIDES': JSON.stringify(config.dev.settings),
+      '__VUE_OPTIONS_API__': true,
+      '__VUE_PROD_DEVTOOLS__': false
    }),
    // 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,7 +36,9 @@ var webpackConfig = merge(baseWebpackConfig, {
    new webpack.DefinePlugin({
      'process.env': env,
      'COMMIT_HASH': JSON.stringify(commitHash),
-      'DEV_OVERRIDES': JSON.stringify(undefined)
+      'DEV_OVERRIDES': JSON.stringify(undefined),
+      '__VUE_OPTIONS_API__': true,
+      '__VUE_PROD_DEVTOOLS__': false
    }),
    // extract css into its own file
    new MiniCssExtractPlugin({
--- a/config/index.js
+++ b/config/index.js
@ -52,7 +52,10 @@ module.exports = {
        target,
        changeOrigin: true,
        cookieDomainRewrite: 'localhost',
-        ws: true
+        ws: true,
+        headers: {
+          'Origin': target
+        }
      },
      '/oauth/revoke': {
        target,
--- a/index.html
+++ b/index.html
@ -3,6 +3,12 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
+    <title>Pleroma</title>
+    <link rel="stylesheet" href="/static/font/css/fontello.css">
+    <link rel="stylesheet" href="/static/font/css/animation.css">
+    <link rel="stylesheet" href="/static/font/tiresias.css">
+    <link rel="stylesheet" href="/static/font/css/lato.css">
+    <link rel="stylesheet" href="/static/mfm.css">
    <!--server-generated-meta-->
    <link rel="icon" type="image/png" href="/favicon.png">
  </head>
--- a/package.json
+++ b/package.json
@ -16,107 +16,113 @@
    "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
  },
  "dependencies": {
-    "@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"
+    "@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.41",
+    "@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",
+    "js-cookie": "^3.0.1",
+    "localforage": "1.10.0",
+    "mfm-js": "^0.22.1",
+    "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"
  },
  "devDependencies": {
-    "@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.0.0",
-    "@vue/babel-plugin-transform-vue-jsx": "^1.1.2",
-    "@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",
+    "@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",
    "selenium-server": "2.53.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"
+    "semver": "5.7.1",
+    "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.20.0"
  },
  "engines": {
    "node": ">= 4.0.0",
--- a/renovate.json
+++ b/renovate.json
@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base"
+  ]
+}
--- a/src/App.js
+++ b/src/App.js
@ -1,6 +1,5 @@
 import UserPanel from './components/user_panel/user_panel.vue'
 import NavPanel from './components/nav_panel/nav_panel.vue'
-import Notifications from './components/notifications/notifications.vue'
 import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
 import FeaturesPanel from './components/features_panel/features_panel.vue'
 import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
@ -16,13 +15,14 @@ import PostStatusModal from './components/post_status_modal/post_status_modal.vu
 import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
 import { windowWidth, windowHeight } from './services/window_utils/window_utils'
 import { mapGetters } from 'vuex'
+import { defineAsyncComponent } from 'vue'

 export default {
  name: 'app',
  components: {
    UserPanel,
    NavPanel,
-    Notifications,
+    Notifications: defineAsyncComponent(() => import('./components/notifications/notifications.vue')),
    InstanceSpecificPanel,
    FeaturesPanel,
    WhoToFollowPanel,
@ -46,10 +46,20 @@ export default {
    this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
    window.addEventListener('resize', this.updateMobileState)
  },
-  destroyed () {
+  unmounted () {
    window.removeEventListener('resize', this.updateMobileState)
  },
  computed: {
+    classes () {
+      return [
+        {
+          '-reverse': this.reverseLayout,
+          '-no-sticky-headers': this.noSticky,
+          '-has-new-post-button': this.newPostButtonShown
+        },
+        '-' + this.layoutType
+      ]
+    },
    currentUser () { return this.$store.state.users.currentUser },
    userBackground () { return this.currentUser.background_image },
    instanceBackground () {
@ -65,35 +75,45 @@ export default {
        }
      }
    },
-    shout () { return this.$store.state.shout.channel.state === 'joined' },
+    shout () { return this.$store.state.shout.joined },
    suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
    showInstanceSpecificPanel () {
      return this.$store.state.instance.showInstanceSpecificPanel &&
        !this.$store.getters.mergedConfig.hideISP &&
        this.$store.state.instance.instanceSpecificPanelContent
    },
+    isChats () {
+      return this.$route.name === 'chat' || this.$route.name === 'chats'
+    },
+    newPostButtonShown () {
+      if (this.isChats) return false
+      return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile'
+    },
    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
+    shoutboxPosition () {
+      return this.$store.getters.mergedConfig.alwaysShowNewPostButton || false
+    },
    hideShoutbox () {
      return this.$store.getters.mergedConfig.hideShoutbox
    },
-    isMobileLayout () { return this.$store.state.interface.mobileLayout },
+    layoutType () { return this.$store.state.interface.layoutType },
    privateMode () { return this.$store.state.instance.private },
-    sidebarAlign () {
-      return {
-        'order': this.$store.getters.mergedConfig.sidebarRight ? 99 : 0
+    reverseLayout () {
+      const { thirdColumnMode, sidebarRight: reverseSetting } = this.$store.getters.mergedConfig
+      if (this.layoutType !== 'wide') {
+        return reverseSetting
+      } else {
+        return thirdColumnMode === 'notifications' ? reverseSetting : !reverseSetting
      }
    },
+    noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
+    showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars },
    ...mapGetters(['mergedConfig'])
  },
  methods: {
    updateMobileState () {
-      const mobileLayout = windowWidth() <= 800
-      const layoutHeight = windowHeight()
-      const changed = mobileLayout !== this.isMobileLayout
-      if (changed) {
-        this.$store.dispatch('setMobileLayout', mobileLayout)
-      }
-      this.$store.dispatch('setLayoutHeight', layoutHeight)
+      this.$store.dispatch('setLayoutWidth', windowWidth())
+      this.$store.dispatch('setLayoutHeight', windowHeight())
    }
  }
 }
--- a/src/App.scss
+++ b/src/App.scss
--- a/src/App.vue
+++ b/src/App.vue
@ -1,39 +1,40 @@
 <template>
  <div
-    id="app"
+    id="app-loaded"
    :style="bgStyle"
  >
    <div
      id="app_bg_wrapper"
      class="app-bg-wrapper"
    />
-    <MobileNav v-if="isMobileLayout" />
+    <MobileNav v-if="layoutType === 'mobile'" />
    <DesktopNav v-else />
-    <div class="app-bg-wrapper app-container-wrapper" />
+    <Notifications v-if="currentUser" />
    <div
      id="content"
-      class="container underlay"
+      class="app-layout container"
+      :class="classes"
    >
+      <div class="underlay" />
      <div
-        class="sidebar-flexer mobile-hidden"
-        :style="sidebarAlign"
+        id="sidebar"
+        class="column -scrollable"
+        :class="{ '-show-scrollbar': showScrollbars }"
      >
-        <div class="sidebar-bounds">
-          <div class="sidebar-scroller">
-            <div class="sidebar">
-              <user-panel />
-              <div v-if="!isMobileLayout">
-                <nav-panel />
-                <instance-specific-panel v-if="showInstanceSpecificPanel" />
-                <features-panel v-if="!currentUser && showFeaturesPanel" />
-                <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
-                <notifications v-if="currentUser" />
-              </div>
-            </div>
-          </div>
-        </div>
+        <user-panel />
+        <template v-if="layoutType !== 'mobile'">
+          <nav-panel />
+          <instance-specific-panel v-if="showInstanceSpecificPanel" />
+          <features-panel v-if="!currentUser && showFeaturesPanel" />
+          <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
+          <div id="notifs-sidebar" />
+        </template>
      </div>
-      <div class="main">
+      <div
+        id="main-scroller"
+        class="column main"
+        :class="{ '-full-height': isChats }"
+      >
        <div
          v-if="!currentUser"
          class="login-hint panel panel-default"
@ -47,18 +48,24 @@
        </div>
        <router-view />
      </div>
-      <media-modal />
+      <div
+        id="notifs-column"
+        class="column -scrollable"
+        :class="{ '-show-scrollbar': showScrollbars }"
+      />
    </div>
+    <media-modal />
    <shout-panel
      v-if="currentUser && shout && !hideShoutbox"
      :floating="true"
      class="floating-shout mobile-hidden"
+      :class="{ '-left': shoutboxPosition }"
    />
    <MobilePostStatusButton />
    <UserReportingModal />
    <PostStatusModal />
    <SettingsModal />
-    <portal-target name="modal" />
+    <div id="modal" />
    <GlobalNoticeList />
  </div>
 </template>
--- a/src/_variables.scss
+++ b/src/_variables.scss
@ -30,3 +30,5 @@ $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/assets/nsfw.png
+++ b/src/assets/nsfw.png
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@ -1,8 +1,14 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import routes from './routes'
+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 { windowWidth } from '../services/window_utils/window_utils'
+import routes from './routes'
+import VBodyScrollLock from 'src/directives/body_scroll_lock'
+
+import { windowWidth, windowHeight } 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'
 import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
@ -115,6 +121,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
  copyInstanceOption('nsfwCensorImage')
  copyInstanceOption('background')
  copyInstanceOption('hidePostStats')
+  copyInstanceOption('hideBotIndication')
  copyInstanceOption('hideUserStats')
  copyInstanceOption('hideFilteredStatuses')
  copyInstanceOption('logo')
@ -325,8 +332,8 @@ const checkOAuthToken = async ({ store }) => {
 }

 const afterStoreSetup = async ({ store, i18n }) => {
-  const width = windowWidth()
-  store.dispatch('setMobileLayout', width <= 800)
+  store.dispatch('setLayoutWidth', windowWidth())
+  store.dispatch('setLayoutHeight', windowHeight())

  FaviconService.initFaviconService()

@ -366,25 +373,32 @@ const afterStoreSetup = async ({ store, i18n }) => {
  getTOS({ store })
  getStickers({ store })

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

-  /* eslint-disable no-new */
-  return new Vue({
-    router,
-    store,
-    i18n,
-    el: '#app',
-    render: h => h(App)
-  })
+  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
 }

 export default afterStoreSetup
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@ -20,6 +20,9 @@ import ShoutPanel from 'components/shout_panel/shout_panel.vue'
 import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
 import About from 'components/about/about.vue'
 import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
+import Lists from 'components/lists/lists.vue'
+import ListTimeline from 'components/list_timeline/list_timeline.vue'
+import ListEdit from 'components/list_edit/list_edit.vue'

 export default (store) => {
  const validateAuthenticatedRoute = (to, from, next) => {
@ -46,7 +49,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
    },
@ -62,14 +65,17 @@ export default (store) => {
    { name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
    { name: 'registration-token', path: '/registration/:token', component: Registration },
    { name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
-    { name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute },
+    { name: 'notifications', path: '/:username/notifications', component: Notifications, props: () => ({ disableTeleport: true }), beforeEnter: validateAuthenticatedRoute },
    { name: 'login', path: '/login', component: AuthForm },
    { name: 'shout-panel', path: '/shout-panel', component: ShoutPanel, props: () => ({ floating: false }) },
    { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
    { name: '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 },
+    { name: 'lists', path: '/lists', component: Lists },
+    { name: 'list-timeline', path: '/lists/:id', component: ListTimeline },
+    { name: 'list-edit', path: '/lists/:id/edit', component: ListEdit }
  ]

  if (store.state.instance.pleromaChatMessagesAvailable) {
--- a/src/components/about/about.vue
+++ b/src/components/about/about.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar">
+  <div class="column-inner">
    <instance-specific-panel v-if="showInstanceSpecificPanel" />
    <staff-panel />
    <terms-of-service-panel />
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@ -40,7 +40,7 @@ const AccountActions = {
    openChat () {
      this.$router.push({
        name: 'chat',
-        params: { recipient_id: this.user.id }
+        params: { username: this.$store.state.users.currentUser.screen_name, recipient_id: this.user.id }
      })
    }
  },
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@ -74,10 +74,6 @@
 <style lang="scss">
@import '../../_variables.scss';
 .AccountActions {
-  button.dropdown-item {
-    margin-left: 0;
-  }
-
  .ellipsis-button {
    width: 2.5em;
    margin: -0.5em 0;
--- a/src/components/async_component_error/async_component_error.vue
+++ b/src/components/async_component_error/async_component_error.vue
@ -19,6 +19,7 @@

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

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

 const Attachment = {
  props: [
    'attachment',
+    'description',
+    'hideDescription',
    'nsfw',
    'size',
-    'allowPlay',
    'setMedia',
-    'naturalSizeLoad'
+    'remove',
+    'shiftUp',
+    'shiftDn',
+    'edit'
  ],
  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
+      showHidden: false,
+      flashLoaded: false,
+      showDescription: false
    }
  },
  components: {
@ -49,8 +66,23 @@ 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' || this.type === 'unknown'
+      return this.size === 'hide'
+    },
+    useContainFit () {
+      return this.$store.getters.mergedConfig.useContainFit
    },
    placeholderName () {
      if (this.attachment.description === '' || !this.attachment.description) {
@ -74,24 +106,33 @@ const Attachment = {
      return this.nsfw && this.hideNsfwLocal && !this.showHidden
    },
    isEmpty () {
-      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'
+      return (this.type === 'html' && !this.attachment.oembed)
    },
    useModal () {
-      const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio']
-        : this.mergedConfig.playVideosInModal
-          ? ['image', 'video']
-          : ['image']
+      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
+      }
      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') {
@ -100,12 +141,37 @@ const Attachment = {
    },
    openModal (event) {
      if (this.useModal) {
-        event.stopPropagation()
-        event.preventDefault()
-        this.setMedia()
-        this.$store.dispatch('setCurrent', this.attachment)
+        this.$emit('setMedia')
+        this.$store.dispatch('setCurrentMedia', this.attachment)
+      } else if (this.type === 'unknown') {
+        window.open(this.attachment.url)
      }
    },
+    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) &&
@ -132,7 +198,27 @@ const Attachment = {
    onImageLoad (image) {
      const width = image.naturalWidth
      const height = image.naturalHeight
-      this.naturalSizeLoad && this.naturalSizeLoad({ width, height })
+      this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height })
+    },
+    resize (e) {
+      const target = e.target || e
+      if (!(target instanceof window.Element)) { return }
+
+      // Reset to default height for empty form, nothing else to do here.
+      if (target.value === '') {
+        target.style.height = null
+        this.$emit('resize')
+        return
+      }
+
+      const paddingString = getComputedStyle(target)['padding']
+      // remove -px suffix
+      const padding = Number(paddingString.substring(0, paddingString.length - 2))
+
+      target.style.height = 'auto'
+      const newHeight = Math.floor(target.scrollHeight - padding * 2)
+      target.style.height = `${newHeight}px`
+      this.$emit('resize', newHeight)
    }
  }
 }
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@ -0,0 +1,282 @@
+@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: 200px;
+    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: pre-line;
+      word-break: break-word;
+      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;
+
+    box-sizing: content-box;
+    overflow: hidden;
+    transition: min-height 200ms 100ms;
+
+    padding-bottom: var(--_padding);
+    height: calc(var(--post-line-height) * 1em);
+    min-height: calc(var(--post-line-height) * 1em);
+    resize: none;
+
+    &.scrollable-form {
+      overflow-y: auto;
+    }
+  }
+
+  & .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: 1rem;
+        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,7 +1,8 @@
 <template>
-  <div
+  <button
    v-if="usePlaceholder"
-    :class="{ 'fullwidth': fullwidth }"
+    class="Attachment -placeholder button-unstyled"
+    :class="classNames"
    @click="openModal"
  >
    <a
@ -11,318 +12,258 @@
      :href="attachment.url"
      :alt="attachment.description"
      :title="attachment.description"
+      @click.prevent
    >
      <FAIcon :icon="placeholderIconClass" />
-      <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
+      <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ edit ? '' : placeholderName }}
    </a>
-  </div>
+    <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
    v-else
-    v-show="!isEmpty"
-    class="attachment"
-    :class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
+    class="Attachment"
+    :class="classNames"
  >
-    <a
-      v-if="hidden"
-      class="image-attachment"
-      :href="attachment.url"
-      :alt="attachment.description"
-      :title="attachment.description"
-      @click.prevent.stop="toggleHidden"
-    >
-      <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"
-      />
-    </a>
-
-    <a
-      v-if="type === 'video' && !hidden"
-      class="video-container"
-      :class="{'small': isSmall}"
-      :href="allowPlay ? undefined : attachment.url"
-      @click="openModal"
-    >
-      <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"
+      v-show="!isEmpty"
+      class="attachment-wrapper"
    >
-      <div
-        v-if="attachment.thumb_url"
-        class="image"
+      <a
+        v-if="hidden"
+        class="image-container"
+        :href="attachment.url"
+        :alt="attachment.description"
+        :title="attachment.description"
+        @click.prevent.stop="toggleHidden"
      >
-        <img :src="attachment.thumb_url">
+        <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>
-      <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"
-    />
+      <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 }"
+    >
+      <textarea
+        v-if="edit"
+        v-model="localDescription"
+        class="description-field"
+        :placeholder="$t('post_status.media_description')"
+        rows="1"
+        cols="1"
+        @input="resize"
+      />
+      <p v-else>
+        {{ localDescription }}
+      </p>
+    </div>
  </div>
 </template>

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

-<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>
+<style src="./attachment.scss" lang="scss"></style>
--- a/src/components/auth_form/auth_form.js
+++ b/src/components/auth_form/auth_form.js
@ -1,3 +1,4 @@
+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'
@ -5,8 +6,8 @@ import { mapGetters } from 'vuex'

 const AuthForm = {
  name: 'AuthForm',
-  render (createElement) {
-    return createElement('component', { is: this.authForm })
+  render () {
+    return h(resolveComponent(this.authForm))
  },
  computed: {
    authForm () {
--- a/src/components/basic_user_card/basic_user_card.js
+++ b/src/components/basic_user_card/basic_user_card.js
@ -1,5 +1,6 @@
 import UserCard from '../user_card/user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import RichContent from 'src/components/rich_content/rich_content.jsx'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'

 const BasicUserCard = {
@ -13,7 +14,8 @@ const BasicUserCard = {
  },
  components: {
    UserCard,
-    UserAvatar
+    UserAvatar,
+    RichContent
  },
  methods: {
    toggleUserExpanded () {
--- 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.native="toggleUserExpanded"
+        @click.prevent="toggleUserExpanded"
      />
    </router-link>
    <div
@ -25,17 +25,11 @@
        :title="user.name"
        class="basic-user-card-user-name"
      >
-        <!-- eslint-disable vue/no-v-html -->
-        <span
-          v-if="user.name_html"
+        <RichContent
          class="basic-user-card-user-name-value"
-          v-html="user.name_html"
+          :html="user.name"
+          :emoji="user.emoji"
        />
-        <!-- eslint-enable vue/no-v-html -->
-        <span
-          v-else
-          class="basic-user-card-user-name-value"
-        >{{ user.name }}</span>
      </div>
      <div>
        <router-link
--- a/src/components/bookmark_timeline/bookmark_timeline.js
+++ b/src/components/bookmark_timeline/bookmark_timeline.js
@ -9,7 +9,7 @@ const Bookmarks = {
  components: {
    Timeline
  },
-  destroyed () {
+  unmounted () {
    this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
  }
 }
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@ -6,7 +6,7 @@ import PostStatusForm from '../post_status_form/post_status_form.vue'
 import ChatTitle from '../chat_title/chat_title.vue'
 import chatService from '../../services/chat_service/chat_service.js'
 import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
-import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight, isScrollable } from './chat_layout_utils.js'
+import { getScrollPosition, getNewTopPosition, isBottomedOut, isScrollable } from './chat_layout_utils.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
  faChevronDown,
@ -20,7 +20,7 @@ library.add(
 )

 const BOTTOMED_OUT_OFFSET = 10
-const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
+const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10
 const SAFE_RESIZE_TIME_OFFSET = 100
 const MARK_AS_READ_DELAY = 1500
 const MAX_RETRIES = 10
@ -43,7 +43,7 @@ const Chat = {
  },
  created () {
    this.startFetching()
-    window.addEventListener('resize', this.handleLayoutChange)
+    window.addEventListener('resize', this.handleResize)
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
@ -52,15 +52,11 @@ const Chat = {
    }

    this.$nextTick(() => {
-      this.updateScrollableContainerHeight()
      this.handleResize()
    })
-    this.setChatLayout()
  },
-  destroyed () {
+  unmounted () {
    window.removeEventListener('scroll', this.handleScroll)
-    window.removeEventListener('resize', this.handleLayoutChange)
-    this.unsetChatLayout()
    if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
    this.$store.dispatch('clearCurrentChat')
  },
@ -96,8 +92,7 @@ const Chat = {
    ...mapState({
      backendInteractor: state => state.api.backendInteractor,
      mastoUserSocketStatus: state => state.api.mastoUserSocketStatus,
-      mobileLayout: state => state.interface.mobileLayout,
-      layoutHeight: state => state.interface.layoutHeight,
+      mobileLayout: state => state.interface.layoutType === 'mobile',
      currentUser: state => state.users.currentUser
    })
  },
@ -115,9 +110,6 @@ const Chat = {
    '$route': function () {
      this.startFetching()
    },
-    layoutHeight () {
-      this.handleResize({ expand: true })
-    },
    mastoUserSocketStatus (newValue) {
      if (newValue === WSConnectionStatus.JOINED) {
        this.fetchChat({ isFirstFetch: true })
@ -132,7 +124,6 @@ const Chat = {
    onFilesDropped () {
      this.$nextTick(() => {
        this.handleResize()
-        this.updateScrollableContainerHeight()
      })
    },
    handleVisibilityChange () {
@ -142,43 +133,7 @@ const Chat = {
        }
      })
    },
-    setChatLayout () {
-      //   This is a hacky way to adjust the global layout to the mobile chat (without modifying the rest of the app).
-      //   This layout prevents empty spaces from being visible at the bottom
-      //   of the chat on iOS Safari (`safe-area-inset`) when
-      //   - the on-screen keyboard appears and the user starts typing
-      //   - the user selects the text inside the input area
-      //   - the user selects and deletes the text that is multiple lines long
-      //   TODO: unify the chat layout with the global layout.
-      let html = document.querySelector('html')
-      if (html) {
-        html.classList.add('chat-layout')
-      }
-
-      this.$nextTick(() => {
-        this.updateScrollableContainerHeight()
-      })
-    },
-    unsetChatLayout () {
-      let html = document.querySelector('html')
-      if (html) {
-        html.classList.remove('chat-layout')
-      }
-    },
-    handleLayoutChange () {
-      this.$nextTick(() => {
-        this.updateScrollableContainerHeight()
-        this.scrollDown()
-      })
-    },
-    // Ensures the proper position of the posting form in the mobile layout (the mobile browser panel does not overlap or hide it)
-    updateScrollableContainerHeight () {
-      const header = this.$refs.header
-      const footer = this.$refs.footer
-      const inner = this.mobileLayout ? window.document.body : this.$refs.inner
-      this.scrollableContainerHeight = scrollableContainerHeight(inner, header, footer) + 'px'
-    },
-    // Preserves the scroll position when OSK appears or the posting form changes its height.
+    // "Sticks" scroll to bottom instead of top, helps with OSK resizing the viewport
    handleResize (opts = {}) {
      const { expand = false, delayed = false } = opts

@ -190,29 +145,20 @@ const Chat = {
      }

      this.$nextTick(() => {
-        this.updateScrollableContainerHeight()
-
-        const { offsetHeight = undefined } = this.lastScrollPosition
-        this.lastScrollPosition = getScrollPosition(this.$refs.scrollable)
-
+        const { offsetHeight = undefined } = getScrollPosition()
        const diff = this.lastScrollPosition.offsetHeight - offsetHeight
-        if (diff < 0 || (!this.bottomedOut() && expand)) {
+        if (diff !== 0 || (!this.bottomedOut() && expand)) {
          this.$nextTick(() => {
-            this.updateScrollableContainerHeight()
-            this.$refs.scrollable.scrollTo({
-              top: this.$refs.scrollable.scrollTop - diff,
-              left: 0
-            })
+            window.scrollTo({ top: window.scrollY + diff })
          })
        }
+        this.lastScrollPosition = getScrollPosition()
      })
    },
    scrollDown (options = {}) {
      const { behavior = 'auto', forceRead = false } = options
-      const scrollable = this.$refs.scrollable
-      if (!scrollable) { return }
      this.$nextTick(() => {
-        scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
+        window.scrollTo({ top: document.documentElement.scrollHeight, behavior })
      })
      if (forceRead) {
        this.readChat()
@ -228,11 +174,10 @@ const Chat = {
      })
    },
    bottomedOut (offset) {
-      return isBottomedOut(this.$refs.scrollable, offset)
+      return isBottomedOut(offset)
    },
    reachedTop () {
-      const scrollable = this.$refs.scrollable
-      return scrollable && scrollable.scrollTop <= 0
+      return window.scrollY <= 0
    },
    cullOlderCheck () {
      window.setTimeout(() => {
@ -263,10 +208,9 @@ const Chat = {
      }
    }, 200),
    handleScrollUp (positionBeforeLoading) {
-      const positionAfterLoading = getScrollPosition(this.$refs.scrollable)
-      this.$refs.scrollable.scrollTo({
-        top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
-        left: 0
+      const positionAfterLoading = getScrollPosition()
+      window.scrollTo({
+        top: getNewTopPosition(positionBeforeLoading, positionAfterLoading)
      })
    },
    fetchChat ({ isFirstFetch = false, fetchLatest = false, maxId }) {
@ -285,22 +229,18 @@ const Chat = {
            chatService.clear(chatMessageService)
          }

-          const positionBeforeUpdate = getScrollPosition(this.$refs.scrollable)
+          const positionBeforeUpdate = getScrollPosition()
          this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => {
            this.$nextTick(() => {
              if (fetchOlderMessages) {
                this.handleScrollUp(positionBeforeUpdate)
              }

-              if (isFirstFetch) {
-                this.updateScrollableContainerHeight()
-              }
-
              // In vertical screens, the first batch of fetched messages may not always take the
              // full height of the scrollable container.
              // If this is the case, we want to fetch the messages until the scrollable container
              // is fully populated so that the user has the ability to scroll up and load the history.
-              if (!isScrollable(this.$refs.scrollable) && messages.length > 0) {
+              if (!isScrollable() && messages.length > 0) {
                this.fetchChat({ maxId: this.currentChatMessageService.minId })
              }
            })
@ -336,9 +276,6 @@ const Chat = {
        this.handleResize()
        // When the posting form size changes because of a media attachment, we need an extra resize
        // to account for the potential delay in the DOM update.
-        setTimeout(() => {
-          this.updateScrollableContainerHeight()
-        }, SAFE_RESIZE_TIME_OFFSET)
        this.scrollDown({ forceRead: true })
      })
    },
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@ -1,28 +1,22 @@
 .chat-view {
  display: flex;
-  height: calc(100vh - 60px);
-  width: 100%;
-
-  .chat-title {
-    // prevents chat header jumping on when the user avatar loads
-    height: 28px;
-  }
+  height: 100%;

  .chat-view-inner {
    height: auto;
    width: 100%;
    overflow: visible;
    display: flex;
-    margin: 0.5em 0.5em 0 0.5em;
  }

  .chat-view-body {
+    box-sizing: border-box;
    background-color: var(--chatBg, $fallback--bg);
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: visible;
-    min-height: 100%;
+    min-height: calc(100vh - var(--navbar-height));
    margin: 0 0 0 0;
    border-radius: 10px 10px 0 0;
    border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
@ -32,36 +26,32 @@
    }
  }

-  .scrollable-message-list {
+  .message-list {
    padding: 0 0.8em;
    height: 100%;
-    overflow-y: scroll;
-    overflow-x: hidden;
    display: flex;
    flex-direction: column;
+    justify-content: end;
  }

  .footer {
    position: sticky;
    bottom: 0;
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
+    z-index: 1;
  }

  .chat-view-heading {
-    align-items: center;
-    justify-content: space-between;
-    top: 50px;
-    display: flex;
-    z-index: 2;
-    position: sticky;
-    overflow: hidden;
+    grid-template-columns: auto minmax(50%, 1fr);
  }

  .go-back-button {
-    cursor: pointer;
-    width: 28px;
    text-align: center;
-    padding: 0.6em;
-    margin: -0.6em 0.6em -0.6em -0.6em;
+    line-height: 1;
+    height: 100%;
+    align-self: start;
+    width: var(--__panel-heading-height-inner);
  }

  .jump-to-bottom-button {
@ -115,56 +105,4 @@
      }
    }
  }
-
-  @media all and (max-width: 800px) {
-    height: 100%;
-    overflow: hidden;
-
-    .chat-view-inner {
-      overflow: hidden;
-      height: 100%;
-      margin-top: 0;
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    .chat-view-body {
-      display: flex;
-      min-height: auto;
-      overflow: hidden;
-      height: 100%;
-      margin: 0;
-      border-radius: 0;
-    }
-
-    .chat-view-heading {
-      box-sizing: border-box;
-      position: static;
-      z-index: 9999;
-      top: 0;
-      margin-top: 0;
-      border-radius: 0;
-
-      /* This practically overlays the panel heading color over panel background
-       * color. This is needed because we allow transparent panel background and
-       * it doesn't work well in this "disjointed panel header" case
-       */
-      background:
-        linear-gradient(to top, var(--panel), var(--panel)),
-        linear-gradient(to top, var(--bg), var(--bg));
-      height: 50px;
-    }
-
-    .scrollable-message-list {
-      display: unset;
-      overflow-y: scroll;
-      overflow-x: hidden;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    .footer {
-      position: sticky;
-      bottom: auto;
-    }
-  }
 }
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@ -2,23 +2,22 @@
  <div class="chat-view">
    <div class="chat-view-inner">
      <div
-        id="nav"
        ref="inner"
        class="panel-default panel chat-view-body"
      >
        <div
          ref="header"
-          class="panel-heading chat-view-heading mobile-hidden"
+          class="panel-heading -sticky chat-view-heading"
        >
-          <a
-            class="go-back-button"
+          <button
+            class="button-unstyled go-back-button"
            @click="goBack"
          >
            <FAIcon
              size="lg"
              icon="chevron-left"
            />
-          </a>
+          </button>
          <div class="title text-center">
            <ChatTitle
              :user="recipient"
@ -26,73 +25,69 @@
            />
          </div>
        </div>
-        <template>
-          <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>
-            <div
-              v-else
-              class="chat-loading-error"
-            >
-              <div class="alert error">
-                {{ $t('chats.error_loading_chat') }}
-              </div>
-            </div>
-          </div>
-          <div
-            ref="footer"
-            class="panel-body footer"
-          >
-            <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
+          class="message-list"
+          :style="{ height: scrollableContainerHeight }"
+        >
+          <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>
-        </template>
+        </div>
+        <div
+          ref="footer"
+          class="panel-body footer"
+        >
+          <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>
      </div>
    </div>
  </div>
--- a/src/components/chat/chat_layout_utils.js
+++ b/src/components/chat/chat_layout_utils.js
@ -1,9 +1,9 @@
 // Captures a scroll position
-export const getScrollPosition = (el) => {
+export const getScrollPosition = () => {
  return {
-    scrollTop: el.scrollTop,
-    scrollHeight: el.scrollHeight,
-    offsetHeight: el.offsetHeight
+    scrollTop: window.scrollY,
+    scrollHeight: document.documentElement.scrollHeight,
+    offsetHeight: window.innerHeight
  }
 }

@ -13,21 +13,12 @@ export const getNewTopPosition = (previousPosition, newPosition) => {
  return previousPosition.scrollTop + (newPosition.scrollHeight - previousPosition.scrollHeight)
 }

-export const isBottomedOut = (el, offset = 0) => {
-  if (!el) { return }
-  const scrollHeight = el.scrollTop + offset
-  const totalHeight = el.scrollHeight - el.offsetHeight
+export const isBottomedOut = (offset = 0) => {
+  const scrollHeight = window.scrollY + offset
+  const totalHeight = document.documentElement.scrollHeight - window.innerHeight
  return totalHeight <= scrollHeight
 }
-
-// Height of the scrollable container. The dynamic height is needed to ensure the mobile browser panel doesn't overlap or hide the posting form.
-export const scrollableContainerHeight = (inner, header, footer) => {
-  return inner.offsetHeight - header.clientHeight - footer.clientHeight
-}
-
 // Returns whether or not the scrollbar is visible.
-export const isScrollable = (el) => {
-  if (!el) return
-
-  return el.scrollHeight > el.clientHeight
+export const isScrollable = () => {
+  return document.documentElement.scrollHeight > window.innerHeight
 }
--- a/src/components/chat_list/chat_list.vue
+++ b/src/components/chat_list/chat_list.vue
@ -6,7 +6,7 @@
    v-else
    class="chat-list panel panel-default"
  >
-    <div class="panel-heading">
+    <div class="panel-heading -sticky">
      <span class="title">
        {{ $t("chats.chats") }}
      </span>
--- a/src/components/chat_list_item/chat_list_item.js
+++ b/src/components/chat_list_item/chat_list_item.js
@ -1,5 +1,5 @@
 import { mapState } from 'vuex'
-import StatusContent from '../status_content/status_content.vue'
+import StatusBody from '../status_content/status_content.vue'
 import fileType from 'src/services/file_type/file_type.service'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import AvatarList from '../avatar_list/avatar_list.vue'
@ -16,7 +16,7 @@ const ChatListItem = {
    AvatarList,
    Timeago,
    ChatTitle,
-    StatusContent
+    StatusBody
  },
  computed: {
    ...mapState({
@ -38,12 +38,14 @@ const ChatListItem = {
    },
    messageForStatusContent () {
      const message = this.chat.lastMessage
+      const messageEmojis = message ? message.emojis : []
      const isYou = message && message.account_id === this.currentUser.id
      const content = message ? (this.attachmentInfo || message.content) : ''
      const messagePreview = isYou ? `<i>${this.$t('chats.you')}</i> ${content}` : content
      return {
        summary: '',
-        statusnet_html: messagePreview,
+        emojis: messageEmojis,
+        raw_html: messagePreview,
        text: messagePreview,
        attachments: []
      }
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/src/components/chat_list_item/chat_list_item.scss
@ -43,7 +43,7 @@
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 1;
-    line-height: 1.4em;
+    line-height: var(--post-line-height);
  }

  .chat-preview {
@ -77,18 +77,15 @@
    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
  }

-  .StatusContent {
-    img.emoji {
-      width: 1.4em;
-      height: 1.4em;
-    }
+  .chat-preview-body {
+    --emoji-size: 1.4em;
  }

  .time-wrapper {
-    line-height: 1.4em;
+    line-height: var(--post-line-height);
  }

-  .single-line {
+  .chat-preview-body {
    padding-right: 1em;
  }
 }
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/src/components/chat_list_item/chat_list_item.vue
@ -29,7 +29,8 @@
        </div>
      </div>
      <div class="chat-preview">
-        <StatusContent
+        <StatusBody
+          class="chat-preview-body"
          :status="messageForStatusContent"
          :single-line="true"
        />
--- a/src/components/chat_message/chat_message.js
+++ b/src/components/chat_message/chat_message.js
@ -27,6 +27,7 @@ const ChatMessage = {
    'chatViewItem',
    'hoveredMessageChain'
  ],
+  emits: ['hover'],
  components: {
    Popover,
    Attachment,
@ -57,8 +58,9 @@ const ChatMessage = {
    messageForStatusContent () {
      return {
        summary: '',
-        statusnet_html: this.message.content,
-        text: this.message.content,
+        emojis: this.message.emojis,
+        raw_html: this.message.content || '',
+        text: this.message.content || '',
        attachments: this.message.attachments
      }
    },
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@ -1,6 +1,7 @@
@import '../../_variables.scss';

 .chat-message-wrapper {
+
  &.hovered-message-chain {
    .animated.Avatar {
      canvas {
@ -40,6 +41,12 @@
  .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 {
@ -62,10 +69,6 @@
    &.with-media {
      width: 100%;

-      .gallery-row {
-        overflow: hidden;
-      }
-
      .status {
        width: 100%;
      }
@ -89,8 +92,9 @@
  }

  .without-attachment {
-    .status-content {
-      &::after {
+    .message-content {
+      // TODO figure out how to do it properly
+      .RichContent::after {
        margin-right: 5.4em;
        content: " ";
        display: inline-block;
@ -162,6 +166,7 @@
  .visible {
    opacity: 1;
  }
+
 }

 .chat-message-date-separator {
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@ -71,6 +71,7 @@
              </Popover>
            </div>
            <StatusContent
+              class="message-content"
              :status="messageForStatusContent"
              :full-content="true"
            >
--- a/src/components/chat_new/chat_new.scss
+++ b/src/components/chat_new/chat_new.scss
@ -22,10 +22,10 @@
  }

  .go-back-button {
-    cursor: pointer;
-    width: 28px;
    text-align: center;
-    padding: 0.6em;
-    margin: -0.6em 0.6em -0.6em -0.6em;
+    line-height: 1;
+    height: 100%;
+    align-self: start;
+    width: var(--__panel-heading-height-inner);
  }
 }
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@ -1,21 +1,20 @@
 <template>
  <div
-    id="nav"
    class="panel-default panel chat-new"
  >
    <div
      ref="header"
      class="panel-heading"
    >
-      <a
-        class="go-back-button"
+      <button
+        class="button-unstyled go-back-button"
        @click="goBack"
      >
        <FAIcon
          size="lg"
          icon="chevron-left"
        />
-      </a>
+      </button>
    </div>
    <div class="input-wrap">
      <div class="input-search">
--- a/src/components/chat_title/chat_title.js
+++ b/src/components/chat_title/chat_title.js
@ -1,11 +1,12 @@
-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 Vue.component('chat-title', {
+export default {
  name: 'ChatTitle',
  components: {
-    UserAvatar
+    UserAvatar,
+    RichContent
  },
  props: [
    'user', 'withAvatar'
@ -23,4 +24,4 @@ export default Vue.component('chat-title', {
      return generateProfileLink(user.id, user.screen_name)
    }
  }
-})
+}
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@ -1,25 +1,26 @@
 <template>
-  <!-- eslint-disable vue/no-v-html -->
  <div
    class="chat-title"
    :title="title"
  >
    <router-link
      v-if="withAvatar && user"
+      class="avatar-container"
      :to="getUserProfileLink(user)"
    >
      <UserAvatar
+        class="titlebar-avatar"
        :user="user"
-        width="23px"
-        height="23px"
      />
    </router-link>
-    <span
+    <RichContent
+      v-if="user"
      class="username"
-      v-html="htmlTitle"
+      :title="'@'+(user && user.screen_name_ui)"
+      :html="htmlTitle"
+      :emoji="user.emoji || []"
    />
  </div>
-  <!-- eslint-enable vue/no-v-html -->
 </template>

 <script src="./chat_title.js"></script>
@ -32,7 +33,8 @@
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
-  align-items: center;
+
+  --emoji-size: 14px;

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

-  .Avatar {
-    width: 23px;
-    height: 23px;
-    margin-right: 0.5em;
+  .avatar-container {
+    align-self: center;
+    line-height: 1;
+  }

+  .titlebar-avatar {
+    margin-right: 0.5em;
+    height: 1.5em;
+    width: 1.5em;
    border-radius: $fallback--avatarAltRadius;
    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);

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

 <script>
 export default {
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
+  emits: ['update:modelValue'],
  props: [
-    'checked',
+    'modelValue',
    '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"
-      :checked="present"
+      :model-value="present"
      :disabled="disabled"
      class="opt"
-      @change="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
+      @update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
    />
    <div class="input color-input-field">
      <input
        :id="name + '-t'"
        class="textColor unstyled"
        type="text"
-        :value="value || fallback"
+        :value="modelValue || fallback"
        :disabled="!present || disabled"
-        @input="$emit('input', $event.target.value)"
+        @input="$emit('update:modelValue', $event.target.value)"
      >
      <input
        v-if="validColor"
        :id="name"
        class="nativeColor unstyled"
        type="color"
-        :value="value || fallback"
+        :value="modelValue || fallback"
        :disabled="!present || disabled"
-        @input="$emit('input', $event.target.value)"
+        @input="$emit('update:modelValue', $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"
-    value: {
+    modelValue: {
      required: false,
      type: String,
      default: undefined
@ -91,18 +91,19 @@ export default {
      default: true
    }
  },
+  emits: ['update:modelValue'],
  computed: {
    present () {
-      return typeof this.value !== 'undefined'
+      return typeof this.modelValue !== 'undefined'
    },
    validColor () {
-      return hex2rgb(this.value || this.fallback)
+      return hex2rgb(this.modelValue || this.fallback)
    },
    transparentColor () {
-      return this.value === 'transparent'
+      return this.modelValue === 'transparent'
    },
    computedColor () {
-      return this.value && this.value.startsWith('--')
+      return this.modelValue && this.modelValue.startsWith('--')
    }
  }
 }
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@ -1,5 +1,19 @@
 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
@ -35,7 +49,10 @@ const conversation = {
  data () {
    return {
      highlight: null,
-      expanded: false
+      expanded: false,
+      threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
+      statusContentPropertiesObject: {},
+      inlineDivePosition: null
    }
  },
  props: [
@ -53,12 +70,50 @@ const conversation = {
    }
  },
  computed: {
-    hideStatus () {
-      if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
-        return this.virtualHidden && this.$refs.statusComponent[0].suspendable
-      } else {
-        return this.virtualHidden
+    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
    },
    status () {
      return this.$store.state.statuses.allStatusesObject[this.statusId]
@ -90,6 +145,121 @@ 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
@ -109,15 +279,71 @@ 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
+    Status,
+    ThreadTree
  },
  watch: {
    statusId (newVal, oldVal) {
@ -132,6 +358,8 @@ const conversation = {
    expanded (value) {
      if (value) {
        this.fetchConversation()
+      } else {
+        this.resetDisplayState()
      }
    },
    virtualHidden (value) {
@ -161,8 +389,8 @@ const conversation = {
    getReplies (id) {
      return this.replies[id] || []
    },
-    focused (id) {
-      return (this.isExpanded) && id === this.statusId
+    getHighlight () {
+      return this.isExpanded ? this.highlight : null
    },
    setHighlight (id) {
      if (!id) return
@ -170,15 +398,139 @@ 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
@ -7,7 +7,7 @@
  >
    <div
      v-if="isExpanded"
-      class="panel-heading conversation-heading"
+      class="panel-heading conversation-heading -sticky"
    >
      <span class="title"> {{ $t('timeline.conversation') }} </span>
      <button
@ -18,24 +18,176 @@
        {{ $t('timeline.collapse') }}
      </button>
    </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 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"
+            scope="global"
+            @click.prevent="diveToTopLevel"
+          >
+            <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>
  </div>
  <div
    v-else
@ -49,6 +201,48 @@
@import '../../_variables.scss';

 .Conversation {
+  z-index: 1;
+
+  .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;
@ -56,12 +250,33 @@
    border-radius: 0;
  }

-  &.-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);
-    }
+  .thread-ancestor-has-other-replies .conversation-status,
+  .thread-ancestor:last-child .conversation-status,
+  .thread-ancestor:last-child .thread-ancestor-dive-box,
+  &:last-child .conversation-status,
+  &.-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.status-fadein {
+    margin: calc(var(--status-margin, $status-margin) / 2);
  }
 }
 </style>
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@ -1,9 +1,7 @@
@import '../../_variables.scss';

 .DesktopNav {
-  height: 50px;
  width: 100%;
-  position: fixed;

  a {
    color: var(--topBarLink, $fallback--link);
@ -11,7 +9,7 @@

  .inner-nav {
    display: grid;
-    grid-template-rows: 50px;
+    grid-template-rows: var(--navbar-height);
    grid-template-columns: 2fr auto 2fr;
    grid-template-areas: "sitename logo actions";
    box-sizing: border-box;
@ -20,7 +18,7 @@
    max-width: 980px;
  }

-  &.-logoLeft {
+  &.-logoLeft .inner-nav {
    grid-template-columns: auto 2fr 2fr;
    grid-template-areas: "logo sitename actions";
  }
@ -77,16 +75,21 @@

    img {
      display: inline-block;
-      height: 50px;
+      height: var(--navbar-height);
    }
  }

  .nav-icon {
-    margin-left: 0.2em;
+    margin-left: 1em;
    width: 2em;
    height: 100%;
+    font-size: 130%;
    text-align: center;

+    &-logout {
+      margin-left: 2em;
+    }
+
    .svg-inline--fa {
      color: $fallback--link;
      color: var(--topBarLink, $fallback--link);
@ -103,8 +106,8 @@

  .item {
    flex: 1;
-    line-height: 50px;
-    height: 50px;
+    line-height: var(--navbar-height);
+    height: var(--navbar-height);
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
--- 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.native
+          @click.stop
        />
        <button
          class="button-unstyled nav-icon"
@ -52,6 +52,7 @@
          href="/pleroma/admin/#/login-pleroma"
          class="nav-icon"
          target="_blank"
+          @click.stop
        >
          <FAIcon
            fixed-width
@ -62,7 +63,7 @@
        </a>
        <button
          v-if="currentUser"
-          class="button-unstyled nav-icon"
+          class="button-unstyled nav-icon nav-icon-logout"
          @click.prevent="logout"
        >
          <FAIcon
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@ -58,16 +58,7 @@
  background-color: var(--bg, $fallback--bg);

  .dialog-modal-heading {
-    padding: .5em .5em;
-    margin-right: auto;
-    margin-bottom: 0;
-    white-space: nowrap;
-    color: var(--panelText);
-    background-color: $fallback--fg;
-    background-color: var(--panel, $fallback--fg);
-
    .title {
-      margin-bottom: 0;
      text-align: center;
    }
  }
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@ -31,6 +31,7 @@ library.add(
 */

 const EmojiInput = {
+  emits: ['update:modelValue', 'shown'],
  props: {
    suggest: {
      /**
@ -57,8 +58,7 @@ const EmojiInput = {
      required: true,
      type: Function
    },
-    // TODO VUE3: change to modelValue, change 'input' event to 'input'
-    value: {
+    modelValue: {
      /**
       * Used for v-model
       */
@ -137,8 +137,8 @@ const EmojiInput = {
      return (this.wordAtCaret || {}).word || ''
    },
    wordAtCaret () {
-      if (this.value && this.caret) {
-        const word = Completion.wordAtPosition(this.value, this.caret - 1) || {}
+      if (this.modelValue && this.caret) {
+        const word = Completion.wordAtPosition(this.modelValue, this.caret - 1) || {}
        return word
      }
    }
@ -189,8 +189,11 @@ const EmojiInput = {
          img: imageUrl || ''
        }))
    },
-    suggestions (newValue) {
-      this.$nextTick(this.resize)
+    suggestions: {
+      handler (newValue) {
+        this.$nextTick(this.resize)
+      },
+      deep: true
    }
  },
  methods: {
@ -225,13 +228,13 @@ const EmojiInput = {
      }
    },
    replace (replacement) {
-      const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
-      this.$emit('input', newValue)
+      const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
+      this.$emit('update:modelValue', newValue)
      this.caret = 0
    },
    insert ({ insertion, keepOpen, surroundingSpace = true }) {
-      const before = this.value.substring(0, this.caret) || ''
-      const after = this.value.substring(this.caret) || ''
+      const before = this.modelValue.substring(0, this.caret) || ''
+      const after = this.modelValue.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
@ -259,7 +262,7 @@ const EmojiInput = {
        after
      ].join('')
      this.keepOpen = keepOpen
-      this.$emit('input', newValue)
+      this.$emit('update:modelValue', newValue)
      const position = this.caret + (insertion + spaceAfter + spaceBefore).length
      if (!keepOpen) {
        this.input.focus()
@ -278,8 +281,8 @@ const EmojiInput = {
      if (len > 0 || suggestion) {
        const chosenSuggestion = suggestion || this.suggestions[this.highlighted]
        const replacement = chosenSuggestion.replacement
-        const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
-        this.$emit('input', newValue)
+        const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
+        this.$emit('update:modelValue', newValue)
        this.highlighted = 0
        const position = this.wordAtCaret.start + replacement.length

@ -455,7 +458,7 @@ const EmojiInput = {
      this.showPicker = false
      this.setCaret(e)
      this.resize()
-      this.$emit('input', e.target.value)
+      this.$emit('update:modelValue', e.target.value)
    },
    onClickInput (e) {
      this.showPicker = false
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@ -78,7 +78,7 @@
    top: 0;
    right: 0;
    margin: .2em .25em;
-    font-size: 16px;
+    font-size: 1.3em;
    cursor: pointer;
    line-height: 24px;

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

@ -119,7 +120,7 @@ const EmojiPicker = {
      this.$nextTick(() => {
        this.emojisView.forEach(group => {
          const ref = this.$refs['group-' + group.id]
-          if (ref[0].offsetTop <= top) {
+          if (ref.offsetTop <= top) {
            this.activeGroup = group.id
          }
        })
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@ -7,7 +7,7 @@
  right: 0;
  left: 0;
  margin: 0 !important;
-  z-index: 1;
+  z-index: 100;
  background-color: $fallback--bg;
  background-color: var(--popover, $fallback--bg);
  color: $fallback--link;
@ -73,12 +73,13 @@
    &-item {
      padding: 0 7px;
      cursor: pointer;
-      font-size: 24px;
+      font-size: 1.85em;

      &.disabled {
        opacity: 0.5;
        pointer-events: none;
      }
+
      &.active {
        border-bottom: 4px solid;

@ -151,9 +152,10 @@
      justify-content: left;

      &-title {
-        font-size: 12px;
+        font-size: 0.85em;
        width: 100%;
        margin: 0;
+
        &.disabled {
          display: none;
        }
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@ -11,8 +11,23 @@
        @click="emojiOnClick(reaction.name, $event)"
        @mouseenter="fetchEmojiReactionsByIfMissing()"
      >
-        <span class="reaction-emoji">{{ reaction.name }}</span>
-        <span>{{ reaction.count }}</span>
+        <span
+          v-if="reaction.url !== null"
+        >
+          <img
+            :src="reaction.url"
+            :title="reaction.name"
+            class="reaction-emoji"
+            width="2.55em"
+          >
+          {{ reaction.count }}
+        </span>
+        <span v-else>
+          <span class="reaction-emoji unicode-emoji">
+            {{ reaction.name }}
+          </span>
+          <span>{{ reaction.count }}</span>
+        </span>
      </button>
    </UserListPopover>
    <a
@ -36,6 +51,10 @@
  flex-wrap: wrap;
 }

+.unicode-emoji {
+  font-size: 210%;
+}
+
 .emoji-reaction {
  padding: 0 0.5em;
  margin-right: 0.5em;
@ -45,7 +64,7 @@
  justify-content: center;
  box-sizing: border-box;
  .reaction-emoji {
-    width: 1.25em;
+    width: 2.55em !important;
    margin-right: 0.25em;
  }
  &:focus {
--- a/src/components/exporter/exporter.js
+++ b/src/components/exporter/exporter.js
@ -15,18 +15,8 @@ const Exporter = {
      type: String,
      default: 'export.csv'
    },
-    exportButtonLabel: {
-      type: String,
-      default () {
-        return this.$t('exporter.export')
-      }
-    },
-    processingMessage: {
-      type: String,
-      default () {
-        return this.$t('exporter.processing')
-      }
-    }
+    exportButtonLabel: { type: String },
+    processingMessage: { type: String }
  },
  data () {
    return {
--- a/src/components/exporter/exporter.vue
+++ b/src/components/exporter/exporter.vue
@ -7,14 +7,14 @@
        spin
      />

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

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

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

+  .placeholder {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg);
+    color: var(--link);
+  }
+
  .hider {
    top: 0;
  }
@ -76,13 +80,5 @@
    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', 'labelFollowing', 'buttonClass'],
+  props: ['relationship', 'user', '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_again')
+        return this.$t('user_card.follow_cancel')
      } else {
        return this.$t('user_card.follow')
      }
@ -29,11 +29,14 @@ export default {
      } else {
        return this.$t('user_card.follow')
      }
+    },
+    disabled () {
+      return this.inProgress || this.user.deactivated
    }
  },
  methods: {
    onClick () {
-      this.relationship.following ? this.unfollow() : this.follow()
+      this.relationship.following || this.relationship.requested ? 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="inProgress"
+    :disabled="disabled"
    :title="title"
    @click="onClick"
  >
--- a/src/components/follow_card/follow_card.vue
+++ b/src/components/follow_card/follow_card.vue
@ -20,6 +20,7 @@
          :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 'vue'
+import { set } from 'lodash'
 import Select from '../select/select.vue'

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

 const Gallery = {
  props: [
    'attachments',
+    'limitRows',
+    'descriptions',
+    'limit',
    'nsfw',
-    'setMedia'
+    'setMedia',
+    'size',
+    'editable',
+    'removeAttachment',
+    'shiftUpAttachment',
+    'shiftDnAttachment',
+    'editAttachment',
+    'grid'
  ],
  data () {
    return {
-      sizes: {}
+      sizes: {},
+      hidingLong: true
    }
  },
  components: { Attachment },
@ -18,26 +29,70 @@ const Gallery = {
      if (!this.attachments) {
        return []
      }
-      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 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 = 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
    },
-    useContainFit () {
-      return this.$store.getters.mergedConfig.useContainFit
+    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
+      }
    }
  },
  methods: {
-    onNaturalSizeLoad (id, size) {
-      this.$set(this.sizes, id, size)
+    onNaturalSizeLoad ({ id, width, height }) {
+      set(this.sizes, id, { width, height })
    },
-    rowStyle (itemsPerRow) {
-      return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` }
+    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))}%` }
+      }
    },
    itemStyle (id, row) {
      const total = sumBy(row, item => this.getAspectRatio(item.id))
@ -46,6 +101,16 @@ 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,26 +1,83 @@
 <template>
  <div
    ref="galleryContainer"
-    style="width: 100%;"
+    class="Gallery"
+    :class="{ '-long': tooManyAttachments && hidingLong }"
  >
+    <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-for="(row, index) in rows"
-      :key="index"
-      class="gallery-row"
-      :style="rowStyle(row.length)"
-      :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }"
+      v-if="tooManyAttachments"
+      class="many-attachments"
    >
-      <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 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>
    </div>
  </div>
@ -31,12 +88,66 @@
 <style lang="scss">
@import '../../_variables.scss';

-.gallery-row {
-  position: relative;
-  height: 0;
-  width: 100%;
-  flex-grow: 1;
-  margin-top: 0.5em;
+.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-inner {
    position: absolute;
@ -48,9 +159,23 @@
    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;
+      }
+    }
  }

-  .gallery-row-inner .attachment {
+  .gallery-item {
    margin: 0 0.5em 0 0;
    flex-grow: 1;
    height: 100%;
@ -61,32 +186,5 @@
      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/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@ -44,20 +44,18 @@
    max-width: calc(100% - 3em);
    display: flex;
    padding-left: 1.5em;
-    line-height: 2em;
+    line-height: 2;
+    margin-bottom: 0.5em;
+
    .notice-message {
      flex: 1 1 100%;
    }
-    i {
-      flex: 0 0;
-      width: 1.5em;
-      cursor: pointer;
-    }
  }

  .global-error {
    background-color: var(--alertPopupError, $fallback--cRed);
    color: var(--alertPopupErrorText, $fallback--text);
+
    .svg-inline--fa {
      color: var(--alertPopupErrorText, $fallback--text);
    }
@ -66,6 +64,7 @@
  .global-warning {
    background-color: var(--alertPopupWarning, $fallback--cOrange);
    color: var(--alertPopupWarningText, $fallback--text);
+
    .svg-inline--fa {
      color: var(--alertPopupWarningText, $fallback--text);
    }
--- a/src/components/hashtag_link/hashtag_link.js
+++ b/src/components/hashtag_link/hashtag_link.js
@ -0,0 +1,36 @@
+import { extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
+
+const HashtagLink = {
+  name: 'HashtagLink',
+  props: {
+    url: {
+      required: true,
+      type: String
+    },
+    content: {
+      required: true,
+      type: String
+    },
+    tag: {
+      required: false,
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    onClick () {
+      const tag = this.tag || extractTagFromUrl(this.url)
+      if (tag) {
+        const link = this.generateTagLink(tag)
+        this.$router.push(link)
+      } else {
+        window.open(this.url, '_blank')
+      }
+    },
+    generateTagLink (tag) {
+      return `/tag/${tag}`
+    }
+  }
+}
+
+export default HashtagLink
--- a/src/components/hashtag_link/hashtag_link.scss
+++ b/src/components/hashtag_link/hashtag_link.scss
@ -0,0 +1,6 @@
+.HashtagLink {
+  position: relative;
+  white-space: normal;
+  display: inline-block;
+  color: var(--link);
+}
--- a/src/components/hashtag_link/hashtag_link.vue
+++ b/src/components/hashtag_link/hashtag_link.vue
@ -0,0 +1,19 @@
+<template>
+  <span
+    class="HashtagLink"
+  >
+    <!-- eslint-disable vue/no-v-html -->
+    <a
+      :href="url"
+      class="original"
+      target="_blank"
+      @click.prevent="onClick"
+      v-html="content"
+    />
+    <!-- eslint-enable vue/no-v-html -->
+  </span>
+</template>
+
+<script src="./hashtag_link.js"/>
+
+<style lang="scss" src="./hashtag_link.scss"/>
--- 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)
  },
-  beforeDestroy: function () {
+  beforeUnmount: function () {
    // remove the event listeners
    const trigger = this.getTriggerDOM()
    if (trigger) {
--- a/src/components/importer/importer.js
+++ b/src/components/importer/importer.js
@ -15,24 +15,9 @@ const Importer = {
      type: Function,
      required: true
    },
-    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')
-      }
-    }
+    submitButtonLabel: { type: String },
+    successMessage: { type: String },
+    errorMessage: { type: String }
  },
  data () {
    return {
--- a/src/components/importer/importer.vue
+++ b/src/components/importer/importer.vue
@ -18,21 +18,31 @@
      class="btn button-default"
      @click="submit"
    >
-      {{ submitButtonLabel }}
+      {{ submitButtonLabel || $t('importer.submit') }}
    </button>
    <div v-if="success">
-      <FAIcon
-        icon="times"
+      <button
+        class="button-unstyled"
        @click="dismiss"
-      />
-      <p>{{ successMessage }}</p>
+      >
+        <FAIcon
+          icon="times"
+        />
+      </button>
+      {{ ' ' }}
+      <span>{{ successMessage || $t('importer.success') }}</span>
    </div>
    <div v-else-if="error">
-      <FAIcon
-        icon="times"
+      <button
+        class="button-unstyled"
        @click="dismiss"
-      />
-      <p>{{ errorMessage }}</p>
+      >
+        <FAIcon
+          icon="times"
+        />
+      </button>
+      {{ ' ' }}
+      <span>{{ errorMessage || $t('importer.error') }}</span>
    </div>
  </div>
 </template>
--- a/src/components/interactions/interactions.js
+++ b/src/components/interactions/interactions.js
@ -1,4 +1,5 @@
 import Notifications from '../notifications/notifications.vue'
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'

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

--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@ -1,11 +1,12 @@
 <template>
  <div>
    <label for="interface-language-switcher">
-      {{ $t('settings.interfaceLanguage') }}
+      {{ promptText }}
    </label>
+    {{ ' ' }}
    <Select
      id="interface-language-switcher"
-      v-model="language"
+      v-model="controlledLanguage"
    >
      <option
        v-for="lang in languages"
@ -19,39 +20,43 @@
 </template>

 <script>
-import languagesObject from '../../i18n/messages'
 import localeService from '../../services/locale/locale.service.js'
-import ISO6391 from 'iso-639-1'
-import _ from 'lodash'
 import Select from '../select/select.vue'

 export default {
  components: {
    Select
  },
+  props: {
+    promptText: {
+      type: String,
+      required: true
+    },
+    language: {
+      type: String,
+      required: true
+    },
+    setLanguage: {
+      type: Function,
+      required: true
+    }
+  },
  computed: {
    languages () {
-      return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
+      return localeService.languages
    },

-    language: {
-      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
+    controlledLanguage: {
+      get: function () { return this.language },
      set: function (val) {
-        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+        this.setLanguage(val)
      }
    }
  },

  methods: {
    getLanguageName (code) {
-      const specialLanguageNames = {
-        'ja_easy': 'やさしいにほんご',
-        'zh': '简体中文',
-        'zh_Hant': '繁體中文'
-      }
-      const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
-      const browserLocale = localeService.internalToBrowserLocale(code)
-      return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
+      return localeService.getLanguageName(code)
    }
  }
 }
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@ -63,7 +63,7 @@
  }

  .card-host {
-    font-size: 12px;
+    font-size: 0.85em;
  }

  .card-description {
--- a/src/components/list_card/list_card.js
+++ b/src/components/list_card/list_card.js
@ -0,0 +1,16 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEllipsisH
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEllipsisH
+)
+
+const ListCard = {
+  props: [
+    'list'
+  ]
+}
+
+export default ListCard
--- a/src/components/list_card/list_card.vue
+++ b/src/components/list_card/list_card.vue
@ -0,0 +1,51 @@
+<template>
+  <div class="list-card">
+    <router-link
+      :to="{ name: 'list-timeline', params: { id: list.id } }"
+      class="list-name"
+    >
+      {{ list.title }}
+    </router-link>
+    <router-link
+      :to="{ name: 'list-edit', params: { id: list.id } }"
+      class="button-list-edit"
+    >
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        icon="ellipsis-h"
+      />
+    </router-link>
+  </div>
+</template>
+
+<script src="./list_card.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.list-card {
+  display: flex;
+}
+
+.list-name,
+.button-list-edit {
+  margin: 0;
+  padding: 1em;
+  color: $fallback--link;
+  color: var(--link, $fallback--link);
+
+  &:hover {
+    background-color: $fallback--lightBg;
+    background-color: var(--selectedMenu, $fallback--lightBg);
+    color: $fallback--link;
+    color: var(--selectedMenuText, $fallback--link);
+    --faint: var(--selectedMenuFaintText, $fallback--faint);
+    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+    --lightText: var(--selectedMenuLightText, $fallback--lightText);
+  }
+}
+
+.list-name {
+  flex-grow: 1;
+}
+</style>
--- a/src/components/list_edit/list_edit.js
+++ b/src/components/list_edit/list_edit.js
@ -0,0 +1,91 @@
+import { mapState, mapGetters } from 'vuex'
+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import ListUserSearch from '../list_user_search/list_user_search.vue'
+import UserAvatar from '../user_avatar/user_avatar.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSearch,
+  faChevronLeft
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faSearch,
+  faChevronLeft
+)
+
+const ListNew = {
+  components: {
+    BasicUserCard,
+    UserAvatar,
+    ListUserSearch
+  },
+  data () {
+    return {
+      title: '',
+      userIds: [],
+      selectedUserIds: []
+    }
+  },
+  created () {
+    this.$store.dispatch('fetchList', { id: this.id })
+      .then(() => { this.title = this.findListTitle(this.id) })
+    this.$store.dispatch('fetchListAccounts', { id: this.id })
+      .then(() => {
+        this.selectedUserIds = this.findListAccounts(this.id)
+        this.selectedUserIds.forEach(userId => {
+          this.$store.dispatch('fetchUserIfMissing', userId)
+        })
+      })
+  },
+  computed: {
+    id () {
+      return this.$route.params.id
+    },
+    users () {
+      return this.userIds.map(userId => this.findUser(userId))
+    },
+    selectedUsers () {
+      return this.selectedUserIds.map(userId => this.findUser(userId)).filter(user => user)
+    },
+    ...mapState({
+      currentUser: state => state.users.currentUser
+    }),
+    ...mapGetters(['findUser', 'findListTitle', 'findListAccounts'])
+  },
+  methods: {
+    onInput () {
+      this.search(this.query)
+    },
+    selectUser (user) {
+      if (this.selectedUserIds.includes(user.id)) {
+        this.removeUser(user.id)
+      } else {
+        this.addUser(user)
+      }
+    },
+    isSelected (user) {
+      return this.selectedUserIds.includes(user.id)
+    },
+    addUser (user) {
+      this.selectedUserIds.push(user.id)
+    },
+    removeUser (userId) {
+      this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
+    },
+    onResults (results) {
+      this.userIds = results
+    },
+    updateList () {
+      this.$store.dispatch('setList', { id: this.id, title: this.title })
+      this.$store.dispatch('setListAccounts', { id: this.id, accountIds: this.selectedUserIds })
+
+      this.$router.push({ name: 'list-timeline', params: { id: this.id } })
+    },
+    deleteList () {
+      this.$store.dispatch('deleteList', { id: this.id })
+      this.$router.push({ name: 'lists' })
+    }
+  }
+}
+
+export default ListNew
--- a/src/components/list_edit/list_edit.vue
+++ b/src/components/list_edit/list_edit.vue
@ -0,0 +1,108 @@
+<template>
+  <div class="panel-default panel list-edit">
+    <div
+      ref="header"
+      class="panel-heading"
+    >
+      <button
+        class="button-unstyled go-back-button"
+        @click="$router.back"
+      >
+        <FAIcon
+          size="lg"
+          icon="chevron-left"
+        />
+      </button>
+    </div>
+    <div class="input-wrap">
+      <input
+        ref="title"
+        v-model="title"
+        :placeholder="$t('lists.title')"
+      >
+    </div>
+    <div class="member-list">
+      <div
+        v-for="user in selectedUsers"
+        :key="user.id"
+        class="member"
+      >
+        <BasicUserCard
+          :user="user"
+          :class="isSelected(user) ? 'selected' : ''"
+          @click.capture.prevent="selectUser(user)"
+        />
+      </div>
+    </div>
+    <ListUserSearch @results="onResults" />
+    <div class="member-list">
+      <div
+        v-for="user in users"
+        :key="user.id"
+        class="member"
+      >
+        <BasicUserCard
+          :user="user"
+          :class="isSelected(user) ? 'selected' : ''"
+          @click.capture.prevent="selectUser(user)"
+        />
+      </div>
+    </div>
+    <button
+      :disabled="title && title.length === 0"
+      class="btn button-default"
+      @click="updateList"
+    >
+      {{ $t('lists.save') }}
+    </button>
+    <button
+      class="btn button-default"
+      @click="deleteList"
+    >
+      {{ $t('lists.delete') }}
+    </button>
+  </div>
+</template>
+
+<script src="./list_edit.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.list-edit {
+  .input-wrap {
+    display: flex;
+    margin: 0.7em 0.5em 0.7em 0.5em;
+
+    input {
+      width: 100%;
+    }
+  }
+
+  .search-icon {
+    margin-right: 0.3em;
+  }
+
+  .member-list {
+    padding-bottom: 0.7rem;
+  }
+
+  .basic-user-card:hover,
+  .basic-user-card.selected {
+    cursor: pointer;
+    background-color: var(--selectedPost, $fallback--lightBg);
+  }
+
+  .go-back-button {
+    text-align: center;
+    line-height: 1;
+    height: 100%;
+    align-self: start;
+    width: var(--__panel-heading-height-inner);
+  }
+
+  .btn {
+    margin: 0.5em;
+  }
+}
+</style>
--- a/src/components/list_new/list_new.js
+++ b/src/components/list_new/list_new.js
@ -0,0 +1,79 @@
+import { mapState, mapGetters } from 'vuex'
+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import UserAvatar from '../user_avatar/user_avatar.vue'
+import ListUserSearch from '../list_user_search/list_user_search.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSearch,
+  faChevronLeft
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faSearch,
+  faChevronLeft
+)
+
+const ListNew = {
+  components: {
+    BasicUserCard,
+    UserAvatar,
+    ListUserSearch
+  },
+  data () {
+    return {
+      title: '',
+      userIds: [],
+      selectedUserIds: []
+    }
+  },
+  computed: {
+    users () {
+      return this.userIds.map(userId => this.findUser(userId))
+    },
+    selectedUsers () {
+      return this.selectedUserIds.map(userId => this.findUser(userId))
+    },
+    ...mapState({
+      currentUser: state => state.users.currentUser
+    }),
+    ...mapGetters(['findUser'])
+  },
+  methods: {
+    goBack () {
+      this.$emit('cancel')
+    },
+    onInput () {
+      this.search(this.query)
+    },
+    selectUser (user) {
+      if (this.selectedUserIds.includes(user.id)) {
+        this.removeUser(user.id)
+      } else {
+        this.addUser(user)
+      }
+    },
+    isSelected (user) {
+      return this.selectedUserIds.includes(user.id)
+    },
+    addUser (user) {
+      this.selectedUserIds.push(user.id)
+    },
+    removeUser (userId) {
+      this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
+    },
+    onResults (results) {
+      this.userIds = results
+    },
+    createList () {
+      // the API has two different endpoints for "creating a list with a name"
+      // and "updating the accounts on the list".
+      this.$store.dispatch('createList', { title: this.title })
+        .then((list) => {
+          this.$store.dispatch('setListAccounts', { id: list.id, accountIds: this.selectedUserIds })
+          this.$router.push({ name: 'list-timeline', params: { id: list.id } })
+        })
+    }
+  }
+}
+
+export default ListNew
--- a/src/components/list_new/list_new.vue
+++ b/src/components/list_new/list_new.vue
@ -0,0 +1,95 @@
+<template>
+  <div class="panel-default panel list-new">
+    <div
+      ref="header"
+      class="panel-heading"
+    >
+      <button
+        class="button-unstyled go-back-button"
+        @click="goBack"
+      >
+        <FAIcon
+          size="lg"
+          icon="chevron-left"
+        />
+      </button>
+    </div>
+    <div class="input-wrap">
+      <input
+        ref="title"
+        v-model="title"
+        :placeholder="$t('lists.title')"
+      >
+    </div>
+
+    <div class="member-list">
+      <div
+        v-for="user in selectedUsers"
+        :key="user.id"
+        class="member"
+      >
+        <BasicUserCard
+          :user="user"
+          :class="isSelected(user) ? 'selected' : ''"
+          @click.capture.prevent="selectUser(user)"
+        />
+      </div>
+    </div>
+    <ListUserSearch
+      @results="onResults"
+    />
+    <div
+      v-for="user in users"
+      :key="user.id"
+      class="member"
+    >
+      <BasicUserCard
+        :user="user"
+        :class="isSelected(user) ? 'selected' : ''"
+        @click.capture.prevent="selectUser(user)"
+      />
+    </div>
+
+    <button
+      :disabled="title && title.length === 0"
+      class="btn button-default"
+      @click="createList"
+    >
+      {{ $t('lists.create') }}
+    </button>
+  </div>
+</template>
+
+<script src="./list_new.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.list-new {
+  .search-icon {
+    margin-right: 0.3em;
+  }
+
+  .member-list {
+    padding-bottom: 0.7rem;
+  }
+
+  .basic-user-card:hover,
+  .basic-user-card.selected {
+    cursor: pointer;
+    background-color: var(--selectedPost, $fallback--lightBg);
+  }
+
+  .go-back-button {
+    text-align: center;
+    line-height: 1;
+    height: 100%;
+    align-self: start;
+    width: var(--__panel-heading-height-inner);
+  }
+
+  .btn {
+    margin: 0.5em;
+  }
+}
+</style>
--- a/src/components/list_timeline/list_timeline.js
+++ b/src/components/list_timeline/list_timeline.js
@ -0,0 +1,25 @@
+import Timeline from '../timeline/timeline.vue'
+const ListTimeline = {
+  data () {
+    return {
+      listId: null
+    }
+  },
+  components: {
+    Timeline
+  },
+  computed: {
+    timeline () { return this.$store.state.statuses.timelines.list }
+  },
+  created () {
+    this.listId = this.$route.params.id
+    this.$store.dispatch('fetchList', { id: this.listId })
+    this.$store.dispatch('startFetchingTimeline', { timeline: 'list', listId: this.listId })
+  },
+  unmounted () {
+    this.$store.dispatch('stopFetchingTimeline', 'list')
+    this.$store.commit('clearTimeline', { timeline: 'list' })
+  }
+}
+
+export default ListTimeline
--- a/src/components/list_timeline/list_timeline.vue
+++ b/src/components/list_timeline/list_timeline.vue
@ -0,0 +1,10 @@
+<template>
+  <Timeline
+    title="list.name"
+    :timeline="timeline"
+    :list-id="listId"
+    timeline-name="list"
+  />
+</template>
+
+<script src="./list_timeline.js"></script>
--- a/src/components/list_user_search/list_user_search.js
+++ b/src/components/list_user_search/list_user_search.js
@ -0,0 +1,46 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSearch,
+  faChevronLeft
+} from '@fortawesome/free-solid-svg-icons'
+import { debounce } from 'lodash'
+import Checkbox from '../checkbox/checkbox.vue'
+
+library.add(
+  faSearch,
+  faChevronLeft
+)
+
+const ListUserSearch = {
+  components: {
+    Checkbox
+  },
+  data () {
+    return {
+      loading: false,
+      query: '',
+      followingOnly: true
+    }
+  },
+  methods: {
+    onInput: debounce(function () {
+      this.search(this.query)
+    }, 2000),
+    search (query) {
+      if (!query) {
+        this.loading = false
+        return
+      }
+
+      this.loading = true
+      this.userIds = []
+      this.$store.dispatch('search', { q: query, resolve: true, type: 'accounts', following: this.followingOnly })
+        .then(data => {
+          this.loading = false
+          this.$emit('results', data.accounts.map(a => a.id))
+        })
+    }
+  }
+}
+
+export default ListUserSearch
--- a/src/components/list_user_search/list_user_search.vue
+++ b/src/components/list_user_search/list_user_search.vue
@ -0,0 +1,45 @@
+<template>
+  <div>
+    <div class="input-wrap">
+      <div class="input-search">
+        <FAIcon
+          class="search-icon fa-scale-110 fa-old-padding"
+          icon="search"
+        />
+      </div>
+      <input
+        ref="search"
+        v-model="query"
+        :placeholder="$t('lists.search')"
+        @input="onInput"
+      >
+    </div>
+    <div class="input-wrap">
+      <Checkbox
+        v-model="followingOnly"
+        @change="onInput"
+      >
+        {{ $t('lists.following_only') }}
+      </Checkbox>
+    </div>
+  </div>
+</template>
+
+<script src="./list_user_search.js"></script>
+<style lang="scss">
+@import '../../_variables.scss';
+
+.input-wrap {
+  display: flex;
+  margin: 0.7em 0.5em 0.7em 0.5em;
+
+  input {
+    width: 100%;
+  }
+}
+
+.search-icon {
+  margin-right: 0.3em;
+}
+
+</style>
--- a/src/components/lists/lists.js
+++ b/src/components/lists/lists.js
@ -0,0 +1,32 @@
+import ListCard from '../list_card/list_card.vue'
+import ListNew from '../list_new/list_new.vue'
+
+const Lists = {
+  data () {
+    return {
+      isNew: false
+    }
+  },
+  components: {
+    ListCard,
+    ListNew
+  },
+  created () {
+    this.$store.dispatch('startFetchingLists')
+  },
+  computed: {
+    lists () {
+      return this.$store.state.lists.allLists
+    }
+  },
+  methods: {
+    cancelNewList () {
+      this.isNew = false
+    },
+    newList () {
+      this.isNew = true
+    }
+  }
+}
+
+export default Lists
--- a/src/components/lists/lists.vue
+++ b/src/components/lists/lists.vue
@ -0,0 +1,31 @@
+<template>
+  <div v-if="isNew">
+    <ListNew @cancel="cancelNewList" />
+  </div>
+  <div
+    v-else
+    class="settings panel panel-default"
+  >
+    <div class="panel-heading">
+      <div class="title">
+        {{ $t('lists.lists') }}
+      </div>
+      <button
+        class="button-default"
+        @click="newList"
+      >
+        {{ $t("lists.new") }}
+      </button>
+    </div>
+    <div class="panel-body">
+      <ListCard
+        v-for="list in lists.slice().reverse()"
+        :key="list"
+        :list="list"
+        class="list-item"
+      />
+    </div>
+  </div>
+</template>
+
+<script src="./lists.js"></script>
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@ -76,11 +76,15 @@
    >
      <div class="alert error">
        {{ error }}
-        <FAIcon
-          class="fa-scale-110 fa-old-padding"
-          icon="times"
+        <button
+          class="button-unstyled"
          @click="clearError"
-        />
+        >
+          <FAIcon
+            class="fa-scale-110 fa-old-padding"
+            icon="times"
+          />
+        </button>
      </div>
    </div>
  </div>
@ -97,7 +101,7 @@
  padding: 0.6em;

  .btn {
-    min-height: 28px;
+    min-height: 2em;
    width: 10em;
  }

--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@ -1,24 +1,46 @@
 import StillImage from '../still-image/still-image.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
 import Modal from '../modal/modal.vue'
-import fileTypeService from '../../services/file_type/file_type.service.js'
+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 { library } from '@fortawesome/fontawesome-svg-core'
 import {
  faChevronLeft,
-  faChevronRight
+  faChevronRight,
+  faCircleNotch,
+  faTimes
 } from '@fortawesome/free-solid-svg-icons'

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

 const MediaModal = {
  components: {
    StillImage,
    VideoAttachment,
-    Modal
+    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
+    }
  },
  computed: {
    showing () {
@ -27,6 +49,9 @@ const MediaModal = {
    media () {
      return this.$store.state.mediaViewer.media
    },
+    description () {
+      return this.currentMedia.description
+    },
    currentIndex () {
      return this.$store.state.mediaViewer.currentIndex
    },
@ -37,43 +62,62 @@ const MediaModal = {
      return this.media.length > 1
    },
    type () {
-      return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
+      return this.currentMedia ? this.getType(this.currentMedia) : null
    }
  },
-  created () {
-    this.mediaSwipeGestureRight = GestureService.swipeGesture(
-      GestureService.DIRECTION_RIGHT,
-      this.goPrev,
-      50
-    )
-    this.mediaSwipeGestureLeft = GestureService.swipeGesture(
-      GestureService.DIRECTION_LEFT,
-      this.goNext,
-      50
-    )
-  },
  methods: {
-    mediaTouchStart (e) {
-      GestureService.beginSwipe(e, this.mediaSwipeGestureRight)
-      GestureService.beginSwipe(e, this.mediaSwipeGestureLeft)
-    },
-    mediaTouchMove (e) {
-      GestureService.updateSwipe(e, this.mediaSwipeGestureRight)
-      GestureService.updateSwipe(e, this.mediaSwipeGestureLeft)
+    getType (media) {
+      return fileTypeService.fileType(media.mimetype)
    },
    hide () {
-      this.$store.dispatch('closeMediaViewer')
+      // 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)
+      }
    },
    goPrev () {
      if (this.canNavigate) {
        const prevIndex = this.currentIndex === 0 ? this.media.length - 1 : (this.currentIndex - 1)
-        this.$store.dispatch('setCurrent', this.media[prevIndex])
+        const newMedia = this.media[prevIndex]
+        if (this.getType(newMedia) === 'image') {
+          this.loading = true
+        }
+        this.$store.dispatch('setCurrentMedia', newMedia)
      }
    },
    goNext () {
      if (this.canNavigate) {
        const nextIndex = this.currentIndex === this.media.length - 1 ? 0 : (this.currentIndex + 1)
-        this.$store.dispatch('setCurrent', this.media[nextIndex])
+        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()
      }
    },
    handleKeyupEvent (e) {
@ -98,7 +142,7 @@ const MediaModal = {
    document.addEventListener('keyup', this.handleKeyupEvent)
    document.addEventListener('keydown', this.handleKeydownEvent)
  },
-  destroyed () {
+  unmounted () {
    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,18 +2,38 @@
  <Modal
    v-if="showing"
    class="media-modal-view"
-    @backdropClicked="hide"
+    @backdropClicked="hideIfNotSwiped"
  >
-    <img
+    <SwipeClick
      v-if="type === 'image'"
-      class="modal-image"
-      :src="currentMedia.url"
-      :alt="currentMedia.description"
-      :title="currentMedia.description"
-      @touchstart.stop="mediaTouchStart"
-      @touchmove.stop="mediaTouchMove"
-      @click="hide"
+      ref="swipeClick"
+      class="modal-image-container"
+      :direction="swipeDirection"
+      :threshold="swipeThreshold"
+      @preview-requested="handleSwipePreview"
+      @swipe-finished="handleSwipeEnd"
+      @swipeless-clicked="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"
@ -28,38 +48,84 @@
      :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-arrow modal-view-button-arrow--prev"
+      class="modal-view-button modal-view-button-arrow modal-view-button-arrow--prev"
      @click.stop.prevent="goPrev"
    >
      <FAIcon
-        class="arrow-icon"
+        class="button-icon arrow-icon"
        icon="chevron-left"
      />
    </button>
    <button
      v-if="canNavigate"
      :title="$t('media_modal.next')"
-      class="modal-view-button-arrow modal-view-button-arrow--next"
+      class="modal-view-button modal-view-button-arrow modal-view-button-arrow--next"
      @click.stop.prevent="goNext"
    >
      <FAIcon
-        class="arrow-icon"
+        class="button-icon 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.media-modal-view {
-  z-index: 1001;
+$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-button-arrow {
+.modal-view.media-modal-view {
+  z-index: 9000;
+  flex-direction: column;
+
+  .modal-view-button-arrow,
+  .modal-view-button-hide {
    opacity: 0.75;

    &:focus,
@ -67,69 +133,155 @@
      outline: none;
      box-shadow: none;
    }
+
    &:hover {
      opacity: 1;
    }
  }
+  overflow: hidden;
 }

-@keyframes media-fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.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);
-  }
-
-  &--prev {
-    left: 0;
-    .arrow-icon {
-      left: 6px;
+.media-modal-view {
+  @keyframes media-fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
    }
  }

-  &--next {
-    right: 0;
+  .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-word;
+    white-space: pre-line;
+  }
+
+  .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;
+    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;
+
+    .button-icon {
+      position: absolute;
+      height: $modal-view-button-icon-height;
+      width: $modal-view-button-icon-width;
+      font-size: 1rem;
+      line-height: $modal-view-button-icon-height;
+      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;
+
    .arrow-icon {
-      right: 6px;
+      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;
+      }
+    }
+  }
+
+  .modal-view-button-hide {
+    position: absolute;
+    top: 0;
+    right: 0;
+    .button-icon {
+      top: $modal-view-button-icon-margin;
+      right: $modal-view-button-icon-margin;
    }
  }
 }
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@ -17,9 +17,9 @@
    />
    <input
      v-if="uploadReady"
+      class="hidden-input-file"
      :disabled="disabled"
      type="file"
-      style="position: fixed; top: -100em"
      multiple="true"
      @change="change"
    >
@ -32,6 +32,10 @@
@import '../../_variables.scss';

 .media-upload {
-  cursor: pointer;
+  cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
+
+  .hidden-input-file {
+    display: none;
+  }
 }
 </style>
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@ -0,0 +1,134 @@
+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
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faAt
+)
+
+const MentionLink = {
+  name: 'MentionLink',
+  components: {
+    UserAvatar
+  },
+  props: {
+    url: {
+      required: true,
+      type: String
+    },
+    content: {
+      required: true,
+      type: String
+    },
+    userId: {
+      required: false,
+      type: String
+    },
+    userScreenName: {
+      required: false,
+      type: String
+    }
+  },
+  methods: {
+    onClick () {
+      const link = generateProfileLink(
+        this.userId || this.user.id,
+        this.userScreenName || this.user.screen_name
+      )
+      this.$router.push(link)
+    }
+  },
+  computed: {
+    user () {
+      return this.url && this.$store && this.$store.getters.findUserByUrl(this.url)
+    },
+    isYou () {
+      // FIXME why user !== currentUser???
+      return this.user && this.user.id === this.currentUser.id
+    },
+    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
+    },
+    userNameFullUi () {
+      return this.user && this.user.screen_name_ui
+    },
+    highlight () {
+      return this.user && this.mergedConfig.highlight[this.user.screen_name]
+    },
+    highlightType () {
+      return this.highlight && ('-' + this.highlight.type)
+    },
+    highlightClass () {
+      if (this.highlight) return highlightClass(this.user)
+    },
+    style () {
+      if (this.highlight) {
+        const {
+          backgroundColor,
+          backgroundPosition,
+          backgroundImage,
+          ...rest
+        } = highlightStyle(this.highlight)
+        return rest
+      }
+    },
+    classnames () {
+      return [
+        {
+          '-you': this.isYou && this.shouldBoldenYou,
+          '-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
+    })
+  }
+}
+
+export default MentionLink
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@ -0,0 +1,115 @@
+@import '../../_variables.scss';
+
+.MentionLink {
+  position: relative;
+  white-space: normal;
+  display: inline;
+  color: var(--link);
+  word-break: normal;
+
+  & .new,
+  & .original {
+    display: inline;
+    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;
+    pointer-events: none;
+    opacity: 0;
+    top: 100%;
+    left: 0;
+    height: 100%;
+    word-wrap: normal;
+    white-space: nowrap;
+    transition: opacity 0.2s ease;
+    z-index: 1;
+    margin-top: 0.25em;
+    padding: 0.5em;
+    user-select: all;
+  }
+
+  & .short.-with-tooltip,
+  & .you {
+    user-select: none;
+  }
+
+  & .short,
+  & .full {
+    white-space: nowrap;
+  }
+
+  .shortName {
+    white-space: normal;
+  }
+
+  .new {
+    &.-you {
+      & .shortName,
+      & .full {
+        //font-weight: 600;
+      }
+    }
+
+    .at {
+      color: var(--link);
+      opacity: 0.8;
+      display: inline-block;
+      line-height: 1;
+      padding: 0 0.1em;
+      vertical-align: -25%;
+      margin: 0;
+    }
+
+    &.-striped {
+      & .shortName,
+      & .full {
+        background-image:
+          repeating-linear-gradient(
+            135deg,
+            var(--____highlight-tintColor),
+            var(--____highlight-tintColor) 5px,
+            var(--____highlight-tintColor2) 5px,
+            var(--____highlight-tintColor2) 10px
+          );
+      }
+    }
+
+    &.-solid {
+      & .shortName,
+      & .full {
+        background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
+      }
+    }
+
+    &.-side {
+      & .shortName,
+      & .userNameFull {
+        box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
+      }
+    }
+  }
+
+  &:hover .new .full {
+    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
@ -0,0 +1,66 @@
+<template>
+  <span
+    class="MentionLink"
+  >
+    <!-- eslint-disable vue/no-v-html -->
+    <a
+      v-if="!user"
+      :href="url"
+      class="original"
+      target="_blank"
+      v-html="content"
+    /><!-- eslint-enable vue/no-v-html --><span
+      v-if="user"
+      class="new"
+      :style="style"
+      :class="classnames"
+    >
+      <a
+        class="short button-unstyled"
+        :class="{ '-with-tooltip': shouldShowTooltip }"
+        :href="url"
+        @click.prevent="onClick"
+      >
+        <!-- eslint-disable vue/no-v-html -->
+        <span class="shortName">@<span
+          class="userName"
+          v-html="userName"
+        /><span
+          v-if="shouldShowFullUserName"
+          class="serverName"
+          :class="{ '-faded': shouldFadeDomain }"
+          v-html="'@' + serverName"
+        />
+        </span>
+        <span
+          v-if="isYou && shouldShowYous"
+          :class="{ '-you': shouldBoldenYou }"
+        > {{ ' ' + $t('status.you') }}</span>
+        <!-- eslint-enable vue/no-v-html -->
+      </a><span
+        v-if="shouldShowTooltip"
+        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>
+      </span>
+    </span>
+  </span>
+</template>
+
+<script src="./mention_link.js"/>
+
+<style lang="scss" src="./mention_link.scss"/>
--- a/src/components/mentions_line/mentions_line.js
+++ b/src/components/mentions_line/mentions_line.js
@ -0,0 +1,37 @@
+import MentionLink from 'src/components/mention_link/mention_link.vue'
+import { mapGetters } from 'vuex'
+
+export const MENTIONS_LIMIT = 5
+
+const MentionsLine = {
+  name: 'MentionsLine',
+  props: {
+    mentions: {
+      required: true,
+      type: Array
+    }
+  },
+  data: () => ({ expanded: false }),
+  components: {
+    MentionLink
+  },
+  computed: {
+    mentionsComputed () {
+      return this.mentions.slice(0, MENTIONS_LIMIT)
+    },
+    extraMentions () {
+      return this.mentions.slice(MENTIONS_LIMIT)
+    },
+    manyMentions () {
+      return this.extraMentions.length > 0
+    },
+    ...mapGetters(['mergedConfig'])
+  },
+  methods: {
+    toggleShowMore () {
+      this.expanded = !this.expanded
+    }
+  }
+}
+
+export default MentionsLine
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@ -0,0 +1,13 @@
+.MentionsLine {
+  word-break: break-all;
+
+  .mention-link:not(:first-child)::before {
+    content: ' ';
+  }
+
+  .showMoreLess {
+    margin-left: 0.5em;
+    white-space: normal;
+    color: var(--link);
+  }
+}
--- a/Show more
+++ b/Show more