No OneTemporary
Actions

Size

295 KB

Referenced Files

None

Subscribers

None

View Options

This file is larger than 256 KB, so syntax highlighting was skipped.

	diff --git a/CHANGELOG.md b/CHANGELOG.md
	index 7a7dd9567c..226599508b 100644
	--- a/CHANGELOG.md
	+++ b/CHANGELOG.md
	@@ -1,45 +1,46 @@
	# Changelog
	All notable changes to this project will be documented in this file.

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

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

	## [1.1.7 and earlier] - 2019-12-14
	### Added
	- Ability to hide/show repeats from user
	- User profile button clutter organized into a menu
	- Emoji picker
	- Started changelog anew
	- Ability to change user's email
	- About page
	- Added remote user redirect
	### Changed
	- changed the way fading effects for user profile/long statuses works, now uses css-mask instead of gradient background hacks which weren't exactly compatible with semi-transparent themes
	### Fixed
	- improved hotkey behavior on autocomplete popup
	diff --git a/src/App.scss b/src/App.scss
	index 9f37ff126e..7dfbdb7d4e 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,959 +1,959 @@
	@import './_variables.scss';

	#app {
	min-height: 100vh;
	max-width: 100%;
	overflow: hidden;
	}

	.app-bg-wrapper {
	position: fixed;
	z-index: -1;
	height: 100%;
	left: 0;
	right: -20px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0 50%;
	}

	i[class^='icon-'] {
	user-select: none;
	}

	h4 {
	margin: 0;
	}

	#content {
	box-sizing: border-box;
	padding-top: 60px;
	margin: auto;
	min-height: 100vh;
	max-width: 980px;
	align-content: flex-start;
	}
	.underlay {
	background-color: rgba(0,0,0,0.15);
	background-color: var(--underlay, rgba(0,0,0,0.15));
	}

	.text-center {
	text-align: center;
	}

	html {
	font-size: 14px;
	}

	body {
	font-family: sans-serif;
	font-family: var(--interfaceFont, sans-serif);
	margin: 0;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	max-width: 100vw;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	&.hidden {
	display: none;
	}
	}

	a {
	text-decoration: none;
	color: $fallback--link;
	color: var(--link, $fallback--link);
	}

	button {
	user-select: none;
	color: $fallback--text;
	color: var(--btnText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btn, $fallback--fg);
	border: none;
	border-radius: $fallback--btnRadius;
	border-radius: var(--btnRadius, $fallback--btnRadius);
	cursor: pointer;
	- box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
	+ box-shadow: $fallback--buttonShadow;
	box-shadow: var(--buttonShadow);
	font-size: 14px;
	font-family: sans-serif;
	font-family: var(--interfaceFont, sans-serif);

	i[class*=icon-] {
	color: $fallback--text;
	color: var(--btnText, $fallback--text);
	}

	&::-moz-focus-inner {
	border: none;
	}

	&:hover {
	box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
	box-shadow: var(--buttonHoverShadow);
	}

	&:active {
	box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
	box-shadow: var(--buttonPressedShadow);
	color: $fallback--text;
	color: var(--btnPressedText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btnPressed, $fallback--fg)
	}

	&:disabled {
	cursor: not-allowed;
	color: $fallback--text;
	color: var(--btnDisabledText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btnDisabled, $fallback--fg)
	}

	&.toggled {
	color: $fallback--text;
	color: var(--btnToggledText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btnToggled, $fallback--fg);
	box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
	box-shadow: var(--buttonPressedShadow);
	}

	&.danger {
	// TODO: add better color variable
	color: $fallback--text;
	color: var(--alertErrorPanelText, $fallback--text);
	background-color: $fallback--alertError;
	background-color: var(--alertError, $fallback--alertError);
	}
	}

	input, textarea, .select, .input {

	&.unstyled {
	border-radius: 0;
	background: none;
	box-shadow: none;
	height: unset;
	}

	border: none;
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);
	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 0px 2px 0px rgba(0, 0, 0, 1) inset;
	box-shadow: var(--inputShadow);
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	color: $fallback--lightText;
	color: var(--inputText, $fallback--lightText);
	font-family: sans-serif;
	font-family: var(--inputFont, sans-serif);
	font-size: 14px;
	margin: 0;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	height: 28px;
	line-height: 16px;
	hyphens: none;
	padding: 8px .5em;

	&.select {
	padding: 0;
	}

	&:disabled, &[disabled=disabled] {
	cursor: not-allowed;
	opacity: 0.5;
	}

	.icon-down-open {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 5px;
	height: 100%;
	color: $fallback--text;
	color: var(--inputText, $fallback--text);
	line-height: 28px;
	z-index: 0;
	pointer-events: none;
	}

	select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	color: $fallback--text;
	color: var(--inputText, --text, $fallback--text);
	margin: 0;
	padding: 0 2em 0 .2em;
	font-family: sans-serif;
	font-family: var(--inputFont, sans-serif);
	font-size: 14px;
	width: 100%;
	z-index: 1;
	height: 28px;
	line-height: 16px;
	}

	&[type=range] {
	background: none;
	border: none;
	margin: 0;
	box-shadow: none;
	flex: 1;
	}

	&[type=radio] {
	display: none;
	&:checked + label::before {
	box-shadow: 0px 0px 2px black inset, 0px 0px 0px 4px $fallback--fg inset;
	box-shadow: var(--inputShadow), 0px 0px 0px 4px var(--fg, $fallback--fg) inset;
	background-color: var(--accent, $fallback--link);
	}
	&:disabled {
	&,
	& + label,
	& + label::before {
	opacity: .5;
	}
	}
	+ label::before {
	flex-shrink: 0;
	display: inline-block;
	content: '';
	transition: box-shadow 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: 100%; // Radio buttons should always be circle
	box-shadow: 0px 0px 2px black inset;
	box-shadow: var(--inputShadow);
	margin-right: .5em;
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	vertical-align: top;
	text-align: center;
	line-height: 1.1em;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	box-sizing: border-box;
	}
	}

	&[type=checkbox] {
	display: none;
	&:checked + label::before {
	color: $fallback--text;
	color: var(--inputText, $fallback--text);
	}
	&:disabled {
	&,
	& + label,
	& + label::before {
	opacity: .5;
	}
	}
	+ label::before {
	flex-shrink: 0;
	display: inline-block;
	content: '✔';
	transition: color 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: $fallback--checkboxRadius;
	border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
	box-shadow: 0px 0px 2px black inset;
	box-shadow: var(--inputShadow);
	margin-right: .5em;
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	vertical-align: top;
	text-align: center;
	line-height: 1.1em;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	box-sizing: border-box;
	}
	}
	}

	option {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	}

	.hide-number-spinner {
	-moz-appearance: textfield;
	&[type=number]::-webkit-inner-spin-button,
	&[type=number]::-webkit-outer-spin-button {
	opacity: 0;
	display: none;
	}
	}

	i[class*=icon-] {
	color: $fallback--icon;
	color: var(--icon, $fallback--icon)
	}

	.btn-block {
	display: block;
	width: 100%;
	}

	.btn-group {
	position: relative;
	display: inline-flex;
	vertical-align: middle;

	button {
	position: relative;
	flex: 1 1 auto;

	&:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	}

	&:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	}
	}
	}

	.container {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0 10px 0 10px;
	}

	.item {
	flex: 1;
	line-height: 50px;
	height: 50px;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;

	.nav-icon {
	margin-left: 0.4em;
	}

	&.right {
	justify-content: flex-end;
	}
	}

	.auto-size {
	flex: 1
	}

	.nav-bar {
	padding: 0;
	width: 100%;
	align-items: center;
	position: fixed;
	height: 50px;
	box-sizing: border-box;

	button {
	&, i[class*=icon-] {
	color: $fallback--text;
	color: var(--btnTopBarText, $fallback--text);
	}

	&:active {
	background-color: $fallback--fg;
	background-color: var(--btnPressedTopBar, $fallback--fg);
	color: $fallback--text;
	color: var(--btnPressedTopBarText, $fallback--text);
	}

	&:disabled {
	color: $fallback--text;
	color: var(--btnDisabledTopBarText, $fallback--text);
	}

	&.toggled {
	color: $fallback--text;
	color: var(--btnToggledTopBarText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btnToggledTopBar, $fallback--fg)
	}
	}


	.logo {
	display: flex;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	align-items: stretch;
	justify-content: center;
	flex: 0 0 auto;
	z-index: -1;
	transition: opacity;
	transition-timing-function: ease-out;
	transition-duration: 100ms;

	.mask {
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: $fallback--fg;
	background-color: var(--topBarText, $fallback--fg);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}

	img {
	height: 100%;
	object-fit: contain;
	display: block;
	flex: 0;
	}
	}

	.inner-nav {
	position: relative;
	margin: auto;
	box-sizing: border-box;
	padding-left: 10px;
	padding-right: 10px;
	display: flex;
	align-items: center;
	flex-basis: 970px;
	height: 50px;

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

	main-router {
	flex: 1;
	}

	.status.compact {
	color: rgba(0, 0, 0, 0.42);
	font-weight: 300;

	p {
	margin: 0;
	font-size: 0.8em
	}
	}

	/* Panel */

	.panel {
	display: flex;
	position: relative;

	flex-direction: column;
	margin: 0.5em;

	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);

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

	&::after {
	content: '';
	position: absolute;

	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	pointer-events: none;

	box-shadow: 1px 1px 4px rgba(0,0,0,.6);
	box-shadow: var(--panelShadow);
	}
	}

	.panel-body:empty::before {
	content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
	display: block;
	margin: 1em;
	text-align: center;
	}

	.panel-heading {
	display: flex;
	flex: none;
	border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
	border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
	background-size: cover;
	padding: .6em .6em;
	text-align: left;
	line-height: 28px;
	color: var(--panelText);
	background-color: $fallback--fg;
	background-color: var(--panel, $fallback--fg);
	align-items: baseline;
	box-shadow: var(--panelHeaderShadow);

	.title {
	flex: 1 0 auto;
	font-size: 1.3em;
	}

	.faint {
	background-color: transparent;
	color: $fallback--faint;
	color: var(--panelFaint, $fallback--faint);
	}
	.faint-link {
	color: $fallback--faint;
	color: var(--faintLink, $fallback--faint);
	}

	.alert {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
	}

	button {
	flex-shrink: 0;
	}

	button, .alert {
	// height: 100%;
	line-height: 21px;
	min-height: 0;
	box-sizing: border-box;
	margin: 0;
	margin-left: .25em;
	min-width: 1px;
	align-self: stretch;
	}

	button {
	&, i[class*=icon-] {
	color: $fallback--text;
	color: var(--btnPanelText, $fallback--text);
	}

	&:active {
	background-color: $fallback--fg;
	background-color: var(--btnPressedPanel, $fallback--fg);
	color: $fallback--text;
	color: var(--btnPressedPanelText, $fallback--text);
	}

	&:disabled {
	color: $fallback--text;
	color: var(--btnDisabledPanelText, $fallback--text);
	}

	&.toggled {
	color: $fallback--text;
	color: var(--btnToggledPanelText, $fallback--text);
	}
	}

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

	.panel-heading.stub {
	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	}

	.panel-footer {
	border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);


	.faint {
	color: $fallback--faint;
	color: var(--panelFaint, $fallback--faint);
	}

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

	.panel-body > p {
	line-height: 18px;
	padding: 1em;
	margin: 0;
	}

	.container > * {
	min-width: 0px;
	}

	.fa {
	color: grey;
	}

	nav {
	z-index: 1000;
	color: var(--topBarText);
	background-color: $fallback--fg;
	background-color: var(--topBar, $fallback--fg);
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	box-shadow: 0px 0px 4px rgba(0,0,0,.6);
	box-shadow: var(--topBarShadow);
	}

	.fade-enter-active, .fade-leave-active {
	transition: opacity .2s
	}
	.fade-enter, .fade-leave-active {
	opacity: 0
	}

	.main {
	flex-basis: 50%;
	flex-grow: 1;
	flex-shrink: 1;
	}

	.sidebar-bounds {
	flex: 0;
	flex-basis: 35%;
	}

	.sidebar-flexer {
	flex: 1;
	flex-basis: 345px;
	width: 365px;
	}

	.mobile-shown {
	display: none;
	}

	@media all and (min-width: 800px) {
	body {
	overflow-y: scroll;
	}

	.sidebar-bounds {
	overflow: hidden;
	max-height: 100vh;
	width: 345px;
	position: fixed;
	margin-top: -10px;

	.sidebar-scroller {
	height: 96vh;
	width: 365px;
	padding-top: 10px;
	padding-right: 50px;
	overflow-x: hidden;
	overflow-y: scroll;
	}

	.sidebar {
	width: 345px;
	}
	}
	.sidebar-flexer {
	max-height: 96vh;
	flex-shrink: 0;
	flex-grow: 0;
	}
	}
	.badge {
	display: inline-block;
	border-radius: 99px;
	min-width: 22px;
	max-width: 22px;
	min-height: 22px;
	max-height: 22px;
	font-size: 15px;
	line-height: 22px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	padding: 0;

	&.badge-notification {
	background-color: $fallback--cRed;
	background-color: var(--badgeNotification, $fallback--cRed);
	color: white;
	color: var(--badgeNotificationText, white);
	}
	}

	.alert {
	margin: 0.35em;
	padding: 0.25em;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	min-height: 28px;
	line-height: 28px;

	&.error {
	background-color: $fallback--alertError;
	background-color: var(--alertError, $fallback--alertError);
	color: $fallback--text;
	color: var(--alertErrorText, $fallback--text);

	.panel-heading & {
	color: $fallback--text;
	color: var(--alertErrorPanelText, $fallback--text);
	}
	}

	&.warning {
	background-color: $fallback--alertWarning;
	background-color: var(--alertWarning, $fallback--alertWarning);
	color: $fallback--text;
	color: var(--alertWarningText, $fallback--text);

	.panel-heading & {
	color: $fallback--text;
	color: var(--alertWarningPanelText, $fallback--text);
	}
	}
	}

	.faint {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	}

	.faint-link {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);

	&:hover {
	text-decoration: underline;
	}
	}

	@media all and (min-width: 800px) {
	.logo {
	opacity: 1 !important;
	}
	}

	.item.right {
	text-align: right;
	}

	.visibility-notice {
	padding: .5em;
	border: 1px solid $fallback--faint;
	border: 1px solid var(--faint, $fallback--faint);
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);
	}

	.notice-dismissible {
	padding-right: 4rem;
	position: relative;

	.dismiss {
	position: absolute;
	top: 0;
	right: 0;
	padding: .5em;
	color: inherit;
	}
	}

	.button-icon {
	font-size: 1.2em;
	}

	@keyframes shakeError {
	0% {
	transform: translateX(0);
	}
	15% {
	transform: translateX(0.375rem);
	}
	30% {
	transform: translateX(-0.375rem);
	}
	45% {
	transform: translateX(0.375rem);
	}
	60% {
	transform: translateX(-0.375rem);
	}
	75% {
	transform: translateX(0.375rem);
	}
	90% {
	transform: translateX(-0.375rem);
	}
	100% {
	transform: translateX(0);
	}
	}

	@media all and (max-width: 800px) {
	.mobile-hidden {
	display: none;
	}

	.panel-switcher {
	display: flex;
	}

	.container {
	padding: 0;
	}

	.panel {
	margin: 0.5em 0 0.5em 0;
	}

	.menu-button {
	display: block;
	margin-right: 0.8em;
	}
	}

	.setting-item {
	border-bottom: 2px solid var(--fg, $fallback--fg);
	margin: 1em 1em 1.4em;
	padding-bottom: 1.4em;

	> div {
	margin-bottom: .5em;
	&:last-child {
	margin-bottom: 0;
	}
	}

	&:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 1em;
	}

	select {
	min-width: 10em;
	}


	textarea {
	width: 100%;
	max-width: 100%;
	height: 100px;
	}

	.unavailable,
	.unavailable i {
	color: var(--cRed, $fallback--cRed);
	color: $fallback--cRed;
	}

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

	.number-input {
	max-width: 6em;
	}
	}
	.select-multiple {
	display: flex;
	.option-list {
	margin: 0;
	padding-left: .5em;
	}
	}
	.setting-list,
	.option-list{
	list-style-type: none;
	padding-left: 2em;
	li {
	margin-bottom: 0.5em;
	}
	.suboptions {
	margin-top: 0.3em
	}
	}

	.login-hint {
	text-align: center;

	@media all and (min-width: 801px) {
	display: none;
	}

	a {
	display: inline-block;
	padding: 1em 0px;
	width: 100%;
	}
	}

	.btn.btn-default {
	min-height: 28px;
	}

	.animate-spin {
	animation: spin 2s infinite linear;
	display: inline-block;
	}

	@keyframes spin {
	0% {
	transform: rotate(0deg);
	}

	100% {
	transform: rotate(359deg);
	}
	}

	.new-status-notification {
	position:relative;
	margin-top: -1px;
	font-size: 1.1em;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: var(--border, $fallback--border);
	padding: 10px;
	z-index: 1;
	background-color: $fallback--fg;
	background-color: var(--panel, $fallback--fg);
	}
	diff --git a/src/_variables.scss b/src/_variables.scss
	index e18101f0a7..30dc3e42e5 100644
	--- a/src/_variables.scss
	+++ b/src/_variables.scss
	@@ -1,29 +1,31 @@
	$main-color: #f58d2c;
	$main-background: white;
	$darkened-background: whitesmoke;

	$fallback--bg: #121a24;
	$fallback--fg: #182230;
	$fallback--faint: rgba(185, 185, 186, .5);
	$fallback--text: #b9b9ba;
	$fallback--link: #d8a070;
	$fallback--icon: #666;
	$fallback--lightBg: rgb(21, 30, 42);
	$fallback--lightText: #b9b9ba;
	$fallback--border: #222;
	$fallback--cRed: #ff0000;
	$fallback--cBlue: #0095ff;
	$fallback--cGreen: #0fa00f;
	$fallback--cOrange: orange;

	$fallback--alertError: rgba(211,16,20,.5);
	$fallback--alertWarning: rgba(111,111,20,.5);

	$fallback--panelRadius: 10px;
	$fallback--checkboxRadius: 2px;
	$fallback--btnRadius: 4px;
	$fallback--inputRadius: 4px;
	$fallback--tooltipRadius: 5px;
	$fallback--avatarRadius: 4px;
	$fallback--avatarAltRadius: 10px;
	$fallback--attachmentRadius: 10px;
	+
	+$fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
	diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
	index 95d52cb6c8..b799ac9a24 100644
	--- a/src/components/emoji_reactions/emoji_reactions.js
	+++ b/src/components/emoji_reactions/emoji_reactions.js
	@@ -1,32 +1,72 @@
	+import UserAvatar from '../user_avatar/user_avatar.vue'
	+
	+const EMOJI_REACTION_COUNT_CUTOFF = 12

	const EmojiReactions = {
	name: 'EmojiReactions',
	+ components: {
	+ UserAvatar
	+ },
	props: ['status'],
	+ data: () => ({
	+ showAll: false,
	+ popperOptions: {
	+ modifiers: {
	+ preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
	+ }
	+ }
	+ }),
	computed: {
	+ tooManyReactions () {
	+ return this.status.emoji_reactions.length > EMOJI_REACTION_COUNT_CUTOFF
	+ },
	emojiReactions () {
	- return this.status.emoji_reactions
	+ return this.showAll
	+ ? this.status.emoji_reactions
	+ : this.status.emoji_reactions.slice(0, EMOJI_REACTION_COUNT_CUTOFF)
	+ },
	+ showMoreString () {
	+ return `+${this.status.emoji_reactions.length - EMOJI_REACTION_COUNT_CUTOFF}`
	+ },
	+ accountsForEmoji () {
	+ return this.status.emoji_reactions.reduce((acc, reaction) => {
	+ acc[reaction.name] = reaction.accounts \|\| []
	+ return acc
	+ }, {})
	+ },
	+ loggedIn () {
	+ return !!this.$store.state.users.currentUser
	}
	},
	methods: {
	+ toggleShowAll () {
	+ this.showAll = !this.showAll
	+ },
	reactedWith (emoji) {
	- const user = this.$store.state.users.currentUser
	- const reaction = this.status.emoji_reactions.find(r => r.emoji === emoji)
	- return reaction.accounts && reaction.accounts.find(u => u.id === user.id)
	+ return this.status.emoji_reactions.find(r => r.name === emoji).me
	+ },
	+ fetchEmojiReactionsByIfMissing () {
	+ const hasNoAccounts = this.status.emoji_reactions.find(r => !r.accounts)
	+ if (hasNoAccounts) {
	+ this.$store.dispatch('fetchEmojiReactionsBy', this.status.id)
	+ }
	},
	reactWith (emoji) {
	this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
	},
	unreact (emoji) {
	this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
	},
	emojiOnClick (emoji, event) {
	+ if (!this.loggedIn) return
	+
	if (this.reactedWith(emoji)) {
	this.unreact(emoji)
	} else {
	this.reactWith(emoji)
	}
	}
	}
	}

	export default EmojiReactions
	diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
	index f5d2e79a73..290b25b311 100644
	--- a/src/components/emoji_reactions/emoji_reactions.vue
	+++ b/src/components/emoji_reactions/emoji_reactions.vue
	@@ -1,43 +1,130 @@
	<template>
	<div class="emoji-reactions">
	- <button
	+ <v-popover
	v-for="(reaction) in emojiReactions"
	- :key="reaction.emoji"
	- class="emoji-reaction btn btn-default"
	- :class="{ 'toggled': reactedWith(reaction.emoji) }"
	- @click="emojiOnClick(reaction.emoji, $event)"
	+ :key="reaction.name"
	+ :popper-options="popperOptions"
	+ trigger="hover"
	+ placement="top"
	>
	- <span class="reaction-emoji">{{ reaction.emoji }}</span>
	- <span>{{ reaction.count }}</span>
	- </button>
	+
	+ <div
	+ slot="popover"
	+ class="reacted-users"
	+ >
	+ <div v-if="accountsForEmoji[reaction.name].length">
	+ <div
	+ v-for="(account) in accountsForEmoji[reaction.name]"
	+ :key="account.id"
	+ class="reacted-user"
	+ >
	+ <UserAvatar
	+ :user="account"
	+ class="avatar-small"
	+ :compact="true"
	+ />
	+ <div class="reacted-user-names">
	+ <span class="reacted-user-name" v-html="account.name_html" />
	+ <span class="reacted-user-screen-name">{{ account.screen_name }}</span>
	+ </div>
	+ </div>
	+ </div>
	+ <div v-else>
	+ <i class="icon-spin4 animate-spin" />
	+ </div>
	+ </div>
	+ <button
	+ class="emoji-reaction btn btn-default"
	+ :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
	+ @click="emojiOnClick(reaction.name, $event)"
	+ @mouseenter="fetchEmojiReactionsByIfMissing()"
	+ >
	+ <span class="reaction-emoji">{{ reaction.name }}</span>
	+ <span>{{ reaction.count }}</span>
	+ </button>
	+ </v-popover>
	+ <a
	+ v-if="tooManyReactions"
	+ @click="toggleShowAll"
	+ class="emoji-reaction-expand faint"
	+ href='javascript:void(0)'
	+ >
	+ {{ showAll ? $t('general.show_less') : showMoreString }}
	+ </a>
	</div>
	+
	</template>

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

	.emoji-reactions {
	display: flex;
	margin-top: 0.25em;
	flex-wrap: wrap;
	}

	+.reacted-users {
	+ padding: 0.5em;
	+}
	+
	+.reacted-user {
	+ padding: 0.25em;
	+ display: flex;
	+ flex-direction: row;
	+
	+ .reacted-user-names {
	+ display: flex;
	+ flex-direction: column;
	+ margin-left: 0.5em;
	+
	+ img {
	+ width: 1em;
	+ height: 1em;
	+ }
	+ }
	+
	+ .reacted-user-screen-name {
	+ font-size: 9px;
	+ }
	+}
	+
	.emoji-reaction {
	padding: 0 0.5em;
	margin-right: 0.5em;
	margin-top: 0.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	.reaction-emoji {
	width: 1.25em;
	margin-right: 0.25em;
	}
	&:focus {
	outline: none;
	}
	+
	+ &.not-clickable {
	+ cursor: default;
	+ &:hover {
	+ box-shadow: $fallback--buttonShadow;
	+ box-shadow: var(--buttonShadow);
	+ }
	+ }
	+}
	+
	+.emoji-reaction-expand {
	+ padding: 0 0.5em;
	+ margin-right: 0.5em;
	+ margin-top: 0.5em;
	+ display: flex;
	+ align-items: center;
	+ justify-content: center;
	+ &:hover {
	+ text-decoration: underline;
	+ }
	}

	</style>
	diff --git a/src/components/interactions/interactions.js b/src/components/interactions/interactions.js
	index cc31ff203d..7fe5e76d97 100644
	--- a/src/components/interactions/interactions.js
	+++ b/src/components/interactions/interactions.js
	@@ -1,26 +1,27 @@
	import Notifications from '../notifications/notifications.vue'

	const tabModeDict = {
	mentions: ['mention'],
	'likes+repeats': ['repeat', 'like'],
	follows: ['follow'],
	moves: ['move']
	}

	const Interactions = {
	data () {
	return {
	+ allowFollowingMove: this.$store.state.users.currentUser.allow_following_move,
	filterMode: tabModeDict['mentions']
	}
	},
	methods: {
	onModeSwitch (key) {
	this.filterMode = tabModeDict[key]
	}
	},
	components: {
	Notifications
	}
	}

	export default Interactions
	diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue
	index a2e252ab1c..57d5d87c3d 100644
	--- a/src/components/interactions/interactions.vue
	+++ b/src/components/interactions/interactions.vue
	@@ -1,38 +1,39 @@
	<template>
	<div class="panel panel-default">
	<div class="panel-heading">
	<div class="title">
	{{ $t("nav.interactions") }}
	</div>
	</div>
	<tab-switcher
	ref="tabSwitcher"
	:on-switch="onModeSwitch"
	>
	<span
	key="mentions"
	:label="$t('nav.mentions')"
	/>
	<span
	key="likes+repeats"
	:label="$t('interactions.favs_repeats')"
	/>
	<span
	key="follows"
	:label="$t('interactions.follows')"
	/>
	<span
	+ v-if="!allowFollowingMove"
	key="moves"
	:label="$t('interactions.moves')"
	/>
	</tab-switcher>
	<Notifications
	ref="notifications"
	:no-heading="true"
	:minimal-mode="true"
	:filter-mode="filterMode"
	/>
	</div>
	</template>

	<script src="./interactions.js"></script>
	diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.js b/src/components/mrf_transparency_panel/mrf_transparency_panel.js
	index 6a1baec816..a0b600d2a5 100644
	--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.js
	+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.js
	@@ -1,27 +1,35 @@
	import { mapState } from 'vuex'
	import { get } from 'lodash'

	const MRFTransparencyPanel = {
	computed: {
	...mapState({
	federationPolicy: state => get(state, 'instance.federationPolicy'),
	mrfPolicies: state => get(state, 'instance.federationPolicy.mrf_policies', []),
	quarantineInstances: state => get(state, 'instance.federationPolicy.quarantined_instances', []),
	acceptInstances: state => get(state, 'instance.federationPolicy.mrf_simple.accept', []),
	rejectInstances: state => get(state, 'instance.federationPolicy.mrf_simple.reject', []),
	ftlRemovalInstances: state => get(state, 'instance.federationPolicy.mrf_simple.federated_timeline_removal', []),
	mediaNsfwInstances: state => get(state, 'instance.federationPolicy.mrf_simple.media_nsfw', []),
	- mediaRemovalInstances: state => get(state, 'instance.federationPolicy.mrf_simple.media_removal', [])
	+ mediaRemovalInstances: state => get(state, 'instance.federationPolicy.mrf_simple.media_removal', []),
	+ keywordsFtlRemoval: state => get(state, 'instance.federationPolicy.mrf_keyword.federated_timeline_removal', []),
	+ keywordsReject: state => get(state, 'instance.federationPolicy.mrf_keyword.reject', []),
	+ keywordsReplace: state => get(state, 'instance.federationPolicy.mrf_keyword.replace', [])
	}),
	hasInstanceSpecificPolicies () {
	return this.quarantineInstances.length \|\|
	this.acceptInstances.length \|\|
	this.rejectInstances.length \|\|
	this.ftlRemovalInstances.length \|\|
	this.mediaNsfwInstances.length \|\|
	this.mediaRemovalInstances.length
	+ },
	+ hasKeywordPolicies () {
	+ return this.keywordsFtlRemoval.length \|\|
	+ this.keywordsReject.length \|\|
	+ this.keywordsReplace.length
	}
	}
	}

	export default MRFTransparencyPanel
	diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
	index d6495dc685..8038e587cb 100644
	--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
	+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
	@@ -1,124 +1,167 @@
	<template>
	<div
	v-if="federationPolicy"
	class="mrf-transparency-panel"
	>
	<div class="panel panel-default base01-background">
	<div class="panel-heading timeline-heading base02-background">
	<div class="title">
	{{ $t("about.federation") }}
	</div>
	</div>
	<div class="panel-body">
	<div class="mrf-section">
	<h2>{{ $t("about.mrf_policies") }}</h2>
	<p>{{ $t("about.mrf_policies_desc") }}</p>

	<ul>
	<li
	v-for="policy in mrfPolicies"
	:key="policy"
	v-text="policy"
	/>
	</ul>

	<h2 v-if="hasInstanceSpecificPolicies">
	{{ $t("about.mrf_policy_simple") }}
	</h2>

	<div v-if="acceptInstances.length">
	<h4>{{ $t("about.mrf_policy_simple_accept") }}</h4>

	<p>{{ $t("about.mrf_policy_simple_accept_desc") }}</p>

	<ul>
	<li
	v-for="instance in acceptInstances"
	:key="instance"
	v-text="instance"
	/>
	</ul>
	</div>

	<div v-if="rejectInstances.length">
	<h4>{{ $t("about.mrf_policy_simple_reject") }}</h4>

	<p>{{ $t("about.mrf_policy_simple_reject_desc") }}</p>

	<ul>
	<li
	v-for="instance in rejectInstances"
	:key="instance"
	v-text="instance"
	/>
	</ul>
	</div>

	<div v-if="quarantineInstances.length">
	<h4>{{ $t("about.mrf_policy_simple_quarantine") }}</h4>

	<p>{{ $t("about.mrf_policy_simple_quarantine_desc") }}</p>

	<ul>
	<li
	v-for="instance in quarantineInstances"
	:key="instance"
	v-text="instance"
	/>
	</ul>
	</div>

	<div v-if="ftlRemovalInstances.length">
	<h4>{{ $t("about.mrf_policy_simple_ftl_removal") }}</h4>

	<p>{{ $t("about.mrf_policy_simple_ftl_removal_desc") }}</p>

	<ul>
	<li
	v-for="instance in ftlRemovalInstances"
	:key="instance"
	v-text="instance"
	/>
	</ul>
	</div>

	<div v-if="mediaNsfwInstances.length">
	<h4>{{ $t("about.mrf_policy_simple_media_nsfw") }}</h4>

	<p>{{ $t("about.mrf_policy_simple_media_nsfw_desc") }}</p>

	<ul>
	<li
	v-for="instance in mediaNsfwInstances"
	:key="instance"
	v-text="instance"
	/>
	</ul>
	</div>

	<div v-if="mediaRemovalInstances.length">
	<h4>{{ $t("about.mrf_policy_simple_media_removal") }}</h4>

	<p>{{ $t("about.mrf_policy_simple_media_removal_desc") }}</p>

	<ul>
	<li
	v-for="instance in mediaRemovalInstances"
	:key="instance"
	v-text="instance"
	/>
	</ul>
	</div>
	+
	+ <h2 v-if="hasKeywordPolicies">
	+ {{ $t("about.mrf.keyword.keyword_policies") }}
	+ </h2>
	+
	+ <div v-if="keywordsFtlRemoval.length">
	+ <h4>{{ $t("about.mrf.keyword.ftl_removal") }}</h4>
	+
	+ <ul>
	+ <li
	+ v-for="keyword in keywordsFtlRemoval"
	+ :key="keyword"
	+ v-text="keyword"
	+ />
	+ </ul>
	+ </div>
	+
	+ <div v-if="keywordsReject.length">
	+ <h4>{{ $t("about.mrf.keyword.reject") }}</h4>
	+
	+ <ul>
	+ <li
	+ v-for="keyword in keywordsReject"
	+ :key="keyword"
	+ v-text="keyword"
	+ />
	+ </ul>
	+ </div>
	+
	+ <div v-if="keywordsReplace.length">
	+ <h4>{{ $t("about.mrf.keyword.replace") }}</h4>
	+
	+ <ul>
	+ <li
	+ v-for="keyword in keywordsReplace"
	+ :key="keyword"
	+ >
	+ {{ keyword.pattern }}
	+ {{ $t("about.mrf.keyword.is_replaced_by") }}
	+ {{ keyword.replacement }}
	+ </li>
	+ </ul>
	+ </div>
	</div>
	</div>
	</div>
	</div>
	</template>

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

	<style lang="scss">
	.mrf-section {
	margin: 1em;
	}
	</style>
	diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
	index 16124e506d..411c027119 100644
	--- a/src/components/notification/notification.vue
	+++ b/src/components/notification/notification.vue
	@@ -1,143 +1,150 @@
	<template>
	<status
	v-if="notification.type === 'mention'"
	:compact="true"
	:statusoid="notification.status"
	/>
	<div v-else>
	<div
	v-if="needMute && !unmuted"
	class="container muted"
	>
	<small>
	<router-link :to="userProfileLink">
	{{ notification.from_profile.screen_name }}
	</router-link>
	</small>
	<a
	href="#"
	class="unmute"
	@click.prevent="toggleMute"
	><i class="button-icon icon-eye-off" /></a>
	</div>
	<div
	v-else
	class="non-mention"
	:class="[userClass, { highlighted: userStyle }]"
	:style="[ userStyle ]"
	>
	<a
	class="avatar-container"
	:href="notification.from_profile.statusnet_profile_url"
	@click.stop.prevent.capture="toggleUserExpanded"
	>
	<UserAvatar
	:compact="true"
	:better-shadow="betterShadow"
	:user="notification.from_profile"
	/>
	</a>
	<div class="notification-right">
	<UserCard
	v-if="userExpanded"
	:user="getUser(notification)"
	:rounded="true"
	:bordered="true"
	/>
	<span class="notification-details">
	<div class="name-and-action">
	<!-- eslint-disable vue/no-v-html -->
	<span
	v-if="!!notification.from_profile.name_html"
	class="username"
	:title="'@'+notification.from_profile.screen_name"
	v-html="notification.from_profile.name_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<span
	v-else
	class="username"
	:title="'@'+notification.from_profile.screen_name"
	>{{ notification.from_profile.name }}</span>
	<span v-if="notification.type === 'like'">
	<i class="fa icon-star lit" />
	<small>{{ $t('notifications.favorited_you') }}</small>
	</span>
	<span v-if="notification.type === 'repeat'">
	<i
	class="fa icon-retweet lit"
	:title="$t('tool_tip.repeat')"
	/>
	<small>{{ $t('notifications.repeated_you') }}</small>
	</span>
	<span v-if="notification.type === 'follow'">
	<i class="fa icon-user-plus lit" />
	<small>{{ $t('notifications.followed_you') }}</small>
	</span>
	<span v-if="notification.type === 'move'">
	<i class="fa icon-arrow-curved lit" />
	<small>{{ $t('notifications.migrated_to') }}</small>
	</span>
	+ <span v-if="notification.type === 'pleroma:emoji_reaction'">
	+ <small>
	+ <i18n path="notifications.reacted_with">
	+ <span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
	+ </i18n>
	+ </small>
	+ </span>
	</div>
	<div
	v-if="notification.type === 'follow' \|\| notification.type === 'move'"
	class="timeago"
	>
	<span class="faint">
	<Timeago
	:time="notification.created_at"
	:auto-update="240"
	/>
	</span>
	</div>
	<div
	v-else
	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>
	<a
	v-if="needMute"
	href="#"
	@click.prevent="toggleMute"
	><i class="button-icon icon-eye-off" /></a>
	</span>
	<div
	v-if="notification.type === 'follow'"
	class="follow-text"
	>
	<router-link :to="userProfileLink">
	@{{ notification.from_profile.screen_name }}
	</router-link>
	</div>
	<div
	v-else-if="notification.type === 'move'"
	class="move-text"
	>
	<router-link :to="targetUserProfileLink">
	@{{ notification.target.screen_name }}
	</router-link>
	</div>
	<template v-else>
	<status
	class="faint"
	:compact="true"
	:statusoid="notification.action"
	:no-heading="true"
	/>
	</template>
	</div>
	</div>
	</div>
	</template>

	<script src="./notification.js"></script>
	diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
	index 64ded936a2..f5b1332273 100644
	--- a/src/components/notifications/notifications.scss
	+++ b/src/components/notifications/notifications.scss
	@@ -1,184 +1,188 @@
	@import '../../_variables.scss';

	.notifications {
	&:not(.minimal) {
	// a bit of a hack to allow scrolling below notifications
	padding-bottom: 15em;
	}

	.loadmore-error {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}

	.notification {
	position: relative;

	.notification-overlay {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	pointer-events: none;
	}

	&.unseen {
	.notification-overlay {
	background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px)
	}
	}
	}
	}

	.notification {
	box-sizing: border-box;
	border-bottom: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);

	&:hover .animated.avatar {
	canvas {
	display: none;
	}
	img {
	visibility: visible;
	}
	}

	.muted {
	padding: .25em .6em;
	}

	.non-mention {
	display: flex;
	flex: 1;
	flex-wrap: nowrap;
	padding: 0.6em;
	min-width: 0;
	.avatar-container {
	width: 32px;
	height: 32px;
	}
	.status-el {
	.status {
	padding: 0.25em 0;
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	a {
	color: var(--faintLink);
	}
	.status-content a {
	color: var(--postFaintLink);
	}
	}
	padding: 0;
	.media-body {
	margin: 0;
	}
	}
	}

	.follow-text, .move-text {
	padding: 0.5em 0;
	}

	.status-el {
	flex: 1;
	}

	time {
	white-space: nowrap;
	}

	.notification-right {
	flex: 1;
	padding-left: 0.8em;
	min-width: 0;
	}

	+ .emoji-reaction-emoji {
	+ font-size: 16px;
	+ }
	+
	.notification-details {
	min-width: 0px;
	word-wrap: break-word;
	line-height:18px;
	position: relative;
	overflow: hidden;
	width: 100%;
	flex: 1 1 0;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;

	.name-and-action {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	.username {
	font-weight: bolder;
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;

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

	.timeago {
	margin-right: .2em;
	}

	.icon-retweet.lit {
	color: $fallback--cGreen;
	color: var(--cGreen, $fallback--cGreen);
	}

	.icon-user-plus.lit {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}

	.icon-reply.lit {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}

	.icon-star.lit {
	color: orange;
	color: $fallback--cOrange;
	color: var(--cOrange, $fallback--cOrange);
	}

	.icon-arrow-curved.lit {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}

	.status-content {
	margin: 0;
	max-height: 300px;
	}

	h1 {
	word-break: break-all;
	margin: 0 0 0.3em;
	padding: 0;
	font-size: 1em;
	line-height:20px;
	small {
	font-weight: lighter;
	}
	}

	p {
	margin: 0;
	margin-top: 0;
	margin-bottom: 0.3em;
	}
	}
	}
	diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
	index 6fb2a78027..a6cf5b9413 100644
	--- a/src/components/react_button/react_button.js
	+++ b/src/components/react_button/react_button.js
	@@ -1,43 +1,48 @@
	import { mapGetters } from 'vuex'

	const ReactButton = {
	props: ['status', 'loggedIn'],
	data () {
	return {
	showTooltip: false,
	filterWord: '',
	popperOptions: {
	modifiers: {
	preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
	}
	}
	}
	},
	methods: {
	openReactionSelect () {
	this.showTooltip = true
	this.filterWord = ''
	},
	closeReactionSelect () {
	this.showTooltip = false
	},
	addReaction (event, emoji) {
	- this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
	+ const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
	+ if (existingReaction && existingReaction.me) {
	+ this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
	+ } else {
	+ this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
	+ }
	this.closeReactionSelect()
	}
	},
	computed: {
	commonEmojis () {
	return ['❤️', '😠', '👀', '😂', '🔥']
	},
	emojis () {
	if (this.filterWord !== '') {
	return this.$store.state.instance.emoji.filter(emoji => emoji.displayText.includes(this.filterWord))
	}
	return this.$store.state.instance.emoji \|\| []
	},
	...mapGetters(['mergedConfig'])
	}
	}

	export default ReactButton
	diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
	index c925dd7187..fb43ebaf6a 100644
	--- a/src/components/react_button/react_button.vue
	+++ b/src/components/react_button/react_button.vue
	@@ -1,109 +1,113 @@
	<template>
	<v-popover
	:popper-options="popperOptions"
	:open="showTooltip"
	trigger="manual"
	placement="top"
	class="react-button-popover"
	@hide="closeReactionSelect"
	>
	<div slot="popover">
	<div class="reaction-picker-filter">
	<input
	v-model="filterWord"
	:placeholder="$t('emoji.search_emoji')"
	>
	</div>
	<div class="reaction-picker">
	<span
	v-for="emoji in commonEmojis"
	:key="emoji"
	class="emoji-button"
	@click="addReaction($event, emoji)"
	>
	{{ emoji }}
	</span>
	<div class="reaction-picker-divider" />
	<span
	v-for="(emoji, key) in emojis"
	:key="key"
	class="emoji-button"
	@click="addReaction($event, emoji.replacement)"
	>
	{{ emoji.replacement }}
	</span>
	<div class="reaction-bottom-fader" />
	</div>
	</div>
	<div
	v-if="loggedIn"
	@click.prevent="openReactionSelect"
	>
	<i
	class="icon-smile button-icon add-reaction-button"
	:title="$t('tool_tip.add_reaction')"
	/>
	</div>
	</v-popover>
	</template>

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

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

	.reaction-picker-filter {
	padding: 0.5em;
	+ display: flex;
	+ input {
	+ flex: 1;
	+ }
	}

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

	.reaction-picker {
	width: 10em;
	height: 9em;
	font-size: 1.5em;
	overflow-y: scroll;
	display: flex;
	flex-wrap: wrap;
	padding: 0.5em;
	text-align: center;
	align-content: flex-start;
	user-select: none;

	mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
	linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
	linear-gradient(to top, white, white);
	transition: mask-size 150ms;
	mask-size: 100% 20px, 100% 20px, auto;
	// Autoprefixed seem to ignore this one, and also syntax is different
	-webkit-mask-composite: xor;
	mask-composite: exclude;

	.emoji-button {
	cursor: pointer;

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

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

	.add-reaction-button {
	cursor: pointer;

	&:hover {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}

	</style>
	diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
	index 22e14a89be..9e14b449bd 100644
	--- a/src/components/settings/settings.vue
	+++ b/src/components/settings/settings.vue
	@@ -1,414 +1,424 @@
	<template>
	<div class="settings panel panel-default">
	<div class="panel-heading">
	<div class="title">
	{{ $t('settings.settings') }}
	</div>

	<transition name="fade">
	<template v-if="currentSaveStateNotice">
	<div
	v-if="currentSaveStateNotice.error"
	class="alert error"
	@click.prevent
	>
	{{ $t('settings.saving_err') }}
	</div>

	<div
	v-if="!currentSaveStateNotice.error"
	class="alert transparent"
	@click.prevent
	>
	{{ $t('settings.saving_ok') }}
	</div>
	</template>
	</transition>
	</div>
	<div class="panel-body">
	<keep-alive>
	<tab-switcher>
	<div :label="$t('settings.general')">
	<div class="setting-item">
	<h2>{{ $t('settings.interface') }}</h2>
	<ul class="setting-list">
	<li>
	<interface-language-switcher />
	</li>
	<li v-if="instanceSpecificPanelPresent">
	<Checkbox v-model="hideISP">
	{{ $t('settings.hide_isp') }}
	</Checkbox>
	</li>
	</ul>
	</div>
	<div class="setting-item">
	<h2>{{ $t('nav.timeline') }}</h2>
	<ul class="setting-list">
	<li>
	<Checkbox v-model="hideMutedPosts">
	{{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="collapseMessageWithSubject">
	{{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="streaming">
	{{ $t('settings.streaming') }}
	</Checkbox>
	<ul
	class="setting-list suboptions"
	:class="[{disabled: !streaming}]"
	>
	<li>
	<Checkbox
	v-model="pauseOnUnfocused"
	:disabled="!streaming"
	>
	{{ $t('settings.pause_on_unfocused') }}
	</Checkbox>
	</li>
	</ul>
	</li>
	<li>
	<Checkbox v-model="useStreamingApi">
	{{ $t('settings.useStreamingApi') }}
	<br>
	<small>
	{{ $t('settings.useStreamingApiWarning') }}
	</small>
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="autoLoad">
	{{ $t('settings.autoload') }}
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="hoverPreview">
	{{ $t('settings.reply_link_preview') }}
	</Checkbox>
	</li>
	+ <li>
	+ <Checkbox v-model="emojiReactionsOnTimeline">
	+ {{ $t('settings.emoji_reactions_on_timeline') }}
	+ </Checkbox>
	+ </li>
	</ul>
	</div>

	<div class="setting-item">
	<h2>{{ $t('settings.composing') }}</h2>
	<ul class="setting-list">
	<li>
	<Checkbox v-model="scopeCopy">
	{{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="alwaysShowSubjectInput">
	{{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }}
	</Checkbox>
	</li>
	<li>
	<div>
	{{ $t('settings.subject_line_behavior') }}
	<label
	for="subjectLineBehavior"
	class="select"
	>
	<select
	id="subjectLineBehavior"
	v-model="subjectLineBehavior"
	>
	<option value="email">
	{{ $t('settings.subject_line_email') }}
	{{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
	</option>
	<option value="masto">
	{{ $t('settings.subject_line_mastodon') }}
	{{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
	</option>
	<option value="noop">
	{{ $t('settings.subject_line_noop') }}
	{{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
	</option>
	</select>
	<i class="icon-down-open" />
	</label>
	</div>
	</li>
	<li v-if="postFormats.length > 0">
	<div>
	{{ $t('settings.post_status_content_type') }}
	<label
	for="postContentType"
	class="select"
	>
	<select
	id="postContentType"
	v-model="postContentType"
	>
	<option
	v-for="postFormat in postFormats"
	:key="postFormat"
	:value="postFormat"
	>
	{{ $t(`post_status.content_type["${postFormat}"]`) }}
	{{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
	</option>
	</select>
	<i class="icon-down-open" />
	</label>
	</div>
	</li>
	<li>
	<Checkbox v-model="minimalScopesMode">
	{{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="autohideFloatingPostButton">
	{{ $t('settings.autohide_floating_post_button') }}
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="padEmoji">
	{{ $t('settings.pad_emoji') }}
	</Checkbox>
	</li>
	</ul>
	</div>

	<div class="setting-item">
	<h2>{{ $t('settings.attachments') }}</h2>
	<ul class="setting-list">
	<li>
	<Checkbox v-model="hideAttachments">
	{{ $t('settings.hide_attachments_in_tl') }}
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="hideAttachmentsInConv">
	{{ $t('settings.hide_attachments_in_convo') }}
	</Checkbox>
	</li>
	<li>
	<label for="maxThumbnails">
	{{ $t('settings.max_thumbnails') }}
	</label>
	<input
	id="maxThumbnails"
	v-model.number="maxThumbnails"
	class="number-input"
	type="number"
	min="0"
	step="1"
	>
	</li>
	<li>
	<Checkbox v-model="hideNsfw">
	{{ $t('settings.nsfw_clickthrough') }}
	</Checkbox>
	</li>
	<ul class="setting-list suboptions">
	<li>
	<Checkbox
	v-model="preloadImage"
	:disabled="!hideNsfw"
	>
	{{ $t('settings.preload_images') }}
	</Checkbox>
	</li>
	<li>
	<Checkbox
	v-model="useOneClickNsfw"
	:disabled="!hideNsfw"
	>
	{{ $t('settings.use_one_click_nsfw') }}
	</Checkbox>
	</li>
	</ul>
	<li>
	<Checkbox v-model="stopGifs">
	{{ $t('settings.stop_gifs') }}
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="loopVideo">
	{{ $t('settings.loop_video') }}
	</Checkbox>
	<ul
	class="setting-list suboptions"
	:class="[{disabled: !streaming}]"
	>
	<li>
	<Checkbox
	v-model="loopVideoSilentOnly"
	:disabled="!loopVideo \|\| !loopSilentAvailable"
	>
	{{ $t('settings.loop_video_silent_only') }}
	</Checkbox>
	<div
	v-if="!loopSilentAvailable"
	class="unavailable"
	>
	<i class="icon-globe" />! {{ $t('settings.limited_availability') }}
	</div>
	</li>
	</ul>
	</li>
	<li>
	<Checkbox v-model="playVideosInModal">
	{{ $t('settings.play_videos_in_modal') }}
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="useContainFit">
	{{ $t('settings.use_contain_fit') }}
	</Checkbox>
	</li>
	</ul>
	</div>

	<div class="setting-item">
	<h2>{{ $t('settings.notifications') }}</h2>
	<ul class="setting-list">
	<li>
	<Checkbox v-model="webPushNotifications">
	{{ $t('settings.enable_web_push_notifications') }}
	</Checkbox>
	</li>
	</ul>
	</div>

	<div class="setting-item">
	<h2>{{ $t('settings.fun') }}</h2>
	<ul class="setting-list">
	<li>
	<Checkbox v-model="greentext">
	{{ $t('settings.greentext') }} {{ $t('settings.instance_default', { value: greentextLocalizedValue }) }}
	</Checkbox>
	</li>
	</ul>
	</div>
	</div>

	<div :label="$t('settings.theme')">
	<div class="setting-item">
	<style-switcher />
	</div>
	</div>

	<div :label="$t('settings.filtering')">
	<div class="setting-item">
	<div class="select-multiple">
	<span class="label">{{ $t('settings.notification_visibility') }}</span>
	<ul class="option-list">
	<li>
	<Checkbox v-model="notificationVisibility.likes">
	{{ $t('settings.notification_visibility_likes') }}
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="notificationVisibility.repeats">
	{{ $t('settings.notification_visibility_repeats') }}
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="notificationVisibility.follows">
	{{ $t('settings.notification_visibility_follows') }}
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="notificationVisibility.mentions">
	{{ $t('settings.notification_visibility_mentions') }}
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="notificationVisibility.moves">
	{{ $t('settings.notification_visibility_moves') }}
	</Checkbox>
	</li>
	+ <li>
	+ <Checkbox v-model="notificationVisibility.emojiReactions">
	+ {{ $t('settings.notification_visibility_emoji_reactions') }}
	+ </Checkbox>
	+ </li>
	</ul>
	</div>
	<div>
	{{ $t('settings.replies_in_timeline') }}
	<label
	for="replyVisibility"
	class="select"
	>
	<select
	id="replyVisibility"
	v-model="replyVisibility"
	>
	<option
	value="all"
	selected
	>{{ $t('settings.reply_visibility_all') }}</option>
	<option value="following">{{ $t('settings.reply_visibility_following') }}</option>
	<option value="self">{{ $t('settings.reply_visibility_self') }}</option>
	</select>
	<i class="icon-down-open" />
	</label>
	</div>
	<div>
	<Checkbox v-model="hidePostStats">
	{{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }}
	</Checkbox>
	</div>
	<div>
	<Checkbox v-model="hideUserStats">
	{{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }}
	</Checkbox>
	</div>
	</div>
	<div class="setting-item">
	<div>
	<p>{{ $t('settings.filtering_explanation') }}</p>
	<textarea
	id="muteWords"
	v-model="muteWordsString"
	/>
	</div>
	<div>
	<Checkbox v-model="hideFilteredStatuses">
	{{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }}
	</Checkbox>
	</div>
	</div>
	</div>
	<div :label="$t('settings.version.title')">
	<div class="setting-item">
	<ul class="setting-list">
	<li>
	<p>{{ $t('settings.version.backend_version') }}</p>
	<ul class="option-list">
	<li>
	<a
	:href="backendVersionLink"
	target="_blank"
	>{{ backendVersion }}</a>
	</li>
	</ul>
	</li>
	<li>
	<p>{{ $t('settings.version.frontend_version') }}</p>
	<ul class="option-list">
	<li>
	<a
	:href="frontendVersionLink"
	target="_blank"
	>{{ frontendVersion }}</a>
	</li>
	</ul>
	</li>
	</ul>
	</div>
	</div>
	</tab-switcher>
	</keep-alive>
	</div>
	</div>
	</template>

	<script src="./settings.js">
	</script>
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index 81b5766748..fc5956ecec 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,458 +1,468 @@
	import Attachment from '../attachment/attachment.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 Poll from '../poll/poll.vue'
	import ExtraButtons from '../extra_buttons/extra_buttons.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	import UserCard from '../user_card/user_card.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import Gallery from '../gallery/gallery.vue'
	import LinkPreview from '../link-preview/link-preview.vue'
	import AvatarList from '../avatar_list/avatar_list.vue'
	import Timeago from '../timeago/timeago.vue'
	import StatusPopover from '../status_popover/status_popover.vue'
	import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import fileType from 'src/services/file_type/file_type.service'
	import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
	import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
	import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
	import { filter, unescape, uniqBy } from 'lodash'
	import { mapGetters, mapState } from 'vuex'

	const Status = {
	name: 'Status',
	props: [
	'statusoid',
	'expandable',
	'inConversation',
	'focused',
	'highlight',
	'compact',
	'replies',
	'isPreview',
	'noHeading',
	'inlineExpanded',
	'showPinned',
	'inProfile',
	'profileUserId'
	],
	data () {
	return {
	replying: false,
	unmuted: false,
	userExpanded: false,
	showingTall: this.inConversation && this.focused,
	showingLongSubject: false,
	error: null,
	// not as computed because it sets the initial state which will be changed later
	expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject
	}
	},
	computed: {
	localCollapseSubjectDefault () {
	return this.mergedConfig.collapseMessageWithSubject
	},
	muteWords () {
	return this.mergedConfig.muteWords
	},
	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])
	},
	hideAttachments () {
	return (this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	(this.mergedConfig.hideAttachmentsInConv && this.inConversation)
	},
	userProfileLink () {
	return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
	},
	replyProfileLink () {
	if (this.isReply) {
	return this.generateUserProfileLink(this.status.in_reply_to_user_id, this.replyToName)
	}
	},
	retweet () { return !!this.statusoid.retweeted_status },
	retweeter () { return this.statusoid.user.name \|\| this.statusoid.user.screen_name },
	retweeterHtml () { return this.statusoid.user.name_html },
	retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },
	status () {
	if (this.retweet) {
	return this.statusoid.retweeted_status
	} else {
	return this.statusoid
	}
	},
	statusFromGlobalRepository () {
	// NOTE: Consider to replace status with statusFromGlobalRepository
	return this.$store.state.statuses.allStatusesObject[this.status.id]
	},
	loggedIn () {
	return !!this.currentUser
	},
	muteWordHits () {
	const statusText = this.status.text.toLowerCase()
	const statusSummary = this.status.summary.toLowerCase()
	const hits = filter(this.muteWords, (muteWord) => {
	return statusText.includes(muteWord.toLowerCase()) \|\| statusSummary.includes(muteWord.toLowerCase())
	})

	return hits
	},
	muted () { return !this.unmuted && ((!(this.inProfile && this.status.user.id === this.profileUserId) && this.status.user.muted) \|\| (!this.inConversation && this.status.thread_muted) \|\| this.muteWordHits.length > 0) },
	hideFilteredStatuses () {
	return this.mergedConfig.hideFilteredStatuses
	},
	hideStatus () {
	return (this.hideReply \|\| this.deleted) \|\| (this.muted && this.hideFilteredStatuses)
	},
	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
	},
	// This is a bit hacky, but we want to approximate post height before rendering
	// so we count newlines (masto uses <p> for paragraphs, GS uses <br> between them)
	// as well as approximate line count by counting characters and approximating ~80
	// per line.
	//
	// Using max-height + overflow: auto for status components resulted in false positives
	// very often with japanese characters, and it was very annoying.
	tallStatus () {
	const lengthScore = this.status.statusnet_html.split(/<p\|<br/).length + this.status.text.length / 80
	return lengthScore > 20
	},
	longSubject () {
	return this.status.summary.length > 900
	},
	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
	}
	},
	hideReply () {
	if (this.mergedConfig.replyVisibility === 'all') {
	return false
	}
	if (this.inConversation \|\| !this.isReply) {
	return false
	}
	if (this.status.user.id === this.currentUser.id) {
	return false
	}
	if (this.status.type === 'retweet') {
	return false
	}
	const checkFollowing = this.mergedConfig.replyVisibility === 'following'
	for (var i = 0; i < this.status.attentions.length; ++i) {
	if (this.status.user.id === this.status.attentions[i].id) {
	continue
	}
	const taggedUser = this.$store.getters.findUser(this.status.attentions[i].id)
	if (checkFollowing && taggedUser && taggedUser.following) {
	return false
	}
	if (this.status.attentions[i].id === this.currentUser.id) {
	return false
	}
	}
	return this.status.attentions.length > 0
	},
	hideSubjectStatus () {
	if (this.tallStatus && !this.localCollapseSubjectDefault) {
	return false
	}
	return !this.expandingSubject && this.status.summary
	},
	hideTallStatus () {
	if (this.status.summary && this.localCollapseSubjectDefault) {
	return false
	}
	if (this.showingTall) {
	return false
	}
	return this.tallStatus
	},
	showingMore () {
	return (this.tallStatus && this.showingTall) \|\| (this.status.summary && this.expandingSubject)
	},
	nsfwClickthrough () {
	if (!this.status.nsfw) {
	return false
	}
	if (this.status.summary && this.localCollapseSubjectDefault) {
	return false
	}
	return true
	},
	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 ''
	}
	},
	attachmentSize () {
	if ((this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	(this.mergedConfig.hideAttachmentsInConv && this.inConversation) \|\|
	(this.status.attachments.length > this.maxThumbnails)) {
	return 'hide'
	} else if (this.compact) {
	return 'small'
	}
	return 'normal'
	},
	galleryTypes () {
	if (this.attachmentSize === 'hide') {
	return []
	}
	return this.mergedConfig.playVideosInModal
	? ['image', 'video']
	: ['image']
	},
	galleryAttachments () {
	return this.status.attachments.filter(
	file => fileType.fileMatchesSomeType(this.galleryTypes, file)
	)
	},
	nonGalleryAttachments () {
	return this.status.attachments.filter(
	file => !fileType.fileMatchesSomeType(this.galleryTypes, file)
	)
	},
	+ hasImageAttachments () {
	+ return this.status.attachments.some(
	+ file => fileType.fileType(file.mimetype) === 'image'
	+ )
	+ },
	+ hasVideoAttachments () {
	+ return this.status.attachments.some(
	+ file => fileType.fileType(file.mimetype) === 'video'
	+ )
	+ },
	maxThumbnails () {
	return this.mergedConfig.maxThumbnails
	},
	postBodyHtml () {
	const html = this.status.statusnet_html

	if (this.mergedConfig.greentext) {
	try {
	if (html.includes('>')) {
	// This checks if post has '>' at the beginning, excluding mentions so that @mention >impying works
	return processHtml(html, (string) => {
	if (string.includes('>') &&
	string
	.replace(/<[^>]+?>/gi, '') // remove all tags
	.replace(/@\w+/gi, '') // remove mentions (even failed ones)
	.trim()
	.startsWith('>')) {
	return `<span class='greentext'>${string}</span>`
	} else {
	return string
	}
	})
	} else {
	return html
	}
	} catch (e) {
	console.err('Failed to process status html', e)
	return html
	}
	} else {
	return html
	}
	},
	contentHtml () {
	if (!this.status.summary_html) {
	return this.postBodyHtml
	}
	return this.status.summary_html + '<br />' + this.postBodyHtml
	},
	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')
	},
	ownStatus () {
	return this.status.user.id === this.currentUser.id
	},
	tags () {
	return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ')
	},
	hidePostStats () {
	return this.mergedConfig.hidePostStats
	},
	...mapGetters(['mergedConfig']),
	...mapState({
	betterShadow: state => state.interface.browserSupport.cssFilter,
	currentUser: state => state.users.currentUser
	})
	},
	components: {
	Attachment,
	FavoriteButton,
	ReactButton,
	RetweetButton,
	ExtraButtons,
	PostStatusForm,
	Poll,
	UserCard,
	UserAvatar,
	Gallery,
	LinkPreview,
	AvatarList,
	Timeago,
	StatusPopover,
	EmojiReactions
	},
	methods: {
	visibilityIcon (visibility) {
	switch (visibility) {
	case 'private':
	return 'icon-lock'
	case 'unlisted':
	return 'icon-lock-open-alt'
	case 'direct':
	return 'icon-mail-alt'
	default:
	return 'icon-globe'
	}
	},
	showError (error) {
	this.error = error
	},
	clearError () {
	this.error = undefined
	},
	linkClicked (event) {
	const target = event.target.closest('.status-content a')
	if (target) {
	if (target.className.match(/mention/)) {
	const href = target.href
	const attn = this.status.attentions.find(attn => mentionMatchesUrl(attn, href))
	if (attn) {
	event.stopPropagation()
	event.preventDefault()
	const link = this.generateUserProfileLink(attn.id, attn.screen_name)
	this.$router.push(link)
	return
	}
	}
	if (target.rel.match(/(?:^\|\s)tag(?:$\|\s)/) \|\| target.className.match(/hashtag/)) {
	// Extract tag name from link url
	const tag = extractTagFromUrl(target.href)
	if (tag) {
	const link = this.generateTagLink(tag)
	this.$router.push(link)
	return
	}
	}
	window.open(target.href, '_blank')
	}
	},
	toggleReplying () {
	this.replying = !this.replying
	},
	gotoOriginal (id) {
	if (this.inConversation) {
	this.$emit('goto', id)
	}
	},
	toggleExpanded () {
	this.$emit('toggleExpanded')
	},
	toggleMute () {
	this.unmuted = !this.unmuted
	},
	toggleUserExpanded () {
	this.userExpanded = !this.userExpanded
	},
	toggleShowMore () {
	if (this.showingTall) {
	this.showingTall = false
	} else if (this.expandingSubject && this.status.summary) {
	this.expandingSubject = false
	} else if (this.hideTallStatus) {
	this.showingTall = true
	} else if (this.hideSubjectStatus && this.status.summary) {
	this.expandingSubject = true
	}
	},
	generateUserProfileLink (id, name) {
	return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
	},
	generateTagLink (tag) {
	return `/tag/${tag}`
	},
	setMedia () {
	const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
	return () => this.$store.dispatch('setMedia', attachments)
	}
	},
	watch: {
	'highlight': function (id) {
	if (this.status.id === id) {
	let rect = this.$el.getBoundingClientRect()
	if (rect.top < 100) {
	// Post is above screen, match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.height >= (window.innerHeight - 50)) {
	// Post we want to see is taller than screen so match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.bottom > window.innerHeight - 50) {
	// Post is below screen, match its bottom to screen bottom
	window.scrollBy(0, rect.bottom - window.innerHeight + 50)
	}
	}
	},
	'status.repeat_num': function (num) {
	// refetch repeats when repeat_num is changed in any way
	if (this.isFocused && this.statusFromGlobalRepository.rebloggedBy && this.statusFromGlobalRepository.rebloggedBy.length !== num) {
	this.$store.dispatch('fetchRepeats', this.status.id)
	}
	},
	'status.fave_num': function (num) {
	// refetch favs when fave_num is changed in any way
	if (this.isFocused && this.statusFromGlobalRepository.favoritedBy && this.statusFromGlobalRepository.favoritedBy.length !== num) {
	this.$store.dispatch('fetchFavs', this.status.id)
	}
	}
	},
	filters: {
	capitalize: function (str) {
	return str.charAt(0).toUpperCase() + str.slice(1)
	}
	}
	}

	export default Status
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index a326874e78..76b038d90d 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,924 +1,939 @@
	<template>
	<!-- eslint-disable vue/no-v-html -->
	<div
	v-if="!hideStatus"
	class="status-el"
	:class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]"
	>
	<div
	v-if="error"
	class="alert error"
	>
	{{ error }}
	<i
	class="button-icon icon-cancel"
	@click="clearError"
	/>
	</div>
	<template v-if="muted && !isPreview">
	<div class="media status container muted">
	<small>
	<router-link :to="userProfileLink">
	{{ status.user.screen_name }}
	</router-link>
	</small>
	<small class="muteWords">{{ muteWordHits.join(', ') }}</small>
	<a
	href="#"
	class="unmute"
	@click.prevent="toggleMute"
	><i class="button-icon icon-eye-off" /></a>
	</div>
	</template>
	<template v-else>
	<div
	v-if="showPinned"
	class="status-pin"
	>
	<i class="fa icon-pin faint" />
	<span class="faint">{{ $t('status.pinned') }}</span>
	</div>
	<div
	v-if="retweet && !noHeading && !inConversation"
	:class="[repeaterClass, { highlighted: repeaterStyle }]"
	:style="[repeaterStyle]"
	class="media container retweet-info"
	>
	<UserAvatar
	v-if="retweet"
	class="media-left"
	:better-shadow="betterShadow"
	:user="statusoid.user"
	/>
	<div class="media-body faint">
	<span class="user-name">
	<router-link
	v-if="retweeterHtml"
	:to="retweeterProfileLink"
	v-html="retweeterHtml"
	/>
	<router-link
	v-else
	:to="retweeterProfileLink"
	>{{ retweeter }}</router-link>
	</span>
	<i
	class="fa icon-retweet retweeted"
	:title="$t('tool_tip.repeat')"
	/>
	{{ $t('timeline.repeated') }}
	</div>
	</div>

	<div
	:class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]"
	:style="[ userStyle ]"
	class="media status"
	:data-tags="tags"
	>
	<div
	v-if="!noHeading"
	class="media-left"
	>
	<router-link
	:to="userProfileLink"
	@click.stop.prevent.capture.native="toggleUserExpanded"
	>
	<UserAvatar
	:compact="compact"
	:better-shadow="betterShadow"
	:user="status.user"
	/>
	</router-link>
	</div>
	<div class="status-body">
	<UserCard
	v-if="userExpanded"
	:user="status.user"
	:rounded="true"
	:bordered="true"
	class="status-usercard"
	/>
	<div
	v-if="!noHeading"
	class="media-heading"
	>
	<div class="heading-name-row">
	<div class="name-and-account-name">
	<h4
	v-if="status.user.name_html"
	class="user-name"
	v-html="status.user.name_html"
	/>
	<h4
	v-else
	class="user-name"
	>
	{{ status.user.name }}
	</h4>
	<router-link
	class="account-name"
	:to="userProfileLink"
	>
	{{ status.user.screen_name }}
	</router-link>
	</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>
	<div
	v-if="status.visibility"
	class="button-icon visibility-icon"
	>
	<i
	:class="visibilityIcon(status.visibility)"
	:title="status.visibility \| capitalize"
	/>
	</div>
	<a
	v-if="!status.is_local && !isPreview"
	:href="status.external_url"
	target="_blank"
	class="source_url"
	title="Source"
	>
	<i class="button-icon icon-link-ext-alt" />
	</a>
	<template v-if="expandable && !isPreview">
	<a
	href="#"
	title="Expand"
	@click.prevent="toggleExpanded"
	>
	<i class="button-icon icon-plus-squared" />
	</a>
	</template>
	<a
	v-if="unmuted"
	href="#"
	@click.prevent="toggleMute"
	><i class="button-icon icon-eye-off" /></a>
	</span>
	</div>

	<div class="heading-reply-row">
	<div
	v-if="isReply"
	class="reply-to-and-accountname"
	>
	<StatusPopover
	v-if="!isPreview"
	:status-id="status.in_reply_to_status_id"
	>
	<a
	class="reply-to"
	href="#"
	:aria-label="$t('tool_tip.reply')"
	@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	>
	<i class="button-icon icon-reply" />
	<span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
	</a>
	</StatusPopover>
	<span
	v-else
	class="reply-to"
	>
	<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
	</span>
	<router-link :to="replyProfileLink">
	{{ replyToName }}
	</router-link>
	<span
	v-if="replies && replies.length"
	class="faint replies-separator"
	>
	-
	</span>
	</div>
	<div
	v-if="inConversation && !isPreview && replies && replies.length"
	class="replies"
	>
	<span class="faint">{{ $t('status.replies_list') }}</span>
	<StatusPopover
	v-for="reply in replies"
	:key="reply.id"
	:status-id="reply.id"
	>
	<a
	href="#"
	class="reply-link"
	@click.prevent="gotoOriginal(reply.id)"
	>{{ reply.name }}</a>
	</StatusPopover>
	</div>
	</div>
	</div>

	<div
	v-if="longSubject"
	class="status-content-wrapper"
	:class="{ 'tall-status': !showingLongSubject }"
	>
	<a
	v-if="!showingLongSubject"
	class="tall-status-hider"
	:class="{ 'tall-status-hider_focused': isFocused }"
	href="#"
	@click.prevent="showingLongSubject=true"
	>{{ $t("general.show_more") }}</a>
	<div
	class="status-content media-body"
	@click.prevent="linkClicked"
	v-html="contentHtml"
	/>
	<a
	v-if="showingLongSubject"
	href="#"
	class="status-unhider"
	@click.prevent="showingLongSubject=false"
	>{{ $t("general.show_less") }}</a>
	</div>
	<div
	v-else
	:class="{'tall-status': hideTallStatus}"
	class="status-content-wrapper"
	>
	<a
	v-if="hideTallStatus"
	class="tall-status-hider"
	:class="{ 'tall-status-hider_focused': isFocused }"
	href="#"
	@click.prevent="toggleShowMore"
	>{{ $t("general.show_more") }}</a>
	<div
	v-if="!hideSubjectStatus"
	class="status-content media-body"
	@click.prevent="linkClicked"
	v-html="contentHtml"
	/>
	<div
	v-else
	class="status-content media-body"
	@click.prevent="linkClicked"
	v-html="status.summary_html"
	/>
	<a
	v-if="hideSubjectStatus"
	href="#"
	class="cw-status-hider"
	@click.prevent="toggleShowMore"
	- >{{ $t("general.show_more") }}</a>
	+ >
	+ {{ $t("general.show_more") }}
	+ <span
	+ v-if="hasImageAttachments"
	+ class="icon-picture"
	+ />
	+ <span
	+ v-if="hasVideoAttachments"
	+ class="icon-video"
	+ />
	+ <span
	+ v-if="status.card"
	+ class="icon-link"
	+ />
	+ </a>
	<a
	v-if="showingMore"
	href="#"
	class="status-unhider"
	@click.prevent="toggleShowMore"
	>{{ $t("general.show_less") }}</a>
	</div>

	<div v-if="status.poll && status.poll.options">
	<poll :base-poll="status.poll" />
	</div>

	<div
	v-if="status.attachments && (!hideSubjectStatus \|\| showingLongSubject)"
	class="attachments media-body"
	>
	<attachment
	v-for="attachment in nonGalleryAttachments"
	:key="attachment.id"
	class="non-gallery"
	:size="attachmentSize"
	:nsfw="nsfwClickthrough"
	:attachment="attachment"
	:allow-play="true"
	:set-media="setMedia()"
	/>
	<gallery
	v-if="galleryAttachments.length > 0"
	:nsfw="nsfwClickthrough"
	:attachments="galleryAttachments"
	:set-media="setMedia()"
	/>
	</div>

	<div
	v-if="status.card && !hideSubjectStatus && !noHeading"
	class="link-preview media-body"
	>
	<link-preview
	:card="status.card"
	:size="attachmentSize"
	:nsfw="nsfwClickthrough"
	/>
	</div>

	<transition name="fade">
	<div
	v-if="!hidePostStats && isFocused && combinedFavsAndRepeatsUsers.length > 0"
	class="favs-repeated-users"
	>
	<div class="stats">
	<div
	v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0"
	class="stat-count"
	>
	<a class="stat-title">{{ $t('status.repeats') }}</a>
	<div class="stat-number">
	{{ statusFromGlobalRepository.rebloggedBy.length }}
	</div>
	</div>
	<div
	v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0"
	class="stat-count"
	>
	<a class="stat-title">{{ $t('status.favorites') }}</a>
	<div class="stat-number">
	{{ statusFromGlobalRepository.favoritedBy.length }}
	</div>
	</div>
	<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 media-body"
	>
	<div>
	<i
	v-if="loggedIn"
	class="button-icon icon-reply"
	:title="$t('tool_tip.reply')"
	:class="{'button-icon-active': replying}"
	@click.prevent="toggleReplying"
	/>
	<i
	v-else
	class="button-icon button-icon-disabled icon-reply"
	:title="$t('tool_tip.reply')"
	/>
	<span v-if="status.replies_count > 0">{{ status.replies_count }}</span>
	</div>
	<retweet-button
	:visibility="status.visibility"
	:logged-in="loggedIn"
	:status="status"
	/>
	<favorite-button
	:logged-in="loggedIn"
	:status="status"
	/>
	<ReactButton
	:logged-in="loggedIn"
	:status="status"
	/>
	<extra-buttons
	:status="status"
	@onError="showError"
	@onSuccess="clearError"
	/>
	</div>
	</div>
	</div>
	<div
	v-if="replying"
	class="container"
	>
	<PostStatusForm
	class="reply-body"
	:reply-to="status.id"
	:attentions="status.attentions"
	:replied-user="status.user"
	:copy-message-scope="status.visibility"
	:subject="replySubject"
	@posted="toggleReplying"
	/>
	</div>
	</template>
	</div>
	<!-- eslint-enable vue/no-v-html -->
	</template>

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

	$status-margin: 0.75em;

	.status-body {
	flex: 1;
	min-width: 0;
	}

	.status-pin {
	padding: $status-margin $status-margin 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	}

	.media-left {
	margin-right: $status-margin;
	}

	.status-el {
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	border-left-width: 0px;
	min-width: 0;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);

	border-left: 4px $fallback--cRed;
	border-left: 4px var(--cRed, $fallback--cRed);

	&_focused {
	background-color: $fallback--lightBg;
	background-color: var(--selectedPost, $fallback--lightBg);
	color: $fallback--text;
	color: var(--selectedPostText, $fallback--text);
	--lightText: var(--selectedPostLightText, $fallback--light);
	--faint: var(--selectedPostFaintText, $fallback--faint);
	--faintLink: var(--selectedPostFaintLink, $fallback--faint);
	--postLink: var(--selectedPostPostLink, $fallback--faint);
	--postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
	--icon: var(--selectedPostIcon, $fallback--icon);
	}

	.timeline & {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	}

	.media-body {
	flex: 1;
	padding: 0;
	}

	.status-usercard {
	margin-bottom: $status-margin;
	}

	.user-name {
	white-space: nowrap;
	font-size: 14px;
	overflow: hidden;
	flex-shrink: 0;
	max-width: 85%;
	font-weight: bold;

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

	.media-heading {
	padding: 0;
	vertical-align: bottom;
	flex-basis: 100%;
	margin-bottom: 0.5em;

	small {
	font-weight: lighter;
	}

	.heading-name-row {
	padding: 0;
	display: flex;
	justify-content: space-between;
	line-height: 18px;

	a {
	display: inline-block;
	word-break: break-all;
	}

	.name-and-account-name {
	display: flex;
	min-width: 0;
	}

	.user-name {
	flex-shrink: 1;
	margin-right: 0.4em;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	.account-name {
	min-width: 1.6em;
	margin-right: 0.4em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1 1 0;
	}
	}

	.heading-right {
	display: flex;
	flex-shrink: 0;
	}

	.timeago {
	margin-right: 0.2em;
	}

	.heading-reply-row {
	position: relative;
	align-content: baseline;
	font-size: 12px;
	line-height: 18px;
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;

	> .reply-to-and-accountname > a {
	max-width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	display: inline-block;
	word-break: break-all;
	}
	}

	.reply-to-and-accountname {
	display: flex;
	height: 18px;
	margin-right: 0.5em;
	overflow: hidden;
	max-width: 100%;
	.icon-reply {
	transform: scaleX(-1);
	}
	}

	.reply-info {
	display: flex;
	}

	.reply-to {
	display: flex;
	}

	.reply-to-text {
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0 0.4em 0 0.2em;
	}

	.replies-separator {
	margin-left: 0.4em;
	}

	.replies {
	line-height: 18px;
	font-size: 12px;
	display: flex;
	flex-wrap: wrap;
	& > * {
	margin-right: 0.4em;
	}
	}

	.reply-link {
	height: 17px;
	}
	}

	.tall-status {
	position: relative;
	height: 220px;
	overflow-x: hidden;
	overflow-y: hidden;
	z-index: 1;
	.status-content {
	height: 100%;
	mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
	linear-gradient(to top, white, white);
	/* Autoprefixed seem to ignore this one, and also syntax is different */
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	}
	}

	.tall-status-hider {
	display: inline-block;
	word-break: break-all;
	position: absolute;
	height: 70px;
	margin-top: 150px;
	width: 100%;
	text-align: center;
	line-height: 110px;
	z-index: 2;
	}

	.status-unhider, .cw-status-hider {
	width: 100%;
	text-align: center;
	display: inline-block;
	word-break: break-all;
	}

	.status-content {
	font-family: var(--postFont, sans-serif);
	line-height: 1.4em;
	white-space: pre-wrap;

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

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

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

	blockquote {
	margin: 0.2em 0 0.2em 2em;
	font-style: italic;
	}

	pre {
	overflow: auto;
	}

	code, samp, kbd, var, pre {
	font-family: var(--postCodeFont, monospace);
	}

	p {
	margin: 0 0 1em 0;
	}

	p:last-child {
	margin: 0 0 0 0;
	}

	h1 {
	font-size: 1.1em;
	line-height: 1.2em;
	margin: 1.4em 0;
	}

	h2 {
	font-size: 1.1em;
	margin: 1.0em 0;
	}

	h3 {
	font-size: 1em;
	margin: 1.2em 0;
	}

	h4 {
	margin: 1.1em 0;
	}
	}

	.retweet-info {
	padding: 0.4em $status-margin;
	margin: 0;

	.avatar.still-image {
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	margin-left: 28px;
	width: 20px;
	height: 20px;
	}

	.media-body {
	font-size: 1em;
	line-height: 22px;

	display: flex;
	align-content: center;
	flex-wrap: wrap;

	.user-name {
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;

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

	i {
	padding: 0 0.2em;
	}

	a {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	}
	}
	}

	.status-fadein {
	animation-duration: 0.4s;
	animation-name: fadein;
	}

	@keyframes fadein {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}

	.greentext {
	color: $fallback--cGreen;
	color: var(--cGreen, $fallback--cGreen);
	}

	.status-conversation {
	border-left-style: solid;
	}

	.status-actions {
	position: relative;
	width: 100%;
	display: flex;
	margin-top: $status-margin;

	> * {
	max-width: 4em;
	flex: 1;
	}
	}

	.button-icon.icon-reply {
	&:not(.button-icon-disabled):hover,
	&.button-icon-active {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}
	}

	.button-icon.icon-reply {
	&:not(.button-icon-disabled) {
	cursor: pointer;
	}
	}

	.status:hover .animated.avatar {
	canvas {
	display: none;
	}
	img {
	visibility: visible;
	}
	}

	.status {
	display: flex;
	padding: $status-margin;
	&.is-retweet {
	padding-top: 0;
	}
	}

	.status-conversation:last-child {
	border-bottom: none;
	}

	.muted {
	padding: 0.25em 0.5em;
	button {
	margin-left: auto;
	}

	.muteWords {
	margin-left: 10px;
	}
	}

	a.unmute {
	display: block;
	margin-left: auto;
	}

	.reply-body {
	flex: 1;
	}

	.timeline :not(.panel-disabled) > {
	.status-el:last-child {
	border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
	border-bottom: none;
	}
	}

	.favs-repeated-users {
	margin-top: $status-margin;

	.stats {
	width: 100%;
	display: flex;
	line-height: 1em;

	.stat-count {
	margin-right: $status-margin;

	.stat-title {
	color: var(--faint, $fallback--faint);
	font-size: 12px;
	text-transform: uppercase;
	position: relative;
	}

	.stat-number {
	font-weight: bolder;
	font-size: 16px;
	line-height: 1em;
	}
	}

	.avatar-row {
	flex: 1;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;

	&::before {
	content: '';
	position: absolute;
	height: 100%;
	width: 1px;
	left: 0;
	background-color: var(--faint, $fallback--faint);
	}
	}
	}
	}

	@media all and (max-width: 800px) {
	.status-el {
	.retweet-info {
	.avatar.still-image {
	margin-left: 20px;
	}
	}
	}
	.status {
	max-width: 100%;
	}

	.status .avatar.still-image {
	width: 40px;
	height: 40px;

	&.avatar-compact {
	width: 32px;
	height: 32px;
	}
	}
	}

	</style>
	diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
	index 3837305634..eca6f9b16f 100644
	--- a/src/components/user_settings/user_settings.js
	+++ b/src/components/user_settings/user_settings.js
	@@ -1,391 +1,393 @@
	import unescape from 'lodash/unescape'
	import get from 'lodash/get'
	import map from 'lodash/map'
	import reject from 'lodash/reject'
	import TabSwitcher from '../tab_switcher/tab_switcher.js'
	import ImageCropper from '../image_cropper/image_cropper.vue'
	import StyleSwitcher from '../style_switcher/style_switcher.vue'
	import ScopeSelector from '../scope_selector/scope_selector.vue'
	import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
	import BlockCard from '../block_card/block_card.vue'
	import MuteCard from '../mute_card/mute_card.vue'
	import DomainMuteCard from '../domain_mute_card/domain_mute_card.vue'
	import SelectableList from '../selectable_list/selectable_list.vue'
	import ProgressButton from '../progress_button/progress_button.vue'
	import EmojiInput from '../emoji_input/emoji_input.vue'
	import suggestor from '../emoji_input/suggestor.js'
	import Autosuggest from '../autosuggest/autosuggest.vue'
	import Importer from '../importer/importer.vue'
	import Exporter from '../exporter/exporter.vue'
	import withSubscription from '../../hocs/with_subscription/with_subscription'
	import Checkbox from '../checkbox/checkbox.vue'
	import Mfa from './mfa.vue'

	const BlockList = withSubscription({
	fetch: (props, $store) => $store.dispatch('fetchBlocks'),
	select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
	childPropName: 'items'
	})(SelectableList)

	const MuteList = withSubscription({
	fetch: (props, $store) => $store.dispatch('fetchMutes'),
	select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
	childPropName: 'items'
	})(SelectableList)

	const DomainMuteList = withSubscription({
	fetch: (props, $store) => $store.dispatch('fetchDomainMutes'),
	select: (props, $store) => get($store.state.users.currentUser, 'domainMutes', []),
	childPropName: 'items'
	})(SelectableList)

	const UserSettings = {
	data () {
	return {
	newEmail: '',
	newName: this.$store.state.users.currentUser.name,
	newBio: unescape(this.$store.state.users.currentUser.description),
	newLocked: this.$store.state.users.currentUser.locked,
	newNoRichText: this.$store.state.users.currentUser.no_rich_text,
	newDefaultScope: this.$store.state.users.currentUser.default_scope,
	hideFollows: this.$store.state.users.currentUser.hide_follows,
	hideFollowers: this.$store.state.users.currentUser.hide_followers,
	hideFollowsCount: this.$store.state.users.currentUser.hide_follows_count,
	hideFollowersCount: this.$store.state.users.currentUser.hide_followers_count,
	showRole: this.$store.state.users.currentUser.show_role,
	role: this.$store.state.users.currentUser.role,
	discoverable: this.$store.state.users.currentUser.discoverable,
	+ allowFollowingMove: this.$store.state.users.currentUser.allow_following_move,
	pickAvatarBtnVisible: true,
	bannerUploading: false,
	backgroundUploading: false,
	banner: null,
	bannerPreview: null,
	background: null,
	backgroundPreview: null,
	bannerUploadError: null,
	backgroundUploadError: null,
	changeEmailError: false,
	changeEmailPassword: '',
	changedEmail: false,
	deletingAccount: false,
	deleteAccountConfirmPasswordInput: '',
	deleteAccountError: false,
	changePasswordInputs: [ '', '', '' ],
	changedPassword: false,
	changePasswordError: false,
	activeTab: 'profile',
	notificationSettings: this.$store.state.users.currentUser.notification_settings,
	newDomainToMute: ''
	}
	},
	created () {
	this.$store.dispatch('fetchTokens')
	},
	components: {
	StyleSwitcher,
	ScopeSelector,
	TabSwitcher,
	ImageCropper,
	BlockList,
	MuteList,
	DomainMuteList,
	EmojiInput,
	Autosuggest,
	BlockCard,
	MuteCard,
	DomainMuteCard,
	ProgressButton,
	Importer,
	Exporter,
	Mfa,
	Checkbox
	},
	computed: {
	user () {
	return this.$store.state.users.currentUser
	},
	emojiUserSuggestor () {
	return suggestor({
	emoji: [
	...this.$store.state.instance.emoji,
	...this.$store.state.instance.customEmoji
	],
	users: this.$store.state.users.users,
	updateUsersList: (input) => this.$store.dispatch('searchUsers', input)
	})
	},
	emojiSuggestor () {
	return suggestor({ emoji: [
	...this.$store.state.instance.emoji,
	...this.$store.state.instance.customEmoji
	] })
	},
	pleromaBackend () {
	return this.$store.state.instance.pleromaBackend
	},
	minimalScopesMode () {
	return this.$store.state.instance.minimalScopesMode
	},
	vis () {
	return {
	public: { selected: this.newDefaultScope === 'public' },
	unlisted: { selected: this.newDefaultScope === 'unlisted' },
	private: { selected: this.newDefaultScope === 'private' },
	direct: { selected: this.newDefaultScope === 'direct' }
	}
	},
	currentSaveStateNotice () {
	return this.$store.state.interface.settings.currentSaveStateNotice
	},
	oauthTokens () {
	return this.$store.state.oauthTokens.tokens.map(oauthToken => {
	return {
	id: oauthToken.id,
	appName: oauthToken.app_name,
	validUntil: new Date(oauthToken.valid_until).toLocaleDateString()
	}
	})
	}
	},
	methods: {
	updateProfile () {
	this.$store.state.api.backendInteractor
	.updateProfile({
	params: {
	note: this.newBio,
	locked: this.newLocked,
	// Backend notation.
	/* eslint-disable camelcase */
	display_name: this.newName,
	default_scope: this.newDefaultScope,
	no_rich_text: this.newNoRichText,
	hide_follows: this.hideFollows,
	hide_followers: this.hideFollowers,
	discoverable: this.discoverable,
	+ allow_following_move: this.allowFollowingMove,
	hide_follows_count: this.hideFollowsCount,
	hide_followers_count: this.hideFollowersCount,
	show_role: this.showRole
	/* eslint-enable camelcase */
	} }).then((user) => {
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	})
	},
	updateNotificationSettings () {
	this.$store.state.api.backendInteractor
	.updateNotificationSettings({ settings: this.notificationSettings })
	},
	changeVis (visibility) {
	this.newDefaultScope = visibility
	},
	uploadFile (slot, e) {
	const file = e.target.files[0]
	if (!file) { return }
	if (file.size > this.$store.state.instance[slot + 'limit']) {
	const filesize = fileSizeFormatService.fileSizeFormat(file.size)
	const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
	this[slot + 'UploadError'] = this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', { filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit })
	return
	}
	// eslint-disable-next-line no-undef
	const reader = new FileReader()
	reader.onload = ({ target }) => {
	const img = target.result
	this[slot + 'Preview'] = img
	this[slot] = file
	}
	reader.readAsDataURL(file)
	},
	submitAvatar (cropper, file) {
	const that = this
	return new Promise((resolve, reject) => {
	function updateAvatar (avatar) {
	that.$store.state.api.backendInteractor.updateAvatar({ avatar })
	.then((user) => {
	that.$store.commit('addNewUsers', [user])
	that.$store.commit('setCurrentUser', user)
	resolve()
	})
	.catch((err) => {
	reject(new Error(that.$t('upload.error.base') + ' ' + err.message))
	})
	}

	if (cropper) {
	cropper.getCroppedCanvas().toBlob(updateAvatar, file.type)
	} else {
	updateAvatar(file)
	}
	})
	},
	clearUploadError (slot) {
	this[slot + 'UploadError'] = null
	},
	submitBanner () {
	if (!this.bannerPreview) { return }

	this.bannerUploading = true
	this.$store.state.api.backendInteractor.updateBanner({ banner: this.banner })
	.then((user) => {
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	this.bannerPreview = null
	})
	.catch((err) => {
	this.bannerUploadError = this.$t('upload.error.base') + ' ' + err.message
	})
	.then(() => { this.bannerUploading = false })
	},
	submitBg () {
	if (!this.backgroundPreview) { return }
	let background = this.background
	this.backgroundUploading = true
	this.$store.state.api.backendInteractor.updateBg({ background }).then((data) => {
	if (!data.error) {
	this.$store.commit('addNewUsers', [data])
	this.$store.commit('setCurrentUser', data)
	this.backgroundPreview = null
	} else {
	this.backgroundUploadError = this.$t('upload.error.base') + data.error
	}
	this.backgroundUploading = false
	})
	},
	importFollows (file) {
	return this.$store.state.api.backendInteractor.importFollows({ file })
	.then((status) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	importBlocks (file) {
	return this.$store.state.api.backendInteractor.importBlocks({ file })
	.then((status) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	generateExportableUsersContent (users) {
	// Get addresses
	return users.map((user) => {
	// check is it's a local user
	if (user && user.is_local) {
	// append the instance address
	// eslint-disable-next-line no-undef
	return user.screen_name + '@' + location.hostname
	}
	return user.screen_name
	}).join('\n')
	},
	getFollowsContent () {
	return this.$store.state.api.backendInteractor.exportFriends({ id: this.$store.state.users.currentUser.id })
	.then(this.generateExportableUsersContent)
	},
	getBlocksContent () {
	return this.$store.state.api.backendInteractor.fetchBlocks()
	.then(this.generateExportableUsersContent)
	},
	confirmDelete () {
	this.deletingAccount = true
	},
	deleteAccount () {
	this.$store.state.api.backendInteractor.deleteAccount({ password: this.deleteAccountConfirmPasswordInput })
	.then((res) => {
	if (res.status === 'success') {
	this.$store.dispatch('logout')
	this.$router.push({ name: 'root' })
	} else {
	this.deleteAccountError = res.error
	}
	})
	},
	changePassword () {
	const params = {
	password: this.changePasswordInputs[0],
	newPassword: this.changePasswordInputs[1],
	newPasswordConfirmation: this.changePasswordInputs[2]
	}
	this.$store.state.api.backendInteractor.changePassword(params)
	.then((res) => {
	if (res.status === 'success') {
	this.changedPassword = true
	this.changePasswordError = false
	this.logout()
	} else {
	this.changedPassword = false
	this.changePasswordError = res.error
	}
	})
	},
	changeEmail () {
	const params = {
	email: this.newEmail,
	password: this.changeEmailPassword
	}
	this.$store.state.api.backendInteractor.changeEmail(params)
	.then((res) => {
	if (res.status === 'success') {
	this.changedEmail = true
	this.changeEmailError = false
	} else {
	this.changedEmail = false
	this.changeEmailError = res.error
	}
	})
	},
	activateTab (tabName) {
	this.activeTab = tabName
	},
	logout () {
	this.$store.dispatch('logout')
	this.$router.replace('/')
	},
	revokeToken (id) {
	if (window.confirm(`${this.$i18n.t('settings.revoke_token')}?`)) {
	this.$store.dispatch('revokeToken', id)
	}
	},
	filterUnblockedUsers (userIds) {
	return reject(userIds, (userId) => {
	const user = this.$store.getters.findUser(userId)
	return !user \|\| user.statusnet_blocking \|\| user.id === this.$store.state.users.currentUser.id
	})
	},
	filterUnMutedUsers (userIds) {
	return reject(userIds, (userId) => {
	const user = this.$store.getters.findUser(userId)
	return !user \|\| user.muted \|\| user.id === this.$store.state.users.currentUser.id
	})
	},
	queryUserIds (query) {
	return this.$store.dispatch('searchUsers', query)
	.then((users) => map(users, 'id'))
	},
	blockUsers (ids) {
	return this.$store.dispatch('blockUsers', ids)
	},
	unblockUsers (ids) {
	return this.$store.dispatch('unblockUsers', ids)
	},
	muteUsers (ids) {
	return this.$store.dispatch('muteUsers', ids)
	},
	unmuteUsers (ids) {
	return this.$store.dispatch('unmuteUsers', ids)
	},
	unmuteDomains (domains) {
	return this.$store.dispatch('unmuteDomains', domains)
	},
	muteDomain () {
	return this.$store.dispatch('muteDomain', this.newDomainToMute)
	.then(() => { this.newDomainToMute = '' })
	},
	identity (value) {
	return value
	}
	}
	}

	export default UserSettings
	diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
	index 2222c29331..8b2336b4dd 100644
	--- a/src/components/user_settings/user_settings.vue
	+++ b/src/components/user_settings/user_settings.vue
	@@ -1,713 +1,716 @@
	<template>
	<div class="settings panel panel-default">
	<div class="panel-heading">
	<div class="title">
	{{ $t('settings.user_settings') }}
	</div>
	<transition name="fade">
	<template v-if="currentSaveStateNotice">
	<div
	v-if="currentSaveStateNotice.error"
	class="alert error"
	@click.prevent
	>
	{{ $t('settings.saving_err') }}
	</div>

	<div
	v-if="!currentSaveStateNotice.error"
	class="alert transparent"
	@click.prevent
	>
	{{ $t('settings.saving_ok') }}
	</div>
	</template>
	</transition>
	</div>
	<div class="panel-body profile-edit">
	<tab-switcher>
	<div :label="$t('settings.profile_tab')">
	<div class="setting-item">
	<h2>{{ $t('settings.name_bio') }}</h2>
	<p>{{ $t('settings.name') }}</p>
	<EmojiInput
	v-model="newName"
	enable-emoji-picker
	:suggest="emojiSuggestor"
	>
	<input
	id="username"
	v-model="newName"
	classname="name-changer"
	>
	</EmojiInput>
	<p>{{ $t('settings.bio') }}</p>
	<EmojiInput
	v-model="newBio"
	enable-emoji-picker
	:suggest="emojiUserSuggestor"
	>
	<textarea
	v-model="newBio"
	classname="bio"
	/>
	</EmojiInput>
	<p>
	<Checkbox v-model="newLocked">
	{{ $t('settings.lock_account_description') }}
	</Checkbox>
	</p>
	<div>
	<label for="default-vis">{{ $t('settings.default_vis') }}</label>
	<div
	id="default-vis"
	class="visibility-tray"
	>
	<scope-selector
	:show-all="true"
	:user-default="newDefaultScope"
	:initial-scope="newDefaultScope"
	:on-scope-change="changeVis"
	/>
	</div>
	</div>
	<p>
	<Checkbox v-model="newNoRichText">
	{{ $t('settings.no_rich_text_description') }}
	</Checkbox>
	</p>
	<p>
	<Checkbox v-model="hideFollows">
	{{ $t('settings.hide_follows_description') }}
	</Checkbox>
	</p>
	<p class="setting-subitem">
	<Checkbox
	v-model="hideFollowsCount"
	:disabled="!hideFollows"
	>
	{{ $t('settings.hide_follows_count_description') }}
	</Checkbox>
	</p>
	<p>
	- <Checkbox
	- v-model="hideFollowers"
	- >
	+ <Checkbox v-model="hideFollowers">
	{{ $t('settings.hide_followers_description') }}
	</Checkbox>
	</p>
	<p class="setting-subitem">
	<Checkbox
	v-model="hideFollowersCount"
	:disabled="!hideFollowers"
	>
	{{ $t('settings.hide_followers_count_description') }}
	</Checkbox>
	</p>
	+ <p>
	+ <Checkbox v-model="allowFollowingMove">
	+ {{ $t('settings.allow_following_move') }}
	+ </Checkbox>
	+ </p>
	<p v-if="role === 'admin' \|\| role === 'moderator'">
	<Checkbox v-model="showRole">
	<template v-if="role === 'admin'">
	{{ $t('settings.show_admin_badge') }}
	</template>
	<template v-if="role === 'moderator'">
	{{ $t('settings.show_moderator_badge') }}
	</template>
	</Checkbox>
	</p>
	<p>
	<Checkbox v-model="discoverable">
	{{ $t('settings.discoverable') }}
	</Checkbox>
	</p>
	<button
	:disabled="newName && newName.length === 0"
	class="btn btn-default"
	@click="updateProfile"
	>
	{{ $t('general.submit') }}
	</button>
	</div>
	<div class="setting-item">
	<h2>{{ $t('settings.avatar') }}</h2>
	<p class="visibility-notice">
	{{ $t('settings.avatar_size_instruction') }}
	</p>
	<p>{{ $t('settings.current_avatar') }}</p>
	<img
	:src="user.profile_image_url_original"
	class="current-avatar"
	>
	<p>{{ $t('settings.set_new_avatar') }}</p>
	<button
	v-show="pickAvatarBtnVisible"
	id="pick-avatar"
	class="btn"
	type="button"
	>
	{{ $t('settings.upload_a_photo') }}
	</button>
	<image-cropper
	trigger="#pick-avatar"
	:submit-handler="submitAvatar"
	@open="pickAvatarBtnVisible=false"
	@close="pickAvatarBtnVisible=true"
	/>
	</div>
	<div class="setting-item">
	<h2>{{ $t('settings.profile_banner') }}</h2>
	<p>{{ $t('settings.current_profile_banner') }}</p>
	<img
	:src="user.cover_photo"
	class="banner"
	>
	<p>{{ $t('settings.set_new_profile_banner') }}</p>
	<img
	v-if="bannerPreview"
	class="banner"
	:src="bannerPreview"
	>
	<div>
	<input
	type="file"
	@change="uploadFile('banner', $event)"
	>
	</div>
	<i
	v-if="bannerUploading"
	class=" icon-spin4 animate-spin uploading"
	/>
	<button
	v-else-if="bannerPreview"
	class="btn btn-default"
	@click="submitBanner"
	>
	{{ $t('general.submit') }}
	</button>
	<div
	v-if="bannerUploadError"
	class="alert error"
	>
	Error: {{ bannerUploadError }}
	<i
	class="button-icon icon-cancel"
	@click="clearUploadError('banner')"
	/>
	</div>
	</div>
	<div class="setting-item">
	<h2>{{ $t('settings.profile_background') }}</h2>
	<p>{{ $t('settings.set_new_profile_background') }}</p>
	<img
	v-if="backgroundPreview"
	class="bg"
	:src="backgroundPreview"
	>
	<div>
	<input
	type="file"
	@change="uploadFile('background', $event)"
	>
	</div>
	<i
	v-if="backgroundUploading"
	class=" icon-spin4 animate-spin uploading"
	/>
	<button
	v-else-if="backgroundPreview"
	class="btn btn-default"
	@click="submitBg"
	>
	{{ $t('general.submit') }}
	</button>
	<div
	v-if="backgroundUploadError"
	class="alert error"
	>
	Error: {{ backgroundUploadError }}
	<i
	class="button-icon icon-cancel"
	@click="clearUploadError('background')"
	/>
	</div>
	</div>
	</div>

	<div :label="$t('settings.security_tab')">
	<div class="setting-item">
	<h2>{{ $t('settings.change_email') }}</h2>
	<div>
	<p>{{ $t('settings.new_email') }}</p>
	<input
	v-model="newEmail"
	type="email"
	autocomplete="email"
	>
	</div>
	<div>
	<p>{{ $t('settings.current_password') }}</p>
	<input
	v-model="changeEmailPassword"
	type="password"
	autocomplete="current-password"
	>
	</div>
	<button
	class="btn btn-default"
	@click="changeEmail"
	>
	{{ $t('general.submit') }}
	</button>
	<p v-if="changedEmail">
	{{ $t('settings.changed_email') }}
	</p>
	<template v-if="changeEmailError !== false">
	<p>{{ $t('settings.change_email_error') }}</p>
	<p>{{ changeEmailError }}</p>
	</template>
	</div>

	<div class="setting-item">
	<h2>{{ $t('settings.change_password') }}</h2>
	<div>
	<p>{{ $t('settings.current_password') }}</p>
	<input
	v-model="changePasswordInputs[0]"
	type="password"
	>
	</div>
	<div>
	<p>{{ $t('settings.new_password') }}</p>
	<input
	v-model="changePasswordInputs[1]"
	type="password"
	>
	</div>
	<div>
	<p>{{ $t('settings.confirm_new_password') }}</p>
	<input
	v-model="changePasswordInputs[2]"
	type="password"
	>
	</div>
	<button
	class="btn btn-default"
	@click="changePassword"
	>
	{{ $t('general.submit') }}
	</button>
	<p v-if="changedPassword">
	{{ $t('settings.changed_password') }}
	</p>
	<p v-else-if="changePasswordError !== false">
	{{ $t('settings.change_password_error') }}
	</p>
	<p v-if="changePasswordError">
	{{ changePasswordError }}
	</p>
	</div>

	<div class="setting-item">
	<h2>{{ $t('settings.oauth_tokens') }}</h2>
	<table class="oauth-tokens">
	<thead>
	<tr>
	<th>{{ $t('settings.app_name') }}</th>
	<th>{{ $t('settings.valid_until') }}</th>
	<th />
	</tr>
	</thead>
	<tbody>
	<tr
	v-for="oauthToken in oauthTokens"
	:key="oauthToken.id"
	>
	<td>{{ oauthToken.appName }}</td>
	<td>{{ oauthToken.validUntil }}</td>
	<td class="actions">
	<button
	class="btn btn-default"
	@click="revokeToken(oauthToken.id)"
	>
	{{ $t('settings.revoke_token') }}
	</button>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	<mfa />
	<div class="setting-item">
	<h2>{{ $t('settings.delete_account') }}</h2>
	<p v-if="!deletingAccount">
	{{ $t('settings.delete_account_description') }}
	</p>
	<div v-if="deletingAccount">
	<p>{{ $t('settings.delete_account_instructions') }}</p>
	<p>{{ $t('login.password') }}</p>
	<input
	v-model="deleteAccountConfirmPasswordInput"
	type="password"
	>
	<button
	class="btn btn-default"
	@click="deleteAccount"
	>
	{{ $t('settings.delete_account') }}
	</button>
	</div>
	<p v-if="deleteAccountError !== false">
	{{ $t('settings.delete_account_error') }}
	</p>
	<p v-if="deleteAccountError">
	{{ deleteAccountError }}
	</p>
	<button
	v-if="!deletingAccount"
	class="btn btn-default"
	@click="confirmDelete"
	>
	{{ $t('general.submit') }}
	</button>
	</div>
	</div>

	<div
	v-if="pleromaBackend"
	:label="$t('settings.notifications')"
	>
	<div class="setting-item">
	<div class="select-multiple">
	<span class="label">{{ $t('settings.notification_setting') }}</span>
	<ul class="option-list">
	<li>
	<Checkbox v-model="notificationSettings.follows">
	{{ $t('settings.notification_setting_follows') }}
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="notificationSettings.followers">
	{{ $t('settings.notification_setting_followers') }}
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="notificationSettings.non_follows">
	{{ $t('settings.notification_setting_non_follows') }}
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="notificationSettings.non_followers">
	{{ $t('settings.notification_setting_non_followers') }}
	</Checkbox>
	</li>
	</ul>
	</div>
	<p>{{ $t('settings.notification_mutes') }}</p>
	<p>{{ $t('settings.notification_blocks') }}</p>
	<button
	class="btn btn-default"
	@click="updateNotificationSettings"
	>
	{{ $t('general.submit') }}
	</button>
	</div>
	</div>

	<div
	v-if="pleromaBackend"
	:label="$t('settings.data_import_export_tab')"
	>
	<div class="setting-item">
	<h2>{{ $t('settings.follow_import') }}</h2>
	<p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
	<Importer
	:submit-handler="importFollows"
	:success-message="$t('settings.follows_imported')"
	:error-message="$t('settings.follow_import_error')"
	/>
	</div>
	<div class="setting-item">
	<h2>{{ $t('settings.follow_export') }}</h2>
	<Exporter
	:get-content="getFollowsContent"
	filename="friends.csv"
	:export-button-label="$t('settings.follow_export_button')"
	/>
	</div>
	<div class="setting-item">
	<h2>{{ $t('settings.block_import') }}</h2>
	<p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p>
	<Importer
	:submit-handler="importBlocks"
	:success-message="$t('settings.blocks_imported')"
	:error-message="$t('settings.block_import_error')"
	/>
	</div>
	<div class="setting-item">
	<h2>{{ $t('settings.block_export') }}</h2>
	<Exporter
	:get-content="getBlocksContent"
	filename="blocks.csv"
	:export-button-label="$t('settings.block_export_button')"
	/>
	</div>
	</div>

	<div :label="$t('settings.blocks_tab')">
	<div class="profile-edit-usersearch-wrapper">
	<Autosuggest
	:filter="filterUnblockedUsers"
	:query="queryUserIds"
	:placeholder="$t('settings.search_user_to_block')"
	>
	<BlockCard
	slot-scope="row"
	:user-id="row.item"
	/>
	</Autosuggest>
	</div>
	<BlockList
	:refresh="true"
	:get-key="identity"
	>
	<template
	slot="header"
	slot-scope="{selected}"
	>
	<div class="profile-edit-bulk-actions">
	<ProgressButton
	v-if="selected.length > 0"
	class="btn btn-default"
	:click="() => blockUsers(selected)"
	>
	{{ $t('user_card.block') }}
	<template slot="progress">
	{{ $t('user_card.block_progress') }}
	</template>
	</ProgressButton>
	<ProgressButton
	v-if="selected.length > 0"
	class="btn btn-default"
	:click="() => unblockUsers(selected)"
	>
	{{ $t('user_card.unblock') }}
	<template slot="progress">
	{{ $t('user_card.unblock_progress') }}
	</template>
	</ProgressButton>
	</div>
	</template>
	<template
	slot="item"
	slot-scope="{item}"
	>
	<BlockCard :user-id="item" />
	</template>
	<template slot="empty">
	{{ $t('settings.no_blocks') }}
	</template>
	</BlockList>
	</div>

	<div :label="$t('settings.mutes_tab')">
	<tab-switcher>
	<div label="Users">
	<div class="profile-edit-usersearch-wrapper">
	<Autosuggest
	:filter="filterUnMutedUsers"
	:query="queryUserIds"
	:placeholder="$t('settings.search_user_to_mute')"
	>
	<MuteCard
	slot-scope="row"
	:user-id="row.item"
	/>
	</Autosuggest>
	</div>
	<MuteList
	:refresh="true"
	:get-key="identity"
	>
	<template
	slot="header"
	slot-scope="{selected}"
	>
	<div class="profile-edit-bulk-actions">
	<ProgressButton
	v-if="selected.length > 0"
	class="btn btn-default"
	:click="() => muteUsers(selected)"
	>
	{{ $t('user_card.mute') }}
	<template slot="progress">
	{{ $t('user_card.mute_progress') }}
	</template>
	</ProgressButton>
	<ProgressButton
	v-if="selected.length > 0"
	class="btn btn-default"
	:click="() => unmuteUsers(selected)"
	>
	{{ $t('user_card.unmute') }}
	<template slot="progress">
	{{ $t('user_card.unmute_progress') }}
	</template>
	</ProgressButton>
	</div>
	</template>
	<template
	slot="item"
	slot-scope="{item}"
	>
	<MuteCard :user-id="item" />
	</template>
	<template slot="empty">
	{{ $t('settings.no_mutes') }}
	</template>
	</MuteList>
	</div>

	<div :label="$t('settings.domain_mutes')">
	<div class="profile-edit-domain-mute-form">
	<input
	v-model="newDomainToMute"
	:placeholder="$t('settings.type_domains_to_mute')"
	type="text"
	@keyup.enter="muteDomain"
	>
	<ProgressButton
	class="btn btn-default"
	:click="muteDomain"
	>
	{{ $t('domain_mute_card.mute') }}
	<template slot="progress">
	{{ $t('domain_mute_card.mute_progress') }}
	</template>
	</ProgressButton>
	</div>
	<DomainMuteList
	:refresh="true"
	:get-key="identity"
	>
	<template
	slot="header"
	slot-scope="{selected}"
	>
	<div class="profile-edit-bulk-actions">
	<ProgressButton
	v-if="selected.length > 0"
	class="btn btn-default"
	:click="() => unmuteDomains(selected)"
	>
	{{ $t('domain_mute_card.unmute') }}
	<template slot="progress">
	{{ $t('domain_mute_card.unmute_progress') }}
	</template>
	</ProgressButton>
	</div>
	</template>
	<template
	slot="item"
	slot-scope="{item}"
	>
	<DomainMuteCard :domain="item" />
	</template>
	<template slot="empty">
	{{ $t('settings.no_mutes') }}
	</template>
	</DomainMuteList>
	</div>
	</tab-switcher>
	</div>
	</tab-switcher>
	</div>
	</div>
	</template>

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

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

	.profile-edit {
	.bio {
	margin: 0;
	}

	.visibility-tray {
	padding-top: 5px;
	}

	input[type=file] {
	padding: 5px;
	height: auto;
	}

	.banner {
	max-width: 100%;
	}

	.uploading {
	font-size: 1.5em;
	margin: 0.25em;
	}

	.name-changer {
	width: 100%;
	}

	.bg {
	max-width: 100%;
	}

	.current-avatar {
	display: block;
	width: 150px;
	height: 150px;
	border-radius: $fallback--avatarRadius;
	border-radius: var(--avatarRadius, $fallback--avatarRadius);
	}

	.oauth-tokens {
	width: 100%;

	th {
	text-align: left;
	}

	.actions {
	text-align: right;
	}
	}

	&-usersearch-wrapper {
	padding: 1em;
	}

	&-bulk-actions {
	text-align: right;
	padding: 0 1em;
	min-height: 28px;

	button {
	width: 10em;
	}
	}

	&-domain-mute-form {
	padding: 1em;
	display: flex;
	flex-direction: column;

	button {
	align-self: flex-end;
	margin-top: 1em;
	width: 10em;
	}
	}

	.setting-subitem {
	margin-left: 1.75em;
	}
	}
	</style>
	diff --git a/src/i18n/en.json b/src/i18n/en.json
	index 771805e96b..272084f860 100644
	--- a/src/i18n/en.json
	+++ b/src/i18n/en.json
	@@ -1,720 +1,733 @@
	{
	"about": {
	"staff": "Staff",
	"federation": "Federation",
	"mrf_policies": "Enabled MRF Policies",
	"mrf_policies_desc": "MRF policies manipulate the federation behaviour of the instance. The following policies are enabled:",
	"mrf_policy_simple": "Instance-specific Policies",
	"mrf_policy_simple_accept": "Accept",
	"mrf_policy_simple_accept_desc": "This instance only accepts messages from the following instances:",
	"mrf_policy_simple_reject": "Reject",
	"mrf_policy_simple_reject_desc": "This instance will not accept messages from the following instances:",
	"mrf_policy_simple_quarantine": "Quarantine",
	"mrf_policy_simple_quarantine_desc": "This instance will send only public posts to the following instances:",
	"mrf_policy_simple_ftl_removal": "Removal from \"The Whole Known Network\" Timeline",
	"mrf_policy_simple_ftl_removal_desc": "This instance removes these instances from \"The Whole Known Network\" timeline:",
	"mrf_policy_simple_media_removal": "Media Removal",
	"mrf_policy_simple_media_removal_desc": "This instance removes media from posts on the following instances:",
	"mrf_policy_simple_media_nsfw": "Media Force-set As Sensitive",
	- "mrf_policy_simple_media_nsfw_desc": "This instance forces media to be set sensitive in posts on the following instances:"
	+ "mrf_policy_simple_media_nsfw_desc": "This instance forces media to be set sensitive in posts on the following instances:",
	+ "mrf": {
	+ "keyword": {
	+ "keyword_policies": "Keyword Policies",
	+ "ftl_removal": "Removal from \"The Whole Known Network\" Timeline",
	+ "reject": "Reject",
	+ "replace": "Replace",
	+ "is_replaced_by": "→"
	+ }
	+ }
	},
	"chat": {
	"title": "Chat"
	},
	"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": {
	"chat": "Chat",
	"gopher": "Gopher",
	"media_proxy": "Media proxy",
	"scope_options": "Scope options",
	"text_limit": "Text limit",
	"title": "Features",
	"who_to_follow": "Who to follow"
	},
	"finder": {
	"error_fetching_user": "Error fetching user",
	"find_user": "Find user"
	},
	"general": {
	"apply": "Apply",
	"submit": "Submit",
	"more": "More",
	"generic_error": "An error occured",
	"optional": "optional",
	"show_more": "Show more",
	"show_less": "Show less",
	"dismiss": "Dismiss",
	"cancel": "Cancel",
	"disable": "Disable",
	"enable": "Enable",
	"confirm": "Confirm",
	"verify": "Verify"
	},
	"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"
	},
	"nav": {
	"about": "About",
	"administration": "Administration",
	"back": "Back",
	"chat": "Local Chat",
	"friend_requests": "Follow Requests",
	"mentions": "Mentions",
	"interactions": "Interactions",
	"dms": "Direct Messages",
	"public_tl": "Public Timeline",
	"timeline": "Timeline",
	"twkn": "The Whole Known Network",
	"user_search": "User Search",
	"search": "Search",
	"who_to_follow": "Who to follow",
	"preferences": "Preferences"
	},
	"notifications": {
	"broken_favorite": "Unknown status, searching for it...",
	"favorited_you": "favorited your status",
	"followed_you": "followed 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"
	+ "migrated_to": "migrated to",
	+ "reacted_with": "reacted with {0}"
	},
	"polls": {
	"add_poll": "Add Poll",
	"add_option": "Add Option",
	"option": "Option",
	"votes": "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"
	},
	"interactions": {
	"favs_repeats": "Repeats and Favorites",
	"follows": "New follows",
	"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",
	"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",
	"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": "Bio",
	"email": "Email",
	"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.",
	"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"
	}
	},
	"remote_user_resolver": {
	"remote_user_resolver": "Remote user resolver",
	"searching_for": "Searching for",
	"error": "Not found."
	},
	"selectable_list": {
	"select_all": "Select all"
	},
	"settings": {
	"app_name": "App name",
	"security": "Security",
	"enter_current_password_to_confirm": "Enter your current password to confirm your identity",
	"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:"
	}
	},
	+ "allow_following_move": "Allow auto-follow when following account moves",
	"attachmentRadius": "Attachments",
	"attachments": "Attachments",
	"autoload": "Enable automatic loading when scrolled to the bottom",
	"avatar": "Avatar",
	"avatarAltRadius": "Avatars (Notifications)",
	"avatarRadius": "Avatars",
	"background": "Background",
	"bio": "Bio",
	"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.",
	"blocks_tab": "Blocks",
	"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!",
	"collapse_subject": "Collapse posts with subjects",
	"composing": "Composing",
	"confirm_new_password": "Confirm new password",
	"current_avatar": "Your current avatar",
	"current_password": "Current password",
	"current_profile_banner": "Your current profile banner",
	"data_import_export_tab": "Data Import / Export",
	"default_vis": "Default visibility scope",
	"delete_account": "Delete Account",
	"delete_account_description": "Permanently delete your account and all your messages.",
	"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.",
	"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",
	"filtering_explanation": "All statuses containing these words will be muted, one per line",
	"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_muted_posts": "Hide posts of muted users",
	"max_thumbnails": "Maximum amount of thumbnails per post",
	"hide_isp": "Hide instance-specific panel",
	"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 filtered statuses",
	"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",
	"use_contain_fit": "Don't crop the attachment in thumbnails",
	"name": "Name",
	"name_bio": "Name & Bio",
	"new_email": "New Email",
	"new_password": "New password",
	"notification_visibility": "Types of notifications to show",
	"notification_visibility_follows": "Follows",
	"notification_visibility_likes": "Likes",
	"notification_visibility_mentions": "Mentions",
	"notification_visibility_repeats": "Repeats",
	"notification_visibility_moves": "User Migrates",
	+ "notification_visibility_emoji_reactions": "Reactions",
	"no_rich_text_description": "Strip rich text formatting from all posts",
	"no_blocks": "No blocks",
	"no_mutes": "No mutes",
	"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": "Enable clickthrough NSFW attachment hiding",
	"oauth_tokens": "OAuth tokens",
	"token": "Token",
	"refresh_token": "Refresh Token",
	"valid_until": "Valid Until",
	"revoke_token": "Revoke",
	"panelRadius": "Panels",
	"pause_on_unfocused": "Pause streaming 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_link_preview": "Enable reply-link preview on mouse hover",
	"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",
	"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",
	"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",
	"post_status_content_type": "Post status content type",
	"stop_gifs": "Play-on-hover GIFs",
	"streaming": "Enable automatic streaming of new posts when scrolled to the top",
	"user_mutes": "Users",
	"useStreamingApi": "Receive posts and notifications real-time",
	"useStreamingApiWarning": "(Not recommended, experimental, known to skip posts)",
	"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": "Type in domains to mute",
	"upload_a_photo": "Upload a photo",
	"user_settings": "User Settings",
	"values": {
	"false": "no",
	"true": "yes"
	},
	"fun": "Fun",
	"greentext": "Meme arrows",
	"notifications": "Notifications",
	"notification_setting": "Receive notifications from:",
	"notification_setting_follows": "Users you follow",
	"notification_setting_non_follows": "Users you do not follow",
	"notification_setting_followers": "Users who follow you",
	"notification_setting_non_followers": "Users who do not follow you",
	"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",
	"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 inconsitencies.",
	"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",
	"poll": "Poll graph",
	"icons": "Icons",
	"highlight": "Highlighted elements",
	"pressed": "Pressed",
	"selectedPost": "Selected post",
	"selectedMenu": "Selected menu item",
	"disabled": "Disabled",
	"toggled": "Toggled",
	"tabs": "Tabs"
	},
	"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": {
	"day": "{0} day",
	"days": "{0} days",
	"day_short": "{0}d",
	"days_short": "{0}d",
	"hour": "{0} hour",
	"hours": "{0} hours",
	"hour_short": "{0}h",
	"hours_short": "{0}h",
	"in_future": "in {0}",
	"in_past": "{0} ago",
	"minute": "{0} minute",
	"minutes": "{0} minutes",
	"minute_short": "{0}min",
	"minutes_short": "{0}min",
	"month": "{0} month",
	"months": "{0} months",
	"month_short": "{0}mo",
	"months_short": "{0}mo",
	"now": "just now",
	"now_short": "now",
	"second": "{0} second",
	"seconds": "{0} seconds",
	"second_short": "{0}s",
	"seconds_short": "{0}s",
	"week": "{0} week",
	"weeks": "{0} weeks",
	"week_short": "{0}w",
	"weeks_short": "{0}w",
	"year": "{0} year",
	"years": "{0} years",
	"year_short": "{0}y",
	"years_short": "{0}y"
	},
	"timeline": {
	"collapse": "Collapse",
	"conversation": "Conversation",
	"error_fetching": "Error fetching updates",
	"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",
	"up_to_date": "Up-to-date",
	"no_more_statuses": "No more statuses",
	"no_statuses": "No statuses"
	},
	"status": {
	"favorites": "Favorites",
	"repeats": "Repeats",
	"delete": "Delete status",
	"pin": "Pin on profile",
	"unpin": "Unpin from profile",
	"pinned": "Pinned",
	"delete_confirm": "Do you really want to delete this status?",
	"reply_to": "Reply to",
	"replies_list": "Replies:",
	"mute_conversation": "Mute conversation",
	"unmute_conversation": "Unmute conversation"
	},
	"user_card": {
	"approve": "Approve",
	"block": "Block",
	"blocked": "Blocked!",
	"deny": "Deny",
	"favorites": "Favorites",
	"follow": "Follow",
	"follow_sent": "Request sent!",
	"follow_progress": "Requesting…",
	"follow_again": "Send request again?",
	"follow_unfollow": "Unfollow",
	"followees": "Following",
	"followers": "Followers",
	"following": "Following!",
	"follows_you": "Follows you!",
	"hidden": "Hidden",
	"its_you": "It's you!",
	"media": "Media",
	"mention": "Mention",
	"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",
	"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_confirmation": "Are you absolutely sure? This action cannot be undone."
	}
	},
	"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"
	},
	"upload":{
	"error": {
	"base": "Upload failed.",
	"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",
	"not_found": "We couldn't find that email or username.",
	"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."
	}
	}
	diff --git a/src/i18n/fi.json b/src/i18n/fi.json
	index e7ed5408fc..ac8b2ac965 100644
	--- a/src/i18n/fi.json
	+++ b/src/i18n/fi.json
	@@ -1,340 +1,343 @@
	{
	"chat": {
	"title": "Chat"
	},
	"features_panel": {
	"chat": "Chat",
	"gopher": "Gopher",
	"media_proxy": "Media-välityspalvelin",
	"scope_options": "Näkyvyyden rajaus",
	"text_limit": "Tekstin pituusraja",
	"title": "Ominaisuudet",
	"who_to_follow": "Seurausehdotukset"
	},
	"finder": {
	"error_fetching_user": "Virhe hakiessa käyttäjää",
	"find_user": "Hae käyttäjä"
	},
	"general": {
	"apply": "Aseta",
	"submit": "Lähetä",
	"more": "Lisää",
	"generic_error": "Virhe tapahtui"
	},
	"login": {
	"login": "Kirjaudu sisään",
	"description": "Kirjaudu sisään OAuthilla",
	"logout": "Kirjaudu ulos",
	"password": "Salasana",
	"placeholder": "esim. Seppo",
	"register": "Rekisteröidy",
	"username": "Käyttäjänimi"
	},
	"nav": {
	"about": "Tietoja",
	"back": "Takaisin",
	"chat": "Paikallinen Chat",
	"friend_requests": "Seurauspyynnöt",
	"mentions": "Maininnat",
	"interactions": "Interaktiot",
	"dms": "Yksityisviestit",
	"public_tl": "Julkinen Aikajana",
	"timeline": "Aikajana",
	"twkn": "Koko Tunnettu Verkosto",
	"user_search": "Käyttäjähaku",
	"who_to_follow": "Seurausehdotukset",
	"preferences": "Asetukset"
	},
	"notifications": {
	"broken_favorite": "Viestiä ei löydetty...",
	"favorited_you": "tykkäsi viestistäsi",
	"followed_you": "seuraa sinua",
	"load_older": "Lataa vanhempia ilmoituksia",
	"notifications": "Ilmoitukset",
	"read": "Lue!",
	"repeated_you": "toisti viestisi",
	- "no_more_notifications": "Ei enempää ilmoituksia"
	+ "no_more_notifications": "Ei enempää ilmoituksia",
	+ "reacted_with": "lisäsi reaktion {0}"
	},
	"polls": {
	"add_poll": "Lisää äänestys",
	"add_option": "Lisää vaihtoehto",
	"option": "Vaihtoehto",
	"votes": "ääntä",
	"vote": "Äänestä",
	"type": "Äänestyksen tyyppi",
	"single_choice": "Yksi valinta",
	"multiple_choices": "Monivalinta",
	"expiry": "Äänestyksen kesto",
	"expires_in": "Päättyy {0} päästä",
	"expired": "Päättyi {0} sitten",
	"not_enough_option": "Liian vähän uniikkeja vaihtoehtoja äänestyksessä"
	},
	"interactions": {
	"favs_repeats": "Toistot ja tykkäykset",
	"follows": "Uudet seuraukset",
	"load_older": "Lataa vanhempia interaktioita"
	},
	"post_status": {
	"new_status": "Uusi viesti",
	"account_not_locked_warning": "Tilisi ei ole {0}. Kuka vain voi seurata sinua nähdäksesi 'vain-seuraajille' -viestisi",
	"account_not_locked_warning_link": "lukittu",
	"attachments_sensitive": "Merkkaa liitteet arkaluonteisiksi",
	"content_type": {
	"text/plain": "Tavallinen teksti"
	},
	"content_warning": "Aihe (valinnainen)",
	"default": "Tulin juuri saunasta.",
	"direct_warning": "Tämä viesti näkyy vain mainituille käyttäjille.",
	"posting": "Lähetetään",
	"scope": {
	"direct": "Yksityisviesti - Näkyy vain mainituille käyttäjille",
	"private": "Vain-seuraajille - Näkyy vain seuraajillesi",
	"public": "Julkinen - Näkyy julkisilla aikajanoilla",
	"unlisted": "Listaamaton - Ei näy julkisilla aikajanoilla"
	}
	},
	"registration": {
	"bio": "Kuvaus",
	"email": "Sähköposti",
	"fullname": "Koko nimi",
	"password_confirm": "Salasanan vahvistaminen",
	"registration": "Rekisteröityminen",
	"token": "Kutsuvaltuus",
	"captcha": "Varmenne",
	"new_captcha": "Paina kuvaa saadaksesi uuden varmenteen",
	"validations": {
	"username_required": "ei voi olla tyhjä",
	"fullname_required": "ei voi olla tyhjä",
	"email_required": "ei voi olla tyhjä",
	"password_required": "ei voi olla tyhjä",
	"password_confirmation_required": "ei voi olla tyhjä",
	"password_confirmation_match": "pitää vastata salasanaa"
	}
	},
	"settings": {
	"attachmentRadius": "Liitteet",
	"attachments": "Liitteet",
	"autoload": "Lataa vanhempia viestejä automaattisesti ruudun pohjalla",
	"avatar": "Profiilikuva",
	"avatarAltRadius": "Profiilikuvat (ilmoitukset)",
	"avatarRadius": "Profiilikuvat",
	"background": "Tausta",
	"bio": "Kuvaus",
	"btnRadius": "Napit",
	"cBlue": "Sininen (Vastaukset, seuraukset)",
	"cGreen": "Vihreä (Toistot)",
	"cOrange": "Oranssi (Tykkäykset)",
	"cRed": "Punainen (Peruminen)",
	"change_password": "Vaihda salasana",
	"change_password_error": "Virhe vaihtaessa salasanaa.",
	"changed_password": "Salasana vaihdettu!",
	"collapse_subject": "Minimoi viestit, joille on asetettu aihe",
	"composing": "Viestien laatiminen",
	"confirm_new_password": "Vahvista uusi salasana",
	"current_avatar": "Nykyinen profiilikuvasi",
	"current_password": "Nykyinen salasana",
	"current_profile_banner": "Nykyinen julisteesi",
	"data_import_export_tab": "Tietojen tuonti / vienti",
	"default_vis": "Oletusnäkyvyysrajaus",
	"delete_account": "Poista tili",
	"delete_account_description": "Poista tilisi ja viestisi pysyvästi.",
	"delete_account_error": "Virhe poistaessa tiliäsi. Jos virhe jatkuu, ota yhteyttä palvelimesi ylläpitoon.",
	"delete_account_instructions": "Syötä salasanasi vahvistaaksesi tilin poiston.",
	+ "emoji_reactions_on_timeline": "Näytä emojireaktiot aikajanalla",
	"export_theme": "Tallenna teema",
	"filtering": "Suodatus",
	"filtering_explanation": "Kaikki viestit, jotka sisältävät näitä sanoja, suodatetaan. Yksi sana per rivi.",
	"follow_export": "Seurausten vienti",
	"follow_export_button": "Vie seurauksesi CSV-tiedostoon",
	"follow_export_processing": "Käsitellään, sinua pyydetään lataamaan tiedosto hetken päästä",
	"follow_import": "Seurausten tuonti",
	"follow_import_error": "Virhe tuodessa seuraksia",
	"follows_imported": "Seuraukset tuotu! Niiden käsittely vie hetken.",
	"foreground": "Korostus",
	"general": "Yleinen",
	"hide_attachments_in_convo": "Piilota liitteet keskusteluissa",
	"hide_attachments_in_tl": "Piilota liitteet aikajanalla",
	"max_thumbnails": "Suurin sallittu määrä liitteitä esikatselussa",
	"hide_isp": "Piilota palvelimenkohtainen ruutu",
	"preload_images": "Esilataa kuvat",
	"use_one_click_nsfw": "Avaa NSFW-liitteet yhdellä painalluksella",
	"hide_post_stats": "Piilota viestien statistiikka (esim. tykkäysten määrä)",
	"hide_user_stats": "Piilota käyttäjien statistiikka (esim. seuraajien määrä)",
	"import_followers_from_a_csv_file": "Tuo seuraukset CSV-tiedostosta",
	"import_theme": "Tuo tallennettu teema",
	"inputRadius": "Syöttökentät",
	"checkboxRadius": "Valintalaatikot",
	"instance_default": "(oletus: {value})",
	"instance_default_simple": "(oletus)",
	"interface": "Käyttöliittymä",
	"interfaceLanguage": "Käyttöliittymän kieli",
	"invalid_theme_imported": "Tuotu tallennettu teema on epäkelpo, muutoksia ei tehty nykyiseen teemaasi.",
	"limited_availability": "Ei saatavilla selaimessasi",
	"links": "Linkit",
	"lock_account_description": "Vain erikseen hyväksytyt käyttäjät voivat seurata tiliäsi",
	"loop_video": "Uudelleentoista videot",
	"loop_video_silent_only": "Uudelleentoista ainoastaan äänettömät videot (Video-\"giffit\")",
	"play_videos_in_modal": "Toista videot modaalissa",
	"use_contain_fit": "Älä rajaa liitteitä esikatselussa",
	"name": "Nimi",
	"name_bio": "Nimi ja kuvaus",
	"new_password": "Uusi salasana",
	"notification_visibility": "Ilmoitusten näkyvyys",
	"notification_visibility_follows": "Seuraukset",
	"notification_visibility_likes": "Tykkäykset",
	"notification_visibility_mentions": "Maininnat",
	"notification_visibility_repeats": "Toistot",
	+ "notification_visibility_emoji_reactions": "Reaktiot",
	"no_rich_text_description": "Älä näytä tekstin muotoilua.",
	"hide_network_description": "Älä näytä seurauksiani tai seuraajiani",
	"nsfw_clickthrough": "Piilota NSFW liitteet klikkauksen taakse",
	"oauth_tokens": "OAuth-merkit",
	"token": "Token",
	"refresh_token": "Päivitä token",
	"valid_until": "Voimassa asti",
	"revoke_token": "Peruuttaa",
	"panelRadius": "Ruudut",
	"pause_on_unfocused": "Pysäytä automaattinen viestien näyttö välilehden ollessa pois fokuksesta",
	"presets": "Valmiit teemat",
	"profile_background": "Taustakuva",
	"profile_banner": "Juliste",
	"profile_tab": "Profiili",
	"radii_help": "Aseta reunojen pyöristys (pikseleinä)",
	"replies_in_timeline": "Keskustelut aikajanalla",
	"reply_link_preview": "Keskusteluiden vastauslinkkien esikatselu",
	"reply_visibility_all": "Näytä kaikki vastaukset",
	"reply_visibility_following": "Näytä vain vastaukset minulle tai seuraamilleni käyttäjille",
	"reply_visibility_self": "Näytä vain vastaukset minulle",
	"saving_err": "Virhe tallentaessa asetuksia",
	"saving_ok": "Asetukset tallennettu",
	"security_tab": "Tietoturva",
	"scope_copy": "Kopioi näkyvyysrajaus vastatessa (Yksityisviestit aina kopioivat)",
	"set_new_avatar": "Aseta uusi profiilikuva",
	"set_new_profile_background": "Aseta uusi taustakuva",
	"set_new_profile_banner": "Aseta uusi juliste",
	"settings": "Asetukset",
	"subject_input_always_show": "Näytä aihe-kenttä",
	"subject_line_behavior": "Aihe-kentän kopiointi",
	"subject_line_email": "Kuten sähköposti: \"re: aihe\"",
	"subject_line_mastodon": "Kopioi sellaisenaan",
	"subject_line_noop": "Älä kopioi",
	"stop_gifs": "Toista giffit vain kohdistaessa",
	"streaming": "Näytä uudet viestit automaattisesti ollessasi ruudun huipulla",
	"text": "Teksti",
	"theme": "Teema",
	"theme_help": "Käytä heksadesimaalivärejä muokataksesi väriteemaasi.",
	"theme_help_v2_1": "Voit asettaa tiettyjen osien värin tai läpinäkyvyyden täyttämällä valintalaatikon, käytä \"Tyhjennä kaikki\"-nappia tyhjentääksesi kaiken.",
	"theme_help_v2_2": "Ikonit kenttien alla ovat kontrasti-indikaattoreita, lisätietoa kohdistamalla. Käyttäessä läpinäkyvyyttä ne näyttävät pahimman skenaarion.",
	"tooltipRadius": "Ohje- tai huomioviestit",
	"user_settings": "Käyttäjän asetukset",
	"values": {
	"false": "pois päältä",
	"true": "päällä"
	}
	},
	"time": {
	"day": "{0} päivä",
	"days": "{0} päivää",
	"day_short": "{0}pv",
	"days_short": "{0}pv",
	"hour": "{0} tunti",
	"hours": "{0} tuntia",
	"hour_short": "{0}t",
	"hours_short": "{0}t",
	"in_future": "{0} tulevaisuudessa",
	"in_past": "{0} sitten",
	"minute": "{0} minuutti",
	"minutes": "{0} minuuttia",
	"minute_short": "{0}min",
	"minutes_short": "{0}min",
	"month": "{0} kuukausi",
	"months": "{0} kuukautta",
	"month_short": "{0}kk",
	"months_short": "{0}kk",
	"now": "nyt",
	"now_short": "juuri nyt",
	"second": "{0} sekunti",
	"seconds": "{0} sekuntia",
	"second_short": "{0}s",
	"seconds_short": "{0}s",
	"week": "{0} viikko",
	"weeks": "{0} viikkoa",
	"week_short": "{0}vk",
	"weeks_short": "{0}vk",
	"year": "{0} vuosi",
	"years": "{0} vuotta",
	"year_short": "{0}v",
	"years_short": "{0}v"
	},
	"timeline": {
	"collapse": "Sulje",
	"conversation": "Keskustelu",
	"error_fetching": "Virhe ladatessa viestejä",
	"load_older": "Lataa vanhempia viestejä",
	"no_retweet_hint": "Viesti ei ole julkinen, eikä sitä voi toistaa",
	"repeated": "toisti",
	"show_new": "Näytä uudet",
	"up_to_date": "Ajantasalla",
	"no_more_statuses": "Ei enempää viestejä"
	},
	"status": {
	"favorites": "Tykkäykset",
	"repeats": "Toistot",
	"delete": "Poista",
	"pin": "Kiinnitä profiiliisi",
	"unpin": "Poista kiinnitys",
	"pinned": "Kiinnitetty",
	"delete_confirm": "Haluatko varmasti postaa viestin?",
	"reply_to": "Vastaus",
	"replies_list": "Vastaukset:",
	"mute_conversation": "Hiljennä keskustelu",
	"unmute_conversation": "Poista hiljennys"
	},
	"user_card": {
	"approve": "Hyväksy",
	"block": "Estä",
	"blocked": "Estetty!",
	"deny": "Älä hyväksy",
	"follow": "Seuraa",
	"follow_sent": "Pyyntö lähetetty!",
	"follow_progress": "Pyydetään...",
	"follow_again": "Lähetä pyyntö uudestaan",
	"follow_unfollow": "Älä seuraa",
	"followees": "Seuraa",
	"followers": "Seuraajat",
	"following": "Seuraat!",
	"follows_you": "Seuraa sinua!",
	"its_you": "Sinun tili!",
	"mute": "Hiljennä",
	"muted": "Hiljennetty",
	"per_day": "päivässä",
	"remote_follow": "Seuraa muualta",
	"statuses": "Viestit"
	},
	"user_profile": {
	"timeline_title": "Käyttäjän aikajana"
	},
	"who_to_follow": {
	"more": "Lisää",
	"who_to_follow": "Seurausehdotukset"
	},
	"tool_tip": {
	"media_upload": "Lataa tiedosto",
	"repeat": "Toista",
	"reply": "Vastaa",
	"favorite": "Tykkää",
	"user_settings": "Käyttäjäasetukset"
	},
	"upload":{
	"error": {
	"base": "Lataus epäonnistui.",
	"file_too_big": "Tiedosto liian suuri [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
	"default": "Yritä uudestaan myöhemmin"
	},
	"file_size_units": {
	"B": "tavua",
	"KiB": "kt",
	"MiB": "Mt",
	"GiB": "Gt",
	"TiB": "Tt"
	}
	}
	}
	diff --git a/src/modules/config.js b/src/modules/config.js
	index eb763c1008..e6b373b440 100644
	--- a/src/modules/config.js
	+++ b/src/modules/config.js
	@@ -1,109 +1,111 @@
	import { set, delete as del } from 'vue'
	import { setPreset, applyTheme } from '../services/style_setter/style_setter.js'

	const browserLocale = (window.navigator.language \|\| 'en').split('-')[0]

	export const defaultState = {
	colors: {},
	theme: undefined,
	customTheme: undefined,
	customThemeSource: undefined,
	hideISP: false,
	// bad name: actually hides posts of muted USERS
	hideMutedPosts: undefined, // instance default
	collapseMessageWithSubject: undefined, // instance default
	padEmoji: true,
	hideAttachments: false,
	hideAttachmentsInConv: false,
	maxThumbnails: 16,
	hideNsfw: true,
	preloadImage: true,
	loopVideo: true,
	loopVideoSilentOnly: true,
	autoLoad: true,
	streaming: false,
	hoverPreview: true,
	+ emojiReactionsOnTimeline: true,
	autohideFloatingPostButton: false,
	pauseOnUnfocused: true,
	stopGifs: false,
	replyVisibility: 'all',
	notificationVisibility: {
	follows: true,
	mentions: true,
	likes: true,
	repeats: true,
	- moves: true
	+ moves: true,
	+ emojiReactions: false
	},
	webPushNotifications: false,
	muteWords: [],
	highlight: {},
	interfaceLanguage: browserLocale,
	hideScopeNotice: false,
	useStreamingApi: false,
	scopeCopy: undefined, // instance default
	subjectLineBehavior: undefined, // instance default
	alwaysShowSubjectInput: undefined, // instance default
	postContentType: undefined, // instance default
	minimalScopesMode: undefined, // instance default
	// This hides statuses filtered via a word filter
	hideFilteredStatuses: undefined, // instance default
	playVideosInModal: false,
	useOneClickNsfw: false,
	useContainFit: false,
	greentext: undefined, // instance default
	hidePostStats: undefined, // instance default
	hideUserStats: undefined // instance default
	}

	// caching the instance default properties
	export const instanceDefaultProperties = Object.entries(defaultState)
	.filter(([key, value]) => value === undefined)
	.map(([key, value]) => key)

	const config = {
	state: defaultState,
	getters: {
	mergedConfig (state, getters, rootState, rootGetters) {
	const { instance } = rootState
	return {
	...state,
	...instanceDefaultProperties
	.map(key => [key, state[key] === undefined
	? instance[key]
	: state[key]
	])
	.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
	}
	}
	},
	mutations: {
	setOption (state, { name, value }) {
	set(state, name, value)
	},
	setHighlight (state, { user, color, type }) {
	const data = this.state.config.highlight[user]
	if (color \|\| type) {
	set(state.highlight, user, { color: color \|\| data.color, type: type \|\| data.type })
	} else {
	del(state.highlight, user)
	}
	}
	},
	actions: {
	setHighlight ({ commit, dispatch }, { user, color, type }) {
	commit('setHighlight', { user, color, type })
	},
	setOption ({ commit, dispatch }, { name, value }) {
	commit('setOption', { name, value })
	switch (name) {
	case 'theme':
	setPreset(value)
	break
	case 'customTheme':
	applyTheme(value)
	}
	}
	}
	}

	export default config
	diff --git a/src/modules/statuses.js b/src/modules/statuses.js
	index ea0c1749db..25b62ac7fa 100644
	--- a/src/modules/statuses.js
	+++ b/src/modules/statuses.js
	@@ -1,727 +1,741 @@
	import {
	remove,
	slice,
	each,
	findIndex,
	find,
	maxBy,
	minBy,
	merge,
	first,
	last,
	isArray,
	omitBy
	} from 'lodash'
	import { set } from 'vue'
	import apiService from '../services/api/api.service.js'
	// import parse from '../services/status_parser/status_parser.js'

	const emptyTl = (userId = 0) => ({
	statuses: [],
	statusesObject: {},
	faves: [],
	visibleStatuses: [],
	visibleStatusesObject: {},
	newStatusCount: 0,
	maxId: 0,
	minId: 0,
	minVisibleId: 0,
	loading: false,
	followers: [],
	friends: [],
	userId,
	flushMarker: 0
	})

	const emptyNotifications = () => ({
	desktopNotificationSilence: true,
	maxId: 0,
	minId: Number.POSITIVE_INFINITY,
	data: [],
	idStore: {},
	loading: false,
	error: false
	})

	export const defaultState = () => ({
	allStatuses: [],
	allStatusesObject: {},
	conversationsObject: {},
	maxId: 0,
	notifications: emptyNotifications(),
	favorites: new Set(),
	error: false,
	errorData: null,
	timelines: {
	mentions: emptyTl(),
	public: emptyTl(),
	user: emptyTl(),
	favorites: emptyTl(),
	media: emptyTl(),
	publicAndExternal: emptyTl(),
	friends: emptyTl(),
	tag: emptyTl(),
	dms: emptyTl()
	}
	})

	export const prepareStatus = (status) => {
	// Set deleted flag
	status.deleted = false

	// To make the array reactive
	status.attachments = status.attachments \|\| []

	return status
	}

	const visibleNotificationTypes = (rootState) => {
	return [
	rootState.config.notificationVisibility.likes && 'like',
	rootState.config.notificationVisibility.mentions && 'mention',
	rootState.config.notificationVisibility.repeats && 'repeat',
	rootState.config.notificationVisibility.follows && 'follow',
	- rootState.config.notificationVisibility.moves && 'move'
	+ rootState.config.notificationVisibility.moves && 'move',
	+ rootState.config.notificationVisibility.emojiReactions && 'pleroma:emoji_reactions'
	].filter(_ => _)
	}

	const mergeOrAdd = (arr, obj, item) => {
	const oldItem = obj[item.id]

	if (oldItem) {
	// We already have this, so only merge the new info.
	// We ignore null values to avoid overwriting existing properties with missing data
	// we also skip 'user' because that is handled by users module
	merge(oldItem, omitBy(item, (v, k) => v === null \|\| k === 'user'))
	// Reactivity fix.
	oldItem.attachments.splice(oldItem.attachments.length)
	return { item: oldItem, new: false }
	} else {
	// This is a new item, prepare it
	prepareStatus(item)
	arr.push(item)
	set(obj, item.id, item)
	return { item, new: true }
	}
	}

	const sortById = (a, b) => {
	const seqA = Number(a.id)
	const seqB = Number(b.id)
	const isSeqA = !Number.isNaN(seqA)
	const isSeqB = !Number.isNaN(seqB)
	if (isSeqA && isSeqB) {
	return seqA > seqB ? -1 : 1
	} else if (isSeqA && !isSeqB) {
	return 1
	} else if (!isSeqA && isSeqB) {
	return -1
	} else {
	return a.id > b.id ? -1 : 1
	}
	}

	const sortTimeline = (timeline) => {
	timeline.visibleStatuses = timeline.visibleStatuses.sort(sortById)
	timeline.statuses = timeline.statuses.sort(sortById)
	timeline.minVisibleId = (last(timeline.visibleStatuses) \|\| {}).id
	return timeline
	}

	// Add status to the global storages (arrays and objects maintaining statuses) except timelines
	const addStatusToGlobalStorage = (state, data) => {
	const result = mergeOrAdd(state.allStatuses, state.allStatusesObject, data)
	if (result.new) {
	// Add to conversation
	const status = result.item
	const conversationsObject = state.conversationsObject
	const conversationId = status.statusnet_conversation_id
	if (conversationsObject[conversationId]) {
	conversationsObject[conversationId].push(status)
	} else {
	set(conversationsObject, conversationId, [status])
	}
	}
	return result
	}

	// Remove status from the global storages (arrays and objects maintaining statuses) except timelines
	const removeStatusFromGlobalStorage = (state, status) => {
	remove(state.allStatuses, { id: status.id })

	// TODO: Need to remove from allStatusesObject?

	// Remove possible notification
	remove(state.notifications.data, ({ action: { id } }) => id === status.id)

	// Remove from conversation
	const conversationId = status.statusnet_conversation_id
	if (state.conversationsObject[conversationId]) {
	remove(state.conversationsObject[conversationId], { id: status.id })
	}
	}

	const addNewStatuses = (state, { statuses, showImmediately = false, timeline, user = {},
	noIdUpdate = false, userId }) => {
	// Sanity check
	if (!isArray(statuses)) {
	return false
	}

	const allStatuses = state.allStatuses
	const timelineObject = state.timelines[timeline]

	const maxNew = statuses.length > 0 ? maxBy(statuses, 'id').id : 0
	const minNew = statuses.length > 0 ? minBy(statuses, 'id').id : 0
	const newer = timeline && (maxNew > timelineObject.maxId \|\| timelineObject.maxId === 0) && statuses.length > 0
	const older = timeline && (minNew < timelineObject.minId \|\| timelineObject.minId === 0) && statuses.length > 0

	if (!noIdUpdate && newer) {
	timelineObject.maxId = maxNew
	}
	if (!noIdUpdate && older) {
	timelineObject.minId = minNew
	}

	// This makes sure that user timeline won't get data meant for other
	// user. I.e. opening different user profiles makes request which could
	// return data late after user already viewing different user profile
	if ((timeline === 'user' \|\| timeline === 'media') && timelineObject.userId !== userId) {
	return
	}

	const addStatus = (data, showImmediately, addToTimeline = true) => {
	const result = addStatusToGlobalStorage(state, data)
	const status = result.item

	if (result.new) {
	// We are mentioned in a post
	if (status.type === 'status' && find(status.attentions, { id: user.id })) {
	const mentions = state.timelines.mentions

	// Add the mention to the mentions timeline
	if (timelineObject !== mentions) {
	mergeOrAdd(mentions.statuses, mentions.statusesObject, status)
	mentions.newStatusCount += 1

	sortTimeline(mentions)
	}
	}
	if (status.visibility === 'direct') {
	const dms = state.timelines.dms

	mergeOrAdd(dms.statuses, dms.statusesObject, status)
	dms.newStatusCount += 1

	sortTimeline(dms)
	}
	}

	// Decide if we should treat the status as new for this timeline.
	let resultForCurrentTimeline
	// Some statuses should only be added to the global status repository.
	if (timeline && addToTimeline) {
	resultForCurrentTimeline = mergeOrAdd(timelineObject.statuses, timelineObject.statusesObject, status)
	}

	if (timeline && showImmediately) {
	// Add it directly to the visibleStatuses, don't change
	// newStatusCount
	mergeOrAdd(timelineObject.visibleStatuses, timelineObject.visibleStatusesObject, status)
	} else if (timeline && addToTimeline && resultForCurrentTimeline.new) {
	// Just change newStatuscount
	timelineObject.newStatusCount += 1
	}

	return status
	}

	const favoriteStatus = (favorite, counter) => {
	const status = find(allStatuses, { id: favorite.in_reply_to_status_id })
	if (status) {
	// This is our favorite, so the relevant bit.
	if (favorite.user.id === user.id) {
	status.favorited = true
	} else {
	status.fave_num += 1
	}
	}
	return status
	}

	const processors = {
	'status': (status) => {
	addStatus(status, showImmediately)
	},
	'retweet': (status) => {
	// RetweetedStatuses are never shown immediately
	const retweetedStatus = addStatus(status.retweeted_status, false, false)

	let retweet
	// If the retweeted status is already there, don't add the retweet
	// to the timeline.
	if (timeline && find(timelineObject.statuses, (s) => {
	if (s.retweeted_status) {
	return s.id === retweetedStatus.id \|\| s.retweeted_status.id === retweetedStatus.id
	} else {
	return s.id === retweetedStatus.id
	}
	})) {
	// Already have it visible (either as the original or another RT), don't add to timeline, don't show.
	retweet = addStatus(status, false, false)
	} else {
	retweet = addStatus(status, showImmediately)
	}

	retweet.retweeted_status = retweetedStatus
	},
	'favorite': (favorite) => {
	// Only update if this is a new favorite.
	// Ignore our own favorites because we get info about likes as response to like request
	if (!state.favorites.has(favorite.id)) {
	state.favorites.add(favorite.id)
	favoriteStatus(favorite)
	}
	},
	'deletion': (deletion) => {
	const uri = deletion.uri
	const status = find(allStatuses, { uri })
	if (!status) {
	return
	}

	removeStatusFromGlobalStorage(state, status)

	if (timeline) {
	remove(timelineObject.statuses, { uri })
	remove(timelineObject.visibleStatuses, { uri })
	}
	},
	'follow': (follow) => {
	// NOOP, it is known status but we don't do anything about it for now
	},
	'default': (unknown) => {
	console.log('unknown status type')
	console.log(unknown)
	}
	}

	each(statuses, (status) => {
	const type = status.type
	const processor = processors[type] \|\| processors['default']
	processor(status)
	})

	// Keep the visible statuses sorted
	if (timeline) {
	sortTimeline(timelineObject)
	}
	}

	const addNewNotifications = (state, { dispatch, notifications, older, visibleNotificationTypes, rootGetters }) => {
	each(notifications, (notification) => {
	if (notification.type !== 'follow' && notification.type !== 'move') {
	notification.action = addStatusToGlobalStorage(state, notification.action).item
	notification.status = notification.status && addStatusToGlobalStorage(state, notification.status).item
	}

	+ if (notification.type === 'pleroma:emoji_reaction') {
	+ dispatch('fetchEmojiReactionsBy', notification.status.id)
	+ }
	+
	// Only add a new notification if we don't have one for the same action
	if (!state.notifications.idStore.hasOwnProperty(notification.id)) {
	state.notifications.maxId = notification.id > state.notifications.maxId
	? notification.id
	: state.notifications.maxId
	state.notifications.minId = notification.id < state.notifications.minId
	? notification.id
	: state.notifications.minId

	state.notifications.data.push(notification)
	state.notifications.idStore[notification.id] = notification

	if ('Notification' in window && window.Notification.permission === 'granted') {
	const notifObj = {}
	const status = notification.status
	const title = notification.from_profile.name
	notifObj.icon = notification.from_profile.profile_image_url
	let i18nString
	switch (notification.type) {
	case 'like':
	i18nString = 'favorited_you'
	break
	case 'repeat':
	i18nString = 'repeated_you'
	break
	case 'follow':
	i18nString = 'followed_you'
	break
	case 'move':
	i18nString = 'migrated_to'
	break
	}

	- if (i18nString) {
	+ if (notification.type === 'pleroma:emoji_reaction') {
	+ notifObj.body = rootGetters.i18n.t('notifications.reacted_with', [notification.emoji])
	+ } else if (i18nString) {
	notifObj.body = rootGetters.i18n.t('notifications.' + i18nString)
	} else {
	notifObj.body = notification.status.text
	}

	// Shows first attached non-nsfw image, if any. Should add configuration for this somehow...
	if (status && status.attachments && status.attachments.length > 0 && !status.nsfw &&
	status.attachments[0].mimetype.startsWith('image/')) {
	notifObj.image = status.attachments[0].url
	}

	if (!notification.seen && !state.notifications.desktopNotificationSilence && visibleNotificationTypes.includes(notification.type)) {
	- let notification = new window.Notification(title, notifObj)
	+ let desktopNotification = new window.Notification(title, notifObj)
	// Chrome is known for not closing notifications automatically
	// according to MDN, anyway.
	- setTimeout(notification.close.bind(notification), 5000)
	+ setTimeout(desktopNotification.close.bind(desktopNotification), 5000)
	}
	}
	} else if (notification.seen) {
	state.notifications.idStore[notification.id].seen = true
	}
	})
	}

	const removeStatus = (state, { timeline, userId }) => {
	const timelineObject = state.timelines[timeline]
	if (userId) {
	remove(timelineObject.statuses, { user: { id: userId } })
	remove(timelineObject.visibleStatuses, { user: { id: userId } })
	timelineObject.minVisibleId = timelineObject.visibleStatuses.length > 0 ? last(timelineObject.visibleStatuses).id : 0
	timelineObject.maxId = timelineObject.statuses.length > 0 ? first(timelineObject.statuses).id : 0
	}
	}

	export const mutations = {
	addNewStatuses,
	addNewNotifications,
	removeStatus,
	showNewStatuses (state, { timeline }) {
	const oldTimeline = (state.timelines[timeline])

	oldTimeline.newStatusCount = 0
	oldTimeline.visibleStatuses = slice(oldTimeline.statuses, 0, 50)
	oldTimeline.minVisibleId = last(oldTimeline.visibleStatuses).id
	oldTimeline.minId = oldTimeline.minVisibleId
	oldTimeline.visibleStatusesObject = {}
	each(oldTimeline.visibleStatuses, (status) => { oldTimeline.visibleStatusesObject[status.id] = status })
	},
	resetStatuses (state) {
	const emptyState = defaultState()
	Object.entries(emptyState).forEach(([key, value]) => {
	state[key] = value
	})
	},
	clearTimeline (state, { timeline, excludeUserId = false }) {
	const userId = excludeUserId ? state.timelines[timeline].userId : undefined
	state.timelines[timeline] = emptyTl(userId)
	},
	clearNotifications (state) {
	state.notifications = emptyNotifications()
	},
	setFavorited (state, { status, value }) {
	const newStatus = state.allStatusesObject[status.id]

	if (newStatus.favorited !== value) {
	if (value) {
	newStatus.fave_num++
	} else {
	newStatus.fave_num--
	}
	}

	newStatus.favorited = value
	},
	setFavoritedConfirm (state, { status, user }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.favorited = status.favorited
	newStatus.fave_num = status.fave_num
	const index = findIndex(newStatus.favoritedBy, { id: user.id })
	if (index !== -1 && !newStatus.favorited) {
	newStatus.favoritedBy.splice(index, 1)
	} else if (index === -1 && newStatus.favorited) {
	newStatus.favoritedBy.push(user)
	}
	},
	setMutedStatus (state, status) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.thread_muted = status.thread_muted

	if (newStatus.thread_muted !== undefined) {
	state.conversationsObject[newStatus.statusnet_conversation_id].forEach(status => { status.thread_muted = newStatus.thread_muted })
	}
	},
	setRetweeted (state, { status, value }) {
	const newStatus = state.allStatusesObject[status.id]

	if (newStatus.repeated !== value) {
	if (value) {
	newStatus.repeat_num++
	} else {
	newStatus.repeat_num--
	}
	}

	newStatus.repeated = value
	},
	setRetweetedConfirm (state, { status, user }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.repeated = status.repeated
	newStatus.repeat_num = status.repeat_num
	const index = findIndex(newStatus.rebloggedBy, { id: user.id })
	if (index !== -1 && !newStatus.repeated) {
	newStatus.rebloggedBy.splice(index, 1)
	} else if (index === -1 && newStatus.repeated) {
	newStatus.rebloggedBy.push(user)
	}
	},
	setDeleted (state, { status }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.deleted = true
	},
	setManyDeleted (state, condition) {
	Object.values(state.allStatusesObject).forEach(status => {
	if (condition(status)) {
	status.deleted = true
	}
	})
	},
	setLoading (state, { timeline, value }) {
	state.timelines[timeline].loading = value
	},
	setNsfw (state, { id, nsfw }) {
	const newStatus = state.allStatusesObject[id]
	newStatus.nsfw = nsfw
	},
	setError (state, { value }) {
	state.error = value
	},
	setErrorData (state, { value }) {
	state.errorData = value
	},
	setNotificationsLoading (state, { value }) {
	state.notifications.loading = value
	},
	setNotificationsError (state, { value }) {
	state.notifications.error = value
	},
	setNotificationsSilence (state, { value }) {
	state.notifications.desktopNotificationSilence = value
	},
	markNotificationsAsSeen (state) {
	each(state.notifications.data, (notification) => {
	notification.seen = true
	})
	},
	queueFlush (state, { timeline, id }) {
	state.timelines[timeline].flushMarker = id
	},
	addRepeats (state, { id, rebloggedByUsers, currentUser }) {
	const newStatus = state.allStatusesObject[id]
	newStatus.rebloggedBy = rebloggedByUsers.filter(_ => _)
	// repeats stats can be incorrect based on polling condition, let's update them using the most recent data
	newStatus.repeat_num = newStatus.rebloggedBy.length
	newStatus.repeated = !!newStatus.rebloggedBy.find(({ id }) => currentUser.id === id)
	},
	addFavs (state, { id, favoritedByUsers, currentUser }) {
	const newStatus = state.allStatusesObject[id]
	newStatus.favoritedBy = favoritedByUsers.filter(_ => _)
	// favorites stats can be incorrect based on polling condition, let's update them using the most recent data
	newStatus.fave_num = newStatus.favoritedBy.length
	newStatus.favorited = !!newStatus.favoritedBy.find(({ id }) => currentUser.id === id)
	},
	addEmojiReactionsBy (state, { id, emojiReactions, currentUser }) {
	const status = state.allStatusesObject[id]
	set(status, 'emoji_reactions', emojiReactions)
	},
	addOwnReaction (state, { id, emoji, currentUser }) {
	const status = state.allStatusesObject[id]
	- const reactionIndex = findIndex(status.emoji_reactions, { emoji })
	- const reaction = status.emoji_reactions[reactionIndex] \|\| { emoji, count: 0, accounts: [] }
	+ const reactionIndex = findIndex(status.emoji_reactions, { name: emoji })
	+ const reaction = status.emoji_reactions[reactionIndex] \|\| { name: emoji, count: 0, accounts: [] }

	const newReaction = {
	...reaction,
	count: reaction.count + 1,
	+ me: true,
	accounts: [
	...reaction.accounts,
	currentUser
	]
	}

	// Update count of existing reaction if it exists, otherwise append at the end
	if (reactionIndex >= 0) {
	set(status.emoji_reactions, reactionIndex, newReaction)
	} else {
	set(status, 'emoji_reactions', [...status.emoji_reactions, newReaction])
	}
	},
	removeOwnReaction (state, { id, emoji, currentUser }) {
	const status = state.allStatusesObject[id]
	- const reactionIndex = findIndex(status.emoji_reactions, { emoji })
	+ const reactionIndex = findIndex(status.emoji_reactions, { name: emoji })
	if (reactionIndex < 0) return

	const reaction = status.emoji_reactions[reactionIndex]
	+ const accounts = reaction.accounts \|\| []

	const newReaction = {
	...reaction,
	count: reaction.count - 1,
	- accounts: reaction.accounts.filter(acc => acc.id === currentUser.id)
	+ me: false,
	+ accounts: accounts.filter(acc => acc.id !== currentUser.id)
	}

	if (newReaction.count > 0) {
	set(status.emoji_reactions, reactionIndex, newReaction)
	} else {
	- set(status, 'emoji_reactions', status.emoji_reactions.filter(r => r.emoji !== emoji))
	+ set(status, 'emoji_reactions', status.emoji_reactions.filter(r => r.name !== emoji))
	}
	},
	updateStatusWithPoll (state, { id, poll }) {
	const status = state.allStatusesObject[id]
	status.poll = poll
	}
	}

	const statuses = {
	state: defaultState(),
	actions: {
	addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false, userId }) {
	commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser, userId })
	},
	addNewNotifications ({ rootState, commit, dispatch, rootGetters }, { notifications, older }) {
	commit('addNewNotifications', { visibleNotificationTypes: visibleNotificationTypes(rootState), dispatch, notifications, older, rootGetters })
	},
	setError ({ rootState, commit }, { value }) {
	commit('setError', { value })
	},
	setErrorData ({ rootState, commit }, { value }) {
	commit('setErrorData', { value })
	},
	setNotificationsLoading ({ rootState, commit }, { value }) {
	commit('setNotificationsLoading', { value })
	},
	setNotificationsError ({ rootState, commit }, { value }) {
	commit('setNotificationsError', { value })
	},
	setNotificationsSilence ({ rootState, commit }, { value }) {
	commit('setNotificationsSilence', { value })
	},
	fetchStatus ({ rootState, dispatch }, id) {
	rootState.api.backendInteractor.fetchStatus({ id })
	.then((status) => dispatch('addNewStatuses', { statuses: [status] }))
	},
	deleteStatus ({ rootState, commit }, status) {
	commit('setDeleted', { status })
	apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })
	},
	markStatusesAsDeleted ({ commit }, condition) {
	commit('setManyDeleted', condition)
	},
	favorite ({ rootState, commit }, status) {
	// Optimistic favoriting...
	commit('setFavorited', { status, value: true })
	rootState.api.backendInteractor.favorite({ id: status.id })
	.then(status => commit('setFavoritedConfirm', { status, user: rootState.users.currentUser }))
	},
	unfavorite ({ rootState, commit }, status) {
	// Optimistic unfavoriting...
	commit('setFavorited', { status, value: false })
	rootState.api.backendInteractor.unfavorite({ id: status.id })
	.then(status => commit('setFavoritedConfirm', { status, user: rootState.users.currentUser }))
	},
	fetchPinnedStatuses ({ rootState, dispatch }, userId) {
	rootState.api.backendInteractor.fetchPinnedStatuses({ id: userId })
	.then(statuses => dispatch('addNewStatuses', { statuses, timeline: 'user', userId, showImmediately: true, noIdUpdate: true }))
	},
	pinStatus ({ rootState, dispatch }, statusId) {
	return rootState.api.backendInteractor.pinOwnStatus({ id: statusId })
	.then((status) => dispatch('addNewStatuses', { statuses: [status] }))
	},
	unpinStatus ({ rootState, dispatch }, statusId) {
	rootState.api.backendInteractor.unpinOwnStatus({ id: statusId })
	.then((status) => dispatch('addNewStatuses', { statuses: [status] }))
	},
	muteConversation ({ rootState, commit }, statusId) {
	return rootState.api.backendInteractor.muteConversation({ id: statusId })
	.then((status) => commit('setMutedStatus', status))
	},
	unmuteConversation ({ rootState, commit }, statusId) {
	return rootState.api.backendInteractor.unmuteConversation({ id: statusId })
	.then((status) => commit('setMutedStatus', status))
	},
	retweet ({ rootState, commit }, status) {
	// Optimistic retweeting...
	commit('setRetweeted', { status, value: true })
	rootState.api.backendInteractor.retweet({ id: status.id })
	.then(status => commit('setRetweetedConfirm', { status: status.retweeted_status, user: rootState.users.currentUser }))
	},
	unretweet ({ rootState, commit }, status) {
	// Optimistic unretweeting...
	commit('setRetweeted', { status, value: false })
	rootState.api.backendInteractor.unretweet({ id: status.id })
	.then(status => commit('setRetweetedConfirm', { status, user: rootState.users.currentUser }))
	},
	queueFlush ({ rootState, commit }, { timeline, id }) {
	commit('queueFlush', { timeline, id })
	},
	markNotificationsAsSeen ({ rootState, commit }) {
	commit('markNotificationsAsSeen')
	apiService.markNotificationsAsSeen({
	id: rootState.statuses.notifications.maxId,
	credentials: rootState.users.currentUser.credentials
	})
	},
	fetchFavsAndRepeats ({ rootState, commit }, id) {
	Promise.all([
	rootState.api.backendInteractor.fetchFavoritedByUsers({ id }),
	rootState.api.backendInteractor.fetchRebloggedByUsers({ id })
	]).then(([favoritedByUsers, rebloggedByUsers]) => {
	commit('addFavs', { id, favoritedByUsers, currentUser: rootState.users.currentUser })
	commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser })
	})
	},
	reactWithEmoji ({ rootState, dispatch, commit }, { id, emoji }) {
	const currentUser = rootState.users.currentUser
	+ if (!currentUser) return
	+
	commit('addOwnReaction', { id, emoji, currentUser })
	rootState.api.backendInteractor.reactWithEmoji({ id, emoji }).then(
	- status => {
	+ ok => {
	dispatch('fetchEmojiReactionsBy', id)
	}
	)
	},
	unreactWithEmoji ({ rootState, dispatch, commit }, { id, emoji }) {
	const currentUser = rootState.users.currentUser
	+ if (!currentUser) return
	+
	commit('removeOwnReaction', { id, emoji, currentUser })
	rootState.api.backendInteractor.unreactWithEmoji({ id, emoji }).then(
	- status => {
	+ ok => {
	dispatch('fetchEmojiReactionsBy', id)
	}
	)
	},
	fetchEmojiReactionsBy ({ rootState, commit }, id) {
	rootState.api.backendInteractor.fetchEmojiReactions({ id }).then(
	emojiReactions => {
	commit('addEmojiReactionsBy', { id, emojiReactions, currentUser: rootState.users.currentUser })
	}
	)
	},
	fetchFavs ({ rootState, commit }, id) {
	rootState.api.backendInteractor.fetchFavoritedByUsers({ id })
	.then(favoritedByUsers => commit('addFavs', { id, favoritedByUsers, currentUser: rootState.users.currentUser }))
	},
	fetchRepeats ({ rootState, commit }, id) {
	rootState.api.backendInteractor.fetchRebloggedByUsers({ id })
	.then(rebloggedByUsers => commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser }))
	},
	search (store, { q, resolve, limit, offset, following }) {
	return store.rootState.api.backendInteractor.search2({ q, resolve, limit, offset, following })
	.then((data) => {
	store.commit('addNewUsers', data.accounts)
	store.commit('addNewStatuses', { statuses: data.statuses })
	return data
	})
	}
	},
	mutations
	}

	export default statuses
	diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
	index 11aa06750f..20eaa9a0f9 100644
	--- a/src/services/api/api.service.js
	+++ b/src/services/api/api.service.js
	@@ -1,1170 +1,1176 @@
	import { each, map, concat, last, get } from 'lodash'
	import { parseStatus, parseUser, parseNotification, parseAttachment } from '../entity_normalizer/entity_normalizer.service.js'
	import 'whatwg-fetch'
	import { RegistrationError, StatusCodeError } from '../errors/errors'

	/* eslint-env browser */
	const QVITTER_USER_NOTIFICATIONS_READ_URL = '/api/qvitter/statuses/notifications/read.json'
	const BLOCKS_IMPORT_URL = '/api/pleroma/blocks_import'
	const FOLLOW_IMPORT_URL = '/api/pleroma/follow_import'
	const DELETE_ACCOUNT_URL = '/api/pleroma/delete_account'
	const CHANGE_EMAIL_URL = '/api/pleroma/change_email'
	const CHANGE_PASSWORD_URL = '/api/pleroma/change_password'
	const TAG_USER_URL = '/api/pleroma/admin/users/tag'
	const PERMISSION_GROUP_URL = (screenName, right) => `/api/pleroma/admin/users/${screenName}/permission_group/${right}`
	const ACTIVATE_USER_URL = '/api/pleroma/admin/users/activate'
	const DEACTIVATE_USER_URL = '/api/pleroma/admin/users/deactivate'
	const ADMIN_USERS_URL = '/api/pleroma/admin/users'
	const SUGGESTIONS_URL = '/api/v1/suggestions'
	const NOTIFICATION_SETTINGS_URL = '/api/pleroma/notification_settings'

	const MFA_SETTINGS_URL = '/api/pleroma/accounts/mfa'
	const MFA_BACKUP_CODES_URL = '/api/pleroma/accounts/mfa/backup_codes'

	const MFA_SETUP_OTP_URL = '/api/pleroma/accounts/mfa/setup/totp'
	const MFA_CONFIRM_OTP_URL = '/api/pleroma/accounts/mfa/confirm/totp'
	const MFA_DISABLE_OTP_URL = '/api/pleroma/accounts/mfa/totp'

	const MASTODON_LOGIN_URL = '/api/v1/accounts/verify_credentials'
	const MASTODON_REGISTRATION_URL = '/api/v1/accounts'
	const MASTODON_USER_FAVORITES_TIMELINE_URL = '/api/v1/favourites'
	const MASTODON_USER_NOTIFICATIONS_URL = '/api/v1/notifications'
	const MASTODON_FAVORITE_URL = id => `/api/v1/statuses/${id}/favourite`
	const MASTODON_UNFAVORITE_URL = id => `/api/v1/statuses/${id}/unfavourite`
	const MASTODON_RETWEET_URL = id => `/api/v1/statuses/${id}/reblog`
	const MASTODON_UNRETWEET_URL = id => `/api/v1/statuses/${id}/unreblog`
	const MASTODON_DELETE_URL = id => `/api/v1/statuses/${id}`
	const MASTODON_FOLLOW_URL = id => `/api/v1/accounts/${id}/follow`
	const MASTODON_UNFOLLOW_URL = id => `/api/v1/accounts/${id}/unfollow`
	const MASTODON_FOLLOWING_URL = id => `/api/v1/accounts/${id}/following`
	const MASTODON_FOLLOWERS_URL = id => `/api/v1/accounts/${id}/followers`
	const MASTODON_FOLLOW_REQUESTS_URL = '/api/v1/follow_requests'
	const MASTODON_APPROVE_USER_URL = id => `/api/v1/follow_requests/${id}/authorize`
	const MASTODON_DENY_USER_URL = id => `/api/v1/follow_requests/${id}/reject`
	const MASTODON_DIRECT_MESSAGES_TIMELINE_URL = '/api/v1/timelines/direct'
	const MASTODON_PUBLIC_TIMELINE = '/api/v1/timelines/public'
	const MASTODON_USER_HOME_TIMELINE_URL = '/api/v1/timelines/home'
	const MASTODON_STATUS_URL = id => `/api/v1/statuses/${id}`
	const MASTODON_STATUS_CONTEXT_URL = id => `/api/v1/statuses/${id}/context`
	const MASTODON_USER_URL = '/api/v1/accounts'
	const MASTODON_USER_RELATIONSHIPS_URL = '/api/v1/accounts/relationships'
	const MASTODON_USER_TIMELINE_URL = id => `/api/v1/accounts/${id}/statuses`
	const MASTODON_TAG_TIMELINE_URL = tag => `/api/v1/timelines/tag/${tag}`
	const MASTODON_USER_BLOCKS_URL = '/api/v1/blocks/'
	const MASTODON_USER_MUTES_URL = '/api/v1/mutes/'
	const MASTODON_BLOCK_USER_URL = id => `/api/v1/accounts/${id}/block`
	const MASTODON_UNBLOCK_USER_URL = id => `/api/v1/accounts/${id}/unblock`
	const MASTODON_MUTE_USER_URL = id => `/api/v1/accounts/${id}/mute`
	const MASTODON_UNMUTE_USER_URL = id => `/api/v1/accounts/${id}/unmute`
	const MASTODON_SUBSCRIBE_USER = id => `/api/v1/pleroma/accounts/${id}/subscribe`
	const MASTODON_UNSUBSCRIBE_USER = id => `/api/v1/pleroma/accounts/${id}/unsubscribe`
	const MASTODON_POST_STATUS_URL = '/api/v1/statuses'
	const MASTODON_MEDIA_UPLOAD_URL = '/api/v1/media'
	const MASTODON_VOTE_URL = id => `/api/v1/polls/${id}/votes`
	const MASTODON_POLL_URL = id => `/api/v1/polls/${id}`
	const MASTODON_STATUS_FAVORITEDBY_URL = id => `/api/v1/statuses/${id}/favourited_by`
	const MASTODON_STATUS_REBLOGGEDBY_URL = id => `/api/v1/statuses/${id}/reblogged_by`
	const MASTODON_PROFILE_UPDATE_URL = '/api/v1/accounts/update_credentials'
	const MASTODON_REPORT_USER_URL = '/api/v1/reports'
	const MASTODON_PIN_OWN_STATUS = id => `/api/v1/statuses/${id}/pin`
	const MASTODON_UNPIN_OWN_STATUS = id => `/api/v1/statuses/${id}/unpin`
	const MASTODON_MUTE_CONVERSATION = id => `/api/v1/statuses/${id}/mute`
	const MASTODON_UNMUTE_CONVERSATION = id => `/api/v1/statuses/${id}/unmute`
	const MASTODON_SEARCH_2 = `/api/v2/search`
	const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search'
	const MASTODON_DOMAIN_BLOCKS_URL = '/api/v1/domain_blocks'
	const MASTODON_STREAMING = '/api/v1/streaming'
	-const PLEROMA_EMOJI_REACTIONS_URL = id => `/api/v1/pleroma/statuses/${id}/emoji_reactions_by`
	-const PLEROMA_EMOJI_REACT_URL = id => `/api/v1/pleroma/statuses/${id}/react_with_emoji`
	-const PLEROMA_EMOJI_UNREACT_URL = id => `/api/v1/pleroma/statuses/${id}/unreact_with_emoji`
	+const PLEROMA_EMOJI_REACTIONS_URL = id => `/api/v1/pleroma/statuses/${id}/reactions`
	+const PLEROMA_EMOJI_REACT_URL = (id, emoji) => `/api/v1/pleroma/statuses/${id}/reactions/${emoji}`
	+const PLEROMA_EMOJI_UNREACT_URL = (id, emoji) => `/api/v1/pleroma/statuses/${id}/reactions/${emoji}`

	const oldfetch = window.fetch

	let fetch = (url, options) => {
	options = options \|\| {}
	const baseUrl = ''
	const fullUrl = baseUrl + url
	options.credentials = 'same-origin'
	return oldfetch(fullUrl, options)
	}

	const promisedRequest = ({ method, url, params, payload, credentials, headers = {} }) => {
	const options = {
	method,
	headers: {
	'Accept': 'application/json',
	'Content-Type': 'application/json',
	...headers
	}
	}
	if (params) {
	url += '?' + Object.entries(params)
	.map(([key, value]) => encodeURIComponent(key) + '=' + encodeURIComponent(value))
	.join('&')
	}
	if (payload) {
	options.body = JSON.stringify(payload)
	}
	if (credentials) {
	options.headers = {
	...options.headers,
	...authHeaders(credentials)
	}
	}
	return fetch(url, options)
	.then((response) => {
	return new Promise((resolve, reject) => response.json()
	.then((json) => {
	if (!response.ok) {
	return reject(new StatusCodeError(response.status, json, { url, options }, response))
	}
	return resolve(json)
	}))
	})
	}

	const updateNotificationSettings = ({ credentials, settings }) => {
	const form = new FormData()

	each(settings, (value, key) => {
	form.append(key, value)
	})

	return fetch(NOTIFICATION_SETTINGS_URL, {
	headers: authHeaders(credentials),
	method: 'PUT',
	body: form
	}).then((data) => data.json())
	}

	const updateAvatar = ({ credentials, avatar }) => {
	const form = new FormData()
	form.append('avatar', avatar)
	return fetch(MASTODON_PROFILE_UPDATE_URL, {
	headers: authHeaders(credentials),
	method: 'PATCH',
	body: form
	}).then((data) => data.json())
	.then((data) => parseUser(data))
	}

	const updateBg = ({ credentials, background }) => {
	const form = new FormData()
	form.append('pleroma_background_image', background)
	return fetch(MASTODON_PROFILE_UPDATE_URL, {
	headers: authHeaders(credentials),
	method: 'PATCH',
	body: form
	})
	.then((data) => data.json())
	.then((data) => parseUser(data))
	}

	const updateBanner = ({ credentials, banner }) => {
	const form = new FormData()
	form.append('header', banner)
	return fetch(MASTODON_PROFILE_UPDATE_URL, {
	headers: authHeaders(credentials),
	method: 'PATCH',
	body: form
	}).then((data) => data.json())
	.then((data) => parseUser(data))
	}

	const updateProfile = ({ credentials, params }) => {
	return promisedRequest({
	url: MASTODON_PROFILE_UPDATE_URL,
	method: 'PATCH',
	payload: params,
	credentials
	}).then((data) => parseUser(data))
	}

	// Params needed:
	// nickname
	// email
	// fullname
	// password
	// password_confirm
	//
	// Optional
	// bio
	// homepage
	// location
	// token
	const register = ({ params, credentials }) => {
	const { nickname, ...rest } = params
	return fetch(MASTODON_REGISTRATION_URL, {
	method: 'POST',
	headers: {
	...authHeaders(credentials),
	'Content-Type': 'application/json'
	},
	body: JSON.stringify({
	nickname,
	locale: 'en_US',
	agreement: true,
	...rest
	})
	})
	.then((response) => {
	if (response.ok) {
	return response.json()
	} else {
	return response.json().then((error) => { throw new RegistrationError(error) })
	}
	})
	}

	const getCaptcha = () => fetch('/api/pleroma/captcha').then(resp => resp.json())

	const authHeaders = (accessToken) => {
	if (accessToken) {
	return { 'Authorization': `Bearer ${accessToken}` }
	} else {
	return { }
	}
	}

	const followUser = ({ id, credentials, ...options }) => {
	let url = MASTODON_FOLLOW_URL(id)
	const form = {}
	if (options.reblogs !== undefined) { form['reblogs'] = options.reblogs }
	return fetch(url, {
	body: JSON.stringify(form),
	headers: {
	...authHeaders(credentials),
	'Content-Type': 'application/json'
	},
	method: 'POST'
	}).then((data) => data.json())
	}

	const unfollowUser = ({ id, credentials }) => {
	let url = MASTODON_UNFOLLOW_URL(id)
	return fetch(url, {
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const pinOwnStatus = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_PIN_OWN_STATUS(id), credentials, method: 'POST' })
	.then((data) => parseStatus(data))
	}

	const unpinOwnStatus = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_UNPIN_OWN_STATUS(id), credentials, method: 'POST' })
	.then((data) => parseStatus(data))
	}

	const muteConversation = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_MUTE_CONVERSATION(id), credentials, method: 'POST' })
	.then((data) => parseStatus(data))
	}

	const unmuteConversation = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_UNMUTE_CONVERSATION(id), credentials, method: 'POST' })
	.then((data) => parseStatus(data))
	}

	const blockUser = ({ id, credentials }) => {
	return fetch(MASTODON_BLOCK_USER_URL(id), {
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const unblockUser = ({ id, credentials }) => {
	return fetch(MASTODON_UNBLOCK_USER_URL(id), {
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const approveUser = ({ id, credentials }) => {
	let url = MASTODON_APPROVE_USER_URL(id)
	return fetch(url, {
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const denyUser = ({ id, credentials }) => {
	let url = MASTODON_DENY_USER_URL(id)
	return fetch(url, {
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const fetchUser = ({ id, credentials }) => {
	let url = `${MASTODON_USER_URL}/${id}`
	return promisedRequest({ url, credentials })
	.then((data) => parseUser(data))
	}

	const fetchUserRelationship = ({ id, credentials }) => {
	let url = `${MASTODON_USER_RELATIONSHIPS_URL}/?id=${id}`
	return fetch(url, { headers: authHeaders(credentials) })
	.then((response) => {
	return new Promise((resolve, reject) => response.json()
	.then((json) => {
	if (!response.ok) {
	return reject(new StatusCodeError(response.status, json, { url }, response))
	}
	return resolve(json)
	}))
	})
	}

	const fetchFriends = ({ id, maxId, sinceId, limit = 20, credentials }) => {
	let url = MASTODON_FOLLOWING_URL(id)
	const args = [
	maxId && `max_id=${maxId}`,
	sinceId && `since_id=${sinceId}`,
	limit && `limit=${limit}`
	].filter(_ => _).join('&')

	url = url + (args ? '?' + args : '')
	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => data.json())
	.then((data) => data.map(parseUser))
	}

	const exportFriends = ({ id, credentials }) => {
	return new Promise(async (resolve, reject) => {
	try {
	let friends = []
	let more = true
	while (more) {
	const maxId = friends.length > 0 ? last(friends).id : undefined
	const users = await fetchFriends({ id, maxId, credentials })
	friends = concat(friends, users)
	if (users.length === 0) {
	more = false
	}
	}
	resolve(friends)
	} catch (err) {
	reject(err)
	}
	})
	}

	const fetchFollowers = ({ id, maxId, sinceId, limit = 20, credentials }) => {
	let url = MASTODON_FOLLOWERS_URL(id)
	const args = [
	maxId && `max_id=${maxId}`,
	sinceId && `since_id=${sinceId}`,
	limit && `limit=${limit}`
	].filter(_ => _).join('&')

	url += args ? '?' + args : ''
	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => data.json())
	.then((data) => data.map(parseUser))
	}

	const fetchFollowRequests = ({ credentials }) => {
	const url = MASTODON_FOLLOW_REQUESTS_URL
	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => data.json())
	.then((data) => data.map(parseUser))
	}

	const fetchConversation = ({ id, credentials }) => {
	let urlContext = MASTODON_STATUS_CONTEXT_URL(id)
	return fetch(urlContext, { headers: authHeaders(credentials) })
	.then((data) => {
	if (data.ok) {
	return data
	}
	throw new Error('Error fetching timeline', data)
	})
	.then((data) => data.json())
	.then(({ ancestors, descendants }) => ({
	ancestors: ancestors.map(parseStatus),
	descendants: descendants.map(parseStatus)
	}))
	}

	const fetchStatus = ({ id, credentials }) => {
	let url = MASTODON_STATUS_URL(id)
	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => {
	if (data.ok) {
	return data
	}
	throw new Error('Error fetching timeline', data)
	})
	.then((data) => data.json())
	.then((data) => parseStatus(data))
	}

	const tagUser = ({ tag, credentials, ...options }) => {
	const screenName = options.screen_name
	const form = {
	nicknames: [screenName],
	tags: [tag]
	}

	const headers = authHeaders(credentials)
	headers['Content-Type'] = 'application/json'

	return fetch(TAG_USER_URL, {
	method: 'PUT',
	headers: headers,
	body: JSON.stringify(form)
	})
	}

	const untagUser = ({ tag, credentials, ...options }) => {
	const screenName = options.screen_name
	const body = {
	nicknames: [screenName],
	tags: [tag]
	}

	const headers = authHeaders(credentials)
	headers['Content-Type'] = 'application/json'

	return fetch(TAG_USER_URL, {
	method: 'DELETE',
	headers: headers,
	body: JSON.stringify(body)
	})
	}

	const addRight = ({ right, credentials, ...user }) => {
	const screenName = user.screen_name

	return fetch(PERMISSION_GROUP_URL(screenName, right), {
	method: 'POST',
	headers: authHeaders(credentials),
	body: {}
	})
	}

	const deleteRight = ({ right, credentials, ...user }) => {
	const screenName = user.screen_name

	return fetch(PERMISSION_GROUP_URL(screenName, right), {
	method: 'DELETE',
	headers: authHeaders(credentials),
	body: {}
	})
	}

	const activateUser = ({ credentials, user: { screen_name: nickname } }) => {
	return promisedRequest({
	url: ACTIVATE_USER_URL,
	method: 'PATCH',
	credentials,
	payload: {
	nicknames: [nickname]
	}
	}).then(response => get(response, 'users.0'))
	}

	const deactivateUser = ({ credentials, user: { screen_name: nickname } }) => {
	return promisedRequest({
	url: DEACTIVATE_USER_URL,
	method: 'PATCH',
	credentials,
	payload: {
	nicknames: [nickname]
	}
	}).then(response => get(response, 'users.0'))
	}

	const deleteUser = ({ credentials, ...user }) => {
	const screenName = user.screen_name
	const headers = authHeaders(credentials)

	return fetch(`${ADMIN_USERS_URL}?nickname=${screenName}`, {
	method: 'DELETE',
	headers: headers
	})
	}

	const fetchTimeline = ({
	timeline,
	credentials,
	since = false,
	until = false,
	userId = false,
	tag = false,
	- withMuted = false
	+ withMuted = false,
	+ withMove = false
	}) => {
	const timelineUrls = {
	public: MASTODON_PUBLIC_TIMELINE,
	friends: MASTODON_USER_HOME_TIMELINE_URL,
	dms: MASTODON_DIRECT_MESSAGES_TIMELINE_URL,
	notifications: MASTODON_USER_NOTIFICATIONS_URL,
	'publicAndExternal': MASTODON_PUBLIC_TIMELINE,
	user: MASTODON_USER_TIMELINE_URL,
	media: MASTODON_USER_TIMELINE_URL,
	favorites: MASTODON_USER_FAVORITES_TIMELINE_URL,
	tag: MASTODON_TAG_TIMELINE_URL
	}
	const isNotifications = timeline === 'notifications'
	const params = []

	let url = timelineUrls[timeline]

	if (timeline === 'user' \|\| timeline === 'media') {
	url = url(userId)
	}

	if (since) {
	params.push(['since_id', since])
	}
	if (until) {
	params.push(['max_id', until])
	}
	if (tag) {
	url = url(tag)
	}
	if (timeline === 'media') {
	params.push(['only_media', 1])
	}
	if (timeline === 'public') {
	params.push(['local', true])
	}
	if (timeline === 'public' \|\| timeline === 'publicAndExternal') {
	params.push(['only_media', false])
	}
	+ if (timeline === 'notifications') {
	+ params.push(['with_move', withMove])
	+ }

	params.push(['count', 20])
	params.push(['with_muted', withMuted])

	const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
	url += `?${queryString}`
	let status = ''
	let statusText = ''
	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => {
	status = data.status
	statusText = data.statusText
	return data
	})
	.then((data) => data.json())
	.then((data) => {
	if (!data.error) {
	return data.map(isNotifications ? parseNotification : parseStatus)
	} else {
	data.status = status
	data.statusText = statusText
	return data
	}
	})
	}

	const fetchPinnedStatuses = ({ id, credentials }) => {
	const url = MASTODON_USER_TIMELINE_URL(id) + '?pinned=true'
	return promisedRequest({ url, credentials })
	.then((data) => data.map(parseStatus))
	}

	const verifyCredentials = (user) => {
	return fetch(MASTODON_LOGIN_URL, {
	headers: authHeaders(user)
	})
	.then((response) => {
	if (response.ok) {
	return response.json()
	} else {
	return {
	error: response
	}
	}
	})
	.then((data) => data.error ? data : parseUser(data))
	}

	const favorite = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_FAVORITE_URL(id), method: 'POST', credentials })
	.then((data) => parseStatus(data))
	}

	const unfavorite = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_UNFAVORITE_URL(id), method: 'POST', credentials })
	.then((data) => parseStatus(data))
	}

	const retweet = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_RETWEET_URL(id), method: 'POST', credentials })
	.then((data) => parseStatus(data))
	}

	const unretweet = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_UNRETWEET_URL(id), method: 'POST', credentials })
	.then((data) => parseStatus(data))
	}

	const postStatus = ({
	credentials,
	status,
	spoilerText,
	visibility,
	sensitive,
	poll,
	mediaIds = [],
	inReplyToStatusId,
	contentType
	}) => {
	const form = new FormData()
	const pollOptions = poll.options \|\| []

	form.append('status', status)
	form.append('source', 'Pleroma FE')
	if (spoilerText) form.append('spoiler_text', spoilerText)
	if (visibility) form.append('visibility', visibility)
	if (sensitive) form.append('sensitive', sensitive)
	if (contentType) form.append('content_type', contentType)
	mediaIds.forEach(val => {
	form.append('media_ids[]', val)
	})
	if (pollOptions.some(option => option !== '')) {
	const normalizedPoll = {
	expires_in: poll.expiresIn,
	multiple: poll.multiple
	}
	Object.keys(normalizedPoll).forEach(key => {
	form.append(`poll[${key}]`, normalizedPoll[key])
	})

	pollOptions.forEach(option => {
	form.append('poll[options][]', option)
	})
	}
	if (inReplyToStatusId) {
	form.append('in_reply_to_id', inReplyToStatusId)
	}

	return fetch(MASTODON_POST_STATUS_URL, {
	body: form,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((response) => {
	if (response.ok) {
	return response.json()
	} else {
	return {
	error: response
	}
	}
	})
	.then((data) => data.error ? data : parseStatus(data))
	}

	const deleteStatus = ({ id, credentials }) => {
	return fetch(MASTODON_DELETE_URL(id), {
	headers: authHeaders(credentials),
	method: 'DELETE'
	})
	}

	const uploadMedia = ({ formData, credentials }) => {
	return fetch(MASTODON_MEDIA_UPLOAD_URL, {
	body: formData,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((data) => data.json())
	.then((data) => parseAttachment(data))
	}

	const importBlocks = ({ file, credentials }) => {
	const formData = new FormData()
	formData.append('list', file)
	return fetch(BLOCKS_IMPORT_URL, {
	body: formData,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((response) => response.ok)
	}

	const importFollows = ({ file, credentials }) => {
	const formData = new FormData()
	formData.append('list', file)
	return fetch(FOLLOW_IMPORT_URL, {
	body: formData,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((response) => response.ok)
	}

	const deleteAccount = ({ credentials, password }) => {
	const form = new FormData()

	form.append('password', password)

	return fetch(DELETE_ACCOUNT_URL, {
	body: form,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((response) => response.json())
	}

	const changeEmail = ({ credentials, email, password }) => {
	const form = new FormData()

	form.append('email', email)
	form.append('password', password)

	return fetch(CHANGE_EMAIL_URL, {
	body: form,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((response) => response.json())
	}

	const changePassword = ({ credentials, password, newPassword, newPasswordConfirmation }) => {
	const form = new FormData()

	form.append('password', password)
	form.append('new_password', newPassword)
	form.append('new_password_confirmation', newPasswordConfirmation)

	return fetch(CHANGE_PASSWORD_URL, {
	body: form,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((response) => response.json())
	}

	const settingsMFA = ({ credentials }) => {
	return fetch(MFA_SETTINGS_URL, {
	headers: authHeaders(credentials),
	method: 'GET'
	}).then((data) => data.json())
	}

	const mfaDisableOTP = ({ credentials, password }) => {
	const form = new FormData()

	form.append('password', password)

	return fetch(MFA_DISABLE_OTP_URL, {
	body: form,
	method: 'DELETE',
	headers: authHeaders(credentials)
	})
	.then((response) => response.json())
	}

	const mfaConfirmOTP = ({ credentials, password, token }) => {
	const form = new FormData()

	form.append('password', password)
	form.append('code', token)

	return fetch(MFA_CONFIRM_OTP_URL, {
	body: form,
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}
	const mfaSetupOTP = ({ credentials }) => {
	return fetch(MFA_SETUP_OTP_URL, {
	headers: authHeaders(credentials),
	method: 'GET'
	}).then((data) => data.json())
	}
	const generateMfaBackupCodes = ({ credentials }) => {
	return fetch(MFA_BACKUP_CODES_URL, {
	headers: authHeaders(credentials),
	method: 'GET'
	}).then((data) => data.json())
	}

	const fetchMutes = ({ credentials }) => {
	return promisedRequest({ url: MASTODON_USER_MUTES_URL, credentials })
	.then((users) => users.map(parseUser))
	}

	const muteUser = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_MUTE_USER_URL(id), credentials, method: 'POST' })
	}

	const unmuteUser = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_UNMUTE_USER_URL(id), credentials, method: 'POST' })
	}

	const subscribeUser = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_SUBSCRIBE_USER(id), credentials, method: 'POST' })
	}

	const unsubscribeUser = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_UNSUBSCRIBE_USER(id), credentials, method: 'POST' })
	}

	const fetchBlocks = ({ credentials }) => {
	return promisedRequest({ url: MASTODON_USER_BLOCKS_URL, credentials })
	.then((users) => users.map(parseUser))
	}

	const fetchOAuthTokens = ({ credentials }) => {
	const url = '/api/oauth_tokens.json'

	return fetch(url, {
	headers: authHeaders(credentials)
	}).then((data) => {
	if (data.ok) {
	return data.json()
	}
	throw new Error('Error fetching auth tokens', data)
	})
	}

	const revokeOAuthToken = ({ id, credentials }) => {
	const url = `/api/oauth_tokens/${id}`

	return fetch(url, {
	headers: authHeaders(credentials),
	method: 'DELETE'
	})
	}

	const suggestions = ({ credentials }) => {
	return fetch(SUGGESTIONS_URL, {
	headers: authHeaders(credentials)
	}).then((data) => data.json())
	}

	const markNotificationsAsSeen = ({ id, credentials }) => {
	const body = new FormData()

	body.append('latest_id', id)

	return fetch(QVITTER_USER_NOTIFICATIONS_READ_URL, {
	body,
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const vote = ({ pollId, choices, credentials }) => {
	const form = new FormData()
	form.append('choices', choices)

	return promisedRequest({
	url: MASTODON_VOTE_URL(encodeURIComponent(pollId)),
	method: 'POST',
	credentials,
	payload: {
	choices: choices
	}
	})
	}

	const fetchPoll = ({ pollId, credentials }) => {
	return promisedRequest(
	{
	url: MASTODON_POLL_URL(encodeURIComponent(pollId)),
	method: 'GET',
	credentials
	}
	)
	}

	const fetchFavoritedByUsers = ({ id }) => {
	return promisedRequest({ url: MASTODON_STATUS_FAVORITEDBY_URL(id) }).then((users) => users.map(parseUser))
	}

	const fetchRebloggedByUsers = ({ id }) => {
	return promisedRequest({ url: MASTODON_STATUS_REBLOGGEDBY_URL(id) }).then((users) => users.map(parseUser))
	}

	-const fetchEmojiReactions = ({ id }) => {
	- return promisedRequest({ url: PLEROMA_EMOJI_REACTIONS_URL(id) })
	+const fetchEmojiReactions = ({ id, credentials }) => {
	+ return promisedRequest({ url: PLEROMA_EMOJI_REACTIONS_URL(id), credentials })
	+ .then((reactions) => reactions.map(r => {
	+ r.accounts = r.accounts.map(parseUser)
	+ return r
	+ }))
	}

	const reactWithEmoji = ({ id, emoji, credentials }) => {
	return promisedRequest({
	- url: PLEROMA_EMOJI_REACT_URL(id),
	- method: 'POST',
	- credentials,
	- payload: { emoji }
	+ url: PLEROMA_EMOJI_REACT_URL(id, emoji),
	+ method: 'PUT',
	+ credentials
	}).then(parseStatus)
	}

	const unreactWithEmoji = ({ id, emoji, credentials }) => {
	return promisedRequest({
	- url: PLEROMA_EMOJI_UNREACT_URL(id),
	- method: 'POST',
	- credentials,
	- payload: { emoji }
	+ url: PLEROMA_EMOJI_UNREACT_URL(id, emoji),
	+ method: 'DELETE',
	+ credentials
	}).then(parseStatus)
	}

	const reportUser = ({ credentials, userId, statusIds, comment, forward }) => {
	return promisedRequest({
	url: MASTODON_REPORT_USER_URL,
	method: 'POST',
	payload: {
	'account_id': userId,
	'status_ids': statusIds,
	comment,
	forward
	},
	credentials
	})
	}

	const searchUsers = ({ credentials, query }) => {
	return promisedRequest({
	url: MASTODON_USER_SEARCH_URL,
	params: {
	q: query,
	resolve: true
	},
	credentials
	})
	.then((data) => data.map(parseUser))
	}

	const search2 = ({ credentials, q, resolve, limit, offset, following }) => {
	let url = MASTODON_SEARCH_2
	let params = []

	if (q) {
	params.push(['q', encodeURIComponent(q)])
	}

	if (resolve) {
	params.push(['resolve', resolve])
	}

	if (limit) {
	params.push(['limit', limit])
	}

	if (offset) {
	params.push(['offset', offset])
	}

	if (following) {
	params.push(['following', true])
	}

	let queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
	url += `?${queryString}`

	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => {
	if (data.ok) {
	return data
	}
	throw new Error('Error fetching search result', data)
	})
	.then((data) => { return data.json() })
	.then((data) => {
	data.accounts = data.accounts.slice(0, limit).map(u => parseUser(u))
	data.statuses = data.statuses.slice(0, limit).map(s => parseStatus(s))
	return data
	})
	}

	const fetchDomainMutes = ({ credentials }) => {
	return promisedRequest({ url: MASTODON_DOMAIN_BLOCKS_URL, credentials })
	}

	const muteDomain = ({ domain, credentials }) => {
	return promisedRequest({
	url: MASTODON_DOMAIN_BLOCKS_URL,
	method: 'POST',
	payload: { domain },
	credentials
	})
	}

	const unmuteDomain = ({ domain, credentials }) => {
	return promisedRequest({
	url: MASTODON_DOMAIN_BLOCKS_URL,
	method: 'DELETE',
	payload: { domain },
	credentials
	})
	}

	export const getMastodonSocketURI = ({ credentials, stream, args = {} }) => {
	return Object.entries({
	...(credentials
	? { access_token: credentials }
	: {}
	),
	stream,
	...args
	}).reduce((acc, [key, val]) => {
	return acc + `${key}=${val}&`
	}, MASTODON_STREAMING + '?')
	}

	const MASTODON_STREAMING_EVENTS = new Set([
	'update',
	'notification',
	'delete',
	'filters_changed'
	])

	// A thin wrapper around WebSocket API that allows adding a pre-processor to it
	// Uses EventTarget and a CustomEvent to proxy events
	export const ProcessedWS = ({
	url,
	preprocessor = handleMastoWS,
	id = 'Unknown'
	}) => {
	const eventTarget = new EventTarget()
	const socket = new WebSocket(url)
	if (!socket) throw new Error(`Failed to create socket ${id}`)
	const proxy = (original, eventName, processor = a => a) => {
	original.addEventListener(eventName, (eventData) => {
	eventTarget.dispatchEvent(new CustomEvent(
	eventName,
	{ detail: processor(eventData) }
	))
	})
	}
	socket.addEventListener('open', (wsEvent) => {
	console.debug(`[WS][${id}] Socket connected`, wsEvent)
	})
	socket.addEventListener('error', (wsEvent) => {
	console.debug(`[WS][${id}] Socket errored`, wsEvent)
	})
	socket.addEventListener('close', (wsEvent) => {
	console.debug(
	`[WS][${id}] Socket disconnected with code ${wsEvent.code}`,
	wsEvent
	)
	})
	// Commented code reason: very spammy, uncomment to enable message debug logging
	/*
	socket.addEventListener('message', (wsEvent) => {
	console.debug(
	`[WS][${id}] Message received`,
	wsEvent
	)
	})
	/**/

	proxy(socket, 'open')
	proxy(socket, 'close')
	proxy(socket, 'message', preprocessor)
	proxy(socket, 'error')

	// 1000 = Normal Closure
	eventTarget.close = () => { socket.close(1000, 'Shutting down socket') }

	return eventTarget
	}

	export const handleMastoWS = (wsEvent) => {
	const { data } = wsEvent
	if (!data) return
	const parsedEvent = JSON.parse(data)
	const { event, payload } = parsedEvent
	if (MASTODON_STREAMING_EVENTS.has(event)) {
	// MastoBE and PleromaBE both send payload for delete as a PLAIN string
	if (event === 'delete') {
	return { event, id: payload }
	}
	const data = payload ? JSON.parse(payload) : null
	if (event === 'update') {
	return { event, status: parseStatus(data) }
	} else if (event === 'notification') {
	return { event, notification: parseNotification(data) }
	}
	} else {
	console.warn('Unknown event', wsEvent)
	return null
	}
	}

	const apiService = {
	verifyCredentials,
	fetchTimeline,
	fetchPinnedStatuses,
	fetchConversation,
	fetchStatus,
	fetchFriends,
	exportFriends,
	fetchFollowers,
	followUser,
	unfollowUser,
	pinOwnStatus,
	unpinOwnStatus,
	muteConversation,
	unmuteConversation,
	blockUser,
	unblockUser,
	fetchUser,
	fetchUserRelationship,
	favorite,
	unfavorite,
	retweet,
	unretweet,
	postStatus,
	deleteStatus,
	uploadMedia,
	fetchMutes,
	muteUser,
	unmuteUser,
	subscribeUser,
	unsubscribeUser,
	fetchBlocks,
	fetchOAuthTokens,
	revokeOAuthToken,
	tagUser,
	untagUser,
	deleteUser,
	addRight,
	deleteRight,
	activateUser,
	deactivateUser,
	register,
	getCaptcha,
	updateAvatar,
	updateBg,
	updateProfile,
	updateBanner,
	importBlocks,
	importFollows,
	deleteAccount,
	changeEmail,
	changePassword,
	settingsMFA,
	mfaDisableOTP,
	generateMfaBackupCodes,
	mfaSetupOTP,
	mfaConfirmOTP,
	fetchFollowRequests,
	approveUser,
	denyUser,
	suggestions,
	markNotificationsAsSeen,
	vote,
	fetchPoll,
	fetchFavoritedByUsers,
	fetchRebloggedByUsers,
	fetchEmojiReactions,
	reactWithEmoji,
	unreactWithEmoji,
	reportUser,
	updateNotificationSettings,
	search2,
	searchUsers,
	fetchDomainMutes,
	muteDomain,
	unmuteDomain
	}

	export default apiService
	diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
	index 3116d21177..84169a7b05 100644
	--- a/src/services/entity_normalizer/entity_normalizer.service.js
	+++ b/src/services/entity_normalizer/entity_normalizer.service.js
	@@ -1,375 +1,378 @@
	import escape from 'escape-html'

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

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

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

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

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

	return 'unknown'
	}

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

	output.id = String(data.id)

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

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

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

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

	output.fields = data.fields
	output.fields_html = data.fields.map(field => {
	return {
	name: addEmojis(field.name, data.emojis),
	value: addEmojis(field.value, data.emojis)
	}
	})

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

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

	output.friends_count = data.following_count

	output.bot = data.bot

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

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

	if (relationship) {
	output.follows_you = relationship.followed_by
	output.requested = relationship.requested
	output.following = relationship.following
	output.statusnet_blocking = relationship.blocking
	output.muted = relationship.muting
	output.showing_reblogs = relationship.showing_reblogs
	output.subscribed = relationship.subscribing
	}

	+ 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.statusnet_blocking = data.statusnet_blocking

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

	output.follows_you = data.follows_you

	output.muted = data.muted

	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
	// on mastoapi this info is contained in a "relationship"
	output.following = data.following
	// Websocket token
	output.token = data.token
	}

	output.created_at = new Date(data.created_at)
	output.locked = data.locked
	output.followers_count = data.followers_count
	output.statuses_count = data.statuses_count
	output.friendIds = []
	output.followerIds = []
	output.pinnedStatusIds = []

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

	output.tags = data.pleroma.tags
	output.deactivated = data.pleroma.deactivated

	output.notification_settings = data.pleroma.notification_settings
	}

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

	return output
	}

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

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

	output.url = data.url
	output.description = data.description

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

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

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

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

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

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

	output.tags = data.tags

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

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

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

	output.summary_html = addEmojis(escape(data.spoiler_text), data.emojis)
	output.external_url = data.url
	output.poll = data.poll
	output.pinned = data.pinned
	output.muted = data.muted
	} else {
	output.favorited = data.favorited
	output.fave_num = data.fave_num

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

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

	output.type = qvitterStatusType(data)

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

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

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

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

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

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

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

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

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

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

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

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

	return output
	}

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

	if (masto) {
	output.type = mastoDict[data.type] \|\| data.type
	output.seen = data.pleroma.is_seen
	output.status = output.type === 'follow' \|\| output.type === 'move'
	? null
	: parseStatus(data.status)
	output.action = output.status // TODO: Refactor, this is unneeded
	output.target = output.type !== 'move'
	? null
	: parseUser(data.target)
	output.from_profile = parseUser(data.account)
	+ output.emoji = data.emoji
	} else {
	const parsedNotice = parseStatus(data.notice)
	output.type = data.ntype
	output.seen = Boolean(data.is_seen)
	output.status = output.type === 'like'
	? parseStatus(data.notice.favorited_status)
	: parsedNotice
	output.action = parsedNotice
	output.from_profile = 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)
	}
	diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js
	index 860620fc07..b17bd7bf62 100644
	--- a/src/services/notification_utils/notification_utils.js
	+++ b/src/services/notification_utils/notification_utils.js
	@@ -1,39 +1,40 @@
	import { filter, sortBy } from 'lodash'

	export const notificationsFromStore = store => store.state.statuses.notifications.data

	export const visibleTypes = store => ([
	store.state.config.notificationVisibility.likes && 'like',
	store.state.config.notificationVisibility.mentions && 'mention',
	store.state.config.notificationVisibility.repeats && 'repeat',
	store.state.config.notificationVisibility.follows && 'follow',
	- store.state.config.notificationVisibility.moves && 'move'
	+ store.state.config.notificationVisibility.moves && 'move',
	+ store.state.config.notificationVisibility.emojiReactions && 'pleroma:emoji_reaction'
	].filter(_ => _))

	const sortById = (a, b) => {
	const seqA = Number(a.id)
	const seqB = Number(b.id)
	const isSeqA = !Number.isNaN(seqA)
	const isSeqB = !Number.isNaN(seqB)
	if (isSeqA && isSeqB) {
	return seqA > seqB ? -1 : 1
	} else if (isSeqA && !isSeqB) {
	return 1
	} else if (!isSeqA && isSeqB) {
	return -1
	} else {
	return a.id > b.id ? -1 : 1
	}
	}

	export const filteredNotificationsFromStore = (store, types) => {
	// map is just to clone the array since sort mutates it and it causes some issues
	let sortedNotifications = notificationsFromStore(store).map(_ => _).sort(sortById)
	sortedNotifications = sortBy(sortedNotifications, 'seen')
	return sortedNotifications.filter(
	(notification) => (types \|\| visibleTypes(store)).includes(notification.type)
	)
	}

	export const unseenNotificationsFromStore = store =>
	filter(filteredNotificationsFromStore(store), ({ seen }) => !seen)
	diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
	index 64499a1b65..864e32f878 100644
	--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
	+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
	@@ -1,66 +1,69 @@
	import apiService from '../api/api.service.js'

	const update = ({ store, notifications, older }) => {
	store.dispatch('setNotificationsError', { value: false })
	store.dispatch('addNewNotifications', { notifications, older })
	}

	const fetchAndUpdate = ({ store, credentials, older = false }) => {
	const args = { credentials }
	const { getters } = store
	const rootState = store.rootState \|\| store.state
	const timelineData = rootState.statuses.notifications
	const hideMutedPosts = getters.mergedConfig.hideMutedPosts
	+ const allowFollowingMove = rootState.users.currentUser.allow_following_move

	args['withMuted'] = !hideMutedPosts

	+ args['withMove'] = !allowFollowingMove
	+
	args['timeline'] = 'notifications'
	if (older) {
	if (timelineData.minId !== Number.POSITIVE_INFINITY) {
	args['until'] = timelineData.minId
	}
	return fetchNotifications({ store, args, older })
	} else {
	// fetch new notifications
	if (timelineData.maxId !== Number.POSITIVE_INFINITY) {
	args['since'] = timelineData.maxId
	}
	const result = fetchNotifications({ store, args, older })

	// load unread notifications repeatedly to provide consistency between browser tabs
	const notifications = timelineData.data
	const readNotifsIds = notifications.filter(n => n.seen).map(n => n.id)
	if (readNotifsIds.length) {
	args['since'] = Math.max(...readNotifsIds)
	fetchNotifications({ store, args, older })
	}

	return result
	}
	}

	const fetchNotifications = ({ store, args, older }) => {
	return apiService.fetchTimeline(args)
	.then((notifications) => {
	update({ store, notifications, older })
	return notifications
	}, () => store.dispatch('setNotificationsError', { value: true }))
	.catch(() => store.dispatch('setNotificationsError', { value: true }))
	}

	const startFetching = ({ credentials, store }) => {
	fetchAndUpdate({ credentials, store })
	const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
	// Initially there's set flag to silence all desktop notifications so
	// that there won't spam of them when user just opened up the FE we
	// reset that flag after a while to show new notifications once again.
	setTimeout(() => store.dispatch('setNotificationsSilence', false), 10000)
	return setInterval(boundFetchAndUpdate, 10000)
	}

	const notificationsFetcher = {
	fetchAndUpdate,
	startFetching
	}

	export default notificationsFetcher
	diff --git a/static/fontello.json b/static/fontello.json
	index 829241b55d..5a7086a231 100755
	--- a/static/fontello.json
	+++ b/static/fontello.json
	@@ -1,344 +1,350 @@
	{
	"name": "",
	"css_prefix_text": "icon-",
	"css_use_suffix": false,
	"hinting": true,
	"units_per_em": 1000,
	"ascent": 857,
	"glyphs": [
	{
	"uid": "9bd60140934a1eb9236fd7a8ab1ff6ba",
	"css": "spin4",
	"code": 59444,
	"src": "fontelico"
	},
	{
	"uid": "5211af474d3a9848f67f945e2ccaf143",
	"css": "cancel",
	"code": 59392,
	"src": "fontawesome"
	},
	{
	"uid": "eeec3208c90b7b48e804919d0d2d4a41",
	"css": "upload",
	"code": 59393,
	"src": "fontawesome"
	},
	{
	"uid": "2a6740fc2f9d0edea54205963f662594",
	"css": "spin3",
	"code": 59442,
	"src": "fontelico"
	},
	{
	"uid": "c6be5a58ee4e63a5ec399c2b0d15cf2c",
	"css": "reply",
	"code": 61714,
	"src": "fontawesome"
	},
	{
	"uid": "474656633f79ea2f1dad59ff63f6bf07",
	"css": "star",
	"code": 59394,
	"src": "fontawesome"
	},
	{
	"uid": "d17030afaecc1e1c22349b99f3c4992a",
	"css": "star-empty",
	"code": 59395,
	"src": "fontawesome"
	},
	{
	"uid": "09feb4465d9bd1364f4e301c9ddbaa92",
	"css": "retweet",
	"code": 59396,
	"src": "fontawesome"
	},
	{
	"uid": "7fd683b2c518ceb9e5fa6757f2276faa",
	"css": "eye-off",
	"code": 59397,
	"src": "fontawesome"
	},
	{
	"uid": "73ffeb70554099177620847206c12457",
	"css": "binoculars",
	"code": 61925,
	"src": "fontawesome"
	},
	{
	"uid": "e99461abfef3923546da8d745372c995",
	"css": "cog",
	"code": 59399,
	"src": "fontawesome"
	},
	{
	"uid": "1bafeeb1808a5fe24484c7890096901a",
	"css": "user-plus",
	"code": 62004,
	"src": "fontawesome"
	},
	{
	"uid": "559647a6f430b3aeadbecd67194451dd",
	"css": "menu",
	"code": 61641,
	"src": "fontawesome"
	},
	{
	"uid": "0d20938846444af8deb1920dc85a29fb",
	"css": "logout",
	"code": 59400,
	"src": "fontawesome"
	},
	{
	"uid": "ccddff8e8670dcd130e3cb55fdfc2fd0",
	"css": "down-open",
	"code": 59401,
	"src": "fontawesome"
	},
	{
	"uid": "44b9e75612c5fad5505edd70d071651f",
	"css": "attach",
	"code": 59402,
	"src": "entypo"
	},
	{
	"uid": "e15f0d620a7897e2035c18c80142f6d9",
	"css": "link-ext",
	"code": 61582,
	"src": "fontawesome"
	},
	{
	"uid": "e35de5ea31cd56970498e33efbcb8e36",
	"css": "link-ext-alt",
	"code": 61583,
	"src": "fontawesome"
	},
	{
	"uid": "381da2c2f7fd51f8de877c044d7f439d",
	"css": "picture",
	"code": 59403,
	"src": "fontawesome"
	},
	{
	"uid": "872d9516df93eb6b776cc4d94bd97dac",
	"css": "video",
	"code": 59404,
	"src": "fontawesome"
	},
	{
	"uid": "399ef63b1e23ab1b761dfbb5591fa4da",
	"css": "right-open",
	"code": 59405,
	"src": "fontawesome"
	},
	{
	"uid": "d870630ff8f81e6de3958ecaeac532f2",
	"css": "left-open",
	"code": 59406,
	"src": "fontawesome"
	},
	{
	"uid": "fe6697b391355dec12f3d86d6d490397",
	"css": "up-open",
	"code": 59407,
	"src": "fontawesome"
	},
	{
	"uid": "9c1376672bb4f1ed616fdd78a23667e9",
	"css": "comment-empty",
	"code": 61669,
	"src": "fontawesome"
	},
	{
	"uid": "ccc2329632396dc096bb638d4b46fb98",
	"css": "mail-alt",
	"code": 61664,
	"src": "fontawesome"
	},
	{
	"uid": "c1f1975c885aa9f3dad7810c53b82074",
	"css": "lock",
	"code": 59409,
	"src": "fontawesome"
	},
	{
	"uid": "05376be04a27d5a46e855a233d6e8508",
	"css": "lock-open-alt",
	"code": 61758,
	"src": "fontawesome"
	},
	{
	"uid": "197375a3cea8cb90b02d06e4ddf1433d",
	"css": "globe",
	"code": 59410,
	"src": "fontawesome"
	},
	{
	"uid": "b3a9e2dab4d19ea3b2f628242c926bfe",
	"css": "brush",
	"code": 59411,
	"src": "iconic"
	},
	{
	"uid": "9dd9e835aebe1060ba7190ad2b2ed951",
	"css": "search",
	"code": 59398,
	"src": "fontawesome"
	},
	{
	"uid": "ca90da02d2c6a3183f2458e4dc416285",
	"css": "adjust",
	"code": 59414,
	"src": "fontawesome"
	},
	{
	"uid": "5e2ab018e3044337bcef5f7e94098ea1",
	"css": "thumbs-up-alt",
	"code": 61796,
	"src": "fontawesome"
	},
	{
	"uid": "c76b7947c957c9b78b11741173c8349b",
	"css": "attention",
	"code": 59412,
	"src": "fontawesome"
	},
	{
	"uid": "1a5cfa186647e8c929c2b17b9fc4dac1",
	"css": "plus-squared",
	"code": 61694,
	"src": "fontawesome"
	},
	{
	"uid": "44e04715aecbca7f266a17d5a7863c68",
	"css": "plus",
	"code": 59413,
	"src": "fontawesome"
	},
	{
	"uid": "41087bc74d4b20b55059c60a33bf4008",
	"css": "edit",
	"code": 59415,
	"src": "fontawesome"
	},
	{
	"uid": "5717236f6134afe2d2a278a5c9b3927a",
	"css": "play-circled",
	"code": 61764,
	"src": "fontawesome"
	},
	{
	"uid": "d35a1d35efeb784d1dc9ac18b9b6c2b6",
	"css": "pencil",
	"code": 59416,
	"src": "fontawesome"
	},
	{
	"uid": "266d5d9adf15a61800477a5acf9a4462",
	"css": "chart-bar",
	"code": 59419,
	"src": "fontawesome"
	},
	{
	"uid": "d862a10e1448589215be19702f98f2c1",
	"css": "smile",
	"code": 61720,
	"src": "fontawesome"
	},
	{
	"uid": "671f29fa10dda08074a4c6a341bb4f39",
	"css": "bell-alt",
	"code": 61683,
	"src": "fontawesome"
	},
	{
	"uid": "5bb103cd29de77e0e06a52638527b575",
	"css": "wrench",
	"code": 59418,
	"src": "fontawesome"
	},
	{
	"uid": "5b0772e9484a1a11646793a82edd622a",
	"css": "pin",
	"code": 59417,
	"src": "fontawesome"
	},
	{
	"uid": "22411a88489225a018f68db737de3c77",
	"css": "ellipsis",
	"code": 61761,
	"src": "custom_icons",
	"selected": true,
	"svg": {
	"path": "M214 411V518Q214 540 199 556T161 571H54Q31 571 16 556T0 518V411Q0 388 16 373T54 357H161Q183 357 199 373T214 411ZM500 411V518Q500 540 484 556T446 571H339Q317 571 301 556T286 518V411Q286 388 301 373T339 357H446Q469 357 484 373T500 411ZM786 411V518Q786 540 770 556T732 571H625Q603 571 587 556T571 518V411Q571 388 587 373T625 357H732Q755 357 770 373T786 411Z",
	"width": 785.7
	},
	"search": [
	"ellipsis"
	]
	},
	{
	"uid": "0bef873af785ead27781fdf98b3ae740",
	"css": "bell-ringing-o",
	"code": 59408,
	"src": "custom_icons",
	"selected": true,
	"svg": {
	"path": "M497.8 0C468.3 0 444.4 23.9 444.4 53.3 444.4 61.1 446.1 68.3 448.9 75 301.7 96.7 213.3 213.3 213.3 320 213.3 588.3 117.8 712.8 35.6 782.2 35.6 821.1 67.8 853.3 106.7 853.3H355.6C355.6 931.7 419.4 995.6 497.8 995.6S640 931.7 640 853.3H888.9C927.8 853.3 960 821.1 960 782.2 877.8 712.8 782.2 588.3 782.2 320 782.2 213.3 693.9 96.7 546.7 75 549.4 68.3 551.1 61.1 551.1 53.3 551.1 23.9 527.2 0 497.8 0ZM189.4 44.8C108.4 118.6 70.5 215.1 71.1 320.2L142.2 319.8C141.7 231.2 170.4 158.3 237.3 97.4L189.4 44.8ZM806.2 44.8L758.3 97.4C825.2 158.3 853.9 231.2 853.3 319.8L924.4 320.2C925.1 215.1 887.2 118.6 806.2 44.8ZM408.9 844.4C413.9 844.4 417.8 848.3 417.8 853.3 417.8 897.2 453.9 933.3 497.8 933.3 502.8 933.3 506.7 937.2 506.7 942.2S502.8 951.1 497.8 951.1C443.9 951.1 400 907.2 400 853.3 400 848.3 403.9 844.4 408.9 844.4Z",
	"width": 1000
	},
	"search": [
	"bell-ringing-o"
	]
	},
	{
	"uid": "0b2b66e526028a6972d51a6f10281b4b",
	"css": "zoom-in",
	"code": 59420,
	"src": "fontawesome"
	},
	{
	"uid": "0bda4bc779d4c32623dec2e43bd67ee8",
	"css": "gauge",
	"code": 61668,
	"src": "fontawesome"
	},
	{
	"uid": "31972e4e9d080eaa796290349ae6c1fd",
	"css": "users",
	"code": 59421,
	"src": "fontawesome"
	},
	{
	"uid": "e82cedfa1d5f15b00c5a81c9bd731ea2",
	"css": "info-circled",
	"code": 59423,
	"src": "fontawesome"
	},
	{
	"uid": "w3nzesrlbezu6f30q7ytyq919p6gdlb6",
	"css": "home-2",
	"code": 59425,
	"src": "typicons"
	},
	{
	"uid": "dcedf50ab1ede3283d7a6c70e2fe32f3",
	"css": "chat",
	"code": 59422,
	"src": "fontawesome"
	},
	{
	"uid": "3a00327e61b997b58518bd43ed83c3df",
	"css": "login",
	"code": 59424,
	"src": "fontawesome"
	},
	{
	"uid": "f3ebd6751c15a280af5cc5f4a764187d",
	"css": "arrow-curved",
	"code": 59426,
	"src": "iconic"
	+ },
	+ {
	+ "uid": "0ddd3e8201ccc7d41f7b7c9d27eca6c1",
	+ "css": "link",
	+ "code": 59427,
	+ "src": "fontawesome"
	}
	]
	-}
	\ No newline at end of file
	+}
	diff --git a/test/unit/specs/modules/statuses.spec.js b/test/unit/specs/modules/statuses.spec.js
	index e53aa388b1..fe42e85bed 100644
	--- a/test/unit/specs/modules/statuses.spec.js
	+++ b/test/unit/specs/modules/statuses.spec.js
	@@ -1,371 +1,374 @@
	import { defaultState, mutations, prepareStatus } from '../../../../src/modules/statuses.js'

	// eslint-disable-next-line camelcase
	const makeMockStatus = ({ id, text, type = 'status' }) => {
	return {
	id,
	user: { id: '0' },
	name: 'status',
	text: text \|\| `Text number ${id}`,
	fave_num: 0,
	uri: '',
	type,
	attentions: []
	}
	}

	describe('Statuses module', () => {
	describe('prepareStatus', () => {
	it('sets deleted flag to false', () => {
	const aStatus = makeMockStatus({ id: '1', text: 'Hello oniichan' })
	expect(prepareStatus(aStatus).deleted).to.eq(false)
	})
	})

	describe('addNewStatuses', () => {
	it('adds the status to allStatuses and to the given timeline', () => {
	const state = defaultState()
	const status = makeMockStatus({ id: '1' })

	mutations.addNewStatuses(state, { statuses: [status], timeline: 'public' })

	expect(state.allStatuses).to.eql([status])
	expect(state.timelines.public.statuses).to.eql([status])
	expect(state.timelines.public.visibleStatuses).to.eql([])
	expect(state.timelines.public.newStatusCount).to.equal(1)
	})

	it('counts the status as new if it has not been seen on this timeline', () => {
	const state = defaultState()
	const status = makeMockStatus({ id: '1' })

	mutations.addNewStatuses(state, { statuses: [status], timeline: 'public' })
	mutations.addNewStatuses(state, { statuses: [status], timeline: 'friends' })

	expect(state.allStatuses).to.eql([status])
	expect(state.timelines.public.statuses).to.eql([status])
	expect(state.timelines.public.visibleStatuses).to.eql([])
	expect(state.timelines.public.newStatusCount).to.equal(1)

	expect(state.allStatuses).to.eql([status])
	expect(state.timelines.friends.statuses).to.eql([status])
	expect(state.timelines.friends.visibleStatuses).to.eql([])
	expect(state.timelines.friends.newStatusCount).to.equal(1)
	})

	it('add the statuses to allStatuses if no timeline is given', () => {
	const state = defaultState()
	const status = makeMockStatus({ id: '1' })

	mutations.addNewStatuses(state, { statuses: [status] })

	expect(state.allStatuses).to.eql([status])
	expect(state.timelines.public.statuses).to.eql([])
	expect(state.timelines.public.visibleStatuses).to.eql([])
	expect(state.timelines.public.newStatusCount).to.equal(0)
	})

	it('adds the status to allStatuses and to the given timeline, directly visible', () => {
	const state = defaultState()
	const status = makeMockStatus({ id: '1' })

	mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })

	expect(state.allStatuses).to.eql([status])
	expect(state.timelines.public.statuses).to.eql([status])
	expect(state.timelines.public.visibleStatuses).to.eql([status])
	expect(state.timelines.public.newStatusCount).to.equal(0)
	})

	it('removes statuses by tag on deletion', () => {
	const state = defaultState()
	const status = makeMockStatus({ id: '1' })
	const otherStatus = makeMockStatus({ id: '3' })
	status.uri = 'xxx'
	const deletion = makeMockStatus({ id: '2', type: 'deletion' })
	deletion.text = 'Dolus deleted notice {{tag:gs.smuglo.li,2016-11-18:noticeId=1038007:objectType=note}}.'
	deletion.uri = 'xxx'

	mutations.addNewStatuses(state, { statuses: [status, otherStatus], showImmediately: true, timeline: 'public' })
	mutations.addNewStatuses(state, { statuses: [deletion], showImmediately: true, timeline: 'public' })

	expect(state.allStatuses).to.eql([otherStatus])
	expect(state.timelines.public.statuses).to.eql([otherStatus])
	expect(state.timelines.public.visibleStatuses).to.eql([otherStatus])
	expect(state.timelines.public.maxId).to.eql('3')
	})

	it('does not update the maxId when the noIdUpdate flag is set', () => {
	const state = defaultState()
	const status = makeMockStatus({ id: '1' })
	const secondStatus = makeMockStatus({ id: '2' })

	mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
	expect(state.timelines.public.maxId).to.eql('1')

	mutations.addNewStatuses(state, { statuses: [secondStatus], showImmediately: true, timeline: 'public', noIdUpdate: true })
	expect(state.timelines.public.statuses).to.eql([secondStatus, status])
	expect(state.timelines.public.visibleStatuses).to.eql([secondStatus, status])
	expect(state.timelines.public.maxId).to.eql('1')
	})

	it('keeps a descending by id order in timeline.visibleStatuses and timeline.statuses', () => {
	const state = defaultState()
	const nonVisibleStatus = makeMockStatus({ id: '1' })
	const status = makeMockStatus({ id: '3' })
	const statusTwo = makeMockStatus({ id: '2' })
	const statusThree = makeMockStatus({ id: '4' })

	mutations.addNewStatuses(state, { statuses: [nonVisibleStatus], showImmediately: false, timeline: 'public' })

	mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
	mutations.addNewStatuses(state, { statuses: [statusTwo], showImmediately: true, timeline: 'public' })

	expect(state.timelines.public.minVisibleId).to.equal('2')

	mutations.addNewStatuses(state, { statuses: [statusThree], showImmediately: true, timeline: 'public' })

	expect(state.timelines.public.statuses).to.eql([statusThree, status, statusTwo, nonVisibleStatus])
	expect(state.timelines.public.visibleStatuses).to.eql([statusThree, status, statusTwo])
	})

	it('splits retweets from their status and links them', () => {
	const state = defaultState()
	const status = makeMockStatus({ id: '1' })
	const retweet = makeMockStatus({ id: '2', type: 'retweet' })
	const modStatus = makeMockStatus({ id: '1', text: 'something else' })

	retweet.retweeted_status = status

	// It adds both statuses, but only the retweet to visible.
	mutations.addNewStatuses(state, { statuses: [retweet], timeline: 'public', showImmediately: true })
	expect(state.timelines.public.visibleStatuses).to.have.length(1)
	expect(state.timelines.public.statuses).to.have.length(1)
	expect(state.allStatuses).to.have.length(2)
	expect(state.allStatuses[0].id).to.equal('1')
	expect(state.allStatuses[1].id).to.equal('2')

	// It refers to the modified status.
	mutations.addNewStatuses(state, { statuses: [modStatus], timeline: 'public' })
	expect(state.allStatuses).to.have.length(2)
	expect(state.allStatuses[0].id).to.equal('1')
	expect(state.allStatuses[0].text).to.equal(modStatus.text)
	expect(state.allStatuses[1].id).to.equal('2')
	expect(retweet.retweeted_status.text).to.eql(modStatus.text)
	})

	it('replaces existing statuses with the same id', () => {
	const state = defaultState()
	const status = makeMockStatus({ id: '1' })
	const modStatus = makeMockStatus({ id: '1', text: 'something else' })

	// Add original status
	mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
	expect(state.timelines.public.visibleStatuses).to.have.length(1)
	expect(state.allStatuses).to.have.length(1)

	// Add new version of status
	mutations.addNewStatuses(state, { statuses: [modStatus], showImmediately: true, timeline: 'public' })
	expect(state.timelines.public.visibleStatuses).to.have.length(1)
	expect(state.allStatuses).to.have.length(1)
	expect(state.allStatuses[0].text).to.eql(modStatus.text)
	})

	it('replaces existing statuses with the same id, coming from a retweet', () => {
	const state = defaultState()
	const status = makeMockStatus({ id: '1' })
	const modStatus = makeMockStatus({ id: '1', text: 'something else' })
	const retweet = makeMockStatus({ id: '2', type: 'retweet' })
	retweet.retweeted_status = modStatus

	// Add original status
	mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
	expect(state.timelines.public.visibleStatuses).to.have.length(1)
	expect(state.allStatuses).to.have.length(1)

	// Add new version of status
	mutations.addNewStatuses(state, { statuses: [retweet], showImmediately: false, timeline: 'public' })
	expect(state.timelines.public.visibleStatuses).to.have.length(1)
	// Don't add the retweet itself if the tweet is visible
	expect(state.timelines.public.statuses).to.have.length(1)
	expect(state.allStatuses).to.have.length(2)
	expect(state.allStatuses[0].text).to.eql(modStatus.text)
	})

	it('handles favorite actions', () => {
	const state = defaultState()
	const status = makeMockStatus({ id: '1' })

	const favorite = {
	id: '2',
	type: 'favorite',
	in_reply_to_status_id: '1', // The API uses strings here...
	uri: 'tag:shitposter.club,2016-08-21:fave:3895:note:773501:2016-08-21T16:52:15+00:00',
	text: 'a favorited something by b',
	user: { id: '99' }
	}

	mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
	mutations.addNewStatuses(state, { statuses: [favorite], showImmediately: true, timeline: 'public' })

	expect(state.timelines.public.visibleStatuses.length).to.eql(1)
	expect(state.timelines.public.visibleStatuses[0].fave_num).to.eql(1)
	expect(state.timelines.public.maxId).to.eq(favorite.id)

	// Adding it again does nothing
	mutations.addNewStatuses(state, { statuses: [favorite], showImmediately: true, timeline: 'public' })

	expect(state.timelines.public.visibleStatuses.length).to.eql(1)
	expect(state.timelines.public.visibleStatuses[0].fave_num).to.eql(1)
	expect(state.timelines.public.maxId).to.eq(favorite.id)

	// If something is favorited by the current user, it also sets the 'favorited' property but does not increment counter to avoid over-counting. Counter is incremented (updated, really) via response to the favorite request.
	const user = {
	id: '1'
	}

	const ownFavorite = {
	id: '3',
	type: 'favorite',
	in_reply_to_status_id: '1', // The API uses strings here...
	uri: 'tag:shitposter.club,2016-08-21:fave:3895:note:773501:2016-08-21T16:52:15+00:00',
	text: 'a favorited something by b',
	user
	}

	mutations.addNewStatuses(state, { statuses: [ownFavorite], showImmediately: true, timeline: 'public', user })

	expect(state.timelines.public.visibleStatuses.length).to.eql(1)
	expect(state.timelines.public.visibleStatuses[0].fave_num).to.eql(1)
	expect(state.timelines.public.visibleStatuses[0].favorited).to.eql(true)
	})
	})

	describe('emojiReactions', () => {
	it('increments count in existing reaction', () => {
	const state = defaultState()
	const status = makeMockStatus({ id: '1' })
	- status.emoji_reactions = [ { emoji: '😂', count: 1, accounts: [] } ]
	+ status.emoji_reactions = [ { name: '😂', count: 1, accounts: [] } ]

	mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
	mutations.addOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } })
	expect(state.allStatusesObject['1'].emoji_reactions[0].count).to.eql(2)
	+ expect(state.allStatusesObject['1'].emoji_reactions[0].me).to.eql(true)
	expect(state.allStatusesObject['1'].emoji_reactions[0].accounts[0].id).to.eql('me')
	})

	it('adds a new reaction', () => {
	const state = defaultState()
	const status = makeMockStatus({ id: '1' })
	status.emoji_reactions = []

	mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
	mutations.addOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } })
	expect(state.allStatusesObject['1'].emoji_reactions[0].count).to.eql(1)
	+ expect(state.allStatusesObject['1'].emoji_reactions[0].me).to.eql(true)
	expect(state.allStatusesObject['1'].emoji_reactions[0].accounts[0].id).to.eql('me')
	})

	it('decreases count in existing reaction', () => {
	const state = defaultState()
	const status = makeMockStatus({ id: '1' })
	- status.emoji_reactions = [ { emoji: '😂', count: 2, accounts: [{ id: 'me' }] } ]
	+ status.emoji_reactions = [ { name: '😂', count: 2, accounts: [{ id: 'me' }] } ]

	mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
	- mutations.removeOwnReaction(state, { id: '1', emoji: '😂', currentUser: {} })
	+ mutations.removeOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } })
	expect(state.allStatusesObject['1'].emoji_reactions[0].count).to.eql(1)
	+ expect(state.allStatusesObject['1'].emoji_reactions[0].me).to.eql(false)
	expect(state.allStatusesObject['1'].emoji_reactions[0].accounts).to.eql([])
	})

	it('removes a reaction', () => {
	const state = defaultState()
	const status = makeMockStatus({ id: '1' })
	- status.emoji_reactions = [{ emoji: '😂', count: 1, accounts: [{ id: 'me' }] }]
	+ status.emoji_reactions = [{ name: '😂', count: 1, accounts: [{ id: 'me' }] }]

	mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
	- mutations.removeOwnReaction(state, { id: '1', emoji: '😂', currentUser: {} })
	+ mutations.removeOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } })
	expect(state.allStatusesObject['1'].emoji_reactions.length).to.eql(0)
	})
	})

	describe('showNewStatuses', () => {
	it('resets the minId to the min of the visible statuses when adding new to visible statuses', () => {
	const state = defaultState()
	const status = makeMockStatus({ id: '10' })
	mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
	const newStatus = makeMockStatus({ id: '20' })
	mutations.addNewStatuses(state, { statuses: [newStatus], showImmediately: false, timeline: 'public' })
	state.timelines.public.minId = '5'
	mutations.showNewStatuses(state, { timeline: 'public' })

	expect(state.timelines.public.visibleStatuses.length).to.eql(2)
	expect(state.timelines.public.minVisibleId).to.eql('10')
	expect(state.timelines.public.minId).to.eql('10')
	})
	})

	describe('clearTimeline', () => {
	it('keeps userId when clearing user timeline when excludeUserId param is true', () => {
	const state = defaultState()
	state.timelines.user.userId = 123

	mutations.clearTimeline(state, { timeline: 'user', excludeUserId: true })

	expect(state.timelines.user.userId).to.eql(123)
	})
	})

	describe('notifications', () => {
	it('removes a notification when the notice gets removed', () => {
	const user = { id: '1' }
	const state = defaultState()
	const status = makeMockStatus({ id: '1' })
	const otherStatus = makeMockStatus({ id: '3' })
	const mentionedStatus = makeMockStatus({ id: '2' })
	mentionedStatus.attentions = [user]
	mentionedStatus.uri = 'xxx'
	otherStatus.attentions = [user]

	const deletion = makeMockStatus({ id: '4', type: 'deletion' })
	deletion.text = 'Dolus deleted notice {{tag:gs.smuglo.li,2016-11-18:noticeId=1038007:objectType=note}}.'
	deletion.uri = 'xxx'

	mutations.addNewStatuses(state, { statuses: [status, otherStatus], user })
	mutations.addNewNotifications(
	state,
	{
	notifications: [{
	from_profile: { id: '2' },
	id: '998',
	type: 'mention',
	status: otherStatus,
	action: otherStatus,
	seen: false
	}]
	})

	expect(state.notifications.data.length).to.eql(1)
	mutations.addNewNotifications(
	state,
	{
	notifications: [{
	from_profile: { id: '2' },
	id: '999',
	type: 'mention',
	status: mentionedStatus,
	action: mentionedStatus,
	seen: false
	}]
	})

	mutations.addNewStatuses(state, { statuses: [mentionedStatus], user })
	expect(state.allStatuses.length).to.eql(3)
	expect(state.notifications.data.length).to.eql(2)
	expect(state.notifications.data[1].status).to.eql(mentionedStatus)
	expect(state.notifications.data[1].action).to.eql(mentionedStatus)
	expect(state.notifications.data[1].type).to.eql('mention')

	mutations.addNewStatuses(state, { statuses: [deletion], user })
	expect(state.allStatuses.length).to.eql(2)
	expect(state.notifications.data.length).to.eql(1)
	})
	})
	})

File Metadata

Mime Type: text/x-diff
Expires: Sat, Sep 19, 3:00 AM (18 h, 53 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1768699
Default Alt Text: (295 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions