No OneTemporary
Actions

Authored By

Unknown

Size

547 KB

Referenced Files

None

Subscribers

None

View Options

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

	diff --git a/CHANGELOG.md b/CHANGELOG.md
	index ff4c2fd1b9..d08da09e59 100644
	--- a/CHANGELOG.md
	+++ b/CHANGELOG.md
	@@ -1,13 +1,15 @@
	# Changelog
	All notable changes to this project will be documented in this file.

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

	## [Unreleased]
	### Added
	+- Ability to hide/show repeats from user
	+- User profile button clutter organized into a menu
	- Emoji picker
	- Started changelog anew
	### Changed
	- changed the way fading effects for user profile/long statuses works, now uses css-mask instead of gradient background hacks which weren't exactly compatible with semi-transparent themes
	### Fixed
	- improved hotkey behavior on autocomplete popup
	diff --git a/src/App.js b/src/App.js
	index fe63b54c53..04a40e304a 100644
	--- a/src/App.js
	+++ b/src/App.js
	@@ -1,121 +1,121 @@
	import UserPanel from './components/user_panel/user_panel.vue'
	import NavPanel from './components/nav_panel/nav_panel.vue'
	import Notifications from './components/notifications/notifications.vue'
	import SearchBar from './components/search_bar/search_bar.vue'
	import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
	import FeaturesPanel from './components/features_panel/features_panel.vue'
	import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
	import ChatPanel from './components/chat_panel/chat_panel.vue'
	import MediaModal from './components/media_modal/media_modal.vue'
	import SideDrawer from './components/side_drawer/side_drawer.vue'
	import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
	import MobileNav from './components/mobile_nav/mobile_nav.vue'
	import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
	import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
	import { windowWidth } from './services/window_utils/window_utils'

	export default {
	name: 'app',
	components: {
	UserPanel,
	NavPanel,
	Notifications,
	SearchBar,
	InstanceSpecificPanel,
	FeaturesPanel,
	WhoToFollowPanel,
	ChatPanel,
	MediaModal,
	SideDrawer,
	MobilePostStatusButton,
	MobileNav,
	UserReportingModal,
	PostStatusModal
	},
	data: () => ({
	mobileActivePanel: 'timeline',
	searchBarHidden: true,
	supportsMask: window.CSS && window.CSS.supports && (
	window.CSS.supports('mask-size', 'contain') \|\|
	window.CSS.supports('-webkit-mask-size', 'contain') \|\|
	window.CSS.supports('-moz-mask-size', 'contain') \|\|
	window.CSS.supports('-ms-mask-size', 'contain') \|\|
	window.CSS.supports('-o-mask-size', 'contain')
	)
	}),
	created () {
	// Load the locale from the storage
	- this.$i18n.locale = this.$store.state.config.interfaceLanguage
	+ this.$i18n.locale = this.$store.getters.mergedConfig.interfaceLanguage
	window.addEventListener('resize', this.updateMobileState)
	},
	destroyed () {
	window.removeEventListener('resize', this.updateMobileState)
	},
	computed: {
	currentUser () { return this.$store.state.users.currentUser },
	background () {
	return this.currentUser.background_image \|\| this.$store.state.instance.background
	},
	enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
	logoStyle () {
	return {
	'visibility': this.enableMask ? 'hidden' : 'visible'
	}
	},
	logoMaskStyle () {
	return this.enableMask ? {
	'mask-image': `url(${this.$store.state.instance.logo})`
	} : {
	'background-color': this.enableMask ? '' : 'transparent'
	}
	},
	logoBgStyle () {
	return Object.assign({
	'margin': `${this.$store.state.instance.logoMargin} 0`,
	opacity: this.searchBarHidden ? 1 : 0
	}, this.enableMask ? {} : {
	'background-color': this.enableMask ? '' : 'transparent'
	})
	},
	logo () { return this.$store.state.instance.logo },
	bgStyle () {
	return {
	'background-image': `url(${this.background})`
	}
	},
	bgAppStyle () {
	return {
	'--body-background-image': `url(${this.background})`
	}
	},
	sitename () { return this.$store.state.instance.name },
	chat () { return this.$store.state.chat.channel.state === 'joined' },
	suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
	showInstanceSpecificPanel () {
	return this.$store.state.instance.showInstanceSpecificPanel &&
	- !this.$store.state.config.hideISP &&
	+ !this.$store.getters.mergedConfig.hideISP &&
	this.$store.state.instance.instanceSpecificPanelContent
	},
	showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
	isMobileLayout () { return this.$store.state.interface.mobileLayout }
	},
	methods: {
	scrollToTop () {
	window.scrollTo(0, 0)
	},
	logout () {
	this.$router.replace('/main/public')
	this.$store.dispatch('logout')
	},
	onSearchBarToggled (hidden) {
	this.searchBarHidden = hidden
	},
	updateMobileState () {
	const mobileLayout = windowWidth() <= 800
	const changed = mobileLayout !== this.isMobileLayout
	if (changed) {
	this.$store.dispatch('setMobileLayout', mobileLayout)
	}
	}
	}
	}
	diff --git a/src/App.scss b/src/App.scss
	index 2190f91a3b..2d10f1e7e2 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,867 +1,845 @@
	@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);
	- font-size: 14px;
	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: 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);
	}
	}
	}

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

	-@keyframes modal-background-fadein {
	- from {
	- background-color: rgba(0, 0, 0, 0);
	- }
	- to {
	- background-color: rgba(0, 0, 0, 0.5);
	- }
	-}
	-
	-.modal-view {
	- z-index: 1000;
	- position: fixed;
	- top: 0;
	- left: 0;
	- right: 0;
	- bottom: 0;
	- display: flex;
	- justify-content: center;
	- align-items: center;
	- overflow: auto;
	- animation-duration: 0.2s;
	- background-color: rgba(0, 0, 0, 0.5);
	- animation-name: modal-background-fadein;
	-}
	-
	.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;
	}
	diff --git a/src/boot/routes.js b/src/boot/routes.js
	index cd02711cc3..5670236c77 100644
	--- a/src/boot/routes.js
	+++ b/src/boot/routes.js
	@@ -1,63 +1,63 @@
	import PublicTimeline from 'components/public_timeline/public_timeline.vue'
	import PublicAndExternalTimeline from 'components/public_and_external_timeline/public_and_external_timeline.vue'
	import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue'
	import TagTimeline from 'components/tag_timeline/tag_timeline.vue'
	import ConversationPage from 'components/conversation-page/conversation-page.vue'
	import Interactions from 'components/interactions/interactions.vue'
	import DMs from 'components/dm_timeline/dm_timeline.vue'
	import UserProfile from 'components/user_profile/user_profile.vue'
	import Search from 'components/search/search.vue'
	import Settings from 'components/settings/settings.vue'
	import Registration from 'components/registration/registration.vue'
	import PasswordReset from 'components/password_reset/password_reset.vue'
	import UserSettings from 'components/user_settings/user_settings.vue'
	import FollowRequests from 'components/follow_requests/follow_requests.vue'
	import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
	import Notifications from 'components/notifications/notifications.vue'
	import AuthForm from 'components/auth_form/auth_form.js'
	import ChatPanel from 'components/chat_panel/chat_panel.vue'
	import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
	import About from 'components/about/about.vue'

	export default (store) => {
	const validateAuthenticatedRoute = (to, from, next) => {
	if (store.state.users.currentUser) {
	next()
	} else {
	next(store.state.instance.redirectRootNoLogin \|\| '/main/all')
	}
	}

	return [
	{ name: 'root',
	path: '/',
	redirect: _to => {
	return (store.state.users.currentUser
	? store.state.instance.redirectRootLogin
	: store.state.instance.redirectRootNoLogin) \|\| '/main/all'
	}
	},
	{ name: 'public-external-timeline', path: '/main/all', component: PublicAndExternalTimeline },
	{ name: 'public-timeline', path: '/main/public', component: PublicTimeline },
	{ name: 'friends', path: '/main/friends', component: FriendsTimeline, beforeEnter: validateAuthenticatedRoute },
	{ name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
	{ name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
	{ name: 'external-user-profile', path: '/users/:id', component: UserProfile },
	{ name: 'interactions', path: '/users/:username/interactions', component: Interactions, beforeEnter: validateAuthenticatedRoute },
	{ name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute },
	{ name: 'settings', path: '/settings', component: Settings },
	{ name: 'registration', path: '/registration', component: Registration },
	- { name: 'password-reset', path: '/password-reset', component: PasswordReset },
	+ { name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
	{ name: 'registration-token', path: '/registration/:token', component: Registration },
	{ name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
	{ name: 'user-settings', path: '/user-settings', component: UserSettings, beforeEnter: validateAuthenticatedRoute },
	{ name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute },
	{ name: 'login', path: '/login', component: AuthForm },
	{ name: 'chat', path: '/chat', component: ChatPanel, props: () => ({ floating: false }) },
	{ name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
	{ name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
	{ name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
	{ name: 'about', path: '/about', component: About },
	{ name: 'user-profile', path: '/(users/)?:name', component: UserProfile }
	]
	}
	diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
	new file mode 100644
	index 0000000000..204d506a2d
	--- /dev/null
	+++ b/src/components/account_actions/account_actions.js
	@@ -0,0 +1,35 @@
	+import ProgressButton from '../progress_button/progress_button.vue'
	+
	+const AccountActions = {
	+ props: [
	+ 'user'
	+ ],
	+ data () {
	+ return { }
	+ },
	+ components: {
	+ ProgressButton
	+ },
	+ methods: {
	+ showRepeats () {
	+ this.$store.dispatch('showReblogs', this.user.id)
	+ },
	+ hideRepeats () {
	+ this.$store.dispatch('hideReblogs', this.user.id)
	+ },
	+ blockUser () {
	+ this.$store.dispatch('blockUser', this.user.id)
	+ },
	+ unblockUser () {
	+ this.$store.dispatch('unblockUser', this.user.id)
	+ },
	+ reportUser () {
	+ this.$store.dispatch('openUserReportingModal', this.user.id)
	+ },
	+ mentionUser () {
	+ this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
	+ }
	+ }
	+}
	+
	+export default AccountActions
	diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
	new file mode 100644
	index 0000000000..046cba93ae
	--- /dev/null
	+++ b/src/components/account_actions/account_actions.vue
	@@ -0,0 +1,93 @@
	+<template>
	+ <div class="account-actions">
	+ <v-popover
	+ trigger="click"
	+ class="account-tools-popover"
	+ :container="false"
	+ placement="bottom-end"
	+ :offset="5"
	+ >
	+ <div slot="popover">
	+ <div class="dropdown-menu">
	+ <button
	+ class="btn btn-default btn-block dropdown-item"
	+ @click="mentionUser"
	+ >
	+ {{ $t('user_card.mention') }}
	+ </button>
	+ <template v-if="user.following">
	+ <div
	+ role="separator"
	+ class="dropdown-divider"
	+ />
	+ <button
	+ v-if="user.showing_reblogs"
	+ class="btn btn-default dropdown-item"
	+ @click="hideRepeats"
	+ >
	+ {{ $t('user_card.hide_repeats') }}
	+ </button>
	+ <button
	+ v-if="!user.showing_reblogs"
	+ class="btn btn-default dropdown-item"
	+ @click="showRepeats"
	+ >
	+ {{ $t('user_card.show_repeats') }}
	+ </button>
	+ </template>
	+ <div
	+ role="separator"
	+ class="dropdown-divider"
	+ />
	+ <button
	+ v-if="user.statusnet_blocking"
	+ class="btn btn-default btn-block dropdown-item"
	+ @click="unblockUser"
	+ >
	+ {{ $t('user_card.unblock') }}
	+ </button>
	+ <button
	+ v-else
	+ class="btn btn-default btn-block dropdown-item"
	+ @click="blockUser"
	+ >
	+ {{ $t('user_card.block') }}
	+ </button>
	+ <button
	+ class="btn btn-default btn-block dropdown-item"
	+ @click="reportUser"
	+ >
	+ {{ $t('user_card.report') }}
	+ </button>
	+ </div>
	+ </div>
	+ <div class="btn btn-default ellipsis-button">
	+ <i class="icon-ellipsis trigger-button" />
	+ </div>
	+ </v-popover>
	+ </div>
	+</template>
	+
	+<script src="./account_actions.js"></script>
	+
	+<style lang="scss">
	+@import '../../_variables.scss';
	+@import '../popper/popper.scss';
	+.account-actions {
	+ margin: 0 .8em;
	+}
	+
	+.account-actions button.dropdown-item {
	+ margin-left: 0;
	+}
	+.account-actions .trigger-button {
	+ color: $fallback--lightText;
	+ color: var(--lightText, $fallback--lightText);
	+ opacity: .8;
	+ cursor: pointer;
	+ &:hover {
	+ color: $fallback--text;
	+ color: var(--text, $fallback--text);
	+ }
	+}
	+</style>
	diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
	index e93921fe11..06b496b013 100644
	--- a/src/components/attachment/attachment.js
	+++ b/src/components/attachment/attachment.js
	@@ -1,95 +1,101 @@
	import StillImage from '../still-image/still-image.vue'
	import VideoAttachment from '../video_attachment/video_attachment.vue'
	import nsfwImage from '../../assets/nsfw.png'
	import fileTypeService from '../../services/file_type/file_type.service.js'

	const Attachment = {
	props: [
	'attachment',
	'nsfw',
	'statusId',
	'size',
	'allowPlay',
	- 'setMedia'
	+ 'setMedia',
	+ 'naturalSizeLoad'
	],
	data () {
	return {
	nsfwImage: this.$store.state.instance.nsfwCensorImage \|\| nsfwImage,
	- hideNsfwLocal: this.$store.state.config.hideNsfw,
	- preloadImage: this.$store.state.config.preloadImage,
	+ hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
	+ preloadImage: this.$store.getters.mergedConfig.preloadImage,
	loading: false,
	img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
	modalOpen: false,
	showHidden: false
	}
	},
	components: {
	StillImage,
	VideoAttachment
	},
	computed: {
	usePlaceHolder () {
	return this.size === 'hide' \|\| this.type === 'unknown'
	},
	referrerpolicy () {
	return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer'
	},
	type () {
	return fileTypeService.fileType(this.attachment.mimetype)
	},
	hidden () {
	return this.nsfw && this.hideNsfwLocal && !this.showHidden
	},
	isEmpty () {
	return (this.type === 'html' && !this.attachment.oembed) \|\| this.type === 'unknown'
	},
	isSmall () {
	return this.size === 'small'
	},
	fullwidth () {
	return this.type === 'html' \|\| this.type === 'audio'
	}
	},
	methods: {
	linkClicked ({ target }) {
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	},
	openModal (event) {
	- const modalTypes = this.$store.state.config.playVideosInModal
	+ const modalTypes = this.$store.getters.mergedConfig.playVideosInModal
	? ['image', 'video']
	: ['image']
	if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) \|\|
	this.usePlaceHolder
	) {
	event.stopPropagation()
	event.preventDefault()
	this.setMedia()
	this.$store.dispatch('setCurrent', this.attachment)
	}
	},
	toggleHidden (event) {
	- if (this.$store.state.config.useOneClickNsfw && !this.showHidden) {
	+ if (this.$store.getters.mergedConfig.useOneClickNsfw && !this.showHidden) {
	this.openModal(event)
	return
	}
	if (this.img && !this.preloadImage) {
	if (this.img.onload) {
	this.img.onload()
	} else {
	this.loading = true
	this.img.src = this.attachment.url
	this.img.onload = () => {
	this.loading = false
	this.showHidden = !this.showHidden
	}
	}
	} else {
	this.showHidden = !this.showHidden
	}
	+ },
	+ onImageLoad (image) {
	+ const width = image.naturalWidth
	+ const height = image.naturalHeight
	+ this.naturalSizeLoad && this.naturalSizeLoad({ width, height })
	}
	}
	}

	export default Attachment
	diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
	index af16e302df..0748b2f042 100644
	--- a/src/components/attachment/attachment.vue
	+++ b/src/components/attachment/attachment.vue
	@@ -1,294 +1,295 @@
	<template>
	<div
	v-if="usePlaceHolder"
	@click="openModal"
	>
	<a
	v-if="type !== 'html'"
	class="placeholder"
	target="_blank"
	:href="attachment.url"
	>
	[{{ nsfw ? "NSFW/" : "" }}{{ type.toUpperCase() }}]
	</a>
	</div>
	<div
	v-else
	v-show="!isEmpty"
	class="attachment"
	:class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
	>
	<a
	v-if="hidden"
	class="image-attachment"
	:href="attachment.url"
	@click.prevent="toggleHidden"
	>
	<img
	:key="nsfwImage"
	class="nsfw"
	:src="nsfwImage"
	:class="{'small': isSmall}"
	>
	<i
	v-if="type === 'video'"
	class="play-icon icon-play-circled"
	/>
	</a>
	<div
	v-if="nsfw && hideNsfwLocal && !hidden"
	class="hider"
	>
	<a
	href="#"
	@click.prevent="toggleHidden"
	>Hide</a>
	</div>

	<a
	v-if="type === 'image' && (!hidden \|\| preloadImage)"
	class="image-attachment"
	:class="{'hidden': hidden && preloadImage }"
	:href="attachment.url"
	target="_blank"
	:title="attachment.description"
	@click="openModal"
	>
	<StillImage
	:referrerpolicy="referrerpolicy"
	:mimetype="attachment.mimetype"
	:src="attachment.large_thumb_url \|\| attachment.url"
	+ :image-load-handler="onImageLoad"
	/>
	</a>

	<a
	v-if="type === 'video' && !hidden"
	class="video-container"
	:class="{'small': isSmall}"
	:href="allowPlay ? undefined : attachment.url"
	@click="openModal"
	>
	<VideoAttachment
	class="video"
	:attachment="attachment"
	:controls="allowPlay"
	/>
	<i
	v-if="!allowPlay"
	class="play-icon icon-play-circled"
	/>
	</a>

	<audio
	v-if="type === 'audio'"
	:src="attachment.url"
	controls
	/>

	<div
	v-if="type === 'html' && attachment.oembed"
	class="oembed"
	@click.prevent="linkClicked"
	>
	<div
	v-if="attachment.thumb_url"
	class="image"
	>
	<img :src="attachment.thumb_url">
	</div>
	<div class="text">
	<!-- eslint-disable vue/no-v-html -->
	<h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1>
	<div v-html="attachment.oembed.oembedHTML" />
	<!-- eslint-enable vue/no-v-html -->
	</div>
	</div>
	</div>
	</template>

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

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

	.attachments {
	display: flex;
	flex-wrap: wrap;

	.attachment.media-upload-container {
	flex: 0 0 auto;
	max-height: 200px;
	max-width: 100%;
	display: flex;
	align-items: center;
	video {
	max-width: 100%;
	}
	}

	.placeholder {
	margin-right: 8px;
	margin-bottom: 4px;
	}

	.nsfw-placeholder {
	cursor: pointer;

	&.loading {
	cursor: progress;
	}
	}

	.attachment {
	position: relative;
	margin-top: 0.5em;
	align-self: flex-start;
	line-height: 0;

	border-style: solid;
	border-width: 1px;
	border-radius: $fallback--attachmentRadius;
	border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	overflow: hidden;
	}

	.non-gallery.attachment {
	&.video {
	flex: 1 0 40%;
	}
	.nsfw {
	height: 260px;
	}
	.small {
	height: 120px;
	flex-grow: 0;
	}
	.video {
	height: 260px;
	display: flex;
	}
	video {
	max-height: 100%;
	object-fit: contain;
	}
	}

	.fullwidth {
	flex-basis: 100%;
	}
	// fixes small gap below video
	&.video {
	line-height: 0;
	}

	.video-container {
	display: flex;
	max-height: 100%;
	}

	.video {
	width: 100%;
	height: 100%;
	}

	.play-icon {
	position: absolute;
	font-size: 64px;
	top: calc(50% - 32px);
	left: calc(50% - 32px);
	color: rgba(255, 255, 255, 0.75);
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
	}

	.play-icon::before {
	margin: 0;
	}

	&.html {
	flex-basis: 90%;
	width: 100%;
	display: flex;
	}

	.hider {
	position: absolute;
	right: 0;
	white-space: nowrap;
	margin: 10px;
	padding: 5px;
	background: rgba(230,230,230,0.6);
	font-weight: bold;
	z-index: 4;
	line-height: 1;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	}

	video {
	z-index: 0;
	}

	audio {
	width: 100%;
	}

	img.media-upload {
	line-height: 0;
	max-height: 200px;
	max-width: 100%;
	}

	.oembed {
	line-height: 1.2em;
	flex: 1 0 100%;
	width: 100%;
	margin-right: 15px;
	display: flex;

	img {
	width: 100%;
	}

	.image {
	flex: 1;
	img {
	border: 0px;
	border-radius: 5px;
	height: 100%;
	object-fit: cover;
	}
	}

	.text {
	flex: 2;
	margin: 8px;
	word-break: break-all;
	h1 {
	font-size: 14px;
	margin: 0px;
	}
	}
	}

	.image-attachment {
	width: 100%;
	height: 100%;

	&.hidden {
	display: none;
	}

	.nsfw {
	object-fit: cover;
	width: 100%;
	height: 100%;
	}

	img {
	image-orientation: from-image; // NOTE: only FF supports this
	}
	}
	}
	</style>
	diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
	index 2b822ec3fb..5917598afc 100644
	--- a/src/components/checkbox/checkbox.vue
	+++ b/src/components/checkbox/checkbox.vue
	@@ -1,80 +1,105 @@
	<template>
	- <label class="checkbox">
	+ <label
	+ class="checkbox"
	+ :class="{ disabled, indeterminate }"
	+ >
	<input
	type="checkbox"
	+ :disabled="disabled"
	:checked="checked"
	:indeterminate.prop="indeterminate"
	@change="$emit('change', $event.target.checked)"
	>
	<i class="checkbox-indicator" />
	- <span v-if="!!$slots.default"><slot /></span>
	+ <span
	+ class="label"
	+ v-if="!!$slots.default"
	+ >
	+ <slot />
	+ </span>
	</label>
	</template>

	<script>
	export default {
	model: {
	prop: 'checked',
	event: 'change'
	},
	- props: ['checked', 'indeterminate']
	+ props: [
	+ 'checked',
	+ 'indeterminate',
	+ 'disabled'
	+ ]
	}
	</script>

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

	.checkbox {
	position: relative;
	display: inline-block;
	- padding-left: 1.2em;
	min-height: 1.2em;

	+ &-indicator {
	+ position: relative;
	+ padding-left: 1.2em;
	+ }
	+
	&-indicator::before {
	position: absolute;
	- left: 0;
	+ right: 0;
	top: 0;
	display: 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);
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	vertical-align: top;
	text-align: center;
	line-height: 1.1em;
	font-size: 1.1em;
	color: transparent;
	overflow: hidden;
	box-sizing: border-box;
	}

	+ &.disabled {
	+ .checkbox-indicator::before,
	+ .label {
	+ opacity: .5;
	+ }
	+ .label {
	+ color: $fallback--faint;
	+ color: var(--faint, $fallback--faint);
	+ }
	+ }
	+
	input[type=checkbox] {
	display: none;

	&:checked + .checkbox-indicator::before {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}

	&:indeterminate + .checkbox-indicator::before {
	content: '–';
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}

	- &:disabled + .checkbox-indicator::before {
	- opacity: .5;
	- }
	}

	& > span {
	margin-left: .5em;
	}
	}
	</style>
	diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
	index a586b8191e..366951c04c 100644
	--- a/src/components/emoji_input/emoji_input.js
	+++ b/src/components/emoji_input/emoji_input.js
	@@ -1,431 +1,431 @@
	import Completion from '../../services/completion/completion.js'
	import EmojiPicker from '../emoji_picker/emoji_picker.vue'
	import { take } from 'lodash'
	import { findOffset } from '../../services/offset_finder/offset_finder.service.js'

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

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

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

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

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

	this.$nextTick(function () {
	// Re-focus inputbox after clicking suggestion
	this.input.elm.focus()
	// Set selection right after the replacement instead of the very end
	this.input.elm.setSelectionRange(position, position)
	this.caret = position
	})
	e.preventDefault()
	}
	},
	cycleBackward (e) {
	const len = this.suggestions.length \|\| 0
	if (len > 1) {
	this.highlighted -= 1
	if (this.highlighted < 0) {
	this.highlighted = this.suggestions.length - 1
	}
	e.preventDefault()
	} else {
	this.highlighted = 0
	}
	},
	cycleForward (e) {
	const len = this.suggestions.length \|\| 0
	if (len > 1) {
	this.highlighted += 1
	if (this.highlighted >= len) {
	this.highlighted = 0
	}
	e.preventDefault()
	} else {
	this.highlighted = 0
	}
	},
	scrollIntoView () {
	const rootRef = this.$refs['picker'].$el
	/* Scroller is either `window` (replies in TL), sidebar (main post form,
	* replies in notifs) or mobile post form. Note that getting and setting
	* scroll is different for `Window` and `Element`s
	*/
	const scrollerRef = this.$el.closest('.sidebar-scroller') \|\|
	this.$el.closest('.post-form-modal-view') \|\|
	window
	const currentScroll = scrollerRef === window
	? scrollerRef.scrollY
	: scrollerRef.scrollTop
	const scrollerHeight = scrollerRef === window
	? scrollerRef.innerHeight
	: scrollerRef.offsetHeight

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

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

	if (scrollerRef === window) {
	scrollerRef.scroll(0, targetScroll)
	} else {
	scrollerRef.scrollTop = targetScroll
	}
	},
	onTransition (e) {
	this.resize()
	},
	onBlur (e) {
	// Clicking on any suggestion removes focus from autocomplete,
	// preventing click handler ever executing.
	this.blurTimeout = setTimeout(() => {
	this.focused = false
	this.setCaret(e)
	this.resize()
	}, 200)
	},
	onClick (e, suggestion) {
	this.replaceText(e, suggestion)
	},
	onFocus (e) {
	if (this.blurTimeout) {
	clearTimeout(this.blurTimeout)
	this.blurTimeout = null
	}

	if (!this.keepOpen) {
	this.showPicker = false
	}
	this.focused = true
	this.setCaret(e)
	this.resize()
	this.temporarilyHideSuggestions = false
	},
	onKeyUp (e) {
	const { key } = e
	this.setCaret(e)
	this.resize()

	// Setting hider in keyUp to prevent suggestions from blinking
	// when moving away from suggested spot
	if (key === 'Escape') {
	this.temporarilyHideSuggestions = true
	} else {
	this.temporarilyHideSuggestions = false
	}
	},
	onPaste (e) {
	this.setCaret(e)
	this.resize()
	},
	onKeyDown (e) {
	const { ctrlKey, shiftKey, key } = e
	// Disable suggestions hotkeys if suggestions are hidden
	if (!this.temporarilyHideSuggestions) {
	if (key === 'Tab') {
	if (shiftKey) {
	this.cycleBackward(e)
	} else {
	this.cycleForward(e)
	}
	}
	if (key === 'ArrowUp') {
	this.cycleBackward(e)
	} else if (key === 'ArrowDown') {
	this.cycleForward(e)
	}
	if (key === 'Enter') {
	if (!ctrlKey) {
	this.replaceText(e)
	}
	}
	}
	// Probably add optional keyboard controls for emoji picker?

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

	this.showPicker = false
	this.resize()
	},
	onInput (e) {
	this.showPicker = false
	this.setCaret(e)
	this.resize()
	this.$emit('input', e.target.value)
	},
	onCompositionUpdate (e) {
	this.showPicker = false
	this.setCaret(e)
	this.resize()
	this.$emit('input', e.target.value)
	},
	onClickInput (e) {
	this.showPicker = false
	},
	onClickOutside (e) {
	if (this.disableClickOutside) return
	this.showPicker = false
	},
	onStickerUploaded (e) {
	this.showPicker = false
	this.$emit('sticker-uploaded', e)
	},
	onStickerUploadFailed (e) {
	this.showPicker = false
	this.$emit('sticker-upload-Failed', e)
	},
	setCaret ({ target: { selectionStart } }) {
	this.caret = selectionStart
	},
	resize () {
	const { panel } = this.$refs
	if (!panel) return
	const { offsetHeight, offsetTop } = this.input.elm
	this.$refs.panel.style.top = (offsetTop + offsetHeight) + 'px'
	this.$refs.picker.$el.style.top = (offsetTop + offsetHeight) + 'px'
	}
	}
	}

	export default EmojiInput
	diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
	index 824412ddc0..b1d70176f0 100644
	--- a/src/components/emoji_picker/emoji_picker.js
	+++ b/src/components/emoji_picker/emoji_picker.js
	@@ -1,115 +1,116 @@
	+import Checkbox from '../checkbox/checkbox.vue'

	const filterByKeyword = (list, keyword = '') => {
	return list.filter(x => x.displayText.includes(keyword))
	}

	const EmojiPicker = {
	props: {
	enableStickerPicker: {
	required: false,
	type: Boolean,
	default: false
	}
	},
	data () {
	return {
	- labelKey: String(Math.random() * 100000),
	keyword: '',
	activeGroup: 'custom',
	showingStickers: false,
	groupsScrolledClass: 'scrolled-top',
	keepOpen: false
	}
	},
	components: {
	- StickerPicker: () => import('../sticker_picker/sticker_picker.vue')
	+ StickerPicker: () => import('../sticker_picker/sticker_picker.vue'),
	+ Checkbox
	},
	methods: {
	onEmoji (emoji) {
	const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
	this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
	},
	highlight (key) {
	const ref = this.$refs['group-' + key]
	const top = ref[0].offsetTop
	this.setShowStickers(false)
	this.activeGroup = key
	this.$nextTick(() => {
	this.$refs['emoji-groups'].scrollTop = top + 1
	})
	},
	scrolledGroup (e) {
	const target = (e && e.target) \|\| this.$refs['emoji-groups']
	const top = target.scrollTop + 5
	if (target.scrollTop <= 5) {
	this.groupsScrolledClass = 'scrolled-top'
	} else if (target.scrollTop >= target.scrollTopMax - 5) {
	this.groupsScrolledClass = 'scrolled-bottom'
	} else {
	this.groupsScrolledClass = 'scrolled-middle'
	}
	this.$nextTick(() => {
	this.emojisView.forEach(group => {
	const ref = this.$refs['group-' + group.id]
	if (ref[0].offsetTop <= top) {
	this.activeGroup = group.id
	}
	})
	})
	},
	toggleStickers () {
	this.showingStickers = !this.showingStickers
	},
	setShowStickers (value) {
	this.showingStickers = value
	},
	onStickerUploaded (e) {
	this.$emit('sticker-uploaded', e)
	},
	onStickerUploadFailed (e) {
	this.$emit('sticker-upload-failed', e)
	}
	},
	watch: {
	keyword () {
	this.scrolledGroup()
	}
	},
	computed: {
	activeGroupView () {
	return this.showingStickers ? '' : this.activeGroup
	},
	stickersAvailable () {
	if (this.$store.state.instance.stickers) {
	return this.$store.state.instance.stickers.length > 0
	}
	return 0
	},
	emojis () {
	const standardEmojis = this.$store.state.instance.emoji \|\| []
	const customEmojis = this.$store.state.instance.customEmoji \|\| []
	return [
	{
	id: 'custom',
	text: this.$t('emoji.custom'),
	icon: 'icon-smile',
	emojis: filterByKeyword(customEmojis, this.keyword)
	},
	{
	id: 'standard',
	text: this.$t('emoji.unicode'),
	icon: 'icon-picture',
	emojis: filterByKeyword(standardEmojis, this.keyword)
	}
	]
	},
	emojisView () {
	return this.emojis.filter(value => value.emojis.length > 0)
	},
	stickerPickerEnabled () {
	return (this.$store.state.instance.stickers \|\| []).length !== 0
	}
	}
	}

	export default EmojiPicker
	diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
	index b0ed00e99c..d99539b0bc 100644
	--- a/src/components/emoji_picker/emoji_picker.scss
	+++ b/src/components/emoji_picker/emoji_picker.scss
	@@ -1,165 +1,161 @@
	@import '../../_variables.scss';

	.emoji-picker {
	display: flex;
	flex-direction: column;
	position: absolute;
	right: 0;
	left: 0;
	height: 320px;
	margin: 0 !important;
	z-index: 1;

	.keep-open {
	padding: 7px;
	line-height: normal;
	}
	- .keep-open-label {
	- padding: 0 7px;
	- display: flex;
	- }

	.heading {
	display: flex;
	height: 32px;
	padding: 10px 7px 5px;
	}

	.content {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0px;
	}

	.emoji-tabs {
	flex-grow: 1;
	}

	.additional-tabs {
	border-left: 1px solid;
	border-left-color: $fallback--icon;
	border-left-color: var(--icon, $fallback--icon);
	padding-left: 7px;
	flex: 0 0 0;
	}

	.additional-tabs,
	.emoji-tabs {
	display: block;
	min-width: 0;
	flex-basis: auto;
	flex-shrink: 1;

	&-item {
	padding: 0 7px;
	cursor: pointer;
	font-size: 24px;

	&.disabled {
	opacity: 0.5;
	pointer-events: none;
	}
	&.active {
	border-bottom: 4px solid;

	i {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	}
	}
	}

	.sticker-picker {
	flex: 1 1 0
	}

	.stickers,
	.emoji {
	&-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;

	&.hidden {
	opacity: 0;
	pointer-events: none;
	position: absolute;
	}
	}
	}

	.emoji {
	&-search {
	padding: 5px;
	flex: 0 0 0;

	input {
	width: 100%;
	}
	}

	&-groups {
	flex: 1 1 1px;
	position: relative;
	overflow: auto;
	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;
	&.scrolled {
	&-top {
	mask-size: 100% 20px, 100% 0, auto;
	}
	&-bottom {
	mask-size: 100% 0, 100% 20px, auto;
	}
	}
	}

	&-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-left: 5px;
	justify-content: left;

	&-title {
	font-size: 12px;
	width: 100%;
	margin: 0;
	&.disabled {
	display: none;
	}
	}
	}

	&-item {
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	display: flex;
	font-size: 32px;
	align-items: center;
	justify-content: center;
	margin: 4px;

	cursor: pointer;

	img {
	object-fit: contain;
	max-width: 100%;
	max-height: 100%;
	}
	}

	}

	}
	diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
	index 42f20130c4..b974fce935 100644
	--- a/src/components/emoji_picker/emoji_picker.vue
	+++ b/src/components/emoji_picker/emoji_picker.vue
	@@ -1,110 +1,98 @@
	<template>
	<div class="emoji-picker panel panel-default panel-body">
	<div class="heading">
	<span class="emoji-tabs">
	<span
	v-for="group in emojis"
	:key="group.id"
	class="emoji-tabs-item"
	:class="{
	active: activeGroupView === group.id,
	disabled: group.emojis.length === 0
	}"
	:title="group.text"
	@click.prevent="highlight(group.id)"
	>
	<i :class="group.icon" />
	</span>
	</span>
	<span
	v-if="stickerPickerEnabled"
	class="additional-tabs"
	>
	<span
	class="stickers-tab-icon additional-tabs-item"
	:class="{active: showingStickers}"
	:title="$t('emoji.stickers')"
	@click.prevent="toggleStickers"
	>
	<i class="icon-star" />
	</span>
	</span>
	</div>
	<div class="content">
	<div
	class="emoji-content"
	:class="{hidden: showingStickers}"
	>
	<div class="emoji-search">
	<input
	v-model="keyword"
	type="text"
	class="form-control"
	:placeholder="$t('emoji.search_emoji')"
	>
	</div>
	<div
	ref="emoji-groups"
	class="emoji-groups"
	:class="groupsScrolledClass"
	@scroll="scrolledGroup"
	>
	<div
	v-for="group in emojisView"
	:key="group.id"
	class="emoji-group"
	>
	<h6
	:ref="'group-' + group.id"
	class="emoji-group-title"
	>
	{{ group.text }}
	</h6>
	<span
	v-for="emoji in group.emojis"
	:key="group.id + emoji.displayText"
	:title="emoji.displayText"
	class="emoji-item"
	@click.stop.prevent="onEmoji(emoji)"
	>
	<span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
	<img
	v-else
	:src="emoji.imageUrl"
	>
	</span>
	</div>
	</div>
	- <div
	- class="keep-open"
	- >
	- <input
	- :id="labelKey + 'keep-open'"
	- v-model="keepOpen"
	- type="checkbox"
	- >
	- <label
	- class="keep-open-label"
	- :for="labelKey + 'keep-open'"
	- >
	- <div class="keep-open-label-text">
	- {{ $t('emoji.keep_open') }}
	- </div>
	- </label>
	+ <div class="keep-open">
	+ <Checkbox v-model="keepOpen">
	+ {{ $t('emoji.keep_open') }}
	+ </Checkbox>
	</div>
	</div>
	<div
	v-if="showingStickers"
	class="stickers-content"
	>
	<sticker-picker
	@uploaded="onStickerUploaded"
	@upload-failed="onStickerUploadFailed"
	/>
	</div>
	</div>
	</div>
	</template>

	<script src="./emoji_picker.js"></script>
	<style lang="scss" src="./emoji_picker.scss"></style>
	diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
	index 6781a4f882..746f1c9175 100644
	--- a/src/components/extra_buttons/extra_buttons.vue
	+++ b/src/components/extra_buttons/extra_buttons.vue
	@@ -1,73 +1,71 @@
	<template>
	<v-popover
	v-if="canDelete \|\| canMute \|\| canPin"
	trigger="click"
	placement="top"
	class="extra-button-popover"
	- :offset="5"
	- :container="false"
	>
	<div slot="popover">
	<div class="dropdown-menu">
	<button
	v-if="canMute && !status.thread_muted"
	class="dropdown-item dropdown-item-icon"
	@click.prevent="muteConversation"
	>
	<i class="icon-eye-off" /><span>{{ $t("status.mute_conversation") }}</span>
	</button>
	<button
	v-if="canMute && status.thread_muted"
	class="dropdown-item dropdown-item-icon"
	@click.prevent="unmuteConversation"
	>
	<i class="icon-eye-off" /><span>{{ $t("status.unmute_conversation") }}</span>
	</button>
	<button
	v-if="!status.pinned && canPin"
	v-close-popover
	class="dropdown-item dropdown-item-icon"
	@click.prevent="pinStatus"
	>
	<i class="icon-pin" /><span>{{ $t("status.pin") }}</span>
	</button>
	<button
	v-if="status.pinned && canPin"
	v-close-popover
	class="dropdown-item dropdown-item-icon"
	@click.prevent="unpinStatus"
	>
	<i class="icon-pin" /><span>{{ $t("status.unpin") }}</span>
	</button>
	<button
	v-if="canDelete"
	v-close-popover
	class="dropdown-item dropdown-item-icon"
	@click.prevent="deleteStatus"
	>
	<i class="icon-cancel" /><span>{{ $t("status.delete") }}</span>
	</button>
	</div>
	</div>
	<div class="button-icon">
	<i class="icon-ellipsis" />
	</div>
	</v-popover>
	</template>

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

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

	.icon-ellipsis {
	cursor: pointer;

	&:hover,
	.extra-button-popover.open & {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}
	</style>
	diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js
	index a24eacbf21..5014d84fc4 100644
	--- a/src/components/favorite_button/favorite_button.js
	+++ b/src/components/favorite_button/favorite_button.js
	@@ -1,35 +1,35 @@
	+import { mapGetters } from 'vuex'
	+
	const FavoriteButton = {
	props: ['status', 'loggedIn'],
	data () {
	return {
	- hidePostStatsLocal: typeof this.$store.state.config.hidePostStats === 'undefined'
	- ? this.$store.state.instance.hidePostStats
	- : this.$store.state.config.hidePostStats,
	animated: false
	}
	},
	methods: {
	favorite () {
	if (!this.status.favorited) {
	this.$store.dispatch('favorite', { id: this.status.id })
	} else {
	this.$store.dispatch('unfavorite', { id: this.status.id })
	}
	this.animated = true
	setTimeout(() => {
	this.animated = false
	}, 500)
	}
	},
	computed: {
	classes () {
	return {
	'icon-star-empty': !this.status.favorited,
	'icon-star': this.status.favorited,
	'animate-spin': this.animated
	}
	- }
	+ },
	+ ...mapGetters(['mergedConfig'])
	}
	}

	export default FavoriteButton
	diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
	index 06ce99832f..fbc90f84fa 100644
	--- a/src/components/favorite_button/favorite_button.vue
	+++ b/src/components/favorite_button/favorite_button.vue
	@@ -1,40 +1,40 @@
	<template>
	<div v-if="loggedIn">
	<i
	:class="classes"
	class="button-icon favorite-button fav-active"
	:title="$t('tool_tip.favorite')"
	@click.prevent="favorite()"
	/>
	- <span v-if="!hidePostStatsLocal && status.fave_num > 0">{{ status.fave_num }}</span>
	+ <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
	</div>
	<div v-else>
	<i
	:class="classes"
	class="button-icon favorite-button"
	:title="$t('tool_tip.favorite')"
	/>
	- <span v-if="!hidePostStatsLocal && status.fave_num > 0">{{ status.fave_num }}</span>
	+ <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
	</div>
	</template>

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

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

	.fav-active {
	cursor: pointer;
	animation-duration: 0.6s;

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

	.favorite-button.icon-star {
	color: $fallback--cOrange;
	color: var(--cOrange, $fallback--cOrange);
	}
	</style>
	diff --git a/src/components/follow_button/follow_button.js b/src/components/follow_button/follow_button.js
	new file mode 100644
	index 0000000000..12da264545
	--- /dev/null
	+++ b/src/components/follow_button/follow_button.js
	@@ -0,0 +1,53 @@
	+import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
	+export default {
	+ props: ['user', 'labelFollowing', 'buttonClass'],
	+ data () {
	+ return {
	+ inProgress: false
	+ }
	+ },
	+ computed: {
	+ isPressed () {
	+ return this.inProgress \|\| this.user.following
	+ },
	+ title () {
	+ if (this.inProgress \|\| this.user.following) {
	+ return this.$t('user_card.follow_unfollow')
	+ } else if (this.user.requested) {
	+ return this.$t('user_card.follow_again')
	+ } else {
	+ return this.$t('user_card.follow')
	+ }
	+ },
	+ label () {
	+ if (this.inProgress) {
	+ return this.$t('user_card.follow_progress')
	+ } else if (this.user.following) {
	+ return this.labelFollowing \|\| this.$t('user_card.following')
	+ } else if (this.user.requested) {
	+ return this.$t('user_card.follow_sent')
	+ } else {
	+ return this.$t('user_card.follow')
	+ }
	+ }
	+ },
	+ methods: {
	+ onClick () {
	+ this.user.following ? this.unfollow() : this.follow()
	+ },
	+ follow () {
	+ this.inProgress = true
	+ requestFollow(this.user, this.$store).then(() => {
	+ this.inProgress = false
	+ })
	+ },
	+ unfollow () {
	+ const store = this.$store
	+ this.inProgress = true
	+ requestUnfollow(this.user, store).then(() => {
	+ this.inProgress = false
	+ store.commit('removeStatus', { timeline: 'friends', userId: this.user.id })
	+ })
	+ }
	+ }
	+}
	diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
	new file mode 100644
	index 0000000000..f0cbb94b58
	--- /dev/null
	+++ b/src/components/follow_button/follow_button.vue
	@@ -0,0 +1,13 @@
	+<template>
	+ <button
	+ class="btn btn-default follow-button"
	+ :class="{ pressed: isPressed }"
	+ :disabled="inProgress"
	+ :title="title"
	+ @click="onClick"
	+ >
	+ {{ label }}
	+ </button>
	+</template>
	+
	+<script src="./follow_button.js"></script>
	diff --git a/src/components/follow_card/follow_card.js b/src/components/follow_card/follow_card.js
	index 118d0c7c77..aefd609e02 100644
	--- a/src/components/follow_card/follow_card.js
	+++ b/src/components/follow_card/follow_card.js
	@@ -1,43 +1,25 @@
	import BasicUserCard from '../basic_user_card/basic_user_card.vue'
	import RemoteFollow from '../remote_follow/remote_follow.vue'
	-import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
	+import FollowButton from '../follow_button/follow_button.vue'

	const FollowCard = {
	props: [
	'user',
	'noFollowsYou'
	],
	- data () {
	- return {
	- inProgress: false
	- }
	- },
	components: {
	BasicUserCard,
	- RemoteFollow
	+ RemoteFollow,
	+ FollowButton
	},
	computed: {
	isMe () {
	return this.$store.state.users.currentUser.id === this.user.id
	},
	loggedIn () {
	return this.$store.state.users.currentUser
	}
	- },
	- methods: {
	- followUser () {
	- this.inProgress = true
	- requestFollow(this.user, this.$store).then(() => {
	- this.inProgress = false
	- })
	- },
	- unfollowUser () {
	- this.inProgress = true
	- requestUnfollow(this.user, this.$store).then(() => {
	- this.inProgress = false
	- })
	- }
	}
	}

	export default FollowCard
	diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
	index a9d237bbad..81e6e6dc0e 100644
	--- a/src/components/follow_card/follow_card.vue
	+++ b/src/components/follow_card/follow_card.vue
	@@ -1,73 +1,48 @@
	<template>
	<basic-user-card :user="user">
	<div class="follow-card-content-container">
	<span
	v-if="!noFollowsYou && user.follows_you"
	class="faint"
	>
	{{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
	</span>
	<template v-if="!loggedIn">
	<div
	v-if="!user.following"
	class="follow-card-follow-button"
	>
	<RemoteFollow :user="user" />
	</div>
	</template>
	<template v-else>
	- <button
	- v-if="!user.following"
	- class="btn btn-default follow-card-follow-button"
	- :disabled="inProgress"
	- :title="user.requested ? $t('user_card.follow_again') : ''"
	- @click="followUser"
	- >
	- <template v-if="inProgress">
	- {{ $t('user_card.follow_progress') }}
	- </template>
	- <template v-else-if="user.requested">
	- {{ $t('user_card.follow_sent') }}
	- </template>
	- <template v-else>
	- {{ $t('user_card.follow') }}
	- </template>
	- </button>
	- <button
	- v-else
	- class="btn btn-default follow-card-follow-button pressed"
	- :disabled="inProgress"
	- @click="unfollowUser"
	- >
	- <template v-if="inProgress">
	- {{ $t('user_card.follow_progress') }}
	- </template>
	- <template v-else>
	- {{ $t('user_card.follow_unfollow') }}
	- </template>
	- </button>
	+ <FollowButton
	+ :user="user"
	+ class="follow-card-follow-button"
	+ :label-following="$t('user_card.follow_unfollow')"
	+ />
	</template>
	</div>
	</basic-user-card>
	</template>

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

	<style lang="scss">
	.follow-card {
	&-content-container {
	flex-shrink: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	line-height: 1.5em;
	}

	&-follow-button {
	margin-top: 0.5em;
	margin-left: auto;
	width: 10em;
	}
	}
	</style>
	diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
	index 7f33a81b86..f856fd0a54 100644
	--- a/src/components/gallery/gallery.js
	+++ b/src/components/gallery/gallery.js
	@@ -1,55 +1,53 @@
	import Attachment from '../attachment/attachment.vue'
	-import { chunk, last, dropRight } from 'lodash'
	+import { chunk, last, dropRight, sumBy } from 'lodash'

	const Gallery = {
	- data: () => ({
	- width: 500
	- }),
	props: [
	'attachments',
	'nsfw',
	'setMedia'
	],
	- components: { Attachment },
	- mounted () {
	- this.resize()
	- window.addEventListener('resize', this.resize)
	- },
	- destroyed () {
	- window.removeEventListener('resize', this.resize)
	+ data () {
	+ return {
	+ sizes: {}
	+ }
	},
	+ components: { Attachment },
	computed: {
	rows () {
	if (!this.attachments) {
	return []
	}
	const rows = chunk(this.attachments, 3)
	if (last(rows).length === 1 && rows.length > 1) {
	// if 1 attachment on last row -> add it to the previous row instead
	const lastAttachment = last(rows)[0]
	const allButLastRow = dropRight(rows)
	last(allButLastRow).push(lastAttachment)
	return allButLastRow
	}
	return rows
	},
	- rowHeight () {
	- return itemsPerRow => ({ 'height': `${(this.width / (itemsPerRow + 0.6))}px` })
	- },
	useContainFit () {
	- return this.$store.state.config.useContainFit
	+ return this.$store.getters.mergedConfig.useContainFit
	}
	},
	methods: {
	- resize () {
	- // Quick optimization to make resizing not always trigger state change,
	- // only update attachment size in 10px steps
	- const width = Math.floor(this.$el.getBoundingClientRect().width / 10) * 10
	- if (this.width !== width) {
	- this.width = width
	- }
	+ onNaturalSizeLoad (id, size) {
	+ this.$set(this.sizes, id, size)
	+ },
	+ rowStyle (itemsPerRow) {
	+ return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` }
	+ },
	+ itemStyle (id, row) {
	+ const total = sumBy(row, item => this.getAspectRatio(item.id))
	+ return { flex: `${this.getAspectRatio(id) / total} 1 0%` }
	+ },
	+ getAspectRatio (id) {
	+ const size = this.sizes[id]
	+ return size ? size.width / size.height : 1
	}
	}
	}

	export default Gallery
	diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
	index 6169d29424..7abc2161a3 100644
	--- a/src/components/gallery/gallery.vue
	+++ b/src/components/gallery/gallery.vue
	@@ -1,80 +1,93 @@
	<template>
	<div
	ref="galleryContainer"
	style="width: 100%;"
	>
	<div
	v-for="(row, index) in rows"
	:key="index"
	class="gallery-row"
	- :style="rowHeight(row.length)"
	+ :style="rowStyle(row.length)"
	:class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }"
	>
	- <attachment
	- v-for="attachment in row"
	- :key="attachment.id"
	- :set-media="setMedia"
	- :nsfw="nsfw"
	- :attachment="attachment"
	- :allow-play="false"
	- />
	+ <div class="gallery-row-inner">
	+ <attachment
	+ v-for="attachment in row"
	+ :key="attachment.id"
	+ :set-media="setMedia"
	+ :nsfw="nsfw"
	+ :attachment="attachment"
	+ :allow-play="false"
	+ :natural-size-load="onNaturalSizeLoad.bind(null, attachment.id)"
	+ :style="itemStyle(attachment.id, row)"
	+ />
	+ </div>
	</div>
	</div>
	</template>

	<script src='./gallery.js'></script>

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

	.gallery-row {
	- height: 200px;
	+ position: relative;
	+ height: 0;
	width: 100%;
	- display: flex;
	- flex-direction: row;
	- flex-wrap: nowrap;
	- align-content: stretch;
	flex-grow: 1;
	margin-top: 0.5em;

	+ .gallery-row-inner {
	+ position: absolute;
	+ top: 0;
	+ left: 0;
	+ right: 0;
	+ bottom: 0;
	+ display: flex;
	+ flex-direction: row;
	+ flex-wrap: nowrap;
	+ align-content: stretch;
	+ }
	+
	// FIXME: specificity problem with this and .attachments.attachment
	// we shouldn't have the need for .image here
	.attachment.image {
	margin: 0 0.5em 0 0;
	flex-grow: 1;
	height: 100%;
	box-sizing: border-box;
	// to make failed images a bit more noticeable on chromium
	min-width: 2em;
	&:last-child {
	margin: 0;
	}
	}

	.image-attachment {
	width: 100%;
	height: 100%;
	}

	.video-container {
	height: 100%;
	}

	&.contain-fit {
	img,
	video,
	canvas {
	object-fit: contain;
	}
	}

	&.cover-fit {
	img,
	video,
	canvas {
	object-fit: cover;
	}
	}
	}

	</style>
	diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
	index 83df9a0bd4..1ca2200150 100644
	--- a/src/components/interface_language_switcher/interface_language_switcher.vue
	+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
	@@ -1,62 +1,62 @@
	<template>
	<div>
	<label for="interface-language-switcher">
	{{ $t('settings.interfaceLanguage') }}
	</label>
	<label
	for="interface-language-switcher"
	class="select"
	>
	<select
	id="interface-language-switcher"
	v-model="language"
	>
	<option
	v-for="(langCode, i) in languageCodes"
	:key="langCode"
	:value="langCode"
	>
	{{ languageNames[i] }}
	</option>
	</select>
	<i class="icon-down-open" />
	</label>
	</div>
	</template>

	<script>
	import languagesObject from '../../i18n/messages'
	import ISO6391 from 'iso-639-1'
	import _ from 'lodash'

	export default {
	computed: {
	languageCodes () {
	return Object.keys(languagesObject)
	},

	languageNames () {
	return _.map(this.languageCodes, this.getLanguageName)
	},

	language: {
	- get: function () { return this.$store.state.config.interfaceLanguage },
	+ get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
	set: function (val) {
	this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
	this.$i18n.locale = val
	}
	}
	},

	methods: {
	getLanguageName (code) {
	const specialLanguageNames = {
	'ja': 'Japanese (やさしいにほんご)',
	'ja_pedantic': 'Japanese (日本語)',
	'zh': 'Chinese (简体中文)'
	}
	return specialLanguageNames[code] \|\| ISO6391.getName(code)
	}
	}
	}
	</script>
	diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js
	index 10f52fe240..0b574a048b 100644
	--- a/src/components/login_form/login_form.js
	+++ b/src/components/login_form/login_form.js
	@@ -1,83 +1,85 @@
	import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
	import oauthApi from '../../services/new_api/oauth.js'

	const LoginForm = {
	data: () => ({
	user: {},
	error: false
	}),
	computed: {
	isPasswordAuth () { return this.requiredPassword },
	isTokenAuth () { return this.requiredToken },
	...mapState({
	registrationOpen: state => state.instance.registrationOpen,
	instance: state => state.instance,
	loggingIn: state => state.users.loggingIn,
	oauth: state => state.oauth
	}),
	...mapGetters(
	'authFlow', ['requiredPassword', 'requiredToken', 'requiredMFA']
	)
	},
	methods: {
	...mapMutations('authFlow', ['requireMFA']),
	...mapActions({ login: 'authFlow/login' }),
	submit () {
	this.isTokenAuth ? this.submitToken() : this.submitPassword()
	},
	submitToken () {
	const { clientId, clientSecret } = this.oauth
	const data = {
	clientId,
	clientSecret,
	instance: this.instance.server,
	commit: this.$store.commit
	}

	oauthApi.getOrCreateApp(data)
	.then((app) => { oauthApi.login({ ...app, ...data }) })
	},
	submitPassword () {
	const { clientId } = this.oauth
	const data = {
	clientId,
	oauth: this.oauth,
	instance: this.instance.server,
	commit: this.$store.commit
	}
	this.error = false

	oauthApi.getOrCreateApp(data).then((app) => {
	oauthApi.getTokenWithCredentials(
	{
	...app,
	instance: data.instance,
	username: this.user.username,
	password: this.user.password
	}
	).then((result) => {
	if (result.error) {
	if (result.error === 'mfa_required') {
	this.requireMFA({ app: app, settings: result })
	+ } else if (result.identifier === 'password_reset_required') {
	+ this.$router.push({ name: 'password-reset', params: { passwordResetRequested: true } })
	} else {
	this.error = result.error
	this.focusOnPasswordInput()
	}
	return
	}
	this.login(result).then(() => {
	this.$router.push({ name: 'friends' })
	})
	})
	})
	},
	clearError () { this.error = false },
	focusOnPasswordInput () {
	let passwordInput = this.$refs.passwordInput
	passwordInput.focus()
	passwordInput.setSelectionRange(0, passwordInput.value.length)
	}
	}
	}

	export default LoginForm
	diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
	index 992d7129d7..4832abda31 100644
	--- a/src/components/media_modal/media_modal.js
	+++ b/src/components/media_modal/media_modal.js
	@@ -1,73 +1,75 @@
	import StillImage from '../still-image/still-image.vue'
	import VideoAttachment from '../video_attachment/video_attachment.vue'
	+import Modal from '../modal/modal.vue'
	import fileTypeService from '../../services/file_type/file_type.service.js'

	const MediaModal = {
	components: {
	StillImage,
	- VideoAttachment
	+ VideoAttachment,
	+ Modal
	},
	computed: {
	showing () {
	return this.$store.state.mediaViewer.activated
	},
	media () {
	return this.$store.state.mediaViewer.media
	},
	currentIndex () {
	return this.$store.state.mediaViewer.currentIndex
	},
	currentMedia () {
	return this.media[this.currentIndex]
	},
	canNavigate () {
	return this.media.length > 1
	},
	type () {
	return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
	}
	},
	methods: {
	hide () {
	this.$store.dispatch('closeMediaViewer')
	},
	goPrev () {
	if (this.canNavigate) {
	const prevIndex = this.currentIndex === 0 ? this.media.length - 1 : (this.currentIndex - 1)
	this.$store.dispatch('setCurrent', this.media[prevIndex])
	}
	},
	goNext () {
	if (this.canNavigate) {
	const nextIndex = this.currentIndex === this.media.length - 1 ? 0 : (this.currentIndex + 1)
	this.$store.dispatch('setCurrent', this.media[nextIndex])
	}
	},
	handleKeyupEvent (e) {
	if (this.showing && e.keyCode === 27) { // escape
	this.hide()
	}
	},
	handleKeydownEvent (e) {
	if (!this.showing) {
	return
	}

	if (e.keyCode === 39) { // arrow right
	this.goNext()
	} else if (e.keyCode === 37) { // arrow left
	this.goPrev()
	}
	}
	},
	mounted () {
	document.addEventListener('keyup', this.handleKeyupEvent)
	document.addEventListener('keydown', this.handleKeydownEvent)
	},
	destroyed () {
	document.removeEventListener('keyup', this.handleKeyupEvent)
	document.removeEventListener('keydown', this.handleKeydownEvent)
	}
	}

	export default MediaModal
	diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
	index 06ced5a1ac..2597f4e308 100644
	--- a/src/components/media_modal/media_modal.vue
	+++ b/src/components/media_modal/media_modal.vue
	@@ -1,118 +1,110 @@
	<template>
	- <div
	+ <Modal
	v-if="showing"
	- v-body-scroll-lock="showing"
	- class="modal-view media-modal-view"
	- @click.prevent="hide"
	+ class="media-modal-view"
	+ @backdropClicked="hide"
	>
	<img
	v-if="type === 'image'"
	class="modal-image"
	:src="currentMedia.url"
	>
	<VideoAttachment
	v-if="type === 'video'"
	class="modal-image"
	:attachment="currentMedia"
	:controls="true"
	@click.stop.native=""
	/>
	<button
	v-if="canNavigate"
	:title="$t('media_modal.previous')"
	class="modal-view-button-arrow modal-view-button-arrow--prev"
	@click.stop.prevent="goPrev"
	>
	<i class="icon-left-open arrow-icon" />
	</button>
	<button
	v-if="canNavigate"
	:title="$t('media_modal.next')"
	class="modal-view-button-arrow modal-view-button-arrow--next"
	@click.stop.prevent="goNext"
	>
	<i class="icon-right-open arrow-icon" />
	</button>
	- </div>
	+ </Modal>
	</template>

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

	<style lang="scss">
	-@import '../../_variables.scss';
	-
	-.media-modal-view {
	+.modal-view.media-modal-view {
	z-index: 1001;

	- body:not(.scroll-locked) & {
	- display: none;
	- }
	-
	&:hover {
	.modal-view-button-arrow {
	opacity: 0.75;

	&:focus,
	&:hover {
	outline: none;
	box-shadow: none;
	}
	&:hover {
	opacity: 1;
	}
	}
	}
	}

	.modal-image {
	max-width: 90%;
	max-height: 90%;
	box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
	image-orientation: from-image; // NOTE: only FF supports this
	}

	.modal-view-button-arrow {
	position: absolute;
	display: block;
	top: 50%;
	margin-top: -50px;
	width: 70px;
	height: 100px;
	border: 0;
	padding: 0;
	opacity: 0;
	box-shadow: none;
	background: none;
	appearance: none;
	overflow: visible;
	cursor: pointer;
	transition: opacity 333ms cubic-bezier(.4,0,.22,1);

	.arrow-icon {
	position: absolute;
	top: 35px;
	height: 30px;
	width: 32px;
	font-size: 14px;
	line-height: 30px;
	color: #FFF;
	text-align: center;
	background-color: rgba(0,0,0,.3);
	}

	&--prev {
	left: 0;
	.arrow-icon {
	left: 6px;
	}
	}

	&--next {
	right: 0;
	.arrow-icon {
	right: 6px;
	}
	}
	}
	-
	</style>
	diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
	index c2bb76eebc..5a90c31f43 100644
	--- a/src/components/mobile_nav/mobile_nav.js
	+++ b/src/components/mobile_nav/mobile_nav.js
	@@ -1,80 +1,80 @@
	import SideDrawer from '../side_drawer/side_drawer.vue'
	import Notifications from '../notifications/notifications.vue'
	import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
	import GestureService from '../../services/gesture_service/gesture_service'

	const MobileNav = {
	components: {
	SideDrawer,
	Notifications
	},
	data: () => ({
	notificationsCloseGesture: undefined,
	notificationsOpen: false
	}),
	created () {
	this.notificationsCloseGesture = GestureService.swipeGesture(
	GestureService.DIRECTION_RIGHT,
	this.closeMobileNotifications,
	50
	)
	},
	computed: {
	currentUser () {
	return this.$store.state.users.currentUser
	},
	unseenNotifications () {
	return unseenNotificationsFromStore(this.$store)
	},
	unseenNotificationsCount () {
	return this.unseenNotifications.length
	},
	sitename () { return this.$store.state.instance.name }
	},
	methods: {
	toggleMobileSidebar () {
	this.$refs.sideDrawer.toggleDrawer()
	},
	openMobileNotifications () {
	this.notificationsOpen = true
	},
	closeMobileNotifications () {
	if (this.notificationsOpen) {
	// make sure to mark notifs seen only when the notifs were open and not
	// from close-calls.
	this.notificationsOpen = false
	this.markNotificationsAsSeen()
	}
	},
	notificationsTouchStart (e) {
	GestureService.beginSwipe(e, this.notificationsCloseGesture)
	},
	notificationsTouchMove (e) {
	GestureService.updateSwipe(e, this.notificationsCloseGesture)
	},
	scrollToTop () {
	window.scrollTo(0, 0)
	},
	logout () {
	this.$router.replace('/main/public')
	this.$store.dispatch('logout')
	},
	markNotificationsAsSeen () {
	this.$refs.notifications.markAsSeen()
	},
	onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
	- if (this.$store.state.config.autoLoad && scrollTop + clientHeight >= scrollHeight) {
	+ if (this.$store.getters.mergedConfig.autoLoad && scrollTop + clientHeight >= scrollHeight) {
	this.$refs.notifications.fetchOlderNotifications()
	}
	}
	},
	watch: {
	$route () {
	// handles closing notificaitons when you press any router-link on the
	// notifications.
	this.closeMobileNotifications()
	}
	}
	}

	export default MobileNav
	diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.js b/src/components/mobile_post_status_button/mobile_post_status_button.js
	index 3e77148aa5..0ad12bb118 100644
	--- a/src/components/mobile_post_status_button/mobile_post_status_button.js
	+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
	@@ -1,93 +1,93 @@
	import { debounce } from 'lodash'

	const MobilePostStatusButton = {
	data () {
	return {
	hidden: false,
	scrollingDown: false,
	inputActive: false,
	oldScrollPos: 0,
	amountScrolled: 0
	}
	},
	created () {
	if (this.autohideFloatingPostButton) {
	this.activateFloatingPostButtonAutohide()
	}
	window.addEventListener('resize', this.handleOSK)
	},
	destroyed () {
	if (this.autohideFloatingPostButton) {
	this.deactivateFloatingPostButtonAutohide()
	}
	window.removeEventListener('resize', this.handleOSK)
	},
	computed: {
	isLoggedIn () {
	return !!this.$store.state.users.currentUser
	},
	isHidden () {
	return this.autohideFloatingPostButton && (this.hidden \|\| this.inputActive)
	},
	autohideFloatingPostButton () {
	- return !!this.$store.state.config.autohideFloatingPostButton
	+ return !!this.$store.getters.mergedConfig.autohideFloatingPostButton
	}
	},
	watch: {
	autohideFloatingPostButton: function (isEnabled) {
	if (isEnabled) {
	this.activateFloatingPostButtonAutohide()
	} else {
	this.deactivateFloatingPostButtonAutohide()
	}
	}
	},
	methods: {
	activateFloatingPostButtonAutohide () {
	window.addEventListener('scroll', this.handleScrollStart)
	window.addEventListener('scroll', this.handleScrollEnd)
	},
	deactivateFloatingPostButtonAutohide () {
	window.removeEventListener('scroll', this.handleScrollStart)
	window.removeEventListener('scroll', this.handleScrollEnd)
	},
	openPostForm () {
	this.$store.dispatch('openPostStatusModal')
	},
	handleOSK () {
	// This is a big hack: we're guessing from changed window sizes if the
	// on-screen keyboard is active or not. This is only really important
	// for phones in portrait mode and it's more important to show the button
	// in normal scenarios on all phones, than it is to hide it when the
	// keyboard is active.
	// Guesswork based on https://www.mydevice.io/#compare-devices

	// for example, iphone 4 and android phones from the same time period
	const smallPhone = window.innerWidth < 350
	const smallPhoneKbOpen = smallPhone && window.innerHeight < 345

	const biggerPhone = !smallPhone && window.innerWidth < 450
	const biggerPhoneKbOpen = biggerPhone && window.innerHeight < 560
	if (smallPhoneKbOpen \|\| biggerPhoneKbOpen) {
	this.inputActive = true
	} else {
	this.inputActive = false
	}
	},
	handleScrollStart: debounce(function () {
	if (window.scrollY > this.oldScrollPos) {
	this.hidden = true
	} else {
	this.hidden = false
	}
	this.oldScrollPos = window.scrollY
	}, 100, { leading: true, trailing: false }),

	handleScrollEnd: debounce(function () {
	this.hidden = false
	this.oldScrollPos = window.scrollY
	}, 100, { leading: false, trailing: true })
	}
	}

	export default MobilePostStatusButton
	diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
	new file mode 100644
	index 0000000000..cee24241b0
	--- /dev/null
	+++ b/src/components/modal/modal.vue
	@@ -0,0 +1,52 @@
	+<template>
	+ <div
	+ v-show="isOpen"
	+ v-body-scroll-lock="isOpen"
	+ class="modal-view"
	+ @click.self="$emit('backdropClicked')"
	+ >
	+ <slot />
	+ </div>
	+</template>
	+
	+<script>
	+export default {
	+ props: {
	+ isOpen: {
	+ type: Boolean,
	+ default: true
	+ }
	+ }
	+}
	+</script>
	+
	+<style lang="scss">
	+.modal-view {
	+ z-index: 1000;
	+ position: fixed;
	+ top: 0;
	+ left: 0;
	+ right: 0;
	+ bottom: 0;
	+ display: flex;
	+ justify-content: center;
	+ align-items: center;
	+ overflow: auto;
	+ animation-duration: 0.2s;
	+ background-color: rgba(0, 0, 0, 0.5);
	+ animation-name: modal-background-fadein;
	+
	+ body:not(.scroll-locked) & {
	+ opacity: 0;
	+ }
	+}
	+
	+@keyframes modal-background-fadein {
	+ from {
	+ background-color: rgba(0, 0, 0, 0);
	+ }
	+ to {
	+ background-color: rgba(0, 0, 0, 0.5);
	+ }
	+}
	+</style>
	diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
	index d97ca3aa6d..006d637333 100644
	--- a/src/components/moderation_tools/moderation_tools.vue
	+++ b/src/components/moderation_tools/moderation_tools.vue
	@@ -1,193 +1,191 @@
	<template>
	<div>
	<v-popover
	trigger="click"
	class="moderation-tools-popover"
	- :container="false"
	placement="bottom-end"
	- :offset="5"
	@show="showDropDown = true"
	@hide="showDropDown = false"
	>
	<div slot="popover">
	<div class="dropdown-menu">
	<span v-if="user.is_local">
	<button
	class="dropdown-item"
	@click="toggleRight("admin")"
	>
	{{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
	</button>
	<button
	class="dropdown-item"
	@click="toggleRight("moderator")"
	>
	{{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
	</button>
	<div
	role="separator"
	class="dropdown-divider"
	/>
	</span>
	<button
	class="dropdown-item"
	@click="toggleActivationStatus()"
	>
	{{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
	</button>
	<button
	class="dropdown-item"
	@click="deleteUserDialog(true)"
	>
	{{ $t('user_card.admin_menu.delete_account') }}
	</button>
	<div
	v-if="hasTagPolicy"
	role="separator"
	class="dropdown-divider"
	/>
	<span v-if="hasTagPolicy">
	<button
	class="dropdown-item"
	@click="toggleTag(tags.FORCE_NSFW)"
	>
	{{ $t('user_card.admin_menu.force_nsfw') }}
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
	/>
	</button>
	<button
	class="dropdown-item"
	@click="toggleTag(tags.STRIP_MEDIA)"
	>
	{{ $t('user_card.admin_menu.strip_media') }}
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
	/>
	</button>
	<button
	class="dropdown-item"
	@click="toggleTag(tags.FORCE_UNLISTED)"
	>
	{{ $t('user_card.admin_menu.force_unlisted') }}
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
	/>
	</button>
	<button
	class="dropdown-item"
	@click="toggleTag(tags.SANDBOX)"
	>
	{{ $t('user_card.admin_menu.sandbox') }}
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
	/>
	</button>
	<button
	v-if="user.is_local"
	class="dropdown-item"
	@click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
	>
	{{ $t('user_card.admin_menu.disable_remote_subscription') }}
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
	/>
	</button>
	<button
	v-if="user.is_local"
	class="dropdown-item"
	@click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
	>
	{{ $t('user_card.admin_menu.disable_any_subscription') }}
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
	/>
	</button>
	<button
	v-if="user.is_local"
	class="dropdown-item"
	@click="toggleTag(tags.QUARANTINE)"
	>
	{{ $t('user_card.admin_menu.quarantine') }}
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
	/>
	</button>
	</span>
	</div>
	</div>
	<button
	class="btn btn-default btn-block"
	:class="{ pressed: showDropDown }"
	>
	{{ $t('user_card.admin_menu.moderation') }}
	</button>
	</v-popover>
	<portal to="modal">
	<DialogModal
	v-if="showDeleteUserDialog"
	:on-cancel="deleteUserDialog.bind(this, false)"
	>
	<template slot="header">
	{{ $t('user_card.admin_menu.delete_user') }}
	</template>
	<p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
	<template slot="footer">
	<button
	class="btn btn-default"
	@click="deleteUserDialog(false)"
	>
	{{ $t('general.cancel') }}
	</button>
	<button
	class="btn btn-default danger"
	@click="deleteUser()"
	>
	{{ $t('user_card.admin_menu.delete_user') }}
	</button>
	</template>
	</DialogModal>
	</portal>
	</div>
	</template>

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

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

	.menu-checkbox {
	float: right;
	min-width: 22px;
	max-width: 22px;
	min-height: 22px;
	max-height: 22px;
	line-height: 22px;
	text-align: center;
	border-radius: 0px;
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	box-shadow: 0px 0px 2px black inset;
	box-shadow: var(--inputShadow);

	&.menu-checkbox-checked::after {
	content: '✔';
	}
	}

	.moderation-tools-popover {
	height: 100%;
	.trigger {
	display: flex !important;
	height: 100%;
	}
	}
	</style>
	diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
	index 8e817f3beb..7d46eb5aaa 100644
	--- a/src/components/notification/notification.js
	+++ b/src/components/notification/notification.js
	@@ -1,64 +1,64 @@
	import Status from '../status/status.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import UserCard from '../user_card/user_card.vue'
	import Timeago from '../timeago/timeago.vue'
	import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'

	const Notification = {
	data () {
	return {
	userExpanded: false,
	betterShadow: this.$store.state.interface.browserSupport.cssFilter,
	unmuted: false
	}
	},
	props: [ 'notification' ],
	components: {
	Status,
	UserAvatar,
	UserCard,
	Timeago
	},
	methods: {
	toggleUserExpanded () {
	this.userExpanded = !this.userExpanded
	},
	generateUserProfileLink (user) {
	return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
	},
	getUser (notification) {
	return this.$store.state.users.usersObject[notification.from_profile.id]
	},
	toggleMute () {
	this.unmuted = !this.unmuted
	}
	},
	computed: {
	userClass () {
	return highlightClass(this.notification.from_profile)
	},
	userStyle () {
	- const highlight = this.$store.state.config.highlight
	+ const highlight = this.$store.getters.mergedConfig.highlight
	const user = this.notification.from_profile
	return highlightStyle(highlight[user.screen_name])
	},
	userInStore () {
	return this.$store.getters.findUser(this.notification.from_profile.id)
	},
	user () {
	if (this.userInStore) {
	return this.userInStore
	}
	return this.notification.from_profile
	},
	userProfileLink () {
	return this.generateUserProfileLink(this.user)
	},
	needMute () {
	return this.user.muted
	}
	}
	}

	export default Notification
	diff --git a/src/components/password_reset/password_reset.js b/src/components/password_reset/password_reset.js
	index fa71e07a94..62e74e30f2 100644
	--- a/src/components/password_reset/password_reset.js
	+++ b/src/components/password_reset/password_reset.js
	@@ -1,62 +1,68 @@
	import { mapState } from 'vuex'
	import passwordResetApi from '../../services/new_api/password_reset.js'

	const passwordReset = {
	data: () => ({
	user: {
	email: ''
	},
	isPending: false,
	success: false,
	throttled: false,
	error: null
	}),
	computed: {
	...mapState({
	signedIn: (state) => !!state.users.currentUser,
	instance: state => state.instance
	}),
	mailerEnabled () {
	return this.instance.mailerEnabled
	}
	},
	created () {
	if (this.signedIn) {
	this.$router.push({ name: 'root' })
	}
	},
	+ props: {
	+ passwordResetRequested: {
	+ default: false,
	+ type: Boolean
	+ }
	+ },
	methods: {
	dismissError () {
	this.error = null
	},
	submit () {
	this.isPending = true
	const email = this.user.email
	const instance = this.instance.server

	passwordResetApi({ instance, email }).then(({ status }) => {
	this.isPending = false
	this.user.email = ''

	if (status === 204) {
	this.success = true
	this.error = null
	} else if (status === 404 \|\| status === 400) {
	this.error = this.$t('password_reset.not_found')
	this.$nextTick(() => {
	this.$refs.email.focus()
	})
	} else if (status === 429) {
	this.throttled = true
	this.error = this.$t('password_reset.too_many_requests')
	}
	}).catch(() => {
	this.isPending = false
	this.user.email = ''
	this.error = this.$t('general.generic_error')
	})
	}
	}
	}

	export default passwordReset
	diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
	index 00474e95d1..713c9dced6 100644
	--- a/src/components/password_reset/password_reset.vue
	+++ b/src/components/password_reset/password_reset.vue
	@@ -1,116 +1,130 @@
	<template>
	<div class="settings panel panel-default">
	<div class="panel-heading">
	{{ $t('password_reset.password_reset') }}
	</div>
	<div class="panel-body">
	<form
	class="password-reset-form"
	@submit.prevent="submit"
	>
	<div class="container">
	<div v-if="!mailerEnabled">
	- <p>
	+ <p v-if="passwordResetRequested">
	+ {{ $t('password_reset.password_reset_required_but_mailer_is_disabled') }}
	+ </p>
	+ <p v-else>
	{{ $t('password_reset.password_reset_disabled') }}
	</p>
	</div>
	<div v-else-if="success \|\| throttled">
	<p v-if="success">
	{{ $t('password_reset.check_email') }}
	</p>
	<div class="form-group text-center">
	<router-link :to="{name: 'root'}">
	{{ $t('password_reset.return_home') }}
	</router-link>
	</div>
	</div>
	<div v-else>
	+ <p
	+ v-if="passwordResetRequested"
	+ class="password-reset-required error"
	+ >
	+ {{ $t('password_reset.password_reset_required') }}
	+ </p>
	<p>
	{{ $t('password_reset.instruction') }}
	</p>
	<div class="form-group">
	<input
	ref="email"
	v-model="user.email"
	:disabled="isPending"
	:placeholder="$t('password_reset.placeholder')"
	class="form-control"
	type="input"
	>
	</div>
	<div class="form-group">
	<button
	:disabled="isPending"
	type="submit"
	class="btn btn-default btn-block"
	>
	{{ $t('general.submit') }}
	</button>
	</div>
	</div>
	<p
	v-if="error"
	class="alert error notice-dismissible"
	>
	<span>{{ error }}</span>
	<a
	class="button-icon dismiss"
	@click.prevent="dismissError()"
	>
	<i class="icon-cancel" />
	</a>
	</p>
	</div>
	</form>
	</div>
	</div>
	</template>

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

	.password-reset-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0.6em;

	.container {
	display: flex;
	flex: 1 0;
	flex-direction: column;
	margin-top: 0.6em;
	max-width: 18rem;
	}

	.form-group {
	display: flex;
	flex-direction: column;
	margin-bottom: 1em;
	padding: 0.3em 0.0em 0.3em;
	line-height: 24px;
	}

	.error {
	text-align: center;
	animation-name: shakeError;
	animation-duration: 0.4s;
	animation-timing-function: ease-in-out;
	}

	.alert {
	padding: 0.5em;
	margin: 0.3em 0.0em 1em;
	}

	+ .password-reset-required {
	+ background-color: var(--alertError, $fallback--alertError);
	+ padding: 10px 0;
	+ }
	+
	.notice-dismissible {
	padding-right: 2rem;
	}

	.icon-cancel {
	cursor: pointer;
	}
	}

	</style>
	diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
	index 279b01be61..06daa8714a 100644
	--- a/src/components/popper/popper.scss
	+++ b/src/components/popper/popper.scss
	@@ -1,148 +1,147 @@
	@import '../../_variables.scss';

	.tooltip.popover {
	z-index: 8;

	.popover-inner {
	box-shadow: 1px 1px 4px rgba(0,0,0,.6);
	box-shadow: var(--panelShadow);
	border-radius: $fallback--btnRadius;
	border-radius: var(--btnRadius, $fallback--btnRadius);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	}

	.popover-arrow {
	width: 0;
	height: 0;
	border-style: solid;
	position: absolute;
	margin: 5px;
	border-color: $fallback--bg;
	border-color: var(--bg, $fallback--bg);
	- z-index: 1;
	}

	&[x-placement^="top"] {
	margin-bottom: 5px;

	.popover-arrow {
	border-width: 5px 5px 0 5px;
	border-left-color: transparent !important;
	border-right-color: transparent !important;
	border-bottom-color: transparent !important;
	- bottom: -5px;
	+ bottom: -4px;
	left: calc(50% - 5px);
	margin-top: 0;
	margin-bottom: 0;
	}
	}

	&[x-placement^="bottom"] {
	margin-top: 5px;

	.popover-arrow {
	border-width: 0 5px 5px 5px;
	border-left-color: transparent !important;
	border-right-color: transparent !important;
	border-top-color: transparent !important;
	- top: -5px;
	+ top: -4px;
	left: calc(50% - 5px);
	margin-top: 0;
	margin-bottom: 0;
	}
	}

	&[x-placement^="right"] {
	margin-left: 5px;

	.popover-arrow {
	border-width: 5px 5px 5px 0;
	border-left-color: transparent !important;
	border-top-color: transparent !important;
	border-bottom-color: transparent !important;
	- left: -5px;
	+ left: -4px;
	top: calc(50% - 5px);
	margin-left: 0;
	margin-right: 0;
	}
	}

	&[x-placement^="left"] {
	margin-right: 5px;

	.popover-arrow {
	border-width: 5px 0 5px 5px;
	border-top-color: transparent !important;
	border-right-color: transparent !important;
	border-bottom-color: transparent !important;
	- right: -5px;
	+ right: -4px;
	top: calc(50% - 5px);
	margin-left: 0;
	margin-right: 0;
	}
	}

	&[aria-hidden='true'] {
	visibility: hidden;
	opacity: 0;
	transition: opacity .15s, visibility .15s;
	}

	&[aria-hidden='false'] {
	visibility: visible;
	opacity: 1;
	transition: opacity .15s;
	}
	}

	.dropdown-menu {
	display: block;
	padding: .5rem 0;
	font-size: 1rem;
	text-align: left;
	list-style: none;
	max-width: 100vw;
	z-index: 10;

	.dropdown-divider {
	height: 0;
	margin: .5rem 0;
	overflow: hidden;
	border-top: 1px solid $fallback--border;
	border-top: 1px solid var(--border, $fallback--border);
	}

	.dropdown-item {
	line-height: 21px;
	margin-right: 5px;
	overflow: auto;
	display: block;
	padding: .25rem 1.0rem .25rem 1.5rem;
	clear: both;
	font-weight: 400;
	text-align: inherit;
	white-space: normal;
	border: none;
	border-radius: 0px;
	background-color: transparent;
	box-shadow: none;
	width: 100%;
	height: 100%;

	&-icon {
	padding-left: 0.5rem;

	i {
	margin-right: 0.25rem;
	}
	}

	&:hover {
	// TODO: improve the look on breeze themes
	background-color: $fallback--fg;
	background-color: var(--btn, $fallback--fg);
	box-shadow: none;
	}
	}
	}
	diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
	index 9b2a9c90da..c1d7209e2c 100644
	--- a/src/components/post_status_form/post_status_form.js
	+++ b/src/components/post_status_form/post_status_form.js
	@@ -1,386 +1,377 @@
	import statusPoster from '../../services/status_poster/status_poster.service.js'
	import MediaUpload from '../media_upload/media_upload.vue'
	import ScopeSelector from '../scope_selector/scope_selector.vue'
	import EmojiInput from '../emoji_input/emoji_input.vue'
	import PollForm from '../poll/poll_form.vue'
	import fileTypeService from '../../services/file_type/file_type.service.js'
	import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
	import { reject, map, uniqBy } from 'lodash'
	import suggestor from '../emoji_input/suggestor.js'
	+import { mapGetters } from 'vuex'
	+import Checkbox from '../checkbox/checkbox.vue'

	const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
	let allAttentions = [...attentions]

	allAttentions.unshift(user)

	allAttentions = uniqBy(allAttentions, 'id')
	allAttentions = reject(allAttentions, { id: currentUser.id })

	let mentions = map(allAttentions, (attention) => {
	return `@${attention.screen_name}`
	})

	return mentions.length > 0 ? mentions.join(' ') + ' ' : ''
	}

	const PostStatusForm = {
	props: [
	'replyTo',
	'repliedUser',
	'attentions',
	'copyMessageScope',
	'subject'
	],
	components: {
	MediaUpload,
	EmojiInput,
	PollForm,
	- ScopeSelector
	+ ScopeSelector,
	+ Checkbox
	},
	mounted () {
	this.resize(this.$refs.textarea)
	const textLength = this.$refs.textarea.value.length
	this.$refs.textarea.setSelectionRange(textLength, textLength)

	if (this.replyTo) {
	this.$refs.textarea.focus()
	}
	},
	data () {
	const preset = this.$route.query.message
	let statusText = preset \|\| ''

	- const scopeCopy = typeof this.$store.state.config.scopeCopy === 'undefined'
	- ? this.$store.state.instance.scopeCopy
	- : this.$store.state.config.scopeCopy
	+ const { scopeCopy } = this.$store.getters.mergedConfig

	if (this.replyTo) {
	const currentUser = this.$store.state.users.currentUser
	statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
	}

	const scope = ((this.copyMessageScope && scopeCopy) \|\| this.copyMessageScope === 'direct')
	? this.copyMessageScope
	: this.$store.state.users.currentUser.default_scope

	- const contentType = typeof this.$store.state.config.postContentType === 'undefined'
	- ? this.$store.state.instance.postContentType
	- : this.$store.state.config.postContentType
	+ const { postContentType: contentType } = this.$store.getters.mergedConfig

	return {
	dropFiles: [],
	submitDisabled: false,
	error: null,
	posting: false,
	highlighted: 0,
	newStatus: {
	spoilerText: this.subject \|\| '',
	status: statusText,
	nsfw: false,
	files: [],
	poll: {},
	visibility: scope,
	contentType
	},
	caret: 0,
	pollFormVisible: false
	}
	},
	computed: {
	users () {
	return this.$store.state.users.users
	},
	userDefaultScope () {
	return this.$store.state.users.currentUser.default_scope
	},
	showAllScopes () {
	- const minimalScopesMode = typeof this.$store.state.config.minimalScopesMode === 'undefined'
	- ? this.$store.state.instance.minimalScopesMode
	- : this.$store.state.config.minimalScopesMode
	- return !minimalScopesMode
	+ return !this.mergedConfig.minimalScopesMode
	},
	emojiUserSuggestor () {
	return suggestor({
	emoji: [
	...this.$store.state.instance.emoji,
	...this.$store.state.instance.customEmoji
	],
	users: this.$store.state.users.users,
	updateUsersList: (input) => this.$store.dispatch('searchUsers', input)
	})
	},
	emojiSuggestor () {
	return suggestor({
	emoji: [
	...this.$store.state.instance.emoji,
	...this.$store.state.instance.customEmoji
	]
	})
	},
	emoji () {
	return this.$store.state.instance.emoji \|\| []
	},
	customEmoji () {
	return this.$store.state.instance.customEmoji \|\| []
	},
	statusLength () {
	return this.newStatus.status.length
	},
	spoilerTextLength () {
	return this.newStatus.spoilerText.length
	},
	statusLengthLimit () {
	return this.$store.state.instance.textlimit
	},
	hasStatusLengthLimit () {
	return this.statusLengthLimit > 0
	},
	charactersLeft () {
	return this.statusLengthLimit - (this.statusLength + this.spoilerTextLength)
	},
	isOverLengthLimit () {
	return this.hasStatusLengthLimit && (this.charactersLeft < 0)
	},
	minimalScopesMode () {
	return this.$store.state.instance.minimalScopesMode
	},
	alwaysShowSubject () {
	- if (typeof this.$store.state.config.alwaysShowSubjectInput !== 'undefined') {
	- return this.$store.state.config.alwaysShowSubjectInput
	- } else if (typeof this.$store.state.instance.alwaysShowSubjectInput !== 'undefined') {
	- return this.$store.state.instance.alwaysShowSubjectInput
	- } else {
	- return true
	- }
	+ return this.mergedConfig.alwaysShowSubjectInput
	},
	postFormats () {
	return this.$store.state.instance.postFormats \|\| []
	},
	safeDMEnabled () {
	return this.$store.state.instance.safeDM
	},
	pollsAvailable () {
	return this.$store.state.instance.pollsAvailable &&
	this.$store.state.instance.pollLimits.max_options >= 2
	},
	hideScopeNotice () {
	- return this.$store.state.config.hideScopeNotice
	+ return this.$store.getters.mergedConfig.hideScopeNotice
	},
	pollContentError () {
	return this.pollFormVisible &&
	this.newStatus.poll &&
	this.newStatus.poll.error
	- }
	+ },
	+ ...mapGetters(['mergedConfig'])
	},
	methods: {
	postStatus (newStatus) {
	if (this.posting) { return }
	if (this.submitDisabled) { return }

	if (this.newStatus.status === '') {
	if (this.newStatus.files.length > 0) {
	this.newStatus.status = '\u200b' // hack
	} else {
	this.error = 'Cannot post an empty status with no files'
	return
	}
	}

	const poll = this.pollFormVisible ? this.newStatus.poll : {}
	if (this.pollContentError) {
	this.error = this.pollContentError
	return
	}

	this.posting = true
	statusPoster.postStatus({
	status: newStatus.status,
	spoilerText: newStatus.spoilerText \|\| null,
	visibility: newStatus.visibility,
	sensitive: newStatus.nsfw,
	media: newStatus.files,
	store: this.$store,
	inReplyToStatusId: this.replyTo,
	contentType: newStatus.contentType,
	poll
	}).then((data) => {
	if (!data.error) {
	this.newStatus = {
	status: '',
	spoilerText: '',
	files: [],
	visibility: newStatus.visibility,
	contentType: newStatus.contentType,
	poll: {}
	}
	this.pollFormVisible = false
	this.$refs.mediaUpload.clearFile()
	this.clearPollForm()
	this.$emit('posted')
	let el = this.$el.querySelector('textarea')
	el.style.height = 'auto'
	el.style.height = undefined
	this.error = null
	} else {
	this.error = data.error
	}
	this.posting = false
	})
	},
	addMediaFile (fileInfo) {
	this.newStatus.files.push(fileInfo)
	this.enableSubmit()
	},
	removeMediaFile (fileInfo) {
	let index = this.newStatus.files.indexOf(fileInfo)
	this.newStatus.files.splice(index, 1)
	},
	uploadFailed (errString, templateArgs) {
	templateArgs = templateArgs \|\| {}
	this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs)
	this.enableSubmit()
	},
	disableSubmit () {
	this.submitDisabled = true
	},
	enableSubmit () {
	this.submitDisabled = false
	},
	type (fileInfo) {
	return fileTypeService.fileType(fileInfo.mimetype)
	},
	paste (e) {
	this.resize(e)
	if (e.clipboardData.files.length > 0) {
	// prevent pasting of file as text
	e.preventDefault()
	// Strangely, files property gets emptied after event propagation
	// Trying to wrap it in array doesn't work. Plus I doubt it's possible
	// to hold more than one file in clipboard.
	this.dropFiles = [e.clipboardData.files[0]]
	}
	},
	fileDrop (e) {
	if (e.dataTransfer.files.length > 0) {
	e.preventDefault() // allow dropping text like before
	this.dropFiles = e.dataTransfer.files
	}
	},
	fileDrag (e) {
	e.dataTransfer.dropEffect = 'copy'
	},
	onEmojiInputInput (e) {
	this.$nextTick(() => {
	this.resize(this.$refs['textarea'])
	})
	},
	resize (e) {
	const target = e.target \|\| e
	if (!(target instanceof window.Element)) { return }

	// Reset to default height for empty form, nothing else to do here.
	if (target.value === '') {
	target.style.height = null
	this.$refs['emoji-input'].resize()
	return
	}

	const rootRef = this.$refs['root']
	/* Scroller is either `window` (replies in TL), sidebar (main post form,
	* replies in notifs) or mobile post form. Note that getting and setting
	* scroll is different for `Window` and `Element`s
	*/
	const scrollerRef = this.$el.closest('.sidebar-scroller') \|\|
	this.$el.closest('.post-form-modal-view') \|\|
	window

	// Getting info about padding we have to account for, removing 'px' part
	const topPaddingStr = window.getComputedStyle(target)['padding-top']
	const bottomPaddingStr = window.getComputedStyle(target)['padding-bottom']
	const topPadding = Number(topPaddingStr.substring(0, topPaddingStr.length - 2))
	const bottomPadding = Number(bottomPaddingStr.substring(0, bottomPaddingStr.length - 2))
	const vertPadding = topPadding + bottomPadding

	const oldHeightStr = target.style.height \|\| ''
	const oldHeight = Number(oldHeightStr.substring(0, oldHeightStr.length - 2))

	/* Explanation:
	*
	* https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
	* scrollHeight returns element's scrollable content height, i.e. visible
	* element + overscrolled parts of it. We use it to determine when text
	* inside the textarea exceeded its height, so we can set height to prevent
	* overscroll, i.e. make textarea grow with the text. HOWEVER, since we
	* explicitly set new height, scrollHeight won't go below that, so we can't
	* SHRINK the textarea when there's extra space. To workaround that we set
	* height to 'auto' which makes textarea tiny again, so that scrollHeight
	* will match text height again. HOWEVER, shrinking textarea can screw with
	* the scroll since there might be not enough padding around root to even
	* warrant a scroll, so it will jump to 0 and refuse to move anywhere,
	* so we check current scroll position before shrinking and then restore it
	* with needed delta.
	*/

	// this part has to be BEFORE the content size update
	const currentScroll = scrollerRef === window
	? scrollerRef.scrollY
	: scrollerRef.scrollTop
	const scrollerHeight = scrollerRef === window
	? scrollerRef.innerHeight
	: scrollerRef.offsetHeight
	const scrollerBottomBorder = currentScroll + scrollerHeight

	// BEGIN content size update
	target.style.height = 'auto'
	const newHeight = target.scrollHeight - vertPadding
	target.style.height = `${newHeight}px`
	// END content size update

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

	const textareaSizeChangeDelta = newHeight - oldHeight \|\| 0
	const isBottomObstructed = scrollerBottomBorder < rootBottomBorder
	const rootChangeDelta = rootBottomBorder - scrollerBottomBorder
	const totalDelta = textareaSizeChangeDelta +
	(isBottomObstructed ? rootChangeDelta : 0)

	const targetScroll = currentScroll + totalDelta

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

	this.$refs['emoji-input'].resize()
	},
	showEmojiPicker () {
	this.$refs['textarea'].focus()
	this.$refs['emoji-input'].triggerShowPicker()
	},
	clearError () {
	this.error = null
	},
	changeVis (visibility) {
	this.newStatus.visibility = visibility
	},
	togglePollForm () {
	this.pollFormVisible = !this.pollFormVisible
	},
	setPoll (poll) {
	this.newStatus.poll = poll
	},
	clearPollForm () {
	if (this.$refs.pollForm) {
	this.$refs.pollForm.clear()
	}
	},
	dismissScopeNotice () {
	this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })
	}
	}
	}

	export default PostStatusForm
	diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
	index 4916d988b7..237ed725a9 100644
	--- a/src/components/post_status_form/post_status_form.vue
	+++ b/src/components/post_status_form/post_status_form.vue
	@@ -1,513 +1,510 @@
	<template>
	<div
	ref="root"
	class="post-status-form"
	>
	<form
	autocomplete="off"
	@submit.prevent="postStatus(newStatus)"
	>
	<div class="form-group">
	<i18n
	v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
	path="post_status.account_not_locked_warning"
	tag="p"
	class="visibility-notice"
	>
	<router-link :to="{ name: 'user-settings' }">
	{{ $t('post_status.account_not_locked_warning_link') }}
	</router-link>
	</i18n>
	<p
	v-if="!hideScopeNotice && newStatus.visibility === 'public'"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.public') }}</span>
	<a
	class="button-icon dismiss"
	@click.prevent="dismissScopeNotice()"
	>
	<i class="icon-cancel" />
	</a>
	</p>
	<p
	v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.unlisted') }}</span>
	<a
	class="button-icon dismiss"
	@click.prevent="dismissScopeNotice()"
	>
	<i class="icon-cancel" />
	</a>
	</p>
	<p
	v-else-if="!hideScopeNotice && newStatus.visibility === 'private' && $store.state.users.currentUser.locked"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.private') }}</span>
	<a
	class="button-icon dismiss"
	@click.prevent="dismissScopeNotice()"
	>
	<i class="icon-cancel" />
	</a>
	</p>
	<p
	v-else-if="newStatus.visibility === 'direct'"
	class="visibility-notice"
	>
	<span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
	<span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
	</p>
	<EmojiInput
	v-if="newStatus.spoilerText \|\| alwaysShowSubject"
	v-model="newStatus.spoilerText"
	enable-emoji-picker
	:suggest="emojiSuggestor"
	class="form-control"
	>
	<input

	v-model="newStatus.spoilerText"
	type="text"
	:placeholder="$t('post_status.content_warning')"
	class="form-post-subject"
	>
	</EmojiInput>
	<EmojiInput
	ref="emoji-input"
	v-model="newStatus.status"
	:suggest="emojiUserSuggestor"
	class="form-control main-input"
	enable-emoji-picker
	hide-emoji-button
	enable-sticker-picker
	@input="onEmojiInputInput"
	@sticker-uploaded="addMediaFile"
	@sticker-upload-failed="uploadFailed"
	>
	<textarea
	ref="textarea"
	v-model="newStatus.status"
	:placeholder="$t('post_status.default')"
	rows="1"
	:disabled="posting"
	class="form-post-body"
	@keydown.meta.enter="postStatus(newStatus)"
	@keyup.ctrl.enter="postStatus(newStatus)"
	@drop="fileDrop"
	@dragover.prevent="fileDrag"
	@input="resize"
	@compositionupdate="resize"
	@paste="paste"
	/>
	<p
	v-if="hasStatusLengthLimit"
	class="character-counter faint"
	:class="{ error: isOverLengthLimit }"
	>
	{{ charactersLeft }}
	</p>
	</EmojiInput>
	<div class="visibility-tray">
	<scope-selector
	:show-all="showAllScopes"
	:user-default="userDefaultScope"
	:original-scope="copyMessageScope"
	:initial-scope="newStatus.visibility"
	:on-scope-change="changeVis"
	/>

	<div
	v-if="postFormats.length > 1"
	class="text-format"
	>
	<label
	for="post-content-type"
	class="select"
	>
	<select
	id="post-content-type"
	v-model="newStatus.contentType"
	class="form-control"
	>
	<option
	v-for="postFormat in postFormats"
	:key="postFormat"
	:value="postFormat"
	>
	{{ $t(`post_status.content_type["${postFormat}"]`) }}
	</option>
	</select>
	<i class="icon-down-open" />
	</label>
	</div>
	<div
	v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
	class="text-format"
	>
	<span class="only-format">
	{{ $t(`post_status.content_type["${postFormats[0]}"]`) }}
	</span>
	</div>
	</div>
	</div>
	<poll-form
	v-if="pollsAvailable"
	ref="pollForm"
	:visible="pollFormVisible"
	@update-poll="setPoll"
	/>
	<div class="form-bottom">
	<div class="form-bottom-left">
	<media-upload
	ref="mediaUpload"
	class="media-upload-icon"
	:drop-files="dropFiles"
	@uploading="disableSubmit"
	@uploaded="addMediaFile"
	@upload-failed="uploadFailed"
	/>
	<div
	class="emoji-icon"
	>
	<i
	:title="$t('emoji.add_emoji')"
	class="icon-smile btn btn-default"
	@click="showEmojiPicker"
	/>
	</div>
	<div
	v-if="pollsAvailable"
	class="poll-icon"
	:class="{ selected: pollFormVisible }"
	>
	<i
	:title="$t('polls.add_poll')"
	class="icon-chart-bar btn btn-default"
	@click="togglePollForm"
	/>
	</div>
	</div>
	<button
	v-if="posting"
	disabled
	class="btn btn-default"
	>
	{{ $t('post_status.posting') }}
	</button>
	<button
	v-else-if="isOverLengthLimit"
	disabled
	class="btn btn-default"
	>
	{{ $t('general.submit') }}
	</button>
	<button
	v-else
	:disabled="submitDisabled"
	type="submit"
	class="btn btn-default"
	>
	{{ $t('general.submit') }}
	</button>
	</div>
	<div
	v-if="error"
	class="alert error"
	>
	Error: {{ error }}
	<i
	class="button-icon icon-cancel"
	@click="clearError"
	/>
	</div>
	<div class="attachments">
	<div
	v-for="file in newStatus.files"
	:key="file.url"
	class="media-upload-wrapper"
	>
	<i
	class="fa button-icon icon-cancel"
	@click="removeMediaFile(file)"
	/>
	<div class="media-upload-container attachment">
	<img
	v-if="type(file) === 'image'"
	class="thumbnail media-upload"
	:src="file.url"
	>
	<video
	v-if="type(file) === 'video'"
	:src="file.url"
	controls
	/>
	<audio
	v-if="type(file) === 'audio'"
	:src="file.url"
	controls
	/>
	<a
	v-if="type(file) === 'unknown'"
	:href="file.url"
	>{{ file.url }}</a>
	</div>
	</div>
	</div>
	<div
	v-if="newStatus.files.length > 0"
	class="upload_settings"
	>
	- <input
	- id="filesSensitive"
	- v-model="newStatus.nsfw"
	- type="checkbox"
	- >
	- <label for="filesSensitive">{{ $t('post_status.attachments_sensitive') }}</label>
	+ <Checkbox v-model="newStatus.nsfw">
	+ {{ $t('post_status.attachments_sensitive') }}
	+ </Checkbox>
	</div>
	</form>
	</div>
	</template>

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

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

	.tribute-container {
	ul {
	padding: 0px;
	li {
	display: flex;
	align-items: center;
	}
	}
	img {
	padding: 3px;
	width: 16px;
	height: 16px;
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	}
	}

	.post-status-form {
	.visibility-tray {
	display: flex;
	justify-content: space-between;
	padding-top: 5px;
	}
	}

	.post-status-form {
	.form-bottom {
	display: flex;
	justify-content: space-between;
	padding: 0.5em;
	height: 32px;

	button {
	width: 10em;
	}

	p {
	margin: 0.35em;
	padding: 0.35em;
	display: flex;
	}
	}

	.form-bottom-left {
	display: flex;
	flex: 1;
	padding-right: 7px;
	margin-right: 7px;
	max-width: 10em;
	}

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

	.media-upload-icon, .poll-icon, .emoji-icon {
	font-size: 26px;
	flex: 1;

	i {
	display: block;
	width: 100%;
	}

	&.selected, &:hover {
	// needs to be specific to override icon default color
	i, label {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	}
	}

	// Order is not necessary but a good indicator
	.media-upload-icon {
	order: 1;
	text-align: left;
	}

	.emoji-icon {
	order: 2;
	text-align: center;
	}

	.poll-icon {
	order: 3;
	text-align: right;
	}

	.icon-chart-bar {
	cursor: pointer;
	}

	.error {
	text-align: center;
	}

	.media-upload-wrapper {
	flex: 0 0 auto;
	max-width: 100%;
	min-width: 50px;
	margin-right: .2em;
	margin-bottom: .5em;

	.icon-cancel {
	display: inline-block;
	position: static;
	margin: 0;
	padding-bottom: 0;
	margin-left: $fallback--attachmentRadius;
	margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
	background-color: $fallback--fg;
	background-color: var(--btn, $fallback--fg);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	}
	}

	.status-input-wrapper {
	display: flex;
	position: relative;
	width: 100%;
	flex-direction: column;
	}

	.attachments {
	padding: 0 0.5em;

	.attachment {
	margin: 0;
	position: relative;
	flex: 0 0 auto;
	border: 1px solid $fallback--border;
	border: 1px solid var(--border, $fallback--border);
	text-align: center;

	audio {
	min-width: 300px;
	flex: 1 0 auto;
	}

	a {
	display: block;
	text-align: left;
	line-height: 1.2;
	padding: .5em;
	}
	}

	i {
	position: absolute;
	margin: 10px;
	padding: 5px;
	background: rgba(230,230,230,0.6);
	border-radius: $fallback--attachmentRadius;
	border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
	font-weight: bold;
	}
	}

	.btn {
	cursor: pointer;
	}

	.btn[disabled] {
	cursor: not-allowed;
	}

	form {
	display: flex;
	flex-direction: column;
	padding: 0.6em;
	}

	.form-group {
	display: flex;
	flex-direction: column;
	padding: 0.25em 0.5em 0.5em;
	line-height:24px;
	}

	form textarea.form-cw {
	line-height:16px;
	resize: none;
	overflow: hidden;
	transition: min-height 200ms 100ms;
	min-height: 1px;
	}

	.form-post-body {
	height: 16px; // Only affects the empty-height
	line-height: 16px;
	resize: none;
	overflow: hidden;
	transition: min-height 200ms 100ms;
	padding-bottom: 1.75em;
	min-height: 1px;
	box-sizing: content-box;
	}

	.main-input {
	position: relative;
	}

	.character-counter {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0;
	margin: 0 0.5em;

	&.error {
	color: $fallback--cRed;
	color: var(--cRed, $fallback--cRed);
	}
	}

	.btn {
	cursor: pointer;
	}

	.btn[disabled] {
	cursor: not-allowed;
	}

	.icon-cancel {
	cursor: pointer;
	z-index: 4;
	}
	}
	</style>
	diff --git a/src/components/post_status_modal/post_status_modal.js b/src/components/post_status_modal/post_status_modal.js
	index 38258296e7..b44354db19 100644
	--- a/src/components/post_status_modal/post_status_modal.js
	+++ b/src/components/post_status_modal/post_status_modal.js
	@@ -1,49 +1,51 @@
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	+import Modal from '../modal/modal.vue'
	import get from 'lodash/get'

	const PostStatusModal = {
	components: {
	- PostStatusForm
	+ PostStatusForm,
	+ Modal
	},
	data () {
	return {
	resettingForm: false
	}
	},
	computed: {
	isLoggedIn () {
	return !!this.$store.state.users.currentUser
	},
	modalActivated () {
	return this.$store.state.postStatus.modalActivated
	},
	isFormVisible () {
	return this.isLoggedIn && !this.resettingForm && this.modalActivated
	},
	params () {
	return this.$store.state.postStatus.params \|\| {}
	}
	},
	watch: {
	params (newVal, oldVal) {
	if (get(newVal, 'repliedUser.id') !== get(oldVal, 'repliedUser.id')) {
	this.resettingForm = true
	this.$nextTick(() => {
	this.resettingForm = false
	})
	}
	},
	isFormVisible (val) {
	if (val) {
	this.$nextTick(() => this.$el && this.$el.querySelector('textarea').focus())
	}
	}
	},
	methods: {
	closeModal () {
	this.$store.dispatch('closePostStatusModal')
	}
	}
	}

	export default PostStatusModal
	diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
	index d3a823896b..dbcd321eb4 100644
	--- a/src/components/post_status_modal/post_status_modal.vue
	+++ b/src/components/post_status_modal/post_status_modal.vue
	@@ -1,44 +1,39 @@
	<template>
	- <div
	+ <Modal
	v-if="isLoggedIn && !resettingForm"
	- v-show="modalActivated"
	- class="post-form-modal-view modal-view"
	- @click="closeModal"
	+ :is-open="modalActivated"
	+ class="post-form-modal-view"
	+ @backdropClicked="closeModal"
	>
	- <div
	- class="post-form-modal-panel panel"
	- @click.stop=""
	- >
	+ <div class="post-form-modal-panel panel">
	<div class="panel-heading">
	{{ $t('post_status.new_status') }}
	</div>
	<PostStatusForm
	class="panel-body"
	v-bind="params"
	@posted="closeModal"
	/>
	</div>
	- </div>
	+ </Modal>
	</template>

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

	<style lang="scss">
	-@import '../../_variables.scss';
	-
	-.post-form-modal-view {
	+.modal-view.post-form-modal-view {
	align-items: flex-start;
	}

	.post-form-modal-panel {
	flex-shrink: 0;
	margin-top: 25%;
	margin-bottom: 2em;
	width: 100%;
	max-width: 700px;

	@media (orientation: landscape) {
	margin-top: 8%;
	}
	}
	</style>
	diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
	index fb543a9c62..d9a0f92e61 100644
	--- a/src/components/retweet_button/retweet_button.js
	+++ b/src/components/retweet_button/retweet_button.js
	@@ -1,35 +1,35 @@
	+import { mapGetters } from 'vuex'
	+
	const RetweetButton = {
	props: ['status', 'loggedIn', 'visibility'],
	data () {
	return {
	- hidePostStatsLocal: typeof this.$store.state.config.hidePostStats === 'undefined'
	- ? this.$store.state.instance.hidePostStats
	- : this.$store.state.config.hidePostStats,
	animated: false
	}
	},
	methods: {
	retweet () {
	if (!this.status.repeated) {
	this.$store.dispatch('retweet', { id: this.status.id })
	} else {
	this.$store.dispatch('unretweet', { id: this.status.id })
	}
	this.animated = true
	setTimeout(() => {
	this.animated = false
	}, 500)
	}
	},
	computed: {
	classes () {
	return {
	'retweeted': this.status.repeated,
	'retweeted-empty': !this.status.repeated,
	'animate-spin': this.animated
	}
	- }
	+ },
	+ ...mapGetters(['mergedConfig'])
	}
	}

	export default RetweetButton
	diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
	index d58a7f8cd1..074f7747b5 100644
	--- a/src/components/retweet_button/retweet_button.vue
	+++ b/src/components/retweet_button/retweet_button.vue
	@@ -1,46 +1,46 @@
	<template>
	<div v-if="loggedIn">
	<template v-if="visibility !== 'private' && visibility !== 'direct'">
	<i
	:class="classes"
	class="button-icon retweet-button icon-retweet rt-active"
	:title="$t('tool_tip.repeat')"
	@click.prevent="retweet()"
	/>
	- <span v-if="!hidePostStatsLocal && status.repeat_num > 0">{{ status.repeat_num }}</span>
	+ <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
	</template>
	<template v-else>
	<i
	:class="classes"
	class="button-icon icon-lock"
	:title="$t('timeline.no_retweet_hint')"
	/>
	</template>
	</div>
	<div v-else-if="!loggedIn">
	<i
	:class="classes"
	class="button-icon icon-retweet"
	:title="$t('tool_tip.repeat')"
	/>
	- <span v-if="!hidePostStatsLocal && status.repeat_num > 0">{{ status.repeat_num }}</span>
	+ <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
	</div>
	</template>

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

	<style lang="scss">
	@import '../../_variables.scss';
	.rt-active {
	cursor: pointer;
	animation-duration: 0.6s;
	&:hover {
	color: $fallback--cGreen;
	color: var(--cGreen, $fallback--cGreen);
	}
	}
	.icon-retweet.retweeted {
	color: $fallback--cGreen;
	color: var(--cGreen, $fallback--cGreen);
	}
	</style>
	diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
	index b6540d7ec0..c49083f9fc 100644
	--- a/src/components/settings/settings.js
	+++ b/src/components/settings/settings.js
	@@ -1,239 +1,112 @@
	/* eslint-env browser */
	import { filter, trim } from 'lodash'

	import TabSwitcher from '../tab_switcher/tab_switcher.js'
	import StyleSwitcher from '../style_switcher/style_switcher.vue'
	import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
	import { extractCommit } from '../../services/version/version.service'
	+import { instanceDefaultProperties, defaultState as configDefaultState } from '../../modules/config.js'
	+import Checkbox from '../checkbox/checkbox.vue'

	const pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/'
	const pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/'

	+const multiChoiceProperties = [
	+ 'postContentType',
	+ 'subjectLineBehavior'
	+]
	+
	const settings = {
	data () {
	- const user = this.$store.state.config
	const instance = this.$store.state.instance

	return {
	- hideAttachmentsLocal: user.hideAttachments,
	- padEmojiLocal: user.padEmoji,
	- hideAttachmentsInConvLocal: user.hideAttachmentsInConv,
	- maxThumbnails: user.maxThumbnails,
	- hideNsfwLocal: user.hideNsfw,
	- useOneClickNsfw: user.useOneClickNsfw,
	- hideISPLocal: user.hideISP,
	- preloadImage: user.preloadImage,
	-
	- hidePostStatsLocal: typeof user.hidePostStats === 'undefined'
	- ? instance.hidePostStats
	- : user.hidePostStats,
	- hidePostStatsDefault: this.$t('settings.values.' + instance.hidePostStats),
	-
	- hideUserStatsLocal: typeof user.hideUserStats === 'undefined'
	- ? instance.hideUserStats
	- : user.hideUserStats,
	- hideUserStatsDefault: this.$t('settings.values.' + instance.hideUserStats),
	-
	- hideFilteredStatusesLocal: typeof user.hideFilteredStatuses === 'undefined'
	- ? instance.hideFilteredStatuses
	- : user.hideFilteredStatuses,
	- hideFilteredStatusesDefault: this.$t('settings.values.' + instance.hideFilteredStatuses),
	-
	- notificationVisibilityLocal: user.notificationVisibility,
	- replyVisibilityLocal: user.replyVisibility,
	- loopVideoLocal: user.loopVideo,
	- muteWordsString: user.muteWords.join('\n'),
	- autoLoadLocal: user.autoLoad,
	- streamingLocal: user.streaming,
	- pauseOnUnfocusedLocal: user.pauseOnUnfocused,
	- hoverPreviewLocal: user.hoverPreview,
	- autohideFloatingPostButtonLocal: user.autohideFloatingPostButton,
	-
	- hideMutedPostsLocal: typeof user.hideMutedPosts === 'undefined'
	- ? instance.hideMutedPosts
	- : user.hideMutedPosts,
	- hideMutedPostsDefault: this.$t('settings.values.' + instance.hideMutedPosts),
	-
	- collapseMessageWithSubjectLocal: typeof user.collapseMessageWithSubject === 'undefined'
	- ? instance.collapseMessageWithSubject
	- : user.collapseMessageWithSubject,
	- collapseMessageWithSubjectDefault: this.$t('settings.values.' + instance.collapseMessageWithSubject),
	-
	- subjectLineBehaviorLocal: typeof user.subjectLineBehavior === 'undefined'
	- ? instance.subjectLineBehavior
	- : user.subjectLineBehavior,
	- subjectLineBehaviorDefault: instance.subjectLineBehavior,
	-
	- postContentTypeLocal: typeof user.postContentType === 'undefined'
	- ? instance.postContentType
	- : user.postContentType,
	- postContentTypeDefault: instance.postContentType,
	-
	- alwaysShowSubjectInputLocal: typeof user.alwaysShowSubjectInput === 'undefined'
	- ? instance.alwaysShowSubjectInput
	- : user.alwaysShowSubjectInput,
	- alwaysShowSubjectInputDefault: this.$t('settings.values.' + instance.alwaysShowSubjectInput),
	-
	- scopeCopyLocal: typeof user.scopeCopy === 'undefined'
	- ? instance.scopeCopy
	- : user.scopeCopy,
	- scopeCopyDefault: this.$t('settings.values.' + instance.scopeCopy),
	-
	- minimalScopesModeLocal: typeof user.minimalScopesMode === 'undefined'
	- ? instance.minimalScopesMode
	- : user.minimalScopesMode,
	- minimalScopesModeDefault: this.$t('settings.values.' + instance.minimalScopesMode),
	-
	- stopGifs: user.stopGifs,
	- webPushNotificationsLocal: user.webPushNotifications,
	- loopVideoSilentOnlyLocal: user.loopVideosSilentOnly,
	loopSilentAvailable:
	// Firefox
	Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') \|\|
	// Chrome-likes
	Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') \|\|
	// Future spec, still not supported in Nightly 63 as of 08/2018
	Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'),
	- playVideosInModal: user.playVideosInModal,
	- useContainFit: user.useContainFit,

	backendVersion: instance.backendVersion,
	frontendVersion: instance.frontendVersion
	}
	},
	components: {
	TabSwitcher,
	StyleSwitcher,
	- InterfaceLanguageSwitcher
	+ InterfaceLanguageSwitcher,
	+ Checkbox
	},
	computed: {
	user () {
	return this.$store.state.users.currentUser
	},
	currentSaveStateNotice () {
	return this.$store.state.interface.settings.currentSaveStateNotice
	},
	postFormats () {
	return this.$store.state.instance.postFormats \|\| []
	},
	instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
	frontendVersionLink () {
	return pleromaFeCommitUrl + this.frontendVersion
	},
	backendVersionLink () {
	return pleromaBeCommitUrl + extractCommit(this.backendVersion)
	+ },
	+ // Getting localized values for instance-default properties
	+ ...instanceDefaultProperties
	+ .filter(key => multiChoiceProperties.includes(key))
	+ .map(key => [
	+ key + 'DefaultValue',
	+ function () {
	+ return this.$store.getters.instanceDefaultConfig[key]
	+ }
	+ ])
	+ .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
	+ ...instanceDefaultProperties
	+ .filter(key => !multiChoiceProperties.includes(key))
	+ .map(key => [
	+ key + 'LocalizedValue',
	+ function () {
	+ return this.$t('settings.values.' + this.$store.getters.instanceDefaultConfig[key])
	+ }
	+ ])
	+ .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
	+ // Generating computed values for vuex properties
	+ ...Object.keys(configDefaultState)
	+ .map(key => [key, {
	+ get () { return this.$store.getters.mergedConfig[key] },
	+ set (value) {
	+ this.$store.dispatch('setOption', { name: key, value })
	+ }
	+ }])
	+ .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
	+ // Special cases (need to transform values)
	+ muteWordsString: {
	+ get () { return this.$store.getters.mergedConfig.muteWords.join('\n') },
	+ set (value) {
	+ this.$store.dispatch('setOption', {
	+ name: 'muteWords',
	+ value: filter(value.split('\n'), (word) => trim(word).length > 0)
	+ })
	+ }
	}
	},
	+ // Updating nested properties
	watch: {
	- hideAttachmentsLocal (value) {
	- this.$store.dispatch('setOption', { name: 'hideAttachments', value })
	- },
	- padEmojiLocal (value) {
	- this.$store.dispatch('setOption', { name: 'padEmoji', value })
	- },
	- hideAttachmentsInConvLocal (value) {
	- this.$store.dispatch('setOption', { name: 'hideAttachmentsInConv', value })
	- },
	- hidePostStatsLocal (value) {
	- this.$store.dispatch('setOption', { name: 'hidePostStats', value })
	- },
	- hideUserStatsLocal (value) {
	- this.$store.dispatch('setOption', { name: 'hideUserStats', value })
	- },
	- hideFilteredStatusesLocal (value) {
	- this.$store.dispatch('setOption', { name: 'hideFilteredStatuses', value })
	- },
	- hideNsfwLocal (value) {
	- this.$store.dispatch('setOption', { name: 'hideNsfw', value })
	- },
	- useOneClickNsfw (value) {
	- this.$store.dispatch('setOption', { name: 'useOneClickNsfw', value })
	- },
	- preloadImage (value) {
	- this.$store.dispatch('setOption', { name: 'preloadImage', value })
	- },
	- hideISPLocal (value) {
	- this.$store.dispatch('setOption', { name: 'hideISP', value })
	- },
	- 'notificationVisibilityLocal.likes' (value) {
	- this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
	- },
	- 'notificationVisibilityLocal.follows' (value) {
	- this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
	- },
	- 'notificationVisibilityLocal.repeats' (value) {
	- this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
	- },
	- 'notificationVisibilityLocal.mentions' (value) {
	- this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
	- },
	- replyVisibilityLocal (value) {
	- this.$store.dispatch('setOption', { name: 'replyVisibility', value })
	- },
	- loopVideoLocal (value) {
	- this.$store.dispatch('setOption', { name: 'loopVideo', value })
	- },
	- loopVideoSilentOnlyLocal (value) {
	- this.$store.dispatch('setOption', { name: 'loopVideoSilentOnly', value })
	- },
	- autoLoadLocal (value) {
	- this.$store.dispatch('setOption', { name: 'autoLoad', value })
	- },
	- streamingLocal (value) {
	- this.$store.dispatch('setOption', { name: 'streaming', value })
	- },
	- pauseOnUnfocusedLocal (value) {
	- this.$store.dispatch('setOption', { name: 'pauseOnUnfocused', value })
	- },
	- hoverPreviewLocal (value) {
	- this.$store.dispatch('setOption', { name: 'hoverPreview', value })
	- },
	- autohideFloatingPostButtonLocal (value) {
	- this.$store.dispatch('setOption', { name: 'autohideFloatingPostButton', value })
	- },
	- muteWordsString (value) {
	- value = filter(value.split('\n'), (word) => trim(word).length > 0)
	- this.$store.dispatch('setOption', { name: 'muteWords', value })
	- },
	- hideMutedPostsLocal (value) {
	- this.$store.dispatch('setOption', { name: 'hideMutedPosts', value })
	- },
	- collapseMessageWithSubjectLocal (value) {
	- this.$store.dispatch('setOption', { name: 'collapseMessageWithSubject', value })
	- },
	- scopeCopyLocal (value) {
	- this.$store.dispatch('setOption', { name: 'scopeCopy', value })
	- },
	- alwaysShowSubjectInputLocal (value) {
	- this.$store.dispatch('setOption', { name: 'alwaysShowSubjectInput', value })
	- },
	- subjectLineBehaviorLocal (value) {
	- this.$store.dispatch('setOption', { name: 'subjectLineBehavior', value })
	- },
	- postContentTypeLocal (value) {
	- this.$store.dispatch('setOption', { name: 'postContentType', value })
	- },
	- minimalScopesModeLocal (value) {
	- this.$store.dispatch('setOption', { name: 'minimalScopesMode', value })
	- },
	- stopGifs (value) {
	- this.$store.dispatch('setOption', { name: 'stopGifs', value })
	- },
	- webPushNotificationsLocal (value) {
	- this.$store.dispatch('setOption', { name: 'webPushNotifications', value })
	- if (value) this.$store.dispatch('registerPushNotifications')
	- },
	- playVideosInModal (value) {
	- this.$store.dispatch('setOption', { name: 'playVideosInModal', value })
	- },
	- useContainFit (value) {
	- this.$store.dispatch('setOption', { name: 'useContainFit', value })
	- },
	- maxThumbnails (value) {
	- value = this.maxThumbnails = Math.floor(Math.max(value, 0))
	- this.$store.dispatch('setOption', { name: 'maxThumbnails', value })
	+ notificationVisibility: {
	+ handler (value) {
	+ this.$store.dispatch('setOption', {
	+ name: 'notificationVisibility',
	+ value: this.$store.getters.mergedConfig.notificationVisibility
	+ })
	+ },
	+ deep: true
	}
	}
	}

	export default settings
	diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
	index 6d87a06031..a83489d2cc 100644
	--- a/src/components/settings/settings.vue
	+++ b/src/components/settings/settings.vue
	@@ -1,491 +1,389 @@
	<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">
	- <input
	- id="hideISP"
	- v-model="hideISPLocal"
	- type="checkbox"
	- >
	- <label for="hideISP">{{ $t('settings.hide_isp') }}</label>
	+ <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>
	- <input
	- id="hideMutedPosts"
	- v-model="hideMutedPostsLocal"
	- type="checkbox"
	- >
	- <label for="hideMutedPosts">{{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsDefault }) }}</label>
	+ <Checkbox v-model="hideMutedPosts">
	+ {{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
	+ </Checkbox>
	</li>
	<li>
	- <input
	- id="collapseMessageWithSubject"
	- v-model="collapseMessageWithSubjectLocal"
	- type="checkbox"
	- >
	- <label for="collapseMessageWithSubject">{{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectDefault }) }}</label>
	+ <Checkbox v-model="collapseMessageWithSubject">
	+ {{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
	+ </Checkbox>
	</li>
	<li>
	- <input
	- id="streaming"
	- v-model="streamingLocal"
	- type="checkbox"
	- >
	- <label for="streaming">{{ $t('settings.streaming') }}</label>
	+ <Checkbox v-model="streaming">
	+ {{ $t('settings.streaming') }}
	+ </Checkbox>
	<ul
	class="setting-list suboptions"
	- :class="[{disabled: !streamingLocal}]"
	+ :class="[{disabled: !streaming}]"
	>
	<li>
	- <input
	- id="pauseOnUnfocused"
	- v-model="pauseOnUnfocusedLocal"
	- :disabled="!streamingLocal"
	- type="checkbox"
	+ <Checkbox
	+ v-model="pauseOnUnfocused"
	+ :disabled="!streaming"
	>
	- <label for="pauseOnUnfocused">{{ $t('settings.pause_on_unfocused') }}</label>
	+ {{ $t('settings.pause_on_unfocused') }}
	+ </Checkbox>
	</li>
	</ul>
	</li>
	<li>
	- <input
	- id="autoload"
	- v-model="autoLoadLocal"
	- type="checkbox"
	- >
	- <label for="autoload">{{ $t('settings.autoload') }}</label>
	+ <Checkbox v-model="autoLoad">
	+ {{ $t('settings.autoload') }}
	+ </Checkbox>
	</li>
	<li>
	- <input
	- id="hoverPreview"
	- v-model="hoverPreviewLocal"
	- type="checkbox"
	- >
	- <label for="hoverPreview">{{ $t('settings.reply_link_preview') }}</label>
	+ <Checkbox v-model="hoverPreview">
	+ {{ $t('settings.reply_link_preview') }}
	+ </Checkbox>
	</li>
	</ul>
	</div>

	<div class="setting-item">
	<h2>{{ $t('settings.composing') }}</h2>
	<ul class="setting-list">
	<li>
	- <input
	- id="scopeCopy"
	- v-model="scopeCopyLocal"
	- type="checkbox"
	- >
	- <label for="scopeCopy">
	- {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyDefault }) }}
	- </label>
	+ <Checkbox v-model="scopeCopy">
	+ {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
	+ </Checkbox>
	</li>
	<li>
	- <input
	- id="subjectHide"
	- v-model="alwaysShowSubjectInputLocal"
	- type="checkbox"
	- >
	- <label for="subjectHide">
	- {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputDefault }) }}
	- </label>
	+ <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="subjectLineBehaviorLocal"
	+ v-model="subjectLineBehavior"
	>
	<option value="email">
	{{ $t('settings.subject_line_email') }}
	- {{ subjectLineBehaviorDefault == 'email' ? $t('settings.instance_default_simple') : '' }}
	+ {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
	</option>
	<option value="masto">
	{{ $t('settings.subject_line_mastodon') }}
	- {{ subjectLineBehaviorDefault == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
	+ {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
	</option>
	<option value="noop">
	{{ $t('settings.subject_line_noop') }}
	- {{ subjectLineBehaviorDefault == 'noop' ? $t('settings.instance_default_simple') : '' }}
	+ {{ 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="postContentTypeLocal"
	+ v-model="postContentType"
	>
	<option
	v-for="postFormat in postFormats"
	:key="postFormat"
	:value="postFormat"
	>
	{{ $t(`post_status.content_type["${postFormat}"]`) }}
	- {{ postContentTypeDefault === postFormat ? $t('settings.instance_default_simple') : '' }}
	+ {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
	</option>
	</select>
	<i class="icon-down-open" />
	</label>
	</div>
	</li>
	<li>
	- <input
	- id="minimalScopesMode"
	- v-model="minimalScopesModeLocal"
	- type="checkbox"
	- >
	- <label for="minimalScopesMode">
	- {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeDefault }) }}
	- </label>
	+ <Checkbox v-model="minimalScopesMode">
	+ {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
	+ </Checkbox>
	</li>
	<li>
	- <input
	- id="autohideFloatingPostButton"
	- v-model="autohideFloatingPostButtonLocal"
	- type="checkbox"
	- >
	- <label for="autohideFloatingPostButton">{{ $t('settings.autohide_floating_post_button') }}</label>
	+ <Checkbox v-model="autohideFloatingPostButton">
	+ {{ $t('settings.autohide_floating_post_button') }}
	+ </Checkbox>
	</li>
	<li>
	- <input
	- id="padEmoji"
	- v-model="padEmojiLocal"
	- type="checkbox"
	- >
	- <label for="padEmoji">{{ $t('settings.pad_emoji') }}</label>
	+ <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>
	- <input
	- id="hideAttachments"
	- v-model="hideAttachmentsLocal"
	- type="checkbox"
	- >
	- <label for="hideAttachments">{{ $t('settings.hide_attachments_in_tl') }}</label>
	+ <Checkbox v-model="hideAttachments">
	+ {{ $t('settings.hide_attachments_in_tl') }}
	+ </Checkbox>
	</li>
	<li>
	- <input
	- id="hideAttachmentsInConv"
	- v-model="hideAttachmentsInConvLocal"
	- type="checkbox"
	- >
	- <label for="hideAttachmentsInConv">{{ $t('settings.hide_attachments_in_convo') }}</label>
	+ <Checkbox v-model="hideAttachmentsInConv">
	+ {{ $t('settings.hide_attachments_in_convo') }}
	+ </Checkbox>
	</li>
	<li>
	- <label for="maxThumbnails">{{ $t('settings.max_thumbnails') }}</label>
	+ <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>
	- <input
	- id="hideNsfw"
	- v-model="hideNsfwLocal"
	- type="checkbox"
	- >
	- <label for="hideNsfw">{{ $t('settings.nsfw_clickthrough') }}</label>
	+ <Checkbox v-model="hideNsfw">
	+ {{ $t('settings.nsfw_clickthrough') }}
	+ </Checkbox>
	</li>
	<ul class="setting-list suboptions">
	<li>
	- <input
	- id="preloadImage"
	+ <Checkbox
	v-model="preloadImage"
	- :disabled="!hideNsfwLocal"
	- type="checkbox"
	+ :disabled="!hideNsfw"
	>
	- <label for="preloadImage">{{ $t('settings.preload_images') }}</label>
	+ {{ $t('settings.preload_images') }}
	+ </Checkbox>
	</li>
	<li>
	- <input
	- id="useOneClickNsfw"
	+ <Checkbox
	v-model="useOneClickNsfw"
	- :disabled="!hideNsfwLocal"
	- type="checkbox"
	+ :disabled="!hideNsfw"
	>
	- <label for="useOneClickNsfw">{{ $t('settings.use_one_click_nsfw') }}</label>
	+ {{ $t('settings.use_one_click_nsfw') }}
	+ </Checkbox>
	</li>
	</ul>
	<li>
	- <input
	- id="stopGifs"
	- v-model="stopGifs"
	- type="checkbox"
	- >
	- <label for="stopGifs">{{ $t('settings.stop_gifs') }}</label>
	+ <Checkbox v-model="stopGifs">
	+ {{ $t('settings.stop_gifs') }}
	+ </Checkbox>
	</li>
	<li>
	- <input
	- id="loopVideo"
	- v-model="loopVideoLocal"
	- type="checkbox"
	- >
	- <label for="loopVideo">{{ $t('settings.loop_video') }}</label>
	+ <Checkbox v-model="loopVideo">
	+ {{ $t('settings.loop_video') }}
	+ </Checkbox>
	<ul
	class="setting-list suboptions"
	- :class="[{disabled: !streamingLocal}]"
	+ :class="[{disabled: !streaming}]"
	>
	<li>
	- <input
	- id="loopVideoSilentOnly"
	- v-model="loopVideoSilentOnlyLocal"
	- :disabled="!loopVideoLocal \|\| !loopSilentAvailable"
	- type="checkbox"
	+ <Checkbox
	+ v-model="loopVideoSilentOnly"
	+ :disabled="!loopVideo \|\| !loopSilentAvailable"
	>
	- <label for="loopVideoSilentOnly">{{ $t('settings.loop_video_silent_only') }}</label>
	+ {{ $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>
	- <input
	- id="playVideosInModal"
	- v-model="playVideosInModal"
	- type="checkbox"
	- >
	- <label for="playVideosInModal">{{ $t('settings.play_videos_in_modal') }}</label>
	+ <Checkbox v-model="playVideosInModal">
	+ {{ $t('settings.play_videos_in_modal') }}
	+ </Checkbox>
	</li>
	<li>
	- <input
	- id="useContainFit"
	- v-model="useContainFit"
	- type="checkbox"
	- >
	- <label for="useContainFit">{{ $t('settings.use_contain_fit') }}</label>
	+ <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>
	- <input
	- id="webPushNotifications"
	- v-model="webPushNotificationsLocal"
	- type="checkbox"
	- >
	- <label for="webPushNotifications">
	+ <Checkbox v-model="webPushNotifications">
	{{ $t('settings.enable_web_push_notifications') }}
	- </label>
	+ </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>
	- <input
	- id="notification-visibility-likes"
	- v-model="notificationVisibilityLocal.likes"
	- type="checkbox"
	- >
	- <label for="notification-visibility-likes">
	+ <Checkbox v-model="notificationVisibility.likes">
	{{ $t('settings.notification_visibility_likes') }}
	- </label>
	+ </Checkbox>
	</li>
	<li>
	- <input
	- id="notification-visibility-repeats"
	- v-model="notificationVisibilityLocal.repeats"
	- type="checkbox"
	- >
	- <label for="notification-visibility-repeats">
	+ <Checkbox v-model="notificationVisibility.repeats">
	{{ $t('settings.notification_visibility_repeats') }}
	- </label>
	+ </Checkbox>
	</li>
	<li>
	- <input
	- id="notification-visibility-follows"
	- v-model="notificationVisibilityLocal.follows"
	- type="checkbox"
	- >
	- <label for="notification-visibility-follows">
	+ <Checkbox v-model="notificationVisibility.follows">
	{{ $t('settings.notification_visibility_follows') }}
	- </label>
	+ </Checkbox>
	</li>
	<li>
	- <input
	- id="notification-visibility-mentions"
	- v-model="notificationVisibilityLocal.mentions"
	- type="checkbox"
	- >
	- <label for="notification-visibility-mentions">
	+ <Checkbox v-model="notificationVisibility.mentions">
	{{ $t('settings.notification_visibility_mentions') }}
	- </label>
	+ </Checkbox>
	</li>
	</ul>
	</div>
	<div>
	{{ $t('settings.replies_in_timeline') }}
	<label
	for="replyVisibility"
	class="select"
	>
	<select
	id="replyVisibility"
	- v-model="replyVisibilityLocal"
	+ 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>
	- <input
	- id="hidePostStats"
	- v-model="hidePostStatsLocal"
	- type="checkbox"
	- >
	- <label for="hidePostStats">
	- {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsDefault }) }}
	- </label>
	+ <Checkbox v-model="hidePostStats">
	+ {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }}
	+ </Checkbox>
	</div>
	<div>
	- <input
	- id="hideUserStats"
	- v-model="hideUserStatsLocal"
	- type="checkbox"
	- >
	- <label for="hideUserStats">
	- {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsDefault }) }}
	- </label>
	+ <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>
	- <input
	- id="hideFilteredStatuses"
	- v-model="hideFilteredStatusesLocal"
	- type="checkbox"
	- >
	- <label for="hideFilteredStatuses">
	- {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesDefault }) }}
	- </label>
	+ <Checkbox v-model="hideFilteredStatuses">
	+ {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }}
	+ </Checkbox>
	</div>
	</div>
	</div>
	<div :label="$t('settings.version.title')">
	<div class="setting-item">
	<ul class="setting-list">
	<li>
	<p>{{ $t('settings.version.backend_version') }}</p>
	<ul class="option-list">
	<li>
	<a
	:href="backendVersionLink"
	target="_blank"
	>{{ backendVersion }}</a>
	</li>
	</ul>
	</li>
	<li>
	<p>{{ $t('settings.version.frontend_version') }}</p>
	<ul class="option-list">
	<li>
	<a
	:href="frontendVersionLink"
	target="_blank"
	>{{ frontendVersion }}</a>
	</li>
	</ul>
	</li>
	</ul>
	</div>
	</div>
	</tab-switcher>
	</keep-alive>
	</div>
	</div>
	</template>

	<script src="./settings.js">
	</script>
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index d17ba3180e..4fbd5ac3e0 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,447 +1,418 @@
	import Attachment from '../attachment/attachment.vue'
	import FavoriteButton from '../favorite_button/favorite_button.vue'
	import RetweetButton from '../retweet_button/retweet_button.vue'
	import Poll from '../poll/poll.vue'
	import ExtraButtons from '../extra_buttons/extra_buttons.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	import UserCard from '../user_card/user_card.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import Gallery from '../gallery/gallery.vue'
	import LinkPreview from '../link-preview/link-preview.vue'
	import AvatarList from '../avatar_list/avatar_list.vue'
	import Timeago from '../timeago/timeago.vue'
	+import StatusPopover from '../status_popover/status_popover.vue'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import fileType from 'src/services/file_type/file_type.service'
	import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
	import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
	-import { filter, find, unescape, uniqBy } from 'lodash'
	+import { filter, unescape, uniqBy } from 'lodash'
	+import { mapGetters } from 'vuex'

	const Status = {
	name: 'Status',
	props: [
	'statusoid',
	'expandable',
	'inConversation',
	'focused',
	'highlight',
	'compact',
	'replies',
	'isPreview',
	'noHeading',
	'inlineExpanded',
	'showPinned',
	'inProfile'
	],
	data () {
	return {
	replying: false,
	unmuted: false,
	userExpanded: false,
	- preview: null,
	- showPreview: false,
	showingTall: this.inConversation && this.focused,
	showingLongSubject: false,
	error: null,
	- expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
	- ? !this.$store.state.instance.collapseMessageWithSubject
	- : !this.$store.state.config.collapseMessageWithSubject,
	+ expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject,
	betterShadow: this.$store.state.interface.browserSupport.cssFilter
	}
	},
	computed: {
	localCollapseSubjectDefault () {
	- return typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
	- ? this.$store.state.instance.collapseMessageWithSubject
	- : this.$store.state.config.collapseMessageWithSubject
	+ return this.mergedConfig.collapseMessageWithSubject
	},
	muteWords () {
	- return this.$store.state.config.muteWords
	+ return this.mergedConfig.muteWords
	},
	repeaterClass () {
	const user = this.statusoid.user
	return highlightClass(user)
	},
	userClass () {
	const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
	return highlightClass(user)
	},
	deleted () {
	return this.statusoid.deleted
	},
	repeaterStyle () {
	const user = this.statusoid.user
	- const highlight = this.$store.state.config.highlight
	+ const highlight = this.mergedConfig.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	userStyle () {
	if (this.noHeading) return
	const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
	- const highlight = this.$store.state.config.highlight
	+ const highlight = this.mergedConfig.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	hideAttachments () {
	- return (this.$store.state.config.hideAttachments && !this.inConversation) \|\|
	- (this.$store.state.config.hideAttachmentsInConv && this.inConversation)
	+ return (this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	+ (this.mergedConfig.hideAttachmentsInConv && this.inConversation)
	},
	userProfileLink () {
	return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
	},
	replyProfileLink () {
	if (this.isReply) {
	return this.generateUserProfileLink(this.status.in_reply_to_user_id, this.replyToName)
	}
	},
	retweet () { return !!this.statusoid.retweeted_status },
	retweeter () { return this.statusoid.user.name \|\| this.statusoid.user.screen_name },
	retweeterHtml () { return this.statusoid.user.name_html },
	retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },
	status () {
	if (this.retweet) {
	return this.statusoid.retweeted_status
	} else {
	return this.statusoid
	}
	},
	statusFromGlobalRepository () {
	// NOTE: Consider to replace status with statusFromGlobalRepository
	return this.$store.state.statuses.allStatusesObject[this.status.id]
	},
	loggedIn () {
	return !!this.$store.state.users.currentUser
	},
	muteWordHits () {
	const statusText = this.status.text.toLowerCase()
	const statusSummary = this.status.summary.toLowerCase()
	const hits = filter(this.muteWords, (muteWord) => {
	return statusText.includes(muteWord.toLowerCase()) \|\| statusSummary.includes(muteWord.toLowerCase())
	})

	return hits
	},
	muted () { return !this.unmuted && ((!this.inProfile && this.status.user.muted) \|\| (!this.inConversation && this.status.thread_muted) \|\| this.muteWordHits.length > 0) },
	hideFilteredStatuses () {
	- return typeof this.$store.state.config.hideFilteredStatuses === 'undefined'
	- ? this.$store.state.instance.hideFilteredStatuses
	- : this.$store.state.config.hideFilteredStatuses
	+ return this.mergedConfig.hideFilteredStatuses
	},
	hideStatus () {
	return (this.hideReply \|\| this.deleted) \|\| (this.muted && this.hideFilteredStatuses)
	},
	isFocused () {
	// retweet or root of an expanded conversation
	if (this.focused) {
	return true
	} else if (!this.inConversation) {
	return false
	}
	// use conversation highlight only when in conversation
	return this.status.id === this.highlight
	},
	// This is a bit hacky, but we want to approximate post height before rendering
	// so we count newlines (masto uses <p> for paragraphs, GS uses <br> between them)
	// as well as approximate line count by counting characters and approximating ~80
	// per line.
	//
	// Using max-height + overflow: auto for status components resulted in false positives
	// very often with japanese characters, and it was very annoying.
	tallStatus () {
	const lengthScore = this.status.statusnet_html.split(/<p\|<br/).length + this.status.text.length / 80
	return lengthScore > 20
	},
	longSubject () {
	return this.status.summary.length > 900
	},
	isReply () {
	return !!(this.status.in_reply_to_status_id && this.status.in_reply_to_user_id)
	},
	replyToName () {
	if (this.status.in_reply_to_screen_name) {
	return this.status.in_reply_to_screen_name
	} else {
	const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
	return user && user.screen_name
	}
	},
	hideReply () {
	- if (this.$store.state.config.replyVisibility === 'all') {
	+ if (this.mergedConfig.replyVisibility === 'all') {
	return false
	}
	if (this.inConversation \|\| !this.isReply) {
	return false
	}
	if (this.status.user.id === this.$store.state.users.currentUser.id) {
	return false
	}
	if (this.status.type === 'retweet') {
	return false
	}
	- const checkFollowing = this.$store.state.config.replyVisibility === 'following'
	+ const checkFollowing = this.mergedConfig.replyVisibility === 'following'
	for (var i = 0; i < this.status.attentions.length; ++i) {
	if (this.status.user.id === this.status.attentions[i].id) {
	continue
	}
	const taggedUser = this.$store.getters.findUser(this.status.attentions[i].id)
	if (checkFollowing && taggedUser && taggedUser.following) {
	return false
	}
	if (this.status.attentions[i].id === this.$store.state.users.currentUser.id) {
	return false
	}
	}
	return this.status.attentions.length > 0
	},
	hideSubjectStatus () {
	if (this.tallStatus && !this.localCollapseSubjectDefault) {
	return false
	}
	return !this.expandingSubject && this.status.summary
	},
	hideTallStatus () {
	if (this.status.summary && this.localCollapseSubjectDefault) {
	return false
	}
	if (this.showingTall) {
	return false
	}
	return this.tallStatus
	},
	showingMore () {
	return (this.tallStatus && this.showingTall) \|\| (this.status.summary && this.expandingSubject)
	},
	nsfwClickthrough () {
	if (!this.status.nsfw) {
	return false
	}
	if (this.status.summary && this.localCollapseSubjectDefault) {
	return false
	}
	return true
	},
	replySubject () {
	if (!this.status.summary) return ''
	const decodedSummary = unescape(this.status.summary)
	- const behavior = typeof this.$store.state.config.subjectLineBehavior === 'undefined'
	- ? this.$store.state.instance.subjectLineBehavior
	- : this.$store.state.config.subjectLineBehavior
	+ const behavior = this.mergedConfig.subjectLineBehavior
	const startsWithRe = decodedSummary.match(/^re[: ]/i)
	if ((behavior !== 'noop' && startsWithRe) \|\| behavior === 'masto') {
	return decodedSummary
	} else if (behavior === 'email') {
	return 're: '.concat(decodedSummary)
	} else if (behavior === 'noop') {
	return ''
	}
	},
	attachmentSize () {
	- if ((this.$store.state.config.hideAttachments && !this.inConversation) \|\|
	- (this.$store.state.config.hideAttachmentsInConv && this.inConversation) \|\|
	+ if ((this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	+ (this.mergedConfig.hideAttachmentsInConv && this.inConversation) \|\|
	(this.status.attachments.length > this.maxThumbnails)) {
	return 'hide'
	} else if (this.compact) {
	return 'small'
	}
	return 'normal'
	},
	galleryTypes () {
	if (this.attachmentSize === 'hide') {
	return []
	}
	- return this.$store.state.config.playVideosInModal
	+ return this.mergedConfig.playVideosInModal
	? ['image', 'video']
	: ['image']
	},
	galleryAttachments () {
	return this.status.attachments.filter(
	file => fileType.fileMatchesSomeType(this.galleryTypes, file)
	)
	},
	nonGalleryAttachments () {
	return this.status.attachments.filter(
	file => !fileType.fileMatchesSomeType(this.galleryTypes, file)
	)
	},
	maxThumbnails () {
	- return this.$store.state.config.maxThumbnails
	+ return this.mergedConfig.maxThumbnails
	},
	contentHtml () {
	if (!this.status.summary_html) {
	return this.status.statusnet_html
	}
	return this.status.summary_html + '<br />' + this.status.statusnet_html
	},
	combinedFavsAndRepeatsUsers () {
	// Use the status from the global status repository since favs and repeats are saved in it
	const combinedUsers = [].concat(
	this.statusFromGlobalRepository.favoritedBy,
	this.statusFromGlobalRepository.rebloggedBy
	)
	return uniqBy(combinedUsers, 'id')
	},
	ownStatus () {
	return this.status.user.id === this.$store.state.users.currentUser.id
	},
	tags () {
	return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ')
	},
	hidePostStats () {
	- return typeof this.$store.state.config.hidePostStats === 'undefined'
	- ? this.$store.state.instance.hidePostStats
	- : this.$store.state.config.hidePostStats
	- }
	+ return this.mergedConfig.hidePostStats
	+ },
	+ ...mapGetters(['mergedConfig'])
	},
	components: {
	Attachment,
	FavoriteButton,
	RetweetButton,
	ExtraButtons,
	PostStatusForm,
	Poll,
	UserCard,
	UserAvatar,
	Gallery,
	LinkPreview,
	AvatarList,
	- Timeago
	+ Timeago,
	+ StatusPopover
	},
	methods: {
	visibilityIcon (visibility) {
	switch (visibility) {
	case 'private':
	return 'icon-lock'
	case 'unlisted':
	return 'icon-lock-open-alt'
	case 'direct':
	return 'icon-mail-alt'
	default:
	return 'icon-globe'
	}
	},
	showError (error) {
	this.error = error
	},
	clearError () {
	this.error = undefined
	},
	linkClicked (event) {
	const target = event.target.closest('.status-content a')
	if (target) {
	if (target.className.match(/mention/)) {
	const href = target.href
	const attn = this.status.attentions.find(attn => mentionMatchesUrl(attn, href))
	if (attn) {
	event.stopPropagation()
	event.preventDefault()
	const link = this.generateUserProfileLink(attn.id, attn.screen_name)
	this.$router.push(link)
	return
	}
	}
	if (target.rel.match(/(?:^\|\s)tag(?:$\|\s)/) \|\| target.className.match(/hashtag/)) {
	// Extract tag name from link url
	const tag = extractTagFromUrl(target.href)
	if (tag) {
	const link = this.generateTagLink(tag)
	this.$router.push(link)
	return
	}
	}
	window.open(target.href, '_blank')
	}
	},
	toggleReplying () {
	this.replying = !this.replying
	},
	gotoOriginal (id) {
	if (this.inConversation) {
	this.$emit('goto', id)
	}
	},
	toggleExpanded () {
	this.$emit('toggleExpanded')
	},
	toggleMute () {
	this.unmuted = !this.unmuted
	},
	toggleUserExpanded () {
	this.userExpanded = !this.userExpanded
	},
	toggleShowMore () {
	if (this.showingTall) {
	this.showingTall = false
	} else if (this.expandingSubject && this.status.summary) {
	this.expandingSubject = false
	} else if (this.hideTallStatus) {
	this.showingTall = true
	} else if (this.hideSubjectStatus && this.status.summary) {
	this.expandingSubject = true
	}
	},
	- replyEnter (id, event) {
	- this.showPreview = true
	- const targetId = id
	- const statuses = this.$store.state.statuses.allStatuses
	-
	- if (!this.preview) {
	- // if we have the status somewhere already
	- this.preview = find(statuses, { 'id': targetId })
	- // or if we have to fetch it
	- if (!this.preview) {
	- this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => {
	- this.preview = status
	- })
	- }
	- } else if (this.preview.id !== targetId) {
	- this.preview = find(statuses, { 'id': targetId })
	- }
	- },
	- replyLeave () {
	- this.showPreview = false
	- },
	generateUserProfileLink (id, name) {
	return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
	},
	generateTagLink (tag) {
	return `/tag/${tag}`
	},
	setMedia () {
	const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
	return () => this.$store.dispatch('setMedia', attachments)
	}
	},
	watch: {
	'highlight': function (id) {
	if (this.status.id === id) {
	let rect = this.$el.getBoundingClientRect()
	if (rect.top < 100) {
	// Post is above screen, match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.height >= (window.innerHeight - 50)) {
	// Post we want to see is taller than screen so match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.bottom > window.innerHeight - 50) {
	// Post is below screen, match its bottom to screen bottom
	window.scrollBy(0, rect.bottom - window.innerHeight + 50)
	}
	}
	},
	'status.repeat_num': function (num) {
	// refetch repeats when repeat_num is changed in any way
	if (this.isFocused && this.statusFromGlobalRepository.rebloggedBy && this.statusFromGlobalRepository.rebloggedBy.length !== num) {
	this.$store.dispatch('fetchRepeats', this.status.id)
	}
	},
	'status.fave_num': function (num) {
	// refetch favs when fave_num is changed in any way
	if (this.isFocused && this.statusFromGlobalRepository.favoritedBy && this.statusFromGlobalRepository.favoritedBy.length !== num) {
	this.$store.dispatch('fetchFavs', this.status.id)
	}
	}
	},
	filters: {
	capitalize: function (str) {
	return str.charAt(0).toUpperCase() + str.slice(1)
	}
	}
	}

	export default Status
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index 93f37a4924..65778b2e5d 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,963 +1,904 @@
	<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"
	>
	- <a
	+ <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"
	- href="#"
	- :aria-label="$t('tool_tip.reply')"
	- @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	- @mouseenter.prevent.stop="replyEnter(status.in_reply_to_status_id, $event)"
	- @mouseleave.prevent.stop="replyLeave()"
	>
	- <i
	- v-if="!isPreview"
	- class="button-icon icon-reply"
	- />
	- <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
	- </a>
	+ <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"
	+ v-if="inConversation && !isPreview && replies && replies.length"
	class="replies"
	>
	- <span
	- v-if="replies && replies.length"
	- class="faint"
	- >{{ $t('status.replies_list') }}</span>
	- <template v-if="replies">
	- <span
	- v-for="reply in replies"
	- :key="reply.id"
	- class="reply-link faint"
	- >
	- <a
	- href="#"
	- @click.prevent="gotoOriginal(reply.id)"
	- @mouseenter="replyEnter(reply.id, $event)"
	- @mouseout="replyLeave()"
	- >{{ reply.name }}</a>
	- </span>
	- </template>
	+ <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="showPreview"
	- class="status-preview-container"
	- >
	- <status
	- v-if="preview"
	- class="status-preview"
	- :is-preview="true"
	- :statusoid="preview"
	- :compact="true"
	- />
	- <div
	- v-else
	- class="status-preview status-preview-loading"
	- >
	- <i class="icon-spin4 animate-spin" />
	- </div>
	- </div>
	-
	<div
	v-if="longSubject"
	class="status-content-wrapper"
	:class="{ 'tall-status': !showingLongSubject }"
	>
	<a
	v-if="!showingLongSubject"
	class="tall-status-hider"
	:class="{ 'tall-status-hider_focused': isFocused }"
	href="#"
	@click.prevent="showingLongSubject=true"
	>{{ $t("general.show_more") }}</a>
	<div
	class="status-content media-body"
	@click.prevent="linkClicked"
	v-html="contentHtml"
	/>
	<a
	v-if="showingLongSubject"
	href="#"
	class="status-unhider"
	@click.prevent="showingLongSubject=false"
	>{{ $t("general.show_less") }}</a>
	</div>
	<div
	v-else
	:class="{'tall-status': hideTallStatus}"
	class="status-content-wrapper"
	>
	<a
	v-if="hideTallStatus"
	class="tall-status-hider"
	:class="{ 'tall-status-hider_focused': isFocused }"
	href="#"
	@click.prevent="toggleShowMore"
	>{{ $t("general.show_more") }}</a>
	<div
	v-if="!hideSubjectStatus"
	class="status-content media-body"
	@click.prevent="linkClicked"
	v-html="contentHtml"
	/>
	<div
	v-else
	class="status-content media-body"
	@click.prevent="linkClicked"
	v-html="status.summary_html"
	/>
	<a
	v-if="hideSubjectStatus"
	href="#"
	class="cw-status-hider"
	@click.prevent="toggleShowMore"
	>{{ $t("general.show_more") }}</a>
	<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>

	<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"
	/>
	<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-preview.status-el {
	- border-style: solid;
	- border-width: 1px;
	- border-color: $fallback--border;
	- border-color: var(--border, $fallback--border);
	-}
	-
	-.status-preview-container {
	- position: relative;
	- max-width: 100%;
	-}
	-
	.status-pin {
	padding: $status-margin $status-margin 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	}

	-.status-preview {
	- position: absolute;
	- max-width: 95%;
	- display: flex;
	- background-color: $fallback--bg;
	- background-color: var(--bg, $fallback--bg);
	- border-color: $fallback--border;
	- border-color: var(--border, $fallback--border);
	- border-style: solid;
	- border-width: 1px;
	- border-radius: $fallback--tooltipRadius;
	- border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	- box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
	- box-shadow: var(--popupShadow);
	- margin-top: 0.25em;
	- margin-left: 0.5em;
	- z-index: 50;
	-
	- .status {
	- flex: 1;
	- border: 0;
	- min-width: 15em;
	- }
	-}
	-
	-.status-preview-loading {
	- display: block;
	- min-width: 15em;
	- padding: 1em;
	- text-align: center;
	- border-width: 1px;
	- border-style: solid;
	-
	- i {
	- font-size: 2em;
	- }
	-}
	-
	.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;

	- a {
	- display: inline-block;
	- word-break: break-all;
	- }
	-
	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;

	- a {
	+ > .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: green;
	}

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

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

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

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

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

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

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

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

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

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

	.reply-body {
	flex: 1;
	}

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

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

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

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

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

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

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

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

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

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

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

	</style>
	diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
	new file mode 100644
	index 0000000000..19f16bd980
	--- /dev/null
	+++ b/src/components/status_popover/status_popover.js
	@@ -0,0 +1,34 @@
	+import { find } from 'lodash'
	+
	+const StatusPopover = {
	+ name: 'StatusPopover',
	+ props: [
	+ 'statusId'
	+ ],
	+ data () {
	+ return {
	+ popperOptions: {
	+ modifiers: {
	+ preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
	+ }
	+ }
	+ }
	+ },
	+ computed: {
	+ status () {
	+ return find(this.$store.state.statuses.allStatuses, { id: this.statusId })
	+ }
	+ },
	+ components: {
	+ Status: () => import('../status/status.vue')
	+ },
	+ methods: {
	+ enter () {
	+ if (!this.status) {
	+ this.$store.dispatch('fetchStatus', this.statusId)
	+ }
	+ }
	+ }
	+}
	+
	+export default StatusPopover
	diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
	new file mode 100644
	index 0000000000..eacf4c0675
	--- /dev/null
	+++ b/src/components/status_popover/status_popover.vue
	@@ -0,0 +1,85 @@
	+<template>
	+ <v-popover
	+ popover-class="status-popover"
	+ placement="top-start"
	+ :popper-options="popperOptions"
	+ @show="enter()"
	+ >
	+ <template slot="popover">
	+ <Status
	+ v-if="status"
	+ :is-preview="true"
	+ :statusoid="status"
	+ :compact="true"
	+ />
	+ <div
	+ v-else
	+ class="status-preview-loading"
	+ >
	+ <i class="icon-spin4 animate-spin" />
	+ </div>
	+ </template>
	+
	+ <slot />
	+ </v-popover>
	+</template>
	+
	+<script src="./status_popover.js" ></script>
	+
	+<style lang="scss">
	+@import '../../_variables.scss';
	+
	+.tooltip.popover.status-popover {
	+ font-size: 1rem;
	+ min-width: 15em;
	+ max-width: 95%;
	+ margin-left: 0.5em;
	+
	+ .popover-inner {
	+ border-color: $fallback--border;
	+ border-color: var(--border, $fallback--border);
	+ border-style: solid;
	+ border-width: 1px;
	+ border-radius: $fallback--tooltipRadius;
	+ border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	+ box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
	+ box-shadow: var(--popupShadow);
	+ }
	+
	+ .popover-arrow::before {
	+ position: absolute;
	+ content: '';
	+ left: -7px;
	+ border: solid 7px transparent;
	+ z-index: -1;
	+ }
	+
	+ &[x-placement^="bottom-start"] .popover-arrow::before {
	+ top: -2px;
	+ border-top-width: 0;
	+ border-bottom-color: $fallback--border;
	+ border-bottom-color: var(--border, $fallback--border);
	+ }
	+
	+ &[x-placement^="top-start"] .popover-arrow::before {
	+ bottom: -2px;
	+ border-bottom-width: 0;
	+ border-top-color: $fallback--border;
	+ border-top-color: var(--border, $fallback--border);
	+ }
	+
	+ .status-el.status-el {
	+ border: none;
	+ }
	+
	+ .status-preview-loading {
	+ padding: 1em;
	+ text-align: center;
	+
	+ i {
	+ font-size: 2em;
	+ }
	+ }
	+}
	+
	+</style>
	diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
	index 02e98f1941..e48fef47ff 100644
	--- a/src/components/still-image/still-image.js
	+++ b/src/components/still-image/still-image.js
	@@ -1,34 +1,36 @@
	const StillImage = {
	props: [
	'src',
	'referrerpolicy',
	'mimetype',
	- 'imageLoadError'
	+ 'imageLoadError',
	+ 'imageLoadHandler'
	],
	data () {
	return {
	- stopGifs: this.$store.state.config.stopGifs
	+ stopGifs: this.$store.getters.mergedConfig.stopGifs
	}
	},
	computed: {
	animated () {
	return this.stopGifs && (this.mimetype === 'image/gif' \|\| this.src.endsWith('.gif'))
	}
	},
	methods: {
	onLoad () {
	+ this.imageLoadHandler && this.imageLoadHandler(this.$refs.src)
	const canvas = this.$refs.canvas
	if (!canvas) return
	const width = this.$refs.src.naturalWidth
	const height = this.$refs.src.naturalHeight
	canvas.width = width
	canvas.height = height
	canvas.getContext('2d').drawImage(this.$refs.src, 0, 0, width, height)
	},
	onError () {
	this.imageLoadError && this.imageLoadError()
	}
	}
	}

	export default StillImage
	diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
	index 8c3d48617b..6e2a1d7bba 100644
	--- a/src/components/style_switcher/style_switcher.js
	+++ b/src/components/style_switcher/style_switcher.js
	@@ -1,575 +1,577 @@
	import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/color_convert/color_convert.js'
	import { set, delete as del } from 'vue'
	import { generateColors, generateShadows, generateRadii, generateFonts, composePreset, getThemes } from '../../services/style_setter/style_setter.js'
	import ColorInput from '../color_input/color_input.vue'
	import RangeInput from '../range_input/range_input.vue'
	import OpacityInput from '../opacity_input/opacity_input.vue'
	import ShadowControl from '../shadow_control/shadow_control.vue'
	import FontControl from '../font_control/font_control.vue'
	import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
	import TabSwitcher from '../tab_switcher/tab_switcher.js'
	import Preview from './preview.vue'
	import ExportImport from '../export_import/export_import.vue'
	+import Checkbox from '../checkbox/checkbox.vue'

	// List of color values used in v1
	const v1OnlyNames = [
	'bg',
	'fg',
	'text',
	'link',
	'cRed',
	'cGreen',
	'cBlue',
	'cOrange'
	].map(_ => _ + 'ColorLocal')

	export default {
	data () {
	return {
	availableStyles: [],
	- selected: this.$store.state.config.theme,
	+ selected: this.$store.getters.mergedConfig.theme,

	previewShadows: {},
	previewColors: {},
	previewRadii: {},
	previewFonts: {},

	shadowsInvalid: true,
	colorsInvalid: true,
	radiiInvalid: true,

	keepColor: false,
	keepShadows: false,
	keepOpacity: false,
	keepRoundness: false,
	keepFonts: false,

	textColorLocal: '',
	linkColorLocal: '',

	bgColorLocal: '',
	bgOpacityLocal: undefined,

	fgColorLocal: '',
	fgTextColorLocal: undefined,
	fgLinkColorLocal: undefined,

	btnColorLocal: undefined,
	btnTextColorLocal: undefined,
	btnOpacityLocal: undefined,

	inputColorLocal: undefined,
	inputTextColorLocal: undefined,
	inputOpacityLocal: undefined,

	panelColorLocal: undefined,
	panelTextColorLocal: undefined,
	panelLinkColorLocal: undefined,
	panelFaintColorLocal: undefined,
	panelOpacityLocal: undefined,

	topBarColorLocal: undefined,
	topBarTextColorLocal: undefined,
	topBarLinkColorLocal: undefined,

	alertErrorColorLocal: undefined,

	badgeOpacityLocal: undefined,
	badgeNotificationColorLocal: undefined,

	borderColorLocal: undefined,
	borderOpacityLocal: undefined,

	faintColorLocal: undefined,
	faintOpacityLocal: undefined,
	faintLinkColorLocal: undefined,

	cRedColorLocal: '',
	cBlueColorLocal: '',
	cGreenColorLocal: '',
	cOrangeColorLocal: '',

	shadowSelected: undefined,
	shadowsLocal: {},
	fontsLocal: {},

	btnRadiusLocal: '',
	inputRadiusLocal: '',
	checkboxRadiusLocal: '',
	panelRadiusLocal: '',
	avatarRadiusLocal: '',
	avatarAltRadiusLocal: '',
	attachmentRadiusLocal: '',
	tooltipRadiusLocal: ''
	}
	},
	created () {
	const self = this

	getThemes().then((themesComplete) => {
	self.availableStyles = themesComplete
	})
	},
	mounted () {
	- this.normalizeLocalState(this.$store.state.config.customTheme)
	+ this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme)
	if (typeof this.shadowSelected === 'undefined') {
	this.shadowSelected = this.shadowsAvailable[0]
	}
	},
	computed: {
	selectedVersion () {
	return Array.isArray(this.selected) ? 1 : 2
	},
	currentColors () {
	return {
	bg: this.bgColorLocal,
	text: this.textColorLocal,
	link: this.linkColorLocal,

	fg: this.fgColorLocal,
	fgText: this.fgTextColorLocal,
	fgLink: this.fgLinkColorLocal,

	panel: this.panelColorLocal,
	panelText: this.panelTextColorLocal,
	panelLink: this.panelLinkColorLocal,
	panelFaint: this.panelFaintColorLocal,

	input: this.inputColorLocal,
	inputText: this.inputTextColorLocal,

	topBar: this.topBarColorLocal,
	topBarText: this.topBarTextColorLocal,
	topBarLink: this.topBarLinkColorLocal,

	btn: this.btnColorLocal,
	btnText: this.btnTextColorLocal,

	alertError: this.alertErrorColorLocal,
	badgeNotification: this.badgeNotificationColorLocal,

	faint: this.faintColorLocal,
	faintLink: this.faintLinkColorLocal,
	border: this.borderColorLocal,

	cRed: this.cRedColorLocal,
	cBlue: this.cBlueColorLocal,
	cGreen: this.cGreenColorLocal,
	cOrange: this.cOrangeColorLocal
	}
	},
	currentOpacity () {
	return {
	bg: this.bgOpacityLocal,
	btn: this.btnOpacityLocal,
	input: this.inputOpacityLocal,
	panel: this.panelOpacityLocal,
	topBar: this.topBarOpacityLocal,
	border: this.borderOpacityLocal,
	faint: this.faintOpacityLocal
	}
	},
	currentRadii () {
	return {
	btn: this.btnRadiusLocal,
	input: this.inputRadiusLocal,
	checkbox: this.checkboxRadiusLocal,
	panel: this.panelRadiusLocal,
	avatar: this.avatarRadiusLocal,
	avatarAlt: this.avatarAltRadiusLocal,
	tooltip: this.tooltipRadiusLocal,
	attachment: this.attachmentRadiusLocal
	}
	},
	preview () {
	return composePreset(this.previewColors, this.previewRadii, this.previewShadows, this.previewFonts)
	},
	previewTheme () {
	if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} }
	return this.preview.theme
	},
	// This needs optimization maybe
	previewContrast () {
	if (!this.previewTheme.colors.bg) return {}
	const colors = this.previewTheme.colors
	const opacity = this.previewTheme.opacity
	if (!colors.bg) return {}
	const hints = (ratio) => ({
	text: ratio.toPrecision(3) + ':1',
	// AA level, AAA level
	aa: ratio >= 4.5,
	aaa: ratio >= 7,
	// same but for 18pt+ texts
	laa: ratio >= 3,
	laaa: ratio >= 4.5
	})

	// fgsfds :DDDD
	const fgs = {
	text: hex2rgb(colors.text),
	panelText: hex2rgb(colors.panelText),
	panelLink: hex2rgb(colors.panelLink),
	btnText: hex2rgb(colors.btnText),
	topBarText: hex2rgb(colors.topBarText),
	inputText: hex2rgb(colors.inputText),

	link: hex2rgb(colors.link),
	topBarLink: hex2rgb(colors.topBarLink),

	red: hex2rgb(colors.cRed),
	green: hex2rgb(colors.cGreen),
	blue: hex2rgb(colors.cBlue),
	orange: hex2rgb(colors.cOrange)
	}

	const bgs = {
	bg: hex2rgb(colors.bg),
	btn: hex2rgb(colors.btn),
	panel: hex2rgb(colors.panel),
	topBar: hex2rgb(colors.topBar),
	input: hex2rgb(colors.input),
	alertError: hex2rgb(colors.alertError),
	badgeNotification: hex2rgb(colors.badgeNotification)
	}

	/* This is a bit confusing because "bottom layer" used is text color
	* This is done to get worst case scenario when background below transparent
	* layer matches text color, making it harder to read the lower alpha is.
	*/
	const ratios = {
	bgText: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.text), fgs.text),
	bgLink: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.link), fgs.link),
	bgRed: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.red), fgs.red),
	bgGreen: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.green), fgs.green),
	bgBlue: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.blue), fgs.blue),
	bgOrange: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.orange), fgs.orange),

	tintText: getContrastRatio(alphaBlend(bgs.bg, 0.5, fgs.panelText), fgs.text),

	panelText: getContrastRatio(alphaBlend(bgs.panel, opacity.panel, fgs.panelText), fgs.panelText),
	panelLink: getContrastRatio(alphaBlend(bgs.panel, opacity.panel, fgs.panelLink), fgs.panelLink),

	btnText: getContrastRatio(alphaBlend(bgs.btn, opacity.btn, fgs.btnText), fgs.btnText),

	inputText: getContrastRatio(alphaBlend(bgs.input, opacity.input, fgs.inputText), fgs.inputText),

	topBarText: getContrastRatio(alphaBlend(bgs.topBar, opacity.topBar, fgs.topBarText), fgs.topBarText),
	topBarLink: getContrastRatio(alphaBlend(bgs.topBar, opacity.topBar, fgs.topBarLink), fgs.topBarLink)
	}

	return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
	},
	previewRules () {
	if (!this.preview.rules) return ''
	return [
	...Object.values(this.preview.rules),
	'color: var(--text)',
	'font-family: var(--interfaceFont, sans-serif)'
	].join(';')
	},
	shadowsAvailable () {
	return Object.keys(this.previewTheme.shadows).sort()
	},
	currentShadowOverriden: {
	get () {
	return !!this.currentShadow
	},
	set (val) {
	if (val) {
	set(this.shadowsLocal, this.shadowSelected, this.currentShadowFallback.map(_ => Object.assign({}, _)))
	} else {
	del(this.shadowsLocal, this.shadowSelected)
	}
	}
	},
	currentShadowFallback () {
	return this.previewTheme.shadows[this.shadowSelected]
	},
	currentShadow: {
	get () {
	return this.shadowsLocal[this.shadowSelected]
	},
	set (v) {
	set(this.shadowsLocal, this.shadowSelected, v)
	}
	},
	themeValid () {
	return !this.shadowsInvalid && !this.colorsInvalid && !this.radiiInvalid
	},
	exportedTheme () {
	const saveEverything = (
	!this.keepFonts &&
	!this.keepShadows &&
	!this.keepOpacity &&
	!this.keepRoundness &&
	!this.keepColor
	)

	const theme = {}

	if (this.keepFonts \|\| saveEverything) {
	theme.fonts = this.fontsLocal
	}
	if (this.keepShadows \|\| saveEverything) {
	theme.shadows = this.shadowsLocal
	}
	if (this.keepOpacity \|\| saveEverything) {
	theme.opacity = this.currentOpacity
	}
	if (this.keepColor \|\| saveEverything) {
	theme.colors = this.currentColors
	}
	if (this.keepRoundness \|\| saveEverything) {
	theme.radii = this.currentRadii
	}

	return {
	// To separate from other random JSON files and possible future theme formats
	_pleroma_theme_version: 2, theme
	}
	}
	},
	components: {
	ColorInput,
	OpacityInput,
	RangeInput,
	ContrastRatio,
	ShadowControl,
	FontControl,
	TabSwitcher,
	Preview,
	- ExportImport
	+ ExportImport,
	+ Checkbox
	},
	methods: {
	setCustomTheme () {
	this.$store.dispatch('setOption', {
	name: 'customTheme',
	value: {
	shadows: this.shadowsLocal,
	fonts: this.fontsLocal,
	opacity: this.currentOpacity,
	colors: this.currentColors,
	radii: this.currentRadii
	}
	})
	},
	onImport (parsed) {
	if (parsed._pleroma_theme_version === 1) {
	this.normalizeLocalState(parsed, 1)
	} else if (parsed._pleroma_theme_version === 2) {
	this.normalizeLocalState(parsed.theme, 2)
	}
	},
	importValidator (parsed) {
	const version = parsed._pleroma_theme_version
	return version >= 1 \|\| version <= 2
	},
	clearAll () {
	- const state = this.$store.state.config.customTheme
	+ const state = this.$store.getters.mergedConfig.customTheme
	const version = state.colors ? 2 : 'l1'
	- this.normalizeLocalState(this.$store.state.config.customTheme, version)
	+ this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme, version)
	},

	// Clears all the extra stuff when loading V1 theme
	clearV1 () {
	Object.keys(this.$data)
	.filter(_ => _.endsWith('ColorLocal') \|\| _.endsWith('OpacityLocal'))
	.filter(_ => !v1OnlyNames.includes(_))
	.forEach(key => {
	set(this.$data, key, undefined)
	})
	},

	clearRoundness () {
	Object.keys(this.$data)
	.filter(_ => _.endsWith('RadiusLocal'))
	.forEach(key => {
	set(this.$data, key, undefined)
	})
	},

	clearOpacity () {
	Object.keys(this.$data)
	.filter(_ => _.endsWith('OpacityLocal'))
	.forEach(key => {
	set(this.$data, key, undefined)
	})
	},

	clearShadows () {
	this.shadowsLocal = {}
	},

	clearFonts () {
	this.fontsLocal = {}
	},

	/**
	* This applies stored theme data onto form. Supports three versions of data:
	* v2 (version = 2) - newer version of themes.
	* v1 (version = 1) - older version of themes (import from file)
	* v1l (version = l1) - older version of theme (load from local storage)
	* v1 and v1l differ because of way themes were stored/exported.
	* @param {Object} input - input data
	* @param {Number} version - version of data. 0 means try to guess based on data. "l1" means v1, locastorage type
	*/
	normalizeLocalState (input, version = 0) {
	const colors = input.colors \|\| input
	const radii = input.radii \|\| input
	const opacity = input.opacity
	const shadows = input.shadows \|\| {}
	const fonts = input.fonts \|\| {}

	if (version === 0) {
	if (input.version) version = input.version
	// Old v1 naming: fg is text, btn is foreground
	if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') {
	version = 1
	}
	// New v2 naming: text is text, fg is foreground
	if (typeof colors.text !== 'undefined' && typeof colors.fg !== 'undefined') {
	version = 2
	}
	}

	// Stuff that differs between V1 and V2
	if (version === 1) {
	this.fgColorLocal = rgb2hex(colors.btn)
	this.textColorLocal = rgb2hex(colors.fg)
	}

	if (!this.keepColor) {
	this.clearV1()
	const keys = new Set(version !== 1 ? Object.keys(colors) : [])
	if (version === 1 \|\| version === 'l1') {
	keys
	.add('bg')
	.add('link')
	.add('cRed')
	.add('cBlue')
	.add('cGreen')
	.add('cOrange')
	}

	keys.forEach(key => {
	this[key + 'ColorLocal'] = rgb2hex(colors[key])
	})
	}

	if (!this.keepRoundness) {
	this.clearRoundness()
	Object.entries(radii).forEach(([k, v]) => {
	// 'Radius' is kept mostly for v1->v2 localstorage transition
	const key = k.endsWith('Radius') ? k.split('Radius')[0] : k
	this[key + 'RadiusLocal'] = v
	})
	}

	if (!this.keepShadows) {
	this.clearShadows()
	this.shadowsLocal = shadows
	this.shadowSelected = this.shadowsAvailable[0]
	}

	if (!this.keepFonts) {
	this.clearFonts()
	this.fontsLocal = fonts
	}

	if (opacity && !this.keepOpacity) {
	this.clearOpacity()
	Object.entries(opacity).forEach(([k, v]) => {
	if (typeof v === 'undefined' \|\| v === null \|\| Number.isNaN(v)) return
	this[k + 'OpacityLocal'] = v
	})
	}
	}
	},
	watch: {
	currentRadii () {
	try {
	this.previewRadii = generateRadii({ radii: this.currentRadii })
	this.radiiInvalid = false
	} catch (e) {
	this.radiiInvalid = true
	console.warn(e)
	}
	},
	shadowsLocal: {
	handler () {
	try {
	this.previewShadows = generateShadows({ shadows: this.shadowsLocal })
	this.shadowsInvalid = false
	} catch (e) {
	this.shadowsInvalid = true
	console.warn(e)
	}
	},
	deep: true
	},
	fontsLocal: {
	handler () {
	try {
	this.previewFonts = generateFonts({ fonts: this.fontsLocal })
	this.fontsInvalid = false
	} catch (e) {
	this.fontsInvalid = true
	console.warn(e)
	}
	},
	deep: true
	},
	currentColors () {
	try {
	this.previewColors = generateColors({
	opacity: this.currentOpacity,
	colors: this.currentColors
	})
	this.colorsInvalid = false
	} catch (e) {
	this.colorsInvalid = true
	console.warn(e)
	}
	},
	currentOpacity () {
	try {
	this.previewColors = generateColors({
	opacity: this.currentOpacity,
	colors: this.currentColors
	})
	} catch (e) {
	console.warn(e)
	}
	},
	selected () {
	if (this.selectedVersion === 1) {
	if (!this.keepRoundness) {
	this.clearRoundness()
	}

	if (!this.keepShadows) {
	this.clearShadows()
	}

	if (!this.keepOpacity) {
	this.clearOpacity()
	}

	if (!this.keepColor) {
	this.clearV1()

	this.bgColorLocal = this.selected[1]
	this.fgColorLocal = this.selected[2]
	this.textColorLocal = this.selected[3]
	this.linkColorLocal = this.selected[4]
	this.cRedColorLocal = this.selected[5]
	this.cGreenColorLocal = this.selected[6]
	this.cBlueColorLocal = this.selected[7]
	this.cOrangeColorLocal = this.selected[8]
	}
	} else if (this.selectedVersion >= 2) {
	this.normalizeLocalState(this.selected.theme, 2)
	}
	}
	}
	}
	diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
	index d24394a44e..944debabd2 100644
	--- a/src/components/style_switcher/style_switcher.vue
	+++ b/src/components/style_switcher/style_switcher.vue
	@@ -1,595 +1,580 @@
	<template>
	<div class="style-switcher">
	<div class="presets-container">
	<div class="save-load">
	<export-import
	:export-object="exportedTheme"
	:export-label="$t("settings.export_theme")"
	:import-label="$t("settings.import_theme")"
	:import-failed-text="$t("settings.invalid_theme_imported")"
	:on-import="onImport"
	:validator="importValidator"
	>
	<template slot="before">
	<div class="presets">
	{{ $t('settings.presets') }}
	<label
	for="preset-switcher"
	class="select"
	>
	<select
	id="preset-switcher"
	v-model="selected"
	class="preset-switcher"
	>
	<option
	v-for="style in availableStyles"
	:key="style.name"
	:value="style"
	:style="{
	backgroundColor: style[1] \|\| style.theme.colors.bg,
	color: style[3] \|\| style.theme.colors.text
	}"
	>
	{{ style[0] \|\| style.name }}
	</option>
	</select>
	<i class="icon-down-open" />
	</label>
	</div>
	</template>
	</export-import>
	</div>
	<div class="save-load-options">
	<span class="keep-option">
	- <input
	- id="keep-color"
	- v-model="keepColor"
	- type="checkbox"
	- >
	- <label for="keep-color">{{ $t('settings.style.switcher.keep_color') }}</label>
	+ <Checkbox v-model="keepColor">
	+ {{ $t('settings.style.switcher.keep_color') }}
	+ </Checkbox>
	</span>
	<span class="keep-option">
	- <input
	- id="keep-shadows"
	- v-model="keepShadows"
	- type="checkbox"
	- >
	- <label for="keep-shadows">{{ $t('settings.style.switcher.keep_shadows') }}</label>
	+ <Checkbox v-model="keepShadows">
	+ {{ $t('settings.style.switcher.keep_shadows') }}
	+ </Checkbox>
	</span>
	<span class="keep-option">
	- <input
	- id="keep-opacity"
	- v-model="keepOpacity"
	- type="checkbox"
	- >
	- <label for="keep-opacity">{{ $t('settings.style.switcher.keep_opacity') }}</label>
	+ <Checkbox v-model="keepOpacity">
	+ {{ $t('settings.style.switcher.keep_opacity') }}
	+ </Checkbox>
	</span>
	<span class="keep-option">
	- <input
	- id="keep-roundness"
	- v-model="keepRoundness"
	- type="checkbox"
	- >
	- <label for="keep-roundness">{{ $t('settings.style.switcher.keep_roundness') }}</label>
	+ <Checkbox v-model="keepRoundness">
	+ {{ $t('settings.style.switcher.keep_roundness') }}
	+ </Checkbox>
	</span>
	<span class="keep-option">
	- <input
	- id="keep-fonts"
	- v-model="keepFonts"
	- type="checkbox"
	- >
	- <label for="keep-fonts">{{ $t('settings.style.switcher.keep_fonts') }}</label>
	+ <Checkbox v-model="keepFonts">
	+ {{ $t('settings.style.switcher.keep_fonts') }}
	+ </Checkbox>
	</span>
	<p>{{ $t('settings.style.switcher.save_load_hint') }}</p>
	</div>
	</div>

	<div class="preview-container">
	<preview :style="previewRules" />
	</div>

	<keep-alive>
	<tab-switcher key="style-tweak">
	<div
	:label="$t('settings.style.common_colors._tab_label')"
	class="color-container"
	>
	<div class="tab-header">
	<p>{{ $t('settings.theme_help') }}</p>
	<button
	class="btn"
	@click="clearOpacity"
	>
	{{ $t('settings.style.switcher.clear_opacity') }}
	</button>
	<button
	class="btn"
	@click="clearV1"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<p>{{ $t('settings.theme_help_v2_1') }}</p>
	<h4>{{ $t('settings.style.common_colors.main') }}</h4>
	<div class="color-item">
	<ColorInput
	v-model="bgColorLocal"
	name="bgColor"
	:label="$t('settings.background')"
	/>
	<OpacityInput
	v-model="bgOpacityLocal"
	name="bgOpacity"
	:fallback="previewTheme.opacity.bg \|\| 1"
	/>
	<ColorInput
	v-model="textColorLocal"
	name="textColor"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.bgText" />
	<ColorInput
	v-model="linkColorLocal"
	name="linkColor"
	:label="$t('settings.links')"
	/>
	<ContrastRatio :contrast="previewContrast.bgLink" />
	</div>
	<div class="color-item">
	<ColorInput
	v-model="fgColorLocal"
	name="fgColor"
	:label="$t('settings.foreground')"
	/>
	<ColorInput
	v-model="fgTextColorLocal"
	name="fgTextColor"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.fgText"
	/>
	<ColorInput
	v-model="fgLinkColorLocal"
	name="fgLinkColor"
	:label="$t('settings.links')"
	:fallback="previewTheme.colors.fgLink"
	/>
	<p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
	</div>
	<h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
	<div class="color-item">
	<ColorInput
	v-model="cRedColorLocal"
	name="cRedColor"
	:label="$t('settings.cRed')"
	/>
	<ContrastRatio :contrast="previewContrast.bgRed" />
	<ColorInput
	v-model="cBlueColorLocal"
	name="cBlueColor"
	:label="$t('settings.cBlue')"
	/>
	<ContrastRatio :contrast="previewContrast.bgBlue" />
	</div>
	<div class="color-item">
	<ColorInput
	v-model="cGreenColorLocal"
	name="cGreenColor"
	:label="$t('settings.cGreen')"
	/>
	<ContrastRatio :contrast="previewContrast.bgGreen" />
	<ColorInput
	v-model="cOrangeColorLocal"
	name="cOrangeColor"
	:label="$t('settings.cOrange')"
	/>
	<ContrastRatio :contrast="previewContrast.bgOrange" />
	</div>
	<p>{{ $t('settings.theme_help_v2_2') }}</p>
	</div>

	<div
	:label="$t('settings.style.advanced_colors._tab_label')"
	class="color-container"
	>
	<div class="tab-header">
	<p>{{ $t('settings.theme_help') }}</p>
	<button
	class="btn"
	@click="clearOpacity"
	>
	{{ $t('settings.style.switcher.clear_opacity') }}
	</button>
	<button
	class="btn"
	@click="clearV1"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
	<ColorInput
	v-model="alertErrorColorLocal"
	name="alertError"
	:label="$t('settings.style.advanced_colors.alert_error')"
	:fallback="previewTheme.colors.alertError"
	/>
	<ContrastRatio :contrast="previewContrast.alertError" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
	<ColorInput
	v-model="badgeNotificationColorLocal"
	name="badgeNotification"
	:label="$t('settings.style.advanced_colors.badge_notification')"
	:fallback="previewTheme.colors.badgeNotification"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
	<ColorInput
	v-model="panelColorLocal"
	name="panelColor"
	:fallback="fgColorLocal"
	:label="$t('settings.background')"
	/>
	<OpacityInput
	v-model="panelOpacityLocal"
	name="panelOpacity"
	:fallback="previewTheme.opacity.panel \|\| 1"
	/>
	<ColorInput
	v-model="panelTextColorLocal"
	name="panelTextColor"
	:fallback="previewTheme.colors.panelText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio
	:contrast="previewContrast.panelText"
	large="1"
	/>
	<ColorInput
	v-model="panelLinkColorLocal"
	name="panelLinkColor"
	:fallback="previewTheme.colors.panelLink"
	:label="$t('settings.links')"
	/>
	<ContrastRatio
	:contrast="previewContrast.panelLink"
	large="1"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
	<ColorInput
	v-model="topBarColorLocal"
	name="topBarColor"
	:fallback="fgColorLocal"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="topBarTextColorLocal"
	name="topBarTextColor"
	:fallback="previewTheme.colors.topBarText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.topBarText" />
	<ColorInput
	v-model="topBarLinkColorLocal"
	name="topBarLinkColor"
	:fallback="previewTheme.colors.topBarLink"
	:label="$t('settings.links')"
	/>
	<ContrastRatio :contrast="previewContrast.topBarLink" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4>
	<ColorInput
	v-model="inputColorLocal"
	name="inputColor"
	:fallback="fgColorLocal"
	:label="$t('settings.background')"
	/>
	<OpacityInput
	v-model="inputOpacityLocal"
	name="inputOpacity"
	:fallback="previewTheme.opacity.input \|\| 1"
	/>
	<ColorInput
	v-model="inputTextColorLocal"
	name="inputTextColor"
	:fallback="previewTheme.colors.inputText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.inputText" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4>
	<ColorInput
	v-model="btnColorLocal"
	name="btnColor"
	:fallback="fgColorLocal"
	:label="$t('settings.background')"
	/>
	<OpacityInput
	v-model="btnOpacityLocal"
	name="btnOpacity"
	:fallback="previewTheme.opacity.btn \|\| 1"
	/>
	<ColorInput
	v-model="btnTextColorLocal"
	name="btnTextColor"
	:fallback="previewTheme.colors.btnText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.btnText" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
	<ColorInput
	v-model="borderColorLocal"
	name="borderColor"
	:fallback="previewTheme.colors.border"
	:label="$t('settings.style.common.color')"
	/>
	<OpacityInput
	v-model="borderOpacityLocal"
	name="borderOpacity"
	:fallback="previewTheme.opacity.border \|\| 1"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4>
	<ColorInput
	v-model="faintColorLocal"
	name="faintColor"
	:fallback="previewTheme.colors.faint \|\| 1"
	:label="$t('settings.text')"
	/>
	<ColorInput
	v-model="faintLinkColorLocal"
	name="faintLinkColor"
	:fallback="previewTheme.colors.faintLink"
	:label="$t('settings.links')"
	/>
	<ColorInput
	v-model="panelFaintColorLocal"
	name="panelFaintColor"
	:fallback="previewTheme.colors.panelFaint"
	:label="$t('settings.style.advanced_colors.panel_header')"
	/>
	<OpacityInput
	v-model="faintOpacityLocal"
	name="faintOpacity"
	:fallback="previewTheme.opacity.faint \|\| 0.5"
	/>
	</div>
	</div>

	<div
	:label="$t('settings.style.radii._tab_label')"
	class="radius-container"
	>
	<div class="tab-header">
	<p>{{ $t('settings.radii_help') }}</p>
	<button
	class="btn"
	@click="clearRoundness"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<RangeInput
	v-model="btnRadiusLocal"
	name="btnRadius"
	:label="$t('settings.btnRadius')"
	:fallback="previewTheme.radii.btn"
	max="16"
	hard-min="0"
	/>
	<RangeInput
	v-model="inputRadiusLocal"
	name="inputRadius"
	:label="$t('settings.inputRadius')"
	:fallback="previewTheme.radii.input"
	max="9"
	hard-min="0"
	/>
	<RangeInput
	v-model="checkboxRadiusLocal"
	name="checkboxRadius"
	:label="$t('settings.checkboxRadius')"
	:fallback="previewTheme.radii.checkbox"
	max="16"
	hard-min="0"
	/>
	<RangeInput
	v-model="panelRadiusLocal"
	name="panelRadius"
	:label="$t('settings.panelRadius')"
	:fallback="previewTheme.radii.panel"
	max="50"
	hard-min="0"
	/>
	<RangeInput
	v-model="avatarRadiusLocal"
	name="avatarRadius"
	:label="$t('settings.avatarRadius')"
	:fallback="previewTheme.radii.avatar"
	max="28"
	hard-min="0"
	/>
	<RangeInput
	v-model="avatarAltRadiusLocal"
	name="avatarAltRadius"
	:label="$t('settings.avatarAltRadius')"
	:fallback="previewTheme.radii.avatarAlt"
	max="28"
	hard-min="0"
	/>
	<RangeInput
	v-model="attachmentRadiusLocal"
	name="attachmentRadius"
	:label="$t('settings.attachmentRadius')"
	:fallback="previewTheme.radii.attachment"
	max="50"
	hard-min="0"
	/>
	<RangeInput
	v-model="tooltipRadiusLocal"
	name="tooltipRadius"
	:label="$t('settings.tooltipRadius')"
	:fallback="previewTheme.radii.tooltip"
	max="50"
	hard-min="0"
	/>
	</div>

	<div
	:label="$t('settings.style.shadows._tab_label')"
	class="shadow-container"
	>
	<div class="tab-header shadow-selector">
	<div class="select-container">
	{{ $t('settings.style.shadows.component') }}
	<label
	for="shadow-switcher"
	class="select"
	>
	<select
	id="shadow-switcher"
	v-model="shadowSelected"
	class="shadow-switcher"
	>
	<option
	v-for="shadow in shadowsAvailable"
	:key="shadow"
	:value="shadow"
	>
	{{ $t('settings.style.shadows.components.' + shadow) }}
	</option>
	</select>
	<i class="icon-down-open" />
	</label>
	</div>
	<div class="override">
	<label
	for="override"
	class="label"
	>
	{{ $t('settings.style.shadows.override') }}
	</label>
	<input
	id="override"
	v-model="currentShadowOverriden"
	name="override"
	class="input-override"
	type="checkbox"
	>
	<label
	class="checkbox-label"
	for="override"
	/>
	</div>
	<button
	class="btn"
	@click="clearShadows"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<shadow-control
	v-model="currentShadow"
	:ready="!!currentShadowFallback"
	:fallback="currentShadowFallback"
	/>
	<div v-if="shadowSelected === 'avatar' \|\| shadowSelected === 'avatarStatus'">
	<i18n
	path="settings.style.shadows.filter_hint.always_drop_shadow"
	tag="p"
	>
	<code>filter: drop-shadow()</code>
	</i18n>
	<p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
	<i18n
	path="settings.style.shadows.filter_hint.drop_shadow_syntax"
	tag="p"
	>
	<code>drop-shadow</code>
	<code>spread-radius</code>
	<code>inset</code>
	</i18n>
	<i18n
	path="settings.style.shadows.filter_hint.inset_classic"
	tag="p"
	>
	<code>box-shadow</code>
	</i18n>
	<p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
	</div>
	</div>

	<div
	:label="$t('settings.style.fonts._tab_label')"
	class="fonts-container"
	>
	<div class="tab-header">
	<p>{{ $t('settings.style.fonts.help') }}</p>
	<button
	class="btn"
	@click="clearFonts"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<FontControl
	v-model="fontsLocal.interface"
	name="ui"
	:label="$t('settings.style.fonts.components.interface')"
	:fallback="previewTheme.fonts.interface"
	no-inherit="1"
	/>
	<FontControl
	v-model="fontsLocal.input"
	name="input"
	:label="$t('settings.style.fonts.components.input')"
	:fallback="previewTheme.fonts.input"
	/>
	<FontControl
	v-model="fontsLocal.post"
	name="post"
	:label="$t('settings.style.fonts.components.post')"
	:fallback="previewTheme.fonts.post"
	/>
	<FontControl
	v-model="fontsLocal.postCode"
	name="postCode"
	:label="$t('settings.style.fonts.components.postCode')"
	:fallback="previewTheme.fonts.postCode"
	/>
	</div>
	</tab-switcher>
	</keep-alive>

	<div class="apply-container">
	<button
	class="btn submit"
	:disabled="!themeValid"
	@click="setCustomTheme"
	>
	{{ $t('general.apply') }}
	</button>
	<button
	class="btn"
	@click="clearAll"
	>
	{{ $t('settings.style.switcher.reset') }}
	</button>
	</div>
	</div>
	</template>

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

	<style src="./style_switcher.scss" lang="scss"></style>
	diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
	index 0594576c46..27a9a55ed4 100644
	--- a/src/components/timeline/timeline.js
	+++ b/src/components/timeline/timeline.js
	@@ -1,176 +1,176 @@
	import Status from '../status/status.vue'
	import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
	import Conversation from '../conversation/conversation.vue'
	import { throttle, keyBy } from 'lodash'

	export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => {
	const ids = []
	if (pinnedStatusIds && pinnedStatusIds.length > 0) {
	for (let status of statuses) {
	if (!pinnedStatusIds.includes(status.id)) {
	break
	}
	ids.push(status.id)
	}
	}
	return ids
	}

	const Timeline = {
	props: [
	'timeline',
	'timelineName',
	'title',
	'userId',
	'tag',
	'embedded',
	'count',
	'pinnedStatusIds',
	'inProfile'
	],
	data () {
	return {
	paused: false,
	unfocused: false,
	bottomedOut: false
	}
	},
	computed: {
	timelineError () { return this.$store.state.statuses.error },
	newStatusCount () {
	return this.timeline.newStatusCount
	},
	newStatusCountStr () {
	if (this.timeline.flushMarker !== 0) {
	return ''
	} else {
	return ` (${this.newStatusCount})`
	}
	},
	classes () {
	return {
	root: ['timeline'].concat(!this.embedded ? ['panel', 'panel-default'] : []),
	header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []),
	body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
	footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
	}
	},
	// id map of statuses which need to be hidden in the main list due to pinning logic
	excludedStatusIdsObject () {
	const ids = getExcludedStatusIdsByPinning(this.timeline.visibleStatuses, this.pinnedStatusIds)
	// Convert id array to object
	return keyBy(ids)
	},
	pinnedStatusIdsObject () {
	return keyBy(this.pinnedStatusIds)
	}
	},
	components: {
	Status,
	Conversation
	},
	created () {
	const store = this.$store
	const credentials = store.state.users.currentUser.credentials
	const showImmediately = this.timeline.visibleStatuses.length === 0

	window.addEventListener('scroll', this.scrollLoad)

	if (store.state.api.fetchers[this.timelineName]) { return false }

	timelineFetcher.fetchAndUpdate({
	store,
	credentials,
	timeline: this.timelineName,
	showImmediately,
	userId: this.userId,
	tag: this.tag
	})
	},
	mounted () {
	if (typeof document.hidden !== 'undefined') {
	document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
	this.unfocused = document.hidden
	}
	window.addEventListener('keydown', this.handleShortKey)
	},
	destroyed () {
	window.removeEventListener('scroll', this.scrollLoad)
	window.removeEventListener('keydown', this.handleShortKey)
	if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
	this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
	},
	methods: {
	handleShortKey (e) {
	// Ignore when input fields are focused
	if (['textarea', 'input'].includes(e.target.tagName.toLowerCase())) return
	if (e.key === '.') this.showNewStatuses()
	},
	showNewStatuses () {
	if (this.newStatusCount === 0) return

	if (this.timeline.flushMarker !== 0) {
	this.$store.commit('clearTimeline', { timeline: this.timelineName, excludeUserId: true })
	this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
	this.fetchOlderStatuses()
	} else {
	this.$store.commit('showNewStatuses', { timeline: this.timelineName })
	this.paused = false
	}
	},
	fetchOlderStatuses: throttle(function () {
	const store = this.$store
	const credentials = store.state.users.currentUser.credentials
	store.commit('setLoading', { timeline: this.timelineName, value: true })
	timelineFetcher.fetchAndUpdate({
	store,
	credentials,
	timeline: this.timelineName,
	older: true,
	showImmediately: true,
	userId: this.userId,
	tag: this.tag
	}).then(statuses => {
	store.commit('setLoading', { timeline: this.timelineName, value: false })
	if (statuses && statuses.length === 0) {
	this.bottomedOut = true
	}
	})
	}, 1000, this),
	scrollLoad (e) {
	const bodyBRect = document.body.getBoundingClientRect()
	const height = Math.max(bodyBRect.height, -(bodyBRect.y))
	if (this.timeline.loading === false &&
	- this.$store.state.config.autoLoad &&
	+ this.$store.getters.mergedConfig.autoLoad &&
	this.$el.offsetHeight > 0 &&
	(window.innerHeight + window.pageYOffset) >= (height - 750)) {
	this.fetchOlderStatuses()
	}
	},
	handleVisibilityChange () {
	this.unfocused = document.hidden
	}
	},
	watch: {
	newStatusCount (count) {
	- if (!this.$store.state.config.streaming) {
	+ if (!this.$store.getters.mergedConfig.streaming) {
	return
	}
	if (count > 0) {
	// only 'stream' them when you're scrolled to the top
	const doc = document.documentElement
	const top = (window.pageYOffset \|\| doc.scrollTop) - (doc.clientTop \|\| 0)
	if (top < 15 &&
	!this.paused &&
	- !(this.unfocused && this.$store.state.config.pauseOnUnfocused)
	+ !(this.unfocused && this.$store.getters.mergedConfig.pauseOnUnfocused)
	) {
	this.showNewStatuses()
	} else {
	this.paused = true
	}
	}
	}
	}
	}

	export default Timeline
	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	index 9c931c010a..cc8a1ed6e4 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,167 +1,148 @@
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import RemoteFollow from '../remote_follow/remote_follow.vue'
	import ProgressButton from '../progress_button/progress_button.vue'
	+import FollowButton from '../follow_button/follow_button.vue'
	import ModerationTools from '../moderation_tools/moderation_tools.vue'
	+import AccountActions from '../account_actions/account_actions.vue'
	import { hex2rgb } from '../../services/color_convert/color_convert.js'
	-import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	+import { mapGetters } from 'vuex'

	export default {
	- props: [ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar' ],
	+ props: [
	+ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar'
	+ ],
	data () {
	return {
	followRequestInProgress: false,
	- hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined'
	- ? this.$store.state.instance.hideUserStats
	- : this.$store.state.config.hideUserStats,
	betterShadow: this.$store.state.interface.browserSupport.cssFilter
	}
	},
	created () {
	this.$store.dispatch('fetchUserRelationship', this.user.id)
	},
	computed: {
	classes () {
	return [{
	'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
	'user-card-rounded': this.rounded === true, // set border-radius for all sides
	'user-card-bordered': this.bordered === true // set border for all sides
	}]
	},
	style () {
	- const color = this.$store.state.config.customTheme.colors
	- ? this.$store.state.config.customTheme.colors.bg // v2
	- : this.$store.state.config.colors.bg // v1
	+ const color = this.$store.getters.mergedConfig.customTheme.colors
	+ ? this.$store.getters.mergedConfig.customTheme.colors.bg // v2
	+ : this.$store.getters.mergedConfig.colors.bg // v1

	if (color) {
	const rgb = (typeof color === 'string') ? hex2rgb(color) : color
	const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`

	return {
	backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
	backgroundImage: [
	`linear-gradient(to bottom, ${tintColor}, ${tintColor})`,
	`url(${this.user.cover_photo})`
	].join(', ')
	}
	}
	},
	isOtherUser () {
	return this.user.id !== this.$store.state.users.currentUser.id
	},
	subscribeUrl () {
	// eslint-disable-next-line no-undef
	const serverUrl = new URL(this.user.statusnet_profile_url)
	return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
	},
	loggedIn () {
	return this.$store.state.users.currentUser
	},
	dailyAvg () {
	const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
	return Math.round(this.user.statuses_count / days)
	},
	userHighlightType: {
	get () {
	- const data = this.$store.state.config.highlight[this.user.screen_name]
	+ const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return (data && data.type) \|\| 'disabled'
	},
	set (type) {
	- const data = this.$store.state.config.highlight[this.user.screen_name]
	+ const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	if (type !== 'disabled') {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) \|\| '#FFFFFF', type })
	} else {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
	}
	- }
	+ },
	+ ...mapGetters(['mergedConfig'])
	},
	userHighlightColor: {
	get () {
	- const data = this.$store.state.config.highlight[this.user.screen_name]
	+ const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return data && data.color
	},
	set (color) {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
	}
	},
	visibleRole () {
	const rights = this.user.rights
	if (!rights) { return }
	const validRole = rights.admin \|\| rights.moderator
	const roleTitle = rights.admin ? 'admin' : 'moderator'
	return validRole && roleTitle
	- }
	+ },
	+ ...mapGetters(['mergedConfig'])
	},
	components: {
	UserAvatar,
	RemoteFollow,
	ModerationTools,
	- ProgressButton
	+ AccountActions,
	+ ProgressButton,
	+ FollowButton
	},
	methods: {
	- followUser () {
	- const store = this.$store
	- this.followRequestInProgress = true
	- requestFollow(this.user, store).then(() => {
	- this.followRequestInProgress = false
	- })
	- },
	- unfollowUser () {
	- const store = this.$store
	- this.followRequestInProgress = true
	- requestUnfollow(this.user, store).then(() => {
	- this.followRequestInProgress = false
	- store.commit('removeStatus', { timeline: 'friends', userId: this.user.id })
	- })
	- },
	- blockUser () {
	- this.$store.dispatch('blockUser', this.user.id)
	- },
	- unblockUser () {
	- this.$store.dispatch('unblockUser', this.user.id)
	- },
	muteUser () {
	this.$store.dispatch('muteUser', this.user.id)
	},
	unmuteUser () {
	this.$store.dispatch('unmuteUser', this.user.id)
	},
	subscribeUser () {
	return this.$store.dispatch('subscribeUser', this.user.id)
	},
	unsubscribeUser () {
	return this.$store.dispatch('unsubscribeUser', this.user.id)
	},
	setProfileView (v) {
	if (this.switcher) {
	const store = this.$store
	store.commit('setProfileView', { v })
	}
	},
	linkClicked ({ target }) {
	if (target.tagName === 'SPAN') {
	target = target.parentNode
	}
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	},
	userProfileLink (user) {
	- return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
	- },
	- reportUser () {
	- this.$store.dispatch('openUserReportingModal', this.user.id)
	+ return generateProfileLink(
	+ user.id, user.screen_name,
	+ this.$store.state.instance.restrictedNicknames
	+ )
	},
	zoomAvatar () {
	const attachment = {
	url: this.user.profile_image_url_original,
	mimetype: 'image'
	}
	this.$store.dispatch('setMedia', [attachment])
	this.$store.dispatch('setCurrent', attachment)
	- },
	- mentionUser () {
	- this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
	}
	}
	}
	diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
	index 5b6f66e7a7..6f3c958e74 100644
	--- a/src/components/user_card/user_card.vue
	+++ b/src/components/user_card/user_card.vue
	@@ -1,636 +1,568 @@
	<template>
	<div
	class="user-card"
	:class="classes"
	>
	<div
	:class="{ 'hide-bio': hideBio }"
	:style="style"
	class="background-image"
	/>
	<div class="panel-heading">
	<div class="user-info">
	<div class="container">
	<a
	v-if="allowZoomingAvatar"
	class="user-info-avatar-link"
	@click="zoomAvatar"
	>
	<UserAvatar
	:better-shadow="betterShadow"
	:user="user"
	/>
	<div class="user-info-avatar-link-overlay">
	<i class="button-icon icon-zoom-in" />
	</div>
	</a>
	<router-link
	v-else
	:to="userProfileLink(user)"
	>
	<UserAvatar
	:better-shadow="betterShadow"
	:user="user"
	/>
	</router-link>
	<div class="user-summary">
	<div class="top-line">
	<!-- eslint-disable vue/no-v-html -->
	<div
	v-if="user.name_html"
	:title="user.name"
	class="user-name"
	v-html="user.name_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<div
	v-else
	:title="user.name"
	class="user-name"
	>
	{{ user.name }}
	</div>
	<router-link
	v-if="!isOtherUser"
	:to="{ name: 'user-settings' }"
	>
	<i
	class="button-icon icon-wrench usersettings"
	:title="$t('tool_tip.user_settings')"
	/>
	</router-link>
	<a
	v-if="isOtherUser && !user.is_local"
	:href="user.statusnet_profile_url"
	target="_blank"
	>
	<i class="icon-link-ext usersettings" />
	</a>
	+ <AccountActions
	+ v-if="isOtherUser && loggedIn"
	+ :user="user"
	+ />
	</div>
	-
	<div class="bottom-line">
	<router-link
	class="user-screen-name"
	:to="userProfileLink(user)"
	>
	@{{ user.screen_name }}
	</router-link>
	<span
	v-if="!hideBio && !!visibleRole"
	class="alert staff"
	>{{ visibleRole }}</span>
	<span v-if="user.locked"><i class="icon icon-lock" /></span>
	<span
	- v-if="!hideUserStatsLocal && !hideBio"
	+ v-if="!mergedConfig.hideUserStats && !hideBio"
	class="dailyAvg"
	>{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
	</div>
	</div>
	</div>
	<div class="user-meta">
	<div
	v-if="user.follows_you && loggedIn && isOtherUser"
	class="following"
	>
	{{ $t('user_card.follows_you') }}
	</div>
	<div
	v-if="isOtherUser && (loggedIn \|\| !switcher)"
	class="highlighter"
	>
	<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
	<input
	v-if="userHighlightType !== 'disabled'"
	:id="'userHighlightColorTx'+user.id"
	v-model="userHighlightColor"
	class="userHighlightText"
	type="text"
	>
	<input
	v-if="userHighlightType !== 'disabled'"
	:id="'userHighlightColor'+user.id"
	v-model="userHighlightColor"
	class="userHighlightCl"
	type="color"
	>
	<label
	for="style-switcher"
	class="userHighlightSel select"
	>
	<select
	:id="'userHighlightSel'+user.id"
	v-model="userHighlightType"
	class="userHighlightSel"
	>
	<option value="disabled">No highlight</option>
	<option value="solid">Solid bg</option>
	<option value="striped">Striped bg</option>
	<option value="side">Side stripe</option>
	</select>
	<i class="icon-down-open" />
	</label>
	</div>
	</div>
	<div
	v-if="loggedIn && isOtherUser"
	class="user-interactions"
	>
	- <div v-if="!user.following">
	- <button
	- class="btn btn-default btn-block"
	- :disabled="followRequestInProgress"
	- :title="user.requested ? $t('user_card.follow_again') : ''"
	- @click="followUser"
	- >
	- <template v-if="followRequestInProgress">
	- {{ $t('user_card.follow_progress') }}
	- </template>
	- <template v-else-if="user.requested">
	- {{ $t('user_card.follow_sent') }}
	- </template>
	- <template v-else>
	- {{ $t('user_card.follow') }}
	- </template>
	- </button>
	- </div>
	- <div v-else-if="followRequestInProgress">
	- <button
	- class="btn btn-default btn-block pressed"
	- disabled
	- :title="$t('user_card.follow_unfollow')"
	- @click="unfollowUser"
	- >
	- {{ $t('user_card.follow_progress') }}
	- </button>
	- </div>
	- <div
	- v-else
	- class="btn-group"
	- >
	- <button
	- class="btn btn-default pressed"
	- :title="$t('user_card.follow_unfollow')"
	- @click="unfollowUser"
	- >
	- {{ $t('user_card.following') }}
	- </button>
	- <ProgressButton
	- v-if="!user.subscribed"
	- class="btn btn-default"
	- :click="subscribeUser"
	- :title="$t('user_card.subscribe')"
	- >
	- <i class="icon-bell-alt" />
	- </ProgressButton>
	- <ProgressButton
	- v-else
	- class="btn btn-default pressed"
	- :click="unsubscribeUser"
	- :title="$t('user_card.unsubscribe')"
	- >
	- <i class="icon-bell-ringing-o" />
	- </ProgressButton>
	- </div>
	-
	- <div>
	- <button
	- class="btn btn-default btn-block"
	- @click="mentionUser"
	- >
	- {{ $t('user_card.mention') }}
	- </button>
	+ <div class="btn-group">
	+ <FollowButton :user="user" />
	+ <template v-if="user.following">
	+ <ProgressButton
	+ v-if="!user.subscribed"
	+ class="btn btn-default"
	+ :click="subscribeUser"
	+ :title="$t('user_card.subscribe')"
	+ >
	+ <i class="icon-bell-alt" />
	+ </ProgressButton>
	+ <ProgressButton
	+ v-else
	+ class="btn btn-default pressed"
	+ :click="unsubscribeUser"
	+ :title="$t('user_card.unsubscribe')"
	+ >
	+ <i class="icon-bell-ringing-o" />
	+ </ProgressButton>
	+ </template>
	</div>
	-
	<div>
	<button
	v-if="user.muted"
	class="btn btn-default btn-block pressed"
	@click="unmuteUser"
	>
	{{ $t('user_card.muted') }}
	</button>
	<button
	v-else
	class="btn btn-default btn-block"
	@click="muteUser"
	>
	{{ $t('user_card.mute') }}
	</button>
	</div>
	-
	- <div>
	- <button
	- v-if="user.statusnet_blocking"
	- class="btn btn-default btn-block pressed"
	- @click="unblockUser"
	- >
	- {{ $t('user_card.blocked') }}
	- </button>
	- <button
	- v-else
	- class="btn btn-default btn-block"
	- @click="blockUser"
	- >
	- {{ $t('user_card.block') }}
	- </button>
	- </div>
	-
	- <div>
	- <button
	- class="btn btn-default btn-block"
	- @click="reportUser"
	- >
	- {{ $t('user_card.report') }}
	- </button>
	- </div>
	-
	<ModerationTools
	v-if="loggedIn.role === "admin""
	:user="user"
	/>
	</div>
	<div
	v-if="!loggedIn && user.is_local"
	class="user-interactions"
	>
	<RemoteFollow :user="user" />
	</div>
	</div>
	</div>
	<div
	v-if="!hideBio"
	class="panel-body"
	>
	<div
	- v-if="!hideUserStatsLocal && switcher"
	+ v-if="!mergedConfig.hideUserStats && switcher"
	class="user-counts"
	>
	<div
	class="user-count"
	@click.prevent="setProfileView('statuses')"
	>
	<h5>{{ $t('user_card.statuses') }}</h5>
	<span>{{ user.statuses_count }} <br></span>
	</div>
	<div
	class="user-count"
	@click.prevent="setProfileView('friends')"
	>
	<h5>{{ $t('user_card.followees') }}</h5>
	<span>{{ user.friends_count }}</span>
	</div>
	<div
	class="user-count"
	@click.prevent="setProfileView('followers')"
	>
	<h5>{{ $t('user_card.followers') }}</h5>
	<span>{{ user.followers_count }}</span>
	</div>
	</div>
	<!-- eslint-disable vue/no-v-html -->
	<p
	v-if="!hideBio && user.description_html"
	class="user-card-bio"
	@click.prevent="linkClicked"
	v-html="user.description_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<p
	v-else-if="!hideBio"
	class="user-card-bio"
	>
	{{ user.description }}
	</p>
	</div>
	</div>
	</template>

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

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

	.user-card {
	position: relative;

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

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

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

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

	p {
	margin-bottom: 0;
	}

	&-bio {
	text-align: center;

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

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

	// Modifiers

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

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

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

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

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

	.avatar {
	flex: 1 0 100%;
	width: 56px;
	height: 56px;
	box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
	box-shadow: var(--avatarShadow);
	object-fit: cover;
	}
	}

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

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

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

	i {
	color: #FFF;
	}
	}

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

	.usersettings {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	opacity: .8;
	}

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

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

	.top-line {
	display: flex;
	}
	}

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

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

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

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

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

	// TODO use proper colors
	.staff {
	flex: none;
	text-transform: capitalize;
	color: $fallback--text;
	color: var(--btnText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btn, $fallback--fg);
	}
	}

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

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

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

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

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

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

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

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

	button {
	margin: 0;

	&.pressed {
	// TODO: This should be themed.
	border-bottom-color: rgba(255, 255, 255, 0.2);
	border-top-color: rgba(0, 0, 0, 0.2);
	}
	}
	}
	}

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

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

	h5 {
	font-size:1em;
	font-weight: bolder;
	margin: 0 0 0.25em;
	}
	a {
	text-decoration: none;
	}
	}
	</style>
	diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js
	index 7c6ea40964..833fa98a28 100644
	--- a/src/components/user_reporting_modal/user_reporting_modal.js
	+++ b/src/components/user_reporting_modal/user_reporting_modal.js
	@@ -1,106 +1,108 @@

	import Status from '../status/status.vue'
	import List from '../list/list.vue'
	import Checkbox from '../checkbox/checkbox.vue'
	+import Modal from '../modal/modal.vue'

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

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

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

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

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

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

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

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

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

	> div {
	margin-bottom: 1em;

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

	p {
	margin-top: 0;
	}

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

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

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

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

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

	> .status-el {
	flex: 1;
	}

	> .checkbox {
	margin: 0.75em;
	}
	}

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

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

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

	&-right {
	width: 50%;
	flex: 1 1 auto;
	margin-bottom: 12px;
	}
	}
	}
	</style>
	diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
	index f12cccaead..32eb802e61 100644
	--- a/src/components/user_settings/user_settings.js
	+++ b/src/components/user_settings/user_settings.js
	@@ -1,352 +1,354 @@
	import unescape from 'lodash/unescape'
	import get from 'lodash/get'
	import map from 'lodash/map'
	import reject from 'lodash/reject'
	import TabSwitcher from '../tab_switcher/tab_switcher.js'
	import ImageCropper from '../image_cropper/image_cropper.vue'
	import StyleSwitcher from '../style_switcher/style_switcher.vue'
	import ScopeSelector from '../scope_selector/scope_selector.vue'
	import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
	import BlockCard from '../block_card/block_card.vue'
	import MuteCard from '../mute_card/mute_card.vue'
	import SelectableList from '../selectable_list/selectable_list.vue'
	import ProgressButton from '../progress_button/progress_button.vue'
	import EmojiInput from '../emoji_input/emoji_input.vue'
	import suggestor from '../emoji_input/suggestor.js'
	import Autosuggest from '../autosuggest/autosuggest.vue'
	import Importer from '../importer/importer.vue'
	import Exporter from '../exporter/exporter.vue'
	import withSubscription from '../../hocs/with_subscription/with_subscription'
	+import Checkbox from '../checkbox/checkbox.vue'
	import Mfa from './mfa.vue'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	.banner {
	max-width: 100%;
	}

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

	.name-changer {
	width: 100%;
	}

	.bg {
	max-width: 100%;
	}

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

	.oauth-tokens {
	width: 100%;

	th {
	text-align: left;
	}

	.actions {
	text-align: right;
	}
	}

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

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

	button {
	width: 10em;
	}
	}

	.setting-subitem {
	margin-left: 1.75em;
	}
	}
	</style>
	diff --git a/src/components/video_attachment/video_attachment.js b/src/components/video_attachment/video_attachment.js
	index 76b19a0204..f0ca7e8992 100644
	--- a/src/components/video_attachment/video_attachment.js
	+++ b/src/components/video_attachment/video_attachment.js
	@@ -1,31 +1,31 @@

	const VideoAttachment = {
	props: ['attachment', 'controls'],
	data () {
	return {
	- loopVideo: this.$store.state.config.loopVideo
	+ loopVideo: this.$store.getters.mergedConfig.loopVideo
	}
	},
	methods: {
	onVideoDataLoad (e) {
	const target = e.srcElement \|\| e.target
	if (typeof target.webkitAudioDecodedByteCount !== 'undefined') {
	// non-zero if video has audio track
	if (target.webkitAudioDecodedByteCount > 0) {
	- this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
	+ this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
	}
	} else if (typeof target.mozHasAudio !== 'undefined') {
	// true if video has audio track
	if (target.mozHasAudio) {
	- this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
	+ this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
	}
	} else if (typeof target.audioTracks !== 'undefined') {
	if (target.audioTracks.length > 0) {
	- this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
	+ this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
	}
	}
	}
	}
	}

	export default VideoAttachment
	diff --git a/src/directives/body_scroll_lock.js b/src/directives/body_scroll_lock.js
	index 6ab20c3f18..13a6de1c77 100644
	--- a/src/directives/body_scroll_lock.js
	+++ b/src/directives/body_scroll_lock.js
	@@ -1,69 +1,76 @@
	import * as bodyScrollLock from 'body-scroll-lock'

	let previousNavPaddingRight
	let previousAppBgWrapperRight
	+const lockerEls = new Set([])

	const disableBodyScroll = (el) => {
	const scrollBarGap = window.innerWidth - document.documentElement.clientWidth
	bodyScrollLock.disableBodyScroll(el, {
	reserveScrollBarGap: true
	})
	+ lockerEls.add(el)
	setTimeout(() => {
	- // If previousNavPaddingRight is already set, don't set it again.
	- if (previousNavPaddingRight === undefined) {
	- const navEl = document.getElementById('nav')
	- previousNavPaddingRight = window.getComputedStyle(navEl).getPropertyValue('padding-right')
	- navEl.style.paddingRight = previousNavPaddingRight ? `calc(${previousNavPaddingRight} + ${scrollBarGap}px)` : `${scrollBarGap}px`
	+ if (lockerEls.size <= 1) {
	+ // If previousNavPaddingRight is already set, don't set it again.
	+ if (previousNavPaddingRight === undefined) {
	+ const navEl = document.getElementById('nav')
	+ previousNavPaddingRight = window.getComputedStyle(navEl).getPropertyValue('padding-right')
	+ navEl.style.paddingRight = previousNavPaddingRight ? `calc(${previousNavPaddingRight} + ${scrollBarGap}px)` : `${scrollBarGap}px`
	+ }
	+ // If previousAppBgWrapeprRight is already set, don't set it again.
	+ if (previousAppBgWrapperRight === undefined) {
	+ const appBgWrapperEl = document.getElementById('app_bg_wrapper')
	+ previousAppBgWrapperRight = window.getComputedStyle(appBgWrapperEl).getPropertyValue('right')
	+ appBgWrapperEl.style.right = previousAppBgWrapperRight ? `calc(${previousAppBgWrapperRight} + ${scrollBarGap}px)` : `${scrollBarGap}px`
	+ }
	+ document.body.classList.add('scroll-locked')
	}
	- // If previousAppBgWrapeprRight is already set, don't set it again.
	- if (previousAppBgWrapperRight === undefined) {
	- const appBgWrapperEl = document.getElementById('app_bg_wrapper')
	- previousAppBgWrapperRight = window.getComputedStyle(appBgWrapperEl).getPropertyValue('right')
	- appBgWrapperEl.style.right = previousAppBgWrapperRight ? `calc(${previousAppBgWrapperRight} + ${scrollBarGap}px)` : `${scrollBarGap}px`
	- }
	- document.body.classList.add('scroll-locked')
	})
	}

	const enableBodyScroll = (el) => {
	+ lockerEls.delete(el)
	setTimeout(() => {
	- if (previousNavPaddingRight !== undefined) {
	- document.getElementById('nav').style.paddingRight = previousNavPaddingRight
	- // Restore previousNavPaddingRight to undefined so disableBodyScroll knows it can be set again.
	- previousNavPaddingRight = undefined
	- }
	- if (previousAppBgWrapperRight !== undefined) {
	- document.getElementById('app_bg_wrapper').style.right = previousAppBgWrapperRight
	- // Restore previousAppBgWrapperRight to undefined so disableBodyScroll knows it can be set again.
	- previousAppBgWrapperRight = undefined
	+ if (lockerEls.size === 0) {
	+ if (previousNavPaddingRight !== undefined) {
	+ document.getElementById('nav').style.paddingRight = previousNavPaddingRight
	+ // Restore previousNavPaddingRight to undefined so disableBodyScroll knows it can be set again.
	+ previousNavPaddingRight = undefined
	+ }
	+ if (previousAppBgWrapperRight !== undefined) {
	+ document.getElementById('app_bg_wrapper').style.right = previousAppBgWrapperRight
	+ // Restore previousAppBgWrapperRight to undefined so disableBodyScroll knows it can be set again.
	+ previousAppBgWrapperRight = undefined
	+ }
	+ document.body.classList.remove('scroll-locked')
	}
	- document.body.classList.remove('scroll-locked')
	})
	bodyScrollLock.enableBodyScroll(el)
	}

	const directive = {
	inserted: (el, binding) => {
	if (binding.value) {
	disableBodyScroll(el)
	}
	},
	componentUpdated: (el, binding) => {
	if (binding.oldValue === binding.value) {
	return
	}

	if (binding.value) {
	disableBodyScroll(el)
	} else {
	enableBodyScroll(el)
	}
	},
	unbind: (el) => {
	enableBodyScroll(el)
	}
	}

	export default (Vue) => {
	Vue.directive('body-scroll-lock', directive)
	}
	diff --git a/src/i18n/en.json b/src/i18n/en.json
	index 32c25e3ec5..d11b2d14e9 100644
	--- a/src/i18n/en.json
	+++ b/src/i18n/en.json
	@@ -1,635 +1,639 @@
	{
	"chat": {
	"title": "Chat"
	},
	"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"
	},
	"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"
	},
	"interactions": {
	"favs_repeats": "Repeats and Favorites",
	"follows": "New follows",
	"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"
	}
	},
	"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:"
	}
	},
	"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_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",
	"avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
	"pad_emoji": "Pad emoji with spaces when adding from picker",
	"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_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",
	"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",
	"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",
	"upload_a_photo": "Upload a photo",
	"user_settings": "User Settings",
	"values": {
	"false": "no",
	"true": "yes"
	},
	"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",
	"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!",
	"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",
	"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_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/es.json b/src/i18n/es.json
	index 53a3b9ddf8..163eb7076e 100644
	--- a/src/i18n/es.json
	+++ b/src/i18n/es.json
	@@ -1,638 +1,638 @@
	{
	"chat": {
	"title": "Chat"
	},
	"exporter": {
	"export": "Exportar",
	"processing": "Procesando. Pronto se te pedirá que descargues tu archivo"
	},
	"features_panel": {
	"chat": "Chat",
	"gopher": "Gopher",
	"media_proxy": "Proxy de medios",
	"scope_options": "Opciones del alcance de la visibilidad",
	"text_limit": "Límite de caracteres",
	"title": "Características",
	"who_to_follow": "A quién seguir"
	},
	"finder": {
	"error_fetching_user": "Error al buscar usuario",
	"find_user": "Encontrar usuario"
	},
	"general": {
	"apply": "Aplicar",
	"submit": "Enviar",
	"more": "Más",
	"generic_error": "Ha ocurrido un error",
	"optional": "opcional",
	"show_more": "Mostrar más",
	"show_less": "Mostrar menos",
	"cancel": "Cancelar",
	"disable": "Inhabilitar",
	"enable": "Habilitar",
	"confirm": "Confirmar",
	"verify": "Verificar"
	},
	"image_cropper": {
	"crop_picture": "Recortar la foto",
	"save": "Guardar",
	"save_without_cropping": "Guardar sin recortar",
	"cancel": "Cancelar"
	},
	"importer": {
	"submit": "Enviar",
	"success": "Importado con éxito",
	"error": "Se ha producido un error al importar el archivo."
	},
	"login": {
	- "login": "Identificación",
	- "description": "Identificación con OAuth",
	+ "login": "Identificarse",
	+ "description": "Identificarse con OAuth",
	"logout": "Cerrar sesión",
	"password": "Contraseña",
	"placeholder": "p.ej. lain",
	"register": "Registrarse",
	"username": "Usuario",
	"hint": "Inicia sesión para unirte a la discusión",
	"authentication_code": "Código de autenticación",
	"enter_recovery_code": "Inserta el código de recuperación",
	"enter_two_factor_code": "Inserta el código de dos factores",
	"recovery_code": "Código de recuperación",
	"heading" : {
	"totp" : "Autenticación de dos factores",
	"recovery" : "Recuperación de dos factores"
	}
	},
	"media_modal": {
	"previous": "Anterior",
	"next": "Siguiente"
	},
	"nav": {
	"about": "Acerca de",
	"administration": "Administración",
	"back": "Volver",
	"chat": "Chat Local",
	"friend_requests": "Solicitudes de seguimiento",
	"mentions": "Menciones",
	"interactions": "Interacciones",
	"dms": "Mensajes Directos",
	"public_tl": "Línea Temporal Pública",
	"timeline": "Línea Temporal",
	"twkn": "Toda La Red Conocida",
	"user_search": "Búsqueda de Usuarios",
	"search": "Buscar",
	"who_to_follow": "A quién seguir",
	"preferences": "Preferencias"
	},
	"notifications": {
	"broken_favorite": "Estado desconocido, buscándolo...",
	"favorited_you": "le gusta tu estado",
	"followed_you": "empezó a seguirte",
	"load_older": "Cargar notificaciones antiguas",
	"notifications": "Notificaciones",
	"read": "¡Leído!",
	"repeated_you": "repitió tu estado",
	"no_more_notifications": "No hay más notificaciones"
	},
	"polls": {
	"add_poll": "Añadir encuesta",
	"add_option": "Añadir opción",
	"option": "Opción",
	"votes": "votos",
	"vote": "Votar",
	"type": "Tipo de encuesta",
	"single_choice": "Elección única",
	"multiple_choices": "Elección múltiple",
	"expiry": "Tiempo de vida de la encuesta",
	"expires_in": "La encuensta termina en {0}",
	"expired": "La encuesta terminó hace {0}",
	"not_enough_options": "Muy pocas opciones únicas en la encuesta"
	},
	"emoji": {
	"stickers": "Pegatinas",
	"emoji": "Emoji",
	"keep_open": "Mantener el selector abierto",
	"search_emoji": "Buscar un emoji",
	"add_emoji": "Insertar un emoji",
	"custom": "Emojis personalizados",
	"unicode": "Emojis unicode"
	},
	"stickers": {
	"add_sticker": "Añadir Pegatina"
	},
	"interactions": {
	"favs_repeats": "Favoritos y Repetidos",
	"follows": "Nuevos seguidores",
	"load_older": "Cargar interacciones más antiguas"
	},
	"post_status": {
	"new_status": "Publicar un nuevo estado",
	"account_not_locked_warning": "Tu cuenta no está {0}. Cualquiera puede seguirte y leer las entradas para Solo-Seguidores.",
	"account_not_locked_warning_link": "bloqueada",
	"attachments_sensitive": "Contenido sensible",
	"content_type": {
	"text/plain": "Texto Plano",
	"text/html": "HTML",
	"text/markdown": "Markdown",
	"text/bbcode": "BBCode"
	},
	"content_warning": "Tema (opcional)",
	"default": "Acabo de aterrizar en L.A.",
	"direct_warning_to_all": "Esta publicación será visible para todos los usarios mencionados.",
	"direct_warning_to_first_only": "Esta publicación solo será visible para los usuarios mencionados al comienzo del mensaje.",
	"posting": "Publicando",
	"scope_notice": {
	"public": "Esta publicación será visible para todo el mundo",
	"private": "Esta publicación solo será visible para tus seguidores.",
	"unlisted": "Esta publicación no será visible en la Línea Temporal Pública ni en Toda La Red Conocida"
	},
	"scope": {
	"direct": "Directo - Solo para los usuarios mencionados.",
	"private": "Solo-seguidores - Solo tus seguidores leerán la publicación",
	"public": "Público - Entradas visibles en las Líneas Temporales Públicas",
	"unlisted": "Sin listar - Entradas no visibles en las Líneas Temporales Públicas"
	}
	},
	"registration": {
	"bio": "Biografía",
	"email": "Correo electrónico",
	"fullname": "Nombre a mostrar",
	"password_confirm": "Confirmar contraseña",
	"registration": "Registro",
	"token": "Token de invitación",
	"captcha": "CAPTCHA",
	"new_captcha": "Haz click en la imagen para obtener un nuevo captcha",
	"username_placeholder": "p.ej. lain",
	"fullname_placeholder": "p.ej. Lain Iwakura",
	"bio_placeholder": "e.g.\nHola, soy un ejemplo.\nAquí puedes poner algo representativo tuyo... o no.",
	"validations": {
	"username_required": "no puede estar vacío",
	"fullname_required": "no puede estar vacío",
	"email_required": "no puede estar vacío",
	"password_required": "no puede estar vacío",
	"password_confirmation_required": "no puede estar vacío",
	"password_confirmation_match": "la contraseña no coincide"
	}
	},
	"selectable_list": {
	"select_all": "Seleccionar todo"
	},
	"settings": {
	"app_name": "Nombre de la aplicación",
	"security": "Seguridad",
	"enter_current_password_to_confirm": "Introduce la contraseña actual para confirmar tu identidad",
	"mfa": {
	"otp" : "OTP",
	"setup_otp" : "Configurar OTP",
	"wait_pre_setup_otp" : "preconfiguración OTP",
	"confirm_and_enable" : "Confirmar y habilitar OTP",
	"title": "Autentificación de dos factores",
	"generate_new_recovery_codes" : "Generar códigos de recuperación nuevos",
	"warning_of_generate_new_codes" : "Cuando generas nuevos códigos de recuperación, los antiguos dejarán de funcionar.",
	"recovery_codes" : "Códigos de recuperación.",
	"waiting_a_recovery_codes": "Recibiendo códigos de respaldo",
	"recovery_codes_warning" : "Anote los códigos o guárdelos en un lugar seguro, de lo contrario no los volverá a ver. Si pierde el acceso a su aplicación 2FA y los códigos de recuperación, su cuenta quedará bloqueada.",
	"authentication_methods" : "Métodos de autentificación",
	"scan": {
	"title": "Escanear",
	"desc": "Usando su aplicación de dos factores, escanee este código QR o ingrese la clave de texto:",
	"secret_code": "Clave"
	},
	"verify": {
	"desc": "Para habilitar la autenticación de dos factores, ingrese el código de su aplicación 2FA:"
	}
	},
	"attachmentRadius": "Adjuntos",
	"attachments": "Adjuntos",
	"autoload": "Habilitar carga automática al llegar al final de la página",
	"avatar": "Avatar",
	"avatarAltRadius": "Avatares (Notificaciones)",
	"avatarRadius": "Avatares",
	"background": "Fondo",
	"bio": "Biografía",
	"block_export": "Exportar usuarios bloqueados",
	"block_export_button": "Exporta la lista de tus usarios bloqueados a un archivo csv",
	"block_import": "Importar usuarios bloqueados",
	"block_import_error": "Error importando la lista de usuarios bloqueados",
	"blocks_imported": "¡Lista de usuarios bloqueados importada! El procesado puede tardar un poco.",
	"blocks_tab": "Bloqueados",
	"btnRadius": "Botones",
	"cBlue": "Azul (Responder, seguir)",
	"cGreen": "Verde (Retweet)",
	"cOrange": "Naranja (Favorito)",
	"cRed": "Rojo (Cancelar)",
	"change_password": "Cambiar contraseña",
	"change_password_error": "Hubo un problema cambiando la contraseña.",
	"changed_password": "Contraseña cambiada correctamente!",
	"collapse_subject": "Colapsar entradas con tema",
	"composing": "Redactando",
	"confirm_new_password": "Confirmar la nueva contraseña",
	"current_avatar": "Tu avatar actual",
	"current_password": "Contraseña actual",
	"current_profile_banner": "Tu cabecera actual",
	"data_import_export_tab": "Importar / Exportar Datos",
	"default_vis": "Alcance de visibilidad por defecto",
	"delete_account": "Eliminar la cuenta",
	"discoverable": "Permitir la aparición de esta cuenta en los resultados de búsqueda y otros servicios",
	"delete_account_description": "Eliminar para siempre la cuenta y todos los mensajes.",
	"pad_emoji": "Rellenar con espacios al agregar emojis desde el selector",
	"delete_account_error": "Hubo un error al eliminar tu cuenta. Si el fallo persiste, ponte en contacto con el administrador de tu instancia.",
	"delete_account_instructions": "Escribe tu contraseña para confirmar la eliminación de tu cuenta.",
	"avatar_size_instruction": "El tamaño mínimo recomendado para el avatar es de 150X150 píxeles.",
	"export_theme": "Exportar tema",
	"filtering": "Filtrado",
	"filtering_explanation": "Todos los estados que contengan estas palabras serán silenciados, una por línea",
	"follow_export": "Exportar personas que tú sigues",
	"follow_export_button": "Exporta tus seguidores a un fichero csv",
	"follow_import": "Importar personas que tú sigues",
	"follow_import_error": "Error al importar el fichero",
	"follows_imported": "¡Importado! Procesarlos llevará tiempo.",
	"foreground": "Primer plano",
	"general": "General",
	"hide_attachments_in_convo": "Ocultar adjuntos en las conversaciones",
	"hide_attachments_in_tl": "Ocultar adjuntos en la línea temporal",
	"hide_muted_posts": "Ocultar las publicaciones de los usuarios silenciados",
	"max_thumbnails": "Cantidad máxima de miniaturas por publicación",
	"hide_isp": "Ocultar el panel específico de la instancia",
	"preload_images": "Precargar las imágenes",
	"use_one_click_nsfw": "Abrir los adjuntos NSFW con un solo click.",
	"hide_post_stats": "Ocultar las estadísticas de las entradas (p.ej. el número de favoritos)",
	"hide_user_stats": "Ocultar las estadísticas del usuario (p.ej. el número de seguidores)",
	"hide_filtered_statuses": "Ocultar estados filtrados",
	"import_blocks_from_a_csv_file": "Importar lista de usuarios bloqueados dese un archivo csv",
	"import_followers_from_a_csv_file": "Importar personas que tú sigues a partir de un archivo csv",
	"import_theme": "Importar tema",
	"inputRadius": "Campos de entrada",
	"checkboxRadius": "Casillas de verificación",
	"instance_default": "(por defecto: {value})",
	"instance_default_simple": "(por defecto)",
	"interface": "Interfaz",
	"interfaceLanguage": "Idioma",
	"invalid_theme_imported": "El archivo importado no es un tema válido de Pleroma. No se han realizado cambios.",
	"limited_availability": "No disponible en tu navegador",
	"links": "Enlaces",
	"lock_account_description": "Restringir el acceso a tu cuenta solo a seguidores admitidos",
	"loop_video": "Vídeos en bucle",
	"loop_video_silent_only": "Bucle solo en vídeos sin sonido (p.ej. \"gifs\" de Mastodon)",
	"mutes_tab": "Silenciados",
	"play_videos_in_modal": "Reproducir los vídeos en un marco emergente",
	"use_contain_fit": "No recortar los adjuntos en miniaturas",
	"name": "Nombre",
	"name_bio": "Nombre y Biografía",
	"new_password": "Nueva contraseña",
	"notification_visibility": "Tipos de notificaciones a mostrar",
	"notification_visibility_follows": "Nuevos seguidores",
	"notification_visibility_likes": "Me gustan (Likes)",
	"notification_visibility_mentions": "Menciones",
	"notification_visibility_repeats": "Repeticiones (Repeats)",
	"no_rich_text_description": "Eliminar el formato de texto enriquecido de todas las entradas",
	"no_blocks": "No hay usuarios bloqueados",
	"no_mutes": "No hay usuarios sinlenciados",
	"hide_follows_description": "No mostrar a quién sigo",
	"hide_followers_description": "No mostrar quién me sigue",
	"hide_follows_count_description": "No mostrar el número de cuentas que sigo",
	"hide_followers_count_description": "No mostrar el número de cuentas que me siguen",
	"show_admin_badge": "Mostrar la insignia de Administrador en mi perfil",
	"show_moderator_badge": "Mostrar la insignia de Moderador en mi perfil",
	"nsfw_clickthrough": "Activar el clic para ocultar los adjuntos NSFW",
	"oauth_tokens": "Tokens de OAuth",
	"token": "Token",
	"refresh_token": "Actualizar el token",
	"valid_until": "Válido hasta",
	"revoke_token": "Revocar",
	"panelRadius": "Paneles",
	"pause_on_unfocused": "Parar la transmisión cuando no estés en foco.",
	"presets": "Por defecto",
	"profile_background": "Fondo del Perfil",
	"profile_banner": "Cabecera del Perfil",
	"profile_tab": "Perfil",
	"radii_help": "Estable el redondeo de las esquinas de la interfaz (en píxeles)",
	"replies_in_timeline": "Réplicas en la línea temporal",
	"reply_link_preview": "Activar la previsualización del enlace de responder al pasar el ratón por encima",
	"reply_visibility_all": "Mostrar todas las réplicas",
	"reply_visibility_following": "Solo mostrar réplicas para mí o usuarios a los que sigo",
	"reply_visibility_self": "Solo mostrar réplicas para mí",
	"autohide_floating_post_button": "Ocultar automáticamente el botón 'Nueva Publicación' (para móviles)",
	"saving_err": "Error al guardar los ajustes",
	"saving_ok": "Ajustes guardados",
	"search_user_to_block": "Buscar usuarios a bloquear",
	"search_user_to_mute": "Buscar usuarios a silenciar",
	"security_tab": "Seguridad",
	"scope_copy": "Copiar la visibilidad de la publicación cuando contestamos (En los mensajes directos (MDs) siempre se copia)",
	"minimal_scopes_mode": "Minimizar las opciones de publicación",
	"set_new_avatar": "Cambiar avatar",
	"set_new_profile_background": "Cambiar el fondo del perfil",
	"set_new_profile_banner": "Cambiar la cabecera del perfil",
	"settings": "Ajustes",
	"subject_input_always_show": "Mostrar siempre el campo del tema",
	"subject_line_behavior": "Copiar el tema en las respuestas",
	"subject_line_email": "Como email: \"re: tema\"",
	"subject_line_mastodon": "Como mastodon: copiar como es",
	"subject_line_noop": "No copiar",
	"post_status_content_type": "Formato de publicación",
	"stop_gifs": "Iniciar GIFs al pasar el ratón",
	"streaming": "Habilitar la transmisión automática de nuevas publicaciones cuando se desplaza hacia la parte superior",
	"text": "Texto",
	"theme": "Tema",
	"theme_help": "Use códigos de color hexadecimales (#rrggbb) para personalizar su tema de colores.",
	"theme_help_v2_1": "También puede invalidar los colores y la opacidad de ciertos componentes si activa la casilla de verificación. Use el botón \"Borrar todo\" para deshacer los cambios.",
	"theme_help_v2_2": "Los iconos debajo de algunas entradas son indicadores de contraste de fondo/texto, desplace el ratón por encima para obtener información más detallada. Tenga en cuenta que cuando se utilizan indicadores de contraste de transparencia se muestra el peor caso posible.",
	"tooltipRadius": "Información/alertas",
	"upload_a_photo": "Subir una foto",
	"user_settings": "Ajustes del Usuario",
	"values": {
	"false": "no",
	"true": "sí"
	},
	"notifications": "Notificaciones",
	"notification_setting": "Recibir notificaciones de:",
	"notification_setting_follows": "Usuarios que sigues",
	"notification_setting_non_follows": "Usuarios que no sigues",
	"notification_setting_followers": "Usuarios que te siguen",
	"notification_setting_non_followers": "Usuarios que no te siguen",
	"notification_mutes": "Para dejar de recibir notificaciones de un usuario específico, siléncialo.",
	"notification_blocks": "El bloqueo de un usuario detiene todas las notificaciones y también las cancela.",
	"enable_web_push_notifications": "Habilitar las notificiaciones en el navegador",
	"style": {
	"switcher": {
	"keep_color": "Mantener colores",
	"keep_shadows": "Mantener sombras",
	"keep_opacity": "Mantener opacidad",
	"keep_roundness": "Mantener redondeces",
	"keep_fonts": "Mantener fuentes",
	"save_load_hint": "Las opciones \"Mantener\" conservan las opciones configuradas actualmente al seleccionar o cargar temas, también almacena dichas opciones al exportar un tema. Cuando se desactiven todas las casillas de verificación, el tema de exportación lo guardará todo.",
	"reset": "Reiniciar",
	"clear_all": "Limpiar todo",
	"clear_opacity": "Limpiar opacidad"
	},
	"common": {
	"color": "Color",
	"opacity": "Opacidad",
	"contrast": {
	"hint": "El ratio de contraste es {ratio}. {level} {context}",
	"level": {
	"aa": "Cumple con la pauta de nivel AA (mínimo)",
	"aaa": "Cumple con la pauta de nivel AAA (recomendado)",
	"bad": "No cumple con las pautas de accesibilidad"
	},
	"context": {
	"18pt": "para textos grandes (+18pt)",
	"text": "para textos"
	}
	}
	},
	"common_colors": {
	"_tab_label": "Común",
	"main": "Colores comunes",
	"foreground_hint": "Vea la pestaña \"Avanzado\" para un control más detallado",
	"rgbo": "Iconos, acentos, insignias"
	},
	"advanced_colors": {
	"_tab_label": "Avanzado",
	"alert": "Fondo de Alertas",
	"alert_error": "Error",
	"badge": "Fondo de Insignias",
	"badge_notification": "Notificaciones",
	"panel_header": "Cabecera del panel",
	"top_bar": "Barra superior",
	"borders": "Bordes",
	"buttons": "Botones",
	"inputs": "Campos de entrada",
	"faint_text": "Texto desvanecido"
	},
	"radii": {
	"_tab_label": "Redondez"
	},
	"shadows": {
	"_tab_label": "Sombra e iluminación",
	"component": "Componente",
	"override": "Sobreescribir",
	"shadow_id": "Sombra #{value}",
	"blur": "Difuminar",
	"spread": "Cantidad",
	"inset": "Sombra interior",
	"hint": "Para las sombras, también puede usar --variable como un valor de color para usar las variables CSS3. Tenga en cuenta que establecer la opacidad no funcionará en este caso.",
	"filter_hint": {
	"always_drop_shadow": "Advertencia, esta sombra siempre usa {0} cuando el navegador lo soporta.",
	"drop_shadow_syntax": "{0} no soporta el parámetro {1} y la palabra clave {2}.",
	"avatar_inset": "Tenga en cuenta que la combinación de sombras interiores como no-interiores en los avatares, puede dar resultados inesperados con los avatares transparentes.",
	"spread_zero": "Sombras con una cantidad > 0 aparecerá como si estuviera puesto a cero",
	"inset_classic": "Las sombras interiores estarán usando {0}"
	},
	"components": {
	"panel": "Panel",
	"panelHeader": "Cabecera del panel",
	"topBar": "Barra superior",
	"avatar": "Avatar del usuario (en la vista del perfil)",
	"avatarStatus": "Avatar del usuario (en la vista de la entrada)",
	"popup": "Ventanas y textos emergentes (popups & tooltips)",
	"button": "Botones",
	"buttonHover": "Botón (encima)",
	"buttonPressed": "Botón (presionado)",
	"buttonPressedHover": "Botón (presionado+encima)",
	"input": "Campo de entrada"
	}
	},
	"fonts": {
	"_tab_label": "Fuentes",
	"help": "Seleccione la fuente a utilizar para los elementos de la interfaz de usuario. Para \"personalizar\", debe ingresar el nombre exacto de la fuente tal como aparece en el sistema.",
	"components": {
	"interface": "Interfaz",
	"input": "Campos de entrada",
	"post": "Texto de publicaciones",
	"postCode": "Texto monoespaciado en publicación (texto enriquecido)"
	},
	"family": "Nombre de la fuente",
	"size": "Tamaño (en px)",
	"weight": "Peso (negrita)",
	"custom": "Personalizado"
	},
	"preview": {
	"header": "Vista previa",
	"content": "Contenido",
	"error": "Ejemplo de error",
	"button": "Botón",
	"text": "Un montón de {0} y {1}",
	"mono": "contenido",
	"input": "Acaba de aterrizar en L.A.",
	"faint_link": "manual útil",
	"fine_print": "¡Lea nuestro {0} para aprender nada útil!",
	"header_faint": "Esto está bien",
	"checkbox": "He revisado los términos y condiciones",
	"link": "un bonito enlace"
	}
	},
	"version": {
	"title": "Versión",
	"backend_version": "Versión del Backend",
	"frontend_version": "Versión del Frontend"
	}
	},
	"time": {
	"day": "{0} día",
	"days": "{0} días",
	"day_short": "{0}d",
	"days_short": "{0}d",
	"hour": "{0} hora",
	"hours": "{0} horas",
	"hour_short": "{0}h",
	"hours_short": "{0}h",
	"in_future": "en {0}",
	"in_past": "hace {0}",
	"minute": "{0} minuto",
	"minutes": "{0} minutos",
	"minute_short": "{0}min",
	"minutes_short": "{0}min",
	"month": "{0} mes",
	"months": "{0} meses",
	"month_short": "{0}m",
	"months_short": "{0}m",
	"now": "justo ahora",
	"now_short": "ahora",
	"second": "{0} segundo",
	"seconds": "{0} segundos",
	"second_short": "{0}s",
	"seconds_short": "{0}s",
	"week": "{0} semana",
	"weeks": "{0} semanas",
	"week_short": "{0}sem",
	"weeks_short": "{0}sem",
	"year": "{0} año",
	"years": "{0} años",
	"year_short": "{0}a",
	"years_short": "{0}a"
	},
	"timeline": {
	"collapse": "Colapsar",
	"conversation": "Conversación",
	"error_fetching": "Error al cargar las actualizaciones",
	"load_older": "Cargar actualizaciones anteriores",
	"no_retweet_hint": "La publicación está marcada como solo para seguidores o directa y no se puede repetir",
	"repeated": "repetida",
	"show_new": "Mostrar lo nuevo",
	"up_to_date": "Actualizado",
	"no_more_statuses": "No hay más estados",
	"no_statuses": "Sin estados"
	},
	"status": {
	"favorites": "Favoritos",
	"repeats": "Repetidos",
	"delete": "Eliminar publicación",
	"pin": "Fijar en tu perfil",
	"unpin": "Desclavar de tu perfil",
	"pinned": "Fijado",
	"delete_confirm": "¿Realmente quieres borrar la publicación?",
	"reply_to": "Respondiendo a",
	"replies_list": "Respuestas:",
	"mute_conversation": "Silenciar la conversación",
	"unmute_conversation": "Mostrar la conversación"
	},
	"user_card": {
	"approve": "Aprobar",
	"block": "Bloquear",
	"blocked": "¡Bloqueado!",
	"deny": "Denegar",
	"favorites": "Favoritos",
	"follow": "Seguir",
	"follow_sent": "¡Solicitud enviada!",
	"follow_progress": "Solicitando…",
	"follow_again": "¿Enviar solicitud de nuevo?",
	"follow_unfollow": "Dejar de seguir",
	"followees": "Siguiendo",
	"followers": "Seguidores",
	"following": "¡Siguiendo!",
	"follows_you": "¡Te sigue!",
	"its_you": "¡Eres tú!",
	"media": "Media",
	"mention": "Mencionar",
	"mute": "Silenciar",
	"muted": "Silenciado",
	"per_day": "por día",
	"remote_follow": "Seguir",
	"report": "Reportar",
	"statuses": "Estados",
	"subscribe": "Suscribirse",
	"unsubscribe": "Desuscribirse",
	"unblock": "Desbloquear",
	"unblock_progress": "Desbloqueando...",
	"block_progress": "Bloqueando...",
	"unmute": "Quitar silencio",
	"unmute_progress": "Quitando silencio...",
	"mute_progress": "Silenciando...",
	"admin_menu": {
	"moderation": "Moderación",
	"grant_admin": "Conceder permisos de Administrador",
	"revoke_admin": "Revocar permisos de Administrador",
	"grant_moderator": "Conceder permisos de Moderador",
	"revoke_moderator": "Revocar permisos de Moderador",
	"activate_account": "Activar cuenta",
	"deactivate_account": "Desactivar cuenta",
	"delete_account": "Eliminar cuenta",
	"force_nsfw": "Marcar todas las publicaciones como NSFW (no es seguro/apropiado para el trabajo)",
	"strip_media": "Eliminar archivos multimedia de las publicaciones",
	"force_unlisted": "Forzar que se publique en el modo -Sin Listar-",
	"sandbox": "Forzar que se publique solo para tus seguidores",
	"disable_remote_subscription": "No permitir que usuarios de instancias remotas te siga.",
	"disable_any_subscription": "No permitir que ningún usuario te siga",
	"quarantine": "No permitir publicaciones de usuarios de instancias remotas",
	"delete_user": "Eliminar usuario",
	"delete_user_confirmation": "¿Estás completamente seguro? Esta acción no se puede deshacer."
	}
	},
	"user_profile": {
	"timeline_title": "Linea Temporal del Usuario",
	"profile_does_not_exist": "Lo sentimos, este perfil no existe.",
	"profile_loading_error": "Lo sentimos, hubo un error al cargar este perfil."
	},
	"user_reporting": {
	"title": "Reportando a {0}",
	"add_comment_description": "El informe será enviado a los moderadores de su instancia. Puedes proporcionar una explicación de por qué estás reportando esta cuenta a continuación:",
	"additional_comments": "Comentarios adicionales",
	"forward_description": "La cuenta es de otro servidor. ¿Enviar una copia del informe allí también?",
	"forward_to": "Reenviar a {0}",
	"submit": "Enviar",
	"generic_error": "Se produjo un error al procesar la solicitud."
	},
	"who_to_follow": {
	"more": "Más",
	"who_to_follow": "A quién seguir"
	},
	"tool_tip": {
	"media_upload": "Subir Medios",
	"repeat": "Repetir",
	"reply": "Contestar",
	"favorite": "Favorito",
	"user_settings": "Ajustes de usuario"
	},
	"upload":{
	"error": {
	"base": "Subida fallida.",
	"file_too_big": "Archivo demasiado grande [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
	"default": "Inténtalo más tarde"
	},
	"file_size_units": {
	"B": "B",
	"KiB": "KiB",
	"MiB": "MiB",
	"GiB": "GiB",
	"TiB": "TiB"
	}
	},
	"search": {
	"people": "Personas",
	"hashtags": "Etiquetas",
	"person_talking": "{count} personas hablando",
	"people_talking": "{count} gente hablando",
	"no_results": "Sin resultados"
	},
	"password_reset": {
	"forgot_password": "¿Contraseña olvidada?",
	"password_reset": "Restablecer la contraseña",
	"instruction": "Ingrese su dirección de correo electrónico o nombre de usuario. Le enviaremos un enlace para restablecer su contraseña.",
	"placeholder": "Su correo electrónico o nombre de usuario",
	"check_email": "Revise su correo electrónico para obtener un enlace para restablecer su contraseña.",
	"return_home": "Volver a la página de inicio",
	"not_found": "No pudimos encontrar ese correo electrónico o nombre de usuario.",
	"too_many_requests": "Has alcanzado el límite de intentos, vuelve a intentarlo más tarde.",
	"password_reset_disabled": "El restablecimiento de contraseñas está deshabilitado. Póngase en contacto con el administrador de su instancia."
	}
	}
	\ No newline at end of file
	diff --git a/src/i18n/eu.json b/src/i18n/eu.json
	index ad8f4c0536..90bc13a482 100644
	--- a/src/i18n/eu.json
	+++ b/src/i18n/eu.json
	@@ -1,623 +1,638 @@
	{
	"chat": {
	"title": "Txata"
	},
	"exporter": {
	"export": "Esportatu",
	"processing": "Prozesatzen, zure fitxategia deskargatzeko eskatuko zaizu laster"
	},
	"features_panel": {
	"chat": "Txata",
	"gopher": "Ghoper",
	"media_proxy": "Media proxy",
	"scope_options": "Ikusgaitasun aukerak",
	"text_limit": "Testu limitea",
	"title": "Ezaugarriak",
	"who_to_follow": "Nori jarraitu"
	},
	"finder": {
	"error_fetching_user": "Errorea erabiltzailea eskuratzen",
	"find_user": "Bilatu erabiltzailea"
	},
	"general": {
	"apply": "Aplikatu",
	"submit": "Bidali",
	"more": "Gehiago",
	"generic_error": "Errore bat gertatu da",
	"optional": "Hautazkoa",
	"show_more": "Gehiago erakutsi",
	"show_less": "Gutxiago erakutsi",
	"cancel": "Ezeztatu",
	"disable": "Ezgaitu",
	"enable": "Gaitu",
	"confirm": "Baieztatu",
	"verify": "Egiaztatu"
	},
	"image_cropper": {
	"crop_picture": "Moztu argazkia",
	"save": "Gorde",
	"save_without_cropping": "Gorde moztu gabe",
	"cancel": "Ezeztatu"
	},
	"importer": {
	"submit": "Bidali",
	"success": "Ondo inportatu da.",
	"error": "Errore bat gertatu da fitxategi hau inportatzerakoan."
	},
	"login": {
	"login": "Saioa hasi",
	"description": "OAuth-ekin saioa hasi",
	"logout": "Saioa itxi",
	"password": "Pasahitza",
	"placeholder": "adibidez Lain",
	"register": "Erregistratu",
	"username": "Erabiltzaile-izena",
	"hint": "Hasi saioa eztabaidan parte-hartzeko",
	"authentication_code": "Autentifikazio kodea",
	"enter_recovery_code": "Sartu berreskuratze kodea",
	"enter_two_factor_code": "Sartu bi-faktore kodea",
	"recovery_code": "Berreskuratze kodea",
	"heading": {
	"totp": "Bi-faktore autentifikazioa",
	"recovery": "Bi-faktore berreskuratzea"
	}
	},
	"media_modal": {
	"previous": "Aurrekoa",
	"next": "Hurrengoa"
	},
	"nav": {
	"about": "Honi buruz",
	+ "administration": "Administrazioa",
	"back": "Atzera",
	"chat": "Txat lokala",
	"friend_requests": "Jarraitzeko eskaerak",
	"mentions": "Aipamenak",
	"interactions": "Interakzioak",
	"dms": "Zuzeneko Mezuak",
	"public_tl": "Denbora-lerro Publikoa",
	"timeline": "Denbora-lerroa",
	"twkn": "Ezagutzen den Sarea",
	"user_search": "Erabiltzailea Bilatu",
	"search": "Bilatu",
	"who_to_follow": "Nori jarraitu",
	"preferences": "Hobespenak"
	},
	"notifications": {
	"broken_favorite": "Egoera ezezaguna, bilatzen...",
	"favorited_you": "zure mezua gogoko du",
	"followed_you": "Zu jarraitzen zaitu",
	"load_older": "Kargatu jakinarazpen zaharragoak",
	"notifications": "Jakinarazpenak",
	"read": "Irakurrita!",
	"repeated_you": "zure mezua errepikatu du",
	"no_more_notifications": "Ez dago jakinarazpen gehiago"
	},
	"polls": {
	"add_poll": "Inkesta gehitu",
	"add_option": "Gehitu aukera",
	"option": "Aukera",
	"votes": "Bozkak",
	"vote": "Bozka",
	"type": "Inkesta mota",
	"single_choice": "Aukera bakarra",
	"multiple_choices": "Aukera anizkoitza",
	"expiry": "Inkestaren iraupena",
	"expires_in": "Inkesta {0} bukatzen da",
	"expired": "Inkesta {0} bukatu zen",
	"not_enough_options": "Aukera gutxiegi inkestan"
	},
	+ "emoji": {
	+ "stickers": "Pegatinak",
	+ "emoji": "Emoji",
	+ "keep_open": "Mantendu hautatzailea zabalik",
	+ "search_emoji": "Bilatu emoji bat",
	+ "add_emoji": "Emoji bat gehitu",
	+ "custom": "Ohiko emojiak",
	+ "unicode": "Unicode emojiak"
	+ },
	"stickers": {
	"add_sticker": "Pegatina gehitu"
	},
	"interactions": {
	"favs_repeats": "Errepikapen eta gogokoak",
	"follows": "Jarraitzaile berriak",
	"load_older": "Kargatu elkarrekintza zaharragoak"
	},
	"post_status": {
	"new_status": "Mezu berri bat idatzi",
	"account_not_locked_warning": "Zure kontua ez dago {0}. Edozeinek jarraitzen hastearekin, zure mezuak irakur ditzake.",
	"account_not_locked_warning_link": "Blokeatuta",
	"attachments_sensitive": "Nabarmendu eranskinak hunkigarri gisa ",
	"content_type": {
	"text/plain": "Testu arrunta",
	"text/html": "HTML",
	"text/markdown": "Markdown",
	"text/bbcode": "BBCode"
	},
	"content_warning": "Gaia (hautazkoa)",
	"default": "Iadanik Los Angeles-en",
	"direct_warning_to_all": "Mezu hau aipatutako erabiltzaile guztientzat ikusgai egongo da.",
	"direct_warning_to_first_only": "Mezu hau ikusgai egongo da bakarrik hasieran aipatzen diren erabiltzaileei.",
	"posting": "Argitaratzen",
	"scope_notice": {
	"public": "Mezu hau guztiontzat ikusgai izango da",
	"private": "Mezu hau zure jarraitzaileek soilik ikusiko dute",
	"unlisted": "Mezu hau ez da argitaratuko Denbora-lerro Publikoan ezta Ezagutzen den Sarean"
	},
	"scope": {
	"direct": "Zuzena: Bidali aipatutako erabiltzaileei besterik ez",
	"private": "Jarraitzaileentzako bakarrik: Bidali jarraitzaileentzat bakarrik",
	"public": "Publikoa: Bistaratu denbora-lerro publikoetan",
	"unlisted": "Zerrendatu gabea: ez bidali denbora-lerro publikoetara"
	}
	},
	"registration": {
	"bio": "Biografia",
	"email": "E-posta",
	"fullname": "Erakutsi izena",
	"password_confirm": "Pasahitza berretsi",
	"registration": "Izena ematea",
	"token": "Gonbidapen txartela",
	"captcha": "CAPTCHA",
	"new_captcha": "Klikatu irudia captcha berri bat lortzeko",
	"username_placeholder": "Adibidez lain",
	"fullname_placeholder": "Adibidez Lain Iwakura",
	"bio_placeholder": "Adidibez.\nKaixo, Lain naiz.\nFedibertsoa gustokoa dut eta euskeraz hitzegiten dut.",
	"validations": {
	"username_required": "Ezin da hutsik utzi",
	"fullname_required": "Ezin da hutsik utzi",
	"email_required": "Ezin da hutsik utzi",
	"password_required": "Ezin da hutsik utzi",
	"password_confirmation_required": "Ezin da hutsik utzi",
	"password_confirmation_match": "Pasahitzaren berdina izan behar du"
	}
	},
	"selectable_list": {
	"select_all": "Hautatu denak"
	},
	"settings": {
	"app_name": "App izena",
	"security": "Segurtasuna",
	"enter_current_password_to_confirm": "Sar ezazu zure egungo pasahitza zure identitatea baieztatzeko",
	"mfa": {
	"otp": "OTP",
	"setup_otp": "OTP konfiguratu",
	"wait_pre_setup_otp": "OTP aurredoitzen",
	"confirm_and_enable": "Baieztatu eta gaitu OTP",
	"title": "Bi-faktore autentifikazioa",
	"generate_new_recovery_codes": "Sortu berreskuratze kode berriak",
	"warning_of_generate_new_codes": "Berreskuratze kode berriak sortzean, zure berreskuratze kode zaharrak ez dute balioko",
	"recovery_codes": "Berreskuratze kodea",
	"waiting_a_recovery_codes": "Babes-kopia kodeak jasotzen...",
	"recovery_codes_warning": "Idatzi edo gorde kodeak leku seguruan - bestela ez dituzu berriro ikusiko. Zure 2FA aplikaziorako sarbidea eta berreskuratze kodeak galduz gero, zure kontutik blokeatuta egongo zara.",
	"authentication_methods": "Autentifikazio metodoa",
	"scan": {
	"title": "Eskaneatu",
	"desc": "Zure bi-faktore aplikazioa erabiliz, eskaneatu QR kode hau edo idatzi testu-gakoa:",
	"secret_code": "Giltza"
	},
	"verify": {
	"desc": "Bi-faktore autentifikazioa gaitzeko, sar ezazu bi-faktore kodea zure app-tik"
	}
	},
	"attachmentRadius": "Eranskinak",
	"attachments": "Eranskinak",
	"autoload": "Gaitu karga automatikoa beheraino mugitzean",
	"avatar": "Avatarra",
	"avatarAltRadius": "Avatarra (Aipamenak)",
	"avatarRadius": "Avatarrak",
	"background": "Atzeko planoa",
	"bio": "Biografia",
	- "block_export": "Bloke esportatzea",
	- "block_export_button": "Esportatu zure blokeak csv fitxategi batera",
	- "block_import": "Bloke inportazioa",
	- "block_import_error": "Errorea blokeak inportatzen",
	- "blocks_imported": "Blokeak inportaturik! Hauek prozesatzeak denbora hartuko du.",
	- "blocks_tab": "Blokeak",
	+ "block_export": "Blokeatu dituzunak esportatu",
	+ "block_export_button": "Esportatu blokeatutakoak csv fitxategi batera",
	+ "block_import": "Blokeatu dituzunak inportatu",
	+ "block_import_error": "Errorea blokeatutakoak inportatzen",
	+ "blocks_imported": "Blokeatutakoak inportaturik! Hauek prozesatzeak denbora hartuko du.",
	+ "blocks_tab": "Blokeatutakoak",
	"btnRadius": "Botoiak",
	"cBlue": "Urdina (erantzun, jarraitu)",
	"cGreen": "Berdea (Bertxiotu)",
	"cOrange": "Laranja (Gogokoa)",
	"cRed": "Gorria (ezeztatu)",
	"change_password": "Pasahitza aldatu",
	"change_password_error": "Arazao bat egon da zure pasahitza aldatzean",
	"changed_password": "Pasahitza ondo aldatu da!",
	"collapse_subject": "Bildu gaia daukaten mezuak",
	"composing": "Idazten",
	"confirm_new_password": "Baieztatu pasahitz berria",
	"current_avatar": "Zure uneko avatarra",
	"current_password": "Indarrean den pasahitza",
	"current_profile_banner": "Zure profilaren banner-a",
	"data_import_export_tab": "Datuak Inportatu / Esportatu",
	"default_vis": "Lehenetsitako ikusgaitasunak",
	"delete_account": "Ezabatu kontua",
	+ "discoverable": "Baimendu zure kontua kanpo bilaketa-emaitzetan eta bestelako zerbitzuetan agertzea",
	"delete_account_description": "Betirako ezabatu zure kontua eta zure mezu guztiak",
	+ "pad_emoji": "Zuriuneak gehitu emoji bat aukeratzen denean",
	"delete_account_error": "Arazo bat gertatu da zure kontua ezabatzerakoan. Arazoa jarraitu eskero, administratzailearekin harremanetan jarri.",
	"delete_account_instructions": "Idatzi zure pasahitza kontua ezabatzeko.",
	"avatar_size_instruction": "Avatar irudien gomendatutako gutxieneko tamaina 150x150 pixel dira.",
	"export_theme": "Gorde aurre-ezarpena",
	"filtering": "Iragazten",
	"filtering_explanation": "Hitz hauek dituzten mezu guztiak isilduak izango dira. Lerro bakoitzeko bat",
	"follow_export": "Jarraitzen dituzunak esportatu",
	"follow_export_button": "Esportatu zure jarraitzaileak csv fitxategi batean",
	"follow_import": "Jarraitzen dituzunak inportatu",
	"follow_import_error": "Errorea jarraitzaileak inportatzerakoan",
	"follows_imported": "Jarraitzaileak inportatuta! Prozesatzeak denbora pixka bat iraungo du.",
	"foreground": "Aurreko planoa",
	"general": "Orokorra",
	"hide_attachments_in_convo": "Ezkutatu eranskinak elkarrizketatan ",
	"hide_attachments_in_tl": "Ezkutatu eranskinak donbora-lerroan",
	"hide_muted_posts": "Ezkutatu mutututako erabiltzaileen mezuak",
	"max_thumbnails": "Mezu bakoitzeko argazki-miniatura kopuru maximoa",
	"hide_isp": "Instantziari buruzko panela ezkutatu",
	"preload_images": "Argazkiak aurrekargatu",
	"use_one_click_nsfw": "Ireki eduki hunkigarria duten eranskinak klik batekin",
	"hide_post_stats": "Ezkutatu mezuaren estatistikak (adibidez faborito kopurua)",
	"hide_user_stats": "Ezkutatu erabiltzaile estatistikak (adibidez jarraitzaile kopurua)",
	"hide_filtered_statuses": "Ezkutatu iragazitako mezuak",
	"import_blocks_from_a_csv_file": "Blokeatutakoak inportatu CSV fitxategi batetik",
	"import_followers_from_a_csv_file": "Inportatu jarraitzaileak csv fitxategi batetik",
	"import_theme": "Kargatu aurre-ezarpena",
	"inputRadius": "Sarrera eremuak",
	"checkboxRadius": "Kuadrotxoak",
	"instance_default": "(lehenetsia: {value})",
	"instance_default_simple": "(lehenetsia)",
	"interface": "Interfazea",
	- "interfaceLanguage": "Interfaze hizkuntza",
	+ "interfaceLanguage": "Interfazearen hizkuntza",
	"invalid_theme_imported": "Hautatutako fitxategia ez da onartutako Pleroma gaia. Ez da zure gaian aldaketarik burutu.",
	"limited_availability": "Ez dago erabilgarri zure nabigatzailean",
	"links": "Estekak",
	"lock_account_description": "Mugatu zure kontua soilik onartutako jarraitzaileei",
	"loop_video": "Begizta bideoak",
	"loop_video_silent_only": "Soinu gabeko bideoak begiztatu bakarrik (adibidez Mastodon-eko gif-ak)",
	"mutes_tab": "Mututuak",
	"play_videos_in_modal": "Erreproduzitu bideoak zuzenean multimedia erreproduzigailuan",
	"use_contain_fit": "Eranskinak ez moztu miniaturetan",
	"name": "Izena",
	"name_bio": "Izena eta biografia",
	"new_password": "Pasahitz berria",
	"notification_visibility": "Erakusteko jakinarazpen motak",
	"notification_visibility_follows": "Jarraitzaileak",
	"notification_visibility_likes": "Gogokoak",
	"notification_visibility_mentions": "Aipamenak",
	"notification_visibility_repeats": "Errepikapenak",
	"no_rich_text_description": "Kendu testu-formatu aberastuak mezu guztietatik",
	"no_blocks": "Ez daude erabiltzaile blokeatutak",
	"no_mutes": "Ez daude erabiltzaile mututuak",
	"hide_follows_description": "Ez erakutsi nor jarraitzen ari naizen",
	"hide_followers_description": "Ez erakutsi nor ari den ni jarraitzen",
	+ "hide_follows_count_description": "Ez erakutsi jarraitzen ari naizen kontuen kopurua",
	+ "hide_followers_count_description": "Ez erakutsi nire jarraitzaileen kontuen kopurua",
	"show_admin_badge": "Erakutsi Administratzaile etiketa nire profilan",
	"show_moderator_badge": "Erakutsi Moderatzaile etiketa nire profilan",
	"nsfw_clickthrough": "Gaitu klika hunkigarri eranskinak ezkutatzeko",
	"oauth_tokens": "OAuth tokenak",
	"token": "Tokena",
	"refresh_token": "Berrgin Tokena",
	"valid_until": "Baliozkoa Arte",
	"revoke_token": "Ezeztatu",
	"panelRadius": "Panelak",
	"pause_on_unfocused": "Eguneraketa automatikoa gelditu fitxatik kanpo",
	"presets": "Aurrezarpenak",
	"profile_background": "Profilaren atzeko planoa",
	"profile_banner": "Profilaren Banner-a",
	"profile_tab": "Profila",
	"radii_help": "Konfiguratu interfazearen ertzen biribiltzea (pixeletan)",
	"replies_in_timeline": "Denbora-lerroko erantzunak",
	"reply_link_preview": "Gaitu erantzun-estekaren aurrebista arratoiarekin",
	"reply_visibility_all": "Erakutsi erantzun guztiak",
	"reply_visibility_following": "Erakutsi bakarrik niri zuzendutako edo nik jarraitutako erabiltzaileen erantzunak",
	"reply_visibility_self": "Erakutsi bakarrik niri zuzendutako erantzunak",
	"autohide_floating_post_button": "Automatikoki ezkutatu Mezu Berriaren botoia (sakelako)",
	"saving_err": "Errorea ezarpenak gordetzean",
	"saving_ok": "Ezarpenak gordeta",
	"search_user_to_block": "Bilatu zein blokeatu nahi duzun",
	"search_user_to_mute": "Bilatu zein isilarazi nahi duzun",
	"security_tab": "Segurtasuna",
	"scope_copy": "Ikusgaitasun aukerak kopiatu mezua erantzuterakoan (Zuzeneko Mezuak beti kopiatzen dute)",
	"minimal_scopes_mode": "Bildu ikusgaitasun aukerak",
	"set_new_avatar": "Ezarri avatar berria",
	"set_new_profile_background": "Ezarri atzeko plano berria",
	"set_new_profile_banner": "Ezarri profil banner berria",
	"settings": "Ezarpenak",
	"subject_input_always_show": "Erakutsi beti gaiaren eremua",
	"subject_line_behavior": "Gaia kopiatu erantzuterakoan",
	"subject_line_email": "E-maila bezala: \"re: gaia\"",
	"subject_line_mastodon": "Mastodon bezala: kopiatu den bezala",
	"subject_line_noop": "Ez kopiatu",
	"post_status_content_type": "Argitarapen formatua",
	"stop_gifs": "GIF-a iniziatu arratoia gainean jarrita",
	"streaming": "Gaitu mezu berrien karga goraino mugitzean",
	"text": "Testua",
	"theme": "Gaia",
	"theme_help": "Erabili hex-kolore kodeak (#rrggbb) gaiaren koloreak pertsonalizatzeko.",
	"theme_help_v2_1": "Zenbait osagaien koloreak eta opakutasuna ezeztatu ditzakezu kontrol-laukia aktibatuz, \"Garbitu dena\" botoia erabili aldaketak deusezteko.",
	"theme_help_v2_2": "Sarreren batzuen azpian dauden ikonoak atzeko planoaren eta testuaren arteko kontrastearen adierazleak dira, kokatu arratoia gainean informazio zehatza eskuratzeko. Kontuan izan gardentasun kontrasteen adierazleek erabiltzen direnean, kasurik okerrena erakusten dutela.",
	"tooltipRadius": "Argibideak/alertak",
	"upload_a_photo": "Argazkia kargatu",
	"user_settings": "Erabiltzaile Ezarpenak",
	"values": {
	"false": "ez",
	"true": "bai"
	},
	"notifications": "Jakinarazpenak",
	"notification_setting": "Jaso pertsona honen jakinarazpenak:",
	"notification_setting_follows": "Jarraitutako erabiltzaileak",
	"notification_setting_non_follows": "Jarraitzen ez dituzun erabiltzaileak",
	"notification_setting_followers": "Zu jarraitzen zaituzten erabiltzaileak",
	"notification_setting_non_followers": "Zu jarraitzen ez zaituzten erabiltzaileak",
	"notification_mutes": "Erabiltzaile jakin baten jakinarazpenak jasotzeari uzteko, isilarazi ezazu.",
	"notification_blocks": "Erabiltzaile bat blokeatzeak jakinarazpen guztiak gelditzen ditu eta harpidetza ezeztatu.",
	"enable_web_push_notifications": "Gaitu web jakinarazpenak",
	"style": {
	"switcher": {
	"keep_color": "Mantendu koloreak",
	"keep_shadows": "Mantendu itzalak",
	"keep_opacity": "Mantendu opakotasuna",
	"keep_roundness": "Mantendu biribiltasuna",
	"keep_fonts": "Mantendu iturriak",
	"save_load_hint": "\"Mantendu\" aukerak uneko konfiguratutako aukerak gordetzen ditu gaiak hautatzerakoan edo kargatzean, gai hauek esportatze garaian ere gordetzen ditu. Kontrol-lauki guztiak garbitzen direnean, esportazio-gaiak dena gordeko du.",
	"reset": "Berrezarri",
	"clear_all": "Garbitu dena",
	"clear_opacity": "Garbitu opakotasuna"
	},
	"common": {
	"color": "Kolorea",
	"opacity": "Opakotasuna",
	"contrast": {
	"hint": "Kontrastearen erlazioa {ratio} da, {level} {context}",
	"level": {
	"aa": "AA Mailako gidaliburua betetzen du (gutxienezkoa)",
	"aaa": "AAA Mailako gidaliburua betetzen du (gomendatua)",
	"bad": "ez ditu irisgarritasun arauak betetzen"
	},
	"context": {
	"18pt": "testu handientzat (+18pt)",
	"text": "testuentzat"
	}
	}
	},
	"common_colors": {
	"_tab_label": "Ohikoa",
	"main": "Ohiko koloreak",
	"foreground_hint": "Ikusi \"Aurreratua\" fitxa kontrol zehatzagoa lortzeko",
	"rgbo": "Ikono, azentu eta etiketak"
	},
	"advanced_colors": {
	"_tab_label": "Aurreratua",
	"alert": "Alerten atzeko planoa",
	"alert_error": "Errorea",
	"badge": "Etiketen atzeko planoa",
	"badge_notification": "Jakinarazpenak",
	"panel_header": "Panelaren goiburua",
	"top_bar": "Goiko barra",
	"borders": "Ertzak",
	"buttons": "Botoiak",
	"inputs": "Sarrera eremuak",
	"faint_text": "Testu itzalita"
	},
	"radii": {
	"_tab_label": "Biribiltasuna"
	},
	"shadows": {
	"_tab_label": "Itzal eta argiak",
	"component": "Atala",
	"override": "Berridatzi",
	"shadow_id": "Itzala #{value}",
	"blur": "Lausotu",
	"spread": "Hedapena",
	"inset": "Barrutik",
	"hint": "Itzaletarako ere erabil dezakezu --aldagarri kolore balio gisa CSS3 aldagaiak erabiltzeko. Kontuan izan opakutasuna ezartzeak ez duela kasu honetan funtzionatuko.",
	"filter_hint": {
	"always_drop_shadow": "Kontuz, itzal honek beti erabiltzen du {0} nabigatzaileak onartzen duenean.",
	"drop_shadow_syntax": "{0} ez du onartzen {1} parametroa eta {2} gako-hitza.",
	"avatar_inset": "Kontuan izan behar da barruko eta kanpoko itzal konbinazioak, ez esparotako emaitzak ager daitezkeela atzeko plano gardena duten Avatarretan.",
	"spread_zero": "Hedapena > 0 duten itzalak zero izango balitz bezala agertuko dira",
	"inset_classic": "Barruko itzalak {0} erabiliko dute"
	},
	"components": {
	"panel": "Panela",
	"panelHeader": "Panel goiburua",
	"topBar": "Goiko barra",
	"avatar": "Erabiltzailearen avatarra (profilan)",
	"avatarStatus": "Erabiltzailearen avatarra (mezuetan)",
	"popup": "Popup-ak eta argibideak",
	"button": "Botoia",
	"buttonHover": "Botoia (gainean)",
	"buttonPressed": "Botoai (sakatuta)",
	"buttonPressedHover": "Botoia (sakatuta+gainean)",
	"input": "Sarrera eremuak"
	}
	},
	"fonts": {
	"_tab_label": "Letra-tipoak",
	"help": "Aukeratu letra-tipoak erabiltzailearen interfazean erabiltzeko. \"Pertsonalizatua\" letra-tipoan, sisteman agertzen den izen berdinarekin idatzi behar duzu.",
	"components": {
	"interface": "Interfazea",
	"input": "Sarrera eremuak",
	"post": "Mezuen testua",
	"postCode": "Tarte-bakarreko testua mezuetan (testu-formatu aberastuak)"
	},
	"family": "Letra-tipoaren izena",
	"size": "Tamaina (px)",
	"weight": "Pisua (lodiera)",
	"custom": "Pertsonalizatua"
	},
	"preview": {
	"header": "Aurrebista",
	"content": "Edukia",
	"error": "Adibide errorea",
	"button": "Botoia",
	"text": "Hamaika {0} eta {1}",
	"mono": "edukia",
	"input": "Jadanik Los Angeles-en",
	"faint_link": "laguntza",
	"fine_print": "Irakurri gure {0} ezer erabilgarria ikasteko!",
	"header_faint": "Ondo dago",
	"checkbox": "Baldintzak berrikusi ditut",
	"link": "esteka polita"
	}
	},
	"version": {
	"title": "Bertsioa",
	- "backend_version": "Backend Bertsio",
	+ "backend_version": "Backend Bertsioa",
	"frontend_version": "Frontend Bertsioa"
	}
	},
	"time": {
	"day": "{0} egun",
	"days": "{0} egun",
	"day_short": "{0}e",
	"days_short": "{0}e",
	"hour": "{0} ordu",
	"hours": "{0} ordu",
	"hour_short": "{0}o",
	"hours_short": "{0}o",
	"in_future": "{0} barru",
	"in_past": "duela {0}",
	"minute": "{0} minutu",
	"minutes": "{0} minutu",
	"minute_short": "{0}min",
	"minutes_short": "{0}min",
	"month": "{0} hilabete",
	"months": "{0} hilabete",
	"month_short": "{0}h",
	"months_short": "{0}h",
	"now": "oraintxe bertan",
	"now_short": "orain",
	"second": "{0} segundu",
	"seconds": "{0} segundu",
	"second_short": "{0}s",
	"seconds_short": "{0}s",
	"week": "{0} aste",
	"weeks": "{0} aste",
	"week_short": "{0}a",
	"weeks_short": "{0}a",
	"year": "{0} urte",
	"years": "{0} urte",
	"year_short": "{0}u",
	"years_short": "{0}u"
	},
	"timeline": {
	"collapse": "Bildu",
	"conversation": "Elkarrizketa",
	"error_fetching": "Errorea eguneraketak eskuratzen",
	"load_older": "Kargatu mezu zaharragoak",
	"no_retweet_hint": "Mezu hau jarraitzailentzako bakarrik markatuta dago eta ezin da errepikatu",
	"repeated": "Errepikatuta",
	"show_new": "Berriena erakutsi",
	"up_to_date": "Eguneratuta",
	"no_more_statuses": "Ez daude mezu gehiago",
	"no_statuses": "Mezurik gabe"
	},
	"status": {
	"favorites": "Gogokoak",
	"repeats": "Errepikapenak",
	"delete": "Mezua ezabatu",
	"pin": "Profilan ainguratu",
	"unpin": "Aingura ezeztatu profilatik",
	"pinned": "Ainguratuta",
	"delete_confirm": "Mezu hau benetan ezabatu nahi duzu?",
	"reply_to": "Erantzuten",
	"replies_list": "Erantzunak:",
	"mute_conversation": "Elkarrizketa isilarazi",
	"unmute_conversation": "Elkarrizketa aktibatu"
	},
	"user_card": {
	"approve": "Onartu",
	"block": "Blokeatu",
	"blocked": "Blokeatuta!",
	"deny": "Ukatu",
	"favorites": "Gogokoak",
	"follow": "Jarraitu",
	"follow_sent": "Eskaera bidalita!",
	"follow_progress": "Eskatzen...",
	"follow_again": "Eskaera berriro bidali?",
	"follow_unfollow": "Jarraitzeari utzi",
	"followees": "Jarraitzen",
	"followers": "Jarraitzaileak",
	"following": "Jarraitzen!",
	"follows_you": "Jarraitzen dizu!",
	"its_you": "Zu zara!",
	"media": "Multimedia",
	+ "mention": "Aipatu",
	"mute": "Isilarazi",
	"muted": "Isilduta",
	"per_day": "eguneko",
	"remote_follow": "Jarraitu",
	"report": "Berri eman",
	"statuses": "Mezuak",
	"subscribe": "Harpidetu",
	"unsubscribe": "Harpidetza ezeztatu",
	"unblock": "Blokeoa kendu",
	"unblock_progress": "Blokeoa ezeztatzen...",
	"block_progress": "Blokeatzen...",
	"unmute": "Isiltasuna kendu",
	"unmute_progress": "Isiltasuna kentzen...",
	"mute_progress": "Isiltzen...",
	"admin_menu": {
	"moderation": "Moderazioa",
	"grant_admin": "Administratzaile baimena",
	"revoke_admin": "Ezeztatu administratzaile baimena",
	"grant_moderator": "Moderatzaile baimena",
	"revoke_moderator": "Ezeztatu moderatzaile baimena",
	"activate_account": "Aktibatu kontua",
	"deactivate_account": "Desaktibatu kontua",
	"delete_account": "Ezabatu kontua",
	"force_nsfw": "Markatu mezu guztiak hunkigarri gisa",
	"strip_media": "Kendu multimedia mezuetatik",
	"force_unlisted": "Behartu mezuak listatu gabekoak izatea",
	"sandbox": "Behartu zure jarraitzaileentzako bakarrik argitaratzera",
	"disable_remote_subscription": "Ez utzi istantzia kanpoko erabiltzaileak zuri jarraitzea",
	"disable_any_subscription": "Ez utzi beste erabiltzaileak zuri jarraitzea",
	"quarantine": "Ez onartu mezuak beste instantzietatik",
	"delete_user": "Erabiltzailea ezabatu",
	"delete_user_confirmation": "Erabat ziur zaude? Ekintza hau ezin da desegin."
	}
	},
	"user_profile": {
	"timeline_title": "Erabiltzailearen denbora-lerroa",
	"profile_does_not_exist": "Barkatu, profil hau ez da existitzen.",
	"profile_loading_error": "Barkatu, errore bat gertatu da profila kargatzean."
	},
	"user_reporting": {
	"title": "{0}-ri buruz berri ematen",
	"add_comment_description": "Zure kexa moderatzaileei bidaliko da. Nahi baduzu zure kexaren zergatia idatz dezakezu:",
	"additional_comments": "Iruzkin gehiago",
	"forward_description": "Kontu hau beste instantzia batekoa da. Nahi duzu txostenaren kopia bat bidali ere?",
	"forward_to": "{0}-ri birbidali",
	"submit": "Bidali",
	"generic_error": "Errore bat gertatu da zure eskaera prozesatzerakoan."
	},
	"who_to_follow": {
	"more": "Gehiago",
	"who_to_follow": "Nori jarraitu"
	},
	"tool_tip": {
	"media_upload": "Multimedia igo",
	"repeat": "Errepikatu",
	"reply": "Erantzun",
	"favorite": "Gogokoa",
	"user_settings": "Erabiltzaile ezarpenak"
	},
	"upload": {
	"error": {
	"base": "Igoerak huts egin du.",
	"file_too_big": "Artxiboa haundiegia [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
	"default": "Saiatu berriro geroago"
	},
	"file_size_units": {
	"B": "B",
	"KiB": "KiB",
	"MiB": "MiB",
	"GiB": "GiB",
	"TiB": "TiB"
	}
	},
	"search": {
	"people": "Erabiltzaileak",
	"hashtags": "Traolak",
	"person_talking": "{count} pertsona hitzegiten",
	"people_talking": "{count} jende hitzegiten",
	"no_results": "Emaitzarik ez"
	},
	"password_reset": {
	"forgot_password": "Pasahitza ahaztua?",
	"password_reset": "Pasahitza berrezarri",
	"instruction": "Idatzi zure helbide elektronikoa edo erabiltzaile izena. Pasahitza berrezartzeko esteka bidaliko dizugu.",
	"placeholder": "Zure e-posta edo erabiltzaile izena",
	"check_email": "Begiratu zure posta elektronikoa pasahitza berrezarri ahal izateko.",
	"return_home": "Itzuli hasierara",
	"not_found": "Ezin izan dugu helbide elektroniko edo erabiltzaile hori aurkitu.",
	"too_many_requests": "Saiakera gehiegi burutu ditzu, saiatu berriro geroxeago.",
	"password_reset_disabled": "Pasahitza berrezartzea debekatuta dago. Mesedez, jarri harremanetan instantzia administratzailearekin."
	}
	}
	\ No newline at end of file
	diff --git a/src/main.js b/src/main.js
	index 7923ffe890..a9db1cff03 100644
	--- a/src/main.js
	+++ b/src/main.js
	@@ -1,97 +1,103 @@
	import Vue from 'vue'
	import VueRouter from 'vue-router'
	import Vuex from 'vuex'

	import interfaceModule from './modules/interface.js'
	import instanceModule from './modules/instance.js'
	import statusesModule from './modules/statuses.js'
	import usersModule from './modules/users.js'
	import apiModule from './modules/api.js'
	import configModule from './modules/config.js'
	import chatModule from './modules/chat.js'
	import oauthModule from './modules/oauth.js'
	import authFlowModule from './modules/auth_flow.js'
	import mediaViewerModule from './modules/media_viewer.js'
	import oauthTokensModule from './modules/oauth_tokens.js'
	import reportsModule from './modules/reports.js'
	import pollsModule from './modules/polls.js'
	import postStatusModule from './modules/postStatus.js'

	import VueI18n from 'vue-i18n'

	import createPersistedState from './lib/persisted_state.js'
	import pushNotifications from './lib/push_notifications_plugin.js'

	import messages from './i18n/messages.js'

	import VueChatScroll from 'vue-chat-scroll'
	import VueClickOutside from 'v-click-outside'
	import PortalVue from 'portal-vue'
	import VBodyScrollLock from './directives/body_scroll_lock'
	import VTooltip from 'v-tooltip'

	import afterStoreSetup from './boot/after_store.js'

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

	Vue.use(Vuex)
	Vue.use(VueRouter)
	Vue.use(VueI18n)
	Vue.use(VueChatScroll)
	Vue.use(VueClickOutside)
	Vue.use(PortalVue)
	Vue.use(VBodyScrollLock)
	-Vue.use(VTooltip)
	+Vue.use(VTooltip, {
	+ popover: {
	+ defaultTrigger: 'hover click',
	+ defaultContainer: false,
	+ defaultOffset: 5
	+ }
	+})

	const i18n = new VueI18n({
	// By default, use the browser locale, we will update it if neccessary
	locale: currentLocale,
	fallbackLocale: 'en',
	messages
	})

	const persistedStateOptions = {
	paths: [
	'config',
	'users.lastLoginName',
	'oauth'
	]
	};

	(async () => {
	const persistedState = await createPersistedState(persistedStateOptions)
	const store = new Vuex.Store({
	modules: {
	i18n: {
	getters: {
	i18n: () => i18n
	}
	},
	interface: interfaceModule,
	instance: instanceModule,
	statuses: statusesModule,
	users: usersModule,
	api: apiModule,
	config: configModule,
	chat: chatModule,
	oauth: oauthModule,
	authFlow: authFlowModule,
	mediaViewer: mediaViewerModule,
	oauthTokens: oauthTokensModule,
	reports: reportsModule,
	polls: pollsModule,
	postStatus: postStatusModule
	},
	plugins: [persistedState, pushNotifications],
	strict: false // Socket modifies itself, let's ignore this for now.
	// strict: process.env.NODE_ENV !== 'production'
	})

	afterStoreSetup({ store, i18n })
	})()

	// These are inlined by webpack's DefinePlugin
	/* eslint-disable */
	window.___pleromafe_mode = process.env
	window.___pleromafe_commit_hash = COMMIT_HASH
	window.___pleromafe_dev_overrides = DEV_OVERRIDES
	diff --git a/src/modules/config.js b/src/modules/config.js
	index cf04d14fe9..7831411841 100644
	--- a/src/modules/config.js
	+++ b/src/modules/config.js
	@@ -1,75 +1,102 @@
	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]

	-const defaultState = {
	+export const defaultState = {
	colors: {},
	+ // 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,
	autohideFloatingPostButton: false,
	pauseOnUnfocused: true,
	stopGifs: false,
	replyVisibility: 'all',
	notificationVisibility: {
	follows: true,
	mentions: true,
	likes: true,
	repeats: true
	},
	webPushNotifications: false,
	muteWords: [],
	highlight: {},
	interfaceLanguage: browserLocale,
	hideScopeNotice: false,
	scopeCopy: undefined, // instance default
	subjectLineBehavior: undefined, // instance default
	alwaysShowSubjectInput: undefined, // instance default
	postContentType: undefined, // instance default
	- minimalScopesMode: 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,
	+ 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/instance.js b/src/modules/instance.js
	index 7d602aa103..0c1235cafc 100644
	--- a/src/modules/instance.js
	+++ b/src/modules/instance.js
	@@ -1,96 +1,104 @@
	import { set } from 'vue'
	import { setPreset } from '../services/style_setter/style_setter.js'
	+import { instanceDefaultProperties } from './config.js'

	const defaultState = {
	// Stuff from static/config.json and apiConfig
	name: 'Pleroma FE',
	registrationOpen: true,
	safeDM: true,
	textlimit: 5000,
	server: 'http://localhost:4040/',
	theme: 'pleroma-dark',
	background: '/static/aurora_borealis.jpg',
	logo: '/static/logo.png',
	logoMask: true,
	logoMargin: '.2em',
	redirectRootNoLogin: '/main/all',
	redirectRootLogin: '/main/friends',
	showInstanceSpecificPanel: false,
	alwaysShowSubjectInput: true,
	hideMutedPosts: false,
	collapseMessageWithSubject: false,
	hidePostStats: false,
	hideUserStats: false,
	hideFilteredStatuses: false,
	disableChat: false,
	scopeCopy: true,
	subjectLineBehavior: 'email',
	postContentType: 'text/plain',
	nsfwCensorImage: undefined,
	vapidPublicKey: undefined,
	noAttachmentLinks: false,
	showFeaturesPanel: true,
	minimalScopesMode: false,

	// Nasty stuff
	pleromaBackend: true,
	emoji: [],
	customEmoji: [],
	restrictedNicknames: [],
	postFormats: [],

	// Feature-set, apparently, not everything here is reported...
	mediaProxyAvailable: false,
	chatAvailable: false,
	gopherAvailable: false,
	suggestionsEnabled: false,
	suggestionsWeb: '',

	// Html stuff
	instanceSpecificPanelContent: '',
	tos: '',

	// Version Information
	backendVersion: '',
	frontendVersion: '',

	pollsAvailable: false,
	pollLimits: {
	max_options: 4,
	max_option_chars: 255,
	min_expiration: 60,
	max_expiration: 60 * 60 * 24
	}
	}

	const instance = {
	state: defaultState,
	mutations: {
	setInstanceOption (state, { name, value }) {
	if (typeof value !== 'undefined') {
	set(state, name, value)
	}
	}
	},
	+ getters: {
	+ instanceDefaultConfig (state) {
	+ return instanceDefaultProperties
	+ .map(key => [key, state[key]])
	+ .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
	+ }
	+ },
	actions: {
	setInstanceOption ({ commit, dispatch }, { name, value }) {
	commit('setInstanceOption', { name, value })
	switch (name) {
	case 'name':
	dispatch('setPageTitle')
	break
	case 'chatAvailable':
	if (value) {
	dispatch('initializeSocket')
	}
	break
	}
	},
	setTheme ({ commit }, themeName) {
	commit('setInstanceOption', { name: 'theme', value: themeName })
	return setPreset(themeName, commit)
	}
	}
	}

	export default instance
	diff --git a/src/modules/statuses.js b/src/modules/statuses.js
	index 918065d207..f11ffdcdc3 100644
	--- a/src/modules/statuses.js
	+++ b/src/modules/statuses.js
	@@ -1,630 +1,634 @@
	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,
	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'
	].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.action = addStatusToGlobalStorage(state, notification.action).item
	notification.status = notification.status && addStatusToGlobalStorage(state, notification.status).item
	}

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

	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)
	// Chrome is known for not closing notifications automatically
	// according to MDN, anyway.
	setTimeout(notification.close.bind(notification), 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
	},
	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)
	},
	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 })
	},
	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(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(status.id)
	.then(status => commit('setFavoritedConfirm', { status, user: rootState.users.currentUser }))
	},
	fetchPinnedStatuses ({ rootState, dispatch }, userId) {
	rootState.api.backendInteractor.fetchPinnedStatuses(userId)
	.then(statuses => dispatch('addNewStatuses', { statuses, timeline: 'user', userId, showImmediately: true, noIdUpdate: true }))
	},
	pinStatus ({ rootState, dispatch }, statusId) {
	return rootState.api.backendInteractor.pinOwnStatus(statusId)
	.then((status) => dispatch('addNewStatuses', { statuses: [status] }))
	},
	unpinStatus ({ rootState, dispatch }, statusId) {
	rootState.api.backendInteractor.unpinOwnStatus(statusId)
	.then((status) => dispatch('addNewStatuses', { statuses: [status] }))
	},
	muteConversation ({ rootState, commit }, statusId) {
	return rootState.api.backendInteractor.muteConversation(statusId)
	.then((status) => commit('setMutedStatus', status))
	},
	unmuteConversation ({ rootState, commit }, statusId) {
	return rootState.api.backendInteractor.unmuteConversation(statusId)
	.then((status) => commit('setMutedStatus', status))
	},
	retweet ({ rootState, commit }, status) {
	// Optimistic retweeting...
	commit('setRetweeted', { status, value: true })
	rootState.api.backendInteractor.retweet(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(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 })
	})
	},
	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/modules/users.js b/src/modules/users.js
	index 4d02f8d749..6d259dc2ac 100644
	--- a/src/modules/users.js
	+++ b/src/modules/users.js
	@@ -1,485 +1,504 @@
	import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
	import oauthApi from '../services/new_api/oauth.js'
	import { compact, map, each, merge, last, concat, uniq } from 'lodash'
	import { set } from 'vue'
	import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js'

	// TODO: Unify with mergeOrAdd in statuses.js
	export const mergeOrAdd = (arr, obj, item) => {
	if (!item) { return false }
	const oldItem = obj[item.id]
	if (oldItem) {
	// We already have this, so only merge the new info.
	merge(oldItem, item)
	return { item: oldItem, new: false }
	} else {
	// This is a new item, prepare it
	arr.push(item)
	set(obj, item.id, item)
	if (item.screen_name && !item.screen_name.includes('@')) {
	set(obj, item.screen_name.toLowerCase(), item)
	}
	return { item, new: true }
	}
	}

	const getNotificationPermission = () => {
	const Notification = window.Notification

	if (!Notification) return Promise.resolve(null)
	if (Notification.permission === 'default') return Notification.requestPermission()
	return Promise.resolve(Notification.permission)
	}

	const blockUser = (store, id) => {
	return store.rootState.api.backendInteractor.blockUser(id)
	.then((relationship) => {
	store.commit('updateUserRelationship', [relationship])
	store.commit('addBlockId', id)
	store.commit('removeStatus', { timeline: 'friends', userId: id })
	store.commit('removeStatus', { timeline: 'public', userId: id })
	store.commit('removeStatus', { timeline: 'publicAndExternal', userId: id })
	})
	}

	const unblockUser = (store, id) => {
	return store.rootState.api.backendInteractor.unblockUser(id)
	.then((relationship) => store.commit('updateUserRelationship', [relationship]))
	}

	const muteUser = (store, id) => {
	return store.rootState.api.backendInteractor.muteUser(id)
	.then((relationship) => {
	store.commit('updateUserRelationship', [relationship])
	store.commit('addMuteId', id)
	})
	}

	const unmuteUser = (store, id) => {
	return store.rootState.api.backendInteractor.unmuteUser(id)
	.then((relationship) => store.commit('updateUserRelationship', [relationship]))
	}

	+const hideReblogs = (store, userId) => {
	+ return store.rootState.api.backendInteractor.followUser({ id: userId, reblogs: false })
	+ .then((relationship) => {
	+ store.commit('updateUserRelationship', [relationship])
	+ })
	+}
	+
	+const showReblogs = (store, userId) => {
	+ return store.rootState.api.backendInteractor.followUser({ id: userId, reblogs: true })
	+ .then((relationship) => store.commit('updateUserRelationship', [relationship]))
	+}
	+
	export const mutations = {
	setMuted (state, { user: { id }, muted }) {
	const user = state.usersObject[id]
	set(user, 'muted', muted)
	},
	tagUser (state, { user: { id }, tag }) {
	const user = state.usersObject[id]
	const tags = user.tags \|\| []
	const newTags = tags.concat([tag])
	set(user, 'tags', newTags)
	},
	untagUser (state, { user: { id }, tag }) {
	const user = state.usersObject[id]
	const tags = user.tags \|\| []
	const newTags = tags.filter(t => t !== tag)
	set(user, 'tags', newTags)
	},
	updateRight (state, { user: { id }, right, value }) {
	const user = state.usersObject[id]
	let newRights = user.rights
	newRights[right] = value
	set(user, 'rights', newRights)
	},
	updateActivationStatus (state, { user: { id }, status }) {
	const user = state.usersObject[id]
	set(user, 'deactivated', !status)
	},
	setCurrentUser (state, user) {
	state.lastLoginName = user.screen_name
	state.currentUser = merge(state.currentUser \|\| {}, user)
	},
	clearCurrentUser (state) {
	state.currentUser = false
	state.lastLoginName = false
	},
	beginLogin (state) {
	state.loggingIn = true
	},
	endLogin (state) {
	state.loggingIn = false
	},
	saveFriendIds (state, { id, friendIds }) {
	const user = state.usersObject[id]
	user.friendIds = uniq(concat(user.friendIds, friendIds))
	},
	saveFollowerIds (state, { id, followerIds }) {
	const user = state.usersObject[id]
	user.followerIds = uniq(concat(user.followerIds, followerIds))
	},
	// Because frontend doesn't have a reason to keep these stuff in memory
	// outside of viewing someones user profile.
	clearFriends (state, userId) {
	const user = state.usersObject[userId]
	if (user) {
	set(user, 'friendIds', [])
	}
	},
	clearFollowers (state, userId) {
	const user = state.usersObject[userId]
	if (user) {
	set(user, 'followerIds', [])
	}
	},
	addNewUsers (state, users) {
	each(users, (user) => mergeOrAdd(state.users, state.usersObject, user))
	},
	updateUserRelationship (state, relationships) {
	relationships.forEach((relationship) => {
	const user = state.usersObject[relationship.id]
	if (user) {
	user.follows_you = relationship.followed_by
	user.following = relationship.following
	user.muted = relationship.muting
	user.statusnet_blocking = relationship.blocking
	user.subscribed = relationship.subscribing
	+ user.showing_reblogs = relationship.showing_reblogs
	}
	})
	},
	updateBlocks (state, blockedUsers) {
	// Reset statusnet_blocking of all fetched users
	each(state.users, (user) => { user.statusnet_blocking = false })
	each(blockedUsers, (user) => mergeOrAdd(state.users, state.usersObject, user))
	},
	saveBlockIds (state, blockIds) {
	state.currentUser.blockIds = blockIds
	},
	addBlockId (state, blockId) {
	if (state.currentUser.blockIds.indexOf(blockId) === -1) {
	state.currentUser.blockIds.push(blockId)
	}
	},
	updateMutes (state, mutedUsers) {
	// Reset muted of all fetched users
	each(state.users, (user) => { user.muted = false })
	each(mutedUsers, (user) => mergeOrAdd(state.users, state.usersObject, user))
	},
	saveMuteIds (state, muteIds) {
	state.currentUser.muteIds = muteIds
	},
	addMuteId (state, muteId) {
	if (state.currentUser.muteIds.indexOf(muteId) === -1) {
	state.currentUser.muteIds.push(muteId)
	}
	},
	setPinnedToUser (state, status) {
	const user = state.usersObject[status.user.id]
	const index = user.pinnedStatusIds.indexOf(status.id)
	if (status.pinned && index === -1) {
	user.pinnedStatusIds.push(status.id)
	} else if (!status.pinned && index !== -1) {
	user.pinnedStatusIds.splice(index, 1)
	}
	},
	setUserForStatus (state, status) {
	status.user = state.usersObject[status.user.id]
	},
	setUserForNotification (state, notification) {
	if (notification.type !== 'follow') {
	notification.action.user = state.usersObject[notification.action.user.id]
	}
	notification.from_profile = state.usersObject[notification.from_profile.id]
	},
	setColor (state, { user: { id }, highlighted }) {
	const user = state.usersObject[id]
	set(user, 'highlight', highlighted)
	},
	signUpPending (state) {
	state.signUpPending = true
	state.signUpErrors = []
	},
	signUpSuccess (state) {
	state.signUpPending = false
	},
	signUpFailure (state, errors) {
	state.signUpPending = false
	state.signUpErrors = errors
	}
	}

	export const getters = {
	findUser: state => query => {
	const result = state.usersObject[query]
	// In case it's a screen_name, we can try searching case-insensitive
	if (!result && typeof query === 'string') {
	return state.usersObject[query.toLowerCase()]
	}
	return result
	}
	}

	export const defaultState = {
	loggingIn: false,
	lastLoginName: false,
	currentUser: false,
	users: [],
	usersObject: {},
	signUpPending: false,
	signUpErrors: []
	}

	const users = {
	state: defaultState,
	mutations,
	getters,
	actions: {
	fetchUser (store, id) {
	return store.rootState.api.backendInteractor.fetchUser({ id })
	.then((user) => {
	store.commit('addNewUsers', [user])
	return user
	})
	},
	fetchUserRelationship (store, id) {
	if (store.state.currentUser) {
	store.rootState.api.backendInteractor.fetchUserRelationship({ id })
	.then((relationships) => store.commit('updateUserRelationship', relationships))
	}
	},
	fetchBlocks (store) {
	return store.rootState.api.backendInteractor.fetchBlocks()
	.then((blocks) => {
	store.commit('saveBlockIds', map(blocks, 'id'))
	store.commit('updateBlocks', blocks)
	return blocks
	})
	},
	blockUser (store, id) {
	return blockUser(store, id)
	},
	unblockUser (store, id) {
	return unblockUser(store, id)
	},
	blockUsers (store, ids = []) {
	return Promise.all(ids.map(id => blockUser(store, id)))
	},
	unblockUsers (store, ids = []) {
	return Promise.all(ids.map(id => unblockUser(store, id)))
	},
	fetchMutes (store) {
	return store.rootState.api.backendInteractor.fetchMutes()
	.then((mutes) => {
	store.commit('updateMutes', mutes)
	store.commit('saveMuteIds', map(mutes, 'id'))
	return mutes
	})
	},
	muteUser (store, id) {
	return muteUser(store, id)
	},
	unmuteUser (store, id) {
	return unmuteUser(store, id)
	},
	+ hideReblogs (store, id) {
	+ return hideReblogs(store, id)
	+ },
	+ showReblogs (store, id) {
	+ return showReblogs(store, id)
	+ },
	muteUsers (store, ids = []) {
	return Promise.all(ids.map(id => muteUser(store, id)))
	},
	unmuteUsers (store, ids = []) {
	return Promise.all(ids.map(id => unmuteUser(store, id)))
	},
	fetchFriends ({ rootState, commit }, id) {
	const user = rootState.users.usersObject[id]
	const maxId = last(user.friendIds)
	return rootState.api.backendInteractor.fetchFriends({ id, maxId })
	.then((friends) => {
	commit('addNewUsers', friends)
	commit('saveFriendIds', { id, friendIds: map(friends, 'id') })
	return friends
	})
	},
	fetchFollowers ({ rootState, commit }, id) {
	const user = rootState.users.usersObject[id]
	const maxId = last(user.followerIds)
	return rootState.api.backendInteractor.fetchFollowers({ id, maxId })
	.then((followers) => {
	commit('addNewUsers', followers)
	commit('saveFollowerIds', { id, followerIds: map(followers, 'id') })
	return followers
	})
	},
	clearFriends ({ commit }, userId) {
	commit('clearFriends', userId)
	},
	clearFollowers ({ commit }, userId) {
	commit('clearFollowers', userId)
	},
	subscribeUser ({ rootState, commit }, id) {
	return rootState.api.backendInteractor.subscribeUser(id)
	.then((relationship) => commit('updateUserRelationship', [relationship]))
	},
	unsubscribeUser ({ rootState, commit }, id) {
	return rootState.api.backendInteractor.unsubscribeUser(id)
	.then((relationship) => commit('updateUserRelationship', [relationship]))
	},
	registerPushNotifications (store) {
	const token = store.state.currentUser.credentials
	const vapidPublicKey = store.rootState.instance.vapidPublicKey
	const isEnabled = store.rootState.config.webPushNotifications
	const notificationVisibility = store.rootState.config.notificationVisibility

	registerPushNotifications(isEnabled, vapidPublicKey, token, notificationVisibility)
	},
	unregisterPushNotifications (store) {
	const token = store.state.currentUser.credentials

	unregisterPushNotifications(token)
	},
	addNewUsers ({ commit }, users) {
	commit('addNewUsers', users)
	},
	addNewStatuses (store, { statuses }) {
	const users = map(statuses, 'user')
	const retweetedUsers = compact(map(statuses, 'retweeted_status.user'))
	store.commit('addNewUsers', users)
	store.commit('addNewUsers', retweetedUsers)

	each(statuses, (status) => {
	// Reconnect users to statuses
	store.commit('setUserForStatus', status)
	// Set pinned statuses to user
	store.commit('setPinnedToUser', status)
	})
	each(compact(map(statuses, 'retweeted_status')), (status) => {
	// Reconnect users to retweets
	store.commit('setUserForStatus', status)
	// Set pinned retweets to user
	store.commit('setPinnedToUser', status)
	})
	},
	addNewNotifications (store, { notifications }) {
	const users = map(notifications, 'from_profile')
	const notificationIds = notifications.map(_ => _.id)
	store.commit('addNewUsers', users)

	const notificationsObject = store.rootState.statuses.notifications.idStore
	const relevantNotifications = Object.entries(notificationsObject)
	.filter(([k, val]) => notificationIds.includes(k))
	.map(([k, val]) => val)

	// Reconnect users to notifications
	each(relevantNotifications, (notification) => {
	store.commit('setUserForNotification', notification)
	})
	},
	searchUsers (store, query) {
	return store.rootState.api.backendInteractor.searchUsers(query)
	.then((users) => {
	store.commit('addNewUsers', users)
	return users
	})
	},
	async signUp (store, userInfo) {
	store.commit('signUpPending')

	let rootState = store.rootState

	try {
	let data = await rootState.api.backendInteractor.register(userInfo)
	store.commit('signUpSuccess')
	store.commit('setToken', data.access_token)
	store.dispatch('loginUser', data.access_token)
	} catch (e) {
	let errors = e.message
	store.commit('signUpFailure', errors)
	throw e
	}
	},
	async getCaptcha (store) {
	return store.rootState.api.backendInteractor.getCaptcha()
	},

	logout (store) {
	const { oauth, instance } = store.rootState

	const data = {
	...oauth,
	commit: store.commit,
	instance: instance.server
	}

	return oauthApi.getOrCreateApp(data)
	.then((app) => {
	const params = {
	app,
	instance: data.instance,
	token: oauth.userToken
	}

	return oauthApi.revokeToken(params)
	})
	.then(() => {
	store.commit('clearCurrentUser')
	store.dispatch('disconnectFromSocket')
	store.commit('clearToken')
	store.dispatch('stopFetching', 'friends')
	store.commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
	store.dispatch('stopFetching', 'notifications')
	store.commit('clearNotifications')
	store.commit('resetStatuses')
	})
	},
	loginUser (store, accessToken) {
	return new Promise((resolve, reject) => {
	const commit = store.commit
	commit('beginLogin')
	store.rootState.api.backendInteractor.verifyCredentials(accessToken)
	.then((data) => {
	if (!data.error) {
	const user = data
	// user.credentials = userCredentials
	user.credentials = accessToken
	user.blockIds = []
	user.muteIds = []
	commit('setCurrentUser', user)
	commit('addNewUsers', [user])

	getNotificationPermission()
	.then(permission => commit('setNotificationPermission', permission))

	// Set our new backend interactor
	commit('setBackendInteractor', backendInteractorService(accessToken))

	if (user.token) {
	store.dispatch('setWsToken', user.token)

	// Initialize the chat socket.
	store.dispatch('initializeSocket')
	}

	// Start getting fresh posts.
	store.dispatch('startFetchingTimeline', { timeline: 'friends' })

	// Start fetching notifications
	store.dispatch('startFetchingNotifications')

	// Get user mutes
	store.dispatch('fetchMutes')

	// Fetch our friends
	store.rootState.api.backendInteractor.fetchFriends({ id: user.id })
	.then((friends) => commit('addNewUsers', friends))
	} else {
	const response = data.error
	// Authentication failed
	commit('endLogin')
	if (response.status === 401) {
	reject(new Error('Wrong username or password'))
	} else {
	reject(new Error('An error occurred, please try again'))
	}
	}
	commit('endLogin')
	resolve()
	})
	.catch((error) => {
	console.log(error)
	commit('endLogin')
	reject(new Error('Failed to connect to server, try again'))
	})
	})
	}
	}
	}

	export default users
	diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
	index 887d7d7aab..61cd4f16f9 100644
	--- a/src/services/api/api.service.js
	+++ b/src/services/api/api.service.js
	@@ -1,984 +1,990 @@
	import { each, map, concat, last } 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_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 ACTIVATION_STATUS_URL = screenName => `/api/pleroma/admin/users/${screenName}/activation_status`
	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/profile/mfa'
	const MFA_BACKUP_CODES_URL = '/api/pleroma/profile/mfa/backup_codes'

	const MFA_SETUP_OTP_URL = '/api/pleroma/profile/mfa/setup/totp'
	const MFA_CONFIRM_OTP_URL = '/api/pleroma/profile/mfa/confirm/totp'
	const MFA_DISABLE_OTP_URL = '/api/pleroma/profile/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 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 }) => {
	+const followUser = ({ id, credentials, ...options }) => {
	let url = MASTODON_FOLLOW_URL(id)
	+ const form = {}
	+ if (options.reblogs !== undefined) { form['reblogs'] = options.reblogs }
	return fetch(url, {
	- headers: authHeaders(credentials),
	+ 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 setActivationStatus = ({ status, credentials, ...user }) => {
	const screenName = user.screen_name
	const body = {
	status: status
	}

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

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

	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
	}) => {
	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])
	}

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

	const 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 timeline', data)
	})
	.then((data) => data.json())
	.then((data) => data.map(isNotifications ? parseNotification : parseStatus))
	}

	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 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 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 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,
	setActivationStatus,
	register,
	getCaptcha,
	updateAvatar,
	updateBg,
	updateProfile,
	updateBanner,
	importBlocks,
	importFollows,
	deleteAccount,
	changePassword,
	settingsMFA,
	mfaDisableOTP,
	generateMfaBackupCodes,
	mfaSetupOTP,
	mfaConfirmOTP,
	fetchFollowRequests,
	approveUser,
	denyUser,
	suggestions,
	markNotificationsAsSeen,
	vote,
	fetchPoll,
	fetchFavoritedByUsers,
	fetchRebloggedByUsers,
	reportUser,
	updateNotificationSettings,
	search2,
	searchUsers
	}

	export default apiService
	diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
	index 3c44a10cb7..cbf48ee418 100644
	--- a/src/services/backend_interactor_service/backend_interactor_service.js
	+++ b/src/services/backend_interactor_service/backend_interactor_service.js
	@@ -1,224 +1,224 @@
	import apiService from '../api/api.service.js'
	import timelineFetcherService from '../timeline_fetcher/timeline_fetcher.service.js'
	import notificationsFetcher from '../notifications_fetcher/notifications_fetcher.service.js'

	const backendInteractorService = credentials => {
	const fetchStatus = ({ id }) => {
	return apiService.fetchStatus({ id, credentials })
	}

	const fetchConversation = ({ id }) => {
	return apiService.fetchConversation({ id, credentials })
	}

	const fetchFriends = ({ id, maxId, sinceId, limit }) => {
	return apiService.fetchFriends({ id, maxId, sinceId, limit, credentials })
	}

	const exportFriends = ({ id }) => {
	return apiService.exportFriends({ id, credentials })
	}

	const fetchFollowers = ({ id, maxId, sinceId, limit }) => {
	return apiService.fetchFollowers({ id, maxId, sinceId, limit, credentials })
	}

	const fetchUser = ({ id }) => {
	return apiService.fetchUser({ id, credentials })
	}

	const fetchUserRelationship = ({ id }) => {
	return apiService.fetchUserRelationship({ id, credentials })
	}

	- const followUser = (id) => {
	- return apiService.followUser({ credentials, id })
	+ const followUser = ({ id, reblogs }) => {
	+ return apiService.followUser({ credentials, id, reblogs })
	}

	const unfollowUser = (id) => {
	return apiService.unfollowUser({ credentials, id })
	}

	const blockUser = (id) => {
	return apiService.blockUser({ credentials, id })
	}

	const unblockUser = (id) => {
	return apiService.unblockUser({ credentials, id })
	}

	const approveUser = (id) => {
	return apiService.approveUser({ credentials, id })
	}

	const denyUser = (id) => {
	return apiService.denyUser({ credentials, id })
	}

	const startFetchingTimeline = ({ timeline, store, userId = false, tag }) => {
	return timelineFetcherService.startFetching({ timeline, store, credentials, userId, tag })
	}

	const startFetchingNotifications = ({ store }) => {
	return notificationsFetcher.startFetching({ store, credentials })
	}

	// eslint-disable-next-line camelcase
	const tagUser = ({ screen_name }, tag) => {
	return apiService.tagUser({ screen_name, tag, credentials })
	}

	// eslint-disable-next-line camelcase
	const untagUser = ({ screen_name }, tag) => {
	return apiService.untagUser({ screen_name, tag, credentials })
	}

	// eslint-disable-next-line camelcase
	const addRight = ({ screen_name }, right) => {
	return apiService.addRight({ screen_name, right, credentials })
	}

	// eslint-disable-next-line camelcase
	const deleteRight = ({ screen_name }, right) => {
	return apiService.deleteRight({ screen_name, right, credentials })
	}

	// eslint-disable-next-line camelcase
	const setActivationStatus = ({ screen_name }, status) => {
	return apiService.setActivationStatus({ screen_name, status, credentials })
	}

	// eslint-disable-next-line camelcase
	const deleteUser = ({ screen_name }) => {
	return apiService.deleteUser({ screen_name, credentials })
	}

	const vote = (pollId, choices) => {
	return apiService.vote({ credentials, pollId, choices })
	}

	const fetchPoll = (pollId) => {
	return apiService.fetchPoll({ credentials, pollId })
	}

	const updateNotificationSettings = ({ settings }) => {
	return apiService.updateNotificationSettings({ credentials, settings })
	}

	const fetchMutes = () => apiService.fetchMutes({ credentials })
	const muteUser = (id) => apiService.muteUser({ credentials, id })
	const unmuteUser = (id) => apiService.unmuteUser({ credentials, id })
	const subscribeUser = (id) => apiService.subscribeUser({ credentials, id })
	const unsubscribeUser = (id) => apiService.unsubscribeUser({ credentials, id })
	const fetchBlocks = () => apiService.fetchBlocks({ credentials })
	const fetchFollowRequests = () => apiService.fetchFollowRequests({ credentials })
	const fetchOAuthTokens = () => apiService.fetchOAuthTokens({ credentials })
	const revokeOAuthToken = (id) => apiService.revokeOAuthToken({ id, credentials })
	const fetchPinnedStatuses = (id) => apiService.fetchPinnedStatuses({ credentials, id })
	const pinOwnStatus = (id) => apiService.pinOwnStatus({ credentials, id })
	const unpinOwnStatus = (id) => apiService.unpinOwnStatus({ credentials, id })
	const muteConversation = (id) => apiService.muteConversation({ credentials, id })
	const unmuteConversation = (id) => apiService.unmuteConversation({ credentials, id })

	const getCaptcha = () => apiService.getCaptcha()
	const register = (params) => apiService.register({ credentials, params })
	const updateAvatar = ({ avatar }) => apiService.updateAvatar({ credentials, avatar })
	const updateBg = ({ background }) => apiService.updateBg({ credentials, background })
	const updateBanner = ({ banner }) => apiService.updateBanner({ credentials, banner })
	const updateProfile = ({ params }) => apiService.updateProfile({ credentials, params })

	const importBlocks = (file) => apiService.importBlocks({ file, credentials })
	const importFollows = (file) => apiService.importFollows({ file, credentials })

	const deleteAccount = ({ password }) => apiService.deleteAccount({ credentials, password })
	const changePassword = ({ password, newPassword, newPasswordConfirmation }) =>
	apiService.changePassword({ credentials, password, newPassword, newPasswordConfirmation })

	const fetchSettingsMFA = () => apiService.settingsMFA({ credentials })
	const generateMfaBackupCodes = () => apiService.generateMfaBackupCodes({ credentials })
	const mfaSetupOTP = () => apiService.mfaSetupOTP({ credentials })
	const mfaConfirmOTP = ({ password, token }) => apiService.mfaConfirmOTP({ credentials, password, token })
	const mfaDisableOTP = ({ password }) => apiService.mfaDisableOTP({ credentials, password })

	const fetchFavoritedByUsers = (id) => apiService.fetchFavoritedByUsers({ id })
	const fetchRebloggedByUsers = (id) => apiService.fetchRebloggedByUsers({ id })
	const reportUser = (params) => apiService.reportUser({ credentials, ...params })

	const favorite = (id) => apiService.favorite({ id, credentials })
	const unfavorite = (id) => apiService.unfavorite({ id, credentials })
	const retweet = (id) => apiService.retweet({ id, credentials })
	const unretweet = (id) => apiService.unretweet({ id, credentials })
	const search2 = ({ q, resolve, limit, offset, following }) =>
	apiService.search2({ credentials, q, resolve, limit, offset, following })
	const searchUsers = (query) => apiService.searchUsers({ query, credentials })

	const backendInteractorServiceInstance = {
	fetchStatus,
	fetchConversation,
	fetchFriends,
	exportFriends,
	fetchFollowers,
	followUser,
	unfollowUser,
	blockUser,
	unblockUser,
	fetchUser,
	fetchUserRelationship,
	verifyCredentials: apiService.verifyCredentials,
	startFetchingTimeline,
	startFetchingNotifications,
	fetchMutes,
	muteUser,
	unmuteUser,
	subscribeUser,
	unsubscribeUser,
	fetchBlocks,
	fetchOAuthTokens,
	revokeOAuthToken,
	fetchPinnedStatuses,
	pinOwnStatus,
	unpinOwnStatus,
	muteConversation,
	unmuteConversation,
	tagUser,
	untagUser,
	addRight,
	deleteRight,
	deleteUser,
	setActivationStatus,
	register,
	getCaptcha,
	updateAvatar,
	updateBg,
	updateBanner,
	updateProfile,
	importBlocks,
	importFollows,
	deleteAccount,
	changePassword,
	fetchSettingsMFA,
	generateMfaBackupCodes,
	mfaSetupOTP,
	mfaConfirmOTP,
	mfaDisableOTP,
	fetchFollowRequests,
	approveUser,
	denyUser,
	vote,
	fetchPoll,
	fetchFavoritedByUsers,
	fetchRebloggedByUsers,
	reportUser,
	favorite,
	unfavorite,
	retweet,
	unretweet,
	updateNotificationSettings,
	search2,
	searchUsers
	}

	return backendInteractorServiceInstance
	}

	export default backendInteractorService
	diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
	index 67664af816..5f45660d6b 100644
	--- a/src/services/entity_normalizer/entity_normalizer.service.js
	+++ b/src/services/entity_normalizer/entity_normalizer.service.js
	@@ -1,359 +1,360 @@
	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(data.display_name, data.emojis)

	output.description = data.note
	output.description_html = addEmojis(data.note, 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.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
	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
	} 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(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'
	? null
	: parseStatus(data.status)
	output.action = output.status // TODO: Refactor, this is unneeded
	output.from_profile = parseUser(data.account)
	} 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/follow_manipulate/follow_manipulate.js b/src/services/follow_manipulate/follow_manipulate.js
	index d82ce59348..598cb5f726 100644
	--- a/src/services/follow_manipulate/follow_manipulate.js
	+++ b/src/services/follow_manipulate/follow_manipulate.js
	@@ -1,49 +1,49 @@
	const fetchUser = (attempt, user, store) => new Promise((resolve, reject) => {
	setTimeout(() => {
	store.state.api.backendInteractor.fetchUser({ id: user.id })
	.then((user) => store.commit('addNewUsers', [user]))
	.then(() => resolve([user.following, user.requested, user.locked, attempt]))
	.catch((e) => reject(e))
	}, 500)
	}).then(([following, sent, locked, attempt]) => {
	if (!following && !(locked && sent) && attempt <= 3) {
	// If we BE reports that we still not following that user - retry,
	// increment attempts by one
	fetchUser(++attempt, user, store)
	}
	})

	export const requestFollow = (user, store) => new Promise((resolve, reject) => {
	- store.state.api.backendInteractor.followUser(user.id)
	+ store.state.api.backendInteractor.followUser({ id: user.id })
	.then((updated) => {
	store.commit('updateUserRelationship', [updated])

	if (updated.following \|\| (user.locked && user.requested)) {
	// If we get result immediately or the account is locked, just stop.
	resolve()
	return
	}

	// But usually we don't get result immediately, so we ask server
	// for updated user profile to confirm if we are following them
	// Sometimes it takes several tries. Sometimes we end up not following
	// user anyway, probably because they locked themselves and we
	// don't know that yet.
	// Recursive Promise, it will call itself up to 3 times.

	return fetchUser(1, user, store)
	.then(() => {
	resolve()
	})
	})
	})

	export const requestUnfollow = (user, store) => new Promise((resolve, reject) => {
	store.state.api.backendInteractor.unfollowUser(user.id)
	.then((updated) => {
	store.commit('updateUserRelationship', [updated])
	resolve({
	updated
	})
	})
	})
	diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
	index b6c4cf808a..4700802615 100644
	--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
	+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
	@@ -1,68 +1,67 @@
	import apiService from '../api/api.service.js'

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

	store.dispatch('addNewNotifications', { notifications, older })
	}

	const fetchAndUpdate = ({ store, credentials, older = false }) => {
	const args = { credentials }
	+ const { getters } = store
	const rootState = store.rootState \|\| store.state
	const timelineData = rootState.statuses.notifications
	- const hideMutedPosts = typeof rootState.config.hideMutedPosts === 'undefined'
	- ? rootState.instance.hideMutedPosts
	- : rootState.config.hideMutedPosts
	+ const hideMutedPosts = getters.mergedConfig.hideMutedPosts

	args['withMuted'] = !hideMutedPosts

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

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

	return result
	}
	}

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

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

	const notificationsFetcher = {
	fetchAndUpdate,
	startFetching
	}

	export default notificationsFetcher
	diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
	index f72688f854..9eb30c2dd2 100644
	--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
	+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
	@@ -1,62 +1,70 @@
	import { camelCase } from 'lodash'

	import apiService from '../api/api.service.js'

	const update = ({ store, statuses, timeline, showImmediately, userId }) => {
	const ccTimeline = camelCase(timeline)

	store.dispatch('setError', { value: false })

	store.dispatch('addNewStatuses', {
	timeline: ccTimeline,
	userId,
	statuses,
	showImmediately
	})
	}

	-const fetchAndUpdate = ({ store, credentials, timeline = 'friends', older = false, showImmediately = false, userId = false, tag = false, until }) => {
	+const fetchAndUpdate = ({
	+ store,
	+ credentials,
	+ timeline = 'friends',
	+ older = false,
	+ showImmediately = false,
	+ userId = false,
	+ tag = false,
	+ until
	+}) => {
	const args = { timeline, credentials }
	const rootState = store.rootState \|\| store.state
	+ const { getters } = store
	const timelineData = rootState.statuses.timelines[camelCase(timeline)]
	- const hideMutedPosts = typeof rootState.config.hideMutedPosts === 'undefined'
	- ? rootState.instance.hideMutedPosts
	- : rootState.config.hideMutedPosts
	+ const hideMutedPosts = getters.mergedConfig.hideMutedPosts

	if (older) {
	args['until'] = until \|\| timelineData.minId
	} else {
	args['since'] = timelineData.maxId
	}

	args['userId'] = userId
	args['tag'] = tag
	args['withMuted'] = !hideMutedPosts

	const numStatusesBeforeFetch = timelineData.statuses.length

	return apiService.fetchTimeline(args)
	.then((statuses) => {
	if (!older && statuses.length >= 20 && !timelineData.loading && numStatusesBeforeFetch > 0) {
	store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
	}
	update({ store, statuses, timeline, showImmediately, userId })
	return statuses
	}, () => store.dispatch('setError', { value: true }))
	}

	const startFetching = ({ timeline = 'friends', credentials, store, userId = false, tag = false }) => {
	const rootState = store.rootState \|\| store.state
	const timelineData = rootState.statuses.timelines[camelCase(timeline)]
	const showImmediately = timelineData.visibleStatuses.length === 0
	timelineData.userId = userId
	fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, tag })
	const boundFetchAndUpdate = () => fetchAndUpdate({ timeline, credentials, store, userId, tag })
	return setInterval(boundFetchAndUpdate, 10000)
	}
	const timelineFetcher = {
	fetchAndUpdate,
	startFetching
	}

	export default timelineFetcher
	diff --git a/test/unit/specs/components/emoji_input.spec.js b/test/unit/specs/components/emoji_input.spec.js
	index 368d623d9f..b1b988021e 100644
	--- a/test/unit/specs/components/emoji_input.spec.js
	+++ b/test/unit/specs/components/emoji_input.spec.js
	@@ -1,131 +1,131 @@
	import { shallowMount, createLocalVue } from '@vue/test-utils'
	import EmojiInput from 'src/components/emoji_input/emoji_input.vue'

	const generateInput = (value, padEmoji = true) => {
	const localVue = createLocalVue()
	localVue.directive('click-outside', () => {})
	const wrapper = shallowMount(EmojiInput, {
	propsData: {
	suggest: () => [],
	enableEmojiPicker: true,
	value
	},
	mocks: {
	$store: {
	- state: {
	- config: {
	+ getters: {
	+ mergedConfig: {
	padEmoji
	}
	}
	}
	},
	slots: {
	default: '<input />'
	},
	localVue
	})
	return [wrapper, localVue]
	}

	describe('EmojiInput', () => {
	describe('insertion mechanism', () => {
	it('inserts string at the end with trailing space', () => {
	const initialString = 'Testing'
	const [wrapper] = generateInput(initialString)
	const input = wrapper.find('input')
	input.setValue(initialString)
	wrapper.setData({ caret: initialString.length })
	wrapper.vm.insert({ insertion: '(test)', keepOpen: false })
	expect(wrapper.emitted().input[0][0]).to.eql('Testing (test) ')
	})

	it('inserts string at the end with trailing space (source has a trailing space)', () => {
	const initialString = 'Testing '
	const [wrapper] = generateInput(initialString)
	const input = wrapper.find('input')
	input.setValue(initialString)
	wrapper.setData({ caret: initialString.length })
	wrapper.vm.insert({ insertion: '(test)', keepOpen: false })
	expect(wrapper.emitted().input[0][0]).to.eql('Testing (test) ')
	})

	it('inserts string at the begginning without leading space', () => {
	const initialString = 'Testing'
	const [wrapper] = generateInput(initialString)
	const input = wrapper.find('input')
	input.setValue(initialString)
	wrapper.setData({ caret: 0 })
	wrapper.vm.insert({ insertion: '(test)', keepOpen: false })
	expect(wrapper.emitted().input[0][0]).to.eql('(test) Testing')
	})

	it('inserts string between words without creating extra spaces', () => {
	const initialString = 'Spurdo Sparde'
	const [wrapper] = generateInput(initialString)
	const input = wrapper.find('input')
	input.setValue(initialString)
	wrapper.setData({ caret: 6 })
	wrapper.vm.insert({ insertion: ':ebin:', keepOpen: false })
	expect(wrapper.emitted().input[0][0]).to.eql('Spurdo :ebin: Sparde')
	})

	it('inserts string between words without creating extra spaces (other caret)', () => {
	const initialString = 'Spurdo Sparde'
	const [wrapper] = generateInput(initialString)
	const input = wrapper.find('input')
	input.setValue(initialString)
	wrapper.setData({ caret: 7 })
	wrapper.vm.insert({ insertion: ':ebin:', keepOpen: false })
	expect(wrapper.emitted().input[0][0]).to.eql('Spurdo :ebin: Sparde')
	})

	it('inserts string without any padding if padEmoji setting is set to false', () => {
	const initialString = 'Eat some spam!'
	const [wrapper] = generateInput(initialString, false)
	const input = wrapper.find('input')
	input.setValue(initialString)
	wrapper.setData({ caret: initialString.length, keepOpen: false })
	wrapper.vm.insert({ insertion: ':spam:' })
	expect(wrapper.emitted().input[0][0]).to.eql('Eat some spam!:spam:')
	})

	it('correctly sets caret after insertion at beginning', (done) => {
	const initialString = '1234'
	const [wrapper, vue] = generateInput(initialString)
	const input = wrapper.find('input')
	input.setValue(initialString)
	wrapper.setData({ caret: 0 })
	wrapper.vm.insert({ insertion: '1234', keepOpen: false })
	vue.nextTick(() => {
	expect(wrapper.vm.caret).to.eql(5)
	done()
	})
	})

	it('correctly sets caret after insertion at end', (done) => {
	const initialString = '1234'
	const [wrapper, vue] = generateInput(initialString)
	const input = wrapper.find('input')
	input.setValue(initialString)
	wrapper.setData({ caret: initialString.length })
	wrapper.vm.insert({ insertion: '1234', keepOpen: false })
	vue.nextTick(() => {
	expect(wrapper.vm.caret).to.eql(10)
	done()
	})
	})

	it('correctly sets caret after insertion if padEmoji setting is set to false', (done) => {
	const initialString = '1234'
	const [wrapper, vue] = generateInput(initialString, false)
	const input = wrapper.find('input')
	input.setValue(initialString)
	wrapper.setData({ caret: initialString.length })
	wrapper.vm.insert({ insertion: '1234', keepOpen: false })
	vue.nextTick(() => {
	expect(wrapper.vm.caret).to.eql(8)
	done()
	})
	})
	})
	})
	diff --git a/test/unit/specs/components/user_profile.spec.js b/test/unit/specs/components/user_profile.spec.js
	index 6de9491a36..1b6a47d7aa 100644
	--- a/test/unit/specs/components/user_profile.spec.js
	+++ b/test/unit/specs/components/user_profile.spec.js
	@@ -1,204 +1,204 @@
	import { mount, createLocalVue } from '@vue/test-utils'
	import Vuex from 'vuex'
	import UserProfile from 'src/components/user_profile/user_profile.vue'
	import backendInteractorService from 'src/services/backend_interactor_service/backend_interactor_service.js'
	import { getters } from 'src/modules/users.js'

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

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

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

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

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

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

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

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

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

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

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

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

File Metadata

Mime Type: text/x-diff
Expires: Sat, Oct 31, 8:30 AM (18 h, 37 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1801189
Default Alt Text: (547 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions