update changelog for 2.2.0

Merge develop into master for 2.2.0

See merge request pleroma/pleroma-fe!1278

.babelrc

@@ -1,5 +1,5 @@
 {
   "presets": ["@babel/preset-env"],
-  "plugins": ["@babel/plugin-transform-runtime", "lodash", "@vue/babel-plugin-jsx"],
+  "plugins": ["@babel/plugin-transform-runtime", "lodash", "@vue/babel-plugin-transform-vue-jsx"],
   "comments": false
 }

.eslintrc.js

@@ -21,8 +21,6 @@ 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
   }
 }

.gitignore

@@ -7,4 +7,3 @@ test/e2e/reports
 selenium-debug.log
 .idea/
 config/local.json
-config/local.*.json

.gitlab-ci.yml

@@ -1,7 +1,7 @@
 # This file is a template, and might need editing before it works on your project.
 # Official framework image. Look for the different tagged releases at:
 # https://hub.docker.com/r/library/node/tags/
-image: node:12
+image: node:10
 
 stages:
   - lint

.mailmap

@@ -1 +0,0 @@
-rinpatch <rin@patch.cx> <rinpatch@sdf.org>

.woodpecker.yml

@@ -1,50 +0,0 @@
-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:
-      - tag
-    image: node:16
-    commands:
-    - yarn
-    - yarn build
-
-  release:
-    when:
-      event:
-      - tag
-    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

CHANGELOG.md

@@ -3,141 +3,6 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
-## Unreleased
-### Fixed
-- AdminFE button no longer scrolls page to top when clicked
-- Pinned statuses no longer appear at bottom of user timeline (still appear as part of the timeline when fetched deep enough)
-- Fixed many many bugs related to new mentions, including spacing and alignment issues
-- Links in profile bios now properly open in new tabs
-- Inline images now respect their intended width/height attributes
-- Links with `&` in them work properly now
-- Interaction list popovers now properly emojify names
-- Completely hidden posts still had 1px border
-- Attachments are ALWAYS in same order as user uploaded, no more "videos first"
-- Attachment description is prefilled with backend-provided default when uploading
-- Proper visual feedback that next image is loading when browsing
-
-### Changed
-- (You)s are optional (opt-in) now, bolding your nickname is also optional (opt-out)
-- User highlight background now also covers the `@`
-- Reverted back to textual `@`, svg version is opt-in.
-- Settings window has been throughly rearranged to make make more sense and make navication settings easier.
-- Uploaded attachments are uniform with displayed attachments
-- Flash is watchable in media-modal (takes up nearly full screen though due to sizing issues)
-- Notifications about likes/repeats/emoji reacts are now minimized so they always take up same amount of space irrelevant to size of post.
-
-### Added
-- Options to show domains in mentions
-- Option to show user avatars in mention links (opt-in)
-- Option to disable the tooltip for mentions
-- Option to completely hide muted threads
-- Ability to open videos in modal even if you disabled that feature, via an icon button
-- New button on attachment that indicates that attachment has a description and shows a bar filled with description
-- Attachments are truncated just like post contents
-- Media modal now also displays description and counter position in gallery (i.e. 1/5)
-- Ability to rearrange order of attachments when uploading
-- Enabled users to zoom and pan images in media viewer with mouse and touch
-
-
-## [2.4.2] - 2022-01-09
-### Added
-- Added Apply and Reset buttons to the bottom of theme tab to minimize UI travel
-- Implemented user option to always show floating New Post button (normally mobile-only)
-- Display reasons for instance specific policies
-- Added functionality to cancel follow request
-
-### Fixed
-- Fixed link to external profile not working on user profiles
-- Fixed mobile shoutbox display
-- Fixed favicon badge not working in Chrome
-- Escape html more properly in subject/display name
-
-
-## [2.4.0] - 2021-08-08
-### Added
-- Added a quick settings to timeline header for easier access
-- Added option to mark posts as sensitive by default
-- Added quick filters for notifications
-- Implemented user option to change sidebar position to the right side
-- Implemented user option to hide floating shout panel
-- Implemented "edit profile" button if viewing own profile which opens profile settings
-
-### 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.
-- Fixed shoutbox not working in mobile layout
-- Fixed missing highlighted border in expanded conversations again
-- Fixed some UI jumpiness when opening images particularly in chat view
-- Fixed chat unread badge looking weird
-- Fixed punycode names not working properly
-- Fixed notifications crashing on an invalid notification
-
-### Changed
-- Display 'people voted' instead of 'votes' for multi-choice polls
-- Changed the "Timelines" link in side panel to toggle show all timeline options inside the panel
-- Renamed "Timeline" to "Home Timeline" to be more clear
-- Optimized chat to not get horrible performance after keeping the same chat open for a long time
-- When opening emoji picker or react picker, it automatically focuses the search field
-- Language picker now uses native language names
-
-### Added
-- Added reason field for registration when approval is required
-- Group staff members by role in the About page
-
-
-## [2.2.3] - 2021-01-18
-### Added
-- Added Report button to status ellipsis menu for easier reporting
-
-### Fixed
-- Follows/Followers tabs on user profiles now display the content properly.
-- Handle punycode in screen names
-- Fixed local dev mode having non-functional websockets in some cases
-- Show notices for websocket events (errors, abnormal closures, reconnections)
-- Fix not being able to re-enable websocket until page refresh
-- Fix annoying issue where timeline might have few posts when streaming is enabled
-
-### Changed
-- Don't filter own posts when they hit your wordfilter
-
-
-## [2.2.2] - 2020-12-22
-### Added
-- Mouseover titles for emojis in reaction picker
-- Support to input emoji into the search box in reaction picker
-- Added some missing unicode emoji
-- Added the upload limit to the Features panel in the About page
-- Support for solid color wallpaper, instance doesn't have to define a wallpaper anymore
-
-### Fixed
-- Fixed the occasional bug where screen would scroll 1px when typing into a reply form
-- Fixed timeline errors locking timelines
-- Fixed missing highlighted border in expanded conversations
-- Fixed custom emoji not working in profile field names
-- Fixed pinned statuses not appearing in user profiles
-- Fixed some elements not being keyboard navigation friendly
-- Fixed error handling when updating various profile images
-- Fixed your latest chat messages disappearing when closing chat view and opening it again during the same session
-- Fixed custom emoji not showing in poll options before voting
-- Fixed link color not applied to instance name in topbar
-
-### Changed
-- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers
-- Made reply/fav/repeat etc buttons easier to hit
-- Adjusted timeline menu clickable area to match the visible button
-- Moved external source link from status heading to the ellipsis menu
-- Disabled horizontal textarea resize
-- Wallpaper is now top-aligned, horizontally centered.
-
-
-## [2.2.1] - 2020-11-11
-### Fixed
-- Fixed regression in react popup alignment and overflowing
-
 
 ## [2.2.0] - 2020-11-06
 ### Added
@@ -146,8 +11,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Import/export a muted users
 - Proper handling of deletes when using websocket streaming
 - Added optimistic chat message sending, so you can start writing next message before the previous one has been sent
-- Added a small red badge to the favicon when there's unread notifications
-- Added the NSFW alert to link previews
 
 ### Fixed
 - Fixed clicking NSFW hider through status popover

CONTRIBUTORS.md

@@ -3,7 +3,6 @@ Contributors of this project.
 - Constance Variable (lambadalambda@social.heldscal.la): Code
 - Coco Snuss (cocosnuss@social.heldscal.la): Code
 - wakarimasen (wakarimasen@shitposter.club): NSFW hiding image
-- eris (eris@disqordia.space): Code
 - dtluna (dtluna@social.heldscal.la): Code
 - sonyam (sonyam@social.heldscal.la): Background images
 - hakui (hakui@freezepeach.xyz): CSS and styling

build/dev-server.js

@@ -21,7 +21,6 @@ var compiler = webpack(webpackConfig)
 
 var devMiddleware = require('webpack-dev-middleware')(compiler, {
   publicPath: webpackConfig.output.publicPath,
-  writeToDisk: true,
   stats: {
     colors: true,
     chunks: false

build/webpack.base.conf.js

@@ -3,8 +3,6 @@ var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
 var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
-var CopyPlugin = require('copy-webpack-plugin');
-var { VueLoaderPlugin } = require('vue-loader')
 
 var env = process.env.NODE_ENV
 // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@@ -30,16 +28,16 @@ module.exports = {
     }
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.vue'],
+    extensions: ['.js', '.vue'],
     modules: [
       path.join(__dirname, '../node_modules')
     ],
     alias: {
+      'vue$': 'vue/dist/vue.runtime.common',
       'static': path.resolve(__dirname, '../static'),
       'src': path.resolve(__dirname, '../src'),
       'assets': path.resolve(__dirname, '../src/assets'),
-      'components': path.resolve(__dirname, '../src/components'),
+      'components': path.resolve(__dirname, '../src/components')
-      'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
     }
   },
   module: {
@@ -59,28 +57,9 @@ module.exports = {
           }
         }
       },
-      {
-        enforce: 'post',
-        test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
-        type: 'javascript/auto',
-        loader: '@intlify/vue-i18n-loader',
-        include: [ // Use `Rule.include` to specify the files of locale messages to be pre-compiled
-          path.resolve(__dirname, '../src/i18n')
-        ]
-      },
       {
         test: /\.vue$/,
-        loader: 'vue-loader',
+        use: 'vue-loader'
-        options: {
-          compilerOptions: {
-            isCustomElement(tag) {
-              if (tag === 'pinch-zoom') {
-                return true
-              }
-              return false
-            }
-          }
-        }
       },
       {
         test: /\.jsx?$/,
@@ -114,20 +93,6 @@ module.exports = {
     new ServiceWorkerWebpackPlugin({
       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: [
-        {
-          from: "node_modules/ruffle-mirror/*",
-          to: "static/ruffle",
-          flatten: true
-        },
-      ],
-      options: {
-        concurrency: 100,
-      },
     })
   ]
 }

build/webpack.dev.conf.js

@@ -21,9 +21,7 @@ module.exports = merge(baseWebpackConfig, {
     new webpack.DefinePlugin({
       'process.env': config.dev.env,
       'COMMIT_HASH': JSON.stringify('DEV'),
-      'DEV_OVERRIDES': JSON.stringify(config.dev.settings),
+      '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(),

build/webpack.prod.conf.js

@@ -36,9 +36,7 @@ var webpackConfig = merge(baseWebpackConfig, {
     new webpack.DefinePlugin({
       'process.env': env,
       'COMMIT_HASH': JSON.stringify(commitHash),
-      'DEV_OVERRIDES': JSON.stringify(undefined),
+      'DEV_OVERRIDES': JSON.stringify(undefined)
-      '__VUE_OPTIONS_API__': true,
-      '__VUE_PROD_DEVTOOLS__': false
     }),
     // extract css into its own file
     new MiniCssExtractPlugin({

config/index.js

@@ -3,11 +3,6 @@ const path = require('path')
 let settings = {}
 try {
   settings = require('./local.json')
-  if (settings.target && settings.target.endsWith('/')) {
-    // replacing trailing slash since it can conflict with some apis
-    // and that's how actual BE reports its url
-    settings.target = settings.target.replace(/\/$/, '')
-  }
   console.log('Using local dev server settings (/config/local.json):')
   console.log(JSON.stringify(settings, null, 2))
 } catch (e) {
@@ -52,10 +47,7 @@ module.exports = {
         target,
         changeOrigin: true,
         cookieDomainRewrite: 'localhost',
-        ws: true,
+        ws: true
-        headers: {
-          'Origin': target
-        }
       },
       '/oauth/revoke': {
         target,

index.html

@@ -4,11 +4,6 @@
     <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>

package.json

@@ -16,113 +16,105 @@
     "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "@babel/runtime": "7.17.8",
+    "@babel/runtime": "^7.7.6",
-    "@chenfengyuan/vue-qrcode": "2.0.0",
+    "@chenfengyuan/vue-qrcode": "^1.0.0",
-    "@fortawesome/fontawesome-svg-core": "1.3.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
-    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^5.15.1",
-    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
-    "@fortawesome/vue-fontawesome": "3.0.0-5",
+    "@fortawesome/vue-fontawesome": "^2.0.0",
-    "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
+    "body-scroll-lock": "^2.6.4",
-    "@vuelidate/core": "2.0.0-alpha.41",
+    "chromatism": "^3.0.0",
-    "@vuelidate/validators": "2.0.0-alpha.27",
+    "cropperjs": "^1.4.3",
-    "body-scroll-lock": "2.7.1",
+    "diff": "^3.0.1",
-    "chromatism": "3.0.0",
+    "escape-html": "^1.0.3",
-    "click-outside-vue3": "4.0.1",
+    "localforage": "^1.5.0",
-    "cropperjs": "1.5.12",
+    "parse-link-header": "^1.0.1",
-    "diff": "3.5.0",
+    "phoenix": "^1.3.0",
-    "escape-html": "1.0.3",
+    "portal-vue": "^2.1.4",
-    "js-cookie": "^3.0.1",
+    "v-click-outside": "^2.1.1",
-    "localforage": "1.10.0",
+    "vue": "^2.6.11",
-    "mfm-js": "^0.22.1",
+    "vue-chat-scroll": "^1.2.1",
-    "parse-link-header": "1.0.1",
+    "vue-i18n": "^7.3.2",
-    "phoenix": "1.6.2",
+    "vue-router": "^3.0.1",
-    "punycode.js": "2.1.0",
+    "vue-template-compiler": "^2.6.11",
-    "qrcode": "1",
+    "vuelidate": "^0.7.4",
-    "ruffle-mirror": "2021.12.31",
+    "vuex": "^3.0.1"
-    "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.17.8",
+    "@babel/core": "^7.7.5",
-    "@babel/plugin-transform-runtime": "7.17.0",
+    "@babel/plugin-transform-runtime": "^7.7.6",
-    "@babel/preset-env": "7.16.11",
+    "@babel/preset-env": "^7.7.6",
-    "@babel/register": "7.17.7",
+    "@babel/register": "^7.7.4",
-    "@intlify/vue-i18n-loader": "^5.0.0",
+    "@ungap/event-target": "^0.1.0",
-    "@ungap/event-target": "0.2.3",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
-    "@vue/babel-helper-vue-jsx-merge-props": "1.2.1",
+    "@vue/babel-plugin-transform-vue-jsx": "^1.1.2",
-    "@vue/babel-plugin-jsx": "1.1.1",
+    "@vue/test-utils": "^1.0.0-beta.26",
-    "@vue/compiler-sfc": "^3.1.0",
+    "autoprefixer": "^6.4.0",
-    "@vue/test-utils": "2.0.0-rc.17",
+    "babel-eslint": "^7.0.0",
-    "autoprefixer": "6.7.7",
+    "babel-loader": "^8.0.6",
-    "babel-eslint": "7.2.3",
+    "babel-plugin-lodash": "^3.3.4",
-    "babel-loader": "8.2.4",
+    "chai": "^3.5.0",
-    "babel-plugin-lodash": "3.3.4",
+    "chalk": "^1.1.3",
-    "chai": "3.5.0",
+    "chromedriver": "^2.21.2",
-    "chalk": "1.1.3",
+    "connect-history-api-fallback": "^1.1.0",
-    "chromedriver": "87.0.7",
+    "cross-spawn": "^4.0.2",
-    "connect-history-api-fallback": "1.6.0",
+    "css-loader": "^0.28.0",
-    "copy-webpack-plugin": "6.4.1",
+    "custom-event-polyfill": "^1.0.7",
-    "cross-spawn": "4.0.2",
+    "eslint": "^5.16.0",
-    "css-loader": "0.28.11",
+    "eslint-config-standard": "^12.0.0",
-    "custom-event-polyfill": "1.0.7",
+    "eslint-friendly-formatter": "^2.0.5",
-    "eslint": "5.16.0",
+    "eslint-loader": "^2.1.0",
-    "eslint-config-standard": "12.0.0",
+    "eslint-plugin-import": "^2.13.0",
-    "eslint-friendly-formatter": "2.0.7",
+    "eslint-plugin-node": "^7.0.0",
-    "eslint-loader": "2.2.1",
+    "eslint-plugin-promise": "^4.0.0",
-    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-node": "7.0.1",
+    "eslint-plugin-vue": "^5.2.2",
-    "eslint-plugin-promise": "4.3.1",
+    "eventsource-polyfill": "^0.9.6",
-    "eslint-plugin-standard": "4.1.0",
+    "express": "^4.13.3",
-    "eslint-plugin-vue": "5.2.3",
+    "file-loader": "^3.0.1",
-    "eventsource-polyfill": "0.9.6",
+    "function-bind": "^1.0.2",
-    "express": "4.17.3",
+    "html-webpack-plugin": "^3.0.0",
-    "file-loader": "3.0.1",
+    "http-proxy-middleware": "^0.17.2",
-    "function-bind": "1.1.1",
+    "inject-loader": "^2.0.1",
-    "html-webpack-plugin": "3.2.0",
+    "iso-639-1": "^2.0.3",
-    "http-proxy-middleware": "0.21.0",
+    "isparta-loader": "^2.0.0",
-    "inject-loader": "2.0.1",
+    "json-loader": "^0.5.4",
-    "iso-639-1": "2.1.13",
+    "karma": "^3.0.0",
-    "isparta-loader": "2.0.0",
+    "karma-coverage": "^1.1.1",
-    "json-loader": "0.5.7",
+    "karma-firefox-launcher": "^1.1.0",
-    "karma": "6.3.17",
+    "karma-mocha": "^1.2.0",
-    "karma-coverage": "1.1.2",
+    "karma-mocha-reporter": "^2.2.1",
-    "karma-firefox-launcher": "1.3.0",
+    "karma-sinon-chai": "^2.0.2",
-    "karma-mocha": "2.0.1",
+    "karma-sourcemap-loader": "^0.3.7",
-    "karma-mocha-reporter": "2.2.5",
+    "karma-spec-reporter": "0.0.26",
-    "karma-sinon-chai": "2.0.2",
+    "karma-webpack": "^4.0.0-rc.3",
-    "karma-sourcemap-loader": "0.3.8",
+    "lodash": "^4.16.4",
-    "karma-spec-reporter": "0.0.33",
+    "lolex": "^1.4.0",
-    "karma-webpack": "4.0.2",
+    "mini-css-extract-plugin": "^0.5.0",
-    "lodash": "4.17.21",
+    "mocha": "^3.1.0",
-    "lolex": "1.6.0",
+    "nightwatch": "^0.9.8",
-    "mini-css-extract-plugin": "0.12.0",
+    "opn": "^4.0.2",
-    "mocha": "3.5.3",
+    "ora": "^0.3.0",
-    "nightwatch": "0.9.21",
+    "postcss-loader": "^3.0.0",
-    "opn": "4.0.2",
+    "raw-loader": "^0.5.1",
-    "ora": "0.4.1",
+    "sass": "^1.17.3",
-    "postcss-loader": "3.0.0",
+    "sass-loader": "git://github.com/webpack-contrib/sass-loader",
-    "raw-loader": "0.5.1",
-    "sass": "1.20.1",
-    "sass-loader": "7.2.0",
     "selenium-server": "2.53.1",
-    "semver": "5.7.1",
+    "semver": "^5.3.0",
-    "serviceworker-webpack-plugin": "1.0.1",
+    "serviceworker-webpack-plugin": "^1.0.0",
-    "shelljs": "0.8.5",
+    "shelljs": "^0.7.4",
-    "sinon": "2.4.1",
+    "sinon": "^2.1.0",
-    "sinon-chai": "2.14.0",
+    "sinon-chai": "^2.8.0",
-    "stylelint": "13.6.1",
+    "stylelint": "^13.6.1",
-    "stylelint-config-standard": "20.0.0",
+    "stylelint-config-standard": "^20.0.0",
-    "stylelint-rscss": "0.4.0",
+    "stylelint-rscss": "^0.4.0",
-    "url-loader": "1.1.2",
+    "url-loader": "^1.1.2",
-    "vue-loader": "^16.0.0",
+    "vue-loader": "^14.0.0",
-    "vue-style-loader": "4.1.2",
+    "vue-style-loader": "^4.0.0",
-    "webpack": "4.46.0",
+    "webpack": "^4.0.0",
-    "webpack-dev-middleware": "3.7.3",
+    "webpack-dev-middleware": "^3.6.0",
-    "webpack-hot-middleware": "2.24.3",
+    "webpack-hot-middleware": "^2.12.2",
-    "webpack-merge": "0.20.0"
+    "webpack-merge": "^0.14.1"
   },
   "engines": {
     "node": ">= 4.0.0",

renovate.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:base"
-  ]
-}

src/App.js

@@ -1,9 +1,10 @@
 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'
-import ShoutPanel from './components/shout_panel/shout_panel.vue'
+import ChatPanel from './components/chat_panel/chat_panel.vue'
 import SettingsModal from './components/settings_modal/settings_modal.vue'
 import MediaModal from './components/media_modal/media_modal.vue'
 import SideDrawer from './components/side_drawer/side_drawer.vue'
@@ -14,19 +15,17 @@ import UserReportingModal from './components/user_reporting_modal/user_reporting
 import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
 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: defineAsyncComponent(() => import('./components/notifications/notifications.vue')),
+    Notifications,
     InstanceSpecificPanel,
     FeaturesPanel,
     WhoToFollowPanel,
-    ShoutPanel,
+    ChatPanel,
     MediaModal,
     SideDrawer,
     MobilePostStatusButton,
@@ -46,74 +45,49 @@ export default {
     this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
     window.addEventListener('resize', this.updateMobileState)
   },
-  unmounted () {
+  destroyed () {
     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 },
+    background () {
-    instanceBackground () {
+      return this.currentUser.background_image || this.$store.state.instance.background
-      return this.mergedConfig.hideInstanceWallpaper
-        ? null
-        : this.$store.state.instance.background
     },
-    background () { return this.userBackground || this.instanceBackground },
     bgStyle () {
-      if (this.background) {
+      return {
+        'background-image': `url(${this.background})`
+      }
+    },
+    bgAppStyle () {
       return {
         '--body-background-image': `url(${this.background})`
       }
-      }
     },
-    shout () { return this.$store.state.shout.joined },
+    chat () { return this.$store.state.chat.channel.state === '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 () {
+    isMobileLayout () { return this.$store.state.interface.mobileLayout },
-      return this.$store.getters.mergedConfig.alwaysShowNewPostButton || false
-    },
-    hideShoutbox () {
-      return this.$store.getters.mergedConfig.hideShoutbox
-    },
-    layoutType () { return this.$store.state.interface.layoutType },
     privateMode () { return this.$store.state.instance.private },
-    reverseLayout () {
+    sidebarAlign () {
-      const { thirdColumnMode, sidebarRight: reverseSetting } = this.$store.getters.mergedConfig
+      return {
-      if (this.layoutType !== 'wide') {
+        'order': this.$store.state.instance.sidebarRight ? 99 : 0
-        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 () {
-      this.$store.dispatch('setLayoutWidth', windowWidth())
+      const mobileLayout = windowWidth() <= 800
-      this.$store.dispatch('setLayoutHeight', windowHeight())
+      const layoutHeight = windowHeight()
+      const changed = mobileLayout !== this.isMobileLayout
+      if (changed) {
+        this.$store.dispatch('setMobileLayout', mobileLayout)
+      }
+      this.$store.dispatch('setLayoutHeight', layoutHeight)
     }
   }
 }

src/App.vue

@@ -1,40 +1,40 @@
 <template>
   <div
-    id="app-loaded"
+    id="app"
-    :style="bgStyle"
+    :style="bgAppStyle"
   >
     <div
       id="app_bg_wrapper"
       class="app-bg-wrapper"
+      :style="bgStyle"
     />
-    <MobileNav v-if="layoutType === 'mobile'" />
+    <MobileNav v-if="isMobileLayout" />
     <DesktopNav v-else />
-    <Notifications v-if="currentUser" />
+    <div class="app-bg-wrapper app-container-wrapper" />
     <div
       id="content"
-      class="app-layout container"
+      class="container underlay"
-      :class="classes"
     >
-      <div class="underlay" />
       <div
-        id="sidebar"
+        class="sidebar-flexer mobile-hidden"
-        class="column -scrollable"
+        :style="sidebarAlign"
-        :class="{ '-show-scrollbar': showScrollbars }"
       >
+        <div class="sidebar-bounds">
+          <div class="sidebar-scroller">
+            <div class="sidebar">
               <user-panel />
-        <template v-if="layoutType !== 'mobile'">
+              <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" />
-          <div id="notifs-sidebar" />
+                <notifications v-if="currentUser" />
-        </template>
               </div>
-      <div
+            </div>
-        id="main-scroller"
+          </div>
-        class="column main"
+        </div>
-        :class="{ '-full-height': isChats }"
+      </div>
-      >
+      <div class="main">
         <div
           v-if="!currentUser"
           class="login-hint panel panel-default"
@@ -48,24 +48,18 @@
         </div>
         <router-view />
       </div>
-      <div
-        id="notifs-column"
-        class="column -scrollable"
-        :class="{ '-show-scrollbar': showScrollbars }"
-      />
-    </div>
       <media-modal />
-    <shout-panel
+    </div>
-      v-if="currentUser && shout && !hideShoutbox"
+    <chat-panel
+      v-if="currentUser && chat"
       :floating="true"
-      class="floating-shout mobile-hidden"
+      class="floating-chat mobile-hidden"
-      :class="{ '-left': shoutboxPosition }"
     />
     <MobilePostStatusButton />
     <UserReportingModal />
     <PostStatusModal />
     <SettingsModal />
-    <div id="modal" />
+    <portal-target name="modal" />
     <GlobalNoticeList />
   </div>
 </template>

src/_variables.scss

@@ -30,5 +30,3 @@ $fallback--attachmentRadius: 10px;
 $fallback--chatMessageRadius: 10px;
 
 $fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
-
-$status-margin: 0.75em;

src/boot/after_store.js

@@ -1,19 +1,12 @@
-import { createApp } from 'vue'
+import Vue from 'vue'
-import { createRouter, createWebHistory } from 'vue-router'
+import VueRouter from 'vue-router'
-import vClickOutside from 'click-outside-vue3'
-
-import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
-
-import App from '../App.vue'
 import routes from './routes'
-import VBodyScrollLock from 'src/directives/body_scroll_lock'
+import App from '../App.vue'
-
+import { windowWidth } from '../services/window_utils/window_utils'
-import { 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'
 import { applyTheme } from '../services/style_setter/style_setter.js'
-import FaviconService from '../services/favicon_service/favicon_service.js'
 
 let staticInitialResults = null
 
@@ -57,7 +50,6 @@ const getInstanceConfig = async ({ store }) => {
       const vapidPublicKey = data.pleroma.vapid_public_key
 
       store.dispatch('setInstanceOption', { name: 'textlimit', value: textlimit })
-      store.dispatch('setInstanceOption', { name: 'accountApprovalRequired', value: data.approval_required })
 
       if (vapidPublicKey) {
         store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey })
@@ -121,7 +113,6 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
   copyInstanceOption('nsfwCensorImage')
   copyInstanceOption('background')
   copyInstanceOption('hidePostStats')
-  copyInstanceOption('hideBotIndication')
   copyInstanceOption('hideUserStats')
   copyInstanceOption('hideFilteredStatuses')
   copyInstanceOption('logo')
@@ -247,7 +238,7 @@ const getNodeInfo = async ({ store }) => {
       store.dispatch('setInstanceOption', { name: 'registrationOpen', value: data.openRegistrations })
       store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
       store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') })
-      store.dispatch('setInstanceOption', { name: 'shoutAvailable', value: features.includes('chat') })
+      store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') })
       store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
       store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
       store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
@@ -332,10 +323,8 @@ const checkOAuthToken = async ({ store }) => {
 }
 
 const afterStoreSetup = async ({ store, i18n }) => {
-  store.dispatch('setLayoutWidth', windowWidth())
+  const width = windowWidth()
-  store.dispatch('setLayoutHeight', windowHeight())
+  store.dispatch('setMobileLayout', width <= 800)
-
-  FaviconService.initFaviconService()
 
   const overrides = window.___pleromafe_dev_overrides || {}
   const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
@@ -373,32 +362,25 @@ const afterStoreSetup = async ({ store, i18n }) => {
   getTOS({ store })
   getStickers({ store })
 
-  const router = createRouter({
+  const router = new VueRouter({
-    history: createWebHistory(),
+    mode: 'history',
     routes: routes(store),
     scrollBehavior: (to, _from, savedPosition) => {
       if (to.matched.some(m => m.meta.dontScroll)) {
         return false
       }
-      return savedPosition || { left: 0, top: 0 }
+      return savedPosition || { x: 0, y: 0 }
     }
   })
 
-  const app = createApp(App)
+  /* eslint-disable no-new */
-
+  return new Vue({
-  app.use(router)
+    router,
-  app.use(store)
+    store,
-  app.use(i18n)
+    i18n,
-
+    el: '#app',
-  app.use(vClickOutside)
+    render: h => h(App)
-  app.use(VBodyScrollLock)
+  })
-
-  app.component('FAIcon', FontAwesomeIcon)
-  app.component('FALayers', FontAwesomeLayers)
-
-  app.mount('#app')
-
-  return app
 }
 
 export default afterStoreSetup

src/boot/routes.js

@@ -16,7 +16,7 @@ import FollowRequests from 'components/follow_requests/follow_requests.vue'
 import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
 import Notifications from 'components/notifications/notifications.vue'
 import AuthForm from 'components/auth_form/auth_form.js'
-import ShoutPanel from 'components/shout_panel/shout_panel.vue'
+import ChatPanel from 'components/chat_panel/chat_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'
@@ -46,7 +46,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 +62,14 @@ 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, props: () => ({ disableTeleport: true }), beforeEnter: validateAuthenticatedRoute },
+    { name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute },
     { name: 'login', path: '/login', component: AuthForm },
-    { name: 'shout-panel', path: '/shout-panel', component: ShoutPanel, props: () => ({ floating: false }) },
+    { name: 'chat-panel', path: '/chat-panel', component: ChatPanel, 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 }
   ]
 
   if (store.state.instance.pleromaChatMessagesAvailable) {

src/components/about/about.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="column-inner">
+  <div class="sidebar">
     <instance-specific-panel v-if="showInstanceSpecificPanel" />
     <staff-panel />
     <terms-of-service-panel />

src/components/account_actions/account_actions.js

@@ -35,12 +35,12 @@ const AccountActions = {
       this.$store.dispatch('unblockUser', this.user.id)
     },
     reportUser () {
-      this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
+      this.$store.dispatch('openUserReportingModal', this.user.id)
     },
     openChat () {
       this.$router.push({
         name: 'chat',
-        params: { username: this.$store.state.users.currentUser.screen_name, recipient_id: this.user.id }
+        params: { recipient_id: this.user.id }
       })
     }
   },

src/components/account_actions/account_actions.vue

@@ -4,21 +4,23 @@
       trigger="click"
       placement="bottom"
       :bound-to="{ x: 'container' }"
-      remove-padding
     >
-      <template v-slot:content>
+      <div
+        slot="content"
+        class="account-tools-popover"
+      >
         <div class="dropdown-menu">
           <template v-if="relationship.following">
             <button
               v-if="relationship.showing_reblogs"
-              class="btn button-default dropdown-item"
+              class="btn btn-default dropdown-item"
               @click="hideRepeats"
             >
               {{ $t('user_card.hide_repeats') }}
             </button>
             <button
               v-if="!relationship.showing_reblogs"
-              class="btn button-default dropdown-item"
+              class="btn btn-default dropdown-item"
               @click="showRepeats"
             >
               {{ $t('user_card.show_repeats') }}
@@ -30,41 +32,42 @@
           </template>
           <button
             v-if="relationship.blocking"
-            class="btn button-default btn-block dropdown-item"
+            class="btn btn-default btn-block dropdown-item"
             @click="unblockUser"
           >
             {{ $t('user_card.unblock') }}
           </button>
           <button
             v-else
-            class="btn button-default btn-block dropdown-item"
+            class="btn btn-default btn-block dropdown-item"
             @click="blockUser"
           >
             {{ $t('user_card.block') }}
           </button>
           <button
-            class="btn button-default btn-block dropdown-item"
+            class="btn btn-default btn-block dropdown-item"
             @click="reportUser"
           >
             {{ $t('user_card.report') }}
           </button>
           <button
             v-if="pleromaChatMessagesAvailable"
-            class="btn button-default btn-block dropdown-item"
+            class="btn btn-default btn-block dropdown-item"
             @click="openChat"
           >
             {{ $t('user_card.message') }}
           </button>
         </div>
-      </template>
+      </div>
-      <template v-slot:trigger>
+      <div
-        <button class="button-unstyled ellipsis-button">
+        slot="trigger"
+        class="btn btn-default ellipsis-button"
+      >
         <FAIcon
           class="icon"
           icon="ellipsis-v"
         />
-        </button>
+      </div>
-      </template>
     </Popover>
   </div>
 </template>
@@ -74,7 +77,12 @@
 <style lang="scss">
 @import '../../_variables.scss';
 .AccountActions {
+  button.dropdown-item {
+    margin-left: 0;
+  }
+
   .ellipsis-button {
+    cursor: pointer;
     width: 2.5em;
     margin: -0.5em 0;
     padding: 0.5em 0;

src/components/async_component_error/async_component_error.vue

@@ -8,7 +8,7 @@
         {{ $t('general.error_retry') }}
       </p>
       <button
-        class="btn button-default"
+        class="btn"
         @click="retry"
       >
         {{ $t('general.retry') }}
@@ -19,7 +19,6 @@
 
 <script>
 export default {
-  emits: ['resetAsyncComponent'],
   methods: {
     retry () {
       this.$emit('resetAsyncComponent')

src/components/attachment/attachment.js

@@ -1,5 +1,4 @@
 import StillImage from '../still-image/still-image.vue'
-import Flash from '../flash/flash.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
 import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
@@ -9,80 +8,43 @@ import {
   faFile,
   faMusic,
   faImage,
-  faVideo,
+  faVideo
-  faPlayCircle,
-  faTimes,
-  faStop,
-  faSearchPlus,
-  faTrashAlt,
-  faPencilAlt,
-  faAlignRight
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faFile,
   faMusic,
   faImage,
-  faVideo,
+  faVideo
-  faPlayCircle,
-  faTimes,
-  faStop,
-  faSearchPlus,
-  faTrashAlt,
-  faPencilAlt,
-  faAlignRight
 )
 
 const Attachment = {
   props: [
     'attachment',
-    'description',
-    'hideDescription',
     'nsfw',
     'size',
+    'allowPlay',
     'setMedia',
-    'remove',
+    'naturalSizeLoad'
-    '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: {
-    Flash,
     StillImage,
     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'
+      return this.size === 'hide' || this.type === 'unknown'
-    },
-    useContainFit () {
-      return this.$store.getters.mergedConfig.useContainFit
     },
     placeholderName () {
       if (this.attachment.description === '' || !this.attachment.description) {
@@ -106,33 +68,24 @@ const Attachment = {
       return this.nsfw && this.hideNsfwLocal && !this.showHidden
     },
     isEmpty () {
-      return (this.type === 'html' && !this.attachment.oembed)
+      return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
+    },
+    isSmall () {
+      return this.size === 'small'
+    },
+    fullwidth () {
+      if (this.size === 'hide') return false
+      return this.type === 'html' || this.type === 'audio' || this.type === 'unknown'
     },
     useModal () {
-      let modalTypes = []
+      const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio']
-      switch (this.size) {
+        : this.mergedConfig.playVideosInModal
-        case 'hide':
+          ? ['image', 'video']
-        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') {
@@ -141,37 +94,12 @@ const Attachment = {
     },
     openModal (event) {
       if (this.useModal) {
-        this.$emit('setMedia')
+        event.stopPropagation()
-        this.$store.dispatch('setCurrentMedia', this.attachment)
+        event.preventDefault()
-      } else if (this.type === 'unknown') {
+        this.setMedia()
-        window.open(this.attachment.url)
+        this.$store.dispatch('setCurrent', this.attachment)
       }
     },
-    openModalForce (event) {
-      this.$emit('setMedia')
-      this.$store.dispatch('setCurrentMedia', this.attachment)
-    },
-    onEdit (event) {
-      this.edit && this.edit(this.attachment, event)
-    },
-    onRemove () {
-      this.remove && this.remove(this.attachment)
-    },
-    onShiftUp () {
-      this.shiftUp && this.shiftUp(this.attachment)
-    },
-    onShiftDn () {
-      this.shiftDn && this.shiftDn(this.attachment)
-    },
-    stopFlash () {
-      this.$refs.flash.closePlayer()
-    },
-    setFlashLoaded (event) {
-      this.flashLoaded = event
-    },
-    toggleDescription () {
-      this.showDescription = !this.showDescription
-    },
     toggleHidden (event) {
       if (
         (this.mergedConfig.useOneClickNsfw && !this.showHidden) &&
@@ -198,7 +126,7 @@ const Attachment = {
     onImageLoad (image) {
       const width = image.naturalWidth
       const height = image.naturalHeight
-      this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height })
+      this.naturalSizeLoad && this.naturalSizeLoad({ width, height })
     }
   }
 }

src/components/attachment/attachment.scss

@@ -1,268 +0,0 @@
-@import '../../_variables.scss';
-
-.Attachment {
-  display: inline-flex;
-  flex-direction: column;
-  position: relative;
-  align-self: flex-start;
-  line-height: 0;
-  height: 100%;
-  border-style: solid;
-  border-width: 1px;
-  border-radius: $fallback--attachmentRadius;
-  border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-
-  .attachment-wrapper {
-    flex: 1 1 auto;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .description-container {
-    flex: 0 1 0;
-    display: flex;
-    padding-top: 0.5em;
-    z-index: 1;
-
-    p {
-      flex: 1;
-      text-align: center;
-      line-height: 1.5;
-      padding: 0.5em;
-      margin: 0;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-
-    &.-static {
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      padding-top: 0;
-      background: var(--popover);
-      box-shadow: var(--popupShadow);
-    }
-  }
-
-  .description-field {
-    flex: 1;
-    min-width: 0;
-  }
-
-  & .placeholder-container,
-  & .image-container,
-  & .audio-container,
-  & .video-container,
-  & .flash-container,
-  & .oembed-container {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
-
-  .image-container {
-    .image {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  & .flash-container,
-  & .video-container {
-    & .flash,
-    & video {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-      align-self: center;
-    }
-  }
-
-  .audio-container {
-    display: flex;
-    align-items: flex-end;
-
-    audio {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .placeholder-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding-top: 0.5em;
-  }
-
-
-  .play-icon {
-    position: absolute;
-    font-size: 64px;
-    top: calc(50% - 32px);
-    left: calc(50% - 32px);
-    color: rgba(255, 255, 255, 0.75);
-    text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
-
-    &::before {
-      margin: 0;
-    }
-  }
-
-  .attachment-buttons {
-    display: flex;
-    position: absolute;
-    right: 0;
-    top: 0;
-    margin-top: 0.5em;
-    margin-right: 0.5em;
-    z-index: 1;
-
-    .attachment-button {
-      padding: 0;
-      border-radius: $fallback--tooltipRadius;
-      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-      text-align: center;
-      width: 2em;
-      height: 2em;
-      margin-left: 0.5em;
-      font-size: 1.25em;
-      // TODO: theming? hard to theme with unknown background image color
-      background: rgba(230, 230, 230, 0.7);
-
-      .svg-inline--fa {
-        color: rgba(0, 0, 0, 0.6);
-      }
-
-      &:hover .svg-inline--fa {
-        color: rgba(0, 0, 0, 0.9);
-      }
-    }
-  }
-
-  .oembed-container {
-    line-height: 1.2em;
-    flex: 1 0 100%;
-    width: 100%;
-    margin-right: 15px;
-    display: flex;
-
-    img {
-      width: 100%;
-    }
-
-    .image {
-      flex: 1;
-      img {
-        border: 0px;
-        border-radius: 5px;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-
-    .text {
-      flex: 2;
-      margin: 8px;
-      word-break: break-all;
-      h1 {
-        font-size: 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;
-    }
-  }
-}

src/components/attachment/attachment.vue

@@ -1,8 +1,7 @@
 <template>
-  <button
+  <div
     v-if="usePlaceholder"
-    class="Attachment -placeholder button-unstyled"
+    :class="{ 'fullwidth': fullwidth }"
-    :class="classNames"
     @click="openModal"
   >
     <a
@@ -12,53 +11,20 @@
       :href="attachment.url"
       :alt="attachment.description"
       :title="attachment.description"
-      @click.prevent
     >
       <FAIcon :icon="placeholderIconClass" />
-      <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ edit ? '' : placeholderName }}
+      <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
     </a>
-    <div
-      v-if="edit || remove"
-      class="attachment-buttons"
-    >
-      <button
-        v-if="remove"
-        class="button-unstyled attachment-button"
-        @click.prevent="onRemove"
-      >
-        <FAIcon icon="trash-alt" />
-      </button>
   </div>
-    <div
-      v-if="size !== 'hide' && !hideDescription && (edit || localDescription || showDescription)"
-      class="description-container"
-      :class="{ '-static': !edit }"
-    >
-      <input
-        v-if="edit"
-        v-model="localDescription"
-        type="text"
-        class="description-field"
-        :placeholder="$t('post_status.media_description')"
-        @keydown.enter.prevent=""
-      >
-      <p v-else>
-        {{ localDescription }}
-      </p>
-    </div>
-  </button>
   <div
     v-else
-    class="Attachment"
-    :class="classNames"
-  >
-    <div
     v-show="!isEmpty"
-      class="attachment-wrapper"
+    class="attachment"
+    :class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
   >
     <a
       v-if="hidden"
-        class="image-container"
+      class="image-attachment"
       :href="attachment.url"
       :alt="attachment.description"
       :title="attachment.description"
@@ -68,6 +34,7 @@
         :key="nsfwImage"
         class="nsfw"
         :src="nsfwImage"
+        :class="{'small': isSmall}"
       >
       <FAIcon
         v-if="type === 'video'"
@@ -76,74 +43,22 @@
       />
     </a>
     <div
-        v-if="!hidden"
+      v-if="nsfw && hideNsfwLocal && !hidden"
-        class="attachment-buttons"
+      class="hider"
     >
-        <button
+      <a
-          v-if="type === 'flash' && flashLoaded"
+        href="#"
-          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"
-        >
+      >Hide</a>
-          <FAIcon icon="times" />
-        </button>
-        <button
-          v-if="shiftUp"
-          class="button-unstyled attachment-button"
-          :title="$t('status.move_up')"
-          @click.prevent="onShiftUp"
-        >
-          <FAIcon icon="chevron-left" />
-        </button>
-        <button
-          v-if="shiftDn"
-          class="button-unstyled attachment-button"
-          :title="$t('status.move_down')"
-          @click.prevent="onShiftDn"
-        >
-          <FAIcon icon="chevron-right" />
-        </button>
-        <button
-          v-if="remove"
-          class="button-unstyled attachment-button"
-          :title="$t('status.remove_attachment')"
-          @click.prevent="onRemove"
-        >
-          <FAIcon icon="trash-alt" />
-        </button>
     </div>
 
     <a
       v-if="type === 'image' && (!hidden || preloadImage)"
-        class="image-container"
+      class="image-attachment"
-        :class="{'-hidden': hidden && preloadImage }"
+      :class="{'hidden': hidden && preloadImage }"
       :href="attachment.url"
       target="_blank"
-        @click.stop.prevent="openModal"
+      @click="openModal"
     >
       <StillImage
         class="image"
@@ -156,48 +71,26 @@
     </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' }"
+      :class="{'small': isSmall}"
-        :href="attachment.url"
+      :href="allowPlay ? undefined : attachment.url"
-        @click.stop.prevent="openModal"
+      @click="openModal"
     >
       <VideoAttachment
         class="video"
         :attachment="attachment"
-          :controls="!useModal"
+        :controls="allowPlay"
         @play="$emit('play')"
         @pause="$emit('pause')"
       />
       <FAIcon
-          v-if="useModal"
+        v-if="!allowPlay"
         class="play-icon"
         icon="play-circle"
       />
-      </component>
+    </a>
 
-      <span
-        v-if="type === 'audio' && !hidden"
-        class="audio-container"
-        :href="attachment.url"
-        @click.stop.prevent="openModal"
-      >
     <audio
       v-if="type === 'audio'"
       :src="attachment.url"
@@ -207,11 +100,10 @@
       @play="$emit('play')"
       @pause="$emit('pause')"
     />
-      </span>
 
     <div
       v-if="type === 'html' && attachment.oembed"
-        class="oembed-container"
+      class="oembed"
       @click.prevent="linkClicked"
     >
       <div
@@ -227,42 +119,198 @@
         <!-- 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 }"
-    >
-      <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>
   </div>
 </template>
 
 <script src="./attachment.js"></script>
 
-<style src="./attachment.scss" lang="scss"></style>
+<style lang="scss">
+@import '../../_variables.scss';
+
+.attachments {
+  display: flex;
+  flex-wrap: wrap;
+
+  .non-gallery {
+    max-width: 100%;
+  }
+
+  .placeholder {
+    display: inline-block;
+    padding: 0.3em 1em 0.3em 0;
+    color: $fallback--link;
+    color: var(--postLink, $fallback--link);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 100%;
+
+    svg {
+      color: inherit;
+    }
+  }
+
+  .nsfw-placeholder {
+    cursor: pointer;
+
+    &.loading {
+      cursor: progress;
+    }
+  }
+
+  .attachment {
+    position: relative;
+    margin-top: 0.5em;
+    align-self: flex-start;
+    line-height: 0;
+
+    border-style: solid;
+    border-width: 1px;
+    border-radius: $fallback--attachmentRadius;
+    border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    overflow: hidden;
+  }
+
+  .non-gallery.attachment {
+    &.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;
+    white-space: nowrap;
+    margin: 10px;
+    padding: 5px;
+    background: rgba(230,230,230,0.6);
+    font-weight: bold;
+    z-index: 4;
+    line-height: 1;
+    border-radius: $fallback--tooltipRadius;
+    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+  }
+
+  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>

src/components/auth_form/auth_form.js

@@ -1,4 +1,3 @@
-import { h, resolveComponent } from 'vue'
 import LoginForm from '../login_form/login_form.vue'
 import MFARecoveryForm from '../mfa_form/recovery_form.vue'
 import MFATOTPForm from '../mfa_form/totp_form.vue'
@@ -6,8 +5,8 @@ import { mapGetters } from 'vuex'
 
 const AuthForm = {
   name: 'AuthForm',
-  render () {
+  render (createElement) {
-    return h(resolveComponent(this.authForm))
+    return createElement('component', { is: this.authForm })
   },
   computed: {
     authForm () {

src/components/basic_user_card/basic_user_card.js

@@ -1,6 +1,5 @@
 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 = {
@@ -14,8 +13,7 @@ const BasicUserCard = {
   },
   components: {
     UserCard,
-    UserAvatar,
+    UserAvatar
-    RichContent
   },
   methods: {
     toggleUserExpanded () {

src/components/basic_user_card/basic_user_card.vue

@@ -4,7 +4,7 @@
       <UserAvatar
         class="avatar"
         :user="user"
-        @click.prevent="toggleUserExpanded"
+        @click.prevent.native="toggleUserExpanded"
       />
     </router-link>
     <div
@@ -25,18 +25,24 @@
         :title="user.name"
         class="basic-user-card-user-name"
       >
-        <RichContent
+        <!-- eslint-disable vue/no-v-html -->
+        <span
+          v-if="user.name_html"
           class="basic-user-card-user-name-value"
-          :html="user.name"
+          v-html="user.name_html"
-          :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
           class="basic-user-card-screen-name"
           :to="userProfileLink(user)"
         >
-          @{{ user.screen_name_ui }}
+          @{{ user.screen_name }}
         </router-link>
       </div>
       <slot />

src/components/block_card/block_card.vue

@@ -3,7 +3,7 @@
     <div class="block-card-content-container">
       <button
         v-if="blocked"
-        class="btn button-default"
+        class="btn btn-default"
         :disabled="progress"
         @click="unblockUser"
       >
@@ -16,7 +16,7 @@
       </button>
       <button
         v-else
-        class="btn button-default"
+        class="btn btn-default"
         :disabled="progress"
         @click="blockUser"
       >

src/components/bookmark_timeline/bookmark_timeline.js

@@ -9,7 +9,7 @@ const Bookmarks = {
   components: {
     Timeline
   },
-  unmounted () {
+  destroyed () {
     this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
   }
 }

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, isScrollable } from './chat_layout_utils.js'
+import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight, 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 = 10
+const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
 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.handleResize)
+    window.addEventListener('resize', this.handleLayoutChange)
   },
   mounted () {
     window.addEventListener('scroll', this.handleScroll)
@@ -52,11 +52,15 @@ const Chat = {
     }
 
     this.$nextTick(() => {
+      this.updateScrollableContainerHeight()
       this.handleResize()
     })
+    this.setChatLayout()
   },
-  unmounted () {
+  destroyed () {
     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')
   },
@@ -69,7 +73,7 @@ const Chat = {
     },
     formPlaceholder () {
       if (this.recipient) {
-        return this.$t('chats.message_user', { nickname: this.recipient.screen_name_ui })
+        return this.$t('chats.message_user', { nickname: this.recipient.screen_name })
       } else {
         return ''
       }
@@ -92,7 +96,8 @@ const Chat = {
     ...mapState({
       backendInteractor: state => state.api.backendInteractor,
       mastoUserSocketStatus: state => state.api.mastoUserSocketStatus,
-      mobileLayout: state => state.interface.layoutType === 'mobile',
+      mobileLayout: state => state.interface.mobileLayout,
+      layoutHeight: state => state.interface.layoutHeight,
       currentUser: state => state.users.currentUser
     })
   },
@@ -110,6 +115,9 @@ const Chat = {
     '$route': function () {
       this.startFetching()
     },
+    layoutHeight () {
+      this.handleResize({ expand: true })
+    },
     mastoUserSocketStatus (newValue) {
       if (newValue === WSConnectionStatus.JOINED) {
         this.fetchChat({ isFirstFetch: true })
@@ -124,6 +132,7 @@ const Chat = {
     onFilesDropped () {
       this.$nextTick(() => {
         this.handleResize()
+        this.updateScrollableContainerHeight()
       })
     },
     handleVisibilityChange () {
@@ -133,7 +142,43 @@ const Chat = {
         }
       })
     },
-    // "Sticks" scroll to bottom instead of top, helps with OSK resizing the viewport
+    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.
     handleResize (opts = {}) {
       const { expand = false, delayed = false } = opts
 
@@ -145,20 +190,29 @@ const Chat = {
       }
 
       this.$nextTick(() => {
-        const { offsetHeight = undefined } = getScrollPosition()
+        this.updateScrollableContainerHeight()
+
+        const { offsetHeight = undefined } = this.lastScrollPosition
+        this.lastScrollPosition = getScrollPosition(this.$refs.scrollable)
+
         const diff = this.lastScrollPosition.offsetHeight - offsetHeight
-        if (diff !== 0 || (!this.bottomedOut() && expand)) {
+        if (diff < 0 || (!this.bottomedOut() && expand)) {
           this.$nextTick(() => {
-            window.scrollTo({ top: window.scrollY + diff })
+            this.updateScrollableContainerHeight()
+            this.$refs.scrollable.scrollTo({
+              top: this.$refs.scrollable.scrollTop - diff,
+              left: 0
+            })
           })
         }
-        this.lastScrollPosition = getScrollPosition()
       })
     },
     scrollDown (options = {}) {
       const { behavior = 'auto', forceRead = false } = options
+      const scrollable = this.$refs.scrollable
+      if (!scrollable) { return }
       this.$nextTick(() => {
-        window.scrollTo({ top: document.documentElement.scrollHeight, behavior })
+        scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
       })
       if (forceRead) {
         this.readChat()
@@ -174,17 +228,11 @@ const Chat = {
       })
     },
     bottomedOut (offset) {
-      return isBottomedOut(offset)
+      return isBottomedOut(this.$refs.scrollable, offset)
     },
     reachedTop () {
-      return window.scrollY <= 0
+      const scrollable = this.$refs.scrollable
-    },
+      return scrollable && scrollable.scrollTop <= 0
-    cullOlderCheck () {
-      window.setTimeout(() => {
-        if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
-          this.$store.dispatch('cullOlderMessages', this.currentChatMessageService.chatId)
-        }
-      }, 5000)
     },
     handleScroll: _.throttle(function () {
       if (!this.currentChat) { return }
@@ -193,7 +241,6 @@ const Chat = {
         this.fetchChat({ maxId: this.currentChatMessageService.minId })
       } else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
         this.jumpToBottomButtonVisible = false
-        this.cullOlderCheck()
         if (this.newMessageCount > 0) {
           // Use a delay before marking as read to prevent situation where new messages
           // arrive just as you're leaving the view and messages that you didn't actually
@@ -208,9 +255,10 @@ const Chat = {
       }
     }, 200),
     handleScrollUp (positionBeforeLoading) {
-      const positionAfterLoading = getScrollPosition()
+      const positionAfterLoading = getScrollPosition(this.$refs.scrollable)
-      window.scrollTo({
+      this.$refs.scrollable.scrollTo({
-        top: getNewTopPosition(positionBeforeLoading, positionAfterLoading)
+        top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
+        left: 0
       })
     },
     fetchChat ({ isFirstFetch = false, fetchLatest = false, maxId }) {
@@ -229,18 +277,22 @@ const Chat = {
             chatService.clear(chatMessageService)
           }
 
-          const positionBeforeUpdate = getScrollPosition()
+          const positionBeforeUpdate = getScrollPosition(this.$refs.scrollable)
           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() && messages.length > 0) {
+              if (!isScrollable(this.$refs.scrollable) && messages.length > 0) {
                 this.fetchChat({ maxId: this.currentChatMessageService.minId })
               }
             })
@@ -276,6 +328,9 @@ 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 })
       })
     },

src/components/chat/chat.scss

@@ -1,22 +1,28 @@
 .chat-view {
   display: flex;
-  height: 100%;
+  height: calc(100vh - 60px);
+  width: 100%;
+
+  .chat-title {
+    // prevents chat header jumping on when the user avatar loads
+    height: 28px;
+  }
 
   .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: calc(100vh - var(--navbar-height));
+    min-height: 100%;
     margin: 0 0 0 0;
     border-radius: 10px 10px 0 0;
     border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
@@ -26,32 +32,36 @@
     }
   }
 
-  .message-list {
+  .scrollable-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 {
-    grid-template-columns: auto minmax(50%, 1fr);
+    align-items: center;
+    justify-content: space-between;
+    top: 50px;
+    display: flex;
+    z-index: 2;
+    position: sticky;
+    overflow: hidden;
   }
 
   .go-back-button {
+    cursor: pointer;
+    width: 28px;
     text-align: center;
-    line-height: 1;
+    padding: 0.6em;
-    height: 100%;
+    margin: -0.6em 0.6em -0.6em -0.6em;
-    align-self: start;
-    width: var(--__panel-heading-height-inner);
   }
 
   .jump-to-bottom-button {
@@ -88,10 +98,10 @@
     .unread-message-count {
       font-size: 0.8em;
       left: 50%;
+      transform: translate(-50%, 0);
+      border-radius: 100%;
       margin-top: -1rem;
-      padding: 0.1em;
+      padding: 0;
-      border-radius: 50px;
-      position: absolute;
     }
 
     .chat-loading-error {
@@ -105,4 +115,56 @@
       }
     }
   }
+
+  @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;
+    }
+  }
 }

src/components/chat/chat.vue

@@ -2,22 +2,23 @@
   <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 -sticky chat-view-heading"
+          class="panel-heading chat-view-heading mobile-hidden"
         >
-          <button
+          <a
-            class="button-unstyled go-back-button"
+            class="go-back-button"
             @click="goBack"
           >
             <FAIcon
               size="lg"
               icon="chevron-left"
             />
-          </button>
+          </a>
           <div class="title text-center">
             <ChatTitle
               :user="recipient"
@@ -25,9 +26,12 @@
             />
           </div>
         </div>
+        <template>
           <div
-          class="message-list"
+            ref="scrollable"
+            class="scrollable-message-list"
             :style="{ height: scrollableContainerHeight }"
+            @scroll="handleScroll"
           >
             <template v-if="!errorLoadingChat">
               <ChatMessage
@@ -88,6 +92,7 @@
               @resize="handleResize"
             />
           </div>
+        </template>
       </div>
     </div>
   </div>

src/components/chat/chat_layout_utils.js

@@ -1,9 +1,9 @@
 // Captures a scroll position
-export const getScrollPosition = () => {
+export const getScrollPosition = (el) => {
   return {
-    scrollTop: window.scrollY,
+    scrollTop: el.scrollTop,
-    scrollHeight: document.documentElement.scrollHeight,
+    scrollHeight: el.scrollHeight,
-    offsetHeight: window.innerHeight
+    offsetHeight: el.offsetHeight
   }
 }
 
@@ -13,12 +13,21 @@ export const getNewTopPosition = (previousPosition, newPosition) => {
   return previousPosition.scrollTop + (newPosition.scrollHeight - previousPosition.scrollHeight)
 }
 
-export const isBottomedOut = (offset = 0) => {
+export const isBottomedOut = (el, offset = 0) => {
-  const scrollHeight = window.scrollY + offset
+  if (!el) { return }
-  const totalHeight = document.documentElement.scrollHeight - window.innerHeight
+  const scrollHeight = el.scrollTop + offset
+  const totalHeight = el.scrollHeight - el.offsetHeight
   return totalHeight <= scrollHeight
 }
-// Returns whether or not the scrollbar is visible.
+
-export const isScrollable = () => {
+// Height of the scrollable container. The dynamic height is needed to ensure the mobile browser panel doesn't overlap or hide the posting form.
-  return document.documentElement.scrollHeight > window.innerHeight
+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
 }

src/components/chat_list/chat_list.vue

@@ -6,14 +6,11 @@
     v-else
     class="chat-list panel panel-default"
   >
-    <div class="panel-heading -sticky">
+    <div class="panel-heading">
       <span class="title">
         {{ $t("chats.chats") }}
       </span>
-      <button
+      <button @click="newChat">
-        class="button-default"
-        @click="newChat"
-      >
         {{ $t("chats.new") }}
       </button>
     </div>
@@ -23,7 +20,10 @@
         class="timeline"
       >
         <List :items="sortedChatList">
-          <template v-slot:item="{item}">
+          <template
+            slot="item"
+            slot-scope="{item}"
+          >
             <ChatListItem
               :key="item.id"
               :compact="false"

src/components/chat_list_item/chat_list_item.js

@@ -1,5 +1,5 @@
 import { mapState } from 'vuex'
-import StatusBody from '../status_content/status_content.vue'
+import StatusContent 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,
-    StatusBody
+    StatusContent
   },
   computed: {
     ...mapState({
@@ -38,14 +38,12 @@ 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: '',
-        emojis: messageEmojis,
+        statusnet_html: messagePreview,
-        raw_html: messagePreview,
         text: messagePreview,
         attachments: []
       }

src/components/chat_list_item/chat_list_item.scss

@@ -43,7 +43,7 @@
     white-space: nowrap;
     overflow: hidden;
     flex-shrink: 1;
-    line-height: var(--post-line-height);
+    line-height: 1.4em;
   }
 
   .chat-preview {
@@ -77,15 +77,18 @@
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
   }
 
-  .chat-preview-body {
+  .StatusContent {
-    --emoji-size: 1.4em;
+    img.emoji {
+      width: 1.4em;
+      height: 1.4em;
+    }
   }
 
   .time-wrapper {
-    line-height: var(--post-line-height);
+    line-height: 1.4em;
   }
 
-  .chat-preview-body {
+  .single-line {
     padding-right: 1em;
   }
 }

src/components/chat_list_item/chat_list_item.vue

@@ -29,8 +29,7 @@
         </div>
       </div>
       <div class="chat-preview">
-        <StatusBody
+        <StatusContent
-          class="chat-preview-body"
           :status="messageForStatusContent"
           :single-line="true"
         />

src/components/chat_message/chat_message.js

@@ -27,7 +27,6 @@ const ChatMessage = {
     'chatViewItem',
     'hoveredMessageChain'
   ],
-  emits: ['hover'],
   components: {
     Popover,
     Attachment,
@@ -58,9 +57,8 @@ const ChatMessage = {
     messageForStatusContent () {
       return {
         summary: '',
-        emojis: this.message.emojis,
+        statusnet_html: this.message.content,
-        raw_html: this.message.content || '',
+        text: this.message.content,
-        text: this.message.content || '',
         attachments: this.message.attachments
       }
     },

src/components/chat_message/chat_message.scss

@@ -1,7 +1,6 @@
 @import '../../_variables.scss';
 
 .chat-message-wrapper {
-
   &.hovered-message-chain {
     .animated.Avatar {
       canvas {
@@ -32,6 +31,9 @@
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
+
+    border-radius: $fallback--chatMessageRadius;
+    border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
   }
 
   .popover {
@@ -41,12 +43,6 @@
   .chat-message {
     display: flex;
     padding-bottom: 0.5em;
-
-    .status-body:hover {
-      --_still-image-img-visibility: visible;
-      --_still-image-canvas-visibility: hidden;
-      --_still-image-label-visibility: hidden;
-    }
   }
 
   .avatar-wrapper {
@@ -69,6 +65,10 @@
     &.with-media {
       width: 100%;
 
+      .gallery-row {
+        overflow: hidden;
+      }
+
       .status {
         width: 100%;
       }
@@ -92,9 +92,8 @@
   }
 
   .without-attachment {
-    .message-content {
+    .status-content {
-      // TODO figure out how to do it properly
+      &::after {
-      .RichContent::after {
         margin-right: 5.4em;
         content: " ";
         display: inline-block;
@@ -166,7 +165,6 @@
   .visible {
     opacity: 1;
   }
-
 }
 
 .chat-message-date-separator {

src/components/chat_message/chat_message.vue

@@ -50,38 +50,35 @@
                 @show="menuOpened = true"
                 @close="menuOpened = false"
               >
-                <template v-slot:content>
+                <div slot="content">
                   <div class="dropdown-menu">
                     <button
-                      class="button-default dropdown-item dropdown-item-icon"
+                      class="dropdown-item dropdown-item-icon"
                       @click="deleteMessage"
                     >
                       <FAIcon icon="times" /> {{ $t("chats.delete") }}
                     </button>
                   </div>
-                </template>
+                </div>
-                <template v-slot:trigger>
                 <button
-                    class="button-default menu-icon"
+                  slot="trigger"
+                  class="menu-icon"
                   :title="$t('chats.more')"
                 >
                   <FAIcon icon="ellipsis-h" />
                 </button>
-                </template>
               </Popover>
             </div>
             <StatusContent
-              class="message-content"
               :status="messageForStatusContent"
               :full-content="true"
             >
-              <template v-slot:footer>
               <span
+                slot="footer"
                 class="created-at"
               >
                 {{ createdAt }}
               </span>
-              </template>
             </StatusContent>
           </div>
         </div>

src/components/chat_message_date/chat_message_date.vue

@@ -5,8 +5,6 @@
 </template>
 
 <script>
-import localeService from 'src/services/locale/locale.service.js'
-
 export default {
   name: 'Timeago',
   props: ['date'],
@@ -18,7 +16,7 @@ export default {
       if (this.date.getTime() === today.getTime()) {
         return this.$t('display_date.today')
       } else {
-        return this.date.toLocaleDateString(localeService.internalToBrowserLocale(this.$i18n.locale), { day: 'numeric', month: 'long' })
+        return this.date.toLocaleDateString('en', { day: 'numeric', month: 'long' })
       }
     }
   }

src/components/chat_new/chat_new.scss

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

src/components/chat_new/chat_new.vue

@@ -1,20 +1,21 @@
 <template>
   <div
+    id="nav"
     class="panel-default panel chat-new"
   >
     <div
       ref="header"
       class="panel-heading"
     >
-      <button
+      <a
-        class="button-unstyled go-back-button"
+        class="go-back-button"
         @click="goBack"
       >
         <FAIcon
           size="lg"
           icon="chevron-left"
         />
-      </button>
+      </a>
     </div>
     <div class="input-wrap">
       <div class="input-search">

src/components/chat_panel/chat_panel.js

@@ -10,7 +10,7 @@ library.add(
   faTimes
 )
 
-const shoutPanel = {
+const chatPanel = {
   props: [ 'floating' ],
   data () {
     return {
@@ -21,12 +21,12 @@ const shoutPanel = {
   },
   computed: {
     messages () {
-      return this.$store.state.shout.messages
+      return this.$store.state.chat.messages
     }
   },
   methods: {
     submit (message) {
-      this.$store.state.shout.channel.push('new_msg', { text: message }, 10000)
+      this.$store.state.chat.channel.push('new_msg', { text: message }, 10000)
       this.currentMessage = ''
     },
     togglePanel () {
@@ -35,19 +35,7 @@ const shoutPanel = {
     userProfileLink (user) {
       return generateProfileLink(user.id, user.username, this.$store.state.instance.restrictedNicknames)
     }
-  },
-  watch: {
-    messages (newVal) {
-      const scrollEl = this.$el.querySelector('.chat-window')
-      if (!scrollEl) return
-      if (scrollEl.scrollTop + scrollEl.offsetHeight + 20 > scrollEl.scrollHeight) {
-        this.$nextTick(() => {
-          if (!scrollEl) return
-          scrollEl.scrollTop = scrollEl.scrollHeight - scrollEl.offsetHeight
-        })
-      }
-    }
   }
 }
 
-export default shoutPanel
+export default chatPanel

src/components/chat_panel/chat_panel.vue

@@ -1,50 +1,52 @@
 <template>
   <div
     v-if="!collapsed || !floating"
-    class="shout-panel"
+    class="chat-panel"
   >
     <div class="panel panel-default">
       <div
         class="panel-heading timeline-heading"
-        :class="{ 'shout-heading': floating }"
+        :class="{ 'chat-heading': floating }"
         @click.stop.prevent="togglePanel"
       >
         <div class="title">
-          {{ $t('shoutbox.title') }}
+          <span>{{ $t('shoutbox.title') }}</span>
           <FAIcon
             v-if="floating"
             icon="times"
-            class="close-icon"
           />
         </div>
       </div>
-      <div class="shout-window">
+      <div
+        v-chat-scroll
+        class="chat-window"
+      >
         <div
           v-for="message in messages"
           :key="message.id"
-          class="shout-message"
+          class="chat-message"
         >
-          <span class="shout-avatar">
+          <span class="chat-avatar">
             <img :src="message.author.avatar">
           </span>
-          <div class="shout-content">
+          <div class="chat-content">
             <router-link
-              class="shout-name"
+              class="chat-name"
               :to="userProfileLink(message.author)"
             >
               {{ message.author.username }}
             </router-link>
             <br>
-            <span class="shout-text">
+            <span class="chat-text">
               {{ message.text }}
             </span>
           </div>
         </div>
       </div>
-      <div class="shout-input">
+      <div class="chat-input">
         <textarea
           v-model="currentMessage"
-          class="shout-input-textarea"
+          class="chat-input-textarea"
           rows="1"
           @keyup.enter="submit(currentMessage)"
         />
@@ -53,11 +55,11 @@
   </div>
   <div
     v-else
-    class="shout-panel"
+    class="chat-panel"
   >
     <div class="panel panel-default">
       <div
-        class="panel-heading -stub timeline-heading shout-heading"
+        class="panel-heading stub timeline-heading chat-heading"
         @click.stop.prevent="togglePanel"
       >
         <div class="title">
@@ -72,59 +74,45 @@
   </div>
 </template>
 
-<script src="./shout_panel.js"></script>
+<script src="./chat_panel.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
 
-.floating-shout {
+.floating-chat {
   position: fixed;
-  bottom: 0.5em;
+  right: 0px;
+  bottom: 0px;
   z-index: 1000;
   max-width: 25em;
-
-  &.-left {
-    left: 0.5em;
-  }
-
-  &:not(.-left) {
-    right: 0.5em;
-  }
 }
 
-.shout-panel {
+.chat-panel {
-  .shout-heading {
+  .chat-heading {
     cursor: pointer;
 
     .icon {
       color: $fallback--text;
-      color: var(--panelText, $fallback--text);
+      color: var(--text, $fallback--text);
-      margin-right: 0.5em;
-    }
-
-    .title {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
     }
   }
 
-  .shout-window {
+  .chat-window {
     overflow-y: auto;
     overflow-x: hidden;
     max-height: 20em;
   }
 
-  .shout-window-container {
+  .chat-window-container {
     height: 100%;
   }
 
-  .shout-message {
+  .chat-message {
     display: flex;
-    padding: 0.2em 0.5em;
+    padding: 0.2em 0.5em
   }
 
-  .shout-avatar {
+  .chat-avatar {
     img {
       height: 24px;
       width: 24px;
@@ -135,9 +123,8 @@
     }
   }
 
-  .shout-input {
+  .chat-input {
     display: flex;
-
     textarea {
       flex: 1;
       margin: 0.6em;
@@ -146,7 +133,7 @@
     }
   }
 
-  .shout-panel {
+  .chat-panel {
     .title {
       display: flex;
       justify-content: space-between;

src/components/chat_title/chat_title.js

@@ -1,19 +1,18 @@
+import Vue from 'vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import UserAvatar from '../user_avatar/user_avatar.vue'
-import RichContent from 'src/components/rich_content/rich_content.jsx'
 
-export default {
+export default Vue.component('chat-title', {
   name: 'ChatTitle',
   components: {
-    UserAvatar,
+    UserAvatar
-    RichContent
   },
   props: [
     'user', 'withAvatar'
   ],
   computed: {
     title () {
-      return this.user ? this.user.screen_name_ui : ''
+      return this.user ? this.user.screen_name : ''
     },
     htmlTitle () {
       return this.user ? this.user.name_html : ''
@@ -24,4 +23,4 @@ export default {
       return generateProfileLink(user.id, user.screen_name)
     }
   }
-}
+})

src/components/chat_title/chat_title.vue

@@ -1,26 +1,25 @@
 <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>
-    <RichContent
+    <span
-      v-if="user"
       class="username"
-      :title="'@'+(user && user.screen_name_ui)"
+      v-html="htmlTitle"
-      :html="htmlTitle"
-      :emoji="user.emoji || []"
     />
   </div>
+  <!-- eslint-enable vue/no-v-html -->
 </template>
 
 <script src="./chat_title.js"></script>
@@ -33,8 +32,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-
+  align-items: center;
-  --emoji-size: 14px;
 
   .username {
     max-width: 100%;
@@ -43,17 +41,21 @@
     display: inline;
     word-wrap: break-word;
     overflow: hidden;
+    text-overflow: ellipsis;
+
+    .emoji {
+      width: 14px;
+      height: 14px;
+      vertical-align: middle;
+      object-fit: contain
+    }
   }
 
-  .avatar-container {
+  .Avatar {
-    align-self: center;
+    width: 23px;
-    line-height: 1;
+    height: 23px;
-  }
-
-  .titlebar-avatar {
     margin-right: 0.5em;
-    height: 1.5em;
+
-    width: 1.5em;
     border-radius: $fallback--avatarAltRadius;
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
 

src/components/checkbox/checkbox.vue

@@ -6,9 +6,9 @@
     <input
       type="checkbox"
       :disabled="disabled"
-      :checked="modelValue"
+      :checked="checked"
-      :indeterminate="indeterminate"
+      :indeterminate.prop="indeterminate"
-      @change="$emit('update:modelValue', $event.target.checked)"
+      @change="$emit('change', $event.target.checked)"
     >
     <i class="checkbox-indicator" />
     <span
@@ -22,9 +22,12 @@
 
 <script>
 export default {
-  emits: ['update:modelValue'],
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
   props: [
-    'modelValue',
+    'checked',
     'indeterminate',
     'disabled'
   ]

src/components/color_input/color_input.vue

@@ -11,28 +11,28 @@
     </label>
     <Checkbox
       v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
-      :model-value="present"
+      :checked="present"
       :disabled="disabled"
       class="opt"
-      @update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
+      @change="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
     />
     <div class="input color-input-field">
       <input
         :id="name + '-t'"
         class="textColor unstyled"
         type="text"
-        :value="modelValue || fallback"
+        :value="value || fallback"
         :disabled="!present || disabled"
-        @input="$emit('update:modelValue', $event.target.value)"
+        @input="$emit('input', $event.target.value)"
       >
       <input
         v-if="validColor"
         :id="name"
         class="nativeColor unstyled"
         type="color"
-        :value="modelValue || fallback"
+        :value="value || fallback"
         :disabled="!present || disabled"
-        @input="$emit('update:modelValue', $event.target.value)"
+        @input="$emit('input', $event.target.value)"
       >
       <div
         v-if="transparentColor"
@@ -67,7 +67,7 @@ export default {
     },
     // Color value, should be required but vue cannot tell the difference
     // between "property missing" and "property set to undefined"
-    modelValue: {
+    value: {
       required: false,
       type: String,
       default: undefined
@@ -91,19 +91,18 @@ export default {
       default: true
     }
   },
-  emits: ['update:modelValue'],
   computed: {
     present () {
-      return typeof this.modelValue !== 'undefined'
+      return typeof this.value !== 'undefined'
     },
     validColor () {
-      return hex2rgb(this.modelValue || this.fallback)
+      return hex2rgb(this.value || this.fallback)
     },
     transparentColor () {
-      return this.modelValue === 'transparent'
+      return this.value === 'transparent'
     },
     computedColor () {
-      return this.modelValue && this.modelValue.startsWith('--')
+      return this.value && this.value.startsWith('--')
     }
   }
 }

src/components/conversation/conversation.js

@@ -1,19 +1,5 @@
 import { reduce, filter, findIndex, clone, get } from 'lodash'
 import Status from '../status/status.vue'
-import ThreadTree from '../thread_tree/thread_tree.vue'
-
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faAngleDoubleDown,
-  faAngleDoubleLeft,
-  faChevronLeft
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faAngleDoubleDown,
-  faAngleDoubleLeft,
-  faChevronLeft
-)
 
 const sortById = (a, b) => {
   const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
@@ -49,10 +35,7 @@ const conversation = {
   data () {
     return {
       highlight: null,
-      expanded: false,
+      expanded: false
-      threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
-      statusContentPropertiesObject: {},
-      inlineDivePosition: null
     }
   },
   props: [
@@ -70,50 +53,12 @@ const conversation = {
     }
   },
   computed: {
-    maxDepthToShowByDefault () {
-      // maxDepthInThread = max number of depths that is *visible*
-      // since our depth starts with 0 and "showing" means "showing children"
-      // there is a -2 here
-      const maxDepth = this.$store.getters.mergedConfig.maxDepthInThread - 2
-      return maxDepth >= 1 ? maxDepth : 1
-    },
-    displayStyle () {
-      return this.$store.getters.mergedConfig.conversationDisplay
-    },
-    isTreeView () {
-      return !this.isLinearView
-    },
-    treeViewIsSimple () {
-      return !this.$store.getters.mergedConfig.conversationTreeAdvanced
-    },
-    isLinearView () {
-      return this.displayStyle === 'linear'
-    },
-    shouldFadeAncestors () {
-      return this.$store.getters.mergedConfig.conversationTreeFadeAncestors
-    },
-    otherRepliesButtonPosition () {
-      return this.$store.getters.mergedConfig.conversationOtherRepliesButton
-    },
-    showOtherRepliesButtonBelowStatus () {
-      return this.otherRepliesButtonPosition === 'below'
-    },
-    showOtherRepliesButtonInsideStatus () {
-      return this.otherRepliesButtonPosition === 'inside'
-    },
-    suspendable () {
-      if (this.isTreeView) {
-        return Object.entries(this.statusContentProperties)
-          .every(([k, prop]) => !prop.replying && prop.mediaPlaying.length === 0)
-      }
-      if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
-        return this.$refs.statusComponent.every(s => s.suspendable)
-      } else {
-        return true
-      }
-    },
     hideStatus () {
-      return this.virtualHidden && this.suspendable
+      if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
+        return this.virtualHidden && this.$refs.statusComponent[0].suspendable
+      } else {
+        return this.virtualHidden
+      }
     },
     status () {
       return this.$store.state.statuses.allStatusesObject[this.statusId]
@@ -145,121 +90,6 @@ const conversation = {
 
       return sortAndFilterConversation(conversation, this.status)
     },
-    statusMap () {
-      return this.conversation.reduce((res, s) => {
-        res[s.id] = s
-        return res
-      }, {})
-    },
-    threadTree () {
-      const reverseLookupTable = this.conversation.reduce((table, status, index) => {
-        table[status.id] = index
-        return table
-      }, {})
-
-      const threads = this.conversation.reduce((a, cur) => {
-        const id = cur.id
-        a.forest[id] = this.getReplies(id)
-          .map(s => s.id)
-
-        return a
-      }, {
-        forest: {}
-      })
-
-      const walk = (forest, topLevel, depth = 0, processed = {}) => topLevel.map(id => {
-        if (processed[id]) {
-          return []
-        }
-
-        processed[id] = true
-        return [{
-          status: this.conversation[reverseLookupTable[id]],
-          id,
-          depth
-        }, walk(forest, forest[id], depth + 1, processed)].reduce((a, b) => a.concat(b), [])
-      }).reduce((a, b) => a.concat(b), [])
-
-      const linearized = walk(threads.forest, this.topLevel.map(k => k.id))
-
-      return linearized
-    },
-    replyIds () {
-      return this.conversation.map(k => k.id)
-        .reduce((res, id) => {
-          res[id] = (this.replies[id] || []).map(k => k.id)
-          return res
-        }, {})
-    },
-    totalReplyCount () {
-      const sizes = {}
-      const subTreeSizeFor = (id) => {
-        if (sizes[id]) {
-          return sizes[id]
-        }
-        sizes[id] = 1 + this.replyIds[id].map(cid => subTreeSizeFor(cid)).reduce((a, b) => a + b, 0)
-        return sizes[id]
-      }
-      this.conversation.map(k => k.id).map(subTreeSizeFor)
-      return Object.keys(sizes).reduce((res, id) => {
-        res[id] = sizes[id] - 1 // exclude itself
-        return res
-      }, {})
-    },
-    totalReplyDepth () {
-      const depths = {}
-      const subTreeDepthFor = (id) => {
-        if (depths[id]) {
-          return depths[id]
-        }
-        depths[id] = 1 + this.replyIds[id].map(cid => subTreeDepthFor(cid)).reduce((a, b) => a > b ? a : b, 0)
-        return depths[id]
-      }
-      this.conversation.map(k => k.id).map(subTreeDepthFor)
-      return Object.keys(depths).reduce((res, id) => {
-        res[id] = depths[id] - 1 // exclude itself
-        return res
-      }, {})
-    },
-    depths () {
-      return this.threadTree.reduce((a, k) => {
-        a[k.id] = k.depth
-        return a
-      }, {})
-    },
-    topLevel () {
-      const topLevel = this.conversation.reduce((tl, cur) =>
-        tl.filter(k => this.getReplies(cur.id).map(v => v.id).indexOf(k.id) === -1), this.conversation)
-      return topLevel
-    },
-    otherTopLevelCount () {
-      return this.topLevel.length - 1
-    },
-    showingTopLevel () {
-      if (this.canDive && this.diveRoot) {
-        return [this.statusMap[this.diveRoot]]
-      }
-      return this.topLevel
-    },
-    diveRoot () {
-      const statusId = this.inlineDivePosition || this.statusId
-      const isTopLevel = !this.parentOf(statusId)
-      return isTopLevel ? null : statusId
-    },
-    diveDepth () {
-      return this.canDive && this.diveRoot ? this.depths[this.diveRoot] : 0
-    },
-    diveMode () {
-      return this.canDive && !!this.diveRoot
-    },
-    shouldShowAllConversationButton () {
-      // The "show all conversation" button tells the user that there exist
-      // other toplevel statuses, so do not show it if there is only a single root
-      return this.isTreeView && this.isExpanded && this.diveMode && this.topLevel.length > 1
-    },
-    shouldShowAncestors () {
-      return this.isTreeView && this.isExpanded && this.ancestorsOf(this.diveRoot).length
-    },
     replies () {
       let i = 1
       // eslint-disable-next-line camelcase
@@ -279,71 +109,15 @@ const conversation = {
       }, {})
     },
     isExpanded () {
-      return !!(this.expanded || this.isPage)
+      return this.expanded || this.isPage
     },
     hiddenStyle () {
       const height = (this.status && this.status.virtualHeight) || '120px'
       return this.virtualHidden ? { height } : {}
-    },
-    threadDisplayStatus () {
-      return this.conversation.reduce((a, k) => {
-        const id = k.id
-        const depth = this.depths[id]
-        const status = (() => {
-          if (this.threadDisplayStatusObject[id]) {
-            return this.threadDisplayStatusObject[id]
-          }
-          if ((depth - this.diveDepth) <= this.maxDepthToShowByDefault) {
-            return 'showing'
-          } else {
-            return 'hidden'
-          }
-        })()
-
-        a[id] = status
-        return a
-      }, {})
-    },
-    statusContentProperties () {
-      return this.conversation.reduce((a, k) => {
-        const id = k.id
-        const props = (() => {
-          const def = {
-            showingTall: false,
-            expandingSubject: false,
-            showingLongSubject: false,
-            isReplying: false,
-            mediaPlaying: []
-          }
-
-          if (this.statusContentPropertiesObject[id]) {
-            return {
-              ...def,
-              ...this.statusContentPropertiesObject[id]
-            }
-          }
-          return def
-        })()
-
-        a[id] = props
-        return a
-      }, {})
-    },
-    canDive () {
-      return this.isTreeView && this.isExpanded
-    },
-    focused () {
-      return (id) => {
-        return (this.isExpanded) && id === this.highlight
-      }
-    },
-    maybeHighlight () {
-      return this.isExpanded ? this.highlight : null
     }
   },
   components: {
-    Status,
+    Status
-    ThreadTree
   },
   watch: {
     statusId (newVal, oldVal) {
@@ -358,8 +132,6 @@ const conversation = {
     expanded (value) {
       if (value) {
         this.fetchConversation()
-      } else {
-        this.resetDisplayState()
       }
     },
     virtualHidden (value) {
@@ -389,8 +161,8 @@ const conversation = {
     getReplies (id) {
       return this.replies[id] || []
     },
-    getHighlight () {
+    focused (id) {
-      return this.isExpanded ? this.highlight : null
+      return (this.isExpanded) && id === this.statusId
     },
     setHighlight (id) {
       if (!id) return
@@ -398,139 +170,15 @@ const conversation = {
       this.$store.dispatch('fetchFavsAndRepeats', id)
       this.$store.dispatch('fetchEmojiReactionsBy', id)
     },
+    getHighlight () {
+      return this.isExpanded ? this.highlight : null
+    },
     toggleExpanded () {
       this.expanded = !this.expanded
     },
     getConversationId (statusId) {
       const status = this.$store.state.statuses.allStatusesObject[statusId]
       return get(status, 'retweeted_status.statusnet_conversation_id', get(status, 'statusnet_conversation_id'))
-    },
-    setThreadDisplay (id, nextStatus) {
-      this.threadDisplayStatusObject = {
-        ...this.threadDisplayStatusObject,
-        [id]: nextStatus
-      }
-    },
-    toggleThreadDisplay (id) {
-      const curStatus = this.threadDisplayStatus[id]
-      const nextStatus = curStatus === 'showing' ? 'hidden' : 'showing'
-      this.setThreadDisplay(id, nextStatus)
-    },
-    setThreadDisplayRecursively (id, nextStatus) {
-      this.setThreadDisplay(id, nextStatus)
-      this.getReplies(id).map(k => k.id).map(id => this.setThreadDisplayRecursively(id, nextStatus))
-    },
-    showThreadRecursively (id) {
-      this.setThreadDisplayRecursively(id, 'showing')
-    },
-    setStatusContentProperty (id, name, value) {
-      this.statusContentPropertiesObject = {
-        ...this.statusContentPropertiesObject,
-        [id]: {
-          ...this.statusContentPropertiesObject[id],
-          [name]: value
-        }
-      }
-    },
-    toggleStatusContentProperty (id, name) {
-      this.setStatusContentProperty(id, name, !this.statusContentProperties[id][name])
-    },
-    leastVisibleAncestor (id) {
-      let cur = id
-      let parent = this.parentOf(cur)
-      while (cur) {
-        // if the parent is showing it means cur is visible
-        if (this.threadDisplayStatus[parent] === 'showing') {
-          return cur
-        }
-        parent = this.parentOf(parent)
-        cur = this.parentOf(cur)
-      }
-      // nothing found, fall back to toplevel
-      return this.topLevel[0] ? this.topLevel[0].id : undefined
-    },
-    diveIntoStatus (id, preventScroll) {
-      this.tryScrollTo(id)
-    },
-    diveToTopLevel () {
-      this.tryScrollTo(this.topLevelAncestorOrSelfId(this.diveRoot) || this.topLevel[0].id)
-    },
-    // only used when we are not on a page
-    undive () {
-      this.inlineDivePosition = null
-      this.setHighlight(this.statusId)
-    },
-    tryScrollTo (id) {
-      if (!id) {
-        return
-      }
-      if (this.isPage) {
-        // set statusId
-        this.$router.push({ name: 'conversation', params: { id } })
-      } else {
-        this.inlineDivePosition = id
-      }
-      // Because the conversation can be unmounted when out of sight
-      // and mounted again when it comes into sight,
-      // the `mounted` or `created` function in `status` should not
-      // contain scrolling calls, as we do not want the page to jump
-      // when we scroll with an expanded conversation.
-      //
-      // Now the method is to rely solely on the `highlight` watcher
-      // in `status` components.
-      // In linear views, all statuses are rendered at all times, but
-      // in tree views, it is possible that a change in active status
-      // removes and adds status components (e.g. an originally child
-      // status becomes an ancestor status, and thus they will be
-      // different).
-      // Here, let the components be rendered first, in order to trigger
-      // the `highlight` watcher.
-      this.$nextTick(() => {
-        this.setHighlight(id)
-      })
-    },
-    goToCurrent () {
-      this.tryScrollTo(this.diveRoot || this.topLevel[0].id)
-    },
-    statusById (id) {
-      return this.statusMap[id]
-    },
-    parentOf (id) {
-      const status = this.statusById(id)
-      if (!status) {
-        return undefined
-      }
-      const { in_reply_to_status_id: parentId } = status
-      if (!this.statusMap[parentId]) {
-        return undefined
-      }
-      return parentId
-    },
-    parentOrSelf (id) {
-      return this.parentOf(id) || id
-    },
-    // Ancestors of some status, from top to bottom
-    ancestorsOf (id) {
-      const ancestors = []
-      let cur = this.parentOf(id)
-      while (cur) {
-        ancestors.unshift(this.statusMap[cur])
-        cur = this.parentOf(cur)
-      }
-      return ancestors
-    },
-    topLevelAncestorOrSelfId (id) {
-      let cur = id
-      let parent = this.parentOf(id)
-      while (parent) {
-        cur = this.parentOf(cur)
-        parent = this.parentOf(parent)
-      }
-      return cur
-    },
-    resetDisplayState () {
-      this.undive()
-      this.threadDisplayStatusObject = {}
     }
   }
 }

src/components/conversation/conversation.vue

@@ -7,157 +7,16 @@
   >
     <div
       v-if="isExpanded"
-      class="panel-heading conversation-heading -sticky"
+      class="panel-heading conversation-heading"
     >
       <span class="title"> {{ $t('timeline.conversation') }} </span>
-      <button
+      <span v-if="collapsable">
-        v-if="collapsable"
+        <a
-        class="button-unstyled -link"
+          href="#"
           @click.prevent="toggleExpanded"
-      >
+        >{{ $t('timeline.collapse') }}</a>
-        {{ $t('timeline.collapse') }}
-      </button>
-    </div>
-    <div class="conversation-body panel-body">
-      <div
-        v-if="isTreeView"
-        class="thread-body"
-      >
-        <div
-          v-if="shouldShowAllConversationButton"
-          class="conversation-dive-to-top-level-box"
-        >
-          <i18n-t
-            keypath="status.show_all_conversation_with_icon"
-            tag="button"
-            class="button-unstyled -link"
-            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"
@@ -173,22 +32,10 @@
       :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
     :style="hiddenStyle"
@@ -201,82 +48,27 @@
 @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-left: none;
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: var(--border, $fallback--border);
     border-radius: 0;
   }
 
-  .thread-ancestor-has-other-replies .conversation-status,
+  &.-expanded {
-  .thread-ancestor:last-child .conversation-status,
+    .conversation-status {
-  .thread-ancestor:last-child .thread-ancestor-dive-box,
+      border-color: $fallback--border;
-  &:last-child .conversation-status,
+      border-color: var(--border, $fallback--border);
-  &.-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 {
+    .conversation-status:last-child {
-    margin: calc(var(--status-margin, $status-margin) / 2);
+      border-bottom: none;
+      border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
+      border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+    }
   }
 }
 </style>

src/components/desktop_nav/desktop_nav.scss

@@ -1,15 +1,13 @@
 @import '../../_variables.scss';
 
 .DesktopNav {
+  height: 50px;
   width: 100%;
-
+  position: fixed;
-  a {
-    color: var(--topBarLink, $fallback--link);
-  }
 
   .inner-nav {
     display: grid;
-    grid-template-rows: var(--navbar-height);
+    grid-template-rows: 50px;
     grid-template-columns: 2fr auto 2fr;
     grid-template-areas: "sitename logo actions";
     box-sizing: border-box;
@@ -18,12 +16,12 @@
     max-width: 980px;
   }
 
-  &.-logoLeft .inner-nav {
+  &.-logoLeft {
     grid-template-columns: auto 2fr 2fr;
     grid-template-areas: "logo sitename actions";
   }
 
-  .button-default {
+  button {
     &, svg {
       color: $fallback--text;
       color: var(--btnTopBarText, $fallback--text);
@@ -75,21 +73,20 @@
 
     img {
       display: inline-block;
-      height: var(--navbar-height);
+      height: 50px;
     }
   }
 
   .nav-icon {
     margin-left: 0.2em;
     width: 2em;
-    height: 100%;
     text-align: center;
+  }
 
-    .svg-inline--fa {
+  a, a svg {
     color: $fallback--link;
     color: var(--topBarLink, $fallback--link);
   }
-  }
 
   .sitename {
     grid-area: sitename;
@@ -101,8 +98,8 @@
 
   .item {
     flex: 1;
-    line-height: var(--navbar-height);
+    line-height: 50px;
-    height: var(--navbar-height);
+    height: 50px;
     overflow: hidden;
     display: flex;
     flex-wrap: wrap;

src/components/desktop_nav/desktop_nav.vue

@@ -34,10 +34,11 @@
         <search-bar
           v-if="currentUser || !privateMode"
           @toggled="onSearchBarToggled"
-          @click.stop
+          @click.stop.native
         />
-        <button
+        <a
-          class="button-unstyled nav-icon"
+          href="#"
+          class="nav-icon"
           @click.stop="openSettingsModal"
         >
           <FAIcon
@@ -46,33 +47,29 @@
             icon="cog"
             :title="$t('nav.preferences')"
           />
-        </button>
+        </a>
         <a
           v-if="currentUser && currentUser.role === 'admin'"
           href="/pleroma/admin/#/login-pleroma"
           class="nav-icon"
           target="_blank"
-          @click.stop
+        ><FAIcon
-        >
-          <FAIcon
           fixed-width
           class="fa-scale-110 fa-old-padding"
           icon="tachometer-alt"
           :title="$t('nav.administration')"
-          />
+        /></a>
-        </a>
+        <a
-        <button
           v-if="currentUser"
-          class="button-unstyled nav-icon"
+          href="#"
+          class="nav-icon"
           @click.prevent="logout"
-        >
+        ><FAIcon
-          <FAIcon
           fixed-width
           class="fa-scale-110 fa-old-padding"
           icon="sign-out-alt"
           :title="$t('login.logout')"
-          />
+        /></a>
-        </button>
       </div>
     </div>
   </nav>

src/components/dialog_modal/dialog_modal.vue

@@ -58,7 +58,16 @@
   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;
     }
   }

src/components/domain_mute_card/domain_mute_card.vue

@@ -6,20 +6,20 @@
     <ProgressButton
       v-if="muted"
       :click="unmuteDomain"
-      class="btn button-default"
+      class="btn btn-default"
     >
       {{ $t('domain_mute_card.unmute') }}
-      <template v-slot:progress>
+      <template slot="progress">
         {{ $t('domain_mute_card.unmute_progress') }}
       </template>
     </ProgressButton>
     <ProgressButton
       v-else
       :click="muteDomain"
-      class="btn button-default"
+      class="btn btn-default"
     >
       {{ $t('domain_mute_card.mute') }}
-      <template v-slot:progress>
+      <template slot="progress">
         {{ $t('domain_mute_card.mute_progress') }}
       </template>
     </ProgressButton>

src/components/emoji_input/emoji_input.js

@@ -31,7 +31,6 @@ library.add(
  */
 
 const EmojiInput = {
-  emits: ['update:modelValue', 'shown'],
   props: {
     suggest: {
       /**
@@ -58,7 +57,7 @@ const EmojiInput = {
       required: true,
       type: Function
     },
-    modelValue: {
+    value: {
       /**
        * Used for v-model
        */
@@ -115,8 +114,7 @@ const EmojiInput = {
       showPicker: false,
       temporarilyHideSuggestions: false,
       keepOpen: false,
-      disableClickOutside: false,
+      disableClickOutside: false
-      suggestions: []
     }
   },
   components: {
@@ -126,6 +124,21 @@ const EmojiInput = {
     padEmoji () {
       return this.$store.getters.mergedConfig.padEmoji
     },
+    suggestions () {
+      const firstchar = this.textAtCaret.charAt(0)
+      if (this.textAtCaret === firstchar) { return [] }
+      const matchedSuggestions = this.suggest(this.textAtCaret)
+      if (matchedSuggestions.length <= 0) {
+        return []
+      }
+      return take(matchedSuggestions, 5)
+        .map(({ imageUrl, ...rest }, index) => ({
+          ...rest,
+          // eslint-disable-next-line camelcase
+          img: imageUrl || '',
+          highlighted: index === this.highlighted
+        }))
+    },
     showSuggestions () {
       return this.focused &&
         this.suggestions &&
@@ -137,78 +150,52 @@ const EmojiInput = {
       return (this.wordAtCaret || {}).word || ''
     },
     wordAtCaret () {
-      if (this.modelValue && this.caret) {
+      if (this.value && this.caret) {
-        const word = Completion.wordAtPosition(this.modelValue, this.caret - 1) || {}
+        const word = Completion.wordAtPosition(this.value, this.caret - 1) || {}
         return word
       }
     }
   },
   mounted () {
-    const { root } = this.$refs
+    const slots = this.$slots.default
-    const input = root.querySelector('.emoji-input > input') || root.querySelector('.emoji-input > textarea')
+    if (!slots || slots.length === 0) return
+    const input = slots.find(slot => ['input', 'textarea'].includes(slot.tag))
     if (!input) return
     this.input = input
     this.resize()
-    input.addEventListener('blur', this.onBlur)
+    input.elm.addEventListener('blur', this.onBlur)
-    input.addEventListener('focus', this.onFocus)
+    input.elm.addEventListener('focus', this.onFocus)
-    input.addEventListener('paste', this.onPaste)
+    input.elm.addEventListener('paste', this.onPaste)
-    input.addEventListener('keyup', this.onKeyUp)
+    input.elm.addEventListener('keyup', this.onKeyUp)
-    input.addEventListener('keydown', this.onKeyDown)
+    input.elm.addEventListener('keydown', this.onKeyDown)
-    input.addEventListener('click', this.onClickInput)
+    input.elm.addEventListener('click', this.onClickInput)
-    input.addEventListener('transitionend', this.onTransition)
+    input.elm.addEventListener('transitionend', this.onTransition)
-    input.addEventListener('input', this.onInput)
+    input.elm.addEventListener('input', this.onInput)
   },
   unmounted () {
     const { input } = this
     if (input) {
-      input.removeEventListener('blur', this.onBlur)
+      input.elm.removeEventListener('blur', this.onBlur)
-      input.removeEventListener('focus', this.onFocus)
+      input.elm.removeEventListener('focus', this.onFocus)
-      input.removeEventListener('paste', this.onPaste)
+      input.elm.removeEventListener('paste', this.onPaste)
-      input.removeEventListener('keyup', this.onKeyUp)
+      input.elm.removeEventListener('keyup', this.onKeyUp)
-      input.removeEventListener('keydown', this.onKeyDown)
+      input.elm.removeEventListener('keydown', this.onKeyDown)
-      input.removeEventListener('click', this.onClickInput)
+      input.elm.removeEventListener('click', this.onClickInput)
-      input.removeEventListener('transitionend', this.onTransition)
+      input.elm.removeEventListener('transitionend', this.onTransition)
-      input.removeEventListener('input', this.onInput)
+      input.elm.removeEventListener('input', this.onInput)
     }
   },
   watch: {
     showSuggestions: function (newValue) {
       this.$emit('shown', newValue)
-    },
-    textAtCaret: async function (newWord) {
-      const firstchar = newWord.charAt(0)
-      this.suggestions = []
-      if (newWord === firstchar) return
-      const matchedSuggestions = await this.suggest(newWord)
-      // Async: cancel if textAtCaret has changed during wait
-      if (this.textAtCaret !== newWord) return
-      if (matchedSuggestions.length <= 0) return
-      this.suggestions = take(matchedSuggestions, 5)
-        .map(({ imageUrl, ...rest }) => ({
-          ...rest,
-          img: imageUrl || ''
-        }))
-    },
-    suggestions: {
-      handler (newValue) {
-        this.$nextTick(this.resize)
-      },
-      deep: true
     }
   },
   methods: {
-    focusPickerInput () {
-      const pickerEl = this.$refs.picker.$el
-      if (!pickerEl) return
-      const pickerInput = pickerEl.querySelector('input')
-      if (pickerInput) pickerInput.focus()
-    },
     triggerShowPicker () {
       this.showPicker = true
       this.$refs.picker.startEmojiLoad()
       this.$nextTick(() => {
         this.scrollIntoView()
-        this.focusPickerInput()
       })
       // This temporarily disables "click outside" handler
       // since external trigger also means click originates
@@ -219,22 +206,21 @@ const EmojiInput = {
       }, 0)
     },
     togglePicker () {
-      this.input.focus()
+      this.input.elm.focus()
       this.showPicker = !this.showPicker
       if (this.showPicker) {
         this.scrollIntoView()
         this.$refs.picker.startEmojiLoad()
-        this.$nextTick(this.focusPickerInput)
       }
     },
     replace (replacement) {
-      const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
+      const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
-      this.$emit('update:modelValue', newValue)
+      this.$emit('input', newValue)
       this.caret = 0
     },
     insert ({ insertion, keepOpen, surroundingSpace = true }) {
-      const before = this.modelValue.substring(0, this.caret) || ''
+      const before = this.value.substring(0, this.caret) || ''
-      const after = this.modelValue.substring(this.caret) || ''
+      const after = this.value.substring(this.caret) || ''
 
       /* Using a bit more smart approach to padding emojis with spaces:
        * - put a space before cursor if there isn't one already, unless we
@@ -262,16 +248,16 @@ const EmojiInput = {
         after
       ].join('')
       this.keepOpen = keepOpen
-      this.$emit('update:modelValue', newValue)
+      this.$emit('input', newValue)
       const position = this.caret + (insertion + spaceAfter + spaceBefore).length
       if (!keepOpen) {
-        this.input.focus()
+        this.input.elm.focus()
       }
 
       this.$nextTick(function () {
         // Re-focus inputbox after clicking suggestion
         // Set selection right after the replacement instead of the very end
-        this.input.setSelectionRange(position, position)
+        this.input.elm.setSelectionRange(position, position)
         this.caret = position
       })
     },
@@ -281,16 +267,16 @@ const EmojiInput = {
       if (len > 0 || suggestion) {
         const chosenSuggestion = suggestion || this.suggestions[this.highlighted]
         const replacement = chosenSuggestion.replacement
-        const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
+        const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
-        this.$emit('update:modelValue', newValue)
+        this.$emit('input', newValue)
         this.highlighted = 0
         const position = this.wordAtCaret.start + replacement.length
 
         this.$nextTick(function () {
           // Re-focus inputbox after clicking suggestion
-          this.input.focus()
+          this.input.elm.focus()
           // Set selection right after the replacement instead of the very end
-          this.input.setSelectionRange(position, position)
+          this.input.elm.setSelectionRange(position, position)
           this.caret = position
         })
         e.preventDefault()
@@ -352,7 +338,7 @@ const EmojiInput = {
       }
 
       this.$nextTick(() => {
-        const { offsetHeight } = this.input
+        const { offsetHeight } = this.input.elm
         const { picker } = this.$refs
         const pickerBottom = picker.$el.getBoundingClientRect().bottom
         if (pickerBottom > window.innerHeight) {
@@ -417,8 +403,8 @@ const EmojiInput = {
 
         // Scroll the input element to the position of the cursor
         this.$nextTick(() => {
-          this.input.blur()
+          this.input.elm.blur()
-          this.input.focus()
+          this.input.elm.focus()
         })
       }
       // Disable suggestions hotkeys if suggestions are hidden
@@ -447,7 +433,7 @@ const EmojiInput = {
       // de-focuses the element (i.e. default browser behavior)
       if (key === 'Escape') {
         if (!this.temporarilyHideSuggestions) {
-          this.input.focus()
+          this.input.elm.focus()
         }
       }
 
@@ -458,7 +444,7 @@ const EmojiInput = {
       this.showPicker = false
       this.setCaret(e)
       this.resize()
-      this.$emit('update:modelValue', e.target.value)
+      this.$emit('input', e.target.value)
     },
     onClickInput (e) {
       this.showPicker = false
@@ -483,7 +469,7 @@ const EmojiInput = {
       if (!panel) return
       const picker = this.$refs.picker.$el
       const panelBody = this.$refs['panel-body']
-      const { offsetHeight, offsetTop } = this.input
+      const { offsetHeight, offsetTop } = this.input.elm
       const offsetBottom = offsetTop + offsetHeight
 
       this.setPlacement(panelBody, panel, offsetBottom)
@@ -497,7 +483,7 @@ const EmojiInput = {
 
       if (this.placement === 'top' || (this.placement === 'auto' && this.overflowsBottom(container))) {
         target.style.top = 'auto'
-        target.style.bottom = this.input.offsetHeight + 'px'
+        target.style.bottom = this.input.elm.offsetHeight + 'px'
       }
     },
     overflowsBottom (el) {

src/components/emoji_input/emoji_input.vue

@@ -1,20 +1,18 @@
 <template>
   <div
-    ref="root"
     v-click-outside="onClickOutside"
     class="emoji-input"
     :class="{ 'with-picker': !hideEmojiButton }"
   >
     <slot />
     <template v-if="enableEmojiPicker">
-      <button
+      <div
         v-if="!hideEmojiButton"
-        class="button-unstyled emoji-picker-icon"
+        class="emoji-picker-icon"
-        type="button"
         @click.prevent="togglePicker"
       >
         <FAIcon :icon="['far', 'smile-beam']" />
-      </button>
+      </div>
       <EmojiPicker
         v-if="enableEmojiPicker"
         ref="picker"
@@ -39,7 +37,7 @@
           v-for="(suggestion, index) in suggestions"
           :key="index"
           class="autocomplete-item"
-          :class="{ highlighted: index === highlighted }"
+          :class="{ highlighted: suggestion.highlighted }"
           @click.stop.prevent="onClick($event, suggestion)"
         >
           <span class="image">
@@ -78,7 +76,7 @@
     top: 0;
     right: 0;
     margin: .2em .25em;
-    font-size: 1.3em;
+    font-size: 16px;
     cursor: pointer;
     line-height: 24px;
 

src/components/emoji_input/suggestor.js

@@ -1,3 +1,4 @@
+import { debounce } from 'lodash'
 /**
  * suggest - generates a suggestor function to be used by emoji-input
  * data: object providing source information for specific types of suggestions:
@@ -10,19 +11,19 @@
  * doesn't support user linking you can just provide only emoji.
  */
 
-export default data => {
+const debounceUserSearch = debounce((data, input) => {
-  const emojiCurry = suggestEmoji(data.emoji)
+  data.updateUsersList(input)
-  const usersCurry = data.store && suggestUsers(data.store)
+}, 500)
-  return input => {
+
+export default data => input => {
   const firstChar = input[0]
   if (firstChar === ':' && data.emoji) {
-      return emojiCurry(input)
+    return suggestEmoji(data.emoji)(input)
   }
-    if (firstChar === '@' && usersCurry) {
+  if (firstChar === '@' && data.users) {
-      return usersCurry(input)
+    return suggestUsers(data)(input)
   }
   return []
-  }
 }
 
 export const suggestEmoji = emojis => input => {
@@ -56,46 +57,19 @@ export const suggestEmoji = emojis => input => {
     })
 }
 
-export const suggestUsers = ({ dispatch, state }) => {
+export const suggestUsers = data => input => {
-  // Keep some persistent values in closure, most importantly for the
-  // custom debounce to work. Lodash debounce does not return a promise.
-  let suggestions = []
-  let previousQuery = ''
-  let timeout = null
-  let cancelUserSearch = null
-
-  const userSearch = (query) => dispatch('searchUsers', { query })
-  const debounceUserSearch = (query) => {
-    cancelUserSearch && cancelUserSearch()
-    return new Promise((resolve, reject) => {
-      timeout = setTimeout(() => {
-        userSearch(query).then(resolve).catch(reject)
-      }, 300)
-      cancelUserSearch = () => {
-        clearTimeout(timeout)
-        resolve([])
-      }
-    })
-  }
-
-  return async input => {
   const noPrefix = input.toLowerCase().substr(1)
-    if (previousQuery === noPrefix) return suggestions
+  const users = data.users
 
-    suggestions = []
+  const newUsers = users.filter(
-    previousQuery = noPrefix
-    // Fetch more and wait, don't fetch if there's the 2nd @ because
-    // the backend user search can't deal with it.
-    // Reference semantics make it so that we get the updated data after
-    // the await.
-    if (!noPrefix.includes('@')) {
-      await debounceUserSearch(noPrefix)
-    }
-
-    const newSuggestions = state.users.users.filter(
     user =>
       user.screen_name.toLowerCase().startsWith(noPrefix) ||
       user.name.toLowerCase().startsWith(noPrefix)
+
+    /* taking only 20 results so that sorting is a bit cheaper, we display
+     * only 5 anyway. could be inaccurate, but we ideally we should query
+     * backend anyway
+     */
   ).slice(0, 20).sort((a, b) => {
     let aScore = 0
     let bScore = 0
@@ -116,15 +90,17 @@ export const suggestUsers = ({ dispatch, state }) => {
 
     return diff + nameAlphabetically + screenNameAlphabetically
     /* eslint-disable camelcase */
-    }).map(({ screen_name, screen_name_ui, name, profile_image_url_original }) => ({
+  }).map(({ screen_name, name, profile_image_url_original }) => ({
-      displayText: screen_name_ui,
+    displayText: screen_name,
     detailText: name,
     imageUrl: profile_image_url_original,
     replacement: '@' + screen_name + ' '
   }))
-    /* eslint-enable camelcase */
 
-    suggestions = newSuggestions || []
+  // BE search users to get more comprehensive results
-    return suggestions
+  if (data.updateUsersList) {
+    debounceUserSearch(data, noPrefix)
   }
+  return newUsers
+  /* eslint-enable camelcase */
 }

src/components/emoji_picker/emoji_picker.js

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

src/components/emoji_picker/emoji_picker.scss

@@ -7,7 +7,7 @@
   right: 0;
   left: 0;
   margin: 0 !important;
-  z-index: 100;
+  z-index: 1;
   background-color: $fallback--bg;
   background-color: var(--popover, $fallback--bg);
   color: $fallback--link;
@@ -73,13 +73,12 @@
     &-item {
       padding: 0 7px;
       cursor: pointer;
-      font-size: 1.85em;
+      font-size: 24px;
 
       &.disabled {
         opacity: 0.5;
         pointer-events: none;
       }
-
       &.active {
         border-bottom: 4px solid;
 
@@ -152,10 +151,9 @@
       justify-content: left;
 
       &-title {
-        font-size: 0.85em;
+        font-size: 12px;
         width: 100%;
         margin: 0;
-
         &.disabled {
           display: none;
         }

src/components/emoji_reactions/emoji_reactions.vue

@@ -6,28 +6,13 @@
       :users="accountsForEmoji[reaction.name]"
     >
       <button
-        class="emoji-reaction btn button-default"
+        class="emoji-reaction btn btn-default"
         :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
         @click="emojiOnClick(reaction.name, $event)"
         @mouseenter="fetchEmojiReactionsByIfMissing()"
       >
-        <span
+        <span class="reaction-emoji">{{ reaction.name }}</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
@@ -51,10 +36,6 @@
   flex-wrap: wrap;
 }
 
-.unicode-emoji {
-  font-size: 210%;
-}
-
 .emoji-reaction {
   padding: 0 0.5em;
   margin-right: 0.5em;
@@ -64,7 +45,7 @@
   justify-content: center;
   box-sizing: border-box;
   .reaction-emoji {
-    width: 2.55em !important;
+    width: 1.25em;
     margin-right: 0.25em;
   }
   &:focus {

src/components/export_import/export_import.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="import-export-container">
+    <slot name="before" />
+    <button
+      class="btn"
+      @click="exportData"
+    >
+      {{ exportLabel }}
+    </button>
+    <button
+      class="btn"
+      @click="importData"
+    >
+      {{ importLabel }}
+    </button>
+    <slot name="afterButtons" />
+    <p
+      v-if="importFailed"
+      class="alert error"
+    >
+      {{ importFailedText }}
+    </p>
+    <slot name="afterError" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: [
+    'exportObject',
+    'importLabel',
+    'exportLabel',
+    'importFailedText',
+    'validator',
+    'onImport',
+    'onImportFailure'
+  ],
+  data () {
+    return {
+      importFailed: false
+    }
+  },
+  methods: {
+    exportData () {
+      const stringified = JSON.stringify(this.exportObject, null, 2) // Pretty-print and indent with 2 spaces
+
+      // Create an invisible link with a data url and simulate a click
+      const e = document.createElement('a')
+      e.setAttribute('download', 'pleroma_theme.json')
+      e.setAttribute('href', 'data:application/json;base64,' + window.btoa(stringified))
+      e.style.display = 'none'
+
+      document.body.appendChild(e)
+      e.click()
+      document.body.removeChild(e)
+    },
+    importData () {
+      this.importFailed = false
+      const filePicker = document.createElement('input')
+      filePicker.setAttribute('type', 'file')
+      filePicker.setAttribute('accept', '.json')
+
+      filePicker.addEventListener('change', event => {
+        if (event.target.files[0]) {
+          // eslint-disable-next-line no-undef
+          const reader = new FileReader()
+          reader.onload = ({ target }) => {
+            try {
+              const parsed = JSON.parse(target.result)
+              const valid = this.validator(parsed)
+              if (valid) {
+                this.onImport(parsed)
+              } else {
+                this.importFailed = true
+                // this.onImportFailure(valid)
+              }
+            } catch (e) {
+              // This will happen both if there is a JSON syntax error or the theme is missing components
+              this.importFailed = true
+              // this.onImportFailure(e)
+            }
+          }
+          reader.readAsText(event.target.files[0])
+        }
+      })
+
+      document.body.appendChild(filePicker)
+      filePicker.click()
+      document.body.removeChild(filePicker)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.import-export-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: center;
+}
+</style>

src/components/exporter/exporter.js

@@ -15,8 +15,18 @@ const Exporter = {
       type: String,
       default: 'export.csv'
     },
-    exportButtonLabel: { type: String },
+    exportButtonLabel: {
-    processingMessage: { type: String }
+      type: String,
+      default () {
+        return this.$t('exporter.export')
+      }
+    },
+    processingMessage: {
+      type: String,
+      default () {
+        return this.$t('exporter.processing')
+      }
+    }
   },
   data () {
     return {

src/components/exporter/exporter.vue

@@ -7,14 +7,14 @@
         spin
       />
 
-      <span>{{ processingMessage || $t('exporter.processing') }}</span>
+      <span>{{ processingMessage }}</span>
     </div>
     <button
       v-else
-      class="btn button-default"
+      class="btn btn-default"
       @click="process"
     >
-      {{ exportButtonLabel || $t('exporter.export') }}
+      {{ exportButtonLabel }}
     </button>
   </div>
 </template>

src/components/extra_buttons/extra_buttons.js

@@ -5,12 +5,10 @@ import {
   faBookmark,
   faEyeSlash,
   faThumbtack,
-  faShareAlt,
+  faShareAlt
-  faExternalLinkAlt
 } from '@fortawesome/free-solid-svg-icons'
 import {
-  faBookmark as faBookmarkReg,
+  faBookmark as faBookmarkReg
-  faFlag
 } from '@fortawesome/free-regular-svg-icons'
 
 library.add(
@@ -19,9 +17,7 @@ library.add(
   faBookmarkReg,
   faEyeSlash,
   faThumbtack,
-  faShareAlt,
+  faShareAlt
-  faExternalLinkAlt,
-  faFlag
 )
 
 const ExtraButtons = {
@@ -68,9 +64,6 @@ const ExtraButtons = {
       this.$store.dispatch('unbookmark', { id: this.status.id })
         .then(() => this.$emit('onSuccess'))
         .catch(err => this.$emit('onError', err.error.error))
-    },
-    reportStatus () {
-      this.$store.dispatch('openUserReportingModal', { userId: this.status.user.id, statusIds: [this.status.id] })
     }
   },
   computed: {

src/components/extra_buttons/extra_buttons.vue

@@ -1,17 +1,18 @@
 <template>
   <Popover
-    class="ExtraButtons"
     trigger="click"
     placement="top"
-    :offset="{ y: 5 }"
+    class="extra-button-popover"
     :bound-to="{ x: 'container' }"
-    remove-padding
   >
-    <template v-slot:content="{close}">
+    <div
+      slot="content"
+      slot-scope="{close}"
+    >
       <div class="dropdown-menu">
         <button
           v-if="canMute && !status.thread_muted"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="dropdown-item dropdown-item-icon"
           @click.prevent="muteConversation"
         >
           <FAIcon
@@ -21,7 +22,7 @@
         </button>
         <button
           v-if="canMute && status.thread_muted"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="dropdown-item dropdown-item-icon"
           @click.prevent="unmuteConversation"
         >
           <FAIcon
@@ -31,7 +32,7 @@
         </button>
         <button
           v-if="!status.pinned && canPin"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="dropdown-item dropdown-item-icon"
           @click.prevent="pinStatus"
           @click="close"
         >
@@ -42,7 +43,7 @@
         </button>
         <button
           v-if="status.pinned && canPin"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="dropdown-item dropdown-item-icon"
           @click.prevent="unpinStatus"
           @click="close"
         >
@@ -53,7 +54,7 @@
         </button>
         <button
           v-if="!status.bookmarked"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="dropdown-item dropdown-item-icon"
           @click.prevent="bookmarkStatus"
           @click="close"
         >
@@ -64,7 +65,7 @@
         </button>
         <button
           v-if="status.bookmarked"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="dropdown-item dropdown-item-icon"
           @click.prevent="unbookmarkStatus"
           @click="close"
         >
@@ -75,7 +76,7 @@
         </button>
         <button
           v-if="canDelete"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="dropdown-item dropdown-item-icon"
           @click.prevent="deleteStatus"
           @click="close"
         >
@@ -85,7 +86,7 @@
           /><span>{{ $t("status.delete") }}</span>
         </button>
         <button
-          class="button-default dropdown-item dropdown-item-icon"
+          class="dropdown-item dropdown-item-icon"
           @click.prevent="copyLink"
           @click="close"
         >
@@ -94,38 +95,14 @@
             icon="share-alt"
           /><span>{{ $t("status.copy_link") }}</span>
         </button>
-        <a
-          v-if="!status.is_local"
-          class="button-default dropdown-item dropdown-item-icon"
-          title="Source"
-          :href="status.external_url"
-          target="_blank"
-        >
-          <FAIcon
-            fixed-width
-            icon="external-link-alt"
-          /><span>{{ $t("status.external_source") }}</span>
-        </a>
-        <button
-          class="button-default dropdown-item dropdown-item-icon"
-          @click.prevent="reportStatus"
-          @click="close"
-        >
-          <FAIcon
-            fixed-width
-            :icon="['far', 'flag']"
-          /><span>{{ $t("user_card.report") }}</span>
-        </button>
       </div>
-    </template>
+    </div>
-    <template v-slot:trigger>
+    <span slot="trigger">
-      <button class="button-unstyled popover-trigger">
       <FAIcon
-          class="fa-scale-110 fa-old-padding"
+        class="ExtraButtons fa-scale-110 fa-old-padding"
         icon="ellipsis-h"
       />
-      </button>
+    </span>
-    </template>
   </Popover>
 </template>
 
@@ -135,20 +112,13 @@
 @import '../../_variables.scss';
 
 .ExtraButtons {
-  /* override of popover internal stuff */
+  cursor: pointer;
-  .popover-trigger-button {
-    width: auto;
-  }
-
-  .popover-trigger {
   position: static;
-    padding: 10px;
-    margin: -10px;
 
-    &:hover .svg-inline--fa {
+  &:hover,
+  .extra-button-popover.open & {
     color: $fallback--text;
     color: var(--text, $fallback--text);
   }
-  }
 }
 </style>

src/components/favorite_button/favorite_button.js

@@ -31,6 +31,11 @@ const FavoriteButton = {
     }
   },
   computed: {
+    classes () {
+      return {
+        '-favorited': this.status.favorited
+      }
+    },
     ...mapGetters(['mergedConfig'])
   }
 }

src/components/favorite_button/favorite_button.vue

@@ -1,31 +1,23 @@
 <template>
-  <div class="FavoriteButton">
+  <div v-if="loggedIn">
-    <button
-      v-if="loggedIn"
-      class="button-unstyled interactive"
-      :class="status.favorited && '-favorited'"
-      :title="$t('tool_tip.favorite')"
-      @click.prevent="favorite()"
-    >
     <FAIcon
-        class="fa-scale-110 fa-old-padding"
+      :class="classes"
+      class="FavoriteButton fa-scale-110 fa-old-padding -interactive"
+      :title="$t('tool_tip.favorite')"
       :icon="[status.favorited ? 'fas' : 'far', 'star']"
       :spin="animated"
+      @click.prevent="favorite()"
     />
-    </button>
+    <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
-    <span v-else>
+  </div>
+  <div v-else>
     <FAIcon
-        class="fa-scale-110 fa-old-padding"
+      :class="classes"
+      class="FavoriteButton fa-scale-110 fa-old-padding"
       :title="$t('tool_tip.favorite')"
       :icon="['far', 'star']"
     />
-    </span>
+    <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
-    <span
-      v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
-      class="action-counter"
-    >
-      {{ status.fave_num }}
-    </span>
   </div>
 </template>
 
@@ -35,28 +27,19 @@
 @import '../../_variables.scss';
 
 .FavoriteButton {
-  display: flex;
+  &.-interactive {
-
+    cursor: pointer;
-  > :first-child {
-    padding: 10px;
-    margin: -10px -8px -10px -10px;
-  }
-
-  .action-counter {
-    pointer-events: none;
-    user-select: none;
-  }
-
-  .interactive {
-    .svg-inline--fa {
     animation-duration: 0.6s;
-    }
 
-    &:hover .svg-inline--fa,
+    &:hover {
-    &.-favorited .svg-inline--fa {
       color: $fallback--cOrange;
       color: var(--cOrange, $fallback--cOrange);
     }
   }
+
+  &.-favorited {
+    color: $fallback--cOrange;
+    color: var(--cOrange, $fallback--cOrange);
+  }
 }
 </style>

src/components/features_panel/features_panel.js

@@ -1,15 +1,12 @@
-import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
-
 const FeaturesPanel = {
   computed: {
-    shout: function () { return this.$store.state.instance.shoutAvailable },
+    chat: function () { return this.$store.state.instance.chatAvailable },
     pleromaChatMessages: function () { return this.$store.state.instance.pleromaChatMessagesAvailable },
     gopher: function () { return this.$store.state.instance.gopherAvailable },
     whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled },
     mediaProxy: function () { return this.$store.state.instance.mediaProxyAvailable },
     minimalScopesMode: function () { return this.$store.state.instance.minimalScopesMode },
-    textlimit: function () { return this.$store.state.instance.textlimit },
+    textlimit: function () { return this.$store.state.instance.textlimit }
-    uploadlimit: function () { return fileSizeFormatService.fileSizeFormat(this.$store.state.instance.uploadlimit) }
   }
 }
 

src/components/features_panel/features_panel.vue

@@ -8,8 +8,8 @@
       </div>
       <div class="panel-body features-panel">
         <ul>
-          <li v-if="shout">
+          <li v-if="chat">
-            {{ $t('features_panel.shout') }}
+            {{ $t('features_panel.chat') }}
           </li>
           <li v-if="pleromaChatMessages">
             {{ $t('features_panel.pleroma_chat_messages') }}
@@ -25,7 +25,6 @@
           </li>
           <li>{{ $t('features_panel.scope_options') }}</li>
           <li>{{ $t('features_panel.text_limit') }} = {{ textlimit }}</li>
-          <li>{{ $t('features_panel.upload_limit') }} = {{ uploadlimit.num }} {{ $t('upload.file_size_units.' + uploadlimit.unit) }}</li>
         </ul>
       </div>
     </div>

src/components/flash/flash.js

@@ -1,53 +0,0 @@
-import RuffleService from '../../services/ruffle_service/ruffle_service.js'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faStop,
-  faExclamationTriangle
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faStop,
-  faExclamationTriangle
-)
-
-const Flash = {
-  props: [ 'src' ],
-  data () {
-    return {
-      player: false, // can be true, "hidden", false. hidden = element exists
-      loaded: false,
-      ruffleInstance: null
-    }
-  },
-  methods: {
-    openPlayer () {
-      if (this.player) return // prevent double-loading, or re-loading on failure
-      this.player = 'hidden'
-      RuffleService.getRuffle().then((ruffle) => {
-        const player = ruffle.newest().createPlayer()
-        player.config = {
-          letterbox: 'on'
-        }
-        const container = this.$refs.container
-        container.appendChild(player)
-        player.style.width = '100%'
-        player.style.height = '100%'
-        player.load(this.src).then(() => {
-          this.player = true
-        }).catch((e) => {
-          console.error('Error loading ruffle', e)
-          this.player = 'error'
-        })
-        this.ruffleInstance = player
-        this.$emit('playerOpened')
-      })
-    },
-    closePlayer () {
-      this.ruffleInstance && this.ruffleInstance.remove()
-      this.player = false
-      this.$emit('playerClosed')
-    }
-  }
-}
-
-export default Flash

src/components/flash/flash.vue

@@ -1,84 +0,0 @@
-<template>
-  <div class="Flash">
-    <div
-      v-if="player === true || player === 'hidden'"
-      ref="container"
-      class="player"
-      :class="{ hidden: player === 'hidden' }"
-    />
-    <button
-      v-if="player !== true"
-      class="button-unstyled placeholder"
-      @click="openPlayer"
-    >
-      <span
-        v-if="player === 'hidden'"
-        class="label"
-      >
-        {{ $t('general.loading') }}
-      </span>
-      <span
-        v-if="player === 'error'"
-        class="label"
-      >
-        {{ $t('general.flash_fail') }}
-      </span>
-      <span
-        v-else
-        class="label"
-      >
-        <p>
-          {{ $t('general.flash_content') }}
-        </p>
-        <p>
-          <FAIcon icon="exclamation-triangle" />
-          {{ $t('general.flash_security') }}
-        </p>
-      </span>
-    </button>
-  </div>
-</template>
-
-<script src="./flash.js"></script>
-
-<style lang="scss">
-@import '../../_variables.scss';
-.Flash {
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  .player {
-    height: 100%;
-    width: 100%;
-  }
-
-  .placeholder {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--bg);
-    color: var(--link);
-  }
-
-  .hider {
-    top: 0;
-  }
-
-  .label {
-    text-align: center;
-    flex: 1 1 0;
-    line-height: 1.2;
-    white-space: normal;
-    word-wrap: normal;
-  }
-
-  .hidden {
-    display: none;
-    visibility: 'hidden';
-  }
-}
-</style>

src/components/follow_button/follow_button.js

@@ -1,6 +1,6 @@
 import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 export default {
-  props: ['relationship', 'user', 'labelFollowing', 'buttonClass'],
+  props: ['relationship', 'labelFollowing', 'buttonClass'],
   data () {
     return {
       inProgress: false
@@ -14,7 +14,7 @@ export default {
       if (this.inProgress || this.relationship.following) {
         return this.$t('user_card.follow_unfollow')
       } else if (this.relationship.requested) {
-        return this.$t('user_card.follow_cancel')
+        return this.$t('user_card.follow_again')
       } else {
         return this.$t('user_card.follow')
       }
@@ -29,14 +29,11 @@ export default {
       } else {
         return this.$t('user_card.follow')
       }
-    },
-    disabled () {
-      return this.inProgress || this.user.deactivated
     }
   },
   methods: {
     onClick () {
-      this.relationship.following || this.relationship.requested ? this.unfollow() : this.follow()
+      this.relationship.following ? this.unfollow() : this.follow()
     },
     follow () {
       this.inProgress = true

src/components/follow_button/follow_button.vue

@@ -1,8 +1,8 @@
 <template>
   <button
-    class="btn button-default follow-button"
+    class="btn btn-default follow-button"
     :class="{ toggled: isPressed }"
-    :disabled="disabled"
+    :disabled="inProgress"
     :title="title"
     @click="onClick"
   >

src/components/follow_card/follow_card.vue

@@ -20,7 +20,6 @@
           :relationship="relationship"
           :label-following="$t('user_card.follow_unfollow')"
           class="follow-card-follow-button"
-          :user="user"
         />
       </template>
     </div>

src/components/follow_request_card/follow_request_card.vue

@@ -2,13 +2,13 @@
   <basic-user-card :user="user">
     <div class="follow-request-card-content-container">
       <button
-        class="btn button-default"
+        class="btn btn-default"
         @click="approveUser"
       >
         {{ $t('user_card.approve') }}
       </button>
       <button
-        class="btn button-default"
+        class="btn btn-default"
         @click="denyUser"
       >
         {{ $t('user_card.deny') }}

src/components/font_control/font_control.js

@@ -1,17 +1,20 @@
-import { set } from 'lodash'
+import { set } from 'vue'
-import Select from '../select/select.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
 
 export default {
-  components: {
-    Select
-  },
   props: [
-    'name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'
+    'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
   ],
-  emits: ['update:modelValue'],
   data () {
     return {
-      lValue: this.modelValue,
+      lValue: this.value,
       availableOptions: [
         this.noInherit ? '' : 'inherit',
         'custom',
@@ -23,7 +26,7 @@ export default {
     }
   },
   beforeUpdate () {
-    this.lValue = this.modelValue
+    this.lValue = this.value
   },
   computed: {
     present () {
@@ -38,7 +41,7 @@ export default {
       },
       set (v) {
         set(this.lValue, 'family', v)
-        this.$emit('update:modelValue', this.lValue)
+        this.$emit('input', this.lValue)
       }
     },
     isCustom () {

src/components/font_control/font_control.vue

@@ -15,15 +15,19 @@
       class="opt exlcude-disabled"
       type="checkbox"
       :checked="present"
-      @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
+      @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
     >
     <label
       v-if="typeof fallback !== 'undefined'"
       class="opt-l"
       :for="name + '-o'"
     />
-    {{ ' ' }}
+    <label
-    <Select
+      :for="name + '-font-switcher'"
+      class="select"
+      :disabled="!present"
+    >
+      <select
         :id="name + '-font-switcher'"
         v-model="preset"
         :disabled="!present"
@@ -36,7 +40,12 @@
         >
           {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
         </option>
-    </Select>
+      </select>
+      <FAIcon
+        class="select-down-icon"
+        icon="chevron-down"
+      />
+    </label>
     <input
       v-if="isCustom"
       :id="name"
@@ -56,8 +65,7 @@
     min-width: 10em;
   }
   &.custom {
-    /* TODO Should make proper joiners... */
+    .select {
-    .font-switcher {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }

src/components/gallery/gallery.js

@@ -1,26 +1,15 @@
 import Attachment from '../attachment/attachment.vue'
-import { sumBy, set } from 'lodash'
+import { chunk, last, dropRight, sumBy } from 'lodash'
 
 const Gallery = {
   props: [
     'attachments',
-    'limitRows',
-    'descriptions',
-    'limit',
     'nsfw',
-    'setMedia',
+    'setMedia'
-    'size',
-    'editable',
-    'removeAttachment',
-    'shiftUpAttachment',
-    'shiftDnAttachment',
-    'editAttachment',
-    'grid'
   ],
   data () {
     return {
-      sizes: {},
+      sizes: {}
-      hidingLong: true
     }
   },
   components: { Attachment },
@@ -29,70 +18,26 @@ const Gallery = {
       if (!this.attachments) {
         return []
       }
-      const attachments = this.limit > 0
+      const rows = chunk(this.attachments, 3)
-        ? this.attachments.slice(0, this.limit)
+      if (last(rows).length === 1 && rows.length > 1) {
-        : this.attachments
+        // if 1 attachment on last row -> add it to the previous row instead
-      if (this.size === 'hide') {
+        const lastAttachment = last(rows)[0]
-        return attachments.map(item => ({ minimal: true, items: [item] }))
+        const allButLastRow = dropRight(rows)
+        last(allButLastRow).push(lastAttachment)
+        return allButLastRow
       }
-      const rows = this.grid
-        ? [{ grid: true, items: attachments }]
-        : attachments.reduce((acc, attachment, i) => {
-          if (attachment.mimetype.includes('audio')) {
-            return [...acc, { audio: true, items: [attachment] }, { items: [] }]
-          }
-          if (!(
-            attachment.mimetype.includes('image') ||
-              attachment.mimetype.includes('video') ||
-              attachment.mimetype.includes('flash')
-          )) {
-            return [...acc, { minimal: true, items: [attachment] }, { items: [] }]
-          }
-          const maxPerRow = 3
-          const attachmentsRemaining = this.attachments.length - i + 1
-          const currentRow = acc[acc.length - 1].items
-          currentRow.push(attachment)
-          if (currentRow.length >= maxPerRow && attachmentsRemaining > maxPerRow) {
-            return [...acc, { items: [] }]
-          } else {
-            return acc
-          }
-        }, [{ items: [] }]).filter(_ => _.items.length > 0)
       return rows
     },
-    attachmentsDimensionalScore () {
+    useContainFit () {
-      return this.rows.reduce((acc, row) => {
+      return this.$store.getters.mergedConfig.useContainFit
-        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, width, height }) {
+    onNaturalSizeLoad (id, size) {
-      set(this.sizes, id, { width, height })
+      this.$set(this.sizes, id, size)
     },
-    rowStyle (row) {
+    rowStyle (itemsPerRow) {
-      if (row.audio) {
+      return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` }
-        return { 'padding-bottom': '25%' } // fixed reduced height for audio
-      } else if (!row.minimal && !row.grid) {
-        return { 'padding-bottom': `${(100 / (row.items.length + 0.6))}%` }
-      }
     },
     itemStyle (id, row) {
       const total = sumBy(row, item => this.getAspectRatio(item.id))
@@ -101,16 +46,6 @@ const Gallery = {
     getAspectRatio (id) {
       const size = this.sizes[id]
       return size ? size.width / size.height : 1
-    },
-    toggleHidingLong (event) {
-      this.hidingLong = event
-    },
-    openGallery () {
-      this.$store.dispatch('setMedia', this.attachments)
-      this.$store.dispatch('setCurrentMedia', this.attachments[0])
-    },
-    onMedia () {
-      this.$store.dispatch('setMedia', this.attachments)
     }
   }
 }

src/components/gallery/gallery.vue

@@ -1,86 +1,29 @@
 <template>
   <div
     ref="galleryContainer"
-    class="Gallery"
+    style="width: 100%;"
-    :class="{ '-long': tooManyAttachments && hidingLong }"
   >
-    <div class="gallery-rows">
     <div
-        v-for="(row, rowIndex) in rows"
+      v-for="(row, index) in rows"
-        :key="rowIndex"
+      :key="index"
       class="gallery-row"
-        :style="rowStyle(row)"
+      :style="rowStyle(row.length)"
-        :class="{ '-audio': row.audio, '-minimal': row.minimal, '-grid': grid }"
+      :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }"
     >
-        <div
+      <div class="gallery-row-inner">
-          class="gallery-row-inner"
+        <attachment
-          :class="{ '-grid': grid }"
+          v-for="attachment in row"
-        >
-          <Attachment
-            v-for="(attachment, attachmentIndex) in row.items"
           :key="attachment.id"
-            class="gallery-item"
+          :set-media="setMedia"
           :nsfw="nsfw"
           :attachment="attachment"
-            :size="size"
+          :allow-play="false"
-            :editable="editable"
+          :natural-size-load="onNaturalSizeLoad.bind(null, attachment.id)"
-            :remove="removeAttachment"
+          :style="itemStyle(attachment.id, row)"
-            :shift-up="!(attachmentIndex === 0 && rowIndex === 0) && shiftUpAttachment"
-            :shift-dn="!(attachmentIndex === row.items.length - 1 && rowIndex === rows.length - 1) && shiftDnAttachment"
-            :edit="editAttachment"
-            :description="descriptions && descriptions[attachment.id]"
-            :hide-description="size === 'small' || tooManyAttachments && hidingLong"
-            :style="itemStyle(attachment.id, row.items)"
-            @setMedia="onMedia"
-            @naturalSizeLoad="onNaturalSizeLoad"
         />
       </div>
     </div>
   </div>
-    <div
-      v-if="tooManyAttachments"
-      class="many-attachments"
-    >
-      <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>
 </template>
 
 <script src='./gallery.js'></script>
@@ -88,66 +31,12 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.Gallery {
+.gallery-row {
-  .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;
@@ -159,24 +48,9 @@
     flex-direction: row;
     flex-wrap: nowrap;
     align-content: stretch;
-
-    &.-grid {
-      width: 100%;
-      height: auto;
-      position: relative;
-      display: grid;
-      grid-column-gap: 0.5em;
-      grid-row-gap: 0.5em;
-      grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
-
-      .gallery-item {
-        margin: 0;
-        height: 200px;
-      }
-    }
   }
 
-  .gallery-item {
+  .gallery-row-inner .attachment {
     margin: 0 0.5em 0 0;
     flex-grow: 1;
     height: 100%;
@@ -187,5 +61,32 @@
       margin: 0;
     }
   }
+
+  .image-attachment {
+    width: 100%;
+    height: 100%;
+  }
+
+  .video-container {
+    height: 100%;
+  }
+
+  &.contain-fit {
+    img,
+    video,
+    canvas {
+      object-fit: contain;
+      height: 100%;
+    }
+  }
+
+  &.cover-fit {
+    img,
+    video,
+    canvas {
+      object-fit: cover;
+    }
+  }
 }
+
 </style>

src/components/global_notice_list/global_notice_list.vue

@@ -9,15 +9,11 @@
       <div class="notice-message">
         {{ $t(notice.messageKey, notice.messageArgs) }}
       </div>
-      <button
-        class="button-unstyled close-notice"
-        @click="closeNotice(notice)"
-      >
       <FAIcon
         class="fa-scale-110 fa-old-padding"
         icon="times"
+        @click="closeNotice(notice)"
       />
-      </button>
     </div>
   </div>
 </template>
@@ -44,19 +40,21 @@
     max-width: calc(100% - 3em);
     display: flex;
     padding-left: 1.5em;
-    line-height: 2;
+    line-height: 2em;
-    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);
-
+    i {
-    .svg-inline--fa {
       color: var(--alertPopupErrorText, $fallback--text);
     }
   }
@@ -64,33 +62,17 @@
   .global-warning {
     background-color: var(--alertPopupWarning, $fallback--cOrange);
     color: var(--alertPopupWarningText, $fallback--text);
-
+    i {
-    .svg-inline--fa {
       color: var(--alertPopupWarningText, $fallback--text);
     }
   }
 
-  .global-success {
-    background-color: var(--alertPopupSuccess, $fallback--cGreen);
-    color: var(--alertPopupSuccessText, $fallback--text);
-    .svg-inline--fa {
-      color: var(--alertPopupSuccessText, $fallback--text);
-    }
-  }
-
   .global-info {
     background-color: var(--alertPopupNeutral, $fallback--fg);
     color: var(--alertPopupNeutralText, $fallback--text);
-    .svg-inline--fa {
+    i {
       color: var(--alertPopupNeutralText, $fallback--text);
     }
   }
-
-  .close-notice {
-    padding-right: 0.2em;
-    .svg-inline--fa:hover {
-      opacity: 0.6;
-    }
-  }
 }
 </style>

src/components/hashtag_link/hashtag_link.js

@@ -1,36 +0,0 @@
-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

src/components/hashtag_link/hashtag_link.scss

@@ -1,6 +0,0 @@
-.HashtagLink {
-  position: relative;
-  white-space: normal;
-  display: inline-block;
-  color: var(--link);
-}

src/components/hashtag_link/hashtag_link.vue

@@ -1,19 +0,0 @@
-<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"/>

src/components/image_cropper/image_cropper.js

@@ -2,10 +2,12 @@ import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.css'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
+  faTimes,
   faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
+  faTimes,
   faCircleNotch
 )
 
@@ -51,7 +53,8 @@ const ImageCropper = {
       cropper: undefined,
       dataUrl: undefined,
       filename: undefined,
-      submitting: false
+      submitting: false,
+      submitError: null
     }
   },
   computed: {
@@ -63,6 +66,9 @@ const ImageCropper = {
     },
     cancelText () {
       return this.cancelButtonLabel || this.$t('image_cropper.cancel')
+    },
+    submitErrorMsg () {
+      return this.submitError && this.submitError instanceof Error ? this.submitError.toString() : this.submitError
     }
   },
   methods: {
@@ -76,8 +82,12 @@ const ImageCropper = {
     },
     submit (cropping = true) {
       this.submitting = true
+      this.avatarUploadError = null
       this.submitHandler(cropping && this.cropper, this.file)
         .then(() => this.destroy())
+        .catch((err) => {
+          this.submitError = err
+        })
         .finally(() => {
           this.submitting = false
         })
@@ -103,6 +113,9 @@ const ImageCropper = {
         reader.readAsDataURL(this.file)
         this.$emit('changed', this.file, reader)
       }
+    },
+    clearError () {
+      this.submitError = null
     }
   },
   mounted () {
@@ -117,7 +130,7 @@ const ImageCropper = {
     const fileInput = this.$refs.input
     fileInput.addEventListener('change', this.readFile)
   },
-  beforeUnmount: function () {
+  beforeDestroy: function () {
     // remove the event listeners
     const trigger = this.getTriggerDOM()
     if (trigger) {

src/components/image_cropper/image_cropper.vue

@@ -11,21 +11,21 @@
       </div>
       <div class="image-cropper-buttons-wrapper">
         <button
-          class="button-default btn"
+          class="btn"
           type="button"
           :disabled="submitting"
           @click="submit()"
           v-text="saveText"
         />
         <button
-          class="button-default btn"
+          class="btn"
           type="button"
           :disabled="submitting"
           @click="destroy"
           v-text="cancelText"
         />
         <button
-          class="button-default btn"
+          class="btn"
           type="button"
           :disabled="submitting"
           @click="submit(false)"
@@ -37,6 +37,17 @@
           icon="circle-notch"
         />
       </div>
+      <div
+        v-if="submitError"
+        class="alert error"
+      >
+        {{ submitErrorMsg }}
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="times"
+          @click="clearError"
+        />
+      </div>
     </div>
     <input
       ref="input"

src/components/importer/importer.js

@@ -15,9 +15,24 @@ const Importer = {
       type: Function,
       required: true
     },
-    submitButtonLabel: { type: String },
+    submitButtonLabel: {
-    successMessage: { type: String },
+      type: String,
-    errorMessage: { type: String }
+      default () {
+        return this.$t('importer.submit')
+      }
+    },
+    successMessage: {
+      type: String,
+      default () {
+        return this.$t('importer.success')
+      }
+    },
+    errorMessage: {
+      type: String,
+      default () {
+        return this.$t('importer.error')
+      }
+    }
   },
   data () {
     return {

src/components/importer/importer.vue

@@ -15,34 +15,24 @@
     />
     <button
       v-else
-      class="btn button-default"
+      class="btn btn-default"
       @click="submit"
     >
-      {{ submitButtonLabel || $t('importer.submit') }}
+      {{ submitButtonLabel }}
     </button>
     <div v-if="success">
-      <button
-        class="button-unstyled"
-        @click="dismiss"
-      >
       <FAIcon
         icon="times"
+        @click="dismiss"
       />
-      </button>
+      <p>{{ successMessage }}</p>
-      {{ ' ' }}
-      <span>{{ successMessage || $t('importer.success') }}</span>
     </div>
     <div v-else-if="error">
-      <button
-        class="button-unstyled"
-        @click="dismiss"
-      >
       <FAIcon
         icon="times"
+        @click="dismiss"
       />
-      </button>
+      <p>{{ errorMessage }}</p>
-      {{ ' ' }}
-      <span>{{ errorMessage || $t('importer.error') }}</span>
     </div>
   </div>
 </template>

src/components/interactions/interactions.js

@@ -1,5 +1,4 @@
 import Notifications from '../notifications/notifications.vue'
-import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 
 const tabModeDict = {
   mentions: ['mention'],
@@ -21,8 +20,7 @@ const Interactions = {
     }
   },
   components: {
-    Notifications,
+    Notifications
-    TabSwitcher
   }
 }
 

src/components/interface_language_switcher/interface_language_switcher.vue

@@ -1,62 +1,71 @@
 <template>
   <div>
     <label for="interface-language-switcher">
-      {{ promptText }}
+      {{ $t('settings.interfaceLanguage') }}
     </label>
-    {{ ' ' }}
+    <label
-    <Select
+      for="interface-language-switcher"
+      class="select"
+    >
+      <select
         id="interface-language-switcher"
-      v-model="controlledLanguage"
+        v-model="language"
       >
         <option
-        v-for="lang in languages"
+          v-for="(langCode, i) in languageCodes"
-        :key="lang.code"
+          :key="langCode"
-        :value="lang.code"
+          :value="langCode"
         >
-        {{ lang.name }}
+          {{ languageNames[i] }}
         </option>
-    </Select>
+      </select>
+      <FAIcon
+        class="select-down-icon"
+        icon="chevron-down"
+      />
+    </label>
   </div>
 </template>
 
 <script>
-import localeService from '../../services/locale/locale.service.js'
+import languagesObject from '../../i18n/messages'
-import Select from '../select/select.vue'
+import ISO6391 from 'iso-639-1'
+import _ from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
 
 export default {
-  components: {
-    Select
-  },
-  props: {
-    promptText: {
-      type: String,
-      required: true
-    },
-    language: {
-      type: String,
-      required: true
-    },
-    setLanguage: {
-      type: Function,
-      required: true
-    }
-  },
   computed: {
-    languages () {
+    languageCodes () {
-      return localeService.languages
+      return languagesObject.languages
     },
 
-    controlledLanguage: {
+    languageNames () {
-      get: function () { return this.language },
+      return _.map(this.languageCodes, this.getLanguageName)
+    },
+
+    language: {
+      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
       set: function (val) {
-        this.setLanguage(val)
+        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
       }
     }
   },
 
   methods: {
     getLanguageName (code) {
-      return localeService.getLanguageName(code)
+      const specialLanguageNames = {
+        'ja': 'Japanese (日本語)',
+        'ja_easy': 'Japanese (やさしいにほんご)',
+        'zh': 'Chinese (简体中文)'
+      }
+      return specialLanguageNames[code] || ISO6391.getName(code)
     }
   }
 }

src/components/link-preview/link-preview.js

@@ -1,5 +1,3 @@
-import { mapGetters } from 'vuex'
-
 const LinkPreview = {
   name: 'LinkPreview',
   props: [
@@ -17,20 +15,11 @@ const LinkPreview = {
       // Currently BE shoudn't give cards if tagged NSFW, this is a bit paranoid
       // as it makes sure to hide the image if somehow NSFW tagged preview can
       // exist.
-      return this.card.image && !this.censored && this.size !== 'hide'
+      return this.card.image && !this.nsfw && this.size !== 'hide'
-    },
-    censored () {
-      return this.nsfw && this.hideNsfwConfig
     },
     useDescription () {
       return this.card.description && /\S/.test(this.card.description)
-    },
+    }
-    hideNsfwConfig () {
-      return this.mergedConfig.hideNsfw
-    },
-    ...mapGetters([
-      'mergedConfig'
-    ])
   },
   created () {
     if (this.useImage) {

src/components/link-preview/link-preview.vue

@@ -9,17 +9,12 @@
       <div
         v-if="useImage && imageLoaded"
         class="card-image"
+        :class="{ 'small-image': size === 'small' }"
       >
         <img :src="card.image">
       </div>
       <div class="card-content">
-        <span class="card-host faint">
+        <span class="card-host faint">{{ card.provider_name }}</span>
-          <span
-            v-if="censored"
-            class="nsfw-alert alert warning"
-          >{{ $t('status.nsfw') }}</span>
-          {{ card.provider_name }}
-        </span>
         <h4 class="card-title">{{ card.title }}</h4>
         <p
           v-if="useDescription"
@@ -55,6 +50,10 @@
     }
   }
 
+  .small-image {
+    width: 80px;
+  }
+
   .card-content {
     max-height: 100%;
     margin: 0.5em;
@@ -63,7 +62,7 @@
   }
 
   .card-host {
-    font-size: 0.85em;
+    font-size: 12px;
   }
 
   .card-description {
@@ -77,10 +76,6 @@
     max-height: calc(1.2em * 3 - 1px);
   }
 
-  .nsfw-alert {
-    margin: 2em 0;
-  }
-
   color: $fallback--text;
   color: var(--text, $fallback--text);
   border-style: solid;

src/components/login_form/login_form.vue

@@ -61,7 +61,7 @@
             <button
               :disabled="loggingIn"
               type="submit"
-              class="btn button-default"
+              class="btn btn-default"
             >
               {{ $t('login.login') }}
             </button>
@@ -76,15 +76,11 @@
     >
       <div class="alert error">
         {{ error }}
-        <button
-          class="button-unstyled"
-          @click="clearError"
-        >
         <FAIcon
           class="fa-scale-110 fa-old-padding"
           icon="times"
+          @click="clearError"
         />
-        </button>
       </div>
     </div>
   </div>
@@ -101,7 +97,7 @@
   padding: 0.6em;
 
   .btn {
-    min-height: 2em;
+    min-height: 28px;
     width: 10em;
   }
 

src/components/media_modal/media_modal.js

@@ -1,46 +1,24 @@
 import StillImage from '../still-image/still-image.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
 import Modal from '../modal/modal.vue'
-import PinchZoom from '../pinch_zoom/pinch_zoom.vue'
-import SwipeClick from '../swipe_click/swipe_click.vue'
-import GestureService from '../../services/gesture_service/gesture_service'
-import Flash from 'src/components/flash/flash.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
+import GestureService from '../../services/gesture_service/gesture_service'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faChevronLeft,
-  faChevronRight,
+  faChevronRight
-  faCircleNotch,
-  faTimes
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faChevronLeft,
-  faChevronRight,
+  faChevronRight
-  faCircleNotch,
-  faTimes
 )
 
 const MediaModal = {
   components: {
     StillImage,
     VideoAttachment,
-    PinchZoom,
+    Modal
-    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 () {
@@ -49,9 +27,6 @@ const MediaModal = {
     media () {
       return this.$store.state.mediaViewer.media
     },
-    description () {
-      return this.currentMedia.description
-    },
     currentIndex () {
       return this.$store.state.mediaViewer.currentIndex
     },
@@ -62,62 +37,43 @@ const MediaModal = {
       return this.media.length > 1
     },
     type () {
-      return this.currentMedia ? this.getType(this.currentMedia) : null
+      return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
     }
   },
+  created () {
+    this.mediaSwipeGestureRight = GestureService.swipeGesture(
+      GestureService.DIRECTION_RIGHT,
+      this.goPrev,
+      50
+    )
+    this.mediaSwipeGestureLeft = GestureService.swipeGesture(
+      GestureService.DIRECTION_LEFT,
+      this.goNext,
+      50
+    )
+  },
   methods: {
-    getType (media) {
+    mediaTouchStart (e) {
-      return fileTypeService.fileType(media.mimetype)
+      GestureService.beginSwipe(e, this.mediaSwipeGestureRight)
+      GestureService.beginSwipe(e, this.mediaSwipeGestureLeft)
+    },
+    mediaTouchMove (e) {
+      GestureService.updateSwipe(e, this.mediaSwipeGestureRight)
+      GestureService.updateSwipe(e, this.mediaSwipeGestureLeft)
     },
     hide () {
-      // HACK: Closing immediately via a touch will cause the click
-      // to be processed on the content below the overlay
-      const transitionTime = 100 // ms
-      setTimeout(() => {
       this.$store.dispatch('closeMediaViewer')
-      }, transitionTime)
-    },
-    hideIfNotSwiped (event) {
-      // If we have swiped over SwipeClick, do not trigger hide
-      const comp = this.$refs.swipeClick
-      if (!comp) {
-        this.hide()
-      } else {
-        comp.$gesture.click(event)
-      }
     },
     goPrev () {
       if (this.canNavigate) {
         const prevIndex = this.currentIndex === 0 ? this.media.length - 1 : (this.currentIndex - 1)
-        const newMedia = this.media[prevIndex]
+        this.$store.dispatch('setCurrent', 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)
-        const newMedia = this.media[nextIndex]
+        this.$store.dispatch('setCurrent', 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) {
@@ -142,7 +98,7 @@ const MediaModal = {
     document.addEventListener('keyup', this.handleKeyupEvent)
     document.addEventListener('keydown', this.handleKeydownEvent)
   },
-  unmounted () {
+  destroyed () {
     window.removeEventListener('popstate', this.hide)
     document.removeEventListener('keyup', this.handleKeyupEvent)
     document.removeEventListener('keydown', this.handleKeydownEvent)