No OneTemporary
Actions

Size

151 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.scss b/src/App.scss
	index 10969abb..126a3297 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,989 +1,989 @@
	@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-] {
	+ i[class*=icon-], .svg-inline--fa {
	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);

	svg, 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);

	svg, 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);

	svg, 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-], .svg-inline--fa {
	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-] {
	+ &, i[class*=icon-], svg {
	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 {
	+ a, a i, a svg {
	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: 50%;
	flex-grow: 1;
	flex-shrink: 1;
	}

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

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

	.mobile-shown {
	display: none;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	.button-icon {
	&.svg-inline--fa.fa-lg {
	display: inline-block;
	padding: 0 0.3em;
	font-size: 1.1em;
	}
	}

	@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/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
	index 6d345bc7..395d6685 100644
	--- a/src/components/account_actions/account_actions.js
	+++ b/src/components/account_actions/account_actions.js
	@@ -1,46 +1,54 @@
	import { mapState } from 'vuex'
	import ProgressButton from '../progress_button/progress_button.vue'
	import Popover from '../popover/popover.vue'
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import {
	+ faEllipsisV
	+} from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faEllipsisV
	+)

	const AccountActions = {
	props: [
	'user', 'relationship'
	],
	data () {
	return { }
	},
	components: {
	ProgressButton,
	Popover
	},
	methods: {
	showRepeats () {
	this.$store.dispatch('showReblogs', this.user.id)
	},
	hideRepeats () {
	this.$store.dispatch('hideReblogs', this.user.id)
	},
	blockUser () {
	this.$store.dispatch('blockUser', this.user.id)
	},
	unblockUser () {
	this.$store.dispatch('unblockUser', this.user.id)
	},
	reportUser () {
	this.$store.dispatch('openUserReportingModal', this.user.id)
	},
	openChat () {
	this.$router.push({
	name: 'chat',
	params: { recipient_id: this.user.id }
	})
	}
	},
	computed: {
	...mapState({
	pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
	})
	}
	}

	export default AccountActions
	diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
	index 987e94b7..61099d4f 100644
	--- a/src/components/account_actions/account_actions.vue
	+++ b/src/components/account_actions/account_actions.vue
	@@ -1,94 +1,94 @@
	<template>
	- <div class="account-actions">
	+ <div class="AccountActions">
	<Popover
	trigger="click"
	placement="bottom"
	:bound-to="{ x: 'container' }"
	>
	<div
	slot="content"
	class="account-tools-popover"
	>
	<div class="dropdown-menu">
	<template v-if="relationship.following">
	<button
	v-if="relationship.showing_reblogs"
	class="btn btn-default dropdown-item"
	@click="hideRepeats"
	>
	{{ $t('user_card.hide_repeats') }}
	</button>
	<button
	v-if="!relationship.showing_reblogs"
	class="btn btn-default dropdown-item"
	@click="showRepeats"
	>
	{{ $t('user_card.show_repeats') }}
	</button>
	<div
	role="separator"
	class="dropdown-divider"
	/>
	</template>
	<button
	v-if="relationship.blocking"
	class="btn btn-default btn-block dropdown-item"
	@click="unblockUser"
	>
	{{ $t('user_card.unblock') }}
	</button>
	<button
	v-else
	class="btn btn-default btn-block dropdown-item"
	@click="blockUser"
	>
	{{ $t('user_card.block') }}
	</button>
	<button
	class="btn btn-default btn-block dropdown-item"
	@click="reportUser"
	>
	{{ $t('user_card.report') }}
	</button>
	<button
	v-if="pleromaChatMessagesAvailable"
	class="btn btn-default btn-block dropdown-item"
	@click="openChat"
	>
	{{ $t('user_card.message') }}
	</button>
	</div>
	</div>
	<div
	slot="trigger"
	class="btn btn-default ellipsis-button"
	>
	- <i class="icon-ellipsis trigger-button" />
	+ <FAIcon class="icon" icon="ellipsis-v" />
	</div>
	</Popover>
	</div>
	</template>

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

	<style lang="scss">
	@import '../../_variables.scss';
	-.account-actions {
	- margin: 0 .8em;
	-}
	+.AccountActions {
	+ button.dropdown-item {
	+ margin-left: 0;
	+ }

	-.account-actions button.dropdown-item {
	- margin-left: 0;
	-}
	+ .ellipsis-button {
	+ cursor: pointer;
	+ width: 2.5em;
	+ margin: -0.5em 0;
	+ padding: 0.5em 0;
	+ text-align: center;

	-.account-actions .trigger-button {
	- color: $fallback--lightText;
	- color: var(--lightText, $fallback--lightText);
	- opacity: .8;
	- cursor: pointer;
	- &:hover {
	- color: $fallback--text;
	- color: var(--text, $fallback--text);
	+ &:not(:hover) .icon {
	+ color: $fallback--lightText;
	+ color: var(--lightText, $fallback--lightText);
	+ }
	}
	}
	</style>
	diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
	index 1630ba80..083f850f 100644
	--- a/src/components/chat/chat.js
	+++ b/src/components/chat/chat.js
	@@ -1,346 +1,348 @@
	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'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	- faChevronDown
	+ faChevronDown,
	+ faChevronLeft
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	- faChevronDown
	+ faChevronDown,
	+ faChevronLeft
	)

	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.maxId)) { return }
	if (document.hidden) { return }
	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.maxId

	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: () => 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],
	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/chat.scss b/src/components/chat/chat.scss
	index 012a1b1d..b7b0d377 100644
	--- a/src/components/chat/chat.scss
	+++ b/src/components/chat/chat.scss
	@@ -1,162 +1,158 @@
	.chat-view {
	display: flex;
	height: calc(100vh - 60px);
	width: 100%;

	.chat-title {
	// prevents chat header jumping on when the user avatar loads
	height: 28px;
	}

	.chat-view-inner {
	height: auto;
	width: 100%;
	overflow: visible;
	display: flex;
	margin: 0.5em 0.5em 0 0.5em;
	}

	.chat-view-body {
	background-color: var(--chatBg, $fallback--bg);
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: visible;
	min-height: 100%;
	margin: 0 0 0 0;
	border-radius: 10px 10px 0 0;
	border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0 ;

	&::after {
	border-radius: 0;
	}
	}

	.scrollable-message-list {
	padding: 0 0.8em;
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	}

	.footer {
	position: sticky;
	bottom: 0;
	}

	.chat-view-heading {
	align-items: center;
	justify-content: space-between;
	top: 50px;
	display: flex;
	z-index: 2;
	position: sticky;
	overflow: hidden;
	}

	.go-back-button {
	cursor: pointer;
	- margin-right: 1.4em;
	-
	- i {
	- display: flex;
	- align-items: center;
	- }
	+ margin-right: 1.7em;
	+ margin-left: 0.3em;
	}

	.jump-to-bottom-button {
	width: 2.5em;
	height: 2.5em;
	border-radius: 100%;
	position: absolute;
	right: 1.3em;
	top: -3.2em;
	background-color: $fallback--fg;
	background-color: var(--btn, $fallback--fg);
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.3);
	z-index: 10;
	transition: 0.35s all;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	opacity: 0;
	visibility: hidden;
	cursor: pointer;

	&.visible {
	opacity: 1;
	visibility: visible;
	}

	i {
	font-size: 1em;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}

	.unread-message-count {
	font-size: 0.8em;
	left: 50%;
	transform: translate(-50%, 0);
	border-radius: 100%;
	margin-top: -1rem;
	padding: 0;
	}

	.chat-loading-error {
	width: 100%;
	display: flex;
	align-items: flex-end;
	height: 100%;

	.error {
	width: 100%;
	}
	}
	}

	@media all and (max-width: 800px) {
	height: 100%;
	overflow: hidden;

	.chat-view-inner {
	overflow: hidden;
	height: 100%;
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	}

	.chat-view-body {
	display: flex;
	min-height: auto;
	overflow: hidden;
	height: 100%;
	margin: 0;
	border-radius: 0;
	}

	.chat-view-heading {
	position: static;
	z-index: 9999;
	top: 0;
	margin-top: 0;
	border-radius: 0;
	}

	.scrollable-message-list {
	display: unset;
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	}

	.footer {
	position: sticky;
	bottom: auto;
	}
	}
	}
	diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
	index 0d44c920..0670f1ac 100644
	--- a/src/components/chat/chat.vue
	+++ b/src/components/chat/chat.vue
	@@ -1,101 +1,101 @@
	<template>
	<div class="chat-view">
	<div class="chat-view-inner">
	<div
	id="nav"
	ref="inner"
	class="panel-default panel chat-view-body"
	>
	<div
	ref="header"
	class="panel-heading chat-view-heading mobile-hidden"
	>
	<a
	class="go-back-button"
	@click="goBack"
	>
	- <i class="button-icon icon-left-open" />
	+ <FAIcon size="lg" icon="chevron-left" />
	</a>
	<div class="title text-center">
	<ChatTitle
	:user="recipient"
	:with-avatar="true"
	/>
	</div>
	</div>
	<template>
	<div
	ref="scrollable"
	class="scrollable-message-list"
	:style="{ height: scrollableContainerHeight }"
	@scroll="handleScroll"
	>
	<template v-if="!errorLoadingChat">
	<ChatMessage
	v-for="chatViewItem in chatViewItems"
	:key="chatViewItem.id"
	:author="recipient"
	:chat-view-item="chatViewItem"
	:hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId"
	@hover="onMessageHover"
	/>
	</template>
	<div
	v-else
	class="chat-loading-error"
	>
	<div class="alert error">
	{{ $t('chats.error_loading_chat') }}
	</div>
	</div>
	</div>
	<div
	ref="footer"
	class="panel-body footer"
	>
	<div
	class="jump-to-bottom-button"
	:class="{ 'visible': jumpToBottomButtonVisible }"
	@click="scrollDown({ behavior: 'smooth' })"
	>
	<span>
	<FAIcon icon="chevron-down" />
	<div
	v-if="newMessageCount"
	class="badge badge-notification unread-chat-count unread-message-count"
	>
	{{ newMessageCount }}
	</div>
	</span>
	</div>
	<PostStatusForm
	:disable-subject="true"
	:disable-scope-selector="true"
	:disable-notice="true"
	:disable-lock-warning="true"
	:disable-polls="true"
	:disable-sensitivity-checkbox="true"
	:disable-submit="errorLoadingChat \|\| !currentChat"
	:disable-preview="true"
	:post-handler="sendMessage"
	:submit-on-enter="!mobileLayout"
	:preserve-focus="!mobileLayout"
	:auto-focus="!mobileLayout"
	:placeholder="formPlaceholder"
	:file-limit="1"
	max-height="160"
	emoji-picker-placement="top"
	@resize="handleResize"
	/>
	</div>
	</template>
	</div>
	</div>
	</div>
	</template>

	<script src="./chat.js"></script>
	<style lang="scss">
	@import '../../_variables.scss';
	@import './chat.scss';
	</style>
	diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
	index 4ad993e3..bb380f87 100644
	--- a/src/components/chat_message/chat_message.js
	+++ b/src/components/chat_message/chat_message.js
	@@ -1,104 +1,106 @@
	import { mapState, mapGetters } from 'vuex'
	import Popover from '../popover/popover.vue'
	import Attachment from '../attachment/attachment.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import Gallery from '../gallery/gallery.vue'
	import LinkPreview from '../link-preview/link-preview.vue'
	import StatusContent from '../status_content/status_content.vue'
	import ChatMessageDate from '../chat_message_date/chat_message_date.vue'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	- faTimes
	+ faTimes,
	+ faEllipsisH
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	- faTimes
	+ faTimes,
	+ faEllipsisH
	)

	const ChatMessage = {
	name: 'ChatMessage',
	props: [
	'author',
	'edited',
	'noHeading',
	'chatViewItem',
	'hoveredMessageChain'
	],
	components: {
	Popover,
	Attachment,
	StatusContent,
	UserAvatar,
	Gallery,
	LinkPreview,
	ChatMessageDate
	},
	computed: {
	// Returns HH:MM (hours and minutes) in local time.
	createdAt () {
	const time = this.chatViewItem.data.created_at
	return time.toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit', hour12: false })
	},
	isCurrentUser () {
	return this.message.account_id === this.currentUser.id
	},
	message () {
	return this.chatViewItem.data
	},
	userProfileLink () {
	return generateProfileLink(this.author.id, this.author.screen_name, this.$store.state.instance.restrictedNicknames)
	},
	isMessage () {
	return this.chatViewItem.type === 'message'
	},
	messageForStatusContent () {
	return {
	summary: '',
	statusnet_html: this.message.content,
	text: this.message.content,
	attachments: this.message.attachments
	}
	},
	hasAttachment () {
	return this.message.attachments.length > 0
	},
	...mapState({
	betterShadow: state => state.interface.browserSupport.cssFilter,
	currentUser: state => state.users.currentUser,
	restrictedNicknames: state => state.instance.restrictedNicknames
	}),
	popoverMarginStyle () {
	if (this.isCurrentUser) {
	return {}
	} else {
	return { left: 50 }
	}
	},
	...mapGetters(['mergedConfig', 'findUser'])
	},
	data () {
	return {
	hovered: false,
	menuOpened: false
	}
	},
	methods: {
	onHover (bool) {
	this.$emit('hover', { isHovered: bool, messageChainId: this.chatViewItem.messageChainId })
	},
	async deleteMessage () {
	const confirmed = window.confirm(this.$t('chats.delete_confirm'))
	if (confirmed) {
	await this.$store.dispatch('deleteChatMessage', {
	messageId: this.chatViewItem.data.id,
	chatId: this.chatViewItem.data.chat_id
	})
	}
	this.hovered = false
	this.menuOpened = false
	}
	}
	}

	export default ChatMessage
	diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
	index 7d4ff60c..53ca7cce 100644
	--- a/src/components/chat_message/chat_message.scss
	+++ b/src/components/chat_message/chat_message.scss
	@@ -1,164 +1,164 @@
	@import '../../_variables.scss';

	.chat-message-wrapper {
	&.hovered-message-chain {
	.animated.Avatar {
	canvas {
	display: none;
	}
	img {
	visibility: visible;
	}
	}
	}

	.chat-message-menu {
	transition: opacity 0.1s;
	opacity: 0;
	position: absolute;
	top: -0.8em;

	button {
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	}
	}

	- .icon-ellipsis {
	+ .menu-icon {
	cursor: pointer;

	&:hover, .extra-button-popover.open & {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}

	border-radius: $fallback--chatMessageRadius;
	border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
	}

	.popover {
	width: 12em;
	}

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

	.avatar-wrapper {
	margin-right: 0.72em;
	width: 32px;
	}

	.link-preview, .attachments {
	margin-bottom: 1em;
	}

	.chat-message-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 80%;
	min-width: 10em;
	width: 100%;

	&.with-media {
	width: 100%;

	.gallery-row {
	overflow: hidden;
	}

	.status {
	width: 100%;
	}
	}
	}

	.status {
	border-radius: $fallback--chatMessageRadius;
	border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
	display: flex;
	padding: 0.75em;
	}

	.created-at {
	position: relative;
	float: right;
	font-size: 0.8em;
	margin: -1em 0 -0.5em 0;
	font-style: italic;
	opacity: 0.8;
	}

	.without-attachment {
	.status-content {
	&::after {
	margin-right: 5.4em;
	content: " ";
	display: inline-block;
	}
	}
	}

	.incoming {
	a {
	color: var(--chatMessageIncomingLink, $fallback--link);
	}

	.status {
	color: var(--chatMessageIncomingText, $fallback--text);
	background-color: var(--chatMessageIncomingBg, $fallback--bg);
	border: 1px solid var(--chatMessageIncomingBorder, --border);
	}

	.created-at {
	a {
	color: var(--chatMessageIncomingText, $fallback--text);
	}
	}

	.chat-message-menu {
	left: 0.4rem;
	}
	}

	.outgoing {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: end;
	justify-content: flex-end;

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

	.status {
	color: var(--chatMessageOutgoingText, $fallback--text);
	background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
	border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
	}

	.chat-message-inner {
	align-items: flex-end;
	}

	.chat-message-menu {
	right: 0.4rem;
	}
	}

	.visible {
	opacity: 1;
	}
	}

	.chat-message-date-separator {
	text-align: center;
	margin: 1.4em 0;
	font-size: 0.9em;
	user-select: none;
	color: $fallback--text;
	color: var(--faintedText, $fallback--text);
	}
	diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
	index 7973e5ef..d5b8bb9e 100644
	--- a/src/components/chat_message/chat_message.vue
	+++ b/src/components/chat_message/chat_message.vue
	@@ -1,99 +1,100 @@
	<template>
	<div
	v-if="isMessage"
	class="chat-message-wrapper"
	:class="{ 'hovered-message-chain': hoveredMessageChain }"
	@mouseover="onHover(true)"
	@mouseleave="onHover(false)"
	>
	<div
	class="chat-message"
	:class="[{ 'outgoing': isCurrentUser, 'incoming': !isCurrentUser }]"
	>
	<div
	v-if="!isCurrentUser"
	class="avatar-wrapper"
	>
	<router-link
	v-if="chatViewItem.isHead"
	:to="userProfileLink"
	>
	<UserAvatar
	:compact="true"
	:better-shadow="betterShadow"
	:user="author"
	/>
	</router-link>
	</div>
	<div class="chat-message-inner">
	<div
	class="status-body"
	:style="{ 'min-width': message.attachment ? '80%' : '' }"
	>
	<div
	class="media status"
	:class="{ 'without-attachment': !hasAttachment }"
	style="position: relative"
	@mouseenter="hovered = true"
	@mouseleave="hovered = false"
	>
	<div
	class="chat-message-menu"
	:class="{ 'visible': hovered \|\| menuOpened }"
	>
	<Popover
	trigger="click"
	placement="top"
	:bound-to-selector="isCurrentUser ? '' : '.scrollable-message-list'"
	:bound-to="{ x: 'container' }"
	:margin="popoverMarginStyle"
	@show="menuOpened = true"
	@close="menuOpened = false"
	>
	<div slot="content">
	<div class="dropdown-menu">
	<button
	class="dropdown-item dropdown-item-icon"
	@click="deleteMessage"
	>
	<FAIcon icon="times" /> {{ $t("chats.delete") }}
	</button>
	</div>
	</div>
	<button
	slot="trigger"
	+ class="menu-icon"
	:title="$t('chats.more')"
	>
	- <i class="icon-ellipsis" />
	+ <FAIcon icon="ellipsis-h" />
	</button>
	</Popover>
	</div>
	<StatusContent
	:status="messageForStatusContent"
	:full-content="true"
	>
	<span
	slot="footer"
	class="created-at"
	>
	{{ createdAt }}
	</span>
	</StatusContent>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div
	v-else
	class="chat-message-date-separator"
	>
	<ChatMessageDate :date="chatViewItem.date" />
	</div>
	</template>

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

	</style>
	diff --git a/src/components/chat_new/chat_new.js b/src/components/chat_new/chat_new.js
	index d023efc0..71585995 100644
	--- a/src/components/chat_new/chat_new.js
	+++ b/src/components/chat_new/chat_new.js
	@@ -1,73 +1,83 @@
	import { mapState, mapGetters } from 'vuex'
	import BasicUserCard from '../basic_user_card/basic_user_card.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import {
	+ faSearch,
	+ faChevronLeft
	+} from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faSearch,
	+ faChevronLeft
	+)

	const chatNew = {
	components: {
	BasicUserCard,
	UserAvatar
	},
	data () {
	return {
	suggestions: [],
	userIds: [],
	loading: false,
	query: ''
	}
	},
	async created () {
	const { chats } = await this.backendInteractor.chats()
	chats.forEach(chat => this.suggestions.push(chat.account))
	},
	computed: {
	users () {
	return this.userIds.map(userId => this.findUser(userId))
	},
	availableUsers () {
	if (this.query.length !== 0) {
	return this.users
	} else {
	return this.suggestions
	}
	},
	...mapState({
	currentUser: state => state.users.currentUser,
	backendInteractor: state => state.api.backendInteractor
	}),
	...mapGetters(['findUser'])
	},
	methods: {
	goBack () {
	this.$emit('cancel')
	},
	goToChat (user) {
	this.$router.push({ name: 'chat', params: { recipient_id: user.id } })
	},
	onInput () {
	this.search(this.query)
	},
	addUser (user) {
	this.selectedUserIds.push(user.id)
	this.query = ''
	},
	removeUser (userId) {
	this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
	},
	search (query) {
	if (!query) {
	this.loading = false
	return
	}

	this.loading = true
	this.userIds = []
	this.$store.dispatch('search', { q: query, resolve: true, type: 'accounts' })
	.then(data => {
	this.loading = false
	this.userIds = data.accounts.map(a => a.id)
	})
	}
	}
	}

	export default chatNew
	diff --git a/src/components/chat_new/chat_new.scss b/src/components/chat_new/chat_new.scss
	index 11305444..716172b0 100644
	--- a/src/components/chat_new/chat_new.scss
	+++ b/src/components/chat_new/chat_new.scss
	@@ -1,29 +1,29 @@
	.chat-new {
	.input-wrap {
	display: flex;
	margin: 0.7em 0.5em 0.7em 0.5em;

	input {
	width: 100%;
	}
	}

	- .icon-search {
	- font-size: 1.5em;
	- float: right;
	+ .search-icon {
	margin-right: 0.3em;
	}

	.member-list {
	padding-bottom: 0.7rem;
	}

	.basic-user-card:hover {
	cursor: pointer;
	background-color: var(--selectedPost, $fallback--lightBg);
	}

	.go-back-button {
	cursor: pointer;
	+ margin-right: 1.7em;
	+ margin-left: 0.3em;
	}
	}
	diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
	index 3333dbf9..95eebe6b 100644
	--- a/src/components/chat_new/chat_new.vue
	+++ b/src/components/chat_new/chat_new.vue
	@@ -1,46 +1,46 @@
	<template>
	<div
	id="nav"
	class="panel-default panel chat-new"
	>
	<div
	ref="header"
	class="panel-heading"
	>
	<a
	class="go-back-button"
	@click="goBack"
	>
	- <i class="button-icon icon-left-open" />
	+ <FAIcon size="lg" icon="chevron-left" />
	</a>
	</div>
	<div class="input-wrap">
	<div class="input-search">
	- <i class="button-icon icon-search" />
	+ <FAIcon size="lg" class="search-icon button-icon" icon="search" />
	</div>
	<input
	ref="search"
	v-model="query"
	placeholder="Search people"
	@input="onInput"
	>
	</div>
	<div class="member-list">
	<div
	v-for="user in availableUsers"
	:key="user.id"
	class="member"
	>
	<div @click.capture.prevent="goToChat(user)">
	<BasicUserCard :user="user" />
	</div>
	</div>
	</div>
	</div>
	</template>

	<script src="./chat_new.js"></script>
	<style lang="scss">
	@import '../../_variables.scss';
	@import './chat_new.scss';
	</style>
	diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
	index 24764e80..e7384c93 100644
	--- a/src/components/media_modal/media_modal.js
	+++ b/src/components/media_modal/media_modal.js
	@@ -1,98 +1,108 @@
	import StillImage from '../still-image/still-image.vue'
	import VideoAttachment from '../video_attachment/video_attachment.vue'
	import Modal from '../modal/modal.vue'
	import fileTypeService from '../../services/file_type/file_type.service.js'
	import GestureService from '../../services/gesture_service/gesture_service'
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import {
	+ faChevronLeft,
	+ faChevronRight
	+} from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faChevronLeft,
	+ faChevronRight
	+)

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

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

	export default MediaModal
	diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
	index 46931667..cbcfc6d2 100644
	--- a/src/components/media_modal/media_modal.vue
	+++ b/src/components/media_modal/media_modal.vue
	@@ -1,120 +1,120 @@
	<template>
	<Modal
	v-if="showing"
	class="media-modal-view"
	@backdropClicked="hide"
	>
	<img
	v-if="type === 'image'"
	class="modal-image"
	:src="currentMedia.url"
	:alt="currentMedia.description"
	:title="currentMedia.description"
	@touchstart.stop="mediaTouchStart"
	@touchmove.stop="mediaTouchMove"
	@click="hide"
	>
	<VideoAttachment
	v-if="type === 'video'"
	class="modal-image"
	:attachment="currentMedia"
	:controls="true"
	/>
	<audio
	v-if="type === 'audio'"
	class="modal-image"
	:src="currentMedia.url"
	:alt="currentMedia.description"
	:title="currentMedia.description"
	controls
	/>
	<button
	v-if="canNavigate"
	:title="$t('media_modal.previous')"
	class="modal-view-button-arrow modal-view-button-arrow--prev"
	@click.stop.prevent="goPrev"
	>
	- <i class="icon-left-open arrow-icon" />
	+ <FAIcon class="arrow-icon" icon="chevron-left" />
	</button>
	<button
	v-if="canNavigate"
	:title="$t('media_modal.next')"
	class="modal-view-button-arrow modal-view-button-arrow--next"
	@click.stop.prevent="goNext"
	>
	- <i class="icon-right-open arrow-icon" />
	+ <FAIcon class="arrow-icon" icon="chevron-right" />
	</button>
	</Modal>
	</template>

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

	<style lang="scss">
	.modal-view.media-modal-view {
	z-index: 1001;

	.modal-view-button-arrow {
	opacity: 0.75;

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

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

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

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

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

	&--next {
	right: 0;
	.arrow-icon {
	right: 6px;
	}
	}
	}
	</style>
	diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
	index bd32b266..9e736cfb 100644
	--- a/src/components/mobile_nav/mobile_nav.js
	+++ b/src/components/mobile_nav/mobile_nav.js
	@@ -1,94 +1,98 @@
	import SideDrawer from '../side_drawer/side_drawer.vue'
	import Notifications from '../notifications/notifications.vue'
	import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
	import GestureService from '../../services/gesture_service/gesture_service'
	import { mapGetters } from 'vuex'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	- faTimes
	+ faTimes,
	+ faBell,
	+ faBars
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	- faTimes
	+ faTimes,
	+ faBell,
	+ faBars
	)

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

	export default MobileNav
	diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
	index e5664dc5..4d91af77 100644
	--- a/src/components/mobile_nav/mobile_nav.vue
	+++ b/src/components/mobile_nav/mobile_nav.vue
	@@ -1,186 +1,185 @@
	<template>
	<div>
	<nav
	id="nav"
	class="nav-bar container"
	:class="{ 'mobile-hidden': isChat }"
	>
	<div
	class="mobile-inner-nav"
	@click="scrollToTop()"
	>
	<div class="item">
	<a
	href="#"
	class="mobile-nav-button"
	@click.stop.prevent="toggleMobileSidebar()"
	>
	- <i class="button-icon icon-menu" />
	+ <FAIcon size="lg" class="button-icon" icon="bars" />
	<div
	v-if="unreadChatCount"
	class="alert-dot"
	/>
	</a>
	<router-link
	v-if="!hideSitename"
	class="site-name"
	:to="{ name: 'root' }"
	active-class="home"
	>
	{{ sitename }}
	</router-link>
	</div>
	<div class="item right">
	<a
	v-if="currentUser"
	class="mobile-nav-button"
	href="#"
	@click.stop.prevent="openMobileNotifications()"
	>
	- <i class="button-icon icon-bell-alt" />
	+ <FAIcon size="lg" class="button-icon" icon="bell" />
	<div
	v-if="unseenNotificationsCount"
	class="alert-dot"
	/>
	</a>
	</div>
	</div>
	</nav>
	<div
	v-if="currentUser"
	class="mobile-notifications-drawer"
	:class="{ 'closed': !notificationsOpen }"
	@touchstart.stop="notificationsTouchStart"
	@touchmove.stop="notificationsTouchMove"
	>
	<div class="mobile-notifications-header">
	<span class="title">{{ $t('notifications.notifications') }}</span>
	<a
	class="mobile-nav-button"
	@click.stop.prevent="closeMobileNotifications()"
	>
	- <FAIcon class="button-icon" icon="times" />
	+ <FAIcon size="lg" class="button-icon" icon="times" />
	</a>
	</div>
	<div
	class="mobile-notifications"
	@scroll="onScroll"
	>
	<Notifications
	ref="notifications"
	:no-heading="true"
	/>
	</div>
	</div>
	<SideDrawer
	ref="sideDrawer"
	:logout="logout"
	/>
	</div>
	</template>

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

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

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

	.mobile-nav-button {
	- display: flex;
	- justify-content: center;
	- width: 50px;
	+ text-align: center;
	+ margin: 0 1em;
	position: relative;
	cursor: pointer;
	}

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

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

	&.closed {
	transform: translateX(100%);
	}
	}

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

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

	.mobile-notifications {
	margin-top: 50px;
	width: 100vw;
	height: calc(100vh - 50px);
	overflow-x: hidden;
	overflow-y: scroll;

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

	.notifications {
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	.panel {
	border-radius: 0;
	margin: 0;
	box-shadow: none;
	}
	.panel:after {
	border-radius: 0;
	}
	.panel .panel-heading {
	border-radius: 0;
	box-shadow: none;
	}
	}
	}

	</style>
	diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.js b/src/components/mobile_post_status_button/mobile_post_status_button.js
	index 6348277b..366ea89c 100644
	--- a/src/components/mobile_post_status_button/mobile_post_status_button.js
	+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
	@@ -1,100 +1,108 @@
	import { debounce } from 'lodash'
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import {
	+ faPen
	+} from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faPen
	+)

	const HIDDEN_FOR_PAGES = new Set([
	'chats',
	'chat'
	])

	const MobilePostStatusButton = {
	data () {
	return {
	hidden: false,
	scrollingDown: false,
	inputActive: false,
	oldScrollPos: 0,
	amountScrolled: 0
	}
	},
	created () {
	if (this.autohideFloatingPostButton) {
	this.activateFloatingPostButtonAutohide()
	}
	window.addEventListener('resize', this.handleOSK)
	},
	destroyed () {
	if (this.autohideFloatingPostButton) {
	this.deactivateFloatingPostButtonAutohide()
	}
	window.removeEventListener('resize', this.handleOSK)
	},
	computed: {
	isLoggedIn () {
	return !!this.$store.state.users.currentUser
	},
	isHidden () {
	if (HIDDEN_FOR_PAGES.has(this.$route.name)) { return true }

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

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

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

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

	export default MobilePostStatusButton
	diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue
	index 9cf45de3..50529878 100644
	--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
	+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
	@@ -1,55 +1,55 @@
	<template>
	<div v-if="isLoggedIn">
	<button
	class="new-status-button"
	:class="{ 'hidden': isHidden }"
	@click="openPostForm"
	>
	- <i class="icon-edit" />
	+ <FAIcon icon="pen" />
	</button>
	</div>
	</template>

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

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

	.new-status-button {
	width: 5em;
	height: 5em;
	border-radius: 100%;
	position: fixed;
	bottom: 1.5em;
	right: 1.5em;
	// TODO: this needs its own color, it has to stand out enough and link color
	// is not very optimal for this particular use.
	background-color: $fallback--fg;
	background-color: var(--btn, $fallback--fg);
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
	z-index: 10;

	transition: 0.35s transform;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

	&.hidden {
	transform: translateY(150%);
	}

	- i {
	+ svg {
	font-size: 1.5em;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}

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

	</style>
	diff --git a/src/components/search/search.js b/src/components/search/search.js
	index 3eb92fc1..b62bc2c5 100644
	--- a/src/components/search/search.js
	+++ b/src/components/search/search.js
	@@ -1,104 +1,108 @@
	import FollowCard from '../follow_card/follow_card.vue'
	import Conversation from '../conversation/conversation.vue'
	import Status from '../status/status.vue'
	import map from 'lodash/map'
	import { library } from '@fortawesome/fontawesome-svg-core'
	-import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
	+import {
	+ faCircleNotch,
	+ faSearch
	+} from '@fortawesome/free-solid-svg-icons'

	library.add(
	- faCircleNotch
	+ faCircleNotch,
	+ faSearch
	)

	const Search = {
	components: {
	FollowCard,
	Conversation,
	Status
	},
	props: [
	'query'
	],
	data () {
	return {
	loaded: false,
	loading: false,
	searchTerm: this.query \|\| '',
	userIds: [],
	statuses: [],
	hashtags: [],
	currenResultTab: 'statuses'
	}
	},
	computed: {
	users () {
	return this.userIds.map(userId => this.$store.getters.findUser(userId))
	},
	visibleStatuses () {
	const allStatusesObject = this.$store.state.statuses.allStatusesObject

	return this.statuses.filter(status =>
	allStatusesObject[status.id] && !allStatusesObject[status.id].deleted
	)
	}
	},
	mounted () {
	this.search(this.query)
	},
	watch: {
	query (newValue) {
	this.searchTerm = newValue
	this.search(newValue)
	}
	},
	methods: {
	newQuery (query) {
	this.$router.push({ name: 'search', query: { query } })
	this.$refs.searchInput.focus()
	},
	search (query) {
	if (!query) {
	this.loading = false
	return
	}

	this.loading = true
	this.userIds = []
	this.statuses = []
	this.hashtags = []
	this.$refs.searchInput.blur()

	this.$store.dispatch('search', { q: query, resolve: true })
	.then(data => {
	this.loading = false
	this.userIds = map(data.accounts, 'id')
	this.statuses = data.statuses
	this.hashtags = data.hashtags
	this.currenResultTab = this.getActiveTab()
	this.loaded = true
	})
	},
	resultCount (tabName) {
	const length = this[tabName].length
	return length === 0 ? '' : ` (${length})`
	},
	onResultTabSwitch (key) {
	this.currenResultTab = key
	},
	getActiveTab () {
	if (this.visibleStatuses.length > 0) {
	return 'statuses'
	} else if (this.users.length > 0) {
	return 'people'
	} else if (this.hashtags.length > 0) {
	return 'hashtags'
	}

	return 'statuses'
	},
	lastHistoryRecord (hashtag) {
	return hashtag.history && hashtag.history[0]
	}
	}
	}

	export default Search
	diff --git a/src/components/search/search.vue b/src/components/search/search.vue
	index a6677e4b..d32f48d9 100644
	--- a/src/components/search/search.vue
	+++ b/src/components/search/search.vue
	@@ -1,208 +1,208 @@
	<template>
	<div class="panel panel-default">
	<div class="panel-heading">
	<div class="title">
	{{ $t('nav.search') }}
	</div>
	</div>
	<div class="search-input-container">
	<input
	ref="searchInput"
	v-model="searchTerm"
	class="search-input"
	:placeholder="$t('nav.search')"
	@keyup.enter="newQuery(searchTerm)"
	>
	<button
	class="btn search-button"
	@click="newQuery(searchTerm)"
	>
	- <i class="icon-search" />
	+ <FAIcon icon="search" />
	</button>
	</div>
	<div
	v-if="loading"
	class="text-center loading-icon"
	>
	<FAIcon icon="circle-notch" spin size="lg"/>
	</div>
	<div v-else-if="loaded">
	<div class="search-nav-heading">
	<tab-switcher
	ref="tabSwitcher"
	:on-switch="onResultTabSwitch"
	:active-tab="currenResultTab"
	>
	<span
	key="statuses"
	:label="$t('user_card.statuses') + resultCount('visibleStatuses')"
	/>
	<span
	key="people"
	:label="$t('search.people') + resultCount('users')"
	/>
	<span
	key="hashtags"
	:label="$t('search.hashtags') + resultCount('hashtags')"
	/>
	</tab-switcher>
	</div>
	</div>
	<div class="panel-body">
	<div v-if="currenResultTab === 'statuses'">
	<div
	v-if="visibleStatuses.length === 0 && !loading && loaded"
	class="search-result-heading"
	>
	<h4>{{ $t('search.no_results') }}</h4>
	</div>
	<Status
	v-for="status in visibleStatuses"
	:key="status.id"
	:collapsable="false"
	:expandable="false"
	:compact="false"
	class="search-result"
	:statusoid="status"
	:no-heading="false"
	/>
	</div>
	<div v-else-if="currenResultTab === 'people'">
	<div
	v-if="users.length === 0 && !loading && loaded"
	class="search-result-heading"
	>
	<h4>{{ $t('search.no_results') }}</h4>
	</div>
	<FollowCard
	v-for="user in users"
	:key="user.id"
	:user="user"
	class="list-item search-result"
	/>
	</div>
	<div v-else-if="currenResultTab === 'hashtags'">
	<div
	v-if="hashtags.length === 0 && !loading && loaded"
	class="search-result-heading"
	>
	<h4>{{ $t('search.no_results') }}</h4>
	</div>
	<div
	v-for="hashtag in hashtags"
	:key="hashtag.url"
	class="status trend search-result"
	>
	<div class="hashtag">
	<router-link :to="{ name: 'tag-timeline', params: { tag: hashtag.name } }">
	#{{ hashtag.name }}
	</router-link>
	<div v-if="lastHistoryRecord(hashtag)">
	<span v-if="lastHistoryRecord(hashtag).accounts == 1">
	{{ $t('search.person_talking', { count: lastHistoryRecord(hashtag).accounts }) }}
	</span>
	<span v-else>
	{{ $t('search.people_talking', { count: lastHistoryRecord(hashtag).accounts }) }}
	</span>
	</div>
	</div>
	<div
	v-if="lastHistoryRecord(hashtag)"
	class="count"
	>
	{{ lastHistoryRecord(hashtag).uses }}
	</div>
	</div>
	</div>
	</div>
	<div class="search-result-footer text-center panel-footer faint" />
	</div>
	</template>

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

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

	.search-result-heading {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	padding: 0.75rem;
	text-align: center;
	}

	@media all and (max-width: 800px) {
	.search-nav-heading {
	.tab-switcher .tabs .tab-wrapper {
	display: block;
	justify-content: center;
	flex: 1 1 auto;
	text-align: center;
	}
	}
	}

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

	.search-result-footer {
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: var(--border, $fallback--border);
	padding: 10px;
	background-color: $fallback--fg;
	background-color: var(--panel, $fallback--fg);
	}

	.search-input-container {
	padding: 0.8rem;
	display: flex;
	justify-content: center;

	.search-input {
	width: 100%;
	line-height: 1.125rem;
	font-size: 1rem;
	padding: 0.5rem;
	box-sizing: border-box;
	}

	.search-button {
	margin-left: 0.5em;
	}
	}

	.loading-icon {
	padding: 1em;
	}

	.trend {
	display: flex;
	align-items: center;

	.hashtag {
	flex: 1 1 auto;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	.count {
	flex: 0 0 auto;
	width: 2rem;
	font-size: 1.5rem;
	line-height: 2.25rem;
	font-weight: 500;
	text-align: center;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}

	</style>
	diff --git a/src/components/search_bar/search_bar.js b/src/components/search_bar/search_bar.js
	index 3699e262..7ae8b21b 100644
	--- a/src/components/search_bar/search_bar.js
	+++ b/src/components/search_bar/search_bar.js
	@@ -1,41 +1,43 @@
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	- faTimes
	+ faTimes,
	+ faSearch
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	- faTimes
	+ faTimes,
	+ faSearch
	)

	const SearchBar = {
	data: () => ({
	searchTerm: undefined,
	hidden: true,
	error: false,
	loading: false
	}),
	watch: {
	'$route': function (route) {
	if (route.name === 'search') {
	this.searchTerm = route.query.query
	}
	}
	},
	methods: {
	find (searchTerm) {
	this.$router.push({ name: 'search', query: { query: searchTerm } })
	this.$refs.searchInput.focus()
	},
	toggleHidden () {
	this.hidden = !this.hidden
	this.$emit('toggled', this.hidden)
	this.$nextTick(() => {
	if (!this.hidden) {
	this.$refs.searchInput.focus()
	}
	})
	}
	}
	}

	export default SearchBar
	diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
	index 6a08ebe5..ecc0febf 100644
	--- a/src/components/search_bar/search_bar.vue
	+++ b/src/components/search_bar/search_bar.vue
	@@ -1,73 +1,73 @@
	<template>
	<div>
	<div class="search-bar-container">
	<i
	v-if="loading"
	class="icon-spin4 finder-icon animate-spin-slow"
	/>
	<a
	v-if="hidden"
	href="#"
	:title="$t('nav.search')"
	><i
	class="button-icon icon-search"
	@click.prevent.stop="toggleHidden"
	/></a>
	<template v-else>
	<input
	id="search-bar-input"
	ref="searchInput"
	v-model="searchTerm"
	class="search-bar-input"
	:placeholder="$t('nav.search')"
	type="text"
	@keyup.enter="find(searchTerm)"
	>
	<button
	class="btn search-button"
	@click="find(searchTerm)"
	>
	- <i class="icon-search" />
	+ <FAIcon icon="search" />
	</button>
	<FAIcon
	class="button-icon" icon="times"
	@click.prevent.stop="toggleHidden"
	/>
	</template>
	</div>
	</div>
	</template>

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

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

	.search-bar-container {
	max-width: 100%;
	display: inline-flex;
	align-items: baseline;
	vertical-align: baseline;
	justify-content: flex-end;

	.search-bar-input,
	.search-button {
	height: 29px;
	}

	.search-bar-input {
	// TODO: do this properly without a rough guesstimate of 2 icons + paddings
	max-width: calc(100% - 30px - 30px - 20px);
	}

	.search-button {
	margin-left: .5em;
	margin-right: .5em;
	}

	.icon-cancel {
	cursor: pointer;
	}
	}

	</style>
	diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss
	index a3fef1cf..f066234c 100644
	--- a/src/components/settings_modal/settings_modal_content.scss
	+++ b/src/components/settings_modal/settings_modal_content.scss
	@@ -1,43 +1,43 @@
	@import 'src/_variables.scss';
	.settings_tab-switcher {
	height: 100%;

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

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

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

	select {
	min-width: 10em;
	}

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

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

	.number-input {
	max-width: 6em;
	}
	}
	}
	diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
	index a39d7071..df592a10 100644
	--- a/src/components/settings_modal/tabs/general_tab.js
	+++ b/src/components/settings_modal/tabs/general_tab.js
	@@ -1,39 +1,41 @@
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'

	import SharedComputedObject from '../helpers/shared_computed_object.js'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	- faChevronDown
	+ faChevronDown,
	+ faGlobe
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	- faChevronDown
	+ faChevronDown,
	+ faGlobe
	)

	const GeneralTab = {
	data () {
	return {
	loopSilentAvailable:
	// Firefox
	Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') \|\|
	// Chrome-likes
	Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') \|\|
	// Future spec, still not supported in Nightly 63 as of 08/2018
	Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks')
	}
	},
	components: {
	Checkbox,
	InterfaceLanguageSwitcher
	},
	computed: {
	postFormats () {
	return this.$store.state.instance.postFormats \|\| []
	},
	instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
	...SharedComputedObject()
	}
	}

	export default GeneralTab
	diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
	index 9fc1470e..2ab6b314 100644
	--- a/src/components/settings_modal/tabs/general_tab.vue
	+++ b/src/components/settings_modal/tabs/general_tab.vue
	@@ -1,267 +1,267 @@
	<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>
	</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>
	<FAIcon class="icon-down-open" icon="chevron-down" />
	</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>
	<FAIcon class="icon-down-open" icon="chevron-down" />
	</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') }}
	+ <FAIcon 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/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
	index 37e829bb..22037218 100644
	--- a/src/components/settings_modal/tabs/profile_tab.js
	+++ b/src/components/settings_modal/tabs/profile_tab.js
	@@ -1,261 +1,263 @@
	import unescape from 'lodash/unescape'
	import merge from 'lodash/merge'
	import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
	import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
	import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js'
	import ProgressButton from 'src/components/progress_button/progress_button.vue'
	import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
	import suggestor from 'src/components/emoji_input/suggestor.js'
	import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	- faTimes
	+ faTimes,
	+ faPlus
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	- faTimes
	+ faTimes,
	+ faPlus
	)

	const ProfileTab = {
	data () {
	return {
	newName: this.$store.state.users.currentUser.name,
	newBio: unescape(this.$store.state.users.currentUser.description),
	newLocked: this.$store.state.users.currentUser.locked,
	newNoRichText: this.$store.state.users.currentUser.no_rich_text,
	newDefaultScope: this.$store.state.users.currentUser.default_scope,
	newFields: this.$store.state.users.currentUser.fields.map(field => ({ name: field.name, value: field.value })),
	hideFollows: this.$store.state.users.currentUser.hide_follows,
	hideFollowers: this.$store.state.users.currentUser.hide_followers,
	hideFollowsCount: this.$store.state.users.currentUser.hide_follows_count,
	hideFollowersCount: this.$store.state.users.currentUser.hide_followers_count,
	showRole: this.$store.state.users.currentUser.show_role,
	role: this.$store.state.users.currentUser.role,
	discoverable: this.$store.state.users.currentUser.discoverable,
	bot: this.$store.state.users.currentUser.bot,
	allowFollowingMove: this.$store.state.users.currentUser.allow_following_move,
	pickAvatarBtnVisible: true,
	bannerUploading: false,
	backgroundUploading: false,
	banner: null,
	bannerPreview: null,
	background: null,
	backgroundPreview: null,
	bannerUploadError: null,
	backgroundUploadError: null
	}
	},
	components: {
	ScopeSelector,
	ImageCropper,
	EmojiInput,
	Autosuggest,
	ProgressButton,
	Checkbox
	},
	computed: {
	user () {
	return this.$store.state.users.currentUser
	},
	emojiUserSuggestor () {
	return suggestor({
	emoji: [
	...this.$store.state.instance.emoji,
	...this.$store.state.instance.customEmoji
	],
	users: this.$store.state.users.users,
	updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
	})
	},
	emojiSuggestor () {
	return suggestor({ emoji: [
	...this.$store.state.instance.emoji,
	...this.$store.state.instance.customEmoji
	] })
	},
	userSuggestor () {
	return suggestor({
	users: this.$store.state.users.users,
	updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
	})
	},
	fieldsLimits () {
	return this.$store.state.instance.fieldsLimits
	},
	maxFields () {
	return this.fieldsLimits ? this.fieldsLimits.maxFields : 0
	},
	defaultAvatar () {
	return this.$store.state.instance.server + this.$store.state.instance.defaultAvatar
	},
	defaultBanner () {
	return this.$store.state.instance.server + this.$store.state.instance.defaultBanner
	},
	isDefaultAvatar () {
	const baseAvatar = this.$store.state.instance.defaultAvatar
	return !(this.$store.state.users.currentUser.profile_image_url) \|\|
	this.$store.state.users.currentUser.profile_image_url.includes(baseAvatar)
	},
	isDefaultBanner () {
	const baseBanner = this.$store.state.instance.defaultBanner
	return !(this.$store.state.users.currentUser.cover_photo) \|\|
	this.$store.state.users.currentUser.cover_photo.includes(baseBanner)
	},
	isDefaultBackground () {
	return !(this.$store.state.users.currentUser.background_image)
	},
	avatarImgSrc () {
	const src = this.$store.state.users.currentUser.profile_image_url_original
	return (!src) ? this.defaultAvatar : src
	},
	bannerImgSrc () {
	const src = this.$store.state.users.currentUser.cover_photo
	return (!src) ? this.defaultBanner : src
	}
	},
	methods: {
	updateProfile () {
	this.$store.state.api.backendInteractor
	.updateProfile({
	params: {
	note: this.newBio,
	locked: this.newLocked,
	// Backend notation.
	/* eslint-disable camelcase */
	display_name: this.newName,
	fields_attributes: this.newFields.filter(el => el != null),
	default_scope: this.newDefaultScope,
	no_rich_text: this.newNoRichText,
	hide_follows: this.hideFollows,
	hide_followers: this.hideFollowers,
	discoverable: this.discoverable,
	bot: this.bot,
	allow_following_move: this.allowFollowingMove,
	hide_follows_count: this.hideFollowsCount,
	hide_followers_count: this.hideFollowersCount,
	show_role: this.showRole
	/* eslint-enable camelcase */
	} }).then((user) => {
	this.newFields.splice(user.fields.length)
	merge(this.newFields, user.fields)
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	})
	},
	changeVis (visibility) {
	this.newDefaultScope = visibility
	},
	addField () {
	if (this.newFields.length < this.maxFields) {
	this.newFields.push({ name: '', value: '' })
	return true
	}
	return false
	},
	deleteField (index, event) {
	this.$delete(this.newFields, index)
	},
	uploadFile (slot, e) {
	const file = e.target.files[0]
	if (!file) { return }
	if (file.size > this.$store.state.instance[slot + 'limit']) {
	const filesize = fileSizeFormatService.fileSizeFormat(file.size)
	const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
	this[slot + 'UploadError'] = [
	this.$t('upload.error.base'),
	this.$t(
	'upload.error.file_too_big',
	{
	filesize: filesize.num,
	filesizeunit: filesize.unit,
	allowedsize: allowedsize.num,
	allowedsizeunit: allowedsize.unit
	}
	)
	].join(' ')
	return
	}
	// eslint-disable-next-line no-undef
	const reader = new FileReader()
	reader.onload = ({ target }) => {
	const img = target.result
	this[slot + 'Preview'] = img
	this[slot] = file
	}
	reader.readAsDataURL(file)
	},
	resetAvatar () {
	const confirmed = window.confirm(this.$t('settings.reset_avatar_confirm'))
	if (confirmed) {
	this.submitAvatar(undefined, '')
	}
	},
	resetBanner () {
	const confirmed = window.confirm(this.$t('settings.reset_banner_confirm'))
	if (confirmed) {
	this.submitBanner('')
	}
	},
	resetBackground () {
	const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
	if (confirmed) {
	this.submitBackground('')
	}
	},
	submitAvatar (cropper, file) {
	const that = this
	return new Promise((resolve, reject) => {
	function updateAvatar (avatar) {
	that.$store.state.api.backendInteractor.updateProfileImages({ avatar })
	.then((user) => {
	that.$store.commit('addNewUsers', [user])
	that.$store.commit('setCurrentUser', user)
	resolve()
	})
	.catch((err) => {
	reject(new Error(that.$t('upload.error.base') + ' ' + err.message))
	})
	}

	if (cropper) {
	cropper.getCroppedCanvas().toBlob(updateAvatar, file.type)
	} else {
	updateAvatar(file)
	}
	})
	},
	submitBanner (banner) {
	if (!this.bannerPreview && banner !== '') { return }

	this.bannerUploading = true
	this.$store.state.api.backendInteractor.updateProfileImages({ banner })
	.then((user) => {
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	this.bannerPreview = null
	})
	.catch((err) => {
	this.bannerUploadError = this.$t('upload.error.base') + ' ' + err.message
	})
	.then(() => { this.bannerUploading = false })
	},
	submitBackground (background) {
	if (!this.backgroundPreview && background !== '') { return }

	this.backgroundUploading = true
	this.$store.state.api.backendInteractor.updateProfileImages({ background }).then((data) => {
	if (!data.error) {
	this.$store.commit('addNewUsers', [data])
	this.$store.commit('setCurrentUser', data)
	this.backgroundPreview = null
	} else {
	this.backgroundUploadError = this.$t('upload.error.base') + data.error
	}
	this.backgroundUploading = false
	})
	}
	}
	}

	export default ProfileTab
	diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
	index df54551c..7013b65d 100644
	--- a/src/components/settings_modal/tabs/profile_tab.vue
	+++ b/src/components/settings_modal/tabs/profile_tab.vue
	@@ -1,289 +1,289 @@
	<template>
	<div class="profile-tab">
	<div class="setting-item">
	<h2>{{ $t('settings.name_bio') }}</h2>
	<p>{{ $t('settings.name') }}</p>
	<EmojiInput
	v-model="newName"
	enable-emoji-picker
	:suggest="emojiSuggestor"
	>
	<input
	id="username"
	v-model="newName"
	classname="name-changer"
	>
	</EmojiInput>
	<p>{{ $t('settings.bio') }}</p>
	<EmojiInput
	v-model="newBio"
	enable-emoji-picker
	:suggest="emojiUserSuggestor"
	>
	<textarea
	v-model="newBio"
	classname="bio"
	/>
	</EmojiInput>
	<p>
	<Checkbox v-model="newLocked">
	{{ $t('settings.lock_account_description') }}
	</Checkbox>
	</p>
	<div>
	<label for="default-vis">{{ $t('settings.default_vis') }}</label>
	<div
	id="default-vis"
	class="visibility-tray"
	>
	<scope-selector
	:show-all="true"
	:user-default="newDefaultScope"
	:initial-scope="newDefaultScope"
	:on-scope-change="changeVis"
	/>
	</div>
	</div>
	<p>
	<Checkbox v-model="newNoRichText">
	{{ $t('settings.no_rich_text_description') }}
	</Checkbox>
	</p>
	<p>
	<Checkbox v-model="hideFollows">
	{{ $t('settings.hide_follows_description') }}
	</Checkbox>
	</p>
	<p class="setting-subitem">
	<Checkbox
	v-model="hideFollowsCount"
	:disabled="!hideFollows"
	>
	{{ $t('settings.hide_follows_count_description') }}
	</Checkbox>
	</p>
	<p>
	<Checkbox v-model="hideFollowers">
	{{ $t('settings.hide_followers_description') }}
	</Checkbox>
	</p>
	<p class="setting-subitem">
	<Checkbox
	v-model="hideFollowersCount"
	:disabled="!hideFollowers"
	>
	{{ $t('settings.hide_followers_count_description') }}
	</Checkbox>
	</p>
	<p>
	<Checkbox v-model="allowFollowingMove">
	{{ $t('settings.allow_following_move') }}
	</Checkbox>
	</p>
	<p v-if="role === 'admin' \|\| role === 'moderator'">
	<Checkbox v-model="showRole">
	<template v-if="role === 'admin'">
	{{ $t('settings.show_admin_badge') }}
	</template>
	<template v-if="role === 'moderator'">
	{{ $t('settings.show_moderator_badge') }}
	</template>
	</Checkbox>
	</p>
	<p>
	<Checkbox v-model="discoverable">
	{{ $t('settings.discoverable') }}
	</Checkbox>
	</p>
	<div v-if="maxFields > 0">
	<p>{{ $t('settings.profile_fields.label') }}</p>
	<div
	v-for="(_, i) in newFields"
	:key="i"
	class="profile-fields"
	>
	<EmojiInput
	v-model="newFields[i].name"
	enable-emoji-picker
	hide-emoji-button
	:suggest="userSuggestor"
	>
	<input
	v-model="newFields[i].name"
	:placeholder="$t('settings.profile_fields.name')"
	>
	</EmojiInput>
	<EmojiInput
	v-model="newFields[i].value"
	enable-emoji-picker
	hide-emoji-button
	:suggest="userSuggestor"
	>
	<input
	v-model="newFields[i].value"
	:placeholder="$t('settings.profile_fields.value')"
	>
	</EmojiInput>
	<div
	class="icon-container"
	>
	<i
	v-show="newFields.length > 1"
	icon="times"
	@click="deleteField(i)"
	/>
	</div>
	</div>
	<a
	v-if="newFields.length < maxFields"
	class="add-field faint"
	@click="addField"
	>
	- <i class="icon-plus" />
	+ <FAIcon icon="plus" />
	{{ $t("settings.profile_fields.add_field") }}
	</a>
	</div>
	<p>
	<Checkbox v-model="bot">
	{{ $t('settings.bot') }}
	</Checkbox>
	</p>
	<button
	:disabled="newName && newName.length === 0"
	class="btn btn-default"
	@click="updateProfile"
	>
	{{ $t('general.submit') }}
	</button>
	</div>
	<div class="setting-item">
	<h2>{{ $t('settings.avatar') }}</h2>
	<p class="visibility-notice">
	{{ $t('settings.avatar_size_instruction') }}
	</p>
	<div class="current-avatar-container">
	<img
	:src="user.profile_image_url_original"
	class="current-avatar"
	>
	<i
	v-if="!isDefaultAvatar && pickAvatarBtnVisible"
	:title="$t('settings.reset_avatar')"
	class="reset-button" icon="times"
	type="button"
	@click="resetAvatar"
	/>
	</div>
	<p>{{ $t('settings.set_new_avatar') }}</p>
	<button
	v-show="pickAvatarBtnVisible"
	id="pick-avatar"
	class="btn"
	type="button"
	>
	{{ $t('settings.upload_a_photo') }}
	</button>
	<image-cropper
	trigger="#pick-avatar"
	:submit-handler="submitAvatar"
	@open="pickAvatarBtnVisible=false"
	@close="pickAvatarBtnVisible=true"
	/>
	</div>
	<div class="setting-item">
	<h2>{{ $t('settings.profile_banner') }}</h2>
	<div class="banner-background-preview">
	<img :src="user.cover_photo">
	<i
	v-if="!isDefaultBanner"
	:title="$t('settings.reset_profile_banner')"
	class="reset-button" icon="times"
	type="button"
	@click="resetBanner"
	/>
	</div>
	<p>{{ $t('settings.set_new_profile_banner') }}</p>
	<img
	v-if="bannerPreview"
	class="banner-background-preview"
	:src="bannerPreview"
	>
	<div>
	<input
	type="file"
	@change="uploadFile('banner', $event)"
	>
	</div>
	<i
	v-if="bannerUploading"
	class=" icon-spin4 animate-spin uploading"
	/>
	<button
	v-else-if="bannerPreview"
	class="btn btn-default"
	@click="submitBanner(banner)"
	>
	{{ $t('general.submit') }}
	</button>
	<div
	v-if="bannerUploadError"
	class="alert error"
	>
	Error: {{ bannerUploadError }}
	<i
	class="button-icon" icon="times"
	@click="clearUploadError('banner')"
	/>
	</div>
	</div>
	<div class="setting-item">
	<h2>{{ $t('settings.profile_background') }}</h2>
	<div class="banner-background-preview">
	<img :src="user.background_image">
	<i
	v-if="!isDefaultBackground"
	:title="$t('settings.reset_profile_background')"
	class="reset-button" icon="times"
	type="button"
	@click="resetBackground"
	/>
	</div>
	<p>{{ $t('settings.set_new_profile_background') }}</p>
	<img
	v-if="backgroundPreview"
	class="banner-background-preview"
	:src="backgroundPreview"
	>
	<div>
	<input
	type="file"
	@change="uploadFile('background', $event)"
	>
	</div>
	<i
	v-if="backgroundUploading"
	class=" icon-spin4 animate-spin uploading"
	/>
	<button
	v-else-if="backgroundPreview"
	class="btn btn-default"
	@click="submitBackground(background)"
	>
	{{ $t('general.submit') }}
	</button>
	<div
	v-if="backgroundUploadError"
	class="alert error"
	>
	Error: {{ backgroundUploadError }}
	<i
	class="button-icon" icon="times"
	@click="clearUploadError('background')"
	/>
	</div>
	</div>
	</div>
	</template>

	<script src="./profile_tab.js"></script>
	<style lang="scss" src="./profile_tab.scss"></style>
	diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
	index 281052e5..fe736168 100644
	--- a/src/components/side_drawer/side_drawer.js
	+++ b/src/components/side_drawer/side_drawer.js
	@@ -1,83 +1,111 @@
	import { mapState, mapGetters } from 'vuex'
	import UserCard from '../user_card/user_card.vue'
	import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
	import GestureService from '../../services/gesture_service/gesture_service'
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import {
	+ faSignInAlt,
	+ faSignOutAlt,
	+ faHome,
	+ faComments,
	+ faBell,
	+ faUserPlus,
	+ faBullhorn,
	+ faSearch,
	+ faTachometerAlt,
	+ faCog,
	+ faInfoCircle
	+} from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faSignInAlt,
	+ faSignOutAlt,
	+ faHome,
	+ faComments,
	+ faBell,
	+ faUserPlus,
	+ faBullhorn,
	+ faSearch,
	+ faTachometerAlt,
	+ faCog,
	+ faInfoCircle
	+)

	const SideDrawer = {
	props: [ 'logout' ],
	data: () => ({
	closed: true,
	closeGesture: undefined
	}),
	created () {
	this.closeGesture = GestureService.swipeGesture(GestureService.DIRECTION_LEFT, this.toggleDrawer)

	if (this.currentUser && this.currentUser.locked) {
	this.$store.dispatch('startFetchingFollowRequests')
	}
	},
	components: { UserCard },
	computed: {
	currentUser () {
	return this.$store.state.users.currentUser
	},
	chat () { return this.$store.state.chat.channel.state === 'joined' },
	unseenNotifications () {
	return unseenNotificationsFromStore(this.$store)
	},
	unseenNotificationsCount () {
	return this.unseenNotifications.length
	},
	suggestionsEnabled () {
	return this.$store.state.instance.suggestionsEnabled
	},
	logo () {
	return this.$store.state.instance.logo
	},
	hideSitename () {
	return this.$store.state.instance.hideSitename
	},
	sitename () {
	return this.$store.state.instance.name
	},
	followRequestCount () {
	return this.$store.state.api.followRequests.length
	},
	privateMode () {
	return this.$store.state.instance.private
	},
	federating () {
	return this.$store.state.instance.federating
	},
	timelinesRoute () {
	if (this.$store.state.interface.lastTimeline) {
	return this.$store.state.interface.lastTimeline
	}
	return this.currentUser ? 'friends' : 'public-timeline'
	},
	...mapState({
	pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
	}),
	...mapGetters(['unreadChatCount'])
	},
	methods: {
	toggleDrawer () {
	this.closed = !this.closed
	},
	doLogout () {
	this.logout()
	this.toggleDrawer()
	},
	touchStart (e) {
	GestureService.beginSwipe(e, this.closeGesture)
	},
	touchMove (e) {
	GestureService.updateSwipe(e, this.closeGesture)
	},
	openSettingsModal () {
	this.$store.dispatch('openSettingsModal')
	}
	}
	}

	export default SideDrawer
	diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
	index eda5a68c..fbdb2441 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") }}
	+ <FAIcon size="lg" fixed-width class="button-icon" icon="sign-in-alt" /> {{ $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") }}
	+ <FAIcon size="lg" fixed-width class="button-icon" icon="home" /> {{ $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") }}
	+ <FAIcon size="lg" fixed-width class="button-icon" icon="comments" /> {{ $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") }}
	+ <FAIcon size="lg" fixed-width class="button-icon" icon="bell" /> {{ $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") }}
	+ <FAIcon size="lg" fixed-width 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-megaphone" /> {{ $t("shoutbox.title") }}
	+ <FAIcon size="lg" fixed-width class="button-icon" icon="bullhorn" /> {{ $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") }}
	+ <FAIcon size="lg" fixed-width 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") }}
	+ <FAIcon size="lg" fixed-width 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") }}
	+ <FAIcon size="lg" fixed-width 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") }}
	+ <FAIcon size="lg" fixed-width class="button-icon" icon="info-circle" /> {{ $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") }}
	+ <FAIcon size="lg" fixed-width class="button-icon" icon="tachometer-alt" /> {{ $t("nav.administration") }}
	</a>
	</li>
	<li
	v-if="currentUser"
	@click="toggleDrawer"
	>
	<a
	href="#"
	@click="doLogout"
	>
	- <i class="button-icon icon-logout" /> {{ $t("login.logout") }}
	+ <FAIcon size="lg" fixed-width class="button-icon" icon="sign-out-alt" /> {{ $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/user_card/user_card.vue b/src/components/user_card/user_card.vue
	index cfdeaa17..4f7df789 100644
	--- a/src/components/user_card/user_card.vue
	+++ b/src/components/user_card/user_card.vue
	@@ -1,584 +1,592 @@
	<template>
	<div
	class="user-card"
	:class="classes"
	>
	<div
	:class="{ 'hide-bio': hideBio }"
	:style="style"
	class="background-image"
	/>
	<div class="panel-heading">
	<div class="user-info">
	<div class="container">
	<a
	v-if="allowZoomingAvatar"
	class="user-info-avatar-link"
	@click="zoomAvatar"
	>
	<UserAvatar
	:better-shadow="betterShadow"
	:user="user"
	/>
	<div class="user-info-avatar-link-overlay">
	<FAIcon class="button-icon" icon="search-plus" size="lg" />
	</div>
	</a>
	<router-link
	v-else
	:to="userProfileLink(user)"
	>
	<UserAvatar
	:better-shadow="betterShadow"
	:user="user"
	/>
	</router-link>
	<div class="user-summary">
	<div class="top-line">
	<!-- eslint-disable vue/no-v-html -->
	<div
	v-if="user.name_html"
	:title="user.name"
	class="user-name"
	v-html="user.name_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<div
	v-else
	:title="user.name"
	class="user-name"
	>
	{{ user.name }}
	</div>
	<a
	v-if="isOtherUser && !user.is_local"
	:href="user.statusnet_profile_url"
	target="_blank"
	+ class="external-link-button"
	>
	- <FAIcon class="usersettings" icon="external-link-alt" />
	+ <FAIcon class="icon" icon="external-link-alt" />
	</a>
	<AccountActions
	v-if="isOtherUser && loggedIn"
	:user="user"
	:relationship="relationship"
	/>
	</div>
	<div class="bottom-line">
	<router-link
	class="user-screen-name"
	:title="user.screen_name"
	:to="userProfileLink(user)"
	>
	@{{ user.screen_name }}
	</router-link>
	<template v-if="!hideBio">
	<span
	v-if="!!visibleRole"
	class="alert user-role"
	>
	{{ visibleRole }}
	</span>
	<span
	v-if="user.bot"
	class="alert user-role"
	>
	bot
	</span>
	</template>
	<span v-if="user.locked">
	<FAIcon class="lock-icon" icon="lock" size="sm"/>
	</span>
	<span
	v-if="!mergedConfig.hideUserStats && !hideBio"
	class="dailyAvg"
	>{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
	</div>
	</div>
	</div>
	<div class="user-meta">
	<div
	v-if="relationship.followed_by && loggedIn && isOtherUser"
	class="following"
	>
	{{ $t('user_card.follows_you') }}
	</div>
	<div
	v-if="isOtherUser && (loggedIn \|\| !switcher)"
	class="highlighter"
	>
	<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
	<input
	v-if="userHighlightType !== 'disabled'"
	:id="'userHighlightColorTx'+user.id"
	v-model="userHighlightColor"
	class="userHighlightText"
	type="text"
	>
	<input
	v-if="userHighlightType !== 'disabled'"
	:id="'userHighlightColor'+user.id"
	v-model="userHighlightColor"
	class="userHighlightCl"
	type="color"
	>
	<label
	for="theme_tab"
	class="userHighlightSel select"
	>
	<select
	:id="'userHighlightSel'+user.id"
	v-model="userHighlightType"
	class="userHighlightSel"
	>
	<option value="disabled">No highlight</option>
	<option value="solid">Solid bg</option>
	<option value="striped">Striped bg</option>
	<option value="side">Side stripe</option>
	</select>
	<FAIcon class="icon-down-open" icon="chevron-down" />
	</label>
	</div>
	</div>
	<div
	v-if="loggedIn && isOtherUser"
	class="user-interactions"
	>
	<div class="btn-group">
	<FollowButton :relationship="relationship" />
	<template v-if="relationship.following">
	<ProgressButton
	v-if="!relationship.subscribing"
	class="btn btn-default"
	:click="subscribeUser"
	:title="$t('user_card.subscribe')"
	>
	<FAIcon icon="bell" />
	</ProgressButton>
	<ProgressButton
	v-else
	class="btn btn-default toggled"
	:click="unsubscribeUser"
	:title="$t('user_card.unsubscribe')"
	>
	<FALayers>
	<FAIcon icon="rss" transform="left-5 shrink-6 up-3 rotate-20" flip="horizontal"/>
	<FAIcon icon="rss" transform="right-5 shrink-6 up-3 rotate-20"/>
	<FAIcon icon="bell" />
	</FALayers>
	</ProgressButton>
	</template>
	</div>
	<div>
	<button
	v-if="relationship.muting"
	class="btn btn-default btn-block toggled"
	@click="unmuteUser"
	>
	{{ $t('user_card.muted') }}
	</button>
	<button
	v-else
	class="btn btn-default btn-block"
	@click="muteUser"
	>
	{{ $t('user_card.mute') }}
	</button>
	</div>
	<div>
	<button
	class="btn btn-default btn-block"
	@click="mentionUser"
	>
	{{ $t('user_card.mention') }}
	</button>
	</div>
	<ModerationTools
	v-if="loggedIn.role === "admin""
	:user="user"
	/>
	</div>
	<div
	v-if="!loggedIn && user.is_local"
	class="user-interactions"
	>
	<RemoteFollow :user="user" />
	</div>
	</div>
	</div>
	<div
	v-if="!hideBio"
	class="panel-body"
	>
	<div
	v-if="!mergedConfig.hideUserStats && switcher"
	class="user-counts"
	>
	<div
	class="user-count"
	@click.prevent="setProfileView('statuses')"
	>
	<h5>{{ $t('user_card.statuses') }}</h5>
	<span>{{ user.statuses_count }} <br></span>
	</div>
	<div
	class="user-count"
	@click.prevent="setProfileView('friends')"
	>
	<h5>{{ $t('user_card.followees') }}</h5>
	<span>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</span>
	</div>
	<div
	class="user-count"
	@click.prevent="setProfileView('followers')"
	>
	<h5>{{ $t('user_card.followers') }}</h5>
	<span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
	</div>
	</div>
	<!-- eslint-disable vue/no-v-html -->
	<p
	v-if="!hideBio && user.description_html"
	class="user-card-bio"
	@click.prevent="linkClicked"
	v-html="user.description_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<p
	v-else-if="!hideBio"
	class="user-card-bio"
	>
	{{ user.description }}
	</p>
	</div>
	</div>
	</template>

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

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

	.user-card {
	position: relative;

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

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

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

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

	p {
	margin-bottom: 0;
	}

	&-bio {
	text-align: center;

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

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

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

	// Modifiers

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

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

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

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

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

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

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

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

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

	svg {
	color: #FFF;
	}
	}

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

	- .usersettings {
	- color: $fallback--lightText;
	- color: var(--lightText, $fallback--lightText);
	- opacity: .8;
	+ .external-link-button {
	+ cursor: pointer;
	+ width: 2.5em;
	+ text-align: center;
	+ margin: -0.5em 0;
	+ padding: 0.5em 0;
	+
	+ &:not(:hover) .icon {
	+ color: $fallback--lightText;
	+ color: var(--lightText, $fallback--lightText);
	+ }
	}

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

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

	.top-line {
	display: flex;
	}
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	button {
	margin: 0;
	}
	}
	}

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

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

	h5 {
	font-size:1em;
	font-weight: bolder;
	margin: 0 0 0.25em;
	}
	a {
	text-decoration: none;
	}
	}
	</style>
	diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
	index 6142f513..afb51a0f 100644
	--- a/src/hocs/with_load_more/with_load_more.js
	+++ b/src/hocs/with_load_more/with_load_more.js
	@@ -1,94 +1,104 @@
	import Vue from 'vue'
	import isEmpty from 'lodash/isEmpty'
	import { getComponentProps } from '../../services/component_utils/component_utils'
	import './with_load_more.scss'

	+import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import {
	+ faCircleNotch
	+} from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faCircleNotch
	+)
	+
	const withLoadMore = ({
	fetch, // function to fetch entries and return a promise
	select, // function to select data from store
	destroy, // function called at "destroyed" lifecycle
	childPropName = 'entries', // name of the prop to be passed into the wrapped component
	additionalPropNames = [] // additional prop name list of the wrapper component
	}) => (WrappedComponent) => {
	const originalProps = Object.keys(getComponentProps(WrappedComponent))
	const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames)

	return Vue.component('withLoadMore', {
	props,
	data () {
	return {
	loading: false,
	bottomedOut: false,
	error: false
	}
	},
	computed: {
	entries () {
	return select(this.$props, this.$store) \|\| []
	}
	},
	created () {
	window.addEventListener('scroll', this.scrollLoad)
	if (this.entries.length === 0) {
	this.fetchEntries()
	}
	},
	destroyed () {
	window.removeEventListener('scroll', this.scrollLoad)
	destroy && destroy(this.$props, this.$store)
	},
	methods: {
	fetchEntries () {
	if (!this.loading) {
	this.loading = true
	this.error = false
	fetch(this.$props, this.$store)
	.then((newEntries) => {
	this.loading = false
	this.bottomedOut = isEmpty(newEntries)
	})
	.catch(() => {
	this.loading = false
	this.error = true
	})
	}
	},
	scrollLoad (e) {
	const bodyBRect = document.body.getBoundingClientRect()
	const height = Math.max(bodyBRect.height, -(bodyBRect.y))
	if (this.loading === false &&
	this.bottomedOut === false &&
	this.$el.offsetHeight > 0 &&
	(window.innerHeight + window.pageYOffset) >= (height - 750)
	) {
	this.fetchEntries()
	}
	}
	},
	render (h) {
	const props = {
	props: {
	...this.$props,
	[childPropName]: this.entries
	},
	on: this.$listeners,
	scopedSlots: this.$scopedSlots
	}
	const children = Object.entries(this.$slots).map(([key, value]) => h('template', { slot: key }, value))
	return (
	<div class="with-load-more">
	<WrappedComponent {...props}>
	{children}
	</WrappedComponent>
	<div class="with-load-more-footer">
	{this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
	- {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
	+ {!this.error && this.loading && <FAIcon spin icon="circle-notch"/>}
	{!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
	</div>
	</div>
	)
	}
	})
	}

	export default withLoadMore
	diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js
	index 1775adcb..b1244276 100644
	--- a/src/hocs/with_subscription/with_subscription.js
	+++ b/src/hocs/with_subscription/with_subscription.js
	@@ -1,84 +1,94 @@
	import Vue from 'vue'
	import isEmpty from 'lodash/isEmpty'
	import { getComponentProps } from '../../services/component_utils/component_utils'
	import './with_subscription.scss'

	+import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import {
	+ faCircleNotch
	+} from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faCircleNotch
	+)
	+
	const withSubscription = ({
	fetch, // function to fetch entries and return a promise
	select, // function to select data from store
	childPropName = 'content', // name of the prop to be passed into the wrapped component
	additionalPropNames = [] // additional prop name list of the wrapper component
	}) => (WrappedComponent) => {
	const originalProps = Object.keys(getComponentProps(WrappedComponent))
	const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames)

	return Vue.component('withSubscription', {
	props: [
	...props,
	'refresh' // boolean saying to force-fetch data whenever created
	],
	data () {
	return {
	loading: false,
	error: false
	}
	},
	computed: {
	fetchedData () {
	return select(this.$props, this.$store)
	}
	},
	created () {
	if (this.refresh \|\| isEmpty(this.fetchedData)) {
	this.fetchData()
	}
	},
	methods: {
	fetchData () {
	if (!this.loading) {
	this.loading = true
	this.error = false
	fetch(this.$props, this.$store)
	.then(() => {
	this.loading = false
	})
	.catch(() => {
	this.error = true
	this.loading = false
	})
	}
	}
	},
	render (h) {
	if (!this.error && !this.loading) {
	const props = {
	props: {
	...this.$props,
	[childPropName]: this.fetchedData
	},
	on: this.$listeners,
	scopedSlots: this.$scopedSlots
	}
	const children = Object.entries(this.$slots).map(([key, value]) => h('template', { slot: key }, value))
	return (
	<div class="with-subscription">
	<WrappedComponent {...props}>
	{children}
	</WrappedComponent>
	</div>
	)
	} else {
	return (
	<div class="with-subscription-loading">
	{this.error
	? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>
	- : <i class="icon-spin3 animate-spin"/>
	+ : <FAIcon spin icon="circle-notch"/>
	}
	</div>
	)
	}
	}
	})
	}

	export default withSubscription

File Metadata

Mime Type: text/x-diff
Expires: Mon, Nov 25, 5:18 AM (1 d, 10 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 39616
Default Alt Text: (151 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions