No OneTemporary
Actions

Size

127 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.scss b/src/App.scss
	index d34698e2..10969abb 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,987 +1,989 @@
	@import './_variables.scss';

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

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

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

	h4 {
	margin: 0;
	}

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

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

	html {
	font-size: 14px;
	}

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

	&.hidden {
	display: none;
	}
	}

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

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

	i[class*=icon-] {
	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 {
	+
	+ svg, i {
	color: $fallback--text;
	color: var(--btnPressedText, $fallback--text);
	}
	}

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

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

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

	input, textarea, .select, .input {

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

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

	&.select {
	padding: 0;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	.auto-size {
	flex: 1
	}

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

	button {
	&, i[class*=icon-] {
	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 {
	- &i,
	&.svg-inline--fa.fa-lg {
	display: inline-block;
	padding: 0 0.3em;
	font-size: 1.1em;
	}
	}

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

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

	.panel-switcher {
	display: flex;
	}

	.container {
	padding: 0;
	}

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

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

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

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

	.login-hint {
	text-align: center;

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

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

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

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

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

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

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

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

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

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

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

	#app_bg_wrapper {
	overflow: hidden;
	}

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

	#content {
	padding-top: 0;
	height: 100%;
	overflow: visible;
	}
	}
	}
	diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
	index f2e3adf0..3dfec6df 100644
	--- a/src/components/chat_panel/chat_panel.js
	+++ b/src/components/chat_panel/chat_panel.js
	@@ -1,31 +1,37 @@
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import { faBullhorn } from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faBullhorn
	+)

	const chatPanel = {
	props: [ 'floating' ],
	data () {
	return {
	currentMessage: '',
	channel: null,
	collapsed: true
	}
	},
	computed: {
	messages () {
	return this.$store.state.chat.messages
	}
	},
	methods: {
	submit (message) {
	this.$store.state.chat.channel.push('new_msg', { text: message }, 10000)
	this.currentMessage = ''
	},
	togglePanel () {
	this.collapsed = !this.collapsed
	},
	userProfileLink (user) {
	return generateProfileLink(user.id, user.username, this.$store.state.instance.restrictedNicknames)
	}
	}
	}

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

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

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

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

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

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

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

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

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

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

	.chat-panel {
	.title {
	display: flex;
	justify-content: space-between;
	}
	}
	}
	</style>
	diff --git a/src/components/exporter/exporter.js b/src/components/exporter/exporter.js
	index 8f507416..51912ac3 100644
	--- a/src/components/exporter/exporter.js
	+++ b/src/components/exporter/exporter.js
	@@ -1,48 +1,55 @@
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faCircleNotch
	+)
	+
	const Exporter = {
	props: {
	getContent: {
	type: Function,
	required: true
	},
	filename: {
	type: String,
	default: 'export.csv'
	},
	exportButtonLabel: {
	type: String,
	default () {
	return this.$t('exporter.export')
	}
	},
	processingMessage: {
	type: String,
	default () {
	return this.$t('exporter.processing')
	}
	}
	},
	data () {
	return {
	processing: false
	}
	},
	methods: {
	process () {
	this.processing = true
	this.getContent()
	.then((content) => {
	const fileToDownload = document.createElement('a')
	fileToDownload.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content))
	fileToDownload.setAttribute('download', this.filename)
	fileToDownload.style.display = 'none'
	document.body.appendChild(fileToDownload)
	fileToDownload.click()
	document.body.removeChild(fileToDownload)
	// Add delay before hiding processing state since browser takes some time to handle file download
	setTimeout(() => { this.processing = false }, 2000)
	})
	}
	}
	}

	export default Exporter
	diff --git a/src/components/exporter/exporter.vue b/src/components/exporter/exporter.vue
	index f5126dc1..156db9a3 100644
	--- a/src/components/exporter/exporter.vue
	+++ b/src/components/exporter/exporter.vue
	@@ -1,26 +1,26 @@
	<template>
	<div class="exporter">
	<div v-if="processing">
	- <i class="icon-spin4 animate-spin exporter-processing" />
	+ <FAIcon icon="circle-notch" size="lg" spin />
	+
	<span>{{ processingMessage }}</span>
	</div>
	<button
	v-else
	class="btn btn-default"
	@click="process"
	>
	{{ exportButtonLabel }}
	</button>
	</div>
	</template>

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

	<style lang="scss">
	.exporter {
	&-processing {
	- font-size: 1.5em;
	margin: 0.25em;
	}
	}
	</style>
	diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
	index 6892dabc..f325b2b4 100644
	--- a/src/components/extra_buttons/extra_buttons.js
	+++ b/src/components/extra_buttons/extra_buttons.js
	@@ -1,75 +1,91 @@
	import Popover from '../popover/popover.vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	-import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
	+import {
	+ faEllipsisH,
	+ faBookmark,
	+ faEyeSlash,
	+ faThumbtack,
	+ faShareAlt
	+} from '@fortawesome/free-solid-svg-icons'
	+import {
	+ faBookmark as faBookmarkReg,
	+} from '@fortawesome/free-regular-svg-icons'

	-library.add(faEllipsisH)
	+library.add(
	+ faEllipsisH,
	+ faBookmark,
	+ faBookmarkReg,
	+ faEyeSlash,
	+ faThumbtack,
	+ faShareAlt
	+)

	const ExtraButtons = {
	props: [ 'status' ],
	components: { Popover },
	methods: {
	deleteStatus () {
	const confirmed = window.confirm(this.$t('status.delete_confirm'))
	if (confirmed) {
	this.$store.dispatch('deleteStatus', { id: this.status.id })
	}
	},
	pinStatus () {
	this.$store.dispatch('pinStatus', this.status.id)
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	unpinStatus () {
	this.$store.dispatch('unpinStatus', this.status.id)
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	muteConversation () {
	this.$store.dispatch('muteConversation', this.status.id)
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	unmuteConversation () {
	this.$store.dispatch('unmuteConversation', this.status.id)
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	copyLink () {
	navigator.clipboard.writeText(this.statusLink)
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	bookmarkStatus () {
	this.$store.dispatch('bookmark', { id: this.status.id })
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	unbookmarkStatus () {
	this.$store.dispatch('unbookmark', { id: this.status.id })
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	}
	},
	computed: {
	currentUser () { return this.$store.state.users.currentUser },
	canDelete () {
	if (!this.currentUser) { return }
	const superuser = this.currentUser.rights.moderator \|\| this.currentUser.rights.admin
	return superuser \|\| this.status.user.id === this.currentUser.id
	},
	ownStatus () {
	return this.status.user.id === this.currentUser.id
	},
	canPin () {
	return this.ownStatus && (this.status.visibility === 'public' \|\| this.status.visibility === 'unlisted')
	},
	canMute () {
	return !!this.currentUser
	},
	statusLink () {
	return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
	}
	}
	}

	export default ExtraButtons
	diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
	index 0af264a5..1889eaed 100644
	--- a/src/components/extra_buttons/extra_buttons.vue
	+++ b/src/components/extra_buttons/extra_buttons.vue
	@@ -1,99 +1,101 @@
	<template>
	<Popover
	trigger="click"
	placement="top"
	class="extra-button-popover"
	:bound-to="{ x: 'container' }"
	>
	<div
	slot="content"
	slot-scope="{close}"
	>
	<div class="dropdown-menu">
	<button
	v-if="canMute && !status.thread_muted"
	class="dropdown-item dropdown-item-icon"
	@click.prevent="muteConversation"
	>
	- <i class="icon-eye-off" /><span>{{ $t("status.mute_conversation") }}</span>
	+ <FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.mute_conversation") }}</span>
	</button>
	<button
	v-if="canMute && status.thread_muted"
	class="dropdown-item dropdown-item-icon"
	@click.prevent="unmuteConversation"
	>
	- <i class="icon-eye-off" /><span>{{ $t("status.unmute_conversation") }}</span>
	+ <FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.unmute_conversation") }}</span>
	</button>
	<button
	v-if="!status.pinned && canPin"
	class="dropdown-item dropdown-item-icon"
	@click.prevent="pinStatus"
	@click="close"
	>
	- <i class="icon-pin" /><span>{{ $t("status.pin") }}</span>
	+ <FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.pin") }}</span>
	</button>
	<button
	v-if="status.pinned && canPin"
	class="dropdown-item dropdown-item-icon"
	@click.prevent="unpinStatus"
	@click="close"
	>
	- <i class="icon-pin" /><span>{{ $t("status.unpin") }}</span>
	+ <FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.unpin") }}</span>
	</button>
	<button
	v-if="!status.bookmarked"
	class="dropdown-item dropdown-item-icon"
	@click.prevent="bookmarkStatus"
	@click="close"
	>
	- <i class="icon-bookmark-empty" /><span>{{ $t("status.bookmark") }}</span>
	+ <FAIcon size="md" fixed-width :icon="['far', 'bookmark']" /><span>{{ $t("status.bookmark") }}</span>
	</button>
	<button
	v-if="status.bookmarked"
	class="dropdown-item dropdown-item-icon"
	@click.prevent="unbookmarkStatus"
	@click="close"
	>
	- <i class="icon-bookmark" /><span>{{ $t("status.unbookmark") }}</span>
	+ <FAIcon size="md" fixed-width icon="bookmark" /><span>{{ $t("status.unbookmark") }}</span>
	</button>
	<button
	v-if="canDelete"
	class="dropdown-item dropdown-item-icon"
	@click.prevent="deleteStatus"
	@click="close"
	>
	- <i class="icon-cancel" /><span>{{ $t("status.delete") }}</span>
	+ <FAIcon size="md" fixed-width icon="times" /><span>{{ $t("status.delete") }}</span>
	</button>
	<button
	class="dropdown-item dropdown-item-icon"
	@click.prevent="copyLink"
	@click="close"
	>
	- <i class="icon-share" /><span>{{ $t("status.copy_link") }}</span>
	+ <FAIcon size="md" fixed-width icon="share-alt" /><span>{{ $t("status.copy_link") }}</span>
	</button>
	</div>
	</div>
	- <FAIcon
	- slot="trigger"
	- class="button-icon"
	- icon="ellipsis-h"
	- size="lg"
	- />
	+ <span slot="trigger">
	+ <FAIcon
	+ class="ExtraButtons button-icon"
	+ icon="ellipsis-h"
	+ size="md"
	+ />
	+ </span>
	</Popover>
	</template>

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

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

	-.icon-ellipsis {
	+.ExtraButtons {
	cursor: pointer;
	+ position: static;

	&:hover,
	.extra-button-popover.open & {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}
	</style>
	diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
	index 38e00702..15b2b8e4 100644
	--- a/src/components/media_upload/media_upload.vue
	+++ b/src/components/media_upload/media_upload.vue
	@@ -1,56 +1,57 @@
	<template>
	<div
	class="media-upload"
	:class="{ disabled: disabled }"
	>
	<label
	class="label"
	:title="$t('tool_tip.media_upload')"
	>
	<FAIcon
	v-if="uploading"
	- class="progress-icon animate-spin"
	+ class="progress-icon"
	icon="circle-notch"
	+ spin
	/>
	<FAIcon
	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 {
	.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/notification/notification.js b/src/components/notification/notification.js
	index bb906b50..4aa9affd 100644
	--- a/src/components/notification/notification.js
	+++ b/src/components/notification/notification.js
	@@ -1,92 +1,114 @@
	import StatusContent from '../status_content/status_content.vue'
	import { mapState } from 'vuex'
	import Status from '../status/status.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import UserCard from '../user_card/user_card.vue'
	import Timeago from '../timeago/timeago.vue'
	import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
	import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import {
	+ faCheck,
	+ faTimes,
	+ faStar,
	+ faRetweet,
	+ faUserPlus,
	+ faEyeSlash,
	+ faUser,
	+ faSuitcaseRolling
	+} from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faCheck,
	+ faTimes,
	+ faStar,
	+ faRetweet,
	+ faUserPlus,
	+ faUser,
	+ faEyeSlash,
	+ faSuitcaseRolling
	+)

	const Notification = {
	data () {
	return {
	userExpanded: false,
	betterShadow: this.$store.state.interface.browserSupport.cssFilter,
	unmuted: false
	}
	},
	props: [ 'notification' ],
	components: {
	StatusContent,
	UserAvatar,
	UserCard,
	Timeago,
	Status
	},
	methods: {
	toggleUserExpanded () {
	this.userExpanded = !this.userExpanded
	},
	generateUserProfileLink (user) {
	return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
	},
	getUser (notification) {
	return this.$store.state.users.usersObject[notification.from_profile.id]
	},
	toggleMute () {
	this.unmuted = !this.unmuted
	},
	approveUser () {
	this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
	this.$store.dispatch('removeFollowRequest', this.user)
	this.$store.dispatch('markSingleNotificationAsSeen', { id: this.notification.id })
	this.$store.dispatch('updateNotification', {
	id: this.notification.id,
	updater: notification => {
	notification.type = 'follow'
	}
	})
	},
	denyUser () {
	this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
	.then(() => {
	this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id })
	this.$store.dispatch('removeFollowRequest', this.user)
	})
	}
	},
	computed: {
	userClass () {
	return highlightClass(this.notification.from_profile)
	},
	userStyle () {
	const highlight = this.$store.getters.mergedConfig.highlight
	const user = this.notification.from_profile
	return highlightStyle(highlight[user.screen_name])
	},
	user () {
	return this.$store.getters.findUser(this.notification.from_profile.id)
	},
	userProfileLink () {
	return this.generateUserProfileLink(this.user)
	},
	targetUser () {
	return this.$store.getters.findUser(this.notification.target.id)
	},
	targetUserProfileLink () {
	return this.generateUserProfileLink(this.targetUser)
	},
	needMute () {
	return this.$store.getters.relationship(this.user.id).muting
	},
	isStatusNotification () {
	return isStatusNotification(this.notification.type)
	},
	...mapState({
	currentUser: state => state.users.currentUser
	})
	}
	}

	export default Notification
	diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
	index d0e63d81..f5905560 100644
	--- a/src/components/notification/notification.scss
	+++ b/src/components/notification/notification.scss
	@@ -1,52 +1,84 @@
	+@import '../../_variables.scss';
	+
	// TODO Copypaste from Status, should unify it somehow
	.Notification {
	&.-muted {
	padding: 0.25em 0.6em;
	height: 1.2em;
	line-height: 1.2em;
	text-overflow: ellipsis;
	overflow: hidden;
	display: flex;
	flex-wrap: nowrap;

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

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

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

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

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

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

	.unmute {
	flex: 0 0 auto;
	margin-left: auto;
	display: block;
	}
	}
	+
	+ .type-icon {
	+ margin: 0 0.1em;
	+ }
	+
	+ &.-type--repeat .type-icon {
	+ color: $fallback--cGreen;
	+ color: var(--cGreen, $fallback--cGreen);
	+ }
	+
	+ &.-type--follow .type-icon {
	+ color: $fallback--cBlue;
	+ color: var(--cBlue, $fallback--cBlue);
	+ }
	+
	+ &.-type--follow-request .type-icon {
	+ color: $fallback--cBlue;
	+ color: var(--cBlue, $fallback--cBlue);
	+ }
	+
	+ &.-type--like .type-icon {
	+ color: orange;
	+ color: $fallback--cOrange;
	+ color: var(--cOrange, $fallback--cOrange);
	+ }
	+
	+ &.-type--move .type-icon {
	+ color: $fallback--cBlue;
	+ color: var(--cBlue, $fallback--cBlue);
	+ }
	}
	diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
	index 7fac3840..857727a4 100644
	--- a/src/components/notification/notification.vue
	+++ b/src/components/notification/notification.vue
	@@ -1,171 +1,173 @@
	<template>
	- <status
	+ <Status
	v-if="notification.type === 'mention'"
	:compact="true"
	:statusoid="notification.status"
	/>
	<div v-else>
	<div
	v-if="needMute && !unmuted"
	class="Notification container -muted"
	>
	<small>
	<router-link :to="userProfileLink">
	{{ notification.from_profile.screen_name }}
	</router-link>
	</small>
	<a
	href="#"
	class="unmute"
	@click.prevent="toggleMute"
	- ><i class="button-icon icon-eye-off" /></a>
	+ ><FAIcon class="button-icon" icon="eye-slash" /></a>
	</div>
	<div
	v-else
	- class="non-mention"
	- :class="[userClass, { highlighted: userStyle }]"
	+ class="Notification non-mention"
	+ :class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
	:style="[ userStyle ]"
	>
	<a
	class="avatar-container"
	:href="notification.from_profile.statusnet_profile_url"
	@click.stop.prevent.capture="toggleUserExpanded"
	>
	<UserAvatar
	:compact="true"
	:better-shadow="betterShadow"
	:user="notification.from_profile"
	/>
	</a>
	<div class="notification-right">
	<UserCard
	v-if="userExpanded"
	:user-id="getUser(notification).id"
	:rounded="true"
	:bordered="true"
	/>
	<span class="notification-details">
	<div class="name-and-action">
	<!-- eslint-disable vue/no-v-html -->
	<bdi
	v-if="!!notification.from_profile.name_html"
	class="username"
	:title="'@'+notification.from_profile.screen_name"
	v-html="notification.from_profile.name_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<span
	v-else
	class="username"
	:title="'@'+notification.from_profile.screen_name"
	>{{ notification.from_profile.name }}</span>
	<span v-if="notification.type === 'like'">
	- <i class="fa icon-star lit" />
	+ <FAIcon class="type-icon" icon="star" />
	<small>{{ $t('notifications.favorited_you') }}</small>
	</span>
	<span v-if="notification.type === 'repeat'">
	- <i
	- class="fa icon-retweet lit"
	+ <FAIcon
	+ class="type-icon" icon="retweet"
	:title="$t('tool_tip.repeat')"
	/>
	<small>{{ $t('notifications.repeated_you') }}</small>
	</span>
	<span v-if="notification.type === 'follow'">
	- <i class="fa icon-user-plus lit" />
	+ <FAIcon class="type-icon" icon="user-plus" />
	<small>{{ $t('notifications.followed_you') }}</small>
	</span>
	<span v-if="notification.type === 'follow_request'">
	- <i class="fa icon-user lit" />
	+ <FAIcon class="type-icon" icon="user" />
	<small>{{ $t('notifications.follow_request') }}</small>
	</span>
	<span v-if="notification.type === 'move'">
	- <i class="fa icon-arrow-curved lit" />
	+ <FAIcon class="type-icon" icon="suitcase-rolling" />
	<small>{{ $t('notifications.migrated_to') }}</small>
	</span>
	<span v-if="notification.type === 'pleroma:emoji_reaction'">
	<small>
	<i18n path="notifications.reacted_with">
	<span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
	</i18n>
	</small>
	</span>
	</div>
	<div
	v-if="isStatusNotification"
	class="timeago"
	>
	<router-link
	v-if="notification.status"
	:to="{ name: 'conversation', params: { id: notification.status.id } }"
	class="faint-link"
	>
	<Timeago
	:time="notification.created_at"
	:auto-update="240"
	/>
	</router-link>
	</div>
	<div
	v-else
	class="timeago"
	>
	<span class="faint">
	<Timeago
	:time="notification.created_at"
	:auto-update="240"
	/>
	</span>
	</div>
	<a
	v-if="needMute"
	href="#"
	@click.prevent="toggleMute"
	- ><i class="button-icon icon-eye-off" /></a>
	+ ><FAIcon class="button-icon" icon="eye-slash" /></a>
	</span>
	<div
	v-if="notification.type === 'follow' \|\| notification.type === 'follow_request'"
	class="follow-text"
	>
	<router-link
	:to="userProfileLink"
	class="follow-name"
	>
	@{{ notification.from_profile.screen_name }}
	</router-link>
	<div
	v-if="notification.type === 'follow_request'"
	style="white-space: nowrap;"
	>
	- <i
	- class="icon-ok button-icon follow-request-accept"
	+ <FAIcon
	+ icon="check"
	+ class="button-icon follow-request-accept"
	:title="$t('tool_tip.accept_follow_request')"
	@click="approveUser()"
	/>
	- <i
	- class="icon-cancel button-icon follow-request-reject"
	+ <FAIcon
	+ icon="times"
	+ class="button-icon follow-request-reject"
	:title="$t('tool_tip.reject_follow_request')"
	@click="denyUser()"
	/>
	</div>
	</div>
	<div
	v-else-if="notification.type === 'move'"
	class="move-text"
	>
	<router-link :to="targetUserProfileLink">
	@{{ notification.target.screen_name }}
	</router-link>
	</div>
	<template v-else>
	<status-content
	class="faint"
	:status="notification.action"
	/>
	</template>
	</div>
	</div>
	</div>
	</template>

	<script src="./notification.js"></script>
	<style src="./notification.scss" lang="scss"></style>
	diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
	index d951e2a8..4b479e13 100644
	--- a/src/components/notifications/notifications.js
	+++ b/src/components/notifications/notifications.js
	@@ -1,114 +1,120 @@
	import { mapGetters } from 'vuex'
	import Notification from '../notification/notification.vue'
	import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
	import {
	notificationsFromStore,
	filteredNotificationsFromStore,
	unseenNotificationsFromStore
	} from '../../services/notification_utils/notification_utils.js'
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faCircleNotch
	+)

	const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30

	const Notifications = {
	props: {
	// Disables display of panel header
	noHeading: Boolean,
	// Disables panel styles, unread mark, potentially other notification-related actions
	// meant for "Interactions" timeline
	minimalMode: Boolean,
	// Custom filter mode, an array of strings, possible values 'mention', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
	filterMode: Array
	},
	data () {
	return {
	bottomedOut: false,
	// How many seen notifications to display in the list. The more there are,
	// the heavier the page becomes. This count is increased when loading
	// older notifications, and cut back to default whenever hitting "Read!".
	seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT
	}
	},
	created () {
	const store = this.$store
	const credentials = store.state.users.currentUser.credentials
	notificationsFetcher.fetchAndUpdate({ store, credentials })
	},
	computed: {
	mainClass () {
	return this.minimalMode ? '' : 'panel panel-default'
	},
	notifications () {
	return notificationsFromStore(this.$store)
	},
	error () {
	return this.$store.state.statuses.notifications.error
	},
	unseenNotifications () {
	return unseenNotificationsFromStore(this.$store)
	},
	filteredNotifications () {
	return filteredNotificationsFromStore(this.$store, this.filterMode)
	},
	unseenCount () {
	return this.unseenNotifications.length
	},
	unseenCountTitle () {
	return this.unseenCount + (this.unreadChatCount)
	},
	loading () {
	return this.$store.state.statuses.notifications.loading
	},
	notificationsToDisplay () {
	return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
	},
	...mapGetters(['unreadChatCount'])
	},
	components: {
	Notification
	},
	watch: {
	unseenCountTitle (count) {
	if (count > 0) {
	this.$store.dispatch('setPageTitle', `(${count})`)
	} else {
	this.$store.dispatch('setPageTitle', '')
	}
	}
	},
	methods: {
	markAsSeen () {
	this.$store.dispatch('markNotificationsAsSeen')
	this.seenToDisplayCount = DEFAULT_SEEN_TO_DISPLAY_COUNT
	},
	fetchOlderNotifications () {
	if (this.loading) {
	return
	}

	const seenCount = this.filteredNotifications.length - this.unseenCount
	if (this.seenToDisplayCount < seenCount) {
	this.seenToDisplayCount = Math.min(this.seenToDisplayCount + 20, seenCount)
	return
	} else if (this.seenToDisplayCount > seenCount) {
	this.seenToDisplayCount = seenCount
	}

	const store = this.$store
	const credentials = store.state.users.currentUser.credentials
	store.commit('setNotificationsLoading', { value: true })
	notificationsFetcher.fetchAndUpdate({
	store,
	credentials,
	older: true
	}).then(notifs => {
	store.commit('setNotificationsLoading', { value: false })
	if (notifs.length === 0) {
	this.bottomedOut = true
	}
	this.seenToDisplayCount += notifs.length
	})
	}
	}
	}

	export default Notifications
	diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
	index c6b2a5b5..682ae127 100644
	--- a/src/components/notifications/notifications.scss
	+++ b/src/components/notifications/notifications.scss
	@@ -1,214 +1,183 @@
	@import '../../_variables.scss';

	.notifications {
	&:not(.minimal) {
	// a bit of a hack to allow scrolling below notifications
	padding-bottom: 15em;
	}

	.loadmore-error {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}

	.notification {
	position: relative;

	.notification-overlay {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	pointer-events: none;
	}

	&.unseen {
	.notification-overlay {
	background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px)
	}
	}
	}
	}

	.notification {
	box-sizing: border-box;
	border-bottom: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	word-wrap: break-word;
	word-break: break-word;

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

	.non-mention {
	display: flex;
	flex: 1;
	flex-wrap: nowrap;
	padding: 0.6em;
	min-width: 0;

	.avatar-container {
	width: 32px;
	height: 32px;
	}

	--link: var(--faintLink);
	--text: var(--faint);
	}

	.follow-request-accept {
	cursor: pointer;

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

	.follow-request-reject {
	cursor: pointer;

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


	.follow-text, .move-text {
	padding: 0.5em 0;
	overflow-wrap: break-word;
	display: flex;
	justify-content: space-between;

	.follow-name {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	}

	/* TODO cleanup this */
	.Status {
	flex: 1;
	}

	time {
	white-space: nowrap;
	}

	.notification-right {
	flex: 1;
	padding-left: 0.8em;
	min-width: 0;

	.timeago {
	min-width: 3em;
	text-align: right;
	}
	}

	.emoji-reaction-emoji {
	font-size: 16px;
	}

	.notification-details {
	min-width: 0px;
	word-wrap: break-word;
	line-height:18px;
	position: relative;
	overflow: hidden;
	width: 100%;
	flex: 1 1 0;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;

	.name-and-action {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	.username {
	font-weight: bolder;
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;

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

	.timeago {
	margin-right: .2em;
	}

	- .icon-retweet.lit {
	- color: $fallback--cGreen;
	- color: var(--cGreen, $fallback--cGreen);
	- }
	-
	- .icon-user.lit {
	- color: $fallback--cBlue;
	- color: var(--cBlue, $fallback--cBlue);
	- }
	-
	- .icon-user-plus.lit {
	- color: $fallback--cBlue;
	- color: var(--cBlue, $fallback--cBlue);
	- }
	-
	- .icon-reply.lit {
	- color: $fallback--cBlue;
	- color: var(--cBlue, $fallback--cBlue);
	- }
	-
	- .icon-star.lit {
	- color: orange;
	- color: $fallback--cOrange;
	- color: var(--cOrange, $fallback--cOrange);
	- }
	-
	- .icon-arrow-curved.lit {
	- color: $fallback--cBlue;
	- color: var(--cBlue, $fallback--cBlue);
	- }
	-
	.status-content {
	margin: 0;
	max-height: 300px;
	}

	h1 {
	word-break: break-all;
	margin: 0 0 0.3em;
	padding: 0;
	font-size: 1em;
	line-height:20px;
	small {
	font-weight: lighter;
	}
	}

	p {
	margin: 0;
	margin-top: 0;
	margin-bottom: 0.3em;
	}
	}
	}
	diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
	index d477a41b..57972854 100644
	--- a/src/components/notifications/notifications.vue
	+++ b/src/components/notifications/notifications.vue
	@@ -1,72 +1,72 @@
	<template>
	<div
	:class="{ minimal: minimalMode }"
	class="notifications"
	>
	<div :class="mainClass">
	<div
	v-if="!noHeading"
	class="panel-heading"
	>
	<div class="title">
	{{ $t('notifications.notifications') }}
	<span
	v-if="unseenCount"
	class="badge badge-notification unseen-count"
	>{{ unseenCount }}</span>
	</div>
	<div
	v-if="error"
	class="loadmore-error alert error"
	@click.prevent
	>
	{{ $t('timeline.error_fetching') }}
	</div>
	<button
	v-if="unseenCount"
	class="read-button"
	@click.prevent="markAsSeen"
	>
	{{ $t('notifications.read') }}
	</button>
	</div>
	<div class="panel-body">
	<div
	v-for="notification in notificationsToDisplay"
	:key="notification.id"
	class="notification"
	:class="{"unseen": !minimalMode && !notification.seen}"
	>
	<div class="notification-overlay" />
	<notification :notification="notification" />
	</div>
	</div>
	<div class="panel-footer">
	<div
	v-if="bottomedOut"
	class="new-status-notification text-center panel-footer faint"
	>
	{{ $t('notifications.no_more_notifications') }}
	</div>
	<a
	v-else-if="!loading"
	href="#"
	@click.prevent="fetchOlderNotifications()"
	>
	<div class="new-status-notification text-center panel-footer">
	{{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
	</div>
	</a>
	<div
	v-else
	class="new-status-notification text-center panel-footer"
	>
	- <i class="icon-spin3 animate-spin" />
	+ <FAIcon icon="circle-notch" spin size="lg"/>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script src="./notifications.js"></script>
	<style lang="scss" src="./notifications.scss"></style>
	diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
	index 4efebb3c..9bf3ab32 100644
	--- a/src/components/panel_loading/panel_loading.vue
	+++ b/src/components/panel_loading/panel_loading.vue
	@@ -1,29 +1,37 @@
	<template>
	<div class="panel-loading">
	<span class="loading-text">
	- <i class="icon-spin4 animate-spin" />
	+ <FAIcon icon="circle-notch" spin size="3x"/>
	{{ $t('general.loading') }}
	</span>
	</div>
	</template>

	+<script>
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faCircleNotch
	+)
	+</script>
	+
	<style lang="scss">
	@import 'src/_variables.scss';

	.panel-loading {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	font-size: 2em;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	- .loading-text i {
	- font-size: 3em;
	+ .loading-text svg {
	line-height: 0;
	vertical-align: middle;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}
	</style>
	diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
	index 5c99c509..9b8680e5 100644
	--- a/src/components/popover/popover.vue
	+++ b/src/components/popover/popover.vue
	@@ -1,121 +1,121 @@
	<template>
	<div
	@mouseenter="onMouseenter"
	@mouseleave="onMouseleave"
	>
	<div
	ref="trigger"
	@click="onClick"
	>
	<slot name="trigger" />
	</div>
	<div
	v-if="!hidden"
	ref="content"
	:style="styles"
	class="popover"
	:class="popoverClass \|\| 'popover-default'"
	>
	<slot
	name="content"
	class="popover-inner"
	:close="hidePopover"
	/>
	</div>
	</div>
	</template>

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

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

	.popover {
	z-index: 8;
	position: absolute;
	min-width: 0;
	}

	.popover-default {
	transition: opacity 0.3s;

	box-shadow: 1px 1px 4px rgba(0,0,0,.6);
	box-shadow: var(--panelShadow);
	border-radius: $fallback--btnRadius;
	border-radius: var(--btnRadius, $fallback--btnRadius);

	background-color: $fallback--bg;
	background-color: var(--popover, $fallback--bg);
	color: $fallback--text;
	color: var(--popoverText, $fallback--text);
	--faint: var(--popoverFaintText, $fallback--faint);
	--faintLink: var(--popoverFaintLink, $fallback--faint);
	--lightText: var(--popoverLightText, $fallback--lightText);
	--postLink: var(--popoverPostLink, $fallback--link);
	--postFaintLink: var(--popoverPostFaintLink, $fallback--link);
	--icon: var(--popoverIcon, $fallback--icon);
	}

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

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

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

	--btnText: var(--popoverText, $fallback--text);

	&-icon {
	padding-left: 0.5rem;

	- i {
	+ svg {
	margin-right: 0.25rem;
	color: var(--menuPopoverIcon, $fallback--icon)
	}
	}

	&:active, &:hover {
	background-color: $fallback--lightBg;
	background-color: var(--selectedMenuPopover, $fallback--lightBg);
	color: $fallback--link;
	color: var(--selectedMenuPopoverText, $fallback--link);
	--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
	--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
	- i {
	+ svg {
	color: var(--selectedMenuPopoverIcon, $fallback--icon);
	}
	}

	}
	}
	</style>
	diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
	index 34efdc00..ddb20ff2 100644
	--- a/src/components/scope_selector/scope_selector.js
	+++ b/src/components/scope_selector/scope_selector.js
	@@ -1,69 +1,69 @@
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faEnvelope,
	faLock,
	- faLockOpen,
	+ faUnlock,
	faGlobeEurope
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faEnvelope,
	faGlobeEurope,
	faLock,
	- faLockOpen
	+ faUnlock
	)

	const ScopeSelector = {
	props: [
	'showAll',
	'userDefault',
	'originalScope',
	'initialScope',
	'onScopeChange'
	],
	data () {
	return {
	currentScope: this.initialScope
	}
	},
	computed: {
	showNothing () {
	return !this.showPublic && !this.showUnlisted && !this.showPrivate && !this.showDirect
	},
	showPublic () {
	return this.originalScope !== 'direct' && this.shouldShow('public')
	},
	showUnlisted () {
	return this.originalScope !== 'direct' && this.shouldShow('unlisted')
	},
	showPrivate () {
	return this.originalScope !== 'direct' && this.shouldShow('private')
	},
	showDirect () {
	return this.shouldShow('direct')
	},
	css () {
	return {
	public: { selected: this.currentScope === 'public' },
	unlisted: { selected: this.currentScope === 'unlisted' },
	private: { selected: this.currentScope === 'private' },
	direct: { selected: this.currentScope === 'direct' }
	}
	}
	},
	methods: {
	shouldShow (scope) {
	return this.showAll \|\|
	this.currentScope === scope \|\|
	this.originalScope === scope \|\|
	this.userDefault === scope \|\|
	scope === 'direct'
	},
	changeVis (scope) {
	this.currentScope = scope
	this.onScopeChange && this.onScopeChange(scope)
	}
	}
	}

	export default ScopeSelector
	diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
	index 5b9abd64..ddd89422 100644
	--- a/src/components/scope_selector/scope_selector.vue
	+++ b/src/components/scope_selector/scope_selector.vue
	@@ -1,65 +1,65 @@
	<template>
	<div
	v-if="!showNothing"
	class="ScopeSelector"
	>
	<span
	v-if="showDirect"
	class="scope"
	:class="css.direct"
	:title="$t('post_status.scope.direct')"
	@click="changeVis('direct')"
	>
	<FAIcon icon="envelope" class="button-icon" size="lg" />
	</span>
	<span
	class="scope"
	v-if="showPrivate"
	:class="css.private"
	:title="$t('post_status.scope.private')"
	@click="changeVis('private')"
	>
	<FAIcon icon="lock" class="button-icon" size="lg" />
	</span>
	<span
	v-if="showUnlisted"
	class="scope"
	:class="css.unlisted"
	:title="$t('post_status.scope.unlisted')"
	@click="changeVis('unlisted')"
	>
	- <FAIcon icon="lock-open" class="button-icon" size="lg" />
	+ <FAIcon icon="unlock" class="button-icon" size="lg" />
	</span>
	<span
	v-if="showPublic"
	class="scope"
	:class="css.public"
	:title="$t('post_status.scope.public')"
	@click="changeVis('public')"
	>
	<FAIcon icon="globe-europe" class="button-icon" size="lg" />
	</span>
	</div>
	</template>

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

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

	.ScopeSelector {

	.scope {
	display: inline-block;
	cursor: pointer;
	min-width: 1.3em;
	min-height: 1.3em;
	text-align: center;

	&.selected svg {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	}
	}
	</style>
	diff --git a/src/components/search/search.js b/src/components/search/search.js
	index 8e903052..3eb92fc1 100644
	--- a/src/components/search/search.js
	+++ b/src/components/search/search.js
	@@ -1,98 +1,104 @@
	import FollowCard from '../follow_card/follow_card.vue'
	import Conversation from '../conversation/conversation.vue'
	import Status from '../status/status.vue'
	import map from 'lodash/map'
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faCircleNotch
	+)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	.loading-icon {
	padding: 1em;
	}

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

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

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

	</style>
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index f7a0ff83..5b93054f 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,352 +1,348 @@
	import ReplyButton from '../reply_button/reply_button.vue'
	import FavoriteButton from '../favorite_button/favorite_button.vue'
	import ReactButton from '../react_button/react_button.vue'
	import RetweetButton from '../retweet_button/retweet_button.vue'
	import ExtraButtons from '../extra_buttons/extra_buttons.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	import UserCard from '../user_card/user_card.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import AvatarList from '../avatar_list/avatar_list.vue'
	import Timeago from '../timeago/timeago.vue'
	import StatusContent from '../status_content/status_content.vue'
	import StatusPopover from '../status_popover/status_popover.vue'
	import UserListPopover from '../user_list_popover/user_list_popover.vue'
	import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
	import { muteWordHits } from '../../services/status_parser/status_parser.js'
	import { unescape, uniqBy } from 'lodash'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faEnvelope,
	faLock,
	- faLockOpen,
	+ faUnlock,
	faGlobeEurope,
	faTimes,
	faRetweet,
	faReply,
	faExternalLinkSquareAlt,
	faPlusSquare,
	faSmileBeam,
	faEllipsisH,
	faStar,
	faEyeSlash,
	faEye,
	faThumbtack
	} from '@fortawesome/free-solid-svg-icons'
	-import {
	- faStar as faStarRegular
	-} from '@fortawesome/free-regular-svg-icons'

	library.add(
	faEnvelope,
	faGlobeEurope,
	faLock,
	- faLockOpen,
	+ faUnlock,
	faTimes,
	faRetweet,
	faReply,
	faExternalLinkSquareAlt,
	faPlusSquare,
	faStar,
	- faStarRegular,
	faSmileBeam,
	faEllipsisH,
	faEyeSlash,
	faEye,
	faThumbtack
	)

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

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

	export default Status
	diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
	index 51e7680c..c47f5631 100644
	--- a/src/components/status_popover/status_popover.js
	+++ b/src/components/status_popover/status_popover.js
	@@ -1,37 +1,43 @@
	import { find } from 'lodash'
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faCircleNotch
	+)

	const StatusPopover = {
	name: 'StatusPopover',
	props: [
	'statusId'
	],
	data () {
	return {
	error: false
	}
	},
	computed: {
	status () {
	return find(this.$store.state.statuses.allStatuses, { id: this.statusId })
	}
	},
	components: {
	Status: () => import('../status/status.vue'),
	Popover: () => import('../popover/popover.vue')
	},
	methods: {
	enter () {
	if (!this.status) {
	if (!this.statusId) {
	this.error = true
	return
	}
	this.$store.dispatch('fetchStatus', this.statusId)
	.then(data => (this.error = false))
	.catch(e => (this.error = true))
	}
	}
	}
	}

	export default StatusPopover
	diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
	index 162eb210..f6432687 100644
	--- a/src/components/status_popover/status_popover.vue
	+++ b/src/components/status_popover/status_popover.vue
	@@ -1,71 +1,71 @@
	<template>
	<Popover
	trigger="hover"
	popover-class="popover-default status-popover"
	:bound-to="{ x: 'container' }"
	@show="enter"
	>
	<template slot="trigger">
	<slot />
	</template>
	<div
	slot="content"
	>
	<Status
	v-if="status"
	:is-preview="true"
	:statusoid="status"
	:compact="true"
	/>
	<div
	v-else-if="error"
	class="status-preview-no-content faint"
	>
	{{ $t('status.status_unavailable') }}
	</div>
	<div
	v-else
	class="status-preview-no-content"
	>
	- <i class="icon-spin4 animate-spin" />
	+ <FAIcon icon="circle-notch" spin size="2x"/>
	</div>
	</div>
	</Popover>
	</template>

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

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

	/* popover styles load on-demand, so we need to override */
	.status-popover.popover {
	font-size: 1rem;
	min-width: 15em;
	max-width: 95%;

	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	border-style: solid;
	border-width: 1px;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
	box-shadow: var(--popupShadow);

	/* TODO cleanup this */
	.Status.Status {
	border: none;
	}

	.status-preview-no-content {
	padding: 1em;
	text-align: center;

	i {
	font-size: 2em;
	}
	}
	}

	</style>
	diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
	index 17680542..a443340f 100644
	--- a/src/components/timeline/timeline.js
	+++ b/src/components/timeline/timeline.js
	@@ -1,242 +1,248 @@
	import Status from '../status/status.vue'
	import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
	import Conversation from '../conversation/conversation.vue'
	import TimelineMenu from '../timeline_menu/timeline_menu.vue'
	import { throttle, keyBy } from 'lodash'
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faCircleNotch
	+)

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

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

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

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

	timelineFetcher.fetchAndUpdate({
	store,
	credentials,
	timeline: this.timelineName,
	showImmediately,
	userId: this.userId,
	tag: this.tag
	})
	},
	mounted () {
	if (typeof document.hidden !== 'undefined') {
	document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
	this.unfocused = document.hidden
	}
	window.addEventListener('keydown', this.handleShortKey)
	setTimeout(this.determineVisibleStatuses, 250)
	},
	destroyed () {
	window.removeEventListener('scroll', this.handleScroll)
	window.removeEventListener('keydown', this.handleShortKey)
	if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
	this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
	},
	methods: {
	handleShortKey (e) {
	// Ignore when input fields are focused
	if (['textarea', 'input'].includes(e.target.tagName.toLowerCase())) return
	if (e.key === '.') this.showNewStatuses()
	},
	showNewStatuses () {
	if (this.timeline.flushMarker !== 0) {
	this.$store.commit('clearTimeline', { timeline: this.timelineName, excludeUserId: true })
	this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
	this.fetchOlderStatuses()
	} else {
	this.$store.commit('showNewStatuses', { timeline: this.timelineName })
	this.paused = false
	}
	},
	fetchOlderStatuses: throttle(function () {
	const store = this.$store
	const credentials = store.state.users.currentUser.credentials
	store.commit('setLoading', { timeline: this.timelineName, value: true })
	timelineFetcher.fetchAndUpdate({
	store,
	credentials,
	timeline: this.timelineName,
	older: true,
	showImmediately: true,
	userId: this.userId,
	tag: this.tag
	}).then(({ statuses }) => {
	store.commit('setLoading', { timeline: this.timelineName, value: false })
	if (statuses && statuses.length === 0) {
	this.bottomedOut = true
	}
	})
	}, 1000, this),
	determineVisibleStatuses () {
	if (!this.$refs.timeline) return
	if (!this.virtualScrollingEnabled) return

	const statuses = this.$refs.timeline.children
	const cappedScrollIndex = Math.max(0, Math.min(this.virtualScrollIndex, statuses.length - 1))

	if (statuses.length === 0) return

	const height = Math.max(document.body.offsetHeight, window.pageYOffset)

	const centerOfScreen = window.pageYOffset + (window.innerHeight * 0.5)

	// Start from approximating the index of some visible status by using the
	// the center of the screen on the timeline.
	let approxIndex = Math.floor(statuses.length * (centerOfScreen / height))
	let err = statuses[approxIndex].getBoundingClientRect().y

	// if we have a previous scroll index that can be used, test if it's
	// closer than the previous approximation, use it if so

	const virtualScrollIndexY = statuses[cappedScrollIndex].getBoundingClientRect().y
	if (Math.abs(err) > virtualScrollIndexY) {
	approxIndex = cappedScrollIndex
	err = virtualScrollIndexY
	}

	// if the status is too far from viewport, check the next/previous ones if
	// they happen to be better
	while (err < -20 && approxIndex < statuses.length - 1) {
	err += statuses[approxIndex].offsetHeight
	approxIndex++
	}
	while (err > window.innerHeight + 100 && approxIndex > 0) {
	approxIndex--
	err -= statuses[approxIndex].offsetHeight
	}

	// this status is now the center point for virtual scrolling and visible
	// statuses will be nearby statuses before and after it
	this.virtualScrollIndex = approxIndex
	},
	scrollLoad (e) {
	const bodyBRect = document.body.getBoundingClientRect()
	const height = Math.max(bodyBRect.height, -(bodyBRect.y))
	if (this.timeline.loading === false &&
	this.$el.offsetHeight > 0 &&
	(window.innerHeight + window.pageYOffset) >= (height - 750)) {
	this.fetchOlderStatuses()
	}
	},
	handleScroll: throttle(function (e) {
	this.determineVisibleStatuses()
	this.scrollLoad(e)
	}, 200),
	handleVisibilityChange () {
	this.unfocused = document.hidden
	}
	},
	watch: {
	newStatusCount (count) {
	if (!this.$store.getters.mergedConfig.streaming) {
	return
	}
	if (count > 0) {
	// only 'stream' them when you're scrolled to the top
	const doc = document.documentElement
	const top = (window.pageYOffset \|\| doc.scrollTop) - (doc.clientTop \|\| 0)
	if (top < 15 &&
	!this.paused &&
	!(this.unfocused && this.$store.getters.mergedConfig.pauseOnUnfocused)
	) {
	this.showNewStatuses()
	} else {
	this.paused = true
	}
	}
	}
	}
	}

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

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

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

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

	.timeline-heading {
	max-width: 100%;
	flex-wrap: nowrap;
	.loadmore-button {
	flex-shrink: 0;
	}
	.loadmore-text {
	flex-shrink: 0;
	line-height: 1em;
	}
	}
	</style>
	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	index 8e6b9d7f..3a8efafc 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,152 +1,168 @@
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import RemoteFollow from '../remote_follow/remote_follow.vue'
	import ProgressButton from '../progress_button/progress_button.vue'
	import FollowButton from '../follow_button/follow_button.vue'
	import ModerationTools from '../moderation_tools/moderation_tools.vue'
	import AccountActions from '../account_actions/account_actions.vue'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { mapGetters } from 'vuex'
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import {
	+ faBell,
	+ faRss,
	+ faChevronDown,
	+ faSearchPlus,
	+ faExternalLinkAlt
	+} from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faRss,
	+ faBell,
	+ faChevronDown,
	+ faSearchPlus,
	+ faExternalLinkAlt
	+)

	export default {
	props: [
	'userId', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar'
	],
	data () {
	return {
	followRequestInProgress: false,
	betterShadow: this.$store.state.interface.browserSupport.cssFilter
	}
	},
	created () {
	this.$store.dispatch('fetchUserRelationship', this.user.id)
	},
	computed: {
	user () {
	return this.$store.getters.findUser(this.userId)
	},
	relationship () {
	return this.$store.getters.relationship(this.userId)
	},
	classes () {
	return [{
	'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
	'user-card-rounded': this.rounded === true, // set border-radius for all sides
	'user-card-bordered': this.bordered === true // set border for all sides
	}]
	},
	style () {
	return {
	backgroundImage: [
	`linear-gradient(to bottom, var(--profileTint), var(--profileTint))`,
	`url(${this.user.cover_photo})`
	].join(', ')
	}
	},
	isOtherUser () {
	return this.user.id !== this.$store.state.users.currentUser.id
	},
	subscribeUrl () {
	// eslint-disable-next-line no-undef
	const serverUrl = new URL(this.user.statusnet_profile_url)
	return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
	},
	loggedIn () {
	return this.$store.state.users.currentUser
	},
	dailyAvg () {
	const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
	return Math.round(this.user.statuses_count / days)
	},
	userHighlightType: {
	get () {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return (data && data.type) \|\| 'disabled'
	},
	set (type) {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	if (type !== 'disabled') {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) \|\| '#FFFFFF', type })
	} else {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
	}
	},
	...mapGetters(['mergedConfig'])
	},
	userHighlightColor: {
	get () {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return data && data.color
	},
	set (color) {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
	}
	},
	visibleRole () {
	const rights = this.user.rights
	if (!rights) { return }
	const validRole = rights.admin \|\| rights.moderator
	const roleTitle = rights.admin ? 'admin' : 'moderator'
	return validRole && roleTitle
	},
	hideFollowsCount () {
	return this.isOtherUser && this.user.hide_follows_count
	},
	hideFollowersCount () {
	return this.isOtherUser && this.user.hide_followers_count
	},
	...mapGetters(['mergedConfig'])
	},
	components: {
	UserAvatar,
	RemoteFollow,
	ModerationTools,
	AccountActions,
	ProgressButton,
	FollowButton
	},
	methods: {
	muteUser () {
	this.$store.dispatch('muteUser', this.user.id)
	},
	unmuteUser () {
	this.$store.dispatch('unmuteUser', this.user.id)
	},
	subscribeUser () {
	return this.$store.dispatch('subscribeUser', this.user.id)
	},
	unsubscribeUser () {
	return this.$store.dispatch('unsubscribeUser', this.user.id)
	},
	setProfileView (v) {
	if (this.switcher) {
	const store = this.$store
	store.commit('setProfileView', { v })
	}
	},
	linkClicked ({ target }) {
	if (target.tagName === 'SPAN') {
	target = target.parentNode
	}
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	},
	userProfileLink (user) {
	return generateProfileLink(
	user.id, user.screen_name,
	this.$store.state.instance.restrictedNicknames
	)
	},
	zoomAvatar () {
	const attachment = {
	url: this.user.profile_image_url_original,
	mimetype: 'image'
	}
	this.$store.dispatch('setMedia', [attachment])
	this.$store.dispatch('setCurrent', attachment)
	},
	mentionUser () {
	this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
	}
	}
	}
	diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
	index 041bb80f..cfdeaa17 100644
	--- a/src/components/user_card/user_card.vue
	+++ b/src/components/user_card/user_card.vue
	@@ -1,574 +1,584 @@
	<template>
	<div
	class="user-card"
	:class="classes"
	>
	<div
	:class="{ 'hide-bio': hideBio }"
	:style="style"
	class="background-image"
	/>
	<div class="panel-heading">
	<div class="user-info">
	<div class="container">
	<a
	v-if="allowZoomingAvatar"
	class="user-info-avatar-link"
	@click="zoomAvatar"
	>
	<UserAvatar
	:better-shadow="betterShadow"
	:user="user"
	/>
	<div class="user-info-avatar-link-overlay">
	- <i class="button-icon icon-zoom-in" />
	+ <FAIcon class="button-icon" icon="search-plus" size="lg" />
	</div>
	</a>
	<router-link
	v-else
	:to="userProfileLink(user)"
	>
	<UserAvatar
	:better-shadow="betterShadow"
	:user="user"
	/>
	</router-link>
	<div class="user-summary">
	<div class="top-line">
	<!-- eslint-disable vue/no-v-html -->
	<div
	v-if="user.name_html"
	:title="user.name"
	class="user-name"
	v-html="user.name_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<div
	v-else
	:title="user.name"
	class="user-name"
	>
	{{ user.name }}
	</div>
	<a
	v-if="isOtherUser && !user.is_local"
	:href="user.statusnet_profile_url"
	target="_blank"
	>
	- <i class="icon-link-ext usersettings" />
	+ <FAIcon class="usersettings" icon="external-link-alt" />
	</a>
	<AccountActions
	v-if="isOtherUser && loggedIn"
	:user="user"
	:relationship="relationship"
	/>
	</div>
	<div class="bottom-line">
	<router-link
	class="user-screen-name"
	:title="user.screen_name"
	:to="userProfileLink(user)"
	>
	@{{ user.screen_name }}
	</router-link>
	<template v-if="!hideBio">
	<span
	v-if="!!visibleRole"
	class="alert user-role"
	>
	{{ visibleRole }}
	</span>
	<span
	v-if="user.bot"
	class="alert user-role"
	>
	bot
	</span>
	</template>
	- <span v-if="user.locked"><i class="icon icon-lock" /></span>
	+ <span v-if="user.locked">
	+ <FAIcon class="lock-icon" icon="lock" size="sm"/>
	+ </span>
	<span
	v-if="!mergedConfig.hideUserStats && !hideBio"
	class="dailyAvg"
	>{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
	</div>
	</div>
	</div>
	<div class="user-meta">
	<div
	v-if="relationship.followed_by && loggedIn && isOtherUser"
	class="following"
	>
	{{ $t('user_card.follows_you') }}
	</div>
	<div
	v-if="isOtherUser && (loggedIn \|\| !switcher)"
	class="highlighter"
	>
	<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
	<input
	v-if="userHighlightType !== 'disabled'"
	:id="'userHighlightColorTx'+user.id"
	v-model="userHighlightColor"
	class="userHighlightText"
	type="text"
	>
	<input
	v-if="userHighlightType !== 'disabled'"
	:id="'userHighlightColor'+user.id"
	v-model="userHighlightColor"
	class="userHighlightCl"
	type="color"
	>
	<label
	for="theme_tab"
	class="userHighlightSel select"
	>
	<select
	:id="'userHighlightSel'+user.id"
	v-model="userHighlightType"
	class="userHighlightSel"
	>
	<option value="disabled">No highlight</option>
	<option value="solid">Solid bg</option>
	<option value="striped">Striped bg</option>
	<option value="side">Side stripe</option>
	</select>
	- <i class="icon-down-open" />
	+ <FAIcon class="icon-down-open" icon="chevron-down" />
	</label>
	</div>
	</div>
	<div
	v-if="loggedIn && isOtherUser"
	class="user-interactions"
	>
	<div class="btn-group">
	<FollowButton :relationship="relationship" />
	<template v-if="relationship.following">
	<ProgressButton
	v-if="!relationship.subscribing"
	class="btn btn-default"
	:click="subscribeUser"
	:title="$t('user_card.subscribe')"
	>
	- <i class="icon-bell-alt" />
	+ <FAIcon icon="bell" />
	</ProgressButton>
	<ProgressButton
	v-else
	class="btn btn-default toggled"
	:click="unsubscribeUser"
	:title="$t('user_card.unsubscribe')"
	>
	- <i class="icon-bell-ringing-o" />
	+ <FALayers>
	+ <FAIcon icon="rss" transform="left-5 shrink-6 up-3 rotate-20" flip="horizontal"/>
	+ <FAIcon icon="rss" transform="right-5 shrink-6 up-3 rotate-20"/>
	+ <FAIcon icon="bell" />
	+ </FALayers>
	</ProgressButton>
	</template>
	</div>
	<div>
	<button
	v-if="relationship.muting"
	class="btn btn-default btn-block toggled"
	@click="unmuteUser"
	>
	{{ $t('user_card.muted') }}
	</button>
	<button
	v-else
	class="btn btn-default btn-block"
	@click="muteUser"
	>
	{{ $t('user_card.mute') }}
	</button>
	</div>
	<div>
	<button
	class="btn btn-default btn-block"
	@click="mentionUser"
	>
	{{ $t('user_card.mention') }}
	</button>
	</div>
	<ModerationTools
	v-if="loggedIn.role === "admin""
	:user="user"
	/>
	</div>
	<div
	v-if="!loggedIn && user.is_local"
	class="user-interactions"
	>
	<RemoteFollow :user="user" />
	</div>
	</div>
	</div>
	<div
	v-if="!hideBio"
	class="panel-body"
	>
	<div
	v-if="!mergedConfig.hideUserStats && switcher"
	class="user-counts"
	>
	<div
	class="user-count"
	@click.prevent="setProfileView('statuses')"
	>
	<h5>{{ $t('user_card.statuses') }}</h5>
	<span>{{ user.statuses_count }} <br></span>
	</div>
	<div
	class="user-count"
	@click.prevent="setProfileView('friends')"
	>
	<h5>{{ $t('user_card.followees') }}</h5>
	<span>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</span>
	</div>
	<div
	class="user-count"
	@click.prevent="setProfileView('followers')"
	>
	<h5>{{ $t('user_card.followers') }}</h5>
	<span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
	</div>
	</div>
	<!-- eslint-disable vue/no-v-html -->
	<p
	v-if="!hideBio && user.description_html"
	class="user-card-bio"
	@click.prevent="linkClicked"
	v-html="user.description_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<p
	v-else-if="!hideBio"
	class="user-card-bio"
	>
	{{ user.description }}
	</p>
	</div>
	</div>
	</template>

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

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

	.user-card {
	position: relative;

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

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

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

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

	p {
	margin-bottom: 0;
	}

	&-bio {
	text-align: center;

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

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

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

	// Modifiers

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

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

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

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

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

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

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

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

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

	- i {
	+ svg {
	color: #FFF;
	}
	}

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

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

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

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

	.top-line {
	display: flex;
	}
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	button {
	margin: 0;
	}
	}
	}

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

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

	h5 {
	font-size:1em;
	font-weight: bolder;
	margin: 0 0 0.25em;
	}
	a {
	text-decoration: none;
	}
	}
	</style>
	diff --git a/src/components/user_list_popover/user_list_popover.js b/src/components/user_list_popover/user_list_popover.js
	index b60f2c4c..32ca2b8d 100644
	--- a/src/components/user_list_popover/user_list_popover.js
	+++ b/src/components/user_list_popover/user_list_popover.js
	@@ -1,18 +1,24 @@
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faCircleNotch
	+)

	const UserListPopover = {
	name: 'UserListPopover',
	props: [
	'users'
	],
	components: {
	Popover: () => import('../popover/popover.vue'),
	UserAvatar: () => import('../user_avatar/user_avatar.vue')
	},
	computed: {
	usersCapped () {
	return this.users.slice(0, 16)
	}
	}
	}

	export default UserListPopover
	diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
	index 185c73ca..dd6977d2 100644
	--- a/src/components/user_list_popover/user_list_popover.vue
	+++ b/src/components/user_list_popover/user_list_popover.vue
	@@ -1,71 +1,71 @@
	<template>
	<Popover
	trigger="hover"
	placement="top"
	:offset="{ y: 5 }"
	>
	<template slot="trigger">
	<slot />
	</template>
	<div
	slot="content"
	class="user-list-popover"
	>
	<div v-if="users.length">
	<div
	v-for="(user) in usersCapped"
	:key="user.id"
	class="user-list-row"
	>
	<UserAvatar
	:user="user"
	class="avatar-small"
	:compact="true"
	/>
	<div class="user-list-names">
	<!-- eslint-disable vue/no-v-html -->
	<span v-html="user.name_html" />
	<!-- eslint-enable vue/no-v-html -->
	<span class="user-list-screen-name">{{ user.screen_name }}</span>
	</div>
	</div>
	</div>
	<div v-else>
	- <i class="icon-spin4 animate-spin" />
	+ <FAIcon icon="circle-notch" spin size="3x"/>
	</div>
	</div>
	</Popover>
	</template>

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

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

	.user-list-popover {
	padding: 0.5em;

	.user-list-row {
	padding: 0.25em;
	display: flex;
	flex-direction: row;

	.user-list-names {
	display: flex;
	flex-direction: column;
	margin-left: 0.5em;
	min-width: 5em;

	img {
	width: 1em;
	height: 1em;
	}
	}

	.user-list-screen-name {
	font-size: 9px;
	}
	}
	}

	</style>
	diff --git a/src/main.js b/src/main.js
	index 42b6bcb2..90ee2887 100644
	--- a/src/main.js
	+++ b/src/main.js
	@@ -1,116 +1,117 @@
	import Vue from 'vue'
	import VueRouter from 'vue-router'
	import Vuex from 'vuex'

	import 'custom-event-polyfill'
	import './lib/event_target_polyfill.js'

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

	import VueI18n from 'vue-i18n'

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

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

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

	-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
	+import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'

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

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

	Vue.use(Vuex)
	Vue.use(VueRouter)
	Vue.use(VueI18n)
	Vue.use(VueChatScroll)
	Vue.use(VueClickOutside)
	Vue.use(PortalVue)
	Vue.use(VBodyScrollLock)

	Vue.component('FAIcon', FontAwesomeIcon)
	+Vue.component('FALayers', FontAwesomeLayers)

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

	messages.setLanguage(i18n, currentLocale)

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

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

	// These are inlined by webpack's DefinePlugin
	/* eslint-disable */
	window.___pleromafe_mode = process.env
	window.___pleromafe_commit_hash = COMMIT_HASH
	window.___pleromafe_dev_overrides = DEV_OVERRIDES

File Metadata

Mime Type: text/x-diff
Expires: Mon, Nov 25, 6:03 AM (1 d, 11 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 39657
Default Alt Text: (127 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions