No OneTemporary
Actions

Size

153 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/CHANGELOG.md b/CHANGELOG.md
	index 473c6f7799..18a989f058 100644
	--- a/CHANGELOG.md
	+++ b/CHANGELOG.md
	@@ -1,233 +1,235 @@
	# Changelog
	All notable changes to this project will be documented in this file.

	The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).


	## [2.3.0] - 2021-xx-xx
	### Fixed
	- Button to remove uploaded media in post status form is now properly placed and sized.
	- Fixed shoutbox not working in mobile layout
	- Fixed missing highlighted border in expanded conversations again
	- Fixed some UI jumpiness when opening images particularly in chat view
	- Fixed chat unread badge looking weird
	+- Fixed punycode names not working properly

	### Changed
	- Display 'people voted' instead of 'votes' for multi-choice polls
	- Optimized chat to not get horrible performance after keeping the same chat open for a long time
	+- When opening emoji picker or react picker, it automatically focuses the search field

	### Added
	- Added reason field for registration when approval is required

	## [2.2.3] - 2021-01-18
	### Added
	- Added Report button to status ellipsis menu for easier reporting

	### Fixed
	- Follows/Followers tabs on user profiles now display the content properly.
	- Handle punycode in screen names

	### Changed
	- Don't filter own posts when they hit your wordfilter
	- Language picker now uses native language names


	## [2.2.2] - 2020-12-22
	### Added
	- Mouseover titles for emojis in reaction picker
	- Support to input emoji into the search box in reaction picker
	- Added some missing unicode emoji
	- Added the upload limit to the Features panel in the About page
	- Support for solid color wallpaper, instance doesn't have to define a wallpaper anymore
	- Group staff members by role in the About page

	### Fixed
	- Fixed the occasional bug where screen would scroll 1px when typing into a reply form
	- Fixed timeline errors locking timelines
	- Fixed missing highlighted border in expanded conversations
	- Fixed custom emoji not working in profile field names
	- Fixed pinned statuses not appearing in user profiles
	- Fixed some elements not being keyboard navigation friendly
	- Fixed error handling when updating various profile images
	- Fixed your latest chat messages disappearing when closing chat view and opening it again during the same session
	- Fixed custom emoji not showing in poll options before voting
	- Fixed link color not applied to instance name in topbar

	### Changed
	- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers
	- Made reply/fav/repeat etc buttons easier to hit
	- Adjusted timeline menu clickable area to match the visible button
	- Moved external source link from status heading to the ellipsis menu
	- Disabled horizontal textarea resize
	- Wallpaper is now top-aligned, horizontally centered.


	## [2.2.1] - 2020-11-11
	### Fixed
	- Fixed regression in react popup alignment and overflowing


	## [2.2.0] - 2020-11-06
	### Added
	- New option to optimize timeline rendering to make the site more responsive (enabled by default)
	- New instance option `logoLeft` to move logo to the left side in desktop nav bar
	- Import/export a muted users
	- Proper handling of deletes when using websocket streaming
	- Added optimistic chat message sending, so you can start writing next message before the previous one has been sent
	- Added a small red badge to the favicon when there's unread notifications
	- Added the NSFW alert to link previews

	### Fixed
	- Fixed clicking NSFW hider through status popover
	- Fixed chat-view back button being hard to click
	- Fixed fresh chat notifications being cleared immediately while leaving the chat view and not having time to actually see the messages
	- Fixed multiple regressions in CSS styles
	- Fixed multiple issues with input fields when using CJK font as default
	- Fixed search field in navbar infringing into logo in some cases
	- Fixed not being able to load the chat history in vertical screens when the message list doesn't take the full height of the scrollable container on the first fetch.

	### Changed
	- Clicking immediately when timeline shifts is now blocked to prevent misclicks
	- Icons changed from fontello (FontAwesome 4 + others) to FontAwesome 5 due to problems with fontello.
	- Some icons changed for better accessibility (lock, globe)
	- Logo is now clickable
	- Changed default logo to SVG version


	## [2.1.2] - 2020-09-17
	### Fixed
	- Fixed chats list not updating its order when new messages come in
	- Fixed chat messages sometimes getting lost when you receive a message at the same time


	## [2.1.1] - 2020-09-08
	### Changed
	- Polls will be hidden with status content if "Collapse posts with subjects" is enabled and the post is collapsed.

	### Fixed
	- Network fetches don't pile up anymore but wait for previous ones to finish to reduce throttling.
	- Autocomplete won't stop at the second @, so it'll still work with "@lain@l" and not start over.
	- Fixed weird autocomplete behavior when you write ":custom_emoji: ?"


	## [2.1.0] - 2020-08-28
	### Added
	- Autocomplete domains from list of known instances
	- 'Bot' settings option and badge
	- Added profile meta data fields that can be set in profile settings
	- Added option to reset avatar/banner in profile settings
	- Descriptions can be set on uploaded files before posting
	- Added status preview option to preview your statuses before posting
	- When a post is a reply to an unavailable post, the 'Reply to'-text has a strike-through style
	- Added ability to see all favoriting or repeating users when hovering the number on highlighted statuses
	- Bookmarks

	### Changed
	- Change heart to thumbs up in reaction picker
	- Close the media modal on navigation events
	- Add colons to the emoji alt text, to make them copyable
	- Add better visual indication for drag-and-drop for files
	- When disabling attachments, the placeholder links now show an icon and the description instead of just IMAGE or VIDEO etc
	- Remove unnecessary options for 'automatic loading when loading older' and 'reply previews'
	- Greentext now has separate color slot for it
	- Removed the use of with_move parameters when fetching notifications
	- Push notifications now are the same as normal notfication, and are localized.
	- Updated Notification Settings to match new BE API

	### Fixed
	- Custom Emoji will display in poll options now.
	- Status ellipsis menu closes properly when selecting certain options
	- Cropped images look correct in Chrome
	- Newlines in the muted words settings work again
	- Clicking on non-latin hashtags won't open a new window
	- Uploading and drag-dropping multiple files works correctly now.
	- Subject field now appears disabled when posting
	- Fix status ellipsis menu being cut off in notifications column
	- Fixed autocomplete sometimes not returning the right user when there's already some results
	- Videos and audio and misc files show description as alt/title properly now
	- Clicking on non-image/video files no longer opens an empty modal
	- Audio files can now be played back in the frontend with hidden attachments
	- Videos are not cropped awkwardly in the uploads section anymore
	- Reply filtering options in Settings -> Filtering now work again using filtering on server
	- Don't show just blank-screen when cookies are disabled
	- Add status idempotency to prevent accidental double posting when posting returns an error
	- Weird bug related to post being sent seemingly after pasting with keyboard (hopefully)
	- Multiple issues with muted statuses/notifications

	## [2.0.5] - 2020-05-12
	### Added
	- Added private notifications option for push notifications
	- 'Copy link' button for statuses (in the ellipsis menu)

	### Changed
	- Registration page no longer requires email if the server is configured not to require it

	### Fixed
	- Status ellipsis menu closes properly when selecting certain options

	## [2.0.3] - 2020-05-02
	### Fixed
	- Show more/less works correctly with auto-collapsed subjects and long posts
	- RTL characters won't look messed up in notifications

	### Changed
	- Emoji autocomplete will match any part of the word and not just start, for example :drool will now helpfully suggest :blobcatdrool: and :blobcatdroolreach:

	### Added
	- Follow request notification support

	## [2.0.2] - 2020-04-08
	### Fixed
	- Favorite/Repeat avatars not showing up on private instances/non-public posts
	- Autocorrect getting triggered in the captcha field
	- Overflow on long domains in follow/move notifications

	### Changed
	- Polish translation updated

	## [2.0.0] - 2020-02-28
	### Added
	- Tons of color slots including ones for hover/pressed/toggled buttons
	- Experimental `--variable[,mod]` syntax support for color slots in themes. the `mod` makes color brighter/darker depending on background color (makes darker color brighter/darker depending on background color)
	- Paper theme by Shpuld
	- Icons in nav panel
	- Private mode support
	- Support for 'Move' type notifications
	- Pleroma AMOLED dark theme
	- User level domain mutes, under User Settings -> Mutes
	- Emoji reactions for statuses
	- MRF keyword policy disclosure
	### Changed
	- Updated Pleroma default themes
	- theme engine update to 3 (themes v2.1 introduction)
	- massive internal changes in theme engine - slowly away from "generate things separately with spaghetti code" towards "feed all data into single 'generateTheme' function and declare slot inheritance and all in a separate file"
	- Breezy theme updates to make it closer to actual Breeze in some aspects
	- when using `--variable` in shadows it no longer uses the actual CSS3 variable, instead it generates color from other slots
	- theme doesn't get saved to local storage when opening FE anonymously
	- Captcha now resets on failed registrations
	- Notifications column now cleans itself up to optimize performance when tab is left open for a long time
	- 403 messaging
	### Fixed
	- Fixed loader-spinner not disappearing when a status preview fails to load
	- anon viewers won't get theme data saved to local storage, so admin changing default theme will have an effect for users coming back to instance.
	- Single notifications left unread when hitting read on another device/tab
	- Registration fixed
	- Deactivation of remote accounts from frontend
	- Fixed NSFW unhiding not working with videos when using one-click unhiding/displaying
	- Improved performance of anything that uses popovers (most notably statuses)

	## [1.1.7 and earlier] - 2019-12-14
	### Added
	- Ability to hide/show repeats from user
	- User profile button clutter organized into a menu
	- Emoji picker
	- Started changelog anew
	- Ability to change user's email
	- About page
	- Added remote user redirect

	### Changed
	- changed the way fading effects for user profile/long statuses works, now uses css-mask instead of gradient background hacks which weren't exactly compatible with semi-transparent themes

	### Fixed
	- improved hotkey behavior on autocomplete popup
	diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
	index 9e4106102d..c53f6a9c7f 100644
	--- a/src/components/basic_user_card/basic_user_card.vue
	+++ b/src/components/basic_user_card/basic_user_card.vue
	@@ -1,93 +1,93 @@
	<template>
	<div class="basic-user-card">
	<router-link :to="userProfileLink(user)">
	<UserAvatar
	class="avatar"
	:user="user"
	@click.prevent.native="toggleUserExpanded"
	/>
	</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
	:title="user.name"
	class="basic-user-card-user-name"
	>
	<!-- eslint-disable vue/no-v-html -->
	<span
	v-if="user.name_html"
	class="basic-user-card-user-name-value"
	v-html="user.name_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<span
	v-else
	class="basic-user-card-user-name-value"
	>{{ user.name }}</span>
	</div>
	<div>
	<router-link
	class="basic-user-card-screen-name"
	:to="userProfileLink(user)"
	>
	- @{{ user.screen_name }}
	+ @{{ user.screen_name_ui }}
	</router-link>
	</div>
	<slot />
	</div>
	</div>
	</template>

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

	<style lang="scss">
	.basic-user-card {
	display: flex;
	flex: 1 0;
	margin: 0;
	padding: 0.6em 1em;

	&-collapsed-content {
	margin-left: 0.7em;
	text-align: left;
	flex: 1;
	min-width: 0;
	}

	&-user-name {
	img {
	object-fit: contain;
	height: 16px;
	width: 16px;
	vertical-align: middle;
	}
	}

	&-user-name-value,
	&-screen-name {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	}

	&-expanded-content {
	flex: 1;
	margin-left: 0.7em;
	min-width: 0;
	}
	}
	</style>
	diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
	index 2780be75e9..b54f5fb2c1 100644
	--- a/src/components/chat/chat.js
	+++ b/src/components/chat/chat.js
	@@ -1,409 +1,409 @@
	import _ from 'lodash'
	import { WSConnectionStatus } from '../../services/api/api.service.js'
	import { mapGetters, mapState } from 'vuex'
	import ChatMessage from '../chat_message/chat_message.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	import ChatTitle from '../chat_title/chat_title.vue'
	import chatService from '../../services/chat_service/chat_service.js'
	import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
	import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight, isScrollable } from './chat_layout_utils.js'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faChevronDown,
	faChevronLeft
	} from '@fortawesome/free-solid-svg-icons'
	import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'

	library.add(
	faChevronDown,
	faChevronLeft
	)

	const BOTTOMED_OUT_OFFSET = 10
	const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
	const SAFE_RESIZE_TIME_OFFSET = 100
	const MARK_AS_READ_DELAY = 1500
	const MAX_RETRIES = 10

	const Chat = {
	components: {
	ChatMessage,
	ChatTitle,
	PostStatusForm
	},
	data () {
	return {
	jumpToBottomButtonVisible: false,
	hoveredMessageChainId: undefined,
	lastScrollPosition: {},
	scrollableContainerHeight: '100%',
	errorLoadingChat: false,
	messageRetriers: {}
	}
	},
	created () {
	this.startFetching()
	window.addEventListener('resize', this.handleLayoutChange)
	},
	mounted () {
	window.addEventListener('scroll', this.handleScroll)
	if (typeof document.hidden !== 'undefined') {
	document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
	}

	this.$nextTick(() => {
	this.updateScrollableContainerHeight()
	this.handleResize()
	})
	this.setChatLayout()
	},
	destroyed () {
	window.removeEventListener('scroll', this.handleScroll)
	window.removeEventListener('resize', this.handleLayoutChange)
	this.unsetChatLayout()
	if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
	this.$store.dispatch('clearCurrentChat')
	},
	computed: {
	recipient () {
	return this.currentChat && this.currentChat.account
	},
	recipientId () {
	return this.$route.params.recipient_id
	},
	formPlaceholder () {
	if (this.recipient) {
	- return this.$t('chats.message_user', { nickname: this.recipient.screen_name })
	+ return this.$t('chats.message_user', { nickname: this.recipient.screen_name_ui })
	} else {
	return ''
	}
	},
	chatViewItems () {
	return chatService.getView(this.currentChatMessageService)
	},
	newMessageCount () {
	return this.currentChatMessageService && this.currentChatMessageService.newMessageCount
	},
	streamingEnabled () {
	return this.mergedConfig.useStreamingApi && this.mastoUserSocketStatus === WSConnectionStatus.JOINED
	},
	...mapGetters([
	'currentChat',
	'currentChatMessageService',
	'findOpenedChatByRecipientId',
	'mergedConfig'
	]),
	...mapState({
	backendInteractor: state => state.api.backendInteractor,
	mastoUserSocketStatus: state => state.api.mastoUserSocketStatus,
	mobileLayout: state => state.interface.mobileLayout,
	layoutHeight: state => state.interface.layoutHeight,
	currentUser: state => state.users.currentUser
	})
	},
	watch: {
	chatViewItems () {
	// We don't want to scroll to the bottom on a new message when the user is viewing older messages.
	// Therefore we need to know whether the scroll position was at the bottom before the DOM update.
	const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET)
	this.$nextTick(() => {
	if (bottomedOutBeforeUpdate) {
	this.scrollDown()
	}
	})
	},
	'$route': function () {
	this.startFetching()
	},
	layoutHeight () {
	this.handleResize({ expand: true })
	},
	mastoUserSocketStatus (newValue) {
	if (newValue === WSConnectionStatus.JOINED) {
	this.fetchChat({ isFirstFetch: true })
	}
	}
	},
	methods: {
	// Used to animate the avatar near the first message of the message chain when any message belonging to the chain is hovered
	onMessageHover ({ isHovered, messageChainId }) {
	this.hoveredMessageChainId = isHovered ? messageChainId : undefined
	},
	onFilesDropped () {
	this.$nextTick(() => {
	this.handleResize()
	this.updateScrollableContainerHeight()
	})
	},
	handleVisibilityChange () {
	this.$nextTick(() => {
	if (!document.hidden && this.bottomedOut(BOTTOMED_OUT_OFFSET)) {
	this.scrollDown({ forceRead: true })
	}
	})
	},
	setChatLayout () {
	// This is a hacky way to adjust the global layout to the mobile chat (without modifying the rest of the app).
	// This layout prevents empty spaces from being visible at the bottom
	// of the chat on iOS Safari (`safe-area-inset`) when
	// - the on-screen keyboard appears and the user starts typing
	// - the user selects the text inside the input area
	// - the user selects and deletes the text that is multiple lines long
	// TODO: unify the chat layout with the global layout.
	let html = document.querySelector('html')
	if (html) {
	html.classList.add('chat-layout')
	}

	this.$nextTick(() => {
	this.updateScrollableContainerHeight()
	})
	},
	unsetChatLayout () {
	let html = document.querySelector('html')
	if (html) {
	html.classList.remove('chat-layout')
	}
	},
	handleLayoutChange () {
	this.$nextTick(() => {
	this.updateScrollableContainerHeight()
	this.scrollDown()
	})
	},
	// Ensures the proper position of the posting form in the mobile layout (the mobile browser panel does not overlap or hide it)
	updateScrollableContainerHeight () {
	const header = this.$refs.header
	const footer = this.$refs.footer
	const inner = this.mobileLayout ? window.document.body : this.$refs.inner
	this.scrollableContainerHeight = scrollableContainerHeight(inner, header, footer) + 'px'
	},
	// Preserves the scroll position when OSK appears or the posting form changes its height.
	handleResize (opts = {}) {
	const { expand = false, delayed = false } = opts

	if (delayed) {
	setTimeout(() => {
	this.handleResize({ ...opts, delayed: false })
	}, SAFE_RESIZE_TIME_OFFSET)
	return
	}

	this.$nextTick(() => {
	this.updateScrollableContainerHeight()

	const { offsetHeight = undefined } = this.lastScrollPosition
	this.lastScrollPosition = getScrollPosition(this.$refs.scrollable)

	const diff = this.lastScrollPosition.offsetHeight - offsetHeight
	if (diff < 0 \|\| (!this.bottomedOut() && expand)) {
	this.$nextTick(() => {
	this.updateScrollableContainerHeight()
	this.$refs.scrollable.scrollTo({
	top: this.$refs.scrollable.scrollTop - diff,
	left: 0
	})
	})
	}
	})
	},
	scrollDown (options = {}) {
	const { behavior = 'auto', forceRead = false } = options
	const scrollable = this.$refs.scrollable
	if (!scrollable) { return }
	this.$nextTick(() => {
	scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
	})
	if (forceRead) {
	this.readChat()
	}
	},
	readChat () {
	if (!(this.currentChatMessageService && this.currentChatMessageService.maxId)) { return }
	if (document.hidden) { return }
	const lastReadId = this.currentChatMessageService.maxId
	this.$store.dispatch('readChat', {
	id: this.currentChat.id,
	lastReadId
	})
	},
	bottomedOut (offset) {
	return isBottomedOut(this.$refs.scrollable, offset)
	},
	reachedTop () {
	const scrollable = this.$refs.scrollable
	return scrollable && scrollable.scrollTop <= 0
	},
	cullOlderCheck () {
	window.setTimeout(() => {
	if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
	this.$store.dispatch('cullOlderMessages', this.currentChatMessageService.chatId)
	}
	}, 5000)
	},
	handleScroll: _.throttle(function () {
	if (!this.currentChat) { return }

	if (this.reachedTop()) {
	this.fetchChat({ maxId: this.currentChatMessageService.minId })
	} else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
	this.jumpToBottomButtonVisible = false
	this.cullOlderCheck()
	if (this.newMessageCount > 0) {
	// Use a delay before marking as read to prevent situation where new messages
	// arrive just as you're leaving the view and messages that you didn't actually
	// get to see get marked as read.
	window.setTimeout(() => {
	// Don't mark as read if the element doesn't exist, user has left chat view
	if (this.$el) this.readChat()
	}, MARK_AS_READ_DELAY)
	}
	} else {
	this.jumpToBottomButtonVisible = true
	}
	}, 200),
	handleScrollUp (positionBeforeLoading) {
	const positionAfterLoading = getScrollPosition(this.$refs.scrollable)
	this.$refs.scrollable.scrollTo({
	top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
	left: 0
	})
	},
	fetchChat ({ isFirstFetch = false, fetchLatest = false, maxId }) {
	const chatMessageService = this.currentChatMessageService
	if (!chatMessageService) { return }
	if (fetchLatest && this.streamingEnabled) { return }

	const chatId = chatMessageService.chatId
	const fetchOlderMessages = !!maxId
	const sinceId = fetchLatest && chatMessageService.maxId

	return this.backendInteractor.chatMessages({ id: chatId, maxId, sinceId })
	.then((messages) => {
	// Clear the current chat in case we're recovering from a ws connection loss.
	if (isFirstFetch) {
	chatService.clear(chatMessageService)
	}

	const positionBeforeUpdate = getScrollPosition(this.$refs.scrollable)
	this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => {
	this.$nextTick(() => {
	if (fetchOlderMessages) {
	this.handleScrollUp(positionBeforeUpdate)
	}

	if (isFirstFetch) {
	this.updateScrollableContainerHeight()
	}

	// In vertical screens, the first batch of fetched messages may not always take the
	// full height of the scrollable container.
	// If this is the case, we want to fetch the messages until the scrollable container
	// is fully populated so that the user has the ability to scroll up and load the history.
	if (!isScrollable(this.$refs.scrollable) && messages.length > 0) {
	this.fetchChat({ maxId: this.currentChatMessageService.minId })
	}
	})
	})
	})
	},
	async startFetching () {
	let chat = this.findOpenedChatByRecipientId(this.recipientId)
	if (!chat) {
	try {
	chat = await this.backendInteractor.getOrCreateChat({ accountId: this.recipientId })
	} catch (e) {
	console.error('Error creating or getting a chat', e)
	this.errorLoadingChat = true
	}
	}
	if (chat) {
	this.$nextTick(() => {
	this.scrollDown({ forceRead: true })
	})
	this.$store.dispatch('addOpenedChat', { chat })
	this.doStartFetching()
	}
	},
	doStartFetching () {
	this.$store.dispatch('startFetchingCurrentChat', {
	fetcher: () => promiseInterval(() => this.fetchChat({ fetchLatest: true }), 5000)
	})
	this.fetchChat({ isFirstFetch: true })
	},
	handleAttachmentPosting () {
	this.$nextTick(() => {
	this.handleResize()
	// When the posting form size changes because of a media attachment, we need an extra resize
	// to account for the potential delay in the DOM update.
	setTimeout(() => {
	this.updateScrollableContainerHeight()
	}, SAFE_RESIZE_TIME_OFFSET)
	this.scrollDown({ forceRead: true })
	})
	},
	sendMessage ({ status, media, idempotencyKey }) {
	const params = {
	id: this.currentChat.id,
	content: status,
	idempotencyKey
	}

	if (media[0]) {
	params.mediaId = media[0].id
	}

	const fakeMessage = buildFakeMessage({
	attachments: media,
	chatId: this.currentChat.id,
	content: status,
	userId: this.currentUser.id,
	idempotencyKey
	})

	this.$store.dispatch('addChatMessages', {
	chatId: this.currentChat.id,
	messages: [fakeMessage]
	}).then(() => {
	this.handleAttachmentPosting()
	})

	return this.doSendMessage({ params, fakeMessage, retriesLeft: MAX_RETRIES })
	},
	doSendMessage ({ params, fakeMessage, retriesLeft = MAX_RETRIES }) {
	if (retriesLeft <= 0) return

	this.backendInteractor.sendChatMessage(params)
	.then(data => {
	this.$store.dispatch('addChatMessages', {
	chatId: this.currentChat.id,
	updateMaxId: false,
	messages: [{ ...data, fakeId: fakeMessage.id }]
	})

	return data
	})
	.catch(error => {
	console.error('Error sending message', error)
	this.$store.dispatch('handleMessageError', {
	chatId: this.currentChat.id,
	fakeId: fakeMessage.id,
	isRetry: retriesLeft !== MAX_RETRIES
	})
	if ((error.statusCode >= 500 && error.statusCode < 600) \|\| error.message === 'Failed to fetch') {
	this.messageRetriers[fakeMessage.id] = setTimeout(() => {
	this.doSendMessage({ params, fakeMessage, retriesLeft: retriesLeft - 1 })
	}, 1000 * (2 ** (MAX_RETRIES - retriesLeft)))
	}
	return {}
	})

	return Promise.resolve(fakeMessage)
	},
	goBack () {
	this.$router.push({ name: 'chats', params: { username: this.currentUser.screen_name } })
	}
	}
	}

	export default Chat
	diff --git a/src/components/chat_title/chat_title.js b/src/components/chat_title/chat_title.js
	index e424bb1f05..edfbe7a400 100644
	--- a/src/components/chat_title/chat_title.js
	+++ b/src/components/chat_title/chat_title.js
	@@ -1,26 +1,26 @@
	import Vue from 'vue'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import UserAvatar from '../user_avatar/user_avatar.vue'

	export default Vue.component('chat-title', {
	name: 'ChatTitle',
	components: {
	UserAvatar
	},
	props: [
	'user', 'withAvatar'
	],
	computed: {
	title () {
	- return this.user ? this.user.screen_name : ''
	+ return this.user ? this.user.screen_name_ui : ''
	},
	htmlTitle () {
	return this.user ? this.user.name_html : ''
	}
	},
	methods: {
	getUserProfileLink (user) {
	return generateProfileLink(user.id, user.screen_name)
	}
	}
	})
	diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
	index 2068a598c7..dc03bc9f44 100644
	--- a/src/components/emoji_input/emoji_input.js
	+++ b/src/components/emoji_input/emoji_input.js
	@@ -1,498 +1,506 @@
	import Completion from '../../services/completion/completion.js'
	import EmojiPicker from '../emoji_picker/emoji_picker.vue'
	import { take } from 'lodash'
	import { findOffset } from '../../services/offset_finder/offset_finder.service.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faSmileBeam
	} from '@fortawesome/free-regular-svg-icons'

	library.add(
	faSmileBeam
	)

	/**
	* EmojiInput - augmented inputs for emoji and autocomplete support in inputs
	* without having to give up the comfort of <input/> and <textarea/> elements
	*
	* Intended usage is:
	* <EmojiInput v-model="something">
	* <input v-model="something"/>
	* </EmojiInput>
	*
	* Works only with <input> and <textarea>. Intended to use with only one nested
	* input. It will find first input or textarea and work with that, multiple
	* nested children not tested. You HAVE TO duplicate v-model for both
	* <emoji-input> and <input>/<textarea> otherwise it will not work.
	*
	* Be prepared for CSS troubles though because it still wraps component in a div
	* while TRYING to make it look like nothing happened, but it could break stuff.
	*/

	const EmojiInput = {
	props: {
	suggest: {
	/**
	* suggest: function (input: String) => Suggestion[]
	*
	* Function that takes input string which takes string (textAtCaret)
	* and returns an array of Suggestions
	*
	* Suggestion is an object containing following properties:
	* displayText: string. Main display text, what actual suggestion
	* represents (user's screen name/emoji shortcode)
	* replacement: string. Text that should replace the textAtCaret
	* detailText: string, optional. Subtitle text, providing additional info
	* if present (user's nickname)
	* imageUrl: string, optional. Image to display alongside with suggestion,
	* currently if no image is provided, replacement will be used (for
	* unicode emojis)
	*
	* TODO: make it asynchronous when adding proper server-provided user
	* suggestions
	*
	* For commonly used suggestors (emoji, users, both) use suggestor.js
	*/
	required: true,
	type: Function
	},
	value: {
	/**
	* Used for v-model
	*/
	required: true,
	type: String
	},
	enableEmojiPicker: {
	/**
	* Enables emoji picker support, this implies that custom emoji are supported
	*/
	required: false,
	type: Boolean,
	default: false
	},
	hideEmojiButton: {
	/**
	* intended to use with external picker trigger, i.e. you have a button outside
	* input that will open up the picker, see triggerShowPicker()
	*/
	required: false,
	type: Boolean,
	default: false
	},
	enableStickerPicker: {
	/**
	* Enables sticker picker support, only makes sense when enableEmojiPicker=true
	*/
	required: false,
	type: Boolean,
	default: false
	},
	placement: {
	/**
	* Forces the panel to take a specific position relative to the input element.
	* The 'auto' placement chooses either bottom or top depending on which has the available space (when both have available space, bottom is preferred).
	*/
	required: false,
	type: String, // 'auto', 'top', 'bottom'
	default: 'auto'
	},
	newlineOnCtrlEnter: {
	required: false,
	type: Boolean,
	default: false
	}
	},
	data () {
	return {
	input: undefined,
	highlighted: 0,
	caret: 0,
	focused: false,
	blurTimeout: null,
	showPicker: false,
	temporarilyHideSuggestions: false,
	keepOpen: false,
	disableClickOutside: false,
	suggestions: []
	}
	},
	components: {
	EmojiPicker
	},
	computed: {
	padEmoji () {
	return this.$store.getters.mergedConfig.padEmoji
	},
	showSuggestions () {
	return this.focused &&
	this.suggestions &&
	this.suggestions.length > 0 &&
	!this.showPicker &&
	!this.temporarilyHideSuggestions
	},
	textAtCaret () {
	return (this.wordAtCaret \|\| {}).word \|\| ''
	},
	wordAtCaret () {
	if (this.value && this.caret) {
	const word = Completion.wordAtPosition(this.value, this.caret - 1) \|\| {}
	return word
	}
	}
	},
	mounted () {
	const slots = this.$slots.default
	if (!slots \|\| slots.length === 0) return
	const input = slots.find(slot => ['input', 'textarea'].includes(slot.tag))
	if (!input) return
	this.input = input
	this.resize()
	input.elm.addEventListener('blur', this.onBlur)
	input.elm.addEventListener('focus', this.onFocus)
	input.elm.addEventListener('paste', this.onPaste)
	input.elm.addEventListener('keyup', this.onKeyUp)
	input.elm.addEventListener('keydown', this.onKeyDown)
	input.elm.addEventListener('click', this.onClickInput)
	input.elm.addEventListener('transitionend', this.onTransition)
	input.elm.addEventListener('input', this.onInput)
	},
	unmounted () {
	const { input } = this
	if (input) {
	input.elm.removeEventListener('blur', this.onBlur)
	input.elm.removeEventListener('focus', this.onFocus)
	input.elm.removeEventListener('paste', this.onPaste)
	input.elm.removeEventListener('keyup', this.onKeyUp)
	input.elm.removeEventListener('keydown', this.onKeyDown)
	input.elm.removeEventListener('click', this.onClickInput)
	input.elm.removeEventListener('transitionend', this.onTransition)
	input.elm.removeEventListener('input', this.onInput)
	}
	},
	watch: {
	showSuggestions: function (newValue) {
	this.$emit('shown', newValue)
	},
	textAtCaret: async function (newWord) {
	const firstchar = newWord.charAt(0)
	this.suggestions = []
	if (newWord === firstchar) return
	const matchedSuggestions = await this.suggest(newWord)
	// Async: cancel if textAtCaret has changed during wait
	if (this.textAtCaret !== newWord) return
	if (matchedSuggestions.length <= 0) return
	this.suggestions = take(matchedSuggestions, 5)
	.map(({ imageUrl, ...rest }) => ({
	...rest,
	img: imageUrl \|\| ''
	}))
	},
	suggestions (newValue) {
	this.$nextTick(this.resize)
	}
	},
	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.scrollIntoView()
	+ this.focusPickerInput()
	})
	// This temporarily disables "click outside" handler
	// since external trigger also means click originates
	// from outside, thus preventing picker from opening
	this.disableClickOutside = true
	setTimeout(() => {
	this.disableClickOutside = false
	}, 0)
	},
	togglePicker () {
	this.input.elm.focus()
	this.showPicker = !this.showPicker
	if (this.showPicker) {
	this.scrollIntoView()
	this.$refs.picker.startEmojiLoad()
	+ this.$nextTick(this.focusPickerInput)
	}
	},
	replace (replacement) {
	const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
	this.$emit('input', newValue)
	this.caret = 0
	},
	insert ({ insertion, keepOpen, surroundingSpace = true }) {
	const before = this.value.substring(0, this.caret) \|\| ''
	const after = this.value.substring(this.caret) \|\| ''

	/* Using a bit more smart approach to padding emojis with spaces:
	* - put a space before cursor if there isn't one already, unless we
	* are at the beginning of post or in spam mode
	* - put a space after emoji if there isn't one already unless we are
	* in spam mode
	*
	* The idea is that when you put a cursor somewhere in between sentence
	* inserting just ' :emoji: ' will add more spaces to post which might
	* break the flow/spacing, as well as the case where user ends sentence
	* with a space before adding emoji.
	*
	* Spam mode is intended for creating multi-part emojis and overall spamming
	* them, masto seem to be rendering :emoji::emoji: correctly now so why not
	*/
	const isSpaceRegex = /\s/
	const spaceBefore = (surroundingSpace && !isSpaceRegex.exec(before.slice(-1)) && before.length && this.padEmoji > 0) ? ' ' : ''
	const spaceAfter = (surroundingSpace && !isSpaceRegex.exec(after[0]) && this.padEmoji) ? ' ' : ''

	const newValue = [
	before,
	spaceBefore,
	insertion,
	spaceAfter,
	after
	].join('')
	this.keepOpen = keepOpen
	this.$emit('input', newValue)
	const position = this.caret + (insertion + spaceAfter + spaceBefore).length
	if (!keepOpen) {
	this.input.elm.focus()
	}

	this.$nextTick(function () {
	// Re-focus inputbox after clicking suggestion
	// Set selection right after the replacement instead of the very end
	this.input.elm.setSelectionRange(position, position)
	this.caret = position
	})
	},
	replaceText (e, suggestion) {
	const len = this.suggestions.length \|\| 0
	if (this.textAtCaret.length === 1) { return }
	if (len > 0 \|\| suggestion) {
	const chosenSuggestion = suggestion \|\| this.suggestions[this.highlighted]
	const replacement = chosenSuggestion.replacement
	const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
	this.$emit('input', newValue)
	this.highlighted = 0
	const position = this.wordAtCaret.start + replacement.length

	this.$nextTick(function () {
	// Re-focus inputbox after clicking suggestion
	this.input.elm.focus()
	// Set selection right after the replacement instead of the very end
	this.input.elm.setSelectionRange(position, position)
	this.caret = position
	})
	e.preventDefault()
	}
	},
	cycleBackward (e) {
	const len = this.suggestions.length \|\| 0
	if (len > 1) {
	this.highlighted -= 1
	if (this.highlighted < 0) {
	this.highlighted = this.suggestions.length - 1
	}
	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
	}
	e.preventDefault()
	} else {
	this.highlighted = 0
	}
	},
	scrollIntoView () {
	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
	*/
	const scrollerRef = this.$el.closest('.sidebar-scroller') \|\|
	this.$el.closest('.post-form-modal-view') \|\|
	window
	const currentScroll = scrollerRef === window
	? scrollerRef.scrollY
	: scrollerRef.scrollTop
	const scrollerHeight = scrollerRef === window
	? scrollerRef.innerHeight
	: scrollerRef.offsetHeight

	const scrollerBottomBorder = currentScroll + scrollerHeight
	// We check where the bottom border of root element is, this uses findOffset
	// to find offset relative to scrollable container (scroller)
	const rootBottomBorder = rootRef.offsetHeight + findOffset(rootRef, scrollerRef).top

	const bottomDelta = Math.max(0, rootBottomBorder - scrollerBottomBorder)
	// could also check top delta but there's no case for it
	const targetScroll = currentScroll + bottomDelta

	if (scrollerRef === window) {
	scrollerRef.scroll(0, targetScroll)
	} else {
	scrollerRef.scrollTop = targetScroll
	}

	this.$nextTick(() => {
	const { offsetHeight } = this.input.elm
	const { picker } = this.$refs
	const pickerBottom = picker.$el.getBoundingClientRect().bottom
	if (pickerBottom > window.innerHeight) {
	picker.$el.style.top = 'auto'
	picker.$el.style.bottom = offsetHeight + 'px'
	}
	})
	},
	onTransition (e) {
	this.resize()
	},
	onBlur (e) {
	// Clicking on any suggestion removes focus from autocomplete,
	// preventing click handler ever executing.
	this.blurTimeout = setTimeout(() => {
	this.focused = false
	this.setCaret(e)
	this.resize()
	}, 200)
	},
	onClick (e, suggestion) {
	this.replaceText(e, suggestion)
	},
	onFocus (e) {
	if (this.blurTimeout) {
	clearTimeout(this.blurTimeout)
	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
	if (key === 'Escape') {
	this.temporarilyHideSuggestions = true
	} else {
	this.temporarilyHideSuggestions = false
	}
	},
	onPaste (e) {
	this.setCaret(e)
	this.resize()
	},
	onKeyDown (e) {
	const { ctrlKey, shiftKey, key } = e
	if (this.newlineOnCtrlEnter && ctrlKey && key === 'Enter') {
	this.insert({ insertion: '\n', surroundingSpace: false })
	// Ensure only one new line is added on macos
	e.stopPropagation()
	e.preventDefault()

	// Scroll the input element to the position of the cursor
	this.$nextTick(() => {
	this.input.elm.blur()
	this.input.elm.focus()
	})
	}
	// Disable suggestions hotkeys if suggestions are hidden
	if (!this.temporarilyHideSuggestions) {
	if (key === 'Tab') {
	if (shiftKey) {
	this.cycleBackward(e)
	} else {
	this.cycleForward(e)
	}
	}
	if (key === 'ArrowUp') {
	this.cycleBackward(e)
	} else if (key === 'ArrowDown') {
	this.cycleForward(e)
	}
	if (key === 'Enter') {
	if (!ctrlKey) {
	this.replaceText(e)
	}
	}
	}
	// Probably add optional keyboard controls for emoji picker?

	// Escape hides suggestions, if suggestions are hidden it
	// de-focuses the element (i.e. default browser behavior)
	if (key === 'Escape') {
	if (!this.temporarilyHideSuggestions) {
	this.input.elm.focus()
	}
	}

	this.showPicker = false
	this.resize()
	},
	onInput (e) {
	this.showPicker = false
	this.setCaret(e)
	this.resize()
	this.$emit('input', 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
	},
	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.elm
	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.elm.offsetHeight + 'px'
	}
	},
	overflowsBottom (el) {
	return el.getBoundingClientRect().bottom > window.innerHeight
	}
	}
	}

	export default EmojiInput
	diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js
	index 14a2b41edf..e8efbd1e0a 100644
	--- a/src/components/emoji_input/suggestor.js
	+++ b/src/components/emoji_input/suggestor.js
	@@ -1,130 +1,130 @@
	/**
	* 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)
	* data.users - optional, an array of all known users
	* updateUsersList - optional, a function to search and append to users
	*
	* Depending on data present one or both (or none) can be present, so if field
	* doesn't support user linking you can just provide only emoji.
	*/

	export default data => {
	const emojiCurry = suggestEmoji(data.emoji)
	const usersCurry = data.store && suggestUsers(data.store)
	return input => {
	const firstChar = input[0]
	if (firstChar === ':' && data.emoji) {
	return emojiCurry(input)
	}
	if (firstChar === '@' && usersCurry) {
	return usersCurry(input)
	}
	return []
	}
	}

	export const suggestEmoji = emojis => input => {
	const noPrefix = input.toLowerCase().substr(1)
	return emojis
	.filter(({ displayText }) => displayText.toLowerCase().match(noPrefix))
	.sort((a, b) => {
	let aScore = 0
	let bScore = 0

	// An exact match always wins
	aScore += a.displayText.toLowerCase() === noPrefix ? 200 : 0
	bScore += b.displayText.toLowerCase() === noPrefix ? 200 : 0

	// Prioritize custom emoji a lot
	aScore += a.imageUrl ? 100 : 0
	bScore += b.imageUrl ? 100 : 0

	// Prioritize prefix matches somewhat
	aScore += a.displayText.toLowerCase().startsWith(noPrefix) ? 10 : 0
	bScore += b.displayText.toLowerCase().startsWith(noPrefix) ? 10 : 0

	// Sort by length
	aScore -= a.displayText.length
	bScore -= b.displayText.length

	// Break ties alphabetically
	const alphabetically = a.displayText > b.displayText ? 0.5 : -0.5

	return bScore - aScore + alphabetically
	})
	}

	export const suggestUsers = ({ dispatch, state }) => {
	// Keep some persistent values in closure, most importantly for the
	// custom debounce to work. Lodash debounce does not return a promise.
	let suggestions = []
	let previousQuery = ''
	let timeout = null
	let cancelUserSearch = null

	const userSearch = (query) => dispatch('searchUsers', { query })
	const debounceUserSearch = (query) => {
	cancelUserSearch && cancelUserSearch()
	return new Promise((resolve, reject) => {
	timeout = setTimeout(() => {
	userSearch(query).then(resolve).catch(reject)
	}, 300)
	cancelUserSearch = () => {
	clearTimeout(timeout)
	resolve([])
	}
	})
	}

	return async input => {
	const noPrefix = input.toLowerCase().substr(1)
	if (previousQuery === noPrefix) return suggestions

	suggestions = []
	previousQuery = noPrefix
	// Fetch more and wait, don't fetch if there's the 2nd @ because
	// the backend user search can't deal with it.
	// Reference semantics make it so that we get the updated data after
	// the await.
	if (!noPrefix.includes('@')) {
	await debounceUserSearch(noPrefix)
	}

	const newSuggestions = state.users.users.filter(
	user =>
	user.screen_name.toLowerCase().startsWith(noPrefix) \|\|
	user.name.toLowerCase().startsWith(noPrefix)
	).slice(0, 20).sort((a, b) => {
	let aScore = 0
	let bScore = 0

	// Matches on screen name (i.e. user@instance) makes a priority
	aScore += a.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
	bScore += b.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0

	// Matches on name takes second priority
	aScore += a.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
	bScore += b.name.toLowerCase().startsWith(noPrefix) ? 1 : 0

	const diff = (bScore - aScore) * 10

	// Then sort alphabetically
	const nameAlphabetically = a.name > b.name ? 1 : -1
	const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1

	return diff + nameAlphabetically + screenNameAlphabetically
	/* eslint-disable camelcase */
	- }).map(({ screen_name, name, profile_image_url_original }) => ({
	- displayText: screen_name,
	+ }).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 + ' '
	}))
	/* eslint-enable camelcase */

	suggestions = newSuggestions \|\| []
	return suggestions
	}
	}
	diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
	index f56aa977da..0081dee4d0 100644
	--- a/src/components/notification/notification.vue
	+++ b/src/components/notification/notification.vue
	@@ -1,195 +1,195 @@
	<template>
	<Status
	v-if="notification.type === 'mention'"
	:compact="true"
	:statusoid="notification.status"
	/>
	<div v-else>
	<div
	v-if="needMute && !unmuted"
	class="Notification container -muted"
	>
	<small>
	<router-link :to="userProfileLink">
	- {{ notification.from_profile.screen_name }}
	+ {{ notification.from_profile.screen_name_ui }}
	</router-link>
	</small>
	<button
	class="button-unstyled unmute"
	@click.prevent="toggleMute"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="eye-slash"
	/>
	</button>
	</div>
	<div
	v-else
	class="Notification non-mention"
	:class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
	:style="[ userStyle ]"
	>
	<a
	class="avatar-container"
	:href="notification.from_profile.statusnet_profile_url"
	@click.stop.prevent.capture="toggleUserExpanded"
	>
	<UserAvatar
	:compact="true"
	:better-shadow="betterShadow"
	:user="notification.from_profile"
	/>
	</a>
	<div class="notification-right">
	<UserCard
	v-if="userExpanded"
	:user-id="getUser(notification).id"
	:rounded="true"
	:bordered="true"
	/>
	<span class="notification-details">
	<div class="name-and-action">
	<!-- eslint-disable vue/no-v-html -->
	<bdi
	v-if="!!notification.from_profile.name_html"
	class="username"
	- :title="'@'+notification.from_profile.screen_name"
	+ :title="'@'+notification.from_profile.screen_name_ui"
	v-html="notification.from_profile.name_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<span
	v-else
	class="username"
	- :title="'@'+notification.from_profile.screen_name"
	+ :title="'@'+notification.from_profile.screen_name_ui"
	>{{ notification.from_profile.name }}</span>
	<span v-if="notification.type === 'like'">
	<FAIcon
	class="type-icon"
	icon="star"
	/>
	<small>{{ $t('notifications.favorited_you') }}</small>
	</span>
	<span v-if="notification.type === 'repeat'">
	<FAIcon
	class="type-icon"
	icon="retweet"
	:title="$t('tool_tip.repeat')"
	/>
	<small>{{ $t('notifications.repeated_you') }}</small>
	</span>
	<span v-if="notification.type === 'follow'">
	<FAIcon
	class="type-icon"
	icon="user-plus"
	/>
	<small>{{ $t('notifications.followed_you') }}</small>
	</span>
	<span v-if="notification.type === 'follow_request'">
	<FAIcon
	class="type-icon"
	icon="user"
	/>
	<small>{{ $t('notifications.follow_request') }}</small>
	</span>
	<span v-if="notification.type === 'move'">
	<FAIcon
	class="type-icon"
	icon="suitcase-rolling"
	/>
	<small>{{ $t('notifications.migrated_to') }}</small>
	</span>
	<span v-if="notification.type === 'pleroma:emoji_reaction'">
	<small>
	<i18n path="notifications.reacted_with">
	<span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
	</i18n>
	</small>
	</span>
	</div>
	<div
	v-if="isStatusNotification"
	class="timeago"
	>
	<router-link
	v-if="notification.status"
	:to="{ name: 'conversation', params: { id: notification.status.id } }"
	class="faint-link"
	>
	<Timeago
	:time="notification.created_at"
	:auto-update="240"
	/>
	</router-link>
	</div>
	<div
	v-else
	class="timeago"
	>
	<span class="faint">
	<Timeago
	:time="notification.created_at"
	:auto-update="240"
	/>
	</span>
	</div>
	<button
	v-if="needMute"
	class="button-unstyled"
	@click.prevent="toggleMute"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="eye-slash"
	/>
	</button>
	</span>
	<div
	v-if="notification.type === 'follow' \|\| notification.type === 'follow_request'"
	class="follow-text"
	>
	<router-link
	:to="userProfileLink"
	class="follow-name"
	>
	- @{{ notification.from_profile.screen_name }}
	+ @{{ notification.from_profile.screen_name_ui }}
	</router-link>
	<div
	v-if="notification.type === 'follow_request'"
	style="white-space: nowrap;"
	>
	<FAIcon
	icon="check"
	class="fa-scale-110 fa-old-padding follow-request-accept"
	:title="$t('tool_tip.accept_follow_request')"
	@click="approveUser()"
	/>
	<FAIcon
	icon="times"
	class="fa-scale-110 fa-old-padding follow-request-reject"
	:title="$t('tool_tip.reject_follow_request')"
	@click="denyUser()"
	/>
	</div>
	</div>
	<div
	v-else-if="notification.type === 'move'"
	class="move-text"
	>
	<router-link :to="targetUserProfileLink">
	- @{{ notification.target.screen_name }}
	+ @{{ notification.target.screen_name_ui }}
	</router-link>
	</div>
	<template v-else>
	<status-content
	class="faint"
	:status="notification.action"
	/>
	</template>
	</div>
	</div>
	</div>
	</template>

	<script src="./notification.js"></script>
	<style src="./notification.scss" lang="scss"></style>
	diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
	index 5e417fa0ed..bfe39212c5 100644
	--- a/src/components/popover/popover.js
	+++ b/src/components/popover/popover.js
	@@ -1,174 +1,177 @@
	const Popover = {
	name: 'Popover',
	props: {
	// Action to trigger popover: either 'hover' or 'click'
	trigger: String,
	// Either 'top' or 'bottom'
	placement: String,
	// Takes object with properties 'x' and 'y', values of these can be
	// 'container' for using offsetParent as boundaries for either axis
	// or 'viewport'
	boundTo: Object,
	// Takes a selector to use as a replacement for the parent container
	// for getting boundaries for x an y axis
	boundToSelector: String,
	// Takes a top/bottom/left/right object, how much space to leave
	// between boundary and popover element
	margin: Object,
	// Takes a x/y object and tells how many pixels to offset from
	// anchor point on either axis
	offset: Object,
	// Replaces the classes you may want for the popover container.
	// Use 'popover-default' in addition to get the default popover
	// styles with your custom class.
	popoverClass: String,
	// If true, subtract padding when calculating position for the popover,
	// use it when popover offset looks to be different on top vs bottom.
	removePadding: Boolean
	},
	data () {
	return {
	hidden: true,
	styles: { opacity: 0 },
	oldSize: { width: 0, height: 0 }
	}
	},
	methods: {
	containerBoundingClientRect () {
	const container = this.boundToSelector ? this.$el.closest(this.boundToSelector) : this.$el.offsetParent
	return container.getBoundingClientRect()
	},
	updateStyles () {
	if (this.hidden) {
	this.styles = {
	opacity: 0
	}
	return
	}

	// Popover will be anchored around this element, trigger ref is the container, so
	// its children are what are inside the slot. Expect only one slot="trigger".
	const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) \|\| this.$el
	const screenBox = anchorEl.getBoundingClientRect()
	// Screen position of the origin point for popover
	const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top }
	const content = this.$refs.content
	// Minor optimization, don't call a slow reflow call if we don't have to
	const parentBounds = this.boundTo &&
	(this.boundTo.x === 'container' \|\| this.boundTo.y === 'container') &&
	this.containerBoundingClientRect()

	const margin = this.margin \|\| {}

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

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

	let horizOffset = 0

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

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

	// Default to whatever user wished with placement prop
	let usingTop = this.placement !== 'bottom'

	// Handle special cases, first force to displaying on top if there's not space on bottom,
	// regardless of what placement value was. Then check if there's not space on top, and
	// force to bottom, again regardless of what placement value was.
	if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
	if (origin.y - content.offsetHeight < yBounds.min) usingTop = false

	let vPadding = 0
	if (this.removePadding && usingTop) {
	const anchorStyle = getComputedStyle(anchorEl)
	vPadding = parseFloat(anchorStyle.paddingTop) + parseFloat(anchorStyle.paddingBottom)
	}

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

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

	// Note, separate translateX and translateY avoids blurry text on chromium,
	// single translate or translate3d resulted in blurry text.
	this.styles = {
	opacity: 1,
	transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)`
	}
	},
	showPopover () {
	- if (this.hidden) this.$emit('show')
	+ const wasHidden = this.hidden
	this.hidden = false
	- this.$nextTick(this.updateStyles)
	+ this.$nextTick(() => {
	+ if (wasHidden) this.$emit('show')
	+ this.updateStyles()
	+ })
	},
	hidePopover () {
	if (!this.hidden) this.$emit('close')
	this.hidden = true
	this.styles = { opacity: 0 }
	},
	onMouseenter (e) {
	if (this.trigger === 'hover') this.showPopover()
	},
	onMouseleave (e) {
	if (this.trigger === 'hover') this.hidePopover()
	},
	onClick (e) {
	if (this.trigger === 'click') {
	if (this.hidden) {
	this.showPopover()
	} else {
	this.hidePopover()
	}
	}
	},
	onClickOutside (e) {
	if (this.hidden) return
	if (this.$el.contains(e.target)) return
	this.hidePopover()
	}
	},
	updated () {
	// Monitor changes to content size, update styles only when content sizes have changed,
	// that should be the only time we need to move the popover box if we don't care about scroll
	// or resize
	const content = this.$refs.content
	if (!content) return
	if (this.oldSize.width !== content.offsetWidth \|\| this.oldSize.height !== content.offsetHeight) {
	this.updateStyles()
	this.oldSize = { width: content.offsetWidth, height: content.offsetHeight }
	}
	},
	created () {
	document.addEventListener('click', this.onClickOutside)
	},
	destroyed () {
	document.removeEventListener('click', this.onClickOutside)
	this.hidePopover()
	}
	}

	export default Popover
	diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
	index 5e7b7580b1..ce82c90da7 100644
	--- a/src/components/react_button/react_button.js
	+++ b/src/components/react_button/react_button.js
	@@ -1,63 +1,69 @@
	import Popover from '../popover/popover.vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'

	library.add(faSmileBeam)

	const ReactButton = {
	props: ['status'],
	data () {
	return {
	filterWord: ''
	}
	},
	components: {
	Popover
	},
	methods: {
	addReaction (event, emoji, close) {
	const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
	if (existingReaction && existingReaction.me) {
	this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
	} else {
	this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
	}
	close()
	+ },
	+ focusInput () {
	+ this.$nextTick(() => {
	+ const input = this.$el.querySelector('input')
	+ if (input) input.focus()
	+ })
	}
	},
	computed: {
	commonEmojis () {
	return [
	{ displayText: 'thumbsup', replacement: '👍' },
	{ displayText: 'angry', replacement: '😠' },
	{ displayText: 'eyes', replacement: '👀' },
	{ displayText: 'joy', replacement: '😂' },
	{ displayText: 'fire', replacement: '🔥' }
	]
	},
	emojis () {
	if (this.filterWord !== '') {
	const filterWordLowercase = this.filterWord.toLowerCase()
	let orderedEmojiList = []
	for (const emoji of this.$store.state.instance.emoji) {
	if (emoji.replacement === this.filterWord) return [emoji]

	const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
	if (indexOfFilterWord > -1) {
	if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) {
	orderedEmojiList[indexOfFilterWord] = []
	}
	orderedEmojiList[indexOfFilterWord].push(emoji)
	}
	}
	return orderedEmojiList.flat()
	}
	return this.$store.state.instance.emoji \|\| []
	},
	mergedConfig () {
	return this.$store.getters.mergedConfig
	}
	}
	}

	export default ReactButton
	diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
	index 0473467458..4839024c61 100644
	--- a/src/components/react_button/react_button.vue
	+++ b/src/components/react_button/react_button.vue
	@@ -1,130 +1,131 @@
	<template>
	<Popover
	trigger="click"
	class="ReactButton"
	placement="top"
	:offset="{ y: 5 }"
	:bound-to="{ x: 'container' }"
	remove-padding
	+ @show="focusInput"
	>
	<div
	slot="content"
	slot-scope="{close}"
	>
	<div class="reaction-picker-filter">
	<input
	v-model="filterWord"
	size="1"
	:placeholder="$t('emoji.search_emoji')"
	>
	</div>
	<div class="reaction-picker">
	<span
	v-for="emoji in commonEmojis"
	:key="emoji.replacement"
	class="emoji-button"
	:title="emoji.displayText"
	@click="addReaction($event, emoji.replacement, close)"
	>
	{{ emoji.replacement }}
	</span>
	<div class="reaction-picker-divider" />
	<span
	v-for="(emoji, key) in emojis"
	:key="key"
	class="emoji-button"
	:title="emoji.displayText"
	@click="addReaction($event, emoji.replacement, close)"
	>
	{{ emoji.replacement }}
	</span>
	<div class="reaction-bottom-fader" />
	</div>
	</div>
	<span
	slot="trigger"
	class="popover-trigger"
	:title="$t('tool_tip.add_reaction')"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	:icon="['far', 'smile-beam']"
	/>
	</span>
	</Popover>
	</template>

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

	<style lang="scss">
	@import '../../_variables.scss';

	.ReactButton {
	.reaction-picker-filter {
	padding: 0.5em;
	display: flex;

	input {
	flex: 1;
	}
	}

	.reaction-picker-divider {
	height: 1px;
	width: 100%;
	margin: 0.5em;
	background-color: var(--border, $fallback--border);
	}

	.reaction-picker {
	width: 10em;
	height: 9em;
	font-size: 1.5em;
	overflow-y: scroll;
	display: flex;
	flex-wrap: wrap;
	padding: 0.5em;
	text-align: center;
	align-content: flex-start;
	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);
	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: exclude;

	.emoji-button {
	cursor: pointer;

	flex-basis: 20%;
	line-height: 1.5em;
	align-content: center;

	&:hover {
	transform: scale(1.25);
	}
	}
	}

	/* override of popover internal stuff */
	.popover-trigger-button {
	width: auto;
	}

	.popover-trigger {
	padding: 10px;
	margin: -10px;

	&:hover .svg-inline--fa {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}
	}

	</style>
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index 2bf93a9eb6..470c01f191 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,347 +1,347 @@
	import ReplyButton from '../reply_button/reply_button.vue'
	import FavoriteButton from '../favorite_button/favorite_button.vue'
	import ReactButton from '../react_button/react_button.vue'
	import RetweetButton from '../retweet_button/retweet_button.vue'
	import ExtraButtons from '../extra_buttons/extra_buttons.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	import UserCard from '../user_card/user_card.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import AvatarList from '../avatar_list/avatar_list.vue'
	import Timeago from '../timeago/timeago.vue'
	import StatusContent from '../status_content/status_content.vue'
	import StatusPopover from '../status_popover/status_popover.vue'
	import UserListPopover from '../user_list_popover/user_list_popover.vue'
	import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
	import { muteWordHits } from '../../services/status_parser/status_parser.js'
	import { unescape, uniqBy } from 'lodash'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faEnvelope,
	faLock,
	faLockOpen,
	faGlobe,
	faTimes,
	faRetweet,
	faReply,
	faPlusSquare,
	faSmileBeam,
	faEllipsisH,
	faStar,
	faEyeSlash,
	faEye,
	faThumbtack
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faEnvelope,
	faGlobe,
	faLock,
	faLockOpen,
	faTimes,
	faRetweet,
	faReply,
	faPlusSquare,
	faStar,
	faSmileBeam,
	faEllipsisH,
	faEyeSlash,
	faEye,
	faThumbtack
	)

	const Status = {
	name: 'Status',
	components: {
	ReplyButton,
	FavoriteButton,
	ReactButton,
	RetweetButton,
	ExtraButtons,
	PostStatusForm,
	UserCard,
	UserAvatar,
	AvatarList,
	Timeago,
	StatusPopover,
	UserListPopover,
	EmojiReactions,
	StatusContent
	},
	props: [
	'statusoid',
	'expandable',
	'inConversation',
	'focused',
	'highlight',
	'compact',
	'replies',
	'isPreview',
	'noHeading',
	'inlineExpanded',
	'showPinned',
	'inProfile',
	'profileUserId'
	],
	data () {
	return {
	replying: false,
	unmuted: false,
	userExpanded: false,
	mediaPlaying: [],
	suspendable: true,
	error: null
	}
	},
	computed: {
	muteWords () {
	return this.mergedConfig.muteWords
	},
	showReasonMutedThread () {
	return (
	this.status.thread_muted \|\|
	(this.status.reblog && this.status.reblog.thread_muted)
	) && !this.inConversation
	},
	repeaterClass () {
	const user = this.statusoid.user
	return highlightClass(user)
	},
	userClass () {
	const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
	return highlightClass(user)
	},
	deleted () {
	return this.statusoid.deleted
	},
	repeaterStyle () {
	const user = this.statusoid.user
	const highlight = this.mergedConfig.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	userStyle () {
	if (this.noHeading) return
	const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
	const highlight = this.mergedConfig.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	userProfileLink () {
	return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
	},
	replyProfileLink () {
	if (this.isReply) {
	return this.generateUserProfileLink(this.status.in_reply_to_user_id, this.replyToName)
	}
	},
	retweet () { return !!this.statusoid.retweeted_status },
	- retweeter () { return this.statusoid.user.name \|\| this.statusoid.user.screen_name },
	+ retweeter () { return this.statusoid.user.name \|\| this.statusoid.user.screen_name_ui },
	retweeterHtml () { return this.statusoid.user.name_html },
	retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },
	status () {
	if (this.retweet) {
	return this.statusoid.retweeted_status
	} else {
	return this.statusoid
	}
	},
	statusFromGlobalRepository () {
	// NOTE: Consider to replace status with statusFromGlobalRepository
	return this.$store.state.statuses.allStatusesObject[this.status.id]
	},
	loggedIn () {
	return !!this.currentUser
	},
	muteWordHits () {
	return muteWordHits(this.status, this.muteWords)
	},
	muted () {
	if (this.statusoid.user.id === this.currentUser.id) return false
	const { status } = this
	const { reblog } = status
	const relationship = this.$store.getters.relationship(status.user.id)
	const relationshipReblog = reblog && this.$store.getters.relationship(reblog.user.id)
	const reasonsToMute = (
	// Post is muted according to BE
	status.muted \|\|
	// Reprööt of a muted post according to BE
	(reblog && reblog.muted) \|\|
	// Muted user
	relationship.muting \|\|
	// Muted user of a reprööt
	(relationshipReblog && relationshipReblog.muting) \|\|
	// Thread is muted
	status.thread_muted \|\|
	// Wordfiltered
	this.muteWordHits.length > 0
	)
	const excusesNotToMute = (
	(
	this.inProfile && (
	// Don't mute user's posts on user timeline (except reblogs)
	(!reblog && status.user.id === this.profileUserId) \|\|
	// Same as above but also allow self-reblogs
	(reblog && reblog.user.id === this.profileUserId)
	)
	) \|\|
	// Don't mute statuses in muted conversation when said conversation is opened
	(this.inConversation && status.thread_muted)
	// No excuses if post has muted words
	) && !this.muteWordHits.length > 0

	return !this.unmuted && !excusesNotToMute && reasonsToMute
	},
	hideFilteredStatuses () {
	return this.mergedConfig.hideFilteredStatuses
	},
	hideStatus () {
	return (this.muted && this.hideFilteredStatuses) \|\| this.virtualHidden
	},
	isFocused () {
	// retweet or root of an expanded conversation
	if (this.focused) {
	return true
	} else if (!this.inConversation) {
	return false
	}
	// use conversation highlight only when in conversation
	return this.status.id === this.highlight
	},
	isReply () {
	return !!(this.status.in_reply_to_status_id && this.status.in_reply_to_user_id)
	},
	replyToName () {
	if (this.status.in_reply_to_screen_name) {
	return this.status.in_reply_to_screen_name
	} else {
	const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
	- return user && user.screen_name
	+ return user && user.screen_name_ui
	}
	},
	replySubject () {
	if (!this.status.summary) return ''
	const decodedSummary = unescape(this.status.summary)
	const behavior = this.mergedConfig.subjectLineBehavior
	const startsWithRe = decodedSummary.match(/^re[: ]/i)
	if ((behavior !== 'noop' && startsWithRe) \|\| behavior === 'masto') {
	return decodedSummary
	} else if (behavior === 'email') {
	return 're: '.concat(decodedSummary)
	} else if (behavior === 'noop') {
	return ''
	}
	},
	combinedFavsAndRepeatsUsers () {
	// Use the status from the global status repository since favs and repeats are saved in it
	const combinedUsers = [].concat(
	this.statusFromGlobalRepository.favoritedBy,
	this.statusFromGlobalRepository.rebloggedBy
	)
	return uniqBy(combinedUsers, 'id')
	},
	tags () {
	return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ')
	},
	hidePostStats () {
	return this.mergedConfig.hidePostStats
	},
	currentUser () {
	return this.$store.state.users.currentUser
	},
	betterShadow () {
	return this.$store.state.interface.browserSupport.cssFilter
	},
	mergedConfig () {
	return this.$store.getters.mergedConfig
	},
	isSuspendable () {
	return !this.replying && this.mediaPlaying.length === 0
	}
	},
	methods: {
	visibilityIcon (visibility) {
	switch (visibility) {
	case 'private':
	return 'lock'
	case 'unlisted':
	return 'lock-open'
	case 'direct':
	return 'envelope'
	default:
	return 'globe'
	}
	},
	showError (error) {
	this.error = error
	},
	clearError () {
	this.error = undefined
	},
	toggleReplying () {
	this.replying = !this.replying
	},
	gotoOriginal (id) {
	if (this.inConversation) {
	this.$emit('goto', id)
	}
	},
	toggleExpanded () {
	this.$emit('toggleExpanded')
	},
	toggleMute () {
	this.unmuted = !this.unmuted
	},
	toggleUserExpanded () {
	this.userExpanded = !this.userExpanded
	},
	generateUserProfileLink (id, name) {
	return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
	},
	addMediaPlaying (id) {
	this.mediaPlaying.push(id)
	},
	removeMediaPlaying (id) {
	this.mediaPlaying = this.mediaPlaying.filter(mediaId => mediaId !== id)
	}
	},
	watch: {
	'highlight': function (id) {
	if (this.status.id === id) {
	let rect = this.$el.getBoundingClientRect()
	if (rect.top < 100) {
	// Post is above screen, match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.height >= (window.innerHeight - 50)) {
	// Post we want to see is taller than screen so match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.bottom > window.innerHeight - 50) {
	// Post is below screen, match its bottom to screen bottom
	window.scrollBy(0, rect.bottom - window.innerHeight + 50)
	}
	}
	},
	'status.repeat_num': function (num) {
	// refetch repeats when repeat_num is changed in any way
	if (this.isFocused && this.statusFromGlobalRepository.rebloggedBy && this.statusFromGlobalRepository.rebloggedBy.length !== num) {
	this.$store.dispatch('fetchRepeats', this.status.id)
	}
	},
	'status.fave_num': function (num) {
	// refetch favs when fave_num is changed in any way
	if (this.isFocused && this.statusFromGlobalRepository.favoritedBy && this.statusFromGlobalRepository.favoritedBy.length !== num) {
	this.$store.dispatch('fetchFavs', this.status.id)
	}
	},
	'isSuspendable': function (val) {
	this.suspendable = val
	}
	},
	filters: {
	capitalize: function (str) {
	return str.charAt(0).toUpperCase() + str.slice(1)
	}
	}
	}

	export default Status
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index 6ee8117f2a..00e962f301 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,410 +1,410 @@
	<template>
	<!-- eslint-disable vue/no-v-html -->
	<div
	v-if="!hideStatus"
	class="Status"
	:class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
	>
	<div
	v-if="error"
	class="alert error"
	>
	{{ error }}
	<span
	class="fa-scale-110 fa-old-padding"
	@click="clearError"
	>
	<FAIcon icon="times" />
	</span>
	</div>
	<template v-if="muted && !isPreview">
	<div class="status-container muted">
	<small class="status-username">
	<FAIcon
	v-if="muted && retweet"
	class="fa-scale-110 fa-old-padding repeat-icon"
	icon="retweet"
	/>
	<router-link :to="userProfileLink">
	- {{ status.user.screen_name }}
	+ {{ status.user.screen_name_ui }}
	</router-link>
	</small>
	<small
	v-if="showReasonMutedThread"
	class="mute-thread"
	>
	{{ $t('status.thread_muted') }}
	</small>
	<small
	v-if="showReasonMutedThread && muteWordHits.length > 0"
	class="mute-thread"
	>
	{{ $t('status.thread_muted_and_words') }}
	</small>
	<small
	class="mute-words"
	:title="muteWordHits.join(', ')"
	>
	{{ muteWordHits.join(', ') }}
	</small>
	<button
	class="unmute button-unstyled"
	@click.prevent="toggleMute"
	>
	<FAIcon
	icon="eye-slash"
	class="fa-scale-110 fa-old-padding"
	/>
	</button>
	</div>
	</template>
	<template v-else>
	<div
	v-if="showPinned"
	class="pin"
	>
	<FAIcon
	icon="thumbtack"
	class="faint"
	/>
	<span class="faint">{{ $t('status.pinned') }}</span>
	</div>
	<div
	v-if="retweet && !noHeading && !inConversation"
	:class="[repeaterClass, { highlighted: repeaterStyle }]"
	:style="[repeaterStyle]"
	class="status-container repeat-info"
	>
	<UserAvatar
	v-if="retweet"
	class="left-side repeater-avatar"
	:better-shadow="betterShadow"
	:user="statusoid.user"
	/>
	<div class="right-side faint">
	<span
	class="status-username repeater-name"
	:title="retweeter"
	>
	<router-link
	v-if="retweeterHtml"
	:to="retweeterProfileLink"
	v-html="retweeterHtml"
	/>
	<router-link
	v-else
	:to="retweeterProfileLink"
	>{{ retweeter }}</router-link>
	</span>
	<FAIcon
	icon="retweet"
	class="repeat-icon"
	:title="$t('tool_tip.repeat')"
	/>
	{{ $t('timeline.repeated') }}
	</div>
	</div>

	<div
	v-if="!deleted"
	:class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
	:style="[ userStyle ]"
	class="status-container"
	:data-tags="tags"
	>
	<div
	v-if="!noHeading"
	class="left-side"
	>
	<router-link
	:to="userProfileLink"
	@click.stop.prevent.capture.native="toggleUserExpanded"
	>
	<UserAvatar
	:compact="compact"
	:better-shadow="betterShadow"
	:user="status.user"
	/>
	</router-link>
	</div>
	<div class="right-side">
	<UserCard
	v-if="userExpanded"
	:user-id="status.user.id"
	:rounded="true"
	:bordered="true"
	class="usercard"
	/>
	<div
	v-if="!noHeading"
	class="status-heading"
	>
	<div class="heading-name-row">
	<div class="heading-left">
	<h4
	v-if="status.user.name_html"
	class="status-username"
	:title="status.user.name"
	v-html="status.user.name_html"
	/>
	<h4
	v-else
	class="status-username"
	:title="status.user.name"
	>
	{{ status.user.name }}
	</h4>
	<router-link
	class="account-name"
	- :title="status.user.screen_name"
	+ :title="status.user.screen_name_ui"
	:to="userProfileLink"
	>
	- {{ status.user.screen_name }}
	+ {{ status.user.screen_name_ui }}
	</router-link>
	<img
	v-if="!!(status.user && status.user.favicon)"
	class="status-favicon"
	:src="status.user.favicon"
	>
	</div>

	<span class="heading-right">
	<router-link
	class="timeago faint-link"
	:to="{ name: 'conversation', params: { id: status.id } }"
	>
	<Timeago
	:time="status.created_at"
	:auto-update="60"
	/>
	</router-link>
	<span
	v-if="status.visibility"
	class="visibility-icon"
	:title="status.visibility \| capitalize"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	:icon="visibilityIcon(status.visibility)"
	/>
	</span>
	<button
	v-if="expandable && !isPreview"
	class="button-unstyled"
	:title="$t('status.expand')"
	@click.prevent="toggleExpanded"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	icon="plus-square"
	/>
	</button>
	<button
	v-if="unmuted"
	class="button-unstyled"
	@click.prevent="toggleMute"
	>
	<FAIcon
	fixed-width
	icon="eye-slash"
	class="fa-scale-110"
	/>
	</button>
	</span>
	</div>

	<div class="heading-reply-row">
	<div
	v-if="isReply"
	class="reply-to-and-accountname"
	>
	<StatusPopover
	v-if="!isPreview"
	:status-id="status.parent_visible && status.in_reply_to_status_id"
	class="reply-to-popover"
	style="min-width: 0"
	:class="{ '-strikethrough': !status.parent_visible }"
	>
	<button
	class="button-unstyled reply-to"
	:aria-label="$t('tool_tip.reply')"
	@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="reply"
	flip="horizontal"
	/>
	<span
	class="faint-link reply-to-text"
	>
	{{ $t('status.reply_to') }}
	</span>
	</button>
	</StatusPopover>

	<span
	v-else
	class="reply-to-no-popover"
	>
	<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
	</span>
	<router-link
	class="reply-to-link"
	:title="replyToName"
	:to="replyProfileLink"
	>
	{{ replyToName }}
	</router-link>
	<span
	v-if="replies && replies.length"
	class="faint replies-separator"
	>
	-
	</span>
	</div>
	<div
	v-if="inConversation && !isPreview && replies && replies.length"
	class="replies"
	>
	<span class="faint">{{ $t('status.replies_list') }}</span>
	<StatusPopover
	v-for="reply in replies"
	:key="reply.id"
	:status-id="reply.id"
	>
	<button
	class="button-unstyled -link reply-link"
	@click.prevent="gotoOriginal(reply.id)"
	>
	{{ reply.name }}
	</button>
	</StatusPopover>
	</div>
	</div>
	</div>

	<StatusContent
	:status="status"
	:no-heading="noHeading"
	:highlight="highlight"
	:focused="isFocused"
	@mediaplay="addMediaPlaying($event)"
	@mediapause="removeMediaPlaying($event)"
	/>

	<transition name="fade">
	<div
	v-if="!hidePostStats && isFocused && combinedFavsAndRepeatsUsers.length > 0"
	class="favs-repeated-users"
	>
	<div class="stats">
	<UserListPopover
	v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0"
	:users="statusFromGlobalRepository.rebloggedBy"
	>
	<div class="stat-count">
	<a class="stat-title">{{ $t('status.repeats') }}</a>
	<div class="stat-number">
	{{ statusFromGlobalRepository.rebloggedBy.length }}
	</div>
	</div>
	</UserListPopover>
	<UserListPopover
	v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0"
	:users="statusFromGlobalRepository.favoritedBy"
	>
	<div
	class="stat-count"
	>
	<a class="stat-title">{{ $t('status.favorites') }}</a>
	<div class="stat-number">
	{{ statusFromGlobalRepository.favoritedBy.length }}
	</div>
	</div>
	</UserListPopover>
	<div class="avatar-row">
	<AvatarList :users="combinedFavsAndRepeatsUsers" />
	</div>
	</div>
	</div>
	</transition>

	<EmojiReactions
	v-if="(mergedConfig.emojiReactionsOnTimeline \|\| isFocused) && (!noHeading && !isPreview)"
	:status="status"
	/>

	<div
	v-if="!noHeading && !isPreview"
	class="status-actions"
	>
	<reply-button
	:replying="replying"
	:status="status"
	@toggle="toggleReplying"
	/>
	<retweet-button
	:visibility="status.visibility"
	:logged-in="loggedIn"
	:status="status"
	/>
	<favorite-button
	:logged-in="loggedIn"
	:status="status"
	/>
	<ReactButton
	v-if="loggedIn"
	:status="status"
	/>
	<extra-buttons
	:status="status"
	@onError="showError"
	@onSuccess="clearError"
	/>
	</div>
	</div>
	</div>
	<div
	v-else
	class="gravestone"
	>
	<div class="left-side">
	<UserAvatar :compact="compact" />
	</div>
	<div class="right-side">
	<div class="deleted-text">
	{{ $t('status.status_deleted') }}
	</div>
	<reply-button
	v-if="replying"
	:replying="replying"
	:status="status"
	@toggle="toggleReplying"
	/>
	</div>
	</div>
	<div
	v-if="replying"
	class="status-container reply-form"
	>
	<PostStatusForm
	class="reply-body"
	:reply-to="status.id"
	:attentions="status.attentions"
	:replied-user="status.user"
	:copy-message-scope="status.visibility"
	:subject="replySubject"
	@posted="toggleReplying"
	/>
	</div>
	</template>
	</div>
	<!-- eslint-enable vue/no-v-html -->
	</template>

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

	<style src="./status.scss" lang="scss"></style>
	diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
	index 0f7c584b13..4040e263c8 100644
	--- a/src/components/user_avatar/user_avatar.vue
	+++ b/src/components/user_avatar/user_avatar.vue
	@@ -1,60 +1,60 @@
	<template>
	<StillImage
	v-if="user"
	class="Avatar"
	- :alt="user.screen_name"
	- :title="user.screen_name"
	+ :alt="user.screen_name_ui"
	+ :title="user.screen_name_ui"
	:src="imgSrc(user.profile_image_url_original)"
	:class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
	:image-load-error="imageLoadError"
	/>
	<div
	v-else
	class="Avatar -placeholder"
	:class="{ 'avatar-compact': compact }"
	/>
	</template>

	<script src="./user_avatar.js"></script>
	<style lang="scss">
	@import '../../_variables.scss';

	.Avatar {
	--_avatarShadowBox: var(--avatarStatusShadow);
	--_avatarShadowFilter: var(--avatarStatusShadowFilter);
	--_avatarShadowInset: var(--avatarStatusShadowInset);
	--_still-image-label-visibility: hidden;

	width: 48px;
	height: 48px;
	box-shadow: var(--_avatarShadowBox);
	border-radius: $fallback--avatarRadius;
	border-radius: var(--avatarRadius, $fallback--avatarRadius);

	img {
	width: 100%;
	height: 100%;
	}

	&.better-shadow {
	box-shadow: var(--_avatarShadowInset);
	filter: var(--_avatarShadowFilter);
	}

	&.animated::before {
	display: none;
	}

	&.avatar-compact {
	width: 32px;
	height: 32px;
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	}

	&.-placeholder {
	background-color: $fallback--fg;
	background-color: var(--fg, $fallback--fg);
	}
	}
	</style>
	diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
	index 572943b594..60776ebbba 100644
	--- a/src/components/user_card/user_card.vue
	+++ b/src/components/user_card/user_card.vue
	@@ -1,613 +1,613 @@
	<template>
	<div
	class="user-card"
	:class="classes"
	>
	<div
	:class="{ 'hide-bio': hideBio }"
	:style="style"
	class="background-image"
	/>
	<div class="panel-heading">
	<div class="user-info">
	<div class="container">
	<a
	v-if="allowZoomingAvatar"
	class="user-info-avatar-link"
	@click="zoomAvatar"
	>
	<UserAvatar
	:better-shadow="betterShadow"
	:user="user"
	/>
	<div class="user-info-avatar-link-overlay">
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="search-plus"
	/>
	</div>
	</a>
	<router-link
	v-else
	:to="userProfileLink(user)"
	>
	<UserAvatar
	:better-shadow="betterShadow"
	:user="user"
	/>
	</router-link>
	<div class="user-summary">
	<div class="top-line">
	<!-- eslint-disable vue/no-v-html -->
	<div
	v-if="user.name_html"
	:title="user.name"
	class="user-name"
	v-html="user.name_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<div
	v-else
	:title="user.name"
	class="user-name"
	>
	{{ user.name }}
	</div>
	<a
	v-if="isOtherUser && !user.is_local"
	:href="user.statusnet_profile_url"
	target="_blank"
	class="external-link-button"
	>
	<FAIcon
	class="icon"
	icon="external-link-alt"
	/>
	</a>
	<AccountActions
	v-if="isOtherUser && loggedIn"
	:user="user"
	:relationship="relationship"
	/>
	</div>
	<div class="bottom-line">
	<router-link
	class="user-screen-name"
	- :title="user.screen_name"
	+ :title="user.screen_name_ui"
	:to="userProfileLink(user)"
	>
	- @{{ user.screen_name }}
	+ @{{ user.screen_name_ui }}
	</router-link>
	<template v-if="!hideBio">
	<span
	v-if="!!visibleRole"
	class="alert user-role"
	>
	{{ $t(`general.role.${visibleRole}`) }}
	</span>
	<span
	v-if="user.bot"
	class="alert user-role"
	>
	{{ $t('user_card.bot') }}
	</span>
	</template>
	<span v-if="user.locked">
	<FAIcon
	class="lock-icon"
	icon="lock"
	size="sm"
	/>
	</span>
	<span
	v-if="!mergedConfig.hideUserStats && !hideBio"
	class="dailyAvg"
	>{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
	</div>
	</div>
	</div>
	<div class="user-meta">
	<div
	v-if="relationship.followed_by && loggedIn && isOtherUser"
	class="following"
	>
	{{ $t('user_card.follows_you') }}
	</div>
	<div
	v-if="isOtherUser && (loggedIn \|\| !switcher)"
	class="highlighter"
	>
	<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
	<input
	v-if="userHighlightType !== 'disabled'"
	:id="'userHighlightColorTx'+user.id"
	v-model="userHighlightColor"
	class="userHighlightText"
	type="text"
	>
	<input
	v-if="userHighlightType !== 'disabled'"
	:id="'userHighlightColor'+user.id"
	v-model="userHighlightColor"
	class="userHighlightCl"
	type="color"
	>
	<label
	for="theme_tab"
	class="userHighlightSel select"
	>
	<select
	:id="'userHighlightSel'+user.id"
	v-model="userHighlightType"
	class="userHighlightSel"
	>
	<option value="disabled">No highlight</option>
	<option value="solid">Solid bg</option>
	<option value="striped">Striped bg</option>
	<option value="side">Side stripe</option>
	</select>
	<FAIcon
	class="select-down-icon"
	icon="chevron-down"
	/>
	</label>
	</div>
	</div>
	<div
	v-if="loggedIn && isOtherUser"
	class="user-interactions"
	>
	<div class="btn-group">
	<FollowButton :relationship="relationship" />
	<template v-if="relationship.following">
	<ProgressButton
	v-if="!relationship.subscribing"
	class="btn button-default"
	:click="subscribeUser"
	:title="$t('user_card.subscribe')"
	>
	<FAIcon icon="bell" />
	</ProgressButton>
	<ProgressButton
	v-else
	class="btn button-default toggled"
	:click="unsubscribeUser"
	:title="$t('user_card.unsubscribe')"
	>
	<FALayers>
	<FAIcon
	icon="rss"
	transform="left-5 shrink-6 up-3 rotate-20"
	flip="horizontal"
	/>
	<FAIcon
	icon="rss"
	transform="right-5 shrink-6 up-3 rotate-20"
	/>
	<FAIcon icon="bell" />
	</FALayers>
	</ProgressButton>
	</template>
	</div>
	<div>
	<button
	v-if="relationship.muting"
	class="btn button-default btn-block toggled"
	@click="unmuteUser"
	>
	{{ $t('user_card.muted') }}
	</button>
	<button
	v-else
	class="btn button-default btn-block"
	@click="muteUser"
	>
	{{ $t('user_card.mute') }}
	</button>
	</div>
	<div>
	<button
	class="btn button-default btn-block"
	@click="mentionUser"
	>
	{{ $t('user_card.mention') }}
	</button>
	</div>
	<ModerationTools
	v-if="loggedIn.role === "admin""
	:user="user"
	/>
	</div>
	<div
	v-if="!loggedIn && user.is_local"
	class="user-interactions"
	>
	<RemoteFollow :user="user" />
	</div>
	</div>
	</div>
	<div
	v-if="!hideBio"
	class="panel-body"
	>
	<div
	v-if="!mergedConfig.hideUserStats && switcher"
	class="user-counts"
	>
	<div
	class="user-count"
	@click.prevent="setProfileView('statuses')"
	>
	<h5>{{ $t('user_card.statuses') }}</h5>
	<span>{{ user.statuses_count }} <br></span>
	</div>
	<div
	class="user-count"
	@click.prevent="setProfileView('friends')"
	>
	<h5>{{ $t('user_card.followees') }}</h5>
	<span>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</span>
	</div>
	<div
	class="user-count"
	@click.prevent="setProfileView('followers')"
	>
	<h5>{{ $t('user_card.followers') }}</h5>
	<span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
	</div>
	</div>
	<!-- eslint-disable vue/no-v-html -->
	<p
	v-if="!hideBio && user.description_html"
	class="user-card-bio"
	@click.prevent="linkClicked"
	v-html="user.description_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<p
	v-else-if="!hideBio"
	class="user-card-bio"
	>
	{{ user.description }}
	</p>
	</div>
	</div>
	</template>

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

	<style lang="scss">
	@import '../../_variables.scss';

	.user-card {
	position: relative;

	&:hover .Avatar {
	--_still-image-img-visibility: visible;
	--_still-image-canvas-visibility: hidden;
	}

	.panel-heading {
	padding: .5em 0;
	text-align: center;
	box-shadow: none;
	background: transparent;
	flex-direction: column;
	align-items: stretch;
	// create new stacking context
	position: relative;
	}

	.panel-body {
	word-wrap: break-word;
	border-bottom-right-radius: inherit;
	border-bottom-left-radius: inherit;
	// create new stacking context
	position: relative;
	}

	.background-image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	mask: linear-gradient(to top, white, transparent) bottom no-repeat,
	linear-gradient(to top, white, white);
	// Autoprefixed seem to ignore this one, and also syntax is different
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	background-size: cover;
	mask-size: 100% 60%;
	border-top-left-radius: calc(var(--panelRadius) - 1px);
	border-top-right-radius: calc(var(--panelRadius) - 1px);
	background-color: var(--profileBg);

	&.hide-bio {
	mask-size: 100% 40px;
	}
	}

	p {
	margin-bottom: 0;
	}

	&-bio {
	text-align: center;

	a {
	color: $fallback--link;
	color: var(--postLink, $fallback--link);
	}

	img {
	object-fit: contain;
	vertical-align: middle;
	max-width: 100%;
	max-height: 400px;

	&.emoji {
	width: 32px;
	height: 32px;
	}
	}
	}

	// Modifiers

	&-rounded-t {
	border-top-left-radius: $fallback--panelRadius;
	border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
	border-top-right-radius: $fallback--panelRadius;
	border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
	}

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

	&-bordered {
	border-width: 1px;
	border-style: solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	}
	}

	.user-info {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	padding: 0 26px;

	.container {
	padding: 16px 0 6px;
	display: flex;
	align-items: flex-start;
	max-height: 56px;

	.Avatar {
	--_avatarShadowBox: var(--avatarShadow);
	--_avatarShadowFilter: var(--avatarShadowFilter);
	--_avatarShadowInset: var(--avatarShadowInset);

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

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

	&-overlay {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: $fallback--avatarRadius;
	border-radius: var(--avatarRadius, $fallback--avatarRadius);
	opacity: 0;
	transition: opacity .2s ease;

	svg {
	color: #FFF;
	}
	}

	&:hover &-overlay {
	opacity: 1;
	}
	}

	.external-link-button {
	cursor: pointer;
	width: 2.5em;
	text-align: center;
	margin: -0.5em 0;
	padding: 0.5em 0;

	&:not(:hover) .icon {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	}

	.user-summary {
	display: block;
	margin-left: 0.6em;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1 1 0;
	// This is so that text doesn't get overlapped by avatar's shadow if it has
	// big one
	z-index: 1;

	img {
	width: 26px;
	height: 26px;
	vertical-align: middle;
	object-fit: contain
	}

	.top-line {
	display: flex;
	}
	}

	.user-name {
	text-overflow: ellipsis;
	overflow: hidden;
	flex: 1 1 auto;
	margin-right: 1em;
	font-size: 15px;

	img {
	object-fit: contain;
	height: 16px;
	width: 16px;
	vertical-align: middle;
	}
	}

	.bottom-line {
	display: flex;
	font-weight: light;
	font-size: 15px;

	.lock-icon {
	margin-left: 0.5em;
	}

	.user-screen-name {
	min-width: 1px;
	flex: 0 1 auto;
	text-overflow: ellipsis;
	overflow: hidden;
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}

	.dailyAvg {
	min-width: 1px;
	flex: 0 0 auto;
	margin-left: 1em;
	font-size: 0.7em;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}

	.user-role {
	flex: none;
	color: $fallback--text;
	color: var(--alertNeutralText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--alertNeutral, $fallback--fg);
	}
	}

	.user-meta {
	margin-bottom: .15em;
	display: flex;
	align-items: baseline;
	font-size: 14px;
	line-height: 22px;
	flex-wrap: wrap;

	.following {
	flex: 1 0 auto;
	margin: 0;
	margin-bottom: .25em;
	text-align: left;
	}

	.highlighter {
	flex: 0 1 auto;
	display: flex;
	flex-wrap: wrap;
	margin-right: -.5em;
	align-self: start;

	.userHighlightCl {
	padding: 2px 10px;
	flex: 1 0 auto;
	}

	.userHighlightSel,
	.userHighlightSel.select {
	padding-top: 0;
	padding-bottom: 0;
	flex: 1 0 auto;
	}
	.userHighlightSel.select svg {
	line-height: 22px;
	}

	.userHighlightText {
	width: 70px;
	flex: 1 0 auto;
	}

	.userHighlightCl,
	.userHighlightText,
	.userHighlightSel,
	.userHighlightSel.select {
	height: 22px;
	vertical-align: top;
	margin-right: .5em;
	margin-bottom: .25em;
	}
	}
	}
	.user-interactions {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	margin-right: -.75em;

	> * {
	margin: 0 .75em .6em 0;
	white-space: nowrap;
	min-width: 95px;
	}

	button {
	margin: 0;
	}
	}
	}

	.user-counts {
	display: flex;
	line-height:16px;
	padding: .5em 1.5em 0em 1.5em;
	text-align: center;
	justify-content: space-between;
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	flex-wrap: wrap;
	}

	.user-count {
	flex: 1 0 auto;
	padding: .5em 0 .5em 0;
	margin: 0 .5em;

	h5 {
	font-size:1em;
	font-weight: bolder;
	margin: 0 0 0.25em;
	}
	a {
	text-decoration: none;
	}
	}
	</style>
	diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
	index 95673733e3..d0aa315e1d 100644
	--- a/src/components/user_list_popover/user_list_popover.vue
	+++ b/src/components/user_list_popover/user_list_popover.vue
	@@ -1,75 +1,75 @@
	<template>
	<Popover
	trigger="hover"
	placement="top"
	:offset="{ y: 5 }"
	>
	<template slot="trigger">
	<slot />
	</template>
	<div
	slot="content"
	class="user-list-popover"
	>
	<div v-if="users.length">
	<div
	v-for="(user) in usersCapped"
	:key="user.id"
	class="user-list-row"
	>
	<UserAvatar
	:user="user"
	class="avatar-small"
	:compact="true"
	/>
	<div class="user-list-names">
	<!-- eslint-disable vue/no-v-html -->
	<span v-html="user.name_html" />
	<!-- eslint-enable vue/no-v-html -->
	- <span class="user-list-screen-name">{{ user.screen_name }}</span>
	+ <span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
	</div>
	</div>
	</div>
	<div v-else>
	<FAIcon
	icon="circle-notch"
	spin
	size="3x"
	/>
	</div>
	</div>
	</Popover>
	</template>

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

	<style lang="scss">
	@import '../../_variables.scss';

	.user-list-popover {
	padding: 0.5em;

	.user-list-row {
	padding: 0.25em;
	display: flex;
	flex-direction: row;

	.user-list-names {
	display: flex;
	flex-direction: column;
	margin-left: 0.5em;
	min-width: 5em;

	img {
	width: 1em;
	height: 1em;
	}
	}

	.user-list-screen-name {
	font-size: 9px;
	}
	}
	}

	</style>
	diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
	index fb43094f18..a71c02c193 100644
	--- a/src/components/user_reporting_modal/user_reporting_modal.vue
	+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
	@@ -1,184 +1,184 @@
	<template>
	<Modal
	v-if="isOpen"
	@backdropClicked="closeModal"
	>
	<div class="user-reporting-panel panel">
	<div class="panel-heading">
	<div class="title">
	- {{ $t('user_reporting.title', [user.screen_name]) }}
	+ {{ $t('user_reporting.title', [user.screen_name_ui]) }}
	</div>
	</div>
	<div class="panel-body">
	<div class="user-reporting-panel-left">
	<div>
	<p>{{ $t('user_reporting.add_comment_description') }}</p>
	<textarea
	v-model="comment"
	class="form-control"
	:placeholder="$t('user_reporting.additional_comments')"
	rows="1"
	@input="resize"
	/>
	</div>
	<div v-if="!user.is_local">
	<p>{{ $t('user_reporting.forward_description') }}</p>
	<Checkbox v-model="forward">
	{{ $t('user_reporting.forward_to', [remoteInstance]) }}
	</Checkbox>
	</div>
	<div>
	<button
	class="btn button-default"
	:disabled="processing"
	@click="reportUser"
	>
	{{ $t('user_reporting.submit') }}
	</button>
	<div
	v-if="error"
	class="alert error"
	>
	{{ $t('user_reporting.generic_error') }}
	</div>
	</div>
	</div>
	<div class="user-reporting-panel-right">
	<List :items="statuses">
	<template
	slot="item"
	slot-scope="{item}"
	>
	<div class="status-fadein user-reporting-panel-sitem">
	<Status
	:in-conversation="false"
	:focused="false"
	:statusoid="item"
	/>
	<Checkbox
	:checked="isChecked(item.id)"
	@change="checked => toggleStatus(checked, item.id)"
	/>
	</div>
	</template>
	</List>
	</div>
	</div>
	</div>
	</Modal>
	</template>

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

	<style lang="scss">
	@import '../../_variables.scss';

	.user-reporting-panel {
	width: 90vw;
	max-width: 700px;
	min-height: 20vh;
	max-height: 80vh;

	.panel-heading {
	.title {
	text-align: center;
	// TODO: Consider making these as default of panel
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	}

	.panel-body {
	display: flex;
	flex-direction: column-reverse;
	border-top: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	overflow: hidden;
	}

	&-left {
	padding: 1.1em 0.7em 0.7em;
	line-height: 1.4em;
	box-sizing: border-box;

	> div {
	margin-bottom: 1em;

	&:last-child {
	margin-bottom: 0;
	}
	}

	p {
	margin-top: 0;
	}

	textarea.form-control {
	line-height: 16px;
	resize: none;
	overflow: hidden;
	transition: min-height 200ms 100ms;
	min-height: 44px;
	width: 100%;
	}

	.btn {
	min-width: 10em;
	padding: 0 2em;
	}

	.alert {
	margin: 1em 0 0 0;
	line-height: 1.3em;
	}
	}

	&-right {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	}

	&-sitem {
	display: flex;
	justify-content: space-between;

	/* TODO cleanup this */
	> .Status {
	flex: 1;
	}

	> .checkbox {
	margin: 0.75em;
	}
	}

	@media all and (min-width: 801px) {
	.panel-body {
	flex-direction: row;
	}

	&-left {
	width: 50%;
	max-width: 320px;
	border-right: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	padding: 1.1em;

	> div {
	margin-bottom: 2em;
	}
	}

	&-right {
	width: 50%;
	flex: 1 1 auto;
	margin-bottom: 12px;
	}
	}
	}
	</style>
	diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
	index 6ed663e1c7..9b2b30e6b2 100644
	--- a/src/services/entity_normalizer/entity_normalizer.service.js
	+++ b/src/services/entity_normalizer/entity_normalizer.service.js
	@@ -1,461 +1,462 @@
	import escape from 'escape-html'
	import parseLinkHeader from 'parse-link-header'
	import { isStatusNotification } from '../notification_utils/notification_utils.js'
	import punycode from 'punycode.js'

	/ NOTICE!
	* Do not initialize UI-generated data here.
	* It will override existing data.
	*
	* i.e. user.pinnedStatusIds was set to [] here
	* UI code would update it with data but upon next user fetch
	* it would be reverted back to []
	*/

	const qvitterStatusType = (status) => {
	if (status.is_post_verb) {
	return 'status'
	}

	if (status.retweeted_status) {
	return 'retweet'
	}

	if ((typeof status.uri === 'string' && status.uri.match(/(fave\|objectType=Favourite)/)) \|\|
	(typeof status.text === 'string' && status.text.match(/favorited/))) {
	return 'favorite'
	}

	if (status.text.match(/deleted notice {{tag/) \|\| status.qvitter_delete_notice) {
	return 'deletion'
	}

	if (status.text.match(/started following/) \|\| status.activity_type === 'follow') {
	return 'follow'
	}

	return 'unknown'
	}

	export const parseUser = (data) => {
	const output = {}
	const masto = data.hasOwnProperty('acct')
	// case for users in "mentions" property for statuses in MastoAPI
	const mastoShort = masto && !data.hasOwnProperty('avatar')

	output.id = String(data.id)

	if (masto) {
	output.screen_name = data.acct
	output.statusnet_profile_url = data.url

	// There's nothing else to get
	if (mastoShort) {
	return output
	}

	output.name = data.display_name
	output.name_html = addEmojis(escape(data.display_name), data.emojis)

	output.description = data.note
	output.description_html = addEmojis(data.note, data.emojis)

	output.fields = data.fields
	output.fields_html = data.fields.map(field => {
	return {
	name: addEmojis(escape(field.name), data.emojis),
	value: addEmojis(field.value, data.emojis)
	}
	})
	output.fields_text = data.fields.map(field => {
	return {
	name: unescape(field.name.replace(/<[^>]*>/g, '')),
	value: unescape(field.value.replace(/<[^>]*>/g, ''))
	}
	})

	// Utilize avatar_static for gif avatars?
	output.profile_image_url = data.avatar
	output.profile_image_url_original = data.avatar

	// Same, utilize header_static?
	output.cover_photo = data.header

	output.friends_count = data.following_count

	output.bot = data.bot

	if (data.pleroma) {
	const relationship = data.pleroma.relationship

	output.background_image = data.pleroma.background_image
	output.favicon = data.pleroma.favicon
	output.token = data.pleroma.chat_token

	if (relationship) {
	output.relationship = relationship
	}

	output.allow_following_move = data.pleroma.allow_following_move

	output.hide_follows = data.pleroma.hide_follows
	output.hide_followers = data.pleroma.hide_followers
	output.hide_follows_count = data.pleroma.hide_follows_count
	output.hide_followers_count = data.pleroma.hide_followers_count

	output.rights = {
	moderator: data.pleroma.is_moderator,
	admin: data.pleroma.is_admin
	}
	// TODO: Clean up in UI? This is duplication from what BE does for qvitterapi
	if (output.rights.admin) {
	output.role = 'admin'
	} else if (output.rights.moderator) {
	output.role = 'moderator'
	} else {
	output.role = 'member'
	}
	}

	if (data.source) {
	output.description = data.source.note
	output.default_scope = data.source.privacy
	output.fields = data.source.fields
	if (data.source.pleroma) {
	output.no_rich_text = data.source.pleroma.no_rich_text
	output.show_role = data.source.pleroma.show_role
	output.discoverable = data.source.pleroma.discoverable
	}
	}

	// TODO: handle is_local
	output.is_local = !output.screen_name.includes('@')
	} else {
	output.screen_name = data.screen_name

	output.name = data.name
	output.name_html = data.name_html

	output.description = data.description
	output.description_html = data.description_html

	output.profile_image_url = data.profile_image_url
	output.profile_image_url_original = data.profile_image_url_original

	output.cover_photo = data.cover_photo

	output.friends_count = data.friends_count

	// output.bot = ??? missing

	output.statusnet_profile_url = data.statusnet_profile_url

	output.is_local = data.is_local
	output.role = data.role
	output.show_role = data.show_role

	if (data.rights) {
	output.rights = {
	moderator: data.rights.delete_others_notice,
	admin: data.rights.admin
	}
	}
	output.no_rich_text = data.no_rich_text
	output.default_scope = data.default_scope
	output.hide_follows = data.hide_follows
	output.hide_followers = data.hide_followers
	output.hide_follows_count = data.hide_follows_count
	output.hide_followers_count = data.hide_followers_count
	output.background_image = data.background_image
	// Websocket token
	output.token = data.token

	// Convert relationsip data to expected format
	output.relationship = {
	muting: data.muted,
	blocking: data.statusnet_blocking,
	followed_by: data.follows_you,
	following: data.following
	}
	}

	output.created_at = new Date(data.created_at)
	output.locked = data.locked
	output.followers_count = data.followers_count
	output.statuses_count = data.statuses_count

	if (data.pleroma) {
	output.follow_request_count = data.pleroma.follow_request_count

	output.tags = data.pleroma.tags

	// deactivated was changed to is_active in Pleroma 2.3.0
	// so check if is_active is present
	output.deactivated = typeof data.pleroma.is_active !== 'undefined'
	? !data.pleroma.is_active // new backend
	: data.pleroma.deactivated // old backend

	output.notification_settings = data.pleroma.notification_settings
	output.unread_chat_count = data.pleroma.unread_chat_count
	}

	output.tags = output.tags \|\| []
	output.rights = output.rights \|\| {}
	output.notification_settings = output.notification_settings \|\| {}

	- // Convert punycode to unicode
	+ // Convert punycode to unicode for UI
	+ output.screen_name_ui = output.screen_name
	if (output.screen_name.includes('@')) {
	const parts = output.screen_name.split('@')
	let unicodeDomain = punycode.toUnicode(parts[1])
	if (unicodeDomain !== parts[1]) {
	// Add some identifier so users can potentially spot spoofing attempts:
	// lain.com and xn--lin-6cd.com would appear identical otherwise.
	unicodeDomain = '🌏' + unicodeDomain
	- output.screen_name = [parts[0], unicodeDomain].join('@')
	+ output.screen_name_ui = [parts[0], unicodeDomain].join('@')
	}
	}

	return output
	}

	export const parseAttachment = (data) => {
	const output = {}
	const masto = !data.hasOwnProperty('oembed')

	if (masto) {
	// Not exactly same...
	output.mimetype = data.pleroma ? data.pleroma.mime_type : data.type
	output.meta = data.meta // not present in BE yet
	output.id = data.id
	} else {
	output.mimetype = data.mimetype
	// output.meta = ??? missing
	}

	output.url = data.url
	output.large_thumb_url = data.preview_url
	output.description = data.description

	return output
	}
	export const addEmojis = (string, emojis) => {
	const matchOperatorsRegex = /[\|\\{}()[\]^$+*?.-]/g
	return emojis.reduce((acc, emoji) => {
	const regexSafeShortCode = emoji.shortcode.replace(matchOperatorsRegex, '\\$&')
	return acc.replace(
	new RegExp(`:${regexSafeShortCode}:`, 'g'),
	`<img src='${emoji.url}' alt=':${emoji.shortcode}:' title=':${emoji.shortcode}:' class='emoji' />`
	)
	}, string)
	}

	export const parseStatus = (data) => {
	const output = {}
	const masto = data.hasOwnProperty('account')

	if (masto) {
	output.favorited = data.favourited
	output.fave_num = data.favourites_count

	output.repeated = data.reblogged
	output.repeat_num = data.reblogs_count

	output.bookmarked = data.bookmarked

	output.type = data.reblog ? 'retweet' : 'status'
	output.nsfw = data.sensitive

	output.statusnet_html = addEmojis(data.content, data.emojis)

	output.tags = data.tags

	if (data.pleroma) {
	const { pleroma } = data
	output.text = pleroma.content ? data.pleroma.content['text/plain'] : data.content
	output.summary = pleroma.spoiler_text ? data.pleroma.spoiler_text['text/plain'] : data.spoiler_text
	output.statusnet_conversation_id = data.pleroma.conversation_id
	output.is_local = pleroma.local
	output.in_reply_to_screen_name = data.pleroma.in_reply_to_account_acct
	output.thread_muted = pleroma.thread_muted
	output.emoji_reactions = pleroma.emoji_reactions
	output.parent_visible = pleroma.parent_visible === undefined ? true : pleroma.parent_visible
	} else {
	output.text = data.content
	output.summary = data.spoiler_text
	}

	output.in_reply_to_status_id = data.in_reply_to_id
	output.in_reply_to_user_id = data.in_reply_to_account_id
	output.replies_count = data.replies_count

	if (output.type === 'retweet') {
	output.retweeted_status = parseStatus(data.reblog)
	}

	output.summary_html = addEmojis(escape(data.spoiler_text), data.emojis)
	output.external_url = data.url
	output.poll = data.poll
	if (output.poll) {
	output.poll.options = (output.poll.options \|\| []).map(field => ({
	...field,
	title_html: addEmojis(escape(field.title), data.emojis)
	}))
	}
	output.pinned = data.pinned
	output.muted = data.muted
	} else {
	output.favorited = data.favorited
	output.fave_num = data.fave_num

	output.repeated = data.repeated
	output.repeat_num = data.repeat_num

	// catchall, temporary
	// Object.assign(output, data)

	output.type = qvitterStatusType(data)

	if (data.nsfw === undefined) {
	output.nsfw = isNsfw(data)
	if (data.retweeted_status) {
	output.nsfw = data.retweeted_status.nsfw
	}
	} else {
	output.nsfw = data.nsfw
	}

	output.statusnet_html = data.statusnet_html
	output.text = data.text

	output.in_reply_to_status_id = data.in_reply_to_status_id
	output.in_reply_to_user_id = data.in_reply_to_user_id
	output.in_reply_to_screen_name = data.in_reply_to_screen_name
	output.statusnet_conversation_id = data.statusnet_conversation_id

	if (output.type === 'retweet') {
	output.retweeted_status = parseStatus(data.retweeted_status)
	}

	output.summary = data.summary
	output.summary_html = data.summary_html
	output.external_url = data.external_url
	output.is_local = data.is_local
	}

	output.id = String(data.id)
	output.visibility = data.visibility
	output.card = data.card
	output.created_at = new Date(data.created_at)

	// Converting to string, the right way.
	output.in_reply_to_status_id = output.in_reply_to_status_id
	? String(output.in_reply_to_status_id)
	: null
	output.in_reply_to_user_id = output.in_reply_to_user_id
	? String(output.in_reply_to_user_id)
	: null

	output.user = parseUser(masto ? data.account : data.user)

	output.attentions = ((masto ? data.mentions : data.attentions) \|\| []).map(parseUser)

	output.attachments = ((masto ? data.media_attachments : data.attachments) \|\| [])
	.map(parseAttachment)

	const retweetedStatus = masto ? data.reblog : data.retweeted_status
	if (retweetedStatus) {
	output.retweeted_status = parseStatus(retweetedStatus)
	}

	output.favoritedBy = []
	output.rebloggedBy = []

	return output
	}

	export const parseNotification = (data) => {
	const mastoDict = {
	'favourite': 'like',
	'reblog': 'repeat'
	}
	const masto = !data.hasOwnProperty('ntype')
	const output = {}

	if (masto) {
	output.type = mastoDict[data.type] \|\| data.type
	output.seen = data.pleroma.is_seen
	output.status = isStatusNotification(output.type) ? parseStatus(data.status) : null
	output.action = output.status // TODO: Refactor, this is unneeded
	output.target = output.type !== 'move'
	? null
	: parseUser(data.target)
	output.from_profile = parseUser(data.account)
	output.emoji = data.emoji
	} else {
	const parsedNotice = parseStatus(data.notice)
	output.type = data.ntype
	output.seen = Boolean(data.is_seen)
	output.status = output.type === 'like'
	? parseStatus(data.notice.favorited_status)
	: parsedNotice
	output.action = parsedNotice
	output.from_profile = output.type === 'pleroma:chat_mention' ? parseUser(data.account) : parseUser(data.from_profile)
	}

	output.created_at = new Date(data.created_at)
	output.id = parseInt(data.id)

	return output
	}

	const isNsfw = (status) => {
	const nsfwRegex = /#nsfw/i
	return (status.tags \|\| []).includes('nsfw') \|\| !!(status.text \|\| '').match(nsfwRegex)
	}

	export const parseLinkHeaderPagination = (linkHeader, opts = {}) => {
	const flakeId = opts.flakeId
	const parsedLinkHeader = parseLinkHeader(linkHeader)
	if (!parsedLinkHeader) return
	const maxId = parsedLinkHeader.next.max_id
	const minId = parsedLinkHeader.prev.min_id

	return {
	maxId: flakeId ? maxId : parseInt(maxId, 10),
	minId: flakeId ? minId : parseInt(minId, 10)
	}
	}

	export const parseChat = (chat) => {
	const output = {}
	output.id = chat.id
	output.account = parseUser(chat.account)
	output.unread = chat.unread
	output.lastMessage = parseChatMessage(chat.last_message)
	output.updated_at = new Date(chat.updated_at)
	return output
	}

	export const parseChatMessage = (message) => {
	if (!message) { return }
	if (message.isNormalized) { return message }
	const output = message
	output.id = message.id
	output.created_at = new Date(message.created_at)
	output.chat_id = message.chat_id
	if (message.content) {
	output.content = addEmojis(message.content, message.emojis)
	} else {
	output.content = ''
	}
	if (message.attachment) {
	output.attachments = [parseAttachment(message.attachment)]
	} else {
	output.attachments = []
	}
	output.pending = !!message.pending
	output.error = false
	output.idempotency_key = message.idempotency_key
	output.isNormalized = true
	return output
	}
	diff --git a/test/unit/specs/components/user_profile.spec.js b/test/unit/specs/components/user_profile.spec.js
	index 80092b410c..142db73ce6 100644
	--- a/test/unit/specs/components/user_profile.spec.js
	+++ b/test/unit/specs/components/user_profile.spec.js
	@@ -1,206 +1,208 @@
	import { mount, createLocalVue } from '@vue/test-utils'
	import Vuex from 'vuex'
	import UserProfile from 'src/components/user_profile/user_profile.vue'
	import backendInteractorService from 'src/services/backend_interactor_service/backend_interactor_service.js'
	import { getters } from 'src/modules/users.js'

	const localVue = createLocalVue()
	localVue.use(Vuex)

	const mutations = {
	clearTimeline: () => {}
	}

	const actions = {
	fetchUser: () => {},
	fetchUserByScreenName: () => {}
	}

	const testGetters = {
	findUser: state => getters.findUser(state.users),
	relationship: state => getters.relationship(state.users),
	mergedConfig: state => ({
	colors: '',
	highlight: {},
	customTheme: {
	colors: []
	}
	})
	}

	const localUser = {
	id: 100,
	is_local: true,
	- screen_name: 'testUser'
	+ screen_name: 'testUser',
	+ screen_name_ui: 'testUser'
	}

	const extUser = {
	id: 100,
	is_local: false,
	- screen_name: 'testUser@test.instance'
	+ screen_name: 'testUser@test.instance',
	+ screen_name_ui: 'testUser@test.instance'
	}

	const externalProfileStore = new Vuex.Store({
	mutations,
	actions,
	getters: testGetters,
	state: {
	api: {
	fetchers: {},
	backendInteractor: backendInteractorService('')
	},
	interface: {
	browserSupport: ''
	},
	instance: {
	hideUserStats: true
	},
	statuses: {
	timelines: {
	user: {
	statuses: [],
	statusesObject: {},
	faves: [],
	visibleStatuses: [],
	visibleStatusesObject: {},
	newStatusCount: 0,
	maxId: 0,
	minVisibleId: 0,
	loading: false,
	followers: [],
	friends: [],
	viewing: 'statuses',
	userId: 100,
	flushMarker: 0
	},
	media: {
	statuses: [],
	statusesObject: {},
	faves: [],
	visibleStatuses: [],
	visibleStatusesObject: {},
	newStatusCount: 0,
	maxId: 0,
	minVisibleId: 0,
	loading: false,
	followers: [],
	friends: [],
	viewing: 'statuses',
	userId: 100,
	flushMarker: 0
	}
	}
	},
	users: {
	currentUser: {
	credentials: ''
	},
	usersObject: { 100: extUser },
	users: [extUser],
	relationships: {}
	}
	}
	})

	const localProfileStore = new Vuex.Store({
	mutations,
	actions,
	getters: testGetters,
	state: {
	api: {
	fetchers: {},
	backendInteractor: backendInteractorService('')
	},
	interface: {
	browserSupport: ''
	},
	config: {
	colors: '',
	highlight: {},
	customTheme: {
	colors: []
	}
	},
	instance: {
	hideUserStats: true
	},
	statuses: {
	timelines: {
	user: {
	statuses: [],
	statusesObject: {},
	faves: [],
	visibleStatuses: [],
	visibleStatusesObject: {},
	newStatusCount: 0,
	maxId: 0,
	minVisibleId: 0,
	loading: false,
	followers: [],
	friends: [],
	viewing: 'statuses',
	userId: 100,
	flushMarker: 0
	},
	media: {
	statuses: [],
	statusesObject: {},
	faves: [],
	visibleStatuses: [],
	visibleStatusesObject: {},
	newStatusCount: 0,
	maxId: 0,
	minVisibleId: 0,
	loading: false,
	followers: [],
	friends: [],
	viewing: 'statuses',
	userId: 100,
	flushMarker: 0
	}
	}
	},
	users: {
	currentUser: {
	credentials: ''
	},
	usersObject: { 100: localUser, 'testuser': localUser },
	users: [localUser],
	relationships: {}
	}
	}
	})

	describe('UserProfile', () => {
	it('renders external profile', () => {
	const wrapper = mount(UserProfile, {
	localVue,
	store: externalProfileStore,
	mocks: {
	$route: {
	params: { id: 100 },
	name: 'external-user-profile'
	},
	$t: (msg) => msg
	}
	})

	expect(wrapper.find('.user-screen-name').text()).to.eql('@testUser@test.instance')
	})

	it('renders local profile', () => {
	const wrapper = mount(UserProfile, {
	localVue,
	store: localProfileStore,
	mocks: {
	$route: {
	params: { name: 'testUser' },
	name: 'user-profile'
	},
	$t: (msg) => msg
	}
	})

	expect(wrapper.find('.user-screen-name').text()).to.eql('@testUser')
	})
	})
	diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
	index a3f49b2cef..759539e0c8 100644
	--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
	+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
	@@ -1,412 +1,412 @@
	import { parseStatus, parseUser, parseNotification, addEmojis, parseLinkHeaderPagination } from '../../../../../src/services/entity_normalizer/entity_normalizer.service.js'
	import mastoapidata from '../../../../fixtures/mastoapi.json'
	import qvitterapidata from '../../../../fixtures/statuses.json'

	const makeMockStatusQvitter = (overrides = {}) => {
	return Object.assign({
	activity_type: 'post',
	attachments: [],
	attentions: [],
	created_at: 'Tue Jan 15 13:57:56 +0000 2019',
	external_url: 'https://ap.example/whatever',
	fave_num: 1,
	favorited: false,
	id: '10335970',
	in_reply_to_ostatus_uri: null,
	in_reply_to_profileurl: null,
	in_reply_to_screen_name: null,
	in_reply_to_status_id: null,
	in_reply_to_user_id: null,
	is_local: false,
	is_post_verb: true,
	possibly_sensitive: false,
	repeat_num: 0,
	repeated: false,
	statusnet_conversation_id: '16300488',
	statusnet_html: '<p>haha benis</p>',
	summary: null,
	tags: [],
	text: 'haha benis',
	uri: 'https://ap.example/whatever',
	user: makeMockUserQvitter(),
	visibility: 'public'
	}, overrides)
	}

	const makeMockUserQvitter = (overrides = {}) => {
	return Object.assign({
	background_image: null,
	cover_photo: '',
	created_at: 'Mon Jan 14 13:56:51 +0000 2019',
	default_scope: 'public',
	description: 'ebin',
	description_html: '<p>ebin</p>',
	favourites_count: 0,
	fields: [],
	followers_count: 1,
	following: true,
	follows_you: true,
	friends_count: 1,
	id: '60717',
	is_local: false,
	locked: false,
	name: 'Spurdo :ebin:',
	name_html: 'Spurdo <img src="whatever">',
	no_rich_text: false,
	pleroma: { confirmation_pending: false, tags: [] },
	profile_image_url: 'https://ap.example/whatever',
	profile_image_url_https: 'https://ap.example/whatever',
	profile_image_url_original: 'https://ap.example/whatever',
	profile_image_url_profile_size: 'https://ap.example/whatever',
	rights: { delete_others_notice: false },
	screen_name: 'spurdo@ap.example',
	statuses_count: 46,
	statusnet_blocking: false,
	statusnet_profile_url: ''
	}, overrides)
	}

	const makeMockUserMasto = (overrides = {}) => {
	return Object.assign({
	acct: 'hj',
	avatar:
	'https://shigusegubu.club/media/1657b945-8d5b-4ce6-aafb-4c3fc5772120/8ce851029af84d55de9164e30cc7f46d60cbf12eee7e96c5c0d35d9038ddade1.png',
	avatar_static:
	'https://shigusegubu.club/media/1657b945-8d5b-4ce6-aafb-4c3fc5772120/8ce851029af84d55de9164e30cc7f46d60cbf12eee7e96c5c0d35d9038ddade1.png',
	bot: false,
	created_at: '2017-12-17T21:54:14.000Z',
	display_name: 'whatever whatever whatever witch',
	emojis: [],
	fields: [],
	followers_count: 705,
	following_count: 326,
	header:
	'https://shigusegubu.club/media/7ab024d9-2a8a-4fbc-9ce8-da06756ae2db/6aadefe4e264133bc377ab450e6b045b6f5458542a5c59e6c741f86107f0388b.png',
	header_static:
	'https://shigusegubu.club/media/7ab024d9-2a8a-4fbc-9ce8-da06756ae2db/6aadefe4e264133bc377ab450e6b045b6f5458542a5c59e6c741f86107f0388b.png',
	id: '1',
	locked: false,
	note:
	'Volatile Internet Weirdo. Name pronounced as Hee Jay. JS and Java dark arts mage, Elixir trainee. I love sampo and lain. Matrix is <span><a data-user="1" href="https://shigusegubu.club/users/hj">@<span>hj</span></a></span>:matrix.heldscal.la Pronouns are whatever. Do not DM me unless it\'s truly private matter and you\'re instance\'s admin or you risk your DM to be reposted publicly.Wish i was Finnish girl.',
	pleroma: { confirmation_pending: false, tags: null },
	source: { note: '', privacy: 'public', sensitive: false },
	statuses_count: 41775,
	url: 'https://shigusegubu.club/users/hj',
	username: 'hj'
	}, overrides)
	}

	const makeMockStatusMasto = (overrides = {}) => {
	return Object.assign({
	account: makeMockUserMasto(),
	application: { name: 'Web', website: null },
	content:
	'<span><a data-user="14660" href="https://pleroma.soykaf.com/users/sampo">@<span>sampo</span></a></span> god i wish i was there',
	created_at: '2019-01-17T16:29:23.000Z',
	emojis: [],
	favourited: false,
	favourites_count: 1,
	id: '10423476',
	in_reply_to_account_id: '14660',
	in_reply_to_id: '10423197',
	language: null,
	media_attachments: [],
	mentions: [
	{
	acct: 'sampo@pleroma.soykaf.com',
	id: '14660',
	url: 'https://pleroma.soykaf.com/users/sampo',
	username: 'sampo'
	}
	],
	muted: false,
	reblog: null,
	reblogged: false,
	reblogs_count: 0,
	replies_count: 0,
	sensitive: false,
	spoiler_text: '',
	tags: [],
	uri: 'https://shigusegubu.club/objects/16033fbb-97c0-4f0e-b834-7abb92fb8639',
	url: 'https://shigusegubu.club/objects/16033fbb-97c0-4f0e-b834-7abb92fb8639',
	visibility: 'public',
	pleroma: {
	local: true
	}
	}, overrides)
	}

	const makeMockNotificationQvitter = (overrides = {}) => {
	return Object.assign({
	notice: makeMockStatusQvitter(),
	ntype: 'follow',
	from_profile: makeMockUserQvitter(),
	is_seen: 0,
	id: 123
	}, overrides)
	}

	const makeMockEmojiMasto = (overrides = [{}]) => {
	return [
	Object.assign({
	shortcode: 'image',
	static_url: 'https://example.com/image.png',
	url: 'https://example.com/image.png',
	visible_in_picker: false
	}, overrides[0]),
	Object.assign({
	shortcode: 'thinking',
	static_url: 'https://example.com/think.png',
	url: 'https://example.com/think.png',
	visible_in_picker: false
	}, overrides[1])
	]
	}

	describe('API Entities normalizer', () => {
	describe('parseStatus', () => {
	describe('QVitter preprocessing', () => {
	it('doesn\'t blow up', () => {
	const parsed = qvitterapidata.map(parseStatus)
	expect(parsed.length).to.eq(qvitterapidata.length)
	})

	it('identifies favorites', () => {
	const fav = {
	uri: 'tag:soykaf.com,2016-08-21:fave:2558:note:339495:2016-08-21T16:54:04+00:00',
	is_post_verb: false
	}

	const mastoFav = {
	uri: 'tag:mastodon.social,2016-11-27:objectId=73903:objectType=Favourite',
	is_post_verb: false
	}

	expect(parseStatus(makeMockStatusQvitter(fav))).to.have.property('type', 'favorite')
	expect(parseStatus(makeMockStatusQvitter(mastoFav))).to.have.property('type', 'favorite')
	})

	it('processes repeats correctly', () => {
	const post = makeMockStatusQvitter({ retweeted_status: null, id: 'deadbeef' })
	const repeat = makeMockStatusQvitter({ retweeted_status: post, is_post_verb: false, id: 'foobar' })

	const parsedPost = parseStatus(post)
	const parsedRepeat = parseStatus(repeat)

	expect(parsedPost).to.have.property('type', 'status')
	expect(parsedRepeat).to.have.property('type', 'retweet')
	expect(parsedRepeat).to.have.property('retweeted_status')
	expect(parsedRepeat).to.have.deep.property('retweeted_status.id', 'deadbeef')
	})

	it('sets nsfw for statuses with the #nsfw tag', () => {
	const safe = makeMockStatusQvitter({ id: '1', text: 'Hello oniichan' })
	const nsfw = makeMockStatusQvitter({ id: '1', text: 'Hello oniichan #nsfw' })

	expect(parseStatus(safe).nsfw).to.eq(false)
	expect(parseStatus(nsfw).nsfw).to.eq(true)
	})

	it('leaves existing nsfw settings alone', () => {
	const nsfw = makeMockStatusQvitter({ id: '1', text: 'Hello oniichan #nsfw', nsfw: false })

	expect(parseStatus(nsfw).nsfw).to.eq(false)
	})
	})

	describe('Mastoapi preprocessing and converting', () => {
	it('doesn\'t blow up', () => {
	const parsed = mastoapidata.map(parseStatus)
	expect(parsed.length).to.eq(mastoapidata.length)
	})

	it('processes repeats correctly', () => {
	const post = makeMockStatusMasto({ reblog: null, id: 'deadbeef' })
	const repeat = makeMockStatusMasto({ reblog: post, id: 'foobar' })

	const parsedPost = parseStatus(post)
	const parsedRepeat = parseStatus(repeat)

	expect(parsedPost).to.have.property('type', 'status')
	expect(parsedRepeat).to.have.property('type', 'retweet')
	expect(parsedRepeat).to.have.property('retweeted_status')
	expect(parsedRepeat).to.have.deep.property('retweeted_status.id', 'deadbeef')
	})

	it('adds emojis to post content', () => {
	const post = makeMockStatusMasto({ emojis: makeMockEmojiMasto(), content: 'Makes you think :thinking:' })

	const parsedPost = parseStatus(post)

	expect(parsedPost).to.have.property('statusnet_html').that.contains('<img')
	})

	it('adds emojis to subject line', () => {
	const post = makeMockStatusMasto({ emojis: makeMockEmojiMasto(), spoiler_text: 'CW: 300 IQ :thinking:' })

	const parsedPost = parseStatus(post)

	expect(parsedPost).to.have.property('summary_html').that.contains('<img')
	})
	})
	})

	// Statuses generally already contain some info regarding users and there's nearly 1:1 mapping, so very little to test
	describe('parseUsers (MastoAPI)', () => {
	it('sets correct is_local for users depending on their screen_name', () => {
	const local = makeMockUserMasto({ acct: 'foo' })
	const remote = makeMockUserMasto({ acct: 'foo@bar.baz' })

	expect(parseUser(local)).to.have.property('is_local', true)
	expect(parseUser(remote)).to.have.property('is_local', false)
	})

	it('adds emojis to user name', () => {
	const user = makeMockUserMasto({ emojis: makeMockEmojiMasto(), display_name: 'The :thinking: thinker' })

	const parsedUser = parseUser(user)

	expect(parsedUser).to.have.property('name_html').that.contains('<img')
	})

	it('adds emojis to user bio', () => {
	const user = makeMockUserMasto({ emojis: makeMockEmojiMasto(), note: 'Hello i like to :thinking: a lot' })

	const parsedUser = parseUser(user)

	expect(parsedUser).to.have.property('description_html').that.contains('<img')
	})

	it('adds emojis to user profile fields', () => {
	const user = makeMockUserMasto({ emojis: makeMockEmojiMasto(), fields: [{ name: ':thinking:', value: ':image:' }] })

	const parsedUser = parseUser(user)

	expect(parsedUser).to.have.property('fields_html').to.be.an('array')

	const field = parsedUser.fields_html[0]

	expect(field).to.have.property('name').that.contains('<img')
	expect(field).to.have.property('value').that.contains('<img')
	})

	it('removes html tags from user profile fields', () => {
	const user = makeMockUserMasto({ emojis: makeMockEmojiMasto(), fields: [{ name: 'user', value: '<a rel="me" href="https://example.com/@user">@user</a>' }] })

	const parsedUser = parseUser(user)

	expect(parsedUser).to.have.property('fields_text').to.be.an('array')

	const field = parsedUser.fields_text[0]

	expect(field).to.have.property('name').that.equal('user')
	expect(field).to.have.property('value').that.equal('@user')
	})

	it('adds hide_follows and hide_followers user settings', () => {
	const user = makeMockUserMasto({ pleroma: { hide_followers: true, hide_follows: false, hide_followers_count: false, hide_follows_count: true } })

	expect(parseUser(user)).to.have.property('hide_followers', true)
	expect(parseUser(user)).to.have.property('hide_follows', false)
	expect(parseUser(user)).to.have.property('hide_followers_count', false)
	expect(parseUser(user)).to.have.property('hide_follows_count', true)
	})

	it('converts IDN to unicode and marks it as internatonal', () => {
	const user = makeMockUserMasto({ acct: 'lain@xn--lin-6cd.com' })

	- expect(parseUser(user)).to.have.property('screen_name').that.equal('lain@🌏lаin.com')
	+ expect(parseUser(user)).to.have.property('screen_name_ui').that.equal('lain@🌏lаin.com')
	})
	})

	// We currently use QvitterAPI notifications only, and especially due to MastoAPI lacking is_seen, support for MastoAPI
	// is more of an afterthought
	describe('parseNotifications (QvitterAPI)', () => {
	it('correctly normalizes data to FE\'s format', () => {
	const notif = makeMockNotificationQvitter({
	id: 123,
	notice: makeMockStatusQvitter({ id: 444 }),
	from_profile: makeMockUserQvitter({ id: 'spurdo' })
	})
	expect(parseNotification(notif)).to.have.property('id', 123)
	expect(parseNotification(notif)).to.have.property('seen', false)
	expect(parseNotification(notif)).to.have.deep.property('status.id', '444')
	expect(parseNotification(notif)).to.have.deep.property('action.id', '444')
	expect(parseNotification(notif)).to.have.deep.property('from_profile.id', 'spurdo')
	})

	it('correctly normalizes favorite notifications', () => {
	const notif = makeMockNotificationQvitter({
	id: 123,
	ntype: 'like',
	notice: makeMockStatusQvitter({
	id: 444,
	favorited_status: makeMockStatusQvitter({ id: 4412 })
	}),
	is_seen: 1,
	from_profile: makeMockUserQvitter({ id: 'spurdo' })
	})
	expect(parseNotification(notif)).to.have.property('id', 123)
	expect(parseNotification(notif)).to.have.property('type', 'like')
	expect(parseNotification(notif)).to.have.property('seen', true)
	expect(parseNotification(notif)).to.have.deep.property('status.id', '4412')
	expect(parseNotification(notif)).to.have.deep.property('action.id', '444')
	expect(parseNotification(notif)).to.have.deep.property('from_profile.id', 'spurdo')
	})
	})

	describe('MastoAPI emoji adder', () => {
	const emojis = makeMockEmojiMasto()
	const imageHtml = '<img src="https://example.com/image.png" alt=":image:" title=":image:" class="emoji" />'
	.replace(/"/g, '\'')
	const thinkHtml = '<img src="https://example.com/think.png" alt=":thinking:" title=":thinking:" class="emoji" />'
	.replace(/"/g, '\'')

	it('correctly replaces shortcodes in supplied string', () => {
	const result = addEmojis('This post has :image: emoji and :thinking: emoji', emojis)
	expect(result).to.include(thinkHtml)
	expect(result).to.include(imageHtml)
	})

	it('handles consecutive emojis correctly', () => {
	const result = addEmojis('Lelel emoji spam :thinking::thinking::thinking::thinking:', emojis)
	expect(result).to.include(thinkHtml + thinkHtml + thinkHtml + thinkHtml)
	})

	it('Doesn\'t replace nonexistent emojis', () => {
	const result = addEmojis('Admin add the :tenshi: emoji', emojis)
	expect(result).to.equal('Admin add the :tenshi: emoji')
	})

	it('Doesn\'t blow up on regex special characters', () => {
	const emojis = makeMockEmojiMasto([{
	shortcode: 'c++'
	}, {
	shortcode: '[a-z] {\|}*'
	}])
	const result = addEmojis('This post has :c++: emoji and :[a-z] {\|}*: emoji', emojis)
	expect(result).to.include('title=\':c++:\'')
	expect(result).to.include('title=\':[a-z] {\|}*:\'')
	})
	})

	describe('Link header pagination', () => {
	it('Parses min and max ids as integers', () => {
	const linkHeader = '<https://example.com/api/v1/notifications?max_id=861676>; rel="next", <https://example.com/api/v1/notifications?min_id=861741>; rel="prev"'
	const result = parseLinkHeaderPagination(linkHeader)
	expect(result).to.eql({
	'maxId': 861676,
	'minId': 861741
	})
	})

	it('Parses min and max ids as flakes', () => {
	const linkHeader = '<http://example.com/api/v1/timelines/home?max_id=9waQx5IIS48qVue2Ai>; rel="next", <http://example.com/api/v1/timelines/home?min_id=9wi61nIPnfn674xgie>; rel="prev"'
	const result = parseLinkHeaderPagination(linkHeader, { flakeId: true })
	expect(result).to.eql({
	'maxId': '9waQx5IIS48qVue2Ai',
	'minId': '9wi61nIPnfn674xgie'
	})
	})
	})
	})

File Metadata

Mime Type: text/x-diff
Expires: Sat, Aug 29, 9:40 PM (1 d, 15 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1737499
Default Alt Text: (153 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions