No OneTemporary
Actions

Authored By

Unknown

Size

134 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.js b/src/App.js
	index 84300e00e3..ded772fad2 100644
	--- a/src/App.js
	+++ b/src/App.js
	@@ -1,148 +1,138 @@
	import UserPanel from './components/user_panel/user_panel.vue'
	import NavPanel from './components/nav_panel/nav_panel.vue'
	import Notifications from './components/notifications/notifications.vue'
	import SearchBar from './components/search_bar/search_bar.vue'
	import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
	import FeaturesPanel from './components/features_panel/features_panel.vue'
	import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
	import ChatPanel from './components/chat_panel/chat_panel.vue'
	import SettingsModal from './components/settings_modal/settings_modal.vue'
	import MediaModal from './components/media_modal/media_modal.vue'
	import SideDrawer from './components/side_drawer/side_drawer.vue'
	import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
	import MobileNav from './components/mobile_nav/mobile_nav.vue'
	import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
	import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
	import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
	import { windowWidth, windowHeight } from './services/window_utils/window_utils'

	export default {
	name: 'app',
	components: {
	UserPanel,
	NavPanel,
	Notifications,
	SearchBar,
	InstanceSpecificPanel,
	FeaturesPanel,
	WhoToFollowPanel,
	ChatPanel,
	MediaModal,
	SideDrawer,
	MobilePostStatusButton,
	MobileNav,
	SettingsModal,
	UserReportingModal,
	PostStatusModal,
	GlobalNoticeList
	},
	data: () => ({
	mobileActivePanel: 'timeline',
	searchBarHidden: true,
	supportsMask: window.CSS && window.CSS.supports && (
	window.CSS.supports('mask-size', 'contain') \|\|
	window.CSS.supports('-webkit-mask-size', 'contain') \|\|
	window.CSS.supports('-moz-mask-size', 'contain') \|\|
	window.CSS.supports('-ms-mask-size', 'contain') \|\|
	window.CSS.supports('-o-mask-size', 'contain')
	- ),
	- transitionName: 'fade'
	+ )
	}),
	created () {
	// Load the locale from the storage
	const val = this.$store.getters.mergedConfig.interfaceLanguage
	this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
	window.addEventListener('resize', this.updateMobileState)
	},
	destroyed () {
	window.removeEventListener('resize', this.updateMobileState)
	},
	computed: {
	currentUser () { return this.$store.state.users.currentUser },
	background () {
	return this.currentUser.background_image \|\| this.$store.state.instance.background
	},
	enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
	logoStyle () {
	return {
	'visibility': this.enableMask ? 'hidden' : 'visible'
	}
	},
	logoMaskStyle () {
	return this.enableMask ? {
	'mask-image': `url(${this.$store.state.instance.logo})`
	} : {
	'background-color': this.enableMask ? '' : 'transparent'
	}
	},
	logoBgStyle () {
	return Object.assign({
	'margin': `${this.$store.state.instance.logoMargin} 0`,
	opacity: this.searchBarHidden ? 1 : 0
	}, this.enableMask ? {} : {
	'background-color': this.enableMask ? '' : 'transparent'
	})
	},
	logo () { return this.$store.state.instance.logo },
	bgStyle () {
	return {
	'background-image': `url(${this.background})`
	}
	},
	bgAppStyle () {
	return {
	'--body-background-image': `url(${this.background})`
	}
	},
	sitename () { return this.$store.state.instance.name },
	chat () { return this.$store.state.chat.channel.state === 'joined' },
	hideSitename () { return this.$store.state.instance.hideSitename },
	suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
	showInstanceSpecificPanel () {
	return this.$store.state.instance.showInstanceSpecificPanel &&
	!this.$store.getters.mergedConfig.hideISP &&
	this.$store.state.instance.instanceSpecificPanelContent
	},
	showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
	isMobileLayout () { return this.$store.state.interface.mobileLayout },
	privateMode () { return this.$store.state.instance.private },
	sidebarAlign () {
	return {
	'order': this.$store.state.instance.sidebarRight ? 99 : 0
	}
	}
	},
	methods: {
	scrollToTop () {
	window.scrollTo(0, 0)
	},
	logout () {
	this.$router.replace('/main/public')
	this.$store.dispatch('logout')
	},
	onSearchBarToggled (hidden) {
	this.searchBarHidden = hidden
	},
	openSettingsModal () {
	this.$store.dispatch('openSettingsModal')
	},
	updateMobileState () {
	const mobileLayout = windowWidth() <= 800
	const layoutHeight = windowHeight()
	const changed = mobileLayout !== this.isMobileLayout
	if (changed) {
	this.$store.dispatch('setMobileLayout', mobileLayout)
	}
	this.$store.dispatch('setLayoutHeight', layoutHeight)
	}
	- },
	- watch: {
	- '$route' (to, from) {
	- if ((to.name === 'chat' && from.name === 'chats') \|\| (to.name === 'chats' && from.name === 'chat')) {
	- this.transitionName = 'none'
	- } else {
	- this.transitionName = 'fade'
	- }
	- }
	}
	}
	diff --git a/src/App.scss b/src/App.scss
	index 29ce73a819..e2e2d079c9 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,944 +1,979 @@
	@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;
	- overscroll-behavior: none;

	&.hidden {
	display: none;
	}
	}

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

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

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

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

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

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

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

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

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

	input, textarea, .select, .input {

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

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

	&.select {
	padding: 0;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	.auto-size {
	flex: 1
	}

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

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

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

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

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


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

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

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

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

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

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

	main-router {
	flex: 1;
	}

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

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

	/* Panel */

	.panel {
	display: flex;
	position: relative;

	flex-direction: column;
	margin: 0.5em;

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

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

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

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

	pointer-events: none;

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

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

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

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

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

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

	button {
	flex-shrink: 0;
	}

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

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

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

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

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

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

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

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


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

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

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

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

	.fa {
	color: grey;
	}

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

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

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

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

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

	.mobile-shown {
	display: none;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	.panel-switcher {
	display: flex;
	}

	.container {
	padding: 0;
	}

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

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

	.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;
	}
	+
	+.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/App.vue b/src/App.vue
	index 5d42993400..0276c6a60c 100644
	--- a/src/App.vue
	+++ b/src/App.vue
	@@ -1,137 +1,135 @@
	<template>
	<div
	id="app"
	:style="bgAppStyle"
	>
	<div
	id="app_bg_wrapper"
	class="app-bg-wrapper"
	:style="bgStyle"
	/>
	<MobileNav v-if="isMobileLayout" />
	<nav
	v-else
	id="nav"
	class="nav-bar container"
	@click="scrollToTop()"
	>
	<div class="inner-nav">
	<div
	class="logo"
	:style="logoBgStyle"
	>
	<div
	class="mask"
	:style="logoMaskStyle"
	/>
	<img
	:src="logo"
	:style="logoStyle"
	>
	</div>
	<div class="item">
	<router-link
	v-if="!hideSitename"
	class="site-name"
	:to="{ name: 'root' }"
	active-class="home"
	>
	{{ sitename }}
	</router-link>
	</div>
	<div class="item right">
	<search-bar
	v-if="currentUser \|\| !privateMode"
	class="nav-icon mobile-hidden"
	@toggled="onSearchBarToggled"
	@click.stop.native
	/>
	<a
	href="#"
	class="mobile-hidden"
	@click.stop="openSettingsModal"
	>
	<i
	class="button-icon icon-cog nav-icon"
	:title="$t('nav.preferences')"
	/>
	</a>
	<a
	v-if="currentUser && currentUser.role === 'admin'"
	href="/pleroma/admin/#/login-pleroma"
	class="mobile-hidden"
	target="_blank"
	><i
	class="button-icon icon-gauge nav-icon"
	:title="$t('nav.administration')"
	/></a>
	<a
	v-if="currentUser"
	href="#"
	class="mobile-hidden"
	@click.prevent="logout"
	><i
	class="button-icon icon-logout nav-icon"
	:title="$t('login.logout')"
	/></a>
	</div>
	</div>
	</nav>
	<div class="app-bg-wrapper app-container-wrapper" />
	<div
	id="content"
	class="container underlay"
	>
	<div
	class="sidebar-flexer mobile-hidden"
	:style="sidebarAlign"
	>
	<div class="sidebar-bounds">
	<div class="sidebar-scroller">
	<div class="sidebar">
	<user-panel />
	<div v-if="!isMobileLayout">
	<nav-panel />
	<instance-specific-panel v-if="showInstanceSpecificPanel" />
	<features-panel v-if="!currentUser && showFeaturesPanel" />
	<who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
	<notifications v-if="currentUser" />
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="main">
	<div
	v-if="!currentUser"
	class="login-hint panel panel-default"
	>
	<router-link
	:to="{ name: 'login' }"
	class="panel-body"
	>
	{{ $t("login.hint") }}
	</router-link>
	</div>
	- <transition :name="transitionName">
	- <router-view />
	- </transition>
	+ <router-view />
	</div>
	<media-modal />
	</div>
	<chat-panel
	v-if="currentUser && chat"
	:floating="true"
	class="floating-chat mobile-hidden"
	/>
	<MobilePostStatusButton />
	<UserReportingModal />
	<PostStatusModal />
	<SettingsModal />
	<portal-target name="modal" />
	<GlobalNoticeList />
	</div>
	</template>

	<script src="./App.js"></script>
	<style lang="scss" src="./App.scss"></style>
	diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
	index 6e23c20c2c..9c4e5b0554 100644
	--- a/src/components/chat/chat.js
	+++ b/src/components/chat/chat.js
	@@ -1,304 +1,333 @@
	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 ChatAvatar from '../chat_avatar/chat_avatar.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 ChatLayout from './chat_layout.js'
	import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'

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

	const Chat = {
	components: {
	ChatMessage,
	ChatTitle,
	- ChatAvatar,
	PostStatusForm
	},
	- mixins: [ChatLayout],
	data () {
	return {
	jumpToBottomButtonVisible: false,
	hoveredMessageChainId: undefined,
	- scrollPositionBeforeResize: {},
	+ 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 })
	}
	})
	},
	- handleLayoutChange () {
	- this.updateScrollableContainerHeight()
	- if (this.mobileLayout) {
	- this.setMobileChatLayout()
	- } else {
	- this.unsetMobileChatLayout()
	+ 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) {
	+ 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.scrollPositionBeforeResize
	- this.scrollPositionBeforeResize = getScrollPosition(this.$refs.scrollable)
	+ const { offsetHeight = undefined } = this.lastScrollPosition
	+ this.lastScrollPosition = getScrollPosition(this.$refs.scrollable)

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

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

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

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

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

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

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

	return this.backendInteractor.sendChatMessage(params)
	.then(data => {
	this.$store.dispatch('addChatMessages', { chatId: this.currentChat.id, messages: [data] }).then(() => {
	this.$nextTick(() => {
	- this.updateScrollableContainerHeight()
	+ 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 13c52ea3b7..6ae7ebc923 100644
	--- a/src/components/chat/chat.scss
	+++ b/src/components/chat/chat.scss
	@@ -1,161 +1,163 @@
	.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-top: 0.5em;
	- margin-left: 0.5em;
	- margin-right: 0.5em;
	+ 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;
	- border-radius: none;
	min-height: 100%;
	- margin-left: 0;
	- margin-right: 0;
	- margin-bottom: 0em;
	- margin-top: 0em;
	+ margin: 0 0 0 0;
	border-radius: 10px 10px 0 0;
	border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0 ;

	&::after {
	- border-radius: none;
	- box-shadow: none;
	+ border-radius: 0;
	}
	}

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

	.footer {
	position: sticky;
	- bottom: 0px;
	+ bottom: 0;
	}

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

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

	.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 !important;
	+ 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 d8c91dbe5c..62b72e14a4 100644
	--- a/src/components/chat/chat.vue
	+++ b/src/components/chat/chat.vue
	@@ -1,99 +1,99 @@
	<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" />
	</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' })"
	>
	<i class="icon-down-open">
	<div
	v-if="newMessageCount"
	class="badge badge-notification unread-chat-count unread-message-count"
	>
	{{ newMessageCount }}
	</div>
	</i>
	</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"
	- :request="sendMessage"
	+ :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/chat_layout.js b/src/components/chat/chat_layout.js
	deleted file mode 100644
	index 07ae3abfd7..0000000000
	--- a/src/components/chat/chat_layout.js
	+++ /dev/null
	@@ -1,100 +0,0 @@
	-const ChatLayout = {
	- methods: {
	- setChatLayout () {
	- if (this.mobileLayout) {
	- this.setMobileChatLayout()
	- }
	- },
	- unsetChatLayout () {
	- this.unsetMobileChatLayout()
	- },
	- setMobileChatLayout () {
	- // 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.style.overflow = 'hidden'
	- html.style.height = '100%'
	- }
	-
	- let body = document.querySelector('body')
	- if (body) {
	- body.style.height = '100%'
	- }
	-
	- let app = document.getElementById('app')
	- if (app) {
	- app.style.height = '100%'
	- app.style.overflow = 'hidden'
	- app.style.minHeight = 'auto'
	- }
	-
	- let appBgWrapper = window.document.getElementById('app_bg_wrapper')
	- if (appBgWrapper) {
	- appBgWrapper.style.overflow = 'hidden'
	- }
	-
	- let main = document.getElementsByClassName('main')[0]
	- if (main) {
	- main.style.overflow = 'hidden'
	- main.style.height = '100%'
	- }
	-
	- let content = document.getElementById('content')
	- if (content) {
	- content.style.paddingTop = '0'
	- content.style.height = '100%'
	- content.style.overflow = 'visible'
	- }
	-
	- this.$nextTick(() => {
	- this.updateScrollableContainerHeight()
	- })
	- },
	- unsetMobileChatLayout () {
	- let html = document.querySelector('html')
	- if (html) {
	- html.style.overflow = 'visible'
	- html.style.height = 'unset'
	- }
	-
	- let body = document.querySelector('body')
	- if (body) {
	- body.style.height = 'unset'
	- }
	-
	- let app = document.getElementById('app')
	- if (app) {
	- app.style.height = '100%'
	- app.style.overflow = 'visible'
	- app.style.minHeight = '100vh'
	- }
	-
	- let appBgWrapper = document.getElementById('app_bg_wrapper')
	- if (appBgWrapper) {
	- appBgWrapper.style.overflow = 'visible'
	- }
	-
	- let main = document.getElementsByClassName('main')[0]
	- if (main) {
	- main.style.overflow = 'visible'
	- main.style.height = 'unset'
	- }
	-
	- let content = document.getElementById('content')
	- if (content) {
	- content.style.paddingTop = '60px'
	- content.style.height = 'unset'
	- content.style.overflow = 'unset'
	- }
	- }
	- }
	-}
	-
	-export default ChatLayout
	diff --git a/src/components/chat/chat_layout_utils.js b/src/components/chat/chat_layout_utils.js
	index f07ba2a181..609dc0c9b8 100644
	--- a/src/components/chat/chat_layout_utils.js
	+++ b/src/components/chat/chat_layout_utils.js
	@@ -1,27 +1,26 @@
	// Captures a scroll position
	export const getScrollPosition = (el) => {
	return {
	scrollTop: el.scrollTop,
	scrollHeight: el.scrollHeight,
	offsetHeight: el.offsetHeight
	}
	}

	// A helper function that is used to keep the scroll position fixed as the new elements are added to the top
	// Takes two scroll positions, before and after the update.
	export const getNewTopPosition = (previousPosition, newPosition) => {
	return previousPosition.scrollTop + (newPosition.scrollHeight - previousPosition.scrollHeight)
	}

	export const isBottomedOut = (el, offset = 0) => {
	if (!el) { return }
	const scrollHeight = el.scrollTop + offset
	const totalHeight = el.scrollHeight - el.offsetHeight
	return totalHeight <= scrollHeight
	}

	// Height of the scrollable container. The dynamic height is needed to ensure the mobile browser panel doesn't overlap or hide the posting form.
	export const scrollableContainerHeight = (inner, header, footer) => {
	- const height = parseFloat(getComputedStyle(inner, null).height.replace('px', ''))
	- return height - header.clientHeight - footer.clientHeight
	+ return inner.offsetHeight - header.clientHeight - footer.clientHeight
	}
	diff --git a/src/components/chat_avatar/chat_avatar.js b/src/components/chat_avatar/chat_avatar.js
	deleted file mode 100644
	index 7b26e07c38..0000000000
	--- a/src/components/chat_avatar/chat_avatar.js
	+++ /dev/null
	@@ -1,23 +0,0 @@
	-import StillImage from '../still-image/still-image.vue'
	-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	-import { mapState } from 'vuex'
	-
	-const ChatAvatar = {
	- props: ['user', 'width', 'height'],
	- components: {
	- StillImage
	- },
	- methods: {
	- getUserProfileLink (user) {
	- if (!user) { return }
	- return generateProfileLink(user.id, user.screen_name)
	- }
	- },
	- computed: {
	- ...mapState({
	- betterShadow: state => state.interface.browserSupport.cssFilter
	- })
	- }
	-}
	-
	-export default ChatAvatar
	diff --git a/src/components/chat_avatar/chat_avatar.vue b/src/components/chat_avatar/chat_avatar.vue
	deleted file mode 100644
	index f54a715119..0000000000
	--- a/src/components/chat_avatar/chat_avatar.vue
	+++ /dev/null
	@@ -1,53 +0,0 @@
	-<template>
	- <router-link
	- :to="getUserProfileLink(user) \|\| ''"
	- >
	- <StillImage
	- v-if="user"
	- :style="{ 'width': width, 'height': height }"
	- class="avatar chat-avatar single-user"
	- :alt="user.screen_name"
	- :title="user.screen_name"
	- :src="user.profile_image_url_original"
	- error-src="/images/avi.png"
	- :class="{ 'better-shadow': betterShadow }"
	- />
	- <div
	- v-else
	- class="avatar chat-avatar single-user"
	- :style="{ 'width': width, 'height': height }"
	- />
	- </router-link>
	-</template>
	-
	-<script src="./chat_avatar.js"></script>
	-<style lang="scss">
	-@import '../../_variables.scss';
	-
	-.chat-avatar {
	- display: inline-block;
	- vertical-align: middle;
	-
	- &.single-user {
	- border-radius: $fallback--avatarAltRadius;
	- border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	- }
	-
	- .avatar.still-image {
	- width: 48px;
	- height: 48px;
	-
	- box-shadow: var(--avatarStatusShadow);
	- border-radius: 0;
	-
	- &.better-shadow {
	- box-shadow: var(--avatarStatusShadowInset);
	- filter: var(--avatarStatusShadowFilter)
	- }
	-
	- &.animated::before {
	- display: none;
	- }
	- }
	-}
	-</style>
	diff --git a/src/components/chat_list_item/chat_list_item.js b/src/components/chat_list_item/chat_list_item.js
	index 1c27088c7e..b6b0519aa1 100644
	--- a/src/components/chat_list_item/chat_list_item.js
	+++ b/src/components/chat_list_item/chat_list_item.js
	@@ -1,65 +1,65 @@
	import { mapState } from 'vuex'
	import StatusContent from '../status_content/status_content.vue'
	import fileType from 'src/services/file_type/file_type.service'
	-import ChatAvatar from '../chat_avatar/chat_avatar.vue'
	+import UserAvatar from '../user_avatar/user_avatar.vue'
	import AvatarList from '../avatar_list/avatar_list.vue'
	import Timeago from '../timeago/timeago.vue'
	import ChatTitle from '../chat_title/chat_title.vue'

	const ChatListItem = {
	name: 'ChatListItem',
	props: [
	'chat'
	],
	components: {
	- ChatAvatar,
	+ UserAvatar,
	AvatarList,
	Timeago,
	ChatTitle,
	StatusContent
	},
	computed: {
	...mapState({
	currentUser: state => state.users.currentUser
	}),
	attachmentInfo () {
	if (this.chat.lastMessage.attachments.length === 0) { return }

	const types = this.chat.lastMessage.attachments.map(file => fileType.fileType(file.mimetype))
	if (types.includes('video')) {
	return this.$t('file_type.video')
	} else if (types.includes('audio')) {
	return this.$t('file_type.audio')
	} else if (types.includes('image')) {
	return this.$t('file_type.image')
	} else {
	return this.$t('file_type.file')
	}
	},
	messageForStatusContent () {
	const content = this.chat.lastMessage ? (this.attachmentInfo \|\| this.chat.lastMessage.content) : ''

	return {
	summary: '',
	statusnet_html: content,
	text: content,
	attachments: []
	}
	}
	},
	methods: {
	openChat (_e) {
	if (this.chat.id) {
	this.$router.push({
	name: 'chat',
	params: {
	username: this.currentUser.screen_name,
	recipient_id: this.chat.account.id
	}
	})
	}
	}
	}
	}

	export default ChatListItem
	diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
	index 12269f899f..3ec59ea2ea 100644
	--- a/src/components/chat_list_item/chat_list_item.scss
	+++ b/src/components/chat_list_item/chat_list_item.scss
	@@ -1,94 +1,86 @@
	.chat-list-item {
	- &:hover .animated.avatar {
	- canvas {
	- display: none;
	- }
	- img {
	- visibility: visible;
	- }
	- }
	-
	display: flex;
	flex-direction: row;
	padding: 0.75em;
	- height: 4.85em;
	+ height: 5em;
	overflow: hidden;
	box-sizing: border-box;
	cursor: pointer;

	:focus {
	outline: none;
	}

	&:hover {
	background-color: var(--selectedPost, $fallback--lightBg);
	- box-shadow: 0 0px 3px 1px rgba(0, 0, 0, 0.1);
	+ box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
	}

	.chat-list-item-left {
	margin-right: 1em;
	}

	.chat-list-item-center {
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	word-wrap: break-word;
	}

	.heading {
	width: 100%;
	display: inline-flex;
	justify-content: space-between;
	line-height: 1em;
	}

	.heading-right {
	white-space: nowrap;
	}

	- .member-count {
	- color: $fallback--text;
	- color: var(--faintText, $fallback--text);
	- margin-right: 2px;
	- }
	-
	.name-and-account-name {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	flex-shrink: 1;
	}

	.chat-preview {
	display: inline-flex;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	- margin: 0.35rem 0;
	+ margin: 0.35em 0;
	height: 1.2em;
	line-height: 1.2em;
	color: $fallback--text;
	color: var(--faint, $fallback--text);
	}

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

	- .unread-indicator-wrapper {
	- display: flex;
	- align-items: center;
	- margin-left: 10px;
	+ &:hover .animated.avatar {
	+ canvas {
	+ display: none;
	+ }
	+ img {
	+ visibility: visible;
	+ }
	}

	- .unread-indicator {
	- border-radius: 100%;
	- height: 8px;
	- width: 8px;
	- background-color: $fallback--link;
	- background-color: var(--link, $fallback--link);
	+ .avatar.still-image {
	+ border-radius: $fallback--avatarAltRadius;
	+ border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	+ }
	+
	+ .status-body {
	+ img.emoji {
	+ width: 1.4em;
	+ height: 1.4em;
	+ }
	}
	}
	diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue
	index 26ad581b27..640426b8c4 100644
	--- a/src/components/chat_list_item/chat_list_item.vue
	+++ b/src/components/chat_list_item/chat_list_item.vue
	@@ -1,49 +1,49 @@
	<template>
	<div
	class="chat-list-item"
	@click.capture.prevent="openChat"
	>
	<div class="chat-list-item-left">
	- <ChatAvatar
	+ <UserAvatar
	:user="chat.account"
	height="48px"
	width="48px"
	/>
	</div>
	<div class="chat-list-item-center">
	<div class="heading">
	<span
	v-if="chat.account"
	class="name-and-account-name"
	>
	<ChatTitle
	:user="chat.account"
	/>
	</span>
	<span class="heading-right" />
	</div>
	<div class="chat-preview">
	<StatusContent :status="messageForStatusContent" />
	<div
	v-if="chat.unread > 0"
	class="badge badge-notification unread-chat-count"
	>
	{{ chat.unread }}
	</div>
	</div>
	</div>
	<div>
	<Timeago
	:time="chat.updated_at"
	:auto-update="60"
	/>
	</div>
	</div>
	</template>

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

	<style lang="scss">
	@import '../../_variables.scss';
	@import './chat_list_item.scss';
	</style>
	diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
	index aba9507447..4d737e42f9 100644
	--- a/src/components/chat_message/chat_message.js
	+++ b/src/components/chat_message/chat_message.js
	@@ -1,109 +1,109 @@
	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'

	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
	}),
	ellipsisButtonWrapperStyle () {
	let res = {
	'opacity': this.hovered \|\| this.menuOpened ? '1' : '0'
	}

	if (this.isCurrentUser) {
	- res.right = '5px'
	+ res.right = '0.4rem'
	} else {
	- res.left = '5px'
	+ res.left = '0.4rem'
	}

	return res
	},
	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 e402853714..9d7b79364d 100644
	--- a/src/components/chat_message/chat_message.scss
	+++ b/src/components/chat_message/chat_message.scss
	@@ -1,157 +1,152 @@
	@import '../../_variables.scss';

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

	- &:last-child {
	- margin-bottom: 16px;
	- }
	-
	.chat-message-menu {
	transition: opacity 0.1s;
	opacity: 0;
	position: absolute;
	- top: -10px;
	+ top: -0.8em;

	button {
	- padding-top: 3px;
	- padding-bottom: 3px;
	+ padding-top: 0.2em;
	+ padding-bottom: 0.2em;
	}
	}

	.icon-ellipsis {
	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: 12rem;
	+ width: 12em;
	}

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

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

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

	.chat-message-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 80%;
	- min-width: 10rem;
	+ 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: -10px 0 -5px 4px;
	+ margin: -1em 0 -0.5em 0;
	font-style: italic;
	opacity: 0.8;
	}

	.without-attachment {
	.status-content {
	- white-space: normal;
	-
	&::after {
	- margin-right: 75px;
	+ 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);
	}
	}
	}

	.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-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_new/chat_new.js b/src/components/chat_new/chat_new.js
	index 0da681f700..d023efc078 100644
	--- a/src/components/chat_new/chat_new.js
	+++ b/src/components/chat_new/chat_new.js
	@@ -1,74 +1,73 @@
	-import { throttle } from 'lodash'
	import { mapState, mapGetters } from 'vuex'
	import BasicUserCard from '../basic_user_card/basic_user_card.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'

	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: throttle(function (query) {
	+ 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 3921667724..113054443d 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;
	margin-right: 0.3em;
	}

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

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

	.go-back-button {
	cursor: pointer;
	}
	}
	diff --git a/src/components/chat_title/chat_title.js b/src/components/chat_title/chat_title.js
	index 2723d5f555..e424bb1f05 100644
	--- a/src/components/chat_title/chat_title.js
	+++ b/src/components/chat_title/chat_title.js
	@@ -1,20 +1,26 @@
	import Vue from 'vue'
	-import ChatAvatar from '../chat_avatar/chat_avatar.vue'
	+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	+import UserAvatar from '../user_avatar/user_avatar.vue'

	export default Vue.component('chat-title', {
	name: 'ChatTitle',
	components: {
	- ChatAvatar
	+ UserAvatar
	},
	props: [
	'user', 'withAvatar'
	],
	computed: {
	title () {
	return this.user ? this.user.screen_name : ''
	},
	htmlTitle () {
	return this.user ? this.user.name_html : ''
	}
	+ },
	+ methods: {
	+ getUserProfileLink (user) {
	+ return generateProfileLink(user.id, user.screen_name)
	+ }
	}
	})
	diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
	index fd42d125d1..cfd1e6d15f 100644
	--- a/src/components/chat_title/chat_title.vue
	+++ b/src/components/chat_title/chat_title.vue
	@@ -1,56 +1,65 @@
	<template>
	<!-- eslint-disable vue/no-v-html -->
	<div
	class="chat-title"
	:title="title"
	>
	- <ChatAvatar
	- v-if="withAvatar"
	- :user="user"
	- width="23px"
	- height="23px"
	- />
	- <span
	- v-if="withAvatar"
	- style="margin-right: 0.5em"
	- />
	+ <router-link
	+ v-if="withAvatar && user"
	+ :to="getUserProfileLink(user)"
	+ >
	+ <UserAvatar
	+ :user="user"
	+ width="23px"
	+ height="23px"
	+ />
	+ </router-link>
	<span
	class="username"
	v-html="htmlTitle"
	/>
	</div>
	<!-- eslint-enable vue/no-v-html -->
	</template>

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

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

	.chat-title {
	display: flex;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	-
	- a {
	- display: flex;
	- align-items: center;
	- }
	+ align-items: center;

	.username {
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline;
	word-wrap: break-word;

	.emoji {
	width: 14px;
	height: 14px;
	vertical-align: middle;
	object-fit: contain
	}
	}
	+
	+ .still-image.avatar {
	+ width: 23px;
	+ height: 23px;
	+ margin-right: 0.5em;
	+
	+ border-radius: $fallback--avatarAltRadius;
	+ border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	+
	+ &.animated::before {
	+ display: none;
	+ }
	+ }
	}
	</style>
	diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
	index a27da09053..f012344750 100644
	--- a/src/components/emoji_input/emoji_input.js
	+++ b/src/components/emoji_input/emoji_input.js
	@@ -1,469 +1,486 @@
	import Completion from '../../services/completion/completion.js'
	import EmojiPicker from '../emoji_picker/emoji_picker.vue'
	import { take } from 'lodash'
	import { findOffset } from '../../services/offset_finder/offset_finder.service.js'

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

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

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

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

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

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

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

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

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

	this.$nextTick(() => {
	const { offsetHeight } = this.input.elm
	const { picker } = this.$refs
	const pickerBottom = picker.$el.getBoundingClientRect().bottom
	if (pickerBottom > window.innerHeight) {
	picker.$el.style.top = 'auto'
	picker.$el.style.bottom = offsetHeight + 'px'
	}
	})
	},
	onTransition (e) {
	this.resize()
	},
	onBlur (e) {
	// Clicking on any suggestion removes focus from autocomplete,
	// preventing click handler ever executing.
	this.blurTimeout = setTimeout(() => {
	this.focused = false
	this.setCaret(e)
	this.resize()
	}, 200)
	},
	onClick (e, suggestion) {
	this.replaceText(e, suggestion)
	},
	onFocus (e) {
	if (this.blurTimeout) {
	clearTimeout(this.blurTimeout)
	this.blurTimeout = null
	}

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

	// Setting hider in keyUp to prevent suggestions from blinking
	// when moving away from suggested spot
	if (key === 'Escape') {
	this.temporarilyHideSuggestions = true
	} else {
	this.temporarilyHideSuggestions = false
	}
	},
	onPaste (e) {
	this.setCaret(e)
	this.resize()
	},
	onKeyDown (e) {
	const { ctrlKey, shiftKey, key } = e
	+ if (this.newlineOnCtrlEnter && ctrlKey && key === 'Enter') {
	+ this.insert({ insertion: '\n', surroundingSpace: false })
	+ // Ensure only one new line is added on macos
	+ e.stopPropagation()
	+ e.preventDefault()
	+
	+ // Scroll the input element to the position of the cursor
	+ this.$nextTick(() => {
	+ this.input.elm.blur()
	+ this.input.elm.focus()
	+ })
	+ }
	// Disable suggestions hotkeys if suggestions are hidden
	if (!this.temporarilyHideSuggestions) {
	if (key === 'Tab') {
	if (shiftKey) {
	this.cycleBackward(e)
	} else {
	this.cycleForward(e)
	}
	}
	if (key === 'ArrowUp') {
	this.cycleBackward(e)
	} else if (key === 'ArrowDown') {
	this.cycleForward(e)
	}
	if (key === 'Enter') {
	if (!ctrlKey) {
	this.replaceText(e)
	}
	}
	}
	// Probably add optional keyboard controls for emoji picker?

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

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

	this.setPlacement(panelBody, panel, offsetBottom)
	this.setPlacement(picker, picker, offsetBottom)
	},
	setPlacement (container, target, offsetBottom) {
	if (!container \|\| !target) return

	target.style.top = offsetBottom + 'px'
	target.style.bottom = 'auto'

	if (this.placement === 'top' \|\| (this.placement === 'auto' && this.overflowsBottom(container))) {
	target.style.top = 'auto'
	target.style.bottom = this.input.elm.offsetHeight + 'px'
	}
	},
	overflowsBottom (el) {
	return el.getBoundingClientRect().bottom > window.innerHeight
	}
	}
	}

	export default EmojiInput
	diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
	index d719eae152..c8865d7773 100644
	--- a/src/components/media_upload/media_upload.vue
	+++ b/src/components/media_upload/media_upload.vue
	@@ -1,67 +1,54 @@
	<template>
	<div
	class="media-upload"
	:class="{ disabled: disabled }"
	>
	<label
	class="label"
	:title="$t('tool_tip.media_upload')"
	>
	<i
	v-if="uploading"
	class="progress-icon icon-spin4 animate-spin"
	/>
	<i
	v-if="!uploading"
	class="new-icon icon-upload"
	/>
	<input
	v-if="uploadReady"
	:disabled="disabled"
	type="file"
	style="position: fixed; top: -100em"
	multiple="true"
	@change="change"
	>
	</label>
	</div>
	</template>

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

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

	.media-upload {
	- &.disabled {
	- .new-icon {
	- cursor: not-allowed;
	- }
	-
	- &:hover {
	- i, label {
	- color: $fallback--faint;
	- color: var(--faint, $fallback--faint);
	- }
	- }
	- }
	-
	.label {
	display: inline-block;
	}

	.new-icon {
	cursor: pointer;
	}

	.progress-icon {
	display: inline-block;
	line-height: 0;
	&::before {
	/* Overriding fontello to achieve the perfect speeeen */
	margin: 0;
	line-height: 0;
	}
	}
	}
	</style>
	diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
	index 90d0fa81ee..59e4dc26fb 100644
	--- a/src/components/post_status_form/post_status_form.js
	+++ b/src/components/post_status_form/post_status_form.js
	@@ -1,543 +1,536 @@
	import statusPoster from '../../services/status_poster/status_poster.service.js'
	import MediaUpload from '../media_upload/media_upload.vue'
	import ScopeSelector from '../scope_selector/scope_selector.vue'
	import EmojiInput from '../emoji_input/emoji_input.vue'
	import PollForm from '../poll/poll_form.vue'
	import Attachment from '../attachment/attachment.vue'
	import StatusContent from '../status_content/status_content.vue'
	import fileTypeService from '../../services/file_type/file_type.service.js'
	import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
	import { reject, map, uniqBy, debounce } from 'lodash'
	import suggestor from '../emoji_input/suggestor.js'
	import { mapGetters, mapState } from 'vuex'
	import Checkbox from '../checkbox/checkbox.vue'

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

	allAttentions.unshift(user)

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

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

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

	const PostStatusForm = {
	props: [
	'replyTo',
	'repliedUser',
	'attentions',
	'copyMessageScope',
	'subject',
	'disableSubject',
	'disableScopeSelector',
	'disableNotice',
	'disableLockWarning',
	'disablePolls',
	'disableSensitivityCheckbox',
	'disableSubmit',
	'placeholder',
	'maxHeight',
	- 'request',
	+ 'postHandler',
	'preserveFocus',
	'autoFocus',
	'fileLimit',
	'submitOnEnter',
	'emojiPickerPlacement'
	],
	components: {
	MediaUpload,
	EmojiInput,
	PollForm,
	ScopeSelector,
	Checkbox,
	Attachment,
	StatusContent
	},
	mounted () {
	this.resize(this.$refs.textarea)

	if (this.replyTo) {
	const textLength = this.$refs.textarea.value.length
	this.$refs.textarea.setSelectionRange(textLength, textLength)
	}

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

	const { scopeCopy } = this.$store.getters.mergedConfig

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

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

	const { postContentType: contentType } = this.$store.getters.mergedConfig

	return {
	dropFiles: [],
	uploadingFiles: false,
	error: null,
	posting: false,
	highlighted: 0,
	newStatus: {
	spoilerText: this.subject \|\| '',
	status: statusText,
	nsfw: false,
	files: [],
	poll: {},
	mediaDescriptions: {},
	visibility: scope,
	contentType
	},
	caret: 0,
	pollFormVisible: false,
	showDropIcon: 'hide',
	dropStopTimeout: null,
	preview: null,
	previewLoading: false,
	emojiInputShown: false
	}
	},
	computed: {
	users () {
	return this.$store.state.users.users
	},
	userDefaultScope () {
	return this.$store.state.users.currentUser.default_scope
	},
	showAllScopes () {
	return !this.mergedConfig.minimalScopesMode
	},
	emojiUserSuggestor () {
	return suggestor({
	emoji: [
	...this.$store.state.instance.emoji,
	...this.$store.state.instance.customEmoji
	],
	users: this.$store.state.users.users,
	updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
	})
	},
	emojiSuggestor () {
	return suggestor({
	emoji: [
	...this.$store.state.instance.emoji,
	...this.$store.state.instance.customEmoji
	]
	})
	},
	emoji () {
	return this.$store.state.instance.emoji \|\| []
	},
	customEmoji () {
	return this.$store.state.instance.customEmoji \|\| []
	},
	statusLength () {
	return this.newStatus.status.length
	},
	spoilerTextLength () {
	return this.newStatus.spoilerText.length
	},
	statusLengthLimit () {
	return this.$store.state.instance.textlimit
	},
	hasStatusLengthLimit () {
	return this.statusLengthLimit > 0
	},
	charactersLeft () {
	return this.statusLengthLimit - (this.statusLength + this.spoilerTextLength)
	},
	isOverLengthLimit () {
	return this.hasStatusLengthLimit && (this.charactersLeft < 0)
	},
	minimalScopesMode () {
	return this.$store.state.instance.minimalScopesMode
	},
	alwaysShowSubject () {
	return this.mergedConfig.alwaysShowSubjectInput
	},
	postFormats () {
	return this.$store.state.instance.postFormats \|\| []
	},
	safeDMEnabled () {
	return this.$store.state.instance.safeDM
	},
	pollsAvailable () {
	return this.$store.state.instance.pollsAvailable &&
	this.$store.state.instance.pollLimits.max_options >= 2 &&
	this.disablePolls !== true
	},
	hideScopeNotice () {
	return this.disableNotice \|\| this.$store.getters.mergedConfig.hideScopeNotice
	},
	pollContentError () {
	return this.pollFormVisible &&
	this.newStatus.poll &&
	this.newStatus.poll.error
	},
	showPreview () {
	return !!this.preview \|\| this.previewLoading
	},
	emptyStatus () {
	return this.newStatus.status.trim() === '' && this.newStatus.files.length === 0
	},
	uploadFileLimitReached () {
	return this.newStatus.files.length >= this.fileLimit
	},
	...mapGetters(['mergedConfig']),
	...mapState({
	mobileLayout: state => state.interface.mobileLayout
	})
	},
	watch: {
	'newStatus.contentType': function () {
	this.autoPreview()
	},
	'newStatus.spoilerText': function () {
	this.autoPreview()
	}
	},
	methods: {
	async postStatus (event, newStatus, opts = {}) {
	if (this.posting) { return }
	if (this.submitDisabled) { return }
	if (this.emojiInputShown) { return }
	if (this.submitOnEnter) {
	event.stopPropagation()
	event.preventDefault()
	}
	- if (opts.control && this.submitOnEnter) {
	- newStatus.status = `${newStatus.status}\n`
	- return
	- }

	if (this.emptyStatus) {
	this.error = this.$t('post_status.empty_status_error')
	return
	}

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

	this.posting = true

	try {
	await this.setAllMediaDescriptions()
	} catch (e) {
	this.error = this.$t('post_status.media_description_error')
	this.posting = false
	return
	}

	const postingOptions = {
	status: newStatus.status,
	spoilerText: newStatus.spoilerText \|\| null,
	visibility: newStatus.visibility,
	sensitive: newStatus.nsfw,
	media: newStatus.files,
	store: this.$store,
	inReplyToStatusId: this.replyTo,
	contentType: newStatus.contentType,
	poll
	}

	- const request = this.request ? this.request : statusPoster.postStatus
	+ const postHandler = this.postHandler ? this.postHandler : statusPoster.postStatus

	- request(postingOptions).then((data) => {
	+ postHandler(postingOptions).then((data) => {
	if (!data.error) {
	this.newStatus = {
	status: '',
	spoilerText: '',
	files: [],
	visibility: newStatus.visibility,
	contentType: newStatus.contentType,
	poll: {},
	mediaDescriptions: {}
	}
	this.pollFormVisible = false
	this.$refs.mediaUpload && this.$refs.mediaUpload.clearFile()
	this.clearPollForm()
	this.$emit('posted', data)
	if (this.preserveFocus) {
	this.$nextTick(() => {
	this.$refs.textarea.focus()
	})
	}
	let el = this.$el.querySelector('textarea')
	el.style.height = 'auto'
	el.style.height = undefined
	this.error = null
	if (this.preview) this.previewStatus()
	} else {
	this.error = data.error
	}
	this.posting = false
	})
	},
	previewStatus () {
	if (this.emptyStatus && this.newStatus.spoilerText.trim() === '') {
	this.preview = { error: this.$t('post_status.preview_empty') }
	this.previewLoading = false
	return
	}
	const newStatus = this.newStatus
	this.previewLoading = true
	statusPoster.postStatus({
	status: newStatus.status,
	spoilerText: newStatus.spoilerText \|\| null,
	visibility: newStatus.visibility,
	sensitive: newStatus.nsfw,
	media: [],
	store: this.$store,
	inReplyToStatusId: this.replyTo,
	contentType: newStatus.contentType,
	poll: {},
	preview: true
	}).then((data) => {
	// Don't apply preview if not loading, because it means
	// user has closed the preview manually.
	if (!this.previewLoading) return
	if (!data.error) {
	this.preview = data
	} else {
	this.preview = { error: data.error }
	}
	}).catch((error) => {
	this.preview = { error }
	}).finally(() => {
	this.previewLoading = false
	})
	},
	debouncePreviewStatus: debounce(function () { this.previewStatus() }, 500),
	autoPreview () {
	if (!this.preview) return
	this.previewLoading = true
	this.debouncePreviewStatus()
	},
	closePreview () {
	this.preview = null
	this.previewLoading = false
	},
	togglePreview () {
	if (this.showPreview) {
	this.closePreview()
	} else {
	this.previewStatus()
	}
	},
	addMediaFile (fileInfo) {
	this.newStatus.files.push(fileInfo)
	-
	- // TODO: use fixed dimensions instead so relying on timeout
	- setTimeout(() => {
	- this.$emit('resize')
	- }, 150)
	+ this.$emit('resize', { delayed: true })
	},
	removeMediaFile (fileInfo) {
	let index = this.newStatus.files.indexOf(fileInfo)
	this.newStatus.files.splice(index, 1)
	this.$emit('resize')
	},
	uploadFailed (errString, templateArgs) {
	templateArgs = templateArgs \|\| {}
	this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs)
	},
	startedUploadingFiles () {
	this.uploadingFiles = true
	},
	finishedUploadingFiles () {
	+ this.$emit('resize')
	this.uploadingFiles = false
	},
	type (fileInfo) {
	return fileTypeService.fileType(fileInfo.mimetype)
	},
	paste (e) {
	this.autoPreview()
	this.resize(e)
	if (e.clipboardData.files.length > 0) {
	// prevent pasting of file as text
	e.preventDefault()
	// Strangely, files property gets emptied after event propagation
	// Trying to wrap it in array doesn't work. Plus I doubt it's possible
	// to hold more than one file in clipboard.
	this.dropFiles = [e.clipboardData.files[0]]
	}
	},
	fileDrop (e) {
	if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
	e.preventDefault() // allow dropping text like before
	this.dropFiles = e.dataTransfer.files
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'hide'
	}
	},
	fileDragStop (e) {
	// The false-setting is done with delay because just using leave-events
	// directly caused unwanted flickering, this is not perfect either but
	// much less noticable.
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'fade'
	this.dropStopTimeout = setTimeout(() => (this.showDropIcon = 'hide'), 500)
	},
	fileDrag (e) {
	e.dataTransfer.dropEffect = this.uploadFileLimitReached ? 'none' : 'copy'
	if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'show'
	}
	},
	onEmojiInputInput (e) {
	this.autoPreview()
	this.$nextTick(() => {
	this.resize(this.$refs['textarea'])
	})
	},
	resize (e) {
	const target = e.target \|\| e
	if (!(target instanceof window.Element)) { return }

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

	const formRef = this.$refs['form']
	const bottomRef = this.$refs['bottom']
	/* Scroller is either `window` (replies in TL), sidebar (main post form,
	* replies in notifs) or mobile post form. Note that getting and setting
	* scroll is different for `Window` and `Element`s
	*/
	const bottomBottomPaddingStr = window.getComputedStyle(bottomRef)['padding-bottom']
	const bottomBottomPadding = Number(bottomBottomPaddingStr.substring(0, bottomBottomPaddingStr.length - 2))

	const scrollerRef = this.$el.closest('.sidebar-scroller') \|\|
	this.$el.closest('.post-form-modal-view') \|\|
	window

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

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

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

	// BEGIN content size update
	target.style.height = 'auto'
	const heightWithoutPadding = target.scrollHeight - vertPadding
	const newHeight = this.maxHeight ? Math.min(heightWithoutPadding, this.maxHeight) : heightWithoutPadding
	target.style.height = `${newHeight}px`
	this.$emit('resize', newHeight)
	// END content size update

	// We check where the bottom border of form-bottom element is, this uses findOffset
	// to find offset relative to scrollable container (scroller)
	const bottomBottomBorder = bottomRef.offsetHeight + findOffset(bottomRef, scrollerRef).top + bottomBottomPadding

	const isBottomObstructed = scrollerBottomBorder < bottomBottomBorder
	const isFormBiggerThanScroller = scrollerHeight < formRef.offsetHeight
	const bottomChangeDelta = bottomBottomBorder - scrollerBottomBorder
	// The intention is basically this;
	// Keep form-bottom always visible so that submit button is in view EXCEPT
	// if form element bigger than scroller and caret isn't at the end, so that
	// if you scroll up and edit middle of text you won't get scrolled back to bottom
	const shouldScrollToBottom = isBottomObstructed &&
	!(isFormBiggerThanScroller &&
	this.$refs.textarea.selectionStart !== this.$refs.textarea.value.length)
	const totalDelta = shouldScrollToBottom ? bottomChangeDelta : 0
	const targetScroll = currentScroll + totalDelta

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

	this.$refs['emoji-input'].resize()
	},
	showEmojiPicker () {
	this.$refs['textarea'].focus()
	this.$refs['emoji-input'].triggerShowPicker()
	},
	clearError () {
	this.error = null
	},
	changeVis (visibility) {
	this.newStatus.visibility = visibility
	},
	togglePollForm () {
	this.pollFormVisible = !this.pollFormVisible
	},
	setPoll (poll) {
	this.newStatus.poll = poll
	},
	clearPollForm () {
	if (this.$refs.pollForm) {
	this.$refs.pollForm.clear()
	}
	},
	dismissScopeNotice () {
	this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })
	},
	setMediaDescription (id) {
	const description = this.newStatus.mediaDescriptions[id]
	if (!description \|\| description.trim() === '') return
	return statusPoster.setMediaDescription({ store: this.$store, id, description })
	},
	setAllMediaDescriptions () {
	const ids = this.newStatus.files.map(file => file.id)
	return Promise.all(ids.map(id => this.setMediaDescription(id)))
	},
	handleEmojiInputShow (value) {
	this.emojiInputShown = value
	}
	}
	}

	export default PostStatusForm
	diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
	index d8df68d666..7454958ba4 100644
	--- a/src/components/post_status_form/post_status_form.vue
	+++ b/src/components/post_status_form/post_status_form.vue
	@@ -1,636 +1,650 @@
	<template>
	<div
	ref="form"
	class="post-status-form"
	>
	<form
	autocomplete="off"
	@submit.prevent
	@dragover.prevent="fileDrag"
	>
	<div
	v-show="showDropIcon !== 'hide'"
	:style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
	class="drop-indicator"
	:class="[uploadFileLimitReached ? 'icon-block' : 'icon-upload']"
	@dragleave="fileDragStop"
	@drop.stop="fileDrop"
	/>
	<div class="form-group">
	<i18n
	v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
	path="post_status.account_not_locked_warning"
	tag="p"
	class="visibility-notice"
	>
	<router-link :to="{ name: 'user-settings' }">
	{{ $t('post_status.account_not_locked_warning_link') }}
	</router-link>
	</i18n>
	<p
	v-if="!hideScopeNotice && newStatus.visibility === 'public'"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.public') }}</span>
	<a
	class="button-icon dismiss"
	@click.prevent="dismissScopeNotice()"
	>
	<i class="icon-cancel" />
	</a>
	</p>
	<p
	v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.unlisted') }}</span>
	<a
	class="button-icon dismiss"
	@click.prevent="dismissScopeNotice()"
	>
	<i class="icon-cancel" />
	</a>
	</p>
	<p
	v-else-if="!hideScopeNotice && newStatus.visibility === 'private' && $store.state.users.currentUser.locked"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.private') }}</span>
	<a
	class="button-icon dismiss"
	@click.prevent="dismissScopeNotice()"
	>
	<i class="icon-cancel" />
	</a>
	</p>
	<p
	v-else-if="newStatus.visibility === 'direct'"
	class="visibility-notice"
	>
	<span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
	<span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
	</p>
	<div class="preview-heading faint">
	<a
	class="preview-toggle faint"
	@click.stop.prevent="togglePreview"
	>
	{{ $t('post_status.preview') }}
	<i
	class="icon-down-open"
	:style="{ transform: showPreview ? 'rotate(0deg)' : 'rotate(-90deg)' }"
	/>
	</a>
	<i
	v-show="previewLoading"
	class="icon-spin3 animate-spin"
	/>
	</div>
	<div
	v-if="showPreview"
	class="preview-container"
	>
	<div
	v-if="!preview"
	class="preview-status"
	>
	{{ $t('general.loading') }}
	</div>
	<div
	v-else-if="preview.error"
	class="preview-status preview-error"
	>
	{{ preview.error }}
	</div>
	<StatusContent
	v-else
	:status="preview"
	class="preview-status"
	/>
	</div>
	<EmojiInput
	v-if="!disableSubject && (newStatus.spoilerText \|\| alwaysShowSubject)"
	v-model="newStatus.spoilerText"
	enable-emoji-picker
	:suggest="emojiSuggestor"
	class="form-control"
	>
	<input
	v-model="newStatus.spoilerText"
	type="text"
	:placeholder="$t('post_status.content_warning')"
	:disabled="posting"
	class="form-post-subject"
	>
	</EmojiInput>
	<EmojiInput
	ref="emoji-input"
	v-model="newStatus.status"
	:suggest="emojiUserSuggestor"
	:placement="emojiPickerPlacement"
	class="form-control main-input"
	enable-emoji-picker
	hide-emoji-button
	+ :newline-on-ctrl-enter="submitOnEnter"
	enable-sticker-picker
	@input="onEmojiInputInput"
	@sticker-uploaded="addMediaFile"
	@sticker-upload-failed="uploadFailed"
	@shown="handleEmojiInputShow"
	>
	<textarea
	ref="textarea"
	v-model="newStatus.status"
	:placeholder="placeholder \|\| $t('post_status.default')"
	rows="1"
	:disabled="posting"
	class="form-post-body"
	:class="{ 'scrollable-form': !!maxHeight }"
	@keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
	- @keydown.meta.enter="postStatus($event, newStatus, { control: true })"
	- @keydown.ctrl.enter="postStatus($event, newStatus)"
	+ @keydown.meta.enter="postStatus($event, newStatus)"
	+ @keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
	@input="resize"
	@compositionupdate="resize"
	@paste="paste"
	/>
	<p
	v-if="hasStatusLengthLimit"
	class="character-counter faint"
	:class="{ error: isOverLengthLimit }"
	>
	{{ charactersLeft }}
	</p>
	</EmojiInput>
	<div
	v-if="!disableScopeSelector"
	class="visibility-tray"
	>
	<scope-selector
	:show-all="showAllScopes"
	:user-default="userDefaultScope"
	:original-scope="copyMessageScope"
	:initial-scope="newStatus.visibility"
	:on-scope-change="changeVis"
	/>

	<div
	v-if="postFormats.length > 1"
	class="text-format"
	>
	<label
	for="post-content-type"
	class="select"
	>
	<select
	id="post-content-type"
	v-model="newStatus.contentType"
	class="form-control"
	>
	<option
	v-for="postFormat in postFormats"
	:key="postFormat"
	:value="postFormat"
	>
	{{ $t(`post_status.content_type["${postFormat}"]`) }}
	</option>
	</select>
	<i class="icon-down-open" />
	</label>
	</div>
	<div
	v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
	class="text-format"
	>
	<span class="only-format">
	{{ $t(`post_status.content_type["${postFormats[0]}"]`) }}
	</span>
	</div>
	</div>
	</div>
	<poll-form
	v-if="pollsAvailable"
	ref="pollForm"
	:visible="pollFormVisible"
	@update-poll="setPoll"
	/>
	<div
	ref="bottom"
	class="form-bottom"
	>
	<div class="form-bottom-left">
	<media-upload
	ref="mediaUpload"
	class="media-upload-icon"
	:drop-files="dropFiles"
	:disabled="uploadFileLimitReached"
	@uploading="startedUploadingFiles"
	@uploaded="addMediaFile"
	@upload-failed="uploadFailed"
	@all-uploaded="finishedUploadingFiles"
	/>
	<div
	class="emoji-icon"
	>
	<i
	:title="$t('emoji.add_emoji')"
	class="icon-smile btn btn-default"
	@click="showEmojiPicker"
	/>
	</div>
	<div
	v-if="pollsAvailable"
	class="poll-icon"
	:class="{ selected: pollFormVisible }"
	>
	<i
	:title="$t('polls.add_poll')"
	class="icon-chart-bar btn btn-default"
	@click="togglePollForm"
	/>
	</div>
	</div>
	<button
	v-if="posting"
	disabled
	class="btn btn-default"
	>
	{{ $t('post_status.posting') }}
	</button>
	<button
	v-else-if="isOverLengthLimit"
	disabled
	class="btn btn-default"
	>
	{{ $t('general.submit') }}
	</button>
	<!-- touchstart is used to keep the OSK at the same position after a message send -->
	<button
	v-else
	:disabled="uploadingFiles \|\| disableSubmit"
	class="btn btn-default"
	@touchstart.stop.prevent="postStatus($event, newStatus)"
	@click.stop.prevent="postStatus($event, newStatus)"
	>
	{{ $t('general.submit') }}
	</button>
	</div>
	<div
	v-if="error"
	class="alert error"
	>
	Error: {{ error }}
	<i
	class="button-icon icon-cancel"
	@click="clearError"
	/>
	</div>
	<div class="attachments">
	<div
	v-for="file in newStatus.files"
	:key="file.url"
	class="media-upload-wrapper"
	>
	<i
	class="fa button-icon icon-cancel"
	@click="removeMediaFile(file)"
	/>
	<attachment
	:attachment="file"
	:set-media="() => $store.dispatch('setMedia', newStatus.files)"
	size="small"
	allow-play="false"
	/>
	<input
	v-model="newStatus.mediaDescriptions[file.id]"
	type="text"
	:placeholder="$t('post_status.media_description')"
	@keydown.enter.prevent=""
	>
	</div>
	</div>
	<div
	v-if="newStatus.files.length > 0 && !disableSensitivityCheckbox"
	class="upload_settings"
	>
	<Checkbox v-model="newStatus.nsfw">
	{{ $t('post_status.attachments_sensitive') }}
	</Checkbox>
	</div>
	</form>
	</div>
	</template>

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

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

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

	.post-status-form {
	position: relative;

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

	button {
	width: 10em;
	}

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

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

	.preview-heading {
	display: flex;
	width: 100%;

	.icon-spin3 {
	margin-left: auto;
	}
	}

	.preview-toggle {
	display: flex;
	cursor: pointer;

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

	.icon-down-open {
	transition: transform 0.1s;
	}

	.preview-container {
	margin-bottom: 1em;
	}

	.preview-error {
	font-style: italic;
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	}

	.preview-status {
	border: 1px solid $fallback--border;
	border: 1px solid var(--border, $fallback--border);
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	padding: 0.5em;
	margin: 0;
	line-height: 1.4em;
	}

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

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

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

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

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

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

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

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

	.error {
	text-align: center;
	}

	.media-upload-wrapper {
	margin-right: .2em;
	margin-bottom: .5em;
	width: 18em;

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

	img, video {
	object-fit: contain;
	max-height: 10em;
	}

	.video {
	max-height: 10em;
	}

	input {
	flex: 1;
	width: 100%;
	}
	}

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

	.media-upload-wrapper .attachments {
	padding: 0 0.5em;

	.attachment {
	margin: 0;
	padding: 0;
	position: relative;
	}

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

	.btn {
	cursor: pointer;
	}

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

	form {
	display: flex;
	flex-direction: column;
	margin: 0.6em;
	position: relative;
	}

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

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

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

	&.scrollable-form {
	overflow-y: auto;
	}
	}

	.main-input {
	position: relative;
	}

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

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

	.btn {
	cursor: pointer;
	}

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

	.icon-cancel {
	cursor: pointer;
	z-index: 4;
	}

	@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 0.6; }
	}

	@keyframes fade-out {
	from { opacity: 0.6; }
	to { opacity: 0; }
	}

	.drop-indicator {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	font-size: 5em;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.6;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	border: 2px dashed $fallback--text;
	border: 2px dashed var(--text, $fallback--text);
	}
	}

	// todo: unify with attachment.vue (otherwise the uploaded images are not minified unless a status with an attachment was displayed before)
	-img.media-upload {
	+img.media-upload, .media-upload-container > video {
	line-height: 0;
	max-height: 200px;
	max-width: 100%;
	}
	</style>
	diff --git a/src/services/chat_service/chat_service.js b/src/services/chat_service/chat_service.js
	index 763a76070c..b60a889bd0 100644
	--- a/src/services/chat_service/chat_service.js
	+++ b/src/services/chat_service/chat_service.js
	@@ -1,150 +1,151 @@
	import _ from 'lodash'

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

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

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

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

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

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

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

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

	if (!storage.lastMessage \|\| message.id > storage.lastMessage.id) {
	storage.lastMessage = message
	}

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

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

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

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

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

	let afterDate = false

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

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

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

	- prev['isTail'] = true
	+ previousMessage['isTail'] = true
	currentMessageChainId = undefined
	afterDate = true
	}

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

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

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

	result.push(object)
	- prev = object
	+ previousMessage = object
	afterDate = false
	}

	return result
	}

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

	export default ChatService
	diff --git a/test/unit/specs/services/chat_service/chat_service.spec.js b/test/unit/specs/services/chat_service/chat_service.spec.js
	new file mode 100644
	index 0000000000..4e8e566b6a
	--- /dev/null
	+++ b/test/unit/specs/services/chat_service/chat_service.spec.js
	@@ -0,0 +1,89 @@
	+import chatService from '../../../../../src/services/chat_service/chat_service.js'
	+
	+const message1 = {
	+ id: '9wLkdcmQXD21Oy8lEX',
	+ created_at: (new Date('2020-06-22T18:45:53.000Z'))
	+}
	+
	+const message2 = {
	+ id: '9wLkdp6ihaOVdNj8Wu',
	+ account_id: '9vmRb29zLQReckr5ay',
	+ created_at: (new Date('2020-06-22T18:45:56.000Z'))
	+}
	+
	+const message3 = {
	+ id: '9wLke9zL4Dy4OZR2RM',
	+ account_id: '9vmRb29zLQReckr5ay',
	+ created_at: (new Date('2020-07-22T18:45:59.000Z'))
	+}
	+
	+// TODO: only
	+describe.only('chatService', () => {
	+ describe('.add', () => {
	+ it("Doesn't add duplicates", () => {
	+ const chat = chatService.empty()
	+ chatService.add(chat, { messages: [ message1 ] })
	+ chatService.add(chat, { messages: [ message1 ] })
	+ expect(chat.messages.length).to.eql(1)
	+
	+ chatService.add(chat, { messages: [ message2 ] })
	+ expect(chat.messages.length).to.eql(2)
	+ })
	+
	+ it('Updates minId and lastMessage and newMessageCount', () => {
	+ const chat = chatService.empty()
	+
	+ chatService.add(chat, { messages: [ message1 ] })
	+ expect(chat.lastMessage.id).to.eql(message1.id)
	+ expect(chat.minId).to.eql(message1.id)
	+ expect(chat.newMessageCount).to.eql(1)
	+
	+ chatService.add(chat, { messages: [ message2 ] })
	+ expect(chat.lastMessage.id).to.eql(message2.id)
	+ expect(chat.minId).to.eql(message1.id)
	+ expect(chat.newMessageCount).to.eql(2)
	+
	+ chatService.resetNewMessageCount(chat)
	+ expect(chat.newMessageCount).to.eql(0)
	+
	+ const createdAt = new Date()
	+ createdAt.setSeconds(createdAt.getSeconds() + 10)
	+ chatService.add(chat, { messages: [ { message3, created_at: createdAt } ] })
	+ expect(chat.newMessageCount).to.eql(1)
	+ })
	+ })
	+
	+ describe('.delete', () => {
	+ it('Updates minId and lastMessage', () => {
	+ const chat = chatService.empty()
	+
	+ chatService.add(chat, { messages: [ message1 ] })
	+ chatService.add(chat, { messages: [ message2 ] })
	+ chatService.add(chat, { messages: [ message3 ] })
	+
	+ expect(chat.lastMessage.id).to.eql(message3.id)
	+ expect(chat.minId).to.eql(message1.id)
	+
	+ chatService.deleteMessage(chat, message3.id)
	+ expect(chat.lastMessage.id).to.eql(message2.id)
	+ expect(chat.minId).to.eql(message1.id)
	+
	+ chatService.deleteMessage(chat, message1.id)
	+ expect(chat.lastMessage.id).to.eql(message2.id)
	+ expect(chat.minId).to.eql(message2.id)
	+ })
	+ })
	+
	+ describe('.getView', () => {
	+ it('Inserts date separators', () => {
	+ const chat = chatService.empty()
	+
	+ chatService.add(chat, { messages: [ message1 ] })
	+ chatService.add(chat, { messages: [ message2 ] })
	+ chatService.add(chat, { messages: [ message3 ] })
	+
	+ const view = chatService.getView(chat)
	+ expect(view.map(i => i.type)).to.eql(['date', 'message', 'message', 'date', 'message'])
	+ })
	+ })
	+})

File Metadata

Mime Type: text/x-diff
Expires: Fri, Oct 30, 5:27 AM (1 d, 2 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1799545
Default Alt Text: (134 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions