No OneTemporary
Actions

Authored By

Unknown

Size

67 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
	index 2b4452d53e..25e499c4cd 100644
	--- a/.gitlab-ci.yml
	+++ b/.gitlab-ci.yml
	@@ -1,72 +1,76 @@
	# This file is a template, and might need editing before it works on your project.
	# Official framework image. Look for the different tagged releases at:
	# https://hub.docker.com/r/library/node/tags/
	image: node:16

	stages:
	- check-changelog
	- lint
	- build
	- test
	- deploy

	# https://git.pleroma.social/help/ci/yaml/workflow.md#switch-between-branch-pipelines-and-merge-request-pipelines
	workflow:
	rules:
	- if: $CI_PIPELINE_SOURCE == "merge_request_event"
	- if: $CI_COMMIT_BRANCH && $CI_OPEN_MERGE_REQUESTS
	when: never
	- if: $CI_COMMIT_BRANCH

	check-changelog:
	stage: check-changelog
	image: alpine
	rules:
	- if: $CI_MERGE_REQUEST_SOURCE_PROJECT_PATH == 'pleroma/pleroma-fe' && $CI_MERGE_REQUEST_SOURCE_BRANCH_NAME =~ /^renovate/
	when: never
	- if: $CI_MERGE_REQUEST_SOURCE_PROJECT_PATH == 'pleroma/pleroma-fe' && $CI_MERGE_REQUEST_SOURCE_BRANCH_NAME == 'weblate'
	when: never
	- if: $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "develop"
	before_script: ''
	after_script: ''
	cache: {}
	script:
	- apk add git
	- sh ./tools/check-changelog

	lint:
	stage: lint
	script:
	- yarn
	- npm run lint
	- npm run stylelint

	test:
	stage: test
	+ tags:
	+ - amd64
	variables:
	APT_CACHE_DIR: apt-cache
	script:
	- mkdir -pv $APT_CACHE_DIR && apt-get -qq update
	- apt install firefox-esr -y --no-install-recommends
	- firefox --version
	- yarn
	- yarn unit

	build:
	stage: build
	+ tags:
	+ - amd64
	script:
	- yarn
	- npm run build
	artifacts:
	paths:
	- dist/

	docs-deploy:
	stage: deploy
	image: alpine:latest
	only:
	- develop@pleroma/pleroma-fe
	before_script:
	- apk add curl
	script:
	- curl -X POST -F"token=$DOCS_PIPELINE_TRIGGER" -F'ref=master' https://git.pleroma.social/api/v4/projects/673/trigger/pipeline
	diff --git a/changelog.d/ci-runner.skip b/changelog.d/ci-runner.skip
	new file mode 100644
	index 0000000000..ad4b79d520
	--- /dev/null
	+++ b/changelog.d/ci-runner.skip
	@@ -0,0 +1 @@
	+stop using that one runner for intensive tasks
	\ No newline at end of file
	diff --git a/changelog.d/no-preserve-selection-color.fix b/changelog.d/no-preserve-selection-color.fix
	new file mode 100644
	index 0000000000..669e744cc9
	--- /dev/null
	+++ b/changelog.d/no-preserve-selection-color.fix
	@@ -0,0 +1 @@
	+Ensure selection text color has enough contrast
	diff --git a/changelog.d/profile-mentions.fix b/changelog.d/profile-mentions.fix
	new file mode 100644
	index 0000000000..3f38ab0c45
	--- /dev/null
	+++ b/changelog.d/profile-mentions.fix
	@@ -0,0 +1 @@
	+Fix profile mentions causing a 422 error
	diff --git a/changelog.d/themesv3-on-safari.fix b/changelog.d/themesv3-on-safari.fix
	new file mode 100644
	index 0000000000..af767b3aaa
	--- /dev/null
	+++ b/changelog.d/themesv3-on-safari.fix
	@@ -0,0 +1 @@
	+Fix Themes v3 on Safari not working
	diff --git a/index.html b/index.html
	index e790fb57ad..6d9c4ce5c1 100644
	--- a/index.html
	+++ b/index.html
	@@ -1,16 +1,18 @@
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
	<link rel="icon" type="image/png" href="/favicon.png">
	+ <style id="pleroma-eager-styles" type="text/css"></style>
	+ <style id="pleroma-lazy-styles" type="text/css"></style>
	<!--server-generated-meta-->
	</head>
	<body class="hidden">
	<noscript>To use Pleroma, please enable JavaScript.</noscript>
	<div id="app"></div>
	<div id="modal"></div>
	<!-- built files will be auto injected -->
	<div id="popovers" />
	</body>
	</html>
	diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
	index 5564b118e4..563dfb966c 100644
	--- a/src/components/post_status_form/post_status_form.js
	+++ b/src/components/post_status_form/post_status_form.js
	@@ -1,671 +1,672 @@
	import statusPoster from '../../services/status_poster/status_poster.service.js'
	import genRandomSeed from '../../services/random_seed/random_seed.service.js'
	import MediaUpload from '../media_upload/media_upload.vue'
	import ScopeSelector from '../scope_selector/scope_selector.vue'
	import EmojiInput from '../emoji_input/emoji_input.vue'
	import PollForm from '../poll/poll_form.vue'
	import Attachment from '../attachment/attachment.vue'
	import Gallery from 'src/components/gallery/gallery.vue'
	import StatusContent from '../status_content/status_content.vue'
	import fileTypeService from '../../services/file_type/file_type.service.js'
	import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
	import { propsToNative } from '../../services/attributes_helper/attributes_helper.service.js'
	import { reject, map, uniqBy, debounce } from 'lodash'
	import suggestor from '../emoji_input/suggestor.js'
	import { mapGetters, mapState } from 'vuex'
	import Checkbox from '../checkbox/checkbox.vue'
	import Select from '../select/select.vue'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faSmileBeam,
	faPollH,
	faUpload,
	faBan,
	faTimes,
	faCircleNotch
	} from '@fortawesome/free-solid-svg-icons'

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

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

	allAttentions.unshift(user)

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

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

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

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

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

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

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

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

	- if (this.replyTo) {
	+ if (this.replyTo \|\| this.profileMention) {
	const currentUser = this.$store.state.users.currentUser
	statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
	}

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

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

	let statusParams = {
	spoilerText: this.subject \|\| '',
	status: statusText,
	nsfw: !!sensitiveByDefault,
	files: [],
	poll: {},
	mediaDescriptions: {},
	visibility: scope,
	contentType
	}

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

	return {
	randomSeed: genRandomSeed(),
	dropFiles: [],
	uploadingFiles: false,
	error: null,
	posting: false,
	highlighted: 0,
	newStatus: statusParams,
	caret: 0,
	pollFormVisible: false,
	showDropIcon: 'hide',
	dropStopTimeout: null,
	preview: null,
	previewLoading: false,
	emojiInputShown: false,
	idempotencyKey: ''
	}
	},
	computed: {
	users () {
	return this.$store.state.users.users
	},
	userDefaultScope () {
	return this.$store.state.users.currentUser.default_scope
	},
	showAllScopes () {
	return !this.mergedConfig.minimalScopesMode
	},
	emojiUserSuggestor () {
	return suggestor({
	emoji: [
	...this.$store.getters.standardEmojiList,
	...this.$store.state.instance.customEmoji
	],
	store: this.$store
	})
	},
	emojiSuggestor () {
	return suggestor({
	emoji: [
	...this.$store.getters.standardEmojiList,
	...this.$store.state.instance.customEmoji
	]
	})
	},
	emoji () {
	return this.$store.getters.standardEmojiList \|\| []
	},
	customEmoji () {
	return this.$store.state.instance.customEmoji \|\| []
	},
	statusLength () {
	return this.newStatus.status.length
	},
	spoilerTextLength () {
	return this.newStatus.spoilerText.length
	},
	statusLengthLimit () {
	return this.$store.state.instance.textlimit
	},
	hasStatusLengthLimit () {
	return this.statusLengthLimit > 0
	},
	charactersLeft () {
	return this.statusLengthLimit - (this.statusLength + this.spoilerTextLength)
	},
	isOverLengthLimit () {
	return this.hasStatusLengthLimit && (this.charactersLeft < 0)
	},
	minimalScopesMode () {
	return this.$store.state.instance.minimalScopesMode
	},
	alwaysShowSubject () {
	return this.mergedConfig.alwaysShowSubjectInput
	},
	postFormats () {
	return this.$store.state.instance.postFormats \|\| []
	},
	safeDMEnabled () {
	return this.$store.state.instance.safeDM
	},
	pollsAvailable () {
	return this.$store.state.instance.pollsAvailable &&
	this.$store.state.instance.pollLimits.max_options >= 2 &&
	this.disablePolls !== true
	},
	hideScopeNotice () {
	return this.disableNotice \|\| this.$store.getters.mergedConfig.hideScopeNotice
	},
	pollContentError () {
	return this.pollFormVisible &&
	this.newStatus.poll &&
	this.newStatus.poll.error
	},
	showPreview () {
	return !this.disablePreview && (!!this.preview \|\| this.previewLoading)
	},
	emptyStatus () {
	return this.newStatus.status.trim() === '' && this.newStatus.files.length === 0
	},
	uploadFileLimitReached () {
	return this.newStatus.files.length >= this.fileLimit
	},
	isEdit () {
	return typeof this.statusId !== 'undefined' && this.statusId.trim() !== ''
	},
	quotable () {
	if (!this.$store.state.instance.quotingAvailable) {
	return false
	}

	if (!this.replyTo) {
	return false
	}

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

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

	return false
	},
	...mapGetters(['mergedConfig']),
	...mapState({
	mobileLayout: state => state.interface.mobileLayout
	})
	},
	watch: {
	newStatus: {
	deep: true,
	handler () {
	this.statusChanged()
	}
	}
	},
	methods: {
	statusChanged () {
	this.autoPreview()
	this.updateIdempotencyKey()
	},
	clearStatus () {
	const newStatus = this.newStatus
	this.newStatus = {
	status: '',
	spoilerText: '',
	files: [],
	visibility: newStatus.visibility,
	contentType: newStatus.contentType,
	poll: {},
	mediaDescriptions: {},
	quoting: false
	}
	this.pollFormVisible = false
	this.$refs.mediaUpload && this.$refs.mediaUpload.clearFile()
	this.clearPollForm()
	if (this.preserveFocus) {
	this.$nextTick(() => {
	this.$refs.textarea.focus()
	})
	}
	const el = this.$el.querySelector('textarea')
	el.style.height = 'auto'
	el.style.height = undefined
	this.error = null
	if (this.preview) this.previewStatus()
	},
	async postStatus (event, newStatus, opts = {}) {
	if (this.posting && !this.optimisticPosting) { return }
	if (this.disableSubmit) { return }
	if (this.emojiInputShown) { return }
	if (this.submitOnEnter) {
	event.stopPropagation()
	event.preventDefault()
	}

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

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

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

	this.posting = true

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

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

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

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

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

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

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

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

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

	const oldHeight = pxStringToNumber(target.style.height)

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

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

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

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

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

	if (scrollerRef === window) {
	scrollerRef.scroll(0, targetScroll)
	} else {
	scrollerRef.scrollTop = targetScroll
	}
	},
	showEmojiPicker () {
	this.$refs.textarea.focus()
	this.$refs['emoji-input'].triggerShowPicker()
	},
	clearError () {
	this.error = null
	},
	changeVis (visibility) {
	this.newStatus.visibility = visibility
	},
	togglePollForm () {
	this.pollFormVisible = !this.pollFormVisible
	},
	setPoll (poll) {
	this.newStatus.poll = poll
	},
	clearPollForm () {
	if (this.$refs.pollForm) {
	this.$refs.pollForm.clear()
	}
	},
	dismissScopeNotice () {
	this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })
	},
	setMediaDescription (id) {
	const description = this.newStatus.mediaDescriptions[id]
	if (!description \|\| description.trim() === '') return
	return statusPoster.setMediaDescription({ store: this.$store, id, description })
	},
	setAllMediaDescriptions () {
	const ids = this.newStatus.files.map(file => file.id)
	return Promise.all(ids.map(id => this.setMediaDescription(id)))
	},
	handleEmojiInputShow (value) {
	this.emojiInputShown = value
	},
	updateIdempotencyKey () {
	this.idempotencyKey = Date.now().toString()
	},
	openProfileTab () {
	this.$store.dispatch('openSettingsModalTab', 'profile')
	},
	propsToNative (props) {
	return propsToNative(props)
	}
	}
	}

	export default PostStatusForm
	diff --git a/src/components/root.style.js b/src/components/root.style.js
	index 3e840a520d..f9bdf16e80 100644
	--- a/src/components/root.style.js
	+++ b/src/components/root.style.js
	@@ -1,44 +1,44 @@
	export default {
	name: 'Root',
	selector: ':root',
	validInnerComponents: [
	'Underlay',
	'Modals',
	'Popover',
	'TopBar',
	'Scrollbar',
	'ScrollbarElement',
	'MobileDrawer',
	'Alert',
	'Button' // mobile post button
	],
	defaultRules: [
	{
	directives: {
	// These are here just to establish order,
	// themes should override those
	'--bg': 'color \| #121a24',
	'--fg': 'color \| #182230',
	'--text': 'color \| #b9b9ba',
	'--link': 'color \| #d8a070',
	'--accent': 'color \| #d8a070',
	'--cRed': 'color \| #FF0000',
	'--cBlue': 'color \| #0095ff',
	'--cGreen': 'color \| #0fa00f',
	'--cOrange': 'color \| #ffa500',

	// Fonts
	'--font': 'generic \| sans-serif',
	'--monoFont': 'generic \| monospace',

	// Fallback no-background-image color
	// (also useful in some other places like scrollbars)
	'--wallpaper': 'color \| --bg, -2',

	// Selection colors
	'--selectionBackground': 'color \| --accent',
	- '--selectionText': 'color \| $textColor(--accent, --text)'
	+ '--selectionText': 'color \| $textColor(--accent, --text, no-preserve)'
	}
	}
	]
	}
	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	index e17bf8eb28..b1fe2e8f31 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,237 +1,237 @@
	import { unitToSeconds } from 'src/services/date_utils/date_utils.js'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import RemoteFollow from '../remote_follow/remote_follow.vue'
	import ProgressButton from '../progress_button/progress_button.vue'
	import FollowButton from '../follow_button/follow_button.vue'
	import ModerationTools from '../moderation_tools/moderation_tools.vue'
	import AccountActions from '../account_actions/account_actions.vue'
	import UserNote from '../user_note/user_note.vue'
	import Select from '../select/select.vue'
	import UserLink from '../user_link/user_link.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { mapGetters } from 'vuex'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faRss,
	faSearchPlus,
	faExternalLinkAlt,
	faEdit,
	faTimes,
	faExpandAlt
	} from '@fortawesome/free-solid-svg-icons'

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

	export default {
	props: [
	'userId',
	'switcher',
	'selected',
	'hideBio',
	'rounded',
	'bordered',
	'avatarAction', // default - open profile, 'zoom' - zoom, function - call function
	'onClose',
	'hasNoteEditor'
	],
	data () {
	return {
	followRequestInProgress: false,
	betterShadow: this.$store.state.interface.browserSupport.cssFilter,
	showingConfirmMute: false,
	muteExpiryAmount: 0,
	muteExpiryUnit: 'minutes'
	}
	},
	created () {
	this.$store.dispatch('fetchUserRelationship', this.user.id)
	},
	computed: {
	user () {
	return this.$store.getters.findUser(this.userId)
	},
	relationship () {
	return this.$store.getters.relationship(this.userId)
	},
	classes () {
	return [{
	'-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
	'-rounded': this.rounded === true, // set border-radius for all sides
	'-bordered': this.bordered === true, // set border for all sides
	'-popover': !!this.onClose // set popover rounding
	}]
	},
	style () {
	return {
	backgroundImage: [
	'linear-gradient(to bottom, var(--profileTint), var(--profileTint))',
	`url(${this.user.cover_photo})`
	].join(', ')
	}
	},
	isOtherUser () {
	return this.user.id !== this.$store.state.users.currentUser.id
	},
	subscribeUrl () {
	// eslint-disable-next-line no-undef
	const serverUrl = new URL(this.user.statusnet_profile_url)
	return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
	},
	loggedIn () {
	return this.$store.state.users.currentUser
	},
	dailyAvg () {
	const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
	return Math.round(this.user.statuses_count / days)
	},
	userHighlightType: {
	get () {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return (data && data.type) \|\| 'disabled'
	},
	set (type) {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	if (type !== 'disabled') {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) \|\| '#FFFFFF', type })
	} else {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
	}
	},
	...mapGetters(['mergedConfig'])
	},
	userHighlightColor: {
	get () {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return data && data.color
	},
	set (color) {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
	}
	},
	visibleRole () {
	const rights = this.user.rights
	if (!rights) { return }
	const validRole = rights.admin \|\| rights.moderator
	const roleTitle = rights.admin ? 'admin' : 'moderator'
	return validRole && roleTitle
	},
	hideFollowsCount () {
	return this.isOtherUser && this.user.hide_follows_count
	},
	hideFollowersCount () {
	return this.isOtherUser && this.user.hide_followers_count
	},
	showModerationMenu () {
	const privileges = this.loggedIn.privileges
	return this.loggedIn.role === 'admin' \|\| privileges.includes('users_manage_activation_state') \|\| privileges.includes('users_delete') \|\| privileges.includes('users_manage_tags')
	},
	hasNote () {
	return this.relationship.note
	},
	supportsNote () {
	return 'note' in this.relationship
	},
	shouldConfirmMute () {
	return this.mergedConfig.modalOnMute
	},
	muteExpiryUnits () {
	return ['minutes', 'hours', 'days']
	},
	...mapGetters(['mergedConfig'])
	},
	components: {
	UserAvatar,
	RemoteFollow,
	ModerationTools,
	AccountActions,
	ProgressButton,
	FollowButton,
	Select,
	RichContent,
	UserLink,
	UserNote,
	ConfirmModal
	},
	methods: {
	showConfirmMute () {
	this.showingConfirmMute = true
	},
	hideConfirmMute () {
	this.showingConfirmMute = false
	},
	muteUser () {
	if (!this.shouldConfirmMute) {
	this.doMuteUser()
	} else {
	this.showConfirmMute()
	}
	},
	doMuteUser () {
	this.$store.dispatch('muteUser', {
	id: this.user.id,
	expiresIn: this.shouldConfirmMute ? unitToSeconds(this.muteExpiryUnit, this.muteExpiryAmount) : 0
	})
	this.hideConfirmMute()
	},
	unmuteUser () {
	this.$store.dispatch('unmuteUser', this.user.id)
	},
	subscribeUser () {
	return this.$store.dispatch('subscribeUser', this.user.id)
	},
	unsubscribeUser () {
	return this.$store.dispatch('unsubscribeUser', this.user.id)
	},
	setProfileView (v) {
	if (this.switcher) {
	const store = this.$store
	store.commit('setProfileView', { v })
	}
	},
	linkClicked ({ target }) {
	if (target.tagName === 'SPAN') {
	target = target.parentNode
	}
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	},
	userProfileLink (user) {
	return generateProfileLink(
	user.id, user.screen_name,
	this.$store.state.instance.restrictedNicknames
	)
	},
	openProfileTab () {
	this.$store.dispatch('openSettingsModalTab', 'profile')
	},
	zoomAvatar () {
	const attachment = {
	url: this.user.profile_image_url_original,
	mimetype: 'image'
	}
	this.$store.dispatch('setMedia', [attachment])
	this.$store.dispatch('setCurrentMedia', attachment)
	},
	mentionUser () {
	- this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
	+ this.$store.dispatch('openPostStatusModal', { profileMention: true, repliedUser: this.user })
	},
	onAvatarClickHandler (e) {
	if (this.onAvatarClick) {
	e.preventDefault()
	this.onAvatarClick()
	}
	}
	}
	}
	diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
	index 126b694694..9e068a1ecf 100644
	--- a/src/services/style_setter/style_setter.js
	+++ b/src/services/style_setter/style_setter.js
	@@ -1,288 +1,325 @@
	import { hex2rgb } from '../color_convert/color_convert.js'
	import { generatePreset } from '../theme_data/theme_data.service.js'
	import { init, getEngineChecksum } from '../theme_data/theme_data_3.service.js'
	import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js'
	import { getCssRules } from '../theme_data/css_utils.js'
	import { defaultState } from '../../modules/config.js'
	import { chunk } from 'lodash'

	+// On platforms where this is not supported, it will return undefined
	+// Otherwise it will return an array
	+const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
	+
	+const createStyleSheet = (id) => {
	+ if (supportsAdoptedStyleSheets) {
	+ return {
	+ el: null,
	+ sheet: new CSSStyleSheet(),
	+ rules: []
	+ }
	+ }
	+
	+ const el = document.getElementById(id)
	+ // Clear all rules in it
	+ for (let i = el.sheet.cssRules.length - 1; i >= 0; --i) {
	+ el.sheet.deleteRule(i)
	+ }
	+
	+ return {
	+ el,
	+ sheet: el.sheet,
	+ rules: []
	+ }
	+}
	+
	+const EAGER_STYLE_ID = 'pleroma-eager-styles'
	+const LAZY_STYLE_ID = 'pleroma-lazy-styles'
	+
	+const adoptStyleSheets = (styles) => {
	+ if (supportsAdoptedStyleSheets) {
	+ document.adoptedStyleSheets = styles.map(s => s.sheet)
	+ }
	+ // 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.
	+}
	+
	export const generateTheme = async (input, callbacks, debug) => {
	const {
	onNewRule = (rule, isLazy) => {},
	onLazyFinished = () => {},
	onEagerFinished = () => {}
	} = callbacks

	let extraRules
	if (input.themeFileVersion === 1) {
	extraRules = convertTheme2To3(input)
	} else {
	const { theme } = generatePreset(input)
	extraRules = convertTheme2To3(theme)
	}

	// Assuming that "worst case scenario background" is panel background since it's the most likely one
	const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('\|')[1].trim(), debug)

	console.log('DEBUG 2 IS', debug)

	getCssRules(themes3.eager, debug).forEach(rule => {
	// Hacks to support multiple selectors on same component
	if (rule.match(/::-webkit-scrollbar-button/)) {
	const parts = rule.split(/[{}]/g)
	const newRule = [
	parts[0],
	', ',
	parts[0].replace(/button/, 'thumb'),
	', ',
	parts[0].replace(/scrollbar-button/, 'resizer'),
	' {',
	parts[1],
	'}'
	].join('')
	onNewRule(newRule, false)
	} else {
	onNewRule(rule, false)
	}
	})
	onEagerFinished()

	// Optimization - instead of processing all lazy rules in one go, process them in small chunks
	// so that UI can do other things and be somewhat responsive while less important rules are being
	// processed
	let counter = 0
	const chunks = chunk(themes3.lazy, 200)
	// let t0 = performance.now()
	const processChunk = () => {
	const chunk = chunks[counter]
	Promise.all(chunk.map(x => x())).then(result => {
	getCssRules(result.filter(x => x), debug).forEach(rule => {
	if (rule.match(/\.modal-view/)) {
	const parts = rule.split(/[{}]/g)
	const newRule = [
	parts[0],
	', ',
	parts[0].replace(/\.modal-view/, '#modal'),
	', ',
	parts[0].replace(/\.modal-view/, '.shout-panel'),
	' {',
	parts[1],
	'}'
	].join('')
	onNewRule(newRule, true)
	} else {
	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 = () => {
	const json = localStorage.getItem('pleroma-fe-theme-cache')
	if (!json) return null
	let cache
	try {
	cache = JSON.parse(json)
	} catch (e) {
	console.error('Failed to decode theme cache:', e)
	return false
	}
	if (cache.engineChecksum === getEngineChecksum()) {
	- const styleSheet = new CSSStyleSheet()
	- const lazyStyleSheet = new CSSStyleSheet()
	+ const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
	+ const lazyStyles = createStyleSheet(LAZY_STYLE_ID)

	- cache.data[0].forEach(rule => styleSheet.insertRule(rule, 'index-max'))
	- cache.data[1].forEach(rule => lazyStyleSheet.insertRule(rule, 'index-max'))
	+ cache.data[0].forEach(rule => eagerStyles.sheet.insertRule(rule, 'index-max'))
	+ cache.data[1].forEach(rule => lazyStyles.sheet.insertRule(rule, 'index-max'))

	- document.adoptedStyleSheets = [styleSheet, lazyStyleSheet]
	+ adoptStyleSheets([eagerStyles, lazyStyles])

	return true
	} else {
	console.warn('Engine checksum doesn\'t match, cache not usable, clearing')
	localStorage.removeItem('pleroma-fe-theme-cache')
	}
	}

	export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
	- const styleSheet = new CSSStyleSheet()
	- const styleArray = []
	- const lazyStyleSheet = new CSSStyleSheet()
	- const lazyStyleArray = []
	+ const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
	+ const lazyStyles = createStyleSheet(LAZY_STYLE_ID)

	console.log('DEBUG IS', debug)

	const { lazyProcessFunc } = await generateTheme(
	input,
	{
	onNewRule (rule, isLazy) {
	if (isLazy) {
	- lazyStyleSheet.insertRule(rule, 'index-max')
	- lazyStyleArray.push(rule)
	+ lazyStyles.sheet.insertRule(rule, 'index-max')
	+ lazyStyles.rules.push(rule)
	} else {
	- styleSheet.insertRule(rule, 'index-max')
	- styleArray.push(rule)
	+ eagerStyles.sheet.insertRule(rule, 'index-max')
	+ eagerStyles.rules.push(rule)
	}
	},
	onEagerFinished () {
	- document.adoptedStyleSheets = [styleSheet]
	+ adoptStyleSheets([eagerStyles])
	},
	onLazyFinished () {
	- document.adoptedStyleSheets = [styleSheet, lazyStyleSheet]
	- const cache = { engineChecksum: getEngineChecksum(), data: [styleArray, lazyStyleArray] }
	+ adoptStyleSheets([eagerStyles, lazyStyles])
	+ const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
	onFinish(cache)
	localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
	}
	},
	debug
	)

	setTimeout(lazyProcessFunc, 0)

	return Promise.resolve()
	}

	const extractStyleConfig = ({
	sidebarColumnWidth,
	contentColumnWidth,
	notifsColumnWidth,
	emojiReactionsScale,
	emojiSize,
	navbarSize,
	panelHeaderSize,
	textSize,
	forcedRoundness
	}) => {
	const result = {
	sidebarColumnWidth,
	contentColumnWidth,
	notifsColumnWidth,
	emojiReactionsScale,
	emojiSize,
	navbarSize,
	panelHeaderSize,
	textSize
	}

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

	return result
	}

	const defaultStyleConfig = extractStyleConfig(defaultState)

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

	if (config === defaultStyleConfig) {
	return
	}

	const head = document.head
	const body = document.body
	body.classList.add('hidden')

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

	document.getElementById('style-config')?.remove()
	const styleEl = document.createElement('style')
	styleEl.id = 'style-config'
	head.appendChild(styleEl)
	const styleSheet = styleEl.sheet

	styleSheet.toString()
	styleSheet.insertRule(`:root { ${rules} }`, 'index-max')

	if (Object.prototype.hasOwnProperty.call(config, 'forcedRoundness')) {
	styleSheet.insertRule(` * {
	--roundness: var(--forcedRoundness) !important;
	}`, 'index-max')
	}

	body.classList.remove('hidden')
	}

	export const getThemes = () => {
	const cache = 'no-store'

	return window.fetch('/static/styles.json', { cache })
	.then((data) => data.json())
	.then((themes) => {
	return Object.entries(themes).map(([k, v]) => {
	let promise = null
	if (typeof v === 'object') {
	promise = Promise.resolve(v)
	} else if (typeof v === 'string') {
	promise = window.fetch(v, { cache })
	.then((data) => data.json())
	.catch((e) => {
	console.error(e)
	return null
	})
	}
	return [k, promise]
	})
	})
	.then((promises) => {
	return promises
	.reduce((acc, [k, v]) => {
	acc[k] = v
	return acc
	}, {})
	})
	}

	export const getPreset = (val) => {
	return getThemes()
	.then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
	.then((theme) => {
	const isV1 = Array.isArray(theme)
	const data = isV1 ? {} : theme.theme

	if (isV1) {
	const bg = hex2rgb(theme[1])
	const fg = hex2rgb(theme[2])
	const text = hex2rgb(theme[3])
	const link = hex2rgb(theme[4])

	const cRed = hex2rgb(theme[5] \|\| '#FF0000')
	const cGreen = hex2rgb(theme[6] \|\| '#00FF00')
	const cBlue = hex2rgb(theme[7] \|\| '#0000FF')
	const cOrange = hex2rgb(theme[8] \|\| '#E3FF00')

	data.colors = { bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
	}

	return { theme: data, source: theme.source }
	})
	}

	export const setPreset = (val) => getPreset(val).then(data => applyTheme(data))
	diff --git a/src/services/theme_data/iss_utils.js b/src/services/theme_data/iss_utils.js
	index 2d9dd0b59b..83ca824230 100644
	--- a/src/services/theme_data/iss_utils.js
	+++ b/src/services/theme_data/iss_utils.js
	@@ -1,129 +1,131 @@
	+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 uniqueComboStrings = new Set()
	- const uniqueCombos = flatCombos.map(x => x.toSorted()).filter(x => {
	+ 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], [])
	}

	// Converts rule, parents and their criteria into a CSS (or path if ignoreOutOfTreeSelector == true) selector
	export const genericRuleToSelector = components => (rule, ignoreOutOfTreeSelector, isParent) => {
	if (!rule && !isParent) return null
	const component = components[rule.component]
	const { states = {}, variants = {}, selector, outOfTreeSelector } = component

	const applicableStates = ((rule.state \|\| []).filter(x => x !== 'normal')).map(state => states[state])

	const applicableVariantName = (rule.variant \|\| 'normal')
	let applicableVariant = ''
	if (applicableVariantName !== 'normal') {
	applicableVariant = variants[applicableVariantName]
	} else {
	applicableVariant = variants?.normal ?? ''
	}

	let realSelector
	if (selector === ':root') {
	realSelector = ''
	} else if (isParent) {
	realSelector = selector
	} else {
	if (outOfTreeSelector && !ignoreOutOfTreeSelector) realSelector = outOfTreeSelector
	else realSelector = selector
	}

	const selectors = [realSelector, applicableVariant, ...applicableStates]
	- .toSorted((a, b) => {
	+ .sort((a, b) => {
	if (a.startsWith(':')) return 1
	if (/^[a-z]/.exec(a)) return -1
	else return 0
	})
	.join('')

	if (rule.parent) {
	return (genericRuleToSelector(components)(rule.parent, ignoreOutOfTreeSelector, true) + ' ' + selectors).trim()
	}
	return selectors.trim()
	}

	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
	}

	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
	}

	export const normalizeCombination = rule => {
	rule.variant = rule.variant ?? 'normal'
	rule.state = [...new Set(['normal', ...(rule.state \|\| [])])]
	}
	diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
	index 645f2e5ebf..d1043c522b 100644
	--- a/src/services/theme_data/theme_data_3.service.js
	+++ b/src/services/theme_data/theme_data_3.service.js
	@@ -1,474 +1,474 @@
	import { convert, brightness } from 'chromatism'
	import sum from 'hash-sum'
	-import { flattenDeep } from 'lodash'
	+import { flattenDeep, sortBy } from 'lodash'
	import {
	alphaBlend,
	getTextColor,
	rgba2css,
	mixrgb,
	relativeLuminance
	} from '../color_convert/color_convert.js'

	import {
	colorFunctions,
	shadowFunctions,
	process
	} from './theme3_slot_functions.js'

	import {
	unroll,
	getAllPossibleCombinations,
	genericRuleToSelector,
	normalizeCombination,
	findRules
	} from './iss_utils.js'
	import { parseCssShadow } from './css_utils.js'

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

	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('--')) {
	const [variable] = shadow.split(/,/g).map(str => str.trim()) // discarding modifier since it's not supported
	const variableSlot = variable.substring(2)
	return findShadow(staticVars[variableSlot], { dynamicVars, staticVars })
	} else {
	targetShadow = parseCssShadow(shadow)
	}
	} else {
	targetShadow = shadow
	}

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

	const findColor = (color, { dynamicVars, staticVars }) => {
	if (typeof color !== 'string' \|\| (!color.startsWith('--') && !color.startsWith('$'))) return color
	let targetColor = null
	if (color.startsWith('--')) {
	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 {
	switch (variableSlot) {
	case 'inheritedBackground':
	targetColor = convert(dynamicVars.inheritedBackground).rgb
	break
	case 'background':
	targetColor = convert(dynamicVars.background).rgb
	break
	default:
	targetColor = convert(staticVars[variableSlot]).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)
	targetColor = '#FF00FF'
	}
	}
	// Color references other color
	return targetColor
	}

	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 = require.context('src', true, /\.style.js(on)?$/)
	componentsContext.keys().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
	})

	const engineChecksum = sum(components)

	const ruleToSelector = genericRuleToSelector(components)

	export const getEngineChecksum = () => engineChecksum

	export const init = (extraRuleset, ultimateBackgroundColor, debug) => {
	const staticVars = {}
	const stacked = {}
	const computed = {}

	const rulesetUnsorted = [
	...Object.values(components)
	.map(c => (c.defaultRules \|\| []).map(r => ({ component: c.name, ...r, source: 'Built-in' })))
	.reduce((acc, arr) => [...acc, ...arr], []),
	...extraRuleset
	].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 }))
	.sort(({ data: a, index: ai }, { data: b, index: bi }) => {
	const parentsA = unroll(a).length
	const parentsB = unroll(b).length

	if (parentsA === parentsB) {
	if (a.component === 'Text') return -1
	if (b.component === 'Text') return 1
	return ai - bi
	}
	if (parentsA === 0 && parentsB !== 0) return -1
	if (parentsB === 0 && parentsA !== 0) return 1
	return parentsA - parentsB
	})
	.map(({ data }) => data)

	const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))

	const processCombination = (combination) => {
	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
	const lowerLevelBackground = computed[lowerLevelSelector]?.background
	const lowerLevelVirtualDirectives = computed[lowerLevelSelector]?.virtualDirectives
	const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw

	const dynamicVars = computed[selector] \|\| {
	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

	if (virtualComponents.has(combination.component)) {
	const virtualName = [
	'--',
	combination.component.toLowerCase(),
	combination.variant === 'normal'
	? ''
	: combination.variant[0].toUpperCase() + combination.variant.slice(1).toLowerCase(),
	- ...combination.state.filter(x => x !== 'normal').toSorted().map(state => state[0].toUpperCase() + state.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: {
	[virtualName]: getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
	},
	virtualDirectivesRaw: {
	[virtualName]: textColor
	}
	}
	} 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]
	if (lastVariantRule) {
	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, v]) => 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[0], { dynamicVars, staticVars })
	dynamicVars[k] = color
	if (combination.component === 'Root') {
	staticVars[k.substring(2)] = color
	}
	break
	}
	case 'shadow': {
	const shadow = value
	dynamicVars[k] = shadow
	if (combination.component === 'Root') {
	staticVars[k.substring(2)] = shadow
	}
	break
	}
	case 'generic': {
	dynamicVars[k] = value
	if (combination.component === 'Root') {
	staticVars[k.substring(2)] = value
	}
	break
	}
	}
	})

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

	return rule
	}
	}

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

	// 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 = [
	['normal'],
	...getAllPossibleCombinations(permutationStateKeys)
	.map(combination => ['normal', ...combination])
	.filter(combo => {
	// Optimization: filter out some hard-coded combinations that don't make sense
	if (combo.indexOf('disabled') >= 0) {
	return !(
	combo.indexOf('hover') >= 0 \|\|
	combo.indexOf('focused') >= 0 \|\|
	combo.indexOf('pressed') >= 0
	)
	}
	return true
	})
	]

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

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

	combinations.push(combination)

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

	return combinations
	}

	const t0 = performance.now()
	const combinations = processInnerComponent(components.Root)
	const t1 = performance.now()
	console.debug('Tree traveral took ' + (t1 - t0) + ' ms')

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

	return {
	lazy: result.filter(x => typeof x === 'function'),
	eager: result.filter(x => typeof x !== 'function'),
	staticVars,
	engineChecksum
	}
	}

File Metadata

Mime Type: text/x-diff
Expires: Fri, Oct 30, 4:55 AM (1 d, 1 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1796524
Default Alt Text: (67 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions