No OneTemporary
Actions

Size

214 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.scss b/src/App.scss
	index 754ca62e6b..922e39b66e 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,885 +1,885 @@
	@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;
	background-color: rgba(0,0,0,0.15);
	align-content: flex-start;
	}

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

	&:disabled {
	cursor: not-allowed;
	opacity: 0.5;
	}

	&.pressed {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg)
	}

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

	label.select {
	padding: 0;

	}

	input, textarea, .select {
	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;
	padding: 8px .5em;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	height: 28px;
	line-height: 16px;
	hyphens: none;

	&: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(--text, $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(--link, $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(--text, $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;

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

	.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;
	}

	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 00d6d2b7ac..e5b6d9f576 100644
	--- a/src/components/emoji_reactions/emoji_reactions.vue
	+++ b/src/components/emoji_reactions/emoji_reactions.vue
	@@ -1,49 +1,136 @@
	<template>
	<div class="emoji-reactions">
	- <button
	+ <v-popover
	v-for="(reaction) in emojiReactions"
	- :key="reaction.emoji"
	- class="emoji-reaction btn btn-default"
	- :class="{ 'picked-reaction': 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;
	+ }
	}

	.picked-reaction {
	border: 1px solid var(--link, $fallback--link);
	margin-left: -1px; // offset the border, can't use inset shadows either
	margin-right: calc(0.5em - 1px);
	}

	</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 148ac7f242..8d819a56a0 100644
	--- a/src/components/notifications/notifications.scss
	+++ b/src/components/notifications/notifications.scss
	@@ -1,181 +1,185 @@
	@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);
	}
	}
	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 cef492f350..60cb8a8761 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.vue b/src/components/status/status.vue
	index 0a82dcbeb0..83f07dacbd 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,927 +1,928 @@
	<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") }}
	<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(--lightBg, $fallback--lightBg);
	}

	.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;
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	}

	.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;

	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/i18n/en.json b/src/i18n/en.json
	index 74e71fc8c8..d0d654d331 100644
	--- a/src/i18n/en.json
	+++ b/src/i18n/en.json
	@@ -1,698 +1,701 @@
	{
	"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": {
	"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",
	"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.",
	"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"
	},
	"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",
	"badge": "Badge background",
	"badge_notification": "Notification",
	"panel_header": "Panel header",
	"top_bar": "Top bar",
	"borders": "Borders",
	"buttons": "Buttons",
	"inputs": "Input fields",
	"faint_text": "Faded text"
	},
	"radii": {
	"_tab_label": "Roundness"
	},
	"shadows": {
	"_tab_label": "Shadow and lighting",
	"component": "Component",
	"override": "Override",
	"shadow_id": "Shadow #{value}",
	"blur": "Blur",
	"spread": "Spread",
	"inset": "Inset",
	"hint": "For shadows you can also use --variable as a color value to use CSS3 variables. Please note that setting opacity won't work in this case.",
	"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 de9f041b0d..8381fa530c 100644
	--- a/src/modules/config.js
	+++ b/src/modules/config.js
	@@ -1,106 +1,108 @@
	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: {},
	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, commit)
	break
	case 'customTheme':
	applyTheme(value, commit)
	}
	}
	}
	}

	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 b794fd5816..20eaa9a0f9 100644
	--- a/src/services/api/api.service.js
	+++ b/src/services/api/api.service.js
	@@ -1,1174 +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,
	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 0a8abbbd6e..84169a7b05 100644
	--- a/src/services/entity_normalizer/entity_normalizer.service.js
	+++ b/src/services/entity_normalizer/entity_normalizer.service.js
	@@ -1,377 +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/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: Thu, Oct 8, 9:10 PM (11 h, 20 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1784277
Default Alt Text: (214 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions