No OneTemporary
Actions

Size

256 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/visual.change b/changelog.d/visual.change
	new file mode 100644
	index 0000000000..e0cd42f65c
	--- /dev/null
	+++ b/changelog.d/visual.change
	@@ -0,0 +1,5 @@
	+Combined subject and content fields in post form (visually)
	+Fixes for some elements not scaling with user UI scale
	+Moved post form's emoji button into input field
	+Minor visual changes and fixes
	+Clicking on fav/rt/emoji notifications' contents expands/collapses it
	diff --git a/index.html b/index.html
	index fb92252c5f..26eeee19bb 100644
	--- a/index.html
	+++ b/index.html
	@@ -1,51 +1,51 @@
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
	<link rel="preload" href="/static/config.json" as="fetch" crossorigin />
	<link rel="preload" href="/api/pleroma/frontend_configurations" as="fetch" crossorigin />
	<link rel="preload" href="/nodeinfo/2.0.json" as="fetch" crossorigin />
	<link rel="preload" href="/nodeinfo/2.1.json" as="fetch" crossorigin />
	<link rel="preload" href="/api/v1/instance" as="fetch" crossorigin />
	<link rel="preload" href="/static/pleromatan_apology_fox_small.webp" as="image" />
	<!-- putting styles here to avoid having to wait for styles to load up -->
	<link rel="stylesheet" id="splashscreen" href="/static/splash.css" />
	<link rel="stylesheet" id="custom-styles-holder" type="text/css" href="/static/empty.css" />
	<!--server-generated-meta-->
	</head>
	<body>
	<noscript>To use Pleroma, please enable JavaScript.</noscript>
	- <div id="splash">
	+ <div id="splash" class="initial-hidden">
	<!-- we are hiding entire graphic so no point showing credit -->
	<div aria-hidden="true" id="splash-credit">
	Art by pipivovott
	</div>
	<div id="splash-container">
	<div aria-hidden="true" id="mascot-container">
	<div id="throbber">
	<div class="chunk" id="chunk-P">
	</div>
	<div class="chunk" id="chunk-L">
	</div>
	<div class="chunk" id="chunk-E">
	</div>
	</div>
	<img id="mascot" src="/static/pleromatan_apology_small.webp">
	</div>
	<div id="status" class="css-ok">
	<!-- (｡>﹏<) -->
	<!-- it's a pseudographic, don't want screenreader read out nonsense -->
	<span aria-hidden="true" class="initial-text">(｡>﹏<)</span>
	</div>
	<code id="statusError"></code>
	<pre id="statusStack"></pre>
	</div>
	</div>
	<div id="app" class="hidden"></div>
	<div id="modal"></div>
	<!-- built files will be auto injected -->
	<div id="popovers"></div>
	<script type="module" src="/src/main.js"></script>
	</body>
	</html>
	diff --git a/public/static/splash.css b/public/static/splash.css
	index abdc19fc29..f56f33d070 100644
	--- a/public/static/splash.css
	+++ b/public/static/splash.css
	@@ -1,126 +1,132 @@
	body {
	margin: 0;
	padding: 0;
	}

	#splash {
	--scale: 1;
	+
	width: 100vw;
	height: 100vh;
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: auto;
	align-content: center;
	- align-items: center;
	- justify-content: center;
	- justify-items: center;
	+ place-items: center;
	flex-direction: column;
	background: #0f161e;
	font-family: sans-serif;
	color: #b9b9ba;
	position: absolute;
	z-index: 9999;
	font-size: calc(1vw + 1vh + 1vmin);
	+ opacity: 1;
	+ transition: opacity 500ms ease-out 2s;
	+}
	+
	+#splash.hidden,
	+#splash.initial-hidden {
	+ opacity: 0;
	}

	#splash-credit {
	position: absolute;
	- font-size: 14px;
	- bottom: 16px;
	- right: 16px;
	+ font-size: 1em;
	+ bottom: 1em;
	+ right: 1em;
	}

	#splash-container {
	align-items: center;
	}

	#mascot-container {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	perspective: 60em;
	perspective-origin: 0 -15em;
	transform-style: preserve-3d;
	}

	#mascot {
	width: calc(10em * var(--scale));
	height: calc(10em * var(--scale));
	object-fit: contain;
	object-position: bottom;
	transform: translateZ(-2em);
	}

	#throbber {
	display: grid;
	width: calc(5em * 0.5 * var(--scale));
	height: calc(8em * 0.5 * var(--scale));
	margin-left: 4.1em;
	z-index: 2;
	grid-template-rows: repeat(8, 1fr);
	grid-template-columns: repeat(5, 1fr);
	grid-template-areas: "P P . L L"
	"P P . L L"
	"P P . L L"
	"P P . L L"
	"P P . . ."
	"P P . . ."
	"P P . E E"
	"P P . E E";

	--logoChunkSize: calc(2em * 0.5 * var(--scale))
	}

	.chunk {
	background-color: #e2b188;
	box-shadow: 0.01em 0.01em 0.1em 0 #e2b188;
	}

	#chunk-P {
	grid-area: P;
	border-top-left-radius: calc(var(--logoChunkSize) / 2);
	}

	#chunk-L {
	grid-area: L;
	border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
	}

	#chunk-E {
	grid-area: E;
	border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
	}

	#status {
	margin-top: 1em;
	line-height: 2;
	width: 100%;
	text-align: center;
	}

	#statusError {
	display: none;
	margin-top: 1em;
	font-size: calc(1vw + 1vh + 1vmin);
	line-height: 2;
	width: 100%;
	text-align: center;
	}

	#statusStack {
	display: none;
	margin-top: 1em;
	font-size: calc((1vw + 1vh + 1vmin) / 2.5);
	width: calc(100vw - 5em);
	padding: 1em;
	text-overflow: ellipsis;
	overflow-x: hidden;
	text-align: left;
	line-height: 2;
	}

	@media (prefers-reduced-motion) {
	#throbber {
	animation: none !important;
	}
	}
	diff --git a/src/App.js b/src/App.js
	index a251682dcc..0027d908ac 100644
	--- a/src/App.js
	+++ b/src/App.js
	@@ -1,221 +1,224 @@
	import UserPanel from './components/user_panel/user_panel.vue'
	import NavPanel from './components/nav_panel/nav_panel.vue'
	import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
	import FeaturesPanel from './components/features_panel/features_panel.vue'
	import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
	import ShoutPanel from './components/shout_panel/shout_panel.vue'
	import MediaModal from './components/media_modal/media_modal.vue'
	import SideDrawer from './components/side_drawer/side_drawer.vue'
	import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
	import MobileNav from './components/mobile_nav/mobile_nav.vue'
	import DesktopNav from './components/desktop_nav/desktop_nav.vue'
	import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
	import EditStatusModal from './components/edit_status_modal/edit_status_modal.vue'
	import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
	import StatusHistoryModal from './components/status_history_modal/status_history_modal.vue'
	import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
	import { getOrCreateServiceWorker } from './services/sw/sw'
	import { windowWidth, windowHeight } from './services/window_utils/window_utils'
	import { mapGetters } from 'vuex'
	import { defineAsyncComponent } from 'vue'
	import { useShoutStore } from './stores/shout'
	import { useInterfaceStore } from './stores/interface'

	import { throttle } from 'lodash'

	export default {
	name: 'app',
	components: {
	UserPanel,
	NavPanel,
	Notifications: defineAsyncComponent(() => import('./components/notifications/notifications.vue')),
	InstanceSpecificPanel,
	FeaturesPanel,
	WhoToFollowPanel,
	ShoutPanel,
	MediaModal,
	SideDrawer,
	MobilePostStatusButton,
	MobileNav,
	DesktopNav,
	SettingsModal: defineAsyncComponent(() => import('./components/settings_modal/settings_modal.vue')),
	UpdateNotification: defineAsyncComponent(() => import('./components/update_notification/update_notification.vue')),
	UserReportingModal,
	PostStatusModal,
	EditStatusModal,
	StatusHistoryModal,
	GlobalNoticeList
	},
	data: () => ({
	mobileActivePanel: 'timeline'
	}),
	watch: {
	themeApplied () {
	this.removeSplash()
	},
	currentTheme () {
	this.setThemeBodyClass()
	},
	layoutType () {
	document.getElementById('modal').classList = ['-' + this.layoutType]
	}
	},
	created () {
	// Load the locale from the storage
	const val = this.$store.getters.mergedConfig.interfaceLanguage
	this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
	document.getElementById('modal').classList = ['-' + this.layoutType]

	// Create bound handlers
	this.updateScrollState = throttle(this.scrollHandler, 200)
	this.updateMobileState = throttle(this.resizeHandler, 200)
	},
	mounted () {
	window.addEventListener('resize', this.updateMobileState)
	this.scrollParent.addEventListener('scroll', this.updateScrollState)

	if (useInterfaceStore().themeApplied) {
	this.setThemeBodyClass()
	this.removeSplash()
	}
	getOrCreateServiceWorker()
	},
	unmounted () {
	window.removeEventListener('resize', this.updateMobileState)
	this.scrollParent.removeEventListener('scroll', this.updateScrollState)
	},
	computed: {
	themeApplied () {
	return useInterfaceStore().themeApplied
	},
	currentTheme () {
	if (useInterfaceStore().styleDataUsed) {
	const styleMeta = useInterfaceStore().styleDataUsed.find(x => x.component === '@meta')

	if (styleMeta !== undefined) {
	return styleMeta.directives.name.replaceAll(" ", "-").toLowerCase()
	}
	}

	return 'stock'
	},
	layoutModalClass () {
	return '-' + this.layoutType
	},
	classes () {
	return [
	{
	'-reverse': this.reverseLayout,
	'-no-sticky-headers': this.noSticky,
	'-has-new-post-button': this.newPostButtonShown
	},
	'-' + this.layoutType
	]
	},
	navClasses () {
	const { navbarColumnStretch } = this.$store.getters.mergedConfig
	return [
	'-' + this.layoutType,
	...(navbarColumnStretch ? ['-column-stretch'] : [])
	]
	},
	currentUser () { return this.$store.state.users.currentUser },
	userBackground () { return this.currentUser.background_image },
	instanceBackground () {
	return this.mergedConfig.hideInstanceWallpaper
	? null
	: this.$store.state.instance.background
	},
	background () { return this.userBackground \|\| this.instanceBackground },
	bgStyle () {
	if (this.background) {
	return {
	'--body-background-image': `url(${this.background})`
	}
	}
	},
	shout () { return useShoutStore().joined },
	suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
	showInstanceSpecificPanel () {
	return this.$store.state.instance.showInstanceSpecificPanel &&
	!this.$store.getters.mergedConfig.hideISP &&
	this.$store.state.instance.instanceSpecificPanelContent
	},
	isChats () {
	return this.$route.name === 'chat' \|\| this.$route.name === 'chats'
	},
	isListEdit () {
	return this.$route.name === 'lists-edit'
	},
	newPostButtonShown () {
	if (this.isChats) return false
	if (this.isListEdit) return false
	return this.$store.getters.mergedConfig.alwaysShowNewPostButton \|\| this.layoutType === 'mobile'
	},
	showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
	editingAvailable () { return this.$store.state.instance.editingAvailable },
	shoutboxPosition () {
	return this.$store.getters.mergedConfig.alwaysShowNewPostButton \|\| false
	},
	hideShoutbox () {
	return this.$store.getters.mergedConfig.hideShoutbox
	},
	layoutType () { return useInterfaceStore().layoutType },
	privateMode () { return this.$store.state.instance.private },
	reverseLayout () {
	const { thirdColumnMode, sidebarRight: reverseSetting } = this.$store.getters.mergedConfig
	if (this.layoutType !== 'wide') {
	return reverseSetting
	} else {
	return thirdColumnMode === 'notifications' ? reverseSetting : !reverseSetting
	}
	},
	noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
	showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars },
	scrollParent () { return window; /* this.$refs.appContentRef */ },
	...mapGetters(['mergedConfig'])
	},
	methods: {
	resizeHandler () {
	useInterfaceStore().setLayoutWidth(windowWidth())
	useInterfaceStore().setLayoutHeight(windowHeight())
	},
	scrollHandler () {
	const scrollPosition = this.scrollParent === window ? window.scrollY : this.scrollParent.scrollTop

	if (scrollPosition != 0) {
	this.$refs.appContentRef.classList.add(['-scrolled'])
	} else {
	this.$refs.appContentRef.classList.remove(['-scrolled'])
	}
	},
	setThemeBodyClass () {
	const themeName = this.currentTheme
	const classList = Array.from(document.body.classList)
	const oldTheme = classList.filter(c => c.startsWith('theme-'))

	if (themeName !== null && themeName !== '') {
	const newTheme = `theme-${themeName.toLowerCase()}`

	// remove old theme reference if there are any
	if (oldTheme.length) {
	document.body.classList.replace(oldTheme[0], newTheme)
	} else {
	document.body.classList.add(newTheme)
	}
	} else {
	// remove theme reference if non-V3 theme is used
	document.body.classList.remove(...oldTheme)
	}
	},
	removeSplash () {
	document.querySelector('#status').textContent = this.$t('splash.fun_' + Math.ceil(Math.random() * 4))
	const splashscreenRoot = document.querySelector('#splash')
	splashscreenRoot.addEventListener('transitionend', () => {
	splashscreenRoot.remove()
	})
	+ setTimeout(() => {
	+ splashscreenRoot.remove() // forcibly remove it, should fix my plasma browser widget t. HJ
	+ }, 600)
	splashscreenRoot.classList.add('hidden')
	document.querySelector('#app').classList.remove('hidden')
	}
	}
	}
	diff --git a/src/App.scss b/src/App.scss
	index 51f2c9af3d..00a8e9547a 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,1099 +1,1098 @@
	// stylelint-disable rscss/class-format
	/* stylelint-disable no-descending-specificity */
	@use "panel";

	@import '@fortawesome/fontawesome-svg-core/styles.css';
	@import '@kazvmoe-infra/pinch-zoom-element/dist/pinch-zoom.css';

	: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);
	+ font-size: var(--textSize, 1rem);

	--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;
	padding: 0;
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overscroll-behavior-y: none;
	overflow: clip 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;
	place-content: flex-start center;
	flex-wrap: wrap;
	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: hidden auto;
	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);

	+ &.-transparent {
	+ backdrop-filter: blur(0.125em) contrast(60%);
	+ }
	+
	&::-moz-focus-inner {
	border: none;
	}

	&:disabled {
	cursor: not-allowed;
	}

	&:active {
	transform: translate(1px, 1px);
	}
	}

	.menu-item {
	line-height: var(--__line-height);
	font-family: inherit;
	font-weight: 400;
	font-size: 100%;
	cursor: pointer;

	a,
	button:not(.button-default) {
	color: var(--text);
	font-size: 100%;
	}

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

	.list-item {
	border-color: var(--border);
	border-style: solid;
	border-width: 0;
	border-top-width: 1px;

	&.-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;
	}

	&: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;
	}
	}

	.menu-item,
	.list-item {
	display: block;
	box-sizing: border-box;
	border: none;
	outline: none;
	text-align: initial;
	color: inherit;
	clear: both;
	position: relative;
	white-space: nowrap;
	width: 100%;
	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;
	}

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

	.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;
	}

	&::placeholder {
	color: var(--textFaint)
	}

	--_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-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;
	+ min-height: 0.6em;
	+ max-height: 0.6em;
	+ min-width: 0.6em;
	+ max-width: 0.6em;
	padding: 0;
	line-height: 0;
	font-size: 0;
	- left: calc(50% - 4px);
	- top: calc(50% - 4px);
	- margin-left: 6px;
	- margin-top: -6px;
	+ left: calc(50% - 0.6em);
	+ top: calc(50% - 0.6em);
	+ margin-left: 0.4em;
	+ margin-top: -0.4em;
	}

	&.-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;
	}
	}

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

	.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 (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 (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 0.5s;
	- opacity: 1;
	-
	- &.hidden {
	- opacity: 0;
	- }
	+ // transition: opacity 0.5s;

	#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: 0.5s;
	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-out;
	}

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

	@property --shadow {
	syntax: "*";
	inherits: false;
	}
	diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
	index 16346c97c8..97515eb32c 100644
	--- a/src/components/attachment/attachment.scss
	+++ b/src/components/attachment/attachment.scss
	@@ -1,267 +1,267 @@
	.Attachment {
	display: inline-flex;
	flex-direction: column;
	position: relative;
	align-self: flex-start;
	line-height: 0;
	height: 100%;
	border-style: solid;
	border-width: 1px;
	border-radius: var(--roundness);
	border-color: var(--border);

	.attachment-wrapper {
	flex: 1 1 auto;
	height: 100%;
	position: relative;
	overflow: hidden;
	}

	.description-container {
	flex: 0 1 0;
	display: flex;
	padding-top: 0.5em;
	z-index: 1;

	p {
	flex: 1;
	text-align: center;
	line-height: 1.5;
	padding: 0.5em;
	margin: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	}

	&.-static {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding-top: 0;
	background: var(--popover);
	box-shadow: var(--popupShadow);
	}
	}

	.description-field {
	flex: 1;
	min-width: 0;
	}

	& .placeholder-container,
	& .image-container,
	& .audio-container,
	& .video-container,
	& .flash-container,
	& .oembed-container {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	}

	.image-container {
	.image {
	width: 100%;
	height: 100%;
	}
	}

	& .flash-container,
	& .video-container {
	& .flash,
	& video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	align-self: center;
	}
	}

	.video-container {
	border: none;
	outline: none;
	color: inherit;
	background: transparent;
	}

	.audio-container {
	display: flex;
	align-items: flex-end;

	audio {
	width: 100%;
	height: 100%;
	}
	}

	.placeholder-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 0.5em;
	}

	.play-icon {
	position: absolute;
	- font-size: 64px;
	- top: calc(50% - 32px);
	- left: calc(50% - 32px);
	+ font-size: 4.5em;
	+ top: calc(50% - 2.25rem);
	+ left: calc(50% - 2.25rem);
	color: rgb(255 255 255 / 75%);
	text-shadow: 0 0 2px rgb(0 0 0 / 40%);

	&::before {
	margin: 0;
	}
	}

	.attachment-buttons {
	display: flex;
	position: absolute;
	right: 0;
	top: 0;
	margin-top: 0.5em;
	margin-right: 0.5em;
	z-index: 1;

	.attachment-button {
	padding: 0;
	border-radius: var(--roundness);
	text-align: center;
	width: 2em;
	height: 2em;
	margin-left: 0.5em;
	font-size: 1.25em;
	}
	}

	&.-contain-fit {
	img,
	canvas {
	object-fit: contain;
	}
	}

	&.-cover-fit {
	img,
	canvas {
	object-fit: cover;
	}
	}

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

	img {
	width: 100%;
	}

	.image {
	flex: 1;

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

	.text {
	flex: 2;
	margin: 8px;
	overflow-wrap: break-word;
	text-wrap: pretty;

	h1 {
	font-size: 1rem;
	margin: 0;
	}
	}
	}

	&.-size-small {
	.play-icon {
	zoom: 0.5;
	opacity: 0.7;
	}

	.attachment-buttons {
	zoom: 0.7;
	opacity: 0.5;
	}
	}

	&.-editable {
	padding: 0.5em;

	& .description-container,
	& .attachment-buttons {
	margin: 0;
	}
	}

	&.-placeholder {
	display: inline-block;
	color: var(--link);
	overflow: hidden;
	white-space: nowrap;
	height: auto;
	line-height: 1.5;

	&:not(.-editable) {
	border: none;
	}

	&.-editable {
	display: flex;
	flex-direction: row;
	align-items: baseline;

	& .description-container,
	& .attachment-buttons {
	margin: 0;
	padding: 0;
	position: relative;
	}

	.description-container {
	flex: 1;
	padding-left: 0.5em;
	}

	.attachment-buttons {
	order: 99;
	align-self: center;
	}
	}

	a {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	svg {
	color: inherit;
	}
	}

	&.-loading {
	cursor: progress;
	}

	&.-compact {
	.placeholder-container {
	padding-bottom: 0.5em;
	}
	}
	}
	diff --git a/src/components/button.style.js b/src/components/button.style.js
	index ecbf54d9e6..c32a232f42 100644
	--- a/src/components/button.style.js
	+++ b/src/components/button.style.js
	@@ -1,149 +1,169 @@
	export default {
	name: 'Button', // Name of the component
	selector: '.button-default', // CSS selector/prefix
	// outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component
	// States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
	states: {
	// States are a bit expensive - the amount of combinations generated is about (1/6)n^3+n, so adding more state increased number of combination by an order of magnitude!
	// All states inherit from "normal" state, there is no other inheirtance, i.e. hover+disabled only inherits from "normal", not from hover nor disabled.
	// However, cascading still works, so resulting state will be result of merging of all relevant states/variants
	// normal: '' // normal state is implicitly added, it is always included
	toggled: '.toggled',
	focused: ':focus-within',
	pressed: ':active',
	hover: ':is(:hover, :focus-visible):not(:disabled)',
	disabled: ':disabled'
	},
	// Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
	variants: {
	// Variants save on computation time since adding new variant just adds one more "set".
	// normal: '', // you can override normal variant, it will be appenended to the main class
	danger: '.-danger',
	transparent: '.-transparent'
	// Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
	// This (currently) is further multipled by number of places where component can exist.
	},
	editor: {
	aspect: '2 / 1'
	},
	// This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever).
	validInnerComponents: [
	'Text',
	'Icon'
	],
	// Default rules, used as "default theme", essentially.
	defaultRules: [
	{
	component: 'Root',
	directives: {
	'--buttonDefaultHoverGlow': 'shadow \| 0 0 1 2 --text / 0.4',
	'--buttonDefaultFocusGlow': 'shadow \| 0 0 1 2 --link / 0.5',
	'--buttonDefaultShadow': 'shadow \| 0 0 2 #000000',
	'--buttonDefaultBevel': 'shadow \| $borderSide(#FFFFFF top 0.2 1), $borderSide(#000000 bottom 0.2 1)',
	'--buttonPressedBevel': 'shadow \| inset 0 0 4 #000000, $borderSide(#FFFFFF bottom 0.2 1), $borderSide(#000000 top 0.2 1)'
	}
	},
	{
	// component: 'Button', // no need to specify components every time unless you're specifying how other component should look
	// like within it
	directives: {
	background: '--fg',
	shadow: ['--buttonDefaultShadow', '--buttonDefaultBevel'],
	roundness: 3
	}
	},
	{
	variant: 'danger',
	directives: {
	background: '--cRed'
	}
	},
	{
	variant: 'transparent',
	directives: {
	opacity: 0.5
	}
	},
	+ {
	+ component: 'Text',
	+ parent: {
	+ component: 'Button',
	+ variant: 'transparent'
	+ },
	+ directives: {
	+ textColor: '--text'
	+ }
	+ },
	+ {
	+ component: 'Icon',
	+ parent: {
	+ component: 'Button',
	+ variant: 'transparent'
	+ },
	+ directives: {
	+ textColor: '--text'
	+ }
	+ },
	{
	state: ['hover'],
	directives: {
	shadow: ['--buttonDefaultHoverGlow', '--buttonDefaultBevel']
	}
	},
	{
	state: ['focused'],
	directives: {
	shadow: ['--buttonDefaultFocusGlow', '--buttonDefaultBevel']
	}
	},
	{
	state: ['pressed'],
	directives: {
	shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
	}
	},
	{
	state: ['pressed', 'hover'],
	directives: {
	shadow: ['--buttonPressedBevel', '--buttonDefaultHoverGlow']
	}
	},
	{
	state: ['toggled'],
	directives: {
	background: '--accent,-24.2',
	shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
	}
	},
	{
	state: ['toggled', 'hover'],
	directives: {
	background: '--accent,-24.2',
	shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
	}
	},
	{
	state: ['toggled', 'focused'],
	directives: {
	background: '--accent,-24.2',
	shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
	}
	},
	{
	state: ['toggled', 'disabled'],
	directives: {
	background: '$blend(--accent 0.25 --parent)',
	shadow: ['--buttonPressedBevel']
	}
	},
	{
	state: ['disabled'],
	directives: {
	background: '$blend(--inheritedBackground 0.25 --parent)',
	shadow: ['--buttonDefaultBevel']
	}
	},
	{
	component: 'Text',
	parent: {
	component: 'Button',
	state: ['disabled']
	},
	directives: {
	textOpacity: 0.25,
	textOpacityMode: 'blend'
	}
	},
	{
	component: 'Icon',
	parent: {
	component: 'Button',
	state: ['disabled']
	},
	directives: {
	textOpacity: 0.25,
	textOpacityMode: 'blend'
	}
	}
	]
	}
	diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
	index 17a317a4d5..8e572d1d2b 100644
	--- a/src/components/emoji_picker/emoji_picker.js
	+++ b/src/components/emoji_picker/emoji_picker.js
	@@ -1,405 +1,405 @@
	import { defineAsyncComponent } from 'vue'
	import Checkbox from '../checkbox/checkbox.vue'
	import Popover from 'src/components/popover/popover.vue'
	import StillImage from '../still-image/still-image.vue'
	import { ensureFinalFallback } from '../../i18n/languages.js'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBoxOpen,
	faStickyNote,
	faSmileBeam,
	faSmile,
	faUser,
	faPaw,
	faIceCream,
	faBus,
	faBasketballBall,
	faLightbulb,
	faCode,
	faFlag
	} from '@fortawesome/free-solid-svg-icons'
	import { debounce, trim, chunk } from 'lodash'

	library.add(
	faBoxOpen,
	faStickyNote,
	faSmileBeam,
	faSmile,
	faUser,
	faPaw,
	faIceCream,
	faBus,
	faBasketballBall,
	faLightbulb,
	faCode,
	faFlag
	)

	const UNICODE_EMOJI_GROUP_ICON = {
	'smileys-and-emotion': 'smile',
	'people-and-body': 'user',
	'animals-and-nature': 'paw',
	'food-and-drink': 'ice-cream',
	'travel-and-places': 'bus',
	activities: 'basketball-ball',
	objects: 'lightbulb',
	symbols: 'code',
	flags: 'flag'
	}

	const maybeLocalizedKeywords = (emoji, languages, nameLocalizer) => {
	const res = [emoji.displayText, nameLocalizer(emoji)]
	if (emoji.annotations) {
	languages.forEach(lang => {
	const keywords = emoji.annotations[lang]?.keywords \|\| []
	const name = emoji.annotations[lang]?.name
	res.push(...(keywords.concat([name]).filter(k => k)))
	})
	}
	return res
	}

	const filterByKeyword = (list, keyword = '', languages, nameLocalizer) => {
	if (keyword === '') return list

	const keywordLowercase = keyword.toLowerCase()
	const orderedEmojiList = []
	for (const emoji of list) {
	const indices = maybeLocalizedKeywords(emoji, languages, nameLocalizer)
	.map(k => k.toLowerCase().indexOf(keywordLowercase))
	.filter(k => k > -1)

	const indexOfKeyword = indices.length ? Math.min(...indices) : -1

	if (indexOfKeyword > -1) {
	if (!Array.isArray(orderedEmojiList[indexOfKeyword])) {
	orderedEmojiList[indexOfKeyword] = []
	}
	orderedEmojiList[indexOfKeyword].push(emoji)
	}
	}
	return orderedEmojiList.flat()
	}

	const getOffset = (elem) => {
	const style = elem.style.transform
	const res = /translateY$(\d+)px$/.exec(style)
	if (!res) { return 0 }
	return res[1]
	}

	const toHeaderId = id => {
	return id.replace(/^row-\d+-/, '')
	}

	const EmojiPicker = {
	props: {
	enableStickerPicker: {
	required: false,
	type: Boolean,
	default: true
	},
	hideCustomEmoji: {
	required: false,
	type: Boolean,
	default: false
	}
	},
	inject: {
	popoversZLayer: {
	default: ''
	}
	},
	data () {
	return {
	keyword: '',
	activeGroup: 'custom',
	showingStickers: false,
	groupsScrolledClass: 'scrolled-top',
	keepOpen: false,
	customEmojiTimeout: null,
	hideCustomEmojiInPicker: false,
	// Lazy-load only after the first time `showing` becomes true.
	contentLoaded: false,
	groupRefs: {},
	emojiRefs: {},
	filteredEmojiGroups: [],
	emojiSize: 0,
	width: 0
	}
	},
	components: {
	StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
	Checkbox,
	StillImage,
	Popover
	},
	methods: {
	groupScroll (e) {
	e.currentTarget.scrollLeft += e.deltaY + e.deltaX
	},
	updateEmojiSize () {
	const css = window.getComputedStyle(this.$refs.popover.$el)
	- const fontSize = css.getPropertyValue('font-size') \|\| '14px'
	+ const fontSize = css.getPropertyValue('font-size') \|\| '1rem'
	const emojiSize = css.getPropertyValue('--emojiSize') \|\| '2.2rem'

	- const fontSizeUnit = fontSize.replace(/[0-9,.]+/, '')
	+ const fontSizeUnit = fontSize.replace(/[0-9,.]+/, '').trim()
	const fontSizeValue = Number(fontSize.replace(/[^0-9,.]+/, ''))

	- const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '')
	+ const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '').trim()
	const emojiSizeValue = Number(emojiSize.replace(/[^0-9,.]+/, ''))

	let fontSizeMultiplier
	if (fontSizeUnit.endsWith('em')) {
	fontSizeMultiplier = fontSizeValue
	} else {
	fontSizeMultiplier = fontSizeValue / 14
	}

	let emojiSizeReal
	if (emojiSizeUnit.endsWith('em')) {
	emojiSizeReal = emojiSizeValue * fontSizeMultiplier * 14
	} else {
	emojiSizeReal = emojiSizeValue
	}

	const fullEmojiSize = emojiSizeReal + (2 * 0.2 * fontSizeMultiplier * 14)
	this.emojiSize = fullEmojiSize
	},
	showPicker () {
	this.$refs.popover.showPopover()
	this.$nextTick(() => {
	this.onShowing()
	})
	},
	hidePicker () {
	this.$refs.popover.hidePopover()
	},
	setAnchorEl (el) {
	this.$refs.popover.setAnchorEl(el)
	},
	setGroupRef (name) {
	return el => { this.groupRefs[name] = el }
	},
	onPopoverShown () {
	this.$emit('show')
	},
	onPopoverClosed () {
	this.$emit('close')
	},
	onStickerUploaded (e) {
	this.$emit('sticker-uploaded', e)
	},
	onStickerUploadFailed (e) {
	this.$emit('sticker-upload-failed', e)
	},
	onEmoji (emoji) {
	const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
	if (!this.keepOpen) {
	this.$refs.popover.hidePopover()
	}
	this.$emit('emoji', { insertion: value, insertionUrl: emoji.imageUrl, keepOpen: this.keepOpen })
	},
	onScroll (startIndex, endIndex, visibleStartIndex, visibleEndIndex) {
	const target = this.$refs['emoji-groups'].$el
	this.scrolledGroup(target, visibleStartIndex, visibleEndIndex)
	},
	scrolledGroup (target, start, end) {
	const top = target.scrollTop + 5
	this.$nextTick(() => {
	this.emojiItems.slice(start, end + 1).forEach(group => {
	const headerId = toHeaderId(group.id)
	const ref = this.groupRefs['group-' + group.id]
	if (!ref) { return }
	const elem = ref.$el.parentElement
	if (!elem) { return }
	if (elem && getOffset(elem) <= top) {
	this.activeGroup = headerId
	}
	})
	this.scrollHeader()
	})
	},
	scrollHeader () {
	// Scroll the active tab's header into view
	const headerRef = this.groupRefs['group-header-' + this.activeGroup]
	const left = headerRef.offsetLeft
	const right = left + headerRef.offsetWidth
	const headerCont = this.$refs.header
	const currentScroll = headerCont.scrollLeft
	const currentScrollRight = currentScroll + headerCont.clientWidth
	const setScroll = s => { headerCont.scrollLeft = s }

	const margin = 7 // .emoji-tabs-item: padding
	if (left - margin < currentScroll) {
	setScroll(left - margin)
	} else if (right + margin > currentScrollRight) {
	setScroll(right + margin - headerCont.clientWidth)
	}
	},
	highlight (groupId) {
	this.setShowStickers(false)
	const indexInList = this.emojiItems.findIndex(k => k.id === groupId)
	this.$refs['emoji-groups'].scrollToItem(indexInList)
	},
	updateScrolledClass (target) {
	if (target.scrollTop <= 5) {
	this.groupsScrolledClass = 'scrolled-top'
	} else if (target.scrollTop >= target.scrollTopMax - 5) {
	this.groupsScrolledClass = 'scrolled-bottom'
	} else {
	this.groupsScrolledClass = 'scrolled-middle'
	}
	},
	toggleStickers () {
	this.showingStickers = !this.showingStickers
	},
	setShowStickers (value) {
	this.showingStickers = value
	},
	filterByKeyword (list, keyword) {
	return filterByKeyword(list, keyword, this.languages, this.maybeLocalizedEmojiName)
	},
	onShowing () {
	const oldContentLoaded = this.contentLoaded
	this.updateEmojiSize()
	this.recalculateItemPerRow()
	this.$nextTick(() => {
	this.$refs.search.focus()
	})
	this.contentLoaded = true
	this.filteredEmojiGroups = this.getFilteredEmojiGroups()
	if (!oldContentLoaded) {
	this.$nextTick(() => {
	if (this.defaultGroup) {
	this.highlight(this.defaultGroup)
	}
	})
	}
	},
	getFilteredEmojiGroups () {
	return this.allEmojiGroups
	.map(group => ({
	...group,
	emojis: this.filterByKeyword(group.emojis, trim(this.keyword))
	}))
	.filter(group => group.emojis.length > 0)
	},
	recalculateItemPerRow () {
	this.$nextTick(() => {
	if (!this.$refs['emoji-groups']) {
	return
	}
	this.width = this.$refs['emoji-groups'].$el.clientWidth
	})
	}
	},
	watch: {
	keyword () {
	this.onScroll()
	this.debouncedHandleKeywordChange()
	},
	allCustomGroups () {
	this.filteredEmojiGroups = this.getFilteredEmojiGroups()
	}
	},
	computed: {
	minItemSize () {
	return this.emojiSize
	},
	// used to watch it
	fontSize () {
	this.$nextTick(() => {
	this.updateEmojiSize()
	})
	return this.$store.getters.mergedConfig.fontSize
	},
	emojiHeight () {
	return this.emojiSize
	},
	itemPerRow () {
	return this.width ? Math.floor(this.width / this.emojiSize) : 6
	},
	activeGroupView () {
	return this.showingStickers ? '' : this.activeGroup
	},
	stickersAvailable () {
	if (this.$store.state.instance.stickers) {
	return this.$store.state.instance.stickers.length > 0
	}
	return 0
	},
	allCustomGroups () {
	if (this.hideCustomEmoji \|\| this.hideCustomEmojiInPicker) {
	return {}
	}
	const emojis = this.$store.getters.groupedCustomEmojis
	if (emojis.unpacked) {
	emojis.unpacked.text = this.$t('emoji.unpacked')
	}
	return emojis
	},
	defaultGroup () {
	return Object.keys(this.allCustomGroups)[0]
	},
	unicodeEmojiGroups () {
	return this.$store.getters.standardEmojiGroupList.map(group => ({
	id: `standard-${group.id}`,
	text: this.$t(`emoji.unicode_groups.${group.id}`),
	icon: UNICODE_EMOJI_GROUP_ICON[group.id],
	emojis: group.emojis
	}))
	},
	allEmojiGroups () {
	return Object.entries(this.allCustomGroups)
	.map(([, v]) => v)
	.concat(this.unicodeEmojiGroups)
	},
	stickerPickerEnabled () {
	return (this.$store.state.instance.stickers \|\| []).length !== 0
	},
	debouncedHandleKeywordChange () {
	return debounce(() => {
	this.filteredEmojiGroups = this.getFilteredEmojiGroups()
	}, 500)
	},
	emojiItems () {
	return this.filteredEmojiGroups.map(group =>
	chunk(group.emojis, this.itemPerRow)
	.map((items, index) => ({
	...group,
	id: index === 0 ? group.id : `row-${index}-${group.id}`,
	emojis: items,
	isFirstRow: index === 0
	})))
	.reduce((a, c) => a.concat(c), [])
	},
	languages () {
	return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)
	},
	maybeLocalizedEmojiName () {
	return emoji => {
	if (!emoji.annotations) {
	return emoji.displayText
	}

	if (emoji.displayTextI18n) {
	return this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args)
	}

	for (const lang of this.languages) {
	if (emoji.annotations[lang]?.name) {
	return emoji.annotations[lang].name
	}
	}

	return emoji.displayText
	}
	},
	isInModal () {
	return this.popoversZLayer === 'modals'
	}
	}
	}

	export default EmojiPicker
	diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
	index 7209e91447..eb1054df60 100644
	--- a/src/components/gallery/gallery.vue
	+++ b/src/components/gallery/gallery.vue
	@@ -1,193 +1,193 @@
	<template>
	<div
	ref="galleryContainer"
	class="Gallery"
	:class="{ '-long': tooManyAttachments && hidingLong }"
	>
	<div class="gallery-rows">
	<div
	v-for="(row, rowIndex) in rows"
	:key="rowIndex"
	class="gallery-row"
	:style="rowStyle(row)"
	:class="{ '-audio': row.audio, '-minimal': row.minimal, '-grid': grid }"
	>
	<div
	class="gallery-row-inner"
	:class="{ '-grid': grid }"
	>
	<Attachment
	v-for="(attachment, attachmentIndex) in row.items"
	:key="attachment.id"
	class="gallery-item"
	:compact="compact"
	:nsfw="nsfw"
	:attachment="attachment"
	:size="size"
	:editable="editable"
	:remove="removeAttachment"
	:shift-up="!(attachmentIndex === 0 && rowIndex === 0) && shiftUpAttachment"
	:shift-dn="!(attachmentIndex === row.items.length - 1 && rowIndex === rows.length - 1) && shiftDnAttachment"
	:edit="editAttachment"
	:description="descriptions && descriptions[attachment.id]"
	:hide-description="size === 'small' \|\| tooManyAttachments && hidingLong"
	:style="itemStyle(attachment.id, row.items)"
	@set-media="onMedia"
	@natural-size-load="onNaturalSizeLoad"
	/>
	</div>
	</div>
	</div>
	<div
	v-if="tooManyAttachments"
	class="many-attachments"
	>
	<div class="many-attachments-text">
	{{ $t("status.many_attachments", { number: attachments.length }) }}
	</div>
	<div class="many-attachments-buttons">
	<span
	v-if="!hidingLong"
	class="many-attachments-button"
	>
	<button
	class="button-unstyled -link"
	@click="toggleHidingLong(true)"
	>
	{{ $t("status.collapse_attachments") }}
	</button>
	</span>
	<span
	v-if="hidingLong"
	class="many-attachments-button"
	>
	<button
	class="button-unstyled -link"
	@click="toggleHidingLong(false)"
	>
	{{ $t("status.show_all_attachments") }}
	</button>
	</span>
	<span
	v-if="hidingLong"
	class="many-attachments-button"
	>
	<button
	class="button-unstyled -link"
	@click="openGallery"
	>
	{{ $t("status.open_gallery") }}
	</button>
	</span>
	</div>
	</div>
	</div>
	</template>

	<script src='./gallery.js'></script>

	<style lang="scss">
	.Gallery {
	.gallery-rows {
	display: flex;
	flex-direction: column;
	}

	.gallery-row {
	position: relative;
	height: 0;
	width: 100%;
	flex-grow: 1;

	.gallery-row-inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-flow: row wrap;
	align-content: stretch;

	.gallery-item {
	margin: 0 0.5em 0 0;
	flex-grow: 1;
	height: 100%;
	box-sizing: border-box;
	// to make failed images a bit more noticeable on chromium
	min-width: 2em;

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

	&.-grid {
	width: 100%;
	height: auto;
	position: relative;
	display: grid;
	grid-gap: 0.5em;
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));

	.gallery-item {
	margin: 0;
	- height: 200px;
	+ height: 15em;
	}
	}
	}

	&.-grid,
	&.-minimal {
	height: auto;

	.gallery-row-inner {
	position: relative;
	}
	}

	&:not(:first-child) {
	margin-top: 0.5em;
	}
	}

	&.-long {
	.gallery-rows {
	max-height: 25em;
	overflow: hidden;
	mask:
	linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
	linear-gradient(to top, white, white);

	/* Autoprefixed seem to ignore this one, and also syntax is different */
	/* stylelint-disable mask-composite */
	/* stylelint-disable declaration-property-value-no-unknown */
	/* stylelint-disable scss/declaration-property-value-no-unknown */

	/* TODO check if this is still needed */
	mask-composite: xor;
	/* stylelint-enable scss/declaration-property-value-no-unknown */
	/* stylelint-enable declaration-property-value-no-unknown */
	/* stylelint-enable mask-composite */
	mask-composite: exclude;
	}
	}

	.many-attachments-text {
	text-align: center;
	line-height: 2;
	}

	.many-attachments-buttons {
	display: flex;
	}

	.many-attachments-button {
	display: flex;
	flex: 1;
	justify-content: center;
	line-height: 2;

	button {
	padding: 0 2em;
	}
	}
	}
	</style>
	diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
	index 5cc8c50a38..7f625755c1 100644
	--- a/src/components/media_modal/media_modal.vue
	+++ b/src/components/media_modal/media_modal.vue
	@@ -1,294 +1,294 @@
	<template>
	<Modal
	v-if="showing"
	class="media-modal-view"
	@backdrop-clicked="hideIfNotSwiped"
	>
	<SwipeClick
	v-if="type === 'image'"
	ref="swipeClick"
	class="modal-image-container"
	:direction="swipeDirection"
	:threshold="swipeThreshold"
	:disable-click-threshold="swipeDisableClickThreshold"
	@preview-requested="handleSwipePreview"
	@swipe-finished="handleSwipeEnd"
	@swipeless-clicked="hide"
	>
	<PinchZoom
	ref="pinchZoom"
	class="modal-image-container-inner"
	selector=".modal-image"
	reach-min-scale-strategy="reset"
	stop-propagate-handled="stop-propgate-handled"
	:allow-pan-min-scale="pinchZoomMinScale"
	:min-scale="pinchZoomMinScale"
	:reset-to-min-scale-limit="pinchZoomScaleResetLimit"
	>
	<img
	:class="{ loading }"
	class="modal-image"
	:src="currentMedia.url"
	:alt="currentMedia.description"
	:title="currentMedia.description"
	@load="onImageLoaded"
	>
	</PinchZoom>
	</SwipeClick>
	<VideoAttachment
	v-if="type === 'video'"
	class="modal-image"
	:attachment="currentMedia"
	:controls="true"
	/>
	<audio
	v-if="type === 'audio'"
	class="modal-image"
	:src="currentMedia.url"
	:alt="currentMedia.description"
	:title="currentMedia.description"
	controls
	/>
	<Flash
	v-if="type === 'flash'"
	class="modal-image"
	:src="currentMedia.url"
	:alt="currentMedia.description"
	:title="currentMedia.description"
	/>
	<button
	v-if="canNavigate"
	:title="$t('media_modal.previous')"
	class="modal-view-button modal-view-button-arrow modal-view-button-arrow--prev"
	@click.stop.prevent="goPrev"
	>
	<FAIcon
	class="button-icon arrow-icon"
	icon="chevron-left"
	/>
	</button>
	<button
	v-if="canNavigate"
	:title="$t('media_modal.next')"
	class="modal-view-button modal-view-button-arrow modal-view-button-arrow--next"
	@click.stop.prevent="goNext"
	>
	<FAIcon
	class="button-icon arrow-icon"
	icon="chevron-right"
	/>
	</button>
	<button
	class="modal-view-button modal-view-button-hide"
	:title="$t('media_modal.hide')"
	@click.stop.prevent="hide"
	>
	<FAIcon
	class="button-icon"
	icon="times"
	/>
	</button>

	<span
	v-if="description"
	class="description"
	>
	{{ description }}
	</span>
	<span
	class="counter"
	>
	{{ $t('media_modal.counter', { current: currentIndex + 1, total: media.length }, currentIndex + 1) }}
	</span>
	<span
	v-if="loading"
	class="loading-spinner"
	>
	<FAIcon
	spin
	icon="circle-notch"
	size="5x"
	/>
	</span>
	</Modal>
	</template>

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

	<style lang="scss">
	$modal-view-button-icon-height: 3em;
	$modal-view-button-icon-half-height: calc(#{$modal-view-button-icon-height} / 2);
	$modal-view-button-icon-width: 3em;
	$modal-view-button-icon-margin: 0.5em;

	.media-modal-view {
	@keyframes media-fadein {
	from {
	opacity: 0;
	}

	to {
	opacity: 1;
	}
	}

	.modal-image-container {
	display: flex;
	overflow: hidden;
	align-items: center;
	flex-direction: column;
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	flex-grow: 1;
	justify-content: center;

	&-inner {
	width: 100%;
	height: 100%;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	}
	}

	.description,
	.counter {
	/* Hardcoded since background is also hardcoded */
	color: white;
	margin-top: 1em;
	text-shadow: 0 0 10px black, 0 0 10px black;
	padding: 0.2em 2em;
	}

	.description {
	flex: 0 0 auto;
	overflow-y: auto;
	min-height: 1em;
	- max-width: 500px;
	+ max-width: 35.8em;
	max-height: 9.5em;
	overflow-wrap: break-word;
	text-wrap: pretty;
	}

	.modal-image {
	max-width: 100%;
	max-height: 100%;
	image-orientation: from-image; // NOTE: only FF supports this
	animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;

	&.loading {
	opacity: 0.5;
	}
	}

	.loading-spinner {
	width: 100%;
	height: 100%;
	position: absolute;
	pointer-events: none;
	display: flex;
	justify-content: center;
	align-items: center;

	svg {
	color: white;
	}
	}

	.modal-view-button {
	border: 0;
	padding: 0;
	opacity: 0;
	box-shadow: none;
	background: none;
	appearance: none;
	overflow: visible;
	cursor: pointer;
	transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
	height: $modal-view-button-icon-height;
	width: $modal-view-button-icon-width;

	.button-icon {
	position: absolute;
	height: $modal-view-button-icon-height;
	width: $modal-view-button-icon-width;
	font-size: 1rem;
	line-height: $modal-view-button-icon-height;
	color: #fff;
	text-align: center;
	background-color: rgb(0 0 0 / 30%);
	}
	}

	.modal-view-button-arrow {
	position: absolute;
	display: block;
	top: 50%;
	margin-top: $modal-view-button-icon-half-height;
	width: $modal-view-button-icon-width;
	height: $modal-view-button-icon-height;

	.arrow-icon {
	position: absolute;
	top: 0;
	line-height: $modal-view-button-icon-height;
	color: #fff;
	text-align: center;
	background-color: rgb(0 0 0 / 30%);
	}

	&--prev {
	left: 0;

	.arrow-icon {
	left: $modal-view-button-icon-margin;
	}
	}

	&--next {
	right: 0;

	.arrow-icon {
	right: $modal-view-button-icon-margin;
	}
	}
	}

	.modal-view-button-hide {
	position: absolute;
	top: 0;
	right: 0;

	.button-icon {
	top: $modal-view-button-icon-margin;
	right: $modal-view-button-icon-margin;
	}
	}
	}

	.modal-view.media-modal-view {
	z-index: var(--ZI_media_modal);
	flex-direction: column;

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

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

	&:hover {
	opacity: 1;
	}
	}

	overflow: hidden;
	}
	</style>
	diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
	index c3261e17d5..3aa7816be3 100644
	--- a/src/components/mention_link/mention_link.scss
	+++ b/src/components/mention_link/mention_link.scss
	@@ -1,111 +1,110 @@
	.MentionLink {
	position: relative;
	white-space: normal;
	display: inline;
	word-break: normal;

	& .new,
	& .original {
	display: inline;
	- border-radius: 2px;
	}

	.mention-avatar {
	border-radius: var(--roundness);
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	user-select: none;
	margin-right: 0.2em;
	}

	.full {
	position: absolute;
	display: inline-block;
	pointer-events: none;
	opacity: 0;
	top: 100%;
	left: 0;
	height: 100%;
	white-space: nowrap;
	transition: opacity 0.2s ease;
	z-index: 1;
	margin-top: 0.25em;
	padding: 0.5em;
	user-select: all;
	}

	& .short.-with-tooltip,
	& .you {
	user-select: none;
	}

	& .short,
	& .full {
	white-space: nowrap;
	}

	.shortName {
	white-space: normal;
	}

	.new {
	&.-you {
	.shortName {
	font-weight: 600;
	}
	}

	&.-has-selection {
	--color: var(--selectionText);
	--link: var(--selectionText);

	background-color: var(--selectionBackground);
	}

	.at {
	color: var(--link);
	opacity: 0.8;
	display: inline-block;
	line-height: 1;
	padding: 0 0.1em;
	vertical-align: -25%;
	margin: 0;
	}

	&.-striped {
	& .shortName {
	background-image:
	repeating-linear-gradient(
	135deg,
	var(--____highlight-tintColor),
	var(--____highlight-tintColor) 5px,
	var(--____highlight-tintColor2) 5px,
	var(--____highlight-tintColor2) 10px
	);
	}
	}

	&.-solid {
	.shortName {
	background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
	}
	}

	&.-side {
	.shortName {
	box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
	}
	}
	}

	.serverName.-faded {
	color: var(--linkFaint);
	}
	}

	.mention-link-popover {
	max-width: 70ch;
	max-height: 20rem;
	overflow: hidden;
	}
	diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.scss b/src/components/mrf_transparency_panel/mrf_transparency_panel.scss
	index a262ed1c58..8e2fa553a7 100644
	--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.scss
	+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.scss
	@@ -1,23 +1,23 @@
	.mrf-section {
	margin: 1em;

	table {
	width: 100%;
	text-align: left;
	- padding-left: 10px;
	- padding-bottom: 20px;
	+ padding-left: 0.5em;
	+ padding-bottom: 1.1em;

	th,
	td {
	- width: 180px;
	- max-width: 360px;
	+ width: 11em;
	+ max-width: 25em;
	overflow: hidden;
	vertical-align: text-top;
	}

	th + th,
	td + td {
	width: auto;
	}
	}
	}
	diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
	index 043be1b1aa..3edf21de7a 100644
	--- a/src/components/notification/notification.js
	+++ b/src/components/notification/notification.js
	@@ -1,172 +1,201 @@
	import StatusContent from '../status_content/status_content.vue'
	import { mapState } from 'vuex'
	import Status from '../status/status.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import UserCard from '../user_card/user_card.vue'
	import Timeago from '../timeago/timeago.vue'
	import Report from '../report/report.vue'
	import UserLink from '../user_link/user_link.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import UserPopover from '../user_popover/user_popover.vue'
	import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
	import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faCheck,
	faTimes,
	faStar,
	faRetweet,
	faUserPlus,
	faEyeSlash,
	faUser,
	faSuitcaseRolling,
	faExpandAlt,
	faCompressAlt
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faCheck,
	faTimes,
	faStar,
	faRetweet,
	faUserPlus,
	faUser,
	faEyeSlash,
	faSuitcaseRolling,
	faExpandAlt,
	faCompressAlt
	)

	const Notification = {
	data () {
	return {
	+ selecting: false,
	statusExpanded: false,
	unmuted: false,
	showingApproveConfirmDialog: false,
	showingDenyConfirmDialog: false
	}
	},
	props: ['notification'],
	emits: ['interacted'],
	components: {
	StatusContent,
	UserAvatar,
	UserCard,
	Timeago,
	Status,
	Report,
	RichContent,
	UserPopover,
	UserLink,
	ConfirmModal
	},
	+ mounted () {
	+ document.addEventListener('selectionchange', this.onContentSelect)
	+ },
	+ unmounted () {
	+ document.removeEventListener('selectionchange', this.onContentSelect)
	+ },
	methods: {
	toggleStatusExpanded () {
	+ if (!this.expandable) return
	this.statusExpanded = !this.statusExpanded
	},
	+ onContentSelect () {
	+ const { isCollapsed, anchorNode, offsetNode } = document.getSelection()
	+ if (isCollapsed) {
	+ this.selecting = false
	+ return
	+ }
	+ const within = this.$refs.root.contains(anchorNode) \|\| this.$refs.root.contains(offsetNode)
	+ if (within) {
	+ this.selecting = true
	+ } else {
	+ this.selecting = false
	+ }
	+ },
	+ onContentClick (e) {
	+ if (!this.selecting && !e.target.closest('a') && !e.target.closest('button')) {
	+ this.toggleStatusExpanded()
	+ }
	+ },
	generateUserProfileLink (user) {
	return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
	},
	getUser (notification) {
	return this.$store.state.users.usersObject[notification.from_profile.id]
	},
	interacted () {
	this.$emit('interacted')
	},
	toggleMute () {
	this.unmuted = !this.unmuted
	},
	showApproveConfirmDialog () {
	this.showingApproveConfirmDialog = true
	},
	hideApproveConfirmDialog () {
	this.showingApproveConfirmDialog = false
	},
	showDenyConfirmDialog () {
	this.showingDenyConfirmDialog = true
	},
	hideDenyConfirmDialog () {
	this.showingDenyConfirmDialog = false
	},
	approveUser () {
	if (this.shouldConfirmApprove) {
	this.showApproveConfirmDialog()
	} else {
	this.doApprove()
	}
	},
	doApprove () {
	this.$emit('interacted')
	this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
	this.$store.dispatch('removeFollowRequest', this.user)
	this.$store.dispatch('markSingleNotificationAsSeen', { id: this.notification.id })
	this.$store.dispatch('updateNotification', {
	id: this.notification.id,
	updater: notification => {
	notification.type = 'follow'
	}
	})
	this.hideApproveConfirmDialog()
	},
	denyUser () {
	if (this.shouldConfirmDeny) {
	this.showDenyConfirmDialog()
	} else {
	this.doDeny()
	}
	},
	doDeny () {
	this.$emit('interacted')
	this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
	.then(() => {
	this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id })
	this.$store.dispatch('removeFollowRequest', this.user)
	})
	this.hideDenyConfirmDialog()
	}
	},
	computed: {
	userClass () {
	return highlightClass(this.notification.from_profile)
	},
	userStyle () {
	const highlight = this.$store.getters.mergedConfig.highlight
	const user = this.notification.from_profile
	return highlightStyle(highlight[user.screen_name])
	},
	+ expandable () {
	+ return (new Set(['like', 'pleroma:emoji_reaction', 'repeat'])).has(this.notification.type)
	+ },
	user () {
	return this.$store.getters.findUser(this.notification.from_profile.id)
	},
	userProfileLink () {
	return this.generateUserProfileLink(this.user)
	},
	targetUser () {
	return this.$store.getters.findUser(this.notification.target.id)
	},
	targetUserProfileLink () {
	return this.generateUserProfileLink(this.targetUser)
	},
	needMute () {
	return this.$store.getters.relationship(this.user.id).muting
	},
	isStatusNotification () {
	return isStatusNotification(this.notification.type)
	},
	mergedConfig () {
	return this.$store.getters.mergedConfig
	},
	shouldConfirmApprove () {
	return this.mergedConfig.modalOnApproveFollow
	},
	shouldConfirmDeny () {
	return this.mergedConfig.modalOnDenyFollow
	},
	...mapState({
	currentUser: state => state.users.currentUser
	})
	}
	}

	export default Notification
	diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
	index e8895ce594..934d3e58da 100644
	--- a/src/components/notification/notification.scss
	+++ b/src/components/notification/notification.scss
	@@ -1,93 +1,98 @@
	// TODO Copypaste from Status, should unify it somehow
	+
	.Notification {
	border-bottom: 1px solid;
	border-color: var(--border);
	overflow-wrap: break-word;
	text-wrap: pretty;

	+ .status-content {
	+ cursor: pointer;
	+ }
	+
	&.Status {
	/* stylelint-disable-next-line declaration-no-important */
	background-color: transparent !important;
	}

	--emoji-size: 1em;

	&:hover {
	--_still-image-img-visibility: visible;
	--_still-image-canvas-visibility: hidden;
	--_still-image-label-visibility: hidden;
	}

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

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

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

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

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

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

	&::before {
	content: " ";
	}
	}

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

	.type-icon {
	margin: 0 0.1em;
	}

	&.-type--repeat .type-icon {
	color: var(--cGreen);
	}

	&.-type--follow .type-icon {
	color: var(--cBlue);
	}

	&.-type--follow-request .type-icon {
	color: var(--cBlue);
	}

	&.-type--like .type-icon {
	color: var(--cOrange);
	}

	&.-type--move .type-icon {
	color: var(--cBlue);
	}
	}
	diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
	index 648bdb41f6..7165289dca 100644
	--- a/src/components/notification/notification.vue
	+++ b/src/components/notification/notification.vue
	@@ -1,281 +1,293 @@
	<template>
	<article
	v-if="notification.type === 'mention' \|\| notification.type === 'status'"
	+ ref="root"
	>
	<Status
	class="Notification"
	:compact="true"
	:statusoid="notification.status"
	@interacted="interacted"
	/>
	</article>
	- <article v-else>
	+ <article
	+ v-else
	+ ref="root"
	+ class="NotificationParent"
	+ :class="{ '-expandable': expandable }"
	+ >
	<div
	v-if="needMute && !unmuted"
	+ :id="'notif-' +notification.id"
	+ :aria-expanded="statusExpanded"
	+ :aria-controls="'notif-' +notification.id"
	class="Notification container -muted"
	>
	<small>
	<user-link
	:user="notification.from_profile"
	:at="false"
	/>
	</small>
	<button
	class="button-unstyled unmute"
	@click.prevent="toggleMute"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="eye-slash"
	/>
	</button>
	</div>
	<div
	v-else
	class="Notification non-mention"
	:class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
	:style="[ userStyle ]"
	>
	<a
	class="avatar-container"
	:href="$router.resolve(userProfileLink).href"
	@click.prevent
	>
	<UserPopover
	:user-id="notification.from_profile.id"
	:overlay-centers="true"
	>
	<UserAvatar
	class="post-avatar"
	:compact="true"
	:user="notification.from_profile"
	/>
	</UserPopover>
	</a>
	<div class="notification-right">
	<span class="notification-details">
	<div class="name-and-action">
	<!-- eslint-disable vue/no-v-html -->
	<bdi v-if="!!notification.from_profile.name_html">
	<RichContent
	class="username"
	:title="'@'+notification.from_profile.screen_name_ui"
	:html="notification.from_profile.name_html"
	:emoji="notification.from_profile.emoji"
	:is-local="notification.from_profile.is_local"
	/>
	</bdi>
	<!-- eslint-enable vue/no-v-html -->
	<span
	v-else
	class="username"
	:title="'@'+notification.from_profile.screen_name_ui"
	>
	{{ notification.from_profile.name }}
	</span>
	{{ ' ' }}
	<span v-if="notification.type === 'like'">
	<FAIcon
	class="type-icon"
	icon="star"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.favorited_you') }}</small>
	</span>
	<span v-if="notification.type === 'repeat'">
	<FAIcon
	class="type-icon"
	icon="retweet"
	:title="$t('tool_tip.repeat')"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.repeated_you') }}</small>
	</span>
	<span v-if="notification.type === 'follow'">
	<FAIcon
	class="type-icon"
	icon="user-plus"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.followed_you') }}</small>
	</span>
	<span v-if="notification.type === 'follow_request'">
	<FAIcon
	class="type-icon"
	icon="user"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.follow_request') }}</small>
	</span>
	<span v-if="notification.type === 'move'">
	<FAIcon
	class="type-icon"
	icon="suitcase-rolling"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.migrated_to') }}</small>
	</span>
	<span v-if="notification.type === 'pleroma:emoji_reaction'">
	<small>
	<i18n-t
	scope="global"
	keypath="notifications.reacted_with"
	>
	<img
	v-if="notification.emoji_url"
	class="emoji-reaction-emoji emoji-reaction-emoji-image"
	:src="notification.emoji_url"
	:alt="notification.emoji"
	:title="notification.emoji"
	>
	<span
	v-else
	class="emoji-reaction-emoji"
	>{{ notification.emoji }}</span>
	</i18n-t>
	</small>
	</span>
	<span v-if="notification.type === 'pleroma:report'">
	<small>{{ $t('notifications.submitted_report') }}</small>
	</span>
	<span v-if="notification.type === 'poll'">
	<FAIcon
	class="type-icon"
	icon="poll-h"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.poll_ended') }}</small>
	</span>
	</div>
	<div
	v-if="isStatusNotification"
	class="timeago"
	>
	<router-link
	v-if="notification.status"
	:to="{ name: 'conversation', params: { id: notification.status.id } }"
	class="timeago-link faint"
	>
	<Timeago
	:time="notification.created_at"
	:auto-update="240"
	/>
	</router-link>
	<button
	class="button-unstyled expand-icon"
	:title="$t('tool_tip.toggle_expand')"
	:aria-expanded="statusExpanded"
	@click.prevent="toggleStatusExpanded"
	>
	<FAIcon
	class="fa-scale-110"
	fixed-width
	:icon="statusExpanded ? 'compress-alt' : 'expand-alt'"
	/>
	</button>
	</div>
	<div
	v-else
	class="timeago"
	>
	<span class="faint">
	<Timeago
	:time="notification.created_at"
	:auto-update="240"
	/>
	</span>
	</div>
	<button
	v-if="needMute"
	class="button-unstyled"
	:title="$t('tool_tip.toggle_mute')"
	:aria-expanded="!unmuted"
	@click.prevent="toggleMute"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="eye-slash"
	/>
	</button>
	</span>
	<div
	v-if="notification.type === 'follow' \|\| notification.type === 'follow_request'"
	class="follow-text"
	>
	<user-link
	class="follow-name"
	:user="notification.from_profile"
	/>
	<div
	v-if="notification.type === 'follow_request'"
	style="white-space: nowrap;"
	>
	<button
	class="button-unstyled"
	:title="$t('tool_tip.accept_follow_request')"
	@click="approveUser()"
	>
	<FAIcon
	icon="check"
	class="fa-scale-110 fa-old-padding follow-request-accept"
	/>
	</button>
	<button
	class="button-unstyled"
	:title="$t('tool_tip.reject_follow_request')"
	@click="denyUser()"
	>
	<FAIcon
	icon="times"
	class="fa-scale-110 fa-old-padding follow-request-reject"
	/>
	</button>
	</div>
	</div>
	<div
	v-else-if="notification.type === 'move'"
	class="move-text"
	>
	<user-link
	:user="notification.target"
	/>
	</div>
	<Report
	v-else-if="notification.type === 'pleroma:report'"
	:report-id="notification.report.id"
	/>
	<template v-else>
	<StatusContent
	+ class="status-content"
	:compact="!statusExpanded"
	:status="notification.status"
	+ :collapse="!statusExpanded"
	+ @click="onContentClick"
	/>
	</template>
	</div>
	</div>
	<teleport to="#modal">
	<confirm-modal
	v-if="showingApproveConfirmDialog"
	:title="$t('user_card.approve_confirm_title')"
	:confirm-text="$t('user_card.approve_confirm_accept_button')"
	:cancel-text="$t('user_card.approve_confirm_cancel_button')"
	@accepted="doApprove"
	@cancelled="hideApproveConfirmDialog"
	>
	{{ $t('user_card.approve_confirm', { user: user.screen_name_ui }) }}
	</confirm-modal>
	<confirm-modal
	v-if="showingDenyConfirmDialog"
	:title="$t('user_card.deny_confirm_title')"
	:confirm-text="$t('user_card.deny_confirm_accept_button')"
	:cancel-text="$t('user_card.deny_confirm_cancel_button')"
	@accepted="doDeny"
	@cancelled="hideDenyConfirmDialog"
	>
	{{ $t('user_card.deny_confirm', { user: user.screen_name_ui }) }}
	</confirm-modal>
	</teleport>
	</article>
	</template>

	<script src="./notification.js"></script>
	<style src="./notification.scss" lang="scss"></style>
	diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
	index 4fb8e04289..238be88dfb 100644
	--- a/src/components/post_status_form/post_status_form.js
	+++ b/src/components/post_status_form/post_status_form.js
	@@ -1,855 +1,851 @@
	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 Popover from 'src/components/popover/popover.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 } from 'vuex'
	import { mapState, mapActions } from 'pinia'
	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,
	faChevronDown,
	faChevronLeft,
	faChevronRight
	} from '@fortawesome/free-solid-svg-icons'

	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMediaViewerStore } from 'src/stores/media_viewer.js'

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

	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',
	'hideDraft',
	'closeable',
	'placeholder',
	'maxHeight',
	'postHandler',
	'preserveFocus',
	'autoFocus',
	'fileLimit',
	'submitOnEnter',
	'emojiPickerPlacement',
	'optimisticPosting',
	'profileMention',
	'draftId'
	],
	emits: [
	'posted',
	'draft-done',
	'resize',
	'mediaplay',
	'mediapause',
	'can-close',
	'update'
	],
	components: {
	MediaUpload,
	EmojiInput,
	PollForm,
	ScopeSelector,
	Checkbox,
	Select,
	Attachment,
	StatusContent,
	Gallery,
	DraftCloser,
	Popover
	},
	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

	const [statusType, refId] = typeAndRefId({ replyTo: this.replyTo, profileMention: this.profileMention && this.repliedUser?.id, statusId: this.statusId })

	// 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

	statusParams = {
	type: statusType,
	refId,
	spoilerText: this.subject \|\| '',
	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,
	showDropIcon: 'hide',
	dropStopTimeout: null,
	preview: null,
	previewLoading: false,
	emojiInputShown: false,
	idempotencyKey: '',
	saveInhibited: true,
	saveable: false
	}
	},
	computed: {
	users () {
	return this.$store.state.users.users
	},
	userDefaultScope () {
	return this.$store.state.users.currentUser.default_scope
	},
	showAllScopes () {
	return !this.mergedConfig.minimalScopesMode
	},
	hideExtraActions () {
	return this.disableDraft \|\| this.hideDraft
	},
	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.saveable) {
	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')
	}
	},
	safeToSaveDraft () {
	return (
	this.newStatus.status \|\|
	this.newStatus.spoilerText \|\|
	this.newStatus.files?.length \|\|
	this.newStatus.hasPoll
	) && this.saveable
	},
	hasEmptyDraft () {
	return this.newStatus.id && !(
	this.newStatus.status \|\|
	this.newStatus.spoilerText \|\|
	this.newStatus.files?.length \|\|
	this.newStatus.hasPoll
	)
	},
	...mapGetters(['mergedConfig']),
	...mapState(useInterfaceStore, {
	mobileLayout: store => store.mobileLayout
	})
	},
	watch: {
	newStatus: {
	deep: true,
	handler () {
	this.statusChanged()
	}
	},
	saveable (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: {
	...mapActions(useMediaViewerStore, ['increment']),
	statusChanged () {
	this.autoPreview()
	this.updateIdempotencyKey()
	this.debouncedMaybeAutoSaveDraft()
	this.saveable = 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.$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.saveable = false
	},
	async postStatus (event, newStatus) {
	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.newStatus.hasPoll ? pollFormToMasto(this.newStatus.poll) : {}
	if (this.pollContentError) {
	this.error = this.pollContentError
	return
	}

	this.posting = true

	try {
	await this.setAllMediaDescriptions()
	} catch {
	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 () {
	// 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 () {
	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.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 () {
	useInterfaceStore().openSettingsModalTab('profile')
	},
	propsToNative (props) {
	return propsToNative(props)
	},
	saveDraft () {
	if (!this.disableDraft &&
	!this.saveInhibited) {
	if (this.safeToSaveDraft) {
	return this.$store.dispatch('addOrSaveDraft', { draft: this.newStatus })
	.then(id => {
	if (this.newStatus.id !== id) {
	this.newStatus.id = id
	}
	this.saveable = false
	if (!this.shouldAutoSaveDraft) {
	this.clearStatus()
	this.$emit('draft-done')
	}
	})
	} else if (this.hasEmptyDraft) {
	// There is a draft, but there is nothing in it, clear it
	return this.abandonDraft()
	.then(() => {
	this.saveable = false
	if (!this.shouldAutoSaveDraft) {
	this.clearStatus()
	this.$emit('draft-done')
	}
	})
	}
	}
	return Promise.resolve()
	},
	maybeAutoSaveDraft () {
	if (this.shouldAutoSaveDraft) {
	this.saveDraft(false)
	}
	},
	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.saveable) {
	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.scss b/src/components/post_status_form/post_status_form.scss
	index a79cae4a64..78b93fd284 100644
	--- a/src/components/post_status_form/post_status_form.scss
	+++ b/src/components/post_status_form/post_status_form.scss
	@@ -1,259 +1,276 @@
	.post-status-form {
	position: relative;

	.attachments {
	margin-bottom: 0.5em;
	}

	.more-post-actions {
	height: 100%;

	.btn {
	height: 100%;
	}
	}

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

	.post-button-group {
	width: 10em;
	display: flex;

	.post-button {
	flex: 1 0 auto;
	}

	.more-post-actions {
	flex: 0 0 auto;
	}
	}

	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;
	+ gap: 1.5em;
	+
	+ button {
	+ padding: 0.5em;
	+ margin: -0.5em;
	+ }
	}

	.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;
	+ padding-top: 0.5em;
	align-items: baseline;
	}

	+ .visibility-notice {
	+ border: 1px solid var(--border);
	+ border-radius: var(--roundness);
	+ padding: 0.5em 1em
	+ }
	+
	.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;
	}

	+ .inputs-wrapper {
	+ padding: 0;
	+ }
	+
	.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);
	+ padding-right: 1.5em;
	// two lines of text
	height: calc(var(--post-line-height) * 1em);
	min-height: calc(var(--post-line-height) * 1em);
	resize: none;
	background: transparent;
	text-wrap: stable;

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

	.main-input {
	position: relative;
	}

	+ .subject-input {
	+ border-bottom: 1px solid var(--border);
	+ }
	+
	.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;
	}
	}
	diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
	index 303413b55b..f661a980dd 100644
	--- a/src/components/post_status_form/post_status_form.vue
	+++ b/src/components/post_status_form/post_status_form.vue
	@@ -1,422 +1,417 @@
	<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 class="input inputs-wrapper">
	+ <EmojiInput
	+ v-if="!disableSubject && (newStatus.spoilerText \|\| alwaysShowSubject)"
	+ v-model="newStatus.spoilerText"
	+ enable-emoji-picker
	+ :suggest="emojiSuggestor"
	+ class="input form-control subject-input unstyled"
	+ >
	+ <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 unstyled"
	+ >
	+ </template>
	+ </EmojiInput>
	+ <EmojiInput
	+ ref="emoji-input"
	+ v-model="newStatus.status"
	+ :suggest="emojiUserSuggestor"
	+ :placement="emojiPickerPlacement"
	+ class="input form-control main-input unstyled"
	+ enable-sticker-picker
	+ enable-emoji-picker
	+ :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>
	<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"
	+ class="input form-control unstyled"
	:attrs="{ 'aria-label': $t('post_status.content_type_selection') }"
	+ unstyled="true"
	>
	<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"
	:params="newStatus.poll"
	/>
	<span
	v-if="!disableDraft && shouldAutoSaveDraft"
	class="auto-save-status"
	>
	{{ autoSaveState }}
	</span>
	<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>
	<div class="btn-group post-button-group">
	<button
	class="btn button-default post-button"
	:disabled="isOverLengthLimit \|\| posting \|\| uploadingFiles \|\| disableSubmit"
	@click.stop.prevent="postStatus($event, newStatus)"
	>
	<template v-if="posting">
	{{ $t('post_status.posting') }}
	</template>
	<template v-else>
	{{ $t('post_status.post') }}
	</template>
	</button>
	<Popover
	v-if="!hideExtraActions"
	class="more-post-actions"
	:normal-button="true"
	trigger="click"
	placement="bottom"
	:offset="{ y: 5 }"
	:trigger-attrs="{ 'aria-label': $t('post_status.more_post_actions') }"
	>
	<template #trigger>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="chevron-down"
	/>
	</template>
	<template #content="{close}">
	<div
	class="dropdown-menu"
	role="menu"
	>
	<div
	class="menu-item dropdown-item"
	:class="{ disabled: !safeToSaveDraft }"
	>
	<button
	v-if="!hideDraft \|\| !disableDraft"
	class="main-button"
	role="menu"
	:disabled="!safeToSaveDraft"
	@click.prevent="saveDraft"
	@click="close"
	>
	<template v-if="closeable">
	{{ $t('post_status.save_to_drafts_and_close_button') }}
	</template>
	<template v-else>
	{{ $t('post_status.save_to_drafts_button') }}
	</template>
	</button>
	</div>
	</div>
	</template>
	</Popover>
	</div>
	</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="() => setMedia()"
	: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 src="./post_status_form.scss" lang="scss"></style>
	diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
	index cdad60f74a..5adc2443ac 100644
	--- a/src/components/rich_content/rich_content.jsx
	+++ b/src/components/rich_content/rich_content.jsx
	@@ -1,371 +1,392 @@
	import { unescape, flattenDeep } from 'lodash'
	import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js'
	import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
	import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
	import StillImageEmojiPopover from 'src/components/still-image/still-image-emoji-popover.vue'
	import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
	import { MENTIONS_LIMIT } from 'src/components/mentions_line/mentions_line.js'
	import HashtagLink from 'src/components/hashtag_link/hashtag_link.vue'

	import './rich_content.scss'

	const MAYBE_LINE_BREAKING_ELEMENTS = [
	'blockquote',
	'br',
	'hr',
	'ul',
	'ol',
	'li',
	'p',
	'table',
	'tbody',
	'td',
	'th',
	'thead',
	'tr',
	'h1',
	'h2',
	'h3',
	'h4',
	'h5'
	]

	/**
	* RichContent, The Über-powered component for rendering Post HTML.
	*
	* This takes post HTML and does multiple things to it:
	* - Groups all mentions into <MentionsLine>, this affects all mentions regardles
	* of where they are (beginning/middle/end), even single mentions are converted
	* to a <MentionsLine> containing single <MentionLink>.
	* - Replaces emoji shortcodes with <StillImage>'d images.
	*
	* There are two problems with this component's architecture:
	* 1. Parsing HTML and rendering are inseparable. Attempts to separate the two
	* proven to be a massive overcomplication due to amount of things done here.
	* 2. We need to output both render and some extra data, which seems to be imp-
	* possible in vue. Current solution is to emit 'parseReady' event when parsing
	* is done within render() function.
	*
	* Apart from that one small hiccup with emit in render this _should_ be vue3-ready
	*/
	export default {
	name: 'RichContent',
	components: {
	MentionsLine,
	HashtagLink
	},
	props: {
	// Original html content
	html: {
	required: true,
	type: String
	},
	attentions: {
	required: false,
	default: () => []
	},
	// Emoji object, as in status.emojis, note the "s" at the end...
	emoji: {
	required: true,
	type: Array
	},
	// Whether to handle links or not (posts: yes, everything else: no)
	handleLinks: {
	required: false,
	type: Boolean,
	default: false
	},
	// Meme arrows
	greentext: {
	required: false,
	type: Boolean,
	default: false
	},
	// Faint style (for notifs)
	faint: {
	required: false,
	type: Boolean,
	default: false
	},
	- // Assume is local to be true if unspecified, so the button isn't show where it probably should not be
	+ // Collapse newlines
	+ collapse: {
	+ required: false,
	+ type: Boolean,
	+ default: false
	+ },
	+ /* Content comes from current instance
	+ *
	+ * This is used for emoji stealing popover.
	+ * By default we assume it is, so that steal
	+ * emoji button isn't shown where it probably
	+ * should not be.
	+ */
	isLocal: {
	required: false,
	type: Boolean,
	default: true
	}
	},
	// NEVER EVER TOUCH DATA INSIDE RENDER
	render () {
	// Pre-process HTML
	const { newHtml: html } = preProcessPerLine(this.html, this.greentext)
	let currentMentions = null // Current chain of mentions, we group all mentions together
	// This is used to recover spacing removed when parsing mentions
	let lastSpacing = ''

	const lastTags = [] // Tags that appear at the end of post body
	const writtenMentions = [] // All mentions that appear in post body
	const invisibleMentions = [] // All mentions that go beyond the limiter (see MentionsLine)
	// to collapse too many mentions in a row
	const writtenTags = [] // All tags that appear in post body
	// unique index for vue "tag" property
	let mentionIndex = 0
	let tagsIndex = 0

	const renderImage = (tag) => {
	return <StillImage
	{...getAttrs(tag)}
	class="img"
	/>
	}

	const renderHashtag = (attrs, children, encounteredTextReverse) => {
	const { index, ...linkData } = getLinkData(attrs, children, tagsIndex++)
	writtenTags.push(linkData)
	if (!encounteredTextReverse) {
	lastTags.push(linkData)
	}
	const { url, tag, content } = linkData
	return <HashtagLink url={url} tag={tag} content={content}/>
	}

	const renderMention = (attrs, children) => {
	const linkData = getLinkData(attrs, children, mentionIndex++)
	linkData.notifying = this.attentions.some(a => a.statusnet_profile_url === linkData.url)
	writtenMentions.push(linkData)
	if (currentMentions === null) {
	currentMentions = []
	}
	currentMentions.push(linkData)
	if (currentMentions.length > MENTIONS_LIMIT) {
	invisibleMentions.push(linkData)
	}
	if (currentMentions.length === 1) {
	return <MentionsLine mentions={ currentMentions } />
	} else {
	return ''
	}
	}

	// Processor to use with html_tree_converter
	const processItem = (item, index, array, what) => {
	// Handle text nodes - just add emoji
	if (typeof item === 'string') {
	const emptyText = item.trim() === ''
	if (item.includes('\n')) {
	currentMentions = null
	}
	if (emptyText) {
	// don't include spaces when processing mentions - we'll include them
	// in MentionsLine
	lastSpacing = item
	// Don't remove last space in a container (fixes poast mentions)
	return (index !== array.length - 1) && (currentMentions !== null) ? item.trim() : item
	}

	currentMentions = null
	if (item.includes(':')) {
	item = ['', processTextForEmoji(
	item,
	this.emoji,
	({ shortcode, url }) => {
	return <StillImageEmojiPopover
	class="emoji img"
	src={url}
	title={`:${shortcode}:`}
	alt={`:${shortcode}:`}

	shortcode={shortcode}
	isLocal={this.isLocal}
	/>
	}
	)]
	}
	return item
	}

	// Handle tag nodes
	if (Array.isArray(item)) {
	const [opener, children, closer] = item
	let Tag = getTagName(opener)
	if (Tag.toLowerCase() === 'script') Tag = 'js-exploit'
	if (Tag.toLowerCase() === 'style') Tag = 'css-exploit'
	const fullAttrs = getAttrs(opener, () => true)
	const attrs = getAttrs(opener)
	const previouslyMentions = currentMentions !== null
	/* During grouping of mentions we trim all the empty text elements
	* This padding is added to recover last space removed in case
	* we have a tag right next to mentions
	*/
	const mentionsLinePadding =
	// Padding is only needed if we just finished parsing mentions
	previouslyMentions &&
	// Don't add padding if content is string and has padding already
	!(children && typeof children[0] === 'string' && children[0].match(/^\s/))
	? lastSpacing
	: ''
	if (MAYBE_LINE_BREAKING_ELEMENTS.includes(Tag)) {
	// all the elements that can cause a line change
	currentMentions = null
	} else if (Tag === 'img') { // replace images with StillImage
	return ['', [mentionsLinePadding, renderImage(opener)], '']
	} else if (Tag === 'a' && this.handleLinks) { // replace mentions with MentionLink
	if (fullAttrs.class && fullAttrs.class.includes('mention')) {
	// Handling mentions here
	return renderMention(attrs, children)
	} else {
	currentMentions = null
	}
	} else if (Tag === 'span') {
	if (this.handleLinks && fullAttrs.class && fullAttrs.class.includes('h-card')) {
	return ['', children.map(processItem), '']
	}
	}

	if (children !== undefined) {
	return [
	'',
	[
	mentionsLinePadding,
	[opener, children.map(processItem), closer]
	],
	''
	]
	} else {
	return ['', [mentionsLinePadding, item], '']
	}
	}
	}

	// Processor for back direction (for finding "last" stuff, just easier this way)
	let encounteredTextReverse = false
	const processItemReverse = (item, index, array, what) => {
	// Handle text nodes - just add emoji
	if (typeof item === 'string') {
	const emptyText = item.trim() === ''
	if (emptyText) return item
	if (!encounteredTextReverse) encounteredTextReverse = true
	return unescape(item)
	} else if (Array.isArray(item)) {
	// Handle tag nodes
	const [opener, children] = item
	const Tag = opener === '' ? '' : getTagName(opener)
	switch (Tag) {
	case 'a': { // replace mentions with MentionLink
	if (!this.handleLinks) break
	const fullAttrs = getAttrs(opener, () => true)
	const attrs = getAttrs(opener, () => true)
	// should only be this
	if (
	(fullAttrs.class && fullAttrs.class.includes('hashtag')) \|\| // Pleroma style
	(fullAttrs.rel === 'tag') // Mastodon style
	) {
	return renderHashtag(attrs, children, encounteredTextReverse)
	} else {
	attrs.target = '_blank'
	const newChildren = [...children].reverse().map(processItemReverse).reverse()

	return <a {...attrs}>
	{ newChildren }
	</a>
	}
	}
	case '':
	return [...children].reverse().map(processItemReverse).reverse()
	}

	// Render tag as is
	if (children !== undefined) {
	const newChildren = Array.isArray(children)
	? [...children].reverse().map(processItemReverse).reverse()
	: children
	return <Tag {...getAttrs(opener)}>
	{ newChildren }
	</Tag>
	} else {
	return <Tag/>
	}
	}
	return item
	}

	const pass1 = convertHtmlToTree(html).map(processItem)
	const pass2 = [...pass1].reverse().map(processItemReverse).reverse()
	+
	// DO NOT USE SLOTS they cause a re-render feedback loop here.
	// slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
	// at least until vue3?
	- const result = <span class={['RichContent', this.faint ? '-faint' : '']}>
	- { pass2 }
	+ const result =
	+ <span class={['RichContent', this.faint ? '-faint' : '']}>
	+ {
	+ this.collapse
	+ ? pass2.map(x => {
	+ if (!Array.isArray(x)) return x.replace(/\n/g, ' ')
	+ return x.map(y => y.type === 'br' ? ' ' : y)
	+ })
	+ : pass2
	+ }
	</span>

	const event = {
	lastTags,
	writtenMentions,
	writtenTags,
	invisibleMentions
	}

	// DO NOT MOVE TO UPDATE. BAD IDEA.
	this.$emit('parseReady', event)

	return result
	}
	}

	const getLinkData = (attrs, children, index) => {
	const stripTags = (item) => {
	if (typeof item === 'string') {
	return item
	} else {
	return item[1].map(stripTags).join('')
	}
	}
	const textContent = children.map(stripTags).join('')
	return {
	index,
	url: attrs.href,
	tag: attrs['data-tag'],
	content: flattenDeep(children).join(''),
	textContent
	}
	}

	/** Pre-processing HTML
	*
	* Currently this does one thing:
	* - add green/cyantexting
	*
	* @param {String} html - raw HTML to process
	* @param {Boolean} greentext - whether to enable greentexting or not
	*/
	export const preProcessPerLine = (html, greentext) => {
	const greentextHandle = new Set(['p', 'div'])

	const lines = convertHtmlToLines(html)
	const newHtml = lines.reverse().map((item, index, array) => {
	if (!item.text) return item
	const string = item.text

	// Greentext stuff
	if (
	// Only if greentext is engaged
	greentext &&
	// Only handle p's and divs. Don't want to affect blockquotes, code etc
	item.level.every(l => greentextHandle.has(l)) &&
	// Only if line begins with '>' or '<'
	(string.includes('>') \|\| string.includes('<'))
	) {
	const cleanedString = string.replace(/<[^>]+?>/gi, '') // remove all tags
	.replace(/@\w+/gi, '') // remove mentions (even failed ones)
	.trim()
	if (cleanedString.startsWith('>')) {
	return `<span class='greentext'>${string}</span>`
	} else if (cleanedString.startsWith('<')) {
	return `<span class='cyantext'>${string}</span>`
	}
	}

	return string
	}).reverse().join('')

	return { newHtml }
	}
	diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
	index 6b70d13567..d2ec77dcbc 100644
	--- a/src/components/rich_content/rich_content.scss
	+++ b/src/components/rich_content/rich_content.scss
	@@ -1,95 +1,100 @@
	.RichContent {
	font-family: var(--font);

	&.-faint {
	color: var(--text);
	/* stylelint-disable declaration-no-important */
	--text: var(--textFaint) !important;
	--link: var(--linkFaint) !important;
	--funtextGreentext: var(--funtextGreentextFaint) !important;
	--funtextCyantext: var(--funtextCyantextFaint) !important;
	/* stylelint-enable declaration-no-important */

	a {
	color: var(--linkFaint);
	}
	}

	blockquote {
	margin: 0.2em 0 0.2em 0.2em;
	font-style: italic;
	border-left: 0.2em solid var(--textFaint);
	padding-left: 1em;
	}

	pre {
	overflow: auto;
	}

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

	p {
	margin: 0 0 1em;
	}

	p:last-child {
	margin: 0;
	}

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

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

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

	h4 {
	margin: 1.1em 0;
	}

	.img {
	display: inline-block;
	+
	+ // fix vertical alignment of stealable emoji
	+ button {
	+ display: inline-flex;
	+ }
	}

	.emoji {
	display: inline-block;
	width: var(--emoji-size, 32px);
	height: var(--emoji-size, 32px);
	}

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

	.greentext {
	color: var(--funtextGreentext);
	}

	.cyantext {
	color: var(--funtextCyantext);
	}
	}

	a .RichContent {
	/* stylelint-disable-next-line declaration-no-important */
	color: var(--link) !important;
	}
	diff --git a/src/components/settings_modal/helpers/emoji_editing_popover.vue b/src/components/settings_modal/helpers/emoji_editing_popover.vue
	index a90189b62c..d25b02da20 100644
	--- a/src/components/settings_modal/helpers/emoji_editing_popover.vue
	+++ b/src/components/settings_modal/helpers/emoji_editing_popover.vue
	@@ -1,311 +1,314 @@
	<template>
	<Popover
	ref="emojiPopover"
	trigger="click"
	:placement="placement"
	bound-to-selector=".emoji-list"
	popover-class="emoji-tab-edit-popover popover-default"
	:bound-to="{ x: 'container' }"
	:offset="{ y: 5 }"
	:class="{'emoji-unsaved': isEdited}"
	>
	<template #trigger>
	<slot name="trigger" />
	</template>
	<template #content>
	<h3>
	{{ title }}
	</h3>

	<StillImage
	v-if="emojiPreview"
	class="emoji"
	:src="emojiPreview"
	/>
	<div
	v-else
	class="emoji"
	/>

	- <div v-if="newUpload" class="emoji-tab-popover-new-upload">
	+ <div
	+ v-if="newUpload"
	+ class="emoji-tab-popover-new-upload"
	+ >
	<h4>{{ $t('admin_dash.emoji.emoji_source') }}</h4>

	<div class="emoji-tab-popover-input">
	<input
	type="file"
	accept="image/*"
	class="emoji-tab-popover-file input"
	@change="uploadFile = $event.target.files"
	>
	</div>
	<div class="emoji-tab-popover-input ">
	<input
	v-model="uploadURL"
	:placeholder="$t('admin_dash.emoji.upload_url')"
	class="emoji-data-input input"
	>
	</div>
	</div>

	<div>
	<div class="emoji-tab-popover-input">
	<label>
	{{ $t('admin_dash.emoji.shortcode') }}
	<input
	v-model="editedShortcode"
	class="emoji-data-input input"
	:placeholder="$t('admin_dash.emoji.new_shortcode')"
	>
	</label>
	</div>

	<div class="emoji-tab-popover-input">
	<label>
	{{ $t('admin_dash.emoji.filename') }}

	<input
	v-model="editedFile"
	class="emoji-data-input input"
	:placeholder="$t('admin_dash.emoji.new_filename')"
	>
	</label>
	</div>

	<div
	v-if="remote !== undefined"
	class="emoji-tab-popover-input"
	>
	<label>
	{{ $t('admin_dash.emoji.copy_to') }}

	<SelectComponent
	v-model="copyToPack"
	class="form-control"
	>
	<option
	value=""
	disabled
	hidden
	>
	{{ $t('admin_dash.emoji.emoji_pack') }}
	</option>
	<option
	v-for="(pack, listPackName) in knownLocalPacks"
	:key="listPackName"
	:label="listPackName"
	>
	{{ listPackName }}
	</option>
	</SelectComponent>
	</label>
	</div>

	<!--
	For local emojis, disable the button if nothing was edited.
	For remote emojis, also disable it if a local pack is not selected.
	Remote emojis are processed by the same function that uploads new ones, as that is effectively what it does
	-->
	<button
	class="button button-default btn"
	type="button"
	:disabled="saveButtonDisabled"
	@click="(newUpload \|\| remote !== undefined) ? uploadEmoji() : saveEditedEmoji()"
	>
	{{ $t('admin_dash.emoji.save') }}
	</button>

	<template v-if="!newUpload && remote === undefined">
	<button
	class="button button-default btn emoji-tab-popover-button"
	type="button"
	@click="deleteModalVisible = true"
	>
	{{ $t('admin_dash.emoji.delete') }}
	</button>
	<button
	class="button button-default btn emoji-tab-popover-button"
	type="button"
	@click="revertEmoji"
	>
	{{ $t('admin_dash.emoji.revert') }}
	</button>
	<ConfirmModal
	v-if="deleteModalVisible"
	:title="$t('admin_dash.emoji.delete_title')"
	:cancel-text="$t('status.delete_confirm_cancel_button')"
	:confirm-text="$t('status.delete_confirm_accept_button')"
	@cancelled="deleteModalVisible = false"
	@accepted="deleteEmoji"
	>
	{{ $t('admin_dash.emoji.delete_confirm', [shortcode]) }}
	</ConfirmModal>
	</template>
	</div>
	</template>
	</Popover>
	</template>

	<script>
	import Popover from 'components/popover/popover.vue'
	import ConfirmModal from 'components/confirm_modal/confirm_modal.vue'
	import StillImage from 'components/still-image/still-image.vue'
	import SelectComponent from 'components/select/select.vue'

	export default {
	components: { Popover, ConfirmModal, StillImage, SelectComponent },
	inject: ['emojiAddr'],
	props: {
	placement: {
	type: String,
	required: true
	},

	newUpload: Boolean,

	title: {
	type: String,
	required: true
	},
	packName: {
	type: String,
	required: true
	},
	shortcode: {
	type: String,
	// Only exists when this is not a new upload
	default: ''
	},
	file: {
	type: String,
	// Only exists when this is not a new upload
	default: ''
	},

	// Only exists for emojis from remote packs
	remote: {
	type: Object,
	default: undefined
	},
	knownLocalPacks: {
	type: Object,
	default: undefined
	}
	},
	emits: ['updatePackFiles', 'displayError'],
	data () {
	return {
	uploadFile: [],
	uploadURL: '',
	editedShortcode: this.shortcode,
	editedFile: this.file,
	deleteModalVisible: false,
	copyToPack: ''
	}
	},
	computed: {
	emojiPreview () {
	if (this.newUpload && this.uploadFile.length > 0) {
	return URL.createObjectURL(this.uploadFile[0])
	} else if (this.newUpload && this.uploadURL !== '') {
	return this.uploadURL
	} else if (!this.newUpload) {
	return this.emojiAddr(this.file)
	}

	return null
	},
	isEdited () {
	return !this.newUpload && (this.editedShortcode !== this.shortcode \|\| this.editedFile !== this.file)
	},
	saveButtonDisabled() {
	if (this.remote === undefined)
	return this.newUpload ? (this.uploadURL === "" && this.uploadFile.length == 0) : !this.isEdited
	else
	return this.copyToPack === ""
	}
	},
	methods: {
	saveEditedEmoji () {
	if (!this.isEdited) return

	this.$store.state.api.backendInteractor.updateEmojiFile(
	{ packName: this.packName, shortcode: this.shortcode, newShortcode: this.editedShortcode, newFilename: this.editedFile, force: false }
	).then(resp => {
	if (resp.error !== undefined) {
	this.$emit('displayError', resp.error)
	return Promise.reject(resp.error)
	}

	return resp.json()
	}).then(resp => this.$emit('updatePackFiles', resp))
	},
	uploadEmoji () {
	let packName = this.remote === undefined ? this.packName : this.copyToPack
	this.$store.state.api.backendInteractor.addNewEmojiFile({
	packName: packName,
	file: this.remote === undefined
	? (this.uploadURL !== "" ? this.uploadURL : this.uploadFile[0])
	: this.emojiAddr(this.file),
	shortcode: this.editedShortcode,
	filename: this.editedFile
	}).then(resp => resp.json()).then(resp => {
	if (resp.error !== undefined) {
	this.$emit('displayError', resp.error)
	return
	}

	this.$emit('updatePackFiles', resp, packName)
	this.$refs.emojiPopover.hidePopover()

	this.editedFile = ''
	this.editedShortcode = ''
	this.uploadFile = []
	})
	},
	revertEmoji () {
	this.editedFile = this.file
	this.editedShortcode = this.shortcode
	},
	deleteEmoji () {
	this.deleteModalVisible = false

	this.$store.state.api.backendInteractor.deleteEmojiFile(
	{ packName: this.packName, shortcode: this.shortcode }
	).then(resp => resp.json()).then(resp => {
	if (resp.error !== undefined) {
	this.$emit('displayError', resp.error)
	return
	}

	this.$emit('updatePackFiles', resp, this.packName)
	})
	}
	}
	}
	</script>

	<style lang="scss">
	.emoji-tab-edit-popover {
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0.5em;

	.emoji-tab-popover-new-upload {
	margin-bottom: 2em;
	}

	.emoji {
	- width: 32px;
	- height: 32px;
	+ width: 2.3em;
	+ height: 2.3em;
	}

	.Select {
	display: inline-block;
	}

	h4 {
	margin-bottom: 1em;
	margin-top: 1em;
	}
	}
	</style>
	diff --git a/src/components/settings_modal/tabs/security_tab/mfa.vue b/src/components/settings_modal/tabs/security_tab/mfa.vue
	index 9421b16ee9..7e825062f4 100644
	--- a/src/components/settings_modal/tabs/security_tab/mfa.vue
	+++ b/src/components/settings_modal/tabs/security_tab/mfa.vue
	@@ -1,175 +1,181 @@
	<template>
	<div
	v-if="readyInit && settings.available"
	class="setting-item mfa-settings"
	>
	<div class="mfa-heading">
	<h2>{{ $t('settings.mfa.title') }}</h2>
	</div>

	<div>
	<div
	v-if="!setupInProgress"
	class="setting-item"
	>
	<!-- Enabled methods -->
	<h3>{{ $t('settings.mfa.authentication_methods') }}</h3>
	<totp-item
	:settings="settings"
	@deactivate="fetchSettings"
	@activate="activateOTP"
	/>
	<br>

	<div v-if="settings.enabled">
	<!-- backup codes block-->
	<recovery-codes
	v-if="!confirmNewBackupCodes"
	:backup-codes="backupCodes"
	/>
	<button
	v-if="!confirmNewBackupCodes"
	class="btn button-default"
	@click="getBackupCodes"
	>
	{{ $t('settings.mfa.generate_new_recovery_codes') }}
	</button>

	<div v-if="confirmNewBackupCodes">
	<confirm
	:disabled="backupCodes.inProgress"
	@confirm="confirmBackupCodes"
	@cancel="cancelBackupCodes"
	>
	<p class="warning">
	{{ $t('settings.mfa.warning_of_generate_new_codes') }}
	</p>
	</confirm>
	</div>
	</div>
	</div>

	<div v-if="setupInProgress">
	<!-- setup block-->

	<h3>{{ $t('settings.mfa.setup_otp') }}</h3>

	<recovery-codes
	v-if="!setupOTPInProgress"
	:backup-codes="backupCodes"
	/>

	<button
	v-if="canSetupOTP"
	class="btn button-default"
	@click="cancelSetup"
	>
	{{ $t('general.cancel') }}
	</button>

	<button
	v-if="canSetupOTP"
	class="btn button-default"
	@click="setupOTP"
	>
	{{ $t('settings.mfa.setup_otp') }}
	</button>

	<template v-if="setupOTPInProgress">
	<i v-if="prepareOTP">{{ $t('settings.mfa.wait_pre_setup_otp') }}</i>

	<div v-if="confirmOTP">
	<div class="setup-otp">
	<div class="qr-code">
	<h4>{{ $t('settings.mfa.scan.title') }}</h4>
	<p>{{ $t('settings.mfa.scan.desc') }}</p>
	<qrcode
	:value="otpSettings.provisioning_uri"
	:options="{ width: 200 }"
	/>
	<p>
	{{ $t('settings.mfa.scan.secret_code') }}:
	{{ otpSettings.key }}
	</p>
	</div>

	<div class="verify">
	<h4>{{ $t('general.verify') }}</h4>
	<p>{{ $t('settings.mfa.verify.desc') }}</p>
	<input
	v-model="otpConfirmToken"
	type="text"
	class="input"
	>

	<p>{{ $t('settings.enter_current_password_to_confirm') }}:</p>
	<input
	v-model="currentPassword"
	type="password"
	class="input"
	>
	<div class="confirm-otp-actions">
	<button
	class="btn button-default"
	@click="doConfirmOTP"
	>
	{{ $t('settings.mfa.confirm_and_enable') }}
	</button>
	<button
	class="btn button-default"
	@click="cancelSetup"
	>
	{{ $t('general.cancel') }}
	</button>
	</div>
	<div
	v-if="error"
	class="alert error"
	>
	{{ error }}
	</div>
	</div>
	</div>
	</div>
	</template>
	</div>
	</div>
	</div>
	</template>

	<script src="./mfa.js"></script>
	<style lang="scss">
	.mfa-settings {
	.mfa-heading,
	.method-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	}

	.warning {
	color: var(--cOrange);
	}

	.setup-otp {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;

	.qr-code {
	flex: 1;
	- padding-right: 10px;
	+ padding-right: 0.7em;
	+ }
	+
	+ .verify {
	+ flex: 1;
	+ }
	+
	+ .error {
	+ margin: 0.3em 0 0;
	}
	- .verify { flex: 1; }
	- .error { margin: 4px 0 0; }

	.confirm-otp-actions {
	button {
	width: 15em;
	margin-top: 5px;
	}
	}
	}
	}
	</style>
	diff --git a/src/components/settings_modal/tabs/theme_tab/theme_preview.vue b/src/components/settings_modal/tabs/theme_tab/theme_preview.vue
	index e8ac0d8a34..df2d9f9e9a 100644
	--- a/src/components/settings_modal/tabs/theme_tab/theme_preview.vue
	+++ b/src/components/settings_modal/tabs/theme_tab/theme_preview.vue
	@@ -1,247 +1,255 @@
	<template>
	<div class="theme-preview-container">
	<div class="underlay underlay-preview" />
	<div class="panel dummy">
	<div class="panel-heading">
	<h1 class="title">
	{{ $t('settings.style.preview.header') }}
	<span class="badge -notification">
	99
	</span>
	</h1>
	<span class="faint">
	{{ $t('settings.style.preview.header_faint') }}
	</span>
	<span class="alert error">
	{{ $t('settings.style.preview.error') }}
	</span>
	<button class="btn button-default">
	{{ $t('settings.style.preview.button') }}
	</button>
	</div>
	<div class="panel-body theme-preview-content">
	<div class="post">
	- <div class="avatar still-image">
	+ <div
	+ class="avatar still-image"
	+ aria-hidden="true"
	+ >
	( ͡° ͜ʖ ͡°)
	</div>
	<div class="content">
	<h4>
	{{ $t('settings.style.preview.content') }}
	</h4>

	<i18n-t
	scope="global"
	keypath="settings.style.preview.text"
	>
	<code style="font-family: var(--postCodeFont);">
	{{ $t('settings.style.preview.mono') }}
	</code>
	<a style="color: var(--link);">
	{{ $t('settings.style.preview.link') }}
	</a>
	</i18n-t>

	<div class="icons">
	<FAIcon
	fixed-width
	style="color: var(--cBlue);"
	class="fa-scale-110 fa-old-padding"
	icon="reply"
	/>
	<FAIcon
	fixed-width
	style="color: var(--cGreen);"
	class="fa-scale-110 fa-old-padding"
	icon="retweet"
	/>
	<FAIcon
	fixed-width
	style="color: var(--cOrange);"
	class="fa-scale-110 fa-old-padding"
	icon="star"
	/>
	<FAIcon
	fixed-width
	style="color: var(--cRed);"
	class="fa-scale-110 fa-old-padding"
	icon="times"
	/>
	</div>
	</div>
	</div>

	<div class="after-post">
	- <div class="avatar-alt">
	+ <div
	+ class="avatar-alt"
	+ aria-hidden="true"
	+ >
	:^)
	</div>
	<div class="content">
	<i18n-t
	keypath="settings.style.preview.fine_print"
	tag="span"
	class="faint"
	scope="global"
	>
	<a style="color: var(--linkFaint);">
	{{ $t('settings.style.preview.faint_link') }}
	</a>
	</i18n-t>
	</div>
	</div>
	<div class="separator" />

	<span class="alert error">
	{{ $t('settings.style.preview.error') }}
	</span>
	<input
	:value="$t('settings.style.preview.input')"
	type="text"
	class="input"
	>

	<div class="actions">
	<Checkbox>
	{{ $t('settings.style.preview.checkbox') }}
	</Checkbox>
	<button class="btn button-default">
	{{ $t('settings.style.preview.button') }}
	</button>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script>
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faTimes,
	faStar,
	faRetweet,
	faReply
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faTimes,
	faStar,
	faRetweet,
	faReply
	)

	export default {
	components: {
	Checkbox
	}
	}
	</script>

	<style lang="scss">
	.theme-preview-container {
	position: relative;
	border-top: 1px dashed;
	border-bottom: 1px dashed;
	border-color: var(--border);
	margin: 1em 0;
	padding: 1em;
	background-color: var(--wallpaper);
	background-image: var(--body-background-image);
	background-size: cover;
	background-position: 50% 50%;

	.theme-preview-content {
	- padding: 20px;
	+ padding: 1.5em;
	}

	.dummy {
	.post {
	font-family: var(--postFont);
	display: flex;

	.content {
	flex: 1;

	h4 {
	margin-bottom: 0.25em;
	}

	.icons {
	margin-top: 0.5em;
	display: flex;

	i {
	margin-right: 1em;
	}
	}
	}
	}

	.after-post {
	margin-top: 1em;
	display: flex;
	align-items: center;
	}

	.avatar,
	.avatar-alt {
	background:
	linear-gradient(
	135deg,
	#b8e1fc 0%,
	#a9d2f3 10%,
	#90bae4 25%,
	#90bcea 37%,
	#90bff0 50%,
	#6ba8e5 51%,
	#a2daf5 83%,
	#bdf3fd 100%
	);
	color: black;
	font-family: sans-serif;
	text-align: center;
	margin-right: 1em;
	}

	.avatar-alt {
	flex: 0 auto;
	- margin-left: 28px;
	- font-size: 12px;
	- min-width: 20px;
	- min-height: 20px;
	- line-height: 20px;
	+ margin-left: 2em;
	+ font-size: 0.85em;
	+ min-width: 2.2rem;
	+ min-height: 2.2rem;
	+ line-height: 1.5em;
	+ align-content: center;
	}

	.avatar {
	flex: 0 auto;
	- width: 48px;
	- height: 48px;
	- font-size: 14px;
	- line-height: 48px;
	+ width: 3.5em;
	+ height: 3.5em;
	+ font-size: 1rem;
	+ line-height: 3.5em;
	+ justify-content: center;
	}

	.actions {
	display: flex;
	align-items: baseline;

	.checkbox {
	margin-right: 1em;
	flex: 1;
	}
	}

	.separator {
	margin: 1em;
	border-bottom: 1px solid;
	border-color: var(--border);
	}

	.btn {
	min-width: 3em;
	}
	}

	.underlay-preview {
	position: absolute;
	- inset: 0 10px;
	+ inset: 0 0.9em;
	}
	}
	</style>
	diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
	index d83beffa06..ae2364dccf 100644
	--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
	+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
	@@ -1,257 +1,257 @@
	.theme-tab {
	min-width: var(--themeEditorMinWidth, fit-content);

	.deprecation-warning {
	padding: 0.5em;
	margin: 2em;
	}

	padding-bottom: 2em;

	.preset-switcher {
	margin-right: 1em;
	}

	.btn {
	margin-left: 0.25em;
	margin-right: 0.25em;
	}

	.btn-group .btn {
	margin: 0;
	}

	.style-control {
	display: flex;
	align-items: baseline;
	margin-bottom: 5px;

	.label {
	margin-right: 1em;
	flex: 1;
	line-height: 2;
	}

	.opt {
	margin: 0.5em;
	}

	.color-input {
	flex: 0 0 0;
	}

	input,
	select {
	min-width: 3em;
	margin: 0;
	flex: 0;

	&[type="number"] {
	min-width: 9em;

	&.-small {
	min-width: 5em;
	}
	}

	&[type="range"] {
	flex: 1;
	min-width: 9em;
	align-self: center;
	margin: 0 0.5em;
	}

	&[type="checkbox"] + i {
	height: 1.1em;
	align-self: center;
	}
	}
	}

	.reset-container {
	flex-wrap: wrap;
	}

	.fonts-container,
	.reset-container,
	.apply-container,
	.radius-container,
	.color-container, {
	display: flex;
	}

	.fonts-container,
	.radius-container {
	flex-direction: column;
	}

	.color-container {
	> h4 {
	width: 99%;
	}

	flex-wrap: wrap;
	justify-content: space-between;
	}

	.fonts-container,
	.color-container,
	.shadow-container,
	.radius-container,
	.presets-container {
	margin: 1em 1em 0;
	}

	.tab-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	width: 100%;
	- min-height: 30px;
	+ min-height: 2.1em;
	margin-bottom: 1em;

	p {
	flex: 1;
	margin: 0;
	margin-right: 0.5em;
	}
	}

	.tab-header-buttons {
	display: flex;
	flex-direction: column;

	.btn {
	min-width: 1px;
	flex: 0 auto;
	padding: 0 1em;
	margin-bottom: 0.5em;
	}
	}

	.shadow-selector {
	.override {
	flex: 1;
	margin-left: 0.5em;
	}

	.select-container {
	margin-top: -4px;
	margin-bottom: -3px;
	}
	}

	.save-load,
	.save-load-options {
	display: flex;
	justify-content: center;
	align-items: baseline;
	flex-wrap: wrap;

	.presets,
	.import-export {
	margin-bottom: 0.5em;
	}

	.import-export {
	display: flex;
	}

	.override {
	margin-left: 0.5em;
	}
	}

	.save-load-options {
	flex-wrap: wrap;
	margin-top: 0.5em;
	justify-content: center;

	.keep-option {
	margin: 0 0.5em 0.5em;
	min-width: 25%;
	}
	}

	.radius-item {
	flex-basis: auto;
	}

	.radius-item,
	.color-item {
	min-width: 20em;
	margin: 5px 6px 0 0;
	display: flex;
	flex-direction: column;
	flex: 1 1 0;

	&.wide {
	min-width: 60%;
	}

	&:not(.wide):nth-child(2n+1) {
	margin-right: 7px;
	}

	.color,
	.opacity {
	display: flex;
	align-items: baseline;
	}
	}

	.theme-radius-rn,
	.theme-color-cl {
	border: 0;
	box-shadow: none;
	background: transparent;
	color: var(--textFaint);
	align-self: stretch;
	}

	.theme-color-cl,
	.theme-radius-in,
	.theme-color-in {
	- margin-left: 4px;
	+ margin-left: 0.3em;
	}

	.theme-radius-in {
	min-width: 1em;
	max-width: 7em;
	flex: 1;
	}

	.theme-radius-lb {
	max-width: 50em;
	}

	.theme-warning {
	display: flex;
	align-items: baseline;
	margin-bottom: 0.5em;

	.buttons {
	.btn {
	margin-bottom: 0.5em;
	}
	}
	}
	}

	.extra-content {
	.apply-container {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-grow: 1;

	/* stylelint-disable-next-line no-descending-specificity */
	.btn {
	flex-grow: 1;
	min-height: 2em;
	min-width: 0;
	max-width: 10em;
	padding: 0;
	}
	}
	}
	diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue
	index 1b2b591c20..184fe81e0b 100644
	--- a/src/components/shout_panel/shout_panel.vue
	+++ b/src/components/shout_panel/shout_panel.vue
	@@ -1,151 +1,151 @@
	<template>
	<div
	v-if="!collapsed \|\| !floating"
	class="shout-panel"
	>
	<div class="panel panel-default">
	<div
	class="panel-heading"
	:class="{ 'shout-heading': floating }"
	@click.stop.prevent="togglePanel"
	>
	<h1 class="title">
	{{ $t('shoutbox.title') }}
	<FAIcon
	v-if="floating"
	icon="times"
	class="close-icon"
	/>
	</h1>
	</div>
	<div class="panel-body shout-window">
	<div
	v-for="message in messages"
	:key="message.id"
	class="shout-message"
	>
	<span class="shout-avatar">
	<img :src="message.author.avatar">
	</span>
	<div class="shout-content">
	<router-link
	class="shout-name"
	:to="userProfileLink(message.author)"
	>
	{{ message.author.username }}
	</router-link>
	<br>
	<span class="shout-text">
	{{ message.text }}
	</span>
	</div>
	</div>
	</div>
	<div class="panel-body shout-input">
	<textarea
	v-model="currentMessage"
	class="shout-input-textarea input"
	rows="1"
	@keyup.enter="submit(currentMessage)"
	/>
	</div>
	</div>
	</div>
	<div
	v-else
	class="shout-panel"
	>
	<div class="panel panel-default">
	<div
	class="panel-heading -stub timeline-heading shout-heading"
	@click.stop.prevent="togglePanel"
	>
	<div class="title">
	<FAIcon
	class="icon"
	icon="bullhorn"
	/>
	{{ $t('shoutbox.title') }}
	</div>
	</div>
	</div>
	</div>
	</template>

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

	<style lang="scss">
	.floating-shout {
	position: fixed;
	bottom: 0.5em;
	z-index: var(--ZI_popovers);
	max-width: 25em;

	&.-left {
	left: 0.5em;
	}

	&:not(.-left) {
	right: 0.5em;
	}
	}

	.shout-panel {
	.shout-heading {
	cursor: pointer;

	.icon {
	color: var(--text);
	margin-right: 0.5em;
	}

	.title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	}
	}

	.shout-window {
	overflow: hidden auto;
	max-height: 20em;
	}

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

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

	.shout-avatar {
	img {
	- height: 24px;
	- width: 24px;
	+ height: 0.6em;
	+ width: 0.6em;
	border-radius: var(--roundness);
	margin-right: 0.5em;
	margin-top: 0.25em;
	}
	}

	.shout-input {
	display: flex;

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

	.shout-panel {
	.title {
	display: flex;
	justify-content: space-between;
	}
	}
	}
	</style>
	diff --git a/src/components/status/status.scss b/src/components/status/status.scss
	index 93253b1a72..511a740746 100644
	--- a/src/components/status/status.scss
	+++ b/src/components/status/status.scss
	@@ -1,402 +1,405 @@
	.Status {
	min-width: 0;
	white-space: normal;
	overflow-wrap: break-word;
	text-wrap: pretty;

	&:hover {
	--_still-image-img-visibility: visible;
	--_still-image-canvas-visibility: hidden;
	--_still-image-label-visibility: hidden;
	}

	.gravestone {
	padding: var(--status-margin);
	display: flex;

	.deleted-text {
	margin: 0.5em 0;
	align-items: center;
	}
	}

	.status-container {
	display: flex;
	padding: var(--status-margin);

	> * {
	min-width: 0;
	}

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

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

	._misclick-prevention & {
	pointer-events: none;

	.attachments {
	pointer-events: initial;
	cursor: initial;
	}
	}

	.left-side {
	margin-right: var(--status-margin);
	}

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

	.usercard {
	margin-bottom: var(--status-margin);
	}

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

	--_still_image-label-scale: 0.25;
	--emoji-size: 1em;
	}

	.status-favicon {
	- height: 18px;
	- width: 18px;
	+ height: 1.2em;
	+ width: 1.2em;
	margin-right: 0.4em;
	+ object-fit: contain;
	}

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

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

	a {
	display: inline-block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
	width: 100%
	}
	}

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

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

	.heading-right {
	display: flex;
	flex-shrink: 0;
	+ align-self: baseline;

	.button-unstyled {
	- padding: 5px;
	- margin: -5px;
	+ padding: 0.2em;
	+ margin: -0.2em;
	}

	.svg-inline--fa {
	margin-left: 0.25em;
	}
	}

	.glued-label {
	display: inline-flex;
	white-space: nowrap;
	}

	.timeago {
	margin-right: 0.2em;
	}

	& .heading-reply-row,
	& .heading-edited-row {
	position: relative;
	align-content: baseline;
	font-size: 0.85em;
	margin-top: 0.2em;
	line-height: 130%;
	max-width: 100%;
	align-items: stretch;
	}

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

	.reply-glued-label {
	margin-right: 0.5em;
	}

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

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

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

	& .mentions,
	& .reply-to {
	white-space: nowrap;
	position: relative;
	}

	& .mentions-text,
	& .reply-to-text {
	color: var(--faint);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	.mentions-line {
	display: inline;
	}

	.replies {
	margin-top: 0.25em;
	line-height: 1.3;
	font-size: 0.85em;
	display: flex;
	flex-wrap: wrap;

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

	.reply-link {
	height: 17px;
	}

	.repeat-info {
	padding: 0.4em var(--status-margin);

	.repeat-icon {
	color: var(--cGreen);
	}
	}

	.repeater-avatar {
	border-radius: var(--roundness);
	- margin-left: 28px;
	- width: 20px;
	- height: 20px;
	+ margin-left: 2em; // 3.5 (poster avatar size) - 1.5 (repeater avatar size)
	+ width: 1.5em;
	+ height: 1.5em;
	}

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

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

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

	@keyframes fadein {
	from {
	opacity: 0;
	}

	to {
	opacity: 1;
	}
	}

	.status-actions {
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	margin-top: var(--status-margin);
	}

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

	& .status-username,
	& .mute-reason {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	}

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

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

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

	.reply-body {
	flex: 1;
	}

	.favs-repeated-users {
	margin-top: var(--status-margin);
	}

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

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

	&::before {
	content: "";
	position: absolute;
	height: 100%;
	width: 1px;
	left: 0;
	background-color: var(--textFaint);
	}
	}

	.stat-count {
	margin-right: var(--status-margin);
	user-select: none;

	.stat-title {
	color: var(--textFaint);
	font-size: 0.85em;
	text-transform: uppercase;
	position: relative;
	}

	.stat-number {
	font-weight: bolder;
	font-size: 1.1em;
	line-height: 1em;
	color: var(--text);
	}

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

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

	.post-avatar {
	width: 40px;
	height: 40px;

	// TODO define those other way somehow?
	&.-compact {
	width: 32px;
	height: 32px;
	}
	}
	}

	.quoted-status {
	margin-top: 0.5em;
	border: 1px solid var(--border);
	border-radius: var(--roundness);

	&.-unavailable-prompt {
	padding: 0.5em;
	}
	}

	.display-quoted-status-button {
	margin: 0.5em;

	&-icon {
	color: inherit;
	}
	}
	}
	diff --git a/src/components/status_action_buttons/action_button.scss b/src/components/status_action_buttons/action_button.scss
	index 8c69248713..df445391a5 100644
	--- a/src/components/status_action_buttons/action_button.scss
	+++ b/src/components/status_action_buttons/action_button.scss
	@@ -1,121 +1,121 @@
	@use "../../mixins";
	/* stylelint-disable declaration-no-important */

	.quick-action {
	justify-content: space-between;
	display: flex;
	align-items: baseline;
	align-items: center;
	height: 1.5em;

	.action-counter {
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-left: 1em;
	}

	.action-button-inner,
	.extra-button {
	margin: -0.5em;
	padding: 0.5em;
	}

	.separator {
	display: block;
	align-self: stretch;
	width: 1px;
	background-color: var(--icon);
	- margin-left: 1em;
	- margin-right: 0.5em;
	+ margin-left: 0.75em;
	+ margin-right: 0.125em;
	}

	&.-pin {
	margin: calc(-2px - 0.25em);
	padding: 0.25em;
	border: 2px dashed var(--icon);
	border-radius: var(--roundness);
	grid-template-columns: minmax(max-content, 1fr) auto;

	.chevron-icon,
	.extra-button,
	.separator {
	display: none;
	}
	}

	.action-button-inner {
	display: grid;
	grid-gap: 1em;
	grid-template-columns: max-content;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	align-items: center;

	@include mixins.unfocused-style {
	.focus-marker {
	visibility: hidden;
	}

	.active-marker {
	visibility: visible;
	}
	}

	@include mixins.focused-style {
	.focus-marker {
	visibility: visible;
	}

	.active-marker {
	visibility: hidden;
	}
	}
	}
	}

	.action-button {
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	padding: 0;

	.action-button-inner {
	&:hover,
	&.-active {
	&.reply-button:not(.disabled) {
	.svg-inline--fa {
	color: var(--cBlue);
	}
	}

	&.retweet-button:not(.disabled) {
	.svg-inline--fa {
	color: var(--cGreen);
	}
	}

	&.favorite-button:not(.disabled) {
	.svg-inline--fa {
	color: var(--cOrange);
	}
	}
	}
	}

	&.-extra {
	.action-counter {
	justify-self: end;
	margin-right: 1em;
	}

	.chevron-icon {
	justify-self: end;
	}

	.extra-button {
	justify-self: end;
	justify-content: end;
	}
	}
	}
	diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
	index c9135fecda..9a56060e87 100644
	--- a/src/components/status_body/status_body.js
	+++ b/src/components/status_body/status_body.js
	@@ -1,148 +1,153 @@
	import fileType from 'src/services/file_type/file_type.service'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import { mapGetters } from 'vuex'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faFile,
	faMusic,
	faImage,
	faLink,
	faPollH
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faFile,
	faMusic,
	faImage,
	faLink,
	faPollH
	)

	const StatusBody = {
	name: 'StatusBody',
	props: [
	'compact',
	+ 'collapse', // replaces newlines with spaces
	'status',
	'focused',
	'noHeading',
	'fullContent',
	'singleLine',
	'showingTall',
	'expandingSubject',
	'showingLongSubject',
	'toggleShowingTall',
	'toggleExpandingSubject',
	'toggleShowingLongSubject'
	],
	data () {
	return {
	postLength: this.status.text.length,
	parseReadyDone: false
	}
	},
	+ emits: ['parseReady'],
	computed: {
	localCollapseSubjectDefault () {
	return this.mergedConfig.collapseMessageWithSubject
	},
	// This is a bit hacky, but we want to approximate post height before rendering
	// so we count newlines (masto uses <p> for paragraphs, GS uses <br> between them)
	// as well as approximate line count by counting characters and approximating ~80
	// per line.
	//
	// Using max-height + overflow: auto for status components resulted in false positives
	// very often with japanese characters, and it was very annoying.
	tallStatus () {
	if (this.singleLine \|\| this.compact) return false
	const lengthScore = this.status.raw_html.split(/<p\|<br/).length + this.postLength / 80
	return lengthScore > 20
	},
	longSubject () {
	return this.status.summary.length > 240
	},
	// When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status.
	mightHideBecauseSubject () {
	return !!this.status.summary && this.localCollapseSubjectDefault
	},
	mightHideBecauseTall () {
	return this.tallStatus && !(this.status.summary && this.localCollapseSubjectDefault)
	},
	hideSubjectStatus () {
	return this.mightHideBecauseSubject && !this.expandingSubject
	},
	hideTallStatus () {
	return this.mightHideBecauseTall && !this.showingTall
	},
	shouldShowToggle () {
	return this.mightHideBecauseSubject \|\| this.mightHideBecauseTall
	},
	toggleButtonClasses () {
	return {
	'cw-status-hider': !this.showingMore && this.mightHideBecauseSubject,
	'tall-status-hider': !this.showingMore && this.mightHideBecauseTall,
	'status-unhider': this.showingMore,
	}
	},
	toggleText () {
	if (this.showingMore) {
	return this.mightHideBecauseSubject ? this.$t('status.hide_content') : this.$t('general.show_less')
	} else {
	return this.mightHideBecauseSubject ? this.$t('status.show_content') : this.$t('general.show_more')
	}
	},
	showingMore () {
	return (this.mightHideBecauseTall && this.showingTall) \|\| (this.mightHideBecauseSubject && this.expandingSubject)
	},
	attachmentTypes () {
	return this.status.attachments.map(file => fileType.fileType(file.mimetype))
	},
	+ collapsedStatus () {
	+ return this.status.raw_html.replace(/(\n\|<br\s?\/?>)/g, ' ')
	+ },
	...mapGetters(['mergedConfig'])
	},
	components: {
	RichContent
	},
	mounted () {
	this.status.attentions && this.status.attentions.forEach(attn => {
	const { id } = attn
	this.$store.dispatch('fetchUserIfMissing', id)
	})
	},
	methods: {
	onParseReady (event) {
	if (this.parseReadyDone) return
	this.parseReadyDone = true
	this.$emit('parseReady', event)
	const { writtenMentions, invisibleMentions } = event
	writtenMentions
	.filter(mention => !mention.notifying)
	.forEach(mention => {
	const { content, url } = mention
	const cleanedString = content.replace(/<[^>]+?>/gi, '') // remove all tags
	if (!cleanedString.startsWith('@')) return
	const handle = cleanedString.slice(1)
	const host = url.replace(/^https?:\/\//, '').replace(/\/.+?$/, '')
	this.$store.dispatch('fetchUserIfMissing', `${handle}@${host}`)
	})
	/* This is a bit of a hack to make current tall status detector work
	* with rich mentions. Invisible mentions are detected at RichContent level
	* and also we generate plaintext version of mentions by stripping tags
	* so here we subtract from post length by each mention that became invisible
	* via MentionsLine
	*/
	this.postLength = invisibleMentions.reduce((acc, mention) => {
	return acc - mention.textContent.length - 1
	}, this.postLength)
	},
	toggleShowMore () {
	if (this.mightHideBecauseTall) {
	this.toggleShowingTall()
	} else if (this.mightHideBecauseSubject) {
	this.toggleExpandingSubject()
	}
	},
	generateTagLink (tag) {
	return `/tag/${tag}`
	}
	}
	}

	export default StatusBody
	diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
	index 6f1c3c7473..677781d972 100644
	--- a/src/components/status_body/status_body.vue
	+++ b/src/components/status_body/status_body.vue
	@@ -1,96 +1,71 @@
	<template>
	<div
	class="StatusBody"
	:class="{ '-compact': compact }"
	>
	<div class="body">
	<div
	v-if="status.summary_raw_html"
	class="summary-wrapper"
	:class="{ '-tall': (longSubject && !showingLongSubject) }"
	>
	<RichContent
	class="media-body summary"
	:faint="compact"
	:html="status.summary_raw_html"
	:emoji="status.emojis"
	:is-local="status.isLocal"
	/>
	<button
	v-show="longSubject && showingLongSubject"
	class="button-unstyled -link tall-subject-hider"
	@click.prevent="toggleShowingLongSubject"
	>
	{{ $t("status.hide_full_subject") }}
	</button>
	<button
	v-show="longSubject && !showingLongSubject"
	class="button-unstyled -link tall-subject-hider"
	@click.prevent="toggleShowingLongSubject"
	>
	{{ $t("status.show_full_subject") }}
	</button>
	</div>
	<div
	class="text-wrapper"
	:class="{'-tall-status': hideTallStatus, '-expanded': showingMore}"
	>
	<RichContent
	v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)"
	:class="{ '-single-line': singleLine }"
	class="text media-body"
	:html="status.raw_html"
	+ :collapse="collapse"
	:emoji="status.emojis"
	:handle-links="true"
	:faint="compact"
	:greentext="mergedConfig.greentext"
	:attentions="status.attentions"
	:is-local="status.is_local"
	@parse-ready="onParseReady"
	/>
	<div
	v-show="shouldShowToggle"
	:class="toggleButtonClasses"
	>
	<button
	class="btn button-default toggle-button"
	:class="{ '-focused': focused }"
	:aria-expanded="showingMore"
	@click.prevent="toggleShowMore"
	>
	{{ toggleText }}
	- <template v-if="!showingMore">
	- <FAIcon
	- v-if="attachmentTypes.includes('image')"
	- icon="image"
	- />
	- <FAIcon
	- v-if="attachmentTypes.includes('video')"
	- icon="video"
	- />
	- <FAIcon
	- v-if="attachmentTypes.includes('audio')"
	- icon="music"
	- />
	- <FAIcon
	- v-if="attachmentTypes.includes('unknown')"
	- icon="file"
	- />
	- <FAIcon
	- v-if="status.poll && status.poll.options"
	- icon="poll-h"
	- />
	- <FAIcon
	- v-if="status.card"
	- icon="link"
	- />
	- </template>
	</button>
	</div>
	</div>
	</div>
	<slot v-if="!hideSubjectStatus" />
	</div>
	</template>
	<script src="./status_body.js"></script>
	<style lang="scss" src="./status_body.scss" />
	diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
	index 3bf25c75b3..364123f492 100644
	--- a/src/components/status_content/status_content.js
	+++ b/src/components/status_content/status_content.js
	@@ -1,139 +1,141 @@
	import Attachment from '../attachment/attachment.vue'
	import Poll from '../poll/poll.vue'
	import Gallery from '../gallery/gallery.vue'
	import StatusBody from 'src/components/status_body/status_body.vue'
	import LinkPreview from '../link-preview/link-preview.vue'
	import { mapGetters, mapState } from 'vuex'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faCircleNotch,
	faFile,
	faMusic,
	faImage,
	faLink,
	faPollH
	} from '@fortawesome/free-solid-svg-icons'
	import { useMediaViewerStore } from 'src/stores/media_viewer'

	library.add(
	faCircleNotch,
	faFile,
	faMusic,
	faImage,
	faLink,
	faPollH
	)

	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 StatusContent = {
	name: 'StatusContent',
	props: [
	'status',
	'compact',
	+ 'collapse',
	'focused',
	'noHeading',
	'fullContent',
	'singleLine',
	'controlledShowingTall',
	'controlledExpandingSubject',
	'controlledToggleShowingTall',
	'controlledToggleExpandingSubject',
	'controlledShowingLongSubject',
	'controlledToggleShowingLongSubject'
	],
	+ emits: ['parseReady', 'mediaplay', 'mediapause'],
	data () {
	return {
	uncontrolledShowingTall: this.fullContent \|\| (this.inConversation && this.focused),
	uncontrolledShowingLongSubject: false,
	// not as computed because it sets the initial state which will be changed later
	uncontrolledExpandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject
	}
	},
	computed: {
	...controlledOrUncontrolledGetters(['showingTall', 'expandingSubject', 'showingLongSubject']),
	statusCard () {
	if (!this.status.card) return null
	return this.status.card.url === this.status.quote_url ? null : this.status.card
	},
	hideAttachments () {
	return (this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	(this.mergedConfig.hideAttachmentsInConv && this.inConversation)
	},
	nsfwClickthrough () {
	if (!this.status.nsfw) {
	return false
	}
	if (this.status.summary && this.localCollapseSubjectDefault) {
	return false
	}
	return true
	},
	localCollapseSubjectDefault () {
	return this.mergedConfig.collapseMessageWithSubject
	},
	attachmentSize () {
	if (this.compact) {
	return 'small'
	} else if ((this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	(this.mergedConfig.hideAttachmentsInConv && this.inConversation) \|\|
	(this.status.attachments.length > this.maxThumbnails)) {
	return 'hide'
	}
	return 'normal'
	},
	maxThumbnails () {
	return this.mergedConfig.maxThumbnails
	},
	...mapGetters(['mergedConfig']),
	...mapState({
	currentUser: state => state.users.currentUser
	})
	},
	components: {
	Attachment,
	Poll,
	Gallery,
	LinkPreview,
	StatusBody
	},
	methods: {
	toggleShowingTall () {
	controlledOrUncontrolledToggle(this, 'showingTall')
	},
	toggleExpandingSubject () {
	controlledOrUncontrolledToggle(this, 'expandingSubject')
	},
	toggleShowingLongSubject () {
	controlledOrUncontrolledToggle(this, 'showingLongSubject')
	},
	setMedia () {
	const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
	return () => useMediaViewerStore().setMedia(attachments)
	}
	}
	}

	export default StatusContent
	diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
	index 64a1d6a533..460a0714b6 100644
	--- a/src/components/status_content/status_content.vue
	+++ b/src/components/status_content/status_content.vue
	@@ -1,66 +1,74 @@
	<template>
	<div
	class="StatusContent"
	:class="{ '-compact': compact }"
	>
	<slot name="header" />
	<StatusBody
	:status="status"
	:compact="compact"
	:single-line="singleLine"
	:showing-tall="showingTall"
	:expanding-subject="expandingSubject"
	:showing-long-subject="showingLongSubject"
	:toggle-showing-tall="toggleShowingTall"
	:toggle-expanding-subject="toggleExpandingSubject"
	:toggle-showing-long-subject="toggleShowingLongSubject"
	+ :collapse="collapse"
	@parse-ready="$emit('parseReady', $event)"
	>
	<div v-if="status.poll && status.poll.options && !compact">
	<Poll
	:base-poll="status.poll"
	:emoji="status.emojis"
	/>
	</div>

	- <div v-else-if="status.poll && status.poll.options && compact">
	+ <div
	+ v-else-if="status.poll && status.poll.options && compact"
	+ class="poll-icon"
	+ >
	<FAIcon
	icon="poll-h"
	size="2x"
	/>
	</div>

	<gallery
	v-if="status.attachments.length !== 0"
	class="attachments media-body"
	:compact="compact"
	:nsfw="nsfwClickthrough"
	:attachments="status.attachments"
	:limit="compact ? 1 : 0"
	:size="attachmentSize"
	@play="$emit('mediaplay', attachment.id)"
	@pause="$emit('mediapause', attachment.id)"
	/>

	<div
	v-if="statusCard && !noHeading && !compact"
	class="link-preview media-body"
	>
	<link-preview
	:card="status.card"
	:size="attachmentSize"
	:nsfw="nsfwClickthrough"
	/>
	</div>
	</StatusBody>
	<slot name="footer" />
	</div>
	</template>

	<script src="./status_content.js"></script>
	<style lang="scss">
	.StatusContent {
	flex: 1;
	min-width: 0;
	+
	+ .poll-icon {
	+ margin: 0.5em;
	+ }
	}
	</style>
	diff --git a/src/components/still-image/still-image-emoji-popover.vue b/src/components/still-image/still-image-emoji-popover.vue
	index 8588d5165d..8317c6a0c3 100644
	--- a/src/components/still-image/still-image-emoji-popover.vue
	+++ b/src/components/still-image/still-image-emoji-popover.vue
	@@ -1,189 +1,189 @@
	<template>
	<Popover
	ref="emojiPopover"
	trigger="click"
	placement="top"
	:bound-to="{ x: 'container' }"
	:offset="{ y: 10 }"
	@show="fetchEmojiPacksIfAdmin"
	>
	<template #trigger>
	<StillImage v-bind="$attrs" />
	</template>
	<template #content>
	<div class="emoji-popover">
	<h3>{{ $attrs.title }}</h3>

	<div class="emoji-popover-centered">
	<StillImage
	class="emoji"
	v-bind="$attrs"
	/>
	</div>

	<div v-if="isUserAdmin && !isLocal">
	<button
	class="button button-default btn emoji-popover-button"
	type="button"
	- @click="copyToLocalPack"
	:disabled="packName == ''"
	+ @click="copyToLocalPack"
	>
	{{ $t('admin_dash.emoji.copy_to_pack') }}
	</button>

	<SelectComponent
	v-model="packName"
	>
	<option
	value=""
	disabled
	hidden
	>
	{{ $t('admin_dash.emoji.emoji_pack') }}
	</option>
	<option
	v-for="(pack, listPackName) in knownLocalPacks"
	:key="listPackName"
	:label="listPackName"
	>
	{{ listPackName }}
	</option>
	</SelectComponent>
	</div>
	</div>
	</template>
	</Popover>
	</template>

	<script>
	import { assign } from 'lodash'

	import StillImage from './still-image.vue'
	import Popover from 'components/popover/popover.vue'
	import SelectComponent from 'components/select/select.vue'
	import { useInterfaceStore } from 'src/stores/interface'

	export default {
	components: { StillImage, Popover, SelectComponent },
	props: {
	shortcode: {
	type: String,
	required: true
	},
	isLocal: {
	type: Boolean,
	required: true
	}
	},
	data() {
	return {
	knownLocalPacks: { },
	packName: ""
	}
	},
	computed: {
	isUserAdmin () {
	return this.$store.state.users.currentUser.rights.admin
	}
	},
	methods: {
	displayError (msg) {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'admin_dash.emoji.error',
	messageArgs: [msg],
	level: 'error'
	})
	},
	copyToLocalPack() {
	this.$store.state.api.backendInteractor.addNewEmojiFile({
	packName: this.packName,
	file: this.$attrs.src,
	shortcode: this.shortcode,
	filename: ""
	}).then(resp => resp.json()).then(resp => {
	if (resp.error !== undefined) {
	this.displayError(resp.error)
	return
	}
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'admin_dash.emoji.copied_successfully',
	messageArgs: [this.shortcode, this.packName],
	level: 'success'
	})

	this.$refs.emojiPopover.hidePopover()
	this.packName = ''
	})
	},

	// Copied from emoji_tab.js
	loadPacksPaginated (listFunction) {
	const pageSize = 25
	const allPacks = {}

	return listFunction({ instance: this.$store.state.instance.server, page: 1, pageSize: 0 })
	.then(data => data.json())
	.then(data => {
	if (data.error !== undefined) { return Promise.reject(data.error) }

	let resultingPromise = Promise.resolve({})
	for (let i = 0; i < Math.ceil(data.count / pageSize); i++) {
	resultingPromise = resultingPromise.then(() => listFunction({ instance: this.$store.state.instance.server, page: i, pageSize })
	).then(data => data.json()).then(pageData => {
	if (pageData.error !== undefined) { return Promise.reject(pageData.error) }

	assign(allPacks, pageData.packs)
	})
	}

	return resultingPromise
	})
	.then(() => allPacks)
	.catch(data => {
	this.displayError(data)
	})
	},
	fetchEmojiPacksIfAdmin() {
	if (!this.isUserAdmin) return

	this.loadPacksPaginated(this.$store.state.api.backendInteractor.listEmojiPacks)
	.then(allPacks => {
	// Sort by key
	const sorted = Object.keys(allPacks).sort().reduce((acc, key) => {
	if (key.length === 0) return acc
	acc[key] = allPacks[key]
	return acc
	}, {})
	this.knownLocalPacks = sorted
	})
	}
	}
	}
	</script>

	<style>
	.emoji-popover {
	margin: 0 0.5em 0.5em;
	text-align: center;

	.emoji {
	width: 4.6em;
	height: 4.6em;
	}

	.emoji-popover-centered {
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.emoji-popover-button {
	width: 100%;
	margin-top: 0.5em;
	}

	.Select {
	width: 100%;
	}
	}
	</style>
	diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
	index 60413c5f43..b7274d86d6 100644
	--- a/src/components/tab_switcher/tab_switcher.scss
	+++ b/src/components/tab_switcher/tab_switcher.scss
	@@ -1,250 +1,250 @@
	/* stylelint-disable no-descending-specificity */
	.tab-switcher {
	display: flex;

	.tab-icon {
	margin: 0.2em auto;
	display: block;
	}

	&.top-tabs {
	flex-direction: column;

	> .tabs {
	width: 100%;
	overflow: auto hidden;
	padding-top: 5px;
	flex-direction: row;
	flex: 0 0 auto;

	&::after,
	&::before {
	content: "";
	flex: 1 1 auto;
	border-bottom: 1px solid;
	border-bottom-color: var(--border);
	}

	.tab-wrapper {
	height: 2em;

	&:not(.active)::after {
	left: 0;
	right: 0;
	bottom: 0;
	border-bottom: 1px solid;
	border-bottom-color: var(--border);
	}
	}

	.tab {
	width: 100%;
	min-width: 1px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	padding-bottom: 99px;
	margin-bottom: calc(6px - 99px);
	}
	}

	.contents.scrollable-tabs {
	flex-basis: 0;
	}
	}

	&.side-tabs {
	flex-direction: row;

	@media all and (width <= 800px) {
	overflow-x: auto;
	}

	> .contents {
	flex: 1 1 auto;
	}

	> .tabs {
	flex: 0 0 auto;
	overflow: hidden auto;
	flex-direction: column;

	&::after,
	&::before {
	flex-shrink: 0;
	flex-basis: 0.5em;
	content: "";
	border-right: 1px solid;
	border-right-color: var(--border);
	}

	&::after {
	flex-grow: 1;
	}

	&::before {
	flex-grow: 0;
	}

	.tab-wrapper {
	min-width: 10em;
	display: flex;
	flex-direction: column;

	@media all and (width <= 800px) {
	min-width: 4em;
	}

	&:not(.active)::after {
	top: 0;
	right: 0;
	bottom: 0;
	border-right: 1px solid;
	border-right-color: var(--border);
	}

	&::before {
	flex: 0 0 6px;
	content: "";
	border-right: 1px solid;
	border-right-color: var(--border);
	}

	&:last-child .tab {
	margin-bottom: 0;
	}
	}

	.tab {
	flex: 1;
	box-sizing: content-box;
	max-width: 9em;
	min-width: 1px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	padding-left: 1em;
	padding-right: calc(1em + 200px);
	margin-right: -200px;
	margin-left: 1em;

	&:not(.active) {
	margin-top: 0;
	margin-left: 1.5em;
	}

	@media all and (width <= 800px) {
	padding-left: 0.25em;
	padding-right: calc(0.25em + 200px);
	margin-right: calc(0.25em - 200px);
	margin-left: 0.25em;

	&:not(.active) {
	margin-top: 0;
	margin-left: 0.5em;
	}

	.text {
	display: none;
	}
	}
	}
	}
	}

	.contents {
	flex: 1 0 auto;
	min-height: 0;

	.hidden {
	display: none;
	}

	.full-height:not(.hidden) {
	height: 100%;
	display: flex;
	flex-direction: column;

	> *:not(.mobile-label) {
	flex: 1;
	}
	}

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

	.tab {
	user-select: none;
	color: var(--text);
	border: none;
	cursor: pointer;
	box-shadow: var(--shadow);
	font-size: 1em;
	font-family: var(--font);
	border-radius: var(--roundness);
	background-color: var(--background);
	position: relative;
	white-space: nowrap;
	padding: 6px 1em;

	&:not(.active) {
	z-index: 4;
	margin-top: 0.25em;

	&:hover {
	z-index: 6;
	}
	}

	&.active {
	background: transparent;
	z-index: 5;
	}

	img {
	- max-height: 26px;
	+ max-height: 1.9em;
	vertical-align: top;
	- margin-top: -5px;
	+ margin-top: -0.3em;
	}
	}

	.tabs {
	display: flex;
	position: relative;
	box-sizing: border-box;

	&::after,
	&::before {
	display: block;
	flex: 1 1 auto;
	}
	}

	.tab-wrapper {
	position: relative;
	display: flex;
	flex: 0 0 auto;

	&:not(.active) {
	&::after {
	content: "";
	position: absolute;
	z-index: 7;
	}
	}
	}

	.mobile-label {
	padding-left: 0.3em;
	padding-bottom: 0.25em;
	margin-top: 0.5em;
	margin-left: 0.2em;
	margin-bottom: 0.25em;
	border-bottom: 1px solid var(--border);

	@media all and (width >= 800px) {
	display: none;
	}
	}
	}
	/* stylelint-enable no-descending-specificity */
	diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
	index c0336d4072..d9e96d52dd 100644
	--- a/src/components/user_avatar/user_avatar.vue
	+++ b/src/components/user_avatar/user_avatar.vue
	@@ -1,92 +1,92 @@
	<template>
	<span
	class="Avatar"
	:class="{ '-compact': compact }"
	>
	<StillImage
	v-if="user"
	class="avatar"
	:alt="user.screen_name_ui"
	:title="user.screen_name_ui"
	:src="url ? url : imgSrc(user.profile_image_url_original)"
	:image-load-error="imageLoadError"
	:class="{ '-compact': compact, '-better-shadow': betterShadow }"
	/>
	<div
	v-else
	class="avatar -placeholder"
	:class="{ '-compact': compact }"
	/>
	<FAIcon
	v-if="showActorTypeIndicator && user?.actor_type === 'Service'"
	icon="robot"
	class="actor-type-indicator"
	/>
	<FAIcon
	v-if="showActorTypeIndicator && user?.actor_type === 'Group'"
	icon="people-group"
	class="actor-type-indicator"
	/>
	</span>
	</template>

	<script src="./user_avatar.js"></script>
	<style lang="scss">
	.Avatar {
	--_avatarShadowBox: var(--shadow);
	--_avatarShadowFilter: var(--shadowFilter);
	--_avatarShadowInset: var(--shadowInset);
	--_still-image-label-visibility: hidden;

	display: inline-block;
	position: relative;
	width: 3.5em;
	- height: 48px;
	+ height: 3.5em;

	&.-compact {
	width: 2.2em;
	height: 2.2em;
	border-radius: var(--roundness);
	}

	.avatar {
	width: 100%;
	height: 100%;
	box-shadow: var(--_avatarShadowBox);
	border-radius: var(--roundness);

	&.-better-shadow {
	box-shadow: var(--_avatarShadowInset);
	filter: var(--_avatarShadowFilter);
	}

	&.-animated::before {
	display: none;
	}

	&.-compact {
	border-radius: var(--roundness);
	}

	&.-placeholder {
	background-color: var(--background);
	}
	}

	img {
	width: 100%;
	height: 100%;
	}

	.actor-type-indicator {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: -0.2em;
	padding: 0.2em;
	background: rgb(127 127 127 / 50%);
	color: #fff;
	border-radius: var(--roundness);
	}
	}
	</style>
	diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
	index 4fdc73777b..60ed97c9a0 100644
	--- a/src/components/user_card/user_card.scss
	+++ b/src/components/user_card/user_card.scss
	@@ -1,589 +1,596 @@
	.user-card {
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-top-left-radius: calc(var(--roundness) - 1px);
	border-top-right-radius: calc(var(--roundness) - 1px);

	// editing headers
	h4 {
	line-height: 2;
	display: flex;
	}

	h3 {
	padding-left: 0.6em;
	margin-bottom: 0;

	.button-default {
	font-size: 1rem;
	line-height: 2;
	padding: 0 0.6em;
	}
	}

	.input.bio {
	height: auto; // override settings default textarea size
	}

	.user-card-inner {
	padding-bottom: 0;
	}

	&-setting,
	&-bio {
	color: var(--lightText);
	display: block;
	line-height: 1.3;
	padding: 0 0.6em;

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

	.user-card-setting {
	margin-left: 0.6em;
	margin-right: 0.6em;
	}

	.user-card-bio {
	text-align: center;
	margin: 0 0.6em;

	&.input {
	margin: 0 1em;

	textarea {
	text-align: inherit;
	}
	}

	&, * {
	line-height: 1.5;
	}

	&.-justify-left {
	text-align: start;
	}
	}

	&:hover {
	--_still-image-img-visibility: visible;
	--_still-image-canvas-visibility: hidden;
	--_still-image-label-visibility: hidden;
	}

	.personal-marks {
	margin: 0.6em;
	padding: 0.6em;

	&:not(:last-child) {
	border-bottom: 1px solid var(--border);
	}

	.highlighter {
	h4 {
	margin-top: 0.6em;
	}

	.userHighlightSel {
	vertical-align: bottom;
	margin-left: -0.1em;

	&.-none select {
	color: var(--textFaint);

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

	.highlighter-color {
	vertical-align: bottom;
	margin-left: 0.6em;
	}
	}
	}

	.header-overlay {
	position: absolute;
	inset: 0;
	right: -1.2em;
	left: -1.2em;
	top: -1.4em;
	mask: linear-gradient(to top, transparent 0, white 5em) bottom no-repeat;
	}

	.banner-overlay,
	.banner-image {
	position: absolute;
	inset: 0;
	padding: 0;
	border-top-left-radius: calc(var(--roundness) - 1px);
	border-top-right-radius: calc(var(--roundness) - 1px);
	}

	.banner-image {
	z-index: -2;

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

	.banner-overlay {
	background-color: var(--profileTint);
	opacity: 0.5;
	pointer-events: none; // let user copy bg url
	z-index: -1;
	}

	.bottom-buttons {
	display: flex;
	gap: 0.5em;
	}
	}

	.user-info {
	position: relative;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 1em;

	.user-identity {
	position: relative;
	aspect-ratio: 3;
	min-height: 6em;
	display: flex;
	align-items: flex-end;
	container: user-card / inline-size;

	> * {
	min-width: 0;
	}

	> a {
	vertical-align: middle;
	display: flex;
	}

	.Avatar {
	--_avatarShadowBox: var(--avatarShadow);
	--_avatarShadowFilter: var(--avatarShadowFilter);
	--_avatarShadowInset: var(--avatarShadowInset);

	width: 7em;
	width: calc(min(7em, 20cqw));
	height: 7em;
	height: calc(min(7em, 20cqw));
	object-fit: cover;
	}
	}

	.other-actions {
	position: relative;
	display: inline-grid;
	grid-auto-flow: column;
	grid-gap: 0.6em;
	font-size: 1.25rem;
	z-index: 2;
	align-self: end;

	a, button, div {
	text-align: center;
	width: 2em;
	height: 2em;
	line-height: 2em;
	padding: 0.6em;
	margin: -0.6em;

	- &.save-profile-button,
	- &.reset-profile-button,
	&.edit-banner-button {
	width: auto;
	}

	&:hover .icon {
	color: var(--textFaint);
	}

	&:not(:hover) .icon {
	color: var(--lightText);
	}
	}
	}

	&-avatar {
	position: relative;
	cursor: pointer;
	margin-right: 0.6em;

	&.-overlay {
	position: absolute;
	inset: -0.6em;
	left: -0.6em;
	right: -1.2em;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--roundness);
	opacity: 0;
	transition: opacity 0.2s ease;

	svg {
	color: #fff;
	margin: 0.5em;
	}
	}

	&:hover &.-overlay {
	opacity: 1;
	background-color: rgb(0 0 0 / 30%);
	}
	}

	.user-info-avatar.-editable {
	.-overlay {
	opacity: 1;
	place-items: start end;
	justify-content: end;
	}
	}

	.user-summary {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	margin-left: 0.6em;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1 1 0;
	// This is so that text doesn't get overlapped by avatar's shadow if it has
	// big one
	z-index: 1;
	line-height: 2em;
	+ filter: drop-shadow(0 0 5em var(--profileTint))
	+ drop-shadow(0 0 0.5em var(--profileTint))
	+ drop-shadow(0 0 0.2em var(--profileTint));
	+
	+ .alert {
	+ text-shadow: none;
	+ }
	+

	--emoji-size: 1.7em;

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

	.name-wrapper {
	display: flex;
	align-items: baseline;

	.edit-button {
	width: 3em;
	text-align: center;

	&:hover .icon {
	color: var(--textFaint);
	}

	&:not(:hover) .icon {
	color: var(--lightText);
	}
	}

	.input,
	.user-name {
	flex: 1;
	font-weight: 600;
	line-height: 2;
	margin-right: 1em;
	text-overflow: ellipsis;
	overflow: hidden;
	}

	.input {
	margin: 0 -0.5em;
	padding: 0 0.5em;
	}
	}

	.top-line {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
	// these two normalize position and height when custom emoji are used
	line-height: 2;
	margin-bottom: -0.2em;
	font-size: calc(max(110%, 4cqw));
	}

	.bottom-line {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	white-space: normal;
	font-weight: 500;
	font-size: 0.9em;
	font-size: calc(max(90%, 2.5cqw));
	line-height: 1.5;
	+ margin-top: 0.5em;
	}

	.lock-icon {
	display: inline-block;
	vertical-align: baseline;
	overflow-x: hidden;
	margin: 0 0.35em 0 0.5em;
	}

	.user-screen-name {
	color: var(--text);
	text-overflow: ellipsis;
	overflow: hidden;
	display: inline-block;
	}

	.user-role {
	display: inline-block;
	vertical-align: baseline;
	}
	}

	.user-interactions {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;

	> * {
	flex: 0 0 8em;
	}

	.popover-trigger-button, .moderation-tools-button {
	width: 100%;
	}

	> .btn-group, > button {
	white-space: nowrap;
	}
	}
	}

	.sidebar .edit-profile-button {
	display: none;
	}

	.user-extras {
	padding: 1.2em 0.6em;
	line-height: 1.5;

	.user-stats {
	display: block;
	text-align: center;
	word-wrap: break-word;
	width: 100%;

	dl {
	display: inline;
	margin-right: 1em;
	white-space: nowrap;
	}

	dd {
	font-weight: bolder;
	text-overflow: ellipsis;
	overflow: hidden;
	margin: 0;
	}

	dd, dt {
	display: inline
	}

	/* stylelint-disable-next-line no-descending-specificity */
	a {
	text-decoration: none;
	}
	}

	.birthday {
	width: 100%;
	text-align: center;
	white-space: nowrap;

	--icon: var(--text);
	}
	}

	.user-profile-fields {
	margin: 0 0.5em;
	padding: 0 0.5em;
	display: flex;
	flex-direction: column;

	--emoji-size: 1.8em;

	.user-profile-field-add,
	.user-profile-field {
	display: flex;
	align-items: center;
	margin: 0.25em;
	border: 1px solid var(--border);
	border-radius: var(--roundness);
	line-height: 2em;

	.label {
	margin-left: 0.5em;
	}
	}

	.user-profile-field-add {
	justify-content: center;
	margin: 0.25em;
	}

	.user-profile-field {

	/* stylelint-disable no-descending-specificity */
	// input is a generic class
	.input {
	text-align: inherit;
	flex: 1;
	}
	/* stylelint-enable no-descending-specificity */

	.delete-field {
	display: inline-block;
	text-align: center;
	width: 2em;
	}

	.user-profile-field-name,
	.user-profile-field-value,
	.user-profile-field-add {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	box-sizing: border-box;
	display: inline-flex;

	&.-edit {
	padding: 0;

	input {
	font-weight: inherit;
	}
	}
	}

	.user-profile-field-name {
	flex: 0 1 50%;
	font-weight: 600;
	text-align: right;
	justify-content: end;
	color: var(--lightText);
	min-width: 9em;
	border-right: 1px solid var(--border);
	padding-left: 1.2em;
	padding-right: 0.6em;
	}

	.user-profile-field-value {
	flex: 1 1 55%;
	color: var(--text);
	padding-left: 0.6em;
	margin: 0;
	}
	}
	}

	.edit-image {
	.panel-body {
	text-align: center;
	display: flex;
	flex-direction: column;
	}

	.current-avatar {
	object-fit: contain;
	}

	.image-container {
	display: flex;
	align-self: center;
	margin: 0 0 1em;
	max-height: 30em;
	max-width: 100%;
	flex: 1 0 20em;
	aspect-ratio: 1;
	gap: 0.5em;

	&.-banner {
	aspect-ratio: 3;
	max-width: 100%;
	}

	.new-image {
	display: flex;
	flex-direction: column;
	}

	.cropper {
	flex: 1;
	overflow-x: auto;
	}

	> * {
	flex: 1 0 10em;
	max-height: 100%;
	aspect-ratio: 1;
	}

	.separator {
	min-width: 1.1em;
	font-size: 500%;
	align-self: center;
	flex: 0 1 5em;
	aspect-ratio: unset;
	}
	}

	&.-banner {
	.images-container {
	grid-template-rows: 20em 5em 20em;
	grid-template-columns: 1fr;

	> * {
	flex: 1 0 10em;
	width: 100%;
	aspect-ratio: 3;
	}
	}

	.separator {
	min-height: 1.1em;
	font-size: 500%;
	justify-self: center;
	flex: 0 1 5em;
	aspect-ratio: unset;
	}
	}

	#modal.-mobile & {
	#pick-image {
	height: 3em;
	}

	.image-container {
	&.-banner {
	max-height: 10em;
	}
	}
	}
	}
	diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
	index 0e93824b72..aa5704a975 100644
	--- a/src/components/user_reporting_modal/user_reporting_modal.vue
	+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
	@@ -1,170 +1,177 @@
	<template>
	<Modal
	v-if="isOpen"
	@backdrop-clicked="closeModal"
	>
	<div class="user-reporting-panel panel">
	<div class="panel-heading">
	<i18n-t
	tag="h1"
	keypath="user_reporting.title"
	class="title"
	>
	- <UserLink :user="user" />
	+ <UserLink
	+ class="user-link"
	+ :user="user"
	+ />
	</i18n-t>
	</div>
	<div class="panel-body">
	<div class="user-reporting-panel-left">
	<div>
	<p>{{ $t('user_reporting.add_comment_description') }}</p>
	<textarea
	v-model="comment"
	class="input form-control"
	:placeholder="$t('user_reporting.additional_comments')"
	rows="1"
	@input="resize"
	/>
	</div>
	<div v-if="!user.is_local">
	<p>{{ $t('user_reporting.forward_description') }}</p>
	<Checkbox v-model="forward">
	{{ $t('user_reporting.forward_to', [remoteInstance]) }}
	</Checkbox>
	</div>
	<div>
	<button
	class="btn button-default"
	:disabled="processing"
	@click="reportUser"
	>
	{{ $t('user_reporting.submit') }}
	</button>
	<div
	v-if="error"
	class="alert error"
	>
	{{ $t('user_reporting.generic_error') }}
	</div>
	</div>
	</div>
	<div class="user-reporting-panel-right">
	<List :items="statuses">
	<template #item="{item}">
	<div class="status-fadein user-reporting-panel-sitem">
	<Status
	:in-conversation="false"
	:focused="false"
	:statusoid="item"
	/>
	<Checkbox
	:model-value="isChecked(item.id)"
	@update:model-value="checked => toggleStatus(checked, item.id)"
	/>
	</div>
	</template>
	</List>
	</div>
	</div>
	</div>
	</Modal>
	</template>

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

	<style lang="scss">
	.user-reporting-panel {
	width: 90vw;
	- max-width: 700px;
	+ max-width: 50rem;
	min-height: 20vh;
	max-height: 80vh;

	+ .user-link {
	+ display: inline
	+ }
	+
	.panel-body {
	display: flex;
	flex-direction: column-reverse;
	border-top: 1px solid;
	border-color: var(--border);
	overflow: hidden;
	}

	&-left {
	padding: 1.1em 0.7em 0.7em;
	line-height: var(--post-line-height);
	box-sizing: border-box;

	> div {
	margin-bottom: 1em;

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

	p {
	margin-top: 0;
	}

	textarea.form-control {
	- line-height: 16px;
	+ line-height: 1.1;
	resize: none;
	overflow: hidden;
	transition: min-height 200ms 100ms;
	min-height: 44px;
	width: 100%;
	}

	.btn {
	min-width: 10em;
	padding: 0 2em;
	}

	.alert {
	margin: 1em 0 0;
	line-height: 1.3em;
	}
	}

	&-right {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	}

	&-sitem {
	display: flex;
	justify-content: space-between;

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

	> .checkbox {
	margin: 0.75em;
	}
	}

	@media all and (width >= 801px) {
	.panel-body {
	flex-direction: row;
	}

	&-left {
	width: 50%;
	max-width: 320px;
	border-right: 1px solid;
	border-color: var(--border);
	padding: 1.1em;

	> div {
	margin-bottom: 2em;
	}
	}

	&-right {
	width: 50%;
	flex: 1 1 auto;
	margin-bottom: 12px;
	}
	}
	}
	</style>
	diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss
	index 524e4012f3..6b007ac2e1 100644
	--- a/src/hocs/with_load_more/with_load_more.scss
	+++ b/src/hocs/with_load_more/with_load_more.scss
	@@ -1,16 +1,16 @@
	.with-load-more {
	&-footer {
	- padding: 10px;
	+ padding: 0.9em;
	text-align: center;
	border-top: 1px solid;
	border-top-color: var(--border);

	.error {
	font-size: 1rem;
	}

	a {
	cursor: pointer;
	}
	}
	}
	diff --git a/src/hocs/with_subscription/with_subscription.scss b/src/hocs/with_subscription/with_subscription.scss
	index 996045b439..8c0af336c6 100644
	--- a/src/hocs/with_subscription/with_subscription.scss
	+++ b/src/hocs/with_subscription/with_subscription.scss
	@@ -1,10 +1,10 @@
	.with-subscription {
	&-loading {
	- padding: 10px;
	+ padding: 0.7em;
	text-align: center;

	.error {
	font-size: 1rem;
	}
	}
	}
	diff --git a/src/main.js b/src/main.js
	index 4654679b81..1cd1afe6c7 100644
	--- a/src/main.js
	+++ b/src/main.js
	@@ -1,108 +1,109 @@
	/* global process */
	import { createStore } from 'vuex'
	import { createPinia } from 'pinia'

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

	// Polyfill for Array.prototype.toSorted (ES2023)
	if (!Array.prototype.toSorted) {
	Array.prototype.toSorted = function(compareFn) {
	return [...this].sort(compareFn)
	}
	}

	import vuexModules from './modules/index.js'

	import { createI18n } from 'vue-i18n'

	import createPersistedState, { piniaPersistPlugin } 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]
	const pinia = createPinia()
	pinia.use(piniaPersistPlugin())

	try {
	const persistedState = await createPersistedState(persistedStateOptions)
	plugins.push(persistedState)
	} catch (e) {
	console.error('Storage error', e)
	storageError = e
	}
	+ document.querySelector('#splash').classList.remove('initial-hidden')
	document.querySelector('#mascot').src = `/static/pleromatan_apology${isFox}_small.webp`
	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: vuexModules,
	plugins,
	options: {
	devtools: process.env.NODE_ENV !== 'production'
	},
	strict: false // Socket modifies itself, let's ignore this for now.
	// strict: process.env.NODE_ENV !== 'production'
	})
	window.vuex = store
	// Temporarily passing pinia and vuex stores along with storageError result until migration is fully complete.
	return await afterStoreSetup({ pinia, store, storageError, 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/instance.js b/src/modules/instance.js
	index 93f81e4d82..7317debf81 100644
	--- a/src/modules/instance.js
	+++ b/src/modules/instance.js
	@@ -1,420 +1,420 @@
	import apiService from '../services/api/api.service.js'
	import { instanceDefaultProperties } from './config.js'
	import { ensureFinalFallback } from '../i18n/languages.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	// See build/emojis_plugin for more details
	import { annotationsLoader } from 'virtual:pleroma-fe/emoji-annotations'

	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',
	embeddedToS: true,
	collapseMessageWithSubject: false,
	greentext: 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,
	modalOnMuteConversation: false,
	modalOnMuteDomain: true,
	modalOnDelete: true,
	modalOnLogout: true,
	modalOnApproveFollow: false,
	modalOnDenyFollow: false,
	modalOnRemoveUserFromFollowers: false,
	modalMobileCenter: 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',
	+ textSize: '1rem',
	emojiSize: '2.2rem',
	navbarSize: '3.5rem',
	panelHeaderSize: '3.2rem',
	themeEditorMinWidth: '0rem',
	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',
	absoluteTime12h: '24h',

	// Nasty stuff
	customEmoji: [],
	customEmojiFetched: false,
	emoji: {},
	emojiFetched: false,
	unicodeEmojiAnnotations: {},
	pleromaExtensionsAvailable: 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,
	pleromaPublicFavouritesAvailable: true,
	statusNotificationTypeAvailable: true,
	gopherAvailable: false,
	mediaProxyAvailable: false,
	suggestionsEnabled: false,
	suggestionsWeb: '',
	quotingAvailable: false,
	groupActorAvailable: false,
	blockExpiration: false,
	localBubbleInstances: [], // Akkoma

	// 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 annotationsLoader[lang]()
	.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':
	useInterfaceStore().setPageTitle()
	break
	case 'shoutAvailable':
	if (value) {
	dispatch('initializeSocket')
	}
	break
	}
	},
	async getStaticEmoji ({ commit }) {
	try {
	const values = (await import('/src/assets/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\n", 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 {
	let res = await window.fetch('/api/v1/pleroma/emoji')
	if (!res.ok) {
	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\n", 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\n", e)
	}
	}
	}
	}

	export default instance

File Metadata

Mime Type: text/x-diff
Expires: Sat, Aug 29, 4:47 PM (1 d, 15 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1737194
Default Alt Text: (256 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions