No OneTemporary
Actions

Size

181 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/announcement/announcement.js b/src/components/announcement/announcement.js
	index 6f6190ebbe..6b45b2b909 100644
	--- a/src/components/announcement/announcement.js
	+++ b/src/components/announcement/announcement.js
	@@ -1,125 +1,125 @@
	import { mapState } from 'vuex'

	import AnnouncementEditor from 'src/components/announcement_editor/announcement_editor.vue'
	import localeService from '../../services/locale/locale.service.js'

	import { useAnnouncementsStore } from 'src/stores/announcements.js'

	const Announcement = {
	components: {
	AnnouncementEditor,
	},
	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?.privileges.has('announcements_manage_announcements')
	+ return this.currentUser?.privileges.has(
	+ '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 a8d4980751..802e90cf68 100644
	--- a/src/components/announcements_page/announcements_page.js
	+++ b/src/components/announcements_page/announcements_page.js
	@@ -1,64 +1,64 @@
	import { mapState } from 'vuex'

	import Announcement from 'src/components/announcement/announcement.vue'
	import AnnouncementEditor from 'src/components/announcement_editor/announcement_editor.vue'

	import { useAnnouncementsStore } from 'src/stores/announcements.js'

	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?.privileges.has('announcements_manage_announcements')
	+ return this.currentUser?.privileges.has(
	+ '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/edit_status_modal/edit_status_modal.js b/src/components/edit_status_modal/edit_status_modal.js
	index 78c5c51aaf..59c142d081 100644
	--- a/src/components/edit_status_modal/edit_status_modal.js
	+++ b/src/components/edit_status_modal/edit_status_modal.js
	@@ -1,61 +1,59 @@
	import { get } from 'lodash'
	import { defineAsyncComponent } from 'vue'

	import Modal from 'src/components/modal/modal.vue'

	import { useEditStatusStore } from 'src/stores/editStatus.js'

	const EditStatusModal = {
	components: {
	EditStatusForm: defineAsyncComponent(
	() => import('src/components/edit_status_form/edit_status_form.vue'),
	),
	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?.querySelector('textarea').focus(),
	- )
	+ this.$nextTick(() => this.$el?.querySelector('textarea').focus())
	}
	},
	},
	methods: {
	closeModal() {
	this.$refs.editStatusForm.requestClose()
	},
	doCloseModal() {
	useEditStatusStore().closeEditStatusModal()
	},
	},
	}

	export default EditStatusModal
	diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
	index ff46123955..0309079e84 100644
	--- a/src/components/mention_link/mention_link.js
	+++ b/src/components/mention_link/mention_link.js
	@@ -1,169 +1,167 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

	import UnicodeDomainIndicator from 'src/components/unicode_domain_indicator/unicode_domain_indicator.vue'
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
	import UserPopover from 'src/components/user_popover/user_popover.vue'
	import {
	highlightClass,
	highlightStyle,
	} from '../../services/user_highlighter/user_highlighter.js'

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

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

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

	library.add(faAt)

	const MentionLink = {
	name: 'MentionLink',
	components: {
	UserAvatar,
	UnicodeDomainIndicator,
	UserPopover,
	},
	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?.getters.findUserByUrl(this.url)
	- )
	+ return this.url && this.$store?.getters.findUserByUrl(this.url)
	},
	isYou() {
	// FIXME why user !== currentUser???
	return 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] \|\| useInstanceStore().instanceDomain)
	)
	},
	userNameFull() {
	return this.user?.screen_name
	},
	userNameFullUi() {
	return this.user?.screen_name_ui
	},
	highlightData() {
	return this.highlight[this.user?.screen_name]
	},
	highlightType() {
	return this.highlightData && '-' + this.highlightData.type
	},
	highlightClass() {
	return this.highlightData && highlightClass(this.user)
	},
	style() {
	if (this.highlightData) {
	const {
	backgroundColor,
	backgroundPosition,
	backgroundImage,
	...rest
	} = highlightStyle(this.highlightData)
	return rest
	}
	},
	classnames() {
	return [
	{
	'-you': this.isYou && this.shouldBoldenYou,
	'-highlighted': !!this.highlightData,
	'-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
	},
	...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
	...mapPiniaState(useUserHighlightStore, ['highlight']),
	...mapState({
	currentUser: (state) => state.users.currentUser,
	}),
	},
	}

	export default MentionLink
	diff --git a/src/components/navigation/filter.js b/src/components/navigation/filter.js
	index ff91d97d9f..0cbefd3fa6 100644
	--- a/src/components/navigation/filter.js
	+++ b/src/components/navigation/filter.js
	@@ -1,50 +1,49 @@
	export const filterNavigation = (
	list = [],
	{
	hasChats,
	hasAnnouncements,
	isFederating,
	isPrivate,
	currentUser,
	supportsBookmarkFolders,
	supportsBubbleTimeline,
	},
	) => {
	return list.filter(({ criteria, anon, anonRoute }) => {
	const set = new Set(criteria \|\| [])
	if (!isFederating && set.has('federating')) return false
	if (!currentUser && isPrivate && set.has('!private')) return false
	if (!currentUser && !(anon \|\| anonRoute)) return false
	- if ((!currentUser?.locked) && set.has('lockedUser'))
	- return false
	+ if (!currentUser?.locked && set.has('lockedUser')) return false
	if (!hasChats && set.has('chats')) return false
	if (!hasAnnouncements && set.has('announcements')) return false
	if (!supportsBubbleTimeline && set.has('supportsBubbleTimeline'))
	return false
	if (!supportsBookmarkFolders && set.has('supportsBookmarkFolders'))
	return false
	if (supportsBookmarkFolders && set.has('!supportsBookmarkFolders'))
	return false
	return true
	})
	}

	export const getListEntries = (store) =>
	store.allLists.map((list) => ({
	name: 'list-' + list.id,
	routeObject: { name: 'lists-timeline', params: { id: list.id } },
	labelRaw: list.title,
	iconLetter: list.title[0],
	}))

	export const getBookmarkFolderEntries = (store) =>
	store.allFolders
	? store.allFolders.map((folder) => ({
	name: 'bookmark-folder-' + folder.id,
	routeObject: { name: 'bookmark-folder', params: { id: folder.id } },
	labelRaw: folder.name,
	iconEmoji: folder.emoji,
	iconEmojiUrl: folder.emoji_url,
	iconLetter: folder.name[0],
	}))
	: []
	diff --git a/src/components/poll/poll.js b/src/components/poll/poll.js
	index f2d4b0ee5a..0ce304a0a3 100644
	--- a/src/components/poll/poll.js
	+++ b/src/components/poll/poll.js
	@@ -1,129 +1,129 @@
	import Checkbox from 'components/checkbox/checkbox.vue'
	import Timeago from 'components/timeago/timeago.vue'

	import genRandomSeed from '../../services/random_seed/random_seed.service.js'

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

	export default {
	name: 'Poll',
	props: ['basePoll', 'emoji'],
	components: {
	Timeago,

	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?.options) \|\| []
	+ return this.poll?.options \|\| []
	},
	expiresAt() {
	- return (this.poll?.expires_at) \|\| null
	+ return this.poll?.expires_at \|\| null
	},
	expired() {
	- return (this.poll?.expired) \|\| false
	+ return this.poll?.expired \|\| false
	},
	expirationLabel() {
	if (useMergedConfigStore().mergedConfig.useAbsoluteTimeFormat) {
	return this.expired ? 'polls.expired_at' : 'polls.expires_at'
	} else {
	return this.expired ? 'polls.expired' : 'polls.expires_in'
	}
	},
	allowNonSquareEmoji() {
	return useMergedConfigStore().mergedConfig.nonSquareEmoji
	},
	pauseMfm() {
	return useMergedConfigStore().mergedConfig.pauseMfm
	},
	scaleMfm() {
	return useMergedConfigStore().mergedConfig.scaleMfm
	},
	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/popover/popover.js b/src/components/popover/popover.js
	index 857caadcb9..40344834b8 100644
	--- a/src/components/popover/popover.js
	+++ b/src/components/popover/popover.js
	@@ -1,423 +1,421 @@
	/* global process */
	const Popover = {
	name: 'Popover',
	props: {
	// Action to trigger popover: either 'hover' or 'click'
	trigger: String,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	const attrs = {
	...this.triggerAttrs,
	}

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

	return attrs
	},
	},
	methods: {
	setAnchorEl(el) {
	this.anchorEl = el
	this.updateStyles()
	},
	containerBoundingClientRect() {
	const container = this.boundToSelector
	? this.$el.closest(this.boundToSelector)
	: this.$el.offsetParent
	return container.getBoundingClientRect()
	},
	updateStyles() {
	if (this.hidden) {
	this.styles = {}
	return
	}

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

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

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

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

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

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

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

	let horizOffset = 0
	let vertOffset = 0

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

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

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

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

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

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

	let translateX = 0
	let translateY = 0

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

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

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

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

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

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

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

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

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

	export default Popover
	diff --git a/src/components/post_status_modal/post_status_modal.js b/src/components/post_status_modal/post_status_modal.js
	index 7e9f1a4f85..e7001db9a2 100644
	--- a/src/components/post_status_modal/post_status_modal.js
	+++ b/src/components/post_status_modal/post_status_modal.js
	@@ -1,60 +1,58 @@
	import { get } from 'lodash'

	import Modal from 'src/components/modal/modal.vue'
	import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'

	import { usePostStatusStore } from 'src/stores/post_status.js'

	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?.querySelector('textarea').focus(),
	- )
	+ this.$nextTick(() => this.$el?.querySelector('textarea').focus())
	}
	},
	},
	methods: {
	closeModal() {
	usePostStatusStore().closePostStatusModal()
	},
	resetAndClose() {
	usePostStatusStore().resetPostStatusModal()
	usePostStatusStore().closePostStatusModal()
	},
	},
	}

	export default PostStatusModal
	diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
	index 090253d913..a00bf2c471 100644
	--- a/src/components/rich_content/rich_content.jsx
	+++ b/src/components/rich_content/rich_content.jsx
	@@ -1,565 +1,562 @@
	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,
	},
	// Allow wide emoji (max 3:1 ratio)
	allowNonSquareEmoji: {
	required: false,
	type: Boolean,
	default: false,
	},
	pauseMfm: {
	required: false,
	type: Boolean,
	default: false,
	},
	scaleMfm: {
	required: false,
	type: Boolean,
	default: false,
	},
	},
	// 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) => {
	// 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?.includes('mention')) {
	// Handling mentions here
	return renderMention(attrs, children)
	} else {
	currentMentions = null
	}
	} else if (Tag === 'span') {
	- if (
	- this.handleLinks &&
	- fullAttrs.class?.includes('h-card')
	- ) {
	+ if (this.handleLinks && 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) => {
	// 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?.includes('hashtag')) \|\| // Pleroma style
	+ 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
	const attrs = getAttrs(opener)
	const newAttrs = { ...attrs }
	const fullAttrs = getAttrs(opener, () => true)
	const classname = fullAttrs['class']
	const isMFM = classname?.startsWith('mfm-')
	if (isMFM) {
	const mfmOperator = /^mfm-(\w+)$/.exec(classname)?.[1]
	newAttrs['class'] = [
	'mfm',
	this.pauseMfm ? '-pause' : '',
	this.scaleMfm ? '-scale' : '',
	]
	.filter(Boolean)
	.join(' ')
	newAttrs['data-mfm-operator'] = mfmOperator
	switch (mfmOperator) {
	case 'position': {
	const x = Number.parseFloat(fullAttrs['data-mfm-x']) \|\| 0
	const y = Number.parseFloat(fullAttrs['data-mfm-y']) \|\| 0
	newAttrs.style = [
	'transform:',
	`translate(calc(${x} * (var(--emoji-size) / 2)), `,
	`calc(${y} * (var(--emoji-size) / 2)))`,
	].join(' ')
	break
	}
	case 'scale': {
	const x = Number.parseFloat(fullAttrs['data-mfm-x']) \|\| 1
	const y = Number.parseFloat(fullAttrs['data-mfm-y']) \|\| 1
	newAttrs.style = ['transform:', `scale(${x}, ${y})`].join(' ')
	break
	}
	case 'rotate': {
	const deg = Number.parseFloat(fullAttrs['data-mfm-deg']) \|\| 0
	newAttrs.style = [
	`transform: rotate(${deg}deg)`,
	'transform-origin: center',
	].join(';')
	break
	}
	case 'bg': {
	const color = fullAttrs['data-mfm-color'] \|\| 0
	newAttrs.style = [`background-color: #${color}`].join(' ')
	break
	}
	case 'fg': {
	const color = fullAttrs['data-mfm-color'] \|\| 0
	newAttrs.style = [`color: #${color}`].join(';')
	break
	}
	case 'spin': {
	const speed = fullAttrs['data-mfm-speed'] \|\| '1s'
	const delay = fullAttrs['data-mfm-delay'] \|\| 0
	const left = fullAttrs['data-mfm-left'] != null
	const alternate = fullAttrs['data-mfm-alternate'] != null
	const y = fullAttrs['data-mfm-y'] != null
	const x = fullAttrs['data-mfm-x'] != null

	const anim = [
	x ? 'mfm-spinX' : null,
	y ? 'mfm-spinY' : null,
	'mfm-spin',
	].filter((a) => a)[0]

	const direction = [
	alternate ? 'alternate' : null,
	left ? 'reverse' : null,
	'normal',
	].filter((a) => a)[0]

	newAttrs.style = [
	`animation-name: ${anim}`,
	`animation-duration: ${speed}`,
	'animation-iteration-count: infinite',
	`animation-delay: ${delay}`,
	`animation-direction: ${direction}`,
	'animation-fill-mode: none',
	'animation-timing-function: linear',
	].join(';')
	break
	}
	case 'flip': {
	newAttrs.style = 'transform: scaleX(-1)'
	break
	}
	case 'border': {
	const width = fullAttrs['data-mfm-width'] \|\| '0'
	const style = fullAttrs['data-mfm-style'] \|\| 'solid'
	const color = fullAttrs['data-mfm-color'] \|\| 'transparent'
	const radius = fullAttrs['data-mfm-radius'] \|\| '0'
	const noclip = fullAttrs['data-mfm-noclip'] \|\| false

	newAttrs.style = [
	`border: ${width} ${style} ${color}`,
	`border-radius: ${radius}`,
	`overflow: ${noclip ? 'visible' : 'clip'}`,
	].join(';')
	break
	}
	case 'tada':
	case 'jelly':
	case 'twitch':
	case 'shake':
	case 'jump':
	case 'bounce':
	case 'rainbow': {
	const speed = fullAttrs['data-mfm-speed'] \|\| '1s'
	const delay = fullAttrs['data-mfm-delay'] \|\| 0

	const rules = [
	`animation-name: mfm-${mfmOperator}`,
	`animation-duration: ${speed}`,
	'animation-iteration-count: infinite',
	`animation-delay: ${delay}`,
	'animation-direction: normal',
	'animation-fill-mode: none',
	'animation-timing-function: linear',
	].join(';')
	newAttrs.style = rules
	break
	}
	case 'sparkle':
	case 'x2':
	case 'x3':
	case 'x4':
	// handled by css
	break
	default:
	console.warn('Unsupported MFM operator:', mfmOperator, opener)
	break
	}
	}
	return <Tag {...newAttrs}>{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.allowNonSquareEmoji ? '-allow-non-square-emoji' : '',
	]}
	>
	{this.collapse
	? pass2.map((x) => {
	if (typeof x === 'string') return x.replaceAll('\n', ' ')
	if (!Array.isArray(x)) return x
	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
	.replaceAll(/<[^>]+?>/gi, '') // remove all tags
	.replaceAll(/@\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/status/status.js b/src/components/status/status.js
	index cd3ae44d03..3e10a24e13 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,590 +1,589 @@
	import { uniqBy } from 'lodash'
	import { defineAsyncComponent } from 'vue'

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

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

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

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

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

	const Status = {
	name: 'Status',
	components: {
	PostStatusForm,
	UserAvatar,
	AvatarList,
	Timeago,
	StatusPopover,
	UserListPopover,
	EmojiReactions,
	StatusContent,
	MentionLink,
	MentionsLine,
	UserPopover,
	UserLink,
	Quote: defineAsyncComponent(() => import('src/components/quote/quote.vue')),
	StatusActionButtons,
	},
	props: {
	statusoid: Object,
	replies: Array,

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

	profileUserId: String,
	simpleTree: Boolean,
	showOtherRepliesAsButton: Boolean,
	canDive: Boolean,
	ignoreMute: Boolean,

	threadDisplayStatus: String,
	},
	emits: ['goto', 'dive', 'toggleExpanded', 'suspendableStateChange'],
	data() {
	return {
	replying: false,
	unmuted: false,
	userExpanded: false,
	mediaPlaying: new Set(),
	error: null,
	headTailLinks: null,
	}
	},
	computed: {
	showReasonMutedThread() {
	return (
	- (this.status.thread_muted \|\|
	- (this.status.reblog?.thread_muted)) &&
	+ (this.status.thread_muted \|\| this.status.reblog?.thread_muted) &&
	!this.inConversation
	)
	},
	allowNonSquareEmoji() {
	return this.mergedConfig.nonSquareEmoji
	},
	pauseMfm() {
	return this.mergedConfig.pauseMfm
	},
	scaleMfm() {
	return this.mergedConfig.scaleMfm
	},
	repeaterClass() {
	const user = this.statusoid.user
	return highlightClass(user)
	},
	userClass() {
	const user = this.retweet
	? this.statusoid.retweeted_status.user
	: this.statusoid.user
	return highlightClass(user)
	},
	deleted() {
	return this.statusoid.deleted
	},
	repeaterStyle() {
	const user = this.statusoid.user
	return highlightStyle(useUserHighlightStore().get(user.screen_name))
	},
	userStyle() {
	if (this.noHeading) return
	const user = this.retweet
	? this.statusoid.retweeted_status.user
	: this.statusoid.user
	return highlightStyle(useUserHighlightStore().get(user.screen_name))
	},
	userProfileLink() {
	return this.generateUserProfileLink(
	this.status.user.id,
	this.status.user.screen_name,
	)
	},
	replyProfileLink() {
	if (this.isReply) {
	const user = this.$store.getters.findUser(
	this.status.in_reply_to_user_id,
	)
	// FIXME Why user not found sometimes???
	return user ? user.statusnet_profile_url : 'NOT_FOUND'
	}
	},
	retweet() {
	return !!this.statusoid.retweeted_status
	},
	retweeterUser() {
	return this.statusoid.user
	},
	retweeter() {
	return this.statusoid.user.name \|\| this.statusoid.user.screen_name_ui
	},
	retweeterHtml() {
	return this.statusoid.user.name
	},
	retweeterProfileLink() {
	return this.generateUserProfileLink(
	this.statusoid.user.id,
	this.statusoid.user.screen_name,
	)
	},
	status() {
	if (this.retweet) {
	return this.statusoid.retweeted_status
	} else {
	return this.statusoid
	}
	},
	statusFromGlobalRepository() {
	// NOTE: Consider to replace status with statusFromGlobalRepository
	return this.$store.state.statuses.allStatusesObject[this.status.id]
	},
	loggedIn() {
	return !!this.currentUser
	},
	muteFilterHits() {
	return muteFilterHits(
	Object.values(
	useSyncConfigStore().prefsStorage.simple.muteFilters \|\| {},
	),
	this.status,
	)
	},
	botStatus() {
	return this.status.user.actor_type === 'Service'
	},
	showActorTypeIndicator() {
	return !this.hideBotIndication
	},
	sensitiveStatus() {
	return this.status.nsfw
	},
	mentionsLine() {
	if (!this.headTailLinks) return []
	const writtenSet = new Set(
	this.headTailLinks.writtenMentions.map((_) => _.url),
	)
	return this.status.attentions
	.filter((attn) => {
	// no reply user
	return (
	attn.id !== this.status.in_reply_to_user_id &&
	// no self-replies
	attn.statusnet_profile_url !==
	this.status.user.statusnet_profile_url &&
	// don't include if mentions is written
	!writtenSet.has(attn.statusnet_profile_url)
	)
	})
	.map((attn) => ({
	url: attn.statusnet_profile_url,
	content: attn.screen_name,
	userId: attn.id,
	}))
	},
	hasMentionsLine() {
	return this.mentionsLine.length > 0
	},
	muteReasons() {
	return [
	this.userIsMuted ? 'user' : null,
	this.status.thread_muted ? 'thread' : null,
	this.muteFilterHits.length > 0 ? 'filtered' : null,
	this.muteBotStatuses && this.botStatus ? 'bot' : null,
	this.muteSensitiveStatuses && this.sensitiveStatus ? 'nsfw' : null,
	].filter((_) => _)
	},
	muteLocalized() {
	if (this.muteReasons.length === 0) return null
	const mainReason = () => {
	switch (this.muteReasons[0]) {
	case 'user':
	return this.$t('status.muted_user')
	case 'thread':
	return this.$t('status.thread_muted')
	case 'filtered':
	return this.$t(
	'status.muted_filters',
	{
	name: this.muteFilterHits[0].name,
	filterMore: this.muteFilterHits.length - 1,
	},
	this.muteFilterHits.length,
	)
	case 'bot':
	return this.$t('status.bot_muted')
	case 'nsfw':
	return this.$t('status.sensitive_muted')
	}
	}
	if (this.muteReasons.length > 1) {
	return this.$t(
	'status.multi_reason_mute',
	{
	main: mainReason(),
	numReasonsMore: this.muteReasons.length - 1,
	},
	this.muteReasons.length - 1,
	)
	} else {
	return mainReason()
	}
	},
	muted() {
	if (this.ignoreMute) return false
	if (this.statusoid.user.id === this.currentUser.id) return false
	return !this.unmuted && !this.shouldNotMute && this.muteReasons.length > 0
	},
	userIsMuted() {
	if (this.statusoid.user.id === this.currentUser.id) return false
	const { status } = this
	const { reblog } = status
	const relationship = this.$store.getters.relationship(status.user.id)
	const relationshipReblog =
	reblog && this.$store.getters.relationship(reblog.user.id)
	return (
	(status.muted && !status.thread_muted) \|\|
	// Reprööt of a muted post according to BE
	(reblog?.muted && !reblog.thread_muted) \|\|
	// Muted user
	relationship.muting \|\|
	// Muted user of a reprööt
	relationshipReblog?.muting
	)
	},
	shouldNotMute() {
	if (this.ignoreMute) return true
	if (this.focused) return true
	const { status } = this
	const { reblog } = status
	return (
	((this.inProfile &&
	// Don't mute user's posts on user timeline (except reblogs)
	((!reblog && status.user.id === this.profileUserId) \|\|
	// Same as above but also allow self-reblogs
	reblog?.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))
	)
	},
	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?.screen_name_ui
	}
	},
	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.focused &&
	(this.combinedFavsAndRepeatsUsers.length > 0 \|\|
	this.statusFromGlobalRepository.quotes_count)
	)
	},
	muteBotStatuses() {
	return this.mergedConfig.muteBotStatuses
	},
	muteSensitiveStatuses() {
	return this.mergedConfig.muteSensitiveStatuses
	},
	hideBotIndication() {
	return this.mergedConfig.hideBotIndication
	},
	currentUser() {
	return this.$store.state.users.currentUser
	},
	mergedConfig() {
	return useMergedConfigStore().mergedConfig
	},
	isSuspendable() {
	return !this.replying && this.mediaPlaying.size === 0
	},
	inThreadForest() {
	return !!this.threadDisplayStatus
	},
	threadShowing() {
	return this.threadDisplayStatus === 'showing'
	},
	visibilityLocalized() {
	return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
	},
	isEdited() {
	return this.status.edited_at !== null
	},
	editingAvailable() {
	return useInstanceCapabilitiesStore().editingAvailable
	},
	quoteId() {
	return this.status.quote_id
	},
	quoteUrl() {
	return this.status.quote_url
	},
	quoteVisible() {
	return this.status.quote_visible
	},
	quoteExpanded() {
	return !this.inQuote
	},
	scrobblePresent() {
	if (this.mergedConfig.hideScrobbles) return false
	if (!this.status.user?.latestScrobble) return false
	const value = this.mergedConfig.hideScrobblesAfter.match(/\d+/gs)[0]
	const unit = this.mergedConfig.hideScrobblesAfter.match(/\D+/gs)[0]
	let multiplier = 60 * 1000 // minutes is smallest unit
	switch (unit) {
	case 'm':
	break
	case 'h':
	multiplier *= 60 // hour
	break
	case 'd':
	multiplier *= 60 // hour
	multiplier *= 24 // day
	break
	}
	const maxAge = Number(value) * multiplier
	const createdAt = Date.parse(this.status.user.latestScrobble.created_at)
	const age = Date.now() - createdAt
	if (age > maxAge) return false
	return this.status.user.latestScrobble.artist
	},
	scrobble() {
	return this.status.user?.latestScrobble
	},
	},
	methods: {
	visibilityIcon(visibility) {
	switch (visibility) {
	case 'private':
	return 'lock'
	case 'unlisted':
	return 'lock-open'
	case 'direct':
	return 'envelope'
	case 'local':
	return 'igloo'
	default:
	return 'globe'
	}
	},
	showError(error) {
	this.error = error
	},
	clearError() {
	this.error = undefined
	},
	toggleReplyForm() {
	if (this.replying) {
	// This emits 'close-accepted' if successful
	// which in turn callse closeReply()
	this.$refs.postStatusForm.requestClose()
	} else {
	this.replying = true
	}
	},
	closeReplyForm() {
	this.replying = false
	},
	gotoOriginal(id) {
	if (this.inConversation) {
	this.$emit('goto', id)
	}
	},
	toggleExpanded() {
	this.$emit('toggleExpanded')
	},
	toggleMute() {
	this.unmuted = !this.unmuted
	},
	toggleUserExpanded() {
	this.userExpanded = !this.userExpanded
	},
	generateUserProfileLink(id, name) {
	return generateProfileLink(
	id,
	name,
	useInstanceStore().restrictedNicknames,
	)
	},
	addMediaPlaying(id) {
	this.mediaPlaying.add(id)
	},
	removeMediaPlaying(id) {
	this.mediaPlaying.delete(id)
	},
	setHeadTailLinks(headTailLinks) {
	this.headTailLinks = headTailLinks
	},
	toggleThreadDisplay() {
	this.controlledToggleThreadDisplay()
	},
	scrollIfFocused(focused) {
	if (this.$el.getBoundingClientRect == null) return
	if (focused) {
	const rect = this.$el.getBoundingClientRect()
	if (rect.top < 100) {
	// Post is above screen, match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.height >= window.innerHeight - 50) {
	// Post we want to see is taller than screen so match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.bottom > window.innerHeight - 50) {
	// Post is below screen, match its bottom to screen bottom
	window.scrollBy(0, rect.bottom - window.innerHeight + 50)
	}
	}
	},
	},
	watch: {
	focused: function (id) {
	this.scrollIfFocused(id)
	},
	'status.repeat_num': function (num) {
	// refetch repeats when repeat_num is changed in any way
	if (
	this.focused &&
	this.statusFromGlobalRepository.rebloggedBy &&
	this.statusFromGlobalRepository.rebloggedBy.length !== num
	) {
	this.$store.dispatch('fetchRepeats', this.status.id)
	}
	},
	'status.fave_num': function (num) {
	// refetch favs when fave_num is changed in any way
	if (
	this.focused &&
	this.statusFromGlobalRepository.favoritedBy &&
	this.statusFromGlobalRepository.favoritedBy.length !== num
	) {
	this.$store.dispatch('fetchFavs', this.status.id)
	}
	},
	isSuspendable: function (suspend) {
	this.$emit('suspendableStateChange', { id: this.statusoid.id, suspend })
	},
	},
	}

	export default Status
	diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
	index f9a35ad1c5..01913f7099 100644
	--- a/src/components/tab_switcher/tab_switcher.jsx
	+++ b/src/components/tab_switcher/tab_switcher.jsx
	@@ -1,183 +1,187 @@
	// eslint-disable-next-line no-unused

	import { Fragment } from 'vue'

	import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'

	import './tab_switcher.scss'

	const findFirstUsable = (slots) => slots.findIndex((_) => _.props)

	export default {
	name: 'TabSwitcher',
	props: {
	renderOnlyFocused: {
	required: false,
	type: Boolean,
	default: false,
	},
	onSwitch: {
	required: false,
	type: Function,
	default: undefined,
	},
	activeTab: {
	required: false,
	type: String,
	default: undefined,
	},
	scrollableTabs: {
	required: false,
	type: Boolean,
	default: false,
	},
	bodyScrollLock: {
	required: false,
	type: Boolean,
	default: false,
	},
	},
	data() {
	return {
	active: findFirstUsable(this.slots()),
	}
	},
	computed: {
	activeIndex() {
	// In case of controlled component
	if (this.activeTab) {
	return this.slots().findIndex(
	(slot) => slot?.props && this.activeTab === slot.props.key,
	)
	} else {
	return this.active
	}
	},
	isActive() {
	return (tabName) => {
	const isWanted = (slot) =>
	slot.props && slot.props['data-tab-name'] === tabName
	return this.$slots.default().findIndex(isWanted) === this.activeIndex
	}
	},
	},
	beforeUpdate() {
	const currentSlot = this.slots()[this.active]
	if (!currentSlot.props) {
	this.active = findFirstUsable(this.slots())
	}
	},
	methods: {
	clickTab(index) {
	return (e) => {
	e.preventDefault()
	this.setTab(index)
	}
	},
	// DO NOT put it to computed, it doesn't work (caching?)
	slots() {
	if (this.$slots.default()[0].type === Fragment) {
	return this.$slots.default()[0].children
	}
	return this.$slots.default()
	},
	setTab(index) {
	if (typeof this.onSwitch === 'function') {
	this.onSwitch.call(null, this.slots()[index].key)
	}
	this.active = index
	if (this.scrollableTabs && this.$refs.contents) {
	this.$refs.contents.scrollTop = 0
	}
	},
	},
	render() {
	const tabs = this.slots().map((slot, index) => {
	const props = slot.props
	if (!props) return
	const classesTab = ['tab']
	const classesWrapper = ['tab-wrapper']
	if (this.activeIndex === index) {
	classesTab.push('active')
	classesWrapper.push('active')
	}
	if (props.image) {
	return (
	<div class={classesWrapper.join(' ')}>
	<button
	disabled={props.disabled}
	onClick={this.clickTab(index)}
	class={classesTab.join(' ')}
	type="button"
	role="tab"
	>
	- <img src={props.image} alt={props['image-tooltip']} title={props['image-tooltip']} />
	+ <img
	+ src={props.image}
	+ alt={props['image-tooltip']}
	+ title={props['image-tooltip']}
	+ />
	{props.label ? '' : props.label}
	</button>
	</div>
	)
	}
	return (
	<div class={classesWrapper.join(' ')}>
	<button
	disabled={props.disabled}
	onClick={this.clickTab(index)}
	class={classesTab.join(' ')}
	type="button"
	role="tab"
	>
	{!props.icon ? (
	''
	) : (
	<FAIcon
	class="tab-icon"
	size="2x"
	fixed-width
	icon={props.icon}
	/>
	)}
	<span class="text">{props.label}</span>
	</button>
	</div>
	)
	})

	const contents = this.slots().map((slot, index) => {
	const props = slot.props
	if (!props) return
	const active = this.activeIndex === index
	const classes = [active ? 'active' : 'hidden']
	if (props.fullHeight \|\| props['full-height']) {
	classes.push('-full-height')
	}
	if (props.fullWidth \|\| props['full-width']) {
	classes.push('-full-width')
	}
	let delayRender = slot.props['delay-render']
	if (delayRender && active) {
	slot.props['delay-render'] = false
	delayRender = false
	}
	const renderSlot =
	!delayRender && (!this.renderOnlyFocused \|\| active) ? slot : ''

	return <div class={classes}>{renderSlot}</div>
	})

	return (
	<div class="tab-switcher top-tabs" ref="root">
	<div class="tabs" role="tablist" ref="nav">
	{tabs}
	</div>
	<div
	role="tabpanel"
	class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}
	v-body-scroll-lock={this.bodyScrollLock}
	ref="content"
	>
	{contents}
	</div>
	</div>
	)
	},
	}
	diff --git a/src/services/chat_utils/chat_utils.js b/src/services/chat_utils/chat_utils.js
	index 05ba80bc34..bc02981cd8 100644
	--- a/src/services/chat_utils/chat_utils.js
	+++ b/src/services/chat_utils/chat_utils.js
	@@ -1,49 +1,47 @@
	import { showDesktopNotification } from '../desktop_notification_utils/desktop_notification_utils.js'

	export const maybeShowChatNotification = (chat) => {
	if (!chat.lastMessage) return
	if (window.vuex.state.users.currentUser.id === chat.lastMessage.account_id)
	return

	const opts = {
	tag: chat.lastMessage.id,
	title: chat.account.name,
	icon: chat.account.profile_image_url,
	body: chat.lastMessage.content,
	}

	- if (
	- chat.lastMessage.attachment?.type === 'image'
	- ) {
	+ if (chat.lastMessage.attachment?.type === 'image') {
	opts.image = chat.lastMessage.attachment.preview_url
	}

	showDesktopNotification(window.vuex.state, opts)
	}

	export const buildFakeMessage = ({
	content,
	chatId,
	attachments,
	userId,
	idempotencyKey,
	}) => {
	const fakeMessage = {
	content,
	chat_id: chatId,
	created_at: new Date(),
	id: `${new Date().getTime()}`,
	attachments,
	account_id: userId,
	idempotency_key: idempotencyKey,
	emojis: [],
	pending: true,
	isNormalized: true,
	}

	if (attachments[0]) {
	fakeMessage.attachment = attachments[0]
	}

	return fakeMessage
	}
	diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js
	index 2339f14319..46b81cc66b 100644
	--- a/src/services/notification_utils/notification_utils.js
	+++ b/src/services/notification_utils/notification_utils.js
	@@ -1,209 +1,206 @@
	import { showDesktopNotification } from '../desktop_notification_utils/desktop_notification_utils.js'
	import { muteFilterHits } from '../status_parser/status_parser.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

	const visibleTypes = (notificationVisibility) => {
	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 = (muteFilters, notification) => {
	if (!notification.status) return false
	if (notification.status.muted) return true
	return muteFilterHits(muteFilters, notification.status).length > 0
	}

	export const maybeShowNotification = (
	store,
	notificationVisibility,
	muteFilters,
	notification,
	i18n,
	) => {
	const rootState = store.rootState \|\| store.state

	if (notification.seen) return
	if (!visibleTypes(notificationVisibility).includes(notification.type)) return
	if (
	notification.type === 'mention' &&
	isMutedNotification(muteFilters, notification)
	)
	return

	const notificationObject = prepareNotificationObject(notification, i18n)
	showDesktopNotification(rootState, notificationObject)
	}

	export const filteredNotificationsFromStore = (
	store,
	notificationVisibility,
	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(notificationVisibility)).includes(notification.type),
	)
	}

	export const unseenNotificationsFromStore = (
	store,
	notificationVisibility,
	ignoreInactionableSeen,
	) => {
	return filteredNotificationsFromStore(store, notificationVisibility).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.nsfw &&
	- status?.attachments?.[0]?.mimetype.startsWith('image/')
	- ) {
	+ if (!status.nsfw && status?.attachments?.[0]?.mimetype.startsWith('image/')) {
	notifObj.image = status.attachments[0].url
	}

	return notifObj
	}

	export const countExtraNotifications = (
	store,
	mergedConfig,
	unreadChatsCount,
	unreadAnnouncementCount,
	) => {
	const rootGetters = store.rootGetters \|\| store.getters

	if (!mergedConfig.showExtraNotifications) {
	return 0
	}

	return [
	mergedConfig.showChatsInExtraNotifications ? unreadChatsCount : 0,
	mergedConfig.showAnnouncementsInExtraNotifications
	? unreadAnnouncementCount
	: 0,
	mergedConfig.showFollowRequestsInExtraNotifications
	? rootGetters.followRequestCount
	: 0,
	].reduce((a, c) => a + c, 0)
	}
	diff --git a/src/services/sw/sw.js b/src/services/sw/sw.js
	index b114cb0de5..2b7dabd41c 100644
	--- a/src/services/sw/sw.js
	+++ b/src/services/sw/sw.js
	@@ -1,187 +1,189 @@
	/* global process */
	function urlBase64ToUint8Array(base64String) {
	const padding = '='.repeat((4 - (base64String.length % 4)) % 4)
	- const base64 = (base64String + padding).replaceAll('-', '+').replace(/_/g, '/')
	+ const base64 = (base64String + padding)
	+ .replaceAll('-', '+')
	+ .replace(/_/g, '/')

	const rawData = window.atob(base64)
	return Uint8Array.from([...rawData].map((char) => char.codePointAt(0)))
	}

	export function isSWSupported() {
	return 'serviceWorker' in navigator
	}

	function isPushSupported() {
	return 'PushManager' in window
	}

	function getOrCreateServiceWorker() {
	if (!isSWSupported()) return
	const swType = process.env.HAS_MODULE_SERVICE_WORKER ? 'module' : 'classic'
	return navigator.serviceWorker
	.register('/sw-pleroma.js', { type: swType })
	.catch((err) =>
	console.error('Unable to get or create a service worker.', err),
	)
	}

	function subscribePush(registration, isEnabled, vapidPublicKey) {
	if (!isEnabled)
	return Promise.reject(new Error('Web Push is disabled in config'))
	if (!vapidPublicKey)
	return Promise.reject(new Error('VAPID public key is not found'))

	const subscribeOptions = {
	userVisibleOnly: false,
	applicationServerKey: urlBase64ToUint8Array(vapidPublicKey),
	}
	return registration.pushManager.subscribe(subscribeOptions)
	}

	function unsubscribePush(registration) {
	return registration.pushManager.getSubscription().then((subscription) => {
	if (subscription === null) {
	return Promise.resolve('No subscription')
	}
	return subscription.unsubscribe()
	})
	}

	function deleteSubscriptionFromBackEnd(token) {
	return fetch('/api/v1/push/subscription/', {
	method: 'DELETE',
	headers: {
	'Content-Type': 'application/json',
	Authorization: `Bearer ${token}`,
	},
	}).then((response) => {
	if (!response.ok) throw new Error('Bad status code from server.')
	return response
	})
	}

	function sendSubscriptionToBackEnd(
	subscription,
	token,
	notificationVisibility,
	) {
	return window
	.fetch('/api/v1/push/subscription/', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	Authorization: `Bearer ${token}`,
	},
	body: JSON.stringify({
	subscription,
	data: {
	alerts: {
	follow: notificationVisibility.follows,
	favourite: notificationVisibility.likes,
	mention: notificationVisibility.mentions,
	reblog: notificationVisibility.repeats,
	move: notificationVisibility.moves,
	},
	},
	}),
	})
	.then((response) => {
	if (!response.ok) throw new Error('Bad status code from server.')
	return response.json()
	})
	.then((responseData) => {
	if (!responseData.id) throw new Error('Bad response from server.')
	return responseData
	})
	}
	export async function initServiceWorker(store) {
	if (!isSWSupported()) return
	await getOrCreateServiceWorker()
	navigator.serviceWorker.addEventListener('message', (event) => {
	const { dispatch } = store
	const { type, ...rest } = event.data

	switch (type) {
	case 'notificationClicked':
	dispatch('notificationClicked', { id: rest.id })
	}
	})
	}

	export async function showDesktopNotification(content) {
	if (!isSWSupported) return
	const { active: sw } =
	(await window.navigator.serviceWorker.getRegistration()) \|\| {}
	if (!sw) return console.error('No serviceworker found!')
	sw.postMessage({ type: 'desktopNotification', content })
	}

	export async function closeDesktopNotification({ id }) {
	if (!isSWSupported) return
	const { active: sw } =
	(await window.navigator.serviceWorker.getRegistration()) \|\| {}
	if (!sw) return console.error('No serviceworker found!')
	if (id >= 0) {
	sw.postMessage({ type: 'desktopNotificationClose', content: { id } })
	} else {
	sw.postMessage({ type: 'desktopNotificationClose', content: { all: true } })
	}
	}

	export async function updateFocus() {
	if (!isSWSupported) return
	const { active: sw } =
	(await window.navigator.serviceWorker.getRegistration()) \|\| {}
	if (!sw) return console.error('No serviceworker found!')
	sw.postMessage({ type: 'updateFocus' })
	}

	export function registerPushNotifications(
	isEnabled,
	vapidPublicKey,
	token,
	notificationVisibility,
	) {
	if (isPushSupported()) {
	getOrCreateServiceWorker()
	.then((registration) =>
	subscribePush(registration, isEnabled, vapidPublicKey),
	)
	.then((subscription) =>
	sendSubscriptionToBackEnd(subscription, token, notificationVisibility),
	)
	.catch((e) =>
	console.warn(`Failed to setup Web Push Notifications: ${e.message}`),
	)
	}
	}

	export function unregisterPushNotifications(token) {
	if (isPushSupported()) {
	getOrCreateServiceWorker()
	.then((registration) => {
	return unsubscribePush(registration).then((result) => [
	registration,
	result,
	])
	})
	.then(([, unsubResult]) => {
	if (unsubResult === 'No subscription') return
	if (!unsubResult) {
	console.warn("Push subscription cancellation wasn't successful")
	}
	return deleteSubscriptionFromBackEnd(token)
	})
	.catch((e) => {
	console.warn(`Failed to disable Web Push Notifications: ${e.message}`)
	})
	}
	}

	export const shouldCache = process.env.NODE_ENV === 'production'
	export const cacheKey = 'pleroma-fe'
	export const emojiCacheKey = 'pleroma-fe-emoji'

	export const clearCache = (key) => caches.delete(key)

	export { getOrCreateServiceWorker }
	diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
	index 4f1fe0a76b..cc5553936f 100644
	--- a/src/services/theme_data/theme_data.service.js
	+++ b/src/services/theme_data/theme_data.service.js
	@@ -1,837 +1,834 @@
	import { brightness, contrastRatio, convert } from 'chromatism'

	import {
	alphaBlendLayers,
	getCssColor,
	getTextColor,
	relativeLuminance,
	rgb2hex,
	rgba2css,
	} from '../color_convert/color_convert.js'
	import { DEFAULT_OPACITY, LAYERS, SLOT_INHERITANCE } from './pleromafe.js'

	/*
	* # What's all this?
	* Here be theme engine for pleromafe. All of this supposed to ease look
	* and feel customization, making widget styles and make developer's life
	* easier when it comes to supporting themes. Like many other theme systems
	* it operates on color definitions, or "slots" - for example you define
	* "button" color slot and then in UI component Button's CSS you refer to
	* it as a CSS3 Variable.
	*
	* Some applications allow you to customize colors for certain things.
	* Some UI toolkits allow you to define colors for each type of widget.
	* Most of them are pretty barebones and have no assistance for common
	* problems and cases, and in general themes themselves are very hard to
	* maintain in all aspects. This theme engine tries to solve all of the
	* common problems with themes.
	*
	* You don't have redefine several similar colors if you just want to
	* change one color - all color slots are derived from other ones, so you
	* can have at least one or two "basic" colors defined and have all other
	* components inherit and modify basic ones.
	*
	* You don't have to test contrast ratio for colors or pick text color for
	* each element even if you have light-on-dark elements in dark-on-light
	* theme.
	*
	* You don't have to maintain order of code for inheriting slots from othet
	* slots - dependency graph resolving does it for you.
	*/

	/* This indicates that this version of code outputs similar theme data and
	* should be incremented if output changes - for instance if getTextColor
	* function changes and older themes no longer render text colors as
	* author intended previously.
	*/
	export const CURRENT_VERSION = 3

	export const getLayersArray = (layer, data = LAYERS) => {
	const array = [layer]
	let parent = data[layer]
	while (parent) {
	array.unshift(parent)
	parent = data[parent]
	}
	return array
	}

	export const getLayers = (
	layer,
	variant = layer,
	opacitySlot,
	colors,
	opacity,
	) => {
	return getLayersArray(layer).map((currentLayer) => [
	currentLayer === layer ? colors[variant] : colors[currentLayer],
	currentLayer === layer ? opacity[opacitySlot] \|\| 1 : opacity[currentLayer],
	])
	}

	const getDependencies = (key, inheritance) => {
	const data = inheritance[key]
	if (typeof data === 'string' && data.startsWith('--')) {
	return [data.substring(2)]
	} else {
	if (data === null) return []
	const { depends, layer, variant } = data
	const layerDeps = layer
	? getLayersArray(layer).map((currentLayer) => {
	return currentLayer === layer ? variant \|\| layer : currentLayer
	})
	: []
	if (Array.isArray(depends)) {
	return [...depends, ...layerDeps]
	} else {
	return [...layerDeps]
	}
	}
	}

	/**
	* Sorts inheritance object topologically - dependant slots come after
	* dependencies
	*
	* @property {Object} inheritance - object defining the nodes
	* @property {Function} getDeps - function that returns dependencies for
	* given value and inheritance object.
	* @returns {String[]} keys of inheritance object, sorted in topological
	* order. Additionally, dependency-less nodes will always be first in line
	*/
	export const topoSort = (
	inheritance = SLOT_INHERITANCE,
	getDeps = getDependencies,
	) => {
	// This is an implementation of https://en.wikipedia.org/wiki/Tarjan%27s_strongly_connected_components_algorithm

	const allKeys = Object.keys(inheritance)
	const whites = new Set(allKeys)
	const grays = new Set()
	const blacks = new Set()
	const unprocessed = [...allKeys]
	const output = []

	const step = (node) => {
	if (whites.has(node)) {
	// Make node "gray"
	whites.delete(node)
	grays.add(node)
	// Do step for each node connected to it (one way)
	getDeps(node, inheritance).forEach(step)
	// Make node "black"
	grays.delete(node)
	blacks.add(node)
	// Put it into the output list
	output.push(node)
	} else if (grays.has(node)) {
	output.push(node)
	} else if (blacks.has(node)) {
	// do nothing
	} else {
	throw new Error('Unintended condition in topoSort!')
	}
	}
	while (unprocessed.length > 0) {
	step(unprocessed.pop())
	}

	// The index thing is to make sorting stable on browsers
	// where Array.sort() isn't stable
	return output
	.map((data, index) => ({ data, index }))
	.sort(({ data: a, index: ai }, { data: b, index: bi }) => {
	const depsA = getDeps(a, inheritance).length
	const depsB = getDeps(b, inheritance).length

	if (depsA === depsB \|\| (depsB !== 0 && depsA !== 0)) return ai - bi
	if (depsA === 0 && depsB !== 0) return -1
	if (depsB === 0 && depsA !== 0) return 1
	return 0 // failsafe, shouldn't happen?
	})
	.map(({ data }) => data)
	}

	const expandSlotValue = (value) => {
	if (typeof value === 'object') return value
	return {
	depends: value.startsWith('--') ? [value.substring(2)] : [],
	default: value.startsWith('#') ? value : undefined,
	}
	}
	/**
	* retrieves opacity slot for given slot. This goes up the depenency graph
	* to find which parent has opacity slot defined for it.
	* TODO refactor this
	*/
	export const getOpacitySlot = (
	k,
	inheritance = SLOT_INHERITANCE,
	getDeps = getDependencies,
	) => {
	const value = expandSlotValue(inheritance[k])
	if (value.opacity === null) return
	if (value.opacity) return value.opacity
	const findInheritedOpacity = (key, visited = [k]) => {
	const depSlot = getDeps(key, inheritance)[0]
	if (depSlot === undefined) return
	const dependency = inheritance[depSlot]
	if (dependency === undefined) return
	if (dependency.opacity \|\| dependency === null) {
	return dependency.opacity
	} else if (dependency.depends && visited.includes(depSlot)) {
	return findInheritedOpacity(depSlot, [...visited, depSlot])
	} else {
	return null
	}
	}
	if (value.depends) {
	return findInheritedOpacity(k)
	}
	}

	/**
	* retrieves layer slot for given slot. This goes up the depenency graph
	* to find which parent has opacity slot defined for it.
	* this is basically copypaste of getOpacitySlot except it checks if key is
	* in LAYERS
	* TODO refactor this
	*/
	export const getLayerSlot = (
	k,
	inheritance = SLOT_INHERITANCE,
	getDeps = getDependencies,
	) => {
	const value = expandSlotValue(inheritance[k])
	if (LAYERS[k]) return k
	if (value.layer === null) return
	if (value.layer) return value.layer
	const findInheritedLayer = (key, visited = [k]) => {
	const depSlot = getDeps(key, inheritance)[0]
	if (depSlot === undefined) return
	const dependency = inheritance[depSlot]
	if (dependency === undefined) return
	if (dependency.layer \|\| dependency === null) {
	return dependency.layer
	} else if (dependency.depends) {
	return findInheritedLayer(dependency, [...visited, depSlot])
	} else {
	return null
	}
	}
	if (value.depends) {
	return findInheritedLayer(k)
	}
	}

	/**
	* topologically sorted SLOT_INHERITANCE
	*/
	export const SLOT_ORDERED = topoSort(
	Object.entries(SLOT_INHERITANCE)
	.sort(([, aV], [, bV]) => (aV?.priority \|\| 0) - (bV?.priority \|\| 0))
	.reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {}),
	)

	/**
	* All opacity slots used in color slots, their default values and affected
	* color slots.
	*/
	export const OPACITIES = Object.entries(SLOT_INHERITANCE).reduce((acc, [k]) => {
	const opacity = getOpacitySlot(k, SLOT_INHERITANCE, getDependencies)
	if (opacity) {
	return {
	...acc,
	[opacity]: {
	defaultValue: DEFAULT_OPACITY[opacity] \|\| 1,
	- affectedSlots: [
	- ...((acc[opacity]?.affectedSlots) \|\| []),
	- k,
	- ],
	+ affectedSlots: [...(acc[opacity]?.affectedSlots \|\| []), k],
	},
	}
	} else {
	return acc
	}
	}, {})

	/**
	* Handle dynamic color
	*/
	export const computeDynamicColor = (sourceColor, getColor, mod) => {
	if (typeof sourceColor !== 'string' \|\| !sourceColor.startsWith('--'))
	return sourceColor
	let targetColor = null
	// Color references other color
	const [variable, modifier] = sourceColor.split(/,/g).map((str) => str.trim())
	const variableSlot = variable.substring(2)
	targetColor = getColor(variableSlot)
	if (modifier) {
	targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
	}
	return targetColor
	}

	/**
	* THE function you want to use. Takes provided colors and opacities
	* value and uses inheritance data to figure out color needed for the slot.
	*/
	export const getColors = (sourceColors, sourceOpacity) =>
	SLOT_ORDERED.reduce(
	({ colors, opacity }, key) => {
	const sourceColor = sourceColors[key]
	const value = expandSlotValue(SLOT_INHERITANCE[key])
	const deps = getDependencies(key, SLOT_INHERITANCE)
	const isTextColor = !!value.textColor
	const variant = value.variant \|\| value.layer

	let backgroundColor = null

	if (isTextColor) {
	backgroundColor = alphaBlendLayers(
	{
	...(colors[deps[0]] \|\| convert(sourceColors[key] \|\| '#FF00FF').rgb),
	},
	getLayers(
	getLayerSlot(key) \|\| 'bg',
	variant \|\| 'bg',
	getOpacitySlot(variant),
	colors,
	opacity,
	),
	)
	} else if (variant && variant !== key) {
	backgroundColor = colors[variant] \|\| convert(sourceColors[variant]).rgb
	} else {
	backgroundColor = colors.bg \|\| convert(sourceColors.bg)
	}

	const isLightOnDark = relativeLuminance(backgroundColor) < 0.5
	const mod = isLightOnDark ? 1 : -1

	let outputColor = null
	if (sourceColor) {
	// Color is defined in source color
	let targetColor = sourceColor
	if (targetColor === 'transparent') {
	// We take only layers below current one
	const layers = getLayers(
	getLayerSlot(key),
	key,
	getOpacitySlot(key) \|\| key,
	colors,
	opacity,
	).slice(0, -1)
	targetColor = {
	...alphaBlendLayers(convert('#FF00FF').rgb, layers),
	a: 0,
	}
	} else if (
	typeof sourceColor === 'string' &&
	sourceColor.startsWith('--')
	) {
	targetColor = computeDynamicColor(
	sourceColor,
	(variableSlot) =>
	colors[variableSlot] \|\| sourceColors[variableSlot],
	mod,
	)
	} else if (
	typeof sourceColor === 'string' &&
	sourceColor.startsWith('#')
	) {
	targetColor = convert(targetColor).rgb
	}
	outputColor = { ...targetColor }
	} else if (value.default) {
	// same as above except in object form
	outputColor = convert(value.default).rgb
	} else {
	// calculate color
	const defaultColorFunc = (mod, dep) => ({ ...dep })
	const colorFunc = value.color \|\| defaultColorFunc

	if (value.textColor) {
	if (value.textColor === 'bw') {
	outputColor = contrastRatio(backgroundColor).rgb
	} else {
	let color = { ...colors[deps[0]] }
	if (value.color) {
	color = colorFunc(mod, ...deps.map((dep) => ({ ...colors[dep] })))
	}
	outputColor = getTextColor(
	backgroundColor,
	{ ...color },
	value.textColor === 'preserve',
	)
	}
	} else {
	// background color case
	outputColor = colorFunc(
	mod,
	...deps.map((dep) => ({ ...colors[dep] })),
	)
	}
	}
	if (!outputColor) {
	throw new Error("Couldn't generate color for " + key)
	}

	const opacitySlot = value.opacity \|\| getOpacitySlot(key)
	const ownOpacitySlot = value.opacity

	if (ownOpacitySlot === null) {
	outputColor.a = 1
	} else if (sourceColor === 'transparent') {
	outputColor.a = 0
	} else {
	const opacityOverriden =
	ownOpacitySlot && sourceOpacity[opacitySlot] !== undefined

	const dependencySlot = deps[0]
	const dependencyColor = dependencySlot && colors[dependencySlot]

	if (
	!ownOpacitySlot &&
	dependencyColor &&
	!value.textColor &&
	ownOpacitySlot !== null
	) {
	// Inheriting color from dependency (weird, i know)
	// except if it's a text color or opacity slot is set to 'null'
	outputColor.a = dependencyColor.a
	} else if (!dependencyColor && !opacitySlot) {
	// Remove any alpha channel if no dependency and no opacitySlot found
	delete outputColor.a
	} else {
	// Otherwise try to assign opacity
	if (dependencyColor?.a === 0) {
	// transparent dependency shall make dependents transparent too
	outputColor.a = 0
	} else {
	// Otherwise check if opacity is overriden and use that or default value instead
	outputColor.a = Number(
	opacityOverriden
	? sourceOpacity[opacitySlot]
	: OPACITIES[opacitySlot]?.defaultValue,
	)
	}
	}
	}

	if (Number.isNaN(outputColor.a) \|\| outputColor.a === undefined) {
	outputColor.a = 1
	}

	if (opacitySlot) {
	return {
	colors: { ...colors, [key]: outputColor },
	opacity: { ...opacity, [opacitySlot]: outputColor.a },
	}
	} else {
	return {
	colors: { ...colors, [key]: outputColor },
	opacity,
	}
	}
	},
	{ colors: {}, opacity: {} },
	)

	export const composePreset = (colors, radii, shadows, fonts) => {
	return {
	rules: {
	...shadows.rules,
	...colors.rules,
	...radii.rules,
	...fonts.rules,
	},
	theme: {
	...shadows.theme,
	...colors.theme,
	...radii.theme,
	...fonts.theme,
	},
	}
	}

	export const generatePreset = (input) => {
	const colors = generateColors(input)
	return composePreset(
	colors,
	generateRadii(input),
	generateShadows(input, colors.theme.colors),
	generateFonts(input),
	)
	}

	export const getCssShadow = (input, usesDropShadow) => {
	if (input.length === 0) {
	return 'none'
	}

	return input
	.filter((_) => (usesDropShadow ? _.inset : _))
	.map((shad) =>
	[shad.x, shad.y, shad.blur, shad.spread]
	.map((_) => _ + 'px')
	.concat([
	getCssColor(shad.color, shad.alpha),
	shad.inset ? 'inset' : '',
	])
	.join(' '),
	)
	.join(', ')
	}

	export const getCssShadowFilter = (input) => {
	if (input.length === 0) {
	return 'none'
	}

	return (
	input
	// drop-shadow doesn't support inset or spread
	.filter((shad) => !shad.inset && Number(shad.spread) === 0)
	.map((shad) =>
	[
	shad.x,
	shad.y,
	// drop-shadow's blur is twice as strong compared to box-shadow
	shad.blur / 2,
	]
	.map((_) => _ + 'px')
	.concat([getCssColor(shad.color, shad.alpha)])
	.join(' '),
	)
	.map((_) => `drop-shadow(${_})`)
	.join(' ')
	)
	}

	export const generateColors = (themeData) => {
	const sourceColors = !themeData.themeEngineVersion
	? colors2to3(themeData.colors \|\| themeData)
	: themeData.colors \|\| themeData

	const { colors, opacity } = getColors(sourceColors, themeData.opacity \|\| {})

	const htmlColors = Object.entries(colors).reduce(
	(acc, [k, v]) => {
	if (!v) return acc
	acc.solid[k] = rgb2hex(v)
	acc.complete[k] = v.a === undefined ? rgb2hex(v) : rgba2css(v)
	return acc
	},
	{ complete: {}, solid: {} },
	)
	return {
	rules: {
	colors: Object.entries(htmlColors.complete)
	.filter(([, v]) => v)
	.map(([k, v]) => `--${k}: ${v}`)
	.join(';'),
	},
	theme: {
	colors: htmlColors.solid,
	opacity,
	},
	}
	}

	export const generateRadii = (input) => {
	let inputRadii = input.radii \|\| {}
	// v1 -> v2
	if (input.btnRadius !== undefined) {
	inputRadii = Object.entries(input)
	.filter(([k]) => k.endsWith('Radius'))
	.reduce((acc, e) => {
	acc[e[0].split('Radius')[0]] = e[1]
	return acc
	}, {})
	}
	const radii = Object.entries(inputRadii)
	.filter(([, v]) => v)
	.reduce(
	(acc, [k, v]) => {
	acc[k] = v
	return acc
	},
	{
	btn: 4,
	input: 4,
	checkbox: 2,
	panel: 10,
	avatar: 5,
	avatarAlt: 50,
	tooltip: 2,
	attachment: 5,
	chatMessage: inputRadii.panel,
	},
	)

	return {
	rules: {
	radii: Object.entries(radii)
	.filter(([, v]) => v)
	.map(([k, v]) => `--${k}Radius: ${v}px`)
	.join(';'),
	},
	theme: {
	radii,
	},
	}
	}

	export const generateFonts = (input) => {
	const fonts = Object.entries(input.fonts \|\| {})
	.filter(([, v]) => v)
	.reduce(
	(acc, [k, v]) => {
	acc[k] = Object.entries(v)
	.filter(([, v]) => v)
	.reduce((acc, [k, v]) => {
	acc[k] = v
	return acc
	}, acc[k])
	return acc
	},
	{
	interface: {
	family: 'sans-serif',
	},
	input: {
	family: 'inherit',
	},
	post: {
	family: 'inherit',
	},
	postCode: {
	family: 'monospace',
	},
	},
	)

	return {
	rules: {
	fonts: Object.entries(fonts)
	.filter(([, v]) => v)
	.map(([k, v]) => `--${k}Font: ${v}`)
	.join(';'),
	},
	theme: {
	fonts,
	},
	}
	}

	const border = (top, shadow) => ({
	x: 0,
	y: top ? 1 : -1,
	blur: 0,
	spread: 0,
	color: shadow ? '#000000' : '#FFFFFF',
	alpha: 0.2,
	inset: true,
	})
	const buttonInsetFakeBorders = [border(true, false), border(false, true)]
	const inputInsetFakeBorders = [border(true, true), border(false, false)]
	const hoverGlow = {
	x: 0,
	y: 0,
	blur: 4,
	spread: 0,
	color: '--faint',
	alpha: 1,
	}

	export const DEFAULT_SHADOWS = {
	panel: [
	{
	x: 1,
	y: 1,
	blur: 4,
	spread: 0,
	color: '#000000',
	alpha: 0.6,
	},
	],
	topBar: [
	{
	x: 0,
	y: 0,
	blur: 4,
	spread: 0,
	color: '#000000',
	alpha: 0.6,
	},
	],
	popup: [
	{
	x: 2,
	y: 2,
	blur: 3,
	spread: 0,
	color: '#000000',
	alpha: 0.5,
	},
	],
	avatar: [
	{
	x: 0,
	y: 1,
	blur: 8,
	spread: 0,
	color: '#000000',
	alpha: 0.7,
	},
	],
	avatarStatus: [],
	panelHeader: [],
	button: [
	{
	x: 0,
	y: 0,
	blur: 2,
	spread: 0,
	color: '#000000',
	alpha: 1,
	},
	...buttonInsetFakeBorders,
	],
	buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
	buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
	input: [
	...inputInsetFakeBorders,
	{
	x: 0,
	y: 0,
	blur: 2,
	inset: true,
	spread: 0,
	color: '#000000',
	alpha: 1,
	},
	],
	}
	export const generateShadows = (input, colors) => {
	// TODO this is a small hack for `mod` to work with shadows
	// this is used to get the "context" of shadow, i.e. for `mod` properly depend on background color of element
	const hackContextDict = {
	button: 'btn',
	panel: 'bg',
	top: 'topBar',
	popup: 'popover',
	avatar: 'bg',
	panelHeader: 'panel',
	input: 'input',
	}

	const cleanInputShadows = Object.fromEntries(
	Object.entries(input.shadows \|\| {}).map(([name, shadowSlot]) => [
	name,
	// defaulting color to black to avoid potential problems
	shadowSlot.map((shadowDef) => ({ color: '#000000', ...shadowDef })),
	]),
	)
	const inputShadows =
	cleanInputShadows && !input.themeEngineVersion
	? shadows2to3(cleanInputShadows, input.opacity)
	: cleanInputShadows \|\| {}
	const shadows = Object.entries({
	...DEFAULT_SHADOWS,
	...inputShadows,
	}).reduce((shadowsAcc, [slotName, shadowDefs]) => {
	const slotFirstWord = slotName.replace(/[A-Z].*$/, '')
	const colorSlotName = hackContextDict[slotFirstWord]
	const isLightOnDark =
	relativeLuminance(convert(colors[colorSlotName]).rgb) < 0.5
	const mod = isLightOnDark ? 1 : -1
	const newShadow = shadowDefs.reduce(
	(shadowAcc, def) => [
	...shadowAcc,
	{
	...def,
	color: rgb2hex(
	computeDynamicColor(
	def.color,
	(variableSlot) => convert(colors[variableSlot]).rgb,
	mod,
	),
	),
	},
	],
	[],
	)
	return { ...shadowsAcc, [slotName]: newShadow }
	}, {})

	return {
	rules: {
	shadows: Object.entries(shadows)
	// TODO for v2.2: if shadow doesn't have non-inset shadows with spread > 0 - optionally
	// convert all non-inset shadows into filter: drop-shadow() to boost performance
	.map(([k, v]) =>
	[
	`--${k}Shadow: ${getCssShadow(v)}`,
	`--${k}ShadowFilter: ${getCssShadowFilter(v)}`,
	`--${k}ShadowInset: ${getCssShadow(v, true)}`,
	].join(';'),
	)
	.join(';'),
	},
	theme: {
	shadows,
	},
	}
	}

	/**
	* This handles compatibility issues when importing v2 theme's shadows to current format
	*
	* Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables
	*/
	export const shadows2to3 = (shadows, opacity) => {
	return Object.entries(shadows).reduce(
	(shadowsAcc, [slotName, shadowDefs]) => {
	const isDynamic = ({ color = '#000000' }) => color.startsWith('--')
	const getOpacity = ({ color }) =>
	opacity[getOpacitySlot(color.substring(2).split(',')[0])]
	const newShadow = shadowDefs.reduce(
	(shadowAcc, def) => [
	...shadowAcc,
	{
	...def,
	alpha: isDynamic(def) ? getOpacity(def) \|\| 1 : def.alpha,
	},
	],
	[],
	)
	return { ...shadowsAcc, [slotName]: newShadow }
	},
	{},
	)
	}

	export const colors2to3 = (colors) => {
	return Object.entries(colors).reduce((acc, [slotName, color]) => {
	const btnPositions = ['', 'Panel', 'TopBar']
	switch (slotName) {
	case 'lightBg':
	return { ...acc, highlight: color }
	case 'btnText':
	return {
	...acc,
	...btnPositions.reduce(
	(statePositionAcc, position) => ({
	...statePositionAcc,
	['btn' + position + 'Text']: color,
	}),
	{},
	),
	}
	default:
	return { ...acc, [slotName]: color }
	}
	}, {})
	}
	diff --git a/src/stores/chats.js b/src/stores/chats.js
	index c66bc26588..7908da9c8f 100644
	--- a/src/stores/chats.js
	+++ b/src/stores/chats.js
	@@ -1,114 +1,113 @@
	import { find, omitBy, orderBy, sumBy } from 'lodash'
	import { defineStore } from 'pinia'

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

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

	import { chats } from 'src/api/chats.js'

	const emptyChatList = () => ({
	data: [],
	idStore: {},
	})

	const defaultState = {
	chatList: emptyChatList(),
	chatListFetcher: null,
	}

	const getChatById = (state, id) => {
	return find(state.chatList.data, { id })
	}

	export const useChatsStore = defineStore('chats', {
	state: () => ({ ...defaultState }),
	getters: {
	sortedChatList(state) {
	return orderBy(state.chatList.data, ['updated_at'], ['desc'])
	},
	unreadChatsCount(state) {
	return sumBy(state.chatList.data, 'unread')
	},
	},
	actions: {
	startFetchingChats() {
	const fetcher = () => this.fetchChats()
	this.setChatListFetcher(() => promiseInterval(fetcher, 5000))
	},
	stopFetchingChats() {
	this.setChatListFetcher(null)
	},
	async fetchChats() {
	const { data } = await chats({
	credentials: useOAuthStore().token,
	})

	this.addNewChats(data)
	},
	setChatListFetcher(fetcher) {
	const prevFetcher = this.chatListFetcher
	if (prevFetcher) {
	prevFetcher.stop()
	}
	this.chatListFetcher = fetcher?.()
	},
	resetChats() {
	this.chatList = emptyChatList()
	this.setChatListFetcher(null)
	},
	addNewChats(chats) {
	window.vuex.commit(
	'addNewUsers',
	chats.map((k) => k.account).filter((k) => k),
	)

	chats.forEach((updatedChat) => {
	const chat = getChatById(this, updatedChat.id)

	if (chat) {
	const isNewMessage =
	- (chat.lastMessage?.id) !==
	- (updatedChat.lastMessage?.id)
	+ chat.lastMessage?.id !== updatedChat.lastMessage?.id
	chat.lastMessage = updatedChat.lastMessage
	chat.unread = updatedChat.unread
	chat.updated_at = updatedChat.updated_at
	if (isNewMessage && chat.unread) {
	maybeShowChatNotification(chat)
	}
	} else {
	this.chatList.data.push(updatedChat)
	this.chatList.idStore[updatedChat.id] = updatedChat
	}
	})
	},
	readChat(id) {
	const chat = getChatById(this, id)
	if (chat) {
	chat.unread = 0
	}
	},
	updateChat({ chat: updatedChat }) {
	const chat = getChatById(this, updatedChat.id)
	if (chat) {
	chat.lastMessage = updatedChat.lastMessage
	chat.unread = updatedChat.unread
	chat.updated_at = updatedChat.updated_at
	}
	if (!chat) {
	this.chatList.data.unshift(updatedChat)
	}
	this.chatList.idStore[updatedChat.id] = updatedChat
	},
	deleteChat(id) {
	this.chats.data = this.chats.data.filter(
	(conversation) => conversation.last_status.id !== id,
	)
	this.chats.idStore = omitBy(
	this.chats.idStore,
	(conversation) => conversation.last_status.id === id,
	)
	},
	},
	})
	diff --git a/src/stores/interface.js b/src/stores/interface.js
	index cc56e6a48f..edc8796142 100644
	--- a/src/stores/interface.js
	+++ b/src/stores/interface.js
	@@ -1,802 +1,803 @@
	import { defineStore } from 'pinia'

	import {
	applyTheme,
	getResourcesIndex,
	tryLoadCache,
	} from '../services/style_setter/style_setter.js'
	import { deserialize } from '../services/theme_data/iss_deserializer.js'

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

	import {
	CURRENT_VERSION,
	generatePreset,
	} from 'src/services/theme_data/theme_data.service.js'
	import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'

	const GENERIC_FONT_NAMES = new Set([
	'serif',
	'sans-serif',
	'system-ui',
	'cursive',
	'fantasy',
	'math',
	'monospace',
	])

	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?.supports &&
	(window.CSS.supports('filter', 'drop-shadow(0 0)') \|\|
	window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')),
	localFonts: typeof window.queryLocalFonts === 'function',
	},
	layoutType: 'normal',
	globalNotices: [],
	globalError: null,
	layoutHeight: 0,
	lastTimeline: null,
	foreignProfileBackground: null,
	}),
	actions: {
	setTemporaryChanges({ confirm, revert }) {
	this.temporaryChangesCountdown = 10
	this.temporaryChangesConfirm = confirm
	this.temporaryChangesRevert = revert
	const countdownFunc = () => {
	if (this.temporaryChangesCountdown <= 1) {
	this.temporaryChangesRevert()
	this.clearTemporaryChanges()
	} else {
	this.temporaryChangesCountdown--
	this.temporaryChangesTimeoutId = setTimeout(countdownFunc, 1000)
	}
	}
	this.temporaryChangesTimeoutId = setTimeout(countdownFunc, 1000)
	},
	clearTemporaryChanges() {
	this.temporaryChangesTimeoutId ??
	clearTimeout(this.temporaryChangesTimeoutId)
	this.temporaryChangesTimeoutId = null
	this.temporaryChangesCountdown = -1
	this.temporaryChangesConfirm = () => {
	/* no-op */
	}
	this.temporaryChangesRevert = () => {
	/* no-op */
	}
	},
	setPageTitle(option = '') {
	try {
	document.title = `${option} ${useInstanceStore().instanceIdentity.name}`
	} catch (error) {
	console.error(`${error}`)
	}
	},
	setForeignProfileBackground(url) {
	this.foreignProfileBackground = url
	},
	settingsSaved({ success, error }) {
	if (success) {
	if (this.noticeClearTimeout) {
	clearTimeout(this.noticeClearTimeout)
	}
	this.settings.currentSaveStateNotice = { error: false, data: success }
	this.settings.noticeClearTimeout = setTimeout(
	() => delete this.settings.currentSaveStateNotice,
	2000,
	)
	} else {
	this.settings.currentSaveStateNotice = { error: true, errorData: error }
	}
	},
	setNotificationPermission(permission) {
	this.notificationPermission = permission
	},
	closeSettingsModal() {
	this.settingsModalState = 'hidden'
	},
	openSettingsModal(value) {
	this.settingsModalMode = value
	this.settingsModalState = 'visible'
	if (value === 'user') {
	if (!this.settingsModalLoadedUser) {
	this.settingsModalLoadedUser = true
	}
	} else if (value === 'admin') {
	if (!this.settingsModalLoadedAdmin) {
	this.settingsModalLoadedAdmin = true
	}
	}
	},
	setSettingsModalState(newState) {
	const oldState = this.settingsModalState
	const legal = (() => {
	switch (oldState) {
	case 'minimized':
	return true
	case 'visible':
	return true
	case 'hidden':
	return newState === 'visible'
	}
	})()

	if (legal) {
	this.settingsModalState = newState
	}
	},
	toggleMinimizeSettingsModal() {
	switch (this.settingsModalState) {
	case 'minimized':
	this.settingsModalState = 'visible'
	return
	case 'visible':
	this.settingsModalState = 'minimized'
	return
	case 'hidden':
	return
	default:
	throw new Error(
	`Illegal minimization state of settings modal: ${this.settingsModalState}`,
	)
	}
	},
	clearSettingsModalTargetTab() {
	this.settingsModalTargetTab = null
	},
	openSettingsModalTab(value, mode = 'user') {
	this.settingsModalTargetTab = value
	this.openSettingsModal(mode)
	},
	removeGlobalNotice(notice) {
	this.globalNotices = this.globalNotices.filter((n) => n !== notice)
	},
	setGlobalError({ error, instance, info }) {
	switch (info) {
	case 'https://vuejs.org/error-reference/#runtime-13': {
	this.globalError = {
	title: 'general.refresh_required',
	content: 'general.refresh_required_content',
	// `true` disables cache on Firefox (non-standard)
	recover: () => window.location.reload(true),
	recoverText: 'general.refresh_required_refresh',
	error,
	}
	break
	}
	default: {
	this.globalError = { error }
	break
	}
	}
	},
	clearGlobalError() {
	this.globalError = null
	},
	pushGlobalNotice({
	messageKey,
	messageArgs = {},
	level = 'error',
	timeout = 5000,
	}) {
	const notice = {
	messageKey,
	messageArgs,
	level,
	}

	this.globalNotices.push(notice)

	// Adding a new element to array wraps it in a Proxy, which breaks the comparison
	// TODO: Generate UUID or something instead or relying on !== operator?
	const newNotice = this.globalNotices[this.globalNotices.length - 1]
	if (timeout > 0) {
	setTimeout(() => this.removeGlobalNotice(newNotice), timeout)
	}

	return newNotice
	},
	setLayoutHeight(value) {
	this.layoutHeight = value
	},
	setLayoutWidth(value) {
	let width = value
	if (value !== undefined) {
	this.layoutWidth = value
	} else {
	width = this.layoutWidth
	}

	const mobileLayout = width <= 800
	const normalOrMobile = mobileLayout ? 'mobile' : 'normal'
	const { thirdColumnMode } = useMergedConfigStore().mergedConfig
	if (thirdColumnMode === 'none' \|\| !window.vuex.state.users.currentUser) {
	this.layoutType = normalOrMobile
	} else {
	const wideLayout = width >= 1300
	this.layoutType = wideLayout ? 'wide' : normalOrMobile
	}
	},
	setFontsList(value) {
	this.localFonts = [...new Set(value.map(({ family }) => 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({
	path: 'palettesIndex',
	value,
	})
	return value
	} catch (e) {
	console.error('Could not fetch palettes index', e)
	useInstanceStore().set({
	path: 'palettesIndex',
	value: { _error: e },
	})
	return Promise.resolve({})
	}
	},
	setPalette(value) {
	this.resetThemeV3Palette()
	this.resetThemeV2()

	useSyncConfigStore().setPreference({ path: 'simple.palette', value })
	useSyncConfigStore().pushSyncConfig()

	this.applyTheme({ recompile: true })
	},
	setPaletteCustom(value) {
	this.resetThemeV3Palette()
	this.resetThemeV2()

	useSyncConfigStore().setPreference({
	path: 'simple.paletteCustomData',
	value,
	})
	useSyncConfigStore().pushSyncConfig()

	this.applyTheme({ recompile: true })
	},
	async fetchStylesIndex() {
	try {
	const value = await getResourcesIndex(
	'/static/styles/index.json',
	deserialize,
	)
	useInstanceStore().set({ path: 'stylesIndex', value })
	return value
	} catch (e) {
	console.error('Could not fetch styles index', e)
	useInstanceStore().set({
	path: 'simple.stylesIndex',
	value: { _error: e },
	})
	return Promise.resolve({})
	}
	},
	setStyle(value) {
	this.resetThemeV3()
	this.resetThemeV2()
	this.resetThemeV3Palette()

	useSyncConfigStore().setPreference({ path: 'simple.style', value })
	useSyncConfigStore().pushSyncConfig()
	this.useStylePalette = true

	this.applyTheme({ recompile: true }).then(() => {
	this.useStylePalette = false
	})
	},
	setStyleCustom(value) {
	this.resetThemeV3()
	this.resetThemeV2()
	this.resetThemeV3Palette()

	useSyncConfigStore().setPreference({
	path: 'simple.styleCustomData',
	value,
	})
	useSyncConfigStore().pushSyncConfig()

	this.useStylePalette = true
	this.applyTheme({ recompile: true }).then(() => {
	this.useStylePalette = false
	})
	},
	async fetchThemesIndex() {
	try {
	const value = await getResourcesIndex('/static/styles.json')
	useInstanceStore().set({ path: 'themesIndex', value })
	return value
	} catch (e) {
	console.error('Could not fetch themes index', e)
	useInstanceStore().set({
	path: 'themesIndex',
	value: { _error: e },
	})
	return Promise.resolve({})
	}
	},
	setTheme(value) {
	this.resetThemeV3()
	this.resetThemeV3Palette()
	this.resetThemeV2()

	useSyncConfigStore().setPreference({ path: 'simple.theme', value })
	useSyncConfigStore().pushSyncConfig()

	this.applyTheme({ recompile: true })
	},
	setThemeCustom(value) {
	this.resetThemeV3()
	this.resetThemeV3Palette()
	this.resetThemeV2()

	useSyncConfigStore().setPreference({ path: 'simple.customTheme', value })
	useSyncConfigStore().setPreference({
	path: 'simple.customThemeSource',
	value,
	})
	useSyncConfigStore().pushSyncConfig()

	this.applyTheme({ recompile: true })
	},
	resetThemeV3() {
	useSyncConfigStore().setPreference({ path: 'simple.style', value: null })
	useSyncConfigStore().setPreference({
	path: 'simple.styleCustomData',
	value: null,
	})
	},
	resetThemeV3Palette() {
	useSyncConfigStore().setPreference({
	path: 'simple.palette',
	value: null,
	})
	useSyncConfigStore().setPreference({
	path: 'simple.paletteCustomData',
	value: null,
	})
	},
	resetThemeV2() {
	useSyncConfigStore().setPreference({ path: 'simple.theme', value: null })
	useSyncConfigStore().setPreference({
	path: 'simple.customTheme',
	value: null,
	})
	useSyncConfigStore().setPreference({
	path: 'simple.customThemeSource',
	value: null,
	})
	},
	async getThemeData() {
	const getData = async (resource, index, customData, name) => {
	const capitalizedResource =
	resource[0].toUpperCase() + resource.slice(1)
	const result = {}

	if (customData) {
	result.nameUsed = 'custom' // custom data overrides name
	result.dataUsed = customData
	} else {
	result.nameUsed = name

	if (result.nameUsed == null) {
	result.dataUsed = null
	return result
	}

	let fetchFunc = index[result.nameUsed]
	// Fallbacks
	if (!fetchFunc) {
	if (resource === 'style' \|\| resource === 'palette') {
	return result
	}
	const newName = Object.keys(index)[0]
	fetchFunc = index[newName]
	console.warn(
	`${capitalizedResource} with id '${this.styleNameUsed}' not found, trying back to '${newName}'`,
	)
	if (!fetchFunc) {
	console.warn(
	`${capitalizedResource} doesn't have a fallback, defaulting to stock.`,
	)
	fetchFunc = () => Promise.resolve(null)
	}
	}
	result.dataUsed = await fetchFunc()
	}
	return result
	}

	let {
	theme: instanceThemeName,
	style: instanceStyleName,
	palette: instancePaletteName,
	} = useInstanceStore().instanceIdentity

	let { themesIndex, stylesIndex, palettesIndex } = useInstanceStore()

	const {
	style: userStyleName,
	styleCustomData: userStyleCustomData,
	palette: userPaletteName,
	paletteCustomData: userPaletteCustomData,
	} = useMergedConfigStore().mergedConfig

	let {
	theme: userThemeV2Name,
	customTheme: userThemeV2Snapshot,
	customThemeSource: userThemeV2Source,
	} = useMergedConfigStore().mergedConfig

	let majorVersionUsed

	console.debug(
	`User V3 palette: ${userPaletteName}, style: ${userStyleName} , custom: ${!!userStyleCustomData}`,
	)
	console.debug(
	`User V2 name: ${userThemeV2Name}, source: ${!!userThemeV2Source}, snapshot: ${!!userThemeV2Snapshot}`,
	)

	console.debug(
	`Instance V3 palette: ${instancePaletteName}, style: ${instanceStyleName}`,
	)
	console.debug('Instance V2 theme: ' + instanceThemeName)

	if (
	userPaletteName \|\|
	userPaletteCustomData \|\|
	userStyleName \|\|
	userStyleCustomData \|\|
	// User V2 overrides instance V3
	((instancePaletteName \|\| instanceStyleName) &&
	instanceThemeName == null &&
	userThemeV2Name == null)
	) {
	// Palette and/or style overrides V2 themes
	instanceThemeName = null
	userThemeV2Name = null
	userThemeV2Source = null
	userThemeV2Snapshot = null

	majorVersionUsed = 'v3'
	} else if (
	userThemeV2Name \|\|
	userThemeV2Snapshot \|\|
	userThemeV2Source \|\|
	instanceThemeName
	) {
	majorVersionUsed = 'v2'
	} else {
	// if all fails fallback to v3
	majorVersionUsed = 'v3'
	}

	if (majorVersionUsed === 'v3') {
	const result = await Promise.all([
	this.fetchPalettesIndex(),
	this.fetchStylesIndex(),
	])

	palettesIndex = result[0]
	stylesIndex = result[1]
	} else {
	// Promise.all just to be uniform with v3
	const result = await Promise.all([this.fetchThemesIndex()])

	themesIndex = result[0]
	}

	this.themeVersion = majorVersionUsed

	console.debug('Version used', majorVersionUsed)

	if (majorVersionUsed === 'v3') {
	this.themeDataUsed = null
	this.themeNameUsed = null

	const style = await getData(
	'style',
	stylesIndex,
	userStyleCustomData,
	userStyleName \|\| instanceStyleName,
	)
	this.styleNameUsed = style.nameUsed
	this.styleDataUsed = style.dataUsed

	let firstStylePaletteName = null
	style.dataUsed
	?.filter((x) => x.component === '@palette')
	.map((x) => {
	const cleanDirectives = Object.fromEntries(
	Object.entries(x.directives).filter(([k]) => k),
	)

	return { name: x.variant, ...cleanDirectives }
	})
	.forEach((palette) => {
	- const key = 'style.' + palette.name.toLowerCase().replaceAll(' ', '_')
	+ const key =
	+ 'style.' + palette.name.toLowerCase().replaceAll(' ', '_')
	if (!firstStylePaletteName) firstStylePaletteName = key
	palettesIndex[key] = () => Promise.resolve(palette)
	})

	const palette = await getData(
	'palette',
	palettesIndex,
	userPaletteCustomData,
	this.useStylePalette
	? firstStylePaletteName
	: userPaletteName \|\| instancePaletteName,
	)

	if (this.useStylePalette) {
	useSyncConfigStore().setPreference({
	path: 'simple.palette',
	value: firstStylePaletteName,
	})
	useSyncConfigStore().pushSyncConfig()
	}

	this.paletteNameUsed = palette.nameUsed
	this.paletteDataUsed = palette.dataUsed

	if (this.paletteDataUsed) {
	this.paletteDataUsed.link =
	this.paletteDataUsed.link \|\| this.paletteDataUsed.accent
	this.paletteDataUsed.accent =
	this.paletteDataUsed.accent \|\| this.paletteDataUsed.link
	}
	if (Array.isArray(this.paletteDataUsed)) {
	const [
	name,
	bg,
	fg,
	text,
	link,
	cRed = '#FF0000',
	cGreen = '#00FF00',
	cBlue = '#0000FF',
	cOrange = '#E3FF00',
	] = palette.dataUsed
	this.paletteDataUsed = {
	name,
	bg,
	fg,
	text,
	link,
	accent: link,
	cRed,
	cBlue,
	cGreen,
	cOrange,
	}
	}
	console.debug('Palette data used', palette.dataUsed)
	} else {
	this.styleNameUsed = null
	this.styleDataUsed = null
	this.paletteNameUsed = null
	this.paletteDataUsed = null

	const theme = await getData(
	'theme',
	themesIndex,
	userThemeV2Source \|\| userThemeV2Snapshot,
	userThemeV2Name \|\| instanceThemeName,
	)
	this.themeNameUsed = theme.nameUsed
	this.themeDataUsed = theme.dataUsed
	}
	},
	async setThemeApplied() {
	this.themeApplied = true
	},
	async applyTheme({ recompile = false } = {}) {
	const { mergedConfig } = useMergedConfigStore()
	const { forceThemeRecompilation, themeDebug } = mergedConfig

	this.themeChangeInProgress = true
	// If we're not forced to recompile try using
	// cache (tryLoadCache return true if load successful)

	const forceRecompile = forceThemeRecompilation \|\| recompile

	await this.getThemeData()

	if (!forceRecompile && !themeDebug && (await tryLoadCache())) {
	this.themeChangeInProgress = false
	return this.setThemeApplied()
	}
	window.splashUpdate('splash.theme')

	try {
	const paletteIss = (() => {
	if (!this.paletteDataUsed) return null
	const result = {
	component: 'Root',
	directives: {},
	}

	Object.entries(this.paletteDataUsed)
	.filter(([k]) => k !== 'name')
	.forEach(([k, v]) => {
	let issRootDirectiveName
	switch (k) {
	case 'background':
	issRootDirectiveName = 'bg'
	break
	case 'foreground':
	issRootDirectiveName = 'fg'
	break
	default:
	issRootDirectiveName = k
	}
	result.directives['--' + issRootDirectiveName] = 'color \| ' + v
	})
	return result
	})()

	const theme2ruleset =
	this.themeDataUsed &&
	convertTheme2To3(normalizeThemeData(this.themeDataUsed))
	const hacks = []

	const fontMap = {
	Interface: 'Root',
	Input: 'Input',
	Posts: 'Post',
	Monospace: 'Root',
	}

	Object.entries(fontMap).forEach(([font, component]) => {
	const family = mergedConfig[`font${font}`]
	const variable = font === 'Monospace' ? '--monoFont' : '--font'
	if (typeof family === 'string') {
	const familyString = GENERIC_FONT_NAMES.has(family)
	? family
	: `"${family}"`
	hacks.push({
	component,
	directives: {
	[variable]: `generic \| ${familyString}`,
	},
	})
	}
	})

	if (mergedConfig.underlay !== 'none') {
	const newRule = {
	component: 'Underlay',
	directives: {},
	}
	if (mergedConfig.underlay === 'opaque') {
	newRule.directives.opacity = 1
	newRule.directives.background = '--wallpaper'
	}
	if (mergedConfig.underlay === 'transparent') {
	newRule.directives.opacity = 0
	}
	hacks.push(newRule)
	}

	const rulesetArray = [
	theme2ruleset,
	this.styleDataUsed,
	paletteIss,
	hacks,
	].filter(Boolean)

	return applyTheme(
	rulesetArray.flat(),
	() => this.setThemeApplied(),
	() => {
	this.themeChangeInProgress = false
	},
	themeDebug,
	)
	} catch (e) {
	console.error(e)
	window.splashError(e)
	}
	},
	},
	})

	export const normalizeThemeData = (input) => {
	let themeData, themeSource

	if (input.themeFileVerison === 1) {
	// this might not be even used at all, some leftover of unimplemented code in V2 editor
	return generatePreset(input).theme
	} else if (
	Object.hasOwn(input, '_pleroma_theme_version') \|\|
	Object.hasOwn(input, 'source') \|\|
	Object.hasOwn(input, 'theme')
	) {
	// We got passed a full theme file
	themeData = input.theme
	themeSource = input.source
	} else if (
	Object.hasOwn(input, 'themeEngineVersion') \|\|
	Object.hasOwn(input, 'colors')
	) {
	// We got passed a source/snapshot
	themeData = input
	themeSource = input
	}
	// New theme presets don't have 'theme' property, they use 'source'

	let out // shout, shout let it all out
	if (themeSource?.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/sync_config.js b/src/stores/sync_config.js
	index 723cd93971..3b71478c18 100644
	--- a/src/stores/sync_config.js
	+++ b/src/stores/sync_config.js
	@@ -1,843 +1,844 @@
	import sum from 'hash-sum'
	import {
	merge as _merge,
	clamp,
	cloneDeep,
	findLastIndex,
	get,
	groupBy,
	isEqual,
	last,
	set,
	take,
	uniqWith,
	unset,
	} from 'lodash'
	import { defineStore } from 'pinia'
	import { v4 as uuidv4 } from 'uuid'
	import { toRaw } from 'vue'

	import { CURRENT_UPDATE_COUNTER } from 'src/components/update_notification/update_notification.js'

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

	import { updateProfileJSON } from 'src/api/user.js'
	import { storage } from 'src/lib/storage.js'
	import {
	makeUndefined,
	ROOT_CONFIG,
	ROOT_CONFIG_DEFINITIONS,
	validateSetting,
	} from 'src/modules/default_config_state.js'
	import { oldDefaultConfigSync } from 'src/modules/old_default_config_state.js'

	export const VERSION = 2
	export const NEW_USER_DATE = new Date('2026-03-16') // date of writing this, basically

	export const COMMAND_TRIM_FLAGS = 1000
	export const COMMAND_TRIM_FLAGS_AND_RESET = 1001
	export const COMMAND_WIPE_JOURNAL = 1010
	export const COMMAND_WIPE_JOURNAL_AND_STORAGE = 1011

	export const defaultState = {
	// do we need to update data on server?
	dirty: false,
	// storage of flags - stuff that can only be set and incremented
	flagStorage: {
	updateCounter: 0, // Counter for most recent update notification seen
	reset: 0, // special flag that can be used to force-reset all data, debug purposes only
	// special reset codes:
	// 1000: trim keys to those known by currently running FE
	// 1001: same as above + reset everything to 0
	},
	prefsStorage: {
	_journal: [],
	simple: {
	muteFilters: {},

	...makeUndefined({ ...ROOT_CONFIG }),
	},
	collections: {
	pinnedStatusActions: ['reply', 'retweet', 'favorite', 'emoji'],
	pinnedNavItems: ['home', 'dms', 'chats'],
	},
	},
	// raw data
	raw: null,
	// local cache
	cache: null,
	}

	export const newUserFlags = {
	...defaultState.flagStorage,
	updateCounter: CURRENT_UPDATE_COUNTER, // new users don't need to see update notification
	}

	export const _moveItemInArray = (array, value, movement) => {
	const oldIndex = array.indexOf(value)
	const newIndex = oldIndex + movement
	const newArray = [...array]
	// remove old
	newArray.splice(oldIndex, 1)
	// add new
	newArray.splice(clamp(newIndex, 0, newArray.length + 1), 0, value)
	return newArray
	}

	const _wrapData = (data, userName) => {
	return {
	...data,
	_user: userName,
	_timestamp: Date.now(),
	_version: VERSION,
	}
	}

	const _checkValidity = (data) => data._timestamp > 0 && data._version > 0

	const _verifyPrefs = (state) => {
	state.prefsStorage = state.prefsStorage \|\| {
	simple: {},
	collections: {},
	}

	// Simple
	Object.entries(defaultState.prefsStorage.simple).forEach(([k, v]) => {
	if (typeof v === 'undefined') return
	if (typeof v === 'number' \|\| typeof v === 'boolean') return
	if (typeof v === 'object') return
	console.warn(
	`Preference simple.${k} as invalid type ${typeof v}, reinitializing`,
	)
	set(state.prefsStorage.simple, k, defaultState.prefsStorage.simple[k])
	})

	// Collections
	Object.entries(defaultState.prefsStorage.collections).forEach(([k, v]) => {
	if (Array.isArray(v)) return
	console.warn(
	`Preference collections.${k} as invalid type ${typeof v}, reinitializing`,
	)
	set(
	state.prefsStorage.collections,
	k,
	defaultState.prefsStorage.collections[k],
	)
	})
	}

	export const _getRecentData = (cache, live, isTest) => {
	const result = { recent: null, stale: null, needUpload: false }
	const cacheValid = _checkValidity(cache \|\| {})
	const liveValid = _checkValidity(live \|\| {})
	if (!liveValid && cacheValid) {
	result.needUpload = true
	console.debug(
	'Nothing valid stored on server, assuming cache to be source of truth',
	)
	result.recent = cache
	result.stale = live
	} else if (!cacheValid && liveValid) {
	console.debug(
	'Valid storage on server found, no local cache found, using live as source of truth',
	)
	result.recent = live
	result.stale = cache
	} else if (cacheValid && liveValid) {
	console.debug('Both sources have valid data, figuring things out...')
	if (
	live._timestamp === cache._timestamp &&
	live._version === cache._version
	) {
	console.debug(
	'Same version/timestamp on both sources, source of truth irrelevant',
	)
	result.recent = cache
	result.stale = live
	} else {
	console.debug(
	'Different timestamp or version, figuring out which one is more recent',
	)
	if (live._timestamp < cache._timestamp) {
	result.recent = cache
	result.stale = live
	} else {
	result.recent = live
	result.stale = cache
	}
	}
	} else {
	console.debug('Both sources are invalid, start from scratch')
	result.needUpload = true
	}

	const merge = (a, b) => {
	return {
	_user: a._user ?? b._user,
	_version: a._version ?? b._version,
	_timestamp: a._timestamp ?? b._timestamp,
	needUpload: b.needUpload ?? a.needUpload,
	prefsStorage: _merge(cloneDeep(a.prefsStorage), b.prefsStorage),
	flagStorage: _merge(a.flagStorage, b.flagStorage),
	}
	}

	result.recent = isTest
	? result.recent
	: result.recent && merge(defaultState, result.recent)

	result.stale = isTest
	? result.stale
	: result.stale && merge(defaultState, result.stale)

	return result
	}

	export const _getAllFlags = (recent, stale) => {
	+ const recentStorage = toRaw(recent?.flagStorage)
	+ const staleStorage = toRaw(stale?.flagStorage)
	+
	return Array.from(
	- recentStorage = toRaw(recent?.flagStorage)
	- staleStorage = toRaw(stale?.flagStorage)
	new Set([
	...Object.keys(recentStorage \|\| {}),
	...Object.keys(staleStorage \|\| {}),
	]),
	)
	}

	export const _mergeFlags = (recent, stale, allFlagKeys) => {
	if (!stale.flagStorage) return recent.flagStorage
	if (!recent.flagStorage) return stale.flagStorage
	return Object.fromEntries(
	allFlagKeys.map((flag) => {
	const recentFlag = recent.flagStorage[flag]
	const staleFlag = stale.flagStorage[flag]
	// use flag that is of higher value
	return [
	flag,
	Number((recentFlag > staleFlag ? recentFlag : staleFlag) \|\| 0),
	]
	}),
	)
	}

	export const _mergeJournal = (...journals) => {
	// Ignore invalid journal entries
	const allJournals = journals
	.map((j) => (Array.isArray(j) ? j : []))
	.flat()
	.filter(
	(entry) =>
	Object.hasOwn(entry, 'path') &&
	Object.hasOwn(entry, 'operation') &&
	Object.hasOwn(entry, 'args') &&
	Object.hasOwn(entry, 'timestamp'),
	)
	const grouped = groupBy(allJournals, 'path')
	const trimmedGrouped = Object.entries(grouped).map(([path, rawJournal]) => {
	const journal = rawJournal
	.map((data, index) => ({ data, index }))
	.toSorted(({ data: a, index: ai }, { data: b, index: bi }) => {
	if (a.timestamp === b.timestamp) {
	return ai - bi
	} else {
	return a.timestamp > b.timestamp ? 1 : -1
	}
	})
	.map((x) => x.data)

	if (path.startsWith('collections')) {
	const lastRemoveIndex = findLastIndex(
	journal,
	({ operation }) => operation === 'removeFromCollection',
	)
	// everything before last remove is unimportant
	let remainder
	if (lastRemoveIndex > 0) {
	remainder = journal.slice(lastRemoveIndex)
	} else {
	// everything else doesn't need trimming
	remainder = journal
	}
	return uniqWith(remainder, (a, b) => {
	if (a.path !== b.path) {
	return false
	}
	if (a.operation !== b.operation) {
	return false
	}
	if (a.operation === 'addToCollection') {
	return a.args[0] === b.args[0]
	}
	return false
	})
	} else if (path.startsWith('simple')) {
	// Only the last record is important
	return [last(journal)]
	} else {
	return journal
	}
	})

	const flat = trimmedGrouped
	.flat()
	.map((data, index) => ({ data, index }))
	.toSorted(({ data: a, index: ai }, { data: b, index: bi }) => {
	if (a.timestamp === b.timestamp) {
	return ai - bi
	} else {
	return a.timestamp > b.timestamp ? 1 : -1
	}
	})
	.map((x) => x.data)
	return take(flat, 500)
	}

	export const _mergePrefs = (recent, stale) => {
	if (!stale) return recent
	if (!recent) return stale
	const { _journal: recentJournal, ...recentData } = recent
	const { _journal: staleJournal } = stale
	/** Journal entry format:
	* path: path to entry in prefsStorage
	* timestamp: timestamp of the change
	* operation: operation type
	* arguments: array of arguments, depends on operation type
	*
	* currently only supported operation type is "set" which just sets the value
	* to requested one. Intended only to be used with simple preferences (boolean, number)
	* shouldn't be used with collections!
	*/
	const resultOutput = { ...recentData }
	const totalJournal = _mergeJournal(staleJournal, recentJournal)
	totalJournal
	.filter(({ path, operation, args }) => {
	const entry = path.split('.')[1]
	if (operation === 'unset') return ROOT_CONFIG[entry] !== undefined

	if (operation !== 'set') return true

	const definition = path.startsWith('simple.muteFilters')
	? { default: {} }
	: ROOT_CONFIG_DEFINITIONS[entry]

	const finalValue = validateSetting({
	path,
	value: args[0],
	definition,
	throwError: false,
	defaultState: ROOT_CONFIG,
	})

	return finalValue !== undefined
	})
	.forEach(({ path, operation, args }) => {
	if (path.startsWith('_')) {
	throw new Error(
	`journal contains entry to edit internal (starts with _) field '${path}', something is incorrect here, ignoring.`,
	)
	}
	switch (operation) {
	case 'set': {
	if (path.startsWith('collections')) {
	return console.error('Illegal operation "set" on a collection')
	}
	if (path.split(/\./g).length <= 1) {
	return console.error(
	`Calling set on depth <= 1 (path: ${path}) is not allowed`,
	)
	}
	set(resultOutput, path, args[0])
	break
	}
	case 'unset':
	if (path.startsWith('collections')) {
	return console.error('Illegal operation "unset" on a collection')
	}
	if (path.split(/\./g).length <= 2) {
	return console.error(
	`Calling unset on depth <= 2 (path: ${path}) is not allowed`,
	)
	}
	unset(resultOutput, path)
	break
	case 'addToCollection':
	if (!path.startsWith('collections')) {
	return console.error(
	'Illegal operation "addToCollection" on a non-collection',
	)
	}
	set(
	resultOutput,
	path,
	Array.from(new Set(get(resultOutput, path)).add(args[0])),
	)
	break
	case 'removeFromCollection': {
	if (!path.startsWith('collections')) {
	return console.error(
	'Illegal operation "removeFromCollection" on a non-collection',
	)
	}
	const newSet = new Set(get(resultOutput, path))
	newSet.delete(args[0])
	set(resultOutput, path, Array.from(newSet))
	break
	}
	case 'reorderCollection': {
	const [value, movement] = args
	set(
	resultOutput,
	path,
	_moveItemInArray(get(resultOutput, path), value, movement),
	)
	break
	}
	default:
	return console.error(
	`Unknown journal operation: '${operation}', did we forget to run reverse migrations beforehand?`,
	)
	}
	})
	return { ...resultOutput, _journal: totalJournal }
	}

	export const _resetFlags = (
	totalFlags,
	knownKeys = defaultState.flagStorage,
	) => {
	let result = { ...totalFlags }
	const allFlagKeys = Object.keys(totalFlags)
	// flag reset functionality
	if (
	totalFlags.reset >= COMMAND_TRIM_FLAGS &&
	totalFlags.reset <= COMMAND_TRIM_FLAGS_AND_RESET
	) {
	console.debug('Received command to trim the flags')
	const knownKeysSet = new Set(Object.keys(knownKeys))

	// Trim
	result = {}
	allFlagKeys.forEach((flag) => {
	if (knownKeysSet.has(flag)) {
	result[flag] = totalFlags[flag]
	}
	})

	// Reset
	if (totalFlags.reset === COMMAND_TRIM_FLAGS_AND_RESET) {
	// 1001 - and reset everything to 0
	console.debug('Received command to reset the flags')
	Object.keys(knownKeys).forEach((flag) => {
	result[flag] = 0
	})
	}
	}
	result.reset = 0
	return result
	}

	const _resetPrefs = (
	totalPrefs,
	totalFlags,
	knownKeys = defaultState.flagStorage,
	) => {
	// prefs reset functionality
	if (
	totalFlags.reset >= COMMAND_WIPE_JOURNAL &&
	totalFlags.reset <= COMMAND_WIPE_JOURNAL_AND_STORAGE
	) {
	console.debug('Received command to reset journals')
	this.flagStorage.reset = COMMAND_WIPE_JOURNAL
	this.prefsStorage._journal = []
	this.cache.prefsStorage._journal = []
	this.raw.prefsStorage._journal = []
	this.pushSyncConfig()
	if (totalFlags.reset === COMMAND_WIPE_JOURNAL_AND_STORAGE) {
	console.debug('Received command to reset storage')
	return cloneDeep(defaultState)
	}
	}
	return totalPrefs
	}

	const _doMigrations = async (data, setPreference) => {
	if (data._version < VERSION) {
	console.debug(
	'Data has older version, seeing if there any migrations that can be applied',
	)
	}

	if (data._version > VERSION) {
	console.debug(
	'Data has newer version, seeing if there any reverse migrations that can be applied',
	)

	// no reverse migrations right now but we leave a possibility of loading a hotpatch if need be
	if (window._PLEROMA_HOTPATCH) {
	if (window._PLEROMA_HOTPATCH.reverseMigrations) {
	console.debug('Found hotpatch migration, applying')
	return window._PLEROMA_HOTPATCH.reverseMigrations.call(
	{},
	'syncConfigStore',
	{ from: data._version, to: VERSION },
	data,
	)
	}
	}
	}

	return data
	}

	export const useSyncConfigStore = defineStore('sync_config', {
	state() {
	return cloneDeep(defaultState)
	},
	actions: {
	setFlag({ flag, value }) {
	this.flagStorage[flag] = value
	this.dirty = true
	},
	setSimplePrefAndSave({ path, value }) {
	this.setPreference({ path: `simple.${path}`, value })
	this.pushSyncConfig()
	},
	unsetSimplePrefAndSave({ path }) {
	this.unsetPreference({ path: `simple.${path}` })
	this.pushSyncConfig()
	},
	setPreference({ path, value }) {
	if (path.startsWith('_')) {
	throw new Error(
	`Tried to edit internal (starts with _) field '${path}', ignoring.`,
	)
	}
	if (path.startsWith('collections')) {
	throw new Error(
	`Invalid operation 'set' for collection field '${path}', ignoring.`,
	)
	}
	if (path.split(/\./g).length <= 1) {
	throw new Error(
	`Calling set on depth <= 1 (path: ${path}) is not allowed`,
	)
	}
	if (path.split(/\./g).length > 3) {
	throw new Error(
	`Calling set on depth > 3 (path: ${path}) is not allowed`,
	)
	}

	if (path.startsWith('collections.')) return value

	const definition = path.startsWith('simple.muteFilters')
	? { default: {} }
	: ROOT_CONFIG_DEFINITIONS[path.split('.')[1]]

	const finalValue = validateSetting({
	path,
	value,
	definition,
	throwError: false,
	defaultState: ROOT_CONFIG,
	})

	if (finalValue !== undefined) set(this.prefsStorage, path, finalValue)

	this.prefsStorage._journal = [
	...this.prefsStorage._journal,
	{ operation: 'set', path, args: [value], timestamp: Date.now() },
	]
	this.dirty = true
	},
	unsetPreference({ path, value }) {
	if (path.startsWith('_')) {
	throw new Error(
	`Tried to edit internal (starts with _) field '${path}', ignoring.`,
	)
	}
	if (path.startsWith('collections')) {
	throw new Error(
	`Invalid operation 'unset' for collection field '${path}', ignoring.`,
	)
	}
	if (path.split(/\./g).length <= 2) {
	throw new Error(
	`Calling unset on depth <= 2 (path: ${path}) is not allowed`,
	)
	}
	if (path.split(/\./g).length > 3) {
	throw new Error(
	`Calling unset on depth > 3 (path: ${path}) is not allowed`,
	)
	}
	unset(this.prefsStorage, path)
	this.prefsStorage._journal = [
	...this.prefsStorage._journal,
	{ operation: 'unset', path, args: [], timestamp: Date.now() },
	]
	this.dirty = true
	},
	addCollectionPreference({ path, value }) {
	if (path.startsWith('_')) {
	throw new Error(
	`tried to edit internal (starts with _) field '${path}'`,
	)
	}
	if (path.startsWith('collections')) {
	const collection = new Set(get(this.prefsStorage, path))
	collection.add(value)
	set(this.prefsStorage, path, [...collection])
	}
	this.prefsStorage._journal = [
	...this.prefsStorage._journal,
	{
	operation: 'addToCollection',
	path,
	args: [value],
	timestamp: Date.now(),
	},
	]
	this.dirty = true
	},
	removeCollectionPreference({ path, value }) {
	if (path.startsWith('_')) {
	throw new Error(
	`tried to edit internal (starts with _) field '${path}', ignoring.`,
	)
	}

	const { _key } = value
	if (path.startsWith('collection')) {
	const collection = new Set(get(this.prefsStorage, path))
	collection.delete(value)
	set(this.prefsStorage, path, [...collection])

	this.prefsStorage._journal = [
	...this.prefsStorage._journal,
	{
	operation: 'removeFromCollection',
	path,
	args: [value],
	timestamp: Date.now(),
	},
	]
	this.dirty = true
	}
	},
	reorderCollectionPreference({ path, value, movement }) {
	if (path.startsWith('_')) {
	throw new Error(
	`tried to edit internal (starts with _) field '${path}', ignoring.`,
	)
	}
	const collection = get(this.prefsStorage, path)
	const newCollection = _moveItemInArray(collection, value, movement)
	set(this.prefsStorage, path, newCollection)
	this.prefsStorage._journal = [
	...this.prefsStorage._journal,
	{
	operation: 'arrangeCollection',
	path,
	args: [value],
	timestamp: Date.now(),
	},
	]
	this.dirty = true
	},
	updateCache({ username }) {
	this.prefsStorage._journal = _mergeJournal(this.prefsStorage._journal)
	this.cache = _wrapData(
	{
	flagStorage: toRaw(this.flagStorage),
	prefsStorage: toRaw(this.prefsStorage),
	},
	username,
	)
	},
	clearSyncConfig() {
	const blankState = { ...cloneDeep(defaultState) }
	Object.keys(this).forEach((k) => {
	this[k] = blankState[k]
	})
	this.flagStorage.reset = COMMAND_WIPE_JOURNAL_AND_STORAGE
	},
	async initSyncConfig(userData) {
	const live = userData.storage
	this.raw = live
	let cache = this.cache
	if (cache?._user !== userData.fqn) {
	console.warn(
	'Cache belongs to another user! reinitializing local cache!',
	)
	cache = null
	}

	let { recent, stale, needUpload } = _getRecentData(cache, live)

	const userNew = userData.created_at > NEW_USER_DATE
	const flagsTemplate = userNew ? newUserFlags : defaultState.flagStorage
	let dirty = false

	if (recent === null) {
	console.debug(
	`Data is empty, initializing for ${userNew ? 'new' : 'existing'} user`,
	)
	recent = _wrapData({
	flagStorage: { ...flagsTemplate },
	prefsStorage: { ...defaultState.prefsStorage },
	})
	}

	recent = recent && (await _doMigrations(recent, this.setPreference))
	stale = stale && (await _doMigrations(stale, this.setPreference))

	// Various migrations
	console.debug('Migrating from old config')
	const vuexState = (await storage.getItem('vuex-lz')) ?? {}
	const config = vuexState.config ?? {}

	const migratedEntries = new Set(config._syncMigration ?? [])
	console.debug(
	`Already migrated Values: ${[...migratedEntries].join() \|\| '[none]'}`,
	)

	Object.entries(oldDefaultConfigSync).forEach(([key, value]) => {
	const oldValue = config[key]
	const defaultValue = value

	const present = oldValue !== undefined
	const migrated = migratedEntries.has(key)
	const different = !isEqual(oldValue, defaultValue)

	if (present && !migrated && different) {
	console.debug(`Migrating config ${key}: ${oldValue}`)
	if (key === 'theme3hacks') {
	useLocalConfigStore().set({
	path: 'fontInterface',
	value: oldValue.fonts.interface,
	})
	useLocalConfigStore().set({
	path: 'fontInput',
	value: oldValue.fonts.input,
	})
	useLocalConfigStore().set({
	path: 'fontPost',
	value: oldValue.fonts.post,
	})
	useLocalConfigStore().set({
	path: 'fontMonospace',
	value: oldValue.fonts.monospace,
	})
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'underlay',
	value: oldValue.underlay,
	})
	} else if (key == 'muteWords') {
	oldValue.forEach((word, order) => {
	const uniqueId = uuidv4()

	useSyncConfigStore().setPreference({
	path: 'simple.muteFilters.' + uniqueId,
	value: {
	type: 'word',
	value: word,
	name: word,
	enabled: true,
	expires: null,
	hide: false,
	order,
	},
	})
	})
	} else {
	this.setPreference({ path: `simple.${key}`, value: oldValue })
	}
	migratedEntries.add(key)
	needUpload = true
	}
	})

	config._syncMigration = [...migratedEntries]
	vuexState.config = config
	storage.setItem('vuex-lz', vuexState)

	if (!needUpload && recent && stale) {
	console.debug('Checking if data needs merging...')
	// discarding timestamps and versions
	const { _timestamp: _0, _version: _1, ...recentData } = recent
	const { _timestamp: _2, _version: _3, ...staleData } = stale
	dirty = sum(recentData) !== sum(staleData)
	console.debug(`Data ${dirty ? 'needs' : "doesn't need"} merging`)
	}

	const allFlagKeys = _getAllFlags(recent, stale)
	let totalFlags
	let totalPrefs
	if (dirty) {
	// Merge the flags
	console.debug('Merging the data...')
	totalFlags = _mergeFlags(recent, stale, allFlagKeys)
	_verifyPrefs(recent)
	_verifyPrefs(stale)
	totalPrefs = _mergePrefs(recent.prefsStorage, stale.prefsStorage)
	} else {
	totalFlags = recent.flagStorage
	totalPrefs = recent.prefsStorage
	}

	totalPrefs = _resetPrefs(totalPrefs, totalFlags)
	totalFlags = _resetFlags(totalFlags)

	recent.flagStorage = { ...flagsTemplate, ...totalFlags }
	recent.prefsStorage = { ...defaultState.prefsStorage, ...totalPrefs }

	this.dirty = dirty \|\| needUpload
	this.cache = recent
	// set local timestamp to smaller one if we don't have any changes
	if (stale && recent && !this.dirty) {
	this.cache._timestamp = Math.min(stale._timestamp, recent._timestamp)
	}
	this.flagStorage = this.cache.flagStorage
	this.prefsStorage = this.cache.prefsStorage
	this.pushSyncConfig()
	},
	pushSyncConfig({ force = false } = {}) {
	const needPush = this.dirty \|\| force
	if (!needPush) return
	this.updateCache({ username: window.vuex.state.users.currentUser.fqn })
	const params = { pleroma_settings_store: { 'pleroma-fe': this.cache } }
	updateProfileJSON({
	params,
	credentials: useOAuthStore().token,
	})
	},
	},
	persist: {
	afterLoad(state) {
	console.debug('Validating persisted state of SyncConfig')
	const newState = { ...state }
	newState.prefsStorage = newState.prefsStorage \|\| {}
	const newEntries = Object.entries(ROOT_CONFIG).map(([path, value]) => {
	const definition = ROOT_CONFIG_DEFINITIONS[path]
	const finalValue = validateSetting({
	path,
	value: newState.prefsStorage.simple?.[path],
	definition,
	throwError: false,
	validateObjects: false,
	defaultState: ROOT_CONFIG,
	})

	return finalValue === undefined
	? [path, definition.default]
	: [path, finalValue]
	})
	newState.prefsStorage.simple = Object.fromEntries(
	newEntries.filter((_) => _),
	)
	return newState
	},
	},
	})
	diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
	index 48cd5eb91e..6ea574304e 100644
	--- a/test/unit/specs/components/rich_content.spec.js
	+++ b/test/unit/specs/components/rich_content.spec.js
	@@ -1,547 +1,541 @@
	import { mount, shallowMount } from '@vue/test-utils'

	import RichContent from 'src/components/rich_content/rich_content.jsx'

	const attentions = []
	const global = {
	mocks: {
	$store: {
	state: {},
	getters: {
	mergedConfig: () => ({
	mentionLinkShowTooltip: true,
	}),
	findUserByUrl: () => null,
	},
	},
	},
	stubs: {
	FAIcon: true,
	},
	}

	const makeMention = (who, noClass) => {
	attentions.push({ statusnet_profile_url: `https://fake.tld/@${who}` })
	return noClass
	? `<span><a href="https://fake.tld/@${who}">@<span>${who}</span></a></span>`
	: `<span class="h-card"><a class="u-url mention" href="https://fake.tld/@${who}">@<span>${who}</span></a></span>`
	}
	const p = (...data) => `<p>${data.join('')}</p>`
	const compwrap = (...data) =>
	`<span class="RichContent">${data.join('')}</span>`
	const mentionsLine = (times) =>
	[
	'<mentions-line-stub mentions="',
	new Array(times).fill('[object Object]').join(','),
	'"></mentions-line-stub>',
	].join('')

	describe('RichContent', () => {
	it('renders simple post without exploding', () => {
	const html = p('Hello world!')
	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html().replaceAll('\n', '')).to.eql(compwrap(html))
	})

	it('unescapes everything as needed', () => {
	const html = [p('Testing 'em all'), 'Testing 'em all'].join('')
	const expected = [p("Testing 'em all"), "Testing 'em all"].join('')
	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html().replaceAll('\n', '')).to.eql(compwrap(expected))
	})

	it('replaces mention with mentionsline', () => {
	const html = p(makeMention('John'), ' how are you doing today?')
	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html().replaceAll('\n', '')).to.eql(
	compwrap(p(mentionsLine(1), ' how are you doing today?')),
	)
	})

	it('replaces mentions at the end of the hellpost', () => {
	const html = [
	p('How are you doing today, fine gentlemen?'),
	p(makeMention('John'), makeMention('Josh'), makeMention('Jeremy')),
	].join('')
	const expected = [
	p('How are you doing today, fine gentlemen?'),
	// TODO fix this extra line somehow?
	p(
	'<mentions-line-stub mentions="',
	'[object Object],',
	'[object Object],',
	'[object Object]',
	'"></mentions-line-stub>',
	),
	].join('')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html().replaceAll('\n', '')).to.eql(compwrap(expected))
	})

	it('Does not touch links if link handling is disabled', () => {
	const html = [
	[makeMention('Jack'), "let's meet up with ", makeMention('Janet')].join(
	'',
	),
	[makeMention('John'), makeMention('Josh'), makeMention('Jeremy')].join(
	'',
	),
	].join('\n')
	const strippedHtml = [
	[
	makeMention('Jack', true),
	"let's meet up with ",
	makeMention('Janet', true),
	].join(''),
	[
	makeMention('John', true),
	makeMention('Josh', true),
	makeMention('Jeremy', true),
	].join(''),
	].join('\n')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: false,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html()).to.eql(compwrap(strippedHtml))
	})

	it('Adds greentext and cyantext to the post', () => {
	const html = ['>preordering videogames', '>any year'].join('\n')
	const expected = [
	'<span class="greentext">>preordering videogames</span>',
	'<span class="greentext">>any year</span>',
	].join('\n')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: false,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html()).to.eql(compwrap(expected))
	})

	it('Does not add greentext and cyantext if setting is set to false', () => {
	const html = ['>preordering videogames', '>any year'].join('\n')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: false,
	greentext: false,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html()).to.eql(compwrap(html))
	})

	it('Adds emoji to post', () => {
	const html = p('Ebin :DDDD :spurdo:')
	const expected = p(
	'Ebin :DDDD ',
	'<anonymous-stub shortcode="spurdo" islocal="true" class="emoji img" src="about:blank" title=":spurdo:" alt=":spurdo:"></anonymous-stub>',
	)

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: false,
	greentext: false,
	emoji: [{ url: 'about:blank', shortcode: 'spurdo' }],
	html,
	},
	})

	expect(wrapper.html().replaceAll('\n', '')).to.eql(compwrap(expected))
	})

	it("Doesn't add nonexistent emoji to post", () => {
	const html = p('Lol :lol:')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: false,
	greentext: false,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html().replaceAll('\n', '')).to.eql(compwrap(html))
	})

	it('Greentext + last mentions', () => {
	const html = [
	'>quote',
	makeMention('lol'),
	'>quote',
	'>quote',
	].join('\n')
	const expected = [
	'<span class="greentext">>quote</span>',
	mentionsLine(1),
	'<span class="greentext">>quote</span>',
	'<span class="greentext">>quote</span>',
	].join('\n')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html()).to.eql(compwrap(expected))
	})

	it('One buggy example', () => {
	const html = [
	'Bruh',
	'Bruh',
	[makeMention('foo'), makeMention('bar'), makeMention('baz')].join(''),
	'Bruh',
	].join('<br>')
	const expected = ['Bruh', 'Bruh', mentionsLine(3), 'Bruh'].join('<br>')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html().replaceAll('\n', '')).to.eql(compwrap(expected))
	})

	it('buggy example/hashtags', () => {
	const html = [
	'<p>',
	'<a href="http://macrochan.org/images/N/H/NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg">',
	'NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg</a>',
	' <a class="hashtag" data-tag="nou" href="https://shitposter.club/tag/nou">',
	'#nou</a>',
	' <a class="hashtag" data-tag="screencap" href="https://shitposter.club/tag/screencap">',
	'#screencap</a>',
	' </p>',
	].join('')
	const expected = [
	'<p>',
	'<a href="http://macrochan.org/images/N/H/NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg" target="_blank">',
	'NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg</a>',
	' <hashtag-link-stub url="https://shitposter.club/tag/nou" content="#nou" tag="nou">',
	'</hashtag-link-stub>',
	' <hashtag-link-stub url="https://shitposter.club/tag/screencap" content="#screencap" tag="screencap">',
	'</hashtag-link-stub>',
	' </p>',
	].join('')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html().replaceAll('\n', '')).to.eql(compwrap(expected))
	})

	it('rich contents of a mention are handled properly', () => {
	attentions.push({ statusnet_profile_url: 'lol' })
	const html = [
	p(
	'<a href="lol" class="mention">',
	'<span>',
	'https://</span>',
	'<span>',
	'lol.tld/</span>',
	'<span>',
	'</span>',
	'</a>',
	),
	p('Testing'),
	].join('')
	const expected = [
	p(
	'<span class="MentionsLine">',
	'<span class="MentionLink mention-link">',
	'<a href="lol" class="original" target="_blank">',
	'<span>',
	'https://</span>',
	'<span>',
	'lol.tld/</span>',
	'<span>',
	'</span>',
	'</a>',
	'</span>',
	'</span>',
	),
	p('Testing'),
	].join('')

	const wrapper = mount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(
	- wrapper
	- .html()
	- .replaceAll('\n', '')
	- .replaceAll('<!--.*?-->', ''),
	+ wrapper.html().replaceAll('\n', '').replaceAll('<!--.*?-->', ''),
	).to.eql(compwrap(expected))
	})

	it('rich contents of nested mentions are handled properly', () => {
	attentions.push({ statusnet_profile_url: 'lol' })
	const html = [
	'<span class="poast-style">',
	'<a href="lol" class="mention">',
	'<span>',
	'https://</span>',
	'<span>',
	'lol.tld/</span>',
	'<span>',
	'</span>',
	'</a>',
	' ',
	'<a href="lol" class="mention">',
	'<span>',
	'https://</span>',
	'<span>',
	'lol.tld/</span>',
	'<span>',
	'</span>',
	'</a>',
	' ',
	'</span>',
	'Testing',
	].join('')
	const expected = [
	'<span>',
	'<span class="MentionsLine">',
	'<span class="MentionLink mention-link">',
	'<a href="lol" class="original" target="_blank">',
	'<span>',
	'https://</span>',
	'<span>',
	'lol.tld/</span>',
	'<span>',
	'</span>',
	'</a>',
	'</span>',
	'<span class="MentionLink mention-link">',
	'<a href="lol" class="original" target="_blank">',
	'<span>',
	'https://</span>',
	'<span>',
	'lol.tld/</span>',
	'<span>',
	'</span>',
	'</a>',
	'</span>',
	'</span>',
	' ',
	'</span>',
	'Testing',
	].join('')

	const wrapper = mount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(
	- wrapper
	- .html()
	- .replaceAll('\n', '')
	- .replaceAll('<!--.*?-->', ''),
	+ wrapper.html().replaceAll('\n', '').replaceAll('<!--.*?-->', ''),
	).to.eql(compwrap(expected))
	})

	it('rich contents of a link are handled properly', () => {
	const html = [
	'<p>',
	'Freenode is dead.</p>',
	'<p>',
	'<a href="https://isfreenodedeadyet.com/">',
	'<span>',
	'https://</span>',
	'<span>',
	'isfreenodedeadyet.com/</span>',
	'<span>',
	'</span>',
	'</a>',
	'</p>',
	].join('')
	const expected = [
	'<p>',
	'Freenode is dead.</p>',
	'<p>',
	'<a href="https://isfreenodedeadyet.com/" target="_blank">',
	'<span>',
	'https://</span>',
	'<span>',
	'isfreenodedeadyet.com/</span>',
	'<span>',
	'</span>',
	'</a>',
	'</p>',
	].join('')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html().replaceAll('\n', '')).to.eql(compwrap(expected))
	})

	it.skip('[INFORMATIVE] Performance testing, 10 000 simple posts', () => {
	const amount = 20

	const onePost = p(
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	' i just landed in l a where are you',
	)

	const TestComponent = {
	template: `
	<div v-if="!vhtml">
	${new Array(amount).fill(`<RichContent html="${onePost}" :greentext="true" :handleLinks="handeLinks" :emoji="[]" :attentions="attentions"/>`)}
	</div>
	<div v-else="vhtml">
	${new Array(amount).fill(`<div v-html="${onePost}"/>`)}
	</div>
	`,
	props: ['handleLinks', 'attentions', 'vhtml'],
	}

	const ptest = (handleLinks, vhtml) => {
	const t0 = performance.now()

	const wrapper = mount(TestComponent, {
	global,
	props: {
	attentions,
	handleLinks,
	vhtml,
	},
	})

	const t1 = performance.now()

	wrapper.destroy()

	const t2 = performance.now()

	return `Mount: ${t1 - t0}ms, destroy: ${t2 - t1}ms, avg ${(t1 - t0) / amount}ms - ${(t2 - t1) / amount}ms per item`
	}

	console.debug(`${amount} items with links handling:`)
	console.debug(ptest(true))
	console.debug(`${amount} items without links handling:`)
	console.debug(ptest(false))
	console.debug(`${amount} items plain v-html:`)
	console.debug(ptest(false, true))
	})
	})

File Metadata

Mime Type: text/x-diff
Expires: Sat, Aug 8, 9:48 PM (1 d, 17 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1724002
Default Alt Text: (181 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions