No OneTemporary
Actions

Size

188 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.scss b/src/App.scss
	index 1b281fe465..e363a29288 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,1101 +1,1098 @@
	@use "panel";

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

	// stylelint-disable rscss/class-format
	/* stylelint-disable no-descending-specificity */

	: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, 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(--icon) 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(--icon) var(--wallpaper);
	background: var(--wallpaper);
	}
	}

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

	h4 {
	margin: 0;
	}

	code {
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: var(--roundness);
	padding: 0 0.2em;

	& pre,
	pre & {
	display: block;
	overflow-x: auto;
	padding: 0.2em;
	}

	&.pre {
	white-space: pre;
	display: block;
	}
	}

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

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

	header {
	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%;
	transition: background-image 1s;
	}

	.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%;
	text-align: initial;
	padding: 0;
	background: none;
	border: none;
	outline: none;
	display: inline;
	font-family: inherit;
	line-height: unset;
	}

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

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

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

	label {
	&.-disabled {
	color: var(--textFaint);
	}
	}

	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;
	color: var(--textFaint);

	/* stylelint-disable-next-line declaration-no-important */
	background-color: transparent !important;
	}

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

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

	+ 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: repeat(auto-fit, minmax(20em, 1fr));
	gap: 0.5em;

	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 {
	+ > .button-default {
	--_roundness-left: 0;
	--_roundness-right: 0;

	position: relative;
	- }

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

	- > *:last-child,
	- > *:last-child .button-default {
	- --_roundness-right: var(--roundness);
	+ &:last-child {
	+ --_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: 0.6em;
	max-height: 0.6em;
	min-width: 0.6em;
	max-width: 0.6em;
	left: calc(50% + 0.5em);
	top: calc(50% - 1em);
	line-height: 0;
	padding: 0;
	margin: 0;
	}

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

	&.-dismissible {
	display: flex;
	padding-left: 0.5em;
	margin: 0;
	align-items: baseline;
	line-height: 2;

	span {
	display: block;
	flex: 1 0 auto;
	}
	}
	}

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

	color: var(--text);
	}

	.notice-dismissible {
	display: flex;
	padding: 0.75em 1em;
	align-items: baseline;
	line-height: 1.5;

	p,
	span {
	display: block;
	flex: 1 1 auto;
	margin: 0;
	}

	.dismiss {
	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;
	/* stylelint-disable property-no-deprecated */
	clip: rect(0 0 0 0);
	/* stylelint-enable property-no-deprecated */
	padding: 0;
	position: absolute;
	}

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

	#splash {
	pointer-events: none;

	#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/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
	index 91138aa134..9c3d64909e 100644
	--- a/src/components/account_actions/account_actions.vue
	+++ b/src/components/account_actions/account_actions.vue
	@@ -1,165 +1,165 @@
	<template>
	<div
	class="AccountActions"
	role="presentation"
	>
	<Popover
	trigger="click"
	placement="bottom"
	remove-padding
	- :trigger-attrs="{ 'aria-label': $t('user_card.other'), role: 'menuitem' }"
	+ :aria-label="$t('user_card.other')"
	>
	<template #content>
	<div role="menu" class="dropdown-menu">
	<template v-if="relationship.following">
	<div
	v-if="relationship.showing_reblogs"
	class="menu-item dropdown-item"
	role="menuitem"
	>
	<button
	class="main-button"
	@click="hideRepeats"
	>
	{{ $t('user_card.hide_repeats') }}
	</button>
	</div>
	<div
	v-if="!relationship.showing_reblogs"
	class="menu-item dropdown-item"
	role="menuitem"
	>
	<button
	class="main-button"
	@click="showRepeats"
	>
	{{ $t('user_card.show_repeats') }}
	</button>
	</div>
	<hr
	role="separator"
	class="dropdown-divider"
	/>
	</template>
	<UserListMenu :user="user" />
	<div
	v-if="relationship.followed_by"
	class="menu-item dropdown-item"
	role="menuitem"
	>
	<button
	class="main-button"
	@click="removeUserFromFollowers"
	>
	{{ $t('user_card.remove_follower') }}
	</button>
	</div>
	<div
	class="menu-item dropdown-item"
	role="menuitem"
	>
	<button
	v-if="relationship.blocking"
	class="main-button"
	@click="unblockUser"
	>
	{{ $t('user_card.unblock') }}
	</button>
	<button
	v-else
	class="main-button"
	@click="blockUser"
	>
	{{ $t('user_card.block') }}
	</button>
	</div>
	<div
	class="menu-item dropdown-item"
	role="menuitem"
	>
	<button
	class="main-button"
	@click="reportUser"
	>
	{{ $t('user_card.report') }}
	</button>
	</div>
	<div
	v-if="pleromaChatMessagesAvailable"
	class="menu-item dropdown-item"
	role="menuitem"
	>
	<button
	class="main-button"
	@click="openChat"
	>
	{{ $t('user_card.message') }}
	</button>
	</div>
	</div>
	</template>
	<template #trigger>
	<FAIcon
	class="icon"
	icon="ellipsis-v"
	/>
	</template>
	</Popover>
	<teleport to="#modal">
	<ConfirmModal
	v-if="showingConfirmBlock && !blockExpiration"
	ref="blockDialog"
	:title="$t('user_card.block_confirm_title')"
	:confirm-text="$t('user_card.block_confirm_accept_button')"
	:cancel-text="$t('user_card.block_confirm_cancel_button')"
	@accepted="doBlockUser"
	@cancelled="hideConfirmBlock"
	>
	<i18n-t
	keypath="user_card.block_confirm"
	tag="span"
	scope="global"
	>
	<template #user>
	<span
	v-text="user.screen_name_ui"
	/>
	</template>
	</i18n-t>
	</ConfirmModal>
	</teleport>
	<teleport to="#modal">
	<ConfirmModal
	v-if="showingConfirmRemoveFollower"
	:title="$t('user_card.remove_follower_confirm_title')"
	:confirm-text="$t('user_card.remove_follower_confirm_accept_button')"
	:cancel-text="$t('user_card.remove_follower_confirm_cancel_button')"
	@accepted="doRemoveUserFromFollowers"
	@cancelled="hideConfirmRemoveUserFromFollowers"
	>
	<i18n-t
	keypath="user_card.remove_follower_confirm"
	tag="span"
	scope="global"
	>
	<template #user>
	<span
	v-text="user.screen_name_ui"
	/>
	</template>
	</i18n-t>
	</ConfirmModal>
	<UserTimedFilterModal
	v-if="blockExpiration"
	ref="timedBlockDialog"
	:is-mute="false"
	:user="user"
	/>
	</teleport>
	</div>
	</template>

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

	<style lang="scss">
	</style>
	diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
	index b3803d9393..db6ce06b62 100644
	--- a/src/components/attachment/attachment.vue
	+++ b/src/components/attachment/attachment.vue
	@@ -1,269 +1,263 @@
	<template>
	<button
	v-if="usePlaceholder"
	class="Attachment -placeholder button-default"
	:class="classNames"
	@click="openModal"
	>
	<a
	v-if="attachment.type !== 'html'"
	class="placeholder"
	target="_blank"
	:href="attachment.url"
	:alt="attachment.description"
	:title="attachment.description"
	@click.prevent
	>
	<FAIcon :icon="placeholderIconClass" />
	<b>{{ nsfw ? "NSFW / " : "" }}</b>{{ edit ? '' : placeholderName }}
	</a>
	<div
	v-if="edit \|\| remove"
	class="attachment-buttons"
	- role="menubar"
	+ role="toolbar"
	:aria-label="$t('status.attachment_actions')"
	>
	<button
	v-if="remove"
	class="button-default attachment-button -transparent"
	@click.prevent="onRemove"
	- role="menuitem"
	:title="$t('status.remove_attachment')"
	>
	<FAIcon icon="trash-alt" />
	</button>
	</div>
	<div
	v-if="size !== 'hide' && !hideDescription && edit"
	class="description-container"
	:class="{ '-static': !edit }"
	>
	<textarea
	v-model="localDescription"
	type="text"
	class="input description-field"
	:placeholder="$t('post_status.media_description')"
	:aria-label="$t('post_status.media_description')"
	/>
	</div>
	</button>
	<div
	v-else
	class="Attachment"
	:class="classNames"
	>
	<div
	v-show="!isEmpty"
	class="attachment-wrapper"
	role="presentation"
	>
	<a
	v-if="hidden"
	class="image-container"
	:href="attachment.url"
	:alt="attachment.description"
	:title="attachment.description"
	@click.prevent.stop="toggleHidden"
	>
	<img
	:key="nsfwImage"
	class="nsfw"
	:src="nsfwImage"
	:alt="$t('status.nsfw_placeholder')"
	:title="$t('status.nsfw_placeholder')"
	>
	<FAIcon
	v-if="attachment.type === 'video'"
	class="play-icon"
	icon="play-circle"
	/>
	</a>
	<div
	v-if="!hidden"
	class="attachment-buttons"
	- role="menubar"
	+ role="toolbar"
	:aria-label="$t('status.attachment_actions')"
	>
	<button
	v-if="attachment.type === 'flash' && flashLoaded"
	class="button-default attachment-button -transparent"
	:title="$t('status.attachment_stop_flash')"
	@click.prevent="stopFlash"
	- role="menuitem"
	>
	<FAIcon icon="stop" />
	</button>
	<Popover
	v-if="attachment.description && size !== 'small' && !edit && attachment.type !== 'unknown'"
	trigger="click"
	popover-class="popover popover-default description-popover"
	normal-button
	- :trigger-attrs="{ class: 'attachment-button -transparent', title: $t('status.attachment_description'), role: 'menuitem' }"
	+ class="attachment-button -transparent"
	+ :title="$t('status.attachment_description')"
	>
	<template #trigger>
	<FAIcon icon="align-right" />
	</template>
	<template #content>
	<details open>
	<summary>{{ $t('status.attachment_description') }}</summary>
	<span>{{ localDescription }}</span>
	</details>
	</template>
	</Popover>
	<button
	v-if="!useModal && attachment.type !== 'unknown'"
	class="button-default attachment-button -transparent"
	:title="$t('status.show_attachment_in_modal')"
	- role="menuitem"
	aria-haspopup="dialog"
	@click.prevent="openModalForce"
	>
	<FAIcon icon="search-plus" />
	</button>
	<button
	v-if="nsfw && hideNsfwLocal"
	class="button-default attachment-button -transparent"
	:title="$t('status.hide_attachment')"
	- role="menuitem"
	@click.prevent="toggleHidden"
	>
	<FAIcon icon="times" />
	</button>
	<button
	v-if="shiftUp"
	class="button-default attachment-button -transparent"
	:title="$t('status.move_up')"
	- role="menuitem"
	@click.prevent="onShiftUp"
	>
	<FAIcon icon="chevron-left" />
	</button>
	<button
	v-if="shiftDn"
	class="button-default attachment-button -transparent"
	:title="$t('status.move_down')"
	- role="menuitem"
	@click.prevent="onShiftDn"
	>
	<FAIcon icon="chevron-right" />
	</button>
	<button
	v-if="remove"
	class="button-default attachment-button -transparent"
	:title="$t('status.remove_attachment')"
	- role="menuitem"
	@click.prevent="onRemove"
	>
	<FAIcon icon="trash-alt" />
	</button>
	</div>

	<a
	v-if="attachment.type === 'image' && (!hidden \|\| preloadImage)"
	class="image-container"
	:class="{'-hidden': hidden && preloadImage }"
	:href="attachment.url"
	target="_blank"
	@click.stop.prevent="openModal"
	aria-haspopup="dialog"
	>
	<StillImage
	class="image"
	:referrerpolicy="referrerpolicy"
	:mimetype="attachment.mimetype"
	:src="attachment.large_thumb_url \|\| attachment.url"
	:image-load-handler="onImageLoad"
	:alt="attachment.description \|\| $t('status.attachment')"
	/>
	</a>

	<a
	v-if="attachment.type === 'unknown' && !hidden"
	class="placeholder-container"
	:href="attachment.url"
	target="_blank"
	>
	<FAIcon
	:size="compact ? '2x' : '5x'"
	:icon="placeholderIconClass"
	:title="localDescription \|\| $t('status.attachment')"
	/>
	<p v-if="!compact">
	{{ localDescription \|\| $t('status.attachment') }}
	</p>
	</a>

	<component
	:is="videoTag"
	v-if="attachment.type === 'video' && !hidden"
	class="video-container"
	:title="videoTag === 'button' ? $t('status.show_attachment_in_modal') : undefined"
	:href="attachment.url"
	@click.stop.prevent="openModal"
	:aria-haspopup="videoTag === 'button' ? 'dialog' : 'false'"
	>
	<VideoAttachment
	class="video"
	:attachment="attachment"
	:controls="!useModal"
	@play="$emit('play')"
	@pause="$emit('pause')"
	/>
	<FAIcon
	v-if="useModal"
	class="play-icon"
	icon="play-circle"
	/>
	</component>

	<span
	v-if="attachment.type === 'audio' && !hidden"
	class="audio-container"
	:href="attachment.url"
	@click.stop.prevent="openModal"
	>
	<audio
	v-if="attachment.type === 'audio'"
	:src="attachment.url"
	:alt="attachment.description"
	:title="attachment.description"
	controls
	@play="$emit('play')"
	@pause="$emit('pause')"
	/>
	</span>

	<span
	v-if="attachment.type === 'flash' && !hidden"
	class="flash-container"
	:href="attachment.url"
	@click.stop.prevent="openModal"
	>
	<Flash
	ref="flash"
	class="flash"
	:src="attachment.large_thumb_url \|\| attachment.url"
	@player-opened="setFlashLoaded(true)"
	@player-closed="setFlashLoaded(false)"
	/>
	</span>
	</div>
	<div
	v-if="size !== 'hide' && !hideDescription && edit"
	class="description-container"
	:class="{ '-static': !edit }"
	>
	<textarea
	v-model="localDescription"
	type="text"
	class="input description-field"
	:placeholder="$t('post_status.media_description')"
	:aria-label="$t('post_status.media_description')"
	/>
	</div>
	</div>
	</template>

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

	<style src="./attachment.scss" lang="scss"></style>
	diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
	index a60cd8ad5e..c3da1d9d92 100644
	--- a/src/components/chat_message/chat_message.vue
	+++ b/src/components/chat_message/chat_message.vue
	@@ -1,256 +1,257 @@
	<template>
	<div
	v-if="isMessage"
	ref="root"
	:id="`chatmessage-${message.id}`"
	class="chat-message-wrapper"
	:class="[classnames, { 'hovered-message-chain': hoveredMessageChain }]"
	@mouseover="onHover(true)"
	@mouseleave="onHover(false)"
	>
	<i18n-t
	v-if="isStatus && (isCustomReply \|\| isBrokenReply)"
	keypath="status.reply_to_with_arg"
	scope="global"
	tag="small"
	class="reply-to-header faint"
	>
	<template #replyToWithIcon>
	<div class="avatar-spacer" />
	<StatusPopover
	v-if="!isBrokenReply"
	:status-id="customReplyTo?.id"
	class="reply-to-popover"
	:class="{ '-strikethrough': !message.parent_visible }"
	>
	<i18n-t
	keypath="status.reply_to_with_icon"
	scope="global"
	>
	<template #icon>
	<FAIcon
	class="fa-scale-110"
	icon="reply"
	flip="horizontal"
	/>
	</template>
	<template #replyTo>
	<span class="reply-label">
	{{ $t('status.reply_to') }}
	</span>
	</template>
	</i18n-t>
	</StatusPopover>
	<span
	v-else
	class="reply-label"
	>
	{{ $t('status.broken_reply') }}
	</span>
	</template>
	<template #user>
	<MentionLink
	class="reply-body"
	:content="replyToName"
	:url="replyProfileLink"
	:user-id="message.in_reply_to_user_id"
	:user-screen-name="message.in_reply_to_screen_name"
	/>
	<!-- v-if is there because status might not be loaded yet -->
	<template v-if="customReplyTo?.text.trim().length > 0">
	:
	<StatusBody
	class="reply-body faint"
	:status="customReplyTo"
	collapse
	single-line
	ignore-subject
	/>
	</template>
	</template>
	</i18n-t>
	<div
	class="chat-message"
	:class="classnames"
	>
	<div
	v-if="!isCurrentUser"
	class="avatar-wrapper"
	>
	<UserPopover
	v-if="chatItem.isHead"
	:user-id="authorId"
	>
	<UserAvatar
	v-if="author"
	:compact="true"
	:user-id="author.id"
	/>
	</UserPopover>
	<div
	v-else
	class="avatar-spacer"
	/>
	</div>
	<div class="chat-message-inner">
	<div class="message-bubble-wrapper">
	<div
	class="status-body"
	:style="{ 'min-width': message.attachment ? '80%' : '' }"
	>
	<div
	class="media status"
	:class="{ 'without-attachment': !hasAttachment, 'pending': chatItem.data.pending, 'error': chatItem.data.error }"
	style="position: relative;"
	@mouseenter="hovered = true"
	@mouseleave="hovered = false"
	>
	<StatusActionButtons
	v-if="isStatus"
	class="chat-message-toolbar"
	:class="{ '-visible': hovered \|\| menuOpened }"
	:status="message"
	:pinned="new Set(['reply', 'emoji'])"
	fixed-pinned
	use-default-buttons
	hide-labels
	in-chat-view
	@toggle-replying="$emit('replyRequested', message)"
	/>
	<div
	v-else
	class="chat-message-toolbar"
	:class="{ '-visible': hovered \|\| menuOpened }"
	>
	<Popover
	trigger="click"
	- :trigger-attrs="{ 'class': 'button-default menu-icon simple-button', title: $t('chats.more') }"
	+ class="button-default menu-icon simple-button"
	+ :title="$t('chats.more')"
	placement="top"
	:margin="popoverMarginStyle"
	@show="menuOpened = true"
	@close="menuOpened = false"
	>
	<template #content>
	<div class="dropdown-menu">
	<div class="menu-item dropdown-item -icon">
	<button
	class="main-button"
	@click="deleteMessage"
	>
	<FAIcon icon="times" /> {{ $t("chats.delete") }}
	</button>
	</div>
	</div>
	</template>
	<template #trigger>
	<FAIcon icon="ellipsis-h" />
	</template>
	</Popover>
	</div>
	<StatusContent
	class="message-content"
	:class="{ faint: message.pending }"
	:status="messageForStatusContent"
	:full-content="true"
	@mediaplay="addMediaPlaying($event)"
	@mediapause="removeMediaPlaying($event)"
	>
	<template #footer>
	<EmojiReactions
	v-if="isStatus"
	:status="message"
	/>
	<Quote
	v-if="isStatus"
	class="quoted-post"
	:status-id="quoteId"
	:status-url="quoteUrl"
	:status-visible="quoteVisible"
	initially-expanded
	/>
	<span
	class="created-at"
	>
	<span
	v-if="message.favorited"
	>
	<FAIcon
	class="fa-scale-110"
	icon="star"
	fixed-width
	/>
	</span>
	<span
	v-if="message.repeated"
	>
	<FAIcon
	class="fa-scale-110"
	icon="retweet"
	fixed-width
	/>
	</span>
	<span
	v-if="message.visibility"
	class="visibility-icon"
	:title="visibilityLocalized"
	>
	<FAIcon
	class="fa-scale-110"
	:icon="visibilityIcon(message.visibility)"
	fixed-width
	/>
	</span>
	<span
	v-if="message.pending"
	class="loading-spinner"
	>
	<FAIcon
	class="fa-old-padding"
	icon="circle-notch"
	spin
	/>
	</span>
	{{ ' ' }}
	<router-link
	class="timeago faint"
	:to="{ name: 'conversation2', params: { statusId: message.id } }"
	>
	<Timeago
	:time="message.created_at"
	:auto-update="60"
	/>
	</router-link>
	</span>
	</template>
	</StatusContent>
	</div>
	</div>
	<div
	v-if="isStatus && repliedTo"
	class="reply-indicator"
	>
	<FAIcon
	class="icon"
	icon="reply"
	/>
	</div>
	<div class="end-spacer" />
	</div>
	</div>
	</div>
	</div>
	<div
	v-else
	class="chat-message-date-separator"
	ref="root"
	>
	<ChatMessageDate
	:date="chatItem.date"
	:show-time="chatItem.isTime"
	/>
	</div>
	</template>

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

	<style src="./chat_message.scss" lang="scss" />
	diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue
	index e5a49f440c..b058112537 100644
	--- a/src/components/contrast_ratio/contrast_ratio.vue
	+++ b/src/components/contrast_ratio/contrast_ratio.vue
	@@ -1,160 +1,160 @@
	<template>
	<span
	v-if="contrast"
	class="contrast-ratio"
	>
	<span v-if="showRatio">
	{{ contrast.text }}
	</span>
	<Tooltip
	:text="hint"
	class="rating"
	- :trigger-attrs="{ 'aria-label': $t('settings.style.common.contrast.label') }"
	+ :aria-label="$t('settings.style.common.contrast.label')"
	>
	<span v-if="contrast.aaa">
	<FAIcon
	icon="thumbs-up"
	:size="showRatio ? 'lg' : ''"
	/>
	</span>
	<span v-if="!contrast.aaa && contrast.aa">
	<FAIcon
	icon="adjust"
	:size="showRatio ? 'lg' : ''"
	/>
	</span>
	<span v-if="!contrast.aaa && !contrast.aa">
	<FAIcon
	icon="exclamation-triangle"
	:size="showRatio ? 'lg' : ''"
	/>
	</span>
	</Tooltip>
	<Tooltip
	v-if="contrast && large"
	:text="hint_18pt"
	class="rating"
	- :trigger-attrs="{ 'aria-label': $t('settings.style.common.contrast.label') }"
	+ :aria-label="$t('settings.style.common.contrast.label')"
	>
	<span v-if="contrast.laaa">
	<FAIcon
	icon="thumbs-up"
	:size="showRatio ? 'large' : ''"
	/>
	</span>
	<span v-if="!contrast.laaa && contrast.laa">
	<FAIcon
	icon="adjust"
	:size="showRatio ? 'lg' : ''"
	/>
	</span>
	<span v-if="!contrast.laaa && !contrast.laa">
	<FAIcon
	icon="exclamation-triangle"
	:size="showRatio ? 'lg' : ''"
	/>
	</span>
	</Tooltip>
	</span>
	</template>

	<script>
	import Tooltip from 'src/components/tooltip/tooltip.vue'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faAdjust,
	faExclamationTriangle,
	faThumbsUp,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faAdjust, faExclamationTriangle, faThumbsUp)

	export default {
	components: {
	Tooltip,
	},
	props: {
	large: {
	required: false,
	type: Boolean,
	default: false,
	},
	// TODO: Make theme switcher compute theme initially so that contrast
	// component won't be called without contrast data
	contrast: {
	required: false,
	type: Object,
	default: () => ({
	/* no-op */
	}),
	},
	showRatio: {
	required: false,
	type: Boolean,
	default: false,
	},
	},
	computed: {
	hint() {
	const levelVal = (() => {
	if (this.contrast.aaa) {
	return 'aaa'
	} else if (this.contrast.aa) {
	return 'aa'
	} else {
	return 'bad'
	}
	})()
	const level = this.$t(`settings.style.common.contrast.level.${levelVal}`)
	const context = this.$t('settings.style.common.contrast.context.text')
	const ratio = this.contrast.text
	return this.$t('settings.style.common.contrast.hint', {
	level,
	context,
	ratio,
	})
	},
	hint_18pt() {
	const levelVal = (() => {
	if (this.contrast.laaa) {
	return 'aaa'
	} else if (this.contrast.laa) {
	return 'aa'
	} else {
	return 'bad'
	}
	})()
	const level = this.$t(`settings.style.common.contrast.level.${levelVal}`)
	const context = this.$t('settings.style.common.contrast.context.18pt')
	const ratio = this.contrast.text
	return this.$t('settings.style.common.contrast.hint', {
	level,
	context,
	ratio,
	})
	},
	},
	}
	</script>

	<style lang="scss">
	.contrast-ratio {
	display: flex;
	justify-content: flex-end;
	align-items: baseline;

	.label {
	margin-right: 1em;
	}

	.rating {
	display: inline-block;
	margin-left: 0.5em;

	button {
	padding: 0.25em;
	}
	}
	}
	</style>
	diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
	index 6bcad54309..f2d9650a34 100644
	--- a/src/components/emoji_input/emoji_input.vue
	+++ b/src/components/emoji_input/emoji_input.vue
	@@ -1,239 +1,235 @@
	<template>
	<div
	ref="root"
	class="input emoji-input"
	:class="{ '-with-picker': !hideEmojiButton, '-textarea': input?.tagName === 'TEXTAREA' }"
	>
	<slot
	:id="'textbox-' + uniqueId"
	:aria-owns="ariaOwns"
	aria-autocomplete="list"
	:aria-activedescendant="(!showSuggestions \|\| highlighted === -1) ? undefined : suggestionItemId(highlighted)"
	aria-haspopup="menu"
	/>
	<!-- TODO: make the 'x' disappear if at the end maybe? -->
	<div
	ref="hiddenOverlay"
	class="hidden-overlay"
	:style="overlayStyle"
	:aria-hidden="true"
	>
	<span>{{ preText }}</span>
	<span
	ref="hiddenOverlayCaret"
	class="caret"
	- >x</span>
	+ >
	+ x
	+ <Popover
	+ ref="suggestorPopover"
	+ class="autocomplete-panel"
	+ :aria-label="$t('general.suggestions')"
	+ placement="bottom"
	+ :hide-trigger="true"
	+ >
	+ <template #content>
	+ <div
	+ :id="suggestionListId"
	+ ref="panel-body"
	+ class="autocomplete-panel-body"
	+ role="menu"
	+ >
	+ <div
	+ v-for="(suggestion, index) in suggestions"
	+ :id="suggestionItemId(index)"
	+ :key="index"
	+ class="menu-item autocomplete-item"
	+ role="menuitemradio"
	+ :class="{ '-active': index === highlighted }"
	+ :aria-label="autoCompleteItemLabel(suggestion)"
	+ :aria-checked="index === highlighted"
	+ @click.stop.prevent="onClick($event, suggestion)"
	+ >
	+ <span class="image">
	+ <img
	+ v-if="suggestion.img"
	+ :src="suggestion.img"
	+ :alt="$t('emoji.emoji')"
	+ :title="$t('emoji.emoji')"
	+ >
	+ <span v-else>{{ suggestion.replacement }}</span>
	+ </span>
	+ <div class="label">
	+ <span
	+ v-if="suggestion.user"
	+ class="displayText"
	+ >
	+ {{ suggestion.displayText }}<UnicodeDomainIndicator
	+ :user="suggestion.user"
	+ :at="false"
	+ />
	+ </span>
	+ <span
	+ v-if="!suggestion.user"
	+ class="displayText"
	+ >
	+ {{ maybeLocalizedEmojiName(suggestion) }}
	+ </span>
	+ <span class="detailText">{{ suggestion.detailText }}</span>
	+ </div>
	+ </div>
	+ </div>
	+ </template>
	+ </Popover>
	+ <EmojiPicker
	+ v-if="enableEmojiPicker"
	+ :id="emojiPickerId"
	+ ref="picker"
	+ :enable-sticker-picker="enableStickerPicker"
	+ class="emoji-picker-panel"
	+ @emoji="insert"
	+ @sticker-uploaded="onStickerUploaded"
	+ @sticker-upload-failed="onStickerUploadFailed"
	+ @show="onPickerShown"
	+ @close="onPickerClosed"
	+ />
	+ </span>
	<span>{{ postText }}</span>
	</div>
	<screen-reader-notice
	ref="screenReaderNotice"
	aria-live="assertive"
	/>
	<template v-if="enableEmojiPicker">
	<button
	v-if="!hideEmojiButton"
	class="button-unstyled emoji-picker-icon"
	type="button"
	:title="$t('emoji.add_emoji')"
	@click.prevent="togglePicker"
	>
	<FAIcon :icon="['far', 'face-smile-beam']" />
	</button>
	- <EmojiPicker
	- v-if="enableEmojiPicker"
	- :id="emojiPickerId"
	- ref="picker"
	- :enable-sticker-picker="enableStickerPicker"
	- class="emoji-picker-panel"
	- @emoji="insert"
	- @sticker-uploaded="onStickerUploaded"
	- @sticker-upload-failed="onStickerUploadFailed"
	- @show="onPickerShown"
	- @close="onPickerClosed"
	- />
	</template>
	- <Popover
	- ref="suggestorPopover"
	- class="autocomplete-panel"
	- :aria-label="$t('general.suggestions')"
	- placement="bottom"
	- :hide-trigger="true"
	- >
	- <template #content>
	- <div
	- :id="suggestionListId"
	- ref="panel-body"
	- class="autocomplete-panel-body"
	- role="menu"
	- >
	- <div
	- v-for="(suggestion, index) in suggestions"
	- :id="suggestionItemId(index)"
	- :key="index"
	- class="menu-item autocomplete-item"
	- role="menuitemradio"
	- :class="{ '-active': index === highlighted }"
	- :aria-label="autoCompleteItemLabel(suggestion)"
	- :aria-checked="index === highlighted"
	- @click.stop.prevent="onClick($event, suggestion)"
	- >
	- <span class="image">
	- <img
	- v-if="suggestion.img"
	- :src="suggestion.img"
	- :alt="$t('emoji.emoji')"
	- :title="$t('emoji.emoji')"
	- >
	- <span v-else>{{ suggestion.replacement }}</span>
	- </span>
	- <div class="label">
	- <span
	- v-if="suggestion.user"
	- class="displayText"
	- >
	- {{ suggestion.displayText }}<UnicodeDomainIndicator
	- :user="suggestion.user"
	- :at="false"
	- />
	- </span>
	- <span
	- v-if="!suggestion.user"
	- class="displayText"
	- >
	- {{ maybeLocalizedEmojiName(suggestion) }}
	- </span>
	- <span class="detailText">{{ suggestion.detailText }}</span>
	- </div>
	- </div>
	- </div>
	- </template>
	- </Popover>
	</div>
	</template>

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

	<style lang="scss">
	.input.emoji-input {
	padding: 0;
	display: flex;
	flex-direction: column;
	position: relative;

	.emoji-picker-icon {
	position: absolute;
	bottom: 0;
	right: 0;
	height: 100%;
	padding: 0 0.2em;
	font-size: 1.3em;
	cursor: pointer;
	line-height: 1.2em;

	&:hover i {
	color: var(--text);
	}
	}

	&.-textarea {
	.emoji-picker-icon {
	height: auto;
	padding: 0.2em;
	}
	}

	- .popover-wrapper {
	- position: absolute;
	- z-index: 20;
	- margin-top: 0.2em;
	-
	- &.hide {
	- display: none;
	- }
	- }
	-
	input,
	textarea {
	flex: 1 0 auto;
	color: inherit;
	/* stylelint-disable-next-line declaration-no-important */
	background: none !important;
	box-shadow: none;
	border: none;
	outline: none;
	}

	&.-with-picker {
	textarea,
	input {
	padding-right: 2.4em;
	}
	}

	.hidden-overlay {
	opacity: 0;
	pointer-events: none;
	position: absolute;
	inset: 0;
	overflow: hidden;

	/* DEBUG STUFF */
	color: red;

	/* set opacity to non-zero to see the overlay */

	.caret {
	width: 0;
	margin-right: calc(-1ch - 1px);
	border: 1px solid red;
	+
	+ .popover-trigger-button {
	+ height: 100%;
	+ }
	}
	}
	}

	.autocomplete {
	&-panel {
	position: absolute;
	}

	&-item.menu-item {
	display: flex;
	padding-top: 0;
	padding-bottom: 0;

	.image {
	width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
	height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
	line-height: var(--__line-height);
	text-align: center;
	margin-right: var(--__horizontal-gap);

	img {
	width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
	height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
	object-fit: contain;
	}

	span {
	font-size: var(--__line-height);
	line-height: var(--__line-height);
	}
	}

	.label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 0.1em 0 0.2em;

	.displayText {
	line-height: 1.5;
	}

	.detailText {
	font-size: 0.6em;
	line-height: 0.6em;
	}
	}
	}
	}
	</style>
	diff --git a/src/components/emoji_reactions/emoji_reactions.scss b/src/components/emoji_reactions/emoji_reactions.scss
	index 88ff1cee6d..62a7aee28c 100644
	--- a/src/components/emoji_reactions/emoji_reactions.scss
	+++ b/src/components/emoji_reactions/emoji_reactions.scss
	@@ -1,133 +1,129 @@
	@use "../../mixins";

	.EmojiReactions {
	display: flex;
	margin-top: 0.25em;
	flex-wrap: wrap;

	--emoji-size: calc(var(--emojiSize, 1.25em) * var(--emojiReactionsScale, 1));

	.emoji-reaction-container {
	display: flex;
	align-items: stretch;
	margin-top: 0.5em;
	margin-right: 0.5em;

	.emoji-reaction-popover {
	- padding: 0;
	-
	- .emoji-reaction-count-button {
	- margin: 0;
	- height: 100%;
	- border-top-left-radius: 0;
	- border-bottom-left-radius: 0;
	- box-sizing: border-box;
	- min-width: 2em;
	- display: inline-flex;
	- justify-content: center;
	- align-items: center;
	- }
	+ margin: 0;
	+ height: 100%;
	+ border-top-left-radius: 0;
	+ border-bottom-left-radius: 0;
	+ box-sizing: border-box;
	+ min-width: 2em;
	+ display: inline-flex;
	+ justify-content: center;
	+ align-items: center;
	}
	}

	.emoji-reaction {
	padding-left: 0.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin: 0;

	.reaction-emoji {
	width: var(--emoji-size);
	height: var(--emoji-size);
	margin-right: 0.25em;
	line-height: var(--emoji-size);
	display: flex;
	justify-content: center;
	align-items: center;

	&.-wide {
	width: auto;
	min-width: var(--emoji-size);
	max-width: calc(var(--emoji-size) * 3);
	}

	--_still_image-label-scale: 0.3;
	}

	.reaction-emoji-content {
	max-width: 100%;
	max-height: 100%;
	width: var(--emoji-size);
	height: var(--emoji-size);
	line-height: inherit;
	overflow: hidden;
	font-size: calc(var(--emoji-size) * 0.8);
	margin: 0;

	&.-wide {
	width: auto;
	min-width: var(--emoji-size);
	max-width: calc(var(--emoji-size) * 3);
	}

	img {
	object-fit: contain;
	}
	}

	&:focus {
	outline: none;
	}

	.svg-inline--fa {
	color: var(--text);
	}

	&.-picked-reaction {
	.svg-inline--fa {
	color: var(--accent);
	}
	}

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

	.active-marker {
	visibility: visible;
	}
	}

	@include mixins.focused-style {
	.svg-inline--fa {
	color: var(--accent);
	}

	.focus-marker {
	visibility: visible;
	}

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

	.emoji-reaction-expand {
	padding: 0 0.5em;
	margin-right: 0.5em;
	margin-top: 0.5em;
	display: flex;
	align-items: center;
	justify-content: center;

	&:hover {
	text-decoration: underline;
	}
	}
	}
	diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
	index 9ded5e2842..002d39a90a 100644
	--- a/src/components/emoji_reactions/emoji_reactions.vue
	+++ b/src/components/emoji_reactions/emoji_reactions.vue
	@@ -1,78 +1,78 @@
	<template>
	<div class="EmojiReactions">
	<span
	v-for="(reaction) in emojiReactions"
	:key="reaction.url \|\| reaction.name"
	class="emoji-reaction-container btn-group"
	>
	<component
	:is="loggedIn ? 'button' : 'a'"
	- v-bind="!loggedIn ? { href: remoteInteractionLink } : {}"
	+ :href="loggedIn ? undefined : remoteInteractionLink"
	role="button"
	class="emoji-reaction btn button-default"
	:class="{ '-picked-reaction': reactedWith(reaction.name), toggled: reactedWith(reaction.name) }"
	:title="reaction.url ? reaction.name : undefined"
	:aria-pressed="reactedWith(reaction.name)"
	@click="emojiOnClick(reaction.name, $event)"
	>
	<span
	class="reaction-emoji"
	:class="{ ['-wide']: allowNonSquareEmoji }"
	>
	<StillImage
	v-if="reaction.url"
	:src="reaction.url"
	class="reaction-emoji-content"
	:alt="reaction.url ? reaction.name : undefined"
	:class="{ ['-wide']: allowNonSquareEmoji }"
	/>
	<span
	v-else
	class="reaction-emoji reaction-emoji-content"
	>{{ reaction.name }}</span>
	</span>
	<FALayers>
	<FAIcon
	v-if="reactedWith(reaction.name)"
	class="active-marker"
	transform="shrink-6 up-9"
	icon="check"
	/>
	<FAIcon
	v-if="!reactedWith(reaction.name)"
	class="focus-marker"
	transform="shrink-6 up-9"
	icon="plus"
	/>
	<FAIcon
	v-else
	class="focus-marker"
	transform="shrink-6 up-9"
	icon="minus"
	/>
	</FALayers>
	</component>
	<UserListPopover
	:user-ids="accountsForEmoji.get(reaction.name)"
	class="emoji-reaction-popover"
	:normal-button="true"
	- :trigger-attrs="counterTriggerAttrs(reaction)"
	+ v-bind="counterTriggerAttrs(reaction)"
	@show="fetchEmojiReactionsIfMissing()"
	>
	- <span class="emoji-reaction-counts">{{ reaction.count }}</span>
	+ {{ reaction.count }}
	</UserListPopover>
	</span>
	<a
	v-if="tooManyReactions"
	class="emoji-reaction-expand faint"
	href="javascript:void(0)"
	@click="toggleShowAll"
	>
	{{ showAll ? $t('general.show_less') : showMoreString }}
	</a>
	</div>
	</template>

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

	<style src="./emoji_reactions.scss" lang="scss" />
	diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
	index 11db0b4157..029a5c846b 100644
	--- a/src/components/mention_link/mention_link.vue
	+++ b/src/components/mention_link/mention_link.vue
	@@ -1,60 +1,60 @@
	<template>
	<span
	class="MentionLink"
	>
	<a
	v-if="!user"
	:href="url"
	class="original"
	target="_blank"
	v-html="content"
	/>
	<UserPopover
	v-else
	:user-id="user.id"
	:disabled="!shouldShowTooltip"
	- :trigger-attrs="popoverAttrs"
	+ v-bind="popoverAttrs"
	link
	@click="onClick"
	>
	<UserAvatar
	v-if="shouldShowAvatar"
	class="mention-avatar"
	:user-id="user.id"
	/><span
	class="shortName"
	>@<span
	class="userName"
	v-html="userName"
	/><span
	v-if="shouldShowFullUserName"
	class="serverName"
	:class="{ '-faded': shouldFadeDomain }"
	v-html="'@' + serverName"
	/><UnicodeDomainIndicator
	v-if="shouldShowFullUserName"
	:user="user"
	/>
	</span>
	<span
	v-if="isYou && shouldShowYous"
	:class="{ '-you': shouldBoldenYou }"
	> {{ ' ' + $t('status.you') }}</span>
	<!-- eslint-enable vue/no-v-html -->
	</UserPopover>
	<span
	v-if="user"
	ref="full"
	class="full"
	aria-hidden="true"
	>
	<!-- eslint-disable vue/no-v-html -->
	@<span v-html="userName" /><span v-html="'@' + serverName" />
	<!-- eslint-enable vue/no-v-html -->
	</span>
	</span>
	</template>

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

	<style lang="scss" src="./mention_link.scss" />
	diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
	index 53b26f67ab..20fe0d8a5f 100644
	--- a/src/components/moderation_tools/moderation_tools.vue
	+++ b/src/components/moderation_tools/moderation_tools.vue
	@@ -1,130 +1,129 @@
	<template>
	<div>
	<Popover
	trigger="click"
	class="moderation-tools-popover"
	:disabled="disabled"
	placement="bottom"
	:offset="{ y: 5 }"
	@show="setOpen(true)"
	@close="setOpen(false)"
	- :trigger-attrs="{ role: 'menuitem' }"
	normal-button
	>
	<template #content>
	<div role="menu" class="dropdown-menu">
	<template v-for="(entry, index) in entries">
	<hr
	v-if="entry === 'separator'"
	:key="index"
	role="separator"
	class="dropdown-divider"
	/>
	<div
	v-else
	:key="entry.label"
	role="menuitem"
	class="menu-item dropdown-item"
	:class="entry.checkbox ? '-icon' : '-icon-space'"
	>
	<button
	class="main-button"
	@click="() => maybeShowConfirm(entry)"
	>
	<span
	v-if="entry.checkbox"
	class="input menu-checkbox"
	:class="entry.checkboxClass"
	/>
	{{ $t(entry.label) }}
	</button>
	</div>
	</template>
	</div>
	</template>
	<template #trigger>
	{{ $t('user_card.admin_menu.moderation') }}
	<FAIcon
	v-if="ready"
	icon="chevron-down"
	/>
	<span
	v-else
	class="loading-spinner"
	>
	<FAIcon
	class="fa-old-padding"
	spin
	icon="circle-notch"
	/>
	</span>
	</template>
	</Popover>
	<teleport to="#modal">
	<ConfirmModal
	v-if="confirmDialogShow"
	:title="$t(confirmDialogTitle)"
	:confirm-text="confirmDialogConfirm"
	:confirm-danger="confirmDialogDanger"
	:cancel-text="$t('general.cancel')"
	@accepted="doConfirmDialogAction"
	@cancelled="clearConfirmDialog"
	>
	<i18n-t
	:plural="users.length"
	scope="global"
	:keypath="confirmDialogContent"
	tag="p"
	>
	<template #user>
	<span
	v-text="users[0].screen_name_ui"
	/>
	</template>
	<template #count>
	{{ users.length }}
	</template>
	<template #name>
	<code>
	{{ confirmDialogName }}
	</code>
	</template>
	</i18n-t>
	<p v-if="confirmDialogContent2">
	{{ $t(confirmDialogContent2) }}
	</p>
	<ul v-if="users.length > 1">
	<li
	v-for="user in users"
	:key="user.screen_name"
	>
	{{ user.screen_name }}
	</li>
	</ul>
	</ConfirmModal>
	</teleport>
	</div>
	</template>

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

	<style lang="scss">
	.moderation-tools-popover {
	height: 100%;

	.trigger {
	/* stylelint-disable-next-line declaration-no-important */
	display: flex !important;
	height: 100%;
	}
	}

	.moderation-tools-button {
	white-space: nowrap;

	svg,
	i {
	font-size: 0.8em;
	}
	}
	</style>
	diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
	index 998419bbb0..04520d36be 100644
	--- a/src/components/notifications/notification_filters.vue
	+++ b/src/components/notifications/notification_filters.vue
	@@ -1,137 +1,137 @@
	<template>
	<Popover
	trigger="click"
	class="NotificationFilters"
	placement="bottom"
	:bound-to="{ x: 'container' }"
	- :trigger-attrs="{ title: $t('timeline.quick_filter_settings')}"
	+ :title="$t('timeline.quick_filter_settings')"
	>
	<template #content>
	<div class="dropdown-menu">
	<div class="menu-item dropdown-item -icon">
	<button
	class="main-button"
	@click="toggleNotificationFilter('likes')"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.likes }"
	/>{{ $t('settings.notification_visibility_likes') }}
	</button>
	</div>
	<div class="menu-item dropdown-item -icon">
	<button
	class="main-button"
	@click="toggleNotificationFilter('repeats')"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.repeats }"
	/>{{ $t('settings.notification_visibility_repeats') }}
	</button>
	</div>
	<div class="menu-item dropdown-item -icon">
	<button
	class="main-button"
	@click="toggleNotificationFilter('follows')"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.follows }"
	/>{{ $t('settings.notification_visibility_follows') }}
	</button>
	</div>
	<div class="menu-item dropdown-item -icon">
	<button
	class="main-button"
	@click="toggleNotificationFilter('mentions')"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.mentions }"
	/>{{ $t('settings.notification_visibility_mentions') }}
	</button>
	</div>
	<div class="menu-item dropdown-item -icon">
	<button
	class="main-button"
	@click="toggleNotificationFilter('statuses')"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.statuses }"
	/>{{ $t('settings.notification_visibility_statuses') }}
	</button>
	</div>
	<div class="menu-item dropdown-item -icon">
	<button
	class="main-button"
	@click="toggleNotificationFilter('emojiReactions')"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.emojiReactions }"
	/>{{ $t('settings.notification_visibility_emoji_reactions') }}
	</button>
	</div>
	<div class="menu-item dropdown-item -icon">
	<button
	class="main-button"
	@click="toggleNotificationFilter('moves')"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.moves }"
	/>{{ $t('settings.notification_visibility_moves') }}
	</button>
	</div>
	<div class="menu-item dropdown-item -icon">
	<button
	class="main-button"
	@click="toggleNotificationFilter('polls')"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.polls }"
	/>{{ $t('settings.notification_visibility_polls') }}
	</button>
	</div>
	</div>
	</template>
	<template #trigger>
	<FAIcon icon="filter" />
	</template>
	</Popover>
	</template>

	<script>
	import Popover from 'src/components/popover/popover.vue'

	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faFilter } from '@fortawesome/free-solid-svg-icons'

	library.add(faFilter)

	export default {
	components: { Popover },
	computed: {
	filters() {
	return useMergedConfigStore().mergedConfig.notificationVisibility
	},
	},
	methods: {
	toggleNotificationFilter(type) {
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'notificationVisibility',
	value: {
	...this.filters,
	[type]: !this.filters[type],
	},
	})
	},
	},
	}
	</script>
	diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
	index 0b27c1e0fe..207c3e779d 100644
	--- a/src/components/popover/popover.js
	+++ b/src/components/popover/popover.js
	@@ -1,453 +1,444 @@
	import { useId } from 'vue'

	const Popover = {
	name: 'Popover',
	- inheritAttrs: false,
	props: {
	// Action to trigger popover: either 'hover' or 'click'
	trigger: String,

	// 'top', 'bottom', 'left', 'right'
	placement: String,

	// Takes object with properties 'x' and 'y', values of these can be
	// 'container' for using offsetParent as boundaries for either axis
	// or 'viewport'
	boundTo: Object,

	// Takes a selector to use as a replacement for the parent container
	// for getting boundaries for x an y axis
	boundToSelector: String,

	// Takes a top/bottom/left/right object, how much space to leave
	// between boundary and popover element
	margin: Object,

	// Takes a x/y object and tells how many pixels to offset from
	// anchor point on either axis
	offset: Object,

	// Replaces the classes you may want for the popover container.
	// Use 'popover-default' in addition to get the default popover
	// styles with your custom class.
	popoverClass: String,

	// If true, subtract padding when calculating position for the popover,
	// use it when popover offset looks to be different on top vs bottom.
	removePadding: Boolean,

	// self-explanatory (i hope)
	disabled: Boolean,

	// Instead of putting popover next to anchor, overlay popover's center on top of anchor's center
	overlayCenters: Boolean,

	// What selector (witin popover!) to use for determining center of popover
	overlayCentersSelector: String,

	// Lets hover popover stay when clicking inside of it
	stayOnClick: Boolean,

	// Use styled button (to avoid nested buttons)
	normalButton: Boolean,

	// Use <a> instead of <button>
	link: {
	type: Boolean,
	default: false,
	},

	// Whether to hide the trigger totally
	hideTrigger: {
	type: Boolean,
	default: false,
	},

	- triggerAttrs: {
	- type: Object,
	- default: {},
	- },
	-
	// Used to set or unset aria-haspopup (attribute not set for tooltips)
	tooltip: Boolean,
	-
	- // Rarely-useful class for the wrapper element
	- rootClass: String,
	},
	inject: {
	// override popover z layer
	popoversZLayer: {
	default: '',
	},
	},
	setup() {
	const uniqueId = useId()

	return { uniqueId }
	},
	data() {
	return {
	// lockReEntry is a flag that is set when mouse cursor is leaving the popover's content
	// so that if mouse goes back into popover it won't be re-shown again to prevent annoyance
	// with popovers refusing to be hidden when user wants to interact with something in below popover
	anchorEl: null,
	// There's an issue where having teleport enabled by default causes things just...
	// not render at all, i.e. main post status form and its emoji inputs
	teleport: false,
	lockReEntry: false,
	hidden: true,
	styles: {},
	oldSize: { width: 0, height: 0 },
	scrollable: null,
	// used to avoid blinking if hovered onto popover
	graceTimeout: null,
	parentPopover: null,
	disableClickOutside: false,
	childrenShown: new Set(),
	}
	},
	computed: {
	idPrefix() {
	return `popover-${this.uniqueId}-`
	},
	allTriggerAttrs() {
	if (process.env.NODE_ENV === 'development') {
	- if ('aria-hidden' in this.triggerAttrs) {
	+ if ('aria-hidden' in this.$attrs) {
	throw new Error(
	- 'Do not use aria-hidden in triggerAttrs. Instead set hideTrigger to true',
	+ 'Do not use aria-hidden in attrs. Instead set hideTrigger to true',
	)
	}
	}

	const attrs = {
	- ...this.triggerAttrs,
	+ ...this.$attrs,
	}

	if (this.hideTrigger) {
	attrs['aria-hidden'] = true
	attrs.tabindex = 1
	}

	return attrs
	},
	triggerClass() {
	if (this.link) {
	return ''
	} else if (this.normalButton) {
	return 'button-default btn'
	} else {
	return 'button-unstyled'
	}
	},
	},
	methods: {
	setAnchorEl(el) {
	this.anchorEl = el
	this.updateStyles()
	},
	containerBoundingClientRect() {
	const container = this.boundToSelector
	? this.$el.closest(this.boundToSelector)
	: this.$el.offsetParent
	return container.getBoundingClientRect()
	},
	updateStyles() {
	if (this.hidden) {
	this.styles = {}
	return
	}

	// Popover will be anchored around this element, trigger ref is the container, so
	// its children are what are inside the slot. Expect only one v-slot:trigger.
	const anchorEl =
	- this.anchorEl \|\| this.$refs.trigger?.children[0] \|\| this.$el
	+ this.anchorEl \|\| this.$refs.trigger?.children[0] \|\| this.$refs.trigger
	// SVGs don't have offsetWidth/Height, use fallback
	const anchorHeight = anchorEl.offsetHeight \|\| anchorEl.clientHeight
	const anchorWidth = anchorEl.offsetWidth \|\| anchorEl.clientWidth
	const anchorScreenBox = anchorEl.getBoundingClientRect()

	const anchorStyle = getComputedStyle(anchorEl)
	const topPadding = Number.parseFloat(anchorStyle.paddingTop)
	const bottomPadding = Number.parseFloat(anchorStyle.paddingBottom)
	const rightPadding = Number.parseFloat(anchorStyle.paddingRight)
	const leftPadding = Number.parseFloat(anchorStyle.paddingLeft)

	// Screen position of the origin point for popover = center of the anchor
	const origin = {
	x: anchorScreenBox.left + anchorWidth * 0.5,
	y: anchorScreenBox.top + anchorHeight * 0.5,
	}
	const content = this.$refs.content
	const overlayCenter = this.overlayCenters
	? this.$refs.content.querySelector(this.overlayCentersSelector)
	: null

	// Minor optimization, don't call a slow reflow call if we don't have to
	const parentScreenBox =
	(this.boundTo?.x === 'container' \|\| this.boundTo?.y === 'container') &&
	this.containerBoundingClientRect()

	const margin = this.margin \|\| {}

	// What are the screen bounds for the popover? Viewport vs container
	// when using viewport, using default margin values to dodge the navbar
	const xBounds =
	this.boundTo?.x === 'container'
	? {
	min: parentScreenBox.left + (margin.left \|\| 0),
	max: parentScreenBox.right - (margin.right \|\| 0),
	}
	: {
	min: 0 + (margin.left \|\| 10),
	max: window.innerWidth - (margin.right \|\| 10),
	}

	const yBounds =
	this.boundTo?.y === 'container'
	? {
	min: parentScreenBox.top + (margin.top \|\| 0),
	max: parentScreenBox.bottom - (margin.bottom \|\| 0),
	}
	: {
	min: 0 + (margin.top \|\| 50),
	max: window.innerHeight - (margin.bottom \|\| 5),
	}

	let horizOffset = 0
	let vertOffset = 0

	if (overlayCenter) {
	const box = content.getBoundingClientRect()
	const overlayCenterScreenBox = overlayCenter.getBoundingClientRect()
	const leftInnerOffset = overlayCenterScreenBox.left - box.left
	const topInnerOffset = overlayCenterScreenBox.top - box.top
	horizOffset = -leftInnerOffset - overlayCenter.offsetWidth * 0.5
	vertOffset = -topInnerOffset - overlayCenter.offsetHeight * 0.5
	} else {
	horizOffset = content.offsetWidth * -0.5
	vertOffset = content.offsetHeight * -0.5
	}

	const leftBorder = origin.x + horizOffset
	const rightBorder = leftBorder + content.offsetWidth
	const topBorder = origin.y + vertOffset
	const bottomBorder = topBorder + content.offsetHeight

	// If overflowing from left, move it so that it doesn't
	if (leftBorder < xBounds.min) {
	horizOffset += xBounds.min - leftBorder
	}

	// If overflowing from right, move it so that it doesn't
	if (rightBorder > xBounds.max) {
	horizOffset -= rightBorder - xBounds.max
	}

	// If overflowing from top, move it so that it doesn't
	if (topBorder < yBounds.min) {
	vertOffset += yBounds.min - topBorder
	}

	// If overflowing from bottom, move it so that it doesn't
	if (bottomBorder > yBounds.max) {
	vertOffset -= bottomBorder - yBounds.max
	}

	let translateX = 0
	let translateY = 0

	if (overlayCenter) {
	translateX = origin.x + horizOffset
	translateY = origin.y + vertOffset
	} else if (this.placement !== 'right' && this.placement !== 'left') {
	// Default to whatever user wished with placement prop
	let usingTop = this.placement !== 'bottom'

	// Handle special cases, first force to displaying on top if there's no space on bottom,
	// regardless of what placement value was. Then check if there's no space on top, and
	// force to bottom, again regardless of what placement value was.
	const topBoundary =
	origin.y - anchorHeight * 0.5 + (this.removePadding ? topPadding : 0)
	const bottomBoundary =
	origin.y +
	anchorHeight * 0.5 -
	(this.removePadding ? bottomPadding : 0)
	if (bottomBoundary + content.offsetHeight > yBounds.max) usingTop = true
	if (topBoundary - content.offsetHeight < yBounds.min) usingTop = false

	const yOffset = this.offset?.y \|\| 0
	translateY = usingTop
	? topBoundary - yOffset - content.offsetHeight
	: bottomBoundary + yOffset

	const xOffset = this.offset?.x \|\| 0
	translateX = origin.x + horizOffset + xOffset
	} else {
	// Default to whatever user wished with placement prop
	let usingLeft = this.placement !== 'right'

	// Handle special cases, first force to displaying on left if there's no space on right,
	// regardless of what placement value was. Then check if there's no space on right, and
	// force to left, again regardless of what placement value was.
	const leftBoundary =
	origin.x - anchorWidth * 0.5 + (this.removePadding ? leftPadding : 0)
	const rightBoundary =
	origin.x + anchorWidth * 0.5 - (this.removePadding ? rightPadding : 0)
	if (rightBoundary + content.offsetWidth > xBounds.max) usingLeft = true
	if (leftBoundary - content.offsetWidth < xBounds.min) usingLeft = false

	const xOffset = this.offset?.x \|\| 0
	translateX = usingLeft
	? leftBoundary - xOffset - content.offsetWidth
	: rightBoundary + xOffset

	const yOffset = this.offset?.y \|\| 0
	translateY = origin.y + vertOffset + yOffset
	}

	this.styles = {
	left: `${Math.round(translateX)}px`,
	top: `${Math.round(translateY)}px`,
	}

	if (this.popoversZLayer) {
	this.styles['--ZI_popover_override'] =
	`var(--ZI_${this.popoversZLayer}_popovers)`
	}
	if (parentScreenBox) {
	this.styles.maxWidth = `${Math.round(parentScreenBox.width)}px`
	}
	},
	showPopover() {
	if (this.disabled) return
	this.disableClickOutside = true
	setTimeout(() => {
	this.disableClickOutside = false
	}, 0)
	const wasHidden = this.hidden
	this.hidden = false
	this.parentPopover?.onChildPopoverState(this, true)
	if (this.trigger === 'click' \|\| this.stayOnClick) {
	document.addEventListener('click', this.onClickOutside)
	}
	this.scrollable.addEventListener('scroll', this.onScroll)
	this.scrollable.addEventListener('resize', this.onResize)
	// My assumption is that upon showing popover initially has different size
	// as its contents are getting populating, so logic uses those incorrect
	// sizes as basis
	setTimeout(() => {
	if (wasHidden) this.$emit('show')
	this.updateStyles()
	}, 1)
	},
	hidePopover() {
	if (this.disabled) return
	if (!this.hidden) this.$emit('close')
	this.hidden = true
	this.parentPopover?.onChildPopoverState(this, false)
	if (this.trigger === 'click') {
	document.removeEventListener('click', this.onClickOutside)
	}
	this.scrollable?.removeEventListener('scroll', this.onScroll)
	this.scrollable?.removeEventListener('resize', this.onResize)
	},
	resizePopover() {
	setTimeout(() => {
	this.updateStyles()
	}, 1)
	},
	onMouseenter() {
	if (this.trigger === 'hover') {
	this.lockReEntry = false
	clearTimeout(this.graceTimeout)
	this.graceTimeout = null
	this.showPopover()
	}
	},
	onMouseleave() {
	if (this.trigger === 'hover' && this.childrenShown.size === 0) {
	this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
	}
	},
	onMouseenterContent() {
	if (this.trigger === 'hover' && !this.lockReEntry) {
	this.lockReEntry = true
	clearTimeout(this.graceTimeout)
	this.graceTimeout = null
	this.showPopover()
	}
	},
	onMouseleaveContent() {
	if (this.trigger === 'hover' && this.childrenShown.size === 0) {
	this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
	}
	},
	onClick(e) {
	if (this.trigger === 'click') {
	e.preventDefault()
	if (this.hidden) {
	this.showPopover()
	} else {
	this.hidePopover()
	}
	}
	},
	onClickOutside(e) {
	if (this.disableClickOutside) return
	if (this.hidden) return
	if (this.$refs.content?.contains(e.target)) return
	if (this.$el.contains(e.target)) return
	if (this.childrenShown.size > 0) return
	this.hidePopover()
	if (this.parentPopover) this.parentPopover.onClickOutside(e)
	},
	onScroll() {
	this.updateStyles()
	},
	onResize() {
	const content = this.$refs.content
	if (!content) return
	if (
	this.oldSize.width !== content.offsetWidth \|\|
	this.oldSize.height !== content.offsetHeight
	) {
	this.updateStyles()
	this.oldSize = {
	width: content.offsetWidth,
	height: content.offsetHeight,
	}
	}
	},
	onChildPopoverState(childRef, state) {
	if (state) {
	this.childrenShown.add(childRef)
	} else {
	this.childrenShown.delete(childRef)
	}
	},
	},
	updated() {
	// Monitor changes to content size, update styles only when content sizes have changed,
	// that should be the only time we need to move the popover box if we don't care about scroll
	// or resize
	this.onResize()
	},
	mounted() {
	this.teleport = true
	let scrollable =
	this.$refs.trigger.closest('.column.-scrollable') \|\|
	this.$refs.trigger.closest('.mobile-notifications')
	if (!scrollable) scrollable = window
	this.scrollable = scrollable
	let parent = this.$parent
	while (parent && parent.$.type.name !== 'Popover') {
	parent = parent.$parent
	}
	this.parentPopover = parent
	},
	beforeUnmount() {
	this.hidePopover()
	},
	}

	export default Popover
	diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
	index ba153d0da3..1a7500e4c4 100644
	--- a/src/components/popover/popover.vue
	+++ b/src/components/popover/popover.vue
	@@ -1,55 +1,49 @@
	<template>
	- <span
	- class="popover-wrapper"
	- role="presentation"
	- :class="rootClass"
	+ <component
	+ :is="link ? 'a' : 'button'"
	+ :type="link ? undefined : 'button'"
	+ :aria-haspopup="tooltip ? undefined : !disabled"
	+ :aria-owns="hidden ? undefined : `${idPrefix}content`"
	+ class="popover-trigger-button"
	+ :class="triggerClass"
	@mouseenter="onMouseenter"
	@mouseleave="onMouseleave"
	+ @click="onClick"
	+ v-bind="allTriggerAttrs"
	+ ref="trigger"
	>
	- <component
	- ref="trigger"
	- :is="link ? 'a' : 'button'"
	- class="popover-trigger-button"
	- :class="triggerClass"
	- type="button"
	- v-bind="allTriggerAttrs"
	- :aria-haspopup="tooltip ? undefined : !disabled"
	- :aria-owns="hidden ? undefined : `${idPrefix}content`"
	- @click="onClick"
	- >
	- <slot name="trigger" />
	- </component>
	+ <slot name="trigger" />
	<teleport
	:disabled="!teleport"
	to="#popovers"
	>
	<transition name="fade">
	<div
	v-if="!hidden"
	:id="$attrs.id ?? idPrefix + 'content'"
	ref="content"
	:style="styles"
	class="popover"
	role="dialog"
	:aria-label="$attrs['aria-label']"
	:class="popoverClass \|\| 'popover-default'"
	@mouseenter="onMouseenterContent"
	@mouseleave="onMouseleaveContent"
	@click="onClickContent"
	v-bind="$attrs"
	>
	<slot
	name="content"
	class="popover-inner"
	:close="hidePopover"
	:resize="resizePopover"
	/>
	</div>
	</transition>
	</teleport>
	- </span>
	+ </component>
	</template>

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

	<style src="./popover.scss" lang="scss"></style>
	diff --git a/src/components/post_status_form/post_status_form.scss b/src/components/post_status_form/post_status_form.scss
	index 2b00dd1f4e..3ccefc41db 100644
	--- a/src/components/post_status_form/post_status_form.scss
	+++ b/src/components/post_status_form/post_status_form.scss
	@@ -1,290 +1,282 @@
	.post-status-form {
	position: relative;

	form {
	display: flex;
	flex-direction: column;
	padding: 0.5em;
	position: relative;
	gap: 0.25em;
	}

	.form-group {
	display: flex;
	flex-direction: column;
	line-height: 1.85;
	}

	.attachments {
	margin-bottom: 0.5em;
	}

	- .more-post-actions {
	- height: 100%;
	-
	- .btn {
	- height: 100%;
	- }
	- }
	-
	.form-bottom {
	display: flex;
	justify-content: space-between;
	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;
	gap: 1.5em;
	margin: 0 0.5em;

	button {
	padding: 0.25em;
	margin: -0.25em;
	}
	}

	.preview-heading {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0.5em;
	}

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

	&: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 {
	margin-bottom: 0.5em;
	gap: 0 1em;
	display: flex;
	flex-wrap: wrap-reverse;
	grid-template-columns: 1fr 1fr;
	}

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

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

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

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

	.quote-icon {
	order: 4;
	justify-content: right;
	}

	.bottom-left-button {
	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;
	}

	.inputs-wrapper {
	padding: 0;
	display: flex;
	flex-direction: column;
	}

	.keyboard-enter-hint {
	text-align: right;
	line-height: 1;
	}

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

	.mentions-input {
	border-bottom: 1px solid var(--border);
	}

	.character-counter {
	position: absolute;
	bottom: 0;
	right: 2.2em;
	padding: 0;
	margin: 0;
	line-height: 2.2em;
	height: 2.2em;

	&.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;
	inset: 0;
	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 b8525bde8b..a05df2212d 100644
	--- a/src/components/post_status_form/post_status_form.vue
	+++ b/src/components/post_status_form/post_status_form.vue
	@@ -1,458 +1,457 @@
	<template>
	<div
	v-if="initialized"
	ref="form"
	class="post-status-form"
	>
	<form
	autocomplete="off"
	@submit.prevent
	@dragover.prevent="fileDrag"
	>
	<div class="form-group">
	<div
	v-if="!currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
	class="visibility-notice notice-dismissible"
	>
	<i18n-t
	keypath="post_status.account_not_locked_warning"
	tag="p"
	class=""
	scope="global"
	>
	<button
	class="button-unstyled -link"
	@click="openProfileTab"
	>
	{{ $t('post_status.account_not_locked_warning_link') }}
	</button>
	</i18n-t>
	</div>
	<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' && 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="!hideScopeNotice && newStatus.visibility === 'direct'"
	class="visibility-notice notice-dismissible"
	>
	<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"
	>
	<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="reply-or-quote-selector"
	>
	<Checkbox
	v-model="quoteThreadToggled"
	:radio="true"
	:disabled="quoteFormVisible"
	>
	{{ $t('post_status.quote_option') }}
	</Checkbox>
	<Checkbox
	role="radio"
	:radio="true"
	:model-value="!quoteThreadToggled"
	:disabled="quoteFormVisible"
	@update:model-value="e => quoteThreadToggled = !e"
	>
	{{ $t('post_status.reply_option') }}
	</Checkbox>
	</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>
	<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>
	<input
	v-if="mentionsLine"
	:value="mentionsLineReadOnly ? mentionsString : newStatus.mentionsLine"
	type="text"
	:placeholder="$t('post_status.mentions_line')"
	:disabled="mentionsLineReadOnly \|\| (posting && !optimisticPosting)"
	size="1"
	class="input mentions-input form-post-mentions unstyled"
	@change="onMentionsLineUpdate"
	>
	<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)"
	@keydown.meta.enter="postStatus($event, newStatus)"
	@keydown.ctrl.enter="!submitOnEnter && postStatus($event)"
	@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"
	ref="scopeSelector"
	:show-all="showAllScopes"
	:user-default="userDefaultScope"
	:original-scope="repliedStatus?.visibility"
	:initial-scope="newStatus.visibility"
	@change="changeVis"
	/>

	<div
	v-if="postFormats.length > 1"
	class="text-format"
	>
	<Select
	v-model="newStatus.contentType"
	class="input form-control unstyled"
	: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>
	<PollForm
	v-if="pollsAvailable"
	ref="pollForm"
	v-model="newStatus.poll"
	:visible="pollFormVisible"
	/>
	<QuoteForm
	v-if="quotingAvailable"
	:id="newStatus.quote?.id"
	ref="quoteForm"
	:visible="quoteFormVisible"
	:url="newStatus.quote?.url"
	@update:url="url => newStatus.quote.url = url"
	@update:id="id => newStatus.quote.id = id"
	/>
	<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="bottom-left-button media-upload-icon"
	:drop-files="dropFiles"
	:disabled="uploadFileLimitReached"
	@uploading="startedUploadingFiles"
	@uploaded="addMediaFile"
	@upload-failed="uploadFailed"
	@all-uploaded="finishedUploadingFiles"
	/>
	<button
	v-if="pollsAvailable"
	class="bottom-left-button poll-icon button-unstyled"
	:class="{ toggled: pollFormVisible }"
	:title="$t('polls.add_poll')"
	@click="togglePollForm"
	>
	<FAIcon icon="poll-h" />
	</button>
	<button
	v-if="quotingAvailable"
	class="bottom-left-button quote-icon button-unstyled"
	:disabled="quoteThreadToggled"
	:class="{ toggled: quoteFormVisible }"
	:title="$t('tool_tip.add_quote')"
	@click="toggleQuoteForm"
	>
	<FAIcon icon="quote-right" />
	</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)"
	>
	<template v-if="posting">
	{{ $t('post_status.posting') }}
	</template>
	<template v-else>
	{{ $t('post_status.post') }}
	</template>
	</button>
	<Popover
	v-if="!hideExtraActions"
	- root-class="more-post-actions"
	- :normal-button="true"
	trigger="click"
	placement="bottom"
	:offset="{ y: 5 }"
	- :trigger-attrs="{ 'aria-label': $t('post_status.more_post_actions') }"
	+ normal-button
	+ :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>
	<small
	v-if="chatView"
	class="keyboard-enter-hint faint"
	>
	<i v-if="submitOnEnter">
	{{ $t('post_status.enter_submits') }}
	</i>
	<i v-else>
	{{ $t('post_status.enter_newline') }}
	</i>
	</small>
	<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 -dismissible"
	>
	<span>
	{{ error }}
	</span>
	<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', 'newStatus')"
	@pause="$emit('mediapause', 'newStatus')"
	:aria-label="$t('status.attachments')"
	/>
	<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/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
	index 532b3bde52..91c48f66c9 100644
	--- a/src/components/quick_filter_settings/quick_filter_settings.vue
	+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
	@@ -1,164 +1,164 @@
	<template>
	<Popover
	:trigger="nested ? 'hover' : 'click'"
	class="QuickFilterSettings"
	:bound-to="{ x: 'container' }"
	:position="nested ? 'right' : 'top'"
	- :trigger-attrs="triggerAttrs"
	+ v-bind="triggerAttrs"
	>
	<template #content>
	<div
	class="dropdown-menu"
	role="menu"
	>
	<div
	v-if="loggedIn"
	role="group"
	>
	<div class="menu-item dropdown-item -icon">
	<button
	v-if="!conversation"
	class="main-button"
	:aria-checked="replyVisibilityAll"
	role="menuitemradio"
	@click="replyVisibilityAll = true"
	>
	<span
	class="input menu-checkbox -radio"
	:class="{ 'menu-checkbox-checked': replyVisibilityAll }"
	:aria-hidden="true"
	/>{{ $t('settings.reply_visibility_all') }}
	</button>
	</div>
	<div
	v-if="!conversation"
	class="menu-item dropdown-item -icon"
	>
	<button
	class="main-button"
	:aria-checked="replyVisibilityFollowing"
	role="menuitemradio"
	@click="replyVisibilityFollowing = true"
	>
	<span
	class="input menu-checkbox -radio"
	:class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
	:aria-hidden="true"
	/>{{ $t('settings.reply_visibility_following_short') }}
	</button>
	</div>
	<div
	v-if="!conversation"
	class="menu-item dropdown-item -icon"
	>
	<button
	class="main-button"
	:aria-checked="replyVisibilitySelf"
	role="menuitemradio"
	@click="replyVisibilitySelf = true"
	>
	<span
	class="input menu-checkbox -radio"
	:class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
	:aria-hidden="true"
	/>{{ $t('settings.reply_visibility_self_short') }}
	</button>
	</div>
	<hr
	v-if="!conversation"
	role="separator"
	class="dropdown-divider"
	/>
	</div>
	<div class="menu-item dropdown-item -icon">
	<button
	class="main-button"
	role="menuitemcheckbox"
	:aria-checked="muteBotStatuses"
	@click="muteBotStatuses = !muteBotStatuses"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': muteBotStatuses }"
	:aria-hidden="true"
	/>{{ $t('settings.mute_bot_posts') }}
	</button>
	</div>
	<div class="menu-item dropdown-item -icon">
	<button
	class="main-button"
	role="menuitemcheckbox"
	:aria-checked="muteSensitiveStatuses"
	@click="muteSensitiveStatuses = !muteSensitiveStatuses"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': muteSensitiveStatuses }"
	:aria-hidden="true"
	/>{{ $t('settings.mute_sensitive_posts') }}
	</button>
	</div>
	<div class="menu-item dropdown-item -icon">
	<button
	class="main-button"
	role="menuitemcheckbox"
	:aria-checked="hideMedia"
	@click="hideMedia = !hideMedia"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': hideMedia }"
	:aria-hidden="true"
	/>{{ $t('settings.hide_media_previews') }}
	</button>
	</div>
	<div class="menu-item dropdown-item -icon">
	<button
	class="main-button"
	role="menuitemcheckbox"
	:aria-checked="hideMutedPosts"
	@click="hideMutedPosts = !hideMutedPosts"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': hideMutedPosts }"
	:aria-hidden="true"
	/>{{ $t('settings.hide_all_muted_posts') }}
	</button>
	</div>
	<div class="menu-item dropdown-item -icon">
	<button
	class="main-button"
	role="menuitem"
	@click="openTab('filtering')"
	>
	<FAIcon
	fixed-width
	icon="font"
	/>{{ $t('settings.word_filter_and_more') }}
	</button>
	</div>
	</div>
	</template>
	<template #trigger>
	<div :class="mobileLayout ? 'main-button' : ''">
	<FAIcon
	icon="filter"
	:fixed-width="nested"
	/>
	<template v-if="nested">
	{{ $t('timeline.filter_settings') }}
	</template>
	<FAIcon
	v-if="nested"
	class="chevron-icon"
	size="lg"
	icon="chevron-right"
	fixed-width
	/>
	</div>
	</template>
	</Popover>
	</template>

	<script src="./quick_filter_settings.js"></script>
	diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
	index 368bf9e795..057d0a6aa9 100644
	--- a/src/components/quick_view_settings/quick_view_settings.vue
	+++ b/src/components/quick_view_settings/quick_view_settings.vue
	@@ -1,134 +1,134 @@
	<template>
	<Popover
	trigger="click"
	class="QuickViewSettings"
	:bound-to="{ x: 'container' }"
	- :trigger-attrs="{ title: $t('timeline.quick_view_settings')}"
	+ :title="$t('timeline.quick_view_settings')"
	>
	<template #content>
	<div
	class="dropdown-menu"
	role="menu"
	>
	<div
	v-if="mobileLayout"
	class="menu-item dropdown-item -icon"
	>
	<QuickFilterSettings :nested="true" />
	</div>
	<hr
	v-if="mobileLayout"
	role="separator"
	class="dropdown-divider"
	/>
	<div role="group">
	<div class="menu-item dropdown-item -icon-double">
	<button
	class="main-button"
	:aria-checked="conversationDisplay === 'tree'"
	role="menuitemradio"
	@click="conversationDisplay = 'tree'"
	>
	<span
	class="input menu-checkbox -radio"
	:aria-hidden="true"
	:class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
	/><FAIcon
	icon="folder-tree"
	:aria-hidden="true"
	fixed-width
	/> {{ $t('settings.conversation_display_tree_quick') }}
	</button>
	</div>
	<div class="menu-item dropdown-item -icon-double">
	<button
	class="main-button"
	:aria-checked="conversationDisplay === 'linear'"
	role="menuitemradio"
	@click="conversationDisplay = 'linear'"
	>
	<span
	class="input menu-checkbox -radio"
	:class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
	:aria-hidden="true"
	/><FAIcon
	icon="list"
	:aria-hidden="true"
	fixed-width
	/> {{ $t('settings.conversation_display_linear_quick') }}
	</button>
	</div>
	</div>
	<hr
	role="separator"
	class="dropdown-divider"
	/>
	<div class="menu-item dropdown-item -icon">
	<button
	class="main-button"
	role="menuitemcheckbox"
	:aria-checked="showUserAvatars"
	@click="showUserAvatars = !showUserAvatars"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': showUserAvatars }"
	:aria-hidden="true"
	/>{{ $t('settings.mention_link_show_avatar_quick') }}
	</button>
	</div>
	<div
	v-if="!conversation"
	class="menu-item dropdown-item -icon"
	>
	<button
	class="main-button"
	role="menuitemcheckbox"
	:aria-checked="autoUpdate"
	@click="autoUpdate = !autoUpdate"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': autoUpdate }"
	:aria-hidden="true"
	/>{{ $t('settings.auto_update') }}
	</button>
	</div>
	<div
	v-if="!conversation"
	class="menu-item dropdown-item -icon"
	>
	<button
	class="main-button"
	role="menuitemcheckbox"
	:aria-checked="collapseWithSubjects"
	@click="collapseWithSubjects = !collapseWithSubjects"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': collapseWithSubjects }"
	:aria-hidden="true"
	/>{{ $t('settings.collapse_subject') }}
	</button>
	</div>
	<div class="menu-item dropdown-item -icon">
	<button
	class="main-button"
	role="menuitem"
	@click="openTab('general')"
	>
	<FAIcon
	icon="wrench"
	fixed-width
	/>{{ $t('settings.more_settings') }}
	</button>
	</div>
	</div>
	</template>
	<template #trigger>
	<FAIcon icon="bars" />
	</template>
	</Popover>
	</template>

	<script src="./quick_view_settings.js"></script>
	diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.scss b/src/components/settings_modal/admin_tabs/emoji_tab.scss
	index fd5b53caa5..132c93751f 100644
	--- a/src/components/settings_modal/admin_tabs/emoji_tab.scss
	+++ b/src/components/settings_modal/admin_tabs/emoji_tab.scss
	@@ -1,124 +1,120 @@
	.EmojiTab {
	.setting-list {
	margin: 0.5em 2em;
	}

	.setting-section {
	margin-left: 0.5em;
	margin-right: 0.5em;
	}

	.toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;

	.header-buttons {
	display: flex;
	flex: 1 0 auto;
	justify-content: end;
	align-items: end;

	&:not(.btn-group) {
	gap: 0.5em;
	}

	.header-text {
	flex: 1 0 auto;
	}
	}

	.button-default {
	flex: 0 0 auto;
	padding: 0.5em;
	font-size: 1rem;
	}
	-
	- .popover-wrapper {
	- display: flex;
	- }
	}

	.selector-buttons,
	.meta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-left: 1em;
	}

	h5 {
	margin-top: 1em;
	margin-bottom: 0.25em;
	}

	h3.toolbar {
	align-items: end;
	}

	.emoji-info-input {
	width: 100%;
	}

	.emoji-data-input {
	width: 40%;
	margin-left: 0.5em;
	margin-right: 0.5em;
	}

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

	.emoji-unsaved {
	box-shadow: 0 3px 5px var(--cBlue);
	}

	.emoji-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;

	.button-unstyled {
	display: flex;
	}

	.emoji-item,
	.placeholder {
	width: 2em;
	height: 2em;
	opacity: 0.5;
	}

	.placeholder {
	background: var(--textFaint);
	border-radius: 0.5em;
	}
	}
	}

	.emoji-tab-popover-button:not(:first-child) {
	margin-left: 0.5em;
	}

	.emoji-tab-popover-input {
	margin-bottom: 0.5em;

	label {
	display: block;
	margin-bottom: 0.5em;
	}

	input {
	width: 20em;
	}

	.emoji-tab-popover-file {
	padding-top: 3px;
	}

	.warning {
	color: var(--cOrange);
	}
	}
	diff --git a/src/components/settings_modal/helpers/draft_buttons.vue b/src/components/settings_modal/helpers/draft_buttons.vue
	index 82692067a7..eee04df732 100644
	--- a/src/components/settings_modal/helpers/draft_buttons.vue
	+++ b/src/components/settings_modal/helpers/draft_buttons.vue
	@@ -1,85 +1,85 @@
	<!-- this is a helper exclusive to Setting components -->
	<!-- TODO make it reusable -->
	<template>
	<span
	v-if="$parent.isDirty \|\| $parent.canHardReset"
	class="DraftButtons"
	>
	<Popover
	v-if="$parent.isDirty"
	trigger="hover"
	normal-button
	- :trigger-attrs="{ 'aria-label': $t('settings.commit_value_tooltip') }"
	+ :aria-label="$t('settings.commit_value_tooltip')"
	@click="$parent.commitDraft"
	>
	<template #trigger>
	{{ $t('settings.commit_value') }}
	</template>
	<template #content>
	<div class="modified-tooltip">
	{{ $t('settings.commit_value_tooltip') }}
	</div>
	</template>
	</Popover>
	<Popover
	v-if="$parent.isDirty"
	trigger="hover"
	normal-button
	- :trigger-attrs="{ 'aria-label': $t('settings.reset_value_tooltip') }"
	+ :aria-label="$t('settings.reset_value_tooltip')"
	@click="$parent.reset"
	>
	<template #trigger>
	{{ $t('settings.reset_value') }}
	</template>
	<template #content>
	<div class="modified-tooltip">
	{{ $t('settings.reset_value_tooltip') }}
	</div>
	</template>
	</Popover>
	<Popover
	v-if="$parent.canHardReset"
	trigger="hover"
	normal-button
	- :trigger-attrs="{ 'aria-label': $t('settings.hard_reset_value_tooltip') }"
	+ :aria-label="$t('settings.hard_reset_value_tooltip')"
	@click="$parent.hardReset"
	>
	<template #trigger>
	{{ $t('settings.hard_reset_value') }}
	</template>
	<template #content>
	<div class="modified-tooltip">
	{{ $t('settings.hard_reset_value_tooltip') }}
	</div>
	</template>
	</Popover>
	</span>
	</template>

	<script>
	import Popover from 'src/components/popover/popover.vue'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faWrench } from '@fortawesome/free-solid-svg-icons'

	library.add(faWrench)

	export default {
	components: { Popover },
	}
	</script>

	<style lang="scss">
	.DraftButtons {
	display: inline-flex;
	position: relative;
	gap: 0.5em;
	margin-top: 0.5em
	}

	.draft-tooltip {
	margin: 0.5em 1em;
	min-width: 10em;
	text-align: center;
	}
	</style>
	diff --git a/src/components/settings_modal/helpers/help_indicator.vue b/src/components/settings_modal/helpers/help_indicator.vue
	index f1007883ab..6332455a36 100644
	--- a/src/components/settings_modal/helpers/help_indicator.vue
	+++ b/src/components/settings_modal/helpers/help_indicator.vue
	@@ -1,44 +1,44 @@
	<template>
	<span class="HelpIndicator">
	<Popover
	trigger="click"
	- :trigger-attrs="{ 'aria-label': $t('settings.setting_changed') }"
	+ :aria-label="$t('settings.setting_changed')"
	>
	<template #trigger>
	<FAIcon icon="circle-question" />
	</template>
	<template #content>
	<div class="help-tooltip">
	<slot />
	</div>
	</template>
	</Popover>
	</span>
	</template>

	<script>
	import Popover from 'src/components/popover/popover.vue'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons'

	library.add(faCircleQuestion)

	export default {
	components: { Popover },
	}
	</script>

	<style lang="scss">
	.HelpIndicator {
	display: inline-block;
	position: relative;
	}

	.help-tooltip {
	margin: 0.5em 1em;
	min-width: 10em;
	max-width: 30vw;
	text-align: center;
	}
	</style>
	diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue
	index ea71936da0..01993d42a1 100644
	--- a/src/components/settings_modal/helpers/modified_indicator.vue
	+++ b/src/components/settings_modal/helpers/modified_indicator.vue
	@@ -1,55 +1,55 @@
	<template>
	<span
	v-if="changed"
	class="ModifiedIndicator"
	>
	<Popover
	trigger="hover"
	- :trigger-attrs="{ 'aria-label': $t('settings.setting_changed') }"
	+ :aria-label="$t('settings.setting_changed')"
	>
	<template #trigger>
	<FAIcon
	icon="wrench"
	/>
	</template>
	<template #content>
	<div class="modified-tooltip">
	{{ $t(messageKey) }}
	</div>
	</template>
	</Popover>
	</span>
	</template>

	<script>
	import Popover from 'src/components/popover/popover.vue'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faWrench } from '@fortawesome/free-solid-svg-icons'

	library.add(faWrench)

	export default {
	components: { Popover },
	props: {
	changed: Boolean,
	messageKey: {
	type: String,
	default: 'settings.setting_changed',
	},
	},
	}
	</script>

	<style lang="scss">
	.ModifiedIndicator {
	display: inline-block;
	position: relative;
	}

	.modified-tooltip {
	margin: 0.5em 1em;
	min-width: 10em;
	text-align: center;
	}
	</style>
	diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
	index b4f644065d..9013ad2639 100644
	--- a/src/components/settings_modal/settings_modal.scss
	+++ b/src/components/settings_modal/settings_modal.scss
	@@ -1,324 +1,320 @@
	.settings-modal {
	overflow: hidden;

	h2 {
	font-size: 1.3rem;
	font-weight: 500;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-right: 1em;
	}

	h3 {
	font-size: 1.2rem;
	font-weight: 500;
	margin-top: 1em;
	margin-bottom: 0.5em;
	margin-right: 1em;
	border-bottom: 1px solid var(--border);
	padding-bottom: 0.25em;
	box-sizing: border-box;
	padding-left: 0.5em;
	}

	h4 {
	font-size: 1.1rem;
	margin-top: 1em;
	margin-right: 1em;
	margin-bottom: 0.5em;
	margin-left: 1em;
	}

	h5 {
	font-size: 1rem;
	margin-left: 1em;
	margin-bottom: 0.25em;
	margin-top: 0.75em;
	}

	.toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: end;

	.header-buttons {
	display: flex;
	flex: 1 0 auto;
	justify-content: end;
	align-items: end;

	&:not(.btn-group) {
	gap: 0.5em;
	}

	.header-text {
	flex: 1 0 auto;
	}
	}

	.button-default {
	flex: 0 0 auto;
	padding: 0.5em;
	font-size: 1rem;
	}
	-
	- .popover-wrapper {
	- display: flex;
	- }
	}

	p {
	line-height: 1.5;
	margin-left: 2em;
	}

	.sidenote {
	margin-left: 5em;
	padding: 0.25em 1em;
	margin-top: 0.25em;
	}

	.setting-description {
	margin-top: 0.2em;
	margin-bottom: 0;
	margin-left: 0;
	font-size: 80%;
	}

	.setting-item {
	display: grid;
	grid-template-areas:
	"label control"
	"label desc"
	". draft";
	grid-template-columns: 4fr 5fr;
	column-gap: 0.5em;
	align-items: baseline;
	padding: 0.5em 0;
	line-height: 1.5em;

	.setting-label {
	grid-area: label;
	text-align: right;
	}

	.ModifiedIndicator,
	.LocalSettingIndicator {
	grid-area: indicator;
	}

	.setting-control {
	grid-area: control;

	&.textarea {
	align-self: baseline;
	overflow: auto;
	}

	&.checkbox {
	display: grid;
	grid-template-columns: subgrid;

	.label {
	grid-area: label;
	text-align: right;
	}

	.checkbox-indicator {
	grid-area: control;
	height: 1.5em;
	line-height: 1.5em;
	align-self: baseline;
	}

	.-mobile & {
	.label {
	text-align: left;
	}
	}
	}
	}

	.setting-control.setting-label {
	grid-column: 1 / 3;
	text-align: left;
	}

	.setting-description {
	grid-area: desc;
	}

	.DraftButtons {
	grid-area: draft;
	}
	}

	.vertical-tab-switcher {
	height: 100%;
	}

	.setting-list,
	.option-list {
	list-style-type: none;
	padding-left: 0;
	margin: 0;

	&.suboptions {
	margin-left: 2em;
	border-top: 1px dotted var(--border);
	border-bottom: 1px dotted var(--border);
	}


	.btn:not(.dropdown-button) {
	padding: 0 2em;
	}

	.btn-group {
	.button-default {
	flex: 0 1 auto;
	}
	}

	&.two-column {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-left: 2em;
	border-bottom: 1px solid var(--border);
	padding-bottom: 0.5em;
	margin-bottom: 1em;

	.setting-item {
	grid-template-columns: 3fr 1fr;
	}

	> li {
	margin: 0;
	break-inside: avoid;
	}
	}
	}

	.settings-modal-panel {
	overflow: hidden;
	transition: transform;
	transition-timing-function: ease-in-out;
	transition-duration: 300ms;
	width: 70em;
	max-width: 90vw;
	height: 90vh;

	@media all and (width <= 800px) {
	max-width: 100vw;
	height: 100%;
	}

	>.panel-body {
	height: 100%;
	overflow-y: hidden;

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

	.settings-footer {
	display: flex;
	flex-wrap: wrap;
	line-height: 2;

	>* {
	margin-right: 0.5em;
	}

	.extra-content {
	display: flex;
	flex-grow: 1;
	}
	}

	&.-mobile {
	.tabs {
	.menu-item {
	font-size: 1.2em;
	padding-top: 0.75em;
	padding-bottom: 0.75em;
	}
	}

	li {
	.sidenote {
	margin-left: 1em;
	}
	}

	/* stylelint-disable no-descending-specificity */
	.setting-item {
	grid-template-columns: 1fr min-content;
	column-gap: 0.5em;
	padding: 1em;
	align-items: center;

	.setting-label {
	text-align: left;
	}

	.checkbox {
	.label {
	text-align: left;
	order: 2;
	}

	.checkbox-indicator {
	order: 1;
	}
	}

	}

	ul {
	padding: 0;

	li:not(:first-child) {
	.setting-item {
	border-top: 1px solid var(--border);
	}
	}
	}

	.setting-list:not(.suboptions),
	.option-list {
	&.two-column {
	grid-template-columns: 1fr;
	}
	}

	.UnitSetting {
	padding-right: 0.5em;
	}
	}

	&.minimize {
	.settings-modal-panel {
	/* Explanation:
	* Modal is positioned vertically centered.
	* 100vh - 100% = Distance between modal's top+bottom boundaries and screen
	* (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
	* + 100% - we move modal completely off-screen, it's top boundary touches
	* bottom of the screen
	* - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
	*/
	transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));

	@media all and (width <= 800px) {
	/* For mobile, the modal takes 100% of the available screen.
	This ensures the minimized modal is always 50px above the browser bottom
	bar regardless of whether or not it is visible.
	*/
	transform: translateY(calc(100% - 50px));
	}
	}
	}
	}
	diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js
	index 97c9ac6920..4a948ecd09 100644
	--- a/src/components/status_action_buttons/action_button.js
	+++ b/src/components/status_action_buttons/action_button.js
	@@ -1,177 +1,177 @@
	import Popover from 'src/components/popover/popover.vue'
	import StatusBookmarkFolderMenu from 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
	import EmojiPicker from '../emoji_picker/emoji_picker.vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useStatusesStore } from 'src/stores/statuses.js'
	import { useUsersStore } from 'src/stores/users.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBookmark as faBookmarkRegular,
	faFaceSmileBeam,
	faStar as faStarRegular,
	} from '@fortawesome/free-regular-svg-icons'
	import {
	faBookmark,
	faCheck,
	faChevronDown,
	faChevronRight,
	faComments,
	faExternalLinkAlt,
	faEye,
	faEyeSlash,
	faHistory,
	faList,
	faMinus,
	faPencil,
	faPlus,
	faReply,
	faRetweet,
	faShareAlt,
	faStar,
	faThumbtack,
	faTimes,
	faWrench,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faPlus,
	faMinus,
	faCheck,
	faTimes,
	faWrench,

	faChevronRight,
	faChevronDown,

	faReply,
	faRetweet,
	faStar,
	faStarRegular,
	faFaceSmileBeam,

	faBookmark,
	faBookmarkRegular,
	faEyeSlash,
	faEye,
	faThumbtack,
	faPencil,
	faShareAlt,
	faComments,
	faList,
	faExternalLinkAlt,
	faHistory,
	)

	export default {
	- props: [
	- 'button',
	- 'status',
	- 'extra',
	- 'status',
	- 'funcArg',
	- 'getClass',
	- 'getComponent',
	- 'doAction',
	- 'outerClose',
	- 'defaultButtonStyle',
	- 'hideLabel',
	- ],
	+ props: {
	+ button: Object,
	+ status: Object,
	+ extra: Boolean,
	+ funcArg: Function,
	+ getClass: Function,
	+ getComponent: Function,
	+ doAction: Function,
	+ outerClose: Function,
	+ defaultButtonStyle: Boolean,
	+ hideLabel: Boolean,
	+ popoverTrigger: Boolean,
	+ },
	components: {
	StatusBookmarkFolderMenu,
	EmojiPicker,
	Popover,
	},
	data: () => ({
	animationState: false,
	}),
	computed: {
	buttonClass() {
	return [
	this.button.name + '-button',
	{
	'-with-extra': this.button.name === 'bookmark',
	'-extra': this.extra,
	'-quick': !this.extra,
	},
	]
	},
	userIsMuted() {
	return useUsersStore().relationship(this.status.user.id).muting
	},
	threadIsMuted() {
	return this.status.thread_muted
	},
	hideCustomEmoji() {
	return !useInstanceCapabilitiesStore()
	.pleromaCustomEmojiReactionsAvailable
	},
	hidePostStats() {
	return useMergedConfigStore().mergedConfig.hidePostStats
	},
	buttonInnerClass() {
	const buttonStyleClass = this.defaultButtonStyle
	? 'button-default'
	: 'button-unstyled'
	return [
	this.button.name + '-button',
	{
	'main-button': this.extra,
	[buttonStyleClass]: !this.extra,
	'-active': this.button.active?.(this.funcArg),
	disabled: this.button.interactive
	? !this.button.interactive(this.funcArg)
	: false,
	},
	]
	},
	remoteInteractionLink() {
	return useInstanceStore().getRemoteInteractionLink({
	statusId: this.status.id,
	})
	},
	},
	methods: {
	addReaction(event) {
	const emoji = event.insertion
	const existingReaction = this.status.emoji_reactions.find(
	(r) => r.name === emoji,
	)
	if (existingReaction?.me) {
	useStatusesStore().unreactWithEmoji(this.status.id, emoji)
	} else {
	useStatusesStore().reactWithEmoji(this.status.id, emoji)
	}
	},
	onShowEmojiPicker() {
	this.$emit('emojiPickerShown', true)
	},
	onHideEmojiPicker() {
	this.$emit('emojiPickerShown', false)
	},
	doActionWrap(
	button,
	close = () => {
	/* no-op */
	},
	) {
	if (
	this.button.interactive ? !this.button.interactive(this.funcArg) : false
	)
	return
	if (button.name === 'emoji') {
	this.$refs.picker.togglePicker()
	} else {
	this.animationState = true
	this.getComponent(button) === 'button' && this.doAction(button)
	setTimeout(() => {
	this.animationState = false
	}, 500)
	if (!this.button.dropdown) close()
	}
	},
	},
	}
	diff --git a/src/components/status_action_buttons/action_button.scss b/src/components/status_action_buttons/action_button.scss
	index 0bc72bc9bb..25d7b71d46 100644
	--- a/src/components/status_action_buttons/action_button.scss
	+++ b/src/components/status_action_buttons/action_button.scss
	@@ -1,138 +1,132 @@
	@use "../../mixins";
	/* stylelint-disable declaration-no-important */

	.quick-action {
	justify-content: space-between;
	display: flex;
	align-items: baseline;
	align-items: center;
	border: 2px solid transparent;

	- .chevron-popover {
	- .popover-trigger-button {
	- display: flex;
	- }
	- }
	-
	.action-counter {
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	.action-button-inner,
	.extra-button {
	padding: 0.5em;
	z-index: 1;
	}

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

	.action-button-inner {
	display: grid;
	gap: 0.125em;
	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;
	}
	}
	}

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

	.action-button-inner {
	opacity: 0.8;
	padding-right: 0;
	pointer-events: none;
	}

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

	&.-with-extra {
	.action-button-inner,
	.extra-button {
	padding-left: 0.25em;
	padding-right: 0.25em;
	}
	}
	}

	.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-left: 1em;
	}

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

	.extra-button {
	justify-self: end;
	justify-content: end;
	}
	}
	}
	diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue
	index 458477f8f0..82c5ec811c 100644
	--- a/src/components/status_action_buttons/action_button.vue
	+++ b/src/components/status_action_buttons/action_button.vue
	@@ -1,111 +1,112 @@
	<template>
	<div
	class="action-button"
	:class="buttonClass"
	+ role="presentation"
	>
	<component
	- :is="getComponent(button)"
	+ :is="popoverTrigger ? 'span' : getComponent(button)"
	class="action-button-inner"
	:class="buttonInnerClass"
	- role="menuitem"
	+ :role="popoverTrigger ? 'presentation' : 'button'"
	type="button"
	placement="bottom"
	:title="$t(button.label(funcArg))"
	target="_blank"
	:tabindex="0"
	:disabled="button.interactive ? !button.interactive(funcArg) : false"
	:href="getComponent(button) == 'a' ? button.link?.(funcArg) \|\| remoteInteractionLink : undefined"
	@click="doActionWrap(button, outerClose)"
	>
	<FALayers>
	<FAIcon
	class="fa-scale-110"
	:icon="button.icon(funcArg)"
	:spin="!extra && getComponent(button) == 'button' && button.animated?.() && animationState"
	:style="{ '--fa-animation-duration': '750ms' }"
	fixed-width
	/>
	<template v-if="!buttonClass.disabled && (!button.interactive \|\| button?.interactive(funcArg)) && button.toggleable?.(funcArg) && button.active">
	<FAIcon
	v-if="button.active(funcArg) && button.activeIndicator?.() !== null"
	class="active-marker"
	transform="shrink-6 up-9 left-12"
	:icon="button.activeIndicator?.(funcArg) \|\| 'check'"
	/>
	<FAIcon
	v-if="!button.active(funcArg)"
	class="focus-marker"
	transform="shrink-6 up-9 left-12"
	:icon="button.openIndicator?.(funcArg) \|\| 'plus'"
	/>
	<FAIcon
	v-else
	class="focus-marker"
	transform="shrink-6 up-9 left-12"
	:icon="button.closeIndicator?.(funcArg) \|\| 'minus'"
	/>
	</template>
	</FALayers>
	<span
	v-if="extra"
	class="action-label"
	>
	{{ $t(button.label(funcArg)) }}
	</span>
	<FAIcon
	v-if="button.dropdown?.()"
	class="chevron-icon"
	:icon="extra ? 'chevron-right' : 'chevron-down'"
	fixed-width
	/>
	</component>
	<span
	v-if="!hidePostStats && button.counter?.(funcArg) > 0 && !hideLabel"
	class="action-counter"
	>
	{{ button.counter?.(funcArg) }}
	</span>
	<span
	v-if="!extra && button.name === 'bookmark'"
	class="separator"
	/>
	<Popover
	v-if="button.name === 'bookmark'"
	- class="chevron-popover"
	+ class="extra-button"
	:trigger="extra ? 'hover' : 'click'"
	:placement="extra ? 'right' : 'bottom'"
	:offset="extra ? { x: 10 } : { y: 10 }"
	- :trigger-attrs="{ class: 'extra-button', role: 'menuitem', 'aria-label': $t('nav.bookmark_folders') }"
	+ :aria-label="$t('nav.bookmark_folders')"
	>
	<template #trigger>
	<FAIcon
	class="chevron-icon"
	:icon="extra ? 'chevron-right' : 'chevron-down'"
	fixed-width
	/>
	</template>
	<template #content="{close}">
	<StatusBookmarkFolderMenu
	v-if="button.name === 'bookmark'"
	:status="status"
	@close="() => { close(); outerClose?.() }"
	/>
	</template>
	</Popover>

	<EmojiPicker
	v-if="button.name === 'emoji'"
	ref="picker"
	:enable-sticker-picker="false"
	:hide-custom-emoji="hideCustomEmoji"
	class="emoji-picker-panel"
	@emoji="addReaction"
	@show="onShowEmojiPicker"
	@close="onHideEmojiPicker"
	/>
	</div>
	</template>

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

	<style lang="scss" src="./action_button.scss" />
	diff --git a/src/components/status_action_buttons/action_button_container.vue b/src/components/status_action_buttons/action_button_container.vue
	index ff08507cba..2fd6b45a68 100644
	--- a/src/components/status_action_buttons/action_button_container.vue
	+++ b/src/components/status_action_buttons/action_button_container.vue
	@@ -1,162 +1,162 @@
	<template>
	<div role="presentation">
	<Popover
	v-if="button.dropdown?.()"
	:trigger="$attrs.extra ? 'hover' : 'click'"
	:offset="{ y: 5 }"
	:placement="$attrs.extra ? 'right' : 'bottom'"
	- :trigger-attrs="{ role: 'presentation' }"
	>
	<template #trigger>
	<ActionButton
	:button="button"
	:status="status"
	:hide-label="hideLabel"
	+ popover-trigger
	v-bind.prop="$attrs"
	/>
	</template>
	<template #content>
	<div
	v-if="button.name === 'changeScope'"
	:id="`popup-menu-scope-${randomSeed}`"
	class="dropdown-menu"
	role="menu"
	>
	<div
	v-for="visibility in availableScopes"
	:key="visibility"
	class="menu-item dropdown-item extra-action -icon"
	>
	<button
	class="main-button"
	@click="() => setScope(visibility)"
	>
	<FAIcon
	:icon="visibilityIcon(visibility)"
	fixed-width
	/>
	{{ $t('general.scope_in_timeline.' + visibility) }}
	</button>
	</div>
	<div
	v-if="status.nsfw"
	class="menu-item dropdown-item extra-action -icon"
	>
	<button
	class="main-button"
	@click="() => setSensitive(false)"
	>
	<FAIcon
	icon="eye"
	fixed-width
	/>
	{{ $t('status.mark_as_non-sensitive') }}
	</button>
	</div>
	<div
	v-else
	class="menu-item dropdown-item extra-action -icon"
	>
	<button
	class="main-button"
	@click="() => setSensitive(true)"
	>
	<FAIcon
	icon="eye-slash"
	fixed-width
	/>
	{{ $t('status.mark_as_sensitive') }}
	</button>
	</div>
	</div>
	<div
	v-if="button.name === 'mute'"
	:id="`popup-menu-${randomSeed}`"
	class="dropdown-menu"
	role="menu"
	>
	<div class="menu-item dropdown-item extra-action -icon">
	<button
	class="main-button"
	@click="toggleUserMute"
	>
	<FAIcon
	icon="user"
	fixed-width
	/>
	<template v-if="userIsMuted">
	{{ $t('status.unmute_user') }}
	</template>
	<template v-else>
	{{ $t('status.mute_user') }}
	</template>
	</button>
	</div>
	<div class="menu-item dropdown-item extra-action -icon">
	<button
	class="main-button"
	@click="toggleConversationMute"
	>
	<FAIcon
	icon="folder-tree"
	fixed-width
	/>
	<template v-if="conversationIsMuted">
	{{ $t('status.unmute_conversation') }}
	</template>
	<template v-else>
	{{ $t('status.mute_conversation') }}
	</template>
	</button>
	</div>
	<div class="menu-item dropdown-item extra-action -icon">
	<button
	class="main-button"
	@click="toggleDomainMute"
	>
	<FAIcon
	icon="globe"
	fixed-width
	/>
	<template v-if="domainIsMuted">
	{{ $t('status.unmute_domain') }}
	</template>
	<template v-else>
	{{ $t('status.mute_domain') }}
	</template>
	</button>
	</div>
	</div>
	</template>
	</Popover>
	<ActionButton
	v-else
	:button="button"
	:status="status"
	:hide-label="hideLabel"
	v-bind="$attrs"
	@emoji-picker-shown="e => $emit('emojiPickerShown', e)"
	/>
	<teleport to="#modal">
	<MuteConfirm
	ref="confirmConversation"
	type="conversation"
	:status="status"
	:user="user"
	/>
	<MuteConfirm
	ref="confirmDomain"
	type="domain"
	:status="status"
	:user="user"
	/>
	<UserTimedFilterModal
	ref="confirmUser"
	:is-mute="true"
	:user="user"
	/>
	</teleport>
	</div>
	</template>

	<script src="./action_button_container.js" />
	diff --git a/src/components/status_action_buttons/status_action_buttons.scss b/src/components/status_action_buttons/status_action_buttons.scss
	index bad4595fe4..756f640001 100644
	--- a/src/components/status_action_buttons/status_action_buttons.scss
	+++ b/src/components/status_action_buttons/status_action_buttons.scss
	@@ -1,34 +1,28 @@
	@use "../../mixins";

	.StatusActionButtons {
	.quick-action-buttons {
	display: grid;
	margin-left: -0.5em;
	grid-template-columns: repeat(auto-fill, minmax(3.75em, 10%));
	grid-auto-flow: row dense;
	grid-auto-rows: 1fr;
	gap: 0.5em 0.1em;
	}

	.pin-action-button {
	display: flex;
	z-index: 1;
	padding: 0.5em;
	margin: 0;
	}
	-
	- .quick-action.popover-wrapper {
	- button {
	- padding: 0
	- }
	- }
	}
	// popover
	.extra-action-buttons {
	.extra-action {
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 0;
	}
	}
	diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue
	index 7539e2280e..2d2d1c8cd5 100644
	--- a/src/components/status_action_buttons/status_action_buttons.vue
	+++ b/src/components/status_action_buttons/status_action_buttons.vue
	@@ -1,143 +1,142 @@
	<template>
	<div class="StatusActionButtons">
	<span
	class="quick-action-buttons"
	:class="{ '-pin': showPin }"
	- role="menubar"
	+ role="toolbar"
	:aria-label="$t('status.status_actions')"
	>
	<span
	v-for="button in quickButtons"
	:key="button.name"
	class="quick-action"
	role="presentation"
	:class="{ '-pin': showPin, '-toggle': button.dropdown?.(), '-with-extra': button.name === 'bookmark' }"
	>
	<ActionButtonContainer
	:class="{ '-pin': showPin }"
	:button="button"
	:status="status"
	:extra="false"
	:func-arg="funcArg"
	:get-class="getClass"
	:get-component="getComponent"
	:close="() => { /* no-op */ }"
	:do-action="doAction"
	:default-button-style="useDefaultButtons"
	:hide-label="hideLabels"
	@emoji-picker-shown="onEmojiPickerShown"
	/>
	<button
	v-if="showPin && currentUser"
	type="button"
	class="button-unstyled pin-action-button"
	:title="$t('general.unpin')"
	:aria-pressed="true"
	@click.stop.prevent="unpin(button)"
	>
	<FAIcon
	v-if="showPin && currentUser"
	fixed-width
	icon="thumbtack"
	/>
	</button>
	</span>
	<Popover
	trigger="click"
	- :trigger-attrs="triggerAttrs"
	+ v-bind="triggerAttrs"
	:normal-button="useDefaultButtons"
	class="quick-action"
	role="presentation"
	placement="bottom"
	:offset="{ y: 5 }"
	remove-padding
	@close="onExtraClose"
	>
	<template #trigger>
	<FAIcon
	class="action-button-inner"
	icon="ellipsis-h"
	/>
	</template>
	<template #content="{close, resize}">
	<div
	:id="`popup-menu-${randomSeed}`"
	class="dropdown-menu extra-action-buttons"
	role="menu"
	>
	<div
	v-for="button in extraButtons"
	:key="button.name"
	class="menu-item dropdown-item extra-action -icon"
	:disabled="getClass(button).disabled"
	:class="{ disabled: getClass(button).disabled }"
	>
	<ActionButtonContainer
	:button="button"
	:status="status"
	:extra="true"
	:func-arg="funcArg"
	:get-class="getClass"
	:get-component="getComponent"
	:outer-close="close"
	:do-action="doAction"
	:default-button-style="useDefaultButtons"
	:hide-label="hideLabels"
	/>
	<button
	v-if="showPin && currentUser"
	type="button"
	class="button-unstyled pin-action-button extra-button"
	:title="$t('general.pin')"
	:aria-pressed="false"
	@click.stop.prevent="pin(button)"
	>
	<FAIcon
	v-if="showPin && currentUser"
	fixed-width
	class="fa-scale-110"
	transform="rotate-45"
	icon="thumbtack"
	/>
	</button>
	</div>
	<div
	v-if="currentUser"
	class="menu-item dropdown-item extra-action -icon"
	>
	<button
	class="main-button"
	- role="menuitem"
	:tabindex="0"
	@click.stop="() => { resize(); showPin = !showPin }"
	>
	<FAIcon
	class="fa-scale-110"
	fixed-width
	icon="wrench"
	/><span>{{ $t('nav.edit_pinned') }}</span>
	</button>
	</div>
	</div>
	</template>
	</Popover>
	</span>

	<teleport to="#modal">
	<ConfirmModal
	v-if="showingConfirmDialog"
	:title="currentConfirmTitle"
	:confirm-text="currentConfirmOkText"
	:cancel-text="currentConfirmCancelText"
	@accepted="currentConfirmAction"
	@cancelled="showingConfirmDialog = false"
	>
	{{ currentConfirmBody }}
	</ConfirmModal>
	</teleport>
	</div>
	</template>

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

	<style lang="scss" src="./status_action_buttons.scss"></style>
	diff --git a/src/components/tooltip/tooltip.vue b/src/components/tooltip/tooltip.vue
	index 2c1ce71e1a..7b0818cb12 100644
	--- a/src/components/tooltip/tooltip.vue
	+++ b/src/components/tooltip/tooltip.vue
	@@ -1,33 +1,32 @@
	<template>
	<Popover
	trigger="hover"
	tooltip
	- :trigger-attrs="{ 'aria-label': props.text }"
	- v-bind="$attrs"
	+ v-bind="{ 'aria-label': props.text, ...$attrs }"
	>
	<template #trigger>
	<slot />
	</template>
	<template #content>
	<div class="tooltip" role="tooltip" :id="idPrefix + 'content'">
	{{ props.text }}
	</div>
	</template>
	</Popover>
	</template>

	<script setup>
	import { useId, computed } from 'vue'

	import Popover from 'src/components/popover/popover.vue'

	const props = defineProps({ text: String })
	const uniqueId = useId()
	const idPrefix = computed(() => `tooltip-${uniqueId.value}`)
	</script>

	<style lang="scss">
	.tooltip {
	margin: 0.5em 1em;
	}
	</style>
	diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
	index e7216b8d19..d14db68bf9 100644
	--- a/src/components/user_card/user_card.vue
	+++ b/src/components/user_card/user_card.vue
	@@ -1,895 +1,892 @@
	<template>
	<div class="user-card">
	<div class="user-card-inner">
	<div class="user-info">
	<div
	class="user-identity"
	:class="{ '-compact': compact }"
	>
	<div class="header-overlay">
	<div class="banner-image">
	<img
	:title="$t('user_card.banner')"
	:src="bannerImgSrc"
	:class="{ 'hide-bio': hideBio }"
	>
	</div>
	<div
	class="banner-overlay"
	:class="{ 'hide-bio': hideBio }"
	/>
	</div>
	<a
	v-if="avatarAction === 'zoom'"
	class="user-info-avatar -link"
	@click="zoomAvatar"
	:title="$t('user_card.avatar')"
	>
	<UserAvatar :user-id="user.id" />
	<div class="user-info-avatar -link -overlay">
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="search-plus"
	/>
	</div>
	</a>
	<button
	v-else-if="editable"
	class="user-info-avatar button-unstyled -link"
	:class="{ '-editable': editable }"
	@click="changeAvatar"
	:title="$t('user_card.avatar')"
	>
	<UserAvatar
	:user-id="user.id"
	:url="avatarImgSrc"
	/>
	<div class="user-info-avatar -link -overlay">
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="pencil"
	/>
	</div>
	</button>
	<UserAvatar
	v-else-if="typeof avatarAction === 'function'"
	class="user-info-avatar"
	:user-id="user.id"
	@click="avatarAction"
	:title="$t('user_card.avatar')"
	/>
	<router-link
	v-else
	class="user-info-avatar"
	:to="userProfileLink(user)"
	:title="$t('user_card.avatar')"
	>
	<UserAvatar :user-id="user.id" />
	</router-link>
	<div class="user-summary">
	<div class="top-line">
	<div
	class="other-actions"
	- role="menubar"
	+ role="toolbar"
	:title="$t('user_card.actions')"
	>
	<button
	v-if="editable"
	- role="menuitem"
	:disabled="newName?.length === 0"
	class="btn button-unstyled edit-banner-button"
	@click="changeBanner"
	>
	{{ $t('settings.change_banner') }}
	<FAIcon
	fixed-width
	class="icon"
	icon="pencil"
	:title="$t('settings.change_banner')"
	/>
	</button>
	<button
	v-else-if="!editable && !isOtherUser && user.is_local"
	- role="menuitem"
	class="button-unstyled edit-profile-button"
	:title="$t('user_card.edit')"
	@click.stop="openProfileTab"
	>
	<FAIcon
	fixed-width
	class="icon"
	icon="edit"
	:title="$t('user_card.edit_profile')"
	/>
	</button>
	<a
	v-if="isOtherUser && !user.is_local"
	- role="menuitem"
	+ role="button"
	:title="$t('user_card.external_view')"
	:href="user.statusnet_profile_url"
	target="_blank"
	class="button-unstyled external-link-button"
	>
	<FAIcon
	class="icon"
	icon="external-link-alt"
	/>
	</a>
	<AccountActions
	v-if="isOtherUser && loggedIn && !hideButtons"
	:user="user"
	:relationship="relationship"
	/>
	<router-link
	v-if="showExpand"
	- role="menuitem"
	+ role="button"
	:title="$t('user_card.open_profile')"
	:to="userProfileLink(user)"
	class="button-unstyled external-link-button"
	@click="$emit('close')"
	>
	<FAIcon
	class="icon"
	icon="expand-alt"
	/>
	</router-link>
	<button
	v-if="showClose"
	- role="menuitem"
	:title="$t('general.close')"
	class="button-unstyled external-link-button"
	@click="$emit('close')"
	>
	<FAIcon
	class="icon"
	icon="times"
	/>
	</button>
	</div>
	<div class="name-wrapper">
	<router-link
	v-if="!editable \|\| !editingName"
	:to="userProfileLink(user)"
	class="user-name"
	>
	<RichContent
	:title="editable ? newName : user.name_unescaped"
	:html="editable ? newName : user.name_unescaped"
	:emoji="editable ? emoji : user.emoji"
	:allow-non-square-emoji="allowNonSquareEmoji"
	:pause-mfm="pauseMfm"
	:scale-mfm="scaleMfm"
	/>
	</router-link>
	<EmojiInput
	v-else-if="editingName"
	v-model="newName"
	enable-emoji-picker
	:suggest="emojiSuggestor"
	>
	<template #default="inputProps">
	<input
	id="username"
	v-model="newName"
	class="input name-changer"
	v-bind="propsToNative(inputProps)"
	>
	</template>
	</EmojiInput>
	<button
	v-if="editable"
	class="button-unstyled edit-button"
	:title="$t('settings.toggle_edit')"
	@click="editingName = !editingName"
	>
	<FAIcon
	class="icon"
	icon="pencil"
	/>
	</button>
	</div>
	</div>
	<div class="bottom-line">
	<UserLink
	class="user-screen-name"
	:user="user"
	/>
	<span
	v-if="user.locked"
	class="lock-icon"
	>
	<FAIcon
	icon="lock"
	size="sm"
	/>
	</span>
	<span
	v-if="relationship.followed_by && loggedIn && isOtherUser"
	class="alert neutral user-role"
	>
	{{ $t('user_card.follows_you') }}
	</span>
	<template v-if="!hideBio">
	<span
	v-if="user.deactivated"
	class="alert neutral user-role"
	>
	{{ $t('user_card.deactivated') }}
	</span>
	<span
	v-if="!!visibleRole"
	class="alert neutral user-role"
	>
	{{ $t(`general.role.${visibleRole}`) }}
	</span>
	<span
	v-if="user.actor_type === 'Service'"
	class="alert neutral user-role"
	>
	{{ $t('user_card.bot') }}
	</span>
	<span
	v-if="user.actor_type === 'Group'"
	class="alert neutral user-role"
	>
	{{ $t('user_card.group') }}
	</span>
	<span
	v-for="tag in user.tags"
	:key="tag"
	class="alert warning user-role"
	>
	{{ isKnownTag ? $t('user_card.tags.' + tag) : tag }}
	</span>
	</template>
	</div>
	</div>
	</div>
	<div
	v-if="loggedIn && isOtherUser && !hideButtons"
	class="user-interactions"
	role="menubar"
	:title="$t('user_card.interactions')"
	>
	<div class="btn-group" role="group">
	<FollowButton
	:relationship="relationship"
	:user="user"
	role="menuitem"
	/>
	<template v-if="relationship.following">
	<ProgressButton
	v-if="!relationship.notifying"
	class="btn button-default"
	:click="subscribeUser"
	:title="$t('user_card.subscribe')"
	role="menuitem"
	>
	<FAIcon icon="bell" />
	</ProgressButton>
	<ProgressButton
	v-else
	class="btn button-default toggled"
	:click="unsubscribeUser"
	:title="$t('user_card.unsubscribe')"
	role="menuitem"
	>
	<FALayers>
	<FAIcon
	icon="rss"
	transform="left-5 shrink-6 up-3 rotate-20"
	flip="horizontal"
	/>
	<FAIcon
	icon="rss"
	transform="right-5 shrink-6 up-3 rotate-20"
	/>
	<FAIcon icon="bell" />
	</FALayers>
	</ProgressButton>
	</template>
	</div>
	<button
	v-if="relationship.muting"
	class="btn button-default btn-mute toggled"
	:disabled="user.deactivated"
	@click="unmuteUser"
	role="menuitem"
	>
	{{ $t('user_card.muted') }}
	</button>
	<button
	v-else
	class="btn button-default btn-mute"
	:disabled="user.deactivated"
	@click="muteUser"
	role="menuitem"
	>
	{{ $t('user_card.mute') }}
	</button>
	<button
	class="btn button-default btn-mention"
	:disabled="user.deactivated"
	@click="mentionUser"
	role="menuitem"
	>
	{{ $t('user_card.mention') }}
	</button>
	<ModerationTools
	v-if="showModerationMenu"
	:users="[user]"
	/>
	</div>
	<div
	v-if="!loggedIn && user.is_local"
	class="user-interactions"
	role="menuitem"
	>
	<RemoteFollow :user="user" />
	</div>
	</div>
	</div>
	<div
	v-if="!editable && loggedIn && isOtherUser && (hasNote \|\| !hideBio) && !hideRemarks"
	class="personal-marks"
	>
	<UserNote
	v-if="hasNote \|\| (hasNoteEditor && supportsNote)"
	:user="user"
	:relationship="relationship"
	:editable="hasNoteEditor"
	/>
	<div
	v-if="!hideBio"
	class="highlighter"
	>
	<h4>{{ $t('user_card.highlight_header') }}</h4>
	<Select
	:id="'userHighlightSel'+user.id"
	v-model="userHighlightType"
	class="userHighlightSel unstyled"
	:class="{ '-none': userHighlightType === 'disabled' }"
	>
	<option value="disabled">
	{{ $t('user_card.highlight_new.disabled') }}
	</option>
	<option value="solid">
	{{ $t('user_card.highlight_new.solid') }}
	</option>
	<option value="striped">
	{{ $t('user_card.highlight_new.striped') }}
	</option>
	<option value="side">
	{{ $t('user_card.highlight_new.side') }}
	</option>
	</Select>
	<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
	<ColorInput
	v-if="userHighlightType !== 'disabled'"
	v-model="userHighlightColor"
	class="highlighter-color"
	:show-optional-checkbox="false"
	name="'userHighlightColorTx'+user.id"
	:unstyled="true"
	/>
	</div>
	</div>
	<div
	v-if="user.adminData && !hideBio"
	class="admin-data"
	>
	<details>
	<summary>
	{{ $t('user_card.admin_data.data') }}
	</summary>
	<div class="user-profile-fields">
	<dl class="user-profile-field">
	<dt class="user-profile-field-name">
	{{ $t('admin_dash.users.local_id') }}
	</dt>
	<dd class="user-profile-field-value">
	{{ user.adminData.id }}
	</dd>
	</dl>
	<dl
	v-if="user.is_local"
	class="user-profile-field"
	>
	<dt class="user-profile-field-name">
	{{ $t('admin_dash.users.labels.email') }}
	</dt>
	<dd
	class="user-profile-field-value"
	:class="{ faint: user.adminData.email == null }"
	>
	{{ user.adminData.email == null ? $t('general.not_available') : user.adminData.email }}
	</dd>
	</dl>
	<dl
	v-if="user.is_local"
	class="user-profile-field"
	>
	<dt class="user-profile-field-name">
	{{ $t('general.role.admin') }}
	</dt>
	<dd class="user-profile-field-value">
	{{ $t('general.' + (user.adminData.roles.admin ? 'yes' : 'no')) }}
	</dd>
	</dl>
	<dl
	v-if="user.is_local"
	class="user-profile-field"
	>
	<dt class="user-profile-field-name">
	{{ $t('general.role.moderator') }}
	</dt>
	<dd class="user-profile-field-value">
	{{ $t('general.' + (user.adminData.roles.moderator ? 'yes' : 'no')) }}
	</dd>
	</dl>
	<dl
	v-if="user.is_local"
	class="user-profile-field"
	>
	<dt class="user-profile-field-name">
	{{ $t('admin_dash.users.indicator.confirmed') }}
	</dt>
	<dd class="user-profile-field-value">
	{{ $t('general.' + (user.adminData.is_confirmed ? 'yes' : 'no')) }}
	</dd>
	</dl>
	<dl
	v-if="user.is_local"
	class="user-profile-field"
	>
	<dt class="user-profile-field-name">
	{{ $t('admin_dash.users.indicator.approved') }}
	</dt>
	<dd class="user-profile-field-value">
	{{ $t('general.' + (user.adminData.is_approved ? 'yes' : 'no')) }}
	</dd>
	</dl>
	<dl class="user-profile-field">
	<dt class="user-profile-field-name">
	{{ $t('admin_dash.users.indicator.suggested') }}
	</dt>
	<dd class="user-profile-field-value">
	{{ $t('general.' + (user.adminData.is_suggested ? 'yes' : 'no')) }}
	</dd>
	</dl>
	<details
	v-if="user.is_local"
	open
	>
	<summary>
	{{ $t('user_card.admin_data.registration_reason') }}
	</summary>
	<span>
	{{ user.adminData.registration_reason == null ? $t('general.not_available') : user.adminData.registration_reason }}
	</span>
	</details>
	<details open>
	<summary>
	{{ $t('user_card.admin_data.tags') }}
	</summary>
	<ul>
	<li v-if="user.adminData.tags.length === 0">
	{{ $t('general.none') }}
	</li>
	<li
	v-for="tag in user.adminData.tags"
	:key="tag"
	>
	<code>
	{{ tag }}
	</code>
	{{ ' ' }}
	</li>
	</ul>
	</details>
	</div>
	</details>
	</div>
	<h3 v-if="editable">
	<span>
	{{ $t('settings.bio') }}
	</span>
	{{ ' ' }}
	<button
	class="button-default"
	@click="editingBio = !editingBio"
	>
	{{ $t('settings.toggle_edit') }}
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="pencil"
	/>
	</button>
	</h3>
	<template v-if="!editable \|\| !editingBio">
	<RichContent
	v-if="!hideBio"
	class="user-card-bio"
	:class="{ '-justify-left': mergedConfig.userCardLeftJustify }"
	:html="editable ? escapedNewBio : user.description_html"
	:emoji="editable ? emoji : user.emoji"
	:allow-non-square-emoji="allowNonSquareEmoji"
	:pause-mfm="pauseMfm"
	:scale-mfm="scaleMfm"
	:handle-links="true"
	:aria-label="$t('user_card.bio')"
	role="article"
	/>
	</template>
	<template v-else-if="editingBio">
	<EmojiInput
	v-model="newBio"
	enable-emoji-picker
	class="user-card-bio"
	:class="{ '-justify-left': mergedConfig.userCardLeftJustify }"
	:suggest="emojiUserSuggestor"
	>
	<template #default="inputProps">
	<textarea
	v-model="newBio"
	class="input bio resize-height"
	v-bind="propsToNative(inputProps)"
	:rows="newBio.split(/\n/g).length"
	/>
	</template>
	</EmojiInput>
	</template>
	<h3 v-if="editable">
	<span>
	{{ $t('settings.profile_fields.label') }}
	</span>
	{{ ' ' }}
	<button
	class="button-default"
	@click="editingFields = !editingFields"
	>
	{{ $t('settings.toggle_edit') }}
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="pencil"
	/>
	</button>
	</h3>
	<template v-if="!editable \|\| !editingFields">
	<div
	v-if="!hideBio && user.fields_html && user.fields_html.length > 0"
	class="user-profile-fields"
	>
	<dl
	v-for="(field, index) in (editable ? newFields : user.fields_html)"
	:key="index"
	class="user-profile-field"
	>
	<dt
	:title="field.name"
	class="user-profile-field-name"
	>
	<RichContent
	:html="field.name"
	:emoji="editable ? emoji : user.emoji"
	:allow-non-square-emoji="allowNonSquareEmoji"
	:pause-mfm="pauseMfm"
	:scale-mfm="scaleMfm"
	/>
	</dt>
	<dd
	:title="field.value"
	class="user-profile-field-value"
	>
	<RichContent
	:html="field.value"
	:emoji="editable ? emoji : user.emoji"
	:allow-non-square-emoji="allowNonSquareEmoji"
	:pause-mfm="pauseMfm"
	:scale-mfm="scaleMfm"
	/>
	</dd>
	</dl>
	</div>
	</template>
	<template v-else-if="editingFields">
	<div
	v-if="maxFields > 0"
	class="user-profile-fields"
	>
	<dl
	v-for="(_, i) in newFields"
	:key="i"
	class="user-profile-field"
	>
	<dt
	class="user-profile-field-name -edit"
	>
	<EmojiInput
	v-model="newFields[i].name"
	enable-emoji-picker
	:suggest="emojiSuggestor"
	>
	<template #default="inputProps">
	<input
	v-model="newFields[i].name"
	:placeholder="$t('settings.profile_fields.name')"
	v-bind="propsToNative(inputProps)"
	class="input"
	>
	</template>
	</EmojiInput>
	</dt>
	<dd
	class="user-profile-field-value -edit"
	>
	<EmojiInput
	v-model="newFields[i].value"
	enable-emoji-picker
	:suggest="emojiSuggestor"
	>
	<template #default="inputProps">
	<input
	v-model="newFields[i].value"
	:placeholder="$t('settings.profile_fields.value')"
	v-bind="propsToNative(inputProps)"
	class="input input"
	>
	</template>
	</EmojiInput>
	<button
	class="delete-field button-default -hover-highlight"
	@click="deleteField(i)"
	>
	<!-- TODO something is wrong with v-show here -->
	<FAIcon
	v-if="newFields.length > 1"
	icon="times"
	/>
	</button>
	</dd>
	</dl>
	<button
	v-if="newFields.length < maxFields"
	class="user-profile-field-add add-field button-default -hover-highlight"
	@click="addField"
	>
	<FAIcon
	icon="plus"
	class="icon"
	/>
	<span class="label">
	{{ $t("settings.profile_fields.add_field") }}
	</span>
	</button>
	</div>
	</template>
	<div
	v-if="!hideBio"
	class="user-extras"
	>
	<span
	v-if="!editable && !hideUserStats"
	class="user-stats"
	>
	<dl
	v-if="!hideUserStats && !hideBio"
	class="user-count"
	>
	<dd>{{ user.statuses_count }}</dd>
	{{ ' ' }}
	<dt>{{ $t('user_card.statuses') }}</dt>
	</dl>
	<dl class="user-count">
	<dd>{{ dailyAvg }}</dd>
	{{ ' ' }}
	<dt>{{ $t('user_card.statuses_per_day') }}</dt>
	</dl>
	<dl class="user-count">
	<dd>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</dd>
	{{ ' ' }}
	<dt>{{ $t('user_card.followees') }}</dt>
	</dl>
	<dl class="user-count">
	<dd>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</dd>
	{{ ' ' }}
	<dt>{{ $t('user_card.followers') }}</dt>
	</dl>
	</span>
	<span
	v-if="!hideUserStats"
	class="user-stats"
	>
	<template v-if="!hideBio">
	<dl
	v-if="user.birthday && !editable"
	class="user-count"
	>
	<dd>
	<FAIcon
	class="fa-old-padding"
	icon="birthday-cake"
	/>
	</dd>
	{{ ' ' }}
	<dt>
	{{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
	</dt>
	</dl>
	<div
	v-else-if="editable"
	class="birthday"
	>
	<div>
	<Checkbox v-model="newShowBirthday">
	{{ $t('settings.birthday.show_birthday') }}
	</Checkbox>
	</div>
	<FAIcon
	class="fa-old-padding"
	icon="birthday-cake"
	/>
	{{ $t('settings.birthday.label') }}
	<input
	id="birthday"
	v-model="newBirthday"
	type="date"
	class="input birthday-input"
	>
	</div>
	</template>
	<dl
	v-if="!editable"
	class="user-count"
	>
	<dd>
	{{ $t('user_card.joined') }}
	</dd>
	{{ ' ' }}
	<dt>
	{{ formattedJoinDate }}
	</dt>
	</dl>
	</span>
	</div>
	<template v-if="editable">
	<h3>{{ $t('settings.profile_other') }}</h3>
	<p
	v-if="role === 'admin' \|\| role === 'moderator'"
	class="user-card-setting"
	>
	<Checkbox v-model="newShowRole">
	<template v-if="role === 'admin'">
	{{ $t('settings.show_admin_badge') }}
	</template>
	<template v-if="role === 'moderator'">
	{{ $t('settings.show_moderator_badge') }}
	</template>
	</Checkbox>
	</p>
	<p class="user-card-setting">
	<label>
	{{ $t('settings.actor_type') }}
	<Select v-model="newActorType">
	<option
	v-for="option in availableActorTypes"
	:key="option"
	:value="option"
	>
	{{ $t('settings.actor_type_' + (option === 'Person' ? 'person_proper' : option)) }}
	</option>
	</Select>
	<div v-if="groupActorAvailable">
	<small>
	{{ $t('settings.actor_type_description') }}
	</small>
	</div>
	</label>
	</p>
	<div class="bottom-buttons">
	<button
	v-if="editable"
	:disabled="!somethingToSave"
	class="btn button-default reset-profile-button"
	@click="resetState"
	>
	{{ $t('settings.reset') }}
	<FAIcon
	fixed-width
	class="icon"
	icon="clock-rotate-left"
	:title="$t('user_card.edit_profile')"
	/>
	</button>
	<button
	v-if="editable"
	:disabled="!somethingToSave"
	class="btn button-default save-profile-button"
	@click="updateProfile"
	>
	{{ $t('settings.save') }}
	<FAIcon
	fixed-width
	class="icon"
	icon="save"
	:title="$t('user_card.edit_profile')"
	/>
	</button>
	</div>
	</template>
	<teleport to="#modal">
	<UserTimedFilterModal
	v-if="isOtherUser"
	ref="timedMuteDialog"
	:user="user"
	:is-mute="true"
	/>
	</teleport>
	<teleport to="#modal">
	<DialogModal
	v-if="editImage"
	class="edit-image"
	>
	<template #header>
	{{ editImage === 'avatar' ? $t('settings.change_avatar') : $t('settings.change_banner') }}
	</template>
	<p>
	{{ editImage === 'avatar' ? $t('settings.avatar_size_instruction') : $t('settings.banner_size_instruction' ) }}
	</p>
	<div
	class="image-container"
	:class="{ '-banner': editImage === 'banner' }"
	>
	<image-cropper
	ref="cropper"
	class="cropper"
	:aspect-ratio="editImage === 'avatar' ? 1 : 3"
	@submit="submitImage"
	/>
	</div>
	<button
	id="pick-image"
	class="button-default btn"
	type="button"
	@click="() => $refs.cropper.pickImage()"
	>
	{{ $t('settings.select_picture') }}
	</button>
	<template #footer>
	<button
	class="button-default btn"
	type="button"
	@click="editImage = false"
	>
	{{ $t('image_cropper.cancel') }}
	</button>
	<button
	:title="editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner')"
	class="button-default btn reset-button"
	@click="resetImage"
	>
	{{ editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner' ) }}
	</button>
	<button
	class="button-default btn"
	type="button"
	@click="$refs.cropper.submit(false)"
	>
	{{ $t('image_cropper.save_without_cropping') }}
	</button>
	<button
	class="button-default btn"
	type="button"
	@click="$refs.cropper.submit(true)"
	>
	{{ $t('image_cropper.save') }}
	</button>
	</template>
	</DialogModal>
	</teleport>
	</div>
	</template>

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

	<style lang="scss" src="./user_card.scss" />
	diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue
	index 8b14b61ed5..d87dbcd3a3 100644
	--- a/src/components/user_list_menu/user_list_menu.vue
	+++ b/src/components/user_list_menu/user_list_menu.vue
	@@ -1,43 +1,43 @@
	<template>
	<div class="UserListMenu">
	<Popover
	trigger="hover"
	placement="right"
	- :trigger-attrs="triggerAttrs"
	+ v-bind="triggerAttrs"
	remove-padding
	>
	<template #content>
	<div class="dropdown-menu">
	<div
	v-for="list in lists"
	:key="list.id"
	class="menu-item dropdown-item -icon"
	>
	<button
	class="main-button"
	@click="toggleList(list.id)"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': list.inList }"
	/>
	{{ list.title }}
	</button>
	</div>
	</div>
	</template>
	<template #trigger>
	<span class="main-button">
	{{ $t('lists.manage_lists') }}
	<FAIcon
	class="chevron-icon"
	size="lg"
	icon="chevron-right"
	/>
	</span>
	</template>
	</Popover>
	</div>
	</template>

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

File Metadata

Mime Type: text/x-diff
Expires: Fri, Oct 9, 11:35 PM (1 d, 16 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1784940
Default Alt Text: (188 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions