No OneTemporary
Actions

Authored By

Unknown

Size

742 KB

Referenced Files

None

Subscribers

None

View Options

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

	diff --git a/biome.json b/biome.json
	index d64639d522..6a464a0e51 100644
	--- a/biome.json
	+++ b/biome.json
	@@ -1,145 +1,149 @@
	{
	"$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
	"vcs": {
	"enabled": true,
	"clientKind": "git",
	"useIgnoreFile": true
	},
	"files": {
	"includes": ["", "!!/dist", "!!tools/emojis.json"]
	},
	"formatter": {
	"enabled": true,
	"indentStyle": "space"
	},
	"linter": {
	"enabled": true,
	"domains": {
	"vue": "recommended"
	},
	"rules": {
	"recommended": false,
	"complexity": {
	"noAdjacentSpacesInRegex": "error",
	"noExtraBooleanCast": "error",
	"noUselessCatch": "error",
	"noUselessEscapeInRegex": "error"
	},
	"correctness": {
	"noConstAssign": "error",
	"noConstantCondition": "error",
	"noEmptyCharacterClassInRegex": "error",
	"noEmptyPattern": "error",
	"noGlobalObjectCalls": "error",
	"noInvalidBuiltinInstantiation": "error",
	"noInvalidConstructorSuper": "error",
	"noNonoctalDecimalEscape": "error",
	"noPrecisionLoss": "error",
	"noSelfAssign": "error",
	"noSetterReturn": "error",
	"noSwitchDeclarations": "error",
	"noUndeclaredVariables": "error",
	"noUnreachable": "error",
	"noUnreachableSuper": "error",
	"noUnsafeFinally": "error",
	"noUnsafeOptionalChaining": "error",
	"noUnusedLabels": "error",
	"noUnusedPrivateClassMembers": "error",
	"noUnusedVariables": "error",
	"useIsNan": "error",
	"useValidForDirection": "error",
	"useValidTypeof": "error",
	"useYield": "error"
	},
	"suspicious": {
	"noAsyncPromiseExecutor": "error",
	"noCatchAssign": "error",
	"noClassAssign": "error",
	"noCompareNegZero": "error",
	"noConstantBinaryExpressions": "error",
	"noControlCharactersInRegex": "error",
	"noDebugger": "error",
	"noDuplicateCase": "error",
	"noDuplicateClassMembers": "error",
	"noDuplicateElseIf": "error",
	"noDuplicateObjectKeys": "error",
	"noDuplicateParameters": "error",
	"noEmptyBlockStatements": "error",
	"noFallthroughSwitchClause": "error",
	"noFunctionAssign": "error",
	"noGlobalAssign": "error",
	"noImportAssign": "error",
	"noIrregularWhitespace": "error",
	"noMisleadingCharacterClass": "error",
	"noPrototypeBuiltins": "error",
	"noRedeclare": "error",
	"noShadowRestrictedNames": "error",
	"noSparseArray": "error",
	"noUnsafeNegation": "error",
	"noUselessRegexBackrefs": "error",
	"noWith": "error",
	"useGetterReturn": "error"
	}
	}
	},
	"javascript": {
	"formatter": {
	"quoteStyle": "single",
	"semicolons": "asNeeded"
	},
	"globals": []
	},
	"overrides": [
	{
	"includes": ["*/.spec.js", "test/fixtures/*.js"],
	"javascript": {
	"globals": [
	"vi",
	"describe",
	"it",
	"test",
	"expect",
	"before",
	"beforeEach",
	"after",
	"afterEach"
	]
	}
	},
	{
	"includes": ["*/.vue"],
	"linter": {
	"rules": {
	"style": {
	"useConst": "off",
	"useImportType": "off"
	},
	"correctness": {
	"noUnusedVariables": "off",
	"noUnusedImports": "off"
	}
	}
	}
	}
	],
	"assist": {
	"enabled": true,
	"actions": {
	"source": {
	"organizeImports": {
	"level": "on",
	"options": {
	"groups": [
	[":NODE:", ":PACKAGE:", "!src/", "!@fortawesome/"],
	":BLANK_LINE:",
	- [":PATH:", "src/**"],
	+ [":PATH:", "src/components/**"],
	+ ":BLANK_LINE:",
	+ [":PATH:", "src/stores/**"],
	+ ":BLANK_LINE:",
	+ [":PATH:", "src/", "src/stores/", "src/components/**"],
	":BLANK_LINE:",
	"@fortawesome/fontawesome-svg-core",
	"@fortawesome/*"
	]
	}
	}
	}
	}
	}
	}
	diff --git a/src/App.js b/src/App.js
	index b2e54a6532..d397584759 100644
	--- a/src/App.js
	+++ b/src/App.js
	@@ -1,267 +1,268 @@
	import { throttle } from 'lodash'
	import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'
	import { mapGetters } from 'vuex'

	-import { useInstanceStore } from 'src/stores/instance.js'
	import DesktopNav from './components/desktop_nav/desktop_nav.vue'
	import EditStatusModal from './components/edit_status_modal/edit_status_modal.vue'
	import FeaturesPanel from './components/features_panel/features_panel.vue'
	import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
	import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
	import MediaModal from './components/media_modal/media_modal.vue'
	import MobileNav from './components/mobile_nav/mobile_nav.vue'
	import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
	import NavPanel from './components/nav_panel/nav_panel.vue'
	import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
	import ShoutPanel from './components/shout_panel/shout_panel.vue'
	import SideDrawer from './components/side_drawer/side_drawer.vue'
	import StatusHistoryModal from './components/status_history_modal/status_history_modal.vue'
	import UserPanel from './components/user_panel/user_panel.vue'
	import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
	import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
	import { getOrCreateServiceWorker } from './services/sw/sw'
	import { windowHeight, windowWidth } from './services/window_utils/window_utils'
	import { useInterfaceStore } from './stores/interface'
	import { useShoutStore } from './stores/shout'

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

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

	if (useInterfaceStore().themeApplied) {
	this.setThemeBodyClass()
	this.removeSplash()
	}
	getOrCreateServiceWorker()
	},
	unmounted() {
	window.removeEventListener('resize', this.updateMobileState)
	this.scrollParent.removeEventListener('scroll', this.updateScrollState)
	},
	computed: {
	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 } = this.$store.getters.mergedConfig
	return [
	'-' + this.layoutType,
	...(navbarColumnStretch ? ['-column-stretch'] : []),
	]
	},
	currentUser() {
	return this.$store.state.users.currentUser
	},
	userBackground() {
	return this.currentUser.background_image
	},
	instanceBackground() {
	return this.mergedConfig.hideInstanceWallpaper ? null : this.background
	},
	background() {
	return this.userBackground \|\| this.instanceBackground
	},
	bgStyle() {
	if (this.background) {
	return {
	'--body-background-image': `url(${this.background})`,
	}
	}
	},
	shout() {
	return useShoutStore().joined
	},
	showInstanceSpecificPanel() {
	return (
	this.showInstanceSpecificPanel &&
	!this.$store.getters.mergedConfig.hideISP &&
	this.instanceSpecificPanelContent
	)
	},
	isChats() {
	return this.$route.name === 'chat' \|\| this.$route.name === 'chats'
	},
	isListEdit() {
	return this.$route.name === 'lists-edit'
	},
	newPostButtonShown() {
	if (this.isChats) return false
	if (this.isListEdit) return false
	return (
	this.$store.getters.mergedConfig.alwaysShowNewPostButton \|\|
	this.layoutType === 'mobile'
	)
	},
	shoutboxPosition() {
	return this.$store.getters.mergedConfig.alwaysShowNewPostButton \|\| false
	},
	hideShoutbox() {
	return this.$store.getters.mergedConfig.hideShoutbox
	},
	reverseLayout() {
	const { thirdColumnMode, sidebarRight: reverseSetting } =
	this.$store.getters.mergedConfig
	if (this.layoutType !== 'wide') {
	return reverseSetting
	} else {
	return thirdColumnMode === 'notifications'
	? reverseSetting
	: !reverseSetting
	}
	},
	noSticky() {
	return this.$store.getters.mergedConfig.disableStickyHeaders
	},
	showScrollbars() {
	return this.$store.getters.mergedConfig.showScrollbars
	},
	scrollParent() {
	return window /* this.$refs.appContentRef */
	},
	...mapGetters(['mergedConfig']),
	...mapState(useInterfaceStore, [
	'themeApplied',
	'styleDataUsed',
	'layoutType',
	]),
	...mapState(useInstanceStore, ['styleDataUsed', 'private']),
	...mapState(useInstanceStore, {
	background: (store) => store.instanceIdentity.background,
	showFeaturesPanel: (store) => store.instanceIdentity.showFeaturesPanel,
	showInstanceSpecificPanel: (store) =>
	store.instanceIdentity.showInstanceSpecificPanel,
	suggestionsEnabled: (store) => store.featureSet.suggestionsEnabled,
	editingAvailable: (store) => store.featureSet.editingAvailable,
	instanceSpecificPanelContent: (store) =>
	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/boot/after_store.js b/src/boot/after_store.js
	index b8aac47842..a970d25ccc 100644
	--- a/src/boot/after_store.js
	+++ b/src/boot/after_store.js
	@@ -1,609 +1,611 @@
	/* 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 { config } from '@fortawesome/fontawesome-svg-core'
	import {
	FontAwesomeIcon,
	FontAwesomeLayers,
	} from '@fortawesome/vue-fontawesome'

	config.autoAddCss = false

	-import VBodyScrollLock from 'src/directives/body_scroll_lock'
	-import {
	- instanceDefaultConfig,
	- staticOrApiConfigDefault,
	-} from 'src/modules/default_config_state.js'
	-import { useAnnouncementsStore } from 'src/stores/announcements'
	-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 { useInterfaceStore } from 'src/stores/interface.js'
	-import { useOAuthStore } from 'src/stores/oauth'
	import App from '../App.vue'
	import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
	import FaviconService from '../services/favicon_service/favicon_service.js'
	import { applyConfig } 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 { useAnnouncementsStore } from 'src/stores/announcements'
	+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 { useInterfaceStore } from 'src/stores/interface.js'
	+import { useOAuthStore } from 'src/stores/oauth'
	+
	+import VBodyScrollLock from 'src/directives/body_scroll_lock'
	+import {
	+ instanceDefaultConfig,
	+ staticOrApiConfigDefault,
	+} 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

	useInstanceStore().set({
	name: 'featureSet.pleromaExtensionsAvailable',
	value: data.pleroma,
	})
	useInstanceStore().set({
	name: 'textlimit',
	value: textlimit,
	})
	useInstanceStore().set({
	name: 'accountApprovalRequired',
	value: data.approval_required,
	})
	useInstanceStore().set({
	name: 'birthdayRequired',
	value: !!data.pleroma?.metadata.birthday_required,
	})
	useInstanceStore().set({
	name: 'birthdayMinAge',
	value: data.pleroma?.metadata.birthday_min_age \|\| 0,
	})

	if (vapidPublicKey) {
	useInstanceStore().set({
	name: '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.')
	console.warn(error)
	return {}
	}
	}

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

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

	const copyInstanceOption = ({ source, destination }) => {
	if (typeof config[source] !== 'undefined') {
	useInstanceStore().set({ path: destination, value: config[source] })
	}
	}

	Object.keys(staticOrApiConfigDefault)
	.map((k) => ({ source: k, destination: `instanceIdentity.${k}` }))
	.forEach(copyInstanceOption)
	Object.keys(instanceDefaultConfig)
	.map((k) => ({ source: k, destination: `prefsStorage.${k}` }))
	.forEach(copyInstanceOption)

	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({ name: '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({
	name: '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 getAppSecret = async ({ store }) => {
	const oauth = useOAuthStore()
	if (oauth.userToken) {
	store.commit(
	'setBackendInteractor',
	backendInteractorService(oauth.getToken),
	)
	}
	}

	const resolveStaffAccounts = ({ store, accounts }) => {
	const nicknames = accounts.map((uri) => uri.split('/').pop())
	useInstanceStore().set({
	name: '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: 'name',
	value: metadata.nodeName,
	})
	useInstanceStore().set({
	path: 'registrationOpen',
	value: data.openRegistrations,
	})
	useInstanceStore().set({
	path: 'featureSet.mediaProxyAvailable',
	value: features.includes('media_proxy'),
	})
	useInstanceStore().set({
	path: 'featureSet.safeDM',
	value: features.includes('safe_dm_mentions'),
	})
	useInstanceStore().set({
	path: 'featureSet.shoutAvailable',
	value: features.includes('chat'),
	})
	useInstanceStore().set({
	path: 'featureSet.pleromaChatMessagesAvailable',
	value: features.includes('pleroma_chat_messages'),
	})
	useInstanceStore().set({
	path: 'featureSet.pleromaCustomEmojiReactionsAvailable',
	value:
	features.includes('pleroma_custom_emoji_reactions') \|\|
	features.includes('custom_emoji_reactions'),
	})
	useInstanceStore().set({
	path: 'featureSet.pleromaBookmarkFoldersAvailable',
	value: features.includes('pleroma:bookmark_folders'),
	})
	useInstanceStore().set({
	path: 'featureSet.gopherAvailable',
	value: features.includes('gopher'),
	})
	useInstanceStore().set({
	path: 'featureSet.pollsAvailable',
	value: features.includes('polls'),
	})
	useInstanceStore().set({
	path: 'featureSet.editingAvailable',
	value: features.includes('editing'),
	})
	useInstanceStore().set({
	path: 'featureSet.mailerEnabled',
	value: metadata.mailerEnabled,
	})
	useInstanceStore().set({
	path: 'featureSet.quotingAvailable',
	value: features.includes('quote_posting'),
	})
	useInstanceStore().set({
	path: 'featureSet.groupActorAvailable',
	value: features.includes('pleroma:group_actors'),
	})
	useInstanceStore().set({
	path: 'featureSet.blockExpiration',
	value: features.includes('pleroma:block_expiration'),
	})
	useInstanceStore().set({
	path: 'localBubbleInstances',
	value: metadata.localBubbleInstances ?? [],
	})
	useInstanceStore().set({
	path: 'featureSet.localBubble',
	value: (metadata.localBubbleInstances ?? []).length > 0,
	})

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

	useInstanceStore().set({
	name: 'restrictedNicknames',
	value: metadata.restrictedNicknames,
	})
	useInstanceStore().set({
	name: 'featureSet.postFormats',
	value: metadata.postFormats,
	})

	const suggestions = metadata.suggestions
	useInstanceStore().set({
	name: 'featureSet.suggestionsEnabled',
	value: suggestions.enabled,
	})
	useInstanceStore().set({
	name: 'featureSet.suggestionsWeb',
	value: suggestions.web,
	})

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

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

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

	const federation = metadata.federation

	useInstanceStore().set({
	name: 'featureSet.tagPolicyAvailable',
	value:
	typeof federation.mrf_policies === 'undefined'
	? false
	: metadata.federation.mrf_policies.includes('TagPolicy'),
	})

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

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

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

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

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

	const checkOAuthToken = async ({ store }) => {
	const oauth = useOAuthStore()
	if (oauth.getUserToken) {
	return store.dispatch('loginUser', oauth.getUserToken)
	}
	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)

	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())

	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({ name: '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)
	}

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

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

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

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

	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)

	// 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 1ddd8d459b..c5876a3d4e 100644
	--- a/src/boot/routes.js
	+++ b/src/boot/routes.js
	@@ -1,227 +1,228 @@
	import About from 'components/about/about.vue'
	import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
	import AuthForm from 'components/auth_form/auth_form.js'
	import BookmarkTimeline from 'components/bookmark_timeline/bookmark_timeline.vue'
	import BubbleTimeline from 'components/bubble_timeline/bubble_timeline.vue'
	import Chat from 'components/chat/chat.vue'
	import ChatList from 'components/chat_list/chat_list.vue'
	import ConversationPage from 'components/conversation-page/conversation-page.vue'
	import DMs from 'components/dm_timeline/dm_timeline.vue'
	import Drafts from 'components/drafts/drafts.vue'
	import FollowRequests from 'components/follow_requests/follow_requests.vue'
	import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue'
	import Interactions from 'components/interactions/interactions.vue'
	import Lists from 'components/lists/lists.vue'
	import ListsEdit from 'components/lists_edit/lists_edit.vue'
	import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
	import Notifications from 'components/notifications/notifications.vue'
	import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
	import PasswordReset from 'components/password_reset/password_reset.vue'
	import PublicAndExternalTimeline from 'components/public_and_external_timeline/public_and_external_timeline.vue'
	import PublicTimeline from 'components/public_timeline/public_timeline.vue'
	import Registration from 'components/registration/registration.vue'
	import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
	import Search from 'components/search/search.vue'
	import ShoutPanel from 'components/shout_panel/shout_panel.vue'
	import TagTimeline from 'components/tag_timeline/tag_timeline.vue'
	import UserProfile from 'components/user_profile/user_profile.vue'
	import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'

	import NavPanel from 'src/components/nav_panel/nav_panel.vue'
	-import { useInstanceStore } from 'src/stores/instance.js'
	import BookmarkFolderEdit from '../components/bookmark_folder_edit/bookmark_folder_edit.vue'
	import BookmarkFolders from '../components/bookmark_folders/bookmark_folders.vue'
	import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'

	+import { useInstanceStore } from 'src/stores/instance.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: UserProfile,
	},
	{
	name: 'interactions',
	path: '/users/:username/interactions',
	component: Interactions,
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'dms',
	path: '/users/:username/dms',
	component: DMs,
	beforeEnter: validateAuthenticatedRoute,
	},
	{ name: 'registration', path: '/registration', component: Registration },
	{
	name: 'password-reset',
	path: '/password-reset',
	component: PasswordReset,
	props: true,
	},
	{
	name: 'registration-token',
	path: '/registration/:token',
	component: Registration,
	},
	{
	name: 'friend-requests',
	path: '/friend-requests',
	component: FollowRequests,
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'notifications',
	path: '/:username/notifications',
	component: Notifications,
	props: () => ({ disableTeleport: true }),
	beforeEnter: validateAuthenticatedRoute,
	},
	{ name: 'login', path: '/login', component: AuthForm },
	{
	name: 'shout-panel',
	path: '/shout-panel',
	component: ShoutPanel,
	props: () => ({ floating: false }),
	},
	{
	name: 'oauth-callback',
	path: '/oauth-callback',
	component: OAuthCallback,
	props: (route) => ({ code: route.query.code }),
	},
	{
	name: 'search',
	path: '/search',
	component: Search,
	props: (route) => ({ query: route.query.query }),
	},
	{
	name: 'who-to-follow',
	path: '/who-to-follow',
	component: WhoToFollow,
	beforeEnter: validateAuthenticatedRoute,
	},
	{ name: 'about', path: '/about', component: About },
	{
	name: 'announcements',
	path: '/announcements',
	component: AnnouncementsPage,
	},
	{ name: 'drafts', path: '/drafts', component: Drafts },
	{ name: 'user-profile', path: '/users/:name', component: UserProfile },
	{ name: 'legacy-user-profile', path: '/:name', component: UserProfile },
	{ name: 'lists', path: '/lists', component: Lists },
	{ name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
	{ name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
	{ name: 'lists-new', path: '/lists/new', component: ListsEdit },
	{
	name: 'edit-navigation',
	path: '/nav-edit',
	component: NavPanel,
	props: () => ({ forceExpand: true, forceEditMode: true }),
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'bookmark-folders',
	path: '/bookmark_folders',
	component: BookmarkFolders,
	},
	{
	name: 'bookmark-folder-new',
	path: '/bookmarks/new-folder',
	component: BookmarkFolderEdit,
	},
	{
	name: 'bookmark-folder',
	path: '/bookmarks/:id',
	component: BookmarkTimeline,
	},
	{
	name: 'bookmark-folder-edit',
	path: '/bookmarks/:id/edit',
	component: BookmarkFolderEdit,
	},
	]

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

	return routes
	}
	diff --git a/src/components/about/about.js b/src/components/about/about.js
	index 1d81907181..f52d5c7978 100644
	--- a/src/components/about/about.js
	+++ b/src/components/about/about.js
	@@ -1,30 +1,31 @@
	-import { useInstanceStore } from 'src/stores/instance.js'
	import FeaturesPanel from '../features_panel/features_panel.vue'
	import InstanceSpecificPanel from '../instance_specific_panel/instance_specific_panel.vue'
	import MRFTransparencyPanel from '../mrf_transparency_panel/mrf_transparency_panel.vue'
	import StaffPanel from '../staff_panel/staff_panel.vue'
	import TermsOfServicePanel from '../terms_of_service_panel/terms_of_service_panel.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	const About = {
	components: {
	InstanceSpecificPanel,
	FeaturesPanel,
	TermsOfServicePanel,
	StaffPanel,
	MRFTransparencyPanel,
	},
	computed: {
	showFeaturesPanel() {
	return useInstanceStore().instanceIdentity.showFeaturesPanel
	},
	showInstanceSpecificPanel() {
	return (
	useInstanceStore().instanceIdentity.showInstanceSpecificPanel &&
	!this.$store.getters.mergedConfig.hideISP &&
	useInstanceStore().instanceIdentity.instanceSpecificPanelContent
	)
	},
	},
	}

	export default About
	diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
	index 4f548fb6bf..1910d3544b 100644
	--- a/src/components/account_actions/account_actions.js
	+++ b/src/components/account_actions/account_actions.js
	@@ -1,104 +1,105 @@
	import { mapState } from 'pinia'

	import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue'
	import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
	-import { useInstanceStore } from 'src/stores/instance.js'
	-import { useReportsStore } from 'src/stores/reports'
	import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	import Popover from '../popover/popover.vue'
	import ProgressButton from '../progress_button/progress_button.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+import { useReportsStore } from 'src/stores/reports'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faEllipsisV } from '@fortawesome/free-solid-svg-icons'

	library.add(faEllipsisV)

	const AccountActions = {
	props: ['user', 'relationship'],
	data() {
	return {
	showingConfirmBlock: false,
	showingConfirmRemoveFollower: false,
	}
	},
	components: {
	ProgressButton,
	Popover,
	UserListMenu,
	ConfirmModal,
	UserTimedFilterModal,
	},
	methods: {
	showConfirmRemoveUserFromFollowers() {
	this.showingConfirmRemoveFollower = true
	},
	hideConfirmRemoveUserFromFollowers() {
	this.showingConfirmRemoveFollower = false
	},
	hideConfirmBlock() {
	this.showingConfirmBlock = false
	},
	showRepeats() {
	this.$store.dispatch('showReblogs', this.user.id)
	},
	hideRepeats() {
	this.$store.dispatch('hideReblogs', this.user.id)
	},
	blockUser() {
	if (this.$refs.timedBlockDialog) {
	this.$refs.timedBlockDialog.optionallyPrompt()
	} else {
	if (!this.shouldConfirmBlock) {
	this.doBlockUser()
	} else {
	this.showingConfirmBlock = true
	}
	}
	},
	doBlockUser() {
	this.$store.dispatch('blockUser', { id: this.user.id })
	this.hideConfirmBlock()
	},
	unblockUser() {
	this.$store.dispatch('unblockUser', this.user.id)
	},
	removeUserFromFollowers() {
	if (!this.shouldConfirmRemoveUserFromFollowers) {
	this.doRemoveUserFromFollowers()
	} else {
	this.showConfirmRemoveUserFromFollowers()
	}
	},
	doRemoveUserFromFollowers() {
	this.$store.dispatch('removeUserFromFollowers', this.user.id)
	this.hideConfirmRemoveUserFromFollowers()
	},
	reportUser() {
	useReportsStore().openUserReportingModal({ userId: this.user.id })
	},
	openChat() {
	this.$router.push({
	name: 'chat',
	params: {
	username: this.$store.state.users.currentUser.screen_name,
	recipient_id: this.user.id,
	},
	})
	},
	},
	computed: {
	shouldConfirmBlock() {
	return this.$store.getters.mergedConfig.modalOnBlock
	},
	shouldConfirmRemoveUserFromFollowers() {
	return this.$store.getters.mergedConfig.modalOnRemoveUserFromFollowers
	},
	...mapState(useInstanceStore, {
	blockExpirationSupported: (store) => store.featureSet.blockExpiration,
	pleromaChatMessagesAvailable: (store) =>
	store.featureSet.pleromaChatMessagesAvailable,
	}),
	},
	}

	export default AccountActions
	diff --git a/src/components/announcement/announcement.js b/src/components/announcement/announcement.js
	index 906b84ce2f..c206d73442 100644
	--- a/src/components/announcement/announcement.js
	+++ b/src/components/announcement/announcement.js
	@@ -1,129 +1,130 @@
	import { mapState } from 'vuex'

	-import { useAnnouncementsStore } from 'src/stores/announcements'
	import localeService from '../../services/locale/locale.service.js'
	import AnnouncementEditor from '../announcement_editor/announcement_editor.vue'
	import RichContent from '../rich_content/rich_content.jsx'

	+import { useAnnouncementsStore } from 'src/stores/announcements'
	+
	const Announcement = {
	components: {
	AnnouncementEditor,
	RichContent,
	},
	data() {
	return {
	editing: false,
	editedAnnouncement: {
	content: '',
	startsAt: undefined,
	endsAt: undefined,
	allDay: undefined,
	},
	editError: '',
	}
	},
	props: {
	announcement: Object,
	},
	computed: {
	...mapState({
	currentUser: (state) => state.users.currentUser,
	}),
	canEditAnnouncement() {
	return (
	this.currentUser &&
	this.currentUser.privileges.includes(
	'announcements_manage_announcements',
	)
	)
	},
	content() {
	return this.announcement.content
	},
	isRead() {
	return this.announcement.read
	},
	publishedAt() {
	const time = this.announcement.published_at
	if (!time) {
	return
	}

	return this.formatTimeOrDate(
	time,
	localeService.internalToBrowserLocale(this.$i18n.locale),
	)
	},
	startsAt() {
	const time = this.announcement.starts_at
	if (!time) {
	return
	}

	return this.formatTimeOrDate(
	time,
	localeService.internalToBrowserLocale(this.$i18n.locale),
	)
	},
	endsAt() {
	const time = this.announcement.ends_at
	if (!time) {
	return
	}

	return this.formatTimeOrDate(
	time,
	localeService.internalToBrowserLocale(this.$i18n.locale),
	)
	},
	inactive() {
	return this.announcement.inactive
	},
	},
	methods: {
	markAsRead() {
	if (!this.isRead) {
	return useAnnouncementsStore().markAnnouncementAsRead(
	this.announcement.id,
	)
	}
	},
	deleteAnnouncement() {
	return useAnnouncementsStore().deleteAnnouncement(this.announcement.id)
	},
	formatTimeOrDate(time, locale) {
	const d = new Date(time)
	return this.announcement.all_day
	? d.toLocaleDateString(locale)
	: d.toLocaleString(locale)
	},
	enterEditMode() {
	this.editedAnnouncement.content = this.announcement.pleroma.raw_content
	this.editedAnnouncement.startsAt = this.announcement.starts_at
	this.editedAnnouncement.endsAt = this.announcement.ends_at
	this.editedAnnouncement.allDay = this.announcement.all_day
	this.editing = true
	},
	submitEdit() {
	useAnnouncementsStore()
	.editAnnouncement({
	id: this.announcement.id,
	...this.editedAnnouncement,
	})
	.then(() => {
	this.editing = false
	})
	.catch((error) => {
	this.editError = error.error
	})
	},
	cancelEdit() {
	this.editing = false
	},
	clearError() {
	this.editError = undefined
	},
	},
	}

	export default Announcement
	diff --git a/src/components/announcements_page/announcements_page.js b/src/components/announcements_page/announcements_page.js
	index 0c4383d2e3..5ee979dc70 100644
	--- a/src/components/announcements_page/announcements_page.js
	+++ b/src/components/announcements_page/announcements_page.js
	@@ -1,66 +1,67 @@
	import { mapState } from 'vuex'

	-import { useAnnouncementsStore } from 'src/stores/announcements'
	import Announcement from '../announcement/announcement.vue'
	import AnnouncementEditor from '../announcement_editor/announcement_editor.vue'

	+import { useAnnouncementsStore } from 'src/stores/announcements'
	+
	const AnnouncementsPage = {
	components: {
	Announcement,
	AnnouncementEditor,
	},
	data() {
	return {
	newAnnouncement: {
	content: '',
	startsAt: undefined,
	endsAt: undefined,
	allDay: false,
	},
	posting: false,
	error: undefined,
	}
	},
	mounted() {
	useAnnouncementsStore().fetchAnnouncements()
	},
	computed: {
	...mapState({
	currentUser: (state) => state.users.currentUser,
	}),
	announcements() {
	return useAnnouncementsStore().announcements
	},
	canPostAnnouncement() {
	return (
	this.currentUser &&
	this.currentUser.privileges.includes(
	'announcements_manage_announcements',
	)
	)
	},
	},
	methods: {
	postAnnouncement() {
	this.posting = true
	useAnnouncementsStore()
	.postAnnouncement(this.newAnnouncement)
	.then(() => {
	this.newAnnouncement.content = ''
	this.startsAt = undefined
	this.endsAt = undefined
	})
	.catch((error) => {
	this.error = error.error
	})
	.finally(() => {
	this.posting = false
	})
	},
	clearError() {
	this.error = undefined
	},
	},
	}

	export default AnnouncementsPage
	diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
	index 2a847632f9..d1884ba5c9 100644
	--- a/src/components/attachment/attachment.js
	+++ b/src/components/attachment/attachment.js
	@@ -1,221 +1,222 @@
	import { mapGetters } from 'vuex'

	-import { useInstanceStore } from 'src/stores/instance.js'
	-import { useMediaViewerStore } from 'src/stores/media_viewer'
	import nsfwImage from '../../assets/nsfw.png'
	import fileTypeService from '../../services/file_type/file_type.service.js'
	import Flash from '../flash/flash.vue'
	import StillImage from '../still-image/still-image.vue'
	import VideoAttachment from '../video_attachment/video_attachment.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+import { useMediaViewerStore } from 'src/stores/media_viewer'
	+
	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',
	],
	data() {
	return {
	localDescription: this.description \|\| this.attachment.description,
	nsfwImage:
	useInstanceStore().instanceIdentity.nsfwCensorImage \|\| nsfwImage,
	hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
	preloadImage: this.$store.getters.mergedConfig.preloadImage,
	loading: false,
	img:
	fileTypeService.fileType(this.attachment.mimetype) === 'image' &&
	document.createElement('img'),
	modalOpen: false,
	showHidden: false,
	flashLoaded: false,
	showDescription: false,
	}
	},
	components: {
	Flash,
	StillImage,
	VideoAttachment,
	},
	computed: {
	classNames() {
	return [
	{
	'-loading': this.loading,
	'-nsfw-placeholder': this.hidden,
	'-editable': this.edit !== undefined,
	'-compact': this.compact,
	},
	'-type-' + this.type,
	this.size && '-size-' + this.size,
	`-${this.useContainFit ? 'contain' : 'cover'}-fit`,
	]
	},
	usePlaceholder() {
	return this.size === 'hide'
	},
	useContainFit() {
	return this.$store.getters.mergedConfig.useContainFit
	},
	placeholderName() {
	if (this.attachment.description === '' \|\| !this.attachment.description) {
	return this.type.toUpperCase()
	}
	return this.attachment.description
	},
	placeholderIconClass() {
	if (this.type === 'image') return 'image'
	if (this.type === 'video') return 'video'
	if (this.type === 'audio') return 'music'
	return 'file'
	},
	referrerpolicy() {
	return useInstanceStore().featureSet.mediaProxyAvailable
	? ''
	: 'no-referrer'
	},
	type() {
	return fileTypeService.fileType(this.attachment.mimetype)
	},
	hidden() {
	return this.nsfw && this.hideNsfwLocal && !this.showHidden
	},
	isEmpty() {
	return this.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.type)
	},
	videoTag() {
	return this.useModal ? 'button' : 'span'
	},
	...mapGetters(['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.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
	},
	toggleDescription() {
	this.showDescription = !this.showDescription
	},
	toggleHidden(event) {
	if (
	this.mergedConfig.useOneClickNsfw &&
	!this.showHidden &&
	(this.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/auth_form/auth_form.js b/src/components/auth_form/auth_form.js
	index ce88aa6f94..db721b3070 100644
	--- a/src/components/auth_form/auth_form.js
	+++ b/src/components/auth_form/auth_form.js
	@@ -1,33 +1,34 @@
	import { mapState } from 'pinia'
	import { h, resolveComponent } from 'vue'

	-import { useAuthFlowStore } from 'src/stores/auth_flow'
	import LoginForm from '../login_form/login_form.vue'
	import MFARecoveryForm from '../mfa_form/recovery_form.vue'
	import MFATOTPForm from '../mfa_form/totp_form.vue'

	+import { useAuthFlowStore } from 'src/stores/auth_flow'
	+
	const AuthForm = {
	name: 'AuthForm',
	render() {
	return h(resolveComponent(this.authForm))
	},
	computed: {
	authForm() {
	if (this.requiredTOTP) {
	return 'MFATOTPForm'
	}
	if (this.requiredRecovery) {
	return 'MFARecoveryForm'
	}
	return 'LoginForm'
	},
	...mapState(useAuthFlowStore, ['requiredTOTP', 'requiredRecovery']),
	},
	components: {
	MFARecoveryForm,
	MFATOTPForm,
	LoginForm,
	},
	}

	export default AuthForm
	diff --git a/src/components/avatar_list/avatar_list.js b/src/components/avatar_list/avatar_list.js
	index 9387132077..830b64219d 100644
	--- a/src/components/avatar_list/avatar_list.js
	+++ b/src/components/avatar_list/avatar_list.js
	@@ -1,26 +1,28 @@
	-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	-import { useInstanceStore } from 'src/stores/instance.js'
	import UserAvatar from '../user_avatar/user_avatar.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	+
	const AvatarList = {
	props: ['users'],
	computed: {
	slicedUsers() {
	return this.users ? this.users.slice(0, 15) : []
	},
	},
	components: {
	UserAvatar,
	},
	methods: {
	userProfileLink(user) {
	return generateProfileLink(
	user.id,
	user.screen_name,
	useInstanceStore().restrictedNicknames,
	)
	},
	},
	}

	export default AvatarList
	diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js
	index 8d2b17b7d8..0e45b140a7 100644
	--- a/src/components/basic_user_card/basic_user_card.js
	+++ b/src/components/basic_user_card/basic_user_card.js
	@@ -1,27 +1,29 @@
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	-import { useInstanceStore } from 'src/stores/instance.js'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import UserLink from '../user_link/user_link.vue'
	import UserPopover from '../user_popover/user_popover.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	+
	const BasicUserCard = {
	props: ['user'],
	components: {
	UserPopover,
	UserAvatar,
	RichContent,
	UserLink,
	},
	methods: {
	userProfileLink(user) {
	return generateProfileLink(
	user.id,
	user.screen_name,
	useInstanceStore().restrictedNicknames,
	)
	},
	},
	}

	export default BasicUserCard
	diff --git a/src/components/block_card/block_card.js b/src/components/block_card/block_card.js
	index 1a744bdb7d..8101394dd8 100644
	--- a/src/components/block_card/block_card.js
	+++ b/src/components/block_card/block_card.js
	@@ -1,49 +1,50 @@
	import { mapState } from 'pinia'

	-import { useInstanceStore } from 'src/stores/instance.js'
	import BasicUserCard from '../basic_user_card/basic_user_card.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	const BlockCard = {
	props: ['userId'],
	computed: {
	user() {
	return this.$store.getters.findUser(this.userId)
	},
	relationship() {
	return this.$store.getters.relationship(this.userId)
	},
	blocked() {
	return this.relationship.blocking
	},
	blockExpiryAvailable() {
	return Object.hasOwn(this.user, 'block_expires_at')
	},
	blockExpiry() {
	return this.user.block_expires_at === false
	? this.$t('user_card.block_expires_forever')
	: this.$t('user_card.block_expires_at', [
	new Date(this.user.mute_expires_at).toLocaleString(),
	])
	},
	...mapState(useInstanceStore, {
	blockExpirationSupported: (store) => store.featureSet.blockExpiration,
	}),
	},
	components: {
	BasicUserCard,
	},
	methods: {
	unblockUser() {
	this.$store.dispatch('unblockUser', this.user.id)
	},
	blockUser() {
	if (this.blockExpirationSupported) {
	this.$refs.timedBlockDialog.optionallyPrompt()
	} else {
	this.$store.dispatch('blockUser', { id: this.user.id })
	}
	},
	},
	}

	export default BlockCard
	diff --git a/src/components/bookmark_folder_edit/bookmark_folder_edit.js b/src/components/bookmark_folder_edit/bookmark_folder_edit.js
	index a658a0f400..002fd688fd 100644
	--- a/src/components/bookmark_folder_edit/bookmark_folder_edit.js
	+++ b/src/components/bookmark_folder_edit/bookmark_folder_edit.js
	@@ -1,87 +1,88 @@
	-import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
	-import { useInterfaceStore } from 'src/stores/interface'
	import apiService from '../../services/api/api.service'
	import EmojiPicker from '../emoji_picker/emoji_picker.vue'

	+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
	+import { useInterfaceStore } from 'src/stores/interface'
	+
	const BookmarkFolderEdit = {
	data() {
	return {
	name: '',
	nameDraft: '',
	emoji: '',
	emojiUrl: null,
	emojiDraft: '',
	emojiUrlDraft: null,
	emojiPickerExpanded: false,
	reallyDelete: false,
	}
	},
	components: {
	EmojiPicker,
	},
	created() {
	if (!this.id) return
	const credentials = this.$store.state.users.currentUser.credentials
	apiService.fetchBookmarkFolders({ credentials }).then((folders) => {
	const folder = folders.find((folder) => folder.id === this.id)
	if (!folder) return

	this.nameDraft = this.name = folder.name
	this.emojiDraft = this.emoji = folder.emoji
	this.emojiUrlDraft = this.emojiUrl = folder.emoji_url
	})
	},
	computed: {
	id() {
	return this.$route.params.id
	},
	},
	methods: {
	selectEmoji(event) {
	this.emojiDraft = event.insertion
	this.emojiUrlDraft = event.insertionUrl
	},
	showEmojiPicker() {
	if (!this.emojiPickerExpanded) {
	this.$refs.picker.showPicker()
	}
	},
	onShowPicker() {
	this.emojiPickerExpanded = true
	},
	onClosePicker() {
	this.emojiPickerExpanded = false
	},
	updateFolder() {
	useBookmarkFoldersStore()
	.updateBookmarkFolder({
	folderId: this.id,
	name: this.nameDraft,
	emoji: this.emojiDraft,
	})
	.then(() => {
	this.$router.push({ name: 'bookmark-folders' })
	})
	},
	createFolder() {
	useBookmarkFoldersStore()
	.createBookmarkFolder({ name: this.nameDraft, emoji: this.emojiDraft })
	.then(() => {
	this.$router.push({ name: 'bookmark-folders' })
	})
	.catch((e) => {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'bookmark_folders.error',
	messageArgs: [e.message],
	level: 'error',
	})
	})
	},
	deleteFolder() {
	useBookmarkFoldersStore().deleteBookmarkFolder({ folderId: this.id })
	this.$router.push({ name: 'bookmark-folders' })
	},
	},
	}

	export default BookmarkFolderEdit
	diff --git a/src/components/bookmark_folders/bookmark_folders.js b/src/components/bookmark_folders/bookmark_folders.js
	index 8e09abb31f..c558f0812d 100644
	--- a/src/components/bookmark_folders/bookmark_folders.js
	+++ b/src/components/bookmark_folders/bookmark_folders.js
	@@ -1,28 +1,29 @@
	-import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
	import BookmarkFolderCard from '../bookmark_folder_card/bookmark_folder_card.vue'

	+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
	+
	const BookmarkFolders = {
	data() {
	return {
	isNew: false,
	}
	},
	components: {
	BookmarkFolderCard,
	},
	computed: {
	bookmarkFolders() {
	return useBookmarkFoldersStore().allFolders
	},
	},
	methods: {
	cancelNewFolder() {
	this.isNew = false
	},
	newFolder() {
	this.isNew = true
	},
	},
	}

	export default BookmarkFolders
	diff --git a/src/components/bookmark_folders_menu/bookmark_folders_menu_content.js b/src/components/bookmark_folders_menu/bookmark_folders_menu_content.js
	index e84b3bc859..73139eb085 100644
	--- a/src/components/bookmark_folders_menu/bookmark_folders_menu_content.js
	+++ b/src/components/bookmark_folders_menu/bookmark_folders_menu_content.js
	@@ -1,19 +1,20 @@
	import { mapState } from 'pinia'

	import { getBookmarkFolderEntries } from 'src/components/navigation/filter.js'
	import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
	+
	import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'

	export const BookmarkFoldersMenuContent = {
	props: ['showPin'],
	components: {
	NavigationEntry,
	},
	computed: {
	...mapState(useBookmarkFoldersStore, {
	folders: getBookmarkFolderEntries,
	}),
	},
	}

	export default BookmarkFoldersMenuContent
	diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
	index 6dd69ada43..caeb2aea70 100644
	--- a/src/components/chat/chat.js
	+++ b/src/components/chat/chat.js
	@@ -1,418 +1,419 @@
	import _ from 'lodash'
	import { mapState as mapPiniaState } from 'pinia'
	import { mapGetters, mapState } from 'vuex'

	-import { useInterfaceStore } from 'src/stores/interface.js'
	import { WSConnectionStatus } from '../../services/api/api.service.js'
	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 ChatMessage from '../chat_message/chat_message.vue'
	import ChatTitle from '../chat_title/chat_title.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	import {
	getNewTopPosition,
	getScrollPosition,
	isBottomedOut,
	isScrollable,
	} from './chat_layout_utils.js'

	+import { useInterfaceStore } from 'src/stores/interface.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(useInterfaceStore, {
	mobileLayout: (store) => store.layoutType === 'mobile',
	}),
	...mapState({
	backendInteractor: (state) => state.api.backendInteractor,
	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 this.backendInteractor
	.chatMessages({ id: chatId, maxId, sinceId })
	.then((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 {
	chat = await this.backendInteractor.getOrCreateChat({
	accountId: this.recipientId,
	})
	} 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

	this.backendInteractor
	.sendChatMessage(params)
	.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_list_item/chat_list_item.js b/src/components/chat_list_item/chat_list_item.js
	index 0923a8568b..4f4ea49557 100644
	--- a/src/components/chat_list_item/chat_list_item.js
	+++ b/src/components/chat_list_item/chat_list_item.js
	@@ -1,74 +1,75 @@
	import { mapState } from 'vuex'

	-import fileType from 'src/services/file_type/file_type.service'
	import AvatarList from '../avatar_list/avatar_list.vue'
	import ChatTitle from '../chat_title/chat_title.vue'
	import StatusBody from '../status_content/status_content.vue'
	import Timeago from '../timeago/timeago.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'

	+import fileType from 'src/services/file_type/file_type.service'
	+
	const ChatListItem = {
	name: 'ChatListItem',
	props: ['chat'],
	components: {
	UserAvatar,
	AvatarList,
	Timeago,
	ChatTitle,
	StatusBody,
	},
	computed: {
	...mapState({
	currentUser: (state) => state.users.currentUser,
	}),
	attachmentInfo() {
	if (this.chat.lastMessage.attachments.length === 0) {
	return
	}

	const types = this.chat.lastMessage.attachments.map((file) =>
	fileType.fileType(file.mimetype),
	)
	if (types.includes('video')) {
	return this.$t('file_type.video')
	} else if (types.includes('audio')) {
	return this.$t('file_type.audio')
	} else if (types.includes('image')) {
	return this.$t('file_type.image')
	} else {
	return this.$t('file_type.file')
	}
	},
	messageForStatusContent() {
	const message = this.chat.lastMessage
	const messageEmojis = message ? message.emojis : []
	const isYou = message && message.account_id === this.currentUser.id
	const content = message ? this.attachmentInfo \|\| message.content : ''
	const messagePreview = isYou
	? `<i>${this.$t('chats.you')}</i> ${content}`
	: content
	return {
	summary: '',
	emojis: messageEmojis,
	raw_html: messagePreview,
	text: messagePreview,
	attachments: [],
	}
	},
	},
	methods: {
	openChat() {
	if (this.chat.id) {
	this.$router.push({
	name: 'chat',
	params: {
	username: this.currentUser.screen_name,
	recipient_id: this.chat.account.id,
	},
	})
	}
	},
	},
	}

	export default ChatListItem
	diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
	index 3be2e76fe4..af3701ebff 100644
	--- a/src/components/chat_message/chat_message.js
	+++ b/src/components/chat_message/chat_message.js
	@@ -1,116 +1,117 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { defineAsyncComponent } from 'vue'
	import { mapGetters, mapState } from 'vuex'

	-import { useInstanceStore } from 'src/stores/instance.js'
	-import { useInterfaceStore } from 'src/stores/interface'
	import Attachment from '../attachment/attachment.vue'
	import ChatMessageDate from '../chat_message_date/chat_message_date.vue'
	import Gallery from '../gallery/gallery.vue'
	import LinkPreview from '../link-preview/link-preview.vue'
	import Popover from '../popover/popover.vue'
	import StatusContent from '../status_content/status_content.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInterfaceStore } from 'src/stores/interface'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faEllipsisH, faTimes } from '@fortawesome/free-solid-svg-icons'

	library.add(faTimes, faEllipsisH)

	const ChatMessage = {
	name: 'ChatMessage',
	props: [
	'author',
	'edited',
	'noHeading',
	'chatViewItem',
	'hoveredMessageChain',
	],
	emits: ['hover'],
	components: {
	Popover,
	Attachment,
	StatusContent,
	UserAvatar,
	Gallery,
	LinkPreview,
	ChatMessageDate,
	UserPopover: defineAsyncComponent(
	() => import('../user_popover/user_popover.vue'),
	),
	},
	computed: {
	// Returns HH:MM (hours and minutes) in local time.
	createdAt() {
	const time = this.chatViewItem.data.created_at
	return time.toLocaleTimeString('en', {
	hour: '2-digit',
	minute: '2-digit',
	hour12: false,
	})
	},
	isCurrentUser() {
	return this.message.account_id === this.currentUser.id
	},
	message() {
	return this.chatViewItem.data
	},
	isMessage() {
	return this.chatViewItem.type === 'message'
	},
	messageForStatusContent() {
	return {
	summary: '',
	emojis: this.message.emojis,
	raw_html: this.message.content \|\| '',
	text: this.message.content \|\| '',
	attachments: this.message.attachments,
	}
	},
	hasAttachment() {
	return this.message.attachments.length > 0
	},
	...mapPiniaState(useInterfaceStore, {
	betterShadow: (store) => store.browserSupport.cssFilter,
	}),
	...mapState({
	currentUser: (state) => state.users.currentUser,
	restrictedNicknames: (state) => useInstanceStore().restrictedNicknames,
	}),
	popoverMarginStyle() {
	if (this.isCurrentUser) {
	return {}
	} else {
	return { left: 50 }
	}
	},
	...mapGetters(['mergedConfig', 'findUser']),
	},
	data() {
	return {
	hovered: false,
	menuOpened: false,
	}
	},
	methods: {
	onHover(bool) {
	this.$emit('hover', {
	isHovered: bool,
	messageChainId: this.chatViewItem.messageChainId,
	})
	},
	async deleteMessage() {
	const confirmed = window.confirm(this.$t('chats.delete_confirm'))
	if (confirmed) {
	await this.$store.dispatch('deleteChatMessage', {
	messageId: this.chatViewItem.data.id,
	chatId: this.chatViewItem.data.chat_id,
	})
	}
	this.hovered = false
	this.menuOpened = false
	},
	},
	}

	export default ChatMessage
	diff --git a/src/components/component_preview/component_preview.js b/src/components/component_preview/component_preview.js
	index 70696f56bd..1d54f58deb 100644
	--- a/src/components/component_preview/component_preview.js
	+++ b/src/components/component_preview/component_preview.js
	@@ -1,86 +1,87 @@
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ColorInput from 'src/components/color_input/color_input.vue'
	+
	import genRandomSeed from 'src/services/random_seed/random_seed.service.js'
	import {
	adoptStyleSheets,
	createStyleSheet,
	} from 'src/services/style_setter/style_setter.js'

	export default {
	components: {
	Checkbox,
	ColorInput,
	},
	props: [
	'shadow',
	'shadowControl',
	'previewClass',
	'previewStyle',
	'previewCss',
	'disabled',
	'invalid',
	'noColorControl',
	],
	emits: ['update:shadow'],
	data() {
	return {
	colorOverride: undefined,
	lightGrid: false,
	zoom: 100,
	randomSeed: genRandomSeed(),
	}
	},
	mounted() {
	this.update()
	},
	computed: {
	hideControls() {
	return typeof this.shadow === 'string'
	},
	},
	watch: {
	previewCss() {
	this.update()
	},
	previewStyle() {
	this.update()
	},
	zoom() {
	this.update()
	},
	},
	methods: {
	updateProperty(axis, value) {
	this.$emit('update:shadow', { axis, value: Number(value) })
	},
	update() {
	const sheet = createStyleSheet('style-component-preview', 90)

	sheet.clear()

	const result = [this.previewCss]
	if (this.colorOverride) result.push(`--background: ${this.colorOverride}`)

	const styleRule = [
	'#component-preview-',
	this.randomSeed,
	' {\n',
	'.preview-block {\n',
	`zoom: ${this.zoom / 100};`,
	this.previewStyle,
	'\n}',
	'\n}',
	].join('')

	sheet.addRule(styleRule)
	sheet.addRule(
	['#component-preview-', this.randomSeed, ' {\n', ...result, '\n}'].join(
	'',
	),
	)

	sheet.ready = true
	adoptStyleSheets()
	},
	},
	}
	diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
	index 3caf4add7f..cb7cf47828 100644
	--- a/src/components/conversation/conversation.js
	+++ b/src/components/conversation/conversation.js
	@@ -1,628 +1,629 @@
	import { clone, filter, findIndex, get, reduce } from 'lodash'
	import { mapState as mapPiniaState } from 'pinia'
	import { mapGetters, mapState } from 'vuex'

	-import { useInterfaceStore } from 'src/stores/interface'
	import { WSConnectionStatus } from '../../services/api/api.service.js'
	import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.vue'
	import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
	import Status from '../status/status.vue'
	import ThreadTree from '../thread_tree/thread_tree.vue'

	+import { useInterfaceStore } from 'src/stores/interface'
	+
	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 = {
	data() {
	return {
	highlight: null,
	expanded: false,
	threadDisplayStatusObject: {}, // id => 'showing' \| 'hidden'
	statusContentPropertiesObject: {},
	inlineDivePosition: null,
	loadStatusError: null,
	}
	},
	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.$store.getters.mergedConfig.maxDepthInThread - 2
	return maxDepth >= 1 ? maxDepth : 1
	},
	streamingEnabled() {
	return (
	this.mergedConfig.useStreamingApi &&
	this.mastoUserSocketStatus === WSConnectionStatus.JOINED
	)
	},
	displayStyle() {
	return this.$store.getters.mergedConfig.conversationDisplay
	},
	isTreeView() {
	return !this.isLinearView
	},
	treeViewIsSimple() {
	return !this.$store.getters.mergedConfig.conversationTreeAdvanced
	},
	isLinearView() {
	return this.displayStyle === 'linear'
	},
	shouldFadeAncestors() {
	return this.$store.getters.mergedConfig.conversationTreeFadeAncestors
	},
	otherRepliesButtonPosition() {
	return this.$store.getters.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
	}
	},
	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
	},
	...mapGetters(['mergedConfig']),
	...mapState({
	mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
	}),
	...mapPiniaState(useInterfaceStore, {
	mobileLayout: (store) => store.layoutType === 'mobile',
	}),
	},
	components: {
	Status,
	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)
	} 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) {
	this.$store.state.api.backendInteractor
	.fetchConversation({ id: this.statusId })
	.then(({ ancestors, descendants }) => {
	this.$store.dispatch('addNewStatuses', { statuses: ancestors })
	this.$store.dispatch('addNewStatuses', { statuses: descendants })
	this.setHighlight(this.originalStatusId)
	})
	} else {
	this.loadStatusError = null
	this.$store.state.api.backendInteractor
	.fetchStatus({ id: this.statusId })
	.then((status) => {
	this.$store.dispatch('addNewStatuses', { statuses: [status] })
	this.fetchConversation()
	})
	.catch((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) {
	if (!id) return
	this.highlight = 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)
	},
	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
	// 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.
	this.$nextTick(() => {
	this.setHighlight(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 = {}
	},
	},
	}

	export default conversation
	diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
	index 48fd4fad1a..a2c48ae536 100644
	--- a/src/components/desktop_nav/desktop_nav.js
	+++ b/src/components/desktop_nav/desktop_nav.js
	@@ -1,128 +1,129 @@
	import SearchBar from 'components/search_bar/search_bar.vue'
	import { mapActions, mapState } from 'pinia'

	+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	+
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInterfaceStore } from 'src/stores/interface'
	-import ConfirmModal from '../confirm_modal/confirm_modal.vue'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faBullhorn,
	faCog,
	faComments,
	faHome,
	faInfoCircle,
	faSearch,
	faSignInAlt,
	faSignOutAlt,
	faTachometerAlt,
	faUserPlus,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faSignInAlt,
	faSignOutAlt,
	faHome,
	faComments,
	faBell,
	faUserPlus,
	faBullhorn,
	faSearch,
	faTachometerAlt,
	faCog,
	faInfoCircle,
	)

	export default {
	components: {
	SearchBar,
	ConfirmModal,
	},
	data: () => ({
	searchBarHidden: true,
	supportsMask:
	window.CSS &&
	window.CSS.supports &&
	(window.CSS.supports('mask-size', 'contain') \|\|
	window.CSS.supports('-webkit-mask-size', 'contain') \|\|
	window.CSS.supports('-moz-mask-size', 'contain') \|\|
	window.CSS.supports('-ms-mask-size', 'contain') \|\|
	window.CSS.supports('-o-mask-size', 'contain')),
	showingConfirmLogout: false,
	}),
	computed: {
	enableMask() {
	return this.supportsMask && this.logoMask
	},
	logoStyle() {
	return {
	visibility: this.enableMask ? 'hidden' : 'visible',
	}
	},
	logoMaskStyle() {
	return this.enableMask
	? {
	'mask-image': `url(${this.logo})`,
	}
	: {
	'background-color': this.enableMask ? '' : 'transparent',
	}
	},
	logoBgStyle() {
	return Object.assign(
	{
	margin: `${this.logoMargin} 0`,
	opacity: this.searchBarHidden ? 1 : 0,
	},
	this.enableMask
	? {}
	: {
	'background-color': this.enableMask ? '' : 'transparent',
	},
	)
	},
	...mapState(useInstanceStore, ['private']),
	...mapState(useInstanceStore, {
	logoMask: (store) => store.instanceIdentity.logoMask,
	logo: (store) => store.instanceIdentity.logo,
	logoLeft: (store) => store.instanceIdentity.logoLeft,
	logoMargin: (store) => store.instanceIdentity.logoMargin,
	sitename: (store) => store.instanceIdentity.name,
	hideSitename: (store) => store.instanceIdentity.hideSitename,
	}),
	currentUser() {
	return this.$store.state.users.currentUser
	},
	shouldConfirmLogout() {
	return this.$store.getters.mergedConfig.modalOnLogout
	},
	},
	methods: {
	scrollToTop() {
	window.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()
	},
	onSearchBarToggled(hidden) {
	this.searchBarHidden = hidden
	},
	...mapActions(useInterfaceStore, ['openSettingsModal']),
	},
	}
	diff --git a/src/components/edit_status_modal/edit_status_modal.js b/src/components/edit_status_modal/edit_status_modal.js
	index 8a16e42346..035e953bcc 100644
	--- a/src/components/edit_status_modal/edit_status_modal.js
	+++ b/src/components/edit_status_modal/edit_status_modal.js
	@@ -1,58 +1,59 @@
	import get from 'lodash/get'

	-import { useEditStatusStore } from 'src/stores/editStatus'
	import EditStatusForm from '../edit_status_form/edit_status_form.vue'
	import Modal from '../modal/modal.vue'

	+import { useEditStatusStore } from 'src/stores/editStatus'
	+
	const EditStatusModal = {
	components: {
	EditStatusForm,
	Modal,
	},
	data() {
	return {
	resettingForm: false,
	}
	},
	computed: {
	isLoggedIn() {
	return !!this.$store.state.users.currentUser
	},
	modalActivated() {
	return useEditStatusStore().modalActivated
	},
	isFormVisible() {
	return this.isLoggedIn && !this.resettingForm && this.modalActivated
	},
	params() {
	return useEditStatusStore().params \|\| {}
	},
	},
	watch: {
	params(newVal, oldVal) {
	if (get(newVal, 'statusId') !== get(oldVal, 'statusId')) {
	this.resettingForm = true
	this.$nextTick(() => {
	this.resettingForm = false
	})
	}
	},
	isFormVisible(val) {
	if (val) {
	this.$nextTick(
	() => this.$el && this.$el.querySelector('textarea').focus(),
	)
	}
	},
	},
	methods: {
	closeModal() {
	this.$refs.editStatusForm.requestClose()
	},
	doCloseModal() {
	useEditStatusStore().closeEditStatusModal()
	},
	},
	}

	export default EditStatusModal
	diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
	index 7752205e32..22631dc1d1 100644
	--- a/src/components/emoji_input/emoji_input.js
	+++ b/src/components/emoji_input/emoji_input.js
	@@ -1,605 +1,606 @@
	import { take } from 'lodash'

	import Popover from 'src/components/popover/popover.vue'
	import ScreenReaderNotice from 'src/components/screen_reader_notice/screen_reader_notice.vue'
	-import { useEmojiStore } from 'src/stores/emoji.js'
	import { ensureFinalFallback } from '../../i18n/languages.js'
	import Completion from '../../services/completion/completion.js'
	import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
	import genRandomSeed from '../../services/random_seed/random_seed.service.js'
	import EmojiPicker from '../emoji_picker/emoji_picker.vue'
	import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'

	+import { useEmojiStore } from 'src/stores/emoji.js'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'

	library.add(faSmileBeam)

	/**
	* EmojiInput - augmented inputs for emoji and autocomplete support in inputs
	* without having to give up the comfort of <input/> and <textarea/> elements
	*
	* Intended usage is:
	* <EmojiInput v-model="something">
	* <input v-model="something"/>
	* </EmojiInput>
	*
	* Works only with <input> and <textarea>. Intended to use with only one nested
	* input. It will find first input or textarea and work with that, multiple
	* nested children not tested. You HAVE TO duplicate v-model for both
	* <emoji-input> and <input>/<textarea> otherwise it will not work.
	*
	* Be prepared for CSS troubles though because it still wraps component in a div
	* while TRYING to make it look like nothing happened, but it could break stuff.
	*/

	const EmojiInput = {
	emits: ['update:modelValue', 'shown'],
	props: {
	suggest: {
	/**
	* suggest: function (input: String) => Suggestion[]
	*
	* Function that takes input string which takes string (textAtCaret)
	* and returns an array of Suggestions
	*
	* Suggestion is an object containing following properties:
	* displayText: string. Main display text, what actual suggestion
	* represents (user's screen name/emoji shortcode)
	* replacement: string. Text that should replace the textAtCaret
	* detailText: string, optional. Subtitle text, providing additional info
	* if present (user's nickname)
	* imageUrl: string, optional. Image to display alongside with suggestion,
	* currently if no image is provided, replacement will be used (for
	* unicode emojis)
	*
	* TODO: make it asynchronous when adding proper server-provided user
	* suggestions
	*
	* For commonly used suggestors (emoji, users, both) use suggestor.js
	*/
	required: true,
	type: Function,
	},
	modelValue: {
	/**
	* Used for v-model
	*/
	required: true,
	type: String,
	},
	enableEmojiPicker: {
	/**
	* Enables emoji picker support, this implies that custom emoji are supported
	*/
	required: false,
	type: Boolean,
	default: false,
	},
	hideEmojiButton: {
	/**
	* intended to use with external picker trigger, i.e. you have a button outside
	* input that will open up the picker, see triggerShowPicker()
	*/
	required: false,
	type: Boolean,
	default: false,
	},
	enableStickerPicker: {
	/**
	* Enables sticker picker support, only makes sense when enableEmojiPicker=true
	*/
	required: false,
	type: Boolean,
	default: false,
	},
	placement: {
	/**
	* Forces the panel to take a specific position relative to the input element.
	* The 'auto' placement chooses either bottom or top depending on which has the available space (when both have available space, bottom is preferred).
	*/
	required: false,
	type: String, // 'auto', 'top', 'bottom'
	default: 'auto',
	},
	newlineOnCtrlEnter: {
	required: false,
	type: Boolean,
	default: false,
	},
	},
	data() {
	return {
	randomSeed: genRandomSeed(),
	input: undefined,
	caretEl: undefined,
	highlighted: -1,
	caret: 0,
	focused: false,
	blurTimeout: null,
	temporarilyHideSuggestions: false,
	disableClickOutside: false,
	suggestions: [],
	overlayStyle: {},
	pickerShown: false,
	}
	},
	components: {
	Popover,
	EmojiPicker,
	UnicodeDomainIndicator,
	ScreenReaderNotice,
	},
	computed: {
	padEmoji() {
	return useEmojiStore().mergedConfig.padEmoji
	},
	defaultCandidateIndex() {
	return this.$store.getters.mergedConfig.autocompleteSelect ? 0 : -1
	},
	preText() {
	return this.modelValue.slice(0, this.caret)
	},
	postText() {
	return this.modelValue.slice(this.caret)
	},
	showSuggestions() {
	return (
	this.focused &&
	this.suggestions &&
	this.suggestions.length > 0 &&
	!this.pickerShown &&
	!this.temporarilyHideSuggestions
	)
	},
	textAtCaret() {
	return this.wordAtCaret?.word
	},
	wordAtCaret() {
	if (this.modelValue && this.caret) {
	const word =
	Completion.wordAtPosition(this.modelValue, this.caret - 1) \|\| {}
	return word
	}
	},
	languages() {
	return ensureFinalFallback(
	this.$store.getters.mergedConfig.interfaceLanguage,
	)
	},
	maybeLocalizedEmojiNamesAndKeywords() {
	return (emoji) => {
	const names = [emoji.displayText]
	const keywords = []

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

	if (emoji.annotations) {
	this.languages.forEach((lang) => {
	names.push(emoji.annotations[lang]?.name)

	keywords.push(...(emoji.annotations[lang]?.keywords \|\| []))
	})
	}

	return {
	names: names.filter((k) => k),
	keywords: keywords.filter((k) => k),
	}
	}
	},
	maybeLocalizedEmojiName() {
	return (emoji) => {
	if (!emoji.annotations) {
	return emoji.displayText
	}

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

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

	return emoji.displayText
	}
	},
	suggestionListId() {
	return `suggestions-${this.randomSeed}`
	},
	suggestionItemId() {
	return (index) => `suggestion-item-${index}-${this.randomSeed}`
	},
	},
	mounted() {
	const { root, hiddenOverlayCaret, suggestorPopover } = this.$refs
	const input =
	root.querySelector('.emoji-input > input') \|\|
	root.querySelector('.emoji-input > textarea')
	if (!input) return
	this.input = input
	this.caretEl = hiddenOverlayCaret
	if (suggestorPopover.setAnchorEl) {
	suggestorPopover.setAnchorEl(this.caretEl) // unit test compat
	this.$refs.picker.setAnchorEl(this.caretEl)
	} else {
	console.warn('setAnchorEl not found, are we in a unit test?')
	}
	const style = getComputedStyle(this.input)
	this.overlayStyle.padding = style.padding
	this.overlayStyle.border = style.border
	this.overlayStyle.margin = style.margin
	this.overlayStyle.lineHeight = style.lineHeight
	this.overlayStyle.fontFamily = style.fontFamily
	this.overlayStyle.fontSize = style.fontSize
	this.overlayStyle.wordWrap = style.wordWrap
	this.overlayStyle.whiteSpace = style.whiteSpace
	input.addEventListener('blur', this.onBlur)
	input.addEventListener('focus', this.onFocus)
	input.addEventListener('paste', this.onPaste)
	input.addEventListener('keyup', this.onKeyUp)
	input.addEventListener('keydown', this.onKeyDown)
	input.addEventListener('click', this.onClickInput)
	input.addEventListener('transitionend', this.onTransition)
	input.addEventListener('input', this.onInput)
	input.addEventListener('scroll', this.onInputScroll)
	},
	unmounted() {
	const { input } = this
	if (input) {
	input.removeEventListener('blur', this.onBlur)
	input.removeEventListener('focus', this.onFocus)
	input.removeEventListener('paste', this.onPaste)
	input.removeEventListener('keyup', this.onKeyUp)
	input.removeEventListener('keydown', this.onKeyDown)
	input.removeEventListener('click', this.onClickInput)
	input.removeEventListener('transitionend', this.onTransition)
	input.removeEventListener('input', this.onInput)
	input.removeEventListener('scroll', this.onInputScroll)
	}
	},
	watch: {
	showSuggestions: function (newValue) {
	this.$emit('shown', newValue)
	if (newValue) {
	this.$refs.suggestorPopover.showPopover()
	} else {
	this.$refs.suggestorPopover.hidePopover()
	}
	},
	textAtCaret: async function (newWord) {
	if (newWord === undefined) return
	const firstchar = newWord.charAt(0)
	if (newWord === firstchar) {
	this.suggestions = []
	return
	}
	const matchedSuggestions = await this.suggest(
	newWord,
	this.maybeLocalizedEmojiNamesAndKeywords,
	)
	// Async: cancel if textAtCaret has changed during wait
	if (this.textAtCaret !== newWord \|\| matchedSuggestions.length <= 0) {
	this.suggestions = []
	return
	}
	this.suggestions = take(matchedSuggestions, 5).map(
	({ imageUrl, ...rest }) => ({
	...rest,
	img: imageUrl \|\| '',
	}),
	)
	this.highlighted = this.defaultCandidateIndex
	this.$refs.screenReaderNotice.announce(
	this.$t(
	'tool_tip.autocomplete_available',
	{ number: this.suggestions.length },
	this.suggestions.length,
	),
	)
	},
	},
	methods: {
	onInputScroll(e) {
	this.$refs.hiddenOverlay.scrollTo({
	top: this.input.scrollTop,
	left: this.input.scrollLeft,
	})
	this.setCaret(e)
	},
	triggerShowPicker() {
	this.$nextTick(() => {
	this.$refs.picker.showPicker()
	this.scrollIntoView()
	})
	// This temporarily disables "click outside" handler
	// since external trigger also means click originates
	// from outside, thus preventing picker from opening
	this.disableClickOutside = true
	setTimeout(() => {
	this.disableClickOutside = false
	}, 0)
	},
	togglePicker() {
	this.input.focus()
	if (!this.pickerShown) {
	this.scrollIntoView()
	this.$refs.picker.showPicker()
	this.$refs.picker.startEmojiLoad()
	} else {
	this.$refs.picker.hidePicker()
	}
	},
	replace(replacement) {
	const newValue = Completion.replaceWord(
	this.modelValue,
	this.wordAtCaret,
	replacement,
	)
	this.$emit('update:modelValue', newValue)
	this.caret = 0
	},
	insert({ insertion, keepOpen, surroundingSpace = true }) {
	const before = this.modelValue.substring(0, this.caret) \|\| ''
	const after = this.modelValue.substring(this.caret) \|\| ''

	/* Using a bit more smart approach to padding emojis with spaces:
	* - put a space before cursor if there isn't one already, unless we
	* are at the beginning of post or in spam mode
	* - put a space after emoji if there isn't one already unless we are
	* in spam mode
	*
	* The idea is that when you put a cursor somewhere in between sentence
	* inserting just ' :emoji: ' will add more spaces to post which might
	* break the flow/spacing, as well as the case where user ends sentence
	* with a space before adding emoji.
	*
	* Spam mode is intended for creating multi-part emojis and overall spamming
	* them, masto seem to be rendering :emoji::emoji: correctly now so why not
	*/
	const isSpaceRegex = /\s/
	const spaceBefore =
	surroundingSpace &&
	!isSpaceRegex.exec(before.slice(-1)) &&
	before.length &&
	this.padEmoji > 0
	? ' '
	: ''
	const spaceAfter =
	surroundingSpace && !isSpaceRegex.exec(after[0]) && this.padEmoji
	? ' '
	: ''

	const newValue = [before, spaceBefore, insertion, spaceAfter, after].join(
	'',
	)
	this.$emit('update:modelValue', newValue)
	const position =
	this.caret + (insertion + spaceAfter + spaceBefore).length
	if (!keepOpen) {
	this.input.focus()
	}

	this.$nextTick(function () {
	// Re-focus inputbox after clicking suggestion
	// Set selection right after the replacement instead of the very end
	this.input.setSelectionRange(position, position)
	this.caret = position
	})
	},
	replaceText(e, suggestion) {
	const len = this.suggestions.length \|\| 0
	if (this.textAtCaret.length === 1) {
	return
	}
	if (len > 0 \|\| suggestion) {
	const chosenSuggestion =
	suggestion \|\| this.suggestions[this.highlighted]
	const replacement = chosenSuggestion.replacement
	const newValue = Completion.replaceWord(
	this.modelValue,
	this.wordAtCaret,
	replacement,
	)
	this.$emit('update:modelValue', newValue)
	this.highlighted = 0
	const position = this.wordAtCaret.start + replacement.length

	this.$nextTick(function () {
	// Re-focus inputbox after clicking suggestion
	this.input.focus()
	// Set selection right after the replacement instead of the very end
	this.input.setSelectionRange(position, position)
	this.caret = position
	})
	e.preventDefault()
	}
	},
	cycleBackward(e) {
	const len = this.suggestions.length \|\| 0

	this.highlighted -= 1
	if (this.highlighted === -1) {
	this.input.focus()
	} else if (this.highlighted < -1) {
	this.highlighted = len - 1
	}
	if (len > 0) {
	e.preventDefault()
	}
	},
	cycleForward(e) {
	const len = this.suggestions.length \|\| 0

	this.highlighted += 1
	if (this.highlighted >= len) {
	this.highlighted = -1
	this.input.focus()
	}
	if (len > 0) {
	e.preventDefault()
	}
	},
	scrollIntoView() {
	const rootRef = this.$refs.picker.$el
	/* 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 scrollerRef =
	this.$el.closest('.sidebar-scroller') \|\|
	this.$el.closest('.post-form-modal-view') \|\|
	window
	const currentScroll =
	scrollerRef === window ? scrollerRef.scrollY : scrollerRef.scrollTop
	const scrollerHeight =
	scrollerRef === window
	? scrollerRef.innerHeight
	: scrollerRef.offsetHeight

	const scrollerBottomBorder = currentScroll + scrollerHeight
	// We check where the bottom border of root element is, this uses findOffset
	// to find offset relative to scrollable container (scroller)
	const rootBottomBorder =
	rootRef.offsetHeight + findOffset(rootRef, scrollerRef).top

	const bottomDelta = Math.max(0, rootBottomBorder - scrollerBottomBorder)
	// could also check top delta but there's no case for it
	const targetScroll = currentScroll + bottomDelta

	if (scrollerRef === window) {
	scrollerRef.scroll(0, targetScroll)
	} else {
	scrollerRef.scrollTop = targetScroll
	}

	this.$nextTick(() => {
	const { offsetHeight } = this.input
	const { picker } = this.$refs
	const pickerBottom = picker.$el.getBoundingClientRect().bottom
	if (pickerBottom > window.innerHeight) {
	picker.$el.style.top = 'auto'
	picker.$el.style.bottom = offsetHeight + 'px'
	}
	})
	},
	onPickerShown() {
	this.pickerShown = true
	},
	onPickerClosed() {
	this.pickerShown = false
	},
	onBlur(e) {
	// Clicking on any suggestion removes focus from autocomplete,
	// preventing click handler ever executing.
	this.blurTimeout = setTimeout(() => {
	this.focused = false
	this.setCaret(e)
	}, 200)
	},
	onClick(e, suggestion) {
	this.replaceText(e, suggestion)
	},
	onFocus(e) {
	if (this.blurTimeout) {
	clearTimeout(this.blurTimeout)
	this.blurTimeout = null
	}

	this.focused = true
	this.setCaret(e)
	this.temporarilyHideSuggestions = false
	},
	onKeyUp(e) {
	const { key } = e
	this.setCaret(e)

	// Setting hider in keyUp to prevent suggestions from blinking
	// when moving away from suggested spot
	if (key === 'Escape') {
	this.temporarilyHideSuggestions = true
	} else {
	this.temporarilyHideSuggestions = false
	}
	},
	onPaste(e) {
	this.setCaret(e)
	},
	onKeyDown(e) {
	const { ctrlKey, shiftKey, key } = e
	if (this.newlineOnCtrlEnter && ctrlKey && key === 'Enter') {
	this.insert({ insertion: '\n', surroundingSpace: false })
	// Ensure only one new line is added on macos
	e.stopPropagation()
	e.preventDefault()

	// Scroll the input element to the position of the cursor
	this.$nextTick(() => {
	this.input.blur()
	this.input.focus()
	})
	}
	// Disable suggestions hotkeys if suggestions are hidden
	if (!this.temporarilyHideSuggestions) {
	if (key === 'Tab') {
	if (shiftKey) {
	this.cycleBackward(e)
	} else {
	this.cycleForward(e)
	}
	}
	if (key === 'ArrowUp') {
	this.cycleBackward(e)
	} else if (key === 'ArrowDown') {
	this.cycleForward(e)
	}
	if (key === 'Enter') {
	if (!ctrlKey) {
	this.replaceText(e)
	}
	}
	}
	// Probably add optional keyboard controls for emoji picker?

	// Escape hides suggestions, if suggestions are hidden it
	// de-focuses the element (i.e. default browser behavior)
	if (key === 'Escape') {
	if (!this.temporarilyHideSuggestions) {
	this.input.focus()
	}
	}
	},
	onInput(e) {
	this.setCaret(e)
	this.$emit('update:modelValue', e.target.value)
	},
	onStickerUploaded(e) {
	this.$emit('sticker-uploaded', e)
	},
	onStickerUploadFailed(e) {
	this.$emit('sticker-upload-Failed', e)
	},
	setCaret({ target: { selectionStart } }) {
	this.caret = selectionStart
	this.$nextTick(() => {
	this.$refs.suggestorPopover.updateStyles()
	})
	},
	autoCompleteItemLabel(suggestion) {
	if (suggestion.user) {
	return suggestion.displayText + ' ' + suggestion.detailText
	} else {
	return this.maybeLocalizedEmojiName(suggestion)
	}
	},
	},
	}

	export default EmojiInput
	diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
	index a749a326c6..79c0ab47e4 100644
	--- a/src/components/emoji_picker/emoji_picker.js
	+++ b/src/components/emoji_picker/emoji_picker.js
	@@ -1,435 +1,436 @@
	import { chunk, debounce, trim } from 'lodash'
	import { defineAsyncComponent } from 'vue'

	import Popover from 'src/components/popover/popover.vue'
	-import { useEmojiStore } from 'src/stores/emoji.js'
	-import { useInstanceStore } from 'src/stores/instance.js'
	import { ensureFinalFallback } from '../../i18n/languages.js'
	import Checkbox from '../checkbox/checkbox.vue'
	import StillImage from '../still-image/still-image.vue'

	+import { useEmojiStore } from 'src/stores/emoji.js'
	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBasketballBall,
	faBoxOpen,
	faBus,
	faCode,
	faFlag,
	faIceCream,
	faLightbulb,
	faPaw,
	faSmile,
	faSmileBeam,
	faStickyNote,
	faUser,
	} from '@fortawesome/free-solid-svg-icons'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	export default EmojiPicker
	diff --git a/src/components/features_panel/features_panel.js b/src/components/features_panel/features_panel.js
	index cf61e1ae8b..dc46f5e6fe 100644
	--- a/src/components/features_panel/features_panel.js
	+++ b/src/components/features_panel/features_panel.js
	@@ -1,23 +1,24 @@
	import { mapState } from 'pinia'

	-import { useInstanceStore } from 'src/stores/instance.js'
	import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	const FeaturesPanel = {
	computed: {
	...mapState(useInstanceStore, {
	shout: (store) => store.shoutAvailable,
	pleromaChatMessages: (store) =>
	store.featureSet.pleromaChatMessagesAvailable,
	gopher: (store) => store.featureSet.gopherAvailable,
	whoToFollow: (store) => store.featureSet.suggestionsEnabled,
	mediaProxy: (store) => store.featureSet.mediaProxyAvailable,
	minimalScopesMode: (store) => store.prefsStorage.minimalScopesMode,
	textlimit: (store) => store.limits.textlimit,
	uploadlimit: (store) =>
	fileSizeFormatService.fileSizeFormat(store.limits.uploadlimit),
	}),
	},
	}

	export default FeaturesPanel
	diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
	index 08d25d52da..b0dc813f6a 100644
	--- a/src/components/font_control/font_control.js
	+++ b/src/components/font_control/font_control.js
	@@ -1,54 +1,55 @@
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import Popover from 'src/components/popover/popover.vue'
	-import { useInterfaceStore } from 'src/stores/interface'
	import Select from '../select/select.vue'

	+import { useInterfaceStore } from 'src/stores/interface'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faExclamationTriangle,
	faFont,
	faKeyboard,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faExclamationTriangle, faKeyboard, faFont)

	export default {
	components: {
	Select,
	Checkbox,
	Popover,
	},
	props: ['name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'],
	mounted() {
	useInterfaceStore().queryLocalFonts()
	},
	emits: ['update:modelValue'],
	data() {
	return {
	manualEntry: false,
	availableOptions: [
	this.noInherit ? '' : 'inherit',
	'serif',
	'sans-serif',
	'monospace',
	...(this.options \|\| []),
	].filter((_) => _),
	}
	},
	methods: {
	toggleManualEntry() {
	this.manualEntry = !this.manualEntry
	},
	},
	computed: {
	present() {
	return typeof this.modelValue !== 'undefined'
	},
	localFontsList() {
	return useInterfaceStore().localFonts
	},
	localFontsSize() {
	return useInterfaceStore().localFonts?.length
	},
	},
	}
	diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
	index 9934a79059..9540302efd 100644
	--- a/src/components/gallery/gallery.js
	+++ b/src/components/gallery/gallery.js
	@@ -1,140 +1,141 @@
	import { set, sumBy } from 'lodash'

	-import { useMediaViewerStore } from 'src/stores/media_viewer'
	import Attachment from '../attachment/attachment.vue'

	+import { useMediaViewerStore } from 'src/stores/media_viewer'
	+
	const Gallery = {
	props: [
	'attachments',
	'compact',
	'limitRows',
	'descriptions',
	'limit',
	'nsfw',
	'setMedia',
	'size',
	'editable',
	'removeAttachment',
	'shiftUpAttachment',
	'shiftDnAttachment',
	'editAttachment',
	'grid',
	],
	data() {
	return {
	sizes: {},
	hidingLong: true,
	}
	},
	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) => {
	if (attachment.mimetype.includes('audio')) {
	return [
	...acc,
	{ audio: true, items: [attachment] },
	{ items: [] },
	]
	}
	if (
	!(
	attachment.mimetype.includes('image') \|\|
	attachment.mimetype.includes('video') \|\|
	attachment.mimetype.includes('flash')
	)
	) {
	return [
	...acc,
	{ minimal: true, items: [attachment] },
	{ items: [] },
	]
	}
	const maxPerRow = 3
	const attachmentsRemaining = this.attachments.length - i + 1
	const currentRow = acc[acc.length - 1].items
	currentRow.push(attachment)
	if (
	currentRow.length >= maxPerRow &&
	attachmentsRemaining > maxPerRow
	) {
	return [...acc, { items: [] }]
	} else {
	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
	}
	},
	},
	methods: {
	onNaturalSizeLoad({ id, width, height }) {
	set(this.sizes, id, { width, height })
	},
	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)
	},
	},
	}

	export default Gallery
	diff --git a/src/components/lists/lists.js b/src/components/lists/lists.js
	index 4461782450..0508ace828 100644
	--- a/src/components/lists/lists.js
	+++ b/src/components/lists/lists.js
	@@ -1,28 +1,29 @@
	-import { useListsStore } from 'src/stores/lists'
	import ListsCard from '../lists_card/lists_card.vue'

	+import { useListsStore } from 'src/stores/lists'
	+
	const Lists = {
	data() {
	return {
	isNew: false,
	}
	},
	components: {
	ListsCard,
	},
	computed: {
	lists() {
	return useListsStore().allLists
	},
	},
	methods: {
	cancelNewList() {
	this.isNew = false
	},
	newList() {
	this.isNew = true
	},
	},
	}

	export default Lists
	diff --git a/src/components/lists_edit/lists_edit.js b/src/components/lists_edit/lists_edit.js
	index 64a2e942c3..928b567253 100644
	--- a/src/components/lists_edit/lists_edit.js
	+++ b/src/components/lists_edit/lists_edit.js
	@@ -1,151 +1,152 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapGetters, mapState } from 'vuex'

	import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	-import { useInterfaceStore } from 'src/stores/interface'
	-import { useListsStore } from 'src/stores/lists'
	import BasicUserCard from '../basic_user_card/basic_user_card.vue'
	import ListsUserSearch from '../lists_user_search/lists_user_search.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'

	+import { useInterfaceStore } from 'src/stores/interface'
	+import { useListsStore } from 'src/stores/lists'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faChevronLeft, faSearch } from '@fortawesome/free-solid-svg-icons'

	library.add(faSearch, faChevronLeft)

	const ListsNew = {
	components: {
	BasicUserCard,
	UserAvatar,
	ListsUserSearch,
	TabSwitcher,
	PanelLoading,
	},
	data() {
	return {
	title: '',
	titleDraft: '',
	membersUserIds: [],
	removedUserIds: new Set([]), // users we added for members, to undo
	searchUserIds: [],
	addedUserIds: new Set([]), // users we added from search, to undo
	searchLoading: false,
	reallyDelete: false,
	}
	},
	created() {
	if (!this.id) return
	useListsStore()
	.fetchList({ listId: this.id })
	.then(() => {
	this.title = this.findListTitle(this.id)
	this.titleDraft = this.title
	})
	useListsStore()
	.fetchListAccounts({ listId: this.id })
	.then(() => {
	this.membersUserIds = this.findListAccounts(this.id)
	this.membersUserIds.forEach((userId) => {
	this.$store.dispatch('fetchUserIfMissing', userId)
	})
	})
	},
	computed: {
	id() {
	return this.$route.params.id
	},
	membersUsers() {
	return [...this.membersUserIds, ...this.addedUserIds]
	.map((userId) => this.findUser(userId))
	.filter((user) => user)
	},
	searchUsers() {
	return this.searchUserIds
	.map((userId) => this.findUser(userId))
	.filter((user) => user)
	},
	...mapState({
	currentUser: (state) => state.users.currentUser,
	}),
	...mapPiniaState(useListsStore, ['findListTitle', 'findListAccounts']),
	...mapGetters(['findUser']),
	},
	methods: {
	onInput() {
	this.search(this.query)
	},
	toggleRemoveMember(user) {
	if (this.removedUserIds.has(user.id)) {
	this.id && this.addUser(user)
	this.removedUserIds.delete(user.id)
	} else {
	this.id && this.removeUser(user.id)
	this.removedUserIds.add(user.id)
	}
	},
	toggleAddFromSearch(user) {
	if (this.addedUserIds.has(user.id)) {
	this.id && this.removeUser(user.id)
	this.addedUserIds.delete(user.id)
	} else {
	this.id && this.addUser(user)
	this.addedUserIds.add(user.id)
	}
	},
	isRemoved(user) {
	return this.removedUserIds.has(user.id)
	},
	isAdded(user) {
	return this.addedUserIds.has(user.id)
	},
	addUser(user) {
	useListsStore().addListAccount({ accountId: user.id, listId: this.id })
	},
	removeUser(userId) {
	useListsStore().removeListAccount({ accountId: userId, listId: this.id })
	},
	onSearchLoading() {
	this.searchLoading = true
	},
	onSearchLoadingDone() {
	this.searchLoading = false
	},
	onSearchResults(results) {
	this.searchLoading = false
	this.searchUserIds = results
	},
	updateListTitle() {
	useListsStore().setList({ listId: this.id, title: this.titleDraft })
	this.title = this.findListTitle(this.id)
	},
	createList() {
	useListsStore()
	.createList({ title: this.titleDraft })
	.then((list) => {
	return useListsStore()
	.setListAccounts({
	listId: list.id,
	accountIds: [...this.addedUserIds],
	})
	.then(() => list.id)
	})
	.then((listId) => {
	this.$router.push({ name: 'lists-timeline', params: { id: listId } })
	})
	.catch((e) => {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'lists.error',
	messageArgs: [e.message],
	level: 'error',
	})
	})
	},
	deleteList() {
	useListsStore().deleteList({ listId: this.id })
	this.$router.push({ name: 'lists' })
	},
	},
	}

	export default ListsNew
	diff --git a/src/components/lists_menu/lists_menu_content.js b/src/components/lists_menu/lists_menu_content.js
	index 57ddf52a96..35fab369d7 100644
	--- a/src/components/lists_menu/lists_menu_content.js
	+++ b/src/components/lists_menu/lists_menu_content.js
	@@ -1,26 +1,27 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

	import { getListEntries } from 'src/components/navigation/filter.js'
	import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
	+
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useListsStore } from 'src/stores/lists'

	export const ListsMenuContent = {
	props: ['showPin'],
	components: {
	NavigationEntry,
	},
	computed: {
	...mapPiniaState(useListsStore, {
	lists: getListEntries,
	}),
	...mapState({
	currentUser: (state) => state.users.currentUser,
	privateMode: (state) => useInstanceStore().private,
	federating: (state) => useInstanceStore().federating,
	}),
	},
	}

	export default ListsMenuContent
	diff --git a/src/components/lists_timeline/lists_timeline.js b/src/components/lists_timeline/lists_timeline.js
	index ae1554eb6c..d7e407fb7f 100644
	--- a/src/components/lists_timeline/lists_timeline.js
	+++ b/src/components/lists_timeline/lists_timeline.js
	@@ -1,46 +1,47 @@
	-import { useListsStore } from 'src/stores/lists'
	import Timeline from '../timeline/timeline.vue'

	+import { useListsStore } from 'src/stores/lists'
	+
	const ListsTimeline = {
	data() {
	return {
	listId: null,
	}
	},
	components: {
	Timeline,
	},
	computed: {
	timeline() {
	return this.$store.state.statuses.timelines.list
	},
	},
	watch: {
	$route: function (route) {
	if (route.name === 'lists-timeline' && route.params.id !== this.listId) {
	this.listId = route.params.id
	this.$store.dispatch('stopFetchingTimeline', 'list')
	this.$store.commit('clearTimeline', { timeline: 'list' })
	useListsStore().fetchList({ listId: this.listId })
	this.$store.dispatch('startFetchingTimeline', {
	timeline: 'list',
	listId: this.listId,
	})
	}
	},
	},
	created() {
	this.listId = this.$route.params.id
	useListsStore().fetchList({ listId: this.listId })
	this.$store.dispatch('startFetchingTimeline', {
	timeline: 'list',
	listId: this.listId,
	})
	},
	unmounted() {
	this.$store.dispatch('stopFetchingTimeline', 'list')
	this.$store.commit('clearTimeline', { timeline: 'list' })
	},
	}

	export default ListsTimeline
	diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js
	index e0ec1a13d6..b16fb8d2ff 100644
	--- a/src/components/login_form/login_form.js
	+++ b/src/components/login_form/login_form.js
	@@ -1,102 +1,103 @@
	import { mapActions, mapState as mapPiniaState, mapStores } from 'pinia'
	import { mapState } from 'vuex'

	+import oauthApi from '../../services/new_api/oauth.js'
	+
	import { useAuthFlowStore } from 'src/stores/auth_flow.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	-import oauthApi from '../../services/new_api/oauth.js'

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

	library.add(faTimes)

	const LoginForm = {
	data: () => ({
	user: {},
	error: false,
	}),
	computed: {
	...mapState({
	loggingIn: (state) => state.users.loggingIn,
	}),
	...mapPiniaState(useOAuthStore, ['clientId', 'clientSecret']),
	...mapPiniaState(useInstanceStore, ['server', 'registrationOpen']),
	...mapPiniaState(useAuthFlowStore, {
	isTokenAuth: (store) => store.requiredToken,
	isPasswordAuth: (store) => !store.requiredToken,
	}),
	},
	methods: {
	...mapActions(useAuthFlowStore, ['requireMFA', 'login']),
	...mapActions(useOAuthStore, ['ensureAppToken']),
	submit() {
	this.isTokenAuth ? this.submitToken() : this.submitPassword()
	},
	submitToken() {
	const data = {
	instance: this.server,
	commit: this.$store.commit,
	}

	// NOTE: we do not really need the app token, but obtaining a token and
	// calling verify_credentials is the only way to ensure the app still works.
	this.ensureAppToken().then(() => {
	const app = {
	clientId: this.clientId,
	clientSecret: this.clientSecret,
	}
	oauthApi.login({ ...app, ...data })
	})
	},
	submitPassword() {
	this.error = false

	// NOTE: we do not really need the app token, but obtaining a token and
	// calling verify_credentials is the only way to ensure the app still works.
	this.ensureAppToken().then(() => {
	const app = {
	clientId: this.clientId,
	clientSecret: this.clientSecret,
	}

	oauthApi
	.getTokenWithCredentials({
	...app,
	instance: this.server,
	username: this.user.username,
	password: this.user.password,
	})
	.then((result) => {
	if (result.error) {
	if (result.error === 'mfa_required') {
	this.requireMFA({ settings: result })
	} else if (result.identifier === 'password_reset_required') {
	this.$router.push({
	name: 'password-reset',
	params: { passwordResetRequested: true },
	})
	} else {
	this.error = result.error
	this.focusOnPasswordInput()
	}
	return
	}
	this.login(result).then(() => {
	this.$router.push({ name: 'friends' })
	})
	})
	})
	},
	clearError() {
	this.error = false
	},
	focusOnPasswordInput() {
	const passwordInput = this.$refs.passwordInput
	passwordInput.focus()
	passwordInput.setSelectionRange(0, passwordInput.value.length)
	},
	},
	}

	export default LoginForm
	diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
	index 6199a6e32f..b983d92ab8 100644
	--- a/src/components/media_modal/media_modal.js
	+++ b/src/components/media_modal/media_modal.js
	@@ -1,163 +1,164 @@
	import Flash from 'src/components/flash/flash.vue'
	-import { useMediaViewerStore } from 'src/stores/media_viewer'
	import fileTypeService from '../../services/file_type/file_type.service.js'
	import GestureService from '../../services/gesture_service/gesture_service'
	import Modal from '../modal/modal.vue'
	import PinchZoom from '../pinch_zoom/pinch_zoom.vue'
	import StillImage from '../still-image/still-image.vue'
	import SwipeClick from '../swipe_click/swipe_click.vue'
	import VideoAttachment from '../video_attachment/video_attachment.vue'

	+import { useMediaViewerStore } from 'src/stores/media_viewer'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faChevronLeft,
	faChevronRight,
	faCircleNotch,
	faTimes,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faChevronLeft, faChevronRight, faCircleNotch, faTimes)

	const MediaModal = {
	components: {
	StillImage,
	VideoAttachment,
	PinchZoom,
	SwipeClick,
	Modal,
	Flash,
	},
	data() {
	return {
	loading: false,
	swipeDirection: GestureService.DIRECTION_LEFT,
	swipeThreshold: () => {
	const considerableMoveRatio = 1 / 4
	return window.innerWidth * considerableMoveRatio
	},
	pinchZoomMinScale: 1,
	pinchZoomScaleResetLimit: 1.2,
	}
	},
	computed: {
	showing() {
	return useMediaViewerStore().activated
	},
	media() {
	return useMediaViewerStore().media
	},
	description() {
	return this.currentMedia.description
	},
	currentIndex() {
	return useMediaViewerStore().currentIndex
	},
	currentMedia() {
	return this.media[this.currentIndex]
	},
	canNavigate() {
	return this.media.length > 1
	},
	type() {
	return this.currentMedia ? this.getType(this.currentMedia) : null
	},
	swipeDisableClickThreshold() {
	// If there is only one media, allow more mouse movements to close the modal
	// because there is less chance that the user wants to switch to another image
	return () => (this.canNavigate ? 1 : 30)
	},
	},
	methods: {
	getType(media) {
	return fileTypeService.fileType(media.mimetype)
	},
	hide() {
	// HACK: Closing immediately via a touch will cause the click
	// to be processed on the content below the overlay
	const transitionTime = 100 // ms
	setTimeout(() => {
	useMediaViewerStore().closeMediaViewer()
	}, transitionTime)
	},
	hideIfNotSwiped(event) {
	// If we have swiped over SwipeClick, do not trigger hide
	const comp = this.$refs.swipeClick
	if (!comp) {
	this.hide()
	} else {
	comp.$gesture.click(event)
	}
	},
	goPrev() {
	if (this.canNavigate) {
	const prevIndex =
	this.currentIndex === 0
	? this.media.length - 1
	: this.currentIndex - 1
	const newMedia = this.media[prevIndex]
	if (this.getType(newMedia) === 'image') {
	this.loading = true
	}
	useMediaViewerStore().setCurrentMedia(newMedia)
	}
	},
	goNext() {
	if (this.canNavigate) {
	const nextIndex =
	this.currentIndex === this.media.length - 1
	? 0
	: this.currentIndex + 1
	const newMedia = this.media[nextIndex]
	if (this.getType(newMedia) === 'image') {
	this.loading = true
	}
	useMediaViewerStore().setCurrentMedia(newMedia)
	}
	},
	onImageLoaded() {
	this.loading = false
	},
	handleSwipePreview(offsets) {
	this.$refs.pinchZoom.setTransform({ scale: 1, x: offsets[0], y: 0 })
	},
	handleSwipeEnd(sign) {
	this.$refs.pinchZoom.setTransform({ scale: 1, x: 0, y: 0 })
	if (sign > 0) {
	this.goNext()
	} else if (sign < 0) {
	this.goPrev()
	}
	},
	handleKeyupEvent(e) {
	if (this.showing && e.keyCode === 27) {
	// escape
	this.hide()
	}
	},
	handleKeydownEvent(e) {
	if (!this.showing) {
	return
	}

	if (e.keyCode === 39) {
	// arrow right
	this.goNext()
	} else if (e.keyCode === 37) {
	// arrow left
	this.goPrev()
	}
	},
	},
	mounted() {
	window.addEventListener('popstate', this.hide)
	document.addEventListener('keyup', this.handleKeyupEvent)
	document.addEventListener('keydown', this.handleKeydownEvent)
	},
	unmounted() {
	window.removeEventListener('popstate', this.hide)
	document.removeEventListener('keyup', this.handleKeyupEvent)
	document.removeEventListener('keydown', this.handleKeydownEvent)
	},
	}

	export default MediaModal
	diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
	index 2831b4b567..ee61fa369e 100644
	--- a/src/components/media_upload/media_upload.js
	+++ b/src/components/media_upload/media_upload.js
	@@ -1,197 +1,198 @@
	-import { useInstanceStore } from 'src/stores/instance.js'
	import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
	import statusPosterService from '../../services/status_poster/status_poster.service.js'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faCircleNotch, faUpload } from '@fortawesome/free-solid-svg-icons'

	library.add(faUpload, faCircleNotch)

	const mediaUpload = {
	data() {
	return {
	uploadCount: 0,
	uploadReady: true,
	}
	},
	computed: {
	uploading() {
	return this.uploadCount > 0
	},
	},
	methods: {
	onClick() {
	if (this.uploadReady) {
	this.$refs.input.click()
	}
	},
	async resizeImage(file) {
	// Skip if not an image or if it's a GIF
	if (!file.type.startsWith('image/') \|\| file.type === 'image/gif') {
	return file
	}

	// Skip if image compression is disabled
	if (!this.$store.getters.mergedConfig.imageCompression) {
	return file
	}

	// For PNGs, check if animated
	if (file.type === 'image/png') {
	const isAnimated = await this.isAnimatedPng(file)
	if (isAnimated) {
	return file
	}
	}

	return new Promise((resolve) => {
	const img = new Image()
	img.onload = () => {
	// Calculate new dimensions
	let width = img.width
	let height = img.height
	const maxSize = 2048

	if (width > maxSize \|\| height > maxSize) {
	if (width > height) {
	height = Math.round((height * maxSize) / width)
	width = maxSize
	} else {
	width = Math.round((width * maxSize) / height)
	height = maxSize
	}
	}

	// Create canvas and resize
	const canvas = document.createElement('canvas')
	canvas.width = width
	canvas.height = height
	const ctx = canvas.getContext('2d')
	ctx.drawImage(img, 0, 0, width, height)

	// Check WebP support by trying to create a WebP canvas
	const testCanvas = document.createElement('canvas')
	const supportsWebP = testCanvas
	.toDataURL('image/webp')
	.startsWith('data:image/webp')

	// Convert to WebP if supported and alwaysUseJpeg is false, otherwise JPEG
	const type =
	!this.$store.getters.mergedConfig.alwaysUseJpeg && supportsWebP
	? 'image/webp'
	: 'image/jpeg'
	const extension = type === 'image/webp' ? '.webp' : '.jpg'

	// Remove the original extension and add new one
	const newFileName = file.name.replace(/\.[^/.]+$/, '') + extension

	canvas.toBlob(
	(blob) => {
	resolve(
	new File([blob], newFileName, {
	type,
	lastModified: Date.now(),
	}),
	)
	},
	type,
	0.85,
	)
	}
	img.src = URL.createObjectURL(file)
	})
	},
	async isAnimatedPng(file) {
	const buffer = await file.arrayBuffer()
	const view = new Uint8Array(buffer)
	// Look for animated PNG chunks (acTL)
	for (let i = 0; i < view.length - 8; i++) {
	if (
	view[i] === 0x61 && // a
	view[i + 1] === 0x63 && // c
	view[i + 2] === 0x54 && // T
	view[i + 3] === 0x4c
	) {
	// L
	return true
	}
	}
	return false
	},
	async uploadFile(file) {
	const self = this
	const store = this.$store
	if (file.size > useInstanceStore().uploadlimit) {
	const filesize = fileSizeFormatService.fileSizeFormat(file.size)
	const allowedsize = fileSizeFormatService.fileSizeFormat(
	useInstanceStore().uploadlimit,
	)
	self.$emit('upload-failed', 'file_too_big', {
	filesize: filesize.num,
	filesizeunit: filesize.unit,
	allowedsize: allowedsize.num,
	allowedsizeunit: allowedsize.unit,
	})
	return
	}

	// Resize image if needed
	const processedFile = await this.resizeImage(file)
	const formData = new FormData()
	formData.append('file', processedFile)

	self.$emit('uploading')
	self.uploadCount++

	statusPosterService.uploadMedia({ store, formData }).then(
	(fileData) => {
	self.$emit('uploaded', fileData)
	self.decreaseUploadCount()
	},
	(error) => {
	console.error('Error uploading file', error)
	self.$emit('upload-failed', 'default')
	self.decreaseUploadCount()
	},
	)
	},
	decreaseUploadCount() {
	this.uploadCount--
	if (this.uploadCount === 0) {
	this.$emit('all-uploaded')
	}
	},
	clearFile() {
	this.uploadReady = false
	this.$nextTick(() => {
	this.uploadReady = true
	})
	},
	multiUpload(files) {
	for (const file of files) {
	this.uploadFile(file)
	}
	},
	change({ target }) {
	this.multiUpload(target.files)
	},
	},
	props: {
	dropFiles: Object,
	disabled: Boolean,
	normalButton: Boolean,
	acceptTypes: {
	type: String,
	default: '/',
	},
	},
	watch: {
	dropFiles: function (fileInfos) {
	if (!this.uploading) {
	this.multiUpload(fileInfos)
	}
	},
	},
	}

	export default mediaUpload
	diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
	index 4c211b5e9b..37c30355cb 100644
	--- a/src/components/mention_link/mention_link.js
	+++ b/src/components/mention_link/mention_link.js
	@@ -1,165 +1,166 @@
	import { defineAsyncComponent } from 'vue'
	import { mapGetters, mapState } from 'vuex'

	-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import {
	highlightClass,
	highlightStyle,
	} from '../../services/user_highlighter/user_highlighter.js'
	import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'

	+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faAt } from '@fortawesome/free-solid-svg-icons'

	library.add(faAt)

	const MentionLink = {
	name: 'MentionLink',
	components: {
	UserAvatar,
	UnicodeDomainIndicator,
	UserPopover: defineAsyncComponent(
	() => import('../user_popover/user_popover.vue'),
	),
	},
	props: {
	url: {
	required: true,
	type: String,
	},
	content: {
	required: true,
	type: String,
	},
	userId: {
	required: false,
	type: String,
	},
	userScreenName: {
	required: false,
	type: String,
	},
	},
	data() {
	return {
	hasSelection: false,
	}
	},
	methods: {
	onClick() {
	if (this.shouldShowTooltip) return
	const link = generateProfileLink(
	this.userId \|\| this.user.id,
	this.userScreenName \|\| this.user.screen_name,
	)
	this.$router.push(link)
	},
	handleSelection() {
	if (this.$refs.full) {
	this.hasSelection = document
	.getSelection()
	.containsNode(this.$refs.full, true)
	}
	},
	},
	mounted() {
	document.addEventListener('selectionchange', this.handleSelection)
	},
	unmounted() {
	document.removeEventListener('selectionchange', this.handleSelection)
	},
	computed: {
	user() {
	return (
	this.url && this.$store && this.$store.getters.findUserByUrl(this.url)
	)
	},
	isYou() {
	// FIXME why user !== currentUser???
	return this.user && this.user.id === this.currentUser.id
	},
	userName() {
	return this.user && this.userNameFullUi.split('@')[0]
	},
	serverName() {
	// XXX assumed that domain does not contain @
	return (
	this.user &&
	(this.userNameFullUi.split('@')[1] \|\|
	this.$store.getters.instanceDomain)
	)
	},
	userNameFull() {
	return this.user && this.user.screen_name
	},
	userNameFullUi() {
	return this.user && this.user.screen_name_ui
	},
	highlight() {
	return this.user && this.mergedConfig.highlight[this.user.screen_name]
	},
	highlightType() {
	return this.highlight && '-' + this.highlight.type
	},
	highlightClass() {
	if (this.highlight) return highlightClass(this.user)
	},
	style() {
	if (this.highlight) {
	const {
	backgroundColor,
	backgroundPosition,
	backgroundImage,
	...rest
	} = highlightStyle(this.highlight)
	return rest
	}
	},
	classnames() {
	return [
	{
	'-you': this.isYou && this.shouldBoldenYou,
	'-highlighted': this.highlight,
	'-has-selection': this.hasSelection,
	},
	this.highlightType,
	]
	},
	isRemote() {
	return this.userName !== this.userNameFull
	},
	shouldShowFullUserName() {
	const conf = this.mergedConfig.mentionLinkDisplay
	if (conf === 'short') {
	return false
	} else if (conf === 'full') {
	return true
	} else {
	// full_for_remote
	return this.isRemote
	}
	},
	shouldShowTooltip() {
	return this.mergedConfig.mentionLinkShowTooltip
	},
	shouldShowAvatar() {
	return this.mergedConfig.mentionLinkShowAvatar
	},
	shouldShowYous() {
	return this.mergedConfig.mentionLinkShowYous
	},
	shouldBoldenYou() {
	return this.mergedConfig.mentionLinkBoldenYou
	},
	shouldFadeDomain() {
	return this.mergedConfig.mentionLinkFadeDomain
	},
	...mapGetters(['mergedConfig']),
	...mapState({
	currentUser: (state) => state.users.currentUser,
	}),
	},
	}

	export default MentionLink
	diff --git a/src/components/mfa_form/recovery_form.js b/src/components/mfa_form/recovery_form.js
	index e45227a4e7..f4ddcadd0a 100644
	--- a/src/components/mfa_form/recovery_form.js
	+++ b/src/components/mfa_form/recovery_form.js
	@@ -1,59 +1,60 @@
	import { mapActions, mapState, mapStores } from 'pinia'

	+import mfaApi from '../../services/new_api/mfa.js'
	+
	import { useAuthFlowStore } from 'src/stores/auth_flow.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	-import mfaApi from '../../services/new_api/mfa.js'

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

	library.add(faTimes)

	export default {
	data: () => ({
	code: null,
	error: false,
	}),
	computed: {
	...mapStores(useOAuthStore),
	...mapState(useOAuthStore, ['clientId', 'clientSecret']),
	...mapState(useAuthFlowStore, ['settings']),
	...mapState(useInstanceStore, ['server']),
	},
	methods: {
	...mapActions(useAuthFlowStore, ['requireTOTP', 'abortMFA', 'login']),
	clearError() {
	this.error = false
	},

	focusOnCodeInput() {
	const codeInput = this.$refs.codeInput
	codeInput.focus()
	codeInput.setSelectionRange(0, codeInput.value.length)
	},

	submit() {
	const data = {
	clientId: this.clientId,
	clientSecret: this.clientSecret,
	instance: this.server,
	mfaToken: this.settings.mfa_token,
	code: this.code,
	}

	mfaApi.verifyRecoveryCode(data).then((result) => {
	if (result.error) {
	this.error = result.error
	this.code = null
	this.focusOnCodeInput()
	return
	}

	this.login(result).then(() => {
	this.$router.push({ name: 'friends' })
	})
	})
	},
	},
	}
	diff --git a/src/components/mfa_form/totp_form.js b/src/components/mfa_form/totp_form.js
	index b3d535bf9a..6d51cba944 100644
	--- a/src/components/mfa_form/totp_form.js
	+++ b/src/components/mfa_form/totp_form.js
	@@ -1,62 +1,63 @@
	import { mapActions, mapState, mapStores } from 'pinia'

	+import mfaApi from '../../services/new_api/mfa.js'
	+
	import { useAuthFlowStore } from 'src/stores/auth_flow.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	-import mfaApi from '../../services/new_api/mfa.js'

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

	library.add(faTimes)

	export default {
	data: () => ({
	code: null,
	error: false,
	}),
	computed: {
	...mapState(useAuthFlowStore, {
	authSettings: (store) => store.settings,
	}),
	...mapState(useInstanceStore, ['server']),
	...mapStores(useOAuthStore),
	},
	methods: {
	...mapActions(useAuthFlowStore, ['requireRecovery', 'abortMFA', 'login']),
	clearError() {
	this.error = false
	},

	focusOnCodeInput() {
	const codeInput = this.$refs.codeInput
	codeInput.focus()
	codeInput.setSelectionRange(0, codeInput.value.length)
	},

	submit() {
	const { clientId, clientSecret } = this.oauthStore

	const data = {
	clientId,
	clientSecret,
	instance: this.server,
	mfaToken: this.authSettings.mfa_token,
	code: this.code,
	}

	mfaApi.verifyOTPCode(data).then((result) => {
	if (result.error) {
	this.error = result.error
	this.code = null
	this.focusOnCodeInput()
	return
	}

	this.login(result).then(() => {
	this.$router.push({ name: 'friends' })
	})
	})
	},
	},
	}
	diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
	index eeb828d8db..76051f6a9a 100644
	--- a/src/components/mobile_nav/mobile_nav.js
	+++ b/src/components/mobile_nav/mobile_nav.js
	@@ -1,155 +1,156 @@
	import { mapState } from 'pinia'
	import { mapGetters } from 'vuex'

	import NavigationPins from 'src/components/navigation/navigation_pins.vue'
	-import { useAnnouncementsStore } from 'src/stores/announcements'
	-import { useInstanceStore } from 'src/stores/instance.js'
	-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
	import GestureService from '../../services/gesture_service/gesture_service'
	import {
	countExtraNotifications,
	unseenNotificationsFromStore,
	} from '../../services/notification_utils/notification_utils'
	import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	import Notifications from '../notifications/notifications.vue'
	import SideDrawer from '../side_drawer/side_drawer.vue'

	+import { useAnnouncementsStore } from 'src/stores/announcements'
	+import { useInstanceStore } from 'src/stores/instance.js'
	+import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
	+
	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,
	Notifications,
	NavigationPins,
	ConfirmModal,
	},
	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)
	},
	unseenNotificationsCount() {
	return (
	this.unseenNotifications.length + countExtraNotifications(this.$store)
	)
	},
	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(useServerSideStorageStore, {
	pinnedItems: (store) =>
	new Set(store.prefsStorage.collections.pinnedNavItems).has('chats'),
	}),
	shouldConfirmLogout() {
	return this.$store.getters.mergedConfig.modalOnLogout
	},
	closingDrawerMarksAsSeen() {
	return this.$store.getters.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/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js
	index 0ee4f27d4d..6628e02f86 100644
	--- a/src/components/moderation_tools/moderation_tools.js
	+++ b/src/components/moderation_tools/moderation_tools.js
	@@ -1,149 +1,150 @@
	-import { useInstanceStore } from 'src/stores/instance.js'
	import DialogModal from '../dialog_modal/dialog_modal.vue'
	import Popover from '../popover/popover.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faChevronDown } from '@fortawesome/free-solid-svg-icons'

	library.add(faChevronDown)

	const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
	const STRIP_MEDIA = 'mrf_tag:media-strip'
	const FORCE_UNLISTED = 'mrf_tag:force-unlisted'
	const DISABLE_REMOTE_SUBSCRIPTION = 'mrf_tag:disable-remote-subscription'
	const DISABLE_ANY_SUBSCRIPTION = 'mrf_tag:disable-any-subscription'
	const SANDBOX = 'mrf_tag:sandbox'
	const QUARANTINE = 'mrf_tag:quarantine'

	const ModerationTools = {
	props: ['user'],
	data() {
	return {
	tags: {
	FORCE_NSFW,
	STRIP_MEDIA,
	FORCE_UNLISTED,
	DISABLE_REMOTE_SUBSCRIPTION,
	DISABLE_ANY_SUBSCRIPTION,
	SANDBOX,
	QUARANTINE,
	},
	showDeleteUserDialog: false,
	toggled: false,
	}
	},
	components: {
	DialogModal,
	Popover,
	},
	computed: {
	tagsSet() {
	return new Set(this.user.tags)
	},
	canGrantRole() {
	return (
	this.user.is_local &&
	!this.user.deactivated &&
	this.$store.state.users.currentUser.role === 'admin'
	)
	},
	canChangeActivationState() {
	return this.privileged('users_manage_activation_state')
	},
	canDeleteAccount() {
	return this.privileged('users_delete')
	},
	canUseTagPolicy() {
	return (
	useInstanceStore().featureSet.tagPolicyAvailable &&
	this.privileged('users_manage_tags')
	)
	},
	},
	methods: {
	hasTag(tagName) {
	return this.tagsSet.has(tagName)
	},
	privileged(privilege) {
	return this.$store.state.users.currentUser.privileges.includes(privilege)
	},
	toggleTag(tag) {
	const store = this.$store
	if (this.tagsSet.has(tag)) {
	store.state.api.backendInteractor
	.untagUser({ user: this.user, tag })
	.then((response) => {
	if (!response.ok) {
	return
	}
	store.commit('untagUser', { user: this.user, tag })
	})
	} else {
	store.state.api.backendInteractor
	.tagUser({ user: this.user, tag })
	.then((response) => {
	if (!response.ok) {
	return
	}
	store.commit('tagUser', { user: this.user, tag })
	})
	}
	},
	toggleRight(right) {
	const store = this.$store
	if (this.user.rights[right]) {
	store.state.api.backendInteractor
	.deleteRight({ user: this.user, right })
	.then((response) => {
	if (!response.ok) {
	return
	}
	store.commit('updateRight', {
	user: this.user,
	right,
	value: false,
	})
	})
	} else {
	store.state.api.backendInteractor
	.addRight({ user: this.user, right })
	.then((response) => {
	if (!response.ok) {
	return
	}
	store.commit('updateRight', { user: this.user, right, value: true })
	})
	}
	},
	toggleActivationStatus() {
	this.$store.dispatch('toggleActivationStatus', { user: this.user })
	},
	deleteUserDialog(show) {
	this.showDeleteUserDialog = show
	},
	deleteUser() {
	const store = this.$store
	const user = this.user
	const { id, name } = user
	store.state.api.backendInteractor.deleteUser({ user }).then(() => {
	this.$store.dispatch(
	'markStatusesAsDeleted',
	(status) => user.id === status.user.id,
	)
	const isProfile =
	this.$route.name === 'external-user-profile' \|\|
	this.$route.name === 'user-profile'
	const isTargetUser =
	this.$route.params.name === name \|\| this.$route.params.id === id
	if (isProfile && isTargetUser) {
	window.history.back()
	}
	})
	},
	setToggled(value) {
	this.toggled = value
	},
	},
	}

	export default ModerationTools
	diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
	index ea03e0a9b7..7eed379da1 100644
	--- a/src/components/nav_panel/nav_panel.js
	+++ b/src/components/nav_panel/nav_panel.js
	@@ -1,166 +1,167 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapGetters, mapState } from 'vuex'

	import BookmarkFoldersMenuContent from 'src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ListsMenuContent from 'src/components/lists_menu/lists_menu_content.vue'
	import { filterNavigation } from 'src/components/navigation/filter.js'
	import { ROOT_ITEMS, TIMELINES } from 'src/components/navigation/navigation.js'
	import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
	import NavigationPins from 'src/components/navigation/navigation_pins.vue'
	+
	import { useAnnouncementsStore } from 'src/stores/announcements'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useServerSideStorageStore } from 'src/stores/serverSideStorage'

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

	library.add(
	faUsers,
	faGlobe,
	faCity,
	faBookmark,
	faEnvelope,
	faChevronDown,
	faChevronUp,
	faComments,
	faBell,
	faInfoCircle,
	faStream,
	faList,
	faBullhorn,
	faFilePen,
	)
	const NavPanel = {
	props: ['forceExpand', 'forceEditMode'],
	components: {
	BookmarkFoldersMenuContent,
	ListsMenuContent,
	NavigationEntry,
	NavigationPins,
	Checkbox,
	},
	data() {
	return {
	editMode: false,
	showTimelines: false,
	showLists: false,
	showBookmarkFolders: false,
	timelinesList: Object.entries(TIMELINES).map(([k, v]) => ({
	...v,
	name: k,
	})),
	rootList: Object.entries(ROOT_ITEMS).map(([k, v]) => ({ ...v, name: k })),
	}
	},
	methods: {
	toggleTimelines() {
	this.showTimelines = !this.showTimelines
	},
	toggleLists() {
	this.showLists = !this.showLists
	},
	toggleBookmarkFolders() {
	this.showBookmarkFolders = !this.showBookmarkFolders
	},
	toggleEditMode() {
	this.editMode = !this.editMode
	},
	toggleCollapse() {
	useServerSideStorageStore().setPreference({
	path: 'simple.collapseNav',
	value: !this.collapsed,
	})
	useServerSideStorageStore().pushServerSideStorage()
	},
	isPinned(item) {
	return this.pinnedItems.has(item)
	},
	togglePin(item) {
	if (this.isPinned(item)) {
	useServerSideStorageStore().removeCollectionPreference({
	path: 'collections.pinnedNavItems',
	value: item,
	})
	} else {
	useServerSideStorageStore().addCollectionPreference({
	path: 'collections.pinnedNavItems',
	value: item,
	})
	}
	useServerSideStorageStore().pushServerSideStorage()
	},
	},
	computed: {
	...mapPiniaState(useAnnouncementsStore, {
	unreadAnnouncementCount: 'unreadAnnouncementCount',
	supportsAnnouncements: (store) => store.supportsAnnouncements,
	}),
	...mapPiniaState(useInstanceStore, ['private', 'federating']),
	...mapPiniaState(useInstanceStore, {
	pleromaChatMessagesAvailable: (store) =>
	store.featureSet.pleromaChatMessagesAvailable,
	bookmarkFolders: (store) =>
	store.fetaureSet.pleromaBookmarkFoldersAvailable,
	bubbleTimeline: (store) => store.fetaureSet.localBubble,
	}),
	...mapPiniaState(useServerSideStorageStore, {
	collapsed: (store) => store.prefsStorage.simple.collapseNav,
	pinnedItems: (store) =>
	new Set(store.prefsStorage.collections.pinnedNavItems),
	}),
	...mapState({
	currentUser: (state) => state.users.currentUser,
	followRequestCount: (state) => state.api.followRequests.length,
	}),
	timelinesItems() {
	return filterNavigation(
	Object.entries({ ...TIMELINES })
	// do not show in timeliens list since it's in a better place now
	.filter(([key]) => key !== 'bookmarks')
	.map(([k, v]) => ({ ...v, name: k })),
	{
	hasChats: this.pleromaChatMessagesAvailable,
	hasAnnouncements: this.supportsAnnouncements,
	isFederating: this.federating,
	isPrivate: this.privateMode,
	currentUser: this.currentUser,
	supportsBubbleTimeline: this.bubbleTimeline,
	supportsBookmarkFolders: this.bookmarkFolders,
	},
	)
	},
	rootItems() {
	return filterNavigation(
	Object.entries({ ...ROOT_ITEMS }).map(([k, v]) => ({ ...v, name: k })),
	{
	hasChats: this.pleromaChatMessagesAvailable,
	hasAnnouncements: this.supportsAnnouncements,
	isFederating: this.federating,
	isPrivate: this.privateMode,
	currentUser: this.currentUser,
	supportsBubbleTimeline: this.bubbleTimeline,
	supportsBookmarkFolders: this.bookmarkFolders,
	},
	)
	},
	...mapGetters(['unreadChatCount']),
	},
	}

	export default NavPanel
	diff --git a/src/components/navigation/navigation_entry.js b/src/components/navigation/navigation_entry.js
	index 75d4dffdd7..a58b49e49f 100644
	--- a/src/components/navigation/navigation_entry.js
	+++ b/src/components/navigation/navigation_entry.js
	@@ -1,56 +1,57 @@
	import { mapState as mapPiniaState, mapStores } from 'pinia'
	import { mapState } from 'vuex'

	import { routeTo } from 'src/components/navigation/navigation.js'
	import OptionalRouterLink from 'src/components/optional_router_link/optional_router_link.vue'
	+
	import { useAnnouncementsStore } from 'src/stores/announcements'
	import { useServerSideStorageStore } from 'src/stores/serverSideStorage'

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

	library.add(faThumbtack)

	const NavigationEntry = {
	props: ['item', 'showPin'],
	components: {
	OptionalRouterLink,
	},
	methods: {
	isPinned(value) {
	return this.pinnedItems.has(value)
	},
	togglePin(value) {
	if (this.isPinned(value)) {
	useServerSideStorageStore().removeCollectionPreference({
	path: 'collections.pinnedNavItems',
	value,
	})
	} else {
	useServerSideStorageStore().addCollectionPreference({
	path: 'collections.pinnedNavItems',
	value,
	})
	}
	useServerSideStorageStore().pushServerSideStorage()
	},
	},
	computed: {
	routeTo() {
	return routeTo(this.item, this.currentUser)
	},
	getters() {
	return this.$store.getters
	},
	...mapStores(useAnnouncementsStore),
	...mapState({
	currentUser: (state) => state.users.currentUser,
	}),
	...mapPiniaState(useServerSideStorageStore, {
	pinnedItems: (store) =>
	new Set(store.prefsStorage.collections.pinnedNavItems),
	}),
	},
	}

	export default NavigationEntry
	diff --git a/src/components/navigation/navigation_pins.js b/src/components/navigation/navigation_pins.js
	index 2b48c5c525..a6845eee66 100644
	--- a/src/components/navigation/navigation_pins.js
	+++ b/src/components/navigation/navigation_pins.js
	@@ -1,130 +1,131 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

	import {
	filterNavigation,
	getBookmarkFolderEntries,
	getListEntries,
	} from 'src/components/navigation/filter.js'
	import {
	ROOT_ITEMS,
	routeTo,
	TIMELINES,
	} from 'src/components/navigation/navigation.js'
	import StillImage from 'src/components/still-image/still-image.vue'
	+
	import { useAnnouncementsStore } from 'src/stores/announcements'
	import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useListsStore } from 'src/stores/lists'
	import { useServerSideStorageStore } from 'src/stores/serverSideStorage'

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

	library.add(
	faUsers,
	faGlobe,
	faCity,
	faBookmark,
	faEnvelope,
	faComments,
	faBell,
	faInfoCircle,
	faStream,
	faList,
	)

	const NavPanel = {
	props: ['limit'],
	methods: {
	getRouteTo(item) {
	return routeTo(item, this.currentUser)
	},
	},
	components: {
	StillImage,
	},
	computed: {
	getters() {
	return this.$store.getters
	},
	...mapPiniaState(useListsStore, {
	lists: getListEntries,
	}),
	...mapPiniaState(useAnnouncementsStore, {
	supportsAnnouncements: (store) => store.supportsAnnouncements,
	}),
	...mapPiniaState(useBookmarkFoldersStore, {
	bookmarks: getBookmarkFolderEntries,
	}),
	...mapPiniaState(useServerSideStorageStore, {
	pinnedItems: (store) =>
	new Set(store.prefsStorage.collections.pinnedNavItems),
	}),
	...mapPiniaState(useInstanceStore, {
	bookmarks: getBookmarkFolderEntries,
	pleromaChatMessagesAvailable: (store) =>
	store.featureSet.pleromaChatMessagesAvailable,
	bubbleTimeline: (store) => store.featureSet.localBubble,
	}),
	...mapPiniaState(useInstanceStore, ['private', 'federating']),
	...mapState({
	currentUser: (state) => state.users.currentUser,
	followRequestCount: (state) => state.api.followRequests.length,
	}),
	pinnedList() {
	if (!this.currentUser) {
	return filterNavigation(
	[
	{ ...TIMELINES.public, name: 'public' },
	{ ...TIMELINES.twkn, name: 'twkn' },
	{ ...ROOT_ITEMS.about, name: 'about' },
	],
	{
	hasChats: this.pleromaChatMessagesAvailable,
	hasAnnouncements: this.supportsAnnouncements,
	isFederating: this.federating,
	isPrivate: this.private,
	currentUser: this.currentUser,
	supportsBubbleTimeline: this.bubbleTimeline,
	supportsBookmarkFolders: this.bookmarks,
	},
	)
	}
	return filterNavigation(
	[
	...Object.entries({ ...TIMELINES })
	.filter(([k]) => this.pinnedItems.has(k))
	.map(([k, v]) => ({ ...v, name: k })),
	...this.lists.filter((k) => this.pinnedItems.has(k.name)),
	...this.bookmarks.filter((k) => this.pinnedItems.has(k.name)),
	...Object.entries({ ...ROOT_ITEMS })
	.filter(([k]) => this.pinnedItems.has(k))
	.map(([k, v]) => ({ ...v, name: k })),
	],
	{
	hasChats: this.pleromaChatMessagesAvailable,
	hasAnnouncements: this.supportsAnnouncements,
	supportsBubbleTimeline: this.bubbleTimeline,
	supportsBookmarkFolders: this.bookmarks,
	isFederating: this.federating,
	isPrivate: this.private,
	currentUser: this.currentUser,
	},
	).slice(0, this.limit)
	},
	},
	}

	export default NavPanel
	diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
	index dc6aee6f76..16084dee4f 100644
	--- a/src/components/notification/notification.js
	+++ b/src/components/notification/notification.js
	@@ -1,224 +1,226 @@
	import { mapState } from 'vuex'

	import RichContent from 'src/components/rich_content/rich_content.jsx'
	-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	-import { useInstanceStore } from 'src/stores/instance.js'
	import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
	import {
	highlightClass,
	highlightStyle,
	} from '../../services/user_highlighter/user_highlighter.js'
	import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	import Report from '../report/report.vue'
	import Status from '../status/status.vue'
	import StatusContent from '../status_content/status_content.vue'
	import Timeago from '../timeago/timeago.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import UserCard from '../user_card/user_card.vue'
	import UserLink from '../user_link/user_link.vue'
	import UserPopover from '../user_popover/user_popover.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faCheck,
	faCompressAlt,
	faExpandAlt,
	faEyeSlash,
	faRetweet,
	faStar,
	faSuitcaseRolling,
	faTimes,
	faUser,
	faUserPlus,
	} from '@fortawesome/free-solid-svg-icons'

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

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

	export default Notification
	diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
	index 9e349a2eb0..261d1f5947 100644
	--- a/src/components/notifications/notifications.js
	+++ b/src/components/notifications/notifications.js
	@@ -1,256 +1,257 @@
	import { mapState } from 'pinia'
	import { computed } from 'vue'
	import { mapGetters } from 'vuex'

	-import { useAnnouncementsStore } from 'src/stores/announcements'
	-import { useInterfaceStore } from 'src/stores/interface'
	import FaviconService from '../../services/favicon_service/favicon_service.js'
	import {
	ACTIONABLE_NOTIFICATION_TYPES,
	countExtraNotifications,
	filteredNotificationsFromStore,
	notificationsFromStore,
	unseenNotificationsFromStore,
	} from '../../services/notification_utils/notification_utils.js'
	import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
	import ExtraNotifications from '../extra_notifications/extra_notifications.vue'
	import Notification from '../notification/notification.vue'
	import NotificationFilters from './notification_filters.vue'

	+import { useAnnouncementsStore } from 'src/stores/announcements'
	+import { useInterfaceStore } from 'src/stores/interface'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faArrowUp,
	faCircleNotch,
	faMinus,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faCircleNotch, faArrowUp, faMinus)

	const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30

	const Notifications = {
	components: {
	Notification,
	NotificationFilters,
	ExtraNotifications,
	},
	props: {
	// Disables panel styles, unread mark, potentially other notification-related actions
	// meant for "Interactions" timeline
	minimalMode: Boolean,
	// Custom filter mode, an array of strings, possible values 'mention', 'status', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
	filterMode: Array,
	// Do not show extra notifications
	noExtra: {
	type: Boolean,
	default: false,
	},
	// Disable teleporting (i.e. for /users/user/notifications)
	disableTeleport: Boolean,
	},
	data() {
	return {
	showScrollTop: false,
	bottomedOut: false,
	// How many seen notifications to display in the list. The more there are,
	// the heavier the page becomes. This count is increased when loading
	// older notifications, and cut back to default whenever hitting "Read!".
	seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT,
	}
	},
	provide() {
	return {
	popoversZLayer: computed(() => this.popoversZLayer),
	}
	},
	computed: {
	mainClass() {
	return this.minimalMode ? '' : 'panel panel-default'
	},
	notifications() {
	return notificationsFromStore(this.$store)
	},
	error() {
	return this.$store.state.notifications.error
	},
	unseenNotifications() {
	return unseenNotificationsFromStore(this.$store)
	},
	filteredNotifications() {
	if (this.unseenAtTop) {
	return [
	...filteredNotificationsFromStore(this.$store).filter((n) =>
	this.shouldShowUnseen(n),
	),
	...filteredNotificationsFromStore(this.$store).filter(
	(n) => !this.shouldShowUnseen(n),
	),
	]
	} else {
	return filteredNotificationsFromStore(this.$store, this.filterMode)
	}
	},
	unseenCountBadgeText() {
	return `${this.unseenCount ? this.unseenCount : ''}${this.extraNotificationsCount ? '*' : ''}`
	},
	unseenCount() {
	return this.unseenNotifications.length
	},
	ignoreInactionableSeen() {
	return this.$store.getters.mergedConfig.ignoreInactionableSeen
	},
	extraNotificationsCount() {
	return countExtraNotifications(this.$store)
	},
	unseenCountTitle() {
	return (
	this.unseenNotifications.length +
	this.unreadChatCount +
	this.unreadAnnouncementCount
	)
	},
	loading() {
	return this.$store.state.notifications.loading
	},
	noHeading() {
	const { layoutType } = useInterfaceStore()
	return this.minimalMode \|\| layoutType === 'mobile'
	},
	teleportTarget() {
	const { layoutType } = useInterfaceStore()
	const map = {
	wide: '#notifs-column',
	mobile: '#mobile-notifications',
	}
	return map[layoutType] \|\| '#notifs-sidebar'
	},
	popoversZLayer() {
	const { layoutType } = useInterfaceStore()
	return layoutType === 'mobile' ? 'navbar' : null
	},
	notificationsToDisplay() {
	return this.filteredNotifications.slice(
	0,
	this.unseenCount + this.seenToDisplayCount,
	)
	},
	noSticky() {
	return this.$store.getters.mergedConfig.disableStickyHeaders
	},
	unseenAtTop() {
	return this.$store.getters.mergedConfig.unseenAtTop
	},
	showExtraNotifications() {
	return !this.noExtra
	},
	...mapState(useAnnouncementsStore, ['unreadAnnouncementCount']),
	...mapGetters(['unreadChatCount']),
	},
	mounted() {
	this.scrollerRef = this.$refs.root.closest('.column.-scrollable')
	if (!this.scrollerRef) {
	this.scrollerRef = this.$refs.root.closest('.mobile-notifications')
	}
	if (!this.scrollerRef) {
	this.scrollerRef = this.$refs.root.closest('.column.main')
	}
	this.scrollerRef.addEventListener('scroll', this.updateScrollPosition)
	},
	unmounted() {
	if (!this.scrollerRef) return
	this.scrollerRef.removeEventListener('scroll', this.updateScrollPosition)
	},
	watch: {
	unseenCountTitle(count) {
	if (count > 0) {
	FaviconService.drawFaviconBadge()
	useInterfaceStore().setPageTitle(`(${count})`)
	} else {
	FaviconService.clearFaviconBadge()
	useInterfaceStore().setPageTitle('')
	}
	},
	teleportTarget() {
	// handle scroller change
	this.$nextTick(() => {
	this.scrollerRef.removeEventListener(
	'scroll',
	this.updateScrollPosition,
	)
	this.scrollerRef = this.$refs.root.closest('.column.-scrollable')
	if (!this.scrollerRef) {
	this.scrollerRef = this.$refs.root.closest('.mobile-notifications')
	}
	this.scrollerRef.addEventListener('scroll', this.updateScrollPosition)
	this.updateScrollPosition()
	})
	},
	},
	methods: {
	scrollToTop() {
	const scrollable = this.scrollerRef
	scrollable.scrollTo({ top: this.$refs.root.offsetTop })
	},
	updateScrollPosition() {
	this.showScrollTop =
	this.$refs.root.offsetTop < this.scrollerRef.scrollTop
	},
	shouldShowUnseen(notification) {
	if (notification.seen) return false

	const actionable = ACTIONABLE_NOTIFICATION_TYPES.has(notification.type)
	return this.ignoreInactionableSeen ? actionable : true
	},
	/* "Interacted" really refers to "actionable" notifications that require user input,
	* everything else (likes/repeats/reacts) cannot be acted and therefore we just clear
	* the "seen" status upon any clicks on them
	*/
	notificationClicked(notification) {
	const { id } = notification
	this.$store.dispatch('notificationClicked', { id })
	},
	notificationInteracted(notification) {
	const { id } = notification
	this.$store.dispatch('markSingleNotificationAsSeen', { id })
	},
	markAsSeen() {
	this.$store.dispatch('markNotificationsAsSeen')
	this.seenToDisplayCount = DEFAULT_SEEN_TO_DISPLAY_COUNT
	},
	fetchOlderNotifications() {
	if (this.loading) {
	return
	}

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

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

	export default Notifications
	diff --git a/src/components/oauth_callback/oauth_callback.js b/src/components/oauth_callback/oauth_callback.js
	index 3a1195b149..4bcb9803e2 100644
	--- a/src/components/oauth_callback/oauth_callback.js
	+++ b/src/components/oauth_callback/oauth_callback.js
	@@ -1,28 +1,29 @@
	+import oauth from '../../services/new_api/oauth.js'
	+
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	-import oauth from '../../services/new_api/oauth.js'

	const oac = {
	props: ['code'],
	mounted() {
	if (this.code) {
	const oauthStore = useOAuthStore()
	const { clientId, clientSecret } = oauthStore

	oauth
	.getToken({
	clientId,
	clientSecret,
	instance: useInstanceStore().server,
	code: this.code,
	})
	.then((result) => {
	oauthStore.setToken(result.access_token)
	this.$store.dispatch('loginUser', result.access_token)
	this.$router.push({ name: 'friends' })
	})
	}
	},
	}

	export default oac
	diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
	index 21b40bccb8..58110f3ba4 100644
	--- a/src/components/palette_editor/palette_editor.vue
	+++ b/src/components/palette_editor/palette_editor.vue
	@@ -1,216 +1,218 @@
	<template>
	<div
	class="PaletteEditor"
	:class="{ '-compact': compact, '-apply': apply, '-mobile': mobile }"
	>
	<div class="palette">
	<ColorInput
	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)"
	/>
	</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 { useInterfaceStore } from 'src/stores/interface'
	+
	import {
	newExporter,
	newImporter,
	} from 'src/services/export_import/export_import.js'
	-import { useInterfaceStore } from 'src/stores/interface'

	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 applyPalette = () => {
	emit('applyPalette', getExportedObject())
	}

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

	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/password_reset/password_reset.js b/src/components/password_reset/password_reset.js
	index 63d567cc52..5a54d846b7 100644
	--- a/src/components/password_reset/password_reset.js
	+++ b/src/components/password_reset/password_reset.js
	@@ -1,70 +1,71 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

	-import { useInstanceStore } from 'src/stores/instance.js'
	import passwordResetApi from '../../services/new_api/password_reset.js'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faTimes } from '@fortawesome/free-solid-svg-icons'

	library.add(faTimes)

	const passwordReset = {
	data: () => ({
	user: {
	email: '',
	},
	isPending: false,
	success: false,
	throttled: false,
	error: null,
	}),
	computed: {
	...mapState({
	signedIn: (state) => !!state.users.currentUser,
	}),
	...mapPiniaState(useInstanceStore, ['server', 'mailerEnabled']),
	},
	created() {
	if (this.signedIn) {
	this.$router.push({ name: 'root' })
	}
	},
	props: {
	passwordResetRequested: {
	default: false,
	type: Boolean,
	},
	},
	methods: {
	dismissError() {
	this.error = null
	},
	submit() {
	this.isPending = true
	const email = this.user.email
	const server = this.server

	passwordResetApi({ server, email })
	.then(({ status }) => {
	this.isPending = false
	this.user.email = ''

	if (status === 204) {
	this.success = true
	this.error = null
	} else if (status === 429) {
	this.throttled = true
	this.error = this.$t('password_reset.too_many_requests')
	}
	})
	.catch(() => {
	this.isPending = false
	this.user.email = ''
	this.error = this.$t('general.generic_error')
	})
	},
	},
	}

	export default passwordReset
	diff --git a/src/components/poll/poll.js b/src/components/poll/poll.js
	index 594a7be882..1a41c17f6e 100644
	--- a/src/components/poll/poll.js
	+++ b/src/components/poll/poll.js
	@@ -1,119 +1,120 @@
	import Checkbox from 'components/checkbox/checkbox.vue'
	import RichContent from 'components/rich_content/rich_content.jsx'
	import Timeago from 'components/timeago/timeago.vue'

	-import { usePollsStore } from 'src/stores/polls'
	import genRandomSeed from '../../services/random_seed/random_seed.service.js'

	+import { usePollsStore } from 'src/stores/polls'
	+
	export default {
	name: 'Poll',
	props: ['basePoll', 'emoji'],
	components: {
	Timeago,
	RichContent,
	Checkbox,
	},
	data() {
	return {
	loading: false,
	choices: [],
	randomSeed: genRandomSeed(),
	}
	},
	created() {
	if (!usePollsStore().pollsObject[this.pollId]) {
	usePollsStore().mergeOrAddPoll(this.basePoll)
	}
	usePollsStore().trackPoll(this.pollId)
	},
	unmounted() {
	usePollsStore().untrackPoll(this.pollId)
	},
	computed: {
	pollId() {
	return this.basePoll.id
	},
	poll() {
	const storePoll = usePollsStore().pollsObject[this.pollId]
	return storePoll \|\| {}
	},
	options() {
	return (this.poll && this.poll.options) \|\| []
	},
	expiresAt() {
	return (this.poll && this.poll.expires_at) \|\| null
	},
	expired() {
	return (this.poll && this.poll.expired) \|\| false
	},
	expirationLabel() {
	if (this.$store.getters.mergedConfig.useAbsoluteTimeFormat) {
	return this.expired ? 'polls.expired_at' : 'polls.expires_at'
	} else {
	return this.expired ? 'polls.expired' : 'polls.expires_in'
	}
	},
	loggedIn() {
	return this.$store.state.users.currentUser
	},
	showResults() {
	return this.poll.voted \|\| this.expired \|\| !this.loggedIn
	},
	totalVotesCount() {
	return this.poll.votes_count
	},
	containerClass() {
	return {
	loading: this.loading,
	}
	},
	choiceIndices() {
	// Convert array of booleans into an array of indices of the
	// items that were 'true', so [true, false, false, true] becomes
	// [0, 3].
	return this.choices
	.map((entry, index) => entry && index)
	.filter((value) => typeof value === 'number')
	},
	isDisabled() {
	const noChoice = this.choiceIndices.length === 0
	return this.loading \|\| noChoice
	},
	},
	methods: {
	percentageForOption(count) {
	return this.totalVotesCount === 0
	? 0
	: Math.round((count / this.totalVotesCount) * 100)
	},
	resultTitle(option) {
	return `${option.votes_count}/${this.totalVotesCount} ${this.$t('polls.votes')}`
	},
	activateOption(index, value) {
	let result
	if (this.poll.multiple) {
	result = this.choices \|\| this.options.map(() => false)
	} else {
	result = this.options.map(() => false)
	}
	result[index] = value
	this.choices = result
	},
	optionId(index) {
	return `poll${this.poll.id}-${index}`
	},
	vote() {
	if (this.choiceIndices.length === 0) return
	this.loading = true
	usePollsStore()
	.votePoll({
	id: this.statusId,
	pollId: this.poll.id,
	choices: this.choiceIndices,
	})
	.then(() => {
	this.loading = false
	})
	},
	},
	}
	diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
	index 3a9bb1638d..1e132312f0 100644
	--- a/src/components/poll/poll_form.js
	+++ b/src/components/poll/poll_form.js
	@@ -1,139 +1,141 @@
	+import Select from '../select/select.vue'
	+
	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	import * as DateUtils from 'src/services/date_utils/date_utils.js'
	import { pollFallback } from 'src/services/poll/poll.service.js'
	-import { useInstanceStore } from 'src/stores/instance.js'
	-import Select from '../select/select.vue'

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

	library.add(faTimes, faPlus)

	export default {
	components: {
	Select,
	},
	name: 'PollForm',
	props: {
	visible: {},
	params: {
	type: Object,
	required: true,
	},
	},
	computed: {
	pollType: {
	get() {
	return pollFallback(this.params, 'pollType')
	},
	set(newVal) {
	this.params.pollType = newVal
	},
	},
	options() {
	const hasOptions = !!this.params.options
	if (!hasOptions) {
	this.params.options = pollFallback(this.params, 'options')
	}
	return this.params.options
	},
	expiryAmount: {
	get() {
	return pollFallback(this.params, 'expiryAmount')
	},
	set(newVal) {
	this.params.expiryAmount = newVal
	},
	},
	expiryUnit: {
	get() {
	return pollFallback(this.params, 'expiryUnit')
	},
	set(newVal) {
	this.params.expiryUnit = newVal
	},
	},
	pollLimits() {
	return useInstanceStore().limits.pollLimits
	},
	maxOptions() {
	return this.pollLimits.max_options
	},
	maxLength() {
	return this.pollLimits.max_option_chars
	},
	expiryUnits() {
	const allUnits = ['minutes', 'hours', 'days']
	const expiry = this.convertExpiryFromUnit
	return allUnits.filter(
	(unit) => this.pollLimits.max_expiration >= expiry(unit, 1),
	)
	},
	minExpirationInCurrentUnit() {
	return Math.ceil(
	this.convertExpiryToUnit(
	this.expiryUnit,
	this.pollLimits.min_expiration,
	),
	)
	},
	maxExpirationInCurrentUnit() {
	return Math.floor(
	this.convertExpiryToUnit(
	this.expiryUnit,
	this.pollLimits.max_expiration,
	),
	)
	},
	},
	methods: {
	clear() {
	this.pollType = 'single'
	this.options = ['', '']
	this.expiryAmount = 10
	this.expiryUnit = 'minutes'
	},
	nextOption(index) {
	const element = this.$el.querySelector(`#poll-${index + 1}`)
	if (element) {
	element.focus()
	} else {
	// Try adding an option and try focusing on it
	const addedOption = this.addOption()
	if (addedOption) {
	this.$nextTick(function () {
	this.nextOption(index)
	})
	}
	}
	},
	addOption() {
	if (this.options.length < this.maxOptions) {
	this.options.push('')
	return true
	}
	return false
	},
	deleteOption(index) {
	if (this.options.length > 2) {
	this.options.splice(index, 1)
	}
	},
	convertExpiryToUnit(unit, amount) {
	// Note: we want seconds and not milliseconds
	return DateUtils.secondsToUnit(unit, amount)
	},
	convertExpiryFromUnit(unit, amount) {
	return DateUtils.unitToSeconds(unit, amount)
	},
	expiryAmountChange() {
	this.expiryAmount = Math.max(
	this.minExpirationInCurrentUnit,
	this.expiryAmount,
	)
	this.expiryAmount = Math.min(
	this.maxExpirationInCurrentUnit,
	this.expiryAmount,
	)
	},
	},
	}
	diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
	index eb4a6426da..7b95124561 100644
	--- a/src/components/post_status_form/post_status_form.js
	+++ b/src/components/post_status_form/post_status_form.js
	@@ -1,931 +1,933 @@
	import { debounce, map, reject, uniqBy } from 'lodash'
	import { mapActions, mapState } from 'pinia'
	import { mapGetters } from 'vuex'

	import DraftCloser from 'src/components/draft_closer/draft_closer.vue'
	import Gallery from 'src/components/gallery/gallery.vue'
	import Popover from 'src/components/popover/popover.vue'
	-import { pollFormToMasto } from 'src/services/poll/poll.service.js'
	-import { useEmojiStore } from 'src/stores/emoji.js'
	-import { useInstanceStore } from 'src/stores/instance.js'
	-import { useInterfaceStore } from 'src/stores/interface.js'
	-import { useMediaViewerStore } from 'src/stores/media_viewer.js'
	import { propsToNative } from '../../services/attributes_helper/attributes_helper.service.js'
	import fileTypeService from '../../services/file_type/file_type.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 Attachment from '../attachment/attachment.vue'
	import Checkbox from '../checkbox/checkbox.vue'
	import EmojiInput from '../emoji_input/emoji_input.vue'
	import suggestor from '../emoji_input/suggestor.js'
	import MediaUpload from '../media_upload/media_upload.vue'
	import PollForm from '../poll/poll_form.vue'
	import ScopeSelector from '../scope_selector/scope_selector.vue'
	import Select from '../select/select.vue'
	import StatusContent from '../status_content/status_content.vue'

	+import { useEmojiStore } from 'src/stores/emoji.js'
	+import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInterfaceStore } from 'src/stores/interface.js'
	+import { useMediaViewerStore } from 'src/stores/media_viewer.js'
	+
	+import { pollFormToMasto } from 'src/services/poll/poll.service.js'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBan,
	faChevronDown,
	faChevronLeft,
	faChevronRight,
	faCircleNotch,
	faPollH,
	faSmileBeam,
	faTimes,
	faUpload,
	} from '@fortawesome/free-solid-svg-icons'

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

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

	allAttentions.unshift(user)

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

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

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

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

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

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

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

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

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

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

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

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

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

	const { postContentType: contentType, sensitiveByDefault } =
	this.$store.getters.mergedConfig

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

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

	return {
	randomSeed: genRandomSeed(),
	dropFiles: [],
	uploadingFiles: false,
	error: null,
	posting: false,
	highlighted: 0,
	newStatus: statusParams,
	caret: 0,
	showDropIcon: 'hide',
	dropStopTimeout: null,
	preview: null,
	previewLoading: false,
	emojiInputShown: false,
	idempotencyKey: '',
	saveInhibited: true,
	saveable: false,
	}
	},
	computed: {
	users() {
	return this.$store.state.users.users
	},
	userDefaultScope() {
	return this.$store.state.users.currentUser.default_scope
	},
	showAllScopes() {
	return !this.mergedConfig.minimalScopesMode
	},
	hideExtraActions() {
	return this.disableDraft \|\| this.hideDraft
	},
	emojiUserSuggestor() {
	return suggestor({
	emoji: [
	...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().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 useInstanceStore().featureSet.postFormats \|\| []
	},
	safeDMEnabled() {
	return useInstanceStore().featureSet.safeDM
	},
	pollsAvailable() {
	return (
	useInstanceStore().featureSet.pollsAvailable &&
	useInstanceStore().limits.pollLimits.max_options >= 2 &&
	this.disablePolls !== true
	)
	},
	hideScopeNotice() {
	return (
	this.disableNotice \|\| this.$store.getters.mergedConfig.hideScopeNotice
	)
	},
	pollContentError() {
	return (
	this.pollFormVisible && this.newStatus.poll && this.newStatus.poll.error
	)
	},
	showPreview() {
	return !this.disablePreview && (!!this.preview \|\| this.previewLoading)
	},
	emptyStatus() {
	return (
	this.newStatus.status.trim() === '' && this.newStatus.files.length === 0
	)
	},
	uploadFileLimitReached() {
	return this.newStatus.files.length >= this.fileLimit
	},
	isEdit() {
	return typeof this.statusId !== 'undefined' && this.statusId.trim() !== ''
	},
	quotable() {
	if (!useInstanceStore().featureSet.quotingAvailable) {
	return false
	}

	if (!this.replyTo) {
	return false
	}

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

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

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

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

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

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

	this.posting = true

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

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

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

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

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

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

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

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

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

	const oldHeight = pxStringToNumber(target.style.height)

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

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

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

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

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

	if (scrollerRef === window) {
	scrollerRef.scroll(0, targetScroll)
	} else {
	scrollerRef.scrollTop = targetScroll
	}
	},
	clearError() {
	this.error = null
	},
	changeVis(visibility) {
	this.newStatus.visibility = visibility
	},
	togglePollForm() {
	this.newStatus.hasPoll = !this.newStatus.hasPoll
	},
	setPoll(poll) {
	this.newStatus.poll = poll
	},
	clearPollForm() {
	if (this.$refs.pollForm) {
	this.$refs.pollForm.clear()
	}
	},
	dismissScopeNotice() {
	this.$store.dispatch('setOption', {
	name: 'hideScopeNotice',
	value: true,
	})
	},
	setMediaDescription(id) {
	const description = this.newStatus.mediaDescriptions[id]
	if (!description \|\| description.trim() === '') return
	return statusPoster.setMediaDescription({
	store: this.$store,
	id,
	description,
	})
	},
	setAllMediaDescriptions() {
	const ids = this.newStatus.files.map((file) => file.id)
	return Promise.all(ids.map((id) => this.setMediaDescription(id)))
	},
	handleEmojiInputShow(value) {
	this.emojiInputShown = value
	},
	updateIdempotencyKey() {
	this.idempotencyKey = Date.now().toString()
	},
	openProfileTab() {
	useInterfaceStore().openSettingsModalTab('profile')
	},
	propsToNative(props) {
	return propsToNative(props)
	},
	saveDraft() {
	if (!this.disableDraft && !this.saveInhibited) {
	if (this.safeToSaveDraft) {
	return this.$store
	.dispatch('addOrSaveDraft', { draft: this.newStatus })
	.then((id) => {
	if (this.newStatus.id !== id) {
	this.newStatus.id = id
	}
	this.saveable = false
	if (!this.shouldAutoSaveDraft) {
	this.clearStatus()
	this.$emit('draft-done')
	}
	})
	} else if (this.hasEmptyDraft) {
	// There is a draft, but there is nothing in it, clear it
	return this.abandonDraft().then(() => {
	this.saveable = false
	if (!this.shouldAutoSaveDraft) {
	this.clearStatus()
	this.$emit('draft-done')
	}
	})
	}
	}
	return Promise.resolve()
	},
	maybeAutoSaveDraft() {
	if (this.shouldAutoSaveDraft) {
	this.saveDraft(false)
	}
	},
	abandonDraft() {
	return this.$store.dispatch('abandonDraft', { id: this.newStatus.id })
	},
	getDraft(statusType, refId) {
	const maybeDraft = this.$store.state.drafts.drafts[this.draftId]
	if (this.draftId && maybeDraft) {
	return maybeDraft
	} else {
	const existingDrafts = this.$store.getters.draftsByTypeAndRefId(
	statusType,
	refId,
	)

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

	export default PostStatusForm
	diff --git a/src/components/post_status_modal/post_status_modal.js b/src/components/post_status_modal/post_status_modal.js
	index 2c643e9db9..fad8358815 100644
	--- a/src/components/post_status_modal/post_status_modal.js
	+++ b/src/components/post_status_modal/post_status_modal.js
	@@ -1,59 +1,60 @@
	import get from 'lodash/get'

	-import { usePostStatusStore } from 'src/stores/post_status'
	import Modal from '../modal/modal.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'

	+import { usePostStatusStore } from 'src/stores/post_status'
	+
	const PostStatusModal = {
	components: {
	PostStatusForm,
	Modal,
	},
	data() {
	return {
	resettingForm: false,
	}
	},
	computed: {
	isLoggedIn() {
	return !!this.$store.state.users.currentUser
	},
	modalActivated() {
	return usePostStatusStore().modalActivated
	},
	isFormVisible() {
	return this.isLoggedIn && !this.resettingForm && this.modalActivated
	},
	params() {
	return usePostStatusStore().params \|\| {}
	},
	},
	watch: {
	params(newVal, oldVal) {
	if (get(newVal, 'repliedUser.id') !== get(oldVal, 'repliedUser.id')) {
	this.resettingForm = true
	this.$nextTick(() => {
	this.resettingForm = false
	})
	}
	},
	isFormVisible(val) {
	if (val) {
	this.$nextTick(
	() => this.$el && this.$el.querySelector('textarea').focus(),
	)
	}
	},
	},
	methods: {
	closeModal() {
	usePostStatusStore().closePostStatusModal()
	},
	resetAndClose() {
	usePostStatusStore().resetPostStatusModal()
	usePostStatusStore().closePostStatusModal()
	},
	},
	}

	export default PostStatusModal
	diff --git a/src/components/quick_filter_settings/quick_filter_settings.js b/src/components/quick_filter_settings/quick_filter_settings.js
	index 3572dbb18f..dbb237e74c 100644
	--- a/src/components/quick_filter_settings/quick_filter_settings.js
	+++ b/src/components/quick_filter_settings/quick_filter_settings.js
	@@ -1,132 +1,133 @@
	import { mapState } from 'pinia'
	import { mapGetters } from 'vuex'

	-import { useInterfaceStore } from 'src/stores/interface'
	import Popover from '../popover/popover.vue'

	+import { useInterfaceStore } from 'src/stores/interface'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faFilter, faFont, faWrench } from '@fortawesome/free-solid-svg-icons'

	library.add(faFilter, faFont, faWrench)

	const QuickFilterSettings = {
	props: {
	conversation: Boolean,
	nested: Boolean,
	},
	components: {
	Popover,
	},
	methods: {
	setReplyVisibility(visibility) {
	this.$store.dispatch('setOption', {
	name: 'replyVisibility',
	value: visibility,
	})
	this.$store.dispatch('queueFlushAll')
	},
	openTab(tab) {
	useInterfaceStore().openSettingsModalTab(tab)
	},
	},
	computed: {
	...mapGetters(['mergedConfig']),
	...mapState(useInterfaceStore, {
	mobileLayout: (state) => state.layoutType === 'mobile',
	}),
	triggerAttrs() {
	if (this.mobileLayout) {
	return {}
	} else {
	return {
	title: this.$t('timeline.quick_filter_settings'),
	}
	}
	},
	mainClass() {
	if (this.mobileLayout) {
	return 'main-button'
	} else {
	return 'dropdown-item'
	}
	},
	loggedIn() {
	return !!this.$store.state.users.currentUser
	},
	replyVisibilitySelf: {
	get() {
	return this.mergedConfig.replyVisibility === 'self'
	},
	set() {
	this.setReplyVisibility('self')
	},
	},
	replyVisibilityFollowing: {
	get() {
	return this.mergedConfig.replyVisibility === 'following'
	},
	set() {
	this.setReplyVisibility('following')
	},
	},
	replyVisibilityAll: {
	get() {
	return this.mergedConfig.replyVisibility === 'all'
	},
	set() {
	this.setReplyVisibility('all')
	},
	},
	hideMedia: {
	get() {
	return (
	this.mergedConfig.hideAttachments \|\|
	this.mergedConfig.hideAttachmentsInConv
	)
	},
	set() {
	const value = !this.hideMedia
	this.$store.dispatch('setOption', { name: 'hideAttachments', value })
	this.$store.dispatch('setOption', {
	name: 'hideAttachmentsInConv',
	value,
	})
	},
	},
	hideMutedPosts: {
	get() {
	return this.mergedConfig.hideFilteredStatuses
	},
	set() {
	const value = !this.hideMutedPosts
	this.$store.dispatch('setOption', {
	name: 'hideFilteredStatuses',
	value,
	})
	},
	},
	muteBotStatuses: {
	get() {
	return this.mergedConfig.muteBotStatuses
	},
	set() {
	const value = !this.muteBotStatuses
	this.$store.dispatch('setOption', { name: 'muteBotStatuses', value })
	},
	},
	muteSensitiveStatuses: {
	get() {
	return this.mergedConfig.muteSensitiveStatuses
	},
	set() {
	const value = !this.muteSensitiveStatuses
	this.$store.dispatch('setOption', {
	name: 'muteSensitiveStatuses',
	value,
	})
	},
	},
	},
	}

	export default QuickFilterSettings
	diff --git a/src/components/quick_view_settings/quick_view_settings.js b/src/components/quick_view_settings/quick_view_settings.js
	index 6c5a9f6670..c305893a0f 100644
	--- a/src/components/quick_view_settings/quick_view_settings.js
	+++ b/src/components/quick_view_settings/quick_view_settings.js
	@@ -1,110 +1,111 @@
	import { mapState } from 'pinia'
	import { mapGetters } from 'vuex'

	import Popover from 'src/components/popover/popover.vue'
	import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
	+
	import { useInterfaceStore } from 'src/stores/interface'

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

	library.add(faList, faFolderTree, faBars, faWrench)

	const QuickViewSettings = {
	props: {
	conversation: Boolean,
	},
	components: {
	Popover,
	QuickFilterSettings,
	},
	methods: {
	setConversationDisplay(visibility) {
	this.$store.dispatch('setOption', {
	name: 'conversationDisplay',
	value: visibility,
	})
	},
	openTab(tab) {
	useInterfaceStore().openSettingsModalTab(tab)
	},
	},
	computed: {
	...mapGetters(['mergedConfig']),
	...mapState(useInterfaceStore, {
	mobileLayout: (state) => state.layoutType === 'mobile',
	}),
	loggedIn() {
	return !!this.$store.state.users.currentUser
	},
	conversationDisplay: {
	get() {
	return this.mergedConfig.conversationDisplay
	},
	set(newVal) {
	this.setConversationDisplay(newVal)
	},
	},
	autoUpdate: {
	get() {
	return this.mergedConfig.streaming
	},
	set() {
	const value = !this.autoUpdate
	this.$store.dispatch('setOption', { name: 'streaming', value })
	},
	},
	collapseWithSubjects: {
	get() {
	return this.mergedConfig.collapseMessageWithSubject
	},
	set() {
	const value = !this.collapseWithSubjects
	this.$store.dispatch('setOption', {
	name: 'collapseMessageWithSubject',
	value,
	})
	},
	},
	showUserAvatars: {
	get() {
	return this.mergedConfig.mentionLinkShowAvatar
	},
	set() {
	const value = !this.showUserAvatars
	this.$store.dispatch('setOption', {
	name: 'mentionLinkShowAvatar',
	value,
	})
	},
	},
	muteBotStatuses: {
	get() {
	return this.mergedConfig.muteBotStatuses
	},
	set() {
	const value = !this.muteBotStatuses
	this.$store.dispatch('setOption', { name: 'muteBotStatuses', value })
	},
	},
	muteSensitiveStatuses: {
	get() {
	return this.mergedConfig.muteSensitiveStatuses
	},
	set() {
	const value = !this.muteSensitiveStatuses
	this.$store.dispatch('setOption', {
	name: 'muteSensitiveStatuses',
	value,
	})
	},
	},
	},
	}

	export default QuickViewSettings
	diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
	index 14bb2de9f8..9058963c66 100644
	--- a/src/components/registration/registration.js
	+++ b/src/components/registration/registration.js
	@@ -1,160 +1,162 @@
	import useVuelidate from '@vuelidate/core'
	import { required, requiredIf, sameAs } from '@vuelidate/validators'
	import { mapState as mapPiniaState } from 'pinia'
	import { mapActions, mapState } from 'vuex'

	-import { DAY } from 'src/services/date_utils/date_utils.js'
	-import { useInstanceStore } from 'src/stores/instance.js'
	import localeService from '../../services/locale/locale.service.js'
	import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
	import TermsOfServicePanel from '../terms_of_service_panel/terms_of_service_panel.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	+import { DAY } from 'src/services/date_utils/date_utils.js'
	+
	const registration = {
	setup() {
	return { v$: useVuelidate() }
	},
	data: () => ({
	user: {
	email: '',
	fullname: '',
	username: '',
	password: '',
	confirm: '',
	birthday: '',
	reason: '',
	language: [''],
	},
	captcha: {},
	}),
	components: {
	InterfaceLanguageSwitcher,
	TermsOfServicePanel,
	},
	validations() {
	return {
	user: {
	email: { required: requiredIf(() => this.accountActivationRequired) },
	username: { required },
	fullname: { required },
	password: { required },
	confirm: {
	required,
	sameAs: sameAs(this.user.password),
	},
	birthday: {
	required: requiredIf(() => this.birthdayRequired),
	maxValue: (value) => {
	return (
	!this.birthdayRequired \|\|
	new Date(value).getTime() <= this.birthdayMin.getTime()
	)
	},
	},
	reason: { required: requiredIf(() => this.accountApprovalRequired) },
	language: {},
	},
	}
	},
	created() {
	if ((!this.registrationOpen && !this.token) \|\| this.signedIn) {
	this.$router.push({ name: 'root' })
	}

	this.setCaptcha()
	},
	computed: {
	token() {
	return this.$route.params.token
	},
	bioPlaceholder() {
	return this.replaceNewlines(this.$t('registration.bio_placeholder'))
	},
	reasonPlaceholder() {
	return this.replaceNewlines(this.$t('registration.reason_placeholder'))
	},
	birthdayMin() {
	const minAge = this.birthdayMinAge
	const today = new Date()
	today.setUTCMilliseconds(0)
	today.setUTCSeconds(0)
	today.setUTCMinutes(0)
	today.setUTCHours(0)
	const minDate = new Date()
	minDate.setTime(today.getTime() - minAge * DAY)
	return minDate
	},
	birthdayMinAttr() {
	return this.birthdayMin.toJSON().replace(/T.+$/, '')
	},
	birthdayMinFormatted() {
	const browserLocale = localeService.internalToBrowserLocale(
	this.$i18n.locale,
	)
	return (
	this.user.birthday &&
	new Date(Date.parse(this.birthdayMin)).toLocaleDateString(
	browserLocale,
	{ timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' },
	)
	)
	},
	...mapPiniaState(useInstanceStore, {
	registrationOpen: (store) => store.registrationOpen,
	embeddedToS: (store) => store.embeddedToS,
	termsOfService: (store) => store.tos,
	accountActivationRequired: (store) => store.accountActivationRequired,
	accountApprovalRequired: (store) => store.accountApprovalRequired,
	birthdayRequired: (store) => store.birthdayRequired,
	birthdayMinAge: (store) => store.birthdayMinAge,
	}),
	...mapState({
	signedIn: (state) => !!state.users.currentUser,
	isPending: (state) => state.users.signUpPending,
	serverValidationErrors: (state) => state.users.signUpErrors,
	signUpNotice: (state) => state.users.signUpNotice,
	hasSignUpNotice: (state) => !!state.users.signUpNotice.message,
	}),
	},
	methods: {
	...mapActions(['signUp', 'getCaptcha']),
	async submit() {
	this.user.nickname = this.user.username
	this.user.token = this.token

	this.user.captcha_solution = this.captcha.solution
	this.user.captcha_token = this.captcha.token
	this.user.captcha_answer_data = this.captcha.answer_data
	if (this.user.language) {
	this.user.language = localeService.internalToBackendLocaleMulti(
	this.user.language.filter((k) => k),
	)
	}

	this.v$.$touch()

	if (!this.v$.$invalid) {
	try {
	const status = await this.signUp(this.user)
	if (status === 'ok') {
	this.$router.push({ name: 'friends' })
	}
	// If status is not 'ok' (i.e. it needs further actions to be done
	// before you can login), display sign up notice, do not switch anywhere
	} catch (error) {
	console.warn('Registration failed: ', error)
	this.setCaptcha()
	}
	}
	},
	setCaptcha() {
	this.getCaptcha().then((cpt) => {
	this.captcha = cpt
	})
	},
	replaceNewlines(str) {
	return str.replace(/\s\n\s/g, ' \n')
	},
	},
	}

	export default registration
	diff --git a/src/components/report/report.js b/src/components/report/report.js
	index d6b4a14b57..a51ab0f194 100644
	--- a/src/components/report/report.js
	+++ b/src/components/report/report.js
	@@ -1,44 +1,46 @@
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	-import { useInstanceStore } from 'src/stores/instance.js'
	-import { useReportsStore } from 'src/stores/reports'
	import Select from '../select/select.vue'
	import StatusContent from '../status_content/status_content.vue'
	import Timeago from '../timeago/timeago.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+import { useReportsStore } from 'src/stores/reports'
	+
	+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	+
	const Report = {
	props: ['reportId'],
	components: {
	Select,
	StatusContent,
	Timeago,
	RichContent,
	},
	computed: {
	report() {
	return useReportsStore().reports[this.reportId] \|\| {}
	},
	state: {
	get: function () {
	return this.report.state
	},
	set: function (val) {
	this.setReportState(val)
	},
	},
	},
	methods: {
	generateUserProfileLink(user) {
	return generateProfileLink(
	user.id,
	user.screen_name,
	useInstanceStore().restrictedNicknames,
	)
	},
	setReportState(state) {
	return useReportsStore().setReportState({ id: this.report.id, state })
	},
	},
	}

	export default Report
	diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
	index 99dd8035dd..3a6f0b1bcc 100644
	--- a/src/components/rich_content/rich_content.jsx
	+++ b/src/components/rich_content/rich_content.jsx
	@@ -1,410 +1,411 @@
	import { flattenDeep, unescape as ldUnescape } from 'lodash'

	import HashtagLink from 'src/components/hashtag_link/hashtag_link.vue'
	import { MENTIONS_LIMIT } from 'src/components/mentions_line/mentions_line.js'
	import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
	import StillImage from 'src/components/still-image/still-image.vue'
	import StillImageEmojiPopover from 'src/components/still-image/still-image-emoji-popover.vue'
	+
	import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
	import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
	import {
	getAttrs,
	getTagName,
	processTextForEmoji,
	} from 'src/services/html_converter/utility.service.js'

	import './rich_content.scss'

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

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

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

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

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

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

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

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

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

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

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

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

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

	const pass1 = convertHtmlToTree(html).map(processItem)
	const pass2 = [...pass1].reverse().map(processItemReverse).reverse()

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

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

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

	return result
	},
	}

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

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

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

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

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

	return { newHtml }
	}
	diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
	index a066776b89..eda57273f1 100644
	--- a/src/components/settings_modal/admin_tabs/emoji_tab.js
	+++ b/src/components/settings_modal/admin_tabs/emoji_tab.js
	@@ -1,350 +1,351 @@
	import Checkbox from 'components/checkbox/checkbox.vue'
	import ConfirmModal from 'components/confirm_modal/confirm_modal.vue'
	import Popover from 'components/popover/popover.vue'
	import Select from 'components/select/select.vue'
	import StillImage from 'components/still-image/still-image.vue'
	import { assign, clone } from 'lodash'

	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	-import { useInstanceStore } from 'src/stores/instance.js'
	-import { useInterfaceStore } from 'src/stores/interface'
	import EmojiEditingPopover from '../helpers/emoji_editing_popover.vue'
	import ModifiedIndicator from '../helpers/modified_indicator.vue'
	import SharedComputedObject from '../helpers/shared_computed_object.js'
	import StringSetting from '../helpers/string_setting.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInterfaceStore } from 'src/stores/interface'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faArrowsRotate,
	faDownload,
	faFolderOpen,
	faServer,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faArrowsRotate, faFolderOpen, faDownload, faServer)

	const EmojiTab = {
	components: {
	TabSwitcher,
	StringSetting,
	Checkbox,
	StillImage,
	Select,
	Popover,
	ConfirmModal,
	ModifiedIndicator,
	EmojiEditingPopover,
	},

	data() {
	return {
	knownLocalPacks: {},
	knownRemotePacks: {},
	editedMetadata: {},
	packName: '',
	newPackName: '',
	deleteModalVisible: false,
	remotePackInstance: '',
	remotePackDownloadAs: '',

	remotePackURL: '',
	remotePackFile: null,
	}
	},

	provide() {
	return { emojiAddr: this.emojiAddr }
	},

	computed: {
	...SharedComputedObject(),
	pack() {
	return this.packName !== '' ? this.knownPacks[this.packName] : undefined
	},
	packMeta() {
	if (this.packName === '') return {}
	if (this.editedMetadata[this.packName] === undefined) {
	this.editedMetadata[this.packName] = clone(this.pack.pack)
	}

	return this.editedMetadata[this.packName]
	},
	knownPacks() {
	// Copy the object itself but not the children, so they are still passed by reference and modified
	const result = clone(this.knownLocalPacks)
	for (const instName in this.knownRemotePacks) {
	for (const instPack in this.knownRemotePacks[instName]) {
	result[`${instPack}@${instName}`] =
	this.knownRemotePacks[instName][instPack]
	}
	}

	return result
	},
	downloadWillReplaceLocal() {
	return (
	(this.remotePackDownloadAs.trim() === '' &&
	this.pack.remote &&
	this.pack.remote.baseName in this.knownLocalPacks) \|\|
	this.remotePackDownloadAs in this.knownLocalPacks
	)
	},
	},

	methods: {
	reloadEmoji() {
	this.$store.state.api.backendInteractor.reloadEmoji()
	},
	importFromFS() {
	this.$store.state.api.backendInteractor.importEmojiFromFS()
	},
	emojiAddr(name) {
	if (this.pack.remote !== undefined) {
	// Remote pack
	return `${this.pack.remote.instance}/emoji/${encodeURIComponent(this.pack.remote.baseName)}/${name}`
	} else {
	return `${useInstanceStore().server}/emoji/${encodeURIComponent(this.packName)}/${name}`
	}
	},

	createEmojiPack() {
	this.$store.state.api.backendInteractor
	.createEmojiPack({ name: this.newPackName })
	.then((resp) => resp.json())
	.then((resp) => {
	if (resp === 'ok') {
	return this.refreshPackList()
	} else {
	this.displayError(resp.error)
	return Promise.reject(resp)
	}
	})
	.then(() => {
	this.packName = this.newPackName
	this.newPackName = ''
	})
	},
	deleteEmojiPack() {
	this.$store.state.api.backendInteractor
	.deleteEmojiPack({ name: this.packName })
	.then((resp) => resp.json())
	.then((resp) => {
	if (resp === 'ok') {
	return this.refreshPackList()
	} else {
	this.displayError(resp.error)
	return Promise.reject(resp)
	}
	})
	.then(() => {
	delete this.editedMetadata[this.packName]

	this.deleteModalVisible = false
	this.packName = ''
	})
	},

	metaEdited(prop) {
	if (!this.pack) return

	const def = this.pack.pack[prop] \|\| ''
	const edited = this.packMeta[prop] \|\| ''
	return edited !== def
	},
	savePackMetadata() {
	this.$store.state.api.backendInteractor
	.saveEmojiPackMetadata({ name: this.packName, newData: this.packMeta })
	.then((resp) => resp.json())
	.then((resp) => {
	if (resp.error !== undefined) {
	this.displayError(resp.error)
	return
	}

	// Update actual pack data
	this.pack.pack = resp
	// Delete edited pack data, should auto-update itself
	delete this.editedMetadata[this.packName]
	})
	},

	updatePackFiles(newFiles, packName) {
	this.knownPacks[packName].files = newFiles
	this.sortPackFiles(packName)
	},

	loadPacksPaginated(listFunction) {
	const pageSize = 25
	const allPacks = {}

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

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

	assign(allPacks, pageData.packs)
	})
	}

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

	refreshPackList() {
	this.loadPacksPaginated(
	this.$store.state.api.backendInteractor.listEmojiPacks,
	).then((allPacks) => {
	this.knownLocalPacks = allPacks
	for (const name of Object.keys(this.knownLocalPacks)) {
	this.sortPackFiles(name)
	}
	})
	},
	listRemotePacks() {
	this.loadPacksPaginated(
	this.$store.state.api.backendInteractor.listRemoteEmojiPacks,
	)
	.then((allPacks) => {
	let inst = this.remotePackInstance
	if (!inst.startsWith('http')) {
	inst = 'https://' + inst
	}
	const instUrl = new URL(inst)
	inst = instUrl.host

	for (const packName in allPacks) {
	allPacks[packName].remote = {
	baseName: packName,
	instance: instUrl.origin,
	}
	}

	this.knownRemotePacks[inst] = allPacks
	for (const pack in this.knownRemotePacks[inst]) {
	this.sortPackFiles(`${pack}@${inst}`)
	}
	})
	.catch((data) => {
	this.displayError(data)
	})
	},
	downloadRemotePack() {
	if (this.remotePackDownloadAs.trim() === '') {
	this.remotePackDownloadAs = this.pack.remote.baseName
	}

	this.$store.state.api.backendInteractor
	.downloadRemoteEmojiPack({
	instance: this.pack.remote.instance,
	packName: this.pack.remote.baseName,
	as: this.remotePackDownloadAs,
	})
	.then((data) => data.json())
	.then((resp) => {
	if (resp === 'ok') {
	return this.refreshPackList()
	} else {
	this.displayError(resp.error)
	return Promise.reject(resp)
	}
	})
	.then(() => {
	this.packName = this.remotePackDownloadAs
	this.remotePackDownloadAs = ''
	})
	},
	downloadRemoteURLPack() {
	this.$store.state.api.backendInteractor
	.downloadRemoteEmojiPackZIP({
	url: this.remotePackURL,
	packName: this.newPackName,
	})
	.then((data) => data.json())
	.then((resp) => {
	if (resp === 'ok') {
	return this.refreshPackList()
	} else {
	this.displayError(resp.error)
	return Promise.reject(resp)
	}
	})
	.then(() => {
	this.packName = this.newPackName
	this.newPackName = ''
	this.remotePackURL = ''
	})
	},
	downloadRemoteFilePack() {
	this.$store.state.api.backendInteractor
	.downloadRemoteEmojiPackZIP({
	file: this.remotePackFile[0],
	packName: this.newPackName,
	})
	.then((data) => data.json())
	.then((resp) => {
	if (resp === 'ok') {
	return this.refreshPackList()
	} else {
	this.displayError(resp.error)
	return Promise.reject(resp)
	}
	})
	.then(() => {
	this.packName = this.newPackName
	this.newPackName = ''
	this.remotePackURL = ''
	})
	},

	displayError(msg) {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'admin_dash.emoji.error',
	messageArgs: [msg],
	level: 'error',
	})
	},
	sortPackFiles(nameOfPack) {
	// Sort by key
	const sorted = Object.keys(this.knownPacks[nameOfPack].files)
	.sort()
	.reduce((acc, key) => {
	if (key.length === 0) return acc
	acc[key] = this.knownPacks[nameOfPack].files[key]
	return acc
	}, {})
	this.knownPacks[nameOfPack].files = sorted
	},
	},

	mounted() {
	this.refreshPackList()
	},
	}

	export default EmojiTab
	diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.js b/src/components/settings_modal/admin_tabs/frontends_tab.js
	index 7563adae09..a7f16a0d4f 100644
	--- a/src/components/settings_modal/admin_tabs/frontends_tab.js
	+++ b/src/components/settings_modal/admin_tabs/frontends_tab.js
	@@ -1,114 +1,115 @@
	import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
	import Popover from 'src/components/popover/popover.vue'
	-import { useInterfaceStore } from 'src/stores/interface'
	import BooleanSetting from '../helpers/boolean_setting.vue'
	import ChoiceSetting from '../helpers/choice_setting.vue'
	import GroupSetting from '../helpers/group_setting.vue'
	import IntegerSetting from '../helpers/integer_setting.vue'
	import SharedComputedObject from '../helpers/shared_computed_object.js'
	import StringSetting from '../helpers/string_setting.vue'

	+import { useInterfaceStore } from 'src/stores/interface'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faGlobe } from '@fortawesome/free-solid-svg-icons'

	library.add(faGlobe)

	const FrontendsTab = {
	provide() {
	return {
	defaultDraftMode: true,
	defaultSource: 'admin',
	}
	},
	data() {
	return {
	working: false,
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	IntegerSetting,
	StringSetting,
	GroupSetting,
	PanelLoading,
	Popover,
	},
	created() {
	if (this.user.rights.admin) {
	this.$store.dispatch('loadFrontendsStuff')
	}
	},
	computed: {
	...SharedComputedObject(),
	frontends() {
	return this.$store.state.adminSettings.frontends
	},
	},
	methods: {
	canInstall(frontend) {
	const fe = this.frontends.find((f) => f.name === frontend.name)
	if (!fe) return false
	return fe.refs.includes(frontend.ref)
	},
	getSuggestedRef(frontend) {
	if (this.adminDraft) {
	const defaultFe = this.adminDraft[':pleroma'][':frontends'][':primary']
	if (defaultFe?.name === frontend.name && this.canInstall(defaultFe)) {
	return defaultFe.ref
	} else {
	return frontend.refs[0]
	}
	} else {
	return frontend.refs[0]
	}
	},
	update(frontend, suggestRef) {
	const ref = suggestRef \|\| this.getSuggestedRef(frontend)
	const { name } = frontend
	const payload = { name, ref }

	this.working = true
	this.$store.state.api.backendInteractor
	.installFrontend({ payload })
	.finally(() => {
	this.working = false
	})
	.then(async (response) => {
	this.$store.dispatch('loadFrontendsStuff')
	if (response.error) {
	const reason = await response.error.json()
	useInterfaceStore().pushGlobalNotice({
	level: 'error',
	messageKey: 'admin_dash.frontend.failure_installing_frontend',
	messageArgs: {
	version: name + '/' + ref,
	reason: reason.error,
	},
	timeout: 5000,
	})
	} else {
	useInterfaceStore().pushGlobalNotice({
	level: 'success',
	messageKey: 'admin_dash.frontend.success_installing_frontend',
	messageArgs: {
	version: name + '/' + ref,
	},
	timeout: 2000,
	})
	}
	})
	},
	setDefault(frontend, suggestRef) {
	const ref = suggestRef \|\| this.getSuggestedRef(frontend)
	const { name } = frontend

	this.$store.commit('updateAdminDraft', {
	path: [':pleroma', ':frontends', ':primary'],
	value: { name, ref },
	})
	},
	},
	}

	export default FrontendsTab
	diff --git a/src/components/settings_modal/helpers/attachment_setting.js b/src/components/settings_modal/helpers/attachment_setting.js
	index 694c168e0a..7ba9109503 100644
	--- a/src/components/settings_modal/helpers/attachment_setting.js
	+++ b/src/components/settings_modal/helpers/attachment_setting.js
	@@ -1,45 +1,47 @@
	import Attachment from 'src/components/attachment/attachment.vue'
	import MediaUpload from 'src/components/media_upload/media_upload.vue'
	-import { fileTypeExt } from 'src/services/file_type/file_type.service.js'
	-import { useInstanceStore } from 'src/stores/instance.js'
	import Setting from './setting.js'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	+import { fileTypeExt } from 'src/services/file_type/file_type.service.js'
	+
	export default {
	...Setting,
	props: {
	...Setting.props,
	compact: Boolean,
	acceptTypes: {
	type: String,
	required: false,
	default: 'image/*',
	},
	},
	components: {
	...Setting.components,
	MediaUpload,
	Attachment,
	},
	computed: {
	...Setting.computed,
	attachment() {
	const path = this.realDraftMode ? this.draft : this.state
	// The "server" part is primarily for local dev, but could be useful for alt-domain or multiuser usage.
	const url = path.includes('://') ? path : useInstanceStore().server + path
	return {
	mimetype: fileTypeExt(url),
	url,
	}
	},
	},
	methods: {
	...Setting.methods,
	setMediaFile(fileInfo) {
	if (this.realDraftMode) {
	this.draft = fileInfo.url
	} else {
	this.configSink(this.path, fileInfo.url)
	}
	},
	},
	}
	diff --git a/src/components/settings_modal/helpers/pwa_manifest_icons_setting.js b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.js
	index dd80ab54dc..5d90ccb1e8 100644
	--- a/src/components/settings_modal/helpers/pwa_manifest_icons_setting.js
	+++ b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.js
	@@ -1,100 +1,102 @@
	import { clone } from 'lodash'

	import Attachment from 'src/components/attachment/attachment.vue'
	import MediaUpload from 'src/components/media_upload/media_upload.vue'
	import Select from 'src/components/select/select.vue'
	-import { fileTypeExt } from 'src/services/file_type/file_type.service.js'
	-import { useInstanceStore } from 'src/stores/instance.js'
	import Setting from './setting.js'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	+import { fileTypeExt } from 'src/services/file_type/file_type.service.js'
	+
	export default {
	...Setting,
	components: {
	...Setting.components,
	Select,
	Attachment,
	MediaUpload,
	},
	computed: {
	...Setting.computed,
	purposeOptions() {
	return ['any', 'monochrome', 'maskable'].map((value) => ({
	value,
	key: value,
	label: this.$t('admin_dash.instance.pwa.icon.' + value),
	}))
	},
	},
	methods: {
	...Setting.methods,
	attachment(e) {
	const path = e[':src']
	if (!path) {
	return {
	mimetype: '',
	url: '',
	}
	}
	const url = path.includes('://') ? path : useInstanceStore().server + path

	return {
	mimetype: fileTypeExt(url),
	url,
	}
	},
	setMediaFile({ event, index }) {
	this.update({
	event: {
	target: {
	value: event.url,
	},
	},
	index,
	eventType: 'edit',
	field: ':src',
	})
	},
	setPurpose({ event, index }) {
	this.update({
	event: {
	target: {
	value: event,
	},
	},
	index,
	eventType: 'edit',
	field: ':purpose',
	})
	},
	getValue({ event, field, index, eventType }) {
	switch (eventType) {
	case 'add': {
	const res = [...this.visibleState, {}]
	return res
	}

	case 'remove': {
	const pre = this.visibleState.slice(0, index)
	const post = this.visibleState.slice(index + 1)

	return [...pre, ...post]
	}

	case 'edit': {
	const pre = this.visibleState.slice(0, index)
	const post = this.visibleState.slice(index + 1)
	const item = clone(this.visibleState[index])
	const string = event.target.value

	if (!string) {
	delete item[field]
	} else {
	item[field] = string
	}

	return [...pre, item, ...post]
	}
	}
	},
	},
	}
	diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
	index 4517c3295c..1d6da70684 100644
	--- a/src/components/settings_modal/settings_modal.js
	+++ b/src/components/settings_modal/settings_modal.js
	@@ -1,210 +1,212 @@
	import { cloneDeep, isEqual } from 'lodash'
	import { mapActions, mapState } from 'pinia'

	import AsyncComponentError from 'src/components/async_component_error/async_component_error.vue'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
	import Modal from 'src/components/modal/modal.vue'
	import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
	+import Popover from '../popover/popover.vue'
	+
	+import { useInterfaceStore } from 'src/stores/interface'
	+
	import {
	newExporter,
	newImporter,
	} from 'src/services/export_import/export_import.js'
	import getResettableAsyncComponent from 'src/services/resettable_async_component.js'
	-import { useInterfaceStore } from 'src/stores/interface'
	-import Popover from '../popover/popover.vue'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faWindowMinimize } from '@fortawesome/free-regular-svg-icons'
	import {
	faChevronDown,
	faFileDownload,
	faFileUpload,
	faTimes,
	} from '@fortawesome/free-solid-svg-icons'

	const PLEROMAFE_SETTINGS_MAJOR_VERSION = 1
	const PLEROMAFE_SETTINGS_MINOR_VERSION = 0

	library.add(
	faTimes,
	faWindowMinimize,
	faFileUpload,
	faFileDownload,
	faChevronDown,
	)

	const SettingsModal = {
	data() {
	return {
	dataImporter: newImporter({
	validator: this.importValidator,
	onImport: this.onImport,
	onImportFailure: this.onImportFailure,
	}),
	dataThemeExporter: newExporter({
	filename: 'pleromafe_settings.full',
	getExportedObject: () => this.generateExport(true),
	}),
	dataExporter: newExporter({
	filename: 'pleromafe_settings',
	getExportedObject: () => this.generateExport(),
	}),
	}
	},
	components: {
	Modal,
	Popover,
	Checkbox,
	ConfirmModal,
	SettingsModalUserContent: getResettableAsyncComponent(
	() => import('./settings_modal_user_content.vue'),
	{
	loadingComponent: PanelLoading,
	errorComponent: AsyncComponentError,
	delay: 0,
	},
	),
	SettingsModalAdminContent: getResettableAsyncComponent(
	() => import('./settings_modal_admin_content.vue'),
	{
	loadingComponent: PanelLoading,
	errorComponent: AsyncComponentError,
	delay: 0,
	},
	),
	},
	methods: {
	closeModal() {
	useInterfaceStore().closeSettingsModal()
	},
	peekModal() {
	useInterfaceStore().togglePeekSettingsModal()
	},
	importValidator(data) {
	if (!Array.isArray(data._pleroma_settings_version)) {
	return {
	messageKey: 'settings.file_import_export.invalid_file',
	}
	}

	const [major, minor] = data._pleroma_settings_version

	if (major > PLEROMAFE_SETTINGS_MAJOR_VERSION) {
	return {
	messageKey: 'settings.file_export_import.errors.file_too_new',
	messageArgs: {
	fileMajor: major,
	feMajor: PLEROMAFE_SETTINGS_MAJOR_VERSION,
	},
	}
	}

	if (major < PLEROMAFE_SETTINGS_MAJOR_VERSION) {
	return {
	messageKey: 'settings.file_export_import.errors.file_too_old',
	messageArgs: {
	fileMajor: major,
	feMajor: PLEROMAFE_SETTINGS_MAJOR_VERSION,
	},
	}
	}

	if (minor > PLEROMAFE_SETTINGS_MINOR_VERSION) {
	useInterfaceStore().pushGlobalNotice({
	level: 'warning',
	messageKey: 'settings.file_export_import.errors.file_slightly_new',
	})
	}

	return true
	},
	onImportFailure(result) {
	if (result.error) {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'settings.invalid_settings_imported',
	level: 'error',
	})
	} else {
	useInterfaceStore().pushGlobalNotice({
	...result.validationResult,
	level: 'error',
	})
	}
	},
	onImport(data) {
	if (data) {
	this.$store.dispatch('loadSettings', data)
	}
	},
	restore() {
	this.dataImporter.importData()
	},
	backup() {
	this.dataExporter.exportData()
	},
	backupWithTheme() {
	this.dataThemeExporter.exportData()
	},
	generateExport(theme = false) {
	const { config } = this.$store.state
	let sample = config
	if (!theme) {
	const ignoreList = new Set([
	'customTheme',
	'customThemeSource',
	'colors',
	])
	sample = Object.fromEntries(
	Object.entries(sample).filter(([key]) => !ignoreList.has(key)),
	)
	}
	const clone = cloneDeep(sample)
	clone._pleroma_settings_version = [
	PLEROMAFE_SETTINGS_MAJOR_VERSION,
	PLEROMAFE_SETTINGS_MINOR_VERSION,
	]
	return clone
	},
	resetAdminDraft() {
	this.$store.commit('resetAdminDraft')
	},
	pushAdminDraft() {
	this.$store.dispatch('pushAdminDraft')
	},
	...mapActions(useInterfaceStore, [
	'temporaryChangesRevert',
	'temporaryChangesConfirm',
	]),
	},
	computed: {
	...mapState(useInterfaceStore, {
	temporaryChangesCountdown: (store) => store.temporaryChangesCountdown,
	currentSaveStateNotice: (store) => store.settings.currentSaveStateNotice,
	modalActivated: (store) => store.settingsModalState !== 'hidden',
	modalMode: (store) => store.settingsModalMode,
	modalOpenedOnceUser: (store) => store.settingsModalLoadedUser,
	modalOpenedOnceAdmin: (store) => store.settingsModalLoadedAdmin,
	modalPeeked: (store) => store.settingsModalState === 'minimized',
	}),
	expertLevel: {
	get() {
	return this.$store.state.config.expertLevel > 0
	},
	set(value) {
	this.$store.dispatch('setOption', {
	name: 'expertLevel',
	value: value ? 1 : 0,
	})
	},
	},
	adminDraftAny() {
	return !isEqual(
	this.$store.state.adminSettings.config,
	this.$store.state.adminSettings.draft,
	)
	},
	},
	}

	export default SettingsModal
	diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js
	index 1a3f10e775..98c82d980b 100644
	--- a/src/components/settings_modal/settings_modal_admin_content.js
	+++ b/src/components/settings_modal/settings_modal_admin_content.js
	@@ -1,139 +1,140 @@
	-import { useInterfaceStore } from 'src/stores/interface'
	import AuthTab from './admin_tabs/auth_tab.vue'
	import EmojiTab from './admin_tabs/emoji_tab.vue'
	import FederationTab from './admin_tabs/federation_tab.vue'
	import FrontendsTab from './admin_tabs/frontends_tab.vue'
	import HTTPTab from './admin_tabs/http_tab.vue'
	import InstanceTab from './admin_tabs/instance_tab.vue'
	import JobQueuesTab from './admin_tabs/job_queues_tab.vue'
	import LimitsTab from './admin_tabs/limits_tab.vue'
	import LinksTab from './admin_tabs/links_tab.vue'
	import MailerTab from './admin_tabs/mailer_tab.vue'
	import MediaProxyTab from './admin_tabs/media_proxy_tab.vue'
	import MonitoringTab from './admin_tabs/monitoring_tab.vue'
	import OtherTab from './admin_tabs/other_tab.vue'
	import PostsTab from './admin_tabs/posts_tab.vue'
	import RatesTab from './admin_tabs/rates_tab.vue'
	import RegistrationsTab from './admin_tabs/registrations_tab.vue'
	import UploadsTab from './admin_tabs/uploads_tab.vue'
	import VerticalTabSwitcher from './helpers/vertical_tab_switcher.jsx'

	+import { useInterfaceStore } from 'src/stores/interface'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faChain,
	faChartLine,
	faCircleNodes,
	faDoorOpen,
	faEllipsis,
	faEnvelope,
	faGauge,
	faGears,
	faGlobe,
	faHand,
	faKey,
	faLaptopCode,
	faMessage,
	faTowerBroadcast,
	faUpload,
	faWrench,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faWrench,
	faHand,
	faChain,
	faGlobe,
	faLaptopCode,
	faTowerBroadcast,
	faEnvelope,
	faChartLine,
	faDoorOpen,
	faGears,
	faKey,
	faCircleNodes,
	faUpload,
	faMessage,
	faEllipsis,
	faGauge,
	)

	const SettingsModalAdminContent = {
	components: {
	VerticalTabSwitcher,

	InstanceTab,
	RegistrationsTab,
	EmojiTab,
	FrontendsTab,
	FederationTab,
	LimitsTab,
	MailerTab,
	UploadsTab,
	MediaProxyTab,
	LinksTab,
	JobQueuesTab,
	AuthTab,
	HTTPTab,
	MonitoringTab,
	RatesTab,
	OtherTab,
	PostsTab,
	},
	computed: {
	user() {
	return this.$store.state.users.currentUser
	},
	isLoggedIn() {
	return !!this.$store.state.users.currentUser
	},
	open() {
	return useInterfaceStore().settingsModalState !== 'hidden'
	},
	bodyLock() {
	return useInterfaceStore().settingsModalState === 'visible'
	},
	adminDbLoaded() {
	return this.$store.state.adminSettings.loaded
	},
	adminDescriptionsLoaded() {
	return this.$store.state.adminSettings.descriptions !== null
	},
	noDb() {
	return this.$store.state.adminSettings.dbConfigEnabled === false
	},
	},
	created() {
	if (this.user.rights.admin) {
	this.$store.dispatch('loadAdminStuff')
	}
	},
	methods: {
	onOpen() {
	const targetTab = useInterfaceStore().settingsModalTargetTab
	// We're being told to open in specific tab
	if (targetTab) {
	const tabIndex = this.$refs.tabSwitcher.$slots
	.default()
	.findIndex((elm) => {
	return elm.props && elm.props['data-tab-name'] === targetTab
	})
	if (tabIndex >= 0) {
	this.$refs.tabSwitcher.setTab(tabIndex)
	}
	}
	// Clear the state of target tab, so that next time settings is opened
	// it doesn't force it.
	useInterfaceStore().clearSettingsModalTargetTab()
	},
	},
	mounted() {
	this.onOpen()
	},
	watch: {
	open: function (value) {
	if (value) this.onOpen()
	},
	},
	}

	export default SettingsModalAdminContent
	diff --git a/src/components/settings_modal/settings_modal_user_content.js b/src/components/settings_modal/settings_modal_user_content.js
	index f66099049b..2478118403 100644
	--- a/src/components/settings_modal/settings_modal_user_content.js
	+++ b/src/components/settings_modal/settings_modal_user_content.js
	@@ -1,123 +1,124 @@
	-import { useInterfaceStore } from 'src/stores/interface'
	import VerticalTabSwitcher from './helpers/vertical_tab_switcher.jsx'
	import AppearanceTab from './tabs/appearance_tab.vue'
	import ClutterTab from './tabs/clutter_tab.vue'
	import ComposingTab from './tabs/composing_tab.vue'
	import DataImportExportTab from './tabs/data_import_export_tab.vue'
	import DeveloperTab from './tabs/developer_tab.vue'
	import FilteringTab from './tabs/filtering_tab.vue'
	import GeneralTab from './tabs/general_tab.vue'
	import LayoutTab from './tabs/layout_tab.vue'
	import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
	import NotificationsTab from './tabs/notifications_tab.vue'
	import OldThemeTab from './tabs/old_theme_tab/old_theme_tab.vue'
	import PostsTab from './tabs/posts_tab.vue'
	import ProfileTab from './tabs/profile_tab.vue'
	import SecurityTab from './tabs/security_tab/security_tab.vue'
	import StyleTab from './tabs/style_tab/style_tab.vue'

	+import { useInterfaceStore } from 'src/stores/interface'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faBroom,
	faCode,
	faColumns,
	faDownload,
	faEyeSlash,
	faFilter,
	faLock,
	faMessage,
	faPaintBrush,
	faPalette,
	faUser,
	faWindowRestore,
	faWrench,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faWrench,
	faUser,
	faMessage,
	faWindowRestore,
	faColumns,
	faBell,
	faFilter,
	faEyeSlash,
	faBroom,
	faLock,
	faDownload,
	faPalette,
	faPaintBrush,
	faCode,
	)

	const SettingsModalContent = {
	components: {
	VerticalTabSwitcher,

	DataImportExportTab,
	MutesAndBlocksTab,
	NotificationsTab,
	FilteringTab,
	SecurityTab,
	ProfileTab,
	GeneralTab,
	PostsTab,
	ComposingTab,
	ClutterTab,
	LayoutTab,
	AppearanceTab,
	StyleTab,
	DeveloperTab,
	OldThemeTab,
	},
	computed: {
	isLoggedIn() {
	return !!this.$store.state.users.currentUser
	},
	open() {
	return useInterfaceStore().settingsModalState !== 'hidden'
	},
	bodyLock() {
	return useInterfaceStore().settingsModalState === 'visible'
	},
	expertLevel() {
	return this.$store.state.config.expertLevel
	},
	},
	data() {
	return {
	navCollapsed: false,
	navHideHeader: false,
	}
	},
	methods: {
	onOpen() {
	const targetTab = useInterfaceStore().settingsModalTargetTab
	// We're being told to open in specific tab
	if (targetTab) {
	const tabIndex = this.$refs.tabSwitcher.$slots
	.default()
	.findIndex((elm) => {
	return elm.props && elm.props['data-tab-name'] === targetTab
	})
	if (tabIndex >= 0) {
	this.$refs.tabSwitcher.setTab(tabIndex)
	}
	}
	// Clear the state of target tab, so that next time settings is opened
	// it doesn't force it.
	useInterfaceStore().clearSettingsModalTargetTab()
	},
	},
	mounted() {
	this.onOpen()
	},
	watch: {
	open: function (value) {
	if (value) this.onOpen()
	},
	},
	}

	export default SettingsModalContent
	diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
	index d7a157dabb..b1c22afd4e 100644
	--- a/src/components/settings_modal/tabs/appearance_tab.js
	+++ b/src/components/settings_modal/tabs/appearance_tab.js
	@@ -1,498 +1,500 @@
	import { mapActions } from 'pinia'

	import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js'
	import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
	+import BooleanSetting from '../helpers/boolean_setting.vue'
	+import ChoiceSetting from '../helpers/choice_setting.vue'
	+import FloatSetting from '../helpers/float_setting.vue'
	+import IntegerSetting from '../helpers/integer_setting.vue'
	+import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
	+import SharedComputedObject from '../helpers/shared_computed_object.js'
	+import UnitSetting from '../helpers/unit_setting.vue'
	+import Preview from './old_theme_tab/theme_preview.vue'
	+
	+import { useInstanceStore } from 'src/stores/instance.js'
	+import { normalizeThemeData, useInterfaceStore } from 'src/stores/interface'
	+
	import { newImporter } from 'src/services/export_import/export_import.js'
	import {
	adoptStyleSheets,
	createStyleSheet,
	} from 'src/services/style_setter/style_setter.js'
	import { getCssRules } from 'src/services/theme_data/css_utils.js'
	import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
	import { init } from 'src/services/theme_data/theme_data_3.service.js'
	import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
	-import { useInstanceStore } from 'src/stores/instance.js'
	-import { normalizeThemeData, useInterfaceStore } from 'src/stores/interface'
	-import BooleanSetting from '../helpers/boolean_setting.vue'
	-import ChoiceSetting from '../helpers/choice_setting.vue'
	-import FloatSetting from '../helpers/float_setting.vue'
	-import IntegerSetting from '../helpers/integer_setting.vue'
	-import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
	-import SharedComputedObject from '../helpers/shared_computed_object.js'
	-import UnitSetting from '../helpers/unit_setting.vue'
	-import Preview from './old_theme_tab/theme_preview.vue'

	const AppearanceTab = {
	data() {
	return {
	availableThemesV3: [],
	availableThemesV2: [],
	bundledPalettes: [],
	compilationCache: {},
	fileImporter: newImporter({
	accept: '.json, .iss',
	validator: this.importValidator,
	onImport: this.onImport,
	parser: this.importParser,
	onImportFailure: this.onImportFailure,
	}),
	palettesKeys: [
	'bg',
	'fg',
	'link',
	'text',
	'cRed',
	'cGreen',
	'cBlue',
	'cOrange',
	],
	userPalette: {},
	intersectionObserver: null,
	forcedRoundnessOptions: ['disabled', 'sharp', 'nonsharp', 'round'].map(
	(mode, i) => ({
	key: mode,
	value: i - 1,
	label: this.$t(
	`settings.style.themes3.hacks.forced_roundness_mode_${mode}`,
	),
	}),
	),
	underlayOverrideModes: ['none', 'opaque', 'transparent'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(
	`settings.style.themes3.hacks.underlay_override_mode_${mode}`,
	),
	})),
	backgroundUploading: false,
	background: null,
	backgroundPreview: null,
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	IntegerSetting,
	FloatSetting,
	UnitSetting,
	ProfileSettingIndicator,
	Preview,
	PaletteEditor,
	},
	mounted() {
	useInterfaceStore().getThemeData()

	const updateIndex = (resource) => {
	const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
	const currentIndex = useInstanceStore()[`${resource}sIndex`]

	let promise
	if (currentIndex) {
	promise = Promise.resolve(currentIndex)
	} else {
	promise = useInterfaceStore()[`fetch${capitalizedResource}sIndex`]()
	}

	return promise.then((index) => {
	return Object.entries(index).map(([k, func]) => [k, func()])
	})
	}

	updateIndex('style').then((styles) => {
	styles.forEach(([key, stylePromise]) =>
	stylePromise.then((data) => {
	const meta = data.find((x) => x.component === '@meta')
	this.availableThemesV3.push({
	key,
	data,
	name: meta.directives.name,
	version: 'v3',
	})
	}),
	)
	})

	updateIndex('theme').then((themes) => {
	themes.forEach(([key, themePromise]) =>
	themePromise.then((data) => {
	if (!data) {
	console.warn(`Theme with key ${key} is empty or malformed`)
	} else if (Array.isArray(data)) {
	console.warn(
	`Theme with key ${key} is a v1 theme and should be moved to static/palettes/index.json`,
	)
	} else if (!data.source && !data.theme) {
	console.warn(`Theme with key ${key} is malformed`)
	} else {
	this.availableThemesV2.push({
	key,
	data,
	name: data.name,
	version: 'v2',
	})
	}
	}),
	)
	})

	this.userPalette = useInterfaceStore().paletteDataUsed \|\| {}

	updateIndex('palette').then((bundledPalettes) => {
	bundledPalettes.forEach(([key, palettePromise]) =>
	palettePromise.then((v) => {
	let palette
	if (Array.isArray(v)) {
	const [
	name,
	bg,
	fg,
	text,
	link,
	cRed = '#FF0000',
	cGreen = '#00FF00',
	cBlue = '#0000FF',
	cOrange = '#E3FF00',
	] = v
	palette = {
	key,
	name,
	bg,
	fg,
	text,
	link,
	cRed,
	cBlue,
	cGreen,
	cOrange,
	}
	} else {
	palette = { key, ...v }
	}
	if (!palette.key.startsWith('style.')) {
	this.bundledPalettes.push(palette)
	}
	}),
	)
	})

	this.previewTheme('stock', 'v3')

	if (window.IntersectionObserver) {
	this.intersectionObserver = new IntersectionObserver(
	(entries, observer) => {
	entries.forEach(({ target, isIntersecting }) => {
	if (!isIntersecting) return
	const theme = this.availableStyles.find(
	(x) => x.key === target.dataset.themeKey,
	)
	this.$nextTick(() => {
	if (theme) this.previewTheme(theme.key, theme.version, theme.data)
	})
	observer.unobserve(target)
	})
	},
	{
	root: this.$refs.themeList,
	},
	)
	} else {
	this.availableStyles.forEach((theme) =>
	this.previewTheme(theme.key, theme.version, theme.data),
	)
	}
	},
	updated() {
	this.$nextTick(() => {
	this.$refs.themeList
	.querySelectorAll('.theme-preview')
	.forEach((node) => {
	this.intersectionObserver.observe(node)
	})
	})
	},
	watch: {
	paletteDataUsed() {
	this.userPalette = this.paletteDataUsed \|\| {}
	},
	},
	computed: {
	isDefaultBackground() {
	return !this.$store.state.users.currentUser.background_image
	},
	switchInProgress() {
	return useInterfaceStore().themeChangeInProgress
	},
	paletteDataUsed() {
	return useInterfaceStore().paletteDataUsed
	},
	availableStyles() {
	return [...this.availableThemesV3, ...this.availableThemesV2]
	},
	availablePalettes() {
	return [...this.bundledPalettes, ...this.stylePalettes]
	},
	stylePalettes() {
	const ruleset = useInterfaceStore().styleDataUsed \|\| []
	if (!ruleset && ruleset.length === 0) return
	const meta = ruleset.find((x) => x.component === '@meta')
	const result = ruleset
	.filter((x) => x.component.startsWith('@palette'))
	.map((x) => {
	const { variant, directives } = x
	const {
	bg,
	fg,
	text,
	link,
	accent,
	cRed,
	cBlue,
	cGreen,
	cOrange,
	wallpaper,
	} = directives

	const result = {
	name: `${meta.directives.name \|\| this.$t('settings.style.themes3.palette.imported')}: ${variant}`,
	key: `style.${variant.toLowerCase().replace(/ /g, '_')}`,
	bg,
	fg,
	text,
	link,
	accent,
	cRed,
	cBlue,
	cGreen,
	cOrange,
	wallpaper,
	}
	return Object.fromEntries(Object.entries(result).filter(([, v]) => v))
	})
	return result
	},
	noIntersectionObserver() {
	return !window.IntersectionObserver
	},
	instanceWallpaper() {
	useInstanceStore().instanceIdentity.background
	},
	instanceWallpaperUsed() {
	return (
	useInstanceStore().instanceIdentity.background &&
	!this.$store.state.users.currentUser.background_image
	)
	},
	customThemeVersion() {
	const { themeVersion } = useInterfaceStore()
	return themeVersion
	},
	isCustomThemeUsed() {
	const { customTheme, customThemeSource } = this.mergedConfig
	return customTheme != null \|\| customThemeSource != null
	},
	isCustomStyleUsed() {
	const { styleCustomData } = this.mergedConfig
	return styleCustomData != null
	},
	...SharedComputedObject(),
	},
	methods: {
	importFile() {
	this.fileImporter.importData()
	},
	importParser(file, filename) {
	if (filename.endsWith('.json')) {
	return JSON.parse(file)
	} else if (filename.endsWith('.iss')) {
	return deserialize(file)
	}
	},
	onImport(parsed, filename) {
	if (filename.endsWith('.json')) {
	useInterfaceStore().setThemeCustom(parsed.source \|\| parsed.theme)
	} else if (filename.endsWith('.iss')) {
	useInterfaceStore().setStyleCustom(parsed)
	}
	},
	onImportFailure(result) {
	console.error('Failure importing theme:', result)
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'settings.invalid_theme_imported',
	level: 'error',
	})
	},
	importValidator(parsed, filename) {
	if (filename.endsWith('.json')) {
	const version = parsed._pleroma_theme_version
	return version >= 1 \|\| version <= 2
	} else if (filename.endsWith('.iss')) {
	if (!Array.isArray(parsed)) return false
	if (parsed.length < 1) return false
	if (parsed.find((x) => x.component === '@meta') == null) return false
	return true
	}
	},
	isThemeActive(key) {
	return (
	key ===
	(this.mergedConfig.theme \|\| useInstanceStore().instanceIdentity.theme)
	)
	},
	isStyleActive(key) {
	return (
	key ===
	(this.mergedConfig.style \|\| useInstanceStore().instanceIdentity.style)
	)
	},
	isPaletteActive(key) {
	return (
	key ===
	(this.mergedConfig.palette \|\|
	useInstanceStore().instanceIdentity.palette)
	)
	},
	...mapActions(useInterfaceStore, ['setStyle', 'setTheme']),
	setPalette(name, data) {
	useInterfaceStore().setPalette(name)
	this.userPalette = data
	},
	setPaletteCustom(data) {
	useInterfaceStore().setPaletteCustom(data)
	this.userPalette = data
	},
	resetTheming() {
	useInterfaceStore().setStyle('stock')
	},
	previewTheme(key, version, input) {
	let theme3
	if (this.compilationCache[key]) {
	theme3 = this.compilationCache[key]
	} else if (input) {
	if (version === 'v2') {
	const style = normalizeThemeData(input)
	const theme2 = convertTheme2To3(style)
	theme3 = init({
	inputRuleset: theme2,
	ultimateBackgroundColor: '#000000',
	liteMode: true,
	debug: true,
	onlyNormalState: true,
	})
	} else if (version === 'v3') {
	const palette = input.find((x) => x.component === '@palette')
	let paletteRule
	if (palette) {
	const { directives } = palette
	directives.link = directives.link \|\| directives.accent
	directives.accent = directives.accent \|\| directives.link
	paletteRule = {
	component: 'Root',
	directives: Object.fromEntries(
	Object.entries(directives)
	.filter(([k]) => k && k !== 'name')
	.map(([k, v]) => ['--' + k, 'color \| ' + v]),
	),
	}
	} else {
	paletteRule = null
	}

	theme3 = init({
	inputRuleset: [...input, paletteRule].filter((x) => x),
	ultimateBackgroundColor: '#000000',
	liteMode: true,
	onlyNormalState: true,
	})
	}
	} else {
	theme3 = init({
	inputRuleset: [],
	ultimateBackgroundColor: '#000000',
	liteMode: true,
	onlyNormalState: true,
	})
	}

	if (!this.compilationCache[key]) {
	this.compilationCache[key] = theme3
	}

	const sheet = createStyleSheet('appearance-tab-previews', 90)
	sheet.addRule(
	[
	'#theme-preview-',
	key,
	' {\n',
	getCssRules(theme3.eager).join('\n'),
	'\n}',
	].join(''),
	)
	sheet.ready = true
	adoptStyleSheets()
	},
	uploadFile(slot, e) {
	const file = e.target.files[0]
	if (!file) {
	return
	}
	if (file.size > useInstanceStore()[slot + 'limit']) {
	const filesize = fileSizeFormatService.fileSizeFormat(file.size)
	const allowedsize = fileSizeFormatService.fileSizeFormat(
	useInstanceStore()[slot + 'limit'],
	)
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'upload.error.message',
	messageArgs: [
	this.$t('upload.error.file_too_big', {
	filesize: filesize.num,
	filesizeunit: filesize.unit,
	allowedsize: allowedsize.num,
	allowedsizeunit: allowedsize.unit,
	}),
	],
	level: 'error',
	})
	return
	}

	const reader = new FileReader()
	reader.onload = ({ target }) => {
	const img = target.result
	this[slot + 'Preview'] = img
	this[slot] = file
	}
	reader.readAsDataURL(file)
	},
	resetBackground() {
	const confirmed = window.confirm(
	this.$t('settings.reset_background_confirm'),
	)
	if (confirmed) {
	this.submitBackground('')
	}
	},
	resetUploadedBackground() {
	this.backgroundPreview = null
	},
	submitBackground(background) {
	if (!this.backgroundPreview && background !== '') {
	return
	}

	this.backgroundUploading = true
	this.$store.state.api.backendInteractor
	.updateProfileImages({ background })
	.then((data) => {
	this.$store.commit('addNewUsers', [data])
	this.$store.commit('setCurrentUser', data)
	this.backgroundPreview = null
	})
	.catch(this.displayUploadError)
	.finally(() => {
	this.backgroundUploading = false
	})
	},
	},
	}

	export default AppearanceTab
	diff --git a/src/components/settings_modal/tabs/clutter_tab.js b/src/components/settings_modal/tabs/clutter_tab.js
	index 2000711c15..eb7d64a537 100644
	--- a/src/components/settings_modal/tabs/clutter_tab.js
	+++ b/src/components/settings_modal/tabs/clutter_tab.js
	@@ -1,205 +1,206 @@
	import { mapActions, mapState } from 'pinia'
	import { v4 as uuidv4 } from 'uuid'

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import Select from 'src/components/select/select.vue'
	-import { useInstanceStore } from 'src/stores/instance.js'
	-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
	import BooleanSetting from '../helpers/boolean_setting.vue'
	import ChoiceSetting from '../helpers/choice_setting.vue'
	import HelpIndicator from '../helpers/help_indicator.vue'
	import IntegerSetting from '../helpers/integer_setting.vue'
	import SharedComputedObject from '../helpers/shared_computed_object.js'
	import UnitSetting from '../helpers/unit_setting.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
	+
	const ClutterTab = {
	components: {
	BooleanSetting,
	ChoiceSetting,
	UnitSetting,
	IntegerSetting,
	Checkbox,
	Select,
	HelpIndicator,
	},
	computed: {
	instanceSpecificPanelPresent() {
	return useInstanceStore().showInstanceSpecificPanel
	},
	...SharedComputedObject(),
	...mapState(useServerSideStorageStore, {
	muteFilters: (store) =>
	Object.entries(store.prefsStorage.simple.muteFilters),
	muteFiltersObject: (store) => store.prefsStorage.simple.muteFilters,
	}),
	...mapState(useInstanceStore, {
	blockExpirationSupported: (store) => store.featureSet.blockExpiration,
	}),
	onMuteDefaultActionLv1: {
	get() {
	const value = this.$store.state.config.onMuteDefaultAction
	if (value === 'ask' \|\| value === 'forever') {
	return value
	} else {
	return 'temporarily'
	}
	},
	set(value) {
	let realValue = value
	if (value !== 'ask' && value !== 'forever') {
	realValue = '14d'
	}
	this.$store.dispatch('setOption', {
	name: 'onMuteDefaultAction',
	value: realValue,
	})
	},
	},
	onBlockDefaultActionLv1: {
	get() {
	const value = this.$store.state.config.onBlockDefaultAction
	if (value === 'ask' \|\| value === 'forever') {
	return value
	} else {
	return 'temporarily'
	}
	},
	set(value) {
	let realValue = value
	if (value !== 'ask' && value !== 'forever') {
	realValue = '14d'
	}
	this.$store.dispatch('setOption', {
	name: 'onBlockDefaultAction',
	value: realValue,
	})
	},
	},
	muteFiltersDraft() {
	return Object.entries(this.muteFiltersDraftObject)
	},
	muteFiltersExpired() {
	const now = Date.now()
	return Object.entries(this.muteFiltersDraftObject).filter(
	([, { expires }]) => expires != null && expires <= now,
	)
	},
	},
	methods: {
	...mapActions(useServerSideStorageStore, [
	'setPreference',
	'unsetPreference',
	'pushServerSideStorage',
	]),
	getDatetimeLocal(timestamp) {
	const date = new Date(timestamp)
	const fmt = new Intl.NumberFormat('en-US', { minimumIntegerDigits: 2 })
	const datetime = [
	date.getFullYear(),
	'-',
	fmt.format(date.getMonth() + 1),
	'-',
	fmt.format(date.getDate()),
	'T',
	fmt.format(date.getHours()),
	':',
	fmt.format(date.getMinutes()),
	].join('')
	return datetime
	},
	checkRegexValid(id) {
	const filter = this.muteFiltersObject[id]
	if (filter.type !== 'regexp') return true
	if (filter.type !== 'user_regexp') return true
	const { value } = filter
	let valid = true
	try {
	new RegExp(value)
	} catch {
	valid = false
	console.error('Invalid RegExp: ' + value)
	}
	return valid
	},
	createFilter(
	filter = {
	type: 'word',
	value: '',
	name: 'New Filter',
	enabled: true,
	expires: null,
	hide: false,
	},
	) {
	const newId = uuidv4()

	filter.order = this.muteFilters.length + 2
	this.muteFiltersDraftObject[newId] = filter
	this.setPreference({ path: 'simple.muteFilters.' + newId, value: filter })
	this.pushServerSideStorage()
	},
	exportFilter(id) {
	this.exportedFilter = { ...this.muteFiltersDraftObject[id] }
	delete this.exportedFilter.order
	this.filterExporter.exportData()
	},
	importFilter() {
	this.filterImporter.importData()
	},
	copyFilter(id) {
	const filter = { ...this.muteFiltersDraftObject[id] }
	const newId = uuidv4()

	this.muteFiltersDraftObject[newId] = filter
	this.setPreference({ path: 'simple.muteFilters.' + newId, value: filter })
	this.pushServerSideStorage()
	},
	deleteFilter(id) {
	delete this.muteFiltersDraftObject[id]
	this.unsetPreference({ path: 'simple.muteFilters.' + id, value: null })
	this.pushServerSideStorage()
	},
	purgeExpiredFilters() {
	this.muteFiltersExpired.forEach(([id]) => {
	delete this.muteFiltersDraftObject[id]
	this.unsetPreference({ path: 'simple.muteFilters.' + id, value: null })
	})
	this.pushServerSideStorage()
	},
	updateFilter(id, field, value) {
	const filter = { ...this.muteFiltersDraftObject[id] }
	if (field === 'expires-never') {
	if (!value) {
	const offset = 1000 * 60 * 60 * 24 * 14 // 2 weeks
	const date = Date.now() + offset
	filter.expires = date
	} else {
	filter.expires = null
	}
	} else if (field === 'expires') {
	const parsed = Date.parse(value)
	filter.expires = parsed.valueOf()
	} else {
	filter[field] = value
	}
	this.muteFiltersDraftObject[id] = filter
	this.muteFiltersDraftDirty[id] = true
	},
	saveFilter(id) {
	this.setPreference({
	path: 'simple.muteFilters.' + id,
	value: this.muteFiltersDraftObject[id],
	})
	this.pushServerSideStorage()
	this.muteFiltersDraftDirty[id] = false
	},
	},
	// Updating nested properties
	watch: {
	replyVisibility() {
	this.$store.dispatch('queueFlushAll')
	},
	},
	}

	export default ClutterTab
	diff --git a/src/components/settings_modal/tabs/composing_tab.js b/src/components/settings_modal/tabs/composing_tab.js
	index 45e8f223c9..ba3ddaca86 100644
	--- a/src/components/settings_modal/tabs/composing_tab.js
	+++ b/src/components/settings_modal/tabs/composing_tab.js
	@@ -1,194 +1,196 @@
	import { mapState } from 'vuex'

	import FontControl from 'src/components/font_control/font_control.vue'
	import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
	import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
	import Select from 'src/components/select/select.vue'
	-import localeService from 'src/services/locale/locale.service.js'
	-import { cacheKey, clearCache, emojiCacheKey } from 'src/services/sw/sw.js'
	-import { useInstanceStore } from 'src/stores/instance.js'
	import BooleanSetting from '../helpers/boolean_setting.vue'
	import ChoiceSetting from '../helpers/choice_setting.vue'
	import FloatSetting from '../helpers/float_setting.vue'
	import IntegerSetting from '../helpers/integer_setting.vue'
	import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
	import SharedComputedObject from '../helpers/shared_computed_object.js'
	import UnitSetting from '../helpers/unit_setting.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	+import localeService from 'src/services/locale/locale.service.js'
	+import { cacheKey, clearCache, emojiCacheKey } from 'src/services/sw/sw.js'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faDatabase,
	faGlobe,
	faMessage,
	faPenAlt,
	faSliders,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faGlobe, faMessage, faPenAlt, faDatabase, faSliders)

	const ComposingTab = {
	props: {
	parentCollapsed: {
	required: true,
	type: Boolean,
	},
	},
	data() {
	return {
	subjectLineOptions: ['email', 'noop', 'masto'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(
	`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`,
	),
	})),
	conversationDisplayOptions: ['tree', 'linear'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.conversation_display_${mode}`),
	})),
	absoluteTime12hOptions: ['24h', '12h'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.absolute_time_format_12h_${mode}`),
	})),
	conversationOtherRepliesButtonOptions: ['below', 'inside'].map(
	(mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.conversation_other_replies_button_${mode}`),
	}),
	),
	mentionLinkDisplayOptions: ['short', 'full_for_remote', 'full'].map(
	(mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.mention_link_display_${mode}`),
	}),
	),
	userPopoverAvatarActionOptions: ['close', 'zoom', 'open'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.user_popover_avatar_action_${mode}`),
	})),
	unsavedPostActionOptions: ['save', 'discard', 'confirm'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.unsaved_post_action_${mode}`),
	})),
	loopSilentAvailable:
	// Firefox
	Object.getOwnPropertyDescriptor(
	HTMLVideoElement.prototype,
	'mozHasAudio',
	) \|\|
	// Chrome-likes
	Object.getOwnPropertyDescriptor(
	HTMLMediaElement.prototype,
	'webkitAudioDecodedByteCount',
	) \|\|
	// Future spec, still not supported in Nightly 63 as of 08/2018
	Object.getOwnPropertyDescriptor(
	HTMLMediaElement.prototype,
	'audioTracks',
	),
	emailLanguage: this.$store.state.users.currentUser.language \|\| [''],
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	IntegerSetting,
	FloatSetting,
	UnitSetting,
	InterfaceLanguageSwitcher,
	ProfileSettingIndicator,
	ScopeSelector,
	Select,
	FontControl,
	},
	computed: {
	postFormats() {
	return useInstanceStore().postFormats \|\| []
	},
	postContentOptions() {
	return this.postFormats.map((format) => ({
	key: format,
	value: format,
	label: this.$t(`post_status.content_type["${format}"]`),
	}))
	},
	language: {
	get: function () {
	return this.$store.getters.mergedConfig.interfaceLanguage
	},
	set: function (val) {
	this.$store.dispatch('setOption', {
	name: 'interfaceLanguage',
	value: val,
	})
	},
	},
	...SharedComputedObject(),
	...mapState(useInstanceStore, {
	blockExpirationSupported: (store) => store.featureSet.blockExpiration,
	}),
	},
	methods: {
	changeDefaultScope(value) {
	this.$store.dispatch('setProfileOption', { name: 'defaultScope', value })
	},
	clearCache(key) {
	clearCache(key)
	.then(() => {
	this.$store.dispatch('settingsSaved', { success: true })
	})
	.catch((error) => {
	this.$store.dispatch('settingsSaved', { error })
	})
	},
	tooSmall() {
	this.$emit('tooSmall')
	},
	tooBig() {
	this.$emit('tooBig')
	},
	getNavMode() {
	return this.$refs.tabSwitcher.getNavMode()
	},
	clearAssetCache() {
	this.clearCache(cacheKey)
	},
	clearEmojiCache() {
	this.clearCache(emojiCacheKey)
	},
	updateProfile() {
	const params = {
	language: localeService.internalToBackendLocaleMulti(
	this.emailLanguage,
	),
	}

	this.$store.state.api.backendInteractor
	.updateProfile({ params })
	.then((user) => {
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	})
	},
	updateFont(key, value) {
	this.$store.dispatch('setOption', {
	name: 'theme3hacks',
	value: {
	...this.mergedConfig.theme3hacks,
	fonts: {
	...this.mergedConfig.theme3hacks.fonts,
	[key]: value,
	},
	},
	})
	},
	},
	}

	export default ComposingTab
	diff --git a/src/components/settings_modal/tabs/data_import_export_tab.js b/src/components/settings_modal/tabs/data_import_export_tab.js
	index dcd63416ba..7a2bf1d4f0 100644
	--- a/src/components/settings_modal/tabs/data_import_export_tab.js
	+++ b/src/components/settings_modal/tabs/data_import_export_tab.js
	@@ -1,111 +1,112 @@
	import { mapState } from 'vuex'

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import Exporter from 'src/components/exporter/exporter.vue'
	import Importer from 'src/components/importer/importer.vue'
	+
	import { useOAuthTokensStore } from 'src/stores/oauth_tokens'

	const DataImportExportTab = {
	data() {
	return {
	activeTab: 'profile',
	newDomainToMute: '',
	listBackupsError: false,
	addBackupError: false,
	addedBackup: false,
	backups: [],
	}
	},
	created() {
	useOAuthTokensStore().fetchTokens()
	this.fetchBackups()
	},
	components: {
	Importer,
	Exporter,
	Checkbox,
	},
	computed: {
	...mapState({
	backendInteractor: (state) => state.api.backendInteractor,
	user: (state) => state.users.currentUser,
	}),
	},
	methods: {
	getFollowsContent() {
	return this.backendInteractor
	.exportFriends({ id: this.user.id })
	.then(this.generateExportableUsersContent)
	},
	getBlocksContent() {
	return this.backendInteractor
	.fetchBlocks()
	.then(this.generateExportableUsersContent)
	},
	getMutesContent() {
	return this.backendInteractor
	.fetchMutes()
	.then(this.generateExportableUsersContent)
	},
	importFollows(file) {
	return this.backendInteractor.importFollows({ file }).then((status) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	importBlocks(file) {
	return this.backendInteractor.importBlocks({ file }).then((status) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	importMutes(file) {
	return this.backendInteractor.importMutes({ file }).then((status) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	generateExportableUsersContent(users) {
	// Get addresses
	return users
	.map((user) => {
	// check is it's a local user
	if (user && user.is_local) {
	// append the instance address
	return user.screen_name + '@' + location.hostname
	}
	return user.screen_name
	})
	.join('\n')
	},
	addBackup() {
	this.$store.state.api.backendInteractor
	.addBackup()
	.then(() => {
	this.addedBackup = true
	this.addBackupError = false
	})
	.catch((error) => {
	this.addedBackup = false
	this.addBackupError = error
	})
	.then(() => this.fetchBackups())
	},
	fetchBackups() {
	this.$store.state.api.backendInteractor
	.listBackups()
	.then((res) => {
	this.backups = res
	this.listBackupsError = false
	})
	.catch((error) => {
	this.listBackupsError = error.error
	})
	},
	},
	}

	export default DataImportExportTab
	diff --git a/src/components/settings_modal/tabs/developer_tab.js b/src/components/settings_modal/tabs/developer_tab.js
	index e90ffbcb69..b500d2f031 100644
	--- a/src/components/settings_modal/tabs/developer_tab.js
	+++ b/src/components/settings_modal/tabs/developer_tab.js
	@@ -1,46 +1,48 @@
	-import { cacheKey, clearCache, emojiCacheKey } from 'src/services/sw/sw.js'
	-import { useInstanceStore } from 'src/stores/instance.js'
	import BooleanSetting from '../helpers/boolean_setting.vue'
	import SharedComputedObject from '../helpers/shared_computed_object.js'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	+import { cacheKey, clearCache, emojiCacheKey } from 'src/services/sw/sw.js'
	+
	const pleromaFeCommitUrl =
	'https://git.pleroma.social/pleroma/pleroma-fe/commit/'

	const VersionTab = {
	data() {
	const instance = useInstanceStore()
	return {
	backendVersion: instance.backendVersion,
	backendRepository: instance.backendRepository,
	frontendVersion: instance.frontendVersion,
	}
	},
	components: {
	BooleanSetting,
	},
	computed: {
	frontendVersionLink() {
	return pleromaFeCommitUrl + this.frontendVersion
	},
	...SharedComputedObject(),
	},
	methods: {
	clearAssetCache() {
	this.clearCache(cacheKey)
	},
	clearEmojiCache() {
	this.clearCache(emojiCacheKey)
	},
	clearCache(key) {
	clearCache(key)
	.then(() => {
	this.$store.dispatch('settingsSaved', { success: true })
	})
	.catch((error) => {
	this.$store.dispatch('settingsSaved', { error })
	})
	},
	},
	}

	export default VersionTab
	diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
	index 705a01af53..0e6c6c7254 100644
	--- a/src/components/settings_modal/tabs/filtering_tab.js
	+++ b/src/components/settings_modal/tabs/filtering_tab.js
	@@ -1,271 +1,273 @@
	import { cloneDeep } from 'lodash'
	import { mapActions, mapState } from 'pinia'
	import { v4 as uuidv4 } from 'uuid'

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import Select from 'src/components/select/select.vue'
	-import {
	- newExporter,
	- newImporter,
	-} from 'src/services/export_import/export_import.js'
	-import { useInstanceStore } from 'src/stores/instance.js'
	-import { useInterfaceStore } from 'src/stores/interface'
	-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
	import BooleanSetting from '../helpers/boolean_setting.vue'
	import ChoiceSetting from '../helpers/choice_setting.vue'
	import HelpIndicator from '../helpers/help_indicator.vue'
	import IntegerSetting from '../helpers/integer_setting.vue'
	import SharedComputedObject from '../helpers/shared_computed_object.js'
	import UnitSetting from '../helpers/unit_setting.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInterfaceStore } from 'src/stores/interface'
	+import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
	+
	+import {
	+ newExporter,
	+ newImporter,
	+} from 'src/services/export_import/export_import.js'
	+
	const SUPPORTED_TYPES = new Set(['word', 'regexp', 'user', 'user_regexp'])

	const FilteringTab = {
	data() {
	return {
	replyVisibilityOptions: ['all', 'following', 'self'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.reply_visibility_${mode}`),
	})),
	muteBlockLv1Options: ['ask', 'forever', 'temporarily'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`user_card.mute_block_${mode}`),
	})),
	muteFiltersDraftObject: cloneDeep(
	useServerSideStorageStore().prefsStorage.simple.muteFilters,
	),
	muteFiltersDraftDirty: Object.fromEntries(
	Object.entries(
	useServerSideStorageStore().prefsStorage.simple.muteFilters,
	).map(([k]) => [k, false]),
	),
	exportedFilter: null,
	filterImporter: newImporter({
	validator(parsed) {
	if (Array.isArray(parsed)) return false
	if (!SUPPORTED_TYPES.has(parsed.type)) return false
	return true
	},
	onImport: (data) => {
	const {
	enabled = true,
	expires = null,
	hide = false,
	name = '',
	value = '',
	} = data

	this.createFilter({
	enabled,
	expires,
	hide,
	name,
	value,
	})
	},
	onImportFailure(result) {
	console.error('Failure importing filter:', result)
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'settings.filter.import_failure',
	level: 'error',
	})
	},
	}),
	filterExporter: newExporter({
	filename: 'pleromafe_mute-filter',
	getExportedObject: () => this.exportedFilter,
	}),
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	UnitSetting,
	IntegerSetting,
	Checkbox,
	Select,
	HelpIndicator,
	},
	computed: {
	instanceSpecificPanelPresent() {
	return useInstanceStore().instanceIdentity.showInstanceSpecificPanel
	},
	...SharedComputedObject(),
	...mapState(useServerSideStorageStore, {
	muteFilters: (store) =>
	Object.entries(store.prefsStorage.simple.muteFilters),
	muteFiltersObject: (store) => store.prefsStorage.simple.muteFilters,
	}),
	...mapState(useInstanceStore, {
	blockExpirationSupported: (store) => store.featureSet.blockExpiration,
	}),
	onMuteDefaultActionLv1: {
	get() {
	const value = this.$store.state.config.onMuteDefaultAction
	if (value === 'ask' \|\| value === 'forever') {
	return value
	} else {
	return 'temporarily'
	}
	},
	set(value) {
	let realValue = value
	if (value !== 'ask' && value !== 'forever') {
	realValue = '14d'
	}
	this.$store.dispatch('setOption', {
	name: 'onMuteDefaultAction',
	value: realValue,
	})
	},
	},
	onBlockDefaultActionLv1: {
	get() {
	const value = this.$store.state.config.onBlockDefaultAction
	if (value === 'ask' \|\| value === 'forever') {
	return value
	} else {
	return 'temporarily'
	}
	},
	set(value) {
	let realValue = value
	if (value !== 'ask' && value !== 'forever') {
	realValue = '14d'
	}
	this.$store.dispatch('setOption', {
	name: 'onBlockDefaultAction',
	value: realValue,
	})
	},
	},
	muteFiltersDraft() {
	return Object.entries(this.muteFiltersDraftObject)
	},
	muteFiltersExpired() {
	const now = Date.now()
	return Object.entries(this.muteFiltersDraftObject).filter(
	([, { expires }]) => expires != null && expires <= now,
	)
	},
	},
	methods: {
	...mapActions(useServerSideStorageStore, [
	'setPreference',
	'unsetPreference',
	'pushServerSideStorage',
	]),
	getDatetimeLocal(timestamp) {
	const date = new Date(timestamp)
	const fmt = new Intl.NumberFormat('en-US', { minimumIntegerDigits: 2 })
	const datetime = [
	date.getFullYear(),
	'-',
	fmt.format(date.getMonth() + 1),
	'-',
	fmt.format(date.getDate()),
	'T',
	fmt.format(date.getHours()),
	':',
	fmt.format(date.getMinutes()),
	].join('')
	return datetime
	},
	checkRegexValid(id) {
	const filter = this.muteFiltersObject[id]
	if (filter.type !== 'regexp') return true
	if (filter.type !== 'user_regexp') return true
	const { value } = filter
	let valid = true
	try {
	new RegExp(value)
	} catch {
	valid = false
	console.error('Invalid RegExp: ' + value)
	}
	return valid
	},
	createFilter(
	filter = {
	type: 'word',
	value: '',
	name: 'New Filter',
	enabled: true,
	expires: null,
	hide: false,
	},
	) {
	const newId = uuidv4()

	filter.order = this.muteFilters.length + 2
	this.muteFiltersDraftObject[newId] = filter
	this.setPreference({ path: 'simple.muteFilters.' + newId, value: filter })
	this.pushServerSideStorage()
	},
	exportFilter(id) {
	this.exportedFilter = { ...this.muteFiltersDraftObject[id] }
	delete this.exportedFilter.order
	this.filterExporter.exportData()
	},
	importFilter() {
	this.filterImporter.importData()
	},
	copyFilter(id) {
	const filter = { ...this.muteFiltersDraftObject[id] }
	const newId = uuidv4()

	this.muteFiltersDraftObject[newId] = filter
	this.setPreference({ path: 'simple.muteFilters.' + newId, value: filter })
	this.pushServerSideStorage()
	},
	deleteFilter(id) {
	delete this.muteFiltersDraftObject[id]
	this.unsetPreference({ path: 'simple.muteFilters.' + id, value: null })
	this.pushServerSideStorage()
	},
	purgeExpiredFilters() {
	this.muteFiltersExpired.forEach(([id]) => {
	delete this.muteFiltersDraftObject[id]
	this.unsetPreference({ path: 'simple.muteFilters.' + id, value: null })
	})
	this.pushServerSideStorage()
	},
	updateFilter(id, field, value) {
	const filter = { ...this.muteFiltersDraftObject[id] }
	if (field === 'expires-never') {
	if (!value) {
	const offset = 1000 * 60 * 60 * 24 * 14 // 2 weeks
	const date = Date.now() + offset
	filter.expires = date
	} else {
	filter.expires = null
	}
	} else if (field === 'expires') {
	const parsed = Date.parse(value)
	filter.expires = parsed.valueOf()
	} else {
	filter[field] = value
	}
	this.muteFiltersDraftObject[id] = filter
	this.muteFiltersDraftDirty[id] = true
	},
	saveFilter(id) {
	this.setPreference({
	path: 'simple.muteFilters.' + id,
	value: this.muteFiltersDraftObject[id],
	})
	this.pushServerSideStorage()
	this.muteFiltersDraftDirty[id] = false
	},
	},
	// Updating nested properties
	watch: {
	replyVisibility() {
	this.$store.dispatch('queueFlushAll')
	},
	},
	}

	export default FilteringTab
	diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
	index 65c2af283e..3f2530278c 100644
	--- a/src/components/settings_modal/tabs/general_tab.js
	+++ b/src/components/settings_modal/tabs/general_tab.js
	@@ -1,87 +1,89 @@
	import { mapState } from 'pinia'

	import FontControl from 'src/components/font_control/font_control.vue'
	import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
	-import localeService from 'src/services/locale/locale.service.js'
	-import { useInstanceStore } from 'src/stores/instance.js'
	import BooleanSetting from '../helpers/boolean_setting.vue'
	import ChoiceSetting from '../helpers/choice_setting.vue'
	import FloatSetting from '../helpers/float_setting.vue'
	import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
	import SharedComputedObject from '../helpers/shared_computed_object.js'
	import UnitSetting from '../helpers/unit_setting.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	+import localeService from 'src/services/locale/locale.service.js'
	+
	const GeneralTab = {
	props: {
	parentCollapsed: {
	required: true,
	type: Boolean,
	},
	},
	data() {
	return {
	absoluteTime12hOptions: ['24h', '12h'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.absolute_time_format_12h_${mode}`),
	})),
	emailLanguage: this.$store.state.users.currentUser.language \|\| [''],
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	UnitSetting,
	FloatSetting,
	FontControl,
	InterfaceLanguageSwitcher,
	ProfileSettingIndicator,
	},
	computed: {
	language: {
	get: function () {
	return this.$store.getters.mergedConfig.interfaceLanguage
	},
	set: function (val) {
	this.$store.dispatch('setOption', {
	name: 'interfaceLanguage',
	value: val,
	})
	},
	},
	...SharedComputedObject(),
	...mapState(useInstanceStore, {
	blockExpirationSupported: (store) => store.featureSet.blockExpiration,
	}),
	},
	methods: {
	updateProfile() {
	const params = {
	language: localeService.internalToBackendLocaleMulti(
	this.emailLanguage,
	),
	}

	this.$store.state.api.backendInteractor
	.updateProfile({ params })
	.then((user) => {
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	})
	},
	updateFont(key, value) {
	this.$store.dispatch('setOption', {
	name: 'theme3hacks',
	value: {
	...this.mergedConfig.theme3hacks,
	fonts: {
	...this.mergedConfig.theme3hacks.fonts,
	[key]: value,
	},
	},
	})
	},
	},
	}

	export default GeneralTab
	diff --git a/src/components/settings_modal/tabs/layout_tab.js b/src/components/settings_modal/tabs/layout_tab.js
	index 6de7121277..9accd19794 100644
	--- a/src/components/settings_modal/tabs/layout_tab.js
	+++ b/src/components/settings_modal/tabs/layout_tab.js
	@@ -1,57 +1,58 @@
	-import { useInstanceStore } from 'src/stores/instance.js'
	import BooleanSetting from '../helpers/boolean_setting.vue'
	import ChoiceSetting from '../helpers/choice_setting.vue'
	import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
	import SharedComputedObject from '../helpers/shared_computed_object.js'
	import UnitSetting from '../helpers/unit_setting.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	const GeneralTab = {
	props: {
	parentCollapsed: {
	required: true,
	type: Boolean,
	},
	},
	data() {
	return {
	thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(
	(mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.third_column_mode_${mode}`),
	}),
	),
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	UnitSetting,
	ProfileSettingIndicator,
	},
	computed: {
	postFormats() {
	return useInstanceStore().featureSet.postFormats \|\| []
	},
	instanceShoutboxPresent() {
	return useInstanceStore().featureSet.shoutAvailable
	},
	columns() {
	const mode = this.$store.getters.mergedConfig.thirdColumnMode

	const notif = mode === 'none' ? [] : ['notifs']

	if (
	this.$store.getters.mergedConfig.sidebarRight \|\|
	mode === 'postform'
	) {
	return [...notif, 'content', 'sidebar']
	} else {
	return ['sidebar', 'content', ...notif]
	}
	},
	...SharedComputedObject(),
	},
	}

	export default GeneralTab
	diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
	index 0e5e401f3e..f6eeb0613e 100644
	--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
	+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
	@@ -1,154 +1,155 @@
	import get from 'lodash/get'
	import map from 'lodash/map'
	import reject from 'lodash/reject'

	import withLoadMore from 'src/components/../hocs/with_load_more/with_load_more'
	import withSubscription from 'src/components/../hocs/with_subscription/with_subscription'
	import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
	import BlockCard from 'src/components/block_card/block_card.vue'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue'
	import MuteCard from 'src/components/mute_card/mute_card.vue'
	import ProgressButton from 'src/components/progress_button/progress_button.vue'
	import SelectableList from 'src/components/selectable_list/selectable_list.vue'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	+
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useOAuthTokensStore } from 'src/stores/oauth_tokens'

	const BlockList = withLoadMore({
	fetch: (props, $store) => $store.dispatch('fetchBlocks'),
	select: (props, $store) =>
	get($store.state.users.currentUser, 'blockIds', []),
	destroy: () => {
	/* no-op */
	},
	childPropName: 'items',
	})(SelectableList)

	const MuteList = withLoadMore({
	fetch: (props, $store) => $store.dispatch('fetchMutes'),
	select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
	destroy: () => {
	/* no-op */
	},
	childPropName: 'items',
	})(SelectableList)

	const DomainMuteList = withSubscription({
	fetch: (props, $store) => $store.dispatch('fetchDomainMutes'),
	select: (props, $store) =>
	get($store.state.users.currentUser, 'domainMutes', []),
	childPropName: 'items',
	})(SelectableList)

	const MutesAndBlocks = {
	data() {
	return {
	activeTab: 'profile',
	}
	},
	created() {
	useOAuthTokensStore().fetchTokens()
	this.$store.dispatch('getKnownDomains')
	},
	components: {
	TabSwitcher,
	BlockList,
	MuteList,
	DomainMuteList,
	BlockCard,
	MuteCard,
	DomainMuteCard,
	ProgressButton,
	Autosuggest,
	Checkbox,
	},
	computed: {
	knownDomains() {
	return useInstanceStore().knownDomains
	},
	user() {
	return this.$store.state.users.currentUser
	},
	},
	methods: {
	importFollows(file) {
	return this.$store.state.api.backendInteractor
	.importFollows({ file })
	.then((status) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	importBlocks(file) {
	return this.$store.state.api.backendInteractor
	.importBlocks({ file })
	.then((status) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	generateExportableUsersContent(users) {
	// Get addresses
	return users
	.map((user) => {
	// check is it's a local user
	if (user && user.is_local) {
	// append the instance address
	return user.screen_name + '@' + location.hostname
	}
	return user.screen_name
	})
	.join('\n')
	},
	activateTab(tabName) {
	this.activeTab = tabName
	},
	filterUnblockedUsers(userIds) {
	return reject(userIds, (userId) => {
	const relationship = this.$store.getters.relationship(this.userId)
	return relationship.blocking \|\| userId === this.user.id
	})
	},
	filterUnMutedUsers(userIds) {
	return reject(userIds, (userId) => {
	const relationship = this.$store.getters.relationship(this.userId)
	return relationship.muting \|\| userId === this.user.id
	})
	},
	queryUserIds(query) {
	return this.$store
	.dispatch('searchUsers', { query })
	.then((users) => map(users, 'id'))
	},
	blockUsers(ids) {
	return this.$store.dispatch('blockUsers', ids)
	},
	unblockUsers(ids) {
	return this.$store.dispatch('unblockUsers', ids)
	},
	muteUsers(ids) {
	return this.$store.dispatch('muteUsers', ids)
	},
	unmuteUsers(ids) {
	return this.$store.dispatch('unmuteUsers', ids)
	},
	filterUnMutedDomains(urls) {
	return urls.filter((url) => !this.user.domainMutes.includes(url))
	},
	queryKnownDomains(query) {
	return new Promise((resolve) => {
	resolve(
	this.knownDomains.filter((url) => url.toLowerCase().includes(query)),
	)
	})
	},
	unmuteDomains(domains) {
	return this.$store.dispatch('unmuteDomains', domains)
	},
	},
	}

	export default MutesAndBlocks
	diff --git a/src/components/settings_modal/tabs/old_theme_tab/old_theme_tab.js b/src/components/settings_modal/tabs/old_theme_tab/old_theme_tab.js
	index 669abc9a37..2f3032ba7f 100644
	--- a/src/components/settings_modal/tabs/old_theme_tab/old_theme_tab.js
	+++ b/src/components/settings_modal/tabs/old_theme_tab/old_theme_tab.js
	@@ -1,839 +1,841 @@
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ColorInput from 'src/components/color_input/color_input.vue'
	import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
	import FontControl from 'src/components/font_control/font_control.vue'
	import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
	import RangeInput from 'src/components/range_input/range_input.vue'
	import Select from 'src/components/select/select.vue'
	import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	+import Preview from './theme_preview.vue'
	+
	+import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInterfaceStore } from 'src/stores/interface'
	+
	import {
	getContrastRatioLayers,
	hex2rgb,
	relativeLuminance,
	rgb2hex,
	} from 'src/services/color_convert/color_convert.js'
	import {
	newExporter,
	newImporter,
	} from 'src/services/export_import/export_import.js'
	import {
	adoptStyleSheets,
	createStyleSheet,
	} from 'src/services/style_setter/style_setter.js'
	import {
	getCssRules,
	getScopedVersion,
	} from 'src/services/theme_data/css_utils.js'
	import { SLOT_INHERITANCE } from 'src/services/theme_data/pleromafe.js'
	import {
	CURRENT_VERSION,
	colors2to3,
	DEFAULT_SHADOWS,
	generateColors,
	generateFonts,
	generateRadii,
	generateShadows,
	getLayers,
	getOpacitySlot,
	OPACITIES,
	shadows2to3,
	} from 'src/services/theme_data/theme_data.service.js'
	import { init } from 'src/services/theme_data/theme_data_3.service.js'
	import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
	-import { useInstanceStore } from 'src/stores/instance.js'
	-import { useInterfaceStore } from 'src/stores/interface'
	-import Preview from './theme_preview.vue'

	// List of color values used in v1
	const v1OnlyNames = [
	'bg',
	'fg',
	'text',
	'link',
	'cRed',
	'cGreen',
	'cBlue',
	'cOrange',
	].map((_) => _ + 'ColorLocal')

	const colorConvert = (color) => {
	if (color.startsWith('--') \|\| color === 'transparent') {
	return color
	} else {
	return hex2rgb(color)
	}
	}

	export default {
	data() {
	return {
	themeImporter: newImporter({
	validator: this.importValidator,
	onImport: this.onImport,
	onImportFailure: this.onImportFailure,
	}),
	themeExporter: newExporter({
	filename: 'pleroma_theme',
	getExportedObject: () => this.exportedTheme,
	}),
	availableStyles: [],
	selected: '',
	selectedTheme: this.$store.getters.mergedConfig.theme,
	themeWarning: undefined,
	tempImportFile: undefined,
	engineVersion: 0,

	previewTheme: {},

	shadowsInvalid: true,
	colorsInvalid: true,
	radiiInvalid: true,

	keepColor: false,
	keepShadows: false,
	keepOpacity: false,
	keepRoundness: false,
	keepFonts: false,

	...Object.keys(SLOT_INHERITANCE)
	.map((key) => [key, ''])
	.reduce(
	(acc, [key, val]) => ({ ...acc, [key + 'ColorLocal']: val }),
	{},
	),

	...Object.keys(OPACITIES)
	.map((key) => [key, ''])
	.reduce(
	(acc, [key, val]) => ({ ...acc, [key + 'OpacityLocal']: val }),
	{},
	),

	shadowSelected: undefined,
	shadowsLocal: {},
	fontsLocal: {},

	btnRadiusLocal: '',
	inputRadiusLocal: '',
	checkboxRadiusLocal: '',
	panelRadiusLocal: '',
	avatarRadiusLocal: '',
	avatarAltRadiusLocal: '',
	attachmentRadiusLocal: '',
	tooltipRadiusLocal: '',
	chatMessageRadiusLocal: '',
	}
	},
	created() {
	const currentIndex = useInstanceStore().themesIndex

	let promise
	if (currentIndex) {
	promise = Promise.resolve(currentIndex)
	} else {
	promise = useInterfaceStore().fetchThemesIndex()
	}

	promise.then((themesIndex) => {
	Object.values(themesIndex).forEach((themeFunc) => {
	themeFunc().then(
	(themeData) => themeData && this.availableStyles.push(themeData),
	)
	})
	})
	},
	mounted() {
	if (typeof this.shadowSelected === 'undefined') {
	this.shadowSelected = this.shadowsAvailable[0]
	}
	},
	computed: {
	themeWarningHelp() {
	if (!this.themeWarning) return
	const t = this.$t
	const pre = 'settings.style.switcher.help.'
	const { origin, themeEngineVersion, type, noActionsPossible } =
	this.themeWarning
	if (origin === 'file') {
	// Loaded v2 theme from file
	if (themeEngineVersion === 2 && type === 'wrong_version') {
	return t(pre + 'v2_imported')
	}
	if (themeEngineVersion > CURRENT_VERSION) {
	return (
	t(pre + 'future_version_imported') +
	' ' +
	(noActionsPossible
	? t(pre + 'snapshot_missing')
	: t(pre + 'snapshot_present'))
	)
	}
	if (themeEngineVersion < CURRENT_VERSION) {
	return (
	t(pre + 'future_version_imported') +
	' ' +
	(noActionsPossible
	? t(pre + 'snapshot_missing')
	: t(pre + 'snapshot_present'))
	)
	}
	} else if (origin === 'localStorage') {
	if (type === 'snapshot_source_mismatch') {
	return t(pre + 'snapshot_source_mismatch')
	}
	// FE upgraded from v2
	if (themeEngineVersion === 2) {
	return t(pre + 'upgraded_from_v2')
	}
	// Admin downgraded FE
	if (themeEngineVersion > CURRENT_VERSION) {
	return (
	t(pre + 'fe_downgraded') +
	' ' +
	(noActionsPossible
	? t(pre + 'migration_snapshot_ok')
	: t(pre + 'migration_snapshot_gone'))
	)
	}
	// Admin upgraded FE
	if (themeEngineVersion < CURRENT_VERSION) {
	return (
	t(pre + 'fe_upgraded') +
	' ' +
	(noActionsPossible
	? t(pre + 'migration_snapshot_ok')
	: t(pre + 'migration_snapshot_gone'))
	)
	}
	}
	},
	selectedVersion() {
	return Array.isArray(this.selectedTheme) ? 1 : 2
	},
	currentColors() {
	return Object.keys(SLOT_INHERITANCE)
	.map((key) => [key, this[key + 'ColorLocal']])
	.reduce((acc, [key, val]) => ({ ...acc, [key]: val }), {})
	},
	currentOpacity() {
	return Object.keys(OPACITIES)
	.map((key) => [key, this[key + 'OpacityLocal']])
	.reduce((acc, [key, val]) => ({ ...acc, [key]: val }), {})
	},
	currentRadii() {
	return {
	btn: this.btnRadiusLocal,
	input: this.inputRadiusLocal,
	checkbox: this.checkboxRadiusLocal,
	panel: this.panelRadiusLocal,
	avatar: this.avatarRadiusLocal,
	avatarAlt: this.avatarAltRadiusLocal,
	tooltip: this.tooltipRadiusLocal,
	attachment: this.attachmentRadiusLocal,
	chatMessage: this.chatMessageRadiusLocal,
	}
	},
	// This needs optimization maybe
	previewContrast() {
	try {
	if (!this.previewTheme.colors.bg) return {}
	const colors = this.previewTheme.colors
	const opacity = this.previewTheme.opacity
	if (!colors.bg) return {}
	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 colorsConverted = Object.entries(colors).reduce(
	(acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }),
	{},
	)

	const ratios = Object.entries(SLOT_INHERITANCE).reduce(
	(acc, [key, value]) => {
	const slotIsBaseText = key === 'text' \|\| key === 'link'
	const slotIsText =
	slotIsBaseText \|\|
	(typeof value === 'object' && value !== null && value.textColor)
	if (!slotIsText) return acc
	const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
	const background = variant \|\| layer
	const opacitySlot = getOpacitySlot(background)
	const textColors = [
	key,
	...(background === 'bg'
	? ['cRed', 'cGreen', 'cBlue', 'cOrange']
	: []),
	]

	const layers = getLayers(
	layer,
	variant \|\| layer,
	opacitySlot,
	colorsConverted,
	opacity,
	)

	// Temporary patch for null-y value errors
	if (layers.flat().some((v) => v == null)) return acc

	return {
	...acc,
	...textColors.reduce((acc, textColorKey) => {
	const newKey = slotIsBaseText
	? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
	: textColorKey
	return {
	...acc,
	[newKey]: getContrastRatioLayers(
	colorsConverted[textColorKey],
	layers,
	colorsConverted[textColorKey],
	),
	}
	}, {}),
	}
	},
	{},
	)

	return Object.entries(ratios).reduce((acc, [k, v]) => {
	acc[k] = hints(v)
	return acc
	}, {})
	} catch (e) {
	console.warn('Failure computing contrasts', e)
	return {}
	}
	},
	themeDataUsed() {
	return useInterfaceStore().themeDataUsed
	},
	shadowsAvailable() {
	return Object.keys(DEFAULT_SHADOWS).sort()
	},
	currentShadowOverriden: {
	get() {
	return !!this.currentShadow
	},
	set(val) {
	if (val) {
	this.shadowsLocal[this.shadowSelected] = (
	this.currentShadowFallback \|\| []
	).map((s) => ({
	name: null,
	x: 0,
	y: 0,
	blur: 0,
	spread: 0,
	inset: false,
	color: '#000000',
	alpha: 1,
	...s,
	}))
	} else {
	delete this.shadowsLocal[this.shadowSelected]
	}
	},
	},
	currentShadowFallback() {
	return (this.previewTheme.shadows \|\| {})[this.shadowSelected]
	},
	currentShadow: {
	get() {
	return this.shadowsLocal[this.shadowSelected]
	},
	set(v) {
	this.shadowsLocal[this.shadowSelected] = v
	},
	},
	themeValid() {
	return !this.shadowsInvalid && !this.colorsInvalid && !this.radiiInvalid
	},
	exportedTheme() {
	const saveEverything =
	!this.keepFonts &&
	!this.keepShadows &&
	!this.keepOpacity &&
	!this.keepRoundness &&
	!this.keepColor

	const source = {
	themeEngineVersion: CURRENT_VERSION,
	}

	if (this.keepFonts \|\| saveEverything) {
	source.fonts = this.fontsLocal
	}
	if (this.keepShadows \|\| saveEverything) {
	source.shadows = this.shadowsLocal
	}
	if (this.keepOpacity \|\| saveEverything) {
	source.opacity = this.currentOpacity
	}
	if (this.keepColor \|\| saveEverything) {
	source.colors = this.currentColors
	}
	if (this.keepRoundness \|\| saveEverything) {
	source.radii = this.currentRadii
	}

	const theme = {
	themeEngineVersion: CURRENT_VERSION,
	...this.previewTheme,
	}

	return {
	// To separate from other random JSON files and possible future source formats
	_pleroma_theme_version: 2,
	theme,
	source,
	}
	},
	isActive() {
	const tabSwitcher = this.$parent
	return tabSwitcher ? tabSwitcher.isActive('theme') : false
	},
	},
	components: {
	ColorInput,
	OpacityInput,
	RangeInput,
	ContrastRatio,
	ShadowControl,
	FontControl,
	TabSwitcher,
	Preview,
	Checkbox,
	Select,
	},
	methods: {
	loadTheme(
	{ theme, source, _pleroma_theme_version: fileVersion },
	origin,
	forceUseSource = false,
	) {
	this.dismissWarning()
	const version =
	origin === 'localStorage' && !theme.colors ? 'l1' : fileVersion
	const snapshotEngineVersion = (theme \|\| {}).themeEngineVersion
	const themeEngineVersion = (source \|\| {}).themeEngineVersion \|\| 2
	const versionsMatch = themeEngineVersion === CURRENT_VERSION
	const sourceSnapshotMismatch =
	theme !== undefined &&
	source !== undefined &&
	themeEngineVersion !== snapshotEngineVersion
	// Force loading of source if user requested it or if snapshot
	// is unavailable
	const forcedSourceLoad = (source && forceUseSource) \|\| !theme
	if (
	!(versionsMatch && !sourceSnapshotMismatch) &&
	!forcedSourceLoad &&
	version !== 'l1' &&
	origin !== 'defaults'
	) {
	if (sourceSnapshotMismatch && origin === 'localStorage') {
	this.themeWarning = {
	origin,
	themeEngineVersion,
	type: 'snapshot_source_mismatch',
	}
	} else if (!theme) {
	this.themeWarning = {
	origin,
	noActionsPossible: true,
	themeEngineVersion,
	type: 'no_snapshot_old_version',
	}
	} else if (!versionsMatch) {
	this.themeWarning = {
	origin,
	noActionsPossible: !source,
	themeEngineVersion,
	type: 'wrong_version',
	}
	}
	}
	this.normalizeLocalState(theme, version, source, forcedSourceLoad)
	},
	forceLoadLocalStorage() {
	this.loadThemeFromLocalStorage(true)
	},
	dismissWarning() {
	this.themeWarning = undefined
	this.tempImportFile = undefined
	},
	forceLoad() {
	const { origin } = this.themeWarning
	switch (origin) {
	case 'localStorage':
	this.loadThemeFromLocalStorage(true)
	break
	case 'file':
	this.onImport(this.tempImportFile, true)
	break
	}
	this.dismissWarning()
	},
	forceSnapshot() {
	const { origin } = this.themeWarning
	switch (origin) {
	case 'localStorage':
	this.loadThemeFromLocalStorage(false, true)
	break
	case 'file':
	console.error('Forcing snapshot from file is not supported yet')
	break
	}
	this.dismissWarning()
	},
	loadThemeFromLocalStorage(confirmLoadSource = false) {
	const theme = this.themeDataUsed?.source
	if (theme) {
	this.loadTheme(
	{
	theme,
	},
	'localStorage',
	confirmLoadSource,
	)
	}
	},
	setCustomTheme() {
	useInterfaceStore().setThemeV2({
	customTheme: {
	ignore: true,
	themeFileVersion: this.selectedVersion,
	themeEngineVersion: CURRENT_VERSION,
	...this.previewTheme,
	},
	customThemeSource: {
	themeFileVersion: this.selectedVersion,
	themeEngineVersion: CURRENT_VERSION,
	shadows: this.shadowsLocal,
	fonts: this.fontsLocal,
	opacity: this.currentOpacity,
	colors: this.currentColors,
	radii: this.currentRadii,
	},
	})
	},
	updatePreviewColors() {
	const result = generateColors({
	opacity: this.currentOpacity,
	colors: this.currentColors,
	})
	this.previewTheme.colors = result.theme.colors
	this.previewTheme.opacity = result.theme.opacity
	},
	updatePreviewShadows() {
	this.previewTheme.shadows = generateShadows(
	{
	shadows: this.shadowsLocal,
	opacity: this.previewTheme.opacity,
	themeEngineVersion: this.engineVersion,
	},
	this.previewTheme.colors,
	relativeLuminance(this.previewTheme.colors.bg) < 0.5 ? 1 : -1,
	).theme.shadows
	},
	importTheme() {
	this.themeImporter.importData()
	},
	exportTheme() {
	this.themeExporter.exportData()
	},
	onImport(parsed, forceSource = false) {
	this.tempImportFile = parsed
	this.loadTheme(parsed, 'file', forceSource)
	},
	onImportFailure() {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'settings.invalid_theme_imported',
	level: 'error',
	})
	},
	importValidator(parsed) {
	const version = parsed._pleroma_theme_version
	return version >= 1 \|\| version <= 2
	},
	clearAll() {
	this.loadThemeFromLocalStorage()
	},

	// Clears all the extra stuff when loading V1 theme
	clearV1() {
	Object.keys(this.$data)
	.filter((_) => _.endsWith('ColorLocal') \|\| _.endsWith('OpacityLocal'))
	.filter((_) => !v1OnlyNames.includes(_))
	.forEach((key) => {
	this.$data[key] = undefined
	})
	},

	clearRoundness() {
	Object.keys(this.$data)
	.filter((_) => _.endsWith('RadiusLocal'))
	.forEach((key) => {
	this.$data[key] = undefined
	})
	},

	clearOpacity() {
	Object.keys(this.$data)
	.filter((_) => _.endsWith('OpacityLocal'))
	.forEach((key) => {
	this.$data[key] = undefined
	})
	},

	clearShadows() {
	this.shadowsLocal = {}
	},

	clearFonts() {
	this.fontsLocal = {}
	},

	/**
	* This applies stored theme data onto form. Supports three versions of data:
	* v3 (version >= 3) - newest version of themes which supports snapshots for better compatiblity
	* v2 (version = 2) - newer version of themes.
	* v1 (version = 1) - older version of themes (import from file)
	* v1l (version = l1) - older version of theme (load from local storage)
	* v1 and v1l differ because of way themes were stored/exported.
	* @param {Object} theme - theme data (snapshot)
	* @param {Number} version - version of data. 0 means try to guess based on data. "l1" means v1, locastorage type
	* @param {Object} source - theme source - this will be used if compatible
	* @param {Boolean} source - by default source won't be used if version doesn't match since it might render differently
	* this allows importing source anyway
	*/
	normalizeLocalState(theme, version = 0, source, forceSource = false) {
	let input
	if (typeof source !== 'undefined') {
	if (forceSource \|\| source?.themeEngineVersion === CURRENT_VERSION) {
	input = source
	version = source.themeEngineVersion
	} else {
	input = theme
	}
	} else {
	input = theme
	}

	const radii = input.radii \|\| input
	const opacity = input.opacity
	const shadows = input.shadows \|\| {}
	const fonts = input.fonts \|\| {}
	const colors = !input.themeEngineVersion
	? colors2to3(input.colors \|\| input)
	: input.colors \|\| input

	if (version === 0) {
	if (input.version) version = input.version
	// Old v1 naming: fg is text, btn is foreground
	if (
	typeof colors.text === 'undefined' &&
	typeof colors.fg !== 'undefined'
	) {
	version = 1
	}
	// New v2 naming: text is text, fg is foreground
	if (
	typeof colors.text !== 'undefined' &&
	typeof colors.fg !== 'undefined'
	) {
	version = 2
	}
	}

	this.engineVersion = version

	// Stuff that differs between V1 and V2
	if (version === 1) {
	this.fgColorLocal = rgb2hex(colors.btn)
	this.textColorLocal = rgb2hex(colors.fg)
	}

	if (!this.keepColor) {
	this.clearV1()
	const keys = new Set(version !== 1 ? Object.keys(SLOT_INHERITANCE) : [])
	if (version === 1 \|\| version === 'l1') {
	keys
	.add('bg')
	.add('link')
	.add('cRed')
	.add('cBlue')
	.add('cGreen')
	.add('cOrange')
	}

	keys.forEach((key) => {
	const color = colors[key]
	const hex = rgb2hex(colors[key])
	this[key + 'ColorLocal'] = hex === '#aN' ? color : hex
	})
	}

	if (opacity && !this.keepOpacity) {
	this.clearOpacity()
	Object.entries(opacity).forEach(([k, v]) => {
	if (typeof v === 'undefined' \|\| v === null \|\| Number.isNaN(v)) return
	this[k + 'OpacityLocal'] = v
	})
	}

	if (!this.keepRoundness) {
	this.clearRoundness()
	Object.entries(radii).forEach(([k, v]) => {
	// 'Radius' is kept mostly for v1->v2 localstorage transition
	const key = k.endsWith('Radius') ? k.split('Radius')[0] : k
	this[key + 'RadiusLocal'] = v
	})
	}

	if (!this.keepShadows) {
	this.clearShadows()
	if (version === 2) {
	this.shadowsLocal = shadows2to3(shadows, this.previewTheme.opacity)
	} else {
	this.shadowsLocal = shadows
	}
	this.updatePreviewColors()
	this.updatePreviewShadows()
	this.shadowSelected = this.shadowsAvailable[0]
	}

	if (!this.keepFonts) {
	this.clearFonts()
	this.fontsLocal = fonts
	}
	},
	updateTheme3Preview() {
	const theme2 = convertTheme2To3(this.previewTheme)
	const theme3 = init({
	inputRuleset: theme2,
	ultimateBackgroundColor: '#000000',
	liteMode: true,
	})

	const sheet = createStyleSheet('theme-tab-overall-preview', 90)
	const rule = getScopedVersion(getCssRules(theme3.eager), '&').join('\n')

	sheet.clear()
	sheet.addRule('#theme-preview {\n' + rule + '\n}')
	sheet.ready = true
	adoptStyleSheets()
	},
	},
	watch: {
	themeDataUsed() {
	this.loadThemeFromLocalStorage()
	},
	currentRadii() {
	try {
	this.previewTheme.radii = generateRadii({
	radii: this.currentRadii,
	}).theme.radii
	this.radiiInvalid = false
	} catch (e) {
	this.radiiInvalid = true
	console.warn(e)
	}
	},
	shadowsLocal: {
	handler() {
	try {
	this.updatePreviewShadows()
	this.shadowsInvalid = false
	} catch (e) {
	this.shadowsInvalid = true
	console.warn(e)
	}
	},
	deep: true,
	},
	fontsLocal: {
	handler() {
	try {
	this.previewTheme.fonts = generateFonts({
	fonts: this.fontsLocal,
	}).theme.fonts
	this.fontsInvalid = false
	} catch (e) {
	this.fontsInvalid = true
	console.warn(e)
	}
	},
	deep: true,
	},
	currentColors() {
	try {
	this.updatePreviewColors()
	this.colorsInvalid = false
	} catch (e) {
	this.colorsInvalid = true
	console.warn(e)
	}
	},
	currentOpacity() {
	try {
	this.updatePreviewColors()
	} catch (e) {
	console.warn(e)
	}
	},
	selected() {
	this.selectedTheme = Object.entries(this.availableStyles).find(
	([, s]) => {
	if (Array.isArray(s)) {
	return s[0] === this.selected
	} else {
	return s.name === this.selected
	}
	},
	)[1]
	},
	selectedTheme() {
	this.dismissWarning()
	if (this.selectedVersion === 1) {
	if (!this.keepRoundness) {
	this.clearRoundness()
	}

	if (!this.keepShadows) {
	this.clearShadows()
	}

	if (!this.keepOpacity) {
	this.clearOpacity()
	}

	if (!this.keepColor) {
	this.clearV1()

	this.bgColorLocal = this.selectedTheme[1]
	this.fgColorLocal = this.selectedTheme[2]
	this.textColorLocal = this.selectedTheme[3]
	this.linkColorLocal = this.selectedTheme[4]
	this.cRedColorLocal = this.selectedTheme[5]
	this.cGreenColorLocal = this.selectedTheme[6]
	this.cBlueColorLocal = this.selectedTheme[7]
	this.cOrangeColorLocal = this.selectedTheme[8]
	}
	} else if (this.selectedVersion >= 2) {
	this.normalizeLocalState(
	this.selectedTheme.theme,
	2,
	this.selectedTheme.source,
	)
	}
	},
	},
	}
	diff --git a/src/components/settings_modal/tabs/security_tab/security_tab.js b/src/components/settings_modal/tabs/security_tab/security_tab.js
	index 26db25a5e8..c24ff8b6fd 100644
	--- a/src/components/settings_modal/tabs/security_tab/security_tab.js
	+++ b/src/components/settings_modal/tabs/security_tab/security_tab.js
	@@ -1,171 +1,173 @@
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ProgressButton from 'src/components/progress_button/progress_button.vue'
	-import localeService from 'src/services/locale/locale.service.js'
	+import Mfa from './mfa.vue'
	+
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useOAuthTokensStore } from 'src/stores/oauth_tokens'
	-import Mfa from './mfa.vue'
	+
	+import localeService from 'src/services/locale/locale.service.js'

	const SecurityTab = {
	data() {
	return {
	newEmail: '',
	changeEmailError: false,
	changeEmailPassword: '',
	changedEmail: false,
	deletingAccount: false,
	deleteAccountConfirmPasswordInput: '',
	deleteAccountError: false,
	changePasswordInputs: ['', '', ''],
	changedPassword: false,
	changePasswordError: false,
	moveAccountTarget: '',
	moveAccountPassword: '',
	movedAccount: false,
	moveAccountError: false,
	aliases: [],
	listAliasesError: false,
	addAliasTarget: '',
	addedAlias: false,
	addAliasError: false,
	}
	},
	created() {
	useOAuthTokensStore().fetchTokens()
	this.fetchAliases()
	},
	components: {
	ProgressButton,
	Mfa,
	Checkbox,
	},
	computed: {
	user() {
	return this.$store.state.users.currentUser
	},
	pleromaExtensionsAvailable() {
	return useInstanceStore().featureSet.pleromaExtensionsAvailable
	},
	oauthTokens() {
	return useOAuthTokensStore().tokens.map((oauthToken) => {
	return {
	id: oauthToken.id,
	appName: oauthToken.app_name,
	validUntil: new Date(oauthToken.valid_until).toLocaleDateString(
	localeService.internalToBrowserLocale(this.$i18n.locale),
	),
	}
	})
	},
	},
	methods: {
	confirmDelete() {
	this.deletingAccount = true
	},
	deleteAccount() {
	this.$store.state.api.backendInteractor
	.deleteAccount({ password: this.deleteAccountConfirmPasswordInput })
	.then((res) => {
	if (res.status === 'success') {
	this.$store.dispatch('logout')
	this.$router.push({ name: 'root' })
	} else {
	this.deleteAccountError = res.error
	}
	})
	},
	changePassword() {
	const params = {
	password: this.changePasswordInputs[0],
	newPassword: this.changePasswordInputs[1],
	newPasswordConfirmation: this.changePasswordInputs[2],
	}
	this.$store.state.api.backendInteractor
	.changePassword(params)
	.then((res) => {
	if (res.status === 'success') {
	this.changedPassword = true
	this.changePasswordError = false
	this.logout()
	} else {
	this.changedPassword = false
	this.changePasswordError = res.error
	}
	})
	},
	changeEmail() {
	const params = {
	email: this.newEmail,
	password: this.changeEmailPassword,
	}
	this.$store.state.api.backendInteractor
	.changeEmail(params)
	.then((res) => {
	if (res.status === 'success') {
	this.changedEmail = true
	this.changeEmailError = false
	} else {
	this.changedEmail = false
	this.changeEmailError = res.error
	}
	})
	},
	moveAccount() {
	const params = {
	targetAccount: this.moveAccountTarget,
	password: this.moveAccountPassword,
	}
	this.$store.state.api.backendInteractor
	.moveAccount(params)
	.then((res) => {
	if (res.status === 'success') {
	this.movedAccount = true
	this.moveAccountError = false
	} else {
	this.movedAccount = false
	this.moveAccountError = res.error
	}
	})
	},
	removeAlias(alias) {
	this.$store.state.api.backendInteractor
	.deleteAlias({ alias })
	.then(() => this.fetchAliases())
	},
	addAlias() {
	this.$store.state.api.backendInteractor
	.addAlias({ alias: this.addAliasTarget })
	.then(() => {
	this.addedAlias = true
	this.addAliasError = false
	this.addAliasTarget = ''
	})
	.catch((error) => {
	this.addedAlias = false
	this.addAliasError = error
	})
	.then(() => this.fetchAliases())
	},
	fetchAliases() {
	this.$store.state.api.backendInteractor
	.listAliases()
	.then((res) => {
	this.aliases = res.aliases
	this.listAliasesError = false
	})
	.catch((error) => {
	this.listAliasesError = error.error
	})
	},
	logout() {
	this.$store.dispatch('logout')
	this.$router.replace('/')
	},
	revokeToken(id) {
	if (window.confirm(`${this.$i18n.t('settings.revoke_token')}?`)) {
	useOAuthTokensStore().revokeToken(id)
	}
	},
	},
	}

	export default SecurityTab
	diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
	index 7fa55761a8..6c23669994 100644
	--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
	+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
	@@ -1,932 +1,934 @@
	import { get, set, throttle, unset } from 'lodash'
	import {
	computed,
	getCurrentInstance,
	provide,
	reactive,
	ref,
	watch,
	} from 'vue'

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ColorInput from 'src/components/color_input/color_input.vue'
	import ComponentPreview from 'src/components/component_preview/component_preview.vue'
	import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
	import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
	import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
	import RoundnessInput from 'src/components/roundness_input/roundness_input.vue'
	import Select from 'src/components/select/select.vue'
	import SelectMotion from 'src/components/select/select_motion.vue'
	import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	import Tooltip from 'src/components/tooltip/tooltip.vue'
	+import StringSetting from '../../helpers/string_setting.vue'
	+import Preview from '../old_theme_tab/theme_preview.vue'
	+import VirtualDirectivesTab from './virtual_directives_tab.vue'
	+
	+import { useInterfaceStore } from 'src/stores/interface'
	+
	import {
	getContrastRatio,
	hex2rgb,
	rgb2hex,
	} from 'src/services/color_convert/color_convert.js'
	import {
	newExporter,
	newImporter,
	} from 'src/services/export_import/export_import.js'
	import {
	adoptStyleSheets,
	createStyleSheet,
	} from 'src/services/style_setter/style_setter.js'
	import { getCssRules } from 'src/services/theme_data/css_utils.js'
	import {
	deserialize,
	deserializeShadow,
	} from 'src/services/theme_data/iss_deserializer.js'
	import { serialize } from 'src/services/theme_data/iss_serializer.js'
	import {
	findColor,
	init,
	} from 'src/services/theme_data/theme_data_3.service.js'
	-import { useInterfaceStore } from 'src/stores/interface'
	-import StringSetting from '../../helpers/string_setting.vue'
	-import Preview from '../old_theme_tab/theme_preview.vue'
	-import VirtualDirectivesTab from './virtual_directives_tab.vue'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faArrowsRotate,
	faCheck,
	faFile,
	faFloppyDisk,
	faFolderOpen,
	} from '@fortawesome/free-solid-svg-icons'

	// helper for debugging
	// const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x))

	// helper to make states comparable
	const normalizeStates = (states) =>
	['normal', ...(states?.filter((x) => x !== 'normal') \|\| [])].join(':')

	library.add(faFile, faFloppyDisk, faFolderOpen, faArrowsRotate, faCheck)

	export default {
	components: {
	Select,
	SelectMotion,
	Checkbox,
	Tooltip,
	StringSetting,
	ComponentPreview,
	TabSwitcher,
	ShadowControl,
	ColorInput,
	PaletteEditor,
	OpacityInput,
	RoundnessInput,
	ContrastRatio,
	Preview,
	VirtualDirectivesTab,
	},
	setup() {
	const exports = {}
	const interfaceStore = useInterfaceStore()
	// All rules that are made by editor
	const allEditedRules = ref(interfaceStore.styleDataUsed \|\| {})
	const styleDataUsed = computed(() => interfaceStore.styleDataUsed)

	watch(
	[styleDataUsed],
	() => {
	onImport(interfaceStore.styleDataUsed)
	},
	{ once: true },
	)

	exports.isActive = computed(() => {
	const tabSwitcher = getCurrentInstance().parent.ctx
	return tabSwitcher ? tabSwitcher.isActive('style') : false
	})

	// ## Meta stuff
	exports.name = ref('')
	exports.author = ref('')
	exports.license = ref('')
	exports.website = ref('')

	const metaOut = computed(() => {
	return [
	'@meta {',
	` name: ${exports.name.value};`,
	` author: ${exports.author.value};`,
	` license: ${exports.license.value};`,
	` website: ${exports.website.value};`,
	'}',
	].join('\n')
	})

	const metaRule = computed(() => ({
	component: '@meta',
	directives: {
	name: exports.name.value,
	author: exports.author.value,
	license: exports.license.value,
	website: exports.website.value,
	},
	}))

	// ## Palette stuff
	const palettes = reactive([
	{
	name: 'default',
	bg: '#121a24',
	fg: '#182230',
	text: '#b9b9ba',
	link: '#d8a070',
	accent: '#d8a070',
	cRed: '#FF0000',
	cBlue: '#0095ff',
	cGreen: '#0fa00f',
	cOrange: '#ffa500',
	},
	{
	name: 'light',
	bg: '#f2f6f9',
	fg: '#d6dfed',
	text: '#304055',
	underlay: '#5d6086',
	accent: '#f55b1b',
	cBlue: '#0095ff',
	cRed: '#d31014',
	cGreen: '#0fa00f',
	cOrange: '#ffa500',
	border: '#d8e6f9',
	},
	])
	exports.palettes = palettes

	// This is kinda dumb but you cannot "replace" reactive() object
	// and so v-model simply fails when you try to chage (increase only?)
	// length of the array. Since linter complains about mutating modelValue
	// inside SelectMotion, the next best thing is to just wipe existing array
	// and replace it with new one.

	const onPalettesUpdate = (e) => {
	palettes.splice(0, palettes.length)
	palettes.push(...e)
	}
	exports.onPalettesUpdate = onPalettesUpdate

	const selectedPaletteId = ref(0)
	const selectedPalette = computed({
	get() {
	return palettes[selectedPaletteId.value]
	},
	set(newPalette) {
	palettes[selectedPaletteId.value] = newPalette
	},
	})
	exports.selectedPaletteId = selectedPaletteId
	exports.selectedPalette = selectedPalette
	provide('selectedPalette', selectedPalette)

	watch([selectedPalette], () => updateOverallPreview())

	exports.getNewPalette = () => ({
	name: 'new palette',
	bg: '#121a24',
	fg: '#182230',
	text: '#b9b9ba',
	link: '#d8a070',
	accent: '#d8a070',
	cRed: '#FF0000',
	cBlue: '#0095ff',
	cGreen: '#0fa00f',
	cOrange: '#ffa500',
	})

	// Raw format
	const palettesRule = computed(() => {
	return palettes.map((palette) => {
	const { name, ...rest } = palette
	return {
	component: '@palette',
	variant: name,
	directives: Object.entries(rest)
	.filter(([k, v]) => v && k)
	.reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {}),
	}
	})
	})

	// Text format
	const palettesOut = computed(() => {
	return palettes
	.map(({ name, ...palette }) => {
	const entries = Object.entries(palette)
	.filter(([k, v]) => v && k)
	.map(([slot, data]) => ` ${slot}: ${data};`)
	.join('\n')

	return `@palette.${name} {\n${entries}\n}`
	})
	.join('\n\n')
	})

	// ## Components stuff
	// Getting existing components
	const componentsContext = import.meta.glob(
	['/src/*/.style.js', '/src/*/.style.json'],
	{ eager: true },
	)
	const componentKeysAll = Object.keys(componentsContext)
	const componentsMap = new Map(
	componentKeysAll
	.map((key) => [key, componentsContext[key].default])
	.filter(
	([, component]) => !component.virtual && !component.notEditable,
	),
	)
	exports.componentsMap = componentsMap
	const componentKeys = [...componentsMap.keys()]
	exports.componentKeys = componentKeys

	// Component list and selection
	const selectedComponentKey = ref(componentsMap.keys().next().value)
	exports.selectedComponentKey = selectedComponentKey

	const selectedComponent = computed(() =>
	componentsMap.get(selectedComponentKey.value),
	)
	const selectedComponentName = computed(() => selectedComponent.value.name)

	// Selection basis
	exports.selectedComponentVariants = computed(() => {
	return Object.keys({
	normal: null,
	...(selectedComponent.value.variants \|\| {}),
	})
	})
	exports.selectedComponentStates = computed(() => {
	const all = Object.keys({
	normal: null,
	...(selectedComponent.value.states \|\| {}),
	})
	return all.filter((x) => x !== 'normal')
	})

	// selection
	const selectedVariant = ref('normal')
	exports.selectedVariant = selectedVariant
	const selectedState = reactive(new Set())
	exports.selectedState = selectedState
	exports.updateSelectedStates = (state, v) => {
	if (v) {
	selectedState.add(state)
	} else {
	selectedState.delete(state)
	}
	}

	// Reset variant and state on component change
	const updateSelectedComponent = () => {
	selectedVariant.value = 'normal'
	selectedState.clear()
	}

	watch(selectedComponentName, updateSelectedComponent)

	// ### Rules stuff aka meat and potatoes
	// The native structure of separate rules and the child -> parent
	// relation isn't very convenient for editor, we replace the array
	// and child -> parent structure with map and parent -> child structure
	const rulesToEditorFriendly = (rules, root = {}) =>
	rules.reduce((acc, rule) => {
	const { parent: rParent, component: rComponent } = rule
	const parent = rParent ?? rule
	const hasChildren = !!rParent
	const child = hasChildren ? rule : null

	const {
	component: pComponent,
	variant: pVariant = 'normal',
	state: pState = [], // no relation to Intel CPUs whatsoever
	} = parent

	const pPath = `${hasChildren ? pComponent : rComponent}.${pVariant}.${normalizeStates(pState)}`

	let output = get(acc, pPath)
	if (!output) {
	set(acc, pPath, {})
	output = get(acc, pPath)
	}

	if (hasChildren) {
	output._children = output._children ?? {}
	const {
	component: cComponent,
	variant: cVariant = 'normal',
	state: cState = [],
	directives,
	} = child

	const cPath = `${cComponent}.${cVariant}.${normalizeStates(cState)}`
	set(output._children, cPath, { directives })
	} else {
	output.directives = parent.directives
	}
	return acc
	}, root)

	const editorFriendlyFallbackStructure = computed(() => {
	const root = {}

	componentKeys.forEach((componentKey) => {
	const componentValue = componentsMap.get(componentKey)
	const { defaultRules, name } = componentValue
	rulesToEditorFriendly(
	defaultRules.map((rule) => ({ ...rule, component: name })),
	root,
	)
	})

	return root
	})

	// Checking whether component can support some "directives" which
	// are actually virtual subcomponents, i.e. Text, Link etc
	exports.componentHas = (subComponent) => {
	return !!selectedComponent.value.validInnerComponents?.find(
	(x) => x === subComponent,
	)
	}

	// Path for lodash's get and set
	const getPath = (component, directive) => {
	const pathSuffix = component
	? `._children.${component}.normal.normal`
	: ''
	const path = `${selectedComponentName.value}.${selectedVariant.value}.${normalizeStates([...selectedState])}${pathSuffix}.directives.${directive}`
	return path
	}

	// Templates for directives
	const isElementPresent = (component, directive, defaultValue = '') =>
	computed({
	get() {
	return (
	get(allEditedRules.value, getPath(component, directive)) != null
	)
	},
	set(value) {
	if (value) {
	const fallback = get(
	editorFriendlyFallbackStructure.value,
	getPath(component, directive),
	)
	set(
	allEditedRules.value,
	getPath(component, directive),
	fallback ?? defaultValue,
	)
	} else {
	unset(allEditedRules.value, getPath(component, directive))
	}
	exports.updateOverallPreview()
	},
	})

	const getEditedElement = (component, directive, postProcess = (x) => x) =>
	computed({
	get() {
	let usedRule
	const fallback = editorFriendlyFallbackStructure.value
	const real = allEditedRules.value
	const path = getPath(component, directive)

	usedRule = get(real, path) // get real
	if (usedRule === '') {
	return usedRule
	}
	if (!usedRule) {
	usedRule = get(fallback, path)
	}

	return postProcess(usedRule)
	},
	set(value) {
	if (value != null) {
	set(allEditedRules.value, getPath(component, directive), value)
	} else {
	unset(allEditedRules.value, getPath(component, directive))
	}
	exports.updateOverallPreview()
	},
	})

	// All the editable stuff for the component
	exports.editedBackgroundColor = getEditedElement(null, 'background')
	exports.isBackgroundColorPresent = isElementPresent(
	null,
	'background',
	'#FFFFFF',
	)
	exports.editedOpacity = getEditedElement(null, 'opacity')
	exports.isOpacityPresent = isElementPresent(null, 'opacity', 1)
	exports.editedRoundness = getEditedElement(null, 'roundness')
	exports.isRoundnessPresent = isElementPresent(null, 'roundness', '0')
	exports.editedTextColor = getEditedElement('Text', 'textColor')
	exports.isTextColorPresent = isElementPresent(
	'Text',
	'textColor',
	'#000000',
	)
	exports.editedTextAuto = getEditedElement('Text', 'textAuto')
	exports.isTextAutoPresent = isElementPresent('Text', 'textAuto', '#000000')
	exports.editedLinkColor = getEditedElement('Link', 'textColor')
	exports.isLinkColorPresent = isElementPresent(
	'Link',
	'textColor',
	'#000080',
	)
	exports.editedIconColor = getEditedElement('Icon', 'textColor')
	exports.isIconColorPresent = isElementPresent(
	'Icon',
	'textColor',
	'#909090',
	)
	exports.editedBorderColor = getEditedElement('Border', 'textColor')
	exports.isBorderColorPresent = isElementPresent(
	'Border',
	'textColor',
	'#909090',
	)

	const getContrast = (bg, text) => {
	try {
	const bgRgb = hex2rgb(bg)
	const textRgb = hex2rgb(text)

	const ratio = getContrastRatio(bgRgb, textRgb)
	return {
	// TODO this ideally should be part of <ContractRatio />
	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,
	}
	} catch (e) {
	console.warn('Failure computing contrast', e)
	return { error: e }
	}
	}

	const normalizeShadows = (shadows) => {
	return shadows?.map((shadow) => {
	if (typeof shadow === 'object') {
	return shadow
	}
	if (typeof shadow === 'string') {
	try {
	return deserializeShadow(shadow)
	} catch (e) {
	console.warn(e)
	return shadow
	}
	}
	return null
	})
	}
	provide('normalizeShadows', normalizeShadows)

	// Shadow is partially edited outside the ShadowControl
	// for better space utilization
	const editedShadow = getEditedElement(null, 'shadow', normalizeShadows)
	exports.editedShadow = editedShadow
	const editedSubShadowId = ref(null)
	exports.editedSubShadowId = editedSubShadowId
	const editedSubShadow = computed(() => {
	if (editedShadow.value == null \|\| editedSubShadowId.value == null)
	return null
	return editedShadow.value[editedSubShadowId.value]
	})
	exports.editedSubShadow = editedSubShadow
	exports.isShadowPresent = isElementPresent(null, 'shadow', [])
	exports.onSubShadow = (id) => {
	if (id != null) {
	editedSubShadowId.value = id
	} else {
	editedSubShadow.value = null
	}
	}
	exports.updateSubShadow = (axis, value) => {
	if (!editedSubShadow.value \|\| editedSubShadowId.value == null) return
	const newEditedShadow = [...editedShadow.value]

	newEditedShadow[editedSubShadowId.value] = {
	...newEditedShadow[editedSubShadowId.value],
	[axis]: value,
	}

	editedShadow.value = newEditedShadow
	}
	exports.isShadowTabOpen = ref(false)
	exports.onTabSwitch = (tab) => {
	exports.isShadowTabOpen.value = tab === 'shadow'
	}

	// component preview
	exports.editorHintStyle = computed(() => {
	const editorHint = selectedComponent.value.editor
	const styles = []
	if (editorHint && Object.keys(editorHint).length > 0) {
	if (editorHint.aspect != null) {
	styles.push(`aspect-ratio: ${editorHint.aspect} !important;`)
	}
	if (editorHint.border != null) {
	styles.push(`border-width: ${editorHint.border}px !important;`)
	}
	}
	return styles.join('; ')
	})

	const editorFriendlyToOriginal = computed(() => {
	const resultRules = []

	const convert = (component, data = {}, parent) => {
	const variants = Object.entries(data \|\| {})

	variants.forEach(([variant, variantData]) => {
	const states = Object.entries(variantData)

	states.forEach(([jointState, stateData]) => {
	const state = jointState.split(/:/g)
	const result = {
	component,
	variant,
	state,
	directives: stateData.directives \|\| {},
	}

	if (parent) {
	result.parent = {
	component: parent,
	}
	}

	resultRules.push(result)

	// Currently we only support single depth for simplicity's sake
	if (!parent) {
	Object.entries(stateData._children \|\| {}).forEach(
	([cName, child]) => convert(cName, child, component),
	)
	}
	})
	})
	}

	;[...componentsMap.values()].forEach(({ name }) => {
	convert(name, allEditedRules.value[name])
	})

	return resultRules
	})

	const allCustomVirtualDirectives = [...componentsMap.values()]
	.map((c) => {
	return c.defaultRules
	.filter((c) => c.component === 'Root')
	.map((x) => Object.entries(x.directives))
	.flat()
	})
	.filter((x) => x)
	.flat()
	.map(([name, value]) => {
	const [valType, valVal] = value.split('\|')
	return {
	name: name.substring(2),
	valType: valType?.trim(),
	value: valVal?.trim(),
	}
	})

	const virtualDirectives = ref(allCustomVirtualDirectives)
	exports.virtualDirectives = virtualDirectives
	exports.updateVirtualDirectives = (value) => {
	virtualDirectives.value = value
	}

	// Raw format
	const virtualDirectivesRule = computed(() => ({
	component: 'Root',
	directives: Object.fromEntries(
	virtualDirectives.value.map((vd) => [
	`--${vd.name}`,
	`${vd.valType} \| ${vd.value}`,
	]),
	),
	}))

	// Text format
	const virtualDirectivesOut = computed(() => {
	return [
	'Root {',
	...virtualDirectives.value
	.filter((vd) => vd.name && vd.valType && vd.value)
	.map((vd) => ` --${vd.name}: ${vd.valType} \| ${vd.value};`),
	'}',
	].join('\n')
	})

	exports.computeColor = (color) => {
	let computedColor
	try {
	computedColor = findColor(color, {
	dynamicVars: dynamicVars.value,
	staticVars: staticVars.value,
	})
	if (computedColor) {
	return rgb2hex(computedColor)
	}
	} catch (e) {
	console.warn(e)
	}
	return null
	}
	provide('computeColor', exports.computeColor)

	exports.contrast = computed(() => {
	return getContrast(
	exports.computeColor(previewColors.value.background),
	exports.computeColor(previewColors.value.text),
	)
	})

	// ## Export and Import
	const styleExporter = newExporter({
	filename: () => exports.name.value ?? 'pleroma_theme',
	mime: 'text/plain',
	extension: 'iss',
	getExportedObject: () => exportStyleData.value,
	})

	const onImport = (parsed) => {
	const editorComponents = parsed.filter((x) => x.component.startsWith('@'))
	const rootComponent = parsed.find((x) => x.component === 'Root')
	const rules = parsed.filter(
	(x) => !x.component.startsWith('@') && x.component !== 'Root',
	)
	const metaIn = editorComponents.find(
	(x) => x.component === '@meta',
	).directives
	const palettesIn = editorComponents.filter(
	(x) => x.component === '@palette',
	)

	exports.name.value = metaIn.name
	exports.license.value = metaIn.license
	exports.author.value = metaIn.author
	exports.website.value = metaIn.website

	const newVirtualDirectives = Object.entries(rootComponent.directives).map(
	([name, value]) => {
	const [valType, valVal] = value.split('\|').map((x) => x.trim())
	return { name: name.substring(2), valType, value: valVal }
	},
	)
	virtualDirectives.value = newVirtualDirectives

	onPalettesUpdate(
	palettesIn.map((x) => ({ name: x.variant, ...x.directives })),
	)

	allEditedRules.value = rulesToEditorFriendly(rules)

	exports.updateOverallPreview()
	}

	const styleImporter = newImporter({
	accept: '.iss',
	parser(string) {
	return deserialize(string)
	},
	onImportFailure(result) {
	console.error('Failure importing style:', result)
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'settings.invalid_theme_imported',
	level: 'error',
	})
	},
	onImport,
	})

	// Raw format
	const exportRules = computed(() => [
	metaRule.value,
	...palettesRule.value,
	virtualDirectivesRule.value,
	...editorFriendlyToOriginal.value,
	])

	// Text format
	const exportStyleData = computed(() => {
	return [
	metaOut.value,
	palettesOut.value,
	virtualDirectivesOut.value,
	serialize(editorFriendlyToOriginal.value),
	].join('\n\n')
	})

	exports.clearStyle = () => {
	onImport(interfaceStore.styleDataUsed)
	}

	exports.exportStyle = () => {
	styleExporter.exportData()
	}

	exports.importStyle = () => {
	styleImporter.importData()
	}

	exports.applyStyle = () => {
	useInterfaceStore().setStyleCustom(exportRules.value)
	}

	const overallPreviewRules = ref([])
	exports.overallPreviewRules = overallPreviewRules

	watch([overallPreviewRules], () => {
	let css = null
	try {
	css = getCssRules(overallPreviewRules.value).map((r) =>
	r.replace('html', '&'),
	)
	} catch (e) {
	console.error(e)
	return
	}

	const sheet = createStyleSheet('style-tab-overall-preview', 90)

	sheet.clear()
	sheet.addRule(
	['#edited-style-preview {\n', css.join('\n'), '\n}'].join(''),
	)
	sheet.ready = true
	adoptStyleSheets()
	})

	const updateOverallPreview = throttle(() => {
	try {
	overallPreviewRules.value = init({
	inputRuleset: [
	...exportRules.value,
	{
	component: 'Root',
	directives: Object.fromEntries(
	Object.entries(selectedPalette.value)
	.filter(([k, v]) => k && v && k !== 'name')
	.map(([k, v]) => [`--${k}`, `color \| ${v}`]),
	),
	},
	],
	ultimateBackgroundColor: '#000000',
	debug: true,
	}).eager
	} catch (e) {
	console.error('Could not compile preview theme', e)
	return null
	}
	}, 1000)
	//
	// Apart from "hover" we can't really show how component looks like in
	// certain states, so we have to fake them.
	const simulatePseudoSelectors = (css, prefix) =>
	css
	.replace(prefix, '.preview-block')
	.replace(':active', '.preview-active')
	.replace(':hover', '.preview-hover')
	.replace(':active', '.preview-active')
	.replace(':focus', '.preview-focus')
	.replace(':focus-within', '.preview-focus-within')
	.replace(':disabled', '.preview-disabled')

	const previewRules = computed(() => {
	const filtered = overallPreviewRules.value.filter((r) => {
	const componentMatch = r.component === selectedComponentName.value
	const parentComponentMatch =
	r.parent?.component === selectedComponentName.value
	if (!componentMatch && !parentComponentMatch) return false
	const rule = parentComponentMatch ? r.parent : r
	if (rule.component !== selectedComponentName.value) return false
	if (rule.variant !== selectedVariant.value) return false
	const ruleState = new Set(rule.state.filter((x) => x !== 'normal'))
	const differenceA = [...ruleState].filter((x) => !selectedState.has(x))
	const differenceB = [...selectedState].filter((x) => !ruleState.has(x))
	return differenceA.length + differenceB.length === 0
	})
	const sorted = [...filtered]
	.filter((x) => x.component === selectedComponentName.value)
	.sort((a, b) => {
	const aSelectorLength = a.selector.split(/ /g).length
	const bSelectorLength = b.selector.split(/ /g).length
	return aSelectorLength - bSelectorLength
	})

	const prefix = sorted[0].selector

	return filtered.filter((x) => x.selector.startsWith(prefix))
	})

	exports.previewClass = computed(() => {
	const selectors = []
	if (
	!!selectedComponent.value.variants?.normal \|\|
	selectedVariant.value !== 'normal'
	) {
	selectors.push(selectedComponent.value.variants[selectedVariant.value])
	}
	if (selectedState.size > 0) {
	selectedState.forEach((state) => {
	const original = selectedComponent.value.states[state]
	selectors.push(simulatePseudoSelectors(original))
	})
	}
	return selectors.map((x) => x.substring(1)).join('')
	})

	exports.previewCss = computed(() => {
	try {
	const prefix = previewRules.value[0].selector
	const scoped = getCssRules(previewRules.value).map((x) =>
	simulatePseudoSelectors(x, prefix),
	)
	return scoped.join('\n')
	} catch (e) {
	console.error('Invalid ruleset', e)
	return null
	}
	})

	const dynamicVars = computed(() => {
	return previewRules.value[0].dynamicVars
	})

	const staticVars = computed(() => {
	const rootComponent = overallPreviewRules.value.find((r) => {
	return r.component === 'Root'
	})
	const rootDirectivesEntries = Object.entries(rootComponent.directives)
	const directives = {}
	rootDirectivesEntries
	.filter(([k, v]) => k.startsWith('--') && v.startsWith('color \| '))
	.map(([k, v]) => [k.substring(2), v.substring('color \| '.length)])
	.forEach(([k, v]) => {
	directives[k] = findColor(v, {
	dynamicVars: {},
	staticVars: directives,
	})
	})
	return directives
	})
	provide('staticVars', staticVars)
	exports.staticVars = staticVars

	const previewColors = computed(() => {
	const stacked = dynamicVars.value.stacked
	const background =
	typeof stacked === 'string' ? stacked : rgb2hex(stacked)
	return {
	text: previewRules.value.find((r) => r.component === 'Text')
	?.virtualDirectives['--text'],
	link: previewRules.value.find((r) => r.component === 'Link')
	?.virtualDirectives['--link'],
	border: previewRules.value.find((r) => r.component === 'Border')
	?.virtualDirectives['--border'],
	icon: previewRules.value.find((r) => r.component === 'Icon')
	?.virtualDirectives['--icon'],
	background,
	}
	})
	exports.previewColors = previewColors
	exports.updateOverallPreview = updateOverallPreview

	updateOverallPreview()

	watch(
	[
	allEditedRules.value,
	palettes,
	selectedPalette,
	selectedState,
	selectedVariant,
	],
	updateOverallPreview,
	)

	return exports
	},
	}
	diff --git a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js
	index d52c0084cc..70a24010bf 100644
	--- a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js
	+++ b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js
	@@ -1,133 +1,134 @@
	import { computed, inject, ref, watch } from 'vue'

	import ColorInput from 'src/components/color_input/color_input.vue'
	import Select from 'src/components/select/select.vue'
	import SelectMotion from 'src/components/select/select_motion.vue'
	import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
	+
	import { serializeShadow } from 'src/services/theme_data/iss_serializer.js'

	// helper for debugging
	// const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x))

	export default {
	components: {
	Select,
	SelectMotion,
	ShadowControl,
	ColorInput,
	},
	props: ['modelValue'],
	emits: ['update:modelValue'],
	setup(props, context) {
	const exports = {}
	const emit = context.emit

	exports.emit = emit
	exports.computeColor = inject('computeColor')
	exports.staticVars = inject('staticVars')

	const selectedVirtualDirectiveId = ref(0)
	exports.selectedVirtualDirectiveId = selectedVirtualDirectiveId

	const selectedVirtualDirective = computed({
	get() {
	return props.modelValue[selectedVirtualDirectiveId.value]
	},
	set(value) {
	const newVD = [...props.modelValue]
	newVD[selectedVirtualDirectiveId.value] = value

	emit('update:modelValue', newVD)
	},
	})
	exports.selectedVirtualDirective = selectedVirtualDirective

	exports.selectedVirtualDirectiveValType = computed({
	get() {
	return props.modelValue[selectedVirtualDirectiveId.value].valType
	},
	set(value) {
	const newValType = value
	let newValue
	switch (value) {
	case 'shadow':
	newValue = '0 0 0 #000000 / 1'
	break
	case 'color':
	newValue = '#000000'
	break
	default:
	newValue = 'none'
	}
	const newName = props.modelValue[selectedVirtualDirectiveId.value].name
	props.modelValue[selectedVirtualDirectiveId.value] = {
	name: newName,
	value: newValue,
	valType: newValType,
	}
	},
	})

	const draftVirtualDirectiveValid = ref(true)
	const draftVirtualDirective = ref({})
	exports.draftVirtualDirective = draftVirtualDirective
	const normalizeShadows = inject('normalizeShadows')

	watch(
	selectedVirtualDirective,
	(directive) => {
	switch (directive.valType) {
	case 'shadow': {
	if (Array.isArray(directive.value)) {
	draftVirtualDirective.value = normalizeShadows(directive.value)
	} else {
	const splitShadow = directive.value
	.split(/,/g)
	.map((x) => x.trim())
	draftVirtualDirective.value = normalizeShadows(splitShadow)
	}
	break
	}
	case 'color':
	draftVirtualDirective.value = directive.value
	break
	default:
	draftVirtualDirective.value = directive.value
	break
	}
	},
	{ immediate: true },
	)

	watch(
	draftVirtualDirective,
	(directive) => {
	try {
	switch (selectedVirtualDirective.value.valType) {
	case 'shadow': {
	props.modelValue[selectedVirtualDirectiveId.value].value =
	directive.map((x) => serializeShadow(x)).join(', ')
	break
	}
	default:
	props.modelValue[selectedVirtualDirectiveId.value].value =
	directive
	}
	draftVirtualDirectiveValid.value = true
	} catch (e) {
	console.error('Invalid virtual directive value', e)
	draftVirtualDirectiveValid.value = false
	}
	},
	{ immediate: true },
	)

	exports.getNewVirtualDirective = () => ({
	name: 'newDirective',
	valType: 'generic',
	value: 'foobar',
	})

	return exports
	},
	}
	diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
	index a7613923cc..066fe9d71a 100644
	--- a/src/components/shadow_control/shadow_control.js
	+++ b/src/components/shadow_control/shadow_control.js
	@@ -1,198 +1,199 @@
	import { flattenDeep, throttle } from 'lodash'

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ColorInput from 'src/components/color_input/color_input.vue'
	import ComponentPreview from 'src/components/component_preview/component_preview.vue'
	import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
	import Popover from 'src/components/popover/popover.vue'
	import Select from 'src/components/select/select.vue'
	import SelectMotion from 'src/components/select/select_motion.vue'
	+
	import { rgb2hex } from 'src/services/color_convert/color_convert.js'
	import {
	getCssShadow,
	getCssShadowFilter,
	} from 'src/services/theme_data/css_utils.js'
	import { deserializeShadow } from 'src/services/theme_data/iss_deserializer.js'
	import { serializeShadow } from 'src/services/theme_data/iss_serializer.js'
	import {
	findColor,
	findShadow,
	} from 'src/services/theme_data/theme_data_3.service.js'

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

	library.add(faChevronDown, faChevronUp, faTimes, faPlus)

	const toModel = (input) => {
	if (typeof input === 'object') {
	return {
	x: 0,
	y: 0,
	blur: 0,
	spread: 0,
	inset: false,
	color: '#000000',
	alpha: 1,
	...input,
	}
	} else if (typeof input === 'string') {
	return input
	}
	}

	export default {
	props: [
	'modelValue',
	'fallback',
	'separateInset',
	'noPreview',
	'disabled',
	'staticVars',
	'compact',
	],
	emits: ['update:modelValue', 'subShadowSelected'],
	data() {
	return {
	selectedId: 0,
	invalid: false,
	}
	},
	components: {
	ColorInput,
	OpacityInput,
	Select,
	SelectMotion,
	Checkbox,
	Popover,
	ComponentPreview,
	},
	computed: {
	cValue: {
	get() {
	return (this.modelValue ?? this.fallback ?? []).map(toModel)
	},
	set(newVal) {
	this.$emit('update:modelValue', newVal)
	},
	},
	selectedType: {
	get() {
	return typeof this.selected
	},
	set(newType) {
	this.selected = toModel(newType === 'object' ? {} : '')
	},
	},
	selected: {
	get() {
	const selected = this.cValue[this.selectedId]
	if (selected && typeof selected === 'object') {
	return { ...selected }
	} else if (typeof selected === 'string') {
	return selected
	}
	return null
	},
	set(value) {
	this.cValue[this.selectedId] = toModel(value)
	this.$emit('update:modelValue', this.cValue)
	},
	},
	present() {
	return this.selected != null && this.modelValue != null
	},
	shadowsAreNull() {
	return this.modelValue == null
	},
	currentFallback() {
	return this.fallback?.[this.selectedId]
	},
	getColorFallback() {
	if (this.staticVars && this.selected?.color) {
	try {
	const computedColor = findColor(
	this.selected.color,
	{ dynamicVars: {}, staticVars: this.staticVars },
	true,
	)
	if (computedColor) return rgb2hex(computedColor)
	return null
	} catch (e) {
	console.warn(e)
	return null
	}
	} else {
	return this.currentFallback?.color
	}
	},
	style() {
	try {
	let result
	const serialized = this.cValue.map((x) => serializeShadow(x)).join(',')
	serialized.split(/,/).map(deserializeShadow) // validate
	const expandedShadow = flattenDeep(
	findShadow(this.cValue, {
	dynamicVars: {},
	staticVars: this.staticVars,
	}),
	)
	const fixedShadows = expandedShadow.map((x) => ({
	...x,
	color: rgb2hex(x.color),
	}))

	if (this.separateInset) {
	result = {
	filter: getCssShadowFilter(fixedShadows),
	boxShadow: getCssShadow(fixedShadows, true),
	}
	} else {
	result = {
	boxShadow: getCssShadow(fixedShadows),
	}
	}
	this.invalid = false
	return result
	} catch (e) {
	console.error('Invalid shadow', e)
	this.invalid = true
	}
	},
	},
	watch: {
	selected() {
	this.$emit('subShadowSelected', this.selectedId)
	},
	},
	methods: {
	getNewSubshadow() {
	return toModel(this.selected)
	},
	onSelectChange(id) {
	this.selectedId = id
	},
	getSubshadowLabel(shadow, index) {
	if (typeof shadow === 'object') {
	return (
	shadow?.name ??
	this.$t('settings.style.shadows.shadow_id', { value: index })
	)
	} else if (typeof shadow === 'string') {
	return shadow \|\| this.$t('settings.style.shadows.empty_expression')
	}
	},
	updateProperty: throttle(function (prop, value) {
	this.cValue[this.selectedId][prop] = value
	if (prop === 'inset' && value === false && this.separateInset) {
	this.cValue[this.selectedId].spread = 0
	}
	this.$emit('update:modelValue', this.cValue)
	}, 100),
	},
	}
	diff --git a/src/components/shout_panel/shout_panel.js b/src/components/shout_panel/shout_panel.js
	index 8725697d6b..1dba50b2c3 100644
	--- a/src/components/shout_panel/shout_panel.js
	+++ b/src/components/shout_panel/shout_panel.js
	@@ -1,57 +1,58 @@
	-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useShoutStore } from 'src/stores/shout'

	+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faBullhorn, faTimes } from '@fortawesome/free-solid-svg-icons'

	library.add(faBullhorn, faTimes)

	const shoutPanel = {
	props: ['floating'],
	data() {
	return {
	currentMessage: '',
	channel: null,
	collapsed: true,
	}
	},
	computed: {
	messages() {
	return useShoutStore().messages
	},
	},
	methods: {
	submit(message) {
	useShoutStore().channel.push('new_msg', { text: message }, 10000)
	this.currentMessage = ''
	},
	togglePanel() {
	this.collapsed = !this.collapsed
	},
	userProfileLink(user) {
	return generateProfileLink(
	user.id,
	user.username,
	useInstanceStore().restrictedNicknames,
	)
	},
	},
	watch: {
	messages() {
	const scrollEl = this.$el.querySelector('.chat-window')
	if (!scrollEl) return
	if (
	scrollEl.scrollTop + scrollEl.offsetHeight + 20 >
	scrollEl.scrollHeight
	) {
	this.$nextTick(() => {
	if (!scrollEl) return
	scrollEl.scrollTop = scrollEl.scrollHeight - scrollEl.offsetHeight
	})
	}
	},
	},
	}

	export default shoutPanel
	diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
	index 8aa22df90a..0f7b069900 100644
	--- a/src/components/side_drawer/side_drawer.js
	+++ b/src/components/side_drawer/side_drawer.js
	@@ -1,132 +1,133 @@
	import { mapActions, mapState } from 'pinia'
	import { mapGetters } from 'vuex'

	import { USERNAME_ROUTES } from 'src/components/navigation/navigation.js'
	+import GestureService from '../../services/gesture_service/gesture_service'
	+import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
	+import UserCard from '../user_card/user_card.vue'
	+
	import { useAnnouncementsStore } from 'src/stores/announcements'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInterfaceStore } from 'src/stores/interface'
	import { useShoutStore } from 'src/stores/shout'
	-import GestureService from '../../services/gesture_service/gesture_service'
	-import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
	-import UserCard from '../user_card/user_card.vue'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faBullhorn,
	faCog,
	faComments,
	faCompass,
	faFilePen,
	faHome,
	faInfoCircle,
	faList,
	faSearch,
	faSignInAlt,
	faSignOutAlt,
	faTachometerAlt,
	faUserPlus,
	} from '@fortawesome/free-solid-svg-icons'

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

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

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

	export default SideDrawer
	diff --git a/src/components/staff_panel/staff_panel.js b/src/components/staff_panel/staff_panel.js
	index 1c02e86570..3f271f4d3f 100644
	--- a/src/components/staff_panel/staff_panel.js
	+++ b/src/components/staff_panel/staff_panel.js
	@@ -1,37 +1,38 @@
	import groupBy from 'lodash/groupBy'
	import map from 'lodash/map'
	import { mapGetters, mapState } from 'vuex'

	-import { useInstanceStore } from 'src/stores/instance.js'
	import BasicUserCard from '../basic_user_card/basic_user_card.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	const StaffPanel = {
	created() {
	const nicknames = useInstanceStore().staffAccounts
	nicknames.forEach((nickname) =>
	this.$store.dispatch('fetchUserIfMissing', nickname),
	)
	},
	components: {
	BasicUserCard,
	},
	computed: {
	groupedStaffAccounts() {
	const staffAccounts = map(this.staffAccounts, this.findUserByName).filter(
	(_) => _,
	)
	const groupedStaffAccounts = groupBy(staffAccounts, 'role')

	return [
	{ role: 'admin', users: groupedStaffAccounts.admin },
	{ role: 'moderator', users: groupedStaffAccounts.moderator },
	].filter((group) => group.users)
	},
	...mapGetters(['findUserByName']),
	...mapState({
	staffAccounts: (state) => useInstanceStore().staffAccounts,
	}),
	},
	}

	export default StaffPanel
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index d596cc9c53..66acae0d3f 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,674 +1,676 @@
	import { unescape as ldUnescape, uniqBy } from 'lodash'

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

	+import { useInstanceStore } from 'src/stores/instance.js'
	+import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
	+
	+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,
	RichContent,
	MentionLink,
	MentionsLine,
	UserPopover,
	UserLink,
	StatusActionButtons,
	},
	props: [
	'statusoid',
	'expandable',
	'inConversation',
	'focused',
	'highlight',
	'compact',
	'replies',
	'isPreview',
	'noHeading',
	'inlineExpanded',
	'showPinned',
	'inProfile',
	'profileUserId',
	'inQuote',

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

	'controlledShowingTall',
	'controlledToggleShowingTall',
	'controlledExpandingSubject',
	'controlledToggleExpandingSubject',
	'controlledShowingLongSubject',
	'controlledToggleShowingLongSubject',
	'controlledReplying',
	'controlledToggleReplying',
	'controlledMediaPlaying',
	'controlledSetMediaPlaying',
	'dive',
	],
	emits: ['interacted'],
	data() {
	return {
	uncontrolledReplying: false,
	unmuted: false,
	userExpanded: false,
	uncontrolledMediaPlaying: [],
	suspendable: true,
	error: null,
	headTailLinks: null,
	displayQuote: !this.inQuote,
	}
	},
	computed: {
	...controlledOrUncontrolledGetters(['replying', 'mediaPlaying']),
	showReasonMutedThread() {
	return (
	(this.status.thread_muted \|\|
	(this.status.reblog && this.status.reblog.thread_muted)) &&
	!this.inConversation
	)
	},
	repeaterClass() {
	const user = this.statusoid.user
	return highlightClass(user)
	},
	userClass() {
	const user = this.retweet
	? this.statusoid.retweeted_status.user
	: this.statusoid.user
	return highlightClass(user)
	},
	deleted() {
	return this.statusoid.deleted
	},
	repeaterStyle() {
	const user = this.statusoid.user
	const highlight = this.mergedConfig.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	userStyle() {
	if (this.noHeading) return
	const user = this.retweet
	? this.statusoid.retweeted_status.user
	: this.statusoid.user
	const highlight = this.mergedConfig.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	userProfileLink() {
	return this.generateUserProfileLink(
	this.status.user.id,
	this.status.user.screen_name,
	)
	},
	replyProfileLink() {
	if (this.isReply) {
	const user = this.$store.getters.findUser(
	this.status.in_reply_to_user_id,
	)
	// FIXME Why user not found sometimes???
	return user ? user.statusnet_profile_url : 'NOT_FOUND'
	}
	},
	retweet() {
	return !!this.statusoid.retweeted_status
	},
	retweeterUser() {
	return this.statusoid.user
	},
	retweeter() {
	return this.statusoid.user.name \|\| this.statusoid.user.screen_name_ui
	},
	retweeterHtml() {
	return this.statusoid.user.name
	},
	retweeterProfileLink() {
	return this.generateUserProfileLink(
	this.statusoid.user.id,
	this.statusoid.user.screen_name,
	)
	},
	status() {
	if (this.retweet) {
	return this.statusoid.retweeted_status
	} else {
	return this.statusoid
	}
	},
	statusFromGlobalRepository() {
	// NOTE: Consider to replace status with statusFromGlobalRepository
	return this.$store.state.statuses.allStatusesObject[this.status.id]
	},
	loggedIn() {
	return !!this.currentUser
	},
	muteFilterHits() {
	return muteFilterHits(
	Object.values(
	useServerSideStorageStore().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.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.isFocused) 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.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 this.$store.getters.mergedConfig
	},
	isSuspendable() {
	return !this.replying && this.mediaPlaying.length === 0
	},
	inThreadForest() {
	return !!this.controlledThreadDisplayStatus
	},
	threadShowing() {
	return this.controlledThreadDisplayStatus === 'showing'
	},
	visibilityLocalized() {
	return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
	},
	isEdited() {
	return this.status.edited_at !== null
	},
	editingAvailable() {
	return useInstanceStore().featureSet.editingAvailable
	},
	hasVisibleQuote() {
	return this.status.quote_url && this.status.quote_visible
	},
	hasInvisibleQuote() {
	return this.status.quote_url && !this.status.quote_visible
	},
	quotedStatus() {
	return this.status.quote_id
	? this.$store.state.statuses.allStatusesObject[this.status.quote_id]
	: undefined
	},
	shouldDisplayQuote() {
	return this.quotedStatus && this.displayQuote
	},
	scrobblePresent() {
	if (this.mergedConfig.hideScrobbles) return false
	if (!this.status.user?.latestScrobble) return false
	const value = this.mergedConfig.hideScrobblesAfter.match(/\d+/gs)[0]
	const unit = this.mergedConfig.hideScrobblesAfter.match(/\D+/gs)[0]
	let multiplier = 60 * 1000 // minutes is smallest unit
	switch (unit) {
	case 'm':
	break
	case 'h':
	multiplier *= 60 // hour
	break
	case 'd':
	multiplier *= 60 // hour
	multiplier *= 24 // day
	break
	}
	const maxAge = Number(value) * multiplier
	const createdAt = Date.parse(this.status.user.latestScrobble.created_at)
	const age = Date.now() - createdAt
	if (age > maxAge) return false
	return this.status.user.latestScrobble.artist
	},
	scrobble() {
	return this.status.user?.latestScrobble
	},
	},
	methods: {
	visibilityIcon(visibility) {
	switch (visibility) {
	case 'private':
	return 'lock'
	case 'unlisted':
	return 'lock-open'
	case 'direct':
	return 'envelope'
	case 'local':
	return 'igloo'
	default:
	return 'globe'
	}
	},
	showError(error) {
	this.error = error
	},
	clearError() {
	this.$emit('interacted')
	this.error = undefined
	},
	toggleReplying() {
	this.$emit('interacted')
	if (this.replying) {
	this.$refs.postStatusForm.requestClose()
	} else {
	this.doToggleReplying()
	}
	},
	doToggleReplying() {
	controlledOrUncontrolledToggle(this, 'replying')
	},
	gotoOriginal(id) {
	if (this.inConversation) {
	this.$emit('goto', id)
	}
	},
	toggleExpanded() {
	this.$emit('toggleExpanded')
	},
	toggleMute() {
	this.unmuted = !this.unmuted
	},
	toggleUserExpanded() {
	this.userExpanded = !this.userExpanded
	},
	generateUserProfileLink(id, name) {
	return generateProfileLink(
	id,
	name,
	useInstanceStore().restrictedNicknames,
	)
	},
	addMediaPlaying(id) {
	controlledOrUncontrolledSet(
	this,
	'mediaPlaying',
	this.mediaPlaying.concat(id),
	)
	},
	removeMediaPlaying(id) {
	controlledOrUncontrolledSet(
	this,
	'mediaPlaying',
	this.mediaPlaying.filter((mediaId) => mediaId !== id),
	)
	},
	setHeadTailLinks(headTailLinks) {
	this.headTailLinks = headTailLinks
	},
	toggleThreadDisplay() {
	this.controlledToggleThreadDisplay()
	},
	scrollIfHighlighted(highlightId) {
	if (this.$el.getBoundingClientRect == null) return
	const id = highlightId
	if (this.status.id === id) {
	const rect = this.$el.getBoundingClientRect()
	if (rect.top < 100) {
	// Post is above screen, match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.height >= window.innerHeight - 50) {
	// Post we want to see is taller than screen so match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.bottom > window.innerHeight - 50) {
	// Post is below screen, match its bottom to screen bottom
	window.scrollBy(0, rect.bottom - window.innerHeight + 50)
	}
	}
	},
	toggleDisplayQuote() {
	if (this.shouldDisplayQuote) {
	this.displayQuote = false
	} else if (!this.quotedStatus) {
	this.$store.dispatch('fetchStatus', this.status.quote_id).then(() => {
	this.displayQuote = true
	})
	} else {
	this.displayQuote = true
	}
	},
	},
	watch: {
	highlight: function (id) {
	this.scrollIfHighlighted(id)
	},
	'status.repeat_num': function (num) {
	// refetch repeats when repeat_num is changed in any way
	if (
	this.isFocused &&
	this.statusFromGlobalRepository.rebloggedBy &&
	this.statusFromGlobalRepository.rebloggedBy.length !== num
	) {
	this.$store.dispatch('fetchRepeats', this.status.id)
	}
	},
	'status.fave_num': function (num) {
	// refetch favs when fave_num is changed in any way
	if (
	this.isFocused &&
	this.statusFromGlobalRepository.favoritedBy &&
	this.statusFromGlobalRepository.favoritedBy.length !== num
	) {
	this.$store.dispatch('fetchFavs', this.status.id)
	}
	},
	isSuspendable: function (val) {
	this.suspendable = val
	},
	},
	}

	export default Status
	diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js
	index 6872a71a01..f6946f7c27 100644
	--- a/src/components/status_action_buttons/action_button.js
	+++ b/src/components/status_action_buttons/action_button.js
	@@ -1,151 +1,152 @@
	import EmojiPicker from 'src/components/emoji_picker/emoji_picker.vue'
	import Popover from 'src/components/popover/popover.vue'
	import StatusBookmarkFolderMenu from 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
	+
	import { useInstanceStore } from 'src/stores/instance.js'

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

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

	faChevronRight,
	faChevronUp,

	faReply,
	faRetweet,
	faStar,
	faStarRegular,
	faSmileBeam,

	faBookmark,
	faBookmarkRegular,
	faEyeSlash,
	faThumbtack,
	faShareAlt,
	faExternalLinkAlt,
	faHistory,
	)

	export default {
	props: [
	'button',
	'status',
	'extra',
	'status',
	'funcArg',
	'getClass',
	'getComponent',
	'doAction',
	'outerClose',
	],
	emits: ['interacted'],
	components: {
	StatusBookmarkFolderMenu,
	EmojiPicker,
	Popover,
	},
	data: () => ({
	animationState: false,
	}),
	computed: {
	buttonClass() {
	return [
	this.button.name + '-button',
	{
	'-with-extra': this.button.name === 'bookmark',
	'-extra': this.extra,
	'-quick': !this.extra,
	},
	]
	},
	userIsMuted() {
	return this.$store.getters.relationship(this.status.user.id).muting
	},
	threadIsMuted() {
	return this.status.thread_muted
	},
	hideCustomEmoji() {
	return !useInstanceStore().pleromaCustomEmojiReactionsAvailable
	},
	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 })
	}
	},
	doActionWrap(
	button,
	close = () => {
	/* no-op */
	},
	) {
	if (
	this.button.interactive ? !this.button.interactive(this.funcArg) : false
	)
	return
	this.$emit('interacted')
	if (button.name === 'emoji') {
	this.$refs.picker.showPicker()
	} else {
	this.animationState = true
	this.getComponent(button) === 'button' && this.doAction(button)
	setTimeout(() => {
	this.animationState = false
	}, 500)
	close()
	}
	},
	},
	}
	diff --git a/src/components/status_action_buttons/status_action_buttons.js b/src/components/status_action_buttons/status_action_buttons.js
	index 8473a0db1a..44cec57162 100644
	--- a/src/components/status_action_buttons/status_action_buttons.js
	+++ b/src/components/status_action_buttons/status_action_buttons.js
	@@ -1,148 +1,150 @@
	import { mapState } from 'pinia'

	import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
	import Popover from 'src/components/popover/popover.vue'
	-import genRandomSeed from 'src/services/random_seed/random_seed.service.js'
	-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
	import ActionButtonContainer from './action_button_container.vue'
	import { BUTTONS } from './buttons_definitions.js'

	+import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
	+
	+import genRandomSeed from 'src/services/random_seed/random_seed.service.js'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'

	library.add(faEllipsisH)

	const StatusActionButtons = {
	props: ['status', 'replying'],
	emits: ['toggleReplying', 'interacted'],
	data() {
	return {
	showPin: false,
	showingConfirmDialog: false,
	currentConfirmTitle: '',
	currentConfirmOkText: '',
	currentConfirmCancelText: '',
	currentConfirmAction: () => {
	/* no-op */
	},
	randomSeed: genRandomSeed(),
	}
	},
	components: {
	Popover,
	ConfirmModal,
	ActionButtonContainer,
	},
	computed: {
	...mapState(useServerSideStorageStore, {
	pinnedItems: (store) =>
	new Set(store.prefsStorage.collections.pinnedStatusActions),
	}),
	buttons() {
	return BUTTONS.filter((x) => (x.if ? x.if(this.funcArg) : true))
	},
	quickButtons() {
	return this.buttons.filter((x) => this.pinnedItems.has(x.name))
	},
	extraButtons() {
	return this.buttons.filter((x) => !this.pinnedItems.has(x.name))
	},
	currentUser() {
	return this.$store.state.users.currentUser
	},
	funcArg() {
	return {
	status: this.status,
	replying: this.replying,
	emit: this.$emit,
	dispatch: this.$store.dispatch,
	state: this.$store.state,
	getters: this.$store.getters,
	router: this.$router,
	currentUser: this.currentUser,
	loggedIn: !!this.currentUser,
	}
	},
	triggerAttrs() {
	return {
	title: this.$t('status.more_actions'),
	'aria-controls': `popup-menu-${this.randomSeed}`,
	'aria-haspopup': 'menu',
	}
	},
	},
	methods: {
	doAction(button) {
	if (button.confirm?.(this.funcArg)) {
	// TODO move to action_button
	this.currentConfirmTitle = this.$t(
	button.confirmStrings(this.funcArg).title,
	)
	this.currentConfirmOkText = this.$t(
	button.confirmStrings(this.funcArg).confirm,
	)
	this.currentConfirmCancelText = this.$t(
	button.confirmStrings(this.funcArg).cancel,
	)
	this.currentConfirmBody = this.$t(
	button.confirmStrings(this.funcArg).body,
	)
	this.currentConfirmAction = () => {
	this.showingConfirmDialog = false
	this.doActionReal(button)
	}
	this.showingConfirmDialog = true
	} else {
	this.doActionReal(button)
	}
	},
	doActionReal(button) {
	button
	.action?.(this.funcArg)
	.then(() => this.$emit('onSuccess'))
	.catch((err) => this.$emit('onError', err.error.error))
	},
	onExtraClose() {
	this.showPin = false
	},
	isPinned(button) {
	return this.pinnedItems.has(button.name)
	},
	unpin(button) {
	useServerSideStorageStore().removeCollectionPreference({
	path: 'collections.pinnedStatusActions',
	value: button.name,
	})
	useServerSideStorageStore().pushServerSideStorage()
	},
	pin(button) {
	useServerSideStorageStore().addCollectionPreference({
	path: 'collections.pinnedStatusActions',
	value: button.name,
	})
	useServerSideStorageStore().pushServerSideStorage()
	},
	getComponent(button) {
	if (!this.$store.state.users.currentUser && button.anonLink) {
	return 'a'
	} else if (button.action == null && button.link != null) {
	return 'a'
	} else {
	return 'button'
	}
	},
	getClass(button) {
	return {
	[button.name + '-button']: true,
	disabled: button.interactive
	? !button.interactive(this.funcArg)
	: false,
	'-pin-edit': this.showPin,
	'-dropdown': button.dropdown?.(),
	'-active': button.active?.(this.funcArg),
	}
	},
	},
	}

	export default StatusActionButtons
	diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
	index 80f8400b6d..4a3872895a 100644
	--- a/src/components/status_body/status_body.js
	+++ b/src/components/status_body/status_body.js
	@@ -1,163 +1,164 @@
	import { mapGetters } from 'vuex'

	import RichContent from 'src/components/rich_content/rich_content.jsx'
	+
	import fileType from 'src/services/file_type/file_type.service'

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

	export default StatusBody
	diff --git a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js
	index 4aa617832a..17ea62f996 100644
	--- a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js
	+++ b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js
	@@ -1,41 +1,42 @@
	import { mapState } from 'pinia'

	import Popover from 'src/components/popover/popover.vue'
	import StillImage from 'src/components/still-image/still-image.vue'
	+
	import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'

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

	library.add(faChevronRight, faFolder)

	const StatusBookmarkFolderMenu = {
	props: ['status', 'close'],
	data() {
	return {}
	},
	components: {
	Popover,
	StillImage,
	},
	computed: {
	...mapState(useBookmarkFoldersStore, {
	folders: (store) => store.allFolders,
	}),
	folderId() {
	return this.status.bookmark_folder_id
	},
	},
	methods: {
	toggleFolder(id) {
	const value = id === this.folderId ? null : id

	this.$store
	.dispatch('bookmark', { id: this.status.id, bookmark_folder_id: value })
	.then(() => this.$emit('onSuccess'))
	.catch((err) => this.$emit('onError', err.error.error))
	},
	},
	}

	export default StatusBookmarkFolderMenu
	diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
	index 51bfe6f1e6..ec23a34884 100644
	--- a/src/components/status_content/status_content.js
	+++ b/src/components/status_content/status_content.js
	@@ -1,156 +1,157 @@
	import { mapGetters, mapState } from 'vuex'

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

	+import { useMediaViewerStore } from 'src/stores/media_viewer'
	+
	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:
	!this.$store.getters.mergedConfig.collapseMessageWithSubject,
	}
	},
	computed: {
	...controlledOrUncontrolledGetters([
	'showingTall',
	'expandingSubject',
	'showingLongSubject',
	]),
	statusCard() {
	if (!this.status.card) return null
	return this.status.card.url === this.status.quote_url
	? null
	: this.status.card
	},
	hideAttachments() {
	return (
	(this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	(this.mergedConfig.hideAttachmentsInConv && this.inConversation)
	)
	},
	nsfwClickthrough() {
	if (!this.status.nsfw) {
	return false
	}
	if (this.status.summary && this.localCollapseSubjectDefault) {
	return false
	}
	return true
	},
	localCollapseSubjectDefault() {
	return this.mergedConfig.collapseMessageWithSubject
	},
	attachmentSize() {
	if (this.compact) {
	return 'small'
	} else if (
	(this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	(this.mergedConfig.hideAttachmentsInConv && this.inConversation) \|\|
	this.status.attachments.length > this.maxThumbnails
	) {
	return 'hide'
	}
	return 'normal'
	},
	maxThumbnails() {
	return this.mergedConfig.maxThumbnails
	},
	...mapGetters(['mergedConfig']),
	...mapState({
	currentUser: (state) => state.users.currentUser,
	}),
	},
	components: {
	Attachment,
	Poll,
	Gallery,
	LinkPreview,
	StatusBody,
	},
	methods: {
	toggleShowingTall() {
	controlledOrUncontrolledToggle(this, 'showingTall')
	},
	toggleExpandingSubject() {
	controlledOrUncontrolledToggle(this, 'expandingSubject')
	},
	toggleShowingLongSubject() {
	controlledOrUncontrolledToggle(this, 'showingLongSubject')
	},
	setMedia() {
	const attachments =
	this.attachmentSize === 'hide'
	? this.status.attachments
	: this.galleryAttachments
	return () => useMediaViewerStore().setMedia(attachments)
	},
	},
	}

	export default StatusContent
	diff --git a/src/components/status_history_modal/status_history_modal.js b/src/components/status_history_modal/status_history_modal.js
	index 1ad48ace3a..9b518a10dc 100644
	--- a/src/components/status_history_modal/status_history_modal.js
	+++ b/src/components/status_history_modal/status_history_modal.js
	@@ -1,64 +1,65 @@
	import { get } from 'lodash'

	-import { useStatusHistoryStore } from 'src/stores/statusHistory'
	import Modal from '../modal/modal.vue'
	import Status from '../status/status.vue'

	+import { useStatusHistoryStore } from 'src/stores/statusHistory'
	+
	const StatusHistoryModal = {
	components: {
	Modal,
	Status,
	},
	data() {
	return {
	statuses: [],
	}
	},
	computed: {
	modalActivated() {
	return useStatusHistoryStore().modalActivated
	},
	params() {
	return useStatusHistoryStore().params
	},
	statusId() {
	return this.params.id
	},
	historyCount() {
	return this.statuses.length
	},
	history() {
	return this.statuses
	},
	},
	watch: {
	params(newVal, oldVal) {
	const newStatusId = get(newVal, 'id') !== get(oldVal, 'id')
	if (newStatusId) {
	this.resetHistory()
	}

	if (
	newStatusId \|\|
	get(newVal, 'edited_at') !== get(oldVal, 'edited_at')
	) {
	this.fetchStatusHistory()
	}
	},
	},
	methods: {
	resetHistory() {
	this.statuses = []
	},
	fetchStatusHistory() {
	this.$store.dispatch('fetchStatusHistory', this.params).then((data) => {
	this.statuses = data
	})
	},
	closeModal() {
	useStatusHistoryStore().closeStatusHistoryModal()
	},
	},
	}

	export default StatusHistoryModal
	diff --git a/src/components/sticker_picker/sticker_picker.js b/src/components/sticker_picker/sticker_picker.js
	index c732d80334..949d2ecf92 100644
	--- a/src/components/sticker_picker/sticker_picker.js
	+++ b/src/components/sticker_picker/sticker_picker.js
	@@ -1,56 +1,57 @@
	/* eslint-env browser */

	-import { useEmojiStore } from 'src/stores/emoji.js'
	-import { useInstanceStore } from 'src/stores/instance.js'
	import statusPosterService from '../../services/status_poster/status_poster.service.js'
	import TabSwitcher from '../tab_switcher/tab_switcher.jsx'

	+import { useEmojiStore } from 'src/stores/emoji.js'
	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	const StickerPicker = {
	components: {
	TabSwitcher,
	},
	data() {
	return {
	meta: {
	stickers: [],
	},
	path: '',
	}
	},
	computed: {
	pack() {
	return useEmojiStore().stickers \|\| []
	},
	},
	methods: {
	clear() {
	this.meta = {
	stickers: [],
	}
	},
	pick(sticker, name) {
	const store = this.$store
	// TODO remove this workaround by finding a way to bypass reuploads
	fetch(sticker).then((res) => {
	res.blob().then((blob) => {
	const file = new File([blob], name, { mimetype: 'image/png' })
	const formData = new FormData()
	formData.append('file', file)
	statusPosterService.uploadMedia({ store, formData }).then(
	(fileData) => {
	this.$emit('uploaded', fileData)
	this.clear()
	},
	(error) => {
	console.warn("Can't attach sticker")
	console.warn(error)
	this.$emit('upload-failed', 'default')
	},
	)
	})
	})
	},
	},
	}

	export default StickerPicker
	diff --git a/src/components/still-image/still-image-emoji-popover.vue b/src/components/still-image/still-image-emoji-popover.vue
	index b53234b2a5..4e087c094e 100644
	--- a/src/components/still-image/still-image-emoji-popover.vue
	+++ b/src/components/still-image/still-image-emoji-popover.vue
	@@ -1,212 +1,213 @@
	<template>
	<Popover
	ref="emojiPopover"
	trigger="click"
	placement="top"
	:bound-to="{ x: 'container' }"
	:offset="{ y: 10 }"
	@show="fetchEmojiPacksIfAdmin"
	>
	<template #trigger>
	<StillImage v-bind="$attrs" />
	</template>
	<template #content>
	<div class="emoji-popover">
	<h3>{{ $attrs.title }}</h3>

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

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

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

	<script>
	import Popover from 'components/popover/popover.vue'
	import SelectComponent from 'components/select/select.vue'
	import { assign } from 'lodash'

	+import StillImage from './still-image.vue'
	+
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInterfaceStore } from 'src/stores/interface'
	-import StillImage from './still-image.vue'

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

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

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

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

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

	assign(allPacks, pageData.packs)
	})
	}

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

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

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

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

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

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

	.Select {
	width: 100%;
	}
	}
	</style>
	diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
	index afb1690e09..bff40bbe43 100644
	--- a/src/components/timeline/timeline.js
	+++ b/src/components/timeline/timeline.js
	@@ -1,335 +1,337 @@
	import { debounce, keyBy, throttle } from 'lodash'
	import { mapState } from 'pinia'

	-import timelineFetcher from 'src/services/timeline_fetcher/timeline_fetcher.service.js'
	-import { useInterfaceStore } from 'src/stores/interface'
	import Conversation from '../conversation/conversation.vue'
	import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.vue'
	import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
	import ScrollTopButton from '../scroll_top_button/scroll_top_button.vue'
	import Status from '../status/status.vue'
	import TimelineMenu from '../timeline_menu/timeline_menu.vue'

	+import { useInterfaceStore } from 'src/stores/interface'
	+
	+import timelineFetcher from 'src/services/timeline_fetcher/timeline_fetcher.service.js'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faArrowUp,
	faCheck,
	faCircleNotch,
	faCirclePlus,
	faCog,
	faMinus,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faCircleNotch, faCog, faMinus, faArrowUp, faCirclePlus, faCheck)

	const Timeline = {
	props: [
	'timeline',
	'timelineName',
	'title',
	'userId',
	'listId',
	'statusId',
	'bookmarkFolderId',
	'tag',
	'embedded',
	'count',
	'pinnedStatusIds',
	'inProfile',
	'footerSlipgate', // reference to an element where we should put our footer
	],
	data() {
	return {
	showScrollTop: false,
	paused: false,
	unfocused: false,
	bottomedOut: false,
	virtualScrollIndex: 0,
	blockingClicks: false,
	}
	},
	components: {
	Status,
	ScrollTopButton,
	Conversation,
	TimelineMenu,
	QuickFilterSettings,
	QuickViewSettings,
	},
	computed: {
	filteredVisibleStatuses() {
	return this.timeline.visibleStatuses.filter(
	(status) =>
	this.timelineName !== 'user' \|\|
	(status.id >= this.timeline.minId &&
	status.id <= this.timeline.maxId),
	)
	},
	filteredPinnedStatusIds() {
	return (this.pinnedStatusIds \|\| []).filter(
	(statusId) => this.timeline.statusesObject[statusId],
	)
	},
	newStatusCount() {
	return this.timeline.newStatusCount
	},
	showLoadButton() {
	return this.timeline.newStatusCount > 0 \|\| this.timeline.flushMarker !== 0
	},
	loadButtonString() {
	if (this.timeline.flushMarker !== 0) {
	return this.$t('timeline.reload')
	} else {
	return `${this.$t('timeline.show_new')} (${this.newStatusCount})`
	}
	},
	mobileLoadButtonString() {
	if (this.timeline.flushMarker !== 0) {
	return '+'
	} else {
	return this.newStatusCount > 99 ? '∞' : this.newStatusCount
	}
	},
	classes() {
	let rootClasses = !this.embedded
	? ['panel', 'panel-default']
	: ['-embedded']
	if (this.blockingClicks)
	rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
	return {
	root: rootClasses,
	header: ['timeline-heading'].concat(
	!this.embedded ? ['panel-heading', '-sticky'] : ['panel-body'],
	),
	body: ['timeline-body'].concat(
	!this.embedded ? ['panel-body'] : ['panel-body'],
	),
	footer: ['timeline-footer'].concat(
	!this.embedded ? ['panel-footer'] : ['panel-body'],
	),
	}
	},
	// id map of statuses which need to be hidden in the main list due to pinning logic
	pinnedStatusIdsObject() {
	return keyBy(this.pinnedStatusIds)
	},
	statusesToDisplay() {
	const amount = this.timeline.visibleStatuses.length
	const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
	const nonPinnedIndex =
	this.virtualScrollIndex - this.filteredPinnedStatusIds.length
	const min = Math.max(0, nonPinnedIndex - statusesPerSide)
	const max = Math.min(amount, nonPinnedIndex + statusesPerSide)
	return this.timeline.visibleStatuses.slice(min, max).map((_) => _.id)
	},
	virtualScrollingEnabled() {
	return this.$store.getters.mergedConfig.virtualScrolling
	},
	...mapState(useInterfaceStore, {
	mobileLayout: (store) => store.layoutType === 'mobile',
	}),
	},
	created() {
	const store = this.$store
	const credentials = store.state.users.currentUser.credentials
	const showImmediately = this.timeline.visibleStatuses.length === 0

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

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

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

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

	if (statuses.length === 0) return

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

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

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

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

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

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

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

	export default Timeline
	diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
	index 9fcb1d3eaa..ebbe803c72 100644
	--- a/src/components/timeline_menu/timeline_menu.js
	+++ b/src/components/timeline_menu/timeline_menu.js
	@@ -1,126 +1,127 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

	import { filterNavigation } from 'src/components/navigation/filter.js'
	import { TIMELINES } from 'src/components/navigation/navigation.js'
	import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
	+import BookmarkFoldersMenuContent from '../bookmark_folders_menu/bookmark_folders_menu_content.vue'
	+import ListsMenuContent from '../lists_menu/lists_menu_content.vue'
	+import Popover from '../popover/popover.vue'
	+
	import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInterfaceStore } from 'src/stores/interface'
	import { useListsStore } from 'src/stores/lists'
	-import BookmarkFoldersMenuContent from '../bookmark_folders_menu/bookmark_folders_menu_content.vue'
	-import ListsMenuContent from '../lists_menu/lists_menu_content.vue'
	-import Popover from '../popover/popover.vue'

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

	library.add(faChevronDown)

	// Route -> i18n key mapping, exported and not in the computed
	// because nav panel benefits from the same information.
	export const timelineNames = (supportsBookmarkFolders) => {
	return {
	friends: 'nav.home_timeline',
	bookmarks: supportsBookmarkFolders ? 'nav.all_bookmarks' : 'nav.bookmarks',
	dms: 'nav.dms',
	'public-timeline': 'nav.public_tl',
	'public-external-timeline': 'nav.twkn',
	quotes: 'nav.quotes',
	bubble: 'nav.bubble',
	}
	}

	const TimelineMenu = {
	components: {
	Popover,
	NavigationEntry,
	ListsMenuContent,
	BookmarkFoldersMenuContent,
	},
	data() {
	return {
	isOpen: false,
	}
	},
	created() {
	if (timelineNames(this.bookmarkFolders)[this.$route.name]) {
	useInterfaceStore().setLastTimeline(this.$route.name)
	}
	},
	computed: {
	useListsMenu() {
	const route = this.$route.name
	return route === 'lists-timeline'
	},
	useBookmarkFoldersMenu() {
	const route = this.$route.name
	return (
	this.bookmarkFolders &&
	(route === 'bookmark-folder' \|\| route === 'bookmarks')
	)
	},
	...mapPiniaState(useInstanceStore, ['private', 'federating']),
	...mapPiniaState(useInstanceStore, {
	pleromaChatMessagesAvailable: (store) =>
	store.featureSet.pleromaChatMessagesAvailable,
	bookmarkFolders: (store) =>
	store.featureSet.pleromaBookmarkFoldersAvailable,
	bubbleTimeline: (store) => store.featureSet.localBubble,
	}),
	...mapState({
	currentUser: (state) => state.users.currentUser,
	}),
	timelinesList() {
	return filterNavigation(
	Object.entries(TIMELINES).map(([k, v]) => ({ ...v, name: k })),
	{
	hasChats: this.pleromaChatMessagesAvailable,
	isFederating: this.federating,
	isPrivate: this.private,
	currentUser: this.currentUser,
	supportsBookmarkFolders: this.bookmarkFolders,
	supportsBubbleTimeline: this.bubbleTimeline,
	},
	)
	},
	},
	methods: {
	openMenu() {
	// $nextTick is too fast, animation won't play back but
	// instead starts in fully open position. Low values
	// like 1-5 work on fast machines but not on mobile, 25
	// seems like a good compromise that plays without significant
	// added lag.
	setTimeout(() => {
	this.isOpen = true
	}, 25)
	},
	blockOpen(event) {
	// For the blank area inside the button element.
	// Just setting @click.stop="" makes unintuitive behavior when
	// menu is open and clicking on the blank area doesn't close it.
	if (!this.isOpen) {
	event.stopPropagation()
	}
	},
	timelineName() {
	const route = this.$route.name
	if (route === 'tag-timeline') {
	return '#' + this.$route.params.tag
	}
	if (route === 'lists-timeline') {
	return useListsStore().findListTitle(this.$route.params.id)
	}
	if (route === 'bookmark-folder') {
	return useBookmarkFoldersStore().findBookmarkFolderName(
	this.$route.params.id,
	)
	}
	const i18nkey = timelineNames(this.bookmarkFolders)[this.$route.name]
	return i18nkey ? this.$t(i18nkey) : route
	},
	},
	}

	export default TimelineMenu
	diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js
	index e912d33eae..5c8b308bfa 100644
	--- a/src/components/update_notification/update_notification.js
	+++ b/src/components/update_notification/update_notification.js
	@@ -1,87 +1,89 @@
	-import pleromaTanFoxMask from 'src/assets/pleromatan_apology_fox_mask.png'
	-import pleromaTanMask from 'src/assets/pleromatan_apology_mask.png'
	import Modal from 'src/components/modal/modal.vue'
	+
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useServerSideStorageStore } from 'src/stores/serverSideStorage'

	+import pleromaTanFoxMask from 'src/assets/pleromatan_apology_fox_mask.png'
	+import pleromaTanMask from 'src/assets/pleromatan_apology_mask.png'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faTimes } from '@fortawesome/free-solid-svg-icons'

	library.add(faTimes)

	export const CURRENT_UPDATE_COUNTER = 1

	const pleromaTan = '/static/pleromatan_apology.png'
	const pleromaTanFox = '/static/pleromatan_apology_fox.png'

	const UpdateNotification = {
	data() {
	return {
	showingImage: false,
	pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox,
	showingMore: false,
	}
	},
	components: {
	Modal,
	},
	computed: {
	pleromaTanStyles() {
	const mask =
	this.pleromaTanVariant === pleromaTan
	? pleromaTanMask
	: pleromaTanFoxMask
	return {
	'shape-outside': 'url(' + mask + ')',
	}
	},
	shouldShow() {
	return (
	!useInstanceStore().disableUpdateNotification &&
	this.$store.state.users.currentUser &&
	useServerSideStorageStore().flagStorage.updateCounter <
	CURRENT_UPDATE_COUNTER &&
	!useServerSideStorageStore().prefsStorage.simple.dontShowUpdateNotifs
	)
	},
	},
	methods: {
	toggleShow() {
	this.showingMore = !this.showingMore
	},
	neverShowAgain() {
	this.toggleShow()
	useServerSideStorageStore().setFlag({
	flag: 'updateCounter',
	value: CURRENT_UPDATE_COUNTER,
	})
	useServerSideStorageStore().setPreference({
	path: 'simple.dontShowUpdateNotifs',
	value: true,
	})
	useServerSideStorageStore().pushServerSideStorage()
	},
	dismiss() {
	useServerSideStorageStore().setFlag({
	flag: 'updateCounter',
	value: CURRENT_UPDATE_COUNTER,
	})
	useServerSideStorageStore().pushServerSideStorage()
	},
	},
	mounted() {
	this.contentHeightNoImage = this.$refs.animatedText.scrollHeight

	// Workaround to get the text height only after mask loaded. A bit hacky.
	const newImg = new Image()
	newImg.onload = () => {
	setTimeout(() => {
	this.showingImage = true
	}, 100)
	}
	newImg.src =
	this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask
	},
	}

	export default UpdateNotification
	diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
	index f193f8eb2c..12c31fc35b 100644
	--- a/src/components/user_avatar/user_avatar.js
	+++ b/src/components/user_avatar/user_avatar.js
	@@ -1,56 +1,57 @@
	+import StillImage from '../still-image/still-image.vue'
	+
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInterfaceStore } from 'src/stores/interface'
	-import StillImage from '../still-image/still-image.vue'

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

	library.add(faRobot, faPeopleGroup)

	const UserAvatar = {
	props: {
	// User object to show avatar of
	user: {
	required: true,
	type: Object,
	},
	// Use less space and use alternative roundness
	compact: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Show small icon indicating if account is a bot or group
	showActorTypeIndicator: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Override avatar image URL, useful for profile editing
	url: {
	required: false,
	type: String,
	default: null,
	},
	},
	data() {
	return {
	showPlaceholder: false,
	defaultAvatar: `${useInstanceStore().server + useInstanceStore().defaultAvatar}`,
	betterShadow: useInterfaceStore().browserSupport.cssFilter,
	}
	},
	components: {
	StillImage,
	},
	methods: {
	imgSrc(src) {
	return !src \|\| this.showPlaceholder ? this.defaultAvatar : src
	},
	imageLoadError() {
	this.showPlaceholder = true
	},
	},
	}

	export default UserAvatar
	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	index 62de6dc8a2..5cbb8b6d75 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,566 +1,568 @@
	import isEqual from 'lodash/isEqual'
	import merge from 'lodash/merge'
	import ldUnescape from 'lodash/unescape'
	import { mapGetters } from 'vuex'

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ColorInput from 'src/components/color_input/color_input.vue'
	import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
	import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
	import suggestor from 'src/components/emoji_input/suggestor.js'
	import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
	-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 { useEmojiStore } from 'src/stores/emoji.js'
	-import { useInstanceStore } from 'src/stores/instance.js'
	-import { usePostStatusStore } from 'src/stores/post_status'
	import { useInterfaceStore } from '../../stores/interface'
	import { useMediaViewerStore } from '../../stores/media_viewer'
	import AccountActions from '../account_actions/account_actions.vue'
	import FollowButton from '../follow_button/follow_button.vue'
	import ModerationTools from '../moderation_tools/moderation_tools.vue'
	import ProgressButton from '../progress_button/progress_button.vue'
	import RemoteFollow from '../remote_follow/remote_follow.vue'
	import Select from '../select/select.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import UserLink from '../user_link/user_link.vue'
	import UserNote from '../user_note/user_note.vue'

	+import { useEmojiStore } from 'src/stores/emoji.js'
	+import { useInstanceStore } from 'src/stores/instance.js'
	+import { usePostStatusStore } from 'src/stores/post_status'
	+
	+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,
	)

	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,
	},
	// 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,
	},
	},
	components: {
	DialogModal,
	UserAvatar,
	Checkbox,
	RemoteFollow,
	ModerationTools,
	AccountActions,
	ProgressButton,
	FollowButton,
	Select,
	RichContent,
	UserLink,
	UserNote,
	UserTimedFilterModal,
	ColorInput,
	EmojiInput,
	ImageCropper,
	},
	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: {
	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 useInstanceStore().featureSet.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() {
	const data =
	this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return (data && data.type) \|\| 'disabled'
	},
	set(type) {
	const data =
	this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	if (type !== 'disabled') {
	this.$store.dispatch('setHighlight', {
	user: this.user.screen_name,
	color: (data && data.color) \|\| '#FFFFFF',
	type,
	})
	} else {
	this.$store.dispatch('setHighlight', {
	user: this.user.screen_name,
	color: undefined,
	})
	}
	},
	...mapGetters(['mergedConfig']),
	},
	userHighlightColor: {
	get() {
	const data =
	this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return data && data.color
	},
	set(color) {
	this.$store.dispatch('setHighlight', {
	user: this.user.screen_name,
	color,
	})
	},
	},
	visibleRole() {
	if (!this.newShowRole) {
	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.includes('users_manage_activation_state') \|\|
	privileges.includes('users_delete') \|\|
	privileges.includes('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' },
	)
	)
	},

	// 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().defaultAvatar
	return (
	!this.$store.state.users.currentUser.profile_image_url \|\|
	this.$store.state.users.currentUser.profile_image_url.includes(
	baseAvatar,
	)
	)
	},
	isDefaultBanner() {
	const baseBanner = useInstanceStore().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: [
	...this.$store.getters.standardEmojiList,
	...useEmojiStore().customEmoji,
	],
	store: this.$store,
	})
	},
	emojiSuggestor() {
	return suggestor({
	emoji: [
	...this.$store.getters.standardEmojiList,
	...useEmojiStore().customEmoji,
	],
	})
	},
	...mapGetters(['mergedConfig']),
	},
	methods: {
	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,
	mimetype: '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
	}

	this.$store.state.api.backendInteractor
	.updateProfile({ params })
	.then((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_link/user_link.vue b/src/components/user_link/user_link.vue
	index 4bb1822c96..e8a4ac4a77 100644
	--- a/src/components/user_link/user_link.vue
	+++ b/src/components/user_link/user_link.vue
	@@ -1,44 +1,46 @@
	<template>
	<div class="user-profile-link">
	<router-link
	:title="user.screen_name_ui"
	:to="userProfileLink(user)"
	>
	<slot>
	{{ at ? '@' : '' }}{{ user.screen_name_ui }}<UnicodeDomainIndicator
	:user="user"
	/>
	</slot>
	</router-link>
	</div>
	</template>

	<script>
	-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	-import { useInstanceStore } from 'src/stores/instance.js'
	import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	+
	const UserLink = {
	props: {
	user: Object,
	at: {
	type: Boolean,
	default: true,
	},
	},
	components: {
	UnicodeDomainIndicator,
	},
	methods: {
	userProfileLink(user) {
	return generateProfileLink(
	user.id,
	user.screen_name,
	useInstanceStore().restrictedNicknames,
	)
	},
	},
	}

	export default UserLink
	</script>
	diff --git a/src/components/user_list_menu/user_list_menu.js b/src/components/user_list_menu/user_list_menu.js
	index b30a8808fd..61e5b90960 100644
	--- a/src/components/user_list_menu/user_list_menu.js
	+++ b/src/components/user_list_menu/user_list_menu.js
	@@ -1,123 +1,124 @@
	import { mapState } from 'pinia'

	-import { useListsStore } from 'src/stores/lists'
	import DialogModal from '../dialog_modal/dialog_modal.vue'
	import Popover from '../popover/popover.vue'

	+import { useListsStore } from 'src/stores/lists'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faChevronRight } from '@fortawesome/free-solid-svg-icons'

	library.add(faChevronRight)

	const UserListMenu = {
	props: ['user'],
	data() {
	return {}
	},
	components: {
	DialogModal,
	Popover,
	},
	created() {
	this.$store.dispatch('fetchUserInLists', this.user.id)
	},
	computed: {
	...mapState(useListsStore, {
	allLists: (store) => store.allLists,
	}),
	inListsSet() {
	return new Set(this.user.inLists.map((x) => x.id))
	},
	lists() {
	if (!this.user.inLists) return []
	return this.allLists.map((list) => ({
	...list,
	inList: this.inListsSet.has(list.id),
	}))
	},
	triggerAttrs() {
	return {
	class: 'menu-item dropdown-item -has-submenu',
	}
	},
	},
	methods: {
	toggleList(listId) {
	if (this.inListsSet.has(listId)) {
	useListsStore()
	.removeListAccount({ accountId: this.user.id, listId })
	.then((response) => {
	if (!response.ok) {
	return
	}
	this.$store.dispatch('fetchUserInLists', this.user.id)
	})
	} else {
	useListsStore()
	.addListAccount({ accountId: this.user.id, listId })
	.then((response) => {
	if (!response.ok) {
	return
	}
	this.$store.dispatch('fetchUserInLists', this.user.id)
	})
	}
	},
	toggleRight(right) {
	const store = this.$store
	if (this.user.rights[right]) {
	store.state.api.backendInteractor
	.deleteRight({ user: this.user, right })
	.then((response) => {
	if (!response.ok) {
	return
	}
	store.commit('updateRight', {
	user: this.user,
	right,
	value: false,
	})
	})
	} else {
	store.state.api.backendInteractor
	.addRight({ user: this.user, right })
	.then((response) => {
	if (!response.ok) {
	return
	}
	store.commit('updateRight', { user: this.user, right, value: true })
	})
	}
	},
	toggleActivationStatus() {
	this.$store.dispatch('toggleActivationStatus', { user: this.user })
	},
	deleteUserDialog(show) {
	this.showDeleteUserDialog = show
	},
	deleteUser() {
	const store = this.$store
	const user = this.user
	const { id, name } = user
	store.state.api.backendInteractor.deleteUser({ user }).then(() => {
	this.$store.dispatch(
	'markStatusesAsDeleted',
	(status) => user.id === status.user.id,
	)
	const isProfile =
	this.$route.name === 'external-user-profile' \|\|
	this.$route.name === 'user-profile'
	const isTargetUser =
	this.$route.params.name === name \|\| this.$route.params.id === id
	if (isProfile && isTargetUser) {
	window.history.back()
	}
	})
	},
	setToggled(value) {
	this.toggled = value
	},
	},
	}

	export default UserListMenu
	diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
	index 4e87dae7b7..d40103293f 100644
	--- a/src/components/user_profile/user_profile.js
	+++ b/src/components/user_profile/user_profile.js
	@@ -1,203 +1,204 @@
	import get from 'lodash/get'

	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	-import { useInstanceStore } from 'src/stores/instance.js'
	import withLoadMore from '../../hocs/with_load_more/with_load_more'
	import Conversation from '../conversation/conversation.vue'
	import FollowCard from '../follow_card/follow_card.vue'
	import List from '../list/list.vue'
	import Timeline from '../timeline/timeline.vue'
	import UserCard from '../user_card/user_card.vue'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'

	library.add(faCircleNotch)

	const FollowerList = withLoadMore({
	fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId),
	select: (props, $store) =>
	get($store.getters.findUser(props.userId), 'followerIds', []).map((id) =>
	$store.getters.findUser(id),
	),
	destroy: (props, $store) => $store.dispatch('clearFollowers', props.userId),
	childPropName: 'items',
	additionalPropNames: ['userId'],
	})(List)

	const FriendList = withLoadMore({
	fetch: (props, $store) => $store.dispatch('fetchFriends', props.userId),
	select: (props, $store) =>
	get($store.getters.findUser(props.userId), 'friendIds', []).map((id) =>
	$store.getters.findUser(id),
	),
	destroy: (props, $store) => $store.dispatch('clearFriends', props.userId),
	childPropName: 'items',
	additionalPropNames: ['userId'],
	})(List)

	const defaultTabKey = 'statuses'

	const UserProfile = {
	data() {
	return {
	error: false,
	userId: null,
	tab: defaultTabKey,
	footerRef: null,
	}
	},
	created() {
	const routeParams = this.$route.params
	this.load({ name: routeParams.name, id: routeParams.id })
	this.tab = get(this.$route, 'query.tab', defaultTabKey)
	},
	unmounted() {
	this.stopFetching()
	},
	computed: {
	timeline() {
	return this.$store.state.statuses.timelines.user
	},
	favorites() {
	return this.$store.state.statuses.timelines.favorites
	},
	media() {
	return this.$store.state.statuses.timelines.media
	},
	isUs() {
	return (
	this.userId &&
	this.$store.state.users.currentUser.id &&
	this.userId === this.$store.state.users.currentUser.id
	)
	},
	user() {
	return this.$store.getters.findUser(this.userId)
	},
	isExternal() {
	return this.$route.name === 'external-user-profile'
	},
	followsTabVisible() {
	return this.isUs \|\| !this.user.hide_follows
	},
	followersTabVisible() {
	return this.isUs \|\| !this.user.hide_followers
	},
	favoritesTabVisible() {
	return (
	this.isUs \|\|
	(useInstanceStore().featureSet.pleromaPublicFavouritesAvailable &&
	!this.user.hide_favorites)
	)
	},
	},
	methods: {
	setFooterRef(el) {
	this.footerRef = el
	},
	load(userNameOrId) {
	const startFetchingTimeline = (timeline, userId) => {
	// Clear timeline only if load another user's profile
	if (userId !== this.$store.state.statuses.timelines[timeline].userId) {
	this.$store.commit('clearTimeline', { timeline })
	}
	this.$store.dispatch('startFetchingTimeline', { timeline, userId })
	}

	const loadById = (userId) => {
	this.userId = userId
	startFetchingTimeline('user', userId)
	startFetchingTimeline('media', userId)
	if (this.isUs) {
	startFetchingTimeline('favorites')
	} else if (!this.user.hide_favorites) {
	startFetchingTimeline('favorites', userId)
	}
	// Fetch all pinned statuses immediately
	this.$store.dispatch('fetchPinnedStatuses', userId)
	}

	// Reset view
	this.userId = null
	this.error = false

	const maybeId = userNameOrId.id
	const maybeName = userNameOrId.name

	// Check if user data is already loaded in store
	const user = maybeId
	? this.$store.getters.findUser(maybeId)
	: this.$store.getters.findUserByName(maybeName)
	if (user) {
	loadById(user.id)
	} else {
	;(maybeId
	? this.$store.dispatch('fetchUser', maybeId)
	: this.$store.dispatch('fetchUserByName', maybeName)
	)
	.then(({ id }) => loadById(id))
	.catch((reason) => {
	const errorMessage = get(reason, 'error.error')
	if (errorMessage === 'No user with such user_id') {
	// Known error
	this.error = this.$t('user_profile.profile_does_not_exist')
	} else if (errorMessage) {
	this.error = errorMessage
	} else {
	this.error = this.$t('user_profile.profile_loading_error')
	}
	})
	}
	},
	stopFetching() {
	this.$store.dispatch('stopFetchingTimeline', 'user')
	this.$store.dispatch('stopFetchingTimeline', 'favorites')
	this.$store.dispatch('stopFetchingTimeline', 'media')
	},
	switchUser(userNameOrId) {
	this.stopFetching()
	this.load(userNameOrId)
	},
	onTabSwitch(tab) {
	this.tab = tab
	this.$router.replace({ query: { tab } })
	},
	linkClicked({ target }) {
	if (target.tagName === 'SPAN') {
	target = target.parentNode
	}
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	},
	},
	watch: {
	'$route.params.id': function (newVal) {
	if (newVal) {
	this.switchUser({ id: newVal })
	}
	},
	'$route.params.name': function (newVal) {
	if (newVal) {
	this.switchUser({ name: newVal })
	}
	},
	'$route.query': function (newVal) {
	this.tab = newVal.tab \|\| defaultTabKey
	},
	},
	components: {
	UserCard,
	Timeline,
	FollowerList,
	FriendList,
	FollowCard,
	TabSwitcher,
	Conversation,
	RichContent,
	},
	}

	export default UserProfile
	diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js
	index 39c264d5b3..aee741c7f8 100644
	--- a/src/components/user_reporting_modal/user_reporting_modal.js
	+++ b/src/components/user_reporting_modal/user_reporting_modal.js
	@@ -1,128 +1,129 @@
	-import { useReportsStore } from 'src/stores/reports'
	import Checkbox from '../checkbox/checkbox.vue'
	import List from '../list/list.vue'
	import Modal from '../modal/modal.vue'
	import Status from '../status/status.vue'
	import UserLink from '../user_link/user_link.vue'

	+import { useReportsStore } from 'src/stores/reports'
	+
	const UserReportingModal = {
	components: {
	Status,
	List,
	Checkbox,
	Modal,
	UserLink,
	},
	data() {
	return {
	comment: '',
	forward: false,
	statusIdsToReport: [],
	processing: false,
	error: false,
	}
	},
	computed: {
	reportModal() {
	return useReportsStore().reportModal
	},
	isLoggedIn() {
	return !!this.$store.state.users.currentUser
	},
	isOpen() {
	return this.isLoggedIn && this.reportModal.activated
	},
	userId() {
	return this.reportModal.userId
	},
	user() {
	return this.$store.getters.findUser(this.userId)
	},
	remoteInstance() {
	return (
	!this.user.is_local &&
	this.user.screen_name.substr(this.user.screen_name.indexOf('@') + 1)
	)
	},
	statuses() {
	return this.reportModal.statuses
	},
	preTickedIds() {
	return this.reportModal.preTickedIds
	},
	},
	watch: {
	userId: 'resetState',
	preTickedIds(newValue) {
	this.statusIdsToReport = newValue
	},
	},
	methods: {
	resetState() {
	// Reset state
	this.comment = ''
	this.forward = false
	this.statusIdsToReport = this.preTickedIds
	this.processing = false
	this.error = false
	},
	closeModal() {
	useReportsStore().closeUserReportingModal()
	},
	reportUser() {
	this.processing = true
	this.error = false
	const params = {
	userId: this.userId,
	comment: this.comment,
	forward: this.forward,
	statusIds: this.statusIdsToReport,
	}
	this.$store.state.api.backendInteractor
	.reportUser({ ...params })
	.then(() => {
	this.processing = false
	this.resetState()
	this.closeModal()
	})
	.catch(() => {
	this.processing = false
	this.error = true
	})
	},
	clearError() {
	this.error = false
	},
	isChecked(statusId) {
	return this.statusIdsToReport.indexOf(statusId) !== -1
	},
	toggleStatus(checked, statusId) {
	if (checked === this.isChecked(statusId)) {
	return
	}

	if (checked) {
	this.statusIdsToReport.push(statusId)
	} else {
	this.statusIdsToReport.splice(
	this.statusIdsToReport.indexOf(statusId),
	1,
	)
	}
	},
	resize(e) {
	const target = e.target \|\| e
	if (!(target instanceof window.Element)) {
	return
	}
	// Auto is needed to make textbox shrink when removing lines
	target.style.height = 'auto'
	target.style.height = `${target.scrollHeight}px`
	if (target.value === '') {
	target.style.height = null
	}
	},
	},
	}

	export default UserReportingModal
	diff --git a/src/components/user_timed_filter_modal/user_timed_filter_modal.js b/src/components/user_timed_filter_modal/user_timed_filter_modal.js
	index 66bb6bda29..6c005ab4b4 100644
	--- a/src/components/user_timed_filter_modal/user_timed_filter_modal.js
	+++ b/src/components/user_timed_filter_modal/user_timed_filter_modal.js
	@@ -1,106 +1,107 @@
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
	import Select from 'src/components/select/select.vue'
	+
	import { durationStrToMs } from 'src/services/date_utils/date_utils.js'

	const UserTimedFilterModal = {
	data() {
	const action = this.isMute
	? this.$store.getters.mergedConfig.onMuteDefaultAction
	: this.$store.getters.mergedConfig.onBlockDefaultAction
	const doAsk = action === 'ask'
	const defaultValues = {}

	if (doAsk \|\| action === 'forever') {
	defaultValues.expiration = 14
	defaultValues.expirationUnit = 'd'
	if (action === 'forever') {
	defaultValues.forever = true
	}
	} else {
	const unit = action.replace(/[0-9,.]+/, '')
	const value = action.replace(/[^0-9,.]+/, '')
	defaultValues.expiration = value
	defaultValues.expirationUnit = unit
	}

	return {
	showing: false,
	forever: false,
	dontAskAgain: false,
	...defaultValues,
	}
	},
	components: {
	ConfirmModal,
	Select,
	Checkbox,
	},
	props: {
	isMute: Boolean,
	user: Object,
	},
	computed: {
	shouldConfirm() {
	if (this.isMute) {
	return this.$store.getters.mergedConfig.onMuteDefaultAction === 'ask'
	} else {
	return this.$store.getters.mergedConfig.onBlockDefaultAction === 'ask'
	}
	},
	expiryString() {
	return this.expiration.toString() + this.expirationUnit
	},
	expirySeconds() {
	return Math.floor(durationStrToMs(this.expiryString) / 1000)
	},
	requestBody() {
	const object = { id: this.user.id }
	if (!this.forever) {
	object.expiresIn = this.expirySeconds
	}
	return object
	},
	},
	watch: {
	expiration(newVal) {
	if (newVal <= 0) {
	this.expiration = 1
	}
	},
	},
	methods: {
	optionallyPrompt() {
	if (this.shouldConfirm) {
	this.showing = true
	} else {
	this.accept()
	}
	},
	accept() {
	if (this.isMute) {
	this.$store.dispatch('muteUser', this.requestBody)
	if (this.dontAskAgain) {
	this.$store.dispatch('setOption', {
	name: 'onMuteDefaultAction',
	value: this.expiryString,
	})
	}
	} else {
	this.$store.dispatch('blockUser', this.requestBody)
	if (this.dontAskAgain) {
	this.$store.dispatch('setOption', {
	name: 'onBlockDefaultAction',
	value: this.expiryString,
	})
	}
	}
	this.showing = false
	},
	cancel() {
	this.showing = false
	},
	},
	}

	export default UserTimedFilterModal
	diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
	index 5a42b3fcfa..13787000ec 100644
	--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
	+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
	@@ -1,81 +1,83 @@
	import { shuffle } from 'lodash'

	-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	-import { useInstanceStore } from 'src/stores/instance.js'
	import apiService from '../../services/api/api.service.js'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	+
	function showWhoToFollow(panel, reply) {
	const shuffled = shuffle(reply)

	panel.usersToFollow.forEach((toFollow, index) => {
	const user = shuffled[index]
	const img = user.avatar \|\| useInstanceStore().defaultAvatar
	const name = user.acct

	toFollow.img = img
	toFollow.name = name

	panel.$store.state.api.backendInteractor
	.fetchUser({ id: name })
	.then((externalUser) => {
	if (!externalUser.error) {
	panel.$store.commit('addNewUsers', [externalUser])
	toFollow.id = externalUser.id
	}
	})
	})
	}

	function getWhoToFollow(panel) {
	const credentials = panel.$store.state.users.currentUser.credentials
	if (credentials) {
	panel.usersToFollow.forEach((toFollow) => {
	toFollow.name = 'Loading...'
	})
	apiService.suggestions({ credentials }).then((reply) => {
	showWhoToFollow(panel, reply)
	})
	}
	}

	const WhoToFollowPanel = {
	data: () => ({
	usersToFollow: [],
	}),
	computed: {
	user: function () {
	return this.$store.state.users.currentUser.screen_name
	},
	suggestionsEnabled() {
	return useInstanceStore().featureSet.suggestionsEnabled
	},
	},
	methods: {
	userProfileLink(id, name) {
	return generateProfileLink(
	id,
	name,
	useInstanceStore().restrictedNicknames,
	)
	},
	},
	watch: {
	user: function () {
	if (this.suggestionsEnabled) {
	getWhoToFollow(this)
	}
	},
	},
	mounted: function () {
	this.usersToFollow = new Array(3).fill().map(() => ({
	img: useInstanceStore().defaultAvatar,
	name: '',
	id: 0,
	}))
	if (this.suggestionsEnabled) {
	getWhoToFollow(this)
	}
	},
	}

	export default WhoToFollowPanel
	diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js
	index 90f602c40b..f7e2b0b086 100644
	--- a/src/lib/persisted_state.js
	+++ b/src/lib/persisted_state.js
	@@ -1,264 +1,265 @@
	import { cloneDeep, each, get, set } from 'lodash'
	import merge from 'lodash.merge'

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

	+import { useInterfaceStore } from 'src/stores/interface'
	+
	let loaded = false

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

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

	const defaultStorage = (() => {
	return storage
	})()

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

	store.replaceState(merge({}, store.state, savedState))
	}
	loaded = true
	} catch (e) {
	console.error("Couldn't load state")
	console.error(e)
	loaded = true
	}
	subscriber(store)((mutation, state) => {
	try {
	if (saveImmedeatelyActions.includes(mutation.type)) {
	setState(key, reducer(cloneDeep(state), paths), storage).then(
	(success) => {
	if (typeof success !== 'undefined') {
	if (
	mutation.type === 'setOption' \|\|
	mutation.type === 'setCurrentUser'
	) {
	useInterfaceStore().settingsSaved({ success })
	}
	}
	},
	(error) => {
	if (
	mutation.type === 'setOption' \|\|
	mutation.type === 'setCurrentUser'
	) {
	useInterfaceStore().settingsSaved({ error })
	}
	},
	)
	}
	} catch (e) {
	console.error("Couldn't persist state:")
	console.error(e)
	}
	})
	}
	})
	}

	/**
	* This persists state for pinia, which falls back to read from the vuex state
	* if pinia persisted state does not exist.
	*
	* When you migrate a module from vuex to pinia, you have to keep the original name.
	* If the module was called `xxx`, the name of the store has to be `xxx` too.
	*
	* This adds one property to the store, $persistLoaded, which is a promise
	* that resolves when the initial state is loaded. If the plugin is not enabled,
	* $persistLoaded is a promise that resolves immediately.
	* If we are not able to get the stored state because storage.getItem() throws or
	* rejects, $persistLoaded will be a rejected promise with the thrown error.
	*
	* Call signature:
	*
	* defineStore(name, {
	* ...,
	* // setting the `persist` property enables this plugin
	* // IMPORTANT: by default it is disabled, you have to set `persist` to at least an empty object
	* persist: {
	* // set to list of individual paths, or undefined/unset to persist everything
	* paths: [],
	* // function to call after loading initial state
	* // if afterLoad is a function, it must return a state object that will be sent to `store.$patch`, or a promise to the state object
	* // by default afterLoad is undefined
	* afterLoad: (originalState) => {
	* // ...
	* return modifiedState
	* },
	* // if it exists, only persist state after these actions
	* // if it doesn't exist or is undefined, persist state after every mutation of the state
	* saveImmediatelyActions: [],
	* // what to do after successfully saving the state
	* onSaveSuccess: () => {},
	* // what to do after there is an error saving the state
	* onSaveError: () => {}
	* }
	* })
	*
	*/
	export const piniaPersistPlugin =
	({
	vuexKey = 'vuex-lz',
	keyFunction = (id) => `pinia-local-${id}`,
	storage = defaultStorage,
	reducer = defaultReducer,
	} = {}) =>
	({ store, options }) => {
	if (!options.persist) {
	return {
	$persistLoaded: Promise.resolve(),
	}
	}

	let resolveLoaded
	let rejectLoaded
	const loadedPromise = new Promise((resolve, reject) => {
	resolveLoaded = resolve
	rejectLoaded = reject
	})

	const {
	afterLoad,
	paths = [],
	saveImmediatelyActions,
	onSaveSuccess = () => {
	/* no-op */
	},
	onSaveError = () => {
	/* no-op */
	},
	} = options.persist \|\| {}

	const loadedGuard = { loaded: false }
	const key = keyFunction(store.$id)
	const getState = async () => {
	const id = store.$id
	const value = await storage.getItem(key)
	if (value) {
	return value
	}

	const fallbackValue = await storage.getItem(vuexKey)
	if (fallbackValue && fallbackValue[id]) {
	console.info(`Migrating ${id} store data from vuex to pinia`)
	const res = fallbackValue[id]
	await storage.setItem(key, res)
	return res
	}

	return {}
	}

	const setState = (state) => {
	if (!loadedGuard.loaded) {
	console.info('waiting for old state to be loaded...')
	return Promise.reject()
	} else {
	return storage.setItem(key, state)
	}
	}

	const getMaybeAugmentedState = async () => {
	const savedRawState = await getState()
	if (typeof afterLoad === 'function') {
	try {
	return await afterLoad(savedRawState)
	} catch (e) {
	console.error('Error running afterLoad:', e)
	return savedRawState
	}
	} else {
	return savedRawState
	}
	}

	const persistCurrentState = async (state) => {
	const stateClone = cloneDeep(state)
	const stateToPersist = reducer(stateClone, paths)
	try {
	const res = await setState(stateToPersist)
	onSaveSuccess(res)
	} catch (e) {
	console.error('Cannot persist state:', e)
	onSaveError(e)
	}
	}

	getMaybeAugmentedState().then(
	(savedState) => {
	if (savedState) {
	store.$patch(savedState)
	}

	loadedGuard.loaded = true
	resolveLoaded()

	// only subscribe after we have done setting the initial state
	if (!saveImmediatelyActions) {
	store.$subscribe(async (_mutation, state) => {
	await persistCurrentState(state)
	})
	} else {
	store.$onAction(({ name, store, after }) => {
	if (saveImmediatelyActions.includes(name)) {
	after(() => persistCurrentState(store.$state))
	}
	})
	}
	},
	(error) => {
	console.error('Cannot load storage:', error)
	rejectLoaded(error)
	},
	)

	return {
	$persistLoaded: loadedPromise,
	}
	}
	diff --git a/src/modules/api.js b/src/modules/api.js
	index a901f50236..d658433fe2 100644
	--- a/src/modules/api.js
	+++ b/src/modules/api.js
	@@ -1,363 +1,364 @@
	import { Socket } from 'phoenix'

	-import { useInstanceStore } from 'src/stores/instance.js'
	-import { useInterfaceStore } from 'src/stores/interface.js'
	-import { useShoutStore } from 'src/stores/shout.js'
	import { WSConnectionStatus } from '../services/api/api.service.js'
	import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
	import { maybeShowChatNotification } from '../services/chat_utils/chat_utils.js'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInterfaceStore } from 'src/stores/interface.js'
	+import { useShoutStore } from 'src/stores/shout.js'
	+
	const retryTimeout = (multiplier) => 1000 * multiplier

	const api = {
	state: {
	retryMultiplier: 1,
	backendInteractor: backendInteractorService(),
	fetchers: {},
	socket: null,
	mastoUserSocket: null,
	mastoUserSocketStatus: null,
	followRequests: [],
	},
	getters: {
	followRequestCount: (state) => state.followRequests.length,
	},
	mutations: {
	setBackendInteractor(state, backendInteractor) {
	state.backendInteractor = backendInteractor
	},
	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
	state.mastoUserSocket = state.backendInteractor.startUserSocket({
	store,
	})
	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' &&
	!useInstanceStore().featureSet.pleromaPublicFavouritesAvailable
	)
	return
	if (store.state.fetchers[timeline]) return

	const fetcher = store.state.backendInteractor.startFetchingTimeline({
	timeline,
	store,
	userId,
	listId,
	statusId,
	bookmarkFolderId,
	tag,
	})
	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 }) {
	store.state.backendInteractor.fetchTimeline({
	store,
	timeline,
	...rest,
	})
	},

	// Notifications
	startFetchingNotifications(store) {
	if (store.state.fetchers.notifications) return
	const fetcher = store.state.backendInteractor.startFetchingNotifications({
	store,
	})
	store.commit('addFetcher', { fetcherName: 'notifications', fetcher })
	},
	stopFetchingNotifications(store) {
	const fetcher = store.state.fetchers.notifications
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: 'notifications', fetcher })
	},
	fetchNotifications(store, { ...rest }) {
	store.state.backendInteractor.fetchNotifications({
	store,
	...rest,
	})
	},

	// Follow requests
	startFetchingFollowRequests(store) {
	if (store.state.fetchers.followRequests) return
	const fetcher = store.state.backendInteractor.startFetchingFollowRequests(
	{ store },
	)

	store.commit('addFetcher', { fetcherName: 'followRequests', fetcher })
	},
	stopFetchingFollowRequests(store) {
	const fetcher = store.state.fetchers.followRequests
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: 'followRequests', fetcher })
	},
	removeFollowRequest(store, request) {
	const requests = store.state.followRequests.filter((it) => it !== request)
	store.commit('setFollowRequests', requests)
	},

	// Lists
	startFetchingLists(store) {
	if (store.state.fetchers.lists) return
	const fetcher = store.state.backendInteractor.startFetchingLists({
	store,
	})
	store.commit('addFetcher', { fetcherName: 'lists', fetcher })
	},
	stopFetchingLists(store) {
	const fetcher = store.state.fetchers.lists
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: 'lists', fetcher })
	},

	// Bookmark folders
	startFetchingBookmarkFolders(store) {
	if (store.state.fetchers.bookmarkFolders) return
	if (!useInstanceStore().featureSet.pleromaBookmarkFoldersAvailable) return
	const fetcher =
	store.state.backendInteractor.startFetchingBookmarkFolders({ store })
	store.commit('addFetcher', { fetcherName: 'bookmarkFolders', fetcher })
	},
	stopFetchingBookmarkFolders(store) {
	const fetcher = store.state.fetchers.bookmarkFolders
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: 'bookmarkFolders', fetcher })
	},

	// Pleroma websocket
	setWsToken(store, token) {
	store.commit('setWsToken', token)
	},
	initializeSocket({ commit, state, rootState }) {
	// Set up websocket connection
	const token = state.wsToken
	if (
	useInstanceStore().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/config.js b/src/modules/config.js
	index 3053f97454..508ddafc6e 100644
	--- a/src/modules/config.js
	+++ b/src/modules/config.js
	@@ -1,200 +1,201 @@
	import Cookies from 'js-cookie'
	import { set } from 'lodash'

	-import { useEmojiStore } from 'src/stores/emoji.js'
	-import { useI18nStore } from 'src/stores/i18n.js'
	-import { useInstanceStore } from 'src/stores/instance.js'
	-import { useInterfaceStore } from 'src/stores/interface.js'
	import messages from '../i18n/messages'
	import localeService from '../services/locale/locale.service.js'
	import { applyConfig } from '../services/style_setter/style_setter.js'
	import { defaultState, instanceDefaultConfig } from './default_config_state.js'

	+import { useEmojiStore } from 'src/stores/emoji.js'
	+import { useI18nStore } from 'src/stores/i18n.js'
	+import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInterfaceStore } from 'src/stores/interface.js'
	+
	const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'
	const APPEARANCE_SETTINGS_KEYS = new Set([
	'sidebarColumnWidth',
	'contentColumnWidth',
	'notifsColumnWidth',
	'themeEditorMinWidth',
	'textSize',
	'navbarSize',
	'panelHeaderSize',
	'forcedRoundness',
	'emojiSize',
	'emojiReactionsScale',
	])

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

	// caching the instance default properties
	export const instanceDefaultProperties = Object.keys(instanceDefaultConfig)

	const config = {
	state: { ...defaultState },
	getters: {
	defaultConfig() {
	return {
	...defaultState,
	...Object.fromEntries(
	instanceDefaultProperties.map((key) => [
	key,
	useInstanceStore().prefsStorage[key],
	]),
	),
	}
	},
	mergedConfig(state) {
	const instancePrefs = useInstanceStore().prefsStorage
	console.log(state)
	const result = Object.fromEntries(
	Object.keys(defaultState).map((key) => [
	key,
	state[key] ?? instancePrefs[key],
	]),
	)
	return result
	},
	},
	mutations: {
	setOptionTemporarily(state, { name, value }) {
	set(state, name, value)
	applyConfig(state)
	},
	setOption(state, { name, value }) {
	set(state, name, value)
	},
	setHighlight(state, { user, color, type }) {
	const data = this.state.config.highlight[user]
	if (color \|\| type) {
	state.highlight[user] = {
	color: color \|\| data.color,
	type: type \|\| data.type,
	}
	} else {
	delete state.highlight[user]
	}
	},
	},
	actions: {
	loadSettings({ dispatch }, data) {
	const knownKeys = new Set(Object.keys(defaultState))
	const presentKeys = new Set(Object.keys(data))
	const intersection = new Set()
	for (const elem of presentKeys) {
	if (knownKeys.has(elem)) {
	intersection.add(elem)
	}
	}

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

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

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

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

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

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

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

	export default config
	diff --git a/src/modules/notifications.js b/src/modules/notifications.js
	index 7667a20d00..76e032b9ef 100644
	--- a/src/modules/notifications.js
	+++ b/src/modules/notifications.js
	@@ -1,188 +1,189 @@
	-import { useReportsStore } from 'src/stores/reports.js'
	-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
	import apiService from '../services/api/api.service.js'
	import {
	closeAllDesktopNotifications,
	closeDesktopNotification,
	} from '../services/desktop_notification_utils/desktop_notification_utils.js'
	import {
	isStatusNotification,
	isValidNotification,
	maybeShowNotification,
	} from '../services/notification_utils/notification_utils.js'

	+import { useReportsStore } from 'src/stores/reports.js'
	+import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
	+
	const emptyNotifications = () => ({
	desktopNotificationSilence: true,
	maxId: 0,
	minId: Number.POSITIVE_INFINITY,
	data: [],
	idStore: {},
	loading: false,
	})

	export const defaultState = () => ({
	...emptyNotifications(),
	})

	export const notifications = {
	state: defaultState(),
	mutations: {
	addNewNotifications(state, { notifications }) {
	notifications.forEach((notification) => {
	state.data.push(notification)
	state.idStore[notification.id] = notification
	})
	},
	clearNotifications(state) {
	const blankState = defaultState()
	Object.keys(state).forEach((k) => {
	state[k] = blankState[k]
	})
	},
	updateNotificationsMinMaxId(state, id) {
	state.maxId = id > state.maxId ? id : state.maxId
	state.minId = id < state.minId ? id : state.minId
	},
	setNotificationsLoading(state, { value }) {
	state.loading = value
	},
	setNotificationsSilence(state, { value }) {
	state.desktopNotificationSilence = value
	},
	markNotificationsAsSeen(state) {
	state.data.forEach((notification) => {
	notification.seen = true
	})
	},
	markSingleNotificationAsSeen(state, { id }) {
	const notification = state.idStore[id]
	if (notification) notification.seen = true
	},
	dismissNotification(state, { id }) {
	state.data = state.data.filter((n) => n.id !== id)
	delete state.idStore[id]
	},
	updateNotification(state, { id, updater }) {
	const notification = state.idStore[id]
	notification && updater(notification)
	},
	},
	actions: {
	addNewNotifications(store, { notifications }) {
	const { commit, dispatch, state, rootState } = store
	const validNotifications = notifications.filter((notification) => {
	// If invalid notification, update ids but don't add it to store
	if (!isValidNotification(notification)) {
	console.error('Invalid notification:', notification)
	commit('updateNotificationsMinMaxId', notification.id)
	return false
	}
	return true
	})

	const statusNotifications = validNotifications.filter(
	(notification) =>
	isStatusNotification(notification.type) && notification.status,
	)

	// Synchronous commit to add all the statuses
	commit('addNewStatuses', {
	statuses: statusNotifications.map(
	(notification) => notification.status,
	),
	})

	// Update references to statuses in notifications to ones in the store
	statusNotifications.forEach((notification) => {
	const id = notification.status.id
	const referenceStatus = rootState.statuses.allStatusesObject[id]

	if (referenceStatus) {
	notification.status = referenceStatus
	}
	})

	validNotifications.forEach((notification) => {
	if (notification.type === 'pleroma:report') {
	useReportsStore().addReport(notification.report)
	}

	if (notification.type === 'pleroma:emoji_reaction') {
	dispatch('fetchEmojiReactionsBy', notification.status.id)
	}

	// Only add a new notification if we don't have one for the same action
	if (!Object.hasOwn(state.idStore, notification.id)) {
	commit('updateNotificationsMinMaxId', notification.id)
	commit('addNewNotifications', { notifications: [notification] })

	maybeShowNotification(
	store,
	Object.values(
	useServerSideStorageStore().prefsStorage.simple.muteFilters,
	),
	notification,
	)
	} else if (notification.seen) {
	state.idStore[notification.id].seen = true
	}
	})
	},
	notificationClicked({ state, dispatch }, { id }) {
	const notification = state.idStore[id]
	const { type, seen } = notification

	if (!seen) {
	switch (type) {
	case 'mention':
	case 'pleroma:report':
	case 'follow_request':
	break
	default:
	dispatch('markSingleNotificationAsSeen', { id })
	}
	}
	},
	setNotificationsLoading({ commit }, { value }) {
	commit('setNotificationsLoading', { value })
	},
	setNotificationsSilence({ commit }, { value }) {
	commit('setNotificationsSilence', { value })
	},
	markNotificationsAsSeen({ rootState, state, commit }) {
	commit('markNotificationsAsSeen')
	apiService
	.markNotificationsAsSeen({
	id: state.maxId,
	credentials: rootState.users.currentUser.credentials,
	})
	.then(() => {
	closeAllDesktopNotifications(rootState)
	})
	},
	markSingleNotificationAsSeen({ rootState, commit }, { id }) {
	commit('markSingleNotificationAsSeen', { id })
	apiService
	.markNotificationsAsSeen({
	single: true,
	id,
	credentials: rootState.users.currentUser.credentials,
	})
	.then(() => {
	closeDesktopNotification(rootState, { id })
	})
	},
	dismissNotificationLocal({ commit }, { id }) {
	commit('dismissNotification', { id })
	},
	dismissNotification({ rootState, commit }, { id }) {
	commit('dismissNotification', { id })
	rootState.api.backendInteractor.dismissNotification({ id })
	},
	updateNotification({ commit }, { id, updater }) {
	commit('updateNotification', { id, updater })
	},
	},
	}

	export default notifications
	diff --git a/src/modules/statuses.js b/src/modules/statuses.js
	index bf65002382..43aeeb9a65 100644
	--- a/src/modules/statuses.js
	+++ b/src/modules/statuses.js
	@@ -1,835 +1,836 @@
	import {
	each,
	find,
	findIndex,
	first,
	isArray,
	last,
	maxBy,
	merge,
	minBy,
	omitBy,
	remove,
	slice,
	} from 'lodash'

	-import { useInterfaceStore } from 'src/stores/interface'
	import apiService from '../services/api/api.service.js'

	+import { useInterfaceStore } from 'src/stores/interface'
	+
	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(),
	pleromaScrobblesAvailable: true, // not reported in nodeinfo
	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 = state.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
	apiService
	.fetchScrobbles({ accountId: user.id })
	.then((scrobbles) => {
	if (scrobbles?.error) {
	state.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')
	console.warn(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,
	},
	) {
	commit('addNewStatuses', {
	statuses,
	showImmediately,
	timeline,
	noIdUpdate,
	user: rootState.users.currentUser,
	userId,
	pagination,
	})
	},
	fetchStatus({ rootState, dispatch }, id) {
	return rootState.api.backendInteractor
	.fetchStatus({ id })
	.then((status) => dispatch('addNewStatuses', { statuses: [status] }))
	},
	fetchStatusSource({ rootState }, status) {
	return apiService.fetchStatusSource({
	id: status.id,
	credentials: rootState.users.currentUser.credentials,
	})
	},
	fetchStatusHistory(_, status) {
	return apiService.fetchStatusHistory({ status })
	},
	deleteStatus({ rootState, commit }, status) {
	apiService
	.deleteStatus({
	id: status.id,
	credentials: rootState.users.currentUser.credentials,
	})
	.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 })
	rootState.api.backendInteractor
	.favorite({ id: status.id })
	.then((status) =>
	commit('setFavoritedConfirm', {
	status,
	user: rootState.users.currentUser,
	}),
	)
	},
	unfavorite({ rootState, commit }, status) {
	// Optimistic unfavoriting...
	commit('setFavorited', { status, value: false })
	rootState.api.backendInteractor
	.unfavorite({ id: status.id })
	.then((status) =>
	commit('setFavoritedConfirm', {
	status,
	user: rootState.users.currentUser,
	}),
	)
	},
	fetchPinnedStatuses({ rootState, dispatch }, userId) {
	rootState.api.backendInteractor
	.fetchPinnedStatuses({ id: userId })
	.then((statuses) =>
	dispatch('addNewStatuses', {
	statuses,
	timeline: 'user',
	userId,
	showImmediately: true,
	noIdUpdate: true,
	}),
	)
	},
	pinStatus({ rootState, dispatch }, statusId) {
	return rootState.api.backendInteractor
	.pinOwnStatus({ id: statusId })
	.then((status) => dispatch('addNewStatuses', { statuses: [status] }))
	},
	unpinStatus({ rootState, dispatch }, statusId) {
	rootState.api.backendInteractor
	.unpinOwnStatus({ id: statusId })
	.then((status) => dispatch('addNewStatuses', { statuses: [status] }))
	},
	muteConversation({ rootState, commit }, { id: statusId }) {
	return rootState.api.backendInteractor
	.muteConversation({ id: statusId })
	.then((status) => commit('setMutedStatus', status))
	},
	unmuteConversation({ rootState, commit }, { id: statusId }) {
	return rootState.api.backendInteractor
	.unmuteConversation({ id: statusId })
	.then((status) => commit('setMutedStatus', status))
	},
	retweet({ rootState, commit }, status) {
	// Optimistic retweeting...
	commit('setRetweeted', { status, value: true })
	rootState.api.backendInteractor
	.retweet({ id: status.id })
	.then((status) =>
	commit('setRetweetedConfirm', {
	status: status.retweeted_status,
	user: rootState.users.currentUser,
	}),
	)
	},
	unretweet({ rootState, commit }, status) {
	// Optimistic unretweeting...
	commit('setRetweeted', { status, value: false })
	rootState.api.backendInteractor
	.unretweet({ id: status.id })
	.then((status) =>
	commit('setRetweetedConfirm', {
	status,
	user: rootState.users.currentUser,
	}),
	)
	},
	bookmark({ rootState, commit }, status) {
	commit('setBookmarked', { status, value: true })
	rootState.api.backendInteractor
	.bookmarkStatus({ id: status.id, folder_id: status.bookmark_folder_id })
	.then((status) => {
	commit('setBookmarkedConfirm', { status })
	})
	},
	unbookmark({ rootState, commit }, status) {
	commit('setBookmarked', { status, value: false })
	rootState.api.backendInteractor
	.unbookmarkStatus({ id: status.id })
	.then((status) => {
	commit('setBookmarkedConfirm', { status })
	})
	},
	queueFlush({ commit }, { timeline, id }) {
	commit('queueFlush', { timeline, id })
	},
	queueFlushAll({ commit }) {
	commit('queueFlushAll')
	},
	fetchFavsAndRepeats({ rootState, commit }, id) {
	Promise.all([
	rootState.api.backendInteractor.fetchFavoritedByUsers({ id }),
	rootState.api.backendInteractor.fetchRebloggedByUsers({ id }),
	]).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 })
	rootState.api.backendInteractor.reactWithEmoji({ id, emoji }).then(() => {
	dispatch('fetchEmojiReactionsBy', id)
	})
	},
	unreactWithEmoji({ rootState, dispatch, commit }, { id, emoji }) {
	const currentUser = rootState.users.currentUser
	if (!currentUser) return

	commit('removeOwnReaction', { id, emoji, currentUser })
	rootState.api.backendInteractor
	.unreactWithEmoji({ id, emoji })
	.then(() => {
	dispatch('fetchEmojiReactionsBy', id)
	})
	},
	fetchEmojiReactionsBy({ rootState, commit }, id) {
	return rootState.api.backendInteractor
	.fetchEmojiReactions({ id })
	.then((emojiReactions) => {
	commit('addEmojiReactionsBy', {
	id,
	emojiReactions,
	currentUser: rootState.users.currentUser,
	})
	})
	},
	fetchFavs({ rootState, commit }, id) {
	rootState.api.backendInteractor
	.fetchFavoritedByUsers({ id })
	.then((favoritedByUsers) =>
	commit('addFavs', {
	id,
	favoritedByUsers,
	currentUser: rootState.users.currentUser,
	}),
	)
	},
	fetchRepeats({ rootState, commit }, id) {
	rootState.api.backendInteractor
	.fetchRebloggedByUsers({ id })
	.then((rebloggedByUsers) =>
	commit('addRepeats', {
	id,
	rebloggedByUsers,
	currentUser: rootState.users.currentUser,
	}),
	)
	},
	search(store, { q, resolve, limit, offset, following, type }) {
	return store.rootState.api.backendInteractor
	.search2({ q, resolve, limit, offset, following, type })
	.then((data) => {
	store.commit('addNewUsers', data.accounts)
	store.commit(
	'addNewUsers',
	data.statuses.map((s) => s.user).filter((u) => u),
	)
	store.commit('addNewStatuses', { statuses: data.statuses })
	return data
	})
	},
	setVirtualHeight({ commit }, { statusId, height }) {
	commit('setVirtualHeight', { statusId, height })
	},
	},
	mutations,
	}

	export default statuses
	diff --git a/src/modules/users.js b/src/modules/users.js
	index c3267828d3..04c4440717 100644
	--- a/src/modules/users.js
	+++ b/src/modules/users.js
	@@ -1,841 +1,843 @@
	import {
	compact,
	concat,
	each,
	isArray,
	last,
	map,
	mergeWith,
	uniq,
	} from 'lodash'

	-import { declarations } from 'src/modules/config_declaration'
	-import { useEmojiStore } from 'src/stores/emoji.js'
	-import { useInstanceStore } from 'src/stores/instance.js'
	-import { useInterfaceStore } from 'src/stores/interface.js'
	-import { useOAuthStore } from 'src/stores/oauth.js'
	-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
	import apiService from '../services/api/api.service.js'
	import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
	import oauthApi from '../services/new_api/oauth.js'
	import {
	registerPushNotifications,
	unregisterPushNotifications,
	} from '../services/sw/sw.js'
	import {
	windowHeight,
	windowWidth,
	} from '../services/window_utils/window_utils'

	+import { useEmojiStore } from 'src/stores/emoji.js'
	+import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInterfaceStore } from 'src/stores/interface.js'
	+import { useOAuthStore } from 'src/stores/oauth.js'
	+import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
	+
	+import { declarations } from 'src/modules/config_declaration'
	+
	// TODO: Unify with mergeOrAdd in statuses.js
	export const mergeOrAdd = (arr, obj, item) => {
	if (!item) {
	return false
	}
	const oldItem = obj[item.id]
	if (oldItem) {
	// We already have this, so only merge the new info.
	mergeWith(oldItem, item, mergeArrayLength)
	return { item: oldItem, new: false }
	} else {
	// This is a new item, prepare it
	arr.push(item)
	obj[item.id] = item
	return { item, new: true }
	}
	}

	const mergeArrayLength = (oldValue, newValue) => {
	if (isArray(oldValue) && isArray(newValue)) {
	oldValue.length = newValue.length
	return mergeWith(oldValue, newValue, mergeArrayLength)
	}
	}

	const getNotificationPermission = () => {
	const Notification = window.Notification

	if (!Notification) return Promise.resolve(null)
	if (Notification.permission === 'default')
	return Notification.requestPermission()
	return Promise.resolve(Notification.permission)
	}

	const blockUser = (store, args) => {
	const id = args.id
	const expiresIn = typeof args === 'object' ? args.expiresIn : 0

	const predictedRelationship = store.state.relationships[id] \|\| { id }
	store.commit('updateUserRelationship', [predictedRelationship])
	store.commit('addBlockId', id)

	return store.rootState.api.backendInteractor
	.blockUser({ id, expiresIn })
	.then((relationship) => {
	store.commit('updateUserRelationship', [relationship])
	store.commit('addBlockId', id)

	store.commit('removeStatus', { timeline: 'friends', userId: id })
	store.commit('removeStatus', { timeline: 'public', userId: id })
	store.commit('removeStatus', {
	timeline: 'publicAndExternal',
	userId: id,
	})
	})
	}

	const unblockUser = (store, id) => {
	return store.rootState.api.backendInteractor
	.unblockUser({ id })
	.then((relationship) =>
	store.commit('updateUserRelationship', [relationship]),
	)
	}

	const removeUserFromFollowers = (store, id) => {
	return store.rootState.api.backendInteractor
	.removeUserFromFollowers({ id })
	.then((relationship) =>
	store.commit('updateUserRelationship', [relationship]),
	)
	}

	const editUserNote = (store, { id, comment }) => {
	return store.rootState.api.backendInteractor
	.editUserNote({ id, comment })
	.then((relationship) =>
	store.commit('updateUserRelationship', [relationship]),
	)
	}

	const muteUser = (store, args) => {
	const id = typeof args === 'object' ? args.id : args
	const expiresIn = typeof args === 'object' ? args.expiresIn : 0

	const predictedRelationship = store.state.relationships[id] \|\| { id }
	store.commit('updateUserRelationship', [predictedRelationship])
	store.commit('addMuteId', id)

	return store.rootState.api.backendInteractor
	.muteUser({ id, expiresIn })
	.then((relationship) => {
	store.commit('updateUserRelationship', [relationship])
	store.commit('addMuteId', id)
	})
	}

	const unmuteUser = (store, id) => {
	const predictedRelationship = store.state.relationships[id] \|\| { id }
	predictedRelationship.muting = false
	store.commit('updateUserRelationship', [predictedRelationship])

	return store.rootState.api.backendInteractor
	.unmuteUser({ id })
	.then((relationship) =>
	store.commit('updateUserRelationship', [relationship]),
	)
	}

	const hideReblogs = (store, userId) => {
	return store.rootState.api.backendInteractor
	.followUser({ id: userId, reblogs: false })
	.then((relationship) => {
	store.commit('updateUserRelationship', [relationship])
	})
	}

	const showReblogs = (store, userId) => {
	return store.rootState.api.backendInteractor
	.followUser({ id: userId, reblogs: true })
	.then((relationship) =>
	store.commit('updateUserRelationship', [relationship]),
	)
	}

	const muteDomain = (store, domain) => {
	return store.rootState.api.backendInteractor
	.muteDomain({ domain })
	.then(() => store.commit('addDomainMute', domain))
	}

	const unmuteDomain = (store, domain) => {
	return store.rootState.api.backendInteractor
	.unmuteDomain({ domain })
	.then(() => store.commit('removeDomainMute', domain))
	}

	export const mutations = {
	tagUser(state, { user: { id }, tag }) {
	const user = state.usersObject[id]
	const tags = user.tags \|\| []
	const newTags = tags.concat([tag])
	user.tags = newTags
	},
	untagUser(state, { user: { id }, tag }) {
	const user = state.usersObject[id]
	const tags = user.tags \|\| []
	const newTags = tags.filter((t) => t !== tag)
	user.tags = newTags
	},
	updateRight(state, { user: { id }, right, value }) {
	const user = state.usersObject[id]
	const newRights = user.rights
	newRights[right] = value
	user.rights = newRights
	},
	updateActivationStatus(state, { user: { id }, deactivated }) {
	const user = state.usersObject[id]
	user.deactivated = deactivated
	},
	setCurrentUser(state, user) {
	state.lastLoginName = user.screen_name
	state.currentUser = mergeWith(
	state.currentUser \|\| {},
	user,
	mergeArrayLength,
	)
	},
	clearCurrentUser(state) {
	state.currentUser = false
	state.lastLoginName = false
	},
	beginLogin(state) {
	state.loggingIn = true
	},
	endLogin(state) {
	state.loggingIn = false
	},
	saveFriendIds(state, { id, friendIds }) {
	const user = state.usersObject[id]
	user.friendIds = uniq(concat(user.friendIds \|\| [], friendIds))
	},
	saveFollowerIds(state, { id, followerIds }) {
	const user = state.usersObject[id]
	user.followerIds = uniq(concat(user.followerIds \|\| [], followerIds))
	},
	// Because frontend doesn't have a reason to keep these stuff in memory
	// outside of viewing someones user profile.
	clearFriends(state, userId) {
	const user = state.usersObject[userId]
	if (user) {
	user.friendIds = []
	}
	},
	clearFollowers(state, userId) {
	const user = state.usersObject[userId]
	if (user) {
	user.followerIds = []
	}
	},
	addNewUsers(state, users) {
	each(users, (user) => {
	if (user.relationship) {
	state.relationships[user.relationship.id] = user.relationship
	}
	const res = mergeOrAdd(state.users, state.usersObject, user)
	const item = res.item
	if (res.new && item.screen_name && !item.screen_name.includes('@')) {
	state.usersByNameObject[item.screen_name.toLowerCase()] = item
	}
	})
	},
	updateUserRelationship(state, relationships) {
	relationships.forEach((relationship) => {
	state.relationships[relationship.id] = relationship
	})
	},
	updateUserInLists(state, { id, inLists }) {
	state.usersObject[id].inLists = inLists
	},
	saveBlockIds(state, blockIds) {
	state.currentUser.blockIds = blockIds
	},
	addBlockId(state, blockId) {
	if (state.currentUser.blockIds.indexOf(blockId) === -1) {
	state.currentUser.blockIds.push(blockId)
	}
	},
	setBlockIdsMaxId(state, blockIdsMaxId) {
	state.currentUser.blockIdsMaxId = blockIdsMaxId
	},
	saveMuteIds(state, muteIds) {
	state.currentUser.muteIds = muteIds
	},
	setMuteIdsMaxId(state, muteIdsMaxId) {
	state.currentUser.muteIdsMaxId = muteIdsMaxId
	},
	addMuteId(state, muteId) {
	if (state.currentUser.muteIds.indexOf(muteId) === -1) {
	state.currentUser.muteIds.push(muteId)
	}
	},
	saveDomainMutes(state, domainMutes) {
	state.currentUser.domainMutes = domainMutes
	},
	addDomainMute(state, domain) {
	if (state.currentUser.domainMutes.indexOf(domain) === -1) {
	state.currentUser.domainMutes.push(domain)
	}
	},
	removeDomainMute(state, domain) {
	const index = state.currentUser.domainMutes.indexOf(domain)
	if (index !== -1) {
	state.currentUser.domainMutes.splice(index, 1)
	}
	},
	setPinnedToUser(state, status) {
	const user = state.usersObject[status.user.id]
	user.pinnedStatusIds = user.pinnedStatusIds \|\| []
	const index = user.pinnedStatusIds.indexOf(status.id)

	if (status.pinned && index === -1) {
	user.pinnedStatusIds.push(status.id)
	} else if (!status.pinned && index !== -1) {
	user.pinnedStatusIds.splice(index, 1)
	}
	},
	setUserForStatus(state, status) {
	status.user = state.usersObject[status.user.id]
	},
	setUserForNotification(state, notification) {
	if (notification.type !== 'follow') {
	notification.action.user = state.usersObject[notification.action.user.id]
	}
	notification.from_profile = state.usersObject[notification.from_profile.id]
	},
	setColor(state, { user: { id }, highlighted }) {
	const user = state.usersObject[id]
	user.highlight = highlighted
	},
	signUpPending(state) {
	state.signUpPending = true
	state.signUpErrors = []
	state.signUpNotice = {}
	},
	signUpSuccess(state) {
	state.signUpPending = false
	},
	signUpFailure(state, errors) {
	state.signUpPending = false
	state.signUpErrors = errors
	state.signUpNotice = {}
	},
	signUpNotice(state, notice) {
	state.signUpPending = false
	state.signUpErrors = []
	state.signUpNotice = notice
	},
	}

	export const getters = {
	findUser: (state) => (query) => {
	return state.usersObject[query]
	},
	findUserByName: (state) => (query) => {
	return state.usersByNameObject[query.toLowerCase()]
	},
	findUserByUrl: (state) => (query) => {
	return state.users.find(
	(u) =>
	u.statusnet_profile_url &&
	u.statusnet_profile_url.toLowerCase() === query.toLowerCase(),
	)
	},
	relationship: (state) => (id) => {
	const rel = id && state.relationships[id]
	return rel \|\| { id, loading: true }
	},
	}

	export const defaultState = {
	loggingIn: false,
	lastLoginName: false,
	currentUser: false,
	users: [],
	usersObject: {},
	usersByNameObject: {},
	signUpPending: false,
	signUpErrors: [],
	signUpNotice: {},
	relationships: {},
	}

	const users = {
	state: defaultState,
	mutations,
	getters,
	actions: {
	fetchUserIfMissing(store, id) {
	if (!store.getters.findUser(id)) {
	store.dispatch('fetchUser', id)
	}
	},
	fetchUser(store, id) {
	return store.rootState.api.backendInteractor
	.fetchUser({ id })
	.then((user) => {
	store.commit('addNewUsers', [user])
	return user
	})
	},
	fetchUserByName(store, name) {
	return store.rootState.api.backendInteractor
	.fetchUserByName({ name })
	.then((user) => {
	store.commit('addNewUsers', [user])
	return user
	})
	},
	fetchUserRelationship(store, id) {
	if (store.state.currentUser) {
	store.rootState.api.backendInteractor
	.fetchUserRelationship({ id })
	.then((relationships) =>
	store.commit('updateUserRelationship', relationships),
	)
	}
	},
	fetchUserInLists(store, id) {
	if (store.state.currentUser) {
	store.rootState.api.backendInteractor
	.fetchUserInLists({ id })
	.then((inLists) => store.commit('updateUserInLists', { id, inLists }))
	}
	},
	fetchBlocks(store, args) {
	const { reset } = args \|\| {}

	const maxId = store.state.currentUser.blockIdsMaxId
	return store.rootState.api.backendInteractor
	.fetchBlocks({ maxId })
	.then((blocks) => {
	if (reset) {
	store.commit('saveBlockIds', map(blocks, 'id'))
	} else {
	map(blocks, 'id').map((id) => store.commit('addBlockId', id))
	}
	if (blocks.length) {
	store.commit('setBlockIdsMaxId', last(blocks).id)
	}
	store.commit('addNewUsers', blocks)
	return blocks
	})
	},
	blockUser(store, data) {
	return blockUser(store, data)
	},
	unblockUser(store, data) {
	return unblockUser(store, data)
	},
	removeUserFromFollowers(store, id) {
	return removeUserFromFollowers(store, id)
	},
	blockUsers(store, data = []) {
	return Promise.all(data.map((d) => blockUser(store, d)))
	},
	unblockUsers(store, data = []) {
	return Promise.all(data.map((d) => unblockUser(store, d)))
	},
	editUserNote(store, args) {
	return editUserNote(store, args)
	},
	fetchMutes(store, args) {
	const { reset } = args \|\| {}

	const maxId = store.state.currentUser.muteIdsMaxId
	return store.rootState.api.backendInteractor
	.fetchMutes({ maxId })
	.then((mutes) => {
	if (reset) {
	store.commit('saveMuteIds', map(mutes, 'id'))
	} else {
	map(mutes, 'id').map((id) => store.commit('addMuteId', id))
	}
	if (mutes.length) {
	store.commit('setMuteIdsMaxId', last(mutes).id)
	}
	store.commit('addNewUsers', mutes)
	return mutes
	})
	},
	muteUser(store, data) {
	return muteUser(store, data)
	},
	unmuteUser(store, id) {
	return unmuteUser(store, id)
	},
	hideReblogs(store, id) {
	return hideReblogs(store, id)
	},
	showReblogs(store, id) {
	return showReblogs(store, id)
	},
	muteUsers(store, data = []) {
	return Promise.all(data.map((d) => muteUser(store, d)))
	},
	unmuteUsers(store, ids = []) {
	return Promise.all(ids.map((d) => unmuteUser(store, d)))
	},
	fetchDomainMutes(store) {
	return store.rootState.api.backendInteractor
	.fetchDomainMutes()
	.then((domainMutes) => {
	store.commit('saveDomainMutes', domainMutes)
	return domainMutes
	})
	},
	muteDomain(store, domain) {
	return muteDomain(store, domain)
	},
	unmuteDomain(store, domain) {
	return unmuteDomain(store, domain)
	},
	muteDomains(store, domains = []) {
	return Promise.all(domains.map((domain) => muteDomain(store, domain)))
	},
	unmuteDomains(store, domain = []) {
	return Promise.all(domain.map((domain) => unmuteDomain(store, domain)))
	},
	fetchFriends({ rootState, commit }, id) {
	const user = rootState.users.usersObject[id]
	const maxId = last(user.friendIds)
	return rootState.api.backendInteractor
	.fetchFriends({ id, maxId })
	.then((friends) => {
	commit('addNewUsers', friends)
	commit('saveFriendIds', { id, friendIds: map(friends, 'id') })
	return friends
	})
	},
	fetchFollowers({ rootState, commit }, id) {
	const user = rootState.users.usersObject[id]
	const maxId = last(user.followerIds)
	return rootState.api.backendInteractor
	.fetchFollowers({ id, maxId })
	.then((followers) => {
	commit('addNewUsers', followers)
	commit('saveFollowerIds', { id, followerIds: map(followers, 'id') })
	return followers
	})
	},
	clearFriends({ commit }, userId) {
	commit('clearFriends', userId)
	},
	clearFollowers({ commit }, userId) {
	commit('clearFollowers', userId)
	},
	subscribeUser({ rootState, commit }, id) {
	return rootState.api.backendInteractor
	.followUser({ id, notify: true })
	.then((relationship) =>
	commit('updateUserRelationship', [relationship]),
	)
	},
	unsubscribeUser({ rootState, commit }, id) {
	return rootState.api.backendInteractor
	.followUser({ id, notify: false })
	.then((relationship) =>
	commit('updateUserRelationship', [relationship]),
	)
	},
	toggleActivationStatus({ rootState, commit }, { user }) {
	const api = user.deactivated
	? rootState.api.backendInteractor.activateUser
	: rootState.api.backendInteractor.deactivateUser
	api({ user }).then((user) => {
	const deactivated = !user.is_active
	commit('updateActivationStatus', { user, deactivated })
	})
	},
	registerPushNotifications(store) {
	const token = store.state.currentUser.credentials
	const vapidPublicKey = useInstanceStore().vapidPublicKey
	const isEnabled = store.rootState.config.webPushNotifications
	const notificationVisibility =
	store.rootState.config.notificationVisibility

	registerPushNotifications(
	isEnabled,
	vapidPublicKey,
	token,
	notificationVisibility,
	)
	},
	unregisterPushNotifications(store) {
	const token = store.state.currentUser.credentials

	unregisterPushNotifications(token)
	},
	addNewUsers({ commit }, users) {
	commit('addNewUsers', users)
	},
	addNewStatuses(store, { statuses }) {
	const users = map(statuses, 'user')
	const retweetedUsers = compact(map(statuses, 'retweeted_status.user'))
	store.commit('addNewUsers', users)
	store.commit('addNewUsers', retweetedUsers)

	each(statuses, (status) => {
	// Reconnect users to statuses
	store.commit('setUserForStatus', status)
	// Set pinned statuses to user
	store.commit('setPinnedToUser', status)
	})
	each(compact(map(statuses, 'retweeted_status')), (status) => {
	// Reconnect users to retweets
	store.commit('setUserForStatus', status)
	// Set pinned retweets to user
	store.commit('setPinnedToUser', status)
	})
	},
	addNewNotifications(store, { notifications }) {
	const users = map(notifications, 'from_profile')
	const targetUsers = map(notifications, 'target').filter((_) => _)
	const notificationIds = notifications.map((_) => _.id)
	store.commit('addNewUsers', users)
	store.commit('addNewUsers', targetUsers)

	const notificationsObject = store.rootState.notifications.idStore
	const relevantNotifications = Object.entries(notificationsObject)
	.filter(([k]) => notificationIds.includes(k))
	.map(([, val]) => val)

	// Reconnect users to notifications
	each(relevantNotifications, (notification) => {
	store.commit('setUserForNotification', notification)
	})
	},
	searchUsers({ rootState, commit }, { query }) {
	return rootState.api.backendInteractor
	.searchUsers({ query })
	.then((users) => {
	commit('addNewUsers', users)
	return users
	})
	},
	async signUp(store, userInfo) {
	const oauthStore = useOAuthStore()
	store.commit('signUpPending')

	try {
	const token = await oauthStore.ensureAppToken()
	const data = await apiService.register({
	credentials: token,
	params: { ...userInfo },
	})

	if (data.access_token) {
	store.commit('signUpSuccess')
	oauthStore.setToken(data.access_token)
	await store.dispatch('loginUser', data.access_token)
	return 'ok'
	} else {
	// Request succeeded, but user cannot login yet.
	store.commit('signUpNotice', data)
	return 'request_sent'
	}
	} catch (e) {
	const errors = e.message
	store.commit('signUpFailure', errors)
	throw e
	}
	},
	async getCaptcha(store) {
	return store.rootState.api.backendInteractor.getCaptcha()
	},

	logout(store) {
	const oauth = useOAuthStore()

	// NOTE: No need to verify the app still exists, because if it doesn't,
	// the token will be invalid too
	return oauth
	.ensureApp()
	.then((app) => {
	const params = {
	app,
	instance: useInstanceStore().server,
	token: oauth.userToken,
	}

	return oauthApi.revokeToken(params)
	})
	.then(() => {
	store.commit('clearCurrentUser')
	store.dispatch('disconnectFromSocket')
	oauth.clearToken()
	store.dispatch('stopFetchingTimeline', 'friends')
	store.commit(
	'setBackendInteractor',
	backendInteractorService(oauth.getToken),
	)
	store.dispatch('stopFetchingNotifications')
	store.dispatch('stopFetchingLists')
	store.dispatch('stopFetchingBookmarkFolders')
	store.dispatch('stopFetchingFollowRequests')
	store.commit('clearNotifications')
	store.commit('resetStatuses')
	store.dispatch('resetChats')
	useInterfaceStore().setLastTimeline('public-timeline')
	useInterfaceStore().setLayoutWidth(windowWidth())
	useInterfaceStore().setLayoutHeight(windowHeight())
	store.commit('clearServerSideStorage')
	})
	},
	loginUser(store, accessToken) {
	return new Promise((resolve, reject) => {
	const commit = store.commit
	const dispatch = store.dispatch
	commit('beginLogin')
	store.rootState.api.backendInteractor
	.verifyCredentials(accessToken)
	.then((data) => {
	if (!data.error) {
	const user = data
	// user.credentials = userCredentials
	user.credentials = accessToken
	user.blockIds = []
	user.muteIds = []
	user.domainMutes = []
	commit('setCurrentUser', user)

	useServerSideStorageStore().setServerSideStorage(user)
	commit('addNewUsers', [user])

	useEmojiStore().fetchEmoji()

	getNotificationPermission().then((permission) =>
	useInterfaceStore().setNotificationPermission(permission),
	)

	// Set our new backend interactor
	commit(
	'setBackendInteractor',
	backendInteractorService(accessToken),
	)

	// Do server-side storage migrations

	// Debug snippet to clean up storage and reset migrations
	/*
	// Reset wordfilter
	Object.keys(
	useServerSideStorageStore().prefsStorage.simple.muteFilters
	).forEach(key => {
	useServerSideStorageStore().unsetPreference({ path: 'simple.muteFilters.' + key, value: null })
	})

	// Reset flag to 0 to re-run migrations
	useServerSideStorageStore().setFlag({ flag: 'configMigration', value: 0 })
	/**/

	const { configMigration } =
	useServerSideStorageStore().flagStorage
	declarations
	.filter((x) => {
	return (
	x.store === 'server-side' &&
	x.migrationNum > 0 &&
	x.migrationNum > configMigration
	)
	})
	.toSorted((a, b) => a.configMigration - b.configMigration)
	.forEach((value) => {
	value.migration(useServerSideStorageStore(), store.rootState)
	useServerSideStorageStore().setFlag({
	flag: 'configMigration',
	value: value.migrationNum,
	})
	useServerSideStorageStore().pushServerSideStorage()
	})

	if (user.token) {
	dispatch('setWsToken', user.token)

	// Initialize the shout socket.
	dispatch('initializeSocket')
	}

	const startPolling = () => {
	// Start getting fresh posts.
	dispatch('startFetchingTimeline', { timeline: 'friends' })

	// Start fetching notifications
	dispatch('startFetchingNotifications')

	if (
	useInstanceStore().featureSet.pleromaChatMessagesAvailable
	) {
	// Start fetching chats
	dispatch('startFetchingChats')
	}
	}

	dispatch('startFetchingLists')
	dispatch('startFetchingBookmarkFolders')

	if (user.locked) {
	dispatch('startFetchingFollowRequests')
	}

	if (store.getters.mergedConfig.useStreamingApi) {
	dispatch('fetchTimeline', { timeline: 'friends', since: null })
	dispatch('fetchNotifications', { since: null })
	dispatch('enableMastoSockets', true)
	.catch((error) => {
	console.error(
	'Failed initializing MastoAPI Streaming socket',
	error,
	)
	})
	.then(() => {
	dispatch('fetchChats', { latest: true })
	setTimeout(
	() => dispatch('setNotificationsSilence', false),
	10000,
	)
	})
	} else {
	startPolling()
	}

	// Get user mutes
	dispatch('fetchMutes')

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

	// Fetch our friends
	store.rootState.api.backendInteractor
	.fetchFriends({ id: user.id })
	.then((friends) => commit('addNewUsers', friends))
	} else {
	const response = data.error
	// Authentication failed
	commit('endLogin')

	// remove authentication token on client/authentication errors
	if ([400, 401, 403, 422].includes(response.status)) {
	useOAuthStore().clearToken()
	}

	if (response.status === 401) {
	reject(new Error('Wrong username or password'))
	} else {
	reject(new Error('An error occurred, please try again'))
	}
	}
	commit('endLogin')
	resolve()
	})
	.catch((error) => {
	console.error(error)
	commit('endLogin')
	reject(new Error('Failed to connect to server, try again'))
	})
	})
	},
	},
	}

	export default users
	diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
	index b7911a7dc4..adc18ef7f2 100644
	--- a/src/services/backend_interactor_service/backend_interactor_service.js
	+++ b/src/services/backend_interactor_service/backend_interactor_service.js
	@@ -1,74 +1,75 @@
	-import { useInstanceStore } from 'src/stores/instance.js'
	import bookmarkFoldersFetcher from '../../services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js'
	import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
	import listsFetcher from '../../services/lists_fetcher/lists_fetcher.service.js'
	import apiService, {
	getMastodonSocketURI,
	ProcessedWS,
	} from '../api/api.service.js'
	import notificationsFetcher from '../notifications_fetcher/notifications_fetcher.service.js'
	import timelineFetcher from '../timeline_fetcher/timeline_fetcher.service.js'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	const backendInteractorService = (credentials) => ({
	startFetchingTimeline({
	timeline,
	store,
	userId = false,
	listId = false,
	statusId = false,
	bookmarkFolderId = false,
	tag,
	}) {
	return timelineFetcher.startFetching({
	timeline,
	store,
	credentials,
	userId,
	listId,
	statusId,
	bookmarkFolderId,
	tag,
	})
	},

	fetchTimeline(args) {
	return timelineFetcher.fetchAndUpdate({ ...args, credentials })
	},

	startFetchingNotifications({ store }) {
	return notificationsFetcher.startFetching({ store, credentials })
	},

	fetchNotifications(args) {
	return notificationsFetcher.fetchAndUpdate({ ...args, credentials })
	},

	startFetchingFollowRequests({ store }) {
	return followRequestFetcher.startFetching({ store, credentials })
	},

	startFetchingLists({ store }) {
	return listsFetcher.startFetching({ store, credentials })
	},

	startFetchingBookmarkFolders({ store }) {
	return bookmarkFoldersFetcher.startFetching({ store, credentials })
	},

	startUserSocket({ store }) {
	const serv = useInstanceStore().server.replace('http', 'ws')
	const url = getMastodonSocketURI({}, serv)
	return ProcessedWS({ url, id: 'Unified', credentials })
	},

	...Object.entries(apiService).reduce((acc, [key, func]) => {
	return {
	...acc,
	[key]: (args) => func({ credentials, ...args }),
	}
	}, {}),

	verifyCredentials: apiService.verifyCredentials,
	})

	export default backendInteractorService
	diff --git a/src/services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js b/src/services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js
	index 50afb4564e..7b81c19dc2 100644
	--- a/src/services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js
	+++ b/src/services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js
	@@ -1,31 +1,32 @@
	-import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders.js'
	import apiService from '../api/api.service.js'
	import { promiseInterval } from '../promise_interval/promise_interval.js'

	+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders.js'
	+
	const fetchAndUpdate = ({ credentials }) => {
	return apiService
	.fetchBookmarkFolders({ credentials })
	.then(
	(bookmarkFolders) => {
	useBookmarkFoldersStore().setBookmarkFolders(bookmarkFolders)
	},
	(rej) => {
	console.error(rej)
	},
	)
	.catch((e) => {
	console.error(e)
	})
	}

	const startFetching = ({ credentials, store }) => {
	const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
	boundFetchAndUpdate()
	return promiseInterval(boundFetchAndUpdate, 240000)
	}

	const bookmarkFoldersFetcher = {
	startFetching,
	}

	export default bookmarkFoldersFetcher
	diff --git a/src/services/lists_fetcher/lists_fetcher.service.js b/src/services/lists_fetcher/lists_fetcher.service.js
	index 6744fb6963..c395ef93b4 100644
	--- a/src/services/lists_fetcher/lists_fetcher.service.js
	+++ b/src/services/lists_fetcher/lists_fetcher.service.js
	@@ -1,31 +1,32 @@
	-import { useListsStore } from 'src/stores/lists.js'
	import apiService from '../api/api.service.js'
	import { promiseInterval } from '../promise_interval/promise_interval.js'

	+import { useListsStore } from 'src/stores/lists.js'
	+
	const fetchAndUpdate = ({ credentials }) => {
	return apiService
	.fetchLists({ credentials })
	.then(
	(lists) => {
	useListsStore().setLists(lists)
	},
	(rej) => {
	console.error(rej)
	},
	)
	.catch((e) => {
	console.error(e)
	})
	}

	const startFetching = ({ credentials, store }) => {
	const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
	boundFetchAndUpdate()
	return promiseInterval(boundFetchAndUpdate, 240000)
	}

	const listsFetcher = {
	startFetching,
	}

	export default listsFetcher
	diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js
	index b5c233ad93..14785a685b 100644
	--- a/src/services/notification_utils/notification_utils.js
	+++ b/src/services/notification_utils/notification_utils.js
	@@ -1,203 +1,205 @@
	-import FaviconService from 'src/services/favicon_service/favicon_service.js'
	-import { useAnnouncementsStore } from 'src/stores/announcements'
	-import { useI18nStore } from 'src/stores/i18n.js'
	import { showDesktopNotification } from '../desktop_notification_utils/desktop_notification_utils.js'
	import { muteFilterHits } from '../status_parser/status_parser.js'

	+import { useAnnouncementsStore } from 'src/stores/announcements'
	+import { useI18nStore } from 'src/stores/i18n.js'
	+
	+import FaviconService from 'src/services/favicon_service/favicon_service.js'
	+
	export const ACTIONABLE_NOTIFICATION_TYPES = new Set([
	'mention',
	'pleroma:report',
	'follow_request',
	])

	let cachedBadgeUrl = null

	export const notificationsFromStore = (store) => store.state.notifications.data

	export const visibleTypes = (store) => {
	// When called from within a module we need rootGetters to access wider scope
	// however when called from a component (i.e. this.$store) we already have wider scope
	const rootGetters = store.rootGetters \|\| store.getters
	const { notificationVisibility } = rootGetters.mergedConfig

	return [
	notificationVisibility.likes && 'like',
	notificationVisibility.mentions && 'mention',
	notificationVisibility.statuses && 'status',
	notificationVisibility.repeats && 'repeat',
	notificationVisibility.follows && 'follow',
	notificationVisibility.followRequest && 'follow_request',
	notificationVisibility.moves && 'move',
	notificationVisibility.emojiReactions && 'pleroma:emoji_reaction',
	notificationVisibility.reports && 'pleroma:report',
	notificationVisibility.polls && 'poll',
	].filter((_) => _)
	}

	const statusNotifications = new Set([
	'like',
	'mention',
	'status',
	'repeat',
	'pleroma:emoji_reaction',
	'poll',
	])

	export const isStatusNotification = (type) => statusNotifications.has(type)

	export const isValidNotification = (notification) => {
	if (isStatusNotification(notification.type) && !notification.status) {
	return false
	}
	return 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 isMutedNotification = (notification) => {
	if (!notification.status) return false
	if (notification.status.muted) return true
	return muteFilterHits(notification.status).length > 0
	}

	export const maybeShowNotification = (store, notification) => {
	const rootState = store.rootState \|\| store.state

	if (notification.seen) return
	if (!visibleTypes(store).includes(notification.type)) return
	if (notification.type === 'mention' && isMutedNotification(notification))
	return

	const notificationObject = prepareNotificationObject(
	notification,
	useI18nStore().i18n,
	)
	showDesktopNotification(rootState, notificationObject)
	}

	export const filteredNotificationsFromStore = (store, types) => {
	// map is just to clone the array since sort mutates it and it causes some issues
	const sortedNotifications = notificationsFromStore(store)
	.map((_) => _)
	.sort(sortById)
	// TODO implement sorting elsewhere and make it optional
	return sortedNotifications.filter((notification) =>
	(types \|\| visibleTypes(store)).includes(notification.type),
	)
	}

	export const unseenNotificationsFromStore = (store) => {
	const rootGetters = store.rootGetters \|\| store.getters
	const ignoreInactionableSeen = rootGetters.mergedConfig.ignoreInactionableSeen

	return filteredNotificationsFromStore(store).filter(({ seen, type }) => {
	if (!ignoreInactionableSeen) return !seen
	if (seen) return false
	return ACTIONABLE_NOTIFICATION_TYPES.has(type)
	})
	}

	export const prepareNotificationObject = (notification, i18n) => {
	if (cachedBadgeUrl === null) {
	const favicons = FaviconService.getOriginalFavicons()
	const favicon = favicons[favicons.length - 1]
	if (!favicon) {
	cachedBadgeUrl = 'about:blank'
	} else {
	cachedBadgeUrl = favicon.favimg.src
	}
	}

	const notifObj = {
	tag: notification.id,
	type: notification.type,
	badge: cachedBadgeUrl,
	}
	const status = notification.status
	const title = notification.from_profile.name
	notifObj.title = title
	notifObj.icon = notification.from_profile.profile_image_url
	let i18nString
	switch (notification.type) {
	case 'like':
	i18nString = 'favorited_you'
	break
	case 'status':
	i18nString = 'subscribed_status'
	break
	case 'repeat':
	i18nString = 'repeated_you'
	break
	case 'follow':
	i18nString = 'followed_you'
	break
	case 'move':
	i18nString = 'migrated_to'
	break
	case 'follow_request':
	i18nString = 'follow_request'
	break
	case 'pleroma:report':
	i18nString = 'submitted_report'
	break
	case 'poll':
	i18nString = 'poll_ended'
	break
	}

	if (notification.type === 'pleroma:emoji_reaction') {
	notifObj.body = i18n.t('notifications.reacted_with', [notification.emoji])
	} else if (i18nString) {
	notifObj.body = i18n.t('notifications.' + i18nString)
	} else if (isStatusNotification(notification.type)) {
	notifObj.body = notification.status.text
	}

	// Shows first attached non-nsfw image, if any. Should add configuration for this somehow...
	if (
	status &&
	status.attachments &&
	status.attachments.length > 0 &&
	!status.nsfw &&
	status.attachments[0].mimetype.startsWith('image/')
	) {
	notifObj.image = status.attachments[0].url
	}

	return notifObj
	}

	export const countExtraNotifications = (store) => {
	const rootGetters = store.rootGetters \|\| store.getters
	const mergedConfig = rootGetters.mergedConfig

	if (!mergedConfig.showExtraNotifications) {
	return 0
	}

	return [
	mergedConfig.showChatsInExtraNotifications
	? rootGetters.unreadChatCount
	: 0,
	mergedConfig.showAnnouncementsInExtraNotifications
	? useAnnouncementsStore().unreadAnnouncementCount
	: 0,
	mergedConfig.showFollowRequestsInExtraNotifications
	? rootGetters.followRequestCount
	: 0,
	].reduce((a, c) => a + c, 0)
	}
	diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
	index 643c7c9068..f82f981301 100644
	--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
	+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
	@@ -1,129 +1,130 @@
	-import { useInstanceStore } from 'src/stores/instance.js'
	-import { useInterfaceStore } from 'src/stores/interface.js'
	import apiService from '../api/api.service.js'
	import { promiseInterval } from '../promise_interval/promise_interval.js'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInterfaceStore } from 'src/stores/interface.js'
	+
	const update = ({ store, notifications, older }) => {
	store.dispatch('addNewNotifications', { notifications, older })
	}
	//
	// For using include_types when fetching notifications.
	// Note: chat_mention excluded as pleroma-fe polls them separately
	const mastoApiNotificationTypes = new Set([
	'mention',
	'status',
	'favourite',
	'reblog',
	'follow',
	'follow_request',
	'move',
	'poll',
	'pleroma:emoji_reaction',
	'pleroma:report',
	])

	const fetchAndUpdate = ({ store, credentials, older = false, since }) => {
	const args = { credentials }
	const { getters } = store
	const rootState = store.rootState \|\| store.state
	const timelineData = rootState.notifications
	const hideMutedPosts = getters.mergedConfig.hideMutedPosts

	if (useInstanceStore().featureSet.pleromaChatMessagesAvailable) {
	mastoApiNotificationTypes.add('pleroma:chat_mention')
	}

	args.includeTypes = mastoApiNotificationTypes
	args.withMuted = !hideMutedPosts

	args.timeline = 'notifications'
	if (older) {
	if (timelineData.minId !== Number.POSITIVE_INFINITY) {
	args.until = timelineData.minId
	}
	return fetchNotifications({ store, args, older })
	} else {
	// fetch new notifications
	if (
	since === undefined &&
	timelineData.maxId !== Number.POSITIVE_INFINITY
	) {
	args.since = timelineData.maxId
	} else if (since !== null) {
	args.since = since
	}
	const result = fetchNotifications({ store, args, older })

	// If there's any unread notifications, try fetch notifications since
	// the newest read notification to check if any of the unread notifs
	// have changed their 'seen' state (marked as read in another session), so
	// we can update the state in this session to mark them as read as well.
	// The normal maxId-check does not tell if older notifications have changed
	const notifications = timelineData.data
	const readNotifsIds = notifications.filter((n) => n.seen).map((n) => n.id)
	const unreadNotifsIds = notifications
	.filter((n) => !n.seen)
	.map((n) => n.id)
	if (readNotifsIds.length > 0 && readNotifsIds.length > 0) {
	const minId = Math.min(...unreadNotifsIds) // Oldest known unread notification
	if (minId !== Infinity) {
	args.since = false // Don't use since_id since it sorta conflicts with min_id
	args.minId = minId - 1 // go beyond
	fetchNotifications({ store, args, older })
	}
	}

	return result
	}
	}

	const fetchNotifications = ({ store, args, older }) => {
	return apiService
	.fetchTimeline(args)
	.then((response) => {
	if (response.errors) {
	if (
	response.status === 400 &&
	response.statusText.includes('Invalid value for enum')
	) {
	response.statusText
	.matchAll(/(\w+) - Invalid value for enum./g)
	.toArray()
	.map((x) => x[1])
	.forEach((x) => mastoApiNotificationTypes.delete(x))
	return fetchNotifications({ store, args, older })
	} else {
	throw new Error(`${response.status} ${response.statusText}`)
	}
	}
	const notifications = response.data
	update({ store, notifications, older })
	return notifications
	})
	.catch((error) => {
	useInterfaceStore().pushGlobalNotice({
	level: 'error',
	messageKey: 'notifications.error',
	messageArgs: [error.message],
	timeout: 5000,
	})
	console.error(error)
	})
	}

	const startFetching = ({ credentials, store }) => {
	// Initially there's set flag to silence all desktop notifications so
	// that there won't spam of them when user just opened up the FE we
	// reset that flag after a while to show new notifications once again.
	setTimeout(() => store.dispatch('setNotificationsSilence', false), 10000)
	const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
	boundFetchAndUpdate()
	return promiseInterval(boundFetchAndUpdate, 10000)
	}

	const notificationsFetcher = {
	fetchAndUpdate,
	startFetching,
	}

	export default notificationsFetcher
	diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
	index d44b0fc069..08034d4857 100644
	--- a/src/services/style_setter/style_setter.js
	+++ b/src/services/style_setter/style_setter.js
	@@ -1,341 +1,342 @@
	import localforage from 'localforage'
	import { chunk, throttle } from 'lodash'

	-import { defaultState } from 'src/modules/default_config_state.js'
	import { getCssRules } from '../theme_data/css_utils.js'
	import { getEngineChecksum, init } from '../theme_data/theme_data_3.service.js'

	+import { defaultState } 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)') &&
	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'

	export 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()) {
	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("Engine checksum doesn'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 cache = {
	engineChecksum: getEngineChecksum(),
	data: [eagerStyles.rules, lazyStyles.rules],
	}
	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(defaultState)

	export const applyConfig = (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) => {
	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))
	.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)
	} 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)
	} 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/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
	index 9326beda0c..0d993a1e33 100644
	--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
	+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
	@@ -1,161 +1,162 @@
	import { camelCase } from 'lodash'

	-import { useInstanceStore } from 'src/stores/instance.js'
	-import { useInterfaceStore } from 'src/stores/interface.js'
	import apiService from '../api/api.service.js'
	import { promiseInterval } from '../promise_interval/promise_interval.js'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInterfaceStore } from 'src/stores/interface.js'
	+
	const update = ({
	store,
	statuses,
	timeline,
	showImmediately,
	userId,
	listId,
	pagination,
	}) => {
	const ccTimeline = camelCase(timeline)

	store.dispatch('addNewStatuses', {
	timeline: ccTimeline,
	userId,
	listId,
	statuses,
	showImmediately,
	pagination,
	})
	}

	const fetchAndUpdate = ({
	store,
	credentials,
	timeline = 'friends',
	older = false,
	showImmediately = false,
	userId = false,
	listId = false,
	statusId = false,
	bookmarkFolderId = false,
	tag = false,
	until,
	since,
	}) => {
	const args = { timeline, credentials }
	const rootState = store.rootState \|\| store.state
	const { getters } = store
	const timelineData = rootState.statuses.timelines[camelCase(timeline)]
	const { hideMutedPosts, replyVisibility } = getters.mergedConfig
	const loggedIn = !!rootState.users.currentUser

	if (older) {
	args.until = until \|\| timelineData.minId
	} else {
	if (since === undefined) {
	args.since = timelineData.maxId
	} else if (since !== null) {
	args.since = since
	}
	}

	args.userId = userId
	args.listId = listId
	args.statusId = statusId
	args.bookmarkFolderId = bookmarkFolderId
	args.tag = tag
	args.withMuted = !hideMutedPosts
	if (
	loggedIn &&
	['friends', 'public', 'publicAndExternal', 'bubble'].includes(timeline)
	) {
	args.replyVisibility = replyVisibility
	}

	const numStatusesBeforeFetch = timelineData.statuses.length

	return apiService
	.fetchTimeline(args)
	.then((response) => {
	if (response.errors) {
	if (timeline === 'favorites') {
	useInstanceStore().featureSet.pleromaPublicFavouritesAvailable = false
	return
	}
	throw new Error(`${response.status} ${response.statusText}`)
	}

	const { data: statuses, pagination } = response
	if (
	!older &&
	statuses.length >= 20 &&
	!timelineData.loading &&
	numStatusesBeforeFetch > 0
	) {
	store.dispatch('queueFlush', { timeline, id: timelineData.maxId })
	}
	update({
	store,
	statuses,
	timeline,
	showImmediately,
	userId,
	listId,
	pagination,
	})
	return { statuses, pagination }
	})
	.catch((error) => {
	useInterfaceStore().pushGlobalNotice({
	level: 'error',
	messageKey: 'timeline.error',
	messageArgs: [error.message],
	timeout: 5000,
	})
	})
	}

	const startFetching = ({
	timeline = 'friends',
	credentials,
	store,
	userId = false,
	listId = false,
	statusId = false,
	bookmarkFolderId = false,
	tag = false,
	}) => {
	const rootState = store.rootState \|\| store.state
	const timelineData = rootState.statuses.timelines[camelCase(timeline)]
	const showImmediately = timelineData.visibleStatuses.length === 0
	timelineData.userId = userId
	timelineData.listId = listId
	timelineData.bookmarkFolderId = bookmarkFolderId
	fetchAndUpdate({
	timeline,
	credentials,
	store,
	showImmediately,
	userId,
	listId,
	statusId,
	bookmarkFolderId,
	tag,
	})
	const boundFetchAndUpdate = () =>
	fetchAndUpdate({
	timeline,
	credentials,
	store,
	userId,
	listId,
	statusId,
	bookmarkFolderId,
	tag,
	})
	return promiseInterval(boundFetchAndUpdate, 10000)
	}
	const timelineFetcher = {
	fetchAndUpdate,
	startFetching,
	}

	export default timelineFetcher
	diff --git a/src/stores/emoji.js b/src/stores/emoji.js
	index e7eb294e0d..5c284064bc 100644
	--- a/src/stores/emoji.js
	+++ b/src/stores/emoji.js
	@@ -1,251 +1,252 @@
	import { defineStore } from 'pinia'

	-import { ensureFinalFallback } from 'src/i18n/languages.js'
	import { useInstanceStore } from 'src/stores/instance.js'

	+import { ensureFinalFallback } from 'src/i18n/languages.js'
	+
	import { annotationsLoader } from 'virtual:pleroma-fe/emoji-annotations'

	const defaultState = {
	// Custom emoji from server
	customEmoji: [],
	customEmojiFetched: false,

	// Unicode emoji from bundle
	emoji: {},
	emojiFetched: false,
	unicodeEmojiAnnotations: {},

	// Stickers
	stickers: null,
	}

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

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

	const loadAnnotations = (lang) => {
	return annotationsLoader[lang]().then((k) => k.default)
	}

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

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

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

	export const useEmojiStore = defineStore('emoji', {
	state: () => ({ ...defaultState }),
	getters: {
	groupedCustomEmojis(state) {
	const packsOf = (emoji) => {
	const packs = emoji.tags
	.filter((k) => k.startsWith('pack:'))
	.map((k) => {
	const packName = k.slice(5) // remove 'pack:' prefix
	return {
	id: `custom-${packName}`,
	text: packName,
	}
	})

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

	return this.customEmoji.reduce((res, emoji) => {
	packsOf(emoji).forEach(({ id: packId, text: packName }) => {
	if (!res[packId]) {
	res[packId] = {
	id: packId,
	text: packName,
	image: emoji.imageUrl,
	emojis: [],
	}
	}
	res[packId].emojis.push(emoji)
	})
	return res
	}, {})
	},
	standardEmojiList(state) {
	return SORTED_EMOJI_GROUP_IDS.map((groupId) =>
	(this.emoji[groupId] \|\| []).map((k) =>
	injectAnnotations(k, this.unicodeEmojiAnnotations),
	),
	).reduce((a, b) => a.concat(b), [])
	},
	standardEmojiGroupList(state) {
	return SORTED_EMOJI_GROUP_IDS.map((groupId) => ({
	id: groupId,
	emojis: (this.emoji[groupId] \|\| []).map((k) =>
	injectAnnotations(k, this.unicodeEmojiAnnotations),
	),
	}))
	},
	},
	actions: {
	setStickers(stickers) {
	this.stickers = stickers
	},
	async getStaticEmoji() {
	try {
	// See build/emojis_plugin for more details
	const values = (await import('/src/assets/emoji.json')).default

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

	loadUnicodeEmojiData(language) {
	const langList = ensureFinalFallback(language)

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

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

	const emoji = Object.entries(values)
	.map(([key, value]) => {
	const imageUrl = value.image_url
	return {
	displayText: key,
	imageUrl: imageUrl
	? useInstanceStore().server + imageUrl
	: value,
	tags: imageUrl
	? value.tags.sort((a, b) => (a > b ? 1 : 0))
	: ['utf'],
	replacement: `:${key}: `,
	}
	// Technically could use tags but those are kinda useless right now,
	// should have been "pack" field, that would be more useful
	})
	.sort(byPackThenByName)
	this.customEmoji = emoji
	} else {
	throw res
	}
	} catch (e) {
	console.warn("Can't load custom emojis\n", e)
	}
	},
	fetchEmoji() {
	if (!this.customEmojiFetched) {
	this.getCustomEmoji().then(() => (this.customEmojiFetched = true))
	}
	if (!this.emojiFetched) {
	this.getStaticEmoji().then(() => (this.emojiFetched = true))
	}
	},
	},
	})
	diff --git a/src/stores/instance.js b/src/stores/instance.js
	index 172b6a4575..87bb00d12f 100644
	--- a/src/stores/instance.js
	+++ b/src/stores/instance.js
	@@ -1,153 +1,155 @@
	import { get, set } from 'lodash'
	import { defineStore } from 'pinia'

	-import { ensureFinalFallback } from 'src/i18n/languages.js'
	-import { useInterfaceStore } from 'src/stores/interface.js'
	import { instanceDefaultProperties } from '../modules/config.js'
	import {
	instanceDefaultConfig,
	staticOrApiConfigDefault,
	} from '../modules/default_config_state.js'
	import apiService from '../services/api/api.service.js'

	+import { useInterfaceStore } from 'src/stores/interface.js'
	+
	+import { ensureFinalFallback } from 'src/i18n/languages.js'
	+
	const REMOTE_INTERACTION_URL = '/main/ostatus'

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

	// Stuff from static/config.json
	loginMethod: 'password',
	disableUpdateNotification: false,

	// Instance-wide configurations that should not be changed by individual users
	instanceIdentity: {
	...staticOrApiConfigDefault,
	},

	limits: {
	bannerlimit: null,
	avatarlimit: null,
	backgroundlimit: null,
	uploadlimit: null,
	fieldsLimits: null,
	pollLimits: {
	max_options: 4,
	max_option_chars: 255,
	min_expiration: 60,
	max_expiration: 60 * 60 * 24,
	},
	},

	// Instance admins can override default settings for the whole instance
	prefsStorage: {
	...instanceDefaultConfig,
	},

	// Known domains list for user's domain-muting
	knownDomains: [],

	// Moderation stuff
	staffAccounts: [],
	accountActivationRequired: null,
	accountApprovalRequired: null,
	birthdayRequired: false,
	birthdayMinAge: 0,
	restrictedNicknames: [],
	localBubbleInstances: [], // Akkoma

	// Feature-set, apparently, not everything here is reported...
	featureSet: {
	postFormats: [],
	mailerEnabled: false,
	safeDM: true,
	shoutAvailable: false,
	pleromaExtensionsAvailable: true,
	pleromaChatMessagesAvailable: false,
	pleromaCustomEmojiReactionsAvailable: false,
	pleromaBookmarkFoldersAvailable: false,
	pleromaPublicFavouritesAvailable: true,
	statusNotificationTypeAvailable: true,
	gopherAvailable: false,
	editingAvailable: false,
	mediaProxyAvailable: false,
	suggestionsEnabled: false,
	suggestionsWeb: '',
	quotingAvailable: false,
	groupActorAvailable: false,
	blockExpiration: false,
	tagPolicyAvailable: false,
	pollsAvailable: false,
	localBubble: false, // Akkoma
	},

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

	export const useInstanceStore = defineStore('instance', {
	state: () => ({ ...defaultState }),
	getters: {
	instanceDefaultConfig(state) {
	return instanceDefaultProperties
	.map((key) => [key, state[key]])
	.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
	},
	instanceDomain(state) {
	return new URL(this.server).hostname
	},
	},
	actions: {
	set({ path, name, value }) {
	if (get(defaultState, path ?? name) === undefined)
	console.error(
	`Unknown instance option ${path ?? name}, value: ${value}`,
	)
	set(this, path ?? name, value)
	switch (name) {
	case 'name':
	useInterfaceStore().setPageTitle()
	break
	case 'shoutAvailable':
	if (value) {
	window.vuex.dispatch('initializeSocket')
	}
	break
	}
	},
	async getKnownDomains() {
	try {
	this.knownDomains = await apiService.fetchKnownDomains({
	credentials: window.vuex.state.users.currentUser.credentials,
	})
	} catch (e) {
	console.warn("Can't load known domains\n", e)
	}
	},
	getRemoteInteractionLink({ statusId, nickname }) {
	const server = this.server.endsWith('/')
	? this.server.slice(0, -1)
	: this.server
	const link = server + REMOTE_INTERACTION_URL

	if (statusId) {
	return `${link}?status_id=${statusId}`
	} else {
	return `${link}?nickname=${nickname}`
	}
	},
	},
	})
	diff --git a/src/stores/interface.js b/src/stores/interface.js
	index 479948d555..8d05ce44bc 100644
	--- a/src/stores/interface.js
	+++ b/src/stores/interface.js
	@@ -1,740 +1,742 @@
	import { defineStore } from 'pinia'

	-import {
	- CURRENT_VERSION,
	- generatePreset,
	-} from 'src/services/theme_data/theme_data.service.js'
	-import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
	-import { useInstanceStore } from 'src/stores/instance.js'
	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 {
	+ 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: [],
	layoutHeight: 0,
	lastTimeline: 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().name}`
	} catch (error) {
	console.error(`${error}`)
	}
	},
	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
	}
	}
	},
	togglePeekSettingsModal() {
	switch (this.settingsModalState) {
	case 'minimized':
	this.settingsModalState = 'visible'
	return
	case 'visible':
	this.settingsModalState = 'minimized'
	return
	default:
	throw new Error('Illegal minimization state of settings modal')
	}
	},
	clearSettingsModalTargetTab() {
	this.settingsModalTargetTab = null
	},
	openSettingsModalTab(value, mode = 'user') {
	this.settingsModalTargetTab = value
	this.openSettingsModal(mode)
	},
	removeGlobalNotice(notice) {
	this.globalNotices = this.globalNotices.filter((n) => n !== notice)
	},
	pushGlobalNotice({
	messageKey,
	messageArgs = {},
	level = 'error',
	timeout = 0,
	}) {
	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) {
	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 } = window.vuex.getters.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.family)).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({
	name: 'palettesIndex',
	value,
	})
	return value
	} catch (e) {
	console.error('Could not fetch palettes index', e)
	useInstanceStore().set({
	name: 'palettesIndex',
	value: { _error: e },
	})
	return Promise.resolve({})
	}
	},
	setPalette(value) {
	this.resetThemeV3Palette()
	this.resetThemeV2()

	window.vuex.commit('setOption', { name: 'palette', value })

	this.applyTheme({ recompile: true })
	},
	setPaletteCustom(value) {
	this.resetThemeV3Palette()
	this.resetThemeV2()

	window.vuex.commit('setOption', { name: 'paletteCustomData', value })

	this.applyTheme({ recompile: true })
	},
	async fetchStylesIndex() {
	try {
	const value = await getResourcesIndex(
	'/static/styles/index.json',
	deserialize,
	)
	useInstanceStore().set({ name: 'stylesIndex', value })
	return value
	} catch (e) {
	console.error('Could not fetch styles index', e)
	useInstanceStore().set({
	name: 'stylesIndex',
	value: { _error: e },
	})
	return Promise.resolve({})
	}
	},
	setStyle(value) {
	this.resetThemeV3()
	this.resetThemeV2()
	this.resetThemeV3Palette()

	window.vuex.commit('setOption', { name: 'style', value })
	this.useStylePalette = true

	this.applyTheme({ recompile: true }).then(() => {
	this.useStylePalette = false
	})
	},
	setStyleCustom(value) {
	this.resetThemeV3()
	this.resetThemeV2()
	this.resetThemeV3Palette()

	window.vuex.commit('setOption', { name: 'styleCustomData', value })

	this.useStylePalette = true
	this.applyTheme({ recompile: true }).then(() => {
	this.useStylePalette = false
	})
	},
	async fetchThemesIndex() {
	try {
	const value = await getResourcesIndex('/static/styles.json')
	useInstanceStore().set({ name: 'themesIndex', value })
	return value
	} catch (e) {
	console.error('Could not fetch themes index', e)
	useInstanceStore().set({
	name: 'themesIndex',
	value: { _error: e },
	})
	return Promise.resolve({})
	}
	},
	setTheme(value) {
	this.resetThemeV3()
	this.resetThemeV3Palette()
	this.resetThemeV2()

	window.vuex.commit('setOption', { name: 'theme', value })

	this.applyTheme({ recompile: true })
	},
	setThemeCustom(value) {
	this.resetThemeV3()
	this.resetThemeV3Palette()
	this.resetThemeV2()

	window.vuex.commit('setOption', { name: 'customTheme', value })
	window.vuex.commit('setOption', { name: 'customThemeSource', value })

	this.applyTheme({ recompile: true })
	},
	resetThemeV3() {
	window.vuex.commit('setOption', { name: 'style', value: null })
	window.vuex.commit('setOption', { name: 'styleCustomData', value: null })
	},
	resetThemeV3Palette() {
	window.vuex.commit('setOption', { name: 'palette', value: null })
	window.vuex.commit('setOption', {
	name: 'paletteCustomData',
	value: null,
	})
	},
	resetThemeV2() {
	window.vuex.commit('setOption', { name: 'theme', value: null })
	window.vuex.commit('setOption', { name: 'customTheme', value: null })
	window.vuex.commit('setOption', {
	name: '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
	}

	const { style: instanceStyleName, palette: instancePaletteName } =
	useInstanceStore()

	let {
	theme: instanceThemeV2Name,
	themesIndex,
	stylesIndex,
	palettesIndex,
	} = useInstanceStore()

	const {
	style: userStyleName,
	styleCustomData: userStyleCustomData,
	palette: userPaletteName,
	paletteCustomData: userPaletteCustomData,
	} = window.vuex.state.config

	let {
	theme: userThemeV2Name,
	customTheme: userThemeV2Snapshot,
	customThemeSource: userThemeV2Source,
	} = window.vuex.state.config

	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: ' + instanceThemeV2Name)

	if (
	userPaletteName \|\|
	userPaletteCustomData \|\|
	userStyleName \|\|
	userStyleCustomData \|\|
	// User V2 overrides instance V3
	((instancePaletteName \|\| instanceStyleName) &&
	instanceThemeV2Name == null &&
	userThemeV2Name == null)
	) {
	// Palette and/or style overrides V2 themes
	instanceThemeV2Name = null
	userThemeV2Name = null
	userThemeV2Source = null
	userThemeV2Snapshot = null

	majorVersionUsed = 'v3'
	} else if (
	userThemeV2Name \|\|
	userThemeV2Snapshot \|\|
	userThemeV2Source \|\|
	instanceThemeV2Name
	) {
	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) {
	window.vuex.commit('setOption', {
	name: 'palette',
	value: firstStylePaletteName,
	})
	}

	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 \|\| instanceThemeV2Name,
	)
	this.themeNameUsed = theme.nameUsed
	this.themeDataUsed = theme.dataUsed
	}
	},
	async setThemeApplied() {
	this.themeApplied = true
	},
	async applyTheme({ recompile = false } = {}) {
	const { forceThemeRecompilation, themeDebug, theme3hacks } =
	window.vuex.state.config
	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 = []

	Object.entries(theme3hacks).forEach(([key, value]) => {
	switch (key) {
	case 'fonts': {
	Object.entries(theme3hacks.fonts).forEach(([fontKey, font]) => {
	if (!font?.family) return
	switch (fontKey) {
	case 'interface':
	hacks.push({
	component: 'Root',
	directives: {
	'--font': 'generic \| ' + font.family,
	},
	})
	break
	case 'input':
	hacks.push({
	component: 'Input',
	directives: {
	'--font': 'generic \| ' + font.family,
	},
	})
	break
	case 'post':
	hacks.push({
	component: 'RichContent',
	directives: {
	'--font': 'generic \| ' + font.family,
	},
	})
	break
	case 'monospace':
	hacks.push({
	component: 'Root',
	directives: {
	'--monoFont': 'generic \| ' + font.family,
	},
	})
	break
	}
	})
	break
	}
	case 'underlay': {
	if (value !== 'none') {
	const newRule = {
	component: 'Underlay',
	directives: {},
	}
	if (value === 'opaque') {
	newRule.directives.opacity = 1
	newRule.directives.background = '--wallpaper'
	}
	if (value === 'transparent') {
	newRule.directives.opacity = 0
	}
	hacks.push(newRule)
	}
	break
	}
	}
	})

	const rulesetArray = [
	theme2ruleset,
	this.styleDataUsed,
	paletteIss,
	hacks,
	].filter((x) => x)

	return applyTheme(
	rulesetArray.flat(),
	() => this.setThemeApplied(),
	() => {
	this.themeChangeInProgress = false
	},
	themeDebug,
	)
	} catch (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/stores/oauth.js b/src/stores/oauth.js
	index 9b47e38314..2a79c2fa9f 100644
	--- a/src/stores/oauth.js
	+++ b/src/stores/oauth.js
	@@ -1,158 +1,159 @@
	import { defineStore } from 'pinia'

	+import { useInstanceStore } from 'src/stores/instance.js'
	+
	import {
	createApp,
	getClientToken,
	verifyAppToken,
	} from 'src/services/new_api/oauth.js'
	-import { useInstanceStore } from 'src/stores/instance.js'

	// status codes about verifyAppToken (GET /api/v1/apps/verify_credentials)
	const isAppTokenRejected = (error) =>
	// Pleroma API docs say it returns 422 when unauthorized
	error.statusCode === 422 \|\|
	// but it actually returns 400 (as of 2.9.0)
	// NOTE: don't try to match against the error message, it is translatable
	error.statusCode === 400 \|\|
	// and Mastodon docs say it returns 401
	error.statusCode === 401

	// status codes about getAppToken (GET /oauth/token)
	const isClientDataRejected = (error) =>
	// Mastodon docs say it returns 401
	error.statusCode === 401 \|\|
	// but Pleroma actually returns 400 (as of 2.9.0)
	// NOTE: don't try to match against the error message, it is translatable
	error.statusCode === 400

	export const useOAuthStore = defineStore('oauth', {
	state: () => ({
	clientId: false,
	clientSecret: false,
	/* App token is authentication for app without any user, used mostly for
	* MastoAPI's registration of new users, stored so that we can fall back to
	* it on logout
	*/
	appToken: false,
	/* User token is authentication for app with user, this is for every calls
	* that need authorized user to be successful (i.e. posting, liking etc)
	*/
	userToken: false,
	}),
	getters: {
	getToken() {
	return this.userToken \|\| this.appToken
	},
	getUserToken() {
	return this.userToken
	},
	},
	actions: {
	setClientData({ clientId, clientSecret }) {
	this.clientId = clientId
	this.clientSecret = clientSecret
	},
	setAppToken(token) {
	this.appToken = token
	},
	setToken(token) {
	this.userToken = token
	},
	clearToken() {
	this.userToken = false
	},
	async createApp() {
	const instance = useInstanceStore().server
	const app = await createApp(instance)
	this.setClientData(app)
	return app
	},
	/// Use this if you want to get the client id and secret but are not interested
	/// in whether they are valid.
	/// @return {{ clientId: string, clientSecret: string }} An object representing the app
	async ensureApp() {
	if (this.clientId && this.clientSecret) {
	return {
	clientId: this.clientId,
	clientSecret: this.clientSecret,
	}
	} else {
	return this.createApp()
	}
	},
	async getAppToken() {
	const instance = useInstanceStore().server
	const res = await getClientToken({
	clientId: this.clientId,
	clientSecret: this.clientSecret,
	instance,
	})
	this.setAppToken(res.access_token)
	return res.access_token
	},
	/// Use this if you want to ensure the app is still valid to use.
	/// @return {string} The access token to the app (not attached to any user)
	async ensureAppToken() {
	if (this.appToken) {
	try {
	await verifyAppToken({
	instance: useInstanceStore().server,
	appToken: this.appToken,
	})
	return this.appToken
	} catch (e) {
	if (!isAppTokenRejected(e)) {
	// The server did not reject our token, but we encountered other problems. Maybe the server is down.
	throw e
	} else {
	// The app token is rejected, so it is no longer useful.
	this.setAppToken(false)
	}
	}
	}

	// appToken is not available, or is rejected: try to get a new one.
	// First, make sure the client id and client secret are filled.
	try {
	await this.ensureApp()
	} catch (e) {
	console.error('Cannot create app', e)
	throw e
	}

	// Note that at this step, the client id and secret may be invalid
	// (because the backend may have already deleted the app due to no user login)
	try {
	return await this.getAppToken()
	} catch (e) {
	if (!isClientDataRejected(e)) {
	// Non-credentials problem, fail fast
	console.error('Cannot get app token', e)
	throw e
	} else {
	// the client id and secret are invalid, so we should clear them
	// and re-create our app
	this.setClientData({
	clientId: false,
	clientSecret: false,
	})
	await this.createApp()
	// try once again to get the token
	return await this.getAppToken()
	}
	}
	},
	},
	persist: {
	afterLoad(state) {
	// state.token is userToken with older name, coming from persistent state
	if (state.token && !state.userToken) {
	state.userToken = state.token
	}
	if ('token' in state) {
	delete state.token
	}
	return state
	},
	},
	})
	diff --git a/src/sw.js b/src/sw.js
	index 711aae6d07..38a2fe7b2e 100644
	--- a/src/sw.js
	+++ b/src/sw.js
	@@ -1,296 +1,297 @@
	/* eslint-env serviceworker */

	import 'virtual:pleroma-fe/service_worker_env'

	import { createI18n } from 'vue-i18n'

	-import { storage } from 'src/lib/storage.js'
	import { parseNotification } from './services/entity_normalizer/entity_normalizer.service.js'
	import { prepareNotificationObject } from './services/notification_utils/notification_utils.js'
	import { cacheKey, emojiCacheKey, shouldCache } from './services/sw/sw.js'

	+import { storage } from 'src/lib/storage.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 vuexState = await storage.getItem('vuex-lz')
	const locale = vuexState.config.interfaceLanguage \|\| 'en'
	i18n.locale = locale
	const notificationsNativeArray = Object.entries(
	vuexState.config.notificationNative,
	)
	state.webPushAlwaysShowNotifications =
	vuexState.config.webPushAlwaysShowNotifications

	state.allowedNotificationTypes = new Set(
	notificationsNativeArray
	.filter(([, 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/fixtures/setup_test.js b/test/fixtures/setup_test.js
	index 082fdbe29b..02c49eb604 100644
	--- a/test/fixtures/setup_test.js
	+++ b/test/fixtures/setup_test.js
	@@ -1,135 +1,136 @@
	import { config } from '@vue/test-utils'
	import { createMemoryHistory, createRouter } from 'vue-router'
	import VueVirtualScroller from 'vue-virtual-scroller'

	-import routes from 'src/boot/routes'
	import makeMockStore from './mock_store'

	+import routes from 'src/boot/routes'
	+
	export const $t = (msg) => msg
	const $i18n = { t: (msg) => msg }

	const applyAfterStore = (store, afterStore) => {
	afterStore(store)
	return store
	}

	const getDefaultOpts = ({
	afterStore = () => {
	/* no-op */
	},
	} = {}) => ({
	global: {
	plugins: [
	applyAfterStore(makeMockStore(), afterStore),
	VueVirtualScroller,
	createRouter({
	history: createMemoryHistory(),
	routes: routes({
	state: {
	users: {
	currentUser: {},
	},
	instance: {},
	},
	}),
	}),
	(Vue) => {
	Vue.directive('body-scroll-lock', {})
	},
	],
	components: {},
	stubs: {
	I18nT: true,
	teleport: true,
	FAIcon: true,
	FALayers: true,
	},
	mocks: {
	$t,
	$i18n,
	},
	},
	})

	// https://github.com/vuejs/vue-test-utils/issues/960
	const customBehaviors = () => {
	const filterByText = (keyword) => {
	const match =
	keyword instanceof RegExp
	? (target) => target && keyword.test(target)
	: (target) => keyword === target

	return (wrapper) =>
	match(wrapper.text()) \|\|
	match(wrapper.attributes('aria-label')) \|\|
	match(wrapper.attributes('title'))
	}

	return {
	findComponentByText(searchedComponent, text) {
	return this.findAllComponents(searchedComponent)
	.filter(filterByText(text))
	.at(0)
	},
	findByText(searchedElement, text) {
	return this.findAll(searchedElement).filter(filterByText(text)).at(0)
	},
	}
	}

	config.plugins.VueWrapper.install(customBehaviors)

	export const mountOpts = (allOpts = {}) => {
	const { afterStore, ...opts } = allOpts
	const defaultOpts = getDefaultOpts({ afterStore })
	const mergedOpts = {
	...opts,
	global: {
	...defaultOpts.global,
	},
	}

	if (opts.global) {
	mergedOpts.global.plugins = mergedOpts.global.plugins.concat(
	opts.global.plugins \|\| [],
	)
	Object.entries(opts.global).forEach(([k, v]) => {
	if (k === 'plugins') {
	return
	}
	if (defaultOpts.global[k]) {
	mergedOpts.global[k] = {
	...defaultOpts.global[k],
	...v,
	}
	} else {
	mergedOpts.global[k] = v
	}
	})
	}

	return mergedOpts
	}

	// https://stackoverflow.com/questions/78033718/how-can-i-wait-for-an-emitted-event-of-a-mounted-component-in-vue-test-utils
	export const waitForEvent = (
	wrapper,
	event,
	{ timeout = 1000, timesEmitted = 1 } = {},
	) => {
	const tick = 10

	return vi.waitFor(
	() => {
	const e = wrapper.emitted(event)
	if (e && e.length >= timesEmitted) {
	return
	}
	throw new Error('event is not emitted')
	},
	{
	timeout,
	interval: tick,
	},
	)
	}
	diff --git a/test/unit/specs/components/user_profile.spec.js b/test/unit/specs/components/user_profile.spec.js
	index 2b594b160b..8b198420b9 100644
	--- a/test/unit/specs/components/user_profile.spec.js
	+++ b/test/unit/specs/components/user_profile.spec.js
	@@ -1,220 +1,221 @@
	import { mount } from '@vue/test-utils'
	import { createStore } from 'vuex'

	import UserProfile from 'src/components/user_profile/user_profile.vue'
	+
	import { getters } from 'src/modules/users.js'
	import backendInteractorService from 'src/services/backend_interactor_service/backend_interactor_service.js'

	const mutations = {
	clearTimeline: () => {
	/* no-op */
	},
	}

	const actions = {
	fetchUser: () => {
	/* no-op */
	},
	fetchUserByScreenName: () => {
	/* no-op */
	},
	}

	const testGetters = {
	findUser: (state) => getters.findUser(state.users),
	findUserByName: (state) => getters.findUserByName(state.users),
	relationship: (state) => getters.relationship(state.users),
	mergedConfig: () => ({
	colors: '',
	highlight: {},
	customTheme: {
	colors: [],
	},
	}),
	}

	const localUser = {
	id: 100,
	is_local: true,
	screen_name: 'testUser',
	screen_name_ui: 'testUser',
	}

	const extUser = {
	id: 100,
	is_local: false,
	screen_name: 'testUser@test.instance',
	screen_name_ui: 'testUser@test.instance',
	}

	const externalProfileStore = createStore({
	mutations,
	actions,
	getters: testGetters,
	state: {
	api: {
	fetchers: {},
	backendInteractor: backendInteractorService(''),
	},
	interface: {
	browserSupport: '',
	},
	instance: {
	hideUserStats: true,
	},
	statuses: {
	timelines: {
	user: {
	statuses: [],
	statusesObject: {},
	faves: [],
	visibleStatuses: [],
	visibleStatusesObject: {},
	newStatusCount: 0,
	maxId: 0,
	minVisibleId: 0,
	loading: false,
	followers: [],
	friends: [],
	viewing: 'statuses',
	userId: 100,
	flushMarker: 0,
	},
	media: {
	statuses: [],
	statusesObject: {},
	faves: [],
	visibleStatuses: [],
	visibleStatusesObject: {},
	newStatusCount: 0,
	maxId: 0,
	minVisibleId: 0,
	loading: false,
	followers: [],
	friends: [],
	viewing: 'statuses',
	userId: 100,
	flushMarker: 0,
	},
	},
	},
	users: {
	currentUser: {
	credentials: '',
	},
	usersObject: { 100: extUser },
	usersByNameObject: {},
	users: [extUser],
	relationships: {},
	},
	},
	})

	const localProfileStore = createStore({
	mutations,
	actions,
	getters: testGetters,
	state: {
	api: {
	fetchers: {},
	backendInteractor: backendInteractorService(''),
	},
	interface: {
	browserSupport: '',
	},
	config: {
	colors: '',
	highlight: {},
	customTheme: {
	colors: [],
	},
	},
	instance: {
	hideUserStats: true,
	},
	statuses: {
	timelines: {
	user: {
	statuses: [],
	statusesObject: {},
	faves: [],
	visibleStatuses: [],
	visibleStatusesObject: {},
	newStatusCount: 0,
	maxId: 0,
	minVisibleId: 0,
	loading: false,
	followers: [],
	friends: [],
	viewing: 'statuses',
	userId: 100,
	flushMarker: 0,
	},
	media: {
	statuses: [],
	statusesObject: {},
	faves: [],
	visibleStatuses: [],
	visibleStatusesObject: {},
	newStatusCount: 0,
	maxId: 0,
	minVisibleId: 0,
	loading: false,
	followers: [],
	friends: [],
	viewing: 'statuses',
	userId: 100,
	flushMarker: 0,
	},
	},
	},
	users: {
	currentUser: {
	credentials: '',
	},
	usersObject: { 100: localUser },
	usersByNameObject: { testuser: localUser },
	users: [localUser],
	relationships: {},
	},
	},
	})

	// https://github.com/vuejs/test-utils/issues/1382
	describe.skip('UserProfile', () => {
	it('renders external profile', () => {
	const wrapper = mount(UserProfile, {
	global: {
	plugins: [externalProfileStore],
	mocks: {
	$route: {
	params: { id: 100 },
	name: 'external-user-profile',
	},
	$t: (msg) => msg,
	},
	},
	})

	expect(wrapper.find('.user-screen-name').text()).to.eql(
	'@testUser@test.instance',
	)
	})

	it('renders local profile', () => {
	const wrapper = mount(UserProfile, {
	global: {
	plugins: [localProfileStore],
	mocks: {
	$route: {
	params: { name: 'testUser' },
	name: 'user-profile',
	},
	$t: (msg) => msg,
	},
	},
	})

	expect(wrapper.find('.user-screen-name').text()).to.eql('@testUser')
	})
	})
	diff --git a/test/unit/specs/stores/lists.spec.js b/test/unit/specs/stores/lists.spec.js
	index 1925469817..083730856a 100644
	--- a/test/unit/specs/stores/lists.spec.js
	+++ b/test/unit/specs/stores/lists.spec.js
	@@ -1,105 +1,106 @@
	import { createPinia, setActivePinia } from 'pinia'
	import { createStore } from 'vuex'

	-import apiModule from 'src/modules/api.js'
	import { useListsStore } from 'src/stores/lists.js'

	+import apiModule from 'src/modules/api.js'
	+
	setActivePinia(createPinia())
	const store = useListsStore()
	window.vuex = createStore({
	modules: {
	api: apiModule,
	},
	})

	describe('The lists store', () => {
	describe('actions', () => {
	it('updates array of all lists', () => {
	store.$reset()
	const list = { id: '1', title: 'testList' }

	store.setLists([list])
	expect(store.allLists).to.have.length(1)
	expect(store.allLists).to.eql([list])
	})

	it('adds a new list with a title, updating the title for existing lists', () => {
	store.$reset()
	const list = { id: '1', title: 'testList' }
	const modList = { id: '1', title: 'anotherTestTitle' }

	store.setList({ listId: list.id, title: list.title })
	expect(store.allListsObject[list.id]).to.eql({
	title: list.title,
	accountIds: [],
	})
	expect(store.allLists).to.have.length(1)
	expect(store.allLists[0]).to.eql(list)

	store.setList({ listId: modList.id, title: modList.title })
	expect(store.allListsObject[modList.id]).to.eql({
	title: modList.title,
	accountIds: [],
	})
	expect(store.allLists).to.have.length(1)
	expect(store.allLists[0]).to.eql(modList)
	})

	it('adds a new list with an array of IDs, updating the IDs for existing lists', () => {
	store.$reset()
	const list = { id: '1', accountIds: ['1', '2', '3'] }
	const modList = { id: '1', accountIds: ['3', '4', '5'] }

	store.setListAccounts({ listId: list.id, accountIds: list.accountIds })
	expect(store.allListsObject[list.id].accountIds).to.eql(list.accountIds)

	store.setListAccounts({
	listId: modList.id,
	accountIds: modList.accountIds,
	})
	expect(store.allListsObject[modList.id].accountIds).to.eql(
	modList.accountIds,
	)
	})

	it('deletes a list', () => {
	store.$patch({
	allLists: [{ id: '1', title: 'testList' }],
	allListsObject: {
	1: { title: 'testList', accountIds: ['1', '2', '3'] },
	},
	})
	const listId = '1'

	store.deleteList({ listId })
	expect(store.allLists).to.have.length(0)
	expect(store.allListsObject).to.eql({})
	})
	})

	describe('getters', () => {
	it('returns list title', () => {
	store.$patch({
	allLists: [{ id: '1', title: 'testList' }],
	allListsObject: {
	1: { title: 'testList', accountIds: ['1', '2', '3'] },
	},
	})
	const id = '1'

	expect(store.findListTitle(id)).to.eql('testList')
	})

	it('returns list accounts', () => {
	store.$patch({
	allLists: [{ id: '1', title: 'testList' }],
	allListsObject: {
	1: { title: 'testList', accountIds: ['1', '2', '3'] },
	},
	})
	const id = '1'

	expect(store.findListAccounts(id)).to.eql(['1', '2', '3'])
	})
	})
	})
	diff --git a/test/unit/specs/stores/oauth.spec.js b/test/unit/specs/stores/oauth.spec.js
	index c634ebb668..54a4894792 100644
	--- a/test/unit/specs/stores/oauth.spec.js
	+++ b/test/unit/specs/stores/oauth.spec.js
	@@ -1,210 +1,211 @@
	import { HttpResponse, http } from 'msw'
	import { createPinia, setActivePinia } from 'pinia'
	import { createApp } from 'vue'
	import { createStore } from 'vuex'

	-import { useOAuthStore } from 'src/stores/oauth.js'
	import {
	authApis,
	injectMswToTest,
	testServer,
	} from '/test/fixtures/mock_api.js'

	+import { useOAuthStore } from 'src/stores/oauth.js'
	+
	const test = injectMswToTest(authApis)

	const vuexStore = createStore({
	modules: {
	instance: {
	state: () => ({ server: testServer }),
	},
	},
	})
	const app = createApp({})
	app.use(vuexStore)
	window.vuex = vuexStore

	const getStore = (defaultStateInjection) => {
	const pinia = createPinia().use(({ store }) => {
	if (store.$id === 'oauth') {
	store.$patch(defaultStateInjection)
	}
	})
	app.use(pinia)
	setActivePinia(pinia)
	return useOAuthStore()
	}

	describe('createApp', () => {
	test('it should use create an app and record client id and secret', async () => {
	const store = getStore()
	const app = await store.createApp()
	expect(store.clientId).to.eql('test-id')
	expect(store.clientSecret).to.eql('test-secret')
	expect(app.clientId).to.eql('test-id')
	expect(app.clientSecret).to.eql('test-secret')
	})

	test('it should throw and not update if failed', async ({ worker }) => {
	worker.use(
	http.post(`${testServer}/api/v1/apps`, () => {
	return HttpResponse.text('Throttled', { status: 429 })
	}),
	)

	const store = getStore()
	const res = store.createApp()
	await expect(res).rejects.toThrowError('Throttled')
	expect(store.clientId).to.eql(false)
	expect(store.clientSecret).to.eql(false)
	})
	})

	describe('ensureApp', () => {
	test('it should create an app if it does not exist', async () => {
	const store = getStore()
	const app = await store.ensureApp()
	expect(store.clientId).to.eql('test-id')
	expect(store.clientSecret).to.eql('test-secret')
	expect(app.clientId).to.eql('test-id')
	expect(app.clientSecret).to.eql('test-secret')
	})

	test('it should not create an app if it exists', async ({ worker }) => {
	worker.use(
	http.post(`${testServer}/api/v1/apps`, () => {
	return HttpResponse.text('Should not call this API', { status: 400 })
	}),
	)

	const store = getStore({
	clientId: 'another-id',
	clientSecret: 'another-secret',
	})
	const app = await store.ensureApp()
	expect(store.clientId).to.eql('another-id')
	expect(store.clientSecret).to.eql('another-secret')
	expect(app.clientId).to.eql('another-id')
	expect(app.clientSecret).to.eql('another-secret')
	})
	})

	describe('getAppToken', () => {
	test('it should get app token and set it in state', async () => {
	const store = getStore({
	clientId: 'test-id',
	clientSecret: 'test-secret',
	})
	const token = await store.getAppToken()
	expect(token).to.eql('test-app-token')
	expect(store.appToken).to.eql('test-app-token')
	})

	test('it should throw and not set state if it cannot get app token', async () => {
	const store = getStore({
	clientId: 'bad-id',
	clientSecret: 'bad-secret',
	})
	await expect(store.getAppToken()).rejects.toThrowError('400')
	expect(store.appToken).to.eql(false)
	})
	})

	describe('ensureAppToken', () => {
	test('it should work if the state is empty', async () => {
	const store = getStore()
	const token = await store.ensureAppToken()
	expect(token).to.eql('test-app-token')
	expect(store.appToken).to.eql('test-app-token')
	})

	test('it should work if we already have a working token', async () => {
	const store = getStore({
	appToken: 'also-good-app-token',
	})
	const token = await store.ensureAppToken()
	expect(token).to.eql('also-good-app-token')
	expect(store.appToken).to.eql('also-good-app-token')
	})

	test('it should work if we have a bad token but good app credentials', async ({
	worker,
	}) => {
	worker.use(
	http.post(`${testServer}/api/v1/apps`, () => {
	return HttpResponse.text('Should not call this API', { status: 400 })
	}),
	)
	const store = getStore({
	appToken: 'bad-app-token',
	clientId: 'test-id',
	clientSecret: 'test-secret',
	})
	const token = await store.ensureAppToken()
	expect(token).to.eql('test-app-token')
	expect(store.appToken).to.eql('test-app-token')
	})

	test('it should work if we have no token but good app credentials', async ({
	worker,
	}) => {
	worker.use(
	http.post(`${testServer}/api/v1/apps`, () => {
	return HttpResponse.text('Should not call this API', { status: 400 })
	}),
	)
	const store = getStore({
	clientId: 'test-id',
	clientSecret: 'test-secret',
	})
	const token = await store.ensureAppToken()
	expect(token).to.eql('test-app-token')
	expect(store.appToken).to.eql('test-app-token')
	})

	test('it should work if we have no token and bad app credentials', async () => {
	const store = getStore({
	clientId: 'bad-id',
	clientSecret: 'bad-secret',
	})
	const token = await store.ensureAppToken()
	expect(token).to.eql('test-app-token')
	expect(store.appToken).to.eql('test-app-token')
	expect(store.clientId).to.eql('test-id')
	expect(store.clientSecret).to.eql('test-secret')
	})

	test('it should work if we have bad token and bad app credentials', async () => {
	const store = getStore({
	appToken: 'bad-app-token',
	clientId: 'bad-id',
	clientSecret: 'bad-secret',
	})
	const token = await store.ensureAppToken()
	expect(token).to.eql('test-app-token')
	expect(store.appToken).to.eql('test-app-token')
	expect(store.clientId).to.eql('test-id')
	expect(store.clientSecret).to.eql('test-secret')
	})

	test('it should throw if we cannot create an app', async ({ worker }) => {
	worker.use(
	http.post(`${testServer}/api/v1/apps`, () => {
	return HttpResponse.text('Throttled', { status: 429 })
	}),
	)

	const store = getStore()
	await expect(store.ensureAppToken()).rejects.toThrowError('Throttled')
	})

	test('it should throw if we cannot obtain app token', async ({ worker }) => {
	worker.use(
	http.post(`${testServer}/oauth/token`, () => {
	return HttpResponse.text('Throttled', { status: 429 })
	}),
	)

	const store = getStore()
	await expect(store.ensureAppToken()).rejects.toThrowError('Throttled')
	})
	})

File Metadata

Mime Type: text/x-diff
Expires: Fri, Oct 30, 8:19 PM (15 h, 53 s)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1800509
Default Alt Text: (742 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions