No OneTemporary
Actions

Size

69 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/modules/default_config_state.js b/src/modules/default_config_state.js
	index 4cbef77f63..fd75701cfd 100644
	--- a/src/modules/default_config_state.js
	+++ b/src/modules/default_config_state.js
	@@ -1,757 +1,780 @@
	import { get, set } from 'lodash'

	const browserLocale = (navigator.language \|\| 'en').split('-')[0]

	export const convertDefinitions = (definitions) =>
	Object.fromEntries(
	Object.entries(definitions).map(([k, v]) => {
	const defaultValue = v.default ?? null
	return [k, defaultValue]
	}),
	)

	/// Instance config entries provided by static config or pleroma api
	/// Put settings here only if it does not make sense for a normal user
	/// to override it.
	export const INSTANCE_IDENTITY_DEFAULT_DEFINITIONS = {
	style: {
	description: 'Instance default style name',
	type: 'string',
	required: false,
	},
	palette: {
	description: 'Instance default palette name',
	type: 'string',
	required: false,
	},
	theme: {
	description: 'Instance default theme name',
	type: 'string',
	required: false,
	},
	defaultAvatar: {
	description: "Default avatar image to use when user doesn't have one set",
	type: 'string',
	default: '/images/avi.png',
	},
	defaultBanner: {
	description: "Default banner image to use when user doesn't have one set",
	type: 'string',
	default: '/images/banner.png',
	},
	background: {
	description: 'Instance background/wallpaper',
	type: 'string',
	default: '/static/aurora_borealis.jpg',
	},
	embeddedToS: {
	description: 'Whether to show Terms of Service title bar',
	type: 'boolean',
	default: true,
	},
	logo: {
	description: 'Instance logo',
	type: 'string',
	default: '/static/logo.svg',
	},
	logoMargin: {
	description: 'Margin for logo (spacing above/below)',
	type: 'string',
	default: '.2em',
	},
	logoMask: {
	description:
	'Use logo as a mask (works well for monochrome/transparent logos)',
	type: 'boolean',
	default: true,
	},
	logoLeft: {
	description: 'Show logo on the left side of navbar',
	type: 'boolean',
	default: false,
	},
	redirectRootLogin: {
	description: 'Where to redirect user after login',
	type: 'string',
	default: '/main/friends',
	},
	redirectRootNoLogin: {
	description: 'Where to redirect anonymous visitors',
	type: 'string',
	default: '/main/all',
	},
	hideSitename: {
	description: 'Hide the instance name in navbar',
	type: 'boolean',
	default: false,
	},
	nsfwCensorImage: {
	description: 'Default NSFW censor image',
	type: 'string',
	required: false,
	},
	showFeaturesPanel: {
	description: 'Show features panel to anonymous visitors',
	type: 'boolean',
	default: true,
	},
	showInstanceSpecificPanel: {
	description: 'Show instance-specific panel',
	type: 'boolean',
	default: false,
	},

	// Html stuff
	instanceSpecificPanelContent: {
	description: 'HTML of Instance-specific panel',
	type: 'string',
	required: false,
	},
	tos: {
	description: 'HTML of Terms of Service panel',
	type: 'string',
	required: false,
	},
	}
	export const INSTANCE_IDENTITY_DEFAULT = convertDefinitions(
	INSTANCE_IDENTITY_DEFAULT_DEFINITIONS,
	)

	/// This object contains setting entries that makes sense
	/// at the user level. The defaults can also be overriden by
	/// instance admins in the frontend_configuration endpoint or static config.
	export const INSTANCE_DEFAULT_CONFIG_DEFINITIONS = {
	expertLevel: {
	description:
	'Used to track which settings to show and hide in settings modal',
	type: 'number', // not a boolean so we could potentially make multiple levels of expert-ness
	default: 0,
	},
	hideISP: {
	description: 'Hide Instance-specific panel',
	default: false,
	},
	hideInstanceWallpaper: {
	description: 'Hide Instance default background',
	default: false,
	},
	hideShoutbox: {
	description: 'Hide shoutbox if present',
	default: false,
	},
	hideMutedPosts: {
	// bad name
	description: 'Hide posts of muted users entirely',
	default: false,
	},
	hideMutedThreads: {
	description: 'Hide muted threads entirely',
	default: true,
	},
	hideWordFilteredPosts: {
	description: 'Hide wordfiltered posts entirely',
	default: false,
	},
	muteBotStatuses: {
	description: 'Mute posts made by bots',
	default: false,
	},
	muteSensitiveStatuses: {
	description: 'Mute posts marked as NSFW',
	default: false,
	},
	collapseMessageWithSubject: {
	description: 'Collapse posts with subject',
	default: false,
	},
	padEmoji: {
	description: 'Pad emoji with spaces when using emoji picker',
	default: true,
	},
	hideAttachmentsInConv: {
	description: 'Hide attachments',
	default: false,
	},
	hideScrobbles: {
	description: 'Hide scrobbles',
	default: false,
	},
	hideScrobblesAfter: {
	description: 'Hide scrobbles older than',
	default: '2d',
	},
	maxThumbnails: {
	description: 'Maximum attachments to show',
	default: 16,
	},
	loopVideo: {
	description: 'Loop videos',
	default: true,
	},
	loopVideoSilentOnly: {
	description: 'Loop only videos without sound',
	default: true,
	},
	/// This is not the streaming API configuration, but rather an option
	/// for automatically loading new posts into the timeline without
	/// the user clicking the Show New button.
	streaming: {
	description: 'Automatically show new posts',
	default: false,
	},
	pauseOnUnfocused: {
	description: 'Pause showing new posts when tab is unfocused',
	default: true,
	},
	emojiReactionsOnTimeline: {
	description: 'Show emoji reactions on timeline',
	default: true,
	},
	alwaysShowNewPostButton: {
	description: 'Always show mobile "new post" button, even in desktop mode',
	default: false,
	},
	autohideFloatingPostButton: {
	description:
	'Automatically hide mobile "new post" button when scrolling down',
	default: false,
	},
	stopGifs: {
	description: 'Play animated gifs on hover only',
	default: true,
	},
	replyVisibility: {
	description: 'Type of replies to show',
	default: 'all',
	},
	thirdColumnMode: {
	description: 'What to display in third column',
	default: 'notifications',
	},
	notificationVisibility: {
	description: 'What types of notifications to show',
	default: {
	follows: true,
	mentions: true,
	statuses: true,
	likes: true,
	repeats: true,
	moves: true,
	emojiReactions: true,
	followRequest: true,
	reports: true,
	chatMention: true,
	polls: true,
	},
	},
	notificationNative: {
	description: 'What type of notifications to show desktop notification for',
	default: {
	follows: true,
	mentions: true,
	statuses: true,
	likes: false,
	repeats: false,
	moves: false,
	emojiReactions: false,
	followRequest: true,
	reports: true,
	chatMention: true,
	polls: true,
	},
	},
	webPushNotifications: {
	description: 'Use WebPush',
	default: false,
	},
	webPushAlwaysShowNotifications: {
	description: 'Ignore filter when using WebPush',
	default: false,
	},
	interfaceLanguage: {
	description: 'UI language',
	default: browserLocale,
	},
	hideScopeNotice: {
	description: 'Hide scope notification',
	default: false,
	},
	scopeCopy: {
	description: 'Copy scope like mastodon does',
	default: true,
	},
	subjectLineBehavior: {
	description: 'How to treat subject line',
	default: 'email',
	},
	alwaysShowSubjectInput: {
	description: 'Always show subject line field',
	default: true,
	},
	minimalScopesMode: {
	description: 'Minimize amount of options shown in scope selector',
	default: false,
	},

	// This hides statuses filtered via a word filter
	hideFilteredStatuses: {
	description: 'Hide wordfiltered entirely',
	default: false,
	},

	// Confirmations
	modalOnRepeat: {
	description: 'Show confirmation modal for repeat',
	default: false,
	},
	modalOnUnfollow: {
	description: 'Show confirmation modal for unfollow',
	default: false,
	},
	modalOnBlock: {
	description: 'Show confirmation modal for block',
	default: true,
	},
	modalOnMute: {
	description: 'Show confirmation modal for mute',
	default: false,
	},
	modalOnMuteConversation: {
	description: 'Show confirmation modal for mute conversation',
	default: false,
	},
	modalOnMuteDomain: {
	description: 'Show confirmation modal for mute domain',
	default: true,
	},
	modalOnDelete: {
	description: 'Show confirmation modal for delete',
	default: true,
	},
	modalOnLogout: {
	description: 'Show confirmation modal for logout',
	default: true,
	},
	modalOnApproveFollow: {
	description: 'Show confirmation modal for approve follow',
	default: false,
	},
	modalOnDenyFollow: {
	description: 'Show confirmation modal for deny follow',
	default: false,
	},
	modalOnRemoveUserFromFollowers: {
	description: 'Show confirmation modal for follower removal',
	default: false,
	},

	// Expiry confirmations/default actions
	onMuteDefaultAction: {
	description: 'Default action when muting user',
	default: 'ask',
	},
	onBlockDefaultAction: {
	description: 'Default action when blocking user',
	default: 'ask',
	},

	modalMobileCenter: {
	description: 'Center mobile dialogs vertically',
	default: false,
	},
	playVideosInModal: {
	description: 'Play videos in gallery view',
	default: false,
	},
	useContainFit: {
	description: 'Use object-fit: contain for attachments',
	default: true,
	},
	disableStickyHeaders: {
	description: 'Disable sticky headers',
	default: false,
	},
	showScrollbars: {
	description: 'Always show scrollbars',
	default: false,
	},
	userPopoverAvatarAction: {
	description: 'What to do when clicking popover avatar',
	default: 'open',
	},
	userPopoverOverlay: {
	description: 'Overlay user popover with centering on avatar',
	default: false,
	},
	userCardLeftJustify: {
	description: 'Justify user bio to the left',
	default: false,
	},
	userCardHidePersonalMarks: {
	description: 'Hide highlight/personal note in user view',
	default: false,
	},
	forcedRoundness: {
	description: 'Force roundness of the theme',
	default: -1,
	},
	greentext: {
	description: 'Highlight plaintext >quotes',
	default: false,
	},
	mentionLinkShowTooltip: {
	description: 'Show tooltips for mention links',
	default: true,
	},
	mentionLinkShowAvatar: {
	description: 'Show avatar next to mention link',
	default: false,
	},
	mentionLinkFadeDomain: {
	description:
	'Mute (fade) domain name in mention links if configured to show it',
	default: true,
	},
	mentionLinkShowYous: {
	description: 'Show (you)s when you are mentioned',
	default: false,
	},
	mentionLinkBoldenYou: {
	description: 'Boldern mentionlink of you',
	default: true,
	},
	hidePostStats: {
	description: 'Hide post stats (rt, favs)',
	default: false,
	},
	hideBotIndication: {
	description: 'Hide bot indicator',
	default: false,
	},
	hideUserStats: {
	description: 'Hide user stats (followers etc)',
	default: false,
	},
	virtualScrolling: {
	description: 'Timeline virtual scrolling',
	default: true,
	},
	sensitiveByDefault: {
	description: 'Assume attachments are NSFW by default',
	default: false,
	},
	conversationDisplay: {
	description: 'Style of conversation display',
	default: 'linear',
	},
	conversationTreeAdvanced: {
	description: 'Advanced features of tree view conversation',
	default: false,
	},
	conversationOtherRepliesButton: {
	description: 'Where to show "other replies" in tree conversation view',
	default: 'below',
	},
	conversationTreeFadeAncestors: {
	description: 'Fade ancestors in tree conversation view',
	default: false,
	},
	showExtraNotifications: {
	description:
	'Show extra notifications (chats, announcements etc) in notification panel',
	default: true,
	},
	showExtraNotificationsTip: {
	description: 'Show tip for extra notifications (that user can remove them)',
	default: true,
	},
	showChatsInExtraNotifications: {
	description: 'Show chat messages in notifications',
	default: true,
	},
	showAnnouncementsInExtraNotifications: {
	description: 'Show announcements in notifications',
	default: true,
	},
	showFollowRequestsInExtraNotifications: {
	description: 'Show follow requests in notifications',
	default: true,
	},
	maxDepthInThread: {
	description: 'Maximum depth in tree conversation view',
	default: 6,
	},
	autocompleteSelect: {
	description: '',
	default: false,
	},
	closingDrawerMarksAsSeen: {
	description: 'Closing mobile notification pane marks everything as seen',
	default: true,
	},
	unseenAtTop: {
	description: 'Show unseen notifications above others',
	default: false,
	},
	ignoreInactionableSeen: {
	description: 'Treat inactionable (fav, rt etc) notifications as "seen"',
	default: false,
	},
	unsavedPostAction: {
	description: 'What to do if post is aborted',
	default: 'confirm',
	},
	autoSaveDraft: {
	description: 'Save drafts automatically',
	default: false,
	},
	useAbsoluteTimeFormat: {
	description: 'Use absolute time format',
	default: false,
	},
	absoluteTimeFormatMinAge: {
	description: 'Show absolute time format only after this post age',
	default: '0d',
	},
	absoluteTime12h: {
	description: 'Use 24h time format',
	default: '24h',
	},
	themeChecksum: {
	description: 'Checksum of theme used',
	type: 'string',
	required: false,
	},
	}
	export const INSTANCE_DEFAULT_CONFIG = convertDefinitions(
	INSTANCE_DEFAULT_CONFIG_DEFINITIONS,
	)

	export const LOCAL_DEFAULT_CONFIG_DEFINITIONS = {
	// TODO these two used to be separate but since separation feature got broken it doesn't matter
	hideAttachments: {
	description: 'Hide attachments in timeline',
	default: false,
	},
	hideAttachmentsInConv: {
	description: 'Hide attachments in coversation',
	default: false,
	},
	hideNsfw: {
	description: 'Hide nsfw posts',
	default: true,
	},
	useOneClickNsfw: {
	description: 'Open NSFW images directly in media modal',
	default: false,
	},
	preloadImage: {
	description: 'Preload images for NSFW',
	default: true,
	},
	postContentType: {
	description: 'Default post content type',
	default: 'text/plain',
	},
	sidebarRight: {
	description: 'Reverse order of columns',
	default: false,
	},
	sidebarColumnWidth: {
	description: 'Sidebar column width',
	default: '25rem',
	},
	contentColumnWidth: {
	description: 'Middle column width',
	default: '45rem',
	},
	notifsColumnWidth: {
	description: 'Notifications column width',
	default: '25rem',
	},
	themeEditorMinWidth: {
	description: 'Hack for theme editor on mobile',
	default: '0rem',
	},
	emojiReactionsScale: {
	description: 'Emoji reactions scale factor',
	default: 0.5,
	},
	textSize: {
	description: 'Font size',
	default: '1rem',
	},
	emojiSize: {
	description: 'Emoji size',
	default: '2.2rem',
	},
	navbarSize: {
	description: 'Navbar size',
	default: '3.5rem',
	},
	panelHeaderSize: {
	description: 'Panel header size',
	default: '3.2rem',
	},
	navbarColumnStretch: {
	description: 'Stretch navbar to match columns width',
	default: false,
	},
	mentionLinkDisplay: {
	description: 'How to display mention links',
	default: 'short',
	},
	imageCompression: {
	description: 'Image compression (WebP/JPEG)',
	default: true,
	},
	alwaysUseJpeg: {
	description: 'Compress images using JPEG only',
	default: false,
	},
	useStreamingApi: {
	description: 'Streaming API (WebSocket)',
	default: false,
	},
	underlay: {
	description: 'Underlay override',
	required: true,
	default: 'none',
	},
	fontInterface: {
	description: 'Interface font override',
	type: 'string',
	default: null,
	},
	fontInput: {
	description: 'Input font override',
	type: 'string',
	default: null,
	},
	fontPosts: {
	description: 'Post font override',
	type: 'string',
	default: null,
	},
	fontMonospace: {
	description: 'Monospace font override',
	type: 'string',
	default: null,
	},
	themeDebug: {
	description:
	'Debug mode that uses computed backgrounds instead of real ones to debug contrast functions',
	default: false,
	},
	forceThemeRecompilation: {
	description: 'Flag that forces recompilation on boot even if cache exists',
	default: false,
	},
	}
	export const LOCAL_DEFAULT_CONFIG = convertDefinitions(
	LOCAL_DEFAULT_CONFIG_DEFINITIONS,
	)

	export const LOCAL_ONLY_KEYS = new Set(Object.keys(LOCAL_DEFAULT_CONFIG))

	+export const SYNC_DEFAULT_CONFIG_DEFINITIONS = {
	+ dontShowUpdateNotifs: {
	+ description: 'Never show update notification (pleroma-tan)',
	+ default: false,
	+ },
	+ collapseNav: {
	+ description: 'Collapse navigation panel to header only',
	+ default: false
	+ }
	+}
	+export const SYNC_DEFAULT_CONFIG = convertDefinitions(
	+ SYNC_DEFAULT_CONFIG_DEFINITIONS,
	+)
	+export const SYNC_ONLY_KEYS = new Set(Object.keys(SYNC_DEFAULT_CONFIG))
	+
	export const THEME_CONFIG_DEFINITIONS = {
	theme: {
	description: 'Very old theme store, stores preset name, still in use',
	default: null,
	},
	colors: {
	description: 'VERY old theme store, just colors of V1, probably not even used anymore',
	default: {},
	},
	// V2
	customTheme: {
	description: '"Snapshot", previously was used as actual theme store for V2 so it\'s still used in case of PleromaFE downgrade event.',
	default: null,
	},
	customThemeSource: {
	description: '"Source", stores original theme data',
	default: null,
	},
	// V3
	style: {
	description: 'Style name for builtins',
	default: null,
	},
	styleCustomData: {
	description: 'Custom style data (i.e. not builtin)',
	default: null,
	},
	palette: {
	description: 'Palette name for builtins',
	default: null,
	},
	paletteCustomData: {
	description: 'Custom palette data (i.e. not builtin)',
	default: null,
	},
	}
	export const THEME_CONFIG = convertDefinitions(
	THEME_CONFIG_DEFINITIONS,
	)

	export const makeUndefined = (c) =>
	Object.fromEntries(Object.keys(c).map((key) => [key, undefined]))

	/// For properties with special processing or properties that does not
	/// make sense to be overriden on a instance-wide level.
	-export const defaultState = {
	+export const ROOT_CONFIG = {
	// Set these to undefined so it does not interfere with default settings check
	- ...makeUndefined(INSTANCE_DEFAULT_CONFIG),
	- ...makeUndefined(LOCAL_DEFAULT_CONFIG),
	- ...makeUndefined(THEME_CONFIG),
	+ ...INSTANCE_DEFAULT_CONFIG,
	+ ...LOCAL_DEFAULT_CONFIG,
	+ ...SYNC_DEFAULT_CONFIG,
	+ ...THEME_CONFIG,
	+}
	+
	+export const ROOT_CONFIG_DEFINITIONS = {
	+ ...INSTANCE_DEFAULT_CONFIG_DEFINITIONS,
	+ ...LOCAL_DEFAULT_CONFIG_DEFINITIONS,
	+ ...SYNC_DEFAULT_CONFIG_DEFINITIONS,
	+ ...THEME_CONFIG_DEFINITIONS,
	}

	export const validateSetting = ({
	value,
	path,
	definition,
	throwError,
	defaultState,
	}) => {
	if (value === undefined) return // only null is allowed as missing value
	if (get(defaultState, path) === undefined) {
	const string = `Unknown instance option ${path}, value: ${value}`

	if (throwError) {
	throw new Error(string)
	} else {
	console.error(string)
	return value
	}
	}

	let { required, type, default: defaultValue } = definition

	if (type == null && defaultValue != null) {
	type = typeof defaultValue
	}

	if (required && value == null) {
	const string = `Value required for setting ${path} but was provided nullish; defaulting`

	if (throwError) {
	throw new Error(string)
	} else {
	console.error(string)
	return defaultValue
	}
	}

	if (value !== null && type != null && typeof value !== type) {
	const string = `Invalid type for setting ${path}: expected type ${type}, got ${typeof value}, value ${value}; defaulting`

	if (throwError) {
	throw new Error(string)
	} else {
	console.error(string)
	return defaultValue
	}
	}

	return value
	}
	diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
	index e3abb39c48..c8e90c0a66 100644
	--- a/src/services/style_setter/style_setter.js
	+++ b/src/services/style_setter/style_setter.js
	@@ -1,357 +1,357 @@
	import sum from 'hash-sum'
	import localforage from 'localforage'
	import { chunk, throttle } from 'lodash'

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

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

	-import { defaultState } from 'src/modules/default_config_state.js'
	+import { ROOT_CONFIG } from 'src/modules/default_config_state.js'

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

	const stylesheets = {}

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

	// firefox doesn't like invalid selectors
	if (
	!CSS.supports?.('selector(::-webkit-scrollbar)') &&
	newRule.startsWith('::-webkit')
	) {
	return
	}
	this.rules.push(
	newRule.replace(/var$--shadowFilter$[^;]*;/g, ''), // Remove shadowFilter references
	)
	},
	}

	stylesheets[id] = newStyleSheet
	return newStyleSheet
	}

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

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

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

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

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

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

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

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

	return { lazyProcessFunc: processChunk }
	}

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

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

	eagerStyles.ready = true
	lazyStyles.ready = true

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

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

	eagerStyles.clear()
	lazyStyles.clear()

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

	setTimeout(lazyProcessFunc, 0)
	}

	const extractStyleConfig = ({
	sidebarColumnWidth,
	contentColumnWidth,
	notifsColumnWidth,
	themeEditorMinWidth,
	emojiReactionsScale,
	emojiSize,
	navbarSize,
	panelHeaderSize,
	textSize,
	forcedRoundness,
	}) => {
	const result = {
	sidebarColumnWidth,
	contentColumnWidth,
	notifsColumnWidth,
	themeEditorMinWidth:
	parseInt(themeEditorMinWidth) === 0 ? 'fit-content' : themeEditorMinWidth,
	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(defaultState)
	+const defaultStyleConfig = extractStyleConfig(ROOT_CONFIG)

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

	if (config === defaultStyleConfig) {
	return
	}

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

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

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

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

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

	const resourceTransform = (resources) => {
	return Object.entries(resources).map(([k, v]) => {
	if (typeof v === 'object') {
	return [k, () => Promise.resolve(v)]
	} else if (typeof v === 'string') {
	return [
	k,
	() =>
	window
	.fetch(v, { cache })
	.then((data) => data.text())
	.then((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 builtinData = await window.fetch(url, { cache })
	const builtinResources = await builtinData.json()
	builtin = resourceTransform(builtinResources)
	} catch {
	builtin = []
	console.warn(`Builtin resources at ${url} unavailable`)
	}

	try {
	const customData = await window.fetch(customUrl, { cache })
	const customResources = await customData.json()
	custom = resourceTransform(customResources)
	} catch {
	custom = []
	console.warn(`Custom resources at ${customUrl} unavailable`)
	}

	const total = [...custom, ...builtin]
	if (total.length === 0) {
	return Promise.reject(
	new Error(
	`Resource at ${url} and ${customUrl} completely unavailable. Panicking`,
	),
	)
	}
	return Promise.resolve(Object.fromEntries(total))
	}
	diff --git a/src/stores/local_config.js b/src/stores/local_config.js
	index 6d52f94d26..f8b76a26c0 100644
	--- a/src/stores/local_config.js
	+++ b/src/stores/local_config.js
	@@ -1,64 +1,65 @@
	import { cloneDeep, set } from 'lodash'
	import { defineStore } from 'pinia'
	import { toRaw } from 'vue'

	import { useInstanceStore } from 'src/stores/instance'

	import {
	LOCAL_DEFAULT_CONFIG,
	LOCAL_DEFAULT_CONFIG_DEFINITIONS,
	validateSetting,
	+ makeUndefined,
	} from 'src/modules/default_config_state'

	export const defaultState = {
	prefsStorage: {
	- ...LOCAL_DEFAULT_CONFIG,
	+ ...makeUndefined(LOCAL_DEFAULT_CONFIG),
	},
	tempStorage: {
	- ...LOCAL_DEFAULT_CONFIG,
	+ ...makeUndefined(LOCAL_DEFAULT_CONFIG),
	},
	}

	export const useLocalConfigStore = defineStore('local_config', {
	state() {
	return cloneDeep(defaultState)
	},
	actions: {
	set({ path, value }) {
	const definition = LOCAL_DEFAULT_CONFIG_DEFINITIONS[path]

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

	set(this.prefsStorage, path, finalValue)
	},
	setTemporarily({ path, value }) {
	set(this.tempStorage, path, value)
	},
	unsetTemporarily({ path, value }) {
	set(this.tempStorage, path, undefined)
	},
	unset({ path, value }) {
	set(this.prefsStorage, path, undefined)
	},
	clearLocalConfig() {
	Object.keys(this).forEach((k) => {
	this.prefsStorage[k] = undefined
	this.tempStorage[k] = undefined
	})
	},
	},
	persist: {
	afterLoad(state) {
	return {
	- prefsStorage: state.prefsStorage ?? { ...LOCAL_DEFAULT_CONFIG },
	- tempStorage: { ...LOCAL_DEFAULT_CONFIG },
	+ prefsStorage: state.prefsStorage ?? { ...makeUndefined(LOCAL_DEFAULT_CONFIG) },
	+ tempStorage: { ...makeUndefined(LOCAL_DEFAULT_CONFIG) },
	}
	},
	},
	})
	diff --git a/src/stores/merged_config.js b/src/stores/merged_config.js
	index 0639b3b1a7..80d27fabfa 100644
	--- a/src/stores/merged_config.js
	+++ b/src/stores/merged_config.js
	@@ -1,71 +1,76 @@
	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 {
	INSTANCE_DEFAULT_CONFIG,
	LOCAL_DEFAULT_CONFIG,
	THEME_CONFIG,
	LOCAL_ONLY_KEYS,
	} from 'src/modules/default_config_state.js'

	const ROOT_CONFIG = {
	...INSTANCE_DEFAULT_CONFIG,
	...LOCAL_DEFAULT_CONFIG,
	...THEME_CONFIG,
	}

	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) =>
	- tempPrefs[k] ?? localPrefs[k] ?? syncPrefs.simple[k]
	+ 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 instancePrefs = useInstanceStore().prefsStorage
	const tempPrefs = useLocalConfigStore().tempStorage
	const localPrefs = useLocalConfigStore().prefsStorage
	const syncPrefs = useSyncConfigStore().prefsStorage

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

	const result = Object.fromEntries(
	Object.keys(ROOT_CONFIG).map(([k, value]) => [
	k,
	getValue(k),
	]),
	)
	return result
	},
	},
	})
	diff --git a/src/stores/sync_config.js b/src/stores/sync_config.js
	index 064d3f1ff3..a6580b5c7a 100644
	--- a/src/stores/sync_config.js
	+++ b/src/stores/sync_config.js
	@@ -1,774 +1,758 @@
	import sum from 'hash-sum'
	import {
	merge as _merge,
	clamp,
	cloneDeep,
	findLastIndex,
	flatten,
	get,
	groupBy,
	isEqual,
	set,
	take,
	takeRight,
	uniqWith,
	unset,
	} from 'lodash'
	import { defineStore } from 'pinia'
	import { toRaw } from 'vue'

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

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useLocalConfigStore } from 'src/stores/local_config.js'

	import { storage } from 'src/lib/storage.js'
	import {
	- defaultState as configDefaultState,
	- INSTANCE_DEFAULT_CONFIG,
	- INSTANCE_DEFAULT_CONFIG_DEFINITIONS,
	- LOCAL_DEFAULT_CONFIG,
	- LOCAL_DEFAULT_CONFIG_DEFINITIONS,
	- THEME_CONFIG,
	- THEME_CONFIG_DEFINITIONS,
	+ ROOT_CONFIG,
	+ ROOT_CONFIG_DEFINITIONS,
	validateSetting,
	+ makeUndefined,
	} from 'src/modules/default_config_state.js'
	import { oldDefaultConfigSync } from 'src/modules/old_default_config_state.js'

	-const ROOT_CONFIG_DEFINITIONS = {
	- ...INSTANCE_DEFAULT_CONFIG_DEFINITIONS,
	- ...LOCAL_DEFAULT_CONFIG_DEFINITIONS,
	- ...THEME_CONFIG_DEFINITIONS,
	-}
	-
	-const ROOT_CONFIG = {
	- ...INSTANCE_DEFAULT_CONFIG,
	- ...LOCAL_DEFAULT_CONFIG,
	- ...THEME_CONFIG,
	-}
	-
	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: {
	- dontShowUpdateNotifs: false,
	- collapseNav: false,
	muteFilters: {},

	- ...configDefaultState,
	+ ...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 (typeof 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) => {
	return Array.from(
	new Set([
	...Object.keys(toRaw((recent \|\| {}).flagStorage \|\| {})),
	...Object.keys(toRaw((stale \|\| {}).flagStorage \|\| {})),
	]),
	)
	}

	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 = flatten(
	journals.map((j) => (Array.isArray(j) ? j : [])),
	).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, journal]) => {
	// side effect
	journal.sort((a, b) => (a.timestamp > b.timestamp ? 1 : -1))

	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 takeRight(journal)
	} else {
	return journal
	}
	})

	const flat = flatten(trimmedGrouped).sort((a, b) =>
	a.timestamp > b.timestamp ? 1 : -1,
	)
	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.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`,
	)
	}

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

	const finalValue = validateSetting({
	path: path.split('.')[1],
	value,
	definition,
	throwError: false,
	defaultState: ROOT_CONFIG,
	})

	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: { ...defaultState.prefsStorage },
	})
	}

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

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

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

	Object.entries(oldDefaultConfigSync).forEach(([key, value]) => {
	const oldValue = vuexState.config[key]
	const defaultValue = value

	const present = oldValue !== undefined
	const migrated = migratedEntries.has(key)
	const different = !isEqual(oldValue, defaultValue)

	if (present && !migrated && different) {
	console.debug(`Migrating config ${key}: ${oldValue}`)
	if (key === 'theme3hacks') {
	useLocalConfigStore().set({
	path: 'fontInterface',
	value: oldValue.fonts.interface,
	})
	useLocalConfigStore().set({
	path: 'fontInput',
	value: oldValue.fonts.input,
	})
	useLocalConfigStore().set({
	path: 'fontPost',
	value: oldValue.fonts.post,
	})
	useLocalConfigStore().set({
	path: 'fontMonospace',
	value: oldValue.fonts.monospace,
	})
	useLocalConfigStore().set({
	path: 'underlay',
	value: oldValue.underlay,
	})
	} else {
	this.setPreference({ path: `simple.${key}`, value: oldValue })
	}
	migratedEntries.add(key)
	needUpload = true
	}
	})

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

	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.dirty = dirty \|\| needUpload
	this.cache = recent
	// 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.flagStorage = this.cache.flagStorage
	this.prefsStorage = this.cache.prefsStorage
	this.pushSyncConfig()
	console.log('C', this.cache)
	},
	pushSyncConfig({ force = false } = {}) {
	const needPush = this.dirty \|\| force
	if (!needPush) return
	this.updateCache({ username: window.vuex.state.users.currentUser.fqn })
	const params = { pleroma_settings_store: { 'pleroma-fe': this.cache } }
	window.vuex.state.api.backendInteractor.updateProfileJSON({ params })
	},
	},
	persist: {
	afterLoad(state) {
	return state
	},
	},
	})
	diff --git a/src/stores/user_highlight.js b/src/stores/user_highlight.js
	index ae2bd4d4ca..c70c7f57f1 100644
	--- a/src/stores/user_highlight.js
	+++ b/src/stores/user_highlight.js
	@@ -1,359 +1,358 @@
	import {
	merge as _merge,
	clamp,
	clone,
	cloneDeep,
	findLastIndex,
	flatten,
	get,
	groupBy,
	isEqual,
	takeRight,
	uniqWith,
	} from 'lodash'
	import { defineStore } from 'pinia'
	import { toRaw } from 'vue'

	import { storage } from 'src/lib/storage.js'
	-import { defaultState as configDefaultState } from 'src/modules/default_config_state'

	export const NEW_USER_DATE = new Date('2022-08-04') // date of writing this, basically

	export const defaultState = {
	// do we need to update data on server?
	dirty: false,
	highlight: {
	_journal: [],
	},
	// raw data
	raw: null,
	// local cache
	cache: null,
	}

	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(),
	}
	}

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

	const _verifyHighlights = (state) => {
	state.highlight = state.highlight \|\| {}

	// Simple
	Object.entries(defaultState.highlight).forEach(([k, v]) => {
	if (typeof v === 'undefined') return
	if (typeof v === 'object') return
	console.warn(`User highlight ${k} is invalid type ${typeof v}, unsetting`)
	delete state.highlight[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(
	'[HIGHLIGHT] Nothing valid stored on server, assuming cache to be source of truth',
	)
	result.recent = cache
	result.stale = live
	} else if (!cacheValid && liveValid) {
	console.debug(
	'[HIGHLIGHT] 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(
	'[HIGHLIGHT] Both sources have valid data, figuring things out...',
	)
	if (live._timestamp === cache._timestamp) {
	console.debug(
	'[HIGHLIGHT] Same timestamp on both sources, source of truth irrelevant',
	)
	result.recent = cache
	result.stale = live
	} else {
	console.debug(
	'[HIGHLIGHT] Different timestamp, 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('[HIGHLIGHT] Both sources are invalid, start from scratch')
	result.needUpload = true
	}

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

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

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

	return result
	}

	const _mergeJournal = (...journals) => {
	// Ignore invalid journal entries
	const allJournals = flatten(
	journals.map((j) => (Array.isArray(j) ? j : [])),
	).filter(
	(entry) =>
	Object.hasOwn(entry, 'user') &&
	Object.hasOwn(entry, 'operation') &&
	Object.hasOwn(entry, 'args') &&
	Object.hasOwn(entry, 'timestamp'),
	)
	const grouped = groupBy(allJournals, 'user')
	const trimmedGrouped = Object.entries(grouped).map(([user, journal]) => {
	// side effect
	journal.sort((a, b) => (a.timestamp > b.timestamp ? 1 : -1))

	return takeRight(journal)
	})
	return flatten(trimmedGrouped).sort((a, b) =>
	a.timestamp > b.timestamp ? 1 : -1,
	)
	}

	export const _mergeHighlights = (recent, stale) => {
	if (!stale) return recent
	if (!recent) return stale
	const { _journal: recentJournal, ...recentData } = recent
	const { _journal: staleJournal } = stale
	/** Journal entry format:
	* user: user to entry in highlight storage
	* 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)
	*/
	const resultOutput = { ...recentData }
	const Journal = _mergeJournal(staleJournal, recentJournal)
	Journal.forEach(({ user, operation, args }) => {
	if (user.startsWith('_')) {
	throw new Error(
	`journal contains entry to edit internal (starts with _) field '${user}', something is incorrect here, ignoring.`,
	)
	}
	switch (operation) {
	case 'set':
	resultOutput[user] = args[0]
	break
	case 'unset':
	delete resultOutput[user]
	break
	default:
	return console.error(`Unknown journal operation: '${operation}'`)
	}
	})
	return { ...resultOutput, _journal: Journal }
	}

	export const useUserHighlightStore = defineStore('user_highlight', {
	state() {
	return cloneDeep(defaultState)
	},
	actions: {
	setAndSave({ user, value }) {
	this.set({ user, value })
	this.pushHighlight()
	},
	unsetAndSave({ user }) {
	this.unset({ user })
	this.pushHighlight()
	},
	get(user) {
	const present = this.highlight[user] \|\| {}
	return {
	user,
	type: 'disabled',
	color: '#FFFFFF',
	...present,
	}
	},
	set({ user, value }) {
	if (user.startsWith('_')) {
	throw new Error(
	`Tried to edit internal (starts with _) field '${user}', ignoring.`,
	)
	}
	const oldValue = this.highlight[user]
	const newValue = {
	user,
	...oldValue,
	...value,
	}
	this.highlight[user] = newValue
	this.highlight._journal = [
	...this.highlight._journal,
	{ operation: 'set', user, args: [newValue], timestamp: Date.now() },
	]
	this.dirty = true
	},
	unset({ user, value }) {
	if (user.startsWith('_')) {
	throw new Error(
	`Tried to edit internal (starts with _) field '${user}', ignoring.`,
	)
	}
	delete this.highlight[user]
	this.highlight._journal = [
	...this.highlight._journal,
	{ operation: 'unset', user, args: [], timestamp: Date.now() },
	]
	this.dirty = true
	},
	updateCache({ username }) {
	this.highlight._journal = _mergeJournal(this.highlight._journal)
	this.cache = _wrapData(
	{
	highlight: toRaw(this.highlight),
	},
	username,
	)
	},
	clearSyncConfig() {
	const blankState = { ...cloneDeep(defaultState) }
	Object.keys(this).forEach((k) => {
	this[k] = blankState[k]
	})
	},
	clearJournals() {
	this.highlight._journal = []
	this.cache.highlight._journal = []
	this.raw.highlight._journal = []
	this.pushSyncConfig()
	},
	async initUserHighlight(userData) {
	const live = userData.user_highlight
	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
	let dirty = false

	const vuexState = (await storage.getItem('vuex-lz')) ?? {}
	vuexState.config = vuexState.config ?? {}
	const highlight = vuexState.config.highlight ?? {}

	Object.entries(highlight).forEach(([user, value]) => {
	if ((highlight[user]._migrated \|\| 0) < 1) {
	dirty = true
	needUpload = true
	this.set({ user, value: clone(value) })
	vuexState.config.highlight[user]._migrated = 1
	console.debug(
	`[HIGHLIGHT] Migrating user ${user}: ${JSON.stringify(value)}`,
	)
	}
	})
	storage.setItem('vuex-lz', vuexState)

	if (recent === null) {
	console.debug(
	`[HIGHLIGHT] Data is empty, initializing for ${userNew ? 'new' : 'existing'} user`,
	)
	recent = _wrapData({
	highlight: { ...defaultState.highlight },
	})
	}

	if (!needUpload && recent && stale) {
	console.debug('[HIGHLIGHT] Checking if data needs merging...')
	// discarding timestamps
	const { _timestamp: _0, ...recentData } = recent
	const { _timestamp: _2, ...staleData } = stale
	dirty = !isEqual(recentData, staleData)
	console.debug(
	`[HIGHLIGHT] Data ${dirty ? 'needs' : "doesn't need"} merging`,
	)
	}

	let highlights
	if (dirty) {
	console.debug('[HIGHLIGHT] Merging the data...')
	_verifyHighlights(recent)
	_verifyHighlights(stale)
	highlights = _mergeHighlights(recent.highlight, stale.highlight)
	} else {
	highlights = recent.highlight
	}

	recent.highlight = { ...defaultState.highlight, ...highlights }

	this.dirty = dirty \|\| needUpload
	this.cache = recent
	// 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.highlight = this.cache.highlight
	this.pushHighlight()
	},
	pushHighlight({ force = false } = {}) {
	const needPush = this.dirty \|\| force
	if (!needPush) return
	this.updateCache({ username: window.vuex.state.users.currentUser.fqn })
	const params = {
	pleroma_settings_store: { user_highlight: this.cache },
	}
	window.vuex.state.api.backendInteractor
	.updateProfileJSON({ params })
	.then((user) => {
	this.initUserHighlight(user)
	this.dirty = false
	})
	},
	},
	persist: {
	afterLoad(state) {
	return state
	},
	},
	})

File Metadata

Mime Type: text/x-diff
Expires: Fri, Oct 9, 7:26 AM (1 d, 13 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1784495
Default Alt Text: (69 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions