No OneTemporary
Actions

Authored By

Unknown

Size

190 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/build/check-versions.mjs b/build/check-versions.mjs
	index 8c5968a308..c22004b00b 100644
	--- a/build/check-versions.mjs
	+++ b/build/check-versions.mjs
	@@ -1,42 +1,41 @@
	import chalk from 'chalk'
	import semver from 'semver'

	import packageConfig from '../package.json' with { type: 'json' }

	var versionRequirements = [
	{
	name: 'node',
	currentVersion: semver.clean(process.version),
	versionRequirement: packageConfig.engines.node,
	},
	]

	export default function () {
	const warnings = []
	for (let i = 0; i < versionRequirements.length; i++) {
	const mod = versionRequirements[i]
	if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
	warnings.push(
	mod.name +
	': ' +
	chalk.red(mod.currentVersion) +
	' should be ' +
	chalk.green(mod.versionRequirement),
	)
	}
	}

	if (warnings.length) {
	console.warn(
	chalk.yellow(
	'\nTo use this template, you must update following to modules:\n',
	),
	)
	for (let i = 0; i < warnings.length; i++) {
	const warning = warnings[i]
	console.warn(' ' + warning)
	}
	- console.warn()
	process.exit(1)
	}
	}
	diff --git a/src/boot/after_store.js b/src/boot/after_store.js
	index e18cfa7883..a3d8701e57 100644
	--- a/src/boot/after_store.js
	+++ b/src/boot/after_store.js
	@@ -1,621 +1,622 @@
	/* global process */

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

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

	config.autoAddCss = false

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

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

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

	let staticInitialResults = null

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

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

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

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

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

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

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

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

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

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

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

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

	useAuthFlowStore().setInitialStrategy(config.loginMethod)
	}

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

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

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

	const getAppSecret = async ({ store }) => {
	const oauth = useOAuthStore()
	if (oauth.userToken) {
	store.commit(
	'setBackendInteractor',
	backendInteractorService(oauth.getToken),
	)
	}
	}

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

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

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

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

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

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

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

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

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

	const federation = metadata.federation

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

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

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

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

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

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

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

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

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

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

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

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

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

	FaviconService.initFaviconService()
	initServiceWorker(store)

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

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

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

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

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

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

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

	useI18nStore().setI18n(i18n)

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

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

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

	app.component('FAIcon', FontAwesomeIcon)
	app.component('FALayers', FontAwesomeLayers)

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

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

	export default afterStoreSetup
	diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
	index 0146a3de84..6c4568d14d 100644
	--- a/src/components/emoji_input/emoji_input.js
	+++ b/src/components/emoji_input/emoji_input.js
	@@ -1,606 +1,605 @@
	import { take } from 'lodash'

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

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

	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'

	library.add(faSmileBeam)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	this.highlighted += 1
	if (this.highlighted >= len) {
	this.highlighted = -1
	this.input.focus()
	}
	if (len > 0) {
	e.preventDefault()
	}
	},
	scrollIntoView() {
	const rootRef = this.$refs.picker.$el
	/* Scroller is either `window` (replies in TL), sidebar (main post form,
	* replies in notifs) or mobile post form. Note that getting and setting
	* scroll is different for `Window` and `Element`s
	*/
	const scrollerRef =
	this.$el.closest('.sidebar-scroller') \|\|
	this.$el.closest('.post-form-modal-view') \|\|
	window
	const currentScroll =
	scrollerRef === window ? scrollerRef.scrollY : scrollerRef.scrollTop
	const scrollerHeight =
	scrollerRef === window
	? scrollerRef.innerHeight
	: scrollerRef.offsetHeight

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

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

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

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

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

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

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

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

	export default EmojiInput
	diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue
	index 1e2efe402e..98fba754d7 100644
	--- a/src/components/interactions/interactions.vue
	+++ b/src/components/interactions/interactions.vue
	@@ -1,53 +1,52 @@
	<template>
	<div class="panel panel-default">
	<div class="panel-heading">
	<h1 class="title">
	{{ $t("nav.interactions") }}
	</h1>
	</div>
	<tab-switcher
	ref="tabSwitcher"
	:on-switch="onModeSwitch"
	>
	<span
	key="statuses"
	:label="$t('nav.mentions')"
	/>
	<span
	key="statuses"
	:label="$t('interactions.statuses')"
	/>
	<span
	key="likes+repeats"
	:label="$t('interactions.favs_repeats')"
	/>
	<span
	key="follows"
	:label="$t('interactions.follows')"
	/>
	<span
	key="reactions"
	:label="$t('interactions.emoji_reactions')"
	/>
	<span
	v-if="canSeeReports"
	key="reports"
	:label="$t('interactions.reports')"
	/>
	<span
	v-if="!allowFollowingMove"
	key="moves"
	:label="$t('interactions.moves')"
	/>
	</tab-switcher>
	<Notifications
	ref="notifications"
	- :no-heading="true"
	:no-extra="true"
	:minimal-mode="true"
	:filter-mode="filterMode"
	/>
	</div>
	</template>

	<script src="./interactions.js"></script>
	diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
	index e5ca9cefe3..ea45fd17fe 100644
	--- a/src/components/poll/poll_form.vue
	+++ b/src/components/poll/poll_form.vue
	@@ -1,157 +1,155 @@
	<template>
	<div
	v-if="visible"
	class="poll-form"
	>
	<div
	v-for="(option, index) in options"
	:key="index"
	class="poll-option"
	>
	<div class="input-container">
	<input
	:id="`poll-${index}`"
	v-model="options[index]"
	size="1"
	class="input poll-option-input"
	type="text"
	:placeholder="$t('polls.option')"
	:maxlength="maxLength"
	- @change="updatePollToParent"
	@keydown.enter.stop.prevent="nextOption(index)"
	>
	</div>
	<button
	v-if="options.length > 2"
	class="delete-option button-unstyled -hover-highlight"
	@click="deleteOption(index)"
	>
	<FAIcon icon="times" />
	</button>
	</div>
	<button
	v-if="options.length < maxOptions"
	class="add-option faint button-unstyled -hover-highlight"
	@click="addOption"
	>
	<FAIcon
	icon="plus"
	size="sm"
	/>

	{{ $t("polls.add_option") }}
	</button>
	<div class="poll-type-expiry">
	<div
	class="poll-type"
	:title="$t('polls.type')"
	>
	<Select
	v-model="pollType"
	class="poll-type-select"
	unstyled="true"
	- @change="updatePollToParent"
	>
	<option value="single">
	{{ $t('polls.single_choice') }}
	</option>
	<option value="multiple">
	{{ $t('polls.multiple_choices') }}
	</option>
	</Select>
	</div>
	<div
	class="poll-expiry"
	:title="$t('polls.expiry')"
	>
	<input
	v-model="expiryAmount"
	type="number"
	class="input expiry-amount hide-number-spinner"
	:min="minExpirationInCurrentUnit"
	:max="maxExpirationInCurrentUnit"
	@change="expiryAmountChange"
	>
	{{ ' ' }}
	<Select
	v-model="expiryUnit"
	unstyled="true"
	class="expiry-unit"
	@change="expiryAmountChange"
	>
	<option
	v-for="unit in expiryUnits"
	:key="unit"
	:value="unit"
	>
	{{ $t(`time.unit.${unit}_short`, [''], expiryAmount) }}
	</option>
	</Select>
	</div>
	</div>
	</div>
	</template>

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

	<style lang="scss">
	.poll-form {
	display: flex;
	flex-direction: column;
	padding: 0 0.5em 0.5em;

	.add-option {
	align-self: flex-start;
	padding-top: 0.25em;
	padding-left: 0.1em;
	}

	.poll-option {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.25em;
	}

	.input-container {
	width: 100%;

	input {
	// Hack: dodge the floating X icon
	padding-right: 2.5em;
	width: 100%;
	}
	}

	.delete-option {
	// Hack: Move the icon over the input box
	width: 1.5em;
	margin-left: -1.5em;
	z-index: 1;
	}

	.poll-type-expiry {
	margin-top: 0.5em;
	display: flex;
	width: 100%;
	}

	.poll-type {
	margin-right: 0.75em;
	flex: 1 1 60%;

	.poll-type-select {
	padding-right: 0.75em;
	}
	}

	.poll-expiry {
	display: flex;

	.expiry-amount {
	width: 3em;
	text-align: right;
	}
	}
	}
	</style>
	diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
	index 1e93f92718..313ed71b06 100644
	--- a/src/components/settings_modal/settings_modal.scss
	+++ b/src/components/settings_modal/settings_modal.scss
	@@ -1,289 +1,290 @@
	.settings-modal {
	overflow: hidden;

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

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

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

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

	p {
	line-height: 1.5;
	}

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

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

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

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

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

	.setting-control {
	grid-area: control;

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

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

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

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

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

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

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

	.DraftButtons {
	grid-area: draft;
	}
	}

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

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

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


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

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

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

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

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

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

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

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

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

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

	>* {
	margin-right: 0.5em;
	}

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

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

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

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

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

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

	.checkbox-indicator {
	order: 1;
	}
	}

	}

	ul {
	padding: 0;

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

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

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

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

	@media all and (width <= 800px) {
	/* For mobile, the modal takes 100% of the available screen.
	This ensures the minimized modal is always 50px above the browser bottom
	bar regardless of whether or not it is visible.
	*/
	transform: translateY(calc(100% - 50px));
	}
	}
	}
	}
	diff --git a/src/components/settings_modal/tabs/clutter_tab.vue b/src/components/settings_modal/tabs/clutter_tab.vue
	index 533cd85c6b..c0e6008f82 100644
	--- a/src/components/settings_modal/tabs/clutter_tab.vue
	+++ b/src/components/settings_modal/tabs/clutter_tab.vue
	@@ -1,95 +1,95 @@
	<template>
	<div class="clutter-tab">
	<div class="setting-section">
	<h3>{{ $t('settings.interface') }}</h3>
	<ul class="setting-list">
	<li>
	<BooleanSetting path="alwaysShowSubjectInput">
	{{ $t('settings.subject_input_always_show') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="minimalScopesMode">
	{{ $t('settings.minimal_scopes_mode') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="hidePostStats">
	{{ $t('settings.hide_post_stats') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="hideUserStats">
	{{ $t('settings.hide_user_stats') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="hideBotIndication">
	{{ $t('settings.hide_actor_type_indication') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="hideScrobbles">
	{{ $t('settings.hide_scrobbles') }}
	</BooleanSetting>
	<ul class="setting-list suboptions">
	<li>
	<UnitSetting
	key="hideScrobblesAfter"
	path="hideScrobblesAfter"
	:units="['m', 'h', 'd']"
	unit-set="time"
	>
	{{ $t('settings.hide_scrobbles_after') }}
	</UnitSetting>
	</li>
	<li v-if="instanceSpecificPanelPresent">
	<BooleanSetting path="hideISP">
	{{ $t('settings.hide_isp') }}
	</BooleanSetting>
	</li>
	</ul>
	</li>
	+ <li>
	+ <BooleanSetting path="userCardHidePersonalMarks">
	+ {{ $t('settings.user_card_hide_personal_marks') }}
	+ </BooleanSetting>
	+ </li>
	+ <li v-if="shoutAvailable">
	+ <BooleanSetting path="hideShoutbox">
	+ {{ $t('settings.hide_shoutbox') }}
	+ </BooleanSetting>
	+ </li>
	</ul>
	<h3>{{ $t('settings.attachments') }}</h3>
	<ul class="setting-list">
	<li>
	<IntegerSetting
	path="maxThumbnails"
	:min="0"
	>
	{{ $t('settings.max_thumbnails') }}
	</IntegerSetting>
	</li>
	<li>
	<BooleanSetting
	:local="true"
	path="hideAttachments"
	>
	{{ $t('settings.hide_attachments_in_tl') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	:local="true"
	path="hideAttachmentsInConv"
	>
	{{ $t('settings.hide_attachments_in_convo') }}
	</BooleanSetting>
	</li>
	- <li>
	- <BooleanSetting path="userCardHidePersonalMarks">
	- {{ $t('settings.user_card_hide_personal_marks') }}
	- </BooleanSetting>
	- </li>
	- <li v-if="shoutAvailable">
	- <BooleanSetting path="hideShoutbox">
	- {{ $t('settings.hide_shoutbox') }}
	- </BooleanSetting>
	- </li>
	</ul>
	</div>
	</div>
	</template>

	<script src="./clutter_tab.js"></script>
	diff --git a/src/components/settings_modal/tabs/layout_tab.vue b/src/components/settings_modal/tabs/layout_tab.vue
	index ca514e0cb3..0035f3a11a 100644
	--- a/src/components/settings_modal/tabs/layout_tab.vue
	+++ b/src/components/settings_modal/tabs/layout_tab.vue
	@@ -1,132 +1,131 @@
	<template>
	<div :label="$t('settings.layout')">
	<div class="setting-section">
	<h3>{{ $t('settings.general') }}</h3>
	<ul class="setting-list">
	<li>
	<BooleanSetting path="modalMobileCenter">
	{{ $t('settings.mobile_center_dialog') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="alwaysShowNewPostButton"
	expert="1"
	>
	{{ $t('settings.always_show_post_button') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="autohideFloatingPostButton"
	expert="1"
	>
	{{ $t('settings.autohide_floating_post_button') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="userPopoverOverlay"
	expert="1"
	>
	{{ $t('settings.user_popover_avatar_overlay') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="userCardLeftJustify">
	{{ $t('settings.user_card_left_justify') }}
	</BooleanSetting>
	</li>
	<li>
	<UnitSetting
	path="themeEditorMinWidth"
	:local="true"
	:units="['px', 'rem']"
	expert="1"
	>
	{{ $t('settings.theme_editor_min_width') }}
	</UnitSetting>
	</li>
	<li>
	<UnitSetting
	path="navbarSize"
	:step="0.1"
	:local="true"
	:units="['px', 'rem']"
	:reset-default="{ 'px': 55, 'rem': 3.5 }"
	>
	{{ $t('settings.navbar_size') }}
	</UnitSetting>
	</li>
	</ul>
	<h3>{{ $t('settings.columns') }}</h3>
	<ul class="setting-list">
	<li>
	<BooleanSetting path="disableStickyHeaders">
	{{ $t('settings.disable_sticky_headers') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="showScrollbars">
	{{ $t('settings.show_scrollbars') }}
	</BooleanSetting>
	</li>
	<li>
	<UnitSetting
	path="panelHeaderSize"
	:local="true"
	:step="0.1"
	:units="['px', 'rem']"
	:reset-default="{ 'px': 52, 'rem': 3.2 }"
	timed-apply-mode
	>
	{{ $t('settings.panel_header_size') }}
	</UnitSetting>
	</li>
	<li>
	<BooleanSetting
	:local="true"
	path="sidebarRight"
	>
	{{ $t('settings.right_sidebar') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	:local="true"
	path="navbarColumnStretch"
	>
	{{ $t('settings.navbar_column_stretch') }}
	</BooleanSetting>
	</li>
	<li>
	<ChoiceSetting
	v-if="user"
	id="thirdColumnMode"
	path="thirdColumnMode"
	:options="thirdColumnModeOptions"
	>
	{{ $t('settings.third_column_mode') }}
	</ChoiceSetting>
	</li>
	<li v-if="expertLevel > 0">
	<h4> {{ $t('settings.column_sizes') }} </h4>
	<div class="column-settings">
	<UnitSetting
	v-for="column in columns"
	:key="column"
	:local="true"
	:path="column + 'ColumnWidth'"
	- :units="horizontalUnits"
	expert="1"
	>
	{{ $t('settings.column_sizes_' + column) }}
	</UnitSetting>
	</div>
	</li>
	</ul>
	</div>
	</div>
	</template>

	<script src="./layout_tab.js"></script>
	diff --git a/src/components/settings_modal/tabs/posts_tab.js b/src/components/settings_modal/tabs/posts_tab.js
	index ab00e52e77..dbf284d938 100644
	--- a/src/components/settings_modal/tabs/posts_tab.js
	+++ b/src/components/settings_modal/tabs/posts_tab.js
	@@ -1,76 +1,78 @@
	import FontControl from 'src/components/font_control/font_control.vue'
	import BooleanSetting from '../helpers/boolean_setting.vue'
	import ChoiceSetting from '../helpers/choice_setting.vue'
	import IntegerSetting from '../helpers/integer_setting.vue'
	import SharedComputedObject from '../helpers/shared_computed_object.js'
	+import UnitSetting from '../helpers/unit_setting.vue'

	import { useLocalConfigStore } from 'src/stores/local_config.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'

	const PostsTab = {
	data() {
	return {
	conversationDisplayOptions: ['tree', 'linear'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.conversation_display_${mode}`),
	})),
	conversationOtherRepliesButtonOptions: ['below', 'inside'].map(
	(mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.conversation_other_replies_button_${mode}`),
	}),
	),
	mentionLinkDisplayOptions: ['short', 'full_for_remote', 'full'].map(
	(mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.mention_link_display_${mode}`),
	}),
	),
	userPopoverAvatarActionOptions: ['close', 'zoom', 'open'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.user_popover_avatar_action_${mode}`),
	})),
	unsavedPostActionOptions: ['save', 'discard', 'confirm'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.unsaved_post_action_${mode}`),
	})),
	loopSilentAvailable:
	// Firefox
	Object.getOwnPropertyDescriptor(
	HTMLVideoElement.prototype,
	'mozHasAudio',
	) \|\|
	// Chrome-likes
	Object.getOwnPropertyDescriptor(
	HTMLMediaElement.prototype,
	'webkitAudioDecodedByteCount',
	) \|\|
	// Future spec, still not supported in Nightly 63 as of 08/2018
	Object.getOwnPropertyDescriptor(
	HTMLMediaElement.prototype,
	'audioTracks',
	),
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	IntegerSetting,
	FontControl,
	+ UnitSetting,
	},
	computed: {
	...SharedComputedObject(),
	},
	methods: {
	updateFont(path, value) {
	useLocalConfigStore().set({ path, value })
	},
	},
	}

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

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ColorInput from 'src/components/color_input/color_input.vue'
	import ComponentPreview from 'src/components/component_preview/component_preview.vue'
	import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
	import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
	import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
	import RoundnessInput from 'src/components/roundness_input/roundness_input.vue'
	import Select from 'src/components/select/select.vue'
	import SelectMotion from 'src/components/select/select_motion.vue'
	import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	import Tooltip from 'src/components/tooltip/tooltip.vue'
	import StringSetting from '../../helpers/string_setting.vue'
	import Preview from '../old_theme_tab/theme_preview.vue'
	import VirtualDirectivesTab from './virtual_directives_tab.vue'

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

	import {
	getContrastRatio,
	hex2rgb,
	rgb2hex,
	} from 'src/services/color_convert/color_convert.js'
	import {
	newExporter,
	newImporter,
	} from 'src/services/export_import/export_import.js'
	import {
	adoptStyleSheets,
	createStyleSheet,
	} from 'src/services/style_setter/style_setter.js'
	import { getCssRules } from 'src/services/theme_data/css_utils.js'
	import {
	deserialize,
	deserializeShadow,
	} from 'src/services/theme_data/iss_deserializer.js'
	import { serialize } from 'src/services/theme_data/iss_serializer.js'
	import {
	findColor,
	init,
	} from 'src/services/theme_data/theme_data_3.service.js'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	watch(selectedComponentName, updateSelectedComponent)

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

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

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

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

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

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

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

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

	return root
	})

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

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

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

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

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

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

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

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

	const ratio = getContrastRatio(bgRgb, textRgb)
	return {
	// TODO this ideally should be part of <ContractRatio />
	ratio,
	text: ratio.toPrecision(3) + ':1',
	// AA level, AAA level
	aa: ratio >= 4.5,
	aaa: ratio >= 7,
	// same but for 18pt+ texts
	laa: ratio >= 3,
	laaa: ratio >= 4.5,
	}
	} catch (e) {
	console.warn('Failure computing contrast', e)
	return { error: e }
	}
	}

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

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

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

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

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

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

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

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

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

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

	resultRules.push(result)

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

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

	return resultRules
	})

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

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

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

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

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

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

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

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

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

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

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

	allEditedRules.value = rulesToEditorFriendly(rules)

	exports.updateOverallPreview()
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

	const prefix = sorted[0].selector

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

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

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

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

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

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

	updateOverallPreview()

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

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

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ColorInput from 'src/components/color_input/color_input.vue'
	import ComponentPreview from 'src/components/component_preview/component_preview.vue'
	import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
	import Popover from 'src/components/popover/popover.vue'
	import Select from 'src/components/select/select.vue'
	import SelectMotion from 'src/components/select/select_motion.vue'

	import { rgb2hex } from 'src/services/color_convert/color_convert.js'
	import {
	getCssShadow,
	getCssShadowFilter,
	} from 'src/services/theme_data/css_utils.js'
	import { deserializeShadow } from 'src/services/theme_data/iss_deserializer.js'
	import { serializeShadow } from 'src/services/theme_data/iss_serializer.js'
	import {
	findColor,
	findShadow,
	} from 'src/services/theme_data/theme_data_3.service.js'

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

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

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

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

	if (this.separateInset) {
	result = {
	filter: getCssShadowFilter(fixedShadows),
	boxShadow: getCssShadow(fixedShadows, true),
	}
	} else {
	result = {
	boxShadow: getCssShadow(fixedShadows),
	}
	}
	this.invalid = false
	return result
	} catch (e) {
	console.error('Invalid shadow', e)
	this.invalid = true
	}
	},
	},
	watch: {
	selected() {
	this.$emit('subShadowSelected', this.selectedId)
	},
	},
	methods: {
	getNewSubshadow() {
	return toModel(this.selected)
	},
	onSelectChange(id) {
	this.selectedId = id
	},
	getSubshadowLabel(shadow, index) {
	if (typeof shadow === 'object') {
	return (
	shadow?.name ??
	this.$t('settings.style.shadows.shadow_id', { value: index })
	)
	} else if (typeof shadow === 'string') {
	return shadow \|\| this.$t('settings.style.shadows.empty_expression')
	}
	},
	updateProperty: throttle(function (prop, value) {
	this.cValue[this.selectedId][prop] = value
	if (prop === 'inset' && value === false && this.separateInset) {
	this.cValue[this.selectedId].spread = 0
	}
	this.$emit('update:modelValue', this.cValue)
	}, 100),
	},
	}
	diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js
	index f3c98bc97c..0fc4944344 100644
	--- a/src/components/status_action_buttons/action_button.js
	+++ b/src/components/status_action_buttons/action_button.js
	@@ -1,156 +1,156 @@
	import EmojiPicker from 'src/components/emoji_picker/emoji_picker.vue'
	import Popover from 'src/components/popover/popover.vue'
	import StatusBookmarkFolderMenu from 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'

	-import { useMergedConfigStore } from 'src/stores/merged_config.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 { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBookmark as faBookmarkRegular,
	faStar as faStarRegular,
	} from '@fortawesome/free-regular-svg-icons'
	import {
	faBookmark,
	faCheck,
	faChevronRight,
	faChevronUp,
	faExternalLinkAlt,
	faEyeSlash,
	faHistory,
	faMinus,
	faPlus,
	faReply,
	faRetweet,
	faShareAlt,
	faSmileBeam,
	faStar,
	faThumbtack,
	faTimes,
	faWrench,
	} from '@fortawesome/free-solid-svg-icons'

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

	faChevronRight,
	faChevronUp,

	faReply,
	faRetweet,
	faStar,
	faStarRegular,
	faSmileBeam,

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

	export default {
	props: [
	'button',
	'status',
	'extra',
	'status',
	'funcArg',
	'getClass',
	'getComponent',
	'doAction',
	'outerClose',
	],
	components: {
	StatusBookmarkFolderMenu,
	EmojiPicker,
	Popover,
	},
	data: () => ({
	animationState: false,
	}),
	computed: {
	buttonClass() {
	return [
	this.button.name + '-button',
	{
	'-with-extra': this.button.name === 'bookmark',
	'-extra': this.extra,
	'-quick': !this.extra,
	},
	]
	},
	userIsMuted() {
	return this.$store.getters.relationship(this.status.user.id).muting
	},
	threadIsMuted() {
	return this.status.thread_muted
	},
	hideCustomEmoji() {
	return !useInstanceCapabilitiesStore()
	.pleromaCustomEmojiReactionsAvailable
	},
	hidePostStats() {
	return useMergedConfigStore().mergedConfig.hidePostStats
	},
	buttonInnerClass() {
	return [
	this.button.name + '-button',
	{
	'main-button': this.extra,
	'button-unstyled': !this.extra,
	'-active': this.button.active?.(this.funcArg),
	disabled: this.button.interactive
	? !this.button.interactive(this.funcArg)
	: false,
	},
	]
	},
	remoteInteractionLink() {
	return useInstanceStore().getRemoteInteractionLink({
	statusId: this.status.id,
	})
	},
	},
	methods: {
	addReaction(event) {
	const emoji = event.insertion
	const existingReaction = this.status.emoji_reactions.find(
	(r) => r.name === emoji,
	)
	if (existingReaction && existingReaction.me) {
	this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
	} else {
	this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
	}
	},
	doActionWrap(
	button,
	close = () => {
	/* no-op */
	},
	) {
	if (
	this.button.interactive ? !this.button.interactive(this.funcArg) : false
	)
	return
	if (button.name === 'emoji') {
	this.$refs.picker.showPicker()
	} else {
	this.animationState = true
	this.getComponent(button) === 'button' && this.doAction(button)
	setTimeout(() => {
	this.animationState = false
	}, 500)
	close()
	}
	},
	},
	}
	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	index ee4170dc15..2d6bfb7226 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,588 +1,591 @@
	import ldEscape from 'lodash/escape'
	import isEqual from 'lodash/isEqual'
	import merge from 'lodash/merge'
	import ldUnescape from 'lodash/unescape'
	import { mapState } from 'pinia'

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ColorInput from 'src/components/color_input/color_input.vue'
	import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
	import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
	import suggestor from 'src/components/emoji_input/suggestor.js'
	import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
	import AccountActions from '../account_actions/account_actions.vue'
	import FollowButton from '../follow_button/follow_button.vue'
	import ModerationTools from '../moderation_tools/moderation_tools.vue'
	import ProgressButton from '../progress_button/progress_button.vue'
	import RemoteFollow from '../remote_follow/remote_follow.vue'
	import Select from '../select/select.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import UserLink from '../user_link/user_link.vue'
	import UserNote from '../user_note/user_note.vue'

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

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

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

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

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

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

	return {
	followRequestInProgress: false,

	// Editable stuff
	editImage: false,

	newName: user.name_unescaped,
	editingName: false,

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

	newAvatar: null,
	newAvatarFile: null,

	newBanner: null,
	newBannerFile: null,

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

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

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

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

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

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

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

	this.editImage = false
	}

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

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

	this.newAvatar = null
	this.newAvatarFile = null

	this.newBanner = null
	this.newBannerFile = null

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

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

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

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

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

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

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

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

	<style lang="scss" src="./user_card.scss" />
	diff --git a/src/modules/statuses.js b/src/modules/statuses.js
	index 339b6193af..99652a1041 100644
	--- a/src/modules/statuses.js
	+++ b/src/modules/statuses.js
	@@ -1,837 +1,836 @@
	import {
	each,
	find,
	findIndex,
	first,
	isArray,
	last,
	maxBy,
	merge,
	minBy,
	omitBy,
	remove,
	slice,
	} from 'lodash'

	import apiService from '../services/api/api.service.js'

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

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

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

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

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

	return status
	}

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

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

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

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

	const getLatestScrobble = (state, user) => {
	const scrobblesSupport =
	useInstanceCapabilitiesStore().pleromaScrobblesAvailable

	if (!scrobblesSupport \|\| !user.name \|\| user.id === 'undefined') {
	return
	}

	if (
	state.scrobblesNextFetch[user.id] &&
	state.scrobblesNextFetch[user.id] > Date.now()
	) {
	return
	}

	state.scrobblesNextFetch[user.id] = Date.now() + 24 * 60 * 60 * 1000
	if (!scrobblesSupport) return
	apiService
	.fetchScrobbles({ accountId: user.id })
	.then((scrobbles) => {
	if (scrobbles?.error) {
	useInstanceCapabilitiesStore().set('pleromaScrobblesAvailable', false)
	return
	}

	if (scrobbles.length > 0) {
	user.latestScrobble = scrobbles[0]

	state.scrobblesNextFetch[user.id] = Date.now() + 60 * 1000
	}
	})
	.catch((e) => {
	console.warn('cannot fetch scrobbles', e)
	})
	}

	// Add status to the global storages (arrays and objects maintaining statuses) except timelines
	const addStatusToGlobalStorage = (state, data) => {
	getLatestScrobble(state, data.user)
	const result = mergeOrAdd(state.allStatuses, state.allStatusesObject, data)
	if (result.new) {
	// Add to conversation
	const status = result.item
	const conversationsObject = state.conversationsObject
	const conversationId = status.statusnet_conversation_id
	if (conversationsObject[conversationId]) {
	conversationsObject[conversationId].push(status)
	} else {
	conversationsObject[conversationId] = [status]
	}
	}
	return result
	}

	const addNewStatuses = (
	state,
	{
	statuses,
	showImmediately = false,
	timeline,
	user = {},
	noIdUpdate = false,
	userId,
	pagination = {},
	},
	) => {
	// Sanity check
	if (!isArray(statuses)) {
	return false
	}

	const allStatuses = state.allStatuses
	const timelineObject = state.timelines[timeline]

	// Mismatch between API pagination and our internal minId/maxId tracking systems:
	// pagination.maxId is the oldest of the returned statuses when fetching older,
	// and pagination.minId is the newest when fetching newer. The names come directly
	// from the arguments they're supposed to be passed as for the next fetch.
	const minNew =
	pagination.maxId \|\| (statuses.length > 0 ? minBy(statuses, 'id').id : 0)
	const maxNew =
	pagination.minId \|\| (statuses.length > 0 ? maxBy(statuses, 'id').id : 0)

	const newer =
	timeline &&
	(maxNew > timelineObject.maxId \|\| timelineObject.maxId === 0) &&
	statuses.length > 0
	const older =
	timeline &&
	(minNew < timelineObject.minId \|\| timelineObject.minId === 0) &&
	statuses.length > 0

	if (!noIdUpdate && newer) {
	timelineObject.maxId = maxNew
	}
	if (!noIdUpdate && older) {
	timelineObject.minId = minNew
	}

	// This makes sure that user timeline won't get data meant for other
	// user. I.e. opening different user profiles makes request which could
	// return data late after user already viewing different user profile
	if (
	(timeline === 'user' \|\| timeline === 'media') &&
	timelineObject.userId !== userId
	) {
	return
	}

	const addStatus = (data, showImmediately, addToTimeline = true) => {
	const result = addStatusToGlobalStorage(state, data)
	const status = result.item

	if (result.new) {
	// We are mentioned in a post
	if (
	status.type === 'status' &&
	find(status.attentions, { id: user.id })
	) {
	const mentions = state.timelines.mentions

	// Add the mention to the mentions timeline
	if (timelineObject !== mentions) {
	mergeOrAdd(mentions.statuses, mentions.statusesObject, status)
	mentions.newStatusCount += 1

	sortTimeline(mentions)
	}
	}
	if (status.visibility === 'direct') {
	const dms = state.timelines.dms

	mergeOrAdd(dms.statuses, dms.statusesObject, status)
	dms.newStatusCount += 1

	sortTimeline(dms)
	}
	}

	// Decide if we should treat the status as new for this timeline.
	let resultForCurrentTimeline
	// Some statuses should only be added to the global status repository.
	if (timeline && addToTimeline) {
	resultForCurrentTimeline = mergeOrAdd(
	timelineObject.statuses,
	timelineObject.statusesObject,
	status,
	)
	}

	if (timeline && showImmediately) {
	// Add it directly to the visibleStatuses, don't change
	// newStatusCount
	mergeOrAdd(
	timelineObject.visibleStatuses,
	timelineObject.visibleStatusesObject,
	status,
	)
	} else if (timeline && addToTimeline && resultForCurrentTimeline.new) {
	// Just change newStatuscount
	timelineObject.newStatusCount += 1
	}

	if (status.quote) {
	addStatus(
	status.quote,
	/* showImmediately = */ false,
	/* addToTimeline = */ false,
	)
	}

	return status
	}

	const favoriteStatus = (favorite) => {
	const status = find(allStatuses, { id: favorite.in_reply_to_status_id })
	if (status) {
	// This is our favorite, so the relevant bit.
	if (favorite.user.id === user.id) {
	status.favorited = true
	} else {
	status.fave_num += 1
	}
	}
	return status
	}

	const processors = {
	status: (status) => {
	addStatus(status, showImmediately)
	},
	edit: (status) => {
	addStatus(status, showImmediately)
	},
	retweet: (status) => {
	// RetweetedStatuses are never shown immediately
	const retweetedStatus = addStatus(status.retweeted_status, false, false)

	let retweet
	// If the retweeted status is already there, don't add the retweet
	// to the timeline.
	if (
	timeline &&
	find(timelineObject.statuses, (s) => {
	if (s.retweeted_status) {
	return (
	s.id === retweetedStatus.id \|\|
	s.retweeted_status.id === retweetedStatus.id
	)
	} else {
	return s.id === retweetedStatus.id
	}
	})
	) {
	// Already have it visible (either as the original or another RT), don't add to timeline, don't show.
	retweet = addStatus(status, false, false)
	} else {
	retweet = addStatus(status, showImmediately)
	}

	retweet.retweeted_status = retweetedStatus
	},
	favorite: (favorite) => {
	// Only update if this is a new favorite.
	// Ignore our own favorites because we get info about likes as response to like request
	if (!state.favorites.has(favorite.id)) {
	state.favorites.add(favorite.id)
	favoriteStatus(favorite)
	}
	},
	follow: () => {
	// NOOP, it is known status but we don't do anything about it for now
	},
	default: (unknown) => {
	- console.warn('unknown status type')
	- console.warn(unknown)
	+ console.warn('unknown status type', unknown)
	},
	}

	each(statuses, (status) => {
	const type = status.type
	const processor = processors[type] \|\| processors.default
	processor(status)
	})

	// Keep the visible statuses sorted
	if (timeline && !(timeline === 'bookmarks')) {
	sortTimeline(timelineObject)
	}
	}

	const removeStatus = (state, { timeline, userId }) => {
	const timelineObject = state.timelines[timeline]
	if (userId) {
	remove(timelineObject.statuses, { user: { id: userId } })
	remove(timelineObject.visibleStatuses, { user: { id: userId } })
	timelineObject.minVisibleId =
	timelineObject.visibleStatuses.length > 0
	? last(timelineObject.visibleStatuses).id
	: 0
	timelineObject.maxId =
	timelineObject.statuses.length > 0 ? first(timelineObject.statuses).id : 0
	}
	}

	export const mutations = {
	addNewStatuses,
	removeStatus,
	showNewStatuses(state, { timeline }) {
	const oldTimeline = state.timelines[timeline]

	oldTimeline.newStatusCount = 0
	oldTimeline.visibleStatuses = slice(oldTimeline.statuses, 0, 50)
	oldTimeline.minVisibleId = last(oldTimeline.visibleStatuses).id
	oldTimeline.minId = oldTimeline.minVisibleId
	oldTimeline.visibleStatusesObject = {}
	each(oldTimeline.visibleStatuses, (status) => {
	oldTimeline.visibleStatusesObject[status.id] = status
	})
	},
	resetStatuses(state) {
	const emptyState = defaultState()
	Object.entries(emptyState).forEach(([key, value]) => {
	state[key] = value
	})
	},
	clearTimeline(state, { timeline, excludeUserId = false }) {
	const userId = excludeUserId ? state.timelines[timeline].userId : undefined
	state.timelines[timeline] = emptyTl(userId)
	},
	setFavorited(state, { status, value }) {
	const newStatus = state.allStatusesObject[status.id]

	if (newStatus.favorited !== value) {
	if (value) {
	newStatus.fave_num++
	} else {
	newStatus.fave_num--
	}
	}

	newStatus.favorited = value
	},
	setFavoritedConfirm(state, { status, user }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.favorited = status.favorited
	newStatus.fave_num = status.fave_num
	const index = findIndex(newStatus.favoritedBy, { id: user.id })
	if (index !== -1 && !newStatus.favorited) {
	newStatus.favoritedBy.splice(index, 1)
	} else if (index === -1 && newStatus.favorited) {
	newStatus.favoritedBy.push(user)
	}
	},
	setMutedStatus(state, status) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.thread_muted = status.thread_muted

	if (newStatus.thread_muted !== undefined) {
	state.conversationsObject[newStatus.statusnet_conversation_id].forEach(
	(status) => {
	status.thread_muted = newStatus.thread_muted
	},
	)
	}
	},
	setRetweeted(state, { status, value }) {
	const newStatus = state.allStatusesObject[status.id]

	if (newStatus.repeated !== value) {
	if (value) {
	newStatus.repeat_num++
	} else {
	newStatus.repeat_num--
	}
	}

	newStatus.repeated = value
	},
	setRetweetedConfirm(state, { status, user }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.repeated = status.repeated
	newStatus.repeat_num = status.repeat_num
	const index = findIndex(newStatus.rebloggedBy, { id: user.id })
	if (index !== -1 && !newStatus.repeated) {
	newStatus.rebloggedBy.splice(index, 1)
	} else if (index === -1 && newStatus.repeated) {
	newStatus.rebloggedBy.push(user)
	}
	},
	setBookmarked(state, { status, value }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.bookmarked = value
	newStatus.bookmark_folder_id = status.bookmark_folder_id
	},
	setBookmarkedConfirm(state, { status }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.bookmarked = status.bookmarked
	if (status.pleroma)
	newStatus.bookmark_folder_id = status.pleroma.bookmark_folder
	},
	setDeleted(state, { status }) {
	const newStatus = state.allStatusesObject[status.id]
	if (newStatus) newStatus.deleted = true
	},
	setManyDeleted(state, condition) {
	Object.values(state.allStatusesObject).forEach((status) => {
	if (condition(status)) {
	status.deleted = true
	}
	})
	},
	setLoading(state, { timeline, value }) {
	state.timelines[timeline].loading = value
	},
	setNsfw(state, { id, nsfw }) {
	const newStatus = state.allStatusesObject[id]
	newStatus.nsfw = nsfw
	},
	queueFlush(state, { timeline, id }) {
	state.timelines[timeline].flushMarker = id
	},
	queueFlushAll(state) {
	Object.keys(state.timelines).forEach((timeline) => {
	state.timelines[timeline].flushMarker = state.timelines[timeline].maxId
	})
	},
	addRepeats(state, { id, rebloggedByUsers, currentUser }) {
	const newStatus = state.allStatusesObject[id]
	newStatus.rebloggedBy = rebloggedByUsers.filter((_) => _)
	// repeats stats can be incorrect based on polling condition, let's update them using the most recent data
	newStatus.repeat_num = newStatus.rebloggedBy.length
	newStatus.repeated = !!newStatus.rebloggedBy.find(
	({ id }) => currentUser.id === id,
	)
	},
	addFavs(state, { id, favoritedByUsers, currentUser }) {
	const newStatus = state.allStatusesObject[id]
	newStatus.favoritedBy = favoritedByUsers.filter((_) => _)
	// favorites stats can be incorrect based on polling condition, let's update them using the most recent data
	newStatus.fave_num = newStatus.favoritedBy.length
	newStatus.favorited = !!newStatus.favoritedBy.find(
	({ id }) => currentUser.id === id,
	)
	},
	addEmojiReactionsBy(state, { id, emojiReactions }) {
	const status = state.allStatusesObject[id]
	status.emoji_reactions = emojiReactions
	},
	addOwnReaction(state, { id, emoji, currentUser }) {
	const status = state.allStatusesObject[id]
	const reactionIndex = findIndex(status.emoji_reactions, { name: emoji })
	const reaction = status.emoji_reactions[reactionIndex] \|\| {
	name: emoji,
	count: 0,
	accounts: [],
	}

	const newReaction = {
	...reaction,
	count: reaction.count + 1,
	me: true,
	accounts: [...reaction.accounts, currentUser],
	}

	// Update count of existing reaction if it exists, otherwise append at the end
	if (reactionIndex >= 0) {
	status.emoji_reactions[reactionIndex] = newReaction
	} else {
	status.emoji_reactions = [...status.emoji_reactions, newReaction]
	}
	},
	removeOwnReaction(state, { id, emoji, currentUser }) {
	const status = state.allStatusesObject[id]
	const reactionIndex = findIndex(status.emoji_reactions, { name: emoji })
	if (reactionIndex < 0) return

	const reaction = status.emoji_reactions[reactionIndex]
	const accounts = reaction.accounts \|\| []

	const newReaction = {
	...reaction,
	count: reaction.count - 1,
	me: false,
	accounts: accounts.filter((acc) => acc.id !== currentUser.id),
	}

	if (newReaction.count > 0) {
	status.emoji_reactions[reactionIndex] = newReaction
	} else {
	status.emoji_reactions = status.emoji_reactions.filter(
	(r) => r.name !== emoji,
	)
	}
	},
	updateStatusWithPoll(state, { id, poll }) {
	const status = state.allStatusesObject[id]
	status.poll = poll
	},
	setVirtualHeight(state, { statusId, height }) {
	state.allStatusesObject[statusId].virtualHeight = height
	},
	}

	const statuses = {
	state: defaultState(),
	actions: {
	addNewStatuses(
	{ rootState, commit },
	{
	statuses,
	showImmediately = false,
	timeline = false,
	noIdUpdate = false,
	userId,
	pagination,
	},
	) {
	commit('addNewStatuses', {
	statuses,
	showImmediately,
	timeline,
	noIdUpdate,
	user: rootState.users.currentUser,
	userId,
	pagination,
	})
	},
	fetchStatus({ rootState, dispatch }, id) {
	return rootState.api.backendInteractor
	.fetchStatus({ id })
	.then((status) => dispatch('addNewStatuses', { statuses: [status] }))
	},
	fetchStatusSource({ rootState }, status) {
	return apiService.fetchStatusSource({
	id: status.id,
	credentials: rootState.users.currentUser.credentials,
	})
	},
	fetchStatusHistory(_, status) {
	return apiService.fetchStatusHistory({ status })
	},
	deleteStatus({ rootState, commit }, status) {
	apiService
	.deleteStatus({
	id: status.id,
	credentials: rootState.users.currentUser.credentials,
	})
	.then(() => {
	commit('setDeleted', { status })
	})
	.catch((e) => {
	useInterfaceStore().pushGlobalNotice({
	level: 'error',
	messageKey: 'status.delete_error',
	messageArgs: [e.message],
	timeout: 5000,
	})
	})
	},
	deleteStatusById({ rootState, commit }, id) {
	const status = rootState.statuses.allStatusesObject[id]
	commit('setDeleted', { status })
	},
	markStatusesAsDeleted({ commit }, condition) {
	commit('setManyDeleted', condition)
	},
	favorite({ rootState, commit }, status) {
	// Optimistic favoriting...
	commit('setFavorited', { status, value: true })
	rootState.api.backendInteractor
	.favorite({ id: status.id })
	.then((status) =>
	commit('setFavoritedConfirm', {
	status,
	user: rootState.users.currentUser,
	}),
	)
	},
	unfavorite({ rootState, commit }, status) {
	// Optimistic unfavoriting...
	commit('setFavorited', { status, value: false })
	rootState.api.backendInteractor
	.unfavorite({ id: status.id })
	.then((status) =>
	commit('setFavoritedConfirm', {
	status,
	user: rootState.users.currentUser,
	}),
	)
	},
	fetchPinnedStatuses({ rootState, dispatch }, userId) {
	rootState.api.backendInteractor
	.fetchPinnedStatuses({ id: userId })
	.then((statuses) =>
	dispatch('addNewStatuses', {
	statuses,
	timeline: 'user',
	userId,
	showImmediately: true,
	noIdUpdate: true,
	}),
	)
	},
	pinStatus({ rootState, dispatch }, statusId) {
	return rootState.api.backendInteractor
	.pinOwnStatus({ id: statusId })
	.then((status) => dispatch('addNewStatuses', { statuses: [status] }))
	},
	unpinStatus({ rootState, dispatch }, statusId) {
	rootState.api.backendInteractor
	.unpinOwnStatus({ id: statusId })
	.then((status) => dispatch('addNewStatuses', { statuses: [status] }))
	},
	muteConversation({ rootState, commit }, { id: statusId }) {
	return rootState.api.backendInteractor
	.muteConversation({ id: statusId })
	.then((status) => commit('setMutedStatus', status))
	},
	unmuteConversation({ rootState, commit }, { id: statusId }) {
	return rootState.api.backendInteractor
	.unmuteConversation({ id: statusId })
	.then((status) => commit('setMutedStatus', status))
	},
	retweet({ rootState, commit }, status) {
	// Optimistic retweeting...
	commit('setRetweeted', { status, value: true })
	rootState.api.backendInteractor
	.retweet({ id: status.id })
	.then((status) =>
	commit('setRetweetedConfirm', {
	status: status.retweeted_status,
	user: rootState.users.currentUser,
	}),
	)
	},
	unretweet({ rootState, commit }, status) {
	// Optimistic unretweeting...
	commit('setRetweeted', { status, value: false })
	rootState.api.backendInteractor
	.unretweet({ id: status.id })
	.then((status) =>
	commit('setRetweetedConfirm', {
	status,
	user: rootState.users.currentUser,
	}),
	)
	},
	bookmark({ rootState, commit }, status) {
	commit('setBookmarked', { status, value: true })
	rootState.api.backendInteractor
	.bookmarkStatus({ id: status.id, folder_id: status.bookmark_folder_id })
	.then((status) => {
	commit('setBookmarkedConfirm', { status })
	})
	},
	unbookmark({ rootState, commit }, status) {
	commit('setBookmarked', { status, value: false })
	rootState.api.backendInteractor
	.unbookmarkStatus({ id: status.id })
	.then((status) => {
	commit('setBookmarkedConfirm', { status })
	})
	},
	queueFlush({ commit }, { timeline, id }) {
	commit('queueFlush', { timeline, id })
	},
	queueFlushAll({ commit }) {
	commit('queueFlushAll')
	},
	fetchFavsAndRepeats({ rootState, commit }, id) {
	Promise.all([
	rootState.api.backendInteractor.fetchFavoritedByUsers({ id }),
	rootState.api.backendInteractor.fetchRebloggedByUsers({ id }),
	]).then(([favoritedByUsers, rebloggedByUsers]) => {
	commit('addFavs', {
	id,
	favoritedByUsers,
	currentUser: rootState.users.currentUser,
	})
	commit('addRepeats', {
	id,
	rebloggedByUsers,
	currentUser: rootState.users.currentUser,
	})
	})
	},
	reactWithEmoji({ rootState, dispatch, commit }, { id, emoji }) {
	const currentUser = rootState.users.currentUser
	if (!currentUser) return

	commit('addOwnReaction', { id, emoji, currentUser })
	rootState.api.backendInteractor.reactWithEmoji({ id, emoji }).then(() => {
	dispatch('fetchEmojiReactionsBy', id)
	})
	},
	unreactWithEmoji({ rootState, dispatch, commit }, { id, emoji }) {
	const currentUser = rootState.users.currentUser
	if (!currentUser) return

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

	export default statuses
	diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
	index 62666d5f8e..0c5c82991f 100644
	--- a/src/services/theme_data/theme_data_3.service.js
	+++ b/src/services/theme_data/theme_data_3.service.js
	@@ -1,776 +1,780 @@
	import { brightness, convert } from 'chromatism'
	import sum from 'hash-sum'
	import { flattenDeep, sortBy } from 'lodash'

	import {
	alphaBlend,
	getTextColor,
	mixrgb,
	relativeLuminance,
	rgba2css,
	} from '../color_convert/color_convert.js'
	import { deserializeShadow } from './iss_deserializer.js'
	import {
	findRules,
	genericRuleToSelector,
	getAllPossibleCombinations,
	normalizeCombination,
	unroll,
	} from './iss_utils.js'
	import {
	colorFunctions,
	process,
	shadowFunctions,
	} from './theme3_slot_functions.js'

	// Ensuring the order of components
	const components = {
	Root: null,
	Text: null,
	FunText: null,
	Link: null,
	Icon: null,
	Border: null,
	PanelHeader: null,
	Panel: null,
	Chat: null,
	ChatMessage: null,
	Button: null,
	}

	export const findShadow = (shadows, { dynamicVars, staticVars }) => {
	return (shadows \|\| []).map((shadow) => {
	let targetShadow
	if (typeof shadow === 'string') {
	if (shadow.startsWith('$')) {
	targetShadow = process(
	shadow,
	shadowFunctions,
	{ findColor, findShadow },
	{ dynamicVars, staticVars },
	)
	} else if (shadow.startsWith('--')) {
	// modifiers are completely unsupported here
	const variableSlot = shadow.substring(2)
	return findShadow(staticVars[variableSlot], { dynamicVars, staticVars })
	} else {
	targetShadow = deserializeShadow(shadow)
	}
	} else {
	targetShadow = shadow
	}

	const shadowArray = Array.isArray(targetShadow)
	? targetShadow
	: [targetShadow]
	return shadowArray.map((s) => ({
	...s,
	color: findColor(s.color, { dynamicVars, staticVars }),
	}))
	})
	}

	export const findColor = (color, { dynamicVars, staticVars }) => {
	try {
	if (
	typeof color !== 'string' \|\|
	(!color.startsWith('--') && !color.startsWith('$'))
	)
	return color
	let targetColor = null
	if (color.startsWith('--')) {
	// Modifier support is pretty much for v2 themes only
	const [variable, modifier] = color.split(/,/g).map((str) => str.trim())
	const variableSlot = variable.substring(2)
	if (variableSlot === 'stack') {
	const { r, g, b } = dynamicVars.stacked
	targetColor = { r, g, b }
	} else if (variableSlot.startsWith('parent')) {
	if (variableSlot === 'parent') {
	const { r, g, b } = dynamicVars.lowerLevelBackground ?? {}
	targetColor = { r, g, b }
	} else {
	const virtualSlot = variableSlot.replace(/^parent/, '')
	targetColor = convert(
	dynamicVars.lowerLevelVirtualDirectivesRaw[virtualSlot],
	).rgb
	}
	} else {
	const staticVar = staticVars[variableSlot]
	const dynamicVar = dynamicVars[variableSlot]
	if (!staticVar && !dynamicVar) {
	- console.warn(dynamicVars, variableSlot, dynamicVars[variableSlot])
	- console.warn(`Couldn't find variable "${variableSlot}", falling back to magenta. Variables are:
	+ console.warn(
	+ `Couldn't find variable "${variableSlot}", falling back to magenta. Variables are:
	Static:
	${JSON.stringify(staticVars, null, 2)}
	Dynamic:
	-${JSON.stringify(dynamicVars, null, 2)}`)
	+${JSON.stringify(dynamicVars, null, 2)}`,
	+ dynamicVars,
	+ variableSlot,
	+ dynamicVars[variableSlot],
	+ )
	}
	targetColor = convert(staticVar ?? dynamicVar ?? '#FF00FF').rgb
	}

	if (modifier) {
	const effectiveBackground =
	dynamicVars.lowerLevelBackground ?? targetColor
	const isLightOnDark =
	relativeLuminance(convert(effectiveBackground).rgb) < 0.5
	const mod = isLightOnDark ? 1 : -1
	targetColor = brightness(
	Number.parseFloat(modifier) * mod,
	targetColor,
	).rgb
	}
	}

	if (color.startsWith('$')) {
	try {
	targetColor = process(
	color,
	colorFunctions,
	{ findColor },
	{ dynamicVars, staticVars },
	)
	} catch (e) {
	console.error(
	'Failure executing color function',
	e,
	'\n Function: ' + color,
	)
	targetColor = '#FF00FF'
	}
	}
	// Color references other color
	return targetColor
	} catch (e) {
	throw new Error(`Couldn't find color "${color}", variables are:
	Static:
	${JSON.stringify(staticVars, null, 2)}
	Dynamic:
	${JSON.stringify(dynamicVars, null, 2)}\nError: ${e}`)
	}
	}

	const getTextColorAlpha = (
	directives,
	intendedTextColor,
	dynamicVars,
	staticVars,
	) => {
	const opacity = directives.textOpacity
	const backgroundColor = convert(dynamicVars.lowerLevelBackground).rgb
	const textColor = convert(
	findColor(intendedTextColor, { dynamicVars, staticVars }),
	).rgb
	if (opacity === null \|\| opacity === undefined \|\| opacity >= 1) {
	return convert(textColor).hex
	}
	if (opacity === 0) {
	return convert(backgroundColor).hex
	}
	const opacityMode = directives.textOpacityMode
	switch (opacityMode) {
	case 'fake':
	return convert(alphaBlend(textColor, opacity, backgroundColor)).hex
	case 'mixrgb':
	return convert(mixrgb(backgroundColor, textColor)).hex
	default:
	return rgba2css({ a: opacity, ...textColor })
	}
	}

	// Loading all style.js[on] files dynamically
	const componentsContext = import.meta.glob(
	['/src/*/.style.js', '/src/*/.style.json'],
	{ eager: true },
	)
	Object.keys(componentsContext).forEach((key) => {
	const component = componentsContext[key].default
	if (components[component.name] != null) {
	console.warn(
	`Component in file ${key} is trying to override existing component ${component.name}! You have collisions/duplicates!`,
	)
	}
	components[component.name] = component
	})

	Object.keys(components).forEach((key) => {
	if (key === 'Root') return
	components.Root.validInnerComponents =
	components.Root.validInnerComponents \|\| []
	components.Root.validInnerComponents.push(key)
	})

	Object.keys(components).forEach((key) => {
	const component = components[key]
	const { validInnerComponents = [] } = component
	validInnerComponents.forEach((inner) => {
	const child = components[inner]
	component.possibleChildren = component.possibleChildren \|\| []
	component.possibleChildren.push(child)
	child.possibleParents = child.possibleParents \|\| []
	child.possibleParents.push(component)
	})
	})

	const engineChecksum = sum(components)

	const ruleToSelector = genericRuleToSelector(components)

	export const getEngineChecksum = () => engineChecksum

	/**
	* Initializes and compiles the theme according to the ruleset
	*
	* @param {Object[]} inputRuleset - set of rules to compile theme against. Acts as an override to
	* component default rulesets
	* @param {string} ultimateBackgroundColor - Color that will be the "final" background for
	* calculating contrast ratios and making text automatically accessible. Really used for cases when
	* stuff is transparent.
	* @param {boolean} debug - print out debug information in console, mostly just performance stuff
	* @param {boolean} liteMode - use validInnerComponentsLite instead of validInnerComponents, meant to
	* generatate theme previews and such that need to be compiled faster and don't require a lot of other
	* components present in "normal" mode
	* @param {boolean} onlyNormalState - only use components 'normal' states, meant for generating theme
	* previews since states are the biggest factor for compilation time and are completely unnecessary
	* when previewing multiple themes at same time
	*/
	export const init = ({
	inputRuleset,
	ultimateBackgroundColor,
	debug = false,
	liteMode = false,
	editMode = false,
	onlyNormalState = false,
	initialStaticVars = {},
	}) => {
	const rootComponentName = 'Root'
	if (!inputRuleset) throw new Error('Ruleset is null or undefined!')
	const staticVars = { ...initialStaticVars }
	const stacked = {}
	const computed = {}

	const rulesetUnsorted = [
	...Object.values(components)
	.map((c) =>
	(c.defaultRules \|\| []).map((r) => ({
	source: 'Built-in',
	component: c.name,
	...r,
	})),
	)
	.reduce((acc, arr) => [...acc, ...arr], []),
	...inputRuleset,
	].map((rule) => {
	normalizeCombination(rule)
	let currentParent = rule.parent
	while (currentParent) {
	normalizeCombination(currentParent)
	currentParent = currentParent.parent
	}

	return rule
	})

	const ruleset = rulesetUnsorted
	.map((data, index) => ({ data, index }))
	.toSorted(({ data: a, index: ai }, { data: b, index: bi }) => {
	const parentsA = unroll(a).length
	const parentsB = unroll(b).length

	let aScore = 0
	let bScore = 0

	aScore += parentsA * 1000
	bScore += parentsB * 1000

	aScore += a.variant !== 'normal' ? 100 : 0
	bScore += b.variant !== 'normal' ? 100 : 0

	aScore += a.state.filter((x) => x !== 'normal').length * 1000
	bScore += b.state.filter((x) => x !== 'normal').length * 1000

	aScore += a.component === 'Text' ? 1 : 0
	bScore += b.component === 'Text' ? 1 : 0

	// Debug
	a._specificityScore = aScore
	b._specificityScore = bScore

	if (aScore === bScore) {
	return ai - bi
	}
	return aScore - bScore
	})
	.map(({ data }) => data)

	if (!ultimateBackgroundColor) {
	console.warn(
	'No ultimate background color provided, falling back to panel color',
	)
	const rootRule = ruleset.findLast(
	(x) => x.component === 'Root' && x.directives?.['--bg'],
	)
	ultimateBackgroundColor = rootRule.directives['--bg'].split('\|')[1].trim()
	}

	const virtualComponents = new Set(
	Object.values(components)
	.filter((c) => c.virtual)
	.map((c) => c.name),
	)
	const transparentComponents = new Set(
	Object.values(components)
	.filter((c) => c.transparent)
	.map((c) => c.name),
	)
	const nonEditableComponents = new Set(
	Object.values(components)
	.filter((c) => c.notEditable)
	.map((c) => c.name),
	)
	const extraCompileComponents = new Set([])

	Object.values(components).forEach((component) => {
	const relevantRules = ruleset.filter((r) => r.component === component.name)
	const backgrounds = relevantRules
	.map((r) => r.directives.background)
	.filter((x) => x)
	const opacities = relevantRules
	.map((r) => r.directives.opacity)
	.filter((x) => x)
	if (
	backgrounds.some((x) => x.match(/--parent/)) \|\|
	opacities.some((x) => x != null && x < 1)
	) {
	extraCompileComponents.add(component.name)
	}
	})

	const processCombination = (combination) => {
	try {
	const selector = ruleToSelector(combination, true)
	const cssSelector = ruleToSelector(combination)

	const parentSelector = selector.split(/ /g).slice(0, -1).join(' ')
	const soloSelector = selector.split(/ /g).slice(-1)[0]

	const lowerLevelSelector = parentSelector
	let lowerLevelBackground = computed[lowerLevelSelector]?.background
	if (editMode && !lowerLevelBackground) {
	// FIXME hack for editor until it supports handling component backgrounds
	lowerLevelBackground = '#00FFFF'
	}
	const lowerLevelVirtualDirectives =
	computed[lowerLevelSelector]?.virtualDirectives
	const lowerLevelVirtualDirectivesRaw =
	computed[lowerLevelSelector]?.virtualDirectivesRaw

	const dynamicVars = computed[selector] \|\| {
	lowerLevelSelector,
	lowerLevelBackground,
	lowerLevelVirtualDirectives,
	lowerLevelVirtualDirectivesRaw,
	}

	// Inheriting all of the applicable rules
	const existingRules = ruleset.filter(findRules(combination))
	const computedDirectives = existingRules
	.map((r) => r.directives)
	.reduce((acc, directives) => ({ ...acc, ...directives }), {})
	const computedRule = {
	...combination,
	directives: computedDirectives,
	}

	computed[selector] = computed[selector] \|\| {}
	computed[selector].computedRule = computedRule
	computed[selector].dynamicVars = dynamicVars

	// avoid putting more stuff into actual CSS
	computed[selector].virtualDirectives = {}
	// but still be able to access it i.e. from --parent
	computed[selector].virtualDirectivesRaw =
	computed[lowerLevelSelector]?.virtualDirectivesRaw \|\| {}

	if (virtualComponents.has(combination.component)) {
	const virtualName = [
	'--',
	combination.component.toLowerCase(),
	combination.variant === 'normal'
	? ''
	: combination.variant[0].toUpperCase() +
	combination.variant.slice(1).toLowerCase(),
	...sortBy(combination.state.filter((x) => x !== 'normal')).map(
	(state) => state[0].toUpperCase() + state.slice(1).toLowerCase(),
	),
	].join('')

	let inheritedTextColor = computedDirectives.textColor
	let inheritedTextAuto = computedDirectives.textAuto
	let inheritedTextOpacity = computedDirectives.textOpacity
	let inheritedTextOpacityMode = computedDirectives.textOpacityMode
	const lowerLevelTextSelector = [
	...selector.split(/ /g).slice(0, -1),
	soloSelector,
	].join(' ')
	const lowerLevelTextRule = computed[lowerLevelTextSelector]

	if (
	inheritedTextColor == null \|\|
	inheritedTextOpacity == null \|\|
	inheritedTextOpacityMode == null
	) {
	inheritedTextColor =
	computedDirectives.textColor ?? lowerLevelTextRule.textColor
	inheritedTextAuto =
	computedDirectives.textAuto ?? lowerLevelTextRule.textAuto
	inheritedTextOpacity =
	computedDirectives.textOpacity ?? lowerLevelTextRule.textOpacity
	inheritedTextOpacityMode =
	computedDirectives.textOpacityMode ??
	lowerLevelTextRule.textOpacityMode
	}

	const newTextRule = {
	...computedRule,
	directives: {
	...computedRule.directives,
	textColor: inheritedTextColor,
	textAuto: inheritedTextAuto ?? 'preserve',
	textOpacity: inheritedTextOpacity,
	textOpacityMode: inheritedTextOpacityMode,
	},
	}

	dynamicVars.inheritedBackground = lowerLevelBackground
	dynamicVars.stacked = convert(stacked[lowerLevelSelector]).rgb

	const intendedTextColor = convert(
	findColor(inheritedTextColor, { dynamicVars, staticVars }),
	).rgb
	const textColor =
	newTextRule.directives.textAuto === 'no-auto'
	? intendedTextColor
	: getTextColor(
	convert(stacked[lowerLevelSelector]).rgb,
	intendedTextColor,
	newTextRule.directives.textAuto === 'preserve',
	)
	const virtualDirectives = {
	...(computed[lowerLevelSelector].virtualDirectives \|\| {}),
	}
	const virtualDirectivesRaw = {
	...(computed[lowerLevelSelector].virtualDirectivesRaw \|\| {}),
	}

	// Storing color data in lower layer to use as custom css properties
	virtualDirectives[virtualName] = getTextColorAlpha(
	newTextRule.directives,
	textColor,
	dynamicVars,
	)
	virtualDirectivesRaw[virtualName] = textColor

	computed[lowerLevelSelector].virtualDirectives = virtualDirectives
	computed[lowerLevelSelector].virtualDirectivesRaw = virtualDirectivesRaw

	return {
	dynamicVars,
	selector: cssSelector.split(/ /g).slice(0, -1).join(' '),
	...combination,
	directives: {},
	virtualDirectives,
	virtualDirectivesRaw,
	}
	} else {
	computed[selector] = computed[selector] \|\| {}

	// TODO: DEFAULT TEXT COLOR
	const lowerLevelStackedBackground =
	stacked[lowerLevelSelector] \|\| convert(ultimateBackgroundColor).rgb

	if (computedDirectives.background) {
	let inheritRule = null
	const variantRules = ruleset.filter(
	findRules({
	component: combination.component,
	variant: combination.variant,
	parent: combination.parent,
	}),
	)
	const lastVariantRule = variantRules[variantRules.length - 1]
	const lastVariantSelector = ruleToSelector(lastVariantRule, true)

	if (lastVariantRule && lastVariantSelector !== selector) {
	inheritRule = lastVariantRule
	} else {
	const normalRules = ruleset.filter(
	findRules({
	component: combination.component,
	parent: combination.parent,
	}),
	)
	const lastNormalRule = normalRules[normalRules.length - 1]
	inheritRule = lastNormalRule
	}

	const inheritSelector = ruleToSelector(
	{ ...inheritRule, parent: combination.parent },
	true,
	)
	const inheritedBackground = computed[inheritSelector].background

	dynamicVars.inheritedBackground = inheritedBackground

	const rgb = convert(
	findColor(computedDirectives.background, {
	dynamicVars,
	staticVars,
	}),
	).rgb

	if (!stacked[selector]) {
	let blend
	const alpha = computedDirectives.opacity ?? 1
	if (alpha >= 1) {
	blend = rgb
	} else if (alpha <= 0) {
	blend = lowerLevelStackedBackground
	} else {
	blend = alphaBlend(
	rgb,
	computedDirectives.opacity,
	lowerLevelStackedBackground,
	)
	}
	stacked[selector] = blend
	computed[selector].background = {
	...rgb,
	a: computedDirectives.opacity ?? 1,
	}
	}
	}

	if (computedDirectives.shadow) {
	dynamicVars.shadow = flattenDeep(
	findShadow(flattenDeep(computedDirectives.shadow), {
	dynamicVars,
	staticVars,
	}),
	)
	}

	if (!stacked[selector]) {
	computedDirectives.background = 'transparent'
	computedDirectives.opacity = 0
	stacked[selector] = lowerLevelStackedBackground
	computed[selector].background = {
	...lowerLevelStackedBackground,
	a: 0,
	}
	}

	dynamicVars.stacked = stacked[selector]
	dynamicVars.background = computed[selector].background

	const dynamicSlots = Object.entries(computedDirectives).filter(([k]) =>
	k.startsWith('--'),
	)

	dynamicSlots.forEach(([k, v]) => {
	const [type, value] = v.split('\|').map((x) => x.trim()) // woah, Extreme!
	switch (type) {
	case 'color': {
	const color = findColor(value, { dynamicVars, staticVars })
	dynamicVars[k] = color
	if (combination.component === rootComponentName) {
	staticVars[k.substring(2)] = color
	}
	break
	}
	case 'shadow': {
	const shadow = value
	.split(/,/g)
	.map((s) => s.trim())
	.filter((x) => x)
	dynamicVars[k] = shadow
	if (combination.component === rootComponentName) {
	staticVars[k.substring(2)] = shadow
	}
	break
	}
	case 'generic': {
	dynamicVars[k] = value
	if (combination.component === rootComponentName) {
	staticVars[k.substring(2)] = value
	}
	break
	}
	}
	})

	const rule = {
	dynamicVars,
	selector: cssSelector,
	...combination,
	directives: computedDirectives,
	}

	return rule
	}
	} catch (e) {
	const { component, variant, state } = combination
	throw new Error(
	`Error processing combination ${component}.${variant}:${state.join(':')}: ${e}`,
	)
	}
	}

	const processInnerComponent = (component, parent) => {
	const combinations = []
	const { states: originalStates = {}, variants: originalVariants = {} } =
	component

	let validInnerComponents
	if (editMode) {
	const temp =
	component.validInnerComponentsLite \|\|
	component.validInnerComponents \|\|
	[]
	validInnerComponents = temp.filter(
	(c) => virtualComponents.has(c) && !nonEditableComponents.has(c),
	)
	} else if (liteMode) {
	validInnerComponents =
	component.validInnerComponentsLite \|\|
	component.validInnerComponents \|\|
	[]
	} else if (
	component.name === 'Root' \|\|
	component.states != null \|\|
	component.background?.includes('--parent')
	) {
	validInnerComponents = component.validInnerComponents \|\| []
	} else {
	validInnerComponents =
	component.validInnerComponents?.filter(
	(c) =>
	virtualComponents.has(c) \|\|
	transparentComponents.has(c) \|\|
	extraCompileComponents.has(c),
	) \|\| []
	}

	// Normalizing states and variants to always include "normal"
	const states = { normal: '', ...originalStates }
	const variants = { normal: '', ...originalVariants }
	const innerComponents = validInnerComponents.map((name) => {
	const result = components[name]
	if (result === undefined)
	console.error(
	`Component ${component.name} references a component ${name} which does not exist!`,
	)
	return result
	})

	// Optimization: we only really need combinations without "normal" because all states implicitly have it
	const permutationStateKeys = Object.keys(states).filter(
	(s) => s !== 'normal',
	)
	const stateCombinations =
	onlyNormalState && !virtualComponents.has(component.name)
	? [['normal']]
	: [
	['normal'],
	...getAllPossibleCombinations(permutationStateKeys)
	.map((combination) => ['normal', ...combination])
	.filter((combo) => {
	// Optimization: filter out some hard-coded combinations that don't make sense
	if (combo.indexOf('disabled') >= 0) {
	return !(
	combo.indexOf('hover') >= 0 \|\|
	combo.indexOf('focused') >= 0 \|\|
	combo.indexOf('pressed') >= 0
	)
	}
	return true
	}),
	]

	const stateVariantCombination = Object.keys(variants)
	.map((variant) => {
	return stateCombinations.map((state) => ({ variant, state }))
	})
	.reduce((acc, x) => [...acc, ...x], [])

	stateVariantCombination.forEach((combination) => {
	combination.component = component.name
	combination.lazy = component.lazy \|\| parent?.lazy
	combination.parent = parent
	if (!liteMode && combination.state.indexOf('hover') >= 0) {
	combination.lazy = true
	}

	if (
	!liteMode &&
	parent?.component !== 'Root' &&
	!virtualComponents.has(component.name) &&
	!transparentComponents.has(component.name) &&
	extraCompileComponents.has(component.name)
	) {
	combination.lazy = true
	}

	combinations.push(combination)

	innerComponents.forEach((innerComponent) => {
	combinations.push(...processInnerComponent(innerComponent, combination))
	})
	})

	return combinations
	}

	const t0 = performance.now()
	const combinations = processInnerComponent(
	components[rootComponentName] ?? components.Root,
	)
	const t1 = performance.now()
	if (debug) {
	console.debug('Tree traveral took ' + (t1 - t0) + ' ms')
	}

	const result = combinations
	.map((combination) => {
	if (combination.lazy) {
	return async () => processCombination(combination)
	} else {
	return processCombination(combination)
	}
	})
	.filter((x) => x)
	const t2 = performance.now()
	if (debug) {
	console.debug('Eager processing took ' + (t2 - t1) + ' ms')
	}

	// optimization to traverse big-ass array only once instead of twice
	const eager = []
	const lazy = []

	result.forEach((x) => {
	if (typeof x === 'function') {
	lazy.push(x)
	} else {
	eager.push(x)
	}
	})

	return {
	lazy,
	eager,
	staticVars,
	engineChecksum,
	themeChecksum: sum([lazy, eager]),
	}
	}

File Metadata

Mime Type: text/x-diff
Expires: Mon, Nov 2, 1:43 AM (11 h, 41 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1803493
Default Alt Text: (190 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions