No OneTemporary
Actions

Authored By

Unknown

Size

265 KB

Referenced Files

None

Subscribers

None

View Options

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

	diff --git a/index.html b/index.html
	index 4af84a5940..a02939f7ea 100644
	--- a/index.html
	+++ b/index.html
	@@ -1,15 +1,16 @@
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
	<!--server-generated-meta-->
	<link rel="icon" type="image/png" href="/favicon.png">
	</head>
	<body class="hidden">
	<noscript>To use Pleroma, please enable JavaScript.</noscript>
	<div id="app"></div>
	+ <div id="modal"></div>
	<!-- built files will be auto injected -->
	<div id="popovers" />
	</body>
	</html>
	diff --git a/src/App.vue b/src/App.vue
	index 23a388a629..fe214ce718 100644
	--- a/src/App.vue
	+++ b/src/App.vue
	@@ -1,80 +1,79 @@
	<template>
	<div
	id="app-loaded"
	:style="bgStyle"
	>
	<div
	id="app_bg_wrapper"
	class="app-bg-wrapper"
	/>
	<MobileNav v-if="layoutType === 'mobile'" />
	<DesktopNav
	v-else
	:class="navClasses"
	/>
	<Notifications v-if="currentUser" />
	<div
	id="content"
	class="app-layout container"
	:class="classes"
	>
	<div class="underlay" />
	<div
	id="sidebar"
	class="column -scrollable"
	:class="{ '-show-scrollbar': showScrollbars }"
	>
	<user-panel />
	<template v-if="layoutType !== 'mobile'">
	<nav-panel />
	<instance-specific-panel v-if="showInstanceSpecificPanel" />
	<features-panel v-if="!currentUser && showFeaturesPanel" />
	<who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
	<div id="notifs-sidebar" />
	</template>
	</div>
	<main
	id="main-scroller"
	class="column main"
	:class="{ '-full-height': isChats \|\| isListEdit }"
	>
	<div
	v-if="!currentUser"
	class="login-hint panel panel-default"
	>
	<router-link
	:to="{ name: 'login' }"
	class="panel-body"
	>
	{{ $t("login.hint") }}
	</router-link>
	</div>
	<router-view />
	</main>
	<div
	id="notifs-column"
	class="column -scrollable"
	:class="{ '-show-scrollbar': showScrollbars }"
	/>
	</div>
	<MediaModal />
	<shout-panel
	v-if="currentUser && shout && !hideShoutbox"
	:floating="true"
	class="floating-shout mobile-hidden"
	:class="{ '-left': shoutboxPosition }"
	/>
	<MobilePostStatusButton />
	<UserReportingModal />
	<PostStatusModal />
	<EditStatusModal v-if="editingAvailable" />
	<StatusHistoryModal v-if="editingAvailable" />
	<SettingsModal />
	<UpdateNotification />
	- <div id="modal" />
	<GlobalNoticeList />
	</div>
	</template>

	<script src="./App.js"></script>
	<style lang="scss" src="./App.scss"></style>
	diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
	index c23407f90e..acd93e0650 100644
	--- a/src/components/account_actions/account_actions.js
	+++ b/src/components/account_actions/account_actions.js
	@@ -1,59 +1,98 @@
	import { mapState } from 'vuex'
	import ProgressButton from '../progress_button/progress_button.vue'
	import Popover from '../popover/popover.vue'
	import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue'
	+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faEllipsisV
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faEllipsisV
	)

	const AccountActions = {
	props: [
	'user', 'relationship'
	],
	data () {
	- return { }
	+ return {
	+ showingConfirmBlock: false,
	+ showingConfirmRemoveFollower: false
	+ }
	},
	components: {
	ProgressButton,
	Popover,
	- UserListMenu
	+ UserListMenu,
	+ ConfirmModal
	},
	methods: {
	+ showConfirmBlock () {
	+ this.showingConfirmBlock = true
	+ },
	+ hideConfirmBlock () {
	+ this.showingConfirmBlock = false
	+ },
	+ showConfirmRemoveUserFromFollowers () {
	+ this.showingConfirmRemoveFollower = true
	+ },
	+ hideConfirmRemoveUserFromFollowers () {
	+ this.showingConfirmRemoveFollower = false
	+ },
	showRepeats () {
	this.$store.dispatch('showReblogs', this.user.id)
	},
	hideRepeats () {
	this.$store.dispatch('hideReblogs', this.user.id)
	},
	blockUser () {
	+ if (!this.shouldConfirmBlock) {
	+ this.doBlockUser()
	+ } else {
	+ this.showConfirmBlock()
	+ }
	+ },
	+ doBlockUser () {
	this.$store.dispatch('blockUser', this.user.id)
	+ this.hideConfirmBlock()
	},
	unblockUser () {
	this.$store.dispatch('unblockUser', this.user.id)
	},
	removeUserFromFollowers () {
	+ if (!this.shouldConfirmRemoveUserFromFollowers) {
	+ this.doRemoveUserFromFollowers()
	+ } else {
	+ this.showConfirmRemoveUserFromFollowers()
	+ }
	+ },
	+ doRemoveUserFromFollowers () {
	this.$store.dispatch('removeUserFromFollowers', this.user.id)
	+ this.hideConfirmRemoveUserFromFollowers()
	},
	reportUser () {
	this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
	},
	openChat () {
	this.$router.push({
	name: 'chat',
	params: { username: this.$store.state.users.currentUser.screen_name, recipient_id: this.user.id }
	})
	}
	},
	computed: {
	+ shouldConfirmBlock () {
	+ return this.$store.getters.mergedConfig.modalOnBlock
	+ },
	+ shouldConfirmRemoveUserFromFollowers () {
	+ return this.$store.getters.mergedConfig.modalOnRemoveUserFromFollowers
	+ },
	...mapState({
	pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
	})
	}
	}

	export default AccountActions
	diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
	index 973a5935c6..ce19291a1d 100644
	--- a/src/components/account_actions/account_actions.vue
	+++ b/src/components/account_actions/account_actions.vue
	@@ -1,98 +1,140 @@
	<template>
	<div class="AccountActions">
	<Popover
	trigger="click"
	placement="bottom"
	:bound-to="{ x: 'container' }"
	remove-padding
	>
	<template #content>
	<div class="dropdown-menu">
	<template v-if="relationship.following">
	<button
	v-if="relationship.showing_reblogs"
	class="btn button-default dropdown-item"
	@click="hideRepeats"
	>
	{{ $t('user_card.hide_repeats') }}
	</button>
	<button
	v-if="!relationship.showing_reblogs"
	class="btn button-default dropdown-item"
	@click="showRepeats"
	>
	{{ $t('user_card.show_repeats') }}
	</button>
	<div
	role="separator"
	class="dropdown-divider"
	/>
	</template>
	<UserListMenu :user="user" />
	<button
	v-if="relationship.followed_by"
	class="btn button-default btn-block dropdown-item"
	@click="removeUserFromFollowers"
	>
	{{ $t('user_card.remove_follower') }}
	</button>
	<button
	v-if="relationship.blocking"
	class="btn button-default btn-block dropdown-item"
	@click="unblockUser"
	>
	{{ $t('user_card.unblock') }}
	</button>
	<button
	v-else
	class="btn button-default btn-block dropdown-item"
	@click="blockUser"
	>
	{{ $t('user_card.block') }}
	</button>
	<button
	class="btn button-default btn-block dropdown-item"
	@click="reportUser"
	>
	{{ $t('user_card.report') }}
	</button>
	<button
	v-if="pleromaChatMessagesAvailable"
	class="btn button-default btn-block dropdown-item"
	@click="openChat"
	>
	{{ $t('user_card.message') }}
	</button>
	</div>
	</template>
	<template #trigger>
	<button class="button-unstyled ellipsis-button">
	<FAIcon
	class="icon"
	icon="ellipsis-v"
	/>
	</button>
	</template>
	</Popover>
	+ <teleport to="#modal">
	+ <confirm-modal
	+ v-if="showingConfirmBlock"
	+ :title="$t('user_card.block_confirm_title')"
	+ :confirm-text="$t('user_card.block_confirm_accept_button')"
	+ :cancel-text="$t('user_card.block_confirm_cancel_button')"
	+ @accepted="doBlockUser"
	+ @cancelled="hideConfirmBlock"
	+ >
	+ <i18n-t
	+ keypath="user_card.block_confirm"
	+ tag="span"
	+ >
	+ <template #user>
	+ <span
	+ v-text="user.screen_name_ui"
	+ />
	+ </template>
	+ </i18n-t>
	+ </confirm-modal>
	+ </teleport>
	+ <teleport to="#modal">
	+ <confirm-modal
	+ v-if="showingConfirmRemoveFollower"
	+ :title="$t('user_card.remove_follower_confirm_title')"
	+ :confirm-text="$t('user_card.remove_follower_confirm_accept_button')"
	+ :cancel-text="$t('user_card.remove_follower_confirm_cancel_button')"
	+ @accepted="doRemoveUserFromFollowers"
	+ @cancelled="hideConfirmRemoveUserFromFollowers"
	+ >
	+ <i18n-t
	+ keypath="user_card.remove_follower_confirm"
	+ tag="span"
	+ >
	+ <template #user>
	+ <span
	+ v-text="user.screen_name_ui"
	+ />
	+ </template>
	+ </i18n-t>
	+ </confirm-modal>
	+ </teleport>
	</div>
	</template>

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

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

	.AccountActions {
	.ellipsis-button {
	width: 2.5em;
	margin: -0.5em 0;
	padding: 0.5em 0;
	text-align: center;

	&:not(:hover) .icon {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	}
	}
	</style>
	diff --git a/src/components/confirm_modal/confirm_modal.js b/src/components/confirm_modal/confirm_modal.js
	new file mode 100644
	index 0000000000..96ddc118fd
	--- /dev/null
	+++ b/src/components/confirm_modal/confirm_modal.js
	@@ -0,0 +1,37 @@
	+import DialogModal from '../dialog_modal/dialog_modal.vue'
	+
	+/**
	+ * This component emits the following events:
	+ * cancelled, emitted when the action should not be performed;
	+ * accepted, emitted when the action should be performed;
	+ *
	+ * The caller should close this dialog after receiving any of the two events.
	+ */
	+const ConfirmModal = {
	+ components: {
	+ DialogModal
	+ },
	+ props: {
	+ title: {
	+ type: String
	+ },
	+ cancelText: {
	+ type: String
	+ },
	+ confirmText: {
	+ type: String
	+ }
	+ },
	+ computed: {
	+ },
	+ methods: {
	+ onCancel () {
	+ this.$emit('cancelled')
	+ },
	+ onAccept () {
	+ this.$emit('accepted')
	+ }
	+ }
	+}
	+
	+export default ConfirmModal
	diff --git a/src/components/confirm_modal/confirm_modal.vue b/src/components/confirm_modal/confirm_modal.vue
	new file mode 100644
	index 0000000000..3b98174aa9
	--- /dev/null
	+++ b/src/components/confirm_modal/confirm_modal.vue
	@@ -0,0 +1,29 @@
	+<template>
	+ <dialog-modal
	+ v-body-scroll-lock="true"
	+ class="confirm-modal"
	+ :on-cancel="onCancel"
	+ >
	+ <template #header>
	+ <span v-text="title" />
	+ </template>
	+
	+ <slot />
	+
	+ <template #footer>
	+ <button
	+ class="btn button-default"
	+ @click.prevent="onAccept"
	+ v-text="confirmText"
	+ />
	+
	+ <button
	+ class="btn button-default"
	+ @click.prevent="onCancel"
	+ v-text="cancelText"
	+ />
	+ </template>
	+ </dialog-modal>
	+</template>
	+
	+<script src="./confirm_modal.js"></script>
	diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
	index 08c0e44e25..745b1a8158 100644
	--- a/src/components/desktop_nav/desktop_nav.js
	+++ b/src/components/desktop_nav/desktop_nav.js
	@@ -1,93 +1,113 @@
	import SearchBar from 'components/search_bar/search_bar.vue'
	+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faSignInAlt,
	faSignOutAlt,
	faHome,
	faComments,
	faBell,
	faUserPlus,
	faBullhorn,
	faSearch,
	faTachometerAlt,
	faCog,
	faInfoCircle
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faSignInAlt,
	faSignOutAlt,
	faHome,
	faComments,
	faBell,
	faUserPlus,
	faBullhorn,
	faSearch,
	faTachometerAlt,
	faCog,
	faInfoCircle
	)

	export default {
	components: {
	- SearchBar
	+ SearchBar,
	+ ConfirmModal
	},
	data: () => ({
	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')
	- )
	+ ),
	+ showingConfirmLogout: false
	}),
	computed: {
	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 },
	sitename () { return this.$store.state.instance.name },
	hideSitename () { return this.$store.state.instance.hideSitename },
	logoLeft () { return this.$store.state.instance.logoLeft },
	currentUser () { return this.$store.state.users.currentUser },
	- privateMode () { return this.$store.state.instance.private }
	+ privateMode () { return this.$store.state.instance.private },
	+ shouldConfirmLogout () {
	+ return this.$store.getters.mergedConfig.modalOnLogout
	+ }
	},
	methods: {
	scrollToTop () {
	window.scrollTo(0, 0)
	},
	+ showConfirmLogout () {
	+ this.showingConfirmLogout = true
	+ },
	+ hideConfirmLogout () {
	+ this.showingConfirmLogout = false
	+ },
	logout () {
	+ if (!this.shouldConfirmLogout) {
	+ this.doLogout()
	+ } else {
	+ this.showConfirmLogout()
	+ }
	+ },
	+ doLogout () {
	this.$router.replace('/main/public')
	this.$store.dispatch('logout')
	+ this.hideConfirmLogout()
	},
	onSearchBarToggled (hidden) {
	this.searchBarHidden = hidden
	},
	openSettingsModal () {
	this.$store.dispatch('openSettingsModal')
	}
	}
	}
	diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
	index 07bf8005c7..92622cf91c 100644
	--- a/src/components/desktop_nav/desktop_nav.vue
	+++ b/src/components/desktop_nav/desktop_nav.vue
	@@ -1,83 +1,95 @@
	<template>
	<nav
	id="nav"
	class="DesktopNav"
	:class="{ '-logoLeft': logoLeft }"
	@click="scrollToTop()"
	>
	<div class="inner-nav">
	<div class="item sitename">
	<router-link
	v-if="!hideSitename"
	class="site-name"
	:to="{ name: 'root' }"
	active-class="home"
	>
	{{ sitename }}
	</router-link>
	</div>
	<router-link
	class="logo"
	:to="{ name: 'root' }"
	:style="logoBgStyle"
	>
	<div
	class="mask"
	:style="logoMaskStyle"
	/>
	<img
	:src="logo"
	:style="logoStyle"
	>
	</router-link>
	<div class="item right actions">
	<search-bar
	v-if="currentUser \|\| !privateMode"
	@toggled="onSearchBarToggled"
	@click.stop
	/>
	<button
	class="button-unstyled nav-icon"
	@click.stop="openSettingsModal"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="cog"
	:title="$t('nav.preferences')"
	/>
	</button>
	<a
	v-if="currentUser && currentUser.role === 'admin'"
	href="/pleroma/admin/#/login-pleroma"
	class="nav-icon"
	target="_blank"
	@click.stop
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="tachometer-alt"
	:title="$t('nav.administration')"
	/>
	</a>
	<span class="spacer" />
	<button
	v-if="currentUser"
	class="button-unstyled nav-icon"
	@click.stop.prevent="logout"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="sign-out-alt"
	:title="$t('login.logout')"
	/>
	</button>
	</div>
	</div>
	+ <teleport to="#modal">
	+ <confirm-modal
	+ v-if="showingConfirmLogout"
	+ :title="$t('login.logout_confirm_title')"
	+ :confirm-text="$t('login.logout_confirm_accept_button')"
	+ :cancel-text="$t('login.logout_confirm_cancel_button')"
	+ @accepted="doLogout"
	+ @cancelled="hideConfirmLogout"
	+ >
	+ {{ $t('login.logout_confirm') }}
	+ </confirm-modal>
	+ </teleport>
	</nav>
	</template>
	<script src="./desktop_nav.js"></script>

	<style src="./desktop_nav.scss" lang="scss"></style>
	diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
	index 24d651426e..341cf1054b 100644
	--- a/src/components/dialog_modal/dialog_modal.vue
	+++ b/src/components/dialog_modal/dialog_modal.vue
	@@ -1,91 +1,91 @@
	<template>
	<span
	:class="{ 'dark-overlay': darkOverlay }"
	@click.self.stop="onCancel()"
	>
	<div
	class="dialog-modal panel panel-default"
	@click.stop=""
	>
	<div class="panel-heading dialog-modal-heading">
	<div class="title">
	<slot name="header" />
	</div>
	</div>
	<div class="dialog-modal-content">
	<slot name="default" />
	</div>
	<div class="dialog-modal-footer user-interactions panel-footer">
	<slot name="footer" />
	</div>
	</div>
	</span>
	</template>

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

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

	// TODO: unify with other modals.
	.dark-overlay {
	&::before {
	bottom: 0;
	content: " ";
	display: block;
	cursor: default;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	background: rgb(27 31 35 / 50%);
	- z-index: 99;
	+ z-index: 2000;
	}
	}

	.dialog-modal.panel {
	top: 0;
	left: 50%;
	max-height: 80vh;
	max-width: 90vw;
	margin: 15vh auto;
	position: fixed;
	transform: translateX(-50%);
	- z-index: 999;
	+ z-index: 2001;
	cursor: default;
	display: block;
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);

	.dialog-modal-heading {
	.title {
	text-align: center;
	}
	}

	.dialog-modal-content {
	margin: 0;
	padding: 1rem;
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	white-space: normal;
	}

	.dialog-modal-footer {
	margin: 0;
	padding: 0.5em;
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	border-top: 1px solid $fallback--border;
	border-top: 1px solid var(--border, $fallback--border);
	display: flex;
	justify-content: flex-end;

	button {
	width: auto;
	margin-left: 0.5rem;
	}
	}
	}

	</style>
	diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
	index 3dc968c981..48b960b2b7 100644
	--- a/src/components/extra_buttons/extra_buttons.js
	+++ b/src/components/extra_buttons/extra_buttons.js
	@@ -1,140 +1,159 @@
	import Popover from '../popover/popover.vue'
	+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faEllipsisH,
	faBookmark,
	faEyeSlash,
	faThumbtack,
	faShareAlt,
	faExternalLinkAlt,
	faHistory,
	faPlus,
	faTimes
	} from '@fortawesome/free-solid-svg-icons'
	import {
	faBookmark as faBookmarkReg,
	faFlag
	} from '@fortawesome/free-regular-svg-icons'

	library.add(
	faEllipsisH,
	faBookmark,
	faBookmarkReg,
	faEyeSlash,
	faThumbtack,
	faShareAlt,
	faExternalLinkAlt,
	faFlag,
	faHistory,
	faPlus,
	faTimes
	)

	const ExtraButtons = {
	props: ['status'],
	- components: { Popover },
	+ components: {
	+ Popover,
	+ ConfirmModal
	+ },
	data () {
	return {
	- expanded: false
	+ expanded: false,
	+ showingDeleteDialog: false
	}
	},
	methods: {
	onShow () {
	this.expanded = true
	},
	onClose () {
	this.expanded = false
	},
	deleteStatus () {
	- const confirmed = window.confirm(this.$t('status.delete_confirm'))
	- if (confirmed) {
	- this.$store.dispatch('deleteStatus', { id: this.status.id })
	+ if (this.shouldConfirmDelete) {
	+ this.showDeleteStatusConfirmDialog()
	+ } else {
	+ this.doDeleteStatus()
	}
	},
	+ doDeleteStatus () {
	+ this.$store.dispatch('deleteStatus', { id: this.status.id })
	+ this.hideDeleteStatusConfirmDialog()
	+ },
	+ showDeleteStatusConfirmDialog () {
	+ this.showingDeleteDialog = true
	+ },
	+ hideDeleteStatusConfirmDialog () {
	+ this.showingDeleteDialog = false
	+ },
	pinStatus () {
	this.$store.dispatch('pinStatus', this.status.id)
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	unpinStatus () {
	this.$store.dispatch('unpinStatus', this.status.id)
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	muteConversation () {
	this.$store.dispatch('muteConversation', this.status.id)
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	unmuteConversation () {
	this.$store.dispatch('unmuteConversation', this.status.id)
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	copyLink () {
	navigator.clipboard.writeText(this.statusLink)
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	bookmarkStatus () {
	this.$store.dispatch('bookmark', { id: this.status.id })
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	unbookmarkStatus () {
	this.$store.dispatch('unbookmark', { id: this.status.id })
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	reportStatus () {
	this.$store.dispatch('openUserReportingModal', { userId: this.status.user.id, statusIds: [this.status.id] })
	},
	editStatus () {
	this.$store.dispatch('fetchStatusSource', { id: this.status.id })
	.then(data => this.$store.dispatch('openEditStatusModal', {
	statusId: this.status.id,
	subject: data.spoiler_text,
	statusText: data.text,
	statusIsSensitive: this.status.nsfw,
	statusPoll: this.status.poll,
	statusFiles: [...this.status.attachments],
	visibility: this.status.visibility,
	statusContentType: data.content_type
	}))
	},
	showStatusHistory () {
	const originalStatus = { ...this.status }
	const stripFieldsList = ['attachments', 'created_at', 'emojis', 'text', 'raw_html', 'nsfw', 'poll', 'summary', 'summary_raw_html']
	stripFieldsList.forEach(p => delete originalStatus[p])
	this.$store.dispatch('openStatusHistoryModal', originalStatus)
	}
	},
	computed: {
	currentUser () { return this.$store.state.users.currentUser },
	canDelete () {
	if (!this.currentUser) { return }
	return this.currentUser.privileges.includes('messages_delete') \|\| this.status.user.id === this.currentUser.id
	},
	ownStatus () {
	return this.status.user.id === this.currentUser.id
	},
	canPin () {
	return this.ownStatus && (this.status.visibility === 'public' \|\| this.status.visibility === 'unlisted')
	},
	canMute () {
	return !!this.currentUser
	},
	canBookmark () {
	return !!this.currentUser
	},
	statusLink () {
	return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
	},
	isEdited () {
	return this.status.edited_at !== null
	},
	- editingAvailable () { return this.$store.state.instance.editingAvailable }
	+ editingAvailable () { return this.$store.state.instance.editingAvailable },
	+ shouldConfirmDelete () {
	+ return this.$store.getters.mergedConfig.modalOnDelete
	+ }
	}
	}

	export default ExtraButtons
	diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
	index a84d47f60d..c1c15c0fb5 100644
	--- a/src/components/extra_buttons/extra_buttons.vue
	+++ b/src/components/extra_buttons/extra_buttons.vue
	@@ -1,207 +1,219 @@
	<template>
	<Popover
	class="ExtraButtons"
	trigger="click"
	placement="top"
	:offset="{ y: 5 }"
	:bound-to="{ x: 'container' }"
	remove-padding
	@show="onShow"
	@close="onClose"
	>
	<template #content="{close}">
	<div class="dropdown-menu">
	<button
	v-if="canMute && !status.thread_muted"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="muteConversation"
	>
	<FAIcon
	fixed-width
	icon="eye-slash"
	/><span>{{ $t("status.mute_conversation") }}</span>
	</button>
	<button
	v-if="canMute && status.thread_muted"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="unmuteConversation"
	>
	<FAIcon
	fixed-width
	icon="eye-slash"
	/><span>{{ $t("status.unmute_conversation") }}</span>
	</button>
	<button
	v-if="!status.pinned && canPin"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="pinStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="thumbtack"
	/><span>{{ $t("status.pin") }}</span>
	</button>
	<button
	v-if="status.pinned && canPin"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="unpinStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="thumbtack"
	/><span>{{ $t("status.unpin") }}</span>
	</button>
	<template v-if="canBookmark">
	<button
	v-if="!status.bookmarked"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="bookmarkStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	:icon="['far', 'bookmark']"
	/><span>{{ $t("status.bookmark") }}</span>
	</button>
	<button
	v-if="status.bookmarked"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="unbookmarkStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="bookmark"
	/><span>{{ $t("status.unbookmark") }}</span>
	</button>
	</template>
	<button
	v-if="ownStatus && editingAvailable"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="editStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="pen"
	/><span>{{ $t("status.edit") }}</span>
	</button>
	<button
	v-if="isEdited && editingAvailable"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="showStatusHistory"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="history"
	/><span>{{ $t("status.status_history") }}</span>
	</button>
	<button
	v-if="canDelete"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="deleteStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="times"
	/><span>{{ $t("status.delete") }}</span>
	</button>
	<button
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="copyLink"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="share-alt"
	/><span>{{ $t("status.copy_link") }}</span>
	</button>
	<a
	v-if="!status.is_local"
	class="button-default dropdown-item dropdown-item-icon"
	title="Source"
	:href="status.external_url"
	target="_blank"
	>
	<FAIcon
	fixed-width
	icon="external-link-alt"
	/><span>{{ $t("status.external_source") }}</span>
	</a>
	<button
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="reportStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	:icon="['far', 'flag']"
	/><span>{{ $t("user_card.report") }}</span>
	</button>
	</div>
	</template>
	<template #trigger>
	<span class="button-unstyled popover-trigger">
	<FALayers class="fa-old-padding-layer">
	<FAIcon
	class="fa-scale-110 "
	icon="ellipsis-h"
	/>
	<FAIcon
	v-show="!expanded"
	class="focus-marker"
	transform="shrink-6 up-8 right-16"
	icon="plus"
	/>
	<FAIcon
	v-show="expanded"
	class="focus-marker"
	transform="shrink-6 up-8 right-16"
	icon="times"
	/>
	</FALayers>
	</span>
	+ <teleport to="#modal">
	+ <ConfirmModal
	+ v-if="showingDeleteDialog"
	+ :title="$t('status.delete_confirm_title')"
	+ :cancel-text="$t('status.delete_confirm_cancel_button')"
	+ :confirm-text="$t('status.delete_confirm_accept_button')"
	+ @cancelled="hideDeleteStatusConfirmDialog"
	+ @accepted="doDeleteStatus"
	+ >
	+ {{ $t('status.delete_confirm') }}
	+ </ConfirmModal>
	+ </teleport>
	</template>
	</Popover>
	</template>

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

	<style lang="scss">
	@import "../../variables";
	@import "../../mixins";

	.ExtraButtons {
	.popover-trigger {
	position: static;
	padding: 10px;
	margin: -10px;

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

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

	@include unfocused-style {
	.focus-marker {
	visibility: hidden;
	}
	}

	@include focused-style {
	.focus-marker {
	visibility: visible;
	}
	}
	}
	}
	</style>
	diff --git a/src/components/follow_button/follow_button.js b/src/components/follow_button/follow_button.js
	index 3edbcb86fb..443aa9bccc 100644
	--- a/src/components/follow_button/follow_button.js
	+++ b/src/components/follow_button/follow_button.js
	@@ -1,56 +1,79 @@
	+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
	export default {
	props: ['relationship', 'user', 'labelFollowing', 'buttonClass'],
	+ components: {
	+ ConfirmModal
	+ },
	data () {
	return {
	- inProgress: false
	+ inProgress: false,
	+ showingConfirmUnfollow: false
	}
	},
	computed: {
	+ shouldConfirmUnfollow () {
	+ return this.$store.getters.mergedConfig.modalOnUnfollow
	+ },
	isPressed () {
	return this.inProgress \|\| this.relationship.following
	},
	title () {
	if (this.inProgress \|\| this.relationship.following) {
	return this.$t('user_card.follow_unfollow')
	} else if (this.relationship.requested) {
	return this.$t('user_card.follow_cancel')
	} else {
	return this.$t('user_card.follow')
	}
	},
	label () {
	if (this.inProgress) {
	return this.$t('user_card.follow_progress')
	} else if (this.relationship.following) {
	return this.labelFollowing \|\| this.$t('user_card.following')
	} else if (this.relationship.requested) {
	return this.$t('user_card.follow_sent')
	} else {
	return this.$t('user_card.follow')
	}
	},
	disabled () {
	return this.inProgress \|\| this.user.deactivated
	}
	},
	methods: {
	+ showConfirmUnfollow () {
	+ this.showingConfirmUnfollow = true
	+ },
	+ hideConfirmUnfollow () {
	+ this.showingConfirmUnfollow = false
	+ },
	onClick () {
	this.relationship.following \|\| this.relationship.requested ? this.unfollow() : this.follow()
	},
	follow () {
	this.inProgress = true
	requestFollow(this.relationship.id, this.$store).then(() => {
	this.inProgress = false
	})
	},
	unfollow () {
	+ if (this.shouldConfirmUnfollow) {
	+ this.showConfirmUnfollow()
	+ } else {
	+ this.doUnfollow()
	+ }
	+ },
	+ doUnfollow () {
	const store = this.$store
	this.inProgress = true
	requestUnfollow(this.relationship.id, store).then(() => {
	this.inProgress = false
	store.commit('removeStatus', { timeline: 'friends', userId: this.relationship.id })
	})
	+
	+ this.hideConfirmUnfollow()
	}
	}
	}
	diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
	index 965d5256a6..e421c15b3a 100644
	--- a/src/components/follow_button/follow_button.vue
	+++ b/src/components/follow_button/follow_button.vue
	@@ -1,13 +1,34 @@
	<template>
	<button
	class="btn button-default follow-button"
	:class="{ toggled: isPressed }"
	:disabled="disabled"
	:title="title"
	@click="onClick"
	>
	{{ label }}
	+ <teleport to="#modal">
	+ <confirm-modal
	+ v-if="showingConfirmUnfollow"
	+ :title="$t('user_card.unfollow_confirm_title')"
	+ :confirm-text="$t('user_card.unfollow_confirm_accept_button')"
	+ :cancel-text="$t('user_card.unfollow_confirm_cancel_button')"
	+ @accepted="doUnfollow"
	+ @cancelled="hideConfirmUnfollow"
	+ >
	+ <i18n-t
	+ keypath="user_card.unfollow_confirm"
	+ tag="span"
	+ >
	+ <template #user>
	+ <span
	+ v-text="user.screen_name_ui"
	+ />
	+ </template>
	+ </i18n-t>
	+ </confirm-modal>
	+ </teleport>
	</button>
	</template>

	<script src="./follow_button.js"></script>
	diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
	index eff69fb237..bdb6b80927 100644
	--- a/src/components/follow_card/follow_card.vue
	+++ b/src/components/follow_card/follow_card.vue
	@@ -1,59 +1,60 @@
	<template>
	<basic-user-card :user="user">
	<div class="follow-card-content-container">
	<span
	v-if="isMe \|\| (!noFollowsYou && relationship.followed_by)"
	class="faint"
	>
	{{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
	</span>
	<template v-if="!loggedIn">
	<div
	v-if="!relationship.following"
	class="follow-card-follow-button"
	>
	<RemoteFollow :user="user" />
	</div>
	</template>
	<template v-else-if="!isMe">
	<FollowButton
	:relationship="relationship"
	:label-following="$t('user_card.follow_unfollow')"
	class="follow-card-follow-button"
	:user="user"
	/>
	<RemoveFollowerButton
	v-if="noFollowsYou && relationship.followed_by"
	+ :user="user"
	:relationship="relationship"
	class="follow-card-button"
	/>
	</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-flow: row wrap;
	justify-content: space-between;
	line-height: 1.5em;
	}

	&-button {
	margin-top: 0.5em;
	padding: 0 1.5em;
	margin-left: 1em;
	}

	&-follow-button {
	margin-top: 0.5em;
	margin-left: auto;
	width: 10em;
	}
	}
	</style>
	diff --git a/src/components/follow_request_card/follow_request_card.js b/src/components/follow_request_card/follow_request_card.js
	index cbd75311e8..b0873bb109 100644
	--- a/src/components/follow_request_card/follow_request_card.js
	+++ b/src/components/follow_request_card/follow_request_card.js
	@@ -1,40 +1,87 @@
	import BasicUserCard from '../basic_user_card/basic_user_card.vue'
	+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	import { notificationsFromStore } from '../../services/notification_utils/notification_utils.js'

	const FollowRequestCard = {
	props: ['user'],
	components: {
	- BasicUserCard
	+ BasicUserCard,
	+ ConfirmModal
	+ },
	+ data () {
	+ return {
	+ showingApproveConfirmDialog: false,
	+ showingDenyConfirmDialog: false
	+ }
	},
	methods: {
	findFollowRequestNotificationId () {
	const notif = notificationsFromStore(this.$store).find(
	(notif) => notif.from_profile.id === this.user.id && notif.type === 'follow_request'
	)
	return notif && notif.id
	},
	+ showApproveConfirmDialog () {
	+ this.showingApproveConfirmDialog = true
	+ },
	+ hideApproveConfirmDialog () {
	+ this.showingApproveConfirmDialog = false
	+ },
	+ showDenyConfirmDialog () {
	+ this.showingDenyConfirmDialog = true
	+ },
	+ hideDenyConfirmDialog () {
	+ this.showingDenyConfirmDialog = false
	+ },
	approveUser () {
	+ if (this.shouldConfirmApprove) {
	+ this.showApproveConfirmDialog()
	+ } else {
	+ this.doApprove()
	+ }
	+ },
	+ doApprove () {
	this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
	this.$store.dispatch('removeFollowRequest', this.user)

	const notifId = this.findFollowRequestNotificationId()
	this.$store.dispatch('markSingleNotificationAsSeen', { id: notifId })
	this.$store.dispatch('updateNotification', {
	id: notifId,
	updater: notification => {
	notification.type = 'follow'
	}
	})
	+ this.hideApproveConfirmDialog()
	},
	denyUser () {
	+ if (this.shouldConfirmDeny) {
	+ this.showDenyConfirmDialog()
	+ } else {
	+ this.doDeny()
	+ }
	+ },
	+ doDeny () {
	const notifId = this.findFollowRequestNotificationId()
	this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
	.then(() => {
	this.$store.dispatch('dismissNotificationLocal', { id: notifId })
	this.$store.dispatch('removeFollowRequest', this.user)
	})
	+ this.hideDenyConfirmDialog()
	+ }
	+ },
	+ computed: {
	+ mergedConfig () {
	+ return this.$store.getters.mergedConfig
	+ },
	+ shouldConfirmApprove () {
	+ return this.mergedConfig.modalOnApproveFollow
	+ },
	+ shouldConfirmDeny () {
	+ return this.mergedConfig.modalOnDenyFollow
	}
	}
	}

	export default FollowRequestCard
	diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue
	index eb222cc7d8..55b651120b 100644
	--- a/src/components/follow_request_card/follow_request_card.vue
	+++ b/src/components/follow_request_card/follow_request_card.vue
	@@ -1,39 +1,61 @@
	<template>
	<basic-user-card :user="user">
	<div class="follow-request-card-content-container">
	<button
	class="btn button-default"
	@click="approveUser"
	>
	{{ $t('user_card.approve') }}
	</button>
	<button
	class="btn button-default"
	@click="denyUser"
	>
	{{ $t('user_card.deny') }}
	</button>
	</div>
	+ <teleport to="#modal">
	+ <confirm-modal
	+ v-if="showingApproveConfirmDialog"
	+ :title="$t('user_card.approve_confirm_title')"
	+ :confirm-text="$t('user_card.approve_confirm_accept_button')"
	+ :cancel-text="$t('user_card.approve_confirm_cancel_button')"
	+ @accepted="doApprove"
	+ @cancelled="hideApproveConfirmDialog"
	+ >
	+ {{ $t('user_card.approve_confirm', { user: user.screen_name_ui }) }}
	+ </confirm-modal>
	+ <confirm-modal
	+ v-if="showingDenyConfirmDialog"
	+ :title="$t('user_card.deny_confirm_title')"
	+ :confirm-text="$t('user_card.deny_confirm_accept_button')"
	+ :cancel-text="$t('user_card.deny_confirm_cancel_button')"
	+ @accepted="doDeny"
	+ @cancelled="hideDenyConfirmDialog"
	+ >
	+ {{ $t('user_card.deny_confirm', { user: user.screen_name_ui }) }}
	+ </confirm-modal>
	+ </teleport>
	</basic-user-card>
	</template>

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

	<style lang="scss">
	.follow-request-card-content-container {
	display: flex;
	flex-flow: row wrap;

	button {
	margin-top: 0.5em;
	margin-right: 0.5em;
	flex: 1 1;
	max-width: 12em;
	min-width: 8em;

	&:last-child {
	margin-right: 0;
	}
	}
	}
	</style>
	diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
	index cdbbb8127d..dad1f6aa32 100644
	--- a/src/components/mobile_nav/mobile_nav.js
	+++ b/src/components/mobile_nav/mobile_nav.js
	@@ -1,115 +1,136 @@
	import SideDrawer from '../side_drawer/side_drawer.vue'
	import Notifications from '../notifications/notifications.vue'
	+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
	import GestureService from '../../services/gesture_service/gesture_service'
	import NavigationPins from 'src/components/navigation/navigation_pins.vue'
	import { mapGetters } from 'vuex'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faTimes,
	faBell,
	faBars,
	faArrowUp,
	faMinus
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faTimes,
	faBell,
	faBars,
	faArrowUp,
	faMinus
	)

	const MobileNav = {
	components: {
	SideDrawer,
	Notifications,
	- NavigationPins
	+ NavigationPins,
	+ ConfirmModal
	},
	data: () => ({
	notificationsCloseGesture: undefined,
	notificationsOpen: false,
	- notificationsAtTop: true
	+ notificationsAtTop: true,
	+ showingConfirmLogout: false
	}),
	created () {
	this.notificationsCloseGesture = GestureService.swipeGesture(
	GestureService.DIRECTION_RIGHT,
	() => this.closeMobileNotifications(true),
	50
	)
	},
	computed: {
	currentUser () {
	return this.$store.state.users.currentUser
	},
	unseenNotifications () {
	return unseenNotificationsFromStore(this.$store)
	},
	unseenNotificationsCount () {
	return this.unseenNotifications.length
	},
	hideSitename () { return this.$store.state.instance.hideSitename },
	sitename () { return this.$store.state.instance.name },
	isChat () {
	return this.$route.name === 'chat'
	},
	...mapGetters(['unreadChatCount', 'unreadAnnouncementCount']),
	chatsPinned () {
	return new Set(this.$store.state.serverSideStorage.prefsStorage.collections.pinnedNavItems).has('chats')
	- }
	+ },
	+ shouldConfirmLogout () {
	+ return this.$store.getters.mergedConfig.modalOnLogout
	+ },
	+ ...mapGetters(['unreadChatCount'])
	},
	methods: {
	toggleMobileSidebar () {
	this.$refs.sideDrawer.toggleDrawer()
	},
	openMobileNotifications () {
	this.notificationsOpen = true
	},
	closeMobileNotifications (markRead) {
	if (this.notificationsOpen) {
	// make sure to mark notifs seen only when the notifs were open and not
	// from close-calls.
	this.notificationsOpen = false
	if (markRead) {
	this.markNotificationsAsSeen()
	}
	}
	},
	notificationsTouchStart (e) {
	GestureService.beginSwipe(e, this.notificationsCloseGesture)
	},
	notificationsTouchMove (e) {
	GestureService.updateSwipe(e, this.notificationsCloseGesture)
	},
	scrollToTop () {
	window.scrollTo(0, 0)
	},
	scrollMobileNotificationsToTop () {
	this.$refs.mobileNotifications.scrollTo(0, 0)
	},
	+ showConfirmLogout () {
	+ this.showingConfirmLogout = true
	+ },
	+ hideConfirmLogout () {
	+ this.showingConfirmLogout = false
	+ },
	logout () {
	+ if (!this.shouldConfirmLogout) {
	+ this.doLogout()
	+ } else {
	+ this.showConfirmLogout()
	+ }
	+ },
	+ doLogout () {
	this.$router.replace('/main/public')
	this.$store.dispatch('logout')
	+ this.hideConfirmLogout()
	},
	markNotificationsAsSeen () {
	// this.$refs.notifications.markAsSeen()
	this.$store.dispatch('markNotificationsAsSeen')
	},
	onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
	this.notificationsAtTop = scrollTop > 0
	if (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_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
	index d6fe102cb4..c2746abeee 100644
	--- a/src/components/mobile_nav/mobile_nav.vue
	+++ b/src/components/mobile_nav/mobile_nav.vue
	@@ -1,240 +1,262 @@
	<template>
	<div
	class="MobileNav"
	>
	<nav
	id="nav"
	class="mobile-nav"
	@click="scrollToTop()"
	>
	<div class="item">
	<button
	class="button-unstyled mobile-nav-button"
	:title="$t('nav.mobile_sidebar')"
	:aria-expanaded="$refs.sideDrawer && !$refs.sideDrawer.closed"
	@click.stop.prevent="toggleMobileSidebar()"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="bars"
	/>
	<div
	v-if="(unreadChatCount && !chatsPinned) \|\| unreadAnnouncementCount"
	class="alert-dot"
	/>
	</button>
	<NavigationPins class="pins" />
	</div> <div class="item right">
	<button
	v-if="currentUser"
	class="button-unstyled mobile-nav-button"
	:title="unseenNotificationsCount ? $t('nav.mobile_notifications_unread_active') : $t('nav.mobile_notifications')"
	@click.stop.prevent="openMobileNotifications()"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="bell"
	/>
	<div
	v-if="unseenNotificationsCount"
	class="alert-dot"
	/>
	</button>
	</div>
	</nav>
	<aside
	v-if="currentUser"
	class="mobile-notifications-drawer"
	:class="{ '-closed': !notificationsOpen }"
	@touchstart.stop="notificationsTouchStart"
	@touchmove.stop="notificationsTouchMove"
	>
	<div class="mobile-notifications-header">
	<span class="title">{{ $t('notifications.notifications') }}</span>
	<span class="spacer" />
	<button
	v-if="notificationsAtTop"
	class="button-unstyled mobile-nav-button"
	:title="$t('general.scroll_to_top')"
	@click.stop.prevent="scrollMobileNotificationsToTop"
	>
	<FALayers class="fa-scale-110 fa-old-padding-layer">
	<FAIcon icon="arrow-up" />
	<FAIcon
	icon="minus"
	transform="up-7"
	/>
	</FALayers>
	</button>
	<button
	class="button-unstyled mobile-nav-button"
	:title="$t('nav.mobile_notifications_close')"
	@click.stop.prevent="closeMobileNotifications(true)"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="times"
	/>
	</button>
	</div>
	<div
	id="mobile-notifications"
	ref="mobileNotifications"
	class="mobile-notifications"
	@scroll="onScroll"
	/>
	</aside>
	<SideDrawer
	ref="sideDrawer"
	:logout="logout"
	/>
	+ <teleport to="#modal">
	+ <confirm-modal
	+ v-if="showingConfirmLogout"
	+ :title="$t('login.logout_confirm_title')"
	+ :confirm-text="$t('login.logout_confirm_accept_button')"
	+ :cancel-text="$t('login.logout_confirm_cancel_button')"
	+ @accepted="doLogout"
	+ @cancelled="hideConfirmLogout"
	+ >
	+ {{ $t('login.logout_confirm') }}
	+ </confirm-modal>
	+ </teleport>
	</div>
	</template>

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

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

	.MobileNav {
	z-index: var(--ZI_navbar);

	.mobile-nav {
	display: grid;
	line-height: var(--navbar-height);
	grid-template-rows: 50px;
	grid-template-columns: 2fr auto;
	width: 100%;
	box-sizing: border-box;

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

	.mobile-inner-nav {
	width: 100%;
	display: flex;
	align-items: center;
	}

	.mobile-nav-button {
	display: inline-block;
	text-align: center;
	padding: 0 1em;
	position: relative;
	cursor: pointer;
	}

	.site-name {
	padding: 0 0.3em;
	display: inline-block;
	}

	.item {
	/* moslty just to get rid of extra whitespaces */
	display: flex;
	}

	.alert-dot {
	border-radius: 100%;
	height: 8px;
	width: 8px;
	position: absolute;
	left: calc(50% - 4px);
	top: calc(50% - 4px);
	margin-left: 6px;
	margin-top: -6px;
	background-color: $fallback--cRed;
	background-color: var(--badgeNotification, $fallback--cRed);
	}

	.mobile-notifications-drawer {
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
	position: fixed;
	top: 0;
	left: 0;
	box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
	box-shadow: var(--panelShadow);
	transition-property: transform;
	transition-duration: 0.25s;
	transform: translateX(0);
	z-index: var(--ZI_navbar);
	-webkit-overflow-scrolling: touch;

	&.-closed {
	transform: translateX(100%);
	box-shadow: none;
	}
	}

	.mobile-notifications-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: calc(var(--ZI_navbar) + 100);
	width: 100%;
	height: 50px;
	line-height: 50px;
	position: absolute;
	color: var(--topBarText);
	background-color: $fallback--fg;
	background-color: var(--topBar, $fallback--fg);
	box-shadow: 0 0 4px rgb(0 0 0 / 60%);
	box-shadow: var(--topBarShadow);

	.spacer {
	flex: 1;
	}

	.title {
	font-size: 1.3em;
	margin-left: 0.6em;
	}
	}

	.pins {
	flex: 1;

	.pinned-item {
	flex-grow: 1;
	}
	}

	.mobile-notifications {
	margin-top: 50px;
	width: 100vw;
	height: calc(100vh - var(--navbar-height));
	overflow-x: hidden;
	overflow-y: scroll;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);

	.notifications {
	padding: 0;
	border-radius: 0;
	box-shadow: none;

	.panel {
	border-radius: 0;
	margin: 0;
	box-shadow: none;
	}

	.panel::after {
	border-radius: 0;
	}

	.panel .panel-heading {
	border-radius: 0;
	box-shadow: none;
	}
	}
	}
	+
	+ .confirm-modal.dark-overlay {
	+ &::before {
	+ z-index: 3000;
	+ }
	+
	+ .dialog-modal.panel {
	+ z-index: 3001;
	+ }
	+ }
	}

	</style>
	diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
	index 265aaee0a5..420db4f0f3 100644
	--- a/src/components/notification/notification.js
	+++ b/src/components/notification/notification.js
	@@ -1,126 +1,167 @@
	import StatusContent from '../status_content/status_content.vue'
	import { mapState } from 'vuex'
	import Status from '../status/status.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import UserCard from '../user_card/user_card.vue'
	import Timeago from '../timeago/timeago.vue'
	import Report from '../report/report.vue'
	import UserLink from '../user_link/user_link.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import UserPopover from '../user_popover/user_popover.vue'
	+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
	import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faCheck,
	faTimes,
	faStar,
	faRetweet,
	faUserPlus,
	faEyeSlash,
	faUser,
	faSuitcaseRolling,
	faExpandAlt,
	faCompressAlt
	} from '@fortawesome/free-solid-svg-icons'

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

	const Notification = {
	data () {
	return {
	statusExpanded: false,
	betterShadow: this.$store.state.interface.browserSupport.cssFilter,
	- unmuted: false
	+ unmuted: false,
	+ showingApproveConfirmDialog: false,
	+ showingDenyConfirmDialog: false
	}
	},
	props: ['notification'],
	components: {
	StatusContent,
	UserAvatar,
	UserCard,
	Timeago,
	Status,
	Report,
	RichContent,
	UserPopover,
	- UserLink
	+ UserLink,
	+ ConfirmModal
	},
	methods: {
	toggleStatusExpanded () {
	this.statusExpanded = !this.statusExpanded
	},
	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
	},
	+ showApproveConfirmDialog () {
	+ this.showingApproveConfirmDialog = true
	+ },
	+ hideApproveConfirmDialog () {
	+ this.showingApproveConfirmDialog = false
	+ },
	+ showDenyConfirmDialog () {
	+ this.showingDenyConfirmDialog = true
	+ },
	+ hideDenyConfirmDialog () {
	+ this.showingDenyConfirmDialog = false
	+ },
	approveUser () {
	+ if (this.shouldConfirmApprove) {
	+ this.showApproveConfirmDialog()
	+ } else {
	+ this.doApprove()
	+ }
	+ },
	+ doApprove () {
	this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
	this.$store.dispatch('removeFollowRequest', this.user)
	this.$store.dispatch('markSingleNotificationAsSeen', { id: this.notification.id })
	this.$store.dispatch('updateNotification', {
	id: this.notification.id,
	updater: notification => {
	notification.type = 'follow'
	}
	})
	+ this.hideApproveConfirmDialog()
	},
	denyUser () {
	+ if (this.shouldConfirmDeny) {
	+ this.showDenyConfirmDialog()
	+ } else {
	+ this.doDeny()
	+ }
	+ },
	+ doDeny () {
	this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
	.then(() => {
	this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id })
	this.$store.dispatch('removeFollowRequest', this.user)
	})
	+ this.hideDenyConfirmDialog()
	}
	},
	computed: {
	userClass () {
	return highlightClass(this.notification.from_profile)
	},
	userStyle () {
	const highlight = this.$store.getters.mergedConfig.highlight
	const user = this.notification.from_profile
	return highlightStyle(highlight[user.screen_name])
	},
	user () {
	return this.$store.getters.findUser(this.notification.from_profile.id)
	},
	userProfileLink () {
	return this.generateUserProfileLink(this.user)
	},
	targetUser () {
	return this.$store.getters.findUser(this.notification.target.id)
	},
	targetUserProfileLink () {
	return this.generateUserProfileLink(this.targetUser)
	},
	needMute () {
	return this.$store.getters.relationship(this.user.id).muting
	},
	isStatusNotification () {
	return isStatusNotification(this.notification.type)
	},
	+ mergedConfig () {
	+ return this.$store.getters.mergedConfig
	+ },
	+ shouldConfirmApprove () {
	+ return this.mergedConfig.modalOnApproveFollow
	+ },
	+ shouldConfirmDeny () {
	+ return this.mergedConfig.modalOnDenyFollow
	+ },
	...mapState({
	currentUser: state => state.users.currentUser
	})
	}
	}

	export default Notification
	diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
	index f1aa542076..e1ea42aded 100644
	--- a/src/components/notification/notification.vue
	+++ b/src/components/notification/notification.vue
	@@ -1,250 +1,272 @@
	<template>
	<article
	v-if="notification.type === 'mention'"
	>
	<Status
	class="Notification"
	:compact="true"
	:statusoid="notification.status"
	/>
	</article>
	<article v-else>
	<div
	v-if="needMute && !unmuted"
	class="Notification container -muted"
	>
	<small>
	<user-link
	:user="notification.from_profile"
	:at="false"
	/>
	</small>
	<button
	class="button-unstyled unmute"
	@click.prevent="toggleMute"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="eye-slash"
	/>
	</button>
	</div>
	<div
	v-else
	class="Notification non-mention"
	:class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
	:style="[ userStyle ]"
	>
	<a
	class="avatar-container"
	:href="$router.resolve(userProfileLink).href"
	@click.prevent
	>
	<UserPopover
	:user-id="notification.from_profile.id"
	:overlay-centers="true"
	>
	<UserAvatar
	class="post-avatar"
	:bot="botIndicator"
	:compact="true"
	:better-shadow="betterShadow"
	:user="notification.from_profile"
	/>
	</UserPopover>
	</a>
	<div class="notification-right">
	<span class="notification-details">
	<div class="name-and-action">
	<!-- eslint-disable vue/no-v-html -->
	<bdi v-if="!!notification.from_profile.name_html">
	<RichContent
	class="username"
	:title="'@'+notification.from_profile.screen_name_ui"
	:html="notification.from_profile.name_html"
	:emoji="notification.from_profile.emoji"
	/>
	</bdi>
	<!-- eslint-enable vue/no-v-html -->
	<span
	v-else
	class="username"
	:title="'@'+notification.from_profile.screen_name_ui"
	>
	{{ notification.from_profile.name }}
	</span>
	{{ ' ' }}
	<span v-if="notification.type === 'like'">
	<FAIcon
	class="type-icon"
	icon="star"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.favorited_you') }}</small>
	</span>
	<span v-if="notification.type === 'repeat'">
	<FAIcon
	class="type-icon"
	icon="retweet"
	:title="$t('tool_tip.repeat')"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.repeated_you') }}</small>
	</span>
	<span v-if="notification.type === 'follow'">
	<FAIcon
	class="type-icon"
	icon="user-plus"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.followed_you') }}</small>
	</span>
	<span v-if="notification.type === 'follow_request'">
	<FAIcon
	class="type-icon"
	icon="user"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.follow_request') }}</small>
	</span>
	<span v-if="notification.type === 'move'">
	<FAIcon
	class="type-icon"
	icon="suitcase-rolling"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.migrated_to') }}</small>
	</span>
	<span v-if="notification.type === 'pleroma:emoji_reaction'">
	<small>
	<i18n-t
	scope="global"
	keypath="notifications.reacted_with"
	>
	<span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
	</i18n-t>
	</small>
	</span>
	<span v-if="notification.type === 'pleroma:report'">
	<small>{{ $t('notifications.submitted_report') }}</small>
	</span>
	<span v-if="notification.type === 'poll'">
	<FAIcon
	class="type-icon"
	icon="poll-h"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.poll_ended') }}</small>
	</span>
	</div>
	<div
	v-if="isStatusNotification"
	class="timeago"
	>
	<router-link
	v-if="notification.status"
	:to="{ name: 'conversation', params: { id: notification.status.id } }"
	class="timeago-link faint-link"
	>
	<Timeago
	:time="notification.created_at"
	:auto-update="240"
	/>
	</router-link>
	<button
	class="button-unstyled expand-icon"
	@click.prevent="toggleStatusExpanded"
	:title="$t('tool_tip.toggle_expand')"
	:aria-expanded="statusExpanded"
	>
	<FAIcon
	class="fa-scale-110"
	fixed-width
	:icon="statusExpanded ? 'compress-alt' : 'expand-alt'"
	/>
	</button>
	</div>
	<div
	v-else
	class="timeago"
	>
	<span class="faint">
	<Timeago
	:time="notification.created_at"
	:auto-update="240"
	/>
	</span>
	</div>
	<button
	v-if="needMute"
	class="button-unstyled"
	:title="$t('tool_tip.toggle_mute')"
	:aria-expanded="!unmuted"
	@click.prevent="toggleMute"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="eye-slash"
	/>
	</button>
	</span>
	<div
	v-if="notification.type === 'follow' \|\| notification.type === 'follow_request'"
	class="follow-text"
	>
	<user-link
	class="follow-name"
	:user="notification.from_profile"
	/>
	<div
	v-if="notification.type === 'follow_request'"
	style="white-space: nowrap;"
	>
	<button
	class="button-unstyled"
	:title="$t('tool_tip.accept_follow_request')"
	@click="approveUser()"
	>
	<FAIcon
	icon="check"
	class="fa-scale-110 fa-old-padding follow-request-accept"
	/>
	</button>
	<button
	class="button-unstyled"
	:title="$t('tool_tip.reject_follow_request')"
	@click="denyUser()"
	>
	<FAIcon
	icon="times"
	class="fa-scale-110 fa-old-padding follow-request-reject"
	/>
	</button>
	</div>
	</div>
	<div
	v-else-if="notification.type === 'move'"
	class="move-text"
	>
	<user-link
	:user="notification.target"
	/>
	</div>
	<Report
	v-else-if="notification.type === 'pleroma:report'"
	:report-id="notification.report.id"
	/>
	<template v-else>
	<StatusContent
	:class="{ faint: !statusExpanded }"
	:compact="!statusExpanded"
	:status="notification.action"
	/>
	</template>
	</div>
	</div>
	+ <teleport to="#modal">
	+ <confirm-modal
	+ v-if="showingApproveConfirmDialog"
	+ :title="$t('user_card.approve_confirm_title')"
	+ :confirm-text="$t('user_card.approve_confirm_accept_button')"
	+ :cancel-text="$t('user_card.approve_confirm_cancel_button')"
	+ @accepted="doApprove"
	+ @cancelled="hideApproveConfirmDialog"
	+ >
	+ {{ $t('user_card.approve_confirm', { user: user.screen_name_ui }) }}
	+ </confirm-modal>
	+ <confirm-modal
	+ v-if="showingDenyConfirmDialog"
	+ :title="$t('user_card.deny_confirm_title')"
	+ :confirm-text="$t('user_card.deny_confirm_accept_button')"
	+ :cancel-text="$t('user_card.deny_confirm_cancel_button')"
	+ @accepted="doDeny"
	+ @cancelled="hideDenyConfirmDialog"
	+ >
	+ {{ $t('user_card.deny_confirm', { user: user.screen_name_ui }) }}
	+ </confirm-modal>
	+ </teleport>
	</article>
	</template>

	<script src="./notification.js"></script>
	<style src="./notification.scss" lang="scss"></style>
	diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
	index e30645c34e..a207015537 100644
	--- a/src/components/poll/poll_form.js
	+++ b/src/components/poll/poll_form.js
	@@ -1,136 +1,127 @@
	import * as DateUtils from 'src/services/date_utils/date_utils.js'
	import { uniq } from 'lodash'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import Select from '../select/select.vue'
	import {
	faTimes,
	faPlus
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faTimes,
	faPlus
	)

	export default {
	components: {
	Select
	},
	name: 'PollForm',
	props: ['visible'],
	data: () => ({
	pollType: 'single',
	options: ['', ''],
	expiryAmount: 10,
	expiryUnit: 'minutes'
	}),
	computed: {
	pollLimits () {
	return this.$store.state.instance.pollLimits
	},
	maxOptions () {
	return this.pollLimits.max_options
	},
	maxLength () {
	return this.pollLimits.max_option_chars
	},
	expiryUnits () {
	const allUnits = ['minutes', 'hours', 'days']
	const expiry = this.convertExpiryFromUnit
	return allUnits.filter(
	unit => this.pollLimits.max_expiration >= expiry(unit, 1)
	)
	},
	minExpirationInCurrentUnit () {
	return Math.ceil(
	this.convertExpiryToUnit(
	this.expiryUnit,
	this.pollLimits.min_expiration
	)
	)
	},
	maxExpirationInCurrentUnit () {
	return Math.floor(
	this.convertExpiryToUnit(
	this.expiryUnit,
	this.pollLimits.max_expiration
	)
	)
	}
	},
	methods: {
	clear () {
	this.pollType = 'single'
	this.options = ['', '']
	this.expiryAmount = 10
	this.expiryUnit = 'minutes'
	},
	nextOption (index) {
	const element = this.$el.querySelector(`#poll-${index + 1}`)
	if (element) {
	element.focus()
	} else {
	// Try adding an option and try focusing on it
	const addedOption = this.addOption()
	if (addedOption) {
	this.$nextTick(function () {
	this.nextOption(index)
	})
	}
	}
	},
	addOption () {
	if (this.options.length < this.maxOptions) {
	this.options.push('')
	return true
	}
	return false
	},
	deleteOption (index, event) {
	if (this.options.length > 2) {
	this.options.splice(index, 1)
	this.updatePollToParent()
	}
	},
	convertExpiryToUnit (unit, amount) {
	// Note: we want seconds and not milliseconds
	- switch (unit) {
	- case 'minutes': return (1000 * amount) / DateUtils.MINUTE
	- case 'hours': return (1000 * amount) / DateUtils.HOUR
	- case 'days': return (1000 * amount) / DateUtils.DAY
	- }
	+ return DateUtils.secondsToUnit(unit, amount)
	},
	convertExpiryFromUnit (unit, amount) {
	- // Note: we want seconds and not milliseconds
	- switch (unit) {
	- case 'minutes': return 0.001 * amount * DateUtils.MINUTE
	- case 'hours': return 0.001 * amount * DateUtils.HOUR
	- case 'days': return 0.001 * amount * DateUtils.DAY
	- }
	+ return DateUtils.unitToSeconds(unit, amount)
	},
	expiryAmountChange () {
	this.expiryAmount =
	Math.max(this.minExpirationInCurrentUnit, this.expiryAmount)
	this.expiryAmount =
	Math.min(this.maxExpirationInCurrentUnit, this.expiryAmount)
	this.updatePollToParent()
	},
	updatePollToParent () {
	const expiresIn = this.convertExpiryFromUnit(
	this.expiryUnit,
	this.expiryAmount
	)

	const options = uniq(this.options.filter(option => option !== ''))
	if (options.length < 2) {
	this.$emit('update-poll', { error: this.$t('polls.not_enough_options') })
	return
	}
	this.$emit('update-poll', {
	options,
	multiple: this.pollType === 'multiple',
	expiresIn
	})
	}
	}
	}
	diff --git a/src/components/remove_follower_button/remove_follower_button.js b/src/components/remove_follower_button/remove_follower_button.js
	index e1a7531bfe..052a519ff2 100644
	--- a/src/components/remove_follower_button/remove_follower_button.js
	+++ b/src/components/remove_follower_button/remove_follower_button.js
	@@ -1,25 +1,48 @@
	+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	+
	export default {
	- props: ['relationship'],
	+ props: ['user', 'relationship'],
	data () {
	return {
	- inProgress: false
	+ inProgress: false,
	+ showingConfirmRemoveFollower: false
	}
	},
	+ components: {
	+ ConfirmModal
	+ },
	computed: {
	label () {
	if (this.inProgress) {
	return this.$t('user_card.follow_progress')
	} else {
	return this.$t('user_card.remove_follower')
	}
	+ },
	+ shouldConfirmRemoveUserFromFollowers () {
	+ return this.$store.getters.mergedConfig.modalOnRemoveUserFromFollowers
	}
	},
	methods: {
	+ showConfirmRemoveUserFromFollowers () {
	+ this.showingConfirmRemoveFollower = true
	+ },
	+ hideConfirmRemoveUserFromFollowers () {
	+ this.showingConfirmRemoveFollower = false
	+ },
	onClick () {
	+ if (!this.shouldConfirmRemoveUserFromFollowers) {
	+ this.doRemoveUserFromFollowers()
	+ } else {
	+ this.showConfirmRemoveUserFromFollowers()
	+ }
	+ },
	+ doRemoveUserFromFollowers () {
	this.inProgress = true
	this.$store.dispatch('removeUserFromFollowers', this.relationship.id).then(() => {
	this.inProgress = false
	})
	+ this.hideConfirmRemoveUserFromFollowers()
	}
	}
	}
	diff --git a/src/components/remove_follower_button/remove_follower_button.vue b/src/components/remove_follower_button/remove_follower_button.vue
	index a3a4c24268..0012aebd13 100644
	--- a/src/components/remove_follower_button/remove_follower_button.vue
	+++ b/src/components/remove_follower_button/remove_follower_button.vue
	@@ -1,13 +1,34 @@
	<template>
	<button
	class="btn button-default follow-button"
	:class="{ toggled: inProgress }"
	:disabled="inProgress"
	:title="$t('user_card.remove_follower')"
	@click="onClick"
	>
	{{ label }}
	+ <teleport to="#modal">
	+ <confirm-modal
	+ v-if="showingConfirmRemoveFollower"
	+ :title="$t('user_card.remove_follower_confirm_title')"
	+ :confirm-text="$t('user_card.remove_follower_confirm_accept_button')"
	+ :cancel-text="$t('user_card.remove_follower_confirm_cancel_button')"
	+ @accepted="doRemoveUserFromFollowers"
	+ @cancelled="hideConfirmRemoveUserFromFollowers"
	+ >
	+ <i18n-t
	+ keypath="user_card.remove_follower_confirm"
	+ tag="span"
	+ >
	+ <template #user>
	+ <span
	+ v-text="user.screen_name_ui"
	+ />
	+ </template>
	+ </i18n-t>
	+ </confirm-modal>
	+ </teleport>
	</button>
	</template>

	<script src="./remove_follower_button.js"></script>
	diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
	index 4d92b5fa75..198b6c14b9 100644
	--- a/src/components/retweet_button/retweet_button.js
	+++ b/src/components/retweet_button/retweet_button.js
	@@ -1,46 +1,68 @@
	+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faRetweet,
	faPlus,
	faMinus,
	faCheck
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faRetweet,
	faPlus,
	faMinus,
	faCheck
	)

	const RetweetButton = {
	props: ['status', 'loggedIn', 'visibility'],
	+ components: {
	+ ConfirmModal
	+ },
	data () {
	return {
	- animated: false
	+ animated: false,
	+ showingConfirmDialog: false
	}
	},
	methods: {
	retweet () {
	+ if (!this.status.repeated && this.shouldConfirmRepeat) {
	+ this.showConfirmDialog()
	+ } else {
	+ this.doRetweet()
	+ }
	+ },
	+ doRetweet () {
	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)
	+ this.hideConfirmDialog()
	+ },
	+ showConfirmDialog () {
	+ this.showingConfirmDialog = true
	+ },
	+ hideConfirmDialog () {
	+ this.showingConfirmDialog = false
	}
	},
	computed: {
	mergedConfig () {
	return this.$store.getters.mergedConfig
	},
	remoteInteractionLink () {
	return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
	+ },
	+ shouldConfirmRepeat () {
	+ return this.mergedConfig.modalOnRepeat
	}
	}
	}

	export default RetweetButton
	diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
	index 7700ee0d56..134fcb36a2 100644
	--- a/src/components/retweet_button/retweet_button.vue
	+++ b/src/components/retweet_button/retweet_button.vue
	@@ -1,116 +1,128 @@
	<template>
	<div class="RetweetButton">
	<button
	v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn"
	class="button-unstyled interactive"
	:class="status.repeated && '-repeated'"
	:title="$t('tool_tip.repeat')"
	@click.prevent="retweet()"
	>
	<FALayers class="fa-old-padding-layer">
	<FAIcon
	class="fa-scale-110"
	icon="retweet"
	:spin="animated"
	/>
	<FAIcon
	v-if="status.repeated"
	class="active-marker"
	transform="shrink-6 up-9 right-12"
	icon="check"
	/>
	<FAIcon
	v-if="!status.repeated"
	class="focus-marker"
	transform="shrink-6 up-9 right-12"
	icon="plus"
	/>
	<FAIcon
	v-else
	class="focus-marker"
	transform="shrink-6 up-9 right-12"
	icon="minus"
	/>
	</FALayers>
	</button>
	<span v-else-if="loggedIn">
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="lock"
	:title="$t('timeline.no_retweet_hint')"
	/>
	</span>
	<a
	v-else
	class="button-unstyled interactive"
	target="_blank"
	role="button"
	:href="remoteInteractionLink"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="retweet"
	:title="$t('tool_tip.repeat')"
	/>
	</a>
	<span
	v-if="!mergedConfig.hidePostStats && status.repeat_num > 0"
	class="no-event"
	>
	{{ status.repeat_num }}
	</span>
	+ <teleport to="#modal">
	+ <confirm-modal
	+ v-if="showingConfirmDialog"
	+ :title="$t('status.repeat_confirm_title')"
	+ :confirm-text="$t('status.repeat_confirm_accept_button')"
	+ :cancel-text="$t('status.repeat_confirm_cancel_button')"
	+ @accepted="doRetweet"
	+ @cancelled="hideConfirmDialog"
	+ >
	+ {{ $t('status.repeat_confirm') }}
	+ </confirm-modal>
	+ </teleport>
	</div>
	</template>

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

	<style lang="scss">
	@import "../../variables";
	@import "../../mixins";

	.RetweetButton {
	display: flex;

	> :first-child {
	padding: 10px;
	margin: -10px -8px -10px -10px;
	}

	.action-counter {
	pointer-events: none;
	user-select: none;
	}

	.interactive {
	.svg-inline--fa {
	animation-duration: 0.6s;
	}

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

	@include unfocused-style {
	.focus-marker {
	visibility: hidden;
	}

	.active-marker {
	visibility: visible;
	}
	}

	@include focused-style {
	.focus-marker {
	visibility: visible;
	}

	.active-marker {
	visibility: hidden;
	}
	}
	}
	}
	</style>
	diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
	index 582cb2884f..703e94a0f5 100644
	--- a/src/components/settings_modal/tabs/general_tab.vue
	+++ b/src/components/settings_modal/tabs/general_tab.vue
	@@ -1,473 +1,523 @@
	<template>
	<div :label="$t('settings.general')">
	<div class="setting-item">
	<h2>{{ $t('settings.interface') }}</h2>
	<ul class="setting-list">
	<li>
	<interface-language-switcher
	:prompt-text="$t('settings.interfaceLanguage')"
	:language="language"
	:set-language="val => language = val"
	/>
	</li>
	<li v-if="instanceSpecificPanelPresent">
	<BooleanSetting path="hideISP">
	{{ $t('settings.hide_isp') }}
	</BooleanSetting>
	</li>
	<li v-if="instanceWallpaperUsed">
	<BooleanSetting path="hideInstanceWallpaper">
	{{ $t('settings.hide_wallpaper') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="stopGifs">
	{{ $t('settings.stop_gifs') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="streaming">
	{{ $t('settings.streaming') }}
	</BooleanSetting>
	<ul
	class="setting-list suboptions"
	:class="[{disabled: !streaming}]"
	>
	<li>
	<BooleanSetting
	path="pauseOnUnfocused"
	:disabled="!streaming"
	>
	{{ $t('settings.pause_on_unfocused') }}
	</BooleanSetting>
	</li>
	</ul>
	</li>
	<li>
	<BooleanSetting
	path="useStreamingApi"
	expert="1"
	>
	{{ $t('settings.useStreamingApi') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="virtualScrolling"
	expert="1"
	>
	{{ $t('settings.virtual_scrolling') }}
	</BooleanSetting>
	</li>
	<li>
	<ChoiceSetting
	id="userPopoverAvatarAction"
	path="userPopoverAvatarAction"
	:options="userPopoverAvatarActionOptions"
	expert="1"
	>
	{{ $t('settings.user_popover_avatar_action') }}
	</ChoiceSetting>
	</li>
	<li>
	<BooleanSetting
	path="userPopoverOverlay"
	expert="1"
	>
	{{ $t('settings.user_popover_avatar_overlay') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="alwaysShowNewPostButton"
	expert="1"
	>
	{{ $t('settings.always_show_post_button') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="autohideFloatingPostButton"
	expert="1"
	>
	{{ $t('settings.autohide_floating_post_button') }}
	</BooleanSetting>
	</li>
	<li v-if="instanceShoutboxPresent">
	<BooleanSetting
	path="hideShoutbox"
	expert="1"
	>
	{{ $t('settings.hide_shoutbox') }}
	</BooleanSetting>
	</li>
	<li>
	<h3>{{ $t('settings.columns') }}</h3>
	</li>
	<li>
	<BooleanSetting path="disableStickyHeaders">
	{{ $t('settings.disable_sticky_headers') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="showScrollbars">
	{{ $t('settings.show_scrollbars') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="sidebarRight">
	{{ $t('settings.right_sidebar') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="navbarColumnStretch">
	{{ $t('settings.navbar_column_stretch') }}
	</BooleanSetting>
	</li>
	<li>
	<ChoiceSetting
	v-if="user"
	id="thirdColumnMode"
	path="thirdColumnMode"
	:options="thirdColumnModeOptions"
	>
	{{ $t('settings.third_column_mode') }}
	</ChoiceSetting>
	</li>
	<li v-if="expertLevel > 0">
	{{ $t('settings.column_sizes') }}
	<div class="column-settings">
	<SizeSetting
	v-for="column in columns"
	:key="column"
	:path="column + 'ColumnWidth'"
	:units="horizontalUnits"
	expert="1"
	>
	{{ $t('settings.column_sizes_' + column) }}
	</SizeSetting>
	</div>
	</li>
	+ <li class="select-multiple">
	+ <span class="label">{{ $t('settings.confirm_dialogs') }}</span>
	+ <ul class="option-list">
	+ <li>
	+ <BooleanSetting path="modalOnRepeat">
	+ {{ $t('settings.confirm_dialogs_repeat') }}
	+ </BooleanSetting>
	+ </li>
	+ <li>
	+ <BooleanSetting path="modalOnUnfollow">
	+ {{ $t('settings.confirm_dialogs_unfollow') }}
	+ </BooleanSetting>
	+ </li>
	+ <li>
	+ <BooleanSetting path="modalOnBlock">
	+ {{ $t('settings.confirm_dialogs_block') }}
	+ </BooleanSetting>
	+ </li>
	+ <li>
	+ <BooleanSetting path="modalOnMute">
	+ {{ $t('settings.confirm_dialogs_mute') }}
	+ </BooleanSetting>
	+ </li>
	+ <li>
	+ <BooleanSetting path="modalOnDelete">
	+ {{ $t('settings.confirm_dialogs_delete') }}
	+ </BooleanSetting>
	+ </li>
	+ <li>
	+ <BooleanSetting path="modalOnLogout">
	+ {{ $t('settings.confirm_dialogs_logout') }}
	+ </BooleanSetting>
	+ </li>
	+ <li>
	+ <BooleanSetting path="modalOnApproveFollow">
	+ {{ $t('settings.confirm_dialogs_approve_follow') }}
	+ </BooleanSetting>
	+ </li>
	+ <li>
	+ <BooleanSetting path="modalOnDenyFollow">
	+ {{ $t('settings.confirm_dialogs_deny_follow') }}
	+ </BooleanSetting>
	+ </li>
	+ <li>
	+ <BooleanSetting path="modalOnRemoveUserFromFollowers">
	+ {{ $t('settings.confirm_dialogs_remove_follower') }}
	+ </BooleanSetting>
	+ </li>
	+ </ul>
	+ </li>
	</ul>
	</div>
	<div class="setting-item">
	<h2>{{ $t('settings.post_look_feel') }}</h2>
	<ul class="setting-list">
	<li>
	<ChoiceSetting
	id="conversationDisplay"
	path="conversationDisplay"
	:options="conversationDisplayOptions"
	>
	{{ $t('settings.conversation_display') }}
	</ChoiceSetting>
	</li>
	<ul
	v-if="conversationDisplay !== 'linear'"
	class="setting-list suboptions"
	>
	<li>
	<BooleanSetting path="conversationTreeAdvanced">
	{{ $t('settings.tree_advanced') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="conversationTreeFadeAncestors"
	:expert="1"
	>
	{{ $t('settings.tree_fade_ancestors') }}
	</BooleanSetting>
	</li>
	<li>
	<IntegerSetting
	path="maxDepthInThread"
	:min="3"
	:expert="1"
	>
	{{ $t('settings.max_depth_in_thread') }}
	</IntegerSetting>
	</li>
	<li>
	<ChoiceSetting
	id="conversationOtherRepliesButton"
	path="conversationOtherRepliesButton"
	:options="conversationOtherRepliesButtonOptions"
	:expert="1"
	>
	{{ $t('settings.conversation_other_replies_button') }}
	</ChoiceSetting>
	</li>
	</ul>
	<li>
	<BooleanSetting path="collapseMessageWithSubject">
	{{ $t('settings.collapse_subject') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="emojiReactionsOnTimeline"
	expert="1"
	>
	{{ $t('settings.emoji_reactions_on_timeline') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	v-if="user"
	path="serverSide_stripRichContent"
	expert="1"
	>
	{{ $t('settings.no_rich_text_description') }}
	</BooleanSetting>
	</li>
	<h3>{{ $t('settings.attachments') }}</h3>
	<li>
	<BooleanSetting
	path="useContainFit"
	expert="1"
	>
	{{ $t('settings.use_contain_fit') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="hideNsfw">
	{{ $t('settings.nsfw_clickthrough') }}
	</BooleanSetting>
	</li>
	<ul class="setting-list suboptions">
	<li>
	<BooleanSetting
	path="preloadImage"
	expert="1"
	:disabled="!hideNsfw"
	>
	{{ $t('settings.preload_images') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="useOneClickNsfw"
	expert="1"
	:disabled="!hideNsfw"
	>
	{{ $t('settings.use_one_click_nsfw') }}
	</BooleanSetting>
	</li>
	</ul>
	<li>
	<BooleanSetting
	path="loopVideo"
	expert="1"
	>
	{{ $t('settings.loop_video') }}
	</BooleanSetting>
	<ul
	class="setting-list suboptions"
	:class="[{disabled: !streaming}]"
	>
	<li>
	<BooleanSetting
	path="loopVideoSilentOnly"
	expert="1"
	:disabled="!loopVideo \|\| !loopSilentAvailable"
	>
	{{ $t('settings.loop_video_silent_only') }}
	</BooleanSetting>
	<div
	v-if="!loopSilentAvailable"
	class="unavailable"
	>
	<FAIcon icon="globe" />! {{ $t('settings.limited_availability') }}
	</div>
	</li>
	</ul>
	</li>
	<li>
	<BooleanSetting
	path="playVideosInModal"
	expert="1"
	>
	{{ $t('settings.play_videos_in_modal') }}
	</BooleanSetting>
	</li>
	<h3>{{ $t('settings.mention_links') }}</h3>
	<li>
	<ChoiceSetting
	id="mentionLinkDisplay"
	path="mentionLinkDisplay"
	:options="mentionLinkDisplayOptions"
	>
	{{ $t('settings.mention_link_display') }}
	</ChoiceSetting>
	</li>
	<li>
	<BooleanSetting
	path="mentionLinkShowTooltip"
	expert="1"
	>
	{{ $t('settings.mention_link_use_tooltip') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="useAtIcon"
	expert="1"
	>
	{{ $t('settings.use_at_icon') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="mentionLinkShowAvatar">
	{{ $t('settings.mention_link_show_avatar') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="mentionLinkFadeDomain"
	expert="1"
	>
	{{ $t('settings.mention_link_fade_domain') }}
	</BooleanSetting>
	</li>
	<li v-if="user">
	<BooleanSetting
	path="mentionLinkBoldenYou"
	expert="1"
	>
	{{ $t('settings.mention_link_bolden_you') }}
	</BooleanSetting>
	</li>
	<h3 v-if="expertLevel > 0">
	{{ $t('settings.fun') }}
	</h3>
	<li>
	<BooleanSetting
	path="greentext"
	expert="1"
	>
	{{ $t('settings.greentext') }}
	</BooleanSetting>
	</li>
	<li v-if="user">
	<BooleanSetting
	path="mentionLinkShowYous"
	expert="1"
	>
	{{ $t('settings.show_yous') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>

	<div
	v-if="user"
	class="setting-item"
	>
	<h2>{{ $t('settings.composing') }}</h2>
	<ul class="setting-list">
	<li>
	<label for="default-vis">
	{{ $t('settings.default_vis') }} <ServerSideIndicator :server-side="true" />
	<ScopeSelector
	class="scope-selector"
	:show-all="true"
	:user-default="serverSide_defaultScope"
	:initial-scope="serverSide_defaultScope"
	:on-scope-change="changeDefaultScope"
	/>
	</label>
	</li>
	<li>
	<!-- <BooleanSetting path="serverSide_defaultNSFW"> -->
	<BooleanSetting path="sensitiveByDefault">
	{{ $t('settings.sensitive_by_default') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="scopeCopy"
	expert="1"
	>
	{{ $t('settings.scope_copy') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="alwaysShowSubjectInput"
	expert="1"
	>
	{{ $t('settings.subject_input_always_show') }}
	</BooleanSetting>
	</li>
	<li>
	<ChoiceSetting
	id="subjectLineBehavior"
	path="subjectLineBehavior"
	:options="subjectLineOptions"
	expert="1"
	>
	{{ $t('settings.subject_line_behavior') }}
	</ChoiceSetting>
	</li>
	<li v-if="postFormats.length > 0">
	<ChoiceSetting
	id="postContentType"
	path="postContentType"
	:options="postContentOptions"
	>
	{{ $t('settings.post_status_content_type') }}
	</ChoiceSetting>
	</li>
	<li>
	<BooleanSetting
	path="minimalScopesMode"
	expert="1"
	>
	{{ $t('settings.minimal_scopes_mode') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="alwaysShowNewPostButton"
	expert="1"
	>
	{{ $t('settings.always_show_post_button') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="autohideFloatingPostButton"
	expert="1"
	>
	{{ $t('settings.autohide_floating_post_button') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="padEmoji"
	expert="1"
	>
	{{ $t('settings.pad_emoji') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>
	</div>
	</template>

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

	<style lang="scss">
	.column-settings {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	}

	.column-settings .size-label {
	display: block;
	margin-bottom: 0.5em;
	margin-top: 0.5em;
	}
	</style>
	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	index 6787930724..e17bf8eb28 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,208 +1,237 @@
	+import { unitToSeconds } from 'src/services/date_utils/date_utils.js'
	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 UserNote from '../user_note/user_note.vue'
	import Select from '../select/select.vue'
	import UserLink from '../user_link/user_link.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { mapGetters } from 'vuex'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faRss,
	faSearchPlus,
	faExternalLinkAlt,
	faEdit,
	faTimes,
	faExpandAlt
	} from '@fortawesome/free-solid-svg-icons'

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

	export default {
	props: [
	'userId',
	'switcher',
	'selected',
	'hideBio',
	'rounded',
	'bordered',
	'avatarAction', // default - open profile, 'zoom' - zoom, function - call function
	'onClose',
	'hasNoteEditor'
	],
	data () {
	return {
	followRequestInProgress: false,
	- betterShadow: this.$store.state.interface.browserSupport.cssFilter
	+ betterShadow: this.$store.state.interface.browserSupport.cssFilter,
	+ showingConfirmMute: false,
	+ muteExpiryAmount: 0,
	+ muteExpiryUnit: 'minutes'
	}
	},
	created () {
	this.$store.dispatch('fetchUserRelationship', this.user.id)
	},
	computed: {
	user () {
	return this.$store.getters.findUser(this.userId)
	},
	relationship () {
	return this.$store.getters.relationship(this.userId)
	},
	classes () {
	return [{
	'-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
	'-rounded': this.rounded === true, // set border-radius for all sides
	'-bordered': this.bordered === true, // set border for all sides
	'-popover': !!this.onClose // set popover rounding
	}]
	},
	style () {
	return {
	backgroundImage: [
	'linear-gradient(to bottom, var(--profileTint), var(--profileTint))',
	`url(${this.user.cover_photo})`
	].join(', ')
	}
	},
	isOtherUser () {
	return this.user.id !== this.$store.state.users.currentUser.id
	},
	subscribeUrl () {
	// eslint-disable-next-line no-undef
	const serverUrl = new URL(this.user.statusnet_profile_url)
	return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
	},
	loggedIn () {
	return this.$store.state.users.currentUser
	},
	dailyAvg () {
	const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
	return Math.round(this.user.statuses_count / days)
	},
	userHighlightType: {
	get () {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return (data && data.type) \|\| 'disabled'
	},
	set (type) {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	if (type !== 'disabled') {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) \|\| '#FFFFFF', type })
	} else {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
	}
	},
	...mapGetters(['mergedConfig'])
	},
	userHighlightColor: {
	get () {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return data && data.color
	},
	set (color) {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
	}
	},
	visibleRole () {
	const rights = this.user.rights
	if (!rights) { return }
	const validRole = rights.admin \|\| rights.moderator
	const roleTitle = rights.admin ? 'admin' : 'moderator'
	return validRole && roleTitle
	},
	hideFollowsCount () {
	return this.isOtherUser && this.user.hide_follows_count
	},
	hideFollowersCount () {
	return this.isOtherUser && this.user.hide_followers_count
	},
	showModerationMenu () {
	const privileges = this.loggedIn.privileges
	return this.loggedIn.role === 'admin' \|\| privileges.includes('users_manage_activation_state') \|\| privileges.includes('users_delete') \|\| privileges.includes('users_manage_tags')
	},
	hasNote () {
	return this.relationship.note
	},
	supportsNote () {
	return 'note' in this.relationship
	},
	+ shouldConfirmMute () {
	+ return this.mergedConfig.modalOnMute
	+ },
	+ muteExpiryUnits () {
	+ return ['minutes', 'hours', 'days']
	+ },
	...mapGetters(['mergedConfig'])
	},
	components: {
	UserAvatar,
	RemoteFollow,
	ModerationTools,
	AccountActions,
	ProgressButton,
	FollowButton,
	Select,
	RichContent,
	UserLink,
	- UserNote
	+ UserNote,
	+ ConfirmModal
	},
	methods: {
	+ showConfirmMute () {
	+ this.showingConfirmMute = true
	+ },
	+ hideConfirmMute () {
	+ this.showingConfirmMute = false
	+ },
	muteUser () {
	- this.$store.dispatch('muteUser', this.user.id)
	+ if (!this.shouldConfirmMute) {
	+ this.doMuteUser()
	+ } else {
	+ this.showConfirmMute()
	+ }
	+ },
	+ doMuteUser () {
	+ this.$store.dispatch('muteUser', {
	+ id: this.user.id,
	+ expiresIn: this.shouldConfirmMute ? unitToSeconds(this.muteExpiryUnit, this.muteExpiryAmount) : 0
	+ })
	+ this.hideConfirmMute()
	},
	unmuteUser () {
	this.$store.dispatch('unmuteUser', this.user.id)
	},
	subscribeUser () {
	return this.$store.dispatch('subscribeUser', this.user.id)
	},
	unsubscribeUser () {
	return this.$store.dispatch('unsubscribeUser', this.user.id)
	},
	setProfileView (v) {
	if (this.switcher) {
	const store = this.$store
	store.commit('setProfileView', { v })
	}
	},
	linkClicked ({ target }) {
	if (target.tagName === 'SPAN') {
	target = target.parentNode
	}
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	},
	userProfileLink (user) {
	return generateProfileLink(
	user.id, user.screen_name,
	this.$store.state.instance.restrictedNicknames
	)
	},
	openProfileTab () {
	this.$store.dispatch('openSettingsModalTab', 'profile')
	},
	zoomAvatar () {
	const attachment = {
	url: this.user.profile_image_url_original,
	mimetype: 'image'
	}
	this.$store.dispatch('setMedia', [attachment])
	this.$store.dispatch('setCurrentMedia', attachment)
	},
	mentionUser () {
	this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
	},
	onAvatarClickHandler (e) {
	if (this.onAvatarClick) {
	e.preventDefault()
	this.onAvatarClick()
	}
	}
	}
	}
	diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
	index d56b667203..4ab93a8a36 100644
	--- a/src/components/user_card/user_card.scss
	+++ b/src/components/user_card/user_card.scss
	@@ -1,357 +1,362 @@
	@import "../../variables";

	.user-card {
	position: relative;
	z-index: 1;

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

	.panel-heading {
	padding: 0.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);
	// Autoprefixer seem to ignore this one, and also syntax is different
	mask-composite: xor;
	mask-composite: exclude;
	background-size: cover;
	mask-size: 100% 60%;
	border-top-left-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
	border-top-right-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
	border-bottom-left-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
	border-bottom-right-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
	background-color: var(--profileBg);
	z-index: -2;

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

	&-bio {
	text-align: center;
	display: block;
	line-height: 1.3;
	padding: 1em;
	margin: 0;

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

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

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

	--__roundnessTop: var(--panelRadius);
	--__roundnessBottom: 0;
	}

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

	--__roundnessTop: var(--panelRadius);
	--__roundnessBottom: var(--panelRadius);
	}

	&.-popover {
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);

	--__roundnessTop: var(--tooltipRadius);
	--__roundnessBottom: var(--tooltipRadius);
	}

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

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

	&:hover {
	color: var(--icon);
	}
	}

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

	> * {
	min-width: 0;
	}

	> a {
	vertical-align: middle;
	display: flex;
	}

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

	width: 56px;
	height: 56px;
	object-fit: cover;
	}
	}

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

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

	svg {
	color: #fff;
	}
	}

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

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

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

	.bottom-line {
	font-weight: light;
	font-size: 1.1em;
	align-items: baseline;

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

	.user-screen-name {
	min-width: 1px;
	flex: 0 1 auto;
	text-overflow: ellipsis;
	overflow: hidden;
	}

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

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

	.user-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;
	line-height: 2em;

	--emoji-size: 1.7em;

	.top-line,
	.bottom-line {
	display: flex;
	}
	}

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

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

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

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

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

	.userHighlightSel {
	padding-top: 0;
	padding-bottom: 0;
	flex: 1 0 auto;
	}

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

	.userHighlightCl,
	.userHighlightText,
	.userHighlightSel {
	vertical-align: top;
	margin-right: 0.5em;
	margin-bottom: 0.25em;
	}
	}
	}

	.user-interactions {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	margin-right: -0.75em;

	> * {
	margin: 0 0.75em 0.6em 0;
	white-space: nowrap;
	min-width: 95px;
	}

	button {
	margin: 0;
	}
	}

	.user-note {
	margin: 0 0.75em 0.6em 0;
	}
	}

	.sidebar .edit-profile-button {
	display: none;
	}

	.user-counts {
	display: flex;
	line-height: 16px;
	padding: 0.5em 1.5em 0;
	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: 0.5em 0;
	margin: 0 0.5em;

	h5 {
	font-size: 1em;
	font-weight: bolder;
	margin: 0 0 0.25em;
	}

	/* stylelint-disable-next-line no-descending-specificity */
	a {
	text-decoration: none;
	}
	}
	+
	+.mute-expiry {
	+ display: flex;
	+ flex-direction: row;
	+}
	diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
	index 349c7cb160..2de14063de 100644
	--- a/src/components/user_card/user_card.vue
	+++ b/src/components/user_card/user_card.vue
	@@ -1,322 +1,369 @@
	<template>
	<div
	class="user-card"
	:class="classes"
	>
	<div
	:class="{ 'hide-bio': hideBio }"
	:style="style"
	class="background-image"
	/>
	<div :class="onClose ? '' : panel-heading -flexible-height">
	<div class="user-info">
	<div class="container">
	<a
	v-if="avatarAction === 'zoom'"
	class="user-info-avatar -link"
	@click="zoomAvatar"
	>
	<UserAvatar
	:better-shadow="betterShadow"
	:user="user"
	/>
	<div class="user-info-avatar -link -overlay">
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="search-plus"
	/>
	</div>
	</a>
	<UserAvatar
	v-else-if="typeof avatarAction === 'function'"
	class="user-info-avatar"
	:better-shadow="betterShadow"
	:user="user"
	@click="avatarAction"
	/>
	<router-link
	v-else
	:to="userProfileLink(user)"
	>
	<UserAvatar
	:better-shadow="betterShadow"
	:user="user"
	/>
	</router-link>
	<div class="user-summary">
	<div class="top-line">
	<router-link
	:to="userProfileLink(user)"
	class="user-name"
	>
	<RichContent
	:title="user.name"
	:html="user.name"
	:emoji="user.emoji"
	/>
	</router-link>
	<button
	v-if="!isOtherUser && user.is_local"
	class="button-unstyled edit-profile-button"
	@click.stop="openProfileTab"
	>
	<FAIcon
	fixed-width
	class="icon"
	icon="edit"
	:title="$t('user_card.edit_profile')"
	/>
	</button>
	<a
	v-if="isOtherUser && !user.is_local"
	:href="user.statusnet_profile_url"
	target="_blank"
	class="button-unstyled external-link-button"
	>
	<FAIcon
	class="icon"
	icon="external-link-alt"
	/>
	</a>
	<AccountActions
	v-if="isOtherUser && loggedIn"
	:user="user"
	:relationship="relationship"
	/>
	<router-link
	v-if="onClose"
	:to="userProfileLink(user)"
	class="button-unstyled external-link-button"
	@click="onClose"
	>
	<FAIcon
	class="icon"
	icon="expand-alt"
	/>
	</router-link>
	<button
	v-if="onClose"
	class="button-unstyled external-link-button"
	@click="onClose"
	>
	<FAIcon
	class="icon"
	icon="times"
	/>
	</button>
	</div>
	<div class="bottom-line">
	<user-link
	class="user-screen-name"
	:user="user"
	/>
	<template v-if="!hideBio">
	<span
	v-if="user.deactivated"
	class="alert user-role"
	>
	{{ $t('user_card.deactivated') }}
	</span>
	<span
	v-if="!!visibleRole"
	class="alert user-role"
	>
	{{ $t(`general.role.${visibleRole}`) }}
	</span>
	<span
	v-if="user.bot"
	class="alert user-role"
	>
	{{ $t('user_card.bot') }}
	</span>
	</template>
	<span v-if="user.locked">
	<FAIcon
	class="lock-icon"
	icon="lock"
	size="sm"
	/>
	</span>
	<span
	v-if="!mergedConfig.hideUserStats && !hideBio"
	class="dailyAvg"
	>{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
	</div>
	</div>
	</div>
	<div class="user-meta">
	<div
	v-if="relationship.followed_by && loggedIn && isOtherUser"
	class="following"
	>
	{{ $t('user_card.follows_you') }}
	</div>
	<div
	v-if="isOtherUser && (loggedIn \|\| !switcher)"
	class="highlighter"
	>
	<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
	<input
	v-if="userHighlightType !== 'disabled'"
	:id="'userHighlightColorTx'+user.id"
	v-model="userHighlightColor"
	class="userHighlightText"
	type="text"
	>
	<input
	v-if="userHighlightType !== 'disabled'"
	:id="'userHighlightColor'+user.id"
	v-model="userHighlightColor"
	class="userHighlightCl"
	type="color"
	>
	{{ ' ' }}
	<Select
	:id="'userHighlightSel'+user.id"
	v-model="userHighlightType"
	class="userHighlightSel"
	>
	<option value="disabled">
	{{ $t('user_card.highlight.disabled') }}
	</option>
	<option value="solid">
	{{ $t('user_card.highlight.solid') }}
	</option>
	<option value="striped">
	{{ $t('user_card.highlight.striped') }}
	</option>
	<option value="side">
	{{ $t('user_card.highlight.side') }}
	</option>
	</Select>
	</div>
	</div>
	<div
	v-if="loggedIn && isOtherUser"
	class="user-interactions"
	>
	<div class="btn-group">
	<FollowButton
	:relationship="relationship"
	:user="user"
	/>
	<template v-if="relationship.following">
	<ProgressButton
	v-if="!relationship.subscribing"
	class="btn button-default"
	:click="subscribeUser"
	:title="$t('user_card.subscribe')"
	>
	<FAIcon icon="bell" />
	</ProgressButton>
	<ProgressButton
	v-else
	class="btn button-default toggled"
	:click="unsubscribeUser"
	:title="$t('user_card.unsubscribe')"
	>
	<FALayers>
	<FAIcon
	icon="rss"
	transform="left-5 shrink-6 up-3 rotate-20"
	flip="horizontal"
	/>
	<FAIcon
	icon="rss"
	transform="right-5 shrink-6 up-3 rotate-20"
	/>
	<FAIcon icon="bell" />
	</FALayers>
	</ProgressButton>
	</template>
	</div>
	<div>
	<button
	v-if="relationship.muting"
	class="btn button-default btn-block toggled"
	:disabled="user.deactivated"
	@click="unmuteUser"
	>
	{{ $t('user_card.muted') }}
	</button>
	<button
	v-else
	class="btn button-default btn-block"
	:disabled="user.deactivated"
	@click="muteUser"
	>
	{{ $t('user_card.mute') }}
	</button>
	</div>
	<div>
	<button
	class="btn button-default btn-block"
	:disabled="user.deactivated"
	@click="mentionUser"
	>
	{{ $t('user_card.mention') }}
	</button>
	</div>
	<ModerationTools
	v-if="showModerationMenu"
	:user="user"
	/>
	</div>
	<div
	v-if="!loggedIn && user.is_local"
	class="user-interactions"
	>
	<RemoteFollow :user="user" />
	</div>
	<UserNote
	v-if="loggedIn && isOtherUser && (hasNote \|\| (hasNoteEditor && supportsNote))"
	:user="user"
	:relationship="relationship"
	:editable="hasNoteEditor"
	/>
	</div>
	</div>
	<div
	v-if="!hideBio"
	class="panel-body"
	>
	<div
	v-if="!mergedConfig.hideUserStats && switcher"
	class="user-counts"
	>
	<div
	class="user-count"
	@click.prevent="setProfileView('statuses')"
	>
	<h5>{{ $t('user_card.statuses') }}</h5>
	<span>{{ user.statuses_count }} <br></span>
	</div>
	<div
	class="user-count"
	@click.prevent="setProfileView('friends')"
	>
	<h5>{{ $t('user_card.followees') }}</h5>
	<span>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</span>
	</div>
	<div
	class="user-count"
	@click.prevent="setProfileView('followers')"
	>
	<h5>{{ $t('user_card.followers') }}</h5>
	<span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
	</div>
	</div>
	<RichContent
	v-if="!hideBio"
	class="user-card-bio"
	:html="user.description_html"
	:emoji="user.emoji"
	:handle-links="true"
	/>
	</div>
	+ <teleport to="#modal">
	+ <confirm-modal
	+ v-if="showingConfirmMute"
	+ :title="$t('user_card.mute_confirm_title')"
	+ :confirm-text="$t('user_card.mute_confirm_accept_button')"
	+ :cancel-text="$t('user_card.mute_confirm_cancel_button')"
	+ @accepted="doMuteUser"
	+ @cancelled="hideConfirmMute"
	+ >
	+ <i18n-t
	+ keypath="user_card.mute_confirm"
	+ tag="div"
	+ >
	+ <template #user>
	+ <span
	+ v-text="user.screen_name_ui"
	+ />
	+ </template>
	+ </i18n-t>
	+ <div
	+ class="mute-expiry"
	+ >
	+ <label>
	+ {{ $t('user_card.mute_duration_prompt') }}
	+ </label>
	+ <input
	+ v-model="muteExpiryAmount"
	+ type="number"
	+ class="expiry-amount hide-number-spinner"
	+ :min="0"
	+ >
	+ <Select
	+ v-model="muteExpiryUnit"
	+ unstyled="true"
	+ class="expiry-unit"
	+ >
	+ <option
	+ v-for="unit in muteExpiryUnits"
	+ :key="unit"
	+ :value="unit"
	+ >
	+ {{ $t(`time.${unit}_short`, ['']) }}
	+ </option>
	+ </Select>
	+ </div>
	+ </confirm-modal>
	+ </teleport>
	</div>
	</template>

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

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

	const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'

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

	/* TODO this is a bit messy.
	* We need to declare settings with their types and also deal with
	* instance-default settings in some way, hopefully try to avoid copy-pasta
	* in general.
	*/
	export const multiChoiceProperties = [
	'postContentType',
	'subjectLineBehavior',
	'conversationDisplay', // tree \| linear
	'conversationOtherRepliesButton', // below \| inside
	'mentionLinkDisplay', // short \| full_for_remote \| full
	'userPopoverAvatarAction' // close \| zoom \| open
	]

	export const defaultState = {
	expertLevel: 0, // used to track which settings to show and hide
	colors: {},
	theme: undefined,
	customTheme: undefined,
	customThemeSource: undefined,
	hideISP: false,
	hideInstanceWallpaper: false,
	hideShoutbox: false,
	// bad name: actually hides posts of muted USERS
	hideMutedPosts: undefined, // instance default
	hideMutedThreads: undefined, // instance default
	hideWordFilteredPosts: undefined, // instance default
	muteBotStatuses: undefined, // instance default
	collapseMessageWithSubject: undefined, // instance default
	padEmoji: true,
	hideAttachments: false,
	hideAttachmentsInConv: false,
	maxThumbnails: 16,
	hideNsfw: true,
	preloadImage: true,
	loopVideo: true,
	loopVideoSilentOnly: true,
	streaming: false,
	emojiReactionsOnTimeline: true,
	alwaysShowNewPostButton: false,
	autohideFloatingPostButton: false,
	pauseOnUnfocused: true,
	stopGifs: true,
	replyVisibility: 'all',
	thirdColumnMode: 'notifications',
	notificationVisibility: {
	follows: true,
	mentions: true,
	likes: true,
	repeats: true,
	moves: true,
	emojiReactions: true,
	followRequest: true,
	reports: true,
	chatMention: true,
	polls: true
	},
	webPushNotifications: false,
	muteWords: [],
	highlight: {},
	interfaceLanguage: browserLocale,
	hideScopeNotice: false,
	useStreamingApi: false,
	sidebarRight: undefined, // instance default
	scopeCopy: undefined, // instance default
	subjectLineBehavior: undefined, // instance default
	alwaysShowSubjectInput: undefined, // instance default
	postContentType: undefined, // instance default
	minimalScopesMode: undefined, // instance default
	// This hides statuses filtered via a word filter
	hideFilteredStatuses: undefined, // instance default
	+ modalOnRepeat: undefined, // instance default
	+ modalOnUnfollow: undefined, // instance default
	+ modalOnBlock: undefined, // instance default
	+ modalOnMute: undefined, // instance default
	+ modalOnDelete: undefined, // instance default
	+ modalOnLogout: undefined, // instance default
	+ modalOnApproveFollow: undefined, // instance default
	+ modalOnDenyFollow: undefined, // instance default
	+ modalOnRemoveUserFromFollowers: undefined, // instance default
	playVideosInModal: false,
	useOneClickNsfw: false,
	useContainFit: true,
	disableStickyHeaders: false,
	showScrollbars: false,
	userPopoverAvatarAction: 'open',
	userPopoverOverlay: false,
	sidebarColumnWidth: '25rem',
	contentColumnWidth: '45rem',
	notifsColumnWidth: '25rem',
	navbarColumnStretch: false,
	greentext: undefined, // instance default
	useAtIcon: undefined, // instance default
	mentionLinkDisplay: undefined, // instance default
	mentionLinkShowTooltip: undefined, // instance default
	mentionLinkShowAvatar: undefined, // instance default
	mentionLinkFadeDomain: undefined, // instance default
	mentionLinkShowYous: undefined, // instance default
	mentionLinkBoldenYou: undefined, // instance default
	hidePostStats: undefined, // instance default
	hideBotIndication: undefined, // instance default
	hideUserStats: undefined, // instance default
	virtualScrolling: undefined, // instance default
	sensitiveByDefault: undefined, // instance default
	conversationDisplay: undefined, // instance default
	conversationTreeAdvanced: undefined, // instance default
	conversationOtherRepliesButton: undefined, // instance default
	conversationTreeFadeAncestors: undefined, // instance default
	maxDepthInThread: 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: {
	defaultConfig (state, getters, rootState, rootGetters) {
	const { instance } = rootState
	return {
	...defaultState,
	...Object.fromEntries(
	instanceDefaultProperties.map(key => [key, instance[key]])
	)
	}
	},
	mergedConfig (state, getters, rootState, rootGetters) {
	const { defaultConfig } = rootGetters
	return {
	...defaultConfig,
	// Do not override with undefined
	...Object.fromEntries(Object.entries(state).filter(([k, v]) => v !== undefined))
	}
	}
	},
	mutations: {
	setOption (state, { name, value }) {
	state[name] = value
	},
	setHighlight (state, { user, color, type }) {
	const data = this.state.config.highlight[user]
	if (color \|\| type) {
	state.highlight[user] = { color: color \|\| data.color, type: type \|\| data.type }
	} else {
	delete state.highlight[user]
	}
	}
	},
	actions: {
	loadSettings ({ dispatch }, data) {
	const knownKeys = new Set(Object.keys(defaultState))
	const presentKeys = new Set(Object.keys(data))
	const intersection = new Set()
	for (const elem of presentKeys) {
	if (knownKeys.has(elem)) {
	intersection.add(elem)
	}
	}

	intersection.forEach(
	name => dispatch('setOption', { name, value: data[name] })
	)
	},
	setHighlight ({ commit, dispatch }, { user, color, type }) {
	commit('setHighlight', { user, color, type })
	},
	setOption ({ commit, dispatch, state }, { name, value }) {
	commit('setOption', { name, value })
	switch (name) {
	case 'theme':
	setPreset(value)
	break
	case 'sidebarColumnWidth':
	case 'contentColumnWidth':
	case 'notifsColumnWidth':
	applyConfig(state)
	break
	case 'customTheme':
	case 'customThemeSource':
	applyTheme(value)
	break
	case 'interfaceLanguage':
	messages.setLanguage(this.getters.i18n, value)
	dispatch('loadUnicodeEmojiData', value)
	Cookies.set(
	BACKEND_LANGUAGE_COOKIE_NAME,
	localeService.internalToBackendLocaleMulti(value)
	)
	break
	case 'thirdColumnMode':
	dispatch('setLayoutWidth', undefined)
	break
	}
	}
	}
	}

	export default config
	diff --git a/src/modules/instance.js b/src/modules/instance.js
	index 9e47a13abf..c7579162a6 100644
	--- a/src/modules/instance.js
	+++ b/src/modules/instance.js
	@@ -1,393 +1,402 @@
	import { getPreset, applyTheme } from '../services/style_setter/style_setter.js'
	import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
	import apiService from '../services/api/api.service.js'
	import { instanceDefaultProperties } from './config.js'
	import { langCodeToCldrName, ensureFinalFallback } from '../i18n/languages.js'

	const SORTED_EMOJI_GROUP_IDS = [
	'smileys-and-emotion',
	'people-and-body',
	'animals-and-nature',
	'food-and-drink',
	'travel-and-places',
	'activities',
	'objects',
	'symbols',
	'flags'
	]

	const REGIONAL_INDICATORS = (() => {
	const start = 0x1F1E6
	const end = 0x1F1FF
	const A = 'A'.codePointAt(0)
	const res = new Array(end - start + 1)
	for (let i = start; i <= end; ++i) {
	const letter = String.fromCodePoint(A + i - start)
	res[i - start] = {
	replacement: String.fromCodePoint(i),
	imageUrl: false,
	displayText: 'regional_indicator_' + letter,
	displayTextI18n: {
	key: 'emoji.regional_indicator',
	args: { letter }
	}
	}
	}
	return res
	})()

	const REMOTE_INTERACTION_URL = '/main/ostatus'

	const defaultState = {
	// Stuff from apiConfig
	name: 'Pleroma FE',
	registrationOpen: true,
	server: 'http://localhost:4040/',
	textlimit: 5000,
	themeData: undefined,
	vapidPublicKey: undefined,

	// Stuff from static/config.json
	alwaysShowSubjectInput: true,
	defaultAvatar: '/images/avi.png',
	defaultBanner: '/images/banner.png',
	background: '/static/aurora_borealis.jpg',
	collapseMessageWithSubject: false,
	greentext: false,
	useAtIcon: false,
	mentionLinkDisplay: 'short',
	mentionLinkShowTooltip: true,
	mentionLinkShowAvatar: false,
	mentionLinkFadeDomain: true,
	mentionLinkShowYous: false,
	mentionLinkBoldenYou: true,
	hideFilteredStatuses: false,
	// bad name: actually hides posts of muted USERS
	hideMutedPosts: false,
	hideMutedThreads: true,
	hideWordFilteredPosts: false,
	hidePostStats: false,
	hideBotIndication: false,
	hideSitename: false,
	hideUserStats: false,
	muteBotStatuses: false,
	+ modalOnRepeat: false,
	+ modalOnUnfollow: false,
	+ modalOnBlock: true,
	+ modalOnMute: false,
	+ modalOnDelete: true,
	+ modalOnLogout: true,
	+ modalOnApproveFollow: false,
	+ modalOnDenyFollow: false,
	+ modalOnRemoveUserFromFollowers: false,
	loginMethod: 'password',
	logo: '/static/logo.svg',
	logoMargin: '.2em',
	logoMask: true,
	logoLeft: false,
	disableUpdateNotification: false,
	minimalScopesMode: false,
	nsfwCensorImage: undefined,
	postContentType: 'text/plain',
	redirectRootLogin: '/main/friends',
	redirectRootNoLogin: '/main/all',
	scopeCopy: true,
	showFeaturesPanel: true,
	showInstanceSpecificPanel: false,
	sidebarRight: false,
	subjectLineBehavior: 'email',
	theme: 'pleroma-dark',
	virtualScrolling: true,
	sensitiveByDefault: false,
	conversationDisplay: 'linear',
	conversationTreeAdvanced: false,
	conversationOtherRepliesButton: 'below',
	conversationTreeFadeAncestors: false,
	maxDepthInThread: 6,

	// Nasty stuff
	customEmoji: [],
	customEmojiFetched: false,
	emoji: {},
	emojiFetched: false,
	unicodeEmojiAnnotations: {},
	pleromaBackend: true,
	postFormats: [],
	restrictedNicknames: [],
	safeDM: true,
	knownDomains: [],

	// Feature-set, apparently, not everything here is reported...
	shoutAvailable: false,
	pleromaChatMessagesAvailable: false,
	gopherAvailable: false,
	mediaProxyAvailable: 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 loadAnnotations = (lang) => {
	return import(
	/* webpackChunkName: "emoji-annotations/[request]" */
	`@kazvmoe-infra/unicode-emoji-json/annotations/${langCodeToCldrName(lang)}.json`
	)
	.then(k => k.default)
	}

	const injectAnnotations = (emoji, annotations) => {
	const availableLangs = Object.keys(annotations)

	return {
	...emoji,
	annotations: availableLangs.reduce((acc, cur) => {
	acc[cur] = annotations[cur][emoji.replacement]
	return acc
	}, {})
	}
	}

	const injectRegionalIndicators = groups => {
	groups.symbols.push(...REGIONAL_INDICATORS)
	return groups
	}

	const instance = {
	state: defaultState,
	mutations: {
	setInstanceOption (state, { name, value }) {
	if (typeof value !== 'undefined') {
	state[name] = value
	}
	},
	setKnownDomains (state, domains) {
	state.knownDomains = domains
	},
	setUnicodeEmojiAnnotations (state, { lang, annotations }) {
	state.unicodeEmojiAnnotations[lang] = annotations
	}
	},
	getters: {
	instanceDefaultConfig (state) {
	return instanceDefaultProperties
	.map(key => [key, state[key]])
	.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
	},
	groupedCustomEmojis (state) {
	const packsOf = emoji => {
	const packs = emoji.tags
	.filter(k => k.startsWith('pack:'))
	.map(k => {
	const packName = k.slice(5) // remove 'pack:' prefix
	return {
	id: `custom-${packName}`,
	text: packName
	}
	})

	if (!packs.length) {
	return [{
	id: 'unpacked'
	}]
	} else {
	return packs
	}
	}

	return state.customEmoji
	.reduce((res, emoji) => {
	packsOf(emoji).forEach(({ id: packId, text: packName }) => {
	if (!res[packId]) {
	res[packId] = ({
	id: packId,
	text: packName,
	image: emoji.imageUrl,
	emojis: []
	})
	}
	res[packId].emojis.push(emoji)
	})
	return res
	}, {})
	},
	standardEmojiList (state) {
	return SORTED_EMOJI_GROUP_IDS
	.map(groupId => (state.emoji[groupId] \|\| []).map(k => injectAnnotations(k, state.unicodeEmojiAnnotations)))
	.reduce((a, b) => a.concat(b), [])
	},
	standardEmojiGroupList (state) {
	return SORTED_EMOJI_GROUP_IDS.map(groupId => ({
	id: groupId,
	emojis: (state.emoji[groupId] \|\| []).map(k => injectAnnotations(k, state.unicodeEmojiAnnotations))
	}))
	},
	instanceDomain (state) {
	return new URL(state.server).hostname
	},
	remoteInteractionLink (state) {
	const server = state.server.endsWith('/') ? state.server.slice(0, -1) : state.server
	const link = server + REMOTE_INTERACTION_URL

	return ({ statusId, nickname }) => {
	if (statusId) {
	return `${link}?status_id=${statusId}`
	} else {
	return `${link}?nickname=${nickname}`
	}
	}
	}
	},
	actions: {
	setInstanceOption ({ commit, dispatch }, { name, value }) {
	commit('setInstanceOption', { name, value })
	switch (name) {
	case 'name':
	dispatch('setPageTitle')
	break
	case 'shoutAvailable':
	if (value) {
	dispatch('initializeSocket')
	}
	break
	case 'theme':
	dispatch('setTheme', value)
	break
	}
	},
	async getStaticEmoji ({ commit }) {
	try {
	const values = (await import(/* webpackChunkName: 'emoji' */ '../../static/emoji.json')).default

	const emoji = Object.keys(values).reduce((res, groupId) => {
	res[groupId] = values[groupId].map(e => ({
	displayText: e.slug,
	imageUrl: false,
	replacement: e.emoji
	}))
	return res
	}, {})
	commit('setInstanceOption', { name: 'emoji', value: injectRegionalIndicators(emoji) })
	} catch (e) {
	console.warn("Can't load static emoji")
	console.warn(e)
	}
	},

	loadUnicodeEmojiData ({ commit, state }, language) {
	const langList = ensureFinalFallback(language)

	return Promise.all(
	langList
	.map(async lang => {
	if (!state.unicodeEmojiAnnotations[lang]) {
	try {
	const annotations = await loadAnnotations(lang)
	commit('setUnicodeEmojiAnnotations', { lang, annotations })
	} catch (e) {
	console.warn(`Error loading unicode emoji annotations for ${lang}: `, e)
	// ignore
	}
	}
	}))
	},

	async getCustomEmoji ({ commit, state }) {
	try {
	const res = await window.fetch('/api/pleroma/emoji.json')
	if (res.ok) {
	const result = await res.json()
	const values = Array.isArray(result) ? Object.assign({}, ...result) : result
	const caseInsensitiveStrCmp = (a, b) => {
	const la = a.toLowerCase()
	const lb = b.toLowerCase()
	return la > lb ? 1 : (la < lb ? -1 : 0)
	}
	const noPackLast = (a, b) => {
	const aNull = a === ''
	const bNull = b === ''
	if (aNull === bNull) {
	return 0
	} else if (aNull && !bNull) {
	return 1
	} else {
	return -1
	}
	}
	const byPackThenByName = (a, b) => {
	const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] \|\| '').slice(5)
	const packOfA = packOf(a)
	const packOfB = packOf(b)
	return noPackLast(packOfA, packOfB) \|\| caseInsensitiveStrCmp(packOfA, packOfB) \|\| caseInsensitiveStrCmp(a.displayText, b.displayText)
	}

	const emoji = Object.entries(values).map(([key, value]) => {
	const imageUrl = value.image_url
	return {
	displayText: key,
	imageUrl: imageUrl ? state.server + imageUrl : value,
	tags: imageUrl ? value.tags.sort((a, b) => a > b ? 1 : 0) : ['utf'],
	replacement: `:${key}: `
	}
	// Technically could use tags but those are kinda useless right now,
	// should have been "pack" field, that would be more useful
	}).sort(byPackThenByName)
	commit('setInstanceOption', { name: 'customEmoji', value: emoji })
	} else {
	throw (res)
	}
	} catch (e) {
	console.warn("Can't load custom emojis")
	console.warn(e)
	}
	},

	setTheme ({ commit, rootState }, themeName) {
	commit('setInstanceOption', { name: 'theme', value: themeName })
	getPreset(themeName)
	.then(themeData => {
	commit('setInstanceOption', { name: 'themeData', value: themeData })
	// No need to apply theme if there's user theme already
	const { customTheme } = rootState.config
	if (customTheme) return

	// New theme presets don't have 'theme' property, they use 'source'
	const themeSource = themeData.source
	if (!themeData.theme \|\| (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
	applyTheme(themeSource)
	} else {
	applyTheme(themeData.theme)
	}
	})
	},
	fetchEmoji ({ dispatch, state }) {
	if (!state.customEmojiFetched) {
	state.customEmojiFetched = true
	dispatch('getCustomEmoji')
	}
	if (!state.emojiFetched) {
	state.emojiFetched = true
	dispatch('getStaticEmoji')
	}
	},

	async getKnownDomains ({ commit, rootState }) {
	try {
	const result = await apiService.fetchKnownDomains({
	credentials: rootState.users.currentUser.credentials
	})
	commit('setKnownDomains', result)
	} catch (e) {
	console.warn("Can't load known domains")
	console.warn(e)
	}
	}
	}
	}

	export default instance
	diff --git a/src/modules/users.js b/src/modules/users.js
	index 053e44b690..a1316ba259 100644
	--- a/src/modules/users.js
	+++ b/src/modules/users.js
	@@ -1,643 +1,646 @@
	import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
	import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
	import oauthApi from '../services/new_api/oauth.js'
	import { compact, map, each, mergeWith, last, concat, uniq, isArray } from 'lodash'
	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.
	mergeWith(oldItem, item, mergeArrayLength)
	return { item: oldItem, new: false }
	} else {
	// This is a new item, prepare it
	arr.push(item)
	obj[item.id] = item
	return { item, new: true }
	}
	}

	const mergeArrayLength = (oldValue, newValue) => {
	if (isArray(oldValue) && isArray(newValue)) {
	oldValue.length = newValue.length
	return mergeWith(oldValue, newValue, mergeArrayLength)
	}
	}

	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 removeUserFromFollowers = (store, id) => {
	return store.rootState.api.backendInteractor.removeUserFromFollowers({ id })
	.then((relationship) => store.commit('updateUserRelationship', [relationship]))
	}

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

	-const muteUser = (store, id) => {
	+const muteUser = (store, args) => {
	+ const id = typeof args === 'object' ? args.id : args
	+ const expiresIn = typeof args === 'object' ? args.expiresIn : 0
	+
	const predictedRelationship = store.state.relationships[id] \|\| { id }
	predictedRelationship.muting = true
	store.commit('updateUserRelationship', [predictedRelationship])
	store.commit('addMuteId', id)

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

	const unmuteUser = (store, id) => {
	const predictedRelationship = store.state.relationships[id] \|\| { id }
	predictedRelationship.muting = false
	store.commit('updateUserRelationship', [predictedRelationship])

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

	const muteDomain = (store, domain) => {
	return store.rootState.api.backendInteractor.muteDomain({ domain })
	.then(() => store.commit('addDomainMute', domain))
	}

	const unmuteDomain = (store, domain) => {
	return store.rootState.api.backendInteractor.unmuteDomain({ domain })
	.then(() => store.commit('removeDomainMute', domain))
	}

	export const mutations = {
	tagUser (state, { user: { id }, tag }) {
	const user = state.usersObject[id]
	const tags = user.tags \|\| []
	const newTags = tags.concat([tag])
	user.tags = newTags
	},
	untagUser (state, { user: { id }, tag }) {
	const user = state.usersObject[id]
	const tags = user.tags \|\| []
	const newTags = tags.filter(t => t !== tag)
	user.tags = newTags
	},
	updateRight (state, { user: { id }, right, value }) {
	const user = state.usersObject[id]
	const newRights = user.rights
	newRights[right] = value
	user.rights = newRights
	},
	updateActivationStatus (state, { user: { id }, deactivated }) {
	const user = state.usersObject[id]
	user.deactivated = deactivated
	},
	setCurrentUser (state, user) {
	state.lastLoginName = user.screen_name
	state.currentUser = mergeWith(state.currentUser \|\| {}, user, mergeArrayLength)
	},
	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) {
	user.friendIds = []
	}
	},
	clearFollowers (state, userId) {
	const user = state.usersObject[userId]
	if (user) {
	user.followerIds = []
	}
	},
	addNewUsers (state, users) {
	each(users, (user) => {
	if (user.relationship) {
	state.relationships[user.relationship.id] = user.relationship
	}
	const res = mergeOrAdd(state.users, state.usersObject, user)
	const item = res.item
	if (res.new && item.screen_name && !item.screen_name.includes('@')) {
	state.usersByNameObject[item.screen_name.toLowerCase()] = item
	}
	})
	},
	updateUserRelationship (state, relationships) {
	relationships.forEach((relationship) => {
	state.relationships[relationship.id] = relationship
	})
	},
	updateUserInLists (state, { id, inLists }) {
	state.usersObject[id].inLists = inLists
	},
	saveBlockIds (state, blockIds) {
	state.currentUser.blockIds = blockIds
	},
	addBlockId (state, blockId) {
	if (state.currentUser.blockIds.indexOf(blockId) === -1) {
	state.currentUser.blockIds.push(blockId)
	}
	},
	saveMuteIds (state, muteIds) {
	state.currentUser.muteIds = muteIds
	},
	addMuteId (state, muteId) {
	if (state.currentUser.muteIds.indexOf(muteId) === -1) {
	state.currentUser.muteIds.push(muteId)
	}
	},
	saveDomainMutes (state, domainMutes) {
	state.currentUser.domainMutes = domainMutes
	},
	addDomainMute (state, domain) {
	if (state.currentUser.domainMutes.indexOf(domain) === -1) {
	state.currentUser.domainMutes.push(domain)
	}
	},
	removeDomainMute (state, domain) {
	const index = state.currentUser.domainMutes.indexOf(domain)
	if (index !== -1) {
	state.currentUser.domainMutes.splice(index, 1)
	}
	},
	setPinnedToUser (state, status) {
	const user = state.usersObject[status.user.id]
	user.pinnedStatusIds = user.pinnedStatusIds \|\| []
	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]
	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 => {
	return state.usersObject[query]
	},
	findUserByName: state => query => {
	return state.usersByNameObject[query.toLowerCase()]
	},
	findUserByUrl: state => query => {
	return state.users
	.find(u => u.statusnet_profile_url &&
	u.statusnet_profile_url.toLowerCase() === query.toLowerCase())
	},
	relationship: state => id => {
	const rel = id && state.relationships[id]
	return rel \|\| { id, loading: true }
	}
	}

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

	const users = {
	state: defaultState,
	mutations,
	getters,
	actions: {
	fetchUserIfMissing (store, id) {
	if (!store.getters.findUser(id)) {
	store.dispatch('fetchUser', id)
	}
	},
	fetchUser (store, id) {
	return store.rootState.api.backendInteractor.fetchUser({ id })
	.then((user) => {
	store.commit('addNewUsers', [user])
	return user
	})
	},
	fetchUserByName (store, name) {
	return store.rootState.api.backendInteractor.fetchUserByName({ name })
	.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))
	}
	},
	fetchUserInLists (store, id) {
	if (store.state.currentUser) {
	store.rootState.api.backendInteractor.fetchUserInLists({ id })
	.then((inLists) => store.commit('updateUserInLists', { id, inLists }))
	}
	},
	fetchBlocks (store) {
	return store.rootState.api.backendInteractor.fetchBlocks()
	.then((blocks) => {
	store.commit('saveBlockIds', map(blocks, 'id'))
	store.commit('addNewUsers', blocks)
	return blocks
	})
	},
	blockUser (store, id) {
	return blockUser(store, id)
	},
	unblockUser (store, id) {
	return unblockUser(store, id)
	},
	removeUserFromFollowers (store, id) {
	return removeUserFromFollowers(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)))
	},
	editUserNote (store, args) {
	return editUserNote(store, args)
	},
	fetchMutes (store) {
	return store.rootState.api.backendInteractor.fetchMutes()
	.then((mutes) => {
	store.commit('saveMuteIds', map(mutes, 'id'))
	store.commit('addNewUsers', mutes)
	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)))
	},
	fetchDomainMutes (store) {
	return store.rootState.api.backendInteractor.fetchDomainMutes()
	.then((domainMutes) => {
	store.commit('saveDomainMutes', domainMutes)
	return domainMutes
	})
	},
	muteDomain (store, domain) {
	return muteDomain(store, domain)
	},
	unmuteDomain (store, domain) {
	return unmuteDomain(store, domain)
	},
	muteDomains (store, domains = []) {
	return Promise.all(domains.map(domain => muteDomain(store, domain)))
	},
	unmuteDomains (store, domain = []) {
	return Promise.all(domain.map(domain => unmuteDomain(store, domain)))
	},
	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]))
	},
	toggleActivationStatus ({ rootState, commit }, { user }) {
	const api = user.deactivated ? rootState.api.backendInteractor.activateUser : rootState.api.backendInteractor.deactivateUser
	api({ user })
	.then((user) => { const deactivated = !user.is_active; commit('updateActivationStatus', { user, deactivated }) })
	},
	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 targetUsers = map(notifications, 'target').filter(_ => _)
	const notificationIds = notifications.map(_ => _.id)
	store.commit('addNewUsers', users)
	store.commit('addNewUsers', targetUsers)

	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 ({ rootState, commit }, { query }) {
	return rootState.api.backendInteractor.searchUsers({ query })
	.then((users) => {
	commit('addNewUsers', users)
	return users
	})
	},
	async signUp (store, userInfo) {
	store.commit('signUpPending')

	const rootState = store.rootState

	try {
	const data = await rootState.api.backendInteractor.register(
	{ params: { ...userInfo } }
	)
	store.commit('signUpSuccess')
	store.commit('setToken', data.access_token)
	store.dispatch('loginUser', data.access_token)
	} catch (e) {
	const 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('stopFetchingTimeline', 'friends')
	store.commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
	store.dispatch('stopFetchingNotifications')
	store.dispatch('stopFetchingLists')
	store.dispatch('stopFetchingFollowRequests')
	store.commit('clearNotifications')
	store.commit('resetStatuses')
	store.dispatch('resetChats')
	store.dispatch('setLastTimeline', 'public-timeline')
	store.dispatch('setLayoutWidth', windowWidth())
	store.dispatch('setLayoutHeight', windowHeight())
	store.commit('clearServerSideStorage')
	})
	},
	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 = []
	user.domainMutes = []
	commit('setCurrentUser', user)
	commit('setServerSideStorage', user)
	commit('addNewUsers', [user])

	store.dispatch('fetchEmoji')

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

	// Set our new backend interactor
	commit('setBackendInteractor', backendInteractorService(accessToken))
	store.dispatch('pushServerSideStorage')

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

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

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

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

	// Start fetching chats
	store.dispatch('startFetchingChats')
	}

	store.dispatch('startFetchingLists')

	if (user.locked) {
	store.dispatch('startFetchingFollowRequests')
	}

	if (store.getters.mergedConfig.useStreamingApi) {
	store.dispatch('fetchTimeline', { timeline: 'friends', since: null })
	store.dispatch('fetchNotifications', { since: null })
	store.dispatch('enableMastoSockets', true).catch((error) => {
	console.error('Failed initializing MastoAPI Streaming socket', error)
	}).then(() => {
	store.dispatch('fetchChats', { latest: true })
	setTimeout(() => store.dispatch('setNotificationsSilence', false), 10000)
	})
	} else {
	startPolling()
	}

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

	store.dispatch('setLayoutWidth', windowWidth())
	store.dispatch('setLayoutHeight', windowHeight())

	// 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 af12265e89..b8c10b2138 100644
	--- a/src/services/api/api.service.js
	+++ b/src/services/api/api.service.js
	@@ -1,1774 +1,1778 @@
	import { each, map, concat, last, get } from 'lodash'
	import { parseStatus, parseSource, parseUser, parseNotification, parseAttachment, parseChat, parseLinkHeaderPagination } from '../entity_normalizer/entity_normalizer.service.js'
	import { RegistrationError, StatusCodeError } from '../errors/errors'

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

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

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

	const MASTODON_LOGIN_URL = '/api/v1/accounts/verify_credentials'
	const MASTODON_REGISTRATION_URL = '/api/v1/accounts'
	const MASTODON_USER_FAVORITES_TIMELINE_URL = '/api/v1/favourites'
	const MASTODON_USER_NOTIFICATIONS_URL = '/api/v1/notifications'
	const MASTODON_DISMISS_NOTIFICATION_URL = id => `/api/v1/notifications/${id}/dismiss`
	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_STATUS_SOURCE_URL = id => `/api/v1/statuses/${id}/source`
	const MASTODON_STATUS_HISTORY_URL = id => `/api/v1/statuses/${id}/history`
	const MASTODON_USER_URL = '/api/v1/accounts'
	const MASTODON_USER_LOOKUP_URL = '/api/v1/accounts/lookup'
	const MASTODON_USER_RELATIONSHIPS_URL = '/api/v1/accounts/relationships'
	const MASTODON_USER_TIMELINE_URL = id => `/api/v1/accounts/${id}/statuses`
	const MASTODON_USER_IN_LISTS = id => `/api/v1/accounts/${id}/lists`
	const MASTODON_LIST_URL = id => `/api/v1/lists/${id}`
	const MASTODON_LIST_TIMELINE_URL = id => `/api/v1/timelines/list/${id}`
	const MASTODON_LIST_ACCOUNTS_URL = id => `/api/v1/lists/${id}/accounts`
	const MASTODON_TAG_TIMELINE_URL = tag => `/api/v1/timelines/tag/${tag}`
	const MASTODON_BOOKMARK_TIMELINE_URL = '/api/v1/bookmarks'
	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_REMOVE_USER_FROM_FOLLOWERS = id => `/api/v1/accounts/${id}/remove_from_followers`
	const MASTODON_SUBSCRIBE_USER = id => `/api/v1/pleroma/accounts/${id}/subscribe`
	const MASTODON_UNSUBSCRIBE_USER = id => `/api/v1/pleroma/accounts/${id}/unsubscribe`
	const MASTODON_USER_NOTE_URL = id => `/api/v1/accounts/${id}/note`
	const MASTODON_BOOKMARK_STATUS_URL = id => `/api/v1/statuses/${id}/bookmark`
	const MASTODON_UNBOOKMARK_STATUS_URL = id => `/api/v1/statuses/${id}/unbookmark`
	const MASTODON_POST_STATUS_URL = '/api/v1/statuses'
	const MASTODON_MEDIA_UPLOAD_URL = '/api/v1/media'
	const MASTODON_VOTE_URL = id => `/api/v1/polls/${id}/votes`
	const MASTODON_POLL_URL = id => `/api/v1/polls/${id}`
	const MASTODON_STATUS_FAVORITEDBY_URL = id => `/api/v1/statuses/${id}/favourited_by`
	const MASTODON_STATUS_REBLOGGEDBY_URL = id => `/api/v1/statuses/${id}/reblogged_by`
	const MASTODON_PROFILE_UPDATE_URL = '/api/v1/accounts/update_credentials'
	const MASTODON_REPORT_USER_URL = '/api/v1/reports'
	const MASTODON_PIN_OWN_STATUS = id => `/api/v1/statuses/${id}/pin`
	const MASTODON_UNPIN_OWN_STATUS = id => `/api/v1/statuses/${id}/unpin`
	const MASTODON_MUTE_CONVERSATION = id => `/api/v1/statuses/${id}/mute`
	const MASTODON_UNMUTE_CONVERSATION = id => `/api/v1/statuses/${id}/unmute`
	const MASTODON_SEARCH_2 = '/api/v2/search'
	const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search'
	const MASTODON_DOMAIN_BLOCKS_URL = '/api/v1/domain_blocks'
	const MASTODON_LISTS_URL = '/api/v1/lists'
	const MASTODON_STREAMING = '/api/v1/streaming'
	const MASTODON_KNOWN_DOMAIN_LIST_URL = '/api/v1/instance/peers'
	const MASTODON_ANNOUNCEMENTS_URL = '/api/v1/announcements'
	const MASTODON_ANNOUNCEMENTS_DISMISS_URL = id => `/api/v1/announcements/${id}/dismiss`
	const PLEROMA_EMOJI_REACTIONS_URL = id => `/api/v1/pleroma/statuses/${id}/reactions`
	const PLEROMA_EMOJI_REACT_URL = (id, emoji) => `/api/v1/pleroma/statuses/${id}/reactions/${emoji}`
	const PLEROMA_EMOJI_UNREACT_URL = (id, emoji) => `/api/v1/pleroma/statuses/${id}/reactions/${emoji}`
	const PLEROMA_CHATS_URL = '/api/v1/pleroma/chats'
	const PLEROMA_CHAT_URL = id => `/api/v1/pleroma/chats/by-account-id/${id}`
	const PLEROMA_CHAT_MESSAGES_URL = id => `/api/v1/pleroma/chats/${id}/messages`
	const PLEROMA_CHAT_READ_URL = id => `/api/v1/pleroma/chats/${id}/read`
	const PLEROMA_DELETE_CHAT_MESSAGE_URL = (chatId, messageId) => `/api/v1/pleroma/chats/${chatId}/messages/${messageId}`
	const PLEROMA_ADMIN_REPORTS = '/api/pleroma/admin/reports'
	const PLEROMA_BACKUP_URL = '/api/v1/pleroma/backups'
	const PLEROMA_ANNOUNCEMENTS_URL = '/api/v1/pleroma/admin/announcements'
	const PLEROMA_POST_ANNOUNCEMENT_URL = '/api/v1/pleroma/admin/announcements'
	const PLEROMA_EDIT_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`
	const PLEROMA_DELETE_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`

	const oldfetch = window.fetch

	const 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)
	})
	.catch((error) => {
	return reject(new StatusCodeError(response.status, error, { url, options }, response))
	})
	)
	})
	}

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

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

	return fetch(`${NOTIFICATION_SETTINGS_URL}?${new URLSearchParams(settings)}`, {
	headers: authHeaders(credentials),
	method: 'PUT',
	body: form
	}).then((data) => data.json())
	}

	const updateProfileImages = ({ credentials, avatar = null, avatarName = null, banner = null, background = null }) => {
	const form = new FormData()
	if (avatar !== null) {
	if (avatarName !== null) {
	form.append('avatar', avatar, avatarName)
	} else {
	form.append('avatar', avatar)
	}
	}
	if (banner !== null) form.append('header', banner)
	if (background !== null) 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) => {
	if (data.error) {
	throw new Error(data.error)
	}
	return 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
	// language
	const register = ({ params, credentials }) => {
	const { nickname, ...rest } = params
	return fetch(MASTODON_REGISTRATION_URL, {
	method: 'POST',
	headers: {
	...authHeaders(credentials),
	'Content-Type': 'application/json'
	},
	body: JSON.stringify({
	nickname,
	locale: 'en_US',
	agreement: true,
	...rest
	})
	})
	.then((response) => {
	if (response.ok) {
	return response.json()
	} else {
	return response.json().then((error) => { throw new RegistrationError(error) })
	}
	})
	}

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

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

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

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

	const fetchUserInLists = ({ id, credentials }) => {
	const url = MASTODON_USER_IN_LISTS(id)
	return fetch(url, {
	headers: authHeaders(credentials)
	}).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 removeUserFromFollowers = ({ id, credentials }) => {
	return fetch(MASTODON_REMOVE_USER_FROM_FOLLOWERS(id), {
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const editUserNote = ({ id, credentials, comment }) => {
	return promisedRequest({
	url: MASTODON_USER_NOTE_URL(id),
	credentials,
	payload: {
	comment
	},
	method: 'POST'
	})
	}

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

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

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

	const fetchUserByName = ({ name, credentials }) => {
	return promisedRequest({
	url: MASTODON_USER_LOOKUP_URL,
	credentials,
	params: { acct: name }
	})
	.then(data => data.id)
	.catch(error => {
	if (error && error.statusCode === 404) {
	// Either the backend does not support lookup endpoint,
	// or there is no user with such name. Fallback and treat name as id.
	return name
	} else {
	throw error
	}
	})
	.then(id => fetchUser({ id, credentials }))
	}

	const fetchUserRelationship = ({ id, credentials }) => {
	const 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}`,
	'with_relationships=true'
	].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 }) => {
	// eslint-disable-next-line no-async-promise-executor
	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}`,
	'with_relationships=true'
	].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 fetchLists = ({ credentials }) => {
	const url = MASTODON_LISTS_URL
	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => data.json())
	}

	const createList = ({ title, credentials }) => {
	const url = MASTODON_LISTS_URL
	const headers = authHeaders(credentials)
	headers['Content-Type'] = 'application/json'

	return fetch(url, {
	headers,
	method: 'POST',
	body: JSON.stringify({ title })
	}).then((data) => data.json())
	}

	const getList = ({ listId, credentials }) => {
	const url = MASTODON_LIST_URL(listId)
	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => data.json())
	}

	const updateList = ({ listId, title, credentials }) => {
	const url = MASTODON_LIST_URL(listId)
	const headers = authHeaders(credentials)
	headers['Content-Type'] = 'application/json'

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

	const getListAccounts = ({ listId, credentials }) => {
	const url = MASTODON_LIST_ACCOUNTS_URL(listId)
	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => data.json())
	.then((data) => data.map(({ id }) => id))
	}

	const addAccountsToList = ({ listId, accountIds, credentials }) => {
	const url = MASTODON_LIST_ACCOUNTS_URL(listId)
	const headers = authHeaders(credentials)
	headers['Content-Type'] = 'application/json'

	return fetch(url, {
	headers,
	method: 'POST',
	body: JSON.stringify({ account_ids: accountIds })
	})
	}

	const removeAccountsFromList = ({ listId, accountIds, credentials }) => {
	const url = MASTODON_LIST_ACCOUNTS_URL(listId)
	const headers = authHeaders(credentials)
	headers['Content-Type'] = 'application/json'

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

	const deleteList = ({ listId, credentials }) => {
	const url = MASTODON_LIST_URL(listId)
	return fetch(url, {
	method: 'DELETE',
	headers: authHeaders(credentials)
	})
	}

	const fetchConversation = ({ id, credentials }) => {
	const 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 }) => {
	const 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 fetchStatusSource = ({ id, credentials }) => {
	const url = MASTODON_STATUS_SOURCE_URL(id)
	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => {
	if (data.ok) {
	return data
	}
	throw new Error('Error fetching source', data)
	})
	.then((data) => data.json())
	.then((data) => parseSource(data))
	}

	const fetchStatusHistory = ({ status, credentials }) => {
	const url = MASTODON_STATUS_HISTORY_URL(status.id)
	return promisedRequest({ url, credentials })
	.then((data) => {
	data.reverse()
	return data.map((item) => {
	item.originalStatus = status
	return parseStatus(item)
	})
	})
	}

	const tagUser = ({ tag, credentials, user }) => {
	const screenName = user.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,
	body: JSON.stringify(form)
	})
	}

	const untagUser = ({ tag, credentials, user }) => {
	const screenName = user.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,
	body: JSON.stringify(body)
	})
	}

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

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

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

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

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

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

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

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

	const fetchTimeline = ({
	timeline,
	credentials,
	since = false,
	until = false,
	userId = false,
	listId = false,
	tag = false,
	withMuted = false,
	replyVisibility = 'all',
	includeTypes = []
	}) => {
	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,
	list: MASTODON_LIST_TIMELINE_URL,
	favorites: MASTODON_USER_FAVORITES_TIMELINE_URL,
	tag: MASTODON_TAG_TIMELINE_URL,
	bookmarks: MASTODON_BOOKMARK_TIMELINE_URL
	}
	const isNotifications = timeline === 'notifications'
	const params = []

	let url = timelineUrls[timeline]

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

	if (timeline === 'list') {
	url = url(listId)
	}

	if (since) {
	params.push(['since_id', since])
	}
	if (until) {
	params.push(['max_id', until])
	}
	if (tag) {
	url = url(tag)
	}
	if (timeline === 'media') {
	params.push(['only_media', 1])
	}
	if (timeline === 'public') {
	params.push(['local', true])
	}
	if (timeline === 'public' \|\| timeline === 'publicAndExternal') {
	params.push(['only_media', false])
	}
	if (timeline !== 'favorites' && timeline !== 'bookmarks') {
	params.push(['with_muted', withMuted])
	}
	if (replyVisibility !== 'all') {
	params.push(['reply_visibility', replyVisibility])
	}
	if (includeTypes.length > 0) {
	includeTypes.forEach(type => {
	params.push(['include_types[]', type])
	})
	}

	params.push(['limit', 20])

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

	return fetch(url, { headers: authHeaders(credentials) })
	.then(async (response) => {
	const success = response.ok

	const data = await response.json()

	if (success && !data.errors) {
	const pagination = parseLinkHeaderPagination(response.headers.get('Link'), {
	flakeId: timeline !== 'bookmarks' && timeline !== 'notifications'
	})

	return { data: data.map(isNotifications ? parseNotification : parseStatus), pagination }
	} else {
	data.errors \|\|= []
	data.status = response.status
	data.statusText = response.statusText
	return data
	}
	})
	}

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

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

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

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

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

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

	const bookmarkStatus = ({ id, credentials }) => {
	return promisedRequest({
	url: MASTODON_BOOKMARK_STATUS_URL(id),
	headers: authHeaders(credentials),
	method: 'POST'
	})
	}

	const unbookmarkStatus = ({ id, credentials }) => {
	return promisedRequest({
	url: MASTODON_UNBOOKMARK_STATUS_URL(id),
	headers: authHeaders(credentials),
	method: 'POST'
	})
	}

	const postStatus = ({
	credentials,
	status,
	spoilerText,
	visibility,
	sensitive,
	poll,
	mediaIds = [],
	inReplyToStatusId,
	contentType,
	preview,
	idempotencyKey
	}) => {
	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)
	}
	if (preview) {
	form.append('preview', 'true')
	}

	const postHeaders = authHeaders(credentials)
	if (idempotencyKey) {
	postHeaders['idempotency-key'] = idempotencyKey
	}

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

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

	form.append('status', status)
	if (spoilerText) form.append('spoiler_text', spoilerText)
	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)
	})
	}

	const putHeaders = authHeaders(credentials)

	return fetch(MASTODON_STATUS_URL(id), {
	body: form,
	method: 'PUT',
	headers: putHeaders
	})
	.then((response) => {
	return response.json()
	})
	.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 setMediaDescription = ({ id, description, credentials }) => {
	return promisedRequest({
	url: `${MASTODON_MEDIA_UPLOAD_URL}/${id}`,
	method: 'PUT',
	headers: authHeaders(credentials),
	payload: {
	description
	}
	}).then((data) => parseAttachment(data))
	}

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

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

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

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

	form.append('password', password)

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

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

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

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

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

	form.append('password', password)
	form.append('target_account', targetAccount)

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

	const addAlias = ({ credentials, alias }) => {
	return promisedRequest({
	url: ALIASES_URL,
	method: 'PUT',
	credentials,
	payload: { alias }
	})
	}

	const deleteAlias = ({ credentials, alias }) => {
	return promisedRequest({
	url: ALIASES_URL,
	method: 'DELETE',
	credentials,
	payload: { alias }
	})
	}

	const listAliases = ({ credentials }) => {
	return promisedRequest({
	url: ALIASES_URL,
	method: 'GET',
	credentials,
	params: {
	_cacheBooster: (new Date()).getTime()
	}
	})
	}

	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 muteUser = ({ id, expiresIn, credentials }) => {
	+ const payload = {}
	+ if (expiresIn) {
	+ payload.expires_in = expiresIn
	+ }
	+ return promisedRequest({ url: MASTODON_MUTE_USER_URL(id), credentials, method: 'POST', payload })
	}

	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 addBackup = ({ credentials }) => {
	return promisedRequest({
	url: PLEROMA_BACKUP_URL,
	method: 'POST',
	credentials
	})
	}

	const listBackups = ({ credentials }) => {
	return promisedRequest({
	url: PLEROMA_BACKUP_URL,
	method: 'GET',
	credentials,
	params: {
	_cacheBooster: (new Date()).getTime()
	}
	})
	}

	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, single = false }) => {
	const body = new FormData()

	if (single) {
	body.append('id', id)
	} else {
	body.append('max_id', id)
	}

	return fetch(NOTIFICATION_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
	}
	})
	}

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

	const fetchFavoritedByUsers = ({ id, credentials }) => {
	return promisedRequest({
	url: MASTODON_STATUS_FAVORITEDBY_URL(id),
	method: 'GET',
	credentials
	}).then((users) => users.map(parseUser))
	}

	const fetchRebloggedByUsers = ({ id, credentials }) => {
	return promisedRequest({
	url: MASTODON_STATUS_REBLOGGEDBY_URL(id),
	method: 'GET',
	credentials
	}).then((users) => users.map(parseUser))
	}

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

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

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

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

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

	const search2 = ({ credentials, q, resolve, limit, offset, following, type }) => {
	let url = MASTODON_SEARCH_2
	const 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])
	}

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

	params.push(['with_relationships', true])

	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 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 fetchKnownDomains = ({ credentials }) => {
	return promisedRequest({ url: MASTODON_KNOWN_DOMAIN_LIST_URL, credentials })
	}

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

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

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

	const dismissNotification = ({ credentials, id }) => {
	return promisedRequest({
	url: MASTODON_DISMISS_NOTIFICATION_URL(id),
	method: 'POST',
	payload: { id },
	credentials
	})
	}

	const adminFetchAnnouncements = ({ credentials }) => {
	return promisedRequest({ url: PLEROMA_ANNOUNCEMENTS_URL, credentials })
	}

	const fetchAnnouncements = ({ credentials }) => {
	return promisedRequest({ url: MASTODON_ANNOUNCEMENTS_URL, credentials })
	}

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

	const announcementToPayload = ({ content, startsAt, endsAt, allDay }) => {
	const payload = { content }

	if (typeof startsAt !== 'undefined') {
	payload.starts_at = startsAt ? new Date(startsAt).toISOString() : null
	}

	if (typeof endsAt !== 'undefined') {
	payload.ends_at = endsAt ? new Date(endsAt).toISOString() : null
	}

	if (typeof allDay !== 'undefined') {
	payload.all_day = allDay
	}

	return payload
	}

	const postAnnouncement = ({ credentials, content, startsAt, endsAt, allDay }) => {
	return promisedRequest({
	url: PLEROMA_POST_ANNOUNCEMENT_URL,
	credentials,
	method: 'POST',
	payload: announcementToPayload({ content, startsAt, endsAt, allDay })
	})
	}

	const editAnnouncement = ({ id, credentials, content, startsAt, endsAt, allDay }) => {
	return promisedRequest({
	url: PLEROMA_EDIT_ANNOUNCEMENT_URL(id),
	credentials,
	method: 'PATCH',
	payload: announcementToPayload({ content, startsAt, endsAt, allDay })
	})
	}

	const deleteAnnouncement = ({ id, credentials }) => {
	return promisedRequest({
	url: PLEROMA_DELETE_ANNOUNCEMENT_URL(id),
	credentials,
	method: 'DELETE'
	})
	}

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

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

	const PLEROMA_STREAMING_EVENTS = new Set([
	'pleroma:chat_update'
	])

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

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

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

	return eventTarget
	}

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

	export const WSConnectionStatus = Object.freeze({
	JOINED: 1,
	CLOSED: 2,
	ERROR: 3,
	DISABLED: 4,
	STARTING: 5,
	STARTING_INITIAL: 6
	})

	const chats = ({ credentials }) => {
	return fetch(PLEROMA_CHATS_URL, { headers: authHeaders(credentials) })
	.then((data) => data.json())
	.then((data) => {
	return { chats: data.map(parseChat).filter(c => c) }
	})
	}

	const getOrCreateChat = ({ accountId, credentials }) => {
	return promisedRequest({
	url: PLEROMA_CHAT_URL(accountId),
	method: 'POST',
	credentials
	})
	}

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

	url = url + (args ? '?' + args : '')

	return promisedRequest({
	url,
	method: 'GET',
	credentials
	})
	}

	const sendChatMessage = ({ id, content, mediaId = null, idempotencyKey, credentials }) => {
	const payload = {
	content
	}

	if (mediaId) {
	payload.media_id = mediaId
	}

	const headers = {}

	if (idempotencyKey) {
	headers['idempotency-key'] = idempotencyKey
	}

	return promisedRequest({
	url: PLEROMA_CHAT_MESSAGES_URL(id),
	method: 'POST',
	payload,
	credentials,
	headers
	})
	}

	const readChat = ({ id, lastReadId, credentials }) => {
	return promisedRequest({
	url: PLEROMA_CHAT_READ_URL(id),
	method: 'POST',
	payload: {
	last_read_id: lastReadId
	},
	credentials
	})
	}

	const deleteChatMessage = ({ chatId, messageId, credentials }) => {
	return promisedRequest({
	url: PLEROMA_DELETE_CHAT_MESSAGE_URL(chatId, messageId),
	method: 'DELETE',
	credentials
	})
	}

	const setReportState = ({ id, state, credentials }) => {
	// TODO: Can't use promisedRequest because on OK this does not return json
	// See https://git.pleroma.social/pleroma/pleroma-fe/-/merge_requests/1322
	return fetch(PLEROMA_ADMIN_REPORTS, {
	headers: {
	...authHeaders(credentials),
	Accept: 'application/json',
	'Content-Type': 'application/json'
	},
	method: 'PATCH',
	body: JSON.stringify({
	reports: [{
	id,
	state
	}]
	})
	})
	.then(data => {
	if (data.status >= 500) {
	throw Error(data.statusText)
	} else if (data.status >= 400) {
	return data.json()
	}
	return data
	})
	.then(data => {
	if (data.errors) {
	throw Error(data.errors[0].message)
	}
	})
	}

	const apiService = {
	verifyCredentials,
	fetchTimeline,
	fetchPinnedStatuses,
	fetchConversation,
	fetchStatus,
	fetchStatusSource,
	fetchStatusHistory,
	fetchFriends,
	exportFriends,
	fetchFollowers,
	followUser,
	unfollowUser,
	pinOwnStatus,
	unpinOwnStatus,
	muteConversation,
	unmuteConversation,
	blockUser,
	unblockUser,
	removeUserFromFollowers,
	editUserNote,
	fetchUser,
	fetchUserByName,
	fetchUserRelationship,
	favorite,
	unfavorite,
	retweet,
	unretweet,
	bookmarkStatus,
	unbookmarkStatus,
	postStatus,
	editStatus,
	deleteStatus,
	uploadMedia,
	setMediaDescription,
	fetchMutes,
	muteUser,
	unmuteUser,
	subscribeUser,
	unsubscribeUser,
	fetchBlocks,
	fetchOAuthTokens,
	revokeOAuthToken,
	tagUser,
	untagUser,
	deleteUser,
	addRight,
	deleteRight,
	activateUser,
	deactivateUser,
	register,
	getCaptcha,
	updateProfileImages,
	updateProfile,
	importMutes,
	importBlocks,
	importFollows,
	deleteAccount,
	changeEmail,
	moveAccount,
	addAlias,
	deleteAlias,
	listAliases,
	changePassword,
	settingsMFA,
	mfaDisableOTP,
	generateMfaBackupCodes,
	mfaSetupOTP,
	mfaConfirmOTP,
	addBackup,
	listBackups,
	fetchFollowRequests,
	fetchLists,
	createList,
	getList,
	updateList,
	getListAccounts,
	addAccountsToList,
	removeAccountsFromList,
	deleteList,
	approveUser,
	denyUser,
	suggestions,
	markNotificationsAsSeen,
	dismissNotification,
	vote,
	fetchPoll,
	fetchFavoritedByUsers,
	fetchRebloggedByUsers,
	fetchEmojiReactions,
	reactWithEmoji,
	unreactWithEmoji,
	reportUser,
	updateNotificationSettings,
	search2,
	searchUsers,
	fetchKnownDomains,
	fetchDomainMutes,
	muteDomain,
	unmuteDomain,
	chats,
	getOrCreateChat,
	chatMessages,
	sendChatMessage,
	readChat,
	deleteChatMessage,
	setReportState,
	fetchUserInLists,
	fetchAnnouncements,
	dismissAnnouncement,
	postAnnouncement,
	editAnnouncement,
	deleteAnnouncement,
	adminFetchAnnouncements
	}

	export default apiService
	diff --git a/src/services/date_utils/date_utils.js b/src/services/date_utils/date_utils.js
	index c93d21761e..ed8e14170b 100644
	--- a/src/services/date_utils/date_utils.js
	+++ b/src/services/date_utils/date_utils.js
	@@ -1,43 +1,59 @@
	export const SECOND = 1000
	export const MINUTE = 60 * SECOND
	export const HOUR = 60 * MINUTE
	export const DAY = 24 * HOUR
	export const WEEK = 7 * DAY
	export const MONTH = 30 * DAY
	export const YEAR = 365.25 * DAY

	export const relativeTime = (date, nowThreshold = 1) => {
	if (typeof date === 'string') date = Date.parse(date)
	const round = Date.now() > date ? Math.floor : Math.ceil
	const d = Math.abs(Date.now() - date)
	const r = { num: round(d / YEAR), key: 'time.unit.years' }
	if (d < nowThreshold * SECOND) {
	r.num = 0
	r.key = 'time.now'
	} else if (d < MINUTE) {
	r.num = round(d / SECOND)
	r.key = 'time.unit.seconds'
	} else if (d < HOUR) {
	r.num = round(d / MINUTE)
	r.key = 'time.unit.minutes'
	} else if (d < DAY) {
	r.num = round(d / HOUR)
	r.key = 'time.unit.hours'
	} else if (d < WEEK) {
	r.num = round(d / DAY)
	r.key = 'time.unit.days'
	} else if (d < MONTH) {
	r.num = round(d / WEEK)
	r.key = 'time.unit.weeks'
	} else if (d < YEAR) {
	r.num = round(d / MONTH)
	r.key = 'time.unit.months'
	}
	return r
	}

	export const relativeTimeShort = (date, nowThreshold = 1) => {
	const r = relativeTime(date, nowThreshold)
	r.key += '_short'
	return r
	}
	+
	+export const unitToSeconds = (unit, amount) => {
	+ switch (unit) {
	+ case 'minutes': return 0.001 * amount * MINUTE
	+ case 'hours': return 0.001 * amount * HOUR
	+ case 'days': return 0.001 * amount * DAY
	+ }
	+}
	+
	+export const secondsToUnit = (unit, amount) => {
	+ switch (unit) {
	+ case 'minutes': return (1000 * amount) / MINUTE
	+ case 'hours': return (1000 * amount) / HOUR
	+ case 'days': return (1000 * amount) / DAY
	+ }
	+}

File Metadata

Mime Type: text/x-diff
Expires: Fri, Oct 30, 2:21 AM (1 d, 10 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1799203
Default Alt Text: (265 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions