No OneTemporary
Actions

Size

310 KB

Referenced Files

None

Subscribers

None

View Options

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

	diff --git a/CHANGELOG.md b/CHANGELOG.md
	index 18dafa8e26..f99677eeaf 100644
	--- a/CHANGELOG.md
	+++ b/CHANGELOG.md
	@@ -1,135 +1,148 @@
	# Changelog
	All notable changes to this project will be documented in this file.

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

	## [Unreleased]
	+### Added
	+- New option to optimize timeline rendering to make the site more responsive (enabled by default)
	+
	## [Unreleased patch]

	+### Fixed
	+- Fixed chats list not updating its order when new messages come in
	+- Fixed chat messages sometimes getting lost when you receive a message at the same time
	+
	+### Added
	+- Import/export a muted users
	+
	+## [2.1.1] - 2020-09-08
	### Changed
	- Polls will be hidden with status content if "Collapse posts with subjects" is enabled and the post is collapsed.

	### Fixed
	+- Network fetches don't pile up anymore but wait for previous ones to finish to reduce throttling.
	- Autocomplete won't stop at the second @, so it'll still work with "@lain@l" and not start over.
	- Fixed weird autocomplete behavior when you write ":custom_emoji: ?"

	+
	## [2.1.0] - 2020-08-28
	### Added
	- Autocomplete domains from list of known instances
	- 'Bot' settings option and badge
	- Added profile meta data fields that can be set in profile settings
	- Added option to reset avatar/banner in profile settings
	- Descriptions can be set on uploaded files before posting
	- Added status preview option to preview your statuses before posting
	- When a post is a reply to an unavailable post, the 'Reply to'-text has a strike-through style
	- Added ability to see all favoriting or repeating users when hovering the number on highlighted statuses
	- Bookmarks

	### Changed
	- Change heart to thumbs up in reaction picker
	- Close the media modal on navigation events
	- Add colons to the emoji alt text, to make them copyable
	- Add better visual indication for drag-and-drop for files
	- When disabling attachments, the placeholder links now show an icon and the description instead of just IMAGE or VIDEO etc
	- Remove unnecessary options for 'automatic loading when loading older' and 'reply previews'
	- Greentext now has separate color slot for it
	- Removed the use of with_move parameters when fetching notifications
	- Push notifications now are the same as normal notfication, and are localized.
	- Updated Notification Settings to match new BE API

	### Fixed
	- Custom Emoji will display in poll options now.
	- Status ellipsis menu closes properly when selecting certain options
	- Cropped images look correct in Chrome
	- Newlines in the muted words settings work again
	- Clicking on non-latin hashtags won't open a new window
	- Uploading and drag-dropping multiple files works correctly now.
	- Subject field now appears disabled when posting
	- Fix status ellipsis menu being cut off in notifications column
	- Fixed autocomplete sometimes not returning the right user when there's already some results
	- Videos and audio and misc files show description as alt/title properly now
	- Clicking on non-image/video files no longer opens an empty modal
	- Audio files can now be played back in the frontend with hidden attachments
	- Videos are not cropped awkwardly in the uploads section anymore
	- Reply filtering options in Settings -> Filtering now work again using filtering on server
	- Don't show just blank-screen when cookies are disabled
	- Add status idempotency to prevent accidental double posting when posting returns an error
	- Weird bug related to post being sent seemingly after pasting with keyboard (hopefully)
	- Multiple issues with muted statuses/notifications

	## [2.0.5] - 2020-05-12
	### Added
	- Added private notifications option for push notifications
	- 'Copy link' button for statuses (in the ellipsis menu)

	### Changed
	- Registration page no longer requires email if the server is configured not to require it

	### Fixed
	- Status ellipsis menu closes properly when selecting certain options

	## [2.0.3] - 2020-05-02
	### Fixed
	- Show more/less works correctly with auto-collapsed subjects and long posts
	- RTL characters won't look messed up in notifications

	### Changed
	- Emoji autocomplete will match any part of the word and not just start, for example :drool will now helpfully suggest :blobcatdrool: and :blobcatdroolreach:

	### Added
	- Follow request notification support

	## [2.0.2] - 2020-04-08
	### Fixed
	- Favorite/Repeat avatars not showing up on private instances/non-public posts
	- Autocorrect getting triggered in the captcha field
	- Overflow on long domains in follow/move notifications

	### Changed
	- Polish translation updated

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

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

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

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

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

	h4 {
	margin: 0;
	}

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

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

	html {
	font-size: 14px;
	}

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

	&.hidden {
	display: none;
	}
	}

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

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

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

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

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

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

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

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

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

	input, textarea, .select, .input {

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

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

	&.select {
	padding: 0;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	.auto-size {
	flex: 1
	}

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

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

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

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

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


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

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

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

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

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

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

	main-router {
	flex: 1;
	}

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

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

	/* Panel */

	.panel {
	display: flex;
	position: relative;

	flex-direction: column;
	margin: 0.5em;

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

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

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

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

	pointer-events: none;

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

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

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

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

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

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

	button {
	flex-shrink: 0;
	}

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

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

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

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

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

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

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

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


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

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

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

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

	.fa {
	color: grey;
	}

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

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

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

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

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

	.mobile-shown {
	display: none;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	.panel-switcher {
	display: flex;
	}

	.container {
	padding: 0;
	}

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

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

	.main {
	margin-bottom: 7em;
	}
	}

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

	.login-hint {
	text-align: center;

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

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

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

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

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

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

	.new-status-notification {
	position:relative;
	margin-top: -1px;
	font-size: 1.1em;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: var(--border, $fallback--border);
	padding: 10px;
	z-index: 1;
	background-color: $fallback--fg;
	background-color: var(--panel, $fallback--fg);
	}

	.unread-chat-count {
	font-size: 0.9em;
	font-weight: bolder;
	font-style: normal;
	position: absolute;
	right: 0.6rem;
	padding: 0 0.3em;
	min-width: 1.3rem;
	min-height: 1.3rem;
	max-height: 1.3rem;
	line-height: 1.3rem;
	+ max-width: 10em;
	+ overflow: hidden;
	+ text-overflow: ellipsis;
	}

	.chat-layout {
	// Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens).
	overflow: hidden;
	height: 100%;

	// Ensures the fixed position of the mobile browser bars on scroll up / down events.
	// Prevents the mobile browser bars from overlapping or hiding the message posting form.
	@media all and (max-width: 800px) {
	body {
	height: 100%;
	}

	#app {
	height: 100%;
	overflow: hidden;
	min-height: auto;
	}

	#app_bg_wrapper {
	overflow: hidden;
	}

	.main {
	overflow: hidden;
	height: 100%;
	}

	#content {
	padding-top: 0;
	height: 100%;
	overflow: visible;
	}
	}
	}
	diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
	index 63e0cebad2..7fabc963e0 100644
	--- a/src/components/attachment/attachment.vue
	+++ b/src/components/attachment/attachment.vue
	@@ -1,306 +1,310 @@
	<template>
	<div
	v-if="usePlaceholder"
	:class="{ 'fullwidth': fullwidth }"
	@click="openModal"
	>
	<a
	v-if="type !== 'html'"
	class="placeholder"
	target="_blank"
	:href="attachment.url"
	:alt="attachment.description"
	:title="attachment.description"
	>
	<span :class="placeholderIconClass" />
	<b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
	</a>
	</div>
	<div
	v-else
	v-show="!isEmpty"
	class="attachment"
	:class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
	>
	<a
	v-if="hidden"
	class="image-attachment"
	:href="attachment.url"
	:alt="attachment.description"
	:title="attachment.description"
	@click.prevent="toggleHidden"
	>
	<img
	:key="nsfwImage"
	class="nsfw"
	:src="nsfwImage"
	:class="{'small': isSmall}"
	>
	<i
	v-if="type === 'video'"
	class="play-icon icon-play-circled"
	/>
	</a>
	<div
	v-if="nsfw && hideNsfwLocal && !hidden"
	class="hider"
	>
	<a
	href="#"
	@click.prevent="toggleHidden"
	>Hide</a>
	</div>

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

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

	<audio
	v-if="type === 'audio'"
	:src="attachment.url"
	:alt="attachment.description"
	:title="attachment.description"
	controls
	+ @play="$emit('play')"
	+ @pause="$emit('pause')"
	/>

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

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

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

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

	.non-gallery {
	max-width: 100%;
	}

	.placeholder {
	display: inline-block;
	padding: 0.3em 1em 0.3em 0;
	color: $fallback--link;
	color: var(--postLink, $fallback--link);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 100%;
	}

	.nsfw-placeholder {
	cursor: pointer;

	&.loading {
	cursor: progress;
	}
	}

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

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

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

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

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

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

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

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

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

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

	video {
	z-index: 0;
	}

	audio {
	width: 100%;
	}

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

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

	img {
	width: 100%;
	}

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

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

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

	&.hidden {
	display: none;
	}

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

	img {
	image-orientation: from-image; // NOTE: only FF supports this
	}
	}
	}
	</style>
	diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
	index 9c4e5b0554..34e723d0fb 100644
	--- a/src/components/chat/chat.js
	+++ b/src/components/chat/chat.js
	@@ -1,333 +1,338 @@
	import _ from 'lodash'
	import { WSConnectionStatus } from '../../services/api/api.service.js'
	import { mapGetters, mapState } from 'vuex'
	import ChatMessage from '../chat_message/chat_message.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	import ChatTitle from '../chat_title/chat_title.vue'
	import chatService from '../../services/chat_service/chat_service.js'
	+import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
	import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'

	const BOTTOMED_OUT_OFFSET = 10
	const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
	const SAFE_RESIZE_TIME_OFFSET = 100

	const Chat = {
	components: {
	ChatMessage,
	ChatTitle,
	PostStatusForm
	},
	data () {
	return {
	jumpToBottomButtonVisible: false,
	hoveredMessageChainId: undefined,
	lastScrollPosition: {},
	scrollableContainerHeight: '100%',
	errorLoadingChat: false
	}
	},
	created () {
	this.startFetching()
	window.addEventListener('resize', this.handleLayoutChange)
	},
	mounted () {
	window.addEventListener('scroll', this.handleScroll)
	if (typeof document.hidden !== 'undefined') {
	document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
	}

	this.$nextTick(() => {
	this.updateScrollableContainerHeight()
	this.handleResize()
	})
	this.setChatLayout()
	},
	destroyed () {
	window.removeEventListener('scroll', this.handleScroll)
	window.removeEventListener('resize', this.handleLayoutChange)
	this.unsetChatLayout()
	if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
	this.$store.dispatch('clearCurrentChat')
	},
	computed: {
	recipient () {
	return this.currentChat && this.currentChat.account
	},
	recipientId () {
	return this.$route.params.recipient_id
	},
	formPlaceholder () {
	if (this.recipient) {
	return this.$t('chats.message_user', { nickname: this.recipient.screen_name })
	} else {
	return ''
	}
	},
	chatViewItems () {
	return chatService.getView(this.currentChatMessageService)
	},
	newMessageCount () {
	return this.currentChatMessageService && this.currentChatMessageService.newMessageCount
	},
	streamingEnabled () {
	return this.mergedConfig.useStreamingApi && this.mastoUserSocketStatus === WSConnectionStatus.JOINED
	},
	...mapGetters([
	'currentChat',
	'currentChatMessageService',
	'findOpenedChatByRecipientId',
	'mergedConfig'
	]),
	...mapState({
	backendInteractor: state => state.api.backendInteractor,
	mastoUserSocketStatus: state => state.api.mastoUserSocketStatus,
	mobileLayout: state => state.interface.mobileLayout,
	layoutHeight: state => state.interface.layoutHeight,
	currentUser: state => state.users.currentUser
	})
	},
	watch: {
	chatViewItems () {
	// We don't want to scroll to the bottom on a new message when the user is viewing older messages.
	// Therefore we need to know whether the scroll position was at the bottom before the DOM update.
	const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET)
	this.$nextTick(() => {
	if (bottomedOutBeforeUpdate) {
	this.scrollDown({ forceRead: !document.hidden })
	}
	})
	},
	'$route': function () {
	this.startFetching()
	},
	layoutHeight () {
	this.handleResize({ expand: true })
	},
	mastoUserSocketStatus (newValue) {
	if (newValue === WSConnectionStatus.JOINED) {
	this.fetchChat({ isFirstFetch: true })
	}
	}
	},
	methods: {
	// Used to animate the avatar near the first message of the message chain when any message belonging to the chain is hovered
	onMessageHover ({ isHovered, messageChainId }) {
	this.hoveredMessageChainId = isHovered ? messageChainId : undefined
	},
	onFilesDropped () {
	this.$nextTick(() => {
	this.handleResize()
	this.updateScrollableContainerHeight()
	})
	},
	handleVisibilityChange () {
	this.$nextTick(() => {
	if (!document.hidden && this.bottomedOut(BOTTOMED_OUT_OFFSET)) {
	this.scrollDown({ forceRead: true })
	}
	})
	},
	setChatLayout () {
	// This is a hacky way to adjust the global layout to the mobile chat (without modifying the rest of the app).
	// This layout prevents empty spaces from being visible at the bottom
	// of the chat on iOS Safari (`safe-area-inset`) when
	// - the on-screen keyboard appears and the user starts typing
	// - the user selects the text inside the input area
	// - the user selects and deletes the text that is multiple lines long
	// TODO: unify the chat layout with the global layout.
	let html = document.querySelector('html')
	if (html) {
	html.classList.add('chat-layout')
	}

	this.$nextTick(() => {
	this.updateScrollableContainerHeight()
	})
	},
	unsetChatLayout () {
	let html = document.querySelector('html')
	if (html) {
	html.classList.remove('chat-layout')
	}
	},
	handleLayoutChange () {
	this.$nextTick(() => {
	this.updateScrollableContainerHeight()
	this.scrollDown()
	})
	},
	// Ensures the proper position of the posting form in the mobile layout (the mobile browser panel does not overlap or hide it)
	updateScrollableContainerHeight () {
	const header = this.$refs.header
	const footer = this.$refs.footer
	const inner = this.mobileLayout ? window.document.body : this.$refs.inner
	this.scrollableContainerHeight = scrollableContainerHeight(inner, header, footer) + 'px'
	},
	// Preserves the scroll position when OSK appears or the posting form changes its height.
	handleResize (opts = {}) {
	const { expand = false, delayed = false } = opts

	if (delayed) {
	setTimeout(() => {
	this.handleResize({ ...opts, delayed: false })
	}, SAFE_RESIZE_TIME_OFFSET)
	return
	}

	this.$nextTick(() => {
	this.updateScrollableContainerHeight()

	const { offsetHeight = undefined } = this.lastScrollPosition
	this.lastScrollPosition = getScrollPosition(this.$refs.scrollable)

	const diff = this.lastScrollPosition.offsetHeight - offsetHeight
	if (diff < 0 \|\| (!this.bottomedOut() && expand)) {
	this.$nextTick(() => {
	this.updateScrollableContainerHeight()
	this.$refs.scrollable.scrollTo({
	top: this.$refs.scrollable.scrollTop - diff,
	left: 0
	})
	})
	}
	})
	},
	scrollDown (options = {}) {
	const { behavior = 'auto', forceRead = false } = options
	const scrollable = this.$refs.scrollable
	if (!scrollable) { return }
	this.$nextTick(() => {
	scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
	})
	if (forceRead \|\| this.newMessageCount > 0) {
	this.readChat()
	}
	},
	readChat () {
	- if (!(this.currentChatMessageService && this.currentChatMessageService.lastMessage)) { return }
	+ if (!(this.currentChatMessageService && this.currentChatMessageService.maxId)) { return }
	if (document.hidden) { return }
	- const lastReadId = this.currentChatMessageService.lastMessage.id
	+ const lastReadId = this.currentChatMessageService.maxId
	this.$store.dispatch('readChat', { id: this.currentChat.id, lastReadId })
	},
	bottomedOut (offset) {
	return isBottomedOut(this.$refs.scrollable, offset)
	},
	reachedTop () {
	const scrollable = this.$refs.scrollable
	return scrollable && scrollable.scrollTop <= 0
	},
	handleScroll: _.throttle(function () {
	if (!this.currentChat) { return }

	if (this.reachedTop()) {
	this.fetchChat({ maxId: this.currentChatMessageService.minId })
	} else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
	this.jumpToBottomButtonVisible = false
	if (this.newMessageCount > 0) {
	this.readChat()
	}
	} else {
	this.jumpToBottomButtonVisible = true
	}
	}, 100),
	handleScrollUp (positionBeforeLoading) {
	const positionAfterLoading = getScrollPosition(this.$refs.scrollable)
	this.$refs.scrollable.scrollTo({
	top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
	left: 0
	})
	},
	fetchChat ({ isFirstFetch = false, fetchLatest = false, maxId }) {
	const chatMessageService = this.currentChatMessageService
	if (!chatMessageService) { return }
	if (fetchLatest && this.streamingEnabled) { return }

	const chatId = chatMessageService.chatId
	const fetchOlderMessages = !!maxId
	- const sinceId = fetchLatest && chatMessageService.lastMessage && chatMessageService.lastMessage.id
	+ const sinceId = fetchLatest && chatMessageService.maxId

	- this.backendInteractor.chatMessages({ id: chatId, maxId, sinceId })
	+ return this.backendInteractor.chatMessages({ id: chatId, maxId, sinceId })
	.then((messages) => {
	// Clear the current chat in case we're recovering from a ws connection loss.
	if (isFirstFetch) {
	chatService.clear(chatMessageService)
	}

	const positionBeforeUpdate = getScrollPosition(this.$refs.scrollable)
	this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => {
	this.$nextTick(() => {
	if (fetchOlderMessages) {
	this.handleScrollUp(positionBeforeUpdate)
	}

	if (isFirstFetch) {
	this.updateScrollableContainerHeight()
	}
	})
	})
	})
	},
	async startFetching () {
	let chat = this.findOpenedChatByRecipientId(this.recipientId)
	if (!chat) {
	try {
	chat = await this.backendInteractor.getOrCreateChat({ accountId: this.recipientId })
	} catch (e) {
	console.error('Error creating or getting a chat', e)
	this.errorLoadingChat = true
	}
	}
	if (chat) {
	this.$nextTick(() => {
	this.scrollDown({ forceRead: true })
	})
	this.$store.dispatch('addOpenedChat', { chat })
	this.doStartFetching()
	}
	},
	doStartFetching () {
	this.$store.dispatch('startFetchingCurrentChat', {
	- fetcher: () => setInterval(() => this.fetchChat({ fetchLatest: true }), 5000)
	+ fetcher: () => promiseInterval(() => this.fetchChat({ fetchLatest: true }), 5000)
	})
	this.fetchChat({ isFirstFetch: true })
	},
	sendMessage ({ status, media }) {
	const params = {
	id: this.currentChat.id,
	content: status
	}

	if (media[0]) {
	params.mediaId = media[0].id
	}

	return this.backendInteractor.sendChatMessage(params)
	.then(data => {
	- this.$store.dispatch('addChatMessages', { chatId: this.currentChat.id, messages: [data] }).then(() => {
	+ this.$store.dispatch('addChatMessages', {
	+ chatId: this.currentChat.id,
	+ messages: [data],
	+ updateMaxId: false
	+ }).then(() => {
	this.$nextTick(() => {
	this.handleResize()
	// When the posting form size changes because of a media attachment, we need an extra resize
	// to account for the potential delay in the DOM update.
	setTimeout(() => {
	this.updateScrollableContainerHeight()
	}, SAFE_RESIZE_TIME_OFFSET)
	this.scrollDown({ forceRead: true })
	})
	})

	return data
	})
	.catch(error => {
	console.error('Error sending message', error)
	return {
	error: this.$t('chats.error_sending_message')
	}
	})
	},
	goBack () {
	this.$router.push({ name: 'chats', params: { username: this.currentUser.screen_name } })
	}
	}
	}

	export default Chat
	diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
	index ca529b5ab7..570435e7d3 100644
	--- a/src/components/chat_panel/chat_panel.vue
	+++ b/src/components/chat_panel/chat_panel.vue
	@@ -1,139 +1,139 @@
	<template>
	<div
	v-if="!collapsed \|\| !floating"
	class="chat-panel"
	>
	<div class="panel panel-default">
	<div
	class="panel-heading timeline-heading"
	:class="{ 'chat-heading': floating }"
	@click.stop.prevent="togglePanel"
	>
	<div class="title">
	<span>{{ $t('shoutbox.title') }}</span>
	<i
	v-if="floating"
	class="icon-cancel"
	/>
	</div>
	</div>
	<div
	v-chat-scroll
	class="chat-window"
	>
	<div
	v-for="message in messages"
	:key="message.id"
	class="chat-message"
	>
	<span class="chat-avatar">
	<img :src="message.author.avatar">
	</span>
	<div class="chat-content">
	<router-link
	class="chat-name"
	:to="userProfileLink(message.author)"
	>
	{{ message.author.username }}
	</router-link>
	<br>
	<span class="chat-text">
	{{ message.text }}
	</span>
	</div>
	</div>
	</div>
	<div class="chat-input">
	<textarea
	v-model="currentMessage"
	class="chat-input-textarea"
	rows="1"
	@keyup.enter="submit(currentMessage)"
	/>
	</div>
	</div>
	</div>
	<div
	v-else
	class="chat-panel"
	>
	<div class="panel panel-default">
	<div
	class="panel-heading stub timeline-heading chat-heading"
	@click.stop.prevent="togglePanel"
	>
	<div class="title">
	- <i class="icon-comment-empty" />
	+ <i class="icon-megaphone" />
	{{ $t('shoutbox.title') }}
	</div>
	</div>
	</div>
	</div>
	</template>

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

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

	.floating-chat {
	position: fixed;
	right: 0px;
	bottom: 0px;
	z-index: 1000;
	max-width: 25em;
	}

	.chat-panel {
	.chat-heading {
	cursor: pointer;
	.icon-comment-empty {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}

	.chat-window {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 20em;
	}

	.chat-window-container {
	height: 100%;
	}

	.chat-message {
	display: flex;
	padding: 0.2em 0.5em
	}

	.chat-avatar {
	img {
	height: 24px;
	width: 24px;
	border-radius: $fallback--avatarRadius;
	border-radius: var(--avatarRadius, $fallback--avatarRadius);
	margin-right: 0.5em;
	margin-top: 0.25em;
	}
	}

	.chat-input {
	display: flex;
	textarea {
	flex: 1;
	margin: 0.6em;
	min-height: 3.5em;
	resize: none;
	}
	}

	.chat-panel {
	.title {
	display: flex;
	justify-content: space-between;
	}
	}
	}
	</style>
	diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
	index 45fb2bf6eb..069c0b4077 100644
	--- a/src/components/conversation/conversation.js
	+++ b/src/components/conversation/conversation.js
	@@ -1,168 +1,186 @@
	import { reduce, filter, findIndex, clone, get } from 'lodash'
	import Status from '../status/status.vue'

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

	const sortAndFilterConversation = (conversation, statusoid) => {
	if (statusoid.type === 'retweet') {
	conversation = filter(
	conversation,
	(status) => (status.type === 'retweet' \|\| status.id !== statusoid.retweeted_status.id)
	)
	} else {
	conversation = filter(conversation, (status) => status.type !== 'retweet')
	}
	return conversation.filter(_ => _).sort(sortById)
	}

	const conversation = {
	data () {
	return {
	highlight: null,
	expanded: false
	}
	},
	props: [
	'statusId',
	'collapsable',
	'isPage',
	'pinnedStatusIdsObject',
	'inProfile',
	- 'profileUserId'
	+ 'profileUserId',
	+ 'virtualHidden'
	],
	created () {
	if (this.isPage) {
	this.fetchConversation()
	}
	},
	computed: {
	+ hideStatus () {
	+ if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
	+ return this.virtualHidden && this.$refs.statusComponent[0].suspendable
	+ } else {
	+ return this.virtualHidden
	+ }
	+ },
	status () {
	return this.$store.state.statuses.allStatusesObject[this.statusId]
	},
	originalStatusId () {
	if (this.status.retweeted_status) {
	return this.status.retweeted_status.id
	} else {
	return this.statusId
	}
	},
	conversationId () {
	return this.getConversationId(this.statusId)
	},
	conversation () {
	if (!this.status) {
	return []
	}

	if (!this.isExpanded) {
	return [this.status]
	}

	const conversation = clone(this.$store.state.statuses.conversationsObject[this.conversationId])
	const statusIndex = findIndex(conversation, { id: this.originalStatusId })
	if (statusIndex !== -1) {
	conversation[statusIndex] = this.status
	}

	return sortAndFilterConversation(conversation, this.status)
	},
	replies () {
	let i = 1
	// eslint-disable-next-line camelcase
	return reduce(this.conversation, (result, { id, in_reply_to_status_id }) => {
	/* eslint-disable camelcase */
	const irid = in_reply_to_status_id
	/* eslint-enable camelcase */
	if (irid) {
	result[irid] = result[irid] \|\| []
	result[irid].push({
	name: `#${i}`,
	id: id
	})
	}
	i++
	return result
	}, {})
	},
	isExpanded () {
	return this.expanded \|\| this.isPage
	+ },
	+ hiddenStyle () {
	+ const height = (this.status && this.status.virtualHeight) \|\| '120px'
	+ return this.virtualHidden ? { height } : {}
	}
	},
	components: {
	Status
	},
	watch: {
	statusId (newVal, oldVal) {
	const newConversationId = this.getConversationId(newVal)
	const oldConversationId = this.getConversationId(oldVal)
	if (newConversationId && oldConversationId && newConversationId === oldConversationId) {
	this.setHighlight(this.originalStatusId)
	} else {
	this.fetchConversation()
	}
	},
	expanded (value) {
	if (value) {
	this.fetchConversation()
	}
	+ },
	+ virtualHidden (value) {
	+ this.$store.dispatch(
	+ 'setVirtualHeight',
	+ { statusId: this.statusId, height: `${this.$el.clientHeight}px` }
	+ )
	}
	},
	methods: {
	fetchConversation () {
	if (this.status) {
	this.$store.state.api.backendInteractor.fetchConversation({ id: this.statusId })
	.then(({ ancestors, descendants }) => {
	this.$store.dispatch('addNewStatuses', { statuses: ancestors })
	this.$store.dispatch('addNewStatuses', { statuses: descendants })
	this.setHighlight(this.originalStatusId)
	})
	} else {
	this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
	.then((status) => {
	this.$store.dispatch('addNewStatuses', { statuses: [status] })
	this.fetchConversation()
	})
	}
	},
	getReplies (id) {
	return this.replies[id] \|\| []
	},
	focused (id) {
	return (this.isExpanded) && id === this.statusId
	},
	setHighlight (id) {
	if (!id) return
	this.highlight = id
	this.$store.dispatch('fetchFavsAndRepeats', id)
	this.$store.dispatch('fetchEmojiReactionsBy', id)
	},
	getHighlight () {
	return this.isExpanded ? this.highlight : null
	},
	toggleExpanded () {
	this.expanded = !this.expanded
	},
	getConversationId (statusId) {
	const status = this.$store.state.statuses.allStatusesObject[statusId]
	return get(status, 'retweeted_status.statusnet_conversation_id', get(status, 'statusnet_conversation_id'))
	}
	}
	}

	export default conversation
	diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
	index 997a4d10b8..e0b9fcc5d1 100644
	--- a/src/components/conversation/conversation.vue
	+++ b/src/components/conversation/conversation.vue
	@@ -1,67 +1,74 @@
	<template>
	<div
	+ v-if="!hideStatus"
	+ :style="hiddenStyle"
	class="Conversation"
	:class="{ '-expanded' : isExpanded, 'panel' : isExpanded }"
	>
	<div
	v-if="isExpanded"
	class="panel-heading conversation-heading"
	>
	<span class="title"> {{ $t('timeline.conversation') }} </span>
	<span v-if="collapsable">
	<a
	href="#"
	@click.prevent="toggleExpanded"
	>{{ $t('timeline.collapse') }}</a>
	</span>
	</div>
	<status
	v-for="status in conversation"
	:key="status.id"
	+ ref="statusComponent"
	:inline-expanded="collapsable && isExpanded"
	:statusoid="status"
	:expandable="!isExpanded"
	:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
	:focused="focused(status.id)"
	:in-conversation="isExpanded"
	:highlight="getHighlight()"
	:replies="getReplies(status.id)"
	:in-profile="inProfile"
	:profile-user-id="profileUserId"
	class="conversation-status status-fadein panel-body"
	@goto="setHighlight"
	@toggleExpanded="toggleExpanded"
	/>
	</div>
	+ <div
	+ v-else
	+ :style="hiddenStyle"
	+ />
	</template>

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

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

	.Conversation {
	.conversation-status {
	border-left: none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: var(--border, $fallback--border);
	border-radius: 0;
	}

	&.-expanded {
	.conversation-status {
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	- border-left: 4px solid $fallback--cRed;
	- border-left: 4px solid var(--cRed, $fallback--cRed);
	+ border-left-color: $fallback--cRed;
	+ border-left-color: var(--cRed, $fallback--cRed);
	}

	.conversation-status:last-child {
	border-bottom: none;
	border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
	}
	}
	}
	</style>
	diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
	index 0f397b59f3..5c09f6ca7b 100644
	--- a/src/components/emoji_picker/emoji_picker.js
	+++ b/src/components/emoji_picker/emoji_picker.js
	@@ -1,187 +1,190 @@
	import Checkbox from '../checkbox/checkbox.vue'

	// At widest, approximately 20 emoji are visible in a row,
	// loading 3 rows, could be overkill for narrow picker
	const LOAD_EMOJI_BY = 60

	// When to start loading new batch emoji, in pixels
	const LOAD_EMOJI_MARGIN = 64

	const filterByKeyword = (list, keyword = '') => {
	- return list.filter(x => x.displayText.includes(keyword))
	+ const keywordLowercase = keyword.toLowerCase()
	+ return list.filter(emoji =>
	+ emoji.displayText.toLowerCase().includes(keywordLowercase)
	+ )
	}

	const EmojiPicker = {
	props: {
	enableStickerPicker: {
	required: false,
	type: Boolean,
	default: false
	}
	},
	data () {
	return {
	keyword: '',
	activeGroup: 'custom',
	showingStickers: false,
	groupsScrolledClass: 'scrolled-top',
	keepOpen: false,
	customEmojiBufferSlice: LOAD_EMOJI_BY,
	customEmojiTimeout: null,
	customEmojiLoadAllConfirmed: false
	}
	},
	components: {
	StickerPicker: () => import('../sticker_picker/sticker_picker.vue'),
	Checkbox
	},
	methods: {
	onStickerUploaded (e) {
	this.$emit('sticker-uploaded', e)
	},
	onStickerUploadFailed (e) {
	this.$emit('sticker-upload-failed', e)
	},
	onEmoji (emoji) {
	const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
	this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
	},
	onScroll (e) {
	const target = (e && e.target) \|\| this.$refs['emoji-groups']
	this.updateScrolledClass(target)
	this.scrolledGroup(target)
	this.triggerLoadMore(target)
	},
	highlight (key) {
	const ref = this.$refs['group-' + key]
	const top = ref[0].offsetTop
	this.setShowStickers(false)
	this.activeGroup = key
	this.$nextTick(() => {
	this.$refs['emoji-groups'].scrollTop = top + 1
	})
	},
	updateScrolledClass (target) {
	if (target.scrollTop <= 5) {
	this.groupsScrolledClass = 'scrolled-top'
	} else if (target.scrollTop >= target.scrollTopMax - 5) {
	this.groupsScrolledClass = 'scrolled-bottom'
	} else {
	this.groupsScrolledClass = 'scrolled-middle'
	}
	},
	triggerLoadMore (target) {
	const ref = this.$refs['group-end-custom'][0]
	if (!ref) return
	const bottom = ref.offsetTop + ref.offsetHeight

	const scrollerBottom = target.scrollTop + target.clientHeight
	const scrollerTop = target.scrollTop
	const scrollerMax = target.scrollHeight

	// Loads more emoji when they come into view
	const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
	// Always load when at the very top in case there's no scroll space yet
	const atTop = scrollerTop < 5
	// Don't load when looking at unicode category or at the very bottom
	const bottomAboveViewport = bottom < scrollerTop \|\| scrollerBottom === scrollerMax
	if (!bottomAboveViewport && (approachingBottom \|\| atTop)) {
	this.loadEmoji()
	}
	},
	scrolledGroup (target) {
	const top = target.scrollTop + 5
	this.$nextTick(() => {
	this.emojisView.forEach(group => {
	const ref = this.$refs['group-' + group.id]
	if (ref[0].offsetTop <= top) {
	this.activeGroup = group.id
	}
	})
	})
	},
	loadEmoji () {
	const allLoaded = this.customEmojiBuffer.length === this.filteredEmoji.length

	if (allLoaded) {
	return
	}

	this.customEmojiBufferSlice += LOAD_EMOJI_BY
	},
	startEmojiLoad (forceUpdate = false) {
	if (!forceUpdate) {
	this.keyword = ''
	}
	this.$nextTick(() => {
	this.$refs['emoji-groups'].scrollTop = 0
	})
	const bufferSize = this.customEmojiBuffer.length
	const bufferPrefilledAll = bufferSize === this.filteredEmoji.length
	if (bufferPrefilledAll && !forceUpdate) {
	return
	}
	this.customEmojiBufferSlice = LOAD_EMOJI_BY
	},
	toggleStickers () {
	this.showingStickers = !this.showingStickers
	},
	setShowStickers (value) {
	this.showingStickers = value
	}
	},
	watch: {
	keyword () {
	this.customEmojiLoadAllConfirmed = false
	this.onScroll()
	this.startEmojiLoad(true)
	}
	},
	computed: {
	activeGroupView () {
	return this.showingStickers ? '' : this.activeGroup
	},
	stickersAvailable () {
	if (this.$store.state.instance.stickers) {
	return this.$store.state.instance.stickers.length > 0
	}
	return 0
	},
	filteredEmoji () {
	return filterByKeyword(
	this.$store.state.instance.customEmoji \|\| [],
	this.keyword
	)
	},
	customEmojiBuffer () {
	return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
	},
	emojis () {
	const standardEmojis = this.$store.state.instance.emoji \|\| []
	const customEmojis = this.customEmojiBuffer

	return [
	{
	id: 'custom',
	text: this.$t('emoji.custom'),
	icon: 'icon-smile',
	emojis: customEmojis
	},
	{
	id: 'standard',
	text: this.$t('emoji.unicode'),
	icon: 'icon-picture',
	emojis: filterByKeyword(standardEmojis, this.keyword)
	}
	]
	},
	emojisView () {
	return this.emojis.filter(value => value.emojis.length > 0)
	},
	stickerPickerEnabled () {
	return (this.$store.state.instance.stickers \|\| []).length !== 0
	}
	}
	}

	export default EmojiPicker
	diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
	index f8459fd162..4f944c9565 100644
	--- a/src/components/nav_panel/nav_panel.vue
	+++ b/src/components/nav_panel/nav_panel.vue
	@@ -1,131 +1,135 @@
	<template>
	<div class="nav-panel">
	<div class="panel panel-default">
	<ul>
	<li v-if="currentUser \|\| !privateMode">
	<router-link
	:to="{ name: timelinesRoute }"
	:class="onTimelineRoute && 'router-link-active'"
	>
	- <i class="button-icon icon-home-2" /> {{ $t("nav.timelines") }}
	+ <i class="button-icon icon-home-2" />{{ $t("nav.timelines") }}
	</router-link>
	</li>
	<li v-if="currentUser">
	<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
	- <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
	+ <i class="button-icon icon-bell-alt" />{{ $t("nav.interactions") }}
	</router-link>
	</li>
	<li v-if="currentUser && pleromaChatMessagesAvailable">
	<router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }">
	<div
	v-if="unreadChatCount"
	class="badge badge-notification unread-chat-count"
	>
	{{ unreadChatCount }}
	</div>
	- <i class="button-icon icon-chat" /> {{ $t("nav.chats") }}
	+ <i class="button-icon icon-chat" />{{ $t("nav.chats") }}
	</router-link>
	</li>
	<li v-if="currentUser && currentUser.locked">
	<router-link :to="{ name: 'friend-requests' }">
	- <i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }}
	+ <i class="button-icon icon-user-plus" />{{ $t("nav.friend_requests") }}
	<span
	v-if="followRequestCount > 0"
	class="badge follow-request-count"
	>
	{{ followRequestCount }}
	</span>
	</router-link>
	</li>
	<li>
	<router-link :to="{ name: 'about' }">
	- <i class="button-icon icon-info-circled" /> {{ $t("nav.about") }}
	+ <i class="button-icon icon-info-circled" />{{ $t("nav.about") }}
	</router-link>
	</li>
	</ul>
	</div>
	</div>
	</template>

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

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

	.nav-panel .panel {
	overflow: hidden;
	box-shadow: var(--panelShadow);
	}
	.nav-panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

	.follow-request-count {
	margin: -6px 10px;
	background-color: $fallback--bg;
	background-color: var(--input, $fallback--faint);
	}

	.nav-panel li {
	border-bottom: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	padding: 0;

	&:first-child a {
	border-top-right-radius: $fallback--panelRadius;
	border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
	border-top-left-radius: $fallback--panelRadius;
	border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
	}

	&:last-child a {
	border-bottom-right-radius: $fallback--panelRadius;
	border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
	border-bottom-left-radius: $fallback--panelRadius;
	border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
	}
	}

	.nav-panel li:last-child {
	border: none;
	}

	.nav-panel a {
	display: block;
	padding: 0.8em 0.85em;

	&:hover {
	background-color: $fallback--lightBg;
	background-color: var(--selectedMenu, $fallback--lightBg);
	color: $fallback--link;
	color: var(--selectedMenuText, $fallback--link);
	--faint: var(--selectedMenuFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuLightText, $fallback--lightText);
	--icon: var(--selectedMenuIcon, $fallback--icon);
	}

	&.router-link-active {
	font-weight: bolder;
	background-color: $fallback--lightBg;
	background-color: var(--selectedMenu, $fallback--lightBg);
	color: $fallback--text;
	color: var(--selectedMenuText, $fallback--text);
	--faint: var(--selectedMenuFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuLightText, $fallback--lightText);
	--icon: var(--selectedMenuIcon, $fallback--icon);

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

	+.nav-panel .button-icon {
	+ margin-right: 0.5em;
	+}
	+
	.nav-panel .button-icon:before {
	width: 1.1em;
	}
	</style>
	diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
	index abcf04555c..11627e9cbb 100644
	--- a/src/components/react_button/react_button.js
	+++ b/src/components/react_button/react_button.js
	@@ -1,42 +1,43 @@
	import Popover from '../popover/popover.vue'
	-import { mapGetters } from 'vuex'

	const ReactButton = {
	props: ['status'],
	data () {
	return {
	filterWord: ''
	}
	},
	components: {
	Popover
	},
	methods: {
	addReaction (event, emoji, close) {
	const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
	if (existingReaction && existingReaction.me) {
	this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
	} else {
	this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
	}
	close()
	}
	},
	computed: {
	commonEmojis () {
	return ['👍', '😠', '👀', '😂', '🔥']
	},
	emojis () {
	if (this.filterWord !== '') {
	const filterWordLowercase = this.filterWord.toLowerCase()
	return this.$store.state.instance.emoji.filter(emoji =>
	emoji.displayText.toLowerCase().includes(filterWordLowercase)
	)
	}
	return this.$store.state.instance.emoji \|\| []
	},
	- ...mapGetters(['mergedConfig'])
	+ mergedConfig () {
	+ return this.$store.getters.mergedConfig
	+ }
	}
	}

	export default ReactButton
	diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
	index d9a0f92e61..5a41f22d84 100644
	--- a/src/components/retweet_button/retweet_button.js
	+++ b/src/components/retweet_button/retweet_button.js
	@@ -1,35 +1,36 @@
	-import { mapGetters } from 'vuex'

	const RetweetButton = {
	props: ['status', 'loggedIn', 'visibility'],
	data () {
	return {
	animated: false
	}
	},
	methods: {
	retweet () {
	if (!this.status.repeated) {
	this.$store.dispatch('retweet', { id: this.status.id })
	} else {
	this.$store.dispatch('unretweet', { id: this.status.id })
	}
	this.animated = true
	setTimeout(() => {
	this.animated = false
	}, 500)
	}
	},
	computed: {
	classes () {
	return {
	'retweeted': this.status.repeated,
	'retweeted-empty': !this.status.repeated,
	'animate-spin': this.animated
	}
	},
	- ...mapGetters(['mergedConfig'])
	+ mergedConfig () {
	+ return this.$store.getters.mergedConfig
	+ }
	}
	}

	export default RetweetButton
	diff --git a/src/components/settings_modal/tabs/data_import_export_tab.js b/src/components/settings_modal/tabs/data_import_export_tab.js
	index 168f89e191..f4b736d2dc 100644
	--- a/src/components/settings_modal/tabs/data_import_export_tab.js
	+++ b/src/components/settings_modal/tabs/data_import_export_tab.js
	@@ -1,65 +1,79 @@
	import Importer from 'src/components/importer/importer.vue'
	import Exporter from 'src/components/exporter/exporter.vue'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	+import { mapState } from 'vuex'

	const DataImportExportTab = {
	data () {
	return {
	activeTab: 'profile',
	newDomainToMute: ''
	}
	},
	created () {
	this.$store.dispatch('fetchTokens')
	},
	components: {
	Importer,
	Exporter,
	Checkbox
	},
	computed: {
	- user () {
	- return this.$store.state.users.currentUser
	- }
	+ ...mapState({
	+ backendInteractor: (state) => state.api.backendInteractor,
	+ user: (state) => state.users.currentUser
	+ })
	},
	methods: {
	getFollowsContent () {
	- return this.$store.state.api.backendInteractor.exportFriends({ id: this.$store.state.users.currentUser.id })
	+ return this.backendInteractor.exportFriends({ id: this.user.id })
	.then(this.generateExportableUsersContent)
	},
	getBlocksContent () {
	- return this.$store.state.api.backendInteractor.fetchBlocks()
	+ return this.backendInteractor.fetchBlocks()
	+ .then(this.generateExportableUsersContent)
	+ },
	+ getMutesContent () {
	+ return this.backendInteractor.fetchMutes()
	.then(this.generateExportableUsersContent)
	},
	importFollows (file) {
	- return this.$store.state.api.backendInteractor.importFollows({ file })
	+ return this.backendInteractor.importFollows({ file })
	.then((status) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	importBlocks (file) {
	- return this.$store.state.api.backendInteractor.importBlocks({ file })
	+ return this.backendInteractor.importBlocks({ file })
	+ .then((status) => {
	+ if (!status) {
	+ throw new Error('failed')
	+ }
	+ })
	+ },
	+ importMutes (file) {
	+ return this.backendInteractor.importMutes({ file })
	.then((status) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	generateExportableUsersContent (users) {
	// Get addresses
	return users.map((user) => {
	// check is it's a local user
	if (user && user.is_local) {
	// append the instance address
	// eslint-disable-next-line no-undef
	return user.screen_name + '@' + location.hostname
	}
	return user.screen_name
	}).join('\n')
	}
	}
	}

	export default DataImportExportTab
	diff --git a/src/components/settings_modal/tabs/data_import_export_tab.vue b/src/components/settings_modal/tabs/data_import_export_tab.vue
	index b5d0f5ed18..a406077d03 100644
	--- a/src/components/settings_modal/tabs/data_import_export_tab.vue
	+++ b/src/components/settings_modal/tabs/data_import_export_tab.vue
	@@ -1,43 +1,60 @@
	<template>
	<div
	:label="$t('settings.data_import_export_tab')"
	>
	<div class="setting-item">
	<h2>{{ $t('settings.follow_import') }}</h2>
	<p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
	<Importer
	:submit-handler="importFollows"
	:success-message="$t('settings.follows_imported')"
	:error-message="$t('settings.follow_import_error')"
	/>
	</div>
	<div class="setting-item">
	<h2>{{ $t('settings.follow_export') }}</h2>
	<Exporter
	:get-content="getFollowsContent"
	filename="friends.csv"
	:export-button-label="$t('settings.follow_export_button')"
	/>
	</div>
	<div class="setting-item">
	<h2>{{ $t('settings.block_import') }}</h2>
	<p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p>
	<Importer
	:submit-handler="importBlocks"
	:success-message="$t('settings.blocks_imported')"
	:error-message="$t('settings.block_import_error')"
	/>
	</div>
	<div class="setting-item">
	<h2>{{ $t('settings.block_export') }}</h2>
	<Exporter
	:get-content="getBlocksContent"
	filename="blocks.csv"
	:export-button-label="$t('settings.block_export_button')"
	/>
	</div>
	+ <div class="setting-item">
	+ <h2>{{ $t('settings.mute_import') }}</h2>
	+ <p>{{ $t('settings.import_mutes_from_a_csv_file') }}</p>
	+ <Importer
	+ :submit-handler="importMutes"
	+ :success-message="$t('settings.mutes_imported')"
	+ :error-message="$t('settings.mute_import_error')"
	+ />
	+ </div>
	+ <div class="setting-item">
	+ <h2>{{ $t('settings.mute_export') }}</h2>
	+ <Exporter
	+ :get-content="getMutesContent"
	+ filename="mutes.csv"
	+ :export-button-label="$t('settings.mute_export_button')"
	+ />
	+ </div>
	</div>
	</template>

	<script src="./data_import_export_tab.js"></script>
	<!-- <style lang="scss" src="./profile.scss"></style> -->
	diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
	index 7f2dcff918..9c2878b85b 100644
	--- a/src/components/settings_modal/tabs/general_tab.vue
	+++ b/src/components/settings_modal/tabs/general_tab.vue
	@@ -1,267 +1,272 @@
	<template>
	<div :label="$t('settings.general')">
	<div class="setting-item">
	<h2>{{ $t('settings.interface') }}</h2>
	<ul class="setting-list">
	<li>
	<interface-language-switcher />
	</li>
	<li v-if="instanceSpecificPanelPresent">
	<Checkbox v-model="hideISP">
	{{ $t('settings.hide_isp') }}
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="showThirdColumn">
	{{ $t('settings.show_third_column') }}
	</Checkbox>
	</li>
	</ul>
	</div>
	<div class="setting-item">
	<h2>{{ $t('nav.timeline') }}</h2>
	<ul class="setting-list">
	<li>
	<Checkbox v-model="hideMutedPosts">
	{{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="collapseMessageWithSubject">
	{{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="streaming">
	{{ $t('settings.streaming') }}
	</Checkbox>
	<ul
	class="setting-list suboptions"
	:class="[{disabled: !streaming}]"
	>
	<li>
	<Checkbox
	v-model="pauseOnUnfocused"
	:disabled="!streaming"
	>
	{{ $t('settings.pause_on_unfocused') }}
	</Checkbox>
	</li>
	</ul>
	</li>
	<li>
	<Checkbox v-model="useStreamingApi">
	{{ $t('settings.useStreamingApi') }}
	<br>
	<small>
	{{ $t('settings.useStreamingApiWarning') }}
	</small>
	</Checkbox>
	</li>
	<li>
	<Checkbox v-model="emojiReactionsOnTimeline">
	{{ $t('settings.emoji_reactions_on_timeline') }}
	</Checkbox>
	</li>
	+ <li>
	+ <Checkbox v-model="virtualScrolling">
	+ {{ $t('settings.virtual_scrolling') }}
	+ </Checkbox>
	+ </li>
	</ul>
	</div>

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

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

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

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

	<script src="./general_tab.js"></script>
	diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
	index 0587ee02d5..eda5a68c2b 100644
	--- a/src/components/side_drawer/side_drawer.vue
	+++ b/src/components/side_drawer/side_drawer.vue
	@@ -1,301 +1,301 @@
	<template>
	<div
	class="side-drawer-container"
	:class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
	>
	<div
	class="side-drawer-darken"
	:class="{ 'side-drawer-darken-closed': closed}"
	/>
	<div
	class="side-drawer"
	:class="{'side-drawer-closed': closed}"
	@touchstart="touchStart"
	@touchmove="touchMove"
	>
	<div
	class="side-drawer-heading"
	@click="toggleDrawer"
	>
	<UserCard
	v-if="currentUser"
	:user-id="currentUser.id"
	:hide-bio="true"
	/>
	<div
	v-else
	class="side-drawer-logo-wrapper"
	>
	<img :src="logo">
	<span v-if="!hideSitename">{{ sitename }}</span>
	</div>
	</div>
	<ul>
	<li
	v-if="!currentUser"
	@click="toggleDrawer"
	>
	<router-link :to="{ name: 'login' }">
	<i class="button-icon icon-login" /> {{ $t("login.login") }}
	</router-link>
	</li>
	<li
	v-if="currentUser \|\| !privateMode"
	@click="toggleDrawer"
	>
	<router-link :to="{ name: timelinesRoute }">
	<i class="button-icon icon-home-2" /> {{ $t("nav.timelines") }}
	</router-link>
	</li>
	<li
	v-if="currentUser && pleromaChatMessagesAvailable"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'chats', params: { username: currentUser.screen_name } }"
	style="position: relative"
	>
	<i class="button-icon icon-chat" /> {{ $t("nav.chats") }}
	<span
	v-if="unreadChatCount"
	class="badge badge-notification unread-chat-count"
	>
	{{ unreadChatCount }}
	</span>
	</router-link>
	</li>
	</ul>
	<ul v-if="currentUser">
	<li @click="toggleDrawer">
	<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
	<i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
	</router-link>
	</li>
	<li
	v-if="currentUser.locked"
	@click="toggleDrawer"
	>
	<router-link to="/friend-requests">
	<i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }}
	<span
	v-if="followRequestCount > 0"
	class="badge follow-request-count"
	>
	{{ followRequestCount }}
	</span>
	</router-link>
	</li>
	<li
	v-if="chat"
	@click="toggleDrawer"
	>
	<router-link :to="{ name: 'chat' }">
	- <i class="button-icon icon-chat" /> {{ $t("nav.chat") }}
	+ <i class="button-icon icon-megaphone" /> {{ $t("shoutbox.title") }}
	</router-link>
	</li>
	</ul>
	<ul>
	<li
	v-if="currentUser \|\| !privateMode"
	@click="toggleDrawer"
	>
	<router-link :to="{ name: 'search' }">
	<i class="button-icon icon-search" /> {{ $t("nav.search") }}
	</router-link>
	</li>
	<li
	v-if="currentUser && suggestionsEnabled"
	@click="toggleDrawer"
	>
	<router-link :to="{ name: 'who-to-follow' }">
	<i class="button-icon icon-user-plus" /> {{ $t("nav.who_to_follow") }}
	</router-link>
	</li>
	<li @click="toggleDrawer">
	<a
	href="#"
	@click="openSettingsModal"
	>
	<i class="button-icon icon-cog" /> {{ $t("settings.settings") }}
	</a>
	</li>
	<li @click="toggleDrawer">
	<router-link :to="{ name: 'about'}">
	<i class="button-icon icon-info-circled" /> {{ $t("nav.about") }}
	</router-link>
	</li>
	<li
	v-if="currentUser && currentUser.role === 'admin'"
	@click="toggleDrawer"
	>
	<a
	href="/pleroma/admin/#/login-pleroma"
	target="_blank"
	>
	<i class="button-icon icon-gauge" /> {{ $t("nav.administration") }}
	</a>
	</li>
	<li
	v-if="currentUser"
	@click="toggleDrawer"
	>
	<a
	href="#"
	@click="doLogout"
	>
	<i class="button-icon icon-logout" /> {{ $t("login.logout") }}
	</a>
	</li>
	</ul>
	</div>
	<div
	class="side-drawer-click-outside"
	:class="{'side-drawer-click-outside-closed': closed}"
	@click.stop.prevent="toggleDrawer"
	/>
	</div>
	</template>

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

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

	.side-drawer-container {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: stretch;
	transition-duration: 0s;
	transition-property: transform;
	}

	.side-drawer-container-open {
	transform: translate(0%);
	}

	.side-drawer-container-closed {
	transition-delay: 0.35s;
	transform: translate(-100%);
	}

	.side-drawer-darken {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: -1;
	transition: 0.35s;
	transition-property: background-color;
	background-color: rgba(0, 0, 0, 0.5);
	}

	.side-drawer-darken-closed {
	background-color: rgba(0, 0, 0, 0);
	}

	.side-drawer-click-outside {
	flex: 1 1 100%;
	}

	.side-drawer {
	overflow-x: hidden;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	transition: 0.35s;
	transition-property: transform;
	margin: 0 0 0 -100px;
	padding: 0 0 1em 100px;
	width: 80%;
	max-width: 20em;
	flex: 0 0 80%;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
	box-shadow: var(--panelShadow);
	background-color: $fallback--bg;
	background-color: var(--popover, $fallback--bg);
	color: $fallback--link;
	color: var(--popoverText, $fallback--link);
	--faint: var(--popoverFaintText, $fallback--faint);
	--faintLink: var(--popoverFaintLink, $fallback--faint);
	--lightText: var(--popoverLightText, $fallback--lightText);
	--icon: var(--popoverIcon, $fallback--icon);

	.button-icon:before {
	width: 1.1em;
	}
	}

	.side-drawer-logo-wrapper {
	display: flex;
	align-items: center;
	padding: 0.85em;

	img {
	flex: none;
	height: 50px;
	margin-right: 0.85em;
	}

	span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	}

	.side-drawer-click-outside-closed {
	flex: 0 0 0;
	}

	.side-drawer-closed {
	transform: translate(-100%);
	}

	.side-drawer-heading {
	background: transparent;
	flex-direction: column;
	align-items: stretch;
	display: flex;
	padding: 0;
	margin: 0;
	}

	.side-drawer ul {
	list-style: none;
	margin: 0;
	padding: 0;

	border-bottom: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	margin: 0.2em 0;
	}

	.side-drawer ul:last-child {
	border: 0;
	}

	.side-drawer li {
	padding: 0;

	a {
	display: block;
	padding: 0.5em 0.85em;

	&:hover {
	background-color: $fallback--lightBg;
	background-color: var(--selectedMenuPopover, $fallback--lightBg);
	color: $fallback--text;
	color: var(--selectedMenuPopoverText, $fallback--text);
	--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
	--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
	}
	}
	}
	</style>
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index d263da682e..cd6e2f729f 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,292 +1,309 @@
	import FavoriteButton from '../favorite_button/favorite_button.vue'
	import ReactButton from '../react_button/react_button.vue'
	import RetweetButton from '../retweet_button/retweet_button.vue'
	import ExtraButtons from '../extra_buttons/extra_buttons.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	import UserCard from '../user_card/user_card.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import AvatarList from '../avatar_list/avatar_list.vue'
	import Timeago from '../timeago/timeago.vue'
	import StatusContent from '../status_content/status_content.vue'
	import StatusPopover from '../status_popover/status_popover.vue'
	import UserListPopover from '../user_list_popover/user_list_popover.vue'
	import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
	import { muteWordHits } from '../../services/status_parser/status_parser.js'
	import { unescape, uniqBy } from 'lodash'
	-import { mapGetters, mapState } from 'vuex'

	const Status = {
	name: 'Status',
	components: {
	FavoriteButton,
	ReactButton,
	RetweetButton,
	ExtraButtons,
	PostStatusForm,
	UserCard,
	UserAvatar,
	AvatarList,
	Timeago,
	StatusPopover,
	UserListPopover,
	EmojiReactions,
	StatusContent
	},
	props: [
	'statusoid',
	'expandable',
	'inConversation',
	'focused',
	'highlight',
	'compact',
	'replies',
	'isPreview',
	'noHeading',
	'inlineExpanded',
	'showPinned',
	'inProfile',
	'profileUserId'
	],
	data () {
	return {
	replying: false,
	unmuted: false,
	userExpanded: false,
	+ mediaPlaying: [],
	+ suspendable: true,
	error: null
	}
	},
	computed: {
	muteWords () {
	return this.mergedConfig.muteWords
	},
	showReasonMutedThread () {
	return (
	this.status.thread_muted \|\|
	(this.status.reblog && this.status.reblog.thread_muted)
	) && !this.inConversation
	},
	repeaterClass () {
	const user = this.statusoid.user
	return highlightClass(user)
	},
	userClass () {
	const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
	return highlightClass(user)
	},
	deleted () {
	return this.statusoid.deleted
	},
	repeaterStyle () {
	const user = this.statusoid.user
	const highlight = this.mergedConfig.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	userStyle () {
	if (this.noHeading) return
	const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
	const highlight = this.mergedConfig.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	userProfileLink () {
	return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
	},
	replyProfileLink () {
	if (this.isReply) {
	return this.generateUserProfileLink(this.status.in_reply_to_user_id, this.replyToName)
	}
	},
	retweet () { return !!this.statusoid.retweeted_status },
	retweeter () { return this.statusoid.user.name \|\| this.statusoid.user.screen_name },
	retweeterHtml () { return this.statusoid.user.name_html },
	retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },
	status () {
	if (this.retweet) {
	return this.statusoid.retweeted_status
	} else {
	return this.statusoid
	}
	},
	statusFromGlobalRepository () {
	// NOTE: Consider to replace status with statusFromGlobalRepository
	return this.$store.state.statuses.allStatusesObject[this.status.id]
	},
	loggedIn () {
	return !!this.currentUser
	},
	muteWordHits () {
	return muteWordHits(this.status, this.muteWords)
	},
	muted () {
	const { status } = this
	const { reblog } = status
	const relationship = this.$store.getters.relationship(status.user.id)
	const relationshipReblog = reblog && this.$store.getters.relationship(reblog.user.id)
	const reasonsToMute = (
	// Post is muted according to BE
	status.muted \|\|
	// Reprööt of a muted post according to BE
	(reblog && reblog.muted) \|\|
	// Muted user
	relationship.muting \|\|
	// Muted user of a reprööt
	(relationshipReblog && relationshipReblog.muting) \|\|
	// Thread is muted
	status.thread_muted \|\|
	// Wordfiltered
	this.muteWordHits.length > 0
	)
	const excusesNotToMute = (
	(
	this.inProfile && (
	// Don't mute user's posts on user timeline (except reblogs)
	(!reblog && status.user.id === this.profileUserId) \|\|
	// Same as above but also allow self-reblogs
	(reblog && reblog.user.id === this.profileUserId)
	)
	) \|\|
	// Don't mute statuses in muted conversation when said conversation is opened
	(this.inConversation && status.thread_muted)
	// No excuses if post has muted words
	) && !this.muteWordHits.length > 0

	return !this.unmuted && !excusesNotToMute && reasonsToMute
	},
	hideFilteredStatuses () {
	return this.mergedConfig.hideFilteredStatuses
	},
	hideStatus () {
	- return this.deleted \|\| (this.muted && this.hideFilteredStatuses)
	+ return this.deleted \|\| (this.muted && this.hideFilteredStatuses) \|\| this.virtualHidden
	},
	isFocused () {
	// retweet or root of an expanded conversation
	if (this.focused) {
	return true
	} else if (!this.inConversation) {
	return false
	}
	// use conversation highlight only when in conversation
	return this.status.id === this.highlight
	},
	isReply () {
	return !!(this.status.in_reply_to_status_id && this.status.in_reply_to_user_id)
	},
	replyToName () {
	if (this.status.in_reply_to_screen_name) {
	return this.status.in_reply_to_screen_name
	} else {
	const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
	return user && user.screen_name
	}
	},
	replySubject () {
	if (!this.status.summary) return ''
	const decodedSummary = unescape(this.status.summary)
	const behavior = this.mergedConfig.subjectLineBehavior
	const startsWithRe = decodedSummary.match(/^re[: ]/i)
	if ((behavior !== 'noop' && startsWithRe) \|\| behavior === 'masto') {
	return decodedSummary
	} else if (behavior === 'email') {
	return 're: '.concat(decodedSummary)
	} else if (behavior === 'noop') {
	return ''
	}
	},
	combinedFavsAndRepeatsUsers () {
	// Use the status from the global status repository since favs and repeats are saved in it
	const combinedUsers = [].concat(
	this.statusFromGlobalRepository.favoritedBy,
	this.statusFromGlobalRepository.rebloggedBy
	)
	return uniqBy(combinedUsers, 'id')
	},
	tags () {
	return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ')
	},
	hidePostStats () {
	return this.mergedConfig.hidePostStats
	},
	- ...mapGetters(['mergedConfig']),
	- ...mapState({
	- betterShadow: state => state.interface.browserSupport.cssFilter,
	- currentUser: state => state.users.currentUser
	- })
	+ currentUser () {
	+ return this.$store.state.users.currentUser
	+ },
	+ betterShadow () {
	+ return this.$store.state.interface.browserSupport.cssFilter
	+ },
	+ mergedConfig () {
	+ return this.$store.getters.mergedConfig
	+ },
	+ isSuspendable () {
	+ return !this.replying && this.mediaPlaying.length === 0
	+ }
	},
	methods: {
	visibilityIcon (visibility) {
	switch (visibility) {
	case 'private':
	return 'icon-lock'
	case 'unlisted':
	return 'icon-lock-open-alt'
	case 'direct':
	return 'icon-mail-alt'
	default:
	return 'icon-globe'
	}
	},
	showError (error) {
	this.error = error
	},
	clearError () {
	this.error = undefined
	},
	toggleReplying () {
	this.replying = !this.replying
	},
	gotoOriginal (id) {
	if (this.inConversation) {
	this.$emit('goto', id)
	}
	},
	toggleExpanded () {
	this.$emit('toggleExpanded')
	},
	toggleMute () {
	this.unmuted = !this.unmuted
	},
	toggleUserExpanded () {
	this.userExpanded = !this.userExpanded
	},
	generateUserProfileLink (id, name) {
	return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
	+ },
	+ addMediaPlaying (id) {
	+ this.mediaPlaying.push(id)
	+ },
	+ removeMediaPlaying (id) {
	+ this.mediaPlaying = this.mediaPlaying.filter(mediaId => mediaId !== id)
	}
	},
	watch: {
	'highlight': function (id) {
	if (this.status.id === id) {
	let rect = this.$el.getBoundingClientRect()
	if (rect.top < 100) {
	// Post is above screen, match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.height >= (window.innerHeight - 50)) {
	// Post we want to see is taller than screen so match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.bottom > window.innerHeight - 50) {
	// Post is below screen, match its bottom to screen bottom
	window.scrollBy(0, rect.bottom - window.innerHeight + 50)
	}
	}
	},
	'status.repeat_num': function (num) {
	// refetch repeats when repeat_num is changed in any way
	if (this.isFocused && this.statusFromGlobalRepository.rebloggedBy && this.statusFromGlobalRepository.rebloggedBy.length !== num) {
	this.$store.dispatch('fetchRepeats', this.status.id)
	}
	},
	'status.fave_num': function (num) {
	// refetch favs when fave_num is changed in any way
	if (this.isFocused && this.statusFromGlobalRepository.favoritedBy && this.statusFromGlobalRepository.favoritedBy.length !== num) {
	this.$store.dispatch('fetchFavs', this.status.id)
	}
	+ },
	+ 'isSuspendable': function (val) {
	+ this.suspendable = val
	}
	},
	filters: {
	capitalize: function (str) {
	return str.charAt(0).toUpperCase() + str.slice(1)
	}
	}
	}

	export default Status
	diff --git a/src/components/status/status.scss b/src/components/status/status.scss
	index 8d292d3f7a..c92d870bbb 100644
	--- a/src/components/status/status.scss
	+++ b/src/components/status/status.scss
	@@ -1,414 +1,419 @@

	@import '../../_variables.scss';

	$status-margin: 0.75em;

	.Status {
	min-width: 0;

	&:hover {
	--still-image-img: visible;
	--still-image-canvas: hidden;
	}

	&.-focused {
	background-color: $fallback--lightBg;
	background-color: var(--selectedPost, $fallback--lightBg);
	color: $fallback--text;
	color: var(--selectedPostText, $fallback--text);

	--lightText: var(--selectedPostLightText, $fallback--light);
	--faint: var(--selectedPostFaintText, $fallback--faint);
	--faintLink: var(--selectedPostFaintLink, $fallback--faint);
	--postLink: var(--selectedPostPostLink, $fallback--faint);
	--postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
	--icon: var(--selectedPostIcon, $fallback--icon);
	}

	+ &.-conversation {
	+ border-left-width: 4px;
	+ border-left-style: solid;
	+ }
	+
	.status-container {
	display: flex;
	padding: $status-margin;

	&.-repeat {
	padding-top: 0;
	}
	}

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

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

	.right-side {
	flex: 1;
	min-width: 0;
	}

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

	.status-username {
	white-space: nowrap;
	font-size: 14px;
	overflow: hidden;
	max-width: 85%;
	font-weight: bold;
	flex-shrink: 1;
	margin-right: 0.4em;
	text-overflow: ellipsis;

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

	.status-favicon {
	height: 18px;
	width: 18px;
	margin-right: 0.4em;
	}

	.status-heading {
	margin-bottom: 0.5em;
	}

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

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

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

	.heading-left {
	display: flex;
	min-width: 0;
	}

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

	.timeago {
	margin-right: 0.2em;
	}

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

	.reply-to-and-accountname {
	display: flex;
	height: 18px;
	margin-right: 0.5em;
	max-width: 100%;

	.reply-to-link {
	white-space: nowrap;
	word-break: break-word;
	text-overflow: ellipsis;
	overflow-x: hidden;
	}

	.icon-reply {
	// mirror the icon
	transform: scaleX(-1);
	}
	}

	& .reply-to-popover,
	& .reply-to-no-popover {
	min-width: 0;
	margin-right: 0.4em;
	flex-shrink: 0;
	}

	.reply-to-popover {
	.reply-to:hover::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	border-bottom: 1px solid var(--faint);
	pointer-events: none;
	}

	.faint-link:hover {
	// override default
	text-decoration: none;
	}

	&.-strikethrough {
	.reply-to::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	width: 100%;
	border-bottom: 1px solid var(--faint);
	pointer-events: none;
	}
	}
	}

	.reply-to {
	display: flex;
	position: relative;
	}

	.reply-to-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-left: 0.2em;
	}

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

	.replies {
	line-height: 18px;
	font-size: 12px;
	display: flex;
	flex-wrap: wrap;

	& > * {
	margin-right: 0.4em;
	}
	}

	.reply-link {
	height: 17px;
	}

	.repeat-info {
	padding: 0.4em $status-margin;
	line-height: 22px;

	.right-side {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	}

	i {
	padding: 0 0.2em;
	}
	}

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

	.repeater-name {
	text-overflow: ellipsis;
	margin-right: 0;

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

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

	@keyframes fadein {
	from {
	opacity: 0;
	}

	to {
	opacity: 1;
	}
	}

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

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

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

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

	.muted {
	padding: 0.25em 0.6em;
	height: 1.2em;
	line-height: 1.2em;
	text-overflow: ellipsis;
	overflow: hidden;
	display: flex;
	flex-wrap: nowrap;

	& .status-username,
	& .mute-thread,
	& .mute-words {
	word-wrap: normal;
	word-break: normal;
	white-space: nowrap;
	}

	& .status-username,
	& .mute-words {
	text-overflow: ellipsis;
	overflow: hidden;
	}

	.status-username {
	font-weight: normal;
	flex: 0 1 auto;
	margin-right: 0.2em;
	font-size: smaller;
	}

	.mute-thread {
	flex: 0 0 auto;
	}

	.mute-words {
	flex: 1 0 5em;
	margin-left: 0.2em;

	&::before {
	content: ' ';
	}
	}

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

	.reply-form {
	padding-top: 0;
	padding-bottom: 0;
	}

	.reply-body {
	flex: 1;
	}

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

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

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

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

	.stat-count {
	margin-right: $status-margin;
	user-select: none;

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

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

	&:hover .stat-title {
	text-decoration: underline;
	}
	}

	@media all and (max-width: 800px) {
	.repeater-avatar {
	margin-left: 20px;
	}

	.avatar:not(.repeater-avatar) {
	width: 40px;
	height: 40px;

	// TODO define those other way somehow?
	// stylelint-disable rscss/class-format
	&.avatar-compact {
	width: 32px;
	height: 32px;
	}
	}
	}
	}
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index 282ad37dd6..aa67e433f3 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,379 +1,384 @@
	<template>
	<!-- eslint-disable vue/no-v-html -->
	<div
	v-if="!hideStatus"
	class="Status"
	:class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
	>
	<div
	v-if="error"
	class="alert error"
	>
	{{ error }}
	<i
	class="button-icon icon-cancel"
	@click="clearError"
	/>
	</div>
	<template v-if="muted && !isPreview">
	- <div class="status-csontainer muted">
	+ <div class="status-container muted">
	<small class="status-username">
	<i
	v-if="muted && retweet"
	class="button-icon icon-retweet"
	/>
	<router-link :to="userProfileLink">
	{{ status.user.screen_name }}
	</router-link>
	</small>
	<small
	v-if="showReasonMutedThread"
	class="mute-thread"
	>
	{{ $t('status.thread_muted') }}
	</small>
	<small
	v-if="showReasonMutedThread && muteWordHits.length > 0"
	class="mute-thread"
	>
	{{ $t('status.thread_muted_and_words') }}
	</small>
	<small
	class="mute-words"
	:title="muteWordHits.join(', ')"
	>
	{{ muteWordHits.join(', ') }}
	</small>
	<a
	href="#"
	class="unmute"
	@click.prevent="toggleMute"
	><i class="button-icon icon-eye-off" /></a>
	</div>
	</template>
	<template v-else>
	<div
	v-if="showPinned"
	class="pin"
	>
	<i class="fa icon-pin faint" />
	<span class="faint">{{ $t('status.pinned') }}</span>
	</div>
	<div
	v-if="retweet && !noHeading && !inConversation"
	:class="[repeaterClass, { highlighted: repeaterStyle }]"
	:style="[repeaterStyle]"
	class="status-container repeat-info"
	>
	<UserAvatar
	v-if="retweet"
	class="left-side repeater-avatar"
	:better-shadow="betterShadow"
	:user="statusoid.user"
	/>
	<div class="right-side faint">
	<span
	class="status-username repeater-name"
	:title="retweeter"
	>
	<router-link
	v-if="retweeterHtml"
	:to="retweeterProfileLink"
	v-html="retweeterHtml"
	/>
	<router-link
	v-else
	:to="retweeterProfileLink"
	>{{ retweeter }}</router-link>
	</span>
	<i
	class="fa icon-retweet retweeted"
	:title="$t('tool_tip.repeat')"
	/>
	{{ $t('timeline.repeated') }}
	</div>
	</div>

	<div
	:class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
	:style="[ userStyle ]"
	class="status-container"
	:data-tags="tags"
	>
	<div
	v-if="!noHeading"
	class="left-side"
	>
	<router-link
	:to="userProfileLink"
	@click.stop.prevent.capture.native="toggleUserExpanded"
	>
	<UserAvatar
	:compact="compact"
	:better-shadow="betterShadow"
	:user="status.user"
	/>
	</router-link>
	</div>
	<div class="right-side">
	<UserCard
	v-if="userExpanded"
	:user-id="status.user.id"
	:rounded="true"
	:bordered="true"
	class="usercard"
	/>
	<div
	v-if="!noHeading"
	class="status-heading"
	>
	<div class="heading-name-row">
	<div class="heading-left">
	<h4
	v-if="status.user.name_html"
	class="status-username"
	:title="status.user.name"
	v-html="status.user.name_html"
	/>
	<h4
	v-else
	class="status-username"
	:title="status.user.name"
	>
	{{ status.user.name }}
	</h4>
	<router-link
	class="account-name"
	:title="status.user.screen_name"
	:to="userProfileLink"
	>
	{{ status.user.screen_name }}
	</router-link>
	<img
	v-if="!!(status.user && status.user.favicon)"
	class="status-favicon"
	:src="status.user.favicon"
	>
	</div>

	<span class="heading-right">
	<router-link
	class="timeago faint-link"
	:to="{ name: 'conversation', params: { id: status.id } }"
	>
	<Timeago
	:time="status.created_at"
	:auto-update="60"
	/>
	</router-link>
	<div
	v-if="status.visibility"
	class="button-icon visibility-icon"
	>
	<i
	:class="visibilityIcon(status.visibility)"
	:title="status.visibility \| capitalize"
	/>
	</div>
	<a
	v-if="!status.is_local && !isPreview"
	:href="status.external_url"
	target="_blank"
	class="source_url"
	title="Source"
	>
	<i class="button-icon icon-link-ext-alt" />
	</a>
	<template v-if="expandable && !isPreview">
	<a
	href="#"
	title="Expand"
	@click.prevent="toggleExpanded"
	>
	<i class="button-icon icon-plus-squared" />
	</a>
	</template>
	<a
	v-if="unmuted"
	href="#"
	@click.prevent="toggleMute"
	><i class="button-icon icon-eye-off" /></a>
	</span>
	</div>

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

	<StatusContent
	:status="status"
	:no-heading="noHeading"
	:highlight="highlight"
	:focused="isFocused"
	+ @mediaplay="addMediaPlaying($event)"
	+ @mediapause="removeMediaPlaying($event)"
	/>

	<transition name="fade">
	<div
	v-if="!hidePostStats && isFocused && combinedFavsAndRepeatsUsers.length > 0"
	class="favs-repeated-users"
	>
	<div class="stats">
	<UserListPopover
	v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0"
	:users="statusFromGlobalRepository.rebloggedBy"
	>
	<div class="stat-count">
	<a class="stat-title">{{ $t('status.repeats') }}</a>
	<div class="stat-number">
	{{ statusFromGlobalRepository.rebloggedBy.length }}
	</div>
	</div>
	</UserListPopover>
	<UserListPopover
	v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0"
	:users="statusFromGlobalRepository.favoritedBy"
	>
	<div
	class="stat-count"
	>
	<a class="stat-title">{{ $t('status.favorites') }}</a>
	<div class="stat-number">
	{{ statusFromGlobalRepository.favoritedBy.length }}
	</div>
	</div>
	</UserListPopover>
	<div class="avatar-row">
	<AvatarList :users="combinedFavsAndRepeatsUsers" />
	</div>
	</div>
	</div>
	</transition>

	<EmojiReactions
	v-if="(mergedConfig.emojiReactionsOnTimeline \|\| isFocused) && (!noHeading && !isPreview)"
	:status="status"
	/>

	<div
	v-if="!noHeading && !isPreview"
	class="status-actions"
	>
	<div>
	<i
	v-if="loggedIn"
	class="button-icon button-reply icon-reply"
	:title="$t('tool_tip.reply')"
	:class="{'-active': replying}"
	@click.prevent="toggleReplying"
	/>
	<i
	v-else
	class="button-icon button-reply -disabled icon-reply"
	:title="$t('tool_tip.reply')"
	/>
	<span v-if="status.replies_count > 0">{{ status.replies_count }}</span>
	</div>
	<retweet-button
	:visibility="status.visibility"
	:logged-in="loggedIn"
	:status="status"
	/>
	<favorite-button
	:logged-in="loggedIn"
	:status="status"
	/>
	<ReactButton
	v-if="loggedIn"
	:status="status"
	/>
	<extra-buttons
	:status="status"
	@onError="showError"
	@onSuccess="clearError"
	/>
	</div>
	+
	</div>
	</div>
	<div
	v-if="replying"
	class="status-container reply-form"
	>
	<PostStatusForm
	class="reply-body"
	:reply-to="status.id"
	:attentions="status.attentions"
	:replied-user="status.user"
	:copy-message-scope="status.visibility"
	:subject="replySubject"
	@posted="toggleReplying"
	/>
	</div>
	</template>
	</div>
	<!-- eslint-enable vue/no-v-html -->
	</template>

	<script src="./status.js" ></script>
	+
	<style src="./status.scss" lang="scss"></style>
	diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
	index 76fe327897..f7fb5ee23f 100644
	--- a/src/components/status_content/status_content.vue
	+++ b/src/components/status_content/status_content.vue
	@@ -1,291 +1,293 @@
	<template>
	<!-- eslint-disable vue/no-v-html -->
	<div class="StatusContent">
	<slot name="header" />
	<div
	v-if="status.summary_html"
	class="summary-wrapper"
	:class="{ 'tall-subject': (longSubject && !showingLongSubject) }"
	>
	<div
	class="media-body summary"
	@click.prevent="linkClicked"
	v-html="status.summary_html"
	/>
	<a
	v-if="longSubject && showingLongSubject"
	href="#"
	class="tall-subject-hider"
	@click.prevent="showingLongSubject=false"
	>{{ $t("status.hide_full_subject") }}</a>
	<a
	v-else-if="longSubject"
	class="tall-subject-hider"
	:class="{ 'tall-subject-hider_focused': focused }"
	href="#"
	@click.prevent="showingLongSubject=true"
	>
	{{ $t("status.show_full_subject") }}
	</a>
	</div>
	<div
	:class="{'tall-status': hideTallStatus}"
	class="status-content-wrapper"
	>
	<a
	v-if="hideTallStatus"
	class="tall-status-hider"
	:class="{ 'tall-status-hider_focused': focused }"
	href="#"
	@click.prevent="toggleShowMore"
	>
	{{ $t("general.show_more") }}
	</a>
	<div
	v-if="!hideSubjectStatus"
	:class="{ 'single-line': singleLine }"
	class="status-content media-body"
	@click.prevent="linkClicked"
	v-html="postBodyHtml"
	/>
	<a
	v-if="hideSubjectStatus"
	href="#"
	class="cw-status-hider"
	@click.prevent="toggleShowMore"
	>
	{{ $t("status.show_content") }}
	<span
	v-if="attachmentTypes.includes('image')"
	class="icon-picture"
	/>
	<span
	v-if="attachmentTypes.includes('video')"
	class="icon-video"
	/>
	<span
	v-if="attachmentTypes.includes('audio')"
	class="icon-music"
	/>
	<span
	v-if="attachmentTypes.includes('unknown')"
	class="icon-doc"
	/>
	<span
	v-if="status.poll && status.poll.options"
	class="icon-chart-bar"
	/>
	<span
	v-if="status.card"
	class="icon-link"
	/>
	</a>
	<a
	v-if="showingMore && !fullContent"
	href="#"
	class="status-unhider"
	@click.prevent="toggleShowMore"
	>
	{{ tallStatus ? $t("general.show_less") : $t("status.hide_content") }}
	</a>
	</div>

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

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

	<div
	v-if="status.card && !hideSubjectStatus && !noHeading"
	class="link-preview media-body"
	>
	<link-preview
	:card="status.card"
	:size="attachmentSize"
	:nsfw="nsfwClickthrough"
	/>
	</div>
	<slot name="footer" />
	</div>
	<!-- eslint-enable vue/no-v-html -->
	</template>

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

	$status-margin: 0.75em;

	.StatusContent {
	flex: 1;
	min-width: 0;

	.status-content-wrapper {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	}

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

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

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

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

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

	.summary-wrapper {
	margin-bottom: 0.5em;
	border-style: solid;
	border-width: 0 0 1px 0;
	border-color: var(--border, $fallback--border);
	flex-grow: 0;
	}

	.summary {
	font-style: italic;
	padding-bottom: 0.5em;
	}

	.tall-subject {
	position: relative;
	.summary {
	max-height: 2em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	}
	}

	.tall-subject-hider {
	display: inline-block;
	word-break: break-all;
	// position: absolute;
	width: 100%;
	text-align: center;
	padding-bottom: 0.5em;
	}

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

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

	pre {
	overflow: auto;
	}

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

	p {
	margin: 0 0 1em 0;
	}

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

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

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

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

	h4 {
	margin: 1.1em 0;
	}

	&.single-line {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	height: 1.4em;
	}
	}
	}

	.greentext {
	color: $fallback--cGreen;
	color: var(--postGreentext, $fallback--cGreen);
	}
	</style>
	diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
	index ab40bbd732..8044e99436 100644
	--- a/src/components/still-image/still-image.js
	+++ b/src/components/still-image/still-image.js
	@@ -1,37 +1,39 @@
	const StillImage = {
	props: [
	'src',
	'referrerpolicy',
	'mimetype',
	'imageLoadError',
	'imageLoadHandler',
	'alt'
	],
	data () {
	return {
	stopGifs: this.$store.getters.mergedConfig.stopGifs
	}
	},
	computed: {
	animated () {
	return this.stopGifs && (this.mimetype === 'image/gif' \|\| this.src.endsWith('.gif'))
	}
	},
	methods: {
	onLoad () {
	- this.imageLoadHandler && this.imageLoadHandler(this.$refs.src)
	+ const image = this.$refs.src
	+ if (!image) return
	+ this.imageLoadHandler && this.imageLoadHandler(image)
	const canvas = this.$refs.canvas
	if (!canvas) return
	- const width = this.$refs.src.naturalWidth
	- const height = this.$refs.src.naturalHeight
	+ const width = image.naturalWidth
	+ const height = image.naturalHeight
	canvas.width = width
	canvas.height = height
	- canvas.getContext('2d').drawImage(this.$refs.src, 0, 0, width, height)
	+ canvas.getContext('2d').drawImage(image, 0, 0, width, height)
	},
	onError () {
	this.imageLoadError && this.imageLoadError()
	}
	}
	}

	export default StillImage
	diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
	index 5a7f7a7822..17680542dc 100644
	--- a/src/components/timeline/timeline.js
	+++ b/src/components/timeline/timeline.js
	@@ -1,184 +1,242 @@
	import Status from '../status/status.vue'
	import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
	import Conversation from '../conversation/conversation.vue'
	import TimelineMenu from '../timeline_menu/timeline_menu.vue'
	import { throttle, keyBy } from 'lodash'

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

	const Timeline = {
	props: [
	'timeline',
	'timelineName',
	'title',
	'userId',
	'tag',
	'embedded',
	'count',
	'pinnedStatusIds',
	'inProfile'
	],
	data () {
	return {
	paused: false,
	unfocused: false,
	- bottomedOut: false
	+ bottomedOut: false,
	+ virtualScrollIndex: 0
	}
	},
	components: {
	Status,
	Conversation,
	TimelineMenu
	},
	computed: {
	timelineError () {
	return this.$store.state.statuses.error
	},
	errorData () {
	return this.$store.state.statuses.errorData
	},
	newStatusCount () {
	return this.timeline.newStatusCount
	},
	showLoadButton () {
	if (this.timelineError \|\| this.errorData) return false
	return this.timeline.newStatusCount > 0 \|\| this.timeline.flushMarker !== 0
	},
	loadButtonString () {
	if (this.timeline.flushMarker !== 0) {
	return this.$t('timeline.reload')
	} else {
	return `${this.$t('timeline.show_new')} (${this.newStatusCount})`
	}
	},
	classes () {
	return {
	root: ['timeline'].concat(!this.embedded ? ['panel', 'panel-default'] : []),
	header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []),
	body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
	footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
	}
	},
	// id map of statuses which need to be hidden in the main list due to pinning logic
	excludedStatusIdsObject () {
	const ids = getExcludedStatusIdsByPinning(this.timeline.visibleStatuses, this.pinnedStatusIds)
	// Convert id array to object
	return keyBy(ids)
	},
	pinnedStatusIdsObject () {
	return keyBy(this.pinnedStatusIds)
	+ },
	+ statusesToDisplay () {
	+ const amount = this.timeline.visibleStatuses.length
	+ const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
	+ const min = Math.max(0, this.virtualScrollIndex - statusesPerSide)
	+ const max = Math.min(amount, this.virtualScrollIndex + statusesPerSide)
	+ return this.timeline.visibleStatuses.slice(min, max).map(_ => _.id)
	+ },
	+ virtualScrollingEnabled () {
	+ return this.$store.getters.mergedConfig.virtualScrolling
	}
	},
	created () {
	const store = this.$store
	const credentials = store.state.users.currentUser.credentials
	const showImmediately = this.timeline.visibleStatuses.length === 0

	- window.addEventListener('scroll', this.scrollLoad)
	+ window.addEventListener('scroll', this.handleScroll)

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

	timelineFetcher.fetchAndUpdate({
	store,
	credentials,
	timeline: this.timelineName,
	showImmediately,
	userId: this.userId,
	tag: this.tag
	})
	},
	mounted () {
	if (typeof document.hidden !== 'undefined') {
	document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
	this.unfocused = document.hidden
	}
	window.addEventListener('keydown', this.handleShortKey)
	+ setTimeout(this.determineVisibleStatuses, 250)
	},
	destroyed () {
	- window.removeEventListener('scroll', this.scrollLoad)
	+ window.removeEventListener('scroll', this.handleScroll)
	window.removeEventListener('keydown', this.handleShortKey)
	if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
	this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
	},
	methods: {
	handleShortKey (e) {
	// Ignore when input fields are focused
	if (['textarea', 'input'].includes(e.target.tagName.toLowerCase())) return
	if (e.key === '.') this.showNewStatuses()
	},
	showNewStatuses () {
	if (this.timeline.flushMarker !== 0) {
	this.$store.commit('clearTimeline', { timeline: this.timelineName, excludeUserId: true })
	this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
	this.fetchOlderStatuses()
	} else {
	this.$store.commit('showNewStatuses', { timeline: this.timelineName })
	this.paused = false
	}
	},
	fetchOlderStatuses: throttle(function () {
	const store = this.$store
	const credentials = store.state.users.currentUser.credentials
	store.commit('setLoading', { timeline: this.timelineName, value: true })
	timelineFetcher.fetchAndUpdate({
	store,
	credentials,
	timeline: this.timelineName,
	older: true,
	showImmediately: true,
	userId: this.userId,
	tag: this.tag
	}).then(({ statuses }) => {
	store.commit('setLoading', { timeline: this.timelineName, value: false })
	if (statuses && statuses.length === 0) {
	this.bottomedOut = true
	}
	})
	}, 1000, this),
	+ determineVisibleStatuses () {
	+ if (!this.$refs.timeline) return
	+ if (!this.virtualScrollingEnabled) return
	+
	+ const statuses = this.$refs.timeline.children
	+ const cappedScrollIndex = Math.max(0, Math.min(this.virtualScrollIndex, statuses.length - 1))
	+
	+ if (statuses.length === 0) return
	+
	+ const height = Math.max(document.body.offsetHeight, window.pageYOffset)
	+
	+ const centerOfScreen = window.pageYOffset + (window.innerHeight * 0.5)
	+
	+ // Start from approximating the index of some visible status by using the
	+ // the center of the screen on the timeline.
	+ let approxIndex = Math.floor(statuses.length * (centerOfScreen / height))
	+ let err = statuses[approxIndex].getBoundingClientRect().y
	+
	+ // if we have a previous scroll index that can be used, test if it's
	+ // closer than the previous approximation, use it if so
	+
	+ const virtualScrollIndexY = statuses[cappedScrollIndex].getBoundingClientRect().y
	+ if (Math.abs(err) > virtualScrollIndexY) {
	+ approxIndex = cappedScrollIndex
	+ err = virtualScrollIndexY
	+ }
	+
	+ // if the status is too far from viewport, check the next/previous ones if
	+ // they happen to be better
	+ while (err < -20 && approxIndex < statuses.length - 1) {
	+ err += statuses[approxIndex].offsetHeight
	+ approxIndex++
	+ }
	+ while (err > window.innerHeight + 100 && approxIndex > 0) {
	+ approxIndex--
	+ err -= statuses[approxIndex].offsetHeight
	+ }
	+
	+ // this status is now the center point for virtual scrolling and visible
	+ // statuses will be nearby statuses before and after it
	+ this.virtualScrollIndex = approxIndex
	+ },
	scrollLoad (e) {
	const bodyBRect = document.body.getBoundingClientRect()
	const height = Math.max(bodyBRect.height, -(bodyBRect.y))
	if (this.timeline.loading === false &&
	this.$el.offsetHeight > 0 &&
	(window.innerHeight + window.pageYOffset) >= (height - 750)) {
	this.fetchOlderStatuses()
	}
	},
	+ handleScroll: throttle(function (e) {
	+ this.determineVisibleStatuses()
	+ this.scrollLoad(e)
	+ }, 200),
	handleVisibilityChange () {
	this.unfocused = document.hidden
	}
	},
	watch: {
	newStatusCount (count) {
	if (!this.$store.getters.mergedConfig.streaming) {
	return
	}
	if (count > 0) {
	// only 'stream' them when you're scrolled to the top
	const doc = document.documentElement
	const top = (window.pageYOffset \|\| doc.scrollTop) - (doc.clientTop \|\| 0)
	if (top < 15 &&
	!this.paused &&
	!(this.unfocused && this.$store.getters.mergedConfig.pauseOnUnfocused)
	) {
	this.showNewStatuses()
	} else {
	this.paused = true
	}
	}
	}
	}
	}

	export default Timeline
	diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
	index 2ff933e90a..c1e2f44bd4 100644
	--- a/src/components/timeline/timeline.vue
	+++ b/src/components/timeline/timeline.vue
	@@ -1,119 +1,123 @@
	<template>
	<div :class="[classes.root, 'timeline']">
	<div :class="classes.header">
	<TimelineMenu v-if="!embedded" />
	<div
	v-if="timelineError"
	class="loadmore-error alert error"
	@click.prevent
	>
	{{ $t('timeline.error_fetching') }}
	</div>
	<div
	v-else-if="errorData"
	class="loadmore-error alert error"
	@click.prevent
	>
	{{ errorData.statusText }}
	</div>
	<button
	v-else-if="showLoadButton"
	class="loadmore-button"
	@click.prevent="showNewStatuses"
	>
	{{ loadButtonString }}
	</button>
	<div
	v-else
	class="loadmore-text faint"
	@click.prevent
	>
	{{ $t('timeline.up_to_date') }}
	</div>
	</div>
	<div :class="classes.body">
	- <div class="timeline">
	+ <div
	+ ref="timeline"
	+ class="timeline"
	+ >
	<template v-for="statusId in pinnedStatusIds">
	<conversation
	v-if="timeline.statusesObject[statusId]"
	:key="statusId + '-pinned'"
	class="status-fadein"
	:status-id="statusId"
	:collapsable="true"
	:pinned-status-ids-object="pinnedStatusIdsObject"
	:in-profile="inProfile"
	:profile-user-id="userId"
	/>
	</template>
	<template v-for="status in timeline.visibleStatuses">
	<conversation
	v-if="!excludedStatusIdsObject[status.id]"
	:key="status.id"
	class="status-fadein"
	:status-id="status.id"
	:collapsable="true"
	:in-profile="inProfile"
	:profile-user-id="userId"
	+ :virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.includes(status.id)"
	/>
	</template>
	</div>
	</div>
	<div :class="classes.footer">
	<div
	v-if="count===0"
	class="new-status-notification text-center panel-footer faint"
	>
	{{ $t('timeline.no_statuses') }}
	</div>
	<div
	v-else-if="bottomedOut"
	class="new-status-notification text-center panel-footer faint"
	>
	{{ $t('timeline.no_more_statuses') }}
	</div>
	<a
	v-else-if="!timeline.loading && !errorData"
	href="#"
	@click.prevent="fetchOlderStatuses()"
	>
	<div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
	</a>
	<a
	v-else-if="errorData"
	href="#"
	>
	<div class="new-status-notification text-center panel-footer">{{ errorData.error }}</div>
	</a>
	<div
	v-else
	class="new-status-notification text-center panel-footer"
	>
	<i class="icon-spin3 animate-spin" />
	</div>
	</div>
	</div>
	</template>

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

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

	.timeline {
	.loadmore-text {
	opacity: 1;
	}
	}

	.timeline-heading {
	max-width: 100%;
	flex-wrap: nowrap;
	.loadmore-button {
	flex-shrink: 0;
	}
	.loadmore-text {
	flex-shrink: 0;
	line-height: 1em;
	}
	}
	</style>
	diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
	index be512d605e..b7e5f2da9e 100644
	--- a/src/components/timeline_menu/timeline_menu.vue
	+++ b/src/components/timeline_menu/timeline_menu.vue
	@@ -1,180 +1,180 @@
	<template>
	<Popover
	trigger="click"
	class="timeline-menu"
	:class="{ 'open': isOpen }"
	:margin="{ left: -15, right: -200 }"
	:bound-to="{ x: 'container' }"
	popover-class="timeline-menu-popover-wrap"
	@show="openMenu"
	@close="() => isOpen = false"
	>
	<div
	slot="content"
	class="timeline-menu-popover panel panel-default"
	>
	<ul>
	<li v-if="currentUser">
	<router-link :to="{ name: 'friends' }">
	<i class="button-icon icon-home-2" />{{ $t("nav.timeline") }}
	</router-link>
	</li>
	<li v-if="currentUser">
	<router-link :to="{ name: 'bookmarks'}">
	<i class="button-icon icon-bookmark" />{{ $t("nav.bookmarks") }}
	</router-link>
	</li>
	<li v-if="currentUser">
	<router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
	<i class="button-icon icon-mail-alt" />{{ $t("nav.dms") }}
	</router-link>
	</li>
	<li v-if="currentUser \|\| !privateMode">
	<router-link :to="{ name: 'public-timeline' }">
	<i class="button-icon icon-users" />{{ $t("nav.public_tl") }}
	</router-link>
	</li>
	<li v-if="federating && (currentUser \|\| !privateMode)">
	<router-link :to="{ name: 'public-external-timeline' }">
	<i class="button-icon icon-globe" />{{ $t("nav.twkn") }}
	</router-link>
	</li>
	</ul>
	</div>
	<div
	slot="trigger"
	class="title timeline-menu-title"
	>
	<span>{{ timelineName() }}</span>
	<i class="icon-down-open" />
	</div>
	</Popover>
	</template>

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

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

	.timeline-menu {
	flex-shrink: 1;
	margin-right: auto;
	min-width: 0;
	width: 24rem;
	.timeline-menu-popover-wrap {
	overflow: hidden;
	// Match panel heading padding to line up menu with bottom of heading
	margin-top: 0.6rem;
	padding: 0 15px 15px 15px;
	}
	.timeline-menu-popover {
	width: 24rem;
	max-width: 100vw;
	margin: 0;
	font-size: 1rem;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	transform: translateY(-100%);
	transition: transform 100ms;
	}
	.panel::after {
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	}
	&.open .timeline-menu-popover {
	transform: translateY(0);
	}

	.timeline-menu-title {
	margin: 0;
	cursor: pointer;
	display: flex;
	user-select: none;
	width: 100%;

	span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	i {
	margin-left: 0.6em;
	flex-shrink: 0;
	font-size: 1rem;
	transition: transform 100ms;
	}
	}

	&.open .timeline-menu-title i {
	color: $fallback--text;
	color: var(--panelText, $fallback--text);
	transform: rotate(180deg);
	}

	.panel {
	box-shadow: var(--popoverShadow);
	}

	ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

	li {
	border-bottom: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	padding: 0;

	&:last-child a {
	border-bottom-right-radius: $fallback--panelRadius;
	border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
	border-bottom-left-radius: $fallback--panelRadius;
	border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
	}

	&:last-child {
	border: none;
	}
	-
	- i {
	- margin: 0 0.5em;
	- }
	}

	a {
	display: block;
	- padding: 0.6em 0;
	+ padding: 0.6em 0.65em;

	&:hover {
	background-color: $fallback--lightBg;
	background-color: var(--selectedMenu, $fallback--lightBg);
	color: $fallback--link;
	color: var(--selectedMenuText, $fallback--link);
	--faint: var(--selectedMenuFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuLightText, $fallback--lightText);
	--icon: var(--selectedMenuIcon, $fallback--icon);
	}

	&.router-link-active {
	font-weight: bolder;
	background-color: $fallback--lightBg;
	background-color: var(--selectedMenu, $fallback--lightBg);
	color: $fallback--text;
	color: var(--selectedMenuText, $fallback--text);
	--faint: var(--selectedMenuFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuLightText, $fallback--lightText);
	--icon: var(--selectedMenuIcon, $fallback--icon);

	&:hover {
	text-decoration: underline;
	}
	}
	+
	+ i {
	+ margin-right: 0.5em;
	+ }
	}
	}

	</style>
	diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
	index c7c67c0a0b..b26499b43b 100644
	--- a/src/components/user_profile/user_profile.vue
	+++ b/src/components/user_profile/user_profile.vue
	@@ -1,224 +1,223 @@
	<template>
	<div>
	<div
	v-if="user"
	class="user-profile panel panel-default"
	>
	<UserCard
	:user-id="userId"
	:switcher="true"
	:selected="timeline.viewing"
	:allow-zooming-avatar="true"
	rounded="top"
	/>
	<div
	v-if="user.fields_html && user.fields_html.length > 0"
	class="user-profile-fields"
	>
	<dl
	v-for="(field, index) in user.fields_html"
	:key="index"
	class="user-profile-field"
	>
	<dt
	:title="user.fields_text[index].name"
	class="user-profile-field-name"
	@click.prevent="linkClicked"
	>
	{{ field.name }}
	</dt>
	<!-- eslint-disable vue/no-v-html -->
	<dd
	:title="user.fields_text[index].value"
	class="user-profile-field-value"
	@click.prevent="linkClicked"
	v-html="field.value"
	/>
	<!-- eslint-enable vue/no-v-html -->
	</dl>
	</div>
	<tab-switcher
	:active-tab="tab"
	:render-only-focused="true"
	:on-switch="onTabSwitch"
	>
	<Timeline
	key="statuses"
	:label="$t('user_card.statuses')"
	:count="user.statuses_count"
	:embedded="true"
	:title="$t('user_profile.timeline_title')"
	:timeline="timeline"
	timeline-name="user"
	:user-id="userId"
	:pinned-status-ids="user.pinnedStatusIds"
	:in-profile="true"
	/>
	<div
	v-if="followsTabVisible"
	key="followees"
	:label="$t('user_card.followees')"
	:disabled="!user.friends_count"
	>
	<FriendList :user-id="userId">
	<template
	slot="item"
	slot-scope="{item}"
	>
	<FollowCard :user="item" />
	</template>
	</FriendList>
	</div>
	<div
	v-if="followersTabVisible"
	key="followers"
	:label="$t('user_card.followers')"
	:disabled="!user.followers_count"
	>
	<FollowerList :user-id="userId">
	<template
	slot="item"
	slot-scope="{item}"
	>
	<FollowCard
	:user="item"
	:no-follows-you="isUs"
	/>
	</template>
	</FollowerList>
	</div>
	<Timeline
	key="media"
	:label="$t('user_card.media')"
	:disabled="!media.visibleStatuses.length"
	:embedded="true"
	:title="$t('user_card.media')"
	timeline-name="media"
	:timeline="media"
	:user-id="userId"
	:in-profile="true"
	/>
	<Timeline
	v-if="isUs"
	key="favorites"
	:label="$t('user_card.favorites')"
	:disabled="!favorites.visibleStatuses.length"
	:embedded="true"
	:title="$t('user_card.favorites')"
	timeline-name="favorites"
	:timeline="favorites"
	:in-profile="true"
	/>
	</tab-switcher>
	</div>
	<div
	v-else
	class="panel user-profile-placeholder"
	>
	<div class="panel-heading">
	<div class="title">
	{{ $t('settings.profile_tab') }}
	</div>
	</div>
	<div class="panel-body">
	<span v-if="error">{{ error }}</span>
	<i
	v-else
	class="icon-spin3 animate-spin"
	/>
	</div>
	</div>
	</div>
	</template>

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

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

	.user-profile {
	flex: 2;
	flex-basis: 500px;

	.user-profile-fields {
	margin: 0 0.5em;
	img {
	object-fit: contain;
	vertical-align: middle;
	max-width: 100%;
	max-height: 400px;

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

	.user-profile-field {
	display: flex;
	- margin: 0.25em auto;
	- max-width: 32em;
	+ margin: 0.25em;
	border: 1px solid var(--border, $fallback--border);
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);

	.user-profile-field-name {
	flex: 0 1 30%;
	font-weight: 500;
	text-align: right;
	color: var(--lightText);
	min-width: 120px;
	border-right: 1px solid var(--border, $fallback--border);
	}

	.user-profile-field-value {
	flex: 1 1 70%;
	color: var(--text);
	margin: 0 0 0 0.25em;
	}

	.user-profile-field-name, .user-profile-field-value {
	line-height: 18px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 0.5em 1.5em;
	box-sizing: border-box;
	}
	}
	}

	.userlist-placeholder {
	display: flex;
	justify-content: center;
	align-items: middle;
	padding: 2em;
	}

	.timeline-heading {
	display: flex;
	justify-content: center;

	.loadmore-button, .alert {
	flex: 1;
	}

	.loadmore-button {
	height: 28px;
	margin: 10px .6em;
	}

	.title, .loadmore-text {
	display: none
	}
	}
	}
	.user-profile-placeholder {
	.panel-body {
	display: flex;
	justify-content: center;
	align-items: middle;
	padding: 7em;
	}
	}
	</style>
	diff --git a/src/components/video_attachment/video_attachment.js b/src/components/video_attachment/video_attachment.js
	index f0ca7e8992..107b898552 100644
	--- a/src/components/video_attachment/video_attachment.js
	+++ b/src/components/video_attachment/video_attachment.js
	@@ -1,31 +1,52 @@

	const VideoAttachment = {
	props: ['attachment', 'controls'],
	data () {
	return {
	- loopVideo: this.$store.getters.mergedConfig.loopVideo
	+ blocksSuspend: false,
	+ // Start from true because removing "loop" property seems buggy in Vue
	+ hasAudio: true
	+ }
	+ },
	+ computed: {
	+ loopVideo () {
	+ if (this.$store.getters.mergedConfig.loopVideoSilentOnly) {
	+ return !this.hasAudio
	+ }
	+ return this.$store.getters.mergedConfig.loopVideo
	}
	},
	methods: {
	- onVideoDataLoad (e) {
	+ onPlaying (e) {
	+ this.setHasAudio(e)
	+ if (this.loopVideo) {
	+ this.$emit('play', { looping: true })
	+ return
	+ }
	+ this.$emit('play')
	+ },
	+ onPaused (e) {
	+ this.$emit('pause')
	+ },
	+ setHasAudio (e) {
	const target = e.srcElement \|\| e.target
	+ // If hasAudio is false, we've already marked this video to not have audio,
	+ // a video can't gain audio out of nowhere so don't bother checking again.
	+ if (!this.hasAudio) return
	if (typeof target.webkitAudioDecodedByteCount !== 'undefined') {
	// non-zero if video has audio track
	- if (target.webkitAudioDecodedByteCount > 0) {
	- this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
	- }
	- } else if (typeof target.mozHasAudio !== 'undefined') {
	+ if (target.webkitAudioDecodedByteCount > 0) return
	+ }
	+ if (typeof target.mozHasAudio !== 'undefined') {
	// true if video has audio track
	- if (target.mozHasAudio) {
	- this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
	- }
	- } else if (typeof target.audioTracks !== 'undefined') {
	- if (target.audioTracks.length > 0) {
	- this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
	- }
	+ if (target.mozHasAudio) return
	+ }
	+ if (typeof target.audioTracks !== 'undefined') {
	+ if (target.audioTracks.length > 0) return
	}
	+ this.hasAudio = false
	}
	}
	}

	export default VideoAttachment
	diff --git a/src/components/video_attachment/video_attachment.vue b/src/components/video_attachment/video_attachment.vue
	index 1ffed4e049..a4bf01e8e2 100644
	--- a/src/components/video_attachment/video_attachment.vue
	+++ b/src/components/video_attachment/video_attachment.vue
	@@ -1,14 +1,15 @@
	<template>
	<video
	class="video"
	:src="attachment.url"
	:loop="loopVideo"
	:controls="controls"
	:alt="attachment.description"
	:title="attachment.description"
	playsinline
	- @loadeddata="onVideoDataLoad"
	+ @playing="onPlaying"
	+ @pause="onPaused"
	/>
	</template>

	<script src="./video_attachment.js"></script>
	diff --git a/src/i18n/en.json b/src/i18n/en.json
	index ce89c72b00..317874cec3 100644
	--- a/src/i18n/en.json
	+++ b/src/i18n/en.json
	@@ -1,805 +1,811 @@
	{
	"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",
	"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 \"The Whole Known Network\" Timeline",
	"ftl_removal_desc": "This instance removes these instances from \"The Whole Known Network\" timeline:",
	"media_removal": "Media Removal",
	"media_removal_desc": "This instance removes media from posts on the following instances:",
	"media_nsfw": "Media Force-set As Sensitive",
	"media_nsfw_desc": "This instance forces media to be set sensitive in posts on the following instances:"
	}
	},
	"staff": "Staff"
	},
	"shoutbox": {
	"title": "Shoutbox"
	},
	"domain_mute_card": {
	"mute": "Mute",
	"mute_progress": "Muting…",
	"unmute": "Unmute",
	"unmute_progress": "Unmuting…"
	},
	"exporter": {
	"export": "Export",
	"processing": "Processing, you'll soon be asked to download your file"
	},
	"features_panel": {
	"chat": "Chat",
	"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"
	},
	"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",
	"error_retry": "Please try again",
	"retry": "Try again",
	"optional": "optional",
	"show_more": "Show more",
	"show_less": "Show less",
	"dismiss": "Dismiss",
	"cancel": "Cancel",
	"disable": "Disable",
	"enable": "Enable",
	"confirm": "Confirm",
	"verify": "Verify",
	"close": "Close",
	"peek": "Peek"
	},
	"image_cropper": {
	"crop_picture": "Crop picture",
	"save": "Save",
	"save_without_cropping": "Save without cropping",
	"cancel": "Cancel"
	},
	"importer": {
	"submit": "Submit",
	"success": "Imported successfully.",
	"error": "An error occured while importing this file."
	},
	"login": {
	"login": "Log in",
	"description": "Log in with OAuth",
	"logout": "Log out",
	"password": "Password",
	"placeholder": "e.g. lain",
	"register": "Register",
	"username": "Username",
	"hint": "Log in to join the discussion",
	"authentication_code": "Authentication code",
	"enter_recovery_code": "Enter a recovery code",
	"enter_two_factor_code": "Enter a two-factor code",
	"recovery_code": "Recovery code",
	"heading": {
	"totp": "Two-factor authentication",
	"recovery": "Two-factor recovery"
	}
	},
	"media_modal": {
	"previous": "Previous",
	"next": "Next"
	},
	"nav": {
	"about": "About",
	"administration": "Administration",
	"back": "Back",
	- "chat": "Local Chat",
	"friend_requests": "Follow Requests",
	"mentions": "Mentions",
	"interactions": "Interactions",
	"dms": "Direct Messages",
	"public_tl": "Public Timeline",
	"timeline": "Timeline",
	"twkn": "Known Network",
	"bookmarks": "Bookmarks",
	"user_search": "User Search",
	"search": "Search",
	"who_to_follow": "Who to follow",
	"preferences": "Preferences",
	"timelines": "Timelines",
	"chats": "Chats"
	},
	"notifications": {
	"broken_favorite": "Unknown status, searching for it…",
	"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}"
	},
	"polls": {
	"add_poll": "Add Poll",
	"add_option": "Add Option",
	"option": "Option",
	"votes": "votes",
	"vote": "Vote",
	"type": "Poll type",
	"single_choice": "Single choice",
	"multiple_choices": "Multiple choices",
	"expiry": "Poll age",
	"expires_in": "Poll ends in {0}",
	"expired": "Poll ended {0} ago",
	"not_enough_options": "Too few unique options in poll"
	},
	"emoji": {
	"stickers": "Stickers",
	"emoji": "Emoji",
	"keep_open": "Keep picker open",
	"search_emoji": "Search for an emoji",
	"add_emoji": "Insert emoji",
	"custom": "Custom emoji",
	"unicode": "Unicode emoji",
	"load_all_hint": "Loaded first {saneAmount} emoji, loading all emoji may cause performance issues.",
	"load_all": "Loading all {emojiAmount} emoji"
	},
	"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",
	"moves": "User migrates",
	"load_older": "Load older interactions"
	},
	"post_status": {
	"new_status": "Post new status",
	"account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
	"account_not_locked_warning_link": "locked",
	"attachments_sensitive": "Mark attachments as sensitive",
	"media_description": "Media description",
	"content_type": {
	"text/plain": "Plain text",
	"text/html": "HTML",
	"text/markdown": "Markdown",
	"text/bbcode": "BBCode"
	},
	"content_warning": "Subject (optional)",
	"default": "Just landed in L.A.",
	"direct_warning_to_all": "This post will be visible to all the mentioned users.",
	"direct_warning_to_first_only": "This post will only be visible to the mentioned users at the beginning of the message.",
	"posting": "Posting",
	"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": "Bio",
	"email": "Email",
	"fullname": "Display name",
	"password_confirm": "Password confirmation",
	"registration": "Registration",
	"token": "Invite token",
	"captcha": "CAPTCHA",
	"new_captcha": "Click the image to get a new captcha",
	"username_placeholder": "e.g. lain",
	"fullname_placeholder": "e.g. Lain Iwakura",
	"bio_placeholder": "e.g.\nHi, I'm Lain.\nI’m an anime girl living in suburban Japan. You may know me from the Wired.",
	"validations": {
	"username_required": "cannot be left blank",
	"fullname_required": "cannot be left blank",
	"email_required": "cannot be left blank",
	"password_required": "cannot be left blank",
	"password_confirmation_required": "cannot be left blank",
	"password_confirmation_match": "should be the same as password"
	}
	},
	"remote_user_resolver": {
	"remote_user_resolver": "Remote user resolver",
	"searching_for": "Searching for",
	"error": "Not found."
	},
	"selectable_list": {
	"select_all": "Select all"
	},
	"settings": {
	"app_name": "App name",
	"security": "Security",
	"enter_current_password_to_confirm": "Enter your current password to confirm your identity",
	"mfa": {
	"otp": "OTP",
	"setup_otp": "Setup OTP",
	"wait_pre_setup_otp": "presetting OTP",
	"confirm_and_enable": "Confirm & enable OTP",
	"title": "Two-factor Authentication",
	"generate_new_recovery_codes": "Generate new recovery codes",
	"warning_of_generate_new_codes": "When you generate new recovery codes, your old codes won’t work anymore.",
	"recovery_codes": "Recovery codes.",
	"waiting_a_recovery_codes": "Receiving backup codes…",
	"recovery_codes_warning": "Write the codes down or save them somewhere secure - otherwise you won't see them again. If you lose access to your 2FA app and recovery codes you'll be locked out of your account.",
	"authentication_methods": "Authentication methods",
	"scan": {
	"title": "Scan",
	"desc": "Using your two-factor app, scan this QR code or enter text key:",
	"secret_code": "Key"
	},
	"verify": {
	"desc": "To enable two-factor authentication, enter the code from your two-factor app:"
	}
	},
	"allow_following_move": "Allow auto-follow when following account moves",
	"attachmentRadius": "Attachments",
	"attachments": "Attachments",
	"avatar": "Avatar",
	"avatarAltRadius": "Avatars (Notifications)",
	"avatarRadius": "Avatars",
	"background": "Background",
	"bio": "Bio",
	"block_export": "Block export",
	"block_export_button": "Export your blocks to a csv file",
	"block_import": "Block import",
	"block_import_error": "Error importing blocks",
	"blocks_imported": "Blocks imported! Processing them will take a while.",
	+ "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",
	"blocks_tab": "Blocks",
	"bot": "This is a bot account",
	"btnRadius": "Buttons",
	"cBlue": "Blue (Reply, follow)",
	"cGreen": "Green (Retweet)",
	"cOrange": "Orange (Favorite)",
	"cRed": "Red (Cancel)",
	"change_email": "Change Email",
	"change_email_error": "There was an issue changing your email.",
	"changed_email": "Email changed successfully!",
	"change_password": "Change Password",
	"change_password_error": "There was an issue changing your password.",
	"changed_password": "Password changed successfully!",
	"chatMessageRadius": "Chat message",
	"collapse_subject": "Collapse posts with subjects",
	"composing": "Composing",
	"confirm_new_password": "Confirm new password",
	"current_password": "Current password",
	"mutes_and_blocks": "Mutes and Blocks",
	"data_import_export_tab": "Data Import / Export",
	"default_vis": "Default visibility scope",
	"delete_account": "Delete Account",
	"delete_account_description": "Permanently delete your data and deactivate your account.",
	"delete_account_error": "There was an issue deleting your account. If this persists please contact your instance administrator.",
	"delete_account_instructions": "Type your password in the input below to confirm account deletion.",
	"discoverable": "Allow discovery of this account in search results and other services",
	"domain_mutes": "Domains",
	"avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
	"pad_emoji": "Pad emoji with spaces when adding from picker",
	"emoji_reactions_on_timeline": "Show emoji reactions on timeline",
	"export_theme": "Save preset",
	"filtering": "Filtering",
	"filtering_explanation": "All statuses containing these words will be muted, one per line",
	"follow_export": "Follow export",
	"follow_export_button": "Export your follows to a csv file",
	"follow_import": "Follow import",
	"follow_import_error": "Error importing followers",
	"follows_imported": "Follows imported! Processing them will take a while.",
	"accent": "Accent",
	"foreground": "Foreground",
	"general": "General",
	"hide_attachments_in_convo": "Hide attachments in conversations",
	"hide_attachments_in_tl": "Hide attachments in timeline",
	"hide_muted_posts": "Hide posts of muted users",
	"max_thumbnails": "Maximum amount of thumbnails per post",
	"hide_isp": "Hide instance-specific panel",
	"show_third_column": "Move Notifications to a seperate column",
	"preload_images": "Preload images",
	"use_one_click_nsfw": "Open NSFW attachments with just one click",
	"hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
	"hide_user_stats": "Hide user statistics (e.g. the number of followers)",
	"hide_filtered_statuses": "Hide filtered statuses",
	"import_blocks_from_a_csv_file": "Import blocks from a csv file",
	"import_followers_from_a_csv_file": "Import follows from a csv file",
	"import_theme": "Load preset",
	"inputRadius": "Input fields",
	"checkboxRadius": "Checkboxes",
	"instance_default": "(default: {value})",
	"instance_default_simple": "(default)",
	"interface": "Interface",
	"interfaceLanguage": "Interface language",
	"invalid_theme_imported": "The selected file is not a supported Pleroma theme. No changes to your theme were made.",
	"limited_availability": "Unavailable in your browser",
	"links": "Links",
	"lock_account_description": "Restrict your account to approved followers only",
	"loop_video": "Loop videos",
	"loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
	"mutes_tab": "Mutes",
	"play_videos_in_modal": "Play videos in a popup frame",
	"profile_fields": {
	"label": "Profile metadata",
	"add_field": "Add Field",
	"name": "Label",
	"value": "Content"
	},
	"use_contain_fit": "Don't crop the attachment in thumbnails",
	"name": "Name",
	"name_bio": "Name & Bio",
	"new_email": "New Email",
	"new_password": "New password",
	"notification_visibility": "Types of notifications to show",
	"notification_visibility_follows": "Follows",
	"notification_visibility_likes": "Likes",
	"notification_visibility_mentions": "Mentions",
	"notification_visibility_repeats": "Repeats",
	"notification_visibility_moves": "User Migrates",
	"notification_visibility_emoji_reactions": "Reactions",
	"no_rich_text_description": "Strip rich text formatting from all posts",
	"no_blocks": "No blocks",
	"no_mutes": "No mutes",
	"hide_follows_description": "Don't show who I'm following",
	"hide_followers_description": "Don't show who's following me",
	"hide_follows_count_description": "Don't show follow count",
	"hide_followers_count_description": "Don't show follower count",
	"show_admin_badge": "Show Admin badge in my profile",
	"show_moderator_badge": "Show Moderator badge in my profile",
	"nsfw_clickthrough": "Enable clickthrough NSFW attachment hiding",
	"oauth_tokens": "OAuth tokens",
	"token": "Token",
	"refresh_token": "Refresh Token",
	"valid_until": "Valid Until",
	"revoke_token": "Revoke",
	"panelRadius": "Panels",
	"pause_on_unfocused": "Pause streaming when tab is not focused",
	"presets": "Presets",
	"profile_background": "Profile Background",
	"profile_banner": "Profile Banner",
	"profile_tab": "Profile",
	"radii_help": "Set up interface edge rounding (in pixels)",
	"replies_in_timeline": "Replies in timeline",
	"reply_visibility_all": "Show all replies",
	"reply_visibility_following": "Only show replies directed at me or users I'm following",
	"reply_visibility_self": "Only show replies directed at me",
	"autohide_floating_post_button": "Automatically hide New Post button (mobile)",
	"saving_err": "Error saving settings",
	"saving_ok": "Settings saved",
	"search_user_to_block": "Search whom you want to block",
	"search_user_to_mute": "Search whom you want to mute",
	"security_tab": "Security",
	"scope_copy": "Copy scope when replying (DMs are always copied)",
	"minimal_scopes_mode": "Minimize post scope selection options",
	"set_new_avatar": "Set new avatar",
	"set_new_profile_background": "Set new profile background",
	"set_new_profile_banner": "Set new profile banner",
	"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",
	"post_status_content_type": "Post status content type",
	"stop_gifs": "Play-on-hover GIFs",
	"streaming": "Enable automatic streaming of new posts when scrolled to the top",
	"user_mutes": "Users",
	"useStreamingApi": "Receive posts and notifications real-time",
	"useStreamingApiWarning": "(Not recommended, experimental, known to skip posts)",
	"text": "Text",
	"theme": "Theme",
	"theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
	"theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
	"theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
	"tooltipRadius": "Tooltips/alerts",
	"type_domains_to_mute": "Search domains to mute",
	"upload_a_photo": "Upload a photo",
	"user_settings": "User Settings",
	"values": {
	"false": "no",
	"true": "yes"
	},
	+ "virtual_scrolling": "Optimize timeline rendering",
	"fun": "Fun",
	"greentext": "Meme arrows",
	"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",
	"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",
	"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": {
	"day": "{0} day",
	"days": "{0} days",
	"day_short": "{0}d",
	"days_short": "{0}d",
	"hour": "{0} hour",
	"hours": "{0} hours",
	"hour_short": "{0}h",
	"hours_short": "{0}h",
	"in_future": "in {0}",
	"in_past": "{0} ago",
	"minute": "{0} minute",
	"minutes": "{0} minutes",
	"minute_short": "{0}min",
	"minutes_short": "{0}min",
	"month": "{0} month",
	"months": "{0} months",
	"month_short": "{0}mo",
	"months_short": "{0}mo",
	"now": "just now",
	"now_short": "now",
	"second": "{0} second",
	"seconds": "{0} seconds",
	"second_short": "{0}s",
	"seconds_short": "{0}s",
	"week": "{0} week",
	"weeks": "{0} weeks",
	"week_short": "{0}w",
	"weeks_short": "{0}w",
	"year": "{0} year",
	"years": "{0} years",
	"year_short": "{0}y",
	"years_short": "{0}y"
	},
	"timeline": {
	"collapse": "Collapse",
	"conversation": "Conversation",
	"error_fetching": "Error fetching updates",
	"load_older": "Load older statuses",
	"no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated",
	"repeated": "repeated",
	"show_new": "Show new",
	"reload": "Reload",
	"up_to_date": "Up-to-date",
	"no_more_statuses": "No more statuses",
	"no_statuses": "No statuses"
	},
	"status": {
	"favorites": "Favorites",
	"repeats": "Repeats",
	"delete": "Delete status",
	"pin": "Pin on profile",
	"unpin": "Unpin from profile",
	"pinned": "Pinned",
	"bookmark": "Bookmark",
	"unbookmark": "Unbookmark",
	"delete_confirm": "Do you really want to delete this status?",
	"reply_to": "Reply to",
	"replies_list": "Replies:",
	"mute_conversation": "Mute conversation",
	"unmute_conversation": "Unmute conversation",
	"status_unavailable": "Status unavailable",
	"copy_link": "Copy link to status",
	"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"
	},
	"user_card": {
	"approve": "Approve",
	"block": "Block",
	"blocked": "Blocked!",
	"deny": "Deny",
	"favorites": "Favorites",
	"follow": "Follow",
	"follow_sent": "Request sent!",
	"follow_progress": "Requesting…",
	"follow_again": "Send request again?",
	"follow_unfollow": "Unfollow",
	"followees": "Following",
	"followers": "Followers",
	"following": "Following!",
	"follows_you": "Follows you!",
	"hidden": "Hidden",
	"its_you": "It's you!",
	"media": "Media",
	"mention": "Mention",
	"message": "Message",
	"mute": "Mute",
	"muted": "Muted",
	"per_day": "per day",
	"remote_follow": "Remote follow",
	"report": "Report",
	"statuses": "Statuses",
	"subscribe": "Subscribe",
	"unsubscribe": "Unsubscribe",
	"unblock": "Unblock",
	"unblock_progress": "Unblocking…",
	"block_progress": "Blocking…",
	"unmute": "Unmute",
	"unmute_progress": "Unmuting…",
	"mute_progress": "Muting…",
	"hide_repeats": "Hide repeats",
	"show_repeats": "Show repeats",
	"admin_menu": {
	"moderation": "Moderation",
	"grant_admin": "Grant Admin",
	"revoke_admin": "Revoke Admin",
	"grant_moderator": "Grant Moderator",
	"revoke_moderator": "Revoke Moderator",
	"activate_account": "Activate account",
	"deactivate_account": "Deactivate account",
	"delete_account": "Delete account",
	"force_nsfw": "Mark all posts as NSFW",
	"strip_media": "Remove media from posts",
	"force_unlisted": "Force posts to be unlisted",
	"sandbox": "Force posts to be followers-only",
	"disable_remote_subscription": "Disallow following user from remote instances",
	"disable_any_subscription": "Disallow following user at all",
	"quarantine": "Disallow user posts from federating",
	"delete_user": "Delete user",
	"delete_user_confirmation": "Are you absolutely sure? This action cannot be undone."
	}
	},
	"user_profile": {
	"timeline_title": "User Timeline",
	"profile_does_not_exist": "Sorry, this profile does not exist.",
	"profile_loading_error": "Sorry, there was an error loading this profile."
	},
	"user_reporting": {
	"title": "Reporting {0}",
	"add_comment_description": "The report will be sent to your instance moderators. You can provide an explanation of why you are reporting this account below:",
	"additional_comments": "Additional comments",
	"forward_description": "The account is from another server. Send a copy of the report there as well?",
	"forward_to": "Forward to {0}",
	"submit": "Submit",
	"generic_error": "An error occurred while processing your request."
	},
	"who_to_follow": {
	"more": "More",
	"who_to_follow": "Who to follow"
	},
	"tool_tip": {
	"media_upload": "Upload Media",
	"repeat": "Repeat",
	"reply": "Reply",
	"favorite": "Favorite",
	"add_reaction": "Add Reaction",
	"user_settings": "User Settings",
	"accept_follow_request": "Accept follow request",
	"reject_follow_request": "Reject follow request",
	"bookmark": "Bookmark"
	},
	"upload": {
	"error": {
	"base": "Upload failed.",
	"file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
	"default": "Try again later"
	},
	"file_size_units": {
	"B": "B",
	"KiB": "KiB",
	"MiB": "MiB",
	"GiB": "GiB",
	"TiB": "TiB"
	}
	},
	"search": {
	"people": "People",
	"hashtags": "Hashtags",
	"person_talking": "{count} person talking",
	"people_talking": "{count} people talking",
	"no_results": "No results"
	},
	"password_reset": {
	"forgot_password": "Forgot password?",
	"password_reset": "Password reset",
	"instruction": "Enter your email address or username. We will send you a link to reset your password.",
	"placeholder": "Your email or username",
	"check_email": "Check your email for a link to reset your password.",
	"return_home": "Return to the home page",
	"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!"
	},
	"file_type": {
	"audio": "Audio",
	"video": "Video",
	"image": "Image",
	"file": "File"
	},
	"display_date": {
	"today": "Today"
	}
	}
	diff --git a/src/modules/api.js b/src/modules/api.js
	index 5e213f0db2..73511442d7 100644
	--- a/src/modules/api.js
	+++ b/src/modules/api.js
	@@ -1,203 +1,203 @@
	import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
	import { WSConnectionStatus } from '../services/api/api.service.js'
	import { maybeShowChatNotification } from '../services/chat_utils/chat_utils.js'
	import { Socket } from 'phoenix'

	const api = {
	state: {
	backendInteractor: backendInteractorService(),
	fetchers: {},
	socket: null,
	mastoUserSocket: null,
	mastoUserSocketStatus: null,
	followRequests: []
	},
	mutations: {
	setBackendInteractor (state, backendInteractor) {
	state.backendInteractor = backendInteractor
	},
	addFetcher (state, { fetcherName, fetcher }) {
	state.fetchers[fetcherName] = fetcher
	},
	removeFetcher (state, { fetcherName, fetcher }) {
	- window.clearInterval(fetcher)
	+ state.fetchers[fetcherName].stop()
	delete state.fetchers[fetcherName]
	},
	setWsToken (state, token) {
	state.wsToken = token
	},
	setSocket (state, socket) {
	state.socket = socket
	},
	setFollowRequests (state, value) {
	state.followRequests = value
	},
	setMastoUserSocketStatus (state, value) {
	state.mastoUserSocketStatus = value
	}
	},
	actions: {
	// Global MastoAPI socket control, in future should disable ALL sockets/(re)start relevant sockets
	enableMastoSockets (store) {
	const { state, dispatch } = store
	if (state.mastoUserSocket) return
	return dispatch('startMastoUserSocket')
	},
	disableMastoSockets (store) {
	const { state, dispatch } = store
	if (!state.mastoUserSocket) return
	return dispatch('stopMastoUserSocket')
	},

	// MastoAPI 'User' sockets
	startMastoUserSocket (store) {
	return new Promise((resolve, reject) => {
	try {
	const { state, commit, dispatch, rootState } = store
	const timelineData = rootState.statuses.timelines.friends
	state.mastoUserSocket = state.backendInteractor.startUserSocket({ store })
	state.mastoUserSocket.addEventListener(
	'message',
	({ detail: message }) => {
	if (!message) return // pings
	if (message.event === 'notification') {
	dispatch('addNewNotifications', {
	notifications: [message.notification],
	older: false
	})
	} else if (message.event === 'update') {
	dispatch('addNewStatuses', {
	statuses: [message.status],
	userId: false,
	showImmediately: timelineData.visibleStatuses.length === 0,
	timeline: 'friends'
	})
	} else if (message.event === 'pleroma:chat_update') {
	dispatch('addChatMessages', {
	chatId: message.chatUpdate.id,
	messages: [message.chatUpdate.lastMessage]
	})
	dispatch('updateChat', { chat: message.chatUpdate })
	maybeShowChatNotification(store, message.chatUpdate)
	}
	}
	)
	state.mastoUserSocket.addEventListener('open', () => {
	commit('setMastoUserSocketStatus', WSConnectionStatus.JOINED)
	})
	state.mastoUserSocket.addEventListener('error', ({ detail: error }) => {
	console.error('Error in MastoAPI websocket:', error)
	commit('setMastoUserSocketStatus', WSConnectionStatus.ERROR)
	dispatch('clearOpenedChats')
	})
	state.mastoUserSocket.addEventListener('close', ({ detail: closeEvent }) => {
	const ignoreCodes = new Set([
	1000, // Normal (intended) closure
	1001 // Going away
	])
	const { code } = closeEvent
	if (ignoreCodes.has(code)) {
	console.debug(`Not restarting socket becasue of closure code ${code} is in ignore list`)
	} else {
	console.warn(`MastoAPI websocket disconnected, restarting. CloseEvent code: ${code}`)
	dispatch('startFetchingTimeline', { timeline: 'friends' })
	dispatch('startFetchingNotifications')
	dispatch('startFetchingChats')
	dispatch('restartMastoUserSocket')
	}
	commit('setMastoUserSocketStatus', WSConnectionStatus.CLOSED)
	dispatch('clearOpenedChats')
	})
	resolve()
	} catch (e) {
	reject(e)
	}
	})
	},
	restartMastoUserSocket ({ dispatch }) {
	// This basically starts MastoAPI user socket and stops conventional
	// fetchers when connection reestablished
	return dispatch('startMastoUserSocket').then(() => {
	dispatch('stopFetchingTimeline', { timeline: 'friends' })
	dispatch('stopFetchingNotifications')
	dispatch('stopFetchingChats')
	})
	},
	stopMastoUserSocket ({ state, dispatch }) {
	dispatch('startFetchingTimeline', { timeline: 'friends' })
	dispatch('startFetchingNotifications')
	dispatch('startFetchingChats')
	state.mastoUserSocket.close()
	},

	// Timelines
	startFetchingTimeline (store, {
	timeline = 'friends',
	tag = false,
	userId = false
	}) {
	if (store.state.fetchers[timeline]) return

	const fetcher = store.state.backendInteractor.startFetchingTimeline({
	timeline, store, userId, tag
	})
	store.commit('addFetcher', { fetcherName: timeline, fetcher })
	},
	stopFetchingTimeline (store, timeline) {
	const fetcher = store.state.fetchers[timeline]
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: timeline, fetcher })
	},

	// Notifications
	startFetchingNotifications (store) {
	if (store.state.fetchers.notifications) return
	const fetcher = store.state.backendInteractor.startFetchingNotifications({ store })
	store.commit('addFetcher', { fetcherName: 'notifications', fetcher })
	},
	stopFetchingNotifications (store) {
	const fetcher = store.state.fetchers.notifications
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: 'notifications', fetcher })
	},

	// Follow requests
	startFetchingFollowRequests (store) {
	if (store.state.fetchers['followRequests']) return
	const fetcher = store.state.backendInteractor.startFetchingFollowRequests({ store })

	store.commit('addFetcher', { fetcherName: 'followRequests', fetcher })
	},
	stopFetchingFollowRequests (store) {
	const fetcher = store.state.fetchers.followRequests
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: 'followRequests', fetcher })
	},
	removeFollowRequest (store, request) {
	let requests = store.state.followRequests.filter((it) => it !== request)
	store.commit('setFollowRequests', requests)
	},

	// Pleroma websocket
	setWsToken (store, token) {
	store.commit('setWsToken', token)
	},
	initializeSocket ({ dispatch, commit, state, rootState }) {
	// Set up websocket connection
	const token = state.wsToken
	if (rootState.instance.chatAvailable && typeof token !== 'undefined' && state.socket === null) {
	const socket = new Socket('/socket', { params: { token } })
	socket.connect()

	commit('setSocket', socket)
	dispatch('initializeChat', socket)
	}
	},
	disconnectFromSocket ({ commit, state }) {
	state.socket && state.socket.disconnect()
	commit('setSocket', null)
	}
	}
	}

	export default api
	diff --git a/src/modules/chats.js b/src/modules/chats.js
	index c760901809..21e30933cb 100644
	--- a/src/modules/chats.js
	+++ b/src/modules/chats.js
	@@ -1,234 +1,220 @@
	import Vue from 'vue'
	import { find, omitBy, orderBy, sumBy } from 'lodash'
	import chatService from '../services/chat_service/chat_service.js'
	import { parseChat, parseChatMessage } from '../services/entity_normalizer/entity_normalizer.service.js'
	import { maybeShowChatNotification } from '../services/chat_utils/chat_utils.js'
	+import { promiseInterval } from '../services/promise_interval/promise_interval.js'

	const emptyChatList = () => ({
	data: [],
	idStore: {}
	})

	const defaultState = {
	chatList: emptyChatList(),
	chatListFetcher: null,
	openedChats: {},
	openedChatMessageServices: {},
	fetcher: undefined,
	currentChatId: null
	}

	const getChatById = (state, id) => {
	return find(state.chatList.data, { id })
	}

	const sortedChatList = (state) => {
	return orderBy(state.chatList.data, ['updated_at'], ['desc'])
	}

	const unreadChatCount = (state) => {
	return sumBy(state.chatList.data, 'unread')
	}

	const chats = {
	state: { ...defaultState },
	getters: {
	currentChat: state => state.openedChats[state.currentChatId],
	currentChatMessageService: state => state.openedChatMessageServices[state.currentChatId],
	findOpenedChatByRecipientId: state => recipientId => find(state.openedChats, c => c.account.id === recipientId),
	sortedChatList,
	unreadChatCount
	},
	actions: {
	// Chat list
	startFetchingChats ({ dispatch, commit }) {
	- const fetcher = () => {
	- dispatch('fetchChats', { latest: true })
	- }
	+ const fetcher = () => dispatch('fetchChats', { latest: true })
	fetcher()
	commit('setChatListFetcher', {
	- fetcher: () => setInterval(() => { fetcher() }, 5000)
	+ fetcher: () => promiseInterval(fetcher, 5000)
	})
	},
	stopFetchingChats ({ commit }) {
	commit('setChatListFetcher', { fetcher: undefined })
	},
	fetchChats ({ dispatch, rootState, commit }, params = {}) {
	return rootState.api.backendInteractor.chats()
	.then(({ chats }) => {
	dispatch('addNewChats', { chats })
	return chats
	})
	},
	addNewChats (store, { chats }) {
	const { commit, dispatch, rootGetters } = store
	const newChatMessageSideEffects = (chat) => {
	maybeShowChatNotification(store, chat)
	}
	commit('addNewChats', { dispatch, chats, rootGetters, newChatMessageSideEffects })
	},
	updateChat ({ commit }, { chat }) {
	commit('updateChat', { chat })
	},

	// Opened Chats
	startFetchingCurrentChat ({ commit, dispatch }, { fetcher }) {
	dispatch('setCurrentChatFetcher', { fetcher })
	},
	setCurrentChatFetcher ({ rootState, commit }, { fetcher }) {
	commit('setCurrentChatFetcher', { fetcher })
	},
	addOpenedChat ({ rootState, commit, dispatch }, { chat }) {
	commit('addOpenedChat', { dispatch, chat: parseChat(chat) })
	dispatch('addNewUsers', [chat.account])
	},
	addChatMessages ({ commit }, value) {
	commit('addChatMessages', { commit, ...value })
	},
	resetChatNewMessageCount ({ commit }, value) {
	commit('resetChatNewMessageCount', value)
	},
	clearCurrentChat ({ rootState, commit, dispatch }, value) {
	commit('setCurrentChatId', { chatId: undefined })
	commit('setCurrentChatFetcher', { fetcher: undefined })
	},
	readChat ({ rootState, commit, dispatch }, { id, lastReadId }) {
	dispatch('resetChatNewMessageCount')
	commit('readChat', { id })
	rootState.api.backendInteractor.readChat({ id, lastReadId })
	},
	deleteChatMessage ({ rootState, commit }, value) {
	rootState.api.backendInteractor.deleteChatMessage(value)
	commit('deleteChatMessage', { commit, ...value })
	},
	resetChats ({ commit, dispatch }) {
	dispatch('clearCurrentChat')
	commit('resetChats', { commit })
	},
	clearOpenedChats ({ rootState, commit, dispatch, rootGetters }) {
	commit('clearOpenedChats', { commit })
	}
	},
	mutations: {
	setChatListFetcher (state, { commit, fetcher }) {
	const prevFetcher = state.chatListFetcher
	if (prevFetcher) {
	- clearInterval(prevFetcher)
	+ prevFetcher.stop()
	}
	state.chatListFetcher = fetcher && fetcher()
	},
	setCurrentChatFetcher (state, { fetcher }) {
	const prevFetcher = state.fetcher
	if (prevFetcher) {
	- clearInterval(prevFetcher)
	+ prevFetcher.stop()
	}
	state.fetcher = fetcher && fetcher()
	},
	addOpenedChat (state, { _dispatch, chat }) {
	state.currentChatId = chat.id
	Vue.set(state.openedChats, chat.id, chat)

	if (!state.openedChatMessageServices[chat.id]) {
	Vue.set(state.openedChatMessageServices, chat.id, chatService.empty(chat.id))
	}
	},
	setCurrentChatId (state, { chatId }) {
	state.currentChatId = chatId
	},
	addNewChats (state, { chats, newChatMessageSideEffects }) {
	chats.forEach((updatedChat) => {
	const chat = getChatById(state, updatedChat.id)

	if (chat) {
	const isNewMessage = (chat.lastMessage && chat.lastMessage.id) !== (updatedChat.lastMessage && updatedChat.lastMessage.id)
	chat.lastMessage = updatedChat.lastMessage
	chat.unread = updatedChat.unread
	+ chat.updated_at = updatedChat.updated_at
	if (isNewMessage && chat.unread) {
	newChatMessageSideEffects(updatedChat)
	}
	} else {
	state.chatList.data.push(updatedChat)
	Vue.set(state.chatList.idStore, updatedChat.id, updatedChat)
	}
	})
	},
	updateChat (state, { _dispatch, chat: updatedChat, _rootGetters }) {
	const chat = getChatById(state, updatedChat.id)
	if (chat) {
	chat.lastMessage = updatedChat.lastMessage
	chat.unread = updatedChat.unread
	chat.updated_at = updatedChat.updated_at
	}
	if (!chat) { state.chatList.data.unshift(updatedChat) }
	Vue.set(state.chatList.idStore, updatedChat.id, updatedChat)
	},
	deleteChat (state, { _dispatch, id, _rootGetters }) {
	state.chats.data = state.chats.data.filter(conversation =>
	conversation.last_status.id !== id
	)
	state.chats.idStore = omitBy(state.chats.idStore, conversation => conversation.last_status.id === id)
	},
	resetChats (state, { commit }) {
	state.chatList = emptyChatList()
	state.currentChatId = null
	commit('setChatListFetcher', { fetcher: undefined })
	for (const chatId in state.openedChats) {
	chatService.clear(state.openedChatMessageServices[chatId])
	Vue.delete(state.openedChats, chatId)
	Vue.delete(state.openedChatMessageServices, chatId)
	}
	},
	setChatsLoading (state, { value }) {
	state.chats.loading = value
	},
	- addChatMessages (state, { commit, chatId, messages }) {
	- const chatMessageService = state.openedChatMessageServices[chatId]
	- if (chatMessageService) {
	- chatService.add(chatMessageService, { messages: messages.map(parseChatMessage) })
	- commit('refreshLastMessage', { chatId })
	- }
	- },
	- refreshLastMessage (state, { chatId }) {
	+ addChatMessages (state, { chatId, messages, updateMaxId }) {
	const chatMessageService = state.openedChatMessageServices[chatId]
	if (chatMessageService) {
	- const chat = getChatById(state, chatId)
	- if (chat) {
	- chat.lastMessage = chatMessageService.lastMessage
	- if (chatMessageService.lastMessage) {
	- chat.updated_at = chatMessageService.lastMessage.created_at
	- }
	- }
	+ chatService.add(chatMessageService, { messages: messages.map(parseChatMessage), updateMaxId })
	}
	},
	- deleteChatMessage (state, { commit, chatId, messageId }) {
	+ deleteChatMessage (state, { chatId, messageId }) {
	const chatMessageService = state.openedChatMessageServices[chatId]
	if (chatMessageService) {
	chatService.deleteMessage(chatMessageService, messageId)
	- commit('refreshLastMessage', { chatId })
	}
	},
	resetChatNewMessageCount (state, _value) {
	const chatMessageService = state.openedChatMessageServices[state.currentChatId]
	chatService.resetNewMessageCount(chatMessageService)
	},
	// Used when a connection loss occurs
	clearOpenedChats (state) {
	const currentChatId = state.currentChatId
	for (const chatId in state.openedChats) {
	if (currentChatId !== chatId) {
	chatService.clear(state.openedChatMessageServices[chatId])
	Vue.delete(state.openedChats, chatId)
	Vue.delete(state.openedChatMessageServices, chatId)
	}
	}
	},
	readChat (state, { id }) {
	const chat = getChatById(state, id)
	if (chat) {
	chat.unread = 0
	}
	}
	}
	}

	export default chats
	diff --git a/src/modules/config.js b/src/modules/config.js
	index 294a5ed08b..54bccaa549 100644
	--- a/src/modules/config.js
	+++ b/src/modules/config.js
	@@ -1,128 +1,129 @@
	import { set, delete as del } from 'vue'
	import { setPreset, applyTheme } from '../services/style_setter/style_setter.js'
	import messages from '../i18n/messages'

	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'
	]

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

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

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

	export default config
	diff --git a/src/modules/instance.js b/src/modules/instance.js
	index 3fe3bbf3c0..b3cbffc6c1 100644
	--- a/src/modules/instance.js
	+++ b/src/modules/instance.js
	@@ -1,209 +1,210 @@
	import { set } from 'vue'
	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'

	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,
	disableChat: false,
	greentext: false,
	hideFilteredStatuses: false,
	hideMutedPosts: false,
	hidePostStats: false,
	hideSitename: false,
	hideUserStats: false,
	loginMethod: 'password',
	logo: '/static/logo.png',
	logoMargin: '.2em',
	logoMask: true,
	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,

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

	// Feature-set, apparently, not everything here is reported...
	chatAvailable: 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 instance = {
	state: defaultState,
	mutations: {
	setInstanceOption (state, { name, value }) {
	if (typeof value !== 'undefined') {
	set(state, name, value)
	}
	},
	setKnownDomains (state, domains) {
	state.knownDomains = domains
	}
	},
	getters: {
	instanceDefaultConfig (state) {
	return instanceDefaultProperties
	.map(key => [key, state[key]])
	.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
	}
	},
	actions: {
	setInstanceOption ({ commit, dispatch }, { name, value }) {
	commit('setInstanceOption', { name, value })
	switch (name) {
	case 'name':
	dispatch('setPageTitle')
	break
	case 'chatAvailable':
	if (value) {
	dispatch('initializeSocket')
	}
	break
	case 'theme':
	dispatch('setTheme', value)
	break
	}
	},
	async getStaticEmoji ({ commit }) {
	try {
	const res = await window.fetch('/static/emoji.json')
	if (res.ok) {
	const values = await res.json()
	const emoji = Object.keys(values).map((key) => {
	return {
	displayText: key,
	imageUrl: false,
	replacement: values[key]
	}
	}).sort((a, b) => a.displayText - b.displayText)
	commit('setInstanceOption', { name: 'emoji', value: emoji })
	} else {
	throw (res)
	}
	} catch (e) {
	console.warn("Can't load static emoji")
	console.warn(e)
	}
	},

	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 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((a, b) => a.displayText.toLowerCase() > b.displayText.toLowerCase() ? 1 : 0)
	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/statuses.js b/src/modules/statuses.js
	index 8b9dc1ad4b..a2b7afb81d 100644
	--- a/src/modules/statuses.js
	+++ b/src/modules/statuses.js
	@@ -1,769 +1,775 @@
	import {
	remove,
	slice,
	each,
	findIndex,
	find,
	maxBy,
	minBy,
	merge,
	first,
	last,
	isArray,
	omitBy
	} from 'lodash'
	import { set } from 'vue'
	import { isStatusNotification, maybeShowNotification } from '../services/notification_utils/notification_utils.js'
	import apiService from '../services/api/api.service.js'

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

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

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

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

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

	return status
	}

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

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

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

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

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

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

	// TODO: Need to remove from allStatusesObject?

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

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

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

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

	// Mismatch between API pagination and our internal minId/maxId tracking systems:
	// pagination.maxId is the oldest of the returned statuses when fetching older,
	// and pagination.minId is the newest when fetching newer. The names come directly
	// from the arguments they're supposed to be passed as for the next fetch.
	const minNew = pagination.maxId \|\| (statuses.length > 0 ? minBy(statuses, 'id').id : 0)
	const maxNew = pagination.minId \|\| (statuses.length > 0 ? maxBy(statuses, 'id').id : 0)

	const newer = timeline && (maxNew > timelineObject.maxId \|\| timelineObject.maxId === 0) && statuses.length > 0
	const older = timeline && (minNew < timelineObject.minId \|\| timelineObject.minId === 0) && statuses.length > 0

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

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

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

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

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

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

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

	sortTimeline(dms)
	}
	}

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

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

	return status
	}

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

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

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

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

	removeStatusFromGlobalStorage(state, status)

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

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

	// Keep the visible statuses sorted
	if (timeline && !(timeline === 'bookmarks')) {
	sortTimeline(timelineObject)
	}
	}

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

	if (notification.type === 'pleroma:emoji_reaction') {
	dispatch('fetchEmojiReactionsBy', notification.status.id)
	}

	// Only add a new notification if we don't have one for the same action
	if (!state.notifications.idStore.hasOwnProperty(notification.id)) {
	state.notifications.maxId = notification.id > state.notifications.maxId
	? notification.id
	: state.notifications.maxId
	state.notifications.minId = notification.id < state.notifications.minId
	? notification.id
	: state.notifications.minId

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

	newNotificationSideEffects(notification)
	} else if (notification.seen) {
	state.notifications.idStore[notification.id].seen = true
	}
	})
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

	const statuses = {
	state: defaultState(),
	actions: {
	addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false, userId, pagination }) {
	commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser, userId, pagination })
	},
	addNewNotifications (store, { notifications, older }) {
	const { commit, dispatch, rootGetters } = store

	const newNotificationSideEffects = (notification) => {
	maybeShowNotification(store, notification)
	}
	commit('addNewNotifications', { dispatch, notifications, older, rootGetters, newNotificationSideEffects })
	},
	setError ({ rootState, commit }, { value }) {
	commit('setError', { value })
	},
	setErrorData ({ rootState, commit }, { value }) {
	commit('setErrorData', { value })
	},
	setNotificationsLoading ({ rootState, commit }, { value }) {
	commit('setNotificationsLoading', { value })
	},
	setNotificationsError ({ rootState, commit }, { value }) {
	commit('setNotificationsError', { value })
	},
	setNotificationsSilence ({ rootState, commit }, { value }) {
	commit('setNotificationsSilence', { value })
	},
	fetchStatus ({ rootState, dispatch }, id) {
	return rootState.api.backendInteractor.fetchStatus({ id })
	.then((status) => dispatch('addNewStatuses', { statuses: [status] }))
	},
	deleteStatus ({ rootState, commit }, status) {
	commit('setDeleted', { status })
	apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })
	},
	markStatusesAsDeleted ({ commit }, condition) {
	commit('setManyDeleted', condition)
	},
	favorite ({ rootState, commit }, status) {
	// Optimistic favoriting...
	commit('setFavorited', { status, value: true })
	rootState.api.backendInteractor.favorite({ id: status.id })
	.then(status => commit('setFavoritedConfirm', { status, user: rootState.users.currentUser }))
	},
	unfavorite ({ rootState, commit }, status) {
	// Optimistic unfavoriting...
	commit('setFavorited', { status, value: false })
	rootState.api.backendInteractor.unfavorite({ id: status.id })
	.then(status => commit('setFavoritedConfirm', { status, user: rootState.users.currentUser }))
	},
	fetchPinnedStatuses ({ rootState, dispatch }, userId) {
	rootState.api.backendInteractor.fetchPinnedStatuses({ id: userId })
	.then(statuses => dispatch('addNewStatuses', { statuses, timeline: 'user', userId, showImmediately: true, noIdUpdate: true }))
	},
	pinStatus ({ rootState, dispatch }, statusId) {
	return rootState.api.backendInteractor.pinOwnStatus({ id: statusId })
	.then((status) => dispatch('addNewStatuses', { statuses: [status] }))
	},
	unpinStatus ({ rootState, dispatch }, statusId) {
	rootState.api.backendInteractor.unpinOwnStatus({ id: statusId })
	.then((status) => dispatch('addNewStatuses', { statuses: [status] }))
	},
	muteConversation ({ rootState, commit }, statusId) {
	return rootState.api.backendInteractor.muteConversation({ id: statusId })
	.then((status) => commit('setMutedStatus', status))
	},
	unmuteConversation ({ rootState, commit }, statusId) {
	return rootState.api.backendInteractor.unmuteConversation({ id: statusId })
	.then((status) => commit('setMutedStatus', status))
	},
	retweet ({ rootState, commit }, status) {
	// Optimistic retweeting...
	commit('setRetweeted', { status, value: true })
	rootState.api.backendInteractor.retweet({ id: status.id })
	.then(status => commit('setRetweetedConfirm', { status: status.retweeted_status, user: rootState.users.currentUser }))
	},
	unretweet ({ rootState, commit }, status) {
	// Optimistic unretweeting...
	commit('setRetweeted', { status, value: false })
	rootState.api.backendInteractor.unretweet({ id: status.id })
	.then(status => commit('setRetweetedConfirm', { status, user: rootState.users.currentUser }))
	},
	bookmark ({ rootState, commit }, status) {
	commit('setBookmarked', { status, value: true })
	rootState.api.backendInteractor.bookmarkStatus({ id: status.id })
	.then(status => {
	commit('setBookmarkedConfirm', { status })
	})
	},
	unbookmark ({ rootState, commit }, status) {
	commit('setBookmarked', { status, value: false })
	rootState.api.backendInteractor.unbookmarkStatus({ id: status.id })
	.then(status => {
	commit('setBookmarkedConfirm', { status })
	})
	},
	queueFlush ({ rootState, commit }, { timeline, id }) {
	commit('queueFlush', { timeline, id })
	},
	queueFlushAll ({ rootState, commit }) {
	commit('queueFlushAll')
	},
	markNotificationsAsSeen ({ rootState, commit }) {
	commit('markNotificationsAsSeen')
	apiService.markNotificationsAsSeen({
	id: rootState.statuses.notifications.maxId,
	credentials: rootState.users.currentUser.credentials
	})
	},
	markSingleNotificationAsSeen ({ rootState, commit }, { id }) {
	commit('markSingleNotificationAsSeen', { id })
	apiService.markNotificationsAsSeen({
	single: true,
	id,
	credentials: rootState.users.currentUser.credentials
	})
	},
	dismissNotificationLocal ({ rootState, commit }, { id }) {
	commit('dismissNotification', { id })
	},
	dismissNotification ({ rootState, commit }, { id }) {
	commit('dismissNotification', { id })
	rootState.api.backendInteractor.dismissNotification({ id })
	},
	markMultipleNotificationsAsSeen ({ rootState, commit }, { finder }) {
	const notifications = rootState.statuses.notifications.data.filter(finder)

	notifications.forEach(n => {
	commit('markSingleNotificationAsSeen', { id: n.id })
	rootState.api.backendInteractor.markNotificationsAsSeen({ id: n.id, single: true })
	})
	},
	updateNotification ({ rootState, commit }, { id, updater }) {
	commit('updateNotification', { id, updater })
	},
	fetchFavsAndRepeats ({ rootState, commit }, id) {
	Promise.all([
	rootState.api.backendInteractor.fetchFavoritedByUsers({ id }),
	rootState.api.backendInteractor.fetchRebloggedByUsers({ id })
	]).then(([favoritedByUsers, rebloggedByUsers]) => {
	commit('addFavs', { id, favoritedByUsers, currentUser: rootState.users.currentUser })
	commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser })
	})
	},
	reactWithEmoji ({ rootState, dispatch, commit }, { id, emoji }) {
	const currentUser = rootState.users.currentUser
	if (!currentUser) return

	commit('addOwnReaction', { id, emoji, currentUser })
	rootState.api.backendInteractor.reactWithEmoji({ id, emoji }).then(
	ok => {
	dispatch('fetchEmojiReactionsBy', id)
	}
	)
	},
	unreactWithEmoji ({ rootState, dispatch, commit }, { id, emoji }) {
	const currentUser = rootState.users.currentUser
	if (!currentUser) return

	commit('removeOwnReaction', { id, emoji, currentUser })
	rootState.api.backendInteractor.unreactWithEmoji({ id, emoji }).then(
	ok => {
	dispatch('fetchEmojiReactionsBy', id)
	}
	)
	},
	fetchEmojiReactionsBy ({ rootState, commit }, id) {
	rootState.api.backendInteractor.fetchEmojiReactions({ id }).then(
	emojiReactions => {
	commit('addEmojiReactionsBy', { id, emojiReactions, currentUser: rootState.users.currentUser })
	}
	)
	},
	fetchFavs ({ rootState, commit }, id) {
	rootState.api.backendInteractor.fetchFavoritedByUsers({ id })
	.then(favoritedByUsers => commit('addFavs', { id, favoritedByUsers, currentUser: rootState.users.currentUser }))
	},
	fetchRepeats ({ rootState, commit }, id) {
	rootState.api.backendInteractor.fetchRebloggedByUsers({ id })
	.then(rebloggedByUsers => commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser }))
	},
	search (store, { q, resolve, limit, offset, following }) {
	return store.rootState.api.backendInteractor.search2({ q, resolve, limit, offset, following })
	.then((data) => {
	store.commit('addNewUsers', data.accounts)
	store.commit('addNewStatuses', { statuses: data.statuses })
	return data
	})
	+ },
	+ setVirtualHeight ({ commit }, { statusId, height }) {
	+ commit('setVirtualHeight', { statusId, height })
	}
	},
	mutations
	}

	export default statuses
	diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
	index da51900123..1a3495d41b 100644
	--- a/src/services/api/api.service.js
	+++ b/src/services/api/api.service.js
	@@ -1,1322 +1,1337 @@
	import { each, map, concat, last, get } from 'lodash'
	import { parseStatus, 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 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_USER_URL = '/api/v1/accounts'
	const MASTODON_USER_RELATIONSHIPS_URL = '/api/v1/accounts/relationships'
	const MASTODON_USER_TIMELINE_URL = id => `/api/v1/accounts/${id}/statuses`
	const MASTODON_TAG_TIMELINE_URL = tag => `/api/v1/timelines/tag/${tag}`
	const MASTODON_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_SUBSCRIBE_USER = id => `/api/v1/pleroma/accounts/${id}/subscribe`
	const MASTODON_UNSUBSCRIBE_USER = id => `/api/v1/pleroma/accounts/${id}/unsubscribe`
	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_STREAMING = '/api/v1/streaming'
	const MASTODON_KNOWN_DOMAIN_LIST_URL = '/api/v1/instance/peers'
	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 oldfetch = window.fetch

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

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

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

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

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

	const updateProfileImages = ({ credentials, avatar = null, banner = null, background = null }) => {
	const form = new FormData()
	if (avatar !== null) 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) => parseUser(data))
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	const fetchFriends = ({ id, maxId, sinceId, limit = 20, credentials }) => {
	let url = MASTODON_FOLLOWING_URL(id)
	const args = [
	maxId && `max_id=${maxId}`,
	sinceId && `since_id=${sinceId}`,
	limit && `limit=${limit}`,
	`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 }) => {
	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 fetchConversation = ({ id, credentials }) => {
	let urlContext = MASTODON_STATUS_CONTEXT_URL(id)
	return fetch(urlContext, { headers: authHeaders(credentials) })
	.then((data) => {
	if (data.ok) {
	return data
	}
	throw new Error('Error fetching timeline', data)
	})
	.then((data) => data.json())
	.then(({ ancestors, descendants }) => ({
	ancestors: ancestors.map(parseStatus),
	descendants: descendants.map(parseStatus)
	}))
	}

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

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

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

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

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

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

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

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

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

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

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

	let url = timelineUrls[timeline]

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

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

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

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

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

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

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

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

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

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

	const 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')
	}

	let 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 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 changePassword = ({ credentials, password, newPassword, newPasswordConfirmation }) => {
	const form = new FormData()

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

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

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

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

	form.append('password', password)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	const markNotificationsAsSeen = ({ id, credentials, 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: 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 }) => {
	let url = MASTODON_SEARCH_2
	let params = []

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

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

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

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

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

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

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

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

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

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

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

	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 === '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
	})

	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, credentials }) => {
	const payload = {
	'content': content
	}

	if (mediaId) {
	payload['media_id'] = mediaId
	}

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

	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 apiService = {
	verifyCredentials,
	fetchTimeline,
	fetchPinnedStatuses,
	fetchConversation,
	fetchStatus,
	fetchFriends,
	exportFriends,
	fetchFollowers,
	followUser,
	unfollowUser,
	pinOwnStatus,
	unpinOwnStatus,
	muteConversation,
	unmuteConversation,
	blockUser,
	unblockUser,
	fetchUser,
	fetchUserRelationship,
	favorite,
	unfavorite,
	retweet,
	unretweet,
	bookmarkStatus,
	unbookmarkStatus,
	postStatus,
	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,
	changePassword,
	settingsMFA,
	mfaDisableOTP,
	generateMfaBackupCodes,
	mfaSetupOTP,
	mfaConfirmOTP,
	fetchFollowRequests,
	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
	}

	export default apiService
	diff --git a/src/services/chat_service/chat_service.js b/src/services/chat_service/chat_service.js
	index b60a889bd0..95c6948235 100644
	--- a/src/services/chat_service/chat_service.js
	+++ b/src/services/chat_service/chat_service.js
	@@ -1,151 +1,154 @@
	import _ from 'lodash'

	const empty = (chatId) => {
	return {
	idIndex: {},
	messages: [],
	newMessageCount: 0,
	lastSeenTimestamp: 0,
	chatId: chatId,
	minId: undefined,
	- lastMessage: undefined
	+ maxId: undefined
	}
	}

	const clear = (storage) => {
	storage.idIndex = {}
	storage.messages.splice(0, storage.messages.length)
	storage.newMessageCount = 0
	storage.lastSeenTimestamp = 0
	storage.minId = undefined
	- storage.lastMessage = undefined
	+ storage.maxId = undefined
	}

	const deleteMessage = (storage, messageId) => {
	if (!storage) { return }
	storage.messages = storage.messages.filter(m => m.id !== messageId)
	delete storage.idIndex[messageId]

	- if (storage.lastMessage && (storage.lastMessage.id === messageId)) {
	- storage.lastMessage = _.maxBy(storage.messages, 'id')
	+ if (storage.maxId === messageId) {
	+ const lastMessage = _.maxBy(storage.messages, 'id')
	+ storage.maxId = lastMessage.id
	}

	if (storage.minId === messageId) {
	const firstMessage = _.minBy(storage.messages, 'id')
	storage.minId = firstMessage.id
	}
	}

	-const add = (storage, { messages: newMessages }) => {
	+const add = (storage, { messages: newMessages, updateMaxId = true }) => {
	if (!storage) { return }
	for (let i = 0; i < newMessages.length; i++) {
	const message = newMessages[i]

	// sanity check
	if (message.chat_id !== storage.chatId) { return }

	if (!storage.minId \|\| message.id < storage.minId) {
	storage.minId = message.id
	}

	- if (!storage.lastMessage \|\| message.id > storage.lastMessage.id) {
	- storage.lastMessage = message
	+ if (!storage.maxId \|\| message.id > storage.maxId) {
	+ if (updateMaxId) {
	+ storage.maxId = message.id
	+ }
	}

	if (!storage.idIndex[message.id]) {
	if (storage.lastSeenTimestamp < message.created_at) {
	storage.newMessageCount++
	}
	storage.messages.push(message)
	storage.idIndex[message.id] = message
	}
	}
	}

	const resetNewMessageCount = (storage) => {
	if (!storage) { return }
	storage.newMessageCount = 0
	storage.lastSeenTimestamp = new Date()
	}

	// Inserts date separators and marks the head and tail if it's the chain of messages made by the same user
	const getView = (storage) => {
	if (!storage) { return [] }

	const result = []
	const messages = _.sortBy(storage.messages, ['id', 'desc'])
	const firstMessage = messages[0]
	let previousMessage = messages[messages.length - 1]
	let currentMessageChainId

	if (firstMessage) {
	const date = new Date(firstMessage.created_at)
	date.setHours(0, 0, 0, 0)
	result.push({
	type: 'date',
	date,
	id: date.getTime().toString()
	})
	}

	let afterDate = false

	for (let i = 0; i < messages.length; i++) {
	const message = messages[i]
	const nextMessage = messages[i + 1]

	const date = new Date(message.created_at)
	date.setHours(0, 0, 0, 0)

	// insert date separator and start a new message chain
	if (previousMessage && previousMessage.date < date) {
	result.push({
	type: 'date',
	date,
	id: date.getTime().toString()
	})

	previousMessage['isTail'] = true
	currentMessageChainId = undefined
	afterDate = true
	}

	const object = {
	type: 'message',
	data: message,
	date,
	id: message.id,
	messageChainId: currentMessageChainId
	}

	// end a message chian
	if ((nextMessage && nextMessage.account_id) !== message.account_id) {
	object['isTail'] = true
	currentMessageChainId = undefined
	}

	// start a new message chain
	if ((previousMessage && previousMessage.data && previousMessage.data.account_id) !== message.account_id \|\| afterDate) {
	currentMessageChainId = _.uniqueId()
	object['isHead'] = true
	object['messageChainId'] = currentMessageChainId
	}

	result.push(object)
	previousMessage = object
	afterDate = false
	}

	return result
	}

	const ChatService = {
	add,
	empty,
	getView,
	deleteMessage,
	resetNewMessageCount,
	clear
	}

	export default ChatService
	diff --git a/src/services/follow_request_fetcher/follow_request_fetcher.service.js b/src/services/follow_request_fetcher/follow_request_fetcher.service.js
	index 93fac9bc0b..74af40815e 100644
	--- a/src/services/follow_request_fetcher/follow_request_fetcher.service.js
	+++ b/src/services/follow_request_fetcher/follow_request_fetcher.service.js
	@@ -1,22 +1,23 @@
	import apiService from '../api/api.service.js'
	+import { promiseInterval } from '../promise_interval/promise_interval.js'

	const fetchAndUpdate = ({ store, credentials }) => {
	return apiService.fetchFollowRequests({ credentials })
	.then((requests) => {
	store.commit('setFollowRequests', requests)
	store.commit('addNewUsers', requests)
	}, () => {})
	.catch(() => {})
	}

	const startFetching = ({ credentials, store }) => {
	- fetchAndUpdate({ credentials, store })
	const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
	- return setInterval(boundFetchAndUpdate, 10000)
	+ boundFetchAndUpdate()
	+ return promiseInterval(boundFetchAndUpdate, 10000)
	}

	const followRequestFetcher = {
	startFetching
	}

	export default followRequestFetcher
	diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
	index 80be02caef..c908b6443b 100644
	--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
	+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
	@@ -1,70 +1,72 @@
	import apiService from '../api/api.service.js'
	+import { promiseInterval } from '../promise_interval/promise_interval.js'

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

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

	args['withMuted'] = !hideMutedPosts

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

	// If there's any unread notifications, try fetch notifications since
	// the newest read notification to check if any of the unread notifs
	// have changed their 'seen' state (marked as read in another session), so
	// we can update the state in this session to mark them as read as well.
	// The normal maxId-check does not tell if older notifications have changed
	const notifications = timelineData.data
	const readNotifsIds = notifications.filter(n => n.seen).map(n => n.id)
	const numUnseenNotifs = notifications.length - readNotifsIds.length
	if (numUnseenNotifs > 0 && readNotifsIds.length > 0) {
	args['since'] = Math.max(...readNotifsIds)
	fetchNotifications({ store, args, older })
	}
	+
	return result
	}
	}

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

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

	const notificationsFetcher = {
	fetchAndUpdate,
	startFetching
	}

	export default notificationsFetcher
	diff --git a/src/services/promise_interval/promise_interval.js b/src/services/promise_interval/promise_interval.js
	new file mode 100644
	index 0000000000..cf17970d8b
	--- /dev/null
	+++ b/src/services/promise_interval/promise_interval.js
	@@ -0,0 +1,27 @@
	+
	+// promiseInterval - replacement for setInterval for promises, starts counting
	+// the interval only after a promise is done instead of immediately.
	+// - promiseCall is a function that returns a promise, it's called the first
	+// time after the first interval.
	+// - interval is the interval delay in ms.
	+
	+export const promiseInterval = (promiseCall, interval) => {
	+ let stopped = false
	+ let timeout = null
	+
	+ const func = () => {
	+ promiseCall().finally(() => {
	+ if (stopped) return
	+ timeout = window.setTimeout(func, interval)
	+ })
	+ }
	+
	+ const stopFetcher = () => {
	+ stopped = true
	+ window.clearTimeout(timeout)
	+ }
	+
	+ timeout = window.setTimeout(func, interval)
	+
	+ return { stop: stopFetcher }
	+}
	diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
	index d0cddf849c..72ea4890ae 100644
	--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
	+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
	@@ -1,82 +1,84 @@
	import { camelCase } from 'lodash'

	import apiService from '../api/api.service.js'
	+import { promiseInterval } from '../promise_interval/promise_interval.js'

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

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

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

	const fetchAndUpdate = ({
	store,
	credentials,
	timeline = 'friends',
	older = false,
	showImmediately = false,
	userId = false,
	tag = false,
	until
	}) => {
	const args = { timeline, credentials }
	const rootState = store.rootState \|\| store.state
	const { getters } = store
	const timelineData = rootState.statuses.timelines[camelCase(timeline)]
	const { hideMutedPosts, replyVisibility } = getters.mergedConfig
	const loggedIn = !!rootState.users.currentUser

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

	args['userId'] = userId
	args['tag'] = tag
	args['withMuted'] = !hideMutedPosts
	if (loggedIn && ['friends', 'public', 'publicAndExternal'].includes(timeline)) {
	args['replyVisibility'] = replyVisibility
	}

	const numStatusesBeforeFetch = timelineData.statuses.length

	return apiService.fetchTimeline(args)
	.then(response => {
	if (response.error) {
	store.dispatch('setErrorData', { value: response })
	return
	}

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

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

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

	const message1 = {
	id: '9wLkdcmQXD21Oy8lEX',
	created_at: (new Date('2020-06-22T18:45:53.000Z'))
	}

	const message2 = {
	id: '9wLkdp6ihaOVdNj8Wu',
	account_id: '9vmRb29zLQReckr5ay',
	created_at: (new Date('2020-06-22T18:45:56.000Z'))
	}

	const message3 = {
	id: '9wLke9zL4Dy4OZR2RM',
	account_id: '9vmRb29zLQReckr5ay',
	created_at: (new Date('2020-07-22T18:45:59.000Z'))
	}

	describe('chatService', () => {
	describe('.add', () => {
	it("Doesn't add duplicates", () => {
	const chat = chatService.empty()
	chatService.add(chat, { messages: [ message1 ] })
	chatService.add(chat, { messages: [ message1 ] })
	expect(chat.messages.length).to.eql(1)

	chatService.add(chat, { messages: [ message2 ] })
	expect(chat.messages.length).to.eql(2)
	})

	it('Updates minId and lastMessage and newMessageCount', () => {
	const chat = chatService.empty()

	chatService.add(chat, { messages: [ message1 ] })
	- expect(chat.lastMessage.id).to.eql(message1.id)
	+ expect(chat.maxId).to.eql(message1.id)
	expect(chat.minId).to.eql(message1.id)
	expect(chat.newMessageCount).to.eql(1)

	chatService.add(chat, { messages: [ message2 ] })
	- expect(chat.lastMessage.id).to.eql(message2.id)
	+ expect(chat.maxId).to.eql(message2.id)
	expect(chat.minId).to.eql(message1.id)
	expect(chat.newMessageCount).to.eql(2)

	chatService.resetNewMessageCount(chat)
	expect(chat.newMessageCount).to.eql(0)

	const createdAt = new Date()
	createdAt.setSeconds(createdAt.getSeconds() + 10)
	chatService.add(chat, { messages: [ { message3, created_at: createdAt } ] })
	expect(chat.newMessageCount).to.eql(1)
	})
	})

	describe('.delete', () => {
	it('Updates minId and lastMessage', () => {
	const chat = chatService.empty()

	chatService.add(chat, { messages: [ message1 ] })
	chatService.add(chat, { messages: [ message2 ] })
	chatService.add(chat, { messages: [ message3 ] })

	- expect(chat.lastMessage.id).to.eql(message3.id)
	+ expect(chat.maxId).to.eql(message3.id)
	expect(chat.minId).to.eql(message1.id)

	chatService.deleteMessage(chat, message3.id)
	- expect(chat.lastMessage.id).to.eql(message2.id)
	+ expect(chat.maxId).to.eql(message2.id)
	expect(chat.minId).to.eql(message1.id)

	chatService.deleteMessage(chat, message1.id)
	- expect(chat.lastMessage.id).to.eql(message2.id)
	+ expect(chat.maxId).to.eql(message2.id)
	expect(chat.minId).to.eql(message2.id)
	})
	})

	describe('.getView', () => {
	it('Inserts date separators', () => {
	const chat = chatService.empty()

	chatService.add(chat, { messages: [ message1 ] })
	chatService.add(chat, { messages: [ message2 ] })
	chatService.add(chat, { messages: [ message3 ] })

	const view = chatService.getView(chat)
	expect(view.map(i => i.type)).to.eql(['date', 'message', 'message', 'date', 'message'])
	})
	})
	})

File Metadata

Mime Type: text/x-diff
Expires: Tue, Oct 13, 4:22 PM (1 d, 22 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1786821
Default Alt Text: (310 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions