Merge branch 'vue3-again' into shigusegubu-vue3

* vue3-again: (59 commits) cleanup console log fix i18n at places fix all the spacings i could find fix spacings in notifications fix dupe id fix animations cleanup fix capitalization (and localization of tooltips for scope icon) listeners aren't actually used fix selects in settings screen fix tabs not being able to be "disabled" fix avatars not opening inline card fix other weird route fix routes test skip user profile test for now https://github.com/vuejs/test-utils/issues/1382 fix emoji input tests fix richcontent and its tests fix tests running fix mobile post button being too square fix selects ...
2022-03-24 09:33:00 +02:00 · 2022-03-24 09:33:00 +02:00 · f7c2cb95a0
commit f7c2cb95a0
parent 82793a5e8a 9793002070
96 changed files with 1375 additions and 1360 deletions
--- a/src/components/auth_form/auth_form.js
+++ b/src/components/auth_form/auth_form.js
@ -1,3 +1,4 @@
+import { h, resolveComponent } from 'vue'
 import LoginForm from '../login_form/login_form.vue'
 import MFARecoveryForm from '../mfa_form/recovery_form.vue'
 import MFATOTPForm from '../mfa_form/totp_form.vue'
@ -5,8 +6,8 @@ import { mapGetters } from 'vuex'

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

-export default Vue.component('chat-title', {
+export default {
  name: 'ChatTitle',
  components: {
-    UserAvatar
+    UserAvatar,
+    RichContent
  },
  props: [
    'user', 'withAvatar'
@ -23,4 +24,4 @@ export default Vue.component('chat-title', {
      return generateProfileLink(user.id, user.screen_name)
    }
  }
-})
+}
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@ -7,7 +7,7 @@
      type="checkbox"
      :disabled="disabled"
      :checked="checked"
-      :indeterminate.prop="indeterminate"
+      :indeterminate="indeterminate"
      @change="$emit('change', $event.target.checked)"
    >
    <i class="checkbox-indicator" />
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@ -14,25 +14,25 @@
      :checked="present"
      :disabled="disabled"
      class="opt"
-      @change="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
+      @change="$emit('update:modelValue', typeof value === 'undefined' ? fallback : undefined)"
    />
    <div class="input color-input-field">
      <input
        :id="name + '-t'"
        class="textColor unstyled"
        type="text"
-        :value="value || fallback"
+        :value="modelValue || fallback"
        :disabled="!present || disabled"
-        @input="$emit('input', $event.target.value)"
+        @input="$emit('update:modelValue', $event.target.value)"
      >
      <input
        v-if="validColor"
        :id="name"
        class="nativeColor unstyled"
        type="color"
-        :value="value || fallback"
+        :value="modelValue || fallback"
        :disabled="!present || disabled"
-        @input="$emit('input', $event.target.value)"
+        @input="$emit('update:modelValue', $event.target.value)"
      >
      <div
        v-if="transparentColor"
@ -67,7 +67,7 @@ export default {
    },
    // Color value, should be required but vue cannot tell the difference
    // between "property missing" and "property set to undefined"
-    value: {
+    modelValue: {
      required: false,
      type: String,
      default: undefined
@ -93,16 +93,16 @@ export default {
  },
  computed: {
    present () {
-      return typeof this.value !== 'undefined'
+      return typeof this.modelValue !== 'undefined'
    },
    validColor () {
-      return hex2rgb(this.value || this.fallback)
+      return hex2rgb(this.modelValue || this.fallback)
    },
    transparentColor () {
-      return this.value === 'transparent'
+      return this.modelValue === 'transparent'
    },
    computedColor () {
-      return this.value && this.value.startsWith('--')
+      return this.modelValue && this.modelValue.startsWith('--')
    }
  }
 }
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@ -27,20 +27,23 @@
          v-if="shouldShowAllConversationButton"
          class="conversation-dive-to-top-level-box"
        >
-          <i18n
-            path="status.show_all_conversation_with_icon"
+          <i18n-t
+            keypath="status.show_all_conversation_with_icon"
            tag="button"
            class="button-unstyled -link"
            @click.prevent="diveToTopLevel"
          >
-            <FAIcon
-              place="icon"
-              icon="angle-double-left"
-            />
-            <span place="text">
-              {{ $tc('status.show_all_conversation', otherTopLevelCount, { numStatus: otherTopLevelCount }) }}
-            </span>
-          </i18n>
+            <template #icon>
+              <FAIcon
+                icon="angle-double-left"
+              />
+            </template>
+            <template #text>
+              <span>
+                {{ $tc('status.show_all_conversation', otherTopLevelCount, { numStatus: otherTopLevelCount }) }}
+              </span>
+            </template>
+          </i18n-t>
        </div>
        <div
          v-if="shouldShowAncestors"
@ -96,20 +99,23 @@
              <div
                class="thread-ancestor-dive-box-inner"
              >
-                <i18n
+                <i18n-t
                  tag="button"
-                  path="status.ancestor_follow_with_icon"
+                  keypath="status.ancestor_follow_with_icon"
                  class="button-unstyled -link thread-tree-show-replies-button"
                  @click.prevent="diveIntoStatus(status.id)"
                >
-                  <FAIcon
-                    place="icon"
-                    icon="angle-double-right"
-                  />
-                  <span place="text">
-                    {{ $tc('status.ancestor_follow', getReplies(status.id).length - 1, { numReplies: getReplies(status.id).length - 1 }) }}
-                  </span>
-                </i18n>
+                  <template #icon>
+                    <FAIcon
+                      icon="angle-double-right"
+                    />
+                  </template>
+                  <template #text>
+                    <span>
+                      {{ $tc('status.ancestor_follow', getReplies(status.id).length - 1, { numReplies: getReplies(status.id).length - 1 }) }}
+                    </span>
+                  </template>
+                </i18n-t>
              </div>
            </div>
          </div>
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@ -34,7 +34,7 @@
        <search-bar
          v-if="currentUser || !privateMode"
          @toggled="onSearchBarToggled"
-          @click.stop.native
+          @click.stop
        />
        <button
          class="button-unstyled nav-icon"
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@ -31,6 +31,7 @@ library.add(
 */

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

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

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

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

-      <span>{{ processingMessage }}</span>
+      <span>{{ processingMessage || $t('exporter.processing') }}</span>
    </div>
    <button
      v-else
      class="btn button-default"
      @click="process"
    >
-      {{ exportButtonLabel }}
+      {{ exportButtonLabel || $t('exporter.export') }}
    </button>
  </div>
 </template>
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@ -1,4 +1,4 @@
-import { set } from 'vue'
+import { set } from 'lodash'
 import Select from '../select/select.vue'

 export default {
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@ -15,13 +15,14 @@
      class="opt exlcude-disabled"
      type="checkbox"
      :checked="present"
-      @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
+      @input="$emit('update:modelValue', typeof value === 'undefined' ? fallback : undefined)"
    >
    <label
      v-if="typeof fallback !== 'undefined'"
      class="opt-l"
      :for="name + '-o'"
    />
+    {{ ' ' }}
    <Select
      :id="name + '-font-switcher'"
      v-model="preset"
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@ -1,5 +1,5 @@
 import Attachment from '../attachment/attachment.vue'
-import { sumBy } from 'lodash'
+import { sumBy, set } from 'lodash'

 const Gallery = {
  props: [
@ -85,7 +85,7 @@ const Gallery = {
  },
  methods: {
    onNaturalSizeLoad ({ id, width, height }) {
-      this.$set(this.sizes, id, { width, height })
+      set(this.sizes, id, { width, height })
    },
    rowStyle (row) {
      if (row.audio) {
--- a/src/components/importer/importer.js
+++ b/src/components/importer/importer.js
@ -15,24 +15,9 @@ const Importer = {
      type: Function,
      required: true
    },
-    submitButtonLabel: {
-      type: String,
-      default () {
-        return this.$t('importer.submit')
-      }
-    },
-    successMessage: {
-      type: String,
-      default () {
-        return this.$t('importer.success')
-      }
-    },
-    errorMessage: {
-      type: String,
-      default () {
-        return this.$t('importer.error')
-      }
-    }
+    submitButtonLabel: { type: String },
+    successMessage: { type: String },
+    errorMessage: { type: String }
  },
  data () {
    return {
--- a/src/components/importer/importer.vue
+++ b/src/components/importer/importer.vue
@ -18,21 +18,21 @@
      class="btn button-default"
      @click="submit"
    >
-      {{ submitButtonLabel }}
+      {{ submitButtonLabel || $t('importer.submit') }}
    </button>
    <div v-if="success">
      <FAIcon
        icon="times"
        @click="dismiss"
      />
-      <p>{{ successMessage }}</p>
+      <p>{{ successMessage || $t('importer.success') }}</p>
    </div>
    <div v-else-if="error">
      <FAIcon
        icon="times"
        @click="dismiss"
      />
-      <p>{{ errorMessage }}</p>
+      <p>{{ errorMessage || $t('importer.error') }}</p>
    </div>
  </div>
 </template>
--- a/src/components/interactions/interactions.js
+++ b/src/components/interactions/interactions.js
@ -1,4 +1,5 @@
 import Notifications from '../notifications/notifications.vue'
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'

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

--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@ -3,6 +3,7 @@
    <label for="interface-language-switcher">
      {{ $t('settings.interfaceLanguage') }}
    </label>
+    {{ ' ' }}
    <Select
      id="interface-language-switcher"
      v-model="language"
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@ -142,7 +142,7 @@ const MediaModal = {
    document.addEventListener('keyup', this.handleKeyupEvent)
    document.addEventListener('keydown', this.handleKeydownEvent)
  },
-  destroyed () {
+  unmounted () {
    window.removeEventListener('popstate', this.hide)
    document.removeEventListener('keyup', this.handleKeyupEvent)
    document.removeEventListener('keydown', this.handleKeydownEvent)
--- a/src/components/mobile_post_status_button/mobile_post_status_button.js
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
@ -29,7 +29,7 @@ const MobilePostStatusButton = {
    }
    window.addEventListener('resize', this.handleOSK)
  },
-  destroyed () {
+  unmounted () {
    if (this.autohideFloatingPostButton) {
      this.deactivateFloatingPostButtonAutohide()
    }
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@ -1,13 +1,12 @@
 <template>
-  <div v-if="isLoggedIn">
-    <button
-      class="button-default new-status-button"
-      :class="{ 'hidden': isHidden, 'always-show': isPersistent }"
-      @click="openPostForm"
-    >
-      <FAIcon icon="pen" />
-    </button>
-  </div>
+  <button
+    v-if="isLoggedIn"
+    class="MobilePostButton button-default new-status-button"
+    :class="{ 'hidden': isHidden, 'always-show': isPersistent }"
+    @click="openPostForm"
+  >
+    <FAIcon icon="pen" />
+  </button>
 </template>

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

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

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

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

--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@ -33,7 +33,7 @@
    >
      <a
        class="avatar-container"
-        :href="notification.from_profile.statusnet_profile_url"
+        :href="$router.resolve(userProfileLink).href"
        @click.stop.prevent.capture="toggleUserExpanded"
      >
        <UserAvatar
@ -65,12 +65,16 @@
              v-else
              class="username"
              :title="'@'+notification.from_profile.screen_name_ui"
-            >{{ notification.from_profile.name }}</span>
+            >
+              {{ notification.from_profile.name }}
+            </span>
+            {{ ' ' }}
            <span v-if="notification.type === 'like'">
              <FAIcon
                class="type-icon"
                icon="star"
              />
+              {{ ' ' }}
              <small>{{ $t('notifications.favorited_you') }}</small>
            </span>
            <span v-if="notification.type === 'repeat'">
@ -79,6 +83,7 @@
                icon="retweet"
                :title="$t('tool_tip.repeat')"
              />
+              {{ ' ' }}
              <small>{{ $t('notifications.repeated_you') }}</small>
            </span>
            <span v-if="notification.type === 'follow'">
@ -86,6 +91,7 @@
                class="type-icon"
                icon="user-plus"
              />
+              {{ ' ' }}
              <small>{{ $t('notifications.followed_you') }}</small>
            </span>
            <span v-if="notification.type === 'follow_request'">
@ -93,6 +99,7 @@
                class="type-icon"
                icon="user"
              />
+              {{ ' ' }}
              <small>{{ $t('notifications.follow_request') }}</small>
            </span>
            <span v-if="notification.type === 'move'">
@ -100,13 +107,14 @@
                class="type-icon"
                icon="suitcase-rolling"
              />
+              {{ ' ' }}
              <small>{{ $t('notifications.migrated_to') }}</small>
            </span>
            <span v-if="notification.type === 'pleroma:emoji_reaction'">
              <small>
-                <i18n path="notifications.reacted_with">
+                <i18n-t keypath="notifications.reacted_with">
                  <span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
-                </i18n>
+                </i18n-t>
              </small>
            </span>
          </div>
--- a/src/components/opacity_input/opacity_input.vue
+++ b/src/components/opacity_input/opacity_input.vue
@ -14,7 +14,7 @@
      :checked="present"
      :disabled="disabled"
      class="opt"
-      @change="$emit('input', !present ? fallback : undefined)"
+      @change="$emit('update:modelValue', !present ? fallback : undefined)"
    />
    <input
      :id="name"
@ -25,7 +25,7 @@
      max="1"
      min="0"
      step=".05"
-      @input="$emit('input', $event.target.value)"
+      @input="$emit('update:modelValue', $event.target.value)"
    >
  </div>
 </template>
--- a/src/components/poll/poll.js
+++ b/src/components/poll/poll.js
@ -21,7 +21,7 @@ export default {
    }
    this.$store.dispatch('trackPoll', this.pollId)
  },
-  destroyed () {
+  unmounted () {
    this.$store.dispatch('untrackPoll', this.pollId)
  },
  computed: {
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@ -71,13 +71,13 @@
          {{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }}&nbsp;·&nbsp;
        </template>
      </div>
-      <i18n :path="expired ? 'polls.expired' : 'polls.expires_in'">
+      <i18n-t :keypath="expired ? 'polls.expired' : 'polls.expires_in'">
        <Timeago
          :time="expiresAt"
          :auto-update="60"
          :now-threshold="0"
        />
-      </i18n>
+      </i18n-t>
    </div>
  </div>
 </template>
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@ -72,6 +72,7 @@
          :max="maxExpirationInCurrentUnit"
          @change="expiryAmountChange"
        >
+        {{ ' ' }}
        <Select
          v-model="expiryUnit"
          unstyled="true"
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@ -178,7 +178,7 @@ const Popover = {
  created () {
    document.addEventListener('click', this.onClickOutside)
  },
-  destroyed () {
+  unmounted () {
    document.removeEventListener('click', this.onClickOutside)
    this.hidePopover()
  }
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@ -18,9 +18,9 @@
        <FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
      </div>
      <div class="form-group">
-        <i18n
+        <i18n-t
          v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
-          path="post_status.account_not_locked_warning"
+          keypath="post_status.account_not_locked_warning"
          tag="p"
          class="visibility-notice"
        >
@ -30,7 +30,7 @@
          >
            {{ $t('post_status.account_not_locked_warning_link') }}
          </button>
-        </i18n>
+        </i18n-t>
        <p
          v-if="!hideScopeNotice && newStatus.visibility === 'public'"
          class="visibility-notice notice-dismissible"
--- a/src/components/public_and_external_timeline/public_and_external_timeline.js
+++ b/src/components/public_and_external_timeline/public_and_external_timeline.js
@ -9,7 +9,7 @@ const PublicAndExternalTimeline = {
  created () {
    this.$store.dispatch('startFetchingTimeline', { timeline: 'publicAndExternal' })
  },
-  destroyed () {
+  unmounted () {
    this.$store.dispatch('stopFetchingTimeline', 'publicAndExternal')
  }
 }
--- a/src/components/public_timeline/public_timeline.js
+++ b/src/components/public_timeline/public_timeline.js
@ -9,7 +9,7 @@ const PublicTimeline = {
  created () {
    this.$store.dispatch('startFetchingTimeline', { timeline: 'public' })
  },
-  destroyed () {
+  unmounted () {
    this.$store.dispatch('stopFetchingTimeline', 'public')
  }

--- a/src/components/range_input/range_input.vue
+++ b/src/components/range_input/range_input.vue
@ -15,7 +15,7 @@
      class="opt"
      type="checkbox"
      :checked="present"
-      @input="$emit('input', !present ? fallback : undefined)"
+      @input="$emit('update:modelValue', !present ? fallback : undefined)"
    >
    <label
      v-if="typeof fallback !== 'undefined'"
@ -31,7 +31,7 @@
      :max="max || hardMax || 100"
      :min="min || hardMin || 0"
      :step="step || 1"
-      @input="$emit('input', $event.target.value)"
+      @input="$emit('update:modelValue', $event.target.value)"
    >
    <input
      :id="name"
@ -42,7 +42,7 @@
      :max="hardMax"
      :min="hardMin"
      :step="step || 1"
-      @input="$emit('input', $event.target.value)"
+      @input="$emit('update:modelValue', $event.target.value)"
    >
  </div>
 </template>
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@ -1,9 +1,9 @@
-import { validationMixin } from 'vuelidate'
-import { required, requiredIf, sameAs } from 'vuelidate/lib/validators'
+import useVuelidate from '@vuelidate/core'
+import { required, requiredIf, sameAs } from '@vuelidate/validators'
 import { mapActions, mapState } from 'vuex'

 const registration = {
-  mixins: [validationMixin],
+  setup () { return { v$: useVuelidate() } },
  data: () => ({
    user: {
      email: '',
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@ -1,4 +1,3 @@
-import Vue from 'vue'
 import { unescape, flattenDeep } from 'lodash'
 import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js'
 import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
@ -27,7 +26,7 @@ import './rich_content.scss'
 *
 * Apart from that one small hiccup with emit in render this _should_ be vue3-ready
 */
-export default Vue.component('RichContent', {
+export default {
  name: 'RichContent',
  props: {
    // Original html content
@ -58,7 +57,7 @@ export default Vue.component('RichContent', {
    }
  },
  // NEVER EVER TOUCH DATA INSIDE RENDER
-  render (h) {
+  render () {
    // Pre-process HTML
    const { newHtml: html } = preProcessPerLine(this.html, this.greentext)
    let currentMentions = null // Current chain of mentions, we group all mentions together
@ -76,18 +75,18 @@ export default Vue.component('RichContent', {

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

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

    const renderMention = (attrs, children) => {
@ -222,7 +221,7 @@ export default Vue.component('RichContent', {
              attrs.target = '_blank'
              const newChildren = [...children].reverse().map(processItemReverse).reverse()

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

    return result
  }
-})
+}

 const getLinkData = (attrs, children, index) => {
  const stripTags = (item) => {
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@ -16,6 +16,7 @@
        class="fa-scale-110 fa-old-padding"
      />
    </button>
+    {{ ' ' }}
    <button
      v-if="showPrivate"
      class="button-unstyled scope"
@ -29,6 +30,7 @@
        class="fa-scale-110 fa-old-padding"
      />
    </button>
+    {{ ' ' }}
    <button
      v-if="showUnlisted"
      class="button-unstyled scope"
@ -42,6 +44,7 @@
        class="fa-scale-110 fa-old-padding"
      />
    </button>
+    {{ ' ' }}
    <button
      v-if="showPublic"
      class="button-unstyled scope"
--- a/src/components/select/select.js
+++ b/src/components/select/select.js
@ -8,12 +8,9 @@ library.add(
 )

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

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

  select {
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@ -14,6 +14,7 @@
      >
        <slot />
      </span>
+      {{ ' ' }}
      <ModifiedIndicator :changed="isChanged" /><ServerSideIndicator :server-side="isServerSide" /> </Checkbox>
  </label>
 </template>
--- a/src/components/settings_modal/helpers/choice_setting.vue
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@ -4,10 +4,11 @@
    class="ChoiceSetting"
  >
    <slot />
+    {{ ' ' }}
    <Select
-      :value="state"
+      :modelValue="state"
      :disabled="disabled"
-      @change="update"
+      @update:modelValue="update"
    >
      <option
        v-for="option in options"
--- a/src/components/settings_modal/helpers/integer_setting.vue
+++ b/src/components/settings_modal/helpers/integer_setting.vue
@ -16,6 +16,7 @@
      :value="state"
      @change="update"
    >
+    {{ ' ' }}
    <ModifiedIndicator :changed="isChanged" />
  </span>
 </template>
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@ -11,7 +11,7 @@
          {{ $t('settings.settings') }}
        </span>
        <transition name="fade">
-          <template v-if="currentSaveStateNotice">
+          <div v-if="currentSaveStateNotice">
            <div
              v-if="currentSaveStateNotice.error"
              class="alert error"
@ -27,7 +27,7 @@
            >
              {{ $t('settings.saving_ok') }}
            </div>
-          </template>
+          </div>
        </transition>
        <button
          class="btn button-default"
@ -68,6 +68,7 @@
              :title="$t('general.close')"
            >
              <span>{{ $t("settings.file_export_import.backup_restore") }}</span>
+              {{ ' ' }}
              <FAIcon
                icon="chevron-down"
              />
@ -109,7 +110,7 @@
          </template>
        </Popover>

-        <Checkbox v-model="expertLevel">
+        <Checkbox :checked="!!expertLevel" @change="expertLevel = Number($event)">
          {{ $t("settings.expert_mode") }}
        </Checkbox>
      </div>
--- a/src/components/settings_modal/settings_modal_content.js
+++ b/src/components/settings_modal/settings_modal_content.js
@ -1,4 +1,4 @@
-import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'

 import DataImportExportTab from './tabs/data_import_export_tab.vue'
 import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
@ -53,6 +53,9 @@ const SettingsModalContent = {
    },
    open () {
      return this.$store.state.interface.settingsModalState !== 'hidden'
+    },
+    bodyLock () {
+      return this.$store.state.interface.settingsModalState === 'visible'
    }
  },
  methods: {
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@ -4,6 +4,7 @@
    class="settings_tab-switcher"
    :side-tab-bar="true"
    :scrollable-tabs="true"
+    :body-scroll-lock="bodyLock"
  >
    <div
      :label="$t('settings.general')"
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
@ -2,7 +2,7 @@ import get from 'lodash/get'
 import map from 'lodash/map'
 import reject from 'lodash/reject'
 import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
-import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import BlockCard from 'src/components/block_card/block_card.vue'
 import MuteCard from 'src/components/mute_card/mute_card.vue'
 import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue'
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@ -29,14 +29,14 @@
              {{ $t('settings.style.preview.content') }}
            </h4>

-            <i18n path="settings.style.preview.text">
+            <i18n-t keypath="settings.style.preview.text">
              <code style="font-family: var(--postCodeFont)">
                {{ $t('settings.style.preview.mono') }}
              </code>
              <a style="color: var(--link)">
                {{ $t('settings.style.preview.link') }}
              </a>
-            </i18n>
+            </i18n-t>

            <div class="icons">
              <FAIcon
@ -72,15 +72,15 @@
            :^)
          </div>
          <div class="content">
-            <i18n
-              path="settings.style.preview.fine_print"
+            <i18n-t
+              keypath="settings.style.preview.fine_print"
              tag="span"
              class="faint"
            >
              <a style="color: var(--faintLink)">
                {{ $t('settings.style.preview.faint_link') }}
              </a>
-            </i18n>
+            </i18n-t>
          </div>
        </div>
        <div class="separator" />
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@ -1,4 +1,3 @@
-import { set, delete as del } from 'vue'
 import {
  rgb2hex,
  hex2rgb,
@ -34,7 +33,7 @@ import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
 import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
 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 TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Select from 'src/components/select/select.vue'

@ -320,9 +319,9 @@ export default {
      },
      set (val) {
        if (val) {
-          set(this.shadowsLocal, this.shadowSelected, this.currentShadowFallback.map(_ => Object.assign({}, _)))
+          this.shadowsLocal[this.shadowSelected] = this.currentShadowFallback.map(_ => Object.assign({}, _))
        } else {
-          del(this.shadowsLocal, this.shadowSelected)
+          delete this.shadowsLocal[this.shadowSelected]
        }
      }
    },
@ -334,7 +333,7 @@ export default {
        return this.shadowsLocal[this.shadowSelected]
      },
      set (v) {
-        set(this.shadowsLocal, this.shadowSelected, v)
+        this.shadowsLocal[this.shadowSelected] = v
      }
    },
    themeValid () {
@ -557,7 +556,7 @@ export default {
        .filter(_ => _.endsWith('ColorLocal') || _.endsWith('OpacityLocal'))
        .filter(_ => !v1OnlyNames.includes(_))
        .forEach(key => {
-          set(this.$data, key, undefined)
+          this.$data[key] = undefined
        })
    },

@ -565,7 +564,7 @@ export default {
      Object.keys(this.$data)
        .filter(_ => _.endsWith('RadiusLocal'))
        .forEach(key => {
-          set(this.$data, key, undefined)
+          this.$data[key] = undefined
        })
    },

@ -573,7 +572,7 @@ export default {
      Object.keys(this.$data)
        .filter(_ => _.endsWith('OpacityLocal'))
        .forEach(key => {
-          set(this.$data, key, undefined)
+          this.$data[key] = undefined
        })
    },

--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@ -903,6 +903,7 @@
          <div class="tab-header shadow-selector">
            <div class="select-container">
              {{ $t('settings.style.shadows.component') }}
+              {{ ' ' }}
              <Select
                id="shadow-switcher"
                v-model="shadowSelected"
@ -924,6 +925,7 @@
              >
                {{ $t('settings.style.shadows.override') }}
              </label>
+              {{ ' ' }}
              <input
                id="override"
                v-model="currentShadowOverriden"
@ -949,27 +951,27 @@
            :fallback="currentShadowFallback"
          />
          <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
-            <i18n
-              path="settings.style.shadows.filter_hint.always_drop_shadow"
+            <i18n-t
+              keypath="settings.style.shadows.filter_hint.always_drop_shadow"
              tag="p"
            >
              <code>filter: drop-shadow()</code>
-            </i18n>
+            </i18n-t>
            <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
-            <i18n
-              path="settings.style.shadows.filter_hint.drop_shadow_syntax"
+            <i18n-t
+              keypath="settings.style.shadows.filter_hint.drop_shadow_syntax"
              tag="p"
            >
              <code>drop-shadow</code>
              <code>spread-radius</code>
              <code>inset</code>
-            </i18n>
-            <i18n
-              path="settings.style.shadows.filter_hint.inset_classic"
+            </i18n-t>
+            <i18n-t
+              keypath="settings.style.shadows.filter_hint.inset_classic"
              tag="p"
            >
              <code>box-shadow</code>
-            </i18n>
+            </i18n-t>
            <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
          </div>
        </div>
--- a/src/components/settings_modal/tabs/version_tab.vue
+++ b/src/components/settings_modal/tabs/version_tab.vue
@ -28,4 +28,4 @@
    </div>
  </div>
 </template>
-<script src="./version_tab.js">
+<script src="./version_tab.js" />
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@ -204,12 +204,12 @@
        v-model="selected.alpha"
        :disabled="!present"
      />
-      <i18n
-        path="settings.style.shadows.hintV3"
+      <i18n-t
+        keypath="settings.style.shadows.hintV3"
        tag="p"
      >
        <code>--variable,mod</code>
-      </i18n>
+      </i18n-t>
    </div>
  </div>
 </template>
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@ -389,6 +389,9 @@ const Status = {
    },
    threadShowing () {
      return this.controlledThreadDisplayStatus === 'showing'
+    },
+    visibilityLocalized () {
+      return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
    }
  },
  methods: {
@ -478,11 +481,6 @@ const Status = {
    'isSuspendable': function (val) {
      this.suspendable = val
    }
-  },
-  filters: {
-    capitalize: function (str) {
-      return str.charAt(0).toUpperCase() + str.slice(1)
-    }
  }
 }

--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@ -1,6 +1,7 @@
 <template>
  <div
    v-if="!hideStatus"
+    ref="root"
    class="Status"
    :class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
  >
@ -120,9 +121,9 @@
          v-if="!noHeading"
          class="left-side"
        >
-          <router-link
-            :to="userProfileLink"
-            @click.stop.prevent.capture.native="toggleUserExpanded"
+          <a
+            :href="$router.resolve(userProfileLink).href"
+            @click.stop.prevent.capture="toggleUserExpanded"
          >
            <UserAvatar
              class="post-avatar"
@ -131,7 +132,7 @@
              :better-shadow="betterShadow"
              :user="status.user"
            />
-          </router-link>
+          </a>
        </div>
        <div class="right-side">
          <UserCard
@ -191,7 +192,7 @@
                <span
                  v-if="status.visibility"
                  class="visibility-icon"
-                  :title="status.visibility | capitalize"
+                  :title="visibilityLocalized"
                >
                  <FAIcon
                    fixed-width
@ -274,6 +275,7 @@
                      icon="reply"
                      flip="horizontal"
                    />
+                    {{ ' ' }}
                    <span
                      class="reply-to-text"
                    >
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@ -1,6 +1,7 @@
 import { find } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+import { defineAsyncComponent } from 'vue'

 library.add(
  faCircleNotch
@ -22,8 +23,8 @@ const StatusPopover = {
    }
  },
  components: {
-    Status: () => import('../status/status.vue'),
-    Popover: () => import('../popover/popover.vue')
+    Status: defineAsyncComponent(() => import('../status/status.vue')),
+    Popover: defineAsyncComponent(() => import('../popover/popover.vue'))
  },
  methods: {
    enter () {
--- a/src/components/sticker_picker/sticker_picker.js
+++ b/src/components/sticker_picker/sticker_picker.js
@ -1,6 +1,6 @@
 /* eslint-env browser */
 import statusPosterService from '../../services/status_poster/status_poster.service.js'
-import TabSwitcher from '../tab_switcher/tab_switcher.js'
+import TabSwitcher from '../tab_switcher/tab_switcher.jsx'

 const StickerPicker = {
  components: {
--- a/src/components/tab_switcher/tab_switcher.jsx
+++ b/src/components/tab_switcher/tab_switcher.jsx
@ -1,10 +1,13 @@
-import Vue from 'vue'
+// eslint-disable-next-line no-unused
+import { h, Fragment } from 'vue'
 import { mapState } from 'vuex'
 import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'

 import './tab_switcher.scss'

-export default Vue.component('tab-switcher', {
+const findFirstUsable = (slots) => slots.findIndex(_ => _.props)
+
+export default {
  name: 'TabSwitcher',
  props: {
    renderOnlyFocused: {
@ -31,33 +34,35 @@ export default Vue.component('tab-switcher', {
      required: false,
      type: Boolean,
      default: false
+    },
+    bodyScrollLock: {
+      required: false,
+      type: Boolean,
+      default: false
    }
  },
  data () {
    return {
-      active: this.$slots.default.findIndex(_ => _.tag)
+      active: findFirstUsable(this.slots())
    }
  },
  computed: {
    activeIndex () {
      // In case of controlled component
      if (this.activeTab) {
-        return this.$slots.default.findIndex(slot => this.activeTab === slot.key)
+        return this.slots().findIndex(slot => this.activeTab === slot.key)
      } else {
        return this.active
      }
    },
-    settingsModalVisible () {
-      return this.settingsModalState === 'visible'
-    },
    ...mapState({
      settingsModalState: state => state.interface.settingsModalState
    })
  },
  beforeUpdate () {
-    const currentSlot = this.$slots.default[this.active]
-    if (!currentSlot.tag) {
-      this.active = this.$slots.default.findIndex(_ => _.tag)
+    const currentSlot = this.slots()[this.active]
+    if (!currentSlot.props) {
+      this.active = findFirstUsable(this.slots())
    }
  },
  methods: {
@ -67,9 +72,16 @@ export default Vue.component('tab-switcher', {
        this.setTab(index)
      }
    },
+    // DO NOT put it to computed, it doesn't work (caching?)
+    slots () {
+      if (this.$slots.default()[0].type === Fragment) {
+        return this.$slots.default()[0].children
+      }
+      return this.$slots.default()
+    },
    setTab (index) {
      if (typeof this.onSwitch === 'function') {
-        this.onSwitch.call(null, this.$slots.default[index].key)
+        this.onSwitch.call(null, this.slots()[index].key)
      }
      this.active = index
      if (this.scrollableTabs) {
@ -77,27 +89,28 @@ export default Vue.component('tab-switcher', {
      }
    }
  },
-  render (h) {
-    const tabs = this.$slots.default
+  render () {
+    const tabs = this.slots()
      .map((slot, index) => {
-        if (!slot.tag) return
+        const props = slot.props
+        if (!props) return
        const classesTab = ['tab', 'button-default']
        const classesWrapper = ['tab-wrapper']
        if (this.activeIndex === index) {
          classesTab.push('active')
          classesWrapper.push('active')
        }
-        if (slot.data.attrs.image) {
+        if (props.image) {
          return (
            <div class={classesWrapper.join(' ')}>
              <button
-                disabled={slot.data.attrs.disabled}
+                disabled={props.disabled}
                onClick={this.clickTab(index)}
                class={classesTab.join(' ')}
                type="button"
              >
-                <img src={slot.data.attrs.image} title={slot.data.attrs['image-tooltip']}/>
-                {slot.data.attrs.label ? '' : slot.data.attrs.label}
+                <img src={props.image} title={props['image-tooltip']}/>
+                {props.label ? '' : props.label}
              </button>
            </div>
          )
@ -105,25 +118,26 @@ export default Vue.component('tab-switcher', {
        return (
          <div class={classesWrapper.join(' ')}>
            <button
-              disabled={slot.data.attrs.disabled}
+              disabled={props.disabled}
              onClick={this.clickTab(index)}
              class={classesTab.join(' ')}
              type="button"
            >
-              {!slot.data.attrs.icon ? '' : (<FAIcon class="tab-icon" size="2x" fixed-width icon={slot.data.attrs.icon}/>)}
+              {!props.icon ? '' : (<FAIcon class="tab-icon" size="2x" fixed-width icon={props.icon}/>)}
              <span class="text">
-                {slot.data.attrs.label}
+                {props.label}
              </span>
            </button>
          </div>
        )
      })

-    const contents = this.$slots.default.map((slot, index) => {
-      if (!slot.tag) return
+    const contents = this.slots().map((slot, index) => {
+      const props = slot.props
+      if (!props) return
      const active = this.activeIndex === index
      const classes = [ active ? 'active' : 'hidden' ]
-      if (slot.data.attrs.fullHeight) {
+      if (props.fullHeight) {
        classes.push('full-height')
      }
      const renderSlot = (!this.renderOnlyFocused || active)
@ -134,7 +148,7 @@ export default Vue.component('tab-switcher', {
        <div class={classes}>
          {
            this.sideTabBar
-              ? <h1 class="mobile-label">{slot.data.attrs.label}</h1>
+              ? <h1 class="mobile-label">{props.label}</h1>
              : ''
          }
          {renderSlot}
@ -147,10 +161,14 @@ export default Vue.component('tab-switcher', {
        <div class="tabs">
          {tabs}
        </div>
-        <div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock={this.settingsModalVisible}>
+        <div
+          ref="contents"
+          class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}
+          v-body-scroll-lock={this.bodyScrollLock}
+        >
          {contents}
        </div>
      </div>
    )
  }
-})
+}
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@ -166,13 +166,6 @@
    position: relative;
    white-space: nowrap;
    padding: 6px 1em;
-    background-color: $fallback--fg;
-    background-color: var(--tab, $fallback--fg);
-
-    &, &:active .tab-icon {
-      color: $fallback--text;
-      color: var(--tabText, $fallback--text);
-    }

    &:not(.active) {
      z-index: 4;
--- a/src/components/tag_timeline/tag_timeline.js
+++ b/src/components/tag_timeline/tag_timeline.js
@ -18,7 +18,7 @@ const TagTimeline = {
      this.$store.dispatch('startFetchingTimeline', { timeline: 'tag', tag: this.tag })
    }
  },
-  destroyed () {
+  unmounted () {
    this.$store.dispatch('stopFetchingTimeline', 'tag')
  }
 }
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@ -74,36 +74,42 @@
      v-if="currentReplies.length && !threadShowing"
      class="thread-tree-replies thread-tree-replies-hidden"
    >
-      <i18n
+      <i18n-t
        v-if="simple"
        tag="button"
-        path="status.thread_follow_with_icon"
+        keypath="status.thread_follow_with_icon"
        class="button-unstyled -link thread-tree-show-replies-button"
        @click.prevent="dive(status.id)"
      >
-        <FAIcon
-          place="icon"
-          icon="angle-double-right"
-        />
-        <span place="text">
-          {{ $tc('status.thread_follow', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id] }) }}
-        </span>
-      </i18n>
-      <i18n
+        <template #icon>
+          <FAIcon
+            icon="angle-double-right"
+          />
+        </template>
+        <template #text>
+          <span>
+            {{ $tc('status.thread_follow', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id] }) }}
+          </span>
+        </template>
+      </i18n-t>
+      <i18n-t
        v-else
        tag="button"
-        path="status.thread_show_full_with_icon"
+        keypath="status.thread_show_full_with_icon"
        class="button-unstyled -link thread-tree-show-replies-button"
        @click.prevent="showThreadRecursively(status.id)"
      >
-        <FAIcon
-          place="icon"
-          icon="angle-double-down"
-        />
-        <span place="text">
-          {{ $tc('status.thread_show_full', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }}
-        </span>
-      </i18n>
+        <template #icon>
+          <FAIcon
+            icon="angle-double-down"
+          />
+        </template>
+        <template #text>
+          <span>
+            {{ $tc('status.thread_show_full', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }}
+          </span>
+        </template>
+      </i18n-t>
    </div>
  </div>
 </template>
--- a/src/components/timeago/timeago.vue
+++ b/src/components/timeago/timeago.vue
@ -31,7 +31,7 @@ export default {
  created () {
    this.refreshRelativeTimeObject()
  },
-  destroyed () {
+  unmounted () {
    clearTimeout(this.interval)
  },
  methods: {
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@ -104,7 +104,7 @@ const Timeline = {
    window.addEventListener('keydown', this.handleShortKey)
    setTimeout(this.determineVisibleStatuses, 250)
  },
-  destroyed () {
+  unmounted () {
    window.removeEventListener('scroll', this.handleScroll)
    window.removeEventListener('keydown', this.handleShortKey)
    if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@ -141,6 +141,7 @@
              class="userHighlightCl"
              type="color"
            >
+            {{ ' ' }}
            <Select
              :id="'userHighlightSel'+user.id"
              v-model="userHighlightType"
--- a/src/components/user_list_popover/user_list_popover.js
+++ b/src/components/user_list_popover/user_list_popover.js
@ -1,3 +1,5 @@
+import { defineAsyncComponent } from 'vue'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'

@ -11,8 +13,8 @@ const UserListPopover = {
    'users'
  ],
  components: {
-    Popover: () => import('../popover/popover.vue'),
-    UserAvatar: () => import('../user_avatar/user_avatar.vue')
+    Popover: defineAsyncComponent(() => import('../popover/popover.vue')),
+    UserAvatar: defineAsyncComponent(() => import('../user_avatar/user_avatar.vue'))
  },
  computed: {
    usersCapped () {
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@ -2,7 +2,7 @@
  <div class="user-panel">
    <div
      v-if="signedIn"
-      key="user-panel"
+      key="user-panel-signed"
      class="panel panel-default signed-in"
    >
      <UserCard
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@ -3,7 +3,7 @@ import UserCard from '../user_card/user_card.vue'
 import FollowCard from '../follow_card/follow_card.vue'
 import Timeline from '../timeline/timeline.vue'
 import Conversation from '../conversation/conversation.vue'
-import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import List from '../list/list.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
@ -47,7 +47,7 @@ const UserProfile = {
    this.load(routeParams.name || routeParams.id)
    this.tab = get(this.$route, 'query.tab', defaultTabKey)
  },
-  destroyed () {
+  unmounted () {
    this.stopFetching()
  },
  computed: {