No OneTemporary
Actions

Size

84 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
	index 7dc9e91bfc..33ead7c160 100644
	--- a/src/components/settings_modal/admin_tabs/emoji_tab.js
	+++ b/src/components/settings_modal/admin_tabs/emoji_tab.js
	@@ -1,318 +1,318 @@
	import Checkbox from 'components/checkbox/checkbox.vue'
	import Popover from 'components/popover/popover.vue'
	import Select from 'components/select/select.vue'
	import StillImage from 'components/still-image/still-image.vue'
	import { clone } from 'lodash'
	import { defineAsyncComponent } from 'vue'

	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	import EmojiEditingPopover from '../helpers/emoji_editing_popover.vue'
	import ModifiedIndicator from '../helpers/modified_indicator.vue'
	import SharedComputedObject from '../helpers/shared_computed_object.js'
	import StringSetting from '../helpers/string_setting.vue'

	import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
	import { useEmojiStore } from 'src/stores/emoji.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInterfaceStore } from 'src/stores/interface.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faArrowsRotate,
	faDownload,
	faFolderOpen,
	faServer,
	} from '@fortawesome/free-solid-svg-icons'

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

	const EmojiTab = {
	components: {
	TabSwitcher,
	StringSetting,
	Checkbox,
	StillImage,
	Select,
	Popover,
	ConfirmModal: defineAsyncComponent(
	() => import('src/components/confirm_modal/confirm_modal.vue'),
	),

	ModifiedIndicator,
	EmojiEditingPopover,
	},

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

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

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

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

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

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

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

	createEmojiPack() {
	useAdminSettingsStore()
	.createEmojiPack({ name: this.newPackName })
	.then((resp) => resp.json())
	.then((resp) => {
	if (resp === 'ok') {
	return this.refreshPackList()
	} else {
	this.displayError(resp.error)
	- return Promise.reject(resp)
	+ throw new Error(resp)
	}
	})
	.then(() => {
	this.packName = this.newPackName
	this.newPackName = ''
	})
	},
	deleteEmojiPack() {
	useAdminSettingsStore()
	.deleteEmojiPack({ name: this.packName })
	.then((resp) => resp.json())
	.then((resp) => {
	if (resp === 'ok') {
	return this.refreshPackList()
	} else {
	this.displayError(resp.error)
	- return Promise.reject(resp)
	+ throw new Error(resp)
	}
	})
	.then(() => {
	delete this.editedMetadata[this.packName]

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

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

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

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

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

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

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

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

	useAdminSettingsStore()
	.downloadRemoteEmojiPack({
	instance: this.pack.remote.instance,
	packName: this.pack.remote.baseName,
	as: this.remotePackDownloadAs,
	})
	.then((data) => data.json())
	.then((resp) => {
	if (resp === 'ok') {
	return this.refreshPackList()
	} else {
	this.displayError(resp.error)
	- return Promise.reject(resp)
	+ throw new Error(resp)
	}
	})
	.then(() => {
	this.packName = this.remotePackDownloadAs
	this.remotePackDownloadAs = ''
	})
	},
	downloadRemoteURLPack() {
	useAdminSettingsStore()
	.downloadRemoteEmojiPackZIP({
	url: this.remotePackURL,
	packName: this.newPackName,
	})
	.then((data) => data.json())
	.then((resp) => {
	if (resp === 'ok') {
	return this.refreshPackList()
	} else {
	this.displayError(resp.error)
	- return Promise.reject(resp)
	+ throw new Error(resp)
	}
	})
	.then(() => {
	this.packName = this.newPackName
	this.newPackName = ''
	this.remotePackURL = ''
	})
	},
	downloadRemoteFilePack() {
	useAdminSettingsStore()
	.downloadRemoteEmojiPackZIP({
	file: this.remotePackFile[0],
	packName: this.newPackName,
	})
	.then((data) => data.json())
	.then((resp) => {
	if (resp === 'ok') {
	return this.refreshPackList()
	} else {
	this.displayError(resp.error)
	- return Promise.reject(resp)
	+ throw new Error(resp)
	}
	})
	.then(() => {
	this.packName = this.newPackName
	this.newPackName = ''
	this.remotePackURL = ''
	})
	},

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

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

	export default EmojiTab
	diff --git a/src/components/settings_modal/helpers/emoji_editing_popover.vue b/src/components/settings_modal/helpers/emoji_editing_popover.vue
	index d3db657d30..0cd04f0538 100644
	--- a/src/components/settings_modal/helpers/emoji_editing_popover.vue
	+++ b/src/components/settings_modal/helpers/emoji_editing_popover.vue
	@@ -1,351 +1,351 @@
	<template>
	<Popover
	ref="emojiPopover"
	trigger="click"
	:placement="placement"
	bound-to-selector=".emoji-list"
	popover-class="emoji-tab-edit-popover popover-default"
	:bound-to="{ x: 'container' }"
	:offset="{ y: 5 }"
	:class="{'emoji-unsaved': isEdited}"
	>
	<template #trigger>
	<slot name="trigger" />
	</template>
	<template #content>
	<h3>
	{{ title }}
	</h3>

	<StillImage
	v-if="emojiPreview"
	class="emoji"
	:src="emojiPreview"
	/>
	<div
	v-else
	class="emoji"
	/>

	<div
	v-if="newUpload"
	class="emoji-tab-popover-new-upload"
	>
	<h4>{{ $t('admin_dash.emoji.emoji_source') }}</h4>

	<div class="emoji-tab-popover-input">
	<input
	type="file"
	accept="image/*"
	class="emoji-tab-popover-file input"
	@change="uploadFile = $event.target.files"
	>
	</div>
	<div class="emoji-tab-popover-input ">
	<input
	v-model="uploadURL"
	:placeholder="$t('admin_dash.emoji.upload_url')"
	class="emoji-data-input input"
	>
	</div>
	</div>

	<div>
	<div class="emoji-tab-popover-input">
	<label>
	{{ $t('admin_dash.emoji.shortcode') }}
	<input
	v-model="editedShortcode"
	class="emoji-data-input input"
	:placeholder="$t('admin_dash.emoji.new_shortcode')"
	>
	</label>
	</div>

	<div class="emoji-tab-popover-input">
	<label>
	{{ $t('admin_dash.emoji.filename') }}

	<input
	v-model="editedFile"
	class="emoji-data-input input"
	:placeholder="$t('admin_dash.emoji.new_filename')"
	>
	</label>
	</div>

	<div
	v-if="remote !== undefined"
	class="emoji-tab-popover-input"
	>
	<label>
	{{ $t('admin_dash.emoji.copy_to') }}

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

	<!--
	For local emojis, disable the button if nothing was edited.
	For remote emojis, also disable it if a local pack is not selected.
	Remote emojis are processed by the same function that uploads new ones, as that is effectively what it does
	-->
	<button
	class="button button-default btn"
	type="button"
	:disabled="saveButtonDisabled"
	@click="(newUpload \|\| remote !== undefined) ? uploadEmoji() : saveEditedEmoji()"
	>
	{{ $t('admin_dash.emoji.save') }}
	</button>

	<template v-if="!newUpload && remote === undefined">
	<button
	class="button button-default btn emoji-tab-popover-button"
	type="button"
	@click="deleteModalVisible = true"
	>
	{{ $t('admin_dash.emoji.delete') }}
	</button>
	<button
	class="button button-default btn emoji-tab-popover-button"
	type="button"
	@click="revertEmoji"
	>
	{{ $t('admin_dash.emoji.revert') }}
	</button>
	<ConfirmModal
	v-if="deleteModalVisible"
	:title="$t('admin_dash.emoji.delete_title')"
	:cancel-text="$t('status.delete_confirm_cancel_button')"
	:confirm-text="$t('status.delete_confirm_accept_button')"
	@cancelled="deleteModalVisible = false"
	@accepted="deleteEmoji"
	>
	{{ $t('admin_dash.emoji.delete_confirm', [shortcode]) }}
	</ConfirmModal>
	</template>
	</div>
	</template>
	</Popover>
	</template>

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

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

	import {
	addNewEmojiFile,
	deleteEmojiFile,
	updateEmojiFile,
	} from 'src/api/admin.js'

	export default {
	components: {
	Popover,
	ConfirmModal: defineAsyncComponent(
	() => import('src/components/confirm_modal/confirm_modal.vue'),
	),

	SelectComponent,
	},

	inject: ['emojiAddr'],
	props: {
	placement: {
	type: String,
	required: true,
	},

	newUpload: Boolean,

	title: {
	type: String,
	required: true,
	},
	packName: {
	type: String,
	required: true,
	},
	shortcode: {
	type: String,
	// Only exists when this is not a new upload
	default: '',
	},
	file: {
	type: String,
	// Only exists when this is not a new upload
	default: '',
	},

	// Only exists for emojis from remote packs
	remote: {
	type: Object,
	default: undefined,
	},
	knownLocalPacks: {
	type: Object,
	default: undefined,
	},
	},
	emits: ['updatePackFiles', 'displayError'],
	data() {
	return {
	uploadFile: [],
	uploadURL: '',
	editedShortcode: this.shortcode,
	editedFile: this.file,
	deleteModalVisible: false,
	copyToPack: '',
	}
	},
	computed: {
	emojiPreview() {
	if (this.newUpload && this.uploadFile.length > 0) {
	return URL.createObjectURL(this.uploadFile[0])
	} else if (this.newUpload && this.uploadURL !== '') {
	return this.uploadURL
	} else if (!this.newUpload) {
	return this.emojiAddr(this.file)
	}

	return null
	},
	isEdited() {
	return (
	!this.newUpload &&
	(this.editedShortcode !== this.shortcode \|\|
	this.editedFile !== this.file)
	)
	},
	saveButtonDisabled() {
	if (this.remote === undefined)
	return this.newUpload
	? this.uploadURL === '' && this.uploadFile.length == 0
	: !this.isEdited
	else return this.copyToPack === ''
	},
	},
	methods: {
	saveEditedEmoji() {
	if (!this.isEdited) return

	updateEmojiFile({
	packName: this.packName,
	shortcode: this.shortcode,
	newShortcode: this.editedShortcode,
	newFilename: this.editedFile,
	force: false,
	credentials: useOAuthStore().token,
	})
	.then((resp) => {
	if (resp.error !== undefined) {
	this.$emit('displayError', resp.error)
	- return Promise.reject(resp.error)
	+ throw new Error(resp.error)
	}

	return resp.json()
	})
	.then((resp) => this.$emit('updatePackFiles', resp))
	},
	uploadEmoji() {
	let packName = this.remote === undefined ? this.packName : this.copyToPack
	addNewEmojiFile({
	packName: packName,
	file:
	this.remote === undefined
	? this.uploadURL !== ''
	? this.uploadURL
	: this.uploadFile[0]
	: this.emojiAddr(this.file),
	shortcode: this.editedShortcode,
	filename: this.editedFile,
	credentials: useOAuthStore().token,
	})
	.then((resp) => resp.json())
	.then((resp) => {
	if (resp.error !== undefined) {
	this.$emit('displayError', resp.error)
	return
	}

	this.$emit('updatePackFiles', resp, packName)
	this.$refs.emojiPopover.hidePopover()

	this.editedFile = ''
	this.editedShortcode = ''
	this.uploadFile = []
	})
	},
	revertEmoji() {
	this.editedFile = this.file
	this.editedShortcode = this.shortcode
	},
	deleteEmoji() {
	this.deleteModalVisible = false

	deleteEmojiFile({
	packName: this.packName,
	shortcode: this.shortcode,
	credentials: useOAuthStore().token,
	})
	.then((resp) => resp.json())
	.then((resp) => {
	if (resp.error !== undefined) {
	this.$emit('displayError', resp.error)
	return
	}

	this.$emit('updatePackFiles', resp, this.packName)
	})
	},
	},
	}
	</script>

	<style lang="scss">
	.emoji-tab-edit-popover {
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0.5em;

	.emoji-tab-popover-new-upload {
	margin-bottom: 2em;
	}

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

	.Select {
	display: inline-block;
	}

	h4 {
	margin-bottom: 1em;
	margin-top: 1em;
	}
	}
	</style>
	diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js
	index b4d6c596d8..5fcf259aa5 100644
	--- a/src/lib/persisted_state.js
	+++ b/src/lib/persisted_state.js
	@@ -1,264 +1,264 @@
	import { cloneDeep, each, get, merge, set } from 'lodash'

	import { storage } from './storage.js'

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

	let loaded = false

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

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

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

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

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

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

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

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

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

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

	return {}
	}

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

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

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

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

	loadedGuard.loaded = true
	resolveLoaded()

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

	return {
	$persistLoaded: loadedPromise,
	}
	}
	diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
	index 4eed080c1f..68e0632bf3 100644
	--- a/src/services/style_setter/style_setter.js
	+++ b/src/services/style_setter/style_setter.js
	@@ -1,369 +1,365 @@
	import sum from 'hash-sum'
	import localforage from 'localforage'
	import { chunk, throttle } from 'lodash'

	import { getCssRules } from '../theme_data/css_utils.js'
	import { getEngineChecksum, init } from '../theme_data/theme_data_3.service.js'

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

	import { promisedRequest } from 'src/api/helpers.js'
	import { ROOT_CONFIG } from 'src/modules/default_config_state.js'

	// On platforms where this is not supported, it will return undefined
	// Otherwise it will return an array
	const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets

	const stylesheets = {}

	export const createStyleSheet = (id, priority = 1000) => {
	if (stylesheets[id]) return stylesheets[id]
	const newStyleSheet = {
	rules: [],
	ready: false,
	priority,
	clear() {
	this.rules = []
	},
	addRule(rule) {
	let newRule = rule
	if (!CSS.supports?.('backdrop-filter', 'blur()')) {
	newRule = newRule.replaceAll(/backdrop-filter:[^;]+;/g, '') // Remove backdrop-filter
	}

	if (newRule.startsWith('::-webkit')) {
	if (typeof CSS.supports !== 'function') return
	// firefox doesn't like invalid selectors
	const fullWebkitScrollbarSupport =
	CSS.supports('selector(::-webkit-scrollbar)') &&
	CSS.supports('selector(::-webkit-scrollbar-button)') &&
	CSS.supports('selector(::-webkit-resizer)') &&
	CSS.supports('selector(::-webkit-scrollbar-thumb)')
	if (!fullWebkitScrollbarSupport) return
	}

	this.rules.push(
	newRule.replaceAll(/var$--shadowFilter$[^;]*;/g, ''), // Remove shadowFilter references
	)
	},
	}

	stylesheets[id] = newStyleSheet
	return newStyleSheet
	}

	export const adoptStyleSheets = throttle(() => {
	if (supportsAdoptedStyleSheets) {
	document.adoptedStyleSheets = Object.values(stylesheets)
	.filter((x) => x.ready)
	.sort((a, b) => a.priority - b.priority)
	.map((sheet) => {
	const css = new CSSStyleSheet()
	sheet.rules.forEach((r) => {
	try {
	css.insertRule(r)
	} catch (e) {
	console.warn('Error inserting rule:', e, r)
	}
	})
	return css
	})
	} else {
	const holder = document.getElementById('custom-styles-holder')

	for (let i = holder.sheet.cssRules.length - 1; i >= 0; --i) {
	holder.sheet.deleteRule(i)
	}

	Object.values(stylesheets)
	.filter((x) => x.ready)
	.sort((a, b) => a.priority - b.priority)
	.forEach((sheet) => {
	sheet.rules.forEach((r) => holder.sheet.insertRule(r))
	})
	}
	// Some older browsers do not support document.adoptedStyleSheets.
	// In this case, we use the <style> elements.
	// Since the <style> elements we need are already in the DOM, there
	// is nothing to do here.
	}, 500)

	const EAGER_STYLE_ID = 'pleroma-eager-styles'
	const LAZY_STYLE_ID = 'pleroma-lazy-styles'

	const generateTheme = (inputRuleset, callbacks, debug) => {
	const {
	onNewRule = () => {
	/* no-op */
	},
	onLazyFinished = () => {
	/* no-op */
	},
	onEagerFinished = () => {
	/* no-op */
	},
	} = callbacks

	const themes3 = init({
	inputRuleset,
	debug,
	})

	getCssRules(themes3.eager, debug).forEach((rule) => {
	// Hacks to support multiple selectors on same component
	onNewRule(rule, false)
	})
	onEagerFinished()

	// Optimization - instead of processing all lazy rules in one go, process them in small chunks
	// so that UI can do other things and be somewhat responsive while less important rules are being
	// processed
	let counter = 0
	const chunks = chunk(themes3.lazy, 200)
	// let t0 = performance.now()
	const processChunk = () => {
	const chunk = chunks[counter]
	Promise.all(chunk.map((x) => x())).then((result) => {
	getCssRules(result.filter(Boolean), debug).forEach((rule) => {
	onNewRule(rule, true)
	})
	// const t1 = performance.now()
	// console.debug('Chunk ' + counter + ' took ' + (t1 - t0) + 'ms')
	// t0 = t1
	counter += 1
	if (counter < chunks.length) {
	setTimeout(processChunk, 0)
	} else {
	onLazyFinished()
	}
	})
	}

	return { lazyProcessFunc: processChunk }
	}

	export const tryLoadCache = async () => {
	console.info('Trying to load compiled theme data from cache')
	const cache = await localforage.getItem('pleromafe-theme-cache')
	if (!cache) return null
	try {
	if (
	cache.engineChecksum === getEngineChecksum() &&
	cache.checksum !== undefined &&
	cache.checksum === useMergedConfigStore().mergedConfig.themeChecksum
	) {
	const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10)
	const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20)

	cache.data[0].forEach((rule) => eagerStyles.addRule(rule))
	cache.data[1].forEach((rule) => lazyStyles.addRule(rule))

	eagerStyles.ready = true
	lazyStyles.ready = true

	console.info(`Loaded theme from cache`)
	return true
	} else {
	console.warn("Checksums don't match, cache not usable, clearing")
	localStorage.removeItem('pleroma-fe-theme-cache')
	}
	} catch (e) {
	console.error('Failed to load theme cache:', e)
	return false
	}
	}

	export const applyTheme = (
	input,
	onEagerFinish = () => {
	/* no-op */
	},
	onFinish = () => {
	/* no-op */
	},
	debug,
	) => {
	const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10)
	const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20)

	eagerStyles.clear()
	lazyStyles.clear()

	const { lazyProcessFunc } = generateTheme(
	input,
	{
	onNewRule(rule, isLazy) {
	if (isLazy) {
	lazyStyles.addRule(rule)
	} else {
	eagerStyles.addRule(rule)
	}
	},
	onEagerFinished() {
	eagerStyles.ready = true
	adoptStyleSheets()
	onEagerFinish()
	console.info(
	'Eager part of theme finished, waiting for lazy part to finish to store cache',
	)
	},
	onLazyFinished() {
	lazyStyles.ready = true
	adoptStyleSheets()
	const data = [eagerStyles.rules, lazyStyles.rules]
	const checksum = sum(data)
	const cache = {
	checksum,
	engineChecksum: getEngineChecksum(),
	data,
	}
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'themeChecksum',
	value: checksum,
	})
	onFinish(cache)
	localforage.setItem('pleromafe-theme-cache', cache)
	console.info('Theme cache stored')
	},
	},
	debug,
	)

	setTimeout(lazyProcessFunc, 0)
	}

	const extractStyleConfig = ({
	sidebarColumnWidth,
	contentColumnWidth,
	notifsColumnWidth,
	themeEditorMinWidth,
	emojiReactionsScale,
	emojiSize,
	navbarSize,
	panelHeaderSize,
	textSize,
	forcedRoundness,
	}) => {
	const result = {
	sidebarColumnWidth,
	contentColumnWidth,
	notifsColumnWidth,
	themeEditorMinWidth:
	Number.parseInt(themeEditorMinWidth) === 0
	? 'fit-content'
	: themeEditorMinWidth,
	emojiReactionsScale,
	emojiSize,
	navbarSize,
	panelHeaderSize,
	textSize,
	}

	switch (forcedRoundness) {
	case 'disable':
	break
	case '0':
	result.forcedRoundness = '0'
	break
	case '1':
	result.forcedRoundness = '1px'
	break
	case '2':
	result.forcedRoundness = '0.4rem'
	break
	default:
	}

	return result
	}

	const defaultStyleConfig = extractStyleConfig(ROOT_CONFIG)

	export const applyStyleConfig = (input) => {
	const config = extractStyleConfig(input)

	if (config === defaultStyleConfig) {
	return
	}

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

	const styleSheet = createStyleSheet('theme-holder', 30)

	styleSheet.clear()
	styleSheet.addRule(`:root { ${rules} }`)

	// TODO find a way to make this not apply to theme previews
	if (Object.hasOwn(config, 'forcedRoundness')) {
	styleSheet.addRule(` *:not(.preview-block) {
	--roundness: var(--forcedRoundness) !important;
	}`)
	}
	styleSheet.ready = true
	adoptStyleSheets()
	}

	export const getResourcesIndex = async (url, parser = (x) => x) => {
	const cache = 'no-store'
	const customUrl = url.replace(/\.(\w+)$/, '.custom.$1')
	let builtin
	let custom

	const resourceTransform = (resources) => {
	return Object.entries(resources).map(([k, v]) => {
	if (typeof v === 'object') {
	return [k, () => Promise.resolve(v)]
	} else if (typeof v === 'string') {
	return [
	k,
	() =>
	promisedRequest({
	url: v,
	cache,
	})
	.then(({ data: text }) => parser(text))
	.catch((e) => {
	console.error(e)
	return null
	}),
	]
	} else {
	console.error(`Unknown resource format - ${k} is a ${typeof v}`)
	return [k, null]
	}
	})
	}

	try {
	const { data: builtinData } = await promisedRequest({ url, cache })
	builtin = resourceTransform(builtinData)
	} catch {
	builtin = []
	console.warn(`Builtin resources at ${url} unavailable`)
	}

	try {
	const { data: customData } = await promisedRequest({
	url: customUrl,
	cache,
	})
	custom = resourceTransform(customData)
	} catch {
	custom = []
	console.warn(`Custom resources at ${customUrl} unavailable`)
	}

	const total = [...custom, ...builtin]
	if (total.length === 0) {
	- return Promise.reject(
	- new Error(
	- `Resource at ${url} and ${customUrl} completely unavailable. Panicking`,
	- ),
	- )
	+ throw new Error(`Resource at ${url} and ${customUrl} completely unavailable. Panicking`)
	}
	return Promise.resolve(Object.fromEntries(total))
	}
	diff --git a/src/services/sw/sw.js b/src/services/sw/sw.js
	index 4f044c426f..30c95406ba 100644
	--- a/src/services/sw/sw.js
	+++ b/src/services/sw/sw.js
	@@ -1,189 +1,189 @@
	/* global process */
	function urlBase64ToUint8Array(base64String) {
	const padding = '='.repeat((4 - (base64String.length % 4)) % 4)
	const base64 = (base64String + padding)
	.replaceAll('-', '+')
	.replaceAll('_', '/')

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	export { getOrCreateServiceWorker }
	diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
	index 5bab4818cc..9ea3191753 100644
	--- a/src/services/theme_data/theme2_to_theme3.js
	+++ b/src/services/theme_data/theme2_to_theme3.js
	@@ -1,574 +1,574 @@
	import { convert } from 'chromatism'

	import allKeys from './theme2_keys'

	// keys that are meant to be used globally, i.e. what's the rest of the theme is based upon.
	export const basePaletteKeys = new Set([
	'bg',
	'fg',
	'text',
	'link',
	'accent',

	'cBlue',
	'cRed',
	'cGreen',
	'cOrange',

	'wallpaper',
	])

	export const fontsKeys = new Set(['interface', 'input', 'post', 'postCode'])

	export const opacityKeys = new Set([
	'alert',
	'alertPopup',
	'bg',
	'border',
	'btn',
	'faint',
	'input',
	'panel',
	'popover',
	'profileTint',
	'underlay',
	])

	export const shadowsKeys = new Set([
	'panel',
	'topBar',
	'popup',
	'avatar',
	'avatarStatus',
	'panelHeader',
	'button',
	'buttonHover',
	'buttonPressed',
	'input',
	])

	export const radiiKeys = new Set([
	'btn',
	'input',
	'checkbox',
	'panel',
	'avatar',
	'avatarAlt',
	'tooltip',
	'attachment',
	'chatMessage',
	])

	// Keys that are not available in editor and never meant to be edited
	export const hiddenKeys = new Set(['profileBg', 'profileTint'])

	export const extendedBasePrefixes = [
	'border',
	'icon',
	'highlight',
	'lightText',

	'popover',

	'panel',
	'topBar',
	'tab',
	'btn',
	'input',
	'selectedMenu',

	'alert',
	'alertPopup',
	'badge',

	'post',
	'selectedPost', // wrong nomenclature
	'poll',

	'chatBg',
	'chatMessage',
	]
	export const nonComponentPrefixes = new Set([
	'border',
	'icon',
	'highlight',
	'lightText',
	'chatBg',
	])

	export const extendedBaseKeys = Object.fromEntries(
	extendedBasePrefixes.map((prefix) => [
	prefix,
	allKeys.filter((k) => {
	if (prefix === 'alert') {
	return k.startsWith(prefix) && !k.startsWith('alertPopup')
	}
	return k.startsWith(prefix)
	}),
	]),
	)

	// Keysets that are only really used intermideately, i.e. to generate other colors
	export const temporary = new Set(['', 'highlight'])

	export const temporaryColors = {}

	export const convertTheme2To3 = (data) => {
	data.colors.accent = data.colors.accent \|\| data.colors.link
	data.colors.link = data.colors.link \|\| data.colors.accent
	const generateRoot = () => {
	const directives = {}
	basePaletteKeys.forEach((key) => {
	directives['--' + key] = 'color \| ' + convert(data.colors[key]).hex
	})
	return {
	component: 'Root',
	directives,
	}
	}

	const convertOpacity = () => {
	const newRules = []
	Object.keys(data.opacity \|\| {}).forEach((key) => {
	if (!opacityKeys.has(key) \|\| data.opacity[key] === undefined) return null
	const originalOpacity = data.opacity[key]
	const rule = { source: '2to3' }

	switch (key) {
	case 'alert':
	rule.component = 'Alert'
	break
	case 'alertPopup':
	rule.component = 'Alert'
	rule.parent = { component: 'Popover' }
	break
	case 'bg':
	rule.component = 'Panel'
	break
	case 'border':
	rule.component = 'Border'
	break
	case 'btn':
	rule.component = 'Button'
	break
	case 'faint':
	rule.component = 'Text'
	rule.state = ['faint']
	break
	case 'input':
	rule.component = 'Input'
	break
	case 'panel':
	rule.component = 'PanelHeader'
	break
	case 'popover':
	rule.component = 'Popover'
	break
	case 'profileTint':
	return null
	case 'underlay':
	rule.component = 'Underlay'
	break
	}

	switch (key) {
	case 'alert':
	case 'alertPopup':
	case 'bg':
	case 'btn':
	case 'input':
	case 'panel':
	case 'popover':
	case 'underlay':
	rule.directives = { opacity: originalOpacity }
	break
	case 'faint':
	case 'border':
	rule.directives = { textOpacity: originalOpacity }
	break
	}

	newRules.push(rule)

	if (rule.component === 'Button') {
	newRules.push({ ...rule, component: 'ScrollbarElement' })
	newRules.push({ ...rule, component: 'Tab' })
	newRules.push({
	...rule,
	component: 'Tab',
	state: ['active'],
	directives: { opacity: 0 },
	})
	}
	if (rule.component === 'Panel') {
	newRules.push({ ...rule, component: 'Post' })
	}
	})
	return newRules
	}

	const convertRadii = () => {
	const newRules = []
	Object.keys(data.radii \|\| {}).forEach((key) => {
	if (!radiiKeys.has(key) \|\| data.radii[key] === undefined) return null
	const originalRadius = data.radii[key]
	const rule = { source: '2to3' }

	switch (key) {
	case 'btn':
	rule.component = 'Button'
	break
	case 'tab':
	rule.component = 'Tab'
	break
	case 'input':
	rule.component = 'Input'
	break
	case 'checkbox':
	rule.component = 'Input'
	rule.variant = 'checkbox'
	break
	case 'panel':
	rule.component = 'Panel'
	break
	case 'avatar':
	rule.component = 'Avatar'
	break
	case 'avatarAlt':
	rule.component = 'Avatar'
	rule.variant = 'compact'
	break
	case 'tooltip':
	rule.component = 'Popover'
	break
	case 'ChatMessage':
	rule.component = 'Button'
	break
	}
	rule.directives = {
	roundness: originalRadius,
	}
	newRules.push(rule)
	if (rule.component === 'Button') {
	newRules.push({ ...rule, component: 'ScrollbarElement' })
	newRules.push({ ...rule, component: 'Tab' })
	}
	})
	return newRules
	}

	const convertFonts = () => {
	const newRules = []
	Object.keys(data.fonts \|\| {}).forEach((key) => {
	if (!fontsKeys.has(key)) return
	if (!data.fonts[key]) return
	const originalFont = data.fonts[key]
	const rule = { source: '2to3' }

	switch (key) {
	case 'interface':
	case 'postCode':
	rule.component = 'Root'
	break
	case 'input':
	rule.component = 'Input'
	break
	case 'post':
	rule.component = 'RichContent'
	break
	}
	switch (key) {
	case 'interface':
	case 'input':
	case 'post':
	rule.directives = { '--font': 'generic \| ' + originalFont }
	break
	case 'postCode':
	rule.directives = { '--monoFont': 'generic \| ' + originalFont }
	newRules.push({ ...rule, component: 'RichContent' })
	break
	}
	newRules.push(rule)
	})
	return newRules
	}
	const convertShadows = () => {
	const newRules = []
	Object.keys(data.shadows \|\| {}).forEach((key) => {
	if (!shadowsKeys.has(key)) return
	const originalShadow = data.shadows[key]
	const rule = { source: '2to3' }

	switch (key) {
	case 'panel':
	rule.component = 'Panel'
	break
	case 'topBar':
	rule.component = 'TopBar'
	break
	case 'popup':
	rule.component = 'Popover'
	break
	case 'avatar':
	rule.component = 'Avatar'
	break
	case 'avatarStatus':
	rule.component = 'Avatar'
	rule.parent = { component: 'Post' }
	break
	case 'panelHeader':
	rule.component = 'PanelHeader'
	break
	case 'button':
	rule.component = 'Button'
	break
	case 'buttonHover':
	rule.component = 'Button'
	rule.state = ['hover']
	break
	case 'buttonPressed':
	rule.component = 'Button'
	rule.state = ['pressed']
	break
	case 'input':
	rule.component = 'Input'
	break
	}
	rule.directives = {
	shadow: originalShadow,
	}
	newRules.push(rule)
	if (key === 'topBar') {
	newRules.push({
	...rule,
	component: 'PanelHeader',
	parent: { component: 'MobileDrawer' },
	})
	}
	if (key === 'avatarStatus') {
	newRules.push({ ...rule, parent: { component: 'Notification' } })
	}
	if (key === 'buttonPressed') {
	newRules.push({ ...rule, state: ['toggled'] })
	newRules.push({ ...rule, state: ['toggled', 'focus'] })
	newRules.push({ ...rule, state: ['pressed', 'focus'] })
	newRules.push({ ...rule, state: ['toggled', 'focus', 'hover'] })
	newRules.push({ ...rule, state: ['pressed', 'focus', 'hover'] })
	}

	if (rule.component === 'Button') {
	newRules.push({ ...rule, component: 'ScrollbarElement' })
	newRules.push({ ...rule, component: 'Tab' })
	}
	})
	return newRules
	}

	const extendedRules = Object.entries(extendedBaseKeys).map(
	([prefix, keys]) => {
	if (nonComponentPrefixes.has(prefix)) return null
	const rule = { source: '2to3' }
	if (prefix === 'alertPopup') {
	rule.component = 'Alert'
	rule.parent = { component: 'Popover' }
	} else if (prefix === 'selectedPost') {
	rule.component = 'Post'
	rule.state = ['selected']
	} else if (prefix === 'selectedMenu') {
	rule.component = 'MenuItem'
	rule.state = ['hover']
	} else if (prefix === 'chatMessageIncoming') {
	rule.component = 'ChatMessage'
	} else if (prefix === 'chatMessageOutgoing') {
	rule.component = 'ChatMessage'
	rule.variant = 'outgoing'
	} else if (prefix === 'panel') {
	rule.component = 'PanelHeader'
	} else if (prefix === 'topBar') {
	rule.component = 'TopBar'
	} else if (prefix === 'chatMessage') {
	rule.component = 'ChatMessage'
	} else if (prefix === 'poll') {
	rule.component = 'PollGraph'
	} else if (prefix === 'btn') {
	rule.component = 'Button'
	} else {
	rule.component = prefix[0].toUpperCase() + prefix.slice(1).toLowerCase()
	}
	return keys.map((key) => {
	if (!data.colors[key]) return null
	const leftoverKey = key.replace(prefix, '')
	const parts = (leftoverKey \|\| 'Bg').match(/[A-Z][a-z]*/g)
	const last = parts.slice(-1)[0]
	let newRule = { source: '2to3', directives: {} }
	let variantArray = []

	switch (last) {
	case 'Text':
	case 'Faint': // typo
	case 'Link':
	case 'Icon':
	case 'Greentext':
	case 'Cyantext':
	case 'Border':
	newRule.parent = rule
	newRule.directives.textColor = data.colors[key]
	variantArray = parts.slice(0, -1)
	break
	default:
	newRule = { ...rule, directives: {} }
	newRule.directives.background = data.colors[key]
	variantArray = parts
	break
	}

	if (last === 'Text' \|\| last === 'Link') {
	const secondLast = parts.slice(-2)[0]
	if (secondLast === 'Light') {
	return null // unsupported
	} else if (secondLast === 'Faint') {
	newRule.state = ['faint']
	variantArray = parts.slice(0, -2)
	}
	}

	switch (last) {
	case 'Text':
	case 'Link':
	case 'Icon':
	case 'Border':
	newRule.component = last
	break
	case 'Greentext':
	case 'Cyantext':
	newRule.component = 'FunText'
	newRule.variant = last.toLowerCase()
	break
	case 'Faint':
	newRule.component = 'Text'
	newRule.state = ['faint']
	break
	}

	variantArray = variantArray.filter((x) => x !== 'Bg')

	if (last === 'Link' && prefix === 'selectedPost') {
	// selectedPost has typo - duplicate 'Post'
	variantArray = variantArray.filter((x) => x !== 'Post')
	}

	if (prefix === 'popover' && variantArray[0] === 'Post') {
	newRule.component = 'Post'
	newRule.parent = { source: '2to3hack', component: 'Popover' }
	variantArray = variantArray.filter((x) => x !== 'Post')
	}

	if (prefix === 'selectedMenu' && variantArray[0] === 'Popover') {
	newRule.parent = { source: '2to3hack', component: 'Popover' }
	variantArray = variantArray.filter((x) => x !== 'Popover')
	}

	switch (prefix) {
	case 'btn':
	case 'input':
	case 'alert': {
	const hasPanel = variantArray.find((x) => x === 'Panel')
	if (hasPanel) {
	newRule.parent = {
	source: '2to3hack',
	component: 'PanelHeader',
	parent: newRule.parent,
	}
	variantArray = variantArray.filter((x) => x !== 'Panel')
	}
	const hasTop = variantArray.find((x) => x === 'Top') // TopBar
	if (hasTop) {
	newRule.parent = {
	source: '2to3hack',
	component: 'TopBar',
	parent: newRule.parent,
	}
	variantArray = variantArray.filter(
	(x) => x !== 'Top' && x !== 'Bar',
	)
	}
	break
	}
	}

	if (variantArray.length > 0) {
	if (prefix === 'btn') {
	newRule.state = variantArray.map((x) => x.toLowerCase())
	} else {
	newRule.variant = variantArray[0].toLowerCase()
	}
	}

	if (newRule.component === 'Panel') {
	return [newRule, { ...newRule, component: 'MobileDrawer' }]
	} else if (newRule.component === 'Button') {
	const rules = [
	newRule,
	{ ...newRule, component: 'Tab' },
	{ ...newRule, component: 'ScrollbarElement' },
	]
	- if (newRule.state?.indexOf('toggled') >= 0) {
	+ if (newRule.state?.includes('toggled')) {
	rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
	rules.push({ ...newRule, state: [...newRule.state, 'hover'] })
	rules.push({
	...newRule,
	state: [...newRule.state, 'hover', 'focused'],
	})
	}
	- if (newRule.state?.indexOf('hover') >= 0) {
	+ if (newRule.state?.includes('hover')) {
	rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
	}
	return rules
	} else if (newRule.component === 'Badge') {
	if (newRule.variant === 'notification') {
	return [
	newRule,
	{
	component: 'Root',
	directives: {
	'--badgeNotification':
	'color \| ' + newRule.directives.background,
	},
	},
	]
	} else if (newRule.variant === 'neutral') {
	return [{ ...newRule, variant: 'normal' }]
	} else {
	return [newRule]
	}
	} else if (newRule.component === 'TopBar') {
	return [
	newRule,
	{
	...newRule,
	parent: { component: 'MobileDrawer' },
	component: 'PanelHeader',
	},
	]
	} else {
	return [newRule]
	}
	})
	},
	)

	const flatExtRules = extendedRules
	.filter(Boolean)
	.reduce((acc, x) => [...acc, ...x], [])
	.filter(Boolean)
	.reduce((acc, x) => [...acc, ...x], [])

	return [
	generateRoot(),
	...convertShadows(),
	...convertRadii(),
	...convertOpacity(),
	...convertFonts(),
	...flatExtRules,
	]
	}
	diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
	index 626d7daeb6..507b384db3 100644
	--- a/src/services/theme_data/theme_data_3.service.js
	+++ b/src/services/theme_data/theme_data_3.service.js
	@@ -1,780 +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(
	`Couldn't find variable "${variableSlot}", falling back to magenta. Variables are:
	Static:
	${JSON.stringify(staticVars, null, 2)}
	Dynamic:
	${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(Boolean)
	const opacities = relevantRules
	.map((r) => r.directives.opacity)
	.filter(Boolean)
	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(Boolean)
	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) {
	+ if (combo.includes('disabled')) {
	return !(
	- combo.indexOf('hover') >= 0 \|\|
	- combo.indexOf('focused') >= 0 \|\|
	- combo.indexOf('pressed') >= 0
	+ combo.includes('hover') \|\|
	+ combo.includes('focused') \|\|
	+ combo.includes('pressed')
	)
	}
	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) {
	+ if (!liteMode && combination.state.includes('hover')) {
	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(Boolean)
	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: Sat, Aug 8, 11:51 AM (1 d, 10 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1723151
Default Alt Text: (84 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions