No OneTemporary
Actions

Authored By

Unknown

Size

107 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.js b/src/App.js
	index c5a54ddc0a..bafd211b7d 100644
	--- a/src/App.js
	+++ b/src/App.js
	@@ -1,348 +1,342 @@
	import { throttle } from 'lodash-es'
	import { mapState } from 'pinia'
	import { defineAsyncComponent, provide } from 'vue'

	import DesktopNav from 'src/components/desktop_nav/desktop_nav.vue'
	import FeaturesPanel from 'src/components/features_panel/features_panel.vue'
	import GlobalError from 'src/components/global_error/global_error.vue'
	import GlobalNoticeList from 'src/components/global_notice_list/global_notice_list.vue'
	import InstanceSpecificPanel from 'src/components/instance_specific_panel/instance_specific_panel.vue'
	import MobileNav from 'src/components/mobile_nav/mobile_nav.vue'
	import MobilePostStatusButton from 'src/components/mobile_post_status_button/mobile_post_status_button.vue'
	import NavPanel from 'src/components/nav_panel/nav_panel.vue'
	import UserPanel from 'src/components/user_panel/user_panel.vue'
	import { getOrCreateServiceWorker } from './services/sw/sw'
	import { windowHeight, windowWidth } from './services/window_utils/window_utils'

	import { useEmojiStore } from 'src/stores/emoji.js'
	import { useI18nStore } from 'src/stores/i18n.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useShoutStore } from 'src/stores/shout.js'
	import { useUsersStore } from 'src/stores/users.js'

	import { useBodyScroller } from 'src/composables/useBodyScroller.js'
	import { useScrollPosition } from 'src/composables/useScrollPosition.js'
	import { useWindowScroll } from 'src/composables/useWindowScroll.js'
	import { useWindowSize } from 'src/composables/useWindowSize.js'

	// Helper to unwrap reactive proxies
	window.toValue = (x) => JSON.parse(JSON.stringify(x))

	export default {
	name: 'app',
	components: {
	UserPanel,
	NavPanel,
	Notifications: defineAsyncComponent(
	() => import('src/components/notifications/notifications.vue'),
	),
	InstanceSpecificPanel,
	FeaturesPanel,
	WhoToFollowPanel: defineAsyncComponent(
	() =>
	import('src/components/who_to_follow_panel/who_to_follow_panel.vue'),
	),
	ShoutPanel: defineAsyncComponent(
	() => import('src/components/shout_panel/shout_panel.vue'),
	),
	MediaModal: defineAsyncComponent(
	() => import('src/components/media_modal/media_modal.vue'),
	),
	MobilePostStatusButton,
	MobileNav,
	DesktopNav,
	FollowRequestConfirm: defineAsyncComponent(
	() =>
	import(
	'src/components/follow_request_confirm/follow_request_confirm.vue'
	),
	),
	SettingsModal: defineAsyncComponent(
	() => import('src/components/settings_modal/settings_modal.vue'),
	),
	UpdateNotification: defineAsyncComponent(
	() =>
	import('src/components/update_notification/update_notification.vue'),
	),
	PostStatusModal: defineAsyncComponent(
	() => import('src/components/post_status_modal/post_status_modal.vue'),
	),
	UserReportingModal: defineAsyncComponent(
	() =>
	import('src/components/user_reporting_modal/user_reporting_modal.vue'),
	),
	EditStatusModal: defineAsyncComponent(
	() => import('src/components/edit_status_modal/edit_status_modal.vue'),
	),
	StatusHistoryModal: defineAsyncComponent(
	() =>
	import('src/components/status_history_modal/status_history_modal.vue'),
	),
	GlobalError,
	GlobalNoticeList,
	},
	setup() {
	provide(
	'bodyScrollPosition',
	useScrollPosition(useBodyScroller(useWindowScroll(), useWindowSize())),
	)
	},
	data: () => ({
	mobileActivePanel: 'timeline',
	updateMobileState: null,
	updateScrollState: null,
	}),
	provide() {
	return {
	allowNonSquareEmoji: useMergedConfigStore().mergedConfig.nonSquareEmoji,
	}
	},
	watch: {
	themeApplied() {
	this.removeSplash()
	},
	currentTheme() {
	this.setThemeBodyClass()
	},
	underlineLinks: {
	handler(value) {
	if (value) {
	document.body.classList.add('underline-links')
	} else {
	document.body.classList.remove('underline-links')
	}
	},
	immediate: true,
	},
	layoutType() {
	document.getElementById('modal').classList = ['-' + this.layoutType]
	},
	},
	created() {
	// Load the locale from the storage
	const value = useMergedConfigStore().mergedConfig.interfaceLanguage
	useI18nStore().setLanguage(value)
	useEmojiStore().loadUnicodeEmojiData(value)

	document.getElementById('modal').classList = ['-' + this.layoutType]

	// Create bound handlers
	this.updateScrollState = throttle(this.scrollHandler, 200)
	this.updateMobileState = throttle(this.resizeHandler, 200)
	},
	mounted() {
	window.addEventListener('resize', this.updateMobileState)
	this.scrollParent.addEventListener('scroll', this.updateScrollState)

	if (this.themeApplied) {
	this.setThemeBodyClass()
	this.removeSplash()
	}
	getOrCreateServiceWorker()
	},
	unmounted() {
	window.removeEventListener('resize', this.updateMobileState)
	this.scrollParent.removeEventListener('scroll', this.updateScrollState)
	},
	computed: {
	currentTheme() {
	if (this.styleDataUsed) {
	const styleMeta = this.styleDataUsed.find(
	(x) => x.component === '@meta',
	)

	if (styleMeta !== undefined) {
	return styleMeta.directives.name.replaceAll(' ', '-').toLowerCase()
	}
	}

	return 'stock'
	},
	underlineLinks() {
	return useMergedConfigStore().mergedConfig.underlineLinks
	},
	layoutModalClass() {
	return '-' + this.layoutType
	},
	classes() {
	return [
	{
	'-reverse': this.reverseLayout,
	'-no-sticky-headers': this.noSticky,
	'-has-new-post-button': this.newPostButtonShown,
	},
	'-' + this.layoutType,
	]
	},
	navClasses() {
	const { navbarColumnStretch } = useMergedConfigStore().mergedConfig
	return [
	'-' + this.layoutType,
	...(navbarColumnStretch ? ['-column-stretch'] : []),
	]
	},
	userBackground() {
	return this.currentUser?.background_image
	},
	foreignProfileBackground() {
	return (
	useMergedConfigStore().mergedConfig.allowForeignUserBackground &&
	useInterfaceStore().foreignProfileBackground
	)
	},
	instanceBackground() {
	return useMergedConfigStore().mergedConfig.hideInstanceWallpaper
	? null
	: this.instanceBackgroundUrl
	},
	background() {
	return (
	this.foreignProfileBackground \|\|
	this.userBackground \|\|
	this.instanceBackground
	)
	},
	bgStyle() {
	if (this.background) {
	return {
	'--body-background-image': `url(${this.background})`,
	}
	}
	},
	shoutJoined() {
	return useShoutStore().joined
	},
	isChats() {
	return (
	this.$route.name === 'chat' \|\|
	this.$route.name === 'chats' \|\|
	this.$route.name === 'conversation2'
	)
	},
	isListEdit() {
	return this.$route.name === 'lists-edit'
	},
	newPostButtonShown() {
	if (this.isChats) return false
	if (this.isListEdit) return false
	return (
	useMergedConfigStore().mergedConfig.alwaysShowNewPostButton \|\|
	this.layoutType === 'mobile'
	)
	},
	shoutboxPosition() {
	return (
	useMergedConfigStore().mergedConfig.alwaysShowNewPostButton \|\| false
	)
	},
	hideShoutbox() {
	return this.isChats \|\| useMergedConfigStore().mergedConfig.hideShoutbox
	},
	thirdColumnMode() {
	return this.mergedConfig.thirdColumnMode
	},
	reverseSetting() {
	return this.mergedConfig.sidebarRight
	},
	- thirdColumnMode() {
	- return this.mergedConfig.thirdColumnMode
	- },
	- reverseSetting() {
	- return this.mergedConfig.sidebarRight
	- },
	reverseLayout() {
	if (this.layoutType !== 'wide') {
	return this.reverseSetting
	} else {
	return this.thirdColumnMode === 'notifications'
	? this.reverseSetting
	: !this.reverseSetting
	}
	},
	noSticky() {
	return this.mergedConfig.disableStickyHeaders
	},
	showScrollbars() {
	return this.mergedConfig.showScrollbars
	},
	scrollParent() {
	return window /* this.$refs.appContentRef */
	},
	showInstanceSpecificPanel() {
	return this.instanceSpecificPanelPresent && !this.mergedConfig.hideISP
	},
	...mapState(useMergedConfigStore, ['mergedConfig']),
	...mapState(useInterfaceStore, [
	'themeApplied',
	'styleDataUsed',
	'layoutType',
	]),
	...mapState(useUsersStore, ['currentUser']),
	...mapState(useInstanceStore, ['styleDataUsed']),
	...mapState(useInstanceCapabilitiesStore, [
	'suggestionsEnabled',
	'editingAvailable',
	]),
	...mapState(useInstanceStore, {
	instanceBackgroundUrl: (store) => store.instanceIdentity.background,
	showFeaturesPanel: (store) => store.instanceIdentity.showFeaturesPanel,
	instanceSpecificPanelPresent: (store) =>
	store.instanceIdentity.showInstanceSpecificPanel &&
	store.instanceIdentity.instanceSpecificPanelContent,
	}),
	},
	methods: {
	resizeHandler() {
	useInterfaceStore().setLayoutWidth(windowWidth())
	useInterfaceStore().setLayoutHeight(windowHeight())
	},
	scrollHandler() {
	const scrollPosition =
	this.scrollParent === window
	? window.scrollY
	: this.scrollParent.scrollTop

	if (scrollPosition != 0) {
	this.$refs.appContentRef.classList.add(['-scrolled'])
	} else {
	this.$refs.appContentRef.classList.remove(['-scrolled'])
	}
	},
	setThemeBodyClass() {
	const themeName = this.currentTheme
	const classList = Array.from(document.body.classList)
	const oldTheme = classList.filter((c) => c.startsWith('theme-'))

	if (themeName !== null && themeName !== '') {
	const newTheme = `theme-${themeName.toLowerCase()}`

	// remove old theme reference if there are any
	if (oldTheme.length) {
	document.body.classList.replace(oldTheme[0], newTheme)
	} else {
	document.body.classList.add(newTheme)
	}
	} else {
	// remove theme reference if non-V3 theme is used
	document.body.classList.remove(...oldTheme)
	}
	},
	removeSplash() {
	document.querySelector('#status').textContent = this.$t(
	'splash.fun_' + Math.ceil(Math.random() * 4),
	)
	const splashscreenRoot = document.querySelector('#splash')
	splashscreenRoot.addEventListener('transitionend', () => {
	splashscreenRoot.remove()
	})
	setTimeout(() => {
	splashscreenRoot.remove() // forcibly remove it, should fix my plasma browser widget t. HJ
	}, 600)
	splashscreenRoot.classList.add('hidden')
	document.querySelector('#app').classList.remove('hidden')
	},
	},
	}
	diff --git a/src/boot/after_store.js b/src/boot/after_store.js
	index 1c01f8feb9..3ab8d943ec 100644
	--- a/src/boot/after_store.js
	+++ b/src/boot/after_store.js
	@@ -1,669 +1,669 @@
	/* 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 InstancePicker from 'src/components/instance_picker/instance_picker.vue'
	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 { useAuthFlowStore } from 'src/stores/auth_flow'
	import { useChatsStore } from 'src/stores/chats.js'
	+import {
	+ INSTANCE_DEFAULT_CONFIG_DEFINITIONS,
	+ INSTANCE_IDENTITY_DEFAULT_DEFINITIONS,
	+ INSTANCE_IDENTIY_EXTERNAL,
	+} from 'src/stores/default_state/default_config_state.js'
	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 { useNotificationsStore } from 'src/stores/notifications.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	import { useStatusesStore } from 'src/stores/statuses.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'
	import { useUserHighlightStore } from 'src/stores/user_highlight.js'
	import { useUsersStore } from 'src/stores/users.js'

	import { apiUrl, setApiBase } from 'src/api/api_base.js'
	import { getRoutes } from 'src/boot/routes.js'
	import VBodyScrollLock from 'src/directives/body_scroll_lock'
	-import {
	- INSTANCE_DEFAULT_CONFIG_DEFINITIONS,
	- INSTANCE_IDENTITY_DEFAULT_DEFINITIONS,
	- INSTANCE_IDENTIY_EXTERNAL,
	-} from 'src/stores/default_state/default_config_state.js'
	import {
	chosenInstance,
	instanceConfig,
	isHosted,
	} from 'src/services/hosted/hosted.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.codePointAt(0)))
	const text = new TextDecoder().decode(array)
	return text
	}

	const preloadFetch = async (request) => {
	const data = parsedInitialResults()
	if (!data?.[request]) {
	return window.fetch(apiUrl(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(
	apiUrl('/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 = { ...apiConfig, ...staticConfig }
	} else {
	config = { ...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(apiUrl('/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 {
	// the instance's sticker packs (hosted: on the instance)
	const res = await window.fetch(apiUrl('/static/stickers.json'))
	if (res.ok) {
	const values = await res.json()
	const stickers = (
	await Promise.all(
	Object.entries(values).map(async ([name, packPath]) => {
	const path = apiUrl(packPath)
	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: Number.parseInt(uploadLimits.general),
	})
	useInstanceStore().set({
	path: 'limits.avatarlimit',
	value: Number.parseInt(uploadLimits.avatar),
	})
	useInstanceStore().set({
	path: 'limits.backgroundlimit',
	value: Number.parseInt(uploadLimits.background),
	})
	useInstanceStore().set({
	path: 'limits.bannerlimit',
	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, staticConfig, backendConfig }) => {
	// hosted: the instance's paths point at the instance, login redirects
	const apiConfig = isHosted(staticConfig)
	? instanceConfig(await getBackendProvidedConfig(), apiUrl)
	: backendConfig

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

	// Hosted mode with no instance chosen yet: ask for one instead of starting
	// the app. The theme is applied first so the question looks like the app.
	const showInstancePicker = async ({ pinia, i18n }) => {
	try {
	await useInterfaceStore().applyTheme()
	} catch (e) {
	console.warn('No theme for the instance picker', e)
	}
	const picker = createApp(InstancePicker)
	picker.use(pinia)
	picker.use(i18n)
	picker.component('FAIcon', FontAwesomeIcon)
	picker.mount('#app')
	document.querySelector('#splash')?.remove()
	document.querySelector('#app').classList.remove('hidden')
	}

	const checkOAuthToken = async ({ store }) => {
	const oauth = useOAuthStore()
	if (oauth.userToken) {
	return useUsersStore().loginUser(oauth.userToken)
	}
	}

	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 TypeError(
	'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 TypeError(
	'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 TypeError(
	`${name} store's $persistLoaded is not a Promise. The persist plugin is not applied.`,
	)
	}
	await p
	} else {
	throw new TypeError(
	`Store module ${name} does not export a 'use...' function`,
	)
	}
	}),
	)
	}

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

	if (storageError \|\| newStorageError) {
	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(useNotificationsStore())

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

	// both at once; a hosted site asks the chosen instance again in setConfig
	const [staticConfig, backendConfig] = await Promise.all([
	getStaticConfig(),
	getBackendProvidedConfig(),
	])
	const hosted = isHosted(staticConfig)
	if (hosted && !chosenInstance()) {
	await showInstancePicker({ pinia, i18n })
	return app
	}
	if (hosted) setApiBase(chosenInstance())
	useInstanceStore().set({ path: 'hosted', value: hosted })

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

	await setConfig({ store, staticConfig, backendConfig })
	try {
	await useInterfaceStore()
	.applyTheme()
	.catch((e) => {
	console.error('Error setting theme', e)
	})
	} catch (e) {
	window.splashError(e)
	throw 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 }),
	])

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

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

	useI18nStore().setI18n(i18n)

	// Global WS handlers
	useChatsStore().attachSocket()
	useInterfaceStore().attachSocket()
	useStatusesStore().attachSocket()

	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/settings_modal.js b/src/components/settings_modal/settings_modal.js
	index f9c65c9afc..e9989ec989 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-es'
	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/stores/default_state/default_config_state.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 {
	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/timeline/timeline.js b/src/components/timeline/timeline.js
	index a8c659d94d..1fcce80075 100644
	--- a/src/components/timeline/timeline.js
	+++ b/src/components/timeline/timeline.js
	@@ -1,319 +1,334 @@
	import { debounce, throttle } from 'lodash-es'
	import { storeToRefs } from 'pinia'
	import {
	computed,
	inject,
	nextTick,
	onMounted,
	onUnmounted,
	ref,
	toRefs,
	useId,
	useTemplateRef,
	watch,
	} from 'vue'
	import { useI18n } from 'vue-i18n'

	import Conversation from 'src/components/conversation/conversation.vue'
	import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
	import QuickViewSettings from 'src/components/quick_view_settings/quick_view_settings.vue'
	import ScrollTopButton from 'src/components/scroll_top_button/scroll_top_button.vue'
	import TimelineMenu from 'src/components/timeline_menu/timeline_menu.vue'

	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useStatusesStore } from 'src/stores/statuses.js'
	import { useTimelinesStore } from 'src/stores/timelines.js'

	import { useDocumentFocus } from 'src/composables/useDocumentFocus.js'
	import { useInterfaceSizes } from 'src/composables/useInterfaceSizes.js'
	import { useVirtualScrolling } from 'src/composables/useVirtualScrolling.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faArrowUp,
	faCheck,
	faCircleNotch,
	faCirclePlus,
	faCog,
	faMinus,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faCircleNotch, faCog, faMinus, faArrowUp, faCirclePlus, faCheck)

	const Timeline = {
	props: {
	timelineRef: Object,
	footerSlipgate: Object, // reference to an element where we should put our footer
	embedded: Boolean,
	skipPinned: Boolean,
	hideEmpty: Boolean,
	},
	components: {
	ScrollTopButton,
	Conversation,
	TimelineMenu,
	QuickFilterSettings,
	QuickViewSettings,
	},
	setup(props, ctx) {
	const { t } = useI18n()
	const { mergedConfig } = storeToRefs(useMergedConfigStore())

	const { focused } = useDocumentFocus()
	const unfocused = computed(() => !focused.value)

	// Timeline
	const { timelineRef } = toRefs(props)
	const timeline = computed(() => useTimelinesStore()[timelineRef.value.name])
	const { skipPinned } = toRefs(props)
	const filteredVisibleStatuses = computed(() => {
	return timeline.value.order
	.filter((id) => timeline.value.visibleStatusIds.has(id))
	.map((id) => useStatusesStore().allStatuses.get(id))
	.filter(({ pinned }) => (skipPinned.value ? !pinned : true))
	})

	// Scroll position
	const scroller = inject('bodyScrollPosition')
	- const { hasReachedTop, shouldLoadBottom, top: scrollY, scrollToPriority } = scroller
	+ const {
	+ hasReachedTop,
	+ shouldLoadBottom,
	+ top: scrollY,
	+ scrollToPriority,
	+ } = scroller

	// Pagination
	- const paginationEnabled = computed(() => mergedConfig.value.timelinePagination)
	+ const paginationEnabled = computed(
	+ () => mergedConfig.value.timelinePagination,
	+ )
	const page = ref(0)
	const PAGE_SIZE = 20
	const pageStart = computed(() => page.value * PAGE_SIZE)
	const pageEnd = computed(() => pageStart.value + PAGE_SIZE)
	const currentSlice = computed(() => {
	if (paginationEnabled.value) {
	- return filteredVisibleStatuses.value.slice(pageStart.value, pageEnd.value)
	+ return filteredVisibleStatuses.value.slice(
	+ pageStart.value,
	+ pageEnd.value,
	+ )
	} else {
	return filteredVisibleStatuses.value
	}
	})
	const isFirstPage = computed(() => page.value <= 0)
	const isLastPage = computed(() => {
	const bottomedOut = timeline.value.fetcher.bottomedOut
	const lastId = timeline.value.minId
	- const lastIdInPage = currentSlice.value.find(({ id }) => timeline.value.minId)
	+ const lastIdInPage = currentSlice.value.find(
	+ ({ id }) => timeline.value.minId,
	+ )
	return bottomedOut && lastId && lastIdInPage
	})

	const nextPage = () => {
	if (isLastPage.value) return
	fetchOlderStatuses()
	page.value++
	scrollToPriority({ top: 0, behavior: 'smooth' })
	}
	const previousPage = () => {
	if (isFirstPage.value) return
	page.value--
	scrollToPriority({ top: 0, behavior: 'smooth' })
	}

	// Virtual scrolling
	const { fontSize, navbarSize } = useInterfaceSizes()

	// Placeholder heights.
	const mutedStatusHeight = computed(() => fontSize.value * 1.5)
	const normalStatusHeight = computed(() => fontSize.value * 10)
	const getPlaceholderHeight = (id) =>
	currentSlice.value.find((item) => item.id === id)?.muted
	? mutedStatusHeight
	: normalStatusHeight

	const body = useTemplateRef('timeline')
	const offset = computed(() => {
	if (embedded.value) {
	// The fontsize after navbar is the little gap between navbar and content
	return navbarSize.value + fontSize.value
	} else {
	return 0
	}
	})
	const { heightChart, changeSuspendState, updateVirtualHeight } =
	useVirtualScrolling({
	name: 'Timeline',
	enabled: ref(true),
	list: currentSlice,
	body,
	offset,
	scrollPositionInstance: scroller,
	scrollCompensation: true,
	getPlaceholderHeight,
	})

	// Counter
	const count = computed(() => timeline.value.order.length)
	const newStatusCount = computed(() => timeline.value.newStatusCount)
	const showLoadButton = computed(
	() => timeline.value.newStatusCount > 0 \|\| timeline.value.reloadNeeded,
	)

	// Showing new
	const paused = ref(false)
	const unfocusedPause = computed(
	() => unfocused.value && mergedConfig.value.pauseOnUnfocused,
	)
	- const showNewAutomatically = computed(
	- () => mergedConfig.value.streaming,
	- )
	+ const showNewAutomatically = computed(() => mergedConfig.value.streaming)

	watch(newStatusCount, (count) => {
	if (!showNewAutomatically.value) return
	if (count <= 0) return

	// only 'stream' them when you're scrolled to the top
	- if (hasReachedTop.value && !paused.value && !unfocusedPause.value && page.value === 0) {
	+ if (
	+ hasReachedTop.value &&
	+ !paused.value &&
	+ !unfocusedPause.value &&
	+ page.value === 0
	+ ) {
	showNewStatuses(true)
	} else {
	paused.value = true
	}
	})

	const showNewStatuses = async (fast = false) => {
	if (timeline.value.reloadNeeded) {
	useTimelinesStore().clearTimeline(timelineRef.value.name)
	fetchOlderStatuses()
	} else {
	blockClicksTemporarily()
	useTimelinesStore().showNewStatuses(timelineRef.value.name)
	}
	page.value = 0
	paused.value = false
	await nextTick()
	scroller.scrollToPriority({
	top: 0,
	behavior: fast ? 'instant' : 'smooth',
	})
	}
	const fetchOlderStatuses = throttle(() => {
	timeline.value.fetcher.fetchOlder()
	}, 1000)

	// Timeline change
	const timelineChange = (newTimeline, oldTimeline) => {
	const sameName = newTimeline?.name === oldTimeline?.name
	const sameArgument = newTimeline?.argument === oldTimeline?.argument
	if (sameName && sameArgument) return

	if (oldTimeline) {
	useTimelinesStore().deactivate(oldTimeline.name)
	}
	if (newTimeline) {
	useTimelinesStore().activate(newTimeline.name, newTimeline.argument)
	}
	}
	watch(timelineRef, timelineChange, { immediate: true })
	onUnmounted(() => {
	timelineChange(null, timelineRef.value)
	})

	// Misclick prevention
	const blockingClicks = ref(false)
	const stopBlockingClicks = debounce(() => {
	blockingClicks.value = false
	}, 1000)
	const blockClicksTemporarily = () => {
	if (!blockingClicks.value) {
	blockingClicks.value = true
	}
	stopBlockingClicks()
	}

	// Shortcuts
	const handleShortKey = (e) => {
	// Ignore when input fields are focused
	if (['textarea', 'input'].includes(e.target.tagName.toLowerCase())) return
	if (e.key === '.') showNewStatuses()
	}
	onMounted(() => {
	window.addEventListener('keydown', handleShortKey)
	})
	onUnmounted(() => {
	window.removeEventListener('keydown', handleShortKey)
	})

	const infiniteLoadWatcher = debounce(([value]) => {
	if (!value) return
	if (paginationEnabled.value) return
	fetchOlderStatuses()
	}, 100)
	// Scroll
	watch([shouldLoadBottom, scrollY], infiniteLoadWatcher)
	onUnmounted(() => {
	infiniteLoadWatcher.cancel()
	})

	// Misc UI things
	const classes = computed(() => {
	let rootClasses = !embedded.value
	? ['panel', 'panel-default']
	: ['-embedded']
	if (blockingClicks.value)
	rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
	return {
	root: rootClasses,
	header: ['timeline-heading'].concat(
	!embedded.value ? ['panel-heading', '-sticky'] : ['panel-body'],
	),
	body: ['timeline-body'].concat(
	!embedded.value ? ['panel-body'] : ['panel-body'],
	),
	footer: ['timeline-footer'].concat(
	!embedded.value ? ['panel-footer'] : ['panel-body'],
	),
	}
	})
	const loadButtonString = computed(() => {
	if (timeline.value.reloadNeeded) {
	return t('timeline.reload')
	} else {
	return `${t('timeline.show_new')} (${newStatusCount.value})`
	}
	})
	const mobileLoadButtonString = computed(() => {
	if (timeline.value.reloadNeeded) {
	return '+'
	} else {
	return newStatusCount.value > 99 ? '∞' : newStatusCount.value
	}
	})

	const { layoutType } = storeToRefs(useInterfaceStore())
	const mobileLayout = computed(() => layoutType.value === 'mobile')
	const { footerSlipgate, embedded, hideEmpty } = toRefs(props)
	const uniqueId = useId()

	return {
	timelineRef,
	timeline,

	paginationEnabled,
	page,
	nextPage,
	previousPage,

	heightChart,
	updateVirtualHeight,
	changeSuspendState,

	count,
	showLoadButton,

	showNewStatuses,
	fetchOlderStatuses,

	classes,
	loadButtonString,
	mobileLoadButtonString,
	mobileLayout,
	footerSlipgate,
	embedded,
	hideEmpty,
	uniqueId,
	}
	},
	}

	export default Timeline
	diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
	index 936e0fa022..7b53490a4f 100644
	--- a/src/services/style_setter/style_setter.js
	+++ b/src/services/style_setter/style_setter.js
	@@ -1,381 +1,381 @@
	import sum from 'hash-sum'
	import localforage from 'localforage'
	import { chunk, throttle } from 'lodash-es'

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

	+import { ROOT_CONFIG } from 'src/stores/default_state/default_config_state.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/stores/default_state/default_config_state.js'

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

	const stylesheets = {}

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

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

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

	stylesheets[id] = newStyleSheet
	return newStyleSheet
	}

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

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

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

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

	export const hasInvalidCachedThemeRules = (data) =>
	data
	.flat()
	.some((rule) => /--(?:mono)?font:\s*\[object Object\](?:;\|$)/i.test(rule))

	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 &&
	!hasInvalidCachedThemeRules(cache.data)
	) {
	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 = false,
	) => {
	const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10)
	const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20)

	eagerStyles.clear()
	lazyStyles.clear()

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

	setTimeout(lazyProcessFunc, 0)
	}

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

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

	return result
	}

	const defaultStyleConfig = extractStyleConfig(ROOT_CONFIG)

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

	if (config === defaultStyleConfig) {
	return
	}

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

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

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

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

	const noop = (x) => x

	export const getResourcesIndex = async (url, parser = noop) => {
	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, () => v]
	} else if (typeof v === 'string') {
	return [
	k,
	() =>
	promisedRequest({
	url: v,
	cache,
	forceContentType: parser === noop ? null : 'text/plain',
	})
	.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,
	forceContentType: 'application/json',
	})
	builtin = resourceTransform(builtinData)
	} catch {
	builtin = []
	console.warn(`Builtin resources at ${url} unavailable`)
	}

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

	const total = [...custom, ...builtin]
	if (total.length === 0) {
	throw new Error(
	`Resource at ${url} and ${customUrl} completely unavailable. Panicking`,
	)
	}
	return Object.fromEntries(total)
	}
	diff --git a/src/stores/instance.js b/src/stores/instance.js
	index 31b2b6fe11..0acbbe537e 100644
	--- a/src/stores/instance.js
	+++ b/src/stores/instance.js
	@@ -1,241 +1,240 @@
	import { set } from 'lodash-es'
	import { defineStore } from 'pinia'

	import {
	convertDefinitions,
	INSTANCE_DEFAULT_CONFIG,
	INSTANCE_DEFAULT_CONFIG_DEFINITIONS,
	INSTANCE_IDENTITY_DEFAULT,
	INSTANCE_IDENTITY_DEFAULT_DEFINITIONS,
	LOCAL_DEFAULT_CONFIG,
	LOCAL_DEFAULT_CONFIG_DEFINITIONS,
	validateSetting,
	} from 'src/stores/default_state/default_config_state.js'
	-
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useOAuthStore } from 'src/stores/oauth.js'

	import { fetchKnownDomains } from 'src/api/public.js'

	const REMOTE_INTERACTION_URL = '/main/ostatus'

	const ROOT_STATE_DEFINITIONS = {
	name: {
	type: 'string',
	default: 'PleromaFE',
	},
	registrationOpen: {
	required: true,
	type: 'boolean',
	},
	server: {
	description: 'Server URL',
	required: true,
	type: 'string',
	},
	hosted: {
	description: 'Served from its own site, not by the instance',
	type: 'boolean',
	default: false,
	},
	privateMode: {
	description: 'Private instance?',
	required: true,
	type: 'boolean',
	},
	federating: {
	description: 'Is federation enabled?',
	required: true,
	type: 'boolean',
	},
	federationPolicy: {
	description: '????',
	required: true,
	type: 'object',
	},

	// Indexes of themes/styles/palettes
	themesIndex: {
	required: true,
	type: 'object',
	},
	stylesIndex: {
	required: true,
	type: 'object',
	},
	palettesIndex: {
	required: true,
	type: 'object',
	},

	themeData: {
	description: 'Used for theme v2 editor',
	required: true,
	type: 'object',
	},
	vapidPublicKey: {
	description: 'Used for WebPush',
	required: true,
	type: 'string',
	},

	// Stuff from static/config.json
	loginMethod: {
	description: 'Login method (token/password)',
	default: 'password',
	},
	disableUpdateNotification: {
	description: 'Disable update notification (pleroma-tan one)',
	default: false,
	},
	knownDomains: {
	description: 'List of known domains; used for domain list for domain mutes',
	default: [],
	},

	// Moderation stuff
	staffAccounts: {
	description: 'List of staff accounts',
	default: [],
	},
	accountActivationRequired: {
	description:
	'Account activation (by email or admin) required after registration',
	required: true,
	type: 'boolean',
	},
	accountApprovalRequired: {
	description: 'Admin approval required after registration',
	required: true,
	type: 'boolean',
	},
	birthdayRequired: {
	description: 'Require birthday entry when registering',
	required: true,
	type: 'boolean',
	},
	birthdayMinAge: {
	description: 'Minimum age required for registration',
	default: 0,
	},
	restrictedNicknames: {
	description: 'List of nicknames that are not allowed',
	default: [],
	},
	localBubbleInstances: {
	description: "Akkoma's bubble feature, list of instances",
	default: [],
	}, // Akkoma

	// Version Information
	backendVersion: {
	required: true,
	type: 'string',
	},
	backendRepository: {
	required: true,
	type: 'string',
	},
	frontendVersion: {
	required: true,
	type: 'string',
	},
	}
	const ROOT_STATE = convertDefinitions(ROOT_STATE_DEFINITIONS)

	const DEFAULT_STATE = {
	...ROOT_STATE,
	// Instance-wide configurations that should not be changed by individual users
	instanceIdentity: {
	...INSTANCE_IDENTITY_DEFAULT,
	},

	limits: {
	bannerlimit: null,
	avatarlimit: null,
	backgroundlimit: null,
	uploadlimit: null,
	fieldsLimits: null,
	textLimit: null,
	pollLimits: {
	max_options: 4,
	max_option_chars: 255,
	min_expiration: 60,
	max_expiration: 60 * 60 * 24,
	},
	},

	// Instance admins can override default settings for the whole instance
	prefsStorage: {
	...INSTANCE_DEFAULT_CONFIG,
	...LOCAL_DEFAULT_CONFIG,
	},
	}

	export const useInstanceStore = defineStore('instance', {
	state: () => ({ ...DEFAULT_STATE }),
	getters: {
	instanceDomain(state) {
	return new URL(this.server).hostname
	},
	},
	actions: {
	set({ path, value }) {
	let definition
	const pathArray = path.split('.')
	const subpath = pathArray[1] ?? pathArray[0]

	if (path.startsWith('instanceIdentity.')) {
	definition = INSTANCE_IDENTITY_DEFAULT_DEFINITIONS[subpath]
	} else if (path.startsWith('prefsStorage.')) {
	definition = {
	...LOCAL_DEFAULT_CONFIG_DEFINITIONS,
	...INSTANCE_DEFAULT_CONFIG_DEFINITIONS,
	}[subpath]
	} else if (path.startsWith('limits.')) {
	definition =
	path === 'limits.pollLimits' \|\| path === 'limits.fieldsLimits'
	? { required: true, type: 'object' }
	: { required: true, type: 'number' }
	} else {
	const definitions = ROOT_STATE_DEFINITIONS
	definition = definitions[subpath]
	}

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

	set(this, path, finalValue)

	if (path === 'name') useInterfaceStore().setPageTitle()
	},
	async getKnownDomains() {
	try {
	const { data } = await fetchKnownDomains({
	credentials: useOAuthStore().token,
	})
	this.knownDomains = data
	} catch (e) {
	console.warn("Can't load known domains\n", e)
	}
	},
	getRemoteInteractionLink({ statusId, nickname }) {
	const server = this.server.endsWith('/')
	? this.server.slice(0, -1)
	: this.server
	const link = server + REMOTE_INTERACTION_URL

	if (statusId) {
	return `${link}?status_id=${statusId}`
	} else {
	return `${link}?nickname=${nickname}`
	}
	},
	},
	})
	diff --git a/src/stores/merged_config.js b/src/stores/merged_config.js
	index 5693bf2fbc..5f89c5c645 100644
	--- a/src/stores/merged_config.js
	+++ b/src/stores/merged_config.js
	@@ -1,58 +1,57 @@
	import { defineStore } from 'pinia'

	-import { useInstanceStore } from 'src/stores/instance.js'
	-import { useLocalConfigStore } from 'src/stores/local_config.js'
	-import { useSyncConfigStore } from 'src/stores/sync_config.js'
	-
	import {
	LOCAL_ONLY_KEYS,
	ROOT_CONFIG,
	} from 'src/stores/default_state/default_config_state.js'
	+import { useInstanceStore } from 'src/stores/instance.js'
	+import { useLocalConfigStore } from 'src/stores/local_config.js'
	+import { useSyncConfigStore } from 'src/stores/sync_config.js'

	export const useMergedConfigStore = defineStore('merged_config', {
	getters: {
	mergedConfig: () => {
	const instancePrefs = useInstanceStore().prefsStorage
	const tempPrefs = useLocalConfigStore().tempStorage
	const localPrefs = useLocalConfigStore().prefsStorage
	const syncPrefs = useSyncConfigStore().prefsStorage

	const getValue = (k) => {
	if (LOCAL_ONLY_KEYS.has(k)) {
	return tempPrefs[k] ?? localPrefs[k] ?? syncPrefs.simple[k]
	} else {
	return tempPrefs[k] ?? syncPrefs.simple[k]
	}
	}
	const getDefault = (k) => instancePrefs[k] ?? ROOT_CONFIG[k]

	const result = Object.fromEntries(
	Object.keys(ROOT_CONFIG).map((k) => [k, getValue(k) ?? getDefault(k)]),
	)
	return result
	},
	mergedConfigDefault: () => {
	const instancePrefs = useInstanceStore().prefsStorage

	const getDefault = (k) => instancePrefs[k] ?? ROOT_CONFIG[k]

	const result = Object.fromEntries(
	Object.keys(ROOT_CONFIG).map((k) => [k, getDefault(k)]),
	)
	return result
	},
	mergedConfigWithoutDefaults: () => {
	const tempPrefs = useLocalConfigStore().tempStorage
	const localPrefs = useLocalConfigStore().prefsStorage
	const syncPrefs = useSyncConfigStore().prefsStorage

	const getValue = (k) =>
	tempPrefs[k] ?? localPrefs[k] ?? syncPrefs.simple[k]

	const result = Object.fromEntries(
	Object.keys(ROOT_CONFIG).map((k) => [k, getValue(k)]),
	)
	return result
	},
	},
	})
	diff --git a/src/stores/sync_config.js b/src/stores/sync_config.js
	index 3a73a0fdab..52cb6cc3ec 100644
	--- a/src/stores/sync_config.js
	+++ b/src/stores/sync_config.js
	@@ -1,861 +1,861 @@
	import sum from 'hash-sum'
	import {
	merge as _merge,
	clamp,
	cloneDeep,
	findLastIndex,
	get,
	groupBy,
	isEqual,
	last,
	set,
	take,
	uniqWith,
	unset,
	} from 'lodash-es'
	import { defineStore } from 'pinia'
	import { v4 as uuidv4 } from 'uuid'
	import { toRaw } from 'vue'

	import { CURRENT_UPDATE_COUNTER } from 'src/components/update_notification/update_notification.js'

	-import { useLocalConfigStore } from 'src/stores/local_config.js'
	-import { useOAuthStore } from 'src/stores/oauth.js'
	-import { useUsersStore } from 'src/stores/users.js'
	-
	-import { updateProfileJSON } from 'src/api/user.js'
	-import { storage } from 'src/lib/storage.js'
	import {
	makeUndefined,
	ROOT_CONFIG,
	ROOT_CONFIG_DEFINITIONS,
	validateSetting,
	} from 'src/stores/default_state/default_config_state.js'
	import { oldDefaultConfigSync } from 'src/stores/default_state/old_default_config_state.js'
	+import { useLocalConfigStore } from 'src/stores/local_config.js'
	+import { useOAuthStore } from 'src/stores/oauth.js'
	+import { useUsersStore } from 'src/stores/users.js'
	+
	+import { updateProfileJSON } from 'src/api/user.js'
	+import { storage } from 'src/lib/storage.js'

	export const VERSION = 2
	export const NEW_USER_DATE = new Date('2026-03-16') // date of writing this, basically

	export const COMMAND_TRIM_FLAGS = 1000
	export const COMMAND_TRIM_FLAGS_AND_RESET = 1001
	export const COMMAND_WIPE_JOURNAL = 1010
	export const COMMAND_WIPE_JOURNAL_AND_STORAGE = 1011

	export const defaultState = {
	// do we need to update data on server?
	dirty: false,
	// storage of flags - stuff that can only be set and incremented
	flagStorage: {
	updateCounter: 0, // Counter for most recent update notification seen
	reset: 0, // special flag that can be used to force-reset all data, debug purposes only
	// special reset codes:
	// 1000: trim keys to those known by currently running FE
	// 1001: same as above + reset everything to 0
	},
	prefsStorage: {
	_journal: [],
	simple: {
	muteFilters: {},

	...makeUndefined({ ...ROOT_CONFIG }),
	},
	collections: {
	pinnedStatusActions: ['reply', 'retweet', 'favorite', 'emoji'],
	pinnedNavItems: ['home', 'dms', 'chats'],
	},
	},
	// raw data
	raw: null,
	// local cache
	cache: null,
	}

	export const newUserFlags = {
	...defaultState.flagStorage,
	updateCounter: CURRENT_UPDATE_COUNTER, // new users don't need to see update notification
	}

	export const _moveItemInArray = (array, value, movement) => {
	const oldIndex = array.indexOf(value)
	const newIndex = oldIndex + movement
	const newArray = [...array]
	// remove old
	newArray.splice(oldIndex, 1)
	// add new
	newArray.splice(clamp(newIndex, 0, newArray.length + 1), 0, value)
	return newArray
	}

	const _wrapData = (data, userName) => {
	return {
	...data,
	_user: userName,
	_timestamp: Date.now(),
	_version: VERSION,
	}
	}

	const _checkValidity = (data) => data._timestamp > 0 && data._version > 0

	const _verifyPrefs = (state) => {
	state.prefsStorage = state.prefsStorage \|\| {
	simple: {},
	collections: {},
	}

	// Simple
	Object.entries(defaultState.prefsStorage.simple).forEach(([k, v]) => {
	if (v === undefined) return
	if (typeof v === 'number' \|\| typeof v === 'boolean') return
	if (typeof v === 'object') return
	console.warn(
	`Preference simple.${k} as invalid type ${typeof v}, reinitializing`,
	)
	set(state.prefsStorage.simple, k, defaultState.prefsStorage.simple[k])
	})

	// Collections
	Object.entries(defaultState.prefsStorage.collections).forEach(([k, v]) => {
	if (Array.isArray(v)) return
	console.warn(
	`Preference collections.${k} as invalid type ${typeof v}, reinitializing`,
	)
	set(
	state.prefsStorage.collections,
	k,
	defaultState.prefsStorage.collections[k],
	)
	})
	}

	export const _getRecentData = (cache, live, isTest) => {
	const result = { recent: null, stale: null, needUpload: false }
	const cacheValid = _checkValidity(cache \|\| {})
	const liveValid = _checkValidity(live \|\| {})
	if (!liveValid && cacheValid) {
	result.needUpload = true
	console.debug(
	'Nothing valid stored on server, assuming cache to be source of truth',
	)
	result.recent = cache
	result.stale = live
	} else if (!cacheValid && liveValid) {
	console.debug(
	'Valid storage on server found, no local cache found, using live as source of truth',
	)
	result.recent = live
	result.stale = cache
	} else if (cacheValid && liveValid) {
	console.debug('Both sources have valid data, figuring things out...')
	if (
	live._timestamp === cache._timestamp &&
	live._version === cache._version
	) {
	console.debug(
	'Same version/timestamp on both sources, source of truth irrelevant',
	)
	result.recent = cache
	result.stale = live
	} else {
	console.debug(
	'Different timestamp or version, figuring out which one is more recent',
	)
	if (live._timestamp < cache._timestamp) {
	result.recent = cache
	result.stale = live
	} else {
	result.recent = live
	result.stale = cache
	}
	}
	} else {
	console.debug('Both sources are invalid, start from scratch')
	result.needUpload = true
	}

	const merge = (a, b) => {
	return {
	_user: a._user ?? b._user,
	_version: a._version ?? b._version,
	_timestamp: a._timestamp ?? b._timestamp,
	needUpload: b.needUpload ?? a.needUpload,
	prefsStorage: _merge(cloneDeep(a.prefsStorage), b.prefsStorage),
	flagStorage: _merge(a.flagStorage, b.flagStorage),
	}
	}

	result.recent = isTest
	? result.recent
	: result.recent && merge(defaultState, result.recent)

	result.stale = isTest
	? result.stale
	: result.stale && merge(defaultState, result.stale)

	return result
	}

	export const _getAllFlags = (recent, stale) => {
	const recentStorage = toRaw(recent?.flagStorage)
	const staleStorage = toRaw(stale?.flagStorage)

	return Array.from(
	new Set([
	...Object.keys(recentStorage \|\| {}),
	...Object.keys(staleStorage \|\| {}),
	]),
	)
	}

	export const _mergeFlags = (recent, stale, allFlagKeys) => {
	if (!stale.flagStorage) return recent.flagStorage
	if (!recent.flagStorage) return stale.flagStorage
	return Object.fromEntries(
	allFlagKeys.map((flag) => {
	const recentFlag = recent.flagStorage[flag]
	const staleFlag = stale.flagStorage[flag]
	// use flag that is of higher value
	return [
	flag,
	Number((recentFlag > staleFlag ? recentFlag : staleFlag) \|\| 0),
	]
	}),
	)
	}

	export const _mergeJournal = (...journals) => {
	// Ignore invalid journal entries
	const allJournals = journals
	.map((j) => (Array.isArray(j) ? j : []))
	.flat()
	.filter(
	(entry) =>
	Object.hasOwn(entry, 'path') &&
	Object.hasOwn(entry, 'operation') &&
	Object.hasOwn(entry, 'args') &&
	Object.hasOwn(entry, 'timestamp'),
	)
	const grouped = groupBy(allJournals, 'path')
	const trimmedGrouped = Object.entries(grouped).map(([path, rawJournal]) => {
	const journal = rawJournal
	.map((data, index) => ({ data, index }))
	.toSorted(({ data: a, index: ai }, { data: b, index: bi }) => {
	if (a.timestamp === b.timestamp) {
	return ai - bi
	} else {
	return a.timestamp > b.timestamp ? 1 : -1
	}
	})
	.map((x) => x.data)

	if (path.startsWith('collections')) {
	const lastRemoveIndex = findLastIndex(
	journal,
	({ operation }) => operation === 'removeFromCollection',
	)
	// everything before last remove is unimportant
	let remainder
	if (lastRemoveIndex > 0) {
	remainder = journal.slice(lastRemoveIndex)
	} else {
	// everything else doesn't need trimming
	remainder = journal
	}
	return uniqWith(remainder, (a, b) => {
	if (a.path !== b.path) {
	return false
	}
	if (a.operation !== b.operation) {
	return false
	}
	if (a.operation === 'addToCollection') {
	return a.args[0] === b.args[0]
	}
	return false
	})
	} else if (path.startsWith('simple')) {
	// Only the last record is important
	return [last(journal)]
	} else {
	return journal
	}
	})

	const flat = trimmedGrouped
	.flat()
	.map((data, index) => ({ data, index }))
	.toSorted(({ data: a, index: ai }, { data: b, index: bi }) => {
	if (a.timestamp === b.timestamp) {
	return ai - bi
	} else {
	return a.timestamp > b.timestamp ? 1 : -1
	}
	})
	.map((x) => x.data)
	return take(flat, 500)
	}

	export const _mergePrefs = (recent, stale) => {
	if (!stale) return recent
	if (!recent) return stale
	const { _journal: recentJournal, ...recentData } = recent
	const { _journal: staleJournal } = stale
	/** Journal entry format:
	* path: path to entry in prefsStorage
	* timestamp: timestamp of the change
	* operation: operation type
	* arguments: array of arguments, depends on operation type
	*
	* currently only supported operation type is "set" which just sets the value
	* to requested one. Intended only to be used with simple preferences (boolean, number)
	* shouldn't be used with collections!
	*/
	const resultOutput = { ...recentData }
	const totalJournal = _mergeJournal(staleJournal, recentJournal)
	totalJournal
	.filter(({ path, operation, args }) => {
	const entry = path.split('.')[1]
	if (operation === 'unset') return ROOT_CONFIG[entry] !== undefined

	if (operation !== 'set') return true

	const definition = path.startsWith('simple.muteFilters')
	? { default: {} }
	: ROOT_CONFIG_DEFINITIONS[entry]

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

	return finalValue !== undefined
	})
	.forEach(({ path, operation, args }) => {
	if (path.startsWith('_')) {
	throw new Error(
	`journal contains entry to edit internal (starts with _) field '${path}', something is incorrect here, ignoring.`,
	)
	}
	switch (operation) {
	case 'set': {
	if (path.startsWith('collections')) {
	return console.error('Illegal operation "set" on a collection')
	}
	if (path.split(/\./g).length <= 1) {
	return console.error(
	`Calling set on depth <= 1 (path: ${path}) is not allowed`,
	)
	}
	set(resultOutput, path, args[0])
	break
	}
	case 'unset':
	if (path.startsWith('collections')) {
	return console.error('Illegal operation "unset" on a collection')
	}
	if (path.split(/\./g).length <= 2) {
	return console.error(
	`Calling unset on depth <= 2 (path: ${path}) is not allowed`,
	)
	}
	unset(resultOutput, path)
	break
	case 'addToCollection':
	if (!path.startsWith('collections')) {
	return console.error(
	'Illegal operation "addToCollection" on a non-collection',
	)
	}
	set(
	resultOutput,
	path,
	Array.from(new Set(get(resultOutput, path)).add(args[0])),
	)
	break
	case 'removeFromCollection': {
	if (!path.startsWith('collections')) {
	return console.error(
	'Illegal operation "removeFromCollection" on a non-collection',
	)
	}
	const newSet = new Set(get(resultOutput, path))
	newSet.delete(args[0])
	set(resultOutput, path, Array.from(newSet))
	break
	}
	case 'reorderCollection': {
	const [value, movement] = args
	set(
	resultOutput,
	path,
	_moveItemInArray(get(resultOutput, path), value, movement),
	)
	break
	}
	default:
	return console.error(
	`Unknown journal operation: '${operation}', did we forget to run reverse migrations beforehand?`,
	)
	}
	})
	return { ...resultOutput, _journal: totalJournal }
	}

	export const _resetFlags = (
	totalFlags,
	knownKeys = defaultState.flagStorage,
	) => {
	let result = { ...totalFlags }
	const allFlagKeys = Object.keys(totalFlags)
	// flag reset functionality
	if (
	totalFlags.reset >= COMMAND_TRIM_FLAGS &&
	totalFlags.reset <= COMMAND_TRIM_FLAGS_AND_RESET
	) {
	console.debug('Received command to trim the flags')
	const knownKeysSet = new Set(Object.keys(knownKeys))

	// Trim
	result = {}
	allFlagKeys.forEach((flag) => {
	if (knownKeysSet.has(flag)) {
	result[flag] = totalFlags[flag]
	}
	})

	// Reset
	if (totalFlags.reset === COMMAND_TRIM_FLAGS_AND_RESET) {
	// 1001 - and reset everything to 0
	console.debug('Received command to reset the flags')
	Object.keys(knownKeys).forEach((flag) => {
	result[flag] = 0
	})
	}
	}
	result.reset = 0
	return result
	}

	const _resetPrefs = (
	totalPrefs,
	totalFlags,
	knownKeys = defaultState.flagStorage,
	) => {
	// prefs reset functionality
	if (
	totalFlags.reset >= COMMAND_WIPE_JOURNAL &&
	totalFlags.reset <= COMMAND_WIPE_JOURNAL_AND_STORAGE
	) {
	console.debug('Received command to reset journals')
	this.flagStorage.reset = COMMAND_WIPE_JOURNAL
	this.prefsStorage._journal = []
	this.cache.prefsStorage._journal = []
	this.raw.prefsStorage._journal = []
	this.pushSyncConfig()
	if (totalFlags.reset === COMMAND_WIPE_JOURNAL_AND_STORAGE) {
	console.debug('Received command to reset storage')
	return cloneDeep(defaultState)
	}
	}
	return totalPrefs
	}

	const _doMigrations = async (data, setPreference) => {
	if (data._version < VERSION) {
	console.debug(
	'Data has older version, seeing if there any migrations that can be applied',
	)
	}

	if (data._version > VERSION) {
	console.debug(
	'Data has newer version, seeing if there any reverse migrations that can be applied',
	)

	// no reverse migrations right now but we leave a possibility of loading a hotpatch if need be
	if (window._PLEROMA_HOTPATCH) {
	if (window._PLEROMA_HOTPATCH.reverseMigrations) {
	console.debug('Found hotpatch migration, applying')
	return window._PLEROMA_HOTPATCH.reverseMigrations.call(
	{},
	'syncConfigStore',
	{ from: data._version, to: VERSION },
	data,
	)
	}
	}
	}

	return data
	}

	export const useSyncConfigStore = defineStore('sync_config', {
	state() {
	return cloneDeep(defaultState)
	},
	actions: {
	setFlag({ flag, value }) {
	this.flagStorage[flag] = value
	this.dirty = true
	},
	setSimplePrefAndSave({ path, value }) {
	this.setPreference({ path: `simple.${path}`, value })
	this.pushSyncConfig()
	},
	unsetSimplePrefAndSave({ path }) {
	this.unsetPreference({ path: `simple.${path}` })
	this.pushSyncConfig()
	},
	setPreference({ path, value }) {
	if (path.startsWith('_')) {
	throw new Error(
	`Tried to edit internal (starts with _) field '${path}', ignoring.`,
	)
	}
	if (path.startsWith('collections')) {
	throw new Error(
	`Invalid operation 'set' for collection field '${path}', ignoring.`,
	)
	}
	if (path.split(/\./g).length <= 1) {
	throw new Error(
	`Calling set on depth <= 1 (path: ${path}) is not allowed`,
	)
	}
	if (path.split(/\./g).length > 3) {
	throw new Error(
	`Calling set on depth > 3 (path: ${path}) is not allowed`,
	)
	}

	if (path.startsWith('collections.')) return value

	const definition = path.startsWith('simple.muteFilters')
	? { default: {} }
	: ROOT_CONFIG_DEFINITIONS[path.split('.')[1]]

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

	if (finalValue !== undefined) set(this.prefsStorage, path, finalValue)

	this.prefsStorage._journal = [
	...this.prefsStorage._journal,
	{ operation: 'set', path, args: [value], timestamp: Date.now() },
	]
	this.dirty = true
	},
	unsetPreference({ path, value }) {
	if (path.startsWith('_')) {
	throw new Error(
	`Tried to edit internal (starts with _) field '${path}', ignoring.`,
	)
	}
	if (path.startsWith('collections')) {
	throw new Error(
	`Invalid operation 'unset' for collection field '${path}', ignoring.`,
	)
	}
	if (path.split(/\./g).length <= 2) {
	throw new Error(
	`Calling unset on depth <= 2 (path: ${path}) is not allowed`,
	)
	}
	if (path.split(/\./g).length > 3) {
	throw new Error(
	`Calling unset on depth > 3 (path: ${path}) is not allowed`,
	)
	}
	unset(this.prefsStorage, path)
	this.prefsStorage._journal = [
	...this.prefsStorage._journal,
	{ operation: 'unset', path, args: [], timestamp: Date.now() },
	]
	this.dirty = true
	},
	addCollectionPreference({ path, value }) {
	if (path.startsWith('_')) {
	throw new Error(
	`tried to edit internal (starts with _) field '${path}'`,
	)
	}
	if (path.startsWith('collections')) {
	const collection = new Set(get(this.prefsStorage, path))
	collection.add(value)
	set(this.prefsStorage, path, [...collection])
	}
	this.prefsStorage._journal = [
	...this.prefsStorage._journal,
	{
	operation: 'addToCollection',
	path,
	args: [value],
	timestamp: Date.now(),
	},
	]
	this.dirty = true
	},
	removeCollectionPreference({ path, value }) {
	if (path.startsWith('_')) {
	throw new Error(
	`tried to edit internal (starts with _) field '${path}', ignoring.`,
	)
	}

	const { _key } = value
	if (path.startsWith('collection')) {
	const collection = new Set(get(this.prefsStorage, path))
	collection.delete(value)
	set(this.prefsStorage, path, [...collection])

	this.prefsStorage._journal = [
	...this.prefsStorage._journal,
	{
	operation: 'removeFromCollection',
	path,
	args: [value],
	timestamp: Date.now(),
	},
	]
	this.dirty = true
	}
	},
	reorderCollectionPreference({ path, value, movement }) {
	if (path.startsWith('_')) {
	throw new Error(
	`tried to edit internal (starts with _) field '${path}', ignoring.`,
	)
	}
	const collection = get(this.prefsStorage, path)
	const newCollection = _moveItemInArray(collection, value, movement)
	set(this.prefsStorage, path, newCollection)
	this.prefsStorage._journal = [
	...this.prefsStorage._journal,
	{
	operation: 'arrangeCollection',
	path,
	args: [value],
	timestamp: Date.now(),
	},
	]
	this.dirty = true
	},
	updateCache({ username }) {
	this.prefsStorage._journal = _mergeJournal(this.prefsStorage._journal)
	this.cache = _wrapData(
	{
	flagStorage: toRaw(this.flagStorage),
	prefsStorage: toRaw(this.prefsStorage),
	},
	username,
	)
	},
	clearSyncConfig() {
	const blankState = { ...cloneDeep(defaultState) }
	Object.keys(this).forEach((k) => {
	this[k] = blankState[k]
	})
	this.flagStorage.reset = COMMAND_WIPE_JOURNAL_AND_STORAGE
	},
	async initSyncConfig(userData) {
	const live = userData.storage
	this.raw = live
	let cache = this.cache
	if (cache?._user !== userData.fqn) {
	console.warn(
	'Cache belongs to another user! reinitializing local cache!',
	)
	cache = null
	}

	let { recent, stale, needUpload } = _getRecentData(cache, live)

	const userNew = userData.created_at > NEW_USER_DATE
	const flagsTemplate = userNew ? newUserFlags : defaultState.flagStorage
	let dirty = false

	if (recent === null) {
	console.debug(
	`Data is empty, initializing for ${userNew ? 'new' : 'existing'} user`,
	)
	recent = _wrapData({
	flagStorage: { ...flagsTemplate },
	prefsStorage: cloneDeep(defaultState.prefsStorage),
	})
	}

	recent = recent && (await _doMigrations(recent, this.setPreference))
	stale = stale && (await _doMigrations(stale, this.setPreference))

	if (!needUpload && recent && stale) {
	console.debug('Checking if data needs merging...')
	// discarding timestamps and versions
	const { _timestamp: _0, _version: _1, ...recentData } = recent
	const { _timestamp: _2, _version: _3, ...staleData } = stale
	dirty = sum(recentData) !== sum(staleData)
	console.debug(`Data ${dirty ? 'needs' : "doesn't need"} merging`)
	}

	const allFlagKeys = _getAllFlags(recent, stale)
	let totalFlags
	let totalPrefs
	if (dirty) {
	// Merge the flags
	console.debug('Merging the data...')
	totalFlags = _mergeFlags(recent, stale, allFlagKeys)
	_verifyPrefs(recent)
	_verifyPrefs(stale)
	totalPrefs = _mergePrefs(recent.prefsStorage, stale.prefsStorage)
	} else {
	totalFlags = recent.flagStorage
	totalPrefs = recent.prefsStorage
	}

	totalPrefs = _resetPrefs(totalPrefs, totalFlags)
	totalFlags = _resetFlags(totalFlags)

	recent.flagStorage = { ...flagsTemplate, ...totalFlags }
	recent.prefsStorage = { ...defaultState.prefsStorage, ...totalPrefs }

	this.cache = recent
	this.flagStorage = this.cache.flagStorage
	this.prefsStorage = this.cache.prefsStorage
	if (!Array.isArray(this.prefsStorage._journal)) {
	this.prefsStorage._journal = []
	}

	// Various migrations
	console.debug('Migrating from old config')
	const vuexState = (await storage.getItem('vuex-lz')) ?? {}
	const config = vuexState.config ?? {}

	const migratedEntries = new Set(config._syncMigration ?? [])
	console.debug(
	`Already migrated Values: ${[...migratedEntries].join() \|\| '[none]'}`,
	)

	Object.entries(oldDefaultConfigSync).forEach(([key, value]) => {
	const oldValue = config[key]
	const defaultValue = value
	const migrated = migratedEntries.has(key)
	const preferencePath =
	key === 'theme3hacks' ? 'simple.underlay' : `simple.${key}`

	const present = oldValue !== undefined
	const different = !isEqual(oldValue, defaultValue)
	const preferenceHandled =
	get(this.prefsStorage, preferencePath) !== undefined \|\|
	this.prefsStorage._journal.some(
	(entry) =>
	entry?.path === preferencePath \|\|
	entry?.path?.startsWith?.(`${preferencePath}.`),
	)

	if (present && different && !preferenceHandled) {
	console.debug(`Migrating config ${key}: ${oldValue}`)
	if (key === 'theme3hacks') {
	if (!migrated) {
	useLocalConfigStore().set({
	path: 'fontInterface',
	value: oldValue.fonts.interface,
	})
	useLocalConfigStore().set({
	path: 'fontInput',
	value: oldValue.fonts.input,
	})
	useLocalConfigStore().set({
	path: 'fontPosts',
	value: oldValue.fonts.post,
	})
	useLocalConfigStore().set({
	path: 'fontMonospace',
	value: oldValue.fonts.monospace,
	})
	}
	this.setPreference({
	path: 'simple.underlay',
	value: oldValue.underlay,
	})
	} else if (key == 'muteWords') {
	oldValue.forEach((word, order) => {
	const uniqueId = uuidv4()

	this.setPreference({
	path: 'simple.muteFilters.' + uniqueId,
	value: {
	type: 'word',
	value: word,
	name: word,
	enabled: true,
	expires: null,
	hide: false,
	order,
	},
	})
	})
	} else {
	this.setPreference({ path: preferencePath, value: oldValue })
	}
	migratedEntries.add(key)
	needUpload = true
	}
	})

	config._syncMigration = [...migratedEntries]
	vuexState.config = config
	storage.setItem('vuex-lz', vuexState)

	this.dirty = dirty \|\| needUpload
	// set local timestamp to smaller one if we don't have any changes
	if (stale && recent && !this.dirty) {
	this.cache._timestamp = Math.min(stale._timestamp, recent._timestamp)
	}
	this.pushSyncConfig()
	},
	pushSyncConfig({ force = false } = {}) {
	const needPush = this.dirty \|\| force
	if (!needPush) return
	if (!useUsersStore().currentUser) return
	this.updateCache({ username: useUsersStore().currentUser.fqn })
	const params = { pleroma_settings_store: { 'pleroma-fe': this.cache } }
	updateProfileJSON({
	params,
	credentials: useOAuthStore().token,
	})
	},
	},
	persist: {
	afterLoad(state) {
	console.debug('Validating persisted state of SyncConfig')
	const newState = { ...state }
	newState.prefsStorage = newState.prefsStorage \|\| {}
	const newEntries = Object.entries(ROOT_CONFIG).map(([path, value]) => {
	const definition = ROOT_CONFIG_DEFINITIONS[path]
	const finalValue = validateSetting({
	path,
	value: newState.prefsStorage.simple?.[path],
	definition,
	throwError: false,
	validateObjects: false,
	defaultState: ROOT_CONFIG,
	})

	return finalValue === undefined
	? [path, definition.default]
	: [path, finalValue]
	})
	newState.prefsStorage.simple = Object.fromEntries(
	newEntries.filter(Boolean),
	)
	return newState
	},
	},
	})
	diff --git a/src/sw.js b/src/sw.js
	index 48b575e4fc..1d7f6ea5c0 100644
	--- a/src/sw.js
	+++ b/src/sw.js
	@@ -1,303 +1,304 @@
	// biome-ignore: side effect import of assets list
	import 'virtual:pleroma-fe/service_worker_env'

	import { createI18n } from 'vue-i18n'

	-import { storage } from 'src/lib/storage.js'
	import { INSTANCE_DEFAULT_CONFIG } from 'src/stores/default_state/default_config_state.js'
	+
	+import { storage } from 'src/lib/storage.js'
	import { parseNotification } from 'src/services/entity_normalizer/entity_normalizer.service.js'
	import { prepareNotificationObject } from 'src/services/notification_utils/notification_utils_sw.js'
	import { cacheKey, emojiCacheKey, shouldCache } from 'src/services/sw/sw.js'

	// Collects all messages for service workers
	// Needed because service workers cannot use dynamic imports
	// See /build/sw_plugin.js for more information
	import messages from 'virtual:pleroma-fe/service_worker_messages'

	const i18n = createI18n({
	// By default, use the browser locale, we will update it if neccessary
	locale: 'en',
	fallbackLocale: 'en',
	messages,
	})

	const state = {
	lastFocused: null,
	notificationIds: new Set(),
	allowedNotificationTypes: null,
	}

	function getWindowClients() {
	return clients
	.matchAll({ includeUncontrolled: true })
	.then((clientList) => clientList.filter(({ type }) => type === 'window'))
	}

	const setSettings = async () => {
	const piniaState = await storage.getItem('pinia-local-sync_config')
	const locale = piniaState.prefsStorage.simple.interfaceLanguage \|\| 'en'
	i18n.locale = locale
	const notificationsNativeArray = Object.entries(
	piniaState.prefsStorage.simple.notificationNative \|\|
	INSTANCE_DEFAULT_CONFIG.notificationNative,
	)
	state.webPushAlwaysShowNotifications =
	piniaState.prefsStorage.simple.webPushAlwaysShowNotifications

	state.allowedNotificationTypes = new Set(
	notificationsNativeArray
	.filter(([, v]) => v)
	.map(([k]) => {
	switch (k) {
	case 'mentions':
	return 'mention'
	case 'statuses':
	return 'status'
	case 'likes':
	return 'like'
	case 'repeats':
	return 'repeat'
	case 'emojiReactions':
	return 'pleroma:emoji_reaction'
	case 'reports':
	return 'pleroma:report'
	case 'followRequest':
	return 'follow_request'
	case 'follows':
	return 'follow'
	case 'polls':
	return 'poll'
	default:
	return k
	}
	}),
	)
	}

	const showPushNotification = async (event) => {
	const activeClients = await getWindowClients()
	await setSettings()
	// Only show push notifications if all tabs/windows are closed
	if (state.webPushAlwaysShowNotifications \|\| activeClients.length === 0) {
	const data = event.data.json()

	const url = `${self.registration.scope}api/v1/notifications/${data.notification_id}`
	const notification = await fetch(url, {
	headers: { Authorization: 'Bearer ' + data.access_token },
	})
	const notificationJson = await notification.json()
	const parsedNotification = parseNotification(notificationJson)

	const res = prepareNotificationObject(parsedNotification, i18n)

	if (
	state.webPushAlwaysShowNotifications \|\|
	state.allowedNotificationTypes.has(parsedNotification.type)
	) {
	return self.registration.showNotification(res.title, res)
	}
	}
	return Promise.resolve()
	}

	const cacheFiles = self.serviceWorkerOption.assets
	const isEmoji = (req) => {
	if (req.method !== 'GET') {
	return false
	}
	const url = new URL(req.url)

	return url.pathname.startsWith('/emoji/')
	}
	const isNotMedia = (req) => {
	if (req.method !== 'GET') {
	return false
	}
	const url = new URL(req.url)
	return (
	!url.pathname.startsWith('/media/') && !url.pathname.startsWith('/proxy/')
	)
	}
	const isAsset = (req) => {
	const url = new URL(req.url)
	return cacheFiles.includes(url.pathname)
	}

	const isSuccessful = (resp) => {
	if (!resp.ok) {
	return false
	}
	if (new URL(resp.url).pathname === '/index.html') {
	// For index.html itself, there is no fallback possible.
	return true
	}
	const type = resp.headers.get('Content-Type')
	// Backend will revert to index.html if the file does not exist, so text/html for emojis and assets is a failure
	return type && !type.includes('text/html')
	}

	self.addEventListener('install', async (event) => {
	if (shouldCache) {
	event.waitUntil(
	(async () => {
	// Do not preload i18n and emoji annotations to speed up loading
	const shouldPreload = (route) => {
	return (
	!route.startsWith('/static/js/i18n/') &&
	!route.startsWith('/static/js/emoji-annotations/')
	)
	}
	const cache = await caches.open(cacheKey)
	await Promise.allSettled(
	cacheFiles.filter(shouldPreload).map(async (route) => {
	// https://developer.mozilla.org/en-US/docs/Web/API/Cache/add
	// originally we used addAll() but it will raise a problem in one edge case:
	// when the file for the route is not found, backend will return index.html with code 200
	// but it's wrong, and it's cached, so we end up with a bad cache.
	// this can happen when you refresh when you are in the process of upgrading
	// the frontend.
	const resp = await fetch(route)
	if (isSuccessful(resp)) {
	await cache.put(route, resp)
	}
	}),
	)
	})(),
	)
	}
	})

	self.addEventListener('activate', async (event) => {
	if (shouldCache) {
	event.waitUntil(
	(async () => {
	const cache = await caches.open(cacheKey)
	const keys = await cache.keys()
	await Promise.all(
	keys
	.filter((request) => {
	const url = new URL(request.url)
	const shouldKeep = cacheFiles.includes(url.pathname)
	return !shouldKeep
	})
	.map((k) => cache.delete(k)),
	)
	})(),
	)
	}
	})

	self.addEventListener('push', async (event) => {
	if (event.data) {
	// Supposedly, we HAVE to return a promise inside waitUntil otherwise it will
	// show (extra) notification that website is updated in background
	event.waitUntil(showPushNotification(event))
	}
	})

	self.addEventListener('message', async (event) => {
	await setSettings()
	const { type, content } = event.data
	if (self.location.origin !== event.origin) {
	console.error('SW Message with strange origin received', event)
	return
	}

	if (type === 'desktopNotification') {
	const { title, ...rest } = content
	const { tag, type } = rest
	if (state.notificationIds.has(tag)) return
	state.notificationIds.add(tag)
	setTimeout(() => state.notificationIds.delete(tag), 10000)
	if (state.allowedNotificationTypes.has(type)) {
	self.registration.showNotification(title, rest)
	}
	}

	if (type === 'desktopNotificationClose') {
	const { id, all } = content
	const search = all ? null : { tag: id }
	const notifications = await self.registration.getNotifications(search)
	notifications.forEach((n) => n.close())
	}

	if (type === 'updateFocus') {
	state.lastFocused = event.source.id

	const notifications = await self.registration.getNotifications()
	notifications.forEach((n) => n.close())
	}
	})

	self.addEventListener('notificationclick', (event) => {
	event.notification.close()

	event.waitUntil(
	getWindowClients().then((list) => {
	for (let i = 0; i < list.length; i++) {
	const client = list[i]
	client.postMessage({
	type: 'notificationClicked',
	id: event.notification.tag,
	})
	}

	for (let i = 0; i < list.length; i++) {
	const client = list[i]
	if (state.lastFocused === null \|\| client.id === state.lastFocused) {
	if ('focus' in client) return client.focus()
	}
	}

	if (clients.openWindow) return clients.openWindow('/')
	}),
	)
	})

	self.addEventListener('fetch', (event) => {
	// Do not mess up with remote things
	const isSameOrigin =
	new URL(event.request.url).origin === self.location.origin
	if (
	shouldCache &&
	event.request.method === 'GET' &&
	isSameOrigin &&
	isNotMedia(event.request)
	) {
	// this is a bit spammy
	// console.debug('[Service worker] fetch:', event.request.url)
	event.respondWith(
	(async () => {
	const r = await caches.match(event.request)
	const isEmojiReq = isEmoji(event.request)

	if (r && isSuccessful(r)) {
	console.debug('[Service worker] already cached:', event.request.url)
	return r
	}

	try {
	const response = await fetch(event.request)
	if (
	response.ok &&
	isSuccessful(response) &&
	(isEmojiReq \|\| isAsset(event.request))
	) {
	console.debug(
	`[Service worker] caching ${isEmojiReq ? 'emoji' : 'asset'}:`,
	event.request.url,
	)
	const cache = await caches.open(
	isEmojiReq ? emojiCacheKey : cacheKey,
	)
	await cache.put(event.request.clone(), response.clone())
	}
	return response
	} catch (e) {
	console.error('[Service worker] error when caching emoji:', e)
	throw e
	}
	})(),
	)
	}
	})

File Metadata

Mime Type: text/x-diff
Expires: Sat, Oct 31, 7:03 PM (19 h, 5 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1801696
Default Alt Text: (107 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions