Merge branch 'develop' into 'kludge/null-status'

# Conflicts:
#   src/services/entity_normalizer/entity_normalizer.service.js

src/App.js

@@ -4,14 +4,15 @@ 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'
 import MobileNav from './components/mobile_nav/mobile_nav.vue'
 import DesktopNav from './components/desktop_nav/desktop_nav.vue'
 import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
+import EditStatusModal from './components/edit_status_modal/edit_status_modal.vue'
 import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
+import StatusHistoryModal from './components/status_history_modal/status_history_modal.vue'
 import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
 import { windowWidth, windowHeight } from './services/window_utils/window_utils'
 import { mapGetters } from 'vuex'
@@ -32,24 +33,43 @@ export default {
     MobilePostStatusButton,
     MobileNav,
     DesktopNav,
-    SettingsModal,
+    SettingsModal: defineAsyncComponent(() => import('./components/settings_modal/settings_modal.vue')),
+    UpdateNotification: defineAsyncComponent(() => import('./components/update_notification/update_notification.vue')),
     UserReportingModal,
     PostStatusModal,
+    EditStatusModal,
+    StatusHistoryModal,
     GlobalNoticeList
   },
   data: () => ({
     mobileActivePanel: 'timeline'
   }),
+  watch: {
+    themeApplied (value) {
+      this.removeSplash()
+    }
+  },
   created () {
     // Load the locale from the storage
     const val = this.$store.getters.mergedConfig.interfaceLanguage
     this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
     window.addEventListener('resize', this.updateMobileState)
   },
+  mounted () {
+    if (this.$store.state.interface.themeApplied) {
+      this.removeSplash()
+    }
+  },
   unmounted () {
     window.removeEventListener('resize', this.updateMobileState)
   },
   computed: {
+    themeApplied () {
+      return this.$store.state.interface.themeApplied
+    },
+    layoutModalClass () {
+      return '-' + this.layoutType
+    },
     classes () {
       return [
         {
@@ -60,6 +80,13 @@ export default {
         '-' + this.layoutType
       ]
     },
+    navClasses () {
+      const { navbarColumnStretch } = this.$store.getters.mergedConfig
+      return [
+        '-' + this.layoutType,
+        ...(navbarColumnStretch ? ['-column-stretch'] : [])
+      ]
+    },
     currentUser () { return this.$store.state.users.currentUser },
     userBackground () { return this.currentUser.background_image },
     instanceBackground () {
@@ -85,11 +112,16 @@ export default {
     isChats () {
       return this.$route.name === 'chat' || this.$route.name === 'chats'
     },
+    isListEdit () {
+      return this.$route.name === 'lists-edit'
+    },
     newPostButtonShown () {
       if (this.isChats) return false
+      if (this.isListEdit) return false
       return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile'
     },
     showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
+    editingAvailable () { return this.$store.state.instance.editingAvailable },
     shoutboxPosition () {
       return this.$store.getters.mergedConfig.alwaysShowNewPostButton || false
     },
@@ -114,6 +146,15 @@ export default {
     updateMobileState () {
       this.$store.dispatch('setLayoutWidth', windowWidth())
       this.$store.dispatch('setLayoutHeight', windowHeight())
+    },
+    removeSplash () {
+      document.querySelector('#status').textContent = this.$t('splash.fun_' + Math.ceil(Math.random() * 4))
+      const splashscreenRoot = document.querySelector('#splash')
+      splashscreenRoot.addEventListener('transitionend', () => {
+        splashscreenRoot.remove()
+      })
+      splashscreenRoot.classList.add('hidden')
+      document.querySelector('#app').classList.remove('hidden')
     }
   }
 }

src/App.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    v-show="$store.state.interface.themeApplied"
     id="app-loaded"
     :style="bgStyle"
   >
@@ -8,15 +9,22 @@
       class="app-bg-wrapper"
     />
     <MobileNav v-if="layoutType === 'mobile'" />
-    <DesktopNav v-else />
+    <DesktopNav
+      v-else
+      :class="navClasses"
+    />
     <Notifications v-if="currentUser" />
     <div
       id="content"
       class="app-layout container"
       :class="classes"
     >
-      <div class="underlay"/>
-      <div id="sidebar" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }">
+      <div class="underlay" />
+      <div
+        id="sidebar"
+        class="column -scrollable"
+        :class="{ '-show-scrollbar': showScrollbars }"
+      >
         <user-panel />
         <template v-if="layoutType !== 'mobile'">
           <nav-panel />
@@ -26,7 +34,11 @@
           <div id="notifs-sidebar" />
         </template>
       </div>
-      <div id="main-scroller" class="column main" :class="{ '-full-height': isChats }">
+      <main
+        id="main-scroller"
+        class="column main"
+        :class="{ '-full-height': isChats || isListEdit }"
+      >
         <div
           v-if="!currentUser"
           class="login-hint panel panel-default"
@@ -39,10 +51,14 @@
           </router-link>
         </div>
         <router-view />
-      </div>
-      <div id="notifs-column" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"/>
+      </main>
+      <div
+        id="notifs-column"
+        class="column -scrollable"
+        :class="{ '-show-scrollbar': showScrollbars }"
+      />
     </div>
-    <media-modal />
+    <MediaModal />
     <shout-panel
       v-if="currentUser && shout && !hideShoutbox"
       :floating="true"
@@ -52,8 +68,10 @@
     <MobilePostStatusButton />
     <UserReportingModal />
     <PostStatusModal />
-    <SettingsModal />
-    <div id="modal" />
+    <EditStatusModal v-if="editingAvailable" />
+    <StatusHistoryModal v-if="editingAvailable" />
+    <SettingsModal :class="layoutModalClass" />
+    <UpdateNotification />
     <GlobalNoticeList />
   </div>
 </template>

src/_mixins.scss

@@ -0,0 +1,18 @@
+@mixin unfocused-style {
+  @content;
+
+  &:focus:not(:focus-visible, :hover) {
+    @content;
+  }
+}
+
+@mixin focused-style {
+  &:hover,
+  &:focus {
+    @content;
+  }
+
+  &:focus-visible {
+    @content;
+  }
+}

src/_variables.scss

@@ -1,34 +0,0 @@
-$main-color: #f58d2c;
-$main-background: white;
-$darkened-background: whitesmoke;
-
-$fallback--bg: #121a24;
-$fallback--fg: #182230;
-$fallback--faint: rgba(185, 185, 186, .5);
-$fallback--text: #b9b9ba;
-$fallback--link: #d8a070;
-$fallback--icon: #666;
-$fallback--lightBg: rgb(21, 30, 42);
-$fallback--lightText: #b9b9ba;
-$fallback--border: #222;
-$fallback--cRed: #ff0000;
-$fallback--cBlue: #0095ff;
-$fallback--cGreen: #0fa00f;
-$fallback--cOrange: orange;
-
-$fallback--alertError: rgba(211,16,20,.5);
-$fallback--alertWarning: rgba(111,111,20,.5);
-
-$fallback--panelRadius: 10px;
-$fallback--checkboxRadius: 2px;
-$fallback--btnRadius: 4px;
-$fallback--inputRadius: 4px;
-$fallback--tooltipRadius: 5px;
-$fallback--avatarRadius: 4px;
-$fallback--avatarAltRadius: 10px;
-$fallback--attachmentRadius: 10px;
-$fallback--chatMessageRadius: 10px;
-
-$fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
-
-$status-margin: 0.75em;

src/assets/pleromatan_apology.png

@@ -0,0 +1 @@
+../../static/pleromatan_apology.png

src/assets/pleromatan_apology_fox.png

@@ -0,0 +1 @@
+../../static/pleromatan_apology_fox.png

src/boot/after_store.js

@@ -1,6 +1,8 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import vClickOutside from 'click-outside-vue3'
+import VueVirtualScroller from 'vue-virtual-scroller'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
 
@@ -11,9 +13,9 @@ import VBodyScrollLock from 'src/directives/body_scroll_lock'
 import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
 import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
-import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
-import { applyTheme } from '../services/style_setter/style_setter.js'
+import { applyConfig } from '../services/style_setter/style_setter.js'
 import FaviconService from '../services/favicon_service/favicon_service.js'
+import { initServiceWorker, updateFocus } from '../services/sw/sw.js'
 
 let staticInitialResults = null
 
@@ -58,6 +60,8 @@ const getInstanceConfig = async ({ store }) => {
 
       store.dispatch('setInstanceOption', { name: 'textlimit', value: textlimit })
       store.dispatch('setInstanceOption', { name: 'accountApprovalRequired', value: data.approval_required })
+      store.dispatch('setInstanceOption', { name: 'birthdayRequired', value: !!data.pleroma.metadata.birthday_required })
+      store.dispatch('setInstanceOption', { name: 'birthdayMinAge', value: data.pleroma.metadata.birthday_min_age || 0 })
 
       if (vapidPublicKey) {
         store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey })
@@ -118,6 +122,9 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
     store.dispatch('setInstanceOption', { name, value: config[name] })
   }
 
+  copyInstanceOption('theme')
+  copyInstanceOption('style')
+  copyInstanceOption('palette')
   copyInstanceOption('nsfwCensorImage')
   copyInstanceOption('background')
   copyInstanceOption('hidePostStats')
@@ -155,8 +162,6 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
   copyInstanceOption('showFeaturesPanel')
   copyInstanceOption('hideSitename')
   copyInstanceOption('sidebarRight')
-
-  return store.dispatch('setTheme', config['theme'])
 }
 
 const getTOS = async ({ store }) => {
@@ -197,7 +202,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()
           }
@@ -238,7 +243,7 @@ const resolveStaffAccounts = ({ store, accounts }) => {
 
 const getNodeInfo = async ({ store }) => {
   try {
-    const res = await preloadFetch('/nodeinfo/2.0.json')
+    const res = await preloadFetch('/nodeinfo/2.1.json')
     if (res.ok) {
       const data = await res.json()
       const metadata = data.metadata
@@ -249,10 +254,15 @@ const getNodeInfo = async ({ store }) => {
       store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') })
       store.dispatch('setInstanceOption', { name: 'shoutAvailable', value: features.includes('chat') })
       store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
+      store.dispatch('setInstanceOption', { name: 'pleromaCustomEmojiReactionsAvailable', value: features.includes('pleroma_custom_emoji_reactions') })
+      store.dispatch('setInstanceOption', { name: 'pleromaBookmarkFoldersAvailable', value: features.includes('pleroma:bookmark_folders') })
       store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
       store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
+      store.dispatch('setInstanceOption', { name: 'editingAvailable', value: features.includes('editing') })
       store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })
       store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled })
+      store.dispatch('setInstanceOption', { name: 'quotingAvailable', value: features.includes('quote_posting') })
+      store.dispatch('setInstanceOption', { name: 'groupActorAvailable', value: features.includes('pleroma:group_actors') })
 
       const uploadLimits = metadata.uploadLimits
       store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadLimits.general) })
@@ -270,6 +280,7 @@ const getNodeInfo = async ({ store }) => {
 
       const software = data.software
       store.dispatch('setInstanceOption', { name: 'backendVersion', value: software.version })
+      store.dispatch('setInstanceOption', { name: 'backendRepository', value: software.repository })
       store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: software.name === 'pleroma' })
 
       const priv = metadata.private
@@ -319,16 +330,10 @@ const setConfig = async ({ store }) => {
 }
 
 const checkOAuthToken = async ({ store }) => {
-  return new Promise(async (resolve, reject) => {
-    if (store.getters.getUserToken()) {
-      try {
-        await store.dispatch('loginUser', store.getters.getUserToken())
-      } catch (e) {
-        console.error(e)
-      }
-    }
-    resolve()
-  })
+  if (store.getters.getUserToken()) {
+    return store.dispatch('loginUser', store.getters.getUserToken())
+  }
+  return Promise.resolve()
 }
 
 const afterStoreSetup = async ({ store, i18n }) => {
@@ -336,29 +341,24 @@ const afterStoreSetup = async ({ store, i18n }) => {
   store.dispatch('setLayoutHeight', windowHeight())
 
   FaviconService.initFaviconService()
+  initServiceWorker(store)
+
+  window.addEventListener('focus', () => updateFocus())
 
   const overrides = window.___pleromafe_dev_overrides || {}
   const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
   store.dispatch('setInstanceOption', { name: 'server', value: server })
 
   await setConfig({ store })
-
-  const { customTheme, customThemeSource } = store.state.config
-  const { theme } = store.state.instance
-  const customThemePresent = customThemeSource || customTheme
-
-  if (customThemePresent) {
-    if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
-      applyTheme(customThemeSource)
-    } else {
-      applyTheme(customTheme)
-    }
-  } else if (theme) {
-    // do nothing, it will load asynchronously
-  } else {
-    console.error('Failed to load any theme!')
+  try {
+    await store.dispatch('applyTheme').catch((e) => { console.error('Error setting theme', e) })
+  } catch (e) {
+    window.splashError(e)
+    return Promise.reject(e)
   }
 
+  applyConfig(store.state.config, i18n.global)
+
   // Now we can try getting the server settings and logging in
   // Most of these are preloaded into the index.html so blocking is minimized
   await Promise.all([
@@ -366,10 +366,11 @@ const afterStoreSetup = async ({ store, i18n }) => {
     getInstancePanel({ store }),
     getNodeInfo({ store }),
     getInstanceConfig({ store })
-  ])
+  ]).catch(e => Promise.reject(e))
 
   // Start fetching things that don't need to block the UI
   store.dispatch('fetchMutes')
+  store.dispatch('startFetchingAnnouncements')
   getTOS({ store })
   getStickers({ store })
 
@@ -390,14 +391,24 @@ const afterStoreSetup = async ({ store, i18n }) => {
   app.use(store)
   app.use(i18n)
 
+  // Little thing to get out of invalid theme state
+  window.resetThemes = () => {
+    store.dispatch('resetThemeV3')
+    store.dispatch('resetThemeV3Palette')
+    store.dispatch('resetThemeV2')
+  }
+
   app.use(vClickOutside)
   app.use(VBodyScrollLock)
+  app.use(VueVirtualScroller)
 
   app.component('FAIcon', FontAwesomeIcon)
   app.component('FALayers', FontAwesomeLayers)
 
-  app.mount('#app')
+  // remove after vue 3.3
+  app.config.unwrapInjectedRef = true
 
+  app.mount('#app')
   return app
 }
 

src/boot/routes.js

@@ -20,6 +20,14 @@ import ShoutPanel from 'components/shout_panel/shout_panel.vue'
 import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
 import About from 'components/about/about.vue'
 import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
+import Lists from 'components/lists/lists.vue'
+import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
+import ListsEdit from 'components/lists_edit/lists_edit.vue'
+import NavPanel from 'src/components/nav_panel/nav_panel.vue'
+import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
+import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
+import BookmarkFolders from '../components/bookmark_folders/bookmark_folders.vue'
+import BookmarkFolderEdit from '../components/bookmark_folder_edit/bookmark_folder_edit.vue'
 
 export default (store) => {
   const validateAuthenticatedRoute = (to, from, next) => {
@@ -31,7 +39,8 @@ export default (store) => {
   }
 
   let routes = [
-    { name: 'root',
+    {
+      name: 'root',
       path: '/',
       redirect: _to => {
         return (store.state.users.currentUser
@@ -45,17 +54,20 @@ 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: 'quotes', path: '/notice/:id/quotes', component: QuotesTimeline },
+    {
+      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
     },
-    { name: 'external-user-profile', path: '/users/:id', component: UserProfile },
+    { name: 'external-user-profile', path: '/users/$:id', component: UserProfile },
     { name: 'interactions', path: '/users/:username/interactions', component: Interactions, beforeEnter: validateAuthenticatedRoute },
     { name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute },
     { name: 'registration', path: '/registration', component: Registration },
@@ -69,7 +81,18 @@ export default (store) => {
     { name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
     { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
     { name: 'about', path: '/about', component: About },
-    { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile }
+    { name: 'announcements', path: '/announcements', component: AnnouncementsPage },
+    { name: 'user-profile', path: '/users/:name', component: UserProfile },
+    { name: 'legacy-user-profile', path: '/:name', component: UserProfile },
+    { name: 'lists', path: '/lists', component: Lists },
+    { name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
+    { name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
+    { name: 'lists-new', path: '/lists/new', component: ListsEdit },
+    { name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute },
+    { name: 'bookmark-folders', path: '/bookmark_folders', component: BookmarkFolders },
+    { name: 'bookmark-folder-new', path: '/bookmarks/new-folder', component: BookmarkFolderEdit },
+    { name: 'bookmark-folder', path: '/bookmarks/:id', component: BookmarkTimeline },
+    { name: 'bookmark-folder-edit', path: '/bookmarks/:id/edit', component: BookmarkFolderEdit }
   ]
 
   if (store.state.instance.pleromaChatMessagesAvailable) {

src/components/about/about.vue

@@ -8,7 +8,4 @@
   </div>
 </template>
 
-<script src="./about.js" ></script>
-
-<style lang="scss">
-</style>
+<script src="./about.js"></script>

src/components/account_actions/account_actions.js

@@ -1,6 +1,8 @@
 import { mapState } from 'vuex'
 import ProgressButton from '../progress_button/progress_button.vue'
 import Popover from '../popover/popover.vue'
+import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEllipsisV
@@ -15,13 +17,30 @@ const AccountActions = {
     'user', 'relationship'
   ],
   data () {
-    return { }
+    return {
+      showingConfirmBlock: false,
+      showingConfirmRemoveFollower: false
+    }
   },
   components: {
     ProgressButton,
-    Popover
+    Popover,
+    UserListMenu,
+    ConfirmModal
   },
   methods: {
+    showConfirmBlock () {
+      this.showingConfirmBlock = true
+    },
+    hideConfirmBlock () {
+      this.showingConfirmBlock = false
+    },
+    showConfirmRemoveUserFromFollowers () {
+      this.showingConfirmRemoveFollower = true
+    },
+    hideConfirmRemoveUserFromFollowers () {
+      this.showingConfirmRemoveFollower = false
+    },
     showRepeats () {
       this.$store.dispatch('showReblogs', this.user.id)
     },
@@ -29,11 +48,30 @@ const AccountActions = {
       this.$store.dispatch('hideReblogs', this.user.id)
     },
     blockUser () {
+      if (!this.shouldConfirmBlock) {
+        this.doBlockUser()
+      } else {
+        this.showConfirmBlock()
+      }
+    },
+    doBlockUser () {
       this.$store.dispatch('blockUser', this.user.id)
+      this.hideConfirmBlock()
     },
     unblockUser () {
       this.$store.dispatch('unblockUser', this.user.id)
     },
+    removeUserFromFollowers () {
+      if (!this.shouldConfirmRemoveUserFromFollowers) {
+        this.doRemoveUserFromFollowers()
+      } else {
+        this.showConfirmRemoveUserFromFollowers()
+      }
+    },
+    doRemoveUserFromFollowers () {
+      this.$store.dispatch('removeUserFromFollowers', this.user.id)
+      this.hideConfirmRemoveUserFromFollowers()
+    },
     reportUser () {
       this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
     },
@@ -45,6 +83,12 @@ const AccountActions = {
     }
   },
   computed: {
+    shouldConfirmBlock () {
+      return this.$store.getters.mergedConfig.modalOnBlock
+    },
+    shouldConfirmRemoveUserFromFollowers () {
+      return this.$store.getters.mergedConfig.modalOnRemoveUserFromFollowers
+    },
     ...mapState({
       pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
     })

src/components/account_actions/account_actions.vue

@@ -6,19 +6,19 @@
       :bound-to="{ x: 'container' }"
       remove-padding
     >
-      <template v-slot:content>
+      <template #content>
         <div class="dropdown-menu">
           <template v-if="relationship.following">
             <button
               v-if="relationship.showing_reblogs"
-              class="btn button-default dropdown-item"
+              class="dropdown-item menu-item"
               @click="hideRepeats"
             >
               {{ $t('user_card.hide_repeats') }}
             </button>
             <button
               v-if="!relationship.showing_reblogs"
-              class="btn button-default dropdown-item"
+              class="dropdown-item menu-item"
               @click="showRepeats"
             >
               {{ $t('user_card.show_repeats') }}
@@ -28,36 +28,44 @@
               class="dropdown-divider"
             />
           </template>
+          <UserListMenu :user="user" />
+          <button
+            v-if="relationship.followed_by"
+            class="dropdown-item menu-item"
+            @click="removeUserFromFollowers"
+          >
+            {{ $t('user_card.remove_follower') }}
+          </button>
           <button
             v-if="relationship.blocking"
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="unblockUser"
           >
             {{ $t('user_card.unblock') }}
           </button>
           <button
             v-else
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="blockUser"
           >
             {{ $t('user_card.block') }}
           </button>
           <button
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="reportUser"
           >
             {{ $t('user_card.report') }}
           </button>
           <button
             v-if="pleromaChatMessagesAvailable"
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="openChat"
           >
             {{ $t('user_card.message') }}
           </button>
         </div>
       </template>
-      <template v-slot:trigger>
+      <template #trigger>
         <button class="button-unstyled ellipsis-button">
           <FAIcon
             class="icon"
@@ -66,24 +74,62 @@
         </button>
       </template>
     </Popover>
+    <teleport to="#modal">
+      <confirm-modal
+        v-if="showingConfirmBlock"
+        :title="$t('user_card.block_confirm_title')"
+        :confirm-text="$t('user_card.block_confirm_accept_button')"
+        :cancel-text="$t('user_card.block_confirm_cancel_button')"
+        @accepted="doBlockUser"
+        @cancelled="hideConfirmBlock"
+      >
+        <i18n-t
+          keypath="user_card.block_confirm"
+          tag="span"
+          scope="global"
+        >
+          <template #user>
+            <span
+              v-text="user.screen_name_ui"
+            />
+          </template>
+        </i18n-t>
+      </confirm-modal>
+    </teleport>
+    <teleport to="#modal">
+      <confirm-modal
+        v-if="showingConfirmRemoveFollower"
+        :title="$t('user_card.remove_follower_confirm_title')"
+        :confirm-text="$t('user_card.remove_follower_confirm_accept_button')"
+        :cancel-text="$t('user_card.remove_follower_confirm_cancel_button')"
+        @accepted="doRemoveUserFromFollowers"
+        @cancelled="hideConfirmRemoveUserFromFollowers"
+      >
+        <i18n-t
+          keypath="user_card.remove_follower_confirm"
+          tag="span"
+          scope="global"
+        >
+          <template #user>
+            <span
+              v-text="user.screen_name_ui"
+            />
+          </template>
+        </i18n-t>
+      </confirm-modal>
+    </teleport>
   </div>
 </template>
 
 <script src="./account_actions.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
 .AccountActions {
   .ellipsis-button {
     width: 2.5em;
     margin: -0.5em 0;
     padding: 0.5em 0;
     text-align: center;
-
-    &:not(:hover) .icon {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
   }
 }
 </style>

src/components/alert.style.js

@@ -0,0 +1,57 @@
+export default {
+  name: 'Alert',
+  selector: '.alert',
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Link',
+    'Border',
+    'ButtonUnstyled'
+  ],
+  variants: {
+    normal: '.neutral',
+    error: '.error',
+    warning: '.warning',
+    success: '.success'
+  },
+  editor: {
+    border: 1,
+    aspect: '3 / 1'
+  },
+  defaultRules: [
+    {
+      directives: {
+        background: '--text',
+        opacity: 0.5,
+        blur: '9px'
+      }
+    },
+    {
+      parent: {
+        component: 'Alert'
+      },
+      component: 'Border',
+      directives: {
+        textColor: '--parent'
+      }
+    },
+    {
+      variant: 'error',
+      directives: {
+        background: '--cRed'
+      }
+    },
+    {
+      variant: 'warning',
+      directives: {
+        background: '--cOrange'
+      }
+    },
+    {
+      variant: 'success',
+      directives: {
+        background: '--cGreen'
+      }
+    }
+  ]
+}

src/components/announcement/announcement.js

@@ -0,0 +1,108 @@
+import { mapState } from 'vuex'
+import AnnouncementEditor from '../announcement_editor/announcement_editor.vue'
+import RichContent from '../rich_content/rich_content.jsx'
+import localeService from '../../services/locale/locale.service.js'
+
+const Announcement = {
+  components: {
+    AnnouncementEditor,
+    RichContent
+  },
+  data () {
+    return {
+      editing: false,
+      editedAnnouncement: {
+        content: '',
+        startsAt: undefined,
+        endsAt: undefined,
+        allDay: undefined
+      },
+      editError: ''
+    }
+  },
+  props: {
+    announcement: Object
+  },
+  computed: {
+    ...mapState({
+      currentUser: state => state.users.currentUser
+    }),
+    canEditAnnouncement () {
+      return this.currentUser && this.currentUser.privileges.includes('announcements_manage_announcements')
+    },
+    content () {
+      return this.announcement.content
+    },
+    isRead () {
+      return this.announcement.read
+    },
+    publishedAt () {
+      const time = this.announcement.published_at
+      if (!time) {
+        return
+      }
+
+      return this.formatTimeOrDate(time, localeService.internalToBrowserLocale(this.$i18n.locale))
+    },
+    startsAt () {
+      const time = this.announcement.starts_at
+      if (!time) {
+        return
+      }
+
+      return this.formatTimeOrDate(time, localeService.internalToBrowserLocale(this.$i18n.locale))
+    },
+    endsAt () {
+      const time = this.announcement.ends_at
+      if (!time) {
+        return
+      }
+
+      return this.formatTimeOrDate(time, localeService.internalToBrowserLocale(this.$i18n.locale))
+    },
+    inactive () {
+      return this.announcement.inactive
+    }
+  },
+  methods: {
+    markAsRead () {
+      if (!this.isRead) {
+        return this.$store.dispatch('markAnnouncementAsRead', this.announcement.id)
+      }
+    },
+    deleteAnnouncement () {
+      return this.$store.dispatch('deleteAnnouncement', this.announcement.id)
+    },
+    formatTimeOrDate (time, locale) {
+      const d = new Date(time)
+      return this.announcement.all_day ? d.toLocaleDateString(locale) : d.toLocaleString(locale)
+    },
+    enterEditMode () {
+      this.editedAnnouncement.content = this.announcement.pleroma.raw_content
+      this.editedAnnouncement.startsAt = this.announcement.starts_at
+      this.editedAnnouncement.endsAt = this.announcement.ends_at
+      this.editedAnnouncement.allDay = this.announcement.all_day
+      this.editing = true
+    },
+    submitEdit () {
+      this.$store.dispatch('editAnnouncement', {
+        id: this.announcement.id,
+        ...this.editedAnnouncement
+      })
+        .then(() => {
+          this.editing = false
+        })
+        .catch(error => {
+          this.editError = error.error
+        })
+    },
+    cancelEdit () {
+      this.editing = false
+    },
+    clearError () {
+      this.editError = undefined
+    }
+  }
+}
+
+export default Announcement

src/components/announcement/announcement.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="announcement">
+    <div class="heading">
+      <h4>{{ $t('announcements.title') }}</h4>
+    </div>
+    <div class="body">
+      <rich-content
+        v-if="!editing"
+        :html="content"
+        :emoji="announcement.emojis"
+        :handle-links="true"
+      />
+      <announcement-editor
+        v-else
+        :announcement="editedAnnouncement"
+      />
+    </div>
+    <div class="footer">
+      <div
+        v-if="!editing"
+        class="times"
+      >
+        <span v-if="publishedAt">
+          {{ $t('announcements.published_time_display', { time: publishedAt }) }}
+        </span>
+        <span v-if="startsAt">
+          {{ $t('announcements.start_time_display', { time: startsAt }) }}
+        </span>
+        <span v-if="endsAt">
+          {{ $t('announcements.end_time_display', { time: endsAt }) }}
+        </span>
+      </div>
+      <div
+        v-if="!editing"
+        class="actions"
+      >
+        <button
+          v-if="currentUser"
+          class="btn button-default"
+          :class="{ toggled: isRead }"
+          :disabled="inactive"
+          :title="inactive ? $t('announcements.inactive_message') : ''"
+          @click="markAsRead"
+        >
+          {{ $t('announcements.mark_as_read_action') }}
+        </button>
+        <button
+          v-if="canEditAnnouncement"
+          class="btn button-default"
+          @click="enterEditMode"
+        >
+          {{ $t('announcements.edit_action') }}
+        </button>
+        <button
+          v-if="canEditAnnouncement"
+          class="btn button-default"
+          @click="deleteAnnouncement"
+        >
+          {{ $t('announcements.delete_action') }}
+        </button>
+      </div>
+      <div
+        v-else
+        class="actions"
+      >
+        <button
+          class="btn button-default"
+          @click="submitEdit"
+        >
+          {{ $t('announcements.submit_edit_action') }}
+        </button>
+        <button
+          class="btn button-default"
+          @click="cancelEdit"
+        >
+          {{ $t('announcements.cancel_edit_action') }}
+        </button>
+        <div
+          v-if="editing && editError"
+          class="alert error"
+        >
+          {{ $t('announcements.edit_error', { error }) }}
+          <button
+            class="button-unstyled"
+            @click="clearError"
+          >
+            <FAIcon
+              class="fa-scale-110 fa-old-padding"
+              icon="times"
+              :title="$t('announcements.close_error')"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./announcement.js"></script>
+
+<style lang="scss">
+.announcement {
+  border-bottom: 1px solid var(--border);
+  border-radius: 0;
+  padding: var(--status-margin);
+
+  .heading,
+  .body {
+    margin-bottom: var(--status-margin);
+  }
+
+  .footer {
+    display: flex;
+    flex-direction: column;
+
+    .times {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .footer .actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+
+    .btn {
+      flex: 1;
+      margin: 1em;
+      max-width: 10em;
+    }
+  }
+}
+</style>

src/components/announcement_editor/announcement_editor.js

@@ -0,0 +1,13 @@
+import Checkbox from '../checkbox/checkbox.vue'
+
+const AnnouncementEditor = {
+  components: {
+    Checkbox
+  },
+  props: {
+    announcement: Object,
+    disabled: Boolean
+  }
+}
+
+export default AnnouncementEditor

src/components/announcement_editor/announcement_editor.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="announcement-editor">
+    <textarea
+      ref="textarea"
+      v-model="announcement.content"
+      class="input post-textarea"
+      rows="1"
+      cols="1"
+      :placeholder="$t('announcements.post_placeholder')"
+      :disabled="disabled"
+    />
+    <span class="announcement-metadata">
+      <label for="announcement-start-time">{{ $t('announcements.start_time_prompt') }}</label>
+      <input
+        id="announcement-start-time"
+        v-model="announcement.startsAt"
+        class="input"
+        :type="announcement.allDay ? 'date' : 'datetime-local'"
+        :disabled="disabled"
+      >
+    </span>
+    <span class="announcement-metadata">
+      <label for="announcement-end-time">{{ $t('announcements.end_time_prompt') }}</label>
+      <input
+        id="announcement-end-time"
+        v-model="announcement.endsAt"
+        class="input"
+        :type="announcement.allDay ? 'date' : 'datetime-local'"
+        :disabled="disabled"
+      >
+    </span>
+    <span class="announcement-metadata">
+      <Checkbox
+        id="announcement-all-day"
+        v-model="announcement.allDay"
+        :disabled="disabled"
+      >
+        {{ $t('announcements.all_day_prompt') }}
+      </Checkbox>
+    </span>
+  </div>
+</template>
+
+<script src="./announcement_editor.js"></script>
+
+<style lang="scss">
+.announcement-editor {
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+
+  .announcement-metadata {
+    margin-top: 0.5em;
+  }
+
+  .post-textarea {
+    resize: vertical;
+    height: 10em;
+    overflow: none;
+    box-sizing: content-box;
+  }
+}
+</style>

src/components/announcements_page/announcements_page.js

@@ -0,0 +1,58 @@
+import { mapState } from 'vuex'
+import Announcement from '../announcement/announcement.vue'
+import AnnouncementEditor from '../announcement_editor/announcement_editor.vue'
+
+const AnnouncementsPage = {
+  components: {
+    Announcement,
+    AnnouncementEditor
+  },
+  data () {
+    return {
+      newAnnouncement: {
+        content: '',
+        startsAt: undefined,
+        endsAt: undefined,
+        allDay: false
+      },
+      posting: false,
+      error: undefined
+    }
+  },
+  mounted () {
+    this.$store.dispatch('fetchAnnouncements')
+  },
+  computed: {
+    ...mapState({
+      currentUser: state => state.users.currentUser
+    }),
+    announcements () {
+      return this.$store.state.announcements.announcements
+    },
+    canPostAnnouncement () {
+      return this.currentUser && this.currentUser.privileges.includes('announcements_manage_announcements')
+    }
+  },
+  methods: {
+    postAnnouncement () {
+      this.posting = true
+      this.$store.dispatch('postAnnouncement', this.newAnnouncement)
+        .then(() => {
+          this.newAnnouncement.content = ''
+          this.startsAt = undefined
+          this.endsAt = undefined
+        })
+        .catch(error => {
+          this.error = error.error
+        })
+        .finally(() => {
+          this.posting = false
+        })
+    },
+    clearError () {
+      this.error = undefined
+    }
+  }
+}
+
+export default AnnouncementsPage

src/components/announcements_page/announcements_page.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="panel panel-default announcements-page">
+    <div class="panel-heading">
+      <h1 class="title">
+        {{ $t('announcements.page_header') }}
+      </h1>
+    </div>
+    <div class="panel-body">
+      <section
+        v-if="canPostAnnouncement"
+      >
+        <div class="post-form">
+          <div class="heading">
+            <h4>{{ $t('announcements.post_form_header') }}</h4>
+          </div>
+          <div class="body">
+            <announcement-editor
+              :announcement="newAnnouncement"
+              :disabled="posting"
+            />
+          </div>
+          <div class="footer">
+            <button
+              class="btn button-default post-button"
+              :disabled="posting"
+              @click.prevent="postAnnouncement"
+            >
+              {{ $t('announcements.post_action') }}
+            </button>
+            <div
+              v-if="error"
+              class="alert error"
+            >
+              {{ $t('announcements.post_error', { error }) }}
+              <button
+                class="button-unstyled"
+                @click="clearError"
+              >
+                <FAIcon
+                  class="fa-scale-110 fa-old-padding"
+                  icon="times"
+                  :title="$t('announcements.close_error')"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section
+        v-for="announcement in announcements"
+        :key="announcement.id"
+      >
+        <announcement
+          :announcement="announcement"
+        />
+      </section>
+    </div>
+  </div>
+</template>
+
+<script src="./announcements_page.js"></script>
+
+<style lang="scss">
+.announcements-page {
+  .post-form {
+    padding: var(--status-margin);
+
+    .heading,
+    .body {
+      margin-bottom: var(--status-margin);
+    }
+
+    .post-button {
+      min-width: 10em;
+    }
+  }
+}
+</style>

src/components/async_component_error/async_component_error.vue

@@ -34,9 +34,10 @@ export default {
   height: 100%;
   align-items: center;
   justify-content: center;
+
   .btn {
-    margin: .5em;
-    padding: .5em 2em;
+    margin: 0.5em;
+    padding: 0.5em 2em;
   }
 }
 </style>

src/components/attachment/attachment.js

@@ -36,6 +36,7 @@ library.add(
 const Attachment = {
   props: [
     'attachment',
+    'compact',
     'description',
     'hideDescription',
     'nsfw',
@@ -71,7 +72,8 @@ const Attachment = {
         {
           '-loading': this.loading,
           '-nsfw-placeholder': this.hidden,
-          '-editable': this.edit !== undefined
+          '-editable': this.edit !== undefined,
+          '-compact': this.compact
         },
         '-type-' + this.type,
         this.size && '-size-' + this.size,
@@ -129,6 +131,9 @@ const Attachment = {
     ...mapGetters(['mergedConfig'])
   },
   watch: {
+    'attachment.description' (newVal) {
+      this.localDescription = newVal
+    },
     localDescription (newVal) {
       this.onEdit(newVal)
     }

src/components/attachment/attachment.scss

@@ -1,5 +1,3 @@
-@import '../../_variables.scss';
-
 .Attachment {
   display: inline-flex;
   flex-direction: column;
@@ -9,10 +7,8 @@
   height: 100%;
   border-style: solid;
   border-width: 1px;
-  border-radius: $fallback--attachmentRadius;
-  border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-radius: var(--roundness);
+  border-color: var(--border);
 
   .attachment-wrapper {
     flex: 1 1 auto;
@@ -84,6 +80,13 @@
     }
   }
 
+  .video-container {
+    border: none;
+    outline: none;
+    color: inherit;
+    background: transparent;
+  }
+
   .audio-container {
     display: flex;
     align-items: flex-end;
@@ -102,14 +105,13 @@
     padding-top: 0.5em;
   }
 
-
   .play-icon {
     position: absolute;
     font-size: 64px;
     top: calc(50% - 32px);
     left: calc(50% - 32px);
-    color: rgba(255, 255, 255, 0.75);
-    text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+    color: rgb(255 255 255 / 75%);
+    text-shadow: 0 0 2px rgb(0 0 0 / 40%);
 
     &::before {
       margin: 0;
@@ -127,23 +129,26 @@
 
     .attachment-button {
       padding: 0;
-      border-radius: $fallback--tooltipRadius;
-      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+      border-radius: var(--roundness);
       text-align: center;
       width: 2em;
       height: 2em;
       margin-left: 0.5em;
       font-size: 1.25em;
-      // TODO: theming? hard to theme with unknown background image color
-      background: rgba(230, 230, 230, 0.7);
+    }
+  }
 
-      .svg-inline--fa {
-        color: rgba(0, 0, 0, 0.6);
-      }
+  &.-contain-fit {
+    img,
+    canvas {
+      object-fit: contain;
+    }
+  }
 
-      &:hover .svg-inline--fa {
-        color: rgba(0, 0, 0, 0.9);
-      }
+  &.-cover-fit {
+    img,
+    canvas {
+      object-fit: cover;
     }
   }
 
@@ -160,8 +165,9 @@
 
     .image {
       flex: 1;
+
       img {
-        border: 0px;
+        border: 0;
         border-radius: 5px;
         height: 100%;
         object-fit: cover;
@@ -172,9 +178,10 @@
       flex: 2;
       margin: 8px;
       word-break: break-all;
+
       h1 {
         font-size: 1rem;
-        margin: 0px;
+        margin: 0;
       }
     }
   }
@@ -202,8 +209,7 @@
 
   &.-placeholder {
     display: inline-block;
-    color: $fallback--link;
-    color: var(--postLink, $fallback--link);
+    color: var(--link);
     overflow: hidden;
     white-space: nowrap;
     height: auto;
@@ -252,17 +258,9 @@
     cursor: progress;
   }
 
-  &.-contain-fit {
-    img,
-    canvas {
-      object-fit: contain;
-    }
-  }
-
-  &.-cover-fit {
-    img,
-    canvas {
-      object-fit: cover;
+  &.-compact {
+    .placeholder-container {
+      padding-bottom: 0.5em;
     }
   }
 }

src/components/attachment/attachment.style.js

@@ -0,0 +1,25 @@
+export default {
+  name: 'Attachment',
+  selector: '.Attachment',
+  notEditable: true,
+  validInnerComponents: [
+    'Border',
+    'ButtonUnstyled',
+    'Input'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        roundness: 3
+      }
+    },
+    {
+      component: 'ButtonUnstyled',
+      parent: { component: 'Attachment' },
+      directives: {
+        background: '#FFFFFF',
+        opacity: 0.5
+      }
+    }
+  ]
+}

src/components/attachment/attachment.vue

@@ -38,7 +38,7 @@
         v-if="edit"
         v-model="localDescription"
         type="text"
-        class="description-field"
+        class="input description-field"
         :placeholder="$t('post_status.media_description')"
         @keydown.enter.prevent=""
       >
@@ -162,10 +162,11 @@
         target="_blank"
       >
         <FAIcon
-          size="5x"
+          :size="compact ? '2x' : '5x'"
           :icon="placeholderIconClass"
+          :title="localDescription"
         />
-        <p>
+        <p v-if="!compact">
           {{ localDescription }}
         </p>
       </a>
@@ -174,7 +175,6 @@
         :is="videoTag"
         v-if="type === 'video' && !hidden"
         class="video-container"
-        :class="{ 'button-unstyled': 'isModal' }"
         :href="attachment.url"
         @click.stop.prevent="openModal"
       >
@@ -252,7 +252,7 @@
         v-if="edit"
         v-model="localDescription"
         type="text"
-        class="description-field"
+        class="input description-field"
         :placeholder="$t('post_status.media_description')"
         @keydown.enter.prevent=""
       >

src/components/autosuggest/autosuggest.vue

@@ -1,3 +1,4 @@
+<!-- FIXME THIS NEEDS TO BE REFACTORED TO USE POPOVER -->
 <template>
   <div
     v-click-outside="onClickOutside"
@@ -6,12 +7,12 @@
     <input
       v-model="term"
       :placeholder="placeholder"
-      class="autosuggest-input"
+      class="input autosuggest-input"
       @click="onInputClick"
     >
     <div
       v-if="resultsVisible && filtered.length > 0"
-      class="autosuggest-results"
+      class="panel autosuggest-results"
     >
       <slot
         v-for="item in filtered"
@@ -24,8 +25,6 @@
 <script src="./autosuggest.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-
 .autosuggest {
   position: relative;
 
@@ -40,18 +39,15 @@
     top: 100%;
     right: 0;
     max-height: 400px;
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
+    background-color: var(--bg);
     border-style: solid;
     border-width: 1px;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    border-radius: $fallback--inputRadius;
-    border-radius: var(--inputRadius, $fallback--inputRadius);
+    border-color: var(--border);
+    border-radius: var(--roundness);
     border-top-left-radius: 0;
     border-top-right-radius: 0;
-    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
-    box-shadow: var(--panelShadow);
+    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
+    box-shadow: var(--shadow);
     overflow-y: auto;
     z-index: 1;
   }

src/components/avatar_list/avatar_list.vue

@@ -14,11 +14,9 @@
   </div>
 </template>
 
-<script src="./avatar_list.js" ></script>
+<script src="./avatar_list.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-
 .avatars {
   display: flex;
   margin: 0;
@@ -36,8 +34,7 @@
     }
 
     .avatar-small {
-      border-radius: $fallback--avatarAltRadius;
-      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+      border-radius: var(--roundness);
       height: 24px;
       width: 24px;
     }

src/components/badge.style.js

@@ -0,0 +1,30 @@
+export default {
+  name: 'Badge',
+  selector: '.badge',
+  validInnerComponents: [
+    'Text',
+    'Icon'
+  ],
+  variants: {
+    notification: '.-notification'
+  },
+  defaultRules: [
+    {
+      component: 'Root',
+      directives: {
+        '--badgeNotification': 'color | --cRed'
+      }
+    },
+    {
+      directives: {
+        background: '--cGreen'
+      }
+    },
+    {
+      variant: 'notification',
+      directives: {
+        background: '--cRed'
+      }
+    }
+  ]
+}

src/components/basic_user_card/basic_user_card.js

@@ -1,5 +1,6 @@
-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 UserLink from '../user_link/user_link.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 +8,13 @@ const BasicUserCard = {
   props: [
     'user'
   ],
-  data () {
-    return {
-      userExpanded: false
-    }
-  },
   components: {
-    UserCard,
+    UserPopover,
     UserAvatar,
-    RichContent
+    RichContent,
+    UserLink
   },
   methods: {
-    toggleUserExpanded () {
-      this.userExpanded = !this.userExpanded
-    },
     userProfileLink (user) {
       return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
     }

src/components/basic_user_card/basic_user_card.vue

@@ -1,24 +1,22 @@
 <template>
   <div class="basic-user-card">
-    <router-link :to="userProfileLink(user)">
-      <UserAvatar
-        class="avatar"
-        :user="user"
-        @click.prevent="toggleUserExpanded"
-      />
+    <router-link
+      :to="userProfileLink(user)"
+      @click.prevent
+    >
+      <UserPopover
+        :user-id="user.id"
+        :overlay-centers="true"
+        overlay-centers-selector=".avatar"
+      >
+        <UserAvatar
+          class="user-avatar avatar"
+          :user="user"
+          @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
@@ -32,12 +30,10 @@
         />
       </div>
       <div>
-        <router-link
+        <user-link
           class="basic-user-card-screen-name"
-          :to="userProfileLink(user)"
-        >
-          @{{ user.screen_name_ui }}
-        </router-link>
+          :user="user"
+        />
       </div>
       <slot />
     </div>
@@ -51,7 +47,8 @@
   display: flex;
   flex: 1 0;
   margin: 0;
-  padding: 0.6em 1em;
+
+  --emoji-size: 1em;
 
   &-collapsed-content {
     margin-left: 0.7em;

src/components/block_card/block_card.vue

@@ -37,6 +37,7 @@
 .block-card-content-container {
   margin-top: 0.5em;
   text-align: right;
+
   button {
     width: 10em;
   }

src/components/bookmark_folder_card/bookmark_folder_card.js

@@ -0,0 +1,22 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEllipsisH
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEllipsisH
+)
+
+const BookmarkFolderCard = {
+  props: [
+    'folder',
+    'allBookmarks'
+  ],
+  computed: {
+    firstLetter () {
+      return this.folder ? this.folder.name[0] : null
+    }
+  }
+}
+
+export default BookmarkFolderCard

src/components/bookmark_folder_card/bookmark_folder_card.vue

@@ -0,0 +1,111 @@
+<template>
+  <div
+    v-if="allBookmarks"
+    class="bookmark-folder-card"
+  >
+    <router-link
+      :to="{ name: 'bookmarks' }"
+      class="bookmark-folder-name"
+    >
+      <span class="icon">
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 menu-icon"
+          icon="bookmark"
+        />
+      </span>{{ $t('nav.all_bookmarks') }}
+    </router-link>
+  </div>
+  <div
+    v-else
+    class="bookmark-folder-card"
+  >
+    <router-link
+      :to="{ name: 'bookmark-folder', params: { id: folder.id } }"
+      class="bookmark-folder-name"
+    >
+      <img
+        v-if="folder.emoji_url"
+        class="iconEmoji iconEmoji-image"
+        :src="folder.emoji_url"
+        :alt="folder.emoji"
+        :title="folder.emoji"
+      >
+      <span
+        v-else-if="folder.emoji"
+        class="iconEmoji"
+      >
+        <span>
+          {{ folder.emoji }}
+        </span>
+      </span>
+      <span
+        v-else-if="firstLetter"
+        class="icon iconLetter fa-scale-110"
+      >{{ firstLetter }}</span>{{ folder.name }}
+    </router-link>
+    <router-link
+      :to="{ name: 'bookmark-folder-edit', params: { id: folder.id } }"
+      class="button-folder-edit"
+    >
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        icon="ellipsis-h"
+      />
+    </router-link>
+  </div>
+</template>
+
+<script src="./bookmark_folder_card.js"></script>
+
+<style lang="scss">
+.bookmark-folder-card {
+  display: flex;
+  align-items: center;
+}
+
+a.bookmark-folder-name {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+
+  .icon,
+  .iconLetter,
+  .iconEmoji {
+    display: inline-block;
+    height: 2.5rem;
+    width: 2.5rem;
+    margin-right: 0.5rem;
+  }
+
+  .icon,
+  .iconLetter {
+    font-size: 1.5rem;
+    line-height: 2.5rem;
+    text-align: center;
+  }
+
+  .iconEmoji {
+    text-align: center;
+    object-fit: contain;
+    vertical-align: middle;
+
+    > span {
+      font-size: 1.5rem;
+      line-height: 2.5rem;
+    }
+  }
+
+  img.iconEmoji {
+    padding: 0.25em;
+    box-sizing: border-box;
+  }
+}
+
+.bookmark-folder-name,
+.button-folder-edit {
+  margin: 0;
+  padding: 1em;
+  color: var(--link);
+}
+</style>

src/components/bookmark_folder_edit/bookmark_folder_edit.js

@@ -0,0 +1,80 @@
+import EmojiPicker from '../emoji_picker/emoji_picker.vue'
+import apiService from '../../services/api/api.service'
+
+const BookmarkFolderEdit = {
+  data () {
+    return {
+      name: '',
+      nameDraft: '',
+      emoji: '',
+      emojiUrl: null,
+      emojiDraft: '',
+      emojiUrlDraft: null,
+      emojiPickerExpanded: false,
+      reallyDelete: false
+    }
+  },
+  components: {
+    EmojiPicker
+  },
+  created () {
+    if (!this.id) return
+    const credentials = this.$store.state.users.currentUser.credentials
+    apiService.fetchBookmarkFolders({ credentials })
+      .then((folders) => {
+        const folder = folders.find(folder => folder.id === this.id)
+        if (!folder) return
+
+        this.nameDraft = this.name = folder.name
+        this.emojiDraft = this.emoji = folder.emoji
+        this.emojiUrlDraft = this.emojiUrl = folder.emoji_url
+      })
+  },
+  computed: {
+    id () {
+      return this.$route.params.id
+    }
+  },
+  methods: {
+    selectEmoji (event) {
+      this.emojiDraft = event.insertion
+      this.emojiUrlDraft = event.insertionUrl
+    },
+    showEmojiPicker () {
+      if (!this.emojiPickerExpanded) {
+        this.$refs.picker.showPicker()
+      }
+    },
+    onShowPicker () {
+      this.emojiPickerExpanded = true
+    },
+    onClosePicker () {
+      this.emojiPickerExpanded = false
+    },
+    updateFolder () {
+      this.$store.dispatch('setBookmarkFolder', { folderId: this.id, name: this.nameDraft, emoji: this.emojiDraft })
+        .then(() => {
+          this.$router.push({ name: 'bookmark-folders' })
+        })
+    },
+    createFolder () {
+      this.$store.dispatch('createBookmarkFolder', { name: this.nameDraft, emoji: this.emojiDraft })
+        .then(() => {
+          this.$router.push({ name: 'bookmark-folders' })
+        })
+        .catch((e) => {
+          this.$store.dispatch('pushGlobalNotice', {
+            messageKey: 'bookmark_folders.error',
+            messageArgs: [e.message],
+            level: 'error'
+          })
+        })
+    },
+    deleteFolder () {
+      this.$store.dispatch('deleteBookmarkFolder', { folderId: this.id })
+      this.$router.push({ name: 'bookmark-folders' })
+    }
+  }
+}
+
+export default BookmarkFolderEdit

src/components/bookmark_folder_edit/bookmark_folder_edit.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="panel-default panel BookmarkFolderEdit">
+    <div
+      ref="header"
+      class="panel-heading folder-edit-heading"
+    >
+      <button
+        class="button-unstyled go-back-button"
+        @click="$router.back"
+      >
+        <FAIcon
+          size="lg"
+          icon="chevron-left"
+        />
+      </button>
+      <h1 class="title">
+        <i18n-t
+          v-if="id"
+          keypath="bookmark_folders.editing_folder"
+          scope="global"
+        >
+          <template #folderName>
+            {{ name }}
+          </template>
+        </i18n-t>
+        <i18n-t
+          v-else
+          keypath="bookmark_folders.creating_folder"
+          scope="global"
+        />
+      </h1>
+    </div>
+    <div class="panel-body">
+      <div class="input-wrap">
+        <label for="folder-edit-title">{{ $t('bookmark_folders.emoji') }}</label>
+        <button
+          class="input input-emoji"
+          :title="$t('bookmark_folder.emoji_pick')"
+          @click="showEmojiPicker"
+        >
+          <img
+            v-if="emojiUrlDraft"
+            class="iconEmoji iconEmoji-image"
+            :src="emojiUrlDraft"
+            :alt="emojiDraft"
+            :title="emojiDraft"
+          >
+          <span
+            v-else-if="emojiDraft"
+            class="iconEmoji"
+          >
+            <span>
+              {{ emojiDraft }}
+            </span>
+          </span>
+        </button>
+        <EmojiPicker
+          ref="picker"
+          class="emoji-picker-panel"
+          @emoji="selectEmoji"
+          @show="onShowPicker"
+          @close="onClosePicker"
+        />
+      </div>
+      <div class="input-wrap">
+        <label for="folder-edit-title">{{ $t('bookmark_folders.name') }}</label>
+        <input
+          id="folder-edit-title"
+          ref="name"
+          v-model="nameDraft"
+          class="input"
+        >
+      </div>
+    </div>
+    <div class="panel-footer">
+      <span class="spacer" />
+      <button
+        v-if="!id"
+        class="btn button-default footer-button"
+        @click="createFolder"
+      >
+        {{ $t('bookmark_folders.create') }}
+      </button>
+      <button
+        v-else-if="!reallyDelete"
+        class="btn button-default footer-button"
+        @click="reallyDelete = true"
+      >
+        {{ $t('bookmark_folders.delete') }}
+      </button>
+      <template v-else>
+        {{ $t('bookmark_folders.really_delete') }}
+        <button
+          class="btn button-default footer-button"
+          @click="deleteFolder"
+        >
+          {{ $t('general.yes') }}
+        </button>
+        <button
+          class="btn button-default footer-button"
+          @click="reallyDelete = false"
+        >
+          {{ $t('general.no') }}
+        </button>
+      </template>
+      <div
+        v-if="id && !reallyDelete"
+      >
+        <button
+          class="btn button-default follow-button"
+          @click="updateFolder"
+        >
+          {{ $t('bookmark_folders.update_folder') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./bookmark_folder_edit.js"></script>
+
+<style lang="scss">
+.BookmarkFolderEdit {
+  --panel-body-padding: 0.5em;
+
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .folder-edit-heading {
+    grid-template-columns: auto minmax(50%, 1fr);
+  }
+
+  .panel-body {
+    display: flex;
+    gap: 0.5em;
+  }
+
+  .emoji-picker-panel {
+    position: absolute;
+    z-index: 20;
+    margin-top: 2px;
+
+    &.hide {
+      display: none;
+    }
+  }
+
+  .input-emoji {
+    height: 2.5em;
+    width: 2.5em;
+    padding: 0;
+
+    .iconEmoji {
+      display: inline-block;
+      text-align: center;
+      object-fit: contain;
+      vertical-align: middle;
+      height: 2.5em;
+      width: 2.5em;
+
+      > span {
+        font-size: 1.5rem;
+        line-height: 2.5rem;
+      }
+    }
+
+    img.iconEmoji {
+      padding: 0.25em;
+      box-sizing: border-box;
+    }
+  }
+
+  .input-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+  }
+
+  .go-back-button {
+    text-align: center;
+    line-height: 1;
+    height: 100%;
+    align-self: start;
+    width: var(--__panel-heading-height-inner);
+  }
+
+  .btn {
+    margin: 0 0.5em;
+  }
+
+  .panel-footer {
+    grid-template-columns: minmax(10%, 1fr);
+
+    .footer-button {
+      min-width: 9em;
+    }
+  }
+}
+</style>

src/components/bookmark_folders/bookmark_folders.js

@@ -0,0 +1,27 @@
+import BookmarkFolderCard from '../bookmark_folder_card/bookmark_folder_card.vue'
+
+const BookmarkFolders = {
+  data () {
+    return {
+      isNew: false
+    }
+  },
+  components: {
+    BookmarkFolderCard
+  },
+  computed: {
+    bookmarkFolders () {
+      return this.$store.state.bookmarkFolders.allFolders
+    }
+  },
+  methods: {
+    cancelNewFolder () {
+      this.isNew = false
+    },
+    newFolder () {
+      this.isNew = true
+    }
+  }
+}
+
+export default BookmarkFolders

src/components/bookmark_folders/bookmark_folders.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="Bookmark-folders panel panel-default">
+    <div class="panel-heading">
+      <h1 class="title">
+        {{ $t('nav.bookmark_folders') }}
+      </h1>
+      <router-link
+        :to="{ name: 'bookmark-folder-new' }"
+        class="button-default btn new-folder-button"
+      >
+        {{ $t("bookmark_folders.new") }}
+      </router-link>
+    </div>
+    <div class="panel-body">
+      <BookmarkFolderCard
+        :all-bookmarks="true"
+        class="list-item"
+      />
+      <BookmarkFolderCard
+        v-for="folder in bookmarkFolders.slice().reverse()"
+        :key="folder"
+        :folder="folder"
+        class="list-item"
+      />
+    </div>
+  </div>
+</template>
+
+<script src="./bookmark_folders.js"></script>
+
+<style lang="scss">
+.Bookmark-folders {
+  .new-folder-button {
+    padding: 0 0.5em;
+  }
+}
+</style>

src/components/bookmark_folders_menu/bookmark_folders_menu_content.js

@@ -0,0 +1,16 @@
+import { mapState } from 'vuex'
+import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
+import { getBookmarkFolderEntries } from 'src/components/navigation/filter.js'
+
+export const BookmarkFoldersMenuContent = {
+  components: {
+    NavigationEntry
+  },
+  computed: {
+    ...mapState({
+      folders: getBookmarkFolderEntries
+    })
+  }
+}
+
+export default BookmarkFoldersMenuContent

src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue

@@ -0,0 +1,19 @@
+<template>
+  <ul>
+    <NavigationEntry
+      :item="{
+        name: 'bookmarks',
+        routeObject: { name: 'bookmarks' },
+        label: 'nav.all_bookmarks',
+        icon: 'bookmark'
+      }"
+    />
+    <NavigationEntry
+      v-for="item in folders"
+      :key="item.id"
+      :item="item"
+    />
+  </ul>
+</template>
+
+<script src="./bookmark_folders_menu_content.js"></script>

src/components/bookmark_timeline/bookmark_timeline.js

@@ -1,16 +1,31 @@
 import Timeline from '../timeline/timeline.vue'
 
 const Bookmarks = {
-  computed: {
-    timeline () {
-      return this.$store.state.statuses.timelines.bookmarks
-    }
+  created () {
+    this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
+    this.$store.dispatch('startFetchingTimeline', { timeline: 'bookmarks', bookmarkFolderId: this.folderId || null })
   },
   components: {
     Timeline
   },
+  computed: {
+    folderId () {
+      return this.$route.params.id
+    },
+    timeline () {
+      return this.$store.state.statuses.timelines.bookmarks
+    }
+  },
+  watch: {
+    folderId () {
+      this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
+      this.$store.dispatch('stopFetchingTimeline', 'bookmarks')
+      this.$store.dispatch('startFetchingTimeline', { timeline: 'bookmarks', bookmarkFolderId: this.folderId || null })
+    }
+  },
   unmounted () {
     this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
+    this.$store.dispatch('stopFetchingTimeline', 'bookmarks')
   }
 }
 

src/components/bookmark_timeline/bookmark_timeline.vue

@@ -3,6 +3,7 @@
     :title="$t('nav.bookmarks')"
     :timeline="timeline"
     :timeline-name="'bookmarks'"
+    :bookmark-folder-id="folderId"
   />
 </template>
 

src/components/border.style.js

@@ -0,0 +1,13 @@
+export default {
+  name: 'Border',
+  selector: '/*border*/',
+  virtual: true,
+  defaultRules: [
+    {
+      directives: {
+        textColor: '$mod(--parent 10)',
+        textAuto: 'no-auto'
+      }
+    }
+  ]
+}

src/components/button.style.js

@@ -0,0 +1,129 @@
+export default {
+  name: 'Button', // Name of the component
+  selector: '.button-default', // CSS selector/prefix
+  // outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component
+  // States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
+  states: {
+    // States are a bit expensive - the amount of combinations generated is about (1/6)n^3+n, so adding more state increased number of combination by an order of magnitude!
+    // All states inherit from "normal" state, there is no other inheirtance, i.e. hover+disabled only inherits from "normal", not from hover nor disabled.
+    // However, cascading still works, so resulting state will be result of merging of all relevant states/variants
+    // normal: '' // normal state is implicitly added, it is always included
+    toggled: '.toggled',
+    focused: ':focus-visible',
+    pressed: ':focus:active',
+    hover: ':hover:not(:disabled)',
+    disabled: ':disabled'
+  },
+  // Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
+  variants: {
+    // Variants save on computation time since adding new variant just adds one more "set".
+    // normal: '', // you can override normal variant, it will be appenended to the main class
+    danger: '.danger'
+    // Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
+    // This (currently) is further multipled by number of places where component can exist.
+  },
+  editor: {
+    aspect: '2 / 1'
+  },
+  // This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever).
+  validInnerComponents: [
+    'Text',
+    'Icon'
+  ],
+  // Default rules, used as "default theme", essentially.
+  defaultRules: [
+    {
+      component: 'Root',
+      directives: {
+        '--buttonDefaultHoverGlow': 'shadow | 0 0 4 --text / 0.5',
+        '--buttonDefaultFocusGlow': 'shadow | 0 0 4 4 --link / 0.5',
+        '--buttonDefaultShadow': 'shadow | 0 0 2 #000000',
+        '--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 2), $borderSide(#000000 bottom 0.2 2)',
+        '--buttonPressedBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2 2), $borderSide(#000000 top 0.2 2)'
+      }
+    },
+    {
+      // component: 'Button', // no need to specify components every time unless you're specifying how other component should look
+      // like within it
+      directives: {
+        background: '--fg',
+        shadow: ['--buttonDefaultShadow', '--buttonDefaultBevel'],
+        roundness: 3
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        shadow: ['--buttonDefaultHoverGlow', '--buttonDefaultBevel']
+      }
+    },
+    {
+      state: ['focused'],
+      directives: {
+        shadow: ['--buttonDefaultFocusGlow', '--buttonDefaultBevel']
+      }
+    },
+    {
+      state: ['pressed'],
+      directives: {
+        shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
+      }
+    },
+    {
+      state: ['pressed', 'hover'],
+      directives: {
+        shadow: ['--buttonPressedBevel', '--buttonDefaultHoverGlow']
+      }
+    },
+    {
+      state: ['toggled'],
+      directives: {
+        background: '--inheritedBackground,-14.2',
+        shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
+      }
+    },
+    {
+      state: ['toggled', 'hover'],
+      directives: {
+        background: '--inheritedBackground,-14.2',
+        shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
+      }
+    },
+    {
+      state: ['toggled', 'disabled'],
+      directives: {
+        background: '$blend(--inheritedBackground 0.25 --parent)',
+        shadow: ['--buttonPressedBevel']
+      }
+    },
+    {
+      state: ['disabled'],
+      directives: {
+        background: '$blend(--inheritedBackground 0.25 --parent)',
+        shadow: ['--buttonDefaultBevel']
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'Button',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'Button',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    }
+  ]
+}

src/components/button_unstyled.style.js

@@ -0,0 +1,97 @@
+export default {
+  name: 'ButtonUnstyled',
+  selector: '.button-unstyled',
+  notEditable: true,
+  states: {
+    toggled: '.toggled',
+    disabled: ':disabled',
+    hover: ':hover:not(:disabled)',
+    focused: ':focus-within'
+  },
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Badge'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '#ffffff',
+        opacity: 0,
+        shadow: []
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['hover']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['toggled']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['toggled', 'hover']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['toggled', 'focused']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['toggled', 'focused', 'hover']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    }
+  ]
+}

src/components/chat/chat.js

@@ -57,6 +57,7 @@ const Chat = {
   },
   unmounted () {
     window.removeEventListener('scroll', this.handleScroll)
+    window.removeEventListener('resize', this.handleResize)
     if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
     this.$store.dispatch('clearCurrentChat')
   },
@@ -107,7 +108,7 @@ const Chat = {
         }
       })
     },
-    '$route': function () {
+    $route: function () {
       this.startFetching()
     },
     mastoUserSocketStatus (newValue) {
@@ -135,7 +136,7 @@ const Chat = {
     },
     // "Sticks" scroll to bottom instead of top, helps with OSK resizing the viewport
     handleResize (opts = {}) {
-      const { expand = false, delayed = false } = opts
+      const { delayed = false } = opts
 
       if (delayed) {
         setTimeout(() => {
@@ -146,10 +147,10 @@ const Chat = {
 
       this.$nextTick(() => {
         const { offsetHeight = undefined } = getScrollPosition()
-        const diff = this.lastScrollPosition.offsetHeight - offsetHeight
-        if (diff !== 0 || (!this.bottomedOut() && expand)) {
+        const diff = offsetHeight - this.lastScrollPosition.offsetHeight
+        if (diff !== 0 && !this.bottomedOut()) {
           this.$nextTick(() => {
-            window.scrollTo({ top: window.scrollY + diff })
+            window.scrollBy({ top: -Math.trunc(diff) })
           })
         }
         this.lastScrollPosition = getScrollPosition()
@@ -187,6 +188,7 @@ const Chat = {
       }, 5000)
     },
     handleScroll: _.throttle(function () {
+      this.lastScrollPosition = getScrollPosition()
       if (!this.currentChat) { return }
 
       if (this.reachedTop()) {

src/components/chat/chat.scss

@@ -11,15 +11,15 @@
 
   .chat-view-body {
     box-sizing: border-box;
-    background-color: var(--chatBg, $fallback--bg);
     display: flex;
     flex-direction: column;
     width: 100%;
     overflow: visible;
     min-height: calc(100vh - var(--navbar-height));
-    margin: 0 0 0 0;
-    border-radius: 10px 10px 0 0;
-    border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
+    margin: 0;
+    border-radius: var(--roundness);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 
     &::after {
       border-radius: 0;
@@ -37,8 +37,6 @@
   .footer {
     position: sticky;
     bottom: 0;
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
     z-index: 1;
   }
 
@@ -61,12 +59,10 @@
     position: absolute;
     right: 1.3em;
     top: -3.2em;
-    background-color: $fallback--fg;
-    background-color: var(--btn, $fallback--fg);
     display: flex;
     justify-content: center;
     align-items: center;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 1px 1px rgb(0 0 0 / 30%), 0 2px 4px rgb(0 0 0 / 30%);
     z-index: 10;
     transition: 0.35s all;
     transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
@@ -79,12 +75,6 @@
       visibility: visible;
     }
 
-    i {
-      font-size: 1em;
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
-
     .unread-message-count {
       font-size: 0.8em;
       left: 50%;

src/components/chat/chat.style.js

@@ -0,0 +1,19 @@
+export default {
+  name: 'Chat',
+  selector: '.chat-message-list',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Avatar',
+    'ChatMessage'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        blur: '5px'
+      }
+    }
+  ]
+}

src/components/chat/chat.vue

@@ -26,7 +26,7 @@
           </div>
         </div>
         <div
-          class="message-list"
+          class="chat-message-list message-list"
           :style="{ height: scrollableContainerHeight }"
         >
           <template v-if="!errorLoadingChat">
@@ -61,7 +61,7 @@
               <FAIcon icon="chevron-down" />
               <div
                 v-if="newMessageCount"
-                class="badge badge-notification unread-chat-count unread-message-count"
+                class="badge -notification unread-chat-count unread-message-count"
               >
                 {{ newMessageCount }}
               </div>
@@ -95,6 +95,5 @@
 
 <script src="./chat.js"></script>
 <style lang="scss">
-@import '../../_variables.scss';
-@import './chat.scss';
+@import "./chat";
 </style>

src/components/chat_list/chat_list.vue

@@ -7,9 +7,9 @@
     class="chat-list panel panel-default"
   >
     <div class="panel-heading -sticky">
-      <span class="title">
+      <h1 class="title">
         {{ $t("chats.chats") }}
-      </span>
+      </h1>
       <button
         class="button-default"
         @click="newChat"
@@ -23,7 +23,7 @@
         class="timeline"
       >
         <List :items="sortedChatList">
-          <template v-slot:item="{item}">
+          <template #item="{item}">
             <ChatListItem
               :key="item.id"
               :compact="false"
@@ -45,8 +45,6 @@
 <script src="./chat_list.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-
 .chat-list {
   min-height: 25em;
   margin-bottom: 0;
@@ -57,8 +55,7 @@
   font-size: 1.2em;
   display: flex;
   justify-content: center;
-  color: $fallback--text;
-  color: var(--faint, $fallback--text);
+  color: var(--textFaint);
 }
 
 </style>

src/components/chat_list_item/chat_list_item.scss

@@ -1,8 +1,6 @@
 .chat-list-item {
   display: flex;
   flex-direction: row;
-  padding: 0.75em;
-  height: 5em;
   overflow: hidden;
   box-sizing: border-box;
   cursor: pointer;
@@ -11,11 +9,6 @@
     outline: none;
   }
 
-  &:hover {
-    background-color: var(--selectedPost, $fallback--lightBg);
-    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
-  }
-
   .chat-list-item-left {
     margin-right: 1em;
   }
@@ -29,7 +22,7 @@
 
   .heading {
     width: 100%;
-    display: inline-flex;
+    display: flex;
     justify-content: space-between;
     line-height: 1em;
   }
@@ -47,18 +40,17 @@
   }
 
   .chat-preview {
-    display: inline-flex;
+    display: flex;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     margin: 0.35em 0;
-    color: $fallback--text;
-    color: var(--faint, $fallback--text);
+    color: var(--textFaint);
     width: 100%;
   }
 
   a {
-    color: var(--faintLink, $fallback--link);
+    color: var(--linkFaint);
     text-decoration: none;
     pointer-events: none;
   }
@@ -67,25 +59,19 @@
     canvas {
       display: none;
     }
+
     img {
       visibility: visible;
     }
   }
 
-  .Avatar {
-    border-radius: $fallback--avatarAltRadius;
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-  }
-
   .chat-preview-body {
     --emoji-size: 1.4em;
+
+    padding-right: 1em;
   }
 
   .time-wrapper {
     line-height: var(--post-line-height);
   }
-
-  .chat-preview-body {
-    padding-right: 1em;
-  }
 }

src/components/chat_list_item/chat_list_item.vue

@@ -36,7 +36,7 @@
         />
         <div
           v-if="chat.unread > 0"
-          class="badge badge-notification unread-chat-count"
+          class="badge -notification unread-chat-count"
         >
           {{ chat.unread }}
         </div>
@@ -48,6 +48,5 @@
 <script src="./chat_list_item.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-@import './chat_list_item.scss';
+@import "./chat_list_item";
 </style>

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

src/components/chat_message/chat_message.scss

@@ -1,12 +1,10 @@
-@import '../../_variables.scss';
-
 .chat-message-wrapper {
-
   &.hovered-message-chain {
     .animated.Avatar {
       canvas {
         display: none;
       }
+
       img {
         visibility: visible;
       }
@@ -27,11 +25,6 @@
 
   .menu-icon {
     cursor: pointer;
-
-    &:hover, .extra-button-popover.open & {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
   }
 
   .popover {
@@ -54,39 +47,25 @@
     width: 32px;
   }
 
-  .link-preview, .attachments {
+  .link-preview,
+  .attachments {
     margin-bottom: 1em;
   }
 
-  .chat-message-inner {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    max-width: 80%;
-    min-width: 10em;
-    width: 100%;
-
-    &.with-media {
-      width: 100%;
-
-      .status {
-        width: 100%;
-      }
-    }
-  }
-
   .status {
-    border-radius: $fallback--chatMessageRadius;
-    border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
+    background-color: var(--background);
+    color: var(--text);
+    border-radius: var(--roundness);
     display: flex;
     padding: 0.75em;
+    border: 1px solid var(--border);
   }
 
   .created-at {
     position: relative;
     float: right;
     font-size: 0.8em;
-    margin: -1em 0 -0.5em 0;
+    margin: -1em 0 -0.5em;
     font-style: italic;
     opacity: 0.8;
   }
@@ -103,57 +82,34 @@
   }
 
   .pending {
-    .status-content.media-body, .created-at {
+    .status-content.media-body,
+    .created-at {
       color: var(--faint);
     }
   }
 
   .error {
-    .status-content.media-body, .created-at {
-      color: $fallback--cRed;
-      color: var(--badgeNotification, $fallback--cRed);
+    .status-content.media-body,
+    .created-at {
+      color: var(--badgeNotification);
     }
   }
 
-  .incoming {
-    a {
-      color: var(--chatMessageIncomingLink, $fallback--link);
-    }
-
-    .status {
-      color: var(--chatMessageIncomingText, $fallback--text);
-      background-color: var(--chatMessageIncomingBg, $fallback--bg);
-      border: 1px solid var(--chatMessageIncomingBorder, --border);
-    }
-
-    .created-at {
-      a {
-        color: var(--chatMessageIncomingText, $fallback--text);
-      }
-    }
-
-    .chat-message-menu {
-      left: 0.4rem;
-    }
+  .chat-message-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    max-width: 80%;
+    min-width: 10em;
+    width: 100%;
   }
 
   .outgoing {
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
     align-content: end;
     justify-content: flex-end;
 
-    a {
-      color: var(--chatMessageOutgoingLink, $fallback--link);
-    }
-
-    .status {
-      color: var(--chatMessageOutgoingText, $fallback--text);
-      background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
-      border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
-    }
-
     .chat-message-inner {
       align-items: flex-end;
     }
@@ -163,10 +119,23 @@
     }
   }
 
+  .incoming {
+    .chat-message-menu {
+      left: 0.4rem;
+    }
+  }
+
+  .chat-message-inner.with-media {
+    width: 100%;
+
+    .status {
+      width: 100%;
+    }
+  }
+
   .visible {
     opacity: 1;
   }
-
 }
 
 .chat-message-date-separator {
@@ -174,6 +143,5 @@
   margin: 1.4em 0;
   font-size: 0.9em;
   user-select: none;
-  color: $fallback--text;
-  color: var(--faintedText, $fallback--text);
+  color: var(--textFaint);
 }

src/components/chat_message/chat_message.style.js

@@ -0,0 +1,30 @@
+export default {
+  name: 'ChatMessage',
+  selector: '.chat-message',
+  variants: {
+    outgoing: '.outgoing'
+  },
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Border',
+    'Button',
+    'RichContent',
+    'Attachment',
+    'PollGraph'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg, 2',
+        backgroundNoCssColor: 'yes'
+      }
+    },
+    {
+      variant: 'outgoing',
+      directives: {
+        background: '--bg, 5'
+      }
+    }
+  ]
+}

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
@@ -33,7 +33,7 @@
           <div
             class="media status"
             :class="{ 'without-attachment': !hasAttachment, 'pending': chatViewItem.data.pending, 'error': chatViewItem.data.error }"
-            style="position: relative"
+            style="position: relative;"
             @mouseenter="hovered = true"
             @mouseleave="hovered = false"
           >
@@ -44,23 +44,23 @@
               <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"
+                      class="menu-item dropdown-item dropdown-item-icon"
                       @click="deleteMessage"
                     >
                       <FAIcon icon="times" /> {{ $t("chats.delete") }}
                     </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"
                 >
@@ -96,8 +96,8 @@
   </div>
 </template>
 
-<script src="./chat_message.js" ></script>
+<script src="./chat_message.js"></script>
 <style lang="scss">
-@import './chat_message.scss';
+@import "./chat_message";
 
 </style>

src/components/chat_new/chat_new.scss

@@ -1,7 +1,7 @@
 .chat-new {
   .input-wrap {
     display: flex;
-    margin: 0.7em 0.5em 0.7em 0.5em;
+    margin: 0.7em 0.5em;
 
     input {
       width: 100%;
@@ -16,11 +16,6 @@
     padding-bottom: 0.7rem;
   }
 
-  .basic-user-card:hover {
-    cursor: pointer;
-    background-color: var(--selectedPost, $fallback--lightBg);
-  }
-
   .go-back-button {
     text-align: center;
     line-height: 1;

src/components/chat_new/chat_new.vue

@@ -16,27 +16,29 @@
         />
       </button>
     </div>
-    <div class="input-wrap">
-      <div class="input-search">
-        <FAIcon
-          class="search-icon fa-scale-110 fa-old-padding"
-          icon="search"
-        />
+    <div class="panel-body">
+      <div class="input-wrap">
+        <div class="input-search">
+          <FAIcon
+            class="search-icon fa-scale-110 fa-old-padding"
+            icon="search"
+          />
+        </div>
+        <input
+          ref="search"
+          v-model="query"
+          class="input"
+          placeholder="Search people"
+          @input="onInput"
+        >
       </div>
-      <input
-        ref="search"
-        v-model="query"
-        placeholder="Search people"
-        @input="onInput"
-      >
-    </div>
-    <div class="member-list">
-      <div
-        v-for="user in availableUsers"
-        :key="user.id"
-        class="member"
-      >
-        <div @click.capture.prevent="goToChat(user)">
+      <div class="member-list">
+        <div
+          v-for="user in availableUsers"
+          :key="user.id"
+          class="list-item"
+          @click.capture.prevent="goToChat(user)"
+        >
           <BasicUserCard :user="user" />
         </div>
       </div>
@@ -46,6 +48,5 @@
 
 <script src="./chat_new.js"></script>
 <style lang="scss">
-@import '../../_variables.scss';
-@import './chat_new.scss';
+@import "./chat_new";
 </style>

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

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"
@@ -26,15 +26,13 @@
 <script src="./chat_title.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-
 .chat-title {
   display: flex;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  --emoji-size: 14px;
+  --emoji-size: 1em;
 
   .username {
     max-width: 100%;
@@ -54,8 +52,7 @@
     margin-right: 0.5em;
     height: 1.5em;
     width: 1.5em;
-    border-radius: $fallback--avatarAltRadius;
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    border-radius: var(--roundness);
 
     &.animated::before {
       display: none;

src/components/checkbox/checkbox.vue

@@ -1,19 +1,33 @@
 <template>
   <label
     class="checkbox"
-    :class="{ disabled, indeterminate }"
+    :class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }"
   >
+    <span
+      v-if="!!$slots.before"
+      class="label -before"
+      :class="{ faint: disabled }"
+    >
+      <slot name="before" />
+    </span>
     <input
       type="checkbox"
+      class="visible-for-screenreader-only"
       :disabled="disabled"
       :checked="modelValue"
       :indeterminate="indeterminate"
       @change="$emit('update:modelValue', $event.target.checked)"
     >
-    <i class="checkbox-indicator" />
+    <i
+      class="input -checkbox checkbox-indicator"
+      :aria-hidden="true"
+      :class="{ disabled }"
+      @transitionend.capture="onTransitionEnd"
+    />
     <span
       v-if="!!$slots.default"
-      class="label"
+      class="label -after"
+      :class="{ faint: disabled }"
     >
       <slot />
     </span>
@@ -22,43 +36,68 @@
 
 <script>
 export default {
-  emits: ['update:modelValue'],
   props: [
     'modelValue',
     'indeterminate',
     'disabled'
-  ]
+  ],
+  emits: ['update:modelValue'],
+  data: (vm) => ({
+    indeterminateTransitionFix: vm.indeterminate
+  }),
+  watch: {
+    indeterminate (e) {
+      if (e) {
+        this.indeterminateTransitionFix = true
+      }
+    }
+  },
+  methods: {
+    onTransitionEnd (e) {
+      if (!this.indeterminate) {
+        this.indeterminateTransitionFix = false
+      }
+    }
+  }
 }
 </script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../mixins";
 
 .checkbox {
   position: relative;
   display: inline-block;
   min-height: 1.2em;
 
-  &-indicator {
+  &-indicator,
+  & .label {
+    vertical-align: middle;
+  }
+
+  & > &-indicator {
+    /* Reset .input stuff */
+    padding: 0;
+    margin: 0;
     position: relative;
-    padding-left: 1.2em;
+    line-height: inherit;
+    display: inline-block;
+    width: 1.2em;
+    height: 1.2em;
+    box-shadow: none;
   }
 
   &-indicator::before {
     position: absolute;
-    right: 0;
-    top: 0;
+    inset: 0;
     display: block;
-    content: '✓';
+    content: "✓";
     transition: color 200ms;
     width: 1.1em;
     height: 1.1em;
-    border-radius: $fallback--checkboxRadius;
-    border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
-    box-shadow: 0px 0px 2px black inset;
-    box-shadow: var(--inputShadow);
-    background-color: $fallback--fg;
-    background-color: var(--input, $fallback--fg);
+    border-radius: var(--roundness);
+    box-shadow: var(--shadow);
+    background-color: var(--background);
     vertical-align: top;
     text-align: center;
     line-height: 1.1em;
@@ -68,35 +107,37 @@ export default {
     box-sizing: border-box;
   }
 
-  &.disabled {
-    .checkbox-indicator::before,
-    .label {
-      opacity: .5;
-    }
-    .label {
-      color: $fallback--faint;
-      color: var(--faint, $fallback--faint);
+  .disabled {
+    .checkbox-indicator::before {
+      background-color: var(--background);
     }
   }
 
-  input[type=checkbox] {
-    display: none;
-
+  input[type="checkbox"] {
     &:checked + .checkbox-indicator::before {
-      color: $fallback--text;
-      color: var(--inputText, $fallback--text);
+      color: var(--text);
     }
 
     &:indeterminate + .checkbox-indicator::before {
-      content: '–';
-      color: $fallback--text;
-      color: var(--inputText, $fallback--text);
+      content: "–";
+      color: var(--text);
     }
-
   }
 
-  & > span {
-    margin-left: .5em;
+  &.indeterminate-fix {
+    input[type="checkbox"] + .checkbox-indicator::before {
+      content: "–";
+    }
+  }
+
+  & > .label {
+    &.-after {
+      margin-left: 0.5em;
+    }
+
+    &.-before {
+      margin-right: 0.5em;
+    }
   }
 }
 </style>

src/components/color_input/color_input.scss

@@ -1,19 +1,23 @@
-@import '../../_variables.scss';
-
 .color-input {
   display: inline-flex;
 
+  .label {
+    flex: 1 1 auto;
+  }
+
+  .opt {
+    margin-right: 0.5em;
+  }
+
   &-field.input {
     display: inline-flex;
     flex: 0 0 0;
     max-width: 9em;
     align-items: stretch;
-    padding: .2em 8px;
 
     input {
+      color: var(--text);
       background: none;
-      color: $fallback--lightText;
-      color: var(--inputText, $fallback--lightText);
       border: none;
       padding: 0;
       margin: 0;
@@ -23,46 +27,79 @@
         min-width: 3em;
         padding: 0;
       }
+    }
 
-      &.nativeColor {
-        flex: 0 0 2em;
-        min-width: 2em;
-        align-self: center;
-        height: 100%;
+    .nativeColor {
+      cursor: pointer;
+      flex: 0 0 auto;
+      padding: 0;
+
+      input {
+        appearance: none;
+        max-width: 0;
+        min-width: 0;
+        max-height: 0;
+        /* stylelint-disable-next-line declaration-no-important */
+        opacity: 0 !important;
       }
     }
+
     .computedIndicator,
+    .validIndicator,
+    .invalidIndicator,
     .transparentIndicator {
       flex: 0 0 2em;
+      margin: 0.2em 0.5em;
       min-width: 2em;
-      align-self: center;
-      height: 100%;
+      align-self: stretch;
+      min-height: 1.1em;
+      border-radius: var(--roundness);
     }
+
+    .invalidIndicator {
+      background: transparent;
+      box-sizing: border-box;
+      border: 2px solid var(--cRed);
+    }
+
     .transparentIndicator {
       // forgot to install counter-strike source, ooops
-      background-color: #FF00FF;
+      background-color: #f0f;
       position: relative;
-      &::before, &::after {
+
+      &::before,
+      &::after {
         display: block;
-        content: '';
-        background-color: #000000;
+        content: "";
+        background-color: #000;
         position: absolute;
         height: 50%;
         width: 50%;
       }
+
       &::after {
         top: 0;
         left: 0;
+        border-top-left-radius: var(--roundness);
       }
+
       &::before {
         bottom: 0;
         right: 0;
+        border-bottom-right-radius: var(--roundness);
+      }
+    }
+
+    &.disabled,
+    &:disabled {
+      .nativeColor input,
+      .computedIndicator,
+      .validIndicator,
+      .invalidIndicator,
+      .transparentIndicator {
+        /* stylelint-disable-next-line declaration-no-important */
+        opacity: 0.25 !important;
       }
     }
   }
-
-  .label {
-    flex: 1 1 auto;
-  }
-
 }

src/components/color_input/color_input.vue

@@ -6,50 +6,77 @@
     <label
       :for="name"
       class="label"
+      :class="{ faint: !present || disabled }"
     >
       {{ label }}
     </label>
     <Checkbox
-      v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
+      v-if="typeof fallback !== 'undefined' && showOptionalCheckbox && !hideOptionalCheckbox"
       :model-value="present"
       :disabled="disabled"
       class="opt"
-      @update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
+      @update:modelValue="updateValue(typeof modelValue === 'undefined' ? fallback : undefined)"
     />
-    <div class="input color-input-field">
+    <div
+      class="input color-input-field"
+      :class="{ disabled: !present || disabled }"
+    >
       <input
         :id="name + '-t'"
         class="textColor unstyled"
+        :class="{ disabled: !present || disabled }"
         type="text"
         :value="modelValue || fallback"
         :disabled="!present || disabled"
-        @input="$emit('update:modelValue', $event.target.value)"
-      >
-      <input
-        v-if="validColor"
-        :id="name"
-        class="nativeColor unstyled"
-        type="color"
-        :value="modelValue || fallback"
-        :disabled="!present || disabled"
-        @input="$emit('update:modelValue', $event.target.value)"
+        @input="updateValue($event.target.value)"
       >
       <div
-        v-if="transparentColor"
+        v-if="validColor"
+        class="validIndicator"
+        :style="{backgroundColor: modelValue || fallback}"
+      />
+      <div
+        v-else-if="transparentColor"
         class="transparentIndicator"
       />
       <div
-        v-if="computedColor"
+        v-else-if="computedColor"
         class="computedIndicator"
         :style="{backgroundColor: fallback}"
       />
+      <div
+        v-else
+        class="invalidIndicator"
+      />
+      <label class="nativeColor">
+        <FAIcon icon="eye-dropper" />
+        <input
+          :id="name"
+          class="unstyled"
+          type="color"
+          :value="modelValue || fallback"
+          :disabled="!present || disabled"
+          :class="{ disabled: !present || disabled }"
+          @input="updateValue($event.target.value)"
+        >
+      </label>
     </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'
+import { throttle } from 'lodash'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEyeDropper
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEyeDropper
+)
+
 export default {
   components: {
     Checkbox
@@ -85,10 +112,16 @@ export default {
       default: false
     },
     // Show "optional" tickbox, for when value might become mandatory
-    showOptionalTickbox: {
+    showOptionalCheckbox: {
       required: false,
       type: Boolean,
       default: true
+    },
+    // Force "optional" tickbox to hide
+    hideOptionalCheckbox: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue'],
@@ -103,17 +136,14 @@ export default {
       return this.modelValue === 'transparent'
     },
     computedColor () {
-      return this.modelValue && this.modelValue.startsWith('--')
+      return this.modelValue && (this.modelValue.startsWith('--') || this.modelValue.startsWith('$'))
     }
+  },
+  methods: {
+    updateValue: throttle(function (value) {
+      this.$emit('update:modelValue', value)
+    }, 100)
   }
 }
 </script>
-
-<style lang="scss">
-.color-control {
-  input.text-input {
-    max-width: 7em;
-    flex: 1;
-  }
-}
-</style>
+<style lang="scss" src="./color_input.scss"></style>

src/components/component_preview/component_preview.vue

@@ -0,0 +1,323 @@
+<template>
+  <div
+    class="ComponentPreview"
+    :class="{ '-shadow-controls': shadowControl }"
+  >
+    <!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
+    <component
+      :is="'style'"
+      v-html="previewCss"
+    />
+    <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
+    <label
+      v-show="shadowControl"
+      role="heading"
+      class="header"
+      :class="{ faint: disabled }"
+    >
+      {{ $t('settings.style.shadows.offset') }}
+    </label>
+    <label
+      v-show="shadowControl && !hideControls"
+      class="x-shift-number"
+    >
+      {{ $t('settings.style.shadows.offset-x') }}
+      <input
+        :value="shadow?.x"
+        :disabled="disabled"
+        :class="{ disabled }"
+        class="input input-number"
+        type="number"
+        @input="e => updateProperty('x', e.target.value)"
+      >
+    </label>
+    <label
+      v-show="shadowControl && !hideControls"
+      class="y-shift-number"
+    >
+      {{ $t('settings.style.shadows.offset-y') }}
+      <input
+        :value="shadow?.y"
+        :disabled="disabled"
+        :class="{ disabled }"
+        class="input input-number"
+        type="number"
+        @input="e => updateProperty('y', e.target.value)"
+      >
+    </label>
+    <input
+      v-show="shadowControl && !hideControls"
+      :value="shadow?.x"
+      :disabled="disabled"
+      :class="{ disabled }"
+      class="input input-range x-shift-slider"
+      type="range"
+      max="20"
+      min="-20"
+      @input="e => updateProperty('x', e.target.value)"
+    >
+    <input
+      v-show="shadowControl && !hideControls"
+      :value="shadow?.y"
+      :disabled="disabled"
+      :class="{ disabled }"
+      class="input input-range y-shift-slider"
+      type="range"
+      max="20"
+      min="-20"
+      @input="e => updateProperty('y', e.target.value)"
+    >
+    <div
+      class="preview-window"
+      :class="{ '-light-grid': lightGrid }"
+    >
+      <div
+        class="preview-block"
+        :class="previewClass"
+        :style="style"
+      >
+        {{ $t('settings.style.themes3.editor.test_string') }}
+      </div>
+      <div
+        v-if="invalid"
+        class="invalid-container"
+      >
+        <div class="alert error invalid-label">
+          {{ $t('settings.style.themes3.editor.invalid') }}
+        </div>
+      </div>
+    </div>
+    <div class="assists">
+      <Checkbox
+        v-model="lightGrid"
+        name="lightGrid"
+        class="input-light-grid"
+      >
+        {{ $t('settings.style.shadows.light_grid') }}
+      </Checkbox>
+      <div class="style-control">
+        <label class="label">
+          {{ $t('settings.style.shadows.zoom') }}
+        </label>
+        <input
+          v-model="zoom"
+          class="input input-number y-shift-number"
+          type="number"
+        >
+      </div>
+      <ColorInput
+        v-if="!noColorControl"
+        v-model="colorOverride"
+        class="input-color-input"
+        fallback="#606060"
+        :label="$t('settings.style.shadows.color_override')"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import ColorInput from 'src/components/color_input/color_input.vue'
+
+export default {
+  components: {
+    Checkbox,
+    ColorInput
+  },
+  props: [
+    'shadow',
+    'shadowControl',
+    'previewClass',
+    'previewStyle',
+    'previewCss',
+    'disabled',
+    'invalid',
+    'noColorControl'
+  ],
+  emits: ['update:shadow'],
+  data () {
+    return {
+      colorOverride: undefined,
+      lightGrid: false,
+      zoom: 100
+    }
+  },
+  computed: {
+    style () {
+      const result = [
+        this.previewStyle,
+        `zoom: ${this.zoom / 100}`
+      ]
+      if (this.colorOverride) result.push(`--background: ${this.colorOverride}`)
+      return result
+    },
+    hideControls () {
+      return typeof this.shadow === 'string'
+    }
+  },
+  methods: {
+    updateProperty (axis, value) {
+      this.$emit('update:shadow', { axis, value: Number(value) })
+    }
+  }
+}
+</script>
+<style lang="scss">
+.ComponentPreview {
+  display: grid;
+  grid-template-columns: 1em 1fr 1fr 1em;
+  grid-template-rows: 2em 1fr 1fr 1fr 1em 2em max-content;
+  grid-template-areas:
+    "header     header     header     header "
+    "preview    preview    preview    y-slide"
+    "preview    preview    preview    y-slide"
+    "preview    preview    preview    y-slide"
+    "x-slide    x-slide    x-slide    .      "
+    "x-num      x-num      y-num      y-num  "
+    "assists    assists    assists    assists";
+  grid-gap: 0.5em;
+
+  &:not(.-shadow-controls) {
+    grid-template-areas:
+      "header     header     header     header "
+      "preview    preview    preview    y-slide"
+      "preview    preview    preview    y-slide"
+      "preview    preview    preview    y-slide"
+      "assists    assists    assists    assists";
+    grid-template-rows: 2em 1fr 1fr 1fr max-content;
+  }
+
+  .header {
+    grid-area: header;
+    justify-self: center;
+    align-self: baseline;
+    line-height: 2;
+  }
+
+  .invalid-container {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    background-color: rgba(100 0 0 / 50%);
+
+    .alert {
+      padding: 0.5em 1em;
+    }
+  }
+
+  .assists {
+    grid-area: assists;
+    display: grid;
+    grid-auto-flow: rows;
+    grid-auto-rows: 2em;
+    grid-gap: 0.5em;
+  }
+
+  .input-light-grid {
+    justify-self: center;
+  }
+
+  .input-number {
+    min-width: 2em;
+  }
+
+  .x-shift-number {
+    grid-area: x-num;
+    justify-self: right;
+  }
+
+  .y-shift-number {
+    grid-area: y-num;
+    justify-self: left;
+  }
+
+  .x-shift-number,
+  .y-shift-number {
+    input {
+      max-width: 4em;
+    }
+  }
+
+  .x-shift-slider {
+    grid-area: x-slide;
+    height: auto;
+    align-self: start;
+    min-width: 10em;
+  }
+
+  .y-shift-slider {
+    grid-area: y-slide;
+    writing-mode: vertical-lr;
+    justify-self: left;
+    min-height: 10em;
+  }
+
+  .x-shift-slider,
+  .y-shift-slider {
+    padding: 0;
+  }
+
+  .preview-window {
+    --__grid-color1: rgb(102 102 102);
+    --__grid-color2: rgb(153 153 153);
+    --__grid-color1-disabled: rgba(102 102 102 / 20%);
+    --__grid-color2-disabled: rgba(153 153 153 / 20%);
+
+    &.-light-grid {
+      --__grid-color1: rgb(205 205 205);
+      --__grid-color2: rgb(255 255 255);
+      --__grid-color1-disabled: rgba(205 205 205 / 20%);
+      --__grid-color2-disabled: rgba(255 255 255 / 20%);
+    }
+
+    position: relative;
+    grid-area: preview;
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 10em;
+    min-height: 10em;
+    background-color: var(--__grid-color2);
+    background-image:
+      linear-gradient(45deg, var(--__grid-color1) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--__grid-color1) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--__grid-color1) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--__grid-color1) 75%);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
+    border-radius: var(--roundness);
+
+    &.disabled {
+      background-color: var(--__grid-color2-disabled);
+      background-image:
+        linear-gradient(45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
+        linear-gradient(-45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, var(--__grid-color1-disabled) 75%),
+        linear-gradient(-45deg, transparent 75%, var(--__grid-color1-disabled) 75%);
+    }
+
+    .preview-block {
+      background: var(--background, var(--bg));
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-width: 33%;
+      min-height: 33%;
+      max-width: 80%;
+      max-height: 80%;
+      border-width: 0;
+      border-style: solid;
+      border-color: var(--border);
+      border-radius: var(--roundness);
+      box-shadow: var(--shadow);
+    }
+  }
+}
+</style>

src/components/confirm_modal/confirm_modal.js

@@ -0,0 +1,37 @@
+import DialogModal from '../dialog_modal/dialog_modal.vue'
+
+/**
+ * This component emits the following events:
+ * cancelled, emitted when the action should not be performed;
+ * accepted, emitted when the action should be performed;
+ *
+ * The caller should close this dialog after receiving any of the two events.
+ */
+const ConfirmModal = {
+  components: {
+    DialogModal
+  },
+  props: {
+    title: {
+      type: String
+    },
+    cancelText: {
+      type: String
+    },
+    confirmText: {
+      type: String
+    }
+  },
+  computed: {
+  },
+  methods: {
+    onCancel () {
+      this.$emit('cancelled')
+    },
+    onAccept () {
+      this.$emit('accepted')
+    }
+  }
+}
+
+export default ConfirmModal

src/components/confirm_modal/confirm_modal.vue

@@ -0,0 +1,29 @@
+<template>
+  <dialog-modal
+    v-body-scroll-lock="true"
+    class="confirm-modal"
+    :on-cancel="onCancel"
+  >
+    <template #header>
+      <span v-text="title" />
+    </template>
+
+    <slot />
+
+    <template #footer>
+      <button
+        class="btn button-default"
+        @click.prevent="onAccept"
+        v-text="confirmText"
+      />
+
+      <button
+        class="btn button-default"
+        @click.prevent="onCancel"
+        v-text="cancelText"
+      />
+    </template>
+  </dialog-modal>
+</template>
+
+<script src="./confirm_modal.js"></script>

src/components/contrast_ratio/contrast_ratio.vue

@@ -3,39 +3,62 @@
     v-if="contrast"
     class="contrast-ratio"
   >
-    <span
-      :title="hint"
+    <span v-if="showRatio">
+      {{ contrast.text }}
+    </span>
+    <Tooltip
+      :text="hint"
       class="rating"
     >
       <span v-if="contrast.aaa">
-        <FAIcon icon="thumbs-up" />
+        <FAIcon
+          icon="thumbs-up"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
       <span v-if="!contrast.aaa && contrast.aa">
-        <FAIcon icon="adjust" />
+        <FAIcon
+          icon="adjust"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
       <span v-if="!contrast.aaa && !contrast.aa">
-        <FAIcon icon="exclamation-triangle" />
+        <FAIcon
+          icon="exclamation-triangle"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
-    </span>
-    <span
+    </Tooltip>
+    <Tooltip
       v-if="contrast && large"
+      :text="hint_18pt"
       class="rating"
-      :title="hint_18pt"
     >
       <span v-if="contrast.laaa">
-        <FAIcon icon="thumbs-up" />
+        <FAIcon
+          icon="thumbs-up"
+          :size="showRatio ? 'large' : ''"
+        />
       </span>
       <span v-if="!contrast.laaa && contrast.laa">
-        <FAIcon icon="adjust" />
+        <FAIcon
+          icon="adjust"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
       <span v-if="!contrast.laaa && !contrast.laa">
-        <FAIcon icon="exclamation-triangle" />
+        <FAIcon
+          icon="exclamation-triangle"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
-    </span>
+    </Tooltip>
   </span>
 </template>
 
 <script>
+import Tooltip from 'src/components/tooltip/tooltip.vue'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faAdjust,
@@ -50,6 +73,9 @@ library.add(
 )
 
 export default {
+  components: {
+    Tooltip
+  },
   props: {
     large: {
       required: false,
@@ -62,6 +88,11 @@ export default {
       required: false,
       type: Object,
       default: () => ({})
+    },
+    showRatio: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -87,9 +118,7 @@ export default {
 .contrast-ratio {
   display: flex;
   justify-content: flex-end;
-
-  margin-top: -4px;
-  margin-bottom: 5px;
+  align-items: baseline;
 
   .label {
     margin-right: 1em;
@@ -97,7 +126,6 @@ export default {
 
   .rating {
     display: inline-block;
-    text-align: center;
     margin-left: 0.5em;
   }
 }

src/components/conversation/conversation.js

@@ -1,6 +1,10 @@
 import { reduce, filter, findIndex, clone, get } from 'lodash'
 import Status from '../status/status.vue'
 import ThreadTree from '../thread_tree/thread_tree.vue'
+import { WSConnectionStatus } from '../../services/api/api.service.js'
+import { mapGetters, mapState } from 'vuex'
+import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.vue'
+import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -52,7 +56,8 @@ const conversation = {
       expanded: false,
       threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
       statusContentPropertiesObject: {},
-      inlineDivePosition: null
+      inlineDivePosition: null,
+      loadStatusError: null
     }
   },
   props: [
@@ -77,6 +82,9 @@ const conversation = {
       const maxDepth = this.$store.getters.mergedConfig.maxDepthInThread - 2
       return maxDepth >= 1 ? maxDepth : 1
     },
+    streamingEnabled () {
+      return this.mergedConfig.useStreamingApi && this.mastoUserSocketStatus === WSConnectionStatus.JOINED
+    },
     displayStyle () {
       return this.$store.getters.mergedConfig.conversationDisplay
     },
@@ -271,7 +279,7 @@ const conversation = {
           result[irid] = result[irid] || []
           result[irid].push({
             name: `#${i}`,
-            id: id
+            id
           })
         }
         i++
@@ -339,11 +347,17 @@ const conversation = {
     },
     maybeHighlight () {
       return this.isExpanded ? this.highlight : null
-    }
+    },
+    ...mapGetters(['mergedConfig']),
+    ...mapState({
+      mastoUserSocketStatus: state => state.api.mastoUserSocketStatus
+    })
   },
   components: {
     Status,
-    ThreadTree
+    ThreadTree,
+    QuickFilterSettings,
+    QuickViewSettings
   },
   watch: {
     statusId (newVal, oldVal) {
@@ -379,11 +393,15 @@ const conversation = {
             this.setHighlight(this.originalStatusId)
           })
       } else {
+        this.loadStatusError = null
         this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
           .then((status) => {
             this.$store.dispatch('addNewStatuses', { statuses: [status] })
             this.fetchConversation()
           })
+          .catch((error) => {
+            this.loadStatusError = error
+          })
       }
     },
     getReplies (id) {
@@ -395,6 +413,11 @@ const conversation = {
     setHighlight (id) {
       if (!id) return
       this.highlight = id
+
+      if (!this.streamingEnabled) {
+        this.$store.dispatch('fetchStatus', id)
+      }
+
       this.$store.dispatch('fetchFavsAndRepeats', id)
       this.$store.dispatch('fetchEmojiReactionsBy', id)
     },

src/components/conversation/conversation.vue

@@ -9,7 +9,9 @@
       v-if="isExpanded"
       class="panel-heading conversation-heading -sticky"
     >
-      <span class="title"> {{ $t('timeline.conversation') }} </span>
+      <h1 class="title">
+        {{ $t('timeline.conversation') }}
+      </h1>
       <button
         v-if="collapsable"
         class="button-unstyled -link"
@@ -17,8 +19,38 @@
       >
         {{ $t('timeline.collapse') }}
       </button>
+      <QuickFilterSettings
+        v-if="!collapsable"
+        :conversation="true"
+        class="rightside-button"
+      />
+      <QuickViewSettings
+        v-if="!collapsable"
+        :conversation="true"
+        class="rightside-button"
+      />
     </div>
-    <div class="conversation-body panel-body">
+    <div
+      v-if="isPage && !status"
+      class="conversation-body"
+      :class="{ 'panel-body': isExpanded }"
+    >
+      <p v-if="!loadStatusError">
+        <FAIcon
+          spin
+          icon="circle-notch"
+        />
+        {{ $t('status.loading') }}
+      </p>
+      <p v-else>
+        {{ $t('status.load_error', { error: loadStatusError }) }}
+      </p>
+    </div>
+    <div
+      v-else
+      class="conversation-body"
+      :class="{ 'panel-body': isExpanded }"
+    >
       <div
         v-if="isTreeView"
         class="thread-body"
@@ -31,8 +63,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
@@ -50,7 +82,7 @@
           v-if="shouldShowAncestors"
           class="thread-ancestors"
         >
-          <div
+          <article
             v-for="status in ancestorsOf(diveRoot)"
             :key="status.id"
             class="thread-ancestor"
@@ -120,7 +152,7 @@
                 </i18n-t>
               </div>
             </div>
-          </div>
+          </article>
         </div>
         <thread-tree
           v-for="status in showingTopLevel"
@@ -158,39 +190,42 @@
         v-if="isLinearView"
         class="thread-body"
       >
-        <status
-          v-for="status in conversation"
-          :key="status.id"
-          ref="statusComponent"
-          :inline-expanded="collapsable && isExpanded"
-          :statusoid="status"
-          :expandable="!isExpanded"
-          :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-          :focused="focused(status.id)"
-          :in-conversation="isExpanded"
-          :highlight="getHighlight()"
-          :replies="getReplies(status.id)"
-          :in-profile="inProfile"
-          :profile-user-id="profileUserId"
-          class="conversation-status status-fadein panel-body"
+        <article>
+          <status
+            v-for="status in conversation"
+            :key="status.id"
+            ref="statusComponent"
+            :inline-expanded="collapsable && isExpanded"
+            :statusoid="status"
+            :expandable="!isExpanded"
+            :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+            :focused="focused(status.id)"
+            :in-conversation="isExpanded"
+            :highlight="getHighlight()"
+            :replies="getReplies(status.id)"
+            :in-profile="inProfile"
+            :profile-user-id="profileUserId"
+            class="conversation-status status-fadein panel-body"
 
-          :toggle-thread-display="toggleThreadDisplay"
-          :thread-display-status="threadDisplayStatus"
-          :show-thread-recursively="showThreadRecursively"
-          :total-reply-count="totalReplyCount"
-          :total-reply-depth="totalReplyDepth"
-          :status-content-properties="statusContentProperties"
-          :set-status-content-property="setStatusContentProperty"
-          :toggle-status-content-property="toggleStatusContentProperty"
+            :toggle-thread-display="toggleThreadDisplay"
+            :thread-display-status="threadDisplayStatus"
+            :show-thread-recursively="showThreadRecursively"
+            :total-reply-count="totalReplyCount"
+            :total-reply-depth="totalReplyDepth"
+            :status-content-properties="statusContentProperties"
+            :set-status-content-property="setStatusContentProperty"
+            :toggle-status-content-property="toggleStatusContentProperty"
 
-          @goto="setHighlight"
-          @toggleExpanded="toggleExpanded"
-        />
+            @goto="setHighlight"
+            @toggleExpanded="toggleExpanded"
+          />
+        </article>
       </div>
     </div>
   </div>
   <div
     v-else
+    class="Conversation -hidden"
     :style="hiddenStyle"
   />
 </template>
@@ -198,17 +233,19 @@
 <script src="./conversation.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-
 .Conversation {
   z-index: 1;
 
+  &.-hidden {
+    background: var(--__panel-background);
+    backdrop-filter: var(--__panel-backdrop-filter);
+  }
+
   .conversation-dive-to-top-level-box {
-    padding: var(--status-margin, $status-margin);
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: var(--border, $fallback--border);
+    padding: var(--status-margin);
+    border-bottom: 1px solid var(--border);
     border-radius: 0;
+
     /* Make the button stretch along the whole row */
     display: flex;
     align-items: stretch;
@@ -216,67 +253,82 @@
   }
 
   .thread-ancestors {
-    margin-left: var(--status-margin, $status-margin);
-    border-left: 2px solid var(--border, $fallback--border);
+    margin-left: var(--status-margin);
+    border-left: 2px solid var(--border);
   }
 
-  .thread-ancestor.-faded .StatusContent {
-    --link: var(--faintLink);
-    --text: var(--faint);
-    color: var(--text);
+  .thread-ancestor.-faded .RichContent {
+    /* stylelint-disable declaration-no-important */
+    --text: var(--textFaint) !important;
+    --link: var(--linkFaint) !important;
+    --funtextGreentext: var(--funtextGreentextFaint) !important;
+    --funtextCyantext: var(--funtextCyantextFaint) !important;
+    /* stylelint-enable declaration-no-important */
   }
 
   .thread-ancestor-dive-box {
-    padding-left: var(--status-margin, $status-margin);
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: var(--border, $fallback--border);
+    padding-left: var(--status-margin);
+    border-bottom: 1px solid var(--border);
     border-radius: 0;
+
     /* Make the button stretch along the whole row */
-    &, &-inner {
+    &,
+    &-inner {
       display: flex;
       align-items: stretch;
       flex-direction: column;
     }
   }
+
   .thread-ancestor-dive-box-inner {
-    padding: var(--status-margin, $status-margin);
+    padding: var(--status-margin);
   }
 
   .conversation-status {
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: var(--border, $fallback--border);
+    border-bottom: 1px solid var(--border);
     border-radius: 0;
   }
 
   .thread-ancestor-has-other-replies .conversation-status,
+  &:last-child:not(.-expanded) .conversation-status,
+  &.-expanded .conversation-status:last-child,
   .thread-ancestor:last-child .conversation-status,
   .thread-ancestor:last-child .thread-ancestor-dive-box,
-  &:last-child .conversation-status,
   &.-expanded .thread-tree .conversation-status {
     border-bottom: none;
   }
 
   .thread-ancestors + .thread-tree > .conversation-status {
-    border-top-width: 1px;
-    border-top-style: solid;
-    border-top-color: var(--border, $fallback--border);
+    border-top: 1px solid var(--border);
   }
 
   /* expanded conversation in timeline */
   &.status-fadein.-expanded .thread-body {
-    border-left-width: 4px;
-    border-left-style: solid;
-    border-left-color: $fallback--cRed;
-    border-left-color: var(--cRed, $fallback--cRed);
-    border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
-    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
-    border-bottom: 1px solid var(--border, $fallback--border);
+    border-left: 4px solid var(--cRed);
+    border-radius: var(--roundness);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom: 1px solid var(--border);
   }
 
   &.-expanded.status-fadein {
-    margin: calc(var(--status-margin, $status-margin) / 2);
+    --___margin: calc(var(--status-margin) / 2);
+
+    background: var(--background);
+    margin: var(--___margin);
+
+    &::before {
+      z-index: -1;
+      content: "";
+      display: block;
+      position: absolute;
+      top: calc(var(--___margin) * -1);
+      bottom: calc(var(--___margin) * -1);
+      left: calc(var(--___margin) * -1);
+      right: calc(var(--___margin) * -1);
+      background: var(--background);
+      backdrop-filter: var(--__panel-backdrop-filter);
+    }
   }
 }
 </style>

src/components/desktop_nav/desktop_nav.js

@@ -1,4 +1,5 @@
 import SearchBar from 'components/search_bar/search_bar.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faSignInAlt,
@@ -30,7 +31,8 @@ library.add(
 
 export default {
   components: {
-    SearchBar
+    SearchBar,
+    ConfirmModal
   },
   data: () => ({
     searchBarHidden: true,
@@ -40,50 +42,75 @@ export default {
         window.CSS.supports('-moz-mask-size', 'contain') ||
         window.CSS.supports('-ms-mask-size', 'contain') ||
         window.CSS.supports('-o-mask-size', 'contain')
-    )
+    ),
+    showingConfirmLogout: false
   }),
   computed: {
     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 ? {
-        'mask-image': `url(${this.$store.state.instance.logo})`
-      } : {
-        'background-color': this.enableMask ? '' : 'transparent'
-      }
+      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 ? {} : {
-        'background-color': this.enableMask ? '' : 'transparent'
-      })
+      }, this.enableMask
+        ? {}
+        : {
+            'background-color': this.enableMask ? '' : 'transparent'
+          })
     },
     logo () { return this.$store.state.instance.logo },
     sitename () { return this.$store.state.instance.name },
     hideSitename () { return this.$store.state.instance.hideSitename },
     logoLeft () { return this.$store.state.instance.logoLeft },
     currentUser () { return this.$store.state.users.currentUser },
-    privateMode () { return this.$store.state.instance.private }
+    privateMode () { return this.$store.state.instance.private },
+    shouldConfirmLogout () {
+      return this.$store.getters.mergedConfig.modalOnLogout
+    }
   },
   methods: {
     scrollToTop () {
       window.scrollTo(0, 0)
     },
+    showConfirmLogout () {
+      this.showingConfirmLogout = true
+    },
+    hideConfirmLogout () {
+      this.showingConfirmLogout = false
+    },
     logout () {
+      if (!this.shouldConfirmLogout) {
+        this.doLogout()
+      } else {
+        this.showConfirmLogout()
+      }
+    },
+    doLogout () {
       this.$router.replace('/main/public')
       this.$store.dispatch('logout')
+      this.hideConfirmLogout()
     },
     onSearchBarToggled (hidden) {
       this.searchBarHidden = hidden
     },
     openSettingsModal () {
-      this.$store.dispatch('openSettingsModal')
+      this.$store.dispatch('openSettingsModal', 'user')
+    },
+    openAdminModal () {
+      this.$store.dispatch('openSettingsModal', 'admin')
     }
   }
 }

src/components/desktop_nav/desktop_nav.scss

@@ -1,14 +1,13 @@
-@import '../../_variables.scss';
-
 .DesktopNav {
   width: 100%;
+  z-index: var(--ZI_navbar);
 
   input {
     color: var(--inputTopbarText, var(--inputText));
   }
 
   a {
-    color: var(--topBarLink, $fallback--link);
+    color: var(--link);
   }
 
   .inner-nav {
@@ -22,34 +21,38 @@
     max-width: 980px;
   }
 
+  &.-column-stretch .inner-nav {
+    --miniColumn: 25rem;
+    --maxiColumn: 45rem;
+    --columnGap: 1em;
+
+    max-width:
+      calc(
+        var(--sidebarColumnWidth, var(--miniColumn)) +
+        var(--contentColumnWidth, var(--maxiColumn)) +
+        var(--columnGap)
+      );
+  }
+
   &.-logoLeft .inner-nav {
     grid-template-columns: auto 2fr 2fr;
     grid-template-areas: "logo sitename actions";
   }
 
+  &.-column-stretch.-wide .inner-nav {
+    max-width:
+      calc(
+        var(--sidebarColumnWidth, var(--miniColumn)) +
+        var(--contentColumnWidth, var(--maxiColumn)) +
+        var(--notifsColumnWidth, var(--miniColumn)) +
+        var(--columnGap)
+      );
+  }
+
   .button-default {
-    &, svg {
-      color: $fallback--text;
-      color: var(--btnTopBarText, $fallback--text);
-    }
-
-    &:active {
-      background-color: $fallback--fg;
-      background-color: var(--btnPressedTopBar, $fallback--fg);
-      color: $fallback--text;
-      color: var(--btnPressedTopBarText, $fallback--text);
-    }
-
-    &:disabled {
-      color: $fallback--text;
-      color: var(--btnDisabledTopBarText, $fallback--text);
-    }
-
-    &.toggled {
-      color: $fallback--text;
-      color: var(--btnToggledTopBarText, $fallback--text);
-      background-color: $fallback--fg;
-      background-color: var(--btnToggledTopBar, $fallback--fg)
+    &,
+    svg {
+      color: var(--text);
     }
   }
 
@@ -61,6 +64,7 @@
     transition-duration: 100ms;
 
     @media all and (min-width: 800px) {
+      /* stylelint-disable-next-line declaration-no-important */
       opacity: 1 !important;
     }
 
@@ -68,8 +72,7 @@
       mask-repeat: no-repeat;
       mask-position: center;
       mask-size: contain;
-      background-color: $fallback--fg;
-      background-color: var(--topBarText, $fallback--fg);
+      background-color: var(--text);
       position: absolute;
       top: 0;
       bottom: 0;
@@ -90,8 +93,7 @@
     text-align: center;
 
     .svg-inline--fa {
-      color: $fallback--link;
-      color: var(--topBarLink, $fallback--link);
+      color: var(--link);
     }
   }
 
@@ -116,4 +118,8 @@
       text-align: right;
     }
   }
+
+  .spacer {
+    width: 1em;
+  }
 }

src/components/desktop_nav/desktop_nav.vue

@@ -20,6 +20,7 @@
         class="logo"
         :to="{ name: 'root' }"
         :style="logoBgStyle"
+        :title="sitename"
       >
         <div
           class="mask"
@@ -38,43 +39,55 @@
         />
         <button
           class="button-unstyled nav-icon"
+          :title="$t('nav.preferences')"
           @click.stop="openSettingsModal"
         >
           <FAIcon
             fixed-width
             class="fa-scale-110 fa-old-padding"
             icon="cog"
-            :title="$t('nav.preferences')"
           />
         </button>
-        <a
+        <button
           v-if="currentUser && currentUser.role === 'admin'"
-          href="/pleroma/admin/#/login-pleroma"
-          class="nav-icon"
+          class="button-unstyled nav-icon"
           target="_blank"
-          @click.stop
+          :title="$t('nav.administration')"
+          @click.stop="openAdminModal"
         >
           <FAIcon
             fixed-width
             class="fa-scale-110 fa-old-padding"
             icon="tachometer-alt"
-            :title="$t('nav.administration')"
           />
-        </a>
+        </button>
+        <span class="spacer" />
         <button
           v-if="currentUser"
           class="button-unstyled nav-icon"
-          @click.prevent="logout"
+          :title="$t('login.logout')"
+          @click.stop.prevent="logout"
         >
           <FAIcon
             fixed-width
             class="fa-scale-110 fa-old-padding"
             icon="sign-out-alt"
-            :title="$t('login.logout')"
           />
         </button>
       </div>
     </div>
+    <teleport to="#modal">
+      <confirm-modal
+        v-if="showingConfirmLogout"
+        :title="$t('login.logout_confirm_title')"
+        :confirm-text="$t('login.logout_confirm_accept_button')"
+        :cancel-text="$t('login.logout_confirm_cancel_button')"
+        @accepted="doLogout"
+        @cancelled="hideConfirmLogout"
+      >
+        {{ $t('login.logout_confirm') }}
+      </confirm-modal>
+    </teleport>
   </nav>
 </template>
 <script src="./desktop_nav.js"></script>

src/components/dialog_modal/dialog_modal.vue

@@ -8,11 +8,11 @@
       @click.stop=""
     >
       <div class="panel-heading dialog-modal-heading">
-        <div class="title">
+        <h1 class="title">
           <slot name="header" />
-        </div>
+        </h1>
       </div>
-      <div class="dialog-modal-content">
+      <div class="panel-body dialog-modal-content">
         <slot name="default" />
       </div>
       <div class="dialog-modal-footer user-interactions panel-footer">
@@ -25,8 +25,6 @@
 <script src="./dialog_modal.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-
 // TODO: unify with other modals.
 .dark-overlay {
   &::before {
@@ -38,8 +36,8 @@
     position: fixed;
     right: 0;
     top: 0;
-    background: rgba(27,31,35,.5);
-    z-index: 99;
+    background: rgb(27 31 35 / 50%);
+    z-index: 2000;
   }
 }
 
@@ -51,11 +49,9 @@
   margin: 15vh auto;
   position: fixed;
   transform: translateX(-50%);
-  z-index: 999;
+  z-index: 2001;
   cursor: default;
   display: block;
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
 
   .dialog-modal-heading {
     .title {
@@ -65,25 +61,20 @@
 
   .dialog-modal-content {
     margin: 0;
-    padding: 1rem 1rem;
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
+    padding: 1rem;
     white-space: normal;
   }
 
   .dialog-modal-footer {
     margin: 0;
-    padding: .5em .5em;
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
-    border-top: 1px solid $fallback--border;
-    border-top: 1px solid var(--border, $fallback--border);
+    padding: 0.5em;
+    border-top: 1px solid var(--border);
     display: flex;
     justify-content: flex-end;
 
     button {
       width: auto;
-      margin-left: .5rem;
+      margin-left: 0.5rem;
     }
   }
 }

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>

src/components/edit_status_modal/edit_status_modal.js

@@ -0,0 +1,75 @@
+import PostStatusForm from '../post_status_form/post_status_form.vue'
+import Modal from '../modal/modal.vue'
+import statusPosterService from '../../services/status_poster/status_poster.service.js'
+import get from 'lodash/get'
+
+const EditStatusModal = {
+  components: {
+    PostStatusForm,
+    Modal
+  },
+  data () {
+    return {
+      resettingForm: false
+    }
+  },
+  computed: {
+    isLoggedIn () {
+      return !!this.$store.state.users.currentUser
+    },
+    modalActivated () {
+      return this.$store.state.editStatus.modalActivated
+    },
+    isFormVisible () {
+      return this.isLoggedIn && !this.resettingForm && this.modalActivated
+    },
+    params () {
+      return this.$store.state.editStatus.params || {}
+    }
+  },
+  watch: {
+    params (newVal, oldVal) {
+      if (get(newVal, 'statusId') !== get(oldVal, 'statusId')) {
+        this.resettingForm = true
+        this.$nextTick(() => {
+          this.resettingForm = false
+        })
+      }
+    },
+    isFormVisible (val) {
+      if (val) {
+        this.$nextTick(() => this.$el && this.$el.querySelector('textarea').focus())
+      }
+    }
+  },
+  methods: {
+    doEditStatus ({ status, spoilerText, sensitive, media, contentType, poll }) {
+      const params = {
+        store: this.$store,
+        statusId: this.$store.state.editStatus.params.statusId,
+        status,
+        spoilerText,
+        sensitive,
+        poll,
+        media,
+        contentType
+      }
+
+      return statusPosterService.editStatus(params)
+        .then((data) => {
+          return data
+        })
+        .catch((err) => {
+          console.error('Error editing status', err)
+          return {
+            error: err.message
+          }
+        })
+    },
+    closeModal () {
+      this.$store.dispatch('closeEditStatusModal')
+    }
+  }
+}
+
+export default EditStatusModal

src/components/edit_status_modal/edit_status_modal.vue

@@ -0,0 +1,51 @@
+<template>
+  <Modal
+    v-if="isFormVisible"
+    class="edit-form-modal-view"
+    @backdropClicked="closeModal"
+  >
+    <div class="edit-form-modal-panel panel">
+      <div class="panel-heading">
+        <h1 class="title">
+          {{ $t('post_status.edit_status') }}
+        </h1>
+      </div>
+      <PostStatusForm
+        class="panel-body"
+        v-bind="params"
+        :post-handler="doEditStatus"
+        :disable-polls="true"
+        :disable-visibility-selector="true"
+        @posted="closeModal"
+      />
+    </div>
+  </Modal>
+</template>
+
+<script src="./edit_status_modal.js"></script>
+
+<style lang="scss">
+.modal-view.edit-form-modal-view {
+  align-items: flex-start;
+}
+
+.edit-form-modal-panel {
+  flex-shrink: 0;
+  margin-top: 25%;
+  margin-bottom: 2em;
+  width: 100%;
+  max-width: 700px;
+
+  @media (orientation: landscape) {
+    margin-top: 8%;
+  }
+
+  .form-bottom-left {
+    max-width: 6.5em;
+
+    .emoji-icon {
+      justify-content: right;
+    }
+  }
+}
+</style>

src/components/emoji_input/emoji_input.js

@@ -1,8 +1,12 @@
 import Completion from '../../services/completion/completion.js'
+import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import EmojiPicker from '../emoji_picker/emoji_picker.vue'
+import Popover from 'src/components/popover/popover.vue'
+import ScreenReaderNotice from 'src/components/screen_reader_notice/screen_reader_notice.vue'
+import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
 import { take } from 'lodash'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
-
+import { ensureFinalFallback } from '../../i18n/languages.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faSmileBeam
@@ -107,47 +111,134 @@ const EmojiInput = {
   },
   data () {
     return {
+      randomSeed: genRandomSeed(),
       input: undefined,
-      highlighted: 0,
+      caretEl: undefined,
+      highlighted: -1,
       caret: 0,
       focused: false,
       blurTimeout: null,
-      showPicker: false,
       temporarilyHideSuggestions: false,
-      keepOpen: false,
       disableClickOutside: false,
-      suggestions: []
+      suggestions: [],
+      overlayStyle: {},
+      pickerShown: false
     }
   },
   components: {
-    EmojiPicker
+    Popover,
+    EmojiPicker,
+    UnicodeDomainIndicator,
+    ScreenReaderNotice
   },
   computed: {
     padEmoji () {
       return this.$store.getters.mergedConfig.padEmoji
     },
+    defaultCandidateIndex () {
+      return this.$store.getters.mergedConfig.autocompleteSelect ? 0 : -1
+    },
+    preText () {
+      return this.modelValue.slice(0, this.caret)
+    },
+    postText () {
+      return this.modelValue.slice(this.caret)
+    },
     showSuggestions () {
       return this.focused &&
         this.suggestions &&
         this.suggestions.length > 0 &&
-        !this.showPicker &&
+        !this.pickerShown &&
         !this.temporarilyHideSuggestions
     },
     textAtCaret () {
-      return (this.wordAtCaret || {}).word || ''
+      return this.wordAtCaret?.word
     },
     wordAtCaret () {
       if (this.modelValue && this.caret) {
         const word = Completion.wordAtPosition(this.modelValue, this.caret - 1) || {}
         return word
       }
+    },
+    languages () {
+      return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)
+    },
+    maybeLocalizedEmojiNamesAndKeywords () {
+      return emoji => {
+        const names = [emoji.displayText]
+        const keywords = []
+
+        if (emoji.displayTextI18n) {
+          names.push(this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args))
+        }
+
+        if (emoji.annotations) {
+          this.languages.forEach(lang => {
+            names.push(emoji.annotations[lang]?.name)
+
+            keywords.push(...(emoji.annotations[lang]?.keywords || []))
+          })
+        }
+
+        return {
+          names: names.filter(k => k),
+          keywords: keywords.filter(k => k)
+        }
+      }
+    },
+    maybeLocalizedEmojiName () {
+      return emoji => {
+        if (!emoji.annotations) {
+          return emoji.displayText
+        }
+
+        if (emoji.displayTextI18n) {
+          return this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args)
+        }
+
+        for (const lang of this.languages) {
+          if (emoji.annotations[lang]?.name) {
+            return emoji.annotations[lang].name
+          }
+        }
+
+        return emoji.displayText
+      }
+    },
+    onInputScroll () {
+      this.$refs.hiddenOverlay.scrollTo({
+        top: this.input.scrollTop,
+        left: this.input.scrollLeft
+      })
+    },
+    suggestionListId () {
+      return `suggestions-${this.randomSeed}`
+    },
+    suggestionItemId () {
+      return (index) => `suggestion-item-${index}-${this.randomSeed}`
     }
   },
   mounted () {
-    const { root } = this.$refs
+    const { root, hiddenOverlayCaret, suggestorPopover } = this.$refs
     const input = root.querySelector('.emoji-input > input') || root.querySelector('.emoji-input > textarea')
     if (!input) return
     this.input = input
+    this.caretEl = hiddenOverlayCaret
+    if (suggestorPopover.setAnchorEl) {
+      suggestorPopover.setAnchorEl(this.caretEl) // unit test compat
+      this.$refs.picker.setAnchorEl(this.caretEl)
+    } else {
+      console.warn('setAnchorEl not found, are we in a unit test?')
+    }
+    const style = getComputedStyle(this.input)
+    this.overlayStyle.padding = style.padding
+    this.overlayStyle.border = style.border
+    this.overlayStyle.margin = style.margin
+    this.overlayStyle.lineHeight = style.lineHeight
+    this.overlayStyle.fontFamily = style.fontFamily
+    this.overlayStyle.fontSize = style.fontSize
+    this.overlayStyle.wordWrap = style.wordWrap
+    this.overlayStyle.whiteSpace = style.whiteSpace
     this.resize()
     input.addEventListener('blur', this.onBlur)
     input.addEventListener('focus', this.onFocus)
@@ -157,6 +248,7 @@ const EmojiInput = {
     input.addEventListener('click', this.onClickInput)
     input.addEventListener('transitionend', this.onTransition)
     input.addEventListener('input', this.onInput)
+    input.addEventListener('scroll', this.onInputScroll)
   },
   unmounted () {
     const { input } = this
@@ -169,46 +261,48 @@ const EmojiInput = {
       input.removeEventListener('click', this.onClickInput)
       input.removeEventListener('transitionend', this.onTransition)
       input.removeEventListener('input', this.onInput)
+      input.removeEventListener('scroll', this.onInputScroll)
     }
   },
   watch: {
-    showSuggestions: function (newValue) {
+    showSuggestions: function (newValue, oldValue) {
       this.$emit('shown', newValue)
+      if (newValue) {
+        this.$refs.suggestorPopover.showPopover()
+      } else {
+        this.$refs.suggestorPopover.hidePopover()
+      }
     },
     textAtCaret: async function (newWord) {
+      if (newWord === undefined) return
       const firstchar = newWord.charAt(0)
-      this.suggestions = []
-      if (newWord === firstchar) return
-      const matchedSuggestions = await this.suggest(newWord)
+      if (newWord === firstchar) {
+        this.suggestions = []
+        return
+      }
+      const matchedSuggestions = await this.suggest(newWord, this.maybeLocalizedEmojiNamesAndKeywords)
       // Async: cancel if textAtCaret has changed during wait
-      if (this.textAtCaret !== newWord) return
-      if (matchedSuggestions.length <= 0) return
+      if (this.textAtCaret !== newWord || matchedSuggestions.length <= 0) {
+        this.suggestions = []
+        return
+      }
       this.suggestions = take(matchedSuggestions, 5)
         .map(({ imageUrl, ...rest }) => ({
           ...rest,
           img: imageUrl || ''
         }))
-    },
-    suggestions: {
-      handler (newValue) {
-        this.$nextTick(this.resize)
-      },
-      deep: true
+      this.highlighted = this.defaultCandidateIndex
+      this.$refs.screenReaderNotice.announce(
+        this.$tc('tool_tip.autocomplete_available',
+          this.suggestions.length,
+          { number: this.suggestions.length }))
     }
   },
   methods: {
-    focusPickerInput () {
-      const pickerEl = this.$refs.picker.$el
-      if (!pickerEl) return
-      const pickerInput = pickerEl.querySelector('input')
-      if (pickerInput) pickerInput.focus()
-    },
     triggerShowPicker () {
-      this.showPicker = true
-      this.$refs.picker.startEmojiLoad()
       this.$nextTick(() => {
+        this.$refs.picker.showPicker()
         this.scrollIntoView()
-        this.focusPickerInput()
       })
       // This temporarily disables "click outside" handler
       // since external trigger also means click originates
@@ -220,11 +314,12 @@ const EmojiInput = {
     },
     togglePicker () {
       this.input.focus()
-      this.showPicker = !this.showPicker
-      if (this.showPicker) {
+      if (!this.pickerShown) {
         this.scrollIntoView()
+        this.$refs.picker.showPicker()
         this.$refs.picker.startEmojiLoad()
-        this.$nextTick(this.focusPickerInput)
+      } else {
+        this.$refs.picker.hidePicker()
       }
     },
     replace (replacement) {
@@ -261,7 +356,6 @@ const EmojiInput = {
         spaceAfter,
         after
       ].join('')
-      this.keepOpen = keepOpen
       this.$emit('update:modelValue', newValue)
       const position = this.caret + (insertion + spaceAfter + spaceBefore).length
       if (!keepOpen) {
@@ -298,30 +392,31 @@ const EmojiInput = {
     },
     cycleBackward (e) {
       const len = this.suggestions.length || 0
-      if (len > 1) {
-        this.highlighted -= 1
-        if (this.highlighted < 0) {
-          this.highlighted = this.suggestions.length - 1
-        }
+
+      this.highlighted -= 1
+      if (this.highlighted === -1) {
+        this.input.focus()
+      } else if (this.highlighted < -1) {
+        this.highlighted = len - 1
+      }
+      if (len > 0) {
         e.preventDefault()
-      } else {
-        this.highlighted = 0
       }
     },
     cycleForward (e) {
       const len = this.suggestions.length || 0
-      if (len > 1) {
-        this.highlighted += 1
-        if (this.highlighted >= len) {
-          this.highlighted = 0
-        }
+
+      this.highlighted += 1
+      if (this.highlighted >= len) {
+        this.highlighted = -1
+        this.input.focus()
+      }
+      if (len > 0) {
         e.preventDefault()
-      } else {
-        this.highlighted = 0
       }
     },
     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
@@ -361,8 +456,11 @@ const EmojiInput = {
         }
       })
     },
-    onTransition (e) {
-      this.resize()
+    onPickerShown () {
+      this.pickerShown = true
+    },
+    onPickerClosed () {
+      this.pickerShown = false
     },
     onBlur (e) {
       // Clicking on any suggestion removes focus from autocomplete,
@@ -370,7 +468,6 @@ const EmojiInput = {
       this.blurTimeout = setTimeout(() => {
         this.focused = false
         this.setCaret(e)
-        this.resize()
       }, 200)
     },
     onClick (e, suggestion) {
@@ -382,18 +479,13 @@ const EmojiInput = {
         this.blurTimeout = null
       }
 
-      if (!this.keepOpen) {
-        this.showPicker = false
-      }
       this.focused = true
       this.setCaret(e)
-      this.resize()
       this.temporarilyHideSuggestions = false
     },
     onKeyUp (e) {
       const { key } = e
       this.setCaret(e)
-      this.resize()
 
       // Setting hider in keyUp to prevent suggestions from blinking
       // when moving away from suggested spot
@@ -405,7 +497,6 @@ const EmojiInput = {
     },
     onPaste (e) {
       this.setCaret(e)
-      this.resize()
     },
     onKeyDown (e) {
       const { ctrlKey, shiftKey, key } = e
@@ -450,58 +541,31 @@ const EmojiInput = {
           this.input.focus()
         }
       }
-
-      this.showPicker = false
-      this.resize()
     },
     onInput (e) {
-      this.showPicker = false
       this.setCaret(e)
-      this.resize()
       this.$emit('update:modelValue', e.target.value)
     },
-    onClickInput (e) {
-      this.showPicker = false
-    },
-    onClickOutside (e) {
-      if (this.disableClickOutside) return
-      this.showPicker = false
-    },
     onStickerUploaded (e) {
-      this.showPicker = false
       this.$emit('sticker-uploaded', e)
     },
     onStickerUploadFailed (e) {
-      this.showPicker = false
       this.$emit('sticker-upload-Failed', e)
     },
     setCaret ({ target: { selectionStart } }) {
       this.caret = selectionStart
+      this.$nextTick(() => {
+        this.$refs.suggestorPopover.updateStyles()
+      })
     },
     resize () {
-      const panel = this.$refs.panel
-      if (!panel) return
-      const picker = this.$refs.picker.$el
-      const panelBody = this.$refs['panel-body']
-      const { offsetHeight, offsetTop } = this.input
-      const offsetBottom = offsetTop + offsetHeight
-
-      this.setPlacement(panelBody, panel, offsetBottom)
-      this.setPlacement(picker, picker, offsetBottom)
     },
-    setPlacement (container, target, offsetBottom) {
-      if (!container || !target) return
-
-      target.style.top = offsetBottom + 'px'
-      target.style.bottom = 'auto'
-
-      if (this.placement === 'top' || (this.placement === 'auto' && this.overflowsBottom(container))) {
-        target.style.top = 'auto'
-        target.style.bottom = this.input.offsetHeight + 'px'
+    autoCompleteItemLabel (suggestion) {
+      if (suggestion.user) {
+        return suggestion.displayText + ' ' + suggestion.detailText
+      } else {
+        return this.maybeLocalizedEmojiName(suggestion)
       }
-    },
-    overflowsBottom (el) {
-      return el.getBoundingClientRect().bottom > window.innerHeight
     }
   }
 }

src/components/emoji_input/emoji_input.vue

@@ -1,16 +1,40 @@
 <template>
   <div
     ref="root"
-    v-click-outside="onClickOutside"
-    class="emoji-input"
+    class="input emoji-input"
     :class="{ 'with-picker': !hideEmojiButton }"
   >
-    <slot />
+    <slot
+      :id="'textbox-' + randomSeed"
+      :aria-owns="suggestionListId"
+      aria-autocomplete="both"
+      :aria-expanded="showSuggestions"
+      :aria-activedescendant="(!showSuggestions || highlighted === -1) ? '' : suggestionItemId(highlighted)"
+    />
+    <!-- TODO: make the 'x' disappear if at the end maybe? -->
+    <div
+      ref="hiddenOverlay"
+      class="hidden-overlay"
+      :style="overlayStyle"
+      :aria-hidden="true"
+    >
+      <span>{{ preText }}</span>
+      <span
+        ref="hiddenOverlayCaret"
+        class="caret"
+      >x</span>
+      <span>{{ postText }}</span>
+    </div>
+    <screen-reader-notice
+      ref="screenReaderNotice"
+      aria-live="assertive"
+    />
     <template v-if="enableEmojiPicker">
       <button
         v-if="!hideEmojiButton"
         class="button-unstyled emoji-picker-icon"
         type="button"
+        :title="$t('emoji.add_emoji')"
         @click.prevent="togglePicker"
       >
         <FAIcon :icon="['far', 'smile-beam']" />
@@ -18,168 +42,186 @@
       <EmojiPicker
         v-if="enableEmojiPicker"
         ref="picker"
-        :class="{ hide: !showPicker }"
         :enable-sticker-picker="enableStickerPicker"
         class="emoji-picker-panel"
         @emoji="insert"
         @sticker-uploaded="onStickerUploaded"
         @sticker-upload-failed="onStickerUploadFailed"
+        @show="onPickerShown"
+        @close="onPickerClosed"
       />
     </template>
-    <div
-      ref="panel"
+    <Popover
+      ref="suggestorPopover"
       class="autocomplete-panel"
-      :class="{ hide: !showSuggestions }"
+      placement="bottom"
+      :trigger-attrs="{ 'aria-hidden': true }"
     >
-      <div
-        ref="panel-body"
-        class="autocomplete-panel-body"
-      >
+      <template #content>
         <div
-          v-for="(suggestion, index) in suggestions"
-          :key="index"
-          class="autocomplete-item"
-          :class="{ highlighted: index === highlighted }"
-          @click.stop.prevent="onClick($event, suggestion)"
+          :id="suggestionListId"
+          ref="panel-body"
+          class="autocomplete-panel-body"
+          role="listbox"
         >
-          <span class="image">
-            <img
-              v-if="suggestion.img"
-              :src="suggestion.img"
-            >
-            <span v-else>{{ suggestion.replacement }}</span>
-          </span>
-          <div class="label">
-            <span class="displayText">{{ suggestion.displayText }}</span>
-            <span class="detailText">{{ suggestion.detailText }}</span>
+          <div
+            v-for="(suggestion, index) in suggestions"
+            :id="suggestionItemId(index)"
+            :key="index"
+            class="menu-item autocomplete-item"
+            role="option"
+            :class="{ '-active': index === highlighted }"
+            :aria-label="autoCompleteItemLabel(suggestion)"
+            :aria-selected="index === highlighted"
+            @click.stop.prevent="onClick($event, suggestion)"
+          >
+            <span class="image">
+              <img
+                v-if="suggestion.img"
+                :src="suggestion.img"
+              >
+              <span v-else>{{ suggestion.replacement }}</span>
+            </span>
+            <div class="label">
+              <span
+                v-if="suggestion.user"
+                class="displayText"
+              >
+                {{ suggestion.displayText }}<UnicodeDomainIndicator
+                  :user="suggestion.user"
+                  :at="false"
+                />
+              </span>
+              <span
+                v-if="!suggestion.user"
+                class="displayText"
+              >
+                {{ maybeLocalizedEmojiName(suggestion) }}
+              </span>
+              <span class="detailText">{{ suggestion.detailText }}</span>
+            </div>
           </div>
         </div>
-      </div>
-    </div>
+      </template>
+    </Popover>
   </div>
 </template>
 
 <script src="./emoji_input.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-
-.emoji-input {
+.input.emoji-input {
+  padding: 0;
   display: flex;
   flex-direction: column;
   position: relative;
 
-  &.with-picker input {
-    padding-right: 30px;
-  }
-
   .emoji-picker-icon {
     position: absolute;
     top: 0;
     right: 0;
-    margin: .2em .25em;
+    margin: 0.2em 0.25em;
     font-size: 1.3em;
     cursor: pointer;
     line-height: 24px;
 
     &:hover i {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
+      color: var(--text);
     }
   }
+
   .emoji-picker-panel {
     position: absolute;
     z-index: 20;
     margin-top: 2px;
 
     &.hide {
-      display: none
+      display: none;
     }
   }
 
-  .autocomplete {
-    &-panel {
-      position: absolute;
-      z-index: 20;
-      margin-top: 2px;
-
-      &.hide {
-        display: none
-      }
-
-      &-body {
-        margin: 0 0.5em 0 0.5em;
-        border-radius: $fallback--tooltipRadius;
-        border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-        box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
-        box-shadow: var(--popupShadow);
-        min-width: 75%;
-        background-color: $fallback--bg;
-        background-color: var(--popover, $fallback--bg);
-        color: $fallback--link;
-        color: var(--popoverText, $fallback--link);
-        --faint: var(--popoverFaintText, $fallback--faint);
-        --faintLink: var(--popoverFaintLink, $fallback--faint);
-        --lightText: var(--popoverLightText, $fallback--lightText);
-        --postLink: var(--popoverPostLink, $fallback--link);
-        --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
-        --icon: var(--popoverIcon, $fallback--icon);
-      }
-    }
-
-    &-item {
-      display: flex;
-      cursor: pointer;
-      padding: 0.2em 0.4em;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.4);
-      height: 32px;
-
-      .image {
-        width: 32px;
-        height: 32px;
-        line-height: 32px;
-        text-align: center;
-        font-size: 32px;
-
-        margin-right: 4px;
-
-        img {
-          width: 32px;
-          height: 32px;
-          object-fit: contain;
-        }
-      }
-
-      .label {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin: 0 0.1em 0 0.2em;
-
-        .displayText {
-          line-height: 1.5;
-        }
-
-        .detailText {
-          font-size: 9px;
-          line-height: 9px;
-        }
-      }
-
-      &.highlighted {
-        background-color: $fallback--fg;
-        background-color: var(--selectedMenuPopover, $fallback--fg);
-        color: var(--selectedMenuPopoverText, $fallback--text);
-        --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
-        --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-        --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
-        --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-      }
-    }
-  }
-
-  input, textarea {
+  input,
+  textarea {
     flex: 1 0 auto;
+    color: inherit;
+    /* stylelint-disable-next-line declaration-no-important */
+    background: none !important;
+    box-shadow: none;
+    border: none;
+    outline: none;
+  }
+
+  &.with-picker input {
+    padding-right: 30px;
+  }
+
+  .hidden-overlay {
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    overflow: hidden;
+
+    /* DEBUG STUFF */
+    color: red;
+
+    /* set opacity to non-zero to see the overlay */
+
+    .caret {
+      width: 0;
+      margin-right: calc(-1ch - 1px);
+      border: 1px solid red;
+    }
+  }
+}
+
+.autocomplete {
+  &-panel {
+    position: absolute;
+  }
+
+  &-item.menu-item {
+    display: flex;
+    padding-top: 0;
+    padding-bottom: 0;
+
+    .image {
+      width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+      height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+      line-height: var(--__line-height);
+      text-align: center;
+      margin-right: var(--__horizontal-gap);
+
+      img {
+        width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+        height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+        object-fit: contain;
+      }
+
+      span {
+        font-size: var(--__line-height);
+        line-height: var(--__line-height);
+      }
+    }
+
+    .label {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      margin: 0 0.1em 0 0.2em;
+
+      .displayText {
+        line-height: 1.5;
+      }
+
+      .detailText {
+        font-size: 9px;
+        line-height: 9px;
+      }
+    }
   }
 }
 </style>

src/components/emoji_input/suggestor.js

@@ -2,7 +2,7 @@
  * suggest - generates a suggestor function to be used by emoji-input
  * data: object providing source information for specific types of suggestions:
  * data.emoji - optional, an array of all emoji available i.e.
- *   (state.instance.emoji + state.instance.customEmoji)
+ *   (getters.standardEmojiList + state.instance.customEmoji)
  * data.users - optional, an array of all known users
  * updateUsersList - optional, a function to search and append to users
  *
@@ -13,10 +13,10 @@
 export default data => {
   const emojiCurry = suggestEmoji(data.emoji)
   const usersCurry = data.store && suggestUsers(data.store)
-  return input => {
+  return (input, nameKeywordLocalizer) => {
     const firstChar = input[0]
     if (firstChar === ':' && data.emoji) {
-      return emojiCurry(input)
+      return emojiCurry(input, nameKeywordLocalizer)
     }
     if (firstChar === '@' && usersCurry) {
       return usersCurry(input)
@@ -25,34 +25,34 @@ export default data => {
   }
 }
 
-export const suggestEmoji = emojis => input => {
+export const suggestEmoji = emojis => (input, nameKeywordLocalizer) => {
   const noPrefix = input.toLowerCase().substr(1)
   return emojis
-    .filter(({ displayText }) => displayText.toLowerCase().match(noPrefix))
-    .sort((a, b) => {
-      let aScore = 0
-      let bScore = 0
+    .map(emoji => ({ ...emoji, ...nameKeywordLocalizer(emoji) }))
+    .filter((emoji) => (emoji.names.concat(emoji.keywords)).filter(kw => kw.toLowerCase().match(noPrefix)).length)
+    .map(k => {
+      let score = 0
 
       // An exact match always wins
-      aScore += a.displayText.toLowerCase() === noPrefix ? 200 : 0
-      bScore += b.displayText.toLowerCase() === noPrefix ? 200 : 0
+      score += Math.max(...k.names.map(name => name.toLowerCase() === noPrefix ? 200 : 0), 0)
 
       // Prioritize custom emoji a lot
-      aScore += a.imageUrl ? 100 : 0
-      bScore += b.imageUrl ? 100 : 0
+      score += k.imageUrl ? 100 : 0
 
       // Prioritize prefix matches somewhat
-      aScore += a.displayText.toLowerCase().startsWith(noPrefix) ? 10 : 0
-      bScore += b.displayText.toLowerCase().startsWith(noPrefix) ? 10 : 0
+      score += Math.max(...k.names.map(kw => kw.toLowerCase().startsWith(noPrefix) ? 10 : 0), 0)
 
       // Sort by length
-      aScore -= a.displayText.length
-      bScore -= b.displayText.length
+      score -= k.displayText.length
 
+      k.score = score
+      return k
+    })
+    .sort((a, b) => {
       // Break ties alphabetically
       const alphabetically = a.displayText > b.displayText ? 0.5 : -0.5
 
-      return bScore - aScore + alphabetically
+      return b.score - a.score + alphabetically
     })
 }
 
@@ -94,8 +94,9 @@ export const suggestUsers = ({ dispatch, state }) => {
 
     const newSuggestions = state.users.users.filter(
       user =>
-        user.screen_name.toLowerCase().startsWith(noPrefix) ||
-        user.name.toLowerCase().startsWith(noPrefix)
+        user.screen_name && user.name && (
+          user.screen_name.toLowerCase().startsWith(noPrefix) ||
+            user.name.toLowerCase().startsWith(noPrefix))
     ).slice(0, 20).sort((a, b) => {
       let aScore = 0
       let bScore = 0
@@ -116,11 +117,12 @@ export const suggestUsers = ({ dispatch, state }) => {
 
       return diff + nameAlphabetically + screenNameAlphabetically
       /* eslint-disable camelcase */
-    }).map(({ screen_name, screen_name_ui, name, profile_image_url_original }) => ({
-      displayText: screen_name_ui,
-      detailText: name,
-      imageUrl: profile_image_url_original,
-      replacement: '@' + screen_name + ' '
+    }).map((user) => ({
+      user,
+      displayText: user.screen_name_ui,
+      detailText: user.name,
+      imageUrl: user.profile_image_url_original,
+      replacement: '@' + user.screen_name + ' '
     }))
     /* eslint-enable camelcase */
 

src/components/emoji_picker/emoji_picker.js

@@ -1,33 +1,76 @@
 import { defineAsyncComponent } from 'vue'
 import Checkbox from '../checkbox/checkbox.vue'
+import Popover from 'src/components/popover/popover.vue'
+import StillImage from '../still-image/still-image.vue'
+import { ensureFinalFallback } from '../../i18n/languages.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBoxOpen,
   faStickyNote,
-  faSmileBeam
+  faSmileBeam,
+  faSmile,
+  faUser,
+  faPaw,
+  faIceCream,
+  faBus,
+  faBasketballBall,
+  faLightbulb,
+  faCode,
+  faFlag
 } from '@fortawesome/free-solid-svg-icons'
-import { trim } from 'lodash'
+import { debounce, trim, chunk } from 'lodash'
 
 library.add(
   faBoxOpen,
   faStickyNote,
-  faSmileBeam
+  faSmileBeam,
+  faSmile,
+  faUser,
+  faPaw,
+  faIceCream,
+  faBus,
+  faBasketballBall,
+  faLightbulb,
+  faCode,
+  faFlag
 )
 
-// At widest, approximately 20 emoji are visible in a row,
-// loading 3 rows, could be overkill for narrow picker
-const LOAD_EMOJI_BY = 60
+const UNICODE_EMOJI_GROUP_ICON = {
+  'smileys-and-emotion': 'smile',
+  'people-and-body': 'user',
+  'animals-and-nature': 'paw',
+  'food-and-drink': 'ice-cream',
+  'travel-and-places': 'bus',
+  activities: 'basketball-ball',
+  objects: 'lightbulb',
+  symbols: 'code',
+  flags: 'flag'
+}
 
-// When to start loading new batch emoji, in pixels
-const LOAD_EMOJI_MARGIN = 64
+const maybeLocalizedKeywords = (emoji, languages, nameLocalizer) => {
+  const res = [emoji.displayText, nameLocalizer(emoji)]
+  if (emoji.annotations) {
+    languages.forEach(lang => {
+      const keywords = emoji.annotations[lang]?.keywords || []
+      const name = emoji.annotations[lang]?.name
+      res.push(...(keywords.concat([name]).filter(k => k)))
+    })
+  }
+  return res
+}
 
-const filterByKeyword = (list, keyword = '') => {
+const filterByKeyword = (list, keyword = '', languages, nameLocalizer) => {
   if (keyword === '') return list
 
   const keywordLowercase = keyword.toLowerCase()
-  let orderedEmojiList = []
+  const orderedEmojiList = []
   for (const emoji of list) {
-    const indexOfKeyword = emoji.displayText.toLowerCase().indexOf(keywordLowercase)
+    const indices = maybeLocalizedKeywords(emoji, languages, nameLocalizer)
+      .map(k => k.toLowerCase().indexOf(keywordLowercase))
+      .filter(k => k > -1)
+
+    const indexOfKeyword = indices.length ? Math.min(...indices) : -1
+
     if (indexOfKeyword > -1) {
       if (!Array.isArray(orderedEmojiList[indexOfKeyword])) {
         orderedEmojiList[indexOfKeyword] = []
@@ -38,14 +81,35 @@ const filterByKeyword = (list, keyword = '') => {
   return orderedEmojiList.flat()
 }
 
+const getOffset = (elem) => {
+  const style = elem.style.transform
+  const res = /translateY\((\d+)px\)/.exec(style)
+  if (!res) { return 0 }
+  return res[1]
+}
+
+const toHeaderId = id => {
+  return id.replace(/^row-\d+-/, '')
+}
+
 const EmojiPicker = {
   props: {
     enableStickerPicker: {
+      required: false,
+      type: Boolean,
+      default: true
+    },
+    hideCustomEmoji: {
       required: false,
       type: Boolean,
       default: false
     }
   },
+  inject: {
+    popoversZLayer: {
+      default: ''
+    }
+  },
   data () {
     return {
       keyword: '',
@@ -53,16 +117,62 @@ const EmojiPicker = {
       showingStickers: false,
       groupsScrolledClass: 'scrolled-top',
       keepOpen: false,
-      customEmojiBufferSlice: LOAD_EMOJI_BY,
       customEmojiTimeout: null,
-      customEmojiLoadAllConfirmed: false
+      hideCustomEmojiInPicker: false,
+      // Lazy-load only after the first time `showing` becomes true.
+      contentLoaded: false,
+      groupRefs: {},
+      emojiRefs: {},
+      filteredEmojiGroups: [],
+      emojiSize: 0,
+      width: 0
     }
   },
   components: {
     StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
-    Checkbox
+    Checkbox,
+    StillImage,
+    Popover
   },
   methods: {
+    updateEmojiSize () {
+      const css = window.getComputedStyle(this.$refs.popover.$el)
+      const emojiSize = css.getPropertyValue('--emojiSize')
+      const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '')
+      const emojiSizeValue = Number(emojiSize.replace(/[^0-9,.]+/, ''))
+      const fontSize = css.getPropertyValue('font-size').replace(/[^0-9,.]+/, '')
+
+      let emojiSizeReal
+      if (emojiSizeUnit.endsWith('em')) {
+        emojiSizeReal = emojiSizeValue * fontSize
+      } else {
+        emojiSizeReal = emojiSizeValue
+      }
+
+      const fullEmojiSize = emojiSizeReal + (2 * 0.2 * fontSize)
+      this.emojiSize = fullEmojiSize
+    },
+    showPicker () {
+      this.$refs.popover.showPopover()
+      this.$nextTick(() => {
+        this.onShowing()
+      })
+    },
+    hidePicker () {
+      this.$refs.popover.hidePopover()
+    },
+    setAnchorEl (el) {
+      this.$refs.popover.setAnchorEl(el)
+    },
+    setGroupRef (name) {
+      return el => { this.groupRefs[name] = el }
+    },
+    onPopoverShown () {
+      this.$emit('show')
+    },
+    onPopoverClosed () {
+      this.$emit('close')
+    },
     onStickerUploaded (e) {
       this.$emit('sticker-uploaded', e)
     },
@@ -71,23 +181,53 @@ const EmojiPicker = {
     },
     onEmoji (emoji) {
       const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
-      this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
+      if (!this.keepOpen) {
+        this.$refs.popover.hidePopover()
+      }
+      this.$emit('emoji', { insertion: value, insertionUrl: emoji.imageUrl, keepOpen: this.keepOpen })
     },
-    onScroll (e) {
-      const target = (e && e.target) || this.$refs['emoji-groups']
-      this.updateScrolledClass(target)
-      this.scrolledGroup(target)
-      this.triggerLoadMore(target)
+    onScroll (startIndex, endIndex, visibleStartIndex, visibleEndIndex) {
+      const target = this.$refs['emoji-groups'].$el
+      this.scrolledGroup(target, visibleStartIndex, visibleEndIndex)
     },
-    highlight (key) {
-      const ref = this.$refs['group-' + key]
-      const top = ref.offsetTop
-      this.setShowStickers(false)
-      this.activeGroup = key
+    scrolledGroup (target, start, end) {
+      const top = target.scrollTop + 5
       this.$nextTick(() => {
-        this.$refs['emoji-groups'].scrollTop = top + 1
+        this.emojiItems.slice(start, end + 1).forEach(group => {
+          const headerId = toHeaderId(group.id)
+          const ref = this.groupRefs['group-' + group.id]
+          if (!ref) { return }
+          const elem = ref.$el.parentElement
+          if (!elem) { return }
+          if (elem && getOffset(elem) <= top) {
+            this.activeGroup = headerId
+          }
+        })
+        this.scrollHeader()
       })
     },
+    scrollHeader () {
+      // Scroll the active tab's header into view
+      const headerRef = this.groupRefs['group-header-' + this.activeGroup]
+      const left = headerRef.offsetLeft
+      const right = left + headerRef.offsetWidth
+      const headerCont = this.$refs.header
+      const currentScroll = headerCont.scrollLeft
+      const currentScrollRight = currentScroll + headerCont.clientWidth
+      const setScroll = s => { headerCont.scrollLeft = s }
+
+      const margin = 7 // .emoji-tabs-item: padding
+      if (left - margin < currentScroll) {
+        setScroll(left - margin)
+      } else if (right + margin > currentScrollRight) {
+        setScroll(right + margin - headerCont.clientWidth)
+      }
+    },
+    highlight (groupId) {
+      this.setShowStickers(false)
+      const indexInList = this.emojiItems.findIndex(k => k.id === groupId)
+      this.$refs['emoji-groups'].scrollToItem(indexInList)
+    },
     updateScrolledClass (target) {
       if (target.scrollTop <= 5) {
         this.groupsScrolledClass = 'scrolled-top'
@@ -97,74 +237,75 @@ const EmojiPicker = {
         this.groupsScrolledClass = 'scrolled-middle'
       }
     },
-    triggerLoadMore (target) {
-      const ref = this.$refs['group-end-custom']
-      if (!ref) return
-      const bottom = ref.offsetTop + ref.offsetHeight
-
-      const scrollerBottom = target.scrollTop + target.clientHeight
-      const scrollerTop = target.scrollTop
-      const scrollerMax = target.scrollHeight
-
-      // Loads more emoji when they come into view
-      const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
-      // Always load when at the very top in case there's no scroll space yet
-      const atTop = scrollerTop < 5
-      // Don't load when looking at unicode category or at the very bottom
-      const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
-      if (!bottomAboveViewport && (approachingBottom || atTop)) {
-        this.loadEmoji()
-      }
-    },
-    scrolledGroup (target) {
-      const top = target.scrollTop + 5
-      this.$nextTick(() => {
-        this.emojisView.forEach(group => {
-          const ref = this.$refs['group-' + group.id]
-          if (ref.offsetTop <= top) {
-            this.activeGroup = group.id
-          }
-        })
-      })
-    },
-    loadEmoji () {
-      const allLoaded = this.customEmojiBuffer.length === this.filteredEmoji.length
-
-      if (allLoaded) {
-        return
-      }
-
-      this.customEmojiBufferSlice += LOAD_EMOJI_BY
-    },
-    startEmojiLoad (forceUpdate = false) {
-      if (!forceUpdate) {
-        this.keyword = ''
-      }
-      this.$nextTick(() => {
-        this.$refs['emoji-groups'].scrollTop = 0
-      })
-      const bufferSize = this.customEmojiBuffer.length
-      const bufferPrefilledAll = bufferSize === this.filteredEmoji.length
-      if (bufferPrefilledAll && !forceUpdate) {
-        return
-      }
-      this.customEmojiBufferSlice = LOAD_EMOJI_BY
-    },
     toggleStickers () {
       this.showingStickers = !this.showingStickers
     },
     setShowStickers (value) {
       this.showingStickers = value
+    },
+    filterByKeyword (list, keyword) {
+      return filterByKeyword(list, keyword, this.languages, this.maybeLocalizedEmojiName)
+    },
+    onShowing () {
+      const oldContentLoaded = this.contentLoaded
+      this.updateEmojiSize()
+      this.recalculateItemPerRow()
+      this.$nextTick(() => {
+        this.$refs.search.focus()
+      })
+      this.contentLoaded = true
+      this.filteredEmojiGroups = this.getFilteredEmojiGroups()
+      if (!oldContentLoaded) {
+        this.$nextTick(() => {
+          if (this.defaultGroup) {
+            this.highlight(this.defaultGroup)
+          }
+        })
+      }
+    },
+    getFilteredEmojiGroups () {
+      return this.allEmojiGroups
+        .map(group => ({
+          ...group,
+          emojis: this.filterByKeyword(group.emojis, trim(this.keyword))
+        }))
+        .filter(group => group.emojis.length > 0)
+    },
+    recalculateItemPerRow () {
+      this.$nextTick(() => {
+        if (!this.$refs['emoji-groups']) {
+          return
+        }
+        this.width = this.$refs['emoji-groups'].$el.clientWidth
+      })
     }
   },
   watch: {
     keyword () {
-      this.customEmojiLoadAllConfirmed = false
       this.onScroll()
-      this.startEmojiLoad(true)
+      this.debouncedHandleKeywordChange()
+    },
+    allCustomGroups () {
+      this.filteredEmojiGroups = this.getFilteredEmojiGroups()
     }
   },
   computed: {
+    minItemSize () {
+      return this.emojiSize
+    },
+    // used to watch it
+    fontSize () {
+      this.$nextTick(() => {
+        this.updateEmojiSize()
+      })
+      return this.$store.getters.mergedConfig.fontSize
+    },
+    emojiHeight () {
+      return this.emojiSize
+    },
+    itemPerRow () {
+      return this.width ? Math.floor(this.width / this.emojiSize) : 6
+    },
     activeGroupView () {
       return this.showingStickers ? '' : this.activeGroup
     },
@@ -174,39 +315,75 @@ const EmojiPicker = {
       }
       return 0
     },
-    filteredEmoji () {
-      return filterByKeyword(
-        this.$store.state.instance.customEmoji || [],
-        trim(this.keyword)
-      )
+    allCustomGroups () {
+      if (this.hideCustomEmoji || this.hideCustomEmojiInPicker) {
+        return {}
+      }
+      const emojis = this.$store.getters.groupedCustomEmojis
+      if (emojis.unpacked) {
+        emojis.unpacked.text = this.$t('emoji.unpacked')
+      }
+      return emojis
     },
-    customEmojiBuffer () {
-      return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
+    defaultGroup () {
+      return Object.keys(this.allCustomGroups)[0]
     },
-    emojis () {
-      const standardEmojis = this.$store.state.instance.emoji || []
-      const customEmojis = this.customEmojiBuffer
-
-      return [
-        {
-          id: 'custom',
-          text: this.$t('emoji.custom'),
-          icon: 'smile-beam',
-          emojis: customEmojis
-        },
-        {
-          id: 'standard',
-          text: this.$t('emoji.unicode'),
-          icon: 'box-open',
-          emojis: filterByKeyword(standardEmojis, trim(this.keyword))
-        }
-      ]
+    unicodeEmojiGroups () {
+      return this.$store.getters.standardEmojiGroupList.map(group => ({
+        id: `standard-${group.id}`,
+        text: this.$t(`emoji.unicode_groups.${group.id}`),
+        icon: UNICODE_EMOJI_GROUP_ICON[group.id],
+        emojis: group.emojis
+      }))
     },
-    emojisView () {
-      return this.emojis.filter(value => value.emojis.length > 0)
+    allEmojiGroups () {
+      return Object.entries(this.allCustomGroups)
+        .map(([_, v]) => v)
+        .concat(this.unicodeEmojiGroups)
     },
     stickerPickerEnabled () {
       return (this.$store.state.instance.stickers || []).length !== 0
+    },
+    debouncedHandleKeywordChange () {
+      return debounce(() => {
+        this.filteredEmojiGroups = this.getFilteredEmojiGroups()
+      }, 500)
+    },
+    emojiItems () {
+      return this.filteredEmojiGroups.map(group =>
+        chunk(group.emojis, this.itemPerRow)
+          .map((items, index) => ({
+            ...group,
+            id: index === 0 ? group.id : `row-${index}-${group.id}`,
+            emojis: items,
+            isFirstRow: index === 0
+          })))
+        .reduce((a, c) => a.concat(c), [])
+    },
+    languages () {
+      return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)
+    },
+    maybeLocalizedEmojiName () {
+      return emoji => {
+        if (!emoji.annotations) {
+          return emoji.displayText
+        }
+
+        if (emoji.displayTextI18n) {
+          return this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args)
+        }
+
+        for (const lang of this.languages) {
+          if (emoji.annotations[lang]?.name) {
+            return emoji.annotations[lang].name
+          }
+        }
+
+        return emoji.displayText
+      }
+    },
+    isInModal () {
+      return this.popoversZLayer === 'modals'
     }
   }
 }

src/components/emoji_picker/emoji_picker.scss

@@ -1,98 +1,114 @@
-@import '../../_variables.scss';
-
 .emoji-picker {
+  --__emoji-picker-header: 2.2em;
+
+  width: 25em;
+  max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
   display: flex;
   flex-direction: column;
-  position: absolute;
-  right: 0;
-  left: 0;
-  margin: 0 !important;
-  z-index: 100;
-  background-color: $fallback--bg;
-  background-color: var(--popover, $fallback--bg);
-  color: $fallback--link;
-  color: var(--popoverText, $fallback--link);
-  --lightText: var(--popoverLightText, $fallback--faint);
-  --faint: var(--popoverFaintText, $fallback--faint);
-  --faintLink: var(--popoverFaintLink, $fallback--faint);
-  --lightText: var(--popoverLightText, $fallback--lightText);
-  --icon: var(--popoverIcon, $fallback--icon);
+
+  &-header-image {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: var(--__emoji-picker-header);
+    max-width: var(--__emoji-picker-header);
+    height: var(--__emoji-picker-header);
+    max-height: var(--__emoji-picker-header);
+
+    .still-image {
+      width: var(--__emoji-picker-header);
+      max-width: var(--__emoji-picker-header);
+      height: var(--__emoji-picker-header);
+      max-height: var(--__emoji-picker-header);
+      object-fit: contain;
+
+      --_still_image-label-scale: 0.5;
+    }
+  }
 
   .keep-open,
-  .too-many-emoji {
-    padding: 7px;
+  .too-many-emoji,
+  .hide-custom-emoji {
+    padding: 0.5em;
     line-height: normal;
   }
 
+  .hide-custom-emoji {
+    padding-top: 0;
+  }
+
   .too-many-emoji {
     display: flex;
     flex-direction: column;
   }
 
   .keep-open-label {
-    padding: 0 7px;
+    padding: 0 0.5em;
     display: flex;
   }
 
   .heading {
     display: flex;
-    height: 32px;
-    padding: 10px 7px 5px;
+    padding: 0.7em 0.5em 0;
   }
 
   .content {
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
-    min-height: 0px;
+    min-height: 0;
   }
 
   .emoji-tabs {
     flex-grow: 1;
-  }
-
-  .emoji-groups {
-    min-height: 200px;
+    display: flex;
+    flex-flow: row nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
   }
 
   .additional-tabs {
+    display: flex;
     border-left: 1px solid;
-    border-left-color: $fallback--icon;
-    border-left-color: var(--icon, $fallback--icon);
-    padding-left: 7px;
+    border-left-color: var(--border);
+    padding-left: 0.5em;
     flex: 0 0 auto;
   }
 
   .additional-tabs,
   .emoji-tabs {
-    display: block;
-    min-width: 0;
     flex-basis: auto;
-    flex-shrink: 1;
+    display: flex;
+    align-content: center;
+    scrollbar-width: thin;
 
     &-item {
-      padding: 0 7px;
+      padding: 0 0.5em;
       cursor: pointer;
-      font-size: 1.85em;
+      width: var(--__emoji-picker-header);
+      max-width: var(--__emoji-picker-header);
+      height: var(--__emoji-picker-header);
+      max-height: var(--__emoji-picker-header);
+      display: flex;
+      align-items: center;
+
+      .svg-inline--fa {
+        font-size: 1.85em;
+      }
 
       &.disabled {
         opacity: 0.5;
         pointer-events: none;
       }
 
-      &.active {
-        border-bottom: 4px solid;
-
-        svg {
-          color: $fallback--lightText;
-          color: var(--lightText, $fallback--lightText);
-        }
+      &.toggled {
+        border-bottom: 0.2em solid;
       }
     }
   }
 
   .sticker-picker {
-    flex: 1 1 auto
+    flex: 1 1 auto;
   }
 
   .stickers,
@@ -113,7 +129,7 @@
 
   .emoji {
     &-search {
-      padding: 5px;
+      padding: 0.3em;
       flex: 0 0 auto;
 
       input {
@@ -122,22 +138,28 @@
     }
 
     &-groups {
+      height: 100%;
+      min-height: 200px;
       flex: 1 1 1px;
       position: relative;
       overflow: auto;
+      scrollbar-gutter: stable both-edges;
       user-select: none;
-      mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
-            linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
-            linear-gradient(to top, white, white);
+      mask:
+        linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
+        linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
+        linear-gradient(to top, white, white);
       transition: mask-size 150ms;
       mask-size: 100% 20px, 100% 20px, auto;
       // Autoprefixed seem to ignore this one, and also syntax is different
-      -webkit-mask-composite: xor;
+      mask-composite: xor;
       mask-composite: exclude;
+
       &.scrolled {
         &-top {
           mask-size: 100% 20px, 100% 0, auto;
         }
+
         &-bottom {
           mask-size: 100% 0, 100% 20px, auto;
         }
@@ -148,13 +170,13 @@
       display: flex;
       align-items: center;
       flex-wrap: wrap;
-      padding-left: 5px;
       justify-content: left;
 
       &-title {
         font-size: 0.85em;
         width: 100%;
         margin: 0;
+        padding-left: 0.3em;
 
         &.disabled {
           display: none;
@@ -163,24 +185,30 @@
     }
 
     &-item {
-      width: 32px;
-      height: 32px;
+      width: var(--emoji-size);
+      height: var(--emoji-size);
       box-sizing: border-box;
       display: flex;
-      font-size: 32px;
+      line-height: var(--emoji-size);
       align-items: center;
       justify-content: center;
-      margin: 4px;
-
+      margin: 0.2em;
       cursor: pointer;
 
-      img {
+      .emoji-picker-emoji.-custom {
         object-fit: contain;
-        max-width: 100%;
-        max-height: 100%;
+        width: var(--emoji-size);
+        max-width: var(--emoji-size);
+        height: var(--emoji-size);
+        max-height: var(--emoji-size);
+
+        --_still_image-label-scale: 0.5;
+      }
+
+      .emoji-picker-emoji.-unicode {
+        font-size: 1.6em;
+        overflow: hidden;
       }
     }
-
   }
-
 }

src/components/emoji_picker/emoji_picker.vue

@@ -1,105 +1,172 @@
 <template>
-  <div class="emoji-picker panel panel-default panel-body">
-    <div class="heading">
-      <span class="emoji-tabs">
+  <Popover
+    ref="popover"
+    trigger="click"
+    popover-class="emoji-picker popover-default"
+    :trigger-attrs="{ 'aria-hidden': true, tabindex: -1 }"
+    @show="onPopoverShown"
+    @close="onPopoverClosed"
+  >
+    <template #content>
+      <div class="heading">
+        <!--
+          Body scroll lock needs to be on every scrollable element on safari iOS.
+          Here we tell it to enable scrolling for this element.
+          See https://github.com/willmcpo/body-scroll-lock#vanilla-js
+        -->
         <span
-          v-for="group in emojis"
-          :key="group.id"
-          class="emoji-tabs-item"
-          :class="{
-            active: activeGroupView === group.id,
-            disabled: group.emojis.length === 0
-          }"
-          :title="group.text"
-          @click.prevent="highlight(group.id)"
+          ref="header"
+          v-body-scroll-lock="isInModal"
+          class="emoji-tabs"
         >
-          <FAIcon
-            :icon="group.icon"
-            fixed-width
-          />
-        </span>
-      </span>
-      <span
-        v-if="stickerPickerEnabled"
-        class="additional-tabs"
-      >
-        <span
-          class="stickers-tab-icon additional-tabs-item"
-          :class="{active: showingStickers}"
-          :title="$t('emoji.stickers')"
-          @click.prevent="toggleStickers"
-        >
-          <FAIcon
-            icon="sticky-note"
-            fixed-width
-          />
-        </span>
-      </span>
-    </div>
-    <div class="content">
-      <div
-        class="emoji-content"
-        :class="{hidden: showingStickers}"
-      >
-        <div class="emoji-search">
-          <input
-            v-model="keyword"
-            type="text"
-            class="form-control"
-            :placeholder="$t('emoji.search_emoji')"
-            @input="$event.target.composing = false"
-          >
-        </div>
-        <div
-          ref="emoji-groups"
-          class="emoji-groups"
-          :class="groupsScrolledClass"
-          @scroll="onScroll"
-        >
-          <div
-            v-for="group in emojisView"
+          <span
+            v-for="group in filteredEmojiGroups"
+            :ref="setGroupRef('group-header-' + group.id)"
             :key="group.id"
-            class="emoji-group"
+            class="button-unstyled emoji-tabs-item"
+            :class="{
+              toggled: activeGroupView === group.id
+            }"
+            :title="group.text"
+            role="button"
+            @click.prevent="highlight(group.id)"
           >
-            <h6
-              :ref="'group-' + group.id"
-              class="emoji-group-title"
-            >
-              {{ group.text }}
-            </h6>
             <span
-              v-for="emoji in group.emojis"
-              :key="group.id + emoji.displayText"
-              :title="emoji.displayText"
-              class="emoji-item"
-              @click.stop.prevent="onEmoji(emoji)"
+              v-if="group.image"
+              class="emoji-picker-header-image"
             >
-              <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
-              <img
-                v-else
-                :src="emoji.imageUrl"
-              >
+              <still-image
+                :alt="group.text"
+                :src="group.image"
+              />
             </span>
-            <span :ref="'group-end-' + group.id" />
+            <FAIcon
+              v-else
+              :icon="group.icon"
+              fixed-width
+            />
+          </span>
+        </span>
+        <span
+          v-if="stickerPickerEnabled"
+          class="additional-tabs"
+        >
+          <span
+            class="button-unstyled stickers-tab-icon additional-tabs-item"
+            :class="{toggled: showingStickers}"
+            :title="$t('emoji.stickers')"
+            @click.prevent="toggleStickers"
+          >
+            <FAIcon
+              icon="sticky-note"
+              fixed-width
+            />
+          </span>
+        </span>
+      </div>
+      <div
+        v-if="contentLoaded"
+        class="content"
+      >
+        <div
+          class="emoji-content"
+          :class="{hidden: showingStickers}"
+        >
+          <div class="emoji-search">
+            <input
+              ref="search"
+              v-model="keyword"
+              type="text"
+              class="input form-control"
+              :placeholder="$t('emoji.search_emoji')"
+              @input="$event.target.composing = false"
+            >
+          </div>
+          <!-- Enables scrolling for this element on safari iOS. See comments for header. -->
+          <DynamicScroller
+            ref="emoji-groups"
+            v-body-scroll-lock="isInModal"
+            class="emoji-groups"
+            :class="groupsScrolledClass"
+            :min-item-size="minItemSize"
+            :buffer="minItemSize"
+            :items="emojiItems"
+            :emit-update="true"
+            @update="onScroll"
+            @visible="recalculateItemPerRow"
+            @resize="recalculateItemPerRow"
+          >
+            <template #default="{ item: group, index, active }">
+              <DynamicScrollerItem
+                :ref="setGroupRef('group-' + group.id)"
+                :item="group"
+                :active="active"
+                :data-index="index"
+                :size-dependencies="[group.emojis.length]"
+              >
+                <div
+                  class="emoji-group"
+                >
+                  <h6
+                    v-if="group.isFirstRow"
+                    class="emoji-group-title"
+                  >
+                    {{ group.text }}
+                  </h6>
+                  <span
+                    v-for="emoji in group.emojis"
+                    :key="group.id + emoji.displayText"
+                    :title="maybeLocalizedEmojiName(emoji)"
+                    class="emoji-item"
+                    role="button"
+                    @click.stop.prevent="onEmoji(emoji)"
+                  >
+                    <span
+                      v-if="!emoji.imageUrl"
+                      class="emoji-picker-emoji -unicode"
+                    >{{ emoji.replacement }}</span>
+                    <still-image
+                      v-else
+                      class="emoji-picker-emoji -custom"
+                      loading="lazy"
+                      :alt="maybeLocalizedEmojiName(emoji)"
+                      :src="emoji.imageUrl"
+                      :data-emoji-name="group.id + emoji.displayText"
+                    />
+                  </span>
+                </div>
+              </DynamicScrollerItem>
+            </template>
+          </DynamicScroller>
+          <div class="keep-open">
+            <Checkbox v-model="keepOpen">
+              {{ $t('emoji.keep_open') }}
+            </Checkbox>
+          </div>
+          <div
+            v-if="!hideCustomEmoji"
+            class="hide-custom-emoji"
+          >
+            <Checkbox
+              v-model="hideCustomEmojiInPicker"
+              @change="onShowing"
+            >
+              {{ $t('emoji.hide_custom_emoji') }}
+            </Checkbox>
           </div>
         </div>
-        <div class="keep-open">
-          <Checkbox v-model="keepOpen">
-            {{ $t('emoji.keep_open') }}
-          </Checkbox>
+        <div
+          v-if="showingStickers"
+          class="stickers-content"
+        >
+          <sticker-picker
+            @uploaded="onStickerUploaded"
+            @upload-failed="onStickerUploadFailed"
+          />
         </div>
       </div>
-      <div
-        v-if="showingStickers"
-        class="stickers-content"
-      >
-        <sticker-picker
-          @uploaded="onStickerUploaded"
-          @upload-failed="onStickerUploadFailed"
-        />
-      </div>
-    </div>
-  </div>
+    </template>
+  </Popover>
 </template>
 
 <script src="./emoji_picker.js"></script>

src/components/emoji_reactions/emoji_reactions.js

@@ -1,5 +1,17 @@
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserListPopover from '../user_list_popover/user_list_popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faPlus,
+  faMinus,
+  faCheck
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faPlus,
+  faMinus,
+  faCheck
+)
 
 const EMOJI_REACTION_COUNT_CUTOFF = 12
 
@@ -33,6 +45,9 @@ const EmojiReactions = {
     },
     loggedIn () {
       return !!this.$store.state.users.currentUser
+    },
+    remoteInteractionLink () {
+      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
     }
   },
   methods: {
@@ -42,10 +57,10 @@ const EmojiReactions = {
     reactedWith (emoji) {
       return this.status.emoji_reactions.find(r => r.name === emoji).me
     },
-    fetchEmojiReactionsByIfMissing () {
+    async fetchEmojiReactionsByIfMissing () {
       const hasNoAccounts = this.status.emoji_reactions.find(r => !r.accounts)
       if (hasNoAccounts) {
-        this.$store.dispatch('fetchEmojiReactionsBy', this.status.id)
+        return await this.$store.dispatch('fetchEmojiReactionsBy', this.status.id)
       }
     },
     reactWith (emoji) {
@@ -54,14 +69,26 @@ const EmojiReactions = {
     unreact (emoji) {
       this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
     },
-    emojiOnClick (emoji, event) {
+    async emojiOnClick (emoji, event) {
       if (!this.loggedIn) return
 
+      await this.fetchEmojiReactionsByIfMissing()
       if (this.reactedWith(emoji)) {
         this.unreact(emoji)
       } else {
         this.reactWith(emoji)
       }
+    },
+    counterTriggerAttrs (reaction) {
+      return {
+        class: [
+          'btn',
+          'button-default',
+          'emoji-reaction-count-button',
+          { '-picked-reaction': this.reactedWith(reaction.name) }
+        ],
+        'aria-label': this.$tc('status.reaction_count_label', reaction.count, { num: reaction.count })
+      }
     }
   }
 }

src/components/emoji_reactions/emoji_reactions.vue

@@ -1,20 +1,64 @@
 <template>
-  <div class="emoji-reactions">
-    <UserListPopover
+  <div class="EmojiReactions">
+    <span
       v-for="(reaction) in emojiReactions"
-      :key="reaction.name"
-      :users="accountsForEmoji[reaction.name]"
+      :key="reaction.url || reaction.name"
+      class="emoji-reaction-container btn-group"
     >
-      <button
+      <component
+        :is="loggedIn ? 'button' : 'a'"
+        v-bind="!loggedIn ? { href: remoteInteractionLink } : {}"
+        role="button"
         class="emoji-reaction btn button-default"
-        :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
+        :class="{ '-picked-reaction': reactedWith(reaction.name) }"
+        :title="reaction.url ? reaction.name : undefined"
+        :aria-pressed="reactedWith(reaction.name)"
         @click="emojiOnClick(reaction.name, $event)"
-        @mouseenter="fetchEmojiReactionsByIfMissing()"
       >
-        <span class="reaction-emoji">{{ reaction.name }}</span>
-        <span>{{ reaction.count }}</span>
-      </button>
-    </UserListPopover>
+        <span
+          class="reaction-emoji"
+        >
+          <img
+            v-if="reaction.url"
+            :src="reaction.url"
+            class="reaction-emoji-content"
+            width="1em"
+          >
+          <span
+            v-else
+            class="reaction-emoji reaction-emoji-content"
+          >{{ reaction.name }}</span>
+        </span>
+        <FALayers>
+          <FAIcon
+            v-if="reactedWith(reaction.name)"
+            class="active-marker"
+            transform="shrink-6 up-9"
+            icon="check"
+          />
+          <FAIcon
+            v-if="!reactedWith(reaction.name)"
+            class="focus-marker"
+            transform="shrink-6 up-9"
+            icon="plus"
+          />
+          <FAIcon
+            v-else
+            class="focus-marker"
+            transform="shrink-6 up-9"
+            icon="minus"
+          />
+        </FALayers>
+      </component>
+      <UserListPopover
+        :users="accountsForEmoji[reaction.name]"
+        class="emoji-reaction-popover"
+        :trigger-attrs="counterTriggerAttrs(reaction)"
+        @show="fetchEmojiReactionsByIfMissing()"
+      >
+        <span class="emoji-reaction-counts">{{ reaction.count }}</span>
+      </UserListPopover>
+    </span>
     <a
       v-if="tooManyReactions"
       class="emoji-reaction-expand faint"
@@ -26,57 +70,130 @@
   </div>
 </template>
 
-<script src="./emoji_reactions.js" ></script>
+<script src="./emoji_reactions.js"></script>
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../mixins";
 
-.emoji-reactions {
+.EmojiReactions {
   display: flex;
   margin-top: 0.25em;
   flex-wrap: wrap;
-}
 
-.emoji-reaction {
-  padding: 0 0.5em;
-  margin-right: 0.5em;
-  margin-top: 0.5em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  .reaction-emoji {
-    width: 1.25em;
-    margin-right: 0.25em;
-  }
-  &:focus {
-    outline: none;
+  --emoji-size: calc(var(--emojiSize, 1.25em) * var(--emojiReactionsScale, 1));
+
+  .emoji-reaction-container {
+    display: flex;
+    align-items: stretch;
+    margin-top: 0.5em;
+    margin-right: 0.5em;
+
+    .emoji-reaction-popover {
+      padding: 0;
+
+      .emoji-reaction-count-button {
+        margin: 0;
+        height: 100%;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        box-sizing: border-box;
+        min-width: 2em;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+
+        &.-picked-reaction {
+          border: 1px solid var(--accent);
+          margin-right: -1px;
+        }
+      }
+    }
   }
 
-  &.not-clickable {
-    cursor: default;
+  .emoji-reaction {
+    padding-left: 0.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    margin: 0;
+
+    .reaction-emoji {
+      width: var(--emoji-size);
+      height: var(--emoji-size);
+      margin-right: 0.25em;
+      line-height: var(--emoji-size);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .reaction-emoji-content {
+      max-width: 100%;
+      max-height: 100%;
+      width: auto;
+      height: auto;
+      line-height: inherit;
+      overflow: hidden;
+      font-size: calc(var(--emoji-size) * 0.8);
+      margin: 0;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    .svg-inline--fa {
+      color: var(--text);
+    }
+
+    &.-picked-reaction {
+      border: 1px solid var(--accent);
+      margin-left: -1px; // offset the border, can't use inset shadows either
+      margin-right: -1px;
+
+      .svg-inline--fa {
+        color: var(--accent);
+      }
+    }
+
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
+
+      .active-marker {
+        visibility: visible;
+      }
+    }
+
+    @include focused-style {
+      .svg-inline--fa {
+        color: var(--accent);
+      }
+
+      .focus-marker {
+        visibility: visible;
+      }
+
+      .active-marker {
+        visibility: hidden;
+      }
+    }
+  }
+
+  .emoji-reaction-expand {
+    padding: 0 0.5em;
+    margin-right: 0.5em;
+    margin-top: 0.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     &:hover {
-      box-shadow: $fallback--buttonShadow;
-      box-shadow: var(--buttonShadow);
+      text-decoration: underline;
     }
   }
 }
-
-.emoji-reaction-expand {
-  padding: 0 0.5em;
-  margin-right: 0.5em;
-  margin-top: 0.5em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.picked-reaction {
-  border: 1px solid var(--accent, $fallback--link);
-  margin-left: -1px; // offset the border, can't use inset shadows either
-  margin-right: calc(0.5em - 1px);
-}
-
 </style>

src/components/extra_buttons/extra_buttons.js

@@ -1,4 +1,7 @@
 import Popover from '../popover/popover.vue'
+import genRandomSeed from '../../services/random_seed/random_seed.service.js'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
+import StatusBookmarkFolderMenu from '../status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEllipsisH,
@@ -6,7 +9,10 @@ import {
   faEyeSlash,
   faThumbtack,
   faShareAlt,
-  faExternalLinkAlt
+  faExternalLinkAlt,
+  faHistory,
+  faPlus,
+  faTimes
 } from '@fortawesome/free-solid-svg-icons'
 import {
   faBookmark as faBookmarkReg,
@@ -21,19 +27,50 @@ library.add(
   faThumbtack,
   faShareAlt,
   faExternalLinkAlt,
-  faFlag
+  faFlag,
+  faHistory,
+  faPlus,
+  faTimes
 )
 
 const ExtraButtons = {
-  props: [ 'status' ],
-  components: { Popover },
+  props: ['status'],
+  components: {
+    Popover,
+    ConfirmModal,
+    StatusBookmarkFolderMenu
+  },
+  data () {
+    return {
+      expanded: false,
+      showingDeleteDialog: false,
+      randomSeed: genRandomSeed()
+    }
+  },
   methods: {
+    onShow () {
+      this.expanded = true
+    },
+    onClose () {
+      this.expanded = false
+    },
     deleteStatus () {
-      const confirmed = window.confirm(this.$t('status.delete_confirm'))
-      if (confirmed) {
-        this.$store.dispatch('deleteStatus', { id: this.status.id })
+      if (this.shouldConfirmDelete) {
+        this.showDeleteStatusConfirmDialog()
+      } else {
+        this.doDeleteStatus()
       }
     },
+    doDeleteStatus () {
+      this.$store.dispatch('deleteStatus', { id: this.status.id })
+      this.hideDeleteStatusConfirmDialog()
+    },
+    showDeleteStatusConfirmDialog () {
+      this.showingDeleteDialog = true
+    },
+    hideDeleteStatusConfirmDialog () {
+      this.showingDeleteDialog = false
+    },
     pinStatus () {
       this.$store.dispatch('pinStatus', this.status.id)
         .then(() => this.$emit('onSuccess'))
@@ -71,14 +108,32 @@ const ExtraButtons = {
     },
     reportStatus () {
       this.$store.dispatch('openUserReportingModal', { userId: this.status.user.id, statusIds: [this.status.id] })
+    },
+    editStatus () {
+      this.$store.dispatch('fetchStatusSource', { id: this.status.id })
+        .then(data => this.$store.dispatch('openEditStatusModal', {
+          statusId: this.status.id,
+          subject: data.spoiler_text,
+          statusText: data.text,
+          statusIsSensitive: this.status.nsfw,
+          statusPoll: this.status.poll,
+          statusFiles: [...this.status.attachments],
+          visibility: this.status.visibility,
+          statusContentType: data.content_type
+        }))
+    },
+    showStatusHistory () {
+      const originalStatus = { ...this.status }
+      const stripFieldsList = ['attachments', 'created_at', 'emojis', 'text', 'raw_html', 'nsfw', 'poll', 'summary', 'summary_raw_html']
+      stripFieldsList.forEach(p => delete originalStatus[p])
+      this.$store.dispatch('openStatusHistoryModal', originalStatus)
     }
   },
   computed: {
     currentUser () { return this.$store.state.users.currentUser },
     canDelete () {
       if (!this.currentUser) { return }
-      const superuser = this.currentUser.rights.moderator || this.currentUser.rights.admin
-      return superuser || this.status.user.id === this.currentUser.id
+      return this.currentUser.privileges.includes('messages_delete') || this.status.user.id === this.currentUser.id
     },
     ownStatus () {
       return this.status.user.id === this.currentUser.id
@@ -89,8 +144,30 @@ const ExtraButtons = {
     canMute () {
       return !!this.currentUser
     },
+    canBookmark () {
+      return !!this.currentUser
+    },
+    bookmarkFolders () {
+      return this.$store.state.instance.pleromaBookmarkFoldersAvailable
+    },
     statusLink () {
       return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
+    },
+    isEdited () {
+      return this.status.edited_at !== null
+    },
+    editingAvailable () { return this.$store.state.instance.editingAvailable },
+    shouldConfirmDelete () {
+      return this.$store.getters.mergedConfig.modalOnDelete
+    },
+    triggerAttrs () {
+      return {
+        title: this.$t('status.more_actions'),
+        id: `popup-trigger-${this.randomSeed}`,
+        'aria-controls': `popup-menu-${this.randomSeed}`,
+        'aria-expanded': this.expanded,
+        'aria-haspopup': 'menu'
+      }
     }
   }
 }

src/components/extra_buttons/extra_buttons.vue

@@ -2,16 +2,24 @@
   <Popover
     class="ExtraButtons"
     trigger="click"
+    :trigger-attrs="triggerAttrs"
     placement="top"
     :offset="{ y: 5 }"
     :bound-to="{ x: 'container' }"
     remove-padding
+    @show="onShow"
+    @close="onClose"
   >
-    <template v-slot:content="{close}">
-      <div class="dropdown-menu">
+    <template #content="{close}">
+      <div
+        :id="`popup-menu-${randomSeed}`"
+        class="dropdown-menu"
+        role="menu"
+      >
         <button
           v-if="canMute && !status.thread_muted"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="muteConversation"
         >
           <FAIcon
@@ -21,7 +29,8 @@
         </button>
         <button
           v-if="canMute && status.thread_muted"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="unmuteConversation"
         >
           <FAIcon
@@ -31,7 +40,8 @@
         </button>
         <button
           v-if="!status.pinned && canPin"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="pinStatus"
           @click="close"
         >
@@ -42,7 +52,8 @@
         </button>
         <button
           v-if="status.pinned && canPin"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="unpinStatus"
           @click="close"
         >
@@ -51,31 +62,64 @@
             icon="thumbtack"
           /><span>{{ $t("status.unpin") }}</span>
         </button>
+        <template v-if="canBookmark">
+          <button
+            v-if="!status.bookmarked"
+            class="menu-item dropdown-item dropdown-item-icon"
+            role="menuitem"
+            @click.prevent="bookmarkStatus"
+            @click="close"
+          >
+            <FAIcon
+              fixed-width
+              :icon="['far', 'bookmark']"
+            /><span>{{ $t("status.bookmark") }}</span>
+          </button>
+          <button
+            v-if="status.bookmarked"
+            class="menu-item dropdown-item dropdown-item-icon"
+            role="menuitem"
+            @click.prevent="unbookmarkStatus"
+            @click="close"
+          >
+            <FAIcon
+              fixed-width
+              icon="bookmark"
+            /><span>{{ $t("status.unbookmark") }}</span>
+          </button>
+          <StatusBookmarkFolderMenu
+            v-if="status.bookmarked && bookmarkFolders"
+            :status="status"
+          />
+        </template>
         <button
-          v-if="!status.bookmarked"
-          class="button-default dropdown-item dropdown-item-icon"
-          @click.prevent="bookmarkStatus"
+          v-if="ownStatus && editingAvailable"
+          class="menu-item dropdown-item dropdown-item-icon"
+          role="menuitem"
+          @click.prevent="editStatus"
           @click="close"
         >
           <FAIcon
             fixed-width
-            :icon="['far', 'bookmark']"
-          /><span>{{ $t("status.bookmark") }}</span>
+            icon="pen"
+          /><span>{{ $t("status.edit") }}</span>
         </button>
         <button
-          v-if="status.bookmarked"
-          class="button-default dropdown-item dropdown-item-icon"
-          @click.prevent="unbookmarkStatus"
+          v-if="isEdited && editingAvailable"
+          class="menu-item dropdown-item dropdown-item-icon"
+          role="menuitem"
+          @click.prevent="showStatusHistory"
           @click="close"
         >
           <FAIcon
             fixed-width
-            icon="bookmark"
-          /><span>{{ $t("status.unbookmark") }}</span>
+            icon="history"
+          /><span>{{ $t("status.status_history") }}</span>
         </button>
         <button
           v-if="canDelete"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="deleteStatus"
           @click="close"
         >
@@ -85,7 +129,8 @@
           /><span>{{ $t("status.delete") }}</span>
         </button>
         <button
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="copyLink"
           @click="close"
         >
@@ -96,7 +141,8 @@
         </button>
         <a
           v-if="!status.is_local"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
+          role="menuitem"
           title="Source"
           :href="status.external_url"
           target="_blank"
@@ -107,7 +153,8 @@
           /><span>{{ $t("status.external_source") }}</span>
         </a>
         <button
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="reportStatus"
           @click="close"
         >
@@ -118,36 +165,73 @@
         </button>
       </div>
     </template>
-    <template v-slot:trigger>
-      <button class="button-unstyled popover-trigger">
-        <FAIcon
-          class="fa-scale-110 fa-old-padding"
-          icon="ellipsis-h"
-        />
-      </button>
+    <template #trigger>
+      <span class="button-unstyled popover-trigger">
+        <FALayers class="fa-old-padding-layer">
+          <FAIcon
+            class="fa-scale-110 "
+            icon="ellipsis-h"
+          />
+          <FAIcon
+            v-show="!expanded"
+            class="focus-marker"
+            transform="shrink-6 up-8 right-16"
+            icon="plus"
+          />
+          <FAIcon
+            v-show="expanded"
+            class="focus-marker"
+            transform="shrink-6 up-8 right-16"
+            icon="times"
+          />
+        </FALayers>
+      </span>
+      <teleport to="#modal">
+        <ConfirmModal
+          v-if="showingDeleteDialog"
+          :title="$t('status.delete_confirm_title')"
+          :cancel-text="$t('status.delete_confirm_cancel_button')"
+          :confirm-text="$t('status.delete_confirm_accept_button')"
+          @cancelled="hideDeleteStatusConfirmDialog"
+          @accepted="doDeleteStatus"
+        >
+          {{ $t('status.delete_confirm') }}
+        </ConfirmModal>
+      </teleport>
     </template>
   </Popover>
 </template>
 
-<script src="./extra_buttons.js" ></script>
+<script src="./extra_buttons.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../mixins";
 
 .ExtraButtons {
-  /* override of popover internal stuff */
-  .popover-trigger-button {
-    width: auto;
-  }
-
   .popover-trigger {
     position: static;
     padding: 10px;
     margin: -10px;
 
     &:hover .svg-inline--fa {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
+      color: var(--text);
+    }
+  }
+
+  .popover-trigger-button {
+    /* override of popover internal stuff */
+    width: auto;
+
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
+    }
+
+    @include focused-style {
+      .focus-marker {
+        visibility: visible;
+      }
     }
   }
 }

src/components/extra_notifications/extra_notifications.js

@@ -0,0 +1,48 @@
+import { mapGetters } from 'vuex'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faUserPlus,
+  faComments,
+  faBullhorn
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faUserPlus,
+  faComments,
+  faBullhorn
+)
+
+const ExtraNotifications = {
+  computed: {
+    shouldShowChats () {
+      return this.mergedConfig.showExtraNotifications && this.mergedConfig.showChatsInExtraNotifications && this.unreadChatCount
+    },
+    shouldShowAnnouncements () {
+      return this.mergedConfig.showExtraNotifications && this.mergedConfig.showAnnouncementsInExtraNotifications && this.unreadAnnouncementCount
+    },
+    shouldShowFollowRequests () {
+      return this.mergedConfig.showExtraNotifications && this.mergedConfig.showFollowRequestsInExtraNotifications && this.followRequestCount
+    },
+    hasAnythingToShow () {
+      return this.shouldShowChats || this.shouldShowAnnouncements || this.shouldShowFollowRequests
+    },
+    shouldShowCustomizationTip () {
+      return this.mergedConfig.showExtraNotificationsTip && this.hasAnythingToShow
+    },
+    currentUser () {
+      return this.$store.state.users.currentUser
+    },
+    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount', 'followRequestCount', 'mergedConfig'])
+  },
+  methods: {
+    openNotificationSettings () {
+      return this.$store.dispatch('openSettingsModalTab', 'notifications')
+    },
+    dismissConfigurationTip () {
+      return this.$store.dispatch('setOption', { name: 'showExtraNotificationsTip', value: false })
+    }
+  }
+}
+
+export default ExtraNotifications

src/components/extra_notifications/extra_notifications.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="ExtraNotifications">
+    <div
+      v-if="shouldShowChats"
+      class="notification unseen"
+    >
+      <div class="notification-overlay" />
+      <router-link
+        class="button-unstyled -link extra-notification"
+        :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 icon"
+          icon="comments"
+        />
+        {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
+      </router-link>
+    </div>
+    <div
+      v-if="shouldShowAnnouncements"
+      class="notification unseen"
+    >
+      <div class="notification-overlay" />
+      <router-link
+        class="button-unstyled -link extra-notification"
+        :to="{ name: 'announcements' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 icon"
+          icon="bullhorn"
+        />
+        {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
+      </router-link>
+    </div>
+    <div
+      v-if="shouldShowFollowRequests"
+      class="notification unseen"
+    >
+      <div class="notification-overlay" />
+      <router-link
+        class="button-unstyled -link extra-notification"
+        :to="{ name: 'friend-requests' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 icon"
+          icon="user-plus"
+        />
+        {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
+      </router-link>
+    </div>
+    <i18n-t
+      v-if="shouldShowCustomizationTip"
+      tag="span"
+      class="notification tip extra-notification"
+      keypath="notifications.configuration_tip"
+      scope="global"
+    >
+      <template #theSettings>
+        <button
+          class="button-unstyled -link"
+          @click="openNotificationSettings"
+        >
+          {{ $t('notifications.configuration_tip_settings') }}
+        </button>
+      </template>
+      <template #dismiss>
+        <button
+          class="button-unstyled -link"
+          @click="dismissConfigurationTip"
+        >
+          {{ $t('notifications.configuration_tip_dismiss') }}
+        </button>
+      </template>
+    </i18n-t>
+  </div>
+</template>
+
+<script src="./extra_notifications.js" />
+
+<style lang="scss">
+.ExtraNotifications {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  .notification {
+    width: 100%;
+    border-bottom: 1px solid;
+    border-color: var(--border);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .extra-notification {
+    padding: 1em;
+  }
+
+  .icon {
+    margin-right: 0.5em;
+  }
+
+  .tip {
+    display: inline;
+  }
+}
+</style>

src/components/favorite_button/favorite_button.js

@@ -1,13 +1,21 @@
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faStar } from '@fortawesome/free-solid-svg-icons'
+import {
+  faStar,
+  faPlus,
+  faMinus,
+  faCheck
+} from '@fortawesome/free-solid-svg-icons'
 import {
   faStar as faStarRegular
 } from '@fortawesome/free-regular-svg-icons'
 
 library.add(
   faStar,
-  faStarRegular
+  faStarRegular,
+  faPlus,
+  faMinus,
+  faCheck
 )
 
 const FavoriteButton = {
@@ -31,7 +39,10 @@ const FavoriteButton = {
     }
   },
   computed: {
-    ...mapGetters(['mergedConfig'])
+    ...mapGetters(['mergedConfig']),
+    remoteInteractionLink () {
+      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
+    }
   }
 }
 

src/components/favorite_button/favorite_button.vue

@@ -7,19 +7,52 @@
       :title="$t('tool_tip.favorite')"
       @click.prevent="favorite()"
     >
-      <FAIcon
-        class="fa-scale-110 fa-old-padding"
-        :icon="[status.favorited ? 'fas' : 'far', 'star']"
-        :spin="animated"
-      />
+      <FALayers class="fa-scale-110 fa-old-padding-layer">
+        <FAIcon
+          class="fa-scale-110"
+          :icon="[status.favorited ? 'fas' : 'far', 'star']"
+          :spin="animated"
+        />
+        <FAIcon
+          v-if="status.favorited"
+          class="active-marker"
+          transform="shrink-6 up-9 right-12"
+          icon="check"
+        />
+        <FAIcon
+          v-if="!status.favorited"
+          class="focus-marker"
+          transform="shrink-6 up-9 right-12"
+          icon="plus"
+        />
+        <FAIcon
+          v-else
+          class="focus-marker"
+          transform="shrink-6 up-9 right-12"
+          icon="minus"
+        />
+      </FALayers>
     </button>
-    <span v-else>
-      <FAIcon
-        class="fa-scale-110 fa-old-padding"
-        :title="$t('tool_tip.favorite')"
-        :icon="['far', 'star']"
-      />
-    </span>
+    <a
+      v-else
+      class="button-unstyled interactive"
+      target="_blank"
+      role="button"
+      :title="$t('tool_tip.favorite')"
+      :href="remoteInteractionLink"
+    >
+      <FALayers class="fa-scale-110 fa-old-padding-layer">
+        <FAIcon
+          class="fa-scale-110"
+          :icon="['far', 'star']"
+        />
+        <FAIcon
+          class="focus-marker"
+          transform="shrink-6 up-9 right-12"
+          icon="plus"
+        />
+      </FALayers>
+    </a>
     <span
       v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
       class="action-counter"
@@ -29,10 +62,10 @@
   </div>
 </template>
 
-<script src="./favorite_button.js" ></script>
+<script src="./favorite_button.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../mixins";
 
 .FavoriteButton {
   display: flex;
@@ -54,8 +87,27 @@
 
     &:hover .svg-inline--fa,
     &.-favorited .svg-inline--fa {
-      color: $fallback--cOrange;
-      color: var(--cOrange, $fallback--cOrange);
+      color: var(--cOrange);
+    }
+
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
+
+      .active-marker {
+        visibility: visible;
+      }
+    }
+
+    @include focused-style {
+      .focus-marker {
+        visibility: visible;
+      }
+
+      .active-marker {
+        visibility: hidden;
+      }
     }
   }
 }

src/components/features_panel/features_panel.vue

@@ -2,9 +2,9 @@
   <div class="features-panel">
     <div class="panel panel-default base01-background">
       <div class="panel-heading timeline-heading base02-background base04">
-        <div class="title">
+        <h1 class="title">
           {{ $t('features_panel.title') }}
-        </div>
+        </h1>
       </div>
       <div class="panel-body features-panel">
         <ul>
@@ -32,7 +32,7 @@
   </div>
 </template>
 
-<script src="./features_panel.js" ></script>
+<script src="./features_panel.js"></script>
 
 <style lang="scss">
   .features-panel li {

src/components/flash/flash.js

@@ -11,7 +11,7 @@ library.add(
 )
 
 const Flash = {
-  props: [ 'src' ],
+  props: ['src'],
   data () {
     return {
       player: false, // can be true, "hidden", false. hidden = element exists

src/components/flash/flash.vue

@@ -42,7 +42,6 @@
 <script src="./flash.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
 .Flash {
   display: inline-block;
   width: 100%;
@@ -78,7 +77,7 @@
 
   .hidden {
     display: none;
-    visibility: 'hidden';
+    visibility: "hidden";
   }
 }
 </style>

src/components/follow_button/follow_button.js

@@ -1,12 +1,20 @@
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 export default {
   props: ['relationship', 'user', 'labelFollowing', 'buttonClass'],
+  components: {
+    ConfirmModal
+  },
   data () {
     return {
-      inProgress: false
+      inProgress: false,
+      showingConfirmUnfollow: false
     }
   },
   computed: {
+    shouldConfirmUnfollow () {
+      return this.$store.getters.mergedConfig.modalOnUnfollow
+    },
     isPressed () {
       return this.inProgress || this.relationship.following
     },
@@ -35,6 +43,12 @@ export default {
     }
   },
   methods: {
+    showConfirmUnfollow () {
+      this.showingConfirmUnfollow = true
+    },
+    hideConfirmUnfollow () {
+      this.showingConfirmUnfollow = false
+    },
     onClick () {
       this.relationship.following || this.relationship.requested ? this.unfollow() : this.follow()
     },
@@ -45,12 +59,21 @@ export default {
       })
     },
     unfollow () {
+      if (this.shouldConfirmUnfollow) {
+        this.showConfirmUnfollow()
+      } else {
+        this.doUnfollow()
+      }
+    },
+    doUnfollow () {
       const store = this.$store
       this.inProgress = true
       requestUnfollow(this.relationship.id, store).then(() => {
         this.inProgress = false
         store.commit('removeStatus', { timeline: 'friends', userId: this.relationship.id })
       })
+
+      this.hideConfirmUnfollow()
     }
   }
 }

src/components/follow_button/follow_button.vue

@@ -7,6 +7,28 @@
     @click="onClick"
   >
     {{ label }}
+    <teleport to="#modal">
+      <confirm-modal
+        v-if="showingConfirmUnfollow"
+        :title="$t('user_card.unfollow_confirm_title')"
+        :confirm-text="$t('user_card.unfollow_confirm_accept_button')"
+        :cancel-text="$t('user_card.unfollow_confirm_cancel_button')"
+        @accepted="doUnfollow"
+        @cancelled="hideConfirmUnfollow"
+      >
+        <i18n-t
+          scope="global"
+          keypath="user_card.unfollow_confirm"
+          tag="span"
+        >
+          <template #user>
+            <span
+              v-text="user.screen_name_ui"
+            />
+          </template>
+        </i18n-t>
+      </confirm-modal>
+    </teleport>
   </button>
 </template>
 

src/components/follow_card/follow_card.js

@@ -1,6 +1,7 @@
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 import RemoteFollow from '../remote_follow/remote_follow.vue'
 import FollowButton from '../follow_button/follow_button.vue'
+import RemoveFollowerButton from '../remove_follower_button/remove_follower_button.vue'
 
 const FollowCard = {
   props: [
@@ -10,7 +11,8 @@ const FollowCard = {
   components: {
     BasicUserCard,
     RemoteFollow,
-    FollowButton
+    FollowButton,
+    RemoveFollowerButton
   },
   computed: {
     isMe () {

src/components/follow_card/follow_card.vue

@@ -22,6 +22,12 @@
           class="follow-card-follow-button"
           :user="user"
         />
+        <RemoveFollowerButton
+          v-if="noFollowsYou && relationship.followed_by"
+          :user="user"
+          :relationship="relationship"
+          class="follow-card-button"
+        />
       </template>
     </div>
   </basic-user-card>
@@ -34,12 +40,17 @@
   &-content-container {
     flex-shrink: 0;
     display: flex;
-    flex-direction: row;
+    flex-flow: row wrap;
     justify-content: space-between;
-    flex-wrap: wrap;
     line-height: 1.5em;
   }
 
+  &-button {
+    margin-top: 0.5em;
+    padding: 0 1.5em;
+    margin-left: 1em;
+  }
+
   &-follow-button {
     margin-top: 0.5em;
     margin-left: auto;

src/components/follow_request_card/follow_request_card.js

@@ -1,10 +1,18 @@
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { notificationsFromStore } from '../../services/notification_utils/notification_utils.js'
 
 const FollowRequestCard = {
   props: ['user'],
   components: {
-    BasicUserCard
+    BasicUserCard,
+    ConfirmModal
+  },
+  data () {
+    return {
+      showingApproveConfirmDialog: false,
+      showingDenyConfirmDialog: false
+    }
   },
   methods: {
     findFollowRequestNotificationId () {
@@ -13,7 +21,26 @@ const FollowRequestCard = {
       )
       return notif && notif.id
     },
+    showApproveConfirmDialog () {
+      this.showingApproveConfirmDialog = true
+    },
+    hideApproveConfirmDialog () {
+      this.showingApproveConfirmDialog = false
+    },
+    showDenyConfirmDialog () {
+      this.showingDenyConfirmDialog = true
+    },
+    hideDenyConfirmDialog () {
+      this.showingDenyConfirmDialog = false
+    },
     approveUser () {
+      if (this.shouldConfirmApprove) {
+        this.showApproveConfirmDialog()
+      } else {
+        this.doApprove()
+      }
+    },
+    doApprove () {
       this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
       this.$store.dispatch('removeFollowRequest', this.user)
 
@@ -25,14 +52,34 @@ const FollowRequestCard = {
           notification.type = 'follow'
         }
       })
+      this.hideApproveConfirmDialog()
     },
     denyUser () {
+      if (this.shouldConfirmDeny) {
+        this.showDenyConfirmDialog()
+      } else {
+        this.doDeny()
+      }
+    },
+    doDeny () {
       const notifId = this.findFollowRequestNotificationId()
       this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
         .then(() => {
           this.$store.dispatch('dismissNotificationLocal', { id: notifId })
           this.$store.dispatch('removeFollowRequest', this.user)
         })
+      this.hideDenyConfirmDialog()
+    }
+  },
+  computed: {
+    mergedConfig () {
+      return this.$store.getters.mergedConfig
+    },
+    shouldConfirmApprove () {
+      return this.mergedConfig.modalOnApproveFollow
+    },
+    shouldConfirmDeny () {
+      return this.mergedConfig.modalOnDenyFollow
     }
   }
 }

src/components/follow_request_card/follow_request_card.vue

@@ -14,6 +14,28 @@
         {{ $t('user_card.deny') }}
       </button>
     </div>
+    <teleport to="#modal">
+      <confirm-modal
+        v-if="showingApproveConfirmDialog"
+        :title="$t('user_card.approve_confirm_title')"
+        :confirm-text="$t('user_card.approve_confirm_accept_button')"
+        :cancel-text="$t('user_card.approve_confirm_cancel_button')"
+        @accepted="doApprove"
+        @cancelled="hideApproveConfirmDialog"
+      >
+        {{ $t('user_card.approve_confirm', { user: user.screen_name_ui }) }}
+      </confirm-modal>
+      <confirm-modal
+        v-if="showingDenyConfirmDialog"
+        :title="$t('user_card.deny_confirm_title')"
+        :confirm-text="$t('user_card.deny_confirm_accept_button')"
+        :cancel-text="$t('user_card.deny_confirm_cancel_button')"
+        @accepted="doDeny"
+        @cancelled="hideDenyConfirmDialog"
+      >
+        {{ $t('user_card.deny_confirm', { user: user.screen_name_ui }) }}
+      </confirm-modal>
+    </teleport>
   </basic-user-card>
 </template>
 
@@ -22,8 +44,8 @@
 <style lang="scss">
 .follow-request-card-content-container {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
+
   button {
     margin-top: 0.5em;
     margin-right: 0.5em;

src/components/follow_requests/follow_requests.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="settings panel panel-default">
     <div class="panel-heading">
-      <div class="title">
+      <h1 class="title">
         {{ $t('nav.friend_requests') }}
-      </div>
+      </h1>
     </div>
     <div class="panel-body">
       <FollowRequestCard