No OneTemporary
Actions

Size

89 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
	index 73aaa23589..f05af6f36d 100644
	--- a/src/components/conversation/conversation.js
	+++ b/src/components/conversation/conversation.js
	@@ -1,636 +1,636 @@
	import { clone, filter, findIndex, get, reduce } from 'lodash'
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

	import ChatMessageList from 'src/components/chat_message_list/chat_message_list.vue'
	import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
	import QuickViewSettings from 'src/components/quick_view_settings/quick_view_settings.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import ThreadTree from 'src/components/thread_tree/thread_tree.vue'

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

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

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

	library.add(
	faAngleDoubleDown,
	faAngleDoubleLeft,
	faChevronLeft,
	faReply,
	faTimes,
	)

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

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

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

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

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

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

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

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

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

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

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

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

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

	a[id] = status
	return a
	}, {})
	},
	canDive() {
	return this.isTreeView && this.isExpanded
	},
	maybeFocused() {
	return this.isExpanded ? this.focused : null
	},
	...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
	...mapState({
	mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
	}),
	...mapPiniaState(useInterfaceStore, {
	mobileLayout: (store) => store.layoutType === 'mobile',
	}),
	},
	components: {
	ThreadTree,
	QuickFilterSettings,
	QuickViewSettings,
	ChatMessageList,
	PostStatusForm,
	RichContent,
	},
	watch: {
	statusId(newVal, oldVal) {
	const newConversationId = this.getConversationId(newVal)
	const oldConversationId = this.getConversationId(oldVal)
	if (
	newConversationId &&
	oldConversationId &&
	newConversationId === oldConversationId
	) {
	this.setFocused(this.originalStatusId)
	} else {
	this.fetchConversation()
	}
	},
	expanded(value) {
	if (value) {
	this.fetchConversation()
	} else {
	this.resetDisplayState()
	}
	},
	virtualHidden() {
	this.$store.dispatch('setVirtualHeight', {
	statusId: this.statusId,
	height: `${this.$el.clientHeight}px`,
	})
	},
	},
	methods: {
	fetchConversation() {
	if (this.status) {
	fetchConversation({
	id: this.statusId,
	credentials: useOAuthStore().token,
	}).then(({ data: { ancestors, descendants } }) => {
	this.$store.dispatch('addNewStatuses', { statuses: ancestors })
	this.$store.dispatch('addNewStatuses', { statuses: descendants })
	this.setFocused(this.originalStatusId)
	})
	} else {
	this.loadStatusError = null
	fetchStatus({
	id: this.statusId,
	credentials: useOAuthStore().token,
	})
	.then(({ data: status }) => {
	this.$store.dispatch('addNewStatuses', { statuses: [status] })
	this.fetchConversation()
	})
	.catch((error) => {
	console.error(error)
	this.loadStatusError = error
	})
	}
	},
	getReplies(id) {
	return this.replies[id] \|\| []
	},
	setFocused(id) {
	if (!id) return
	this.focused = id

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

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

	export default conversation
	diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
	index ac9952b9ba..a0e30bf6de 100644
	--- a/src/components/emoji_picker/emoji_picker.js
	+++ b/src/components/emoji_picker/emoji_picker.js
	@@ -1,443 +1,443 @@
	import { chunk, debounce, trim } from 'lodash'
	import { defineAsyncComponent } from 'vue'

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import Popover from 'src/components/popover/popover.vue'
	import { ensureFinalFallback } from '../../i18n/languages.js'

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

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBasketballBall,
	faBoxOpen,
	faBus,
	faCode,
	faFlag,
	faIceCream,
	faLightbulb,
	faPaw,
	faSmile,
	faSmileBeam,
	faStickyNote,
	faUser,
	} from '@fortawesome/free-solid-svg-icons'

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

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

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

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

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

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

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

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

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

	const EmojiPicker = {
	props: {
	enableStickerPicker: {
	required: false,
	type: Boolean,
	default: true,
	},
	hideCustomEmoji: {
	required: false,
	type: Boolean,
	default: false,
	},
	},
	inject: {
	popoversZLayer: {
	default: '',
	},
	},
	data() {
	return {
	keyword: '',
	activeGroup: 'custom',
	showingStickers: false,
	groupsScrolledClass: 'scrolled-top',
	keepOpen: false,
	customEmojiTimeout: null,
	hideCustomEmojiInPicker: false,
	// Lazy-load only after the first time `showing` becomes true.
	contentLoaded: false,
	popoverShown: false,
	groupRefs: {},
	emojiRefs: {},
	filteredEmojiGroups: [],
	emojiSize: 0,
	width: 0,
	}
	},
	components: {
	StickerPicker: defineAsyncComponent(
	() => import('src/components/sticker_picker/sticker_picker.vue'),
	),
	Checkbox,

	Popover,
	},
	methods: {
	groupScroll(e) {
	e.currentTarget.scrollLeft += e.deltaY + e.deltaX
	},
	updateEmojiSize() {
	const css = window.getComputedStyle(this.$refs.popover.$el)
	const fontSize = css.getPropertyValue('font-size') \|\| '1rem'
	const emojiSize = css.getPropertyValue('--emojiSize') \|\| '2.2rem'

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

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

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

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

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

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

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

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

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

	export default EmojiPicker
	diff --git a/src/services/theme_data/iss_utils.js b/src/services/theme_data/iss_utils.js
	index 67579a1187..d42da37800 100644
	--- a/src/services/theme_data/iss_utils.js
	+++ b/src/services/theme_data/iss_utils.js
	@@ -1,216 +1,216 @@
	import { sortBy } from 'lodash'

	// "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
	// into an array [item2, item3] for iterating
	export const unroll = (item) => {
	const out = []
	let currentParent = item
	while (currentParent) {
	out.push(currentParent)
	currentParent = currentParent.parent
	}
	return out
	}

	// This gives you an array of arrays of all possible unique (i.e. order-insensitive) combinations
	// Can only accept primitives. Duplicates are not supported and can cause unexpected behavior
	export const getAllPossibleCombinations = (array) => {
	const combos = [array.map((x) => [x])]
	for (let comboSize = 2; comboSize <= array.length; comboSize++) {
	const previous = combos[combos.length - 1]
	const newCombos = previous.map((self) => {
	const selfSet = new Set()
	self.forEach((x) => selfSet.add(x))
	const nonSelf = array.filter((x) => !selfSet.has(x))
	return nonSelf.map((x) => [...self, x])
	})
	- const flatCombos = newCombos.reduce((acc, x) => [...acc, ...x], [])
	+ const flatCombos = newCombos.flat()
	const uniqueComboStrings = new Set()
	const uniqueCombos = flatCombos.map(sortBy).filter((x) => {
	if (uniqueComboStrings.has(x.join())) {
	return false
	} else {
	uniqueComboStrings.add(x.join())
	return true
	}
	})
	combos.push(uniqueCombos)
	}
	- return combos.reduce((acc, x) => [...acc, ...x], [])
	+ return combos.flat()
	}

	/**
	* Converts rule, parents and their criteria into a CSS (or path if ignoreOutOfTreeSelector == true)
	* selector.
	*
	* "path" here refers to "fake" selector that cannot be actually used in UI but is used for internal
	* purposes
	*
	* @param {Object} components - object containing all components definitions
	*
	* @returns {Function}
	* @param {Object} rule - rule in question to convert to CSS selector
	* @param {boolean} ignoreOutOfTreeSelector - wthether to ignore aformentioned field in
	* component definition and use selector
	* @param {boolean} isParent - (mostly) internal argument used when recursing
	*
	* @returns {String} CSS selector (or path)
	*/
	export const genericRuleToSelector =
	(components) => (rule, ignoreOutOfTreeSelector, liteMode, children) => {
	const isParent = !!children
	if (!rule && !isParent) return null
	const component = components[rule.component]
	const { states = {}, variants = {}, outOfTreeSelector } = component

	const expand = (array = [], subArray = []) => {
	if (array.length === 0) return subArray.map((x) => [x])
	if (subArray.length === 0) return array.map((x) => [x])
	return array
	.map((a) => {
	return subArray.map((b) => [a, b])
	})
	.flat()
	}

	let componentSelectors = Array.isArray(component.selector)
	? component.selector
	: [component.selector]
	if (ignoreOutOfTreeSelector \|\| liteMode)
	componentSelectors = [componentSelectors[0]]
	componentSelectors = componentSelectors.map((selector) => {
	if (selector === ':root') {
	return ''
	} else if (isParent) {
	return selector
	} else {
	if (outOfTreeSelector && !ignoreOutOfTreeSelector)
	return outOfTreeSelector
	return selector
	}
	})

	const applicableVariantName = rule.variant \|\| 'normal'
	let variantSelectors = null
	if (applicableVariantName !== 'normal') {
	variantSelectors = variants[applicableVariantName]
	} else {
	variantSelectors = variants?.normal ?? ''
	}
	variantSelectors = Array.isArray(variantSelectors)
	? variantSelectors
	: [variantSelectors]
	if (ignoreOutOfTreeSelector \|\| liteMode)
	variantSelectors = [variantSelectors[0]]

	const applicableStates = (rule.state \|\| []).filter((x) => x !== 'normal')
	// const applicableStates = (rule.state \|\| [])
	const statesSelectors = applicableStates.map((state) => {
	const selector = states[state] \|\| ''
	let arraySelector = Array.isArray(selector) ? selector : [selector]
	if (ignoreOutOfTreeSelector \|\| liteMode)
	arraySelector = [arraySelector[0]]
	return arraySelector
	})

	const statesSelectorsFlat = statesSelectors.reduce((acc, s) => {
	return expand(acc, s).map((st) => st.join(''))
	}, [])

	const componentVariant = expand(componentSelectors, variantSelectors).map(
	(cv) => cv.join(''),
	)
	const componentVariantStates = expand(
	componentVariant,
	statesSelectorsFlat,
	).map((cvs) => cvs.join(''))
	const selectors = expand(componentVariantStates, children).map((cvsc) =>
	cvsc.join(' '),
	)
	/*
	*/

	if (rule.parent) {
	return genericRuleToSelector(components)(
	rule.parent,
	ignoreOutOfTreeSelector,
	liteMode,
	selectors,
	)
	}

	return selectors.join(', ').trim()
	}

	/**
	* Check if combination matches
	*
	* @param {Object} criteria - criteria to match against
	* @param {Object} subject - rule/combination to check match
	* @param {boolean} strict - strict checking:
	* By default every variant and state inherits from "normal" state/variant
	* so when checking if combination matches, it WILL match against "normal"
	* state/variant. In strict mode inheritance is ignored an "normal" does
	* not match
	*/
	export const combinationsMatch = (criteria, subject, strict) => {
	if (criteria.component !== subject.component) return false

	// All variants inherit from normal
	if (subject.variant !== 'normal' \|\| strict) {
	if (criteria.variant !== subject.variant) return false
	}

	// Subject states > 1 essentially means state is "normal" and therefore matches
	if (subject.state.length > 1 \|\| strict) {
	const subjectStatesSet = new Set(subject.state)
	const criteriaStatesSet = new Set(criteria.state)

	const setsAreEqual =
	[...criteriaStatesSet].every((state) => subjectStatesSet.has(state)) &&
	[...subjectStatesSet].every((state) => criteriaStatesSet.has(state))

	if (!setsAreEqual) return false
	}
	return true
	}

	/**
	* Search for rule that matches `criteria` in set of rules
	* meant to be used in a ruleset.filter() function
	*
	* @param {Object} criteria - criteria to search for
	* @param {boolean} strict - whether search strictly or not (see combinationsMatch)
	*
	* @return function that returns true/false if subject matches
	*/
	export const findRules = (criteria, strict) => (subject) => {
	// If we searching for "general" rules - ignore "specific" ones
	if (criteria.parent === null && !!subject.parent) return false
	if (!combinationsMatch(criteria, subject, strict)) return false

	if (criteria.parent !== undefined && criteria.parent !== null) {
	if (!subject.parent && !strict) return true
	const pathCriteria = unroll(criteria)
	const pathSubject = unroll(subject)
	if (pathCriteria.length < pathSubject.length) return false

	// Search: .a .b .c
	// Matches: .a .b .c; .b .c; .c; .z .a .b .c
	// Does not match .a .b .c .d, .a .b .e
	for (let i = 0; i < pathCriteria.length; i++) {
	const criteriaParent = pathCriteria[i]
	const subjectParent = pathSubject[i]
	if (!subjectParent) return true
	if (!combinationsMatch(criteriaParent, subjectParent, strict))
	return false
	}
	}
	return true
	}

	// Pre-fills 'normal' state/variant if missing
	export const normalizeCombination = (rule) => {
	rule.variant = rule.variant ?? 'normal'
	rule.state = [...new Set(['normal', ...(rule.state \|\| [])])]
	}
	diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
	index 9ea3191753..96955edfdb 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?.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?.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], [])
	+ .flat()
	.filter(Boolean)
	- .reduce((acc, x) => [...acc, ...x], [])
	+ .flat()

	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 507b384db3..4650622259 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], []),
	+ .flat()
	...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.includes('disabled')) {
	return !(
	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], [])
	+ .flat()

	stateVariantCombination.forEach((combination) => {
	combination.component = component.name
	combination.lazy = component.lazy \|\| parent?.lazy
	combination.parent = parent
	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]),
	}
	}
	diff --git a/src/stores/emoji.js b/src/stores/emoji.js
	index 2d77954f13..8135a483e5 100644
	--- a/src/stores/emoji.js
	+++ b/src/stores/emoji.js
	@@ -1,321 +1,317 @@
	import { merge } from 'lodash'
	import { defineStore } from 'pinia'

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

	import { listEmojiPacks } from 'src/api/public.js'
	import { ensureFinalFallback } from 'src/i18n/languages.js'

	import { annotationsLoader } from 'virtual:pleroma-fe/emoji-annotations'

	const defaultState = {
	// Custom emoji from server
	customEmoji: [],
	customEmojiFetched: false,
	adminPacksLocal: null,
	adminPacksLocalLoading: true,

	// Unicode emoji from bundle
	emoji: {},
	emojiFetched: false,
	unicodeEmojiAnnotations: {},

	// Stickers
	stickers: null,
	}

	const SORTED_EMOJI_GROUP_IDS = [
	'smileys-and-emotion',
	'people-and-body',
	'animals-and-nature',
	'food-and-drink',
	'travel-and-places',
	'activities',
	'objects',
	'symbols',
	'flags',
	]

	const REGIONAL_INDICATORS = (() => {
	const start = 0x1f1e6
	const end = 0x1f1ff
	const A = 'A'.codePointAt(0)
	const res = new Array(end - start + 1)
	for (let i = start; i <= end; ++i) {
	const letter = String.fromCodePoint(A + i - start)
	res[i - start] = {
	replacement: String.fromCodePoint(i),
	imageUrl: false,
	displayText: 'regional_indicator_' + letter,
	displayTextI18n: {
	key: 'emoji.regional_indicator',
	args: { letter },
	},
	}
	}
	return res
	})()

	const loadAnnotations = (lang) => {
	return annotationsLoader[lang]().then((k) => k.default)
	}

	const injectAnnotations = (emoji, annotations) => {
	const availableLangs = Object.keys(annotations)

	return {
	...emoji,
	annotations: availableLangs.reduce((acc, cur) => {
	acc[cur] = annotations[cur][emoji.replacement]
	return acc
	}, {}),
	}
	}

	const injectRegionalIndicators = (groups) => {
	groups.symbols.push(...REGIONAL_INDICATORS)
	return groups
	}

	export const useEmojiStore = defineStore('emoji', {
	state: () => ({ ...defaultState }),
	getters: {
	groupedCustomEmojis(state) {
	const packsOf = (emoji) => {
	const packs = emoji.tags
	.filter((k) => k.startsWith('pack:'))
	.map((k) => {
	const packName = k.slice(5) // remove 'pack:' prefix
	return {
	id: `custom-${packName}`,
	text: packName,
	}
	})

	if (!packs.length) {
	return [
	{
	id: 'unpacked',
	},
	]
	} else {
	return packs
	}
	}

	return this.customEmoji.reduce((res, emoji) => {
	packsOf(emoji).forEach(({ id: packId, text: packName }) => {
	if (!res[packId]) {
	res[packId] = {
	id: packId,
	text: packName,
	image: emoji.imageUrl,
	emojis: [],
	}
	}
	res[packId].emojis.push(emoji)
	})
	return res
	}, {})
	},
	standardEmojiList(state) {
	- return (
	- SORTED_EMOJI_GROUP_IDS.map((groupId) =>
	- (this.emoji[groupId] \|\| []).map((k) =>
	- injectAnnotations(k, this.unicodeEmojiAnnotations),
	- ),
	- ).reduce((a, b) => a.concat(b), []) ?? []
	- )
	+ return SORTED_EMOJI_GROUP_IDS.map((groupId) =>
	+ (this.emoji[groupId] \|\| []).map((k) =>
	+ injectAnnotations(k, this.unicodeEmojiAnnotations),
	+ ),
	+ ).flat()
	},
	standardEmojiGroupList(state) {
	- return (
	- SORTED_EMOJI_GROUP_IDS.map((groupId) => ({
	- id: groupId,
	- emojis: (this.emoji[groupId] \|\| []).map((k) =>
	- injectAnnotations(k, this.unicodeEmojiAnnotations),
	- ),
	- })) ?? []
	- )
	+ return SORTED_EMOJI_GROUP_IDS.map((groupId) => ({
	+ id: groupId,
	+ emojis: (this.emoji[groupId] \|\| []).map((k) =>
	+ injectAnnotations(k, this.unicodeEmojiAnnotations),
	+ ),
	+ }))
	},
	},
	actions: {
	setStickers(stickers) {
	this.stickers = stickers
	},
	async getStaticEmoji() {
	try {
	// See build/emojis_plugin for more details
	const values = (await import('src/assets/emoji.json')).default

	const emoji = Object.keys(values).reduce((res, groupId) => {
	res[groupId] = values[groupId].map((e) => ({
	displayText: e.slug,
	imageUrl: false,
	replacement: e.emoji,
	}))
	return res
	}, {})
	this.emoji = injectRegionalIndicators(emoji)
	} catch (e) {
	console.warn("Can't load static emoji\n", e)
	}
	},

	loadUnicodeEmojiData(language) {
	const langList = ensureFinalFallback(language)

	return Promise.all(
	langList.map(async (lang) => {
	if (!this.unicodeEmojiAnnotations[lang]) {
	try {
	const annotations = await loadAnnotations(lang)
	this.unicodeEmojiAnnotations[lang] = annotations
	} catch (e) {
	console.warn(
	`Error loading unicode emoji annotations for ${lang}: `,
	e,
	)
	// ignore
	}
	}
	}),
	)
	},

	async getAdminPacksLocal(refresh) {
	if (!refresh && this.adminPacksLocal) return this.adminPacksLocal
	this.adminPacksLocalLoading = true
	this.adminPacksLocal = await this.getAdminPacks(
	useInstanceStore().server,
	(params) =>
	listEmojiPacks({
	...params,
	credentials: useOAuthStore().token,
	}).then(({ data }) => data),
	)
	this.adminPacksLocalLoading = false
	},

	async getAdminPacks(instance, listFunction) {
	const currentUser = window.vuex.state.users.currentUser

	if (!currentUser.rights.admin) return

	const pageSize = 25

	return await listFunction({
	instance,
	page: 1,
	pageSize: 0,
	})
	.then((data) => {
	const promises = []

	for (let i = 0; i < Math.ceil(data.count / pageSize); i++) {
	promises.push(
	listFunction({
	instance,
	page: i,
	pageSize,
	}).then((pageData) => {
	return pageData.packs
	}),
	)
	}

	return Promise.all(promises).then((results) => {
	return merge({}, ...results)
	})
	})
	.then((allPacks) => {
	// Sort by key
	return Object.keys(allPacks)
	.sort((a, b) => a.localeCompare(b))
	.reduce((acc, key) => {
	if (key.length === 0) return acc
	acc[key] = allPacks[key]
	return acc
	}, {})
	})
	.catch((data) => {
	console.error(data)
	})
	},

	async getCustomEmoji() {
	try {
	let res = await window.fetch('/api/v1/pleroma/emoji')
	if (!res.ok) {
	res = await window.fetch('/api/pleroma/emoji.json')
	}
	if (res.ok) {
	const result = await res.json()
	const values = Array.isArray(result)
	? Object.assign({}, ...result)
	: result
	const caseInsensitiveStrCmp = (a, b) => {
	const la = a.toLowerCase()
	const lb = b.toLowerCase()
	return la > lb ? 1 : la < lb ? -1 : 0
	}
	const noPackLast = (a, b) => {
	const aNull = a === ''
	const bNull = b === ''
	if (aNull === bNull) {
	return 0
	} else if (aNull && !bNull) {
	return 1
	} else {
	return -1
	}
	}
	const byPackThenByName = (a, b) => {
	const packOf = (emoji) =>
	(emoji.tags.filter((k) => k.startsWith('pack:'))[0] \|\| '').slice(
	5,
	)
	const packOfA = packOf(a)
	const packOfB = packOf(b)
	return (
	noPackLast(packOfA, packOfB) \|\|
	caseInsensitiveStrCmp(packOfA, packOfB) \|\|
	caseInsensitiveStrCmp(a.displayText, b.displayText)
	)
	}

	const emoji = Object.entries(values)
	.map(([key, value]) => {
	const imageUrl = value.image_url
	return {
	displayText: key,
	imageUrl: imageUrl
	? useInstanceStore().server + imageUrl
	: value,
	tags: imageUrl
	? value.tags.sort((a, b) => (a > b ? 1 : 0))
	: ['utf'],
	replacement: `:${key}: `,
	}
	// Technically could use tags but those are kinda useless right now,
	// should have been "pack" field, that would be more useful
	})
	.sort(byPackThenByName)
	this.customEmoji = emoji
	} else {
	throw res
	}
	} catch (e) {
	console.warn("Can't load custom emojis\n", e)
	}
	},
	fetchEmoji() {
	if (!this.customEmojiFetched) {
	this.getCustomEmoji().then(() => (this.customEmojiFetched = true))
	}
	if (!this.emojiFetched) {
	this.getStaticEmoji().then(() => (this.emojiFetched = true))
	}
	},
	},
	})

File Metadata

Mime Type: text/x-diff
Expires: Sat, Aug 8, 3:52 PM (1 d, 20 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1722463
Default Alt Text: (89 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions