No OneTemporary
Actions

Size

80 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/api/helpers.js b/src/api/helpers.js
	index f48cc01632..829615e387 100644
	--- a/src/api/helpers.js
	+++ b/src/api/helpers.js
	@@ -1,140 +1,140 @@
	import { snakeCase } from 'lodash'

	import { StatusCodeError } from 'src/services/errors/errors'

	export const paramsString = (params = {}) => {
	if (params == null \|\| params === undefined) return ''

	if (typeof params !== 'object' \|\| Array.isArray(params)) {
	throw new TypeError('Params are not an object!')
	}

	const entries = (() => {
	if (params instanceof Map) {
	return [...params.entries()]
	} else {
	return Object.entries(params)
	}
	})()

	const arrays = []
	const nonArrays = []

	entries.forEach(([k, v]) => {
	if (v == null) return // Drop nulls
	if (
	(typeof v === 'object' && !Array.isArray(v)) \|\|
	typeof v === 'function'
	) {
	throw new TypeError('Param cannot be non-primitive!')
	}
	if (Array.isArray(v)) {
	arrays.push([k, v])
	} else {
	nonArrays.push([k, v])
	}
	})

	arrays.forEach(([k, array]) => {
	array.forEach((v) => {
	if (
	typeof v === 'object' \|\|
	typeof v === 'function' \|\|
	typeof v === 'undefined'
	)
	throw new TypeError('Array param cannot contain non-primitives!')
	})
	})

	if (nonArrays.length + arrays.length === 0) return ''

	return (
	'?' +
	[
	...nonArrays.map(([k, v]) => [snakeCase(k), v]),
	// turning [a,[1,2,3]] into [[a[],1],[a[],2],[a[],3]]
	...arrays.reduce(
	(acc, [k, arrayValue]) => [
	...acc,
	...arrayValue.map((v) => [snakeCase(k) + '[]', v]),
	],
	[],
	),
	]
	.map(([k, v]) => `${k}=${window.encodeURIComponent(v)}`)
	.join('&')
	)
	}

	export const promisedRequest = async ({
	method,
	url,
	payload,
	formData,
	cache,
	credentials,
	headers = {},
	}) => {
	const options = {
	method,
	credentials: 'same-origin',
	headers: {
	Accept: 'application/json',
	...headers,
	},
	}

	if (!formData) {
	options.headers['Content-Type'] = 'application/json'
	}

	if (cache) {
	options.cache = cache
	}

	if (formData \|\| payload) {
	options.body = formData \|\| JSON.stringify(payload)
	}

	if (credentials) {
	options.headers = {
	...options.headers,
	...authHeaders(credentials),
	}
	}

	const response = await fetch(url, options)
	const data = await (async () => {
	const [contentType] = response.headers
	.get('content-type')
	.split(';')
	.map((x) => x.toLowerCase().trim())
	- const contentLength = parseInt(response.headers.get('content-length'))
	+ const contentLength = Number.parseInt(response.headers.get('content-length'))
	if (contentLength === 0) return null

	switch (contentType) {
	case 'text/plain':
	return await response.text()
	case 'application/json':
	return await response.json()
	default:
	return await response.bytes()
	}
	})()

	const { ok, status } = response

	if (ok) {
	return { response, status, data }
	} else {
	throw new StatusCodeError(response.status, data, { url, options }, response)
	}
	}

	const authHeaders = (accessToken) => {
	if (accessToken) {
	return { Authorization: `Bearer ${accessToken}` }
	} else {
	return {}
	}
	}
	diff --git a/src/api/user.js b/src/api/user.js
	index 17e13195d5..89b37dba02 100644
	--- a/src/api/user.js
	+++ b/src/api/user.js
	@@ -1,921 +1,921 @@
	import { concat, last } from 'lodash'

	import { paramsString, promisedRequest } from './helpers.js'
	import { fetchFriends, MASTODON_STATUS_URL } from './public.js'

	import {
	parseAttachment,
	parseStatus,
	parseUser,
	} from 'src/services/entity_normalizer/entity_normalizer.service.js'

	const MUTES_IMPORT_URL = '/api/pleroma/mutes_import'
	const BLOCKS_IMPORT_URL = '/api/pleroma/blocks_import'
	const FOLLOW_IMPORT_URL = '/api/pleroma/follow_import'
	const DELETE_ACCOUNT_URL = '/api/pleroma/delete_account'
	const CHANGE_EMAIL_URL = '/api/pleroma/change_email'
	const CHANGE_PASSWORD_URL = '/api/pleroma/change_password'
	const MOVE_ACCOUNT_URL = '/api/pleroma/move_account'
	const ALIASES_URL = '/api/pleroma/aliases'
	const NOTIFICATION_SETTINGS_URL = '/api/pleroma/notification_settings'
	const NOTIFICATION_READ_URL = '/api/v1/pleroma/notifications/read'

	const MFA_SETTINGS_URL = '/api/pleroma/accounts/mfa'
	const MFA_BACKUP_CODES_URL = '/api/pleroma/accounts/mfa/backup_codes'

	const MFA_SETUP_OTP_URL = '/api/pleroma/accounts/mfa/setup/totp'
	const MFA_CONFIRM_OTP_URL = '/api/pleroma/accounts/mfa/confirm/totp'
	const MFA_DISABLE_OTP_URL = '/api/pleroma/accounts/mfa/totp'

	const MASTODON_DISMISS_NOTIFICATION_URL = (id) =>
	`/api/v1/notifications/${id}/dismiss`
	const MASTODON_FAVORITE_URL = (id) => `/api/v1/statuses/${id}/favourite`
	const MASTODON_UNFAVORITE_URL = (id) => `/api/v1/statuses/${id}/unfavourite`
	const MASTODON_RETWEET_URL = (id) => `/api/v1/statuses/${id}/reblog`
	const MASTODON_UNRETWEET_URL = (id) => `/api/v1/statuses/${id}/unreblog`
	const MASTODON_DELETE_URL = (id) => `/api/v1/statuses/${id}`
	const MASTODON_FOLLOW_URL = (id) => `/api/v1/accounts/${id}/follow`
	const MASTODON_UNFOLLOW_URL = (id) => `/api/v1/accounts/${id}/unfollow`

	const MASTODON_FOLLOW_REQUESTS_URL = '/api/v1/follow_requests'
	const MASTODON_APPROVE_USER_URL = (id) =>
	`/api/v1/follow_requests/${id}/authorize`
	const MASTODON_DENY_USER_URL = (id) => `/api/v1/follow_requests/${id}/reject`
	const MASTODON_USER_RELATIONSHIPS_URL = ({ id, withSuspended }) =>
	`/api/v1/accounts/relationships/${paramsString({ id, withSuspended })}`
	const MASTODON_USER_IN_LISTS = (id) => `/api/v1/accounts/${id}/lists`
	export const MASTODON_LIST_URL = (id = '') => `/api/v1/lists/${id}`
	export const MASTODON_LIST_ACCOUNTS_URL = (id) => `/api/v1/lists/${id}/accounts`
	const MASTODON_USER_BLOCKS_URL = ({
	maxId,
	sinceId,
	limit,
	withRelationships,
	}) =>
	`/api/v1/blocks/${paramsString({ maxId, sinceId, limit, withRelationships })}`
	const MASTODON_USER_MUTES_URL = ({
	maxId,
	sinceId,
	limit,
	withRelationships,
	}) =>
	`/api/v1/mutes/${paramsString({ maxId, sinceId, limit, withRelationships })}`
	const MASTODON_BLOCK_USER_URL = (id) => `/api/v1/accounts/${id}/block`
	const MASTODON_UNBLOCK_USER_URL = (id) => `/api/v1/accounts/${id}/unblock`
	const MASTODON_MUTE_USER_URL = (id) => `/api/v1/accounts/${id}/mute`
	const MASTODON_UNMUTE_USER_URL = (id) => `/api/v1/accounts/${id}/unmute`
	const MASTODON_REMOVE_USER_FROM_FOLLOWERS = (id) =>
	`/api/v1/accounts/${id}/remove_from_followers`
	const MASTODON_USER_NOTE_URL = (id) => `/api/v1/accounts/${id}/note`
	const MASTODON_BOOKMARK_STATUS_URL = (id) => `/api/v1/statuses/${id}/bookmark`
	const MASTODON_UNBOOKMARK_STATUS_URL = (id) =>
	`/api/v1/statuses/${id}/unbookmark`
	const MASTODON_POST_STATUS_URL = '/api/v1/statuses'
	const MASTODON_MEDIA_UPLOAD_URL = '/api/v1/media'
	const MASTODON_VOTE_URL = (id) => `/api/v1/polls/${id}/votes`
	const MASTODON_PROFILE_UPDATE_URL = '/api/v1/accounts/update_credentials'
	const MASTODON_REPORT_USER_URL = '/api/v1/reports'
	const MASTODON_PIN_OWN_STATUS = (id) => `/api/v1/statuses/${id}/pin`
	const MASTODON_UNPIN_OWN_STATUS = (id) => `/api/v1/statuses/${id}/unpin`
	const MASTODON_MUTE_CONVERSATION = (id) => `/api/v1/statuses/${id}/mute`
	const MASTODON_UNMUTE_CONVERSATION = (id) => `/api/v1/statuses/${id}/unmute`
	const MASTODON_DOMAIN_BLOCKS_URL = '/api/v1/domain_blocks'
	const MASTODON_ANNOUNCEMENTS_URL = '/api/v1/announcements'
	const MASTODON_ANNOUNCEMENTS_DISMISS_URL = (id) =>
	`/api/v1/announcements/${id}/dismiss`
	const PLEROMA_EMOJI_REACT_URL = (id, emoji) =>
	`/api/v1/pleroma/statuses/${id}/reactions/${emoji}`
	const PLEROMA_EMOJI_UNREACT_URL = (id, emoji) =>
	`/api/v1/pleroma/statuses/${id}/reactions/${emoji}`
	const PLEROMA_BACKUP_URL = '/api/v1/pleroma/backups'
	const PLEROMA_BOOKMARK_FOLDERS_URL = '/api/v1/pleroma/bookmark_folders'
	const PLEROMA_BOOKMARK_FOLDER_URL = (id) =>
	`/api/v1/pleroma/bookmark_folders/${id}`

	// #Posts
	export const favorite = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_FAVORITE_URL(id),
	method: 'POST',
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const unfavorite = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_UNFAVORITE_URL(id),
	method: 'POST',
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const retweet = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_RETWEET_URL(id),
	method: 'POST',
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const unretweet = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_UNRETWEET_URL(id),
	method: 'POST',
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const reactWithEmoji = ({ id, emoji, credentials }) =>
	promisedRequest({
	url: PLEROMA_EMOJI_REACT_URL(id, emoji),
	method: 'PUT',
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const unreactWithEmoji = ({ id, emoji, credentials }) =>
	promisedRequest({
	url: PLEROMA_EMOJI_UNREACT_URL(id, emoji),
	method: 'DELETE',
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const bookmarkStatus = ({ id, credentials, ...options }) =>
	promisedRequest({
	url: MASTODON_BOOKMARK_STATUS_URL(id),
	credentials,
	method: 'POST',
	payload: {
	folder_id: options.folder_id,
	},
	})

	export const unbookmarkStatus = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_UNBOOKMARK_STATUS_URL(id),
	credentials,
	method: 'POST',
	})

	export const pinOwnStatus = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_PIN_OWN_STATUS(id),
	credentials,
	method: 'POST',
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const unpinOwnStatus = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_UNPIN_OWN_STATUS(id),
	credentials,
	method: 'POST',
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const muteConversation = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_MUTE_CONVERSATION(id),
	credentials,
	method: 'POST',
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const unmuteConversation = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_UNMUTE_CONVERSATION(id),
	credentials,
	method: 'POST',
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))

	export const vote = ({ pollId, choices, credentials }) => {
	return promisedRequest({
	url: MASTODON_VOTE_URL(encodeURIComponent(pollId)),
	method: 'POST',
	credentials,
	payload: {
	choices,
	},
	})
	}

	// #Posting
	export const postStatus = ({
	credentials,
	status,
	spoilerText,
	visibility,
	sensitive,
	poll,
	mediaIds = [],
	inReplyToStatusId,
	quoteId,
	contentType,
	preview,
	idempotencyKey,
	}) => {
	const form = new FormData()
	const pollOptions = poll.options \|\| []

	form.append('status', status)
	form.append('source', 'Pleroma FE')
	if (spoilerText) form.append('spoiler_text', spoilerText)
	if (visibility) form.append('visibility', visibility)
	if (sensitive) form.append('sensitive', sensitive)
	if (contentType) form.append('content_type', contentType)
	mediaIds.forEach((val) => {
	form.append('media_ids[]', val)
	})
	if (pollOptions.some((option) => option !== '')) {
	const normalizedPoll = {
	- expires_in: parseInt(poll.expiresIn, 10),
	+ expires_in: Number.parseInt(poll.expiresIn, 10),
	multiple: poll.multiple,
	}
	Object.keys(normalizedPoll).forEach((key) => {
	form.append(`poll[${key}]`, normalizedPoll[key])
	})

	pollOptions.forEach((option) => {
	form.append('poll[options][]', option)
	})
	}
	if (inReplyToStatusId) {
	form.append('in_reply_to_id', inReplyToStatusId)
	}
	if (quoteId) {
	form.append('quote_id', quoteId)
	}
	if (preview) {
	form.append('preview', 'true')
	}

	const headers = {}
	if (idempotencyKey) {
	headers['idempotency-key'] = idempotencyKey
	}

	return promisedRequest({
	url: MASTODON_POST_STATUS_URL,
	formData: form,
	method: 'POST',
	credentials,
	headers,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))
	}

	export const editStatus = ({
	id,
	credentials,
	status,
	spoilerText,
	sensitive,
	poll,
	mediaIds = [],
	contentType,
	}) => {
	const form = new FormData()
	const pollOptions = poll.options \|\| []

	form.append('status', status)
	if (spoilerText) form.append('spoiler_text', spoilerText)
	if (sensitive) form.append('sensitive', sensitive)
	if (contentType) form.append('content_type', contentType)
	mediaIds.forEach((val) => {
	form.append('media_ids[]', val)
	})

	if (pollOptions.some((option) => option !== '')) {
	const normalizedPoll = {
	- expires_in: parseInt(poll.expiresIn, 10),
	+ expires_in: Number.parseInt(poll.expiresIn, 10),
	multiple: poll.multiple,
	}
	Object.keys(normalizedPoll).forEach((key) => {
	form.append(`poll[${key}]`, normalizedPoll[key])
	})

	pollOptions.forEach((option) => {
	form.append('poll[options][]', option)
	})
	}

	return promisedRequest({
	url: MASTODON_STATUS_URL(id),
	formData: form,
	method: 'PUT',
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))
	}

	export const deleteStatus = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_DELETE_URL(id),
	credentials,
	method: 'DELETE',
	})

	export const uploadMedia = ({ formData, credentials }) =>
	promisedRequest({
	url: MASTODON_MEDIA_UPLOAD_URL,
	formData,
	method: 'POST',
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseAttachment(data) }))

	export const setMediaDescription = ({ id, description, credentials }) =>
	promisedRequest({
	url: `${MASTODON_MEDIA_UPLOAD_URL}/${id}`,
	method: 'PUT',
	credentials,
	payload: {
	description,
	},
	}).then(({ data, ...rest }) => ({ ...rest, data: parseAttachment(data) }))

	// #Notifications
	export const dismissNotification = ({ credentials, id }) =>
	promisedRequest({
	url: MASTODON_DISMISS_NOTIFICATION_URL(id),
	method: 'POST',
	payload: { id },
	credentials,
	})

	export const markNotificationsAsSeen = ({
	id,
	credentials,
	single = false,
	}) => {
	const formData = new FormData()

	if (single) {
	formData.append('id', id)
	} else {
	formData.append('max_id', id)
	}

	return promisedRequest({
	url: NOTIFICATION_READ_URL,
	formData,
	credentials,
	method: 'POST',
	})
	}

	// #Announcements
	export const getAnnouncements = ({ credentials }) =>
	promisedRequest({ url: MASTODON_ANNOUNCEMENTS_URL, credentials })

	export const dismissAnnouncement = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_ANNOUNCEMENTS_DISMISS_URL(id),
	credentials,
	method: 'POST',
	})

	// #Imports
	export const importMutes = ({ file, credentials }) => {
	const formData = new FormData()
	formData.append('list', file)
	return promisedRequest({
	url: MUTES_IMPORT_URL,
	formData,
	method: 'POST',
	credentials,
	}).then((response) => response.ok)
	}

	export const importBlocks = ({ file, credentials }) => {
	const formData = new FormData()
	formData.append('list', file)
	return promisedRequest({
	url: BLOCKS_IMPORT_URL,
	formData,
	method: 'POST',
	credentials,
	}).then((response) => response.ok)
	}

	export const importFollows = ({ file, credentials }) => {
	const formData = new FormData()
	formData.append('list', file)
	return promisedRequest({
	url: FOLLOW_IMPORT_URL,
	formData,
	method: 'POST',
	credentials,
	}).then((response) => response.ok)
	}

	export const exportFriends = ({ id, credentials }) => {
	// biome-ignore lint/suspicious/noAsyncPromiseExecutor: TODO refactor this
	return new Promise(async (resolve, reject) => {
	try {
	let friends = []
	let more = true
	while (more) {
	const maxId = friends.length > 0 ? last(friends).id : undefined
	const users = await fetchFriends({
	id,
	maxId,
	credentials,
	withRelationships: true,
	})
	friends = concat(friends, users)
	if (users.length === 0) {
	more = false
	}
	}
	resolve(friends)
	} catch (err) {
	reject(err)
	}
	})
	}

	// #Profile settings
	export const updateNotificationSettings = ({ credentials, settings }) => {
	return promisedRequest({
	url: NOTIFICATION_SETTINGS_URL,
	credentials,
	method: 'PUT',
	payload: settings,
	})
	}

	export const updateProfileImages = ({
	credentials,
	avatar = null,
	avatarName = null,
	banner = null,
	background = null,
	}) => {
	const form = new FormData()
	if (avatar !== null) {
	if (avatarName !== null) {
	form.append('avatar', avatar, avatarName)
	} else {
	form.append('avatar', avatar)
	}
	}
	if (banner !== null) form.append('header', banner)
	if (background !== null) form.append('pleroma_background_image', background)
	return promisedRequest({
	url: MASTODON_PROFILE_UPDATE_URL,
	credentials,
	method: 'PATCH',
	formData: form,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseUser(data) }))
	}

	export const updateProfile = ({ credentials, params }) => {
	const formData = new FormData()

	for (const name in params) {
	if (name === 'fields_attributes') {
	params[name].forEach((param, i) => {
	formData.append(name + `[${i}][name]`, param.name)
	formData.append(name + `[${i}][value]`, param.value)
	})
	} else {
	if (typeof params[name] === 'object') {
	console.warn(
	'Object detected in updateProfile API call. This will not work, use updateProfileJSON instead.',
	)
	console.warn('Object:\n' + JSON.stringify(params[name], null, 2))
	}
	formData.append(name, params[name])
	}
	}

	return promisedRequest({
	url: MASTODON_PROFILE_UPDATE_URL,
	credentials,
	method: 'PATCH',
	formData,
	}).then(({ data, ...rest }) => ({ ...rest, data: parseUser(data) }))
	}

	export const updateProfileJSON = ({ credentials, params }) =>
	promisedRequest({
	url: MASTODON_PROFILE_UPDATE_URL,
	credentials,
	payload: params,
	method: 'PATCH',
	}).then(({ data, ...rest }) => ({ ...rest, data: parseUser(data) }))

	export const changeEmail = ({ credentials, email, password }) => {
	const form = new FormData()

	form.append('email', email)
	form.append('password', password)

	return promisedRequest({
	url: CHANGE_EMAIL_URL,
	formData: form,
	method: 'POST',
	credentials,
	})
	}

	export const moveAccount = ({ credentials, password, targetAccount }) => {
	const form = new FormData()

	form.append('password', password)
	form.append('target_account', targetAccount)

	return promisedRequest({
	url: MOVE_ACCOUNT_URL,
	formData: form,
	method: 'POST',
	credentials,
	})
	}

	export const changePassword = ({
	credentials,
	password,
	newPassword,
	newPasswordConfirmation,
	}) => {
	const form = new FormData()

	form.append('password', password)
	form.append('new_password', newPassword)
	form.append('new_password_confirmation', newPasswordConfirmation)

	return promisedRequest({
	url: CHANGE_PASSWORD_URL,
	formData: form,
	method: 'POST',
	credentials,
	})
	}

	// #MFA
	export const settingsMFA = ({ credentials }) =>
	promisedRequest({
	url: MFA_SETTINGS_URL,
	credentials,
	method: 'GET',
	})

	export const mfaDisableOTP = ({ credentials, password }) => {
	const form = new FormData()

	form.append('password', password)

	return promisedRequest({
	url: MFA_DISABLE_OTP_URL,
	formData: form,
	method: 'DELETE',
	credentials,
	})
	}

	export const mfaConfirmOTP = ({ credentials, password, token }) => {
	const form = new FormData()

	form.append('password', password)
	form.append('code', token)

	return promisedRequest({
	url: MFA_CONFIRM_OTP_URL,
	formData: form,
	credentials,
	method: 'POST',
	})
	}
	export const mfaSetupOTP = ({ credentials }) =>
	promisedRequest({
	url: MFA_SETUP_OTP_URL,
	credentials,
	method: 'GET',
	})
	export const generateMfaBackupCodes = ({ credentials }) =>
	promisedRequest({
	url: MFA_BACKUP_CODES_URL,
	credentials,
	method: 'GET',
	})

	// #Aliases
	export const addAlias = ({ credentials, alias }) =>
	promisedRequest({
	url: ALIASES_URL,
	method: 'PUT',
	credentials,
	payload: { alias },
	})

	export const deleteAlias = ({ credentials, alias }) =>
	promisedRequest({
	url: ALIASES_URL,
	method: 'DELETE',
	credentials,
	payload: { alias },
	})

	export const listAliases = ({ credentials }) =>
	promisedRequest({
	url: ALIASES_URL,
	method: 'GET',
	credentials,
	params: {
	_cacheBooster: new Date().getTime(),
	},
	})

	// User manipulation
	export const fetchUserRelationship = ({ id, withSuspended, credentials }) =>
	promisedRequest({
	url: MASTODON_USER_RELATIONSHIPS_URL({ id, withSuspended }),
	credentials,
	})

	export const followUser = ({ id, credentials, ...options }) => {
	const payload = {}

	if (options.reblogs !== undefined) {
	payload.reblogs = options.reblogs
	}

	if (options.notify !== undefined) {
	payload.notify = options.notify
	}

	return promisedRequest({
	url: MASTODON_FOLLOW_URL(id),
	payload,
	credentials,
	method: 'POST',
	})
	}

	export const unfollowUser = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_UNFOLLOW_URL(id),
	credentials,
	method: 'POST',
	})
	export const fetchUserInLists = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_USER_IN_LISTS(id),
	credentials,
	})

	export const removeUserFromFollowers = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_REMOVE_USER_FROM_FOLLOWERS(id),
	credentials,
	method: 'POST',
	})

	export const fetchFollowRequests = ({ credentials }) =>
	promisedRequest({
	url: MASTODON_FOLLOW_REQUESTS_URL,
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: data.map(parseUser) }))

	export const approveUser = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_APPROVE_USER_URL(id),
	credentials,
	method: 'POST',
	})

	export const denyUser = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_DENY_USER_URL(id),
	credentials,
	method: 'POST',
	})

	export const editUserNote = ({ id, credentials, comment }) =>
	promisedRequest({
	url: MASTODON_USER_NOTE_URL(id),
	credentials,
	payload: {
	comment,
	},
	method: 'POST',
	})

	export const fetchMutes = ({ maxId, credentials }) =>
	promisedRequest({
	url: MASTODON_USER_MUTES_URL({ maxId, withRelationships: true }),
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: data.map(parseUser) }))

	export const muteUser = ({ id, expiresIn, credentials }) => {
	const payload = {}
	if (expiresIn) {
	payload.expires_in = expiresIn
	}

	return promisedRequest({
	url: MASTODON_MUTE_USER_URL(id),
	credentials,
	method: 'POST',
	payload,
	})
	}

	export const unmuteUser = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_UNMUTE_USER_URL(id),
	credentials,
	method: 'POST',
	})

	export const fetchBlocks = ({ maxId, credentials }) =>
	promisedRequest({
	url: MASTODON_USER_BLOCKS_URL({ maxId, withRelationships: true }),
	credentials,
	}).then(({ data, ...rest }) => ({ ...rest, data: data.map(parseUser) }))

	export const blockUser = ({ id, expiresIn, credentials }) => {
	const payload = {}
	if (expiresIn) {
	payload.duration = expiresIn
	}

	return promisedRequest({
	url: MASTODON_BLOCK_USER_URL(id),
	credentials,
	method: 'POST',
	payload,
	})
	}

	export const unblockUser = ({ id, credentials }) =>
	promisedRequest({
	url: MASTODON_UNBLOCK_USER_URL(id),
	credentials,
	method: 'POST',
	})

	export const reportUser = ({
	credentials,
	userId,
	statusIds,
	comment,
	forward,
	}) =>
	promisedRequest({
	url: MASTODON_REPORT_USER_URL,
	method: 'POST',
	payload: {
	account_id: userId,
	status_ids: statusIds,
	comment,
	forward,
	},
	credentials,
	})

	// #Domain mutes
	export const fetchDomainMutes = ({ credentials }) =>
	promisedRequest({ url: MASTODON_DOMAIN_BLOCKS_URL, credentials })

	export const muteDomain = ({ domain, credentials }) =>
	promisedRequest({
	url: MASTODON_DOMAIN_BLOCKS_URL,
	method: 'POST',
	payload: { domain },
	credentials,
	})

	export const unmuteDomain = ({ domain, credentials }) =>
	promisedRequest({
	url: MASTODON_DOMAIN_BLOCKS_URL,
	method: 'DELETE',
	payload: { domain },
	credentials,
	})

	// #Backups
	export const addBackup = ({ credentials }) =>
	promisedRequest({
	url: PLEROMA_BACKUP_URL,
	method: 'POST',
	credentials,
	})

	export const listBackups = ({ credentials }) =>
	promisedRequest({
	url: PLEROMA_BACKUP_URL,
	method: 'GET',
	credentials,
	params: {
	_cacheBooster: new Date().getTime(),
	},
	})

	// #OAuth
	export const fetchOAuthTokens = ({ credentials }) =>
	promisedRequest({
	url: '/api/oauth_tokens.json',
	credentials,
	})

	export const revokeOAuthToken = ({ id, credentials }) =>
	promisedRequest({
	url: `/api/oauth_tokens/${id}`,
	credentials,
	method: 'DELETE',
	})

	// #Lists
	export const fetchLists = ({ credentials }) =>
	promisedRequest({
	url: MASTODON_LIST_URL(),
	credentials,
	})

	export const createList = ({ title, credentials }) =>
	promisedRequest({
	url: MASTODON_LIST_URL(),
	credentials,
	method: 'POST',
	payload: { title },
	})

	export const getList = ({ listId, credentials }) =>
	promisedRequest({
	url: MASTODON_LIST_URL(listId),
	credentials,
	})

	export const updateList = ({ listId, title, credentials }) =>
	promisedRequest({
	url: MASTODON_LIST_URL(listId),

	credentials,
	method: 'PUT',
	payload: { title },
	})

	export const getListAccounts = ({ listId, credentials }) =>
	promisedRequest({
	url: MASTODON_LIST_ACCOUNTS_URL(listId),
	credentials,
	}).then((data) => data.map(({ id }) => id))

	export const addAccountsToList = ({ listId, accountIds, credentials }) =>
	promisedRequest({
	url: MASTODON_LIST_ACCOUNTS_URL(listId),
	credentials,
	method: 'POST',
	payload: { account_ids: accountIds },
	})

	export const removeAccountsFromList = ({ listId, accountIds, credentials }) =>
	promisedRequest({
	url: MASTODON_LIST_ACCOUNTS_URL(listId),
	credentials,
	method: 'DELETE',
	payload: { account_ids: accountIds },
	})

	export const deleteList = ({ listId, credentials }) =>
	promisedRequest({
	url: MASTODON_LIST_URL(listId),
	method: 'DELETE',
	credentials,
	})

	// #Bookmarks
	export const fetchBookmarkFolders = ({ credentials }) =>
	promisedRequest({
	url: PLEROMA_BOOKMARK_FOLDERS_URL,
	credentials,
	})

	export const createBookmarkFolder = ({ name, emoji, credentials }) =>
	promisedRequest({
	url: PLEROMA_BOOKMARK_FOLDERS_URL,
	credentials,
	method: 'POST',
	payload: { name, emoji },
	})

	export const updateBookmarkFolder = ({ folderId, name, emoji, credentials }) =>
	promisedRequest({
	url: PLEROMA_BOOKMARK_FOLDER_URL(folderId),
	credentials,
	method: 'PATCH',
	payload: { name, emoji },
	})

	export const deleteBookmarkFolder = ({ folderId, credentials }) =>
	promisedRequest({
	url: PLEROMA_BOOKMARK_FOLDER_URL(folderId),
	method: 'DELETE',
	credentials,
	})

	// #So long and thanks for all the fish
	export const deleteAccount = ({ credentials, password }) => {
	const formData = new FormData()

	formData.append('password', password)

	return promisedRequest({
	url: DELETE_ACCOUNT_URL,
	formData,
	method: 'POST',
	credentials,
	})
	}
	diff --git a/src/boot/after_store.js b/src/boot/after_store.js
	index 5ba5e8d76b..47d9793ccb 100644
	--- a/src/boot/after_store.js
	+++ b/src/boot/after_store.js
	@@ -1,622 +1,622 @@
	/* global process */

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

	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import Status from 'src/components/status/status.vue'
	import StillImage from 'src/components/still-image/still-image.vue'

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

	config.autoAddCss = false

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

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

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

	let staticInitialResults = null

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

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

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

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

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

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

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

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

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

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

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

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

	useAuthFlowStore().setInitialStrategy(config.loginMethod)
	}

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

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

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

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

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

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

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

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

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

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

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

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

	const federation = metadata.federation

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

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

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

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

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

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

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

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

	app.config.errorHandler = (error, instance, info) => {
	console.error(
	'Global Vue Error Handler caught an error:',
	error,
	instance,
	info,
	)
	useInterfaceStore().setGlobalError({ error, instance, info })
	}

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

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

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

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

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

	FaviconService.initFaviconService()
	initServiceWorker(store)

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

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

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

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

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

	getTOS({ store })
	getStickers({ store })

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

	useI18nStore().setI18n(i18n)

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

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

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

	app.component('FAIcon', FontAwesomeIcon)
	app.component('FALayers', FontAwesomeLayers)
	app.component('Status', Status)
	app.component('RichContent', RichContent)
	app.component('StillImage', StillImage)

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

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

	export default afterStoreSetup
	diff --git a/src/components/settings_modal/helpers/number_setting.js b/src/components/settings_modal/helpers/number_setting.js
	index e037ece28e..d0b23c919d 100644
	--- a/src/components/settings_modal/helpers/number_setting.js
	+++ b/src/components/settings_modal/helpers/number_setting.js
	@@ -1,39 +1,39 @@
	import Setting from './setting.js'

	export default {
	...Setting,
	props: {
	...Setting.props,
	min: {
	type: Number,
	required: false,
	default: 1,
	},
	max: {
	type: Number,
	required: false,
	default: 1,
	},
	step: {
	type: Number,
	required: false,
	default: 1,
	},
	truncate: {
	type: Number,
	required: false,
	default: 1,
	},
	},
	methods: {
	...Setting.methods,
	getValue(e) {
	if (!this.truncate === 1) {
	- return parseInt(e.target.value)
	+ return Number.parseInt(e.target.value)
	} else if (this.truncate > 1) {
	return Math.trunc(e.target.value / this.truncate) * this.truncate
	}
	return parseFloat(e.target.value)
	},
	},
	}
	diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
	index 26f279764f..dded73da3e 100644
	--- a/src/services/color_convert/color_convert.js
	+++ b/src/services/color_convert/color_convert.js
	@@ -1,297 +1,297 @@
	import { contrastRatio, convert, invertLightness } from 'chromatism'

	// useful for visualizing color when debugging
	// const consoleColor = (color) => console.debug('%c##########', 'background: ' + color + '; color: ' + color)

	/**
	* Convert r, g, b values into hex notation. All components are [0-255]
	*
	* @param {Number\|String\|Object} r - Either red component, {r,g,b} object, or hex string
	* @param {Number} [g] - Green component
	* @param {Number} [b] - Blue component
	*/
	export const rgb2hex = (r, g, b) => {
	if (r === null \|\| typeof r === 'undefined') {
	return undefined
	}
	// TODO: clean up this mess
	if (r[0] === '#' \|\| r === 'transparent') {
	return r
	}
	if (typeof r === 'object') {
	;({ r, g, b } = r)
	}
	;[r, g, b] = [r, g, b].map((val) => {
	val = Math.ceil(val)
	val = val < 0 ? 0 : val
	val = val > 255 ? 255 : val
	return val
	})
	return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
	}

	/**
	* Converts 8-bit RGB component into linear component
	* https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
	* https://www.w3.org/TR/2008/REC-WCAG20-20081211/relative-luminance.xml
	* https://en.wikipedia.org/wiki/SRGB#The_reverse_transformation
	*
	* @param {Number} bit - color component [0..255]
	* @returns {Number} linear component [0..1]
	*/
	const c2linear = (bit) => {
	// W3C gives 0.03928 while wikipedia states 0.04045
	// what those magical numbers mean - I don't know.
	// something about gamma-correction, i suppose.
	// Sticking with W3C example.
	const c = bit / 255
	if (c < 0.03928) {
	return c / 12.92
	} else {
	return Math.pow((c + 0.055) / 1.055, 2.4)
	}
	}

	/**
	* Calculates relative luminance for given color
	* https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
	* https://www.w3.org/TR/2008/REC-WCAG20-20081211/relative-luminance.xml
	*
	* @param {Object} srgb - sRGB color
	* @returns {Number} relative luminance
	*/
	export const relativeLuminance = (srgb) => {
	const r = c2linear(srgb.r)
	const g = c2linear(srgb.g)
	const b = c2linear(srgb.b)

	return 0.2126 * r + 0.7152 * g + 0.0722 * b
	}

	/**
	* Generates color ratio between two colors. Order is unimporant
	* https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
	*
	* @param {Object} a - sRGB color
	* @param {Object} b - sRGB color
	* @returns {Number} color ratio
	*/
	export const getContrastRatio = (a, b) => {
	const la = relativeLuminance(a)
	const lb = relativeLuminance(b)
	const [l1, l2] = la > lb ? [la, lb] : [lb, la]

	return (l1 + 0.05) / (l2 + 0.05)
	}

	/**
	* Same as `getContrastRatio` but for multiple layers in-between
	*
	* @param {Object} text - text color (topmost layer)
	* @param {[Object, Number]} layers[] - layers between text and bedrock
	* @param {Object} bedrock - layer at the very bottom
	*/
	export const getContrastRatioLayers = (text, layers, bedrock) => {
	return getContrastRatio(alphaBlendLayers(bedrock, layers), text)
	}

	/**
	* Blending of two solid colors with a user-defined operator: origin +- value
	*
	* @param {Object} origin - base color
	* @param {Object} value - modification argument
	* @param {string} operator - math operator to use
	*/
	export const arithmeticBlend = (origin, value, operator) => {
	const func = (a, b) => {
	switch (operator) {
	case '+':
	return Math.min(a + b, 255)
	case '-':
	return Math.max(a - b, 0)
	default:
	return a
	}
	}

	return {
	r: func(origin.r, value.r),
	g: func(origin.g, value.g),
	b: func(origin.b, value.b),
	}
	}

	/**
	* This performs alpha blending between solid background and semi-transparent foreground
	*
	* @param {Object} fg - top layer color
	* @param {Number} fga - top layer's alpha
	* @param {Object} bg - bottom layer color
	* @returns {Object} sRGB of resulting color
	*/
	export const alphaBlend = (fg, fga, bg) => {
	if (fga === 1 \|\| typeof fga === 'undefined') {
	return fg
	}

	// Simplified https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
	// for opaque bg and transparent fg
	return {
	r: fg.r * fga + bg.r * (1 - fga),
	g: fg.g * fga + bg.g * (1 - fga),
	b: fg.b * fga + bg.b * (1 - fga),
	}
	}

	/**
	* Same as `alphaBlend` but for multiple layers in-between
	*
	* @param {Object} bedrock - layer at the very bottom
	* @param {[Object, Number]} layers[] - layers between text and bedrock
	*/
	export const alphaBlendLayers = (bedrock, layers) =>
	layers.reduce((acc, [color, opacity]) => {
	return alphaBlend(color, opacity, acc)
	}, bedrock)

	export const invert = (rgb) => {
	return {
	r: 255 - rgb.r,
	g: 255 - rgb.g,
	b: 255 - rgb.b,
	}
	}

	/**
	* Converts #rrggbb hex notation into an {r, g, b} object
	*
	* @param {String} hex - #rrggbb string
	* @returns {Object} rgb representation of the color, values are 0-255
	*/
	export const hex2rgb = (hex) => {
	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)

	return result
	? {
	- r: parseInt(result[1], 16),
	- g: parseInt(result[2], 16),
	- b: parseInt(result[3], 16),
	+ r: Number.parseInt(result[1], 16),
	+ g: Number.parseInt(result[2], 16),
	+ b: Number.parseInt(result[3], 16),
	}
	: null
	}

	/**
	* Old somewhat weird function for mixing two colors together
	*
	* @param {Object} a - one color (rgb)
	* @param {Object} b - other color (rgb)
	* @returns {Object} result
	*/
	export const mixrgb = (a, b) => {
	return {
	r: (a.r + b.r) / 2,
	g: (a.g + b.g) / 2,
	b: (a.b + b.b) / 2,
	}
	}

	/**
	* Converts rgb object into a CSS rgba() color
	*
	* @param {Object} color - rgb
	* @returns {String} CSS rgba() color
	*/
	export const rgba2css = function (rgba) {
	const base = {
	r: 0,
	g: 0,
	b: 0,
	a: 1,
	}

	if (rgba !== null) {
	if (rgba.r !== undefined && !isNaN(rgba.r)) {
	base.r = rgba.r
	}
	if (rgba.g !== undefined && !isNaN(rgba.g)) {
	base.g = rgba.g
	}
	if (rgba.b !== undefined && !isNaN(rgba.b)) {
	base.b = rgba.b
	}
	if (rgba.a !== undefined && !isNaN(rgba.a)) {
	base.a = rgba.a
	}
	} else {
	base.r = 255
	base.g = 255
	base.b = 255
	}

	return `rgba(${Math.floor(base.r)}, ${Math.floor(base.g)}, ${Math.floor(base.b)}, ${base.a})`
	}

	/**
	* Get text color for given background color and intended text color
	* This checks if text and background don't have enough color and inverts
	* text color's lightness if needed. If text color is still not enough it
	* will fall back to black or white
	*
	* @param {Object} bg - background color
	* @param {Object} text - intended text color
	* @param {Boolean} preserve - try to preserve intended text color's hue/saturation (i.e. no BW)
	*/
	export const getTextColor = function (bg, text, preserve) {
	const originalContrast = getContrastRatio(bg, text)
	if (!preserve) {
	if (originalContrast < 4.5) {
	// B&W
	return contrastRatio(bg, text).rgb
	}
	}

	const originalColor = convert(text).hex
	const invertedColor = invertLightness(originalColor).hex
	const invertedContrast = getContrastRatio(bg, convert(invertedColor).rgb)
	let workColor

	if (invertedContrast > originalContrast) {
	workColor = invertedColor
	} else {
	workColor = originalColor
	}

	let contrast = getContrastRatio(bg, text)
	const result = convert(rgb2hex(workColor)).hsl
	const delta = result.l >= 50 ? 1 : -1
	const multiplier = 1
	while (contrast < 4.5 && result.l > 20 && result.l < 80) {
	result.l += delta * multiplier
	result.l = Math.min(100, Math.max(0, result.l))
	contrast = getContrastRatio(bg, convert(result).rgb)
	}

	const base = text.a !== undefined ? { a: text.a } : {}
	return Object.assign(convert(result).rgb, base)
	}

	/**
	* Converts color to CSS Color value
	*
	* @param {Object\|String} input - color
	* @param {Number} [a] - alpha value
	* @returns {String} a CSS Color value
	*/
	export const getCssColor = (input, a) => {
	let rgb = {}
	if (typeof input === 'object') {
	rgb = input
	} else if (typeof input === 'string') {
	if (input.startsWith('#')) {
	rgb = hex2rgb(input)
	} else {
	return input
	}
	}
	return rgba2css({ ...rgb, a })
	}
	diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
	index 8721189d13..d2df5e8699 100644
	--- a/src/services/entity_normalizer/entity_normalizer.service.js
	+++ b/src/services/entity_normalizer/entity_normalizer.service.js
	@@ -1,426 +1,426 @@
	import { parseLinkHeader } from '@web3-storage/parse-link-header'
	import escapeHtml from 'escape-html'
	import { unescape as lodashUnescape } from 'lodash'
	import punycode from 'punycode.js'

	import { fileType } from '../file_type/file_type.service.js'
	import { isStatusNotification } from '../notification_utils/notification_utils.js'

	/ NOTICE!
	* Do not initialize UI-generated data here.
	* It will override existing data.
	*
	* i.e. user.pinnedStatusIds was set to [] here
	* UI code would update it with data but upon next user fetch
	* it would be reverted back to []
	*/

	export const parseUser = (data) => {
	const output = {}
	output._original = data // used for server-side settings

	// case for users in "mentions" property for statuses in MastoAPI
	const mastoShort = !Object.hasOwn(data, 'avatar')

	output.inLists = null
	output.id = String(data.id)

	output.screen_name = data.acct
	output.fqn = data.fqn
	output.statusnet_profile_url = data.url

	if (Object.hasOwn(data, 'mute_expires_at')) {
	output.mute_expires_at =
	data.mute_expires_at == null ? false : data.mute_expires_at
	}

	if (Object.hasOwn(data, 'block_expires_at')) {
	output.block_expires_at =
	data.block_expires_at == null ? false : data.block_expires_at
	}

	// There's nothing else to get
	if (mastoShort) {
	return output
	}

	output.emoji = data.emojis
	output.name = escapeHtml(data.display_name)
	output.name_html = output.name
	output.name_unescaped = data.display_name

	output.description = data.note
	// TODO cleanup this shit, output.description is overriden with source data
	output.description_html = data.note

	output.fields = data.fields
	output.fields_html = data.fields.map((field) => {
	return {
	name: escapeHtml(field.name),
	value: field.value,
	}
	})
	output.fields_text = data.fields.map((field) => {
	return {
	name: unescape(field.name.replace(/<[^>]*>/g, '')),
	value: unescape(field.value.replace(/<[^>]*>/g, '')),
	}
	})

	// Utilize avatar_static for gif avatars?
	output.profile_image_url = data.avatar
	output.profile_image_url_original = data.avatar

	// Same, utilize header_static?
	output.cover_photo = data.header

	output.friends_count = data.following_count

	output.bot = data.bot

	output.privileges = []

	if (data.pleroma) {
	if (data.pleroma.settings_store) {
	output.storage = data.pleroma.settings_store['pleroma-fe']
	output.user_highlight = data.pleroma.settings_store['user_highlight']
	}
	const relationship = data.pleroma.relationship

	output.background_image = data.pleroma.background_image
	output.favicon = data.pleroma.favicon
	output.token = data.pleroma.chat_token

	if (relationship) {
	output.relationship = relationship
	}

	output.allow_following_move = data.pleroma.allow_following_move

	output.hide_favorites = data.pleroma.hide_favorites
	output.hide_follows = data.pleroma.hide_follows
	output.hide_followers = data.pleroma.hide_followers
	output.hide_follows_count = data.pleroma.hide_follows_count
	output.hide_followers_count = data.pleroma.hide_followers_count

	output.rights = {
	moderator: data.pleroma.is_moderator,
	admin: data.pleroma.is_admin,
	}
	// TODO: Clean up in UI? This is duplication from what BE does for qvitterapi
	if (output.rights.admin) {
	output.role = 'admin'
	} else if (output.rights.moderator) {
	output.role = 'moderator'
	} else {
	output.role = 'member'
	}

	output.birthday = data.pleroma.birthday

	if (data.pleroma.privileges) {
	output.privileges = new Set(data.pleroma.privileges)
	} else if (data.pleroma.is_admin) {
	output.privileges = new Set([
	'users_read',
	'users_manage_invites',
	'users_manage_activation_state',
	'users_manage_tags',
	'users_manage_credentials',
	'users_delete',
	'messages_read',
	'messages_delete',
	'instances_delete',
	'reports_manage_reports',
	'moderation_log_read',
	'announcements_manage_announcements',
	'emoji_manage_emoji',
	'statistics_read',
	])
	} else if (data.pleroma.is_moderator) {
	output.privileges = new Set(['messages_delete', 'reports_manage_reports'])
	} else {
	output.privileges = new Set()
	}
	}

	if (data.source) {
	output.description = data.source.note
	output.default_scope = data.source.privacy
	output.fields = data.source.fields
	if (data.source.pleroma) {
	output.no_rich_text = data.source.pleroma.no_rich_text
	output.show_role =
	typeof data.source.pleroma.show_role === 'boolean'
	? data.source.pleroma.show_role
	: true
	output.discoverable = data.source.pleroma.discoverable
	output.show_birthday = data.pleroma.show_birthday
	output.actor_type = data.source.pleroma.actor_type
	}
	}

	// TODO: handle is_local
	output.is_local = !output.screen_name.includes('@')

	output.created_at = new Date(data.created_at)
	output.locked = data.locked
	output.last_status_at = new Date(data.last_status_at)
	output.followers_count = data.followers_count
	output.statuses_count = data.statuses_count

	if (data.pleroma) {
	output.follow_request_count = data.pleroma.follow_request_count

	output.tags = new Set(data.pleroma.tags)

	// deactivated was changed to is_active in Pleroma 2.3.0
	// so check if is_active is present
	output.deactivated =
	data.pleroma.is_active !== undefined
	? !data.pleroma.is_active // new backend
	: data.pleroma.deactivated // old backend

	output.notification_settings = data.pleroma.notification_settings
	output.unread_chat_count = data.pleroma.unread_chat_count
	}

	output.tags = output.tags \|\| new Set()
	output.rights = output.rights \|\| {}
	output.notification_settings = output.notification_settings \|\| {}

	// Convert punycode to unicode for UI
	output.screen_name_ui = output.screen_name
	if (output.screen_name && output.screen_name.includes('@')) {
	const parts = output.screen_name.split('@')
	const unicodeDomain = punycode.toUnicode(parts[1])
	if (unicodeDomain !== parts[1]) {
	// Add some identifier so users can potentially spot spoofing attempts:
	// lain.com and xn--lin-6cd.com would appear identical otherwise.
	output.screen_name_ui_contains_non_ascii = true
	output.screen_name_ui = [parts[0], unicodeDomain].join('@')
	} else {
	output.screen_name_ui_contains_non_ascii = false
	}
	}

	return output
	}

	export const parseAttachment = (data) => {
	const output = {}

	// Not exactly same...
	output.mimetype = data.pleroma ? data.pleroma.mime_type : data.type
	output.meta = data.meta // not present in BE yet
	output.id = data.id

	if (data.type !== 'unknown') {
	// treat gifv like it is "video"
	output.type = data.type === 'gifv' ? 'video' : data.type
	} else {
	output.type = fileType(output.mimetype)
	}
	output.url = data.url
	output.large_thumb_url = data.preview_url
	output.description = lodashUnescape(data.description)

	return output
	}

	export const parseSource = (data) => {
	const output = {}

	output.text = data.text
	output.spoiler_text = data.spoiler_text
	output.content_type = data.content_type

	return output
	}

	export const parseStatus = (data) => {
	const output = {}

	output.favorited = data.favourited
	output.fave_num = data.favourites_count

	output.repeated = data.reblogged
	output.repeat_num = data.reblogs_count

	output.bookmarked = data.bookmarked

	output.type = data.reblog ? 'retweet' : 'status'
	output.nsfw = data.sensitive

	output.raw_html = data.content
	output.emojis = data.emojis

	output.tags = data.tags

	output.edited_at = data.edited_at

	const { pleroma } = data

	if (data.pleroma) {
	output.text = pleroma.content
	? data.pleroma.content['text/plain']
	: data.content
	output.summary = pleroma.spoiler_text
	? data.pleroma.spoiler_text['text/plain']
	: data.spoiler_text
	output.statusnet_conversation_id = data.pleroma.conversation_id
	output.is_local = pleroma.local
	output.in_reply_to_screen_name = pleroma.in_reply_to_account_acct
	output.thread_muted = pleroma.thread_muted
	output.emoji_reactions = pleroma.emoji_reactions
	output.parent_visible =
	pleroma.parent_visible === undefined ? true : pleroma.parent_visible
	output.quote_visible = pleroma.quote_visible \|\| true
	output.quotes_count = pleroma.quotes_count
	output.bookmark_folder_id = pleroma.bookmark_folder
	} else {
	output.text = data.content
	output.summary = data.spoiler_text
	}

	const quoteRaw = pleroma?.quote \|\| data.quote
	const quoteData = quoteRaw ? parseStatus(quoteRaw) : undefined
	output.quote = quoteData
	output.quote_id =
	data.quote?.id ?? data.quote_id ?? quoteData?.id ?? pleroma?.quote_id
	output.quote_url = data.quote?.url ?? quoteData?.url ?? pleroma?.quote_url

	output.in_reply_to_status_id = data.in_reply_to_id
	output.in_reply_to_user_id = data.in_reply_to_account_id
	output.replies_count = data.replies_count

	if (output.type === 'retweet') {
	output.retweeted_status = parseStatus(data.reblog)
	}

	output.summary_raw_html = escapeHtml(data.spoiler_text)
	output.external_url = data.uri \|\| data.url
	output.poll = data.poll
	if (output.poll) {
	output.poll.options = (output.poll.options \|\| []).map((field) => ({
	...field,
	title_html: escapeHtml(field.title),
	}))
	}
	output.pinned = data.pinned
	output.muted = data.muted

	output.id = String(data.id)
	output.visibility = data.visibility
	output.card = data.card
	output.created_at = new Date(data.created_at)

	// Converting to string, the right way.
	output.in_reply_to_status_id = output.in_reply_to_status_id
	? String(output.in_reply_to_status_id)
	: null
	output.in_reply_to_user_id = output.in_reply_to_user_id
	? String(output.in_reply_to_user_id)
	: null

	output.user = parseUser(data.account)

	output.attentions = (data.mentions \|\| []).map(parseUser)

	output.attachments = (data.media_attachments \|\| []).map(parseAttachment)

	const retweetedStatus = data.reblog
	if (retweetedStatus) {
	output.retweeted_status = parseStatus(retweetedStatus)
	}

	output.favoritedBy = []
	output.rebloggedBy = []

	if (Object.hasOwn(data, 'originalStatus')) {
	Object.assign(output, data.originalStatus)
	}

	return output
	}

	export const parseNotification = (data) => {
	const mastoDict = {
	favourite: 'like',
	reblog: 'repeat',
	}
	const output = {}

	output.type = mastoDict[data.type] \|\| data.type
	output.seen = data.pleroma.is_seen
	// TODO: null check should be a temporary fix, I guess.
	// Investigate why backend does this.
	output.status =
	isStatusNotification(output.type) && data.status !== null
	? parseStatus(data.status)
	: null
	output.target = output.type !== 'move' ? null : parseUser(data.target)
	output.from_profile = parseUser(data.account)
	output.emoji = data.emoji
	output.emoji_url = data.emoji_url
	if (data.report) {
	output.report = data.report
	output.report.content = data.report.content
	output.report.acct = parseUser(data.report.account)
	output.report.actor = parseUser(data.report.actor)
	output.report.statuses = data.report.statuses.map(parseStatus)
	}

	output.created_at = new Date(data.created_at)
	- output.id = parseInt(data.id)
	+ output.id = Number.parseInt(data.id)

	return output
	}

	export const parseLinkHeaderPagination = (linkHeader, opts = {}) => {
	const flakeId = opts.flakeId
	const parsedLinkHeader = parseLinkHeader(linkHeader)
	if (!parsedLinkHeader) return
	const maxId = parsedLinkHeader.next?.max_id
	const minId = parsedLinkHeader.prev?.min_id

	return {
	- maxId: flakeId ? maxId : parseInt(maxId, 10),
	- minId: flakeId ? minId : parseInt(minId, 10),
	+ maxId: flakeId ? maxId : Number.parseInt(maxId, 10),
	+ minId: flakeId ? minId : Number.parseInt(minId, 10),
	}
	}

	export const parseChat = (chat) => {
	const output = {}
	output.id = chat.id
	output.account = parseUser(chat.account)
	output.unread = chat.unread
	output.lastMessage = parseChatMessage(chat.last_message)
	output.updated_at = new Date(chat.updated_at)
	return output
	}

	export const parseChatMessage = (message) => {
	if (!message) {
	return
	}
	if (message.isNormalized) {
	return message
	}
	const output = message
	output.id = message.id
	output.created_at = new Date(message.created_at)
	output.chat_id = message.chat_id
	output.emojis = message.emojis
	output.content = message.content
	if (message.attachment) {
	output.attachments = [parseAttachment(message.attachment)]
	} else {
	output.attachments = []
	}
	output.pending = !!message.pending
	output.error = false
	output.idempotency_key = message.idempotency_key
	output.isNormalized = true
	return output
	}
	diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
	index 83dc6ce2ce..168104c733 100644
	--- a/src/services/style_setter/style_setter.js
	+++ b/src/services/style_setter/style_setter.js
	@@ -1,370 +1,370 @@
	import sum from 'hash-sum'
	import localforage from 'localforage'
	import { chunk, throttle } from 'lodash'

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

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

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

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

	const stylesheets = {}

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

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

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

	stylesheets[id] = newStyleSheet
	return newStyleSheet
	}

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

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

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

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

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

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

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

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

	return { lazyProcessFunc: processChunk }
	}

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

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

	eagerStyles.ready = true
	lazyStyles.ready = true

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

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

	eagerStyles.clear()
	lazyStyles.clear()

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

	setTimeout(lazyProcessFunc, 0)
	}

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

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

	return result
	}

	const defaultStyleConfig = extractStyleConfig(ROOT_CONFIG)

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

	if (config === defaultStyleConfig) {
	return
	}

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

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

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

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

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

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

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

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

	const total = [...custom, ...builtin]
	if (total.length === 0) {
	return Promise.reject(
	new Error(
	`Resource at ${url} and ${customUrl} completely unavailable. Panicking`,
	),
	)
	}
	return Promise.resolve(Object.fromEntries(total))
	}

File Metadata

Mime Type: text/x-diff
Expires: Sun, Aug 9, 9:38 AM (1 d, 18 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1724401
Default Alt Text: (80 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions