Merge branch 'develop' of git.pleroma.social:pleroma/pleroma-fe into develop

CHANGELOG.md

@@ -8,7 +8,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - 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
 
+### Fixed
+- Fixed follow request count showing in the wrong location in mobile view
 
 ## [2.3.0] - 2021-03-01
 ### Fixed

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

build/webpack.base.conf.js

@@ -3,6 +3,7 @@ var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
 var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
+var CopyPlugin = require('copy-webpack-plugin');
 
 var env = process.env.NODE_ENV
 // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@@ -93,6 +94,19 @@ module.exports = {
     new ServiceWorkerWebpackPlugin({
       entry: path.join(__dirname, '..', 'src/sw.js'),
       filename: 'sw-pleroma.js'
+    }),
+    // 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,
+      },
     })
   ]
 }

package.json

@@ -32,6 +32,7 @@
     "phoenix": "^1.3.0",
     "portal-vue": "^2.1.4",
     "punycode.js": "^2.1.0",
+    "ruffle-mirror": "^2021.4.10",
     "v-click-outside": "^2.1.1",
     "vue": "^2.6.11",
     "vue-i18n": "^7.3.2",
@@ -57,6 +58,7 @@
     "chalk": "^1.1.3",
     "chromedriver": "^87.0.1",
     "connect-history-api-fallback": "^1.1.0",
+    "copy-webpack-plugin": "^6.4.1",
     "cross-spawn": "^4.0.2",
     "css-loader": "^0.28.0",
     "custom-event-polyfill": "^1.0.7",
@@ -111,7 +113,7 @@
     "url-loader": "^1.1.2",
     "vue-loader": "^14.0.0",
     "vue-style-loader": "^4.0.0",
-    "webpack": "^4.0.0",
+    "webpack": "^4.44.0",
     "webpack-dev-middleware": "^3.6.0",
     "webpack-hot-middleware": "^2.12.2",
     "webpack-merge": "^0.14.1"

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,14 @@ export default {
         this.$store.state.instance.instanceSpecificPanelContent
     },
     showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
+    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'])

src/App.scss

@@ -187,7 +187,7 @@ a {
   }
 }
 
-input, textarea, .select, .input {
+input, textarea, .input {
 
   &.unstyled {
     border-radius: 0;
@@ -217,47 +217,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 +794,6 @@ nav {
   }
 }
 
-.select-multiple {
-  display: flex;
-  .option-list {
-    margin: 0;
-    padding-left: .5em;
-  }
-}
 .setting-list,
 .option-list{
   list-style-type: none;

src/App.vue

@@ -49,10 +49,10 @@
       </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"
     />
     <MobilePostStatusButton />
     <UserReportingModal />

src/boot/after_store.js

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

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

src/components/account_actions/account_actions.vue

@@ -6,10 +6,7 @@
       :bound-to="{ x: 'container' }"
       remove-padding
     >
-      <div
-        slot="content"
-        class="account-tools-popover"
-      >
+      <template v-slot:content>
         <div class="dropdown-menu">
           <template v-if="relationship.following">
             <button
@@ -59,16 +56,15 @@
             {{ $t('user_card.message') }}
           </button>
         </div>
-      </div>
-      <div
-        slot="trigger"
-        class="ellipsis-button"
-      >
-        <FAIcon
-          class="icon"
-          icon="ellipsis-v"
-        />
-      </div>
+      </template>
+      <template v-slot:trigger>
+        <button class="button-unstyled ellipsis-button">
+          <FAIcon
+            class="icon"
+            icon="ellipsis-v"
+          />
+        </button>
+      </template>
     </Popover>
   </div>
 </template>
@@ -83,7 +79,6 @@
   }
 
   .ellipsis-button {
-    cursor: pointer;
     width: 2.5em;
     margin: -0.5em 0;
     padding: 0.5em 0;

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'
@@ -43,6 +44,7 @@ const Attachment = {
     }
   },
   components: {
+    Flash,
     StillImage,
     VideoAttachment
   },

src/components/attachment/attachment.vue

@@ -117,6 +117,11 @@
         <!-- eslint-enable vue/no-v-html -->
       </div>
     </div>
+
+    <Flash
+      v-if="type === 'flash'"
+      :src="attachment.large_thumb_url || attachment.url"
+    />
   </div>
 </template>
 
@@ -172,6 +177,7 @@
   }
 
   .non-gallery.attachment {
+    &.flash,
     &.video {
       flex: 1 0 40%;
     }

src/components/chat_list/chat_list.vue

@@ -23,10 +23,7 @@
         class="timeline"
       >
         <List :items="sortedChatList">
-          <template
-            slot="item"
-            slot-scope="{item}"
-          >
+          <template v-slot:item="{item}">
             <ChatListItem
               :key="item.id"
               :compact="false"

src/components/chat_message/chat_message.vue

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

src/components/domain_mute_card/domain_mute_card.vue

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

src/components/emoji_input/emoji_input.js

@@ -57,6 +57,7 @@ const EmojiInput = {
       required: true,
       type: Function
     },
+    // TODO VUE3: change to modelValue, change 'input' event to 'input'
     value: {
       /**
        * Used for v-model
@@ -143,32 +144,31 @@ const EmojiInput = {
     }
   },
   mounted () {
-    const slots = this.$slots.default
-    if (!slots || slots.length === 0) return
-    const input = slots.find(slot => ['input', 'textarea'].includes(slot.tag))
+    const { root } = this.$refs
+    const input = root.querySelector('.emoji-input > input') || root.querySelector('.emoji-input > textarea')
     if (!input) return
     this.input = input
     this.resize()
-    input.elm.addEventListener('blur', this.onBlur)
-    input.elm.addEventListener('focus', this.onFocus)
-    input.elm.addEventListener('paste', this.onPaste)
-    input.elm.addEventListener('keyup', this.onKeyUp)
-    input.elm.addEventListener('keydown', this.onKeyDown)
-    input.elm.addEventListener('click', this.onClickInput)
-    input.elm.addEventListener('transitionend', this.onTransition)
-    input.elm.addEventListener('input', this.onInput)
+    input.addEventListener('blur', this.onBlur)
+    input.addEventListener('focus', this.onFocus)
+    input.addEventListener('paste', this.onPaste)
+    input.addEventListener('keyup', this.onKeyUp)
+    input.addEventListener('keydown', this.onKeyDown)
+    input.addEventListener('click', this.onClickInput)
+    input.addEventListener('transitionend', this.onTransition)
+    input.addEventListener('input', this.onInput)
   },
   unmounted () {
     const { input } = this
     if (input) {
-      input.elm.removeEventListener('blur', this.onBlur)
-      input.elm.removeEventListener('focus', this.onFocus)
-      input.elm.removeEventListener('paste', this.onPaste)
-      input.elm.removeEventListener('keyup', this.onKeyUp)
-      input.elm.removeEventListener('keydown', this.onKeyDown)
-      input.elm.removeEventListener('click', this.onClickInput)
-      input.elm.removeEventListener('transitionend', this.onTransition)
-      input.elm.removeEventListener('input', this.onInput)
+      input.removeEventListener('blur', this.onBlur)
+      input.removeEventListener('focus', this.onFocus)
+      input.removeEventListener('paste', this.onPaste)
+      input.removeEventListener('keyup', this.onKeyUp)
+      input.removeEventListener('keydown', this.onKeyDown)
+      input.removeEventListener('click', this.onClickInput)
+      input.removeEventListener('transitionend', this.onTransition)
+      input.removeEventListener('input', this.onInput)
     }
   },
   watch: {
@@ -216,7 +216,7 @@ const EmojiInput = {
       }, 0)
     },
     togglePicker () {
-      this.input.elm.focus()
+      this.input.focus()
       this.showPicker = !this.showPicker
       if (this.showPicker) {
         this.scrollIntoView()
@@ -262,13 +262,13 @@ const EmojiInput = {
       this.$emit('input', newValue)
       const position = this.caret + (insertion + spaceAfter + spaceBefore).length
       if (!keepOpen) {
-        this.input.elm.focus()
+        this.input.focus()
       }
 
       this.$nextTick(function () {
         // Re-focus inputbox after clicking suggestion
         // Set selection right after the replacement instead of the very end
-        this.input.elm.setSelectionRange(position, position)
+        this.input.setSelectionRange(position, position)
         this.caret = position
       })
     },
@@ -285,9 +285,9 @@ const EmojiInput = {
 
         this.$nextTick(function () {
           // Re-focus inputbox after clicking suggestion
-          this.input.elm.focus()
+          this.input.focus()
           // Set selection right after the replacement instead of the very end
-          this.input.elm.setSelectionRange(position, position)
+          this.input.setSelectionRange(position, position)
           this.caret = position
         })
         e.preventDefault()
@@ -349,7 +349,7 @@ const EmojiInput = {
       }
 
       this.$nextTick(() => {
-        const { offsetHeight } = this.input.elm
+        const { offsetHeight } = this.input
         const { picker } = this.$refs
         const pickerBottom = picker.$el.getBoundingClientRect().bottom
         if (pickerBottom > window.innerHeight) {
@@ -414,8 +414,8 @@ const EmojiInput = {
 
         // Scroll the input element to the position of the cursor
         this.$nextTick(() => {
-          this.input.elm.blur()
-          this.input.elm.focus()
+          this.input.blur()
+          this.input.focus()
         })
       }
       // Disable suggestions hotkeys if suggestions are hidden
@@ -444,7 +444,7 @@ const EmojiInput = {
       // de-focuses the element (i.e. default browser behavior)
       if (key === 'Escape') {
         if (!this.temporarilyHideSuggestions) {
-          this.input.elm.focus()
+          this.input.focus()
         }
       }
 
@@ -480,7 +480,7 @@ const EmojiInput = {
       if (!panel) return
       const picker = this.$refs.picker.$el
       const panelBody = this.$refs['panel-body']
-      const { offsetHeight, offsetTop } = this.input.elm
+      const { offsetHeight, offsetTop } = this.input
       const offsetBottom = offsetTop + offsetHeight
 
       this.setPlacement(panelBody, panel, offsetBottom)
@@ -494,7 +494,7 @@ const EmojiInput = {
 
       if (this.placement === 'top' || (this.placement === 'auto' && this.overflowsBottom(container))) {
         target.style.top = 'auto'
-        target.style.bottom = this.input.elm.offsetHeight + 'px'
+        target.style.bottom = this.input.offsetHeight + 'px'
       }
     },
     overflowsBottom (el) {

src/components/emoji_input/emoji_input.vue

@@ -3,6 +3,7 @@
     v-click-outside="onClickOutside"
     class="emoji-input"
     :class="{ 'with-picker': !hideEmojiButton }"
+    ref='root'
   >
     <slot />
     <template v-if="enableEmojiPicker">

src/components/extra_buttons/extra_buttons.vue

@@ -7,10 +7,7 @@
     :bound-to="{ x: 'container' }"
     remove-padding
   >
-    <div
-      slot="content"
-      slot-scope="{close}"
-    >
+    <template v-slot:content="{close}">
       <div class="dropdown-menu">
         <button
           v-if="canMute && !status.thread_muted"
@@ -120,16 +117,15 @@
           /><span>{{ $t("user_card.report") }}</span>
         </button>
       </div>
-    </div>
-    <span
-      slot="trigger"
-      class="popover-trigger"
-    >
-      <FAIcon
-        class="fa-scale-110 fa-old-padding"
-        icon="ellipsis-h"
-      />
-    </span>
+    </template>
+    <template v-slot:trigger>
+      <button class="button-unstyled popover-trigger">
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="ellipsis-h"
+        />
+      </button>
+    </template>
   </Popover>
 </template>
 

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

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

src/components/flash/flash.js

@@ -0,0 +1,52 @@
+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
+      })
+    },
+    closePlayer () {
+      console.log(this.ruffleInstance)
+      this.ruffleInstance.remove()
+      this.player = false
+    }
+  }
+}
+
+export default Flash

src/components/flash/flash.vue

@@ -0,0 +1,88 @@
+<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>
+    <button
+      v-if="player"
+      class="button-unstyled hider"
+      @click="closePlayer"
+    >
+      <FAIcon icon="stop" />
+    </button>
+  </div>
+</template>
+
+<script src="./flash.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+.Flash {
+  width: 100%;
+  height: 260px;
+  position: relative;
+
+  .player {
+    height: 100%;
+    width: 100%;
+  }
+
+  .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';
+  }
+
+  .placeholder {
+    height: 100%;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

src/components/font_control/font_control.js

@@ -1,14 +1,10 @@
 import { set } from 'vue'
-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
+  },
   props: [
     'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
   ],

src/components/font_control/font_control.vue

@@ -22,30 +22,20 @@
       class="opt-l"
       :for="name + '-o'"
     />
-    <label
-      :for="name + '-font-switcher'"
-      class="select"
+    <Select
+      :id="name + '-font-switcher'"
+      v-model="preset"
       :disabled="!present"
+      class="font-switcher"
     >
-      <select
-        :id="name + '-font-switcher'"
-        v-model="preset"
-        :disabled="!present"
-        class="font-switcher"
+      <option
+        v-for="option in availableOptions"
+        :key="option"
+        :value="option"
       >
-        <option
-          v-for="option in availableOptions"
-          :key="option"
-          :value="option"
-        >
-          {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
-        </option>
-      </select>
-      <FAIcon
-        class="select-down-icon"
-        icon="chevron-down"
-      />
-    </label>
+        {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
+      </option>
+    </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;
     }

src/components/interface_language_switcher/interface_language_switcher.vue

@@ -3,27 +3,18 @@
     <label for="interface-language-switcher">
       {{ $t('settings.interfaceLanguage') }}
     </label>
-    <label
-      for="interface-language-switcher"
-      class="select"
+    <Select
+      id="interface-language-switcher"
+      v-model="language"
     >
-      <select
-        id="interface-language-switcher"
-        v-model="language"
+      <option
+        v-for="lang in languages"
+        :key="lang.code"
+        :value="lang.code"
       >
-        <option
-          v-for="lang in languages"
-          :key="lang.code"
-          :value="lang.code"
-        >
-          {{ lang.name }}
-        </option>
-      </select>
-      <FAIcon
-        class="select-down-icon"
-        icon="chevron-down"
-      />
-    </label>
+        {{ lang.name }}
+      </option>
+    </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))

src/components/moderation_tools/moderation_tools.vue

@@ -8,7 +8,7 @@
       @show="setToggled(true)"
       @close="setToggled(false)"
     >
-      <div slot="content">
+      <template v-slot:content>
         <div class="dropdown-menu">
           <span v-if="user.is_local">
             <button
@@ -121,26 +121,27 @@
             </button>
           </span>
         </div>
-      </div>
-      <button
-        slot="trigger"
-        class="btn button-default btn-block moderation-tools-button"
-        :class="{ toggled }"
-      >
-        {{ $t('user_card.admin_menu.moderation') }}
-        <FAIcon icon="chevron-down" />
-      </button>
+      </template>
+      <template v-slot:trigger>
+        <button
+          class="btn button-default btn-block moderation-tools-button"
+          :class="{ toggled }"
+        >
+          {{ $t('user_card.admin_menu.moderation') }}
+          <FAIcon icon="chevron-down" />
+        </button>
+      </template>
     </Popover>
     <portal to="modal">
       <DialogModal
         v-if="showDeleteUserDialog"
         :on-cancel="deleteUserDialog.bind(this, false)"
       >
-        <template slot="header">
+        <template v-slot:header>
           {{ $t('user_card.admin_menu.delete_user') }}
         </template>
         <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
-        <template slot="footer">
+        <template v-slot:footer>
           <button
             class="btn button-default"
             @click="deleteUserDialog(false)"

src/components/notifications/notification_filters.vue

@@ -5,9 +5,7 @@
     placement="bottom"
     :bound-to="{ x: 'container' }"
   >
-    <template
-      v-slot:content
-    >
+    <template v-slot:content>
       <div class="dropdown-menu">
         <button
           class="button-default dropdown-item"
@@ -66,7 +64,9 @@
       </div>
     </template>
     <template v-slot:trigger>
-      <FAIcon icon="filter" />
+      <button class="button-unstyled">
+        <FAIcon icon="filter" />
+      </button>
     </template>
   </Popover>
 </template>

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

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
+          v-model="pollType"
+          class="poll-type-select"
+          unstyled="true"
+          @change="updatePollToParent"
         >
-          <select
-            v-model="pollType"
-            class="select"
-            @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,24 +72,20 @@
           :max="maxExpirationInCurrentUnit"
           @change="expiryAmountChange"
         >
-        <label class="expiry-unit select">
-          <select
-            v-model="expiryUnit"
-            @change="expiryAmountChange"
+        <Select
+          v-model="expiryUnit"
+          unstyled="true"
+          class="expiry-unit"
+          @change="expiryAmountChange"
+        >
+          <option
+            v-for="unit in expiryUnits"
+            :key="unit"
+            :value="unit"
           >
-            <option
-              v-for="unit in expiryUnits"
-              :key="unit"
-              :value="unit"
-            >
-              {{ $t(`time.${unit}_short`, ['']) }}
-            </option>
-          </select>
-          <FAIcon
-            class="select-down-icon"
-            icon="chevron-down"
-          />
-        </label>
+            {{ $t(`time.${unit}_short`, ['']) }}
+          </option>
+        </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>

src/components/popover/popover.js

@@ -54,7 +54,7 @@ const Popover = {
       }
 
       // Popover will be anchored around this element, trigger ref is the container, so
-      // its children are what are inside the slot. Expect only one slot="trigger".
+      // its children are what are inside the slot. Expect only one v-slot:trigger.
       const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el
       // SVGs don't have offsetWidth/Height, use fallback
       const anchorWidth = anchorEl.offsetWidth || anchorEl.clientWidth

src/components/post_status_form/post_status_form.js

@@ -11,10 +11,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 +24,6 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faChevronDown,
   faSmileBeam,
   faPollH,
   faUpload,
@@ -84,6 +83,7 @@ const PostStatusForm = {
     PollForm,
     ScopeSelector,
     Checkbox,
+    Select,
     Attachment,
     StatusContent
   },

src/components/post_status_form/post_status_form.vue

@@ -189,28 +189,19 @@
             v-if="postFormats.length > 1"
             class="text-format"
           >
-            <label
-              for="post-content-type"
-              class="select"
+            <Select
+              id="post-content-type"
+              v-model="newStatus.contentType"
+              class="form-control"
             >
-              <select
-                id="post-content-type"
-                v-model="newStatus.contentType"
-                class="form-control"
+              <option
+                v-for="postFormat in postFormats"
+                :key="postFormat"
+                :value="postFormat"
               >
-                <option
-                  v-for="postFormat in postFormats"
-                  :key="postFormat"
-                  :value="postFormat"
-                >
-                  {{ $t(`post_status.content_type["${postFormat}"]`) }}
-                </option>
-              </select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
-            </label>
+                {{ $t(`post_status.content_type["${postFormat}"]`) }}
+              </option>
+            </Select>
           </div>
           <div
             v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"

src/components/react_button/react_button.vue

@@ -8,10 +8,7 @@
     remove-padding
     @show="focusInput"
   >
-    <div
-      slot="content"
-      slot-scope="{close}"
-    >
+    <template v-slot:content="{close}">
       <div class="reaction-picker-filter">
         <input
           v-model="filterWord"
@@ -41,17 +38,18 @@
         </span>
         <div class="reaction-bottom-fader" />
       </div>
-    </div>
-    <span
-      slot="trigger"
-      class="popover-trigger"
-      :title="$t('tool_tip.add_reaction')"
-    >
-      <FAIcon
-        class="fa-scale-110 fa-old-padding"
-        :icon="['far', 'smile-beam']"
-      />
-    </span>
+    </template>
+    <template v-slot:trigger>
+      <button
+        class="button-unstyled popover-trigger"
+        :title="$t('tool_tip.add_reaction')"
+      >
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          :icon="['far', 'smile-beam']"
+        />
+      </button>
+    </template>
   </Popover>
 </template>
 

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

src/components/select/select.vue

@@ -0,0 +1,62 @@
+
+<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%;
+    color: $fallback--text;
+    color: var(--inputText, $fallback--text);
+    line-height: 28px;
+    z-index: 0;
+    pointer-events: none;
+  }
+
+}
+</style>

src/components/selectable_list/selectable_list.vue

@@ -24,10 +24,7 @@
       :items="items"
       :get-key="getKey"
     >
-      <template
-        slot="item"
-        slot-scope="{item}"
-      >
+      <template v-slot:item="{item}">
         <div
           class="selectable-list-item-inner"
           :class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
@@ -44,7 +41,7 @@
           />
         </div>
       </template>
-      <template slot="empty">
+      <template v-slot:empty>
         <slot name="empty" />
       </template>
     </List>

src/components/settings_modal/helpers/boolean_setting.js

@@ -0,0 +1,30 @@
+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)
+    }
+  }
+}

src/components/settings_modal/helpers/boolean_setting.vue

@@ -18,40 +18,4 @@
   </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>

src/components/settings_modal/helpers/choice_setting.js

@@ -0,0 +1,34 @@
+import { get, set } from 'lodash'
+import Select from 'src/components/select/select.vue'
+import ModifiedIndicator from './modified_indicator.vue'
+export default {
+  components: {
+    Select,
+    ModifiedIndicator
+  },
+  props: [
+    'path',
+    'disabled',
+    'options'
+  ],
+  computed: {
+    pathDefault () {
+      const [firstSegment, ...rest] = this.path.split('.')
+      return [firstSegment + 'DefaultValue', ...rest].join('.')
+    },
+    state () {
+      return get(this.$parent, this.path)
+    },
+    defaultState () {
+      return get(this.$parent, this.pathDefault)
+    },
+    isChanged () {
+      return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
+    }
+  },
+  methods: {
+    update (e) {
+      set(this.$parent, this.path, e)
+    }
+  }
+}

src/components/settings_modal/helpers/choice_setting.vue

@@ -0,0 +1,29 @@
+<template>
+  <label
+    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" />
+  </label>
+</template>
+
+<script src="./choice_setting.js"></script>
+
+<style lang="scss">
+.ChoiceSetting {
+}
+</style>

src/components/settings_modal/helpers/modified_indicator.vue

@@ -6,18 +6,18 @@
     <Popover
       trigger="hover"
     >
-      <span slot="trigger">
+      <template v-slot:trigger>
         &nbsp;
         <FAIcon
           icon="wrench"
+          :aria-label="$t('settings.setting_changed')"
         />
-      </span>
-      <div
-        slot="content"
-        class="modified-tooltip"
-      >
-        {{ $t('settings.setting_changed') }}
-      </div>
+      </template>
+      <template v-slot:content>
+        <div class="modified-tooltip">
+          {{ $t('settings.setting_changed') }}
+        </div>
+      </template>
     </Popover>
   </span>
 </template>

src/components/settings_modal/settings_modal.vue

@@ -62,20 +62,18 @@
           :bound-to="{ x: 'container' }"
           remove-padding
         >
-          <button
-            slot="trigger"
-            class="btn button-default"
-            :title="$t('general.close')"
-          >
-            <span>{{ $t("settings.file_export_import.backup_restore") }}</span>
-            <FAIcon
-              icon="chevron-down"
-            />
-          </button>
-          <div
-            slot="content"
-            slot-scope="{close}"
-          >
+          <template v-slot:trigger>
+            <button
+              class="btn button-default"
+              :title="$t('general.close')"
+            >
+              <span>{{ $t("settings.file_export_import.backup_restore") }}</span>
+              <FAIcon
+                icon="chevron-down"
+              />
+            </button>
+          </template>
+          <template v-slot:content="{close}">
             <div class="dropdown-menu">
               <button
                 class="button-default dropdown-item dropdown-item-icon"
@@ -108,7 +106,7 @@
                 /><span>{{ $t("settings.file_export_import.restore_settings") }}</span>
               </button>
             </div>
-          </div>
+          </template>
         </Popover>
       </div>
     </div>

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;

src/components/settings_modal/tabs/filtering_tab.js

@@ -1,24 +1,23 @@
 import { filter, trim } from 'lodash'
 import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_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
   },
   computed: {
     ...SharedComputedObject(),

src/components/settings_modal/tabs/filtering_tab.vue

@@ -36,29 +36,13 @@
           </li>
         </ul>
       </div>
-      <div>
+      <ChoiceSetting
+        id="replyVisibility"
+        path="replyVisibility"
+        :options="replyVisibilityOptions"
+      >
         {{ $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>
+      </ChoiceSetting>
       <div>
         <BooleanSetting path="hidePostStats">
           {{ $t('settings.hide_post_stats') }}

src/components/settings_modal/tabs/general_tab.js

@@ -1,21 +1,25 @@
 import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 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}`)
+      })),
       loopSilentAvailable:
       // Firefox
       Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
@@ -27,17 +31,26 @@ const GeneralTab = {
   },
   components: {
     BooleanSetting,
+    ChoiceSetting,
     InterfaceLanguageSwitcher
   },
   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()
   }
 }

src/components/settings_modal/tabs/general_tab.vue

@@ -11,11 +11,21 @@
             {{ $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>
+        <li v-if="instanceShoutboxPresent">
+          <BooleanSetting path="hideShoutbox">
+            {{ $t('settings.hide_shoutbox') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
     <div class="setting-item">
@@ -85,62 +95,22 @@
           </BooleanSetting>
         </li>
         <li>
-          <div>
+          <ChoiceSetting
+            id="subjectLineBehavior"
+            path="subjectLineBehavior"
+            :options="subjectLineOptions"
+          >
             {{ $t('settings.subject_line_behavior') }}
-            <label
-              for="subjectLineBehavior"
-              class="select"
-            >
-              <select
-                id="subjectLineBehavior"
-                v-model="subjectLineBehavior"
-              >
-                <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>
+          </ChoiceSetting>
         </li>
         <li v-if="postFormats.length > 0">
-          <div>
+          <ChoiceSetting
+            id="postContentType"
+            path="postContentType"
+            :options="postContentOptions"
+          >
             {{ $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>
+          </ChoiceSetting>
         </li>
         <li>
           <BooleanSetting path="minimalScopesMode">

src/components/settings_modal/tabs/mutes_and_blocks_tab.vue

@@ -10,20 +10,18 @@
           :query="queryUserIds"
           :placeholder="$t('settings.search_user_to_block')"
         >
-          <BlockCard
-            slot-scope="row"
-            :user-id="row.item"
-          />
+          <template v-slot="row">
+            <BlockCard
+              :user-id="row.item"
+            />
+          </template>
         </Autosuggest>
       </div>
       <BlockList
         :refresh="true"
         :get-key="i => i"
       >
-        <template
-          slot="header"
-          slot-scope="{selected}"
-        >
+        <template v-slot:header="{selected}">
           <div class="bulk-actions">
             <ProgressButton
               v-if="selected.length > 0"
@@ -31,7 +29,7 @@
               :click="() => blockUsers(selected)"
             >
               {{ $t('user_card.block') }}
-              <template slot="progress">
+              <template v-slot:progress>
                 {{ $t('user_card.block_progress') }}
               </template>
             </ProgressButton>
@@ -41,19 +39,16 @@
               :click="() => unblockUsers(selected)"
             >
               {{ $t('user_card.unblock') }}
-              <template slot="progress">
+              <template v-slot:progress>
                 {{ $t('user_card.unblock_progress') }}
               </template>
             </ProgressButton>
           </div>
         </template>
-        <template
-          slot="item"
-          slot-scope="{item}"
-        >
+        <template v-slot:item="{item}">
           <BlockCard :user-id="item" />
         </template>
-        <template slot="empty">
+        <template v-slot:empty>
           {{ $t('settings.no_blocks') }}
         </template>
       </BlockList>
@@ -68,20 +63,18 @@
               :query="queryUserIds"
               :placeholder="$t('settings.search_user_to_mute')"
             >
-              <MuteCard
-                slot-scope="row"
-                :user-id="row.item"
-              />
+              <template v-slot="row">
+                <MuteCard
+                  :user-id="row.item"
+                />
+              </template>
             </Autosuggest>
           </div>
           <MuteList
             :refresh="true"
             :get-key="i => i"
           >
-            <template
-              slot="header"
-              slot-scope="{selected}"
-            >
+            <template v-slot:header="{selected}">
               <div class="bulk-actions">
                 <ProgressButton
                   v-if="selected.length > 0"
@@ -89,7 +82,7 @@
                   :click="() => muteUsers(selected)"
                 >
                   {{ $t('user_card.mute') }}
-                  <template slot="progress">
+                  <template v-slot:progress>
                     {{ $t('user_card.mute_progress') }}
                   </template>
                 </ProgressButton>
@@ -99,19 +92,16 @@
                   :click="() => unmuteUsers(selected)"
                 >
                   {{ $t('user_card.unmute') }}
-                  <template slot="progress">
+                  <template v-slot:progress>
                     {{ $t('user_card.unmute_progress') }}
                   </template>
                 </ProgressButton>
               </div>
             </template>
-            <template
-              slot="item"
-              slot-scope="{item}"
-            >
+            <template v-slot:item="{item}">
               <MuteCard :user-id="item" />
             </template>
-            <template slot="empty">
+            <template v-slot:empty>
               {{ $t('settings.no_mutes') }}
             </template>
           </MuteList>
@@ -124,20 +114,18 @@
               :query="queryKnownDomains"
               :placeholder="$t('settings.type_domains_to_mute')"
             >
-              <DomainMuteCard
-                slot-scope="row"
-                :domain="row.item"
-              />
+              <template v-slot="row">
+                <DomainMuteCard
+                  :domain="row.item"
+                />
+              </template>
             </Autosuggest>
           </div>
           <DomainMuteList
             :refresh="true"
             :get-key="i => i"
           >
-            <template
-              slot="header"
-              slot-scope="{selected}"
-            >
+            <template v-slot:header="{selected}">
               <div class="bulk-actions">
                 <ProgressButton
                   v-if="selected.length > 0"
@@ -145,19 +133,16 @@
                   :click="() => unmuteDomains(selected)"
                 >
                   {{ $t('domain_mute_card.unmute') }}
-                  <template slot="progress">
+                  <template v-slot:progress>
                     {{ $t('domain_mute_card.unmute_progress') }}
                   </template>
                 </ProgressButton>
               </div>
             </template>
-            <template
-              slot="item"
-              slot-scope="{item}"
-            >
+            <template v-slot:item="{item}">
               <DomainMuteCard :domain="item" />
             </template>
-            <template slot="empty">
+            <template v-slot:empty>
               {{ $t('settings.no_mutes') }}
             </template>
           </DomainMuteList>

src/components/settings_modal/tabs/theme_tab/theme_tab.js

@@ -36,16 +36,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.js'
 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 = [
@@ -395,7 +388,8 @@ export default {
     FontControl,
     TabSwitcher,
     Preview,
-    Checkbox
+    Checkbox,
+    Select
   },
   methods: {
     loadTheme (

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"
@@ -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,28 +903,19 @@
           <div class="tab-header shadow-selector">
             <div class="select-container">
               {{ $t('settings.style.shadows.component') }}
-              <label
-                for="shadow-switcher"
-                class="select"
+              <Select
+                id="shadow-switcher"
+                v-model="shadowSelected"
+                class="shadow-switcher"
               >
-                <select
-                  id="shadow-switcher"
-                  v-model="shadowSelected"
-                  class="shadow-switcher"
+                <option
+                  v-for="shadow in shadowsAvailable"
+                  :key="shadow"
+                  :value="shadow"
                 >
-                  <option
-                    v-for="shadow in shadowsAvailable"
-                    :key="shadow"
-                    :value="shadow"
-                  >
-                    {{ $t('settings.style.shadows.components.' + shadow) }}
-                  </option>
-                </select>
-                <FAIcon
-                  class="select-down-icon"
-                  icon="chevron-down"
-                />
-              </label>
+                  {{ $t('settings.style.shadows.components.' + shadow) }}
+                </option>
+              </Select>
             </div>
             <div class="override">
               <label

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

src/components/shadow_control/shadow_control.vue

@@ -59,30 +59,20 @@
         :disabled="usingFallback"
         class="id-control style-control"
       >
-        <label
-          for="shadow-switcher"
-          class="select"
+        <Select
+          id="shadow-switcher"
+          v-model="selectedId"
+          class="shadow-switcher"
           :disabled="!ready || usingFallback"
         >
-          <select
-            id="shadow-switcher"
-            v-model="selectedId"
-            class="shadow-switcher"
-            :disabled="!ready || usingFallback"
+          <option
+            v-for="(shadow, index) in cValue"
+            :key="index"
+            :value="index"
           >
-            <option
-              v-for="(shadow, index) in cValue"
-              :key="index"
-              :value="index"
-            >
-              {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
-            </option>
-          </select>
-          <FAIcon
-            icon="chevron-down"
-            class="select-down-icon"
-          />
-        </label>
+            {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
+          </option>
+        </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;
-        }
-      }
     }
   }
 }

src/components/shout_panel/shout_panel.js

@@ -10,7 +10,7 @@ library.add(
   faTimes
 )
 
-const chatPanel = {
+const shoutPanel = {
   props: [ 'floating' ],
   data () {
     return {
@@ -21,12 +21,12 @@ const chatPanel = {
   },
   computed: {
     messages () {
-      return this.$store.state.chat.messages
+      return this.$store.state.shout.messages
     }
   },
   methods: {
     submit (message) {
-      this.$store.state.chat.channel.push('new_msg', { text: message }, 10000)
+      this.$store.state.shout.channel.push('new_msg', { text: message }, 10000)
       this.currentMessage = ''
     },
     togglePanel () {
@@ -50,4 +50,4 @@ const chatPanel = {
   }
 }
 
-export default chatPanel
+export default shoutPanel

src/components/shout_panel/shout_panel.vue

@@ -1,12 +1,12 @@
 <template>
   <div
     v-if="!collapsed || !floating"
-    class="chat-panel"
+    class="shout-panel"
   >
     <div class="panel panel-default">
       <div
         class="panel-heading timeline-heading"
-        :class="{ 'chat-heading': floating }"
+        :class="{ 'shout-heading': floating }"
         @click.stop.prevent="togglePanel"
       >
         <div class="title">
@@ -18,33 +18,33 @@
           />
         </div>
       </div>
-      <div class="chat-window">
+      <div class="shout-window">
         <div
           v-for="message in messages"
           :key="message.id"
-          class="chat-message"
+          class="shout-message"
         >
-          <span class="chat-avatar">
+          <span class="shout-avatar">
             <img :src="message.author.avatar">
           </span>
-          <div class="chat-content">
+          <div class="shout-content">
             <router-link
-              class="chat-name"
+              class="shout-name"
               :to="userProfileLink(message.author)"
             >
               {{ message.author.username }}
             </router-link>
             <br>
-            <span class="chat-text">
+            <span class="shout-text">
               {{ message.text }}
             </span>
           </div>
         </div>
       </div>
-      <div class="chat-input">
+      <div class="shout-input">
         <textarea
           v-model="currentMessage"
-          class="chat-input-textarea"
+          class="shout-input-textarea"
           rows="1"
           @keyup.enter="submit(currentMessage)"
         />
@@ -53,11 +53,11 @@
   </div>
   <div
     v-else
-    class="chat-panel"
+    class="shout-panel"
   >
     <div class="panel panel-default">
       <div
-        class="panel-heading stub timeline-heading chat-heading"
+        class="panel-heading stub timeline-heading shout-heading"
         @click.stop.prevent="togglePanel"
       >
         <div class="title">
@@ -72,12 +72,12 @@
   </div>
 </template>
 
-<script src="./chat_panel.js"></script>
+<script src="./shout_panel.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
 
-.floating-chat {
+.floating-shout {
   position: fixed;
   right: 0px;
   bottom: 0px;
@@ -85,8 +85,8 @@
   max-width: 25em;
 }
 
-.chat-panel {
-  .chat-heading {
+.shout-panel {
+  .shout-heading {
     cursor: pointer;
 
     .icon {
@@ -102,22 +102,22 @@
     }
   }
 
-  .chat-window {
+  .shout-window {
     overflow-y: auto;
     overflow-x: hidden;
     max-height: 20em;
   }
 
-  .chat-window-container {
+  .shout-window-container {
     height: 100%;
   }
 
-  .chat-message {
+  .shout-message {
     display: flex;
     padding: 0.2em 0.5em
   }
 
-  .chat-avatar {
+  .shout-avatar {
     img {
       height: 24px;
       width: 24px;
@@ -128,7 +128,7 @@
     }
   }
 
-  .chat-input {
+  .shout-input {
     display: flex;
     textarea {
       flex: 1;
@@ -138,7 +138,7 @@
     }
   }
 
-  .chat-panel {
+  .shout-panel {
     .title {
       display: flex;
       justify-content: space-between;

src/components/side_drawer/side_drawer.js

@@ -49,7 +49,6 @@ const SideDrawer = {
     currentUser () {
       return this.$store.state.users.currentUser
     },
-    chat () { return this.$store.state.chat.channel.state === 'joined' },
     unseenNotifications () {
       return unseenNotificationsFromStore(this.$store)
     },

src/components/side_drawer/side_drawer.vue

@@ -273,9 +273,7 @@
   --icon: var(--popoverIcon, $fallback--icon);
 
   .badge {
-    position: absolute;
-    right: 0.7rem;
-    top: 1em;
+    margin-left: 10px;
   }
 }
 

src/components/status_popover/status_popover.vue

@@ -5,12 +5,10 @@
     :bound-to="{ x: 'container' }"
     @show="enter"
   >
-    <template slot="trigger">
+    <template v-slot:trigger>
       <slot />
     </template>
-    <div
-      slot="content"
-    >
+    <template v-slot:content>
       <Status
         v-if="status"
         :is-preview="true"
@@ -33,7 +31,7 @@
           size="2x"
         />
       </div>
-    </div>
+    </template>
   </Popover>
 </template>
 

src/components/timeline/timeline_quick_settings.vue

@@ -4,77 +4,78 @@
     class="TimelineQuickSettings"
     :bound-to="{ x: 'container' }"
   >
-    <div
-      slot="content"
-      class="dropdown-menu"
-    >
-      <div v-if="loggedIn">
+    <template v-slot:content>
+      <div class="dropdown-menu">
+        <div v-if="loggedIn">
+          <button
+            class="button-default dropdown-item"
+            @click="replyVisibilityAll = true"
+          >
+            <span
+              class="menu-checkbox"
+              :class="{ 'menu-checkbox-radio': replyVisibilityAll }"
+            />{{ $t('settings.reply_visibility_all') }}
+          </button>
+          <button
+            class="button-default dropdown-item"
+            @click="replyVisibilityFollowing = true"
+          >
+            <span
+              class="menu-checkbox"
+              :class="{ 'menu-checkbox-radio': replyVisibilityFollowing }"
+            />{{ $t('settings.reply_visibility_following_short') }}
+          </button>
+          <button
+            class="button-default dropdown-item"
+            @click="replyVisibilitySelf = true"
+          >
+            <span
+              class="menu-checkbox"
+              :class="{ 'menu-checkbox-radio': replyVisibilitySelf }"
+            />{{ $t('settings.reply_visibility_self_short') }}
+          </button>
+          <div
+            role="separator"
+            class="dropdown-divider"
+          />
+        </div>
         <button
           class="button-default dropdown-item"
-          @click="replyVisibilityAll = true"
+          @click="hideMedia = !hideMedia"
         >
           <span
             class="menu-checkbox"
-            :class="{ 'menu-checkbox-radio': replyVisibilityAll }"
-          />{{ $t('settings.reply_visibility_all') }}
+            :class="{ 'menu-checkbox-checked': hideMedia }"
+          />{{ $t('settings.hide_media_previews') }}
         </button>
         <button
           class="button-default dropdown-item"
-          @click="replyVisibilityFollowing = true"
+          @click="hideMutedPosts = !hideMutedPosts"
         >
           <span
             class="menu-checkbox"
-            :class="{ 'menu-checkbox-radio': replyVisibilityFollowing }"
-          />{{ $t('settings.reply_visibility_following_short') }}
+            :class="{ 'menu-checkbox-checked': hideMutedPosts }"
+          />{{ $t('settings.hide_all_muted_posts') }}
         </button>
         <button
-          class="button-default dropdown-item"
-          @click="replyVisibilitySelf = true"
+          class="button-default dropdown-item dropdown-item-icon"
+          @click="openTab('filtering')"
         >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-radio': replyVisibilitySelf }"
-          />{{ $t('settings.reply_visibility_self_short') }}
+          <FAIcon icon="font" />{{ $t('settings.word_filter') }}
+        </button>
+        <button
+          class="button-default dropdown-item dropdown-item-icon"
+          @click="openTab('general')"
+        >
+          <FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
         </button>
-        <div
-          role="separator"
-          class="dropdown-divider"
-        />
       </div>
-      <button
-        class="button-default dropdown-item"
-        @click="hideMedia = !hideMedia"
-      >
-        <span
-          class="menu-checkbox"
-          :class="{ 'menu-checkbox-checked': hideMedia }"
-        />{{ $t('settings.hide_media_previews') }}
+    </template>
+    <template v-slot:trigger>
+      <button class="button-unstyled">
+        <FAIcon icon="filter" />
       </button>
-      <button
-        class="button-default dropdown-item"
-        @click="hideMutedPosts = !hideMutedPosts"
-      >
-        <span
-          class="menu-checkbox"
-          :class="{ 'menu-checkbox-checked': hideMutedPosts }"
-        />{{ $t('settings.hide_all_muted_posts') }}
-      </button>
-      <button
-        class="button-default dropdown-item dropdown-item-icon"
-        @click="openTab('filtering')"
-      >
-        <FAIcon icon="font" />{{ $t('settings.word_filter') }}
-      </button>
-      <button
-        class="button-default dropdown-item dropdown-item-icon"
-        @click="openTab('general')"
-      >
-        <FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
-      </button>
-    </div>
-    <div slot="trigger">
-      <FAIcon icon="filter" />
-    </div>
+    </template>
   </Popover>
 </template>
 

src/components/timeline_menu/timeline_menu.vue

@@ -9,28 +9,26 @@
     @show="openMenu"
     @close="() => isOpen = false"
   >
-    <div
-      slot="content"
-      class="timeline-menu-popover panel panel-default"
-    >
-      <TimelineMenuContent />
-    </div>
-    <div
-      slot="trigger"
-      class="title timeline-menu-title"
-    >
-      <span class="timeline-title">{{ timelineName() }}</span>
-      <span>
-        <FAIcon
-          size="sm"
-          icon="chevron-down"
+    <template v-slot:content>
+      <div class="timeline-menu-popover popover-default">
+        <TimelineMenuContent />
+      </div>
+    </template>
+    <template v-slot:trigger>
+      <button class="button-unstyled title timeline-menu-title">
+        <span class="timeline-title">{{ timelineName() }}</span>
+        <span>
+          <FAIcon
+            size="sm"
+            icon="chevron-down"
+          />
+        </span>
+        <span
+          class="click-blocker"
+          @click="blockOpen"
         />
-      </span>
-      <span
-        class="click-blocker"
-        @click="blockOpen"
-      />
-    </div>
+      </button>
+    </template>
   </Popover>
 </template>
 

src/components/user_card/user_card.js

@@ -4,13 +4,13 @@ import ProgressButton from '../progress_button/progress_button.vue'
 import FollowButton from '../follow_button/follow_button.vue'
 import ModerationTools from '../moderation_tools/moderation_tools.vue'
 import AccountActions from '../account_actions/account_actions.vue'
+import Select from '../select/select.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBell,
   faRss,
-  faChevronDown,
   faSearchPlus,
   faExternalLinkAlt
 } from '@fortawesome/free-solid-svg-icons'
@@ -18,7 +18,6 @@ import {
 library.add(
   faRss,
   faBell,
-  faChevronDown,
   faSearchPlus,
   faExternalLinkAlt
 )
@@ -118,7 +117,8 @@ export default {
     ModerationTools,
     AccountActions,
     ProgressButton,
-    FollowButton
+    FollowButton,
+    Select
   },
   methods: {
     refetchRelationship () {

src/components/user_card/user_card.vue

@@ -53,17 +53,17 @@
               >
                 {{ user.name }}
               </div>
-              <a
+              <button
                 v-if="isOtherUser && !user.is_local"
                 :href="user.statusnet_profile_url"
                 target="_blank"
-                class="external-link-button"
+                class="button-unstyled external-link-button"
               >
                 <FAIcon
                   class="icon"
                   icon="external-link-alt"
                 />
-              </a>
+              </button>
               <AccountActions
                 v-if="isOtherUser && loggedIn"
                 :user="user"
@@ -132,25 +132,24 @@
               class="userHighlightCl"
               type="color"
             >
-            <label
-              for="theme_tab"
-              class="userHighlightSel select"
+            <Select
+              :id="'userHighlightSel'+user.id"
+              v-model="userHighlightType"
+              class="userHighlightSel"
             >
-              <select
-                :id="'userHighlightSel'+user.id"
-                v-model="userHighlightType"
-                class="userHighlightSel"
-              >
-                <option value="disabled">{{ $t('user_card.highlight.disabled') }}</option>
-                <option value="solid">{{ $t('user_card.highlight.solid') }}</option>
-                <option value="striped">{{ $t('user_card.highlight.striped') }}</option>
-                <option value="side">{{ $t('user_card.highlight.side') }}</option>
-              </select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
-            </label>
+              <option value="disabled">
+                {{ $t('user_card.highlight.disabled') }}
+              </option>
+              <option value="solid">
+                {{ $t('user_card.highlight.solid') }}
+              </option>
+              <option value="striped">
+                {{ $t('user_card.highlight.striped') }}
+              </option>
+              <option value="side">
+                {{ $t('user_card.highlight.side') }}
+              </option>
+            </Select>
           </div>
         </div>
         <div
@@ -557,15 +556,11 @@
         flex: 1 0 auto;
       }
 
-      .userHighlightSel,
-      .userHighlightSel.select {
+      .userHighlightSel {
         padding-top: 0;
         padding-bottom: 0;
         flex: 1 0 auto;
       }
-      .userHighlightSel.select svg {
-        line-height: 22px;
-      }
 
       .userHighlightText {
         width: 70px;
@@ -574,9 +569,7 @@
 
       .userHighlightCl,
       .userHighlightText,
-      .userHighlightSel,
-      .userHighlightSel.select {
-        height: 22px;
+      .userHighlightSel {
         vertical-align: top;
         margin-right: .5em;
         margin-bottom: .25em;

src/components/user_list_popover/user_list_popover.vue

@@ -4,40 +4,39 @@
     placement="top"
     :offset="{ y: 5 }"
   >
-    <template slot="trigger">
+    <template v-slot:trigger>
       <slot />
     </template>
-    <div
-      slot="content"
-      class="user-list-popover"
-    >
-      <div v-if="users.length">
-        <div
-          v-for="(user) in usersCapped"
-          :key="user.id"
-          class="user-list-row"
-        >
-          <UserAvatar
-            :user="user"
-            class="avatar-small"
-            :compact="true"
-          />
-          <div class="user-list-names">
-            <!-- eslint-disable vue/no-v-html -->
-            <span v-html="user.name_html" />
-            <!-- eslint-enable vue/no-v-html -->
-            <span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
+    <template v-slot:content>
+      <div class="user-list-popover">
+        <template v-if="users.length">
+          <div
+            v-for="(user) in usersCapped"
+            :key="user.id"
+            class="user-list-row"
+          >
+            <UserAvatar
+              :user="user"
+              class="avatar-small"
+              :compact="true"
+            />
+            <div class="user-list-names">
+              <!-- eslint-disable vue/no-v-html -->
+              <span v-html="user.name_html" />
+              <!-- eslint-enable vue/no-v-html -->
+              <span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
+            </div>
           </div>
-        </div>
+        </template>
+        <template v-else>
+          <FAIcon
+            icon="circle-notch"
+            spin
+            size="3x"
+          />
+        </template>
       </div>
-      <div v-else>
-        <FAIcon
-          icon="circle-notch"
-          spin
-          size="3x"
-        />
-      </div>
-    </div>
+    </template>
   </Popover>
 </template>
 

src/components/user_profile/user_profile.vue

@@ -60,10 +60,7 @@
           :disabled="!user.friends_count"
         >
           <FriendList :user-id="userId">
-            <template
-              slot="item"
-              slot-scope="{item}"
-            >
+            <template v-slot:item="{item}">
               <FollowCard :user="item" />
             </template>
           </FriendList>
@@ -75,10 +72,7 @@
           :disabled="!user.followers_count"
         >
           <FollowerList :user-id="userId">
-            <template
-              slot="item"
-              slot-scope="{item}"
-            >
+            <template v-slot:item="{item}">
               <FollowCard
                 :user="item"
                 :no-follows-you="isUs"

src/components/user_reporting_modal/user_reporting_modal.vue

@@ -45,10 +45,7 @@
         </div>
         <div class="user-reporting-panel-right">
           <List :items="statuses">
-            <template
-              slot="item"
-              slot-scope="{item}"
-            >
+            <template v-slot:item="{item}">
               <div class="status-fadein user-reporting-panel-sitem">
                 <Status
                   :in-conversation="false"

src/i18n/de.json

@@ -9,7 +9,9 @@
     "scope_options": "Reichweitenoptionen",
     "text_limit": "Zeichenlimit",
     "title": "Funktionen",
-    "who_to_follow": "Wem folgen?"
+    "who_to_follow": "Wem folgen?",
+    "upload_limit": "Maximale Upload Größe",
+    "pleroma_chat_messages": "Pleroma Chat"
   },
   "finder": {
     "error_fetching_user": "Fehler beim Suchen des Benutzers",
@@ -28,7 +30,16 @@
     "disable": "Deaktivieren",
     "enable": "Aktivieren",
     "confirm": "Bestätigen",
-    "verify": "Verifizieren"
+    "verify": "Verifizieren",
+    "role": {
+      "moderator": "Moderator",
+      "admin": "Admin"
+    },
+    "peek": "Schau rein",
+    "close": "Schliessen",
+    "retry": "Versuche es erneut",
+    "error_retry": "Bitte versuche es erneut",
+    "loading": "Lade…"
   },
   "login": {
     "login": "Anmelden",
@@ -63,7 +74,11 @@
     "search": "Suche",
     "preferences": "Voreinstellungen",
     "administration": "Administration",
-    "who_to_follow": "Wem folgen"
+    "who_to_follow": "Wem folgen",
+    "chats": "Chats",
+    "timelines": "Zeitlinie",
+    "bookmarks": "Lesezeichen",
+    "home_timeline": "Heim Zeitlinie"
   },
   "notifications": {
     "broken_favorite": "Unbekannte Nachricht, suche danach…",
@@ -76,7 +91,8 @@
     "follow_request": "möchte dir folgen",
     "migrated_to": "migrierte zu",
     "reacted_with": "reagierte mit {0}",
-    "no_more_notifications": "Keine Benachrichtigungen mehr"
+    "no_more_notifications": "Keine Benachrichtigungen mehr",
+    "error": "Error beim laden von Neuigkeiten"
   },
   "post_status": {
     "new_status": "Neuen Status veröffentlichen",
@@ -105,7 +121,13 @@
       "public": "Dieser Beitrag wird für alle sichtbar sein",
       "private": "Dieser Beitrag wird nur für deine Follower sichtbar sein",
       "unlisted": "Dieser Beitrag wird weder in der öffentlichen Zeitleiste noch im gesamten bekannten Netzwerk sichtbar sein"
-    }
+    },
+    "media_description_error": "Medien konnten nicht neu geladen werden, versuche es erneut",
+    "empty_status_error": "Eine leere Nachricht ohne Anhänge kann nicht gesendet werden",
+    "preview_empty": "Leer",
+    "preview": "Vorschau",
+    "post": "Post",
+    "media_description": "Medienbeschreibung"
   },
   "registration": {
     "bio": "Bio",
@@ -124,9 +146,12 @@
       "password_confirmation_required": "darf nicht leer sein",
       "password_confirmation_match": "sollte mit dem Passwort identisch sein"
     },
-    "bio_placeholder": "z.B.\nHallo, ich bin Lain.\nIch bin ein Anime Mödchen aus dem vorstädtischen Japan. Du kennst mich vielleicht vom Wired.",
+    "bio_placeholder": "z.B.\nHallo, ich bin Lain.\nIch bin ein super süßes blushy-crushy Anime Girl aus dem vorstädtischen Japan. Du kennst mich vielleicht von Wired.",
     "fullname_placeholder": "z.B. Lain Iwakura",
-    "username_placeholder": "z.B. lain"
+    "username_placeholder": "z.B. lain",
+    "register": "Registrierung",
+    "reason_placeholder": "Diese Instanz bestätigt Registrierungen manuell. \nLass die Admins wissen warum du dich registrieren willst.",
+    "reason": "Grund zur Anmeldung"
   },
   "settings": {
     "attachmentRadius": "Anhänge",
@@ -136,7 +161,7 @@
     "avatarRadius": "Avatare",
     "background": "Hintergrund",
     "bio": "Bio",
-    "btnRadius": "Buttons",
+    "btnRadius": "Knöpfe",
     "cBlue": "Blau (Antworten, folgt dir)",
     "cGreen": "Grün (Retweet)",
     "cOrange": "Orange (Favorisieren)",
@@ -201,7 +226,7 @@
     "name_bio": "Name & Bio",
     "new_password": "Neues Passwort",
     "notification_visibility": "Benachrichtigungstypen, die angezeigt werden sollen",
-    "notification_visibility_follows": "Follows",
+    "notification_visibility_follows": "Folgt",
     "notification_visibility_likes": "Favoriten",
     "notification_visibility_mentions": "Erwähnungen",
     "notification_visibility_repeats": "Wiederholungen",
@@ -268,7 +293,24 @@
         "save_load_hint": "Die \"Beibehalten\"-Optionen behalten die aktuell eingestellten Optionen beim Auswählen oder Laden von Designs bei, sie speichern diese Optionen auch beim Exportieren eines Designs. Wenn alle Kontrollkästchen deaktiviert sind, wird beim Exportieren des Designs alles gespeichert.",
         "reset": "Zurücksetzen",
         "clear_all": "Alles leeren",
-        "clear_opacity": "Deckkraft leeren"
+        "clear_opacity": "Deckkraft leeren",
+        "help": {
+          "fe_downgraded": "PleromaFE Version wurde zurückgerollt.",
+          "older_version_imported": "Die Datei, die du importiert hast, wurde für eine ältere Version vom FE gemacht.",
+          "future_version_imported": "Die Datei, die du importiert hast, wurde für eine neuere Version vom FE gemacht.",
+          "v2_imported": "Die Datei, die du importiert hast, war für eine ältere Version des FEs. Wir versuchen, die Kompatibilität zu maximieren, aber es könnte trotzdem Inkonsistenz auftreten.",
+          "upgraded_from_v2": "PleromaFE wurde modernisiert, dein Theme könnte etwas anders aussehen als vorher.",
+          "snapshot_source_mismatch": "Versionskonflikt: vermutlich wurde das FE zurückgesetzt und dann ein Update durchgeführt. Falls das Theme mit einer alten FE-Version erstellt wurde, sollte vermutlich die alte Version verwendet werden, andernfalls die neue.",
+          "migration_napshot_gone": "Snapshot konnte nicht gefunden werden, die Anzeige könnte daher teilweise möglicherweise nicht den Erwartungen entsprechen.",
+          "migration_snapshot_ok": "Vorsichtshalber wurde ein Snapshot des Themes geladen. Alternativ kann versucht werden, die Daten des Themes selbst zu laden.",
+          "snapshot_present": "Snapshot des Themes wurde geladen, alle entsprechenden Einstellungen wurden überschrieben. Alternativ können die tatsächlichen Daten des Themes geladen werden.",
+          "fe_upgraded": "Mit dem Upgrade wurde auch eine neue Version von Pleromas Theme Engine installiert.",
+          "snapshot_missing": "Die Datei enthält keinen Theme-Snapshot, die Darstellung kann daher möglicherweise abweichend sein."
+        },
+        "use_source": "Neue Version",
+        "use_snapshot": "Alte Version",
+        "keep_as_is": "Lass es so, wie es ist",
+        "load_theme": "Lade Theme"
       },
       "common": {
         "color": "Farbe",
@@ -303,7 +345,27 @@
         "borders": "Rahmen",
         "buttons": "Schaltflächen",
         "inputs": "Eingabefelder",
-        "faint_text": "Verblasster Text"
+        "faint_text": "Verblasster Text",
+        "disabled": "aus",
+        "selectedMenu": "Ausgewähltes Menüelement",
+        "selectedPost": "Ausgewählter Post",
+        "pressed": "Gedrückt",
+        "highlight": "Hervorgehobene Elemente",
+        "icons": "Icons",
+        "poll": "Umfragegraph",
+        "post": "Posts/Benutzerinfo",
+        "alert_neutral": "Neutral",
+        "alert_warning": "Warnung",
+        "wallpaper": "Hintergrund",
+        "popover": "Kurzinfo, Menüs, Popover-Fenster",
+        "chat": {
+          "border": "Ränder",
+          "outgoing": "Ausgehend",
+          "incoming": "Eingehend"
+        },
+        "toggled": "Umgeschaltet",
+        "underlay": "Halbtransparenter Hintergrund",
+        "tabs": "Reiter"
       },
       "radii": {
         "_tab_label": "Abrundungen"
@@ -325,7 +387,7 @@
           "inset_classic": "Eingesetzte Schatten werden mit {0} verwendet"
         },
         "components": {
-          "panel": "Panel",
+          "panel": "Bedienfeld",
           "panelHeader": "Panel-Kopf",
           "topBar": "Obere Leiste",
           "avatar": "Benutzer-Avatar (in der Profilansicht)",
@@ -335,8 +397,9 @@
           "buttonHover": "Schaltfläche (hover)",
           "buttonPressed": "Schaltfläche (gedrückt)",
           "buttonPressedHover": "Schaltfläche (gedrückt+hover)",
-          "input": "Input field"
-        }
+          "input": "Eingabefeld"
+        },
+        "hintV3": "Um die Farbe der Schatten zu bestimmen, kann auch die Auszeichnung {0} verwendet werden, um einen anderen Fabbereich zu nutzen."
       },
       "fonts": {
         "_tab_label": "Schriften",
@@ -384,11 +447,14 @@
       },
       "verify": {
         "desc": "Um 2FA zu aktivieren, gib den Code von deiner 2FA-App ein:"
-      }
+      },
+      "confirm_and_enable": "Bestätige und aktiviere OTP",
+      "setup_otp": "Richte OTP ein",
+      "wait_pre_setup_otp": "OTP voreinstellen"
     },
     "enter_current_password_to_confirm": "Gib dein aktuelles Passwort ein, um deine Identität zu bestätigen",
     "security": "Sicherheit",
-    "allow_following_move": "Erlaube automatisches Folgen, sobald ein gefolgter Nutzer umzieht",
+    "allow_following_move": "Erlaube auto-follow, wenn von dir verfolgte Accounts umziehen",
     "blocks_imported": "Blocks importiert! Die Verarbeitung wird einen Moment brauchen.",
     "block_import_error": "Fehler beim Importieren der Blocks",
     "block_import": "Block Import",
@@ -400,7 +466,79 @@
     "change_email_error": "Es trat ein Problem auf beim Versuch, deine Email Adresse zu ändern.",
     "change_email": "Ändere Email",
     "import_blocks_from_a_csv_file": "Importiere Blocks von einer CSV Datei",
-    "accent": "Akzent"
+    "accent": "Akzent",
+    "no_blocks": "Keine Blocks",
+    "notification_visibility_emoji_reactions": "Reaktionen",
+    "new_email": "Neue Email",
+    "profile_fields": {
+      "value": "Inhalt",
+      "name": "Label",
+      "add_field": "Feld hinzufügen",
+      "label": "Profil Metadaten"
+    },
+    "bot": "Dies ist ein Bot Account",
+    "blocks_tab": "Blocks",
+    "save": "Änderungen speichern",
+    "show_moderator_badge": "Zeige Moderator-Abzeichen auf meinem Profil",
+    "show_admin_badge": "Zeige Admin-Abzeichen auf meinem Profil",
+    "no_mutes": "Keine Stummschaltungen",
+    "reset_profile_background": "Profilhintergrund zurücksetzen",
+    "reset_avatar": "Avatar zurücksetzten",
+    "search_user_to_mute": "Suche, wen du stummschalten willst",
+    "search_user_to_block": "Suche, wen du blocken willst",
+    "reply_visibility_self_short": "Zeige antworten nur einem selbst",
+    "reply_visibility_following_short": "Zeige Antworten an meine Follower",
+    "notification_visibility_moves": "Nutzer zieht um",
+    "file_export_import": {
+      "errors": {
+        "file_too_new": "Inkompatible Major Version: {fileMajor}, dieses PleromaFE Version (settings ver {feMajor}) ist zu alt",
+        "invalid_file": "Die ausgewählte Datei kann nicht zur Wiederherstellung verwendet werden. Keine Änderungen wurden umgesetzt.",
+        "file_too_old": "Inkompatible Major Version: {fileMajor}, die Dateiversion ist zu alt und wird nicht mehr unterstützt (min. set. ver. {feMajor})",
+        "file_slightly_new": "Geringfügige Abweichung in der Dateiversion, einige Einstellungen konnten möglicherweise nicht geladen werden"
+      },
+      "restore_settings": "Einstellungen von einer Datei wiederherstellen",
+      "backup_settings_theme": "Einstellungen und Theme in eine Datei speichern",
+      "backup_settings": "Einstellungen in Datei speichern",
+      "backup_restore": "Einstellungen backuppen"
+    },
+    "hide_wallpaper": "Verstecke Instanzhintergrundbild",
+    "hide_all_muted_posts": "Verstecke stummgeschaltete Posts",
+    "hide_media_previews": "Verstecke Vorschau von Medien",
+    "word_filter": "Wort Filter",
+    "mutes_and_blocks": "Stummgeschaltete und Geblockte",
+    "chatMessageRadius": "Chat Nachricht",
+    "import_mutes_from_a_csv_file": "Importiere stummgeschaltete User von einer cvs Datei",
+    "mutes_imported": "Stummgeschaltete User wurden importiert! Verarbeitung dauert eine Weile.",
+    "mute_import_error": "Fehler beim Importieren von stummgeschalteten Usern",
+    "mute_import": "Stumm geschaltete User importieren",
+    "mute_export_button": "Stumm geschaltete User in eine cvs Datei exportieren",
+    "mute_export": "Stumm geschaltete User exportieren",
+    "setting_changed": "Einstellungen weichen von den Standardeinstellungen ab",
+    "notification_blocks": "Einen User zu blocken stoppt alle Benachrichtigungen von ihm und deabonniert ihn.",
+    "version": {
+      "frontend_version": "Frontend Version",
+      "backend_version": "Backend Version",
+      "title": "Version"
+    },
+    "notification_mutes": "Um nicht mehr die Benachrichtigungen von einem bestimmten User zu bekommen, verwende eine Stummschaltung.",
+    "user_mutes": "User",
+    "notification_setting_privacy": "Privatsphäre",
+    "notification_setting_filters": "Filter",
+    "greentext": "Meme Pfeile",
+    "fun": "Spaß",
+    "upload_a_photo": "Lade ein Foto hoch",
+    "type_domains_to_mute": "Tippe die Domains ein, die du stummschalten willst",
+    "useStreamingApiWarning": "(Nicht empfohlen, experimentell, bekannt dafür, Posts zu überspringen)",
+    "useStreamingApi": "Empfange Posts und Benachrichtigungen in Echtzeit",
+    "more_settings": "Weitere Einstellungen",
+    "notification_setting_hide_notification_contents": "Absender und Inhalte von Push-Nachrichten verbergen",
+    "notification_setting_block_from_strangers": "Benachrichtigungen von Nutzern blockieren, denen Du nicht folgst",
+    "virtual_scrolling": "Rendering der Timeline optimieren",
+    "sensitive_by_default": "Alle Beiträge standardmäßig als heikel markieren",
+    "reset_background_confirm": "Hintergrund wirklich zurücksetzen?",
+    "reset_banner_confirm": "Banner wirklich zurücksetzen?",
+    "reset_avatar_confirm": "Avatar wirklich zurücksetzen?",
+    "reset_profile_banner": "Profilbanner zurücksetzen"
   },
   "timeline": {
     "collapse": "Einklappen",
@@ -410,7 +548,13 @@
     "no_retweet_hint": "Der Beitrag ist als nur-für-Follower oder als Direktnachricht markiert und kann nicht wiederholt werden",
     "repeated": "wiederholte",
     "show_new": "Zeige Neuere",
-    "up_to_date": "Aktuell"
+    "up_to_date": "Aktuell",
+    "no_statuses": "Keine Beiträge",
+    "no_more_statuses": "Keine weiteren Beiträge",
+    "reload": "Neu laden",
+    "error": "Fehler beim Lesen der Timeline: {0}",
+    "socket_broke": "Netzverbindung verloren: CloseEvent code {0}",
+    "socket_reconnected": "Netzverbindung hergestellt"
   },
   "user_card": {
     "approve": "Genehmigen",
@@ -433,11 +577,52 @@
     "remote_follow": "Folgen",
     "statuses": "Beiträge",
     "admin_menu": {
-      "sandbox": "Erzwinge Beiträge nur für Follower sichtbar zu sein"
+      "sandbox": "Erzwinge Beiträge nur für Follower sichtbar zu sein",
+      "delete_user_confirmation": "Achtung! Diese Entscheidung kann nicht rückgängig gemacht werden! Trotzdem durchführen?",
+      "grant_admin": "Administratorprivilegien gewähren",
+      "delete_user": "Nutzer löschen",
+      "strip_media": "Medien von Beiträgen entfernen",
+      "force_nsfw": "Alle Beiträge als pervers markieren",
+      "activate_account": "Aktiviere Account",
+      "revoke_moderator": "Administratorstatuß wiederrufen",
+      "grant_moderator": "Moderatorstatuß gewähren",
+      "revoke_admin": "Administratorstatuß wiederrufen",
+      "moderation": "Moderation",
+      "delete_account": "Konto löschen",
+      "deactivate_account": "Konto deaktivieren",
+      "quarantine": "Beiträge des Nutzers können nur auf der eigenen Instanz gesehen werden",
+      "disable_any_subscription": "Alle Folgeanfragen für diesen Nutzer grundsätzlich ablehnen",
+      "disable_remote_subscription": "Nutzer anderer Instanzen vom Folgen dieses Nutzers ausschließen",
+      "force_unlisted": "Beiträge von der öffentlichen Zeitleiste ausschliessen"
+    },
+    "block_progress": "Blocken…",
+    "unblock_progress": "Entblocken…",
+    "unblock": "Entblocken",
+    "report": "Melden",
+    "mention": "Erwähnungen",
+    "media": "Medien",
+    "hidden": "Versteckt",
+    "favorites": "Favoriten",
+    "bot": "Bot",
+    "show_repeats": "Geteilte Beiträge anzeigen",
+    "hide_repeats": "Geteilte Beiträge nicht anzeigen",
+    "mute_progress": "Stummschalten erfolgt…",
+    "unmute_progress": "Aufhebung erfolgt…",
+    "unmute": "Stummschalten aufheben",
+    "unsubscribe": "Entfolgen",
+    "subscribe": "Folgen",
+    "message": "Nachricht",
+    "highlight": {
+      "side": "Randmarkierung",
+      "striped": "gestreifter Hintergrund",
+      "solid": "kein Muster verwenden",
+      "disabled": "Nicht hervorheben"
     }
   },
   "user_profile": {
-    "timeline_title": "Beiträge"
+    "timeline_title": "Beiträge",
+    "profile_loading_error": "Beim Laden dieses Profils ist ein Fehler aufgetreten.",
+    "profile_does_not_exist": "Profil nicht vorhanden."
   },
   "who_to_follow": {
     "more": "Mehr",
@@ -448,13 +633,18 @@
     "repeat": "Wiederholen",
     "reply": "Antworten",
     "favorite": "Favorisieren",
-    "user_settings": "Benutzereinstellungen"
+    "user_settings": "Benutzereinstellungen",
+    "bookmark": "Lesezeichen",
+    "reject_follow_request": "Folgeanfrage ablehnen",
+    "accept_follow_request": "Folgeanfrage annehmen",
+    "add_reaction": "Emoji-Reaktion hinzufügen"
   },
   "upload": {
     "error": {
       "base": "Hochladen fehlgeschlagen.",
       "file_too_big": "Datei ist zu groß [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
-      "default": "Bitte versuche es später erneut"
+      "default": "Bitte versuche es später erneut",
+      "message": "Hochladen fehlgeschlagen"
     },
     "file_size_units": {
       "B": "B",
@@ -478,7 +668,7 @@
     "placeholder": "Dein Benutzername oder die zugehörige E-Mail-Adresse",
     "check_email": "Im E-Mail-Posteingang des angebenen Kontos müsste sich jetzt (oder zumindest in Kürze) die E-Mail mit dem Link zum Passwortzurücksetzen befinden.",
     "return_home": "Zurück zur Heimseite",
-    "too_many_requests": "Kurze Pause. Zu viele Versuche. Bitte, später nochmal probieren.",
+    "too_many_requests": "Kurze Pause. Zu viele Versuche. Bitte später nochmal probieren.",
     "password_reset_disabled": "Passwortzurücksetzen deaktiviert. Bitte Administrator kontaktieren.",
     "password_reset_required": "Passwortzurücksetzen erforderlich.",
     "password_reset_required_but_mailer_is_disabled": "Passwortzurücksetzen wäre erforderlich, ist aber deaktiviert. Bitte Administrator kontaktieren."
@@ -486,21 +676,21 @@
   "about": {
     "mrf": {
       "federation": "Föderation",
-      "mrf_policies": "Aktivierte MRF Richtlinien",
+      "mrf_policies": "Aktive MRF-Richtlinien",
       "simple": {
         "simple_policies": "Instanzspezifische Richtlinien",
         "accept": "Akzeptieren",
         "reject": "Ablehnen",
         "reject_desc": "Diese Instanz akzeptiert keine Nachrichten der folgenden Instanzen:",
         "quarantine": "Quarantäne",
-        "ftl_removal": "Von der Zeitleiste \"Das gesamte bekannte Netzwerk\" entfernen",
+        "ftl_removal": "Von der Zeitleiste \"Das bekannte Netzwerk\" entfernen",
         "media_removal": "Medienentfernung",
         "media_removal_desc": "Diese Instanz entfernt Medien von den Beiträgen der folgenden Instanzen:",
         "media_nsfw": "Erzwingen Medien als heikel zu makieren",
         "media_nsfw_desc": "Diese Instanz makiert die Medien in Beiträgen der folgenden Instanzen als heikel:",
         "accept_desc": "Diese Instanz akzeptiert nur Nachrichten von den folgenden Instanzen:",
         "quarantine_desc": "Diese Instanz sendet nur öffentliche Beiträge zu den folgenden Instanzen:",
-        "ftl_removal_desc": "Dieser Instanz entfernt folgende Instanzen von der \"Das gesamte bekannte Netzwerk\" Zeitleiste:"
+        "ftl_removal_desc": "Dieser Instanz entfernt folgende Instanzen von der \"Das bekannte Netzwerk\" Zeitleiste:"
       },
       "keyword": {
         "keyword_policies": "Keyword Richtlinien",
@@ -509,7 +699,7 @@
         "is_replaced_by": "→",
         "ftl_removal": "Von der Zeitleiste \"Das gesamte bekannte Netzwerk\" entfernen"
       },
-      "mrf_policies_desc": "MRF Richtlinien manipulieren das Föderationsverhalten dieser Instanz. Die folgenden Richtlinien sind aktiv:"
+      "mrf_policies_desc": "MRF Richtlinien beeinflussen das Föderationsverhalten dieser Instanz. Die folgenden Richtlinien sind aktiv:"
     },
     "staff": "Mitarbeiter"
   },
@@ -550,7 +740,9 @@
     "expiry": "Alter der Umfrage",
     "expired": "Die Umfrage endete vor {0}",
     "not_enough_options": "Zu wenig einzigartige Auswahlmöglichkeiten in der Umfrage",
-    "expires_in": "Die Umfrage endet in {0}"
+    "expires_in": "Die Umfrage endet in {0}",
+    "votes_count": "{count} Stimme | {count} Stimmen",
+    "people_voted_count": "{count} Person hat gewählt | {count} Personen haben gewählt"
   },
   "emoji": {
     "stickers": "Sticker",
@@ -560,12 +752,12 @@
     "keep_open": "Auswahlfenster offen halten",
     "add_emoji": "Emoji einfügen",
     "load_all": "Lade alle {emojiAmount} Emoji",
-    "load_all_hint": "Erfolgreich erste {saneAmount} Emoji geladen, alle Emojis zu laden würde Leistungsprobleme hervorrufen.",
+    "load_all_hint": "Erste {saneAmount} Emoji geladen, alle Emoji zu laden könnte Leistungsprobleme verursachen.",
     "unicode": "Unicode Emoji"
   },
   "interactions": {
     "load_older": "Lade ältere Interaktionen",
-    "follows": "Neue Follows",
+    "follows": "Neue Follower",
     "favs_repeats": "Wiederholungen und Favoriten",
     "moves": "Benutzer migriert zu"
   },
@@ -573,7 +765,106 @@
     "select_all": "Wähle alle"
   },
   "remote_user_resolver": {
-    "searching_for": "Suche nach",
-    "error": "Nicht gefunden."
+    "searching_for": "Suche für",
+    "error": "Nicht gefunden.",
+    "remote_user_resolver": "Resolver für Nutzer auf anderen Instanzen"
+  },
+  "errors": {
+    "storage_unavailable": "Pleroma konnte nicht auf den Browser Speicher zugreifen. Deine Anmeldung und deine Einstellungen werden nicht gespeichert. Es kann unvorhersehbare Probleme geben. Versuche ansonsten Cookies zu erlauben."
+  },
+  "shoutbox": {
+    "title": "Shoutbox"
+  },
+  "chats": {
+    "error_sending_message": "Beim Senden der Nachricht ist ein Fehler aufgetreten.",
+    "error_loading_chat": "Beim Laden des Chats ist ein Fehler aufgetreten.",
+    "delete_confirm": "Soll diese Nachricht wirklich gelöscht werden?",
+    "empty_message_error": "Die Nachricht darf nicht leer sein.",
+    "delete": "Löschen",
+    "message_user": "Nachricht an {nickname} senden",
+    "empty_chat_list_placeholder": "Es sind noch keine Chats vorhanden. Jetzt einen Chat starten!",
+    "more": "Mehr",
+    "you": "Du:",
+    "new": "Neuer Chat",
+    "chats": "Chats"
+  },
+  "user_reporting": {
+    "generic_error": "Beim Verarbeiten der Anfrage ist ein Fehler aufgetreten.",
+    "submit": "Senden",
+    "forward_to": "Weiterleiten an {0}",
+    "forward_description": "Das fragliche Konto befindet sich auf einem anderen Server. Soll eine Kopie der Beschwerde an den dortigen Verantwortlichen gesendet werden?",
+    "additional_comments": "Weitere Anmerkungen",
+    "add_comment_description": "Die Beschwerde wird an die Moderatoren dieser Instanz gesendet. Die Gründe für die Beschwerde können hier angegeben werden:",
+    "title": "{0} melddn"
+  },
+  "status": {
+    "copy_link": "Beitragslink kopieren",
+    "status_unavailable": "Beitrag nicht verfügbar",
+    "unmute_conversation": "Konversation nicht mehr stummstellen",
+    "mute_conversation": "Konversation stummstellen",
+    "replies_list": "Antworten:",
+    "reply_to": "Antworten auf",
+    "delete_confirm": "Möchtest du diese Beitrag wirklich löschen?",
+    "pinned": "Angeheftet",
+    "unpin": "Nicht mehr an Profil anheften",
+    "pin": "An Profil anheften",
+    "delete": "Lösche Beitrag",
+    "favorites": "Favoriten",
+    "expand": "Ausklappen",
+    "nsfw": "NSFW",
+    "status_deleted": "Dieser Beitrag wurde gelöscht",
+    "hide_content": "Inhalt verbergen",
+    "show_content": "Inhalt anzeigen",
+    "hide_full_subject": "Vollständiges Thema verbergen",
+    "show_full_subject": "Vollständiges Thema anzeigen",
+    "thread_muted": "Thread stummgeschaltet",
+    "external_source": "Externe Quelle",
+    "unbookmark": "Lesezeichen entfernen",
+    "bookmark": "Lesezeichen setzen",
+    "repeats": "Geteilte Beiträge",
+    "thread_muted_and_words": ", enthält folgende Wörter:"
+  },
+  "time": {
+    "seconds_short": "{0}s",
+    "second_short": "{0}s",
+    "seconds": "{0} Sekunden",
+    "second": "{0} Sekunde",
+    "now_short": "jetzt",
+    "years_short": "{0}Jhr",
+    "year_short": "{0}Jhr",
+    "years": "{0} Jahren",
+    "year": "{0} Jahr",
+    "weeks_short": "{0}W",
+    "week_short": "{0}W",
+    "weeks": "{0} Wochen",
+    "week": "{0} Woche",
+    "now": "gerade eben",
+    "months_short": "{0}Mo",
+    "month_short": "{0}Mo",
+    "months": "{0} Monaten",
+    "month": "{0} Monat",
+    "minutes_short": "{0}Min",
+    "minute_short": "{0}Min",
+    "minutes": "{0} Minuten",
+    "minute": "{0} Minute",
+    "in_past": "vor {0}",
+    "in_future": "in {0}",
+    "hours_short": "{0}Std",
+    "hour_short": "{0}Std",
+    "hours": "{0} Stunden",
+    "hour": "{0} Stunde",
+    "days_short": "{0}T",
+    "day_short": "{0}T",
+    "days": "{0} Tage",
+    "day": "{0} Tag"
+  },
+  "display_date": {
+    "today": "Heute"
+  },
+  "file_type": {
+    "file": "Datei",
+    "image": "Bild",
+    "video": "Video",
+    "audio": "Audio"
   }
 }

src/i18n/en.json

@@ -79,7 +79,10 @@
     "role": {
       "admin": "Admin",
       "moderator": "Moderator"
-    }
+    },
+    "flash_content": "Click to show Flash content using Ruffle (Experimental, may not work).",
+    "flash_security": "Note that this can be potentially dangerous since Flash content is still arbitrary code.",
+    "flash_fail": "Failed to load flash content, see console for details."
   },
   "image_cropper": {
     "crop_picture": "Crop picture",
@@ -347,6 +350,8 @@
     "hide_all_muted_posts": "Hide muted posts",
     "max_thumbnails": "Maximum amount of thumbnails per post",
     "hide_isp": "Hide instance-specific panel",
+    "hide_shoutbox": "Hide instance shoutbox",
+    "right_sidebar": "Show sidebar on the right side",
     "hide_wallpaper": "Hide instance wallpaper",
     "preload_images": "Preload images",
     "use_one_click_nsfw": "Open NSFW attachments with just one click",

src/i18n/es.json

@@ -34,7 +34,7 @@
     "enable": "Habilitar",
     "confirm": "Confirmar",
     "verify": "Verificar",
-    "peek": "Ojear",
+    "peek": "Previsualizar",
     "close": "Cerrar",
     "dismiss": "Descartar",
     "retry": "Inténtalo de nuevo",
@@ -582,7 +582,16 @@
     "reply_visibility_following_short": "Mostrar las réplicas a mis seguidores",
     "hide_media_previews": "Ocultar la vista previa multimedia",
     "word_filter": "Filtro de palabras",
-    "save": "Guardar los cambios"
+    "save": "Guardar los cambios",
+    "file_export_import": {
+      "errors": {
+        "invalid_file": "El archivo seleccionado no es válido como copia de seguridad de Pleroma. No se han realizado cambios."
+      },
+      "restore_settings": "Restaurar ajustes desde archivo",
+      "backup_settings_theme": "Copia de seguridad de la configuración y tema a archivo",
+      "backup_settings": "Copia de seguridad de la configuración a archivo",
+      "backup_restore": "Copia de seguridad de la configuración"
+    }
   },
   "time": {
     "day": "{0} día",

src/i18n/it.json

@@ -341,14 +341,14 @@
     },
     "enable_web_push_notifications": "Abilita notifiche web push",
     "fun": "Divertimento",
-    "notification_mutes": "Per non ricevere notifiche da uno specifico utente, zittiscilo.",
+    "notification_mutes": "Per non ricevere notifiche da uno specifico utente, silenzialo.",
     "notification_setting_privacy_option": "Nascondi mittente e contenuti delle notifiche push",
     "notification_setting_privacy": "Privacy",
     "notification_setting_filters": "Filtri",
     "notifications": "Notifiche",
     "greentext": "Frecce da meme",
     "upload_a_photo": "Carica un'immagine",
-    "type_domains_to_mute": "Cerca domini da zittire",
+    "type_domains_to_mute": "Cerca domini da silenziare",
     "theme_help_v2_2": "Le icone vicino alcuni elementi sono indicatori del contrasto fra testo e sfondo, passaci sopra col puntatore per ulteriori informazioni. Se usani trasparenze, questi indicatori mostrano il peggior caso possibile.",
     "theme_help_v2_1": "Puoi anche forzare colore ed opacità di alcuni elementi selezionando la casella. Usa il pulsante \"Azzera\" per azzerare tutte le forzature.",
     "useStreamingApiWarning": "(Sconsigliato, sperimentale, può saltare messaggi)",
@@ -362,7 +362,7 @@
     "subject_input_always_show": "Mostra sempre il campo Oggetto",
     "minimal_scopes_mode": "Riduci opzioni di visibilità",
     "scope_copy": "Risposte ereditano la visibilità (messaggi privati lo fanno sempre)",
-    "search_user_to_mute": "Cerca utente da zittire",
+    "search_user_to_mute": "Cerca utente da silenziare",
     "search_user_to_block": "Cerca utente da bloccare",
     "autohide_floating_post_button": "Nascondi automaticamente il pulsante di composizione (mobile)",
     "show_moderator_badge": "Mostra l'insegna di moderatore sulla mia pagina",
@@ -371,14 +371,14 @@
     "hide_follows_count_description": "Non mostrare quanti utenti seguo",
     "hide_followers_description": "Non mostrare i miei seguaci",
     "hide_follows_description": "Non mostrare chi seguo",
-    "no_mutes": "Nessun utente zittito",
+    "no_mutes": "Nessun utente silenziato",
     "no_blocks": "Nessun utente bloccato",
     "notification_visibility_emoji_reactions": "Reazioni",
     "notification_visibility_moves": "Migrazioni utenti",
     "new_email": "Nuova email",
     "use_contain_fit": "Non ritagliare le anteprime degli allegati",
     "play_videos_in_modal": "Riproduci video in un riquadro a sbalzo",
-    "mutes_tab": "Zittiti",
+    "mutes_tab": "Silenziati",
     "interface": "Interfaccia",
     "instance_default_simple": "(predefinito)",
     "checkboxRadius": "Caselle di selezione",
@@ -431,11 +431,23 @@
     "hide_all_muted_posts": "Nascondi messaggi silenziati",
     "hide_media_previews": "Nascondi anteprime",
     "word_filter": "Parole filtrate",
-    "save": "Salva modifiche"
+    "save": "Salva modifiche",
+    "file_export_import": {
+      "errors": {
+        "file_slightly_new": "Versione minore diversa, qualcosa potrebbe non combaciare.",
+        "file_too_old": "Versione troppo vecchia: {fileMajor}. Questa versione dell'interfaccia ({feMajor}) non supporta il file.",
+        "file_too_new": "Versione troppo recente: {fileMajor}. Questa versione dell'interfaccia ({feMajor}) non supporta il file.",
+        "invalid_file": "Il file selezionato non è un archivio supportato. Nessuna modifica è stata apportata."
+      },
+      "restore_settings": "Carica impostazioni sul server",
+      "backup_settings_theme": "Archivia impostazioni e tema localmente",
+      "backup_settings": "Archivia impostazioni localmente",
+      "backup_restore": "Archiviazione impostazioni"
+    }
   },
   "timeline": {
     "error_fetching": "Errore nell'aggiornamento",
-    "load_older": "Carica messaggi più vecchi",
+    "load_older": "Carica messaggi precedenti",
     "show_new": "Mostra nuovi",
     "up_to_date": "Aggiornato",
     "collapse": "Ripiega",
@@ -647,8 +659,8 @@
     "staff": "Responsabili"
   },
   "domain_mute_card": {
-    "mute": "Zittisci",
-    "mute_progress": "Zittisco…",
+    "mute": "Silenzia",
+    "mute_progress": "Silenzio…",
     "unmute": "Ascolta",
     "unmute_progress": "Procedo…"
   },
@@ -739,7 +751,7 @@
     "bookmark": "Aggiungi segnalibro",
     "status_deleted": "Questo messagio è stato cancellato",
     "nsfw": "DISDICEVOLE",
-    "external_source": "Vai al sito",
+    "external_source": "Vai all'origine",
     "expand": "Espandi"
   },
   "time": {
@@ -747,8 +759,8 @@
     "year_short": "{0} a",
     "years": "{0} anni",
     "year": "{0} anno",
-    "weeks_short": "{0} set",
-    "week_short": "{0} set",
+    "weeks_short": "{0} stm",
+    "week_short": "{0} stm",
     "seconds_short": "{0} sec",
     "second_short": "{0} sec",
     "weeks": "{0} settimane",

src/i18n/ja_pedantic.json

@@ -86,7 +86,7 @@
     "mentions": "通知",
     "interactions": "インタラクション",
     "dms": "ダイレクトメッセージ",
-    "public_tl": "パブリックタイムライン",
+    "public_tl": "公開タイムライン",
     "timeline": "タイムライン",
     "twkn": "すべてのネットワーク",
     "user_search": "ユーザーを探す",
@@ -96,7 +96,8 @@
     "administration": "管理",
     "bookmarks": "ブックマーク",
     "timelines": "タイムライン",
-    "chats": "チャット"
+    "chats": "チャット",
+    "home_timeline": "ホームタイムライン"
   },
   "notifications": {
     "broken_favorite": "ステータスが見つかりません。探しています…",
@@ -173,14 +174,15 @@
     "scope": {
       "direct": "ダイレクト: メンションされたユーザーのみに届きます",
       "private": "フォロワー限定: フォロワーのみに届きます",
-      "public": "パブリック: パブリックタイムラインに届きます",
-      "unlisted": "アンリステッド: パブリックタイムラインに届きません"
+      "public": "パブリック: 公開タイムラインに届きます",
+      "unlisted": "アンリステッド: 公開タイムラインに届きません"
     },
     "media_description_error": "メディアのアップロードに失敗しました。もう一度お試しください",
     "empty_status_error": "投稿内容を入力してください",
     "preview_empty": "何もありません",
     "preview": "プレビュー",
-    "media_description": "メディアの説明"
+    "media_description": "メディアの説明",
+    "post": "投稿"
   },
   "registration": {
     "bio": "プロフィール",
@@ -203,7 +205,8 @@
       "password_confirmation_match": "パスワードが違います"
     },
     "reason_placeholder": "このインスタンスは、新規登録を手動で受け付けています。\n登録したい理由を、インスタンスの管理者に教えてください。",
-    "reason": "登録するための目的"
+    "reason": "登録するための目的",
+    "register": "登録"
   },
   "selectable_list": {
     "select_all": "すべて選択"
@@ -323,8 +326,8 @@
     "hide_followers_description": "フォロワーを見せない",
     "hide_follows_count_description": "フォローしている人の数を見せない",
     "hide_followers_count_description": "フォロワーの数を見せない",
-    "show_admin_badge": "管理者のバッジを見せる",
-    "show_moderator_badge": "モデレーターのバッジを見せる",
+    "show_admin_badge": "\"管理者\"のバッジを見せる",
+    "show_moderator_badge": "\"モデレーター\"のバッジを見せる",
     "nsfw_clickthrough": "NSFWなファイルを隠す",
     "oauth_tokens": "OAuthトークン",
     "token": "トークン",
@@ -334,8 +337,8 @@
     "panelRadius": "パネル",
     "pause_on_unfocused": "タブにフォーカスがないときストリーミングを止める",
     "presets": "プリセット",
-    "profile_background": "プロフィールのバックグラウンド",
-    "profile_banner": "プロフィールバナー",
+    "profile_background": "プロフィールの背景",
+    "profile_banner": "プロフィールのバナー",
     "profile_tab": "プロフィール",
     "radii_help": "インターフェースの丸さを設定する",
     "replies_in_timeline": "タイムラインのリプライ",
@@ -581,7 +584,17 @@
     "reply_visibility_following_short": "フォローしている人に宛てられたリプライを見る",
     "hide_all_muted_posts": "ミュートした投稿を隠す",
     "hide_media_previews": "メディアのプレビューを隠す",
-    "word_filter": "単語フィルタ"
+    "word_filter": "単語フィルタ",
+    "file_export_import": {
+      "errors": {
+        "invalid_file": "これはPleromaの設定をバックアップしたファイルではありません。"
+      },
+      "restore_settings": "設定をファイルから復元する",
+      "backup_settings_theme": "テーマを含む設定をファイルにバックアップする",
+      "backup_settings": "設定をファイルにバックアップする",
+      "backup_restore": "設定をバックアップ"
+    },
+    "save": "変更を保存"
   },
   "time": {
     "day": "{0}日",
@@ -797,8 +810,8 @@
         "media_nsfw": "メディアを閲覧注意に設定",
         "media_removal_desc": "このインスタンスでは、以下のインスタンスからの投稿に対して、メディアを除去します:",
         "media_removal": "メディア除去",
-        "ftl_removal": "「接続しているすべてのネットワーク」タイムラインから除外",
-        "ftl_removal_desc": "このインスタンスでは、以下のインスタンスを「接続しているすべてのネットワーク」タイムラインから除外します:",
+        "ftl_removal": "「既知のネットワーク」タイムラインから除外",
+        "ftl_removal_desc": "このインスタンスでは、以下のインスタンスを「既知のネットワーク」タイムラインから除外します:",
         "quarantine_desc": "このインスタンスでは、以下のインスタンスに対して公開投稿のみを送信します:",
         "quarantine": "検疫",
         "reject_desc": "このインスタンスでは、以下のインスタンスからのメッセージを受け付けません:",

src/i18n/ko.json

@@ -77,7 +77,8 @@
     "search": "검색",
     "bookmarks": "북마크",
     "interactions": "대화",
-    "administration": "관리"
+    "administration": "관리",
+    "home_timeline": "홈 타임라인"
   },
   "notifications": {
     "broken_favorite": "알 수 없는 게시물입니다, 검색합니다…",
@@ -90,7 +91,8 @@
     "no_more_notifications": "알림이 없습니다",
     "migrated_to": "이사했습니다",
     "reacted_with": "{0} 로 반응했습니다",
-    "error": "알림 불러오기 실패: {0}"
+    "error": "알림 불러오기 실패: {0}",
+    "follow_request": "당신에게 팔로우 신청"
   },
   "post_status": {
     "new_status": "새 게시물 게시",
@@ -402,7 +404,7 @@
     },
     "mutes_and_blocks": "침묵과 차단",
     "chatMessageRadius": "챗 메시지",
-    "change_email": "전자메일 주소 바꾸기",
+    "change_email": "메일주소 바꾸기",
     "changed_email": "메일주소가 갱신되었습니다!",
     "bot": "이 계정은 bot입니다",
     "mutes_tab": "침묵",
@@ -525,8 +527,8 @@
         "media_nsfw": "매체를 민감함으로 설정",
         "media_removal_desc": "이 인스턴스에서는 아래의 인스턴스로부터 보내온 투고에 붙혀 있는 매체는 제거됩니다:",
         "media_removal": "매체 제거",
-        "ftl_removal_desc": "이 인스턴스에서 아래의 인스턴스들은 \"알려진 모든 네트워크\" 타임라인에서 제외됩니다:",
-        "ftl_removal": "\"알려진 모든 네트워크\" 타임라인에서 제외",
+        "ftl_removal_desc": "이 인스턴스에서 아래의 인스턴스들은 \"알려진 네트워크\" 타임라인에서 제외됩니다:",
+        "ftl_removal": "\"알려진 네트워크\" 타임라인에서 제외",
         "quarantine_desc": "이 인스턴스는 아래의 인스턴스에게 공개투고만을 보냅니다:",
         "quarantine": "검역",
         "reject_desc": "이 인스턴스에서는 아래의 인스턴스로부터 보내온 투고를 받아들이지 않습니다:",

src/i18n/nl.json

@@ -5,11 +5,13 @@
   "features_panel": {
     "chat": "Chat",
     "gopher": "Gopher",
-    "media_proxy": "Media proxy",
+    "media_proxy": "Mediaproxy",
     "scope_options": "Zichtbaarheidsopties",
-    "text_limit": "Tekst limiet",
+    "text_limit": "Tekstlimiet",
     "title": "Kenmerken",
-    "who_to_follow": "Wie te volgen"
+    "who_to_follow": "Wie te volgen",
+    "upload_limit": "Upload limiet",
+    "pleroma_chat_messages": "Pleroma Chat"
   },
   "finder": {
     "error_fetching_user": "Fout tijdens ophalen gebruiker",
@@ -17,11 +19,11 @@
   },
   "general": {
     "apply": "Toepassen",
-    "submit": "Verzend",
+    "submit": "Verzenden",
     "more": "Meer",
     "optional": "optioneel",
-    "show_more": "Bekijk meer",
-    "show_less": "Bekijk minder",
+    "show_more": "Meer tonen",
+    "show_less": "Minder tonen",
     "dismiss": "Opheffen",
     "cancel": "Annuleren",
     "disable": "Uitschakelen",
@@ -29,28 +31,32 @@
     "confirm": "Bevestigen",
     "verify": "Verifiëren",
     "generic_error": "Er is een fout opgetreden",
-    "peek": "Spiek",
+    "peek": "Spieken",
     "close": "Sluiten",
     "retry": "Opnieuw proberen",
     "error_retry": "Probeer het opnieuw",
-    "loading": "Laden…"
+    "loading": "Laden…",
+    "role": {
+      "moderator": "Moderator",
+      "admin": "Beheerder"
+    }
   },
   "login": {
-    "login": "Log in",
-    "description": "Log in met OAuth",
+    "login": "Inloggen",
+    "description": "Inloggen met OAuth",
     "logout": "Uitloggen",
     "password": "Wachtwoord",
-    "placeholder": "bijv. lain",
+    "placeholder": "bijv. barbapapa",
     "register": "Registreren",
     "username": "Gebruikersnaam",
     "hint": "Log in om deel te nemen aan de discussie",
-    "authentication_code": "Authenticatie code",
+    "authentication_code": "Authenticatiecode",
     "enter_recovery_code": "Voer een herstelcode in",
-    "enter_two_factor_code": "Voer een twee-factor code in",
+    "enter_two_factor_code": "Voer een twee-factorcode in",
     "recovery_code": "Herstelcode",
     "heading": {
-      "totp": "Twee-factor authenticatie",
-      "recovery": "Twee-factor herstelling"
+      "totp": "Twee-factorauthenticatie",
+      "recovery": "Twee-factorherstelling"
     }
   },
   "nav": {
@@ -59,35 +65,40 @@
     "chat": "Lokale Chat",
     "friend_requests": "Volgverzoeken",
     "mentions": "Vermeldingen",
-    "dms": "Directe Berichten",
-    "public_tl": "Publieke Tijdlijn",
+    "dms": "Privéberichten",
+    "public_tl": "Openbare tijdlijn",
     "timeline": "Tijdlijn",
-    "twkn": "Het Geheel Bekende Netwerk",
+    "twkn": "Bekende Netwerk",
     "user_search": "Gebruiker Zoeken",
     "who_to_follow": "Wie te volgen",
     "preferences": "Voorkeuren",
-    "administration": "Administratie",
+    "administration": "Beheer",
     "search": "Zoeken",
-    "interactions": "Interacties"
+    "interactions": "Interacties",
+    "chats": "Chats",
+    "home_timeline": "Thuis tijdlijn",
+    "timelines": "Tijdlijnen",
+    "bookmarks": "Bladwijzers"
   },
   "notifications": {
     "broken_favorite": "Onbekende status, aan het zoeken…",
     "favorited_you": "vond je status leuk",
     "followed_you": "volgt jou",
-    "load_older": "Laad oudere meldingen",
+    "load_older": "Oudere meldingen laden",
     "notifications": "Meldingen",
     "read": "Gelezen!",
-    "repeated_you": "Herhaalde je status",
+    "repeated_you": "herhaalde je status",
     "no_more_notifications": "Geen meldingen meer",
     "migrated_to": "is gemigreerd naar",
     "follow_request": "wil je volgen",
-    "reacted_with": "reageerde met {0}"
+    "reacted_with": "reageerde met {0}",
+    "error": "Fout bij ophalen van meldingen: {0}"
   },
   "post_status": {
     "new_status": "Nieuwe status plaatsen",
-    "account_not_locked_warning": "Je account is niet {0}. Iedereen kan je volgen om je alleen-volgers berichten te lezen.",
+    "account_not_locked_warning": "Je account is niet {0}. Iedereen kan je volgen om je alleen-volgers-berichten te lezen.",
     "account_not_locked_warning_link": "gesloten",
-    "attachments_sensitive": "Markeer bijlagen als gevoelig",
+    "attachments_sensitive": "Bijlagen als gevoelig markeren",
     "content_type": {
       "text/plain": "Platte tekst",
       "text/html": "HTML",
@@ -99,26 +110,32 @@
     "direct_warning": "Deze post zal enkel zichtbaar zijn voor de personen die genoemd zijn.",
     "posting": "Plaatsen",
     "scope": {
-      "direct": "Direct - Post enkel naar vermelde gebruikers",
-      "private": "Enkel volgers - Post enkel naar volgers",
-      "public": "Publiek - Post op publieke tijdlijnen",
-      "unlisted": "Niet Vermelden - Niet tonen op publieke tijdlijnen"
+      "direct": "Privé - bericht enkel naar vermelde gebruikers sturen",
+      "private": "Enkel volgers - bericht enkel naar volgers sturen",
+      "public": "Openbaar - bericht op openbare tijdlijnen plaatsen",
+      "unlisted": "Niet vermelden - niet tonen op openbare tijdlijnen"
     },
     "direct_warning_to_all": "Dit bericht zal zichtbaar zijn voor alle vermelde gebruikers.",
     "direct_warning_to_first_only": "Dit bericht zal alleen zichtbaar zijn voor de vermelde gebruikers aan het begin van het bericht.",
     "scope_notice": {
       "public": "Dit bericht zal voor iedereen zichtbaar zijn",
-      "unlisted": "Dit bericht zal niet zichtbaar zijn in de Publieke Tijdlijn en Het Geheel Bekende Netwerk",
+      "unlisted": "Dit bericht zal niet zichtbaar zijn in de Openbare Tijdlijn en Het Geheel Bekende Netwerk",
       "private": "Dit bericht zal voor alleen je volgers zichtbaar zijn"
-    }
+    },
+    "post": "Bericht",
+    "empty_status_error": "Kan geen lege status zonder bijlagen plaatsen",
+    "preview_empty": "Leeg",
+    "preview": "Voorbeeld",
+    "media_description": "Mediaomschrijving",
+    "media_description_error": "Kon media niet ophalen, probeer het opnieuw"
   },
   "registration": {
     "bio": "Bio",
-    "email": "Email",
-    "fullname": "Weergave naam",
+    "email": "E-mail",
+    "fullname": "Weergavenaam",
     "password_confirm": "Wachtwoord bevestiging",
     "registration": "Registratie",
-    "token": "Uitnodigings-token",
+    "token": "Uitnodigingstoken",
     "captcha": "CAPTCHA",
     "new_captcha": "Klik op de afbeelding voor een nieuwe captcha",
     "validations": {
@@ -131,13 +148,16 @@
     },
     "username_placeholder": "bijv. lain",
     "fullname_placeholder": "bijv. Lain Iwakura",
-    "bio_placeholder": "bijv.\nHallo, ik ben Lain.\nIk ben een anime meisje woonachtig in een buitenwijk in Japan. Je kent me misschien van the Wired."
+    "bio_placeholder": "bijv.\nHallo, ik ben Lain.\nIk ben een animemeisje woonachtig in een buitenwijk in Japan. Je kent me misschien van the Wired.",
+    "reason_placeholder": "Deze instantie keurt registraties handmatig goed.\nLaat de beheerder weten waarom je wilt registreren.",
+    "reason": "Reden voor registratie",
+    "register": "Registreren"
   },
   "settings": {
     "attachmentRadius": "Bijlages",
     "attachments": "Bijlages",
     "avatar": "Avatar",
-    "avatarAltRadius": "Avatars (Meldingen)",
+    "avatarAltRadius": "Avatars (meldingen)",
     "avatarRadius": "Avatars",
     "background": "Achtergrond",
     "bio": "Bio",
@@ -146,7 +166,7 @@
     "cGreen": "Groen (Herhalen)",
     "cOrange": "Oranje (Favoriet)",
     "cRed": "Rood (Annuleren)",
-    "change_password": "Wachtwoord Wijzigen",
+    "change_password": "Wachtwoord wijzigen",
     "change_password_error": "Er is een fout opgetreden bij het wijzigen van je wachtwoord.",
     "changed_password": "Wachtwoord succesvol gewijzigd!",
     "collapse_subject": "Klap berichten met een onderwerp in",
@@ -155,30 +175,30 @@
     "current_avatar": "Je huidige avatar",
     "current_password": "Huidig wachtwoord",
     "current_profile_banner": "Je huidige profiel banner",
-    "data_import_export_tab": "Data Import / Export",
+    "data_import_export_tab": "Data-import / export",
     "default_vis": "Standaard zichtbaarheidsbereik",
-    "delete_account": "Account Verwijderen",
+    "delete_account": "Account verwijderen",
     "delete_account_description": "Permanent je gegevens verwijderen en account deactiveren.",
     "delete_account_error": "Er is een fout opgetreden bij het verwijderen van je account. Indien dit probleem zich voor blijft doen, neem dan contact op met de beheerder van deze instantie.",
     "delete_account_instructions": "Voer je wachtwoord in het onderstaande invoerveld in om het verwijderen van je account te bevestigen.",
-    "export_theme": "Preset opslaan",
+    "export_theme": "Voorinstelling opslaan",
     "filtering": "Filtering",
-    "filtering_explanation": "Alle statussen die deze woorden bevatten worden genegeerd, één filter per lijn",
+    "filtering_explanation": "Alle statussen die deze woorden bevatten worden genegeerd, één filter per regel",
     "follow_export": "Volgers exporteren",
-    "follow_export_button": "Exporteer je volgers naar een csv bestand",
+    "follow_export_button": "Exporteer je volgers naar een csv-bestand",
     "follow_export_processing": "Aan het verwerken, binnen enkele ogenblikken wordt je gevraagd je bestand te downloaden",
     "follow_import": "Volgers importeren",
     "follow_import_error": "Fout bij importeren volgers",
     "follows_imported": "Volgers geïmporteerd! Het kan even duren voordat deze verwerkt zijn.",
     "foreground": "Voorgrond",
     "general": "Algemeen",
-    "hide_attachments_in_convo": "Verberg bijlages in conversaties",
-    "hide_attachments_in_tl": "Verberg bijlages in de tijdlijn",
-    "hide_isp": "Verberg instantie-specifiek paneel",
+    "hide_attachments_in_convo": "Bijlagen in conversaties verbergen",
+    "hide_attachments_in_tl": "Bijlagen in tijdlijn verbergen",
+    "hide_isp": "Instantie-specifiek paneel verbergen",
     "preload_images": "Afbeeldingen vooraf laden",
-    "hide_post_stats": "Verberg bericht statistieken (bijv. het aantal favorieten)",
-    "hide_user_stats": "Verberg bericht statistieken (bijv. het aantal volgers)",
-    "import_followers_from_a_csv_file": "Importeer volgers uit een csv bestand",
+    "hide_post_stats": "Bericht statistieken verbergen (bijv. het aantal favorieten)",
+    "hide_user_stats": "Gebruikers-statistieken verbergen (bijv. het aantal volgers)",
+    "import_followers_from_a_csv_file": "Gevolgden uit een csv bestand importeren",
     "import_theme": "Preset laden",
     "inputRadius": "Invoervelden",
     "checkboxRadius": "Checkboxen",
@@ -186,35 +206,35 @@
     "instance_default_simple": "(standaard)",
     "interface": "Interface",
     "interfaceLanguage": "Interface taal",
-    "invalid_theme_imported": "Het geselecteerde bestand is geen door Pleroma ondersteund thema. Er zijn geen aanpassingen gedaan.",
+    "invalid_theme_imported": "Het geselecteerde bestand is niet een door Pleroma ondersteund thema. Er zijn geen aanpassingen gedaan.",
     "limited_availability": "Niet beschikbaar in je browser",
     "links": "Links",
-    "lock_account_description": "Laat volgers enkel toe na expliciete toestemming",
-    "loop_video": "Herhaal video's",
-    "loop_video_silent_only": "Herhaal enkel video's zonder geluid (bijv. Mastodon's \"gifs\")",
+    "lock_account_description": "Volgers enkel na expliciete toestemming toelaten",
+    "loop_video": "Video's herhalen",
+    "loop_video_silent_only": "Enkel video's zonder geluid herhalen (bijv. Mastodon's \"gifs\")",
     "name": "Naam",
-    "name_bio": "Naam & Bio",
+    "name_bio": "Naam & bio",
     "new_password": "Nieuw wachtwoord",
     "notification_visibility": "Type meldingen die getoond worden",
-    "notification_visibility_follows": "Volgingen",
-    "notification_visibility_likes": "Vind-ik-leuks",
+    "notification_visibility_follows": "Gevolgden",
+    "notification_visibility_likes": "Favorieten",
     "notification_visibility_mentions": "Vermeldingen",
     "notification_visibility_repeats": "Herhalingen",
     "no_rich_text_description": "Verwijder rich text formattering van alle berichten",
     "hide_network_description": "Toon niet wie mij volgt en wie ik volg.",
-    "nsfw_clickthrough": "Doorklikbaar verbergen van gevoelige bijlages inschakelen",
+    "nsfw_clickthrough": "Doorklikbaar verbergen van gevoelige bijlages en link voorbeelden inschakelen",
     "oauth_tokens": "OAuth-tokens",
     "token": "Token",
-    "refresh_token": "Token Vernieuwen",
+    "refresh_token": "Token vernieuwen",
     "valid_until": "Geldig tot",
     "revoke_token": "Intrekken",
     "panelRadius": "Panelen",
     "pause_on_unfocused": "Streamen pauzeren wanneer de tab niet in focus is",
     "presets": "Presets",
-    "profile_background": "Profiel Achtergrond",
-    "profile_banner": "Profiel Banner",
+    "profile_background": "Profiel achtergrond",
+    "profile_banner": "Profiel banner",
     "profile_tab": "Profiel",
-    "radii_help": "Stel afronding van hoeken in de interface in (in pixels)",
+    "radii_help": "Afronding van hoeken in de interface instellen (in pixels)",
     "replies_in_timeline": "Antwoorden in tijdlijn",
     "reply_visibility_all": "Alle antwoorden tonen",
     "reply_visibility_following": "Enkel antwoorden tonen die aan mij of gevolgde gebruikers gericht zijn",
@@ -222,13 +242,13 @@
     "saving_err": "Fout tijdens opslaan van instellingen",
     "saving_ok": "Instellingen opgeslagen",
     "security_tab": "Beveiliging",
-    "scope_copy": "Neem bereik over bij beantwoorden (Directe Berichten blijven altijd Direct)",
+    "scope_copy": "Bereik overnemen bij beantwoorden (Privéberichten blijven altijd privé)",
     "set_new_avatar": "Nieuwe avatar instellen",
     "set_new_profile_background": "Nieuwe profiel achtergrond instellen",
     "set_new_profile_banner": "Nieuwe profiel banner instellen",
     "settings": "Instellingen",
     "subject_input_always_show": "Altijd onderwerpveld tonen",
-    "subject_line_behavior": "Onderwerp kopiëren bij antwoorden",
+    "subject_line_behavior": "Onderwerp kopiëren bij beantwoorden",
     "subject_line_email": "Zoals email: \"re: onderwerp\"",
     "subject_line_mastodon": "Zoals mastodon: kopieer zoals het is",
     "subject_line_noop": "Niet kopiëren",
@@ -236,7 +256,7 @@
     "streaming": "Automatisch streamen van nieuwe berichten inschakelen wanneer tot boven gescrold is",
     "text": "Tekst",
     "theme": "Thema",
-    "theme_help": "Gebruik hex color codes (#rrggbb) om je kleurschema te wijzigen.",
+    "theme_help": "Hex kleur codes (#rrggbb) gebruiken om je kleur thema te wijzigen.",
     "theme_help_v2_1": "Je kan ook de kleur en transparantie van bepaalde componenten overschrijven door de checkbox aan te vinken, gebruik de \"Alles wissen\" knop om alle overschrijvingen te annuleren.",
     "theme_help_v2_2": "Iconen onder sommige onderdelen zijn achtergrond/tekst contrast indicatoren, zweef er over voor gedetailleerde info. Hou er rekening mee dat bij doorzichtigheid de ergst mogelijke situatie wordt weer gegeven.",
     "tooltipRadius": "Tooltips/alarmen",
@@ -323,7 +343,13 @@
         "popover": "Tooltips, menu's, popovers",
         "post": "Berichten / Gebruiker bios",
         "alert_neutral": "Neutraal",
-        "alert_warning": "Waarschuwing"
+        "alert_warning": "Waarschuwing",
+        "chat": {
+          "border": "Rand",
+          "outgoing": "Uitgaand",
+          "incoming": "Binnenkomend"
+        },
+        "wallpaper": "Achtergrond"
       },
       "radii": {
         "_tab_label": "Rondheid"
@@ -399,50 +425,50 @@
       "setup_otp": "OTP instellen",
       "wait_pre_setup_otp": "OTP voorinstellen",
       "confirm_and_enable": "Bevestig en schakel OTP in",
-      "title": "Twee-factor Authenticatie",
+      "title": "Twee-factorauthenticatie",
       "generate_new_recovery_codes": "Genereer nieuwe herstelcodes",
       "recovery_codes": "Herstelcodes.",
-      "waiting_a_recovery_codes": "Backup codes ontvangen…",
-      "authentication_methods": "Authenticatie methodes",
+      "waiting_a_recovery_codes": "Back-upcodes ontvangen…",
+      "authentication_methods": "Authenticatiemethodes",
       "scan": {
         "title": "Scannen",
-        "desc": "Scan de QR code of voer een sleutel in met je twee-factor applicatie:",
+        "desc": "Scan de QR-code of voer een sleutel in met je twee-factorapplicatie:",
         "secret_code": "Sleutel"
       },
       "verify": {
-        "desc": "Voer de code van je twee-factor applicatie in om twee-factor authenticatie in te schakelen:"
+        "desc": "Voer de code van je twee-factorapplicatie in om twee-factorauthenticatie in te schakelen:"
       },
-      "warning_of_generate_new_codes": "Wanneer je nieuwe herstelcodes genereert, zullen je oude code niet langer werken.",
-      "recovery_codes_warning": "Schrijf de codes op of sla ze op een veilige locatie op - anders kun je ze niet meer inzien. Als je toegang tot je 2FA app en herstelcodes verliest, zal je buitengesloten zijn uit je account."
+      "warning_of_generate_new_codes": "Wanneer je nieuwe herstelcodes genereert, zullen je oude codes niet langer werken.",
+      "recovery_codes_warning": "Schrijf de codes op of sla ze op een veilige locatie op - anders kun je ze niet meer inzien. Als je toegang tot je 2FA-app en herstelcodes verliest, zal je buitengesloten zijn van je account."
     },
     "allow_following_move": "Automatisch volgen toestaan wanneer een gevolgd account migreert",
     "block_export": "Blokkades exporteren",
     "block_import": "Blokkades importeren",
     "blocks_imported": "Blokkades geïmporteerd! Het kan even duren voordat deze verwerkt zijn.",
     "blocks_tab": "Blokkades",
-    "change_email": "Email wijzigen",
-    "change_email_error": "Er is een fout opgetreden tijdens het wijzigen van je email.",
-    "changed_email": "Email succesvol gewijzigd!",
+    "change_email": "E-mail wijzigen",
+    "change_email_error": "Er is een fout opgetreden tijdens het wijzigen van je e-mailadres.",
+    "changed_email": "E-mailadres succesvol gewijzigd!",
     "domain_mutes": "Domeinen",
-    "avatar_size_instruction": "De aangeraden minimale afmeting voor avatar afbeeldingen is 150x150 pixels.",
+    "avatar_size_instruction": "De aangeraden minimale afmeting voor avatar-afbeeldingen is 150x150 pixels.",
     "pad_emoji": "Vul emoji aan met spaties wanneer deze met de picker ingevoegd worden",
-    "emoji_reactions_on_timeline": "Toon emoji reacties op de tijdlijn",
+    "emoji_reactions_on_timeline": "Toon emoji-reacties op de tijdlijn",
     "accent": "Accent",
-    "hide_muted_posts": "Verberg berichten van genegeerde gebruikers",
+    "hide_muted_posts": "Berichten van genegeerde gebruikers verbergen",
     "max_thumbnails": "Maximaal aantal miniaturen per bericht",
-    "use_one_click_nsfw": "Open gevoelige bijlagen met slechts één klik",
+    "use_one_click_nsfw": "Gevoelige bijlagen met slechts één klik openen",
     "hide_filtered_statuses": "Gefilterde statussen verbergen",
-    "import_blocks_from_a_csv_file": "Importeer blokkades van een csv bestand",
-    "mutes_tab": "Negeringen",
-    "play_videos_in_modal": "Speel video's af in een popup frame",
-    "new_email": "Nieuwe Email",
+    "import_blocks_from_a_csv_file": "Blokkades van een csv bestand importeren",
+    "mutes_tab": "Genegeerden",
+    "play_videos_in_modal": "Video's in een popup frame afspelen",
+    "new_email": "Nieuwe e-mail",
     "notification_visibility_emoji_reactions": "Reacties",
     "no_blocks": "Geen blokkades",
-    "no_mutes": "Geen negeringen",
+    "no_mutes": "Geen genegeerden",
     "hide_followers_description": "Niet tonen wie mij volgt",
     "hide_followers_count_description": "Niet mijn volgers aantal tonen",
     "hide_follows_count_description": "Niet mijn gevolgde aantal tonen",
-    "show_admin_badge": "Beheerders badge tonen in mijn profiel",
+    "show_admin_badge": "\"Beheerder\" badge in mijn profiel tonen",
     "autohide_floating_post_button": "Nieuw Bericht knop automatisch verbergen (mobiel)",
     "search_user_to_block": "Zoek wie je wilt blokkeren",
     "search_user_to_mute": "Zoek wie je wilt negeren",
@@ -452,31 +478,69 @@
     "useStreamingApi": "Berichten en meldingen in real-time ontvangen",
     "useStreamingApiWarning": "(Afgeraden, experimenteel, kan berichten overslaan)",
     "type_domains_to_mute": "Zoek domeinen om te negeren",
-    "upload_a_photo": "Upload een foto",
+    "upload_a_photo": "Foto uploaden",
     "fun": "Plezier",
     "greentext": "Meme pijlen",
-    "block_export_button": "Exporteer je geblokkeerde gebruikers naar een csv bestand",
+    "block_export_button": "Exporteer je geblokkeerde gebruikers naar een csv-bestand",
     "block_import_error": "Fout bij importeren blokkades",
     "discoverable": "Sta toe dat dit account ontdekt kan worden in zoekresultaten en andere diensten",
-    "use_contain_fit": "Snij bijlage in miniaturen niet bij",
+    "use_contain_fit": "Bijlage in miniaturen niet bijsnijden",
     "notification_visibility_moves": "Gebruiker Migraties",
     "hide_follows_description": "Niet tonen wie ik volg",
-    "show_moderator_badge": "Moderators badge tonen in mijn profiel",
+    "show_moderator_badge": "\"Moderator\" badge in mijn profiel tonen",
     "notification_setting_filters": "Filters",
     "notification_blocks": "Door een gebruiker te blokkeren, ontvang je geen meldingen meer van de gebruiker en wordt je abonnement op de gebruiker opgeheven.",
     "version": {
-      "frontend_version": "Frontend Versie",
-      "backend_version": "Backend Versie",
+      "frontend_version": "Frontend versie",
+      "backend_version": "Backend versie",
       "title": "Versie"
     },
     "mutes_and_blocks": "Negeringen en Blokkades",
     "profile_fields": {
       "value": "Inhoud",
       "name": "Label",
-      "add_field": "Veld Toevoegen",
+      "add_field": "Veld toevoegen",
       "label": "Profiel metadata"
     },
-    "bot": "Dit is een bot account"
+    "bot": "Dit is een bot-account",
+    "setting_changed": "Instelling verschilt van standaard waarde",
+    "save": "Wijzigingen opslaan",
+    "hide_media_previews": "Media voorbeelden verbergen",
+    "word_filter": "Woord filter",
+    "chatMessageRadius": "Chatbericht",
+    "mute_export": "Genegeerden export",
+    "mute_export_button": "Exporteer je genegeerden naar een csv-bestand",
+    "mute_import_error": "Fout tijdens het importeren van genegeerden",
+    "mute_import": "Genegeerden import",
+    "mutes_imported": "Genegeerden geïmporteerd! Het kan even duren voordat deze verwerkt zijn.",
+    "more_settings": "Meer instellingen",
+    "notification_setting_hide_notification_contents": "Afzender en inhoud van push meldingen verbergen",
+    "notification_setting_block_from_strangers": "Meldingen van gebruikers die je niet volgt blokkeren",
+    "virtual_scrolling": "Tijdlijn rendering optimaliseren",
+    "sensitive_by_default": "Berichten standaard als gevoelig markeren",
+    "reset_avatar_confirm": "Wil je echt de avatar herstellen?",
+    "reset_banner_confirm": "Wil je echt de banner herstellen?",
+    "reset_background_confirm": "Wil je echt de achtergrond herstellen?",
+    "reset_profile_banner": "Profiel banner herstellen",
+    "reset_profile_background": "Profiel achtergrond herstellen",
+    "reset_avatar": "Avatar herstellen",
+    "reply_visibility_self_short": "Alleen antwoorden aan mijzelf tonen",
+    "reply_visibility_following_short": "Antwoorden naar mijn gevolgden tonen",
+    "file_export_import": {
+      "errors": {
+        "file_slightly_new": "Bestand minor versie is verschillend, sommige instellingen kunnen mogelijk niet worden geladen",
+        "file_too_old": "Incompatibele hoofdversie: {fileMajor}, bestandsversie is te oud en wordt niet ondersteund (minimale versie {feMajor})",
+        "file_too_new": "Incompatibele hoofdversie: {fileMajor}, deze PleromaFE (instellingen versie {feMajor}) is te oud om deze te ondersteunen",
+        "invalid_file": "Het geselecteerde bestand is niet een door Pleroma ondersteunde instellingen back-up. Er zijn geen wijzigingen gemaakt."
+      },
+      "restore_settings": "Instellingen uit bestand herstellen",
+      "backup_settings_theme": "Instellingen en thema naar bestand back-uppen",
+      "backup_settings": "Instellingen naar bestand back-uppen",
+      "backup_restore": "Instellingen backup"
+    },
+    "hide_wallpaper": "Instantie achtergrond verbergen",
+    "hide_all_muted_posts": "Genegeerde berichten verbergen",
+    "import_mutes_from_a_csv_file": "Importeer genegeerden van een csv bestand"
   },
   "timeline": {
     "collapse": "Inklappen",
@@ -488,7 +552,11 @@
     "show_new": "Nieuwe tonen",
     "up_to_date": "Up-to-date",
     "no_statuses": "Geen statussen",
-    "no_more_statuses": "Geen statussen meer"
+    "no_more_statuses": "Geen statussen meer",
+    "socket_broke": "Realtime verbinding verloren: CloseEvent code {0}",
+    "socket_reconnected": "Realtime verbinding opgezet",
+    "reload": "Verversen",
+    "error": "Fout tijdens het ophalen van tijdlijn: {0}"
   },
   "user_card": {
     "approve": "Goedkeuren",
@@ -543,10 +611,18 @@
     "report": "Aangeven",
     "mention": "Vermelding",
     "media": "Media",
-    "hidden": "Verborgen"
+    "hidden": "Verborgen",
+    "highlight": {
+      "side": "Zijstreep",
+      "striped": "Gestreepte achtergrond",
+      "solid": "Effen achtergrond",
+      "disabled": "Geen highlight"
+    },
+    "bot": "Bot",
+    "message": "Bericht"
   },
   "user_profile": {
-    "timeline_title": "Gebruikers Tijdlijn",
+    "timeline_title": "Gebruikerstijdlijn",
     "profile_loading_error": "Sorry, er is een fout opgetreden bij het laden van dit profiel.",
     "profile_does_not_exist": "Sorry, dit profiel bestaat niet."
   },
@@ -555,20 +631,22 @@
     "who_to_follow": "Wie te volgen"
   },
   "tool_tip": {
-    "media_upload": "Media Uploaden",
+    "media_upload": "Media uploaden",
     "repeat": "Herhalen",
     "reply": "Beantwoorden",
     "favorite": "Favoriet maken",
     "user_settings": "Gebruikers Instellingen",
     "reject_follow_request": "Volg-verzoek afwijzen",
     "accept_follow_request": "Volg-aanvraag accepteren",
-    "add_reaction": "Reactie toevoegen"
+    "add_reaction": "Reactie toevoegen",
+    "bookmark": "Bladwijzer"
   },
   "upload": {
     "error": {
       "base": "Upload mislukt.",
       "file_too_big": "Bestand is te groot [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
-      "default": "Probeer het later opnieuw"
+      "default": "Probeer het later opnieuw",
+      "message": "Upload is mislukt: {0}"
     },
     "file_size_units": {
       "B": "B",
@@ -585,25 +663,25 @@
         "reject": "Afwijzen",
         "replace": "Vervangen",
         "is_replaced_by": "→",
-        "keyword_policies": "Zoekwoord Beleid",
+        "keyword_policies": "Zoekwoordbeleid",
         "ftl_removal": "Verwijdering van \"Het Geheel Bekende Netwerk\" Tijdlijn"
       },
-      "mrf_policies_desc": "MRF regels beïnvloeden het federatie gedrag van de instantie. De volgende regels zijn ingeschakeld:",
-      "mrf_policies": "Ingeschakelde MRF Regels",
+      "mrf_policies_desc": "MRF-regels beïnvloeden het federatiegedrag van de instantie. De volgende regels zijn ingeschakeld:",
+      "mrf_policies": "Ingeschakelde MRF-regels",
       "simple": {
-        "simple_policies": "Instantie-specifieke Regels",
+        "simple_policies": "Instantiespecifieke regels",
         "accept": "Accepteren",
         "accept_desc": "Deze instantie accepteert alleen berichten van de volgende instanties:",
         "reject": "Afwijzen",
         "reject_desc": "Deze instantie zal geen berichten accepteren van de volgende instanties:",
         "quarantine": "Quarantaine",
-        "quarantine_desc": "Deze instantie zal alleen publieke berichten sturen naar de volgende instanties:",
-        "ftl_removal_desc": "Deze instantie verwijdert de volgende instanties van \"Het Geheel Bekende Netwerk\" tijdlijn:",
+        "quarantine_desc": "Deze instantie zal alleen openbare berichten sturen naar de volgende instanties:",
+        "ftl_removal_desc": "Deze instantie verwijdert de volgende instanties van \"Bekende Netwerk\" tijdlijn:",
         "media_removal_desc": "Deze instantie verwijdert media van berichten van de volgende instanties:",
         "media_nsfw_desc": "Deze instantie stelt media in als gevoelig in berichten van de volgende instanties:",
-        "ftl_removal": "Verwijderen van \"Het Geheel Bekende Netwerk\" Tijdlijn",
-        "media_removal": "Media Verwijdering",
-        "media_nsfw": "Forceer Media als Gevoelig"
+        "ftl_removal": "Verwijderen van \"Bekende Netwerk\" Tijdlijn",
+        "media_removal": "Mediaverwijdering",
+        "media_nsfw": "Forceer media als gevoelig"
       }
     },
     "staff": "Personeel"
@@ -634,8 +712,8 @@
     "next": "Volgende"
   },
   "polls": {
-    "add_poll": "Poll Toevoegen",
-    "add_option": "Optie Toevoegen",
+    "add_poll": "Poll toevoegen",
+    "add_option": "Optie toevoegen",
     "option": "Optie",
     "votes": "stemmen",
     "vote": "Stem",
@@ -645,29 +723,31 @@
     "expires_in": "Poll eindigt in {0}",
     "expired": "Poll is {0} geleden beëindigd",
     "not_enough_options": "Te weinig opties in poll",
-    "type": "Poll type"
+    "type": "Poll-type",
+    "votes_count": "{count} stem | {count} stemmen",
+    "people_voted_count": "{count} persoon heeft gestemd | {count} personen hebben gestemd"
   },
   "emoji": {
     "emoji": "Emoji",
     "keep_open": "Picker openhouden",
-    "search_emoji": "Zoek voor een emoji",
+    "search_emoji": "Emoji zoeken",
     "add_emoji": "Emoji invoegen",
-    "unicode": "Unicode emoji",
+    "unicode": "Unicode-emoji",
     "load_all": "Alle {emojiAmount} emoji worden geladen",
     "stickers": "Stickers",
     "load_all_hint": "Eerste {saneAmount} emoji geladen, alle emoji tegelijk laden kan problemen veroorzaken met prestaties.",
     "custom": "Gepersonaliseerde emoji"
   },
   "interactions": {
-    "favs_repeats": "Herhalingen en Favorieten",
-    "follows": "Nieuwe volgingen",
-    "moves": "Gebruiker migreert",
+    "favs_repeats": "Herhalingen en favorieten",
+    "follows": "Nieuwe gevolgden",
+    "moves": "Gebruikermigraties",
     "load_older": "Oudere interacties laden"
   },
   "remote_user_resolver": {
     "searching_for": "Zoeken naar",
     "error": "Niet gevonden.",
-    "remote_user_resolver": "Externe gebruikers zoeker"
+    "remote_user_resolver": "Externe gebruikers-zoeker"
   },
   "selectable_list": {
     "select_all": "Alles selecteren"
@@ -715,7 +795,17 @@
     "repeats": "Herhalingen",
     "favorites": "Favorieten",
     "thread_muted_and_words": ", heeft woorden:",
-    "thread_muted": "Thread genegeerd"
+    "thread_muted": "Thread genegeerd",
+    "expand": "Uitklappen",
+    "nsfw": "Gevoelig",
+    "status_deleted": "Dit bericht is verwijderd",
+    "hide_content": "Inhoud verbergen",
+    "show_content": "Inhoud tonen",
+    "hide_full_subject": "Volledig onderwerp verbergen",
+    "show_full_subject": "Volledig onderwerp tonen",
+    "external_source": "Externe bron",
+    "unbookmark": "Bladwijzer verwijderen",
+    "bookmark": "Bladwijzer toevoegen"
   },
   "time": {
     "years_short": "{0}j",
@@ -750,5 +840,33 @@
     "day_short": "{0}d",
     "days": "{0} dagen",
     "day": "{0} dag"
+  },
+  "shoutbox": {
+    "title": "Shoutbox"
+  },
+  "errors": {
+    "storage_unavailable": "Pleroma kon browseropslag niet benaderen. Je login of lokale instellingen worden niet opgeslagen en je kunt onverwachte problemen ondervinden. Probeer cookies te accepteren."
+  },
+  "display_date": {
+    "today": "Vandaag"
+  },
+  "file_type": {
+    "file": "Bestand",
+    "image": "Afbeelding",
+    "video": "Video",
+    "audio": "Audio"
+  },
+  "chats": {
+    "empty_chat_list_placeholder": "Je hebt nog geen chats. Start een nieuwe chat!",
+    "error_sending_message": "Er is iets fout gegaan tijdens het verzenden van het bericht.",
+    "error_loading_chat": "Er is iets fout gegaan tijdens het laden van de chat.",
+    "delete_confirm": "Wil je echt dit bericht verwijderen?",
+    "more": "Meer",
+    "empty_message_error": "Kan niet een leeg bericht plaatsen",
+    "new": "Nieuwe Chat",
+    "chats": "Chats",
+    "delete": "Verwijderen",
+    "message_user": "Spreek met {nickname}",
+    "you": "Jij:"
   }
 }

src/i18n/uk.json

@@ -30,7 +30,7 @@
   "features_panel": {
     "gopher": "Gopher",
     "pleroma_chat_messages": "Чати",
-    "chat": "Міні-чат",
+    "chat": "Оголошення",
     "who_to_follow": "Кого відстежувати",
     "title": "Особливості",
     "scope_options": "Параметри обсягу",
@@ -49,7 +49,7 @@
     "mute": "Ігнорувати"
   },
   "shoutbox": {
-    "title": "Міні-чат"
+    "title": "Оголошення"
   },
   "about": {
     "staff": "Адміністрація",
@@ -122,7 +122,9 @@
     "votes": "голосів",
     "option": "Відповідь",
     "add_poll": "Додати опитування",
-    "not_enough_options": "Замало унікальних варіантів в опитуванні"
+    "not_enough_options": "Замало унікальних варіантів в опитуванні",
+    "people_voted_count": "{count} особа проголосувала | {count} осіб проголосувало",
+    "votes_count": "{count} голос | {count} голосів"
   },
   "notifications": {
     "reacted_with": "додав реакцію: {0}",
@@ -155,7 +157,8 @@
     "interactions": "Взаємодії",
     "mentions": "Згадування",
     "back": "Назад",
-    "administration": "Адміністрування"
+    "administration": "Адміністрування",
+    "home_timeline": "Домашня стрічка"
   },
   "media_modal": {
     "next": "Наступна",
@@ -246,7 +249,8 @@
     },
     "preview_empty": "Пустий",
     "media_description_error": "Не вдалось оновити медіа, спробуйте ще раз",
-    "media_description": "Опис медіа"
+    "media_description": "Опис медіа",
+    "post": "Опублікувати"
   },
   "settings": {
     "blocks_imported": "Блокування імпортовані! Їх обробка триватиме певний час.",
@@ -608,7 +612,28 @@
       "backend_version": "Версія бекенду",
       "title": "Версія"
     },
-    "hide_wallpaper": "Сховати шпалери екземпляру"
+    "hide_wallpaper": "Сховати шпалери екземпляру",
+    "more_settings": "Більше налаштувань",
+    "sensitive_by_default": "Визначати допис як дратівливий за замовчуванням",
+    "reply_visibility_self_short": "Показувати відповіді лише мені",
+    "reply_visibility_following_short": "Показувати відповіді тим, на кого я підписаний",
+    "hide_all_muted_posts": "Приховати приглушені повідомлення",
+    "hide_media_previews": "Приховати попередній перегляд медіа",
+    "word_filter": "Фільтр слів",
+    "setting_changed": "Конфігурація відрізняється від типової",
+    "save": "Зберегти зміни",
+    "file_export_import": {
+      "errors": {
+        "file_slightly_new": "Другорядна версія файлу відрізняється, деякі налаштування можуть бути не прийняті",
+        "file_too_old": "Несумісна основна версія: {fileMajor}, версія файлу занадто стара і не підтримується (мінімальна версія налаштувань {feMajor})",
+        "file_too_new": "Несумісна основна версія: {fileMajor}, ця версія PleromaFE ({feMajor}) занадто стара для його обробки",
+        "invalid_file": "Вибраний файл не є резервною копією налаштувань Pleroma. Ніяких змін не було зроблено."
+      },
+      "restore_settings": "Відновити налаштування з файлу",
+      "backup_settings_theme": "Резервне копіювання налаштувань та теми у файл",
+      "backup_settings": "Резервне копіювання налаштувань у файл",
+      "backup_restore": "Резервне копіювання налаштувань"
+    }
   },
   "selectable_list": {
     "select_all": "Вибрати все"
@@ -637,7 +662,10 @@
     "fullname": "Відображене ім'я",
     "email": "Ел. пошта",
     "bio": "Про себе",
-    "captcha": "CAPTCHA"
+    "captcha": "CAPTCHA",
+    "register": "Зареєструватися",
+    "reason_placeholder": "Цей інстанс обробляє запити на реєстрацію вручну.\nРозкажіть адміністрації чому ви хочете зареєструватися.",
+    "reason": "Причина реєстрації"
   },
   "who_to_follow": {
     "who_to_follow": "На кого підписатися",
@@ -764,7 +792,14 @@
     "unblock": "Розблокувати",
     "remote_follow": "Підписатись",
     "muted": "Заглушений",
-    "mute": "Заглушити"
+    "mute": "Заглушити",
+    "highlight": {
+      "side": "Смужка ліворуч",
+      "striped": "Смугастий фон",
+      "solid": "Суцільний фон",
+      "disabled": "Не виділяти"
+    },
+    "bot": "Бот"
   },
   "status": {
     "copy_link": "Скопіювати посилання на допис",
@@ -804,7 +839,9 @@
     "conversation": "Розмова",
     "no_statuses": "Ніяких статусів",
     "repeated": "поширив(-ла)",
-    "no_retweet_hint": "Запис, позначено як \"тільки для підписників\" або \"особисте\" і тому не може бути поширений"
+    "no_retweet_hint": "Запис, позначено як \"тільки для підписників\" або \"особисте\" і тому не може бути поширений",
+    "socket_broke": "Втрачено з'єднання у реальному часі: код {0}",
+    "socket_reconnected": "Встановлено з'єднання у реальному часі"
   },
   "user_reporting": {
     "submit": "Відправити",

src/i18n/zh.json

@@ -96,7 +96,8 @@
     "administration": "管理员",
     "chats": "聊天",
     "timelines": "时间线",
-    "bookmarks": "书签"
+    "bookmarks": "书签",
+    "home_timeline": "主页时间线"
   },
   "notifications": {
     "broken_favorite": "未知的状态，正在搜索中…",
@@ -300,7 +301,7 @@
     "new_password": "新密码",
     "notification_visibility": "要显示的通知类型",
     "notification_visibility_follows": "关注",
-    "notification_visibility_likes": "点赞",
+    "notification_visibility_likes": "喜欢",
     "notification_visibility_mentions": "提及",
     "notification_visibility_repeats": "转发",
     "no_rich_text_description": "不显示富文本格式",
@@ -571,7 +572,19 @@
     "hide_all_muted_posts": "不显示已隐藏的发文",
     "hide_media_previews": "隐藏媒体预览",
     "word_filter": "词语过滤",
-    "save": "保存更改"
+    "save": "保存更改",
+    "file_export_import": {
+      "errors": {
+        "file_slightly_new": "文件的小版本不同，有些设置可能无法加载",
+        "file_too_old": "不兼容的主版本：{fileMajor}，文件版本过旧，不受支持（最小设置版本 {feMajor}）",
+        "file_too_new": "不兼容的主版本：{fileMajor}，此 PleromaFE（设置版本 {feMajor}）过旧，无法处理",
+        "invalid_file": "所选文件不是受支持的 Pleroma 设置备份。没有进行任何更改。"
+      },
+      "restore_settings": "从文件恢复设置",
+      "backup_settings_theme": "备份设置和主题到文件",
+      "backup_settings": "备份设置到文件",
+      "backup_restore": "设置备份"
+    }
   },
   "time": {
     "day": "{0} 天",
@@ -829,7 +842,7 @@
     "mute": "隐藏"
   },
   "errors": {
-    "storage_unavailable": "Pleroma 无法访问浏览器储存。您的登陆名以及本地设置将不会被保存，您可能遇到意外问题。请尝试启用 cookies。"
+    "storage_unavailable": "Pleroma 无法访问浏览器储存。您的登陆以及本地设置将不会被保存，您也可能遇到未知问题。请尝试启用 cookies。"
   },
   "shoutbox": {
     "title": "留言板"

src/i18n/zh_Hant.json

@@ -57,7 +57,8 @@
     "friend_requests": "關注請求",
     "back": "後退",
     "administration": "管理員",
-    "about": "關於"
+    "about": "關於",
+    "home_timeline": "家時間線"
   },
   "media_modal": {
     "next": "往後",
@@ -328,7 +329,7 @@
     "notification_visibility_moves": "用戶遷移",
     "notification_visibility_repeats": "轉發",
     "notification_visibility_mentions": "提及",
-    "notification_visibility_likes": "點贊",
+    "notification_visibility_likes": "喜歡",
     "interfaceLanguage": "界面語言",
     "instance_default": "(默認：{value})",
     "inputRadius": "輸入框",
@@ -541,7 +542,21 @@
     "hide_media_previews": "隱藏媒體預覽",
     "word_filter": "詞過濾",
     "setting_changed": "與默認設置不同",
-    "more_settings": "更多設置"
+    "more_settings": "更多設置",
+    "save": "保存更改",
+    "file_export_import": {
+      "errors": {
+        "invalid_file": "所選文件不是受支持的Pleroma設置備份。 沒有進行任何更改。",
+        "file_too_new": "不兼容的主版本：{fileMajor}，此 PleromaFE（設置版本 {feMajor}）過舊，無法處理",
+        "file_too_old": "不兼容的主版本：{fileMajor}，文件版本過舊，不受支持（最小設置版本 {feMajor}）",
+        "file_slightly_new": "檔案的小版本不同，有些設置可能無法載入"
+      },
+      "restore_settings": "從文件還原設置",
+      "backup_settings_theme": "備份設置和主題到文件",
+      "backup_settings": "備份設置到文件",
+      "backup_restore": "設定備份"
+    },
+    "sensitive_by_default": "默認標記發文為敏感內容"
   },
   "chats": {
     "more": "更多",
@@ -657,7 +672,8 @@
     "attachments_sensitive": "標記附件為敏感內容",
     "account_not_locked_warning_link": "上鎖",
     "default": "剛剛抵達洛杉磯。",
-    "empty_status_error": "無法發佈沒有附件的空發文"
+    "empty_status_error": "不能發布沒有內容，沒有附件的發文",
+    "post": "發送"
   },
   "errors": {
     "storage_unavailable": "Pleroma無法訪問瀏覽器存儲。您的登錄名或本地設置將不會保存，您可能會遇到意外問題。嘗試啟用Cookie。"
@@ -674,7 +690,9 @@
     "up_to_date": "已是最新",
     "no_more_statuses": "没有更多發文",
     "no_statuses": "没有發文",
-    "error": "取得時間線時發生錯誤：{0}"
+    "error": "取得時間線時發生錯誤：{0}",
+    "socket_reconnected": "已建立實時連接",
+    "socket_broke": "丟失實時連接：CloseEvent代碼{0}"
   },
   "interactions": {
     "load_older": "載入更早的互動",
@@ -711,7 +729,8 @@
     "email": "電子郵箱",
     "bio": "簡介",
     "reason_placeholder": "此實例的註冊需要手動批准。\n請讓管理知道您為什麼想要註冊。",
-    "reason": "註冊理由"
+    "reason": "註冊理由",
+    "register": "註冊"
   },
   "user_card": {
     "its_you": "就是你！!",

src/main.js

@@ -11,7 +11,7 @@ import statusesModule from './modules/statuses.js'
 import usersModule from './modules/users.js'
 import apiModule from './modules/api.js'
 import configModule from './modules/config.js'
-import chatModule from './modules/chat.js'
+import shoutModule from './modules/shout.js'
 import oauthModule from './modules/oauth.js'
 import authFlowModule from './modules/auth_flow.js'
 import mediaViewerModule from './modules/media_viewer.js'
@@ -88,7 +88,7 @@ const persistedStateOptions = {
       users: usersModule,
       api: apiModule,
       config: configModule,
-      chat: chatModule,
+      shout: shoutModule,
       oauth: oauthModule,
       authFlow: authFlowModule,
       mediaViewer: mediaViewerModule,

src/modules/api.js

@@ -255,12 +255,12 @@ const api = {
     initializeSocket ({ dispatch, commit, state, rootState }) {
       // Set up websocket connection
       const token = state.wsToken
-      if (rootState.instance.chatAvailable && typeof token !== 'undefined' && state.socket === null) {
+      if (rootState.instance.shoutAvailable && typeof token !== 'undefined' && state.socket === null) {
         const socket = new Socket('/socket', { params: { token } })
         socket.connect()
 
         commit('setSocket', socket)
-        dispatch('initializeChat', socket)
+        dispatch('initializeShout', socket)
       }
     },
     disconnectFromSocket ({ commit, state }) {

src/modules/config.js

@@ -21,6 +21,7 @@ export const defaultState = {
   customThemeSource: undefined,
   hideISP: false,
   hideInstanceWallpaper: false,
+  hideShoutbox: false,
   // bad name: actually hides posts of muted USERS
   hideMutedPosts: undefined, // instance default
   collapseMessageWithSubject: undefined, // instance default
@@ -54,6 +55,7 @@ export const defaultState = {
   interfaceLanguage: browserLocale,
   hideScopeNotice: false,
   useStreamingApi: false,
+  sidebarRight: undefined, // instance default
   scopeCopy: undefined, // instance default
   subjectLineBehavior: undefined, // instance default
   alwaysShowSubjectInput: undefined, // instance default

src/modules/instance.js

@@ -19,7 +19,6 @@ const defaultState = {
   defaultBanner: '/images/banner.png',
   background: '/static/aurora_borealis.jpg',
   collapseMessageWithSubject: false,
-  disableChat: false,
   greentext: false,
   hideFilteredStatuses: false,
   hideMutedPosts: false,
@@ -58,7 +57,7 @@ const defaultState = {
   knownDomains: [],
 
   // Feature-set, apparently, not everything here is reported...
-  chatAvailable: false,
+  shoutAvailable: false,
   pleromaChatMessagesAvailable: false,
   gopherAvailable: false,
   mediaProxyAvailable: false,
@@ -108,7 +107,7 @@ const instance = {
         case 'name':
           dispatch('setPageTitle')
           break
-        case 'chatAvailable':
+        case 'shoutAvailable':
           if (value) {
             dispatch('initializeSocket')
           }

src/modules/shout.js

@@ -1,4 +1,4 @@
-const chat = {
+const shout = {
   state: {
     messages: [],
     channel: { state: '' }
@@ -16,9 +16,8 @@ const chat = {
     }
   },
   actions: {
-    initializeChat (store, socket) {
+    initializeShout (store, socket) {
       const channel = socket.channel('chat:public')
-
       channel.on('new_msg', (msg) => {
         store.commit('addMessage', msg)
       })
@@ -31,4 +30,4 @@ const chat = {
   }
 }
 
-export default chat
+export default shout

src/modules/users.js

@@ -541,7 +541,7 @@ const users = {
               if (user.token) {
                 store.dispatch('setWsToken', user.token)
 
-                // Initialize the chat socket.
+                // Initialize the shout socket.
                 store.dispatch('initializeSocket')
               }
 

src/services/file_type/file_type.service.js

@@ -2,6 +2,10 @@
 // or the entire service could be just mimetype service that only operates
 // on mimetypes and not files. Currently the naming is confusing.
 const fileType = mimetype => {
+  if (mimetype.match(/flash/)) {
+    return 'flash'
+  }
+
   if (mimetype.match(/text\/html/)) {
     return 'html'
   }

src/services/ruffle_service/ruffle_service.js

@@ -0,0 +1,40 @@
+const createRuffleService = () => {
+  let ruffleInstance = null
+
+  const getRuffle = () => new Promise((resolve, reject) => {
+    if (ruffleInstance) {
+      resolve(ruffleInstance)
+      return
+    }
+    // Ruffle needs these to be set before it's loaded
+    // https://github.com/ruffle-rs/ruffle/issues/3952
+    window.RufflePlayer = {}
+    window.RufflePlayer.config = {
+      polyfills: false,
+      publicPath: '/static/ruffle'
+    }
+
+    // Currently it's seems like a better way of loading ruffle
+    // because it needs the wasm publically accessible, but it needs path to it
+    // and filename of wasm seems to be pseudo-randomly generated (is it a hash?)
+    const script = document.createElement('script')
+    // see webpack config, using CopyPlugin to copy it from node_modules
+    // provided via ruffle-mirror
+    script.src = '/static/ruffle/ruffle.js'
+    script.type = 'text/javascript'
+    script.onerror = (e) => { reject(e) }
+    script.onabort = (e) => { reject(e) }
+    script.oncancel = (e) => { reject(e) }
+    script.onload = () => {
+      ruffleInstance = window.RufflePlayer
+      resolve(ruffleInstance)
+    }
+    document.body.appendChild(script)
+  })
+
+  return { getRuffle }
+}
+
+const RuffleService = createRuffleService()
+
+export default RuffleService

static/config.json

@@ -2,7 +2,6 @@
   "alwaysShowSubjectInput": true,
   "background": "/static/aurora_borealis.jpg",
   "collapseMessageWithSubject": false,
-  "disableChat": false,
   "greentext": false,
   "hideFilteredStatuses": false,
   "hideMutedPosts": false,