No OneTemporary
Actions

Size

138 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
	index c5b1d66f68..6242344ce5 100644
	--- a/src/components/mobile_nav/mobile_nav.js
	+++ b/src/components/mobile_nav/mobile_nav.js
	@@ -1,156 +1,156 @@
	import { mapState } from 'pinia'
	import { mapGetters } from 'vuex'

	import NavigationPins from 'src/components/navigation/navigation_pins.vue'
	import GestureService from '../../services/gesture_service/gesture_service'
	import {
	countExtraNotifications,
	unseenNotificationsFromStore,
	} from '../../services/notification_utils/notification_utils'
	import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	import Notifications from '../notifications/notifications.vue'
	import SideDrawer from '../side_drawer/side_drawer.vue'

	import { useAnnouncementsStore } from 'src/stores/announcements.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	-import { useServerSideStorageStore } from 'src/stores/serverSideStorage.js'
	+import { useSyncConfigStore } from 'src/stores/sync_config.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faArrowUp,
	faBars,
	faBell,
	faCheckDouble,
	faMinus,
	faTimes,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faTimes, faBell, faBars, faArrowUp, faMinus, faCheckDouble)

	const MobileNav = {
	components: {
	SideDrawer,
	Notifications,
	NavigationPins,
	ConfirmModal,
	},
	data: () => ({
	notificationsCloseGesture: undefined,
	notificationsOpen: false,
	notificationsAtTop: true,
	showingConfirmLogout: false,
	}),
	created() {
	this.notificationsCloseGesture = GestureService.swipeGesture(
	GestureService.DIRECTION_RIGHT,
	() => this.closeMobileNotifications(true),
	50,
	)
	},
	computed: {
	currentUser() {
	return this.$store.state.users.currentUser
	},
	unseenNotifications() {
	return unseenNotificationsFromStore(this.$store)
	},
	unseenNotificationsCount() {
	return (
	this.unseenNotifications.length + countExtraNotifications(this.$store)
	)
	},
	unseenCount() {
	return this.unseenNotifications.length
	},
	unseenCountBadgeText() {
	return `${this.unseenCount ? this.unseenCount : ''}`
	},
	hideSitename() {
	return useInstanceStore().hideSitename
	},
	sitename() {
	return useInstanceStore().name
	},
	isChat() {
	return this.$route.name === 'chat'
	},
	...mapState(useAnnouncementsStore, ['unreadAnnouncementCount']),
	- ...mapState(useServerSideStorageStore, {
	+ ...mapState(useSyncConfigStore, {
	pinnedItems: (store) =>
	new Set(store.prefsStorage.collections.pinnedNavItems).has('chats'),
	}),
	shouldConfirmLogout() {
	- return this.$store.getters.mergedConfig.modalOnLogout
	+ return useSyncConfigStore().mergedConfig.modalOnLogout
	},
	closingDrawerMarksAsSeen() {
	- return this.$store.getters.mergedConfig.closingDrawerMarksAsSeen
	+ return useSyncConfigStore().mergedConfig.closingDrawerMarksAsSeen
	},
	...mapGetters(['unreadChatCount']),
	},
	methods: {
	toggleMobileSidebar() {
	this.$refs.sideDrawer.toggleDrawer()
	},
	openMobileNotifications() {
	this.notificationsOpen = true
	},
	closeMobileNotifications(markRead) {
	if (this.notificationsOpen) {
	// make sure to mark notifs seen only when the notifs were open and not
	// from close-calls.
	this.notificationsOpen = false
	if (markRead && this.closingDrawerMarksAsSeen) {
	this.markNotificationsAsSeen()
	}
	}
	},
	notificationsTouchStart(e) {
	GestureService.beginSwipe(e, this.notificationsCloseGesture)
	},
	notificationsTouchMove(e) {
	GestureService.updateSwipe(e, this.notificationsCloseGesture)
	},
	scrollToTop() {
	window.scrollTo(0, 0)
	},
	scrollMobileNotificationsToTop() {
	this.$refs.mobileNotifications.scrollTo(0, 0)
	},
	showConfirmLogout() {
	this.showingConfirmLogout = true
	},
	hideConfirmLogout() {
	this.showingConfirmLogout = false
	},
	logout() {
	if (!this.shouldConfirmLogout) {
	this.doLogout()
	} else {
	this.showConfirmLogout()
	}
	},
	doLogout() {
	this.$router.replace('/main/public')
	this.$store.dispatch('logout')
	this.hideConfirmLogout()
	},
	markNotificationsAsSeen() {
	this.$store.dispatch('markNotificationsAsSeen')
	},
	onScroll({ target: { scrollTop, clientHeight, scrollHeight } }) {
	this.notificationsAtTop = scrollTop > 0
	if (scrollTop + clientHeight >= scrollHeight) {
	this.$refs.notifications.fetchOlderNotifications()
	}
	},
	},
	watch: {
	$route() {
	// handles closing notificaitons when you press any router-link on the
	// notifications.
	this.closeMobileNotifications()
	},
	},
	}

	export default MobileNav
	diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
	index 8aff31f02b..9e5901f240 100644
	--- a/src/components/nav_panel/nav_panel.js
	+++ b/src/components/nav_panel/nav_panel.js
	@@ -1,169 +1,169 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapGetters, mapState } from 'vuex'

	import BookmarkFoldersMenuContent from 'src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ListsMenuContent from 'src/components/lists_menu/lists_menu_content.vue'
	import { filterNavigation } from 'src/components/navigation/filter.js'
	import { ROOT_ITEMS, TIMELINES } from 'src/components/navigation/navigation.js'
	import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
	import NavigationPins from 'src/components/navigation/navigation_pins.vue'

	import { useAnnouncementsStore } from 'src/stores/announcements'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
	+import { useSyncConfigStore } from 'src/stores/sync_config.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faBookmark,
	faBullhorn,
	faChevronDown,
	faChevronUp,
	faCity,
	faComments,
	faEnvelope,
	faFilePen,
	faGlobe,
	faInfoCircle,
	faList,
	faStream,
	faUsers,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faUsers,
	faGlobe,
	faCity,
	faBookmark,
	faEnvelope,
	faChevronDown,
	faChevronUp,
	faComments,
	faBell,
	faInfoCircle,
	faStream,
	faList,
	faBullhorn,
	faFilePen,
	)
	const NavPanel = {
	props: ['forceExpand', 'forceEditMode'],
	components: {
	BookmarkFoldersMenuContent,
	ListsMenuContent,
	NavigationEntry,
	NavigationPins,
	Checkbox,
	},
	data() {
	return {
	editMode: false,
	showTimelines: false,
	showLists: false,
	showBookmarkFolders: false,
	timelinesList: Object.entries(TIMELINES).map(([k, v]) => ({
	...v,
	name: k,
	})),
	rootList: Object.entries(ROOT_ITEMS).map(([k, v]) => ({ ...v, name: k })),
	}
	},
	methods: {
	toggleTimelines() {
	this.showTimelines = !this.showTimelines
	},
	toggleLists() {
	this.showLists = !this.showLists
	},
	toggleBookmarkFolders() {
	this.showBookmarkFolders = !this.showBookmarkFolders
	},
	toggleEditMode() {
	this.editMode = !this.editMode
	},
	toggleCollapse() {
	- useServerSideStorageStore().setPreference({
	+ useSyncConfigStore().setPreference({
	path: 'simple.collapseNav',
	value: !this.collapsed,
	})
	- useServerSideStorageStore().pushServerSideStorage()
	+ useSyncConfigStore().pushSyncConfig()
	},
	isPinned(item) {
	return this.pinnedItems.has(item)
	},
	togglePin(item) {
	if (this.isPinned(item)) {
	- useServerSideStorageStore().removeCollectionPreference({
	+ useSyncConfigStore().removeCollectionPreference({
	path: 'collections.pinnedNavItems',
	value: item,
	})
	} else {
	- useServerSideStorageStore().addCollectionPreference({
	+ useSyncConfigStore().addCollectionPreference({
	path: 'collections.pinnedNavItems',
	value: item,
	})
	}
	- useServerSideStorageStore().pushServerSideStorage()
	+ useSyncConfigStore().pushSyncConfig()
	},
	},
	computed: {
	...mapPiniaState(useAnnouncementsStore, {
	unreadAnnouncementCount: 'unreadAnnouncementCount',
	supportsAnnouncements: (store) => store.supportsAnnouncements,
	}),
	...mapPiniaState(useInstanceCapabilitiesStore, [
	'pleromaChatMessagesAvailable',
	'pleromaBookmarkFoldersAvailable',
	'localBubble',
	]),
	...mapPiniaState(useInstanceStore, ['federating']),
	...mapPiniaState(useInstanceStore, {
	privateMode: (store) => store.private,
	}),
	- ...mapPiniaState(useServerSideStorageStore, {
	+ ...mapPiniaState(useSyncConfigStore, {
	collapsed: (store) => store.prefsStorage.simple.collapseNav,
	pinnedItems: (store) =>
	new Set(store.prefsStorage.collections.pinnedNavItems),
	}),
	...mapState({
	currentUser: (state) => state.users.currentUser,
	followRequestCount: (state) => state.api.followRequests.length,
	}),
	timelinesItems() {
	return filterNavigation(
	Object.entries({ ...TIMELINES })
	// do not show in timeliens list since it's in a better place now
	.filter(([key]) => key !== 'bookmarks')
	.map(([k, v]) => ({ ...v, name: k })),
	{
	hasChats: this.pleromaChatMessagesAvailable,
	hasAnnouncements: this.supportsAnnouncements,
	isFederating: this.federating,
	isPrivate: this.privateMode,
	currentUser: this.currentUser,
	supportsBubbleTimeline: this.localBubble,
	supportsBookmarkFolders: this.pleromaBookmarkFoldersAvailable,
	},
	)
	},
	rootItems() {
	return filterNavigation(
	Object.entries({ ...ROOT_ITEMS }).map(([k, v]) => ({ ...v, name: k })),
	{
	hasChats: this.pleromaChatMessagesAvailable,
	hasAnnouncements: this.supportsAnnouncements,
	isFederating: this.federating,
	isPrivate: this.privateMode,
	currentUser: this.currentUser,
	supportsBubbleTimeline: this.localBubble,
	supportsBookmarkFolders: this.pleromaBookmarkFoldersAvailable,
	},
	)
	},
	...mapGetters(['unreadChatCount']),
	},
	}

	export default NavPanel
	diff --git a/src/components/navigation/navigation_entry.js b/src/components/navigation/navigation_entry.js
	index 3384534bee..7a43000cef 100644
	--- a/src/components/navigation/navigation_entry.js
	+++ b/src/components/navigation/navigation_entry.js
	@@ -1,57 +1,57 @@
	import { mapState as mapPiniaState, mapStores } from 'pinia'
	import { mapState } from 'vuex'

	import { routeTo } from 'src/components/navigation/navigation.js'
	import OptionalRouterLink from 'src/components/optional_router_link/optional_router_link.vue'

	import { useAnnouncementsStore } from 'src/stores/announcements.js'
	-import { useServerSideStorageStore } from 'src/stores/serverSideStorage.js'
	+import { useSyncConfigStore } from 'src/stores/sync_config.js'

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

	library.add(faThumbtack)

	const NavigationEntry = {
	props: ['item', 'showPin'],
	components: {
	OptionalRouterLink,
	},
	methods: {
	isPinned(value) {
	return this.pinnedItems.has(value)
	},
	togglePin(value) {
	if (this.isPinned(value)) {
	- useServerSideStorageStore().removeCollectionPreference({
	+ useSyncConfigStore().removeCollectionPreference({
	path: 'collections.pinnedNavItems',
	value,
	})
	} else {
	- useServerSideStorageStore().addCollectionPreference({
	+ useSyncConfigStore().addCollectionPreference({
	path: 'collections.pinnedNavItems',
	value,
	})
	}
	- useServerSideStorageStore().pushServerSideStorage()
	+ useSyncConfigStore().pushSyncConfig()
	},
	},
	computed: {
	routeTo() {
	return routeTo(this.item, this.currentUser)
	},
	getters() {
	return this.$store.getters
	},
	...mapStores(useAnnouncementsStore),
	...mapState({
	currentUser: (state) => state.users.currentUser,
	}),
	- ...mapPiniaState(useServerSideStorageStore, {
	+ ...mapPiniaState(useSyncConfigStore, {
	pinnedItems: (store) =>
	new Set(store.prefsStorage.collections.pinnedNavItems),
	}),
	},
	}

	export default NavigationEntry
	diff --git a/src/components/navigation/navigation_pins.js b/src/components/navigation/navigation_pins.js
	index 698bf5d598..85f6fafeeb 100644
	--- a/src/components/navigation/navigation_pins.js
	+++ b/src/components/navigation/navigation_pins.js
	@@ -1,130 +1,130 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

	import {
	filterNavigation,
	getBookmarkFolderEntries,
	getListEntries,
	} from 'src/components/navigation/filter.js'
	import {
	ROOT_ITEMS,
	routeTo,
	TIMELINES,
	} from 'src/components/navigation/navigation.js'
	import StillImage from 'src/components/still-image/still-image.vue'

	import { useAnnouncementsStore } from 'src/stores/announcements'
	import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useListsStore } from 'src/stores/lists'
	-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
	+import { useSyncConfigStore } from 'src/stores/sync_config.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faBookmark,
	faCity,
	faComments,
	faEnvelope,
	faGlobe,
	faInfoCircle,
	faList,
	faStream,
	faUsers,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faUsers,
	faGlobe,
	faCity,
	faBookmark,
	faEnvelope,
	faComments,
	faBell,
	faInfoCircle,
	faStream,
	faList,
	)

	const NavPanel = {
	props: ['limit'],
	methods: {
	getRouteTo(item) {
	return routeTo(item, this.currentUser)
	},
	},
	components: {
	StillImage,
	},
	computed: {
	getters() {
	return this.$store.getters
	},
	...mapPiniaState(useListsStore, {
	lists: getListEntries,
	}),
	...mapPiniaState(useAnnouncementsStore, {
	supportsAnnouncements: (store) => store.supportsAnnouncements,
	}),
	...mapPiniaState(useBookmarkFoldersStore, {
	bookmarks: getBookmarkFolderEntries,
	}),
	- ...mapPiniaState(useServerSideStorageStore, {
	+ ...mapPiniaState(useSyncConfigStore, {
	pinnedItems: (store) =>
	new Set(store.prefsStorage.collections.pinnedNavItems),
	}),
	...mapPiniaState(useInstanceStore, ['privateMode', 'federating']),
	...mapPiniaState(useInstanceCapabilitiesStore, [
	'pleromaChatMessagesAvailable',
	'localBubble',
	]),
	...mapState({
	currentUser: (state) => state.users.currentUser,
	followRequestCount: (state) => state.api.followRequests.length,
	}),
	pinnedList() {
	if (!this.currentUser) {
	return filterNavigation(
	[
	{ ...TIMELINES.public, name: 'public' },
	{ ...TIMELINES.twkn, name: 'twkn' },
	{ ...ROOT_ITEMS.about, name: 'about' },
	],
	{
	hasChats: this.pleromaChatMessagesAvailable,
	hasAnnouncements: this.supportsAnnouncements,
	isFederating: this.federating,
	isPrivate: this.privateMode,
	currentUser: this.currentUser,
	supportsBubbleTimeline: this.localBubble,
	supportsBookmarkFolders: this.bookmarks,
	},
	)
	}
	return filterNavigation(
	[
	...Object.entries({ ...TIMELINES })
	.filter(([k]) => this.pinnedItems.has(k))
	.map(([k, v]) => ({ ...v, name: k })),
	...this.lists.filter((k) => this.pinnedItems.has(k.name)),
	...this.bookmarks.filter((k) => this.pinnedItems.has(k.name)),
	...Object.entries({ ...ROOT_ITEMS })
	.filter(([k]) => this.pinnedItems.has(k))
	.map(([k, v]) => ({ ...v, name: k })),
	],
	{
	hasChats: this.pleromaChatMessagesAvailable,
	hasAnnouncements: this.supportsAnnouncements,
	supportsBubbleTimeline: this.localBubble,
	supportsBookmarkFolders: this.bookmarks,
	isFederating: this.federating,
	isPrivate: this.privateMode,
	currentUser: this.currentUser,
	},
	).slice(0, this.limit)
	},
	},
	}

	export default NavPanel
	diff --git a/src/components/settings_modal/tabs/clutter_tab.js b/src/components/settings_modal/tabs/clutter_tab.js
	index 23e069d21d..f81ad7040c 100644
	--- a/src/components/settings_modal/tabs/clutter_tab.js
	+++ b/src/components/settings_modal/tabs/clutter_tab.js
	@@ -1,208 +1,208 @@
	import { mapActions, mapState } from 'pinia'
	import { v4 as uuidv4 } from 'uuid'

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import Select from 'src/components/select/select.vue'
	import BooleanSetting from '../helpers/boolean_setting.vue'
	import ChoiceSetting from '../helpers/choice_setting.vue'
	import HelpIndicator from '../helpers/help_indicator.vue'
	import IntegerSetting from '../helpers/integer_setting.vue'
	import SharedComputedObject from '../helpers/shared_computed_object.js'
	import UnitSetting from '../helpers/unit_setting.vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
	+import { useSyncConfigStore } from 'src/stores/sync_config.js'

	const ClutterTab = {
	components: {
	BooleanSetting,
	ChoiceSetting,
	UnitSetting,
	IntegerSetting,
	Checkbox,
	Select,
	HelpIndicator,
	},
	computed: {
	...SharedComputedObject(),
	...mapState(useInstanceCapabilitiesStore, ['shoutAvailable']),
	...mapState(useInstanceStore, {
	showFeaturesPanel: (store) => store.instanceIdentity.showFeaturesPanel,
	instanceSpecificPanelPresent: (store) =>
	store.instanceIdentity.showInstanceSpecificPanel &&
	store.instanceIdentity.instanceSpecificPanelContent,
	}),
	- ...mapState(useServerSideStorageStore, {
	+ ...mapState(useSyncConfigStore, {
	muteFilters: (store) =>
	Object.entries(store.prefsStorage.simple.muteFilters),
	muteFiltersObject: (store) => store.prefsStorage.simple.muteFilters,
	}),
	onMuteDefaultActionLv1: {
	get() {
	const value = this.$store.state.config.onMuteDefaultAction
	if (value === 'ask' \|\| value === 'forever') {
	return value
	} else {
	return 'temporarily'
	}
	},
	set(value) {
	let realValue = value
	if (value !== 'ask' && value !== 'forever') {
	realValue = '14d'
	}
	this.$store.dispatch('setOption', {
	name: 'onMuteDefaultAction',
	value: realValue,
	})
	},
	},
	onBlockDefaultActionLv1: {
	get() {
	const value = this.$store.state.config.onBlockDefaultAction
	if (value === 'ask' \|\| value === 'forever') {
	return value
	} else {
	return 'temporarily'
	}
	},
	set(value) {
	let realValue = value
	if (value !== 'ask' && value !== 'forever') {
	realValue = '14d'
	}
	this.$store.dispatch('setOption', {
	name: 'onBlockDefaultAction',
	value: realValue,
	})
	},
	},
	muteFiltersDraft() {
	return Object.entries(this.muteFiltersDraftObject)
	},
	muteFiltersExpired() {
	const now = Date.now()
	return Object.entries(this.muteFiltersDraftObject).filter(
	([, { expires }]) => expires != null && expires <= now,
	)
	},
	},
	methods: {
	- ...mapActions(useServerSideStorageStore, [
	+ ...mapActions(useSyncConfigStore, [
	'setPreference',
	'unsetPreference',
	- 'pushServerSideStorage',
	+ 'pushSyncConfig',
	]),
	getDatetimeLocal(timestamp) {
	const date = new Date(timestamp)
	const fmt = new Intl.NumberFormat('en-US', { minimumIntegerDigits: 2 })
	const datetime = [
	date.getFullYear(),
	'-',
	fmt.format(date.getMonth() + 1),
	'-',
	fmt.format(date.getDate()),
	'T',
	fmt.format(date.getHours()),
	':',
	fmt.format(date.getMinutes()),
	].join('')
	return datetime
	},
	checkRegexValid(id) {
	const filter = this.muteFiltersObject[id]
	if (filter.type !== 'regexp') return true
	if (filter.type !== 'user_regexp') return true
	const { value } = filter
	let valid = true
	try {
	new RegExp(value)
	} catch {
	valid = false
	console.error('Invalid RegExp: ' + value)
	}
	return valid
	},
	createFilter(
	filter = {
	type: 'word',
	value: '',
	name: 'New Filter',
	enabled: true,
	expires: null,
	hide: false,
	},
	) {
	const newId = uuidv4()

	filter.order = this.muteFilters.length + 2
	this.muteFiltersDraftObject[newId] = filter
	this.setPreference({ path: 'simple.muteFilters.' + newId, value: filter })
	- this.pushServerSideStorage()
	+ this.pushSyncConfig()
	},
	exportFilter(id) {
	this.exportedFilter = { ...this.muteFiltersDraftObject[id] }
	delete this.exportedFilter.order
	this.filterExporter.exportData()
	},
	importFilter() {
	this.filterImporter.importData()
	},
	copyFilter(id) {
	const filter = { ...this.muteFiltersDraftObject[id] }
	const newId = uuidv4()

	this.muteFiltersDraftObject[newId] = filter
	this.setPreference({ path: 'simple.muteFilters.' + newId, value: filter })
	- this.pushServerSideStorage()
	+ this.pushSyncConfig()
	},
	deleteFilter(id) {
	delete this.muteFiltersDraftObject[id]
	this.unsetPreference({ path: 'simple.muteFilters.' + id, value: null })
	- this.pushServerSideStorage()
	+ this.pushSyncConfig()
	},
	purgeExpiredFilters() {
	this.muteFiltersExpired.forEach(([id]) => {
	delete this.muteFiltersDraftObject[id]
	this.unsetPreference({ path: 'simple.muteFilters.' + id, value: null })
	})
	- this.pushServerSideStorage()
	+ this.pushSyncConfig()
	},
	updateFilter(id, field, value) {
	const filter = { ...this.muteFiltersDraftObject[id] }
	if (field === 'expires-never') {
	if (!value) {
	const offset = 1000 * 60 * 60 * 24 * 14 // 2 weeks
	const date = Date.now() + offset
	filter.expires = date
	} else {
	filter.expires = null
	}
	} else if (field === 'expires') {
	const parsed = Date.parse(value)
	filter.expires = parsed.valueOf()
	} else {
	filter[field] = value
	}
	this.muteFiltersDraftObject[id] = filter
	this.muteFiltersDraftDirty[id] = true
	},
	saveFilter(id) {
	this.setPreference({
	path: 'simple.muteFilters.' + id,
	value: this.muteFiltersDraftObject[id],
	})
	- this.pushServerSideStorage()
	+ this.pushSyncConfig()
	this.muteFiltersDraftDirty[id] = false
	},
	},
	// Updating nested properties
	watch: {
	replyVisibility() {
	this.$store.dispatch('queueFlushAll')
	},
	},
	}

	export default ClutterTab
	diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
	index 68efbe762d..a0544dd30c 100644
	--- a/src/components/settings_modal/tabs/filtering_tab.js
	+++ b/src/components/settings_modal/tabs/filtering_tab.js
	@@ -1,268 +1,268 @@
	import { cloneDeep } from 'lodash'
	import { mapActions, mapState } from 'pinia'
	import { v4 as uuidv4 } from 'uuid'

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import Select from 'src/components/select/select.vue'
	import BooleanSetting from '../helpers/boolean_setting.vue'
	import ChoiceSetting from '../helpers/choice_setting.vue'
	import HelpIndicator from '../helpers/help_indicator.vue'
	import IntegerSetting from '../helpers/integer_setting.vue'
	import SharedComputedObject from '../helpers/shared_computed_object.js'
	import UnitSetting from '../helpers/unit_setting.vue'

	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface'
	-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
	+import { useSyncConfigStore } from 'src/stores/sync_config.js'

	import {
	newExporter,
	newImporter,
	} from 'src/services/export_import/export_import.js'

	const SUPPORTED_TYPES = new Set(['word', 'regexp', 'user', 'user_regexp'])

	const FilteringTab = {
	data() {
	return {
	replyVisibilityOptions: ['all', 'following', 'self'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.reply_visibility_${mode}`),
	})),
	muteBlockLv1Options: ['ask', 'forever', 'temporarily'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`user_card.mute_block_${mode}`),
	})),
	muteFiltersDraftObject: cloneDeep(
	- useServerSideStorageStore().prefsStorage.simple.muteFilters,
	+ useSyncConfigStore().prefsStorage.simple.muteFilters,
	),
	muteFiltersDraftDirty: Object.fromEntries(
	Object.entries(
	- useServerSideStorageStore().prefsStorage.simple.muteFilters,
	+ useSyncConfigStore().prefsStorage.simple.muteFilters,
	).map(([k]) => [k, false]),
	),
	exportedFilter: null,
	filterImporter: newImporter({
	validator(parsed) {
	if (Array.isArray(parsed)) return false
	if (!SUPPORTED_TYPES.has(parsed.type)) return false
	return true
	},
	onImport: (data) => {
	const {
	enabled = true,
	expires = null,
	hide = false,
	name = '',
	value = '',
	} = data

	this.createFilter({
	enabled,
	expires,
	hide,
	name,
	value,
	})
	},
	onImportFailure(result) {
	console.error('Failure importing filter:', result)
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'settings.filter.import_failure',
	level: 'error',
	})
	},
	}),
	filterExporter: newExporter({
	filename: 'pleromafe_mute-filter',
	getExportedObject: () => this.exportedFilter,
	}),
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	UnitSetting,
	IntegerSetting,
	Checkbox,
	Select,
	HelpIndicator,
	},
	computed: {
	...SharedComputedObject(),
	- ...mapState(useServerSideStorageStore, {
	+ ...mapState(useSyncConfigStore, {
	muteFilters: (store) =>
	Object.entries(store.prefsStorage.simple.muteFilters),
	muteFiltersObject: (store) => store.prefsStorage.simple.muteFilters,
	}),
	...mapState(useInstanceCapabilitiesStore, ['blockExpiration']),
	onMuteDefaultActionLv1: {
	get() {
	const value = this.$store.state.config.onMuteDefaultAction
	if (value === 'ask' \|\| value === 'forever') {
	return value
	} else {
	return 'temporarily'
	}
	},
	set(value) {
	let realValue = value
	if (value !== 'ask' && value !== 'forever') {
	realValue = '14d'
	}
	this.$store.dispatch('setOption', {
	name: 'onMuteDefaultAction',
	value: realValue,
	})
	},
	},
	onBlockDefaultActionLv1: {
	get() {
	const value = this.$store.state.config.onBlockDefaultAction
	if (value === 'ask' \|\| value === 'forever') {
	return value
	} else {
	return 'temporarily'
	}
	},
	set(value) {
	let realValue = value
	if (value !== 'ask' && value !== 'forever') {
	realValue = '14d'
	}
	this.$store.dispatch('setOption', {
	name: 'onBlockDefaultAction',
	value: realValue,
	})
	},
	},
	muteFiltersDraft() {
	return Object.entries(this.muteFiltersDraftObject)
	},
	muteFiltersExpired() {
	const now = Date.now()
	return Object.entries(this.muteFiltersDraftObject).filter(
	([, { expires }]) => expires != null && expires <= now,
	)
	},
	},
	methods: {
	- ...mapActions(useServerSideStorageStore, [
	+ ...mapActions(useSyncConfigStore, [
	'setPreference',
	'unsetPreference',
	- 'pushServerSideStorage',
	+ 'pushSyncConfig',
	]),
	getDatetimeLocal(timestamp) {
	const date = new Date(timestamp)
	const fmt = new Intl.NumberFormat('en-US', { minimumIntegerDigits: 2 })
	const datetime = [
	date.getFullYear(),
	'-',
	fmt.format(date.getMonth() + 1),
	'-',
	fmt.format(date.getDate()),
	'T',
	fmt.format(date.getHours()),
	':',
	fmt.format(date.getMinutes()),
	].join('')
	return datetime
	},
	checkRegexValid(id) {
	const filter = this.muteFiltersObject[id]
	if (filter.type !== 'regexp') return true
	if (filter.type !== 'user_regexp') return true
	const { value } = filter
	let valid = true
	try {
	new RegExp(value)
	} catch {
	valid = false
	console.error('Invalid RegExp: ' + value)
	}
	return valid
	},
	createFilter(
	filter = {
	type: 'word',
	value: '',
	name: 'New Filter',
	enabled: true,
	expires: null,
	hide: false,
	},
	) {
	const newId = uuidv4()

	filter.order = this.muteFilters.length + 2
	this.muteFiltersDraftObject[newId] = filter
	this.setPreference({ path: 'simple.muteFilters.' + newId, value: filter })
	- this.pushServerSideStorage()
	+ this.pushSyncConfig()
	},
	exportFilter(id) {
	this.exportedFilter = { ...this.muteFiltersDraftObject[id] }
	delete this.exportedFilter.order
	this.filterExporter.exportData()
	},
	importFilter() {
	this.filterImporter.importData()
	},
	copyFilter(id) {
	const filter = { ...this.muteFiltersDraftObject[id] }
	const newId = uuidv4()

	this.muteFiltersDraftObject[newId] = filter
	this.setPreference({ path: 'simple.muteFilters.' + newId, value: filter })
	- this.pushServerSideStorage()
	+ this.pushSyncConfig()
	},
	deleteFilter(id) {
	delete this.muteFiltersDraftObject[id]
	this.unsetPreference({ path: 'simple.muteFilters.' + id, value: null })
	- this.pushServerSideStorage()
	+ this.pushSyncConfig()
	},
	purgeExpiredFilters() {
	this.muteFiltersExpired.forEach(([id]) => {
	delete this.muteFiltersDraftObject[id]
	this.unsetPreference({ path: 'simple.muteFilters.' + id, value: null })
	})
	- this.pushServerSideStorage()
	+ this.pushSyncConfig()
	},
	updateFilter(id, field, value) {
	const filter = { ...this.muteFiltersDraftObject[id] }
	if (field === 'expires-never') {
	if (!value) {
	const offset = 1000 * 60 * 60 * 24 * 14 // 2 weeks
	const date = Date.now() + offset
	filter.expires = date
	} else {
	filter.expires = null
	}
	} else if (field === 'expires') {
	const parsed = Date.parse(value)
	filter.expires = parsed.valueOf()
	} else {
	filter[field] = value
	}
	this.muteFiltersDraftObject[id] = filter
	this.muteFiltersDraftDirty[id] = true
	},
	saveFilter(id) {
	this.setPreference({
	path: 'simple.muteFilters.' + id,
	value: this.muteFiltersDraftObject[id],
	})
	- this.pushServerSideStorage()
	+ this.pushSyncConfig()
	this.muteFiltersDraftDirty[id] = false
	},
	},
	// Updating nested properties
	watch: {
	replyVisibility() {
	this.$store.dispatch('queueFlushAll')
	},
	},
	}

	export default FilteringTab
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index fbea34b4b5..7868642443 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,677 +1,675 @@
	import { unescape as ldUnescape, uniqBy } from 'lodash'

	import MentionLink from 'src/components/mention_link/mention_link.vue'
	import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import StatusActionButtons from 'src/components/status_action_buttons/status_action_buttons.vue'
	import { muteFilterHits } from '../../services/status_parser/status_parser.js'
	import {
	highlightClass,
	highlightStyle,
	} from '../../services/user_highlighter/user_highlighter.js'
	import AvatarList from '../avatar_list/avatar_list.vue'
	import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	import StatusContent from '../status_content/status_content.vue'
	import StatusPopover from '../status_popover/status_popover.vue'
	import Timeago from '../timeago/timeago.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import UserLink from '../user_link/user_link.vue'
	import UserListPopover from '../user_list_popover/user_list_popover.vue'
	import UserPopover from '../user_popover/user_popover.vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
	+import { useSyncConfigStore } from 'src/stores/sync_config.js'

	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faAngleDoubleRight,
	faChevronDown,
	faChevronUp,
	faEllipsisH,
	faEnvelope,
	faEye,
	faEyeSlash,
	faGlobe,
	faIgloo,
	faLock,
	faLockOpen,
	faPlay,
	faPlusSquare,
	faReply,
	faRetweet,
	faSmileBeam,
	faStar,
	faThumbtack,
	faTimes,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faEnvelope,
	faGlobe,
	faIgloo,
	faLock,
	faLockOpen,
	faTimes,
	faRetweet,
	faReply,
	faPlusSquare,
	faStar,
	faSmileBeam,
	faEllipsisH,
	faEyeSlash,
	faEye,
	faThumbtack,
	faChevronUp,
	faChevronDown,
	faAngleDoubleRight,
	faPlay,
	)

	const camelCase = (name) => name.charAt(0).toUpperCase() + name.slice(1)

	const controlledOrUncontrolledGetters = (list) =>
	list.reduce((res, name) => {
	const camelized = camelCase(name)
	const toggle = `controlledToggle${camelized}`
	const controlledName = `controlled${camelized}`
	const uncontrolledName = `uncontrolled${camelized}`
	res[name] = function () {
	return (this.$data[toggle] !== undefined \|\|
	this.$props[toggle] !== undefined) &&
	this[toggle]
	? this[controlledName]
	: this[uncontrolledName]
	}
	return res
	}, {})

	const controlledOrUncontrolledToggle = (obj, name) => {
	const camelized = camelCase(name)
	const toggle = `controlledToggle${camelized}`
	const uncontrolledName = `uncontrolled${camelized}`
	if (obj[toggle]) {
	obj[toggle]()
	} else {
	obj[uncontrolledName] = !obj[uncontrolledName]
	}
	}

	const controlledOrUncontrolledSet = (obj, name, val) => {
	const camelized = camelCase(name)
	const set = `controlledSet${camelized}`
	const uncontrolledName = `uncontrolled${camelized}`
	if (obj[set]) {
	obj[set](val)
	} else {
	obj[uncontrolledName] = val
	}
	}

	const Status = {
	name: 'Status',
	components: {
	PostStatusForm,
	UserAvatar,
	AvatarList,
	Timeago,
	StatusPopover,
	UserListPopover,
	EmojiReactions,
	StatusContent,
	RichContent,
	MentionLink,
	MentionsLine,
	UserPopover,
	UserLink,
	StatusActionButtons,
	},
	props: [
	'statusoid',
	'expandable',
	'inConversation',
	'focused',
	'highlight',
	'compact',
	'replies',
	'isPreview',
	'noHeading',
	'inlineExpanded',
	'showPinned',
	'inProfile',
	'profileUserId',
	'inQuote',

	'simpleTree',
	'controlledThreadDisplayStatus',
	'controlledToggleThreadDisplay',
	'showOtherRepliesAsButton',

	'controlledShowingTall',
	'controlledToggleShowingTall',
	'controlledExpandingSubject',
	'controlledToggleExpandingSubject',
	'controlledShowingLongSubject',
	'controlledToggleShowingLongSubject',
	'controlledReplying',
	'controlledToggleReplying',
	'controlledMediaPlaying',
	'controlledSetMediaPlaying',
	'dive',
	],
	emits: ['interacted'],
	data() {
	return {
	uncontrolledReplying: false,
	unmuted: false,
	userExpanded: false,
	uncontrolledMediaPlaying: [],
	suspendable: true,
	error: null,
	headTailLinks: null,
	displayQuote: !this.inQuote,
	}
	},
	computed: {
	...controlledOrUncontrolledGetters(['replying', 'mediaPlaying']),
	showReasonMutedThread() {
	return (
	(this.status.thread_muted \|\|
	(this.status.reblog && this.status.reblog.thread_muted)) &&
	!this.inConversation
	)
	},
	repeaterClass() {
	const user = this.statusoid.user
	return highlightClass(user)
	},
	userClass() {
	const user = this.retweet
	? this.statusoid.retweeted_status.user
	: this.statusoid.user
	return highlightClass(user)
	},
	deleted() {
	return this.statusoid.deleted
	},
	repeaterStyle() {
	const user = this.statusoid.user
	const highlight = this.mergedConfig.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	userStyle() {
	if (this.noHeading) return
	const user = this.retweet
	? this.statusoid.retweeted_status.user
	: this.statusoid.user
	const highlight = this.mergedConfig.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	userProfileLink() {
	return this.generateUserProfileLink(
	this.status.user.id,
	this.status.user.screen_name,
	)
	},
	replyProfileLink() {
	if (this.isReply) {
	const user = this.$store.getters.findUser(
	this.status.in_reply_to_user_id,
	)
	// FIXME Why user not found sometimes???
	return user ? user.statusnet_profile_url : 'NOT_FOUND'
	}
	},
	retweet() {
	return !!this.statusoid.retweeted_status
	},
	retweeterUser() {
	return this.statusoid.user
	},
	retweeter() {
	return this.statusoid.user.name \|\| this.statusoid.user.screen_name_ui
	},
	retweeterHtml() {
	return this.statusoid.user.name
	},
	retweeterProfileLink() {
	return this.generateUserProfileLink(
	this.statusoid.user.id,
	this.statusoid.user.screen_name,
	)
	},
	status() {
	if (this.retweet) {
	return this.statusoid.retweeted_status
	} else {
	return this.statusoid
	}
	},
	statusFromGlobalRepository() {
	// NOTE: Consider to replace status with statusFromGlobalRepository
	return this.$store.state.statuses.allStatusesObject[this.status.id]
	},
	loggedIn() {
	return !!this.currentUser
	},
	muteFilterHits() {
	return muteFilterHits(
	- Object.values(
	- useServerSideStorageStore().prefsStorage.simple.muteFilters,
	- ),
	+ Object.values(useSyncConfigStore().prefsStorage.simple.muteFilters),
	this.status,
	)
	},
	botStatus() {
	return this.status.user.actor_type === 'Service'
	},
	showActorTypeIndicator() {
	return !this.hideBotIndication
	},
	sensitiveStatus() {
	return this.status.nsfw
	},
	mentionsLine() {
	if (!this.headTailLinks) return []
	const writtenSet = new Set(
	this.headTailLinks.writtenMentions.map((_) => _.url),
	)
	return this.status.attentions
	.filter((attn) => {
	// no reply user
	return (
	attn.id !== this.status.in_reply_to_user_id &&
	// no self-replies
	attn.statusnet_profile_url !==
	this.status.user.statusnet_profile_url &&
	// don't include if mentions is written
	!writtenSet.has(attn.statusnet_profile_url)
	)
	})
	.map((attn) => ({
	url: attn.statusnet_profile_url,
	content: attn.screen_name,
	userId: attn.id,
	}))
	},
	hasMentionsLine() {
	return this.mentionsLine.length > 0
	},
	muteReasons() {
	return [
	this.userIsMuted ? 'user' : null,
	this.status.thread_muted ? 'thread' : null,
	this.muteFilterHits.length > 0 ? 'filtered' : null,
	this.muteBotStatuses && this.botStatus ? 'bot' : null,
	this.muteSensitiveStatuses && this.sensitiveStatus ? 'nsfw' : null,
	].filter((_) => _)
	},
	muteLocalized() {
	if (this.muteReasons.length === 0) return null
	const mainReason = () => {
	switch (this.muteReasons[0]) {
	case 'user':
	return this.$t('status.muted_user')
	case 'thread':
	return this.$t('status.thread_muted')
	case 'filtered':
	return this.$t(
	'status.muted_filters',
	{
	name: this.muteFilterHits[0].name,
	filterMore: this.muteFilterHits.length - 1,
	},
	this.muteFilterHits.length,
	)
	case 'bot':
	return this.$t('status.bot_muted')
	case 'nsfw':
	return this.$t('status.sensitive_muted')
	}
	}
	if (this.muteReasons.length > 1) {
	return this.$t(
	'status.multi_reason_mute',
	{
	main: mainReason(),
	numReasonsMore: this.muteReasons.length - 1,
	},
	this.muteReasons.length - 1,
	)
	} else {
	return mainReason()
	}
	},
	muted() {
	if (this.statusoid.user.id === this.currentUser.id) return false
	return !this.unmuted && !this.shouldNotMute && this.muteReasons.length > 0
	},
	userIsMuted() {
	if (this.statusoid.user.id === this.currentUser.id) return false
	const { status } = this
	const { reblog } = status
	const relationship = this.$store.getters.relationship(status.user.id)
	const relationshipReblog =
	reblog && this.$store.getters.relationship(reblog.user.id)
	return (
	(status.muted && !status.thread_muted) \|\|
	// Reprööt of a muted post according to BE
	(reblog && reblog.muted && !reblog.thread_muted) \|\|
	// Muted user
	relationship.muting \|\|
	// Muted user of a reprööt
	(relationshipReblog && relationshipReblog.muting)
	)
	},
	shouldNotMute() {
	if (this.isFocused) return true
	const { status } = this
	const { reblog } = status
	return (
	((this.inProfile &&
	// Don't mute user's posts on user timeline (except reblogs)
	((!reblog && status.user.id === this.profileUserId) \|\|
	// Same as above but also allow self-reblogs
	(reblog && reblog.user.id === this.profileUserId))) \|\|
	// Don't mute statuses in muted conversation when said conversation is opened
	(this.inConversation && status.thread_muted)) &&
	// No excuses if post has muted words
	!this.muteFilterHits.length > 0
	)
	},
	hideMutedUsers() {
	return this.mergedConfig.hideMutedPosts
	},
	hideMutedThreads() {
	return this.mergedConfig.hideMutedThreads
	},
	hideFilteredStatuses() {
	return this.mergedConfig.hideFilteredStatuses
	},
	hideWordFilteredPosts() {
	return this.mergedConfig.hideWordFilteredPosts
	},
	hideStatus() {
	return (
	!this.shouldNotMute &&
	((this.muted && this.hideFilteredStatuses) \|\|
	(this.userIsMuted && this.hideMutedUsers) \|\|
	(this.status.thread_muted && this.hideMutedThreads) \|\|
	(this.muteFilterHits.length > 0 && this.hideWordFilteredPosts) \|\|
	this.muteFilterHits.some((x) => x.hide))
	)
	},
	isFocused() {
	// retweet or root of an expanded conversation
	if (this.focused) {
	return true
	} else if (!this.inConversation) {
	return false
	}
	// use conversation highlight only when in conversation
	return this.status.id === this.highlight
	},
	isReply() {
	return !!(
	this.status.in_reply_to_status_id && this.status.in_reply_to_user_id
	)
	},
	replyToName() {
	if (this.status.in_reply_to_screen_name) {
	return this.status.in_reply_to_screen_name
	} else {
	const user = this.$store.getters.findUser(
	this.status.in_reply_to_user_id,
	)
	return user && user.screen_name_ui
	}
	},
	replySubject() {
	if (!this.status.summary) return ''
	const decodedSummary = ldUnescape(this.status.summary)
	const behavior = this.mergedConfig.subjectLineBehavior
	const startsWithRe = decodedSummary.match(/^re[: ]/i)
	if ((behavior !== 'noop' && startsWithRe) \|\| behavior === 'masto') {
	return decodedSummary
	} else if (behavior === 'email') {
	return 're: '.concat(decodedSummary)
	} else if (behavior === 'noop') {
	return ''
	}
	},
	combinedFavsAndRepeatsUsers() {
	// Use the status from the global status repository since favs and repeats are saved in it
	const combinedUsers = [].concat(
	this.statusFromGlobalRepository.favoritedBy,
	this.statusFromGlobalRepository.rebloggedBy,
	)
	return uniqBy(combinedUsers, 'id')
	},
	tags() {
	return this.status.tags
	.filter((tagObj) => Object.hasOwn(tagObj, 'name'))
	.map((tagObj) => tagObj.name)
	.join(' ')
	},
	hidePostStats() {
	return this.mergedConfig.hidePostStats
	},
	shouldDisplayFavsAndRepeats() {
	return (
	!this.hidePostStats &&
	this.isFocused &&
	(this.combinedFavsAndRepeatsUsers.length > 0 \|\|
	this.statusFromGlobalRepository.quotes_count)
	)
	},
	muteBotStatuses() {
	return this.mergedConfig.muteBotStatuses
	},
	muteSensitiveStatuses() {
	return this.mergedConfig.muteSensitiveStatuses
	},
	hideBotIndication() {
	return this.mergedConfig.hideBotIndication
	},
	currentUser() {
	return this.$store.state.users.currentUser
	},
	mergedConfig() {
	return this.$store.getters.mergedConfig
	},
	isSuspendable() {
	return !this.replying && this.mediaPlaying.length === 0
	},
	inThreadForest() {
	return !!this.controlledThreadDisplayStatus
	},
	threadShowing() {
	return this.controlledThreadDisplayStatus === 'showing'
	},
	visibilityLocalized() {
	return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
	},
	isEdited() {
	return this.status.edited_at !== null
	},
	editingAvailable() {
	return useInstanceCapabilitiesStore().editingAvailable
	},
	hasVisibleQuote() {
	return this.status.quote_url && this.status.quote_visible
	},
	hasInvisibleQuote() {
	return this.status.quote_url && !this.status.quote_visible
	},
	quotedStatus() {
	return this.status.quote_id
	? this.$store.state.statuses.allStatusesObject[this.status.quote_id]
	: undefined
	},
	shouldDisplayQuote() {
	return this.quotedStatus && this.displayQuote
	},
	scrobblePresent() {
	if (this.mergedConfig.hideScrobbles) return false
	if (!this.status.user?.latestScrobble) return false
	const value = this.mergedConfig.hideScrobblesAfter.match(/\d+/gs)[0]
	const unit = this.mergedConfig.hideScrobblesAfter.match(/\D+/gs)[0]
	let multiplier = 60 * 1000 // minutes is smallest unit
	switch (unit) {
	case 'm':
	break
	case 'h':
	multiplier *= 60 // hour
	break
	case 'd':
	multiplier *= 60 // hour
	multiplier *= 24 // day
	break
	}
	const maxAge = Number(value) * multiplier
	const createdAt = Date.parse(this.status.user.latestScrobble.created_at)
	const age = Date.now() - createdAt
	if (age > maxAge) return false
	return this.status.user.latestScrobble.artist
	},
	scrobble() {
	return this.status.user?.latestScrobble
	},
	},
	methods: {
	visibilityIcon(visibility) {
	switch (visibility) {
	case 'private':
	return 'lock'
	case 'unlisted':
	return 'lock-open'
	case 'direct':
	return 'envelope'
	case 'local':
	return 'igloo'
	default:
	return 'globe'
	}
	},
	showError(error) {
	this.error = error
	},
	clearError() {
	this.$emit('interacted')
	this.error = undefined
	},
	toggleReplying() {
	this.$emit('interacted')
	if (this.replying) {
	this.$refs.postStatusForm.requestClose()
	} else {
	this.doToggleReplying()
	}
	},
	doToggleReplying() {
	controlledOrUncontrolledToggle(this, 'replying')
	},
	gotoOriginal(id) {
	if (this.inConversation) {
	this.$emit('goto', id)
	}
	},
	toggleExpanded() {
	this.$emit('toggleExpanded')
	},
	toggleMute() {
	this.unmuted = !this.unmuted
	},
	toggleUserExpanded() {
	this.userExpanded = !this.userExpanded
	},
	generateUserProfileLink(id, name) {
	return generateProfileLink(
	id,
	name,
	useInstanceStore().restrictedNicknames,
	)
	},
	addMediaPlaying(id) {
	controlledOrUncontrolledSet(
	this,
	'mediaPlaying',
	this.mediaPlaying.concat(id),
	)
	},
	removeMediaPlaying(id) {
	controlledOrUncontrolledSet(
	this,
	'mediaPlaying',
	this.mediaPlaying.filter((mediaId) => mediaId !== id),
	)
	},
	setHeadTailLinks(headTailLinks) {
	this.headTailLinks = headTailLinks
	},
	toggleThreadDisplay() {
	this.controlledToggleThreadDisplay()
	},
	scrollIfHighlighted(highlightId) {
	if (this.$el.getBoundingClientRect == null) return
	const id = highlightId
	if (this.status.id === id) {
	const rect = this.$el.getBoundingClientRect()
	if (rect.top < 100) {
	// Post is above screen, match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.height >= window.innerHeight - 50) {
	// Post we want to see is taller than screen so match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.bottom > window.innerHeight - 50) {
	// Post is below screen, match its bottom to screen bottom
	window.scrollBy(0, rect.bottom - window.innerHeight + 50)
	}
	}
	},
	toggleDisplayQuote() {
	if (this.shouldDisplayQuote) {
	this.displayQuote = false
	} else if (!this.quotedStatus) {
	this.$store.dispatch('fetchStatus', this.status.quote_id).then(() => {
	this.displayQuote = true
	})
	} else {
	this.displayQuote = true
	}
	},
	},
	watch: {
	highlight: function (id) {
	this.scrollIfHighlighted(id)
	},
	'status.repeat_num': function (num) {
	// refetch repeats when repeat_num is changed in any way
	if (
	this.isFocused &&
	this.statusFromGlobalRepository.rebloggedBy &&
	this.statusFromGlobalRepository.rebloggedBy.length !== num
	) {
	this.$store.dispatch('fetchRepeats', this.status.id)
	}
	},
	'status.fave_num': function (num) {
	// refetch favs when fave_num is changed in any way
	if (
	this.isFocused &&
	this.statusFromGlobalRepository.favoritedBy &&
	this.statusFromGlobalRepository.favoritedBy.length !== num
	) {
	this.$store.dispatch('fetchFavs', this.status.id)
	}
	},
	isSuspendable: function (val) {
	this.suspendable = val
	},
	},
	}

	export default Status
	diff --git a/src/components/status_action_buttons/status_action_buttons.js b/src/components/status_action_buttons/status_action_buttons.js
	index 2e08797c80..9938e63823 100644
	--- a/src/components/status_action_buttons/status_action_buttons.js
	+++ b/src/components/status_action_buttons/status_action_buttons.js
	@@ -1,150 +1,150 @@
	import { mapState } from 'pinia'

	import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
	import Popover from 'src/components/popover/popover.vue'
	import ActionButtonContainer from './action_button_container.vue'
	import { BUTTONS } from './buttons_definitions.js'

	-import { useServerSideStorageStore } from 'src/stores/serverSideStorage.js'
	+import { useSyncConfigStore } from 'src/stores/sync_config.js'

	import genRandomSeed from 'src/services/random_seed/random_seed.service.js'

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

	library.add(faEllipsisH)

	const StatusActionButtons = {
	props: ['status', 'replying'],
	emits: ['toggleReplying', 'interacted'],
	data() {
	return {
	showPin: false,
	showingConfirmDialog: false,
	currentConfirmTitle: '',
	currentConfirmOkText: '',
	currentConfirmCancelText: '',
	currentConfirmAction: () => {
	/* no-op */
	},
	randomSeed: genRandomSeed(),
	}
	},
	components: {
	Popover,
	ConfirmModal,
	ActionButtonContainer,
	},
	computed: {
	- ...mapState(useServerSideStorageStore, {
	+ ...mapState(useSyncConfigStore, {
	pinnedItems: (store) =>
	new Set(store.prefsStorage.collections.pinnedStatusActions),
	}),
	buttons() {
	return BUTTONS.filter((x) => (x.if ? x.if(this.funcArg) : true))
	},
	quickButtons() {
	return this.buttons.filter((x) => this.pinnedItems.has(x.name))
	},
	extraButtons() {
	return this.buttons.filter((x) => !this.pinnedItems.has(x.name))
	},
	currentUser() {
	return this.$store.state.users.currentUser
	},
	funcArg() {
	return {
	status: this.status,
	replying: this.replying,
	emit: this.$emit,
	dispatch: this.$store.dispatch,
	state: this.$store.state,
	getters: this.$store.getters,
	router: this.$router,
	currentUser: this.currentUser,
	loggedIn: !!this.currentUser,
	}
	},
	triggerAttrs() {
	return {
	title: this.$t('status.more_actions'),
	'aria-controls': `popup-menu-${this.randomSeed}`,
	'aria-haspopup': 'menu',
	}
	},
	},
	methods: {
	doAction(button) {
	if (button.confirm?.(this.funcArg)) {
	// TODO move to action_button
	this.currentConfirmTitle = this.$t(
	button.confirmStrings(this.funcArg).title,
	)
	this.currentConfirmOkText = this.$t(
	button.confirmStrings(this.funcArg).confirm,
	)
	this.currentConfirmCancelText = this.$t(
	button.confirmStrings(this.funcArg).cancel,
	)
	this.currentConfirmBody = this.$t(
	button.confirmStrings(this.funcArg).body,
	)
	this.currentConfirmAction = () => {
	this.showingConfirmDialog = false
	this.doActionReal(button)
	}
	this.showingConfirmDialog = true
	} else {
	this.doActionReal(button)
	}
	},
	doActionReal(button) {
	button
	.action?.(this.funcArg)
	.then(() => this.$emit('onSuccess'))
	.catch((err) => this.$emit('onError', err.error.error))
	},
	onExtraClose() {
	this.showPin = false
	},
	isPinned(button) {
	return this.pinnedItems.has(button.name)
	},
	unpin(button) {
	- useServerSideStorageStore().removeCollectionPreference({
	+ useSyncConfigStore().removeCollectionPreference({
	path: 'collections.pinnedStatusActions',
	value: button.name,
	})
	- useServerSideStorageStore().pushServerSideStorage()
	+ useSyncConfigStore().pushSyncConfig()
	},
	pin(button) {
	- useServerSideStorageStore().addCollectionPreference({
	+ useSyncConfigStore().addCollectionPreference({
	path: 'collections.pinnedStatusActions',
	value: button.name,
	})
	- useServerSideStorageStore().pushServerSideStorage()
	+ useSyncConfigStore().pushSyncConfig()
	},
	getComponent(button) {
	if (!this.$store.state.users.currentUser && button.anonLink) {
	return 'a'
	} else if (button.action == null && button.link != null) {
	return 'a'
	} else {
	return 'button'
	}
	},
	getClass(button) {
	return {
	[button.name + '-button']: true,
	disabled: button.interactive
	? !button.interactive(this.funcArg)
	: false,
	'-pin-edit': this.showPin,
	'-dropdown': button.dropdown?.(),
	'-active': button.active?.(this.funcArg),
	}
	},
	},
	}

	export default StatusActionButtons
	diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js
	index a8bc606769..78aaa79e84 100644
	--- a/src/components/update_notification/update_notification.js
	+++ b/src/components/update_notification/update_notification.js
	@@ -1,89 +1,89 @@
	import Modal from 'src/components/modal/modal.vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	-import { useServerSideStorageStore } from 'src/stores/serverSideStorage.js'
	+import { useSyncConfigStore } from 'src/stores/sync_config.js'

	import pleromaTanFoxMask from 'src/assets/pleromatan_apology_fox_mask.png'
	import pleromaTanMask from 'src/assets/pleromatan_apology_mask.png'

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

	library.add(faTimes)

	export const CURRENT_UPDATE_COUNTER = 1

	const pleromaTan = '/static/pleromatan_apology.png'
	const pleromaTanFox = '/static/pleromatan_apology_fox.png'

	const UpdateNotification = {
	data() {
	return {
	showingImage: false,
	pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox,
	showingMore: false,
	}
	},
	components: {
	Modal,
	},
	computed: {
	pleromaTanStyles() {
	const mask =
	this.pleromaTanVariant === pleromaTan
	? pleromaTanMask
	: pleromaTanFoxMask
	return {
	'shape-outside': 'url(' + mask + ')',
	}
	},
	shouldShow() {
	return (
	!useInstanceStore().disableUpdateNotification &&
	this.$store.state.users.currentUser &&
	- useServerSideStorageStore().flagStorage.updateCounter <
	+ useSyncConfigStore().flagStorage.updateCounter <
	CURRENT_UPDATE_COUNTER &&
	- !useServerSideStorageStore().prefsStorage.simple.dontShowUpdateNotifs
	+ !useSyncConfigStore().prefsStorage.simple.dontShowUpdateNotifs
	)
	},
	},
	methods: {
	toggleShow() {
	this.showingMore = !this.showingMore
	},
	neverShowAgain() {
	this.toggleShow()
	- useServerSideStorageStore().setFlag({
	+ useSyncConfigStore().setFlag({
	flag: 'updateCounter',
	value: CURRENT_UPDATE_COUNTER,
	})
	- useServerSideStorageStore().setPreference({
	+ useSyncConfigStore().setPreference({
	path: 'simple.dontShowUpdateNotifs',
	value: true,
	})
	- useServerSideStorageStore().pushServerSideStorage()
	+ useSyncConfigStore().pushSyncConfig()
	},
	dismiss() {
	- useServerSideStorageStore().setFlag({
	+ useSyncConfigStore().setFlag({
	flag: 'updateCounter',
	value: CURRENT_UPDATE_COUNTER,
	})
	- useServerSideStorageStore().pushServerSideStorage()
	+ useSyncConfigStore().pushSyncConfig()
	},
	},
	mounted() {
	this.contentHeightNoImage = this.$refs.animatedText.scrollHeight

	// Workaround to get the text height only after mask loaded. A bit hacky.
	const newImg = new Image()
	newImg.onload = () => {
	setTimeout(() => {
	this.showingImage = true
	}, 100)
	}
	newImg.src =
	this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask
	},
	}

	export default UpdateNotification
	diff --git a/src/modules/notifications.js b/src/modules/notifications.js
	index cb3d430dbd..9507177a2b 100644
	--- a/src/modules/notifications.js
	+++ b/src/modules/notifications.js
	@@ -1,189 +1,187 @@
	import apiService from '../services/api/api.service.js'
	import {
	closeAllDesktopNotifications,
	closeDesktopNotification,
	} from '../services/desktop_notification_utils/desktop_notification_utils.js'
	import {
	isStatusNotification,
	isValidNotification,
	maybeShowNotification,
	} from '../services/notification_utils/notification_utils.js'

	import { useReportsStore } from 'src/stores/reports.js'
	-import { useServerSideStorageStore } from 'src/stores/serverSideStorage.js'
	+import { useSyncConfigStore } from 'src/stores/sync_config.js'

	const emptyNotifications = () => ({
	desktopNotificationSilence: true,
	maxId: 0,
	minId: Number.POSITIVE_INFINITY,
	data: [],
	idStore: {},
	loading: false,
	})

	export const defaultState = () => ({
	...emptyNotifications(),
	})

	export const notifications = {
	state: defaultState(),
	mutations: {
	addNewNotifications(state, { notifications }) {
	notifications.forEach((notification) => {
	state.data.push(notification)
	state.idStore[notification.id] = notification
	})
	},
	clearNotifications(state) {
	const blankState = defaultState()
	Object.keys(state).forEach((k) => {
	state[k] = blankState[k]
	})
	},
	updateNotificationsMinMaxId(state, id) {
	state.maxId = id > state.maxId ? id : state.maxId
	state.minId = id < state.minId ? id : state.minId
	},
	setNotificationsLoading(state, { value }) {
	state.loading = value
	},
	setNotificationsSilence(state, { value }) {
	state.desktopNotificationSilence = value
	},
	markNotificationsAsSeen(state) {
	state.data.forEach((notification) => {
	notification.seen = true
	})
	},
	markSingleNotificationAsSeen(state, { id }) {
	const notification = state.idStore[id]
	if (notification) notification.seen = true
	},
	dismissNotification(state, { id }) {
	state.data = state.data.filter((n) => n.id !== id)
	delete state.idStore[id]
	},
	updateNotification(state, { id, updater }) {
	const notification = state.idStore[id]
	notification && updater(notification)
	},
	},
	actions: {
	addNewNotifications(store, { notifications }) {
	const { commit, dispatch, state, rootState } = store
	const validNotifications = notifications.filter((notification) => {
	// If invalid notification, update ids but don't add it to store
	if (!isValidNotification(notification)) {
	console.error('Invalid notification:', notification)
	commit('updateNotificationsMinMaxId', notification.id)
	return false
	}
	return true
	})

	const statusNotifications = validNotifications.filter(
	(notification) =>
	isStatusNotification(notification.type) && notification.status,
	)

	// Synchronous commit to add all the statuses
	commit('addNewStatuses', {
	statuses: statusNotifications.map(
	(notification) => notification.status,
	),
	})

	// Update references to statuses in notifications to ones in the store
	statusNotifications.forEach((notification) => {
	const id = notification.status.id
	const referenceStatus = rootState.statuses.allStatusesObject[id]

	if (referenceStatus) {
	notification.status = referenceStatus
	}
	})

	validNotifications.forEach((notification) => {
	if (notification.type === 'pleroma:report') {
	useReportsStore().addReport(notification.report)
	}

	if (notification.type === 'pleroma:emoji_reaction') {
	dispatch('fetchEmojiReactionsBy', notification.status.id)
	}

	// Only add a new notification if we don't have one for the same action
	if (!Object.hasOwn(state.idStore, notification.id)) {
	commit('updateNotificationsMinMaxId', notification.id)
	commit('addNewNotifications', { notifications: [notification] })

	maybeShowNotification(
	store,
	- Object.values(
	- useServerSideStorageStore().prefsStorage.simple.muteFilters,
	- ),
	+ Object.values(useSyncConfigStore().prefsStorage.simple.muteFilters),
	notification,
	)
	} else if (notification.seen) {
	state.idStore[notification.id].seen = true
	}
	})
	},
	notificationClicked({ state, dispatch }, { id }) {
	const notification = state.idStore[id]
	const { type, seen } = notification

	if (!seen) {
	switch (type) {
	case 'mention':
	case 'pleroma:report':
	case 'follow_request':
	break
	default:
	dispatch('markSingleNotificationAsSeen', { id })
	}
	}
	},
	setNotificationsLoading({ commit }, { value }) {
	commit('setNotificationsLoading', { value })
	},
	setNotificationsSilence({ commit }, { value }) {
	commit('setNotificationsSilence', { value })
	},
	markNotificationsAsSeen({ rootState, state, commit }) {
	commit('markNotificationsAsSeen')
	apiService
	.markNotificationsAsSeen({
	id: state.maxId,
	credentials: rootState.users.currentUser.credentials,
	})
	.then(() => {
	closeAllDesktopNotifications(rootState)
	})
	},
	markSingleNotificationAsSeen({ rootState, commit }, { id }) {
	commit('markSingleNotificationAsSeen', { id })
	apiService
	.markNotificationsAsSeen({
	single: true,
	id,
	credentials: rootState.users.currentUser.credentials,
	})
	.then(() => {
	closeDesktopNotification(rootState, { id })
	})
	},
	dismissNotificationLocal({ commit }, { id }) {
	commit('dismissNotification', { id })
	},
	dismissNotification({ rootState, commit }, { id }) {
	commit('dismissNotification', { id })
	rootState.api.backendInteractor.dismissNotification({ id })
	},
	updateNotification({ commit }, { id, updater }) {
	commit('updateNotification', { id, updater })
	},
	},
	}

	export default notifications
	diff --git a/src/modules/users.js b/src/modules/users.js
	index b0febcd3a5..ea2a0ccb41 100644
	--- a/src/modules/users.js
	+++ b/src/modules/users.js
	@@ -1,844 +1,843 @@
	import {
	compact,
	concat,
	each,
	isArray,
	last,
	map,
	mergeWith,
	uniq,
	} from 'lodash'

	import apiService from '../services/api/api.service.js'
	import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
	import oauthApi from '../services/new_api/oauth.js'
	import {
	registerPushNotifications,
	unregisterPushNotifications,
	} from '../services/sw/sw.js'
	import {
	windowHeight,
	windowWidth,
	} from '../services/window_utils/window_utils'

	import { useEmojiStore } from 'src/stores/emoji.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
	+import { useSyncConfigStore } from 'src/stores/sync_config.js'

	import { declarations } from 'src/modules/config_declaration'

	// TODO: Unify with mergeOrAdd in statuses.js
	export const mergeOrAdd = (arr, obj, item) => {
	if (!item) {
	return false
	}
	const oldItem = obj[item.id]
	if (oldItem) {
	// We already have this, so only merge the new info.
	mergeWith(oldItem, item, mergeArrayLength)
	return { item: oldItem, new: false }
	} else {
	// This is a new item, prepare it
	arr.push(item)
	obj[item.id] = item
	return { item, new: true }
	}
	}

	const mergeArrayLength = (oldValue, newValue) => {
	if (isArray(oldValue) && isArray(newValue)) {
	oldValue.length = newValue.length
	return mergeWith(oldValue, newValue, mergeArrayLength)
	}
	}

	const getNotificationPermission = () => {
	const Notification = window.Notification

	if (!Notification) return Promise.resolve(null)
	if (Notification.permission === 'default')
	return Notification.requestPermission()
	return Promise.resolve(Notification.permission)
	}

	const blockUser = (store, args) => {
	const id = args.id
	const expiresIn = typeof args === 'object' ? args.expiresIn : 0

	const predictedRelationship = store.state.relationships[id] \|\| { id }
	store.commit('updateUserRelationship', [predictedRelationship])
	store.commit('addBlockId', id)

	return store.rootState.api.backendInteractor
	.blockUser({ id, expiresIn })
	.then((relationship) => {
	store.commit('updateUserRelationship', [relationship])
	store.commit('addBlockId', id)

	store.commit('removeStatus', { timeline: 'friends', userId: id })
	store.commit('removeStatus', { timeline: 'public', userId: id })
	store.commit('removeStatus', {
	timeline: 'publicAndExternal',
	userId: id,
	})
	})
	}

	const unblockUser = (store, id) => {
	return store.rootState.api.backendInteractor
	.unblockUser({ id })
	.then((relationship) =>
	store.commit('updateUserRelationship', [relationship]),
	)
	}

	const removeUserFromFollowers = (store, id) => {
	return store.rootState.api.backendInteractor
	.removeUserFromFollowers({ id })
	.then((relationship) =>
	store.commit('updateUserRelationship', [relationship]),
	)
	}

	const editUserNote = (store, { id, comment }) => {
	return store.rootState.api.backendInteractor
	.editUserNote({ id, comment })
	.then((relationship) =>
	store.commit('updateUserRelationship', [relationship]),
	)
	}

	const muteUser = (store, args) => {
	const id = typeof args === 'object' ? args.id : args
	const expiresIn = typeof args === 'object' ? args.expiresIn : 0

	const predictedRelationship = store.state.relationships[id] \|\| { id }
	store.commit('updateUserRelationship', [predictedRelationship])
	store.commit('addMuteId', id)

	return store.rootState.api.backendInteractor
	.muteUser({ id, expiresIn })
	.then((relationship) => {
	store.commit('updateUserRelationship', [relationship])
	store.commit('addMuteId', id)
	})
	}

	const unmuteUser = (store, id) => {
	const predictedRelationship = store.state.relationships[id] \|\| { id }
	predictedRelationship.muting = false
	store.commit('updateUserRelationship', [predictedRelationship])

	return store.rootState.api.backendInteractor
	.unmuteUser({ id })
	.then((relationship) =>
	store.commit('updateUserRelationship', [relationship]),
	)
	}

	const hideReblogs = (store, userId) => {
	return store.rootState.api.backendInteractor
	.followUser({ id: userId, reblogs: false })
	.then((relationship) => {
	store.commit('updateUserRelationship', [relationship])
	})
	}

	const showReblogs = (store, userId) => {
	return store.rootState.api.backendInteractor
	.followUser({ id: userId, reblogs: true })
	.then((relationship) =>
	store.commit('updateUserRelationship', [relationship]),
	)
	}

	const muteDomain = (store, domain) => {
	return store.rootState.api.backendInteractor
	.muteDomain({ domain })
	.then(() => store.commit('addDomainMute', domain))
	}

	const unmuteDomain = (store, domain) => {
	return store.rootState.api.backendInteractor
	.unmuteDomain({ domain })
	.then(() => store.commit('removeDomainMute', domain))
	}

	export const mutations = {
	tagUser(state, { user: { id }, tag }) {
	const user = state.usersObject[id]
	const tags = user.tags \|\| []
	const newTags = tags.concat([tag])
	user.tags = newTags
	},
	untagUser(state, { user: { id }, tag }) {
	const user = state.usersObject[id]
	const tags = user.tags \|\| []
	const newTags = tags.filter((t) => t !== tag)
	user.tags = newTags
	},
	updateRight(state, { user: { id }, right, value }) {
	const user = state.usersObject[id]
	const newRights = user.rights
	newRights[right] = value
	user.rights = newRights
	},
	updateActivationStatus(state, { user: { id }, deactivated }) {
	const user = state.usersObject[id]
	user.deactivated = deactivated
	},
	setCurrentUser(state, user) {
	state.lastLoginName = user.screen_name
	state.currentUser = mergeWith(
	state.currentUser \|\| {},
	user,
	mergeArrayLength,
	)
	},
	clearCurrentUser(state) {
	state.currentUser = false
	state.lastLoginName = false
	},
	beginLogin(state) {
	state.loggingIn = true
	},
	endLogin(state) {
	state.loggingIn = false
	},
	saveFriendIds(state, { id, friendIds }) {
	const user = state.usersObject[id]
	user.friendIds = uniq(concat(user.friendIds \|\| [], friendIds))
	},
	saveFollowerIds(state, { id, followerIds }) {
	const user = state.usersObject[id]
	user.followerIds = uniq(concat(user.followerIds \|\| [], followerIds))
	},
	// Because frontend doesn't have a reason to keep these stuff in memory
	// outside of viewing someones user profile.
	clearFriends(state, userId) {
	const user = state.usersObject[userId]
	if (user) {
	user.friendIds = []
	}
	},
	clearFollowers(state, userId) {
	const user = state.usersObject[userId]
	if (user) {
	user.followerIds = []
	}
	},
	addNewUsers(state, users) {
	each(users, (user) => {
	if (user.relationship) {
	state.relationships[user.relationship.id] = user.relationship
	}
	const res = mergeOrAdd(state.users, state.usersObject, user)
	const item = res.item
	if (res.new && item.screen_name && !item.screen_name.includes('@')) {
	state.usersByNameObject[item.screen_name.toLowerCase()] = item
	}
	})
	},
	updateUserRelationship(state, relationships) {
	relationships.forEach((relationship) => {
	state.relationships[relationship.id] = relationship
	})
	},
	updateUserInLists(state, { id, inLists }) {
	state.usersObject[id].inLists = inLists
	},
	saveBlockIds(state, blockIds) {
	state.currentUser.blockIds = blockIds
	},
	addBlockId(state, blockId) {
	if (state.currentUser.blockIds.indexOf(blockId) === -1) {
	state.currentUser.blockIds.push(blockId)
	}
	},
	setBlockIdsMaxId(state, blockIdsMaxId) {
	state.currentUser.blockIdsMaxId = blockIdsMaxId
	},
	saveMuteIds(state, muteIds) {
	state.currentUser.muteIds = muteIds
	},
	setMuteIdsMaxId(state, muteIdsMaxId) {
	state.currentUser.muteIdsMaxId = muteIdsMaxId
	},
	addMuteId(state, muteId) {
	if (state.currentUser.muteIds.indexOf(muteId) === -1) {
	state.currentUser.muteIds.push(muteId)
	}
	},
	saveDomainMutes(state, domainMutes) {
	state.currentUser.domainMutes = domainMutes
	},
	addDomainMute(state, domain) {
	if (state.currentUser.domainMutes.indexOf(domain) === -1) {
	state.currentUser.domainMutes.push(domain)
	}
	},
	removeDomainMute(state, domain) {
	const index = state.currentUser.domainMutes.indexOf(domain)
	if (index !== -1) {
	state.currentUser.domainMutes.splice(index, 1)
	}
	},
	setPinnedToUser(state, status) {
	const user = state.usersObject[status.user.id]
	user.pinnedStatusIds = user.pinnedStatusIds \|\| []
	const index = user.pinnedStatusIds.indexOf(status.id)

	if (status.pinned && index === -1) {
	user.pinnedStatusIds.push(status.id)
	} else if (!status.pinned && index !== -1) {
	user.pinnedStatusIds.splice(index, 1)
	}
	},
	setUserForStatus(state, status) {
	status.user = state.usersObject[status.user.id]
	},
	setUserForNotification(state, notification) {
	if (notification.type !== 'follow') {
	notification.action.user = state.usersObject[notification.action.user.id]
	}
	notification.from_profile = state.usersObject[notification.from_profile.id]
	},
	setColor(state, { user: { id }, highlighted }) {
	const user = state.usersObject[id]
	user.highlight = highlighted
	},
	signUpPending(state) {
	state.signUpPending = true
	state.signUpErrors = []
	state.signUpNotice = {}
	},
	signUpSuccess(state) {
	state.signUpPending = false
	},
	signUpFailure(state, errors) {
	state.signUpPending = false
	state.signUpErrors = errors
	state.signUpNotice = {}
	},
	signUpNotice(state, notice) {
	state.signUpPending = false
	state.signUpErrors = []
	state.signUpNotice = notice
	},
	}

	export const getters = {
	findUser: (state) => (query) => {
	return state.usersObject[query]
	},
	findUserByName: (state) => (query) => {
	return state.usersByNameObject[query.toLowerCase()]
	},
	findUserByUrl: (state) => (query) => {
	return state.users.find(
	(u) =>
	u.statusnet_profile_url &&
	u.statusnet_profile_url.toLowerCase() === query.toLowerCase(),
	)
	},
	relationship: (state) => (id) => {
	const rel = id && state.relationships[id]
	return rel \|\| { id, loading: true }
	},
	}

	export const defaultState = {
	loggingIn: false,
	lastLoginName: false,
	currentUser: false,
	users: [],
	usersObject: {},
	usersByNameObject: {},
	signUpPending: false,
	signUpErrors: [],
	signUpNotice: {},
	relationships: {},
	}

	const users = {
	state: defaultState,
	mutations,
	getters,
	actions: {
	fetchUserIfMissing(store, id) {
	if (!store.getters.findUser(id)) {
	store.dispatch('fetchUser', id)
	}
	},
	fetchUser(store, id) {
	return store.rootState.api.backendInteractor
	.fetchUser({ id })
	.then((user) => {
	store.commit('addNewUsers', [user])
	return user
	})
	},
	fetchUserByName(store, name) {
	return store.rootState.api.backendInteractor
	.fetchUserByName({ name })
	.then((user) => {
	store.commit('addNewUsers', [user])
	return user
	})
	},
	fetchUserRelationship(store, id) {
	if (store.state.currentUser) {
	store.rootState.api.backendInteractor
	.fetchUserRelationship({ id })
	.then((relationships) =>
	store.commit('updateUserRelationship', relationships),
	)
	}
	},
	fetchUserInLists(store, id) {
	if (store.state.currentUser) {
	store.rootState.api.backendInteractor
	.fetchUserInLists({ id })
	.then((inLists) => store.commit('updateUserInLists', { id, inLists }))
	}
	},
	fetchBlocks(store, args) {
	const { reset } = args \|\| {}

	const maxId = store.state.currentUser.blockIdsMaxId
	return store.rootState.api.backendInteractor
	.fetchBlocks({ maxId })
	.then((blocks) => {
	if (reset) {
	store.commit('saveBlockIds', map(blocks, 'id'))
	} else {
	map(blocks, 'id').map((id) => store.commit('addBlockId', id))
	}
	if (blocks.length) {
	store.commit('setBlockIdsMaxId', last(blocks).id)
	}
	store.commit('addNewUsers', blocks)
	return blocks
	})
	},
	blockUser(store, data) {
	return blockUser(store, data)
	},
	unblockUser(store, data) {
	return unblockUser(store, data)
	},
	removeUserFromFollowers(store, id) {
	return removeUserFromFollowers(store, id)
	},
	blockUsers(store, data = []) {
	return Promise.all(data.map((d) => blockUser(store, d)))
	},
	unblockUsers(store, data = []) {
	return Promise.all(data.map((d) => unblockUser(store, d)))
	},
	editUserNote(store, args) {
	return editUserNote(store, args)
	},
	fetchMutes(store, args) {
	const { reset } = args \|\| {}

	const maxId = store.state.currentUser.muteIdsMaxId
	return store.rootState.api.backendInteractor
	.fetchMutes({ maxId })
	.then((mutes) => {
	if (reset) {
	store.commit('saveMuteIds', map(mutes, 'id'))
	} else {
	map(mutes, 'id').map((id) => store.commit('addMuteId', id))
	}
	if (mutes.length) {
	store.commit('setMuteIdsMaxId', last(mutes).id)
	}
	store.commit('addNewUsers', mutes)
	return mutes
	})
	},
	muteUser(store, data) {
	return muteUser(store, data)
	},
	unmuteUser(store, id) {
	return unmuteUser(store, id)
	},
	hideReblogs(store, id) {
	return hideReblogs(store, id)
	},
	showReblogs(store, id) {
	return showReblogs(store, id)
	},
	muteUsers(store, data = []) {
	return Promise.all(data.map((d) => muteUser(store, d)))
	},
	unmuteUsers(store, ids = []) {
	return Promise.all(ids.map((d) => unmuteUser(store, d)))
	},
	fetchDomainMutes(store) {
	return store.rootState.api.backendInteractor
	.fetchDomainMutes()
	.then((domainMutes) => {
	store.commit('saveDomainMutes', domainMutes)
	return domainMutes
	})
	},
	muteDomain(store, domain) {
	return muteDomain(store, domain)
	},
	unmuteDomain(store, domain) {
	return unmuteDomain(store, domain)
	},
	muteDomains(store, domains = []) {
	return Promise.all(domains.map((domain) => muteDomain(store, domain)))
	},
	unmuteDomains(store, domain = []) {
	return Promise.all(domain.map((domain) => unmuteDomain(store, domain)))
	},
	fetchFriends({ rootState, commit }, id) {
	const user = rootState.users.usersObject[id]
	const maxId = last(user.friendIds)
	return rootState.api.backendInteractor
	.fetchFriends({ id, maxId })
	.then((friends) => {
	commit('addNewUsers', friends)
	commit('saveFriendIds', { id, friendIds: map(friends, 'id') })
	return friends
	})
	},
	fetchFollowers({ rootState, commit }, id) {
	const user = rootState.users.usersObject[id]
	const maxId = last(user.followerIds)
	return rootState.api.backendInteractor
	.fetchFollowers({ id, maxId })
	.then((followers) => {
	commit('addNewUsers', followers)
	commit('saveFollowerIds', { id, followerIds: map(followers, 'id') })
	return followers
	})
	},
	clearFriends({ commit }, userId) {
	commit('clearFriends', userId)
	},
	clearFollowers({ commit }, userId) {
	commit('clearFollowers', userId)
	},
	subscribeUser({ rootState, commit }, id) {
	return rootState.api.backendInteractor
	.followUser({ id, notify: true })
	.then((relationship) =>
	commit('updateUserRelationship', [relationship]),
	)
	},
	unsubscribeUser({ rootState, commit }, id) {
	return rootState.api.backendInteractor
	.followUser({ id, notify: false })
	.then((relationship) =>
	commit('updateUserRelationship', [relationship]),
	)
	},
	toggleActivationStatus({ rootState, commit }, { user }) {
	const api = user.deactivated
	? rootState.api.backendInteractor.activateUser
	: rootState.api.backendInteractor.deactivateUser
	api({ user }).then((user) => {
	const deactivated = !user.is_active
	commit('updateActivationStatus', { user, deactivated })
	})
	},
	registerPushNotifications(store) {
	const token = store.state.currentUser.credentials
	const vapidPublicKey = useInstanceStore().vapidPublicKey
	const isEnabled = store.rootState.config.webPushNotifications
	const notificationVisibility =
	store.rootState.config.notificationVisibility

	registerPushNotifications(
	isEnabled,
	vapidPublicKey,
	token,
	notificationVisibility,
	)
	},
	unregisterPushNotifications(store) {
	const token = store.state.currentUser.credentials

	unregisterPushNotifications(token)
	},
	addNewUsers({ commit }, users) {
	commit('addNewUsers', users)
	},
	addNewStatuses(store, { statuses }) {
	const users = map(statuses, 'user')
	const retweetedUsers = compact(map(statuses, 'retweeted_status.user'))
	store.commit('addNewUsers', users)
	store.commit('addNewUsers', retweetedUsers)

	each(statuses, (status) => {
	// Reconnect users to statuses
	store.commit('setUserForStatus', status)
	// Set pinned statuses to user
	store.commit('setPinnedToUser', status)
	})
	each(compact(map(statuses, 'retweeted_status')), (status) => {
	// Reconnect users to retweets
	store.commit('setUserForStatus', status)
	// Set pinned retweets to user
	store.commit('setPinnedToUser', status)
	})
	},
	addNewNotifications(store, { notifications }) {
	const users = map(notifications, 'from_profile')
	const targetUsers = map(notifications, 'target').filter((_) => _)
	const notificationIds = notifications.map((_) => _.id)
	store.commit('addNewUsers', users)
	store.commit('addNewUsers', targetUsers)

	const notificationsObject = store.rootState.notifications.idStore
	const relevantNotifications = Object.entries(notificationsObject)
	.filter(([k]) => notificationIds.includes(k))
	.map(([, val]) => val)

	// Reconnect users to notifications
	each(relevantNotifications, (notification) => {
	store.commit('setUserForNotification', notification)
	})
	},
	searchUsers({ rootState, commit }, { query }) {
	return rootState.api.backendInteractor
	.searchUsers({ query })
	.then((users) => {
	commit('addNewUsers', users)
	return users
	})
	},
	async signUp(store, userInfo) {
	const oauthStore = useOAuthStore()
	store.commit('signUpPending')

	try {
	const token = await oauthStore.ensureAppToken()
	const data = await apiService.register({
	credentials: token,
	params: { ...userInfo },
	})

	if (data.access_token) {
	store.commit('signUpSuccess')
	oauthStore.setToken(data.access_token)
	await store.dispatch('loginUser', data.access_token)
	return 'ok'
	} else {
	// Request succeeded, but user cannot login yet.
	store.commit('signUpNotice', data)
	return 'request_sent'
	}
	} catch (e) {
	const errors = e.message
	store.commit('signUpFailure', errors)
	throw e
	}
	},
	async getCaptcha(store) {
	return store.rootState.api.backendInteractor.getCaptcha()
	},

	logout(store) {
	const oauth = useOAuthStore()

	// NOTE: No need to verify the app still exists, because if it doesn't,
	// the token will be invalid too
	return oauth
	.ensureApp()
	.then((app) => {
	const params = {
	app,
	instance: useInstanceStore().server,
	token: oauth.userToken,
	}

	return oauthApi.revokeToken(params)
	})
	.then(() => {
	store.commit('clearCurrentUser')
	store.dispatch('disconnectFromSocket')
	oauth.clearToken()
	store.dispatch('stopFetchingTimeline', 'friends')
	store.commit(
	'setBackendInteractor',
	backendInteractorService(oauth.getToken),
	)
	store.dispatch('stopFetchingNotifications')
	store.dispatch('stopFetchingLists')
	store.dispatch('stopFetchingBookmarkFolders')
	store.dispatch('stopFetchingFollowRequests')
	store.commit('clearNotifications')
	store.commit('resetStatuses')
	store.dispatch('resetChats')
	useInterfaceStore().setLastTimeline('public-timeline')
	useInterfaceStore().setLayoutWidth(windowWidth())
	useInterfaceStore().setLayoutHeight(windowHeight())
	- store.commit('clearServerSideStorage')
	+ //useSyncConfigStore().clearSyncConfig()
	})
	},
	loginUser(store, accessToken) {
	return new Promise((resolve, reject) => {
	const commit = store.commit
	const dispatch = store.dispatch
	commit('beginLogin')
	store.rootState.api.backendInteractor
	.verifyCredentials(accessToken)
	.then((data) => {
	if (!data.error) {
	const user = data
	// user.credentials = userCredentials
	user.credentials = accessToken
	user.blockIds = []
	user.muteIds = []
	user.domainMutes = []
	commit('setCurrentUser', user)

	- useServerSideStorageStore().setServerSideStorage(user)
	+ useSyncConfigStore().setSyncConfig(user)
	commit('addNewUsers', [user])

	useEmojiStore().fetchEmoji()

	getNotificationPermission().then((permission) =>
	useInterfaceStore().setNotificationPermission(permission),
	)

	// Set our new backend interactor
	commit(
	'setBackendInteractor',
	backendInteractorService(accessToken),
	)

	// Do server-side storage migrations

	// Debug snippet to clean up storage and reset migrations
	/*
	// Reset wordfilter
	Object.keys(
	- useServerSideStorageStore().prefsStorage.simple.muteFilters
	+ useSyncConfigStore().prefsStorage.simple.muteFilters
	).forEach(key => {
	- useServerSideStorageStore().unsetPreference({ path: 'simple.muteFilters.' + key, value: null })
	+ useSyncConfigStore().unsetPreference({ path: 'simple.muteFilters.' + key, value: null })
	})

	// Reset flag to 0 to re-run migrations
	- useServerSideStorageStore().setFlag({ flag: 'configMigration', value: 0 })
	+ useSyncConfigStore().setFlag({ flag: 'configMigration', value: 0 })
	/**/

	- const { configMigration } =
	- useServerSideStorageStore().flagStorage
	+ const { configMigration } = useSyncConfigStore().flagStorage
	declarations
	.filter((x) => {
	return (
	x.store === 'server-side' &&
	x.migrationNum > 0 &&
	x.migrationNum > configMigration
	)
	})
	.toSorted((a, b) => a.configMigration - b.configMigration)
	.forEach((value) => {
	- value.migration(useServerSideStorageStore(), store.rootState)
	- useServerSideStorageStore().setFlag({
	+ value.migration(useSyncConfigStore(), store.rootState)
	+ useSyncConfigStore().setFlag({
	flag: 'configMigration',
	value: value.migrationNum,
	})
	- useServerSideStorageStore().pushServerSideStorage()
	+ useSyncConfigStore().pushSyncConfig()
	})

	if (user.token) {
	dispatch('setWsToken', user.token)

	// Initialize the shout socket.
	dispatch('initializeSocket')
	}

	const startPolling = () => {
	// Start getting fresh posts.
	dispatch('startFetchingTimeline', { timeline: 'friends' })

	// Start fetching notifications
	dispatch('startFetchingNotifications')

	if (
	useInstanceCapabilitiesStore().pleromaChatMessagesAvailable
	) {
	// Start fetching chats
	dispatch('startFetchingChats')
	}
	}

	dispatch('startFetchingLists')
	dispatch('startFetchingBookmarkFolders')

	if (user.locked) {
	dispatch('startFetchingFollowRequests')
	}

	if (store.getters.mergedConfig.useStreamingApi) {
	dispatch('fetchTimeline', { timeline: 'friends', since: null })
	dispatch('fetchNotifications', { since: null })
	dispatch('enableMastoSockets', true)
	.catch((error) => {
	console.error(
	'Failed initializing MastoAPI Streaming socket',
	error,
	)
	})
	.then(() => {
	dispatch('fetchChats', { latest: true })
	setTimeout(
	() => dispatch('setNotificationsSilence', false),
	10000,
	)
	})
	} else {
	startPolling()
	}

	// Get user mutes
	dispatch('fetchMutes')

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

	// Fetch our friends
	store.rootState.api.backendInteractor
	.fetchFriends({ id: user.id })
	.then((friends) => commit('addNewUsers', friends))
	} else {
	const response = data.error
	// Authentication failed
	commit('endLogin')

	// remove authentication token on client/authentication errors
	if ([400, 401, 403, 422].includes(response.status)) {
	useOAuthStore().clearToken()
	}

	if (response.status === 401) {
	reject(new Error('Wrong username or password'))
	} else {
	reject(new Error('An error occurred, please try again'))
	}
	}
	commit('endLogin')
	resolve()
	})
	.catch((error) => {
	console.error(error)
	commit('endLogin')
	reject(new Error('Failed to connect to server, try again'))
	})
	})
	},
	},
	}

	export default users
	diff --git a/src/stores/serverSideStorage.js b/src/stores/sync_config.js
	similarity index 87%
	rename from src/stores/serverSideStorage.js
	rename to src/stores/sync_config.js
	index 99f5045f78..009ccbce4f 100644
	--- a/src/stores/serverSideStorage.js
	+++ b/src/stores/sync_config.js
	@@ -1,643 +1,689 @@
	import {
	merge as _merge,
	clamp,
	cloneDeep,
	findLastIndex,
	flatten,
	get,
	groupBy,
	isEqual,
	set,
	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'

	-export const VERSION = 1
	+import { useInstanceStore } from 'src/stores/instance'
	+
	+import { defaultState as configDefaultState } from 'src/modules/default_config_state'
	+
	+export const VERSION = 2
	export const NEW_USER_DATE = new Date('2022-08-04') // date of writing this, basically

	export const COMMAND_TRIM_FLAGS = 1000
	export const COMMAND_TRIM_FLAGS_AND_RESET = 1001

	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
	configMigration: 0, // Counter for config -> server-side migrations
	reset: 0, // special flag that can be used to force-reset all flags, 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,
	},
	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) => ({
	...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 === 'number' \|\| typeof v === 'boolean') return
	if (typeof v === 'object' && v != null) return
	console.warn(`Preference simple.${k} as invalid type, 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, 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 source, source of truth irrelevant',
	+ 'Same version/timestamp on both sources, source of truth irrelevant',
	)
	result.recent = cache
	result.stale = live
	} else {
	console.debug(
	- 'Different timestamp, figuring out which one is more recent',
	+ '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) => ({
	_user: a._user ?? b._user,
	_version: a._version ?? b._version,
	_timestamp: a._timestamp ?? b._timestamp,
	needUpload: b.needUpload ?? a.needUpload,
	prefsStorage: _merge(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),
	]
	}),
	)
	}

	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')) {
	+ if (path.startsWith('collections') \|\| path.startsWith('objectCollection')) {
	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') {
	+ // TODO check how objectCollections behaves here
	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
	}
	})
	return flatten(trimmedGrouped).sort((a, b) =>
	a.timestamp > b.timestamp ? 1 : -1,
	)
	}

	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') \|\|
	path.startsWith('objectCollections')
	) {
	throw new Error('Illegal operation "set" on a collection')
	}
	if (path.split(/\./g).length <= 1) {
	throw new Error(
	`Calling set on depth <= 1 (path: ${path}) is not allowed`,
	)
	}
	set(resultOutput, path, args[0])
	break
	case 'unset':
	if (
	path.startsWith('collections') \|\|
	path.startsWith('objectCollections')
	) {
	throw new Error('Illegal operation "unset" on a collection')
	}
	if (path.split(/\./g).length <= 2) {
	throw new Error(
	`Calling unset on depth <= 2 (path: ${path}) is not allowed`,
	)
	}
	unset(resultOutput, path)
	break
	case 'addToCollection':
	set(
	resultOutput,
	path,
	Array.from(new Set(get(resultOutput, path)).add(args[0])),
	)
	break
	case 'removeFromCollection': {
	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:
	throw new 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
	})
	}
	} else if (totalFlags.reset > 0 && totalFlags.reset < 9000) {
	console.debug('Received command to reset the flags')
	allFlagKeys.forEach((flag) => {
	result[flag] = 0
	})
	}
	result.reset = 0
	return result
	}

	-export const _doMigrations = (cache) => {
	- if (!cache) return cache
	+export const _doMigrations = (cache, live) => {
	+ const data = cache ?? live

	- if (cache._version < VERSION) {
	+ if (data._version < VERSION) {
	console.debug(
	- 'Local cached data has older version, seeing if there any migrations that can be applied',
	+ 'Data has older version, seeing if there any migrations that can be applied',
	)

	// no migrations right now since we only have one version
	console.debug('No migrations found')
	}

	- if (cache._version > VERSION) {
	+ if (data._version > VERSION) {
	console.debug(
	- 'Local cached data has newer version, seeing if there any reverse migrations that can be applied',
	+ '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(
	{},
	- 'serverSideStorage',
	- { from: cache._version, to: VERSION },
	- cache,
	+ 'syncConfigStore',
	+ { from: data._version, to: VERSION },
	+ data,
	)
	}
	}
	}

	return cache
	}

	-export const useServerSideStorageStore = defineStore('serverSideStorage', {
	+export const useSyncConfigStore = defineStore('sync_config', {
	state() {
	return cloneDeep(defaultState)
	},
	actions: {
	setFlag({ flag, value }) {
	this.flagStorage[flag] = value
	this.dirty = true
	},
	setPreference({ path, value }) {
	if (path.startsWith('_')) {
	throw new Error(
	`Tried to edit internal (starts with _) field '${path}', ignoring.`,
	)
	}
	if (
	path.startsWith('collections') \|\|
	path.startsWith('objectCollections')
	) {
	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`,
	)
	}
	set(this.prefsStorage, path, value)
	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') \|\|
	path.startsWith('objectCollections')
	) {
	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, value)
	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])
	} else if (path.startsWith('objectCollections')) {
	const { _key } = value
	if (!_key && typeof _key !== 'string') {
	throw new Error('Object for storage is missing _key field!')
	}
	const collection = new Set(get(this.prefsStorage, path + '.index'))
	collection.add(_key)
	set(this.prefsStorage, path + '.index', [...collection])
	set(this.prefsStorage, path + '.data.' + _key, value)
	}
	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 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
	+
	+ 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
	+ } else if (path.startsWith('objectCollection')) {
	+ const collection = new Set(get(this.prefsStorage, path + '.index'))
	+ collection.delete(_key)
	+ set(this.prefsStorage, path + '.index', [...collection])
	+ const data = get(this.prefsStorage, path + '.data')
	+ delete data[_key]
	+
	+ this.prefsStorage._journal = [
	+ ...this.prefsStorage._journal,
	+ {
	+ operation: 'removeFromCollection',
	+ path,
	+ args: [{ _key }],
	+ timestamp: Date.now(),
	+ },
	+ ]
	+ }
	},
	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,
	)
	},
	- clearServerSideStorage() {
	+ clearSyncConfig() {
	const blankState = { ...cloneDeep(defaultState) }
	Object.keys(this).forEach((k) => {
	this[k] = blankState[k]
	})
	},
	- setServerSideStorage(userData) {
	+ setSyncConfig(userData) {
	const live = userData.storage
	this.raw = live
	let cache = this.cache
	- if (cache && cache._user !== userData.fqn) {
	+ if (cache?._user !== userData.fqn) {
	console.warn(
	'Cache belongs to another user! reinitializing local cache!',
	)
	cache = null
	}
	-
	- cache = _doMigrations(cache)
	+ console.log(cache, live)

	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 && _doMigrations(recent)
	+ stale = stale && _doMigrations(stale)
	+
	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 = !isEqual(recentData, 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
	}

	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
	},
	- pushServerSideStorage({ force = false } = {}) {
	+ 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 })
	.then((user) => {
	- this.setServerSideStorage(user)
	+ this.setSyncConfig(user)
	this.dirty = false
	})
	},
	},
	+ getters: {
	+ mergedConfig: (state) => {
	+ const instancePrefs = useInstanceStore().prefsStorage
	+ const result = Object.fromEntries(
	+ Object.entries(state.prefsStorage.simple).map(([k, v]) => [
	+ k,
	+ v ?? instancePrefs[k],
	+ ]),
	+ )
	+ return result
	+ },
	+ },
	+ persist: {
	+ afterLoad(state) {
	+ return state
	+ },
	+ },
	})
	diff --git a/test/unit/specs/modules/serverSideStorage.spec.js b/test/unit/specs/stores/sync_config.spec.js
	similarity index 87%
	rename from test/unit/specs/modules/serverSideStorage.spec.js
	rename to test/unit/specs/stores/sync_config.spec.js
	index bd2028ea34..abcddbeb17 100644
	--- a/test/unit/specs/modules/serverSideStorage.spec.js
	+++ b/test/unit/specs/stores/sync_config.spec.js
	@@ -1,526 +1,561 @@
	import { cloneDeep } from 'lodash'
	import { createPinia, setActivePinia } from 'pinia'

	import {
	_getAllFlags,
	_getRecentData,
	_mergeFlags,
	_mergePrefs,
	_moveItemInArray,
	_resetFlags,
	COMMAND_TRIM_FLAGS,
	COMMAND_TRIM_FLAGS_AND_RESET,
	defaultState,
	newUserFlags,
	- useServerSideStorageStore,
	+ useSyncConfigStore,
	VERSION,
	-} from 'src/stores/serverSideStorage.js'
	+} from 'src/stores/sync_config.js'

	-describe('The serverSideStorage module', () => {
	+describe('The SyncConfig module', () => {
	beforeEach(() => {
	setActivePinia(createPinia())
	})

	describe('mutations', () => {
	- describe('setServerSideStorage', () => {
	+ describe('setSyncConfig', () => {
	const user = {
	created_at: new Date('1999-02-09'),
	storage: {},
	}

	it('should initialize storage if none present', () => {
	- const store = useServerSideStorageStore()
	- store.setServerSideStorage(store, user)
	+ const store = useSyncConfigStore()
	+ store.setSyncConfig({ ...user })
	expect(store.cache._version).to.eql(VERSION)
	expect(store.cache._timestamp).to.be.a('number')
	expect(store.cache.flagStorage).to.eql(defaultState.flagStorage)
	expect(store.cache.prefsStorage).to.eql(defaultState.prefsStorage)
	})

	it('should initialize storage with proper flags for new users if none present', () => {
	- const store = useServerSideStorageStore()
	- store.setServerSideStorage({ ...user, created_at: new Date() })
	+ const store = useSyncConfigStore()
	+ store.setSyncConfig({ ...user, created_at: new Date() })
	expect(store.cache._version).to.eql(VERSION)
	expect(store.cache._timestamp).to.be.a('number')
	expect(store.cache.flagStorage).to.eql(newUserFlags)
	expect(store.cache.prefsStorage).to.eql(defaultState.prefsStorage)
	})

	it('should merge flags even if remote timestamp is older', () => {
	- const store = useServerSideStorageStore()
	+ const store = useSyncConfigStore()
	store.cache = {
	_timestamp: Date.now(),
	_version: VERSION,
	...cloneDeep(defaultState),
	}

	- store.setServerSideStorage({
	+ store.setSyncConfig({
	...user,
	storage: {
	_timestamp: 123,
	_version: VERSION,
	flagStorage: {
	...defaultState.flagStorage,
	updateCounter: 1,
	},
	prefsStorage: {
	...defaultState.prefsStorage,
	},
	},
	})

	expect(store.cache.flagStorage).to.eql({
	...defaultState.flagStorage,
	updateCounter: 1,
	})
	})

	it('should reset local timestamp to remote if contents are the same', () => {
	- const store = useServerSideStorageStore()
	+ const store = useSyncConfigStore()
	store.cache = null

	- store.setServerSideStorage({
	+ store.setSyncConfig({
	...user,
	storage: {
	_timestamp: 123,
	_version: VERSION,
	flagStorage: {
	...defaultState.flagStorage,
	updateCounter: 999,
	},
	},
	})
	expect(store.cache._timestamp).to.eql(123)
	expect(store.flagStorage.updateCounter).to.eql(999)
	expect(store.cache.flagStorage.updateCounter).to.eql(999)
	})

	- it('should remote version if local missing', () => {
	- const store = useServerSideStorageStore()
	- store.setServerSideStorage(store, user)
	+ it('should use remote version if local missing', () => {
	+ const store = useSyncConfigStore()
	+ store.setSyncConfig(store, user)
	expect(store.cache._version).to.eql(VERSION)
	expect(store.cache._timestamp).to.be.a('number')
	expect(store.cache.flagStorage).to.eql(defaultState.flagStorage)
	})
	})
	describe('setPreference', () => {
	it('should set preference and update journal log accordingly', () => {
	- const store = useServerSideStorageStore()
	+ const store = useSyncConfigStore()
	store.setPreference({ path: 'simple.testing', value: 1 })
	expect(store.prefsStorage.simple.testing).to.eql(1)
	expect(store.prefsStorage._journal.length).to.eql(1)
	expect(store.prefsStorage._journal[0]).to.eql({
	path: 'simple.testing',
	operation: 'set',
	args: [1],
	// should have A timestamp, we don't really care what it is
	timestamp: store.prefsStorage._journal[0].timestamp,
	})
	})

	it('should keep journal to a minimum', () => {
	- const store = useServerSideStorageStore()
	+ const store = useSyncConfigStore()
	store.setPreference({ path: 'simple.testing', value: 1 })
	store.setPreference({ path: 'simple.testing', value: 2 })
	store.addCollectionPreference({ path: 'collections.testing', value: 2 })
	+ store.addCollectionPreference({
	+ path: 'objectCollections.testing',
	+ value: { _key: 'a', foo: 1 },
	+ })
	+ expect(store.prefsStorage.objectCollections.testing).to.eql({
	+ data: { a: { _key: 'a', foo: 1 } },
	+ index: ['a'],
	+ })
	store.removeCollectionPreference({
	path: 'collections.testing',
	value: 2,
	})
	+ store.removeCollectionPreference({
	+ path: 'objectCollections.testing',
	+ value: { _key: 'a' },
	+ })
	store.updateCache({ username: 'test' })
	expect(store.prefsStorage.simple.testing).to.eql(2)
	expect(store.prefsStorage.collections.testing).to.eql([])
	- expect(store.prefsStorage._journal.length).to.eql(2)
	+ expect(store.prefsStorage.objectCollections.testing).to.eql({
	+ data: {},
	+ index: [],
	+ })
	+ expect(store.prefsStorage._journal.length).to.eql(3)
	expect(store.prefsStorage._journal[0]).to.eql({
	path: 'simple.testing',
	operation: 'set',
	args: [2],
	// should have A timestamp, we don't really care what it is
	timestamp: store.prefsStorage._journal[0].timestamp,
	})
	expect(store.prefsStorage._journal[1]).to.eql({
	path: 'collections.testing',
	operation: 'removeFromCollection',
	args: [2],
	// should have A timestamp, we don't really care what it is
	timestamp: store.prefsStorage._journal[1].timestamp,
	})
	+ expect(store.prefsStorage._journal[2]).to.eql({
	+ path: 'objectCollections.testing',
	+ operation: 'removeFromCollection',
	+ args: [{ _key: 'a' }],
	+ // should have A timestamp, we don't really care what it is
	+ timestamp: store.prefsStorage._journal[2].timestamp,
	+ })
	})

	it('should remove duplicate entries from journal', () => {
	- const store = useServerSideStorageStore()
	+ const store = useSyncConfigStore()
	store.setPreference({ path: 'simple.testing', value: 1 })
	store.setPreference({ path: 'simple.testing', value: 1 })
	store.addCollectionPreference({ path: 'collections.testing', value: 2 })
	store.addCollectionPreference({ path: 'collections.testing', value: 2 })
	+ store.addCollectionPreference({
	+ path: 'objectCollections.testing',
	+ value: { _key: 'a', foo: 1 },
	+ })
	+ store.addCollectionPreference({
	+ path: 'objectCollections.testing',
	+ value: { _key: 'a', foo: 1 },
	+ })
	store.updateCache({ username: 'test' })
	expect(store.prefsStorage.simple.testing).to.eql(1)
	expect(store.prefsStorage.collections.testing).to.eql([2])
	- expect(store.prefsStorage._journal.length).to.eql(2)
	+ expect(store.prefsStorage.objectCollections.testing).to.eql({
	+ data: { a: { _key: 'a', foo: 1 } },
	+ index: ['a'],
	+ })
	+ expect(store.prefsStorage._journal.length).to.eql(4)
	})

	it('should remove depth = 3 set/unset entries from journal', () => {
	- const store = useServerSideStorageStore()
	+ const store = useSyncConfigStore()
	store.setPreference({ path: 'simple.object.foo', value: 1 })
	store.unsetPreference({ path: 'simple.object.foo' })
	store.updateCache(store, { username: 'test' })
	expect(store.prefsStorage.simple.object).to.not.have.property('foo')
	expect(store.prefsStorage._journal.length).to.eql(1)
	})

	it('should not allow unsetting depth <= 2', () => {
	- const store = useServerSideStorageStore()
	+ const store = useSyncConfigStore()
	store.setPreference({ path: 'simple.object.foo', value: 1 })
	expect(() => store.unsetPreference({ path: 'simple' })).to.throw()
	expect(() =>
	store.unsetPreference({ path: 'simple.object' }),
	).to.throw()
	})

	it('should not allow (un)setting depth > 3', () => {
	- const store = useServerSideStorageStore()
	+ const store = useSyncConfigStore()
	store.setPreference({ path: 'simple.object', value: {} })
	expect(() =>
	store.setPreference({ path: 'simple.object.lv3', value: 1 }),
	).to.not.throw()
	expect(() =>
	store.setPreference({ path: 'simple.object.lv3.lv4', value: 1 }),
	).to.throw()
	expect(() =>
	store.unsetPreference({ path: 'simple.object.lv3', value: 1 }),
	).to.not.throw()
	expect(() =>
	store.unsetPreference({ path: 'simple.object.lv3.lv4', value: 1 }),
	).to.throw()
	})
	})
	})

	describe('helper functions', () => {
	describe('_moveItemInArray', () => {
	it('should move item according to movement value', () => {
	expect(_moveItemInArray([1, 2, 3, 4], 4, -1)).to.eql([1, 2, 4, 3])
	expect(_moveItemInArray([1, 2, 3, 4], 1, 2)).to.eql([2, 3, 1, 4])
	})
	it('should clamp movement to within array', () => {
	expect(_moveItemInArray([1, 2, 3, 4], 4, -10)).to.eql([4, 1, 2, 3])
	expect(_moveItemInArray([1, 2, 3, 4], 3, 99)).to.eql([1, 2, 4, 3])
	})
	})
	describe('_getRecentData', () => {
	it('should handle nulls correctly', () => {
	expect(_getRecentData(null, null, true)).to.eql({
	recent: null,
	stale: null,
	needUpload: true,
	})
	})

	it("doesn't choke on invalid data", () => {
	expect(_getRecentData({ a: 1 }, { b: 2 }, true)).to.eql({
	recent: null,
	stale: null,
	needUpload: true,
	})
	})

	it('should prefer the valid non-null correctly, needUpload works properly', () => {
	const nonNull = { _version: VERSION, _timestamp: 1 }
	expect(_getRecentData(nonNull, null, true)).to.eql({
	recent: nonNull,
	stale: null,
	needUpload: true,
	})
	expect(_getRecentData(null, nonNull, true)).to.eql({
	recent: nonNull,
	stale: null,
	needUpload: false,
	})
	})

	it('should prefer the one with higher timestamp', () => {
	const a = { _version: VERSION, _timestamp: 1 }
	const b = { _version: VERSION, _timestamp: 2 }

	expect(_getRecentData(a, b, true)).to.eql({
	recent: b,
	stale: a,
	needUpload: false,
	})
	expect(_getRecentData(b, a, true)).to.eql({
	recent: b,
	stale: a,
	needUpload: false,
	})
	})

	it('case where both are same', () => {
	const a = { _version: VERSION, _timestamp: 3 }
	const b = { _version: VERSION, _timestamp: 3 }

	expect(_getRecentData(a, b, true)).to.eql({
	recent: b,
	stale: a,
	needUpload: false,
	})
	expect(_getRecentData(b, a, true)).to.eql({
	recent: b,
	stale: a,
	needUpload: false,
	})
	})
	})

	describe('_getAllFlags', () => {
	it('should handle nulls properly', () => {
	expect(_getAllFlags(null, null)).to.eql([])
	})
	it('should output list of keys if passed single object', () => {
	expect(
	_getAllFlags({ flagStorage: { a: 1, b: 1, c: 1 } }, null),
	).to.eql(['a', 'b', 'c'])
	})
	it('should union keys of both objects', () => {
	expect(
	_getAllFlags(
	{ flagStorage: { a: 1, b: 1, c: 1 } },
	{ flagStorage: { c: 1, d: 1 } },
	),
	).to.eql(['a', 'b', 'c', 'd'])
	})
	})

	describe('_mergeFlags', () => {
	it('should handle merge two flag sets correctly picking higher numbers', () => {
	expect(
	_mergeFlags(
	{ flagStorage: { a: 0, b: 3 } },
	{ flagStorage: { b: 1, c: 4, d: 9 } },
	['a', 'b', 'c', 'd'],
	),
	).to.eql({ a: 0, b: 3, c: 4, d: 9 })
	})
	})

	describe('_mergePrefs', () => {
	it('should prefer recent and apply journal to it', () => {
	expect(
	_mergePrefs(
	// RECENT
	{
	simple: { a: 1, b: 0, c: true },
	_journal: [
	{ path: 'simple.b', operation: 'set', args: [0], timestamp: 2 },
	{
	path: 'simple.c',
	operation: 'set',
	args: [true],
	timestamp: 4,
	},
	],
	},
	// STALE
	{
	simple: { a: 1, b: 1, c: false },
	_journal: [
	{ path: 'simple.a', operation: 'set', args: [1], timestamp: 1 },
	{ path: 'simple.b', operation: 'set', args: [1], timestamp: 3 },
	],
	},
	),
	).to.eql({
	simple: { a: 1, b: 1, c: true },
	_journal: [
	{ path: 'simple.a', operation: 'set', args: [1], timestamp: 1 },
	{ path: 'simple.b', operation: 'set', args: [1], timestamp: 3 },
	{ path: 'simple.c', operation: 'set', args: [true], timestamp: 4 },
	],
	})
	})

	it('should allow setting falsy values', () => {
	expect(
	_mergePrefs(
	// RECENT
	{
	simple: { a: 1, b: 0, c: false },
	_journal: [
	{ path: 'simple.b', operation: 'set', args: [0], timestamp: 2 },
	{
	path: 'simple.c',
	operation: 'set',
	args: [false],
	timestamp: 4,
	},
	],
	},
	// STALE
	{
	simple: { a: 0, b: 0, c: true },
	_journal: [
	{ path: 'simple.a', operation: 'set', args: [0], timestamp: 1 },
	{ path: 'simple.b', operation: 'set', args: [0], timestamp: 3 },
	],
	},
	),
	).to.eql({
	simple: { a: 0, b: 0, c: false },
	_journal: [
	{ path: 'simple.a', operation: 'set', args: [0], timestamp: 1 },
	{ path: 'simple.b', operation: 'set', args: [0], timestamp: 3 },
	{ path: 'simple.c', operation: 'set', args: [false], timestamp: 4 },
	],
	})
	})

	it('should work with strings', () => {
	expect(
	_mergePrefs(
	// RECENT
	{
	simple: { a: 'foo' },
	_journal: [
	{
	path: 'simple.a',
	operation: 'set',
	args: ['foo'],
	timestamp: 2,
	},
	],
	},
	// STALE
	{
	simple: { a: 'bar' },
	_journal: [
	{
	path: 'simple.a',
	operation: 'set',
	args: ['bar'],
	timestamp: 4,
	},
	],
	},
	),
	).to.eql({
	simple: { a: 'bar' },
	_journal: [
	{ path: 'simple.a', operation: 'set', args: ['bar'], timestamp: 4 },
	],
	})
	})

	it('should work with objects', () => {
	expect(
	_mergePrefs(
	// RECENT
	{
	simple: { lv2: { lv3: 'foo' } },
	_journal: [
	{
	path: 'simple.lv2.lv3',
	operation: 'set',
	args: ['foo'],
	timestamp: 2,
	},
	],
	},
	// STALE
	{
	simple: { lv2: { lv3: 'bar' } },
	_journal: [
	{
	path: 'simple.lv2.lv3',
	operation: 'set',
	args: ['bar'],
	timestamp: 4,
	},
	],
	},
	),
	).to.eql({
	simple: { lv2: { lv3: 'bar' } },
	_journal: [
	{
	path: 'simple.lv2.lv3',
	operation: 'set',
	args: ['bar'],
	timestamp: 4,
	},
	],
	})
	})

	it('should work with unset', () => {
	expect(
	_mergePrefs(
	// RECENT
	{
	simple: { lv2: { lv3: 'foo' } },
	_journal: [
	{
	path: 'simple.lv2.lv3',
	operation: 'set',
	args: ['foo'],
	timestamp: 2,
	},
	],
	},
	// STALE
	{
	simple: { lv2: {} },
	_journal: [
	{
	path: 'simple.lv2.lv3',
	operation: 'unset',
	args: [],
	timestamp: 4,
	},
	],
	},
	),
	).to.eql({
	simple: { lv2: {} },
	_journal: [
	{
	path: 'simple.lv2.lv3',
	operation: 'unset',
	args: [],
	timestamp: 4,
	},
	],
	})
	})
	})

	describe('_resetFlags', () => {
	it('should reset all known flags to 0 when reset flag is set to > 0 and < 9000', () => {
	const totalFlags = { a: 0, b: 3, reset: 1 }

	expect(_resetFlags(totalFlags)).to.eql({ a: 0, b: 0, reset: 0 })
	})
	it('should trim all flags to known when reset is set to 1000', () => {
	const totalFlags = { a: 0, b: 3, c: 33, reset: COMMAND_TRIM_FLAGS }

	expect(_resetFlags(totalFlags, { a: 0, b: 0, reset: 0 })).to.eql({
	a: 0,
	b: 3,
	reset: 0,
	})
	})
	it('should trim all flags to known and reset when reset is set to 1001', () => {
	const totalFlags = {
	a: 0,
	b: 3,
	c: 33,
	reset: COMMAND_TRIM_FLAGS_AND_RESET,
	}

	expect(_resetFlags(totalFlags, { a: 0, b: 0, reset: 0 })).to.eql({
	a: 0,
	b: 0,
	reset: 0,
	})
	})
	})
	})
	})

File Metadata

Mime Type: text/x-diff
Expires: Sat, Oct 10, 9:49 PM (1 d, 9 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1785474
Default Alt Text: (138 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions