No OneTemporary
Actions

Size

311 KB

Referenced Files

None

Subscribers

None

View Options

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

	diff --git a/changelog.d/drafts.add b/changelog.d/drafts.add
	new file mode 100644
	index 0000000000..1147016e30
	--- /dev/null
	+++ b/changelog.d/drafts.add
	@@ -0,0 +1 @@
	+Add draft management system
	diff --git a/src/App.scss b/src/App.scss
	index f52ba06b9b..2afc439081 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,1082 +1,1088 @@
	// stylelint-disable rscss/class-format
	/* stylelint-disable no-descending-specificity */
	@import "./panel";

	:root {
	--status-margin: 0.75em;
	--post-line-height: 1.4;
	// Z-Index stuff
	--ZI_media_modal: 9000;
	--ZI_modals_popovers: 8500;
	--ZI_modals: 8000;
	--ZI_navbar_popovers: 7500;
	--ZI_navbar: 7000;
	--ZI_popovers: 6000;

	// Fallback for when stuff is loading
	--background: var(--bg);
	}

	html {
	font-size: var(--textSize, 14px);

	--navbar-height: var(--navbarSize, 3.5rem);
	--emoji-size: var(--emojiSize, 32px);
	--panel-header-height: var(--panelHeaderSize, 3.2rem);
	// overflow-x: clip causes my browser's tab to crash with SIGILL lul
	}

	body {
	font-family: sans-serif;
	font-family: var(--font);
	margin: 0;
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overscroll-behavior-y: none;
	overflow-x: clip;
	overflow-y: scroll;

	&.hidden {
	display: none;
	}
	}

	// ## Custom scrollbars
	// Only show custom scrollbars on devices which
	// have a cursor/pointer to operate them
	@media (any-pointer: fine) {
	* {
	scrollbar-color: var(--fg) transparent;

	&::-webkit-scrollbar {
	background: transparent;
	}

	&::-webkit-scrollbar-corner {
	background: transparent;
	}

	&::-webkit-resizer {
	/* stylelint-disable-next-line declaration-no-important */
	background-color: transparent !important;
	background-image:
	linear-gradient(
	135deg,
	transparent calc(50% - 1px),
	var(--textFaint) 50%,
	transparent calc(50% + 1px),
	transparent calc(75% - 1px),
	var(--textFaint) 75%,
	transparent calc(75% + 1px),
	);
	}

	&::-webkit-scrollbar-button,
	&::-webkit-scrollbar-thumb {
	box-shadow: var(--shadow);
	border-radius: var(--roundness);
	}

	// horizontal/vertical/increment/decrement are webkit-specific stuff
	// that indicates whether we're affecting vertical scrollbar, increase button etc
	// stylelint-disable selector-pseudo-class-no-unknown
	&::-webkit-scrollbar-button {
	--___bgPadding: 2px;

	color: var(--text);
	background-repeat: no-repeat, no-repeat;

	&:horizontal {
	background-size: 50% calc(50% - var(--___bgPadding)), 50% calc(50% - var(--___bgPadding));

	&:increment {
	background-image:
	linear-gradient(45deg, var(--text) 50%, transparent 51%),
	linear-gradient(-45deg, transparent 50%, var(--text) 51%);
	background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
	}

	&:decrement {
	background-image:
	linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px)),
	linear-gradient(-45deg, var(--text) 50%, transparent 51%);
	background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
	}
	}

	&:vertical {
	background-size: calc(50% - var(--___bgPadding)) 50%, calc(50% - var(--___bgPadding)) 50%;

	&:increment {
	background-image:
	linear-gradient(-45deg, transparent 50%, var(--text) 51%),
	linear-gradient(45deg, transparent 50%, var(--text) 51%);
	background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
	}

	&:decrement {
	background-image:
	linear-gradient(-45deg, var(--text) 50%, transparent 51%),
	linear-gradient(45deg, var(--text) 50%, transparent 51%);
	background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
	}
	}
	}
	// stylelint-enable selector-pseudo-class-no-unknown
	}
	// Body should have background to scrollbar otherwise it will use white (body color?)
	html {
	scrollbar-color: var(--fg) var(--wallpaper);
	background: var(--wallpaper);
	}
	}

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

	h4 {
	margin: 0;
	}

	.iconLetter {
	display: inline-block;
	text-align: center;
	font-weight: 1000;
	}

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

	nav {
	z-index: var(--ZI_navbar);
	box-shadow: var(--shadow);
	box-sizing: border-box;
	height: var(--navbar-height);
	font-size: calc(var(--navbar-height) / 3.5);
	position: fixed;
	}

	#sidebar {
	grid-area: sidebar;
	}

	#modal {
	position: absolute;
	z-index: var(--ZI_modals);
	}

	.column.-scrollable {
	top: var(--navbar-height);
	position: sticky;
	}

	#main-scroller {
	grid-area: content;
	position: relative;
	}

	#notifs-column {
	grid-area: notifs;
	}

	.app-bg-wrapper {
	position: fixed;
	height: 100%;
	top: var(--navbar-height);
	z-index: -1000;
	left: 0;
	right: -20px;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--wallpaper);
	background-image: var(--body-background-image);
	background-position: 50%;
	}

	.underlay {
	grid-column: 1 / span 3;
	grid-row: 1 / 1;
	pointer-events: none;
	background-color: var(--underlay);
	z-index: -1000;
	}

	.app-layout {
	--miniColumn: 25rem;
	--maxiColumn: 45rem;
	--columnGap: 1rem;
	--effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
	--effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
	--effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn)));

	position: relative;
	display: grid;
	grid-template-columns:
	var(--effectiveSidebarColumnWidth)
	var(--effectiveContentColumnWidth);
	grid-template-areas: "sidebar content";
	grid-template-rows: 1fr;
	box-sizing: border-box;
	margin: 0 auto;
	align-content: flex-start;
	flex-wrap: wrap;
	justify-content: center;
	min-height: 100vh;
	overflow-x: clip;

	.column {
	--___columnMargin: var(--columnGap);

	display: grid;
	grid-template-columns: 100%;
	box-sizing: border-box;
	grid-row: 1 / 1;
	margin: 0 calc(var(--___columnMargin) / 2);
	padding: calc(var(--___columnMargin)) 0;
	row-gap: var(--___columnMargin);
	align-content: start;

	&:not(.-scrollable) {
	margin-top: var(--navbar-height);
	}

	&:hover {
	z-index: 2;
	}

	&.-full-height {
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	}

	&.-scrollable {
	--___paddingIncrease: calc(var(--columnGap) / 2);

	position: sticky;
	top: var(--navbar-height);
	max-height: calc(100vh - var(--navbar-height));
	overflow-y: auto;
	overflow-x: hidden;
	margin-left: calc(var(--___paddingIncrease) * -1);
	padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);

	// On browsers that don't support hiding scrollbars we enforce "show scrolbars" mode
	// might implement old style of hiding scrollbars later if there's demand
	@supports (scrollbar-width: none) or (-webkit-text-fill-color: initial) {
	&:not(.-show-scrollbar) {
	scrollbar-width: none;
	margin-right: calc(var(--___paddingIncrease) * -1);
	padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);

	&::-webkit-scrollbar {
	display: block;
	width: 0;
	}
	}
	}

	.panel-heading.-sticky {
	top: calc(var(--columnGap) / -1);
	}
	}
	}

	&.-has-new-post-button {
	.column {
	padding-bottom: 10rem;
	}
	}

	&.-no-sticky-headers {
	.column {
	.panel-heading.-sticky {
	position: relative;
	top: 0;
	}
	}
	}

	.column-inner {
	display: grid;
	grid-template-columns: 100%;
	box-sizing: border-box;
	row-gap: 1em;
	align-content: start;
	}

	&.-reverse:not(.-wide, .-mobile) {
	grid-template-columns:
	var(--effectiveContentColumnWidth)
	var(--effectiveSidebarColumnWidth);
	grid-template-areas: "content sidebar";
	}

	&.-wide {
	grid-template-columns:
	var(--effectiveSidebarColumnWidth)
	var(--effectiveContentColumnWidth)
	var(--effectiveNotifsColumnWidth);
	grid-template-areas: "sidebar content notifs";

	&.-reverse {
	grid-template-columns:
	var(--effectiveNotifsColumnWidth)
	var(--effectiveContentColumnWidth)
	var(--effectiveSidebarColumnWidth);
	grid-template-areas: "notifs content sidebar";
	}
	}

	&.-mobile {
	grid-template-columns: 100vw;
	grid-template-areas: "content";
	padding: 0;

	.column {
	padding-top: 0;
	margin: var(--navbar-height) 0 0 0;
	}

	.panel-heading,
	.panel-heading::after,
	.panel-heading::before,
	.panel,
	.panel::after {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	}

	#sidebar,
	#notifs-column {
	display: none;
	}
	}

	&.-normal {
	#notifs-column {
	display: none;
	}
	}
	}

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

	.button-default {
	user-select: none;
	color: var(--text);
	border: none;
	cursor: pointer;
	background-color: var(--background);
	box-shadow: var(--shadow);
	font-size: 1em;
	font-family: sans-serif;
	font-family: var(--font);

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

	&:disabled {
	cursor: not-allowed;
	}
	}

	.menu-item,
	.list-item {
	display: block;
	box-sizing: border-box;
	border: none;
	outline: none;
	text-align: initial;
	font-size: inherit;
	font-family: inherit;
	font-weight: 400;
	cursor: pointer;
	color: inherit;
	clear: both;
	position: relative;
	white-space: nowrap;
	border-color: var(--border);
	border-style: solid;
	border-width: 0;
	border-top-width: 1px;
	width: 100%;
	line-height: var(--__line-height);
	padding: var(--__vertical-gap) var(--__horizontal-gap);
	background: transparent;

	--__line-height: 1.5em;
	--__horizontal-gap: 0.75em;
	--__vertical-gap: 0.5em;

	&.-non-interactive {
	cursor: auto;
	}

	&.-active,
	&:hover {
	border-top-width: 1px;
	border-bottom-width: 1px;
	}

	&.-active + &,
	&:hover + & {
	border-top-width: 0;
	}

	&:hover + .menu-item-collapsible:not(.-expanded) + &,
	&.-active + .menu-item-collapsible:not(.-expanded) + & {
	border-top-width: 0;
	}

	&[aria-expanded="true"] {
	border-bottom-width: 1px;
	}

	a,
	button:not(.button-default) {
	text-align: initial;
	padding: 0;
	background: none;
	border: none;
	outline: none;
	display: inline;
	font-size: 100%;
	font-family: inherit;
	line-height: unset;
	color: var(--text);
	}

	&:first-child {
	border-top-right-radius: var(--roundness);
	border-top-left-radius: var(--roundness);
	border-top-width: 0;
	}

	&:last-child {
	border-bottom-right-radius: var(--roundness);
	border-bottom-left-radius: var(--roundness);
	border-bottom-width: 0;
	}
	}

	.button-unstyled {
	border: none;
	outline: none;
	display: inline;
	text-align: initial;
	font-size: 100%;
	font-family: inherit;
	box-shadow: var(--shadow);
	background-color: transparent;
	padding: 0;
	line-height: unset;
	cursor: pointer;
	box-sizing: content-box;
	color: inherit;

	&.-link {
	/* stylelint-disable-next-line declaration-no-important */
	color: var(--link) !important;
	}
	}

	input,
	textarea {
	border: none;
	display: inline-block;
	outline: none;
	}

	.input {
	&.unstyled {
	border-radius: 0;
	/* stylelint-disable-next-line declaration-no-important */
	background: none !important;
	box-shadow: none;
	height: unset;
	}

	--_padding: 0.5em;

	border: none;
	background-color: var(--background);
	color: var(--text);
	box-shadow: var(--shadow);
	font-family: var(--font);
	font-size: 1em;
	margin: 0;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	line-height: 2;
	hyphens: none;
	padding: 0 var(--_padding);

	&:disabled,
	&[disabled="disabled"],
	&.disabled {
	cursor: not-allowed;
	}

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

	&[type="radio"] {
	display: none;

	&:checked + label::before {
	box-shadow: var(--shadow);
	background-color: var(--background);
	color: var(--text);
	}

	&:disabled {
	&,
	& + label,
	& + label::before {
	opacity: 0.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
	background-color: var(--background);
	box-shadow: var(--shadow);
	margin-right: 0.5em;
	vertical-align: top;
	text-align: center;
	line-height: 1.1;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	}
	}

	&[type="checkbox"] {
	&:checked + label::before {
	color: var(--text);
	background-color: var(--background);
	box-shadow: var(--shadow);
	}

	&:disabled {
	&,
	& + label,
	& + label::before {
	opacity: 0.5;
	}
	}

	+ label::before {
	flex-shrink: 0;
	display: inline-block;
	content: "✓";
	transition: color 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: var(--roundness);
	box-shadow: var(--shadow);
	margin-right: 0.5em;
	vertical-align: top;
	text-align: center;
	line-height: 1.1;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	}
	}

	&.resize-height {
	resize: vertical;
	}
	}

	.input,
	.button-default {
	--_roundness-left: var(--roundness);
	--_roundness-right: var(--roundness);

	border-top-left-radius: var(--_roundness-left);
	border-bottom-left-radius: var(--_roundness-left);
	border-top-right-radius: var(--_roundness-right);
	border-bottom-right-radius: var(--_roundness-right);
	}

	// Textareas should have stock line-height + vertical padding instead of huge line-height
	textarea.input {
	padding: var(--_padding);
	line-height: var(--post-line-height);
	}

	option {
	color: var(--text);
	background-color: var(--background);
	}

	.hide-number-spinner {
	appearance: textfield;

	&[type="number"]::-webkit-inner-spin-button,
	&[type="number"]::-webkit-outer-spin-button {
	opacity: 0;
	display: none;
	}
	}

	.cards-list {
	list-style: none;
	display: grid;
	grid-auto-flow: row dense;
	grid-template-columns: 1fr 1fr;

	li {
	border: 1px solid var(--border);
	border-radius: var(--roundness);
	padding: 0.5em;
	margin: 0.25em;
	}
	}

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

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

	> *,
	> * .button-default {
	--_roundness-left: 0;
	--_roundness-right: 0;

	position: relative;
	flex: 1 1 auto;
	}

	> *:first-child,
	> *:first-child .button-default {
	--_roundness-left: var(--roundness);
	}

	> *:last-child,
	> *:last-child .button-default {
	--_roundness-right: var(--roundness);
	}
	}

	.fa {
	color: grey;
	}

	.mobile-shown {
	display: none;
	}

	.badge {
	box-sizing: border-box;
	display: inline-block;
	border-radius: 99px;
	max-width: 10em;
	min-width: 1.7em;
	height: 1.3em;
	padding: 0.15em;
	vertical-align: middle;
	font-weight: normal;
	font-style: normal;
	font-size: 0.9em;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	&.-dot,
	&.-counter {
	margin: 0;
	position: absolute;
	}

	&.-dot {
	min-height: 8px;
	max-height: 8px;
	min-width: 8px;
	max-width: 8px;
	padding: 0;
	line-height: 0;
	font-size: 0;
	left: calc(50% - 4px);
	top: calc(50% - 4px);
	margin-left: 6px;
	margin-top: -6px;
	}

	&.-counter {
	border-radius: var(--roundness);
	font-size: 0.75em;
	line-height: 1;
	text-align: right;
	padding: 0.2em;
	min-width: 0;
	left: calc(50% - 0.5em);
	top: calc(50% - 0.4em);
	margin-left: 0.7em;
	margin-top: -1em;
	}
	+
	+ &.-neutral {
	+ background-color: var(--badgeNeutral);
	+ color: white;
	+ color: var(--badgeNeutralText, white);
	+ }
	}

	.alert {
	margin: 0 0.35em;
	padding: 0 0.25em;
	border-radius: var(--roundness);
	border: 1px solid var(--border);
	}

	.faint {
	--text: var(--textFaint);
	--link: var(--linkFaint);

	color: var(--text);
	}

	.visibility-notice {
	padding: 0.5em;
	border: 1px solid var(--textFaint);
	border-radius: var(--roundness);
	}

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

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

	.fa-scale-110 {
	&.svg-inline--fa,
	&.iconLetter {
	font-size: 1.1em;
	}

	&.svg-inline--fa {
	vertical-align: -0.15em;
	}
	}

	.fa-old-padding {
	&.iconLetter,
	&.svg-inline--fa,
	&-layer {
	padding: 0 0.3em;
	}
	}

	.veryfaint {
	opacity: 0.25;
	}

	.timeago {
	--link: var(--text);
	--linkFaint: var(--textFaint);
	}

	.login-hint {
	text-align: center;

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

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

	.btn.button-default {
	min-height: 2em;
	}

	.new-status-notification {
	position: relative;
	font-size: 1.1em;
	z-index: 1;
	flex: 1;
	}

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

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

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

	@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);
	}
	}

	// Vue transitions
	.fade-enter-active,
	.fade-leave-active {
	transition: opacity 0.3s;
	}

	.fade-enter-from,
	.fade-leave-active {
	opacity: 0;
	}
	/* stylelint-enable no-descending-specificity */

	.visible-for-screenreader-only {
	display: block;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	visibility: visible;
	clip: rect(0 0 0 0);
	padding: 0;
	position: absolute;
	}

	*::selection {
	color: var(--selectionText);
	background-color: var(--selectionBackground);
	}

	#splash {
	pointer-events: none;
	transition: opacity 2s;
	opacity: 1;

	&.hidden {
	opacity: 0;
	}

	#status {
	&.css-ok {
	&::before {
	display: inline-block;
	content: "CSS OK";
	}
	}

	.initial-text {
	display: none;
	}
	}

	#throbber {
	animation-duration: 3s;
	animation-name: bounce;
	animation-iteration-count: infinite;
	animation-direction: normal;
	transform-origin: bottom center;

	&.dead {
	animation-name: dead;
	animation-duration: 2s;
	animation-iteration-count: 1;
	transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
	}

	@keyframes dead {
	0% {
	transform: rotateX(0) rotateY(0) rotateZ(0);
	}

	5% {
	transform: rotateX(0) rotateY(0) rotateZ(1deg);
	}

	10% {
	transform: rotateX(0) rotateY(0) rotateZ(-2deg);
	}

	15% {
	transform: rotateX(0) rotateY(0) rotateZ(3deg);
	}

	20% {
	transform: rotateX(0) rotateY(0) rotateZ(0);
	}

	25% {
	transform: rotateX(0) rotateY(0) rotateZ(0);
	}

	30% {
	transform: rotateX(10deg) rotateY(0) rotateZ(0);
	}

	35% {
	transform: rotateX(-10deg) rotateY(0) rotateZ(0);
	}

	40% {
	transform: rotateX(10deg) rotateY(0) rotateZ(0);
	}

	45% {
	transform: rotateX(-10deg) rotateY(0) rotateZ(0);
	}

	50% {
	transform: rotateX(10deg) rotateY(0) rotateZ(0);
	}

	100% {
	transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
	transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); /* easeInQuint */
	}
	}

	@keyframes bounce {
	0% {
	scale: 1 1;
	translate: 0 0;
	animation-timing-function: ease-out;
	}

	10% {
	scale: 1.2 0.8;
	translate: 0 0;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-out;
	}

	30% {
	scale: 0.9 1.1;
	translate: 0 -40%;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-in;
	}

	40% {
	scale: 1.1 0.9;
	translate: 0 -50%;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-in;
	}

	45% {
	scale: 0.9 1.1;
	translate: 0 -45%;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-in;
	}

	50% {
	scale: 1.05 0.95;
	translate: 0 -40%;
	animation-timing-function: ease-in;
	}

	55% {
	scale: 0.985 1.025;
	translate: 0 -35%;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-in;
	}

	60% {
	scale: 1.0125 0.9985;
	translate: 0 -30%;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-in;
	}

	80% {
	scale: 1.0063 0.9938;
	translate: 0 -10%;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-in-ou;
	}

	90% {
	scale: 1.2 0.8;
	translate: 0 0;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-out;
	}

	100% {
	scale: 1 1;
	translate: 0 0;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-out;
	}
	}
	}
	}
	diff --git a/src/boot/after_store.js b/src/boot/after_store.js
	index 65a151785b..cf242092a8 100644
	--- a/src/boot/after_store.js
	+++ b/src/boot/after_store.js
	@@ -1,415 +1,417 @@
	import { createApp } from 'vue'
	import { createRouter, createWebHistory } from 'vue-router'
	import vClickOutside from 'click-outside-vue3'
	import VueVirtualScroller from 'vue-virtual-scroller'
	import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

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

	import App from '../App.vue'
	import routes from './routes'
	import VBodyScrollLock from 'src/directives/body_scroll_lock'

	import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
	import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
	import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
	import { applyConfig } from '../services/style_setter/style_setter.js'
	import FaviconService from '../services/favicon_service/favicon_service.js'
	import { initServiceWorker, updateFocus } from '../services/sw/sw.js'

	let staticInitialResults = null

	const parsedInitialResults = () => {
	if (!document.getElementById('initial-results')) {
	return null
	}
	if (!staticInitialResults) {
	staticInitialResults = JSON.parse(document.getElementById('initial-results').textContent)
	}
	return staticInitialResults
	}

	const decodeUTF8Base64 = (data) => {
	const rawData = atob(data)
	const array = Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)))
	const text = new TextDecoder().decode(array)
	return text
	}

	const preloadFetch = async (request) => {
	const data = parsedInitialResults()
	if (!data \|\| !data[request]) {
	return window.fetch(request)
	}
	const decoded = decodeUTF8Base64(data[request])
	const requestData = JSON.parse(decoded)
	return {
	ok: true,
	json: () => requestData,
	text: () => requestData
	}
	}

	const getInstanceConfig = async ({ store }) => {
	try {
	const res = await preloadFetch('/api/v1/instance')
	if (res.ok) {
	const data = await res.json()
	const textlimit = data.max_toot_chars
	const vapidPublicKey = data.pleroma.vapid_public_key

	store.dispatch('setInstanceOption', { name: 'textlimit', value: textlimit })
	store.dispatch('setInstanceOption', { name: 'accountApprovalRequired', value: data.approval_required })
	store.dispatch('setInstanceOption', { name: 'birthdayRequired', value: !!data.pleroma.metadata.birthday_required })
	store.dispatch('setInstanceOption', { name: 'birthdayMinAge', value: data.pleroma.metadata.birthday_min_age \|\| 0 })

	if (vapidPublicKey) {
	store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey })
	}
	} else {
	throw (res)
	}
	} catch (error) {
	console.error('Could not load instance config, potentially fatal')
	console.error(error)
	}
	}

	const getBackendProvidedConfig = async ({ store }) => {
	try {
	const res = await window.fetch('/api/pleroma/frontend_configurations')
	if (res.ok) {
	const data = await res.json()
	return data.pleroma_fe
	} else {
	throw (res)
	}
	} catch (error) {
	console.error('Could not load backend-provided frontend config, potentially fatal')
	console.error(error)
	}
	}

	const getStaticConfig = async () => {
	try {
	const res = await window.fetch('/static/config.json')
	if (res.ok) {
	return res.json()
	} else {
	throw (res)
	}
	} catch (error) {
	console.warn('Failed to load static/config.json, continuing without it.')
	console.warn(error)
	return {}
	}
	}

	const setSettings = async ({ apiConfig, staticConfig, store }) => {
	const overrides = window.___pleromafe_dev_overrides \|\| {}
	const env = window.___pleromafe_mode.NODE_ENV

	// This takes static config and overrides properties that are present in apiConfig
	let config = {}
	if (overrides.staticConfigPreference && env === 'development') {
	console.warn('OVERRIDING API CONFIG WITH STATIC CONFIG')
	config = Object.assign({}, apiConfig, staticConfig)
	} else {
	config = Object.assign({}, staticConfig, apiConfig)
	}

	const copyInstanceOption = (name) => {
	store.dispatch('setInstanceOption', { name, value: config[name] })
	}

	copyInstanceOption('theme')
	copyInstanceOption('style')
	copyInstanceOption('palette')
	copyInstanceOption('nsfwCensorImage')
	copyInstanceOption('background')
	copyInstanceOption('hidePostStats')
	copyInstanceOption('hideBotIndication')
	copyInstanceOption('hideUserStats')
	copyInstanceOption('hideFilteredStatuses')
	copyInstanceOption('logo')

	store.dispatch('setInstanceOption', {
	name: 'logoMask',
	value: typeof config.logoMask === 'undefined'
	? true
	: config.logoMask
	})

	store.dispatch('setInstanceOption', {
	name: 'logoMargin',
	value: typeof config.logoMargin === 'undefined'
	? 0
	: config.logoMargin
	})
	copyInstanceOption('logoLeft')
	store.commit('authFlow/setInitialStrategy', config.loginMethod)

	copyInstanceOption('redirectRootNoLogin')
	copyInstanceOption('redirectRootLogin')
	copyInstanceOption('showInstanceSpecificPanel')
	copyInstanceOption('minimalScopesMode')
	copyInstanceOption('hideMutedPosts')
	copyInstanceOption('collapseMessageWithSubject')
	copyInstanceOption('scopeCopy')
	copyInstanceOption('subjectLineBehavior')
	copyInstanceOption('postContentType')
	copyInstanceOption('alwaysShowSubjectInput')
	copyInstanceOption('showFeaturesPanel')
	copyInstanceOption('hideSitename')
	copyInstanceOption('sidebarRight')
	}

	const getTOS = async ({ store }) => {
	try {
	const res = await window.fetch('/static/terms-of-service.html')
	if (res.ok) {
	const html = await res.text()
	store.dispatch('setInstanceOption', { name: 'tos', value: html })
	} else {
	throw (res)
	}
	} catch (e) {
	console.warn("Can't load TOS")
	console.warn(e)
	}
	}

	const getInstancePanel = async ({ store }) => {
	try {
	const res = await preloadFetch('/instance/panel.html')
	if (res.ok) {
	const html = await res.text()
	store.dispatch('setInstanceOption', { name: 'instanceSpecificPanelContent', value: html })
	} else {
	throw (res)
	}
	} catch (e) {
	console.warn("Can't load instance panel")
	console.warn(e)
	}
	}

	const getStickers = async ({ store }) => {
	try {
	const res = await window.fetch('/static/stickers.json')
	if (res.ok) {
	const values = await res.json()
	const stickers = (await Promise.all(
	Object.entries(values).map(async ([name, path]) => {
	const resPack = await window.fetch(path + 'pack.json')
	let meta = {}
	if (resPack.ok) {
	meta = await resPack.json()
	}
	return {
	pack: name,
	path,
	meta
	}
	})
	)).sort((a, b) => {
	return a.meta.title.localeCompare(b.meta.title)
	})
	store.dispatch('setInstanceOption', { name: 'stickers', value: stickers })
	} else {
	throw (res)
	}
	} catch (e) {
	console.warn("Can't load stickers")
	console.warn(e)
	}
	}

	const getAppSecret = async ({ store }) => {
	const { state, commit } = store
	const { oauth, instance } = state
	return getOrCreateApp({ ...oauth, instance: instance.server, commit })
	.then((app) => getClientToken({ ...app, instance: instance.server }))
	.then((token) => {
	commit('setAppToken', token.access_token)
	commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
	})
	}

	const resolveStaffAccounts = ({ store, accounts }) => {
	const nicknames = accounts.map(uri => uri.split('/').pop())
	store.dispatch('setInstanceOption', { name: 'staffAccounts', value: nicknames })
	}

	const getNodeInfo = async ({ store }) => {
	try {
	const res = await preloadFetch('/nodeinfo/2.1.json')
	if (res.ok) {
	const data = await res.json()
	const metadata = data.metadata
	const features = metadata.features
	store.dispatch('setInstanceOption', { name: 'name', value: metadata.nodeName })
	store.dispatch('setInstanceOption', { name: 'registrationOpen', value: data.openRegistrations })
	store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
	store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') })
	store.dispatch('setInstanceOption', { name: 'shoutAvailable', value: features.includes('chat') })
	store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
	store.dispatch('setInstanceOption', { name: 'pleromaCustomEmojiReactionsAvailable', value: features.includes('pleroma_custom_emoji_reactions') })
	store.dispatch('setInstanceOption', { name: 'pleromaBookmarkFoldersAvailable', value: features.includes('pleroma:bookmark_folders') })
	store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
	store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
	store.dispatch('setInstanceOption', { name: 'editingAvailable', value: features.includes('editing') })
	store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })
	store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled })
	store.dispatch('setInstanceOption', { name: 'quotingAvailable', value: features.includes('quote_posting') })
	store.dispatch('setInstanceOption', { name: 'groupActorAvailable', value: features.includes('pleroma:group_actors') })

	const uploadLimits = metadata.uploadLimits
	store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadLimits.general) })
	store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadLimits.avatar) })
	store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadLimits.background) })
	store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadLimits.banner) })
	store.dispatch('setInstanceOption', { name: 'fieldsLimits', value: metadata.fieldsLimits })

	store.dispatch('setInstanceOption', { name: 'restrictedNicknames', value: metadata.restrictedNicknames })
	store.dispatch('setInstanceOption', { name: 'postFormats', value: metadata.postFormats })

	const suggestions = metadata.suggestions
	store.dispatch('setInstanceOption', { name: 'suggestionsEnabled', value: suggestions.enabled })
	store.dispatch('setInstanceOption', { name: 'suggestionsWeb', value: suggestions.web })

	const software = data.software
	store.dispatch('setInstanceOption', { name: 'backendVersion', value: software.version })
	store.dispatch('setInstanceOption', { name: 'backendRepository', value: software.repository })
	store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: software.name === 'pleroma' })

	const priv = metadata.private
	store.dispatch('setInstanceOption', { name: 'private', value: priv })

	const frontendVersion = window.___pleromafe_commit_hash
	store.dispatch('setInstanceOption', { name: 'frontendVersion', value: frontendVersion })

	const federation = metadata.federation

	store.dispatch('setInstanceOption', {
	name: 'tagPolicyAvailable',
	value: typeof federation.mrf_policies === 'undefined'
	? false
	: metadata.federation.mrf_policies.includes('TagPolicy')
	})

	store.dispatch('setInstanceOption', { name: 'federationPolicy', value: federation })
	store.dispatch('setInstanceOption', {
	name: 'federating',
	value: typeof federation.enabled === 'undefined'
	? true
	: federation.enabled
	})

	const accountActivationRequired = metadata.accountActivationRequired
	store.dispatch('setInstanceOption', { name: 'accountActivationRequired', value: accountActivationRequired })

	const accounts = metadata.staffAccounts
	resolveStaffAccounts({ store, accounts })
	} else {
	throw (res)
	}
	} catch (e) {
	console.warn('Could not load nodeinfo')
	console.warn(e)
	}
	}

	const setConfig = async ({ store }) => {
	// apiConfig, staticConfig
	const configInfos = await Promise.all([getBackendProvidedConfig({ store }), getStaticConfig()])
	const apiConfig = configInfos[0]
	const staticConfig = configInfos[1]

	await setSettings({ store, apiConfig, staticConfig }).then(getAppSecret({ store }))
	}

	const checkOAuthToken = async ({ store }) => {
	if (store.getters.getUserToken()) {
	return store.dispatch('loginUser', store.getters.getUserToken())
	}
	return Promise.resolve()
	}

	const afterStoreSetup = async ({ store, i18n }) => {
	store.dispatch('setLayoutWidth', windowWidth())
	store.dispatch('setLayoutHeight', windowHeight())

	FaviconService.initFaviconService()
	initServiceWorker(store)

	window.addEventListener('focus', () => updateFocus())

	const overrides = window.___pleromafe_dev_overrides \|\| {}
	const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
	store.dispatch('setInstanceOption', { name: 'server', value: server })

	await setConfig({ store })
	try {
	await store.dispatch('applyTheme').catch((e) => { console.error('Error setting theme', e) })
	} catch (e) {
	window.splashError(e)
	return Promise.reject(e)
	}

	applyConfig(store.state.config, i18n.global)

	// Now we can try getting the server settings and logging in
	// Most of these are preloaded into the index.html so blocking is minimized
	await Promise.all([
	checkOAuthToken({ store }),
	getInstancePanel({ store }),
	getNodeInfo({ store }),
	getInstanceConfig({ store })
	]).catch(e => Promise.reject(e))

	+ await store.dispatch('loadDrafts')
	+
	// Start fetching things that don't need to block the UI
	store.dispatch('fetchMutes')
	store.dispatch('startFetchingAnnouncements')
	getTOS({ store })
	getStickers({ store })

	const router = createRouter({
	history: createWebHistory(),
	routes: routes(store),
	scrollBehavior: (to, _from, savedPosition) => {
	if (to.matched.some(m => m.meta.dontScroll)) {
	return false
	}
	return savedPosition \|\| { left: 0, top: 0 }
	}
	})

	const app = createApp(App)

	app.use(router)
	app.use(store)
	app.use(i18n)

	// Little thing to get out of invalid theme state
	window.resetThemes = () => {
	store.dispatch('resetThemeV3')
	store.dispatch('resetThemeV3Palette')
	store.dispatch('resetThemeV2')
	}

	app.use(vClickOutside)
	app.use(VBodyScrollLock)
	app.use(VueVirtualScroller)

	app.component('FAIcon', FontAwesomeIcon)
	app.component('FALayers', FontAwesomeLayers)

	// remove after vue 3.3
	app.config.unwrapInjectedRef = true

	app.mount('#app')
	return app
	}

	export default afterStoreSetup
	diff --git a/src/boot/routes.js b/src/boot/routes.js
	index f87b2ec857..66d937c8ec 100644
	--- a/src/boot/routes.js
	+++ b/src/boot/routes.js
	@@ -1,106 +1,108 @@
	import PublicTimeline from 'components/public_timeline/public_timeline.vue'
	import PublicAndExternalTimeline from 'components/public_and_external_timeline/public_and_external_timeline.vue'
	import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue'
	import TagTimeline from 'components/tag_timeline/tag_timeline.vue'
	import BookmarkTimeline from 'components/bookmark_timeline/bookmark_timeline.vue'
	import ConversationPage from 'components/conversation-page/conversation-page.vue'
	import Interactions from 'components/interactions/interactions.vue'
	import DMs from 'components/dm_timeline/dm_timeline.vue'
	import ChatList from 'components/chat_list/chat_list.vue'
	import Chat from 'components/chat/chat.vue'
	import UserProfile from 'components/user_profile/user_profile.vue'
	import Search from 'components/search/search.vue'
	import Registration from 'components/registration/registration.vue'
	import PasswordReset from 'components/password_reset/password_reset.vue'
	import FollowRequests from 'components/follow_requests/follow_requests.vue'
	import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
	import Notifications from 'components/notifications/notifications.vue'
	import AuthForm from 'components/auth_form/auth_form.js'
	import ShoutPanel from 'components/shout_panel/shout_panel.vue'
	import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
	import About from 'components/about/about.vue'
	import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
	import Lists from 'components/lists/lists.vue'
	import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
	import ListsEdit from 'components/lists_edit/lists_edit.vue'
	import NavPanel from 'src/components/nav_panel/nav_panel.vue'
	import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
	import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
	+import Drafts from 'components/drafts/drafts.vue'
	import BookmarkFolders from '../components/bookmark_folders/bookmark_folders.vue'
	import BookmarkFolderEdit from '../components/bookmark_folder_edit/bookmark_folder_edit.vue'

	export default (store) => {
	const validateAuthenticatedRoute = (to, from, next) => {
	if (store.state.users.currentUser) {
	next()
	} else {
	next(store.state.instance.redirectRootNoLogin \|\| '/main/all')
	}
	}

	let routes = [
	{
	name: 'root',
	path: '/',
	redirect: _to => {
	return (store.state.users.currentUser
	? store.state.instance.redirectRootLogin
	: store.state.instance.redirectRootNoLogin) \|\| '/main/all'
	}
	},
	{ name: 'public-external-timeline', path: '/main/all', component: PublicAndExternalTimeline },
	{ name: 'public-timeline', path: '/main/public', component: PublicTimeline },
	{ name: 'friends', path: '/main/friends', component: FriendsTimeline, beforeEnter: validateAuthenticatedRoute },
	{ name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
	{ name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
	{ name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
	{ name: 'quotes', path: '/notice/:id/quotes', component: QuotesTimeline },
	{
	name: 'remote-user-profile-acct',
	path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',
	component: RemoteUserResolver,
	beforeEnter: validateAuthenticatedRoute
	},
	{
	name: 'remote-user-profile',
	path: '/remote-users/:hostname/:username',
	component: RemoteUserResolver,
	beforeEnter: validateAuthenticatedRoute
	},
	{ name: 'external-user-profile', path: '/users/$:id', component: UserProfile },
	{ name: 'interactions', path: '/users/:username/interactions', component: Interactions, beforeEnter: validateAuthenticatedRoute },
	{ name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute },
	{ name: 'registration', path: '/registration', component: Registration },
	{ name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
	{ name: 'registration-token', path: '/registration/:token', component: Registration },
	{ name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
	{ name: 'notifications', path: '/:username/notifications', component: Notifications, props: () => ({ disableTeleport: true }), beforeEnter: validateAuthenticatedRoute },
	{ name: 'login', path: '/login', component: AuthForm },
	{ name: 'shout-panel', path: '/shout-panel', component: ShoutPanel, props: () => ({ floating: false }) },
	{ name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
	{ name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
	{ name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
	{ name: 'about', path: '/about', component: About },
	{ name: 'announcements', path: '/announcements', component: AnnouncementsPage },
	+ { name: 'drafts', path: '/drafts', component: Drafts },
	{ name: 'user-profile', path: '/users/:name', component: UserProfile },
	{ name: 'legacy-user-profile', path: '/:name', component: UserProfile },
	{ name: 'lists', path: '/lists', component: Lists },
	{ name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
	{ name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
	{ name: 'lists-new', path: '/lists/new', component: ListsEdit },
	{ name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute },
	{ name: 'bookmark-folders', path: '/bookmark_folders', component: BookmarkFolders },
	{ name: 'bookmark-folder-new', path: '/bookmarks/new-folder', component: BookmarkFolderEdit },
	{ name: 'bookmark-folder', path: '/bookmarks/:id', component: BookmarkTimeline },
	{ name: 'bookmark-folder-edit', path: '/bookmarks/:id/edit', component: BookmarkFolderEdit }
	]

	if (store.state.instance.pleromaChatMessagesAvailable) {
	routes = routes.concat([
	{ name: 'chat', path: '/users/:username/chats/:recipient_id', component: Chat, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute },
	{ name: 'chats', path: '/users/:username/chats', component: ChatList, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute }
	])
	}

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

	<script src="./chat.js"></script>
	<style lang="scss">
	@import "./chat";
	</style>
	diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
	new file mode 100644
	index 0000000000..cb07ec5c53
	--- /dev/null
	+++ b/src/components/draft/draft.js
	@@ -0,0 +1,64 @@
	+import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	+import EditStatusForm from 'src/components/edit_status_form/edit_status_form.vue'
	+import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
	+import StatusContent from 'src/components/status_content/status_content.vue'
	+
	+const Draft = {
	+ components: {
	+ PostStatusForm,
	+ EditStatusForm,
	+ ConfirmModal,
	+ StatusContent
	+ },
	+ props: {
	+ draft: {
	+ type: Object,
	+ required: true
	+ }
	+ },
	+ data () {
	+ return {
	+ editing: false,
	+ showingConfirmDialog: false
	+ }
	+ },
	+ computed: {
	+ relAttrs () {
	+ if (this.draft.type === 'edit') {
	+ return { statusId: this.draft.refId }
	+ } else if (this.draft.type === 'reply') {
	+ return { replyTo: this.draft.refId }
	+ } else {
	+ return {}
	+ }
	+ },
	+ postStatusFormProps () {
	+ return {
	+ draftId: this.draft.id,
	+ ...this.relAttrs
	+ }
	+ },
	+ refStatus () {
	+ return this.draft.refId ? this.$store.state.statuses.allStatusesObject[this.draft.refId] : undefined
	+ }
	+ },
	+ methods: {
	+ toggleEditing () {
	+ this.editing = !this.editing
	+ },
	+ abandon () {
	+ this.showingConfirmDialog = true
	+ },
	+ doAbandon () {
	+ this.$store.dispatch('abandonDraft', { id: this.draft.id })
	+ .then(() => {
	+ this.hideConfirmDialog()
	+ })
	+ },
	+ hideConfirmDialog () {
	+ this.showingConfirmDialog = false
	+ }
	+ }
	+}
	+
	+export default Draft
	diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
	new file mode 100644
	index 0000000000..d9d356121e
	--- /dev/null
	+++ b/src/components/draft/draft.vue
	@@ -0,0 +1,100 @@
	+<template>
	+ <article class="Draft">
	+ <div class="actions">
	+ <button
	+ class="btn button-default"
	+ :class="{ toggled: editing }"
	+ :aria-expanded="editing"
	+ @click.prevent.stop="toggleEditing"
	+ >
	+ {{ $t('drafts.continue') }}
	+ </button>
	+ <button
	+ class="btn button-default"
	+ @click.prevent.stop="abandon"
	+ >
	+ {{ $t('drafts.abandon') }}
	+ </button>
	+ </div>
	+ <div
	+ v-if="!editing"
	+ class="status-content"
	+ >
	+ <div>
	+ <i18n-t
	+ v-if="draft.type === 'reply' \|\| draft.type === 'edit'"
	+ tag="span"
	+ :keypath="draft.type === 'reply' ? 'drafts.replying' : 'drafts.editing'"
	+ >
	+ <template #statusLink>
	+ <router-link
	+ class="faint-link"
	+ :to="{ name: 'conversation', params: { id: draft.refId } }"
	+ >
	+ {{ refStatus ? refStatus.external_url : $t('drafts.unavailable') }}
	+ </router-link>
	+ </template>
	+ </i18n-t>
	+ <StatusContent
	+ v-if="draft.refId && refStatus"
	+ class="status-content"
	+ :status="refStatus"
	+ :compact="true"
	+ />
	+ </div>
	+ <p>{{ draft.status }}</p>
	+ </div>
	+ <div v-if="editing">
	+ <PostStatusForm
	+ v-if="draft.type !== 'edit'"
	+ v-bind="postStatusFormProps"
	+ />
	+ <EditStatusForm
	+ v-else
	+ :params="postStatusFormProps"
	+ />
	+ </div>
	+ <teleport to="#modal">
	+ <confirm-modal
	+ v-if="showingConfirmDialog"
	+ :title="$t('drafts.abandon_confirm_title')"
	+ :confirm-text="$t('drafts.abandon_confirm_accept_button')"
	+ :cancel-text="$t('drafts.abandon_confirm_cancel_button')"
	+ @accepted="doAbandon"
	+ @cancelled="hideConfirmDialog"
	+ >
	+ {{ $t('drafts.abandon_confirm') }}
	+ </confirm-modal>
	+ </teleport>
	+ </article>
	+</template>
	+
	+<script src="./draft.js"></script>
	+
	+<style lang="scss">
	+.Draft {
	+ margin: 1em;
	+
	+ .status-content {
	+ border: 1px solid;
	+ border-color: var(--faint);
	+ border-radius: var(--inputRadius);
	+ color: var(--text);
	+ padding: 0.5em;
	+ margin: 0.5em 0;
	+ }
	+
	+ .actions {
	+ display: flex;
	+ flex-direction: row;
	+ justify-content: space-evenly;
	+
	+ .btn {
	+ flex: 1;
	+ margin-left: 1em;
	+ margin-right: 1em;
	+ max-width: 10em;
	+ }
	+ }
	+}
	+</style>
	diff --git a/src/components/draft_closer/draft_closer.js b/src/components/draft_closer/draft_closer.js
	new file mode 100644
	index 0000000000..e50ea05abe
	--- /dev/null
	+++ b/src/components/draft_closer/draft_closer.js
	@@ -0,0 +1,52 @@
	+import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
	+
	+const DraftCloser = {
	+ data () {
	+ return {
	+ showing: false
	+ }
	+ },
	+ components: {
	+ DialogModal
	+ },
	+ emits: [
	+ 'save',
	+ 'discard'
	+ ],
	+ computed: {
	+ action () {
	+ if (this.$store.getters.mergedConfig.autoSaveDraft) {
	+ return 'save'
	+ } else {
	+ return this.$store.getters.mergedConfig.unsavedPostAction
	+ }
	+ },
	+ shouldConfirm () {
	+ return this.action === 'confirm'
	+ }
	+ },
	+ methods: {
	+ requestClose () {
	+ if (this.shouldConfirm) {
	+ this.showing = true
	+ } else if (this.action === 'save') {
	+ this.save()
	+ } else {
	+ this.discard()
	+ }
	+ },
	+ save () {
	+ this.$emit('save')
	+ this.showing = false
	+ },
	+ discard () {
	+ this.$emit('discard')
	+ this.showing = false
	+ },
	+ cancel () {
	+ this.showing = false
	+ }
	+ }
	+}
	+
	+export default DraftCloser
	diff --git a/src/components/draft_closer/draft_closer.vue b/src/components/draft_closer/draft_closer.vue
	new file mode 100644
	index 0000000000..1afb1f44d0
	--- /dev/null
	+++ b/src/components/draft_closer/draft_closer.vue
	@@ -0,0 +1,43 @@
	+<template>
	+ <teleport to="#modal">
	+ <dialog-modal
	+ v-if="showing"
	+ v-body-scroll-lock="true"
	+ class="confirm-modal"
	+ :on-cancel="cancel"
	+ >
	+ <template #header>
	+ <span>
	+ {{ $t('post_status.close_confirm_title') }}
	+ </span>
	+ </template>
	+
	+ {{ $t('post_status.close_confirm') }}
	+
	+ <template #footer>
	+ <button
	+ class="btn button-default"
	+ @click.prevent="save"
	+ >
	+ {{ $t('post_status.close_confirm_save_button') }}
	+ </button>
	+
	+ <button
	+ class="btn button-default"
	+ @click.prevent="discard"
	+ >
	+ {{ $t('post_status.close_confirm_discard_button') }}
	+ </button>
	+
	+ <button
	+ class="btn button-default"
	+ @click.prevent="cancel"
	+ >
	+ {{ $t('post_status.close_confirm_continue_composing_button') }}
	+ </button>
	+ </template>
	+ </dialog-modal>
	+ </teleport>
	+</template>
	+
	+<script src="./draft_closer.js"></script>
	diff --git a/src/components/drafts/drafts.js b/src/components/drafts/drafts.js
	new file mode 100644
	index 0000000000..201417f663
	--- /dev/null
	+++ b/src/components/drafts/drafts.js
	@@ -0,0 +1,16 @@
	+import Draft from 'src/components/draft/draft.vue'
	+import List from 'src/components/list/list.vue'
	+
	+const Drafts = {
	+ components: {
	+ Draft,
	+ List
	+ },
	+ computed: {
	+ drafts () {
	+ return this.$store.getters.draftsArray
	+ }
	+ }
	+}
	+
	+export default Drafts
	diff --git a/src/components/drafts/drafts.vue b/src/components/drafts/drafts.vue
	new file mode 100644
	index 0000000000..e64a506e52
	--- /dev/null
	+++ b/src/components/drafts/drafts.vue
	@@ -0,0 +1,24 @@
	+<template>
	+ <div class="Drafts">
	+ <div class="panel panel-default">
	+ <div class="panel-heading">
	+ <div class="title">
	+ {{ $t('drafts.drafts') }}
	+ </div>
	+ </div>
	+ <div class="panel-body">
	+ <List
	+ :items="drafts"
	+ >
	+ <template #item="{ item: draft }">
	+ <Draft
	+ :draft="draft"
	+ />
	+ </template>
	+ </List>
	+ </div>
	+ </div>
	+ </div>
	+</template>
	+
	+<script src="./drafts.js"></script>
	diff --git a/src/components/edit_status_form/edit_status_form.js b/src/components/edit_status_form/edit_status_form.js
	new file mode 100644
	index 0000000000..3237633709
	--- /dev/null
	+++ b/src/components/edit_status_form/edit_status_form.js
	@@ -0,0 +1,44 @@
	+import PostStatusForm from '../post_status_form/post_status_form.vue'
	+import statusPosterService from '../../services/status_poster/status_poster.service.js'
	+
	+const EditStatusForm = {
	+ components: {
	+ PostStatusForm
	+ },
	+ props: {
	+ params: {
	+ type: Object,
	+ required: true
	+ }
	+ },
	+ methods: {
	+ requestClose () {
	+ this.$refs.postStatusForm.requestClose()
	+ },
	+ doEditStatus ({ status, spoilerText, sensitive, media, contentType, poll }) {
	+ const params = {
	+ store: this.$store,
	+ statusId: this.params.statusId,
	+ status,
	+ spoilerText,
	+ sensitive,
	+ poll,
	+ media,
	+ contentType
	+ }
	+
	+ return statusPosterService.editStatus(params)
	+ .then((data) => {
	+ return data
	+ })
	+ .catch((err) => {
	+ console.error('Error editing status', err)
	+ return {
	+ error: err.message
	+ }
	+ })
	+ }
	+ }
	+}
	+
	+export default EditStatusForm
	diff --git a/src/components/edit_status_form/edit_status_form.vue b/src/components/edit_status_form/edit_status_form.vue
	new file mode 100644
	index 0000000000..0a7ec760ad
	--- /dev/null
	+++ b/src/components/edit_status_form/edit_status_form.vue
	@@ -0,0 +1,11 @@
	+<template>
	+ <PostStatusForm
	+ ref="postStatusForm"
	+ v-bind="params"
	+ :post-handler="doEditStatus"
	+ :disable-polls="true"
	+ :disable-visibility-selector="true"
	+ />
	+</template>
	+
	+<script src="./edit_status_form.js"></script>
	diff --git a/src/components/edit_status_modal/edit_status_modal.js b/src/components/edit_status_modal/edit_status_modal.js
	index 75adfea755..0de2e53c79 100644
	--- a/src/components/edit_status_modal/edit_status_modal.js
	+++ b/src/components/edit_status_modal/edit_status_modal.js
	@@ -1,75 +1,54 @@
	-import PostStatusForm from '../post_status_form/post_status_form.vue'
	+import EditStatusForm from '../edit_status_form/edit_status_form.vue'
	import Modal from '../modal/modal.vue'
	-import statusPosterService from '../../services/status_poster/status_poster.service.js'
	import get from 'lodash/get'

	const EditStatusModal = {
	components: {
	- PostStatusForm,
	+ EditStatusForm,
	Modal
	},
	data () {
	return {
	resettingForm: false
	}
	},
	computed: {
	isLoggedIn () {
	return !!this.$store.state.users.currentUser
	},
	modalActivated () {
	return this.$store.state.editStatus.modalActivated
	},
	isFormVisible () {
	return this.isLoggedIn && !this.resettingForm && this.modalActivated
	},
	params () {
	return this.$store.state.editStatus.params \|\| {}
	}
	},
	watch: {
	params (newVal, oldVal) {
	if (get(newVal, 'statusId') !== get(oldVal, 'statusId')) {
	this.resettingForm = true
	this.$nextTick(() => {
	this.resettingForm = false
	})
	}
	},
	isFormVisible (val) {
	if (val) {
	this.$nextTick(() => this.$el && this.$el.querySelector('textarea').focus())
	}
	}
	},
	methods: {
	- doEditStatus ({ status, spoilerText, sensitive, media, contentType, poll }) {
	- const params = {
	- store: this.$store,
	- statusId: this.$store.state.editStatus.params.statusId,
	- status,
	- spoilerText,
	- sensitive,
	- poll,
	- media,
	- contentType
	- }
	-
	- return statusPosterService.editStatus(params)
	- .then((data) => {
	- return data
	- })
	- .catch((err) => {
	- console.error('Error editing status', err)
	- return {
	- error: err.message
	- }
	- })
	- },
	closeModal () {
	+ this.$refs.editStatusForm.requestClose()
	+ },
	+ doCloseModal () {
	this.$store.dispatch('closeEditStatusModal')
	}
	}
	}

	export default EditStatusModal
	diff --git a/src/components/edit_status_modal/edit_status_modal.vue b/src/components/edit_status_modal/edit_status_modal.vue
	index 5001bd46c1..42073d7d3b 100644
	--- a/src/components/edit_status_modal/edit_status_modal.vue
	+++ b/src/components/edit_status_modal/edit_status_modal.vue
	@@ -1,51 +1,50 @@
	<template>
	<Modal
	v-if="isFormVisible"
	class="edit-form-modal-view"
	@backdropClicked="closeModal"
	>
	<div class="edit-form-modal-panel panel">
	<div class="panel-heading">
	<h1 class="title">
	{{ $t('post_status.edit_status') }}
	</h1>
	</div>
	- <PostStatusForm
	+ <EditStatusForm
	+ ref="editStatusForm"
	class="panel-body"
	- v-bind="params"
	- :post-handler="doEditStatus"
	- :disable-polls="true"
	- :disable-visibility-selector="true"
	- @posted="closeModal"
	+ :params="params"
	+ @posted="doCloseModal"
	+ @can-close="doCloseModal"
	/>
	</div>
	</Modal>
	</template>

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

	<style lang="scss">
	.modal-view.edit-form-modal-view {
	align-items: flex-start;
	}

	.edit-form-modal-panel {
	flex-shrink: 0;
	margin-top: 25%;
	margin-bottom: 2em;
	width: 100%;
	max-width: 700px;

	@media (orientation: landscape) {
	margin-top: 8%;
	}

	.form-bottom-left {
	max-width: 6.5em;

	.emoji-icon {
	justify-content: right;
	}
	}
	}
	</style>
	diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
	index 11863e975d..bc962e32f9 100644
	--- a/src/components/nav_panel/nav_panel.js
	+++ b/src/components/nav_panel/nav_panel.js
	@@ -1,136 +1,138 @@
	import BookmarkFoldersMenuContent from 'src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue'
	import ListsMenuContent from 'src/components/lists_menu/lists_menu_content.vue'
	import { mapState, mapGetters } from 'vuex'
	import { TIMELINES, ROOT_ITEMS } from 'src/components/navigation/navigation.js'
	import { filterNavigation } from 'src/components/navigation/filter.js'
	import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
	import NavigationPins from 'src/components/navigation/navigation_pins.vue'
	import Checkbox from 'src/components/checkbox/checkbox.vue'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faUsers,
	faGlobe,
	faBookmark,
	faEnvelope,
	faChevronDown,
	faChevronUp,
	faComments,
	faBell,
	faInfoCircle,
	faStream,
	faList,
	- faBullhorn
	+ faBullhorn,
	+ faFilePen
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faUsers,
	faGlobe,
	faBookmark,
	faEnvelope,
	faChevronDown,
	faChevronUp,
	faComments,
	faBell,
	faInfoCircle,
	faStream,
	faList,
	- faBullhorn
	+ faBullhorn,
	+ faFilePen
	)
	const NavPanel = {
	props: ['forceExpand', 'forceEditMode'],
	created () {
	},
	components: {
	BookmarkFoldersMenuContent,
	ListsMenuContent,
	NavigationEntry,
	NavigationPins,
	Checkbox
	},
	data () {
	return {
	editMode: false,
	showTimelines: false,
	showLists: false,
	showBookmarkFolders: false,
	timelinesList: Object.entries(TIMELINES).map(([k, v]) => ({ ...v, name: k })),
	rootList: Object.entries(ROOT_ITEMS).map(([k, v]) => ({ ...v, name: k }))
	}
	},
	methods: {
	toggleTimelines () {
	this.showTimelines = !this.showTimelines
	},
	toggleLists () {
	this.showLists = !this.showLists
	},
	toggleBookmarkFolders () {
	this.showBookmarkFolders = !this.showBookmarkFolders
	},
	toggleEditMode () {
	this.editMode = !this.editMode
	},
	toggleCollapse () {
	this.$store.commit('setPreference', { path: 'simple.collapseNav', value: !this.collapsed })
	this.$store.dispatch('pushServerSideStorage')
	},
	isPinned (item) {
	return this.pinnedItems.has(item)
	},
	togglePin (item) {
	if (this.isPinned(item)) {
	this.$store.commit('removeCollectionPreference', { path: 'collections.pinnedNavItems', value: item })
	} else {
	this.$store.commit('addCollectionPreference', { path: 'collections.pinnedNavItems', value: item })
	}
	this.$store.dispatch('pushServerSideStorage')
	}
	},
	computed: {
	...mapState({
	currentUser: state => state.users.currentUser,
	followRequestCount: state => state.api.followRequests.length,
	privateMode: state => state.instance.private,
	federating: state => state.instance.federating,
	pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
	supportsAnnouncements: state => state.announcements.supportsAnnouncements,
	pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems),
	collapsed: state => state.serverSideStorage.prefsStorage.simple.collapseNav,
	bookmarkFolders: state => state.instance.pleromaBookmarkFoldersAvailable
	}),
	timelinesItems () {
	return filterNavigation(
	Object
	.entries({ ...TIMELINES })
	.map(([k, v]) => ({ ...v, name: k })),
	{
	hasChats: this.pleromaChatMessagesAvailable,
	hasAnnouncements: this.supportsAnnouncements,
	isFederating: this.federating,
	isPrivate: this.privateMode,
	currentUser: this.currentUser,
	supportsBookmarkFolders: this.bookmarkFolders
	}
	)
	},
	rootItems () {
	return filterNavigation(
	Object
	.entries({ ...ROOT_ITEMS })
	.map(([k, v]) => ({ ...v, name: k })),
	{
	hasChats: this.pleromaChatMessagesAvailable,
	hasAnnouncements: this.supportsAnnouncements,
	isFederating: this.federating,
	isPrivate: this.privateMode,
	currentUser: this.currentUser,
	supportsBookmarkFolders: this.bookmarkFolders
	}
	)
	},
	...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
	}
	}

	export default NavPanel
	diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js
	index 156cd8cb3f..46ed3f8c25 100644
	--- a/src/components/navigation/navigation.js
	+++ b/src/components/navigation/navigation.js
	@@ -1,108 +1,118 @@
	// routes that take :username property
	export const USERNAME_ROUTES = new Set([
	'dms',
	'interactions',
	'notifications',
	'chat',
	'chats'
	])

	// routes that take :name property
	export const NAME_ROUTES = new Set([
	'user-profile',
	'legacy-user-profile'
	])

	export const TIMELINES = {
	home: {
	route: 'friends',
	icon: 'home',
	label: 'nav.home_timeline',
	criteria: ['!private']
	},
	public: {
	route: 'public-timeline',
	anon: true,
	icon: 'users',
	label: 'nav.public_tl',
	criteria: ['!private']
	},
	twkn: {
	route: 'public-external-timeline',
	anon: true,
	icon: 'globe',
	label: 'nav.twkn',
	criteria: ['!private', 'federating']
	},
	bookmarks: {
	route: 'bookmarks',
	icon: 'bookmark',
	label: 'nav.bookmarks',
	criteria: ['!supportsBookmarkFolders']
	},
	favorites: {
	routeObject: { name: 'user-profile', query: { tab: 'favorites' } },
	icon: 'star',
	label: 'user_card.favorites'
	},
	dms: {
	route: 'dms',
	icon: 'envelope',
	label: 'nav.dms'
	}
	}

	export const ROOT_ITEMS = {
	interactions: {
	route: 'interactions',
	icon: 'bell',
	label: 'nav.interactions'
	},
	chats: {
	route: 'chats',
	icon: 'comments',
	label: 'nav.chats',
	+ badgeStyle: 'notification',
	badgeGetter: 'unreadChatCount',
	criteria: ['chats']
	},
	friendRequests: {
	route: 'friend-requests',
	icon: 'user-plus',
	label: 'nav.friend_requests',
	+ badgeStyle: 'notification',
	criteria: ['lockedUser'],
	badgeGetter: 'followRequestCount'
	},
	about: {
	route: 'about',
	anon: true,
	icon: 'info-circle',
	label: 'nav.about'
	},
	announcements: {
	route: 'announcements',
	icon: 'bullhorn',
	label: 'nav.announcements',
	+ badgeStyle: 'notification',
	badgeGetter: 'unreadAnnouncementCount',
	criteria: ['announcements']
	+ },
	+ drafts: {
	+ route: 'drafts',
	+ icon: 'file-pen',
	+ label: 'nav.drafts',
	+ badgeStyle: 'neutral',
	+ badgeGetter: 'draftCount'
	}
	}

	export function routeTo (item, currentUser) {
	if (!item.route && !item.routeObject) return null

	let route

	if (item.routeObject) {
	route = item.routeObject
	} else {
	route = { name: (item.anon \|\| currentUser) ? item.route : item.anonRoute }
	}

	if (USERNAME_ROUTES.has(route.name)) {
	route.params = { username: currentUser.screen_name }
	} else if (NAME_ROUTES.has(route.name)) {
	route.params = { name: currentUser.screen_name }
	}

	return route
	}
	diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
	index 024ee31489..4b6c8e2994 100644
	--- a/src/components/navigation/navigation_entry.vue
	+++ b/src/components/navigation/navigation_entry.vue
	@@ -1,146 +1,147 @@
	<template>
	<OptionalRouterLink
	v-slot="{ isActive, href, navigate } = {}"
	:to="routeTo"
	>
	<li
	class="NavigationEntry menu-item"
	:class="{ '-active': isActive }"
	v-bind="$attrs"
	>
	<component
	:is="routeTo ? 'a' : 'button'"
	class="main-link"
	:href="href"
	@click="navigate"
	>
	<span>
	<FAIcon
	v-if="item.icon"
	fixed-width
	class="fa-scale-110 menu-icon"
	:icon="item.icon"
	/>
	</span>
	<img
	v-if="item.iconEmojiUrl"
	class="menu-icon iconEmoji iconEmoji-image"
	:src="item.iconEmojiUrl"
	:alt="item.iconEmoji"
	:title="item.iconEmoji"
	>
	<span
	v-else-if="item.iconEmoji"
	class="menu-icon iconEmoji"
	>
	<span>
	{{ item.iconEmoji }}
	</span>
	</span>
	<span
	v-else-if="item.iconLetter"
	class="icon iconLetter fa-scale-110 menu-icon"
	>{{ item.iconLetter }}</span>
	<span class="label">
	{{ item.labelRaw \|\| $t(item.label) }}
	</span>
	</component>
	<slot />
	<div
	v-if="item.badgeGetter && getters[item.badgeGetter]"
	- class="badge -notification"
	+ class="badge"
	+ :class="[`-${item.badgeStyle}`]"
	>
	{{ getters[item.badgeGetter] }}
	</div>
	<button
	v-if="showPin && currentUser"
	type="button"
	class="button-unstyled extra-button"
	:title="$t(isPinned ? 'general.unpin' : 'general.pin' )"
	:aria-pressed="!!isPinned"
	@click.stop.prevent="togglePin(item.name)"
	>
	<FAIcon
	v-if="showPin && currentUser"
	fixed-width
	class="fa-scale-110"
	:class="{ 'veryfaint': !isPinned(item.name) }"
	:transform="!isPinned(item.name) ? 'rotate-45' : ''"
	icon="thumbtack"
	/>
	</button>
	</li>
	</OptionalRouterLink>
	</template>

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

	<style lang="scss">
	.NavigationEntry.menu-item {
	--__line-height: 2.5em;
	--__horizontal-gap: 0.5em;
	--__vertical-gap: 0.4em;

	padding: 0;
	display: flex;
	align-items: baseline;

	&[aria-expanded] {
	padding-right: var(--__horizontal-gap);
	}

	.main-link {
	line-height: var(--__line-height);
	box-sizing: border-box;
	flex: 1;
	padding: var(--__vertical-gap) var(--__horizontal-gap);
	}

	.menu-icon {
	line-height: var(--__line-height);
	padding: 0;
	width: var(--__line-height);
	margin-right: var(--__horizontal-gap);
	}

	.timelines-chevron {
	line-height: var(--__line-height);
	padding: 0;
	width: var(--__line-height);
	margin-right: 0;
	}

	.extra-button {
	line-height: var(--__line-height);
	padding: 0;
	width: var(--__line-height);
	text-align: center;

	&:last-child {
	margin-right: calc(-1 * var(--__horizontal-gap));
	}
	}

	.badge {
	margin: 0 var(--__horizontal-gap);
	}

	.iconEmoji {
	display: inline-block;
	text-align: center;
	object-fit: contain;
	vertical-align: middle;
	height: var(--__line-height);
	width: var(--__line-height);

	> span {
	font-size: 1.5rem;
	}
	}

	img.iconEmoji {
	padding: 0.25rem;
	box-sizing: border-box;
	}
	}
	</style>
	diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
	index decd1c04b4..37351b9182 100644
	--- a/src/components/navigation/navigation_pins.vue
	+++ b/src/components/navigation/navigation_pins.vue
	@@ -1,57 +1,66 @@
	<template>
	<span class="NavigationPins">
	<router-link
	v-for="item in pinnedList"
	:key="item.name"
	class="button-unstyled pinned-item"
	active-class="toggled"
	:to="getRouteTo(item)"
	:title="item.labelRaw \|\| $t(item.label)"
	>
	<FAIcon
	v-if="item.icon"
	fixed-width
	:icon="item.icon"
	/>
	<span
	v-if="item.iconLetter"
	class="iconLetter fa-scale-110 fa-old-padding"
	>{{ item.iconLetter }}</span>
	<div
	v-if="item.badgeGetter && getters[item.badgeGetter]"
	- class="badge -dot -notification"
	+ class="badge -dot"
	+ :class="[`-${item.badgeStyle}`]"
	/>
	</router-link>
	</span>
	</template>

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

	<style lang="scss">
	.NavigationPins {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	height: 100%;

	+ &.alert-dot-notification {
	+ background-color: var(--badgeNotification);
	+ }
	+
	+ &.alert-dot-neutral {
	+ background-color: var(--badgeNeutral);
	+ }
	+
	.pinned-item {
	position: relative;
	flex: 1 0 3em;
	min-width: 2em;
	text-align: center;
	overflow: visible;
	box-sizing: border-box;
	height: 100%;

	& .svg-inline--fa,
	& .iconLetter {
	margin: 0;
	}

	&.toggled {
	margin-bottom: -4px;
	border-bottom: 4px solid;
	}
	}
	}
	</style>
	diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
	index a207015537..29ccbc4bf7 100644
	--- a/src/components/poll/poll_form.js
	+++ b/src/components/poll/poll_form.js
	@@ -1,127 +1,127 @@
	import * as DateUtils from 'src/services/date_utils/date_utils.js'
	-import { uniq } from 'lodash'
	+import { pollFallback } from 'src/services/poll/poll.service.js'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import Select from '../select/select.vue'
	import {
	faTimes,
	faPlus
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faTimes,
	faPlus
	)

	export default {
	components: {
	Select
	},
	name: 'PollForm',
	- props: ['visible'],
	- data: () => ({
	- pollType: 'single',
	- options: ['', ''],
	- expiryAmount: 10,
	- expiryUnit: 'minutes'
	- }),
	+ props: {
	+ visible: {},
	+ params: {
	+ type: Object,
	+ required: true
	+ }
	+ },
	computed: {
	+ pollType: {
	+ get () { return pollFallback(this.params, 'pollType') },
	+ set (newVal) { this.params.pollType = newVal }
	+ },
	+ options () {
	+ const hasOptions = !!this.params.options
	+ if (!hasOptions) {
	+ this.params.options = pollFallback(this.params, 'options')
	+ }
	+ return this.params.options
	+ },
	+ expiryAmount: {
	+ get () { return pollFallback(this.params, 'expiryAmount') },
	+ set (newVal) { this.params.expiryAmount = newVal }
	+ },
	+ expiryUnit: {
	+ get () { return pollFallback(this.params, 'expiryUnit') },
	+ set (newVal) { this.params.expiryUnit = newVal }
	+ },
	pollLimits () {
	return this.$store.state.instance.pollLimits
	},
	maxOptions () {
	return this.pollLimits.max_options
	},
	maxLength () {
	return this.pollLimits.max_option_chars
	},
	expiryUnits () {
	const allUnits = ['minutes', 'hours', 'days']
	const expiry = this.convertExpiryFromUnit
	return allUnits.filter(
	unit => this.pollLimits.max_expiration >= expiry(unit, 1)
	)
	},
	minExpirationInCurrentUnit () {
	return Math.ceil(
	this.convertExpiryToUnit(
	this.expiryUnit,
	this.pollLimits.min_expiration
	)
	)
	},
	maxExpirationInCurrentUnit () {
	return Math.floor(
	this.convertExpiryToUnit(
	this.expiryUnit,
	this.pollLimits.max_expiration
	)
	)
	}
	},
	methods: {
	clear () {
	this.pollType = 'single'
	this.options = ['', '']
	this.expiryAmount = 10
	this.expiryUnit = 'minutes'
	},
	nextOption (index) {
	const element = this.$el.querySelector(`#poll-${index + 1}`)
	if (element) {
	element.focus()
	} else {
	// Try adding an option and try focusing on it
	const addedOption = this.addOption()
	if (addedOption) {
	this.$nextTick(function () {
	this.nextOption(index)
	})
	}
	}
	},
	addOption () {
	if (this.options.length < this.maxOptions) {
	this.options.push('')
	return true
	}
	return false
	},
	deleteOption (index, event) {
	if (this.options.length > 2) {
	this.options.splice(index, 1)
	- this.updatePollToParent()
	}
	},
	convertExpiryToUnit (unit, amount) {
	// Note: we want seconds and not milliseconds
	return DateUtils.secondsToUnit(unit, amount)
	},
	convertExpiryFromUnit (unit, amount) {
	return DateUtils.unitToSeconds(unit, amount)
	},
	expiryAmountChange () {
	this.expiryAmount =
	Math.max(this.minExpirationInCurrentUnit, this.expiryAmount)
	this.expiryAmount =
	Math.min(this.maxExpirationInCurrentUnit, this.expiryAmount)
	- this.updatePollToParent()
	- },
	- updatePollToParent () {
	- const expiresIn = this.convertExpiryFromUnit(
	- this.expiryUnit,
	- this.expiryAmount
	- )
	-
	- const options = uniq(this.options.filter(option => option !== ''))
	- if (options.length < 2) {
	- this.$emit('update-poll', { error: this.$t('polls.not_enough_options') })
	- return
	- }
	- this.$emit('update-poll', {
	- options,
	- multiple: this.pollType === 'multiple',
	- expiresIn
	- })
	}
	}
	}
	diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
	index 563dfb966c..1ae985498e 100644
	--- a/src/components/post_status_form/post_status_form.js
	+++ b/src/components/post_status_form/post_status_form.js
	@@ -1,672 +1,813 @@
	import statusPoster from '../../services/status_poster/status_poster.service.js'
	import genRandomSeed from '../../services/random_seed/random_seed.service.js'
	import MediaUpload from '../media_upload/media_upload.vue'
	import ScopeSelector from '../scope_selector/scope_selector.vue'
	import EmojiInput from '../emoji_input/emoji_input.vue'
	import PollForm from '../poll/poll_form.vue'
	import Attachment from '../attachment/attachment.vue'
	import Gallery from 'src/components/gallery/gallery.vue'
	import StatusContent from '../status_content/status_content.vue'
	import fileTypeService from '../../services/file_type/file_type.service.js'
	import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
	import { propsToNative } from '../../services/attributes_helper/attributes_helper.service.js'
	+import { pollFormToMasto } from 'src/services/poll/poll.service.js'
	import { reject, map, uniqBy, debounce } from 'lodash'
	import suggestor from '../emoji_input/suggestor.js'
	import { mapGetters, mapState } from 'vuex'
	import Checkbox from '../checkbox/checkbox.vue'
	import Select from '../select/select.vue'
	+import DraftCloser from 'src/components/draft_closer/draft_closer.vue'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faSmileBeam,
	faPollH,
	faUpload,
	faBan,
	faTimes,
	faCircleNotch
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faSmileBeam,
	faPollH,
	faUpload,
	faBan,
	faTimes,
	faCircleNotch
	)

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

	allAttentions.unshift(user)

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

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

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

	// Converts a string with px to a number like '2px' -> 2
	const pxStringToNumber = (str) => {
	return Number(str.substring(0, str.length - 2))
	}

	+const typeAndRefId = ({ replyTo, profileMention, statusId }) => {
	+ if (replyTo) {
	+ return ['reply', replyTo]
	+ } else if (profileMention) {
	+ return ['mention', profileMention]
	+ } else if (statusId) {
	+ return ['edit', statusId]
	+ } else {
	+ return ['new', '']
	+ }
	+}
	+
	const PostStatusForm = {
	props: [
	'statusId',
	'statusText',
	'statusIsSensitive',
	'statusPoll',
	'statusFiles',
	'statusMediaDescriptions',
	'statusScope',
	'statusContentType',
	'replyTo',
	'repliedUser',
	'attentions',
	'copyMessageScope',
	'subject',
	'disableSubject',
	'disableScopeSelector',
	'disableVisibilitySelector',
	'disableNotice',
	'disableLockWarning',
	'disablePolls',
	'disableSensitivityCheckbox',
	'disableSubmit',
	'disablePreview',
	+ 'disableDraft',
	'placeholder',
	'maxHeight',
	'postHandler',
	'preserveFocus',
	'autoFocus',
	'fileLimit',
	'submitOnEnter',
	'emojiPickerPlacement',
	'optimisticPosting',
	- 'profileMention'
	+ 'profileMention',
	+ 'draftId'
	],
	emits: [
	'posted',
	'resize',
	'mediaplay',
	- 'mediapause'
	+ 'mediapause',
	+ 'can-close'
	],
	components: {
	MediaUpload,
	EmojiInput,
	PollForm,
	ScopeSelector,
	Checkbox,
	Select,
	Attachment,
	StatusContent,
	- Gallery
	+ Gallery,
	+ DraftCloser
	},
	mounted () {
	this.updateIdempotencyKey()
	this.resize(this.$refs.textarea)

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

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

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

	- if (this.replyTo \|\| this.profileMention) {
	- const currentUser = this.$store.state.users.currentUser
	- statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
	- }
	+ const [statusType, refId] = typeAndRefId({ replyTo: this.replyTo, profileMention: this.profileMention && this.repliedUser?.id, statusId: this.statusId })

	- const scope = ((this.copyMessageScope && scopeCopy) \|\| this.copyMessageScope === 'direct')
	- ? this.copyMessageScope
	- : this.$store.state.users.currentUser.default_scope
	-
	- const { postContentType: contentType, sensitiveByDefault } = this.$store.getters.mergedConfig
	-
	- let statusParams = {
	- spoilerText: this.subject \|\| '',
	- status: statusText,
	- nsfw: !!sensitiveByDefault,
	- files: [],
	- poll: {},
	- mediaDescriptions: {},
	- visibility: scope,
	- contentType
	- }
	+ // If we are starting a new post, do not associate it with old drafts
	+ let statusParams = !this.disableDraft && (this.draftId \|\| statusType !== 'new') ? this.getDraft(statusType, refId) : null
	+
	+ if (!statusParams) {
	+ if (statusType === 'reply' \|\| statusType === 'mention') {
	+ const currentUser = this.$store.state.users.currentUser
	+ statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
	+ }
	+
	+ const scope = ((this.copyMessageScope && scopeCopy) \|\| this.copyMessageScope === 'direct')
	+ ? this.copyMessageScope
	+ : this.$store.state.users.currentUser.default_scope
	+
	+ const { postContentType: contentType, sensitiveByDefault } = this.$store.getters.mergedConfig

	- if (this.statusId) {
	- const statusContentType = this.statusContentType \|\| contentType
	statusParams = {
	+ type: statusType,
	+ refId,
	spoilerText: this.subject \|\| '',
	- status: this.statusText \|\| '',
	- nsfw: this.statusIsSensitive \|\| !!sensitiveByDefault,
	- files: this.statusFiles \|\| [],
	- poll: this.statusPoll \|\| {},
	- mediaDescriptions: this.statusMediaDescriptions \|\| {},
	- visibility: this.statusScope \|\| scope,
	- contentType: statusContentType,
	+ status: statusText,
	+ nsfw: !!sensitiveByDefault,
	+ files: [],
	+ poll: {},
	+ hasPoll: false,
	+ mediaDescriptions: {},
	+ visibility: scope,
	+ contentType,
	quoting: false
	}
	+
	+ if (statusType === 'edit') {
	+ const statusContentType = this.statusContentType \|\| contentType
	+ statusParams = {
	+ type: statusType,
	+ refId,
	+ spoilerText: this.subject \|\| '',
	+ status: this.statusText \|\| '',
	+ nsfw: this.statusIsSensitive \|\| !!sensitiveByDefault,
	+ files: this.statusFiles \|\| [],
	+ poll: this.statusPoll \|\| {},
	+ hasPoll: false,
	+ mediaDescriptions: this.statusMediaDescriptions \|\| {},
	+ visibility: this.statusScope \|\| scope,
	+ contentType: statusContentType
	+ }
	+ }
	}

	return {
	randomSeed: genRandomSeed(),
	dropFiles: [],
	uploadingFiles: false,
	error: null,
	posting: false,
	highlighted: 0,
	newStatus: statusParams,
	caret: 0,
	- pollFormVisible: false,
	showDropIcon: 'hide',
	dropStopTimeout: null,
	preview: null,
	previewLoading: false,
	emojiInputShown: false,
	- idempotencyKey: ''
	+ idempotencyKey: '',
	+ saveInhibited: true,
	+ savable: false
	}
	},
	computed: {
	users () {
	return this.$store.state.users.users
	},
	userDefaultScope () {
	return this.$store.state.users.currentUser.default_scope
	},
	showAllScopes () {
	return !this.mergedConfig.minimalScopesMode
	},
	emojiUserSuggestor () {
	return suggestor({
	emoji: [
	...this.$store.getters.standardEmojiList,
	...this.$store.state.instance.customEmoji
	],
	store: this.$store
	})
	},
	emojiSuggestor () {
	return suggestor({
	emoji: [
	...this.$store.getters.standardEmojiList,
	...this.$store.state.instance.customEmoji
	]
	})
	},
	emoji () {
	return this.$store.getters.standardEmojiList \|\| []
	},
	customEmoji () {
	return this.$store.state.instance.customEmoji \|\| []
	},
	statusLength () {
	return this.newStatus.status.length
	},
	spoilerTextLength () {
	return this.newStatus.spoilerText.length
	},
	statusLengthLimit () {
	return this.$store.state.instance.textlimit
	},
	hasStatusLengthLimit () {
	return this.statusLengthLimit > 0
	},
	charactersLeft () {
	return this.statusLengthLimit - (this.statusLength + this.spoilerTextLength)
	},
	isOverLengthLimit () {
	return this.hasStatusLengthLimit && (this.charactersLeft < 0)
	},
	minimalScopesMode () {
	return this.$store.state.instance.minimalScopesMode
	},
	alwaysShowSubject () {
	return this.mergedConfig.alwaysShowSubjectInput
	},
	postFormats () {
	return this.$store.state.instance.postFormats \|\| []
	},
	safeDMEnabled () {
	return this.$store.state.instance.safeDM
	},
	pollsAvailable () {
	return this.$store.state.instance.pollsAvailable &&
	this.$store.state.instance.pollLimits.max_options >= 2 &&
	this.disablePolls !== true
	},
	hideScopeNotice () {
	return this.disableNotice \|\| this.$store.getters.mergedConfig.hideScopeNotice
	},
	pollContentError () {
	return this.pollFormVisible &&
	this.newStatus.poll &&
	this.newStatus.poll.error
	},
	showPreview () {
	return !this.disablePreview && (!!this.preview \|\| this.previewLoading)
	},
	emptyStatus () {
	return this.newStatus.status.trim() === '' && this.newStatus.files.length === 0
	},
	uploadFileLimitReached () {
	return this.newStatus.files.length >= this.fileLimit
	},
	isEdit () {
	return typeof this.statusId !== 'undefined' && this.statusId.trim() !== ''
	},
	quotable () {
	if (!this.$store.state.instance.quotingAvailable) {
	return false
	}

	if (!this.replyTo) {
	return false
	}

	const repliedStatus = this.$store.state.statuses.allStatusesObject[this.replyTo]
	if (!repliedStatus) {
	return false
	}

	if (repliedStatus.visibility === 'public' \|\|
	repliedStatus.visibility === 'unlisted' \|\|
	repliedStatus.visibility === 'local') {
	return true
	} else if (repliedStatus.visibility === 'private') {
	return repliedStatus.user.id === this.$store.state.users.currentUser.id
	}

	return false
	},
	+ debouncedMaybeAutoSaveDraft () {
	+ return debounce(this.maybeAutoSaveDraft, 3000)
	+ },
	+ pollFormVisible () {
	+ return this.newStatus.hasPoll
	+ },
	+ shouldAutoSaveDraft () {
	+ return this.$store.getters.mergedConfig.autoSaveDraft
	+ },
	+ autoSaveState () {
	+ if (this.savable) {
	+ return this.$t('post_status.auto_save_saving')
	+ } else if (this.newStatus.id) {
	+ return this.$t('post_status.auto_save_saved')
	+ } else {
	+ return this.$t('post_status.auto_save_nothing_new')
	+ }
	+ },
	...mapGetters(['mergedConfig']),
	...mapState({
	mobileLayout: state => state.interface.mobileLayout
	})
	},
	watch: {
	newStatus: {
	deep: true,
	handler () {
	this.statusChanged()
	}
	+ },
	+ savable (val) {
	+ // https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#usage_notes
	+ // MDN says we'd better add the beforeunload event listener only when needed, and remove it when it's no longer needed
	+ if (val) {
	+ this.addBeforeUnloadListener()
	+ } else {
	+ this.removeBeforeUnloadListener()
	+ }
	}
	},
	+ beforeUnmount () {
	+ this.maybeAutoSaveDraft()
	+ this.removeBeforeUnloadListener()
	+ },
	methods: {
	statusChanged () {
	this.autoPreview()
	this.updateIdempotencyKey()
	+ this.debouncedMaybeAutoSaveDraft()
	+ this.savable = true
	+ this.saveInhibited = false
	},
	clearStatus () {
	const newStatus = this.newStatus
	+ this.saveInhibited = true
	this.newStatus = {
	status: '',
	spoilerText: '',
	files: [],
	visibility: newStatus.visibility,
	contentType: newStatus.contentType,
	poll: {},
	+ hasPoll: false,
	mediaDescriptions: {},
	quoting: false
	}
	- this.pollFormVisible = false
	this.$refs.mediaUpload && this.$refs.mediaUpload.clearFile()
	this.clearPollForm()
	if (this.preserveFocus) {
	this.$nextTick(() => {
	this.$refs.textarea.focus()
	})
	}
	const el = this.$el.querySelector('textarea')
	el.style.height = 'auto'
	el.style.height = undefined
	this.error = null
	if (this.preview) this.previewStatus()
	+ this.savable = false
	},
	async postStatus (event, newStatus, opts = {}) {
	if (this.posting && !this.optimisticPosting) { return }
	if (this.disableSubmit) { return }
	if (this.emojiInputShown) { return }
	if (this.submitOnEnter) {
	event.stopPropagation()
	event.preventDefault()
	}

	if (this.optimisticPosting && (this.emptyStatus \|\| this.isOverLengthLimit)) { return }

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

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

	this.posting = true

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

	const replyOrQuoteAttr = newStatus.quoting ? 'quoteId' : 'inReplyToStatusId'

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

	const postHandler = this.postHandler ? this.postHandler : statusPoster.postStatus

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

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

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

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

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

	const oldHeight = pxStringToNumber(target.style.height)

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

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

	// BEGIN content size update
	target.style.height = 'auto'
	const heightWithoutPadding = Math.floor(target.scrollHeight - vertPadding)
	let newHeight = this.maxHeight ? Math.min(heightWithoutPadding, this.maxHeight) : heightWithoutPadding
	// This is a bit of a hack to combat target.scrollHeight being different on every other input
	// on some browsers for whatever reason. Don't change the height if difference is 1px or less.
	if (Math.abs(newHeight - oldHeight) <= 1) {
	newHeight = oldHeight
	}
	target.style.height = `${newHeight}px`
	this.$emit('resize', newHeight)
	// END content size update

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

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

	if (scrollerRef === window) {
	scrollerRef.scroll(0, targetScroll)
	} else {
	scrollerRef.scrollTop = targetScroll
	}
	},
	showEmojiPicker () {
	this.$refs.textarea.focus()
	this.$refs['emoji-input'].triggerShowPicker()
	},
	clearError () {
	this.error = null
	},
	changeVis (visibility) {
	this.newStatus.visibility = visibility
	},
	togglePollForm () {
	- this.pollFormVisible = !this.pollFormVisible
	+ this.newStatus.hasPoll = !this.newStatus.hasPoll
	},
	setPoll (poll) {
	this.newStatus.poll = poll
	},
	clearPollForm () {
	if (this.$refs.pollForm) {
	this.$refs.pollForm.clear()
	}
	},
	dismissScopeNotice () {
	this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })
	},
	setMediaDescription (id) {
	const description = this.newStatus.mediaDescriptions[id]
	if (!description \|\| description.trim() === '') return
	return statusPoster.setMediaDescription({ store: this.$store, id, description })
	},
	setAllMediaDescriptions () {
	const ids = this.newStatus.files.map(file => file.id)
	return Promise.all(ids.map(id => this.setMediaDescription(id)))
	},
	handleEmojiInputShow (value) {
	this.emojiInputShown = value
	},
	updateIdempotencyKey () {
	this.idempotencyKey = Date.now().toString()
	},
	openProfileTab () {
	this.$store.dispatch('openSettingsModalTab', 'profile')
	},
	propsToNative (props) {
	return propsToNative(props)
	+ },
	+ saveDraft () {
	+ if (!this.disableDraft &&
	+ !this.saveInhibited) {
	+ if (this.newStatus.status \|\|
	+ this.newStatus.files?.length \|\|
	+ this.newStatus.hasPoll) {
	+ return this.$store.dispatch('addOrSaveDraft', { draft: this.newStatus })
	+ .then(id => {
	+ if (this.newStatus.id !== id) {
	+ this.newStatus.id = id
	+ }
	+ this.savable = false
	+ })
	+ } else if (this.newStatus.id) {
	+ // There is a draft, but there is nothing in it, clear it
	+ return this.abandonDraft()
	+ .then(() => {
	+ this.savable = false
	+ })
	+ }
	+ }
	+ return Promise.resolve()
	+ },
	+ maybeAutoSaveDraft () {
	+ if (this.shouldAutoSaveDraft) {
	+ this.saveDraft()
	+ }
	+ },
	+ abandonDraft () {
	+ return this.$store.dispatch('abandonDraft', { id: this.newStatus.id })
	+ },
	+ getDraft (statusType, refId) {
	+ const maybeDraft = this.$store.state.drafts.drafts[this.draftId]
	+ if (this.draftId && maybeDraft) {
	+ return maybeDraft
	+ } else {
	+ const existingDrafts = this.$store.getters.draftsByTypeAndRefId(statusType, refId)
	+
	+ if (existingDrafts.length) {
	+ return existingDrafts[0]
	+ }
	+ }
	+ // No draft available, fall back
	+ },
	+ requestClose () {
	+ if (!this.savable) {
	+ this.$emit('can-close')
	+ } else {
	+ this.$refs.draftCloser.requestClose()
	+ }
	+ },
	+ saveAndCloseDraft () {
	+ this.saveDraft().then(() => {
	+ this.$emit('can-close')
	+ })
	+ },
	+ discardAndCloseDraft () {
	+ this.abandonDraft().then(() => {
	+ this.$emit('can-close')
	+ })
	+ },
	+ addBeforeUnloadListener () {
	+ this._beforeUnloadListener \|\|= () => {
	+ this.saveDraft()
	+ }
	+ window.addEventListener('beforeunload', this._beforeUnloadListener)
	+ },
	+ removeBeforeUnloadListener () {
	+ if (this._beforeUnloadListener) {
	+ window.removeEventListener('beforeunload', this._beforeUnloadListener)
	+ }
	}
	}
	}

	export default PostStatusForm
	diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
	index e76b52a1cd..b7a169c58a 100644
	--- a/src/components/post_status_form/post_status_form.vue
	+++ b/src/components/post_status_form/post_status_form.vue
	@@ -1,614 +1,636 @@
	<template>
	<div
	ref="form"
	class="post-status-form"
	>
	<form
	autocomplete="off"
	@submit.prevent
	@dragover.prevent="fileDrag"
	>
	<div class="form-group">
	<i18n-t
	v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
	keypath="post_status.account_not_locked_warning"
	tag="p"
	class="visibility-notice"
	scope="global"
	>
	<button
	class="button-unstyled -link"
	@click="openProfileTab"
	>
	{{ $t('post_status.account_not_locked_warning_link') }}
	</button>
	</i18n-t>
	<p
	v-if="!hideScopeNotice && newStatus.visibility === 'public'"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.public') }}</span>
	<a
	class="fa-scale-110 fa-old-padding dismiss"
	:title="$t('post_status.scope_notice_dismiss')"
	role="button"
	tabindex="0"
	@click.prevent="dismissScopeNotice()"
	>
	<FAIcon icon="times" />
	</a>
	</p>
	<p
	v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.unlisted') }}</span>
	<a
	class="fa-scale-110 fa-old-padding dismiss"
	:title="$t('post_status.scope_notice_dismiss')"
	role="button"
	tabindex="0"
	@click.prevent="dismissScopeNotice()"
	>
	<FAIcon icon="times" />
	</a>
	</p>
	<p
	v-else-if="!hideScopeNotice && newStatus.visibility === 'private' && $store.state.users.currentUser.locked"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.private') }}</span>
	<a
	class="fa-scale-110 fa-old-padding dismiss"
	:title="$t('post_status.scope_notice_dismiss')"
	role="button"
	tabindex="0"
	@click.prevent="dismissScopeNotice()"
	>
	<FAIcon icon="times" />
	</a>
	</p>
	<p
	v-else-if="newStatus.visibility === 'direct'"
	class="visibility-notice"
	>
	<span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
	<span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
	</p>
	<div
	v-if="isEdit"
	class="visibility-notice edit-warning"
	>
	<p>{{ $t('post_status.edit_remote_warning') }}</p>
	<p>{{ $t('post_status.edit_unsupported_warning') }}</p>
	</div>
	<div
	v-if="!disablePreview"
	class="preview-heading faint"
	>
	<a
	class="preview-toggle faint"
	@click.stop.prevent="togglePreview"
	>
	{{ $t('post_status.preview') }}
	<FAIcon :icon="showPreview ? 'chevron-left' : 'chevron-right'" />
	</a>
	<div
	v-show="previewLoading"
	class="preview-spinner"
	>
	<FAIcon
	class="fa-old-padding"
	spin
	icon="circle-notch"
	/>
	</div>
	<div
	v-if="quotable"
	role="radiogroup"
	class="btn-group reply-or-quote-selector"
	>
	<button
	:id="`reply-or-quote-option-${randomSeed}-reply`"
	class="btn button-default reply-or-quote-option"
	:class="{ toggled: !newStatus.quoting }"
	tabindex="0"
	role="radio"
	:aria-labelledby="`reply-or-quote-option-${randomSeed}-reply`"
	:aria-checked="!newStatus.quoting"
	@click="newStatus.quoting = false"
	>
	{{ $t('post_status.reply_option') }}
	</button>
	<button
	:id="`reply-or-quote-option-${randomSeed}-quote`"
	class="btn button-default reply-or-quote-option"
	:class="{ toggled: newStatus.quoting }"
	tabindex="0"
	role="radio"
	:aria-labelledby="`reply-or-quote-option-${randomSeed}-quote`"
	:aria-checked="newStatus.quoting"
	@click="newStatus.quoting = true"
	>
	{{ $t('post_status.quote_option') }}
	</button>
	</div>
	</div>
	<div
	v-if="showPreview"
	class="preview-container"
	>
	<div
	v-if="!preview"
	class="preview-status"
	>
	{{ $t('general.loading') }}
	</div>
	<div
	v-else-if="preview.error"
	class="preview-status preview-error"
	>
	{{ preview.error }}
	</div>
	<StatusContent
	v-else
	:status="preview"
	class="preview-status"
	/>
	</div>
	<EmojiInput
	v-if="!disableSubject && (newStatus.spoilerText \|\| alwaysShowSubject)"
	v-model="newStatus.spoilerText"
	enable-emoji-picker
	:suggest="emojiSuggestor"
	class="input form-control"
	>
	<template #default="inputProps">
	<input
	v-model="newStatus.spoilerText"
	type="text"
	:placeholder="$t('post_status.content_warning')"
	:disabled="posting && !optimisticPosting"
	v-bind="propsToNative(inputProps)"
	size="1"
	class="input form-post-subject"
	>
	</template>
	</EmojiInput>
	<EmojiInput
	ref="emoji-input"
	v-model="newStatus.status"
	:suggest="emojiUserSuggestor"
	:placement="emojiPickerPlacement"
	class="input form-control main-input"
	enable-sticker-picker
	enable-emoji-picker
	hide-emoji-button
	:newline-on-ctrl-enter="submitOnEnter"
	@input="onEmojiInputInput"
	@sticker-uploaded="addMediaFile"
	@sticker-upload-failed="uploadFailed"
	@shown="handleEmojiInputShow"
	>
	<template #default="inputProps">
	<textarea
	ref="textarea"
	v-model="newStatus.status"
	:placeholder="placeholder \|\| $t('post_status.default')"
	rows="1"
	cols="1"
	:disabled="posting && !optimisticPosting"
	class="input form-post-body"
	:class="{ 'scrollable-form': !!maxHeight }"
	v-bind="propsToNative(inputProps)"
	@keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
	@keydown.meta.enter="postStatus($event, newStatus)"
	@keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
	@input="resize"
	@compositionupdate="resize"
	@paste="paste"
	/>
	<p
	v-if="hasStatusLengthLimit"
	class="character-counter faint"
	:class="{ error: isOverLengthLimit }"
	>
	{{ charactersLeft }}
	</p>
	</template>
	</EmojiInput>
	<div
	v-if="!disableScopeSelector"
	class="visibility-tray"
	>
	<scope-selector
	v-if="!disableVisibilitySelector"
	:show-all="showAllScopes"
	:user-default="userDefaultScope"
	:original-scope="copyMessageScope"
	:initial-scope="newStatus.visibility"
	:on-scope-change="changeVis"
	/>

	<div
	v-if="postFormats.length > 1"
	class="text-format"
	>
	<Select
	v-model="newStatus.contentType"
	class="input form-control"
	:attrs="{ 'aria-label': $t('post_status.content_type_selection') }"
	>
	<option
	v-for="postFormat in postFormats"
	:key="postFormat"
	:value="postFormat"
	>
	{{ $t(`post_status.content_type["${postFormat}"]`) }}
	</option>
	</Select>
	</div>
	<div
	v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
	class="text-format"
	>
	<span class="only-format">
	{{ $t(`post_status.content_type["${postFormats[0]}"]`) }}
	</span>
	</div>
	</div>
	</div>
	<poll-form
	v-if="pollsAvailable"
	ref="pollForm"
	:visible="pollFormVisible"
	- @update-poll="setPoll"
	+ :params="newStatus.poll"
	/>
	<div
	ref="bottom"
	class="form-bottom"
	>
	<div class="form-bottom-left">
	<media-upload
	ref="mediaUpload"
	class="media-upload-icon"
	:drop-files="dropFiles"
	:disabled="uploadFileLimitReached"
	@uploading="startedUploadingFiles"
	@uploaded="addMediaFile"
	@upload-failed="uploadFailed"
	@all-uploaded="finishedUploadingFiles"
	/>
	<button
	class="emoji-icon button-unstyled"
	:title="$t('emoji.add_emoji')"
	@click="showEmojiPicker"
	>
	<FAIcon icon="smile-beam" />
	</button>
	<button
	v-if="pollsAvailable"
	class="poll-icon button-unstyled"
	:class="{ selected: pollFormVisible }"
	:title="$t('polls.add_poll')"
	@click="togglePollForm"
	>
	<FAIcon icon="poll-h" />
	</button>
	</div>
	+ <span
	+ v-if="!disableDraft && shouldAutoSaveDraft"
	+ class="auto-save-status"
	+ >
	+ {{ autoSaveState }}
	+ </span>
	+ <button
	+ v-else-if="!disableDraft"
	+ class="btn button-default"
	+ @click="saveDraft"
	+ >
	+ {{ $t('post_status.save_to_drafts_button') }}
	+ </button>
	<button
	v-if="posting"
	disabled
	class="btn button-default"
	>
	{{ $t('post_status.posting') }}
	</button>
	<button
	v-else-if="isOverLengthLimit"
	disabled
	class="btn button-default"
	>
	{{ $t('post_status.post') }}
	</button>
	<button
	v-else
	:disabled="uploadingFiles \|\| disableSubmit"
	class="btn button-default"
	@click.stop.prevent="postStatus($event, newStatus)"
	>
	{{ $t('post_status.post') }}
	</button>
	</div>
	<div
	v-show="showDropIcon !== 'hide'"
	:style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
	class="drop-indicator"
	@dragleave="fileDragStop"
	@drop.stop="fileDrop"
	>
	<FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
	</div>
	<div
	v-if="error"
	class="alert error"
	>
	Error: {{ error }}
	<button
	class="button-unstyled"
	@click="clearError"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="times"
	/>
	</button>
	</div>
	<gallery
	v-if="newStatus.files && newStatus.files.length > 0"
	class="attachments"
	:grid="true"
	:nsfw="false"
	:attachments="newStatus.files"
	:descriptions="newStatus.mediaDescriptions"
	:set-media="() => $store.dispatch('setMedia', newStatus.files)"
	:editable="true"
	:edit-attachment="editAttachment"
	:remove-attachment="removeMediaFile"
	:shift-up-attachment="newStatus.files.length > 1 && shiftUpMediaFile"
	:shift-dn-attachment="newStatus.files.length > 1 && shiftDnMediaFile"
	@play="$emit('mediaplay', attachment.id)"
	@pause="$emit('mediapause', attachment.id)"
	/>
	<div
	v-if="newStatus.files.length > 0 && !disableSensitivityCheckbox"
	class="upload_settings"
	>
	<Checkbox v-model="newStatus.nsfw">
	{{ $t('post_status.attachments_sensitive') }}
	</Checkbox>
	</div>
	</form>
	+ <DraftCloser
	+ ref="draftCloser"
	+ @save="saveAndCloseDraft"
	+ @discard="discardAndCloseDraft"
	+ />
	</div>
	</template>

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

	<style lang="scss">
	.post-status-form {
	position: relative;

	.attachments {
	margin-bottom: 0.5em;
	}

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

	button {
	width: 10em;
	}

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

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

	.preview-heading {
	display: flex;
	flex-wrap: wrap;
	}

	.preview-toggle {
	flex: 10 0 auto;
	cursor: pointer;
	user-select: none;
	padding-left: 0.5em;

	&:hover {
	text-decoration: underline;
	}

	svg,
	i {
	margin-left: 0.2em;
	font-size: 0.8em;
	transform: rotate(90deg);
	}
	}

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

	.preview-error {
	font-style: italic;
	color: var(--textFaint);
	}

	.preview-status {
	border: 1px solid var(--border);
	border-radius: var(--roundness);
	padding: 0.5em;
	margin: 0;
	}

	.reply-or-quote-selector {
	flex: 1 0 auto;
	margin-bottom: 0.5em;
	display: grid;
	grid-template-columns: 1fr 1fr;
	}

	.text-format {
	.only-format {
	color: var(--textFaint);
	}
	}

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

	.visibility-notice.edit-warning {
	> :first-child {
	margin-top: 0;
	}

	> :last-child {
	margin-bottom: 0;
	}
	}

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

	.emoji-icon {
	order: 2;
	justify-content: center;
	}

	.poll-icon {
	order: 3;
	justify-content: right;
	}

	.media-upload-icon,
	.poll-icon,
	.emoji-icon {
	font-size: 1.85em;
	line-height: 1.1;
	flex: 1;
	padding: 0 0.1em;
	display: flex;
	align-items: center;
	}

	.error {
	text-align: center;
	}

	.media-upload-wrapper {
	margin-right: 0.2em;
	margin-bottom: 0.5em;
	width: 18em;

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

	.video {
	max-height: 10em;
	}

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

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

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

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

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

	.input.form-post-body {
	// TODO: make a resizable textarea component?
	box-sizing: content-box; // needed for easier computation of dynamic size
	overflow: hidden;
	transition: min-height 200ms 100ms;
	// stock padding + 1 line of text (for counter)
	padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
	// two lines of text
	height: calc(var(--post-line-height) * 1em);
	min-height: calc(var(--post-line-height) * 1em);
	resize: none;
	background: transparent;

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

	.main-input {
	position: relative;
	}

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

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

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

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

	.drop-indicator {
	position: absolute;
	width: 100%;
	height: 100%;
	font-size: 5em;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.6;
	color: var(--text);
	background-color: var(--bg);
	border-radius: var(--roundness);
	border: 2px dashed var(--text);
	}
	+
	+ .auto-save-status {
	+ align-self: center;
	+ }
	}
	</style>
	diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
	index ba6b1faaf0..3ccf025c82 100644
	--- a/src/components/settings_modal/tabs/general_tab.js
	+++ b/src/components/settings_modal/tabs/general_tab.js
	@@ -1,95 +1,100 @@
	import BooleanSetting from '../helpers/boolean_setting.vue'
	import ChoiceSetting from '../helpers/choice_setting.vue'
	import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
	import IntegerSetting from '../helpers/integer_setting.vue'
	import FloatSetting from '../helpers/float_setting.vue'
	import UnitSetting from '../helpers/unit_setting.vue'
	import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'

	import SharedComputedObject from '../helpers/shared_computed_object.js'
	import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faGlobe
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faGlobe
	)

	const GeneralTab = {
	data () {
	return {
	subjectLineOptions: ['email', 'noop', 'masto'].map(mode => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`)
	})),
	conversationDisplayOptions: ['tree', 'linear'].map(mode => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.conversation_display_${mode}`)
	})),
	conversationOtherRepliesButtonOptions: ['below', 'inside'].map(mode => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.conversation_other_replies_button_${mode}`)
	})),
	mentionLinkDisplayOptions: ['short', 'full_for_remote', 'full'].map(mode => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.mention_link_display_${mode}`)
	})),
	userPopoverAvatarActionOptions: ['close', 'zoom', 'open'].map(mode => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.user_popover_avatar_action_${mode}`)
	})),
	+ unsavedPostActionOptions: ['save', 'discard', 'confirm'].map(mode => ({
	+ key: mode,
	+ value: mode,
	+ label: this.$t(`settings.unsaved_post_action_${mode}`)
	+ })),
	loopSilentAvailable:
	// Firefox
	Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') \|\|
	// Chrome-likes
	Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') \|\|
	// Future spec, still not supported in Nightly 63 as of 08/2018
	Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks')
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	IntegerSetting,
	FloatSetting,
	UnitSetting,
	InterfaceLanguageSwitcher,
	ScopeSelector,
	ProfileSettingIndicator
	},
	computed: {
	postFormats () {
	return this.$store.state.instance.postFormats \|\| []
	},
	postContentOptions () {
	return this.postFormats.map(format => ({
	key: format,
	value: format,
	label: this.$t(`post_status.content_type["${format}"]`)
	}))
	},
	language: {
	get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
	set: function (val) {
	this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
	}
	},
	instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
	instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
	...SharedComputedObject()
	},
	methods: {
	changeDefaultScope (value) {
	this.$store.dispatch('setProfileOption', { name: 'defaultScope', value })
	}
	}
	}

	export default GeneralTab
	diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
	index 3cc83b547f..cc530996ee 100644
	--- a/src/components/settings_modal/tabs/general_tab.vue
	+++ b/src/components/settings_modal/tabs/general_tab.vue
	@@ -1,484 +1,500 @@
	<template>
	<div :label="$t('settings.general')">
	<div class="setting-item">
	<h2>{{ $t('settings.interface') }}</h2>
	<ul class="setting-list">
	<li>
	<interface-language-switcher
	:prompt-text="$t('settings.interfaceLanguage')"
	:language="language"
	:set-language="val => language = val"
	/>
	</li>
	<li v-if="instanceSpecificPanelPresent">
	<BooleanSetting path="hideISP">
	{{ $t('settings.hide_isp') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="stopGifs">
	{{ $t('settings.stop_gifs') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="streaming">
	{{ $t('settings.streaming') }}
	</BooleanSetting>
	<ul class="setting-list suboptions">
	<li>
	<BooleanSetting
	path="pauseOnUnfocused"
	parent-path="streaming"
	>
	{{ $t('settings.pause_on_unfocused') }}
	</BooleanSetting>
	</li>
	</ul>
	</li>
	<li>
	<BooleanSetting
	path="useStreamingApi"
	expert="1"
	>
	{{ $t('settings.useStreamingApi') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="virtualScrolling"
	expert="1"
	>
	{{ $t('settings.virtual_scrolling') }}
	</BooleanSetting>
	</li>
	<li>
	<ChoiceSetting
	id="userPopoverAvatarAction"
	path="userPopoverAvatarAction"
	:options="userPopoverAvatarActionOptions"
	expert="1"
	>
	{{ $t('settings.user_popover_avatar_action') }}
	</ChoiceSetting>
	</li>
	<li>
	<BooleanSetting
	path="userPopoverOverlay"
	expert="1"
	>
	{{ $t('settings.user_popover_avatar_overlay') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="alwaysShowNewPostButton"
	expert="1"
	>
	{{ $t('settings.always_show_post_button') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="autohideFloatingPostButton"
	expert="1"
	>
	{{ $t('settings.autohide_floating_post_button') }}
	</BooleanSetting>
	</li>
	<li v-if="instanceShoutboxPresent">
	<BooleanSetting
	path="hideShoutbox"
	expert="1"
	>
	{{ $t('settings.hide_shoutbox') }}
	</BooleanSetting>
	</li>
	<li class="select-multiple">
	<span class="label">{{ $t('settings.confirm_dialogs') }}</span>
	<ul class="option-list">
	<li>
	<BooleanSetting path="modalOnRepeat">
	{{ $t('settings.confirm_dialogs_repeat') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnUnfollow">
	{{ $t('settings.confirm_dialogs_unfollow') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnBlock">
	{{ $t('settings.confirm_dialogs_block') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnMute">
	{{ $t('settings.confirm_dialogs_mute') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnDelete">
	{{ $t('settings.confirm_dialogs_delete') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnLogout">
	{{ $t('settings.confirm_dialogs_logout') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnApproveFollow">
	{{ $t('settings.confirm_dialogs_approve_follow') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnDenyFollow">
	{{ $t('settings.confirm_dialogs_deny_follow') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnRemoveUserFromFollowers">
	{{ $t('settings.confirm_dialogs_remove_follower') }}
	</BooleanSetting>
	</li>
	</ul>
	</li>
	</ul>
	</div>
	<div class="setting-item">
	<h2>{{ $t('settings.post_look_feel') }}</h2>
	<ul class="setting-list">
	<li>
	<ChoiceSetting
	id="conversationDisplay"
	path="conversationDisplay"
	:options="conversationDisplayOptions"
	>
	{{ $t('settings.conversation_display') }}
	</ChoiceSetting>
	</li>
	<ul
	v-if="mergedConfig.conversationDisplay !== 'linear'"
	class="setting-list suboptions"
	>
	<li>
	<BooleanSetting path="conversationTreeAdvanced">
	{{ $t('settings.tree_advanced') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="conversationTreeFadeAncestors"
	:expert="1"
	>
	{{ $t('settings.tree_fade_ancestors') }}
	</BooleanSetting>
	</li>
	<li>
	<IntegerSetting
	path="maxDepthInThread"
	:min="3"
	:expert="1"
	>
	{{ $t('settings.max_depth_in_thread') }}
	</IntegerSetting>
	</li>
	<li>
	<ChoiceSetting
	id="conversationOtherRepliesButton"
	path="conversationOtherRepliesButton"
	:options="conversationOtherRepliesButtonOptions"
	:expert="1"
	>
	{{ $t('settings.conversation_other_replies_button') }}
	</ChoiceSetting>
	</li>
	</ul>
	<li>
	<BooleanSetting path="collapseMessageWithSubject">
	{{ $t('settings.collapse_subject') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="emojiReactionsOnTimeline"
	expert="1"
	>
	{{ $t('settings.emoji_reactions_on_timeline') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	v-if="user"
	source="profile"
	path="stripRichContent"
	expert="1"
	>
	{{ $t('settings.no_rich_text_description') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="useAbsoluteTimeFormat"
	expert="1"
	>
	{{ $t('settings.absolute_time_format') }}
	</BooleanSetting>
	</li>
	<ul
	v-if="mergedConfig.useAbsoluteTimeFormat"
	class="setting-list suboptions"
	>
	<li>
	<UnitSetting
	path="absoluteTimeFormatMinAge"
	unit-set="time"
	:units="['s', 'm', 'h', 'd']"
	:min="0"
	>
	{{ $t('settings.absolute_time_format_min_age') }}
	</UnitSetting>
	</li>
	</ul>
	<h3>{{ $t('settings.attachments') }}</h3>
	<li>
	<BooleanSetting
	path="useContainFit"
	expert="1"
	>
	{{ $t('settings.use_contain_fit') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="hideNsfw">
	{{ $t('settings.nsfw_clickthrough') }}
	</BooleanSetting>
	</li>
	<ul class="setting-list suboptions">
	<li>
	<BooleanSetting
	path="preloadImage"
	expert="1"
	parent-path="hideNsfw"
	>
	{{ $t('settings.preload_images') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="useOneClickNsfw"
	expert="1"
	parent-path="hideNsfw"
	>
	{{ $t('settings.use_one_click_nsfw') }}
	</BooleanSetting>
	</li>
	</ul>
	<li>
	<BooleanSetting
	path="loopVideo"
	expert="1"
	>
	{{ $t('settings.loop_video') }}
	</BooleanSetting>
	<ul class="setting-list suboptions">
	<li>
	<BooleanSetting
	path="loopVideoSilentOnly"
	expert="1"
	parent-path="loopVideo"
	:disabled="!loopSilentAvailable"
	>
	{{ $t('settings.loop_video_silent_only') }}
	</BooleanSetting>
	<div
	v-if="!loopSilentAvailable"
	class="unavailable"
	>
	<FAIcon icon="globe" />! {{ $t('settings.limited_availability') }}
	</div>
	</li>
	</ul>
	</li>
	<li>
	<BooleanSetting
	path="playVideosInModal"
	expert="1"
	>
	{{ $t('settings.play_videos_in_modal') }}
	</BooleanSetting>
	</li>
	<h3>{{ $t('settings.mention_links') }}</h3>
	<li>
	<ChoiceSetting
	id="mentionLinkDisplay"
	path="mentionLinkDisplay"
	:options="mentionLinkDisplayOptions"
	>
	{{ $t('settings.mention_link_display') }}
	</ChoiceSetting>
	</li>
	<li>
	<BooleanSetting
	path="mentionLinkShowTooltip"
	expert="1"
	>
	{{ $t('settings.mention_link_use_tooltip') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="useAtIcon"
	expert="1"
	>
	{{ $t('settings.use_at_icon') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="mentionLinkShowAvatar">
	{{ $t('settings.mention_link_show_avatar') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="mentionLinkFadeDomain"
	expert="1"
	>
	{{ $t('settings.mention_link_fade_domain') }}
	</BooleanSetting>
	</li>
	<li v-if="user">
	<BooleanSetting
	path="mentionLinkBoldenYou"
	expert="1"
	>
	{{ $t('settings.mention_link_bolden_you') }}
	</BooleanSetting>
	</li>
	<h3 v-if="expertLevel > 0">
	{{ $t('settings.fun') }}
	</h3>
	<li>
	<BooleanSetting
	path="greentext"
	expert="1"
	>
	{{ $t('settings.greentext') }}
	</BooleanSetting>
	</li>
	<li v-if="user">
	<BooleanSetting
	path="mentionLinkShowYous"
	expert="1"
	>
	{{ $t('settings.show_yous') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>

	<div
	v-if="user"
	class="setting-item"
	>
	<h2>{{ $t('settings.composing') }}</h2>
	<ul class="setting-list">
	<li>
	<label for="default-vis">
	{{ $t('settings.default_vis') }} <ProfileSettingIndicator :is-profile="true" />
	<ScopeSelector
	class="scope-selector"
	:show-all="true"
	:user-default="$store.state.profileConfig.defaultScope"
	:initial-scope="$store.state.profileConfig.defaultScope"
	:on-scope-change="changeDefaultScope"
	/>
	</label>
	</li>
	<li>
	<!-- <BooleanSetting source="profile" path="defaultNSFW"> -->
	<BooleanSetting path="sensitiveByDefault">
	{{ $t('settings.sensitive_by_default') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="scopeCopy"
	expert="1"
	>
	{{ $t('settings.scope_copy') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="alwaysShowSubjectInput"
	expert="1"
	>
	{{ $t('settings.subject_input_always_show') }}
	</BooleanSetting>
	</li>
	<li>
	<ChoiceSetting
	id="subjectLineBehavior"
	path="subjectLineBehavior"
	:options="subjectLineOptions"
	expert="1"
	>
	{{ $t('settings.subject_line_behavior') }}
	</ChoiceSetting>
	</li>
	<li v-if="postFormats.length > 0">
	<ChoiceSetting
	id="postContentType"
	path="postContentType"
	:options="postContentOptions"
	>
	{{ $t('settings.post_status_content_type') }}
	</ChoiceSetting>
	</li>
	<li>
	<BooleanSetting
	path="minimalScopesMode"
	expert="1"
	>
	{{ $t('settings.minimal_scopes_mode') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="alwaysShowNewPostButton"
	expert="1"
	>
	{{ $t('settings.always_show_post_button') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="autohideFloatingPostButton"
	expert="1"
	>
	{{ $t('settings.autohide_floating_post_button') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="padEmoji"
	expert="1"
	>
	{{ $t('settings.pad_emoji') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="autocompleteSelect"
	expert="1"
	>
	{{ $t('settings.autocomplete_select_first') }}
	</BooleanSetting>
	</li>
	+ <li>
	+ <BooleanSetting
	+ path="autoSaveDraft"
	+ >
	+ {{ $t('settings.auto_save_draft') }}
	+ </BooleanSetting>
	+ </li>
	+ <li v-if="!autoSaveDraft">
	+ <ChoiceSetting
	+ id="unsavedPostAction"
	+ path="unsavedPostAction"
	+ :options="unsavedPostActionOptions"
	+ >
	+ {{ $t('settings.unsaved_post_action') }}
	+ </ChoiceSetting>
	+ </li>
	</ul>
	</div>
	</div>
	</template>

	<script src="./general_tab.js"></script>
	diff --git a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
	index f151d3a87b..158f0a70c8 100644
	--- a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
	+++ b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
	@@ -1,84 +1,84 @@
	<script src="./virtual_directives_tab.js"></script>

	<template>
	<div class="setting-item list-editor variables-editor">
	<label
	class="list-select-label"
	for="variables-selector"
	>
	{{ $t('settings.style.themes3.editor.variables.label') }}
	{{ ' ' }}
	</label>
	<Select
	id="variables-selector"
	v-model="selectedVirtualDirectiveId"
	class="list-select"
	size="20"
	>
	<option
	v-for="(p, index) in modelValue"
	:key="p.name"
	:value="index"
	>
	{{ p.name }}
	</option>
	</Select>
	<SelectMotion
	class="list-select-movement"
	:model-value="modelValue"
	:selected-id="selectedVirtualDirectiveId"
	:get-add-value="getNewVirtualDirective"
	@update:modelValue="e => emit('update:modelValue', e)"
	@update:selectedId="e => selectedVirtualDirectiveId = e"
	/>
	<div class="list-edit-area">
	<div class="variable-selector">
	<label
	class="variable-name-label"
	for="variables-selector"
	>
	{{ $t('settings.style.themes3.editor.variables.name_label') }}
	{{ ' ' }}
	</label>
	<input
	v-model="selectedVirtualDirective.name"
	class="input"
	>
	<label
	class="variable-type-label"
	for="variables-selector"
	>
	{{ $t('settings.style.themes3.editor.variables.type_label') }}
	{{ ' ' }}
	</label>
	<Select
	v-model="selectedVirtualDirectiveValType"
	>
	<option value="shadow">
	{{ $t('settings.style.themes3.editor.variables.type_shadow') }}
	</option>
	<option value="color">
	{{ $t('settings.style.themes3.editor.variables.type_color') }}
	</option>
	<option value="generic">
	{{ $t('settings.style.themes3.editor.variables.type_generic') }}
	</option>
	</Select>
	</div>
	<ShadowControl
	v-if="selectedVirtualDirectiveValType === 'shadow'"
	v-model="draftVirtualDirective"
	:static-vars="staticVars"
	:compact="true"
	/>
	<ColorInput
	- name="virtual-directive-color"
	v-if="selectedVirtualDirectiveValType === 'color'"
	v-model="draftVirtualDirective"
	+ name="virtual-directive-color"
	:fallback="computeColor(draftVirtualDirective)"
	:label="$t('settings.style.themes3.editor.variables.virtual_color')"
	:hide-optional-checkbox="true"
	/>
	</div>
	</div>
	</template>
	diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
	index 81c5a6121b..0b6d815943 100644
	--- a/src/components/side_drawer/side_drawer.js
	+++ b/src/components/side_drawer/side_drawer.js
	@@ -1,126 +1,128 @@
	import { mapState, mapGetters } from 'vuex'
	import UserCard from '../user_card/user_card.vue'
	import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
	import GestureService from '../../services/gesture_service/gesture_service'
	import { USERNAME_ROUTES } from 'src/components/navigation/navigation.js'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faSignInAlt,
	faSignOutAlt,
	faHome,
	faComments,
	faBell,
	faUserPlus,
	faBullhorn,
	faSearch,
	faTachometerAlt,
	faCog,
	faInfoCircle,
	faCompass,
	- faList
	+ faList,
	+ faFilePen
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faSignInAlt,
	faSignOutAlt,
	faHome,
	faComments,
	faBell,
	faUserPlus,
	faBullhorn,
	faSearch,
	faTachometerAlt,
	faCog,
	faInfoCircle,
	faCompass,
	- faList
	+ faList,
	+ faFilePen
	)

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

	if (this.currentUser && this.currentUser.locked) {
	this.$store.dispatch('startFetchingFollowRequests')
	}
	},
	components: { UserCard },
	computed: {
	currentUser () {
	return this.$store.state.users.currentUser
	},
	shout () { return this.$store.state.shout.joined },
	unseenNotifications () {
	return unseenNotificationsFromStore(this.$store)
	},
	unseenNotificationsCount () {
	return this.unseenNotifications.length
	},
	suggestionsEnabled () {
	return this.$store.state.instance.suggestionsEnabled
	},
	logo () {
	return this.$store.state.instance.logo
	},
	hideSitename () {
	return this.$store.state.instance.hideSitename
	},
	sitename () {
	return this.$store.state.instance.name
	},
	followRequestCount () {
	return this.$store.state.api.followRequests.length
	},
	privateMode () {
	return this.$store.state.instance.private
	},
	federating () {
	return this.$store.state.instance.federating
	},
	timelinesRoute () {
	let name
	if (this.$store.state.interface.lastTimeline) {
	name = this.$store.state.interface.lastTimeline
	}
	name = this.currentUser ? 'friends' : 'public-timeline'
	if (USERNAME_ROUTES.has(name)) {
	return { name, params: { username: this.currentUser.screen_name } }
	} else {
	return { name }
	}
	},
	...mapState({
	pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
	supportsAnnouncements: state => state.announcements.supportsAnnouncements
	}),
	- ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
	+ ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount', 'draftCount'])
	},
	methods: {
	toggleDrawer () {
	this.closed = !this.closed
	},
	doLogout () {
	this.logout()
	this.toggleDrawer()
	},
	touchStart (e) {
	GestureService.beginSwipe(e, this.closeGesture)
	},
	touchMove (e) {
	GestureService.updateSwipe(e, this.closeGesture)
	},
	openSettingsModal () {
	this.$store.dispatch('openSettingsModal', 'user')
	},
	openAdminModal () {
	this.$store.dispatch('openSettingsModal', 'admin')
	}
	}
	}

	export default SideDrawer
	diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
	index 91b10ea08e..7dd6ff28f9 100644
	--- a/src/components/side_drawer/side_drawer.vue
	+++ b/src/components/side_drawer/side_drawer.vue
	@@ -1,420 +1,441 @@
	<template>
	<div
	class="side-drawer-container mobile-drawer"
	:class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
	>
	<div
	class="side-drawer-darken"
	:class="{ 'side-drawer-darken-closed': closed}"
	/>
	<div
	class="side-drawer"
	:class="{'side-drawer-closed': closed}"
	@touchstart="touchStart"
	@touchmove="touchMove"
	>
	<div
	class="side-drawer-heading"
	@click="toggleDrawer"
	>
	<UserCard
	v-if="currentUser"
	:user-id="currentUser.id"
	:hide-bio="true"
	/>
	<div
	v-else
	class="side-drawer-logo-wrapper"
	>
	<img :src="logo">
	<span v-if="!hideSitename">{{ sitename }}</span>
	</div>
	</div>
	<ul>
	<li
	v-if="!currentUser"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'login' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="sign-in-alt"
	/> {{ $t("login.login") }}
	</router-link>
	</li>
	<li
	v-if="currentUser \|\| !privateMode"
	@click="toggleDrawer"
	>
	<router-link
	:to="timelinesRoute"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="home"
	/> {{ $t("nav.timelines") }}
	</router-link>
	</li>
	<li
	v-if="currentUser"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'lists' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="list"
	/> {{ $t("nav.lists") }}
	</router-link>
	</li>
	<li
	v-if="currentUser"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'bookmarks' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="bookmark"
	/> {{ $t("nav.bookmarks") }}
	</router-link>
	</li>
	<li
	v-if="currentUser && pleromaChatMessagesAvailable"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'chats', params: { username: currentUser.screen_name } }"
	style="position: relative;"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="comments"
	/> {{ $t("nav.chats") }}
	<span
	v-if="unreadChatCount"
	class="badge -notification"
	>
	{{ unreadChatCount }}
	</span>
	</router-link>
	</li>
	</ul>
	<ul v-if="currentUser">
	<li @click="toggleDrawer">
	<router-link
	:to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="bell"
	/> {{ $t("nav.interactions") }}
	</router-link>
	</li>
	<li
	v-if="currentUser.locked"
	@click="toggleDrawer"
	>
	<router-link
	to="/friend-requests"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="user-plus"
	/> {{ $t("nav.friend_requests") }}
	<span
	v-if="followRequestCount > 0"
	class="badge -notification"
	>
	{{ followRequestCount }}
	</span>
	</router-link>
	</li>
	<li
	v-if="shout"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'shout-panel' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="bullhorn"
	/> {{ $t("shoutbox.title") }}
	</router-link>
	</li>
	</ul>
	<ul>
	<li
	v-if="currentUser \|\| !privateMode"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'search' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="search"
	/> {{ $t("nav.search") }}
	</router-link>
	</li>
	<li
	v-if="currentUser && suggestionsEnabled"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'who-to-follow' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="user-plus"
	/> {{ $t("nav.who_to_follow") }}
	</router-link>
	</li>
	<li @click="toggleDrawer">
	<button
	class="menu-item"
	@click="openSettingsModal"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="cog"
	/> {{ $t("settings.settings") }}
	</button>
	</li>
	<li @click="toggleDrawer">
	<router-link
	:to="{ name: 'about'}"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="info-circle"
	/> {{ $t("nav.about") }}
	</router-link>
	</li>
	<li
	v-if="currentUser && currentUser.role === 'admin'"
	@click="toggleDrawer"
	>
	<button
	class="menu-item"
	@click.stop="openAdminModal"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="tachometer-alt"
	/> {{ $t("nav.administration") }}
	</button>
	</li>
	<li
	v-if="currentUser && supportsAnnouncements"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'announcements' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="bullhorn"
	/> {{ $t("nav.announcements") }}
	<span
	v-if="unreadAnnouncementCount"
	class="badge -notification"
	>
	{{ unreadAnnouncementCount }}
	</span>
	</router-link>
	</li>
	+ <li
	+ v-if="currentUser"
	+ @click="toggleDrawer"
	+ >
	+ <router-link
	+ :to="{ name: 'drafts' }"
	+ class="menu-item"
	+ >
	+ <FAIcon
	+ fixed-width
	+ class="fa-scale-110 fa-old-padding"
	+ icon="file-pen"
	+ /> {{ $t('nav.drafts') }}
	+ <span
	+ v-if="draftCount"
	+ class="badge -neutral"
	+ >
	+ {{ draftCount }}
	+ </span>
	+ </router-link>
	+ </li>
	<li
	v-if="currentUser"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'edit-navigation' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="compass"
	/> {{ $t("nav.edit_nav_mobile") }}
	</router-link>
	</li>
	<li
	v-if="currentUser"
	@click="toggleDrawer"
	>
	<button
	class="menu-item"
	@click="doLogout"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="sign-out-alt"
	/> {{ $t("login.logout") }}
	</button>
	</li>
	</ul>
	</div>
	<div
	class="side-drawer-click-outside"
	:class="{'side-drawer-click-outside-closed': closed}"
	@click.stop.prevent="toggleDrawer"
	/>
	</div>
	</template>

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

	<style lang="scss">
	.side-drawer-container {
	position: fixed;
	z-index: var(--ZI_navbar);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: stretch;
	transition-duration: 0s;
	transition-property: transform;
	}

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

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

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

	.side-drawer-darken-closed {
	background-color: rgb(0 0 0 / 0%);
	}

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

	.side-drawer {
	overflow-x: hidden;
	transition: 0.35s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	transition-property: transform;
	margin: 0 0 0 -100px;
	padding: 0 0 1em 100px;
	width: 80%;
	max-width: 20em;
	flex: 0 0 80%;
	box-shadow: var(--shadow);
	background-color: var(--background);

	.badge {
	margin-left: 10px;
	}
	}

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

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

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

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

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

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

	.side-drawer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid;
	border-color: var(--border);
	}

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

	.side-drawer li {
	padding: 0;

	a,
	button {
	box-sizing: border-box;
	display: block;
	height: 3em;
	line-height: 3em;
	padding: 0 0.7em;
	}
	}
	</style>
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index bf4e427576..1a7101622d 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,558 +1,565 @@
	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 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 RichContent from 'src/components/rich_content/rich_content.jsx'
	import StatusPopover from '../status_popover/status_popover.vue'
	import UserPopover from '../user_popover/user_popover.vue'
	import UserListPopover from '../user_list_popover/user_list_popover.vue'
	import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
	import UserLink from '../user_link/user_link.vue'
	import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
	import MentionLink from 'src/components/mention_link/mention_link.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,
	faGlobe,
	faTimes,
	faRetweet,
	faReply,
	faPlusSquare,
	faSmileBeam,
	faEllipsisH,
	faStar,
	faEyeSlash,
	faEye,
	faThumbtack,
	faChevronUp,
	faChevronDown,
	faAngleDoubleRight,
	faPlay
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faEnvelope,
	faGlobe,
	faLock,
	faLockOpen,
	faTimes,
	faRetweet,
	faReply,
	faPlusSquare,
	faStar,
	faSmileBeam,
	faEllipsisH,
	faEyeSlash,
	faEye,
	faThumbtack,
	faChevronUp,
	faChevronDown,
	faAngleDoubleRight,
	faPlay
	)

	const camelCase = name => name.charAt(0).toUpperCase() + name.slice(1)

	const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
	const camelized = camelCase(name)
	const toggle = `controlledToggle${camelized}`
	const controlledName = `controlled${camelized}`
	const uncontrolledName = `uncontrolled${camelized}`
	res[name] = function () {
	return ((this.$data[toggle] !== undefined \|\| this.$props[toggle] !== undefined) && this[toggle]) ? this[controlledName] : this[uncontrolledName]
	}
	return res
	}, {})

	const controlledOrUncontrolledToggle = (obj, name) => {
	const camelized = camelCase(name)
	const toggle = `controlledToggle${camelized}`
	const uncontrolledName = `uncontrolled${camelized}`
	if (obj[toggle]) {
	obj[toggle]()
	} else {
	obj[uncontrolledName] = !obj[uncontrolledName]
	}
	}

	const controlledOrUncontrolledSet = (obj, name, val) => {
	const camelized = camelCase(name)
	const set = `controlledSet${camelized}`
	const uncontrolledName = `uncontrolled${camelized}`
	if (obj[set]) {
	obj[set](val)
	} else {
	obj[uncontrolledName] = val
	}
	}

	const Status = {
	name: 'Status',
	components: {
	ReplyButton,
	FavoriteButton,
	ReactButton,
	RetweetButton,
	ExtraButtons,
	PostStatusForm,
	UserAvatar,
	AvatarList,
	Timeago,
	StatusPopover,
	UserListPopover,
	EmojiReactions,
	StatusContent,
	RichContent,
	MentionLink,
	MentionsLine,
	UserPopover,
	UserLink
	},
	props: [
	'statusoid',
	'expandable',
	'inConversation',
	'focused',
	'highlight',
	'compact',
	'replies',
	'isPreview',
	'noHeading',
	'inlineExpanded',
	'showPinned',
	'inProfile',
	'profileUserId',
	'inQuote',

	'simpleTree',
	'controlledThreadDisplayStatus',
	'controlledToggleThreadDisplay',
	'showOtherRepliesAsButton',

	'controlledShowingTall',
	'controlledToggleShowingTall',
	'controlledExpandingSubject',
	'controlledToggleExpandingSubject',
	'controlledShowingLongSubject',
	'controlledToggleShowingLongSubject',
	'controlledReplying',
	'controlledToggleReplying',
	'controlledMediaPlaying',
	'controlledSetMediaPlaying',
	'dive'
	],
	emits: ['interacted'],
	data () {
	return {
	uncontrolledReplying: false,
	unmuted: false,
	userExpanded: false,
	uncontrolledMediaPlaying: [],
	suspendable: true,
	error: null,
	headTailLinks: null,
	displayQuote: !this.inQuote
	}
	},
	computed: {
	...controlledOrUncontrolledGetters(['replying', 'mediaPlaying']),
	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) {
	const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
	// FIXME Why user not found sometimes???
	return user ? user.statusnet_profile_url : 'NOT_FOUND'
	}
	},
	retweet () { return !!this.statusoid.retweeted_status },
	retweeterUser () { return this.statusoid.user },
	retweeter () { return this.statusoid.user.name \|\| this.statusoid.user.screen_name_ui },
	retweeterHtml () { return this.statusoid.user.name },
	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)
	},
	botStatus () {
	return this.status.user.actor_type === 'Service'
	},
	showActorTypeIndicator () {
	return !this.hideBotIndication
	},
	sensitiveStatus () {
	return this.status.nsfw
	},
	mentionsLine () {
	if (!this.headTailLinks) return []
	const writtenSet = new Set(this.headTailLinks.writtenMentions.map(_ => _.url))
	return this.status.attentions.filter(attn => {
	// no reply user
	return attn.id !== this.status.in_reply_to_user_id &&
	// no self-replies
	attn.statusnet_profile_url !== this.status.user.statusnet_profile_url &&
	// don't include if mentions is written
	!writtenSet.has(attn.statusnet_profile_url)
	}).map(attn => ({
	url: attn.statusnet_profile_url,
	content: attn.screen_name,
	userId: attn.id
	}))
	},
	hasMentionsLine () {
	return this.mentionsLine.length > 0
	},
	muted () {
	if (this.statusoid.user.id === this.currentUser.id) return false
	const reasonsToMute = this.userIsMuted \|\|
	// Thread is muted
	status.thread_muted \|\|
	// Wordfiltered
	this.muteWordHits.length > 0 \|\|
	// bot status
	(this.muteBotStatuses && this.botStatus && !this.compact) \|\|
	// sensitive status
	(this.muteSensitiveStatuses && this.sensitiveStatus && !this.compact)
	return !this.unmuted && !this.shouldNotMute && reasonsToMute
	},
	userIsMuted () {
	if (this.statusoid.user.id === this.currentUser.id) return false
	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)
	return 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)
	},
	shouldNotMute () {
	const { status } = this
	const { reblog } = status
	return (
	(
	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
	},
	hideMutedUsers () {
	return this.mergedConfig.hideMutedPosts
	},
	hideMutedThreads () {
	return this.mergedConfig.hideMutedThreads
	},
	hideFilteredStatuses () {
	return this.mergedConfig.hideFilteredStatuses
	},
	hideWordFilteredPosts () {
	return this.mergedConfig.hideWordFilteredPosts
	},
	hideStatus () {
	return (!this.shouldNotMute) && (
	(this.muted && this.hideFilteredStatuses) \|\|
	(this.userIsMuted && this.hideMutedUsers) \|\|
	(this.status.thread_muted && this.hideMutedThreads) \|\|
	(this.muteWordHits.length > 0 && this.hideWordFilteredPosts)
	)
	},
	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_ui
	}
	},
	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 () {
	// eslint-disable-next-line no-prototype-builtins
	return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ')
	},
	hidePostStats () {
	return this.mergedConfig.hidePostStats
	},
	shouldDisplayFavsAndRepeats () {
	return !this.hidePostStats && this.isFocused && (this.combinedFavsAndRepeatsUsers.length > 0 \|\| this.statusFromGlobalRepository.quotes_count)
	},
	muteBotStatuses () {
	return this.mergedConfig.muteBotStatuses
	},
	muteSensitiveStatuses () {
	return this.mergedConfig.muteSensitiveStatuses
	},
	hideBotIndication () {
	return this.mergedConfig.hideBotIndication
	},
	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
	},
	inThreadForest () {
	return !!this.controlledThreadDisplayStatus
	},
	threadShowing () {
	return this.controlledThreadDisplayStatus === 'showing'
	},
	visibilityLocalized () {
	return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
	},
	isEdited () {
	return this.status.edited_at !== null
	},
	editingAvailable () {
	return this.$store.state.instance.editingAvailable
	},
	hasVisibleQuote () {
	return this.status.quote_url && this.status.quote_visible
	},
	hasInvisibleQuote () {
	return this.status.quote_url && !this.status.quote_visible
	},
	quotedStatus () {
	return this.status.quote_id ? this.$store.state.statuses.allStatusesObject[this.status.quote_id] : undefined
	},
	shouldDisplayQuote () {
	return this.quotedStatus && this.displayQuote
	},
	scrobblePresent () {
	if (this.mergedConfig.hideScrobbles) return false
	if (!this.status.user.latestScrobble) return false
	const value = this.mergedConfig.hideScrobblesAfter.match(/\d+/gs)[0]
	const unit = this.mergedConfig.hideScrobblesAfter.match(/\D+/gs)[0]
	let multiplier = 60 * 1000 // minutes is smallest unit
	switch (unit) {
	case 'm':
	break
	case 'h':
	multiplier *= 60 // hour
	break
	case 'd':
	multiplier *= 60 // hour
	multiplier *= 24 // day
	break
	}
	const maxAge = Number(value) * multiplier
	const createdAt = Date.parse(this.status.user.latestScrobble.created_at)
	const age = Date.now() - createdAt
	if (age > maxAge) return false
	return this.status.user.latestScrobble.artist
	},
	scrobble () {
	return this.status.user.latestScrobble
	}
	},
	methods: {
	visibilityIcon (visibility) {
	switch (visibility) {
	case 'private':
	return 'lock'
	case 'unlisted':
	return 'lock-open'
	case 'direct':
	return 'envelope'
	default:
	return 'globe'
	}
	},
	showError (error) {
	this.error = error
	},
	clearError () {
	this.$emit('interacted')
	this.error = undefined
	},
	toggleReplying () {
	this.$emit('interacted')
	+ if (this.replying) {
	+ this.$refs.postStatusForm.requestClose()
	+ } else {
	+ this.doToggleReplying()
	+ }
	+ },
	+ doToggleReplying () {
	controlledOrUncontrolledToggle(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) {
	controlledOrUncontrolledSet(this, 'mediaPlaying', this.mediaPlaying.concat(id))
	},
	removeMediaPlaying (id) {
	controlledOrUncontrolledSet(this, 'mediaPlaying', this.mediaPlaying.filter(mediaId => mediaId !== id))
	},
	setHeadTailLinks (headTailLinks) {
	this.headTailLinks = headTailLinks
	},
	toggleThreadDisplay () {
	this.controlledToggleThreadDisplay()
	},
	scrollIfHighlighted (highlightId) {
	const id = highlightId
	if (this.status.id === id) {
	const 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)
	}
	}
	},
	toggleDisplayQuote () {
	if (this.shouldDisplayQuote) {
	this.displayQuote = false
	} else if (!this.quotedStatus) {
	this.$store.dispatch('fetchStatus', this.status.quote_id)
	.then(() => {
	this.displayQuote = true
	})
	} else {
	this.displayQuote = true
	}
	}
	},
	watch: {
	highlight: function (id) {
	this.scrollIfHighlighted(id)
	},
	'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
	}
	}
	}

	export default Status
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index bdf130fff6..f3935c483e 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,640 +1,642 @@
	<template>
	<div
	v-if="!hideStatus"
	ref="root"
	class="Status"
	:class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
	>
	<div
	v-if="error"
	class="alert error"
	>
	{{ error }}
	<span
	class="fa-scale-110 fa-old-padding"
	@click="clearError"
	>
	<FAIcon icon="times" />
	</span>
	</div>
	<template v-if="muted && !isPreview">
	<div class="status-container muted">
	<small class="status-username">
	<FAIcon
	v-if="muted && retweet"
	class="fa-scale-110 fa-old-padding repeat-icon"
	icon="retweet"
	/>
	<user-link
	:user="status.user"
	:at="false"
	/>
	</small>
	<small
	v-if="muteSensitiveStatuses && status.nsfw"
	class="mute-thread"
	>
	{{ $t('status.sensitive_muted') }}
	</small>
	<small
	v-if="muteBotStatuses && botStatus"
	class="mute-thread"
	>
	{{ $t('status.bot_muted') }}
	</small>
	<small
	v-if="showReasonMutedThread"
	class="mute-thread"
	>
	<span>
	{{ $t('status.thread_muted') }}
	</span>
	<span
	v-if="muteWordHits.length > 0"
	>
	{{ $t('status.thread_muted_and_words') }}
	</span>
	</small>
	<small
	class="mute-words"
	:title="muteWordHits.join(', ')"
	>
	{{ muteWordHits.join(', ') }}
	</small>
	<button
	class="unmute button-unstyled"
	@click.prevent="toggleMute"
	>
	<FAIcon
	icon="eye-slash"
	class="fa-scale-110 fa-old-padding"
	/>
	</button>
	</div>
	</template>
	<template v-else>
	<div
	v-if="showPinned"
	class="pin"
	>
	<FAIcon
	icon="thumbtack"
	class="faint"
	/>
	<span class="faint">{{ $t('status.pinned') }}</span>
	</div>
	<div
	v-if="retweet && !noHeading && !inConversation"
	:class="[repeaterClass, { highlighted: repeaterStyle }]"
	:style="[repeaterStyle]"
	class="status-container repeat-info"
	>
	<UserAvatar
	v-if="retweet"
	class="left-side repeater-avatar"
	:show-actor-type-indicator="showActorTypeIndicator"
	:better-shadow="betterShadow"
	:user="statusoid.user"
	/>
	<div class="right-side faint">
	<bdi
	class="status-username repeater-name"
	:title="retweeter"
	>
	<router-link
	v-if="retweeterHtml"
	:to="retweeterProfileLink"
	>
	<RichContent
	:html="retweeterHtml"
	:emoji="retweeterUser.emoji"
	/>
	</router-link>
	<router-link
	v-else
	:to="retweeterProfileLink"
	>{{ retweeter }}</router-link>
	</bdi>
	{{ ' ' }}
	<FAIcon
	icon="retweet"
	class="repeat-icon"
	:title="$t('tool_tip.repeat')"
	/>
	{{ $t('timeline.repeated') }}
	</div>
	</div>

	<div
	v-if="!deleted"
	:class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
	:style="[ userStyle ]"
	class="status-container"
	:data-tags="tags"
	>
	<div
	v-if="!noHeading"
	class="left-side"
	>
	<a
	:href="$router.resolve(userProfileLink).href"
	@click.prevent
	>
	<UserPopover
	:user-id="status.user.id"
	:overlay-centers="true"
	>
	<UserAvatar
	class="post-avatar"
	:show-actor-type-indicator="showActorTypeIndicator"
	:compact="compact"
	:better-shadow="betterShadow"
	:user="status.user"
	/>
	</UserPopover>
	</a>
	</div>
	<div class="right-side">
	<div
	v-if="!noHeading"
	class="status-heading"
	>
	<div class="heading-name-row">
	<div class="heading-left">
	<h4
	v-if="status.user.name_html"
	class="status-username"
	:title="status.user.name"
	>
	<RichContent
	:html="status.user.name"
	:emoji="status.user.emoji"
	/>
	</h4>
	<h4
	v-else
	class="status-username"
	:title="status.user.name"
	>
	{{ status.user.name }}
	</h4>
	<user-link
	class="account-name"
	:title="status.user.screen_name_ui"
	:user="status.user"
	:at="false"
	/>
	<img
	v-if="!!(status.user && status.user.favicon)"
	class="status-favicon"
	:src="status.user.favicon"
	>
	</div>

	<span class="heading-right">
	<router-link
	class="timeago faint"
	:to="{ name: 'conversation', params: { id: status.id } }"
	>
	<Timeago
	:time="status.created_at"
	:auto-update="60"
	/>
	</router-link>
	<span
	v-if="status.visibility"
	class="visibility-icon"
	:title="visibilityLocalized"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	:icon="visibilityIcon(status.visibility)"
	/>
	</span>
	<button
	v-if="expandable && !isPreview"
	class="button-unstyled"
	:title="$t('status.expand')"
	@click.prevent="toggleExpanded"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	icon="plus-square"
	/>
	</button>
	<button
	v-if="unmuted"
	class="button-unstyled"
	@click.prevent="toggleMute"
	>
	<FAIcon
	fixed-width
	icon="eye-slash"
	class="fa-scale-110"
	/>
	</button>
	<button
	v-if="inThreadForest && replies && replies.length && !simpleTree"
	class="button-unstyled"
	:title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
	:aria-expanded="threadShowing ? 'true' : 'false'"
	@click.prevent="toggleThreadDisplay"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	:icon="threadShowing ? 'chevron-up' : 'chevron-down'"
	/>
	</button>
	<button
	v-if="dive && !simpleTree"
	class="button-unstyled"
	:title="$t('status.show_only_conversation_under_this')"
	@click.prevent="dive"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	:icon="'angle-double-right'"
	/>
	</button>
	</span>
	</div>
	<div
	v-if="scrobblePresent"
	class="status-rich-presence"
	>
	<a
	v-if="scrobble.externalLink"
	:href="scrobble.externalLink"
	target="_blank"
	>
	{{ scrobble.artist }} — {{ scrobble.title }}
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="play"
	/>
	<span class="status-rich-presence-time">
	<Timeago
	template-key="time.in_past"
	:time="scrobble.created_at"
	:auto-update="60"
	/>
	</span>
	</a>
	<span v-if="!scrobble.externalLink">
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="music"
	/>
	{{ scrobble.artist }} — {{ scrobble.title }}
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="play"
	/>
	<span class="status-rich-presence-time">
	<Timeago
	template-key="time.in_past"
	:time="scrobble.created_at"
	:auto-update="60"
	/>
	</span>
	</span>
	</div>
	<div
	v-if="isReply \|\| hasMentionsLine"
	class="heading-reply-row"
	>
	<span
	v-if="isReply"
	class="glued-label reply-glued-label"
	>
	<i18n-t
	keypath="status.reply_to_with_arg"
	>
	<template #replyToWithIcon>
	<StatusPopover
	v-if="!isPreview"
	:status-id="status.parent_visible && status.in_reply_to_status_id"
	class="reply-to-popover"
	- style="min-width: 0"
	+ style="min-width: 0;"
	:class="{ '-strikethrough': !status.parent_visible }"
	>
	<button
	class="button-unstyled reply-to"
	:aria-label="$t('tool_tip.reply')"
	@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	>
	<i18n-t keypath="status.reply_to_with_icon">
	<template #icon>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="reply"
	flip="horizontal"
	/>
	</template>
	<template #replyTo>
	<span
	class="reply-to-text"
	>
	{{ $t('status.reply_to') }}
	</span>
	</template>
	</i18n-t>
	</button>
	</StatusPopover>

	<span
	v-else
	class="reply-to-no-popover"
	>
	<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
	</span>
	</template>
	<template #user>
	<MentionLink
	:content="replyToName"
	:url="replyProfileLink"
	:user-id="status.in_reply_to_user_id"
	:user-screen-name="status.in_reply_to_screen_name"
	/>
	</template>
	</i18n-t>
	</span>

	<!-- This little wrapper is made for sole purpose of "gluing" -->
	<!-- "Mentions" label to the first mention -->
	<span
	v-if="hasMentionsLine"
	class="glued-label"
	>
	<span
	class="mentions"
	:aria-label="$t('tool_tip.mentions')"
	@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	>
	<span
	class="mentions-text"
	>
	{{ $t('status.mentions') }}
	</span>
	</span>
	<MentionsLine
	v-if="hasMentionsLine"
	:mentions="mentionsLine.slice(0, 1)"
	class="mentions-line-first"
	/>
	</span>
	{{ ' ' }}
	<MentionsLine
	v-if="hasMentionsLine"
	:mentions="mentionsLine.slice(1)"
	class="mentions-line"
	/>
	</div>
	<div
	v-if="isEdited && editingAvailable && !isPreview"
	class="heading-edited-row"
	>
	<i18n-t
	scope="global"
	keypath="status.edited_at"
	tag="span"
	>
	<template #time>
	<Timeago
	template-key="time.in_past"
	:time="status.edited_at"
	:auto-update="60"
	:long-format="true"
	/>
	</template>
	</i18n-t>
	</div>
	</div>

	<StatusContent
	ref="content"
	:status="status"
	:no-heading="noHeading"
	:highlight="highlight"
	:focused="isFocused"
	:controlled-showing-tall="controlledShowingTall"
	:controlled-expanding-subject="controlledExpandingSubject"
	:controlled-showing-long-subject="controlledShowingLongSubject"
	:controlled-toggle-showing-tall="controlledToggleShowingTall"
	:controlled-toggle-expanding-subject="controlledToggleExpandingSubject"
	:controlled-toggle-showing-long-subject="controlledToggleShowingLongSubject"
	@mediaplay="addMediaPlaying($event)"
	@mediapause="removeMediaPlaying($event)"
	@parseReady="setHeadTailLinks"
	/>

	<article
	v-if="hasVisibleQuote"
	class="quoted-status"
	>
	<button
	class="button-unstyled -link display-quoted-status-button"
	:aria-expanded="shouldDisplayQuote"
	@click="toggleDisplayQuote"
	>
	{{ shouldDisplayQuote ? $t('status.hide_quote') : $t('status.display_quote') }}
	<FAIcon
	class="display-quoted-status-button-icon"
	:icon="shouldDisplayQuote ? 'chevron-up' : 'chevron-down'"
	/>
	</button>
	<Status
	v-if="shouldDisplayQuote"
	:statusoid="quotedStatus"
	:in-quote="true"
	/>
	</article>
	<p
	v-else-if="hasInvisibleQuote"
	class="quoted-status -unavailable-prompt"
	>
	<i18n-t
	scope="global"
	keypath="status.invisible_quote"
	>
	<template #link>
	<bdi>
	<a
	:href="status.quote_url"
	target="_blank"
	>
	{{ status.quote_url }}
	</a>
	</bdi>
	</template>
	</i18n-t>
	</p>

	<div
	v-if="inConversation && !isPreview && replies && replies.length"
	class="replies"
	>
	<button
	v-if="showOtherRepliesAsButton && replies.length > 1"
	class="button-unstyled -link"
	:title="$tc('status.ancestor_follow', replies.length - 1, { numReplies: replies.length - 1 })"
	@click.prevent="dive"
	>
	{{ $tc('status.replies_list_with_others', replies.length - 1, { numReplies: replies.length - 1 }) }}
	</button>
	<span
	v-else
	class="faint"
	>
	{{ $t('status.replies_list') }}
	</span>
	<StatusPopover
	v-for="reply in replies"
	:key="reply.id"
	:status-id="reply.id"
	>
	<button
	class="button-unstyled -link reply-link"
	@click.prevent="gotoOriginal(reply.id)"
	>
	{{ reply.name }}
	</button>
	</StatusPopover>
	</div>

	<transition name="fade">
	<div
	v-if="shouldDisplayFavsAndRepeats"
	class="favs-repeated-users"
	>
	<div class="stats">
	<UserListPopover
	v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0"
	:users="statusFromGlobalRepository.rebloggedBy"
	>
	<div class="stat-count">
	<a class="stat-title">{{ $t('status.repeats') }}</a>
	<div class="stat-number">
	{{ statusFromGlobalRepository.rebloggedBy.length }}
	</div>
	</div>
	</UserListPopover>
	<UserListPopover
	v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0"
	:users="statusFromGlobalRepository.favoritedBy"
	>
	<div
	class="stat-count"
	>
	<a class="stat-title">{{ $t('status.favorites') }}</a>
	<div class="stat-number">
	{{ statusFromGlobalRepository.favoritedBy.length }}
	</div>
	</div>
	</UserListPopover>
	<router-link
	v-if="statusFromGlobalRepository.quotes_count > 0"
	:to="{ name: 'quotes', params: { id: status.id } }"
	>
	<div
	class="stat-count"
	>
	<a class="stat-title">{{ $t('status.quotes') }}</a>
	<div class="stat-number">
	{{ statusFromGlobalRepository.quotes_count }}
	</div>
	</div>
	</router-link>
	<div class="avatar-row">
	<AvatarList :users="combinedFavsAndRepeatsUsers" />
	</div>
	</div>
	</div>
	</transition>

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

	<div
	v-if="!noHeading && !isPreview"
	class="status-actions"
	>
	<reply-button
	:replying="replying"
	:status="status"
	@toggle="toggleReplying"
	/>
	<retweet-button
	:visibility="status.visibility"
	:logged-in="loggedIn"
	:status="status"
	@click="$emit('interacted')"
	/>
	<favorite-button
	:logged-in="loggedIn"
	:status="status"
	@click="$emit('interacted')"
	/>
	<ReactButton
	v-if="loggedIn"
	:status="status"
	@click="$emit('interacted')"
	/>
	<extra-buttons
	:status="status"
	@onError="showError"
	@onSuccess="clearError"
	/>
	</div>
	</div>
	</div>
	<div
	v-else
	class="gravestone"
	>
	<div class="left-side">
	<UserAvatar
	class="post-avatar"
	:compact="compact"
	:show-actor-type-indicator="showActorTypeIndicator"
	/>
	</div>
	<div class="right-side">
	<div class="deleted-text">
	{{ $t('status.status_deleted') }}
	</div>
	<reply-button
	v-if="replying"
	:replying="replying"
	:status="status"
	@toggle="toggleReplying"
	/>
	</div>
	</div>
	<div
	v-if="replying"
	class="status-container reply-form"
	>
	<PostStatusForm
	+ ref="postStatusForm"
	class="reply-body"
	:reply-to="status.id"
	:attentions="status.attentions"
	:replied-user="status.user"
	:copy-message-scope="status.visibility"
	:subject="replySubject"
	- @posted="toggleReplying"
	+ @posted="doToggleReplying"
	+ @can-close="doToggleReplying"
	/>
	</div>
	</template>
	</div>
	</template>

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

	<style src="./status.scss" lang="scss"></style>
	diff --git a/src/i18n/en.json b/src/i18n/en.json
	index 4d55367c3c..b4e56bc119 100644
	--- a/src/i18n/en.json
	+++ b/src/i18n/en.json
	@@ -1,1521 +1,1548 @@
	{
	"about": {
	"mrf": {
	"federation": "Federation",
	"keyword": {
	"keyword_policies": "Keyword policies",
	"ftl_removal": "Removal from \"The Whole Known Network\" Timeline",
	"reject": "Reject",
	"replace": "Replace",
	"is_replaced_by": "→"
	},
	"mrf_policies": "Enabled MRF policies",
	"mrf_policies_desc": "MRF policies manipulate the federation behaviour of the instance. The following policies are enabled:",
	"simple": {
	"simple_policies": "Instance-specific policies",
	"instance": "Instance",
	"reason": "Reason",
	"not_applicable": "N/A",
	"accept": "Accept",
	"accept_desc": "This instance only accepts messages from the following instances:",
	"reject": "Reject",
	"reject_desc": "This instance will not accept messages from the following instances:",
	"quarantine": "Quarantine",
	"quarantine_desc": "This instance will send only public posts to the following instances:",
	"ftl_removal": "Removal from \"Known Network\" Timeline",
	"ftl_removal_desc": "This instance removes these instances from \"Known Network\" timeline:",
	"media_removal": "Media Removal",
	"media_removal_desc": "This instance removes media from posts on the following instances:",
	"media_nsfw": "Media force-set as sensitive",
	"media_nsfw_desc": "This instance forces media to be set sensitive in posts on the following instances:"
	}
	},
	"staff": "Staff"
	},
	"announcements": {
	"page_header": "Announcements",
	"title": "Announcement",
	"mark_as_read_action": "Mark as read",
	"post_form_header": "Post announcement",
	"post_placeholder": "Type your announcement content here...",
	"post_action": "Post",
	"post_error": "Error: {error}",
	"close_error": "Close",
	"delete_action": "Delete",
	"start_time_prompt": "Start time: ",
	"end_time_prompt": "End time: ",
	"all_day_prompt": "This is an all-day event",
	"published_time_display": "Published at {time}",
	"start_time_display": "Starts at {time}",
	"end_time_display": "Ends at {time}",
	"edit_action": "Edit",
	"submit_edit_action": "Submit",
	"cancel_edit_action": "Cancel",
	"inactive_message": "This announcement is inactive"
	},
	"shoutbox": {
	"title": "Shoutbox"
	},
	"domain_mute_card": {
	"mute": "Mute",
	"mute_progress": "Muting…",
	"unmute": "Unmute",
	"unmute_progress": "Unmuting…"
	},
	"exporter": {
	"export": "Export",
	"processing": "Processing, you'll soon be asked to download your file"
	},
	"features_panel": {
	"shout": "Shoutbox",
	"pleroma_chat_messages": "Pleroma Chat",
	"gopher": "Gopher",
	"media_proxy": "Media proxy",
	"scope_options": "Scope options",
	"text_limit": "Text limit",
	"title": "Features",
	"who_to_follow": "Who to follow",
	"upload_limit": "Upload limit"
	},
	"finder": {
	"error_fetching_user": "Error fetching user",
	"find_user": "Find user"
	},
	"general": {
	"apply": "Apply",
	"submit": "Submit",
	"more": "More",
	"loading": "Loading…",
	"generic_error": "An error occured",
	"generic_error_message": "An error occured: {0}",
	"error_retry": "Please try again",
	"retry": "Try again",
	"optional": "optional",
	"show_more": "Show more",
	"show_less": "Show less",
	"never_show_again": "Never show again",
	"dismiss": "Dismiss",
	"cancel": "Cancel",
	"disable": "Disable",
	"enable": "Enable",
	"confirm": "Confirm",
	"verify": "Verify",
	"close": "Close",
	"undo": "Undo",
	"yes": "Yes",
	"no": "No",
	"peek": "Peek",
	"scroll_to_top": "Scroll to top",
	"role": {
	"admin": "Admin",
	"moderator": "Moderator"
	},
	"unpin": "Unpin item",
	"pin": "Pin item",
	"flash_content": "Click to show Flash content using Ruffle (Experimental, may not work).",
	"flash_security": "Note that this can be potentially dangerous since Flash content is still arbitrary code.",
	"flash_fail": "Failed to load flash content, see console for details.",
	"scope_in_timeline": {
	"direct": "Direct",
	"private": "Followers-only",
	"public": "Public",
	"unlisted": "Unlisted"
	}
	},
	"image_cropper": {
	"crop_picture": "Crop picture",
	"save": "Save",
	"save_without_cropping": "Save without cropping",
	"cancel": "Cancel"
	},
	"importer": {
	"submit": "Submit",
	"success": "Imported successfully.",
	"error": "An error occured while importing this file."
	},
	"login": {
	"login": "Log in",
	"description": "Log in with OAuth",
	"logout": "Log out",
	"logout_confirm_title": "Logout confirmation",
	"logout_confirm": "Do you really want to logout?",
	"logout_confirm_accept_button": "Logout",
	"logout_confirm_cancel_button": "Do not logout",
	"password": "Password",
	"placeholder": "e.g. lain",
	"register": "Register",
	"username": "Username",
	"hint": "Log in to join the discussion",
	"authentication_code": "Authentication code",
	"enter_recovery_code": "Enter a recovery code",
	"enter_two_factor_code": "Enter a two-factor code",
	"recovery_code": "Recovery code",
	"heading": {
	"totp": "Two-factor authentication",
	"recovery": "Two-factor recovery"
	}
	},
	"media_modal": {
	"previous": "Previous",
	"next": "Next",
	"counter": "{current} / {total}",
	"hide": "Close media viewer"
	},
	"nav": {
	"about": "About",
	"administration": "Administration",
	"back": "Back",
	"friend_requests": "Follow requests",
	"mentions": "Mentions",
	"interactions": "Interactions",
	"dms": "Direct messages",
	"public_tl": "Public timeline",
	"timeline": "Timeline",
	"home_timeline": "Home timeline",
	"twkn": "Known Network",
	"bookmarks": "Bookmarks",
	"all_bookmarks": "All bookmarks",
	"bookmark_folders": "Bookmark folders",
	"user_search": "User Search",
	"search": "Search",
	"search_close": "Close search bar",
	"who_to_follow": "Who to follow",
	"preferences": "Preferences",
	"timelines": "Timelines",
	"chats": "Chats",
	"lists": "Lists",
	"edit_nav_mobile": "Customize navigation bar",
	"edit_pinned": "Edit pinned items",
	"edit_finish": "Done editing",
	"mobile_sidebar": "Toggle mobile sidebar",
	"mobile_notifications": "Open notifications (there are unread ones)",
	"mobile_notifications_close": "Close notifications",
	"mobile_notifications_mark_as_seen": "Mark all as seen",
	"announcements": "Announcements",
	- "quotes": "Quotes"
	+ "quotes": "Quotes",
	+ "drafts": "Drafts"
	},
	"notifications": {
	"broken_favorite": "Unknown status, searching for it…",
	"error": "Error fetching notifications: {0}",
	"favorited_you": "favorited your status",
	"followed_you": "followed you",
	"follow_request": "wants to follow you",
	"load_older": "Load older notifications",
	"notifications": "Notifications",
	"read": "Read!",
	"repeated_you": "repeated your status",
	"no_more_notifications": "No more notifications",
	"migrated_to": "migrated to",
	"reacted_with": "reacted with {0}",
	"submitted_report": "submitted a report",
	"poll_ended": "poll has ended",
	"unread_announcements": "{num} unread announcement \| {num} unread announcements",
	"unread_chats": "{num} unread chat \| {num} unread chats",
	"unread_follow_requests": "{num} new follow request \| {num} new follow requests",
	"configuration_tip": "You can customize what to display here in {theSettings}. {dismiss}",
	"configuration_tip_settings": "the settings",
	"configuration_tip_dismiss": "Do not show again",
	"subscribed_status": "posted"
	},
	"polls": {
	"add_poll": "Add poll",
	"add_option": "Add option",
	"option": "Option",
	"votes": "votes",
	"people_voted_count": "{count} person voted \| {count} people voted",
	"votes_count": "{count} vote \| {count} votes",
	"vote": "Vote",
	"type": "Poll type",
	"single_choice": "Single choice",
	"multiple_choices": "Multiple choices",
	"expiry": "Poll age",
	"expires_in": "Poll ends in {0}",
	"expired": "Poll ended {0} ago",
	"not_enough_options": "Too few unique options in poll",
	"non_anonymous": "Public poll",
	"non_anonymous_title": "Other instances may display the options you voted for"
	},
	"emoji": {
	"stickers": "Stickers",
	"emoji": "Emoji",
	"keep_open": "Keep picker open",
	"search_emoji": "Search for an emoji",
	"add_emoji": "Insert emoji",
	"custom": "Custom emoji",
	"hide_custom_emoji": "Hide custom emojis",
	"unpacked": "Unpacked emoji",
	"unicode": "Unicode emoji",
	"unicode_groups": {
	"activities": "Activities",
	"animals-and-nature": "Animals & Nature",
	"flags": "Flags",
	"food-and-drink": "Food & Drink",
	"objects": "Objects",
	"people-and-body": "People & Body",
	"smileys-and-emotion": "Smileys & Emotion",
	"symbols": "Symbols",
	"travel-and-places": "Travel & Places"
	},
	"load_all_hint": "Loaded first {saneAmount} emoji, loading all emoji may cause performance issues.",
	"load_all": "Loading all {emojiAmount} emoji",
	"regional_indicator": "Regional indicator {letter}"
	},
	"errors": {
	"storage_unavailable": "Pleroma could not access browser storage. Your login or your local settings won't be saved and you might encounter unexpected issues. Try enabling cookies."
	},
	"interactions": {
	"favs_repeats": "Repeats and favorites",
	"follows": "New follows",
	"emoji_reactions": "Emoji Reactions",
	"reports": "Reports",
	"moves": "User migrates",
	"load_older": "Load older interactions",
	"statuses": "Subscriptions"
	},
	"post_status": {
	"edit_status": "Edit status",
	"new_status": "Post new status",
	"reply_option": "Reply to this status",
	"quote_option": "Quote this status",
	"account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
	"account_not_locked_warning_link": "locked",
	"attachments_sensitive": "Mark attachments as sensitive",
	"media_description": "Media description",
	"content_type": {
	"text/plain": "Plain text",
	"text/html": "HTML",
	"text/markdown": "Markdown",
	"text/bbcode": "BBCode"
	},
	"content_type_selection": "Post format",
	"content_warning": "Subject (optional)",
	"default": "Just landed in L.A.",
	"direct_warning_to_all": "This post will be visible to all the mentioned users.",
	"direct_warning_to_first_only": "This post will only be visible to the mentioned users at the beginning of the message.",
	"edit_remote_warning": "Other remote instances may not support editing and unable to receive the latest version of your post.",
	"edit_unsupported_warning": "Pleroma does not support editing mentions or polls.",
	"posting": "Posting",
	"post": "Post",
	"preview": "Preview",
	"preview_empty": "Empty",
	"empty_status_error": "Can't post an empty status with no files",
	"media_description_error": "Failed to update media, try again",
	"scope_notice": {
	"public": "This post will be visible to everyone",
	"private": "This post will be visible to your followers only",
	"unlisted": "This post will not be visible in Public Timeline and The Whole Known Network"
	},
	"scope_notice_dismiss": "Close this notice",
	"scope": {
	"direct": "Direct - post to mentioned users only",
	"private": "Followers-only - post to followers only",
	"public": "Public - post to public timelines",
	"unlisted": "Unlisted - do not post to public timelines"
	- }
	+ },
	+ "close_confirm_title": "Closing post form",
	+ "close_confirm": "What do you want to do with your current writing?",
	+ "close_confirm_save_button": "Save",
	+ "close_confirm_discard_button": "Discard",
	+ "close_confirm_continue_composing_button": "Continue composing",
	+ "auto_save_nothing_new": "Nothing new to save.",
	+ "auto_save_saved": "Saved.",
	+ "auto_save_saving": "Saving...",
	+ "save_to_drafts_button": "Save to drafts"
	},
	"registration": {
	"bio_optional": "Bio (optional)",
	"email": "Email",
	"email_optional": "Email (optional)",
	"fullname": "Display name",
	"password_confirm": "Password confirmation",
	"registration": "Registration",
	"token": "Invite token",
	"captcha": "CAPTCHA",
	"new_captcha": "Click the image to get a new captcha",
	"username_placeholder": "e.g. lain",
	"fullname_placeholder": "e.g. Lain Iwakura",
	"bio_placeholder": "e.g.\nHi, I'm Lain.\nI’m an anime girl living in suburban Japan. You may know me from the Wired.",
	"reason": "Reason to register",
	"reason_placeholder": "This instance approves registrations manually.\nLet the administration know why you want to register.",
	"register": "Register",
	"validations": {
	"username_required": "cannot be left blank",
	"fullname_required": "cannot be left blank",
	"email_required": "cannot be left blank",
	"password_required": "cannot be left blank",
	"password_confirmation_required": "cannot be left blank",
	"password_confirmation_match": "should be the same as password",
	"birthday_required": "cannot be left blank",
	"birthday_min_age": "must be on or before {date}"
	},
	"email_language": "In which language do you want to receive emails from the server?",
	"birthday": "Birthday:",
	"birthday_optional": "Birthday (optional):"
	},
	"remote_user_resolver": {
	"remote_user_resolver": "Remote user resolver",
	"searching_for": "Searching for",
	"error": "Not found."
	},
	"report": {
	"reporter": "Reporter:",
	"reported_user": "Reported user:",
	"reported_statuses": "Reported statuses:",
	"notes": "Notes:",
	"state": "State:",
	"state_open": "Open",
	"state_closed": "Closed",
	"state_resolved": "Resolved"
	},
	"selectable_list": {
	"select_all": "Select all"
	},
	"settings": {
	"add_language": "Add fallback language",
	"remove_language": "Remove",
	"primary_language": "Primary language:",
	"fallback_language": "Fallback language {index}:",
	"actor_type": "This account is:",
	"actor_type_description": "Marking your account as a group will make it automatically repeat statuses that mention it.",
	"actor_type_Person": "a normal user",
	"actor_type_Service": "a bot",
	"actor_type_Group": "a group",
	"app_name": "App name",
	"expert_mode": "Show advanced",
	"save": "Save changes",
	"security": "Security",
	"setting_changed": "Setting is different from default",
	"setting_server_side": "This setting is tied to your profile and affects all sessions and clients",
	"enter_current_password_to_confirm": "Enter your current password to confirm your identity",
	"post_look_feel": "Posts Look & Feel",
	"mention_links": "Mention links",
	"appearance": "Appearance",
	"confirm_new_setting": "Confirm new setting?",
	"confirm_new_question": "Does this look ok? Setting will be reverted in 10 seconds.",
	"revert": "Revert",
	"confirm": "Confirm",
	"text_size": "Text and interface size",
	"text_size_tip": "Use {0} for absolute values, {1} will scale with browser default text size.",
	"text_size_tip2": "Values other than {0} might break some things and themes",
	"emoji_size": "Emoji size",
	"navbar_size": "Top bar size",
	"panel_header_size": "Panel header size",
	"visual_tweaks": "Minor visual tweaks",
	"theme_debug": "Show what background theme engine assumes when dealing with transparancy (DEBUG)",
	"scale_and_layout": "Interface scale and layout",
	"mfa": {
	"otp": "OTP",
	"setup_otp": "Setup OTP",
	"wait_pre_setup_otp": "presetting OTP",
	"confirm_and_enable": "Confirm & enable OTP",
	"title": "Two-factor Authentication",
	"generate_new_recovery_codes": "Generate new recovery codes",
	"warning_of_generate_new_codes": "When you generate new recovery codes, your old codes won’t work anymore.",
	"recovery_codes": "Recovery codes.",
	"waiting_a_recovery_codes": "Receiving backup codes…",
	"recovery_codes_warning": "Write the codes down or save them somewhere secure - otherwise you won't see them again. If you lose access to your 2FA app and recovery codes you'll be locked out of your account.",
	"authentication_methods": "Authentication methods",
	"scan": {
	"title": "Scan",
	"desc": "Using your two-factor app, scan this QR code or enter text key:",
	"secret_code": "Key"
	},
	"verify": {
	"desc": "To enable two-factor authentication, enter the code from your two-factor app:"
	}
	},
	"units": {
	"time": {
	"m": "minutes",
	"s": "seconds",
	"h": "hours",
	"d": "days"
	}
	},
	"lists_navigation": "Show lists in navigation",
	"allow_following_move": "Allow auto-follow when following account moves",
	"attachmentRadius": "Attachments",
	"attachments": "Attachments",
	"avatar": "Avatar",
	"avatarAltRadius": "Avatars (notifications)",
	"avatarRadius": "Avatars",
	"background": "Background",
	"bio": "Bio",
	"email_language": "Language for receiving emails from the server",
	"block_export": "Block export",
	"block_export_button": "Export your blocks to a csv file",
	"block_import": "Block import",
	"block_import_error": "Error importing blocks",
	"blocks_imported": "Blocks imported! Processing them will take a while.",
	"mute_export": "Mute export",
	"mute_export_button": "Export your mutes to a csv file",
	"mute_import": "Mute import",
	"mute_import_error": "Error importing mutes",
	"mutes_imported": "Mutes imported! Processing them will take a while.",
	"import_mutes_from_a_csv_file": "Import mutes from a csv file",
	"account_backup": "Account backup",
	"account_backup_description": "This allows you to download an archive of your account information and your posts, but they cannot yet be imported into a Pleroma account.",
	"account_backup_table_head": "Backup",
	"download_backup": "Download",
	"backup_not_ready": "This backup is not ready yet.",
	"backup_running": "This backup is in progress, processed {number} record. \| This backup is in progress, processed {number} records.",
	"backup_failed": "This backup has failed.",
	"remove_backup": "Remove",
	"list_backups_error": "Error fetching backup list: {error}",
	"add_backup": "Create a new backup",
	"added_backup": "Added a new backup.",
	"add_backup_error": "Error adding a new backup: {error}",
	"blocks_tab": "Blocks",
	"btnRadius": "Buttons",
	"cBlue": "Blue (Reply, follow)",
	"cGreen": "Green (Retweet)",
	"cOrange": "Orange (Favorite)",
	"cRed": "Red (Cancel)",
	"change_email": "Change email",
	"change_email_error": "There was an issue changing your email.",
	"changed_email": "Email changed successfully!",
	"change_password": "Change password",
	"change_password_error": "There was an issue changing your password.",
	"changed_password": "Password changed successfully!",
	"chatMessageRadius": "Chat message",
	"collapse_subject": "Collapse posts with subjects",
	"composing": "Composing",
	"confirm_new_password": "Confirm new password",
	"current_password": "Current password",
	"confirm_dialogs": "Ask for confirmation when",
	"confirm_dialogs_repeat": "repeating a status",
	"confirm_dialogs_unfollow": "unfollowing a user",
	"confirm_dialogs_block": "blocking a user",
	"confirm_dialogs_mute": "muting a user",
	"confirm_dialogs_delete": "deleting a status",
	"confirm_dialogs_logout": "logging out",
	"confirm_dialogs_approve_follow": "approving a follower",
	"confirm_dialogs_deny_follow": "denying a follower",
	"confirm_dialogs_remove_follower": "removing a follower",
	"mutes_and_blocks": "Mutes and Blocks",
	"data_import_export_tab": "Data import / export",
	"default_vis": "Default visibility scope",
	"delete_account": "Delete account",
	"delete_account_description": "Permanently delete your data and deactivate your account.",
	"delete_account_error": "There was an issue deleting your account. If this persists please contact your instance administrator.",
	"delete_account_instructions": "Type your password in the input below to confirm account deletion.",
	"account_alias": "Account aliases",
	"account_alias_table_head": "Alias",
	"list_aliases_error": "Error fetching aliases: {error}",
	"hide_list_aliases_error_action": "Close",
	"remove_alias": "Remove this alias",
	"new_alias_target": "Add a new alias (e.g. {example})",
	"added_alias": "Alias is added.",
	"add_alias_error": "Error adding alias: {error}",
	"move_account": "Move account",
	"move_account_notes": "If you want to move the account somewhere else, you must go to your target account and add an alias pointing here.",
	"move_account_target": "Target account (e.g. {example})",
	"moved_account": "Account is moved.",
	"move_account_error": "Error moving account: {error}",
	"discoverable": "Allow discovery of this account in search results and other services",
	"domain_mutes": "Domains",
	"avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
	"pad_emoji": "Pad emoji with spaces when adding from picker",
	"autocomplete_select_first": "Automatically select the first candidate when autocomplete results are available",
	+ "unsaved_post_action": "When you try to close an unsaved posting form",
	+ "unsaved_post_action_save": "Save it to drafts",
	+ "unsaved_post_action_discard": "Discard it",
	+ "unsaved_post_action_confirm": "Ask every time",
	+ "auto_save_draft": "Save drafts as you compose",
	"emoji_reactions_on_timeline": "Show emoji reactions on timeline",
	"emoji_reactions_scale": "Reactions scale factor",
	"absolute_time_format": "Use absolute time format",
	"absolute_time_format_min_age": "Only use for time older than this amount of time",
	"export_theme": "Save preset",
	"filtering": "Filtering",
	"wordfilter": "Wordfilter",
	"filtering_explanation": "All statuses containing these words will be muted, one per line",
	"word_filter_and_more": "Word filter and more...",
	"follow_export": "Follow export",
	"follow_export_button": "Export your follows to a csv file",
	"follow_import": "Follow import",
	"follow_import_error": "Error importing followers",
	"follows_imported": "Follows imported! Processing them will take a while.",
	"accent": "Accent",
	"foreground": "Foreground",
	"general": "General",
	"hide_attachments_in_convo": "Hide attachments in conversations",
	"hide_attachments_in_tl": "Hide attachments in timeline",
	"hide_media_previews": "Hide media previews",
	"hide_muted_posts": "Hide posts of muted users",
	"mute_bot_posts": "Mute bot posts",
	"hide_actor_type_indication": "Hide actor type (bots, groups, etc.) indication in posts",
	"hide_scrobbles": "Hide scrobbles",
	"hide_scrobbles_after": "Hide scrobbles older than",
	"mute_sensitive_posts": "Mute sensitive posts",
	"hide_all_muted_posts": "Hide muted posts",
	"max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)",
	"hide_isp": "Hide instance-specific panel",
	"hide_shoutbox": "Hide instance shoutbox",
	"right_sidebar": "Reverse order of columns",
	"navbar_column_stretch": "Stretch navbar to columns width",
	"always_show_post_button": "Always show floating New Post button",
	"hide_wallpaper": "Hide instance wallpaper",
	"preload_images": "Preload images",
	"use_one_click_nsfw": "Open NSFW attachments with just one click",
	"hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
	"hide_user_stats": "Hide user statistics (e.g. the number of followers)",
	"hide_filtered_statuses": "Hide all filtered posts",
	"hide_wordfiltered_statuses": "Hide word-filtered statuses",
	"hide_muted_threads": "Hide muted threads",
	"import_blocks_from_a_csv_file": "Import blocks from a csv file",
	"import_followers_from_a_csv_file": "Import follows from a csv file",
	"import_theme": "Load preset",
	"inputRadius": "Input fields",
	"checkboxRadius": "Checkboxes",
	"instance_default": "(default: {value})",
	"instance_default_simple": "(default)",
	"interface": "Interface",
	"interfaceLanguage": "Interface language",
	"invalid_theme_imported": "The selected file is not a supported Pleroma theme. No changes to your theme were made.",
	"limited_availability": "Unavailable in your browser",
	"links": "Links",
	"lock_account_description": "Restrict your account to approved followers only",
	"loop_video": "Loop videos",
	"loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
	"mutes_tab": "Mutes",
	"play_videos_in_modal": "Play videos in a popup frame",
	"url": "URL",
	"preview": "Preview",
	"file_export_import": {
	"backup_restore": "Settings backup",
	"backup_settings": "Backup settings to file",
	"backup_settings_theme": "Backup settings and theme to file",
	"restore_settings": "Restore settings from file",
	"errors": {
	"invalid_file": "The selected file is not a supported Pleroma settings backup. No changes were made.",
	"file_too_new": "Incompatile major version: {fileMajor}, this PleromaFE (settings ver {feMajor}) is too old to handle it",
	"file_too_old": "Incompatile major version: {fileMajor}, file version is too old and not supported (min. set. ver. {feMajor})",
	"file_slightly_new": "File minor version is different, some settings might not load"
	}
	},
	"profile_fields": {
	"label": "Profile metadata",
	"add_field": "Add field",
	"name": "Label",
	"value": "Content"
	},
	"birthday": {
	"label": "Birthday",
	"show_birthday": "Show my birthday"
	},
	"account_privacy": "Privacy",
	"use_contain_fit": "Don't crop the attachment in thumbnails",
	"name": "Name",
	"name_bio": "Name & bio",
	"new_email": "New email",
	"new_password": "New password",
	"posts": "Posts",
	"user_profiles": "User Profiles",
	"notification_visibility": "Types of notifications to show",
	"notification_visibility_in_column": "Show in notifications column/drawer",
	"notification_visibility_native_notifications": "Show a native notification",
	"notification_visibility_follows": "Follows",
	"notification_visibility_follow_requests": "Follow requests",
	"notification_visibility_likes": "Favorites",
	"notification_visibility_mentions": "Mentions",
	"notification_visibility_repeats": "Repeats",
	"notification_visibility_reports": "Reports",
	"notification_visibility_moves": "User Migrates",
	"notification_visibility_emoji_reactions": "Reactions",
	"notification_visibility_polls": "Ends of polls you voted in",
	"notification_visibility_statuses": "Subscriptions",
	"notification_show_extra": "Show extra notifications in the notifications column",
	"notification_extra_chats": "Show unread chats",
	"notification_extra_announcements": "Show unread announcements",
	"notification_extra_follow_requests": "Show new follow requests",
	"notification_extra_tip": "Show the customization tip for extra notifications",
	"no_rich_text_description": "Strip rich text formatting from all posts",
	"no_blocks": "No blocks",
	"no_mutes": "No mutes",
	"hide_favorites_description": "Don't show list of my favorites (people still get notified)",
	"hide_follows_description": "Don't show who I'm following",
	"hide_followers_description": "Don't show who's following me",
	"hide_follows_count_description": "Don't show follow count",
	"hide_followers_count_description": "Don't show follower count",
	"show_admin_badge": "Show \"Admin\" badge in my profile",
	"show_moderator_badge": "Show \"Moderator\" badge in my profile",
	"nsfw_clickthrough": "Hide sensitive/NSFW media",
	"oauth_tokens": "OAuth tokens",
	"token": "Token",
	"refresh_token": "Refresh token",
	"valid_until": "Valid until",
	"revoke_token": "Revoke",
	"panelRadius": "Panels",
	"pause_on_unfocused": "Pause when tab is not focused",
	"presets": "Presets",
	"profile_background": "Profile background",
	"profile_banner": "Profile banner",
	"profile_tab": "Profile",
	"radii_help": "Set up interface edge rounding (in pixels)",
	"replies_in_timeline": "Replies in timeline",
	"reply_visibility_all": "Show all replies",
	"reply_visibility_following": "Only show replies directed at me or users I'm following",
	"reply_visibility_self": "Only show replies directed at me",
	"reply_visibility_following_short": "Show replies to my follows",
	"reply_visibility_self_short": "Show replies to self only",
	"autohide_floating_post_button": "Automatically hide New Post button (mobile)",
	"saving_err": "Error saving settings",
	"saving_ok": "Settings saved",
	"search_user_to_block": "Search whom you want to block",
	"search_user_to_mute": "Search whom you want to mute",
	"security_tab": "Security",
	"scope_copy": "Copy scope when replying (DMs are always copied)",
	"minimal_scopes_mode": "Minimize post scope selection options",
	"set_new_avatar": "Set new avatar",
	"set_new_profile_background": "Set new profile background",
	"set_new_profile_banner": "Set new profile banner",
	"reset_avatar": "Reset avatar",
	"reset_profile_background": "Reset profile background",
	"reset_profile_banner": "Reset profile banner",
	"reset_avatar_confirm": "Do you really want to reset the avatar?",
	"reset_banner_confirm": "Do you really want to reset the banner?",
	"reset_background_confirm": "Do you really want to reset the background?",
	"settings": "Settings",
	"subject_input_always_show": "Always show subject field",
	"subject_line_behavior": "Copy subject when replying",
	"subject_line_email": "Like email: \"re: subject\"",
	"subject_line_mastodon": "Like mastodon: copy as is",
	"subject_line_noop": "Do not copy",
	"force_theme_recompilation_debug": "Disable theme cahe, force recompile on each boot (DEBUG)",
	"conversation_display": "Conversation display style",
	"conversation_display_tree": "Tree-style",
	"conversation_display_tree_quick": "Tree view",
	"disable_sticky_headers": "Don't stick column headers to top of the screen",
	"show_scrollbars": "Show side column's scrollbars",
	"third_column_mode": "When there's enough space, show third column containing",
	"third_column_mode_none": "Don't show third column at all",
	"third_column_mode_notifications": "Notifications column",
	"third_column_mode_postform": "Main post form and navigation",
	"columns": "Columns",
	"column_sizes": "Column sizes",
	"column_sizes_sidebar": "Sidebar",
	"column_sizes_content": "Content",
	"column_sizes_notifs": "Notifications",
	"tree_advanced": "Allow more flexible navigation in tree view",
	"tree_fade_ancestors": "Display ancestors of the current status in faint text",
	"conversation_display_linear": "Linear-style",
	"conversation_display_linear_quick": "Linear view",
	"conversation_other_replies_button": "Show the \"other replies\" button",
	"conversation_other_replies_button_below": "Below statuses",
	"conversation_other_replies_button_inside": "Inside statuses",
	"max_depth_in_thread": "Maximum number of levels in thread to display by default",
	"post_status_content_type": "Post status content type",
	"sensitive_by_default": "Mark posts as sensitive by default",
	"stop_gifs": "Pause animated images until you hover on them",
	"streaming": "Automatically show new posts when scrolled to the top",
	"auto_update": "Show new posts automatically",
	"user_mutes": "Users",
	"useStreamingApi": "Receive posts and notifications real-time",
	"use_websockets": "Use websockets (Realtime updates)",
	"text": "Text",
	"theme": "Theme",
	"theme_old": "Theme editor (old)",
	"theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
	"theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
	"theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
	"tooltipRadius": "Tooltips/alerts",
	"type_domains_to_mute": "Search domains to mute",
	"upload_a_photo": "Upload a photo",
	"user_settings": "User Settings",
	"values": {
	"false": "no",
	"true": "yes"
	},
	"virtual_scrolling": "Optimize timeline rendering",
	"use_at_icon": "Display {'@'} symbol as an icon instead of text",
	"mention_link_display": "Display mention links",
	"mention_link_display_short": "always as short names (e.g. {'@'}foo)",
	"mention_link_display_full_for_remote": "as full names only for remote users (e.g. {'@'}foo{'@'}example.org)",
	"mention_link_display_full": "always as full names (e.g. {'@'}foo{'@'}example.org)",
	"mention_link_use_tooltip": "Show user card when clicking mention links",
	"mention_link_show_avatar": "Show user avatar beside the link",
	"mention_link_show_avatar_quick": "Show user avatar next to mentions",
	"mention_link_fade_domain": "Fade domains (e.g. {'@'}example.org in {'@'}foo{'@'}example.org)",
	"mention_link_bolden_you": "Highlight mention of you when you are mentioned",
	"user_popover_avatar_action": "Popover avatar click action",
	"user_popover_avatar_action_zoom": "Zoom the avatar",
	"user_popover_avatar_action_close": "Close the popover",
	"user_popover_avatar_action_open": "Open profile",
	"user_popover_avatar_overlay": "Show user popover over user avatar",
	"fun": "Fun",
	"greentext": "Meme arrows",
	"show_yous": "Show (You)s",
	"notifications": "Notifications",
	"notification_setting_annoyance": "Annoyance",
	"notification_setting_drawer_marks_as_seen": "Closing drawer (mobile) marks all notifications as read",
	"notification_setting_ignore_inactionable_seen": "Ignore read state of inactionable notifications (likes, repeats etc)",
	"notification_setting_ignore_inactionable_seen_tip": "This will not actually mark those notifications as read, and you'll still get desktop notifications about them if you chose so",
	"notification_setting_unseen_at_top": "Show unread notifications above others",
	"notification_setting_filters": "Filters",
	"notification_setting_filters_chrome_push": "On some browsers (chrome) it might be impossible to completely filter out notifications by type when they arrive by Push",
	"notification_setting_block_from_strangers": "Block notifications from users who you do not follow",
	"notification_setting_privacy": "Privacy",
	"notification_setting_hide_notification_contents": "Hide the sender and contents of push notifications",
	"notification_mutes": "To stop receiving notifications from a specific user, use a mute.",
	"notification_blocks": "Blocking a user stops all notifications as well as unsubscribes them.",
	"enable_web_push_notifications": "Enable web push notifications",
	"enable_web_push_always_show": "Always show web push notifications",
	"enable_web_push_always_show_tip": "Some browsers (Chromium, Chrome) require that push messages always result in a notification, otherwise generic 'Website was updated in background' is shown, enable this to prevent this notification from showing, as Chrome seem to hide push notifications if tab is in focus. Can result in showing duplicate notifications on other browsers.",
	"more_settings": "More settings",
	"style": {
	"custom_theme_used": "(Custom theme)",
	"custom_style_used": "(Custom style)",
	"stock_theme_used": "(Stock theme)",
	"themes2_outdated": "Editor for Themes V2 is being phased out and will eventually be replaced with a new one that takes advantage of new Themes V3 engine. It should still work but experience might be degraded and inconsistent.",
	"appearance_tab_note": "Changes on this tab do not affect the theme used, so exported theme will be different from what seen in the UI",
	"update_preview": "Update preview",
	"themes3": {
	"define": "Override",
	"palette": {
	"label": "Color schemes",
	"name_label": "Color scheme name",
	"import": "Import palette",
	"export": "Export palette",
	"apply": "Apply palette",
	"bg": "Panel background",
	"fg": "Buttons etc.",
	"text": "Text",
	"link": "Links",
	"accent": "Accent color",
	"cRed": "Red color",
	"cBlue": "Blue color",
	"cGreen": "Green color",
	"cOrange": "Orange color",
	"wallpaper": "Wallpaper",
	"v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes",
	"bundled": "Bundled palettes",
	"style": "Palettes provided by selected style",
	"user": "Custom palette",
	"imported": "Imported"
	},
	"editor": {
	"title": "Style editor",
	"reset_style": "Reset",
	"load_style": "Open from file",
	"save_style": "Save",
	"style_name": "Stylesheet name",
	"style_author": "Made by",
	"style_license": "License",
	"style_website": "Website",
	"component_selector": "Component",
	"variant_selector": "Variant",
	"states_selector": "States",
	"main_tab": "Main",
	"shadows_tab": "Shadows",
	"background": "Background color",
	"text_color": "Text color",
	"icon_color": "Icon color",
	"link_color": "Link color",
	"contrast": "Text contrast",
	"roundness": "Roundness",
	"opacity": "Opacity",
	"border_color": "Border color",
	"include_in_rule": "Add to rule",
	"test_string": "TEST",
	"invalid": "Invalid",
	"refresh_preview": "Refresh preview",
	"apply_preview": "Apply",
	"text_auto": {
	"label": "Auto-contrast",
	"no-preserve": "Black or White",
	"preserve": "Keep color",
	"no-auto": "Disabled"
	},
	"component_tab": "Components style",
	"palette_tab": "Color schemes",
	"variables_tab": "Variables (Advanced)",
	"variables": {
	"label": "Variables",
	"name_label": "Name:",
	"type_label": "Type:",
	"type_shadow": "Shadow",
	"type_color": "Color",
	"type_generic": "Generic",
	"virtual_color": "Variable color value"
	}
	},
	"hacks": {
	"underlay_overrides": "Change underlay",
	"underlay_override_mode_none": "Theme default",
	"underlay_override_mode_opaque": "Replace with solid color",
	"underlay_override_mode_transparent": "Remove entirely (might break some themes)",
	"force_interface_roundness": "Override interface roundness/sharpness",
	"forced_roundness_mode_disabled": "Use theme defaults",
	"forced_roundness_mode_sharp": "Force sharp edges",
	"forced_roundness_mode_nonsharp": "Force not-so-sharp (1px roundness) edges",
	"forced_roundness_mode_round": "Force round edges"
	},
	"font": {
	"group-builtin": "Browser default fonts",
	"builtin" : {
	"serif": "Serif",
	"sans-serif": "Sans-serif",
	"monospace": "Monospace",
	"inherit": "Unchanged"
	},
	"group-local": "Locally installed fonts",
	"local-unavailable1": "List of locally installed fonts unavailalbe",
	"local-unavailable2": "Use manual entry to specify custom font",
	"font_list_unavailable": "Couldn't get locally installed fonts: {error}",
	"lookup_local_fonts": "Load list of fonts installed on this computer",
	"enter_manually": "Enter font name family manually",
	"entry": "Enter {fontFamily}",
	"select": "Select font"
	}
	},
	"interface_font_user_override": "Override theme/browser font used",
	"switcher": {
	"keep_color": "Keep colors",
	"keep_shadows": "Keep shadows",
	"keep_opacity": "Keep opacity",
	"keep_roundness": "Keep roundness",
	"keep_fonts": "Keep fonts",
	"save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme. When all checkboxes unset, exporting theme will save everything.",
	"reset": "Reset",
	"clear_all": "Clear all",
	"clear_opacity": "Clear opacity",
	"load_theme": "Load theme",
	"keep_as_is": "Keep as is",
	"use_snapshot": "Old version",
	"use_source": "New version",
	"help": {
	"upgraded_from_v2": "PleromaFE has been upgraded, theme could look a little bit different than you remember.",
	"v2_imported": "File you imported was made for older FE. We try to maximize compatibility but there still could be inconsistencies.",
	"future_version_imported": "File you imported was made in newer version of FE.",
	"older_version_imported": "File you imported was made in older version of FE.",
	"snapshot_present": "Theme snapshot is loaded, so all values are overriden. You can load theme's actual data instead.",
	"snapshot_missing": "No theme snapshot was in the file so it could look different than originally envisioned.",
	"fe_upgraded": "PleromaFE's theme engine upgraded after version update.",
	"fe_downgraded": "PleromaFE's version rolled back.",
	"migration_snapshot_ok": "Just to be safe, theme snapshot loaded. You can try loading theme data.",
	"migration_napshot_gone": "For whatever reason snapshot was missing, some stuff could look different than you remember.",
	"snapshot_source_mismatch": "Versions conflict: most likely FE was rolled back and updated again, if you changed theme using older version of FE you most likely want to use old version, otherwise use new version."
	}
	},
	"common": {
	"color": "Color",
	"opacity": "Opacity",
	"contrast": {
	"hint": "Contrast ratio is {ratio}, it {level} {context}",
	"level": {
	"aa": "meets Level AA guideline (minimal)",
	"aaa": "meets Level AAA guideline (recommended)",
	"bad": "doesn't meet any accessibility guidelines"
	},
	"context": {
	"18pt": "for large (18pt+) text",
	"text": "for text"
	}
	}
	},
	"common_colors": {
	"_tab_label": "Common",
	"main": "Common colors",
	"foreground_hint": "See \"Advanced\" tab for more detailed control",
	"rgbo": "Icons, accents, badges"
	},
	"advanced_colors": {
	"_tab_label": "Advanced",
	"alert": "Alert background",
	"alert_error": "Error",
	"alert_warning": "Warning",
	"alert_neutral": "Neutral",
	"post": "Posts/User bios",
	"badge": "Badge background",
	"popover": "Tooltips, menus, popovers",
	"badge_notification": "Notification",
	"panel_header": "Panel header",
	"top_bar": "Top bar",
	"borders": "Borders",
	"buttons": "Buttons",
	"inputs": "Input fields",
	"faint_text": "Faded text",
	"underlay": "Underlay",
	"wallpaper": "Wallpaper",
	"poll": "Poll graph",
	"icons": "Icons",
	"highlight": "Highlighted elements",
	"pressed": "Pressed",
	"selectedPost": "Selected post",
	"selectedMenu": "Selected menu item",
	"disabled": "Disabled",
	"toggled": "Toggled",
	"tabs": "Tabs",
	"chat": {
	"incoming": "Incoming",
	"outgoing": "Outgoing",
	"border": "Border"
	}
	},
	"radii": {
	"_tab_label": "Roundness"
	},
	"shadows": {
	"_tab_label": "Shadow and lighting",
	"component": "Component",
	"override": "Override",
	"shadow_id": "Shadow #{value}",
	"offset": "Shadow offset",
	"zoom": "Zoom",
	"offset-x": "x:",
	"offset-y": "y:",
	"light_grid": "Use light checkerboard",
	"color_override": "Use different color",
	"name": "Name",
	"blur": "Blur",
	"spread": "Spread",
	"inset": "Inset",
	"raw": "Plain shadow",
	"expression": "Expression (advanced)",
	"empty_expression": "Empty expression",
	"hintV3": "For shadows you can also use the {0} notation to use other color slot.",
	"filter_hint": {
	"always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
	"drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
	"avatar_inset_short": "Separate inset shadow",
	"avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.",
	"spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
	"inset_classic": "Inset shadows will be using {0}"
	},
	"components": {
	"panel": "Panel",
	"panelHeader": "Panel header",
	"topBar": "Top bar",
	"avatar": "User avatar (in profile view)",
	"avatarStatus": "User avatar (in post display)",
	"popup": "Popups and tooltips",
	"button": "Button",
	"buttonHover": "Button (hover)",
	"buttonPressed": "Button (pressed)",
	"buttonPressedHover": "Button (pressed+hover)",
	"input": "Input field"
	}
	},
	"fonts": {
	"_tab_label": "Fonts",
	"help": "Select font to use for elements of UI. For \"custom\" you have to enter exact font name as it appears in system.",
	"components": {
	"interface": "Interface",
	"input": "Input fields",
	"post": "Post text",
	"monospace": "Monospaced text"
	},
	"family": "Font name",
	"size": "Size (in px)",
	"weight": "Weight (boldness)",
	"custom": "Custom"
	},
	"preview": {
	"header": "Preview",
	"content": "Content",
	"error": "Example error",
	"button": "Button",
	"text": "A bunch of more {0} and {1}",
	"mono": "content",
	"input": "Just landed in L.A.",
	"faint_link": "helpful manual",
	"fine_print": "Read our {0} to learn nothing useful!",
	"header_faint": "This is fine",
	"checkbox": "I have skimmed over terms and conditions",
	"link": "a nice lil' link"
	}
	},
	"version": {
	"title": "Version",
	"backend_version": "Backend version",
	"frontend_version": "Frontend version"
	},
	"commit_value": "Save",
	"commit_value_tooltip": "Value is not saved, press this button to commit your changes",
	"reset_value": "Reset",
	"reset_value_tooltip": "Reset draft",
	"hard_reset_value": "Hard reset",
	"hard_reset_value_tooltip": "Remove setting from storage, forcing use of default value"
	},
	"admin_dash": {
	"window_title": "Administration",
	"wip_notice": "This admin dashboard is experimental and WIP, {adminFeLink}.",
	"old_ui_link": "old admin UI available here",
	"reset_all": "Reset all",
	"commit_all": "Save all",
	"tabs": {
	"nodb": "No DB Config",
	"instance": "Instance",
	"limits": "Limits",
	"frontends": "Front-ends",
	"emoji": "Emoji"
	},
	"nodb": {
	"heading": "Database config is disabled",
	"text": "You need to change backend config files so that {property} is set to {value}, see more in {documentation}.",
	"documentation": "documentation",
	"text2": "Most configuration options will be unavailable."
	},
	"captcha": {
	"native": "Native",
	"kocaptcha": "KoCaptcha"
	},
	"instance": {
	"instance": "Instance information",
	"registrations": "User sign-ups",
	"captcha_header": "CAPTCHA",
	"kocaptcha": "KoCaptcha settings",
	"access": "Instance access",
	"restrict": {
	"header": "Restrict access for anonymous visitors",
	"description": "Detailed setting for allowing/disallowing access to certain aspects of API. By default (indeterminate state) it will disallow if instance is not public, ticked checkbox means disallow access even if instance is public, unticked means allow access even if instance is private. Please note that unexpected behavior might happen if some settings are set, i.e. if profile access is disabled posts will show without profile information.",
	"timelines": "Timelines access",
	"profiles": "User profiles access",
	"activities": "Statuses/activities access"
	}
	},
	"limits": {
	"arbitrary_limits": "Arbitrary limits",
	"posts": "Post limits",
	"uploads": "Attachments limits",
	"users": "User profile limits",
	"profile_fields": "Profile fields limits",
	"user_uploads": "Profile media limits"
	},
	"frontend": {
	"repository": "Repository link",
	"versions": "Available versions",
	"build_url": "Build URL",
	"reinstall": "Reinstall",
	"is_default": "(Default)",
	"is_default_custom": "(Default, version: {version})",
	"install": "Install",
	"install_version": "Install version {version}",
	"more_install_options": "More install options",
	"more_default_options": "More default setting options",
	"set_default": "Set default",
	"set_default_version": "Set version {version} as default",
	"wip_notice": "Please note that this section is a WIP and lacks certain features as backend implementation of front-end management is incomplete.",
	"default_frontend": "Default frontend",
	"default_frontend_tip": "Default frontend will be shown to all users. Currently there's no way to for a user to select personal frontend. If you switch away from PleromaFE you'll most likely have to use old and buggy AdminFE to do instance configuration until we replace it.",
	"default_frontend_unavail": "Default frontend settings are not available, as this requires configuration in the database",
	"available_frontends": "Available for install",
	"failure_installing_frontend": "Failed to install frontend {version}: {reason}",
	"success_installing_frontend": "Frontend {version} successfully installed"
	},
	"emoji": {
	"global_actions": "Global actions",
	"reload": "Reload emoji",
	"importFS": "Import emoji from filesystem",
	"error": "Error: {0}",
	"create_pack": "Create pack",
	"delete_pack": "Delete pack",
	"new_pack_name": "New pack name",
	"create": "Create",
	"emoji_packs": "Emoji packs",
	"remote_packs": "Remote packs",
	"do_list": "List",
	"remote_pack_instance": "Remote pack instance",
	"emoji_pack": "Emoji pack",
	"edit_pack": "Edit pack",
	"description": "Description",
	"homepage": "Homepage",
	"fallback_src": "Fallback source",
	"fallback_sha256": "Fallback SHA256",
	"share": "Share",
	"save": "Save",
	"save_meta": "Save metadata",
	"revert_meta": "Revert metadata",
	"delete": "Delete",
	"revert": "Revert",
	"add_file": "Add file",
	"adding_new": "Adding new emoji",
	"shortcode": "Shortcode",
	"filename": "Filename",
	"new_shortcode": "Shortcode, leave blank to infer",
	"new_filename": "Filename, leave blank to infer",
	"delete_confirm": "Are you sure you want to delete {0}?",
	"download_pack": "Download pack",
	"downloading_pack": "Downloading {0}",
	"download": "Download",
	"download_as_name": "New name",
	"download_as_name_full": "New name, leave blank to reuse",
	"files": "Files",
	"editing": "Editing {0}",
	"delete_title": "Delete?",
	"metadata_changed": "Metadata different from saved",
	"emoji_changed": "Unsaved emoji file changes, check highlighted emoji",
	"replace_warning": "This will REPLACE the local pack of the same name"
	},
	"temp_overrides": {
	":pleroma": {
	":instance": {
	":public": {
	"label": "Instance is public",
	"description": "Disabling this will make all API accessible only for logged-in users, this will make Public and Federated timelines inaccessible to anonymous visitors."
	},
	":limit_to_local_content": {
	"label": "Limit search to local content",
	"description": "Disables global network search for unauthenticated (default), all users or none"
	},
	":description_limit": {
	"label": "Limit",
	"description": "Character limit for attachment descriptions"
	},
	":background_image": {
	"label": "Background image",
	"description": "Background image (primarily used by PleromaFE)"
	}
	}
	}
	}
	},
	"time": {
	"unit": {
	"days": "{0} day \| {0} days",
	"days_short": "{0}d",
	"hours": "{0} hour \| {0} hours",
	"hours_short": "{0}h",
	"minutes": "{0} minute \| {0} minutes",
	"minutes_short": "{0}min",
	"months": "{0} month \| {0} months",
	"months_short": "{0}mo",
	"seconds": "{0} second \| {0} seconds",
	"seconds_short": "{0}s",
	"weeks": "{0} week \| {0} weeks",
	"weeks_short": "{0}w",
	"years": "{0} year \| {0} years",
	"years_short": "{0}y"
	},
	"in_future": "in {0}",
	"in_past": "{0} ago",
	"now": "just now",
	"now_short": "now"
	},
	"timeline": {
	"collapse": "Collapse",
	"conversation": "Conversation",
	"error": "Error fetching timeline: {0}",
	"load_older": "Load older statuses",
	"no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated",
	"repeated": "repeated",
	"show_new": "Show new",
	"reload": "Reload",
	"up_to_date": "Up-to-date",
	"no_more_statuses": "No more statuses",
	"no_statuses": "No statuses",
	"socket_reconnected": "Realtime connection established",
	"socket_broke": "Realtime connection lost: CloseEvent code {0}",
	"quick_view_settings": "Quick view settings",
	"quick_filter_settings": "Quick filter settings"
	},
	"status": {
	"favorites": "Favorites",
	"repeats": "Repeats",
	"quotes": "Quotes",
	"repeat_confirm": "Do you really want to repeat this status?",
	"repeat_confirm_title": "Repeat confirmation",
	"repeat_confirm_accept_button": "Repeat",
	"repeat_confirm_cancel_button": "Do not repeat",
	"delete": "Delete status",
	"delete_error": "Error deleting status: {0}",
	"edit": "Edit status",
	"edited_at": "(last edited {time})",
	"pin": "Pin on profile",
	"unpin": "Unpin from profile",
	"pinned": "Pinned",
	"bookmark": "Bookmark",
	"unbookmark": "Unbookmark",
	"delete_confirm": "Do you really want to delete this status?",
	"delete_confirm_title": "Delete confirmation",
	"delete_confirm_accept_button": "Delete",
	"delete_confirm_cancel_button": "Keep",
	"reply_to": "Reply to",
	"reply_to_with_icon": "{icon} {replyTo}",
	"reply_to_with_arg": "{replyToWithIcon} {user}",
	"mentions": "Mentions",
	"replies_list": "Replies:",
	"replies_list_with_others": "Replies (+{numReplies} other): \| Replies (+{numReplies} others):",
	"mute_conversation": "Mute conversation",
	"unmute_conversation": "Unmute conversation",
	"status_unavailable": "Status unavailable",
	"copy_link": "Copy link to status",
	"external_source": "External source",
	"thread_muted": "Thread muted",
	"thread_muted_and_words": ", has words:",
	"sensitive_muted": "Muting sensitive content",
	"bot_muted": "Muting bot content",
	"show_full_subject": "Show full subject",
	"hide_full_subject": "Hide full subject",
	"show_content": "Show content",
	"hide_content": "Hide content",
	"status_deleted": "This post was deleted",
	"nsfw": "NSFW",
	"expand": "Expand",
	"you": "(You)",
	"plus_more": "+{number} more",
	"many_attachments": "Post has {number} attachment(s)",
	"collapse_attachments": "Collapse attachments",
	"show_all_attachments": "Show all attachments",
	"show_attachment_in_modal": "Show in media modal",
	"show_attachment_description": "Preview description (open attachment for full description)",
	"hide_attachment": "Hide attachment",
	"remove_attachment": "Remove attachment",
	"attachment_stop_flash": "Stop Flash player",
	"move_up": "Shift attachment left",
	"move_down": "Shift attachment right",
	"open_gallery": "Open gallery",
	"thread_hide": "Hide this thread",
	"thread_show": "Show this thread",
	"thread_show_full": "Show everything under this thread ({numStatus} status in total, max depth {depth}) \| Show everything under this thread ({numStatus} statuses in total, max depth {depth})",
	"thread_show_full_with_icon": "{icon} {text}",
	"thread_follow": "See the remaining part of this thread ({numStatus} status in total) \| See the remaining part of this thread ({numStatus} statuses in total)",
	"thread_follow_with_icon": "{icon} {text}",
	"ancestor_follow": "See {numReplies} other reply under this status \| See {numReplies} other replies under this status",
	"ancestor_follow_with_icon": "{icon} {text}",
	"show_all_conversation_with_icon": "{icon} {text}",
	"show_all_conversation": "Show full conversation ({numStatus} other status) \| Show full conversation ({numStatus} other statuses)",
	"show_only_conversation_under_this": "Only show replies to this status",
	"status_history": "Status history",
	"reaction_count_label": "{num} person reacted \| {num} people reacted",
	"hide_quote": "Hide the quoted status",
	"display_quote": "Display the quoted status",
	"invisible_quote": "Quoted status unavailable: {link}",
	"more_actions": "More actions on this status",
	"loading": "Loading...",
	"load_error": "Unable to load status: {error}"
	},
	"user_card": {
	"approve": "Approve",
	"approve_confirm_title": "Approve confirmation",
	"approve_confirm_accept_button": "Approve",
	"approve_confirm_cancel_button": "Do not approve",
	"approve_confirm": "Do you want to approve {user}'s follow request?",
	"block": "Block",
	"blocked": "Blocked!",
	"block_confirm_title": "Block confirmation",
	"block_confirm": "Do you really want to block {user}?",
	"block_confirm_accept_button": "Block",
	"block_confirm_cancel_button": "Do not block",
	"deactivated": "Deactivated",
	"deny": "Deny",
	"deny_confirm_title": "Deny confirmation",
	"deny_confirm_accept_button": "Deny",
	"deny_confirm_cancel_button": "Do not deny",
	"deny_confirm": "Do you want to deny {user}'s follow request?",
	"edit_profile": "Edit profile",
	"favorites": "Favorites",
	"follow": "Follow",
	"follow_cancel": "Cancel request",
	"follow_sent": "Request sent!",
	"follow_progress": "Requesting…",
	"follow_unfollow": "Unfollow",
	"unfollow_confirm_title": "Unfollow confirmation",
	"unfollow_confirm": "Do you really want to unfollow {user}?",
	"unfollow_confirm_accept_button": "Unfollow",
	"unfollow_confirm_cancel_button": "Do not unfollow",
	"followees": "Following",
	"followers": "Followers",
	"following": "Following!",
	"follows_you": "Follows you!",
	"hidden": "Hidden",
	"its_you": "It's you!",
	"media": "Media",
	"mention": "Mention",
	"message": "Message",
	"mute": "Mute",
	"muted": "Muted",
	"mute_confirm_title": "Mute confirmation",
	"mute_confirm": "Do you really want to mute {user}?",
	"mute_confirm_accept_button": "Mute",
	"mute_confirm_cancel_button": "Do not mute",
	"mute_duration_prompt": "Mute this user for (0 for indefinite time):",
	"per_day": "per day",
	"remote_follow": "Remote follow",
	"remove_follower": "Remove follower",
	"remove_follower_confirm_title": "Remove follower confirmation",
	"remove_follower_confirm_accept_button": "Remove",
	"remove_follower_confirm_cancel_button": "Keep",
	"remove_follower_confirm": "Do you really want to remove {user} from your followers?",
	"report": "Report",
	"statuses": "Statuses",
	"subscribe": "Subscribe",
	"unsubscribe": "Unsubscribe",
	"unblock": "Unblock",
	"unblock_progress": "Unblocking…",
	"block_progress": "Blocking…",
	"unmute": "Unmute",
	"unmute_progress": "Unmuting…",
	"mute_progress": "Muting…",
	"hide_repeats": "Hide repeats",
	"show_repeats": "Show repeats",
	"bot": "Bot",
	"group": "Group",
	"birthday": "Born {birthday}",
	"admin_menu": {
	"moderation": "Moderation",
	"grant_admin": "Grant Admin",
	"revoke_admin": "Revoke Admin",
	"grant_moderator": "Grant Moderator",
	"revoke_moderator": "Revoke Moderator",
	"activate_account": "Activate account",
	"deactivate_account": "Deactivate account",
	"delete_account": "Delete account",
	"force_nsfw": "Mark all posts as NSFW",
	"strip_media": "Remove media from posts",
	"force_unlisted": "Force posts to be unlisted",
	"sandbox": "Force posts to be followers-only",
	"disable_remote_subscription": "Disallow following user from remote instances",
	"disable_any_subscription": "Disallow following user at all",
	"quarantine": "Disallow user posts from federating",
	"delete_user": "Delete user",
	"delete_user_data_and_deactivate_confirmation": "This will permanently delete the data from this account and deactivate it. Are you absolutely sure?"
	},
	"highlight": {
	"disabled": "No highlight",
	"solid": "Solid bg",
	"striped": "Striped bg",
	"side": "Side stripe"
	},
	"note": "Note",
	"note_blank": "(None)",
	"edit_note": "Edit note",
	"edit_note_apply": "Apply",
	"edit_note_cancel": "Cancel"
	},
	"user_profile": {
	"timeline_title": "User timeline",
	"profile_does_not_exist": "Sorry, this profile does not exist.",
	"profile_loading_error": "Sorry, there was an error loading this profile."
	},
	"user_reporting": {
	"title": "Reporting {0}",
	"add_comment_description": "The report will be sent to your instance moderators. You can provide an explanation of why you are reporting this account below:",
	"additional_comments": "Additional comments",
	"forward_description": "The account is from another server. Send a copy of the report there as well?",
	"forward_to": "Forward to {0}",
	"submit": "Submit",
	"generic_error": "An error occurred while processing your request."
	},
	"who_to_follow": {
	"more": "More",
	"who_to_follow": "Who to follow"
	},
	"tool_tip": {
	"media_upload": "Upload media",
	"repeat": "Repeat",
	"reply": "Reply",
	"favorite": "Favorite",
	"add_reaction": "Add Reaction",
	"user_settings": "User Settings",
	"accept_follow_request": "Accept follow request",
	"reject_follow_request": "Reject follow request",
	"bookmark": "Bookmark",
	"toggle_expand": "Expand or collapse notification to show post in full",
	"toggle_mute": "Expand or collapse notification to reveal muted content",
	"autocomplete_available": "{number} result is available. Use up and down keys to navigate through them. \| {number} results are available. Use up and down keys to navigate through them."
	},
	"upload": {
	"error": {
	"base": "Upload failed.",
	"message": "Upload failed: {0}",
	"file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
	"default": "Try again later"
	},
	"file_size_units": {
	"B": "B",
	"KiB": "KiB",
	"MiB": "MiB",
	"GiB": "GiB",
	"TiB": "TiB"
	}
	},
	"search": {
	"people": "People",
	"hashtags": "Hashtags",
	"person_talking": "{count} person talking",
	"people_talking": "{count} people talking",
	"no_results": "No results",
	"no_more_results": "No more results",
	"load_more": "Load more results"
	},
	"password_reset": {
	"forgot_password": "Forgot password?",
	"password_reset": "Password reset",
	"instruction": "Enter your email address or username. We will send you a link to reset your password.",
	"placeholder": "Your email or username",
	"check_email": "Check your email for a link to reset your password.",
	"return_home": "Return to the home page",
	"too_many_requests": "You have reached the limit of attempts, try again later.",
	"password_reset_disabled": "Password reset is disabled. Please contact your instance administrator.",
	"password_reset_required": "You must reset your password to log in.",
	"password_reset_required_but_mailer_is_disabled": "You must reset your password, but password reset is disabled. Please contact your instance administrator."
	},
	"chats": {
	"you": "You:",
	"message_user": "Message {nickname}",
	"delete": "Delete",
	"chats": "Chats",
	"new": "New Chat",
	"empty_message_error": "Cannot post empty message",
	"more": "More",
	"delete_confirm": "Do you really want to delete this message?",
	"error_loading_chat": "Something went wrong when loading the chat.",
	"error_sending_message": "Something went wrong when sending the message.",
	"empty_chat_list_placeholder": "You don't have any chats yet. Start a new chat!"
	},
	"bookmarks": {
	"manage_bookmark_folders": "Manage bookmark folders"
	},
	"lists": {
	"lists": "Lists",
	"new": "New List",
	"title": "List title",
	"search": "Search users",
	"create": "Create",
	"save": "Save changes",
	"delete": "Delete list",
	"following_only": "Limit to Following",
	"manage_lists": "Manage lists",
	"manage_members": "Manage list members",
	"add_members": "Search for more users",
	"remove_from_list": "Remove from list",
	"add_to_list": "Add to list",
	"is_in_list": "Already in list",
	"editing_list": "Editing list {listTitle}",
	"creating_list": "Creating new list",
	"update_title": "Save Title",
	"really_delete": "Really delete list?",
	"error": "Error manipulating lists: {0}"
	},
	"file_type": {
	"audio": "Audio",
	"video": "Video",
	"image": "Image",
	"file": "File"
	},
	"display_date": {
	"today": "Today"
	},
	"update": {
	"big_update_title": "Please bear with us",
	"big_update_content": "We haven't had a release in a while, so things might look and feel different than what you're used to.",
	"update_bugs": "Please report any issues and bugs on {pleromaGitlab}, as we have changed a lot, and although we test thoroughly and use development versions ourselves, we may have missed some things. We welcome your feedback and suggestions on issues you might encounter, or how to improve Pleroma and Pleroma-FE.",
	"update_bugs_gitlab": "Pleroma GitLab",
	"update_changelog": "For more details on what's changed, see {theFullChangelog}.",
	"update_changelog_here": "the full changelog",
	"art_by": "Art by {linkToArtist}"
	},
	"unicode_domain_indicator": {
	"tooltip": "This domain contains non-ascii characters."
	},
	+ "drafts": {
	+ "drafts": "Drafts",
	+ "continue": "Continue composing",
	+ "abandon": "Abandon draft",
	+ "abandon_confirm_title": "Abandon confirmation",
	+ "abandon_confirm": "Do you really want to abandon this draft?",
	+ "abandon_confirm_accept_button": "Abandon",
	+ "abandon_confirm_cancel_button": "Keep",
	+ "replying": "Replying to {statusLink}",
	+ "editing": "Editing {statusLink}",
	+ "unavailable": "(unavailable)"
	+ },
	"splash": {
	"loading": "Loading...",
	"theme": "Applying theme, please wait warmly...",
	"fun_1": "Drink more water",
	"fun_2": "Take it easy!",
	"fun_3": "Suya...",
	"fun_4": "My Pleroma machine is full power!",
	"error": "Something went wrong"
	},
	"bookmark_folders": {
	"select_folder": "Select bookmark folder",
	"creating_folder": "Creating bookmark folder",
	"editing_folder": "Editing folder {folderName}",
	"emoji": "Emoji",
	"name": "Folder name",
	"new": "New Folder",
	"create": "Create folder",
	"delete": "Delete folder",
	"update_folder": "Save changes",
	"really_delete": "Do you really want to delete the folder?",
	"error": "Error manipulating bookmark folders: {0}"
	}
	}
	diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js
	index 22ba1e7f08..035eee78d2 100644
	--- a/src/lib/persisted_state.js
	+++ b/src/lib/persisted_state.js
	@@ -1,95 +1,95 @@
	import merge from 'lodash.merge'
	-import localforage from 'localforage'
	import { each, get, set, cloneDeep } from 'lodash'
	+import { storage } from './storage.js'

	let loaded = false

	const defaultReducer = (state, paths) => (
	paths.length === 0
	? state
	: paths.reduce((substate, path) => {
	set(substate, path, get(state, path))
	return substate
	}, {})
	)

	const saveImmedeatelyActions = [
	'markNotificationsAsSeen',
	'clearCurrentUser',
	'setCurrentUser',
	'setServerSideStorage',
	'setHighlight',
	'setOption',
	'setClientData',
	'setToken',
	'clearToken'
	]

	const defaultStorage = (() => {
	- return localforage
	+ return storage
	})()

	export default function createPersistedState ({
	key = 'vuex-lz',
	paths = [],
	getState = (key, storage) => {
	const value = storage.getItem(key)
	return value
	},
	setState = (key, state, storage) => {
	if (!loaded) {
	console.info('waiting for old state to be loaded...')
	return Promise.resolve()
	} else {
	return storage.setItem(key, state)
	}
	},
	reducer = defaultReducer,
	storage = defaultStorage,
	subscriber = store => handler => store.subscribe(handler)
	} = {}) {
	return getState(key, storage).then((savedState) => {
	return store => {
	try {
	if (savedState !== null && typeof savedState === 'object') {
	// build user cache
	const usersState = savedState.users \|\| {}
	usersState.usersObject = {}
	const users = usersState.users \|\| []
	each(users, (user) => { usersState.usersObject[user.id] = user })
	savedState.users = usersState

	store.replaceState(
	merge({}, store.state, savedState)
	)
	}
	loaded = true
	} catch (e) {
	console.error("Couldn't load state")
	console.error(e)
	loaded = true
	}
	subscriber(store)((mutation, state) => {
	try {
	if (saveImmedeatelyActions.includes(mutation.type)) {
	setState(key, reducer(cloneDeep(state), paths), storage)
	.then(success => {
	if (typeof success !== 'undefined') {
	if (mutation.type === 'setOption' \|\| mutation.type === 'setCurrentUser') {
	store.dispatch('settingsSaved', { success })
	}
	}
	}, error => {
	if (mutation.type === 'setOption' \|\| mutation.type === 'setCurrentUser') {
	store.dispatch('settingsSaved', { error })
	}
	})
	}
	} catch (e) {
	console.error("Couldn't persist state:")
	console.error(e)
	}
	})
	}
	})
	}
	diff --git a/src/lib/storage.js b/src/lib/storage.js
	new file mode 100644
	index 0000000000..25a49abc9c
	--- /dev/null
	+++ b/src/lib/storage.js
	@@ -0,0 +1,3 @@
	+import localforage from 'localforage'
	+
	+export const storage = localforage
	diff --git a/src/main.js b/src/main.js
	index eee463cc78..6b634e7422 100644
	--- a/src/main.js
	+++ b/src/main.js
	@@ -1,148 +1,150 @@
	import { createStore } 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 notificationsModule from './modules/notifications.js'
	import listsModule from './modules/lists.js'
	import usersModule from './modules/users.js'
	import apiModule from './modules/api.js'
	import configModule from './modules/config.js'
	import profileConfigModule from './modules/profileConfig.js'
	import serverSideStorageModule from './modules/serverSideStorage.js'
	import adminSettingsModule from './modules/adminSettings.js'
	import shoutModule from './modules/shout.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 editStatusModule from './modules/editStatus.js'
	import statusHistoryModule from './modules/statusHistory.js'
	+import draftsModule from './modules/drafts.js'
	import chatsModule from './modules/chats.js'
	import announcementsModule from './modules/announcements.js'
	import bookmarkFoldersModule from './modules/bookmark_folders.js'

	import { createI18n } 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 afterStoreSetup from './boot/after_store.js'

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

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

	messages.setLanguage(i18n.global, currentLocale)

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

	(async () => {
	const isFox = Math.floor(Math.random() * 2) > 0 ? '_fox' : ''

	const splashError = (i18n, e) => {
	const throbber = document.querySelector('#throbber')
	throbber.addEventListener('animationend', () => {
	document.querySelector('#mascot').src = `/static/pleromatan_orz${isFox}.png`
	})
	throbber.classList.add('dead')
	document.querySelector('#status').textContent = i18n.global.t('splash.error')
	console.error('PleromaFE failed to initialize: ', e)
	document.querySelector('#statusError').textContent = e
	document.querySelector('#statusStack').textContent = e.stack
	document.querySelector('#statusError').style = 'display: block'
	document.querySelector('#statusStack').style = 'display: block'
	}

	window.splashError = e => splashError(i18n, e)
	window.splashUpdate = key => {
	if (document.querySelector('#status')) {
	document.querySelector('#status').textContent = i18n.global.t(key)
	}
	}

	try {
	let storageError
	const plugins = [pushNotifications]
	try {
	const persistedState = await createPersistedState(persistedStateOptions)
	plugins.push(persistedState)
	} catch (e) {
	console.error('Storage error', e)
	storageError = e
	}
	document.querySelector('#mascot').src = `/static/pleromatan_apology${isFox}.png`
	document.querySelector('#status').removeAttribute('class')
	document.querySelector('#status').textContent = i18n.global.t('splash.loading')
	document.querySelector('#splash-credit').textContent = i18n.global.t('update.art_by', { linkToArtist: 'pipivovott' })
	const store = createStore({
	modules: {
	i18n: {
	getters: {
	i18n: () => i18n.global
	}
	},
	interface: interfaceModule,
	instance: instanceModule,
	// TODO refactor users/statuses modules, they depend on each other
	users: usersModule,
	statuses: statusesModule,
	notifications: notificationsModule,
	lists: listsModule,
	api: apiModule,
	config: configModule,
	profileConfig: profileConfigModule,
	serverSideStorage: serverSideStorageModule,
	adminSettings: adminSettingsModule,
	shout: shoutModule,
	oauth: oauthModule,
	authFlow: authFlowModule,
	mediaViewer: mediaViewerModule,
	oauthTokens: oauthTokensModule,
	reports: reportsModule,
	polls: pollsModule,
	postStatus: postStatusModule,
	editStatus: editStatusModule,
	statusHistory: statusHistoryModule,
	+ drafts: draftsModule,
	chats: chatsModule,
	announcements: announcementsModule,
	bookmarkFolders: bookmarkFoldersModule
	},
	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' })
	}
	return await afterStoreSetup({ store, i18n })
	} catch (e) {
	splashError(i18n, e)
	}
	})()

	// 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
	diff --git a/src/modules/config.js b/src/modules/config.js
	index 72db9de038..e1e3958553 100644
	--- a/src/modules/config.js
	+++ b/src/modules/config.js
	@@ -1,338 +1,341 @@
	import Cookies from 'js-cookie'
	import { applyConfig } from '../services/style_setter/style_setter.js'
	import messages from '../i18n/messages'
	import { set } from 'lodash'
	import localeService from '../services/locale/locale.service.js'

	const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'
	const APPEARANCE_SETTINGS_KEYS = new Set([
	'sidebarColumnWidth',
	'contentColumnWidth',
	'notifsColumnWidth',
	'textSize',
	'navbarSize',
	'panelHeaderSize',
	'forcedRoundness',
	'emojiSize',
	'emojiReactionsScale'
	])

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

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

	export const defaultState = {
	expertLevel: 0, // used to track which settings to show and hide

	// Theme stuff
	theme: undefined, // Very old theme store, stores preset name, still in use

	// V1
	colors: {}, // VERY old theme store, just colors of V1, probably not even used anymore

	// V2
	customTheme: undefined, // "snapshot", previously was used as actual theme store for V2 so it's still used in case of PleromaFE downgrade event.
	customThemeSource: undefined, // "source", stores original theme data

	// V3
	style: null,
	styleCustomData: null,
	palette: null,
	paletteCustomData: null,
	themeDebug: false, // debug mode that uses computed backgrounds instead of real ones to debug contrast functions
	forceThemeRecompilation: false, // flag that forces recompilation on boot even if cache exists
	theme3hacks: { // Hacks, user overrides that are independent of theme used
	underlay: 'none',
	fonts: {
	interface: undefined,
	input: undefined,
	post: undefined,
	monospace: undefined
	}
	},

	hideISP: false,
	hideInstanceWallpaper: false,
	hideShoutbox: false,
	// bad name: actually hides posts of muted USERS
	hideMutedPosts: undefined, // instance default
	hideMutedThreads: undefined, // instance default
	hideWordFilteredPosts: undefined, // instance default
	muteBotStatuses: undefined, // instance default
	muteSensitiveStatuses: undefined, // instance default
	collapseMessageWithSubject: undefined, // instance default
	padEmoji: true,
	hideAttachments: false,
	hideAttachmentsInConv: false,
	hideScrobbles: false,
	hideScrobblesAfter: '2d',
	maxThumbnails: 16,
	hideNsfw: true,
	preloadImage: true,
	loopVideo: true,
	loopVideoSilentOnly: true,
	streaming: false,
	emojiReactionsOnTimeline: true,
	alwaysShowNewPostButton: false,
	autohideFloatingPostButton: false,
	pauseOnUnfocused: true,
	stopGifs: true,
	replyVisibility: 'all',
	thirdColumnMode: 'notifications',
	notificationVisibility: {
	follows: true,
	mentions: true,
	statuses: true,
	likes: true,
	repeats: true,
	moves: true,
	emojiReactions: true,
	followRequest: true,
	reports: true,
	chatMention: true,
	polls: true
	},
	notificationNative: {
	follows: true,
	mentions: true,
	statuses: true,
	likes: false,
	repeats: false,
	moves: false,
	emojiReactions: false,
	followRequest: true,
	reports: true,
	chatMention: true,
	polls: true
	},
	webPushNotifications: false,
	webPushAlwaysShowNotifications: false,
	muteWords: [],
	highlight: {},
	interfaceLanguage: browserLocale,
	hideScopeNotice: false,
	useStreamingApi: false,
	sidebarRight: undefined, // instance default
	scopeCopy: undefined, // instance default
	subjectLineBehavior: undefined, // instance default
	alwaysShowSubjectInput: undefined, // instance default
	postContentType: undefined, // instance default
	minimalScopesMode: undefined, // instance default
	// This hides statuses filtered via a word filter
	hideFilteredStatuses: undefined, // instance default
	modalOnRepeat: undefined, // instance default
	modalOnUnfollow: undefined, // instance default
	modalOnBlock: undefined, // instance default
	modalOnMute: undefined, // instance default
	modalOnDelete: undefined, // instance default
	modalOnLogout: undefined, // instance default
	modalOnApproveFollow: undefined, // instance default
	modalOnDenyFollow: undefined, // instance default
	modalOnRemoveUserFromFollowers: undefined, // instance default
	playVideosInModal: false,
	useOneClickNsfw: false,
	useContainFit: true,
	disableStickyHeaders: false,
	showScrollbars: false,
	userPopoverAvatarAction: 'open',
	userPopoverOverlay: false,
	sidebarColumnWidth: '25rem',
	contentColumnWidth: '45rem',
	notifsColumnWidth: '25rem',
	emojiReactionsScale: undefined,
	textSize: undefined, // instance default
	emojiSize: undefined, // instance default
	navbarSize: undefined, // instance default
	panelHeaderSize: undefined, // instance default
	forcedRoundness: undefined, // instance default
	navbarColumnStretch: false,
	greentext: undefined, // instance default
	useAtIcon: undefined, // instance default
	mentionLinkDisplay: undefined, // instance default
	mentionLinkShowTooltip: undefined, // instance default
	mentionLinkShowAvatar: undefined, // instance default
	mentionLinkFadeDomain: undefined, // instance default
	mentionLinkShowYous: undefined, // instance default
	mentionLinkBoldenYou: undefined, // instance default
	hidePostStats: undefined, // instance default
	hideBotIndication: undefined, // instance default
	hideUserStats: undefined, // instance default
	virtualScrolling: undefined, // instance default
	sensitiveByDefault: undefined, // instance default
	conversationDisplay: undefined, // instance default
	conversationTreeAdvanced: undefined, // instance default
	conversationOtherRepliesButton: undefined, // instance default
	conversationTreeFadeAncestors: undefined, // instance default
	showExtraNotifications: undefined, // instance default
	showExtraNotificationsTip: undefined, // instance default
	showChatsInExtraNotifications: undefined, // instance default
	showAnnouncementsInExtraNotifications: undefined, // instance default
	showFollowRequestsInExtraNotifications: undefined, // instance default
	maxDepthInThread: undefined, // instance default
	autocompleteSelect: undefined, // instance default
	closingDrawerMarksAsSeen: undefined, // instance default
	unseenAtTop: undefined, // instance default
	ignoreInactionableSeen: undefined, // instance default
	+ unsavedPostAction: undefined, // instance default
	+ autoSaveDraft: undefined, // instance default
	useAbsoluteTimeFormat: undefined, // instance default
	absoluteTimeFormatMinAge: undefined // instance default
	}

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

	const config = {
	state: { ...defaultState },
	getters: {
	defaultConfig (state, getters, rootState, rootGetters) {
	const { instance } = rootState
	return {
	...defaultState,
	...Object.fromEntries(
	instanceDefaultProperties.map(key => [key, instance[key]])
	)
	}
	},
	mergedConfig (state, getters, rootState, rootGetters) {
	const { defaultConfig } = rootGetters
	return {
	...defaultConfig,
	// Do not override with undefined
	...Object.fromEntries(Object.entries(state).filter(([k, v]) => v !== undefined))
	}
	}
	},
	mutations: {
	setOptionTemporarily (state, { name, value }) {
	set(state, name, value)
	applyConfig(state)
	},
	setOption (state, { name, value }) {
	set(state, name, value)
	},
	setHighlight (state, { user, color, type }) {
	const data = this.state.config.highlight[user]
	if (color \|\| type) {
	state.highlight[user] = { color: color \|\| data.color, type: type \|\| data.type }
	} else {
	delete state.highlight[user]
	}
	}
	},
	actions: {
	loadSettings ({ dispatch }, data) {
	const knownKeys = new Set(Object.keys(defaultState))
	const presentKeys = new Set(Object.keys(data))
	const intersection = new Set()
	for (const elem of presentKeys) {
	if (knownKeys.has(elem)) {
	intersection.add(elem)
	}
	}

	intersection.forEach(
	name => dispatch('setOption', { name, value: data[name] })
	)
	},
	setHighlight ({ commit, dispatch }, { user, color, type }) {
	commit('setHighlight', { user, color, type })
	},
	setOptionTemporarily ({ commit, dispatch, state, rootState }, { name, value }) {
	if (rootState.interface.temporaryChangesTimeoutId !== null) {
	console.warn('Can\'t track more than one temporary change')
	return
	}
	const oldValue = state[name]

	commit('setOptionTemporarily', { name, value })

	const confirm = () => {
	dispatch('setOption', { name, value })
	commit('clearTemporaryChanges')
	}

	const revert = () => {
	commit('setOptionTemporarily', { name, value: oldValue })
	commit('clearTemporaryChanges')
	}

	commit('setTemporaryChanges', {
	timeoutId: setTimeout(revert, 10000),
	confirm,
	revert
	})
	},
	setThemeV2 ({ commit, dispatch }, { customTheme, customThemeSource }) {
	commit('setOption', { name: 'theme', value: 'custom' })
	commit('setOption', { name: 'customTheme', value: customTheme })
	commit('setOption', { name: 'customThemeSource', value: customThemeSource })
	dispatch('setTheme', { themeData: customThemeSource, recompile: true })
	},
	setOption ({ commit, dispatch, state }, { name, value }) {
	const exceptions = new Set([
	'useStreamingApi'
	])

	if (exceptions.has(name)) {
	switch (name) {
	case 'useStreamingApi': {
	const action = value ? 'enableMastoSockets' : 'disableMastoSockets'

	dispatch(action).then(() => {
	commit('setOption', { name: 'useStreamingApi', value })
	}).catch((e) => {
	console.error('Failed starting MastoAPI Streaming socket', e)
	dispatch('disableMastoSockets')
	dispatch('setOption', { name: 'useStreamingApi', value: false })
	})
	break
	}
	}
	} else {
	commit('setOption', { name, value })
	if (APPEARANCE_SETTINGS_KEYS.has(name)) {
	applyConfig(state)
	}
	if (name.startsWith('theme3hacks')) {
	dispatch('applyTheme', { recompile: true })
	}
	switch (name) {
	case 'theme':
	if (value === 'custom') break
	dispatch('setTheme', { themeName: value, recompile: true, saveData: true })
	break
	case 'themeDebug': {
	dispatch('setTheme', { recompile: true })
	break
	}
	case 'interfaceLanguage':
	messages.setLanguage(this.getters.i18n, value)
	dispatch('loadUnicodeEmojiData', value)
	Cookies.set(
	BACKEND_LANGUAGE_COOKIE_NAME,
	localeService.internalToBackendLocaleMulti(value)
	)
	break
	case 'thirdColumnMode':
	dispatch('setLayoutWidth', undefined)
	break
	}
	}
	}
	}
	}

	export default config
	diff --git a/src/modules/drafts.js b/src/modules/drafts.js
	new file mode 100644
	index 0000000000..7a38fe2d5b
	--- /dev/null
	+++ b/src/modules/drafts.js
	@@ -0,0 +1,86 @@
	+import { storage } from 'src/lib/storage.js'
	+
	+export const defaultState = {
	+ drafts: {}
	+}
	+
	+export const mutations = {
	+ addOrSaveDraft (state, { draft }) {
	+ state.drafts[draft.id] = draft
	+ },
	+ abandonDraft (state, { id }) {
	+ delete state.drafts[id]
	+ },
	+ loadDrafts (state, data) {
	+ state.drafts = data
	+ }
	+}
	+
	+const storageKey = 'pleroma-fe-drafts'
	+
	+/*
	+ * Note: we do not use the persist state plugin because
	+ * it is not impossible for a user to have two windows at
	+ * the same time. The persist state plugin is just overriding
	+ * everything with the current state. This isn't good because
	+ * if a draft is created in one window and another draft is
	+ * created in another, the draft in the first window will just
	+ * be overriden.
	+ * Here, we can't guarantee 100% atomicity unless one uses
	+ * different keys, which will just pollute the whole storage.
	+ * It is indeed best to have backend support for this.
	+ */
	+const getStorageData = async () => ((await storage.getItem(storageKey)) \|\| {})
	+
	+const saveDraftToStorage = async (draft) => {
	+ const currentData = await getStorageData()
	+ currentData[draft.id] = JSON.parse(JSON.stringify(draft))
	+ await storage.setItem(storageKey, currentData)
	+}
	+
	+const deleteDraftFromStorage = async (id) => {
	+ const currentData = await getStorageData()
	+ delete currentData[id]
	+ await storage.setItem(storageKey, currentData)
	+}
	+
	+export const actions = {
	+ async addOrSaveDraft (store, { draft }) {
	+ const id = draft.id \|\| (new Date().getTime()).toString()
	+ const draftWithId = { ...draft, id }
	+ store.commit('addOrSaveDraft', { draft: draftWithId })
	+ await saveDraftToStorage(draftWithId)
	+ return id
	+ },
	+ async abandonDraft (store, { id }) {
	+ store.commit('abandonDraft', { id })
	+ await deleteDraftFromStorage(id)
	+ },
	+ async loadDrafts (store) {
	+ const currentData = await getStorageData()
	+ store.commit('loadDrafts', currentData)
	+ }
	+}
	+
	+export const getters = {
	+ draftsByTypeAndRefId (state) {
	+ return (type, refId) => {
	+ return Object.values(state.drafts).filter(draft => draft.type === type && draft.refId === refId)
	+ }
	+ },
	+ draftsArray (state) {
	+ return Object.values(state.drafts)
	+ },
	+ draftCount (state) {
	+ return Object.values(state.drafts).length
	+ }
	+}
	+
	+const drafts = {
	+ state: defaultState,
	+ mutations,
	+ getters,
	+ actions
	+}
	+
	+export default drafts
	diff --git a/src/modules/instance.js b/src/modules/instance.js
	index 23d022c6ff..72e34628e5 100644
	--- a/src/modules/instance.js
	+++ b/src/modules/instance.js
	@@ -1,409 +1,411 @@
	import apiService from '../services/api/api.service.js'
	import { instanceDefaultProperties } from './config.js'
	import { langCodeToCldrName, ensureFinalFallback } from '../i18n/languages.js'

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

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

	const REMOTE_INTERACTION_URL = '/main/ostatus'

	const defaultState = {
	// Stuff from apiConfig
	name: 'Pleroma FE',
	registrationOpen: true,
	server: 'http://localhost:4040/',
	textlimit: 5000,
	themesIndex: undefined,
	stylesIndex: undefined,
	palettesIndex: undefined,
	themeData: undefined, // used for theme editor v2
	vapidPublicKey: undefined,

	// Stuff from static/config.json
	alwaysShowSubjectInput: true,
	defaultAvatar: '/images/avi.png',
	defaultBanner: '/images/banner.png',
	background: '/static/aurora_borealis.jpg',
	collapseMessageWithSubject: false,
	greentext: false,
	useAtIcon: false,
	mentionLinkDisplay: 'short',
	mentionLinkShowTooltip: true,
	mentionLinkShowAvatar: false,
	mentionLinkFadeDomain: true,
	mentionLinkShowYous: false,
	mentionLinkBoldenYou: true,
	hideFilteredStatuses: false,
	// bad name: actually hides posts of muted USERS
	hideMutedPosts: false,
	hideMutedThreads: true,
	hideWordFilteredPosts: false,
	hidePostStats: false,
	hideBotIndication: false,
	hideSitename: false,
	hideUserStats: false,
	muteBotStatuses: false,
	muteSensitiveStatuses: false,
	modalOnRepeat: false,
	modalOnUnfollow: false,
	modalOnBlock: true,
	modalOnMute: false,
	modalOnDelete: true,
	modalOnLogout: true,
	modalOnApproveFollow: false,
	modalOnDenyFollow: false,
	modalOnRemoveUserFromFollowers: false,
	loginMethod: 'password',
	logo: '/static/logo.svg',
	logoMargin: '.2em',
	logoMask: true,
	logoLeft: false,
	disableUpdateNotification: false,
	minimalScopesMode: false,
	nsfwCensorImage: undefined,
	postContentType: 'text/plain',
	redirectRootLogin: '/main/friends',
	redirectRootNoLogin: '/main/all',
	scopeCopy: true,
	showFeaturesPanel: true,
	showInstanceSpecificPanel: false,
	sidebarRight: false,
	subjectLineBehavior: 'email',
	theme: 'pleroma-dark',
	palette: null,
	style: null,
	emojiReactionsScale: 0.5,
	textSize: '14px',
	emojiSize: '2.2rem',
	navbarSize: '3.5rem',
	panelHeaderSize: '3.2rem',
	forcedRoundness: -1,
	fontsOverride: {},
	virtualScrolling: true,
	sensitiveByDefault: false,
	conversationDisplay: 'linear',
	conversationTreeAdvanced: false,
	conversationOtherRepliesButton: 'below',
	conversationTreeFadeAncestors: false,
	showExtraNotifications: true,
	showExtraNotificationsTip: true,
	showChatsInExtraNotifications: true,
	showAnnouncementsInExtraNotifications: true,
	showFollowRequestsInExtraNotifications: true,
	maxDepthInThread: 6,
	autocompleteSelect: false,
	closingDrawerMarksAsSeen: true,
	unseenAtTop: false,
	ignoreInactionableSeen: false,
	+ unsavedPostAction: 'confirm',
	+ autoSaveDraft: false,
	useAbsoluteTimeFormat: false,
	absoluteTimeFormatMinAge: '0d',

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

	// Feature-set, apparently, not everything here is reported...
	shoutAvailable: false,
	pleromaChatMessagesAvailable: false,
	pleromaCustomEmojiReactionsAvailable: false,
	pleromaBookmarkFoldersAvailable: false,
	gopherAvailable: false,
	mediaProxyAvailable: false,
	suggestionsEnabled: false,
	suggestionsWeb: '',
	quotingAvailable: false,
	groupActorAvailable: false,

	// Html stuff
	instanceSpecificPanelContent: '',
	tos: '',

	// Version Information
	backendVersion: '',
	backendRepository: '',
	frontendVersion: '',

	pollsAvailable: false,
	pollLimits: {
	max_options: 4,
	max_option_chars: 255,
	min_expiration: 60,
	max_expiration: 60 * 60 * 24
	}
	}

	const loadAnnotations = (lang) => {
	return import(
	/* webpackChunkName: "emoji-annotations/[request]" */
	`@kazvmoe-infra/unicode-emoji-json/annotations/${langCodeToCldrName(lang)}.json`
	)
	.then(k => k.default)
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

	export default instance
	diff --git a/src/services/poll/poll.service.js b/src/services/poll/poll.service.js
	new file mode 100644
	index 0000000000..90f8e87ae7
	--- /dev/null
	+++ b/src/services/poll/poll.service.js
	@@ -0,0 +1,36 @@
	+import * as DateUtils from 'src/services/date_utils/date_utils.js'
	+import { uniq } from 'lodash'
	+
	+const pollFallbackValues = {
	+ pollType: 'single',
	+ options: ['', ''],
	+ expiryAmount: 10,
	+ expiryUnit: 'minutes'
	+}
	+
	+const pollFallback = (object, attr) => {
	+ return object[attr] !== undefined ? object[attr] : pollFallbackValues[attr]
	+}
	+
	+const pollFormToMasto = (poll) => {
	+ const expiresIn = DateUtils.unitToSeconds(
	+ pollFallback(poll, 'expiryUnit'),
	+ pollFallback(poll, 'expiryAmount')
	+ )
	+
	+ const options = uniq(pollFallback(poll, 'options').filter(option => option !== ''))
	+ if (options.length < 2) {
	+ return { errorKey: 'polls.not_enough_options' }
	+ }
	+
	+ return {
	+ options,
	+ multiple: pollFallback(poll, 'pollType') === 'multiple',
	+ expiresIn
	+ }
	+}
	+
	+export {
	+ pollFallback,
	+ pollFormToMasto
	+}
	diff --git a/src/sw.js b/src/sw.js
	index 8d790446a8..4a36672c15 100644
	--- a/src/sw.js
	+++ b/src/sw.js
	@@ -1,141 +1,141 @@
	/* eslint-env serviceworker */

	-import localForage from 'localforage'
	+import { storage } from 'src/lib/storage.js'
	import { parseNotification } from './services/entity_normalizer/entity_normalizer.service.js'
	import { prepareNotificationObject } from './services/notification_utils/notification_utils.js'
	import { createI18n } from 'vue-i18n'
	import messages from './i18n/service_worker_messages.js'

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

	const state = {
	lastFocused: null,
	notificationIds: new Set(),
	allowedNotificationTypes: null
	}

	function getWindowClients () {
	return clients.matchAll({ includeUncontrolled: true })
	.then((clientList) => clientList.filter(({ type }) => type === 'window'))
	}

	const setSettings = async () => {
	- const vuexState = await localForage.getItem('vuex-lz')
	+ const vuexState = await storage.getItem('vuex-lz')
	const locale = vuexState.config.interfaceLanguage \|\| 'en'
	i18n.locale = locale
	const notificationsNativeArray = Object.entries(vuexState.config.notificationNative)
	state.webPushAlwaysShowNotifications = vuexState.config.webPushAlwaysShowNotifications

	state.allowedNotificationTypes = new Set(
	notificationsNativeArray
	.filter(([k, v]) => v)
	.map(([k]) => {
	switch (k) {
	case 'mentions':
	return 'mention'
	case 'statuses':
	return 'status'
	case 'likes':
	return 'like'
	case 'repeats':
	return 'repeat'
	case 'emojiReactions':
	return 'pleroma:emoji_reaction'
	case 'reports':
	return 'pleroma:report'
	case 'followRequest':
	return 'follow_request'
	case 'follows':
	return 'follow'
	case 'polls':
	return 'poll'
	default:
	return k
	}
	})
	)
	}

	const showPushNotification = async (event) => {
	const activeClients = await getWindowClients()
	await setSettings()
	// Only show push notifications if all tabs/windows are closed
	if (state.webPushAlwaysShowNotifications \|\| activeClients.length === 0) {
	const data = event.data.json()

	const url = `${self.registration.scope}api/v1/notifications/${data.notification_id}`
	const notification = await fetch(url, { headers: { Authorization: 'Bearer ' + data.access_token } })
	const notificationJson = await notification.json()
	const parsedNotification = parseNotification(notificationJson)

	const res = prepareNotificationObject(parsedNotification, i18n)

	if (state.webPushAlwaysShowNotifications \|\| state.allowedNotificationTypes.has(parsedNotification.type)) {
	return self.registration.showNotification(res.title, res)
	}
	}
	return Promise.resolve()
	}

	self.addEventListener('push', async (event) => {
	if (event.data) {
	// Supposedly, we HAVE to return a promise inside waitUntil otherwise it will
	// show (extra) notification that website is updated in background
	event.waitUntil(showPushNotification(event))
	}
	})

	self.addEventListener('message', async (event) => {
	await setSettings()
	const { type, content } = event.data

	if (type === 'desktopNotification') {
	const { title, ...rest } = content
	const { tag, type } = rest
	if (state.notificationIds.has(tag)) return
	state.notificationIds.add(tag)
	setTimeout(() => state.notificationIds.delete(tag), 10000)
	if (state.allowedNotificationTypes.has(type)) {
	self.registration.showNotification(title, rest)
	}
	}

	if (type === 'desktopNotificationClose') {
	const { id, all } = content
	const search = all ? null : { tag: id }
	const notifications = await self.registration.getNotifications(search)
	notifications.forEach(n => n.close())
	}

	if (type === 'updateFocus') {
	state.lastFocused = event.source.id

	const notifications = await self.registration.getNotifications()
	notifications.forEach(n => n.close())
	}
	})

	self.addEventListener('notificationclick', (event) => {
	event.notification.close()

	event.waitUntil(getWindowClients().then((list) => {
	for (let i = 0; i < list.length; i++) {
	const client = list[i]
	client.postMessage({ type: 'notificationClicked', id: event.notification.tag })
	}

	for (let i = 0; i < list.length; i++) {
	const client = list[i]
	if (state.lastFocused === null \|\| client.id === state.lastFocused) {
	if ('focus' in client) return client.focus()
	}
	}

	if (clients.openWindow) return clients.openWindow('/')
	}))
	})

File Metadata

Mime Type: text/x-diff
Expires: Sat, Sep 19, 3:30 AM (1 d, 2 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1764248
Default Alt Text: (311 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions