No OneTemporary
Actions

Size

613 KB

Referenced Files

None

Subscribers

None

View Options

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

	diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
	index 6c607eeea1..e2946b1625 100644
	--- a/.gitlab-ci.yml
	+++ b/.gitlab-ci.yml
	@@ -1,223 +1,223 @@
	# This file is a template, and might need editing before it works on your project.
	# Official framework image. Look for the different tagged releases at:
	# https://hub.docker.com/r/library/node/tags/
	image: node:20

	stages:
	- check-changelog
	- lint
	- build
	- test
	- deploy

	# https://git.pleroma.social/help/ci/yaml/workflow.md#switch-between-branch-pipelines-and-merge-request-pipelines
	workflow:
	rules:
	- if: $CI_PIPELINE_SOURCE == "merge_request_event"
	- if: $CI_COMMIT_BRANCH && $CI_OPEN_MERGE_REQUESTS
	when: never
	- if: $CI_COMMIT_BRANCH

	check-changelog:
	stage: check-changelog
	image: alpine
	rules:
	- if: $CI_MERGE_REQUEST_SOURCE_PROJECT_PATH == 'pleroma/pleroma-fe' && $CI_MERGE_REQUEST_SOURCE_BRANCH_NAME =~ /^renovate/
	when: never
	- if: $CI_MERGE_REQUEST_SOURCE_PROJECT_PATH == 'pleroma/pleroma-fe' && $CI_MERGE_REQUEST_SOURCE_BRANCH_NAME == 'weblate'
	when: never
	- if: $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "develop"
	before_script: ''
	after_script: ''
	cache: {}
	script:
	- apk add git
	- sh ./tools/check-changelog

	lint-eslint:
	stage: lint
	script:
	- yarn
	- yarn ci-eslint

	lint-biome:
	stage: lint
	script:
	- yarn
	- yarn ci-biome

	lint-stylelint:
	stage: lint
	script:
	- yarn
	- yarn ci-stylelint

	test:
	stage: test
	tags:
	- amd64
	- himem
	variables:
	APT_CACHE_DIR: apt-cache
	script:
	- mkdir -pv $APT_CACHE_DIR && apt-get -qq update
	- yarn
	- yarn playwright install firefox
	- yarn playwright install-deps
	- yarn unit-ci
	artifacts:
	# When the test fails, upload screenshots for better context on why it fails
	paths:
	- test/**/__screenshots__
	when: on_failure

	e2e-pleroma:
	stage: test
	image: mcr.microsoft.com/playwright:v1.61.0-jammy
	services:
	- name: postgres:15-alpine
	alias: db
	- name: $PLEROMA_IMAGE
	alias: pleroma
	entrypoint: ["/bin/ash", "-c"]
	command:
	- \|
	set -eu

	SEED_SENTINEL_PATH=/var/lib/pleroma/.e2e_seeded
	CONFIG_OVERRIDE_PATH=/var/lib/pleroma/config.exs

	echo '-- Waiting for database...'
	while ! pg_isready -U ${DB_USER:-pleroma} -d postgres://${DB_HOST:-db}:${DB_PORT:-5432}/${DB_NAME:-pleroma} -t 1; do
	sleep 1s
	done

	echo '-- Writing E2E config overrides...'
	cat > $CONFIG_OVERRIDE_PATH <<EOF
	import Config

	config :pleroma, Pleroma.Captcha,
	enabled: false

	config :pleroma, :instance,
	registrations_open: true,
	account_activation_required: false,
	approval_required: false
	EOF

	echo '-- Running migrations...'
	/opt/pleroma/bin/pleroma_ctl migrate

	echo '-- Starting!'
	/opt/pleroma/bin/pleroma start &
	PLEROMA_PID=$!

	cleanup() {
	if kill -0 $PLEROMA_PID 2>/dev/null; then
	kill -TERM $PLEROMA_PID
	wait $PLEROMA_PID \|\| true
	fi
	}

	trap cleanup INT TERM

	echo '-- Waiting for API...'
	api_ok=false
	for _i in $(seq 1 120); do
	if wget -qO- http://127.0.0.1:4000/api/v1/instance >/dev/null 2>&1; then
	api_ok=true
	break
	fi
	sleep 1s
	done

	if [ $api_ok != true ]; then
	echo 'Timed out waiting for Pleroma API to become available'
	exit 1
	fi

	if [ ! -f $SEED_SENTINEL_PATH ]; then
	if [ -n ${E2E_ADMIN_USERNAME:-} ] && [ -n ${E2E_ADMIN_PASSWORD:-} ] && [ -n ${E2E_ADMIN_EMAIL:-} ]; then
	echo '-- Seeding admin user' $E2E_ADMIN_USERNAME '...'
	if ! /opt/pleroma/bin/pleroma_ctl user new $E2E_ADMIN_USERNAME $E2E_ADMIN_EMAIL --admin --password $E2E_ADMIN_PASSWORD -y; then
	echo '-- User already exists or creation failed, ensuring admin + confirmed...'
	/opt/pleroma/bin/pleroma_ctl user set $E2E_ADMIN_USERNAME --admin --confirmed
	fi
	else
	echo '-- Skipping admin seeding (missing E2E_ADMIN_* env)'
	fi

	touch $SEED_SENTINEL_PATH
	fi

	wait $PLEROMA_PID
	tags:
	- amd64
	- himem
	variables:
	PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: "1"
	FF_NETWORK_PER_BUILD: "true"
	- PLEROMA_IMAGE: git.pleroma.social:5050/pleroma/pleroma:stable
	+ PLEROMA_IMAGE: git.pleroma.social/pleroma/pleroma:stable
	POSTGRES_USER: pleroma
	POSTGRES_PASSWORD: pleroma
	POSTGRES_DB: pleroma
	DB_USER: pleroma
	DB_PASS: pleroma
	DB_NAME: pleroma
	DB_HOST: db
	DB_PORT: 5432
	DOMAIN: localhost
	INSTANCE_NAME: Pleroma E2E
	E2E_ADMIN_USERNAME: admin
	E2E_ADMIN_PASSWORD: adminadmin
	E2E_ADMIN_EMAIL: admin@example.com
	ADMIN_EMAIL: $E2E_ADMIN_EMAIL
	NOTIFY_EMAIL: $E2E_ADMIN_EMAIL
	VITE_PROXY_TARGET: http://pleroma:4000
	VITE_PROXY_ORIGIN: http://localhost:4000
	E2E_BASE_URL: http://localhost:8099
	script:
	- npm install -g yarn@1.22.22
	- yarn --frozen-lockfile
	- \|
	echo "-- Waiting for Pleroma API..."
	api_ok="false"
	for _i in $(seq 1 120); do
	if wget -qO- http://pleroma:4000/api/v1/instance >/dev/null 2>&1; then
	api_ok="true"
	break
	fi
	sleep 1s
	done
	if [ "$api_ok" != "true" ]; then
	echo "Timed out waiting for Pleroma API to become available"
	exit 1
	fi
	- yarn e2e:pw
	artifacts:
	when: on_failure
	paths:
	- test/e2e-playwright/test-results
	- test/e2e-playwright/playwright-report

	build:
	stage: build
	tags:
	- amd64
	- himem
	script:
	- yarn
	- yarn build
	artifacts:
	paths:
	- dist/

	docs-deploy:
	stage: deploy
	image: alpine:latest
	only:
	- develop@pleroma/pleroma-fe
	before_script:
	- apk add curl
	script:
	- curl -X POST -F"token=$DOCS_PIPELINE_TRIGGER" -F'ref=master' https://git.pleroma.social/api/v4/projects/673/trigger/pipeline
	diff --git a/changelog.d/more-fixes.skip b/changelog.d/more-fixes.skip
	new file mode 100644
	index 0000000000..e69de29bb2
	diff --git a/docker-compose.e2e.yml b/docker-compose.e2e.yml
	index c49984684d..c740e69c41 100644
	--- a/docker-compose.e2e.yml
	+++ b/docker-compose.e2e.yml
	@@ -1,59 +1,59 @@
	services:
	db:
	image: postgres:15-alpine
	environment:
	POSTGRES_USER: pleroma
	POSTGRES_PASSWORD: pleroma
	POSTGRES_DB: pleroma
	healthcheck:
	test: ["CMD-SHELL", "pg_isready -U pleroma -d pleroma"]
	interval: 2s
	timeout: 2s
	retries: 30

	pleroma:
	- image: ${PLEROMA_IMAGE:-git.pleroma.social:5050/pleroma/pleroma:stable}
	+ image: ${PLEROMA_IMAGE:-git.pleroma.social/pleroma/pleroma:stable}
	environment:
	DB_USER: pleroma
	DB_PASS: pleroma
	DB_NAME: pleroma
	DB_HOST: db
	DB_PORT: 5432
	DOMAIN: localhost
	INSTANCE_NAME: Pleroma E2E
	ADMIN_EMAIL: ${E2E_ADMIN_EMAIL:-admin@example.com}
	NOTIFY_EMAIL: ${E2E_ADMIN_EMAIL:-admin@example.com}
	E2E_ADMIN_USERNAME: ${E2E_ADMIN_USERNAME:-admin}
	E2E_ADMIN_PASSWORD: ${E2E_ADMIN_PASSWORD:-adminadmin}
	E2E_ADMIN_EMAIL: ${E2E_ADMIN_EMAIL:-admin@example.com}
	depends_on:
	db:
	condition: service_healthy
	volumes:
	- ./docker/pleroma/entrypoint.e2e.sh:/opt/pleroma/entrypoint.e2e.sh:ro
	entrypoint: ["/bin/ash", "/opt/pleroma/entrypoint.e2e.sh"]
	healthcheck:
	# NOTE: "localhost" may resolve to ::1 in some images (IPv6) while Pleroma only
	# listens on IPv4 in this container. Use 127.0.0.1 to avoid false negatives.
	test: ["CMD-SHELL", "test -f /var/lib/pleroma/.e2e_seeded && wget -qO- http://127.0.0.1:4000/api/v1/instance >/dev/null \|\| exit 1"]
	interval: 5s
	timeout: 3s
	retries: 60
	ports:
	- 4000:4000

	e2e:
	build:
	context: .
	dockerfile: docker/e2e/Dockerfile.e2e
	depends_on:
	pleroma:
	condition: service_healthy
	environment:
	CI: "1"
	VITE_PROXY_TARGET: http://pleroma:4000
	VITE_PROXY_ORIGIN: http://localhost:4000
	E2E_BASE_URL: http://localhost:8099
	E2E_ADMIN_USERNAME: ${E2E_ADMIN_USERNAME:-admin}
	E2E_ADMIN_PASSWORD: ${E2E_ADMIN_PASSWORD:-adminadmin}
	command: ["yarn", "e2e:pw"]
	diff --git a/src/App.js b/src/App.js
	index 7de7a06963..934b967131 100644
	--- a/src/App.js
	+++ b/src/App.js
	@@ -1,304 +1,306 @@
	import { throttle } from 'lodash'
	import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

	import DesktopNav from 'src/components/desktop_nav/desktop_nav.vue'
	import FeaturesPanel from 'src/components/features_panel/features_panel.vue'
	+import GlobalError from 'src/components/global_error/global_error.vue'
	import GlobalNoticeList from 'src/components/global_notice_list/global_notice_list.vue'
	import InstanceSpecificPanel from 'src/components/instance_specific_panel/instance_specific_panel.vue'
	import MobileNav from 'src/components/mobile_nav/mobile_nav.vue'
	import MobilePostStatusButton from 'src/components/mobile_post_status_button/mobile_post_status_button.vue'
	import NavPanel from 'src/components/nav_panel/nav_panel.vue'
	import UserPanel from 'src/components/user_panel/user_panel.vue'
	import { getOrCreateServiceWorker } from './services/sw/sw'
	import { windowHeight, windowWidth } from './services/window_utils/window_utils'

	import { useEmojiStore } from 'src/stores/emoji.js'
	import { useI18nStore } from 'src/stores/i18n.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useShoutStore } from 'src/stores/shout.js'

	// Helper to unwrap reactive proxies
	window.toValue = (x) => JSON.parse(JSON.stringify(x))

	export default {
	name: 'app',
	components: {
	UserPanel,
	NavPanel,
	Notifications: defineAsyncComponent(
	() => import('src/components/notifications/notifications.vue'),
	),
	InstanceSpecificPanel,
	FeaturesPanel,
	WhoToFollowPanel: defineAsyncComponent(
	() =>
	import('src/components/who_to_follow_panel/who_to_follow_panel.vue'),
	),
	ShoutPanel: defineAsyncComponent(
	() => import('src/components/shout_panel/shout_panel.vue'),
	),
	MediaModal: defineAsyncComponent(
	() => import('src/components/media_modal/media_modal.vue'),
	),
	MobilePostStatusButton,
	MobileNav,
	DesktopNav,
	SettingsModal: defineAsyncComponent(
	() => import('src/components/settings_modal/settings_modal.vue'),
	),
	UpdateNotification: defineAsyncComponent(
	() =>
	import('src/components/update_notification/update_notification.vue'),
	),
	PostStatusModal: defineAsyncComponent(
	() => import('src/components/post_status_modal/post_status_modal.vue'),
	),
	UserReportingModal: defineAsyncComponent(
	() =>
	import('src/components/user_reporting_modal/user_reporting_modal.vue'),
	),
	EditStatusModal: defineAsyncComponent(
	() => import('src/components/edit_status_modal/edit_status_modal.vue'),
	),
	StatusHistoryModal: defineAsyncComponent(
	() =>
	import('src/components/status_history_modal/status_history_modal.vue'),
	),
	+ GlobalError,
	GlobalNoticeList,
	},
	data: () => ({
	mobileActivePanel: 'timeline',
	}),
	provide() {
	return {
	allowNonSquareEmoji: useMergedConfigStore().mergedConfig.nonSquareEmoji,
	}
	},
	watch: {
	themeApplied() {
	this.removeSplash()
	},
	currentTheme() {
	this.setThemeBodyClass()
	},
	layoutType() {
	document.getElementById('modal').classList = ['-' + this.layoutType]
	},
	},
	created() {
	// Load the locale from the storage
	const value = useMergedConfigStore().mergedConfig.interfaceLanguage
	useI18nStore().setLanguage(value)
	useEmojiStore().loadUnicodeEmojiData(value)

	document.getElementById('modal').classList = ['-' + this.layoutType]

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

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

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

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

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

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

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

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

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

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

	html {
	font-size: var(--textSize, 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);
	}

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

	#sidebar {
	grid-area: sidebar;
	}

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

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

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

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

	.app-bg-wrapper {
	position: fixed;
	height: 100%;
	top: var(--navbar-height);
	z-index: -1000;
	left: 0;
	right: -20px;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--wallpaper);
	background-image: var(--body-background-image);
	background-position: 50%;
	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));
	grid-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 {
	--_roundness-left: 0;
	--_roundness-right: 0;

	position: relative;
	}

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

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

	.fa {
	color: grey;
	}

	.mobile-shown {
	display: none;
	}

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

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

	&.-dot {
	min-height: 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;
	clip: rect(0 0 0 0);
	padding: 0;
	position: absolute;
	}

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

	#splash {
	pointer-events: none;
	// transition: opacity 0.5s;

	#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/App.vue b/src/App.vue
	index c1a7199d78..84a6f7d3d8 100644
	--- a/src/App.vue
	+++ b/src/App.vue
	@@ -1,81 +1,82 @@
	<template>
	<div
	v-show="themeApplied"
	id="app-loaded"
	:style="bgStyle"
	>
	<div
	id="app_bg_wrapper"
	class="app-bg-wrapper"
	/>
	<MobileNav v-if="layoutType === 'mobile'" />
	<DesktopNav
	v-else
	:class="navClasses"
	/>
	<Notifications v-if="currentUser" />
	<div
	id="content"
	ref="appContentRef"
	class="app-layout container"
	:class="classes"
	>
	<div class="underlay" />
	<div
	id="sidebar"
	class="column -scrollable"
	:class="{ '-show-scrollbar': showScrollbars }"
	>
	<user-panel />
	<template v-if="layoutType !== 'mobile'">
	<NavPanel />
	<InstanceSpecificPanel v-if="showInstanceSpecificPanel" />
	<FeaturesPanel v-if="!currentUser && showFeaturesPanel" />
	<WhoToFollowPanel v-if="currentUser && suggestionsEnabled" />
	<div id="notifs-sidebar" />
	</template>
	</div>
	<main
	id="main-scroller"
	class="column main"
	:class="{ '-full-height': isChats \|\| isListEdit }"
	>
	<div
	v-if="!currentUser"
	class="login-hint panel panel-default"
	>
	<router-link
	:to="{ name: 'login' }"
	class="panel-body"
	>
	{{ $t("login.hint") }}
	</router-link>
	</div>
	<router-view />
	</main>
	<div
	id="notifs-column"
	class="column -scrollable"
	:class="{ '-show-scrollbar': showScrollbars }"
	/>
	</div>
	<MediaModal />
	<ShoutPanel
	v-if="currentUser && !hideShoutbox && shoutJoined"
	:floating="true"
	class="floating-shout mobile-hidden"
	:class="{ '-left': shoutboxPosition }"
	/>
	<MobilePostStatusButton />
	<UserReportingModal />
	<PostStatusModal />
	<EditStatusModal v-if="editingAvailable" />
	<StatusHistoryModal v-if="editingAvailable" />
	<SettingsModal :class="layoutModalClass" />
	<UpdateNotification />
	+ <GlobalError />
	<GlobalNoticeList />
	</div>
	</template>

	<script src="./App.js"></script>
	<style lang="scss" src="./App.scss"></style>
	diff --git a/src/api/admin.js b/src/api/admin.js
	index 67fb5038b4..c33f863a74 100644
	--- a/src/api/admin.js
	+++ b/src/api/admin.js
	@@ -1,491 +1,491 @@
	import { promisedRequest } from './helpers.js'

	const REPORTS = '/api/v1/pleroma/admin/reports'
	const CONFIG_URL = '/api/v1/pleroma/admin/config'
	const DESCRIPTIONS_URL = '/api/v1/pleroma/admin/config/descriptions'

	const ANNOUNCEMENTS_URL = (id = '') =>
	`/api/v1/pleroma/admin/announcements/${id}`

	const FRONTENDS_URL = '/api/v1/pleroma/admin/frontends'
	const FRONTENDS_INSTALL_URL = '/api/v1/pleroma/admin/frontends/install'

	const USERS_URL = (nickname = '') => `/api/v1/pleroma/admin/users/${nickname}`
	const USERS_URL_LIST = ({
	page,
	pageSize,
	filters = {},
	query = '',
	name = '',
	email = '',
	}) => {
	const {
	local = false,
	external = false,
	active = false,
	needApproval = false,
	unconfirmed = false,
	deactivated = false,
	isAdmin = true,
	isModerator = true,
	} = filters
	const filters_str = [
	local && 'local',
	external && 'external',
	active && 'active',
	needApproval && 'need_approval',
	unconfirmed && 'unconfirmed',
	deactivated && 'deactivated',
	isAdmin && 'is_admin',
	isModerator && 'is_moderator',
	]
	.filter((x) => x)
	.join(',')
	return `/api/v1/pleroma/admin/users?page=${page}&page_size=${pageSize}&filters=${filters_str}&query=${query}&name=${name}&email=${email}`
	}

	const TAG_USER_URL = '/api/pleroma/admin/users/tag'

	const PERMISSION_GROUP_URL = (right) =>
	`/api/pleroma/admin/users/permission_group/${right}`
	const ACTIVATE_USERS_URL = '/api/pleroma/admin/users/activate'
	const DEACTIVATE_USERS_URL = '/api/pleroma/admin/users/deactivate'
	const SUGGEST_USERS_URL = '/api/pleroma/admin/users/suggest'
	const UNSUGGEST_USERS_URL = '/api/pleroma/admin/users/unsuggest'
	const APPROVE_USERS_URL = '/api/v1/pleroma/admin/users/approve'
	const CONFIRM_USERS_URL = '/api/v1/pleroma/admin/users/confirm_email'
	const RESEND_CONFIRMATION_EMAIL_URL =
	'/api/v1/pleroma/admin/users/resend_confirmation_email'
	const LIST_STATUSES_URL = ({ id, page, pageSize, godmode, withReblogs }) =>
	`/api/v1/pleroma/admin/users/${id}/statuses?page_size=${pageSize}&page=${page}&godmode=${godmode}&with_reblogs=${withReblogs}`
	const CHANGE_STATUS_SCOPE_URL = (id) => `/api/v1/pleroma/admin/statuses/${id}`
	const REQUIRE_PASSWORD_CHANGE_URL =
	'/api/v1/pleroma/admin/users/force_password_reset'

	const DISABLE_MFA_URL = '/api/v1/pleroma/admin/users/disable_mfa'
	const EMOJI_RELOAD_URL = '/api/pleroma/admin/reload_emoji'
	const EMOJI_IMPORT_FS_URL = '/api/pleroma/emoji/packs/import'
	const EMOJI_PACK_URL = (name) => `/api/v1/pleroma/emoji/pack?name=${name}`
	const EMOJI_PACKS_DL_REMOTE_URL = '/api/v1/pleroma/emoji/packs/download'
	const EMOJI_PACKS_DL_REMOTE_ZIP_URL = '/api/v1/pleroma/emoji/packs/download_zip'
	const EMOJI_PACKS_LS_REMOTE_URL = (url, page, pageSize) =>
	`/api/v1/pleroma/emoji/packs/remote?url=${url}&page=${page}&page_size=${pageSize}`
	const EMOJI_UPDATE_FILE_URL = (name) =>
	`/api/v1/pleroma/emoji/packs/files?name=${name}`

	//

	export const setUsersTags = ({
	tags,
	credentials,
	value,
	screen_names: nicknames,
	}) =>
	promisedRequest({
	url: TAG_USER_URL,
	method: value ? 'PUT' : 'DELETE',
	credentials,
	payload: {
	nicknames,
	tags,
	},
	})

	export const setUsersRight = ({
	right,
	credentials,
	value,
	screen_names: nicknames,
	}) =>
	promisedRequest({
	url: PERMISSION_GROUP_URL(right),
	method: value ? 'POST' : 'DELETE',
	credentials,
	payload: {
	nicknames,
	},
	})

	export const setUsersActivationStatus = ({
	credentials,
	screen_names: nicknames,
	value,
	}) =>
	promisedRequest({
	url: value ? ACTIVATE_USERS_URL : DEACTIVATE_USERS_URL,
	method: 'PATCH',
	credentials,
	payload: {
	nicknames,
	},
	}).then((response) => response.users)

	export const setUsersApprovalStatus = ({
	credentials,
	screen_names: nicknames,
	}) =>
	promisedRequest({
	url: APPROVE_USERS_URL,
	method: 'PATCH',
	credentials,
	payload: {
	nicknames,
	},
	}).then((response) => response.users)

	export const setUsersConfirmationStatus = ({
	credentials,
	screen_names: nicknames,
	}) =>
	promisedRequest({
	url: CONFIRM_USERS_URL,
	method: 'PATCH',
	credentials,
	payload: {
	nicknames,
	},
	}).then((response) => response.users)

	export const setUsersSuggestionStatus = ({
	credentials,
	screen_names: nicknames,
	value,
	}) =>
	promisedRequest({
	url: value ? SUGGEST_USERS_URL : UNSUGGEST_USERS_URL,
	method: 'PATCH',
	credentials,
	payload: {
	nicknames,
	},
	}).then((response) => response.users)

	export const getUserData = ({ credentials, screen_name: nickname }) =>
	promisedRequest({
	url: USERS_URL(nickname),
	method: 'GET',
	credentials,
	})

	export const deleteAccounts = ({ credentials, screen_names: nicknames }) =>
	promisedRequest({
	url: USERS_URL(),
	method: 'DELETE',
	credentials,
	payload: {
	nicknames,
	},
	})

	export const getAnnouncements = ({ id, credentials }) =>
	promisedRequest({ url: ANNOUNCEMENTS_URL(id), credentials })

	// the reported list is hardly useful because standards are for dating i guess,
	// so make sure to fetchIfMissing right afterward using this call
	export const listUsers = ({ opts, credentials }) =>
	promisedRequest({
	url: USERS_URL_LIST(opts),
	credentials,
	method: 'GET',
	})

	export const resendConfirmationEmail = ({
	screen_names: nicknames,
	credentials,
	}) =>
	promisedRequest({
	url: RESEND_CONFIRMATION_EMAIL_URL,
	credentials,
	method: 'PATCH',
	payload: {
	nicknames,
	},
	})

	export const requirePasswordChange = ({
	screen_names: nicknames,
	credentials,
	}) =>
	promisedRequest({
	url: REQUIRE_PASSWORD_CHANGE_URL,
	credentials,
	method: 'PATCH',
	payload: {
	nicknames,
	},
	})

	export const disableMFA = ({ screen_name: nickname, credentials }) =>
	promisedRequest({
	url: DISABLE_MFA_URL,
	credentials,
	method: 'PUT',
	payload: {
	nickname,
	},
	})

	export const listStatuses = ({ opts, credentials }) =>
	promisedRequest({
	url: LIST_STATUSES_URL(opts),
	credentials,
	method: 'GET',
	})

	export const changeStatusScope = ({
	opts: { id, sensitive, visibility },
	credentials,
	}) => {
	var payload = {}
	if (typeof sensitive !== 'undefined') {
	payload['sensitive'] = sensitive
	}
	if (typeof visibility !== 'undefined') {
	payload['visibility'] = visibility
	}

	return promisedRequest({
	url: CHANGE_STATUS_SCOPE_URL(id),
	credentials,
	method: 'PUT',
	payload,
	})
	}

	export const announcementToPayload = ({
	content,
	startsAt,
	endsAt,
	allDay,
	}) => {
	const payload = { content }

	if (typeof startsAt !== 'undefined') {
	payload.starts_at = startsAt ? new Date(startsAt).toISOString() : null
	}

	if (typeof endsAt !== 'undefined') {
	payload.ends_at = endsAt ? new Date(endsAt).toISOString() : null
	}

	if (typeof allDay !== 'undefined') {
	payload.all_day = allDay
	}

	return payload
	}

	export const postAnnouncement = ({
	credentials,
	content,
	startsAt,
	endsAt,
	allDay,
	}) =>
	promisedRequest({
	url: ANNOUNCEMENTS_URL(),
	credentials,
	method: 'POST',
	payload: announcementToPayload({ content, startsAt, endsAt, allDay }),
	})

	export const editAnnouncement = ({
	id,
	credentials,
	content,
	startsAt,
	endsAt,
	allDay,
	}) =>
	promisedRequest({
	url: ANNOUNCEMENTS_URL(id),
	credentials,
	method: 'PATCH',
	payload: announcementToPayload({ content, startsAt, endsAt, allDay }),
	})

	export const deleteAnnouncement = ({ id, credentials }) =>
	promisedRequest({
	url: ANNOUNCEMENTS_URL(id),
	credentials,
	method: 'DELETE',
	})

	export const setReportState = ({ id, state, credentials }) => {
	return promisedRequest({
	url: REPORTS,
	credentials,
	method: 'PATCH',
	payload: {
	reports: [
	{
	id,
	state,
	},
	],
	},
	})
	}

	export const getInstanceDBConfig = ({ credentials }) =>
	promisedRequest({
	url: CONFIG_URL,
	credentials,
	})

	export const getInstanceConfigDescriptions = ({ credentials }) =>
	promisedRequest({
	url: DESCRIPTIONS_URL,
	credentials,
	})

	export const getAvailableFrontends = ({ credentials }) =>
	promisedRequest({
	url: FRONTENDS_URL,
	credentials,
	})

	export const pushInstanceDBConfig = ({ credentials, payload }) =>
	promisedRequest({
	url: CONFIG_URL,
	method: 'POST',
	credentials,
	payload,
	})

	export const installFrontend = ({ credentials, payload }) =>
	promisedRequest({
	url: FRONTENDS_INSTALL_URL,
	credentials,
	method: 'POST',
	payload,
	})

	// Emoji packs
	export const deleteEmojiPack = ({ name }) =>
	promisedRequest({
	url: EMOJI_PACK_URL(name),
	method: 'DELETE',
	})

	export const reloadEmoji = ({ credentials }) =>
	promisedRequest({
	url: EMOJI_RELOAD_URL,
	method: 'POST',
	credentials,
	})

	export const importEmojiFromFS = ({ credentials }) =>
	promisedRequest({
	url: EMOJI_IMPORT_FS_URL,
	credentials,
	})

	export const createEmojiPack = ({ name, credentials }) =>
	promisedRequest({
	url: EMOJI_PACK_URL(name),
	method: 'POST',
	credentials,
	})

	export const listRemoteEmojiPacks = ({
	instance,
	page,
	pageSize,
	credentials,
	}) => {
	if (!instance.startsWith('http')) {
	instance = 'https://' + instance
	}

	return promisedRequest({
	url: EMOJI_PACKS_LS_REMOTE_URL(instance, page, pageSize),
	credentials,
	})
	}

	export const downloadRemoteEmojiPack = ({
	instance,
	packName,
	as,
	credentials,
	}) =>
	promisedRequest({
	url: EMOJI_PACKS_DL_REMOTE_URL,
	credentials,
	method: 'POST',
	payload: {
	url: instance,
	name: packName,
	as,
	},
	})

	export const downloadRemoteEmojiPackZIP = ({
	url,
	packName,
	file,
	credentials,
	}) => {
	const data = new FormData()
	if (file) data.set('file', file)
	if (url) data.set('url', url)
	data.set('name', packName)

	return promisedRequest({
	url: EMOJI_PACKS_DL_REMOTE_ZIP_URL,
	method: 'POST',
	- payload: data,
	+ formData: data,
	})
	}

	export const saveEmojiPackMetadata = ({ name, newData, credentials }) =>
	promisedRequest({
	url: EMOJI_PACK_URL(name),
	credentials,
	method: 'PATCH',
	payload: { metadata: newData },
	})

	export const addNewEmojiFile = ({ packName, file, shortcode, filename }) => {
	const data = new FormData()
	if (filename.trim() !== '') {
	data.set('filename', filename)
	}
	if (shortcode.trim() !== '') {
	data.set('shortcode', shortcode)
	}
	data.set('file', file)

	return promisedRequest({
	url: EMOJI_UPDATE_FILE_URL(packName),
	method: 'POST',
	- payload: data,
	+ formData: data,
	})
	}

	export const updateEmojiFile = ({
	packName,
	shortcode,
	newShortcode,
	newFilename,
	credentials,
	force,
	}) =>
	promisedRequest({
	url: EMOJI_UPDATE_FILE_URL(packName),
	credentials,
	method: 'PATCH',
	payload: {
	shortcode,
	new_shortcode: newShortcode,
	new_filename: newFilename,
	force,
	},
	})

	export const deleteEmojiFile = ({ packName, shortcode }) =>
	promisedRequest({
	url: `${EMOJI_UPDATE_FILE_URL(packName)}&shortcode=${shortcode}`,
	method: 'DELETE',
	})
	diff --git a/src/api/chats.js b/src/api/chats.js
	index 51e83c74f3..114038e528 100644
	--- a/src/api/chats.js
	+++ b/src/api/chats.js
	@@ -1,87 +1,87 @@
	import { paramsString, promisedRequest } from './helpers.js'

	import { parseChat } from 'src/services/entity_normalizer/entity_normalizer.service.js'

	const PLEROMA_CHATS_URL = '/api/v1/pleroma/chats'
	const PLEROMA_CHAT_URL = (id) => `/api/v1/pleroma/chats/by-account-id/${id}`
	-const PLEROMA_CHAT_MESSAGES_URL = (id, { maxId, sinceId, limit }) =>
	+const PLEROMA_CHAT_MESSAGES_URL = (id, { maxId, sinceId, limit } = {}) =>
	`/api/v1/pleroma/chats/${id}/messages${paramsString({ maxId, sinceId, limit })}`
	const PLEROMA_CHAT_READ_URL = (id) => `/api/v1/pleroma/chats/${id}/read`
	const PLEROMA_DELETE_CHAT_MESSAGE_URL = (chatId, messageId) =>
	`/api/v1/pleroma/chats/${chatId}/messages/${messageId}`

	export const chats = ({ credentials }) =>
	promisedRequest({
	url: PLEROMA_CHATS_URL,
	credentials,
	}).then(({ data }) => ({
	chatList: data.map(parseChat).filter((c) => c),
	}))

	export const getOrCreateChat = ({ accountId, credentials }) =>
	promisedRequest({
	url: PLEROMA_CHAT_URL(accountId),
	method: 'POST',
	credentials,
	})

	export const chatMessages = ({
	id,
	credentials,
	maxId,
	sinceId,
	limit = 20,
	}) => {
	return promisedRequest({
	url: PLEROMA_CHAT_MESSAGES_URL(id, { maxId, sinceId, limit }),
	method: 'GET',
	credentials,
	})
	}

	export const sendChatMessage = ({
	id,
	content,
	mediaId = null,
	idempotencyKey,
	credentials,
	}) => {
	const payload = {
	content,
	}

	if (mediaId) {
	payload.media_id = mediaId
	}

	const headers = {}

	if (idempotencyKey) {
	headers['idempotency-key'] = idempotencyKey
	}

	return promisedRequest({
	url: PLEROMA_CHAT_MESSAGES_URL(id),
	method: 'POST',
	payload,
	credentials,
	headers,
	})
	}

	export const readChat = ({ id, lastReadId, credentials }) =>
	promisedRequest({
	url: PLEROMA_CHAT_READ_URL(id),
	method: 'POST',
	payload: {
	last_read_id: lastReadId,
	},
	credentials,
	})

	export const deleteChatMessage = ({ chatId, messageId, credentials }) =>
	promisedRequest({
	url: PLEROMA_DELETE_CHAT_MESSAGE_URL(chatId, messageId),
	method: 'DELETE',
	credentials,
	})
	diff --git a/src/api/helpers.js b/src/api/helpers.js
	index 40b8792326..4bf16e0cce 100644
	--- a/src/api/helpers.js
	+++ b/src/api/helpers.js
	@@ -1,135 +1,140 @@
	import { snakeCase } from 'lodash'

	import { StatusCodeError } from 'src/services/errors/errors'

	export const paramsString = (params = {}) => {
	if (params == null \|\| params === undefined) return ''

	if (typeof params !== 'object' \|\| Array.isArray(params)) {
	throw new Error('Params are not an object!')
	}

	const entries = (() => {
	if (params instanceof Map) {
	return params.entries()
	} else {
	return Object.entries(params)
	}
	})()

	- if (entries.length === 0) return ''
	-
	const arrays = []
	const nonArrays = []

	entries.forEach(([k, v]) => {
	if (v == null) return // Drop nulls
	if (
	(typeof v === 'object' && !Array.isArray(v)) \|\|
	typeof v === 'function'
	) {
	throw new Error('Param cannot be non-primitive!')
	}
	if (Array.isArray(v)) {
	arrays.push([k, v])
	} else {
	nonArrays.push([k, v])
	}
	})

	arrays.forEach(([k, array]) => {
	array.forEach((v) => {
	if (
	typeof v === 'object' \|\|
	typeof v === 'function' \|\|
	typeof v === 'undefined'
	)
	throw new Error('Array param cannot contain non-primitives!')
	})
	})

	+ if (nonArrays.length + arrays.length === 0) return ''
	+
	return (
	'?' +
	[
	...nonArrays.map(([k, v]) => [snakeCase(k), v]),
	// turning [a,[1,2,3]] into [[a[],1],[a[],2],[a[],3]]
	...arrays.reduce(
	(acc, [k, arrayValue]) => [
	...acc,
	...arrayValue.map((v) => [snakeCase(k) + '[]', v]),
	],
	[],
	),
	]
	.map(([k, v]) => `${k}=${window.encodeURIComponent(v)}`)
	.join('&')
	)
	}

	export const promisedRequest = async ({
	method,
	url,
	payload,
	formData,
	+ cache,
	credentials,
	headers = {},
	}) => {
	const options = {
	method,
	credentials: 'same-origin',
	headers: {
	Accept: 'application/json',
	...headers,
	},
	}

	if (!formData) {
	options.headers['Content-Type'] = 'application/json'
	}

	+ if (cache) {
	+ options.cache = cache
	+ }
	+
	if (formData \|\| payload) {
	options.body = formData \|\| JSON.stringify(payload)
	}

	if (credentials) {
	options.headers = {
	...options.headers,
	...authHeaders(credentials),
	}
	}

	const response = await fetch(url, options)
	const data = await (async () => {
	const [contentType] = response.headers
	.get('content-type')
	.split(';')
	.map((x) => x.toLowerCase().trim())
	const contentLength = parseInt(response.headers.get('content-length'))
	if (contentLength === 0) return null

	switch (contentType) {
	case 'text/plain':
	return await response.text()
	case 'application/json':
	return await response.json()
	default:
	return await response.bytes()
	}
	})()

	const { ok, status } = response

	if (ok) {
	return { response, status, data }
	} else {
	throw new StatusCodeError(response.status, data, { url, options }, response)
	}
	}

	const authHeaders = (accessToken) => {
	if (accessToken) {
	return { Authorization: `Bearer ${accessToken}` }
	} else {
	return {}
	}
	}
	diff --git a/src/api/user.js b/src/api/user.js
	index b9035da779..17e13195d5 100644
	--- a/src/api/user.js
	+++ b/src/api/user.js
	@@ -1,924 +1,921 @@
	import { concat, last } from 'lodash'

	import { paramsString, promisedRequest } from './helpers.js'
	import { fetchFriends, MASTODON_STATUS_URL } from './public.js'

	import {
	parseAttachment,
	parseStatus,
	parseUser,
	} from 'src/services/entity_normalizer/entity_normalizer.service.js'

	const MUTES_IMPORT_URL = '/api/pleroma/mutes_import'
	const BLOCKS_IMPORT_URL = '/api/pleroma/blocks_import'
	const FOLLOW_IMPORT_URL = '/api/pleroma/follow_import'
	const DELETE_ACCOUNT_URL = '/api/pleroma/delete_account'
	const CHANGE_EMAIL_URL = '/api/pleroma/change_email'
	const CHANGE_PASSWORD_URL = '/api/pleroma/change_password'
	const MOVE_ACCOUNT_URL = '/api/pleroma/move_account'
	const ALIASES_URL = '/api/pleroma/aliases'
	const NOTIFICATION_SETTINGS_URL = '/api/pleroma/notification_settings'
	const NOTIFICATION_READ_URL = '/api/v1/pleroma/notifications/read'

	const MFA_SETTINGS_URL = '/api/pleroma/accounts/mfa'
	const MFA_BACKUP_CODES_URL = '/api/pleroma/accounts/mfa/backup_codes'

	const MFA_SETUP_OTP_URL = '/api/pleroma/accounts/mfa/setup/totp'
	const MFA_CONFIRM_OTP_URL = '/api/pleroma/accounts/mfa/confirm/totp'
	const MFA_DISABLE_OTP_URL = '/api/pleroma/accounts/mfa/totp'

	const MASTODON_DISMISS_NOTIFICATION_URL = (id) =>
	`/api/v1/notifications/${id}/dismiss`
	const MASTODON_FAVORITE_URL = (id) => `/api/v1/statuses/${id}/favourite`
	const MASTODON_UNFAVORITE_URL = (id) => `/api/v1/statuses/${id}/unfavourite`
	const MASTODON_RETWEET_URL = (id) => `/api/v1/statuses/${id}/reblog`
	const MASTODON_UNRETWEET_URL = (id) => `/api/v1/statuses/${id}/unreblog`
	const MASTODON_DELETE_URL = (id) => `/api/v1/statuses/${id}`
	const MASTODON_FOLLOW_URL = (id) => `/api/v1/accounts/${id}/follow`
	const MASTODON_UNFOLLOW_URL = (id) => `/api/v1/accounts/${id}/unfollow`

	const MASTODON_FOLLOW_REQUESTS_URL = '/api/v1/follow_requests'
	const MASTODON_APPROVE_USER_URL = (id) =>
	`/api/v1/follow_requests/${id}/authorize`
	const MASTODON_DENY_USER_URL = (id) => `/api/v1/follow_requests/${id}/reject`
	const MASTODON_USER_RELATIONSHIPS_URL = ({ id, withSuspended }) =>
	`/api/v1/accounts/relationships/${paramsString({ id, withSuspended })}`
	const MASTODON_USER_IN_LISTS = (id) => `/api/v1/accounts/${id}/lists`
	export const MASTODON_LIST_URL = (id = '') => `/api/v1/lists/${id}`
	export const MASTODON_LIST_ACCOUNTS_URL = (id) => `/api/v1/lists/${id}/accounts`
	const MASTODON_USER_BLOCKS_URL = ({
	maxId,
	sinceId,
	limit,
	withRelationships,
	}) =>
	`/api/v1/blocks/${paramsString({ maxId, sinceId, limit, withRelationships })}`
	const MASTODON_USER_MUTES_URL = ({
	maxId,
	sinceId,
	limit,
	withRelationships,
	}) =>
	`/api/v1/mutes/${paramsString({ maxId, sinceId, limit, withRelationships })}`
	const MASTODON_BLOCK_USER_URL = (id) => `/api/v1/accounts/${id}/block`
	const MASTODON_UNBLOCK_USER_URL = (id) => `/api/v1/accounts/${id}/unblock`
	const MASTODON_MUTE_USER_URL = (id) => `/api/v1/accounts/${id}/mute`
	const MASTODON_UNMUTE_USER_URL = (id) => `/api/v1/accounts/${id}/unmute`
	const MASTODON_REMOVE_USER_FROM_FOLLOWERS = (id) =>
	`/api/v1/accounts/${id}/remove_from_followers`
	const MASTODON_USER_NOTE_URL = (id) => `/api/v1/accounts/${id}/note`
	const MASTODON_BOOKMARK_STATUS_URL = (id) => `/api/v1/statuses/${id}/bookmark`
	const MASTODON_UNBOOKMARK_STATUS_URL = (id) =>
	`/api/v1/statuses/${id}/unbookmark`
	const MASTODON_POST_STATUS_URL = '/api/v1/statuses'
	const MASTODON_MEDIA_UPLOAD_URL = '/api/v1/media'
	const MASTODON_VOTE_URL = (id) => `/api/v1/polls/${id}/votes`
	const MASTODON_PROFILE_UPDATE_URL = '/api/v1/accounts/update_credentials'
	const MASTODON_REPORT_USER_URL = '/api/v1/reports'
	const MASTODON_PIN_OWN_STATUS = (id) => `/api/v1/statuses/${id}/pin`
	const MASTODON_UNPIN_OWN_STATUS = (id) => `/api/v1/statuses/${id}/unpin`
	const MASTODON_MUTE_CONVERSATION = (id) => `/api/v1/statuses/${id}/mute`
	const MASTODON_UNMUTE_CONVERSATION = (id) => `/api/v1/statuses/${id}/unmute`
	const MASTODON_DOMAIN_BLOCKS_URL = '/api/v1/domain_blocks'
	const MASTODON_ANNOUNCEMENTS_URL = '/api/v1/announcements'
	const MASTODON_ANNOUNCEMENTS_DISMISS_URL = (id) =>
	`/api/v1/announcements/${id}/dismiss`
	const PLEROMA_EMOJI_REACT_URL = (id, emoji) =>
	`/api/v1/pleroma/statuses/${id}/reactions/${emoji}`
	const PLEROMA_EMOJI_UNREACT_URL = (id, emoji) =>
	`/api/v1/pleroma/statuses/${id}/reactions/${emoji}`
	const PLEROMA_BACKUP_URL = '/api/v1/pleroma/backups'
	const PLEROMA_BOOKMARK_FOLDERS_URL = '/api/v1/pleroma/bookmark_folders'
	const PLEROMA_BOOKMARK_FOLDER_URL = (id) =>
	`/api/v1/pleroma/bookmark_folders/${id}`

	// #Posts
	export const favorite = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_FAVORITE_URL(id),
	method: 'POST',
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const unfavorite = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_UNFAVORITE_URL(id),
	method: 'POST',
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const retweet = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_RETWEET_URL(id),
	method: 'POST',
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const unretweet = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_UNRETWEET_URL(id),
	method: 'POST',
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const reactWithEmoji = ({ id, emoji, credentials }) =>
	promisedRequest({
	url: PLEROMA_EMOJI_REACT_URL(id, emoji),
	method: 'PUT',
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const unreactWithEmoji = ({ id, emoji, credentials }) =>
	promisedRequest({
	url: PLEROMA_EMOJI_UNREACT_URL(id, emoji),
	method: 'DELETE',
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const bookmarkStatus = ({ id, credentials, ...options }) =>
	promisedRequest({
	url: MASTODON_BOOKMARK_STATUS_URL(id),
	credentials,
	method: 'POST',
	payload: {
	folder_id: options.folder_id,
	},
	})

	export const unbookmarkStatus = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_UNBOOKMARK_STATUS_URL(id),
	credentials,
	method: 'POST',
	})

	export const pinOwnStatus = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_PIN_OWN_STATUS(id),
	credentials,
	method: 'POST',
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const unpinOwnStatus = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_UNPIN_OWN_STATUS(id),
	credentials,
	method: 'POST',
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const muteConversation = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_MUTE_CONVERSATION(id),
	credentials,
	method: 'POST',
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const unmuteConversation = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_UNMUTE_CONVERSATION(id),
	credentials,
	method: 'POST',
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const vote = ({ pollId, choices, credentials }) => {
	- const form = new FormData()
	- form.append('choices', choices)
	-
	return promisedRequest({
	url: MASTODON_VOTE_URL(encodeURIComponent(pollId)),
	method: 'POST',
	credentials,
	payload: {
	choices,
	},
	})
	}

	// #Posting
	export const postStatus = ({
	credentials,
	status,
	spoilerText,
	visibility,
	sensitive,
	poll,
	mediaIds = [],
	inReplyToStatusId,
	quoteId,
	contentType,
	preview,
	idempotencyKey,
	}) => {
	const form = new FormData()
	const pollOptions = poll.options \|\| []

	form.append('status', status)
	form.append('source', 'Pleroma FE')
	if (spoilerText) form.append('spoiler_text', spoilerText)
	if (visibility) form.append('visibility', visibility)
	if (sensitive) form.append('sensitive', sensitive)
	if (contentType) form.append('content_type', contentType)
	mediaIds.forEach((val) => {
	form.append('media_ids[]', val)
	})
	if (pollOptions.some((option) => option !== '')) {
	const normalizedPoll = {
	expires_in: parseInt(poll.expiresIn, 10),
	multiple: poll.multiple,
	}
	Object.keys(normalizedPoll).forEach((key) => {
	form.append(`poll[${key}]`, normalizedPoll[key])
	})

	pollOptions.forEach((option) => {
	form.append('poll[options][]', option)
	})
	}
	if (inReplyToStatusId) {
	form.append('in_reply_to_id', inReplyToStatusId)
	}
	if (quoteId) {
	form.append('quote_id', quoteId)
	}
	if (preview) {
	form.append('preview', 'true')
	}

	const headers = {}
	if (idempotencyKey) {
	headers['idempotency-key'] = idempotencyKey
	}

	return promisedRequest({
	url: MASTODON_POST_STATUS_URL,
	formData: form,
	method: 'POST',
	credentials,
	headers,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))
	}

	export const editStatus = ({
	id,
	credentials,
	status,
	spoilerText,
	sensitive,
	poll,
	mediaIds = [],
	contentType,
	}) => {
	const form = new FormData()
	const pollOptions = poll.options \|\| []

	form.append('status', status)
	if (spoilerText) form.append('spoiler_text', spoilerText)
	if (sensitive) form.append('sensitive', sensitive)
	if (contentType) form.append('content_type', contentType)
	mediaIds.forEach((val) => {
	form.append('media_ids[]', val)
	})

	if (pollOptions.some((option) => option !== '')) {
	const normalizedPoll = {
	expires_in: parseInt(poll.expiresIn, 10),
	multiple: poll.multiple,
	}
	Object.keys(normalizedPoll).forEach((key) => {
	form.append(`poll[${key}]`, normalizedPoll[key])
	})

	pollOptions.forEach((option) => {
	form.append('poll[options][]', option)
	})
	}

	return promisedRequest({
	url: MASTODON_STATUS_URL(id),
	formData: form,
	method: 'PUT',
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))
	}

	export const deleteStatus = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_DELETE_URL(id),
	credentials,
	method: 'DELETE',
	})

	export const uploadMedia = ({ formData, credentials }) =>
	promisedRequest({
	url: MASTODON_MEDIA_UPLOAD_URL,
	formData,
	method: 'POST',
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseAttachment(data) }))

	export const setMediaDescription = ({ id, description, credentials }) =>
	promisedRequest({
	url: `${MASTODON_MEDIA_UPLOAD_URL}/${id}`,
	method: 'PUT',
	credentials,
	payload: {
	description,
	},
	}).then(({ data, ...rest }) => ({ ...rest, data: parseAttachment(data) }))

	// #Notifications
	export const dismissNotification = ({ credentials, id }) =>
	promisedRequest({
	url: MASTODON_DISMISS_NOTIFICATION_URL(id),
	method: 'POST',
	payload: { id },
	credentials,
	})

	export const markNotificationsAsSeen = ({
	id,
	credentials,
	single = false,
	}) => {
	const formData = new FormData()

	if (single) {
	formData.append('id', id)
	} else {
	formData.append('max_id', id)
	}

	return promisedRequest({
	url: NOTIFICATION_READ_URL,
	formData,
	credentials,
	method: 'POST',
	})
	}

	// #Announcements
	export const getAnnouncements = ({ credentials }) =>
	promisedRequest({ url: MASTODON_ANNOUNCEMENTS_URL, credentials })

	export const dismissAnnouncement = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_ANNOUNCEMENTS_DISMISS_URL(id),
	credentials,
	method: 'POST',
	})

	// #Imports
	export const importMutes = ({ file, credentials }) => {
	const formData = new FormData()
	formData.append('list', file)
	return promisedRequest({
	url: MUTES_IMPORT_URL,
	formData,
	method: 'POST',
	credentials,
	}).then((response) => response.ok)
	}

	export const importBlocks = ({ file, credentials }) => {
	const formData = new FormData()
	formData.append('list', file)
	return promisedRequest({
	url: BLOCKS_IMPORT_URL,
	formData,
	method: 'POST',
	credentials,
	}).then((response) => response.ok)
	}

	export const importFollows = ({ file, credentials }) => {
	const formData = new FormData()
	formData.append('list', file)
	return promisedRequest({
	url: FOLLOW_IMPORT_URL,
	formData,
	method: 'POST',
	credentials,
	}).then((response) => response.ok)
	}

	export const exportFriends = ({ id, credentials }) => {
	// biome-ignore lint/suspicious/noAsyncPromiseExecutor: TODO refactor this
	return new Promise(async (resolve, reject) => {
	try {
	let friends = []
	let more = true
	while (more) {
	const maxId = friends.length > 0 ? last(friends).id : undefined
	const users = await fetchFriends({
	id,
	maxId,
	credentials,
	withRelationships: true,
	})
	friends = concat(friends, users)
	if (users.length === 0) {
	more = false
	}
	}
	resolve(friends)
	} catch (err) {
	reject(err)
	}
	})
	}

	// #Profile settings
	export const updateNotificationSettings = ({ credentials, settings }) => {
	return promisedRequest({
	url: NOTIFICATION_SETTINGS_URL,
	credentials,
	method: 'PUT',
	payload: settings,
	})
	}

	export const updateProfileImages = ({
	credentials,
	avatar = null,
	avatarName = null,
	banner = null,
	background = null,
	}) => {
	const form = new FormData()
	if (avatar !== null) {
	if (avatarName !== null) {
	form.append('avatar', avatar, avatarName)
	} else {
	form.append('avatar', avatar)
	}
	}
	if (banner !== null) form.append('header', banner)
	if (background !== null) form.append('pleroma_background_image', background)
	return promisedRequest({
	url: MASTODON_PROFILE_UPDATE_URL,
	credentials,
	method: 'PATCH',
	formData: form,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseUser(data) }))
	}

	export const updateProfile = ({ credentials, params }) => {
	const formData = new FormData()

	for (const name in params) {
	if (name === 'fields_attributes') {
	params[name].forEach((param, i) => {
	formData.append(name + `[${i}][name]`, param.name)
	formData.append(name + `[${i}][value]`, param.value)
	})
	} else {
	if (typeof params[name] === 'object') {
	console.warn(
	'Object detected in updateProfile API call. This will not work, use updateProfileJSON instead.',
	)
	console.warn('Object:\n' + JSON.stringify(params[name], null, 2))
	}
	formData.append(name, params[name])
	}
	}

	return promisedRequest({
	url: MASTODON_PROFILE_UPDATE_URL,
	credentials,
	method: 'PATCH',
	formData,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseUser(data) }))
	}

	export const updateProfileJSON = ({ credentials, params }) =>
	promisedRequest({
	url: MASTODON_PROFILE_UPDATE_URL,
	credentials,
	payload: params,
	method: 'PATCH',
	}).then(({ data, ...rest }) => ({ ...rest, data: parseUser(data) }))

	export const changeEmail = ({ credentials, email, password }) => {
	const form = new FormData()

	form.append('email', email)
	form.append('password', password)

	return promisedRequest({
	url: CHANGE_EMAIL_URL,
	formData: form,
	method: 'POST',
	credentials,
	})
	}

	export const moveAccount = ({ credentials, password, targetAccount }) => {
	const form = new FormData()

	form.append('password', password)
	form.append('target_account', targetAccount)

	return promisedRequest({
	url: MOVE_ACCOUNT_URL,
	formData: form,
	method: 'POST',
	credentials,
	})
	}

	export const changePassword = ({
	credentials,
	password,
	newPassword,
	newPasswordConfirmation,
	}) => {
	const form = new FormData()

	form.append('password', password)
	form.append('new_password', newPassword)
	form.append('new_password_confirmation', newPasswordConfirmation)

	return promisedRequest({
	url: CHANGE_PASSWORD_URL,
	formData: form,
	method: 'POST',
	credentials,
	})
	}

	// #MFA
	export const settingsMFA = ({ credentials }) =>
	promisedRequest({
	url: MFA_SETTINGS_URL,
	credentials,
	method: 'GET',
	})

	export const mfaDisableOTP = ({ credentials, password }) => {
	const form = new FormData()

	form.append('password', password)

	return promisedRequest({
	url: MFA_DISABLE_OTP_URL,
	formData: form,
	method: 'DELETE',
	credentials,
	})
	}

	export const mfaConfirmOTP = ({ credentials, password, token }) => {
	const form = new FormData()

	form.append('password', password)
	form.append('code', token)

	return promisedRequest({
	url: MFA_CONFIRM_OTP_URL,
	formData: form,
	credentials,
	method: 'POST',
	})
	}
	export const mfaSetupOTP = ({ credentials }) =>
	promisedRequest({
	url: MFA_SETUP_OTP_URL,
	credentials,
	method: 'GET',
	})
	export const generateMfaBackupCodes = ({ credentials }) =>
	promisedRequest({
	url: MFA_BACKUP_CODES_URL,
	credentials,
	method: 'GET',
	})

	// #Aliases
	export const addAlias = ({ credentials, alias }) =>
	promisedRequest({
	url: ALIASES_URL,
	method: 'PUT',
	credentials,
	payload: { alias },
	})

	export const deleteAlias = ({ credentials, alias }) =>
	promisedRequest({
	url: ALIASES_URL,
	method: 'DELETE',
	credentials,
	payload: { alias },
	})

	export const listAliases = ({ credentials }) =>
	promisedRequest({
	url: ALIASES_URL,
	method: 'GET',
	credentials,
	params: {
	_cacheBooster: new Date().getTime(),
	},
	})

	// User manipulation
	export const fetchUserRelationship = ({ id, withSuspended, credentials }) =>
	promisedRequest({
	url: MASTODON_USER_RELATIONSHIPS_URL({ id, withSuspended }),
	credentials,
	})

	export const followUser = ({ id, credentials, ...options }) => {
	const payload = {}

	if (options.reblogs !== undefined) {
	payload.reblogs = options.reblogs
	}

	if (options.notify !== undefined) {
	payload.notify = options.notify
	}

	return promisedRequest({
	url: MASTODON_FOLLOW_URL(id),
	payload,
	credentials,
	method: 'POST',
	})
	}

	export const unfollowUser = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_UNFOLLOW_URL(id),
	credentials,
	method: 'POST',
	})
	export const fetchUserInLists = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_USER_IN_LISTS(id),
	credentials,
	})

	export const removeUserFromFollowers = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_REMOVE_USER_FROM_FOLLOWERS(id),
	credentials,
	method: 'POST',
	})

	export const fetchFollowRequests = ({ credentials }) =>
	promisedRequest({
	url: MASTODON_FOLLOW_REQUESTS_URL,
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: data.map(parseUser) }))

	export const approveUser = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_APPROVE_USER_URL(id),
	credentials,
	method: 'POST',
	})

	export const denyUser = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_DENY_USER_URL(id),
	credentials,
	method: 'POST',
	})

	export const editUserNote = ({ id, credentials, comment }) =>
	promisedRequest({
	url: MASTODON_USER_NOTE_URL(id),
	credentials,
	payload: {
	comment,
	},
	method: 'POST',
	})

	export const fetchMutes = ({ maxId, credentials }) =>
	promisedRequest({
	url: MASTODON_USER_MUTES_URL({ maxId, withRelationships: true }),
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: data.map(parseUser) }))

	export const muteUser = ({ id, expiresIn, credentials }) => {
	const payload = {}
	if (expiresIn) {
	payload.expires_in = expiresIn
	}

	return promisedRequest({
	url: MASTODON_MUTE_USER_URL(id),
	credentials,
	method: 'POST',
	payload,
	})
	}

	export const unmuteUser = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_UNMUTE_USER_URL(id),
	credentials,
	method: 'POST',
	})

	export const fetchBlocks = ({ maxId, credentials }) =>
	promisedRequest({
	url: MASTODON_USER_BLOCKS_URL({ maxId, withRelationships: true }),
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: data.map(parseUser) }))

	export const blockUser = ({ id, expiresIn, credentials }) => {
	const payload = {}
	if (expiresIn) {
	payload.duration = expiresIn
	}

	return promisedRequest({
	url: MASTODON_BLOCK_USER_URL(id),
	credentials,
	method: 'POST',
	payload,
	})
	}

	export const unblockUser = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_UNBLOCK_USER_URL(id),
	credentials,
	method: 'POST',
	})

	export const reportUser = ({
	credentials,
	userId,
	statusIds,
	comment,
	forward,
	}) =>
	promisedRequest({
	url: MASTODON_REPORT_USER_URL,
	method: 'POST',
	payload: {
	account_id: userId,
	status_ids: statusIds,
	comment,
	forward,
	},
	credentials,
	})

	// #Domain mutes
	export const fetchDomainMutes = ({ credentials }) =>
	promisedRequest({ url: MASTODON_DOMAIN_BLOCKS_URL, credentials })

	export const muteDomain = ({ domain, credentials }) =>
	promisedRequest({
	url: MASTODON_DOMAIN_BLOCKS_URL,
	method: 'POST',
	payload: { domain },
	credentials,
	})

	export const unmuteDomain = ({ domain, credentials }) =>
	promisedRequest({
	url: MASTODON_DOMAIN_BLOCKS_URL,
	method: 'DELETE',
	payload: { domain },
	credentials,
	})

	// #Backups
	export const addBackup = ({ credentials }) =>
	promisedRequest({
	url: PLEROMA_BACKUP_URL,
	method: 'POST',
	credentials,
	})

	export const listBackups = ({ credentials }) =>
	promisedRequest({
	url: PLEROMA_BACKUP_URL,
	method: 'GET',
	credentials,
	params: {
	_cacheBooster: new Date().getTime(),
	},
	})

	// #OAuth
	export const fetchOAuthTokens = ({ credentials }) =>
	promisedRequest({
	url: '/api/oauth_tokens.json',
	credentials,
	})

	export const revokeOAuthToken = ({ id, credentials }) =>
	promisedRequest({
	url: `/api/oauth_tokens/${id}`,
	credentials,
	method: 'DELETE',
	})

	// #Lists
	export const fetchLists = ({ credentials }) =>
	promisedRequest({
	url: MASTODON_LIST_URL(),
	credentials,
	})

	export const createList = ({ title, credentials }) =>
	promisedRequest({
	url: MASTODON_LIST_URL(),
	credentials,
	method: 'POST',
	payload: { title },
	})

	export const getList = ({ listId, credentials }) =>
	promisedRequest({
	url: MASTODON_LIST_URL(listId),
	credentials,
	})

	export const updateList = ({ listId, title, credentials }) =>
	promisedRequest({
	url: MASTODON_LIST_URL(listId),

	credentials,
	method: 'PUT',
	payload: { title },
	})

	export const getListAccounts = ({ listId, credentials }) =>
	promisedRequest({
	url: MASTODON_LIST_ACCOUNTS_URL(listId),
	credentials,
	}).then((data) => data.map(({ id }) => id))

	export const addAccountsToList = ({ listId, accountIds, credentials }) =>
	promisedRequest({
	url: MASTODON_LIST_ACCOUNTS_URL(listId),
	credentials,
	method: 'POST',
	payload: { account_ids: accountIds },
	})

	export const removeAccountsFromList = ({ listId, accountIds, credentials }) =>
	promisedRequest({
	url: MASTODON_LIST_ACCOUNTS_URL(listId),
	credentials,
	method: 'DELETE',
	payload: { account_ids: accountIds },
	})

	export const deleteList = ({ listId, credentials }) =>
	promisedRequest({
	url: MASTODON_LIST_URL(listId),
	method: 'DELETE',
	credentials,
	})

	// #Bookmarks
	export const fetchBookmarkFolders = ({ credentials }) =>
	promisedRequest({
	url: PLEROMA_BOOKMARK_FOLDERS_URL,
	credentials,
	})

	export const createBookmarkFolder = ({ name, emoji, credentials }) =>
	promisedRequest({
	url: PLEROMA_BOOKMARK_FOLDERS_URL,
	credentials,
	method: 'POST',
	payload: { name, emoji },
	})

	export const updateBookmarkFolder = ({ folderId, name, emoji, credentials }) =>
	promisedRequest({
	url: PLEROMA_BOOKMARK_FOLDER_URL(folderId),
	credentials,
	method: 'PATCH',
	payload: { name, emoji },
	})

	export const deleteBookmarkFolder = ({ folderId, credentials }) =>
	promisedRequest({
	url: PLEROMA_BOOKMARK_FOLDER_URL(folderId),
	method: 'DELETE',
	credentials,
	})

	// #So long and thanks for all the fish
	export const deleteAccount = ({ credentials, password }) => {
	const formData = new FormData()

	formData.append('password', password)

	return promisedRequest({
	url: DELETE_ACCOUNT_URL,
	formData,
	method: 'POST',
	credentials,
	})
	}
	diff --git a/src/boot/after_store.js b/src/boot/after_store.js
	index 0b4825ca08..4ccfa4d41d 100644
	--- a/src/boot/after_store.js
	+++ b/src/boot/after_store.js
	@@ -1,612 +1,622 @@
	/* global process */

	import vClickOutside from 'click-outside-vue3'
	import { createApp } from 'vue'
	import { createRouter, createWebHistory } from 'vue-router'
	import VueVirtualScroller from 'vue-virtual-scroller'
	import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import Status from 'src/components/status/status.vue'
	import StillImage from 'src/components/still-image/still-image.vue'

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

	config.autoAddCss = false

	import App from '../App.vue'
	import FaviconService from '../services/favicon_service/favicon_service.js'
	import { applyStyleConfig } from '../services/style_setter/style_setter.js'
	import { initServiceWorker, updateFocus } from '../services/sw/sw.js'
	import {
	windowHeight,
	windowWidth,
	} from '../services/window_utils/window_utils'
	import routes from './routes'

	import { useAuthFlowStore } from 'src/stores/auth_flow'
	import { useEmojiStore } from 'src/stores/emoji.js'
	import { useI18nStore } from 'src/stores/i18n'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useLocalConfigStore } from 'src/stores/local_config.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'
	import { useUserHighlightStore } from 'src/stores/user_highlight.js'

	import VBodyScrollLock from 'src/directives/body_scroll_lock'
	import {
	INSTANCE_DEFAULT_CONFIG_DEFINITIONS,
	INSTANCE_IDENTITY_DEFAULT_DEFINITIONS,
	INSTANCE_IDENTIY_EXTERNAL,
	} from 'src/modules/default_config_state.js'

	let staticInitialResults = null

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

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

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

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

	useInstanceCapabilitiesStore().set(
	'pleromaExtensionsAvailable',
	data.pleroma,
	)
	useInstanceStore().set({
	path: 'limits.textLimit',
	value: textLimit,
	})
	useInstanceStore().set({
	path: 'accountApprovalRequired',
	value: data.approval_required,
	})
	useInstanceStore().set({
	path: 'birthdayRequired',
	value: !!data.pleroma?.metadata.birthday_required,
	})
	useInstanceStore().set({
	path: 'birthdayMinAge',
	value: data.pleroma?.metadata.birthday_min_age \|\| 0,
	})

	if (vapidPublicKey) {
	useInstanceStore().set({
	path: 'vapidPublicKey',
	value: vapidPublicKey,
	})
	}
	} else {
	throw res
	}
	} catch (error) {
	console.error('Could not load instance config, potentially fatal')
	console.error(error)
	}
	// We should check for scrobbles support here but it requires userId
	// so instead we check for it where it's fetched (statuses.js)
	}

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

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

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

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

	Object.keys(INSTANCE_IDENTITY_DEFAULT_DEFINITIONS).forEach((source) => {
	if (source === 'name') return
	if (INSTANCE_IDENTIY_EXTERNAL.has(source)) return
	useInstanceStore().set({
	value:
	config[source] ?? INSTANCE_IDENTITY_DEFAULT_DEFINITIONS[source].default,
	path: `instanceIdentity.${source}`,
	})
	})

	Object.keys(INSTANCE_DEFAULT_CONFIG_DEFINITIONS).forEach((source) =>
	useInstanceStore().set({
	value:
	config[source] ?? INSTANCE_DEFAULT_CONFIG_DEFINITIONS[source].default,
	path: `prefsStorage.${source}`,
	}),
	)

	useAuthFlowStore().setInitialStrategy(config.loginMethod)
	}

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

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

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

	const resolveStaffAccounts = ({ store, accounts }) => {
	const nicknames = accounts.map((uri) => uri.split('/').pop())
	useInstanceStore().set({
	path: 'staffAccounts',
	value: nicknames,
	})
	}

	const getNodeInfo = async ({ store }) => {
	try {
	let res = await preloadFetch('/nodeinfo/2.1.json')
	if (!res.ok) res = await preloadFetch('/nodeinfo/2.0.json')
	if (res.ok) {
	const data = await res.json()
	const metadata = data.metadata
	const features = metadata.features
	useInstanceStore().set({
	path: 'instanceIdentity.name',
	value: metadata.nodeName,
	})
	useInstanceStore().set({
	path: 'registrationOpen',
	value: data.openRegistrations,
	})
	useInstanceCapabilitiesStore().set(
	'mediaProxyAvailable',
	features.includes('media_proxy'),
	)
	useInstanceCapabilitiesStore().set(
	'safeDM',
	features.includes('safe_dm_mentions'),
	)
	useInstanceCapabilitiesStore().set(
	'shoutAvailable',
	features.includes('chat'),
	)
	useInstanceCapabilitiesStore().set(
	'pleromaChatMessagesAvailable',
	features.includes('pleroma_chat_messages'),
	)
	useInstanceCapabilitiesStore().set(
	'pleromaCustomEmojiReactionsAvailable',

	features.includes('pleroma_custom_emoji_reactions') \|\|
	features.includes('custom_emoji_reactions'),
	)
	useInstanceCapabilitiesStore().set(
	'pleromaBookmarkFoldersAvailable',
	features.includes('pleroma:bookmark_folders'),
	)
	useInstanceCapabilitiesStore().set(
	'gopherAvailable',
	features.includes('gopher'),
	)
	useInstanceCapabilitiesStore().set(
	'pollsAvailable',
	features.includes('polls'),
	)
	useInstanceCapabilitiesStore().set(
	'editingAvailable',
	features.includes('editing'),
	)
	useInstanceCapabilitiesStore().set(
	'mailerEnabled',
	metadata.mailerEnabled,
	)
	useInstanceCapabilitiesStore().set(
	'quotingAvailable',
	features.includes('quote_posting'),
	)
	useInstanceCapabilitiesStore().set(
	'groupActorAvailable',
	features.includes('pleroma:group_actors'),
	)
	useInstanceCapabilitiesStore().set(
	'blockExpiration',
	features.includes('pleroma:block_expiration'),
	)
	useInstanceStore().set({
	path: 'localBubbleInstances',
	value: metadata.localBubbleInstances ?? [],
	})
	useInstanceCapabilitiesStore().set(
	'localBubble',
	(metadata.localBubbleInstances ?? []).length > 0,
	)

	useInstanceStore().set({
	path: 'limits.pollLimits',
	value: metadata.pollLimits,
	})
	const uploadLimits = metadata.uploadLimits
	useInstanceStore().set({
	path: 'limits.uploadlimit',
	value: parseInt(uploadLimits.general),
	})
	useInstanceStore().set({
	path: 'limits.avatarlimit',
	value: parseInt(uploadLimits.avatar),
	})
	useInstanceStore().set({
	path: 'limits.backgroundlimit',
	value: parseInt(uploadLimits.background),
	})
	useInstanceStore().set({
	path: 'limits.bannerlimit',
	value: parseInt(uploadLimits.banner),
	})
	useInstanceStore().set({
	path: 'limits.fieldsLimits',
	value: metadata.fieldsLimits,
	})

	useInstanceStore().set({
	path: 'restrictedNicknames',
	value: metadata.restrictedNicknames,
	})
	useInstanceCapabilitiesStore().set('postFormats', metadata.postFormats)

	const suggestions = metadata.suggestions
	useInstanceCapabilitiesStore().set(
	'suggestionsEnabled',
	suggestions.enabled,
	)
	// this is unused, why?
	useInstanceCapabilitiesStore().set('suggestionsWeb', suggestions.web)

	const software = data.software
	useInstanceStore().set({
	path: 'backendVersion',
	value: software.version,
	})
	useInstanceStore().set({
	path: 'backendRepository',
	value: software.repository,
	})

	const priv = metadata.private
	useInstanceStore().set({ path: 'privateMode', value: priv })

	const frontendVersion = window.___pleromafe_commit_hash
	useInstanceStore().set({
	path: 'frontendVersion',
	value: frontendVersion,
	})

	const federation = metadata.federation

	useInstanceCapabilitiesStore().set(
	'tagPolicyAvailable',
	typeof federation.mrf_policies === 'undefined'
	? false
	: metadata.federation.mrf_policies.includes('TagPolicy'),
	)

	useInstanceStore().set({
	path: 'federationPolicy',
	value: federation,
	})
	useInstanceStore().set({
	path: 'federating',
	value:
	typeof federation.enabled === 'undefined' ? true : federation.enabled,
	})

	const accountActivationRequired = metadata.accountActivationRequired
	useInstanceStore().set({
	path: 'accountActivationRequired',
	value: accountActivationRequired,
	})

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

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

	await setSettings({ store, apiConfig, staticConfig })
	}

	const checkOAuthToken = async ({ store }) => {
	const oauth = useOAuthStore()
	if (oauth.userToken) {
	return store.dispatch('loginUser', oauth.userToken)
	}
	return Promise.resolve()
	}

	const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
	const app = createApp(App)
	// Must have app use pinia before we do anything that touches the store
	// https://pinia.vuejs.org/core-concepts/plugins.html#Introduction
	// "Plugins are only applied to stores created after the plugins themselves, and after pinia is passed to the app, otherwise they won't be applied."
	app.use(pinia)

	+ app.config.errorHandler = (error, instance, info) => {
	+ console.error(
	+ 'Global Vue Error Handler caught an error:',
	+ error,
	+ instance,
	+ info,
	+ )
	+ useInterfaceStore().setGlobalError({ error, instance, info })
	+ }
	+
	const waitForAllStoresToLoad = async () => {
	// the stores that do not persist technically do not need to be awaited here,
	// but that involves either hard-coding the stores in some place (prone to errors)
	// or writing another vite plugin to analyze which stores needs persisting (++load time)
	const allStores = import.meta.glob('../stores/*.js', { eager: true })
	if (process.env.NODE_ENV === 'development') {
	// do some checks to avoid common errors
	if (!Object.keys(allStores).length) {
	throw new Error(
	'No stores are available. Check the code in src/boot/after_store.js',
	)
	}
	}
	await Promise.all(
	Object.entries(allStores).map(async ([name, mod]) => {
	const isStoreName = (name) => name.startsWith('use')
	if (process.env.NODE_ENV === 'development') {
	if (Object.keys(mod).filter(isStoreName).length !== 1) {
	throw new Error(
	'Each store file must export exactly one store as a named export. Check your code in src/stores/',
	)
	}
	}
	const storeFuncName = Object.keys(mod).find(isStoreName)
	if (storeFuncName && typeof mod[storeFuncName] === 'function') {
	const p = mod[storeFuncName]().$persistLoaded
	if (!(p instanceof Promise)) {
	throw new Error(
	`${name} store's $persistLoaded is not a Promise. The persist plugin is not applied.`,
	)
	}
	await p
	} else {
	throw new Error(
	`Store module ${name} does not export a 'use...' function`,
	)
	}
	}),
	)
	}

	try {
	await waitForAllStoresToLoad()
	} catch (e) {
	console.error('Cannot load stores:', e)
	storageError = e
	}

	if (storageError) {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'errors.storage_unavailable',
	level: 'error',
	})
	}

	useInterfaceStore().setLayoutWidth(windowWidth())
	useInterfaceStore().setLayoutHeight(windowHeight())

	window.syncConfig = useSyncConfigStore()
	window.mergedConfig = useMergedConfigStore()
	window.localConfig = useLocalConfigStore()
	window.highlightConfig = useUserHighlightStore()

	FaviconService.initFaviconService()
	initServiceWorker(store)

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

	const overrides = window.___pleromafe_dev_overrides \|\| {}
	const server =
	typeof overrides.target !== 'undefined'
	? overrides.target
	: window.location.origin
	useInstanceStore().set({ path: 'server', value: server })

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

	applyStyleConfig(useMergedConfigStore().mergedConfig, i18n.global)

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

	getTOS({ store })
	getStickers({ store })

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

	useI18nStore().setI18n(i18n)

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

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

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

	app.component('FAIcon', FontAwesomeIcon)
	app.component('FALayers', FontAwesomeLayers)
	app.component('Status', Status)
	app.component('RichContent', RichContent)
	app.component('StillImage', StillImage)

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

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

	export default afterStoreSetup
	diff --git a/src/boot/routes.js b/src/boot/routes.js
	index 9b00a8004f..d50baab04e 100644
	--- a/src/boot/routes.js
	+++ b/src/boot/routes.js
	@@ -1,315 +1,314 @@
	import { defineAsyncComponent } from 'vue'

	+import AuthForm from 'src/components/auth_form/auth_form.js'
	import BookmarkTimeline from 'src/components/bookmark_timeline/bookmark_timeline.vue'
	import BubbleTimeline from 'src/components/bubble_timeline/bubble_timeline.vue'
	import ConversationPage from 'src/components/conversation-page/conversation-page.vue'
	import DMs from 'src/components/dm_timeline/dm_timeline.vue'
	import FriendsTimeline from 'src/components/friends_timeline/friends_timeline.vue'
	import NavPanel from 'src/components/nav_panel/nav_panel.vue'
	import PublicAndExternalTimeline from 'src/components/public_and_external_timeline/public_and_external_timeline.vue'
	import PublicTimeline from 'src/components/public_timeline/public_timeline.vue'
	import QuotesTimeline from 'src/components/quotes_timeline/quotes_timeline.vue'
	import RemoteUserResolver from 'src/components/remote_user_resolver/remote_user_resolver.vue'
	import TagTimeline from 'src/components/tag_timeline/tag_timeline.vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'

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

	let routes = [
	{
	name: 'root',
	path: '/',
	redirect: () => {
	return (
	(store.state.users.currentUser
	? useInstanceStore().instanceIdentity.redirectRootLogin
	: useInstanceStore().instanceIdentity.redirectRootNoLogin) \|\|
	'/main/all'
	)
	},
	},
	{
	name: 'public-external-timeline',
	path: '/main/all',
	component: PublicAndExternalTimeline,
	},
	{
	name: 'public-timeline',
	path: '/main/public',
	component: PublicTimeline,
	},
	{
	name: 'friends',
	path: '/main/friends',
	component: FriendsTimeline,
	beforeEnter: validateAuthenticatedRoute,
	},
	{ name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
	{ name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
	{ name: 'bubble', path: '/bubble', component: BubbleTimeline },
	{
	name: 'conversation',
	path: '/notice/:id',
	component: ConversationPage,
	meta: { dontScroll: true },
	},
	{ name: 'quotes', path: '/notice/:id/quotes', component: QuotesTimeline },
	{
	name: 'remote-user-profile-acct',
	path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',
	component: RemoteUserResolver,
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'remote-user-profile',
	path: '/remote-users/:hostname/:username',
	component: RemoteUserResolver,
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'external-user-profile',
	path: '/users/$:id',
	component: defineAsyncComponent(
	() => import('src/components/user_profile/user_profile.vue'),
	),
	},
	{
	name: 'user-profile-admin-view',
	path: '/users/$:id/admin_view',
	component: defineAsyncComponent(
	() => import('src/components/user_profile/user_profile_admin_view.vue'),
	),
	},
	{
	name: 'interactions',
	path: '/users/:username/interactions',
	component: defineAsyncComponent(
	() => import('src/components/interactions/interactions.vue'),
	),
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'dms',
	path: '/users/:username/dms',
	component: DMs,
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'registration',
	path: '/registration',
	component: defineAsyncComponent(
	() => import('src/components/registration/registration.vue'),
	),
	},
	{
	name: 'password-reset',
	path: '/password-reset',
	component: defineAsyncComponent(
	() => import('src/components/password_reset/password_reset.vue'),
	),
	props: true,
	},
	{
	name: 'registration-token',
	path: '/registration/:token',
	component: defineAsyncComponent(
	() => import('src/components/registration/registration.vue'),
	),
	},
	{
	name: 'friend-requests',
	path: '/friend-requests',
	component: defineAsyncComponent(
	() => import('src/components/follow_requests/follow_requests.vue'),
	),
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'notifications',
	path: '/:username/notifications',
	component: defineAsyncComponent(
	() => import('src/components/notifications/notifications.vue'),
	),
	props: () => ({ disableTeleport: true }),
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'login',
	path: '/login',
	- component: defineAsyncComponent(
	- () => import('src/components/auth_form/auth_form.js'),
	- ),
	+ component: AuthForm,
	},
	{
	name: 'shout-panel',
	path: '/shout-panel',
	component: defineAsyncComponent(
	() => import('src/components/shout_panel/shout_panel.vue'),
	),
	props: () => ({ floating: false }),
	},
	{
	name: 'oauth-callback',
	path: '/oauth-callback',
	component: defineAsyncComponent(
	() => import('src/components/oauth_callback/oauth_callback.vue'),
	),
	props: (route) => ({ code: route.query.code }),
	},
	{
	name: 'search',
	path: '/search',
	component: defineAsyncComponent(
	() => import('src/components/search/search.vue'),
	),
	props: (route) => ({ query: route.query.query }),
	},
	{
	name: 'who-to-follow',
	path: '/who-to-follow',
	component: defineAsyncComponent(
	() => import('src/components/who_to_follow/who_to_follow.vue'),
	),
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'about',
	path: '/about',
	component: defineAsyncComponent(
	() => import('src/components/about/about.vue'),
	),
	},
	{
	name: 'announcements',
	path: '/announcements',
	component: defineAsyncComponent(
	() =>
	import('src/components/announcements_page/announcements_page.vue'),
	),
	},
	{
	name: 'drafts',
	path: '/drafts',
	component: defineAsyncComponent(
	() => import('src/components/drafts/drafts.vue'),
	),
	},
	{
	name: 'user-profile',
	path: '/users/:name',
	component: defineAsyncComponent(
	() => import('src/components/user_profile/user_profile.vue'),
	),
	},
	{
	name: 'legacy-user-profile',
	path: '/:name',
	component: defineAsyncComponent(
	() => import('src/components/user_profile/user_profile.vue'),
	),
	},
	{
	name: 'lists',
	path: '/lists',
	component: defineAsyncComponent(
	() => import('src/components/lists/lists.vue'),
	),
	},
	{
	name: 'lists-timeline',
	path: '/lists/:id',
	component: defineAsyncComponent(
	() => import('src/components/lists_timeline/lists_timeline.vue'),
	),
	},
	{
	name: 'lists-edit',
	path: '/lists/:id/edit',
	component: defineAsyncComponent(
	() => import('src/components/lists_edit/lists_edit.vue'),
	),
	},
	{
	name: 'lists-new',
	path: '/lists/new',
	component: defineAsyncComponent(
	() => import('src/components/lists_edit/lists_edit.vue'),
	),
	},
	{
	name: 'edit-navigation',
	path: '/nav-edit',
	component: NavPanel,
	props: () => ({ forceExpand: true, forceEditMode: true }),
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'bookmark-folders',
	path: '/bookmark_folders',
	component: defineAsyncComponent(
	() => import('src/components/bookmark_folders/bookmark_folders.vue'),
	),
	},
	{
	name: 'bookmark-folder-new',
	path: '/bookmarks/new-folder',
	component: defineAsyncComponent(
	() =>
	import(
	'src/components/bookmark_folder_edit/bookmark_folder_edit.vue'
	),
	),
	},
	{
	name: 'bookmark-folder',
	path: '/bookmarks/:id',
	component: BookmarkTimeline,
	},
	{
	name: 'bookmark-folder-edit',
	path: '/bookmarks/:id/edit',
	component: defineAsyncComponent(
	() =>
	import(
	'src/components/bookmark_folder_edit/bookmark_folder_edit.vue'
	),
	),
	},
	]

	if (useInstanceCapabilitiesStore().pleromaChatMessagesAvailable) {
	routes = routes.concat([
	{
	name: 'chat',
	path: '/users/:username/chats/:recipient_id',
	component: defineAsyncComponent(
	() => import('src/components/chat/chat.vue'),
	),
	meta: { dontScroll: false },
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'chats',
	path: '/users/:username/chats',
	component: defineAsyncComponent(
	() => import('src/components/chat_list/chat_list.vue'),
	),
	meta: { dontScroll: false },
	beforeEnter: validateAuthenticatedRoute,
	},
	])
	}

	return routes
	}
	diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
	index d5bce12a71..f7d6ebf107 100644
	--- a/src/components/attachment/attachment.js
	+++ b/src/components/attachment/attachment.js
	@@ -1,217 +1,218 @@
	import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

	import Popover from 'src/components/popover/popover.vue'
	import nsfwImage from '../../assets/nsfw.png'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useMediaViewerStore } from 'src/stores/media_viewer'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faAlignRight,
	faFile,
	faImage,
	faMusic,
	faPencilAlt,
	faPlayCircle,
	faSearchPlus,
	faStop,
	faTimes,
	faTrashAlt,
	faVideo,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faFile,
	faMusic,
	faImage,
	faVideo,
	faPlayCircle,
	faTimes,
	faStop,
	faSearchPlus,
	faTrashAlt,
	faPencilAlt,
	faAlignRight,
	)

	const Attachment = {
	props: [
	'attachment',
	'compact',
	'description',
	'hideDescription',
	'nsfw',
	'size',
	'setMedia',
	'remove',
	'shiftUp',
	'shiftDn',
	'edit',
	],
	+ emits: ['play', 'pause', 'naturalSizeLoad'],
	data() {
	return {
	localDescription: this.description \|\| this.attachment.description,
	nsfwImage:
	useInstanceStore().instanceIdentity.nsfwCensorImage \|\| nsfwImage,
	hideNsfwLocal: useMergedConfigStore().mergedConfig.hideNsfw,
	preloadImage: useMergedConfigStore().mergedConfig.preloadImage,
	loading: false,
	img: this.attachment.type === 'image' && document.createElement('img'),
	modalOpen: false,
	showHidden: false,
	flashLoaded: false,
	}
	},
	components: {
	Flash: defineAsyncComponent(() => import('src/components/flash/flash.vue')),

	VideoAttachment: defineAsyncComponent(
	() => import('src/components/video_attachment/video_attachment.vue'),
	),
	Popover,
	},
	computed: {
	classNames() {
	return [
	{
	'-loading': this.loading,
	'-nsfw-placeholder': this.hidden,
	'-editable': this.edit !== undefined,
	'-compact': this.compact,
	},
	'-type-' + this.attachment.type,
	this.size && '-size-' + this.size,
	`-${this.useContainFit ? 'contain' : 'cover'}-fit`,
	]
	},
	usePlaceholder() {
	return this.size === 'hide'
	},
	useContainFit() {
	return this.mergedConfig.useContainFit
	},
	placeholderName() {
	if (this.attachment.description === '' \|\| !this.attachment.description) {
	return this.attachment.type.toUpperCase()
	}
	return this.attachment.description
	},
	placeholderIconClass() {
	if (this.attachment.type === 'image') return 'image'
	if (this.attachment.type === 'video') return 'video'
	if (this.attachment.type === 'audio') return 'music'
	return 'file'
	},
	referrerpolicy() {
	return useInstanceCapabilitiesStore().mediaProxyAvailable
	? ''
	: 'no-referrer'
	},
	hidden() {
	return this.nsfw && this.hideNsfwLocal && !this.showHidden
	},
	isEmpty() {
	return this.attachment.type === 'html' && !this.attachment.oembed
	},
	useModal() {
	let modalTypes = []
	switch (this.size) {
	case 'hide':
	case 'small':
	modalTypes = ['image', 'video', 'audio', 'flash']
	break
	default:
	modalTypes = this.mergedConfig.playVideosInModal
	? ['image', 'video', 'flash']
	: ['image']
	break
	}
	return modalTypes.includes(this.attachment.type)
	},
	videoTag() {
	return this.useModal ? 'button' : 'span'
	},
	...mapState(useMergedConfigStore, ['mergedConfig']),
	},
	watch: {
	'attachment.description'(newVal) {
	this.localDescription = newVal
	},
	localDescription(newVal) {
	this.onEdit(newVal)
	},
	},
	methods: {
	linkClicked({ target }) {
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	},
	openModal() {
	if (this.useModal) {
	this.$emit('setMedia')
	useMediaViewerStore().setCurrentMedia(this.attachment)
	} else if (this.attachment.type === 'unknown') {
	window.open(this.attachment.url)
	}
	},
	openModalForce() {
	this.$emit('setMedia')
	useMediaViewerStore().setCurrentMedia(this.attachment)
	},
	onEdit(event) {
	this.edit && this.edit(this.attachment, event)
	},
	onRemove() {
	this.remove && this.remove(this.attachment)
	},
	onShiftUp() {
	this.shiftUp && this.shiftUp(this.attachment)
	},
	onShiftDn() {
	this.shiftDn && this.shiftDn(this.attachment)
	},
	stopFlash() {
	this.$refs.flash.closePlayer()
	},
	setFlashLoaded(event) {
	this.flashLoaded = event
	},
	toggleHidden(event) {
	if (
	this.mergedConfig.useOneClickNsfw &&
	!this.showHidden &&
	(this.attachment.type !== 'video' \|\|
	this.mergedConfig.playVideosInModal)
	) {
	this.openModal(event)
	return
	}
	if (this.img && !this.preloadImage) {
	if (this.img.onload) {
	this.img.onload()
	} else {
	this.loading = true
	this.img.src = this.attachment.url
	this.img.onload = () => {
	this.loading = false
	this.showHidden = !this.showHidden
	}
	}
	} else {
	this.showHidden = !this.showHidden
	}
	},
	onImageLoad(image) {
	const width = image.naturalWidth
	const height = image.naturalHeight
	this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height })
	},
	},
	}

	export default Attachment
	diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
	index 2de8b7b361..49786bf1ba 100644
	--- a/src/components/basic_user_card/basic_user_card.vue
	+++ b/src/components/basic_user_card/basic_user_card.vue
	@@ -1,94 +1,95 @@
	<template>
	<div class="basic-user-card">
	<router-link
	:to="userProfileLink(user)"
	@click.prevent
	>
	<UserPopover
	:user-id="user.id"
	:overlay-centers="true"
	overlay-centers-selector=".avatar"
	>
	<UserAvatar
	class="user-avatar avatar"
	:user="user"
	@click.prevent
	/>
	</UserPopover>
	</router-link>
	<div
	class="basic-user-card-collapsed-content"
	>
	<div
	:title="user.name"
	class="basic-user-card-user-name"
	>
	<strong v-if="showLineLabels">
	{{ $t('admin_dash.users.labels.name_colon') }}
	{{ ' ' }}
	</strong>
	<RichContent
	class="basic-user-card-user-name-value"
	:html="user.name"
	:emoji="user.emoji"
	:allow-non-square-emoji="allowNonSquareEmoji"
	/>
	</div>
	<div>
	<strong v-if="showLineLabels">
	{{ $t('admin_dash.users.labels.handle_colon') }}
	{{ ' ' }}
	</strong>
	<user-link
	class="basic-user-card-screen-name"
	:user="user"
	/>
	</div>
	<slot />
	</div>
	</div>
	</template>

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

	<style lang="scss">
	.basic-user-card {
	display: flex;
	- flex: 1 0;
	+ flex: 1 1 10em;
	+ min-width: 1em;
	margin: 0;
	line-height: 1.25;

	--emoji-size: 1em;

	&-collapsed-content {
	margin-left: 0.7em;
	text-align: left;
	flex: 1;
	min-width: 0;
	}

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

	&-user-name-value,
	&-screen-name {
	display: inline;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	}

	&-expanded-content {
	flex: 1;
	margin-left: 0.7em;
	min-width: 0;
	}
	}
	</style>
	diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
	index 16a03ab1d2..ca7a025ece 100644
	--- a/src/components/chat/chat.js
	+++ b/src/components/chat/chat.js
	@@ -1,432 +1,433 @@
	import { throttle } from 'lodash'
	import { mapState as mapPiniaState } from 'pinia'
	import { mapGetters, mapState } from 'vuex'

	import ChatMessage from 'src/components/chat_message/chat_message.vue'
	import ChatTitle from 'src/components/chat_title/chat_title.vue'
	import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	import chatService from '../../services/chat_service/chat_service.js'
	import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'
	import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
	import {
	getNewTopPosition,
	getScrollPosition,
	isBottomedOut,
	isScrollable,
	} from './chat_layout_utils.js'

	import { useInterfaceStore } from 'src/stores/interface.js'
	+import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useOAuthStore } from 'src/stores/oauth.js'

	import {
	chatMessages,
	getOrCreateChat,
	sendChatMessage,
	} from 'src/api/chats.js'
	import { WSConnectionStatus } from 'src/api/websocket.js'

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

	library.add(faChevronDown, faChevronLeft)

	const BOTTOMED_OUT_OFFSET = 10
	const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10
	const SAFE_RESIZE_TIME_OFFSET = 100
	const MARK_AS_READ_DELAY = 1500
	const MAX_RETRIES = 10

	const Chat = {
	components: {
	ChatMessage,
	ChatTitle,
	PostStatusForm,
	},
	data() {
	return {
	jumpToBottomButtonVisible: false,
	hoveredMessageChainId: undefined,
	lastScrollPosition: {},
	scrollableContainerHeight: '100%',
	errorLoadingChat: false,
	messageRetriers: {},
	}
	},
	created() {
	this.startFetching()
	window.addEventListener('resize', this.handleResize)
	},
	mounted() {
	window.addEventListener('scroll', this.handleScroll)
	if (typeof document.hidden !== 'undefined') {
	document.addEventListener(
	'visibilitychange',
	this.handleVisibilityChange,
	false,
	)
	}

	this.$nextTick(() => {
	this.handleResize()
	})
	},
	unmounted() {
	window.removeEventListener('scroll', this.handleScroll)
	window.removeEventListener('resize', this.handleResize)
	if (typeof document.hidden !== 'undefined')
	document.removeEventListener(
	'visibilitychange',
	this.handleVisibilityChange,
	false,
	)
	this.$store.dispatch('clearCurrentChat')
	},
	computed: {
	recipient() {
	return this.currentChat && this.currentChat.account
	},
	recipientId() {
	return this.$route.params.recipient_id
	},
	formPlaceholder() {
	if (this.recipient) {
	return this.$t('chats.message_user', {
	nickname: this.recipient.screen_name_ui,
	})
	} else {
	return ''
	}
	},
	chatViewItems() {
	return chatService.getView(this.currentChatMessageService)
	},
	newMessageCount() {
	return (
	this.currentChatMessageService &&
	this.currentChatMessageService.newMessageCount
	)
	},
	streamingEnabled() {
	return (
	this.mergedConfig.useStreamingApi &&
	this.mastoUserSocketStatus === WSConnectionStatus.JOINED
	)
	},
	...mapGetters([
	'currentChat',
	'currentChatMessageService',
	'findOpenedChatByRecipientId',
	- 'mergedConfig',
	]),
	+ ...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
	...mapPiniaState(useInterfaceStore, {
	mobileLayout: (store) => store.layoutType === 'mobile',
	}),
	...mapState({
	mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
	currentUser: (state) => state.users.currentUser,
	}),
	},
	watch: {
	chatViewItems() {
	// We don't want to scroll to the bottom on a new message when the user is viewing older messages.
	// Therefore we need to know whether the scroll position was at the bottom before the DOM update.
	const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET)
	this.$nextTick(() => {
	if (bottomedOutBeforeUpdate) {
	this.scrollDown()
	}
	})
	},
	$route: function () {
	this.startFetching()
	},
	mastoUserSocketStatus(newValue) {
	if (newValue === WSConnectionStatus.JOINED) {
	this.fetchChat({ isFirstFetch: true })
	}
	},
	},
	methods: {
	// Used to animate the avatar near the first message of the message chain when any message belonging to the chain is hovered
	onMessageHover({ isHovered, messageChainId }) {
	this.hoveredMessageChainId = isHovered ? messageChainId : undefined
	},
	onFilesDropped() {
	this.$nextTick(() => {
	this.handleResize()
	})
	},
	handleVisibilityChange() {
	this.$nextTick(() => {
	if (!document.hidden && this.bottomedOut(BOTTOMED_OUT_OFFSET)) {
	this.scrollDown({ forceRead: true })
	}
	})
	},
	// "Sticks" scroll to bottom instead of top, helps with OSK resizing the viewport
	handleResize(opts = {}) {
	const { delayed = false } = opts

	if (delayed) {
	setTimeout(() => {
	this.handleResize({ ...opts, delayed: false })
	}, SAFE_RESIZE_TIME_OFFSET)
	return
	}

	this.$nextTick(() => {
	const { offsetHeight = undefined } = getScrollPosition()
	const diff = offsetHeight - this.lastScrollPosition.offsetHeight
	if (diff !== 0 && !this.bottomedOut()) {
	this.$nextTick(() => {
	window.scrollBy({ top: -Math.trunc(diff) })
	})
	}
	this.lastScrollPosition = getScrollPosition()
	})
	},
	scrollDown(options = {}) {
	const { behavior = 'auto', forceRead = false } = options
	this.$nextTick(() => {
	window.scrollTo({
	top: document.documentElement.scrollHeight,
	behavior,
	})
	})
	if (forceRead) {
	this.readChat()
	}
	},
	readChat() {
	if (
	!(
	this.currentChatMessageService && this.currentChatMessageService.maxId
	)
	) {
	return
	}
	if (document.hidden) {
	return
	}
	const lastReadId = this.currentChatMessageService.maxId
	this.$store.dispatch('readChat', {
	id: this.currentChat.id,
	lastReadId,
	})
	},
	bottomedOut(offset) {
	return isBottomedOut(offset)
	},
	reachedTop() {
	return window.scrollY <= 0
	},
	cullOlderCheck() {
	window.setTimeout(() => {
	if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
	this.$store.dispatch(
	'cullOlderMessages',
	this.currentChatMessageService.chatId,
	)
	}
	}, 5000)
	},
	handleScroll: throttle(function () {
	this.lastScrollPosition = getScrollPosition()
	if (!this.currentChat) {
	return
	}

	if (this.reachedTop()) {
	this.fetchChat({ maxId: this.currentChatMessageService.minId })
	} else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
	this.jumpToBottomButtonVisible = false
	this.cullOlderCheck()
	if (this.newMessageCount > 0) {
	// Use a delay before marking as read to prevent situation where new messages
	// arrive just as you're leaving the view and messages that you didn't actually
	// get to see get marked as read.
	window.setTimeout(() => {
	// Don't mark as read if the element doesn't exist, user has left chat view
	if (this.$el) this.readChat()
	}, MARK_AS_READ_DELAY)
	}
	} else {
	this.jumpToBottomButtonVisible = true
	}
	}, 200),
	handleScrollUp(positionBeforeLoading) {
	const positionAfterLoading = getScrollPosition()
	window.scrollTo({
	top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
	})
	},
	fetchChat({ isFirstFetch = false, fetchLatest = false, maxId }) {
	const chatMessageService = this.currentChatMessageService
	if (!chatMessageService) {
	return
	}
	if (fetchLatest && this.streamingEnabled) {
	return
	}

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

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

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

	// In vertical screens, the first batch of fetched messages may not always take the
	// full height of the scrollable container.
	// If this is the case, we want to fetch the messages until the scrollable container
	// is fully populated so that the user has the ability to scroll up and load the history.
	if (!isScrollable() && messages.length > 0) {
	this.fetchChat({
	maxId: this.currentChatMessageService.minId,
	})
	}
	})
	})
	})
	},
	async startFetching() {
	let chat = this.findOpenedChatByRecipientId(this.recipientId)
	if (!chat) {
	try {
	const { data } = await getOrCreateChat({
	accountId: this.recipientId,
	credentials: useOAuthStore().token,
	})
	chat = data
	} catch (e) {
	console.error('Error creating or getting a chat', e)
	this.errorLoadingChat = true
	}
	}
	if (chat) {
	this.$nextTick(() => {
	this.scrollDown({ forceRead: true })
	})
	this.$store.dispatch('addOpenedChat', { chat })
	this.doStartFetching()
	}
	},
	doStartFetching() {
	this.$store.dispatch('startFetchingCurrentChat', {
	fetcher: () =>
	promiseInterval(() => this.fetchChat({ fetchLatest: true }), 5000),
	})
	this.fetchChat({ isFirstFetch: true })
	},
	handleAttachmentPosting() {
	this.$nextTick(() => {
	this.handleResize()
	// When the posting form size changes because of a media attachment, we need an extra resize
	// to account for the potential delay in the DOM update.
	this.scrollDown({ forceRead: true })
	})
	},
	sendMessage({ status, media, idempotencyKey }) {
	const params = {
	id: this.currentChat.id,
	content: status,
	idempotencyKey,
	}

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

	const fakeMessage = buildFakeMessage({
	attachments: media,
	chatId: this.currentChat.id,
	content: status,
	userId: this.currentUser.id,
	idempotencyKey,
	})

	this.$store
	.dispatch('addChatMessages', {
	chatId: this.currentChat.id,
	messages: [fakeMessage],
	})
	.then(() => {
	this.handleAttachmentPosting()
	})

	return this.doSendMessage({
	params,
	fakeMessage,
	retriesLeft: MAX_RETRIES,
	})
	},
	doSendMessage({ params, fakeMessage, retriesLeft = MAX_RETRIES }) {
	if (retriesLeft <= 0) return

	sendChatMessage({
	- params,
	+ ...params,
	credentials: useOAuthStore().token,
	})
	.then(({ data }) => {
	this.$store.dispatch('addChatMessages', {
	chatId: this.currentChat.id,
	updateMaxId: false,
	messages: [{ ...data, fakeId: fakeMessage.id }],
	})

	return data
	})
	.catch((error) => {
	console.error('Error sending message', error)
	this.$store.dispatch('handleMessageError', {
	chatId: this.currentChat.id,
	fakeId: fakeMessage.id,
	isRetry: retriesLeft !== MAX_RETRIES,
	})
	if (
	(error.statusCode >= 500 && error.statusCode < 600) \|\|
	error.message === 'Failed to fetch'
	) {
	this.messageRetriers[fakeMessage.id] = setTimeout(
	() => {
	this.doSendMessage({
	params,
	fakeMessage,
	retriesLeft: retriesLeft - 1,
	})
	},
	1000 * 2 ** (MAX_RETRIES - retriesLeft),
	)
	}
	return {}
	})

	return Promise.resolve(fakeMessage)
	},
	goBack() {
	this.$router.push({
	name: 'chats',
	params: { username: this.currentUser.screen_name },
	})
	},
	},
	}

	export default Chat
	diff --git a/src/components/chat_new/chat_new.js b/src/components/chat_new/chat_new.js
	index 0ee4e292b6..ccfe2df509 100644
	--- a/src/components/chat_new/chat_new.js
	+++ b/src/components/chat_new/chat_new.js
	@@ -1,83 +1,85 @@
	import { mapGetters, mapState } from 'vuex'

	import BasicUserCard from 'src/components/basic_user_card/basic_user_card.vue'
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'

	import { useOAuthStore } from 'src/stores/oauth.js'

	+import { chats } from 'src/api/chats.js'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faChevronLeft, faSearch } from '@fortawesome/free-solid-svg-icons'

	library.add(faSearch, faChevronLeft)

	const chatNew = {
	components: {
	BasicUserCard,
	UserAvatar,
	},
	data() {
	return {
	suggestions: [],
	userIds: [],
	loading: false,
	query: '',
	}
	},
	async created() {
	- const { chats } = await chats({
	+ const { chatList } = await chats({
	credentials: useOAuthStore().token,
	})
	- chats.forEach((chat) => this.suggestions.push(chat.account))
	+ chatList.forEach((chat) => this.suggestions.push(chat.account))
	},
	computed: {
	users() {
	return this.userIds.map((userId) => this.findUser(userId))
	},
	availableUsers() {
	if (this.query.length !== 0) {
	return this.users
	} else {
	return this.suggestions
	}
	},
	...mapState({
	currentUser: (state) => state.users.currentUser,
	}),
	...mapGetters(['findUser']),
	},
	methods: {
	goBack() {
	this.$emit('cancel')
	},
	goToChat(user) {
	this.$router.push({ name: 'chat', params: { recipient_id: user.id } })
	},
	onInput() {
	this.search(this.query)
	},
	addUser(user) {
	this.selectedUserIds.push(user.id)
	this.query = ''
	},
	removeUser(userId) {
	this.selectedUserIds = this.selectedUserIds.filter((id) => id !== userId)
	},
	search(query) {
	if (!query) {
	this.loading = false
	return
	}

	this.loading = true
	this.userIds = []
	this.$store
	.dispatch('search', { q: query, resolve: true, type: 'accounts' })
	.then((data) => {
	this.loading = false
	this.userIds = data.accounts.map((a) => a.id)
	})
	},
	},
	}

	export default chatNew
	diff --git a/src/components/conversation-page/conversation-page.vue b/src/components/conversation-page/conversation-page.vue
	index 8cc0a55fea..df5dd4bbd1 100644
	--- a/src/components/conversation-page/conversation-page.vue
	+++ b/src/components/conversation-page/conversation-page.vue
	@@ -1,9 +1,8 @@
	<template>
	- <conversation
	- :collapsable="false"
	- is-page="true"
	+ <Conversation
	:status-id="statusId"
	+ is-page
	/>
	</template>

	<script src="./conversation-page.js"></script>
	diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
	index 54bcbd3734..00605657e2 100644
	--- a/src/components/conversation/conversation.js
	+++ b/src/components/conversation/conversation.js
	@@ -1,635 +1,617 @@
	import { clone, filter, findIndex, get, reduce } from 'lodash'
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

	import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
	import QuickViewSettings from 'src/components/quick_view_settings/quick_view_settings.vue'
	import ThreadTree from 'src/components/thread_tree/thread_tree.vue'

	import { useInterfaceStore } from 'src/stores/interface'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useOAuthStore } from 'src/stores/oauth.js'

	import { fetchConversation, fetchStatus } from 'src/api/public.js'
	import { WSConnectionStatus } from 'src/api/websocket.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faAngleDoubleDown,
	faAngleDoubleLeft,
	faChevronLeft,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faAngleDoubleDown, faAngleDoubleLeft, faChevronLeft)

	const sortById = (a, b) => {
	const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
	const idB = b.type === 'retweet' ? b.retweeted_status.id : b.id
	const seqA = Number(idA)
	const seqB = Number(idB)
	const isSeqA = !Number.isNaN(seqA)
	const isSeqB = !Number.isNaN(seqB)
	if (isSeqA && isSeqB) {
	return seqA < seqB ? -1 : 1
	} else if (isSeqA && !isSeqB) {
	return -1
	} else if (!isSeqA && isSeqB) {
	return 1
	} else {
	return idA < idB ? -1 : 1
	}
	}

	const sortAndFilterConversation = (conversation, statusoid) => {
	if (statusoid.type === 'retweet') {
	conversation = filter(
	conversation,
	(status) =>
	status.type === 'retweet' \|\|
	status.id !== statusoid.retweeted_status.id,
	)
	} else {
	conversation = filter(conversation, (status) => status.type !== 'retweet')
	}
	return conversation.filter((_) => _).sort(sortById)
	}

	const conversation = {
	+ props: {
	+ statusId: {
	+ // Main thing
	+ type: String,
	+ required: true,
	+ },
	+ collapsable: {
	+ // Whether conversation can be collapsed
	+ // i.e. when it's not a page
	+ type: Boolean,
	+ default: false,
	+ },
	+ isPage: {
	+ // Whether conversation is rendered as a standalone page
	+ // as opposed to embedded into a timeline
	+ type: Boolean,
	+ default: false,
	+ },
	+ pinnedStatusIdsObject: {
	+ // Used for user profile, map of pinned statuses
	+ type: Object,
	+ default: null,
	+ },
	+ inProfile: {
	+ // Whether conversation is rendered in a user profile
	+ // used for overriding muted status
	+ type: Boolean,
	+ default: false,
	+ },
	+ profileUserId: {
	+ // used with inProfile, user id of the profile
	+ type: String,
	+ default: null,
	+ },
	+ virtualHidden: {
	+ // Whether conversation is suspended. Controls rendering of statuses
	+ type: Boolean,
	+ default: false,
	+ },
	+ },
	data() {
	return {
	- highlight: null,
	+ focused: null,
	expanded: false,
	threadDisplayStatusObject: {}, // id => 'showing' \| 'hidden'
	- statusContentPropertiesObject: {},
	inlineDivePosition: null,
	loadStatusError: null,
	+ unsuspendibleIds: new Set(),
	}
	},
	- props: [
	- 'statusId',
	- 'collapsable',
	- 'isPage',
	- 'pinnedStatusIdsObject',
	- 'inProfile',
	- 'profileUserId',
	- 'virtualHidden',
	- ],
	created() {
	if (this.isPage) {
	this.fetchConversation()
	}
	},
	computed: {
	maxDepthToShowByDefault() {
	// maxDepthInThread = max number of depths that is visible
	// since our depth starts with 0 and "showing" means "showing children"
	// there is a -2 here
	const maxDepth = this.mergedConfig.maxDepthInThread - 2
	return maxDepth >= 1 ? maxDepth : 1
	},
	streamingEnabled() {
	return (
	this.mergedConfig.useStreamingApi &&
	this.mastoUserSocketStatus === WSConnectionStatus.JOINED
	)
	},
	displayStyle() {
	return this.mergedConfig.conversationDisplay
	},
	isTreeView() {
	return !this.isLinearView
	},
	treeViewIsSimple() {
	return !this.mergedConfig.conversationTreeAdvanced
	},
	isLinearView() {
	return this.displayStyle === 'linear'
	},
	shouldFadeAncestors() {
	return this.mergedConfig.conversationTreeFadeAncestors
	},
	otherRepliesButtonPosition() {
	return this.mergedConfig.conversationOtherRepliesButton
	},
	showOtherRepliesButtonBelowStatus() {
	return this.otherRepliesButtonPosition === 'below'
	},
	showOtherRepliesButtonInsideStatus() {
	return this.otherRepliesButtonPosition === 'inside'
	},
	suspendable() {
	- if (this.isTreeView) {
	- return Object.entries(this.statusContentProperties).every(
	- ([, prop]) => !prop.replying && prop.mediaPlaying.length === 0,
	- )
	- }
	- if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
	- return this.$refs.statusComponent.every((s) => s.suspendable)
	- } else {
	- return true
	- }
	+ return this.unsuspendibleIds.size > 0
	},
	hideStatus() {
	return this.virtualHidden && this.suspendable
	},
	status() {
	return this.$store.state.statuses.allStatusesObject[this.statusId]
	},
	originalStatusId() {
	if (this.status.retweeted_status) {
	return this.status.retweeted_status.id
	} else {
	return this.statusId
	}
	},
	conversationId() {
	return this.getConversationId(this.statusId)
	},
	conversation() {
	if (!this.status) {
	return []
	}

	if (!this.isExpanded) {
	return [this.status]
	}

	const conversation = clone(
	this.$store.state.statuses.conversationsObject[this.conversationId],
	)
	const statusIndex = findIndex(conversation, { id: this.originalStatusId })
	if (statusIndex !== -1) {
	conversation[statusIndex] = this.status
	}

	return sortAndFilterConversation(conversation, this.status)
	},
	statusMap() {
	return this.conversation.reduce((res, s) => {
	res[s.id] = s
	return res
	}, {})
	},
	threadTree() {
	const reverseLookupTable = this.conversation.reduce(
	(table, status, index) => {
	table[status.id] = index
	return table
	},
	{},
	)

	const threads = this.conversation.reduce(
	(a, cur) => {
	const id = cur.id
	a.forest[id] = this.getReplies(id).map((s) => s.id)

	return a
	},
	{
	forest: {},
	},
	)

	const walk = (forest, topLevel, depth = 0, processed = {}) =>
	topLevel
	.map((id) => {
	if (processed[id]) {
	return []
	}

	processed[id] = true
	return [
	{
	status: this.conversation[reverseLookupTable[id]],
	id,
	depth,
	},
	walk(forest, forest[id], depth + 1, processed),
	].reduce((a, b) => a.concat(b), [])
	})
	.reduce((a, b) => a.concat(b), [])

	const linearized = walk(
	threads.forest,
	this.topLevel.map((k) => k.id),
	)

	return linearized
	},
	replyIds() {
	return this.conversation
	.map((k) => k.id)
	.reduce((res, id) => {
	res[id] = (this.replies[id] \|\| []).map((k) => k.id)
	return res
	}, {})
	},
	totalReplyCount() {
	const sizes = {}
	const subTreeSizeFor = (id) => {
	if (sizes[id]) {
	return sizes[id]
	}
	sizes[id] =
	1 +
	this.replyIds[id]
	.map((cid) => subTreeSizeFor(cid))
	.reduce((a, b) => a + b, 0)
	return sizes[id]
	}
	this.conversation.map((k) => k.id).map(subTreeSizeFor)
	return Object.keys(sizes).reduce((res, id) => {
	res[id] = sizes[id] - 1 // exclude itself
	return res
	}, {})
	},
	totalReplyDepth() {
	const depths = {}
	const subTreeDepthFor = (id) => {
	if (depths[id]) {
	return depths[id]
	}
	depths[id] =
	1 +
	this.replyIds[id]
	.map((cid) => subTreeDepthFor(cid))
	.reduce((a, b) => (a > b ? a : b), 0)
	return depths[id]
	}
	this.conversation.map((k) => k.id).map(subTreeDepthFor)
	return Object.keys(depths).reduce((res, id) => {
	res[id] = depths[id] - 1 // exclude itself
	return res
	}, {})
	},
	depths() {
	return this.threadTree.reduce((a, k) => {
	a[k.id] = k.depth
	return a
	}, {})
	},
	topLevel() {
	const topLevel = this.conversation.reduce(
	(tl, cur) =>
	tl.filter(
	(k) =>
	this.getReplies(cur.id)
	.map((v) => v.id)
	.indexOf(k.id) === -1,
	),
	this.conversation,
	)
	return topLevel
	},
	otherTopLevelCount() {
	return this.topLevel.length - 1
	},
	showingTopLevel() {
	if (this.canDive && this.diveRoot) {
	return [this.statusMap[this.diveRoot]]
	}
	return this.topLevel
	},
	diveRoot() {
	const statusId = this.inlineDivePosition \|\| this.statusId
	const isTopLevel = !this.parentOf(statusId)
	return isTopLevel ? null : statusId
	},
	diveDepth() {
	return this.canDive && this.diveRoot ? this.depths[this.diveRoot] : 0
	},
	diveMode() {
	return this.canDive && !!this.diveRoot
	},
	shouldShowAllConversationButton() {
	// The "show all conversation" button tells the user that there exist
	// other toplevel statuses, so do not show it if there is only a single root
	return (
	this.isTreeView &&
	this.isExpanded &&
	this.diveMode &&
	this.topLevel.length > 1
	)
	},
	shouldShowAncestors() {
	return (
	this.isTreeView &&
	this.isExpanded &&
	this.ancestorsOf(this.diveRoot).length
	)
	},
	replies() {
	let i = 1

	return reduce(
	this.conversation,
	(result, { id, in_reply_to_status_id: irid }) => {
	if (irid) {
	result[irid] = result[irid] \|\| []
	result[irid].push({
	name: `#${i}`,
	id,
	})
	}
	i++
	return result
	},
	{},
	)
	},
	isExpanded() {
	return !!(this.expanded \|\| this.isPage)
	},
	hiddenStyle() {
	const height = (this.status && this.status.virtualHeight) \|\| '120px'
	return this.virtualHidden ? { height } : {}
	},
	threadDisplayStatus() {
	return this.conversation.reduce((a, k) => {
	const id = k.id
	const depth = this.depths[id]
	const status = (() => {
	if (this.threadDisplayStatusObject[id]) {
	return this.threadDisplayStatusObject[id]
	}
	if (depth - this.diveDepth <= this.maxDepthToShowByDefault) {
	return 'showing'
	} else {
	return 'hidden'
	}
	})()

	a[id] = status
	return a
	}, {})
	},
	- statusContentProperties() {
	- return this.conversation.reduce((a, k) => {
	- const id = k.id
	- const props = (() => {
	- const def = {
	- showingTall: false,
	- expandingSubject: false,
	- showingLongSubject: false,
	- isReplying: false,
	- mediaPlaying: [],
	- }
	-
	- if (this.statusContentPropertiesObject[id]) {
	- return {
	- ...def,
	- ...this.statusContentPropertiesObject[id],
	- }
	- }
	- return def
	- })()
	-
	- a[id] = props
	- return a
	- }, {})
	- },
	canDive() {
	return this.isTreeView && this.isExpanded
	},
	- maybeHighlight() {
	- return this.isExpanded ? this.highlight : null
	+ maybeFocused() {
	+ return this.isExpanded ? this.focused : null
	},
	...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
	...mapState({
	mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
	}),
	...mapPiniaState(useInterfaceStore, {
	mobileLayout: (store) => store.layoutType === 'mobile',
	}),
	},
	components: {
	ThreadTree,
	QuickFilterSettings,
	QuickViewSettings,
	},
	watch: {
	statusId(newVal, oldVal) {
	const newConversationId = this.getConversationId(newVal)
	const oldConversationId = this.getConversationId(oldVal)
	if (
	newConversationId &&
	oldConversationId &&
	newConversationId === oldConversationId
	) {
	- this.setHighlight(this.originalStatusId)
	+ this.setFocused(this.originalStatusId)
	} else {
	this.fetchConversation()
	}
	},
	expanded(value) {
	if (value) {
	this.fetchConversation()
	} else {
	this.resetDisplayState()
	}
	},
	virtualHidden() {
	this.$store.dispatch('setVirtualHeight', {
	statusId: this.statusId,
	height: `${this.$el.clientHeight}px`,
	})
	},
	},
	methods: {
	fetchConversation() {
	if (this.status) {
	fetchConversation({
	id: this.statusId,
	credentials: useOAuthStore().token,
	}).then(({ data: { ancestors, descendants } }) => {
	this.$store.dispatch('addNewStatuses', { statuses: ancestors })
	this.$store.dispatch('addNewStatuses', { statuses: descendants })
	- this.setHighlight(this.originalStatusId)
	+ this.setFocused(this.originalStatusId)
	})
	} else {
	this.loadStatusError = null
	fetchStatus({
	id: this.statusId,
	credentials: useOAuthStore().token,
	})
	.then(({ data: status }) => {
	this.$store.dispatch('addNewStatuses', { statuses: [status] })
	this.fetchConversation()
	})
	.catch((error) => {
	console.error(error)
	this.loadStatusError = error
	})
	}
	},
	- isFocused(id) {
	- return this.isExpanded && id === this.highlight
	- },
	getReplies(id) {
	return this.replies[id] \|\| []
	},
	- getHighlight() {
	- return this.isExpanded ? this.highlight : null
	- },
	- setHighlight(id) {
	+ setFocused(id) {
	if (!id) return
	- this.highlight = id
	+ this.focused = id

	if (!this.streamingEnabled) {
	this.$store.dispatch('fetchStatus', id)
	}

	this.$store.dispatch('fetchFavsAndRepeats', id)
	this.$store.dispatch('fetchEmojiReactionsBy', id)
	},
	toggleExpanded() {
	this.expanded = !this.expanded
	},
	getConversationId(statusId) {
	const status = this.$store.state.statuses.allStatusesObject[statusId]
	return get(
	status,
	'retweeted_status.statusnet_conversation_id',
	get(status, 'statusnet_conversation_id'),
	)
	},
	setThreadDisplay(id, nextStatus) {
	this.threadDisplayStatusObject = {
	...this.threadDisplayStatusObject,
	[id]: nextStatus,
	}
	},
	toggleThreadDisplay(id) {
	const curStatus = this.threadDisplayStatus[id]
	const nextStatus = curStatus === 'showing' ? 'hidden' : 'showing'
	this.setThreadDisplay(id, nextStatus)
	},
	setThreadDisplayRecursively(id, nextStatus) {
	this.setThreadDisplay(id, nextStatus)
	this.getReplies(id)
	.map((k) => k.id)
	.map((id) => this.setThreadDisplayRecursively(id, nextStatus))
	},
	showThreadRecursively(id) {
	this.setThreadDisplayRecursively(id, 'showing')
	},
	- setStatusContentProperty(id, name, value) {
	- this.statusContentPropertiesObject = {
	- ...this.statusContentPropertiesObject,
	- [id]: {
	- ...this.statusContentPropertiesObject[id],
	- [name]: value,
	- },
	- }
	- },
	- toggleStatusContentProperty(id, name) {
	- this.setStatusContentProperty(
	- id,
	- name,
	- !this.statusContentProperties[id][name],
	- )
	- },
	leastVisibleAncestor(id) {
	let cur = id
	let parent = this.parentOf(cur)
	while (cur) {
	// if the parent is showing it means cur is visible
	if (this.threadDisplayStatus[parent] === 'showing') {
	return cur
	}
	parent = this.parentOf(parent)
	cur = this.parentOf(cur)
	}
	// nothing found, fall back to toplevel
	return this.topLevel[0] ? this.topLevel[0].id : undefined
	},
	diveIntoStatus(id) {
	this.tryScrollTo(id)
	},
	diveToTopLevel() {
	this.tryScrollTo(
	this.topLevelAncestorOrSelfId(this.diveRoot) \|\| this.topLevel[0].id,
	)
	},
	// only used when we are not on a page
	undive() {
	this.inlineDivePosition = null
	- this.setHighlight(this.statusId)
	+ this.setFocused(this.statusId)
	},
	tryScrollTo(id) {
	if (!id) {
	return
	}
	if (this.isPage) {
	// set statusId
	this.$router.push({ name: 'conversation', params: { id } })
	} else {
	this.inlineDivePosition = id
	}
	// Because the conversation can be unmounted when out of sight
	// and mounted again when it comes into sight,
	// the `mounted` or `created` function in `status` should not
	// contain scrolling calls, as we do not want the page to jump
	// when we scroll with an expanded conversation.
	//
	- // Now the method is to rely solely on the `highlight` watcher
	+ // Now the method is to rely solely on the `focused` watcher
	// in `status` components.
	// In linear views, all statuses are rendered at all times, but
	// in tree views, it is possible that a change in active status
	// removes and adds status components (e.g. an originally child
	// status becomes an ancestor status, and thus they will be
	// different).
	// Here, let the components be rendered first, in order to trigger
	- // the `highlight` watcher.
	+ // the `focused` watcher.
	this.$nextTick(() => {
	- this.setHighlight(id)
	+ this.setFocused(id)
	})
	},
	goToCurrent() {
	this.tryScrollTo(this.diveRoot \|\| this.topLevel[0].id)
	},
	statusById(id) {
	return this.statusMap[id]
	},
	parentOf(id) {
	const status = this.statusById(id)
	if (!status) {
	return undefined
	}
	const { in_reply_to_status_id: parentId } = status
	if (!this.statusMap[parentId]) {
	return undefined
	}
	return parentId
	},
	parentOrSelf(id) {
	return this.parentOf(id) \|\| id
	},
	// Ancestors of some status, from top to bottom
	ancestorsOf(id) {
	const ancestors = []
	let cur = this.parentOf(id)
	while (cur) {
	ancestors.unshift(this.statusMap[cur])
	cur = this.parentOf(cur)
	}
	return ancestors
	},
	topLevelAncestorOrSelfId(id) {
	let cur = id
	let parent = this.parentOf(id)
	while (parent) {
	cur = this.parentOf(cur)
	parent = this.parentOf(parent)
	}
	return cur
	},
	resetDisplayState() {
	this.undive()
	this.threadDisplayStatusObject = {}
	},
	+ onStatusSuspendStateChange({ id, suspend }) {
	+ if (!suspend) {
	+ this.unsuspendibleIds.add(id)
	+ } else {
	+ this.unsuspendibleIds.delete(id)
	+ }
	+ },
	},
	}

	export default conversation
	diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
	index 8d47340830..684a5de924 100644
	--- a/src/components/conversation/conversation.vue
	+++ b/src/components/conversation/conversation.vue
	@@ -1,319 +1,306 @@
	<template>
	<div
	v-if="!hideStatus"
	:style="hiddenStyle"
	class="Conversation"
	:class="{ '-expanded' : isExpanded, 'panel' : isExpanded }"
	>
	<div
	v-if="isExpanded"
	class="panel-heading conversation-heading -sticky"
	>
	<h1 class="title">
	{{ $t('timeline.conversation') }}
	</h1>
	<button
	v-if="collapsable"
	class="button-unstyled -link"
	@click.prevent="toggleExpanded"
	>
	{{ $t('timeline.collapse') }}
	</button>
	<QuickFilterSettings
	v-if="!collapsable && mobileLayout"
	:conversation="true"
	class="rightside-button"
	/>
	<QuickViewSettings
	v-if="!collapsable"
	:conversation="true"
	class="rightside-button"
	/>
	</div>
	<div
	v-if="isPage && !status"
	class="conversation-body"
	:class="{ 'panel-body': isExpanded }"
	>
	<p v-if="!loadStatusError">
	<FAIcon
	spin
	icon="circle-notch"
	/>
	{{ $t('status.loading') }}
	</p>
	<p v-else>
	{{ $t('status.load_error', { error: loadStatusError }) }}
	</p>
	</div>
	<div
	v-else
	class="conversation-body"
	:class="{ 'panel-body': isExpanded }"
	>
	<div
	v-if="isTreeView"
	class="thread-body"
	>
	<div
	v-if="shouldShowAllConversationButton"
	class="conversation-dive-to-top-level-box"
	>
	<i18n-t
	keypath="status.show_all_conversation_with_icon"
	tag="button"
	class="button-unstyled -link"
	scope="global"
	@click.prevent="diveToTopLevel"
	>
	<template #icon>
	<FAIcon
	icon="angle-double-left"
	/>
	</template>
	<template #text>
	<span>
	{{ $t('status.show_all_conversation', { numStatus: otherTopLevelCount }, otherTopLevelCount) }}
	</span>
	</template>
	</i18n-t>
	</div>
	<div
	v-if="shouldShowAncestors"
	class="thread-ancestors"
	>
	<article
	v-for="status in ancestorsOf(diveRoot)"
	:key="status.id"
	class="thread-ancestor"
	:class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1, '-faded': shouldFadeAncestors}"
	>
	<Status
	ref="statusComponent"
	class="conversation-status status-fadein panel-body"

	:statusoid="status"
	:replies="getReplies(status.id)"

	:expandable="!isExpanded"
	- :focused="isFocused(status.id)"
	- :highlight="getHighlight()"
	+ :focused="maybeFocused === status.id"
	:inline-expanded="collapsable && isExpanded"
	:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
	:in-profile="inProfile"
	:in-conversation="isExpanded"
	:profile-user-id="profileUserId"
	:simple-tree="treeViewIsSimple"
	:show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
	- :dive="() => diveIntoStatus(status.id)"
	+ can-dive

	- :controlled-showing-tall="statusContentProperties[status.id].showingTall"
	- :controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')"
	- :controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
	- :controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')"
	- :controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
	- :controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')"
	- :controlled-replying="statusContentProperties[status.id].replying"
	- :controlled-toggle-replying="() => toggleStatusContentProperty(status.id, 'replying')"
	- :controlled-media-playing="statusContentProperties[status.id].mediaPlaying"
	- :controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"
	-
	- @goto="setHighlight"
	- @toggle-expanded="toggleExpanded"
	+ @goto="setFocused"
	+ @dive="() => diveIntoStatus(status.id)"
	+ @suspendable-state-change="onStatusSuspendStateChange"
	/>
	<div
	v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
	class="thread-ancestor-dive-box"
	>
	<div
	class="thread-ancestor-dive-box-inner"
	>
	<i18n-t
	tag="button"
	scope="global"
	keypath="status.ancestor_follow_with_icon"
	class="button-unstyled -link thread-tree-show-replies-button"
	@click.prevent="diveIntoStatus(status.id)"
	>
	<template #icon>
	<FAIcon
	icon="angle-double-right"
	/>
	</template>
	<template #text>
	<span>
	{{ $t('status.ancestor_follow', { numReplies: getReplies(status.id, getReplies(status.id).length - 1).length - 1 }) }}
	</span>
	</template>
	</i18n-t>
	</div>
	</div>
	</article>
	</div>
	- <thread-tree
	+ <ThreadTree
	v-for="status in showingTopLevel"
	:key="status.id"
	ref="statusComponent"
	:depth="0"

	:status="status"
	:in-profile="inProfile"
	:conversation="conversation"
	:collapsable="collapsable"
	:is-expanded="isExpanded"
	:pinned-status-ids-object="pinnedStatusIdsObject"
	:profile-user-id="profileUserId"

	- :is-focused-function="isFocused"
	:get-replies="getReplies"
	- :highlight="maybeHighlight"
	- :set-highlight="setHighlight"
	+ :focused="maybeFocused"
	:toggle-expanded="toggleExpanded"

	:simple="treeViewIsSimple"
	- :toggle-thread-display="toggleThreadDisplay"
	:thread-display-status="threadDisplayStatus"
	:show-thread-recursively="showThreadRecursively"
	:total-reply-count="totalReplyCount"
	:total-reply-depth="totalReplyDepth"
	- :status-content-properties="statusContentProperties"
	- :set-status-content-property="setStatusContentProperty"
	- :toggle-status-content-property="toggleStatusContentProperty"
	- :dive="canDive ? diveIntoStatus : undefined"
	+ :can-dive="canDive"
	+
	+ @goto="setFocused"
	+ @dive="diveIntoStatus"
	+ @suspendable-state-change="onStatusSuspendStateChange"
	/>
	</div>
	<div
	v-if="isLinearView"
	class="thread-body"
	>
	<article>
	- <status
	+ <Status
	v-for="status in conversation"
	:key="status.id"
	ref="statusComponent"
	class="conversation-status status-fadein panel-body"
	:statusoid="status"
	:replies="getReplies(status.id)"

	:expandable="!isExpanded"
	- :focused="isFocused(status.id)"
	- :highlight="getHighlight()"
	+ :focused="maybeFocused === status.id \|\| maybeFocused === status.retweeted_status?.id"
	:inline-expanded="collapsable && isExpanded"
	:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
	:in-profile="inProfile"
	:in-conversation="isExpanded"
	:profile-user-id="profileUserId"

	- @goto="setHighlight"
	+ @goto="setFocused"
	@toggle-expanded="toggleExpanded"
	+ @suspendable-state-change="onStatusSuspendStateChange"
	/>
	</article>
	</div>
	</div>
	</div>
	<div
	v-else
	class="Conversation -hidden"
	:style="hiddenStyle"
	/>
	</template>

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

	<style lang="scss">
	.Conversation {
	z-index: 1;

	&.-hidden {
	background: var(--__panel-background);
	backdrop-filter: var(--__panel-backdrop-filter);
	}

	.conversation-dive-to-top-level-box {
	padding: var(--status-margin);
	border-bottom: 1px solid var(--border);
	border-radius: 0;

	/* Make the button stretch along the whole row */
	display: flex;
	align-items: stretch;
	flex-direction: column;
	}

	.thread-ancestors {
	margin-left: var(--status-margin);
	border-left: 2px solid var(--border);
	}

	.thread-ancestor.-faded .RichContent {
	/* stylelint-disable declaration-no-important */
	--text: var(--textFaint) !important;
	--link: var(--linkFaint) !important;
	--funtextGreentext: var(--funtextGreentextFaint) !important;
	--funtextCyantext: var(--funtextCyantextFaint) !important;
	/* stylelint-enable declaration-no-important */
	}

	.thread-ancestor-dive-box {
	padding-left: var(--status-margin);
	border-bottom: 1px solid var(--border);
	border-radius: 0;

	/* Make the button stretch along the whole row */
	&,
	&-inner {
	display: flex;
	align-items: stretch;
	flex-direction: column;
	}
	}

	.thread-ancestor-dive-box-inner {
	padding: var(--status-margin);
	}

	.conversation-status {
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	}

	.thread-ancestor-has-other-replies .conversation-status,
	&:last-child:not(.-expanded) .conversation-status,
	&.-expanded .conversation-status:last-child,
	.thread-ancestor:last-child .conversation-status,
	.thread-ancestor:last-child .thread-ancestor-dive-box,
	&.-expanded .thread-tree .conversation-status {
	border-bottom: none;
	}

	.thread-ancestors + .thread-tree > .conversation-status {
	border-top: 1px solid var(--border);
	}

	/* expanded conversation in timeline */
	&.status-fadein.-expanded .thread-body {
	border-left: 4px solid var(--cRed);
	border-radius: var(--roundness);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom: 1px solid var(--border);
	}

	&.-expanded.status-fadein {
	--___margin: calc(var(--status-margin) / 2);

	background: var(--background);
	margin: var(--___margin);

	&::before {
	z-index: -1;
	content: "";
	display: block;
	position: absolute;
	inset: calc(var(--___margin) * -1);
	background: var(--background);
	backdrop-filter: var(--__panel-backdrop-filter);
	}
	}
	}
	</style>
	diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
	index 529d3ddf1f..fac5790aa1 100644
	--- a/src/components/draft/draft.js
	+++ b/src/components/draft/draft.js
	@@ -1,110 +1,101 @@
	import { cloneDeep } from 'lodash'
	import { defineAsyncComponent } from 'vue'

	import Gallery from 'src/components/gallery/gallery.vue'
	import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	import StatusContent from 'src/components/status_content/status_content.vue'

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

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

	library.add(faPollH)

	const Draft = {
	components: {
	PostStatusForm,
	EditStatusForm: defineAsyncComponent(
	() => import('src/components/edit_status_form/edit_status_form.vue'),
	),
	ConfirmModal: defineAsyncComponent(
	() => import('src/components/confirm_modal/confirm_modal.vue'),
	),
	StatusContent,
	Gallery,
	},
	props: {
	draft: {
	type: Object,
	required: true,
	},
	},
	data() {
	return {
	referenceDraft: cloneDeep(this.draft),
	editing: false,
	showingConfirmDialog: false,
	}
	},
	computed: {
	relAttrs() {
	if (this.draft.type === 'edit') {
	return { statusId: this.draft.refId }
	} else if (this.draft.type === 'reply') {
	return { replyTo: this.draft.refId }
	} else {
	return {}
	}
	},
	safeToSave() {
	return (
	this.draft.status \|\|
	this.draft.files?.length \|\|
	this.draft.hasPoll \|\|
	this.draft.hasQuote
	)
	},
	postStatusFormProps() {
	return {
	draftId: this.draft.id,
	...this.relAttrs,
	}
	},
	refStatus() {
	return this.draft.refId
	? this.$store.state.statuses.allStatusesObject[this.draft.refId]
	: undefined
	},
	localCollapseSubjectDefault() {
	return useMergedConfigStore().mergedConfig.collapseMessageWithSubject
	},
	- nsfwClickthrough() {
	- if (!this.draft.nsfw) {
	- return false
	- }
	- if (this.draft.summary && this.localCollapseSubjectDefault) {
	- return false
	- }
	- return true
	- },
	},
	watch: {
	editing(newVal) {
	if (newVal) return
	if (this.safeToSave) {
	this.$store.dispatch('addOrSaveDraft', { draft: this.draft })
	} else {
	this.$store.dispatch('addOrSaveDraft', { draft: this.referenceDraft })
	}
	},
	},
	methods: {
	toggleEditing() {
	this.editing = !this.editing
	},
	abandon() {
	this.showingConfirmDialog = true
	},
	doAbandon() {
	this.$store.dispatch('abandonDraft', { id: this.draft.id }).then(() => {
	this.hideConfirmDialog()
	})
	},
	hideConfirmDialog() {
	this.showingConfirmDialog = false
	},
	},
	}

	export default Draft
	diff --git a/src/components/edit_status_modal/edit_status_modal.vue b/src/components/edit_status_modal/edit_status_modal.vue
	index 3d192b1eeb..502a937f62 100644
	--- a/src/components/edit_status_modal/edit_status_modal.vue
	+++ b/src/components/edit_status_modal/edit_status_modal.vue
	@@ -1,51 +1,51 @@
	<template>
	<Modal
	v-if="isFormVisible"
	class="edit-form-modal-view"
	@backdrop-clicked="closeModal"
	>
	<div class="edit-form-modal-panel panel">
	<div class="panel-heading">
	<h1 class="title">
	{{ $t('post_status.edit_status') }}
	</h1>
	</div>
	<EditStatusForm
	ref="editStatusForm"
	class="panel-body"
	:params="params"
	@posted="doCloseModal"
	@draft-done="doCloseModal"
	- @can-close="doCloseModal"
	+ @close-accepted="doCloseModal"
	/>
	</div>
	</Modal>
	</template>

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

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

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

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

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

	.emoji-icon {
	justify-content: right;
	}
	}
	}
	</style>
	diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js
	index fe8e9e105c..d5e83ecb2d 100644
	--- a/src/components/emoji_input/suggestor.js
	+++ b/src/components/emoji_input/suggestor.js
	@@ -1,149 +1,149 @@
	/**
	* suggest - generates a suggestor function to be used by emoji-input
	* data: object providing source information for specific types of suggestions:
	* data.emoji - optional, an array of all emoji available i.e.
	* (useEmojiStore().standardEmojiList + state.instance.customEmoji)
	* data.users - optional, an array of all known users
	* updateUsersList - optional, a function to search and append to users
	*
	* Depending on data present one or both (or none) can be present, so if field
	* doesn't support user linking you can just provide only emoji.
	*/

	export default (data) => {
	const emojiCurry = suggestEmoji(data.emoji)
	const usersCurry = data.store && suggestUsers(data.store)
	return (input, nameKeywordLocalizer) => {
	const firstChar = input[0]
	if (firstChar === ':' && data.emoji) {
	return emojiCurry(input, nameKeywordLocalizer)
	}
	if (firstChar === '@' && usersCurry) {
	return usersCurry(input)
	}
	return []
	}
	}

	export const suggestEmoji = (emojis) => (input, nameKeywordLocalizer) => {
	- const noPrefix = input.toLowerCase().substr(1)
	+ const noPrefix = input.toLowerCase().substring(1)
	return emojis
	.map((emoji) => ({ ...emoji, ...nameKeywordLocalizer(emoji) }))
	.filter(
	(emoji) =>
	emoji.names
	.concat(emoji.keywords)
	- .filter((kw) => kw.toLowerCase().match(noPrefix)).length,
	+ .filter((kw) => kw.toLowerCase().includes(noPrefix)).length,
	)
	.map((k) => {
	let score = 0

	// An exact match always wins
	score += Math.max(
	...k.names.map((name) => (name.toLowerCase() === noPrefix ? 200 : 0)),
	0,
	)

	// Prioritize custom emoji a lot
	score += k.imageUrl ? 100 : 0

	// Prioritize prefix matches somewhat
	score += Math.max(
	...k.names.map((kw) =>
	kw.toLowerCase().startsWith(noPrefix) ? 10 : 0,
	),
	0,
	)

	// Sort by length
	score -= k.displayText.length

	k.score = score
	return k
	})
	.sort((a, b) => {
	// Break ties alphabetically
	const alphabetically = a.displayText > b.displayText ? 0.5 : -0.5

	return b.score - a.score + alphabetically
	})
	}

	export const suggestUsers = ({ dispatch, state }) => {
	// Keep some persistent values in closure, most importantly for the
	// custom debounce to work. Lodash debounce does not return a promise.
	let suggestions = []
	let previousQuery = ''
	let timeout = null
	let cancelUserSearch = null

	const userSearch = (query) => dispatch('searchUsers', { query })
	const debounceUserSearch = (query) => {
	cancelUserSearch && cancelUserSearch()
	return new Promise((resolve, reject) => {
	timeout = setTimeout(() => {
	userSearch(query).then(resolve).catch(reject)
	}, 300)
	cancelUserSearch = () => {
	clearTimeout(timeout)
	resolve([])
	}
	})
	}

	return async (input) => {
	const noPrefix = input.toLowerCase().substr(1)
	if (previousQuery === noPrefix) return suggestions

	suggestions = []
	previousQuery = noPrefix
	// Fetch more and wait, don't fetch if there's the 2nd @ because
	// the backend user search can't deal with it.
	// Reference semantics make it so that we get the updated data after
	// the await.
	if (!noPrefix.includes('@')) {
	await debounceUserSearch(noPrefix)
	}

	const newSuggestions = state.users.users
	.filter(
	(user) =>
	user.screen_name &&
	user.name &&
	(user.screen_name.toLowerCase().startsWith(noPrefix) \|\|
	user.name.toLowerCase().startsWith(noPrefix)),
	)
	.slice(0, 20)
	.sort((a, b) => {
	let aScore = 0
	let bScore = 0

	// Matches on screen name (i.e. user@instance) makes a priority
	aScore += a.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
	bScore += b.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0

	// Matches on name takes second priority
	aScore += a.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
	bScore += b.name.toLowerCase().startsWith(noPrefix) ? 1 : 0

	const diff = (bScore - aScore) * 10

	// Then sort alphabetically
	const activity = a.last_status_at < b.last_status_at ? 100 : -100
	const nameAlphabetically = a.name > b.name ? 1 : -1
	const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1

	return diff + nameAlphabetically + screenNameAlphabetically + activity
	})
	.map((user) => ({
	user,
	displayText: user.screen_name_ui,
	detailText: user.name,
	imageUrl: user.profile_image_url_original,
	replacement: '@' + user.screen_name + ' ',
	}))

	suggestions = newSuggestions \|\| []
	return suggestions
	}
	}
	diff --git a/src/components/error_modal/error_modal.js b/src/components/error_modal/error_modal.js
	new file mode 100644
	index 0000000000..560de3a536
	--- /dev/null
	+++ b/src/components/error_modal/error_modal.js
	@@ -0,0 +1,36 @@
	+import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
	+
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import { faCircleXmark } from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(faCircleXmark)
	+
	+/**
	+ * This component emits the following events:
	+ * cancelled, emitted when the action should not be performed;
	+ * accepted, emitted when the action should be performed;
	+ *
	+ * The caller should close this dialog after receiving any of the two events.
	+ */
	+const ErrorModal = {
	+ components: {
	+ DialogModal,
	+ },
	+ props: {
	+ title: {
	+ type: String,
	+ },
	+ clearText: {
	+ type: String,
	+ },
	+ recoverText: {
	+ type: String,
	+ },
	+ error: {
	+ type: Error,
	+ },
	+ },
	+ emits: ['clear', 'recover'],
	+}
	+
	+export default ErrorModal
	diff --git a/src/components/error_modal/error_modal.vue b/src/components/error_modal/error_modal.vue
	new file mode 100644
	index 0000000000..ef2654b2e3
	--- /dev/null
	+++ b/src/components/error_modal/error_modal.vue
	@@ -0,0 +1,103 @@
	+<template>
	+ <DialogModal
	+ v-body-scroll-lock="true"
	+ class="error-modal"
	+ @cancel="onCancel"
	+ >
	+ <template #header>
	+ <span v-text="title ?? $t('general.generic_error')" />
	+ </template>
	+
	+ <div class="content">
	+ <FAIcon
	+ class="error-icon"
	+ icon="circle-xmark"
	+ size="3x"
	+ fixed-width
	+ />
	+ <div class="text">
	+ <slot>
	+ <p>
	+ <strong><code v-text="error.name" /></strong>
	+ {{ ' - ' }}
	+ <span v-text="error.message" />
	+ </p>
	+
	+ <details open>
	+ <summary>{{ $t('general.generic_error_details') }}</summary>
	+ <code
	+ class="stack pre"
	+ v-text="error.stack"
	+ />
	+ </details>
	+ </slot>
	+ </div>
	+ </div>
	+ <div class="below">
	+ <slot name="below" />
	+ </div>
	+ <template #footer>
	+ <slot name="footerLeft" />
	+
	+ <button
	+ v-if="recoverText"
	+ class="btn button-default"
	+ @click.prevent="$emit('recover')"
	+ v-text="recoverText"
	+ />
	+
	+ <button
	+ class="btn button-default"
	+ @click.prevent="$emit('clear')"
	+ v-text="clearText ?? $t('general.close')"
	+ />
	+ </template>
	+ </DialogModal>
	+</template>
	+
	+<script src="./error_modal.js"></script>
	+<style lang="scss">
	+.error-modal {
	+ .error-icon {
	+ margin-left: 0.75rem;
	+ margin-top: 0.5rem;
	+ margin-bottom: 0.5rem;
	+ }
	+
	+ .content {
	+ display: flex;
	+ align-items: center;
	+ text-align: left;
	+ justify-content: center;
	+ line-height: 1.5;
	+
	+ p {
	+ margin-top: 0.75em;
	+ margin-bottom: 0.75em;
	+
	+ &:first-child {
	+ margin-top: 0;
	+ }
	+
	+ &:last-child {
	+ margin-bottom: 0;
	+ }
	+ }
	+ }
	+
	+ .stack {
	+ margin: 0;
	+ overflow-x: auto;
	+ }
	+
	+ .below:not(:empty) {
	+ margin-top: 1em;
	+ }
	+
	+ .text {
	+ max-width: 50ch;
	+ margin-left: 0.5em;
	+ margin-right: 3.5em;
	+ }
	+}
	+</style>
	diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
	index 252a32bf69..c244a8cb30 100644
	--- a/src/components/gallery/gallery.js
	+++ b/src/components/gallery/gallery.js
	@@ -1,151 +1,172 @@
	import { set, sumBy } from 'lodash'

	import Attachment from 'src/components/attachment/attachment.vue'

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

	const displayTypes = new Set(['image', 'video', 'flash'])

	const Gallery = {
	props: [
	'attachments',
	'compact',
	'limitRows',
	'descriptions',
	'limit',
	'nsfw',
	'setMedia',
	'size',
	'editable',
	'removeAttachment',
	'shiftUpAttachment',
	'shiftDnAttachment',
	'editAttachment',
	'grid',
	],
	data() {
	return {
	sizes: {},
	hidingLong: true,
	+ playingMedia: new Set(),
	}
	},
	+ emits: ['play', 'pause'],
	components: { Attachment },
	computed: {
	rows() {
	if (!this.attachments) {
	return []
	}
	const attachments =
	this.limit > 0
	? this.attachments.slice(0, this.limit)
	: this.attachments
	if (this.size === 'hide') {
	return attachments.map((item) => ({ minimal: true, items: [item] }))
	}
	const rows = this.grid
	? [{ grid: true, items: attachments }]
	: attachments
	.reduce(
	(acc, attachment, i) => {
	const peek = attachments[i + 1]
	const nextEnd = peek == null
	const nextWide = !nextEnd && !displayTypes.has(peek?.type)

	// Inserting new row
	if (attachment.type === 'audio') {
	return [
	...acc,
	{ audio: true, items: [attachment] },
	{ items: [] },
	]
	}
	if (!displayTypes.has(attachment.type)) {
	return [
	...acc,
	{ minimal: true, items: [attachment] },
	{ items: [] },
	]
	}

	const maxPerRow = 3
	const currentRow = acc[acc.length - 1]
	const previousRow = acc[acc.length - 2]

	if (currentRow.items.length >= maxPerRow) {
	if (nextWide \|\| nextEnd) {
	if (previousRow?.items.length > 1) {
	currentRow.items.push(attachment)
	return [...acc, { items: [] }]
	} else {
	const last = currentRow.items.splice(-1)[0]
	return [...acc, { items: [last, attachment] }]
	}
	} else {
	return [...acc, { items: [attachment] }]
	}
	} else {
	currentRow.items.push(attachment)
	}
	return acc
	},
	[{ items: [] }],
	)
	.filter((_) => _.items.length > 0)
	return rows
	},
	attachmentsDimensionalScore() {
	return this.rows.reduce((acc, row) => {
	let size = 0
	if (row.minimal) {
	size += 1 / 8
	} else if (row.audio) {
	size += 1 / 4
	} else {
	size += 1 / (row.items.length + 0.6)
	}
	return acc + size
	}, 0)
	},
	tooManyAttachments() {
	if (this.editable \|\| this.size === 'small') {
	return false
	} else if (this.size === 'hide') {
	return this.attachments.length > 8
	} else {
	return this.attachmentsDimensionalScore > 1
	}
	},
	+ hasPlayingMedia() {
	+ return this.playingMedia.size > 0
	+ },
	},
	methods: {
	onNaturalSizeLoad({ id, width, height }) {
	set(this.sizes, id, { width, height })
	},
	+ onMediaStateChange(playing, id) {
	+ if (playing) {
	+ this.playingMedia.add(id)
	+ } else {
	+ this.playingMedia.delete(id)
	+ }
	+ },
	rowStyle(row) {
	if (row.audio) {
	return { 'padding-bottom': '25%' } // fixed reduced height for audio
	} else if (!row.minimal && !row.grid) {
	return { 'padding-bottom': `${100 / (row.items.length + 0.6)}%` }
	}
	},
	itemStyle(id, row) {
	const total = sumBy(row, (item) => this.getAspectRatio(item.id))
	return { flex: `${this.getAspectRatio(id) / total} 1 0%` }
	},
	getAspectRatio(id) {
	const size = this.sizes[id]
	return size ? size.width / size.height : 1
	},
	toggleHidingLong(event) {
	this.hidingLong = event
	},
	openGallery() {
	useMediaViewerStore().setMedia(this.attachments)
	useMediaViewerStore().setCurrentMedia(this.attachments[0])
	},
	onMedia() {
	useMediaViewerStore().setMedia(this.attachments)
	},
	},
	+ watch: {
	+ hasPlayingMedia(newValue) {
	+ if (newValue) {
	+ this.$emit('play')
	+ } else {
	+ this.$emit('pause')
	+ }
	+ },
	+ },
	}

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

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

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

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

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

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

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

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

	.gallery-item {
	margin: 0;
	height: 20em;
	}
	}
	}

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

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

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

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

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

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

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

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

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

	button {
	padding: 0 2em;
	}
	}
	}
	</style>
	diff --git a/src/components/global_error/global_error.js b/src/components/global_error/global_error.js
	new file mode 100644
	index 0000000000..b4768b8ad8
	--- /dev/null
	+++ b/src/components/global_error/global_error.js
	@@ -0,0 +1,57 @@
	+import { mapActions, mapState } from 'pinia'
	+import { defineAsyncComponent } from 'vue'
	+
	+import { useInterfaceStore } from 'src/stores/interface.js'
	+
	+const GlobalError = {
	+ components: {
	+ ErrorModal: defineAsyncComponent(
	+ () => import('src/components/error_modal/error_modal.vue'),
	+ ),
	+ },
	+ computed: {
	+ title() {
	+ if (this.globalError == null) return null
	+ return this.globalError.title && this.$t(this.globalError.title)
	+ },
	+ content() {
	+ if (this.globalError == null) return null
	+ if (this.globalError.content) {
	+ return this.$t(this.globalError.content, [this.globalError.error])
	+ } else {
	+ return null
	+ }
	+ },
	+ details() {
	+ if (this.globalError == null) return null
	+ if (this.globalError.error != null) {
	+ return (
	+ this.globalError.error.toString() +
	+ '\n\n' +
	+ this.globalError.error.stack
	+ )
	+ } else {
	+ return this.globalError.details
	+ }
	+ },
	+ recoverText() {
	+ if (this.globalError == null) return null
	+ if (this.globalError.recoverText == null) return null
	+ return this.$t(this.globalError.recoverText)
	+ },
	+ ...mapState(useInterfaceStore, ['globalError']),
	+ },
	+ methods: {
	+ clear() {
	+ this.globalError.clear?.()
	+ this.clearGlobalError()
	+ },
	+ recover() {
	+ this.globalError.recover?.()
	+ this.clearGlobalError()
	+ },
	+ ...mapActions(useInterfaceStore, ['clearGlobalError']),
	+ },
	+}
	+
	+export default GlobalError
	diff --git a/src/components/global_error/global_error.vue b/src/components/global_error/global_error.vue
	new file mode 100644
	index 0000000000..2b6e836559
	--- /dev/null
	+++ b/src/components/global_error/global_error.vue
	@@ -0,0 +1,26 @@
	+<template>
	+ <teleport to="#modal">
	+ <ErrorModal
	+ v-if="globalError"
	+ :error="globalError.error"
	+ :title="title"
	+ :recover-text="recoverText"
	+ @recover="recover"
	+ @clear="clear"
	+ >
	+ <template v-if="content">
	+ <p>{{ content }}</p>
	+
	+ <details v-if="details">
	+ <summary>{{ $t('general.generic_error_details') }}</summary>
	+ <code
	+ class="stack pre"
	+ v-text="details"
	+ />
	+ </details>
	+ </template>
	+ </ErrorModal>
	+ </teleport>
	+</template>
	+
	+<script src="./global_error.js"></script>
	diff --git a/src/components/lists_edit/lists_edit.vue b/src/components/lists_edit/lists_edit.vue
	index 713a406738..25b818deb4 100644
	--- a/src/components/lists_edit/lists_edit.vue
	+++ b/src/components/lists_edit/lists_edit.vue
	@@ -1,229 +1,229 @@
	<template>
	<div class="panel-default panel ListEdit">
	<div
	ref="header"
	class="panel-heading list-edit-heading"
	>
	<button
	class="button-unstyled go-back-button"
	@click="$router.back"
	>
	<FAIcon
	size="lg"
	icon="chevron-left"
	/>
	</button>
	<div class="title">
	<i18n-t
	v-if="id"
	keypath="lists.editing_list"
	scope="global"
	>
	<template #listTitle>
	{{ title }}
	</template>
	</i18n-t>
	<i18n-t
	v-else
	keypath="lists.creating_list"
	scope="global"
	/>
	</div>
	</div>
	<div class="panel-body">
	<div class="input-wrap">
	<label for="list-edit-title">{{ $t('lists.title') }}</label>
	{{ ' ' }}
	<input
	id="list-edit-title"
	ref="title"
	v-model="titleDraft"
	class="input"
	>
	<button
	v-if="id"
	class="btn button-default follow-button"
	@click="updateListTitle"
	>
	{{ $t('lists.update_title') }}
	</button>
	</div>
	<tab-switcher
	class="list-member-management"
	- :scrollable-tabs
	+ scrollable-tabs
	>
	<div
	v-if="id \|\| addedUserIds.size > 0"
	:label="$t('lists.manage_members')"
	class="members-list"
	>
	<div class="users-list">
	<div
	v-for="user in membersUsers"
	:key="user.id"
	class="member"
	>
	<BasicUserCard
	:user="user"
	>
	<button
	class="btn button-default follow-button"
	@click="toggleRemoveMember(user)"
	>
	{{ isRemoved(user) ? $t('general.undo') : $t('lists.remove_from_list') }}
	</button>
	</BasicUserCard>
	</div>
	</div>
	</div>

	<div
	class="search-list"
	:label="$t('lists.add_members')"
	>
	<ListsUserSearch
	@results="onSearchResults"
	@loading="onSearchLoading"
	@loading-done="onSearchLoadingDone"
	/>
	<div
	v-if="searchLoading"
	class="loading"
	>
	<PanelLoading />
	</div>
	<div
	v-else
	class="users-list"
	>
	<div
	v-for="user in searchUsers"
	:key="user.id"
	class="member"
	>
	<BasicUserCard
	:user="user"
	>
	<span
	v-if="membersUserIds.includes(user.id)"
	>
	{{ $t('lists.is_in_list') }}
	</span>
	<button
	v-if="!membersUserIds.includes(user.id)"
	class="btn button-default follow-button"
	@click="toggleAddFromSearch(user)"
	>
	{{ isAdded(user) ? $t('general.undo') : $t('lists.add_to_list') }}
	</button>
	<button
	v-else
	class="btn button-default follow-button"
	@click="toggleRemoveMember(user)"
	>
	{{ isRemoved(user) ? $t('general.undo') : $t('lists.remove_from_list') }}
	</button>
	</BasicUserCard>
	</div>
	</div>
	</div>
	</tab-switcher>
	</div>
	<div class="panel-footer">
	<span class="spacer" />
	<button
	v-if="!id"
	class="btn button-default footer-button"
	@click="createList"
	>
	{{ $t('lists.create') }}
	</button>
	<button
	v-else-if="!reallyDelete"
	class="btn button-default footer-button"
	@click="reallyDelete = true"
	>
	{{ $t('lists.delete') }}
	</button>
	<template v-else>
	{{ $t('lists.really_delete') }}
	<button
	class="btn button-default footer-button"
	@click="deleteList"
	>
	{{ $t('general.yes') }}
	</button>
	<button
	class="btn button-default footer-button"
	@click="reallyDelete = false"
	>
	{{ $t('general.no') }}
	</button>
	</template>
	</div>
	</div>
	</template>

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

	<style lang="scss">
	.ListEdit {
	--panel-body-padding: 0.5em;

	height: calc(100vh - var(--navbar-height));
	overflow: hidden;
	display: flex;
	flex-direction: column;

	.list-edit-heading {
	grid-template-columns: auto minmax(50%, 1fr);
	}

	.panel-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	}

	.list-member-management {
	flex: 1 0 auto;
	}

	.search-icon {
	margin-right: 0.3em;
	}

	.users-list {
	padding-bottom: 0.7rem;
	overflow-y: auto;
	}

	& .search-list,
	& .members-list {
	overflow: hidden;
	flex-direction: column;
	min-height: 0;
	}

	.go-back-button {
	text-align: center;
	line-height: 1;
	height: 100%;
	align-self: start;
	width: var(--__panel-heading-height-inner);
	}

	.btn {
	margin: 0 0.5em;
	}

	.panel-footer {
	grid-template-columns: minmax(10%, 1fr);

	.footer-button {
	min-width: 9em;
	}
	}
	}
	</style>
	diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
	index 41cc4f457a..b47376d53d 100644
	--- a/src/components/mobile_nav/mobile_nav.js
	+++ b/src/components/mobile_nav/mobile_nav.js
	@@ -1,169 +1,166 @@
	import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'
	import { mapGetters } from 'vuex'

	import NavigationPins from 'src/components/navigation/navigation_pins.vue'
	import GestureService from '../../services/gesture_service/gesture_service'
	import {
	countExtraNotifications,
	unseenNotificationsFromStore,
	} from '../../services/notification_utils/notification_utils'

	import { useAnnouncementsStore } from 'src/stores/announcements.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faArrowUp,
	faBars,
	faBell,
	faCheckDouble,
	faMinus,
	faTimes,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faTimes, faBell, faBars, faArrowUp, faMinus, faCheckDouble)

	const MobileNav = {
	components: {
	SideDrawer: defineAsyncComponent(
	() => import('src/components/side_drawer/side_drawer.vue'),
	),
	Notifications: defineAsyncComponent(
	() => import('src/components/notifications/notifications.vue'),
	),
	NavigationPins,
	ConfirmModal: defineAsyncComponent(
	() => import('src/components/confirm_modal/confirm_modal.vue'),
	),
	},
	data: () => ({
	notificationsCloseGesture: undefined,
	notificationsOpen: false,
	notificationsAtTop: true,
	showingConfirmLogout: false,
	}),
	created() {
	this.notificationsCloseGesture = GestureService.swipeGesture(
	GestureService.DIRECTION_RIGHT,
	() => this.closeMobileNotifications(true),
	50,
	)
	},
	computed: {
	currentUser() {
	return this.$store.state.users.currentUser
	},
	unseenNotifications() {
	return unseenNotificationsFromStore(
	this.$store,
	useMergedConfigStore().mergedConfig.notificationVisibility,
	useMergedConfigStore().mergedConfig.ignoreInactionableSeen,
	)
	},
	unseenNotificationsCount() {
	return (
	this.unseenNotifications.length +
	countExtraNotifications(
	this.$store,
	useMergedConfigStore().mergedConfig,
	useAnnouncementsStore().unreadAnnouncementCount,
	)
	)
	},
	unseenCount() {
	return this.unseenNotifications.length
	},
	unseenCountBadgeText() {
	return `${this.unseenCount ? this.unseenCount : ''}`
	},
	hideSitename() {
	return useInstanceStore().hideSitename
	},
	sitename() {
	return useInstanceStore().name
	},
	isChat() {
	return this.$route.name === 'chat'
	},
	...mapState(useAnnouncementsStore, ['unreadAnnouncementCount']),
	...mapState(useMergedConfigStore, {
	pinnedItems: (store) =>
	new Set(store.prefsStorage.collections.pinnedNavItems).has('chats'),
	}),
	shouldConfirmLogout() {
	return useMergedConfigStore().mergedConfig.modalOnLogout
	},
	closingDrawerMarksAsSeen() {
	return useMergedConfigStore().mergedConfig.closingDrawerMarksAsSeen
	},
	...mapGetters(['unreadChatCount']),
	},
	methods: {
	toggleMobileSidebar() {
	this.$refs.sideDrawer.toggleDrawer()
	},
	openMobileNotifications() {
	this.notificationsOpen = true
	},
	closeMobileNotifications(markRead) {
	if (this.notificationsOpen) {
	// make sure to mark notifs seen only when the notifs were open and not
	// from close-calls.
	this.notificationsOpen = false
	if (markRead && this.closingDrawerMarksAsSeen) {
	this.markNotificationsAsSeen()
	}
	}
	},
	notificationsTouchStart(e) {
	GestureService.beginSwipe(e, this.notificationsCloseGesture)
	},
	notificationsTouchMove(e) {
	GestureService.updateSwipe(e, this.notificationsCloseGesture)
	},
	scrollToTop() {
	window.scrollTo(0, 0)
	},
	scrollMobileNotificationsToTop() {
	this.$refs.mobileNotifications.scrollTo(0, 0)
	},
	showConfirmLogout() {
	this.showingConfirmLogout = true
	},
	hideConfirmLogout() {
	this.showingConfirmLogout = false
	},
	logout() {
	if (!this.shouldConfirmLogout) {
	this.doLogout()
	} else {
	this.showConfirmLogout()
	}
	},
	doLogout() {
	this.$router.replace('/main/public')
	this.$store.dispatch('logout')
	this.hideConfirmLogout()
	},
	markNotificationsAsSeen() {
	this.$store.dispatch('markNotificationsAsSeen')
	},
	onScroll({ target: { scrollTop, clientHeight, scrollHeight } }) {
	this.notificationsAtTop = scrollTop > 0
	- if (scrollTop + clientHeight >= scrollHeight) {
	- this.$refs.notifications.fetchOlderNotifications()
	- }
	},
	},
	watch: {
	$route() {
	// handles closing notificaitons when you press any router-link on the
	// notifications.
	this.closeMobileNotifications()
	},
	},
	}

	export default MobileNav
	diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
	index 09009782aa..743b7deb0b 100644
	--- a/src/components/mobile_nav/mobile_nav.vue
	+++ b/src/components/mobile_nav/mobile_nav.vue
	@@ -1,259 +1,260 @@
	<template>
	<div
	class="MobileNav"
	>
	<nav
	id="nav"
	class="mobile-nav"
	@click="scrollToTop()"
	>
	<div class="item">
	<button
	class="button-unstyled mobile-nav-button"
	:title="$t('nav.mobile_sidebar')"
	:aria-expanaded="$refs.sideDrawer && !$refs.sideDrawer.closed"
	@click.stop.prevent="toggleMobileSidebar()"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="bars"
	/>
	<div
	v-if="(unreadChatCount && !chatsPinned) \|\| unreadAnnouncementCount"
	class="badge -dot -notification"
	/>
	</button>
	<NavigationPins class="pins" />
	</div> <div class="item right">
	<button
	v-if="currentUser"
	class="button-unstyled mobile-nav-button"
	:title="unseenNotificationsCount ? $t('nav.mobile_notifications_unread_active') : $t('nav.mobile_notifications')"
	@click.stop.prevent="openMobileNotifications()"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="bell"
	/>
	<div
	v-if="unseenNotificationsCount"
	class="badge -dot -notification"
	/>
	</button>
	</div>
	</nav>
	<aside
	v-if="currentUser"
	class="mobile-notifications-drawer mobile-drawer"
	:class="{ '-closed': !notificationsOpen }"
	@touchstart.stop="notificationsTouchStart"
	@touchmove.stop="notificationsTouchMove"
	>
	<div class="panel-heading mobile-notifications-header">
	<h1 class="title">
	{{ $t('notifications.notifications') }}
	<span
	v-if="unseenCountBadgeText"
	class="badge -notification unseen-count"
	>{{ unseenCountBadgeText }}</span>
	</h1>
	<span class="spacer" />
	<button
	v-if="notificationsAtTop"
	class="button-unstyled mobile-nav-button"
	:title="$t('general.scroll_to_top')"
	@click.stop.prevent="scrollMobileNotificationsToTop"
	>
	<FALayers class="fa-scale-110 fa-old-padding-layer">
	<FAIcon icon="arrow-up" />
	<FAIcon
	icon="minus"
	transform="up-7"
	/>
	</FALayers>
	</button>
	<button
	v-if="!closingDrawerMarksAsSeen"
	class="button-unstyled mobile-nav-button"
	:title="$t('nav.mobile_notifications_mark_as_seen')"
	@click.stop.prevent="markNotificationsAsSeen()"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="check-double"
	/>
	</button>
	<button
	class="button-unstyled mobile-nav-button"
	:title="$t('nav.mobile_notifications_close')"
	@click.stop.prevent="closeMobileNotifications(true)"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="times"
	/>
	</button>
	</div>
	+ <!-- Notifications teleport target -->
	<div
	id="mobile-notifications"
	ref="mobileNotifications"
	class="mobile-notifications"
	@scroll="onScroll"
	/>
	</aside>
	<SideDrawer
	ref="sideDrawer"
	:logout="logout"
	/>
	<teleport to="#modal">
	<ConfirmModal
	v-if="showingConfirmLogout"
	:title="$t('login.logout_confirm_title')"
	:confirm-danger="true"
	:confirm-text="$t('login.logout_confirm_accept_button')"
	:cancel-text="$t('login.logout_confirm_cancel_button')"
	@accepted="doLogout"
	@cancelled="hideConfirmLogout"
	>
	{{ $t('login.logout_confirm') }}
	</ConfirmModal>
	</teleport>
	</div>
	</template>

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

	<style lang="scss">
	.MobileNav {
	z-index: var(--ZI_navbar);

	.mobile-nav {
	display: grid;
	line-height: var(--navbar-height);
	grid-template-rows: var(--navbar-height);
	grid-template-columns: 2fr auto;
	width: 100%;
	box-sizing: border-box;

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

	.mobile-inner-nav {
	width: 100%;
	display: flex;
	align-items: center;
	}

	.mobile-nav-button {
	display: inline-block;
	text-align: center;
	padding: 0 1em;
	position: relative;
	cursor: pointer;
	}

	.site-name {
	padding: 0 0.3em;
	display: inline-block;
	}

	.item {
	/* moslty just to get rid of extra whitespaces */
	display: flex;
	}

	.mobile-notifications-drawer {
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
	position: fixed;
	top: 0;
	left: 0;
	box-shadow: var(--shadow);
	transition-property: transform;
	transition-duration: 0.25s;
	transform: translateX(0);
	z-index: var(--ZI_navbar);
	-webkit-overflow-scrolling: touch;
	background: var(--background);

	&.-closed {
	transform: translateX(100%);
	box-shadow: none;
	}
	}

	.mobile-notifications-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: calc(var(--ZI_navbar) + 100);
	width: 100%;
	height: 3.5em;
	line-height: 3.5em;
	position: absolute;
	box-shadow: var(--shadow);

	.spacer {
	flex: 1;
	}

	.title {
	font-size: 1.3em;
	margin-left: 0.6em;
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
	}
	}

	.pins {
	flex: 1;

	.pinned-item {
	flex-grow: 1;
	}
	}

	.mobile-notifications {
	margin-top: 3.5em;
	width: 100vw;
	height: calc(100vh - var(--navbar-height));
	overflow: hidden scroll;

	.notifications {
	padding: 0;
	border-radius: 0;
	box-shadow: none;

	.panel {
	border-radius: 0;
	margin: 0;
	box-shadow: none;
	}

	.panel::after {
	border-radius: 0;
	}

	.panel .panel-heading {
	border-radius: 0;
	box-shadow: none;
	}
	}
	}

	.confirm-modal.dark-overlay {
	&::before {
	z-index: 3000;
	}

	.dialog-modal.panel {
	z-index: 3001;
	}
	}
	}

	</style>
	diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
	index 934d3e58da..3e2fa54a52 100644
	--- a/src/components/notification/notification.scss
	+++ b/src/components/notification/notification.scss
	@@ -1,98 +1,93 @@
	// TODO Copypaste from Status, should unify it somehow

	.Notification {
	border-bottom: 1px solid;
	border-color: var(--border);
	overflow-wrap: break-word;
	text-wrap: pretty;

	.status-content {
	cursor: pointer;
	}

	- &.Status {
	- /* stylelint-disable-next-line declaration-no-important */
	- background-color: transparent !important;
	- }
	-
	--emoji-size: 1em;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	<script src="./notification.js"></script>
	<style src="./notification.scss" lang="scss"></style>
	diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
	index 387c3a8475..66819317b6 100644
	--- a/src/components/notifications/notifications.vue
	+++ b/src/components/notifications/notifications.vue
	@@ -1,112 +1,111 @@
	<template>
	<teleport
	:disabled="minimalMode \|\| disableTeleport"
	:to="teleportTarget"
	>
	<component
	:is="noHeading ? 'div' : 'aside'"
	ref="root"
	:class="{ minimal: minimalMode }"
	class="Notifications"
	>
	<div :class="mainClass">
	<div
	v-if="!noHeading"
	class="notifications-heading panel-heading -sticky"
	>
	<h1 class="title">
	{{ $t('notifications.notifications') }}
	<span
	v-if="unseenCountBadgeText"
	class="badge -notification unseen-count"
	>{{ unseenCountBadgeText }}</span>
	</h1>
	<div
	v-if="showScrollTop"
	class="rightside-button"
	>
	<button
	class="button-unstyled scroll-to-top-button"
	type="button"
	:title="$t('general.scroll_to_top')"
	@click="scrollToTop"
	>
	<FALayers class="fa-scale-110 fa-old-padding-layer">
	<FAIcon icon="arrow-up" />
	<FAIcon
	icon="minus"
	transform="up-7"
	/>
	</FALayers>
	</button>
	</div>
	<button
	v-if="unseenCount"
	class="button-default read-button"
	type="button"
	@click.prevent="markAsSeen"
	>
	{{ $t('notifications.read') }}
	</button>
	<NotificationFilters class="rightside-button" />
	</div>
	<div
	- class="panel-body"
	role="feed"
	>
	<div
	v-if="showExtraNotifications"
	role="listitem"
	class="notification"
	>
	<extra-notifications />
	</div>
	<div
	v-for="notification in notificationsToDisplay"
	:key="notification.id"
	role="listitem"
	class="notification"
	:class="{unseen: !minimalMode && shouldShowUnseen(notification)}"
	@click="e => notificationClicked(notification)"
	>
	<div class="notification-overlay" />
	<notification
	:notification="notification"
	@interacted="e => notificationInteracted(notification)"
	/>
	</div>
	</div>
	<div class="panel-footer">
	<div
	v-if="bottomedOut"
	class="new-status-notification text-center faint"
	>
	{{ $t('notifications.no_more_notifications') }}
	</div>
	<button
	v-else-if="!loading"
	class="button-unstyled -link text-center"
	@click.prevent="fetchOlderNotifications()"
	>
	<div class="new-status-notification text-center">
	{{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
	</div>
	</button>
	<div
	v-else
	class="new-status-notification text-center"
	>
	<FAIcon
	icon="circle-notch"
	spin
	size="lg"
	/>
	</div>
	</div>
	</div>
	</component>
	</teleport>
	</template>

	<script src="./notifications.js"></script>
	<style lang="scss" src="./notifications.scss"></style>
	diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
	index eec9fe361b..1a73d5fdb2 100644
	--- a/src/components/palette_editor/palette_editor.vue
	+++ b/src/components/palette_editor/palette_editor.vue
	@@ -1,218 +1,246 @@
	<template>
	<div
	class="PaletteEditor"
	:class="{ '-compact': compact, '-apply': apply, '-mobile': mobile }"
	>
	<div class="palette">
	- <ColorInput
	+ <div
	v-for="key in paletteKeys"
	:key="key"
	- :name="key"
	- :model-value="props.modelValue[key]"
	- :fallback="fallback(key)"
	- :label="$t('settings.style.themes3.palette.' + key)"
	- @update:model-value="value => updatePalette(key, value)"
	- />
	+ >
	+ <ColorInput
	+ :name="key"
	+ :model-value="props.modelValue[key]"
	+ :fallback="fallback(key)"
	+ :label="$t('settings.style.themes3.palette.' + key)"
	+ @update:model-value="value => updatePalette(key, value)"
	+ />
	+ <ContrastRatio
	+ v-if="contrast?.[key]"
	+ :show-ratio="true"
	+ :contrast="contrast[key]"
	+ />
	+ <div v-else>{{ ' ' }}</div>
	+ </div>
	</div>
	<div class="buttons">
	<button
	class="btn button-default palette-import-button"
	@click="importPalette"
	>
	<FAIcon icon="file-import" />
	{{ $t('settings.style.themes3.palette.import') }}
	</button>
	<button
	class="btn button-default palette-export-button"
	@click="exportPalette"
	>
	<FAIcon icon="file-export" />
	{{ $t('settings.style.themes3.palette.export') }}
	</button>
	</div>
	<div class="buttons">
	<button
	v-if="apply"
	class="btn button-default palette-apply-button"
	:disabled="disabled"
	:class="{ disabled }"
	@click="applyPalette"
	>
	{{ $t('settings.style.themes3.palette.apply') }}
	</button>
	</div>
	</div>
	</template>

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

	import ColorInput from 'src/components/color_input/color_input.vue'
	+import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'

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

	+import {
	+ getContrastRatio,
	+ hex2rgb,
	+} from 'src/services/color_convert/color_convert.js'
	import {
	newExporter,
	newImporter,
	} from 'src/services/export_import/export_import.js'

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

	library.add(faFileImport, faFileExport)

	const paletteKeys = [
	'bg',
	'fg',
	'text',
	'link',
	'accent',
	'cRed',
	'cBlue',
	'cGreen',
	'cOrange',
	'wallpaper',
	]

	const props = defineProps(['modelValue', 'compact', 'apply', 'disabled'])
	const emit = defineEmits(['update:modelValue', 'applyPalette'])
	const getExportedObject = () =>
	paletteKeys.reduce((acc, key) => {
	const value = props.modelValue[key]
	if (value == null) {
	return acc
	} else {
	return { ...acc, [key]: props.modelValue[key] }
	}
	}, {})

	const paletteExporter = newExporter({
	filename: 'pleroma_palette',
	extension: 'json',
	getExportedObject,
	})
	const paletteImporter = newImporter({
	accept: '.json',
	onImport(parsed) {
	emit('update:modelValue', parsed)
	},
	})

	const exportPalette = () => {
	paletteExporter.exportData()
	}

	const importPalette = () => {
	paletteImporter.importData()
	}

	+const hints = (ratio) => ({
	+ text: ratio.toPrecision(3) + ':1',
	+ // AA level, AAA level
	+ aa: ratio >= 4.5,
	+ aaa: ratio >= 7,
	+ // same but for 18pt+ texts
	+ laa: ratio >= 3,
	+ laaa: ratio >= 4.5,
	+})
	+
	const applyPalette = () => {
	emit('applyPalette', getExportedObject())
	}

	const mobile = computed(() => {
	return useInterfaceStore().layoutType === 'mobile'
	})

	+const contrast = computed(() => {
	+ if (props.modelValue == null) return null
	+ const bg = hex2rgb(props.modelValue.bg)
	+ const text = hex2rgb(props.modelValue.text)
	+ const link = hex2rgb(props.modelValue.link)
	+ if (text == null \|\| link == null) return null
	+
	+ return {
	+ text: hints(getContrastRatio(bg, text)),
	+ link: hints(getContrastRatio(bg, link)),
	+ }
	+})
	+
	const fallback = (key) => {
	if (key === 'accent') {
	return props.modelValue.link
	}
	if (key === 'link') {
	return props.modelValue.accent
	}
	if (key.startsWith('extra')) {
	return '#FF00FF'
	}
	if (key.startsWith('wallpaper')) {
	return '#008080'
	}
	}

	const updatePalette = (paletteKey, value) => {
	emit('update:modelValue', {
	...props.modelValue,
	[paletteKey]: value,
	})
	}
	</script>

	<style lang="scss">
	.PaletteEditor {
	justify-content: space-around;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(5, 1fr) auto;
	grid-gap: 0.5em;
	align-items: baseline;

	.buttons {
	margin-top: 0.5em;
	display: grid;
	gap: 0.5em
	}

	.palette {
	display: grid;
	grid-template-rows: 1fr;
	grid-auto-flow: row;
	grid-auto-rows: auto;
	grid-template-columns: repeat(auto-fill, 10em);
	grid-gap: 0.5em;
	margin-bottom: 0.5em;
	}

	.palette-import-button {
	grid-column: 1 / span 2;
	}

	.palette-export-button {
	grid-column: 3 / span 2;
	}

	.palette-apply-button {
	grid-column: 1 / span 2;
	}

	.color-input.style-control {
	margin: 0;
	}

	&.-compact {
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(5, 1fr) auto;

	.palette-import-button {
	grid-column: 1;
	}

	.palette-export-button {
	grid-column: 2;
	}

	&.-apply {
	grid-template-rows: repeat(5, 1fr) auto auto;

	.palette-apply-button {
	grid-column: 1 / span 2;
	}
	}
	}

	&.-mobile {
	&.-apply {
	.palette-apply-button {
	grid-column: 1 / span 2;
	}
	}
	-
	- .color-input {
	- display: grid;
	- gap: 0.5em;
	-
	- label {
	- flex: 1;
	- }
	- }
	}
	}
	</style>
	diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
	index 6cb99a3b6d..bd2b44e546 100644
	--- a/src/components/post_status_form/post_status_form.js
	+++ b/src/components/post_status_form/post_status_form.js
	@@ -1,995 +1,997 @@
	import { debounce, map, reject, uniqBy } from 'lodash'
	import { mapActions, mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

	import Attachment from 'src/components/attachment/attachment.vue'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import DraftCloser from 'src/components/draft_closer/draft_closer.vue'
	import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
	import suggestor from 'src/components/emoji_input/suggestor.js'
	import Gallery from 'src/components/gallery/gallery.vue'
	import MediaUpload from 'src/components/media_upload/media_upload.vue'
	import Popover from 'src/components/popover/popover.vue'
	import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
	import Select from 'src/components/select/select.vue'
	import StatusContent from 'src/components/status_content/status_content.vue'
	import { propsToNative } from '../../services/attributes_helper/attributes_helper.service.js'
	import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
	import genRandomSeed from '../../services/random_seed/random_seed.service.js'
	import statusPoster from '../../services/status_poster/status_poster.service.js'

	import { useEmojiStore } from 'src/stores/emoji.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMediaViewerStore } from 'src/stores/media_viewer.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'

	import { pollFormToMasto } from 'src/services/poll/poll.service.js'

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

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

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

	allAttentions.unshift(user)

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

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

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

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

	const typeAndRefId = ({ replyTo, profileMention, statusId }) => {
	if (replyTo) {
	return ['reply', replyTo]
	} else if (profileMention) {
	return ['mention', profileMention]
	} else if (statusId) {
	return ['edit', statusId]
	} else {
	return ['new', '']
	}
	}

	const PostStatusForm = {
	props: [
	'statusId',
	'statusText',
	'statusIsSensitive',
	'statusPoll',
	'statusFiles',
	'statusMediaDescriptions',
	'statusScope',
	'statusContentType',
	'replyTo',
	'repliedUser',
	'attentions',
	'copyMessageScope',
	'subject',
	'disableSubject',
	'disableScopeSelector',
	'disableVisibilitySelector',
	'disableNotice',
	'disableLockWarning',
	'disablePolls',
	'disableQuotes',
	'disableSensitivityCheckbox',
	'disableSubmit',
	'disablePreview',
	'disableDraft',
	'hideDraft',
	'closeable',
	'placeholder',
	'maxHeight',
	'postHandler',
	'preserveFocus',
	'autoFocus',
	'fileLimit',
	'submitOnEnter',
	'emojiPickerPlacement',
	'optimisticPosting',
	'profileMention',
	'draftId',
	],
	emits: [
	'posted',
	'draft-done',
	'resize',
	'mediaplay',
	'mediapause',
	- 'can-close',
	+ 'close-accepted',
	'update',
	],
	components: {
	MediaUpload,
	EmojiInput,
	PollForm: defineAsyncComponent(
	() => import('src/components/poll/poll_form.vue'),
	),
	QuoteForm: defineAsyncComponent(
	() => import('src/components/quote/quote_form.vue'),
	),
	ScopeSelector,
	Checkbox,
	Select,
	Attachment,
	StatusContent,
	Gallery,
	DraftCloser,
	Popover,
	},
	mounted() {
	this.updateIdempotencyKey()
	this.resize(this.$refs.textarea)

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

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

	const { scopeCopy } = useMergedConfigStore().mergedConfig

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

	// If we are starting a new post, do not associate it with old drafts
	let statusParams =
	!this.disableDraft && (this.draftId \|\| statusType !== 'new')
	? this.getDraft(statusType, refId)
	: null

	if (!statusParams) {
	if (statusType === 'reply' \|\| statusType === 'mention') {
	const currentUser = this.$store.state.users.currentUser
	statusText = buildMentionsString(
	{ user: this.repliedUser, attentions: this.attentions },
	currentUser,
	)
	}

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

	const { postContentType: contentType, sensitiveByDefault } =
	useMergedConfigStore().mergedConfig

	statusParams = {
	type: statusType,
	refId,
	spoilerText: this.subject \|\| '',
	status: statusText,
	nsfw: !!sensitiveByDefault,
	files: [],
	poll: {},
	hasPoll: false,
	hasQuote: false,
	quote: {
	id: '',
	url: '',
	thread: false,
	},
	mediaDescriptions: {},
	visibility: scope,
	contentType,
	quoting: false,
	}

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

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

	return this.disableQuotes !== true
	},
	isReply() {
	return this.newStatus.type === 'reply'
	},
	quotable() {
	return this.quotingAvailable && this.replyTo
	},
	quoteThreadToggled: {
	get() {
	return this.newStatus.hasQuote && this.newStatus.quote.thread
	},
	set(value) {
	this.newStatus.hasQuote = value
	this.newStatus.quote.thread = value
	this.newStatus.quote.id = value ? this.replyTo : ''
	},
	},
	defaultQuotable() {
	if (
	!this.quotingAvailable \|\|
	!this.isReply \|\|
	!useMergedConfigStore().mergedConfig.quoteReply
	) {
	return false
	}

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

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

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

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

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

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

	this.posting = true

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

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

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

	- postHandler(postingOptions).then((data) => {
	- if (!data.error) {
	+ postHandler(postingOptions)
	+ .then((data) => {
	this.abandonDraft()
	this.clearStatus()
	this.$emit('posted', data)
	- } else {
	- this.error = data.error
	- }
	- this.posting = false
	- })
	+ })
	+ .catch((error) => {
	+ this.error = error
	+ })
	+ .finally(() => {
	+ this.posting = false
	+ })
	},
	previewStatus() {
	if (this.emptyStatus && this.newStatus.spoilerText.trim() === '') {
	this.preview = { error: this.$t('post_status.preview_empty') }
	this.previewLoading = false
	return
	}
	const newStatus = this.newStatus
	this.previewLoading = true

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

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

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

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

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

	const oldHeight = pxStringToNumber(target.style.height)

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

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

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

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

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

	if (scrollerRef === window) {
	scrollerRef.scroll(0, targetScroll)
	} else {
	scrollerRef.scrollTop = targetScroll
	}
	},
	clearError() {
	this.error = null
	},
	changeVis(visibility) {
	this.newStatus.visibility = visibility
	},
	togglePollForm() {
	this.newStatus.hasPoll = !this.newStatus.hasPoll
	},
	setPoll(poll) {
	this.newStatus.poll = poll
	},
	clearPollForm() {
	if (this.$refs.pollForm) {
	this.$refs.pollForm.clear()
	}
	},
	clearQuoteForm() {
	if (this.$refs.quoteForm) {
	this.$refs.quoteForm.clear()
	}
	},
	toggleQuoteForm() {
	this.newStatus.hasQuote = !this.newStatus.hasQuote

	this.newStatus.quote = {}
	this.newStatus.quote.thread = false
	this.newStatus.quote.id = null
	this.newStatus.quote.url = ''
	},
	dismissScopeNotice() {
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'hideScopeNotice',
	value: true,
	})
	},
	setMediaDescription(id) {
	const description = this.newStatus.mediaDescriptions[id]
	if (!description \|\| description.trim() === '') return
	return statusPoster.setMediaDescription({
	store: this.$store,
	id,
	description,
	})
	},
	setAllMediaDescriptions() {
	const ids = this.newStatus.files.map((file) => file.id)
	return Promise.all(ids.map((id) => this.setMediaDescription(id)))
	},
	handleEmojiInputShow(value) {
	this.emojiInputShown = value
	},
	updateIdempotencyKey() {
	this.idempotencyKey = Date.now().toString()
	},
	openProfileTab() {
	useInterfaceStore().openSettingsModalTab('profile')
	},
	propsToNative(props) {
	return propsToNative(props)
	},
	saveDraft() {
	if (!this.disableDraft && !this.saveInhibited) {
	if (this.safeToSaveDraft) {
	return this.$store
	.dispatch('addOrSaveDraft', { draft: this.newStatus })
	.then((id) => {
	if (this.newStatus.id !== id) {
	this.newStatus.id = id
	}
	this.saveable = false
	if (!this.shouldAutoSaveDraft) {
	this.clearStatus()
	this.$emit('draft-done')
	}
	})
	} else if (this.hasEmptyDraft) {
	// There is a draft, but there is nothing in it, clear it
	return this.abandonDraft().then(() => {
	this.saveable = false
	if (!this.shouldAutoSaveDraft) {
	this.clearStatus()
	this.$emit('draft-done')
	}
	})
	}
	}
	return Promise.resolve()
	},
	maybeAutoSaveDraft() {
	if (this.shouldAutoSaveDraft) {
	this.saveDraft(false)
	}
	},
	abandonDraft() {
	return this.$store.dispatch('abandonDraft', { id: this.newStatus.id })
	},
	getDraft(statusType, refId) {
	const maybeDraft = this.$store.state.drafts.drafts[this.draftId]
	if (this.draftId && maybeDraft) {
	return maybeDraft
	} else {
	const existingDrafts = this.$store.getters.draftsByTypeAndRefId(
	statusType,
	refId,
	)

	if (existingDrafts.length) {
	return existingDrafts[0]
	}
	}
	// No draft available, fall back
	},
	requestClose() {
	if (!this.saveable) {
	- this.$emit('can-close')
	+ this.$emit('close-accepted')
	} else {
	this.$refs.draftCloser.requestClose()
	}
	},
	saveAndCloseDraft() {
	this.saveDraft().then(() => {
	- this.$emit('can-close')
	+ this.$emit('close-accepted')
	})
	},
	discardAndCloseDraft() {
	this.abandonDraft().then(() => {
	- this.$emit('can-close')
	+ this.$emit('close-accepted')
	})
	},
	addBeforeUnloadListener() {
	this._beforeUnloadListener \|\|= () => {
	this.saveDraft()
	}
	window.addEventListener('beforeunload', this._beforeUnloadListener)
	},
	removeBeforeUnloadListener() {
	if (this._beforeUnloadListener) {
	window.removeEventListener('beforeunload', this._beforeUnloadListener)
	}
	},
	},
	}

	export default PostStatusForm
	diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
	index a5e6ffb6d8..6c82d4b48e 100644
	--- a/src/components/post_status_form/post_status_form.vue
	+++ b/src/components/post_status_form/post_status_form.vue
	@@ -1,434 +1,434 @@
	<template>
	<div
	ref="form"
	class="post-status-form"
	>
	<form
	autocomplete="off"
	@submit.prevent
	@dragover.prevent="fileDrag"
	>
	<div class="form-group">
	<div
	v-if="!$store.state.users.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' && $store.state.users.currentUser.locked"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.private') }}</span>
	<a
	class="fa-scale-110 fa-old-padding dismiss"
	:title="$t('post_status.scope_notice_dismiss')"
	role="button"
	tabindex="0"
	@click.prevent="dismissScopeNotice()"
	>
	<FAIcon icon="times" />
	</a>
	</p>
	<p
	v-else-if="newStatus.visibility === 'direct'"
	class="visibility-notice 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>
	<EmojiInput
	ref="emoji-input"
	v-model="newStatus.status"
	:suggest="emojiUserSuggestor"
	:placement="emojiPickerPlacement"
	class="input form-control main-input unstyled"
	enable-sticker-picker
	enable-emoji-picker
	:newline-on-ctrl-enter="submitOnEnter"
	@input="onEmojiInputInput"
	@sticker-uploaded="addMediaFile"
	@sticker-upload-failed="uploadFailed"
	@shown="handleEmojiInputShow"
	>
	<template #default="inputProps">
	<textarea
	ref="textarea"
	v-model="newStatus.status"
	:placeholder="placeholder \|\| $t('post_status.default')"
	rows="1"
	cols="1"
	:disabled="posting && !optimisticPosting"
	class="input form-post-body"
	:class="{ 'scrollable-form': !!maxHeight }"
	v-bind="propsToNative(inputProps)"
	@keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
	@keydown.meta.enter="postStatus($event, newStatus)"
	@keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
	@input="resize"
	@compositionupdate="resize"
	@paste="paste"
	/>
	<p
	v-if="hasStatusLengthLimit"
	class="character-counter faint"
	:class="{ error: isOverLengthLimit }"
	>
	{{ charactersLeft }}
	</p>
	</template>
	</EmojiInput>
	</div>
	<div
	v-if="!disableScopeSelector"
	class="visibility-tray"
	>
	<scope-selector
	v-if="!disableVisibilitySelector"
	:show-all="showAllScopes"
	:user-default="userDefaultScope"
	:original-scope="copyMessageScope"
	:initial-scope="newStatus.visibility"
	:on-scope-change="changeVis"
	/>

	<div
	v-if="postFormats.length > 1"
	class="text-format"
	>
	<Select
	v-model="newStatus.contentType"
	class="input form-control unstyled"
	:attrs="{ 'aria-label': $t('post_status.content_type_selection') }"
	unstyled="true"
	>
	<option
	v-for="postFormat in postFormats"
	:key="postFormat"
	:value="postFormat"
	>
	{{ $t(`post_status.content_type["${postFormat}"]`) }}
	</option>
	</Select>
	</div>
	<div
	v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
	class="text-format"
	>
	<span class="only-format">
	{{ $t(`post_status.content_type["${postFormats[0]}"]`) }}
	</span>
	</div>
	</div>
	</div>
	<PollForm
	v-if="pollsAvailable"
	ref="pollForm"
	:visible="pollFormVisible"
	:params="newStatus.poll"
	/>
	<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, newStatus)"
	>
	<template v-if="posting">
	{{ $t('post_status.posting') }}
	</template>
	<template v-else>
	{{ $t('post_status.post') }}
	</template>
	</button>
	<Popover
	v-if="!hideExtraActions"
	class="more-post-actions"
	:normal-button="true"
	trigger="click"
	placement="bottom"
	:offset="{ y: 5 }"
	:trigger-attrs="{ 'aria-label': $t('post_status.more_post_actions') }"
	>
	<template #trigger>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="chevron-down"
	/>
	</template>
	<template #content="{close}">
	<div
	class="dropdown-menu"
	role="menu"
	>
	<div
	class="menu-item dropdown-item"
	:class="{ disabled: !safeToSaveDraft }"
	>
	<button
	v-if="!hideDraft \|\| !disableDraft"
	class="main-button"
	role="menu"
	:disabled="!safeToSaveDraft"
	@click.prevent="saveDraft"
	@click="close"
	>
	<template v-if="closeable">
	{{ $t('post_status.save_to_drafts_and_close_button') }}
	</template>
	<template v-else>
	{{ $t('post_status.save_to_drafts_button') }}
	</template>
	</button>
	</div>
	</div>
	</template>
	</Popover>
	</div>
	</div>
	<div
	v-show="showDropIcon !== 'hide'"
	:style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
	class="drop-indicator"
	@dragleave="fileDragStop"
	@drop.stop="fileDrop"
	>
	<FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
	</div>
	<div
	v-if="error"
	class="alert error -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', attachment.id)"
	- @pause="$emit('mediapause', attachment.id)"
	+ @play="$emit('mediaplay', 'newStatus')"
	+ @pause="$emit('mediapause', 'newStatus')"
	/>
	<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/search/search.vue b/src/components/search/search.vue
	index 4302f93f97..1f39826068 100644
	--- a/src/components/search/search.vue
	+++ b/src/components/search/search.vue
	@@ -1,231 +1,229 @@
	<template>
	<div class="Search panel panel-default">
	<div class="panel-heading">
	<h1 class="title">
	{{ $t('nav.search') }}
	</h1>
	</div>
	<div class="panel-body search-input-container">
	<input
	ref="searchInput"
	v-model="searchTerm"
	class="input search-input"
	:placeholder="$t('nav.search')"
	@keyup.enter="newQuery(searchTerm)"
	>
	<button
	class="btn button-default search-button"
	type="submit"
	@click="newQuery(searchTerm)"
	>
	<FAIcon icon="search" />
	</button>
	</div>
	<div
	v-if="loading && statusesOffset == 0"
	class="panel-body text-center loading-icon"
	>
	<FAIcon
	icon="circle-notch"
	spin
	size="lg"
	/>
	</div>
	<div v-else-if="loaded">
	<div class="search-nav-heading">
	<tab-switcher
	ref="tabSwitcher"
	:on-switch="onResultTabSwitch"
	:active-tab="currenResultTab"
	>
	<span
	key="statuses"
	:label="$t('user_card.statuses') + resultCount('visibleStatuses')"
	/>
	<span
	key="people"
	:label="$t('search.people') + resultCount('users')"
	/>
	<span
	key="hashtags"
	:label="$t('search.hashtags') + resultCount('hashtags')"
	/>
	</tab-switcher>
	</div>
	</div>
	<div class="panel-body">
	<div v-if="currenResultTab === 'statuses'">
	<Status
	v-for="status in visibleStatuses"
	:key="status.id"
	- :collapsable="false"
	:expandable="false"
	:compact="false"
	class="search-result"
	:statusoid="status"
	- :no-heading="false"
	/>
	<button
	v-if="!loading && loaded && lastStatusFetchCount > 0"
	class="more-statuses-button button-unstyled -link"
	@click.prevent="search(searchTerm, 'statuses')"
	>
	<div class="new-status-notification text-center">
	{{ $t('search.load_more') }}
	</div>
	</button>
	<div
	v-else-if="loading && statusesOffset > 0"
	class="text-center loading-icon"
	>
	<FAIcon
	icon="circle-notch"
	spin
	size="lg"
	/>
	</div>
	<div
	v-if="(visibleStatuses.length === 0 \|\| lastStatusFetchCount === 0) && !loading && loaded"
	class="search-result-heading"
	>
	<h4>
	{{ visibleStatuses.length === 0 ? $t('search.no_results') : $t('search.no_more_results') }}
	</h4>
	</div>
	</div>
	<div v-else-if="currenResultTab === 'people'">
	<div
	v-if="users.length === 0 && !loading && loaded"
	class="search-result-heading"
	>
	<h4>{{ $t('search.no_results') }}</h4>
	</div>
	<FollowCard
	v-for="user in users"
	:key="user.id"
	:user="user"
	class="list-item search-result"
	/>
	</div>
	<div v-else-if="currenResultTab === 'hashtags'">
	<div
	v-if="hashtags.length === 0 && !loading && loaded"
	class="search-result-heading"
	>
	<h4>{{ $t('search.no_results') }}</h4>
	</div>
	<div
	v-for="hashtag in hashtags"
	:key="hashtag.url"
	class="status trend search-result"
	>
	<router-link
	class="list-item hashtag"
	:to="{ name: 'tag-timeline', params: { tag: hashtag.name } }"
	>
	<span class="name">
	#{{ hashtag.name }}
	</span>
	<div v-if="lastHistoryRecord(hashtag)">
	<span v-if="lastHistoryRecord(hashtag).accounts == 1">
	{{ $t('search.person_talking', { count: lastHistoryRecord(hashtag).accounts }) }}
	</span>
	<span v-else>
	{{ $t('search.people_talking', { count: lastHistoryRecord(hashtag).accounts }) }}
	</span>
	</div>
	</router-link>
	<div
	v-if="lastHistoryRecord(hashtag)"
	class="count"
	>
	{{ lastHistoryRecord(hashtag).uses }}
	</div>
	</div>
	</div>
	</div>
	<div class="search-result-footer text-center panel-footer faint" />
	</div>
	</template>

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

	<style lang="scss">
	.search-result-heading {
	color: var(--faint);
	padding: 0.75rem;
	text-align: center;
	}

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

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

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

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

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

	.loading-icon {
	padding: 1em;
	}

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

	.hashtag {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	.name {
	color: var(--link);
	}
	}

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

	.more-statuses-button {
	height: 3.5em;
	line-height: 3.5em;
	width: 100%;
	}

	</style>
	diff --git a/src/components/settings_modal/admin_tabs/admin_user_card.scss b/src/components/settings_modal/admin_tabs/admin_user_card.scss
	index a9010afdc1..a1f685aecb 100644
	--- a/src/components/settings_modal/admin_tabs/admin_user_card.scss
	+++ b/src/components/settings_modal/admin_tabs/admin_user_card.scss
	@@ -1,14 +1,29 @@
	.AdminUserCard {
	+ details {
	+ white-space: normal;
	+
	+ summary {
	+ font-weight: bold;
	+ }
	+
	+ span {
	+ display: block;
	+ max-height: 6.5em;
	+ overflow-y: auto;
	+ resize: vertical;
	+ }
	+ }
	+
	.right-side {
	align-items: baseline;
	justify-content: end;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-top: 0.5em;

	.alert {
	margin: 0;
	}
	}
	}
	diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
	index 038f522b1a..b118e0c52f 100644
	--- a/src/components/settings_modal/admin_tabs/emoji_tab.vue
	+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
	@@ -1,447 +1,443 @@
	<template>
	<div
	class="EmojiTab"
	:label="$t('admin_dash.tabs.emoji')"
	>
	<div class="setting-section">
	<h3 class="toolbar">
	<span class="header-text">
	{{ $t('admin_dash.emoji.emoji_packs') }}
	</span>

	<span class="header-buttons btn-group">
	<button
	class="button button-default"
	type="button"
	:title="$t('admin_dash.emoji.reload')"
	@click="reloadEmoji"
	>
	<FAIcon icon="arrows-rotate" />
	{{ $t('admin_dash.emoji.reload_short') }}
	</button>
	<Popover
	popover-class="emoji-tab-edit-popover popover-default"
	trigger="click"
	placement="bottom"
	>
	<template #trigger>
	<button
	class="button button-default"
	type="button"
	:title="$t('admin_dash.emoji.remote_packs')"
	>
	<FAIcon icon="download" />
	{{ $t('admin_dash.emoji.remote_packs_short') }}
	</button>
	</template>
	<template #content>
	<div class="emoji-tab-popover-input">
	<h3>{{ $t('admin_dash.emoji.remote_pack_instance') }}</h3>
	<input
	v-model="remotePackInstance"
	class="input"
	:placeholder="$t('admin_dash.emoji.remote_pack_instance')"
	>
	<button
	class="button button-default emoji-tab-popover-button"
	type="button"
	@click="listRemotePacks"
	>
	{{ $t('admin_dash.emoji.do_list') }}
	</button>
	</div>
	</template>
	</Popover>

	<Popover
	ref="additionalRemotePopover"
	popover-class="emoji-tab-edit-popover popover-default"
	+ class="button button-default emoji-panel-additional-actions"
	+ :title="$t('admin_dash.emoji.import_pack')"
	trigger="click"
	placement="bottom"
	>
	<template #trigger>
	- <button
	- class="button button-default emoji-panel-additional-actions"
	- :title="$t('admin_dash.emoji.import_pack')"
	- @click="$refs.additionalRemotePopover.showPopover"
	- >
	- <FAIcon icon="folder-open" />
	- {{ $t('admin_dash.emoji.import_pack_short') }}
	- </button>
	+ <FAIcon icon="folder-open" />
	+ {{ $t('admin_dash.emoji.import_pack_short') }}
	</template>

	<template #content>
	<div class="emoji-tab-popover-input">
	<h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3>
	<input
	v-model="newPackName"
	:placeholder="$t('admin_dash.emoji.new_pack_name')"
	class="input"
	>
	<h3>Import pack from URL</h3>
	<input
	v-model="remotePackURL"
	class="input"
	placeholder="Pack .zip URL"
	>
	<button
	class="button button-default btn emoji-tab-popover-button"
	type="button"
	:disabled="newPackName.trim() === '' \|\| remotePackURL.trim() === ''"
	@click="downloadRemoteURLPack"
	>
	Import
	</button>
	<h3>Import pack from a file</h3>
	<input
	type="file"
	accept="application/zip"
	class="emoji-tab-popover-file input"
	@change="remotePackFile = $event.target.files"
	>
	<button
	class="button button-default btn emoji-tab-popover-button"
	type="button"
	:disabled="newPackName.trim() === '' \|\| remotePackFile === null \|\| remotePackFile.length === 0"
	@click="downloadRemoteFilePack"
	>
	Import
	</button>
	</div>
	</template>
	</Popover>
	</span>
	</h3>
	<div class="setting-section">
	<h4 class="toolbar">
	{{ $t('admin_dash.emoji.edit_pack') }}
	</h4>
	<div class="setting-item selector-buttons">
	<button
	:disabled="!pack \|\| pack.remote !== undefined"
	class="button button-default btn"
	type="button"
	@click="deleteModalVisible = true"
	>
	{{ $t('admin_dash.emoji.delete_pack') }}

	<ConfirmModal
	v-if="deleteModalVisible"
	:title="$t('admin_dash.emoji.delete_title')"
	:cancel-text="$t('status.delete_confirm_cancel_button')"
	:confirm-text="$t('status.delete_confirm_accept_button')"
	@cancelled="deleteModalVisible = false"
	@accepted="deleteEmojiPack"
	>
	{{ $t('admin_dash.emoji.delete_confirm', [packName]) }}
	</ConfirmModal>
	</button>

	<button
	:disabled="!pack \|\| pack.remote === undefined"
	class="button button-default btn"
	type="button"
	@click="$refs.downloadPackPopover.showPopover"
	>
	{{ $t('admin_dash.emoji.download_pack') }}

	<Popover
	ref="downloadPackPopover"
	trigger="click"
	placement="bottom"
	bound-to-selector=".emoji-tab"
	popover-class="emoji-tab-edit-popover popover-default"
	:bound-to="{ x: 'container' }"
	:offset="{ y: 5 }"
	>
	<template #content>
	<h3>{{ $t('admin_dash.emoji.downloading_pack', [packName]) }}</h3>
	<div>
	<div>
	<div class="emoji-tab-popover-input">
	<label>
	{{ $t('admin_dash.emoji.download_as_name') }}
	<input
	v-model="remotePackDownloadAs"
	class="emoji-data-input input"
	:placeholder="$t('admin_dash.emoji.download_as_name_full')"
	>
	</label>

	<div
	v-if="downloadWillReplaceLocal"
	class="warning"
	>
	<em>{{ $t('admin_dash.emoji.replace_warning') }}</em>
	</div>
	</div>

	<button
	class="button button-default btn"
	type="button"
	@click="downloadRemotePack"
	>
	{{ $t('admin_dash.emoji.download') }}
	</button>
	</div>
	</div>
	</template>
	</Popover>
	</button>

	<span class="btn-group">
	<Select
	v-model="packName"
	class="form-control"
	>
	<option
	value=""
	disabled
	hidden
	>
	{{ $t('admin_dash.emoji.emoji_pack') }}
	</option>
	<option
	v-for="(pack, listPackName) in knownPacks"
	:key="listPackName"
	:label="listPackName"
	>
	{{ listPackName }}
	</option>
	</Select>

	<Popover
	ref="createPackPopover"
	popover-class="emoji-tab-edit-popover popover-default"
	trigger="click"
	placement="bottom"
	>
	<template #trigger>
	<button
	class="button button-default btn emoji-tab-popover-button"
	type="button"
	>
	{{ $t('admin_dash.emoji.create_pack') }}
	</button>
	</template>
	<template #content>
	<div class="emoji-tab-popover-input">
	<h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3>
	<input
	v-model="newPackName"
	:placeholder="$t('admin_dash.emoji.new_pack_name')"
	class="input"
	>
	<button
	class="button button-default btn emoji-tab-popover-button"
	type="button"
	@click="createEmojiPack"
	>
	{{ $t('admin_dash.emoji.create') }}
	</button>
	</div>
	</template>
	</Popover>
	</span>
	</div>
	<h5>
	{{ $t('admin_dash.emoji.metadata') }}

	<ModifiedIndicator
	:changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
	message-key="admin_dash.emoji.emoji_changed"
	/>
	</h5>
	<ul class="setting-list">
	<li>
	<label
	class="setting-item"
	:class="{ ['-disabled']: !pack \|\| pack.remote !== undefined }"
	>
	<span class="setting-label">
	<ModifiedIndicator
	:changed="metaEdited('description')"
	message-key="admin_dash.emoji.metadata_changed"
	/>
	{{ $t('admin_dash.emoji.description') }}
	</span>
	<textarea
	v-model="packMeta.description"
	:disabled="!pack \|\| pack.remote !== undefined"
	height="4"
	class="bio resize-height input textarea setting-control"
	/>
	</label>
	</li>
	<li>
	<label
	class="setting-item"
	:class="{ ['-disabled']: !pack \|\| pack.remote !== undefined }"
	>
	<span class="setting-label">
	<ModifiedIndicator
	:changed="metaEdited('homepage')"
	message-key="admin_dash.emoji.metadata_changed"
	/>
	{{ $t('admin_dash.emoji.homepage') }}
	</span>

	<input
	v-model="packMeta.homepage"
	class="emoji-info-input input setting-control"
	:disabled="!pack \|\| pack.remote !== undefined"
	>
	</label>
	</li>
	<li>
	<label
	class="setting-item"
	:class="{ ['-disabled']: !pack \|\| pack.remote !== undefined }"
	>
	<span class="setting-label">
	<ModifiedIndicator
	:changed="metaEdited('fallback-src')"
	message-key="admin_dash.emoji.metadata_changed"
	/>
	{{ $t('admin_dash.emoji.fallback_src') }}
	</span>

	<input
	v-model="packMeta['fallback-src']"
	class="emoji-info-input input setting-control"
	:disabled="!pack \|\| pack.remote !== undefined"
	>
	</label>
	</li>
	<li>
	<label
	class="setting-item"
	:class="{ ['-disabled']: !pack \|\| pack.remote !== undefined }"
	>
	<span class="setting-label">
	{{ $t('admin_dash.emoji.fallback_sha256') }}
	</span>

	<input
	v-model="packMeta['fallback-src-sha256']"
	:disabled="!pack \|\| pack.remote !== undefined"
	class="emoji-info-input input setting-control"
	>
	</label>
	</li>
	<li>
	<div class="setting-item">
	<Checkbox
	v-model="packMeta['share-files']"
	:disabled="!pack \|\| pack.remote !== undefined"
	class="setting-label setting-control"
	>
	<ModifiedIndicator
	:changed="metaEdited('share-files')"
	message-key="admin_dash.emoji.metadata_changed"
	/>
	{{ $t('admin_dash.emoji.share') }}
	</Checkbox>
	</div>
	</li>
	<li>
	<div class="meta-buttons">
	<button
	v-if="pack && pack.remote === undefined"
	class="button button-default btn"
	type="button"
	@click="savePackMetadata"
	>
	{{ $t('admin_dash.emoji.save_meta') }}
	</button>
	<button
	v-if="pack && pack.remote === undefined"
	class="button button-default btn"
	type="button"
	@click="savePackMetadata"
	>
	{{ $t('admin_dash.emoji.revert_meta') }}
	</button>
	</div>
	</li>
	</ul>
	<h5>
	{{ $t('admin_dash.emoji.files') }}

	<ModifiedIndicator
	:changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
	message-key="admin_dash.emoji.emoji_changed"
	/>
	</h5>

	<div
	class="emoji-list setting-list"
	>
	<EmojiEditingPopover
	v-if="pack && pack.remote === undefined"
	class="emoji-item"
	placement="bottom"
	new-upload
	:title="$t('admin_dash.emoji.adding_new')"
	:pack-name="packName"
	@update-pack-files="updatePackFiles"
	@display-error="displayError"
	>
	<template #trigger>
	<FAIcon
	icon="plus"
	size="2x"
	:title="$t('admin_dash.emoji.add_file')"
	/>
	</template>
	</EmojiEditingPopover>
	<template v-if="!pack">
	<div
	v-for="(_, i) in new Array(20)"
	:key="i"
	class="placeholder"
	/>
	</template>


	<EmojiEditingPopover
	v-for="(file, shortcode) in (pack?.files \|\| [])"
	ref="emojiPopovers"
	:key="shortcode"
	placement="top"
	:title="$t(`admin_dash.emoji.${pack?.remote === undefined ? 'editing' : 'copying'}`, [shortcode])"
	:shortcode="shortcode"
	:file="file"
	:pack-name="packName"
	:remote="pack?.remote"
	:known-local-packs="knownLocalPacks"
	@update-pack-files="updatePackFiles"
	@display-error="displayError"
	>
	<template #trigger>
	<StillImage
	class="emoji"
	:src="emojiAddr(file)"
	:title="`:${shortcode}:`"
	:alt="`:${shortcode}:`"
	/>
	</template>
	</EmojiEditingPopover>
	</div>
	</div>
	<h3>{{ $t('admin_dash.emoji.advanced') }}</h3>
	<button
	class="button button-default btn"
	type="button"
	@click="importFromFS"
	>
	<FAIcon icon="server" />
	{{ $t('admin_dash.emoji.importFS') }}
	</button>
	</div>
	</div>
	</template>

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

	<style lang="scss" src="./emoji_tab.scss"></style>
	diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.scss b/src/components/settings_modal/admin_tabs/frontends_tab.scss
	index 8b7b1f4e33..4516889dcf 100644
	--- a/src/components/settings_modal/admin_tabs/frontends_tab.scss
	+++ b/src/components/settings_modal/admin_tabs/frontends_tab.scss
	@@ -1,60 +1,60 @@
	.FrontendsTab {
	padding: 0 1em;

	.cards-list {
	padding: 0;
	}

	li.frontend-card {
	display: flex;
	margin: 0;
	flex-direction: column;
	}

	.frontend-buttons {
	margin-top: 0.5em;
	display: flex;
	justify-content: end;
	gap: 0.5em;
	flex-wrap: wrap;
	flex: 1 0 auto;
	align-items: end;
	}

	.relative {
	position: relative;
	}

	.overlay {
	position: absolute;
	background: var(--bg);
	// fix buttons showing through
	z-index: 2;
	opacity: 0.9;
	inset: 0;
	}

	h5 {
	margin: 0;
	font-size: 1.15em;
	text-transform: capitalize;
	}

	dl {
	margin-left: 1em;
	}

	dt {
	margin-top: 0.5em;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow-x: hidden;
	}

	dd {
	text-overflow: ellipsis;
	white-space: nowrap;
	- overflow-x: hidden;
	+ overflow: hidden;
	}

	}
	diff --git a/src/components/settings_modal/helpers/rate_setting.js b/src/components/settings_modal/helpers/rate_setting.js
	index 0c37abb873..50a804f1ae 100644
	--- a/src/components/settings_modal/helpers/rate_setting.js
	+++ b/src/components/settings_modal/helpers/rate_setting.js
	@@ -1,53 +1,53 @@
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import Setting from './setting.js'

	export default {
	...Setting,
	data() {
	return {
	newValue: '',
	}
	},
	components: {
	...Setting.components,
	Checkbox,
	},
	props: {
	...Setting.props,
	},
	computed: {
	...Setting.computed,
	isSeparate() {
	// [[a1, b1], [a2, b2]] vs [a, b]
	return Array.isArray(this.visibleState[0])
	},
	normalizedState() {
	if (this.isSeparate) {
	return this.visibleState.map((y) => y.map((x) => Number(x) \|\| 0))
	} else {
	return [this.visibleState.map((x) => Number(x) \|\| 0)]
	}
	},
	},
	methods: {
	...Setting.methods,
	getValue({ event, side, index, eventType }) {
	if (eventType === 'edit') {
	const value = Number(event.target.value)
	if (Number.isNaN(value)) return this.visibleState

	const newVal = [...this.normalizedState.map((x) => [...x])]
	newVal[side][index] = value
	return newVal
	}

	if (eventType === 'toggleMode') {
	if (event === 'split') {
	return [this.normalizedState[0], this.normalizedState[0]]
	} else if (event === 'join') {
	- return [this.normalizedState[0]]
	+ return this.normalizedState[0]
	}
	}
	},
	},
	}
	diff --git a/src/components/settings_modal/helpers/rate_setting.vue b/src/components/settings_modal/helpers/rate_setting.vue
	index bb361dfb93..6a573d016c 100644
	--- a/src/components/settings_modal/helpers/rate_setting.vue
	+++ b/src/components/settings_modal/helpers/rate_setting.vue
	@@ -1,140 +1,140 @@
	<template>
	<div
	v-if="matchesExpertLevel"
	class="RateSetting setting-item"
	>
	<label
	class="setting-label"
	:class="{ 'faint': shouldBeDisabled }"
	>
	<ModifiedIndicator
	:changed="isChanged"
	:onclick="reset"
	/>
	<LocalSettingIndicator :is-local="isLocalSetting" />
	{{ ' ' }}
	<template v-if="backendDescriptionLabel">
	{{ backendDescriptionLabel + ' ' }}
	</template>
	<template v-else-if="source === 'admin'">
	MISSING LABEL FOR {{ path }}
	</template>
	<slot v-else />
	</label>
	<p
	v-if="backendDescriptionDescription"
	class="setting-description"
	:class="{ 'faint': shouldBeDisabled }"
	>
	{{ backendDescriptionDescription + ' ' }}
	</p>
	<div class="setting-control">
	<table>
	<thead>
	<tr>
	<th> </th>
	<th>
	{{ $t('admin_dash.rate_limit.period') }}
	</th>
	<th>
	{{ $t('admin_dash.rate_limit.amount') }}
	</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>
	{{ isSeparate ? $t('admin_dash.rate_limit.unauthenticated') : $t('admin_dash.rate_limit.rate_limit') }}
	</td>
	<td>
	<input
	class="input string-input"
	type="number"
	:value="normalizedState[0][0]"
	@change="e => update({ event: e, index: 0, side: 0, eventType: 'edit' })"
	>
	</td>
	<td>
	<input
	class="input string-input"
	type="number"
	:value="normalizedState[0][1]"
	@change="e => update({ event: e, index: 1, side: 0, eventType: 'edit' })"
	>
	</td>
	</tr>
	<tr v-if="isSeparate">
	<td>
	{{ $t('admin_dash.rate_limit.authenticated') }}
	</td>
	<td>
	<input
	class="input string-input"
	type="number"
	:value="normalizedState[1][0]"
	@change="e => update({ event: e, index: 0, side: 1, eventType: 'edit' })"
	>
	</td>
	<td>
	<input
	class="input string-input"
	type="number"
	:value="normalizedState[1][1]"
	@change="e => update({ event: e, index: 1, side: 1, eventType: 'edit' })"
	>
	</td>
	</tr>
	</tbody>
	</table>
	<Checkbox
	:model-value="isSeparate"
	- @update:model-value="event => update({ event: event ? 'join' : 'split', eventType: 'toggleMode' })"
	+ @update:model-value="event => update({ event: event ? 'split' : 'join', eventType: 'toggleMode' })"
	>
	{{ $t('admin_dash.rate_limit.separate') }}
	</Checkbox>
	</div>
	<DraftButtons />
	</div>
	</template>

	<script src="./rate_setting.js"></script>
	<style lang="scss">
	.RateSetting {
	&.setting-item {
	display: grid;
	grid-template-areas:
	"label control"
	"desc control"
	". draft";

	.setting-label {
	text-align: right;
	align-self: center;
	}

	.setting-description {
	text-align: right;
	}

	.setting-control {
	align-self: end;
	}
	}

	table {
	margin-top: 0.5em;
	}

	th {
	font-weight: normal;
	}

	td {
	input {
	width: 15ch;
	}
	}

	margin-bottom: 2em;
	}
	</style>
	diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
	index d5d0a93d95..22b1595f33 100644
	--- a/src/components/settings_modal/settings_modal.vue
	+++ b/src/components/settings_modal/settings_modal.vue
	@@ -1,176 +1,176 @@
	<template>
	<Modal
	:is-open="modalActivated"
	class="settings-modal"
	:class="{ minimize: modalMinimized }"
	:no-background="modalMinimized"
	>
	<div class="settings-modal-panel panel">
	<div class="panel-heading">
	<h1 class="title">
	{{ modalMode === 'user' ? $t('settings.settings') : $t('admin_dash.window_title') }}
	</h1>
	<transition name="fade">
	<div
	v-if="currentSaveStateNotice"
	class="alert"
	:class="{ success: !currentSaveStateNotice.error, error: currentSaveStateNotice.error}"
	@click.prevent
	>
	{{ currentSaveStateNotice.error ? $t('settings.saving_err') : $t('settings.saving_ok') }}
	</div>
	</transition>
	<button
	class="btn button-default"
	- :title="$t('general.minimize')"
	+ :title="$t('general.peek')"
	@click="toggleMinimizeModal"
	>
	<FAIcon
	:icon="['far', 'window-minimize']"
	fixed-width
	/>
	</button>
	<button
	class="btn button-default"
	:title="$t('general.close')"
	@click="closeModal"
	>
	<FAIcon
	icon="times"
	fixed-width
	/>
	</button>
	</div>
	<div class="panel-body">
	<SettingsModalUserContent v-if="modalMode === 'user' && modalOpenedOnceUser" />
	<SettingsModalAdminContent v-if="modalMode === 'admin' && modalOpenedOnceAdmin" />
	</div>
	<div class="panel-footer settings-footer -flexible-height">
	<Popover
	v-if="modalMode === 'user'"
	class="export"
	trigger="click"
	placement="top"
	:offset="{ y: 5, x: 5 }"
	:bound-to="{ x: 'container' }"
	remove-padding
	>
	<template #trigger>
	<button
	class="btn button-default"
	:title="$t('general.close')"
	>
	<span>{{ $t("settings.file_export_import.backup_restore") }}</span>
	{{ ' ' }}
	<FAIcon
	icon="chevron-down"
	/>
	</button>
	</template>
	<template #content="{close}">
	<div class="dropdown-menu">
	<div class="menu-item dropdown-item -icon">
	<button
	class="main-button"
	@click.prevent="backup"
	@click="close"
	>
	<FAIcon
	icon="file-download"
	fixed-width
	/><span>{{ $t("settings.file_export_import.backup_settings") }}</span>
	</button>
	</div>
	<div class="menu-item dropdown-item -icon">
	<button
	class="main-button"
	@click.prevent="backupWithTheme"
	@click="close"
	>
	<FAIcon
	icon="file-download"
	fixed-width
	/><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span>
	</button>
	</div>
	<div class="menu-item dropdown-item -icon">
	<button
	class="main-button"
	@click.prevent="restore"
	@click="close"
	>
	<FAIcon
	icon="file-upload"
	fixed-width
	/><span>{{ $t("settings.file_export_import.restore_settings") }}</span>
	</button>
	</div>
	</div>
	</template>
	</Popover>

	<Checkbox
	:model-value="!!expertLevel"
	@update:model-value="expertLevel = Number($event)"
	>
	{{ $t("settings.expert_mode") }}
	</Checkbox>
	<span v-if="modalMode === 'admin'">
	<i18n-t
	scope="global"
	keypath="admin_dash.wip_notice"
	>
	<template #adminFeLink>
	<a
	href="/pleroma/admin/#/login-pleroma"
	target="_blank"
	>
	{{ $t("admin_dash.old_ui_link") }}
	</a>
	</template>
	</i18n-t>
	</span>
	<span
	id="unscrolled-content"
	class="extra-content"
	/>
	<span
	v-if="modalMode === 'admin'"
	class="admin-buttons"
	>
	<button
	class="button-default btn"
	:disabled="!adminDraftAny"
	@click="resetAdminDraft"
	>
	{{ $t("admin_dash.reset_all") }}
	</button>
	{{ ' ' }}
	<button
	class="button-default btn"
	:disabled="!adminDraftAny"
	@click="pushAdminDraft"
	>
	{{ $t("admin_dash.commit_all") }}
	</button>
	</span>
	</div>
	</div>
	<teleport to="#modal">
	<ConfirmModal
	v-if="temporaryChangesCountdown > 0"
	:title="$t('settings.confirm_new_setting')"
	:cancel-text="$t('settings.revert')"
	:confirm-text="$t('settings.confirm')"
	@cancelled="temporaryChangesRevert"
	@accepted="temporaryChangesConfirm"
	>
	{{ $t('settings.confirm_new_question_countdown', temporaryChangesCountdown) }}
	</ConfirmModal>
	</teleport>
	</Modal>
	</template>

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

	<style src="./settings_modal.scss" lang="scss"></style>
	diff --git a/src/components/settings_modal/settings_modal_admin_content.vue b/src/components/settings_modal/settings_modal_admin_content.vue
	index 911c0df4ad..7725986fdd 100644
	--- a/src/components/settings_modal/settings_modal_admin_content.vue
	+++ b/src/components/settings_modal/settings_modal_admin_content.vue
	@@ -1,204 +1,204 @@
	<template>
	<vertical-tab-switcher
	v-if="adminDescriptionsLoaded && (noDb \|\| adminDbLoaded)"
	ref="tabSwitcher"
	class="settings-admin-content settings_tab-switcher"
	:side-tab-bar="true"
	- :scrollable-tabs
	+ scrollable-tabs
	:render-only-focused="true"
	:body-scroll-lock="bodyLock"
	>
	<div
	v-if="noDb"
	:label="$t('admin_dash.tabs.nodb')"
	icon="exclamation-triangle"
	data-tab-name="nodb-notice"
	>
	<div :label="$t('admin_dash.tabs.nodb')">
	<div class="setting-section">
	<h2>{{ $t('admin_dash.nodb.heading') }}</h2>
	<i18n-t
	scope="global"
	keypath="admin_dash.nodb.text"
	>
	<template #documentation>
	<a
	href="https://docs-develop.pleroma.social/backend/configuration/howto_database_config/"
	target="_blank"
	>
	{{ $t("admin_dash.nodb.documentation") }}
	</a>
	</template>
	<template #property>
	<code>config :pleroma, configurable_from_database</code>
	</template>
	<template #value>
	<code>true</code>
	</template>
	</i18n-t>
	<p>{{ $t('admin_dash.nodb.text2') }}</p>
	</div>
	</div>
	</div>
	<div
	v-if="adminDbLoaded"
	:label="$t('admin_dash.tabs.instance')"
	icon="wrench"
	data-tab-name="general"
	>
	<InstanceTab />
	</div>

	<div
	:label="$t('admin_dash.tabs.users')"
	icon="user"
	data-tab-name="users"
	full-width
	full-height
	>
	<UsersTab />
	</div>

	<div
	:label="$t('admin_dash.tabs.registrations')"
	icon="door-open"
	data-tab-name="registrations"
	>
	<RegistrationsTab />
	</div>

	<div
	:label="$t('admin_dash.tabs.auth')"
	icon="key"
	data-tab-name="monitoring"
	>
	<AuthTab />
	</div>

	<div
	:label="$t('admin_dash.tabs.emoji')"
	icon="face-smile-beam"
	data-tab-name="emoji"
	full-width
	>
	<EmojiTab />
	</div>

	<div
	:label="$t('admin_dash.tabs.frontends')"
	icon="laptop-code"
	data-tab-name="frontends"
	full-width
	>
	<FrontendsTab />
	</div>

	<div
	v-if="adminDbLoaded"
	:label="$t('admin_dash.tabs.limits')"
	icon="hand"
	data-tab-name="limits"
	>
	<LimitsTab />
	</div>

	<div
	v-if="adminDbLoaded"
	:label="$t('admin_dash.tabs.rate_limit')"
	icon="gauge"
	data-tab-name="rate_limits"
	>
	<RatesTab />
	</div>

	<div
	:label="$t('admin_dash.tabs.uploads')"
	icon="upload"
	data-tab-name="uploads"
	>
	<UploadsTab />
	</div>

	<div
	:label="$t('admin_dash.tabs.media_proxy')"
	icon="tower-broadcast"
	data-tab-name="media_proxy"
	>
	<MediaProxyTab />
	</div>

	<div
	:label="$t('admin_dash.tabs.posts')"
	icon="message"
	data-tab-name="other"
	>
	<PostsTab />
	</div>

	<div
	:label="$t('admin_dash.tabs.links')"
	icon="chain"
	data-tab-name="links"
	>
	<LinksTab />
	</div>

	<div
	:label="$t('admin_dash.tabs.mailer')"
	icon="envelope"
	data-tab-name="mailer"
	>
	<MailerTab />
	</div>

	<div
	:label="$t('admin_dash.tabs.federation')"
	icon="circle-nodes"
	data-tab-name="monitoring"
	>
	<FederationTab />
	</div>

	<div
	:label="$t('admin_dash.tabs.http')"
	icon="globe"
	data-tab-name="http"
	>
	<HTTPTab />
	</div>

	<div
	:label="$t('admin_dash.tabs.job_queues')"
	icon="gears"
	data-tab-name="job_queues"
	>
	<JobQueuesTab />
	</div>

	<div
	:label="$t('admin_dash.tabs.monitoring')"
	icon="chart-line"
	data-tab-name="monitoring"
	>
	<MonitoringTab />
	</div>

	<div
	:label="$t('admin_dash.tabs.other')"
	icon="ellipsis"
	data-tab-name="other"
	>
	<OtherTab />
	</div>
	</vertical-tab-switcher>
	</template>

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

	<style lang="scss">
	.settings-admin-content {
	.setting-item {
	grid-template-columns: 1fr 3fr;
	}
	}
	</style>
	diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
	index 86d734e4e0..c958b94356 100644
	--- a/src/components/settings_modal/settings_modal_user_content.vue
	+++ b/src/components/settings_modal/settings_modal_user_content.vue
	@@ -1,139 +1,139 @@
	<template>
	<vertical-tab-switcher
	ref="tabSwitcher"
	class="settings_tab-switcher"
	- :scrollable-tabs
	+ scrollable-tabs
	:body-scroll-lock="bodyLock"
	:hide-header="navHideHeader"
	>
	<div
	:label="$t('settings.general')"
	icon="wrench"
	data-tab-name="general"
	>
	<GeneralTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.profile_tab')"
	icon="user"
	data-tab-name="profile"
	:full-width="true"
	>
	<ProfileTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.composing')"
	icon="pen-alt"
	data-tab-name="composing"
	:delay-render="true"
	>
	<ComposingTab />
	</div>
	<div
	:label="$t('settings.posts')"
	icon="message"
	data-tab-name="posts"
	:delay-render="true"
	>
	<PostsTab />
	</div>
	<div
	:full-width="true"
	:label="$t('settings.appearance')"
	icon="window-restore"
	data-tab-name="appearance"
	:delay-render="true"
	>
	<AppearanceTab />
	</div>
	<div
	:label="$t('settings.layout')"
	icon="table-columns"
	data-tab-name="layout"
	:delay-render="true"
	>
	<LayoutTab />
	</div>
	<div
	v-if="isLoggedIn"
	:full-width="true"
	:label="$t('settings.notifications')"
	icon="bell"
	data-tab-name="notifications"
	>
	<NotificationsTab />
	</div>
	<div
	:label="$t('settings.filtering')"
	icon="filter"
	data-tab-name="filtering"
	>
	<FilteringTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.mutes_and_blocks')"
	icon="eye-slash"
	data-tab-name="mutesAndBlocks"
	:full-width="true"
	:full-height="true"
	>
	<MutesAndBlocksTab />
	</div>
	<div
	:label="$t('settings.clutter')"
	icon="broom"
	data-tab-name="clutter"
	>
	<ClutterTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.security_tab')"
	icon="lock"
	data-tab-name="security"
	>
	<SecurityTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.data_import_export_tab')"
	icon="download"
	data-tab-name="dataImportExport"
	>
	<DataImportExportTab />
	</div>
	<div
	v-if="expertLevel > 0"
	:label="$t('settings.style.themes3.editor.title')"
	icon="palette"
	data-tab-name="style"
	:delay-render="true"
	:full-width="true"
	>
	<StyleTab />
	</div>
	<div
	v-if="expertLevel > 0"
	:label="$t('settings.theme_old')"
	icon="paint-brush"
	data-tab-name="theme"
	:delay-render="true"
	:full-width="true"
	>
	<OldThemeTab />
	</div>
	<div
	v-if="expertLevel > 0"
	:label="$t('settings.developer')"
	icon="code"
	data-tab-name="developer"
	>
	<DeveloperTab />
	</div>
	</vertical-tab-switcher>
	</template>

	<script src="./settings_modal_user_content.js"></script>
	diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
	index 5b8066ef75..f892531333 100644
	--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
	+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
	@@ -1,168 +1,168 @@
	<template>
	<tab-switcher
	class="mutes-and-blocks-tab"
	- :scrollable-tabs
	+ scrollable-tabs
	>
	<div
	class="blocks"
	:label="$t('settings.user_blocks')"
	>
	<div class="usersearch-wrapper">
	<Autosuggest
	:filter="filterUnblockedUsers"
	:query="queryUserIds"
	:placeholder="$t('settings.search_user_to_block')"
	>
	<template #default="row">
	<BlockCard
	:user-id="row.item"
	/>
	</template>
	</Autosuggest>
	</div>
	<List
	:get-key="i => i"
	:external-items="blocks"
	:fetch-function="fetchItems('Blocks')"
	scrollable
	selectable
	>
	<template #header="{selected}">
	<div class="bulk-actions">
	<ProgressButton
	v-if="selected.length > 0"
	class="btn button-default bulk-action-button"
	:click="() => blockUsers(selected)"
	>
	{{ $t('user_card.block') }}
	<template #progress>
	{{ $t('user_card.block_progress') }}
	</template>
	</ProgressButton>
	<ProgressButton
	v-if="selected.length > 0"
	class="btn button-default"
	:click="() => unblockUsers(selected)"
	>
	{{ $t('user_card.unblock') }}
	<template #progress>
	{{ $t('user_card.unblock_progress') }}
	</template>
	</ProgressButton>
	</div>
	</template>
	<template #item="{item}">
	<BlockCard :user-id="item" />
	</template>
	<template #empty>
	{{ $t('settings.no_blocks') }}
	</template>
	</List>
	</div>

	<div
	class="mutes"
	:label="$t('settings.user_mutes2')"
	>
	<div class="usersearch-wrapper">
	<Autosuggest
	:filter="filterUnMutedUsers"
	:query="queryUserIds"
	:placeholder="$t('settings.search_user_to_mute')"
	>
	<template #default="row">
	<MuteCard
	:user-id="row.item"
	/>
	</template>
	</Autosuggest>
	</div>
	<List
	:get-key="i => i"
	:external-items="mutes"
	:fetch-function="fetchItems('Mutes')"
	scrollable
	selectable
	>
	<template #header="{selected}">
	<div class="bulk-actions">
	<ProgressButton
	v-if="selected.length > 0"
	class="btn button-default"
	:click="() => muteUsers(selected)"
	>
	{{ $t('user_card.mute') }}
	<template #progress>
	{{ $t('user_card.mute_progress') }}
	</template>
	</ProgressButton>
	<ProgressButton
	v-if="selected.length > 0"
	class="btn button-default"
	:click="() => unmuteUsers(selected)"
	>
	{{ $t('user_card.unmute') }}
	<template #progress>
	{{ $t('user_card.unmute_progress') }}
	</template>
	</ProgressButton>
	</div>
	</template>
	<template #item="{item}">
	<MuteCard :user-id="item" />
	</template>
	<template #empty>
	{{ $t('settings.no_mutes') }}
	</template>
	</List>
	</div>

	<div :label="$t('settings.domain_mutes2')">
	<div class="domain-mute-form">
	<Autosuggest
	:filter="filterUnMutedDomains"
	:query="queryKnownDomains"
	:placeholder="$t('settings.type_domains_to_mute')"
	>
	<template #default="row">
	<DomainMuteCard
	:domain="row.item"
	/>
	</template>
	</Autosuggest>
	</div>
	<List
	:get-key="i => i"
	:external-items="domains"
	:fetch-function="fetchItems('DomainMutes')"
	scrollable
	selectable
	>
	<template #header="{selected}">
	<div class="bulk-actions">
	<ProgressButton
	v-if="selected.length > 0"
	class="btn button-default"
	:click="() => unmuteDomains(selected)"
	>
	{{ $t('domain_mute_card.unmute') }}
	<template #progress>
	{{ $t('domain_mute_card.unmute_progress') }}
	</template>
	</ProgressButton>
	</div>
	</template>
	<template #item="{item}">
	{{ item }}
	<DomainMuteCard :domain="item" />
	</template>
	<template #empty>
	{{ $t('settings.no_mutes') }}
	</template>
	</List>
	</div>
	</tab-switcher>
	</template>

	<script src="./mutes_and_blocks_tab.js"></script>
	<style lang="scss" src="./mutes_and_blocks_tab.scss"></style>
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index 01d7facfc1..996dc6437a 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,668 +1,598 @@
	import { unescape as ldUnescape, uniqBy } from 'lodash'
	import { defineAsyncComponent } from 'vue'

	import AvatarList from 'src/components/avatar_list/avatar_list.vue'
	import EmojiReactions from 'src/components/emoji_reactions/emoji_reactions.vue'
	import MentionLink from 'src/components/mention_link/mention_link.vue'
	import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
	import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	import StatusActionButtons from 'src/components/status_action_buttons/status_action_buttons.vue'
	import StatusContent from 'src/components/status_content/status_content.vue'
	import StatusPopover from 'src/components/status_popover/status_popover.vue'
	import Timeago from 'src/components/timeago/timeago.vue'
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
	import UserLink from 'src/components/user_link/user_link.vue'
	import UserListPopover from 'src/components/user_list_popover/user_list_popover.vue'
	import UserPopover from 'src/components/user_popover/user_popover.vue'
	import { muteFilterHits } from '../../services/status_parser/status_parser.js'
	import {
	highlightClass,
	highlightStyle,
	} from '../../services/user_highlighter/user_highlighter.js'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'
	import { useUserHighlightStore } from 'src/stores/user_highlight.js'

	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faAngleDoubleRight,
	faChevronDown,
	faChevronUp,
	faEllipsisH,
	faEnvelope,
	faEye,
	faEyeSlash,
	faGlobe,
	faIgloo,
	faLock,
	faLockOpen,
	faPlay,
	faPlusSquare,
	faReply,
	faRetweet,
	faSmileBeam,
	faStar,
	faThumbtack,
	faTimes,
	} from '@fortawesome/free-solid-svg-icons'

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

	-const camelCase = (name) => name.charAt(0).toUpperCase() + name.slice(1)
	-
	-const controlledOrUncontrolledGetters = (list) =>
	- list.reduce((res, name) => {
	- const camelized = camelCase(name)
	- const toggle = `controlledToggle${camelized}`
	- const controlledName = `controlled${camelized}`
	- const uncontrolledName = `uncontrolled${camelized}`
	- res[name] = function () {
	- return (this.$data[toggle] !== undefined \|\|
	- this.$props[toggle] !== undefined) &&
	- this[toggle]
	- ? this[controlledName]
	- : this[uncontrolledName]
	- }
	- return res
	- }, {})
	-
	-const controlledOrUncontrolledToggle = (obj, name) => {
	- const camelized = camelCase(name)
	- const toggle = `controlledToggle${camelized}`
	- const uncontrolledName = `uncontrolled${camelized}`
	- if (obj[toggle]) {
	- obj[toggle]()
	- } else {
	- obj[uncontrolledName] = !obj[uncontrolledName]
	- }
	-}
	-
	-const controlledOrUncontrolledSet = (obj, name, val) => {
	- const camelized = camelCase(name)
	- const set = `controlledSet${camelized}`
	- const uncontrolledName = `uncontrolled${camelized}`
	- if (obj[set]) {
	- obj[set](val)
	- } else {
	- obj[uncontrolledName] = val
	- }
	-}
	-
	const Status = {
	name: 'Status',
	components: {
	PostStatusForm,
	UserAvatar,
	AvatarList,
	Timeago,
	StatusPopover,
	UserListPopover,
	EmojiReactions,
	StatusContent,
	MentionLink,
	MentionsLine,
	UserPopover,
	UserLink,
	Quote: defineAsyncComponent(() => import('src/components/quote/quote.vue')),
	StatusActionButtons,
	},
	props: {
	statusoid: Object,
	replies: Array,

	expandable: Boolean,
	focused: Boolean,
	- highlight: Boolean,
	compact: Boolean,
	isPreview: Boolean,
	noHeading: Boolean,
	inlineExpanded: Boolean,
	showPinned: Boolean,
	inProfile: Boolean,
	inConversation: Boolean,
	inQuote: Boolean,

	profileUserId: String,
	simpleTree: Boolean,
	showOtherRepliesAsButton: Boolean,
	- dive: Function,
	+ canDive: Boolean,
	ignoreMute: Boolean,

	- controlledThreadDisplayStatus: String,
	- controlledToggleThreadDisplay: Function,
	- controlledShowingTall: Boolean,
	- controlledToggleShowingTall: Function,
	- controlledExpandingSubject: Boolean,
	- controlledToggleExpandingSubject: Function,
	- controlledShowingLongSubject: Boolean,
	- controlledToggleShowingLongSubject: Function,
	- controlledReplying: Boolean,
	- controlledToggleReplying: Function,
	- controlledMediaPlaying: Boolean,
	- controlledSetMediaPlaying: Function,
	+ threadDisplayStatus: String,
	},
	- emits: ['goto', 'toggleExpanded'],
	+ emits: ['goto', 'dive', 'toggleExpanded', 'suspendableStateChange'],
	data() {
	return {
	- uncontrolledReplying: false,
	+ replying: false,
	unmuted: false,
	userExpanded: false,
	- uncontrolledMediaPlaying: [],
	- suspendable: true,
	+ mediaPlaying: new Set(),
	error: null,
	headTailLinks: null,
	}
	},
	computed: {
	- ...controlledOrUncontrolledGetters(['replying', 'mediaPlaying']),
	showReasonMutedThread() {
	return (
	(this.status.thread_muted \|\|
	(this.status.reblog && this.status.reblog.thread_muted)) &&
	!this.inConversation
	)
	},
	allowNonSquareEmoji() {
	return this.mergedConfig.nonSquareEmoji
	},
	repeaterClass() {
	const user = this.statusoid.user
	return highlightClass(user)
	},
	userClass() {
	const user = this.retweet
	? this.statusoid.retweeted_status.user
	: this.statusoid.user
	return highlightClass(user)
	},
	deleted() {
	return this.statusoid.deleted
	},
	repeaterStyle() {
	const user = this.statusoid.user
	return highlightStyle(useUserHighlightStore().get(user.screen_name))
	},
	userStyle() {
	if (this.noHeading) return
	const user = this.retweet
	? this.statusoid.retweeted_status.user
	: this.statusoid.user
	return highlightStyle(useUserHighlightStore().get(user.screen_name))
	},
	userProfileLink() {
	return this.generateUserProfileLink(
	this.status.user.id,
	this.status.user.screen_name,
	)
	},
	replyProfileLink() {
	if (this.isReply) {
	const user = this.$store.getters.findUser(
	this.status.in_reply_to_user_id,
	)
	// FIXME Why user not found sometimes???
	return user ? user.statusnet_profile_url : 'NOT_FOUND'
	}
	},
	retweet() {
	return !!this.statusoid.retweeted_status
	},
	retweeterUser() {
	return this.statusoid.user
	},
	retweeter() {
	return this.statusoid.user.name \|\| this.statusoid.user.screen_name_ui
	},
	retweeterHtml() {
	return this.statusoid.user.name
	},
	retweeterProfileLink() {
	return this.generateUserProfileLink(
	this.statusoid.user.id,
	this.statusoid.user.screen_name,
	)
	},
	status() {
	if (this.retweet) {
	return this.statusoid.retweeted_status
	} else {
	return this.statusoid
	}
	},
	statusFromGlobalRepository() {
	// NOTE: Consider to replace status with statusFromGlobalRepository
	return this.$store.state.statuses.allStatusesObject[this.status.id]
	},
	loggedIn() {
	return !!this.currentUser
	},
	muteFilterHits() {
	return muteFilterHits(
	Object.values(
	useSyncConfigStore().prefsStorage.simple.muteFilters \|\| {},
	),
	this.status,
	)
	},
	botStatus() {
	return this.status.user.actor_type === 'Service'
	},
	showActorTypeIndicator() {
	return !this.hideBotIndication
	},
	sensitiveStatus() {
	return this.status.nsfw
	},
	mentionsLine() {
	if (!this.headTailLinks) return []
	const writtenSet = new Set(
	this.headTailLinks.writtenMentions.map((_) => _.url),
	)
	return this.status.attentions
	.filter((attn) => {
	// no reply user
	return (
	attn.id !== this.status.in_reply_to_user_id &&
	// no self-replies
	attn.statusnet_profile_url !==
	this.status.user.statusnet_profile_url &&
	// don't include if mentions is written
	!writtenSet.has(attn.statusnet_profile_url)
	)
	})
	.map((attn) => ({
	url: attn.statusnet_profile_url,
	content: attn.screen_name,
	userId: attn.id,
	}))
	},
	hasMentionsLine() {
	return this.mentionsLine.length > 0
	},
	muteReasons() {
	return [
	this.userIsMuted ? 'user' : null,
	this.status.thread_muted ? 'thread' : null,
	this.muteFilterHits.length > 0 ? 'filtered' : null,
	this.muteBotStatuses && this.botStatus ? 'bot' : null,
	this.muteSensitiveStatuses && this.sensitiveStatus ? 'nsfw' : null,
	].filter((_) => _)
	},
	muteLocalized() {
	if (this.muteReasons.length === 0) return null
	const mainReason = () => {
	switch (this.muteReasons[0]) {
	case 'user':
	return this.$t('status.muted_user')
	case 'thread':
	return this.$t('status.thread_muted')
	case 'filtered':
	return this.$t(
	'status.muted_filters',
	{
	name: this.muteFilterHits[0].name,
	filterMore: this.muteFilterHits.length - 1,
	},
	this.muteFilterHits.length,
	)
	case 'bot':
	return this.$t('status.bot_muted')
	case 'nsfw':
	return this.$t('status.sensitive_muted')
	}
	}
	if (this.muteReasons.length > 1) {
	return this.$t(
	'status.multi_reason_mute',
	{
	main: mainReason(),
	numReasonsMore: this.muteReasons.length - 1,
	},
	this.muteReasons.length - 1,
	)
	} else {
	return mainReason()
	}
	},
	muted() {
	if (this.ignoreMute) return false
	if (this.statusoid.user.id === this.currentUser.id) return false
	return !this.unmuted && !this.shouldNotMute && this.muteReasons.length > 0
	},
	userIsMuted() {
	if (this.statusoid.user.id === this.currentUser.id) return false
	const { status } = this
	const { reblog } = status
	const relationship = this.$store.getters.relationship(status.user.id)
	const relationshipReblog =
	reblog && this.$store.getters.relationship(reblog.user.id)
	return (
	(status.muted && !status.thread_muted) \|\|
	// Reprööt of a muted post according to BE
	(reblog && reblog.muted && !reblog.thread_muted) \|\|
	// Muted user
	relationship.muting \|\|
	// Muted user of a reprööt
	(relationshipReblog && relationshipReblog.muting)
	)
	},
	shouldNotMute() {
	if (this.ignoreMute) return true
	- if (this.isFocused) return true
	+ if (this.focused) return true
	const { status } = this
	const { reblog } = status
	return (
	((this.inProfile &&
	// Don't mute user's posts on user timeline (except reblogs)
	((!reblog && status.user.id === this.profileUserId) \|\|
	// Same as above but also allow self-reblogs
	(reblog && reblog.user.id === this.profileUserId))) \|\|
	// Don't mute statuses in muted conversation when said conversation is opened
	(this.inConversation && status.thread_muted)) &&
	// No excuses if post has muted words
	!this.muteFilterHits.length > 0
	)
	},
	hideMutedUsers() {
	return this.mergedConfig.hideMutedPosts
	},
	hideMutedThreads() {
	return this.mergedConfig.hideMutedThreads
	},
	hideFilteredStatuses() {
	return this.mergedConfig.hideFilteredStatuses
	},
	hideWordFilteredPosts() {
	return this.mergedConfig.hideWordFilteredPosts
	},
	hideStatus() {
	return (
	!this.shouldNotMute &&
	((this.muted && this.hideFilteredStatuses) \|\|
	(this.userIsMuted && this.hideMutedUsers) \|\|
	(this.status.thread_muted && this.hideMutedThreads) \|\|
	(this.muteFilterHits.length > 0 && this.hideWordFilteredPosts) \|\|
	this.muteFilterHits.some((x) => x.hide))
	)
	},
	- isFocused() {
	- // retweet or root of an expanded conversation
	- if (this.focused) {
	- return true
	- } else if (!this.inConversation) {
	- return false
	- }
	- // use conversation highlight only when in conversation
	- return this.status.id === this.highlight
	- },
	isReply() {
	return !!(
	this.status.in_reply_to_status_id && this.status.in_reply_to_user_id
	)
	},
	replyToName() {
	if (this.status.in_reply_to_screen_name) {
	return this.status.in_reply_to_screen_name
	} else {
	const user = this.$store.getters.findUser(
	this.status.in_reply_to_user_id,
	)
	return user && user.screen_name_ui
	}
	},
	replySubject() {
	if (!this.status.summary) return ''
	const decodedSummary = ldUnescape(this.status.summary)
	const behavior = this.mergedConfig.subjectLineBehavior
	const startsWithRe = decodedSummary.match(/^re[: ]/i)
	if ((behavior !== 'noop' && startsWithRe) \|\| behavior === 'masto') {
	return decodedSummary
	} else if (behavior === 'email') {
	return 're: '.concat(decodedSummary)
	} else if (behavior === 'noop') {
	return ''
	}
	},
	combinedFavsAndRepeatsUsers() {
	// Use the status from the global status repository since favs and repeats are saved in it
	const combinedUsers = [].concat(
	this.statusFromGlobalRepository.favoritedBy,
	this.statusFromGlobalRepository.rebloggedBy,
	)
	return uniqBy(combinedUsers, 'id')
	},
	tags() {
	return this.status.tags
	.filter((tagObj) => Object.hasOwn(tagObj, 'name'))
	.map((tagObj) => tagObj.name)
	.join(' ')
	},
	hidePostStats() {
	return this.mergedConfig.hidePostStats
	},
	shouldDisplayFavsAndRepeats() {
	return (
	!this.hidePostStats &&
	- this.isFocused &&
	+ this.focused &&
	(this.combinedFavsAndRepeatsUsers.length > 0 \|\|
	this.statusFromGlobalRepository.quotes_count)
	)
	},
	muteBotStatuses() {
	return this.mergedConfig.muteBotStatuses
	},
	muteSensitiveStatuses() {
	return this.mergedConfig.muteSensitiveStatuses
	},
	hideBotIndication() {
	return this.mergedConfig.hideBotIndication
	},
	currentUser() {
	return this.$store.state.users.currentUser
	},
	mergedConfig() {
	return useMergedConfigStore().mergedConfig
	},
	isSuspendable() {
	- return !this.replying && this.mediaPlaying.length === 0
	+ return !this.replying && this.mediaPlaying.size === 0
	},
	inThreadForest() {
	- return !!this.controlledThreadDisplayStatus
	+ return !!this.threadDisplayStatus
	},
	threadShowing() {
	- return this.controlledThreadDisplayStatus === 'showing'
	+ return this.threadDisplayStatus === 'showing'
	},
	visibilityLocalized() {
	return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
	},
	isEdited() {
	return this.status.edited_at !== null
	},
	editingAvailable() {
	return useInstanceCapabilitiesStore().editingAvailable
	},
	quoteId() {
	return this.status.quote_id
	},
	quoteUrl() {
	return this.status.quote_url
	},
	quoteVisible() {
	return this.status.quote_visible
	},
	quoteExpanded() {
	return !this.inQuote
	},
	scrobblePresent() {
	if (this.mergedConfig.hideScrobbles) return false
	if (!this.status.user?.latestScrobble) return false
	const value = this.mergedConfig.hideScrobblesAfter.match(/\d+/gs)[0]
	const unit = this.mergedConfig.hideScrobblesAfter.match(/\D+/gs)[0]
	let multiplier = 60 * 1000 // minutes is smallest unit
	switch (unit) {
	case 'm':
	break
	case 'h':
	multiplier *= 60 // hour
	break
	case 'd':
	multiplier *= 60 // hour
	multiplier *= 24 // day
	break
	}
	const maxAge = Number(value) * multiplier
	const createdAt = Date.parse(this.status.user.latestScrobble.created_at)
	const age = Date.now() - createdAt
	if (age > maxAge) return false
	return this.status.user.latestScrobble.artist
	},
	scrobble() {
	return this.status.user?.latestScrobble
	},
	},
	methods: {
	visibilityIcon(visibility) {
	switch (visibility) {
	case 'private':
	return 'lock'
	case 'unlisted':
	return 'lock-open'
	case 'direct':
	return 'envelope'
	case 'local':
	return 'igloo'
	default:
	return 'globe'
	}
	},
	showError(error) {
	this.error = error
	},
	clearError() {
	this.error = undefined
	},
	- toggleReplying() {
	+ toggleReplyForm() {
	if (this.replying) {
	+ // This emits 'close-accepted' if successful
	+ // which in turn callse closeReply()
	this.$refs.postStatusForm.requestClose()
	} else {
	- this.doToggleReplying()
	+ this.replying = true
	}
	},
	- doToggleReplying() {
	- controlledOrUncontrolledToggle(this, 'replying')
	+ closeReplyForm() {
	+ this.replying = false
	},
	gotoOriginal(id) {
	if (this.inConversation) {
	this.$emit('goto', id)
	}
	},
	toggleExpanded() {
	this.$emit('toggleExpanded')
	},
	toggleMute() {
	this.unmuted = !this.unmuted
	},
	toggleUserExpanded() {
	this.userExpanded = !this.userExpanded
	},
	generateUserProfileLink(id, name) {
	return generateProfileLink(
	id,
	name,
	useInstanceStore().restrictedNicknames,
	)
	},
	addMediaPlaying(id) {
	- controlledOrUncontrolledSet(
	- this,
	- 'mediaPlaying',
	- this.mediaPlaying.concat(id),
	- )
	+ this.mediaPlaying.add(id)
	},
	removeMediaPlaying(id) {
	- controlledOrUncontrolledSet(
	- this,
	- 'mediaPlaying',
	- this.mediaPlaying.filter((mediaId) => mediaId !== id),
	- )
	+ this.mediaPlaying.delete(id)
	},
	setHeadTailLinks(headTailLinks) {
	this.headTailLinks = headTailLinks
	},
	toggleThreadDisplay() {
	this.controlledToggleThreadDisplay()
	},
	- scrollIfHighlighted(highlightId) {
	+ scrollIfFocused(focusedId) {
	if (this.$el.getBoundingClientRect == null) return
	- const id = highlightId
	+ const id = focusedId
	if (this.status.id === id) {
	const rect = this.$el.getBoundingClientRect()
	if (rect.top < 100) {
	// Post is above screen, match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.height >= window.innerHeight - 50) {
	// Post we want to see is taller than screen so match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.bottom > window.innerHeight - 50) {
	// Post is below screen, match its bottom to screen bottom
	window.scrollBy(0, rect.bottom - window.innerHeight + 50)
	}
	}
	},
	},
	watch: {
	- highlight: function (id) {
	- this.scrollIfHighlighted(id)
	+ focused: function (id) {
	+ this.scrollIfFocused(id)
	},
	'status.repeat_num': function (num) {
	// refetch repeats when repeat_num is changed in any way
	if (
	- this.isFocused &&
	+ this.focused &&
	this.statusFromGlobalRepository.rebloggedBy &&
	this.statusFromGlobalRepository.rebloggedBy.length !== num
	) {
	this.$store.dispatch('fetchRepeats', this.status.id)
	}
	},
	'status.fave_num': function (num) {
	// refetch favs when fave_num is changed in any way
	if (
	- this.isFocused &&
	+ this.focused &&
	this.statusFromGlobalRepository.favoritedBy &&
	this.statusFromGlobalRepository.favoritedBy.length !== num
	) {
	this.$store.dispatch('fetchFavs', this.status.id)
	}
	},
	- isSuspendable: function (val) {
	- this.suspendable = val
	+ isSuspendable: function (suspend) {
	+ this.$emit('suspendableStateChange', { id: this.statusoid.id, suspend })
	},
	},
	}

	export default Status
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index 5cd2de3ab5..4dcc1e07d9 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,569 +1,562 @@
	<template>
	<div
	v-if="!hideStatus"
	ref="root"
	class="Status"
	- :class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
	+ :class="[{ '-focused': focused }, { '-conversation': inlineExpanded }]"
	>
	<div
	v-if="error"
	class="alert error"
	>
	{{ error }}
	<button
	class="fa-scale-110 fa-old-padding"
	type="button"
	@click="clearError"
	>
	<FAIcon icon="times" />
	</button>
	</div>
	<template v-if="muted && !isPreview">
	<div class="status-container muted">
	<small class="status-username">
	<FAIcon
	v-if="muted && retweet"
	class="fa-scale-110 fa-old-padding repeat-icon"
	icon="retweet"
	/>
	<user-link
	:user="status.user"
	:at="false"
	/>
	</small>
	<small class="mute-reason">
	{{ muteLocalized }}
	</small>
	<button
	class="unmute button-unstyled"
	@click.prevent="toggleMute"
	>
	<FAIcon
	icon="eye-slash"
	class="fa-scale-110 fa-old-padding"
	/>
	</button>
	</div>
	</template>
	<template v-else>
	<div
	v-if="retweet && !noHeading && !inConversation"
	:class="[repeaterClass, { highlighted: repeaterStyle }]"
	:style="[repeaterStyle]"
	class="status-container repeat-info"
	>
	<UserAvatar
	v-if="retweet"
	class="left-side repeater-avatar"
	:show-actor-type-indicator="showActorTypeIndicator"
	:user="statusoid.user"
	/>
	<div class="right-side faint">
	<bdi
	class="status-username repeater-name"
	:title="retweeter"
	>
	<router-link
	v-if="retweeterHtml"
	:to="retweeterProfileLink"
	>
	<RichContent
	:html="retweeterHtml"
	:emoji="retweeterUser.emoji"
	:allow-non-square-emoji="allowNonSquareEmoji"
	:is-local="retweeterUser.is_local"
	/>
	</router-link>
	<router-link
	v-else
	:to="retweeterProfileLink"
	>{{ retweeter }}</router-link>
	</bdi>
	<div class="repeat-label">
	<FAIcon
	icon="retweet"
	class="repeat-icon"
	:title="$t('tool_tip.repeat')"
	/>
	{{ $t('timeline.repeated') }}
	</div>
	</div>
	</div>

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

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

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

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

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

	<Quote
	:status-id="quoteId"
	:status-url="quoteUrl"
	:status-visible="quoteVisible"
	:initially-expanded="quoteExpanded"
	/>

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

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

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

	<StatusActionButtons
	v-if="!noHeading && !isPreview"
	:status="status"
	:replying="replying"
	- @toggle-replying="toggleReplying"
	+ @toggle-replying="toggleReplyForm"
	/>
	</div>
	</div>
	<div
	v-else
	class="gravestone"
	>
	<div class="left-side">
	<UserAvatar
	class="post-avatar"
	:compact="compact"
	:show-actor-type-indicator="showActorTypeIndicator"
	/>
	</div>
	<div class="right-side">
	<div class="deleted-text">
	{{ $t('status.status_deleted') }}
	</div>
	</div>
	</div>
	<div
	v-if="replying"
	class="status-container reply-form"
	>
	<PostStatusForm
	ref="postStatusForm"
	class="reply-body"
	:closeable="true"
	:reply-to="status.id"
	:attentions="status.attentions"
	:replied-user="status.user"
	:copy-message-scope="status.visibility"
	:subject="replySubject"
	- @posted="doToggleReplying"
	- @draft-done="doToggleReplying"
	- @can-close="doToggleReplying"
	+ @posted="closeReplyForm"
	+ @draft-done="closeReplyForm"
	+ @close-accepted="closeReplyForm"
	/>
	</div>
	</template>
	</div>
	</template>

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

	<style src="./status.scss" lang="scss"></style>
	diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js
	index e3cdf1fb10..f3dd13e43e 100644
	--- a/src/components/status_action_buttons/action_button.js
	+++ b/src/components/status_action_buttons/action_button.js
	@@ -1,170 +1,164 @@
	-import { defineAsyncComponent } from 'vue'
	-
	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 { 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,
	faExternalLinkAlt,
	faEye,
	faEyeSlash,
	faHistory,
	faMinus,
	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,
	faShareAlt,
	faExternalLinkAlt,
	faHistory,
	)

	export default {
	props: [
	'button',
	'status',
	'extra',
	'status',
	'funcArg',
	'getClass',
	'getComponent',
	'doAction',
	'outerClose',
	],
	components: {
	- StatusBookmarkFolderMenu: defineAsyncComponent(
	- () =>
	- import(
	- 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
	- ),
	- ),
	+ 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 this.$store.getters.relationship(this.status.user.id).muting
	},
	threadIsMuted() {
	return this.status.thread_muted
	},
	hideCustomEmoji() {
	return !useInstanceCapabilitiesStore()
	.pleromaCustomEmojiReactionsAvailable
	},
	hidePostStats() {
	return useMergedConfigStore().mergedConfig.hidePostStats
	},
	buttonInnerClass() {
	return [
	this.button.name + '-button',
	{
	'main-button': this.extra,
	'button-unstyled': !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 && existingReaction.me) {
	this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
	} else {
	this.$store.dispatch('reactWithEmoji', { id: 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)
	close()
	}
	},
	},
	}
	diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
	index cdd43a0246..7a46a1a3bc 100644
	--- a/src/components/status_body/status_body.js
	+++ b/src/components/status_body/status_body.js
	@@ -1,161 +1,184 @@
	import { mapState } from 'pinia'

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

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faFile,
	faImage,
	faLink,
	faMusic,
	faPollH,
	} from '@fortawesome/free-solid-svg-icons'

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

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

	export default StatusBody
	diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
	index ff35bde58f..9954663e78 100644
	--- a/src/components/status_body/status_body.scss
	+++ b/src/components/status_body/status_body.scss
	@@ -1,192 +1,196 @@
	.StatusBody {
	display: flex;
	flex-direction: column;

	.emoji {
	--_still_image-label-scale: 0.5;
	}

	.attachments {
	margin-top: 0.5em;
	}

	& .text,
	& .summary {
	white-space: pre-wrap;
	overflow-wrap: break-word;
	text-wrap: pretty;
	line-height: var(--post-line-height);
	}

	.summary {
	display: block;
	font-style: italic;
	padding-bottom: 0.5em;
	}

	.text {
	&.-single-line {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	height: 1.4em;
	}
	}

	.summary-wrapper {
	margin-bottom: 0.5em;
	border-style: solid;
	border-width: 0 0 1px;
	border-color: var(--border);
	flex-grow: 0;

	&.-tall {
	position: relative;

	.summary {
	max-height: 2em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	}
	}
	}

	.text-wrapper {
	+ position: relative;
	text-overflow: ellipsis;
	overflow-wrap: break-word;
	overflow: hidden;
	display: flex;
	flex-flow: column nowrap;

	&.-tall-status {
	- position: relative;
	- height: 16em;
	z-index: 1;

	+ &:not(.-hidden) {
	+ height: 16em;
	+ }
	+
	.media-body {
	min-height: 0;
	mask:
	linear-gradient(to top, white, transparent) bottom/100% 8em no-repeat,
	linear-gradient(to top, white, white);

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

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

	&.-expanded {
	overflow: visible;
	}
	}

	& .tall-status-hider,
	& .tall-subject-hider,
	& .status-unhider,
	& .cw-status-hider {
	display: inline-block;
	overflow-wrap: break-word;
	text-wrap: pretty;
	width: 100%;
	text-align: center;
	+ margin: 0.1em 0;
	}

	.status-unhider {
	margin-top: auto;
	position: sticky;
	bottom: 0;
	padding-bottom: 1em;
	}

	- .tall-status-hider {
	- position: absolute;
	- height: 5em;
	- margin-top: 10em;
	- line-height: 8em;
	- z-index: 2;
	- }
	-
	.tall-subject-hider {
	// position: absolute;
	padding-bottom: 0.5em;
	+
	+ &:not(.cw-status-hider) {
	+ position: absolute;
	+ margin-top: 10em;
	+ height: 5em;
	+ line-height: 8em;
	+ z-index: 2;
	+ }
	}

	& .status-unhider,
	& .cw-status-hider {
	overflow-wrap: break-word;
	text-wrap: pretty;

	svg {
	color: inherit;
	}
	}

	.toggle-button {
	padding: 0.5em;
	}

	&.-compact {
	align-items: start;
	flex-direction: row;

	& .body,
	& .attachments {
	max-height: 3.25em;
	}

	.body {
	overflow: hidden;
	white-space: normal;
	min-width: 5em;
	flex: 5 1 auto;
	mask-size: auto 3.5em, auto auto;
	mask-position: 0 0, 0 0;
	mask-repeat: repeat-x, repeat;
	mask-image: linear-gradient(to bottom, white 2em, transparent 3em);

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

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

	.attachments {
	margin-top: 0;
	flex: 1 1 0;
	min-width: 5em;
	height: 100%;
	margin-left: 0.5em;
	}

	.summary-wrapper {
	.summary::after {
	content: ": ";
	}

	line-height: inherit;
	margin: 0;
	border: none;
	}

	.text-wrapper {
	display: inline-block;
	width: 100%;
	}
	}
	}
	diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
	index f724f24139..b611d69b89 100644
	--- a/src/components/status_body/status_body.vue
	+++ b/src/components/status_body/status_body.vue
	@@ -1,73 +1,72 @@
	<template>
	<div
	class="StatusBody"
	:class="{ '-compact': compact }"
	>
	<div class="body">
	<div
	- v-if="status.summary_raw_html"
	+ v-if="hasSubject"
	class="summary-wrapper"
	- :class="{ '-tall': (longSubject && !showingLongSubject) }"
	+ :class="{ '-tall': (hasLongSubject && !showingLongSubject) }"
	>
	<RichContent
	class="media-body summary"
	:faint="compact"
	:html="status.summary_raw_html"
	:emoji="status.emojis"
	:is-local="status.isLocal"
	:allow-non-square-emoji="allowNonSquareEmoji"
	/>
	<button
	- v-show="longSubject && showingLongSubject"
	+ v-show="hasLongSubject && showingLongSubject"
	class="button-unstyled -link tall-subject-hider"
	@click.prevent="toggleShowingLongSubject"
	>
	{{ $t("status.hide_full_subject") }}
	</button>
	<button
	- v-show="longSubject && !showingLongSubject"
	+ v-show="hasLongSubject && !showingLongSubject"
	class="button-unstyled -link tall-subject-hider"
	@click.prevent="toggleShowingLongSubject"
	>
	{{ $t("status.show_full_subject") }}
	</button>
	</div>
	<div
	class="text-wrapper"
	- :class="{'-tall-status': hideTallStatus, '-expanded': showingMore}"
	+ :class="{'-tall-status': hideTallStatus, '-hidden': shouldHide, '-expanded': showingMore}"
	>
	<RichContent
	- v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)"
	+ v-if="!(singleLine && hasSubject) && !shouldHide"
	:class="{ '-single-line': singleLine }"
	class="text media-body"
	:html="status.raw_html"
	:collapse="collapse"
	:emoji="status.emojis"
	:handle-links="true"
	:faint="compact"
	:greentext="mergedConfig.greentext"
	:attentions="status.attentions"
	:is-local="status.is_local"
	:allow-non-square-emoji="allowNonSquareEmoji"
	@parse-ready="onParseReady"
	/>
	<div
	- v-show="shouldShowToggle"
	+ v-show="shouldShowExpandToggle"
	:class="toggleButtonClasses"
	>
	<button
	class="btn button-default toggle-button"
	- :class="{ '-focused': focused }"
	:aria-expanded="showingMore"
	@click.prevent="toggleShowMore"
	>
	{{ toggleText }}
	</button>
	</div>
	</div>
	</div>
	<slot v-if="!hideSubjectStatus" />
	</div>
	</template>
	<script src="./status_body.js"></script>
	<style lang="scss" src="./status_body.scss" />
	diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
	index 2186498ef7..209abee99e 100644
	--- a/src/components/status_content/status_content.js
	+++ b/src/components/status_content/status_content.js
	@@ -1,159 +1,110 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

	import Attachment from 'src/components/attachment/attachment.vue'
	import Gallery from 'src/components/gallery/gallery.vue'
	import LinkPreview from 'src/components/link-preview/link-preview.vue'
	import Poll from 'src/components/poll/poll.vue'
	import StatusBody from 'src/components/status_body/status_body.vue'

	import { useMediaViewerStore } from 'src/stores/media_viewer.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faCircleNotch,
	faFile,
	faImage,
	faLink,
	faMusic,
	faPollH,
	} from '@fortawesome/free-solid-svg-icons'

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

	-const camelCase = (name) => name.charAt(0).toUpperCase() + name.slice(1)
	-
	-const controlledOrUncontrolledGetters = (list) =>
	- list.reduce((res, name) => {
	- const camelized = camelCase(name)
	- const toggle = `controlledToggle${camelized}`
	- const controlledName = `controlled${camelized}`
	- const uncontrolledName = `uncontrolled${camelized}`
	- res[name] = function () {
	- return (this.$data[toggle] !== undefined \|\|
	- this.$props[toggle] !== undefined) &&
	- this[toggle]
	- ? this[controlledName]
	- : this[uncontrolledName]
	- }
	- return res
	- }, {})
	-
	-const controlledOrUncontrolledToggle = (obj, name) => {
	- const camelized = camelCase(name)
	- const toggle = `controlledToggle${camelized}`
	- const uncontrolledName = `uncontrolled${camelized}`
	- if (obj[toggle]) {
	- obj[toggle]()
	- } else {
	- obj[uncontrolledName] = !obj[uncontrolledName]
	- }
	-}
	-
	const StatusContent = {
	name: 'StatusContent',
	- props: [
	- 'status',
	- 'compact',
	- 'collapse',
	- 'focused',
	- 'noHeading',
	- 'fullContent',
	- 'singleLine',
	- 'controlledShowingTall',
	- 'controlledExpandingSubject',
	- 'controlledToggleShowingTall',
	- 'controlledToggleExpandingSubject',
	- 'controlledShowingLongSubject',
	- 'controlledToggleShowingLongSubject',
	- ],
	- emits: ['parseReady', 'mediaplay', 'mediapause'],
	- data() {
	- return {
	- uncontrolledShowingTall:
	- this.fullContent \|\| (this.inConversation && this.focused),
	- uncontrolledShowingLongSubject: false,
	- // not as computed because it sets the initial state which will be changed later
	- uncontrolledExpandingSubject:
	- !useMergedConfigStore().mergedConfig.collapseMessageWithSubject,
	- }
	+ props: {
	+ status: {
	+ // Main thing
	+ type: Object,
	+ required: true,
	+ },
	+ compact: {
	+ // Resizes emoji and minimizes vertical space used
	+ // Primarily used for showing status in react notifications
	+ type: Boolean,
	+ default: false,
	+ },
	+ collapse: {
	+ // replaces newlines with spaces
	+ type: Boolean,
	+ default: false,
	+ },
	+ singleLine: {
	+ // Show entire thing (subject and content) in a single line
	+ // Primarily used in chats
	+ type: Boolean,
	+ default: false,
	+ },
	+ inConversation: {
	+ // Whether status content is being shown in an (open) conversation
	+ // Used to control whether to display attachments or not
	+ type: Boolean,
	+ default: false,
	+ },
	},
	+ emits: ['parseReady', 'mediaplay', 'mediapause'],
	computed: {
	- ...controlledOrUncontrolledGetters([
	- 'showingTall',
	- 'expandingSubject',
	- 'showingLongSubject',
	- ]),
	statusCard() {
	if (!this.status.card) return null
	return this.status.card.url === this.status.quote_url
	? null
	: this.status.card
	},
	hideAttachments() {
	return (
	- (this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	- (this.mergedConfig.hideAttachmentsInConv && this.inConversation)
	+ !this.fullContent &&
	+ ((this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	+ (this.mergedConfig.hideAttachmentsInConv && this.inConversation))
	)
	},
	- nsfwClickthrough() {
	- if (!this.status.nsfw) {
	- return false
	- }
	- if (this.status.summary && this.localCollapseSubjectDefault) {
	- return false
	- }
	- return true
	- },
	- localCollapseSubjectDefault() {
	- return this.mergedConfig.collapseMessageWithSubject
	- },
	attachmentSize() {
	if (this.compact) {
	return 'small'
	} else if (
	(this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	(this.mergedConfig.hideAttachmentsInConv && this.inConversation) \|\|
	this.status.attachments.length > this.maxThumbnails
	) {
	return 'hide'
	}
	return 'normal'
	},
	maxThumbnails() {
	return this.mergedConfig.maxThumbnails
	},
	...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
	...mapState({
	currentUser: (state) => state.users.currentUser,
	}),
	},
	components: {
	Attachment,
	Poll,
	Gallery,
	LinkPreview,
	StatusBody,
	},
	methods: {
	- toggleShowingTall() {
	- controlledOrUncontrolledToggle(this, 'showingTall')
	- },
	- toggleExpandingSubject() {
	- controlledOrUncontrolledToggle(this, 'expandingSubject')
	- },
	- toggleShowingLongSubject() {
	- controlledOrUncontrolledToggle(this, 'showingLongSubject')
	- },
	setMedia() {
	const attachments =
	this.attachmentSize === 'hide'
	? this.status.attachments
	: this.galleryAttachments
	return () => useMediaViewerStore().setMedia(attachments)
	},
	},
	}

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

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

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

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

	<script src="./status_content.js"></script>
	<style lang="scss">
	.StatusContent {
	flex: 1;
	min-width: 0;

	.poll-icon {
	margin: 0.5em;
	}
	}
	</style>
	diff --git a/src/components/still-image/still-image-emoji-popover.js b/src/components/still-image/still-image-emoji-popover.js
	index 92cc209045..6db72c49f3 100644
	--- a/src/components/still-image/still-image-emoji-popover.js
	+++ b/src/components/still-image/still-image-emoji-popover.js
	@@ -1,73 +1,72 @@
	import Popover from 'components/popover/popover.vue'
	import SelectComponent from 'components/select/select.vue'
	import { mapState } from 'pinia'

	import { useAdminSettingsStore } from 'src/stores/admin_settings'
	import { useEmojiStore } from 'src/stores/emoji'
	import { useInterfaceStore } from 'src/stores/interface'

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

	this.$refs.emojiPopover.hidePopover()
	this.packName = ''
	})
	+ .catch((e) => {
	+ this.displayError(e)
	+ return
	+ })
	},

	fetchEmojiPacksIfAdmin() {
	useEmojiStore()
	.getAdminPacksLocal()
	.then(() => {
	this.$refs.emojiPopover.updateStyles()
	})
	},
	},
	}
	diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
	index ad0c0039ba..75232a259f 100644
	--- a/src/components/thread_tree/thread_tree.js
	+++ b/src/components/thread_tree/thread_tree.js
	@@ -1,98 +1,62 @@
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faAngleDoubleDown,
	faAngleDoubleRight,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faAngleDoubleDown, faAngleDoubleRight)

	const ThreadTree = {
	components: {},
	name: 'ThreadTree',
	props: {
	depth: Number,
	status: Object,
	inProfile: Boolean,
	conversation: Array,
	collapsable: Boolean,
	isExpanded: Boolean,
	pinnedStatusIdsObject: Object,
	profileUserId: String,

	- isFocusedFunction: Function,
	- highlight: String,
	+ focused: String,
	getReplies: Function,
	- setHighlight: Function,
	toggleExpanded: Function,

	simple: Boolean,
	- // to control display of the whole thread forest
	- toggleThreadDisplay: Function,
	+ canDive: Boolean,
	threadDisplayStatus: Object,
	showThreadRecursively: Function,
	totalReplyCount: Object,
	totalReplyDepth: Object,
	- statusContentProperties: Object,
	- setStatusContentProperty: Function,
	- toggleStatusContentProperty: Function,
	- dive: Function,
	},
	+ emits: ['suspendableStateChange', 'goto', 'dive'],
	computed: {
	- suspendable() {
	- const selfSuspendable = this.$refs.statusComponent
	- ? this.$refs.statusComponent.suspendable
	- : true
	- if (this.$refs.childComponent) {
	- return (
	- selfSuspendable &&
	- this.$refs.childComponent.every((s) => s.suspendable)
	- )
	- }
	- return selfSuspendable
	- },
	reverseLookupTable() {
	return this.conversation.reduce(
	(table, status, index) => {
	table[status.id] = index
	return table
	},
	{
	/* no-op */
	},
	)
	},
	currentReplies() {
	return this.getReplies(this.status.id).map(({ id }) =>
	this.statusById(id),
	)
	},
	threadShowing() {
	return this.threadDisplayStatus[this.status.id] === 'showing'
	},
	- currentProp() {
	- return this.statusContentProperties[this.status.id]
	- },
	},
	methods: {
	statusById(id) {
	return this.conversation[this.reverseLookupTable[id]]
	},
	- collapseThread() {
	- /* no-op */
	- },
	- showThread() {
	- /* no-op */
	- },
	- showAllSubthreads() {
	- /* no-op */
	- },
	- toggleCurrentProp(name) {
	- this.toggleStatusContentProperty(this.status.id, name)
	- },
	- setCurrentProp(name) {
	- this.setStatusContentProperty(this.status.id, name)
	- },
	},
	}

	export default ThreadTree
	diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
	index 4ffe463feb..556858ad7a 100644
	--- a/src/components/thread_tree/thread_tree.vue
	+++ b/src/components/thread_tree/thread_tree.vue
	@@ -1,135 +1,122 @@
	<template>
	<article class="thread-tree">
	- <status
	+ <Status
	:key="status.id"
	ref="statusComponent"
	- :inline-expanded="collapsable && isExpanded"
	:statusoid="status"
	+ :replies="getReplies(status.id)"
	+ :inline-expanded="collapsable && isExpanded"
	:expandable="!isExpanded"
	:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
	- :focused="isFocusedFunction(status.id)"
	:in-conversation="isExpanded"
	- :highlight="highlight"
	- :replies="getReplies(status.id)"
	+ :focused="focused === status.id \|\| focused === status.retweeted_status?.id"
	:in-profile="inProfile"
	:profile-user-id="profileUserId"
	class="conversation-status conversation-status-treeview status-fadein panel-body"

	:simple-tree="simple"
	- :controlled-thread-display-status="threadDisplayStatus[status.id]"
	- :controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"
	-
	- :controlled-showing-tall="currentProp.showingTall"
	- :controlled-expanding-subject="currentProp.expandingSubject"
	- :controlled-showing-long-subject="currentProp.showingLongSubject"
	- :controlled-replying="currentProp.replying"
	- :controlled-media-playing="currentProp.mediaPlaying"
	- :controlled-toggle-showing-tall="() => toggleCurrentProp('showingTall')"
	- :controlled-toggle-expanding-subject="() => toggleCurrentProp('expandingSubject')"
	- :controlled-toggle-showing-long-subject="() => toggleCurrentProp('showingLongSubject')"
	- :controlled-toggle-replying="() => toggleCurrentProp('replying')"
	- :controlled-set-media-playing="(newVal) => setCurrentProp('mediaPlaying', newVal)"
	- :dive="dive ? () => dive(status.id) : undefined"
	+ :thread-display-status="threadDisplayStatus[status.id]"
	+ :can-dive="canDive"

	- @goto="setHighlight"
	+ @dive="$emit('dive', status.id)"
	+ @goto="$emit('goto', status.id)"
	@toggle-expanded="toggleExpanded"
	+ @suspendable-state-change="e => $emit('suspendableStateChange', e)"
	/>
	<div
	- v-if="currentReplies.length && threadShowing"
	+ v-if="currentReplies.length > 0 && threadShowing"
	class="thread-tree-replies"
	>
	- <thread-tree
	+ <ThreadTree
	v-for="replyStatus in currentReplies"
	:key="replyStatus.id"
	ref="childComponent"
	:depth="depth + 1"
	:status="replyStatus"

	:in-profile="inProfile"
	:conversation="conversation"
	:collapsable="collapsable"
	:is-expanded="isExpanded"
	:pinned-status-ids-object="pinnedStatusIdsObject"
	:profile-user-id="profileUserId"

	- :is-focused-function="isFocusedFunction"
	:get-replies="getReplies"
	- :highlight="highlight"
	- :set-highlight="setHighlight"
	+ :focused="focused"
	:toggle-expanded="toggleExpanded"

	:simple="simple"
	- :toggle-thread-display="toggleThreadDisplay"
	:thread-display-status="threadDisplayStatus"
	:show-thread-recursively="showThreadRecursively"
	:total-reply-count="totalReplyCount"
	:total-reply-depth="totalReplyDepth"
	- :status-content-properties="statusContentProperties"
	- :set-status-content-property="setStatusContentProperty"
	- :toggle-status-content-property="toggleStatusContentProperty"
	- :dive="dive"
	+
	+ :can-dive="canDive"
	+ @goto="(e) => $emit('goto', e)"
	+ @dive="(e) => $emit('dive', e)"
	+ @suspendable-state-change="e => $emit('suspendableStateChange', e)"
	/>
	</div>
	<div
	v-if="currentReplies.length && !threadShowing"
	class="thread-tree-replies thread-tree-replies-hidden"
	>
	<i18n-t
	v-if="simple"
	scope="global"
	tag="button"
	keypath="status.thread_follow_with_icon"
	class="button-unstyled -link thread-tree-show-replies-button"
	- @click.prevent="dive(status.id)"
	+ @click.prevent="$emit('dive', status.id)"
	>
	<template #icon>
	<FAIcon
	icon="angle-double-right"
	/>
	</template>
	<template #text>
	<span>
	{{ $t('status.thread_follow', { numStatus: totalReplyCount[status.id] }, totalReplyCount[status.id]) }}
	</span>
	</template>
	</i18n-t>
	<i18n-t
	v-else
	scope="global"
	tag="button"
	keypath="status.thread_show_full_with_icon"
	class="button-unstyled -link thread-tree-show-replies-button"
	@click.prevent="showThreadRecursively(status.id)"
	>
	<template #icon>
	<FAIcon
	icon="angle-double-down"
	/>
	</template>
	<template #text>
	<span>
	{{ $t('status.thread_show_full', { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }, totalReplyCount[status.id]) }}
	</span>
	</template>
	</i18n-t>
	</div>
	</article>
	</template>

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

	<style lang="scss">
	.thread-tree-replies {
	margin-left: var(--status-margin);
	border-left: 2px solid var(--border);
	}

	.thread-tree-replies-hidden {
	padding: var(--status-margin);

	/* Make the button stretch along the whole row */
	display: flex;
	align-items: stretch;
	flex-direction: column;
	}
	</style>
	diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
	index 81dad3bd39..287934657a 100644
	--- a/src/components/timeline/timeline.vue
	+++ b/src/components/timeline/timeline.vue
	@@ -1,143 +1,143 @@
	<template>
	<div :class="['Timeline', classes.root]">
	<div
	v-if="!embedded"
	:class="classes.header"
	>
	<TimelineMenu
	v-if="!embedded"
	:timeline-name="timelineName"
	/>
	<ScrollTopButton />
	<template v-if="mobileLayout">
	<div
	v-if="showLoadButton"
	class="rightside-button"
	>
	<button
	class="button-unstyled loadmore-button"
	:title="loadButtonString"
	@click.prevent="showNewStatuses"
	>
	<FAIcon
	fixed-width
	icon="circle-plus"
	/>
	<div class="badge -counter">
	{{ mobileLoadButtonString }}
	</div>
	</button>
	</div>
	<div
	v-else
	class="loadmore-text faint veryfaint rightside-icon"
	:title="$t('timeline.up_to_date')"
	:aria-disabled="true"
	@click.prevent
	>
	<FAIcon
	fixed-width
	icon="check"
	/>
	</div>
	</template>
	<template v-else>
	<button
	v-if="showLoadButton"
	class="button-default loadmore-button"
	@click.prevent="showNewStatuses"
	>
	{{ loadButtonString }}
	</button>
	<div
	v-else
	class="loadmore-text faint"
	@click.prevent
	>
	{{ $t('timeline.up_to_date') }}
	</div>
	</template>
	<QuickFilterSettings
	v-if="!mobileLayout"
	class="rightside-button"
	/>
	<QuickViewSettings
	class="rightside-button"
	/>
	</div>
	<div :class="classes.body">
	<div
	ref="timeline"
	class="timeline"
	role="feed"
	>
	- <conversation
	+ <Conversation
	v-for="statusId in filteredPinnedStatusIds"
	:key="statusId + '-pinned'"
	role="listitem"
	class="status-fadein"
	:status-id="statusId"
	- :collapsable="true"
	:pinned-status-ids-object="pinnedStatusIdsObject"
	:in-profile="inProfile"
	:profile-user-id="userId"
	+ collapsable
	/>
	- <conversation
	+ <Conversation
	v-for="status in filteredVisibleStatuses"
	:key="status.id"
	role="listitem"
	class="status-fadein"
	:status-id="status.id"
	- :collapsable="true"
	:in-profile="inProfile"
	:profile-user-id="userId"
	:virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.includes(status.id)"
	+ collapsable
	/>
	</div>
	</div>
	<div :class="classes.footer">
	<teleport
	:to="footerSlipgate"
	:disabled="!embedded \|\| !footerSlipgate"
	>
	<div
	v-if="count===0"
	class="new-status-notification text-center faint"
	>
	{{ $t('timeline.no_statuses') }}
	</div>
	<div
	v-else-if="bottomedOut"
	class="new-status-notification text-center faint"
	>
	{{ $t('timeline.no_more_statuses') }}
	</div>
	<button
	v-else-if="!timeline.loading"
	class="button-unstyled -link"
	@click.prevent="fetchOlderStatuses()"
	>
	<div class="new-status-notification text-center">
	{{ $t('timeline.load_older') }}
	</div>
	</button>
	<div
	v-else
	class="new-status-notification text-center"
	>
	<FAIcon
	icon="circle-notch"
	spin
	size="lg"
	/>
	</div>
	</teleport>
	<!-- spacer to avoid having empty shrug -->
	<span v-if="embedded && footerSlipgate" />
	</div>
	</div>
	</template>

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

	<style src="./timeline.scss" lang="scss"> </style>
	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	index 31a5131300..267be8bfd5 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,621 +1,620 @@
	import {
	isEqual,
	escape as ldEscape,
	unescape as ldUnescape,
	merge,
	} from 'lodash'
	import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ColorInput from 'src/components/color_input/color_input.vue'
	import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
	import suggestor from 'src/components/emoji_input/suggestor.js'
	+import FollowButton from 'src/components/follow_button/follow_button.vue'
	import ProgressButton from 'src/components/progress_button/progress_button.vue'
	import Select from 'src/components/select/select.vue'
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
	import UserLink from 'src/components/user_link/user_link.vue'

	import { useEmojiStore } from 'src/stores/emoji.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface'
	import { useMediaViewerStore } from 'src/stores/media_viewer'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { usePostStatusStore } from 'src/stores/post_status'
	import { useUserHighlightStore } from 'src/stores/user_highlight.js'

	import { updateProfile } from 'src/api/user.js'
	import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
	import localeService from 'src/services/locale/locale.service.js'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faBirthdayCake,
	faClockRotateLeft,
	faEdit,
	faExpandAlt,
	faExternalLinkAlt,
	faRss,
	faSave,
	faSearchPlus,
	faTimes,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faSave,
	faRss,
	faBell,
	faSearchPlus,
	faExternalLinkAlt,
	faEdit,
	faTimes,
	faExpandAlt,
	faBirthdayCake,
	faClockRotateLeft,
	)

	const KNOWN_TAGS = new Set([
	'mrf_tag:media-force-nsfw',
	'mrf_tag:media-strip',
	'mrf_tag:force-unlisted',
	'mrf_tag:sandbox',
	'mrf_tag:disable-remote-subscription',
	'mrf_tag:disable-any-subscription',
	])

	export default {
	props: {
	// Enables all the options for profile editing, used in settings -> profile tab
	editable: {
	required: false,
	default: false,
	type: Boolean,
	},
	// ID of user to show data of
	userId: {
	required: true,
	type: String,
	},
	// Use a compact layout that hides bio, stats etc.
	hideBio: {
	required: false,
	default: false,
	type: Boolean,
	},
	// Hide action buttons
	hideButtons: {
	required: false,
	default: false,
	type: Boolean,
	},
	// default - open profile, 'zoom' - zoom, function - call function
	avatarAction: {
	required: false,
	type: String,
	default: 'default',
	},
	// Show note editor if supported
	hasNoteEditor: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Show close icon (for popovers)
	showClose: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Show close icon (for popovers)
	showExpand: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Disable forced 3:1 aspect ratio
	compact: {
	required: false,
	type: Boolean,
	default: false,
	},
	},
	components: {
	DialogModal: defineAsyncComponent(
	() => import('src/components/dialog_modal/dialog_modal.vue'),
	),
	UserAvatar,
	Checkbox,
	RemoteFollow: defineAsyncComponent(
	() => import('src/components/remote_follow/remote_follow.vue'),
	),
	ModerationTools: defineAsyncComponent(
	() => import('src/components/moderation_tools/moderation_tools.vue'),
	),
	AccountActions: defineAsyncComponent(
	() => import('src/components/account_actions/account_actions.vue'),
	),
	ProgressButton,
	- FollowButton: defineAsyncComponent(
	- () => import('src/components/follow_button/follow_button.vue'),
	- ),
	+ FollowButton,
	Select,
	UserLink,
	UserNote: defineAsyncComponent(
	() => import('src/components/user_note/user_note.vue'),
	),
	UserTimedFilterModal: defineAsyncComponent(
	() =>
	import(
	'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
	),
	),
	ColorInput,
	EmojiInput,
	ImageCropper: defineAsyncComponent(
	() => import('src/components/image_cropper/image_cropper.vue'),
	),
	},
	data() {
	const user = this.$store.getters.findUser(this.userId)

	return {
	followRequestInProgress: false,

	// Editable stuff
	editImage: false,

	newName: user.name_unescaped,
	editingName: false,

	newBio: ldUnescape(user.description),
	editingBio: false,

	newAvatar: null,
	newAvatarFile: null,

	newBanner: null,
	newBannerFile: null,

	newActorType: user.actor_type,
	newBirthday: user.birthday,
	newShowBirthday: user.show_birthday,
	newShowRole: user.show_role,

	newFields: user.fields?.map((field) => ({
	name: field.name,
	value: field.value,
	})),

	editingFields: false,
	}
	},
	created() {
	this.$store.dispatch('fetchUserRelationship', this.user.id)
	},
	computed: {
	escapedNewBio() {
	return ldEscape(this.newBio).replace(/\n/g, '<br>')
	},
	somethingToSave() {
	if (this.newName !== this.user.name_unescaped) return true
	if (this.newBio !== ldUnescape(this.user.description)) return true
	if (this.newAvatar !== null) return true
	if (this.newBanner !== null) return true
	if (this.newActorType !== this.user.actor_type) return true
	if (this.newBirthday !== this.user.birthday) return true
	if (this.newShowBirthday !== this.user.show_birthday) return true
	if (this.newShowRole !== this.user.show_role) return true
	if (
	!isEqual(
	this.newFields,
	this.user.fields?.map((field) => ({
	name: field.name,
	value: field.value,
	})),
	)
	)
	return true
	return false
	},
	groupActorAvailable() {
	return useInstanceCapabilitiesStore().groupActorAvailable
	},
	availableActorTypes() {
	return this.groupActorAvailable
	? ['Person', 'Service', 'Group']
	: ['Person', 'Service']
	},
	user() {
	return this.$store.getters.findUser(this.userId)
	},
	role() {
	return this.user.role
	},
	relationship() {
	return this.$store.getters.relationship(this.userId)
	},
	isOtherUser() {
	return this.user.id !== this.$store.state.users.currentUser.id
	},
	subscribeUrl() {
	const serverUrl = new URL(this.user.statusnet_profile_url)
	return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
	},
	loggedIn() {
	return this.$store.state.users.currentUser
	},
	dailyAvg() {
	const days = Math.ceil(
	(new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000),
	)
	return Math.round(this.user.statuses_count / days)
	},
	emoji() {
	return useEmojiStore().customEmoji.map((e) => ({
	shortcode: e.displayText,
	static_url: e.imageUrl,
	url: e.imageUrl,
	}))
	},
	userHighlightType: {
	get() {
	return useUserHighlightStore().get(this.user.screen_name).type
	},
	set(type) {
	if (type !== 'disabled') {
	useUserHighlightStore().setAndSave({
	user: this.user.screen_name,
	value: { type },
	})
	} else {
	useUserHighlightStore().unsetAndSave({ user: this.user.screen_name })
	}
	},
	},
	userHighlightColor: {
	get() {
	return useUserHighlightStore().get(this.user.screen_name).color
	},
	set(color) {
	useUserHighlightStore().setAndSave({
	user: this.user.screen_name,
	value: { color },
	})
	},
	},
	visibleRole() {
	if (!this.user.show_role && !this.user.adminData) {
	return
	}
	const rights = this.user.rights
	if (!rights) {
	return
	}
	const validRole = rights.admin \|\| rights.moderator
	const roleTitle = rights.admin ? 'admin' : 'moderator'
	return validRole && roleTitle
	},
	hideFollowsCount() {
	return this.isOtherUser && this.user.hide_follows_count
	},
	hideFollowersCount() {
	return this.isOtherUser && this.user.hide_followers_count
	},
	showModerationMenu() {
	const privileges = this.loggedIn.privileges
	return (
	this.loggedIn.role === 'admin' \|\|
	privileges.has('users_manage_activation_state') \|\|
	privileges.has('users_delete') \|\|
	privileges.has('users_manage_tags')
	)
	},
	hasNote() {
	return this.relationship.note
	},
	supportsNote() {
	return 'note' in this.relationship
	},
	muteExpiryAvailable() {
	return Object.hasOwn(this.user, 'mute_expires_at')
	},
	muteExpiry() {
	return this.user.mute_expires_at === false
	? this.$t('user_card.mute_expires_forever')
	: this.$t('user_card.mute_expires_at', [
	new Date(this.user.mute_expires_at).toLocaleString(),
	])
	},
	blockExpiryAvailable() {
	return Object.hasOwn(this.user, 'block_expires_at')
	},
	blockExpiry() {
	return this.user.block_expires_at == null
	? this.$t('user_card.block_expires_forever')
	: this.$t('user_card.block_expires_at', [
	new Date(this.user.mute_expires_at).toLocaleString(),
	])
	},
	formattedBirthday() {
	const browserLocale = localeService.internalToBrowserLocale(
	this.$i18n.locale,
	)
	return (
	this.user.birthday &&
	new Date(Date.parse(this.user.birthday)).toLocaleDateString(
	browserLocale,
	{ timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' },
	)
	)
	},
	formattedJoinDate() {
	const browserLocale = localeService.internalToBrowserLocale(
	this.$i18n.locale,
	)
	return (
	this.user.created_at &&
	new Date(Date.parse(this.user.created_at)).toLocaleDateString(
	browserLocale,
	{ timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' },
	)
	)
	},

	// Editable stuff
	avatarImgSrc() {
	const currentUrl =
	this.user.profile_image_url_original \|\| this.defaultAvatar
	if (!this.editable) return currentUrl
	const newUrl =
	this.newAvatar === null ? this.defaultAvatar : this.newAvatar
	return this.newAvatar === null ? currentUrl : newUrl
	},
	bannerImgSrc() {
	const currentUrl = this.user.cover_photo \|\| this.defaultBanner
	if (!this.editable) return currentUrl
	const newUrl =
	this.newBanner === null ? this.defaultBanner : this.newBanner
	return this.newBanner === null ? currentUrl : newUrl
	},
	defaultAvatar() {
	return (
	useInstanceStore().server +
	useInstanceStore().instanceIdentity.defaultAvatar
	)
	},
	defaultBanner() {
	return (
	useInstanceStore().server +
	useInstanceStore().instanceIdentity.defaultBanner
	)
	},
	isDefaultAvatar() {
	const baseAvatar = useInstanceStore().instanceIdenitity.defaultAvatar
	return (
	!this.$store.state.users.currentUser.profile_image_url \|\|
	this.$store.state.users.currentUser.profile_image_url.includes(
	baseAvatar,
	)
	)
	},
	isDefaultBanner() {
	const baseBanner = useInstanceStore().instanceIdentity.defaultBanner
	return (
	!this.$store.state.users.currentUser.cover_photo \|\|
	this.$store.state.users.currentUser.cover_photo.includes(baseBanner)
	)
	},
	fieldsLimits() {
	return useInstanceStore().limits.fieldsLimits
	},
	maxFields() {
	return this.fieldsLimits ? this.fieldsLimits.maxFields : 0
	},
	emojiUserSuggestor() {
	return suggestor({
	emoji: [
	...useEmojiStore().standardEmojiList,
	...useEmojiStore().customEmoji,
	],
	store: this.$store,
	})
	},
	emojiSuggestor() {
	return suggestor({
	emoji: [
	...useEmojiStore().standardEmojiList,
	...useEmojiStore().customEmoji,
	],
	})
	},
	allowNonSquareEmoji() {
	return this.mergedConfig.nonSquareEmoji
	},
	hideUserStats() {
	return this.mergedConfig.hideUserStats
	},
	hideRemarks() {
	return this.mergedConfig.userCardHidePersonalMarks
	},
	...mapState(useMergedConfigStore, ['mergedConfig']),
	},
	methods: {
	isKnownTag(tag) {
	return KNOWN_TAGS.has(tag)
	},
	muteUser() {
	this.$refs.timedMuteDialog.optionallyPrompt()
	},
	unmuteUser() {
	this.$store.dispatch('unmuteUser', this.user.id)
	},
	subscribeUser() {
	return this.$store.dispatch('subscribeUser', this.user.id)
	},
	unsubscribeUser() {
	return this.$store.dispatch('unsubscribeUser', this.user.id)
	},
	linkClicked({ target }) {
	if (target.tagName === 'SPAN') {
	target = target.parentNode
	}
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	},
	userProfileLink(user) {
	return generateProfileLink(
	user.id,
	user.screen_name,
	useInstanceStore().restrictedNicknames,
	)
	},
	openProfileTab() {
	useInterfaceStore().openSettingsModalTab('profile')
	},
	zoomAvatar() {
	const attachment = {
	url: this.user.profile_image_url_original,
	type: 'image',
	}
	useMediaViewerStore().setMedia([attachment])
	useMediaViewerStore().setCurrentMedia(attachment)
	},
	mentionUser() {
	usePostStatusStore().openPostStatusModal({
	profileMention: true,
	repliedUser: this.user,
	})
	},
	onAvatarClickHandler(e) {
	if (this.onAvatarClick) {
	e.preventDefault()
	this.onAvatarClick()
	}
	},

	// Editable stuff
	changeAvatar() {
	this.editImage = 'avatar'
	},
	changeBanner() {
	this.editImage = 'banner'
	},
	submitImage({ canvas, file }) {
	if (canvas) {
	return canvas.toBlob((data) =>
	this.submitImage({ canvas: null, file: data }),
	)
	}

	const reader = new window.FileReader()
	reader.onload = (e) => {
	const dataUrl = e.target.result

	if (this.editImage === 'avatar') {
	this.newAvatar = dataUrl
	this.newAvatarFile = file
	} else {
	this.newBanner = dataUrl
	this.newBannerFile = file
	}

	this.editImage = false
	}

	reader.readAsDataURL(file)
	},
	resetImage() {
	if (this.editImage === 'avatar') {
	this.newAvatar = null
	this.newAvatarFile = null
	} else {
	this.newBanner = null
	this.newBannerFile = null
	}
	this.editImage = false
	},
	addField() {
	if (this.newFields.length < this.maxFields) {
	this.newFields.push({ name: '', value: '' })
	}
	},
	deleteField(index) {
	this.newFields.splice(index, 1)
	},
	propsToNative(props) {
	return propsToNative(props)
	},
	cancelImageText() {
	return
	},
	resetState() {
	const user = this.$store.state.users.currentUser

	this.newName = user.name_unescaped
	this.newBio = ldUnescape(user.description)

	this.newAvatar = null
	this.newAvatarFile = null

	this.newBanner = null
	this.newBannerFile = null

	this.newActorType = user.actor_type
	this.newBirthday = user.birthday
	this.newShowBirthday = user.show_birthday
	this.newShowRole = user.show_role

	this.newFields = user.fields.map((field) => ({
	name: field.name,
	value: field.value,
	}))
	},
	updateProfile() {
	const params = {
	note: this.newBio,

	// Backend notation.
	display_name: this.newName,
	fields_attributes: this.newFields.filter((el) => el != null),
	show_role: !!this.newShowRole,
	birthday: this.newBirthday \|\| '',
	show_birthday: !!this.newShowBirthday,
	}

	if (this.newActorType) {
	params.actor_type = this.newActorType
	}

	if (this.newAvatarFile !== null) {
	params.avatar = this.newAvatarFile
	}

	if (this.newBannerFile !== null) {
	params.header = this.newBannerFile
	}

	updateProfile({ params })
	.then(({ data: user }) => {
	this.newFields.splice(this.newFields.length)
	merge(this.newFields, user.fields)
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	this.resetState()
	})
	.catch((error) => {
	this.displayUploadError(error)
	})
	},
	displayUploadError(error) {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'upload.error.message',
	messageArgs: [error.message],
	level: 'error',
	})
	},
	},
	}
	diff --git a/src/components/user_panel/user_panel.js b/src/components/user_panel/user_panel.js
	index ac6bc669c6..08270a1c67 100644
	--- a/src/components/user_panel/user_panel.js
	+++ b/src/components/user_panel/user_panel.js
	@@ -1,23 +1,21 @@
	-import { defineAsyncComponent } from 'vue'
	import { mapState } from 'vuex'

	+import AuthForm from 'src/components/auth_form/auth_form.js'
	import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	import UserCard from 'src/components/user_card/user_card.vue'

	const UserPanel = {
	computed: {
	signedIn() {
	return this.user
	},
	...mapState({ user: (state) => state.users.currentUser }),
	},
	components: {
	- AuthForm: defineAsyncComponent(
	- () => import('src/components/auth_form/auth_form.js'),
	- ),
	PostStatusForm,
	UserCard,
	+ AuthForm,
	},
	}

	export default UserPanel
	diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
	index 3f6922c311..b0479321c2 100644
	--- a/src/components/user_panel/user_panel.vue
	+++ b/src/components/user_panel/user_panel.vue
	@@ -1,51 +1,51 @@
	<template>
	<aside class="user-panel">
	<div
	v-if="signedIn"
	key="user-panel-signed"
	class="panel panel-default signed-in"
	>
	<UserCard
	:user-id="user.id"
	:hide-bio="true"
	/>
	<PostStatusForm />
	</div>
	- <auth-form
	+ <AuthForm
	v-else
	key="user-panel"
	/>
	</aside>
	</template>

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

	<style lang="scss">
	.user-panel {
	.panel {
	background: var(--background);
	backdrop-filter: var(--backdrop-filter);
	}

	.user-info {
	margin: 0.6em 0.6em 0;

	.Avatar {
	width: 5em;
	width: calc(min(5em, 20cqw));
	height: 5em;
	height: calc(min(5em, 20cqw));
	}
	}

	.post-status-form {
	form {
	margin-top: 0;
	}
	}

	.signed-in {
	z-index: 10;
	}
	}
	</style>
	diff --git a/src/i18n/en.json b/src/i18n/en.json
	index 10ce5704b3..4a35b48f59 100644
	--- a/src/i18n/en.json
	+++ b/src/i18n/en.json
	@@ -1,2043 +1,2073 @@
	{
	"about": {
	"mrf": {
	"federation": "Federation",
	"keyword": {
	"keyword_policies": "Keyword policies",
	"ftl_removal": "Removal from \"The Whole Known Network\" Timeline",
	"reject": "Reject",
	"replace": "Replace",
	"is_replaced_by": "→"
	},
	"mrf_policies": "Enabled MRF policies",
	"mrf_policies_desc": "MRF policies manipulate the federation behaviour of the instance. The following policies are enabled:",
	"simple": {
	"simple_policies": "Instance-specific policies",
	"instance": "Instance",
	"reason": "Reason",
	"not_applicable": "N/A",
	"accept": "Accept",
	"accept_desc": "This instance only accepts messages from the following instances:",
	"reject": "Reject",
	"reject_desc": "This instance will not accept messages from the following instances:",
	"quarantine": "Quarantine",
	"quarantine_desc": "This instance will send only public posts to the following instances:",
	"ftl_removal": "Removal from \"Known Network\" Timeline",
	"ftl_removal_desc": "This instance removes these instances from \"Known Network\" timeline:",
	"media_removal": "Media Removal",
	"media_removal_desc": "This instance removes media from posts on the following instances:",
	"media_nsfw": "Media force-set as sensitive",
	"media_nsfw_desc": "This instance forces media to be set sensitive in posts on the following instances:"
	}
	},
	"staff": "Staff",
	"terms": "Terms of Service"
	},
	"announcements": {
	"page_header": "Announcements",
	"title": "Announcement",
	"mark_as_read_action": "Mark as read",
	"post_form_header": "Post announcement",
	"post_placeholder": "Type your announcement content here...",
	"post_action": "Post",
	"post_error": "Error: {error}",
	"close_error": "Close",
	"delete_action": "Delete",
	"start_time_prompt": "Start time: ",
	"end_time_prompt": "End time: ",
	"all_day_prompt": "This is an all-day event",
	"published_time_display": "Published at {time}",
	"start_time_display": "Starts at {time}",
	"end_time_display": "Ends at {time}",
	"edit_action": "Edit",
	"submit_edit_action": "Submit",
	"cancel_edit_action": "Cancel",
	"inactive_message": "This announcement is inactive"
	},
	"shoutbox": {
	"title": "Shoutbox"
	},
	"domain_mute_card": {
	"mute": "Mute",
	"mute_progress": "Muting…",
	"unmute": "Unmute",
	"unmute_progress": "Unmuting…"
	},
	"exporter": {
	"export": "Export",
	"processing": "Processing, you'll soon be asked to download your file"
	},
	"features_panel": {
	"shout": "Shoutbox",
	"pleroma_chat_messages": "Pleroma Chat",
	"gopher": "Gopher",
	"media_proxy": "Media proxy",
	"scope_options": "Scope options",
	"text_limit": "Text limit",
	"title": "Features",
	"who_to_follow": "Who to follow",
	"upload_limit": "Upload limit"
	},
	"finder": {
	"error_fetching_user": "Error fetching user",
	"find_user": "Find user"
	},
	"general": {
	"apply": "Apply",
	"submit": "Submit",
	"more": "More",
	"no_more": "No more items",
	"loading": "Loading…",
	"generic_error": "An error occured",
	"generic_error_message": "An error occured: {0}",
	+ "generic_error_details": "Technical info:",
	"error_retry": "Please try again",
	+ "refresh_required": "Refresh required",
	+ "refresh_required_content": "Failed to load UI code. Most likely frontend was updated on server, you'll need to refresh the page.",
	+ "refresh_required_refresh": "Refresh page",
	"retry": "Try again",
	"optional": "optional",
	"show_more": "Show more",
	"show_less": "Show less",
	"never_show_again": "Never show again",
	"dismiss": "Dismiss",
	"cancel": "Cancel",
	"disable": "Disable",
	"enable": "Enable",
	"confirm": "Confirm",
	"verify": "Verify",
	"close": "Close",
	"undo": "Undo",
	"yes": "Yes",
	"no": "No",
	"none": "None",
	"not_applicable": "N/A",
	"not_available": "N/A",
	"peek": "Peek",
	"scroll_to_top": "Scroll to top",
	"role": {
	"admin": "Admin",
	"moderator": "Moderator"
	},
	"unpin": "Unpin item",
	"pin": "Pin item",
	"flash_content": "Click to show Flash content using Ruffle (Experimental, may not work).",
	"flash_security": "Note that this can be potentially dangerous since Flash content is still arbitrary code.",
	"flash_fail": "Failed to load flash content, see console for details.",
	"scope_in_timeline": {
	"local": "Non-federated",
	"direct": "Direct",
	"private": "Followers-only",
	"public": "Public",
	"unlisted": "Unlisted"
	}
	},
	"image_cropper": {
	"crop_picture": "Crop picture",
	"save": "Save",
	"save_without_cropping": "Save without cropping",
	"cancel": "Cancel"
	},
	"importer": {
	"submit": "Submit",
	"import": "Import",
	"success": "Imported successfully.",
	"error": "An error occured while importing this file."
	},
	"login": {
	"login": "Log in",
	"description": "Log in with OAuth",
	"logout": "Log out",
	"logout_confirm_title": "Logout confirmation",
	"logout_confirm": "Do you really want to logout?",
	"logout_confirm_accept_button": "Logout",
	"logout_confirm_cancel_button": "Do not logout",
	"password": "Password",
	"placeholder": "e.g. lain",
	"register": "Register",
	"username": "Username",
	"hint": "Log in to join the discussion",
	"authentication_code": "Authentication code",
	"enter_recovery_code": "Enter a recovery code",
	"enter_two_factor_code": "Enter a two-factor code",
	"recovery_code": "Recovery code",
	"heading": {
	"totp": "Two-factor authentication",
	"recovery": "Two-factor recovery"
	}
	},
	"media_modal": {
	"previous": "Previous",
	"next": "Next",
	"counter": "{current} / {total}",
	"hide": "Close media viewer"
	},
	"nav": {
	"about": "About",
	"administration": "Administration",
	"back": "Back",
	"friend_requests": "Follow requests",
	"mentions": "Mentions",
	"interactions": "Interactions",
	"dms": "Direct messages",
	"public_tl": "Public timeline",
	"bubble": "Bubble timeline",
	"timeline": "Timeline",
	"home_timeline": "Home timeline",
	"twkn": "Known Network",
	"bookmarks": "Bookmarks",
	"all_bookmarks": "All bookmarks",
	"bookmark_folders": "Bookmark folders",
	"user_search": "User Search",
	"search": "Search",
	"search_close": "Close search bar",
	"who_to_follow": "Who to follow",
	"preferences": "Preferences",
	"timelines": "Timelines",
	"chats": "Chats",
	"lists": "Lists",
	"edit_nav_mobile": "Customize navigation bar",
	"edit_pinned": "Edit pinned items",
	"edit_finish": "Done editing",
	"mobile_sidebar": "Toggle mobile sidebar",
	"mobile_notifications": "Open notifications (there are unread ones)",
	"mobile_notifications_close": "Close notifications",
	"mobile_notifications_mark_as_seen": "Mark all as seen",
	"announcements": "Announcements",
	"quotes": "Quotes",
	"drafts": "Drafts"
	},
	"notifications": {
	"broken_favorite": "Unknown status, searching for it…",
	"error": "Error fetching notifications: {0}",
	"favorited_you": "favorited your status",
	"followed_you": "followed you",
	"follow_request": "wants to follow you",
	"load_older": "Load older notifications",
	"notifications": "Notifications",
	"read": "Read!",
	"repeated_you": "repeated your status",
	"no_more_notifications": "No more notifications",
	"migrated_to": "migrated to",
	"reacted_with": "reacted with {0}",
	"submitted_report": "submitted a report",
	"poll_ended": "poll has ended",
	"unread_announcements": "{num} unread announcement \| {num} unread announcements",
	"unread_chats": "{num} unread chat \| {num} unread chats",
	"unread_follow_requests": "{num} new follow request \| {num} new follow requests",
	"configuration_tip": "You can customize what to display here in {theSettings}. {dismiss}",
	"configuration_tip_settings": "the settings",
	"configuration_tip_dismiss": "Do not show again",
	"subscribed_status": "posted"
	},
	"polls": {
	"add_poll": "Add poll",
	"add_option": "Add option",
	"option": "Option",
	"votes": "votes",
	"people_voted_count": "{count} person voted \| {count} people voted",
	"votes_count": "{count} vote \| {count} votes",
	"vote": "Vote",
	"type": "Poll type",
	"single_choice": "Single choice",
	"multiple_choices": "Multiple choices",
	"expiry": "Poll age",
	"expires_at": "Poll ends {0}",
	"expires_in": "Poll ends in {0}",
	"expired": "Poll ended {0} ago",
	"expired_at": "Poll ended {0}",
	"not_enough_options": "Too few unique options in poll",
	"non_anonymous": "Public poll",
	"non_anonymous_title": "Other instances may display the options you voted for"
	},
	"emoji": {
	"stickers": "Stickers",
	"emoji": "Emoji",
	"keep_open": "Keep picker open",
	"search_emoji": "Search for an emoji",
	"add_emoji": "Insert emoji",
	"custom": "Custom emoji",
	"hide_custom_emoji": "Hide custom emojis",
	"unpacked": "Unpacked emoji",
	"unicode": "Unicode emoji",
	"unicode_groups": {
	"activities": "Activities",
	"animals-and-nature": "Animals & Nature",
	"flags": "Flags",
	"food-and-drink": "Food & Drink",
	"objects": "Objects",
	"people-and-body": "People & Body",
	"smileys-and-emotion": "Smileys & Emotion",
	"symbols": "Symbols",
	"travel-and-places": "Travel & Places"
	},
	"load_all_hint": "Loaded first {saneAmount} emoji, loading all emoji may cause performance issues.",
	"load_all": "Loading all {emojiAmount} emoji",
	"regional_indicator": "Regional indicator {letter}"
	},
	"errors": {
	"storage_unavailable": "Pleroma could not access browser storage. Your login or your local settings won't be saved and you might encounter unexpected issues. Try enabling cookies."
	},
	"interactions": {
	"favs_repeats": "Repeats and favorites",
	"follows": "New follows",
	"emoji_reactions": "Emoji Reactions",
	"reports": "Reports",
	"moves": "User migrates",
	"load_older": "Load older interactions",
	"statuses": "Subscriptions"
	},
	"post_status": {
	"edit_status": "Edit status",
	"new_status": "Post new status",
	"reply_option": "Reply to this status",
	"quote_option": "Quote this status",
	"quote_url": "Link to quoted post",
	"account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
	"account_not_locked_warning_link": "locked",
	"attachments_sensitive": "Mark attachments as sensitive",
	"media_description": "Media description",
	"content_type": {
	"text/plain": "Plain text",
	"text/html": "HTML",
	"text/markdown": "Markdown",
	"text/bbcode": "BBCode",
	"text/x.misskeymarkdown": "MFM"
	},
	"content_type_selection": "Post format",
	"content_warning": "Subject (optional)",
	"default": "Just landed in L.A.",
	"direct_warning_to_all": "This post will be visible to all the mentioned users.",
	"direct_warning_to_first_only": "This post will only be visible to the mentioned users at the beginning of the message.",
	"edit_remote_warning": "Other remote instances may not support editing and unable to receive the latest version of your post.",
	"edit_unsupported_warning": "Pleroma does not support editing mentions or polls.",
	"posting": "Posting",
	"post": "Post",
	"preview": "Preview",
	"preview_empty": "Empty",
	"empty_status_error": "Can't post an empty status with no files",
	"media_description_error": "Failed to update media, try again",
	"scope_notice": {
	"public": "This post will be visible to everyone",
	"private": "This post will be visible to your followers only",
	"unlisted": "This post will not be visible in Public Timeline and The Whole Known Network"
	},
	"scope_notice_dismiss": "Close this notice",
	"scope": {
	"direct": "Direct - post to mentioned users only",
	"private": "Followers-only - post to followers only",
	"public": "Public - post to public timelines",
	"unlisted": "Unlisted - do not post to public timelines"
	},
	"close_confirm_title": "Closing post form",
	"close_confirm": "What do you want to do with your current writing?",
	"close_confirm_save_button": "Save",
	"close_confirm_discard_button": "Discard",
	"close_confirm_continue_composing_button": "Continue composing",
	"auto_save_nothing_new": "Nothing new to save.",
	"auto_save_saved": "Saved.",
	"auto_save_saving": "Saving...",
	"save_to_drafts_button": "Save to drafts",
	"save_to_drafts_and_close_button": "Save to drafts and close",
	"more_post_actions": "More post actions..."
	},
	"registration": {
	"bio_optional": "Bio (optional)",
	"email": "Email",
	"email_optional": "Email (optional)",
	"fullname": "Display name",
	"password_confirm": "Password confirmation",
	"registration": "Registration",
	"token": "Invite token",
	"captcha": "CAPTCHA",
	"new_captcha": "Click the image to get a new captcha",
	"username_placeholder": "e.g. lain",
	"fullname_placeholder": "e.g. Lain Iwakura",
	"bio_placeholder": "e.g.\nHi, I'm Lain.\nI’m an anime girl living in suburban Japan. You may know me from the Wired.",
	"reason": "Reason to register",
	"reason_placeholder": "This instance approves registrations manually.\nLet the administration know why you want to register.",
	"register": "Register",
	"validations": {
	"username_required": "cannot be left blank",
	"fullname_required": "cannot be left blank",
	"email_required": "cannot be left blank",
	"password_required": "cannot be left blank",
	"password_confirmation_required": "cannot be left blank",
	"password_confirmation_match": "should be the same as password",
	"birthday_required": "cannot be left blank",
	"birthday_min_age": "must be on or before {date}"
	},
	"email_language": "In which language do you want to receive emails from the server?",
	"birthday": "Birthday:",
	"birthday_optional": "Birthday (optional):"
	},
	"remote_user_resolver": {
	"remote_user_resolver": "Remote user resolver",
	"searching_for": "Searching for",
	"error": "Not found."
	},
	"report": {
	"reporter": "Reporter:",
	"reported_user": "Reported user:",
	"reported_statuses": "Reported statuses:",
	"notes": "Notes:",
	"state": "State:",
	"state_open": "Open",
	"state_closed": "Closed",
	"state_resolved": "Resolved"
	},
	"selectable_list": {
	"select_all": "Select all"
	},
	"settings": {
	"invalid_settings_imported": "Error importing settings",
	"add_language": "Add fallback language",
	"remove_language": "Remove",
	"primary_language": "Primary language:",
	"fallback_language": "Fallback language {index}:",
	"actor_type": "This account is:",
	"actor_type_description": "Marking your account as a group will make it automatically repeat statuses that mention it.",
	"actor_type_Person": "a normal user",
	"actor_type_person_proper": "a person",
	"actor_type_Service": "a bot",
	"actor_type_Group": "a group",
	"mobile_center_dialog": "Vertically center dialogs on mobile",
	"app_name": "App name",
	"expert_mode": "Show advanced",
	"save": "Save changes",
	"reset": "Reset changes",
	"security": "Security",
	"toggle_edit": "Edit",
	"change_banner": "Change banner",
	"change_avatar": "Change avatar",
	"setting_changed": "Setting is different from default",
	"setting_server_side": "This setting is tied to your profile and affects all sessions and clients",
	"setting_local_side": "This setting is tied to current session and doesn't affects other devices and browsers",
	"enter_current_password_to_confirm": "Enter your current password to confirm your identity",
	"post_look_feel": "Posts Look & Feel",
	"posts": "Posts",
	"developer": "Developer",
	"debug": "Debug",
	"mention_links": "Mention Links",
	"appearance": "Appearance",
	"confirm_new_setting": "Confirm new setting?",
	"confirm_new_question": "Does this look ok? Setting will be reverted in 10 seconds.",
	"confirm_new_question_countdown": "Does this look ok? Setting will be reverted in 1 second. \| Does this look ok? Setting will be reverted in {count} seconds.",
	"revert": "Revert",
	"confirm": "Confirm",
	"text_size": "Text and interface size",
	"text_size_tip": "Use {0} for absolute values, {1} will scale with browser default text size.",
	"text_size_tip2": "Values other than {0} might break some things and themes",
	"emoji_size": "Emoji size",
	"navbar_size": "Top bar size",
	"panel_header_size": "Panel header size",
	"visual_tweaks": "Minor visual tweaks",
	"theme_debug": "Show what background theme engine assumes when dealing with transparancy",
	"scale_and_layout": "Interface scale and layout",
	"timelines": "Timelines",
	"format_and_language": "Format and Language",
	"confirmations": "Confirmations",
	"layout": "Layout",
	"enabled": "Enabled",
	"clutter": "Clutter",
	"filter": {
	"clutter": "Remove clutter",
	"mute_filter": "Mute Filters",
	"type": "Filter type",
	"regexp": "RegExp",
	"plain": "Simple",
	"user": "User (Simple)",
	"user_regexp": "User (RegExp)",
	"case_sensitive": "Case-sensitive",
	"hide": "Hide completely",
	"name": "Name",
	"value": "Value",
	"expires": "Expires",
	"expired": "Expired",
	"copy": "Duplicate",
	"save": "Save",
	"delete": "Remove",
	"new": "Create new",
	"import": "Import",
	"export": "Export",
	"regexp_error": "Invalid Regular Expression",
	"never_expires": "Never",
	"total_count": "Total {count} custom filter\|Total {count} custom filters",
	"expired_count": "{count} expired filter\|{count} expired filters",
	"custom_filters": "Custom filters",
	"purge_expired": "Remove expired filters",
	"import_failure": "The selected file is not a supported Pleroma filter.",
	"help": {
	"word": "Simple and RegExp filters test against post's content and subject.",
	"user": "User filter matches full user handle (user{'@'}domain) in the following: author, reply-to and mentions",
	"regexp": "Regex variants are more advanced and use {link} to match instead of simple substring search.",
	"regexp_link": "Regular Expressions",
	"regexp_url": "https://en.wikipedia.org/wiki/Regular_expression"
	}
	},
	"mfa": {
	"otp": "OTP",
	"setup_otp": "Setup OTP",
	"wait_pre_setup_otp": "presetting OTP",
	"confirm_and_enable": "Confirm & enable OTP",
	"title": "Two-factor Authentication",
	"generate_new_recovery_codes": "Generate new recovery codes",
	"warning_of_generate_new_codes": "When you generate new recovery codes, your old codes won’t work anymore.",
	"recovery_codes": "Recovery codes.",
	"waiting_a_recovery_codes": "Receiving backup codes…",
	"recovery_codes_warning": "Write the codes down or save them somewhere secure - otherwise you won't see them again. If you lose access to your 2FA app and recovery codes you'll be locked out of your account.",
	"authentication_methods": "Authentication methods",
	"scan": {
	"title": "Scan",
	"desc": "Using your two-factor app, scan this QR code or enter text key:",
	"secret_code": "Key"
	},
	"verify": {
	"desc": "To enable two-factor authentication, enter the code from your two-factor app:"
	}
	},
	"units": {
	"time": {
	"m": "minutes",
	"s": "seconds",
	"h": "hours",
	"d": "days"
	}
	},
	"lists_navigation": "Show lists in navigation",
	"allow_following_move": "Allow auto-follow when following account moves",
	"attachmentRadius": "Attachments",
	"attachments": "Attachments",
	"image_compression": "Compress images before uploading",
	"always_use_jpeg": "Always convert images to JPEG format",
	"avatar": "Avatar",
	"avatarAltRadius": "Avatars (notifications)",
	"avatarRadius": "Avatars",
	"background": "Background",
	"bio": "Bio",
	"profile_other": "Other",
	"email_language": "Language for receiving emails from the server",
	"block_export": "Block export",
	"block_export_button": "Export your blocks to a csv file",
	"block_import": "Block import",
	"block_import_error": "Error importing blocks",
	"blocks_imported": "Blocks imported! Processing them will take a while.",
	"mute_export": "Mute export",
	"mute_export_button": "Export your mutes to a csv file",
	"mute_import": "Mute import",
	"mute_import_error": "Error importing mutes",
	"mutes_imported": "Mutes imported! Processing them will take a while.",
	"import_mutes_from_a_csv_file": "Import mutes from a csv file",
	"account_backup": "Account backup",
	"account_backup_description": "This allows you to download an archive of your account information and your posts, but they cannot yet be imported into a Pleroma account.",
	"account_backup_table_head": "Backup",
	"download_backup": "Download",
	"backup_not_ready": "This backup is not ready yet.",
	"backup_running": "This backup is in progress, processed {number} record. \| This backup is in progress, processed {number} records.",
	"backup_failed": "This backup has failed.",
	"remove_backup": "Remove",
	"list_backups_error": "Error fetching backup list: {error}",
	"add_backup": "Create a new backup",
	"added_backup": "Added a new backup.",
	"add_backup_error": "Error adding a new backup: {error}",
	"blocks_tab": "Blocks",
	"btnRadius": "Buttons",
	"cBlue": "Blue (Reply, follow)",
	"cGreen": "Green (Retweet)",
	"cOrange": "Orange (Favorite)",
	"cRed": "Red (Cancel)",
	"change_email": "Change email",
	"change_email_error": "There was an issue changing your email.",
	"changed_email": "Email changed successfully!",
	"change_password": "Change password",
	"change_password_error": "There was an issue changing your password.",
	"changed_password": "Password changed successfully!",
	"chatMessageRadius": "Chat message",
	"collapse_subject": "Collapse posts with subjects",
	"composing": "Composing",
	"replies": "Replying",
	"confirm_new_password": "Confirm new password",
	"current_password": "Current password",
	"confirm_dialogs": "Ask for confirmation when",
	"confirm_dialogs_repeat": "repeating a status",
	"confirm_dialogs_unfollow": "unfollowing a user",
	"confirm_dialogs_block": "blocking a user",
	"confirm_dialogs_mute": "muting a user",
	"confirm_dialogs_mute_domain": "muting domains",
	"confirm_dialogs_mute_conversation": "muting conversations",
	"confirm_dialogs_delete": "deleting a status",
	"confirm_dialogs_logout": "logging out",
	"confirm_dialogs_approve_follow": "approving a follower",
	"confirm_dialogs_deny_follow": "denying a follower",
	"confirm_dialogs_remove_follower": "removing a follower",
	"mutes_and_blocks": "Mutes and Blocks",
	"data_import_export_tab": "Data import / export",
	"default_vis": "Default visibility scope",
	"delete_account": "Delete account",
	"delete_account_description": "Permanently delete your data and deactivate your account.",
	"delete_account_error": "There was an issue deleting your account. If this persists please contact your instance administrator.",
	"delete_account_instructions": "Type your password in the input below to confirm account deletion.",
	"account_alias": "Account aliases",
	"account_alias_table_head": "Alias",
	"list_aliases_error": "Error fetching aliases: {error}",
	"hide_list_aliases_error_action": "Close",
	"remove_alias": "Remove this alias",
	"new_alias_target": "Add a new alias (e.g. {example})",
	"added_alias": "Alias is added.",
	"add_alias_error": "Error adding alias: {error}",
	"move_account": "Move account",
	"move_account_notes": "If you want to move the account somewhere else, you must go to your target account and add an alias pointing here.",
	"move_account_target": "Target account (e.g. {example})",
	"moved_account": "Account is moved.",
	"move_account_error": "Error moving account: {error}",
	"discoverable": "Allow discovery of this account in search results and other services",
	"domain_mutes": "Domains",
	"domain_mutes2": "Excluded domains",
	"user_mutes2": "Muted users",
	"user_blocks": "Blocked users",
	"avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels. Recommended aspect ratio is 1:1",
	"banner_size_instruction": "The recommended minimum size for banner images is 450x150 pixels. Recommended aspect ratio is 3:1",
	"pad_emoji": "Pad emoji with spaces when adding from picker",
	"autocomplete_select_first": "Automatically select the first candidate when autocomplete results are available",
	"unsaved_post_action": "When you try to close an unsaved posting form",
	"unsaved_post_action_save": "Save it to drafts",
	"unsaved_post_action_discard": "Discard it",
	"unsaved_post_action_confirm": "Ask every time",
	"auto_save_draft": "Save drafts as you compose",
	"emoji_reactions_on_timeline": "Show emoji reactions on timeline",
	"emoji_reactions_scale": "Reactions scale factor",
	"absolute_time_format": "Use absolute time format",
	"absolute_time_format_min_age": "Only use for time older than this amount of time",
	"absolute_time_format_12h": "Time format",
	"absolute_time_format_12h_12h": "12 hour format (i.e. 10:00 PM)",
	"absolute_time_format_12h_24h": "24 hour format (i.e. 22:00)",
	"export_theme": "Save preset",
	"filtering": "Filtering",
	"wordfilter": "Wordfilter",
	"filtering_explanation": "All statuses containing these words will be muted, one per line",
	"word_filter_and_more": "Word filter and more...",
	"follow_export": "Follow export",
	"follow_export_button": "Export your follows to a csv file",
	"follow_import": "Follow import",
	"follow_import_error": "Error importing followers",
	"import_export": {
	"title": "Import / Export",
	"follows": "List of users you follow",
	"blocks": "List of users you block",
	"mutes": "List of users you mute"
	},
	"follows_imported": "Follows imported! Processing them will take a while.",
	"accent": "Accent",
	"foreground": "Foreground",
	"general": "General",
	"hide_attachments_in_convo": "Hide attachments in conversations",
	"hide_attachments_in_tl": "Hide attachments in timeline",
	"hide_media_previews": "Hide media previews",
	"hide_muted_posts": "Hide posts of muted users",
	"mute_bot_posts": "Mute bot posts",
	"hide_actor_type_indication": "Hide actor type (bots, groups, etc.) indication in posts",
	"hide_scrobbles": "Hide scrobbles",
	"hide_scrobbles_after": "Hide scrobbles older than",
	"mute_sensitive_posts": "Mute sensitive posts",
	"hide_all_muted_posts": "Hide muted posts",
	"max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)",
	"hide_isp": "Hide instance-specific panel",
	"hide_shoutbox": "Hide instance shoutbox",
	"right_sidebar": "Reverse order of columns",
	"navbar_column_stretch": "Stretch navbar to columns width",
	"always_show_post_button": "Always show floating New Post button",
	"hide_wallpaper": "Hide instance wallpaper",
	"foreign_user_background": "Allow other user's profiles to override wallpaper",
	"preload_images": "Preload images",
	"use_one_click_nsfw": "Open NSFW attachments with just one click",
	"hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
	"hide_user_stats": "Hide user statistics (e.g. the number of followers)",
	"hide_filtered_statuses": "Hide all filtered posts",
	"hide_muted_statuses": "Completely hide all muted posts",
	"hide_wordfiltered_statuses": "Hide word-filtered statuses",
	"hide_muted_threads": "Hide muted threads",
	"import_blocks_from_a_csv_file": "Import blocks from a csv file",
	"import_followers_from_a_csv_file": "Import follows from a csv file",
	"import_theme": "Load preset",
	"inputRadius": "Input fields",
	"checkboxRadius": "Checkboxes",
	"instance_default": "(default: {value})",
	"instance_default_simple": "(default)",
	"interface": "Interface",
	"interfaceLanguage": "Interface language",
	"invalid_theme_imported": "The selected file is not a supported Pleroma theme. No changes to your theme were made.",
	"limited_availability": "Unavailable in your browser",
	"links": "Links",
	"lock_account_description": "Restrict your account to approved followers only",
	"loop_video": "Loop videos",
	"loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
	"mutes_tab": "Mutes",
	"play_videos_in_modal": "Play videos in a popup frame",
	"url": "URL",
	"preview": "Preview",
	"file_export_import": {
	"backup_restore": "Settings backup",
	"backup_settings": "Backup settings to file",
	"backup_settings_theme": "Backup settings and theme to file",
	"restore_settings": "Restore settings from file",
	"errors": {
	"invalid_file": "The selected file is not a supported Pleroma settings backup. No changes were made.",
	"file_too_new": "Incompatile major version: {fileMajor}, this PleromaFE (settings ver {feMajor}) is too old to handle it",
	"file_too_old": "Incompatile major version: {fileMajor}, file version is too old and not supported (min. set. ver. {feMajor})",
	"file_slightly_new": "File minor version is different, some settings might not load"
	}
	},
	"profile_fields": {
	"label": "Profile metadata",
	"add_field": "Add field",
	"name": "Label",
	"value": "Content"
	},
	"birthday": {
	"label": "Birthday",
	"show_birthday": "Show my birthday"
	},
	"account_profile_edit": "Edit Profile",
	"account_privacy": "Privacy",
	"use_contain_fit": "Don't crop the attachment in thumbnails",
	"name": "Name",
	"name_bio": "Name & bio",
	"new_email": "New email",
	"new_password": "New password",
	"user_profiles": "User Profiles",
	"notification_visibility": "Types of notifications to show",
	"notification_visibility_in_column": "Show in notifications column/drawer",
	"notification_visibility_native_notifications": "Show a native notification",
	"notification_visibility_follows": "Follows",
	"notification_visibility_follow_requests": "Follow requests",
	"notification_visibility_likes": "Favorites",
	"notification_visibility_mentions": "Mentions",
	"notification_visibility_repeats": "Repeats",
	"notification_visibility_reports": "Reports",
	"notification_visibility_moves": "User Migrates",
	"notification_visibility_emoji_reactions": "Reactions",
	"notification_visibility_polls": "Ends of polls you voted in",
	"notification_visibility_statuses": "Subscriptions",
	"notification_show_extra": "Show extra notifications in the notifications column",
	"notification_extra_chats": "Show unread chats",
	"notification_extra_announcements": "Show unread announcements",
	"notification_extra_follow_requests": "Show new follow requests",
	"notification_extra_tip": "Show the customization tip for extra notifications",
	"no_rich_text_description": "Strip rich text formatting from all posts",
	"no_blocks": "No blocks",
	"no_mutes": "No mutes",
	"hide_favorites_description": "Don't show list of my favorites (people still get notified)",
	"hide_follows_description": "Don't show who I'm following",
	"hide_followers_description": "Don't show who's following me",
	"hide_follows_count_description": "Don't show follow count",
	"hide_followers_count_description": "Don't show follower count",
	"show_admin_badge": "Show \"Admin\" badge in my profile",
	"show_moderator_badge": "Show \"Moderator\" badge in my profile",
	"nsfw_clickthrough": "Hide sensitive/NSFW media",
	"oauth_tokens": "OAuth tokens",
	"token": "Token",
	"refresh_token": "Refresh token",
	"valid_until": "Valid until",
	"revoke_token": "Revoke",
	"panelRadius": "Panels",
	"pause_on_unfocused": "Pause when tab is not focused",
	"presets": "Presets",
	"profile_background": "Profile background",
	"profile_banner": "Profile banner",
	"profile_tab": "Profile",
	"radii_help": "Set up interface edge rounding (in pixels)",
	"replies_in_timeline": "Replies in timeline",
	"reply_visibility_all": "Show all replies",
	"reply_visibility_following": "Only show replies directed at me or users I'm following",
	"reply_visibility_self": "Only show replies directed at me",
	"reply_visibility_following_short": "Show replies to my follows",
	"reply_visibility_self_short": "Show replies to self only",
	"autohide_floating_post_button": "Automatically hide New Post button (mobile)",
	"saving_err": "Error saving settings",
	"saving_ok": "Settings saved",
	"search_user_to_block": "Search whom you want to block",
	"search_user_to_mute": "Search whom you want to mute",
	"security_tab": "Security",
	"scope_copy": "Copy scope when replying (DMs are always copied)",
	"minimal_scopes_mode": "Minimize post scope selection options",
	"set_new_avatar": "Set new avatar",
	"set_new_profile_background": "Set new profile background",
	"set_new_background": "Set new background",
	"set_new_profile_banner": "Set new profile banner",
	"reset_avatar": "Reset avatar",
	"reset_banner": "Reset banner",
	"reset_profile_background": "Reset profile background",
	"reset_profile_banner": "Reset profile banner",
	"reset_avatar_confirm": "Do you really want to reset the avatar?",
	"reset_banner_confirm": "Do you really want to reset the banner?",
	"reset_background_confirm": "Do you really want to reset the background?",
	"settings": "Settings",
	"subject_input_always_show": "Always show subject field",
	"subject_line_behavior": "Copy subject when replying",
	"subject_line_email": "Like email: \"re: subject\"",
	"subject_line_mastodon": "Like mastodon: copy as is",
	"subject_line_noop": "Do not copy",
	"force_theme_recompilation_debug": "Disable theme cahe, force recompile on each boot",
	"conversation_display": "Conversation display style",
	"conversation_display_tree": "Tree-style",
	"conversation_display_tree_quick": "Tree view",
	"disable_sticky_headers": "Don't stick column headers to top of the screen",
	"show_scrollbars": "Show side column's scrollbars",
	"third_column_mode": "When there's enough space, show third column containing",
	"third_column_mode_none": "Don't show third column at all",
	"third_column_mode_notifications": "Notifications column",
	"third_column_mode_postform": "Main post form and navigation",
	"columns": "Columns",
	"column_sizes": "Column sizes",
	"column_sizes_sidebar": "Sidebar",
	"column_sizes_content": "Content",
	"column_sizes_notifs": "Notifications",
	"scale_and_font": "Scale and Font",
	"theme_editor_min_width": "Minimum width of theme editor (0 for \"fit-content\")",
	"tree_advanced": "Allow more flexible navigation in tree view",
	"tree_fade_ancestors": "Display ancestors of the current status in faint text",
	"conversation_display_linear": "Linear-style",
	"conversation_display_linear_quick": "Linear view",
	"conversation_other_replies_button": "Show the \"other replies\" button",
	"conversation_other_replies_button_below": "Below statuses",
	"conversation_other_replies_button_inside": "Inside statuses",
	"max_depth_in_thread": "Maximum number of levels in thread to display by default",
	"post_status_content_type": "Post status content type",
	"default_post_status_content_type": "Default post status content type",
	"sensitive_by_default": "Mark posts as sensitive by default",
	"stop_gifs": "Pause animated images until you hover on them",
	"non_square_emoji": "Allow non-square emoji",
	"streaming": "Automatically show new posts when scrolled to the top",
	"auto_update": "Show new posts automatically",
	"user_mutes": "Users",
	"useStreamingApi": "Receive posts and notifications real-time",
	"use_websockets": "Use websockets (Realtime updates)",
	"text": "Text",
	"theme": "Theme",
	"theme_old": "Theme editor (old)",
	"theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
	"theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
	"theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
	"tooltipRadius": "Tooltips/alerts",
	"type_domains_to_mute": "Search domains to mute",
	"upload_a_photo": "Upload a photo",
	"upload_picture": "Upload picture",
	"select_picture": "Select picture",
	"user_settings": "User Settings",
	"values": {
	"false": "no",
	"true": "yes"
	},
	"virtual_scrolling": "Optimize timeline rendering",
	"use_at_icon": "Display {'@'} symbol as an icon instead of text",
	"mention_link_display": "Display mention links",
	"mention_link_display_short": "always as short names (e.g. {'@'}foo)",
	"mention_link_display_full_for_remote": "as full names only for remote users (e.g. {'@'}foo{'@'}example.org)",
	"mention_link_display_full": "always as full names (e.g. {'@'}foo{'@'}example.org)",
	"mention_link_use_tooltip": "Show user card when clicking mention links",
	"mention_link_show_avatar": "Show user avatar beside the link",
	"mention_link_show_avatar_quick": "Show user avatar next to mentions",
	"mention_link_fade_domain": "Fade domains (e.g. {'@'}example.org in {'@'}foo{'@'}example.org)",
	"mention_link_bolden_you": "Highlight mention of you when you are mentioned",
	"user_popover_avatar_action": "Popover avatar click action",
	"user_popover_avatar_action_zoom": "Zoom the avatar",
	"user_popover_avatar_action_close": "Close the popover",
	"user_popover_avatar_action_open": "Open profile",
	"user_popover_avatar_overlay": "Show user popover over user avatar",
	"user_card_left_justify": "Justify user bio to the left",
	"user_card_hide_personal_marks": "Hide personal marks (highlight/note) in user profiles",
	"posts_appearance": "Posts Appearance",
	"fun": "Fun",
	"greentext": "Meme arrows",
	"plaintext_quotes": "Highlight plaintext {0}",
	"greentext_quotes": ">quotes",
	"show_yous": "Show (You)s",
	"notifications": "Notifications",
	"notification_setting_annoyance": "Annoyance",
	"notification_setting_drawer_marks_as_seen": "Closing drawer (mobile) marks all notifications as read",
	"notification_setting_ignore_inactionable_seen": "Ignore read state of inactionable notifications (likes, repeats etc)",
	"notification_setting_ignore_inactionable_seen_tip": "This will not actually mark those notifications as read, and you'll still get desktop notifications about them if you chose so",
	"notification_setting_unseen_at_top": "Show unread notifications above others",
	"notification_setting_filters": "Filters",
	"notification_setting_filters_chrome_push": "On some browsers (chrome) it might be impossible to completely filter out notifications by type when they arrive by Push",
	"notification_setting_block_from_strangers": "Block notifications from users who you do not follow",
	"notification_setting_privacy": "Privacy",
	"notification_setting_hide_notification_contents": "Hide the sender and contents of push notifications",
	"notification_mutes": "To stop receiving notifications from a specific user, use a mute.",
	"notification_blocks": "Blocking a user stops all notifications as well as unsubscribes them.",
	"enable_web_push_notifications": "Enable web push notifications",
	"enable_web_push_always_show": "Always show web push notifications",
	"enable_web_push_always_show_tip": "Some browsers (Chromium, Chrome) require that push messages always result in a notification, otherwise generic 'Website was updated in background' is shown, enable this to prevent this notification from showing, as Chrome seem to hide push notifications if tab is in focus. Can result in showing duplicate notifications on other browsers.",
	"more_settings": "More settings",
	"style": {
	"style_section": "Style",
	"custom_theme_used": "(Custom theme)",
	"custom_style_used": "(Custom style)",
	"stock_theme_used": "(Stock theme)",
	"themes2_outdated": "Editor for Themes V2 is being phased out and will eventually be replaced with a new one that takes advantage of new Themes V3 engine. It should still work but experience might be degraded and inconsistent.",
	"appearance_tab_note": "Changes on this tab do not affect the theme used, so exported theme will be different from what seen in the UI",
	"visual_tweaks_section_note": "Changes in this section do not affect the theme used, exported theme will be different from what seen in the UI",
	"update_preview": "Update preview",
	"themes3": {
	"define": "Override",
	"palette": {
	"label": "Color schemes",
	"name_label": "Color scheme name",
	"import": "Import palette",
	"export": "Export palette",
	"apply": "Apply palette",
	"bg": "Panel background",
	"fg": "Buttons etc.",
	"text": "Text",
	"link": "Links",
	"accent": "Accent color",
	"cRed": "Red color",
	"cBlue": "Blue color",
	"cGreen": "Green color",
	"cOrange": "Orange color",
	"wallpaper": "Wallpaper",
	"v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes",
	"bundled": "Bundled palettes",
	"style": "Palettes provided by selected style",
	"user": "Custom palette",
	"imported": "Imported"
	},
	"editor": {
	"title": "Style editor",
	"reset_style": "Reset",
	"load_style": "Open from file",
	"save_style": "Save",
	"style_name": "Stylesheet name",
	"style_author": "Made by",
	"style_license": "License",
	"style_website": "Website",
	"component_selector": "Component",
	"variant_selector": "Variant",
	"states_selector": "States",
	"main_tab": "Main",
	"shadows_tab": "Shadows",
	"background": "Background color",
	"text_color": "Text color",
	"icon_color": "Icon color",
	"link_color": "Link color",
	"contrast": "Text contrast",
	"roundness": "Roundness",
	"opacity": "Opacity",
	"border_color": "Border color",
	"include_in_rule": "Add to rule",
	"test_string": "TEST",
	"invalid": "Invalid",
	"refresh_preview": "Refresh preview",
	"apply_preview": "Apply",
	"text_auto": {
	"label": "Auto-contrast",
	"no-preserve": "Black or White",
	"preserve": "Keep color",
	"no-auto": "Disabled"
	},
	"component_tab": "Components style",
	"palette_tab": "Color schemes",
	"variables_tab": "Variables (Advanced)",
	"variables": {
	"label": "Variables",
	"name_label": "Name:",
	"type_label": "Type:",
	"type_shadow": "Shadow",
	"type_color": "Color",
	"type_generic": "Generic",
	"virtual_color": "Variable color value"
	}
	},
	"hacks": {
	"underlay_overrides": "Change underlay",
	"underlay_override_mode_none": "Theme default",
	"underlay_override_mode_opaque": "Replace with solid color",
	"underlay_override_mode_transparent": "Remove entirely (might break some themes)",
	"force_interface_roundness": "Override interface roundness/sharpness",
	"forced_roundness_mode_disabled": "Use theme defaults",
	"forced_roundness_mode_sharp": "Force sharp edges",
	"forced_roundness_mode_nonsharp": "Force not-so-sharp (1px roundness) edges",
	"forced_roundness_mode_round": "Force round edges"
	},
	"font": {
	"group-builtin": "Browser default fonts",
	"builtin": {
	"serif": "Serif",
	"sans-serif": "Sans-serif",
	"monospace": "Monospace",
	"inherit": "Unchanged"
	},
	"group-local": "Locally installed fonts",
	"local-unavailable1": "List of locally installed fonts unavailalbe",
	"local-unavailable2": "Use manual entry to specify custom font",
	"font_list_unavailable": "Couldn't get locally installed fonts: {error}",
	"lookup_local_fonts": "Load list of fonts installed on this computer",
	"enter_manually": "Enter font name family manually",
	"entry": "Enter {fontFamily}",
	"select": "Select font",
	"label": "{label} font"
	}
	},
	"interface_font_user_override": "Override theme/browser font used",
	"switcher": {
	"keep_color": "Keep colors",
	"keep_shadows": "Keep shadows",
	"keep_opacity": "Keep opacity",
	"keep_roundness": "Keep roundness",
	"keep_fonts": "Keep fonts",
	"save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme. When all checkboxes unset, exporting theme will save everything.",
	"reset": "Reset",
	"clear_all": "Clear all",
	"clear_opacity": "Clear opacity",
	"load_theme": "Load theme",
	"keep_as_is": "Keep as is",
	"use_snapshot": "Old version",
	"use_source": "New version",
	"help": {
	"upgraded_from_v2": "PleromaFE has been upgraded, theme could look a little bit different than you remember.",
	"v2_imported": "File you imported was made for older FE. We try to maximize compatibility but there still could be inconsistencies.",
	"future_version_imported": "File you imported was made in newer version of FE.",
	"older_version_imported": "File you imported was made in older version of FE.",
	"snapshot_present": "Theme snapshot is loaded, so all values are overriden. You can load theme's actual data instead.",
	"snapshot_missing": "No theme snapshot was in the file so it could look different than originally envisioned.",
	"fe_upgraded": "PleromaFE's theme engine upgraded after version update.",
	"fe_downgraded": "PleromaFE's version rolled back.",
	"migration_snapshot_ok": "Just to be safe, theme snapshot loaded. You can try loading theme data.",
	"migration_napshot_gone": "For whatever reason snapshot was missing, some stuff could look different than you remember.",
	"snapshot_source_mismatch": "Versions conflict: most likely FE was rolled back and updated again, if you changed theme using older version of FE you most likely want to use old version, otherwise use new version."
	}
	},
	"common": {
	"color": "Color",
	"opacity": "Opacity",
	"contrast": {
	"hint": "Contrast ratio is {ratio}, it {level} {context}",
	"level": {
	"aa": "meets Level AA guideline (minimal)",
	"aaa": "meets Level AAA guideline (recommended)",
	"bad": "doesn't meet any accessibility guidelines"
	},
	"context": {
	"18pt": "for large (18pt+) text",
	"text": "for text"
	}
	}
	},
	"common_colors": {
	"_tab_label": "Common",
	"main": "Common colors",
	"foreground_hint": "See \"Advanced\" tab for more detailed control",
	"rgbo": "Icons, accents, badges"
	},
	"advanced_colors": {
	"_tab_label": "Advanced",
	"alert": "Alert background",
	"alert_error": "Error",
	"alert_warning": "Warning",
	"alert_neutral": "Neutral",
	"post": "Posts/User bios",
	"badge": "Badge background",
	"popover": "Tooltips, menus, popovers",
	"badge_notification": "Notification",
	"panel_header": "Panel header",
	"top_bar": "Top bar",
	"borders": "Borders",
	"buttons": "Buttons",
	"inputs": "Input fields",
	"faint_text": "Faded text",
	"underlay": "Underlay",
	"wallpaper": "Wallpaper",
	"poll": "Poll graph",
	"icons": "Icons",
	"highlight": "Highlighted elements",
	"pressed": "Pressed",
	"selectedPost": "Selected post",
	"selectedMenu": "Selected menu item",
	"disabled": "Disabled",
	"toggled": "Toggled",
	"tabs": "Tabs",
	"chat": {
	"incoming": "Incoming",
	"outgoing": "Outgoing",
	"border": "Border"
	}
	},
	"radii": {
	"_tab_label": "Roundness"
	},
	"shadows": {
	"_tab_label": "Shadow and lighting",
	"component": "Component",
	"override": "Override",
	"shadow_id": "Shadow #{value}",
	"offset": "Shadow offset",
	"zoom": "Zoom",
	"offset-x": "x:",
	"offset-y": "y:",
	"light_grid": "Use light checkerboard",
	"color_override": "Use different color",
	"name": "Name",
	"blur": "Blur",
	"spread": "Spread",
	"inset": "Inset",
	"raw": "Plain shadow",
	"expression": "Expression (advanced)",
	"empty_expression": "Empty expression",
	"hintV3": "For shadows you can also use the {0} notation to use other color slot.",
	"filter_hint": {
	"always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
	"drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
	"avatar_inset_short": "Separate inset shadow",
	"avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.",
	"spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
	"inset_classic": "Inset shadows will be using {0}"
	},
	"components": {
	"panel": "Panel",
	"panelHeader": "Panel header",
	"topBar": "Top bar",
	"avatar": "User avatar (in profile view)",
	"avatarStatus": "User avatar (in post display)",
	"popup": "Popups and tooltips",
	"button": "Button",
	"buttonHover": "Button (hover)",
	"buttonPressed": "Button (pressed)",
	"buttonPressedHover": "Button (pressed+hover)",
	"input": "Input field"
	}
	},
	"fonts": {
	"_tab_label": "Fonts",
	"help": "Select font to use for elements of UI. For \"custom\" you have to enter exact font name as it appears in system.",
	"components": {
	"interface": "Interface",
	"input": "Input fields",
	"post": "Post text",
	"monospace": "Monospaced text"
	},
	"components_inline": {
	"interface": "interface",
	"input": "input fields",
	"post": "post text",
	"monospace": "monospaced text"
	},
	"override": "Override {0} font",
	"family": "Font name",
	"size": "Size (in px)",
	"weight": "Weight (boldness)",
	"custom": "Custom"
	},
	"preview": {
	"header": "Preview",
	"content": "Content",
	"error": "Example error",
	"button": "Button",
	"text": "A bunch of more {0} and {1}",
	"mono": "content",
	"input": "Just landed in L.A.",
	"faint_link": "helpful manual",
	"fine_print": "Read our {0} to learn nothing useful!",
	"header_faint": "This is fine",
	"checkbox": "I have skimmed over terms and conditions",
	"link": "a nice lil' link"
	}
	},
	"version": {
	"title": "Version",
	"backend_version": "Backend version",
	"frontend_version": "Frontend version"
	},
	"commit_value": "Save",
	"commit_value_tooltip": "Value is not saved, press this button to commit your changes",
	"reset_value": "Reset",
	"reset_value_tooltip": "Reset draft",
	"hard_reset_value": "Hard reset",
	"hard_reset_value_tooltip": "Remove setting from storage, forcing use of default value",
	"cache": "Cache",
	"clear_asset_cache": "Clear asset cache",
	"clear_emoji_cache": "Clear emoji cache",
	"compact_profiles": "Reduce profile height on user pages"
	},
	"admin_dash": {
	"window_title": "Administration",
	"wip_notice": "This admin dashboard is experimental and WIP, {adminFeLink}.",
	"old_ui_link": "old admin UI available here",
	"reset_all": "Reset all",
	"commit_all": "Save all",
	"tabs": {
	"nodb": "No DB Config",
	"instance": "Instance",
	"users": "Users",
	"limits": "Limits",
	"frontends": "Front-ends",
	"mailer": "EMails",
	"media_proxy": "Media Proxy",
	"emoji": "Emoji",
	"uploads": "Uploads",
	"monitoring": "Monitoring",
	"registrations": "Registrations",
	"links": "Links",
	"job_queues": "Job Queues",
	"auth": "Auth",
	"posts": "Posts",
	"rate_limit": "Rate Limits",
	"http": "HTTP",
	"federation": "Federation",
	"other": "Other"
	},
	"posts": {
	"global": "Global settings",
	"local": "Local posts",
	"remote": "Remote posts"
	},
	"other": {
	"uncategorized": "Uncategorized",
	"user_backup": "User Backup",
	"reports": "Reports",
	"privileges": "Privileges"
	},
	"monitoring": {
	"builtins": "Built-in Tools",
	"prometheus": "Prometheus Exporter"
	},
	"federation": {
	"global": "Global settings",
	"restrictions": "Restrictions",
	"activitypub": "ActivityPub"
	},
	"auth": {
	"MFA": "Multi-factor Authentication",
	"LDAP": "LDAP Settings",
	"OAuth": "Oauth2 settings",
	"TOTP": "One-time Passwords (TOTP)",
	"backup_codes": "Backup codes"
	},
	"job_queues": {
	"Gun": {
	"title": "Gun queues",
	"connections_pools": "Gun connections pool",
	"pools": {
	"title": "Gun worker pools",
	"default": "Default pool",
	"federation": "Federation pool",
	"media": "Media pool",
	"rich_media": "Rich media pool",
	"upload": "Upload pool"
	}
	},
	"Hackney": {
	"title": "Hackney pools",
	"federation": "Federation",
	"media": "Media",
	"rich_media": "Rich media",
	"upload": "Upload"
	},
	"queues": "Queues"
	},
	"rate_limit": {
	"rate_limit": "Rate Limit",
	"amount": "Amount",
	"unauthenticated": "Unauthenticated",
	"authenticated": "Authenticated",
	"period": "Time period",
	"separate": "Separate rate limits for authenticated/unauthenticated users"
	},
	"nodb": {
	"heading": "Database config is disabled",
	"text": "You need to change backend config files so that {property} is set to {value}, see more in {documentation}.",
	"documentation": "documentation",
	"text2": "Most configuration options will be unavailable."
	},
	"captcha": {
	"native": "Native",
	"kocaptcha": "KoCaptcha"
	},
	"http": {
	"outbound": "Outgoing connections",
	"incoming": "Incoming connections",
	"security": "HTTP Security",
	"web_push": "Web Push",
	"web_push_description": "Web Push VAPID settings. You can use the mix task web_push.gen.keypair to generate it."
	},
	"registrations": {
	"welcome": {
	"title": "Welcome message",
	"description": "Send new users a message when they sign up",
	"direct_message": "Via direct message",
	"chat_message": "Via chat",
	"email_message": "Via email"
	},
	"restrictions": "Restrictions",
	"autofollow": "Autofollow"
	},
	"links": {
	"no_scheme": "No scheme",
	"link_previews": "Link previews",
	"link_formatter": "Link formatter"
	},
	"uploads": {
	"attachments": "Attachments settings",
	"upload": "Upload",
	"local_uploader": "Local files",
	"filenames": "Filenames, Titles and Descriptions",
	"uploader_settings": "Uploader settings"
	},
	"media_proxy": {
	"basic": "Basic Settings",
	"invalidation": "Cache Invalidation",
	"limits": "Limits",
	"thumbnails": "Thumbnail Generation",
	"invalidation_settings": "Cache Invalidation"
	},
	"mailer": {
	"styling": "Styling",
	"assets": "Assets",
	"colors": "Color palette",
	"adapter": "Mailing Adapter",
	"auth": "Authentication"
	},
	"users": {
	"title": "Users",
	"local_id": "Local ID",
	"no_users_found": "No users found",
	"labels": {
	"query": "Search",
	"nickname": "{'@'}handle",
	"name": "Display Name",
	"name_colon": "Name:",
	"email": "Email",
	"email_colon": "Email:",
	"handle_colon": "Handle:",
	"origin": "Origin",
	"activity": "Activity",
	"privileges": "Privileges"
	},
	"tags": {
	"add_new": "Add New Tag",
	"new_title": "Enter New Tag And Confirm",
	"yes": "Add",
	"no": "Abort"
	},
	"options": {
	"all": "All",
	"only_local": "Only Local",
	"only_external": "Only External",
	"only_active": "Only Active",
	"only_deactivated": "Only Deactivated",
	"only_admins": "Only Admins",
	"only_privileged": "Only Privileged",
	"only_moderators": "Only Moderators",
	"only_unapproved": "Exclude Approved",
	"only_unconfirmed": "Exclude Confirmed"
	},
	"filters": {
	"show_direct": "Show Direct Messages",
	"show_reblogs": "Show Reblogs"
	},
	"indicator": {
	"admin": "Admin",
	"moderator": "Moderator",
	"active": "Active",
	"deactivated": "Deactivated",
	"confirmed": "Confirmed",
	"unconfirmed": "Pending confirmation",
	"approved": "Approved",
	"suggested": "Suggested",
	"unapproved": "Pending approval"
	}
	},
	"limits": {
	"arbitrary_limits": "Arbitrary limits",
	"posts": "Post limits",
	"other": "Misc. limits",
	"uploads": "Attachments limits",
	"users": "User profile limits",
	"profile_fields": "Profile fields limits",
	"user_uploads": "Profile media limits"
	},
	"frontend": {
	"title": "Frontend management",
	"repository": "Repository link",
	"versions": "Available versions",
	"build_url": "Build URL",
	"reinstall": "Reinstall",
	"is_default": "(Default)",
	"is_default_custom": "(Default, version: {version})",
	"install": "Install",
	"install_version": "Install version {version}",
	"more_install_options": "More install options",
	"more_default_options": "More default setting options",
	"set_default": "Set default",
	"set_default_version": "Set version {version} as default",
	"wip_notice": "Please note that this section is a WIP and lacks certain features as backend implementation of front-end management is incomplete.",
	"default_frontend": "Default frontend",
	"default_frontend_tip": "Default frontend will be shown to all users. Currently there's no way to for a user to select personal frontend. If you switch away from PleromaFE you'll most likely have to use old and buggy AdminFE to do instance configuration until we replace it.",
	"default_frontend_unavail": "Default frontend settings are not available, as this requires configuration in the database",
	"available_frontends": "Available for install",
	"failure_installing_frontend": "Failed to install frontend {version}: {reason}",
	"success_installing_frontend": "Frontend {version} successfully installed"
	},
	"emoji": {
	"global_actions": "Global actions",
	"reload": "Reload emoji",
	"reload_short": "Refresh",
	"advanced": "Advanced",
	"importFS": "Import emoji from filesystem",
	"import_pack": "Upload emoji pack",
	"import_pack_short": "Import",
	"error": "Error: {0}",
	"create_pack": "Create pack",
	"delete_pack": "Delete pack",
	"new_pack_name": "New pack name",
	"create": "Create",
	"emoji_packs": "Emoji packs",
	"remote_packs": "Remote packs",
	"remote_packs_short": "Remote",
	"do_list": "List",
	"remote_pack_instance": "Remote pack instance",
	"emoji_pack": "Emoji pack",
	"edit_pack": "Edit pack",
	"metadata": "Metadata",
	"description": "Description",
	"homepage": "Homepage",
	"fallback_src": "Fallback source",
	"fallback_sha256": "Fallback SHA256",
	"share": "Share",
	"save": "Save",
	"save_meta": "Save metadata",
	"revert_meta": "Revert metadata",
	"delete": "Delete",
	"revert": "Revert",
	"add_file": "Add file",
	"adding_new": "Adding new emoji",
	"shortcode": "Shortcode",
	"filename": "Filename",
	"emoji_source": "Emoji file source",
	"upload_url": "Upload from URL",
	"new_shortcode": "Shortcode, leave blank to infer",
	"new_filename": "Filename, leave blank to infer",
	"delete_confirm": "Are you sure you want to delete {0}?",
	"download_pack": "Download pack",
	"downloading_pack": "Downloading {0}",
	"download": "Download",
	"download_as_name": "New name",
	"download_as_name_full": "New name, leave blank to reuse",
	"files": "Files",
	"editing": "Editing {0}",
	"copying": "Copying {0}",
	"copy_to": "Copy to",
	"copy_to_pack": "Copy to local pack",
	"delete_title": "Delete?",
	"metadata_changed": "Metadata different from saved",
	"emoji_changed": "Unsaved emoji file changes, check highlighted emoji",
	"replace_warning": "This will REPLACE the local pack of the same name",
	"copied_successfully": "Successfully copied emoji \"{0}\" to pack \"{1}\""
	},
	"generic_enforcement": {
	"if_available": "If available",
	"always": "Always",
	"never": "Never"
	},
	"instance": {
	"instance": "Instance information",
	"registrations": "User sign-ups",
	"captcha_header": "CAPTCHA",
	"kocaptcha": "KoCaptcha settings",
	"pwa": {
	"manifest": "PWA Manifest",
	"optional": "(optional)",
	"no_icons": "No icons defined",
	"icon": {
	"purpose": "Icon purpose",
	"any": "Any",
	"monochrome": "Monochrome",
	"maskable": "Maskable"
	}
	},
	"misc_brand": "Miscellaneous elements",
	"branding": "Branding",
	"access": "Instance access",
	"rich_metadata": "Metadata",
	"restrict": {
	"header": "Restrict access for anonymous visitors",
	"description": "Detailed setting for allowing/disallowing access to certain aspects of API. By default (indeterminate state) it will disallow if instance is not public, ticked checkbox means disallow access even if instance is public, unticked means allow access even if instance is private. Please note that unexpected behavior might happen if some settings are set, i.e. if profile access is disabled posts will show without profile information.",
	"timelines": "Timelines access",
	"profiles": "User profiles access",
	"activities": "Statuses/activities access"
	},
	":unauthenticated": "Unauthenticated",
	":all": "Everyone"
	},
	"temp_overrides": {
	":pleroma": {
	":connections_pool": {
	":max_idle_time": {
	"label": "Maximum idle time",
	"description": "Maximum idle time before CONFIRM"
	},
	":retry": {
	"label": "Retry",
	"description": "Number of retries for making a connection CONFIRM"
	}
	},
	+ ":hackney_pools": {
	+ ":rich_media": {
	+ "label": "Rich media",
	+ "description": "idk",
	+ ":max_connections": {
	+ "label": "Max connections",
	+ "description": "Number workers in the pool."
	+ },
	+ ":timeout": {
	+ "label": "Timeout",
	+ "description": "Timeout while `hackney` will wait for response."
	+ }
	+ }
	+ },
	":pools": {
	":rich_media": {
	"label": "Rich media",
	- "description": "idk"
	+ "description": "idk",
	+ ":size": {
	+ "label": "Size",
	+ "description": "Maximum number of concurrent requests in the pool."
	+ },
	+ ":max_waiting": {
	+ "label": "Max waiting",
	+ "description": "Maximum number of requests waiting for other requests to finish. After this number is reached, the pool will start returning errors when a new request is made"
	+ },
	+ ":recv_timeout": {
	+ "label": "Recv timeout",
	+ "description": "Timeout for the pool while gun will wait for response"
	+ }
	}
	},
	":rate_limit": {
	":oauth_app_creation": {
	"label": "OAuth app creation",
	"description": "For registering new OAuth App ID"
	},
	":ap_routes": {
	"label": "ActivityPub",
	"description": "Federation endpoints"
	},
	":account_confirmation_resend": {
	"label": "Account confirmation resend",
	"description": "How often user can resend confirmation mail"
	}
	},
	"Pleroma_DOT_Formatter": {
	":attribute_toggle": {
	"label": "Set {attr} attribute"
	},
	":truncate_toggle": {
	"label": "Truncate"
	},
	":class": {
	"label": "Value"
	},
	":rel": {
	"label": "Value"
	}
	},
	"Pleroma_DOT_Uploaders_DOT_Uploader": {
	":timeout": {
	"label": "Timeout",
	"description": "Amount of milliseconds before dropping connection"
	}
	},
	"Pleroma_DOT_Upload": {
	":default_description": {
	"label": "Default description",
	"description": "Default description to give to a file. Setting it to ':filename' will use file's filename as description."
	}
	},
	":instance": {
	":public": {
	"label": "Instance is public",
	"description": "Disabling this will make all API accessible only for logged-in users, this will make Public and Federated timelines inaccessible to anonymous visitors."
	},
	":limit_to_local_content": {
	"label": "Limit search to local content",
	"description": "Disables global network search for unauthenticated (default), all users or none"
	},
	":description_limit": {
	"label": "Limit",
	"description": "Character limit for attachment descriptions"
	},
	":background_image": {
	"label": "Background image",
	"description": "Background image (primarily used by PleromaFE)"
	}
	},
	":http_security": {
	":allow_unsafe_eval": {
	"label": "Allow unsafe-eval",
	"description": "Allow unsafe evaluation of scripts (required for Flash support)"
	},
	":report_url": {
	"label": "Report URL",
	"description": "URL to report security violations to"
	}
	}
	}
	}
	},
	"time": {
	"unit": {
	"days": "{0} day \| {0} days",
	"days_short": "{0}d",
	"days_suffix": "day(s)",
	"hours": "{0} hour \| {0} hours",
	"hours_short": "{0}h",
	"hours_suffix": "hour(s)",
	"minutes": "{0} minute \| {0} minutes",
	"minutes_short": "{0}min",
	"minutes_suffix": "minute(s)",
	"months": "{0} month \| {0} months",
	"months_short": "{0}mo",
	"months_suffix": "month(s)",
	"seconds": "{0} second \| {0} seconds",
	"seconds_short": "{0}s",
	"seconds_suffix": "second(s)",
	"weeks": "{0} week \| {0} weeks",
	"weeks_short": "{0}w",
	"weeks_suffix": "week(s)",
	"years": "{0} year \| {0} years",
	"years_short": "{0}y",
	"years_suffix": "year(s)"
	},
	"in_future": "in {0}",
	"in_past": "{0} ago",
	"now": "just now",
	"now_short": "now"
	},
	"timeline": {
	"collapse": "Collapse",
	"conversation": "Conversation",
	"error": "Error fetching timeline: {0}",
	"load_older": "Load older statuses",
	"no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated",
	"repeated": "repeated",
	"show_new": "Show new",
	"reload": "Reload",
	"up_to_date": "Up-to-date",
	"no_more_statuses": "No more statuses",
	"no_statuses": "No statuses",
	"socket_reconnected": "Realtime connection established",
	"socket_broke": "Realtime connection lost: CloseEvent code {0}",
	"quick_view_settings": "Quick view settings",
	"quick_filter_settings": "Quick filter settings",
	"filter_settings": "Filter"
	},
	"status": {
	"favorites": "Favorites",
	"repeats": "Repeats",
	"quotes": "Quotes",
	"repeat_confirm": "Do you really want to repeat this status?",
	"repeat_confirm_title": "Repeat confirmation",
	"repeat_confirm_accept_button": "Repeat",
	"repeat_confirm_cancel_button": "Do not repeat",
	"delete": "Delete status",
	"delete_error": "Error deleting status: {0}",
	"edit": "Edit status",
	"edited_at": "(last edited {time})",
	"pin": "Pin on profile",
	"unpin": "Unpin from profile",
	"pinned": "Pinned",
	"bookmark": "Bookmark",
	"unbookmark": "Unbookmark",
	"delete_confirm": "Do you really want to delete this status?",
	"delete_confirm_title": "Delete confirmation",
	"delete_confirm_accept_button": "Delete",
	"delete_confirm_cancel_button": "Keep",
	"reply_to": "Reply to",
	"reply_to_with_icon": "{icon} {replyTo}",
	"reply_to_with_arg": "{replyToWithIcon} {user}",
	"mentions": "Mentions",
	"replies_list": "Replies:",
	"replies_list_with_others": "Replies (+{numReplies} other): \| Replies (+{numReplies} others):",
	"mute_ellipsis": "Mute…",
	"mute_user": "Mute user",
	"unmute_user": "Unmute user",
	"mute_domain": "Mute domain",
	"unmute_domain": "Unmute domain",
	"mute_conversation": "Mute conversation",
	"unmute_conversation": "Unmute conversation",
	"status_unavailable": "Status unavailable",
	"copy_link": "Copy link to status",
	"external_source": "External source",
	"muted_words": "Wordfiltered: {word} \| Wordfiltered: {word} and {numWordsMore} more words",
	"muted_filters": "Filtered: {name} \| Wordfiltered: {name} and {filtersMore} more words",
	"multi_reason_mute": "{main} + one more reason \| {main} + {numReasonsMore} more reasons",
	"muted_user": "User muted",
	"thread_muted": "Thread muted",
	"thread_muted_and_words": ", has words:",
	"sensitive_muted": "Muting sensitive content",
	"bot_muted": "Muting bot content",
	"show_full_subject": "Show full subject",
	"hide_full_subject": "Hide full subject",
	"show_content": "Show content",
	"hide_content": "Hide content",
	"status_deleted": "This post was deleted",
	"unknown_user": "unknown user",
	"unknown_user_info": "Unable to fetch information about this user",
	"nsfw": "NSFW",
	"expand": "Expand",
	"you": "(You)",
	"plus_more": "+{number} more",
	"many_attachments": "Post has {number} attachment(s)",
	"collapse_attachments": "Collapse attachments",
	"show_all_attachments": "Show all attachments",
	"show_attachment_in_modal": "Show in media modal",
	"show_attachment_description": "Preview description (open attachment for full description)",
	"attachment_description": "Attachment description",
	"hide_attachment": "Hide attachment",
	"remove_attachment": "Remove attachment",
	"attachment_stop_flash": "Stop Flash player",
	"move_up": "Shift attachment left",
	"move_down": "Shift attachment right",
	"open_gallery": "Open gallery",
	"thread_hide": "Hide this thread",
	"thread_show": "Show this thread",
	"thread_show_full": "Show everything under this thread ({numStatus} status in total, max depth {depth}) \| Show everything under this thread ({numStatus} statuses in total, max depth {depth})",
	"thread_show_full_with_icon": "{icon} {text}",
	"thread_follow": "See the remaining part of this thread ({numStatus} status in total) \| See the remaining part of this thread ({numStatus} statuses in total)",
	"thread_follow_with_icon": "{icon} {text}",
	"ancestor_follow": "See {numReplies} other reply under this status \| See {numReplies} other replies under this status",
	"ancestor_follow_with_icon": "{icon} {text}",
	"show_all_conversation_with_icon": "{icon} {text}",
	"show_all_conversation": "Show full conversation ({numStatus} other status) \| Show full conversation ({numStatus} other statuses)",
	"show_only_conversation_under_this": "Only show replies to this status",
	"status_history": "Status history",
	"reaction_count_label": "{num} person reacted \| {num} people reacted",
	"hide_quote": "Hide the quoted status",
	"display_quote": "Display the quoted status",
	"invisible_quote": "Quoted status unavailable: {link}",
	"more_actions": "More actions on this status",
	"loading": "Loading...",
	"load_error": "Unable to load status: {error}",
	"admin_change_scope": "Change visibility",
	"mark_as_sensitive": "Sensitive",
	"mark_as_non-sensitive": "Non-sensitive"
	},
	"user_card": {
	"approve": "Approve",
	"approve_confirm_title": "Approve confirmation",
	"approve_confirm_accept_button": "Approve",
	"approve_confirm_cancel_button": "Do not approve",
	"approve_confirm": "Do you want to approve {user}'s follow request?",
	"block": "Block",
	"blocked": "Blocked!",
	"block_confirm_title": "Block confirmation",
	"block_confirm": "Do you really want to block {user}?",
	"block_confirm_accept_button": "Block",
	"block_confirm_cancel_button": "Do not block",
	"deactivated": "Deactivated",
	"deny": "Deny",
	"deny_confirm_title": "Deny confirmation",
	"deny_confirm_accept_button": "Deny",
	"deny_confirm_cancel_button": "Do not deny",
	"deny_confirm": "Do you want to deny {user}'s follow request?",
	"edit_profile": "Edit profile",
	"favorites": "Favorites",
	"follow": "Follow",
	"follow_cancel": "Cancel request",
	"follow_sent": "Request sent!",
	"follow_progress": "Requesting…",
	"follow_unfollow": "Unfollow",
	"unfollow_confirm_title": "Unfollow confirmation",
	"unfollow_confirm": "Do you really want to unfollow {user}?",
	"unfollow_confirm_accept_button": "Unfollow",
	"unfollow_confirm_cancel_button": "Do not unfollow",
	"followees": "Following",
	"followers": "Followers",
	"following": "Following!",
	"follows_you": "Follows you!",
	"hidden": "Hidden",
	"its_you": "It's you!",
	"media": "Media",
	"mention": "Mention",
	"message": "Message",
	"mute": "Mute",
	"muted": "Muted",
	"mute_confirm_title": "Mute confirmation",
	"mute_confirm": "Do you really want to mute {user}?",
	"mute_domain_confirm": "Do you really want to mute entire {domain}?",
	"mute_confirm_accept_button": "Mute",
	"mute_confirm_cancel_button": "Do not mute",
	"mute_or": "or",
	"expire_in": "Expire in",
	"expire_mute_message": "Are you sure you want to mute {0}?",
	"expire_block_message": "Are you sure you want to block {0}?",
	"dont_ask_again_mute": "Always mute users this way",
	"dont_ask_again_block": "Always block users this way",
	"mute_block_temporarily": "Temporarily",
	"mute_block_forever": "Forever",
	"mute_block_never": "Never",
	"mute_block_ask": "Ask",
	"default_mute_expiration": "Always mute users",
	"default_block_expiration": "Always block users",
	"default_expiration_time": "Expire in",
	"mute_expires_forever": "Muted forever",
	"mute_expires_at": "Muted until {0}",
	"block_expires_forever": "Blocked forever",
	"block_expires_at": "Blocked until {0}",
	"mute_duration_prompt": "Mute this user for (0 for indefinite time):",
	"statuses_per_day": "Statuses per day",
	"remote_follow": "Remote follow",
	"remove_follower": "Remove follower",
	"remove_follower_confirm_title": "Remove follower confirmation",
	"remove_follower_confirm_accept_button": "Remove",
	"remove_follower_confirm_cancel_button": "Keep",
	"remove_follower_confirm": "Do you really want to remove {user} from your followers?",
	"report": "Report",
	"statuses": "Statuses",
	"subscribe": "Subscribe",
	"unsubscribe": "Unsubscribe",
	"unblock": "Unblock",
	"unblock_progress": "Unblocking…",
	"block_progress": "Blocking…",
	"unmute": "Unmute",
	"unmute_progress": "Unmuting…",
	"mute_progress": "Muting…",
	"hide_repeats": "Hide repeats",
	"show_repeats": "Show repeats",
	"bot": "Bot",
	"group": "Group",
	"birthday": "Born {birthday}",
	"joined": "Joined",
	"admin_data": {
	"data": "Administrative info",
	"registration_reason": "Registration reason",
	"tags": "Tags"
	},
	"admin_menu": {
	"moderation": "Moderation",
	"grant_admin": "Grant Admin",
	"revoke_admin": "Revoke Admin",
	"grant_moderator": "Grant Moderator",
	"revoke_moderator": "Revoke Moderator",
	"activate_account": "Activate",
	"deactivate_account": "Deactivate",
	"delete_account": "Delete",
	"suggest_account": "Add to suggested",
	"remove_suggested_account": "Remove from suggested",
	"approve_account": "Approve",
	"confirm_account": "Confirm",
	"show_statuses": "Show all posts",

	"disable_mfa": "Disable MFA",

	"force_nsfw": "Mark all posts as NSFW",
	"strip_media": "Remove media from posts",
	"force_unlisted": "Force posts to be unlisted",
	"sandbox": "Force posts to be followers-only",
	"disable_remote_subscription": "Disallow following user from remote instances",
	"disable_any_subscription": "Disallow following user at all",
	"quarantine": "Disallow user posts from federating",

	"require_password_change": "Require Password Change",
	"resend_confirmation": "Resend Confirmation Email",
	"confirm_modal": {
	"delete_title": "User deletion",
	"delete_content": "Delete user {user}? \| Delete {count} users?",
	"delete_content_2": "This will permanently delete the data from this accounts and deactivate it. Are you absolutely sure?",
	"activate_title": "User activation",
	"activate_content": "Activate user {user}? \| Activate {count} users?",
	"deactivate_content": "Dectivate user {user}? \| Dectivate {count} users?",
	"approval_title": "Approve users",
	"approval_content": "Approve user {user}? \| Approve {count} users?",
	"confirm_title": "Confirm users",
	"confirm_content": "Approve user {user}? \| Approve {count} users?",
	"suggest_title": "Suggest users",
	"add_suggest_content": "Add user {user} to suggested users list? \| Add {count} users to suggested users list?",
	"remove_suggest_content": "Remove user {user} from suggested users list? \| Add {count} users to suggested users list?",
	"rights_title": "Promote users",
	"grant_rights_content": "Grant user {user} {name} role? \| Grant {count} users {name} role?",
	"revoke_rights_content": "Revoke {name} role from user {user}? \| Revoke {name} from {count} users?",
	"tag_title": "Assign user policy",
	"assign_tag_content": "Assign {user} a {name} policy? \| Assign {name} policy to {count} users?",
	"unassign_tag_content": "Unassign policy {name} from {user}? \| Unassign policy {name} from {count} users?",
	"resend_confirmation_title": "Email confirmation resend",
	"resend_confirmation_content": "Resend confirmation email to {count} users?",
	"disable_mfa_title": "Disable MFA",
	"disable_mfa_content": "Disable Mult-Factor Authentication for {count} users?",
	"require_password_change_title": "Force password change",
	"require_password_change_content": "Force {count} users to change password on next login?",
	"add": "Add",
	"remove": "Remove",
	"delete": "Delete",
	"activate": "Activate",
	"deactivate": "Deactivate",
	"grant": "Grant",
	"revoke": "Revoke",
	"approve": "Approve",
	"confirm": "Confirm",
	"assign": "Assign",
	"unassign": "Unassign",
	"send": "Send"
	}
	},
	"highlight_new": {
	"disabled": "Don't highlight",
	"solid": "Solid background",
	"striped": "Striped background",
	"side": "Side stripe"
	},
	"personal_note": "Personal note",
	"note_blank_click": "Click to add note",
	"highlight_header": "Highlight user's posts and mentions",
	"tags": {
	"mrf_tag:media-force-nsfw": "Mark as sensitive",
	"mrf_tag:media-strip": "Remove attachments",
	"mrf_tag:force-unlisted": "Force unlisted",
	"mrf_tag:sandbox": "Remove from public timelines",
	"mrf_tag:disable-remote-subscription": "Reject non-local follow requests",
	"mrf_tag:disable-any-subscription": "Reject any follow requests"
	}
	},
	"user_profile": {
	"timeline_title": "User timeline",
	"profile_does_not_exist": "Sorry, this profile does not exist.",
	"profile_loading_error": "Sorry, there was an error loading this profile."
	},
	"user_reporting": {
	"title": "Reporting {0}",
	"add_comment_description": "The report will be sent to your instance moderators. You can provide an explanation of why you are reporting this account below:",
	"additional_comments": "Additional comments",
	"forward_description": "The account is from another server. Send a copy of the report there as well?",
	"forward_to": "Forward to {0}",
	"submit": "Submit",
	"generic_error": "An error occurred while processing your request."
	},
	"who_to_follow": {
	"more": "More",
	"who_to_follow": "Who to follow"
	},
	"tool_tip": {
	"media_upload": "Upload media",
	"mentions": "Mentions",
	"repeat": "Repeat",
	"unrepeat": "Unrepeat",
	"reply": "Reply",
	"favorite": "Favorite",
	"unfavorite": "Unfavorite",
	"add_reaction": "Add Reaction",
	"add_quote": "Add quote",
	"user_settings": "User Settings",
	"accept_follow_request": "Accept follow request",
	"reject_follow_request": "Reject follow request",
	"bookmark": "Bookmark",
	"toggle_expand": "Expand or collapse notification to show post in full",
	"toggle_mute": "Expand or collapse notification to reveal muted content",
	"autocomplete_available": "{number} result is available. Use up and down keys to navigate through them. \| {number} results are available. Use up and down keys to navigate through them."
	},
	"upload": {
	"error": {
	"base": "Upload failed.",
	"message": "Upload failed: {0}",
	"file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
	"default": "Try again later"
	},
	"file_size_units": {
	"B": "B",
	"KiB": "KiB",
	"MiB": "MiB",
	"GiB": "GiB",
	"TiB": "TiB"
	}
	},
	"search": {
	"people": "People",
	"hashtags": "Hashtags",
	"person_talking": "{count} person talking",
	"people_talking": "{count} people talking",
	"no_results": "No results",
	"no_more_results": "No more results",
	"load_more": "Load more results"
	},
	"password_reset": {
	"forgot_password": "Forgot password?",
	"password_reset": "Password reset",
	"instruction": "Enter your email address or username. We will send you a link to reset your password.",
	"placeholder": "Your email or username",
	"check_email": "Check your email for a link to reset your password.",
	"return_home": "Return to the home page",
	"too_many_requests": "You have reached the limit of attempts, try again later.",
	"password_reset_disabled": "Password reset is disabled. Please contact your instance administrator.",
	"password_reset_required": "You must reset your password to log in.",
	"password_reset_required_but_mailer_is_disabled": "You must reset your password, but password reset is disabled. Please contact your instance administrator."
	},
	"chats": {
	"you": "You:",
	"message_user": "Message {nickname}",
	"delete": "Delete",
	"chats": "Chats",
	"new": "New Chat",
	"empty_message_error": "Cannot post empty message",
	"more": "More",
	"delete_confirm": "Do you really want to delete this message?",
	"error_loading_chat": "Something went wrong when loading the chat.",
	"error_sending_message": "Something went wrong when sending the message.",
	"empty_chat_list_placeholder": "You don't have any chats yet. Start a new chat!"
	},
	"bookmarks": {
	"manage_bookmark_folders": "Manage bookmark folders"
	},
	"lists": {
	"lists": "Lists",
	"new": "New List",
	"title": "List title",
	"search": "Search users",
	"create": "Create",
	"save": "Save changes",
	"delete": "Delete list",
	"following_only": "Limit to Following",
	"manage_lists": "Manage lists",
	"manage_members": "Manage list members",
	"add_members": "Search for more users",
	"remove_from_list": "Remove from list",
	"add_to_list": "Add to list",
	"is_in_list": "Already in list",
	"editing_list": "Editing list {listTitle}",
	"creating_list": "Creating new list",
	"update_title": "Save Title",
	"really_delete": "Really delete list?",
	"error": "Error manipulating lists: {0}"
	},
	"file_type": {
	"audio": "Audio",
	"video": "Video",
	"image": "Image",
	"file": "File"
	},
	"display_date": {
	"today": "Today"
	},
	"update": {
	"big_update_title": "Please bear with us",
	"big_update_content": "We haven't had a release in a while, so things might look and feel different than what you're used to.",
	"big_update_content2": "We implemented synchronized settings! This means (nearly) all your settings are now properly synchronized between devices and sessions. We try to migrate settings from old config but migration is performed only once, so some settings might be incorrect.",
	"update_bugs": "Please report any issues and bugs on {pleromaForgejo}, as we have changed a lot, and although we test thoroughly and use development versions ourselves, we may have missed some things. We welcome your feedback and suggestions on issues you might encounter, or how to improve Pleroma and Pleroma-FE.",
	"update_bugs2": "Let us know if you don't want certain setting synchronized on {pleromaForgejo}.",
	"update_bugs_gitlab": "Pleroma GitLab",
	"update_bugs_forgejo": "Pleroma Forgejo",
	"update_changelog": "For more details on what's changed, see {theFullChangelog}.",
	"update_changelog_here": "the full changelog",
	"art_by": "Art by {linkToArtist}"
	},
	"unicode_domain_indicator": {
	"tooltip": "This domain contains non-ascii characters."
	},
	"drafts": {
	"drafts": "Drafts",
	"no_drafts": "You have no drafts",
	"clean_drafts": "Remove all drafts",
	"empty": "(No content)",
	"poll_tooltip": "Draft contains a poll",
	"continue": "Continue composing",
	"save": "Save without posting",
	"abandon": "Abandon draft",
	"abandon_confirm_title": "Abandon confirmation",
	"abandon_confirm": "Do you really want to abandon this draft?",
	"abandon_confirm_accept_button": "Abandon",
	"abandon_confirm_cancel_button": "Keep",
	"abandon_all_confirm": "Do you really want to abandon all drafts?",
	"replying": "Replying to {statusLink}",
	"editing": "Editing {statusLink}",
	"unavailable": "(unavailable)"
	},
	"splash": {
	"loading": "Loading...",
	"theme": "Applying theme, please wait warmly...",
	"fun_1": "Drink more water",
	"fun_2": "Take it easy!",
	"fun_3": "Suya...",
	"fun_4": "My Pleroma machine is full power!",
	"error": "Something went wrong"
	},
	"bookmark_folders": {
	"select_folder": "Select bookmark folder",
	"creating_folder": "Creating bookmark folder",
	"editing_folder": "Editing folder {folderName}",
	"emoji": "Emoji",
	"name": "Folder name",
	"new": "New Folder",
	"create": "Create folder",
	"delete": "Delete folder",
	"update_folder": "Save changes",
	"really_delete": "Do you really want to delete the folder?",
	"error": "Error manipulating bookmark folders: {0}"
	}
	}
	diff --git a/src/modules/api.js b/src/modules/api.js
	index 72d7fb4d79..232d1776d2 100644
	--- a/src/modules/api.js
	+++ b/src/modules/api.js
	@@ -1,344 +1,344 @@
	import { Socket } from 'phoenix'

	import { maybeShowChatNotification } from '../services/chat_utils/chat_utils.js'

	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	import { useShoutStore } from 'src/stores/shout.js'

	import { fetchTimeline } from 'src/api/timelines.js'
	import {
	getMastodonSocketURI,
	ProcessedWS,
	WSConnectionStatus,
	} from 'src/api/websocket.js'
	import followRequestFetcher from 'src/services/follow_request_fetcher/follow_request_fetcher.service'
	import notificationsFetcher from 'src/services/notifications_fetcher/notifications_fetcher.service.js'
	import timelineFetcher from 'src/services/timeline_fetcher/timeline_fetcher.service.js'

	const retryTimeout = (multiplier) => 1000 * multiplier

	const api = {
	state: {
	retryMultiplier: 1,
	fetchers: {},
	socket: null,
	mastoUserSocket: null,
	mastoUserSocketStatus: null,
	followRequests: [],
	},
	getters: {
	followRequestCount: (state) => state.followRequests.length,
	},
	mutations: {
	addFetcher(state, { fetcherName, fetcher }) {
	state.fetchers[fetcherName] = fetcher
	},
	removeFetcher(state, { fetcherName }) {
	state.fetchers[fetcherName].stop()
	delete state.fetchers[fetcherName]
	},
	setWsToken(state, token) {
	state.wsToken = token
	},
	setSocket(state, socket) {
	state.socket = socket
	},
	setFollowRequests(state, value) {
	state.followRequests = value
	},
	setMastoUserSocketStatus(state, value) {
	state.mastoUserSocketStatus = value
	},
	incrementRetryMultiplier(state) {
	state.retryMultiplier = Math.max(++state.retryMultiplier, 3)
	},
	resetRetryMultiplier(state) {
	state.retryMultiplier = 1
	},
	},
	actions: {
	/**
	* Global MastoAPI socket control, in future should disable ALL sockets/(re)start relevant sockets
	*
	* @param {Boolean} [initial] - whether this enabling happened at boot time or not
	*/
	enableMastoSockets(store, initial) {
	const { state, dispatch, commit } = store
	// Do not initialize unless nonexistent or closed
	if (
	state.mastoUserSocket &&
	![WebSocket.CLOSED, WebSocket.CLOSING].includes(
	state.mastoUserSocket.getState(),
	)
	) {
	return
	}
	if (initial) {
	commit('setMastoUserSocketStatus', WSConnectionStatus.STARTING_INITIAL)
	} else {
	commit('setMastoUserSocketStatus', WSConnectionStatus.STARTING)
	}
	return dispatch('startMastoUserSocket')
	},
	disableMastoSockets(store) {
	const { state, dispatch, commit } = store
	if (!state.mastoUserSocket) return
	commit('setMastoUserSocketStatus', WSConnectionStatus.DISABLED)
	return dispatch('stopMastoUserSocket')
	},

	// MastoAPI 'User' sockets
	startMastoUserSocket(store) {
	return new Promise((resolve, reject) => {
	try {
	const { state, commit, dispatch, rootState } = store
	const timelineData = rootState.statuses.timelines.friends

	const credentials = useOAuthStore().token
	const url = getMastodonSocketURI({ credentials })

	state.mastoUserSocket = ProcessedWS({
	url,
	id: 'Unified',
	credentials,
	})

	state.mastoUserSocket.addEventListener(
	'pleroma:authenticated',
	() => {
	state.mastoUserSocket.subscribe('user')
	},
	)
	state.mastoUserSocket.addEventListener(
	'message',
	({ detail: message }) => {
	if (!message) return // pings
	if (message.event === 'notification') {
	dispatch('addNewNotifications', {
	notifications: [message.notification],
	older: false,
	})
	} else if (message.event === 'update') {
	dispatch('addNewStatuses', {
	statuses: [message.status],
	userId: false,
	showImmediately: timelineData.visibleStatuses.length === 0,
	timeline: 'friends',
	})
	} else if (message.event === 'status.update') {
	dispatch('addNewStatuses', {
	statuses: [message.status],
	userId: false,
	showImmediately:
	message.status.id in timelineData.visibleStatusesObject,
	timeline: 'friends',
	})
	} else if (message.event === 'delete') {
	dispatch('deleteStatusById', message.id)
	} else if (message.event === 'pleroma:chat_update') {
	// The setTimeout wrapper is a temporary band-aid to avoid duplicates for the user's own messages when doing optimistic sending.
	// The cause of the duplicates is the WS event arriving earlier than the HTTP response.
	// This setTimeout wrapper can be removed once the commit `8e41baff` is in the stable Pleroma release.
	// (`8e41baff` adds the idempotency key to the chat message entity, which PleromaFE uses when it's available, and it makes this artificial delay unnecessary).
	setTimeout(() => {
	dispatch('addChatMessages', {
	chatId: message.chatUpdate.id,
	messages: [message.chatUpdate.lastMessage],
	})
	dispatch('updateChat', { chat: message.chatUpdate })
	maybeShowChatNotification(store, message.chatUpdate)
	}, 100)
	}
	},
	)
	state.mastoUserSocket.addEventListener('open', () => {
	// Do not show notification when we just opened up the page
	if (
	state.mastoUserSocketStatus !==
	WSConnectionStatus.STARTING_INITIAL
	) {
	useInterfaceStore().pushGlobalNotice({
	level: 'success',
	messageKey: 'timeline.socket_reconnected',
	timeout: 5000,
	})
	}
	// Stop polling if we were errored or disabled
	if (
	new Set([
	WSConnectionStatus.ERROR,
	WSConnectionStatus.DISABLED,
	]).has(state.mastoUserSocketStatus)
	) {
	dispatch('stopFetchingTimeline', { timeline: 'friends' })
	dispatch('stopFetchingNotifications')
	dispatch('stopFetchingChats')
	}
	commit('resetRetryMultiplier')
	commit('setMastoUserSocketStatus', WSConnectionStatus.JOINED)
	})
	state.mastoUserSocket.addEventListener(
	'error',
	({ detail: error }) => {
	console.error('Error in MastoAPI websocket:', error)
	// TODO is this needed?
	dispatch('clearOpenedChats')
	},
	)
	state.mastoUserSocket.addEventListener(
	'close',
	({ detail: closeEvent }) => {
	const ignoreCodes = new Set([
	1000, // Normal (intended) closure
	1001, // Going away
	])
	const { code } = closeEvent
	if (ignoreCodes.has(code)) {
	console.debug(
	`Not restarting socket becasue of closure code ${code} is in ignore list`,
	)
	commit('setMastoUserSocketStatus', WSConnectionStatus.CLOSED)
	} else {
	console.warn(
	`MastoAPI websocket disconnected, restarting. CloseEvent code: ${code}`,
	)
	setTimeout(() => {
	dispatch('startMastoUserSocket')
	}, retryTimeout(state.retryMultiplier))
	commit('incrementRetryMultiplier')
	if (state.mastoUserSocketStatus !== WSConnectionStatus.ERROR) {
	dispatch('startFetchingTimeline', { timeline: 'friends' })
	dispatch('startFetchingNotifications')
	dispatch('startFetchingChats')
	useInterfaceStore().pushGlobalNotice({
	level: 'error',
	messageKey: 'timeline.socket_broke',
	messageArgs: [code],
	timeout: 5000,
	})
	}
	commit('setMastoUserSocketStatus', WSConnectionStatus.ERROR)
	}
	dispatch('clearOpenedChats')
	},
	)
	resolve()
	} catch (e) {
	reject(e)
	}
	})
	},
	stopMastoUserSocket({ state, dispatch }) {
	dispatch('startFetchingTimeline', { timeline: 'friends' })
	dispatch('startFetchingNotifications')
	dispatch('startFetchingChats')
	state.mastoUserSocket.close()
	},

	// Timelines
	startFetchingTimeline(
	store,
	{
	timeline = 'friends',
	tag = false,
	userId = false,
	listId = false,
	statusId = false,
	bookmarkFolderId = false,
	},
	) {
	if (
	timeline === 'favourites' &&
	!useInstanceCapabilitiesStore().pleromaPublicFavouritesAvailable
	)
	return
	if (store.state.fetchers[timeline]) return

	const fetcher = timelineFetcher.startFetching({
	timeline,
	store,
	userId,
	listId,
	statusId,
	bookmarkFolderId,
	tag,
	credentials: useOAuthStore().token,
	})

	store.commit('addFetcher', { fetcherName: timeline, fetcher })
	},
	stopFetchingTimeline(store, timeline) {
	const fetcher = store.state.fetchers[timeline]
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: timeline, fetcher })
	},

	fetchTimeline(store, { timeline, ...rest }) {
	fetchTimeline({
	store,
	timeline,
	...rest,
	credentials: useOAuthStore().token,
	})
	},

	// Notifications
	startFetchingNotifications(store) {
	if (store.state.fetchers.notifications) return
	const fetcher = notificationsFetcher.startFetching({
	store,
	credentials: useOAuthStore().token,
	})
	store.commit('addFetcher', { fetcherName: 'notifications', fetcher })
	},
	stopFetchingNotifications(store) {
	const fetcher = store.state.fetchers.notifications
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: 'notifications', fetcher })
	},

	// Follow requests
	startFetchingFollowRequests(store) {
	if (store.state.fetchers.followRequests) return
	- const fetcher = followRequestFetcher.startFetchingFollowRequests({
	+ const fetcher = followRequestFetcher.startFetching({
	store,
	credentials: useOAuthStore().token,
	})

	store.commit('addFetcher', { fetcherName: 'followRequests', fetcher })
	},
	stopFetchingFollowRequests(store) {
	const fetcher = store.state.fetchers.followRequests
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: 'followRequests', fetcher })
	},

	// Pleroma websocket
	setWsToken(store, token) {
	store.commit('setWsToken', token)
	},
	initializeSocket({ commit, state, rootState }) {
	// Set up websocket connection
	const token = state.wsToken
	if (
	useInstanceCapabilitiesStore().shoutAvailable &&
	typeof token !== 'undefined' &&
	state.socket === null
	) {
	const socket = new Socket('/socket', { params: { token } })
	socket.connect()

	commit('setSocket', socket)
	useShoutStore().initializeShout(socket)
	}
	},
	disconnectFromSocket({ commit, state }) {
	state.socket && state.socket.disconnect()
	commit('setSocket', null)
	},
	},
	}

	export default api
	diff --git a/src/modules/statuses.js b/src/modules/statuses.js
	index 445d1d4363..5bec225ce0 100644
	--- a/src/modules/statuses.js
	+++ b/src/modules/statuses.js
	@@ -1,899 +1,903 @@
	import {
	each,
	find,
	findIndex,
	first,
	isArray,
	last,
	maxBy,
	merge,
	minBy,
	omitBy,
	remove,
	slice,
	} from 'lodash'

	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useOAuthStore } from 'src/stores/oauth.js'

	import {
	fetchEmojiReactions,
	fetchFavoritedByUsers,
	fetchPinnedStatuses,
	fetchRebloggedByUsers,
	fetchScrobbles,
	fetchStatus,
	fetchStatusHistory,
	fetchStatusSource,
	search2,
	} from 'src/api/public.js'
	import {
	bookmarkStatus,
	deleteStatus,
	favorite,
	muteConversation,
	pinOwnStatus,
	reactWithEmoji,
	retweet,
	unbookmarkStatus,
	unfavorite,
	unmuteConversation,
	unpinOwnStatus,
	unreactWithEmoji,
	unretweet,
	} from 'src/api/user.js'

	const emptyTl = (userId = 0) => ({
	statuses: [],
	statusesObject: {},
	faves: [],
	visibleStatuses: [],
	visibleStatusesObject: {},
	newStatusCount: 0,
	maxId: 0,
	minId: 0,
	minVisibleId: 0,
	loading: false,
	followers: [],
	friends: [],
	userId,
	flushMarker: 0,
	})

	export const defaultState = () => ({
	allStatuses: [],
	scrobblesNextFetch: {},
	allStatusesObject: {},
	conversationsObject: {},
	maxId: 0,
	favorites: new Set(),
	timelines: {
	mentions: emptyTl(),
	public: emptyTl(),
	user: emptyTl(),
	favorites: emptyTl(),
	media: emptyTl(),
	publicAndExternal: emptyTl(),
	friends: emptyTl(),
	tag: emptyTl(),
	dms: emptyTl(),
	bookmarks: emptyTl(),
	list: emptyTl(),
	bubble: emptyTl(),
	},
	})

	export const prepareStatus = (status) => {
	// Set deleted flag
	status.deleted = false

	// To make the array reactive
	status.attachments = status.attachments \|\| []

	return status
	}

	const mergeOrAdd = (arr, obj, item) => {
	const oldItem = obj[item.id]

	if (oldItem) {
	// We already have this, so only merge the new info.
	// We ignore null values to avoid overwriting existing properties with missing data
	// we also skip 'user' because that is handled by users module
	merge(
	oldItem,
	omitBy(item, (v, k) => v === null \|\| k === 'user'),
	)
	// Reactivity fix.
	oldItem.attachments.splice(oldItem.attachments.length)
	return { item: oldItem, new: false }
	} else {
	// This is a new item, prepare it
	prepareStatus(item)
	arr.push(item)
	obj[item.id] = item
	return { item, new: true }
	}
	}

	const sortById = (a, b) => {
	const seqA = Number(a.id)
	const seqB = Number(b.id)
	const isSeqA = !Number.isNaN(seqA)
	const isSeqB = !Number.isNaN(seqB)
	if (isSeqA && isSeqB) {
	return seqA > seqB ? -1 : 1
	} else if (isSeqA && !isSeqB) {
	return 1
	} else if (!isSeqA && isSeqB) {
	return -1
	} else {
	return a.id > b.id ? -1 : 1
	}
	}

	const sortTimeline = (timeline) => {
	timeline.visibleStatuses = timeline.visibleStatuses.sort(sortById)
	timeline.statuses = timeline.statuses.sort(sortById)
	timeline.minVisibleId = (last(timeline.visibleStatuses) \|\| {}).id
	return timeline
	}

	const getLatestScrobble = (state, user) => {
	const scrobblesSupport =
	useInstanceCapabilitiesStore().pleromaScrobblesAvailable

	if (!scrobblesSupport \|\| !user.name \|\| user.id === 'undefined') {
	return
	}

	if (
	state.scrobblesNextFetch[user.id] &&
	state.scrobblesNextFetch[user.id] > Date.now()
	) {
	return
	}

	state.scrobblesNextFetch[user.id] = Date.now() + 24 * 60 * 60 * 1000
	if (!scrobblesSupport) return
	fetchScrobbles({ accountId: user.id })
	.then(({ data: scrobbles }) => {
	if (scrobbles?.error) {
	useInstanceCapabilitiesStore().set('pleromaScrobblesAvailable', false)
	return
	}

	if (scrobbles.length > 0) {
	user.latestScrobble = scrobbles[0]

	state.scrobblesNextFetch[user.id] = Date.now() + 60 * 1000
	}
	})
	.catch((e) => {
	console.warn('cannot fetch scrobbles', e)
	})
	}

	// Add status to the global storages (arrays and objects maintaining statuses) except timelines
	const addStatusToGlobalStorage = (state, data) => {
	getLatestScrobble(state, data.user)
	const result = mergeOrAdd(state.allStatuses, state.allStatusesObject, data)
	if (result.new) {
	// Add to conversation
	const status = result.item
	const conversationsObject = state.conversationsObject
	const conversationId = status.statusnet_conversation_id
	if (conversationsObject[conversationId]) {
	conversationsObject[conversationId].push(status)
	} else {
	conversationsObject[conversationId] = [status]
	}
	}
	return result
	}

	const addNewStatuses = (
	state,
	{
	statuses,
	showImmediately = false,
	timeline,
	user = {},
	noIdUpdate = false,
	userId,
	pagination = {},
	},
	) => {
	// Sanity check
	if (!isArray(statuses)) {
	return false
	}

	const allStatuses = state.allStatuses
	const timelineObject = state.timelines[timeline]

	// Mismatch between API pagination and our internal minId/maxId tracking systems:
	// pagination.maxId is the oldest of the returned statuses when fetching older,
	// and pagination.minId is the newest when fetching newer. The names come directly
	// from the arguments they're supposed to be passed as for the next fetch.
	const minNew =
	pagination.maxId \|\| (statuses.length > 0 ? minBy(statuses, 'id').id : 0)
	const maxNew =
	pagination.minId \|\| (statuses.length > 0 ? maxBy(statuses, 'id').id : 0)

	const newer =
	timeline &&
	(maxNew > timelineObject.maxId \|\| timelineObject.maxId === 0) &&
	statuses.length > 0
	const older =
	timeline &&
	(minNew < timelineObject.minId \|\| timelineObject.minId === 0) &&
	statuses.length > 0

	if (!noIdUpdate && newer) {
	timelineObject.maxId = maxNew
	}
	if (!noIdUpdate && older) {
	timelineObject.minId = minNew
	}

	// This makes sure that user timeline won't get data meant for other
	// user. I.e. opening different user profiles makes request which could
	// return data late after user already viewing different user profile
	if (
	(timeline === 'user' \|\| timeline === 'media') &&
	timelineObject.userId !== userId
	) {
	return
	}

	const addStatus = (data, showImmediately, addToTimeline = true) => {
	const result = addStatusToGlobalStorage(state, data)
	const status = result.item

	if (result.new) {
	// We are mentioned in a post
	if (
	status.type === 'status' &&
	find(status.attentions, { id: user.id })
	) {
	const mentions = state.timelines.mentions

	// Add the mention to the mentions timeline
	if (timelineObject !== mentions) {
	mergeOrAdd(mentions.statuses, mentions.statusesObject, status)
	mentions.newStatusCount += 1

	sortTimeline(mentions)
	}
	}
	if (status.visibility === 'direct') {
	const dms = state.timelines.dms

	mergeOrAdd(dms.statuses, dms.statusesObject, status)
	dms.newStatusCount += 1

	sortTimeline(dms)
	}
	}

	// Decide if we should treat the status as new for this timeline.
	let resultForCurrentTimeline
	// Some statuses should only be added to the global status repository.
	if (timeline && addToTimeline) {
	resultForCurrentTimeline = mergeOrAdd(
	timelineObject.statuses,
	timelineObject.statusesObject,
	status,
	)
	}

	if (timeline && showImmediately) {
	// Add it directly to the visibleStatuses, don't change
	// newStatusCount
	mergeOrAdd(
	timelineObject.visibleStatuses,
	timelineObject.visibleStatusesObject,
	status,
	)
	} else if (timeline && addToTimeline && resultForCurrentTimeline.new) {
	// Just change newStatuscount
	timelineObject.newStatusCount += 1
	}

	if (status.quote) {
	addStatus(
	status.quote,
	/* showImmediately = */ false,
	/* addToTimeline = */ false,
	)
	}

	return status
	}

	const favoriteStatus = (favorite) => {
	const status = find(allStatuses, { id: favorite.in_reply_to_status_id })
	if (status) {
	// This is our favorite, so the relevant bit.
	if (favorite.user.id === user.id) {
	status.favorited = true
	} else {
	status.fave_num += 1
	}
	}
	return status
	}

	const processors = {
	status: (status) => {
	addStatus(status, showImmediately)
	},
	edit: (status) => {
	addStatus(status, showImmediately)
	},
	retweet: (status) => {
	// RetweetedStatuses are never shown immediately
	const retweetedStatus = addStatus(status.retweeted_status, false, false)

	let retweet
	// If the retweeted status is already there, don't add the retweet
	// to the timeline.
	if (
	timeline &&
	find(timelineObject.statuses, (s) => {
	if (s.retweeted_status) {
	return (
	s.id === retweetedStatus.id \|\|
	s.retweeted_status.id === retweetedStatus.id
	)
	} else {
	return s.id === retweetedStatus.id
	}
	})
	) {
	// Already have it visible (either as the original or another RT), don't add to timeline, don't show.
	retweet = addStatus(status, false, false)
	} else {
	retweet = addStatus(status, showImmediately)
	}

	retweet.retweeted_status = retweetedStatus
	},
	favorite: (favorite) => {
	// Only update if this is a new favorite.
	// Ignore our own favorites because we get info about likes as response to like request
	if (!state.favorites.has(favorite.id)) {
	state.favorites.add(favorite.id)
	favoriteStatus(favorite)
	}
	},
	follow: () => {
	// NOOP, it is known status but we don't do anything about it for now
	},
	default: (unknown) => {
	console.warn('unknown status type', unknown)
	},
	}

	each(statuses, (status) => {
	const type = status.type
	const processor = processors[type] \|\| processors.default
	processor(status)
	})

	// Keep the visible statuses sorted
	if (timeline && !(timeline === 'bookmarks')) {
	sortTimeline(timelineObject)
	}
	}

	const removeStatus = (state, { timeline, userId }) => {
	const timelineObject = state.timelines[timeline]
	if (userId) {
	remove(timelineObject.statuses, { user: { id: userId } })
	remove(timelineObject.visibleStatuses, { user: { id: userId } })
	timelineObject.minVisibleId =
	timelineObject.visibleStatuses.length > 0
	? last(timelineObject.visibleStatuses).id
	: 0
	timelineObject.maxId =
	timelineObject.statuses.length > 0 ? first(timelineObject.statuses).id : 0
	}
	}

	export const mutations = {
	addNewStatuses,
	removeStatus,
	showNewStatuses(state, { timeline }) {
	const oldTimeline = state.timelines[timeline]

	oldTimeline.newStatusCount = 0
	oldTimeline.visibleStatuses = slice(oldTimeline.statuses, 0, 50)
	oldTimeline.minVisibleId = last(oldTimeline.visibleStatuses).id
	oldTimeline.minId = oldTimeline.minVisibleId
	oldTimeline.visibleStatusesObject = {}
	each(oldTimeline.visibleStatuses, (status) => {
	oldTimeline.visibleStatusesObject[status.id] = status
	})
	},
	resetStatuses(state) {
	const emptyState = defaultState()
	Object.entries(emptyState).forEach(([key, value]) => {
	state[key] = value
	})
	},
	clearTimeline(state, { timeline, excludeUserId = false }) {
	const userId = excludeUserId ? state.timelines[timeline].userId : undefined
	state.timelines[timeline] = emptyTl(userId)
	},
	setFavorited(state, { status, value }) {
	const newStatus = state.allStatusesObject[status.id]

	if (newStatus.favorited !== value) {
	if (value) {
	newStatus.fave_num++
	} else {
	newStatus.fave_num--
	}
	}

	newStatus.favorited = value
	},
	setFavoritedConfirm(state, { status, user }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.favorited = status.favorited
	newStatus.fave_num = status.fave_num
	const index = findIndex(newStatus.favoritedBy, { id: user.id })
	if (index !== -1 && !newStatus.favorited) {
	newStatus.favoritedBy.splice(index, 1)
	} else if (index === -1 && newStatus.favorited) {
	newStatus.favoritedBy.push(user)
	}
	},
	setMutedStatus(state, status) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.thread_muted = status.thread_muted

	if (newStatus.thread_muted !== undefined) {
	state.conversationsObject[newStatus.statusnet_conversation_id].forEach(
	(status) => {
	status.thread_muted = newStatus.thread_muted
	},
	)
	}
	},
	setRetweeted(state, { status, value }) {
	const newStatus = state.allStatusesObject[status.id]

	if (newStatus.repeated !== value) {
	if (value) {
	newStatus.repeat_num++
	} else {
	newStatus.repeat_num--
	}
	}

	newStatus.repeated = value
	},
	setRetweetedConfirm(state, { status, user }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.repeated = status.repeated
	newStatus.repeat_num = status.repeat_num
	const index = findIndex(newStatus.rebloggedBy, { id: user.id })
	if (index !== -1 && !newStatus.repeated) {
	newStatus.rebloggedBy.splice(index, 1)
	} else if (index === -1 && newStatus.repeated) {
	newStatus.rebloggedBy.push(user)
	}
	},
	setBookmarked(state, { status, value }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.bookmarked = value
	newStatus.bookmark_folder_id = status.bookmark_folder_id
	},
	setBookmarkedConfirm(state, { status }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.bookmarked = status.bookmarked
	if (status.pleroma)
	newStatus.bookmark_folder_id = status.pleroma.bookmark_folder
	},
	setDeleted(state, { status }) {
	const newStatus = state.allStatusesObject[status.id]
	if (newStatus) newStatus.deleted = true
	},
	setManyDeleted(state, condition) {
	Object.values(state.allStatusesObject).forEach((status) => {
	if (condition(status)) {
	status.deleted = true
	}
	})
	},
	setLoading(state, { timeline, value }) {
	state.timelines[timeline].loading = value
	},
	setNsfw(state, { id, nsfw }) {
	const newStatus = state.allStatusesObject[id]
	newStatus.nsfw = nsfw
	},
	queueFlush(state, { timeline, id }) {
	state.timelines[timeline].flushMarker = id
	},
	queueFlushAll(state) {
	Object.keys(state.timelines).forEach((timeline) => {
	state.timelines[timeline].flushMarker = state.timelines[timeline].maxId
	})
	},
	addRepeats(state, { id, rebloggedByUsers, currentUser }) {
	const newStatus = state.allStatusesObject[id]
	newStatus.rebloggedBy = rebloggedByUsers.filter((_) => _)
	// repeats stats can be incorrect based on polling condition, let's update them using the most recent data
	newStatus.repeat_num = newStatus.rebloggedBy.length
	newStatus.repeated = !!newStatus.rebloggedBy.find(
	({ id }) => currentUser.id === id,
	)
	},
	addFavs(state, { id, favoritedByUsers, currentUser }) {
	const newStatus = state.allStatusesObject[id]
	newStatus.favoritedBy = favoritedByUsers.filter((_) => _)
	// favorites stats can be incorrect based on polling condition, let's update them using the most recent data
	newStatus.fave_num = newStatus.favoritedBy.length
	newStatus.favorited = !!newStatus.favoritedBy.find(
	({ id }) => currentUser.id === id,
	)
	},
	addEmojiReactionsBy(state, { id, emojiReactions }) {
	const status = state.allStatusesObject[id]
	status.emoji_reactions = emojiReactions
	},
	addOwnReaction(state, { id, emoji, currentUser }) {
	const status = state.allStatusesObject[id]
	const reactionIndex = findIndex(status.emoji_reactions, { name: emoji })
	const reaction = status.emoji_reactions[reactionIndex] \|\| {
	name: emoji,
	count: 0,
	accounts: [],
	}

	const newReaction = {
	...reaction,
	count: reaction.count + 1,
	me: true,
	accounts: [...reaction.accounts, currentUser],
	}

	// Update count of existing reaction if it exists, otherwise append at the end
	if (reactionIndex >= 0) {
	status.emoji_reactions[reactionIndex] = newReaction
	} else {
	status.emoji_reactions = [...status.emoji_reactions, newReaction]
	}
	},
	removeOwnReaction(state, { id, emoji, currentUser }) {
	const status = state.allStatusesObject[id]
	const reactionIndex = findIndex(status.emoji_reactions, { name: emoji })
	if (reactionIndex < 0) return

	const reaction = status.emoji_reactions[reactionIndex]
	const accounts = reaction.accounts \|\| []

	const newReaction = {
	...reaction,
	count: reaction.count - 1,
	me: false,
	accounts: accounts.filter((acc) => acc.id !== currentUser.id),
	}

	if (newReaction.count > 0) {
	status.emoji_reactions[reactionIndex] = newReaction
	} else {
	status.emoji_reactions = status.emoji_reactions.filter(
	(r) => r.name !== emoji,
	)
	}
	},
	updateStatusWithPoll(state, { id, poll }) {
	const status = state.allStatusesObject[id]
	status.poll = poll
	},
	setVirtualHeight(state, { statusId, height }) {
	state.allStatusesObject[statusId].virtualHeight = height
	},
	}

	const statuses = {
	state: defaultState(),
	actions: {
	addNewStatuses(
	{ rootState, commit },
	{
	statuses,
	showImmediately = false,
	timeline = false,
	noIdUpdate = false,
	userId,
	pagination,
	},
	) {
	return commit('addNewStatuses', {
	statuses,
	showImmediately,
	timeline,
	noIdUpdate,
	user: rootState.users.currentUser,
	userId,
	pagination,
	})
	},
	fetchStatus({ rootState, dispatch }, id) {
	return fetchStatus({ id }).then(({ data: status }) =>
	dispatch('addNewStatuses', { statuses: [status] }),
	)
	},
	fetchStatusSource({ rootState }, status) {
	return fetchStatusSource({
	id: status.id,
	credentials: useOAuthStore().token,
	}).then(({ data }) => data)
	},
	fetchStatusHistory(_, status) {
	return fetchStatusHistory({ status }).then(({ data }) => data)
	},
	deleteStatus({ rootState, commit }, status) {
	deleteStatus({
	id: status.id,
	credentials: useOAuthStore().token,
	})
	.then(() => {
	commit('setDeleted', { status })
	})
	.catch((e) => {
	useInterfaceStore().pushGlobalNotice({
	level: 'error',
	messageKey: 'status.delete_error',
	messageArgs: [e.message],
	timeout: 5000,
	})
	})
	},
	deleteStatusById({ rootState, commit }, id) {
	const status = rootState.statuses.allStatusesObject[id]
	commit('setDeleted', { status })
	},
	markStatusesAsDeleted({ commit }, condition) {
	commit('setManyDeleted', condition)
	},
	favorite({ rootState, commit }, status) {
	// Optimistic favoriting...
	commit('setFavorited', { status, value: true })
	favorite({
	id: status.id,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) =>
	commit('setFavoritedConfirm', {
	status,
	user: rootState.users.currentUser,
	}),
	)
	},
	unfavorite({ rootState, commit }, status) {
	// Optimistic unfavoriting...
	commit('setFavorited', { status, value: false })
	unfavorite({
	id: status.id,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) =>
	commit('setFavoritedConfirm', {
	status,
	user: rootState.users.currentUser,
	}),
	)
	},
	fetchPinnedStatuses({ rootState, dispatch }, userId) {
	fetchPinnedStatuses({
	id: userId,
	credentials: useOAuthStore().token,
	}).then(({ data: statuses }) =>
	dispatch('addNewStatuses', {
	statuses,
	timeline: 'user',
	userId,
	showImmediately: true,
	noIdUpdate: true,
	}),
	)
	},
	pinStatus({ rootState, dispatch }, statusId) {
	return pinOwnStatus({
	id: statusId,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) =>
	dispatch('addNewStatuses', { statuses: [status] }),
	)
	},
	unpinStatus({ rootState, dispatch }, statusId) {
	return unpinOwnStatus({
	id: statusId,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) =>
	dispatch('addNewStatuses', { statuses: [status] }),
	)
	},
	muteConversation({ rootState, commit }, { id: statusId }) {
	return muteConversation({
	id: statusId,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) => commit('setMutedStatus', status))
	},
	unmuteConversation({ rootState, commit }, { id: statusId }) {
	return unmuteConversation({
	id: statusId,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) => commit('setMutedStatus', status))
	},
	retweet({ rootState, commit }, status) {
	// Optimistic retweeting...
	commit('setRetweeted', { status, value: true })
	retweet({
	id: status.id,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) =>
	commit('setRetweetedConfirm', {
	status: status.retweeted_status,
	user: rootState.users.currentUser,
	}),
	)
	},
	unretweet({ rootState, commit }, status) {
	// Optimistic unretweeting...
	commit('setRetweeted', { status, value: false })
	unretweet({
	id: status.id,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) =>
	commit('setRetweetedConfirm', {
	status,
	user: rootState.users.currentUser,
	}),
	)
	},
	bookmark({ rootState, commit }, status) {
	commit('setBookmarked', { status, value: true })
	bookmarkStatus({
	id: status.id,
	folder_id: status.bookmark_folder_id,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) => {
	commit('setBookmarkedConfirm', { status })
	})
	},
	unbookmark({ rootState, commit }, status) {
	commit('setBookmarked', { status, value: false })
	unbookmarkStatus({
	id: status.id,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) => {
	commit('setBookmarkedConfirm', { status })
	})
	},
	queueFlush({ commit }, { timeline, id }) {
	commit('queueFlush', { timeline, id })
	},
	queueFlushAll({ commit }) {
	commit('queueFlushAll')
	},
	fetchFavsAndRepeats({ rootState, commit }, id) {
	Promise.all([
	fetchFavoritedByUsers({
	id,
	credentials: useOAuthStore().token,
	}).then(({ data }) => data),
	fetchRebloggedByUsers({
	id,
	credentials: useOAuthStore().token,
	}).then(({ data }) => data),
	]).then(([favoritedByUsers, rebloggedByUsers]) => {
	commit('addFavs', {
	id,
	favoritedByUsers,
	currentUser: rootState.users.currentUser,
	})
	commit('addRepeats', {
	id,
	rebloggedByUsers,
	currentUser: rootState.users.currentUser,
	})
	})
	},
	reactWithEmoji({ rootState, dispatch, commit }, { id, emoji }) {
	const currentUser = rootState.users.currentUser
	if (!currentUser) return

	commit('addOwnReaction', { id, emoji, currentUser })
	reactWithEmoji({
	id,
	emoji,
	credentials: useOAuthStore().token,
	}).then(() => {
	dispatch('fetchEmojiReactionsBy', id)
	})
	},
	unreactWithEmoji({ rootState, dispatch, commit }, { id, emoji }) {
	const currentUser = rootState.users.currentUser
	if (!currentUser) return

	commit('removeOwnReaction', { id, emoji, currentUser })
	unreactWithEmoji({
	id,
	emoji,
	currentUser: rootState.users.currentUser,
	}).then(() => {
	dispatch('fetchEmojiReactionsBy', id)
	})
	},
	fetchEmojiReactionsBy({ rootState, commit }, id) {
	return fetchEmojiReactions({
	id,
	credentials: useOAuthStore().token,
	}).then(({ data: emojiReactions }) => {
	commit('addEmojiReactionsBy', {
	id,
	emojiReactions,
	currentUser: rootState.users.currentUser,
	})
	})
	},
	fetchFavs({ rootState, commit }, id) {
	fetchFavoritedByUsers({
	id,
	credentials: useOAuthStore().token,
	}).then(({ data: favoritedByUsers }) =>
	commit('addFavs', {
	id,
	favoritedByUsers,
	currentUser: rootState.users.currentUser,
	}),
	)
	},
	fetchRepeats({ rootState, commit }, id) {
	fetchRebloggedByUsers({
	id,
	credentials: useOAuthStore().token,
	}).then(({ data: rebloggedByUsers }) =>
	commit('addRepeats', {
	id,
	rebloggedByUsers,
	currentUser: rootState.users.currentUser,
	}),
	)
	},
	search(store, { q, resolve, limit, offset, following, type }) {
	return search2({
	q,
	resolve,
	limit,
	offset,
	following,
	type,
	credentials: useOAuthStore().token,
	}).then(({ data }) => {
	store.commit('addNewUsers', data.accounts)
	store.commit(
	'addNewUsers',
	data.statuses.map((s) => s.user).filter((u) => u),
	)
	- data.statuses = store.commit('addNewStatuses', {
	+ store.commit('addNewStatuses', {
	statuses: data.statuses,
	})
	+
	+ data.statuses = data.statuses.map(
	+ (s) => store.state.allStatusesObject[s.id],
	+ )
	return data
	})
	},
	setVirtualHeight({ commit }, { statusId, height }) {
	commit('setVirtualHeight', { statusId, height })
	},
	},
	mutations,
	}

	export default statuses
	diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
	index 2a695f4dbe..0ea0341e2d 100644
	--- a/src/services/style_setter/style_setter.js
	+++ b/src/services/style_setter/style_setter.js
	@@ -1,360 +1,363 @@
	import sum from 'hash-sum'
	import localforage from 'localforage'
	import { chunk, throttle } from 'lodash'

	import { getCssRules } from '../theme_data/css_utils.js'
	import { getEngineChecksum, init } from '../theme_data/theme_data_3.service.js'

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

	+import { promisedRequest } from 'src/api/helpers.js'
	import { ROOT_CONFIG } from 'src/modules/default_config_state.js'

	// On platforms where this is not supported, it will return undefined
	// Otherwise it will return an array
	const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets

	const stylesheets = {}

	export const createStyleSheet = (id, priority = 1000) => {
	if (stylesheets[id]) return stylesheets[id]
	const newStyleSheet = {
	rules: [],
	ready: false,
	priority,
	clear() {
	this.rules = []
	},
	addRule(rule) {
	let newRule = rule
	if (!CSS.supports?.('backdrop-filter', 'blur()')) {
	newRule = newRule.replace(/backdrop-filter:[^;]+;/g, '') // Remove backdrop-filter
	}

	// firefox doesn't like invalid selectors
	if (
	!CSS.supports?.('selector(::-webkit-scrollbar)') &&
	!CSS.supports?.('selector(::-webkit-scrollbar-button)') &&
	!CSS.supports?.('selector(::-webkit-resizer)') &&
	!CSS.supports?.('selector(::-webkit-scrollbar-thumb)') &&
	newRule.startsWith('::-webkit')
	) {
	return
	}
	this.rules.push(
	newRule.replace(/var$--shadowFilter$[^;]*;/g, ''), // Remove shadowFilter references
	)
	},
	}

	stylesheets[id] = newStyleSheet
	return newStyleSheet
	}

	export const adoptStyleSheets = throttle(() => {
	if (supportsAdoptedStyleSheets) {
	document.adoptedStyleSheets = Object.values(stylesheets)
	.filter((x) => x.ready)
	.sort((a, b) => a.priority - b.priority)
	.map((sheet) => {
	const css = new CSSStyleSheet()
	sheet.rules.forEach((r) => css.insertRule(r))
	return css
	})
	} else {
	const holder = document.getElementById('custom-styles-holder')

	for (let i = holder.sheet.cssRules.length - 1; i >= 0; --i) {
	holder.sheet.deleteRule(i)
	}

	Object.values(stylesheets)
	.filter((x) => x.ready)
	.sort((a, b) => a.priority - b.priority)
	.forEach((sheet) => {
	sheet.rules.forEach((r) => holder.sheet.insertRule(r))
	})
	}
	// Some older browsers do not support document.adoptedStyleSheets.
	// In this case, we use the <style> elements.
	// Since the <style> elements we need are already in the DOM, there
	// is nothing to do here.
	}, 500)

	const EAGER_STYLE_ID = 'pleroma-eager-styles'
	const LAZY_STYLE_ID = 'pleroma-lazy-styles'

	const generateTheme = (inputRuleset, callbacks, debug) => {
	const {
	onNewRule = () => {
	/* no-op */
	},
	onLazyFinished = () => {
	/* no-op */
	},
	onEagerFinished = () => {
	/* no-op */
	},
	} = callbacks

	const themes3 = init({
	inputRuleset,
	debug,
	})

	getCssRules(themes3.eager, debug).forEach((rule) => {
	// Hacks to support multiple selectors on same component
	onNewRule(rule, false)
	})
	onEagerFinished()

	// Optimization - instead of processing all lazy rules in one go, process them in small chunks
	// so that UI can do other things and be somewhat responsive while less important rules are being
	// processed
	let counter = 0
	const chunks = chunk(themes3.lazy, 200)
	// let t0 = performance.now()
	const processChunk = () => {
	const chunk = chunks[counter]
	Promise.all(chunk.map((x) => x())).then((result) => {
	getCssRules(
	result.filter((x) => x),
	debug,
	).forEach((rule) => {
	onNewRule(rule, true)
	})
	// const t1 = performance.now()
	// console.debug('Chunk ' + counter + ' took ' + (t1 - t0) + 'ms')
	// t0 = t1
	counter += 1
	if (counter < chunks.length) {
	setTimeout(processChunk, 0)
	} else {
	onLazyFinished()
	}
	})
	}

	return { lazyProcessFunc: processChunk }
	}

	export const tryLoadCache = async () => {
	console.info('Trying to load compiled theme data from cache')
	const cache = await localforage.getItem('pleromafe-theme-cache')
	if (!cache) return null
	try {
	if (
	cache.engineChecksum === getEngineChecksum() &&
	cache.checksum !== undefined &&
	cache.checksum === useMergedConfigStore().mergedConfig.themeChecksum
	) {
	const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10)
	const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20)

	cache.data[0].forEach((rule) => eagerStyles.addRule(rule))
	cache.data[1].forEach((rule) => lazyStyles.addRule(rule))

	eagerStyles.ready = true
	lazyStyles.ready = true

	console.info(`Loaded theme from cache`)
	return true
	} else {
	console.warn("Checksums don't match, cache not usable, clearing")
	localStorage.removeItem('pleroma-fe-theme-cache')
	}
	} catch (e) {
	console.error('Failed to load theme cache:', e)
	return false
	}
	}

	export const applyTheme = (
	input,
	onEagerFinish = () => {
	/* no-op */
	},
	onFinish = () => {
	/* no-op */
	},
	debug,
	) => {
	const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10)
	const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20)

	eagerStyles.clear()
	lazyStyles.clear()

	const { lazyProcessFunc } = generateTheme(
	input,
	{
	onNewRule(rule, isLazy) {
	if (isLazy) {
	lazyStyles.addRule(rule)
	} else {
	eagerStyles.addRule(rule)
	}
	},
	onEagerFinished() {
	eagerStyles.ready = true
	adoptStyleSheets()
	onEagerFinish()
	console.info(
	'Eager part of theme finished, waiting for lazy part to finish to store cache',
	)
	},
	onLazyFinished() {
	lazyStyles.ready = true
	adoptStyleSheets()
	const data = [eagerStyles.rules, lazyStyles.rules]
	const checksum = sum(data)
	const cache = {
	checksum,
	engineChecksum: getEngineChecksum(),
	data,
	}
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'themeChecksum',
	value: checksum,
	})
	onFinish(cache)
	localforage.setItem('pleromafe-theme-cache', cache)
	console.info('Theme cache stored')
	},
	},
	debug,
	)

	setTimeout(lazyProcessFunc, 0)
	}

	const extractStyleConfig = ({
	sidebarColumnWidth,
	contentColumnWidth,
	notifsColumnWidth,
	themeEditorMinWidth,
	emojiReactionsScale,
	emojiSize,
	navbarSize,
	panelHeaderSize,
	textSize,
	forcedRoundness,
	}) => {
	const result = {
	sidebarColumnWidth,
	contentColumnWidth,
	notifsColumnWidth,
	themeEditorMinWidth:
	parseInt(themeEditorMinWidth) === 0 ? 'fit-content' : themeEditorMinWidth,
	emojiReactionsScale,
	emojiSize,
	navbarSize,
	panelHeaderSize,
	textSize,
	}

	switch (forcedRoundness) {
	case 'disable':
	break
	case '0':
	result.forcedRoundness = '0'
	break
	case '1':
	result.forcedRoundness = '1px'
	break
	case '2':
	result.forcedRoundness = '0.4rem'
	break
	default:
	}

	return result
	}

	const defaultStyleConfig = extractStyleConfig(ROOT_CONFIG)

	export const applyStyleConfig = (input) => {
	const config = extractStyleConfig(input)

	if (config === defaultStyleConfig) {
	return
	}

	const rules = Object.entries(config)
	.filter(([, v]) => v)
	.map(([k, v]) => `--${k}: ${v}`)
	.join(';')

	const styleSheet = createStyleSheet('theme-holder', 30)

	styleSheet.clear()
	styleSheet.addRule(`:root { ${rules} }`)

	// TODO find a way to make this not apply to theme previews
	if (Object.hasOwn(config, 'forcedRoundness')) {
	styleSheet.addRule(` *:not(.preview-block) {
	--roundness: var(--forcedRoundness) !important;
	}`)
	}
	styleSheet.ready = true
	adoptStyleSheets()
	}

	-export const getResourcesIndex = async (url, parser = JSON.parse) => {
	+export const getResourcesIndex = async (url, parser = (x) => x) => {
	const cache = 'no-store'
	const customUrl = url.replace(/\.(\w+)$/, '.custom.$1')
	let builtin
	let custom

	const resourceTransform = (resources) => {
	return Object.entries(resources).map(([k, v]) => {
	if (typeof v === 'object') {
	return [k, () => Promise.resolve(v)]
	} else if (typeof v === 'string') {
	return [
	k,
	() =>
	- window
	- .fetch(v, { cache })
	- .then((data) => data.text())
	- .then((text) => parser(text))
	+ promisedRequest({
	+ url: v,
	+ cache,
	+ })
	+ .then(({ data: text }) => parser(text))
	.catch((e) => {
	console.error(e)
	return null
	}),
	]
	} else {
	console.error(`Unknown resource format - ${k} is a ${typeof v}`)
	return [k, null]
	}
	})
	}

	try {
	- const builtinData = await window.fetch(url, { cache })
	- const builtinResources = await builtinData.json()
	- builtin = resourceTransform(builtinResources)
	+ const { data: builtinData } = await promisedRequest({ url, cache })
	+ builtin = resourceTransform(builtinData)
	} catch {
	builtin = []
	console.warn(`Builtin resources at ${url} unavailable`)
	}

	try {
	- const customData = await window.fetch(customUrl, { cache })
	- const customResources = await customData.json()
	- custom = resourceTransform(customResources)
	+ const { data: customData } = await promisedRequest({
	+ url: customUrl,
	+ cache,
	+ })
	+ custom = resourceTransform(customData)
	} catch {
	custom = []
	console.warn(`Custom resources at ${customUrl} unavailable`)
	}

	const total = [...custom, ...builtin]
	if (total.length === 0) {
	return Promise.reject(
	new Error(
	`Resource at ${url} and ${customUrl} completely unavailable. Panicking`,
	),
	)
	}
	return Promise.resolve(Object.fromEntries(total))
	}
	diff --git a/src/stores/interface.js b/src/stores/interface.js
	index 21c1e9f8aa..951811c621 100644
	--- a/src/stores/interface.js
	+++ b/src/stores/interface.js
	@@ -1,767 +1,792 @@
	import { defineStore } from 'pinia'

	import {
	applyTheme,
	getResourcesIndex,
	tryLoadCache,
	} from '../services/style_setter/style_setter.js'
	import { deserialize } from '../services/theme_data/iss_deserializer.js'

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

	import {
	CURRENT_VERSION,
	generatePreset,
	} from 'src/services/theme_data/theme_data.service.js'
	import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'

	export const useInterfaceStore = defineStore('interface', {
	state: () => ({
	localFonts: null,
	themeApplied: false,
	themeChangeInProgress: false,
	themeVersion: 'v3',
	styleNameUsed: null,
	styleDataUsed: null,
	useStylePalette: false, // hack for applying styles from appearance tab
	paletteNameUsed: null,
	paletteDataUsed: null,
	themeNameUsed: null,
	themeDataUsed: null,
	temporaryChangesTimeoutId: null,
	temporaryChangesCountdown: -1, // used for temporary options that revert after a timeout
	temporaryChangesConfirm: () => {
	/* no-op */
	}, // used for applying temporary options
	temporaryChangesRevert: () => {
	/* no-op */
	}, // used for reverting temporary options
	settingsModalState: 'hidden',
	settingsModalLoadedUser: false,
	settingsModalLoadedAdmin: false,
	settingsModalTargetTab: null,
	settingsModalMode: 'user',
	settings: {
	currentSaveStateNotice: null,
	noticeClearTimeout: null,
	notificationPermission: null,
	},
	browserSupport: {
	cssFilter:
	window.CSS &&
	window.CSS.supports &&
	(window.CSS.supports('filter', 'drop-shadow(0 0)') \|\|
	window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')),
	localFonts: typeof window.queryLocalFonts === 'function',
	},
	layoutType: 'normal',
	globalNotices: [],
	+ globalError: null,
	layoutHeight: 0,
	lastTimeline: null,
	foreignProfileBackground: null,
	}),
	actions: {
	setTemporaryChanges({ confirm, revert }) {
	this.temporaryChangesCountdown = 10
	this.temporaryChangesConfirm = confirm
	this.temporaryChangesRevert = revert
	const countdownFunc = () => {
	if (this.temporaryChangesCountdown <= 1) {
	this.temporaryChangesRevert()
	this.clearTemporaryChanges()
	} else {
	this.temporaryChangesCountdown--
	this.temporaryChangesTimeoutId = setTimeout(countdownFunc, 1000)
	}
	}
	this.temporaryChangesTimeoutId = setTimeout(countdownFunc, 1000)
	},
	clearTemporaryChanges() {
	this.temporaryChangesTimeoutId ??
	clearTimeout(this.temporaryChangesTimeoutId)
	this.temporaryChangesTimeoutId = null
	this.temporaryChangesCountdown = -1
	this.temporaryChangesConfirm = () => {
	/* no-op */
	}
	this.temporaryChangesRevert = () => {
	/* no-op */
	}
	},
	setPageTitle(option = '') {
	try {
	document.title = `${option} ${useInstanceStore().instanceIdentity.name}`
	} catch (error) {
	console.error(`${error}`)
	}
	},
	setForeignProfileBackground(url) {
	this.foreignProfileBackground = url
	},
	settingsSaved({ success, error }) {
	if (success) {
	if (this.noticeClearTimeout) {
	clearTimeout(this.noticeClearTimeout)
	}
	this.settings.currentSaveStateNotice = { error: false, data: success }
	this.settings.noticeClearTimeout = setTimeout(
	() => delete this.settings.currentSaveStateNotice,
	2000,
	)
	} else {
	this.settings.currentSaveStateNotice = { error: true, errorData: error }
	}
	},
	setNotificationPermission(permission) {
	this.notificationPermission = permission
	},
	closeSettingsModal() {
	this.settingsModalState = 'hidden'
	},
	openSettingsModal(value) {
	this.settingsModalMode = value
	this.settingsModalState = 'visible'
	if (value === 'user') {
	if (!this.settingsModalLoadedUser) {
	this.settingsModalLoadedUser = true
	}
	} else if (value === 'admin') {
	if (!this.settingsModalLoadedAdmin) {
	this.settingsModalLoadedAdmin = true
	}
	}
	},
	setSettingsModalState(newState) {
	const oldState = this.settingsModalState
	const legal = (() => {
	switch (oldState) {
	case 'minimized':
	return true
	case 'visible':
	return true
	case 'hidden':
	return newState === 'visible'
	}
	})()

	if (legal) {
	this.settingsModalState = newState
	}
	},
	toggleMinimizeSettingsModal() {
	switch (this.settingsModalState) {
	case 'minimized':
	this.settingsModalState = 'visible'
	return
	case 'visible':
	this.settingsModalState = 'minimized'
	return
	case 'hidden':
	return
	default:
	throw new Error(
	`Illegal minimization state of settings modal: ${this.settingsModalState}`,
	)
	}
	},
	clearSettingsModalTargetTab() {
	this.settingsModalTargetTab = null
	},
	openSettingsModalTab(value, mode = 'user') {
	this.settingsModalTargetTab = value
	this.openSettingsModal(mode)
	},
	removeGlobalNotice(notice) {
	this.globalNotices = this.globalNotices.filter((n) => n !== notice)
	},
	+ setGlobalError({ error, instance, info }) {
	+ console.log(info)
	+ switch (info) {
	+ case 'https://vuejs.org/error-reference/#runtime-13': {
	+ this.globalError = {
	+ title: 'general.refresh_required',
	+ content: 'general.refresh_required_content',
	+ // `true` disables cache on Firefox (non-standard)
	+ recover: () => window.location.reload(true),
	+ recoverText: 'general.refresh_required_refresh',
	+ error,
	+ }
	+ break
	+ }
	+ default: {
	+ this.globalError = { error }
	+ break
	+ }
	+ }
	+ console.log(this.globalError)
	+ },
	+ clearGlobalError() {
	+ this.globalError = null
	+ },
	pushGlobalNotice({
	messageKey,
	messageArgs = {},
	level = 'error',
	- timeout = 0,
	+ timeout = 5000,
	}) {
	const notice = {
	messageKey,
	messageArgs,
	level,
	}

	this.globalNotices.push(notice)

	// Adding a new element to array wraps it in a Proxy, which breaks the comparison
	// TODO: Generate UUID or something instead or relying on !== operator?
	const newNotice = this.globalNotices[this.globalNotices.length - 1]
	- if (timeout) {
	+ if (timeout > 0) {
	setTimeout(() => this.removeGlobalNotice(newNotice), timeout)
	}

	return newNotice
	},
	setLayoutHeight(value) {
	this.layoutHeight = value
	},
	setLayoutWidth(value) {
	let width = value
	if (value !== undefined) {
	this.layoutWidth = value
	} else {
	width = this.layoutWidth
	}

	const mobileLayout = width <= 800
	const normalOrMobile = mobileLayout ? 'mobile' : 'normal'
	const { thirdColumnMode } = useMergedConfigStore().mergedConfig
	if (thirdColumnMode === 'none' \|\| !window.vuex.state.users.currentUser) {
	this.layoutType = normalOrMobile
	} else {
	const wideLayout = width >= 1300
	this.layoutType = wideLayout ? 'wide' : normalOrMobile
	}
	},
	setFontsList(value) {
	this.localFonts = [...new Set(value.map((font) => font)).values()]
	},
	queryLocalFonts() {
	if (this.localFonts !== null) return
	this.setFontsList([])

	if (!this.browserSupport.localFonts) {
	return
	}
	window
	.queryLocalFonts()
	.then((fonts) => {
	this.setFontsList(fonts)
	})
	.catch((e) => {
	this.pushGlobalNotice({
	messageKey: 'settings.style.themes3.font.font_list_unavailable',
	messageArgs: {
	error: e,
	},
	level: 'error',
	})
	})
	},
	setLastTimeline(value) {
	this.lastTimeline = value
	},
	async fetchPalettesIndex() {
	try {
	const value = await getResourcesIndex('/static/palettes/index.json')
	useInstanceStore().set({
	path: 'palettesIndex',
	value,
	})
	return value
	} catch (e) {
	console.error('Could not fetch palettes index', e)
	useInstanceStore().set({
	path: 'palettesIndex',
	value: { _error: e },
	})
	return Promise.resolve({})
	}
	},
	setPalette(value) {
	this.resetThemeV3Palette()
	this.resetThemeV2()

	useSyncConfigStore().setPreference({ path: 'simple.palette', value })
	useSyncConfigStore().pushSyncConfig()

	this.applyTheme({ recompile: true })
	},
	setPaletteCustom(value) {
	this.resetThemeV3Palette()
	this.resetThemeV2()

	useSyncConfigStore().setPreference({
	path: 'simple.paletteCustomData',
	value,
	})
	useSyncConfigStore().pushSyncConfig()

	this.applyTheme({ recompile: true })
	},
	async fetchStylesIndex() {
	try {
	const value = await getResourcesIndex(
	'/static/styles/index.json',
	deserialize,
	)
	useInstanceStore().set({ path: 'stylesIndex', value })
	return value
	} catch (e) {
	console.error('Could not fetch styles index', e)
	useInstanceStore().set({
	path: 'simple.stylesIndex',
	value: { _error: e },
	})
	return Promise.resolve({})
	}
	},
	setStyle(value) {
	this.resetThemeV3()
	this.resetThemeV2()
	this.resetThemeV3Palette()

	useSyncConfigStore().setPreference({ path: 'simple.style', value })
	useSyncConfigStore().pushSyncConfig()
	this.useStylePalette = true

	this.applyTheme({ recompile: true }).then(() => {
	this.useStylePalette = false
	})
	},
	setStyleCustom(value) {
	this.resetThemeV3()
	this.resetThemeV2()
	this.resetThemeV3Palette()

	useSyncConfigStore().setPreference({
	path: 'simple.styleCustomData',
	value,
	})
	useSyncConfigStore().pushSyncConfig()

	this.useStylePalette = true
	this.applyTheme({ recompile: true }).then(() => {
	this.useStylePalette = false
	})
	},
	async fetchThemesIndex() {
	try {
	const value = await getResourcesIndex('/static/styles.json')
	useInstanceStore().set({ path: 'themesIndex', value })
	return value
	} catch (e) {
	console.error('Could not fetch themes index', e)
	useInstanceStore().set({
	path: 'themesIndex',
	value: { _error: e },
	})
	return Promise.resolve({})
	}
	},
	setTheme(value) {
	this.resetThemeV3()
	this.resetThemeV3Palette()
	this.resetThemeV2()

	useSyncConfigStore().setPreference({ path: 'simple.theme', value })
	useSyncConfigStore().pushSyncConfig()

	this.applyTheme({ recompile: true })
	},
	setThemeCustom(value) {
	this.resetThemeV3()
	this.resetThemeV3Palette()
	this.resetThemeV2()

	useSyncConfigStore().setPreference({ path: 'simple.customTheme', value })
	useSyncConfigStore().setPreference({
	path: 'simple.customThemeSource',
	value,
	})
	useSyncConfigStore().pushSyncConfig()

	this.applyTheme({ recompile: true })
	},
	resetThemeV3() {
	useSyncConfigStore().setPreference({ path: 'simple.style', value: null })
	useSyncConfigStore().setPreference({
	path: 'simple.styleCustomData',
	value: null,
	})
	},
	resetThemeV3Palette() {
	useSyncConfigStore().setPreference({
	path: 'simple.palette',
	value: null,
	})
	useSyncConfigStore().setPreference({
	path: 'simple.paletteCustomData',
	value: null,
	})
	},
	resetThemeV2() {
	useSyncConfigStore().setPreference({ path: 'simple.theme', value: null })
	useSyncConfigStore().setPreference({
	path: 'simple.customTheme',
	value: null,
	})
	useSyncConfigStore().setPreference({
	path: 'simple.customThemeSource',
	value: null,
	})
	},
	async getThemeData() {
	const getData = async (resource, index, customData, name) => {
	const capitalizedResource =
	resource[0].toUpperCase() + resource.slice(1)
	const result = {}

	if (customData) {
	result.nameUsed = 'custom' // custom data overrides name
	result.dataUsed = customData
	} else {
	result.nameUsed = name

	if (result.nameUsed == null) {
	result.dataUsed = null
	return result
	}

	let fetchFunc = index[result.nameUsed]
	// Fallbacks
	if (!fetchFunc) {
	if (resource === 'style' \|\| resource === 'palette') {
	return result
	}
	const newName = Object.keys(index)[0]
	fetchFunc = index[newName]
	console.warn(
	`${capitalizedResource} with id '${this.styleNameUsed}' not found, trying back to '${newName}'`,
	)
	if (!fetchFunc) {
	console.warn(
	`${capitalizedResource} doesn't have a fallback, defaulting to stock.`,
	)
	fetchFunc = () => Promise.resolve(null)
	}
	}
	result.dataUsed = await fetchFunc()
	}
	return result
	}

	let {
	theme: instanceThemeName,
	style: instanceStyleName,
	palette: instancePaletteName,
	} = useInstanceStore().instanceIdentity

	let { themesIndex, stylesIndex, palettesIndex } = useInstanceStore()

	const {
	style: userStyleName,
	styleCustomData: userStyleCustomData,
	palette: userPaletteName,
	paletteCustomData: userPaletteCustomData,
	} = useMergedConfigStore().mergedConfig

	let {
	theme: userThemeV2Name,
	customTheme: userThemeV2Snapshot,
	customThemeSource: userThemeV2Source,
	} = useMergedConfigStore().mergedConfig

	let majorVersionUsed

	console.debug(
	`User V3 palette: ${userPaletteName}, style: ${userStyleName} , custom: ${!!userStyleCustomData}`,
	)
	console.debug(
	`User V2 name: ${userThemeV2Name}, source: ${!!userThemeV2Source}, snapshot: ${!!userThemeV2Snapshot}`,
	)

	console.debug(
	`Instance V3 palette: ${instancePaletteName}, style: ${instanceStyleName}`,
	)
	console.debug('Instance V2 theme: ' + instanceThemeName)

	if (
	userPaletteName \|\|
	userPaletteCustomData \|\|
	userStyleName \|\|
	userStyleCustomData \|\|
	// User V2 overrides instance V3
	((instancePaletteName \|\| instanceStyleName) &&
	instanceThemeName == null &&
	userThemeV2Name == null)
	) {
	// Palette and/or style overrides V2 themes
	instanceThemeName = null
	userThemeV2Name = null
	userThemeV2Source = null
	userThemeV2Snapshot = null

	majorVersionUsed = 'v3'
	} else if (
	userThemeV2Name \|\|
	userThemeV2Snapshot \|\|
	userThemeV2Source \|\|
	instanceThemeName
	) {
	majorVersionUsed = 'v2'
	} else {
	// if all fails fallback to v3
	majorVersionUsed = 'v3'
	}

	if (majorVersionUsed === 'v3') {
	const result = await Promise.all([
	this.fetchPalettesIndex(),
	this.fetchStylesIndex(),
	])

	palettesIndex = result[0]
	stylesIndex = result[1]
	} else {
	// Promise.all just to be uniform with v3
	const result = await Promise.all([this.fetchThemesIndex()])

	themesIndex = result[0]
	}

	this.themeVersion = majorVersionUsed

	console.debug('Version used', majorVersionUsed)

	if (majorVersionUsed === 'v3') {
	this.themeDataUsed = null
	this.themeNameUsed = null

	const style = await getData(
	'style',
	stylesIndex,
	userStyleCustomData,
	userStyleName \|\| instanceStyleName,
	)
	this.styleNameUsed = style.nameUsed
	this.styleDataUsed = style.dataUsed

	let firstStylePaletteName = null
	style.dataUsed
	?.filter((x) => x.component === '@palette')
	.map((x) => {
	const cleanDirectives = Object.fromEntries(
	Object.entries(x.directives).filter(([k]) => k),
	)

	return { name: x.variant, ...cleanDirectives }
	})
	.forEach((palette) => {
	const key = 'style.' + palette.name.toLowerCase().replace(/ /g, '_')
	if (!firstStylePaletteName) firstStylePaletteName = key
	palettesIndex[key] = () => Promise.resolve(palette)
	})

	const palette = await getData(
	'palette',
	palettesIndex,
	userPaletteCustomData,
	this.useStylePalette
	? firstStylePaletteName
	: userPaletteName \|\| instancePaletteName,
	)

	if (this.useStylePalette) {
	useSyncConfigStore().setPreference({
	path: 'simple.palette',
	value: firstStylePaletteName,
	})
	useSyncConfigStore().pushSyncConfig()
	}

	this.paletteNameUsed = palette.nameUsed
	this.paletteDataUsed = palette.dataUsed

	if (this.paletteDataUsed) {
	this.paletteDataUsed.link =
	this.paletteDataUsed.link \|\| this.paletteDataUsed.accent
	this.paletteDataUsed.accent =
	this.paletteDataUsed.accent \|\| this.paletteDataUsed.link
	}
	if (Array.isArray(this.paletteDataUsed)) {
	const [
	name,
	bg,
	fg,
	text,
	link,
	cRed = '#FF0000',
	cGreen = '#00FF00',
	cBlue = '#0000FF',
	cOrange = '#E3FF00',
	] = palette.dataUsed
	this.paletteDataUsed = {
	name,
	bg,
	fg,
	text,
	link,
	accent: link,
	cRed,
	cBlue,
	cGreen,
	cOrange,
	}
	}
	console.debug('Palette data used', palette.dataUsed)
	} else {
	this.styleNameUsed = null
	this.styleDataUsed = null
	this.paletteNameUsed = null
	this.paletteDataUsed = null

	const theme = await getData(
	'theme',
	themesIndex,
	userThemeV2Source \|\| userThemeV2Snapshot,
	userThemeV2Name \|\| instanceThemeName,
	)
	this.themeNameUsed = theme.nameUsed
	this.themeDataUsed = theme.dataUsed
	}
	},
	async setThemeApplied() {
	this.themeApplied = true
	},
	async applyTheme({ recompile = false } = {}) {
	const { mergedConfig } = useMergedConfigStore()
	const { forceThemeRecompilation, themeDebug } = mergedConfig

	this.themeChangeInProgress = true
	// If we're not forced to recompile try using
	// cache (tryLoadCache return true if load successful)

	const forceRecompile = forceThemeRecompilation \|\| recompile

	await this.getThemeData()

	if (!forceRecompile && !themeDebug && (await tryLoadCache())) {
	this.themeChangeInProgress = false
	return this.setThemeApplied()
	}
	window.splashUpdate('splash.theme')

	try {
	const paletteIss = (() => {
	if (!this.paletteDataUsed) return null
	const result = {
	component: 'Root',
	directives: {},
	}

	Object.entries(this.paletteDataUsed)
	.filter(([k]) => k !== 'name')
	.forEach(([k, v]) => {
	let issRootDirectiveName
	switch (k) {
	case 'background':
	issRootDirectiveName = 'bg'
	break
	case 'foreground':
	issRootDirectiveName = 'fg'
	break
	default:
	issRootDirectiveName = k
	}
	result.directives['--' + issRootDirectiveName] = 'color \| ' + v
	})
	return result
	})()

	const theme2ruleset =
	this.themeDataUsed &&
	convertTheme2To3(normalizeThemeData(this.themeDataUsed))
	const hacks = []

	const fontMap = {
	Interface: 'Root',
	Input: 'Input',
	Posts: 'Post',
	Monospace: 'Root',
	}

	Object.entries(fontMap).forEach(([font, component]) => {
	const family = mergedConfig[`font${font}`]
	const variable = font === 'Monospace' ? '--monoFont' : '--font'
	if (family) {
	hacks.push({
	component,
	directives: {
	[variable]: `generic \| "${family}"`,
	},
	})
	}
	})

	if (mergedConfig.underlay !== 'none') {
	const newRule = {
	component: 'Underlay',
	directives: {},
	}
	if (mergedConfig.underlay === 'opaque') {
	newRule.directives.opacity = 1
	newRule.directives.background = '--wallpaper'
	}
	if (mergedConfig.underlay === 'transparent') {
	newRule.directives.opacity = 0
	}
	hacks.push(newRule)
	}

	const rulesetArray = [
	theme2ruleset,
	this.styleDataUsed,
	paletteIss,
	hacks,
	].filter((x) => x)

	return applyTheme(
	rulesetArray.flat(),
	() => this.setThemeApplied(),
	() => {
	this.themeChangeInProgress = false
	},
	themeDebug,
	)
	} catch (e) {
	console.error(e)
	window.splashError(e)
	}
	},
	},
	})

	export const normalizeThemeData = (input) => {
	let themeData, themeSource

	if (input.themeFileVerison === 1) {
	// this might not be even used at all, some leftover of unimplemented code in V2 editor
	return generatePreset(input).theme
	} else if (
	Object.hasOwn(input, '_pleroma_theme_version') \|\|
	Object.hasOwn(input, 'source') \|\|
	Object.hasOwn(input, 'theme')
	) {
	// We got passed a full theme file
	themeData = input.theme
	themeSource = input.source
	} else if (
	Object.hasOwn(input, 'themeEngineVersion') \|\|
	Object.hasOwn(input, 'colors')
	) {
	// We got passed a source/snapshot
	themeData = input
	themeSource = input
	}
	// New theme presets don't have 'theme' property, they use 'source'

	let out // shout, shout let it all out
	if (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION) {
	// There are some themes in wild that have completely broken source
	out = { ...(themeData \|\| {}), ...themeSource }
	} else {
	out = themeData
	}

	// generatePreset here basically creates/updates "snapshot",
	// while also fixing the 2.2 -> 2.3 colors/shadows/etc
	return generatePreset(out).theme
	}
	diff --git a/src/sw.js b/src/sw.js
	index 1e7abd3de4..b7629b5f29 100644
	--- a/src/sw.js
	+++ b/src/sw.js
	@@ -1,298 +1,299 @@
	/* eslint-env serviceworker */

	+// biome-ignore: side effect import of assets list
	import 'virtual:pleroma-fe/service_worker_env'

	import { createI18n } from 'vue-i18n'

	import { storage } from 'src/lib/storage.js'
	import { INSTANCE_DEFAULT_CONFIG } from 'src/modules/default_config_state.js'
	import { parseNotification } from 'src/services/entity_normalizer/entity_normalizer.service.js'
	import { prepareNotificationObject } from 'src/services/notification_utils/notification_utils.js'
	import { cacheKey, emojiCacheKey, shouldCache } from 'src/services/sw/sw.js'

	// Collects all messages for service workers
	// Needed because service workers cannot use dynamic imports
	// See /build/sw_plugin.js for more information
	import messages from 'virtual:pleroma-fe/service_worker_messages'

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

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

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

	const setSettings = async () => {
	const piniaState = await storage.getItem('pinia-local-sync_config')
	const locale = piniaState.prefsStorage.simple.interfaceLanguage \|\| 'en'
	i18n.locale = locale
	const notificationsNativeArray = Object.entries(
	piniaState.prefsStorage.simple.notificationNative \|\|
	INSTANCE_DEFAULT_CONFIG.notificationNative,
	)
	state.webPushAlwaysShowNotifications =
	piniaState.prefsStorage.simple.webPushAlwaysShowNotifications

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

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

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

	const res = prepareNotificationObject(parsedNotification, i18n)

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

	const cacheFiles = self.serviceWorkerOption.assets
	const isEmoji = (req) => {
	if (req.method !== 'GET') {
	return false
	}
	const url = new URL(req.url)

	return url.pathname.startsWith('/emoji/')
	}
	const isNotMedia = (req) => {
	if (req.method !== 'GET') {
	return false
	}
	const url = new URL(req.url)
	return !url.pathname.startsWith('/media/')
	}
	const isAsset = (req) => {
	const url = new URL(req.url)
	return cacheFiles.includes(url.pathname)
	}

	const isSuccessful = (resp) => {
	if (!resp.ok) {
	return false
	}
	if (new URL(resp.url).pathname === '/index.html') {
	// For index.html itself, there is no fallback possible.
	return true
	}
	const type = resp.headers.get('Content-Type')
	// Backend will revert to index.html if the file does not exist, so text/html for emojis and assets is a failure
	return type && !type.includes('text/html')
	}

	self.addEventListener('install', async (event) => {
	if (shouldCache) {
	event.waitUntil(
	(async () => {
	// Do not preload i18n and emoji annotations to speed up loading
	const shouldPreload = (route) => {
	return (
	!route.startsWith('/static/js/i18n/') &&
	!route.startsWith('/static/js/emoji-annotations/')
	)
	}
	const cache = await caches.open(cacheKey)
	await Promise.allSettled(
	cacheFiles.filter(shouldPreload).map(async (route) => {
	// https://developer.mozilla.org/en-US/docs/Web/API/Cache/add
	// originally we used addAll() but it will raise a problem in one edge case:
	// when the file for the route is not found, backend will return index.html with code 200
	// but it's wrong, and it's cached, so we end up with a bad cache.
	// this can happen when you refresh when you are in the process of upgrading
	// the frontend.
	const resp = await fetch(route)
	if (isSuccessful(resp)) {
	await cache.put(route, resp)
	}
	}),
	)
	})(),
	)
	}
	})

	self.addEventListener('activate', async (event) => {
	if (shouldCache) {
	event.waitUntil(
	(async () => {
	const cache = await caches.open(cacheKey)
	const keys = await cache.keys()
	await Promise.all(
	keys
	.filter((request) => {
	const url = new URL(request.url)
	const shouldKeep = cacheFiles.includes(url.pathname)
	return !shouldKeep
	})
	.map((k) => cache.delete(k)),
	)
	})(),
	)
	}
	})

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

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

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

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

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

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

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

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

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

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

	self.addEventListener('fetch', (event) => {
	// Do not mess up with remote things
	const isSameOrigin =
	new URL(event.request.url).origin === self.location.origin
	if (
	shouldCache &&
	event.request.method === 'GET' &&
	isSameOrigin &&
	isNotMedia(event.request)
	) {
	// this is a bit spammy
	// console.debug('[Service worker] fetch:', event.request.url)
	event.respondWith(
	(async () => {
	const r = await caches.match(event.request)
	const isEmojiReq = isEmoji(event.request)

	if (r && isSuccessful(r)) {
	console.debug('[Service worker] already cached:', event.request.url)
	return r
	}

	try {
	const response = await fetch(event.request)
	if (
	response.ok &&
	isSuccessful(response) &&
	(isEmojiReq \|\| isAsset(event.request))
	) {
	console.debug(
	`[Service worker] caching ${isEmojiReq ? 'emoji' : 'asset'}:`,
	event.request.url,
	)
	const cache = await caches.open(
	isEmojiReq ? emojiCacheKey : cacheKey,
	)
	await cache.put(event.request.clone(), response.clone())
	}
	return response
	} catch (e) {
	console.error('[Service worker] error when caching emoji:', e)
	throw e
	}
	})(),
	)
	}
	})
	diff --git a/test/unit/specs/components/draft.spec.js b/test/unit/specs/components/draft.spec.js
	index be2400fc3c..b69d2323e7 100644
	--- a/test/unit/specs/components/draft.spec.js
	+++ b/test/unit/specs/components/draft.spec.js
	@@ -1,185 +1,185 @@
	import { createTestingPinia } from '@pinia/testing'
	import { flushPromises, mount } from '@vue/test-utils'
	import { setActivePinia } from 'pinia'
	import { nextTick } from 'vue'

	import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	import { $t, mountOpts, waitForEvent } from '../../../fixtures/setup_test'

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

	const autoSaveOrNot = (caseFn, caseTitle, runFn) => {
	caseFn(`${caseTitle} with auto-save`, function () {
	return runFn.bind(this)(true)
	})

	caseFn(`${caseTitle} with no auto-save`, function () {
	return runFn.bind(this)(false)
	})
	}

	const saveManually = async (wrapper) => {
	const morePostActions = wrapper.findByText(
	'button',
	$t('post_status.more_post_actions'),
	)
	await morePostActions.trigger('click')

	const btn = wrapper.findByText(
	'button',
	$t('post_status.save_to_drafts_button'),
	)
	await btn.trigger('click')
	}

	const waitSaveTime = 4000

	afterEach(() => {
	vi.useRealTimers()
	})

	describe('Draft saving', () => {
	beforeEach(() => {
	setActivePinia(createTestingPinia())
	})

	autoSaveOrNot(
	it,
	'should save when the button is clicked',
	async (autoSave) => {
	const wrapper = mount(PostStatusForm, mountOpts())
	const store = useMergedConfigStore()
	store.mergedConfig = {
	autoSaveDraft: autoSave,
	}
	expect(wrapper.vm.$store.getters.draftCount).to.equal(0)

	const textarea = wrapper.get('textarea')
	await textarea.setValue('mew mew')

	await saveManually(wrapper)
	expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
	expect(wrapper.vm.$store.getters.draftsArray[0].status).to.equal(
	'mew mew',
	)
	},
	)

	it('should auto-save if it is enabled', async function () {
	vi.useFakeTimers()
	const wrapper = mount(PostStatusForm, mountOpts())
	const store = useMergedConfigStore()
	store.mergedConfig = {
	autoSaveDraft: true,
	}
	expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
	const textarea = wrapper.get('textarea')
	await textarea.setValue('mew mew')

	expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
	await vi.advanceTimersByTimeAsync(waitSaveTime)
	expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
	expect(wrapper.vm.$store.getters.draftsArray[0].status).to.equal('mew mew')
	})

	it('should auto-save when close if auto-save is on', async () => {
	const wrapper = mount(
	PostStatusForm,
	mountOpts({
	props: {
	closeable: true,
	},
	}),
	)
	const store = useMergedConfigStore()
	store.mergedConfig = {
	autoSaveDraft: true,
	}
	expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
	const textarea = wrapper.get('textarea')
	await textarea.setValue('mew mew')
	wrapper.vm.requestClose()
	expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
	- await waitForEvent(wrapper, 'can-close')
	+ await waitForEvent(wrapper, 'close-accepted')
	})

	it('should save when close if auto-save is off, and unsavedPostAction is save', async () => {
	const wrapper = mount(
	PostStatusForm,
	mountOpts({
	props: {
	closeable: true,
	},
	}),
	)
	const store = useMergedConfigStore()
	store.mergedConfig = {
	autoSaveDraft: false,
	unsavedPostAction: 'save',
	}
	expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
	const textarea = wrapper.get('textarea')
	await textarea.setValue('mew mew')
	wrapper.vm.requestClose()
	expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
	- await waitForEvent(wrapper, 'can-close')
	+ await waitForEvent(wrapper, 'close-accepted')
	})

	it('should discard when close if auto-save is off, and unsavedPostAction is discard', async () => {
	const wrapper = mount(
	PostStatusForm,
	mountOpts({
	props: {
	closeable: true,
	},
	}),
	)
	const store = useMergedConfigStore()
	store.mergedConfig = {
	autoSaveDraft: false,
	unsavedPostAction: 'discard',
	}
	expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
	const textarea = wrapper.get('textarea')
	await textarea.setValue('mew mew')
	wrapper.vm.requestClose()
	- await waitForEvent(wrapper, 'can-close')
	+ await waitForEvent(wrapper, 'close-accepted')
	expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
	})

	it('should confirm when close if auto-save is off, and unsavedPostAction is confirm', async () => {
	const wrapper = mount(
	PostStatusForm,
	mountOpts({
	props: {
	closeable: true,
	},
	}),
	)
	const store = useMergedConfigStore(createTestingPinia())
	store.mergedConfig = {
	autoSaveDraft: false,
	unsavedPostAction: 'confirm',
	}
	expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
	const textarea = wrapper.get('textarea')
	await textarea.setValue('mew mew')
	wrapper.vm.requestClose()
	await nextTick()
	await flushPromises()
	const saveButton = await vi.waitFor(() => {
	const button = wrapper.findByText(
	'button',
	$t('post_status.close_confirm_save_button'),
	)
	if (!button) throw new Error('Save button not present')
	return button
	})
	expect(saveButton).to.be.ok
	await saveButton.trigger('click')
	console.info('clicked')
	expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
	await flushPromises()
	- await waitForEvent(wrapper, 'can-close')
	+ await waitForEvent(wrapper, 'close-accepted')
	})
	})
	diff --git a/tools/e2e/run.sh b/tools/e2e/run.sh
	index 3c0ba8a362..452302cbd0 100644
	--- a/tools/e2e/run.sh
	+++ b/tools/e2e/run.sh
	@@ -1,35 +1,35 @@
	#!/bin/sh

	set -u

	COMPOSE_FILE="docker-compose.e2e.yml"

	: "${COMPOSE_MENU:=false}"
	-: "${PLEROMA_IMAGE:=git.pleroma.social:5050/pleroma/pleroma:stable}"
	+: "${PLEROMA_IMAGE:=git.pleroma.social/pleroma/pleroma:stable}"
	: "${E2E_ADMIN_USERNAME:=admin}"
	: "${E2E_ADMIN_PASSWORD:=adminadmin}"
	: "${E2E_ADMIN_EMAIL:=admin@example.com}"

	cleanup() {
	docker compose -f "$COMPOSE_FILE" down -v --remove-orphans >/dev/null 2>&1 \|\| true
	}

	cleanup

	trap 'cleanup; exit 130' INT TERM

	set +e
	COMPOSE_MENU="$COMPOSE_MENU" docker compose -f "$COMPOSE_FILE" up --build --remove-orphans --attach e2e --no-log-prefix --abort-on-container-exit --exit-code-from e2e
	result="$?"
	set -e

	if [ "$result" -ne 0 ]; then
	docker compose -f "$COMPOSE_FILE" cp e2e:/app/test/e2e-playwright/test-results test/e2e-playwright >/dev/null 2>&1 \|\| true
	docker compose -f "$COMPOSE_FILE" cp e2e:/app/test/e2e-playwright/playwright-report test/e2e-playwright >/dev/null 2>&1 \|\| true
	mkdir -p test/e2e-playwright/test-results
	docker compose -f "$COMPOSE_FILE" logs --no-color pleroma db > test/e2e-playwright/test-results/docker-compose.log 2>/dev/null \|\| true
	fi

	cleanup

	exit "$result"

File Metadata

Mime Type: text/x-diff
Expires: Fri, Aug 28, 12:12 PM (2 h, 8 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1736390
Default Alt Text: (613 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions