Merge remote-tracking branch 'origin/develop' into vue3-again

* origin/develop: (475 commits) Apply 1 suggestion(s) to 1 file(s) Update dependency @ungap/event-target to v0.2.3 Update package.json fix broken icons after FA upgrade Update Font Awesome Update dependency webpack-dev-middleware to v3.7.3 Update dependency vuelidate to v0.7.7 Pin dependency @kazvmoe-infra/pinch-zoom-element to 1.2.0 lint Make media modal buttons larger Add English translation for hide tooltip Add hide button to media modal Lint Prevent hiding media viewer if swiped over SwipeClick Fix webkit image blurs Fix video in media modal not displaying properly Add changelog for https://git.pleroma.social/pleroma/pleroma-fe/-/merge_requests/1403 Remove image box-shadow in media modal Clean up debug code for image pinch zoom Bump @kazvmoe-infra/pinch-zoom-element to 1.2.0 on npm ...
2022-03-16 21:00:20 +02:00 · 2022-03-16 21:00:20 +02:00 · cd4ad2df11
commit cd4ad2df11
parent 8a9115b58e b632d740c1
184 changed files with 11589 additions and 3790 deletions
--- a/.babelrc
+++ b/.babelrc
@ -1,5 +1,5 @@
 {
-  "presets": ["@babel/preset-env"],
+  "presets": ["@babel/preset-env", "@vue/babel-preset-jsx"],
  "plugins": ["@babel/plugin-transform-runtime", "lodash", "@vue/babel-plugin-jsx"],
  "comments": false
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -3,11 +3,67 @@ 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]
+## 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
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@ -3,6 +3,7 @@ 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
--- a/build/dev-server.js
+++ b/build/dev-server.js
@ -21,6 +21,7 @@ var compiler = webpack(webpackConfig)

 var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
+  writeToDisk: true,
  stats: {
    colors: true,
    chunks: false
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@ -4,6 +4,7 @@ var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
 var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
 var { VueLoaderPlugin } = require('vue-loader')
+var CopyPlugin = require('copy-webpack-plugin');

 var env = process.env.NODE_ENV
 // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@ -95,6 +96,19 @@ module.exports = {
      entry: path.join(__dirname, '..', 'src/sw.js'),
      filename: 'sw-pleroma.js'
    }),
-    new VueLoaderPlugin()
+    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,
+      },
+    })
  ]
 }
--- a/package.json
+++ b/package.json
@ -16,106 +16,108 @@
    "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
  },
  "dependencies": {
-    "@babel/runtime": "^7.7.6",
-    "@chenfengyuan/vue-qrcode": "^2.0.0-beta",
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
-    "@fortawesome/free-regular-svg-icons": "^5.15.1",
-    "@fortawesome/free-solid-svg-icons": "^5.15.1",
-    "@fortawesome/vue-fontawesome": "^3.0.0-3",
-    "@vue/compiler-sfc": "^3.0.7",
-    "body-scroll-lock": "^2.6.4",
-    "chromatism": "^3.0.0",
-    "cropperjs": "^1.4.3",
-    "diff": "^3.0.1",
-    "escape-html": "^1.0.3",
-    "localforage": "^1.5.0",
-    "parse-link-header": "^1.0.1",
-    "phoenix": "^1.3.0",
-    "punycode.js": "^2.1.0",
-    "qrcode": "^1.4.4",
-    "v-click-outside": "^2.1.1",
-    "vue": "^3.0.7",
-    "vue-i18n": "^9.0.0-beta.18",
-    "vue-router": "^4.0.5",
-    "vuelidate": "^0.7.6",
-    "vuex": "^4.0.0"
+    "@babel/runtime": "7.7.6",
+    "@chenfengyuan/vue-qrcode": "1.0.2",
+    "@fortawesome/fontawesome-svg-core": "1.3.0",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/vue-fontawesome": "2.0.6",
+    "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
+    "body-scroll-lock": "2.6.4",
+    "chromatism": "3.0.0",
+    "cropperjs": "1.4.3",
+    "diff": "3.5.0",
+    "escape-html": "1.0.3",
+    "localforage": "1.7.3",
+    "parse-link-header": "1.0.1",
+    "phoenix": "1.4.0",
+    "portal-vue": "2.1.7",
+    "punycode.js": "2.1.0",
+    "ruffle-mirror": "2021.4.11",
+    "v-click-outside": "2.1.5",
+    "vue": "2.6.11",
+    "vue-i18n": "7.8.1",
+    "vue-router": "3.0.2",
+    "vue-template-compiler": "2.6.11",
+    "vuelidate": "0.7.7",
+    "vuex": "3.0.1"
  },
  "devDependencies": {
-    "@babel/core": "^7.7.5",
-    "@babel/plugin-transform-runtime": "^7.7.6",
-    "@babel/preset-env": "^7.7.6",
-    "@babel/register": "^7.7.4",
-    "@ungap/event-target": "^0.1.0",
-    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
-    "@vue/babel-plugin-jsx": "^1.0.3",
-    "@vue/babel-plugin-transform-vue-jsx": "^1.1.2",
-    "@vue/test-utils": "^2.0.0-beta.8",
-    "autoprefixer": "^6.4.0",
-    "babel-eslint": "^7.0.0",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-lodash": "^3.3.4",
-    "chai": "^3.5.0",
-    "chalk": "^1.1.3",
-    "chromedriver": "^87.0.1",
-    "connect-history-api-fallback": "^1.1.0",
-    "cross-spawn": "^4.0.2",
-    "css-loader": "^0.28.0",
-    "custom-event-polyfill": "^1.0.7",
-    "eslint": "^5.16.0",
-    "eslint-config-standard": "^12.0.0",
-    "eslint-friendly-formatter": "^2.0.5",
-    "eslint-loader": "^2.1.0",
-    "eslint-plugin-import": "^2.13.0",
-    "eslint-plugin-node": "^7.0.0",
-    "eslint-plugin-promise": "^4.0.0",
-    "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^5.2.2",
-    "eventsource-polyfill": "^0.9.6",
-    "express": "^4.13.3",
-    "file-loader": "^3.0.1",
-    "function-bind": "^1.0.2",
-    "html-webpack-plugin": "^3.0.0",
-    "http-proxy-middleware": "^0.17.2",
-    "inject-loader": "^2.0.1",
-    "iso-639-1": "^2.0.3",
-    "isparta-loader": "^2.0.0",
-    "json-loader": "^0.5.4",
-    "karma": "^3.0.0",
-    "karma-coverage": "^1.1.1",
-    "karma-firefox-launcher": "^1.1.0",
-    "karma-mocha": "^1.2.0",
-    "karma-mocha-reporter": "^2.2.1",
-    "karma-sinon-chai": "^2.0.2",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.26",
-    "karma-webpack": "^4.0.0-rc.3",
-    "lodash": "^4.16.4",
-    "lolex": "^1.4.0",
-    "mini-css-extract-plugin": "^0.5.0",
-    "mocha": "^3.1.0",
-    "nightwatch": "^0.9.8",
-    "opn": "^4.0.2",
-    "ora": "^0.3.0",
-    "postcss-loader": "^3.0.0",
-    "raw-loader": "^0.5.1",
-    "sass": "^1.17.3",
-    "sass-loader": "git://github.com/webpack-contrib/sass-loader",
+    "@babel/core": "7.7.5",
+    "@babel/plugin-transform-runtime": "7.7.6",
+    "@babel/preset-env": "7.7.6",
+    "@babel/register": "7.7.4",
+    "@ungap/event-target": "0.2.3",
+    "@vue/babel-helper-vue-jsx-merge-props": "1.2.1",
+    "@vue/babel-preset-jsx": "1.2.4",
+    "@vue/test-utils": "1.0.0-beta.28",
+    "autoprefixer": "6.7.7",
+    "babel-eslint": "7.2.3",
+    "babel-loader": "8.0.6",
+    "babel-plugin-lodash": "3.3.4",
+    "chai": "3.5.0",
+    "chalk": "1.1.3",
+    "chromedriver": "87.0.7",
+    "connect-history-api-fallback": "1.6.0",
+    "copy-webpack-plugin": "6.4.1",
+    "cross-spawn": "4.0.2",
+    "css-loader": "0.28.11",
+    "custom-event-polyfill": "1.0.7",
+    "eslint": "5.16.0",
+    "eslint-config-standard": "12.0.0",
+    "eslint-friendly-formatter": "2.0.7",
+    "eslint-loader": "2.1.2",
+    "eslint-plugin-import": "2.17.2",
+    "eslint-plugin-node": "7.0.1",
+    "eslint-plugin-promise": "4.1.1",
+    "eslint-plugin-standard": "4.0.0",
+    "eslint-plugin-vue": "5.2.3",
+    "eventsource-polyfill": "0.9.6",
+    "express": "4.16.4",
+    "file-loader": "3.0.1",
+    "function-bind": "1.1.1",
+    "html-webpack-plugin": "3.2.0",
+    "http-proxy-middleware": "0.17.4",
+    "inject-loader": "2.0.1",
+    "iso-639-1": "2.0.3",
+    "isparta-loader": "2.0.0",
+    "json-loader": "0.5.7",
+    "karma": "3.1.4",
+    "karma-coverage": "1.1.2",
+    "karma-firefox-launcher": "1.1.0",
+    "karma-mocha": "1.3.0",
+    "karma-mocha-reporter": "2.2.5",
+    "karma-sinon-chai": "2.0.2",
+    "karma-sourcemap-loader": "0.3.8",
+    "karma-spec-reporter": "0.0.33",
+    "karma-webpack": "4.0.2",
+    "lodash": "4.17.21",
+    "lolex": "1.6.0",
+    "mini-css-extract-plugin": "0.5.0",
+    "mocha": "3.5.3",
+    "nightwatch": "0.9.21",
+    "opn": "4.0.2",
+    "ora": "0.3.0",
+    "postcss-loader": "3.0.0",
+    "raw-loader": "0.5.1",
+    "sass": "1.20.1",
+    "sass-loader": "7.2.0",
    "selenium-server": "2.53.1",
-    "semver": "^5.3.0",
-    "serviceworker-webpack-plugin": "^1.0.0",
-    "shelljs": "^0.8.4",
-    "sinon": "^2.1.0",
-    "sinon-chai": "^2.8.0",
-    "stylelint": "^13.6.1",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-rscss": "^0.4.0",
-    "url-loader": "^1.1.2",
-    "vue-loader": "^16.1.2",
-    "vue-style-loader": "^4.0.0",
-    "webpack": "^4.0.0",
-    "webpack-dev-middleware": "^3.6.0",
-    "webpack-hot-middleware": "^2.12.2",
-    "webpack-merge": "^0.14.1"
+    "semver": "5.6.0",
+    "serviceworker-webpack-plugin": "1.0.1",
+    "shelljs": "0.8.5",
+    "sinon": "2.4.1",
+    "sinon-chai": "2.14.0",
+    "stylelint": "13.6.1",
+    "stylelint-config-standard": "20.0.0",
+    "stylelint-rscss": "0.4.0",
+    "url-loader": "1.1.2",
+    "vue-loader": "14.2.4",
+    "vue-style-loader": "4.1.2",
+    "webpack": "4.46.0",
+    "webpack-dev-middleware": "3.7.3",
+    "webpack-hot-middleware": "2.24.3",
+    "webpack-merge": "0.14.1"
  },
  "engines": {
    "node": ">= 4.0.0",
--- a/renovate.json
+++ b/renovate.json
@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base"
+  ]
+}
--- a/src/App.js
+++ b/src/App.js
@ -4,7 +4,7 @@ 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 ChatPanel from './components/chat_panel/chat_panel.vue'
+import ShoutPanel from './components/shout_panel/shout_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'
@ -26,7 +26,7 @@ export default {
    InstanceSpecificPanel,
    FeaturesPanel,
    WhoToFollowPanel,
-    ChatPanel,
+    ShoutPanel,
    MediaModal,
    SideDrawer,
    MobilePostStatusButton,
@ -65,7 +65,7 @@ export default {
        }
      }
    },
-    chat () { return this.$store.state.chat.channel.state === 'joined' },
+    shout () { return this.$store.state.shout.channel.state === 'joined' },
    suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
    showInstanceSpecificPanel () {
      return this.$store.state.instance.showInstanceSpecificPanel &&
@ -73,11 +73,17 @@ export default {
        this.$store.state.instance.instanceSpecificPanelContent
    },
    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
+    shoutboxPosition () {
+      return this.$store.getters.mergedConfig.showNewPostButton || false
+    },
+    hideShoutbox () {
+      return this.$store.getters.mergedConfig.hideShoutbox
+    },
    isMobileLayout () { return this.$store.state.interface.mobileLayout },
    privateMode () { return this.$store.state.instance.private },
    sidebarAlign () {
      return {
-        'order': this.$store.state.instance.sidebarRight ? 99 : 0
+        'order': this.$store.getters.mergedConfig.sidebarRight ? 99 : 0
      }
    },
    ...mapGetters(['mergedConfig'])
--- a/src/App.scss
+++ b/src/App.scss
@ -88,6 +88,10 @@ a {
  font-family: sans-serif;
  font-family: var(--interfaceFont, sans-serif);

+  &.-sublime {
+    background: transparent;
+  }
+
  i[class*=icon-],
  .svg-inline--fa {
    color: $fallback--text;
@ -187,7 +191,7 @@ a {
  }
 }

-input, textarea, .select, .input {
+input, textarea, .input {

  &.unstyled {
    border-radius: 0;
@ -217,47 +221,11 @@ input, textarea, .select, .input {
  hyphens: none;
  padding: 8px .5em;

-  &.select {
-    padding: 0;
-  }
-
-  &:disabled, &[disabled=disabled] {
+  &:disabled, &[disabled=disabled], &.disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

-  .select-down-icon {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 5px;
-    height: 100%;
-    color: $fallback--text;
-    color: var(--inputText, $fallback--text);
-    line-height: 28px;
-    z-index: 0;
-    pointer-events: none;
-  }
-
-  select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background: transparent;
-    border: none;
-    color: $fallback--text;
-    color: var(--inputText, --text, $fallback--text);
-    margin: 0;
-    padding: 0 2em 0 .2em;
-    font-family: sans-serif;
-    font-family: var(--inputFont, sans-serif);
-    font-size: 14px;
-    width: 100%;
-    z-index: 1;
-    height: 28px;
-    line-height: 16px;
-  }
-
  &[type=range] {
    background: none;
    border: none;
@ -830,13 +798,6 @@ nav {
  }
 }

-.select-multiple {
-  display: flex;
-  .option-list {
-    margin: 0;
-    padding-left: .5em;
-  }
-}
 .setting-list,
 .option-list{
  list-style-type: none;
--- a/src/App.vue
+++ b/src/App.vue
@ -49,10 +49,11 @@
      </div>
      <media-modal />
    </div>
-    <chat-panel
-      v-if="currentUser && chat"
+    <shout-panel
+      v-if="currentUser && shout && !hideShoutbox"
      :floating="true"
-      class="floating-chat mobile-hidden"
+      class="floating-shout mobile-hidden"
+      :class="{ 'left': shoutboxPosition }"
    />
    <MobilePostStatusButton />
    <UserReportingModal />
--- a/src/_variables.scss
+++ b/src/_variables.scss
@ -30,3 +30,5 @@ $fallback--attachmentRadius: 10px;
 $fallback--chatMessageRadius: 10px;

 $fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
+
+$status-margin: 0.75em;
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@ -121,6 +121,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
  copyInstanceOption('nsfwCensorImage')
  copyInstanceOption('background')
  copyInstanceOption('hidePostStats')
+  copyInstanceOption('hideBotIndication')
  copyInstanceOption('hideUserStats')
  copyInstanceOption('hideFilteredStatuses')
  copyInstanceOption('logo')
@ -246,7 +247,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: 'chatAvailable', value: features.includes('chat') })
+      store.dispatch('setInstanceOption', { name: 'shoutAvailable', 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') })
--- a/src/boot/routes.js
+++ b/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 ChatPanel from 'components/chat_panel/chat_panel.vue'
+import ShoutPanel from 'components/shout_panel/shout_panel.vue'
 import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
 import About from 'components/about/about.vue'
 import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
@ -64,7 +64,7 @@ export default (store) => {
    { name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
    { name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute },
    { name: 'login', path: '/login', component: AuthForm },
-    { name: 'chat-panel', path: '/chat-panel', component: ChatPanel, props: () => ({ floating: false }) },
+    { name: 'shout-panel', path: '/shout-panel', component: ShoutPanel, props: () => ({ floating: false }) },
    { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
    { name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
    { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@ -1,4 +1,5 @@
 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'
@ -10,7 +11,12 @@ import {
  faImage,
  faVideo,
  faPlayCircle,
-  faTimes
+  faTimes,
+  faStop,
+  faSearchPlus,
+  faTrashAlt,
+  faPencilAlt,
+  faAlignRight
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
@ -19,36 +25,64 @@ library.add(
  faImage,
  faVideo,
  faPlayCircle,
-  faTimes
+  faTimes,
+  faStop,
+  faSearchPlus,
+  faTrashAlt,
+  faPencilAlt,
+  faAlignRight
 )

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

      <a
        v-if="type === 'image' && (!hidden || preloadImage)"
-      class="image-attachment"
-      :class="{'hidden': hidden && preloadImage }"
+        class="image-container"
+        :class="{'-hidden': hidden && preloadImage }"
        :href="attachment.url"
        target="_blank"
-      @click="openModal"
+        @click.stop.prevent="openModal"
      >
        <StillImage
          class="image"
@ -69,26 +156,48 @@
      </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="{'small': isSmall}"
-      :href="allowPlay ? undefined : attachment.url"
-      @click="openModal"
+        :class="{ 'button-unstyled': 'isModal' }"
+        :href="attachment.url"
+        @click.stop.prevent="openModal"
      >
        <VideoAttachment
          class="video"
          :attachment="attachment"
-        :controls="allowPlay"
+          :controls="!useModal"
          @play="$emit('play')"
          @pause="$emit('pause')"
        />
        <FAIcon
-        v-if="!allowPlay"
+          v-if="useModal"
          class="play-icon"
          icon="play-circle"
        />
-    </a>
+      </component>

+      <span
+        v-if="type === 'audio' && !hidden"
+        class="audio-container"
+        :href="attachment.url"
+        @click.stop.prevent="openModal"
+      >
        <audio
          v-if="type === 'audio'"
          :src="attachment.url"
@ -98,10 +207,11 @@
          @play="$emit('play')"
          @pause="$emit('pause')"
        />
+      </span>

      <div
        v-if="type === 'html' && attachment.oembed"
-      class="oembed"
+        class="oembed-container"
        @click.prevent="linkClicked"
      >
        <div
@ -117,206 +227,42 @@
          <!-- 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 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;
-    margin: 10px;
-    padding: 0;
-    z-index: 4;
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    text-align: center;
-    width: 2em;
-    height: 2em;
-    font-size: 1.25em;
-    // TODO: theming? hard to theme with unknown background image color
-    background: rgba(230, 230, 230, 0.7);
-    .svg-inline--fa {
-      color: rgba(0, 0, 0, 0.6);
-    }
-    &:hover .svg-inline--fa {
-      color: rgba(0, 0, 0, 0.9);
-    }
-  }
-
-  video {
-    z-index: 0;
-  }
-
-  audio {
-    width: 100%;
-  }
-
-  img.media-upload {
-    line-height: 0;
-    max-height: 200px;
-    max-width: 100%;
-  }
-
-  .oembed {
-    line-height: 1.2em;
-    flex: 1 0 100%;
-    width: 100%;
-    margin-right: 15px;
-    display: flex;
-
-    img {
-      width: 100%;
-    }
-
-    .image {
-      flex: 1;
-      img {
-        border: 0px;
-        border-radius: 5px;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-
-    .text {
-      flex: 2;
-      margin: 8px;
-      word-break: break-all;
-      h1 {
-        font-size: 14px;
-        margin: 0px;
-      }
-    }
-  }
-
-  .image-attachment {
-    &,
-    & .image {
-      width: 100%;
-      height: 100%;
-    }
-
-    &.hidden {
-      display: none;
-    }
-
-    .nsfw {
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-    }
-
-    img {
-      image-orientation: from-image; // NOTE: only FF supports this
-    }
-  }
-}
-</style>
+<style src="./attachment.scss" lang="scss"></style>
--- a/src/components/basic_user_card/basic_user_card.js
+++ b/src/components/basic_user_card/basic_user_card.js
@ -1,5 +1,6 @@
 import UserCard from '../user_card/user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import RichContent from 'src/components/rich_content/rich_content.jsx'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'

 const BasicUserCard = {
@ -13,7 +14,8 @@ const BasicUserCard = {
  },
  components: {
    UserCard,
-    UserAvatar
+    UserAvatar,
+    RichContent
  },
  methods: {
    toggleUserExpanded () {
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@ -25,17 +25,11 @@
        :title="user.name"
        class="basic-user-card-user-name"
      >
-        <!-- eslint-disable vue/no-v-html -->
-        <span
-          v-if="user.name_html"
+        <RichContent
          class="basic-user-card-user-name-value"
-          v-html="user.name_html"
+          :html="user.name"
+          :emoji="user.emoji"
        />
-        <!-- eslint-enable vue/no-v-html -->
-        <span
-          v-else
-          class="basic-user-card-user-name-value"
-        >{{ user.name }}</span>
      </div>
      <div>
        <router-link
--- a/src/components/chat_list_item/chat_list_item.js
+++ b/src/components/chat_list_item/chat_list_item.js
@ -1,5 +1,5 @@
 import { mapState } from 'vuex'
-import StatusContent from '../status_content/status_content.vue'
+import StatusBody from '../status_content/status_content.vue'
 import fileType from 'src/services/file_type/file_type.service'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import AvatarList from '../avatar_list/avatar_list.vue'
@ -16,7 +16,7 @@ const ChatListItem = {
    AvatarList,
    Timeago,
    ChatTitle,
-    StatusContent
+    StatusBody
  },
  computed: {
    ...mapState({
@ -38,12 +38,14 @@ const ChatListItem = {
    },
    messageForStatusContent () {
      const message = this.chat.lastMessage
+      const messageEmojis = message ? message.emojis : []
      const isYou = message && message.account_id === this.currentUser.id
      const content = message ? (this.attachmentInfo || message.content) : ''
      const messagePreview = isYou ? `<i>${this.$t('chats.you')}</i> ${content}` : content
      return {
        summary: '',
-        statusnet_html: messagePreview,
+        emojis: messageEmojis,
+        raw_html: messagePreview,
        text: messagePreview,
        attachments: []
      }
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/src/components/chat_list_item/chat_list_item.scss
@ -77,18 +77,15 @@
    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
  }

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

  .time-wrapper {
    line-height: 1.4em;
  }

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

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

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

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

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

 .chat-message-date-separator {
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@ -71,6 +71,7 @@
              </Popover>
            </div>
            <StatusContent
+              class="message-content"
              :status="messageForStatusContent"
              :full-content="true"
            >
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@ -1,5 +1,4 @@
 <template>
-  <!-- eslint-disable vue/no-v-html -->
  <div
    class="chat-title"
    :title="title"
@ -14,12 +13,13 @@
        height="23px"
      />
    </router-link>
-    <span
+    <RichContent
      class="username"
-      v-html="htmlTitle"
+      :title="'@'+user.screen_name_ui"
+      :html="htmlTitle"
+      :emoji="user.emoji"
    />
  </div>
-  <!-- eslint-enable vue/no-v-html -->
 </template>

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

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

  .Avatar {
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@ -1,5 +1,19 @@
 import { reduce, filter, findIndex, clone, get } from 'lodash'
 import Status from '../status/status.vue'
+import ThreadTree from '../thread_tree/thread_tree.vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faAngleDoubleDown,
+  faAngleDoubleLeft,
+  faChevronLeft
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faAngleDoubleDown,
+  faAngleDoubleLeft,
+  faChevronLeft
+)

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

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

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

-  &.-expanded {
-    .conversation-status:last-child {
+  .thread-ancestor-has-other-replies .conversation-status,
+  .thread-ancestor:last-child .conversation-status,
+  .thread-ancestor:last-child .thread-ancestor-dive-box,
+  &.-expanded .thread-tree .conversation-status {
    border-bottom: none;
+  }
+
+  .thread-ancestors + .thread-tree > .conversation-status {
+    border-top-width: 1px;
+    border-top-style: solid;
+    border-top-color: var(--border, $fallback--border);
+  }
+
+  /* expanded conversation in timeline */
+  &.status-fadein.-expanded .thread-body {
+    border-left-width: 4px;
+    border-left-style: solid;
+    border-left-color: $fallback--cRed;
+    border-left-color: var(--cRed, $fallback--cRed);
    border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
-    }
+    border-bottom: 1px solid var(--border, $fallback--border);
  }
 }
 </style>
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@ -52,6 +52,7 @@
          href="/pleroma/admin/#/login-pleroma"
          class="nav-icon"
          target="_blank"
+          @click.stop
        >
          <FAIcon
            fixed-width
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@ -267,7 +267,7 @@ const EmojiInput = {
      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.setSelectionRange(position, position)
        this.caret = position
      })
    },
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@ -1,9 +1,9 @@
 <template>
  <div
+    ref="root"
    v-click-outside="onClickOutside"
    class="emoji-input"
    :class="{ 'with-picker': !hideEmojiButton }"
-    ref='root'
  >
    <slot />
    <template v-if="enableEmojiPicker">
--- a/src/components/features_panel/features_panel.js
+++ b/src/components/features_panel/features_panel.js
@ -2,7 +2,7 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for

 const FeaturesPanel = {
  computed: {
-    chat: function () { return this.$store.state.instance.chatAvailable },
+    shout: function () { return this.$store.state.instance.shoutAvailable },
    pleromaChatMessages: function () { return this.$store.state.instance.pleromaChatMessagesAvailable },
    gopher: function () { return this.$store.state.instance.gopherAvailable },
    whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled },
--- a/src/components/features_panel/features_panel.vue
+++ b/src/components/features_panel/features_panel.vue
@ -8,8 +8,8 @@
      </div>
      <div class="panel-body features-panel">
        <ul>
-          <li v-if="chat">
-            {{ $t('features_panel.chat') }}
+          <li v-if="shout">
+            {{ $t('features_panel.shout') }}
          </li>
          <li v-if="pleromaChatMessages">
            {{ $t('features_panel.pleroma_chat_messages') }}
--- a/src/components/flash/flash.js
+++ b/src/components/flash/flash.js
@ -0,0 +1,53 @@
+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
--- a/src/components/flash/flash.vue
+++ b/src/components/flash/flash.vue
@ -0,0 +1,84 @@
+<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>
--- a/src/components/follow_button/follow_button.js
+++ b/src/components/follow_button/follow_button.js
@ -1,6 +1,6 @@
 import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 export default {
-  props: ['relationship', 'labelFollowing', 'buttonClass'],
+  props: ['relationship', 'user', 'labelFollowing', 'buttonClass'],
  data () {
    return {
      inProgress: false
@ -14,7 +14,7 @@ export default {
      if (this.inProgress || this.relationship.following) {
        return this.$t('user_card.follow_unfollow')
      } else if (this.relationship.requested) {
-        return this.$t('user_card.follow_again')
+        return this.$t('user_card.follow_cancel')
      } else {
        return this.$t('user_card.follow')
      }
@ -29,11 +29,14 @@ export default {
      } else {
        return this.$t('user_card.follow')
      }
+    },
+    disabled () {
+      return this.inProgress || this.user.deactivated
    }
  },
  methods: {
    onClick () {
-      this.relationship.following ? this.unfollow() : this.follow()
+      this.relationship.following || this.relationship.requested ? this.unfollow() : this.follow()
    },
    follow () {
      this.inProgress = true
--- a/src/components/follow_button/follow_button.vue
+++ b/src/components/follow_button/follow_button.vue
@ -2,7 +2,7 @@
  <button
    class="btn button-default follow-button"
    :class="{ toggled: isPressed }"
-    :disabled="inProgress"
+    :disabled="disabled"
    :title="title"
    @click="onClick"
  >
--- a/src/components/follow_card/follow_card.vue
+++ b/src/components/follow_card/follow_card.vue
@ -20,6 +20,7 @@
          :relationship="relationship"
          :label-following="$t('user_card.follow_unfollow')"
          class="follow-card-follow-button"
+          :user="user"
        />
      </template>
    </div>
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@ -1,13 +1,10 @@
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)
+import { set } from 'vue'
+import Select from '../select/select.vue'

 export default {
+  components: {
+    Select
+  },
  props: [
    'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
  ],
@ -39,8 +36,8 @@ export default {
        return this.dValue.family
      },
      set (v) {
-        this.lValue.family = v
-        this.$emit('update:modelValue', this.lValue)
+        set(this.lValue, 'family', v)
+        this.$emit('input', this.lValue)
      }
    },
    isCustom () {
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@ -22,12 +22,7 @@
      class="opt-l"
      :for="name + '-o'"
    />
-    <label
-      :for="name + '-font-switcher'"
-      class="select"
-      :disabled="!present"
-    >
-      <select
+    <Select
      :id="name + '-font-switcher'"
      v-model="preset"
      :disabled="!present"
@ -40,12 +35,7 @@
      >
        {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
      </option>
-      </select>
-      <FAIcon
-        class="select-down-icon"
-        icon="chevron-down"
-      />
-    </label>
+    </Select>
    <input
      v-if="isCustom"
      :id="name"
@ -65,7 +55,8 @@
    min-width: 10em;
  }
  &.custom {
-    .select {
+    /* TODO Should make proper joiners... */
+    .font-switcher {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@ -1,15 +1,26 @@
 import Attachment from '../attachment/attachment.vue'
-import { chunk, last, dropRight, sumBy } from 'lodash'
+import { sumBy } from 'lodash'

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

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

  .gallery-row-inner {
    position: absolute;
@ -48,9 +160,24 @@
    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-row-inner .attachment {
+  .gallery-item {
    margin: 0 0.5em 0 0;
    flex-grow: 1;
    height: 100%;
@ -61,32 +188,5 @@
      margin: 0;
    }
  }
-
-  .image-attachment {
-    width: 100%;
-    height: 100%;
-  }
-
-  .video-container {
-    height: 100%;
-  }
-
-  &.contain-fit {
-    img,
-    video,
-    canvas {
-      object-fit: contain;
-      height: 100%;
-    }
-  }
-
-  &.cover-fit {
-    img,
-    video,
-    canvas {
-      object-fit: cover;
-    }
-  }
 }
-
 </style>
--- a/src/components/hashtag_link/hashtag_link.js
+++ b/src/components/hashtag_link/hashtag_link.js
@ -0,0 +1,36 @@
+import { extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
+
+const HashtagLink = {
+  name: 'HashtagLink',
+  props: {
+    url: {
+      required: true,
+      type: String
+    },
+    content: {
+      required: true,
+      type: String
+    },
+    tag: {
+      required: false,
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    onClick () {
+      const tag = this.tag || extractTagFromUrl(this.url)
+      if (tag) {
+        const link = this.generateTagLink(tag)
+        this.$router.push(link)
+      } else {
+        window.open(this.url, '_blank')
+      }
+    },
+    generateTagLink (tag) {
+      return `/tag/${tag}`
+    }
+  }
+}
+
+export default HashtagLink
--- a/src/components/hashtag_link/hashtag_link.scss
+++ b/src/components/hashtag_link/hashtag_link.scss
@ -0,0 +1,6 @@
+.HashtagLink {
+  position: relative;
+  white-space: normal;
+  display: inline-block;
+  color: var(--link);
+}
--- a/src/components/hashtag_link/hashtag_link.vue
+++ b/src/components/hashtag_link/hashtag_link.vue
@ -0,0 +1,19 @@
+<template>
+  <span
+    class="HashtagLink"
+  >
+    <!-- eslint-disable vue/no-v-html -->
+    <a
+      :href="url"
+      class="original"
+      target="_blank"
+      @click.prevent="onClick"
+      v-html="content"
+    />
+    <!-- eslint-enable vue/no-v-html -->
+  </span>
+</template>
+
+<script src="./hashtag_link.js"/>
+
+<style lang="scss" src="./hashtag_link.scss"/>
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@ -3,11 +3,7 @@
    <label for="interface-language-switcher">
      {{ $t('settings.interfaceLanguage') }}
    </label>
-    <label
-      for="interface-language-switcher"
-      class="select"
-    >
-      <select
+    <Select
      id="interface-language-switcher"
      v-model="language"
    >
@ -18,12 +14,7 @@
      >
        {{ lang.name }}
      </option>
-      </select>
-      <FAIcon
-        class="select-down-icon"
-        icon="chevron-down"
-      />
-    </label>
+    </Select>
  </div>
 </template>

@ -32,16 +23,12 @@ import languagesObject from '../../i18n/messages'
 import localeService from '../../services/locale/locale.service.js'
 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
-)
+import Select from '../select/select.vue'

 export default {
+  components: {
+    Select
+  },
  computed: {
    languages () {
      return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@ -1,24 +1,46 @@
 import StillImage from '../still-image/still-image.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
 import Modal from '../modal/modal.vue'
-import fileTypeService from '../../services/file_type/file_type.service.js'
+import PinchZoom from '../pinch_zoom/pinch_zoom.vue'
+import SwipeClick from '../swipe_click/swipe_click.vue'
 import GestureService from '../../services/gesture_service/gesture_service'
+import Flash from 'src/components/flash/flash.vue'
+import fileTypeService from '../../services/file_type/file_type.service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
  faChevronLeft,
-  faChevronRight
+  faChevronRight,
+  faCircleNotch,
+  faTimes
 } from '@fortawesome/free-solid-svg-icons'

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

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

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

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

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

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

-@keyframes media-fadein {
+.media-modal-view {
+  @keyframes media-fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
-}
+  }

-.modal-image {
-  max-width: 90%;
-  max-height: 90%;
-  box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
+  .modal-image-container {
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    flex-direction: column;
+    max-width: 100%;
+    max-height: 100%;
+    width: 100%;
+    height: 100%;
+    flex-grow: 1;
+    justify-content: center;
+
+    &-inner {
+      width: 100%;
+      height: 100%;
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .description,
+  .counter {
+    /* Hardcoded since background is also hardcoded */
+    color: white;
+    margin-top: 1em;
+    text-shadow: 0 0 10px black, 0 0 10px black;
+    padding: 0.2em 2em;
+  }
+
+  .description {
+    flex: 0 0 auto;
+    overflow-y: auto;
+    min-height: 1em;
+    max-width: 500px;
+    max-height: 9.5em;
+    word-break: break-all;
+  }
+
+  .modal-image {
+    max-width: 100%;
+    max-height: 100%;
    image-orientation: from-image; // NOTE: only FF supports this
    animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
-}

-.modal-view-button-arrow {
+    &.loading {
+      opacity: 0.5;
+    }
+  }
+
+  .loading-spinner {
+    width: 100%;
+    height: 100%;
    position: absolute;
-  display: block;
-  top: 50%;
-  margin-top: -50px;
-  width: 70px;
-  height: 100px;
+    pointer-events: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    svg {
+      color: white;
+    }
+  }
+
+  .modal-view-button {
    border: 0;
    padding: 0;
    opacity: 0;
@ -106,14 +227,33 @@
    overflow: visible;
    cursor: pointer;
    transition: opacity 333ms cubic-bezier(.4,0,.22,1);
+    height: $modal-view-button-icon-height;
+    width: $modal-view-button-icon-width;
+
+    .button-icon {
+      position: absolute;
+      height: $modal-view-button-icon-height;
+      width: $modal-view-button-icon-width;
+      font-size: 14px;
+      line-height: $modal-view-button-icon-height;
+      color: #FFF;
+      text-align: center;
+      background-color: rgba(0,0,0,.3);
+    }
+  }
+
+  .modal-view-button-arrow {
+    position: absolute;
+    display: block;
+    top: 50%;
+    margin-top: $modal-view-button-icon-half-height;
+    width: $modal-view-button-icon-width;
+    height: $modal-view-button-icon-height;

    .arrow-icon {
      position: absolute;
-    top: 35px;
-    height: 30px;
-    width: 32px;
-    font-size: 14px;
-    line-height: 30px;
+      top: 0;
+      line-height: $modal-view-button-icon-height;
      color: #FFF;
      text-align: center;
      background-color: rgba(0,0,0,.3);
@ -122,14 +262,25 @@
    &--prev {
      left: 0;
      .arrow-icon {
-      left: 6px;
+        left: $modal-view-button-icon-margin;
      }
    }

    &--next {
      right: 0;
      .arrow-icon {
-      right: 6px;
+        right: $modal-view-button-icon-margin;
+      }
+    }
+  }
+
+  .modal-view-button-hide {
+    position: absolute;
+    top: 0;
+    right: 0;
+    .button-icon {
+      top: $modal-view-button-icon-margin;
+      right: $modal-view-button-icon-margin;
    }
  }
 }
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@ -0,0 +1,134 @@
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { mapGetters, mapState } from 'vuex'
+import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
+import UserAvatar from '../user_avatar/user_avatar.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faAt
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faAt
+)
+
+const MentionLink = {
+  name: 'MentionLink',
+  components: {
+    UserAvatar
+  },
+  props: {
+    url: {
+      required: true,
+      type: String
+    },
+    content: {
+      required: true,
+      type: String
+    },
+    userId: {
+      required: false,
+      type: String
+    },
+    userScreenName: {
+      required: false,
+      type: String
+    }
+  },
+  methods: {
+    onClick () {
+      const link = generateProfileLink(
+        this.userId || this.user.id,
+        this.userScreenName || this.user.screen_name
+      )
+      this.$router.push(link)
+    }
+  },
+  computed: {
+    user () {
+      return this.url && this.$store && this.$store.getters.findUserByUrl(this.url)
+    },
+    isYou () {
+      // FIXME why user !== currentUser???
+      return this.user && this.user.id === this.currentUser.id
+    },
+    userName () {
+      return this.user && this.userNameFullUi.split('@')[0]
+    },
+    serverName () {
+      // XXX assumed that domain does not contain @
+      return this.user && (this.userNameFullUi.split('@')[1] || this.$store.getters.instanceDomain)
+    },
+    userNameFull () {
+      return this.user && this.user.screen_name
+    },
+    userNameFullUi () {
+      return this.user && this.user.screen_name_ui
+    },
+    highlight () {
+      return this.user && this.mergedConfig.highlight[this.user.screen_name]
+    },
+    highlightType () {
+      return this.highlight && ('-' + this.highlight.type)
+    },
+    highlightClass () {
+      if (this.highlight) return highlightClass(this.user)
+    },
+    style () {
+      if (this.highlight) {
+        const {
+          backgroundColor,
+          backgroundPosition,
+          backgroundImage,
+          ...rest
+        } = highlightStyle(this.highlight)
+        return rest
+      }
+    },
+    classnames () {
+      return [
+        {
+          '-you': this.isYou && this.shouldBoldenYou,
+          '-highlighted': this.highlight
+        },
+        this.highlightType
+      ]
+    },
+    useAtIcon () {
+      return this.mergedConfig.useAtIcon
+    },
+    isRemote () {
+      return this.userName !== this.userNameFull
+    },
+    shouldShowFullUserName () {
+      const conf = this.mergedConfig.mentionLinkDisplay
+      if (conf === 'short') {
+        return false
+      } else if (conf === 'full') {
+        return true
+      } else { // full_for_remote
+        return this.isRemote
+      }
+    },
+    shouldShowTooltip () {
+      return this.mergedConfig.mentionLinkShowTooltip && this.mergedConfig.mentionLinkDisplay === 'short' && this.isRemote
+    },
+    shouldShowAvatar () {
+      return this.mergedConfig.mentionLinkShowAvatar
+    },
+    shouldShowYous () {
+      return this.mergedConfig.mentionLinkShowYous
+    },
+    shouldBoldenYou () {
+      return this.mergedConfig.mentionLinkBoldenYou
+    },
+    shouldFadeDomain () {
+      return this.mergedConfig.mentionLinkFadeDomain
+    },
+    ...mapGetters(['mergedConfig']),
+    ...mapState({
+      currentUser: state => state.users.currentUser
+    })
+  }
+}
+
+export default MentionLink
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@ -0,0 +1,115 @@
+@import '../../_variables.scss';
+
+.MentionLink {
+  position: relative;
+  white-space: normal;
+  display: inline;
+  color: var(--link);
+  word-break: normal;
+
+  & .new,
+  & .original {
+    display: inline;
+    border-radius: 2px;
+  }
+
+  .mention-avatar {
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    width: 1.5em;
+    height: 1.5em;
+    vertical-align: middle;
+    user-select: none;
+    margin-right: 0.2em;
+  }
+
+  .full {
+    position: absolute;
+    display: inline-block;
+    pointer-events: none;
+    opacity: 0;
+    top: 100%;
+    left: 0;
+    height: 100%;
+    word-wrap: normal;
+    white-space: nowrap;
+    transition: opacity 0.2s ease;
+    z-index: 1;
+    margin-top: 0.25em;
+    padding: 0.5em;
+    user-select: all;
+  }
+
+  & .short.-with-tooltip,
+  & .you {
+    user-select: none;
+  }
+
+  & .short,
+  & .full {
+    white-space: nowrap;
+  }
+
+  .shortName {
+    white-space: normal;
+  }
+
+  .new {
+    &.-you {
+      & .shortName,
+      & .full {
+        font-weight: 600;
+      }
+    }
+
+    .at {
+      color: var(--link);
+      opacity: 0.8;
+      display: inline-block;
+      line-height: 1;
+      padding: 0 0.1em;
+      vertical-align: -25%;
+      margin: 0;
+    }
+
+    &.-striped {
+      & .shortName,
+      & .full {
+        background-image:
+          repeating-linear-gradient(
+            135deg,
+            var(--____highlight-tintColor),
+            var(--____highlight-tintColor) 5px,
+            var(--____highlight-tintColor2) 5px,
+            var(--____highlight-tintColor2) 10px
+          );
+      }
+    }
+
+    &.-solid {
+      & .shortName,
+      & .full {
+        background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
+      }
+    }
+
+    &.-side {
+      & .shortName,
+      & .userNameFull {
+        box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
+      }
+    }
+  }
+
+  &:hover .new .full {
+    opacity: 1;
+    pointer-events: initial;
+  }
+
+  .serverName.-faded {
+    color: var(--faintLink, $fallback--link);
+  }
+
+  .full .-faded {
+    color: var(--faint, $fallback--faint);
+  }
+}
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@ -0,0 +1,75 @@
+<template>
+  <span
+    class="MentionLink"
+  >
+    <!-- eslint-disable vue/no-v-html -->
+    <a
+      v-if="!user"
+      :href="url"
+      class="original"
+      target="_blank"
+      v-html="content"
+    /><!-- eslint-enable vue/no-v-html --><span
+      v-if="user"
+      class="new"
+      :style="style"
+      :class="classnames"
+    >
+      <a
+        class="short button-unstyled"
+        :class="{ '-with-tooltip': shouldShowTooltip }"
+        :href="url"
+        @click.prevent="onClick"
+      >
+        <!-- eslint-disable vue/no-v-html -->
+        <UserAvatar
+          v-if="shouldShowAvatar"
+          class="mention-avatar"
+          :user="user"
+        /><span
+          class="shortName"
+        ><FAIcon
+          v-if="useAtIcon"
+          size="sm"
+          icon="at"
+          class="at"
+        />{{ !useAtIcon ? '@' : '' }}<span
+          class="userName"
+          v-html="userName"
+        /><span
+          v-if="shouldShowFullUserName"
+          class="serverName"
+          :class="{ '-faded': shouldFadeDomain }"
+          v-html="'@' + serverName"
+        /></span><span
+          v-if="isYou && shouldShowYous"
+          :class="{ '-you': shouldBoldenYou }"
+        > {{ $t('status.you') }}</span>
+        <!-- eslint-enable vue/no-v-html -->
+      </a><span
+        v-if="shouldShowTooltip"
+        class="full popover-default"
+        :class="[highlightType]"
+      >
+        <span
+          class="userNameFull"
+        >
+          <!-- eslint-disable vue/no-v-html -->
+          @<span
+            class="userName"
+            v-html="userName"
+          /><span
+            class="serverName"
+            :class="{ '-faded': shouldFadeDomain }"
+            v-html="'@' + serverName"
+          />
+          <!-- eslint-enable vue/no-v-html -->
+        </span>
+      </span>
+    </span>
+  </span>
+</template>
+
+<script src="./mention_link.js"/>
+
+<style lang="scss" src="./mention_link.scss"/>
--- a/src/components/mentions_line/mentions_line.js
+++ b/src/components/mentions_line/mentions_line.js
@ -0,0 +1,37 @@
+import MentionLink from 'src/components/mention_link/mention_link.vue'
+import { mapGetters } from 'vuex'
+
+export const MENTIONS_LIMIT = 5
+
+const MentionsLine = {
+  name: 'MentionsLine',
+  props: {
+    mentions: {
+      required: true,
+      type: Array
+    }
+  },
+  data: () => ({ expanded: false }),
+  components: {
+    MentionLink
+  },
+  computed: {
+    mentionsComputed () {
+      return this.mentions.slice(0, MENTIONS_LIMIT)
+    },
+    extraMentions () {
+      return this.mentions.slice(MENTIONS_LIMIT)
+    },
+    manyMentions () {
+      return this.extraMentions.length > 0
+    },
+    ...mapGetters(['mergedConfig'])
+  },
+  methods: {
+    toggleShowMore () {
+      this.expanded = !this.expanded
+    }
+  }
+}
+
+export default MentionsLine
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@ -0,0 +1,13 @@
+.MentionsLine {
+  word-break: break-all;
+
+  .mention-link:not(:first-child)::before {
+    content: ' ';
+  }
+
+  .showMoreLess {
+    margin-left: 0.5em;
+    white-space: normal;
+    color: var(--link);
+  }
+}
--- a/src/components/mentions_line/mentions_line.vue
+++ b/src/components/mentions_line/mentions_line.vue
@ -0,0 +1,43 @@
+<template>
+  <span class="MentionsLine">
+    <MentionLink
+      v-for="mention in mentionsComputed"
+      :key="mention.index"
+      class="mention-link"
+      :content="mention.content"
+      :url="mention.url"
+      :first-mention="false"
+    /><span
+      v-if="manyMentions"
+      class="extraMentions"
+    >
+      <span
+        v-if="expanded"
+        class="fullExtraMentions"
+      >
+        <MentionLink
+          v-for="mention in extraMentions"
+          :key="mention.index"
+          class="mention-link"
+          :content="mention.content"
+          :url="mention.url"
+          :first-mention="false"
+        />
+      </span><button
+        v-if="!expanded"
+        class="button-unstyled showMoreLess"
+        @click="toggleShowMore"
+      >
+        {{ $t('status.plus_more', { number: extraMentions.length }) }}
+      </button><button
+        v-if="expanded"
+        class="button-unstyled showMoreLess"
+        @click="toggleShowMore"
+      >
+        {{ $t('general.show_less') }}
+      </button>
+    </span>
+  </span>
+</template>
+<script src="./mentions_line.js" ></script>
+<style lang="scss" src="./mentions_line.scss" />
--- a/src/components/mobile_post_status_button/mobile_post_status_button.js
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
@ -44,6 +44,9 @@ const MobilePostStatusButton = {

      return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
    },
+    isPersistent () {
+      return !!this.$store.getters.mergedConfig.showNewPostButton
+    },
    autohideFloatingPostButton () {
      return !!this.$store.getters.mergedConfig.autohideFloatingPostButton
    }
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@ -2,7 +2,7 @@
  <div v-if="isLoggedIn">
    <button
      class="button-default new-status-button"
-      :class="{ 'hidden': isHidden }"
+      :class="{ 'hidden': isHidden, 'always-show': isPersistent }"
      @click="openPostForm"
    >
      <FAIcon icon="pen" />
@ -47,7 +47,7 @@
 }

@media all and (min-width: 801px) {
-  .new-status-button {
+  .new-status-button:not(.always-show) {
    display: none;
  }
 }
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.js
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.js
@ -1,17 +1,56 @@
 import { mapState } from 'vuex'
 import { get } from 'lodash'

+/**
+ * This is for backwards compatibility. We originally didn't recieve
+ * extra info like a reason why an instance was rejected/quarantined/etc.
+ * Because we didn't want to break backwards compatibility it was decided
+ * to add an extra "info" key.
+ */
+const toInstanceReasonObject = (instances, info, key) => {
+  return instances.map(instance => {
+    if (info[key] && info[key][instance] && info[key][instance]['reason']) {
+      return { instance: instance, reason: info[key][instance]['reason'] }
+    }
+    return { instance: instance, reason: '' }
+  })
+}
+
 const MRFTransparencyPanel = {
  computed: {
    ...mapState({
      federationPolicy: state => get(state, 'instance.federationPolicy'),
      mrfPolicies: state => get(state, 'instance.federationPolicy.mrf_policies', []),
-      quarantineInstances: state => get(state, 'instance.federationPolicy.quarantined_instances', []),
-      acceptInstances: state => get(state, 'instance.federationPolicy.mrf_simple.accept', []),
-      rejectInstances: state => get(state, 'instance.federationPolicy.mrf_simple.reject', []),
-      ftlRemovalInstances: state => get(state, 'instance.federationPolicy.mrf_simple.federated_timeline_removal', []),
-      mediaNsfwInstances: state => get(state, 'instance.federationPolicy.mrf_simple.media_nsfw', []),
-      mediaRemovalInstances: state => get(state, 'instance.federationPolicy.mrf_simple.media_removal', []),
+      quarantineInstances: state => toInstanceReasonObject(
+        get(state, 'instance.federationPolicy.quarantined_instances', []),
+        get(state, 'instance.federationPolicy.quarantined_instances_info', []),
+        'quarantined_instances'
+      ),
+      acceptInstances: state => toInstanceReasonObject(
+        get(state, 'instance.federationPolicy.mrf_simple.accept', []),
+        get(state, 'instance.federationPolicy.mrf_simple_info', []),
+        'accept'
+      ),
+      rejectInstances: state => toInstanceReasonObject(
+        get(state, 'instance.federationPolicy.mrf_simple.reject', []),
+        get(state, 'instance.federationPolicy.mrf_simple_info', []),
+        'reject'
+      ),
+      ftlRemovalInstances: state => toInstanceReasonObject(
+        get(state, 'instance.federationPolicy.mrf_simple.federated_timeline_removal', []),
+        get(state, 'instance.federationPolicy.mrf_simple_info', []),
+        'federated_timeline_removal'
+      ),
+      mediaNsfwInstances: state => toInstanceReasonObject(
+        get(state, 'instance.federationPolicy.mrf_simple.media_nsfw', []),
+        get(state, 'instance.federationPolicy.mrf_simple_info', []),
+        'media_nsfw'
+      ),
+      mediaRemovalInstances: state => toInstanceReasonObject(
+        get(state, 'instance.federationPolicy.mrf_simple.media_removal', []),
+        get(state, 'instance.federationPolicy.mrf_simple_info', []),
+        'media_removal'
+      ),
      keywordsFtlRemoval: state => get(state, 'instance.federationPolicy.mrf_keyword.federated_timeline_removal', []),
      keywordsReject: state => get(state, 'instance.federationPolicy.mrf_keyword.reject', []),
      keywordsReplace: state => get(state, 'instance.federationPolicy.mrf_keyword.replace', [])
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.scss
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.scss
@ -0,0 +1,21 @@
+.mrf-section {
+  margin: 1em;
+
+  table {
+    width:100%;
+    text-align: left;
+    padding-left:10px;
+    padding-bottom:20px;
+
+    th, td {
+      width: 180px;
+      max-width: 360px;
+      overflow:  hidden;
+      vertical-align: text-top;
+    }
+
+    th+th, td+td {
+      width: auto;
+    }
+  }
+}
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
@ -31,13 +31,24 @@

            <p>{{ $t("about.mrf.simple.accept_desc") }}</p>

-            <ul>
-              <li
-                v-for="instance in acceptInstances"
-                :key="instance"
-                v-text="instance"
-              />
-            </ul>
+            <table>
+              <tr>
+                <th>{{ $t("about.mrf.simple.instance") }}</th>
+                <th>{{ $t("about.mrf.simple.reason") }}</th>
+              </tr>
+              <tr
+                v-for="entry in acceptInstances"
+                :key="entry.instance + '_accept'"
+              >
+                <td>{{ entry.instance }}</td>
+                <td v-if="entry.reason === ''">
+                  {{ $t("about.mrf.simple.not_applicable") }}
+                </td>
+                <td v-else>
+                  {{ entry.reason }}
+                </td>
+              </tr>
+            </table>
          </div>

          <div v-if="rejectInstances.length">
@ -45,13 +56,24 @@

            <p>{{ $t("about.mrf.simple.reject_desc") }}</p>

-            <ul>
-              <li
-                v-for="instance in rejectInstances"
-                :key="instance"
-                v-text="instance"
-              />
-            </ul>
+            <table>
+              <tr>
+                <th>{{ $t("about.mrf.simple.instance") }}</th>
+                <th>{{ $t("about.mrf.simple.reason") }}</th>
+              </tr>
+              <tr
+                v-for="entry in rejectInstances"
+                :key="entry.instance + '_reject'"
+              >
+                <td>{{ entry.instance }}</td>
+                <td v-if="entry.reason === ''">
+                  {{ $t("about.mrf.simple.not_applicable") }}
+                </td>
+                <td v-else>
+                  {{ entry.reason }}
+                </td>
+              </tr>
+            </table>
          </div>

          <div v-if="quarantineInstances.length">
@ -59,13 +81,24 @@

            <p>{{ $t("about.mrf.simple.quarantine_desc") }}</p>

-            <ul>
-              <li
-                v-for="instance in quarantineInstances"
-                :key="instance"
-                v-text="instance"
-              />
-            </ul>
+            <table>
+              <tr>
+                <th>{{ $t("about.mrf.simple.instance") }}</th>
+                <th>{{ $t("about.mrf.simple.reason") }}</th>
+              </tr>
+              <tr
+                v-for="entry in quarantineInstances"
+                :key="entry.instance + '_quarantine'"
+              >
+                <td>{{ entry.instance }}</td>
+                <td v-if="entry.reason === ''">
+                  {{ $t("about.mrf.simple.not_applicable") }}
+                </td>
+                <td v-else>
+                  {{ entry.reason }}
+                </td>
+              </tr>
+            </table>
          </div>

          <div v-if="ftlRemovalInstances.length">
@ -73,13 +106,24 @@

            <p>{{ $t("about.mrf.simple.ftl_removal_desc") }}</p>

-            <ul>
-              <li
-                v-for="instance in ftlRemovalInstances"
-                :key="instance"
-                v-text="instance"
-              />
-            </ul>
+            <table>
+              <tr>
+                <th>{{ $t("about.mrf.simple.instance") }}</th>
+                <th>{{ $t("about.mrf.simple.reason") }}</th>
+              </tr>
+              <tr
+                v-for="entry in ftlRemovalInstances"
+                :key="entry.instance + '_ftl_removal'"
+              >
+                <td>{{ entry.instance }}</td>
+                <td v-if="entry.reason === ''">
+                  {{ $t("about.mrf.simple.not_applicable") }}
+                </td>
+                <td v-else>
+                  {{ entry.reason }}
+                </td>
+              </tr>
+            </table>
          </div>

          <div v-if="mediaNsfwInstances.length">
@ -87,13 +131,24 @@

            <p>{{ $t("about.mrf.simple.media_nsfw_desc") }}</p>

-            <ul>
-              <li
-                v-for="instance in mediaNsfwInstances"
-                :key="instance"
-                v-text="instance"
-              />
-            </ul>
+            <table>
+              <tr>
+                <th>{{ $t("about.mrf.simple.instance") }}</th>
+                <th>{{ $t("about.mrf.simple.reason") }}</th>
+              </tr>
+              <tr
+                v-for="entry in mediaNsfwInstances"
+                :key="entry.instance + '_media_nsfw'"
+              >
+                <td>{{ entry.instance }}</td>
+                <td v-if="entry.reason === ''">
+                  {{ $t("about.mrf.simple.not_applicable") }}
+                </td>
+                <td v-else>
+                  {{ entry.reason }}
+                </td>
+              </tr>
+            </table>
          </div>

          <div v-if="mediaRemovalInstances.length">
@ -101,13 +156,24 @@

            <p>{{ $t("about.mrf.simple.media_removal_desc") }}</p>

-            <ul>
-              <li
-                v-for="instance in mediaRemovalInstances"
-                :key="instance"
-                v-text="instance"
-              />
-            </ul>
+            <table>
+              <tr>
+                <th>{{ $t("about.mrf.simple.instance") }}</th>
+                <th>{{ $t("about.mrf.simple.reason") }}</th>
+              </tr>
+              <tr
+                v-for="entry in mediaRemovalInstances"
+                :key="entry.instance + '_media_removal'"
+              >
+                <td>{{ entry.instance }}</td>
+                <td v-if="entry.reason === ''">
+                  {{ $t("about.mrf.simple.not_applicable") }}
+                </td>
+                <td v-else>
+                  {{ entry.reason }}
+                </td>
+              </tr>
+            </table>
          </div>

          <h2 v-if="hasKeywordPolicies">
@ -161,7 +227,6 @@
 <script src="./mrf_transparency_panel.js"></script>

 <style lang="scss">
-.mrf-section {
-  margin: 1em;
-}
+@import '../../_variables.scss';
+@import './mrf_transparency_panel.scss';
 </style>
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@ -4,6 +4,7 @@ import Status from '../status/status.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserCard from '../user_card/user_card.vue'
 import Timeago from '../timeago/timeago.vue'
+import RichContent from 'src/components/rich_content/rich_content.jsx'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@ -44,7 +45,8 @@ const Notification = {
    UserAvatar,
    UserCard,
    Timeago,
-    Status
+    Status,
+    RichContent
  },
  methods: {
    toggleUserExpanded () {
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@ -2,6 +2,19 @@

 // TODO Copypaste from Status, should unify it somehow
 .Notification {
+   border-bottom: 1px solid;
+   border-color: $fallback--border;
+   border-color: var(--border, $fallback--border);
+   word-wrap: break-word;
+   word-break: break-word;
+   --emoji-size: 14px;
+
+  &:hover {
+    --_still-image-img-visibility: visible;
+    --_still-image-canvas-visibility: hidden;
+    --_still-image-label-visibility: hidden;
+  }
+
  &.-muted {
    padding: 0.25em 0.6em;
    height: 1.2em;
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@ -1,6 +1,7 @@
 <template>
  <Status
    v-if="notification.type === 'mention'"
+    class="Notification"
    :compact="true"
    :statusoid="notification.status"
  />
@ -51,12 +52,14 @@
        <span class="notification-details">
          <div class="name-and-action">
            <!-- eslint-disable vue/no-v-html -->
-            <bdi
-              v-if="!!notification.from_profile.name_html"
+            <bdi v-if="!!notification.from_profile.name_html">
+              <RichContent
                class="username"
                :title="'@'+notification.from_profile.screen_name_ui"
-              v-html="notification.from_profile.name_html"
+                :html="notification.from_profile.name_html"
+                :emoji="notification.from_profile.emoji"
              />
+            </bdi>
            <!-- eslint-enable vue/no-v-html -->
            <span
              v-else
@ -181,8 +184,9 @@
          </router-link>
        </div>
        <template v-else>
-          <status-content
+          <StatusContent
            class="faint"
+            :compact="true"
            :status="notification.action"
          />
        </template>
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@ -37,11 +37,6 @@

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

  &:hover .animated.Avatar {
    canvas {
@ -148,13 +143,6 @@
      max-width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
-
-      img {
-        width: 14px;
-        height: 14px;
-        vertical-align: middle;
-        object-fit: contain
-      }
    }

    .timeago {
--- a/src/components/pinch_zoom/pinch_zoom.js
+++ b/src/components/pinch_zoom/pinch_zoom.js
@ -0,0 +1,13 @@
+import PinchZoom from '@kazvmoe-infra/pinch-zoom-element'
+
+export default {
+  methods: {
+    setTransform ({ scale, x, y }) {
+      this.$el.setTransform({ scale, x, y })
+    }
+  },
+  created () {
+    // Make lint happy
+    (() => PinchZoom)()
+  }
+}
--- a/src/components/pinch_zoom/pinch_zoom.vue
+++ b/src/components/pinch_zoom/pinch_zoom.vue
@ -0,0 +1,11 @@
+<template>
+  <pinch-zoom
+    class="pinch-zoom-parent"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <slot />
+  </pinch-zoom>
+</template>
+
+<script src="./pinch_zoom.js"></script>
--- a/src/components/poll/poll.js
+++ b/src/components/poll/poll.js
@ -1,10 +1,14 @@
-import Timeago from '../timeago/timeago.vue'
+import Timeago from 'components/timeago/timeago.vue'
+import RichContent from 'components/rich_content/rich_content.jsx'
 import { forEach, map } from 'lodash'

 export default {
  name: 'Poll',
-  props: ['basePoll'],
-  components: { Timeago },
+  props: ['basePoll', 'emoji'],
+  components: {
+    Timeago,
+    RichContent
+  },
  data () {
    return {
      loading: false,
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@ -17,8 +17,11 @@
          <span class="result-percentage">
            {{ percentageForOption(option.votes_count) }}%
          </span>
-          <!-- eslint-disable-next-line vue/no-v-html -->
-          <span v-html="option.title_html" />
+          <RichContent
+            :html="option.title_html"
+            :handle-links="false"
+            :emoji="emoji"
+          />
        </div>
        <div
          class="result-fill"
@ -42,8 +45,11 @@
          :value="index"
        >
        <label class="option-vote">
-          <!-- eslint-disable-next-line vue/no-v-html -->
-          <div v-html="option.title_html" />
+          <RichContent
+            :html="option.title_html"
+            :handle-links="false"
+            :emoji="emoji"
+          />
        </label>
      </div>
    </div>
--- a/src/components/poll/poll_form.js
+++ b/src/components/poll/poll_form.js
@ -1,19 +1,21 @@
 import * as DateUtils from 'src/services/date_utils/date_utils.js'
 import { uniq } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
+import Select from '../select/select.vue'
 import {
  faTimes,
-  faChevronDown,
  faPlus
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
  faTimes,
-  faChevronDown,
  faPlus
 )

 export default {
+  components: {
+    Select
+  },
  name: 'PollForm',
  props: ['visible'],
  data: () => ({
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@ -46,23 +46,19 @@
        class="poll-type"
        :title="$t('polls.type')"
      >
-        <label
-          for="poll-type-selector"
-          class="select"
-        >
-          <select
+        <Select
          v-model="pollType"
-            class="select"
+          class="poll-type-select"
+          unstyled="true"
          @change="updatePollToParent"
        >
-            <option value="single">{{ $t('polls.single_choice') }}</option>
-            <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
-          </select>
-          <FAIcon
-            class="select-down-icon"
-            icon="chevron-down"
-          />
-        </label>
+          <option value="single">
+            {{ $t('polls.single_choice') }}
+          </option>
+          <option value="multiple">
+            {{ $t('polls.multiple_choices') }}
+          </option>
+        </Select>
      </div>
      <div
        class="poll-expiry"
@ -76,9 +72,10 @@
          :max="maxExpirationInCurrentUnit"
          @change="expiryAmountChange"
        >
-        <label class="expiry-unit select">
-          <select
+        <Select
          v-model="expiryUnit"
+          unstyled="true"
+          class="expiry-unit"
          @change="expiryAmountChange"
        >
          <option
@ -88,12 +85,7 @@
          >
            {{ $t(`time.${unit}_short`, ['']) }}
          </option>
-          </select>
-          <FAIcon
-            class="select-down-icon"
-            icon="chevron-down"
-          />
-        </label>
+        </Select>
      </div>
    </div>
  </div>
@ -147,10 +139,8 @@
  .poll-type {
    margin-right: 0.75em;
    flex: 1 1 60%;
-    .select {
-      border: none;
-      box-shadow: none;
-      background-color: transparent;
+
+    .poll-type-select {
      padding-right: 0.75em;
    }
  }
@ -162,12 +152,6 @@
      width: 3em;
      text-align: right;
    }
-
-    .expiry-unit {
-      border: none;
-      box-shadow: none;
-      background-color: transparent;
-    }
  }
 }
 </style>
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@ -33,7 +33,7 @@
@import '../../_variables.scss';

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

 .popover {
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@ -4,6 +4,7 @@ import ScopeSelector from '../scope_selector/scope_selector.vue'
 import EmojiInput from '../emoji_input/emoji_input.vue'
 import PollForm from '../poll/poll_form.vue'
 import Attachment from '../attachment/attachment.vue'
+import Gallery from 'src/components/gallery/gallery.vue'
 import StatusContent from '../status_content/status_content.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
@ -11,10 +12,10 @@ import { reject, map, uniqBy, debounce } from 'lodash'
 import suggestor from '../emoji_input/suggestor.js'
 import { mapGetters, mapState } from 'vuex'
 import Checkbox from '../checkbox/checkbox.vue'
+import Select from '../select/select.vue'

 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faChevronDown,
  faSmileBeam,
  faPollH,
  faUpload,
@ -24,7 +25,6 @@ import {
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
-  faChevronDown,
  faSmileBeam,
  faPollH,
  faUpload,
@ -84,8 +84,10 @@ const PostStatusForm = {
    PollForm,
    ScopeSelector,
    Checkbox,
+    Select,
    Attachment,
-    StatusContent
+    StatusContent,
+    Gallery
  },
  mounted () {
    this.updateIdempotencyKey()
@ -388,6 +390,21 @@ const PostStatusForm = {
      this.newStatus.files.splice(index, 1)
      this.$emit('resize')
    },
+    editAttachment (fileInfo, newText) {
+      this.newStatus.mediaDescriptions[fileInfo.id] = newText
+    },
+    shiftUpMediaFile (fileInfo) {
+      const { files } = this.newStatus
+      const index = this.newStatus.files.indexOf(fileInfo)
+      files.splice(index, 1)
+      files.splice(index - 1, 0, fileInfo)
+    },
+    shiftDnMediaFile (fileInfo) {
+      const { files } = this.newStatus
+      const index = this.newStatus.files.indexOf(fileInfo)
+      files.splice(index, 1)
+      files.splice(index + 1, 0, fileInfo)
+    },
    uploadFailed (errString, templateArgs) {
      templateArgs = templateArgs || {}
      this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs)
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@ -189,11 +189,7 @@
            v-if="postFormats.length > 1"
            class="text-format"
          >
-            <label
-              for="post-content-type"
-              class="select"
-            >
-              <select
+            <Select
              id="post-content-type"
              v-model="newStatus.contentType"
              class="form-control"
@ -205,12 +201,7 @@
              >
                {{ $t(`post_status.content_type["${postFormat}"]`) }}
              </option>
-              </select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
-            </label>
+            </Select>
          </div>
          <div
            v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
@ -296,32 +287,22 @@
          @click="clearError"
        />
      </div>
-      <div class="attachments">
-        <div
-          v-for="file in newStatus.files"
-          :key="file.url"
-          class="media-upload-wrapper"
-        >
-          <button
-            class="button-unstyled hider"
-            @click="removeMediaFile(file)"
-          >
-            <FAIcon icon="times" />
-          </button>
-          <attachment
-            :attachment="file"
+      <gallery
+        v-if="newStatus.files && newStatus.files.length > 0"
+        class="attachments"
+        :grid="true"
+        :nsfw="false"
+        :attachments="newStatus.files"
+        :descriptions="newStatus.mediaDescriptions"
        :set-media="() => $store.dispatch('setMedia', newStatus.files)"
-            size="small"
-            allow-play="false"
+        :editable="true"
+        :edit-attachment="editAttachment"
+        :remove-attachment="removeMediaFile"
+        :shift-up-attachment="newStatus.files.length > 1 && shiftUpMediaFile"
+        :shift-dn-attachment="newStatus.files.length > 1 && shiftDnMediaFile"
+        @play="$emit('mediaplay', attachment.id)"
+        @pause="$emit('mediapause', attachment.id)"
      />
-          <input
-            v-model="newStatus.mediaDescriptions[file.id]"
-            type="text"
-            :placeholder="$t('post_status.media_description')"
-            @keydown.enter.prevent=""
-          >
-        </div>
-      </div>
      <div
        v-if="newStatus.files.length > 0 && !disableSensitivityCheckbox"
        class="upload_settings"
@ -339,26 +320,13 @@
 <style lang="scss">
@import '../../_variables.scss';

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

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

-   .attachments .media-upload-wrapper {
-    position: relative;
-
-    .attachment {
-      margin: 0;
-      padding: 0;
-    }
-  }
-
  .btn {
    cursor: pointer;
  }
@ -625,11 +584,4 @@
    border: 2px dashed var(--text, $fallback--text);
  }
 }
-
-// todo: unify with attachment.vue (otherwise the uploaded images are not minified unless a status with an attachment was displayed before)
-img.media-upload, .media-upload-container > video {
-  line-height: 0;
-  max-height: 200px;
-  max-width: 100%;
-}
 </style>
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@ -0,0 +1,328 @@
+import Vue from 'vue'
+import { unescape, flattenDeep } from 'lodash'
+import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js'
+import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
+import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
+import StillImage from 'src/components/still-image/still-image.vue'
+import MentionsLine, { MENTIONS_LIMIT } from 'src/components/mentions_line/mentions_line.vue'
+import HashtagLink from 'src/components/hashtag_link/hashtag_link.vue'
+
+import './rich_content.scss'
+
+/**
+ * RichContent, The Über-powered component for rendering Post HTML.
+ *
+ * This takes post HTML and does multiple things to it:
+ * - Groups all mentions into <MentionsLine>, this affects all mentions regardles
+ *   of where they are (beginning/middle/end), even single mentions are converted
+ *   to a <MentionsLine> containing single <MentionLink>.
+ * - Replaces emoji shortcodes with <StillImage>'d images.
+ *
+ * There are two problems with this component's architecture:
+ * 1. Parsing HTML and rendering are inseparable. Attempts to separate the two
+ *    proven to be a massive overcomplication due to amount of things done here.
+ * 2. We need to output both render and some extra data, which seems to be imp-
+ *    possible in vue. Current solution is to emit 'parseReady' event when parsing
+ *    is done within render() function.
+ *
+ * Apart from that one small hiccup with emit in render this _should_ be vue3-ready
+ */
+export default Vue.component('RichContent', {
+  name: 'RichContent',
+  props: {
+    // Original html content
+    html: {
+      required: true,
+      type: String
+    },
+    attentions: {
+      required: false,
+      default: () => []
+    },
+    // Emoji object, as in status.emojis, note the "s" at the end...
+    emoji: {
+      required: true,
+      type: Array
+    },
+    // Whether to handle links or not (posts: yes, everything else: no)
+    handleLinks: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+    // Meme arrows
+    greentext: {
+      required: false,
+      type: Boolean,
+      default: false
+    }
+  },
+  // NEVER EVER TOUCH DATA INSIDE RENDER
+  render (h) {
+    // Pre-process HTML
+    const { newHtml: html } = preProcessPerLine(this.html, this.greentext)
+    let currentMentions = null // Current chain of mentions, we group all mentions together
+    // This is used to recover spacing removed when parsing mentions
+    let lastSpacing = ''
+
+    const lastTags = [] // Tags that appear at the end of post body
+    const writtenMentions = [] // All mentions that appear in post body
+    const invisibleMentions = [] // All mentions that go beyond the limiter (see MentionsLine)
+    // to collapse too many mentions in a row
+    const writtenTags = [] // All tags that appear in post body
+    // unique index for vue "tag" property
+    let mentionIndex = 0
+    let tagsIndex = 0
+
+    const renderImage = (tag) => {
+      return <StillImage
+        {...{ attrs: getAttrs(tag) }}
+        class="img"
+      />
+    }
+
+    const renderHashtag = (attrs, children, encounteredTextReverse) => {
+      const linkData = getLinkData(attrs, children, tagsIndex++)
+      writtenTags.push(linkData)
+      if (!encounteredTextReverse) {
+        lastTags.push(linkData)
+      }
+      return <HashtagLink {...{ props: linkData }}/>
+    }
+
+    const renderMention = (attrs, children) => {
+      const linkData = getLinkData(attrs, children, mentionIndex++)
+      linkData.notifying = this.attentions.some(a => a.statusnet_profile_url === linkData.url)
+      writtenMentions.push(linkData)
+      if (currentMentions === null) {
+        currentMentions = []
+      }
+      currentMentions.push(linkData)
+      if (currentMentions.length > MENTIONS_LIMIT) {
+        invisibleMentions.push(linkData)
+      }
+      if (currentMentions.length === 1) {
+        return <MentionsLine mentions={ currentMentions } />
+      } else {
+        return ''
+      }
+    }
+
+    // Processor to use with html_tree_converter
+    const processItem = (item, index, array, what) => {
+      // Handle text nodes - just add emoji
+      if (typeof item === 'string') {
+        const emptyText = item.trim() === ''
+        if (item.includes('\n')) {
+          currentMentions = null
+        }
+        if (emptyText) {
+          // don't include spaces when processing mentions - we'll include them
+          // in MentionsLine
+          lastSpacing = item
+          // Don't remove last space in a container (fixes poast mentions)
+          return (index !== array.length - 1) && (currentMentions !== null) ? item.trim() : item
+        }
+
+        currentMentions = null
+        if (item.includes(':')) {
+          item = ['', processTextForEmoji(
+            item,
+            this.emoji,
+            ({ shortcode, url }) => {
+              return <StillImage
+                class="emoji img"
+                src={url}
+                title={`:${shortcode}:`}
+                alt={`:${shortcode}:`}
+              />
+            }
+          )]
+        }
+        return item
+      }
+
+      // Handle tag nodes
+      if (Array.isArray(item)) {
+        const [opener, children, closer] = item
+        const Tag = getTagName(opener)
+        const attrs = getAttrs(opener)
+        const previouslyMentions = currentMentions !== null
+        /* During grouping of mentions we trim all the empty text elements
+         * This padding is added to recover last space removed in case
+         * we have a tag right next to mentions
+         */
+        const mentionsLinePadding =
+              // Padding is only needed if we just finished parsing mentions
+              previouslyMentions &&
+              // Don't add padding if content is string and has padding already
+              !(children && typeof children[0] === 'string' && children[0].match(/^\s/))
+                ? lastSpacing
+                : ''
+        switch (Tag) {
+          case 'br':
+            currentMentions = null
+            break
+          case 'img': // replace images with StillImage
+            return ['', [mentionsLinePadding, renderImage(opener)], '']
+          case 'a': // replace mentions with MentionLink
+            if (!this.handleLinks) break
+            if (attrs['class'] && attrs['class'].includes('mention')) {
+              // Handling mentions here
+              return renderMention(attrs, children)
+            } else {
+              currentMentions = null
+              break
+            }
+          case 'span':
+            if (this.handleLinks && attrs['class'] && attrs['class'].includes('h-card')) {
+              return ['', children.map(processItem), '']
+            }
+        }
+
+        if (children !== undefined) {
+          return [
+            '',
+            [
+              mentionsLinePadding,
+              [opener, children.map(processItem), closer]
+            ],
+            ''
+          ]
+        } else {
+          return ['', [mentionsLinePadding, item], '']
+        }
+      }
+    }
+
+    // Processor for back direction (for finding "last" stuff, just easier this way)
+    let encounteredTextReverse = false
+    const processItemReverse = (item, index, array, what) => {
+      // Handle text nodes - just add emoji
+      if (typeof item === 'string') {
+        const emptyText = item.trim() === ''
+        if (emptyText) return item
+        if (!encounteredTextReverse) encounteredTextReverse = true
+        return unescape(item)
+      } else if (Array.isArray(item)) {
+        // Handle tag nodes
+        const [opener, children] = item
+        const Tag = opener === '' ? '' : getTagName(opener)
+        switch (Tag) {
+          case 'a': // replace mentions with MentionLink
+            if (!this.handleLinks) break
+            const attrs = getAttrs(opener)
+            // should only be this
+            if (
+              (attrs['class'] && attrs['class'].includes('hashtag')) || // Pleroma style
+                (attrs['rel'] === 'tag') // Mastodon style
+            ) {
+              return renderHashtag(attrs, children, encounteredTextReverse)
+            } else {
+              attrs.target = '_blank'
+              const newChildren = [...children].reverse().map(processItemReverse).reverse()
+
+              return <a {...{ attrs }}>
+                { newChildren }
+              </a>
+            }
+          case '':
+            return [...children].reverse().map(processItemReverse).reverse()
+        }
+
+        // Render tag as is
+        if (children !== undefined) {
+          const newChildren = Array.isArray(children)
+            ? [...children].reverse().map(processItemReverse).reverse()
+            : children
+          return <Tag {...{ attrs: getAttrs(opener) }}>
+            { newChildren }
+          </Tag>
+        } else {
+          return <Tag/>
+        }
+      }
+      return item
+    }
+
+    const pass1 = convertHtmlToTree(html).map(processItem)
+    const pass2 = [...pass1].reverse().map(processItemReverse).reverse()
+    // DO NOT USE SLOTS they cause a re-render feedback loop here.
+    // slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
+    // at least until vue3?
+    const result = <span class="RichContent">
+      { pass2 }
+    </span>
+
+    const event = {
+      lastTags,
+      writtenMentions,
+      writtenTags,
+      invisibleMentions
+    }
+
+    // DO NOT MOVE TO UPDATE. BAD IDEA.
+    this.$emit('parseReady', event)
+
+    return result
+  }
+})
+
+const getLinkData = (attrs, children, index) => {
+  const stripTags = (item) => {
+    if (typeof item === 'string') {
+      return item
+    } else {
+      return item[1].map(stripTags).join('')
+    }
+  }
+  const textContent = children.map(stripTags).join('')
+  return {
+    index,
+    url: attrs.href,
+    tag: attrs['data-tag'],
+    content: flattenDeep(children).join(''),
+    textContent
+  }
+}
+
+/** Pre-processing HTML
+ *
+ * Currently this does one thing:
+ * - add green/cyantexting
+ *
+ * @param {String} html - raw HTML to process
+ * @param {Boolean} greentext - whether to enable greentexting or not
+ */
+export const preProcessPerLine = (html, greentext) => {
+  const greentextHandle = new Set(['p', 'div'])
+
+  const lines = convertHtmlToLines(html)
+  const newHtml = lines.reverse().map((item, index, array) => {
+    if (!item.text) return item
+    const string = item.text
+
+    // Greentext stuff
+    if (
+      // Only if greentext is engaged
+      greentext &&
+        // Only handle p's and divs. Don't want to affect blockquotes, code etc
+        item.level.every(l => greentextHandle.has(l)) &&
+        // Only if line begins with '>' or '<'
+        (string.includes('&gt;') || string.includes('&lt;'))
+    ) {
+      const cleanedString = string.replace(/<[^>]+?>/gi, '') // remove all tags
+        .replace(/@\w+/gi, '') // remove mentions (even failed ones)
+        .trim()
+      if (cleanedString.startsWith('&gt;')) {
+        return `<span class='greentext'>${string}</span>`
+      } else if (cleanedString.startsWith('&lt;')) {
+        return `<span class='cyantext'>${string}</span>`
+      }
+    }
+
+    return string
+  }).reverse().join('')
+
+  return { newHtml }
+}
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@ -0,0 +1,64 @@
+.RichContent {
+  blockquote {
+    margin: 0.2em 0 0.2em 2em;
+    font-style: italic;
+  }
+
+  pre {
+    overflow: auto;
+  }
+
+  code,
+  samp,
+  kbd,
+  var,
+  pre {
+    font-family: var(--postCodeFont, monospace);
+  }
+
+  p {
+    margin: 0 0 1em 0;
+  }
+
+  p:last-child {
+    margin: 0 0 0 0;
+  }
+
+  h1 {
+    font-size: 1.1em;
+    line-height: 1.2em;
+    margin: 1.4em 0;
+  }
+
+  h2 {
+    font-size: 1.1em;
+    margin: 1em 0;
+  }
+
+  h3 {
+    font-size: 1em;
+    margin: 1.2em 0;
+  }
+
+  h4 {
+    margin: 1.1em 0;
+  }
+
+  .img {
+    display: inline-block;
+  }
+
+  .emoji {
+    display: inline-block;
+    width: var(--emoji-size, 32px);
+    height: var(--emoji-size, 32px);
+  }
+
+  .img,
+  video {
+    max-width: 100%;
+    max-height: 400px;
+    vertical-align: middle;
+    object-fit: contain;
+  }
+}
--- a/src/components/select/select.js
+++ b/src/components/select/select.js
@ -0,0 +1,21 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
+
+export default {
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: [
+    'value',
+    'disabled',
+    'unstyled',
+    'kind'
+  ]
+}
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@ -0,0 +1,63 @@
+
+<template>
+  <label
+    class="Select input"
+    :class="{ disabled, unstyled }"
+  >
+    <select
+      :disabled="disabled"
+      :value="value"
+      @change="$emit('change', $event.target.value)"
+    >
+      <slot />
+    </select>
+    <FAIcon
+      class="select-down-icon"
+      icon="chevron-down"
+    />
+  </label>
+</template>
+
+<script src="./select.js"> </script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.Select {
+  padding: 0;
+
+  select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background: transparent;
+    border: none;
+    color: $fallback--text;
+    color: var(--inputText, --text, $fallback--text);
+    margin: 0;
+    padding: 0 2em 0 .2em;
+    font-family: sans-serif;
+    font-family: var(--inputFont, sans-serif);
+    font-size: 14px;
+    width: 100%;
+    z-index: 1;
+    height: 28px;
+    line-height: 16px;
+  }
+
+  .select-down-icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 5px;
+    height: 100%;
+    width: 0.875em;
+    color: $fallback--text;
+    color: var(--inputText, $fallback--text);
+    line-height: 28px;
+    z-index: 0;
+    pointer-events: none;
+  }
+
+}
+</style>
--- a/src/components/settings_modal/helpers/boolean_setting.js
+++ b/src/components/settings_modal/helpers/boolean_setting.js
@ -0,0 +1,47 @@
+import { get, set } from 'lodash'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import ModifiedIndicator from './modified_indicator.vue'
+import ServerSideIndicator from './server_side_indicator.vue'
+export default {
+  components: {
+    Checkbox,
+    ModifiedIndicator,
+    ServerSideIndicator
+  },
+  props: [
+    'path',
+    'disabled',
+    'expert'
+  ],
+  computed: {
+    pathDefault () {
+      const [firstSegment, ...rest] = this.path.split('.')
+      return [firstSegment + 'DefaultValue', ...rest].join('.')
+    },
+    state () {
+      const value = get(this.$parent, this.path)
+      if (value === undefined) {
+        return this.defaultState
+      } else {
+        return value
+      }
+    },
+    defaultState () {
+      return get(this.$parent, this.pathDefault)
+    },
+    isServerSide () {
+      return this.path.startsWith('serverSide_')
+    },
+    isChanged () {
+      return !this.path.startsWith('serverSide_') && this.state !== this.defaultState
+    },
+    matchesExpertLevel () {
+      return (this.expert || 0) <= this.$parent.expertLevel
+    }
+  },
+  methods: {
+    update (e) {
+      set(this.$parent, this.path, e)
+    }
+  }
+}
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@ -1,5 +1,6 @@
 <template>
  <label
+    v-if="matchesExpertLevel"
    class="BooleanSetting"
  >
    <Checkbox
@ -13,45 +14,8 @@
      >
        <slot />
      </span>
-      <ModifiedIndicator :changed="isChanged" />
-    </Checkbox>
+      <ModifiedIndicator :changed="isChanged" /><ServerSideIndicator :server-side="isServerSide" /> </Checkbox>
  </label>
 </template>

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

 const SharedComputedObject = () => ({
  user () {
@ -22,6 +23,14 @@ const SharedComputedObject = () => ({
      }
    }])
    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
+  ...Object.keys(serverSideConfigDefaultState)
+    .map(key => ['serverSide_' + key, {
+      get () { return this.$store.state.serverSideConfig[key] },
+      set (value) {
+        this.$store.dispatch('setServerSideOption', { name: key, value })
+      }
+    }])
+    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
  // Special cases (need to transform values or perform actions first)
  useStreamingApi: {
    get () { return this.$store.getters.mergedConfig.useStreamingApi },
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@ -1,8 +1,9 @@
-import { defineAsyncComponent } from 'vue'
 import Modal from 'src/components/modal/modal.vue'
 import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
 import AsyncComponentError from 'src/components/async_component_error/async_component_error.vue'
+import getResettableAsyncComponent from 'src/services/resettable_async_component.js'
 import Popover from '../popover/popover.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { cloneDeep } from 'lodash'
 import {
@ -51,12 +52,15 @@ const SettingsModal = {
  components: {
    Modal,
    Popover,
-    SettingsModalContent: defineAsyncComponent({
-      loader: () => import('./settings_modal_content.vue'),
-      loadingComponent: PanelLoading,
-      errorComponent: AsyncComponentError,
+    Checkbox,
+    SettingsModalContent: getResettableAsyncComponent(
+      () => import('./settings_modal_content.vue'),
+      {
+        loading: PanelLoading,
+        error: AsyncComponentError,
        delay: 0
-    })
+      }
+    )
  },
  methods: {
    closeModal () {
@ -157,6 +161,15 @@ const SettingsModal = {
    },
    modalPeeked () {
      return this.$store.state.interface.settingsModalState === 'minimized'
+    },
+    expertLevel: {
+      get () {
+        return this.$store.state.config.expertLevel > 0
+      },
+      set (value) {
+        console.log(value)
+        this.$store.dispatch('setOption', { name: 'expertLevel', value: value ? 1 : 0 })
+      }
    }
  }
 }
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@ -48,4 +48,11 @@
      }
    }
  }
+
+  .settings-footer {
+    display: flex;
+    >* {
+      margin-right: 0.5em;
+    }
+  }
 }
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@ -11,7 +11,6 @@
          {{ $t('settings.settings') }}
        </span>
        <transition name="fade">
-          <template>
          <template v-if="currentSaveStateNotice">
            <div
              v-if="currentSaveStateNotice.error"
@ -29,7 +28,6 @@
              {{ $t('settings.saving_ok') }}
            </div>
          </template>
-          </template>
        </transition>
        <button
          class="btn button-default"
@ -55,7 +53,7 @@
      <div class="panel-body">
        <SettingsModalContent v-if="modalOpenedOnce" />
      </div>
-      <div class="panel-footer">
+      <div class="panel-footer settings-footer">
        <Popover
          class="export"
          trigger="click"
@ -75,7 +73,7 @@
              />
            </button>
          </template>
-          <template v-slot:content ="{close}">
+          <template v-slot:content="{close}">
            <div class="dropdown-menu">
              <button
                class="button-default dropdown-item dropdown-item-icon"
@ -110,6 +108,10 @@
            </div>
          </template>
        </Popover>
+
+        <Checkbox v-model="expertLevel">
+          {{ $t("settings.expert_mode") }}
+        </Checkbox>
      </div>
    </div>
  </Modal>
--- a/src/components/settings_modal/settings_modal_content.scss
+++ b/src/components/settings_modal/settings_modal_content.scss
@ -7,13 +7,24 @@
    margin: 1em 1em 1.4em;
    padding-bottom: 1.4em;

-    > div {
+    > div,
+    > label {
+      display: block;
      margin-bottom: .5em;
      &:last-child {
        margin-bottom: 0;
      }
    }

+    .select-multiple {
+      display: flex;
+
+      .option-list {
+        margin: 0;
+        padding-left: .5em;
+      }
+    }
+
    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@ -1,24 +1,25 @@
 import { filter, trim } from 'lodash'
 import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'

 import SharedComputedObject from '../helpers/shared_computed_object.js'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)

 const FilteringTab = {
  data () {
    return {
-      muteWordsStringLocal: this.$store.getters.mergedConfig.muteWords.join('\n')
+      muteWordsStringLocal: this.$store.getters.mergedConfig.muteWords.join('\n'),
+      replyVisibilityOptions: ['all', 'following', 'self'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.reply_visibility_${mode}`)
+      }))
    }
  },
  components: {
-    BooleanSetting
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting
  },
  computed: {
    ...SharedComputedObject(),
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@ -1,89 +1,122 @@
 <template>
  <div :label="$t('settings.filtering')">
    <div class="setting-item">
-      <div class="select-multiple">
-        <span class="label">{{ $t('settings.notification_visibility') }}</span>
-        <ul class="option-list">
+      <h2>{{ $t('settings.posts') }}</h2>
+      <ul class="setting-list">
        <li>
-            <BooleanSetting path="notificationVisibility.likes">
-              {{ $t('settings.notification_visibility_likes') }}
+          <BooleanSetting path="hideFilteredStatuses">
+            {{ $t('settings.hide_filtered_statuses') }}
+          </BooleanSetting>
+          <ul
+            class="setting-list suboptions"
+            :class="[{disabled: !streaming}]"
+          >
+            <li>
+              <BooleanSetting
+                :disabled="hideFilteredStatuses"
+                path="hideWordFilteredPosts"
+              >
+                {{ $t('settings.hide_wordfiltered_statuses') }}
              </BooleanSetting>
            </li>
            <li>
-            <BooleanSetting path="notificationVisibility.repeats">
-              {{ $t('settings.notification_visibility_repeats') }}
+              <BooleanSetting
+                v-if="user"
+                :disabled="hideFilteredStatuses"
+                path="hideMutedThreads"
+              >
+                {{ $t('settings.hide_muted_threads') }}
              </BooleanSetting>
            </li>
            <li>
-            <BooleanSetting path="notificationVisibility.follows">
-              {{ $t('settings.notification_visibility_follows') }}
-            </BooleanSetting>
-          </li>
-          <li>
-            <BooleanSetting path="notificationVisibility.mentions">
-              {{ $t('settings.notification_visibility_mentions') }}
-            </BooleanSetting>
-          </li>
-          <li>
-            <BooleanSetting path="notificationVisibility.moves">
-              {{ $t('settings.notification_visibility_moves') }}
-            </BooleanSetting>
-          </li>
-          <li>
-            <BooleanSetting path="notificationVisibility.emojiReactions">
-              {{ $t('settings.notification_visibility_emoji_reactions') }}
+              <BooleanSetting
+                v-if="user"
+                :disabled="hideFilteredStatuses"
+                path="hideMutedPosts"
+              >
+                {{ $t('settings.hide_muted_posts') }}
              </BooleanSetting>
            </li>
          </ul>
-      </div>
-      <div>
-        {{ $t('settings.replies_in_timeline') }}
-        <label
-          for="replyVisibility"
-          class="select"
-        >
-          <select
-            id="replyVisibility"
-            v-model="replyVisibility"
-          >
-            <option
-              value="all"
-              selected
-            >{{ $t('settings.reply_visibility_all') }}</option>
-            <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
-            <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
-          </select>
-          <FAIcon
-            class="select-down-icon"
-            icon="chevron-down"
-          />
-        </label>
-      </div>
-      <div>
+        </li>
+        <li>
+          <BooleanSetting path="muteBotStatuses">
+            {{ $t('settings.mute_bot_posts') }}
+          </BooleanSetting>
+        </li>
+        <li>
          <BooleanSetting path="hidePostStats">
            {{ $t('settings.hide_post_stats') }}
          </BooleanSetting>
-      </div>
-      <div>
-        <BooleanSetting path="hideUserStats">
-          {{ $t('settings.hide_user_stats') }}
+        </li>
+        <li>
+          <BooleanSetting path="hideBotIndication">
+            {{ $t('settings.hide_bot_indication') }}
          </BooleanSetting>
-      </div>
-    </div>
-    <div class="setting-item">
-      <div>
-        <p>{{ $t('settings.filtering_explanation') }}</p>
+        </li>
+        <ChoiceSetting
+          v-if="user"
+          id="replyVisibility"
+          path="replyVisibility"
+          :options="replyVisibilityOptions"
+        >
+          {{ $t('settings.replies_in_timeline') }}
+        </ChoiceSetting>
+        <li>
+          <h3>{{ $t('settings.wordfilter') }}</h3>
          <textarea
            id="muteWords"
            v-model="muteWordsString"
            class="resize-height"
          />
-      </div>
-      <div>
-        <BooleanSetting path="hideFilteredStatuses">
-          {{ $t('settings.hide_filtered_statuses') }}
+          <div>{{ $t('settings.filtering_explanation') }}</div>
+        </li>
+        <h3>{{ $t('settings.attachments') }}</h3>
+        <li v-if="expertLevel > 0">
+          <label for="maxThumbnails">
+            {{ $t('settings.max_thumbnails') }}
+          </label>
+          <input
+            id="maxThumbnails"
+            path.number="maxThumbnails"
+            class="number-input"
+            type="number"
+            min="0"
+            step="1"
+          >
+        </li>
+        <li>
+          <IntegerSetting
+            path="maxThumbnails"
+            :min="0"
+          >
+            {{ $t('settings.max_thumbnails') }}
+          </IntegerSetting>
+        </li>
+        <li>
+          <BooleanSetting path="hideAttachments">
+            {{ $t('settings.hide_attachments_in_tl') }}
          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="hideAttachmentsInConv">
+            {{ $t('settings.hide_attachments_in_convo') }}
+          </BooleanSetting>
+        </li>
+      </ul>
    </div>
+    <div
+      v-if="expertLevel > 0"
+      class="setting-item"
+    >
+      <h2>{{ $t('settings.user_profiles') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path="hideUserStats">
+            {{ $t('settings.hide_user_stats') }}
+          </BooleanSetting>
+        </li>
+      </ul>
    </div>
  </div>
 </template>
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@ -1,21 +1,43 @@
 import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'

 import SharedComputedObject from '../helpers/shared_computed_object.js'
+import ServerSideIndicator from '../helpers/server_side_indicator.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faChevronDown,
  faGlobe
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
-  faChevronDown,
  faGlobe
 )

 const GeneralTab = {
  data () {
    return {
+      subjectLineOptions: ['email', 'noop', 'masto'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`)
+      })),
+      conversationDisplayOptions: ['tree', 'linear'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.conversation_display_${mode}`)
+      })),
+      conversationOtherRepliesButtonOptions: ['below', 'inside'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.conversation_other_replies_button_${mode}`)
+      })),
+      mentionLinkDisplayOptions: ['short', 'full_for_remote', 'full'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.mention_link_display_${mode}`)
+      })),
      loopSilentAvailable:
      // Firefox
      Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
@ -27,18 +49,35 @@ const GeneralTab = {
  },
  components: {
    BooleanSetting,
-    InterfaceLanguageSwitcher
+    ChoiceSetting,
+    IntegerSetting,
+    InterfaceLanguageSwitcher,
+    ScopeSelector,
+    ServerSideIndicator
  },
  computed: {
    postFormats () {
      return this.$store.state.instance.postFormats || []
    },
+    postContentOptions () {
+      return this.postFormats.map(format => ({
+        key: format,
+        value: format,
+        label: this.$t(`post_status.content_type["${format}"]`)
+      }))
+    },
    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
    instanceWallpaperUsed () {
      return this.$store.state.instance.background &&
        !this.$store.state.users.currentUser.background_image
    },
+    instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
    ...SharedComputedObject()
+  },
+  methods: {
+    changeDefaultScope (value) {
+      this.$store.dispatch('setServerSideOption', { name: 'defaultScope', value })
+    }
  }
 }

--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@ -11,24 +11,19 @@
            {{ $t('settings.hide_isp') }}
          </BooleanSetting>
        </li>
+        <li>
+          <BooleanSetting path="sidebarRight">
+            {{ $t('settings.right_sidebar') }}
+          </BooleanSetting>
+        </li>
        <li v-if="instanceWallpaperUsed">
          <BooleanSetting path="hideInstanceWallpaper">
            {{ $t('settings.hide_wallpaper') }}
          </BooleanSetting>
        </li>
-      </ul>
-    </div>
-    <div class="setting-item">
-      <h2>{{ $t('nav.timeline') }}</h2>
-      <ul class="setting-list">
        <li>
-          <BooleanSetting path="hideMutedPosts">
-            {{ $t('settings.hide_muted_posts') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="collapseMessageWithSubject">
-            {{ $t('settings.collapse_subject') }}
+          <BooleanSetting path="stopGifs">
+            {{ $t('settings.stop_gifs') }}
          </BooleanSetting>
        </li>
        <li>
@ -50,147 +45,127 @@
          </ul>
        </li>
        <li>
-          <BooleanSetting path="useStreamingApi">
+          <BooleanSetting
+            path="useStreamingApi"
+            expert="1"
+          >
            {{ $t('settings.useStreamingApi') }}
-            <br>
-            <small>
-              {{ $t('settings.useStreamingApiWarning') }}
-            </small>
          </BooleanSetting>
        </li>
        <li>
-          <BooleanSetting path="emojiReactionsOnTimeline">
+          <BooleanSetting
+            path="virtualScrolling"
+            expert="1"
+          >
+            {{ $t('settings.virtual_scrolling') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="alwaysShowNewPostButton"
+            expert="1"
+          >
+            {{ $t('settings.always_show_post_button') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="autohideFloatingPostButton"
+            expert="1"
+          >
+            {{ $t('settings.autohide_floating_post_button') }}
+          </BooleanSetting>
+        </li>
+        <li v-if="instanceShoutboxPresent">
+          <BooleanSetting
+            path="hideShoutbox"
+            expert="1"
+          >
+            {{ $t('settings.hide_shoutbox') }}
+          </BooleanSetting>
+        </li>
+      </ul>
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.post_look_feel') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <ChoiceSetting
+            id="conversationDisplay"
+            path="conversationDisplay"
+            :options="conversationDisplayOptions"
+          >
+            {{ $t('settings.conversation_display') }}
+          </ChoiceSetting>
+        </li>
+        <ul
+          v-if="conversationDisplay !== 'linear'"
+          class="setting-list suboptions"
+        >
+          <li>
+            <BooleanSetting path="conversationTreeAdvanced">
+              {{ $t('settings.tree_advanced') }}
+            </BooleanSetting>
+          </li>
+          <li>
+            <BooleanSetting
+              path="conversationTreeFadeAncestors"
+              :expert="1"
+            >
+              {{ $t('settings.tree_fade_ancestors') }}
+            </BooleanSetting>
+          </li>
+          <li>
+            <IntegerSetting
+              path="maxDepthInThread"
+              :min="3"
+              :expert="1"
+            >
+              {{ $t('settings.max_depth_in_thread') }}
+            </IntegerSetting>
+          </li>
+          <li>
+            <ChoiceSetting
+              id="conversationOtherRepliesButton"
+              path="conversationOtherRepliesButton"
+              :options="conversationOtherRepliesButtonOptions"
+              :expert="1"
+            >
+              {{ $t('settings.conversation_other_replies_button') }}
+            </ChoiceSetting>
+          </li>
+        </ul>
+        <li>
+          <BooleanSetting path="collapseMessageWithSubject">
+            {{ $t('settings.collapse_subject') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="emojiReactionsOnTimeline"
+            expert="1"
+          >
            {{ $t('settings.emoji_reactions_on_timeline') }}
          </BooleanSetting>
        </li>
        <li>
-          <BooleanSetting path="virtualScrolling">
-            {{ $t('settings.virtual_scrolling') }}
-          </BooleanSetting>
-        </li>
-      </ul>
-    </div>
-
-    <div class="setting-item">
-      <h2>{{ $t('settings.composing') }}</h2>
-      <ul class="setting-list">
-        <li>
-          <BooleanSetting path="scopeCopy">
-            {{ $t('settings.scope_copy') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="alwaysShowSubjectInput">
-            {{ $t('settings.subject_input_always_show') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <div>
-            {{ $t('settings.subject_line_behavior') }}
-            <label
-              for="subjectLineBehavior"
-              class="select"
+          <BooleanSetting
+            v-if="user"
+            path="serverSide_stripRichContent"
+            expert="1"
          >
-              <select
-                id="subjectLineBehavior"
-                v-model="subjectLineBehavior"
+            {{ $t('settings.no_rich_text_description') }}
+          </BooleanSetting>
+        </li>
+        <h3>{{ $t('settings.attachments') }}</h3>
+        <li>
+          <BooleanSetting
+            path="useContainFit"
+            expert="1"
          >
-                <option value="email">
-                  {{ $t('settings.subject_line_email') }}
-                  {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
-                </option>
-                <option value="masto">
-                  {{ $t('settings.subject_line_mastodon') }}
-                  {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
-                </option>
-                <option value="noop">
-                  {{ $t('settings.subject_line_noop') }}
-                  {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
-                </option>
-              </select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
-            </label>
-          </div>
-        </li>
-        <li v-if="postFormats.length > 0">
-          <div>
-            {{ $t('settings.post_status_content_type') }}
-            <label
-              for="postContentType"
-              class="select"
-            >
-              <select
-                id="postContentType"
-                v-model="postContentType"
-              >
-                <option
-                  v-for="postFormat in postFormats"
-                  :key="postFormat"
-                  :value="postFormat"
-                >
-                  {{ $t(`post_status.content_type["${postFormat}"]`) }}
-                  {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
-                </option>
-              </select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
-            </label>
-          </div>
-        </li>
-        <li>
-          <BooleanSetting path="minimalScopesMode">
-            {{ $t('settings.minimal_scopes_mode') }}
+            {{ $t('settings.use_contain_fit') }}
          </BooleanSetting>
        </li>
-        <li>
-          <BooleanSetting path="sensitiveByDefault">
-            {{ $t('settings.sensitive_by_default') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="autohideFloatingPostButton">
-            {{ $t('settings.autohide_floating_post_button') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="padEmoji">
-            {{ $t('settings.pad_emoji') }}
-          </BooleanSetting>
-        </li>
-      </ul>
-    </div>
-
-    <div class="setting-item">
-      <h2>{{ $t('settings.attachments') }}</h2>
-      <ul class="setting-list">
-        <li>
-          <BooleanSetting path="hideAttachments">
-            {{ $t('settings.hide_attachments_in_tl') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="hideAttachmentsInConv">
-            {{ $t('settings.hide_attachments_in_convo') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <label for="maxThumbnails">
-            {{ $t('settings.max_thumbnails') }}
-          </label>
-          <input
-            id="maxThumbnails"
-            path.number="maxThumbnails"
-            class="number-input"
-            type="number"
-            min="0"
-            step="1"
-          >
-        </li>
        <li>
          <BooleanSetting path="hideNsfw">
            {{ $t('settings.nsfw_clickthrough') }}
@ -200,6 +175,7 @@
          <li>
            <BooleanSetting
              path="preloadImage"
+              expert="1"
              :disabled="!hideNsfw"
            >
              {{ $t('settings.preload_images') }}
@ -208,6 +184,7 @@
          <li>
            <BooleanSetting
              path="useOneClickNsfw"
+              expert="1"
              :disabled="!hideNsfw"
            >
              {{ $t('settings.use_one_click_nsfw') }}
@ -215,12 +192,10 @@
          </li>
        </ul>
        <li>
-          <BooleanSetting path="stopGifs">
-            {{ $t('settings.stop_gifs') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="loopVideo">
+          <BooleanSetting
+            path="loopVideo"
+            expert="1"
+          >
            {{ $t('settings.loop_video') }}
          </BooleanSetting>
          <ul
@ -230,6 +205,7 @@
            <li>
              <BooleanSetting
                path="loopVideoSilentOnly"
+                expert="1"
                :disabled="!loopVideo || !loopSilentAvailable"
              >
                {{ $t('settings.loop_video_silent_only') }}
@ -244,37 +220,177 @@
          </ul>
        </li>
        <li>
-          <BooleanSetting path="playVideosInModal">
+          <BooleanSetting
+            path="playVideosInModal"
+            expert="1"
+          >
            {{ $t('settings.play_videos_in_modal') }}
          </BooleanSetting>
        </li>
+        <h3>{{ $t('settings.mention_links') }}</h3>
        <li>
-          <BooleanSetting path="useContainFit">
-            {{ $t('settings.use_contain_fit') }}
+          <ChoiceSetting
+            id="mentionLinkDisplay"
+            path="mentionLinkDisplay"
+            :options="mentionLinkDisplayOptions"
+          >
+            {{ $t('settings.mention_link_display') }}
+          </ChoiceSetting>
+        </li>
+        <ul
+          class="setting-list suboptions"
+        >
+          <li v-if="mentionLinkDisplay === 'short'">
+            <BooleanSetting
+              path="mentionLinkShowTooltip"
+              expert="1"
+            >
+              {{ $t('settings.mention_link_show_tooltip') }}
            </BooleanSetting>
          </li>
        </ul>
-    </div>
-
-    <div class="setting-item">
-      <h2>{{ $t('settings.notifications') }}</h2>
-      <ul class="setting-list">
        <li>
-          <BooleanSetting path="webPushNotifications">
-            {{ $t('settings.enable_web_push_notifications') }}
+          <BooleanSetting
+            path="useAtIcon"
+            expert="1"
+          >
+            {{ $t('settings.use_at_icon') }}
          </BooleanSetting>
        </li>
-      </ul>
-    </div>
-
-    <div class="setting-item">
-      <h2>{{ $t('settings.fun') }}</h2>
-      <ul class="setting-list">
        <li>
-          <BooleanSetting path="greentext">
+          <BooleanSetting path="mentionLinkShowAvatar">
+            {{ $t('settings.mention_link_show_avatar') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="mentionLinkFadeDomain"
+            expert="1"
+          >
+            {{ $t('settings.mention_link_fade_domain') }}
+          </BooleanSetting>
+        </li>
+        <li v-if="user">
+          <BooleanSetting
+            path="mentionLinkBoldenYou"
+            expert="1"
+          >
+            {{ $t('settings.mention_link_bolden_you') }}
+          </BooleanSetting>
+        </li>
+        <h3 v-if="expertLevel > 0">
+          {{ $t('settings.fun') }}
+        </h3>
+        <li>
+          <BooleanSetting
+            path="greentext"
+            expert="1"
+          >
            {{ $t('settings.greentext') }}
          </BooleanSetting>
        </li>
+        <li v-if="user">
+          <BooleanSetting
+            path="mentionLinkShowYous"
+            expert="1"
+          >
+            {{ $t('settings.show_yous') }}
+          </BooleanSetting>
+        </li>
+      </ul>
+    </div>
+
+    <div
+      v-if="user"
+      class="setting-item"
+    >
+      <h2>{{ $t('settings.composing') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <label for="default-vis">
+            {{ $t('settings.default_vis') }} <ServerSideIndicator :server-side="true" />
+            <ScopeSelector
+              class="scope-selector"
+              :show-all="true"
+              :user-default="serverSide_defaultScope"
+              :initial-scope="serverSide_defaultScope"
+              :on-scope-change="changeDefaultScope"
+            />
+          </label>
+        </li>
+        <li>
+          <!-- <BooleanSetting path="serverSide_defaultNSFW"> -->
+          <BooleanSetting path="sensitiveByDefault">
+            {{ $t('settings.sensitive_by_default') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="scopeCopy"
+            expert="1"
+          >
+            {{ $t('settings.scope_copy') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="alwaysShowSubjectInput"
+            expert="1"
+          >
+            {{ $t('settings.subject_input_always_show') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <ChoiceSetting
+            id="subjectLineBehavior"
+            path="subjectLineBehavior"
+            :options="subjectLineOptions"
+            expert="1"
+          >
+            {{ $t('settings.subject_line_behavior') }}
+          </ChoiceSetting>
+        </li>
+        <li v-if="postFormats.length > 0">
+          <ChoiceSetting
+            id="postContentType"
+            path="postContentType"
+            :options="postContentOptions"
+          >
+            {{ $t('settings.post_status_content_type') }}
+          </ChoiceSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="minimalScopesMode"
+            expert="1"
+          >
+            {{ $t('settings.minimal_scopes_mode') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="alwaysShowNewPostButton"
+            expert="1"
+          >
+            {{ $t('settings.always_show_post_button') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="autohideFloatingPostButton"
+            expert="1"
+          >
+            {{ $t('settings.autohide_floating_post_button') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="padEmoji"
+            expert="1"
+          >
+            {{ $t('settings.pad_emoji') }}
+          </BooleanSetting>
+        </li>
      </ul>
    </div>
  </div>
--- a/src/components/settings_modal/tabs/notifications_tab.js
+++ b/src/components/settings_modal/tabs/notifications_tab.js
@ -1,4 +1,5 @@
-import Checkbox from 'src/components/checkbox/checkbox.vue'
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import SharedComputedObject from '../helpers/shared_computed_object.js'

 const NotificationsTab = {
  data () {
@ -9,12 +10,13 @@ const NotificationsTab = {
    }
  },
  components: {
-    Checkbox
+    BooleanSetting
  },
  computed: {
    user () {
      return this.$store.state.users.currentUser
-    }
+    },
+    ...SharedComputedObject()
  },
  methods: {
    updateNotificationSettings () {
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@ -2,30 +2,77 @@
  <div :label="$t('settings.notifications')">
    <div class="setting-item">
      <h2>{{ $t('settings.notification_setting_filters') }}</h2>
-      <p>
-        <Checkbox v-model="notificationSettings.block_from_strangers">
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path="serverSide_blockNotificationsFromStrangers">
            {{ $t('settings.notification_setting_block_from_strangers') }}
-        </Checkbox>
-      </p>
+          </BooleanSetting>
+        </li>
+        <li class="select-multiple">
+          <span class="label">{{ $t('settings.notification_visibility') }}</span>
+          <ul class="option-list">
+            <li>
+              <BooleanSetting path="notificationVisibility.likes">
+                {{ $t('settings.notification_visibility_likes') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="notificationVisibility.repeats">
+                {{ $t('settings.notification_visibility_repeats') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="notificationVisibility.follows">
+                {{ $t('settings.notification_visibility_follows') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="notificationVisibility.mentions">
+                {{ $t('settings.notification_visibility_mentions') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="notificationVisibility.moves">
+                {{ $t('settings.notification_visibility_moves') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="notificationVisibility.emojiReactions">
+                {{ $t('settings.notification_visibility_emoji_reactions') }}
+              </BooleanSetting>
+            </li>
+          </ul>
+        </li>
+      </ul>
    </div>

-    <div class="setting-item">
+    <div
+      v-if="expertLevel > 0"
+      class="setting-item"
+    >
      <h2>{{ $t('settings.notification_setting_privacy') }}</h2>
-      <p>
-        <Checkbox v-model="notificationSettings.hide_notification_contents">
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting
+            path="webPushNotifications"
+            expert="1"
+          >
+            {{ $t('settings.enable_web_push_notifications') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="serverSide_webPushHideContents"
+            expert="1"
+          >
            {{ $t('settings.notification_setting_hide_notification_contents') }}
-        </Checkbox>
-      </p>
+          </BooleanSetting>
+        </li>
+      </ul>
    </div>
    <div class="setting-item">
      <p>{{ $t('settings.notification_mutes') }}</p>
      <p>{{ $t('settings.notification_blocks') }}</p>
-      <button
-        class="btn button-default"
-        @click="updateNotificationSettings"
-      >
-        {{ $t('settings.save') }}
-      </button>
    </div>
  </div>
 </template>
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@ -8,6 +8,9 @@ import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
 import suggestor from 'src/components/emoji_input/suggestor.js'
 import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
  faTimes,
@ -24,21 +27,13 @@ library.add(
 const ProfileTab = {
  data () {
    return {
-      newName: this.$store.state.users.currentUser.name,
+      newName: this.$store.state.users.currentUser.name_unescaped,
      newBio: unescape(this.$store.state.users.currentUser.description),
      newLocked: this.$store.state.users.currentUser.locked,
-      newNoRichText: this.$store.state.users.currentUser.no_rich_text,
-      newDefaultScope: this.$store.state.users.currentUser.default_scope,
      newFields: this.$store.state.users.currentUser.fields.map(field => ({ name: field.name, value: field.value })),
-      hideFollows: this.$store.state.users.currentUser.hide_follows,
-      hideFollowers: this.$store.state.users.currentUser.hide_followers,
-      hideFollowsCount: this.$store.state.users.currentUser.hide_follows_count,
-      hideFollowersCount: this.$store.state.users.currentUser.hide_followers_count,
      showRole: this.$store.state.users.currentUser.show_role,
      role: this.$store.state.users.currentUser.role,
-      discoverable: this.$store.state.users.currentUser.discoverable,
      bot: this.$store.state.users.currentUser.bot,
-      allowFollowingMove: this.$store.state.users.currentUser.allow_following_move,
      pickAvatarBtnVisible: true,
      bannerUploading: false,
      backgroundUploading: false,
@ -54,12 +49,14 @@ const ProfileTab = {
    EmojiInput,
    Autosuggest,
    ProgressButton,
-    Checkbox
+    Checkbox,
+    BooleanSetting
  },
  computed: {
    user () {
      return this.$store.state.users.currentUser
    },
+    ...SharedComputedObject(),
    emojiUserSuggestor () {
      return suggestor({
        emoji: [
@ -123,15 +120,7 @@ const ProfileTab = {
            /* eslint-disable camelcase */
            display_name: this.newName,
            fields_attributes: this.newFields.filter(el => el != null),
-            default_scope: this.newDefaultScope,
-            no_rich_text: this.newNoRichText,
-            hide_follows: this.hideFollows,
-            hide_followers: this.hideFollowers,
-            discoverable: this.discoverable,
            bot: this.bot,
-            allow_following_move: this.allowFollowingMove,
-            hide_follows_count: this.hideFollowsCount,
-            hide_followers_count: this.hideFollowersCount,
            show_role: this.showRole
            /* eslint-enable camelcase */
          } }).then((user) => {
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@ -25,61 +25,6 @@
          class="bio resize-height"
        />
      </EmojiInput>
-      <p>
-        <Checkbox v-model="newLocked">
-          {{ $t('settings.lock_account_description') }}
-        </Checkbox>
-      </p>
-      <div>
-        <label for="default-vis">{{ $t('settings.default_vis') }}</label>
-        <div
-          id="default-vis"
-          class="visibility-tray"
-        >
-          <scope-selector
-            :show-all="true"
-            :user-default="newDefaultScope"
-            :initial-scope="newDefaultScope"
-            :on-scope-change="changeVis"
-          />
-        </div>
-      </div>
-      <p>
-        <Checkbox v-model="newNoRichText">
-          {{ $t('settings.no_rich_text_description') }}
-        </Checkbox>
-      </p>
-      <p>
-        <Checkbox v-model="hideFollows">
-          {{ $t('settings.hide_follows_description') }}
-        </Checkbox>
-      </p>
-      <p class="setting-subitem">
-        <Checkbox
-          v-model="hideFollowsCount"
-          :disabled="!hideFollows"
-        >
-          {{ $t('settings.hide_follows_count_description') }}
-        </Checkbox>
-      </p>
-      <p>
-        <Checkbox v-model="hideFollowers">
-          {{ $t('settings.hide_followers_description') }}
-        </Checkbox>
-      </p>
-      <p class="setting-subitem">
-        <Checkbox
-          v-model="hideFollowersCount"
-          :disabled="!hideFollowers"
-        >
-          {{ $t('settings.hide_followers_count_description') }}
-        </Checkbox>
-      </p>
-      <p>
-        <Checkbox v-model="allowFollowingMove">
-          {{ $t('settings.allow_following_move') }}
-        </Checkbox>
-      </p>
      <p v-if="role === 'admin' || role === 'moderator'">
        <Checkbox v-model="showRole">
          <template v-if="role === 'admin'">
@ -90,11 +35,6 @@
          </template>
        </Checkbox>
      </p>
-      <p>
-        <Checkbox v-model="discoverable">
-          {{ $t('settings.discoverable') }}
-        </Checkbox>
-      </p>
      <div v-if="maxFields > 0">
        <p>{{ $t('settings.profile_fields.label') }}</p>
        <div
@ -269,6 +209,67 @@
        {{ $t('settings.save') }}
      </button>
    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.account_privacy') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path="serverSide_locked">
+            {{ $t('settings.lock_account_description') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="serverSide_discoverable">
+            {{ $t('settings.discoverable') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="serverSide_allowFollowingMove">
+            {{ $t('settings.allow_following_move') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="serverSide_hideFavorites">
+            {{ $t('settings.hide_favorites_description') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="serverSide_hideFollowers">
+            {{ $t('settings.hide_followers_description') }}
+          </BooleanSetting>
+          <ul
+            class="setting-list suboptions"
+            :class="[{disabled: !serverSide_hideFollowers}]"
+          >
+            <li>
+              <BooleanSetting
+                path="serverSide_hideFollowersCount"
+                :disabled="!serverSide_hideFollowers"
+              >
+                {{ $t('settings.hide_followers_count_description') }}
+              </BooleanSetting>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <BooleanSetting path="serverSide_hideFollows">
+            {{ $t('settings.hide_follows_description') }}
+          </BooleanSetting>
+          <ul
+            class="setting-list suboptions"
+            :class="[{disabled: !serverSide_hideFollows}]"
+          >
+            <li>
+              <BooleanSetting
+                path="serverSide_hideFollowsCount"
+                :disabled="!serverSide_hideFollows"
+              >
+                {{ $t('settings.hide_follows_count_description') }}
+              </BooleanSetting>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
  </div>
 </template>

--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@ -35,16 +35,9 @@ import FontControl from 'src/components/font_control/font_control.vue'
 import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Select from 'src/components/select/select.vue'

 import Preview from './preview.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)

 // List of color values used in v1
 const v1OnlyNames = [
@ -79,7 +72,8 @@ export default {
        getExportedObject: () => this.exportedTheme
      }),
      availableStyles: [],
-      selected: this.$store.getters.mergedConfig.theme,
+      selected: '',
+      selectedTheme: this.$store.getters.mergedConfig.theme,
      themeWarning: undefined,
      tempImportFile: undefined,
      engineVersion: 0,
@ -213,7 +207,7 @@ export default {
      }
    },
    selectedVersion () {
-      return Array.isArray(this.selected) ? 1 : 2
+      return Array.isArray(this.selectedTheme) ? 1 : 2
    },
    currentColors () {
      return Object.keys(SLOT_INHERITANCE)
@ -394,7 +388,8 @@ export default {
    FontControl,
    TabSwitcher,
    Preview,
-    Checkbox
+    Checkbox,
+    Select
  },
  methods: {
    loadTheme (
@ -479,7 +474,7 @@ export default {
          this.loadThemeFromLocalStorage(false, true)
          break
        case 'file':
-          console.err('Forcing snapshout from file is not supported yet')
+          console.error('Forcing snapshot from file is not supported yet')
          break
      }
      this.dismissWarning()
@ -750,6 +745,16 @@ export default {
      }
    },
    selected () {
+      this.selectedTheme = Object.entries(this.availableStyles).find(([k, s]) => {
+        if (Array.isArray(s)) {
+          console.log(s[0] === this.selected, this.selected)
+          return s[0] === this.selected
+        } else {
+          return s.name === this.selected
+        }
+      })[1]
+    },
+    selectedTheme () {
      this.dismissWarning()
      if (this.selectedVersion === 1) {
        if (!this.keepRoundness) {
@ -767,17 +772,17 @@ export default {
        if (!this.keepColor) {
          this.clearV1()

-          this.bgColorLocal = this.selected[1]
-          this.fgColorLocal = this.selected[2]
-          this.textColorLocal = this.selected[3]
-          this.linkColorLocal = this.selected[4]
-          this.cRedColorLocal = this.selected[5]
-          this.cGreenColorLocal = this.selected[6]
-          this.cBlueColorLocal = this.selected[7]
-          this.cOrangeColorLocal = this.selected[8]
+          this.bgColorLocal = this.selectedTheme[1]
+          this.fgColorLocal = this.selectedTheme[2]
+          this.textColorLocal = this.selectedTheme[3]
+          this.linkColorLocal = this.selectedTheme[4]
+          this.cRedColorLocal = this.selectedTheme[5]
+          this.cGreenColorLocal = this.selectedTheme[6]
+          this.cBlueColorLocal = this.selectedTheme[7]
+          this.cOrangeColorLocal = this.selectedTheme[8]
        }
      } else if (this.selectedVersion >= 2) {
-        this.normalizeLocalState(this.selected.theme, 2, this.selected.source)
+        this.normalizeLocalState(this.selectedTheme.theme, 2, this.selectedTheme.source)
      }
    }
  }
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@ -270,6 +270,9 @@

  .apply-container {
    justify-content: center;
+    position: absolute;
+    bottom: 8px;
+    right: 5px;
  }

  .radius-item,
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@ -55,7 +55,7 @@
              for="preset-switcher"
              class="select"
            >
-              <select
+              <Select
                id="preset-switcher"
                v-model="selected"
                class="preset-switcher"
@ -63,7 +63,7 @@
                <option
                  v-for="style in availableStyles"
                  :key="style.name"
-                  :value="style"
+                  :value="style.name || style[0]"
                  :style="{
                    backgroundColor: style[1] || (style.theme || style.source).colors.bg,
                    color: style[3] || (style.theme || style.source).colors.text
@ -71,11 +71,7 @@
                >
                  {{ style[0] || style.name }}
                </option>
-              </select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
+              </Select>
            </label>
          </div>
          <div class="export-import">
@ -907,11 +903,7 @@
          <div class="tab-header shadow-selector">
            <div class="select-container">
              {{ $t('settings.style.shadows.component') }}
-              <label
-                for="shadow-switcher"
-                class="select"
-              >
-                <select
+              <Select
                id="shadow-switcher"
                v-model="shadowSelected"
                class="shadow-switcher"
@ -923,12 +915,7 @@
                >
                  {{ $t('settings.style.shadows.components.' + shadow) }}
                </option>
-                </select>
-                <FAIcon
-                  class="select-down-icon"
-                  icon="chevron-down"
-                />
-              </label>
+              </Select>
            </div>
            <div class="override">
              <label
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@ -1,5 +1,6 @@
 import ColorInput from '../color_input/color_input.vue'
 import OpacityInput from '../opacity_input/opacity_input.vue'
+import Select from '../select/select.vue'
 import { getCssShadow } from '../../services/style_setter/style_setter.js'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
@ -45,7 +46,8 @@ export default {
  },
  components: {
    ColorInput,
-    OpacityInput
+    OpacityInput,
+    Select
  },
  methods: {
    add () {
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@ -59,12 +59,7 @@
        :disabled="usingFallback"
        class="id-control style-control"
      >
-        <label
-          for="shadow-switcher"
-          class="select"
-          :disabled="!ready || usingFallback"
-        >
-          <select
+        <Select
          id="shadow-switcher"
          v-model="selectedId"
          class="shadow-switcher"
@ -77,12 +72,7 @@
          >
            {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
          </option>
-          </select>
-          <FAIcon
-            icon="chevron-down"
-            class="select-down-icon"
-          />
-        </label>
+        </Select>
        <button
          class="btn button-default"
          :disabled="!ready || !present"
@ -316,20 +306,20 @@

    .id-control {
      align-items: stretch;
-      .select, .btn {
+
+      .shadow-switcher {
+        flex: 1;
+      }
+
+      .shadow-switcher, .btn {
        min-width: 1px;
        margin-right: 5px;
      }
+
      .btn {
        padding: 0 .4em;
        margin: 0 .1em;
      }
-      .select {
-        flex: 1;
-        select {
-          align-self: initial;
-        }
-      }
    }
  }
 }
--- a/Show More
+++ b/Show More