No OneTemporary
Actions

Size

183 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js
	index 8b1a2c38d4..31de2d75fa 100644
	--- a/src/components/basic_user_card/basic_user_card.js
	+++ b/src/components/basic_user_card/basic_user_card.js
	@@ -1,22 +1,24 @@
	import UserPopover from '../user_popover/user_popover.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	+import UserLink from '../user_link/user_link.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'

	const BasicUserCard = {
	props: [
	'user'
	],
	components: {
	UserPopover,
	UserAvatar,
	- RichContent
	+ RichContent,
	+ UserLink
	},
	methods: {
	userProfileLink (user) {
	return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
	}
	}
	}

	export default BasicUserCard
	diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
	index 9cca78405f..418de92630 100644
	--- a/src/components/basic_user_card/basic_user_card.vue
	+++ b/src/components/basic_user_card/basic_user_card.vue
	@@ -1,87 +1,85 @@
	<template>
	<div class="basic-user-card">
	<router-link
	:to="userProfileLink(user)"
	@click.prevent
	>
	<UserPopover
	:user-id="user.id"
	:overlay-centers="true"
	overlay-centers-selector=".avatar"
	>
	<UserAvatar
	class="user-avatar avatar"
	:user="user"
	@click.prevent
	/>
	</UserPopover>
	</router-link>
	<div
	class="basic-user-card-collapsed-content"
	>
	<div
	:title="user.name"
	class="basic-user-card-user-name"
	>
	<RichContent
	class="basic-user-card-user-name-value"
	:html="user.name"
	:emoji="user.emoji"
	/>
	</div>
	<div>
	- <router-link
	+ <user-link
	class="basic-user-card-screen-name"
	- :to="userProfileLink(user)"
	- >
	- @{{ user.screen_name_ui }}
	- </router-link>
	+ :user="user"
	+ />
	</div>
	<slot />
	</div>
	</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;

	--emoji-size: 14px;

	&-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/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
	index 5ba3907ff5..b664d6b316 100644
	--- a/src/components/emoji_input/emoji_input.js
	+++ b/src/components/emoji_input/emoji_input.js
	@@ -1,509 +1,511 @@
	import Completion from '../../services/completion/completion.js'
	import EmojiPicker from '../emoji_picker/emoji_picker.vue'
	+import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
	import { take } from 'lodash'
	import { findOffset } from '../../services/offset_finder/offset_finder.service.js'

	import { 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 = {
	emits: ['update:modelValue', 'shown'],
	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
	},
	modelValue: {
	/**
	* 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
	+ EmojiPicker,
	+ UnicodeDomainIndicator
	},
	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.modelValue && this.caret) {
	const word = Completion.wordAtPosition(this.modelValue, this.caret - 1) \|\| {}
	return word
	}
	}
	},
	mounted () {
	const { root } = this.$refs
	const input = root.querySelector('.emoji-input > input') \|\| root.querySelector('.emoji-input > textarea')
	if (!input) return
	this.input = input
	this.resize()
	input.addEventListener('blur', this.onBlur)
	input.addEventListener('focus', this.onFocus)
	input.addEventListener('paste', this.onPaste)
	input.addEventListener('keyup', this.onKeyUp)
	input.addEventListener('keydown', this.onKeyDown)
	input.addEventListener('click', this.onClickInput)
	input.addEventListener('transitionend', this.onTransition)
	input.addEventListener('input', this.onInput)
	},
	unmounted () {
	const { input } = this
	if (input) {
	input.removeEventListener('blur', this.onBlur)
	input.removeEventListener('focus', this.onFocus)
	input.removeEventListener('paste', this.onPaste)
	input.removeEventListener('keyup', this.onKeyUp)
	input.removeEventListener('keydown', this.onKeyDown)
	input.removeEventListener('click', this.onClickInput)
	input.removeEventListener('transitionend', this.onTransition)
	input.removeEventListener('input', this.onInput)
	}
	},
	watch: {
	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: {
	handler (newValue) {
	this.$nextTick(this.resize)
	},
	deep: true
	}
	},
	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.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.modelValue, this.wordAtCaret, replacement)
	this.$emit('update:modelValue', newValue)
	this.caret = 0
	},
	insert ({ insertion, keepOpen, surroundingSpace = true }) {
	const before = this.modelValue.substring(0, this.caret) \|\| ''
	const after = this.modelValue.substring(this.caret) \|\| ''

	/* Using a bit more smart approach to padding emojis with spaces:
	* - put a space before cursor if there isn't one already, unless we
	* 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('update:modelValue', newValue)
	const position = this.caret + (insertion + spaceAfter + spaceBefore).length
	if (!keepOpen) {
	this.input.focus()
	}

	this.$nextTick(function () {
	// Re-focus inputbox after clicking suggestion
	// Set selection right after the replacement instead of the very end
	this.input.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.modelValue, this.wordAtCaret, replacement)
	this.$emit('update:modelValue', newValue)
	this.highlighted = 0
	const position = this.wordAtCaret.start + replacement.length

	this.$nextTick(function () {
	// Re-focus inputbox after clicking suggestion
	this.input.focus()
	// Set selection right after the replacement instead of the very end
	this.input.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
	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.blur()
	this.input.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.focus()
	}
	}

	this.showPicker = false
	this.resize()
	},
	onInput (e) {
	this.showPicker = false
	this.setCaret(e)
	this.resize()
	this.$emit('update:modelValue', e.target.value)
	},
	onClickInput (e) {
	this.showPicker = false
	},
	onClickOutside (e) {
	if (this.disableClickOutside) return
	this.showPicker = false
	},
	onStickerUploaded (e) {
	this.showPicker = false
	this.$emit('sticker-uploaded', e)
	},
	onStickerUploadFailed (e) {
	this.showPicker = false
	this.$emit('sticker-upload-Failed', e)
	},
	setCaret ({ target: { selectionStart } }) {
	this.caret = selectionStart
	},
	resize () {
	const panel = this.$refs.panel
	if (!panel) return
	const picker = this.$refs.picker.$el
	const panelBody = this.$refs['panel-body']
	const { offsetHeight, offsetTop } = this.input
	const offsetBottom = offsetTop + offsetHeight

	this.setPlacement(panelBody, panel, offsetBottom)
	this.setPlacement(picker, picker, offsetBottom)
	},
	setPlacement (container, target, offsetBottom) {
	if (!container \|\| !target) return

	target.style.top = offsetBottom + 'px'
	target.style.bottom = 'auto'

	if (this.placement === 'top' \|\| (this.placement === 'auto' && this.overflowsBottom(container))) {
	target.style.top = 'auto'
	target.style.bottom = this.input.offsetHeight + 'px'
	}
	},
	overflowsBottom (el) {
	return el.getBoundingClientRect().bottom > window.innerHeight
	}
	}
	}

	export default EmojiInput
	diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
	index 7d95ab7e5a..81b8191320 100644
	--- a/src/components/emoji_input/emoji_input.vue
	+++ b/src/components/emoji_input/emoji_input.vue
	@@ -1,185 +1,199 @@
	<template>
	<div
	ref="root"
	v-click-outside="onClickOutside"
	class="emoji-input"
	:class="{ 'with-picker': !hideEmojiButton }"
	>
	<slot />
	<template v-if="enableEmojiPicker">
	<button
	v-if="!hideEmojiButton"
	class="button-unstyled emoji-picker-icon"
	type="button"
	@click.prevent="togglePicker"
	>
	<FAIcon :icon="['far', 'smile-beam']" />
	</button>
	<EmojiPicker
	v-if="enableEmojiPicker"
	ref="picker"
	:class="{ hide: !showPicker }"
	:enable-sticker-picker="enableStickerPicker"
	class="emoji-picker-panel"
	@emoji="insert"
	@sticker-uploaded="onStickerUploaded"
	@sticker-upload-failed="onStickerUploadFailed"
	/>
	</template>
	<div
	ref="panel"
	class="autocomplete-panel"
	:class="{ hide: !showSuggestions }"
	>
	<div
	ref="panel-body"
	class="autocomplete-panel-body"
	>
	<div
	v-for="(suggestion, index) in suggestions"
	:key="index"
	class="autocomplete-item"
	:class="{ highlighted: index === highlighted }"
	@click.stop.prevent="onClick($event, suggestion)"
	>
	<span class="image">
	<img
	v-if="suggestion.img"
	:src="suggestion.img"
	>
	<span v-else>{{ suggestion.replacement }}</span>
	</span>
	<div class="label">
	- <span class="displayText">{{ suggestion.displayText }}</span>
	+ <span
	+ v-if="suggestion.user"
	+ class="displayText"
	+ >
	+ {{ suggestion.displayText }}<UnicodeDomainIndicator
	+ :user="suggestion.user"
	+ :at="false"
	+ />
	+ </span>
	+ <span
	+ v-if="!suggestion.user"
	+ class="displayText"
	+ >
	+ {{ suggestion.displayText }}
	+ </span>
	<span class="detailText">{{ suggestion.detailText }}</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>

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

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

	.emoji-input {
	display: flex;
	flex-direction: column;
	position: relative;

	&.with-picker input {
	padding-right: 30px;
	}

	.emoji-picker-icon {
	position: absolute;
	top: 0;
	right: 0;
	margin: .2em .25em;
	font-size: 1.3em;
	cursor: pointer;
	line-height: 24px;

	&:hover i {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}
	.emoji-picker-panel {
	position: absolute;
	z-index: 20;
	margin-top: 2px;

	&.hide {
	display: none
	}
	}

	.autocomplete {
	&-panel {
	position: absolute;
	z-index: 20;
	margin-top: 2px;

	&.hide {
	display: none
	}

	&-body {
	margin: 0 0.5em 0 0.5em;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
	box-shadow: var(--popupShadow);
	min-width: 75%;
	background-color: $fallback--bg;
	background-color: var(--popover, $fallback--bg);
	color: $fallback--link;
	color: var(--popoverText, $fallback--link);
	--faint: var(--popoverFaintText, $fallback--faint);
	--faintLink: var(--popoverFaintLink, $fallback--faint);
	--lightText: var(--popoverLightText, $fallback--lightText);
	--postLink: var(--popoverPostLink, $fallback--link);
	--postFaintLink: var(--popoverPostFaintLink, $fallback--link);
	--icon: var(--popoverIcon, $fallback--icon);
	}
	}

	&-item {
	display: flex;
	cursor: pointer;
	padding: 0.2em 0.4em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	height: 32px;

	.image {
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 32px;

	margin-right: 4px;

	img {
	width: 32px;
	height: 32px;
	object-fit: contain;
	}
	}

	.label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 0.1em 0 0.2em;

	.displayText {
	line-height: 1.5;
	}

	.detailText {
	font-size: 9px;
	line-height: 9px;
	}
	}

	&.highlighted {
	background-color: $fallback--fg;
	background-color: var(--selectedMenuPopover, $fallback--fg);
	color: var(--selectedMenuPopoverText, $fallback--text);
	--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
	--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
	}
	}
	}

	input, textarea {
	flex: 1 0 auto;
	}
	}
	</style>
	diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js
	index e8efbd1e0a..0ddb4d6899 100644
	--- a/src/components/emoji_input/suggestor.js
	+++ b/src/components/emoji_input/suggestor.js
	@@ -1,130 +1,131 @@
	/**
	* 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, screen_name_ui, name, profile_image_url_original }) => ({
	- displayText: screen_name_ui,
	- detailText: name,
	- imageUrl: profile_image_url_original,
	- replacement: '@' + screen_name + ' '
	+ }).map((user) => ({
	+ user,
	+ displayText: user.screen_name_ui,
	+ detailText: user.name,
	+ imageUrl: user.profile_image_url_original,
	+ replacement: '@' + user.screen_name + ' '
	}))
	/* eslint-enable camelcase */

	suggestions = newSuggestions \|\| []
	return suggestions
	}
	}
	diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
	index 4a74fbe289..6515bd1168 100644
	--- a/src/components/mention_link/mention_link.js
	+++ b/src/components/mention_link/mention_link.js
	@@ -1,152 +1,154 @@
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { mapGetters, mapState } from 'vuex'
	import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	+import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
	import { defineAsyncComponent } from 'vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faAt
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faAt
	)

	const MentionLink = {
	name: 'MentionLink',
	components: {
	UserAvatar,
	+ UnicodeDomainIndicator,
	UserPopover: defineAsyncComponent(() => import('../user_popover/user_popover.vue'))
	},
	props: {
	url: {
	required: true,
	type: String
	},
	content: {
	required: true,
	type: String
	},
	userId: {
	required: false,
	type: String
	},
	userScreenName: {
	required: false,
	type: String
	}
	},
	data () {
	return {
	hasSelection: false
	}
	},
	methods: {
	onClick () {
	if (this.shouldShowTooltip) return
	const link = generateProfileLink(
	this.userId \|\| this.user.id,
	this.userScreenName \|\| this.user.screen_name
	)
	this.$router.push(link)
	},
	handleSelection () {
	this.hasSelection = document.getSelection().containsNode(this.$refs.full, true)
	}
	},
	mounted () {
	document.addEventListener('selectionchange', this.handleSelection)
	},
	unmounted () {
	document.removeEventListener('selectionchange', this.handleSelection)
	},
	computed: {
	user () {
	return this.url && this.$store && this.$store.getters.findUserByUrl(this.url)
	},
	isYou () {
	// FIXME why user !== currentUser???
	return this.user && this.user.id === this.currentUser.id
	},
	userName () {
	return this.user && this.userNameFullUi.split('@')[0]
	},
	serverName () {
	// XXX assumed that domain does not contain @
	return this.user && (this.userNameFullUi.split('@')[1] \|\| this.$store.getters.instanceDomain)
	},
	userNameFull () {
	return this.user && this.user.screen_name
	},
	userNameFullUi () {
	return this.user && this.user.screen_name_ui
	},
	highlight () {
	return this.user && this.mergedConfig.highlight[this.user.screen_name]
	},
	highlightType () {
	return this.highlight && ('-' + this.highlight.type)
	},
	highlightClass () {
	if (this.highlight) return highlightClass(this.user)
	},
	style () {
	if (this.highlight) {
	const {
	backgroundColor,
	backgroundPosition,
	backgroundImage,
	...rest
	} = highlightStyle(this.highlight)
	return rest
	}
	},
	classnames () {
	return [
	{
	'-you': this.isYou && this.shouldBoldenYou,
	'-highlighted': this.highlight,
	'-has-selection': this.hasSelection
	},
	this.highlightType
	]
	},
	useAtIcon () {
	return this.mergedConfig.useAtIcon
	},
	isRemote () {
	return this.userName !== this.userNameFull
	},
	shouldShowFullUserName () {
	const conf = this.mergedConfig.mentionLinkDisplay
	if (conf === 'short') {
	return false
	} else if (conf === 'full') {
	return true
	} else { // full_for_remote
	return this.isRemote
	}
	},
	shouldShowTooltip () {
	return this.mergedConfig.mentionLinkShowTooltip
	},
	shouldShowAvatar () {
	return this.mergedConfig.mentionLinkShowAvatar
	},
	shouldShowYous () {
	return this.mergedConfig.mentionLinkShowYous
	},
	shouldBoldenYou () {
	return this.mergedConfig.mentionLinkBoldenYou
	},
	shouldFadeDomain () {
	return this.mergedConfig.mentionLinkFadeDomain
	},
	...mapGetters(['mergedConfig']),
	...mapState({
	currentUser: state => state.users.currentUser
	})
	}
	}

	export default MentionLink
	diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
	index 3af502ef79..869a32578a 100644
	--- a/src/components/mention_link/mention_link.vue
	+++ b/src/components/mention_link/mention_link.vue
	@@ -1,72 +1,75 @@
	<template>
	<span
	class="MentionLink"
	>
	<!-- eslint-disable vue/no-v-html -->
	<a
	v-if="!user"
	:href="url"
	class="original"
	target="_blank"
	v-html="content"
	/><!-- eslint-enable vue/no-v-html -->
	<UserPopover
	v-else
	:user-id="user.id"
	:disabled="!shouldShowTooltip"
	>
	<span
	v-if="user"
	class="new"
	:style="style"
	:class="classnames"
	>
	<a
	class="short button-unstyled"
	:class="{ '-with-tooltip': shouldShowTooltip }"
	:href="url"
	@click.prevent="onClick"
	>
	<!-- eslint-disable vue/no-v-html -->
	<UserAvatar
	v-if="shouldShowAvatar"
	class="mention-avatar"
	:user="user"
	/><span
	class="shortName"
	><FAIcon
	v-if="useAtIcon"
	size="sm"
	icon="at"
	class="at"
	/>{{ !useAtIcon ? '@' : '' }}<span
	class="userName"
	v-html="userName"
	/><span
	v-if="shouldShowFullUserName"
	class="serverName"
	:class="{ '-faded': shouldFadeDomain }"
	v-html="'@' + serverName"
	+ /><UnicodeDomainIndicator
	+ v-if="shouldShowFullUserName"
	+ :user="user"
	/>
	</span>
	<span
	v-if="isYou && shouldShowYous"
	:class="{ '-you': shouldBoldenYou }"
	> {{ ' ' + $t('status.you') }}</span>
	<!-- eslint-enable vue/no-v-html -->
	</a><span
	ref="full"
	class="full"
	>
	<!-- eslint-disable vue/no-v-html -->
	@<span v-html="userName" /><span v-html="'@' + serverName" />
	<!-- eslint-enable vue/no-v-html -->
	</span>
	</span>
	</UserPopover>
	</span>
	</template>

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

	<style lang="scss" src="./mention_link.scss" />
	diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
	index f60a1a6ad3..ddba560e15 100644
	--- a/src/components/notification/notification.js
	+++ b/src/components/notification/notification.js
	@@ -1,120 +1,122 @@
	import StatusContent from '../status_content/status_content.vue'
	import { mapState } from 'vuex'
	import Status from '../status/status.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import UserCard from '../user_card/user_card.vue'
	import Timeago from '../timeago/timeago.vue'
	import Report from '../report/report.vue'
	+import UserLink from '../user_link/user_link.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import UserPopover from '../user_popover/user_popover.vue'
	import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
	import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faCheck,
	faTimes,
	faStar,
	faRetweet,
	faUserPlus,
	faEyeSlash,
	faUser,
	faSuitcaseRolling
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faCheck,
	faTimes,
	faStar,
	faRetweet,
	faUserPlus,
	faUser,
	faEyeSlash,
	faSuitcaseRolling
	)

	const Notification = {
	data () {
	return {
	userExpanded: false,
	betterShadow: this.$store.state.interface.browserSupport.cssFilter,
	unmuted: false
	}
	},
	props: ['notification'],
	components: {
	StatusContent,
	UserAvatar,
	UserCard,
	Timeago,
	Status,
	Report,
	RichContent,
	- UserPopover
	+ UserPopover,
	+ UserLink
	},
	methods: {
	toggleUserExpanded () {
	this.userExpanded = !this.userExpanded
	},
	generateUserProfileLink (user) {
	return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
	},
	getUser (notification) {
	return this.$store.state.users.usersObject[notification.from_profile.id]
	},
	toggleMute () {
	this.unmuted = !this.unmuted
	},
	approveUser () {
	this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
	this.$store.dispatch('removeFollowRequest', this.user)
	this.$store.dispatch('markSingleNotificationAsSeen', { id: this.notification.id })
	this.$store.dispatch('updateNotification', {
	id: this.notification.id,
	updater: notification => {
	notification.type = 'follow'
	}
	})
	},
	denyUser () {
	this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
	.then(() => {
	this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id })
	this.$store.dispatch('removeFollowRequest', this.user)
	})
	}
	},
	computed: {
	userClass () {
	return highlightClass(this.notification.from_profile)
	},
	userStyle () {
	const highlight = this.$store.getters.mergedConfig.highlight
	const user = this.notification.from_profile
	return highlightStyle(highlight[user.screen_name])
	},
	user () {
	return this.$store.getters.findUser(this.notification.from_profile.id)
	},
	userProfileLink () {
	return this.generateUserProfileLink(this.user)
	},
	targetUser () {
	return this.$store.getters.findUser(this.notification.target.id)
	},
	targetUserProfileLink () {
	return this.generateUserProfileLink(this.targetUser)
	},
	needMute () {
	return this.$store.getters.relationship(this.user.id).muting
	},
	isStatusNotification () {
	return isStatusNotification(this.notification.type)
	},
	...mapState({
	currentUser: state => state.users.currentUser
	})
	}
	}

	export default Notification
	diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
	index 6a5417b375..26b174ff09 100644
	--- a/src/components/notification/notification.vue
	+++ b/src/components/notification/notification.vue
	@@ -1,234 +1,233 @@
	<template>
	<Status
	v-if="notification.type === 'mention'"
	class="Notification"
	: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_ui }}
	- </router-link>
	+ <user-link
	+ :user="notification.from_profile"
	+ :at="false"
	+ />
	</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="$router.resolve(userProfileLink).href"
	@click.prevent
	>
	<UserPopover
	:user-id="notification.from_profile.id"
	:overlay-centers="true"
	>
	<UserAvatar
	class="post-avatar"
	:bot="botIndicator"
	:compact="true"
	:better-shadow="betterShadow"
	:user="notification.from_profile"
	/>
	</UserPopover>
	</a>
	<div class="notification-right">
	<span class="notification-details">
	<div class="name-and-action">
	<!-- eslint-disable vue/no-v-html -->
	<bdi v-if="!!notification.from_profile.name_html">
	<RichContent
	class="username"
	:title="'@'+notification.from_profile.screen_name_ui"
	:html="notification.from_profile.name_html"
	:emoji="notification.from_profile.emoji"
	/>
	</bdi>
	<!-- eslint-enable vue/no-v-html -->
	<span
	v-else
	class="username"
	: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-t
	scope="global"
	keypath="notifications.reacted_with"
	>
	<span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
	</i18n-t>
	</small>
	</span>
	<span v-if="notification.type === 'pleroma:report'">
	<small>{{ $t('notifications.submitted_report') }}</small>
	</span>
	<span v-if="notification.type === 'poll'">
	<FAIcon
	class="type-icon"
	icon="poll-h"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.poll_ended') }}</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"
	+ <user-link
	class="follow-name"
	- >
	- @{{ notification.from_profile.screen_name_ui }}
	- </router-link>
	+ :user="notification.from_profile"
	+ />
	<div
	v-if="notification.type === 'follow_request'"
	style="white-space: nowrap;"
	>
	<button
	class="button-unstyled"
	:title="$t('tool_tip.accept_follow_request')"
	@click="approveUser()"
	>
	<FAIcon
	icon="check"
	class="fa-scale-110 fa-old-padding follow-request-accept"
	/>
	</button>
	<button
	class="button-unstyled"
	:title="$t('tool_tip.reject_follow_request')"
	@click="denyUser()"
	>
	<FAIcon
	icon="times"
	class="fa-scale-110 fa-old-padding follow-request-reject"
	/>
	</button>
	</div>
	</div>
	<div
	v-else-if="notification.type === 'move'"
	class="move-text"
	>
	- <router-link :to="targetUserProfileLink">
	- @{{ notification.target.screen_name_ui }}
	- </router-link>
	+ <user-link
	+ :user="notification.target"
	+ />
	</div>
	<Report
	v-else-if="notification.type === 'pleroma:report'"
	:report-id="notification.report.id"
	/>
	<template v-else>
	<StatusContent
	class="faint"
	:compact="true"
	: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/status/status.js b/src/components/status/status.js
	index 384063a732..19356664c1 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,488 +1,490 @@
	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 UserAvatar from '../user_avatar/user_avatar.vue'
	import AvatarList from '../avatar_list/avatar_list.vue'
	import Timeago from '../timeago/timeago.vue'
	import StatusContent from '../status_content/status_content.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import StatusPopover from '../status_popover/status_popover.vue'
	import UserPopover from '../user_popover/user_popover.vue'
	import UserListPopover from '../user_list_popover/user_list_popover.vue'
	import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
	+import UserLink from '../user_link/user_link.vue'
	import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
	import MentionLink from 'src/components/mention_link/mention_link.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,
	faChevronUp,
	faChevronDown,
	faAngleDoubleRight
	} from '@fortawesome/free-solid-svg-icons'

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

	const camelCase = name => name.charAt(0).toUpperCase() + name.slice(1)

	const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
	const camelized = camelCase(name)
	const toggle = `controlledToggle${camelized}`
	const controlledName = `controlled${camelized}`
	const uncontrolledName = `uncontrolled${camelized}`
	res[name] = function () {
	return ((this.$data[toggle] !== undefined \|\| this.$props[toggle] !== undefined) && this[toggle]) ? this[controlledName] : this[uncontrolledName]
	}
	return res
	}, {})

	const controlledOrUncontrolledToggle = (obj, name) => {
	const camelized = camelCase(name)
	const toggle = `controlledToggle${camelized}`
	const uncontrolledName = `uncontrolled${camelized}`
	if (obj[toggle]) {
	obj[toggle]()
	} else {
	obj[uncontrolledName] = !obj[uncontrolledName]
	}
	}

	const controlledOrUncontrolledSet = (obj, name, val) => {
	const camelized = camelCase(name)
	const set = `controlledSet${camelized}`
	const uncontrolledName = `uncontrolled${camelized}`
	if (obj[set]) {
	obj[set](val)
	} else {
	obj[uncontrolledName] = val
	}
	}

	const Status = {
	name: 'Status',
	components: {
	ReplyButton,
	FavoriteButton,
	ReactButton,
	RetweetButton,
	ExtraButtons,
	PostStatusForm,
	UserAvatar,
	AvatarList,
	Timeago,
	StatusPopover,
	UserListPopover,
	EmojiReactions,
	StatusContent,
	RichContent,
	MentionLink,
	MentionsLine,
	- UserPopover
	+ UserPopover,
	+ UserLink
	},
	props: [
	'statusoid',
	'expandable',
	'inConversation',
	'focused',
	'highlight',
	'compact',
	'replies',
	'isPreview',
	'noHeading',
	'inlineExpanded',
	'showPinned',
	'inProfile',
	'profileUserId',

	'simpleTree',
	'controlledThreadDisplayStatus',
	'controlledToggleThreadDisplay',
	'showOtherRepliesAsButton',

	'controlledShowingTall',
	'controlledToggleShowingTall',
	'controlledExpandingSubject',
	'controlledToggleExpandingSubject',
	'controlledShowingLongSubject',
	'controlledToggleShowingLongSubject',
	'controlledReplying',
	'controlledToggleReplying',
	'controlledMediaPlaying',
	'controlledSetMediaPlaying',
	'dive'
	],
	data () {
	return {
	uncontrolledReplying: false,
	unmuted: false,
	userExpanded: false,
	uncontrolledMediaPlaying: [],
	suspendable: true,
	error: null,
	headTailLinks: null
	}
	},
	computed: {
	...controlledOrUncontrolledGetters(['replying', 'mediaPlaying']),
	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) {
	const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
	// FIXME Why user not found sometimes???
	return user ? user.statusnet_profile_url : 'NOT_FOUND'
	}
	},
	retweet () { return !!this.statusoid.retweeted_status },
	retweeterUser () { return this.statusoid.user },
	retweeter () { return this.statusoid.user.name \|\| this.statusoid.user.screen_name_ui },
	retweeterHtml () { return this.statusoid.user.name },
	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)
	},
	rtBotStatus () {
	return this.statusoid.user.bot
	},
	botStatus () {
	return this.status.user.bot
	},
	botIndicator () {
	return this.botStatus && !this.hideBotIndication
	},
	rtBotIndicator () {
	return this.rtBotStatus && !this.hideBotIndication
	},
	mentionsLine () {
	if (!this.headTailLinks) return []
	const writtenSet = new Set(this.headTailLinks.writtenMentions.map(_ => _.url))
	return this.status.attentions.filter(attn => {
	// no reply user
	return attn.id !== this.status.in_reply_to_user_id &&
	// no self-replies
	attn.statusnet_profile_url !== this.status.user.statusnet_profile_url &&
	// don't include if mentions is written
	!writtenSet.has(attn.statusnet_profile_url)
	}).map(attn => ({
	url: attn.statusnet_profile_url,
	content: attn.screen_name,
	userId: attn.id
	}))
	},
	hasMentionsLine () {
	return this.mentionsLine.length > 0
	},
	muted () {
	if (this.statusoid.user.id === this.currentUser.id) return false
	const reasonsToMute = this.userIsMuted \|\|
	// Thread is muted
	status.thread_muted \|\|
	// Wordfiltered
	this.muteWordHits.length > 0 \|\|
	// bot status
	(this.muteBotStatuses && this.botStatus && !this.compact)
	return !this.unmuted && !this.shouldNotMute && reasonsToMute
	},
	userIsMuted () {
	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)
	return 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)
	},
	shouldNotMute () {
	const { status } = this
	const { reblog } = status
	return (
	(
	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
	},
	hideMutedUsers () {
	return this.mergedConfig.hideMutedPosts
	},
	hideMutedThreads () {
	return this.mergedConfig.hideMutedThreads
	},
	hideFilteredStatuses () {
	return this.mergedConfig.hideFilteredStatuses
	},
	hideWordFilteredPosts () {
	return this.mergedConfig.hideWordFilteredPosts
	},
	hideStatus () {
	return (!this.shouldNotMute) && (
	(this.muted && this.hideFilteredStatuses) \|\|
	(this.userIsMuted && this.hideMutedUsers) \|\|
	(this.status.thread_muted && this.hideMutedThreads) \|\|
	(this.muteWordHits.length > 0 && this.hideWordFilteredPosts)
	)
	},
	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_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 () {
	// eslint-disable-next-line no-prototype-builtins
	return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ')
	},
	hidePostStats () {
	return this.mergedConfig.hidePostStats
	},
	muteBotStatuses () {
	return this.mergedConfig.muteBotStatuses
	},
	hideBotIndication () {
	return this.mergedConfig.hideBotIndication
	},
	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
	},
	inThreadForest () {
	return !!this.controlledThreadDisplayStatus
	},
	threadShowing () {
	return this.controlledThreadDisplayStatus === 'showing'
	},
	visibilityLocalized () {
	return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
	}
	},
	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 () {
	controlledOrUncontrolledToggle(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) {
	controlledOrUncontrolledSet(this, 'mediaPlaying', this.mediaPlaying.concat(id))
	},
	removeMediaPlaying (id) {
	controlledOrUncontrolledSet(this, 'mediaPlaying', this.mediaPlaying.filter(mediaId => mediaId !== id))
	},
	setHeadTailLinks (headTailLinks) {
	this.headTailLinks = headTailLinks
	},
	toggleThreadDisplay () {
	this.controlledToggleThreadDisplay()
	},
	scrollIfHighlighted (highlightId) {
	const id = highlightId
	if (this.status.id === id) {
	const rect = this.$el.getBoundingClientRect()
	if (rect.top < 100) {
	// Post is above screen, match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} 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)
	}
	}
	}
	},
	watch: {
	highlight: function (id) {
	this.scrollIfHighlighted(id)
	},
	'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
	}
	}
	}

	export default Status
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index 967a966c48..91f5ffface 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,496 +1,496 @@
	<template>
	<div
	v-if="!hideStatus"
	ref="root"
	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_ui }}
	- </router-link>
	+ <user-link
	+ :user="status.user"
	+ :at="false"
	+ />
	</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"
	:bot="rtBotIndicator"
	: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"
	>
	<RichContent
	:html="retweeterHtml"
	:emoji="retweeterUser.emoji"
	/>
	</router-link>
	<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"
	>
	<a
	:href="$router.resolve(userProfileLink).href"
	@click.prevent
	>
	<UserPopover
	:user-id="status.user.id"
	:overlay-centers="true"
	>
	<UserAvatar
	class="post-avatar"
	:bot="botIndicator"
	:compact="compact"
	:better-shadow="betterShadow"
	:user="status.user"
	/>
	</UserPopover>
	</a>
	</div>
	<div class="right-side">
	<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"
	>
	<RichContent
	:html="status.user.name"
	:emoji="status.user.emoji"
	/>
	</h4>
	<h4
	v-else
	class="status-username"
	:title="status.user.name"
	>
	{{ status.user.name }}
	</h4>
	- <router-link
	+ <user-link
	class="account-name"
	:title="status.user.screen_name_ui"
	- :to="userProfileLink"
	- >
	- {{ status.user.screen_name_ui }}
	- </router-link>
	+ :user="status.user"
	+ :at="false"
	+ />
	<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="visibilityLocalized"
	>
	<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>
	<button
	v-if="inThreadForest && replies && replies.length && !simpleTree"
	class="button-unstyled"
	:title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
	:aria-expanded="threadShowing ? 'true' : 'false'"
	@click.prevent="toggleThreadDisplay"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	:icon="threadShowing ? 'chevron-up' : 'chevron-down'"
	/>
	</button>
	<button
	v-if="dive && !simpleTree"
	class="button-unstyled"
	:title="$t('status.show_only_conversation_under_this')"
	@click.prevent="dive"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	:icon="'angle-double-right'"
	/>
	</button>
	</span>
	</div>
	<div
	v-if="isReply \|\| hasMentionsLine"
	class="heading-reply-row"
	>
	<span
	v-if="isReply"
	class="glued-label reply-glued-label"
	>
	<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="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>
	<MentionLink
	:content="replyToName"
	:url="replyProfileLink"
	:user-id="status.in_reply_to_user_id"
	:user-screen-name="status.in_reply_to_screen_name"
	/>
	</span>

	<!-- This little wrapper is made for sole purpose of "gluing" -->
	<!-- "Mentions" label to the first mention -->
	<span
	v-if="hasMentionsLine"
	class="glued-label"
	>
	<span
	class="mentions"
	:aria-label="$t('tool_tip.mentions')"
	@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	>
	<span
	class="mentions-text"
	>
	{{ $t('status.mentions') }}
	</span>
	</span>
	<MentionsLine
	v-if="hasMentionsLine"
	:mentions="mentionsLine.slice(0, 1)"
	class="mentions-line-first"
	/>
	</span>
	{{ ' ' }}
	<MentionsLine
	v-if="hasMentionsLine"
	:mentions="mentionsLine.slice(1)"
	class="mentions-line"
	/>
	</div>
	</div>

	<StatusContent
	ref="content"
	:status="status"
	:no-heading="noHeading"
	:highlight="highlight"
	:focused="isFocused"
	:controlled-showing-tall="controlledShowingTall"
	:controlled-expanding-subject="controlledExpandingSubject"
	:controlled-showing-long-subject="controlledShowingLongSubject"
	:controlled-toggle-showing-tall="controlledToggleShowingTall"
	:controlled-toggle-expanding-subject="controlledToggleExpandingSubject"
	:controlled-toggle-showing-long-subject="controlledToggleShowingLongSubject"
	@mediaplay="addMediaPlaying($event)"
	@mediapause="removeMediaPlaying($event)"
	@parseReady="setHeadTailLinks"
	/>

	<div
	v-if="inConversation && !isPreview && replies && replies.length"
	class="replies"
	>
	<button
	v-if="showOtherRepliesAsButton && replies.length > 1"
	class="button-unstyled -link faint"
	:title="$tc('status.ancestor_follow', replies.length - 1, { numReplies: replies.length - 1 })"
	@click.prevent="dive"
	>
	{{ $tc('status.replies_list_with_others', replies.length - 1, { numReplies: replies.length - 1 }) }}
	</button>
	<span
	v-else
	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>

	<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
	class="post-avatar"
	:compact="compact"
	:bot="botIndicator"
	/>
	</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>
	</template>

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

	<style src="./status.scss" lang="scss"></style>
	diff --git a/src/components/unicode_domain_indicator/unicode_domain_indicator.vue b/src/components/unicode_domain_indicator/unicode_domain_indicator.vue
	new file mode 100644
	index 0000000000..8f35245f91
	--- /dev/null
	+++ b/src/components/unicode_domain_indicator/unicode_domain_indicator.vue
	@@ -0,0 +1,26 @@
	+<template>
	+ <FAIcon
	+ v-if="user && user.screen_name_ui_contains_non_ascii"
	+ icon="code"
	+ :title="$t('unicode_domain_indicator.tooltip')"
	+ />
	+</template>
	+
	+<script>
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import {
	+ faCode
	+} from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faCode
	+)
	+
	+const UnicodeDomainIndicator = {
	+ props: {
	+ user: Object
	+ }
	+}
	+
	+export default UnicodeDomainIndicator
	+</script>
	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	index 4c81e2c78a..37458ba236 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,193 +1,195 @@
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import RemoteFollow from '../remote_follow/remote_follow.vue'
	import ProgressButton from '../progress_button/progress_button.vue'
	import FollowButton from '../follow_button/follow_button.vue'
	import ModerationTools from '../moderation_tools/moderation_tools.vue'
	import AccountActions from '../account_actions/account_actions.vue'
	import Select from '../select/select.vue'
	+import UserLink from '../user_link/user_link.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { mapGetters } from 'vuex'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faRss,
	faSearchPlus,
	faExternalLinkAlt,
	faEdit,
	faTimes,
	faExpandAlt
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faRss,
	faBell,
	faSearchPlus,
	faExternalLinkAlt,
	faEdit,
	faTimes,
	faExpandAlt
	)

	export default {
	props: [
	'userId',
	'switcher',
	'selected',
	'hideBio',
	'rounded',
	'bordered',
	'avatarAction', // default - open profile, 'zoom' - zoom, function - call function
	'onClose'
	],
	data () {
	return {
	followRequestInProgress: false,
	betterShadow: this.$store.state.interface.browserSupport.cssFilter
	}
	},
	created () {
	this.$store.dispatch('fetchUserRelationship', this.user.id)
	},
	computed: {
	user () {
	return this.$store.getters.findUser(this.userId)
	},
	relationship () {
	return this.$store.getters.relationship(this.userId)
	},
	classes () {
	return [{
	'-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
	'-rounded': this.rounded === true, // set border-radius for all sides
	'-bordered': this.bordered === true, // set border for all sides
	'-popover': !!this.onClose // set popover rounding
	}]
	},
	style () {
	return {
	backgroundImage: [
	'linear-gradient(to bottom, var(--profileTint), var(--profileTint))',
	`url(${this.user.cover_photo})`
	].join(', ')
	}
	},
	isOtherUser () {
	return this.user.id !== this.$store.state.users.currentUser.id
	},
	subscribeUrl () {
	// eslint-disable-next-line no-undef
	const serverUrl = new URL(this.user.statusnet_profile_url)
	return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
	},
	loggedIn () {
	return this.$store.state.users.currentUser
	},
	dailyAvg () {
	const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
	return Math.round(this.user.statuses_count / days)
	},
	userHighlightType: {
	get () {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return (data && data.type) \|\| 'disabled'
	},
	set (type) {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	if (type !== 'disabled') {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) \|\| '#FFFFFF', type })
	} else {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
	}
	},
	...mapGetters(['mergedConfig'])
	},
	userHighlightColor: {
	get () {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return data && data.color
	},
	set (color) {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
	}
	},
	visibleRole () {
	const rights = this.user.rights
	if (!rights) { return }
	const validRole = rights.admin \|\| rights.moderator
	const roleTitle = rights.admin ? 'admin' : 'moderator'
	return validRole && roleTitle
	},
	hideFollowsCount () {
	return this.isOtherUser && this.user.hide_follows_count
	},
	hideFollowersCount () {
	return this.isOtherUser && this.user.hide_followers_count
	},
	...mapGetters(['mergedConfig'])
	},
	components: {
	UserAvatar,
	RemoteFollow,
	ModerationTools,
	AccountActions,
	ProgressButton,
	FollowButton,
	Select,
	- RichContent
	+ RichContent,
	+ UserLink
	},
	methods: {
	muteUser () {
	this.$store.dispatch('muteUser', this.user.id)
	},
	unmuteUser () {
	this.$store.dispatch('unmuteUser', this.user.id)
	},
	subscribeUser () {
	return this.$store.dispatch('subscribeUser', this.user.id)
	},
	unsubscribeUser () {
	return this.$store.dispatch('unsubscribeUser', this.user.id)
	},
	setProfileView (v) {
	if (this.switcher) {
	const store = this.$store
	store.commit('setProfileView', { v })
	}
	},
	linkClicked ({ target }) {
	if (target.tagName === 'SPAN') {
	target = target.parentNode
	}
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	},
	userProfileLink (user) {
	return generateProfileLink(
	user.id, user.screen_name,
	this.$store.state.instance.restrictedNicknames
	)
	},
	openProfileTab () {
	this.$store.dispatch('openSettingsModalTab', 'profile')
	},
	zoomAvatar () {
	const attachment = {
	url: this.user.profile_image_url_original,
	mimetype: 'image'
	}
	this.$store.dispatch('setMedia', [attachment])
	this.$store.dispatch('setCurrentMedia', attachment)
	},
	mentionUser () {
	this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
	},
	onAvatarClickHandler (e) {
	if (this.onAvatarClick) {
	e.preventDefault()
	this.onAvatarClick()
	}
	}
	}
	}
	diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
	index ace89c51c6..b84ff27d97 100644
	--- a/src/components/user_card/user_card.vue
	+++ b/src/components/user_card/user_card.vue
	@@ -1,319 +1,316 @@
	<template>
	<div
	class="user-card"
	:class="classes"
	>
	<div
	:class="{ 'hide-bio': hideBio }"
	:style="style"
	class="background-image"
	/>
	<div :class="onClose ? '' : panel-heading -flexible-height">
	<div class="user-info">
	<div class="container">
	<a
	v-if="avatarAction === 'zoom'"
	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>
	<UserAvatar
	v-else-if="typeof avatarAction === 'function'"
	class="user-info-avatar"
	:better-shadow="betterShadow"
	:user="user"
	@click="avatarAction"
	/>
	<router-link
	v-else
	:to="userProfileLink(user)"
	>
	<UserAvatar
	:better-shadow="betterShadow"
	:user="user"
	/>
	</router-link>
	<div class="user-summary">
	<div class="top-line">
	<router-link
	:to="userProfileLink(user)"
	class="user-name"
	>
	<RichContent
	:title="user.name"
	:html="user.name"
	:emoji="user.emoji"
	/>
	</router-link>
	<button
	v-if="!isOtherUser && user.is_local"
	class="button-unstyled edit-profile-button"
	@click.stop="openProfileTab"
	>
	<FAIcon
	fixed-width
	class="icon"
	icon="edit"
	:title="$t('user_card.edit_profile')"
	/>
	</button>
	<a
	v-if="isOtherUser && !user.is_local"
	:href="user.statusnet_profile_url"
	target="_blank"
	class="button-unstyled external-link-button"
	>
	<FAIcon
	class="icon"
	icon="external-link-alt"
	/>
	</a>
	<AccountActions
	v-if="isOtherUser && loggedIn"
	:user="user"
	:relationship="relationship"
	/>
	<router-link
	v-if="onClose"
	:to="userProfileLink(user)"
	class="button-unstyled external-link-button"
	@click="onClose"
	>
	<FAIcon
	class="icon"
	icon="expand-alt"
	/>
	</router-link>
	<button
	v-if="onClose"
	class="button-unstyled external-link-button"
	@click="onClose"
	>
	<FAIcon
	class="icon"
	icon="times"
	/>
	</button>
	</div>
	<div class="bottom-line">
	- <router-link
	+ <user-link
	class="user-screen-name"
	- :title="user.screen_name_ui"
	- :to="userProfileLink(user)"
	- >
	- @{{ user.screen_name_ui }}
	- </router-link>
	+ :user="user"
	+ />
	<template v-if="!hideBio">
	<span
	v-if="user.deactivated"
	class="alert user-role"
	>
	{{ $t('user_card.deactivated') }}
	</span>
	<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"
	>
	{{ ' ' }}
	<Select
	:id="'userHighlightSel'+user.id"
	v-model="userHighlightType"
	class="userHighlightSel"
	>
	<option value="disabled">
	{{ $t('user_card.highlight.disabled') }}
	</option>
	<option value="solid">
	{{ $t('user_card.highlight.solid') }}
	</option>
	<option value="striped">
	{{ $t('user_card.highlight.striped') }}
	</option>
	<option value="side">
	{{ $t('user_card.highlight.side') }}
	</option>
	</Select>
	</div>
	</div>
	<div
	v-if="loggedIn && isOtherUser"
	class="user-interactions"
	>
	<div class="btn-group">
	<FollowButton
	:relationship="relationship"
	:user="user"
	/>
	<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"
	:disabled="user.deactivated"
	@click="unmuteUser"
	>
	{{ $t('user_card.muted') }}
	</button>
	<button
	v-else
	class="btn button-default btn-block"
	:disabled="user.deactivated"
	@click="muteUser"
	>
	{{ $t('user_card.mute') }}
	</button>
	</div>
	<div>
	<button
	class="btn button-default btn-block"
	:disabled="user.deactivated"
	@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>
	<RichContent
	v-if="!hideBio"
	class="user-card-bio"
	:html="user.description_html"
	:emoji="user.emoji"
	:handle-links="true"
	/>
	</div>
	</div>
	</template>

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

	<style lang="scss" src="./user_card.scss" />
	diff --git a/src/components/user_link/user_link.vue b/src/components/user_link/user_link.vue
	new file mode 100644
	index 0000000000..efd96e12ab
	--- /dev/null
	+++ b/src/components/user_link/user_link.vue
	@@ -0,0 +1,38 @@
	+<template>
	+ <router-link
	+ :title="user.screen_name_ui"
	+ :to="userProfileLink(user)"
	+ >
	+ {{ at ? '@' : '' }}{{ user.screen_name_ui }}<UnicodeDomainIndicator
	+ :user="user"
	+ />
	+ </router-link>
	+</template>
	+
	+<script>
	+import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
	+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	+
	+const UserLink = {
	+ props: {
	+ user: Object,
	+ at: {
	+ type: Boolean,
	+ default: true
	+ }
	+ },
	+ components: {
	+ UnicodeDomainIndicator
	+ },
	+ methods: {
	+ userProfileLink (user) {
	+ return generateProfileLink(
	+ user.id, user.screen_name,
	+ this.$store.state.instance.restrictedNicknames
	+ )
	+ }
	+ }
	+}
	+
	+export default UserLink
	+</script>
	diff --git a/src/components/user_list_popover/user_list_popover.js b/src/components/user_list_popover/user_list_popover.js
	index e24eb9f78c..046e0abd0c 100644
	--- a/src/components/user_list_popover/user_list_popover.js
	+++ b/src/components/user_list_popover/user_list_popover.js
	@@ -1,28 +1,30 @@
	import { defineAsyncComponent } from 'vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	+import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'

	library.add(
	faCircleNotch
	)

	const UserListPopover = {
	name: 'UserListPopover',
	props: [
	'users'
	],
	components: {
	RichContent,
	+ UnicodeDomainIndicator,
	Popover: defineAsyncComponent(() => import('../popover/popover.vue')),
	UserAvatar: defineAsyncComponent(() => import('../user_avatar/user_avatar.vue'))
	},
	computed: {
	usersCapped () {
	return this.users.slice(0, 16)
	}
	}
	}

	export default UserListPopover
	diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
	index a3ce54c306..635dc7f6cc 100644
	--- a/src/components/user_list_popover/user_list_popover.vue
	+++ b/src/components/user_list_popover/user_list_popover.vue
	@@ -1,81 +1,81 @@
	<template>
	<Popover
	trigger="hover"
	placement="top"
	:offset="{ y: 5 }"
	>
	<template #trigger>
	<slot />
	</template>
	<template #content>
	<div class="user-list-popover">
	<template v-if="users.length">
	<div
	v-for="(user) in usersCapped"
	:key="user.id"
	class="user-list-row"
	>
	<UserAvatar
	:user="user"
	class="avatar-small"
	:compact="true"
	/>
	<div class="user-list-names">
	<!-- eslint-disable vue/no-v-html -->
	<RichContent
	class="username"
	:title="'@'+user.screen_name_ui"
	:html="user.name_html"
	:emoji="user.emoji"
	/>
	<!-- eslint-enable vue/no-v-html -->
	- <span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
	+ <span class="user-list-screen-name">{{ user.screen_name_ui }}</span><UnicodeDomainIndicator :user="user" />
	</div>
	</div>
	</template>
	<template v-else>
	<FAIcon
	icon="circle-notch"
	spin
	size="3x"
	/>
	</template>
	</div>
	</template>
	</Popover>
	</template>

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

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

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

	--emoji-size: 16px;

	.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: 0.65em;
	}
	}
	}

	</style>
	diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js
	index 85ffc6616a..67fde08446 100644
	--- a/src/components/user_reporting_modal/user_reporting_modal.js
	+++ b/src/components/user_reporting_modal/user_reporting_modal.js
	@@ -1,116 +1,118 @@
	import Status from '../status/status.vue'
	import List from '../list/list.vue'
	import Checkbox from '../checkbox/checkbox.vue'
	import Modal from '../modal/modal.vue'
	+import UserLink from '../user_link/user_link.vue'

	const UserReportingModal = {
	components: {
	Status,
	List,
	Checkbox,
	- Modal
	+ Modal,
	+ UserLink
	},
	data () {
	return {
	comment: '',
	forward: false,
	statusIdsToReport: [],
	processing: false,
	error: false
	}
	},
	computed: {
	reportModal () {
	return this.$store.state.reports.reportModal
	},
	isLoggedIn () {
	return !!this.$store.state.users.currentUser
	},
	isOpen () {
	return this.isLoggedIn && this.reportModal.activated
	},
	userId () {
	return this.reportModal.userId
	},
	user () {
	return this.$store.getters.findUser(this.userId)
	},
	remoteInstance () {
	return !this.user.is_local && this.user.screen_name.substr(this.user.screen_name.indexOf('@') + 1)
	},
	statuses () {
	return this.reportModal.statuses
	},
	preTickedIds () {
	return this.reportModal.preTickedIds
	}
	},
	watch: {
	userId: 'resetState',
	preTickedIds (newValue) {
	this.statusIdsToReport = newValue
	}
	},
	methods: {
	resetState () {
	// Reset state
	this.comment = ''
	this.forward = false
	this.statusIdsToReport = this.preTickedIds
	this.processing = false
	this.error = false
	},
	closeModal () {
	this.$store.dispatch('closeUserReportingModal')
	},
	reportUser () {
	this.processing = true
	this.error = false
	const params = {
	userId: this.userId,
	comment: this.comment,
	forward: this.forward,
	statusIds: this.statusIdsToReport
	}
	this.$store.state.api.backendInteractor.reportUser({ ...params })
	.then(() => {
	this.processing = false
	this.resetState()
	this.closeModal()
	})
	.catch(() => {
	this.processing = false
	this.error = true
	})
	},
	clearError () {
	this.error = false
	},
	isChecked (statusId) {
	return this.statusIdsToReport.indexOf(statusId) !== -1
	},
	toggleStatus (checked, statusId) {
	if (checked === this.isChecked(statusId)) {
	return
	}

	if (checked) {
	this.statusIdsToReport.push(statusId)
	} else {
	this.statusIdsToReport.splice(this.statusIdsToReport.indexOf(statusId), 1)
	}
	},
	resize (e) {
	const target = e.target \|\| e
	if (!(target instanceof window.Element)) { return }
	// Auto is needed to make textbox shrink when removing lines
	target.style.height = 'auto'
	target.style.height = `${target.scrollHeight}px`
	if (target.value === '') {
	target.style.height = null
	}
	}
	}
	}

	export default UserReportingModal
	diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
	index 429a66e2e3..8c42ab7bb9 100644
	--- a/src/components/user_reporting_modal/user_reporting_modal.vue
	+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
	@@ -1,170 +1,174 @@
	<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_ui]) }}
	- </div>
	+ <i18n-t
	+ tag="div"
	+ keypath="user_reporting.title"
	+ class="title"
	+ >
	+ <UserLink :user="user" />
	+ </i18n-t>
	</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 #item="{item}">
	<div class="status-fadein user-reporting-panel-sitem">
	<Status
	:in-conversation="false"
	:focused="false"
	:statusoid="item"
	/>
	<Checkbox
	:model-value="isChecked(item.id)"
	@update:model-value="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-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: var(--post-line-height);
	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/i18n/en.json b/src/i18n/en.json
	index 91722d9a4a..4ce56678cf 100644
	--- a/src/i18n/en.json
	+++ b/src/i18n/en.json
	@@ -1,1010 +1,1013 @@
	{
	"about": {
	"mrf": {
	"federation": "Federation",
	"keyword": {
	"keyword_policies": "Keyword policies",
	"ftl_removal": "Removal from \"The Whole Known Network\" Timeline",
	"reject": "Reject",
	"replace": "Replace",
	"is_replaced_by": "→"
	},
	"mrf_policies": "Enabled MRF policies",
	"mrf_policies_desc": "MRF policies manipulate the federation behaviour of the instance. The following policies are enabled:",
	"simple": {
	"simple_policies": "Instance-specific policies",
	"instance": "Instance",
	"reason": "Reason",
	"not_applicable": "N/A",
	"accept": "Accept",
	"accept_desc": "This instance only accepts messages from the following instances:",
	"reject": "Reject",
	"reject_desc": "This instance will not accept messages from the following instances:",
	"quarantine": "Quarantine",
	"quarantine_desc": "This instance will send only public posts to the following instances:",
	"ftl_removal": "Removal from \"Known Network\" Timeline",
	"ftl_removal_desc": "This instance removes these instances from \"Known Network\" timeline:",
	"media_removal": "Media Removal",
	"media_removal_desc": "This instance removes media from posts on the following instances:",
	"media_nsfw": "Media force-set as sensitive",
	"media_nsfw_desc": "This instance forces media to be set sensitive in posts on the following instances:"
	}
	},
	"staff": "Staff"
	},
	"shoutbox": {
	"title": "Shoutbox"
	},
	"domain_mute_card": {
	"mute": "Mute",
	"mute_progress": "Muting…",
	"unmute": "Unmute",
	"unmute_progress": "Unmuting…"
	},
	"exporter": {
	"export": "Export",
	"processing": "Processing, you'll soon be asked to download your file"
	},
	"features_panel": {
	"shout": "Shoutbox",
	"pleroma_chat_messages": "Pleroma Chat",
	"gopher": "Gopher",
	"media_proxy": "Media proxy",
	"scope_options": "Scope options",
	"text_limit": "Text limit",
	"title": "Features",
	"who_to_follow": "Who to follow",
	"upload_limit": "Upload limit"
	},
	"finder": {
	"error_fetching_user": "Error fetching user",
	"find_user": "Find user"
	},
	"general": {
	"apply": "Apply",
	"submit": "Submit",
	"more": "More",
	"loading": "Loading…",
	"generic_error": "An error occured",
	"generic_error_message": "An error occured: {0}",
	"error_retry": "Please try again",
	"retry": "Try again",
	"optional": "optional",
	"show_more": "Show more",
	"show_less": "Show less",
	"never_show_again": "Never show again",
	"dismiss": "Dismiss",
	"cancel": "Cancel",
	"disable": "Disable",
	"enable": "Enable",
	"confirm": "Confirm",
	"verify": "Verify",
	"close": "Close",
	"peek": "Peek",
	"role": {
	"admin": "Admin",
	"moderator": "Moderator"
	},
	"flash_content": "Click to show Flash content using Ruffle (Experimental, may not work).",
	"flash_security": "Note that this can be potentially dangerous since Flash content is still arbitrary code.",
	"flash_fail": "Failed to load flash content, see console for details.",
	"scope_in_timeline": {
	"direct": "Direct",
	"private": "Followers-only",
	"public": "Public",
	"unlisted": "Unlisted"
	}
	},
	"image_cropper": {
	"crop_picture": "Crop picture",
	"save": "Save",
	"save_without_cropping": "Save without cropping",
	"cancel": "Cancel"
	},
	"importer": {
	"submit": "Submit",
	"success": "Imported successfully.",
	"error": "An error occured while importing this file."
	},
	"login": {
	"login": "Log in",
	"description": "Log in with OAuth",
	"logout": "Log out",
	"password": "Password",
	"placeholder": "e.g. lain",
	"register": "Register",
	"username": "Username",
	"hint": "Log in to join the discussion",
	"authentication_code": "Authentication code",
	"enter_recovery_code": "Enter a recovery code",
	"enter_two_factor_code": "Enter a two-factor code",
	"recovery_code": "Recovery code",
	"heading": {
	"totp": "Two-factor authentication",
	"recovery": "Two-factor recovery"
	}
	},
	"media_modal": {
	"previous": "Previous",
	"next": "Next",
	"counter": "{current} / {total}",
	"hide": "Close media viewer"
	},
	"nav": {
	"about": "About",
	"administration": "Administration",
	"back": "Back",
	"friend_requests": "Follow requests",
	"mentions": "Mentions",
	"interactions": "Interactions",
	"dms": "Direct messages",
	"public_tl": "Public timeline",
	"timeline": "Timeline",
	"home_timeline": "Home timeline",
	"twkn": "Known Network",
	"bookmarks": "Bookmarks",
	"user_search": "User Search",
	"search": "Search",
	"who_to_follow": "Who to follow",
	"preferences": "Preferences",
	"timelines": "Timelines",
	"chats": "Chats",
	"lists": "Lists"
	},
	"notifications": {
	"broken_favorite": "Unknown status, searching for it…",
	"error": "Error fetching notifications: {0}",
	"favorited_you": "favorited your status",
	"followed_you": "followed you",
	"follow_request": "wants to follow you",
	"load_older": "Load older notifications",
	"notifications": "Notifications",
	"read": "Read!",
	"repeated_you": "repeated your status",
	"no_more_notifications": "No more notifications",
	"migrated_to": "migrated to",
	"reacted_with": "reacted with {0}",
	"submitted_report": "submitted a report",
	"poll_ended": "poll has ended"
	},
	"polls": {
	"add_poll": "Add poll",
	"add_option": "Add option",
	"option": "Option",
	"votes": "votes",
	"people_voted_count": "{count} person voted \| {count} people voted",
	"votes_count": "{count} vote \| {count} votes",
	"vote": "Vote",
	"type": "Poll type",
	"single_choice": "Single choice",
	"multiple_choices": "Multiple choices",
	"expiry": "Poll age",
	"expires_in": "Poll ends in {0}",
	"expired": "Poll ended {0} ago",
	"not_enough_options": "Too few unique options in poll"
	},
	"emoji": {
	"stickers": "Stickers",
	"emoji": "Emoji",
	"keep_open": "Keep picker open",
	"search_emoji": "Search for an emoji",
	"add_emoji": "Insert emoji",
	"custom": "Custom emoji",
	"unicode": "Unicode emoji",
	"load_all_hint": "Loaded first {saneAmount} emoji, loading all emoji may cause performance issues.",
	"load_all": "Loading all {emojiAmount} emoji"
	},
	"errors": {
	"storage_unavailable": "Pleroma could not access browser storage. Your login or your local settings won't be saved and you might encounter unexpected issues. Try enabling cookies."
	},
	"interactions": {
	"favs_repeats": "Repeats and favorites",
	"follows": "New follows",
	"emoji_reactions": "Emoji Reactions",
	"reports": "Reports",
	"moves": "User migrates",
	"load_older": "Load older interactions"
	},
	"post_status": {
	"new_status": "Post new status",
	"account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
	"account_not_locked_warning_link": "locked",
	"attachments_sensitive": "Mark attachments as sensitive",
	"media_description": "Media description",
	"content_type": {
	"text/plain": "Plain text",
	"text/html": "HTML",
	"text/markdown": "Markdown",
	"text/bbcode": "BBCode"
	},
	"content_warning": "Subject (optional)",
	"default": "Just landed in L.A.",
	"direct_warning_to_all": "This post will be visible to all the mentioned users.",
	"direct_warning_to_first_only": "This post will only be visible to the mentioned users at the beginning of the message.",
	"posting": "Posting",
	"post": "Post",
	"preview": "Preview",
	"preview_empty": "Empty",
	"empty_status_error": "Can't post an empty status with no files",
	"media_description_error": "Failed to update media, try again",
	"scope_notice": {
	"public": "This post will be visible to everyone",
	"private": "This post will be visible to your followers only",
	"unlisted": "This post will not be visible in Public Timeline and The Whole Known Network"
	},
	"scope": {
	"direct": "Direct - post to mentioned users only",
	"private": "Followers-only - post to followers only",
	"public": "Public - post to public timelines",
	"unlisted": "Unlisted - do not post to public timelines"
	}
	},
	"registration": {
	"bio_optional": "Bio (optional)",
	"email": "Email",
	"email_optional": "Email (optional)",
	"fullname": "Display name",
	"password_confirm": "Password confirmation",
	"registration": "Registration",
	"token": "Invite token",
	"captcha": "CAPTCHA",
	"new_captcha": "Click the image to get a new captcha",
	"username_placeholder": "e.g. lain",
	"fullname_placeholder": "e.g. Lain Iwakura",
	"bio_placeholder": "e.g.\nHi, I'm Lain.\nI’m an anime girl living in suburban Japan. You may know me from the Wired.",
	"reason": "Reason to register",
	"reason_placeholder": "This instance approves registrations manually.\nLet the administration know why you want to register.",
	"register": "Register",
	"validations": {
	"username_required": "cannot be left blank",
	"fullname_required": "cannot be left blank",
	"email_required": "cannot be left blank",
	"password_required": "cannot be left blank",
	"password_confirmation_required": "cannot be left blank",
	"password_confirmation_match": "should be the same as password"
	},
	"email_language": "In which language do you want to receive emails from the server?"
	},
	"remote_user_resolver": {
	"remote_user_resolver": "Remote user resolver",
	"searching_for": "Searching for",
	"error": "Not found."
	},
	"report": {
	"reporter": "Reporter:",
	"reported_user": "Reported user:",
	"reported_statuses": "Reported statuses:",
	"notes": "Notes:",
	"state": "State:",
	"state_open": "Open",
	"state_closed": "Closed",
	"state_resolved": "Resolved"
	},
	"selectable_list": {
	"select_all": "Select all"
	},
	"settings": {
	"app_name": "App name",
	"expert_mode": "Show advanced",
	"save": "Save changes",
	"security": "Security",
	"setting_changed": "Setting is different from default",
	"setting_server_side": "This setting is tied to your profile and affects all sessions and clients",
	"enter_current_password_to_confirm": "Enter your current password to confirm your identity",
	"post_look_feel": "Posts Look & Feel",
	"mention_links": "Mention links",
	"mfa": {
	"otp": "OTP",
	"setup_otp": "Setup OTP",
	"wait_pre_setup_otp": "presetting OTP",
	"confirm_and_enable": "Confirm & enable OTP",
	"title": "Two-factor Authentication",
	"generate_new_recovery_codes": "Generate new recovery codes",
	"warning_of_generate_new_codes": "When you generate new recovery codes, your old codes won’t work anymore.",
	"recovery_codes": "Recovery codes.",
	"waiting_a_recovery_codes": "Receiving backup codes…",
	"recovery_codes_warning": "Write the codes down or save them somewhere secure - otherwise you won't see them again. If you lose access to your 2FA app and recovery codes you'll be locked out of your account.",
	"authentication_methods": "Authentication methods",
	"scan": {
	"title": "Scan",
	"desc": "Using your two-factor app, scan this QR code or enter text key:",
	"secret_code": "Key"
	},
	"verify": {
	"desc": "To enable two-factor authentication, enter the code from your two-factor app:"
	}
	},
	"lists_navigation": "Show lists in navigation",
	"allow_following_move": "Allow auto-follow when following account moves",
	"attachmentRadius": "Attachments",
	"attachments": "Attachments",
	"avatar": "Avatar",
	"avatarAltRadius": "Avatars (notifications)",
	"avatarRadius": "Avatars",
	"background": "Background",
	"bio": "Bio",
	"email_language": "Language for receiving emails from the server",
	"block_export": "Block export",
	"block_export_button": "Export your blocks to a csv file",
	"block_import": "Block import",
	"block_import_error": "Error importing blocks",
	"blocks_imported": "Blocks imported! Processing them will take a while.",
	"mute_export": "Mute export",
	"mute_export_button": "Export your mutes to a csv file",
	"mute_import": "Mute import",
	"mute_import_error": "Error importing mutes",
	"mutes_imported": "Mutes imported! Processing them will take a while.",
	"import_mutes_from_a_csv_file": "Import mutes from a csv file",
	"account_backup": "Account backup",
	"account_backup_description": "This allows you to download an archive of your account information and your posts, but they cannot yet be imported into a Pleroma account.",
	"account_backup_table_head": "Backup",
	"download_backup": "Download",
	"backup_not_ready": "This backup is not ready yet.",
	"remove_backup": "Remove",
	"list_backups_error": "Error fetching backup list: {error}",
	"add_backup": "Create a new backup",
	"added_backup": "Added a new backup.",
	"add_backup_error": "Error adding a new backup: {error}",
	"blocks_tab": "Blocks",
	"bot": "This is a bot account",
	"btnRadius": "Buttons",
	"cBlue": "Blue (Reply, follow)",
	"cGreen": "Green (Retweet)",
	"cOrange": "Orange (Favorite)",
	"cRed": "Red (Cancel)",
	"change_email": "Change email",
	"change_email_error": "There was an issue changing your email.",
	"changed_email": "Email changed successfully!",
	"change_password": "Change password",
	"change_password_error": "There was an issue changing your password.",
	"changed_password": "Password changed successfully!",
	"chatMessageRadius": "Chat message",
	"collapse_subject": "Collapse posts with subjects",
	"composing": "Composing",
	"confirm_new_password": "Confirm new password",
	"current_password": "Current password",
	"mutes_and_blocks": "Mutes and Blocks",
	"data_import_export_tab": "Data import / export",
	"default_vis": "Default visibility scope",
	"delete_account": "Delete account",
	"delete_account_description": "Permanently delete your data and deactivate your account.",
	"delete_account_error": "There was an issue deleting your account. If this persists please contact your instance administrator.",
	"delete_account_instructions": "Type your password in the input below to confirm account deletion.",
	"account_alias": "Account aliases",
	"account_alias_table_head": "Alias",
	"list_aliases_error": "Error fetching aliases: {error}",
	"hide_list_aliases_error_action": "Close",
	"remove_alias": "Remove this alias",
	"new_alias_target": "Add a new alias (e.g. {example})",
	"added_alias": "Alias is added.",
	"add_alias_error": "Error adding alias: {error}",
	"move_account": "Move account",
	"move_account_notes": "If you want to move the account somewhere else, you must go to your target account and add an alias pointing here.",
	"move_account_target": "Target account (e.g. {example})",
	"moved_account": "Account is moved.",
	"move_account_error": "Error moving account: {error}",
	"discoverable": "Allow discovery of this account in search results and other services",
	"domain_mutes": "Domains",
	"avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
	"pad_emoji": "Pad emoji with spaces when adding from picker",
	"emoji_reactions_on_timeline": "Show emoji reactions on timeline",
	"export_theme": "Save preset",
	"filtering": "Filtering",
	"wordfilter": "Wordfilter",
	"filtering_explanation": "All statuses containing these words will be muted, one per line",
	"word_filter_and_more": "Word filter and more...",
	"follow_export": "Follow export",
	"follow_export_button": "Export your follows to a csv file",
	"follow_import": "Follow import",
	"follow_import_error": "Error importing followers",
	"follows_imported": "Follows imported! Processing them will take a while.",
	"accent": "Accent",
	"foreground": "Foreground",
	"general": "General",
	"hide_attachments_in_convo": "Hide attachments in conversations",
	"hide_attachments_in_tl": "Hide attachments in timeline",
	"hide_media_previews": "Hide media previews",
	"hide_muted_posts": "Hide posts of muted users",
	"mute_bot_posts": "Mute bot posts",
	"hide_bot_indication": "Hide bot indication in posts",
	"hide_all_muted_posts": "Hide muted posts",
	"max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)",
	"hide_isp": "Hide instance-specific panel",
	"hide_shoutbox": "Hide instance shoutbox",
	"right_sidebar": "Reverse order of columns",
	"navbar_column_stretch": "Stretch navbar to columns width",
	"always_show_post_button": "Always show floating New Post button",
	"hide_wallpaper": "Hide instance wallpaper",
	"preload_images": "Preload images",
	"use_one_click_nsfw": "Open NSFW attachments with just one click",
	"hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
	"hide_user_stats": "Hide user statistics (e.g. the number of followers)",
	"hide_filtered_statuses": "Hide all filtered posts",
	"hide_wordfiltered_statuses": "Hide word-filtered statuses",
	"hide_muted_threads": "Hide muted threads",
	"import_blocks_from_a_csv_file": "Import blocks from a csv file",
	"import_followers_from_a_csv_file": "Import follows from a csv file",
	"import_theme": "Load preset",
	"inputRadius": "Input fields",
	"checkboxRadius": "Checkboxes",
	"instance_default": "(default: {value})",
	"instance_default_simple": "(default)",
	"interface": "Interface",
	"interfaceLanguage": "Interface language",
	"invalid_theme_imported": "The selected file is not a supported Pleroma theme. No changes to your theme were made.",
	"limited_availability": "Unavailable in your browser",
	"links": "Links",
	"lock_account_description": "Restrict your account to approved followers only",
	"loop_video": "Loop videos",
	"loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
	"mutes_tab": "Mutes",
	"play_videos_in_modal": "Play videos in a popup frame",
	"file_export_import": {
	"backup_restore": "Settings backup",
	"backup_settings": "Backup settings to file",
	"backup_settings_theme": "Backup settings and theme to file",
	"restore_settings": "Restore settings from file",
	"errors": {
	"invalid_file": "The selected file is not a supported Pleroma settings backup. No changes were made.",
	"file_too_new": "Incompatile major version: {fileMajor}, this PleromaFE (settings ver {feMajor}) is too old to handle it",
	"file_too_old": "Incompatile major version: {fileMajor}, file version is too old and not supported (min. set. ver. {feMajor})",
	"file_slightly_new": "File minor version is different, some settings might not load"
	}
	},
	"profile_fields": {
	"label": "Profile metadata",
	"add_field": "Add field",
	"name": "Label",
	"value": "Content"
	},
	"account_privacy": "Privacy",
	"use_contain_fit": "Don't crop the attachment in thumbnails",
	"name": "Name",
	"name_bio": "Name & bio",
	"new_email": "New email",
	"new_password": "New password",
	"posts": "Posts",
	"user_profiles": "User Profiles",
	"notification_visibility": "Types of notifications to show",
	"notification_visibility_follows": "Follows",
	"notification_visibility_likes": "Favorites",
	"notification_visibility_mentions": "Mentions",
	"notification_visibility_repeats": "Repeats",
	"notification_visibility_moves": "User Migrates",
	"notification_visibility_emoji_reactions": "Reactions",
	"notification_visibility_polls": "Ends of polls you voted in",
	"no_rich_text_description": "Strip rich text formatting from all posts",
	"no_blocks": "No blocks",
	"no_mutes": "No mutes",
	"hide_favorites_description": "Don't show list of my favorites (people still get notified)",
	"hide_follows_description": "Don't show who I'm following",
	"hide_followers_description": "Don't show who's following me",
	"hide_follows_count_description": "Don't show follow count",
	"hide_followers_count_description": "Don't show follower count",
	"show_admin_badge": "Show \"Admin\" badge in my profile",
	"show_moderator_badge": "Show \"Moderator\" badge in my profile",
	"nsfw_clickthrough": "Hide sensitive/NSFW media",
	"oauth_tokens": "OAuth tokens",
	"token": "Token",
	"refresh_token": "Refresh token",
	"valid_until": "Valid until",
	"revoke_token": "Revoke",
	"panelRadius": "Panels",
	"pause_on_unfocused": "Pause when tab is not focused",
	"presets": "Presets",
	"profile_background": "Profile background",
	"profile_banner": "Profile banner",
	"profile_tab": "Profile",
	"radii_help": "Set up interface edge rounding (in pixels)",
	"replies_in_timeline": "Replies in timeline",
	"reply_visibility_all": "Show all replies",
	"reply_visibility_following": "Only show replies directed at me or users I'm following",
	"reply_visibility_self": "Only show replies directed at me",
	"reply_visibility_following_short": "Show replies to my follows",
	"reply_visibility_self_short": "Show replies to self only",
	"autohide_floating_post_button": "Automatically hide New Post button (mobile)",
	"saving_err": "Error saving settings",
	"saving_ok": "Settings saved",
	"search_user_to_block": "Search whom you want to block",
	"search_user_to_mute": "Search whom you want to mute",
	"security_tab": "Security",
	"scope_copy": "Copy scope when replying (DMs are always copied)",
	"minimal_scopes_mode": "Minimize post scope selection options",
	"set_new_avatar": "Set new avatar",
	"set_new_profile_background": "Set new profile background",
	"set_new_profile_banner": "Set new profile banner",
	"reset_avatar": "Reset avatar",
	"reset_profile_background": "Reset profile background",
	"reset_profile_banner": "Reset profile banner",
	"reset_avatar_confirm": "Do you really want to reset the avatar?",
	"reset_banner_confirm": "Do you really want to reset the banner?",
	"reset_background_confirm": "Do you really want to reset the background?",
	"settings": "Settings",
	"subject_input_always_show": "Always show subject field",
	"subject_line_behavior": "Copy subject when replying",
	"subject_line_email": "Like email: \"re: subject\"",
	"subject_line_mastodon": "Like mastodon: copy as is",
	"subject_line_noop": "Do not copy",
	"conversation_display": "Conversation display style",
	"conversation_display_tree": "Tree-style",
	"conversation_display_tree_quick": "Tree view",
	"disable_sticky_headers": "Don't stick column headers to top of the screen",
	"show_scrollbars": "Show side column's scrollbars",
	"third_column_mode": "When there's enough space, show third column containing",
	"third_column_mode_none": "Don't show third column at all",
	"third_column_mode_notifications": "Notifications column",
	"third_column_mode_postform": "Main post form and navigation",
	"columns": "Columns",
	"column_sizes": "Column sizes",
	"column_sizes_sidebar": "Sidebar",
	"column_sizes_content": "Content",
	"column_sizes_notifs": "Notifications",
	"tree_advanced": "Allow more flexible navigation in tree view",
	"tree_fade_ancestors": "Display ancestors of the current status in faint text",
	"conversation_display_linear": "Linear-style",
	"conversation_display_linear_quick": "Linear view",
	"conversation_other_replies_button": "Show the \"other replies\" button",
	"conversation_other_replies_button_below": "Below statuses",
	"conversation_other_replies_button_inside": "Inside statuses",
	"max_depth_in_thread": "Maximum number of levels in thread to display by default",
	"post_status_content_type": "Post status content type",
	"sensitive_by_default": "Mark posts as sensitive by default",
	"stop_gifs": "Pause animated images until you hover on them",
	"streaming": "Automatically show new posts when scrolled to the top",
	"auto_update": "Show new posts automatically",
	"user_mutes": "Users",
	"useStreamingApi": "Receive posts and notifications real-time",
	"use_websockets": "Use websockets (Realtime updates)",
	"text": "Text",
	"theme": "Theme",
	"theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
	"theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
	"theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
	"tooltipRadius": "Tooltips/alerts",
	"type_domains_to_mute": "Search domains to mute",
	"upload_a_photo": "Upload a photo",
	"user_settings": "User Settings",
	"values": {
	"false": "no",
	"true": "yes"
	},
	"virtual_scrolling": "Optimize timeline rendering",
	"use_at_icon": "Display {'@'} symbol as an icon instead of text",
	"mention_link_display": "Display mention links",
	"mention_link_display_short": "always as short names (e.g. {'@'}foo)",
	"mention_link_display_full_for_remote": "as full names only for remote users (e.g. {'@'}foo{'@'}example.org)",
	"mention_link_display_full": "always as full names (e.g. {'@'}foo{'@'}example.org)",
	"mention_link_use_tooltip": "Show user card when clicking mention links",
	"mention_link_show_avatar": "Show user avatar beside the link",
	"mention_link_show_avatar_quick": "Show user avatar next to mentions",
	"mention_link_fade_domain": "Fade domains (e.g. {'@'}example.org in {'@'}foo{'@'}example.org)",
	"mention_link_bolden_you": "Highlight mention of you when you are mentioned",
	"user_popover_avatar_action": "Popover avatar click action",
	"user_popover_avatar_action_zoom": "Zoom the avatar",
	"user_popover_avatar_action_close": "Close the popover",
	"user_popover_avatar_action_open": "Open profile",
	"user_popover_avatar_overlay": "Show user popover over user avatar",
	"fun": "Fun",
	"greentext": "Meme arrows",
	"show_yous": "Show (You)s",
	"notifications": "Notifications",
	"notification_setting_filters": "Filters",
	"notification_setting_block_from_strangers": "Block notifications from users who you do not follow",
	"notification_setting_privacy": "Privacy",
	"notification_setting_hide_notification_contents": "Hide the sender and contents of push notifications",
	"notification_mutes": "To stop receiving notifications from a specific user, use a mute.",
	"notification_blocks": "Blocking a user stops all notifications as well as unsubscribes them.",
	"enable_web_push_notifications": "Enable web push notifications",
	"more_settings": "More settings",
	"style": {
	"switcher": {
	"keep_color": "Keep colors",
	"keep_shadows": "Keep shadows",
	"keep_opacity": "Keep opacity",
	"keep_roundness": "Keep roundness",
	"keep_fonts": "Keep fonts",
	"save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme. When all checkboxes unset, exporting theme will save everything.",
	"reset": "Reset",
	"clear_all": "Clear all",
	"clear_opacity": "Clear opacity",
	"load_theme": "Load theme",
	"keep_as_is": "Keep as is",
	"use_snapshot": "Old version",
	"use_source": "New version",
	"help": {
	"upgraded_from_v2": "PleromaFE has been upgraded, theme could look a little bit different than you remember.",
	"v2_imported": "File you imported was made for older FE. We try to maximize compatibility but there still could be inconsistencies.",
	"future_version_imported": "File you imported was made in newer version of FE.",
	"older_version_imported": "File you imported was made in older version of FE.",
	"snapshot_present": "Theme snapshot is loaded, so all values are overriden. You can load theme's actual data instead.",
	"snapshot_missing": "No theme snapshot was in the file so it could look different than originally envisioned.",
	"fe_upgraded": "PleromaFE's theme engine upgraded after version update.",
	"fe_downgraded": "PleromaFE's version rolled back.",
	"migration_snapshot_ok": "Just to be safe, theme snapshot loaded. You can try loading theme data.",
	"migration_napshot_gone": "For whatever reason snapshot was missing, some stuff could look different than you remember.",
	"snapshot_source_mismatch": "Versions conflict: most likely FE was rolled back and updated again, if you changed theme using older version of FE you most likely want to use old version, otherwise use new version."
	}
	},
	"common": {
	"color": "Color",
	"opacity": "Opacity",
	"contrast": {
	"hint": "Contrast ratio is {ratio}, it {level} {context}",
	"level": {
	"aa": "meets Level AA guideline (minimal)",
	"aaa": "meets Level AAA guideline (recommended)",
	"bad": "doesn't meet any accessibility guidelines"
	},
	"context": {
	"18pt": "for large (18pt+) text",
	"text": "for text"
	}
	}
	},
	"common_colors": {
	"_tab_label": "Common",
	"main": "Common colors",
	"foreground_hint": "See \"Advanced\" tab for more detailed control",
	"rgbo": "Icons, accents, badges"
	},
	"advanced_colors": {
	"_tab_label": "Advanced",
	"alert": "Alert background",
	"alert_error": "Error",
	"alert_warning": "Warning",
	"alert_neutral": "Neutral",
	"post": "Posts/User bios",
	"badge": "Badge background",
	"popover": "Tooltips, menus, popovers",
	"badge_notification": "Notification",
	"panel_header": "Panel header",
	"top_bar": "Top bar",
	"borders": "Borders",
	"buttons": "Buttons",
	"inputs": "Input fields",
	"faint_text": "Faded text",
	"underlay": "Underlay",
	"wallpaper": "Wallpaper",
	"poll": "Poll graph",
	"icons": "Icons",
	"highlight": "Highlighted elements",
	"pressed": "Pressed",
	"selectedPost": "Selected post",
	"selectedMenu": "Selected menu item",
	"disabled": "Disabled",
	"toggled": "Toggled",
	"tabs": "Tabs",
	"chat": {
	"incoming": "Incoming",
	"outgoing": "Outgoing",
	"border": "Border"
	}
	},
	"radii": {
	"_tab_label": "Roundness"
	},
	"shadows": {
	"_tab_label": "Shadow and lighting",
	"component": "Component",
	"override": "Override",
	"shadow_id": "Shadow #{value}",
	"blur": "Blur",
	"spread": "Spread",
	"inset": "Inset",
	"hintV3": "For shadows you can also use the {0} notation to use other color slot.",
	"filter_hint": {
	"always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
	"drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
	"avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.",
	"spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
	"inset_classic": "Inset shadows will be using {0}"
	},
	"components": {
	"panel": "Panel",
	"panelHeader": "Panel header",
	"topBar": "Top bar",
	"avatar": "User avatar (in profile view)",
	"avatarStatus": "User avatar (in post display)",
	"popup": "Popups and tooltips",
	"button": "Button",
	"buttonHover": "Button (hover)",
	"buttonPressed": "Button (pressed)",
	"buttonPressedHover": "Button (pressed+hover)",
	"input": "Input field"
	}
	},
	"fonts": {
	"_tab_label": "Fonts",
	"help": "Select font to use for elements of UI. For \"custom\" you have to enter exact font name as it appears in system.",
	"components": {
	"interface": "Interface",
	"input": "Input fields",
	"post": "Post text",
	"postCode": "Monospaced text in a post (rich text)"
	},
	"family": "Font name",
	"size": "Size (in px)",
	"weight": "Weight (boldness)",
	"custom": "Custom"
	},
	"preview": {
	"header": "Preview",
	"content": "Content",
	"error": "Example error",
	"button": "Button",
	"text": "A bunch of more {0} and {1}",
	"mono": "content",
	"input": "Just landed in L.A.",
	"faint_link": "helpful manual",
	"fine_print": "Read our {0} to learn nothing useful!",
	"header_faint": "This is fine",
	"checkbox": "I have skimmed over terms and conditions",
	"link": "a nice lil' link"
	}
	},
	"version": {
	"title": "Version",
	"backend_version": "Backend version",
	"frontend_version": "Frontend version"
	}
	},
	"time": {
	"unit": {
	"days": "{0} day \| {0} days",
	"days_short": "{0}d",
	"hours": "{0} hour \| {0} hours",
	"hours_short": "{0}h",
	"minutes": "{0} minute \| {0} minutes",
	"minutes_short": "{0}min",
	"months": "{0} month \| {0} months",
	"months_short": "{0}mo",
	"seconds": "{0} second \| {0} seconds",
	"seconds_short": "{0}s",
	"weeks": "{0} week \| {0} weeks",
	"weeks_short": "{0}w",
	"years": "{0} year \| {0} years",
	"years_short": "{0}y"
	},
	"in_future": "in {0}",
	"in_past": "{0} ago",
	"now": "just now",
	"now_short": "now"
	},
	"timeline": {
	"collapse": "Collapse",
	"conversation": "Conversation",
	"error": "Error fetching timeline: {0}",
	"load_older": "Load older statuses",
	"no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated",
	"repeated": "repeated",
	"show_new": "Show new",
	"reload": "Reload",
	"up_to_date": "Up-to-date",
	"no_more_statuses": "No more statuses",
	"no_statuses": "No statuses",
	"socket_reconnected": "Realtime connection established",
	"socket_broke": "Realtime connection lost: CloseEvent code {0}"
	},
	"status": {
	"favorites": "Favorites",
	"repeats": "Repeats",
	"delete": "Delete status",
	"pin": "Pin on profile",
	"unpin": "Unpin from profile",
	"pinned": "Pinned",
	"bookmark": "Bookmark",
	"unbookmark": "Unbookmark",
	"delete_confirm": "Do you really want to delete this status?",
	"reply_to": "Reply to",
	"mentions": "Mentions",
	"replies_list": "Replies:",
	"replies_list_with_others": "Replies (+{numReplies} other): \| Replies (+{numReplies} others):",
	"mute_conversation": "Mute conversation",
	"unmute_conversation": "Unmute conversation",
	"status_unavailable": "Status unavailable",
	"copy_link": "Copy link to status",
	"external_source": "External source",
	"thread_muted": "Thread muted",
	"thread_muted_and_words": ", has words:",
	"show_full_subject": "Show full subject",
	"hide_full_subject": "Hide full subject",
	"show_content": "Show content",
	"hide_content": "Hide content",
	"status_deleted": "This post was deleted",
	"nsfw": "NSFW",
	"expand": "Expand",
	"you": "(You)",
	"plus_more": "+{number} more",
	"many_attachments": "Post has {number} attachment(s)",
	"collapse_attachments": "Collapse attachments",
	"show_all_attachments": "Show all attachments",
	"show_attachment_in_modal": "Show in media modal",
	"show_attachment_description": "Preview description (open attachment for full description)",
	"hide_attachment": "Hide attachment",
	"remove_attachment": "Remove attachment",
	"attachment_stop_flash": "Stop Flash player",
	"move_up": "Shift attachment left",
	"move_down": "Shift attachment right",
	"open_gallery": "Open gallery",
	"thread_hide": "Hide this thread",
	"thread_show": "Show this thread",
	"thread_show_full": "Show everything under this thread ({numStatus} status in total, max depth {depth}) \| Show everything under this thread ({numStatus} statuses in total, max depth {depth})",
	"thread_show_full_with_icon": "{icon} {text}",
	"thread_follow": "See the remaining part of this thread ({numStatus} status in total) \| See the remaining part of this thread ({numStatus} statuses in total)",
	"thread_follow_with_icon": "{icon} {text}",
	"ancestor_follow": "See {numReplies} other reply under this status \| See {numReplies} other replies under this status",
	"ancestor_follow_with_icon": "{icon} {text}",
	"show_all_conversation_with_icon": "{icon} {text}",
	"show_all_conversation": "Show full conversation ({numStatus} other status) \| Show full conversation ({numStatus} other statuses)",
	"show_only_conversation_under_this": "Only show replies to this status"
	},
	"user_card": {
	"approve": "Approve",
	"block": "Block",
	"blocked": "Blocked!",
	"deactivated": "Deactivated",
	"deny": "Deny",
	"edit_profile": "Edit profile",
	"favorites": "Favorites",
	"follow": "Follow",
	"follow_cancel": "Cancel request",
	"follow_sent": "Request sent!",
	"follow_progress": "Requesting…",
	"follow_unfollow": "Unfollow",
	"followees": "Following",
	"followers": "Followers",
	"following": "Following!",
	"follows_you": "Follows you!",
	"hidden": "Hidden",
	"its_you": "It's you!",
	"media": "Media",
	"mention": "Mention",
	"message": "Message",
	"mute": "Mute",
	"muted": "Muted",
	"per_day": "per day",
	"remote_follow": "Remote follow",
	"report": "Report",
	"statuses": "Statuses",
	"subscribe": "Subscribe",
	"unsubscribe": "Unsubscribe",
	"unblock": "Unblock",
	"unblock_progress": "Unblocking…",
	"block_progress": "Blocking…",
	"unmute": "Unmute",
	"unmute_progress": "Unmuting…",
	"mute_progress": "Muting…",
	"hide_repeats": "Hide repeats",
	"show_repeats": "Show repeats",
	"bot": "Bot",
	"admin_menu": {
	"moderation": "Moderation",
	"grant_admin": "Grant Admin",
	"revoke_admin": "Revoke Admin",
	"grant_moderator": "Grant Moderator",
	"revoke_moderator": "Revoke Moderator",
	"activate_account": "Activate account",
	"deactivate_account": "Deactivate account",
	"delete_account": "Delete account",
	"force_nsfw": "Mark all posts as NSFW",
	"strip_media": "Remove media from posts",
	"force_unlisted": "Force posts to be unlisted",
	"sandbox": "Force posts to be followers-only",
	"disable_remote_subscription": "Disallow following user from remote instances",
	"disable_any_subscription": "Disallow following user at all",
	"quarantine": "Disallow user posts from federating",
	"delete_user": "Delete user",
	"delete_user_data_and_deactivate_confirmation": "This will permanently delete the data from this account and deactivate it. Are you absolutely sure?"
	},
	"highlight": {
	"disabled": "No highlight",
	"solid": "Solid bg",
	"striped": "Striped bg",
	"side": "Side stripe"
	}
	},
	"user_profile": {
	"timeline_title": "User timeline",
	"profile_does_not_exist": "Sorry, this profile does not exist.",
	"profile_loading_error": "Sorry, there was an error loading this profile."
	},
	"user_reporting": {
	"title": "Reporting {0}",
	"add_comment_description": "The report will be sent to your instance moderators. You can provide an explanation of why you are reporting this account below:",
	"additional_comments": "Additional comments",
	"forward_description": "The account is from another server. Send a copy of the report there as well?",
	"forward_to": "Forward to {0}",
	"submit": "Submit",
	"generic_error": "An error occurred while processing your request."
	},
	"who_to_follow": {
	"more": "More",
	"who_to_follow": "Who to follow"
	},
	"tool_tip": {
	"media_upload": "Upload media",
	"repeat": "Repeat",
	"reply": "Reply",
	"favorite": "Favorite",
	"add_reaction": "Add Reaction",
	"user_settings": "User Settings",
	"accept_follow_request": "Accept follow request",
	"reject_follow_request": "Reject follow request",
	"bookmark": "Bookmark"
	},
	"upload": {
	"error": {
	"base": "Upload failed.",
	"message": "Upload failed: {0}",
	"file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
	"default": "Try again later"
	},
	"file_size_units": {
	"B": "B",
	"KiB": "KiB",
	"MiB": "MiB",
	"GiB": "GiB",
	"TiB": "TiB"
	}
	},
	"search": {
	"people": "People",
	"hashtags": "Hashtags",
	"person_talking": "{count} person talking",
	"people_talking": "{count} people talking",
	"no_results": "No results"
	},
	"password_reset": {
	"forgot_password": "Forgot password?",
	"password_reset": "Password reset",
	"instruction": "Enter your email address or username. We will send you a link to reset your password.",
	"placeholder": "Your email or username",
	"check_email": "Check your email for a link to reset your password.",
	"return_home": "Return to the home page",
	"too_many_requests": "You have reached the limit of attempts, try again later.",
	"password_reset_disabled": "Password reset is disabled. Please contact your instance administrator.",
	"password_reset_required": "You must reset your password to log in.",
	"password_reset_required_but_mailer_is_disabled": "You must reset your password, but password reset is disabled. Please contact your instance administrator."
	},
	"chats": {
	"you": "You:",
	"message_user": "Message {nickname}",
	"delete": "Delete",
	"chats": "Chats",
	"new": "New Chat",
	"empty_message_error": "Cannot post empty message",
	"more": "More",
	"delete_confirm": "Do you really want to delete this message?",
	"error_loading_chat": "Something went wrong when loading the chat.",
	"error_sending_message": "Something went wrong when sending the message.",
	"empty_chat_list_placeholder": "You don't have any chats yet. Start a new chat!"
	},
	"lists": {
	"lists": "Lists",
	"new": "New List",
	"title": "List title",
	"search": "Search users",
	"create": "Create",
	"save": "Save changes",
	"delete": "Delete list",
	"following_only": "Limit to Following"
	},
	"file_type": {
	"audio": "Audio",
	"video": "Video",
	"image": "Image",
	"file": "File"
	},
	"display_date": {
	"today": "Today"
	},
	"update": {
	"big_update_title": "Please bear with us",
	"big_update_content": "We haven't had a release in a while, so things might look and feel different than what you're used to.",
	"update_bugs": "Please report any issues and bugs on {pleromaGitlab}, as we have changed a lot, and although we test thoroughly and use development versions ourselves, we may have missed some things. We welcome your feedback and suggestions on issues you might encounter, or how to improve Pleroma and Pleroma-FE.",
	"update_bugs_gitlab": "Pleroma GitLab",
	"update_changelog": "For more details on what's changed, see {theFullChangelog}.",
	"update_changelog_here": "the full changelog",
	"art_by": "Art by {linkToArtist}"
	+ },
	+ "unicode_domain_indicator": {
	+ "tooltip": "This domain contains non-ascii characters."
	}
	}
	diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
	index e9cbcfe6a7..ce3168324d 100644
	--- a/src/services/entity_normalizer/entity_normalizer.service.js
	+++ b/src/services/entity_normalizer/entity_normalizer.service.js
	@@ -1,464 +1,466 @@
	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 = Object.prototype.hasOwnProperty.call(data, 'acct')
	// case for users in "mentions" property for statuses in MastoAPI
	const mastoShort = masto && !Object.prototype.hasOwnProperty.call(data, 'avatar')

	output.id = String(data.id)
	output._original = data // used for server-side settings

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

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

	output.emoji = data.emojis
	output.name = escape(data.display_name)
	output.name_html = output.name
	output.name_unescaped = data.display_name

	output.description = data.note
	// TODO cleanup this shit, output.description is overriden with source data
	output.description_html = data.note

	output.fields = data.fields
	output.fields_html = data.fields.map(field => {
	return {
	name: escape(field.name),
	value: field.value
	}
	})
	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) {
	if (data.pleroma.settings_store) {
	output.storage = data.pleroma.settings_store['pleroma-fe']
	}
	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 for UI
	output.screen_name_ui = output.screen_name
	if (output.screen_name && output.screen_name.includes('@')) {
	const parts = output.screen_name.split('@')
	- let unicodeDomain = punycode.toUnicode(parts[1])
	+ const 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_ui_contains_non_ascii = true
	output.screen_name_ui = [parts[0], unicodeDomain].join('@')
	+ } else {
	+ output.screen_name_ui_contains_non_ascii = false
	}
	}

	return output
	}

	export const parseAttachment = (data) => {
	const output = {}
	const masto = !Object.prototype.hasOwnProperty.call(data, '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 parseStatus = (data) => {
	const output = {}
	const masto = Object.prototype.hasOwnProperty.call(data, '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.raw_html = data.content
	output.emojis = 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_raw_html = escape(data.spoiler_text)
	output.external_url = data.url
	output.poll = data.poll
	if (output.poll) {
	output.poll.options = (output.poll.options \|\| []).map(field => ({
	...field,
	title_html: escape(field.title)
	}))
	}
	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.raw_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 = !Object.prototype.hasOwnProperty.call(data, '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
	if (data.report) {
	output.report = data.report
	output.report.content = data.report.content
	output.report.acct = parseUser(data.report.account)
	output.report.actor = parseUser(data.report.actor)
	output.report.statuses = data.report.statuses.map(parseStatus)
	}
	} 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
	output.emojis = message.emojis
	output.content = message.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/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
	index 98bb05a85c..3923596b9d 100644
	--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
	+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
	@@ -1,331 +1,332 @@
	import { parseStatus, parseUser, parseNotification, 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',
	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.nested.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.nested.property('retweeted_status.id', 'deadbeef')
	})
	})
	})

	// 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('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_ui').that.equal('lain@🌏lаin.com')
	+ expect(parseUser(user)).to.have.property('screen_name_ui').that.equal('lain@lаin.com')
	+ expect(parseUser(user)).to.have.property('screen_name_ui_contains_non_ascii').that.equal(true)
	})
	})

	// 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.nested.property('status.id', '444')
	expect(parseNotification(notif)).to.have.nested.property('action.id', '444')
	expect(parseNotification(notif)).to.have.nested.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.nested.property('status.id', '4412')
	expect(parseNotification(notif)).to.have.nested.property('action.id', '444')
	expect(parseNotification(notif)).to.have.nested.property('from_profile.id', 'spurdo')
	})
	})

	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, 8:06 AM (1 d, 13 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1736890
Default Alt Text: (183 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions