Merge branch 'fix/merge-conflicts/report-notifications' into 'feat/report-notification'

Fixing merge conflicts and lint for report notifications MR See merge request pleroma/pleroma-fe!1585
2022-08-07 06:38:56 +00:00 · 2022-08-07 06:38:56 +00:00 · 572f28d7c9
parent 18d69f93d3 6a2f427072
commit 572f28d7c9
166 changed files with 2376 additions and 1604 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,7 +1,7 @@
 module.exports = {
  root: true,
  parserOptions: {
-    parser: 'babel-eslint',
+    parser: '@babel/eslint-parser',
    sourceType: 'module'
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
@ -21,6 +21,7 @@ module.exports = {
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'vue/require-prop-types': 0
+    'vue/require-prop-types': 0,
+    'vue/multi-word-component-names': 0
  }
 }
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -1,7 +1,7 @@
 # This file is a template, and might need editing before it works on your project.
 # Official framework image. Look for the different tagged releases at:
 # https://hub.docker.com/r/library/node/tags/
-image: node:12
+image: node:16

 stages:
  - lint
--- a/.node-version
+++ b/.node-version
@ -1 +1 @@
-7.2.1
+16.16.0
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -16,17 +16,26 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Attachments are ALWAYS in same order as user uploaded, no more "videos first"
 - Attachment description is prefilled with backend-provided default when uploading
 - Proper visual feedback that next image is loading when browsing
+- UI no longer lags when switching between mobile and desktop mode
+- Popovers no longer constrained by DOM hierarchy, shouldn't be cut off by anything
+- "Always show mobile button" is working now

 ### Changed
+- Using Vue 3 now
 - (You)s are optional (opt-in) now, bolding your nickname is also optional (opt-out)
 - User highlight background now also covers the `@`
 - Reverted back to textual `@`, svg version is opt-in.
- Settings window has been throughly rearranged to make make more sense and make navication settings easier.
+- Settings window has been thoroughly rearranged to make more sense and make navigation settings easier.
 - Uploaded attachments are uniform with displayed attachments
 - Flash is watchable in media-modal (takes up nearly full screen though due to sizing issues)
 - Notifications about likes/repeats/emoji reacts are now minimized so they always take up same amount of space irrelevant to size of post.
+- Slight width/spacing adjustments
+- More sizing stuff is font-size dependent now
+- Scrollbars are styled/colorized now
+- Scrollbars are toggleable (for stuff that didn't have visible scrollbars before) (opt-in)

 ### Added
+- 3 column mode: only enables when there's space for it (opt-out, customizable)
 - Options to show domains in mentions
 - Option to show user avatars in mention links (opt-in)
 - Option to disable the tooltip for mentions
@ -37,6 +46,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Media modal now also displays description and counter position in gallery (i.e. 1/5)
 - Ability to rearrange order of attachments when uploading
 - Enabled users to zoom and pan images in media viewer with mouse and touch
+- Timelines/panels and conversations have sticky headers now
 - Added frontend ui for account migration


--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@ -5,6 +5,8 @@ var projectRoot = path.resolve(__dirname, '../')
 var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
 var CopyPlugin = require('copy-webpack-plugin');
 var { VueLoaderPlugin } = require('vue-loader')
+var ESLintPlugin = require('eslint-webpack-plugin');
+

 var env = process.env.NODE_ENV
 // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@ -30,7 +32,7 @@ module.exports = {
    }
  },
  resolve: {
-    extensions: ['.js', '.jsx', '.vue'],
+    extensions: ['.mjs', '.js', '.jsx', '.vue'],
    modules: [
      path.join(__dirname, '../node_modules')
    ],
@ -45,20 +47,6 @@ module.exports = {
  module: {
    noParse: /node_modules\/localforage\/dist\/localforage.js/,
    rules: [
-      {
-        enforce: 'pre',
-        test: /\.(js|vue)$/,
-        include: projectRoot,
-        exclude: /node_modules/,
-        use: {
-          loader: 'eslint-loader',
-          options: {
-            formatter: require('eslint-friendly-formatter'),
-            sourceMap: config.build.productionSourceMap,
-            extract: true
-          }
-        }
-      },
      {
        enforce: 'post',
        test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
@ -108,6 +96,11 @@ module.exports = {
          }
        }
      },
+      {
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto'
+      }
    ]
  },
  plugins: [
@ -115,12 +108,16 @@ module.exports = {
      entry: path.join(__dirname, '..', 'src/sw.js'),
      filename: 'sw-pleroma.js'
    }),
+    new ESLintPlugin({
+      extensions: ['js', 'vue'],
+      formatter: require('eslint-formatter-friendly')
+    }),
    new VueLoaderPlugin(),
    // This copies Ruffle's WASM to a directory so that JS side can access it
    new CopyPlugin({
      patterns: [
        {
-          from: "node_modules/ruffle-mirror/*",
+          from: "node_modules/@ruffle-rs/ruffle/*",
          to: "static/ruffle",
          flatten: true
        },
--- a/package.json
+++ b/package.json
@ -16,16 +16,17 @@
    "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
  },
  "dependencies": {
-    "@babel/runtime": "7.18.6",
+    "@babel/runtime": "7.18.9",
    "@chenfengyuan/vue-qrcode": "2.0.0",
-    "@fortawesome/fontawesome-svg-core": "1.3.0",
-    "@fortawesome/free-regular-svg-icons": "5.15.4",
-    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/fontawesome-svg-core": "6.1.2",
+    "@fortawesome/free-regular-svg-icons": "6.1.2",
+    "@fortawesome/free-solid-svg-icons": "6.1.2",
    "@fortawesome/vue-fontawesome": "3.0.1",
    "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
-    "@vuelidate/core": "2.0.0-alpha.42",
-    "@vuelidate/validators": "2.0.0-alpha.30",
-    "body-scroll-lock": "2.7.1",
+    "@ruffle-rs/ruffle": "^0.1.0-nightly.2022.7.12",
+    "@vuelidate/core": "2.0.0-alpha.43",
+    "@vuelidate/validators": "2.0.0-alpha.31",
+    "body-scroll-lock": "3.1.5",
    "chromatism": "3.0.0",
    "click-outside-vue3": "4.0.1",
    "cropperjs": "1.5.12",
@ -37,46 +38,44 @@
    "phoenix": "1.6.2",
    "punycode.js": "2.1.0",
    "qrcode": "1",
-    "ruffle-mirror": "2021.12.31",
    "utf8": "^3.0.0",
-    "vue": "^3.2.31",
-    "vue-i18n": "^9.2.0-beta.34",
-    "vue-router": "4.0.14",
-    "vue-template-compiler": "2.6.11",
+    "vue": "3.2.37",
+    "vue-i18n": "9.2.0",
+    "vue-router": "4.1.3",
+    "vue-template-compiler": "2.7.8",
    "vuex": "4.0.2"
  },
  "devDependencies": {
-    "@babel/core": "7.18.6",
-    "@babel/plugin-transform-runtime": "7.18.6",
-    "@babel/preset-env": "7.18.6",
-    "@babel/register": "7.18.6",
+    "@babel/core": "7.18.9",
+    "@babel/plugin-transform-runtime": "7.18.9",
+    "@babel/preset-env": "7.18.9",
+    "@babel/register": "7.18.9",
+    "@babel/eslint-parser": "7.18.9",
    "@intlify/vue-i18n-loader": "^5.0.0",
    "@ungap/event-target": "0.2.3",
    "@vue/babel-helper-vue-jsx-merge-props": "1.2.1",
    "@vue/babel-plugin-jsx": "1.1.1",
-    "@vue/compiler-sfc": "^3.1.0",
-    "@vue/test-utils": "2.0.0-rc.17",
+    "@vue/compiler-sfc": "3.2.37",
+    "@vue/test-utils": "2.0.2",
    "autoprefixer": "6.7.7",
-    "babel-eslint": "7.2.3",
    "babel-loader": "8.2.5",
    "babel-plugin-lodash": "3.3.4",
    "chai": "3.5.0",
    "chalk": "1.1.3",
-    "chromedriver": "87.0.7",
+    "chromedriver": "103.0.0",
    "connect-history-api-fallback": "1.6.0",
    "copy-webpack-plugin": "6.4.1",
    "cross-spawn": "4.0.2",
    "css-loader": "0.28.11",
    "custom-event-polyfill": "1.0.7",
-    "eslint": "5.16.0",
-    "eslint-config-standard": "12.0.0",
-    "eslint-friendly-formatter": "2.0.7",
-    "eslint-loader": "2.2.1",
+    "eslint": "8.20.0",
+    "eslint-config-standard": "17.0.0",
+    "eslint-formatter-friendly": "7.0.0",
+    "eslint-webpack-plugin": "2.7.0",
    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-node": "7.0.1",
-    "eslint-plugin-promise": "4.3.1",
-    "eslint-plugin-standard": "4.1.0",
-    "eslint-plugin-vue": "5.2.3",
+    "eslint-plugin-n": "15.2.4",
+    "eslint-plugin-promise": "6.0.0",
+    "eslint-plugin-vue": "9.3.0",
    "eventsource-polyfill": "0.9.6",
    "express": "4.18.1",
    "file-loader": "3.0.1",
@ -105,7 +104,7 @@
    "ora": "0.4.1",
    "postcss-loader": "3.0.0",
    "raw-loader": "0.5.1",
-    "sass": "1.53.0",
+    "sass": "1.54.0",
    "sass-loader": "7.3.1",
    "selenium-server": "2.53.1",
    "semver": "5.7.1",
@ -118,7 +117,7 @@
    "stylelint-rscss": "0.4.0",
    "url-loader": "1.1.2",
    "vue-loader": "^16.0.0",
-    "vue-style-loader": "4.1.2",
+    "vue-style-loader": "4.1.3",
    "webpack": "4.46.0",
    "webpack-dev-middleware": "3.7.3",
    "webpack-hot-middleware": "2.25.1",
--- a/src/App.js
+++ b/src/App.js
@ -4,7 +4,6 @@ import InstanceSpecificPanel from './components/instance_specific_panel/instance
 import FeaturesPanel from './components/features_panel/features_panel.vue'
 import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
 import ShoutPanel from './components/shout_panel/shout_panel.vue'
-import 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'
 import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
@ -32,7 +31,7 @@ export default {
    MobilePostStatusButton,
    MobileNav,
    DesktopNav,
-    SettingsModal,
+    SettingsModal: defineAsyncComponent(() => import('./components/settings_modal/settings_modal.vue')),
    UserReportingModal,
    PostStatusModal,
    GlobalNoticeList
--- a/src/App.scss
+++ b/src/App.scss
@ -4,6 +4,13 @@
 :root {
  --navbar-height: 3.5rem;
  --post-line-height: 1.4;
+  // Z-Index stuff
+  --ZI_media_modal: 90000;
+  --ZI_modals_popovers: 85000;
+  --ZI_modals: 80000;
+  --ZI_navbar_popovers: 75000;
+  --ZI_navbar: 70000;
+  --ZI_popovers: 60000;
 }

 html {
@ -117,7 +124,7 @@ i[class*=icon-],
 }

 nav {
-  z-index: 1000;
+  z-index: var(--ZI_navbar);
  color: var(--topBarText);
  background-color: $fallback--fg;
  background-color: var(--topBar, $fallback--fg);
@ -828,7 +835,7 @@ option {
 // Vue transitions
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.2s;
+  transition: opacity 0.3s;
 }

 .fade-enter-from,
--- a/src/App.vue
+++ b/src/App.vue
@ -16,7 +16,11 @@
      :class="classes"
    >
      <div class="underlay" />
-      <div id="sidebar" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }">
+      <div
+        id="sidebar"
+        class="column -scrollable"
+        :class="{ '-show-scrollbar': showScrollbars }"
+      >
        <user-panel />
        <template v-if="layoutType !== 'mobile'">
          <nav-panel />
@ -26,7 +30,11 @@
          <div id="notifs-sidebar" />
        </template>
      </div>
-      <div id="main-scroller" class="column main" :class="{ '-full-height': isChats }">
+      <div
+        id="main-scroller"
+        class="column main"
+        :class="{ '-full-height': isChats }"
+      >
        <div
          v-if="!currentUser"
          class="login-hint panel panel-default"
@ -40,9 +48,13 @@
        </div>
        <router-view />
      </div>
-      <div id="notifs-column" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"/>
+      <div
+        id="notifs-column"
+        class="column -scrollable"
+        :class="{ '-show-scrollbar': showScrollbars }"
+      />
    </div>
-    <media-modal />
+    <MediaModal />
    <shout-panel
      v-if="currentUser && shout && !hideShoutbox"
      :floating="true"
@ -55,6 +67,7 @@
    <SettingsModal />
    <div id="modal" />
    <GlobalNoticeList />
+    <div id="popovers" />
  </div>
 </template>

--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@ -156,7 +156,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
  copyInstanceOption('hideSitename')
  copyInstanceOption('sidebarRight')

-  return store.dispatch('setTheme', config['theme'])
+  return store.dispatch('setTheme', config.theme)
 }

 const getTOS = async ({ store }) => {
@ -197,7 +197,7 @@ const getStickers = async ({ store }) => {
      const stickers = (await Promise.all(
        Object.entries(values).map(async ([name, path]) => {
          const resPack = await window.fetch(path + 'pack.json')
-          var meta = {}
+          let meta = {}
          if (resPack.ok) {
            meta = await resPack.json()
          }
@ -319,6 +319,7 @@ const setConfig = async ({ store }) => {
 }

 const checkOAuthToken = async ({ store }) => {
+  // eslint-disable-next-line no-async-promise-executor
  return new Promise(async (resolve, reject) => {
    if (store.getters.getUserToken()) {
      try {
@ -396,6 +397,9 @@ const afterStoreSetup = async ({ store, i18n }) => {
  app.component('FAIcon', FontAwesomeIcon)
  app.component('FALayers', FontAwesomeLayers)

+  // remove after vue 3.3
+  app.config.unwrapInjectedRef = true
+
  app.mount('#app')

  return app
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@ -31,7 +31,8 @@ export default (store) => {
  }

  let routes = [
-    { name: 'root',
+    {
+      name: 'root',
      path: '/',
      redirect: _to => {
        return (store.state.users.currentUser
@ -45,12 +46,14 @@ export default (store) => {
    { name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
    { name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
    { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
-    { name: 'remote-user-profile-acct',
+    {
+      name: 'remote-user-profile-acct',
      path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',
      component: RemoteUserResolver,
      beforeEnter: validateAuthenticatedRoute
    },
-    { name: 'remote-user-profile',
+    {
+      name: 'remote-user-profile',
      path: '/remote-users/:hostname/:username',
      component: RemoteUserResolver,
      beforeEnter: validateAuthenticatedRoute
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@ -6,7 +6,7 @@
      :bound-to="{ x: 'container' }"
      remove-padding
    >
-      <template v-slot:content>
+      <template #content>
        <div class="dropdown-menu">
          <template v-if="relationship.following">
            <button
@ -57,7 +57,7 @@
          </button>
        </div>
      </template>
-      <template v-slot:trigger>
+      <template #trigger>
        <button class="button-unstyled ellipsis-button">
          <FAIcon
            class="icon"
--- a/src/components/basic_user_card/basic_user_card.js
+++ b/src/components/basic_user_card/basic_user_card.js
@ -1,4 +1,4 @@
-import UserCard from '../user_card/user_card.vue'
+import UserPopover from '../user_popover/user_popover.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@ -7,20 +7,12 @@ const BasicUserCard = {
  props: [
    'user'
  ],
-  data () {
-    return {
-      userExpanded: false
-    }
-  },
  components: {
-    UserCard,
+    UserPopover,
    UserAvatar,
    RichContent
  },
  methods: {
-    toggleUserExpanded () {
-      this.userExpanded = !this.userExpanded
-    },
    userProfileLink (user) {
      return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
    }
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@ -1,24 +1,22 @@
 <template>
  <div class="basic-user-card">
-    <router-link :to="userProfileLink(user)">
+    <router-link
+      :to="userProfileLink(user)"
+      @click.prevent
+    >
+      <UserPopover
+        :user-id="user.id"
+        :overlay-centers="true"
+        overlay-centers-selector=".avatar"
+      >
        <UserAvatar
-        class="avatar"
+          class="user-avatar avatar"
          :user="user"
-        @click.prevent="toggleUserExpanded"
+          @click.prevent
        />
+      </UserPopover>
    </router-link>
    <div
-      v-if="userExpanded"
-      class="basic-user-card-expanded-content"
-    >
-      <UserCard
-        :user-id="user.id"
-        :rounded="true"
-        :bordered="true"
-      />
-    </div>
-    <div
-      v-else
      class="basic-user-card-collapsed-content"
    >
      <div
@ -53,6 +51,8 @@
  margin: 0;
  padding: 0.6em 1em;

+   --emoji-size: 14px;
+
  &-collapsed-content {
    margin-left: 0.7em;
    text-align: left;
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@ -107,7 +107,7 @@ const Chat = {
        }
      })
    },
-    '$route': function () {
+    $route: function () {
      this.startFetching()
    },
    mastoUserSocketStatus (newValue) {
--- a/src/components/chat_list/chat_list.vue
+++ b/src/components/chat_list/chat_list.vue
@ -23,7 +23,7 @@
        class="timeline"
      >
        <List :items="sortedChatList">
-          <template v-slot:item="{item}">
+          <template #item="{item}">
            <ChatListItem
              :key="item.id"
              :compact="false"
--- a/src/components/chat_message/chat_message.js
+++ b/src/components/chat_message/chat_message.js
@ -6,7 +6,7 @@ import Gallery from '../gallery/gallery.vue'
 import LinkPreview from '../link-preview/link-preview.vue'
 import StatusContent from '../status_content/status_content.vue'
 import ChatMessageDate from '../chat_message_date/chat_message_date.vue'
-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { defineAsyncComponent } from 'vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
  faTimes,
@ -35,7 +35,8 @@ const ChatMessage = {
    UserAvatar,
    Gallery,
    LinkPreview,
-    ChatMessageDate
+    ChatMessageDate,
+    UserPopover: defineAsyncComponent(() => import('../user_popover/user_popover.vue'))
  },
  computed: {
    // Returns HH:MM (hours and minutes) in local time.
@ -49,9 +50,6 @@ const ChatMessage = {
    message () {
      return this.chatViewItem.data
    },
-    userProfileLink () {
-      return generateProfileLink(this.author.id, this.author.screen_name, this.$store.state.instance.restrictedNicknames)
-    },
    isMessage () {
      return this.chatViewItem.type === 'message'
    },
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@ -14,16 +14,16 @@
        v-if="!isCurrentUser"
        class="avatar-wrapper"
      >
-        <router-link
+        <UserPopover
          v-if="chatViewItem.isHead"
-          :to="userProfileLink"
+          :user-id="author.id"
        >
          <UserAvatar
            :compact="true"
            :better-shadow="betterShadow"
            :user="author"
          />
-        </router-link>
+        </UserPopover>
      </div>
      <div class="chat-message-inner">
        <div
@ -44,13 +44,13 @@
              <Popover
                trigger="click"
                placement="top"
-                :bound-to-selector="isCurrentUser ? '' : '.scrollable-message-list'"
+                bound-to-selector=".chat-view-inner"
                :bound-to="{ x: 'container' }"
                :margin="popoverMarginStyle"
                @show="menuOpened = true"
                @close="menuOpened = false"
              >
-                <template v-slot:content>
+                <template #content>
                  <div class="dropdown-menu">
                    <button
                      class="button-default dropdown-item dropdown-item-icon"
@ -60,7 +60,7 @@
                    </button>
                  </div>
                </template>
-                <template v-slot:trigger>
+                <template #trigger>
                  <button
                    class="button-default menu-icon"
                    :title="$t('chats.more')"
@ -75,7 +75,7 @@
              :status="messageForStatusContent"
              :full-content="true"
            >
-              <template v-slot:footer>
+              <template #footer>
                <span
                  class="created-at"
                >
--- a/src/components/chat_title/chat_title.js
+++ b/src/components/chat_title/chat_title.js
@ -1,12 +1,13 @@
-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'
+import { defineAsyncComponent } from 'vue'

 export default {
  name: 'ChatTitle',
  components: {
    UserAvatar,
-    RichContent
+    RichContent,
+    UserPopover: defineAsyncComponent(() => import('../user_popover/user_popover.vue'))
  },
  props: [
    'user', 'withAvatar'
@ -18,10 +19,5 @@ export default {
    htmlTitle () {
      return this.user ? this.user.name_html : ''
    }
-  },
-  methods: {
-    getUserProfileLink (user) {
-      return generateProfileLink(user.id, user.screen_name)
-    }
  }
 }
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@ -3,16 +3,16 @@
    class="chat-title"
    :title="title"
  >
-    <router-link
-      class="avatar-container"
+    <UserPopover
      v-if="withAvatar && user"
-      :to="getUserProfileLink(user)"
+      class="avatar-container"
+      :user-id="user.id"
    >
      <UserAvatar
        class="titlebar-avatar"
        :user="user"
      />
-    </router-link>
+    </UserPopover>
    <RichContent
      v-if="user"
      class="username"
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@ -22,12 +22,12 @@

 <script>
 export default {
-  emits: ['update:modelValue'],
  props: [
    'modelValue',
    'indeterminate',
    'disabled'
-  ]
+  ],
+  emits: ['update:modelValue']
 }
 </script>

--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@ -46,7 +46,6 @@
    </div>
  </div>
 </template>
-<style lang="scss" src="./color_input.scss"></style>
 <script>
 import Checkbox from '../checkbox/checkbox.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
@ -108,6 +107,7 @@ export default {
  }
 }
 </script>
+<style lang="scss" src="./color_input.scss"></style>

 <style lang="scss">
 .color-control {
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@ -271,7 +271,7 @@ const conversation = {
          result[irid] = result[irid] || []
          result[irid].push({
            name: `#${i}`,
-            id: id
+            id
          })
        }
        i++
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@ -31,8 +31,8 @@
            keypath="status.show_all_conversation_with_icon"
            tag="button"
            class="button-unstyled -link"
-            @click.prevent="diveToTopLevel"
            scope="global"
+            @click.prevent="diveToTopLevel"
          >
            <template #icon>
              <FAIcon
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@ -46,21 +46,25 @@ export default {
    enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
    logoStyle () {
      return {
-        'visibility': this.enableMask ? 'hidden' : 'visible'
+        visibility: this.enableMask ? 'hidden' : 'visible'
      }
    },
    logoMaskStyle () {
-      return this.enableMask ? {
+      return this.enableMask
+        ? {
            'mask-image': `url(${this.$store.state.instance.logo})`
-      } : {
+          }
+        : {
            'background-color': this.enableMask ? '' : 'transparent'
          }
    },
    logoBgStyle () {
      return Object.assign({
-        'margin': `${this.$store.state.instance.logoMargin} 0`,
+        margin: `${this.$store.state.instance.logoMargin} 0`,
        opacity: this.searchBarHidden ? 1 : 0
-      }, this.enableMask ? {} : {
+      }, this.enableMask
+        ? {}
+        : {
            'background-color': this.enableMask ? '' : 'transparent'
          })
    },
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@ -2,6 +2,7 @@

 .DesktopNav {
  width: 100%;
+  z-index: var(--ZI_navbar);

  input {
    color: var(--inputTopbarText, var(--inputText));
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@ -38,7 +38,7 @@
        />
        <button
          class="button-unstyled nav-icon"
-          @click.stop="openSettingsModal"
+          @click="openSettingsModal"
        >
          <FAIcon
            fixed-width
--- a/src/components/domain_mute_card/domain_mute_card.vue
+++ b/src/components/domain_mute_card/domain_mute_card.vue
@ -9,7 +9,7 @@
      class="btn button-default"
    >
      {{ $t('domain_mute_card.unmute') }}
-      <template v-slot:progress>
+      <template #progress>
        {{ $t('domain_mute_card.unmute_progress') }}
      </template>
    </ProgressButton>
@ -19,7 +19,7 @@
      class="btn button-default"
    >
      {{ $t('domain_mute_card.mute') }}
-      <template v-slot:progress>
+      <template #progress>
        {{ $t('domain_mute_card.mute_progress') }}
      </template>
    </ProgressButton>
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@ -321,7 +321,7 @@ const EmojiInput = {
      }
    },
    scrollIntoView () {
-      const rootRef = this.$refs['picker'].$el
+      const rootRef = this.$refs.picker.$el
      /* Scroller is either `window` (replies in TL), sidebar (main post form,
       * replies in notifs) or mobile post form. Note that getting and setting
       * scroll is different for `Window` and `Element`s
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@ -25,7 +25,7 @@ const filterByKeyword = (list, keyword = '') => {
  if (keyword === '') return list

  const keywordLowercase = keyword.toLowerCase()
-  let orderedEmojiList = []
+  const orderedEmojiList = []
  for (const emoji of list) {
    const indexOfKeyword = emoji.displayText.toLowerCase().indexOf(keywordLowercase)
    if (indexOfKeyword > -1) {
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@ -7,7 +7,8 @@
  right: 0;
  left: 0;
  margin: 0 !important;
-  z-index: 100;
+  // TODO: actually use popover in emoji picker
+  z-index: var(--ZI_popovers);
  background-color: $fallback--bg;
  background-color: var(--popover, $fallback--bg);
  color: $fallback--link;
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@ -89,6 +89,9 @@ const ExtraButtons = {
    canMute () {
      return !!this.currentUser
    },
+    canBookmark () {
+      return !!this.currentUser
+    },
    statusLink () {
      return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
    }
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@ -7,7 +7,7 @@
    :bound-to="{ x: 'container' }"
    remove-padding
  >
-    <template v-slot:content="{close}">
+    <template #content="{close}">
      <div class="dropdown-menu">
        <button
          v-if="canMute && !status.thread_muted"
@ -51,6 +51,7 @@
            icon="thumbtack"
          /><span>{{ $t("status.unpin") }}</span>
        </button>
+        <template v-if="canBookmark">
          <button
            v-if="!status.bookmarked"
            class="button-default dropdown-item dropdown-item-icon"
@ -73,6 +74,7 @@
              icon="bookmark"
            /><span>{{ $t("status.unbookmark") }}</span>
          </button>
+        </template>
        <button
          v-if="canDelete"
          class="button-default dropdown-item dropdown-item-icon"
@ -118,13 +120,13 @@
        </button>
      </div>
    </template>
-    <template v-slot:trigger>
-      <button class="button-unstyled popover-trigger">
+    <template #trigger>
+      <span class="button-unstyled popover-trigger">
        <FAIcon
          class="fa-scale-110 fa-old-padding"
          icon="ellipsis-h"
        />
-      </button>
+      </span>
    </template>
  </Popover>
 </template>
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@ -32,7 +32,7 @@
  top: 50px;
  width: 100%;
  pointer-events: none;
-  z-index: 1001;
+  z-index: var(--ZI_popovers);
  display: flex;
  flex-direction: column;
  align-items: center;
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@ -95,7 +95,7 @@ const ImageCropper = {
      const fileInput = this.$refs.input
      if (fileInput.files != null && fileInput.files[0] != null) {
        this.file = fileInput.files[0]
-        let reader = new window.FileReader()
+        const reader = new window.FileReader()
        reader.onload = (e) => {
          this.dataUrl = e.target.result
          this.$emit('open')
--- a/src/components/interactions/interactions.js
+++ b/src/components/interactions/interactions.js
@ -14,7 +14,7 @@ const Interactions = {
  data () {
    return {
      allowFollowingMove: this.$store.state.users.currentUser.allow_following_move,
-      filterMode: tabModeDict['mentions'],
+      filterMode: tabModeDict.mentions,
      canSeeReports: ['moderator', 'admin'].includes(this.$store.state.users.currentUser.role)
    }
  },
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@ -25,6 +25,7 @@ import Select from '../select/select.vue'

 export default {
  components: {
+    // eslint-disable-next-line vue/no-reserved-component-names
    Select
  },
  props: {
--- a/src/components/login_form/login_form.js
+++ b/src/components/login_form/login_form.js
@ -83,7 +83,7 @@ const LoginForm = {
    },
    clearError () { this.error = false },
    focusOnPasswordInput () {
-      let passwordInput = this.$refs.passwordInput
+      const passwordInput = this.$refs.passwordInput
      passwordInput.focus()
      passwordInput.setSelectionRange(0, passwordInput.value.length)
    }
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@ -121,7 +121,7 @@ $modal-view-button-icon-width: 3em;
 $modal-view-button-icon-margin: 0.5em;

 .modal-view.media-modal-view {
-  z-index: 9000;
+  z-index: var(--ZI_media_modal);
  flex-direction: column;

  .modal-view-button-arrow,
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@ -42,7 +42,8 @@ const mediaUpload = {
        .then((fileData) => {
          self.$emit('uploaded', fileData)
          self.decreaseUploadCount()
-        }, (error) => { // eslint-disable-line handle-callback-err
+        }, (error) => {
+          console.error('Error uploading file', error)
          self.$emit('upload-failed', 'default')
          self.decreaseUploadCount()
        })
@ -73,7 +74,7 @@ const mediaUpload = {
    'disabled'
  ],
  watch: {
-    'dropFiles': function (fileInfos) {
+    dropFiles: function (fileInfos) {
      if (!this.uploading) {
        this.multiUpload(fileInfos)
      }
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@ -2,6 +2,7 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p
 import { mapGetters, mapState } from 'vuex'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import { defineAsyncComponent } from 'vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
  faAt
@ -14,7 +15,8 @@ library.add(
 const MentionLink = {
  name: 'MentionLink',
  components: {
-    UserAvatar
+    UserAvatar,
+    UserPopover: defineAsyncComponent(() => import('../user_popover/user_popover.vue'))
  },
  props: {
    url: {
@ -34,15 +36,30 @@ const MentionLink = {
      type: String
    }
  },
+  data () {
+    return {
+      hasSelection: false
+    }
+  },
  methods: {
    onClick () {
+      if (this.shouldShowTooltip) return
      const link = generateProfileLink(
        this.userId || this.user.id,
        this.userScreenName || this.user.screen_name
      )
      this.$router.push(link)
+    },
+    handleSelection () {
+      this.hasSelection = document.getSelection().containsNode(this.$refs.full, true)
    }
  },
+  mounted () {
+    document.addEventListener('selectionchange', this.handleSelection)
+  },
+  unmounted () {
+    document.removeEventListener('selectionchange', this.handleSelection)
+  },
  computed: {
    user () {
      return this.url && this.$store && this.$store.getters.findUserByUrl(this.url)
@ -88,7 +105,8 @@ const MentionLink = {
      return [
        {
          '-you': this.isYou && this.shouldBoldenYou,
-          '-highlighted': this.highlight
+          '-highlighted': this.highlight,
+          '-has-selection': this.hasSelection
        },
        this.highlightType
      ]
@ -110,7 +128,7 @@ const MentionLink = {
      }
    },
    shouldShowTooltip () {
-      return this.mergedConfig.mentionLinkShowTooltip && this.mergedConfig.mentionLinkDisplay === 'short' && this.isRemote
+      return this.mergedConfig.mentionLinkShowTooltip
    },
    shouldShowAvatar () {
      return this.mergedConfig.mentionLinkShowAvatar
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@ -55,11 +55,14 @@

  .new {
    &.-you {
-      & .shortName,
-      & .full {
+      .shortName {
        font-weight: 600;
      }
    }
+    &.-has-selection {
+      color: var(--alertNeutralText, $fallback--text);
+      background-color: var(--alertNeutral, $fallback--fg);
+    }

    .at {
      color: var(--link);
@ -72,8 +75,7 @@
    }

    &.-striped {
-      & .shortName,
-      & .full {
+      & .shortName {
        background-image:
          repeating-linear-gradient(
            135deg,
@ -86,30 +88,29 @@
    }

    &.-solid {
-      & .shortName,
-      & .full {
+      .shortName {
        background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
      }
    }

    &.-side {
-      & .shortName,
-      & .userNameFull {
+      .shortName {
        box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
      }
    }
  }

-  &:hover .new .full {
-    opacity: 1;
-    pointer-events: initial;
+  .full {
+    pointer-events: none;
  }

  .serverName.-faded {
    color: var(--faintLink, $fallback--link);
  }
+}

-  .full .-faded {
-    color: var(--faint, $fallback--faint);
-  }
+.mention-link-popover {
+  max-width: 70ch;
+  max-height: 20rem;
+  overflow: hidden;
 }
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@ -9,7 +9,13 @@
      class="original"
      target="_blank"
      v-html="content"
-    /><!-- eslint-enable vue/no-v-html --><span
+    /><!-- eslint-enable vue/no-v-html -->
+    <UserPopover
+      v-else
+      :user-id="user.id"
+      :disabled="!shouldShowTooltip"
+    >
+      <span
        v-if="user"
        class="new"
        :style="style"
@ -49,26 +55,15 @@
          > {{ ' ' + $t('status.you') }}</span>
          <!-- eslint-enable vue/no-v-html -->
        </a><span
-        v-if="shouldShowTooltip"
-        class="full popover-default"
-        :class="[highlightType]"
-      >
-        <span
-          class="userNameFull"
+          ref="full"
+          class="full"
        >
          <!-- eslint-disable vue/no-v-html -->
-          @<span
-            class="userName"
-            v-html="userName"
-          /><span
-            class="serverName"
-            :class="{ '-faded': shouldFadeDomain }"
-            v-html="'@' + serverName"
-          />
+          @<span v-html="userName" /><span v-html="'@' + serverName" />
          <!-- eslint-enable vue/no-v-html -->
        </span>
      </span>
-    </span>
+    </UserPopover>
  </span>
 </template>

--- a/src/components/mentions_line/mentions_line.vue
+++ b/src/components/mentions_line/mentions_line.vue
@ -13,8 +13,7 @@
      <span
        v-if="expanded"
        class="fullExtraMentions"
-      >
-        <MentionLink
+      >{{ ' ' }}<MentionLink
        v-for="mention in extraMentions"
        :key="mention.index"
        class="mention-link"
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@ -67,11 +67,10 @@
        </a>
      </div>
      <div
-        class="mobile-notifications"
        id="mobile-notifications"
+        class="mobile-notifications"
        @scroll="onScroll"
-      >
-      </div>
+      />
    </div>
    <SideDrawer
      ref="sideDrawer"
@ -86,6 +85,8 @@
@import '../../_variables.scss';

 .MobileNav {
+  z-index: var(--ZI_navbar);
+
  .mobile-nav {
    display: grid;
    line-height: var(--navbar-height);
@ -147,7 +148,7 @@
    transition-property: transform;
    transition-duration: 0.25s;
    transform: translateX(0);
-    z-index: 1001;
+    z-index: var(--ZI_navbar);
    -webkit-overflow-scrolling: touch;

    &.-closed {
@ -160,7 +161,7 @@
    display: flex;
    align-items: center;
    justify-content: space-between;
-    z-index: 1;
+    z-index: calc(var(--ZI_navbar) + 100);
    width: 100%;
    height: 50px;
    line-height: 50px;
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@ -12,6 +12,9 @@

 <script>
 export default {
+  provide: {
+    popoversZLayer: 'modals'
+  },
  props: {
    isOpen: {
      type: Boolean,
@ -26,7 +29,7 @@ export default {
    classes () {
      return {
        'modal-background': !this.noBackground,
-        'open': this.isOpen
+        open: this.isOpen
      }
    }
  }
@ -35,7 +38,7 @@ export default {

 <style lang="scss">
 .modal-view {
-  z-index: 2000;
+  z-index: var(--ZI_modals);
  position: fixed;
  top: 0;
  left: 0;
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@ -8,7 +8,7 @@
      @show="setToggled(true)"
      @close="setToggled(false)"
    >
-      <template v-slot:content>
+      <template #content>
        <div class="dropdown-menu">
          <span v-if="user.is_local">
            <button
@ -122,7 +122,7 @@
          </span>
        </div>
      </template>
-      <template v-slot:trigger>
+      <template #trigger>
        <button
          class="btn button-default btn-block moderation-tools-button"
          :class="{ toggled }"
@ -137,11 +137,11 @@
        v-if="showDeleteUserDialog"
        :on-cancel="deleteUserDialog.bind(this, false)"
      >
-        <template v-slot:header>
+        <template #header>
          {{ $t('user_card.admin_menu.delete_user') }}
        </template>
        <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
-        <template v-slot:footer>
+        <template #footer>
          <button
            class="btn button-default"
            @click="deleteUserDialog(false)"
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.js
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.js
@ -9,10 +9,10 @@ import { get } from 'lodash'
 */
 const toInstanceReasonObject = (instances, info, key) => {
  return instances.map(instance => {
-    if (info[key] && info[key][instance] && info[key][instance]['reason']) {
-      return { instance: instance, reason: info[key][instance]['reason'] }
+    if (info[key] && info[key][instance] && info[key][instance].reason) {
+      return { instance, reason: info[key][instance].reason }
    }
-    return { instance: instance, reason: '' }
+    return { instance, reason: '' }
  })
 }

--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@ -113,7 +113,9 @@
    border-color: $fallback--border;
    border-color: var(--border, $fallback--border);
    padding: 0;
+  }

+  > li {
    &:first-child .menu-item {
      border-top-right-radius: $fallback--panelRadius;
      border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@ -6,6 +6,7 @@ import UserCard from '../user_card/user_card.vue'
 import Timeago from '../timeago/timeago.vue'
 import Report from '../report/report.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
+import UserPopover from '../user_popover/user_popover.vue'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@ -48,7 +49,8 @@ const Notification = {
    Timeago,
    Status,
    Report,
-    RichContent
+    RichContent,
+    UserPopover
  },
  methods: {
    toggleUserExpanded () {
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@ -34,21 +34,22 @@
      <a
        class="avatar-container"
        :href="$router.resolve(userProfileLink).href"
-        @click.stop.prevent.capture="toggleUserExpanded"
+        @click.prevent
+      >
+        <UserPopover
+          :user-id="notification.from_profile.id"
+          :overlay-centers="true"
        >
          <UserAvatar
+            class="post-avatar"
+            :bot="botIndicator"
            :compact="true"
            :better-shadow="betterShadow"
            :user="notification.from_profile"
          />
+        </UserPopover>
      </a>
      <div class="notification-right">
-        <UserCard
-          v-if="userExpanded"
-          :user-id="getUser(notification).id"
-          :rounded="true"
-          :bordered="true"
-        />
        <span class="notification-details">
          <div class="name-and-action">
            <!-- eslint-disable vue/no-v-html -->
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@ -5,7 +5,7 @@
    placement="bottom"
    :bound-to="{ x: 'container' }"
  >
-    <template v-slot:content>
+    <template #content>
      <div class="dropdown-menu">
        <button
          class="button-default dropdown-item"
@ -72,7 +72,7 @@
        </button>
      </div>
    </template>
-    <template v-slot:trigger>
+    <template #trigger>
      <button class="filter-trigger-button button-unstyled">
        <FAIcon icon="filter" />
      </button>
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@ -1,3 +1,4 @@
+import { computed } from 'vue'
 import { mapGetters } from 'vuex'
 import Notification from '../notification/notification.vue'
 import NotificationFilters from './notification_filters.vue'
@ -40,6 +41,11 @@ const Notifications = {
      seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT
    }
  },
+  provide () {
+    return {
+      popoversZLayer: computed(() => this.popoversZLayer)
+    }
+  },
  computed: {
    mainClass () {
      return this.minimalMode ? '' : 'panel panel-default'
@ -77,6 +83,10 @@ const Notifications = {
      }
      return map[layoutType] || '#notifs-sidebar'
    },
+    popoversZLayer () {
+      const { layoutType } = this.$store.state.interface
+      return layoutType === 'mobile' ? 'navbar' : null
+    },
    notificationsToDisplay () {
      return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
    },
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@ -1,5 +1,8 @@
 <template>
-  <teleport :disabled="minimalMode || disableTeleport" :to="teleportTarget">
+  <teleport
+    :disabled="minimalMode || disableTeleport"
+    :to="teleportTarget"
+  >
    <div
      :class="{ minimal: minimalMode }"
      class="Notifications"
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@ -84,7 +84,7 @@
            :key="unit"
            :value="unit"
          >
-            {{ $t(`time.${unit}_short`, ['']) }}
+            {{ $tc(`time.unit.${unit}_short`, expiryAmount, ['']) }}
          </option>
        </Select>
      </div>
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@ -31,13 +31,35 @@ const Popover = {

    // If true, subtract padding when calculating position for the popover,
    // use it when popover offset looks to be different on top vs bottom.
-    removePadding: Boolean
+    removePadding: Boolean,
+
+    // self-explanatory (i hope)
+    disabled: Boolean,
+
+    // Instead of putting popover next to anchor, overlay popover's center on top of anchor's center
+    overlayCenters: Boolean,
+
+    // What selector (witin popover!) to use for determining center of popover
+    overlayCentersSelector: String,
+
+    // Lets hover popover stay when clicking inside of it
+    stayOnClick: Boolean
  },
+  inject: ['popoversZLayer'], // override popover z layer
  data () {
    return {
+      // lockReEntry is a flag that is set when mouse cursor is leaving the popover's content
+      // so that if mouse goes back into popover it won't be re-shown again to prevent annoyance
+      // with popovers refusing to be hidden when user wants to interact with something in below popover
+      lockReEntry: false,
      hidden: true,
-      styles: { opacity: 0 },
-      oldSize: { width: 0, height: 0 }
+      styles: {},
+      oldSize: { width: 0, height: 0 },
+      scrollable: null,
+      // used to avoid blinking if hovered onto popover
+      graceTimeout: null,
+      parentPopover: null,
+      childrenShown: new Set()
    }
  },
  methods: {
@ -47,9 +69,7 @@ const Popover = {
    },
    updateStyles () {
      if (this.hidden) {
-        this.styles = {
-          opacity: 0
-        }
+        this.styles = {}
        return
      }

@ -57,14 +77,26 @@ const Popover = {
      // 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
      const anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight
-      const screenBox = anchorEl.getBoundingClientRect()
-      // Screen position of the origin point for popover
-      const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top }
+      const anchorWidth = anchorEl.offsetWidth || anchorEl.clientWidth
+      const anchorScreenBox = anchorEl.getBoundingClientRect()
+
+      const anchorStyle = getComputedStyle(anchorEl)
+      const topPadding = parseFloat(anchorStyle.paddingTop)
+      const bottomPadding = parseFloat(anchorStyle.paddingBottom)
+
+      // Screen position of the origin point for popover = center of the anchor
+      const origin = {
+        x: anchorScreenBox.left + anchorWidth * 0.5,
+        y: anchorScreenBox.top + anchorHeight * 0.5
+      }
      const content = this.$refs.content
+      const overlayCenter = this.overlayCenters
+        ? this.$refs.content.querySelector(this.overlayCentersSelector)
+        : null
+
      // Minor optimization, don't call a slow reflow call if we don't have to
-      const parentBounds = this.boundTo &&
+      const parentScreenBox = this.boundTo &&
        (this.boundTo.x === 'container' || this.boundTo.y === 'container') &&
        this.containerBoundingClientRect()

@ -72,82 +104,156 @@ const Popover = {

      // What are the screen bounds for the popover? Viewport vs container
      // when using viewport, using default margin values to dodge the navbar
-      const xBounds = this.boundTo && this.boundTo.x === 'container' ? {
-        min: parentBounds.left + (margin.left || 0),
-        max: parentBounds.right - (margin.right || 0)
-      } : {
+      const xBounds = this.boundTo && this.boundTo.x === 'container'
+        ? {
+            min: parentScreenBox.left + (margin.left || 0),
+            max: parentScreenBox.right - (margin.right || 0)
+          }
+        : {
            min: 0 + (margin.left || 10),
            max: window.innerWidth - (margin.right || 10)
          }

-      const yBounds = this.boundTo && this.boundTo.y === 'container' ? {
-        min: parentBounds.top + (margin.top || 0),
-        max: parentBounds.bottom - (margin.bottom || 0)
-      } : {
+      const yBounds = this.boundTo && this.boundTo.y === 'container'
+        ? {
+            min: parentScreenBox.top + (margin.top || 0),
+            max: parentScreenBox.bottom - (margin.bottom || 0)
+          }
+        : {
            min: 0 + (margin.top || 50),
            max: window.innerHeight - (margin.bottom || 5)
          }

      let horizOffset = 0
+      let vertOffset = 0
+
+      if (overlayCenter) {
+        const box = content.getBoundingClientRect()
+        const overlayCenterScreenBox = overlayCenter.getBoundingClientRect()
+        const leftInnerOffset = overlayCenterScreenBox.left - box.left
+        const topInnerOffset = overlayCenterScreenBox.top - box.top
+        horizOffset = -leftInnerOffset - overlayCenter.offsetWidth * 0.5
+        vertOffset = -topInnerOffset - overlayCenter.offsetHeight * 0.5
+      } else {
+        horizOffset = content.offsetWidth * -0.5
+        vertOffset = content.offsetHeight * -0.5
+      }
+
+      const leftBorder = origin.x + horizOffset
+      const rightBorder = leftBorder + content.offsetWidth
+      const topBorder = origin.y + vertOffset
+      const bottomBorder = topBorder + content.offsetHeight

      // If overflowing from left, move it so that it doesn't
-      if ((origin.x - content.offsetWidth * 0.5) < xBounds.min) {
-        horizOffset += -(origin.x - content.offsetWidth * 0.5) + xBounds.min
+      if (leftBorder < xBounds.min) {
+        horizOffset += xBounds.min - leftBorder
      }

      // If overflowing from right, move it so that it doesn't
-      if ((origin.x + horizOffset + content.offsetWidth * 0.5) > xBounds.max) {
-        horizOffset -= (origin.x + horizOffset + content.offsetWidth * 0.5) - xBounds.max
+      if (rightBorder > xBounds.max) {
+        horizOffset -= rightBorder - xBounds.max
      }

+      // If overflowing from top, move it so that it doesn't
+      if (topBorder < yBounds.min) {
+        vertOffset += yBounds.min - topBorder
+      }
+
+      // If overflowing from bottom, move it so that it doesn't
+      if (bottomBorder > yBounds.max) {
+        vertOffset -= bottomBorder - yBounds.max
+      }
+
+      let translateX = 0
+      let translateY = 0
+
+      if (overlayCenter) {
+        translateX = origin.x + horizOffset
+        translateY = origin.y + vertOffset
+      } else {
        // Default to whatever user wished with placement prop
        let usingTop = this.placement !== 'bottom'

        // Handle special cases, first force to displaying on top if there's not space on bottom,
        // regardless of what placement value was. Then check if there's not space on top, and
        // force to bottom, again regardless of what placement value was.
-      if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
-      if (origin.y - content.offsetHeight < yBounds.min) usingTop = false
-
-      let vPadding = 0
-      if (this.removePadding && usingTop) {
-        const anchorStyle = getComputedStyle(anchorEl)
-        vPadding = parseFloat(anchorStyle.paddingTop) + parseFloat(anchorStyle.paddingBottom)
-      }
+        const topBoundary = origin.y - anchorHeight * 0.5 + (this.removePadding ? topPadding : 0)
+        const bottomBoundary = origin.y + anchorHeight * 0.5 - (this.removePadding ? bottomPadding : 0)
+        if (bottomBoundary + content.offsetHeight > yBounds.max) usingTop = true
+        if (topBoundary - content.offsetHeight < yBounds.min) usingTop = false

        const yOffset = (this.offset && this.offset.y) || 0
-      const translateY = usingTop
-        ? -anchorHeight + vPadding - yOffset - content.offsetHeight
-        : yOffset
+        translateY = usingTop
+          ? topBoundary - yOffset - content.offsetHeight
+          : bottomBoundary + yOffset

        const xOffset = (this.offset && this.offset.x) || 0
-      const translateX = anchorWidth * 0.5 - content.offsetWidth * 0.5 + horizOffset + xOffset
+        translateX = origin.x + horizOffset + xOffset
+      }

-      // Note, separate translateX and translateY avoids blurry text on chromium,
-      // single translate or translate3d resulted in blurry text.
      this.styles = {
-        opacity: 1,
-        transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)`
+        left: `${Math.round(translateX)}px`,
+        top: `${Math.round(translateY)}px`
+      }
+
+      if (this.popoversZLayer) {
+        this.styles['--ZI_popover_override'] = `var(--ZI_${this.popoversZLayer}_popovers)`
+      }
+      if (parentScreenBox) {
+        this.styles.maxWidth = `${Math.round(parentScreenBox.width)}px`
      }
    },
    showPopover () {
+      if (this.disabled) return
      const wasHidden = this.hidden
      this.hidden = false
+      this.parentPopover && this.parentPopover.onChildPopoverState(this, true)
+      if (this.trigger === 'click' || this.stayOnClick) {
+        document.addEventListener('click', this.onClickOutside)
+      }
+      this.scrollable.addEventListener('scroll', this.onScroll)
+      this.scrollable.addEventListener('resize', this.onResize)
      this.$nextTick(() => {
        if (wasHidden) this.$emit('show')
        this.updateStyles()
      })
    },
    hidePopover () {
+      if (this.disabled) return
      if (!this.hidden) this.$emit('close')
      this.hidden = true
-      this.styles = { opacity: 0 }
+      this.parentPopover && this.parentPopover.onChildPopoverState(this, false)
+      if (this.trigger === 'click') {
+        document.removeEventListener('click', this.onClickOutside)
+      }
+      this.scrollable.removeEventListener('scroll', this.onScroll)
+      this.scrollable.removeEventListener('resize', this.onResize)
    },
    onMouseenter (e) {
-      if (this.trigger === 'hover') this.showPopover()
+      if (this.trigger === 'hover') {
+        this.lockReEntry = false
+        clearTimeout(this.graceTimeout)
+        this.graceTimeout = null
+        this.showPopover()
+      }
    },
    onMouseleave (e) {
-      if (this.trigger === 'hover') this.hidePopover()
+      if (this.trigger === 'hover' && this.childrenShown.size === 0) {
+        this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
+      }
+    },
+    onMouseenterContent (e) {
+      if (this.trigger === 'hover' && !this.lockReEntry) {
+        this.lockReEntry = true
+        clearTimeout(this.graceTimeout)
+        this.graceTimeout = null
+        this.showPopover()
+      }
+    },
+    onMouseleaveContent (e) {
+      if (this.trigger === 'hover' && this.childrenShown.size === 0) {
+        this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
+      }
    },
    onClick (e) {
      if (this.trigger === 'click') {
@ -160,8 +266,24 @@ const Popover = {
    },
    onClickOutside (e) {
      if (this.hidden) return
+      if (this.$refs.content && this.$refs.content.contains(e.target)) return
      if (this.$el.contains(e.target)) return
+      if (this.childrenShown.size > 0) return
      this.hidePopover()
+      if (this.parentPopover) this.parentPopover.onClickOutside(e)
+    },
+    onScroll (e) {
+      this.updateStyles()
+    },
+    onResize (e) {
+      this.updateStyles()
+    },
+    onChildPopoverState (childRef, state) {
+      if (state) {
+        this.childrenShown.add(childRef)
+      } else {
+        this.childrenShown.delete(childRef)
+      }
    }
  },
  updated () {
@ -175,11 +297,18 @@ const Popover = {
      this.oldSize = { width: content.offsetWidth, height: content.offsetHeight }
    }
  },
-  created () {
-    document.addEventListener('click', this.onClickOutside)
+  mounted () {
+    let scrollable = this.$refs.trigger.closest('.column.-scrollable') ||
+        this.$refs.trigger.closest('.mobile-notifications')
+    if (!scrollable) scrollable = window
+    this.scrollable = scrollable
+    let parent = this.$parent
+    while (parent && parent.$.type.name !== 'Popover') {
+      parent = parent.$parent
+    }
+    this.parentPopover = parent
  },
-  unmounted () {
-    document.removeEventListener('click', this.onClickOutside)
+  beforeUnmount () {
    this.hidePopover()
  }
 }
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@ -1,5 +1,5 @@
 <template>
-  <div
+  <span
    @mouseenter="onMouseenter"
    @mouseleave="onMouseleave"
  >
@ -11,12 +11,17 @@
    >
      <slot name="trigger" />
    </button>
+    <teleport to="#popovers">
+      <transition name="fade">
        <div
          v-if="!hidden"
          ref="content"
          :style="styles"
          class="popover"
          :class="popoverClass || 'popover-default'"
+          @mouseenter="onMouseenterContent"
+          @mouseleave="onMouseleaveContent"
+          @click="onClickContent"
        >
          <slot
            name="content"
@ -24,7 +29,9 @@
            :close="hidePopover"
          />
        </div>
-  </div>
+      </transition>
+    </teleport>
+  </span>
 </template>

 <script src="./popover.js" />
@ -37,14 +44,15 @@
 }

 .popover {
-  z-index: 500;
-  position: absolute;
+  z-index: var(--ZI_popover_override, var(--ZI_popovers));
+  position: fixed;
  min-width: 0;
+  max-width: calc(100vw - 20px);
+  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--popupShadow);
 }

 .popover-default {
-  transition: opacity 0.3s;
-
  &:after {
    content: '';
    position: absolute;
@ -80,7 +88,7 @@
  text-align: left;
  list-style: none;
  max-width: 100vw;
-  z-index: 200;
+  z-index: var(--ZI_popover_override, var(--ZI_popovers));
  white-space: nowrap;

  .dropdown-divider {
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@ -41,7 +41,7 @@ const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
  allAttentions = uniqBy(allAttentions, 'id')
  allAttentions = reject(allAttentions, { id: currentUser.id })

-  let mentions = map(allAttentions, (attention) => {
+  const mentions = map(allAttentions, (attention) => {
    return `@${attention.screen_name}`
  })

@ -242,7 +242,7 @@ const PostStatusForm = {
    })
  },
  watch: {
-    'newStatus': {
+    newStatus: {
      deep: true,
      handler () {
        this.statusChanged()
@ -273,7 +273,7 @@ const PostStatusForm = {
          this.$refs.textarea.focus()
        })
      }
-      let el = this.$el.querySelector('textarea')
+      const el = this.$el.querySelector('textarea')
      el.style.height = 'auto'
      el.style.height = undefined
      this.error = null
@ -392,7 +392,7 @@ const PostStatusForm = {
      this.$emit('resize', { delayed: true })
    },
    removeMediaFile (fileInfo) {
-      let index = this.newStatus.files.indexOf(fileInfo)
+      const index = this.newStatus.files.indexOf(fileInfo)
      this.newStatus.files.splice(index, 1)
      this.$emit('resize')
    },
@ -462,7 +462,7 @@ const PostStatusForm = {
    },
    onEmojiInputInput (e) {
      this.$nextTick(() => {
-        this.resize(this.$refs['textarea'])
+        this.resize(this.$refs.textarea)
      })
    },
    resize (e) {
@ -477,8 +477,8 @@ const PostStatusForm = {
        return
      }

-      const formRef = this.$refs['form']
-      const bottomRef = this.$refs['bottom']
+      const formRef = this.$refs.form
+      const bottomRef = this.$refs.bottom
      /* Scroller is either `window` (replies in TL), sidebar (main post form,
       * replies in notifs) or mobile post form. Note that getting and setting
       * scroll is different for `Window` and `Element`s
@ -564,7 +564,7 @@ const PostStatusForm = {
      this.$refs['emoji-input'].resize()
    },
    showEmojiPicker () {
-      this.$refs['textarea'].focus()
+      this.$refs.textarea.focus()
      this.$refs['emoji-input'].triggerShowPicker()
    },
    clearError () {
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@ -45,7 +45,7 @@ const ReactButton = {
    emojis () {
      if (this.filterWord !== '') {
        const filterWordLowercase = trim(this.filterWord.toLowerCase())
-        let orderedEmojiList = []
+        const orderedEmojiList = []
        for (const emoji of this.$store.state.instance.emoji) {
          if (emoji.replacement === this.filterWord) return [emoji]

--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@ -6,15 +6,16 @@
    :offset="{ y: 5 }"
    :bound-to="{ x: 'container' }"
    remove-padding
+    popover-class="ReactButton popover-default"
    @show="focusInput"
  >
-    <template v-slot:content="{close}">
+    <template #content="{close}">
      <div class="reaction-picker-filter">
        <input
          v-model="filterWord"
-          @input="$event.target.composing = false"
          size="1"
          :placeholder="$t('emoji.search_emoji')"
+          @input="$event.target.composing = false"
        >
      </div>
      <div class="reaction-picker">
@ -40,8 +41,8 @@
        <div class="reaction-bottom-fader" />
      </div>
    </template>
-    <template v-slot:trigger>
-      <button
+    <template #trigger>
+      <span
        class="button-unstyled popover-trigger"
        :title="$t('tool_tip.add_reaction')"
      >
@ -49,7 +50,7 @@
          class="fa-scale-110 fa-old-padding"
          :icon="['far', 'smile-beam']"
        />
-      </button>
+      </span>
    </template>
  </Popover>
 </template>
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@ -23,6 +23,7 @@
                v-model.trim="v$.user.username.$model"
                :disabled="isPending"
                class="form-control"
+                :aria-required="true"
                :placeholder="$t('registration.username_placeholder')"
              >
            </div>
@ -50,6 +51,7 @@
                v-model.trim="v$.user.fullname.$model"
                :disabled="isPending"
                class="form-control"
+                :aria-required="true"
                :placeholder="$t('registration.fullname_placeholder')"
              >
            </div>
@ -71,13 +73,14 @@
              <label
                class="form--label"
                for="email"
-              >{{ $t('registration.email') }}</label>
+              >{{ accountActivationRequired ? $t('registration.email') : $t('registration.email_optional') }}</label>
              <input
                id="email"
                v-model="v$.user.email.$model"
                :disabled="isPending"
                class="form-control"
                type="email"
+                :aria-required="accountActivationRequired"
              >
            </div>
            <div
@ -95,7 +98,7 @@
              <label
                class="form--label"
                for="bio"
-              >{{ $t('registration.bio') }} ({{ $t('general.optional') }})</label>
+              >{{ $t('registration.bio_optional') }}</label>
              <textarea
                id="bio"
                v-model="user.bio"
@ -119,6 +122,7 @@
                :disabled="isPending"
                class="form-control"
                type="password"
+                :aria-required="true"
              >
            </div>
            <div
@ -146,6 +150,7 @@
                :disabled="isPending"
                class="form-control"
                type="password"
+                :aria-required="true"
              >
            </div>
            <div
--- a/src/components/search_bar/search_bar.js
+++ b/src/components/search_bar/search_bar.js
@ -16,7 +16,7 @@ const SearchBar = {
    error: false
  }),
  watch: {
-    '$route': function (route) {
+    $route: function (route) {
      if (route.name === 'search') {
        this.searchTerm = route.query.query
      }
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@ -24,7 +24,7 @@
      :items="items"
      :get-key="getKey"
    >
-      <template v-slot:item="{item}">
+      <template #item="{item}">
        <div
          class="selectable-list-item-inner"
          :class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
@ -41,7 +41,7 @@
          />
        </div>
      </template>
-      <template v-slot:empty>
+      <template #empty>
        <slot name="empty" />
      </template>
    </List>
--- a/src/components/settings_modal/helpers/modified_indicator.vue
+++ b/src/components/settings_modal/helpers/modified_indicator.vue
@ -6,14 +6,14 @@
    <Popover
      trigger="hover"
    >
-      <template v-slot:trigger>
+      <template #trigger>
        &nbsp;
        <FAIcon
          icon="wrench"
          :aria-label="$t('settings.setting_changed')"
        />
      </template>
-      <template v-slot:content>
+      <template #content>
        <div class="modified-tooltip">
          {{ $t('settings.setting_changed') }}
        </div>
@ -41,11 +41,11 @@ export default {
 .ModifiedIndicator {
  display: inline-block;
  position: relative;
+}

 .modified-tooltip {
  margin: 0.5em 1em;
  min-width: 10em;
  text-align: center;
 }
-}
 </style>
--- a/src/components/settings_modal/helpers/server_side_indicator.vue
+++ b/src/components/settings_modal/helpers/server_side_indicator.vue
@ -6,14 +6,14 @@
    <Popover
      trigger="hover"
    >
-      <template v-slot:trigger>
+      <template #trigger>
        &nbsp;
        <FAIcon
          icon="server"
          :aria-label="$t('settings.setting_server_side')"
        />
      </template>
-      <template v-slot:content>
+      <template #content>
        <div class="serverside-tooltip">
          {{ $t('settings.setting_server_side') }}
        </div>
@ -41,11 +41,11 @@ export default {
 .ServerSideIndicator {
  display: inline-block;
  position: relative;
+}

 .serverside-tooltip {
  margin: 0.5em 1em;
  min-width: 10em;
  text-align: center;
 }
-}
 </style>
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@ -53,7 +53,7 @@
          :bound-to="{ x: 'container' }"
          remove-padding
        >
-          <template v-slot:trigger>
+          <template #trigger>
            <button
              class="btn button-default"
              :title="$t('general.close')"
@ -65,7 +65,7 @@
              />
            </button>
          </template>
-          <template v-slot:content="{close}">
+          <template #content="{close}">
            <div class="dropdown-menu">
              <button
                class="button-default dropdown-item dropdown-item-icon"
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@ -74,6 +74,22 @@
            {{ $t('settings.show_scrollbars') }}
          </BooleanSetting>
        </li>
+        <li>
+          <BooleanSetting
+            path="userPopoverZoom"
+            expert="1"
+          >
+            {{ $t('settings.user_popover_avatar_zoom') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="userPopoverOverlay"
+            expert="1"
+          >
+            {{ $t('settings.user_popover_avatar_overlay') }}
+          </BooleanSetting>
+        </li>
        <li>
          <ChoiceSetting
            v-if="user"
@ -261,18 +277,14 @@
            {{ $t('settings.mention_link_display') }}
          </ChoiceSetting>
        </li>
-        <ul
-          class="setting-list suboptions"
-        >
-          <li v-if="mentionLinkDisplay === 'short'">
+        <li>
          <BooleanSetting
            path="mentionLinkShowTooltip"
            expert="1"
          >
-              {{ $t('settings.mention_link_show_tooltip') }}
+            {{ $t('settings.mention_link_use_tooltip') }}
          </BooleanSetting>
        </li>
-        </ul>
        <li>
          <BooleanSetting
            path="useAtIcon"
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
@ -10,7 +10,7 @@
          :query="queryUserIds"
          :placeholder="$t('settings.search_user_to_block')"
        >
-          <template v-slot="row">
+          <template #default="row">
            <BlockCard
              :user-id="row.item"
            />
@ -21,7 +21,7 @@
        :refresh="true"
        :get-key="i => i"
      >
-        <template v-slot:header="{selected}">
+        <template #header="{selected}">
          <div class="bulk-actions">
            <ProgressButton
              v-if="selected.length > 0"
@ -29,7 +29,7 @@
              :click="() => blockUsers(selected)"
            >
              {{ $t('user_card.block') }}
-              <template v-slot:progress>
+              <template #progress>
                {{ $t('user_card.block_progress') }}
              </template>
            </ProgressButton>
@ -39,16 +39,16 @@
              :click="() => unblockUsers(selected)"
            >
              {{ $t('user_card.unblock') }}
-              <template v-slot:progress>
+              <template #progress>
                {{ $t('user_card.unblock_progress') }}
              </template>
            </ProgressButton>
          </div>
        </template>
-        <template v-slot:item="{item}">
+        <template #item="{item}">
          <BlockCard :user-id="item" />
        </template>
-        <template v-slot:empty>
+        <template #empty>
          {{ $t('settings.no_blocks') }}
        </template>
      </BlockList>
@ -63,7 +63,7 @@
              :query="queryUserIds"
              :placeholder="$t('settings.search_user_to_mute')"
            >
-              <template v-slot="row">
+              <template #default="row">
                <MuteCard
                  :user-id="row.item"
                />
@ -74,7 +74,7 @@
            :refresh="true"
            :get-key="i => i"
          >
-            <template v-slot:header="{selected}">
+            <template #header="{selected}">
              <div class="bulk-actions">
                <ProgressButton
                  v-if="selected.length > 0"
@ -82,7 +82,7 @@
                  :click="() => muteUsers(selected)"
                >
                  {{ $t('user_card.mute') }}
-                  <template v-slot:progress>
+                  <template #progress>
                    {{ $t('user_card.mute_progress') }}
                  </template>
                </ProgressButton>
@ -92,16 +92,16 @@
                  :click="() => unmuteUsers(selected)"
                >
                  {{ $t('user_card.unmute') }}
-                  <template v-slot:progress>
+                  <template #progress>
                    {{ $t('user_card.unmute_progress') }}
                  </template>
                </ProgressButton>
              </div>
            </template>
-            <template v-slot:item="{item}">
+            <template #item="{item}">
              <MuteCard :user-id="item" />
            </template>
-            <template v-slot:empty>
+            <template #empty>
              {{ $t('settings.no_mutes') }}
            </template>
          </MuteList>
@ -114,7 +114,7 @@
              :query="queryKnownDomains"
              :placeholder="$t('settings.type_domains_to_mute')"
            >
-              <template v-slot="row">
+              <template #default="row">
                <DomainMuteCard
                  :domain="row.item"
                />
@ -125,7 +125,7 @@
            :refresh="true"
            :get-key="i => i"
          >
-            <template v-slot:header="{selected}">
+            <template #header="{selected}">
              <div class="bulk-actions">
                <ProgressButton
                  v-if="selected.length > 0"
@ -133,16 +133,16 @@
                  :click="() => unmuteDomains(selected)"
                >
                  {{ $t('domain_mute_card.unmute') }}
-                  <template v-slot:progress>
+                  <template #progress>
                    {{ $t('domain_mute_card.unmute_progress') }}
                  </template>
                </ProgressButton>
              </div>
            </template>
-            <template v-slot:item="{item}">
+            <template #item="{item}">
              <DomainMuteCard :domain="item" />
            </template>
-            <template v-slot:empty>
+            <template #empty>
              {{ $t('settings.no_mutes') }}
            </template>
          </DomainMuteList>
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@ -71,10 +71,12 @@ const ProfileTab = {
      })
    },
    emojiSuggestor () {
-      return suggestor({ emoji: [
+      return suggestor({
+        emoji: [
          ...this.$store.state.instance.emoji,
          ...this.$store.state.instance.customEmoji
-      ] })
+        ]
+      })
    },
    userSuggestor () {
      return suggestor({ store: this.$store })
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@ -117,8 +117,8 @@
        <button
          v-if="!isDefaultAvatar && pickAvatarBtnVisible"
          :title="$t('settings.reset_avatar')"
-          @click="resetAvatar"
          class="button-unstyled reset-button"
+          @click="resetAvatar"
        >
          <FAIcon
            icon="times"
--- a/src/components/settings_modal/tabs/security_tab/mfa.js
+++ b/src/components/settings_modal/tabs/security_tab/mfa.js
@ -32,8 +32,8 @@ const Mfa = {
  components: {
    'recovery-codes': RecoveryCodes,
    'totp-item': TOTP,
-    'qrcode': VueQrcode,
-    'confirm': Confirm
+    qrcode: VueQrcode,
+    confirm: Confirm
  },
  computed: {
    canSetupOTP () {
@ -139,7 +139,7 @@ const Mfa = {

    // fetch settings from server
    async fetchSettings () {
-      let result = await this.backendInteractor.settingsMFA()
+      const result = await this.backendInteractor.settingsMFA()
      if (result.error) return
      this.settings = result.settings
      this.settings.available = true
--- a/src/components/settings_modal/tabs/security_tab/mfa_totp.js
+++ b/src/components/settings_modal/tabs/security_tab/mfa_totp.js
@ -10,7 +10,7 @@ export default {
    inProgress: false // progress peform request to disable otp method
  }),
  components: {
-    'confirm': Confirm
+    confirm: Confirm
  },
  computed: {
    isActivated () {
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@ -29,7 +29,10 @@
              {{ $t('settings.style.preview.content') }}
            </h4>

-            <i18n-t scope="global" keypath="settings.style.preview.text">
+            <i18n-t
+              scope="global"
+              keypath="settings.style.preview.text"
+            >
              <code style="font-family: var(--postCodeFont)">
                {{ $t('settings.style.preview.mono') }}
              </code>
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@ -112,9 +112,11 @@ export default {
      return hex2rgb(this.selected.color)
    },
    style () {
-      return this.ready ? {
+      return this.ready
+        ? {
            boxShadow: getCssShadow(this.fallback)
-      } : {}
+          }
+        : {}
    }
  }
 }
--- a/src/components/shout_panel/shout_panel.vue
+++ b/src/components/shout_panel/shout_panel.vue
@ -80,7 +80,7 @@
 .floating-shout {
  position: fixed;
  bottom: 0.5em;
-  z-index: 1000;
+  z-index: var(--ZI_popovers);
  max-width: 25em;

  &.-left {
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@ -211,7 +211,7 @@

 .side-drawer-container {
  position: fixed;
-  z-index: 1000;
+  z-index: var(--ZI_navbar);
  top: 0;
  left: 0;
  width: 100%;
--- a/src/components/staff_panel/staff_panel.js
+++ b/src/components/staff_panel/staff_panel.js
@ -17,8 +17,8 @@ const StaffPanel = {
      const groupedStaffAccounts = groupBy(staffAccounts, 'role')

      return [
-        { role: 'admin', users: groupedStaffAccounts['admin'] },
-        { role: 'moderator', users: groupedStaffAccounts['moderator'] }
+        { role: 'admin', users: groupedStaffAccounts.admin },
+        { role: 'moderator', users: groupedStaffAccounts.moderator }
      ].filter(group => group.users)
    },
    ...mapGetters([
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@ -4,13 +4,13 @@ import ReactButton from '../react_button/react_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
 import ExtraButtons from '../extra_buttons/extra_buttons.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
-import UserCard from '../user_card/user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import AvatarList from '../avatar_list/avatar_list.vue'
 import Timeago from '../timeago/timeago.vue'
 import StatusContent from '../status_content/status_content.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import StatusPopover from '../status_popover/status_popover.vue'
+import UserPopover from '../user_popover/user_popover.vue'
 import UserListPopover from '../user_list_popover/user_list_popover.vue'
 import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
 import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
@ -105,7 +105,6 @@ const Status = {
    RetweetButton,
    ExtraButtons,
    PostStatusForm,
-    UserCard,
    UserAvatar,
    AvatarList,
    Timeago,
@ -115,7 +114,8 @@ const Status = {
    StatusContent,
    RichContent,
    MentionLink,
-    MentionsLine
+    MentionsLine,
+    UserPopover
  },
  props: [
    'statusoid',
@ -361,6 +361,7 @@ const Status = {
      return uniqBy(combinedUsers, 'id')
    },
    tags () {
+      // eslint-disable-next-line no-prototype-builtins
      return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ')
    },
    hidePostStats () {
@ -448,7 +449,7 @@ const Status = {
    scrollIfHighlighted (highlightId) {
      const id = highlightId
      if (this.status.id === id) {
-        let rect = this.$el.getBoundingClientRect()
+        const rect = this.$el.getBoundingClientRect()
        if (rect.top < 100) {
          // Post is above screen, match its top to screen top
          window.scrollBy(0, rect.top - 100)
@ -463,7 +464,7 @@ const Status = {
    }
  },
  watch: {
-    'highlight': function (id) {
+    highlight: function (id) {
      this.scrollIfHighlighted(id)
    },
    'status.repeat_num': function (num) {
@ -478,7 +479,7 @@ const Status = {
        this.$store.dispatch('fetchFavs', this.status.id)
      }
    },
-    'isSuspendable': function (val) {
+    isSuspendable: function (val) {
      this.suspendable = val
    }
  }
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@ -124,7 +124,11 @@
        >
          <a
            :href="$router.resolve(userProfileLink).href"
-            @click.stop.prevent.capture="toggleUserExpanded"
+            @click.prevent
+          >
+            <UserPopover
+              :user-id="status.user.id"
+              :overlay-centers="true"
            >
              <UserAvatar
                class="post-avatar"
@ -133,16 +137,10 @@
                :better-shadow="betterShadow"
                :user="status.user"
              />
+            </UserPopover>
          </a>
        </div>
        <div class="right-side">
-          <UserCard
-            v-if="userExpanded"
-            :user-id="status.user.id"
-            :rounded="true"
-            :bordered="true"
-            class="usercard"
-          />
          <div
            v-if="!noHeading"
            class="status-heading"
@ -322,6 +320,7 @@
                  class="mentions-line-first"
                />
              </span>
+              {{ ' ' }}
              <MentionsLine
                v-if="hasMentionsLine"
                :mentions="mentionsLine.slice(1)"
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@ -38,6 +38,13 @@ const StatusPopover = {
          .catch(e => (this.error = true))
      }
    }
+  },
+  watch: {
+    status (newStatus, oldStatus) {
+      if (newStatus !== oldStatus) {
+        this.$nextTick(() => this.$refs.popover.updateStyles())
+      }
+    }
  }
 }

--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@ -1,14 +1,16 @@
 <template>
  <Popover
+    ref="popover"
    trigger="hover"
+    :stay-on-click="true"
    popover-class="popover-default status-popover"
    :bound-to="{ x: 'container' }"
    @show="enter"
  >
-    <template v-slot:trigger>
+    <template #trigger>
      <slot />
    </template>
-    <template v-slot:content>
+    <template #content>
      <Status
        v-if="status"
        :is-preview="true"
@ -52,8 +54,6 @@
  border-width: 1px;
  border-radius: $fallback--tooltipRadius;
  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-  box-shadow: var(--popupShadow);

  /* TODO cleanup this */
  .Status.Status {
--- a/src/components/sticker_picker/sticker_picker.js
+++ b/src/components/sticker_picker/sticker_picker.js
@ -31,8 +31,8 @@ const StickerPicker = {
      fetch(sticker)
        .then((res) => {
          res.blob().then((blob) => {
-            var file = new File([blob], name, { mimetype: 'image/png' })
-            var formData = new FormData()
+            const file = new File([blob], name, { mimetype: 'image/png' })
+            const formData = new FormData()
            formData.append('file', file)
            statusPosterService.uploadMedia({ store, formData })
              .then((fileData) => {
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@ -46,7 +46,10 @@
      </div>
    </div>
    <div :class="classes.footer">
-      <teleport :to="footerSlipgate" :disabled="!embedded || !footerSlipgate">
+      <teleport
+        :to="footerSlipgate"
+        :disabled="!embedded || !footerSlipgate"
+      >
        <div
          v-if="count===0"
          class="new-status-notification text-center faint"
--- a/src/components/timeline/timeline_quick_settings.vue
+++ b/src/components/timeline/timeline_quick_settings.vue
@ -4,7 +4,7 @@
    class="TimelineQuickSettings"
    :bound-to="{ x: 'container' }"
  >
-    <template v-slot:content>
+    <template #content>
      <div class="dropdown-menu">
        <div v-if="loggedIn">
          <button
@ -80,7 +80,7 @@
        </button>
      </div>
    </template>
-    <template v-slot:trigger>
+    <template #trigger>
      <button class="button-unstyled">
        <FAIcon icon="filter" />
      </button>
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@ -11,9 +11,9 @@ library.add(faChevronDown)
 // because nav panel benefits from the same information.
 export const timelineNames = () => {
  return {
-    'friends': 'nav.home_timeline',
-    'bookmarks': 'nav.bookmarks',
-    'dms': 'nav.dms',
+    friends: 'nav.home_timeline',
+    bookmarks: 'nav.bookmarks',
+    dms: 'nav.dms',
    'public-timeline': 'nav.public_tl',
    'public-external-timeline': 'nav.twkn'
  }
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@ -3,19 +3,17 @@
    trigger="click"
    class="TimelineMenu"
    :class="{ 'open': isOpen }"
-    :margin="{ left: -15, right: -200 }"
    :bound-to="{ x: 'container' }"
-    popover-class="timeline-menu-popover-wrap"
+    bound-to-selector=".Timeline"
+    popover-class="timeline-menu-popover popover-default"
    @show="openMenu"
    @close="() => isOpen = false"
  >
-    <template v-slot:content>
-      <div class="timeline-menu-popover popover-default">
+    <template #content>
      <TimelineMenuContent />
-      </div>
    </template>
-    <template v-slot:trigger>
-      <button class="button-unstyled title timeline-menu-title">
+    <template #trigger>
+      <span class="button-unstyled title timeline-menu-title">
        <span class="timeline-title">{{ timelineName() }}</span>
        <span>
          <FAIcon
@ -27,7 +25,7 @@
          class="click-blocker"
          @click="blockOpen"
        />
-      </button>
+      </span>
    </template>
  </Popover>
 </template>
@ -38,42 +36,18 @@
@import '../../_variables.scss';

 .TimelineMenu {
-  flex-shrink: 1;
  margin-right: auto;
  min-width: 0;
-  width: 24rem;

  .popover-trigger-button {
    vertical-align: bottom;
  }

-  .timeline-menu-popover-wrap {
-    overflow: hidden;
-    // Match panel heading padding to line up menu with bottom of heading
-    margin-top: 0.6rem;
-    padding: 0 15px 15px 15px;
-  }
-
-  .timeline-menu-popover {
-    width: 24rem;
-    max-width: 100vw;
-    margin: 0;
-    font-size: 1rem;
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
-    transform: translateY(-100%);
-    transition: transform 100ms;
-  }
-
  .panel::after {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }

-  &.open .timeline-menu-popover {
-    transform: translateY(0);
-  }
-
  .timeline-menu-title {
    margin: 0;
    cursor: pointer;
@ -108,6 +82,16 @@
    box-shadow: var(--popoverShadow);
  }

+}
+
+.timeline-menu-popover {
+  min-width: 24rem;
+  max-width: 100vw;
+  margin-top: 0.6rem;
+  font-size: 1rem;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+
  ul {
    list-style: none;
    margin: 0;
@ -134,7 +118,9 @@

  a {
    display: block;
-    padding: 0.6em 0.65em;
+    padding: 0 0.65em;
+    height: 3.5em;
+    line-height: 3.5em;

    &:hover {
      background-color: $fallback--lightBg;
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@ -14,7 +14,9 @@ import {
  faRss,
  faSearchPlus,
  faExternalLinkAlt,
-  faEdit
+  faEdit,
+  faTimes,
+  faExpandAlt
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
@ -22,12 +24,21 @@ library.add(
  faBell,
  faSearchPlus,
  faExternalLinkAlt,
-  faEdit
+  faEdit,
+  faTimes,
+  faExpandAlt
 )

 export default {
  props: [
-    'userId', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar'
+    'userId',
+    'switcher',
+    'selected',
+    'hideBio',
+    'rounded',
+    'bordered',
+    'avatarAction', // default - open profile, 'zoom' - zoom, function - call function
+    'onClose'
  ],
  data () {
    return {
@ -47,15 +58,16 @@ export default {
    },
    classes () {
      return [{
-        'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
-        'user-card-rounded': this.rounded === true, // set border-radius for all sides
-        'user-card-bordered': this.bordered === true // set border for all sides
+        '-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
+        '-rounded': this.rounded === true, // set border-radius for all sides
+        '-bordered': this.bordered === true, // set border for all sides
+        '-popover': !!this.onClose // set popover rounding
      }]
    },
    style () {
      return {
        backgroundImage: [
-          `linear-gradient(to bottom, var(--profileTint), var(--profileTint))`,
+          'linear-gradient(to bottom, var(--profileTint), var(--profileTint))',
          `url(${this.user.cover_photo})`
        ].join(', ')
      }
@ -170,6 +182,12 @@ export default {
    },
    mentionUser () {
      this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
+    },
+    onAvatarClickHandler (e) {
+      if (this.onAvatarClick) {
+        e.preventDefault()
+        this.onAvatarClick()
+      }
    }
  }
 }
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@ -42,8 +42,10 @@
    mask-composite: exclude;
    background-size: cover;
    mask-size: 100% 60%;
-    border-top-left-radius: calc(var(--panelRadius) - 1px);
-    border-top-right-radius: calc(var(--panelRadius) - 1px);
+    border-top-left-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
+    border-top-right-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
+    border-bottom-left-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
+    border-bottom-right-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
    background-color: var(--profileBg);
    z-index: -2;

@ -72,21 +74,33 @@
    }
  }

-  // Modifiers
-
-  &-rounded-t {
+  &.-rounded-t {
    border-top-left-radius: $fallback--panelRadius;
    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
    border-top-right-radius: $fallback--panelRadius;
    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+
+    --__roundnessTop: var(--panelRadius);
+    --__roundnessBottom: 0;
  }

-  &-rounded {
+  &.-rounded {
    border-radius: $fallback--panelRadius;
    border-radius: var(--panelRadius, $fallback--panelRadius);
+
+    --__roundnessTop: var(--panelRadius);
+    --__roundnessBottom: var(--panelRadius);
  }

-  &-bordered {
+  &.-popover {
+    border-radius: $fallback--tooltipRadius;
+    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+
+    --__roundnessTop: var(--tooltipRadius);
+    --__roundnessBottom: var(--tooltipRadius);
+  }
+
+  &.-bordered {
    border-width: 1px;
    border-style: solid;
    border-color: $fallback--border;
@ -99,6 +113,15 @@
  color: var(--lightText, $fallback--lightText);
  padding: 0 26px;

+  a {
+    color: $fallback--lightText;
+    color: var(--lightText, $fallback--lightText);
+
+    &:hover {
+      color: var(--icon);
+    }
+  }
+
  .container {
    min-width: 0;
    padding: 16px 0 6px;
@ -110,23 +133,27 @@
      min-width: 0;
    }

+    > a {
+      vertical-align: middle;
+      display: flex;
+    }
+
    .Avatar {
      --_avatarShadowBox: var(--avatarShadow);
      --_avatarShadowFilter: var(--avatarShadowFilter);
      --_avatarShadowInset: var(--avatarShadowInset);

-      flex: 1 0 100%;
      width: 56px;
      height: 56px;
      object-fit: cover;
    }
  }

-  &-avatar-link {
+  &-avatar {
    position: relative;
    cursor: pointer;

-    &-overlay {
+    &.-overlay {
      position: absolute;
      left: 0;
      top: 0;
@ -146,7 +173,7 @@
      }
    }

-    &:hover &-overlay {
+    &:hover &.-overlay {
      opacity: 1;
    }
  }
@ -206,8 +233,6 @@
      flex: 0 1 auto;
      text-overflow: ellipsis;
      overflow: hidden;
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
    }

    .dailyAvg {
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@ -8,11 +8,11 @@
      :style="style"
      class="background-image"
    />
-    <div class="panel-heading -flexible-height">
+    <div :class="onClose ? '' : panel-heading -flexible-height">
      <div class="user-info">
        <div class="container">
          <a
-            v-if="allowZoomingAvatar"
+            v-if="avatarAction === 'zoom'"
            class="user-info-avatar -link"
            @click="zoomAvatar"
          >
@ -27,6 +27,13 @@
              />
            </div>
          </a>
+          <UserAvatar
+            v-else-if="typeof avatarAction === 'function'"
+            class="user-info-avatar"
+            :better-shadow="betterShadow"
+            :user="user"
+            @click="avatarAction"
+          />
          <router-link
            v-else
            :to="userProfileLink(user)"
@ -38,12 +45,16 @@
          </router-link>
          <div class="user-summary">
            <div class="top-line">
+              <router-link
+                :to="userProfileLink(user)"
+                class="user-name"
+              >
                <RichContent
                  :title="user.name"
-                class="user-name"
                  :html="user.name"
                  :emoji="user.emoji"
                />
+              </router-link>
              <button
                v-if="!isOtherUser && user.is_local"
                class="button-unstyled edit-profile-button"
@ -72,6 +83,27 @@
                :user="user"
                :relationship="relationship"
              />
+              <router-link
+                v-if="onClose"
+                :to="userProfileLink(user)"
+                class="button-unstyled external-link-button"
+                @click="onClose"
+              >
+                <FAIcon
+                  class="icon"
+                  icon="expand-alt"
+                />
+              </router-link>
+              <button
+                v-if="onClose"
+                class="button-unstyled external-link-button"
+                @click="onClose"
+              >
+                <FAIcon
+                  class="icon"
+                  icon="times"
+                />
+              </button>
            </div>
            <div class="bottom-line">
              <router-link
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@ -4,10 +4,10 @@
    placement="top"
    :offset="{ y: 5 }"
  >
-    <template v-slot:trigger>
+    <template #trigger>
      <slot />
    </template>
-    <template v-slot:content>
+    <template #content>
      <div class="user-list-popover">
        <template v-if="users.length">
          <div
--- a/src/components/user_popover/user_popover.js
+++ b/src/components/user_popover/user_popover.js
@ -0,0 +1,23 @@
+import UserCard from '../user_card/user_card.vue'
+import { defineAsyncComponent } from 'vue'
+
+const UserPopover = {
+  name: 'UserPopover',
+  props: [
+    'userId', 'overlayCenters', 'disabled', 'overlayCentersSelector'
+  ],
+  components: {
+    UserCard,
+    Popover: defineAsyncComponent(() => import('../popover/popover.vue'))
+  },
+  computed: {
+    userPopoverZoom () {
+      return this.$store.getters.mergedConfig.userPopoverZoom
+    },
+    userPopoverOverlay () {
+      return this.$store.getters.mergedConfig.userPopoverOverlay
+    }
+  }
+}
+
+export default UserPopover
--- a/src/components/user_popover/user_popover.vue
+++ b/src/components/user_popover/user_popover.vue
@ -0,0 +1,33 @@
+<template>
+  <Popover
+    trigger="click"
+    popover-class="popover-default user-popover"
+    :overlay-centers-selector="overlayCentersSelector || '.user-info .Avatar'"
+    :overlay-centers="overlayCenters && userPopoverOverlay"
+    :disabled="disabled"
+  >
+    <template #trigger>
+      <slot />
+    </template>
+    <template #content="{close}">
+      <UserCard
+        class="user-popover"
+        :user-id="userId"
+        :hide-bio="true"
+        :avatar-action="userPopoverZoom ? 'zoom' : close"
+        :on-close="close"
+      />
+    </template>
+  </Popover>
+</template>
+
+<script src="./user_popover.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+/* popover styles load on-demand, so we need to override */
+.user-popover.popover {
+}
+
+</style>
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@ -8,7 +8,7 @@
        :user-id="userId"
        :switcher="true"
        :selected="timeline.viewing"
-        :allow-zooming-avatar="true"
+        avatar-action="zoom"
        rounded="top"
      />
      <div
@ -56,7 +56,7 @@
          :user-id="userId"
          :pinned-status-ids="user.pinnedStatusIds"
          :in-profile="true"
-          :footerSlipgate="footerRef"
+          :footer-slipgate="footerRef"
        />
        <div
          v-if="followsTabVisible"
@ -65,7 +65,7 @@
          :disabled="!user.friends_count"
        >
          <FriendList :user-id="userId">
-            <template v-slot:item="{item}">
+            <template #item="{item}">
              <FollowCard :user="item" />
            </template>
          </FriendList>
@ -77,7 +77,7 @@
          :disabled="!user.followers_count"
        >
          <FollowerList :user-id="userId">
-            <template v-slot:item="{item}">
+            <template #item="{item}">
              <FollowCard
                :user="item"
                :no-follows-you="isUs"
@ -95,7 +95,7 @@
          :timeline="media"
          :user-id="userId"
          :in-profile="true"
-          :footerSlipgate="footerRef"
+          :footer-slipgate="footerRef"
        />
        <Timeline
          v-if="isUs"
@ -107,10 +107,13 @@
          timeline-name="favorites"
          :timeline="favorites"
          :in-profile="true"
-          :footerSlipgate="footerRef"
+          :footer-slipgate="footerRef"
        />
      </tab-switcher>
-      <div class="panel-footer" :ref="setFooterRef"></div>
+      <div
+        :ref="setFooterRef"
+        class="panel-footer"
+      />
    </div>
    <div
      v-else
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@ -45,7 +45,7 @@
        </div>
        <div class="user-reporting-panel-right">
          <List :items="statuses">
-            <template v-slot:item="{item}">
+            <template #item="{item}">
              <div class="status-fadein user-reporting-panel-sitem">
                <Status
                  :in-conversation="false"
--- a/src/components/who_to_follow/who_to_follow.js
+++ b/src/components/who_to_follow/who_to_follow.js
@ -28,7 +28,7 @@ const WhoToFollow = {
    getWhoToFollow () {
      const credentials = this.$store.state.users.currentUser.credentials
      if (credentials) {
-        apiService.suggestions({ credentials: credentials })
+        apiService.suggestions({ credentials })
          .then((reply) => {
            this.showWhoToFollow(reply)
          })
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@ -6,9 +6,9 @@ function showWhoToFollow (panel, reply) {
  const shuffled = shuffle(reply)

  panel.usersToFollow.forEach((toFollow, index) => {
-    let user = shuffled[index]
-    let img = user.avatar || this.$store.state.instance.defaultAvatar
-    let name = user.acct
+    const user = shuffled[index]
+    const img = user.avatar || this.$store.state.instance.defaultAvatar
+    const name = user.acct

    toFollow.img = img
    toFollow.name = name
@ -24,12 +24,12 @@ function showWhoToFollow (panel, reply) {
 }

 function getWhoToFollow (panel) {
-  var credentials = panel.$store.state.users.currentUser.credentials
+  const credentials = panel.$store.state.users.currentUser.credentials
  if (credentials) {
    panel.usersToFollow.forEach(toFollow => {
      toFollow.name = 'Loading...'
    })
-    apiService.suggestions({ credentials: credentials })
+    apiService.suggestions({ credentials })
      .then((reply) => {
        showWhoToFollow(panel, reply)
      })
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -238,8 +238,9 @@
    }
  },
  "registration": {
-    "bio": "Bio",
+    "bio_optional": "Bio (optional)",
    "email": "Email",
+    "email_optional": "Email (optional)",
    "fullname": "Display name",
    "password_confirm": "Password confirmation",
    "registration": "Registration",
@ -560,10 +561,12 @@
    "mention_link_display_short": "always as short names (e.g. {'@'}foo)",
    "mention_link_display_full_for_remote": "as full names only for remote users (e.g. {'@'}foo{'@'}example.org)",
    "mention_link_display_full": "always as full names (e.g. {'@'}foo{'@'}example.org)",
-    "mention_link_show_tooltip": "Show full user names as tooltip for remote users",
+    "mention_link_use_tooltip": "Show user card when clicking mention links",
    "mention_link_show_avatar": "Show user avatar beside the link",
    "mention_link_fade_domain": "Fade domains (e.g. {'@'}example.org in {'@'}foo{'@'}example.org)",
    "mention_link_bolden_you": "Highlight mention of you when you are mentioned",
+    "user_popover_avatar_zoom": "Clicking on user avatar in popover zooms it instead of closing the popover",
+    "user_popover_avatar_overlay": "Show user popover over user avatar",
    "fun": "Fun",
    "greentext": "Meme arrows",
    "show_yous": "Show (You)s",
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@ -15,7 +15,8 @@
    "title": "Fonctionnalités",
    "who_to_follow": "Suggestions de suivis",
    "pleroma_chat_messages": "Chat Pleroma",
-    "upload_limit": "Limite de téléversement"
+    "upload_limit": "Limite de téléversement",
+    "shout": "Shoutbox"
  },
  "finder": {
    "error_fetching_user": "Erreur lors de la recherche du compte",
@ -44,9 +45,15 @@
      "moderator": "Modo'",
      "admin": "Admin"
    },
-    "flash_content": "Clique pour afficher le contenu Flash avec Ruffle (Expérimental, peut ne pas fonctionner).",
+    "flash_content": "Cliquer pour afficher le contenu Flash avec Ruffle (Expérimental, peut ne pas fonctionner).",
    "flash_security": "Cela reste potentiellement dangereux, Flash restant du code arbitraire.",
-    "flash_fail": "Échec de chargement du contenu Flash, voir la console pour les détails."
+    "flash_fail": "Échec de chargement du contenu Flash, voir la console pour les détails.",
+    "scope_in_timeline": {
+      "direct": "Direct",
+      "public": "Publique",
+      "private": "Abonné⋅e⋅s seulement",
+      "unlisted": "Non-listé"
+    }
  },
  "image_cropper": {
    "crop_picture": "Rogner l'image",
@ -79,7 +86,9 @@
  },
  "media_modal": {
    "previous": "Précédent",
-    "next": "Suivant"
+    "next": "Suivant",
+    "counter": "{current} / {total}",
+    "hide": "Fermer le visualiseur multimédia"
  },
  "nav": {
    "about": "À propos",
@ -114,7 +123,8 @@
    "migrated_to": "a migré à",
    "reacted_with": "a réagi avec {0}",
    "follow_request": "veut vous suivre",
-    "error": "Erreur de chargement des notifications : {0}"
+    "error": "Erreur de chargement des notifications : {0}",
+    "poll_ended": "Sondage terminé"
  },
  "interactions": {
    "favs_repeats": "Partages et favoris",
@ -178,7 +188,8 @@
    },
    "reason_placeholder": "Cette instance modère les inscriptions manuellement.\nExpliquer ce qui motive votre inscription à l'administration.",
    "reason": "Motivation d'inscription",
-    "register": "Enregistrer"
+    "register": "Enregistrer",
+    "email_language": "Dans quelle langue voulez-vous recevoir les emails du server ?"
  },
  "selectable_list": {
    "select_all": "Tout selectionner"
@ -267,8 +278,8 @@
    "import_theme": "Charger le thème",
    "inputRadius": "Champs de texte",
    "checkboxRadius": "Cases à cocher",
-    "instance_default": "(default : {value})",
-    "instance_default_simple": "(default)",
+    "instance_default": "(défaut : {value})",
+    "instance_default_simple": "(défaut)",
    "interface": "Interface",
    "interfaceLanguage": "Langue de l'interface",
    "invalid_theme_imported": "Le fichier sélectionné n'est pas un thème Pleroma pris en charge. Aucun changement n'a été apporté à votre thème.",
@ -570,7 +581,71 @@
      "restore_settings": "Restaurer les paramètres depuis un fichier"
    },
    "hide_shoutbox": "Cacher la shoutbox de l'instance",
-    "right_sidebar": "Afficher le paneau latéral à droite"
+    "right_sidebar": "Afficher le paneau latéral à droite",
+    "expert_mode": "Préférences Avancées",
+    "post_look_feel": "Affichage des messages",
+    "mention_links": "Liens des mentions",
+    "email_language": "Langue pour recevoir les emails du server",
+    "account_backup_table_head": "Sauvegarde",
+    "download_backup": "Télécharger",
+    "backup_not_ready": "La sauvegarde n'est pas encore prête.",
+    "remove_backup": "Supprimer",
+    "list_backups_error": "Erreur d'obtention de la liste des sauvegardes : {error}",
+    "add_backup": "Créer une nouvelle sauvegarde",
+    "added_backup": "Ajouter une nouvelle sauvegarde.",
+    "account_alias": "Alias du compte",
+    "account_alias_table_head": "Alias",
+    "list_aliases_error": "Erreur à l'obtention des alias : {error}",
+    "hide_list_aliases_error_action": "Fermer",
+    "remove_alias": "Supprimer cet alias",
+    "new_alias_target": "Ajouter un nouvel alias (ex. {example})",
+    "added_alias": "L'alias à été ajouté.",
+    "add_alias_error": "Erreur à l'ajout de l'alias : {error}",
+    "move_account_target": "Compte cible (ex. {example})",
+    "moved_account": "Compte déplacé.",
+    "move_account_error": "Erreur au déplacement du compte : {error}",
+    "wordfilter": "Filtrage de mots",
+    "mute_bot_posts": "Masquer les messages des robots",
+    "hide_bot_indication": "Cacher l'indication d'un robot avec les messages",
+    "always_show_post_button": "Toujours montrer le bouton flottant Nouveau Message",
+    "hide_muted_threads": "Cacher les fils masqués",
+    "account_privacy": "Intimité",
+    "posts": "Messages",
+    "disable_sticky_headers": "Ne pas coller les en-têtes des colonnes en haut de l'écran",
+    "show_scrollbars": "Montrer les ascenseurs des colonnes",
+    "third_column_mode_none": "Jamais afficher la troisième colonne",
+    "third_column_mode_notifications": "Colonne de notifications",
+    "third_column_mode_postform": "Édition de messages et navigation",
+    "tree_advanced": "Permettre une navigation plus flexible dans l'arborescence",
+    "conversation_display_linear": "Style linéaire",
+    "conversation_other_replies_button": "Montrer le bouton \"autres réponses\"",
+    "conversation_other_replies_button_below": "En-dessous des messages",
+    "conversation_other_replies_button_inside": "Dans les messages",
+    "max_depth_in_thread": "Profondeur maximum à afficher par défaut dans un fil",
+    "mention_link_display": "Afficher les mentions",
+    "mention_link_display_full_for_remote": "complet pour les comptes distants (ex. {'@'}foo{'@'}example.org)",
+    "mention_link_display_full": "toujours complet (ex. {'@'}foo{'@'}example.org)",
+    "mention_link_show_avatar": "Afficher les avatars à coté du lien",
+    "mention_link_fade_domain": "Estomper les domaines (ex. {'@'}example.org en {'@'}foo{'@'}example.org)",
+    "mention_link_bolden_you": "Surligner les mentions qui vous sont destinées",
+    "show_yous": "Afficher (Vous)",
+    "setting_server_side": "Cette préférence est liée au profile et affecte toutes les sessions et clients",
+    "account_backup": "Sauvegarde de compte",
+    "account_backup_description": "Ceci permet de télécharger une archive des informations du compte et vos messages, mais ils ne peuvent pas actuellement être importé dans un compte Pleroma.",
+    "add_backup_error": "Erreur à l'ajout d'une nouvelle sauvegarde : {error}",
+    "move_account": "Déplacer le compte",
+    "move_account_notes": "Si vous voulez déplacer le compte ailleurs, vous devez aller sur votre compte cible et y créer un alias pointant ici.",
+    "hide_wordfiltered_statuses": "Cacher les messages filtré par un mot",
+    "user_profiles": "Profils des utilisateur⋅ice⋅s",
+    "notification_visibility_polls": "Fins de sondage auquel vous avez voté·e",
+    "hide_favorites_description": "Ne pas montrer ma liste de favoris (les personnes sont quand même notifiés)",
+    "conversation_display": "Style d'affichage des conversations",
+    "conversation_display_tree": "Arborescence",
+    "third_column_mode": "Quand il-y-a assez d'espace, afficher une troisième colonne avec",
+    "tree_fade_ancestors": "Montrer les parents du message courant en texte léger",
+    "use_at_icon": "Montrer le symbole {'@'} comme une icône au lieu de textuelle",
+    "mention_link_display_short": "toujours raccourcies (ex. {'@'}foo)",
+    "mention_link_show_tooltip": "Montrer le nom complet pour les comptes distants dans une info-bulle"
  },
  "timeline": {
    "collapse": "Fermer",
@ -613,7 +688,33 @@
    "thread_muted": "Fil de discussion masqué",
    "external_source": "Source externe",
    "unbookmark": "Supprimer des favoris",
-    "bookmark": "Ajouter aux favoris"
+    "bookmark": "Ajouter aux favoris",
+    "plus_more": "plus +{number}",
+    "many_attachments": "Message avec {number} pièce(s)-jointe(s)",
+    "collapse_attachments": "Réduire les pièces jointes",
+    "show_attachment_in_modal": "Montrer dans le visionneur de médias",
+    "hide_attachment": "Cacher la pièce jointe",
+    "you": "(Vous)",
+    "attachment_stop_flash": "Arrêter Flash Player",
+    "move_down": "Décaler la pièce-jointe à droite",
+    "thread_hide": "Cacher ce fil",
+    "thread_show": "Montrer ce fil",
+    "thread_show_full_with_icon": "{icon} {text}",
+    "thread_follow": "Montrer le reste du fil ({numStatus} message, {depth} niveaux maximum) | Montrer le reste du fil ({numStatus} messages, {depth} niveaux maximum)",
+    "thread_follow_with_icon": "{icon} {text}",
+    "ancestor_follow": "Monter les {numReplies} autres réponses après ce message | Monter les {numReplies} autres réponses après ce message",
+    "ancestor_follow_with_icon": "{icon} {text}",
+    "show_all_conversation_with_icon": "{icon} {text}",
+    "show_only_conversation_under_this": "Montrer uniquement les réponses à ce message",
+    "mentions": "Mentions",
+    "replies_list_with_others": "Réponses (+{numReplies} autres) : | Réponses (+{numReplies} autres) :",
+    "show_all_attachments": "Montrer toutes les pièces jointes",
+    "show_attachment_description": "Prévisualiser la description (ouvrir la pièce-jointe pour la description complète)",
+    "remove_attachment": "Enlever la pièce jointe",
+    "move_up": "Décaler la pièce-jointe à gauche",
+    "open_gallery": "Ouvrir la galerie",
+    "thread_show_full": "Montrer tout le fil ({numStatus} message, {depth} niveaux maximum) | Montrer tout le fil ({numStatus} messages, {depth} niveaux maximum)",
+    "show_all_conversation": "Montrer tout le fil ({numStatus} autre message) | Montrer tout le fil ({numStatus} autre messages)"
  },
  "user_card": {
    "approve": "Accepter",
@ -644,11 +745,11 @@
    "unmute_progress": "Démasquage…",
    "mute_progress": "Masquage…",
    "admin_menu": {
-      "moderation": "Moderation",
+      "moderation": "Modération",
      "grant_admin": "Promouvoir Administrateur⋅ice",
-      "revoke_admin": "Dégrader Administrateur⋅ice",
+      "revoke_admin": "Dégrader L'administrateur⋅ice",
      "grant_moderator": "Promouvoir Modérateur⋅ice",
-      "revoke_moderator": "Dégrader Modérateur⋅ice",
+      "revoke_moderator": "Dégrader la·e modérateur⋅ice",
      "activate_account": "Activer le compte",
      "deactivate_account": "Désactiver le compte",
      "delete_account": "Supprimer le compte",
@ -659,7 +760,8 @@
      "disable_remote_subscription": "Interdir de s'abonner a l'utilisateur depuis l'instance distante",
      "disable_any_subscription": "Interdir de s'abonner à l'utilisateur tout court",
      "quarantine": "Interdir les statuts de l'utilisateur à fédérer",
-      "delete_user": "Supprimer l'utilisateur"
+      "delete_user": "Supprimer l'utilisateur",
+      "delete_user_data_and_deactivate_confirmation": "Ceci va supprimer les données du compte de manière permanente et le désactivé. Êtes-vous vraiment sûr ?"
    },
    "mention": "Mention",
    "hidden": "Caché",
@ -679,7 +781,9 @@
      "striped": "Fond rayé"
    },
    "bot": "Robot",
-    "edit_profile": "Éditer le profil"
+    "edit_profile": "Éditer le profil",
+    "deactivated": "Désactivé",
+    "follow_cancel": "Annuler la requête"
  },
  "user_profile": {
    "timeline_title": "Flux du compte",
@ -747,13 +851,16 @@
        "media_removal_desc": "Cette instance supprime le contenu multimédia des instances suivantes :",
        "media_nsfw": "Force le contenu multimédia comme sensible",
        "ftl_removal": "Supprimées du flux fédéré",
-        "media_nsfw_desc": "Cette instance force les pièce-jointes comme sensible pour les messages des instances suivantes :"
+        "media_nsfw_desc": "Cette instance force les pièce-jointes comme sensible pour les messages des instances suivantes :",
+        "reason": "Raison",
+        "not_applicable": "N/A",
+        "instance": "Instance"
      },
      "federation": "Fédération",
      "mrf_policies": "Politiques MRF actives",
      "mrf_policies_desc": "Les politiques MRF modifient la fédération entre les instances. Les politiques suivantes sont activées :"
    },
-    "staff": "Staff"
+    "staff": "Équipe"
  },
  "domain_mute_card": {
    "mute": "Masqué",
@ -825,7 +932,23 @@
    "year": "{0} année",
    "years": "{0} années",
    "year_short": "{0}a",
-    "years_short": "{0}a"
+    "years_short": "{0}a",
+    "unit": {
+      "years": "{0} année | {0} années",
+      "years_short": "{0}ans",
+      "days_short": "{0}j",
+      "hours": "{0} heure | {0} heures",
+      "hours_short": "{0}h",
+      "minutes": "{0} minute | {0} minutes",
+      "minutes_short": "{0}min",
+      "months_short": "{0}mois",
+      "seconds": "{0} seconde | {0} secondes",
+      "seconds_short": "{0}s",
+      "weeks": "{0} semaine | {0} semaines",
+      "days": "{0} jour | {0} jours",
+      "months": "{0} mois | {0} mois",
+      "weeks_short": "{0}semaine"
+    }
  },
  "search": {
    "people": "Comptes",
--- a/src/i18n/messages.js
+++ b/src/i18n/messages.js
@ -46,7 +46,7 @@ const messages = {
  },
  setLanguage: async (i18n, language) => {
    if (loaders[language]) {
-      let messages = await loaders[language]()
+      const messages = await loaders[language]()
      i18n.setLocaleMessage(language, messages.default)
    }
    i18n.locale = language
--- a/src/i18n/zh.json
+++ b/src/i18n/zh.json
@ -15,7 +15,8 @@
    "title": "功能",
    "who_to_follow": "推荐关注",
    "pleroma_chat_messages": "Pleroma 聊天",
-    "upload_limit": "上传限制"
+    "upload_limit": "上传限制",
+    "shout": "留言板"
  },
  "finder": {
    "error_fetching_user": "获取用户时发生错误",
@ -46,7 +47,13 @@
    },
    "flash_content": "点击以使用 Ruffle 显示 Flash 内容（实验性，可能无效）。",
    "flash_security": "注意这可能有潜在的危险，因为 Flash 内容仍然是任意的代码。",
-    "flash_fail": "Flash 内容加载失败，请在控制台查看详情。"
+    "flash_fail": "Flash 内容加载失败，请在控制台查看详情。",
+    "scope_in_timeline": {
+      "public": "公开",
+      "direct": "私讯",
+      "private": "仅关注者",
+      "unlisted": "列外"
+    }
  },
  "image_cropper": {
    "crop_picture": "裁剪图片",
@ -79,7 +86,9 @@
  },
  "media_modal": {
    "previous": "往前",
-    "next": "往后"
+    "next": "往后",
+    "hide": "关闭媒体查看器",
+    "counter": "{current} / {total}"
  },
  "nav": {
    "about": "关于",
@ -114,7 +123,8 @@
    "reacted_with": "作出了 {0} 的反应",
    "migrated_to": "迁移到了",
    "follow_request": "想要关注你",
-    "error": "取得通知时发生错误：{0}"
+    "error": "取得通知时发生错误：{0}",
+    "poll_ended": "投票结束了"
  },
  "polls": {
    "add_poll": "增加投票",
@ -197,7 +207,8 @@
    },
    "reason_placeholder": "此实例的注册需要手动批准。\n请让管理员知道您为什么想要注册。",
    "reason": "注册理由",
-    "register": "注册"
+    "register": "注册",
+    "email_language": "你想从服务器收到什么语言的邮件？"
  },
  "selectable_list": {
    "select_all": "选择全部"
@ -589,7 +600,38 @@
      "backup_restore": "设置备份"
    },
    "right_sidebar": "在右侧显示侧边栏",
-    "hide_shoutbox": "隐藏实例留言板"
+    "hide_shoutbox": "隐藏实例留言板",
+    "expert_mode": "显示高级",
+    "download_backup": "下载",
+    "mention_links": "提及链接",
+    "account_backup": "账号备份",
+    "account_backup_table_head": "备份",
+    "remove_backup": "移除",
+    "list_backups_error": "获取备份列表出错：{error}",
+    "add_backup": "创建一个新备份",
+    "added_backup": "创建了一个新备份。",
+    "account_alias": "账号别名",
+    "account_alias_table_head": "别名",
+    "list_aliases_error": "获取别名时出错：{error}",
+    "hide_list_aliases_error_action": "关闭",
+    "remove_alias": "移除这个别名",
+    "new_alias_target": "添加一个新别名（例如 {example}）",
+    "added_alias": "别名添加好了。",
+    "move_account": "移动账号",
+    "move_account_target": "目标账号（例如 {example}）",
+    "moved_account": "账号移动好了。",
+    "move_account_error": "移动账号时出错：{error}",
+    "setting_server_side": "这个设置是捆绑到你的个人资料的，能影响所有会话和客户端",
+    "post_look_feel": "文章的样子跟感受",
+    "email_language": "从服务器收邮件的语言",
+    "account_backup_description": "这个允许你下载一份账号信息和文章的存档，但是现在还不能导入到 Pleroma 账号里。",
+    "backup_not_ready": "备份还没准备好。",
+    "add_backup_error": "添加新备份时出错：{error}",
+    "add_alias_error": "添加别名时出错：{error}",
+    "move_account_notes": "如果你想把账号移动到别的地方，你必须去目标账号，然后加一个指向这里的别名。",
+    "wordfilter": "词语过滤器",
+    "user_profiles": "用户资料",
+    "third_column_mode_notifications": "消息栏"
  },
  "time": {
    "day": "{0} 天",
@ -623,7 +665,23 @@
    "year": "{0} 年",
    "years": "{0} 年",
    "year_short": "{0}y",
-    "years_short": "{0}y"
+    "years_short": "{0}y",
+    "unit": {
+      "days_short": "{0} 天",
+      "hours": "{0} 小时",
+      "hours_short": "{0} 时",
+      "minutes": "{0} 分",
+      "minutes_short": "{0} 分",
+      "months": "{0} 个月",
+      "months_short": "{0} 月",
+      "seconds": "{0} 秒",
+      "seconds_short": "{0} 秒",
+      "weeks_short": "{0} 周",
+      "years": "{0} 年",
+      "years_short": "{0} 年",
+      "weeks": "{0} 周",
+      "days": "{0} 天"
+    }
  },
  "timeline": {
    "collapse": "折叠",
@ -666,7 +724,32 @@
    "status_deleted": "该状态已被删除",
    "nsfw": "NSFW",
    "external_source": "外部来源",
-    "expand": "展开"
+    "expand": "展开",
+    "you": "（你）",
+    "plus_more": "还有 {number} 个",
+    "many_attachments": "文章有 {number} 个附件",
+    "collapse_attachments": "折起附件",
+    "show_all_attachments": "显示所有附件",
+    "show_attachment_description": "预览描述（打开附件能看完整描述）",
+    "hide_attachment": "隐藏附件",
+    "remove_attachment": "移除附件",
+    "attachment_stop_flash": "停止 Flash 播放器",
+    "move_up": "把附件左移",
+    "open_gallery": "打开图库",
+    "thread_hide": "隐藏这个线索",
+    "thread_show": "显示这个线索",
+    "thread_show_full_with_icon": "{icon} {text}",
+    "thread_follow": "查看这个线索的剩余部分（一共有 {numStatus} 个状态）",
+    "thread_follow_with_icon": "{icon} {text}",
+    "ancestor_follow": "查看这个状态下的别的 {numReplies} 个回复",
+    "ancestor_follow_with_icon": "{icon} {text}",
+    "show_all_conversation_with_icon": "{icon} {text}",
+    "show_all_conversation": "显示完整对话（还有 {numStatus} 个状态）",
+    "mentions": "提及",
+    "replies_list_with_others": "回复（另外 +{numReplies} 个）：",
+    "move_down": "把附件右移",
+    "thread_show_full": "显示这个线索下的所有东西（一共有 {numStatus} 个状态，最大深度 {depth}）",
+    "show_only_conversation_under_this": "只显示这个状态的回复"
  },
  "user_card": {
    "approve": "核准",
@ -824,7 +907,10 @@
        "media_nsfw": "强制设置媒体为敏感内容",
        "media_removal_desc": "本实例移除来自以下实例的媒体内容：",
        "ftl_removal_desc": "该实例在从“已知网络”时间线上移除了下列实例：",
-        "ftl_removal": "从“已知网络”时间线上移除"
+        "ftl_removal": "从“已知网络”时间线上移除",
+        "reason": "理由",
+        "not_applicable": "无",
+        "instance": "实例"
      },
      "mrf_policies_desc": "MRF 策略会影响本实例的互通行为。以下策略已启用：",
      "mrf_policies": "已启用的 MRF 策略",
--- a/Show More
+++ b/Show More
 @ -1 +1 @@
 .2.1
 .16.0