No OneTemporary
Actions

Authored By

Unknown

Size

83 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js
	index 35b0cbed14..b819c72aa2 100644
	--- a/src/components/moderation_tools/moderation_tools.js
	+++ b/src/components/moderation_tools/moderation_tools.js
	@@ -1,675 +1,672 @@
	import { last } from 'lodash'

	import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
	import Popover from 'src/components/popover/popover.vue'

	import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'

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

	library.add(faChevronDown)

	const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
	const STRIP_MEDIA = 'mrf_tag:media-strip'
	const FORCE_UNLISTED = 'mrf_tag:force-unlisted'
	const DISABLE_REMOTE_SUBSCRIPTION = 'mrf_tag:disable-remote-subscription'
	const DISABLE_ANY_SUBSCRIPTION = 'mrf_tag:disable-any-subscription'
	const SANDBOX = 'mrf_tag:sandbox'
	const QUARANTINE = 'mrf_tag:quarantine'
	const TAGS = new Set([
	FORCE_NSFW,
	STRIP_MEDIA,
	FORCE_UNLISTED,
	DISABLE_REMOTE_SUBSCRIPTION,
	DISABLE_ANY_SUBSCRIPTION,
	SANDBOX,
	QUARANTINE,
	])

	const ENTRIES = [
	{
	check: '!state:activated',
	label: 'user_card.admin_menu.activate_account',
	},
	{
	check: 'state:activated',
	label: 'user_card.admin_menu.deactivate_account',
	},
	{
	separator: true,
	},
	{
	check: '!state:confirmed',
	label: 'user_card.admin_menu.confirm_account',
	},
	{
	check: 'action:resend_confirmation',
	conditions: ['!state:confirmed'],
	label: 'user_card.admin_menu.resend_confirmation',
	},
	// No API for revocation
	// {
	// check: 'state:confirmed',
	// label: 'user_card.admin_menu.unconfirm_account',
	// },
	{
	check: '!state:approved',
	conditions: ['property:local'],
	label: 'user_card.admin_menu.approve_account',
	},
	// No API for revocation
	// {
	// check: 'state:approved',
	// label: 'user_card.admin_menu.unapprove_account',
	// },
	{
	check: '!state:suggested',
	// conditions: ['property:local'], // TODO Should we allow non-local users in suggested?
	label: 'user_card.admin_menu.suggest_account',
	},
	{
	check: 'state:suggested',
	label: 'user_card.admin_menu.remove_suggested_account',
	},
	{
	separator: true,
	},
	{
	check: 'action:statuses',
	label: 'user_card.admin_menu.show_statuses',
	conditions: ['count:1'],
	},
	{
	separator: true,
	},
	{
	check: 'action:disable_mfa',
	label: 'user_card.admin_menu.disable_mfa',
	},
	{
	check: 'action:require_password_change',
	label: 'user_card.admin_menu.require_password_change',
	},
	{
	separator: true,
	},
	{
	check: '!rights:moderator',
	label: 'user_card.admin_menu.grant_moderator',
	conditions: ['property:local', 'state:activated'],
	},
	{
	check: 'rights:moderator',
	label: 'user_card.admin_menu.revoke_moderator',
	conditions: ['property:local', 'state:activated'],
	},
	{
	check: '!rights:admin',
	label: 'user_card.admin_menu.grant_admin',
	conditions: ['property:local', 'state:activated'],
	},
	{
	check: 'rights:admin',
	label: 'user_card.admin_menu.revoke_admin',
	conditions: ['property:local', 'state:activated'],
	},
	{
	separator: true,
	},
	{
	check: FORCE_NSFW,
	label: 'user_card.admin_menu.force_nsfw',
	},
	{
	check: STRIP_MEDIA,
	label: 'user_card.admin_menu.strip_media',
	},
	{
	check: FORCE_UNLISTED,
	label: 'user_card.admin_menu.force_unlisted',
	},
	{
	check: SANDBOX,
	label: 'user_card.admin_menu.sandbox',
	},
	{
	check: DISABLE_ANY_SUBSCRIPTION,
	conditions: ['property:local'],
	label: 'user_card.admin_menu.disable_any_subscription',
	},
	{
	check: DISABLE_REMOTE_SUBSCRIPTION,
	conditions: ['property:local'],
	label: 'user_card.admin_menu.disable_remote_subscription',
	},
	{
	check: QUARANTINE,
	conditions: ['property:local'],
	label: 'user_card.admin_menu.quarantine',
	},
	{
	separator: true,
	},
	{
	check: 'action:delete',
	label: 'user_card.admin_menu.delete_account',
	},
	]

	const ModerationTools = {
	props: {
	users: {
	type: Array,
	required: true,
	},
	},
	created() {
	if (this.users.length !== 1) return
	useAdminSettingsStore().getUserData({ user: this.users[0] })
	},
	data() {
	return {
	open: false,
	confirmDialogShow: false,
	confirmDialogTitle: null,
	confirmDialogContent: null,
	confirmDialogConfirm: null,
	confirmDialogAction: null,
	confirmDialogGroup: null,
	confirmDialogName: null,
	}
	},
	components: {
	ConfirmModal,
	Popover,
	},
	computed: {
	ready() {
	return this.users.every((u) => u.adminData)
	},
	entries() {
	return ENTRIES.map(({ check, label, separator, conditions }) => {
	if (separator) return 'separator'
	const [, negateToken, group, name] =
	/^([!~]?)([a-z-_]+):([a-z-_]+)$/.exec(check)

	const hasTag = this.tagsSet.has(`${group}:${name}`)
	const noTag = this.tagsSet.has(`!${group}:${name}`)
	const maybeTag = this.tagsSet.has(`~${group}:${name}`)

	// We are checking for condition to show element, i.e. only show "activate" if user is "deactivated"
	const checkNegated = negateToken === '!' \|\| negateToken === '~'

	// Naturally, new value should also be the same
	const value = checkNegated

	const action = (() => {
	switch (group) {
	case 'rights':
	return () => this.setRight(name, value)
	case 'state':
	return () => this.setStatus(name, value)
	case 'mrf_tag':
	return () => this.setTag(`${group}:${name}`, noTag)
	case 'action': {
	switch (name) {
	case 'delete':
	return () => this.deleteUsers()
	case 'resend_confirmation':
	return () => this.resendConfirmationEmail()
	case 'disable_mfa':
	return () => this.disableMFA()
	case 'statuses':
	return () =>
	this.$router.push(`/users/\$${this.users[0].id}/admin_view`)
	case 'require_password_change':
	return () => this.requirePasswordChange()
	default:
	throw new Error(`Unknown action group: ${name}`)
	}
	}
	default:
	throw new Error(`Unknown moderation group: ${group}`)
	}
	})()

	let checkboxClass = ''
	if (maybeTag) {
	checkboxClass = 'menu-checkbox-indeterminate'
	} else if (hasTag) {
	checkboxClass = 'menu-checkbox-checked'
	}

	return {
	check,
	negateToken,
	checkbox: group === 'mrf_tag',
	checkboxClass,
	conditions,
	group,
	name,
	action,
	label,
	value,
	}
	})
	.filter((entry) => {
	if (entry === 'separator') return true
	const { group, name, value, conditions } = entry

	if (conditions) {
	// Checking that all items match positive criteria
	const positive = conditions.every((condition) =>
	this.totalSet.has(condition),
	)
	// Checking that there are no items that don't match criteria
	const negative = conditions.some((condition) =>
	this.totalSet.has('!' + condition),
	)
	if (!(positive && !negative)) return false
	}

	switch (group) {
	case 'action':
	if (name === 'statuses') return this.privileged('users_read')
	else return true
	case 'rights':
	return this.canGrantRole(name, value)
	case 'state':
	return this.canChangeState(name, value)
	case 'mrf_tag':
	return this.canUseTagPolicy
	default: {
	throw new Error(`Unknown moderation group: ${group}`)
	}
	}
	})
	.reduce((acc, entry, index) => {
	// Removing any double separators as well
	// as separators at very end and bery beginning
	if (entry === 'separator') {
	if (
	acc.length === 0 \|\|
	last(acc) === 'separator' \|\|
	index === ENTRIES.length - 1
	) {
	return acc
	}
	}
	return [...acc, entry]
	}, [])
	},
	rightsSet() {
	return this.users.reduce((acc, user) => {
	if (user.rights.admin) {
	acc.add('rights:admin')
	} else {
	acc.add('!rights:admin')
	}
	if (user.rights.moderator) {
	acc.add('rights:moderator')
	} else {
	acc.add('!rights:moderator')
	}
	return acc
	}, new Set())
	},
	stateSet() {
	return this.users.reduce((acc, user) => {
	if (!user.deactivated) {
	acc.add('state:activated')
	} else {
	acc.add('!state:activated')
	}
	if (user.adminData?.is_confirmed) {
	acc.add('state:confirmed')
	} else {
	acc.add('!state:confirmed')
	}
	if (user.adminData?.is_approved) {
	acc.add('state:approved')
	} else {
	acc.add('!state:approved')
	}
	if (user.adminData?.is_suggested) {
	acc.add('state:suggested')
	} else {
	acc.add('!state:suggested')
	}
	return acc
	}, new Set())
	},
	tagsSet() {
	const present = new Set()
	const missing = new Set()

	this.users.forEach((user) => {
	TAGS.forEach((tag) => {
	if (user.tags.has(tag)) {
	present.add(tag)
	} else {
	missing.add(tag)
	}
	})
	})

	const result = new Set()

	// Each tag can have three states for given group of users
	TAGS.forEach((tag) => {
	if (present.has(tag) && missing.has(tag)) {
	// Some users have tag, some don't: "~tag"
	result.add(`~${tag}`)
	} else if (missing.has(tag)) {
	// No users have tag: "!tag"
	result.add(`!${tag}`)
	} else {
	// All users have tag: "tag"
	result.add(tag)
	}
	})

	return result
	},
	propertySet() {
	return this.users.reduce((acc, user) => {
	if (user.is_local) {
	acc.add('property:local')
	} else {
	acc.add('!property:local')
	}
	return acc
	}, new Set())
	},
	disabled() {
	return !this.ready \|\| this.users.length === 0
	},
	totalSet() {
	return new Set([
	...this.rightsSet,
	...this.stateSet,
	...this.tagsSet,
	...this.propertySet,
	`count:${this.users.length}`,
	])
	},
	canDeleteAccount() {
	return this.privileged('users_delete')
	},
	canUseTagPolicy() {
	return (
	useInstanceCapabilitiesStore().tagPolicyAvailable &&
	this.privileged('users_manage_tags')
	)
	},
	isAdmin() {
	this.$store.state.users.currentUser.role === 'admin'
	- }
	+ },
	},
	methods: {
	canGrantRole(name, value) {
	const setEntry = `${value ? '!' : ''}rights:${name}`

	- return (
	- this.isAdmin &&
	- this.totalSet.has(setEntry)
	- )
	+ return this.isAdmin && this.totalSet.has(setEntry)
	},
	canChangeState(name, value) {
	const setEntry = `${value ? '!' : ''}state:${name}`
	const privilege = (() => {
	switch (name) {
	case 'activated':
	return 'users_manage_activation_state'
	case 'approved':
	return 'users_manage_invites'
	case 'confirmed':
	return 'users_manage_credentials'
	default:
	return null
	}
	})()

	return this.privileged(privilege) && this.totalSet.has(setEntry)
	},
	doConfirmDialogAction() {
	if (typeof this.confirmDialogAction !== 'function') {
	console.error('Confirm Dialog action is not a function!!')
	}

	this.confirmDialogAction()
	this.clearConfirmDialog()
	},
	clearConfirmDialog() {
	this.confirmDialogShow = false
	this.confirmDialogTitle = null
	this.confirmDialogContent = null
	this.confirmDialogContent2 = null
	this.confirmDialogDanger = false
	this.confirmDialogConfirm = null
	this.confirmDialogAction = null
	this.confirmDialogGroup = null
	this.confirmDialogName = null
	},
	privileged(privilege) {
	if (this.isAdmin) return true
	return this.$store.state.users.currentUser.privileges.has(privilege)
	},
	setTag(tag, value) {
	useAdminSettingsStore().setUsersTags({
	users: this.users,
	value,
	tags: [tag],
	})
	},
	setRight(right, value) {
	useAdminSettingsStore().setUsersRight({ users: this.users, value, right })
	},
	setStatus(name, value) {
	const noun = (() => {
	switch (name) {
	case 'activated':
	return 'Activation'
	case 'confirmed':
	return 'Confirmation'
	case 'approved':
	return 'Approval'
	case 'suggested':
	return 'Suggestion'
	}
	})()

	useAdminSettingsStore()[`setUsers${noun}Status`]({
	users: this.users,
	value,
	})
	},
	resendConfirmationEmail() {
	useAdminSettingsStore().resendConfirmationEmail({ users: this.users })
	},
	requirePasswordChange() {
	useAdminSettingsStore().requirePasswordChange({ users: this.users })
	},
	disableMFA() {
	this.users.forEach((user) => {
	useAdminSettingsStore().disableMFA({ user })
	})
	},
	deleteUsers() {
	const { id, name } = this.users[0]

	useAdminSettingsStore()
	.deleteUsers({ users: this.users })
	.then((userIds) => {
	if (userIds.length > 1) return

	const isProfile =
	this.$route.name === 'external-user-profile' \|\|
	this.$route.name === 'user-profile'
	const isTargetUser =
	this.$route.params.name === name \|\| this.$route.params.id === id

	if (isProfile && isTargetUser) {
	window.history.back()
	}
	})
	},
	setOpen(value) {
	this.open = value
	},
	maybeShowConfirm(close, { group, name, action, value }) {
	close()
	this.confirmDialogName = name
	this.confirmDialogGroup = group
	this.confirmDialogAction = () => action()

	switch (group) {
	case 'action': {
	switch (name) {
	case 'delete': {
	this.confirmDialogShow = true
	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.confirm_modal.delete_title',
	)
	this.confirmDialogDanger = true
	this.confirmDialogContent =
	'user_card.admin_menu.confirm_modal.delete_content'
	this.confirmDialogContent2 =
	'user_card.admin_menu.confirm_modal.delete_content_2'
	this.confirmDialogConfirm = this.$t(
	'user_card.admin_menu.confirm_modal.delete',
	)
	break
	}
	case 'resend_confirmation': {
	this.confirmDialogShow = true
	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.confirm_modal.resend_confirmation_title',
	)
	this.confirmDialogContent =
	'user_card.admin_menu.confirm_modal.resend_confirmation_content'
	this.confirmDialogConfirm = this.$t(
	'user_card.admin_menu.confirm_modal.send',
	)
	break
	}
	case 'disable_mfa': {
	this.confirmDialogShow = true
	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.confirm_modal.disable_mfa_title',
	)
	this.confirmDialogContent =
	'user_card.admin_menu.confirm_modal.disable_mfa_content'
	this.confirmDialogConfirm = this.$t('settings.confirm')
	break
	}
	case 'require_password_change': {
	this.confirmDialogShow = true
	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.confirm_modal.require_password_change_title',
	)
	this.confirmDialogContent =
	'user_card.admin_menu.confirm_modal.require_password_change_content'
	this.confirmDialogConfirm = this.$t('settings.confirm')
	break
	}
	}
	break
	}
	case 'state': {
	switch (name) {
	case 'activated': {
	this.confirmDialogShow = true

	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.confirm_modal.activate_title',
	)
	this.confirmDialogContent = value
	? 'user_card.admin_menu.confirm_modal.activate_content'
	: 'user_card.admin_menu.confirm_modal.deactivate_content'
	this.confirmDialogConfirm = value
	? this.$t('user_card.admin_menu.confirm_modal.activate')
	: this.$t('user_card.admin_menu.confirm_modal.deactivate')
	break
	}
	// Confirmation and Approval statuses cannot be revokedn(no API)
	case 'confirmed': {
	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.confirm_modal.confirm_title',
	)
	this.confirmDialogContent = //value
	/?/ 'user_card.admin_menu.confirm_modal.confirm_content'
	//: 'user_card.admin_menu.confirm_modal.confirm_revoke_content'
	this.confirmDialogConfirm = value
	/?/ this.$t('user_card.admin_menu.confirm_modal.confirm')
	//: this.$t('user_card.admin_menu.confirm_modal.revoke')
	break
	}
	case 'approved': {
	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.confirm_modal.approval_title',
	)
	this.confirmDialogContent = //value
	/?/ 'user_card.admin_menu.confirm_modal.approval_content'
	//: 'user_card.admin_menu.confirm_modal.approval_revoke_content'
	this.confirmDialogConfirm = value
	/?/ this.$t('user_card.admin_menu.confirm_modal.approve')
	//: this.$t('user_card.admin_menu.confirm_modal.revoke')
	break
	}
	case 'suggested': {
	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.confirm_modal.suggest_title',
	)
	this.confirmDialogContent = value
	? 'user_card.admin_menu.confirm_modal.add_suggest_content'
	: 'user_card.admin_menu.confirm_modal.remove_suggest_content'
	this.confirmDialogConfirm = value
	? this.$t('user_card.admin_menu.confirm_modal.add')
	: this.$t('user_card.admin_menu.confirm_modal.remove')
	break
	}
	}
	break
	}
	case 'rights': {
	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.confirm_modal.user_rights_title',
	)
	this.confirmDialogContent = value
	? 'user_card.admin_menu.confirm_modal.grant_role_content'
	: 'user_card.admin_menu.confirm_modal.revoke_role_content'
	this.confirmDialogConfirm = value
	? this.$t('user_card.admin_menu.confirm_modal.grant')
	: this.$t('user_card.admin_menu.confirm_modal.revoke')
	break
	}
	case 'mrf_tag': {
	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.user_tag_title',
	)
	this.confirmDialogContent = value
	? 'user_card.admin_menu.confirm_modal.assign_tag_content'
	: 'user_card.admin_menu.confirm_modal.unassign_tag_content'
	this.confirmDialogConfirm = value
	? this.$t('user_card.admin_menu.confirm_modal.assign')
	: this.$t('user_card.admin_menu.confirm_modal.unassign')
	break
	}
	}

	if (this.users.length > 1) {
	this.confirmDialogShow = true
	}

	if (!this.confirmDialogShow) {
	this.doConfirmDialogAction()
	}
	},
	},
	}

	export default ModerationTools
	diff --git a/src/components/settings_modal/admin_tabs/users_tab.js b/src/components/settings_modal/admin_tabs/users_tab.js
	index 939a5a8567..ab40c723ab 100644
	--- a/src/components/settings_modal/admin_tabs/users_tab.js
	+++ b/src/components/settings_modal/admin_tabs/users_tab.js
	@@ -1,120 +1,119 @@
	import { isEmpty } from 'lodash'

	import BasicUserCard from 'src/components/basic_user_card/basic_user_card.vue'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import List from 'src/components/list/list.vue'
	import ModerationTools from 'src/components/moderation_tools/moderation_tools.vue'
	import Select from 'src/components/select/select.vue'
	import AdminUserCard from 'src/components/settings_modal/admin_tabs/admin_user_card.vue'

	import { useAdminSettingsStore } from 'src/stores/admin_settings.js'

	const UsersTab = {
	components: {
	Checkbox,
	Select,
	BasicUserCard,
	List,
	AdminUserCard,
	ModerationTools,
	},
	data() {
	return {
	filtersOrigin: 'local',
	filtersActivity: 'all',
	filtersPrivileges: 'all',
	filtersNeedApproval: false,
	filtersUnconfirmed: false,
	filtersQuery: '',
	filtersName: '',
	filtersEmail: '',
	expandedUser: null,
	}
	},
	computed: {
	/**
	* do we filter for admins?
	* @returns {boolean}
	*/
	filtersIsAdmin() {
	return (
	this.filtersPrivileges === 'admin' \|\|
	this.filtersPrivileges === 'modsnadmins'
	)
	},
	/**
	* do we filter for moderators?
	* @returns {boolean}
	*/
	filtersIsModerator() {
	return (
	this.filtersPrivileges === 'moderator' \|\|
	this.filtersPrivileges === 'modsnadmins'
	)
	},
	/**
	* do we filter for active users?
	* @returns {boolean}
	*/
	filtersActive() {
	return this.filtersActivity === 'active'
	},
	/**
	* do we filter for deactivated users?
	* @returns {boolean}
	*/
	filtersDeactivated() {
	return this.filtersActivity === 'deactivated'
	},
	/**
	* do we filter for local users?
	* @returns {boolean}
	*/
	filtersLocal() {
	return this.filtersOrigin === 'local'
	},
	/**
	* do we filter for external users?
	* @return {boolean}
	*/
	filtersExternal() {
	return this.filtersOrigin === 'external'
	},
	fetchOptions() {
	const filters = {
	isAdmin: this.filtersIsAdmin,
	isModerator: this.filtersIsModerator,
	active: this.filtersActive,
	deactivated: this.filtersDeactivated,
	local: this.filtersLocal,
	external: this.filtersExternal,
	needApproval: this.filtersNeedApproval,
	unconfirmed: this.filtersUnconfirmed,
	}

	return {
	query: this.filtersQuery,
	name: this.filtersName,
	email: this.filtersEmail,
	pageSize: 50,
	filters,
	}
	},
	},
	methods: {
	fetchUsers(page) {
	- return useAdminSettingsStore()
	- .fetchUsers({
	- ...this.fetchOptions,
	- page,
	- })
	+ return useAdminSettingsStore().fetchUsers({
	+ ...this.fetchOptions,
	+ page,
	+ })
	},
	},
	watch: {
	fetchOptions() {
	this.$refs.usersList?.reset()
	},
	},
	}

	export default UsersTab
	diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
	index 04e42cc9e9..216ce1b7cf 100644
	--- a/src/components/settings_modal/settings_modal.js
	+++ b/src/components/settings_modal/settings_modal.js
	@@ -1,284 +1,284 @@
	import { cloneDeep, isEqual } from 'lodash'
	import { mapActions, mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

	import AsyncComponentError from 'src/components/async_component_error/async_component_error.vue'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import Modal from 'src/components/modal/modal.vue'
	import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
	import Popover from 'src/components/popover/popover.vue'

	import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useLocalConfigStore } from 'src/stores/local_config.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'

	import {
	LOCAL_ONLY_KEYS,
	ROOT_CONFIG,
	ROOT_CONFIG_DEFINITIONS,
	validateSetting,
	} from 'src/modules/default_config_state.js'
	import {
	newExporter,
	newImporter,
	} from 'src/services/export_import/export_import.js'
	import getResettableAsyncComponent from 'src/services/resettable_async_component.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faWindowMinimize } from '@fortawesome/free-regular-svg-icons'
	import {
	faChevronDown,
	faFileDownload,
	faFileUpload,
	faTimes,
	} from '@fortawesome/free-solid-svg-icons'

	const PLEROMAFE_SETTINGS_MAJOR_VERSION = 1
	const PLEROMAFE_SETTINGS_MINOR_VERSION = 0

	library.add(
	faTimes,
	faWindowMinimize,
	faFileUpload,
	faFileDownload,
	faChevronDown,
	)

	const SettingsModal = {
	data() {
	return {
	dataImporter: newImporter({
	validator: this.importValidator,
	onImport: this.onImport,
	onImportFailure: this.onImportFailure,
	}),
	dataThemeExporter: newExporter({
	filename: 'pleromafe_settings.full',
	getExportedObject: () => this.generateExport(true),
	}),
	dataExporter: newExporter({
	filename: 'pleromafe_settings',
	getExportedObject: () => this.generateExport(),
	}),
	}
	},
	components: {
	Modal,
	Popover,
	Checkbox,
	ConfirmModal: defineAsyncComponent(
	() => import('src/components/confirm_modal/confirm_modal.vue'),
	),

	SettingsModalUserContent: getResettableAsyncComponent(
	() => import('./settings_modal_user_content.vue'),
	{
	loadingComponent: PanelLoading,
	errorComponent: AsyncComponentError,
	delay: 0,
	},
	),
	SettingsModalAdminContent: getResettableAsyncComponent(
	() => import('./settings_modal_admin_content.vue'),
	{
	loadingComponent: PanelLoading,
	errorComponent: AsyncComponentError,
	delay: 0,
	},
	),
	},
	methods: {
	closeModal() {
	useInterfaceStore().closeSettingsModal()
	},
	toggleMinimizeModal(state) {
	useInterfaceStore().toggleMinimizeSettingsModal()
	},
	minimizeModal() {
	useInterfaceStore().setSettingsModalState('minimized')
	},
	importValidator(data) {
	if (!Array.isArray(data._pleroma_settings_version)) {
	return {
	messageKey: 'settings.file_import_export.invalid_file',
	}
	}

	const [major, minor] = data._pleroma_settings_version

	if (major > PLEROMAFE_SETTINGS_MAJOR_VERSION) {
	return {
	messageKey: 'settings.file_export_import.errors.file_too_new',
	messageArgs: {
	fileMajor: major,
	feMajor: PLEROMAFE_SETTINGS_MAJOR_VERSION,
	},
	}
	}

	if (major < PLEROMAFE_SETTINGS_MAJOR_VERSION) {
	return {
	messageKey: 'settings.file_export_import.errors.file_too_old',
	messageArgs: {
	fileMajor: major,
	feMajor: PLEROMAFE_SETTINGS_MAJOR_VERSION,
	},
	}
	}

	if (minor > PLEROMAFE_SETTINGS_MINOR_VERSION) {
	useInterfaceStore().pushGlobalNotice({
	level: 'warning',
	messageKey: 'settings.file_export_import.errors.file_slightly_new',
	})
	}

	return true
	},
	onImportFailure(result) {
	if (result.error) {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'settings.invalid_settings_imported',
	level: 'error',
	})
	} else {
	useInterfaceStore().pushGlobalNotice({
	...result.validationResult,
	level: 'error',
	})
	}
	},
	onImport(input) {
	if (!input) return
	const { _pleroma_settings_version, ...data } = input

	Object.entries(data).forEach(([path, value]) => {
	const definition = ROOT_CONFIG_DEFINITIONS[path]

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

	if (finalValue === undefined) return

	if (LOCAL_ONLY_KEYS.has(path)) {
	useLocalConfigStore().set({ path, value: finalValue })
	} else {
	if (path.startsWith('muteFilters')) {
	Object.keys(
	useMergedConfigStore().mergedConfig.muteFilters,
	).forEach((key) => {
	useSyncConfigStore().unsetPreference({
	path: `simple.${path}.${key}`,
	})
	})

	Object.entries(value).forEach(([key, filter]) => {
	useSyncConfigStore().setPreference({
	path: `simple.${path}.${key}`,
	value: filter,
	})
	})
	} else {
	if (finalValue !== undefined) {
	useSyncConfigStore().setPreference({
	path: `simple.${path}`,
	value: finalValue,
	})
	}
	}
	}
	})
	useSyncConfigStore().pushSyncConfig()
	},
	restore() {
	this.dataImporter.importData()
	},
	backup() {
	this.dataExporter.exportData()
	},
	backupWithTheme() {
	this.dataThemeExporter.exportData()
	},
	generateExport(theme = false) {
	const config = useMergedConfigStore().mergedConfigWithoutDefaults
	let sample = config
	if (!theme) {
	const ignoreList = new Set([
	'theme',
	'customTheme',
	'customThemeSource',
	'colors',
	'style',
	'styleCustomData',
	'palette',
	'paletteCustomData',
	'themeChecksum',
	])

	sample = Object.fromEntries(
	Object.entries(sample).filter(
	([key, value]) => !ignoreList.has(key) && value !== undefined,
	),
	)
	}
	const clone = cloneDeep(sample)
	clone._pleroma_settings_version = [
	PLEROMAFE_SETTINGS_MAJOR_VERSION,
	PLEROMAFE_SETTINGS_MINOR_VERSION,
	]
	return clone
	},
	resetAdminDraft() {
	useAdminSettingsStore().resetAdminDraft()
	},
	pushAdminDraft() {
	useAdminSettingsStore().pushAdminDraft()
	},
	...mapActions(useInterfaceStore, [
	'temporaryChangesRevert',
	'temporaryChangesConfirm',
	]),
	},
	computed: {
	...mapState(useInterfaceStore, {
	temporaryChangesCountdown: (store) => store.temporaryChangesCountdown,
	currentSaveStateNotice: (store) => store.settings.currentSaveStateNotice,
	modalActivated: (store) => store.settingsModalState !== 'hidden',
	modalMode: (store) => store.settingsModalMode,
	modalOpenedOnceUser: (store) => store.settingsModalLoadedUser,
	modalOpenedOnceAdmin: (store) => store.settingsModalLoadedAdmin,
	modalMinimized: (store) => store.settingsModalState === 'minimized',
	}),
	expertLevel: {
	get() {
	return useMergedConfigStore().mergedConfig.expertLevel > 0
	},
	set(value) {
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'expertLevel',
	value: value ? 1 : 0,
	})
	},
	},
	adminDraftAny() {
	return !isEqual(
	useAdminSettingsStore().config,
	useAdminSettingsStore().draft,
	)
	},
	},
	watch: {
	$route(r) {
	this.minimizeModal()
	- }
	+ },
	},
	}

	export default SettingsModal
	diff --git a/src/components/user_profile/user_profile_admin_view.js b/src/components/user_profile/user_profile_admin_view.js
	index 887c21b8dd..94092b1557 100644
	--- a/src/components/user_profile/user_profile_admin_view.js
	+++ b/src/components/user_profile/user_profile_admin_view.js
	@@ -1,71 +1,71 @@
	import { get } from 'lodash'
	import { mapState } from 'pinia'

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import List from 'src/components/list/list.vue'
	import Status from 'src/components/status/status.vue'
	import UserCard from 'src/components/user_card/user_card.vue'

	import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
	import { useInterfaceStore } from 'src/stores/interface.js'

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

	library.add(faCircleNotch)

	const UserProfileAdminView = {
	data() {
	return {
	godmode: false,
	showReblogs: false,
	}
	},
	created() {
	this.$store.dispatch('fetchUserIfMissing', this.userId)
	useInterfaceStore().setForeignProfileBackground(this.user?.background_image)
	},
	updated() {
	useInterfaceStore().setForeignProfileBackground(this.user?.background_image)
	},
	unmounted() {
	useInterfaceStore().setForeignProfileBackground(null)
	},
	computed: {
	fetchOptions() {
	return {
	pageSize: 20,
	godmode: this.godmode,
	id: this.userId,
	withReblogs: this.showReblogs,
	}
	},
	user() {
	return this.$store.getters.findUser(this.userId)
	},
	userId() {
	return this.$route.params.id
	- }
	+ },
	},
	methods: {
	fetchStatuses(page) {
	return useAdminSettingsStore().fetchStatuses({
	...this.fetchOptions,
	page,
	})
	},
	},
	components: {
	UserCard,
	List,
	Status,
	Checkbox,
	},
	watch: {
	fetchOptions() {
	this.$refs.list.reset()
	},
	},
	}

	export default UserProfileAdminView
	diff --git a/src/modules/statuses.js b/src/modules/statuses.js
	index b1df27ed8c..b4f0a93bf0 100644
	--- a/src/modules/statuses.js
	+++ b/src/modules/statuses.js
	@@ -1,836 +1,838 @@
	import {
	each,
	find,
	findIndex,
	first,
	isArray,
	last,
	maxBy,
	merge,
	minBy,
	omitBy,
	remove,
	slice,
	} from 'lodash'

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

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

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

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

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

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

	return status
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	sortTimeline(dms)
	}
	}

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

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

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

	return status
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	export default statuses
	diff --git a/src/stores/interface.js b/src/stores/interface.js
	index f09f97648c..b7fd4060b9 100644
	--- a/src/stores/interface.js
	+++ b/src/stores/interface.js
	@@ -1,765 +1,767 @@
	import { defineStore } from 'pinia'

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

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

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

	export const useInterfaceStore = defineStore('interface', {
	state: () => ({
	localFonts: null,
	themeApplied: false,
	themeChangeInProgress: false,
	themeVersion: 'v3',
	styleNameUsed: null,
	styleDataUsed: null,
	useStylePalette: false, // hack for applying styles from appearance tab
	paletteNameUsed: null,
	paletteDataUsed: null,
	themeNameUsed: null,
	themeDataUsed: null,
	temporaryChangesTimeoutId: null,
	temporaryChangesCountdown: -1, // used for temporary options that revert after a timeout
	temporaryChangesConfirm: () => {
	/* no-op */
	}, // used for applying temporary options
	temporaryChangesRevert: () => {
	/* no-op */
	}, // used for reverting temporary options
	settingsModalState: 'hidden',
	settingsModalLoadedUser: false,
	settingsModalLoadedAdmin: false,
	settingsModalTargetTab: null,
	settingsModalMode: 'user',
	settings: {
	currentSaveStateNotice: null,
	noticeClearTimeout: null,
	notificationPermission: null,
	},
	browserSupport: {
	cssFilter:
	window.CSS &&
	window.CSS.supports &&
	(window.CSS.supports('filter', 'drop-shadow(0 0)') \|\|
	window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')),
	localFonts: typeof window.queryLocalFonts === 'function',
	},
	layoutType: 'normal',
	globalNotices: [],
	layoutHeight: 0,
	lastTimeline: null,
	foreignProfileBackground: null,
	}),
	actions: {
	setTemporaryChanges({ confirm, revert }) {
	this.temporaryChangesCountdown = 10
	this.temporaryChangesConfirm = confirm
	this.temporaryChangesRevert = revert
	const countdownFunc = () => {
	if (this.temporaryChangesCountdown <= 1) {
	this.temporaryChangesRevert()
	this.clearTemporaryChanges()
	} else {
	this.temporaryChangesCountdown--
	this.temporaryChangesTimeoutId = setTimeout(countdownFunc, 1000)
	}
	}
	this.temporaryChangesTimeoutId = setTimeout(countdownFunc, 1000)
	},
	clearTemporaryChanges() {
	this.temporaryChangesTimeoutId ??
	clearTimeout(this.temporaryChangesTimeoutId)
	this.temporaryChangesTimeoutId = null
	this.temporaryChangesCountdown = -1
	this.temporaryChangesConfirm = () => {
	/* no-op */
	}
	this.temporaryChangesRevert = () => {
	/* no-op */
	}
	},
	setPageTitle(option = '') {
	try {
	document.title = `${option} ${useInstanceStore().instanceIdentity.name}`
	} catch (error) {
	console.error(`${error}`)
	}
	},
	setForeignProfileBackground(url) {
	this.foreignProfileBackground = url
	},
	settingsSaved({ success, error }) {
	if (success) {
	if (this.noticeClearTimeout) {
	clearTimeout(this.noticeClearTimeout)
	}
	this.settings.currentSaveStateNotice = { error: false, data: success }
	this.settings.noticeClearTimeout = setTimeout(
	() => delete this.settings.currentSaveStateNotice,
	2000,
	)
	} else {
	this.settings.currentSaveStateNotice = { error: true, errorData: error }
	}
	},
	setNotificationPermission(permission) {
	this.notificationPermission = permission
	},
	closeSettingsModal() {
	this.settingsModalState = 'hidden'
	},
	openSettingsModal(value) {
	this.settingsModalMode = value
	this.settingsModalState = 'visible'
	if (value === 'user') {
	if (!this.settingsModalLoadedUser) {
	this.settingsModalLoadedUser = true
	}
	} else if (value === 'admin') {
	if (!this.settingsModalLoadedAdmin) {
	this.settingsModalLoadedAdmin = true
	}
	}
	},
	setSettingsModalState(newState) {
	const oldState = this.settingsModalState
	const legal = (() => {
	switch (oldState) {
	case 'minimized':
	return true
	case 'visible':
	return true
	case 'hidden':
	return newState === 'visible'
	}
	})()

	if (legal) {
	this.settingsModalState = newState
	}
	},
	togglePeekSettingsModal() {
	switch (this.settingsModalState) {
	case 'minimized':
	this.settingsModalState = 'visible'
	return
	case 'visible':
	this.settingsModalState = 'minimized'
	return
	case 'hidden':
	return
	default:
	- throw new Error(`Illegal minimization state of settings modal: ${this.settingsModalState}`)
	+ throw new Error(
	+ `Illegal minimization state of settings modal: ${this.settingsModalState}`,
	+ )
	}
	},
	clearSettingsModalTargetTab() {
	this.settingsModalTargetTab = null
	},
	openSettingsModalTab(value, mode = 'user') {
	this.settingsModalTargetTab = value
	this.openSettingsModal(mode)
	},
	removeGlobalNotice(notice) {
	this.globalNotices = this.globalNotices.filter((n) => n !== notice)
	},
	pushGlobalNotice({
	messageKey,
	messageArgs = {},
	level = 'error',
	timeout = 0,
	}) {
	const notice = {
	messageKey,
	messageArgs,
	level,
	}

	this.globalNotices.push(notice)

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

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

	const mobileLayout = width <= 800
	const normalOrMobile = mobileLayout ? 'mobile' : 'normal'
	const { thirdColumnMode } = useMergedConfigStore().mergedConfig
	if (thirdColumnMode === 'none' \|\| !window.vuex.state.users.currentUser) {
	this.layoutType = normalOrMobile
	} else {
	const wideLayout = width >= 1300
	this.layoutType = wideLayout ? 'wide' : normalOrMobile
	}
	},
	setFontsList(value) {
	this.localFonts = [...new Set(value.map((font) => font)).values()]
	},
	queryLocalFonts() {
	if (this.localFonts !== null) return
	this.setFontsList([])

	if (!this.browserSupport.localFonts) {
	return
	}
	window
	.queryLocalFonts()
	.then((fonts) => {
	this.setFontsList(fonts)
	})
	.catch((e) => {
	this.pushGlobalNotice({
	messageKey: 'settings.style.themes3.font.font_list_unavailable',
	messageArgs: {
	error: e,
	},
	level: 'error',
	})
	})
	},
	setLastTimeline(value) {
	this.lastTimeline = value
	},
	async fetchPalettesIndex() {
	try {
	const value = await getResourcesIndex('/static/palettes/index.json')
	useInstanceStore().set({
	path: 'palettesIndex',
	value,
	})
	return value
	} catch (e) {
	console.error('Could not fetch palettes index', e)
	useInstanceStore().set({
	path: 'palettesIndex',
	value: { _error: e },
	})
	return Promise.resolve({})
	}
	},
	setPalette(value) {
	this.resetThemeV3Palette()
	this.resetThemeV2()

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	let majorVersionUsed

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

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

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

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

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

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

	themesIndex = result[0]
	}

	this.themeVersion = majorVersionUsed

	console.debug('Version used', majorVersionUsed)

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

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

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

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

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

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

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

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

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

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

	const forceRecompile = forceThemeRecompilation \|\| recompile

	await this.getThemeData()

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

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

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

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

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

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

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

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

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

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

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

	let out // shout, shout let it all out
	if (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION) {
	// There are some themes in wild that have completely broken source
	out = { ...(themeData \|\| {}), ...themeSource }
	} else {
	out = themeData
	}

	// generatePreset here basically creates/updates "snapshot",
	// while also fixing the 2.2 -> 2.3 colors/shadows/etc
	return generatePreset(out).theme
	}

File Metadata

Mime Type: text/x-diff
Expires: Sun, Nov 1, 1:58 AM (19 h, 58 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1802193
Default Alt Text: (83 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions